/*
Theme Name: Flatsome Child
Description: This is a child theme for Flatsome Theme
Author: UX Themes
Template: flatsome
Version: 3.0
*/

:root {
	--huge: 100px;
	--headline: 48px;
	--h1: 36px;
	--intro: 20px;
	--groen: #34C0AE;
	--paars: #44295D;
}

/* https://cydstumpel.nl/a-practical-guide-to-the-css-view-transition-api/ */
@view-transition {
  navigation: auto;
}
header {
  view-transition-name: header;
}
  /* Apply the custom animation to the old and new page states */
::view-transition-old(header) {
  animation: 2s ease-in both move-out;
}
::view-transition-new(header) {
  animation: 2s ease-in both move-in;
}
@keyframes move-out {
  from {
    opacity: 1;
  }
  to {
    opacity: 1;
  }
}
@keyframes move-in {
  from {
    opacity: 1;
  }
  to {
    opacity: 1;
  }
}

body {
	overflow: hidden;
}
#main {
	min-height: 50vh;
}
h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 {
	font-weight: 300 !important;
	line-height: 1.25em;
}
h1, .h1 {
	font-size: var(--h1);
	line-height: 1.1em;
}
.dark, .dark p, .dark td {
    color: #fff;
}
strong {
	font-weight: 600 !important;
}
.superstrong {
	font-weight: 700 !important;
}
.huge {
	font-size: var(--huge);
	line-height: 1em;
}
.headline {
	font-size: var(--headline);
	line-height: 1em;
}
.intro {
	font-size: var(--intro);
	line-height: 1.5em;
}
.nomargin {
	margin-bottom: 0;
}
.underline {
	text-decoration: underline;
	text-underline-offset: 4px;
}
.uppercase {
	letter-spacing: 0;
}
.groen {
	color: var(--groen) !important;
}
.paars {
	color: var(--paars) !important;
}
.col.bg-groen > .col-inner, .section.bg-groen {
	background-color: var(--groen);
}
.col.bg-paars .col-inner, .section.bg-paars {
	background-color: var(--paars);
}
.col.bg-wit .col-inner, .section.bg-wit {
	background-color: #fff;
}
.col.afgerond .col-inner {
	border-radius: 32px;
	padding: 2em;
}
.width {
	width: clamp(100%, 320px, 500px) !important;
}
.box-image {
	border-radius: 8px;
}
.img.no-pointer, .img.no-pointer .img-inner, .img.no-pointer img {
	pointer-events: none;
}
.button {
	margin-bottom: 0;
}
.button.white span {
	color: var(--paars);
}
.button.align-bottom {
	position: absolute;
	bottom: 2em;
}
	.button span {
		font-weight: 600;
	}
	.button span {
		xmargin-left: 1em;
		margin-right: 1.5em;
		transition: all 0.25s;
	}
	.button:hover span {
		margin-right: 2em;
	}
	.button i.icon-angle-right {
		position: absolute;
		right: 0;
		top: 50%;
		transform: translateY(-50%);
		xbackground-image: url('/wp-content/uploads/bg-button.svg');
		width: 20px;
		height: 100%;
		background-position: left;
		transition: all 1s;
	}
	.button i.icon-angle-right:before {
		position: absolute;
		right: 0.75em;
		top: 53%;
		transform: translateY(-50%);
		content: url('/wp-content/uploads/icon-arrow-right.svg');
	}
	.button.is-outline i.icon-angle-right:before {
		content: url('/wp-content/uploads/icon-arrow-right-green.svg');
	}
	.button.is-outline:hover i.icon-angle-right:before {
		content: url('/wp-content/uploads/icon-arrow-right.svg');
	}

.icon-box-left, .icon-box-right {
    align-items: center;
}
.icon-box-text h5 {
	font-size: var(--h3);
	font-weight: 600 !important;
	color: var(--paars);
}

.row .row:not(.row-collapse) {
    margin-left: 0;
    margin-right: 0;
}
.row.align-equal .row-collapse {
	min-height: 68px;
	xborder: 1px solid red;
}

/* header */
.nav-dropdown {
	color: var(--paars);
}
.nav-dark .nav>li>a {
	color: #fff;
}
.nav-dark .nav>li.active>a {
	color: var(--paars);
}
.nav-dark .nav-line-bottom>li>a:before {
	background-color: var(--paars);
}

.single-course .nav-line-bottom>li.menu-item-488>a:before {
    opacity: 1;
}
.single-event .nav-line-bottom>li.menu-item-29>a:before {
    opacity: 1;
}

/* forms */
.nf-form-fields-required {
	display: none;
}
body .nf-form-content input:not([type=button]), body .nf-form-content textarea {
    background: #f7f7f7;
    border: 1px solid #e7e7e7;
    border-radius: 25px;
    color: var(--paars);
}
body .nf-error.field-wrap .nf-field-element:after {
    border-radius: 25px;
}
body .nf-form-content input[type=submit] {
    background: var(--groen) !important;
    border: 0px solid #e7e7e7 !important;
    color: #fff !important;
    text-transform: none;
}
body .nf-next-previous li input {
    background: #fff !important;
    border: 1px solid var(--paars) !important;
    color: var(--paars) !important;
    padding: 0.5em;
    text-transform: none;
}
body .nf-form-content button, body .nf-form-content input[type=button], body .nf-form-content input[type=submit] {
	line-height: 0em;
}

.slider-wrapper.opacity .col-inner > p {
	opacity: 0.2;
}

.slider-nav-outside.slider-nav-circle .previous {
    margin-right: 48px;
}
.slider-nav-outside.slider-nav-circle .next {
    margin-left: 48px;
}

.goal-slider .row .col:last-child {
	min-height: 80vh;
}
	.goals-list li.active {
		color: var(--groen);
		font-weight: bold;
		text-decoration: underline;
		cursor: pointer;
	}
.slider-wrapper.testimonials .slider {
	min-height: 250px;
}
	
	
/* About you */
.item.vraag {
	position: relative;
	float: left;
	width: 16.46666vw;
	height: 22.22222vw;
	padding: 1vw !important;
	opacity: 1;
  	perspective: 1000px;
}
.vraag.active {
	cursor: pointer;
}
	.vraag.active .vraag-inner {
		animation-name: schaduw;
  		animation-duration: 0.8s;
  		animation-delay: 0.1s;
	}
@keyframes schaduw {
  0% {
  	-webkit-box-shadow: 1px 1px 5px 0px rgba(0,0,0,0.5);
	-moz-box-shadow: 1px 1px 5px 0px rgba(0,0,0,0.5);
	box-shadow: 1px 1px 5px 0px rgba(0,0,0,0.5);
  }
  50% {
  	-webkit-box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.5);
	-moz-box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.5);
	box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.5);
  }
  100% {
  	-webkit-box-shadow: 1px 1px 5px 0px rgba(0,0,0,0.5);
	-moz-box-shadow: 1px 1px 5px 0px rgba(0,0,0,0.5);
	box-shadow: 1px 1px 5px 0px rgba(0,0,0,0.5);
  }
}
.vraag.active:hover .vraag-inner {
	-webkit-box-shadow: 5px 5px 5px 0px rgba(0,0,0,0.5);
	-moz-box-shadow: 5px 5px 5px 0px rgba(0,0,0,0.5);
	box-shadow: 5px 5px 5px 0px rgba(0,0,0,0.5);
	transform: scale(1.01);
	transition: transform 0.8s 0.1s;
}
.vraag.deactive {
	opacity: 0.75;
}
	.vraag .vraag-inner {
		pointer-events: none;
		position: relative;
 		width: 100%;
  		height: 100%;
		background-color: #0077B6;
		transition: transform 0.8s 0.1s;
  		transform-style: preserve-3d;
  		border-radius: 0.75vw;
  		transform: rotateY(180deg);
  		-webkit-box-shadow: 1px 1px 5px 0px rgba(0,0,0,0.5);
		-moz-box-shadow: 1px 1px 5px 0px rgba(0,0,0,0.5);
		box-shadow: 1px 1px 5px 0px rgba(0,0,0,0.5);
	}
	.vraag.active .vraag-inner {
  		transform: rotateY(0deg);
	}
	.vraag.clicked .vraag-inner {
  		transform: rotateY(0deg);
  		
	}
	.vraag.active:hover .kaart-voor {
  		-webkit-box-shadow: inset 10px 10px 75px 189px rgba(255,255,255,0.1);
		-moz-box-shadow: inset 10px 10px 75px 189px rgba(255,255,255,0.1);
		box-shadow: inset 10px 10px 75px 189px rgba(255,255,255,0.1);
	}
	.vraag.clicked .kaart-voor {
		border: 0.75vw solid rgba(255,255,255,1);
	}
	
		.kaart-voor, .kaart-achter {
  			position: absolute;
  			padding: 1em;
  			border-radius: 0.75vw;
  			width: 100%;
  			height: 100%;
  			-webkit-backface-visibility: hidden; /* Safari */
  			backface-visibility: hidden;
  			border: 0.75vw solid rgba(255,255,255,0.5);
		}
	.kaart-achter {
		transform: rotateY(180deg);
	}
	.vraag.vraag1 .vraag-inner .kaart-achter, .vraag.vraag1 .vraag-inner .kaart-voor, .vraag1 small {
		background-color: #34C0AE;
	}
	.vraag.vraag2 .vraag-inner .kaart-achter, .vraag.vraag2 .vraag-inner .kaart-voor, .vraag2 small {
		background-color: #00B4D8;
	}
	.vraag.vraag3 .vraag-inner .kaart-achter, .vraag.vraag3 .vraag-inner .kaart-voor, .vraag3 small {
		background-color: #FEB73E;
	}
	.vraag.vraag4 .vraag-inner .kaart-achter, .vraag.vraag4 .vraag-inner .kaart-voor, .vraag4 small {
		background-color: #F12A38;
	}
	.vraag.vraag5 .vraag-inner .kaart-achter, .vraag.vraag5 .vraag-inner .kaart-voor, .vraag5 small {
		background-color: #90E0EF;
	}
		.vraag .vraag-inner h3 {
			position: absolute;
			bottom: 0;
			max-width: 80%;
			font-size: 1.5em;
			line-height: 1em;
		}

.stamp {
	padding: 1vw !important;
	position: absolute;
	width: 33vw;
	height: 22.2222vw;
	left: 33vw;
	top: 22.2222vw;
}
	.stamp-inner {
		height: 100%;
	}
		.stamp .vragen-slider aside {
			width: 100%;
		}
			.vragen-slider aside .h1 {
				margin-bottom: 1rem;
			}
			.vragen-slider aside small {
				padding: 0.5em;
				font-size: 1rem;
				color: #00377C;
				border-radius: 4px;
			}
			.stamp .button, .stamp input[type=submit], .stamp input[type=text] {
				border-radius: 99px;
				font-size: 1em;
				background-color: #fff;
				color: #000 !important;
			}

/* afbeelding en vlak shortcodes */
img.afbeelding {
	position: absolute;
	pointer-events: none;
}
.vlak {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	right: 0;
	bottom: 0;
	width: 100vw;
	padding: 0 !important;
	margin: 0 !important;
	xoverflow: hidden;
	z-index: -2;
}
.vlak-overlay {
	position: absolute;
	top: 0;
	bottom: 0;
	width: 100%;
	height: 100%;
	left: -1px;
	right: -1px;
}
.vlak-overlay.paars {
	background-color: var(--paars);
}
.vlak-overlay.groen {
	background-color: var(--groen);
}
.vlak-overlay.wit {
	background-color: #fff;
}
.vlak-bg {
	background-size: cover;
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	right: 0;
	bottom: 0;
	padding: 0 !important;
	margin: 0 !important;
}


@media screen and (max-width: 850px) {
:root {
	--huge: 3em;
	--headline: 2em;
	--h1: 2em;
	--intro: 20px;
	--groen: #34C0AE;
	--paars: #44295D;
}
	.medium-logo-left .logo {
        margin-left: -34px;
        margin-top: -60px;
    }
    .mobile-nav {
    	margin-top: -40px;
    }
	.off-canvas-center.mfp-bg.mfp-ready {
    	opacity: 0.95;
	}
	.icon-quote {
		top: -20px !important;
	}
	.row.testimonials {
    	justify-content: flex-end!important;
	}
	.col.onder-uitlijnen {
		padding-bottom: 0;
	}
	.item.vraag {
		width: 24vw;
		height: 32vw;
	}
	.stamp {
		left: 25vw;
		top: 32vw;
		width: 48vw;
		height: 32vw;
	}
		.vragen-slider aside .uppercase {
			display: none;
		}
		.vragen-slider aside .h1 {
			margin-bottom: 0.5rem;
			font-size: 16px;
		}
		.stamp .button {
			font-size: 16px;
			border-radius: 4px;
		}
}

@media screen and (max-width: 550px) {
.header-main {
		height: 140px !important;
	}
}

@media screen and (min-width: 551px) and (max-width: 850px) {
	.header-main {
		height: 220px !important;
	}
}

@media only screen and (min-width: 851px) {
	.onder-uitlijnen .col-inner {
		position: absolute;
		bottom: 0;
		pointer-events: none;
	}

}