/*
Theme Name: bestellokall
Theme URI: http://bestellokall.nl
Description: The bestellokall based on the famous Wordpress CMS.
Version: 4.9
Author: default
*/

/* tijdelijk */

footer {display:none;}

/*Global CSS*/
* { margin: 0px; padding: 0px; box-sizing: border-box; }
body, html { margin: 0 !important; }
body { margin: 0px; padding: 0px; color: #000; font-size: 13px; font-family: arial, sans-serif; background: #fff; }
body.home, body.page-template-template-about-us { background: #fff; }
p { font-size: 14px;  line-height: 28px; color: #333333; }
a { color: #000; transition: all 0.4s ease 0s; -webkit-transition: all 0.4s ease 0s; }
a:hover { text-decoration: none; }
h1,h2,h3,h4,h5,h6 { font-weight: normal; }
h1 { font-size: 26px; }
h2 { font-size: 24px; }
h3 { font-size: 22px; }
h4 { font-size: 20px; }
h5 { font-size: 18px; }
h6 { font-size: 16px; }
ul, ol { padding: 0px 0px 20px 15px; }
.clear { clear: both; display: block; }
img {max-width: 100%;}

/* Wrapper */
#wrapper { float: left; width: 100%; overflow: hidden; }

	/* layout */
	#layout { width: 100%; position: relative; min-height: 800px; padding-top: 120px; }
	.wrapper { max-width: 1064px; margin: 0 auto; position: relative; }
	
	 
	/* header */
	#header { padding: 5px 0; position: fixed; width: 100%; left: 0; top: 0; z-index: 1; transition: all 0.4s ease 0s; -webkit-transition: all 0.4s ease 0s;  }
	#header.sticky { top: -55px; box-shadow: 1px 1px 10px rgba(0,0,0,0.6); background: #fff; }
	#header .logo {  float: left;  }
	#header .logo img { max-width: 50px; }
	 
	 
	/*Menu Bar */
	.menuBar { float: right;  }
	.menuBar nav { float: left; padding: 20px 0; }
	.menuBar a.mobilemenu, .menuBar a.close { display: none; }
	.menuBar ul { padding: 0px; list-style: none; }
	.menuBar li { position: relative; float: left; font-size: 14px; line-height: 17px; padding: 0 7px; }
	.menuBar li a { padding: 10px 15px; text-decoration: none; color: #000; font-weight: bold; text-transform: uppercase; }
	.menuBar li a:hover, .menuBar li.current-menu-item a { color: #86c340; }
	.menuBar li.last a { color: #fff; background:#86c340; border-radius: 25px; }
	.menuBar li.last a:hover{background: #86c340;}
	.menuBar li.current-menu-item li a { color: #fff; }
	.menuBar li.current-menu-item li a:hover, .menuBar li li.current-menu-item a { color: #503291; }
	.menuBar li ul { padding: 31px 0; position: absolute; left: 0px; top: 16px; width: 180px; }
	.menuBar li li { padding: 0px 15px; float: none; width: auto;  background: #EB3C96; }
	.menuBar li li a { padding: 7px 0; display: inline-block; color: #FFF; position: relative; }
	.menuBar li li a:hover { color: #eee; }
	.menuBar li li ul { left: 100%; top: 0px; }
	.menuBar li ul { display: none; }
	.menuBar li:hover ul { display: block; }
	.menuBar li:hover li ul { display: none; }
	.menuBar li:hover li:hover ul { display: block; }
	.whm-banner img { max-width: 100%; }
	
	/* home-page */
	.heading {margin: 40px 0;}
	.heading h2{font-size: 32px; color: #00a2e7; position: relative; text-align: center;}
	.heading h2::after{content: '';text-decoration: none;background-color: #00a2e7;position: absolute;
		display: block;width: 70px;height: 2px;margin: 16px auto;right: 0;left: 0;}
	.heading h3{text-align: center;}

	.banner{padding: 100px 0 0 0;margin-top: -141px;}
	.banner{background: url(img/wij-houden.jpg); width: 100%; float: left; background-position: center; background-size: cover; background-repeat: no-repeat; text-align: center;}
    .banner .title h2{color: #fff; font-size: 52px;font-weight: bold;}
	.banner .title p{color: #fff; font-size: 18px; text-transform: capitalize;}
	.banner .animation-progress-bar{margin: 40px 0;}
	.banner .animation-progress-bar .progress {margin-bottom: 10px;width: 400px;background: #fff;border-radius: 10px;margin: 0 auto;display: inline-block;}
	.banner .animation-progress-bar .progress-bar {background: #00a2e7;border-radius: 10px 0 0 10px;color: #fff;}
	.banner .price-box{margin-bottom: 38px;margin-top: 18px;}
	.banner .price {display: inline-block;width: 20%;}
	.banner .price h4{color: #fff;}
	.banner .price p{color: #fff;}
	.banner .description p{color: rgba(255,255,255,.7); font-size: 18px;}
	.banner .button a {background: #00a2e7;padding: 22px 28px; display: inline-block;margin-bottom: 80px; font-weight:700;
		margin-top: 35px; border-radius: 60px; text-decoration: none; color: #fff; font-size: 16px; text-transform: uppercase;}
	.banner .button a:hover{background: #2ecc71;}


	.bonds{width: 100%; float: left;}
	.bonds .content .image-box{width: 50%; float: left;}
	.bonds .content .image-box img {border-radius: 3px;}
	.bonds .content .text-box{width: 50%; float: right;padding-left: 30px;}
	.bonds .content .text-box h5{ font-size: 20px;font-weight: 600;padding-bottom: 20px;}
	.bonds .content .text-box ul{margin-left: 14px;}
	.bonds .content .text-box ul li{font-size: 16px; font-weight: 700;line-height: 25px;}
	.bonds .content .text-box p{font-size: 16px; line-height: 25px;}

	.bundles{width: 100%; float: left; background:#00a2e7; text-align: center;padding: 0 0 60px 0;}
	.bundles .heading h2::after{background-color: #fff;}
	.bundles .heading h2{color: #fff;}
	.bundles  p{padding: 0 180px; color: #fff; font-size: 16px; margin-bottom: 20px;}

	.driving{width: 100%; float: left;}
	.driving .content .text-box{width: 50%; float: left; padding-right: 30px;}
	.driving .content .image-box{width: 50%; float: right;}
	.driving .content .image-box img {border-radius: 3px;}

	.card-box{width: 100%; float: left; text-align: center;margin-top: 50px;}
	.card-box .card {width: 31%;float: left;margin-right: 24px;}

	.card-box .card .diamond{ background: url(img/diamond.png);height:63px;width:76px;margin: 0 auto;}
	.card-box .card .heart{ background: url(img/heart.png);height: 60px;width:67px;margin: 0 auto}
	.card-box .card .chat{ background: url(img/chat.png);height:51px;width:65px;margin: 0 auto}

	.investing{width: 100%; float: left;text-align: center;background-color: #212529;padding: 120px 0;}
	.investing h4{color: #fff;font-size: 32px;}
	.investing a{color: #333;padding: 22px 28px;background: #fff;display: inline-block;text-decoration: none;
		font-size: 20px;font-weight: 700;border-radius: 30px;margin-top: 30px;}
	.investing a:hover{background: #f1f1f1;}

	.campaign .description{width: 100%; float: left; text-align: center;}
	.campaign .image-box img{border: 1px solid #ccc; padding: 5px;}
	.campaign .description p{font-size: 16px; padding: 0 150px; margin: 30px 0;}
	.campaign .description a{text-decoration: none;font-weight: 700; font-size: 16px; background: #00a2e7; color: #fff; display: inline-block;padding: 22px 28px; border-radius: 30px;}
	.campaign .description a:hover{background: #2ecc71;}
	

	


	/* content */
	#content { padding: 20px 0; min-height: 600px; }
	
	.leftPart { float: left; width: 50%; }
	.leftPart h1 { margin-bottom: 30px; }
	.detailsform label { color: #000; font-size: 16px; display: inline-block; margin-bottom: 5px; }
	.detailsform .sep { margin-bottom: 15px;  }
	.detailsform input  { width: 100%; padding: 15px; border-radius: 4px; border: 1px solid #CCC; font-size: 16px; }
	.detailsform input[type="radio"] { width: auto;  }
	.detailsform .spacer { display: inline-block; margin-right: 10px;   }
	.detailsform .submit input, a.buttonrady { cursor: pointer; width: auto; background: #007bff; color: #fff; padding: 15px 40px; border: 0;  }
	 a.buttonrady { margin-top: 30px; display: inline-block; border-radius: 5px; text-decoration: none; font-size: 16px; }
	.detailsform .submit input:hover, a.buttonrady { opacity: 0.9; }
	.detailsform .block { display: none; }
	.detailsform label.error { display: none !important; }
	.detailsform input.error { border: 1px solid #F00; }
	.detailsform.contact { max-width: 500px; }
	.detailsform.contact textarea { width: 100%; padding: 15px; border-radius: 4px; font-family: arial, sans-serif; border: 1px solid #CCC; font-size: 16px; }
	div.wpcf7-response-output { margin: 20px 0!important; padding: 20px !important; }
	
	
	.rightPart { float: right; width: 50%; padding-left: 40px; }
	.rightPart h3 { margin-bottom: 20px; }
	.rightPart .cols { padding: 20px; background: #f1f1f1; float: left; width: 100%; margin-bottom: 20px; }
	.rightPart .cols .col-3 { float: left;  max-height: 100%; width: 50%; padding: 0; max-width: 100%; position:relative; border-radius: 50px; overflow: hidden; }
	.rightPart .cols .col-3 input { padding: 15px 10px; width: 100%; text-align: center; font-size: 14px; }
	.cols .col-3 a {float: left;width: 30px; margin: 1px;height: calc(100% - 2px);background: url(img/add.png) center center no-repeat #28a745; color: #fff; display: inline-block; position: absolute; right: 0; top: 0; background-size: 14px;}
	.rightPart .cols .col-3 a.bottom { background: url(img/substract.png) center center no-repeat #dc3545; position: absolute; left: 0; right: auto; top: 0; background-size: 14px; }
	.rightPart .cols .col-3 span#price { display: block; padding: 15px 0; font-size: 15px;}
	.rightPart .total { clear: both; display: block; padding: 20px 0; font-size: 15px; }
	.rightPart h2 { font-size: 16px; margin-bottom: 10px; font-weight: bold;  }
	.rightPart  .form-check { margin: 10px 0;  }
	.rightPart label b { font-size: 14px;line-height: 22px; }
	
	.rightPart .info h3 { margin: 30px 0 20px; }
	.rightPart ul#checks { list-style: none; list-style-type: none; margin: 0; padding: 0; }
	.rightPart ul#checks li { font-size: 16px; margin-bottom: 14px; padding-left: 20px; position: relative; }
	.rightPart ul#checks li:before { content: ""; width: 12px; height: 12px; display: block; position: absolute; left: 0; top: 5px; border-radius: 100%; background: #ffbe00; }
	.rightPart ul#checks li.ok:before {/* content:'\2713'; top: 0;*/ background: #090; /*color: #090;*/ }
	
		
	/* footer */
	footer { padding: 50px 0;  overflow: hidden; background: #00a2e7; margin-top: 50px; text-align: center; } 
	
	footer .left { float: left; width: 50% }
	footer .right { float: right; width: 50%}
	footer h3{color: rgba(255,255,255,.7); font-size: 20px; position: relative;margin-bottom: 30px;}
	footer h3::after {content: '';text-decoration: none;background-color: #fff;position: absolute;
		display: block;width: 70px;height: 2px;margin: 16px auto;right: 0;left: 0;}
	footer ul { list-style:  none; list-style-type: none; margin: 0; padding: 0; }
	footer li{padding: 10px 0;}
	
	footer li a {text-decoration: none; color: rgba(255,255,255,.7); font-size: 16px;}
	footer li a:hover { text-decoration: underline; color: #fff; }
	
	 
	 
	 
	 
	
/* Responsive Css Start */				
@media only screen and (max-width: 1120px) {
 .wrapper { padding: 0 15px; }
	 
}

@media only screen and (max-width: 1020px) {
 	 
 
}

@media only screen and (max-width: 767px) {
	.menuBar #menu { display: none;}
	.menuBar a.mobilemenu { display: block; width: 55px; height: 19px; position: absolute; right: 0px; top: 19px; display: block; font-size: 0; background: url(img/menu-icon.png) right center no-repeat; }
	.leftPart { width: 100%; }
	.rightPart { width: 100%; padding-left: 0; }
	 
}

@media only screen and (max-width:600px){
	footer .left {width:100%; margin-bottom:30px;}
	footer .right {width:100%;}
}