@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');


body,html{
	width:100%;
	height:auto;
	padding:0;margin:0;
	scroll-behavior: smooth;
	overflow:auto;
	position:relative;
	font-family: 'Open Sans', sans-serif;
	overflow-x:hidden;
}

body {
	background-color:white;
	transition: all 0s, background 1s, opacity .5s;
	-webkit-transition: all 0s, background 1s, opacity .5s;

}
body.faded { opacity:0; }
@font-face {
	font-family: bauhaus;
	src:url(fonts/Bauhaus_Demi.ttf);
}
:root {
	--orange: #ef7d00;
	--blue: #00B2DD;
	--red: #F83D2C;
	--green: #68C445;
	--yellow: #FFC400; /* #FFD500; */
	--purple: #800080;
	--font: #ffffff;
	--root: var(--orange);
}
::selection {
	color: black;
	background-color: rgba(240,125,0,.7);
}
::moz-selection {
	color: black;
	background-color: rgba(240,125,0,.7);
}
a { color:var(--root); }
p {
	font-size:16px;
	line-height:26px;
	font-weight:lighter;
}
ul {
	font-weight:300;

}
.container-fluid {
	max-width:1670px;
	margin-left:0;
	margin:0px auto;
}
.white-space {
	padding-top:100px;
	padding-bottom:100px;
}
@media screen and (max-width:767px) {
	.white-space {
		padding-top:50px;
		padding-bottom:50px;
	}
}
a.button, .button, a span.button {
	color:var(--root) !important;
	font-size:16px;
	display:inline-block;
	position:relative;
	overflow:visible;
	cursor:pointer;
	text-transform:lowercase;
	padding:7px 25px;
	font-weight:500;
	border:2px solid var(--root);
	background-color:white;
	z-index:1;
	transition:color .3s;
	-webkit-transition:color .3s;
	overflow:hidden;
	text-decoration:none;
	line-height:24px !important;
	height:42px !important;
}
a.button.filled {
	border:0px;
	padding:9px 25px;
}
.cl-orange, a.cl-orange, span.cl-orange {color:var(--orange); }
.cl-red, a.cl-red, span.cl-red {color:var(--red); }
.cl-green, a.cl-green, span.cl-green {color:var(--green); }
.cl-blue, a.cl-blue, span.cl-blue {color:var(--blue); }
.cl-yellow, a.cl-yellow, span.cl-yellow {color:var(--yellow); }
.cl-purple, a.cl-purple, span.cl-purple {color:var(--purple); }

a.button.cl-orange, a span.button.cl-orange { color:var(--orange) !important;  }
a.button.cl-green, a span.button.cl-green { color:var(--green) !important; border:2px solid var(--green); }
a.button.cl-blue, a span.button.cl-blue { color:var(--blue) !important; border:2px solid var(--blue); }
a.button.cl-red, a span.button.cl-red { color:var(--red) !important; border:2px solid var(--red); }
a.button.cl-yellow, a span.button.cl-yellow { color:var(--yellow) !important; border:2px solid var(--yellow); }
a.button.cl-purple, a span.button.cl-purple { color:var(--purple) !important; border:2px solid var(--purple); }


a.button.filled, a span.button.filled {
	color:white !important;
	background-color:var(--root);

}
a.button.filled.cl-orange, a span.button.filled.cl-orange { background-color:var(--orange); }
a.button.filled.cl-green, a span.button.filled.cl-green { background-color:var(--green); }
a.button.filled.cl-red, a span.button.filled.cl-red { background-color:var(--red); }
a.button.filled.cl-blue, a span.button.filled.cl-blue { background-color:var(--blue); }
a.button.filled.cl-yellow, a span.button.filled.cl-yellow { background-color:var(--yellow); }
a.button.filled.cl-purple, a span.button.filled.cl-purple { background-color:var(--purple); }

a.button.filled.cl-orange:hover, a span.button.filled.cl-orange:hover { color:var(--orange) !important; }
a.button.filled.cl-green:hover, a span.button.filled.cl-green:hover { color:var(--green) !important; }
a.button.filled.cl-red:hover, a span.button.filled.cl-red:hover { color:var(--red) !important; }
a.button.filled.cl-blue:hover, a span.button.filled.cl-blue:hover { color:var(--blue) !important; }
a.button.filled.cl-yellow:hover, a span.button.filled.cl-yellow:hover { color:var(--yellow) !important; }
a.button.filled.cl-purple:hover, a span.button.filled.cl-purple:hover { color:var(--purple) !important; }

	a.button:hover, a span.button:hover { color:white !important; }
	a.button.filled:hover, a span.button.filled:hover { color:white !important; border-color:black;  }
	a.button:after, a span.button:after {
		position:absolute;
		width:100%;
		transform:scaleX(0);
		background-color:var(--root);
		height:100%;
		content: " ";
		bottom:0%;
		left:0%;
		transition:transform .3s, opacity .4s;
		-webkit-transition:transform .3s, opacity .4s;
		z-index:-2;
		transform-origin:inherit;
		opacity:0;
	}
	a.button.cl-green:after, a span.button.cl-green:after { background-color:var(--green);  }
	a.button.cl-blue:after, a span.button.cl-blue:after { background-color:var(--blue);  }
	a.button.cl-red:after, a span.button.cl-red:after { background-color:var(--red);  }
	a.button.cl-yellow:after, a span.button.cl-yellow:after { background-color:var(--yellow);  }
	a.button.cl-purple:after, a span.button.cl-purple:after { background-color:var(--purple);  }


	a.button.filled:after, a span.button.filled:after { background-color:black; }
	a.button:hover:after, a span.button:hover:after {
		transform:scaleX(1);
		transition:transform .3s, opacity 0s;
		-webkit-transition:transform .3s, opacity 0s;
		opacity:1;
		background-color:black;
	}


.cursor {
	width:50px;
	height:50px;
	border:1px solid var(--root);
	position:fixed;
	z-index:999999;
	border-radius:50px;
	transform:translate(-50%, -50%) scale(0);
	pointer-events:none;
	transition:transform .3s, opacity .3s;
	-webkit-transition:transform .3s, opacity .3s;
	opacity:0;
}
	.cursor.triggered {
		opacity:1;
		transform:translate(-50%, -50%) scale(1);
	}
@media screen and (max-width:767px) {
	.cursor {
		display:none;
	}
}
.cl-orange {
	color:var(--orange);
}
.v-align {
	position:relative;
	top:50%;
	height:auto;
	transform:translateY(-50%);
	-webkit-transform:translateY(-50%);
	-moz-transform:translateY(-50%);
	-ms-transform:translateY(-50%);
}
.v-align.float {
	position:absolute;
}
.centerline {
	border-top:4px dotted red;
	width:100%;
	position:absolute;
	left:0;
	top:0;
	z-index:100000;
	display:none;
}


.togglemenu {
    height: 30px;
    padding: 10px 20px;
    cursor: pointer;
    position:absolute;
    right:30px;
    top:40px;
    display:none;
}

.togglemenu i {
	color:#ffdb01;
	font-size:50px;
}

.togglemenu .fa-bars {
	display:inline;
}

.togglemenu.open .fa-bars {
	display:none;
}

.togglemenu .fa-times {
	display:none;
}

.togglemenu.open .fa-times {
	display:inline;
}

#nav-icon span {
  display: block;
  position: absolute;
  height: 1px;
  width: 50%;
  background: #ef8008;
  opacity: 1;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: .25s ease-in-out;
  -moz-transition: .25s ease-in-out;
  -o-transition: .25s ease-in-out;
  transition: .25s ease-in-out;
}

#nav-icon span:nth-child(even) {
  left: 50%;
}

#nav-icon span:nth-child(odd) {
  left:0px;
}

#nav-icon span:nth-child(1), #nav-icon span:nth-child(2) {
  top: 0px;
}

#nav-icon span:nth-child(3), #nav-icon span:nth-child(4) {
  top: 13px;
}

#nav-icon span:nth-child(5), #nav-icon span:nth-child(6) {
  top: 26px;
}

#nav-icon.open span:nth-child(1),#nav-icon.open span:nth-child(6) {
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
}

#nav-icon.open span:nth-child(2),#nav-icon.open span:nth-child(5) {
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

#nav-icon.open span:nth-child(1) {
  left: 5px;
  top: 7px;
}

#nav-icon.open span:nth-child(2) {
  left: calc(50% - 5px);
  top: 7px;
}

#nav-icon.open span:nth-child(3) {
  left: -50%;
  opacity: 0;
}

#nav-icon.open span:nth-child(4) {
  left: 100%;
  opacity: 0;
}

#nav-icon.open span:nth-child(5) {
  left: 5px;
  top: 17px;
}

#nav-icon.open span:nth-child(6) {
  left: calc(50% - 5px);
  top: 17px;
}



.nav-bar {
	width:100%;
	height:100px;
	position:fixed;
	top:0;
	left:00px;
	margin:0px auto;
	padding:0px 100px;
	z-index:10000;
	background: rgb(255,255,255);
	background: linear-gradient(180deg, rgba(255,255,255,1) 0%,rgba(255,255,255,.75) 100%);
	box-shadow:0px 50px 50px 10px rgba(255,255,255,.75);
	*background-color:rgba(255,255,255,.6);
	*backdrop-filter:blur(20px) brightness(200%);
}
@media screen and (max-width:991px) {
	.nav-bar {
		box-shadow:none;
		background: linear-gradient(180deg, rgba(255,255,255,1) 0%,rgba(255,255,255,.0) 100%);
	}
}
	.nav-bar .logo {
		width:360px;
		height:90px;
		margin-top:10px;
		float:left;
		background-image:url('img/benc-logo.png');
		background-size:auto 65px;
		background-position:left bottom;
		background-repeat:no-repeat;
		transition:.6s;
		-webkit-transition:.6s;
	}
	.nav-bar.scrolling .logo {
		width:50px;
	}
	.nav-bar .nav {
		width:calc(100% - 370px);
		text-align:right;
		line-height:100px;
		height:40px;
		line-height:40px;
		margin-top:52px;
		display:block;
		float:right;
		border-bottom:1px solid black;
		transition:.6s;
		-webkit-transition:.6s;
	}
	.nav-bar.scrolling .nav {
		width:calc(100% - 60px);
		border-bottom:1px solid transparent;
	}
		.nav-bar .nav a {
			padding:0px 20px;
			text-transform:lowercase;
			font-weight:lighter;
			letter-spacing:2px;
			cursor:pointer;
			font-size:16px;
			text-decoration:none;
			color:black;
			outline:none;
		}
		.nav-bar .nav a.current {
			color:var(--orange);
			pointer-events:none;
		}
		.nav-bar .nav a:hover {
			color:var(--orange);
		}
		.nav-bar .nav a:last-of-type {
			padding-right:0px;
			*border:1px solid var(--orange);
			*padding:5px 7px;
			font-weight:bold;
		}


.background-reel {
	width:100%;
	z-index:-2;
	position:absolute;
	top:0;
	left:0;
	height:100%;
	font-family:bauhaus;
	font-size:100vh;
	line-height:100vh;
	font-weight:lighter;
	opacity:.15;
	overflow:hidden;
	color:var(--root);
	transition:color .3s;
	-webkit-transition:color .3s;
}

.background-reel.home {
	position:fixed;
}
.background-reel.home.bottom {
	position:absolute;
}
	.background-reel .text {
		width:auto;
		position:absolute;
		top:0;
		left:0;
		background-clip: text;
		-webkit-background-clip: text;
		color:rgba(200,200,200);
	}
	.background-reel.home .text {
		background-attachment:fixed;
		background-image:url('img/bg-reel.jpg');
		background-size:cover;
		color:transparent !important;
		top:unset;
		bottom:0;
	}
	.background-reel.home .text:after {
		content:"brainstormenconcept";
		width:inherit;
		position:inherit;
		bottom:inherit;
		top:inherit;
		color:var(--orange);
		display:block;
		mix-blend-mode:color;
	}
	.background-reel[data-color="yellow"] .text:after { color:var(--yellow); }
	.background-reel[data-color="green"] .text:after { color:var(--green); }
	.background-reel[data-color="blue"] .text:after { color:var(--blue); }
	.background-reel[data-color="red"] .text:after { color:var(--red); }
	.background-reel[data-color="purple"] .text:after { color:var(--purple); }

	.background-reel[data-color="orange"] .text {color:rgba(250, 116,0,.5);}
	.background-reel[data-color="yellow"] .text {color:rgba(255, 196,0,.5);}
	.background-reel[data-color="green"] .text {color:rgba(104, 196,69,.5);}
	.background-reel[data-color="blue"] .text {color:rgba(0, 178,221,.5);}
	.background-reel[data-color="red"] .text {color:rgba(248, 61,44,.5);}
	.background-reel[data-color="purple"] .text {color:rgba(128, 0,128,.5);}
.cont {
	height:auto;
	z-index:2;
	position:relative;
	overflow:hidden;
	background-size:100%  100%;
	width:100%;
	display:block;
	*transform: translate3d(0,0,0);
}
.cont .loader {
	width:100px;
	height:4px;
	background-color:var(--font);
	position:fixed;
	z-index:3;
	top:calc(50vh - 2px);
	left:calc(50% - 50px);
	transition:.3s;
	-webkit-transition:.3s;
	display:none;
}
.cont .loader.loaded {
	opacity:0;
	transform:scale(0);
}
	.cont .loader:after {
		content:" ";
		position:absolute;
		background-color:white;
		box-shadow:0px 0px 5px white;
		height:100%;
		width:20px;
		top:0px;
		animation:loader 3s infinite;
	}

	@keyframes loader {
		0% { width:0%; left:0%; }
		25% { width:100%; left:0%; }
		26% { width:100%; left:unset; right:0%; }
		50% { width:0%; left:unset;  right:0%; }
		75% { width:100%; left:unset; right: 0%; }
		76% { width:100%; right: unset; left:0%; }
		100% { width:0%; right: unset; left:0%; }
	}

.cont .canvas-cont {
	position:fixed;
	width:100vw;
	height:100vh;
	transform:scale(1.1) translate(-45%, -45%);
	left:50%;
	top:150%;
	display:block;
	overflow:visible;
	opacity:1;
	top:50%;
	background-color:transparent;
}
@media screen and (max-width:767px) {
	.canvas-cont { display:none; }
}
.cont .canvas-cont.loaded {
	animation:loadBrains 1s 1;
}
.cont .canvas-cont.hidden {
	opacity:0;
	transform:scale(1.1) translate(-45%, -100%);
}
.cont .canvas-cont.bottom {
	bottom:50vh;
	top:unset;
	position:absolute;
	transform:scale(1.1) translate(-45%, 45%);
	transition:0s;
	-webkit-transition:0s;
}

@keyframes loadBrains {
	0% { opacity:0; top:150%; }
	100% { opacity:1; top:50%; }
}

	.cont .canvas-cont canvas {
		display:block;
		transition:1s;
		-webkit-transition:1s;
		z-index:-1;
		width:100%;
		overflow:hidden;
		height:100%;
		pointer-events:none;
		animation:floating 5s infinite;
		-webkit-animation:floating 5s infinite;
		transition:1s;
		-webkit-transition:1s;

		background-color:transparent;
	}
	.cont .canvas-cont canvas.faded {
		filter:contrast(40%) brightness(140%);
	}

@keyframes floating {
	0% { transform:translateY(0%); }
	50% { transform:translateY(4%); }
	100% { transform:translateY(0%); }
}
@-webkit-keyframes floating {
	0% { transform:translateY(0%); }
	50% { transform:translateY(4%); }
	100% { transform:translateY(0%); }
}



.cont .segment {
	height:100vh;
	max-height:600px;
	color:white;
	position:relative;
	overflow:visible;
	width:100%;
	padding:0px 100px 0px 100px;
	display: flex;
	align-items: center;
	pointer-events:none;
}
.cont .segment.current {
	pointer-events:auto;
}
.cont .segment .content {
	position:fixed;
	top:50%;
	left:50%;
	transform:translate(-50%, -50%);
	z-index:-1;
}

.cont .segment.current .content {
	z-index:5;
}
@media screen and (min-width:576px) {
	.cont .segment.current .content.bottom {
		position:absolute;
		top:unset;
		bottom:50vh;
		transform:translate(-50%, 50%);
	}
}
@media screen and (max-width:576px) {
	.cont .segment.current .content.bottom {
		margin-bottom:100px;
	}
}


.cont .segment.s1 {
	height:100vh;
}
@media screen and (max-width:991px) {
	.cont .segment {
		height:auto;
		max-height:none;

		padding-top:50%;
	}
}
@media screen and (max-width:767px) {
	.cont .canvas-cont {
		max-height:70vw;
	}
	.cont .segment {
		padding-top:70%;
	}
}
@media screen and (max-width:576px) {
	.cont .segment {
			height:auto !important;
		padding:0px !important;
		transform:none;
	}
	.cont .segment .anim-x {

		opacity:1;
			transform:none !important;
	}
	.cont .segment .showcase {
			opacity:1;
			margin-bottom:100px !important;
	}
		.cont .segment .showcase .img:after, .cont .segment .showcase .img:before {
			height:100%;
		}
		.cont .segment .showcase .head {
			transform:scale(1);
		}
		.cont .segment .content {
			position:relative;
			transform:none !important;
			top:0;
			left:0;
		}
}

		.cont .segment h1 {
			color:black ;
			font-size:80px;
			line-height:90px;
			position:relative;
			width:auto;
			font-weight:lighter;
			letter-spacing:2px;
			display:block;

			z-index:5;
			mix-blend-mode: multiply;
			height:auto;
			text-transform: uppercase;
			font-family: 'Secular One', sans-serif;
		}
		.cont .segment h2 {
			color:black ;
			font-size:70px;
			line-height:90px;

			position:relative;
			width:auto;
			font-weight:lighter;
			letter-spacing:2px;
			display:block;

			z-index:5;
			mix-blend-mode: multiply;
			height:auto;
			*border-bottom:2px solid var(--root);
			text-transform: uppercase;
			font-family: 'Secular One', sans-serif;
		}

			.cont .segment h1 span, .cont .segment h2 span {
  				color:var(--root);
					*animation:colors2 10s infinite linear ;
					*background-attachment: fixed;
    			*background-image: url(img/kleur.jpg);
    			*background-size: cover;
    			*color: transparent !important;
					*background-clip: text;
    			*-webkit-background-clip: text;
			}

@keyframes colors {
	0% { color:var(--orange); }
	17% { color:var(--yellow); }
	34% { color:var(--green); }
	51% { color:var(--blue); }
	66% { color:var(--red); }
	83% { color:var(--purple); }
	100% { color:var(--orange); }
}
@keyframes colors2 {
	0% { color:var(--orange); }
	13% { color:var(--orange); }
	17% { color:var(--yellow); }
	30% { color:var(--yellow); }
	34% { color:var(--green); }
	47% { color:var(--green); }
	51% { color:var(--blue); }
	62% { color:var(--blue); }
	66% { color:var(--red); }
	79% { color:var(--red); }
	83% { color:var(--purple); }
	96% { color:var(--purple); }
	100% { color:var(--orange); }
}
		.cont .segment p {
			height:auto;
			color:black;
			padding:0px;
			color:black;
			*font-size:20px;
			width:100%;
			text-align:left;
			display:inline-block;
			position:relative;
			font-weight:300;
			*line-height:34px;
			line-height:26px;
			font-size:16px;
		}
@media screen and (max-width:767px) {

}

	.from-bottom {
		opacity:0;
		transform:translateY(100%);
		transition:1s;
		-webkit-transition:1s;
	}
	.from-top {
		opacity:0;
		transform:translateY(-100%);
		transition:1s;
		-webkit-transition:1s;

	}
	.segment.current .from-bottom, .segment.current .from-top {
		transform:translateY(0%);
		opacity:1;
	}

	.segment .anim-x {
		opacity:0;
		transform:translateX(-20vw);
		transition:1s;
		-webkit-transition:1s;
	}
	.segment.current ~ .segment .anim-x {
		transform:translateX(20vw);
	}
	.segment.current .anim-x {
		transform:translateX(0vw);
		opacity:1;
	}
	.segment.current p.anim-x {
		transition-delay:.2s;
	}

	.segment .showcase {
		position:absolute;
		width:350px;
		min-height:270px;
		height:auto;
		background-color:black;
		color:white;
		*box-shadow:0px 10px 35px -5px rgba(0,0,0,.3);
		opacity:0;
		transition:opacity .3s;
		-webkit-transition:opacity .3s;
		z-index:0;
		left: 50px;
   		top: 60px;
	}
	.segment .showcase.right {
		left:unset;
		right:10px;
	}
	.segment.current .showcase {
		opacity:1;
		z-index:1;
	}
		.segment .showcase .img {
			position: relative;
			width:100%;
			height:230px;
			margin:-20px 20px 20px -20px;
			background-size:0;
			background-position:center;
			background-repeat:no-repeat;
			*transform:scale(0);
			*transform-origin:bottom right;
			transition:.3s;
			-webkit-transition:.3s;
			overflow:visible;
		}
		.segment .showcase .img:before {
			content:" ";
			background-color:var(--root);
			height:0%;
			width:100%;
			position:absolute;
			top:0;
			left:0;
			z-index:-1;
			transition:.3s;
			transition-delay:.3s;
		}
		.segment .showcase .img:after {
			background-image:inherit;
			background-size:cover;
			background-position:inherit;
			content:" ";
			display:block;
			position:absolute;
			top:0;
			left:0;
			width:100%;
			height:00%;
			transition:.3s;
			transition-delay:.6s;
		}

		.segment.current .showcase .img {
			*transform:scale(1);
			transition-delay:.5s;
		}
		.segment.current .showcase .img:before { height:100%; }
		.segment.current .showcase .img:after { height:100%; }
		.segment .showcase .button {
			position: absolute;
			bottom:20px;
			right:0;
			transform:scale(0);
			transform-origin:top right;
			float:right;
			margin-right:20px;
			display:none;
		}
		.segment .showcase.right .button {
			float:left;
			margin-left:20px;
		}
		.segment.current .showcase .button { transform:scale(1); }
		.segment .showcase .head {
			width:130px;
			height:130px;
			border-radius:130px;
			*box-shadow:0px 5px 14px -3px rgba(0,0,0,.3);
			background-color:white;
			background-position:center;
			background-size:cover;
			position:absolute;
			top:120px;
			left:-40px;
			transform:scale(0);
			transition:.3s;
			-webkit-transition:.3s;
			border:4px solid white;

			overflow:visible;
			z-index:3;
		}
		.segment.current .showcase .head { transform:scale(1);transition-delay:1s;  }



		.segment .showcase .quote {
			position:relative;
			width:100%;
			padding:34px 30px 20px 30px;
			height:auto;
			font-weight:bold;
			font-size:16px;
			color:white;
			display: block;
			left:0;
			*text-shadow: 1px 1px 2px rgba(255, 255, 255, 1);
		}

			.segment .showcase .quote .intro {
				opacity:0;
			}
			.segment .showcase .quote .caption {
				display:none;
			}

			.segment .showcase .quote .intro:before, .segment .showcase .quote .intro:after, .segment .showcase .quote .caption:before, .segment .showcase .quote .caption:after {
				content:"'";
			}
			.segment .showcase .quote span.typing {
				border-right: .15em solid var(--root);
				overflow: hidden;
				animation: blink-caret .75s infinite;
			}
			.segment .showcase .quote span:after, .segment .showcase .quote span:before {
				/*content: ' " ';
				color:#aaa; */
			}
			.segment .showcase .quote .person {
				width:100%;
				font-style:normal;
				font-size:12px;
				padding-top:2px;

				opacity:0;
				transition:3s;
				-webkit-transition:3s;
				font-weight:lighter;
			}
			.segment .showcase .quote .person:before {
				content:" ";
				background-color:var(--root);
				display:inline-block;
				width:10px;
				height:10px;
				border-radius:10px;
				margin:0px 4px -1px 0px;
			}
				.segment .showcase .quote .person b {
					color:var(--root);
					font-weight:500;
				}


/* Vert nav */

.vert-nav {
	width:100vw;
	height:100px;
	position:fixed;
	left:0;
	bottom:0px;
	*background: rgb(255,255,255);
	*background: linear-gradient(270deg, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);
	padding:0px 0px 0px 0px;
	z-index:100;
}

.loaded .vert-nav {
	bottom:50px;
	transition:1s 3.5s;
}
@media screen and (max-height:1000px) {
	.loaded .vert-nav {
		bottom:0px;
	}
}

.vert-nav .reel-container {
	position:relative;
	height:100%;
	transition:.5s;


}
.vert-nav.hidden {
	pointer-events:none;
}
.vert-nav.hidden .reel-container {
	transform:scale(.8) translateY(-100px);
	pointer-events:none;
	opacity:0;
}
	.vert-nav .reel-container .intro {
		font-size:24px;
		width:100%;
		text-align:center;
		font-weight:bold;
		position:absolute;
		top:0%;
		height:100%;
		line-height:100px;
		text-transform:uppercase;
		transform:translateY(100%);
	}
	.loaded .vert-nav .reel-container .intro {
		transition:transform 1s 1s, opacity 1s 3s;
		*opacity:0;
		transform:translateY(-50%);
	}
	.vert-nav .reel {
		height:100px;
		top:0;
		position: absolute;
		width:100%;
		display:flex;
		justify-content:center;
		opacity:0;
		transform:translateY(100%);
	}
	.loaded .vert-nav .reel {
		transform:translateY(0);
		opacity:1;
		transition:1s 1s;
	}

	.vert-nav .reel .nav-i {
		position: relative;
		transition:.6s;
		-webkit-transition:.6s;
		font-weight:lighter;
		font-size:16px;
		cursor:pointer;
		text-align:left;
	}

	.vert-nav .reel .nav-i .nav-i-text {
		position: relative;
		width:auto;
	  text-align:left;
		transition:.3s;
		line-height:100px;
		margin-right:25px;
	}
	.vert-nav .reel .nav-i:last-of-type .nav-i-text {
		margin-right:0px;
	}

		.vert-nav .reel .nav-i .nav-img {
			float:left;
			width:10px;
			height:10px;
			border-radius:5px;
			background-color:transparent;
			margin:45px 10px;
			border:1px solid black;
			transition:.3s;
			-webkit-transition:.3s;
			background-size:cover;
			background-position:center;
			position:relative;
			overflow:hidden;

		}
			.vert-nav .reel .nav-i .nav-img:after {
				background-color:var(--orange);
				content: " ";
				width:20px;
				height:20px;
				border-radius:20px;
				position:absolute;
				top:calc(50% - 10px);
				left:calc(50% - 10px);
				transform:scale(0);
				transition:.3s;
			}
			.vert-nav .reel .nav-i.current .nav-img:after {
				transform:scale(1);
			}
			.vert-nav .reel .nav-i.green .nav-img { border-color:var(--green); }
			.vert-nav .reel .nav-i.blue .nav-img { border-color:var(--blue); }
			.vert-nav .reel .nav-i.red .nav-img { border-color:var(--red); }
			.vert-nav .reel .nav-i.yellow .nav-img { border-color:var(--yellow); }
			.vert-nav .reel .nav-i.purple .nav-img { border-color:var(--purple); }
			.vert-nav .reel .nav-i.green .nav-img:after { background-color:var(--green); }
			.vert-nav .reel .nav-i.blue .nav-img:after { background-color:var(--blue); }
			.vert-nav .reel .nav-i.red .nav-img:after { background-color:var(--red); }
			.vert-nav .reel .nav-i.yellow .nav-img:after { background-color:var(--yellow); }
			.vert-nav .reel .nav-i.purple .nav-img:after { background-color:var(--purple); }

		.vert-nav .reel .nav-i.current .nav-img,
		.vert-nav .reel .nav-i:hover .nav-img {
			width:20px;
			height:20px;
			border-radius:10px;
			margin:42px 10px;
		}

		.vert-nav .scroll-icon {
			width:20px;
			height:34px;
			border:2px solid var(--orange);
			margin:0px auto;
			position:absolute;
			bottom:2px;
			left:calc(50% - 10px);
			border-radius:10px;
			opacity:0;
			transition:opacity 1s 4s, bottom .3s 4s;
		}
		.loaded .vert-nav .scroll-icon {
			opacity:1;
			bottom:160px;
		}
			.vert-nav .scroll-icon:after {
				content:" ";
				width:12px;
				height:12px;
				border-radius:50%;
				background-color:var(--orange);
				position:absolute;
				top:2px;
				left:2px;
				animation: scrollAnim 1.5s infinite;
			}
@keyframes scrollAnim {
	0% { top:2px; opacity:0;  }
	20% { top:2px; opacity:1;  }
	80% { top: 16px; opacity:1;  }
	100% { top: 16px; opacity:0;  }
}
/* Segment 1 */
.cont .segment.s1 .titels {
	float:left;
}
.cont .segment.s1 p {
	font-size:18px;
	max-width:700px;
}
.cont .segment.s1 h1 {
	font-weight:lighter;
}
.cont .segment.s1 .scroller {
	width:200px;
	position:absolute;
	bottom:20px;
	left:calc(50% - 12px);
	font-weight:lighter;
	font-size:14px;
	text-transform:lowercase;
	color:black;
	line-height:40px;
	letter-spacing:1px;
	display:none;
}
	.scroller .icon {
		width:24px;
		height:40px;
		border-radius:24px;
		border:1px solid black;
		position:relative;
		overflow:hidden;
		float:left;
		margin-right:5px;
	}
		.scroller .icon .wheel {
			width:16px;
			height:16px;
			border-radius:16px;
			background-color:black;
			position:absolute;
			top:3px;
			left:3px;
			animation:scroll infinite 1.5s;
		}
@keyframes scroll {
	0% { top:3px; opacity:0; }
	30% { top:3px; opacity:1; }
	70% { top:19px; opacity:1; }
	100% { top:19px; opacity:0; }
}

	.cont .segment.s3 .showcase .img { background-position:center; }


/* Segment 6 */
.cont .segment.s6 {
	*background-color:aqua;
}


@keyframes blink-caret {
  from, to { border-color: transparent }
  50% { border-color: var(--root); }
}





/* CTAS */

.ctas {
	background-color:black;
	color:white;
	padding-top:60px;
	padding-bottom:60px;
}
	.ctas .cont {
		display:flex;
		width:100%;
		text-align:center;
		justify-content:space-around;
	}
		.ctas .cont .cta {
			color:white;
			text-decoration:none;
			padding:0px 25px;
			max-width:33.3%;
		}
		.ctas .cont .cta.single {
			max-width:100%;
			display:flex;
			justify-content:center;
			align-items:center;
			gap:30px;
			padding:0px 70px;
		}
		.ctas .cont .cta:hover {
			color:var(--orange);
		}
		.ctas .cont .cta.single:hover {
			color:inherit;
		}

			.ctas .cont .cta h3 {
				font-size:40px;
				font-weight:bold;
				text-transform:uppercase;
			}

			.ctas .cont .cta h4 {
				font-size:30px;
			}
@media screen and (max-width:1199px) {
	.ctas .cont .cta h3 {
		font-size:24px;
	}
	.ctas .cont .cta h4 {
		font-size:16px;
	}
}
@media screen and (max-width:767px) {
	.ctas .cont {
		flex-direction:column;
		align-items:center;
	}
		.ctas .cont .cta {
			margin-bottom:40px;
			max-width:100%;
		}
		.ctas .cont .cta:last-of-type {
			margin-bottom:0px;
		}
		.ctas .cont .cta.single {
			gap:10px;
			flex-direction:column;
			padding:0px 0px;
		}
}
/* Footer */

.footer {
	width:100%;
	padding:50px 100px;
	*background-color:rgba(255,255,255,1);
	*box-shadow:0px -50px 50px 5px rgba(255,255,255,1);
	background-color:var(--orange);
	mix-blend-mode:multiply;
	position:relative;
	z-index:10;
	font-weight:lighter;
	*color:rgba(0,0,0,.7);
	color:black;
}

	.footer .logo {
		width:100%;
		height:90px;
		background-image:url('img/logo-black.png');
		background-size:contain;
		background-position:top left;
		background-repeat:no-repeat;
		margin-bottom:-10px;
		margin-top:-20px;

	}
	.footer .naw {
		padding-left:70px;

	}
		.footer .naw .socials a {
			width:25px;
			height:25px;
			border:1px solid black;
			margin:4px 2px 12px 0px;
			color:black;
			text-align:center;
			line-height:25px;
			border-radius:30px;
			font-size:13px;
			display:inline-block;
			transition:.3s;
		}
			.footer .naw .socials a:hover {
				background-color:black;
				color:var(--orange);
			}
	.footer a {
		display:block;
		text-decoration:none;
		color:black;
		outline:none;
	}
		.footer a:hover {
			color:white;
		}
		.footer .links a:first-of-type {
			margin-top:20px;

		}

	.footer .search {
		display:block;
		position:relative;
		width:100%;
		margin-top:20px;
		max-width:300px;
	}
	.footer .search-input {
		width:calc(100% - 50px);
		height:30px;
		background-color:white;
		border:0;
		outline:none;
		padding:0px 10px;
		line-height:30px;
		font-size:14px;
		color:black;
		display:inline-block;
		float:left;
	}
	.footer .search-submit {
		width:30px;
		height:30px;
		background-color:black;
		margin:0;
		color:var(--orange);
		border:0;
		outline:none;
		display:inline-block;
		position:relative;
		overflow:visible;
		float:left;
	}
		.search-submit:before {
			width:13px;
			height:13px;
			border-radius:100%;
			border:1px solid var(--orange);
			content:" ";
			position:absolute;
			top:6px;
			left:6px;
			transition:.2s;
		}
		.search-submit:after {
			width:9px;
			height:0px;
			border-top:1px solid var(--orange);
			position:absolute;
			top:16px;
			left:16px;
			content:" ";
			transform:rotate(45deg);
			transform-origin:top left;
			transition:.2s;
		}
		.search-submit:hover:before {
			width:15px;
			height:15px;

		}
		.search-submit:hover:after {
			top:18px;
			left:18px;
			width:7px;
		}

@media screen and (max-width:1199px) {
	.footer {
		padding:50px 15px;
	}
		.footer .links.first {
			padding-left:85px;
		}
	.footer .search {
		margin-left:70px;
	}
}
@media screen and (max-width:576px) {
	.footer .naw {
		padding-left:0px;
		margin-bottom:20px;
	}
	.footer .links.first {
		padding-left:15px;
	}
	.footer .search {
		margin-left:0px;
	}
}



.introvideo .modall {
  display:none;
  position: fixed;
  z-index: 99999;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0, 0, 0, 0.5);
}

.introvideo .modal-content {
  background-color: #fefefe;
  padding: 20px;
  max-width: 800px;
  width: 80%;
  top: 50%;
  left: 50%;
  border-radius:0;
  border:0px;
  transform: translate(-50%, -50%);
}

.introvideo .close-modall {
	cursor:pointer;
}

.introvideo .video-container {
  position: relative;
  padding-bottom: 56.25%;
  overflow: hidden;
}

.introvideo .video-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}


.intro.animation {
	display:none;
	width:100vw;
	height:100vh;
	position:fixed;
	z-index:10000;
	background-color:white;
	overflow:hidden;

}
.intro .logo {
	width: 360px;
	height: 80px;
	left:100px;
	top:20px;
	background-image: url(img/benc-logo.png);
	background-size: auto 65px;
	background-position: left bottom;
	background-repeat: no-repeat;
	transition: .6s;
	position:absolute;
	-webkit-transition: .6s;
}
	@media screen and (max-width:1199px) { .intro .logo { background-size:auto 52px; left:15px; } }
	@media screen and (max-width:991px) { .intro .logo { background-size:auto 45px; height:50px;  } }


	.intro .arrowcursor {
		width:50px;
		height:50px;
		border:1px solid var(--orange);
		border-radius:50px;
		position:absolute;
		z-index:5;
		overflow:visible;
	display:none;
	}
		.intro .arrowcursor:after {
			content: " ";
			width:8px;
			height:8px;
			display:block;
			position:absolute;
			top:-4px;
			left:calc(50% - 4px);
			border-radius:0px 8px 8px 8px;
			transform:rotate(45deg);
			border:1px solid var(--orange);
			background-color:white;
		}

	.intro .center {
		width:auto;
		height:auto;
		position:absolute;
		top:50%;
		left:50%;
		transform:translate(-50%, -50%);
		text-align:center;

	}
	.intro .caption {
		font-size:26px;
		padding:15px;
		font-weight:bold;
		font-family:secular one;
		text-transform:uppercase;
		transform:translateY(100%);
		opacity:0;
		transition:1s;
		-webkit-transition:1s;
		z-index:10;
		position:relative;
		cursor:pointer;
	}
	.intro.loaded .caption {
		transform:translateY(00%);
		opacity:1;
	}
	.intro.launched .caption {
		opacity:0;
		transition:.3s;
		-webkit-transition:.3s;
	}
		.intro .caption .pointer {
			width:50px;
			height:50px;
			bottom:100%;
			left:calc(50% - 25px);
			background-image:url('img/pointer.png');
			background-size:contain;
			background-position:center;
			background-repeat:no-repeat;
			position:absolute;
			animation:click 3s infinite;
			transform-origin:center top;
			z-index:1;

		}
			.intro .caption .pointer:after {
				position:absolute;
				top:-5px;
				left:5px;
				width:30px;
				height:30px;
				border-radius:30px;
				background-color:var(--orange);
				content: " ";
				animation: pulse 3s infinite;

			}
@keyframes click {
	0% { transform:scale(1); }
	40% { transform:scale(1); }
	50% { transform:scale(.8); }
	60% { transform:scale(1); }
	100% { transform:scale(1); }
}
@keyframes pulse {
	0% { transform:scale(0); opacity:.5; }
	50% { transform:scale(0); opacity:.5; }
	80% { transform:scale(4); opacity:0; }
	100% { transform:scale(4); opacity:0; }
}
	.intro .launch {
		position:relative;
		width:400px;
		height:399px;
		background-color: #FF7500;
		z-index:2;
		cursor:pointer;
		overflow:visible;

		*border-radius:100%;
		box-shadow:inset 0px 0px 30px 30px white;
		transform:translateY(-100%);
		opacity:0;
		transition:1s;
		-webkit-transition:1s;

	}
	.intro.loaded .launch {
		transform:translateY(0%);
		opacity:1;
	}
		.intro.launched .launch {
			animation:launch .5s 1;
			-webkit-animation:launch .5s 1;
			opacity:0;
		}
		.intro .launch .cursor-cont {
			width:100%;
			height:100%;
			position:relative;
			overflow:hidden;
		}
		.intro .launch .introcursor {
			opacity:1;
			transform:scale(1);
			width:100%;
			height:100%;
			background: rgb(0,232,250);
background: radial-gradient(circle, rgba(255,199,0,1) 0%, rgba(250,116,0,0) 69%);
			position:absolute;
			transform:translate(-50%, -50%);
		}
		.intro .launch .layer {

			width:calc(100% + 4px);
			height:calc(100% + 4px);
			position:absolute;
			top:-2px;
			left:-2px;
			background-image:url('img/brain-tr.png');

			background-size:cover;
			background-position:center;
			transition:.3s;
			-webkit-transition:.3s;

		}
		.intro .launch.launched .layer {
			animation:none;
			-webkit-animation:none;

		}

	.intro video {
		height: 100%;
	    width: 177.77777778vh;
	    min-width: 100%;
	    min-height: 56.25vw;
	   	position:absolute;
	   	left:50%;
	   	top:50%;
	   	transform:translate(-50%, -50%);
	   	z-index:1;
	   	animation: intro 10s 1;
	   	-webkit-animation: intro 10s 1;
	   	display:none;
	   	mix-blend-mode:multiply;
	}
@keyframes intro {
	0% { opacity: 0; }
	10% { opacity: 1; }
	80% { opacity: 1; }
	100% { opacity:0; }
}
@-webkit-keyframes intro {
	0% { opacity: 0; }
	10% { opacity: 1; }
	80% { opacity: 1; }
	100% { opacity:0; }
}

@keyframes launch {
	0% { transform:scale(1); opacity:1; }
	30% { transform:scale(.6); opacity:1; }
	70% {  opacity:0; }
	100% { transform:scale(10); opacity:0; }
}
@-webkit-keyframes launch {
	0% { transform:scale(1); opacity:1; }
	30% { transform:scale(.6); opacity:1; }
	70% {  opacity:0; }
	100% { transform:scale(10); opacity:0; }
}

#splat {
				opacity:0; position:fixed; z-index:1; top:0; left:0; right:0; bottom:0; transition:opacity 3s; -webkit-transition:opacity 3s;
				height: 100%;
			    width: 177.77777778vh;
			    min-width: 100%;
			    min-height: 56.25vw;
			    	transform:translate(-50%, -50%) rotate(180deg);
			    	left:50%;
			    	top:50%;
			    mix-blend-mode:multiply;
			}
			#splat.play {
				opacity:1;
				transition:opacity .3s;
				-webkit-transition:opacity .3s;
			}

/* Pages */
.sub {
	padding:0px 100px;
}
@media screen and (max-width:1399px) { .sub { padding:0px 60px; }}
.sub h1 {
	font-family: 'Secular One', sans-serif;
	text-transform:uppercase;
	font-size:75px;
	line-height:75px;
}







/* contact */

div.contact {
	margin-top:150px;
}



/* RESPONSIVE CSS MARK */
@media screen and (max-width:1199px) {
	.nav-bar {
		padding:0px 15px;
	}

}
@media (max-width: 991px) {

	.togglemenu {
		display:block;
	}



	.nav-bar .logo {

		height:80px;
   		margin-top: -10px;
   		background-size: auto 45px;
	}

	.nav-bar.scrolling .nav{
	    width: calc(100% + 30px);
	}

	.nav-bar.scrolling .logo {
	    width: 100%;
	}


	.nav-bar .nav {
		display:none;
		width:calc(100% + 30px);
		margin-left:-15px;
		float:none;
		height:100vh;
		overflow:auto;
		background-color:rgba(255,255,255,0.95);
		margin-top:0;
		padding-top:100px;
	}

	.nav-bar .nav a {
		display:block;
		padding:15px;
		text-align:center;
		font-size:30px;

	}


	.nav-bar .nav a:last-of-type {
	    padding-right: 15px;

	}

	.nav-bar .nav.open {
		display:block;
	}

	.vert-nav {
		width:100%;
		left:100%;
		transition:0.5s;
		-webkit-transition:0.5s;
		background-color:rgba(255,255,255, 0.5);
	}

	.vert-nav.open {
		left:0;
		transition:1s;
		-webkit-transition:1s;
	}

	.cont:not(.ctas .cont) { z-index:1001; }
	.cont .segment .content {
		top:100px;
		transform:translateX(-50%);
	}


	.segment .showcase .quote {
		width:auto;
		font-size:17px;
	}

	.segment .showcase.right .quote {
	    text-align: left;
	}

	.cont .segment h1 {
		font-size:36px;
		line-height:45px;
	}

	.cont .segment {
		padding: 0px 25px 0px 25px;
	}

	.cont .segment.s1 {
		padding: 0px 25px 0px 25px;
	}


	.cont .segment h2 {
		font-size:30px;
		line-height:40px;
	}




	h2.from-top.text-right {
		text-align:left !important;
	}



	.sub {
	    padding: 0px 15px;
	}




}

@media screen and (max-width: 767.98px) {

	.togglemenu {
		display:block;
	}



	.nav-bar .logo {
		margin-left:0px;
   		margin-top: -10px;
   		background-size: auto 45px;
	}

	.nav-bar.scrolling .logo {
	    width: 100%;
	}

	.nav-bar .nav {
		display:none;
		position:fixed;
		width:100%;
		height:100vh;

		margin-top:0;
		padding-top:150px;
	}

	.nav-bar.scrolling .nav {
		width:100%;
	}

	.nav-bar .nav.open {
		display:block;
	}

	.nav-bar .nav a {
		display:block;
		padding:15px;
		text-align:center;
		font-size:30px;

	}

	.nav-bar .nav a:last-of-type {
	    padding-right: 15px;
	}

	.vert-nav {
		display:none;
	}

	.cont .canvas-cont {
		display:none;
	}

	.cont .segment {
		height: 100vh;
		padding: 20% 25px 0px 25px;
	}


	.segment .showcase {
		position:relative;
		left:unset;
		right:unset;
		top:unset;
		margin:10px 0px 10px 15px !important;
		width:calc(100% - 15px);
	}

	.segment .showcase.right {
	    right: unset;
	}
		.segment .showcase .img {
			height:150px;
			margin:0px 20px 20px -15px;
			top:-20px;
		}
		.segment .showcase .head {
			width:80px;
			height:80px;
			top:80px;
			left:-25px;
		}
		.segment .showcase .quote {
			padding:0px 15px 15px 15px;

		}

	.cont .segment h1, .cont .segment h2 {
		line-height: 30px;
		font-size: 34px;
	}





	.segment .showcase .button {
		font-size:14px;
	}

	h2.from-top.text-right {
		text-align:left !important;
	}

	.footer .naw {
		margin-bottom:50px;
	}

	.portfolio .heading {
		padding:20px 30px 0px 30px
	}

	.portfolio .heading h1 {
	    font-size: 75px;
	    line-height: 75px;
	    width:100%;
	    text-align:left;
	    padding: 100px 0px 150px 0px;
	}



	.pf-scroll-view .pf-cont {
		width: calc(100% - 50px);
	    margin: 0px 25px;
	}

	.pf-scroll-view .pf-cont .pf-reel {
		width:100%;
	}
}

@media (min-width: 768px) and (max-width: 991.98px) {
	.cont .canvas-cont {
		width:80vw;
		left:35%;
		max-height:60vh;
	}

	.cont .segment {
		height: 100vh;
		padding: 25% 200px 0px 50px;
		align-items: start;
	}
	.cont .segment.s1 h1 br { display:none;}
	.cont .segment.s1 p {
		max-width:100%;
	}

	.cont .segment.s1 .socials {
		margin-top:0;
	}

	.segment .showcase {
		left:unset;
		right:10px;
		top:10px;
		max-width:350px;
	}

	.cont .segment h1 {
		line-height: 50px;
		font-size: 50px;
	}

	.cont .segment h2 {
		line-height: 50px;
		font-size: 50px;
	}





	.segment .showcase .button {
		font-size:12px;
	}

	h2.from-top.text-right {
		text-align:left !important;
	}

	.footer .naw {
		margin-bottom:50px;
	}

	.portfolio .heading {
		padding:20px 30px 0px 30px
	}

	.portfolio .heading h1 {
	    font-size: 75px;
	    line-height: 75px;
	    width:100%;
	    text-align:left;
	    padding: 100px 0px 150px 0px;
	}

	.portfolio .heading .filters {
		position:absolute;
		width:100%;
		top:70px;
		padding-left:0;
		max-width:calc(100% - 200px);
	}
	.portfolio .heading.scrolling .filters {
		top:10px;
	}

	.portfolio .heading .filters .filter {
		font-size:14px;
	}

	.pf-scroll-view .pf-cont {
		width: calc(100% - 50px);
	    margin: 0px 25px;
	}

	.pf-scroll-view .pf-cont .pf-reel {
		width:50%;
	}
}

@media (min-width: 992px) and (max-width: 1199.98px) {

	.togglemenu {
		display:none;
	}

	.nav-bar .logo {
    	width: 290px;
        background-size: auto 52px;
    }

    .nav-bar.scrolling .logo {
	    width: 42px;
	}

	.nav-bar .nav {
    	width: calc(100% - 300px);
   	}

	.nav-bar .nav a {
    	padding: 0px 10px;
    	font-size: 12px;
  	}

	.cont .segment {
		padding: 0px 200px 0px 50px;
	}

	.cont .segment h1 {
		line-height: 60px;
    	font-size: 60px;
	}

	.cont .segment h2 {
		line-height: 50px;
		font-size:50px;
	}





	.segment .showcase .button {
		font-size:12px;
	}





	.cont .segment.s1 .titels {
	    margin-left:10%;
	}

	.cont .segment.s2 h2 {
	    padding-left: 50px;
	}

	.portfolio .heading h1 {
	    font-size: 75px;
	    line-height: 75px;
	    width:100%;
	    text-align:left;
	    padding: 100px 0px 150px 0px;
	}

	.portfolio .heading .filters {
		position:absolute;
		width:auto;
		max-width:calc(100% - 200px);
		top:70px;
	}
	.portfolio .heading.scrolling .filters {
		top:20px;
	}

	.pf-scroll-view .pf-cont .pf-reel {
		width:50%;
	}
}

@media (min-width: 1200px) and (max-width: 1500px){

	.togglemenu {
		display:none;
	}

	.nav-bar .nav a {
    	padding: 0px 10px;
   	}

	.cont .segment.s1 .socials {
	    margin-top: 0;
	}

	.cont .segment.s1 .titels {
	    margin-top: 0;
	}



	.segment .showcase .button {
		font-size:14px;
	}

	.segment .showcase.right {
	    left: unset;
	    right: 35px;
	}


	.cont .segment h2 {
		font-size: 60px;
    	line-height: 70px;
	}

	.sub h1 {
	    font-size: 75px;
	    line-height: 75px;
	}

	.portfolio .heading .filters {
	    margin-top: 124px;
	    padding-left: 0px;
	}

	.portfolio .heading .filters .filter {
		font-size:14px;
		*padding: 8px 12px 8px 12px;
	}

	.cta .cta-i {
		width: calc(100% - 30px);
    	margin: 30px 15px 10px 15px;
	}

	.cta .cta-i .img-wrap {
		top:0;
		left:0;
	}

	.portfolio .details {
		padding:15px;
	    margin: 0px auto 0px auto;
	}

	.portfolio .details span {
		display:block;
		top:0;
	}

	.portfolio .details span.button {
		display:inline-block;
		top:0;
		margin:0;
		vertical-align:top;
	}
}





.form {
	box-shadow:0px 10px 20px -3px rgba(0,0,0,.3);
	z-index:100;
	position:relative;


}
.form h3 {
	font-family:secular one;
	font-size:40px;
	font-weight:bold;
	position:absolute;
	top:-30px;
	right:-25px;
	color:black;
	text-transform:uppercase;
	text-shadow:0px 0px 5px white;
}
.form p {
	margin:0;
	width:100%;
	background-color:#ffffff;
}
.form input, .form textarea {
	border:0px !important;
	box-shadow:0px 0px 0px !important;
	outline:none;
	color:black;
	height:60px;
	line-height:60px;
	border-radius:0px;
	padding:20px;
	margin:0px;
	transition:.1s;
	-webkit-transition:.1s;

}
	.form input:focus {
		color:var(--orange);
	}

	.form p input:not([type="submit"]){
			width:100%;
	}

.form p:nth-of-type(even) input, .form p:nth-of-type(even) textarea {
	background-color:#FBFBFB;
}
.form textarea {
	height:200px;
	padding:20px;
	line-height:25px;
	padding-bottom:80px;
	transition:0;
}
.form .button {
	background-color:var(--orange) !important;
	color:white !important;
	margin:10px;
	transition:.3s;
	-webkit-transition:.3s;
	padding:7px 35px;
}
	.form .button:hover {
		background-color:black;
		color:var(--orange) !important;
	}
.form .ajax-loader { display:none; }
input::placeholder, textarea::placeholder {
  color: black !important;
  opacity: 1;
}

.screen-reader-response {
	display:none;
}

.wpcf7-response-output {
	background-color:#ffffff;
	color:#000000;
	padding:10px;
}

.wpcf7-recaptcha div {
	width:100% !important;
	height:auto !important;
	background-color:#ffffff;
	padding:5px;
}

			.noselect {
			  -webkit-touch-callout: none; /* iOS Safari */
			    -webkit-user-select: none; /* Safari */
			     -khtml-user-select: none; /* Konqueror HTML */
			       -moz-user-select: none; /* Old versions of Firefox */
			        -ms-user-select: none; /* Internet Explorer/Edge */
			            user-select: none; /* Non-prefixed version, currently
			                                  supported by Chrome, Edge, Opera and Firefox */
			}


.notfound {
	background-color:black;
	min-height:calc(100vh - 200px);
	color:white;
	background-image:url('img/bg-brein404.jpg');
	background-size:cover;
	display:flex;
	justify-content:center;
	align-items:center;
	margin-top:120px;
	flex-direction:column;
	text-align:center;
	z-index:2; position:relative;
}
	.notfound .oeps {
		font-size:100px;
		font-weight:bold;
	}
	.notfound .error {
		font-size:300px;
		font-weight:bold;
		background-image:url('img/brein404.png');
		display:inline-block;
		width:100%;
		height:300px;
		line-height:200px;
		overflow:visible;
		background-size:contain;
		background-repeat:no-repeat;
		background-position:57% 50%;
		position:relative;
		margin:20px 0px 20px 0px;
		max-width:1200px;

	}
		.notfound .error:before, .notfound .error:after {
			content:"4";
			display:inline-block;
			padding:0px  100px;
			position:relative;
		}
		.notfound .error:before{
			z-index:-1;
		}

		.notfound h1 {
			font-weight:bold;
			padding:0px 20px;
		}

@media screen and (max-width:1199px) {
	.notfound .oeps {
		font-size:70px;
	}
	.notfound .error {
		font-size:200px;
		height:200px;
		line-height:150px;
	}
}

@media screen and (max-width:776px) {
	.notfound .oeps {
		font-size:30px;
	}
	.notfound .error {
		font-size:100px;
		height:100px;
		line-height:70px;
	}
	.notfound .error:before {	padding:0px 40px 0px 0px; }
	.notfound .error:after {	padding:0px 0px 0px 40px; }

	.notfound h1 {
		font-size:16px;
	}
}


#gdprc_bar {
	background:black;
	color:white;
	border-top:0px;
	padding:30px 0px;
}
	#gdprc_bar h3 {
		text-transform:uppercase;
	}
	#gdprc_bar a, #gdprc_settings a { text-transform:lowercase; color:var(--orange); font-weight:lighter !important; text-decoration:none; }

#gdprc_bar .gdprc_button, #gdprc_settings .gdprc_button {
	border:0px;
	background-color:var(--orange);
	color:white !important;
	border-radius:0px !important;
	font-weight:lighter !important ;
	width:auto;
	padding:9px 25px;
	height:auto;
	margin:0px auto;
	min-height:0px;
	transition:.3s;
	margin-bottom:5px;
}
	#gdprc_bar .gdprc_button:hover {
		color:var(--orange);
		background-color:black !important;
	}

	.gdprc_button .gdprc_action {

	}


.page-back {
		min-width:30px;
		max-width:30px;
		padding-left:30px;
		height:30px;
		background-color:var(--orange);
		display:inline-block;
		margin-right:5px;
		cursor:pointer;
		position:relative;
		overflow:hidden;
		width:auto;
		transition:.3s;
		line-height:27px;
		color:transparent;
		text-decoration:none;
		text-transform:lowercase;
		font-size:14px;
		white-space: nowrap;
	}
		.page-back:hover {
			max-width:200px;

			padding-right:15px;
			color:var(--orange) !important;
			text-decoration:none;
			background-color:black;
		}
		.page-back:before, .page-back:after {
			content:" ";
			width:0px;
			height:20px;
			border-left:1px solid white;
			border-top:1px solid white;
			position:absolute;
			transition:.3s;
		}
		.page-back:hover:before, .page-back:hover:after { border-color:var(--orange); }
		.page-back:before {
			transform:rotate(-45deg);
			height:10px;
			width:10px;
			top:calc(50% - 5px);
			left:9.5px;
		}
		.page-back:after {
			transform:rotate(90deg);
			top:calc(50% - 7px);
			left:15.5px;
			height:14px;
		 }

.container.container_gdprc_bar .gdprc_actions {
	display:none !important;
}

.page-template-tpl-kerstshow-2024-en #gdprc_bar,
.page-template-tpl-kerstshow-2024-nl #gdprc_bar {
	background-color:white !important;
	color:black !important;
}