@font-face {
    font-family: "ProximaNova-Regular";
    src: url("fonts/proximanova/ProximaNova-Regular.eot");
    src: url("fonts/proximanova/ProximaNova-Regular.eot?#iefix") format("embedded-opentype"), url("fonts/proximanova/ProximaNova-Regular.woff") format("woff"), url("fonts/proximanova/ProximaNova-Regular.ttf") format("truetype"), url("fonts/proximanova/ProximaNova-Regular.svg#ProximaNova-Regular") format("svg");
}

@font-face {
    font-family: "ProximaNova-Bold";
    src: url("fonts/proximanova/ProximaNova-Bold.eot");
    src: url("fonts/proximanova/ProximaNova-Bold.eot?#iefix") format("embedded-opentype"), url("fonts/proximanova/ProximaNova-Bold.woff") format("woff"), url("fonts/proximanova/ProximaNova-Bold.ttf") format("truetype"), url("fonts/proximanova/ProximaNova-Bold.svg#ProximaNova-Bold") format("svg");
}

@font-face {
    font-family: "ProximaNova-Semibold";
    src: url("fonts/proximanova/ProximaNova-Semibold.eot");
    src: url("fonts/proximanova/ProximaNova-Semibold.eot?#iefix") format("embedded-opentype"), url("fonts/proximanova/ProximaNova-Semibold.woff") format("woff"), url("fonts/proximanova/ProximaNova-Semibold.ttf") format("truetype"), url("fonts/proximanova/ProximaNova-Semibold.svg#ProximaNova-Semibold") format("svg");
}



div#voedingsschema{
    min-height: 530px;
}
ul#pages{
    margin: 0;
    padding: 0;
    list-style-type: none;
}
ul#page_nav{
    margin: 0;
    padding: 0;
    list-style-type: none;
}
ul#page_nav li{
    display: inline-block;
    padding: 0 10px;
    cursor: pointer;
    color: #b9b9b9;
    background-color: #fafafa;
    list-style: none;
}
ul#page_nav li.selected{
    color: #000000;
    background-color: #ffffff;
}
ul#goal_list{
    margin: 0;
    padding: 0;
    list-style-type: none;
}
ul#goal_list li{
    display: inline;
    margin: 0 10px;
      font-size: 16px;
    cursor: pointer;
    color: #ccc;

}
ul#goal_list li.selected{
    color: #000000;
    font-family:"ProximaNova-Bold";
  
    background-color: #ffffff;
}
ul#pages li h1 mark{
    color: green;
    background-color: transparent;
}

div.lowerbar{
    border-top: solid 1px #f3f1ea;
    background-color: #faf8f1;
    min-height: 85px;
    padding: 15px;
    vertical-align: middle;
}



/* Calculator styling */

#voedingsschema, #voedingsschema-thanks{font-family: 'ProximaNova-Regular';}
#voedingsschema input, #voedingsschema select{font-family: 'ProximaNova-Regular';}
#voedingsschema .fa-check, #voedingsschema-thanks .fa-check{color:#2fa61f;}
#voedingsschema .primary-btn, #voedingsschema-thanks .primary-btn{
  border-width: 1px;
  border-color: rgb(110, 177, 33);
  border-style: solid;
  border-radius: 5px;
  background-image: -moz-linear-gradient( 90deg, rgb(131,197,52) 0%, rgb(167,214,63) 100%);
  background-image: -webkit-linear-gradient( 90deg, rgb(131,197,52) 0%, rgb(167,214,63) 100%);
  background-image: -ms-linear-gradient( 90deg, rgb(131,197,52) 0%, rgb(167,214,63) 100%);
  color:#fff;
  font-size: 18px;
  text-transform: none;
  padding: 20px 35px;
}

#voedingsschema .secondary-btn{background: none; color:#9f9e99; border:0px;   padding: 20px 35px; text-transform: none; font-size: 16px; font-weight: 500;}
#voedingsschema, #voedingsschema-thanks{-webkit-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.29);
-moz-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.29);
box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.29);-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px; border:1px solid #f5f5f5;}

#voedingsschema #pages > li{list-style: none;}
#voedingsschema h2{margin-bottom: 10px;}
#voedingsschema .intro{font-size: 16px; color:#585858;}
#voedingsschema .ui-slider-handle{width:50px; height:50px; background:url('img/slider-btn.png'); background-size: cover; border:0px; top:-17px;}
#voedingsschema .lowerbar{padding:10px 150px;}
#voedingsschema .lowerbar .primary-btn{float:right;}


/* Navigation */

#voedingsschema #page_nav > li{width:25%; text-align: center; padding: 15px 0; font-size: 18px;}
#voedingsschema #page_nav li.selected{font-family:"ProximaNova-Bold"; color:#222; position: relative;
top: -10px;
border: 1px solid #eee;
border-bottom: 0px;
left: -1px;
padding-bottom: 20px;}
#voedingsschema #page_nav .round{display: inline; background:#e9e9e9; border:#ddd; color:#cdcccc; font-family:"ProximaNova-Bold"; width:20px; height:20px; -webkit-border-radius: 30px;
-moz-border-radius: 30px;border-radius: 30px; padding: 6px 9px 5px 9px; margin-right: 10px;}
#voedingsschema #page_nav li.selected .round{background:#03a9f5; color:#fff; border-color:#0d96d6;}
#voedingsschema #page_nav li:first-child .round{padding: 6px 11px 5px 11px;}



/* Step 1 */

#voedingsschema #page_1{width: 700px;margin: 190px auto 30px auto; text-align: center;}
#voedingsschema #page_1 h1{font-size: 48px; font-family: 'ProximaNova-Regular'; font-family:"ProximaNova-Bold"; margin-bottom: 10px;}
#voedingsschema #page_1 p{margin-bottom: 10px;}
#voedingsschema #page_1 h3{font-size: 21px; margin: 0px;}

/* Step 2 */
#voedingsschema #page_2 .inner{width: 800px;margin: 20px auto 40px auto;}
#voedingsschema h2{font-size: 36px;}
#voedingsschema #page_2 .input-slide{padding: 15px 0;}
#voedingsschema #page_2 .input-slide > div{display: inline-block;}
#voedingsschema #page_2 .input-slide input{font-size: 21px; font-family: "ProximaNova-Regular";}
#voedingsschema #page_2 .input-slide .left{width:15%;  font-size: 21px; font-family:"ProximaNova-Semibold";}
#voedingsschema #page_2 .input-slide .middle{width:63%;}
#voedingsschema #page_2 .input-slide .right{width:20%; font-size: 21px; font-family:"ProximaNova-Semibold"; font-style: italic;}
#voedingsschema #page_2 .input-slide .right input{width:70px; background: #fff; border:2px solid #ededed; padding: 5px 0px 5px 10px; text-align: right; ;-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px; }
#voedingsschema #page_2 #gender_form{font-size: 21px;}
#voedingsschema #page_2 #gender_form input:nth-child(3){margin-left: 10px;}
#voedingsschema #page_2 #gender_form input{width:auto;}


/* Step 3 */
#voedingsschema #page_3 .inner{width: 800px;margin: 20px auto 40px auto;}
#voedingsschema #page_3 .left{width:15%;}
#voedingsschema #page_3 .middle{width:25%;}
#voedingsschema #page_3 .right{width: 58%; font-size: 12px; padding-left:20px;}
#voedingsschema #page_3 .right p{position: relative; top:8px;}
#voedingsschema #page_3 .input-field{padding: 5px 0;}
#voedingsschema #page_3 .input-field > div{display: inline-block;}
#voedingsschema #page_3 select{background: #fafafa; border: 1px solid #eee; font-family: 'ProximaNova-Regular'; font-size: 16px; height:48px;  width: 100%;   -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    padding: 5px; padding: 5px 15px; -webkit-border-radius: 5px;
-moz-border-radius: 5px;border-radius: 5px; background: url('img/select-bg.png') right 10px center no-repeat #fff;}


/* Step 4 */
#voedingsschema #page_4 .inner{width: 800px;margin: 20px auto 40px auto;}
#voedingsschema #page_4 #goal_list li{width:30%; display: inline-block; text-align: center;}
#voedingsschema #page_4 #goal_list li .image{background: #f7f7f7; min-width:230px; min-height:140px;  -webkit-border-radius: 5px;
-moz-border-radius: 5px;border-radius: 5px; padding:20px 70px; margin-bottom: 10px;} 
#voedingsschema #page_4 #goal_list li .image img{max-width: 100px;}
#voedingsschema #page_4 #goal_list li.selected .image{border: 1px solid #03a9f5; -webkit-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.29);
-moz-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.29);
box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.29);}

#voedingsschema #page_4 #goal_list #afvallen.selected .image{background: #fff url('img/afvallen-active.jpg') no-repeat center center;  background-size:50%;}
#voedingsschema #page_4 #goal_list #afvallen .image{background: #f5f5f5 url('img/afvallen-inactive.png') no-repeat center center;  background-size:50%;}

#voedingsschema #page_4 #goal_list #blijven.selected .image{background: #fff url('img/gewicht-active.jpg') no-repeat center center;  background-size:50%;}
#voedingsschema #page_4 #goal_list #blijven .image{background: #f5f5f5 url('img/gewicht-inactive.png') no-repeat center center;  background-size:50%;}

#voedingsschema #page_4 #goal_list #aankomen.selected .image{background: #fff url('img/aankomen-active.png') no-repeat center center;  background-size:50%;}
#voedingsschema #page_4 #goal_list #aankomen .image{background: #f5f5f5 url('img/aankomen-inactive.png') no-repeat center center;  background-size:50%;}

/* Step 5 */
#voedingsschema #page_5 .inner{width: 800px;margin: 20px auto 40px auto;}
#voedingsschema #page_5 .form-field{margin-bottom: 15px;}
#voedingsschema #page_5 .form-field > *{display: inline-block;}
#voedingsschema #page_5 .form-field label{width:20%;}
#voedingsschema #page_5 .form-field input{width:78%; padding: 15px;}



/* Bedanktpagina */
#voedingsschema-thanks {background: url('img/stap-0-bg.jpg') no-repeat top -70px center;  font-size: 16px; border-bottom: 5px solid #000;}
#voedingsschema-thanks .container{max-width:1100px; padding:0 80px;}
#voedingsschema-thanks h1, #voedingsschema-thanks h2{margin-top: 0px; margin-bottom: 10px;}
#voedingsschema-thanks #gratis{padding-top: 150px; padding-bottom: 30px;}
#voedingsschema-thanks h1{font-size: 34px; font-family:"ProximaNova-Semibold";}
#voedingsschema-thanks #gratis ul{margin: 0px;}
#voedingsschema-thanks #gratis li{display: inline-block; list-style: none; margin-right: 20px;}
#voedingsschema-thanks #betaald{background:#f7fbfe; border-top:1px solid #ece9de; padding-top:50px; font-size: 18px;} 
#voedingsschema-thanks #betaald h2{font-size: 41px; font-weight:700; }
#voedingsschema-thanks #betaald ul li{list-style: none;}
#voedingsschema-thanks strong.green{color:#2fa61f;}
#voedingsschema-thanks .center{text-align: center;}
/* intro */
#voedingsschema-thanks #betaald .intro{margin-bottom: 40px;}
#voedingsschema-thanks #betaald .intro h2{text-align: center; margin-bottom: 20px;}
#voedingsschema-thanks #betaald .intro p{margin-top: 20px;}

/* recepten */
#voedingsschema-thanks #betaald .recepten{padding:40px 0;}

/* recepten */
#voedingsschema-thanks #betaald .sale{text-align: center;}
#voedingsschema-thanks #betaald .sale h2{text-align: center; font-size: 38px;}
#voedingsschema-thanks #betaald .sale p{margin-bottom: 30px;}
#voedingsschema-thanks #betaald .sale img{max-width: 70%; text-align: center;}
#voedingsschema-thanks #betaald .sale h3{margin: 10px auto; font-size: 18px; font-family:"ProximaNova-Bold"; max-width: 70%;}

/* recepten */
#voedingsschema-thanks #betaald .cta{padding: 40px 0;}
#voedingsschema-thanks #betaald .cta .price{color:#2fa61f; font-size: 38px; position: relative; top:-30px;}
#voedingsschema-thanks #betaald .cta .price strong{font-size: 82px; font-weight: 500; position: relative; top:28px;}
#voedingsschema-thanks #betaald .call a {
	display: block;
	padding: 30px 33px 28px;
    margin-left: 14px;
	font: 1em "proximanova-bold";
	font-weight: normal;
	color: #000000 !important;
	text-align: center;
	border: none;
	font-size: 21px;
	-webkit-border-radius: 2px;
	-moz-border-radius: 2px;
	-ms-border-radius: 2px;
	border-radius: 2px;
    border: 1px solid #dd8600;
    cursor: pointer;
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#fdb42b+0,fdab2b+47,fda22b+100 */
    background: #fdb42b; /* Old browsers */
    background: -moz-linear-gradient(top,  #fdb42b 0%, #fdab2b 47%, #fda22b 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top,  #fdb42b 0%,#fdab2b 47%,#fda22b 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom,  #fdb42b 0%,#fdab2b 47%,#fda22b 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fdb42b', endColorstr='#fda22b',GradientType=0 ); /* IE6-9 */
}

#voedingsschema-thanks #betaald .call a:hover {
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#fda22b+0,fdab2b+53,fdb42b+100 */
    background: #fda22b; /* Old browsers */
    background: -moz-linear-gradient(top,  #fda22b 0%, #fdab2b 53%, #fdb42b 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top,  #fda22b 0%,#fdab2b 53%,#fdb42b 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom,  #fda22b 0%,#fdab2b 53%,#fdb42b 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fda22b', endColorstr='#fdb42b',GradientType=0 ); /* IE6-9 */
    text-decoration: none;
}
#voedingsschema-thanks #betaald .call{background:#f4f5f1; padding:10px; border:1px solid #e5e5dd;}

#voedingsschema-thanks .eenmalige-actie{background: #ed8f14; padding:15px 25px; color:#fff; font-size: 18px; font-family:"ProximaNova-Bold"; text-align: center; width:320px; margin: 0 auto; position: relative; top:30px;}
#voedingsschema-thanks .eenmalige-actie:after {
	top: 100%;
	left: 50%;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
	border-color: rgba(136, 183, 213, 0);
	border-top-color: #ed8f14;
	border-width: 10px;
	margin-left: -10px;
}

#voedingsschema-thanks .plus{width:40px; max-width: 100%;     position: absolute;
    right: -20px;
    top: 70px;
}

footer{
	background: none;
}

	
#last_form label.error{display: inline-block;
width: 100% !important;
color: red;
font-size: 14px;
text-align: right;}


@media screen and (max-width:1100px){
	#voedingsschema{width:100%;}
	#page_1{margin: 180px auto 30px auto !important; width:90% !important; }
	#page_2 .inner, #page_3 .inner, #page_4 .inner, #page_5 .inner{width:90% !important; margin: 60px auto  !important;}
	#voedingsschema .lowerbar{padding:10px 40px;}
}

@media screen and (max-width:900px){
	#voedingsschema #page_nav  .round{display: none;}
	#voedingsschema #page_nav li{font-size: 14px;}
	#voedingsschema #page_4 #goal_list li .image{background: #f7f7f7; min-width:115px; min-height:70px;  -webkit-border-radius: 5px;
-moz-border-radius: 5px;border-radius: 5px; padding:50px 50px; margin-bottom: 10px; background-size:25% !important;}
	#page_2 .inner, #page_3 .inner, #page_4 .inner, #page_5 .inner{width:90% !important; margin: 30px auto  !important;} 
	#voedingsschema h2{margin-top: 0px;}
		#voedingsschema-thanks h2{font-size: 28px !important; text-align: center; word-break: break-word !important;}
	#voedingsschema-thanks h2, #voedingsschema-thanks img, #voedingsschema-thanks .sale, #voedingsschema-thanks .cta {text-align: center !important;}
	#voedingsschema-thanks #betaald .call a{font-size: 15px;}
	#voedingsschema-thanks .container{padding:0 20px;}
	#voedingsschema-thanks h1{font-size: 28px;}
	#voedingsschema #page_4 #goal_list li{width:28%; font-size: 14px;}
	}
	
@media screen and (max-width:700px){
	#voedingsschema #page_2 .input-slide .left{width:100%; font-size: 16px; margin-bottom: 10px;}
	#voedingsschema #page_2 .input-slide .middle{width:70%;}
	#voedingsschema #page_2 .input-slide .right{width:28%; font-size: 16px;}
	#voedingsschema #page_3 .left{width:100%; font-family:"ProximaNova-Bold"; margin-bottom: 10px;}
	#voedingsschema #page_3 .middle{width:100%;}
	#voedingsschema #page_3 .right{width:100%; padding-left: 0px; font-style: italic;}
	#voedingsschema #page_3 b{font-size: 21px;}
	#voedingsschema #page_4 #goal_list li{width:100%;}
	#voedingsschema #page_4 #goal_list li .image{background-size:10% !important;}
	#voedingsschema #page_2 #gender_form{font-size: 16px;}
	#voedingsschema-thanks .eenmalige-actie{width: 95%;}
	#voedingsschema-thanks h2{font-size: 24px !important; text-align: center; word-break: break-word !important;}
	#voedingsschema-thanks ul.usp{margin-left: 20px; text-indent: -10px;}
		#voedingsschema-thanks h2, #voedingsschema-thanks img, #voedingsschema-thanks .sale, #voedingsschema-thanks .cta {text-align: left !important;}
		#voedingsschema-thanks #betaald .sale h3{max-width: 100%;}
	
}

@media screen and (max-width:550px){
		#voedingsschema #page_nav span{display: none;}
		#voedingsschema #page_nav .round{display: inherit;     width: 30px;   height: 30px;}
		#voedingsschema .primary-btn, #voedingsschema-thanks .primary-btn{font-size: 14px;}
		#voedingsschema #page_1 h1{font-size: 24px;}
		#voedingsschema h2{font-size: 18px;}
		#voedingsschema #page_3 b{font-size: 16px;}
		#voedingsschema #page_5 .form-field label{width:100%;}
		#voedingsschema #page_5 .form-field input{width:100%;}
		#voedingsschema .lowerbar{padding:10px 20px;}
		#voedingsschema .secondary-btn{font-size: 14px; padding:20px 15px;}
		#voedingsschema .intro{font-size: 14px;}
		#voedingsschema #page_2 .input-slide .right input{width:50px; font-size: 14px;}
		#voedingsschema .lowerbar .primary-btn{float:left; width: 100%;}
		div.lowerbar{min-height: 140px;}
		#voedingsschema{background-size: 150%;}
		#page_1{margin: 100px auto 30px auto !important; }
}

@media screen and (max-width:580px){
	#voedingsschema #page_2 .input-slide .middle{width:100%; margin: 20px 0;}
	#voedingsschema #page_2 .input-slide .right{width:100%;}
	#voedingsschema #page_2 .input-slide .right input{width:80px; font-size: 16px;}
	#voedingsschema-thanks{
		background: url('img/stap-0-bg.jpg') no-repeat top -40px center;
		background-size: 200%;
		}
	#voedingsschema-thanks #gratis img{
		max-width:100px;
	}
	#voedingsschema-thanks #gratis{
		padding-top: 70px;
	}
	#voedingsschema-thanks h1{
		font-size: 21px;
		}
	#voedingsschema-thanks .sale > *, #voedingsschema-thanks .cta > *{
		text-align: center !important;
	}
	#voedingsschema-thanks .sale h2{
		text-align: center !important;
	}
}