/* 
	
Theme Name: jouw leefstijlhulp
Theme URI: http://www.burowild.nl
Author: Buro Wild 

*/

.woocommerce-message, .woocommerce-error{
	display: none !important;
}

.woocommerce button.button.alt{
	background-color: transparent !important;
	color: #232d3c !important;
	font-family: 'Catamaran' !important ;
	font-weight: 900 !important;
    letter-spacing: 2px;
    padding: 0px;
    text-transform: uppercase;
    transition: 1s;
    text-align: left; 
	
}

h1, h2, h3, h4, h5, h6{
	font-family: 'Catamaran';
	font-weight: 900;
/* 	text-transform: uppercase; */
}

html, body{
	overflow-x: hidden !important;
}

h1{
	line-height: 50px;
}

h3{
	line-height: 35px;
}

p{
	font-family: 'Catamaran';
	font-weight: 300;
	line-height: 30px;
	color: #232d3c;
}

a{
	font-weight: bold;
}

strong{
	font-weight: 900 !important;
}

li{
	font-family: 'Catamaran';
/* 	font-weight: 900; */
	line-height: 30px;
/* 	color: #232d3c; */
}

label{
	display: flex;
}


.button.dark a{
	color: #232d3c;
	font-weight: 900 !important;
}

.button.light a{
	color: white;
	font-weight: 900 !important;
}

.button.dark{
	font-weight: 900 !important;
	font-family: 'Catamaran';
	background: none;
	color: #232d3c;
	letter-spacing: 3px;
	padding: 0px;
	text-transform: uppercase;
	transition: 1s;
	text-align: left;
}

input[type=submit]{
	font-weight: 900 !important;
	font-family: 'Catamaran';
	background: none;
	color: #232d3c;
	letter-spacing: 3px;
	padding: 0px;
	text-transform: uppercase;
	transition: 1s;
	border: none;
}


.button.shop{
	font-weight: 900 !important;
	font-family: 'Catamaran';
	background: none;
	color: #232d3c;
	letter-spacing: 3px;
	padding: 0px;
	text-transform: uppercase;
	transition: 1s;
	text-align: left;
}

input[type='submit']{
	font-weight: 900 !important;
	font-family: 'Catamaran';
	background: none;
	color: #232d3c;
	letter-spacing: 3px;
	padding: 0px;
	text-transform: uppercase;
	transition: 1s;
	border: none !important;
}

input[type=submit]::before{
	content: "" !important;
	margin-right: 10px !important;
    float: left !important;
    width: 40px !important;
    height: 40px !important;
    background: url('img/button-dark.svg') !important;
    background-repeat: no-repeat !important;
    margin-top: -15px !important;
    transition: 1s !important;
}

button:hover:before{
	transition: 0.5s;
	transform: scale(1.2);
}

.button.light{
	font-weight: 900 !important;
	font-family: 'Catamaran';
	background: none;
	color: white;
	letter-spacing: 3px;
	padding: 0px;
	text-transform: uppercase;
	transition: 1s;
	text-align: left;
}

.button.light:hover:before{
	transition: 0.5s;
	transform: scale(1.2);
}

.button.dark:hover:before{
	transition: 0.5s;
	transform: scale(1.2);
}

.button::before{
	content: "";
	margin-right: 10px;
    float: left;
    width: 40px;
    height: 40px;
    background: url('img/button-dark.svg');
    background-repeat: no-repeat;
    margin-top: -15px;
    transition: 1s;
}

.button.shop::before{
	content: "";
	margin-right: 10px;
    float: left;
    width: 40px;
    height: 40px;
    background: url('img/shopbutton-dark.svg');
    background-repeat: no-repeat;
    margin-top: -15px;
    transition: 1s;
}


.wpcf7cf_next{
	font-weight: 900 !important;
	font-family: 'Catamaran';
	background: none;
	color: #232d3c;
	letter-spacing: 3px;
	padding: 0px;
	text-transform: uppercase;
	transition: 1s;
	min-height: 55px;
}


.wpcf7cf_next::after{
	content: "";
	margin-left: 10px;
    float: right;
    width: 40px;
    height: 40px;
    background: url('img/button-next.svg');
    background-repeat: no-repeat;
    margin-top: -15px;
    transition: 0.5s;	
}


.wpcf7cf_next:hover:after{
	transition: 0.5s;
	transform: scale(1.2);
}


.wpcf7cf_prev{
	font-weight: 900 !important;
	font-family: 'Catamaran';
	background: none;
	color: #232d3c;
	letter-spacing: 3px;
	padding: 0px;
	text-transform: uppercase;
	transition: 1s;
	min-height: 55px;
}

.wpcf7cf_prev::before{
	content: "";
	margin-right: 10px;
    float: left;
    width: 40px;
    height: 40px;
    background: url('img/button-previous.svg');
    background-repeat: no-repeat;
    margin-top: -15px;
    transition: 1s;	
}

.wpcf7cf_step_controls{
	margin-top: 50px;
	display: none;
}
.wpcf7-spinner{
	display: none !important;
}

.wpcf7-list-item-label a{
	font-weight: 900 !important;
}

.wpcf7-acceptance .wpcf7-list-item-label{
    font-size: 15px !important ;
}

.skewtop{
	position: absolute;
	width: 100%;
	left: 0px;
	bottom: -1px;
}

.skewbottom{
	position: absolute;
	top: -1px;
	width: 100%;
	left: 0px;
	z-index: 1;
}
.reveal-overlay{
	z-index: 999999999 !important;
}

.reveal{
	width: 100%;
    max-width: 75rem;
    padding: 50px;
    top: 50px !important;
}

.reveal h1{
	color: #618984;
}

.auteur{
	margin-top: -190px;
}

.blob1{
	width: 30%;
    max-width: 500px;
    position: absolute;
    right: 0px;
    z-index: 2;
    bottom: -160px;
}
.blob2{
	width: 35%;
    max-width: 500px;
    position: absolute;
    top: -160px;
    left: 0px;
    z-index: 2;
}

.blob3{
	width: 27%;
    max-width: 500px;
    position: absolute;
    top: -160px;
    right: 0px;
    z-index: 2;
}

.blob4{
	width: 20%;
    max-width: 500px;
    position: absolute;
    top: -200px;
    left: 0px;
    z-index: 2;
}

.blob5{
	width: 22%;
    max-width: 500px;
    position: absolute;
    top: -160px;
    right: 0px;
    z-index: 2;
}


.blob6{
	width: 22%;
    max-width: 500px;
    position: absolute;
    bottom: 0px;
    left: 0px;
    z-index: 2;
}

.cd-primary-nav h3{
	padding-bottom: 20px;
	color: #709190;
}

.cd-primary-nav h5{
	letter-spacing: 2px;
}

.cd-primary-nav h5:hover{
	color: #F2B723;
}

.cd-primary-nav p{
	color: white;
}

.cd-primary-nav{
	background: url('img/triangles_bg.png'), #232d3c;
}

#menusocket p{
	color: white;
}

#menusocket hr{
	width: 100%;
	left: 0px;
	border-bottom: dotted 2px white;
	max-width: 100%;
	opacity: 0.5;
	z-index: 1;
}

.cd-primary-nav a{
	font-weight: bold;
}

.cd-primary-nav a:hover{
	color: #F2B723;
}

#menusocket{
	margin-top: 50px;
}

/* header */

.orbit-previous, .orbit-next{
	z-index: 1;
}
#header{
	min-height: 85vh;
	background: black;
	color: white;
	position: relative;
}


.orbit-slide{
	min-height: 85vh;
	background-size: cover !important;
	background-position: center center !important;
	background-repeat: no-repeat !important;
}

.overlay{
	position: absolute;
	width: 100%;
	min-height: 95vh;
	background: RGBA(36, 46, 61, 0.4);
	padding-top: 200px;
	color: white;
}

.overlay h1{
	text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

.overlay p{
	color: white;
	text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

.overlay .button{
	text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

.orbit-previous, .orbit-next{
	background: #F2B723;
    border-radius: 80px;
    color: #1E262D;
    background-color: #F2B723 !important
}

.orbit-previous:hover, .orbit-next:hover{
	background: white;
	background-color: white !important;
    color: #1E262D;
}

.orbit-previous {
    left: 10px;
}

.orbit-next {
    right: 10px;
}


/* CTA buttons */

.ctabutton1{
	width: 130px;
	height: 130px;
	background:  url('img/rond-aanvragen.svg'), #F2B723;
	background-size: 90%;
	background-position: center center;
	background-repeat: no-repeat;
	border-radius: 50%;
	z-index: 2;
	position: relative;
	margin-top: -140px;

	box-shadow: 0 0 0 0 RGBA(242, 183, 35, 1.00);
	transform: scale(1);
	animation: pulse 2s infinite;
}

@keyframes pulse {
	0% {
		box-shadow: 0 0 0 0 RGBA(242, 183, 35, 0.7);
	}

	70% {
		box-shadow: 0 0 0 15px RGBA(242, 183, 35, 0);
	}

	100% {
		box-shadow: 0 0 0 0 RGBA(242, 183, 35, 0);
	}
}



#ctabuttons{
	width: 100%;
	position: absolute;
}


/* pakketten */

.blobpakket{
	position: absolute;
	left: 0;
	right: 0;
	margin: auto;
	width: 160px;
	z-index: 1;
	top: 33%;
}

#pakketten{
	background: black;
	min-height: 90vh;
	position: relative;
}

#pakketten h2{
	font-size: 45px !important;
	line-height: 45px !important;
}


.menuicon{
	position: fixed;
	right: 0px;
	z-index: 5;
	top:0px;
	filter: drop-shadow(0px 3px 3px rgba(0, 0, 0, 0.4));
}

#buttons{
	position: absolute;
    top: calc(50% - 150px);
    right: calc(50% - 32px);
    left: auto;
    width: 80px;
    display: block;
    z-index: 3;
}

.rond{
	margin-bottom: 25px;
    margin-left: 0;
    float: none;
    position: relative;
    z-index: 1071;
    display: block;
    background-color: #719430;
    height: 100px;
    width: 100px;
	border-radius: 100%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    padding-top: 37px;
}


.button-test{
	background: url('img/rond-test.svg'), #F2B723;
	background-position: center center;
	background-size: 90%;
	background-repeat: no-repeat;
}

.button-test i{
	font-size: 35px;
	color: white;
	transform: none !important;
}

.button-afspraak{
		background: url('img/rond-afspraak.svg'), white;
	background-position: center center;
	background-size: 90%;
	background-repeat: no-repeat;
}

.button-afspraak i{
	color: #F2B723;
	font-size: 35px;
}

.cookiebtn{
	background: #F2B723 !important;
	background-color: #F2B723 !important;
	color: #1E262D !important;
}

.logohead{
	width: 250px;
    position: fixed;
    left: 0;
	z-index: 5;
	filter: drop-shadow(0px 3px 3px rgba(0, 0, 0, 0.4));
}

.logomenu{
	width: 200px;
    position: fixed;
    left: 0;
    top: 0px;
	z-index: 10;
  -webkit-filter: drop-shadow( 3px 3px 2px rgba(0, 0, 0, .1));
  filter: drop-shadow( 3px 3px 2px rgba(0, 0, 0, .1));
  /* Similar syntax to box-shadow */

}

.scrolldown{
	max-width: 50px;
    bottom: -20px;
    position: absolute;
	 left: 0; 
  right: 0; 
  margin-left: auto; 
  margin-right: auto; 
  z-index: 2;
}

#pakket1{
	min-height: 90vh;
	background: url('img/triangles_bg.png'), #232d3c;
	background-position: center center;
	background-size: cover;
	color: white;
	float: left;
	padding-top: 20vh;
	padding-right: 90px;
	padding-left: 50px;
	position: relative;
}

.pakketbg{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 50%;

}

#pakket2{
	min-height: 90vh;
	background: url('img/triangles_bg.png'), #618984;
	background-position: center center;
	background-size: cover;
	color: white;	
	float: left;
	padding-top: 20vh;
	padding-right: 90px;
	padding-left: 50px;
	position: relative;
}

#pakket1 p, #pakket1 li, #pakket2 p, #pakket2 li{
	color: white;
}

.zindex{
	z-index: 2 !important;
	position: relative !important;
}


/* intro section, hoe?, bmi calculator */

#contentwit{
	background: white;
	padding-top: 100px;
	padding-bottom: 100px;
	position: relative;
}

#contentwit h1{
	color: #618984;
}

/*
#contentwit li{
	color: #618984;
}
*/

#blok{
	background: #618984;
	height: auto;
	padding: 40px 40px 20px 40px;
	position: relative;
	color: white;
margin-bottom: 100px;
}

#blok h3{
	color: white;
}

#blok i{
	color: RGBA(242, 183, 35, 1.00);
}

#blok p, #blok li{
	color: white;
}

#blok a{
	color: white;
	font-weight: bold !important;
}

#blokblauw{
	background: #232d3c;
	height: auto;
	padding: 40px 40px 20px 40px;
	position: relative;
	color: white;
	margin-bottom: 100px;

}

#blokblauw p, #blokblauw li{
	color: white;
}

#blokblauw a{
	color: white;
	font-weight: bold !important;
}

#blokblauw h5{
	line-height: 25px;
}

#calculator{
	min-height: 500px;
	background: black;
	color: white;
}

.schaduw{
	position: absolute;
    left: 12px;
    top: 12px;
    width: 100%;
    height: 100%;
    border-right: 12px solid;
    border-bottom: 12px solid;
    border-color: RGBA(213, 229, 224, 0.5);
    pointer-events: none;
}

.schaduwblauw{
	position: absolute;
    left: 12px;
    top: 12px;
    width: 100%;
    height: 100%;
    border-right: 12px solid;
    border-bottom: 12px solid;
    border-color: RGBA(35, 46, 61, 0.3);
    pointer-events: none;
}


/* waarom section */

#waarom{
	background: rgb(97,137,132);
	background: url('img/triangles_bg.png'), linear-gradient(220deg, rgba(97,137,132,1) 0%, rgba(30,38,45,1) 100%);
	background-size: cover !important;
	padding-top: 200px;
	padding-bottom: 150px;
	position: relative;
}

#waarom h1, #waarom h5{
	color: white;
}

#waarom .usp{
	position: relative;
	z-index: 2;
	width: 75%;
}

#waarom hr{
	position: absolute;
	top: 400px;
	width: 100%;
	left: 0px;
	border-bottom: dotted 5px white;
	max-width: 100%;
	opacity: 0.5;
	z-index: 1;
}

#uspcolumn p{
	color: white;
}


/* succes verhalen */

#succesverhalen{
	background: url('img/triangles_bg.png'), #618984;
	background-size: cover !important;
	min-height: 100vh;
	padding-top: 200px;
	padding-bottom: 150px;
	color: white !important;
	position: relative;
}

#succesverhalen p{
	color: white;
}

.owl-succesverhalen .owl-stage {
 	display: flex !important;
    flex-direction: row !important;   
    justify-content: center !important;   
    float: inherit !important;
}

.owl-carousel .owl-item img {
  width: 120px !important;
}
  
  .owl-next {
    float: right !important;
    background: #F2B723 !important;
    width: 40px !important;
    height: 40px !important;
    border-radius: 50px !important;
    color: #232d3c !important;
    margin-right: -50px !important;
    pointer-events: visible !important;
}

.owl-prev {
    float: left !important;
    background: #F2B723 !important;
    width: 40px !important;
    height: 40px !important;
    border-radius: 50px !important;
    color: #232d3c !important;
    margin-left: -50px !important;
    pointer-events: visible !important;
    transition: 0.5s;
}

.owl-prev:hover, .owl-next:hover{
	background: white !important;
	 transition: 0.5s;
}

.owl-nav {
    position: absolute;
    top: 150px;
    width: 100%;
    pointer-events: none;
}

#succesverhaal{
	min-height: 400px;
	width: 100%;
	background: url('img/succes_bg.svg');
	background-size: contain;
	background-repeat: no-repeat;
	padding-top: 100px;
	padding-left: 40px;
	padding-right:40px;
	text-align: center !important;
	position: relative;
}

#succesverhaal span{
    font-family: 'Catamaran';
    font-weight: lighter;
    line-height: 22px;
    color: #232e3c;
    font-style: italic;
}

.profiel{
	float: left;
	position: absolute;
	bottom: 20px;
	left: 0px;
	width: 100%;
}

.profiel strong{
	color: #232d3c !important;
	text-align: left !important;
	font-weight: 900 !important;
	line-height: 20px !important;
	float: left !important;
	margin-top: 10px;
	margin-left: 10px;
	font-style: italic;
}

.profiel img{
	float: left;
}

.profielfoto{
	width: 120px !important;
}



/* nieuws */

#filter{
	font-weight: bold;
}

#filter p{
	text-transform: uppercase;
	display: inline-block;
}

#blok select{
	display: inline-block;
	font-family: 'Catamaran';
	font-weight: bold;
	color: #628984;

}

.hide{display: none;}

#nieuws{
	background: url('img/triangles_bg.png'), #232d3c;
	background-size: cover !important;
	color: white;
	padding-top: 200px;
	padding-bottom: 150px;
	position: relative;
}

#nieuws p{
	color: white;
}

#nieuwsbericht p{
	color: white;
}

#nieuwsbericht{
	border-bottom: 2px dotted white;
	padding-bottom: 30px;
	padding-top: 50px;
}

#nieuwsbericht img{
	width: 100%;
}

#meernieuws{
	margin-top: 100px;
}

#nieuwsouter{
	float: left;
	width: 50%;
}

#nieuwsitem{
	margin-bottom: 50px;
	background: url('img/nieuwsbg.svg');
	background-size: contain;
	background-position: center center;
	background-repeat: no-repeat;
}

#nieuwsitem a{
	color: white !important;
}

#postimg{
	background-size: cover !important;
	background-position: center center !important;
}

/* content 3 */

.content3{
	padding-top: 150px !important;
	padding-bottom: 150px !important;
}

/* page */

#headersmall{
	min-height: 65vh;
	background: url('img/triangles_bg.png'), linear-gradient(220deg, rgba(97,137,132,1) 0%, rgba(30,38,45,1) 100%);
	background-size: cover !important;
	background-position: center center !important;
	position: relative;
	padding-top: 200px;
	padding-bottom: 120px;
		color: white;
}

#headerresult{
	min-height: 300px;
	background: url('img/triangles_bg.png'), linear-gradient(220deg, rgba(97,137,132,1) 0%, rgba(30,38,45,1) 100%);
	background-size: cover !important;
	background-position: center center !important;
	position: relative;
	padding-top: 100px;
	padding-bottom: 120px;
		color: white;
}

#headersmall p{
	color: white;
}

#headersmall h1{
	color: white;
	font-size: 70px;
	line-height: 65px;
}


#sideimg{
	width: 100%;
	height: 440px;
	background: url('img/jlh_side1.jpg');
	background-size: cover !important;
	background-position: center center !important;
	position: relative;
	pointer-events: none;
}

#sideimg img{
	position: absolute;
	top:0px;
	height: 100%;
	width: 100%;
	pointer-events: none;
}

#panel{
	margin-bottom: 0px;
}

/* SHOP */

#shopbg{
	background: #232d3c;
	padding-top: 200px;
	position: relative;
	min-height: 90vh;
}

.prijs{
	color: #F2B723 !important;
}

#product1{
	background-position: center center;
	background-size: cover;
	color: white;
	height: 500px;
	width: 50%;
	float: left;
	padding-right: 50px;
	padding-left: 90px;
	position: relative;
	margin-bottom: 200px;
}

#product2{
	background-position: center center;
	background-size: cover;
	color: white;
	height: 500px;
	width: 50%;
	float: left;
	padding-right: 90px;
	padding-left: 50px;
	position: relative;
	margin-bottom: 200px;
}

#shopbg .grid-container.full{
	max-width: 120rem;
}

#product1 p, #product1 li, #product2 p, #product2 li{
	color: white;
}

#nieuws #blok{
	margin-bottom: 50px;
}

/* afrekenen */

#afrekenen{
	background: white;
	padding-top: 150px;
	padding-bottom: 100px;
	position: relative;
	min-height: 90vh;
}

#afrekenen h1{
	color: #628984;
}

#afrekenen h3{
	color: #232d3c;
}

/* product */

#productbg{
	background: white;
	padding-top: 150px;
	padding-bottom: 100px;
	position: relative;
}

#productbg h1{
	color: #618984;
}

#productbg li{
	color: #618984;
}


#bmicalculator{
	background: white;
	padding-top: 150px;
	padding-bottom: 100px;
	position: relative;
	min-height: 90vh;
}

#bmicalculator h1{
	color: #628984;
}

#bmicalculator h3{
	color: #232d3c;
}

.slidecontainer {
  width: 100%;
}

.slider {
  -webkit-appearance: none; 
  width: 100%; 
  height: 15px; 
  background: #232d3c !important;
  outline: none; 
  opacity:1; 
  -webkit-transition: .2s; 
  transition: opacity .2s;
  border-radius: 20px;
}


.slider:hover {
  opacity: 1; 
}

.slider::-webkit-slider-thumb {
  -webkit-appearance: none;

  width: 40px;
  height: 40px;
  background: #F2B723 !important; 
  cursor: pointer;
    border-radius: 50px;
}

.slider::-moz-range-thumb {
  width: 40px; 
  height: 40px; 
  background: #04AA6D;
  cursor: pointer; 
  border-radius: 50px;
  }
  
.lengte.slider{
	transform: rotate(270deg);
    position: absolute;
    top: 190px;
    /* left: 0px; */
    width: 400px;
    margin-left: -150px;
}  

#sliderouter{
	position: relative;
}

#lengtetab{
	min-height: 500px;
}
  
#bmicalculator input[type='number']{
background: #EAF2F0;
    border: none;
    box-shadow: none;
    font-weight: 900;
    font-family: 'Catamaran';
    font-size: 35px;
    height: 70px;
    padding-left: 17px;
    color: #628984;
} 

input[type='text'], input[type='email'], input[type='tel'], input[type='date'], input[type='number']  {
	background: #EAF2F0;
    border: none;
    box-shadow: none;
    font-family: 'Catamaran';
    padding-left: 17px;
      color: #628984;
      font-weight: bold;
      
}

input[type='text']:focus, input[type='email']:focus, input[type='tel']:focus, input[type='date']:focus, input[type='number']:focus {
	background: #EAF2F0;
    border: 2px solid #628984;;
    box-shadow: none;
    font-family: 'Catamaran';
    padding-left: 17px;
      color: #628984;
      font-weight: bold;
      
	
	
}

textarea{
	background: #EAF2F0;
    border: 2px solid #628984;;
    box-shadow: none;
    font-family: 'Catamaran';
    padding-left: 17px;
    color: #628984;
    font-weight: bold;
	width: 100% !important;
	height: 300px;
}

#results{
	background: white;
	padding-top: 50px;
	padding-bottom:100px;
	position: relative;
	min-height: 90vh;
}


#bmiresult{
	height: 300px;
	position: relative;
	margin-top: -200px;
	text-align: center;
}

.bmitext{
	position: absolute;
	color: white;
	top:120px;
	text-align: center;
	 width: 100%;
}

.bmitext h1{
	font-size:110px;
	margin-top:20px;
}


/* 404 pagina */

#notfound{
	background: rgb(97,137,132);
	background: url('img/triangles_bg.png'), linear-gradient(220deg, rgba(97,137,132,1) 0%, rgba(30,38,45,1) 100%);
	background-size: cover !important;
	padding-top: 200px;
	padding-bottom: 150px;
	position: relative;
	color: white;
	min-height: 90vh;
}

.reveal input{
	width: 100% !important;
}

#nieuwsbrief{
	max-width: 35rem !important;
	z-index: 999999 !important;
}
  
/* footer */
#CookiebotWidget{
	display: none !important;
}
#footer{
	background: white;
	min-height: auto;
	padding-top: 80px;
	padding-bottom: 80px;
	padding-left: 50px;
	padding-right: 50px;
}

#footer a{
	color: #618984;
	font-weight: 900;
}

#footer a:hover{
	color: #232d3c;
}

#footer input{
	font-family: 'Catamaran';
	border: 2px solid #232d3c;
}

#footer h5{
	color: #232d3c;
}

#socket{
	margin-top: 50px;
}

#cookie-notice, #cookie-notice .cn-button{
	font-family: 'Catamaran';
	font-weight: 900;
}

	
.footerright{
	text-align: right !important;
    float: right !important;
}
	

/* bmi calculator */

#prevBtn{
	height: 50px;
	width: 50px;
	border-radius: 50px;
	background: #F2B723;
}

#nextBtn{
	height: 50px;
	width: 50px;
	border-radius: 50px;
	background: #F2B723;
}

#prevBtn:hover{
	background: #232d3c;
	color: white;
	transition: 0.5s;
}

#nextBtn:hover{
	background: #232d3c;
	color: white;
	transition: 0.5s;
}

.tab {
  display: none;
}

.step {
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #232d3c;
  border: none;  
  border-radius: 50%;
  display: inline-block;
  opacity: 0.2;
}

.step.active {
  opacity: 1;
}

/* Mark the steps that are finished and valid: */
.step.finish {
  background-color: #232d3c;
  opacity: 1;
}

.ondergewicht{
	color: #F2B723 !important;
}

.gezondgewicht{
	color: #55cc1e !important;
}

.overgewicht{
	color: #F28116 !important;
}

.obesitas{
	color: #f33a00 !important;
}

.extremeobesitas{
	color: #773d00 !important;
}

#tabel{
	width: 100%;
	margin-top: 100px;
	margin-bottom: 150px;
}

#cat1{
	width: 20%;
	min-height: 100px;
	background: #F2B723;
	color: white;
	padding-top: 20px;
	padding-bottom: 20px;
	float: left;
}

#cat2{
	width: 20%;
	min-height: 100px;
	background: #55cc1e;
	color: white;
	padding-top: 20px;
	padding-bottom: 20px;
	float: left;
}

#cat3{
	width: 20%;
	min-height: 100px;
	background: #F28116;
	color: white;
	padding-top: 20px;
	padding-bottom: 20px;
	float: left;
}

#cat4{
	width: 20%;
	min-height: 100px;
	background: #f33a00;
	color: white;
	padding-top: 20px;
	padding-bottom: 20px;
	float: left;
}

#cat5{
	width: 20%;
	min-height: 100px;
	background: #773d00;
	color: white;
	padding-top: 20px;
	padding-bottom: 20px;
	float: left;
}


.cc-selector input{
    margin:0;padding:0;
    -webkit-appearance:none;
	-moz-appearance:none;
	appearance:none;
}

.man{background-image:url('img/keuze-man.svg'); background-position: center center;}
.vrouw{background-image:url('img/keuze-vrouw.svg'); background-position: center center;}

.showvrouw{
	display: none;
}

.showman{
	display: none;
}

.cc-selector input:active +.gender{opacity: .9;}
.cc-selector input:checked +.gender{
    -webkit-filter: none;
       -moz-filter: none;
            filter: none;
}

.gender:hover{
	 filter: brightness(1.1) grayscale(0.5) ;
	 transition: 0.5s;
}

.gender{
    cursor:pointer;
     transition: 0.5s;
    background-size:contain;
    background-repeat:no-repeat;
    display:inline-block;
    width:240px;height:170px;
    -webkit-transition: all 100ms ease-in;
       -moz-transition: all 100ms ease-in;
            transition: all 100ms ease-in;
    -webkit-filter: brightness(1.1) grayscale(1) ;
       -moz-filter: brightness(1.1) grayscale(1) ;
            filter: brightness(1.1) grayscale(1) ;
}

[type='text'], [type='password'], [type='date'], [type='datetime'], [type='datetime-local'], [type='month'], [type='week'], [type='email'], [type='number'], [type='search'], [type='tel'], [type='time'], [type='url'], [type='color'], textarea{
	width: auto;
}

[type='text']:focus, [type='password']:focus, [type='date']:focus, [type='datetime']:focus, [type='datetime-local']:focus, [type='month']:focus, [type='week']:focus, [type='email']:focus, [type='number']:focus, [type='search']:focus, [type='tel']:focus, [type='time']:focus, [type='url']:focus, [type='color']:focus, textarea:focus{
	    background-color: white !important;
}

#contentwit input[type=text], #contentwit input[type=date], #contentwit input[type=tel], #contentwit input[type=email], #contentwit input[type=tel] #contentwit textarea, #footer input{
	width: 100% ;
	border: 2px solid #628984;
}

[type='submit']{
	width: auto !important;
}

.screening input[type=text], .screening input[type=number], .screening input[type=date], .screening input[type=tel], .screening input[type=email]{
	width: 100% !important;
}
.screening h5{
	color: #1E262D;
	margin-top: 20px;
}

.screening h3{
	color: #618984;
}

.notice{
	background: rgba(255, 0, 0, 0.05);
	color: red;
	border: 2px dashed red;
	padding: 15px;
	width: 100%;
	height: auto;
	font-family: 'Catamaran' !important;
	margin-bottom: 20px !important;
}

.consultadvies{
	background: RGBA(30, 38, 45, 0.1);
	color: #1E262D;
	border: 2px dashed #1E262D;
	padding: 15px;
	width: 100%;
	height: auto;
	font-family: 'Catamaran' !important;
	margin-bottom: 20px !important;  
}

.consultadvies strong, .notice strong {
	font-size: 20px;
	line-height: 23px;
}

.step-title, .step-index{
	font-family: 'Catamaran' !important;
	font-weight: bold;
	text-transform: uppercase;
}

.step-index{
	color: #628984;
	margin-bottom: 10px;
}


.wpcf7cf_multistep .wpcf7cf_steps-dots .dot.active .step-index, .wpcf7cf_multistep .wpcf7cf_steps-dots .dot.completed .step-index{
	background-color: #628984;
	color: white;
}

.wpcf7cf_multistep .wpcf7cf_steps-dots .dot.active, .wpcf7cf_multistep .wpcf7cf_steps-dots .dot.completed{
	border-bottom: 5px solid #628984;
}

.wpcf7-list-item{
	width: 48% !important;
	margin-left: 0px !important;
	background: #EAF2F0;
    margin-right: 10px;
	min-height: 50px;
	    padding: 15px 5px 0px 15px;
}

.wpcf7-acceptance .wpcf7-list-item{
	width: 100% !important;
}

.wpcf7-list-item-label{
	font-size: 20px;
    line-height: 1.8;
    color: #628984;
    font-weight: 900;
    text-transform: uppercase;
       margin-top: -5px;
    margin-left: 5px;
    float: left;
	font-family: 'Catamaran' !important;
	
}



.screening input[type=radio], .screening input[type=checkbox]{
	appearance: none;
	width: 20px;
	height: 20px;
	border: 2px solid #628984;
	border-radius: 50%;
	background-clip: content-box;
	padding: 3px;
	float: left;
}

.screening input[type="radio"]:checked, .screening input[type=checkbox]:checked {
	background-color: #628984;
}

.wpcf7 form.invalid .wpcf7-response-output, .wpcf7 form.unaccepted .wpcf7-response-output {
    border-color: #ffb900;
    border: 2px dashed #ffb900;
    font-family: 'Catamaran';
    background: RGBA(242, 183, 35, 0.1);
    padding: 15px;
    color: #1E262D;
}

.wpcf7 form.sent .wpcf7-response-output, .wpcf7 form .wpcf7-response-output, .wpcf7-response-output{
	border-color: #ffb900 ;
    border: 2px dashed #628984;
    font-family: 'Catamaran';
    background: RGBA(98, 137, 132, 0.1);
    padding: 15px;
    color: #1E262D;
	
}   

.wpcf7-checkbox  .wpcf7-list-item{
	width: 100% !important;
}
    
.wpcf7cf_next-container, .wpcf7cf_prev-container{
	display: none;
}


.accordion-title{
	background: #EAF2F0;
	font-size: inherit;
	font-weight: bold;
	color: #618984;
	transition: 0.5s;
}

.accordion-title:hover, .accordion-title:focus{
	background: #618984 !important;
	color: white !important;
	transition: 0.5s;
}

.trajectplan #blok{
	margin-bottom: 20px;
}

.bekijken{
	position: absolute !important;
    bottom: 24px !important;
    left: 97px !important;
    width: 40px !important;
    max-width: 40px !important;
}






/* Small only */
@media screen and (max-width: 39.9375em) {

	h1{line-height: inherit;}
	p{line-height: 26px;}
	#menubalk{display: none;}
	
	#header, .overlay, .orbit-slide{max-height: 60vh !important; min-height: 60vh !important;}
	.orbit-next{ right: 0px;}
	.orbit-previous{left: 0px;}
	.orbit-previous, .orbit-next{padding: 7px;}
	.overlay{padding-top: 120px; padding-left:30px;padding-right: 30px;}
	
	#contentwit{padding-top: 100px; padding-bottom: 100px;}
	.button::before{margin-top: -10px;}
	
	
	.blob1, .blob2, .blob3, .blob4, .blob5, .blob6{ width: 45%;}
	.blob1{bottom: -90px;}
	.blob2{top: -110px;}
	.blob3{top: -90px;}
	.blob4{top: -150px;}
	.blob5{top: -100px;}
	.blob6{bottom: -70px; width: 35% !important;}
	
	#waarom .usp{width: 60%}
	
	#pakket1, #pakket2{width: 100%; min-height: auto;}
	
	#pakket1{
		padding-top: 100px;
		padding-left: 10px;
		padding-right: 10px;
		padding-bottom: 50px
	}
	
	#pakket2{
		padding-top: 50px;
		padding-left: 10px;
		padding-right: 10px;
		padding-bottom: 100px
	}
	
	.productimg{
		display: none;
	}
	#headersmall{
		min-height: 40vh;
	}
	
	.pakketbg{display: none;}
	
	#blok{
		padding: 20px !important;
	}
	
/*
	.schaduw{
		display: none !important;
	}
	
*/
	#nieuws{
		padding-bottom: 100px;
	}
	
	.content3{
		padding-top: 100px !important;
		padding-bottom: 100px !important;
	}
	#waarom{
		padding-bottom: 100px;
		padding-top: 100px;
		padding-left: 10px;
		padding-right: 10px;
	}
	
	.ctabutton1{
		width: 100px;
		height: 100px;
		margin-top: -60px;	
	}
	
	.dot{
		min-width: 25% !important;
		padding: 5px !important;
		width: 25%;
		
	}
	
	.wpcf7-list-item {
    	width: 100% !important;
    margin-bottom: 10px !important;
    }
    
    .wpcf7-list-item-label{
	    width: 85%;
    }
	.step-title{
		font-size: 10px !important;
	}
	
	#nieuws, #succesverhalen{
		padding-top: 150px;
		padding-bottom: 100px;
	}
	
	#blokblauw, #blok{
		margin-bottom: 50px;
	}
	
	.footerlogo{
		width: 40%;
	}
	
	#sideimg{
		height: 350px;
	}
	
	#panel{
		margin-bottom: 0px;
	}
	
	#nieuws{
		padding-left: 10px;
		padding-right: 10px;
	}
	
	.gender{
		width: 100px;
		height: 100px;
	}
	
	.lengte.slider{
		transform: rotate(270deg);
	    position: absolute;
	    top: 170px;
		width: 400px;
		margin-left: -180px;
	}
	
	.bmitext h1{
		margin-top: -30px;
		font-size: 80px;
	}
	
	.bmitext{
		top:30%;
	}
	#bmicalculator, #afrekenen{
		padding-top: 100px;
	}
	

	
	#bmiresult{ margin-top: -240px; margin-bottom: 50px;}
	
	#cat1, #cat2, #cat3, #cat4, #cat5{
		width: 100%;
		padding-bottom: 10px;
		min-height: 50px;
	}
	
	#tabel{
		margin-top: 50px;
		margin-bottom: 50px;
	}
	
	#bmiresult img{
		max-width: 290px !important;
	}
	

	#footer{
		padding-left: inherit;
		padding-right: inherit;
		padding-bottom: 20px;
	}
	
	.footerright{
	text-align: left !important;
    float: left !important;
	}
	

	
	
	
}

/* Medium and up */
@media screen and (min-width: 40em) {


}

/* Medium only */
@media screen and (min-width: 40em) and (max-width: 63.9375em) {
		
	.overlay{padding-left:50px;padding-right: 50px;}
	#header, .overlay, .orbit-slide{min-height: 75vh;}
	#pakketten{min-height: 110vh;}
	#pakket1, #pakket2{min-height: auto; padding-bottom: 150px;padding-top: 100px;}
	#headersmall{
		min-height: 40vh;
	}
	
	.blob4{ width: 27%;}
	.blob5{ width: 30%;}
	.blob6{ width: 30%; bottom: -120px;}
	
	.ctabutton1{
		margin-top: -100px;
	}
	
	#panel{
		margin-bottom: 0px;
	}
	
	.footerright{
		text-align: left !important;
		float: left !important;
	}
	
	#footer{
		padding-left: 20px;
	    padding-right: 20px;
	}
	
	.trajectplan #blok{
		margin-bottom: 20px;
	}
	
	#sideimg{
		height: 320px;
	}	
	
	#cat1, #cat2, #cat3, #cat4, #cat5{
		width: 100%;
		padding-bottom: 10px;
		min-height: 50px;
	}
	
		.bmitext{
		top: 90px;
	}
}

@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
  
  	:root {
    --menu-width: 52em; /* Width of menu */
    }
  
	.overlay{
		padding-left: 50px;
		padding-right: 50px;
	}
	
	#panel{
		margin-bottom: 0px;
	}
	
	#headersmall{
		min-height: 50vh;
	}
	
	.ctabutton1{
		margin-top: -80px;
	}

	
	.logomenu{
		display: none;
	}
	

	
	
  
}

/* Large and up */
@media screen and (min-width: 64em) {}

/* Large only */
@media screen and (min-width: 64em) and (max-width: 74.9375em) {}

/* these classes can be used to style the form */
.form-qonzzttiun {

}

.form-qonzzttiun label {
        display: block;
        padding: .4em 0 .1em 0;
}

.form-qonzzttiun fieldset {
	border: 0;
}

.form-qonzzttiun fieldset label {
        display: inline;
        padding: 0 0 0 .1em;
}

.form-qonzzttiun input[type=text], .form-qonzzttiun input[type=email], .form-qonzzttiun input[type=number] {
}

.form-qonzzttiun input[type=submit] {
	margin-top: 1em;
}

/* client side validation */
.form-qonzzttiun input:invalid {
	border: 2px dashed red;
}

.form-qonzzttiun input:invalid:required {
        border: 2px solid #ccc;
}

.form-qonzzttiun input:valid {
        border: 2px solid #ccc;
}