*, *:after, *:before {-webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box;}

/* RESET */
body{padding:0; margin:0; font-family:'Gotham-Medium'; background-color:white; color:#000; font-size:18px; line-height:28px;}

.bg{-webkit-background-size:cover; -moz-background-size:cover; -o-background-size:cover; background-size:cover; background-repeat:no-repeat; background-position:50% 50%;}
.bg-boog{background-position: center bottom; background-repeat: no-repeat;}

.clear{clear:both; height:0; overflow:hidden;}
hr {display:block; height:1px; border:0; border-top:1px solid #ccc; margin:1em 0; padding: 0;}
img{height:auto; max-width:100%; vertical-align:middle;}
a img{border:0;}
a{text-decoration:none;}
ul li{list-style-type:none;}
p{margin-top:0; padding-top:0; margin-bottom:0px;}
h1, h2, h3, h4{margin:0; padding:0; font-weight:normal;}

.bold{font-weight:bold; font-family:'Gotham-Book';}    



.txt ul li{position: relative;padding-left: 20px;padding-bottom: 10px;}
.txt li:before, .text li:before {position: absolute;top: 0;left: 0;font-family:'FontAwesome';content: '\f111';color: black; font-size: 7px;}

.vertical-align{position:relative; top:50%; transform: translateY(-50%);}

.grid:after{content:""; display:table; clear:both;}


.wrapper{margin:0 auto;}

/*header*/
.header{height:327px; background-color:#00377b;  background-image: url("/assets/img/witte-boog.png");}
.logo{margin-left:126px; max-width:369px; margin-top:-17px;}

/*blokken*/
.section-content{padding-bottom:300px;}
.center {max-width: 1200px;margin: 0 auto;position: relative;}
.section-containter{max-width:873px;}
.section-img{margin-top:-200px;  border-radius: 25px;}
.section-content{margin-left:200px;}
.section-content h2{font-size:36px; padding-top:0px; margin-top:0px;}
.section-content .about h2{font-size:36px; padding-top:0px; margin-top:0px;}

.vervolg-section p{line-height:28px; font-family: 'Gotham-Book'; font-size:18px;}
.left{float:left;}
.right{float:right;}

/*Home*/
.section-container .home{background-color:#00377b; color:white;}
.home .section-content{max-width:700px; line-height:28px;}
.home .section-content h1{margin-top: -136px; padding-bottom: 157px; font-size:48px; line-height:52px;}
.langkop{margin-top:-190px!important;}
.home p{font-size:18px;}
.section-content h2{margin-bottom:42px;}
.home .section-img{margin-top:-215px;}



/*About & Lubricants*/
.aboutsectie{background-color:white; background-image: url("/assets/img/witte-boog-blauw.png");}	
.about .section-content, .lubricants .section-content{max-width:800px; margin-top:80px; padding-bottom:130px; }
.left-content{float:left; padding-right:10px; width:50%;}
.right-content{float:right; padding-left:10px; width:50%;}
.right-content span{color:#00377b;}
.about .section-content h2, .fuels .section-content h2, .lubricants .section-content h2{font-size:32px; color:#00377b;}

.helplink{margin-top:62px; display:block; color:#00377b; font-size:24px;}
.about .anchor{position:absolute; margin-top:-200px;}



/*Fuels*/
.section-container .fuels{background-color:#d8daea;}
.fuels .section-content{max-width:610px; padding-top:60px; padding-bottom:300px;}
.fuels .section-content ul{padding:0px;} 
.fuels .section-content ul{color:#00377b; font-size:24px;}
.fuels .section-content ul li{padding-top:10px; padding-bottom:10px;}
.fuels .section-content ul li.first{padding-top:0px;}
.fuels .section-content ul li:before{margin-right:10px;	content: "•"; color: white; font-family:arial; display: inline-block;}
.fuels .rond-banner-fuels{margin-top:-180px;}
.rond-banner-fuels{padding-bottom:0px;}



.fuels .anchor{ position:absolute; margin-top:-200px;}

/*Lubricants*/
.q8{float:left; width:100%; margin-top:35px;}
.castrol{width:100%; margin-left:100px; display:inline-block;}
.q8 img, .castrol img{max-width:150px;}


/*contact*/
.section-container .contact{background-color:#00377b; color:white;}
.contact .section-content{padding-top:60px; padding-bottom: 20px;}
.contactinfo{font-family:'Gotham-Book'; font-size:18px; line-height:28px;}
.section-container .contact{padding-bottom:80px;}
.contactimg{float:left; margin-left:85px; margin-top:125px; max-width:75px;}
.contact .section-content{max-width:800px;}
.contact .maps{width:390px; overflow:hidden;}
.maps iframe {border: 0; padding: 0px; border-radius: 25px; overflow: hidden;}
.contact a{color:white; text-decoration:none;}



/* footer */
.footer .section-content{max-width:800px; color:#00377b; padding-bottom:0px;}
.footer .logos{float:right;}
.footer .logos img{max-width:142px;}
.footer .left{padding-top:35px;}
.footer a{color:#00377b; text-decoration:none; font-size:85%; display:inline-block;}


/* navigatie */
.fixed-bar{position:fixed; background-color:white; width:100%; font-size:17px; height:112px; z-index:999; font-family: 'Gotham-Book';}
.bars {display:inline-block; cursor:pointer; margin-top:0; margin-right:0; width:inherit; height:inherit;}
.bar1, .bar2, .bar3{width:25px; height:3px; background:#00377b; margin:5px 0; transition:0.4s;}
.change .bar1 {-webkit-transform: rotate(-45deg) translate(-4px, 3px); transform: rotate(-45deg) translate(-6px, 6px);}
.change .bar2 {filter:alpha(opacity=0); opacity:0; zoom:1;}
.change .bar3 {-webkit-transform: rotate(45deg) translate(-8px, -8px); transform: rotate(45deg) translate(-5px, -6px);}

.nav-link{display:none;}

.nav{text-align:right; padding-left:100px; display:inline-block;}
.nav ul{position:relative; z-index:101; padding:0; list-style:none; margin:0; transition:0.6s;}

.nav ul li{display:inline-block; line-height:60px;}
.nav ul li a{display:block; color:#000; text-decoration:none; padding:0 0px;}
.nav ul li.first a{padding-left:0;}
.nav ul li a:hover{text-decoration:none; color:#00377b;} 
.nav ul li.active a{text-decoration:none; color:#00377b;}
.nav ul li a:visited {text-decoration:none; color:#000;}

.nav ul li.first.active:before,
.nav ul li:hover > a,
.nav ul li.active > a{color:#00377b;}
.nav ul li.last > a:after{content:'';}

.home .rond-content{border-radius: 100%; border: 10px solid #00377b; overflow: hidden;}
.vervolg-section .rond-content{border-radius: 100%; border: 10px solid white; overflow: hidden;}


.vlaggen{position:absolute; top:5px; right:0px;}
.vlag{width:18px;}
.vlaggenmob{display:none;}

/*ronde afbeeldingen*/
@media screen and (min-width: 1201px) {	
	.rond-content{position:absolute; right:125px; top:69px; max-width:235px;}
	.home .rond-content{position:absolute; right:125px; top:155px;}
	.fuels .rond-content-groot{top:170px;}


}

@media screen and (min-width: 1200px) {	
	.smaller {height:90px!important;}
	.smaller .center{margin-top:-12px;}
	.smaller .logo{/*max-width:320px;*/ margin-top:-15px;}
	.smaller nav{/*padding-left:150px;*/}

}




@media screen and (max-width: 1200px) {	
	.vlaggen{position:absolute; top:5px; right:10px;}


	.fuels .section-content{max-width:60%!important;}
	.nav{padding-left:50px;}

	.fixed-bar{height:90px;}
	.header{height:305px;}
	.logo{max-width:320px; margin-top:-19px;}

	.section-content {margin-left: 100px; margin-right:100px; max-width:100%!important;}
	.home .rond-content, .about .rond-content, .lubricants .rond-content, .fuels .rond-content-klein{float: right; margin-right: 50px; margin-top: -80px; position:relative; width:200px;}
	.home .section-content h1{font-size:38px;}
	.rond-content-groot{position: absolute; top: 150px;right: 50px; max-width: 200px;}

	.contactimg{margin-left: 15px; margin-top: 100px;}
	.contactimg{max-width:75px;}
	.contact .maps{width:50%;}
	.section-img{ border-radius: 0px;}

	.home .rond-content{border-radius: 100%; border: 8px solid #00377b; overflow: hidden;}
	.vervolg-section .rond-content{border-radius: 100%; border: 8px solid white; overflow: hidden;}


}

@media screen and (min-width:1100px) and (max-width:1200px){
	.fixed-bar .nav ul{ position: absolute; top: 20px;}
}


@media screen and (min-width: 1100px) {	
	.nav li a:after{padding-left:6px; content:'•'; }
	.nav li .last a:after{border-right:0;}
	h1{font-size:36px;}


}


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

	.vlaggen{display:none;}
	.vlaggenmob{display:block; padding-right:18px; padding-bottom:18px;}
	.vlag{width:28px;}


	.nav-link{display:block; color:#999!important; position:fixed; right:10px; text-decoration:none; padding:2px 4px; width:34px; height:34px; z-index:200; top:0; background:#fff;}	
	/*.nav-link:before{content:'menu'; position:absolute; left:-45px; width:45px; top:-2px;}*/
	.nav{min-width:inherit; position:relative; top:0; left:0; padding:0; margin-top:-30px;}
	.nav{overflow:hidden; max-height:0; width:100%; background-color:#fff; float:right; text-align:right;}
	.nav.active{max-height:800px;}
	.nav ul li{display:block;}

	.nav ul li.first{padding-top:5px;}
	.nav ul li.last{padding-bottom:5px;}

	.nav ul li{padding:0; border:none; margin:0; color:#000!important;}
	.nav ul li a{display:block; position:relative; color:#000; height:40px; line-height:40px; padding:0 0; padding-right:18px; padding-left:18px;}
	.nav ul li.active a{color:#00377b;}

	.bars{margin-top:28px;}
	.about .section-content, .lubricants .section-content, {padding-bottom:50px;}		

	.footer .logos, .tradefuel{float:none;}
	.tradefuel{position: absolute; width: 500px!important; top: 110px; padding-bottom: 50px!important;}
	.contact .maps{width:50%; margin-top:30px;}
	.footer .left{padding-top:35px;}
}

@media screen and (max-width: 900px) {	
	.fuels .section-content{max-width:55%!important;}
}

@media screen and (max-width: 800px) {	
	.home .rond-content, .about .rond-content, .lubricants .rond-content, .fuels .rond-content-klein{float: right; margin-right: 50px; margin-top: -80px; position:relative; width:150px;}
	.rond-content-groot{max-width:150px; top:100px;}
}




@media screen and (max-width: 780px) {	
	body{line-height:22px; font-size:15px;}

	.nav{padding-left:50px; margin-top:-20px;}
	.section-content {margin-left: 100px; margin-right:100px; max-width:100%!important; padding-bottom:275px;}
	.about .section-content, .lubricants .section-content{padding-bottom:75px;}
	.section-content h2 {margin-bottom:20px;}
	.section-content h2, .about .section-content h2, .fuels .section-content h2{font-size:23px;}

	.home .section-img{display:block; margin-top: -160px; height: 400px; object-fit: cover;}

	.home .rond-content, .about .rond-content, .lubricants .rond-content, .fuels .rond-content-klein{float: right; margin-right: 50px; margin-top: -80px; position:relative; width:150px;}
	.home .section-content h1{padding-bottom: 60px; margin-top: -80px; font-size:30px;}
	.langkop{  margin-top: -90px!important;width: 75%;line-height: 31px!important;}
	.home p {font-size: 15px;}
	.home .section-img{margin-top:-145px;}

	.logo{margin-left:0px;}
	.vervolg-section p{font-size:15px;}
	.helplink{font-size:21px;}
	.fuels .section-content ul{font-size:21px;}
	.fuels .section-content{max-width:55%!important;}


	.contact .right{width:50%; float:right;}
	.contact .left{width:50%; float:left;}
	.q8, .castrol{width:75%;}
	.q8 img, .castrol img{max-width:125px;}

	.contactimg{float: left; margin-left: 25px; margin-top: 90px; width: 100px;}

	.fuels .section-content{padding-bottom:250px;}
	.contactinfo{font-size:15px;}

	.section-container .contact{padding-bottom:30px;}

	.q8, .castrol{width:100%; text-align:center;}
	.castrol img{padding-top:15px;}
	.castrol {margin-left:0px; margin-top:10px;}

	/*nav / header*/
	.logo{width:250px; margin-left:0px; margin-top:-11px;}
	.bars{margin-top:21px;}
	.header{height:220px;}
	.fixed-bar{height:75px;}

	.bg-boog{background-image:none;}

	/*contact*/
	.contactimg{float:right; margin-top:50px; margin-right:50px; margin-left:0px; max-width:100px;}
	.contact .maps{width:100%; margin-top:30px;}	

	.tradefuel{position: absolute; width: 310px!important; top: 110px; padding-bottom: 50px!important;}
}

@media screen and (max-width: 740px) {	
	.home .rond-content, .about .rond-content, .lubricants .rond-content, .fuels .rond-content-klein{width: 100px;margin-right: 25px;margin-top: -50px;}
	.rond-content-groot{width:100px; right:25px; top:75px;}
	.section-content {margin-left: 50px;margin-right: 50px;}

	.home .rond-content{border-radius: 100%; border: 5px solid #00377b; overflow: hidden;}
	.vervolg-section .rond-content{border-radius: 100%; border: 5px solid white; overflow: hidden;}

	.fuels .section-content{max-width:65%!important;}

	/*contact*/
	.contactimg{float:right; margin-top:50px; margin-right:35px; margin-left:0px; width:100px;}



}

@media screen and (max-width: 620px) {	
	.about .section-img, .lubricants .section-img{margin-top:-130px;}
	.home .section-content{padding-bottom:175px;}
	.fuels .section-content{padding-bottom:160px;}
}

@media screen and (max-width: 580px) {	
	.home .section-content h1{font-size: 33px; margin-top: -115px; max-width: 250px; line-height: 34px; padding-bottom: 85px;}
	.langkop{margin-top:-130px!important;}
	.left, .right, .right-content, .left-content{width:100%; float:none; padding:0px;}

	.lubricants .left-content{float: left; width: 60%;  padding-right: 15px;}
	.lubricants .right-content{float: right; width: 40%; }

	/*nav / header*/
	.logo{width:200px; margin-left:0px;}
	.bars{margin-top:11px;}
	.header{height:215px;}
	.fixed-bar{height:55px;}
	.nav{margin-top:-20px;}	
	.fuels .section-content{max-width:60%!important;}
	.home .section-img {margin-top: -160px;}
}

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

	.section-content, .home .section-content {margin-left: 25px; margin-right: 25px; padding-bottom:85px;}
	.section-content h2{font-size:21px!important; margin-bottom:20px;}

	.header{background-image:none;}
	.section-img{display:block; margin-top: -160px;  height: 200px; object-fit: cover;}
	.home .section-img{height: 350px;}
	.vervolg-section p{font-size:14px;}

	.helplink{font-size:17px; line-height:21px; padding-bottom:20px;}


	/*Home*/
	.home .section-content h1{font-size: 33px; margin-top: -115px; max-width: 250px; line-height: 34px; padding-bottom: 85px;}
	.langkop{margin-top:-130px!important;}
	.home .rond-content, .about .rond-content, .lubricants .rond-content, .rond-banner-fuels, .fuels .rond-content-klein{margin-right:25px; width: 100px; margin-top: -50px;}
	.home p {font-size: 14px;}
	.home .section-img{margin-top:-160px;}


	/*About*/
	.about .section-img{margin-top:-60px;}
	.left, .right, .right-content, .left-content{width:100%; float:none; padding:0px;}
	.about .section-content, .lubricants .section-content{padding-bottom:50px; margin-top:40px;}
	.helplink{margin-top:34px;}

	/*Fuels*/
	.fuels .section-content{padding-top:50px; padding-bottom:0px; max-width:100%!important;}
	.fuels{padding-bottom:75px;}
	.fuels .section-content ul{font-size:14px;}
	.fuels .rond-content-groot{padding-top: 0px;color: black; text-align: center; padding-bottom: 0px; right:25px; top:65px;}
	.fuels .rond-banner-fuels{margin-top:-50px;}
	.fuels-boven{max-width:65%; display:block;}


	/*Lubricants*/
	.lubricants .center .section-img{margin-top:-65px!important;}

	/*contact*/
	.contact .bold{font-size:15px;}
	.contact .left{float:none; width:75%;}
	.contactimg{margin-right:10px;}
	.contact .section-content h2{margin-bottom:30px;}


	.footer .left{padding-top:35px; font-size:15px;}		
	.footer .logos, .tradefuel{text-align:center;}
	.contact .maps iframe{max-height: 250px;}

	.contact .section-content {padding-top: 30px;padding-bottom: 5px;}
	.contactimg{max-width:100px; width:100px; margin-right:25px;}

	/* Anchor */
	.about .anchor{position:absolute; margin-top:-55px;}
	.fuels .anchor{position:absolute; margin-top:-110px;}
	.lubricants .anchor{position:absolute; margin-top:-50px;}
	.contact .anchor{position:absolute; margin-top:-55px;}

	.q8 img, .castrol img{max-width:100px;}
	.q8{margin-top:10px;}
}

@media screen and (max-width: 360px) {	
	.footer .logos img {max-width: 130px;}
	.tradefuel {font-size:14px!important; width: 290px!important;}
}

@media screen and (max-width: 355px) {	
	.logos img{max-width:125px;}
}

@media screen and (max-width: 350px) {	
	.home .rond-content, .about .rond-content, .lubricants .rond-content, .fuels .rond-content-klein{width:70px; margin-top: -30px;}
	.rond-content-groot {width: 70px; top: 40px;}
	.fuels .rond-content-groot{top:65px;}
}