/*
Theme Name: Bril Studio
Theme URI: 
Description: 
Author: olivier@capstone.nl
Version: 1.0
Tags: 
*/
@import "/wp-includes/css/dist/block-library/style.min.css";

html, body, div, span, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, a, em, hr, img, figure, small, b, u, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, tr, th, td {
	background:transparent;
	border:0;
	margin:0;
	padding:0;
	vertical-align:baseline;
}

* {
	box-sizing: border-box;
	scroll-behavior:smooth;
}

body {
	font:1.125rem/1.4375 'Abel', sans-serif;
	--color-dark: #1D1D1B;
	--color-orange:#BA8342;
	--color-darkbrown:#252914;
	color:var(--color-dark);
	overflow-x:hidden;
}

#site {
	transform-origin:top left;
	position:absolute;
}

	#site.loaded {
		transition:1s all ease;
	}

h1, h2, h3, h4, h5 {
}

	h1,
	.main-menu a {
		font-family:'Playfair Display',sans-serif;
		font-size:2.1875rem;
		line-height:2.625rem;
		letter-spacing:0.35px;
		margin:40px 0 70px;
	}	

		.main-menu a {
			line-height:3.75rem;
		}

	body[data-page="home"] h2 {
		font-size:3.125rem;
		line-height:3.75rem;
		letter-spacing:0.5px;
		font-weight:400;
		text-transform:uppercase;
	}

	h2, h3 {
		font-size:2.1875rem;
		line-height:2.625rem;
		letter-spacing:0.35px;
		margin-bottom:10px;
		color:var(--color-orange);
		font-weight:400;
		text-transform:uppercase;
	}

a {
	color:var(--color-orange);
	font:700 1rem/1 'Playfair Display',sans-serif;
	text-decoration:none;
}

b, strong {
}

figure {
	position:relative;
}

iframe {
	width:103%;
	margin-left:-3%;
}

header {
	height:142px;
	background:var(--color-darkbrown);
	display:flex;
	align-items:center;
	position:relative;
	z-index:2;
}

	body[data-page="home"] header {
		display:none;
	}

	header section {
		display:flex;
	}

.logo {
	margin-left:-6px;
}

.main-menu {
	background:#f0f0ee;
	position:fixed;
	top:0;
	left:0;
	width:100%;
	height:100%;
	padding:200px 140px 0;
	list-style:none;
	text-decoration:underline;
	z-index:2;
	opacity:0;
	pointer-events:none;
	transition:all .5s ease;
}

	#site.active .main-menu {
		opacity:1;
		pointer-events:auto;
	}

p {
	margin-bottom:1em;
}

	p.link {
		padding-left:18px;
		border-left:1px solid var(--color-orange);
		line-height:1;
		margin-top:1.5rem;
	}

		p.link:after,
		header a.link:after,
		footer a.link:after,
		.merken a:after,
		aside a:after {
			content:"";
			background:url(https://cstor.eu/brilstudio/2022/06/5831dd3c-arrow.svg) no-repeat;
			display:block;
			width:19px;
			height:15px;
			margin-top:6px;
			cursor:pointer;
		}
		
		@keyframes anim {
			0%  { transform:translateX(0px); }
			50%  { transform:translateX(5px); }
			100%  { transform:translateX(0px); }
		}

			p.link:hover:after, 
			header a.link:hover:after,
			footer a.link:hover:after,
			.merken a:hover:after,
			aside a:hover:after {
				animation-name: anim;
				animation-duration: 1s;
				animation-timing-function: ease-in-out;
			}

img {
	max-width:100%;
	height:auto;
}

.has-white-color {
	color:#fff;
}

section {
	margin:0 auto;
}

#mobile-menu {
	position:absolute;
	right:140px;
	display:block;
	width:45px;
	height:1px;
	background:var(--color-orange);
	margin:20px 0;
	transition:all .5s ease;
	top:50px;
	cursor:pointer;
	z-index:3;
}

	.active #mobile-menu {
		background:#fff0;
	}

	#mobile-menu:before,
	#mobile-menu:after {
		content:"";
		display:block;
		height:4000%;
		position:absolute;
		width:100%;
		top:-2000%;
		transition:all .5s ease;
	}

		#mobile-menu:before {
			border-top:1px solid var(--color-orange);
		}

		#mobile-menu:after {
			border-bottom:1px solid var(--color-orange);
		}

		#mobile-menu:before {
			transform-origin:1px 8px;
		}

			.active #mobile-menu:before {
				width:112%;
				transform:rotate(45deg);
			}

		#mobile-menu:after {
			transform-origin:0px 30px;
		}

			.active #mobile-menu:after {
				width:112%;
				transform:rotate(-45deg);
			}

article {
	width:1440px;
	margin:0 auto;
	position:relative;
	overflow:hidden;
}

section,
h1,
body:not([data-page="home"]) .wp-block-columns,
.wp-block-media-text {
	margin-left:140px;
	margin-right:140px;
}

.nomargin {
	margin:0 !important;
}

.visual {
	width:1180px;
	height:845px;
	position:absolute;
	background:url("https://cstor.eu/brilstudio/2022/04/visual.webp") no-repeat;
	background-size:cover;
	z-index:-1;
}

	.visual:before {
		content:"";
		width:100%;
		height:100%;
		background:#000;
		opacity:.26;
		position:absolute;
	}

aside {
	width:376px;
	padding:57px;
	position:absolute;;
	background:var(--color-darkbrown);
	right:140px;
	top:130px;
	z-index:2;
	color:#fff;
	opacity:0;
	transition:all .5s ease;
	pointer-events:none;
}

	body[data-page="home"] aside,
	#site.active aside {
		opacity:1;
		pointer-events:auto;
	}


	aside > img:first-child {
		position:relative;
		margin:0 0 25px -9px;
	}

	aside a,
	.merken a,
	header a.link,
	footer a.link {
		display:flex;
		border-bottom:1px solid var(--color-orange);
		line-height:3;
		align-items:center;
		color:#fff;
	}

		.merken a {
			color:var(--color-orange);
			width:65%;
		}

			.merken a:after {
				margin-left:auto;
			}

		header a.link,
		footer a.link {
			line-height:23px;
			padding-bottom:10px;
			margin-bottom:10px;
		}

			header a.link {
				font-size:1rem;
				font-weight:500;
				margin-left:300px;
				width:255px;
				margin-bottom:5px;
				padding-bottom:9px;
			}

		header a.link:after,
		footer a.link:after,
		aside a:after {
			margin-left:auto;
		}

	aside p {
		font-size:1rem;
		margin:10px 0 0;
	}

		aside p:first-of-type {
			margin-top:12px;
		}

		aside p:last-child {
			padding-bottom:12px;
			border-bottom:1px solid var(--color-orange);
		}

.wp-block-cover {
	position:relative;
	justify-content:left;
	z-index:1;
}

	@keyframes fadein {
		0%  { 
			transform:translateY(10%); 
			opacity:0;
		}
		100%  { 
			transform:translateX(0%); 
			opacity:1;
		}
	}

	body[data-page="home"] .wp-block-cover:first-child {
		width:1158px;
	}

	.wp-block-cover > div {
		margin:125px 0 0 220px;
		max-width:500px;
	}

		body[data-page="home"] .wp-block-cover:first-child > div {
			opacity:0;
			animation-name:fadein;
			animation-duration: 2s;
			animation-fill-mode: forwards;
			animation-timing-function: ease-in-out;
		}

	.wp-block-cover h2 + p {
		margin-top:2em;
	}

blockquote {
	font:1.75rem/2.1875rem 'Playfair Display',sans-serif;
	padding-left:25px;
	border-left:1px solid var(--color-orange);
}

	blockquote p {
		margin:.5em 0;
	}

	.home-mid blockquote {
		position:absolute;
		right:140px;
		top:134px;
		width:550px;
	}

	blockquote img {
		max-width:56px;
	}

body:not([data-page="home"]) .wp-block-cover {
	margin-bottom:100px;
}

body:not([data-page="home"]) .wp-block-cover__inner-container {
	margin-top:0;
}

.wp-block-cover__background {
	mix-blend-mode:multiply;
}

body[data-page="home"] .wp-block-cover + .wp-block-columns {
	padding:500px 210px 118px 139px;
	position:relative;
	top:-350px;
	margin-bottom:-180px;
}

	body[data-page="home"] .home-mid + .wp-block-columns {
		z-index:1;
		padding-top:200px;
		padding-bottom:0;
	}
	
		body[data-page="home"] .home-mid + .wp-block-columns > div:nth-child(2) {
			margin:0 114px;
		}

.wp-block-image {
	margin-bottom:11px;
}

.wp-block-media-text {
	margin-bottom:100px;
}

.wp-block-media-text .wp-block-media-text__media {
	max-width:95%;
}

.wp-block-media-text.has-media-on-the-right .wp-block-media-text__content {
	padding:0 25% 0 0;
}

body[data-page="oogzorg"] .wp-block-media-text:last-child:before {
	content:"";
	background:#f0f0ee;
	position:absolute;
	left:0;
	margin-top:40px;
	width:100%;
	height:100%;
	z-index:-1;
}

body[data-page="contact"] .wp-container-2 {
	padding:46px 36px 36px;
}

.wp-block-gallery {
	display:grid !important;
	grid-template-columns:278px 278px 278px;
	grid-template-rows:278px 278px ;
	grid-gap:1rem;
	margin:0 0 157px 313px;
}

	.wp-block-gallery > figure {
		width:auto !important;
		height:auto;
	}

		.wp-block-gallery > figure:nth-child(6n + 1),
		.wp-block-gallery > figure:nth-child(6n + 2),
		.wp-block-gallery > figure:nth-child(6n + 3) {
			margin-left:-100px !important;
		}

		.wp-block-gallery > figure:nth-child(6n + 7),
		.wp-block-gallery > figure:nth-child(6n + 8),
		.wp-block-gallery > figure:nth-child(6n + 9) {
			margin-top: 18px !important;
		}

		.top-left:before,
		.bottom-left:before,
		.bottom-mid:before,
		.bottom-right:before,
		.wp-block-media-text > figure:before, 
		.wp-block-gallery > figure:nth-child(6n + 1):before, 
		.wp-block-gallery > figure:nth-child(6n + 3):before, 
		.wp-block-gallery > figure:nth-child(6n + 4):before, 
		.wp-block-gallery > figure:nth-child(6n + 6):before {
			content:"";
			position:absolute;
			width:108%;
			height:1px;
			background:var(--color-orange);
			top:0;
			left:-8%;
		}

			.bottom-right:before,
			.bottom-mid:before,
			.wp-block-media-text.has-media-on-the-right > figure:before, 
			.wp-block-gallery > figure:nth-child(6n + 3):before, 
			.wp-block-gallery > figure:nth-child(6n + 6):before {
				left:0px;
			}

			.bottom-left:before,
			.bottom-mid:before,
			.bottom-right:before,
			.wp-block-gallery > figure:nth-child(6n + 4):before,
			.wp-block-gallery > figure:nth-child(6n + 6):before {
				top:100%;
			}

		.top-left:after,
		.bottom-left:after,
		.bottom-mid:after,
		.bottom-right:after,
		.wp-block-media-text > figure:after, 
		.wp-block-gallery > figure:after {
			content:"";
			position:absolute;
			height:108%;
			width:1px;
			background:var(--color-orange);
			left:0;
			top:-8%;
		}

				.bottom-right:after,
				.wp-block-media-text.has-media-on-the-right > figure:after, 
				.wp-block-gallery > figure:nth-child(6n + 3):after, 
				.wp-block-gallery > figure:nth-child(6n + 6):after {
					left:100%;
				}
				
				.bottom-right:after,
				.bottom-mid:after,
				.bottom-left:after,
				.wp-block-gallery > figure:nth-child(6n + 4):after, 
				.wp-block-gallery > figure:nth-child(6n + 5):after, 
				.wp-block-gallery > figure:nth-child(6n + 6):after {
					top:0;
				}

.gallery-header {
	width:866px;
	margin:0 auto;
	position:relative;
	left:-75px;
	white-space:nowrap;
}

	.gallery-header > div {
		flex-grow:0 !important;
		flex-basis:278px !important;
	}

		.gallery-header > div:nth-child(2) {
			flex-basis:308px !important;
		}

		.gallery-header > div:last-child > div:first-child > div:first-child {
			flex-basis:120px;
		}

	.gallery-header p.link {
		margin-top:2px;
	}

footer {
	background:var(--color-darkbrown);
	padding:80px 260px 57px 140px;
	position:relative;
	z-index:1;
	display:flex;
	color:#fff;
}

	footer > div {
		flex-basis:278px;
	}

		footer > div:nth-child(2) {
			margin:0 114px;
		}

	footer p {
		font-size:1rem;
		border-bottom:1px solid var(--color-orange);
		padding-bottom:10px;
		margin-bottom:10px;
	}

	footer .logo {
		max-width:unset;
		margin-bottom:40px;
	}

	footer span {
		font-family:'Playfair Display',serif;
	}

	footer .social {
		border:none;
		margin-top:1rem;
	}

		footer .social a {
			display:block;
			margin-top:9px;
		}

	#post-footer {
		height:1px;
		background:var(--color-orange);
		margin:1rem 0 35px;
		position:relative;
		z-index:1;
	}

form {
	max-width:470px;
	padding:48px 36px;
	background:#f0f0ee;
}

	input[type="text"],
	input[type="email"],
	textarea {
		border:none;
		padding:15px 20px;
		font:1rem 'Abel',sans-serif;
		margin-bottom:14px;
		width:100%;
	}


	input[type="submit"] {
		border:none;
		font:bold 1rem "Playfair Display";
		color:var(--color-orange);
		padding:0;
		cursor:pointer;
		background:none;
	}

	/*
	 * background:url(https://cstor.eu/brilstudio/2022/06/5831dd3c-arrow.svg) no-repeat;
	input[type="submit"]:after {
	*/

.wp-block-gallery a img {
	pointer-events:none;
}

zoom {
	position:fixed;
	top:0;
	left:0;
	width:100%;
	height:100vh;
	display:none;
	z-index:3;
	padding:5%;
	align-items:center;
	justify-content:center;
	background:#000d;
	cursor:pointer;
}

	zoom img {
		height: 100%;
		object-fit: contain;
		width: 100%;
	}


	zoom:after {
		content:"\2573";
		position:absolute;
		top:20px;
		right:20px;
		color:#fff;
	}

	.zoom-active {
		overflow:hidden;
	}

		.zoom-active zoom {
			display:flex;
		}

@media only screen and (max-width: 768px) {
	html {
		zoom:1;
	}

	#site,
	article,
	.gallery-header,
	.wp-block-cover {
		width:100% !important;
		overflow:hidden;
	}

	header {
		height:60px;
	}

		header .logo img {
			width:210px;
		}

	h1 {
		margin:25px 37px;
		font-size:1.5rem;
	}

	h3 {
		font-size:1.55rem;
		line-height:normal;
	}

	body[data-page="home"] .wp-block-cover:first-child {
		align-items:flex-start;
		padding:100px 36px;
		min-height:436px !important;
	}
	
		.hide-mobile,
		body[data-page="home"] .wp-block-cover p.link {
			display:none;
		}

	body[data-page="home"] .wp-block-cover + .wp-block-columns {
		top:-100px;
		padding-top:0;
		padding-left:36px;
		padding-right:36px;
		margin:0 !important;
	}

		body[data-page="home"] .wp-block-cover:first-child + .wp-block-columns {
			top:0;
			padding-top:420px;
			margin:0 !important;
		}

	.gallery-header {
		left:auto;
		padding-top:40px;
		margin:0 !important;
	}

	.home-mid + .wp-block-columns > div:nth-child(2) {
		margin:40px 0 !important;
	}

	.gallery-header .wp-container-8 > .wp-block-column {
		flex-basis:50% !important;
		padding-left:36px !important;;
		margin-top:15px;
		white-space:normal;
	}

	.wp-block-spacer {
		height:25px !important;
	}

	.wp-block-gallery {
		grid-template-columns:1fr 1fr;
		grid-template-rows:160px;
		margin:0;
		padding:0 36px 100px;
	}

	article > p.has-text-align-center {
		padding:0 36px;
	}

	blockquote {
		/*margin-left:16px;*/
		font-size:1.25rem;
		line-height:1.4;
	}

		.wp-block-gallery > figure:nth-child(6n + 1),
		.wp-block-gallery > figure:nth-child(6n + 2),
		.wp-block-gallery > figure:nth-child(6n + 3) {
			margin:0 !important;
		}

		.wp-block-gallery > figure:nth-child(even) {
			top:25px !important;
		}

	.wp-block-cover > div {
		margin:0;
	}

	.wp-block-cover__inner-container {
		position:relative !important;
		left:auto !important;
	}

	body:not([data-page="home"]) .wp-block-cover {
		min-height:350px !important;
	}

	.wp-block-media-text {
		margin-bottom:50px;
	}

		.wp-block-media-text .wp-block-media-text__content {
			padding:0 !important;
		}

		.wp-block-media-text .wp-block-media-text__media {
			margin-bottom:25px;
		}

	aside {
		top:280px;
		width:calc(100% - 72px);
		right:auto;
		margin-left:36px;
	}

	h2 {
		font-size:30px !important;
		line-height:35px !important;
		letter-spacing:.3px !important;
	}

	.main-menu {
		padding:36px;
	}

		.main-menu a {
			font-size:20px;
			line-height:30px;
		}

	section, 
	.wp-block-columns,
	.wp-block-media-text {
		margin-left:37px !important;
		margin-right:37px !important;
	}

		.wp-block-columns.nomargin, 
		.wp-block-columns.gallery-header { 
			margin-left:0px !important;
			margin-right:0px !important;
		}

	.home-mid {
		min-height:485px !important;
	}

		.home-mid blockquote {
			position:relative;
			right:unset;
			top:-70px;
			width:auto;
		}

	#mobile-menu {
		top:6px;
		right:26px;
		transform:scale(.8);
		transform-origin: right top;
	}

	footer {
		padding:36px;
		flex-direction:column;
	}

		footer > div {
			flex-basis:100%;
			margin:0 0 20px !important;
		}
}

body[data-page="afspraak"] h2 {
	margin: 40px 140px 70px 140px;
	position: relative;
	z-index: 1;
}

@media (max-width: 768px) {
	body[data-page="afspraak"] h2 {
		margin: 25px 37px;
	}
}

.afspraak__bg img {
	width: 100%;
	height: 100%;
	position: absolute;
	left: 0;
	top: 0;
	object-fit: cover;
}

.afspraak__bg:after {
	content: '';
	background-color: rgba(37, 41, 20, 0.5);
	width: 100%;
	height: 100%;
	position: absolute;
	left: 0;
	top: 0;
}

body[data-page="afspraak"]  section {
	position: relative;
	z-index: 1;
	padding-bottom: 40px;
} 


.phone-link {
	display: inline;
	border: none;
	font-weight: normal;
	font-family: 'Abel', sans-serif;
	line-height: 1.4375;
}

.phone-link:after {
	display: none;
}


/* Recaptcha */
/*.grecaptcha-badge { 
	visibility: hidden;
}
.recaptcha-disclaimer {
	font-size: 0.85rem;
	color: #666;
	margin-top: 1em;
}

.recaptcha-disclaimer a {
	font-size: 0.95em;
	font-family: 'Abel', sans-serif;
	color: inherit;
}

.recaptcha-disclaimer a:hover {
	color: var(--color-orange);
}
*/