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

	.container-fluid{
		width: 92%;
		max-width: 1140px;
	}

	.header .header-container {
		width: 92%;
		max-width: 760px;
	}

}


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



}

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

	.blog-overzicht .blog-box figure {
		height:200px;
	}

}

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

.header h1 {
	font-size: clamp(1.5rem, 5vw, 2rem);
}

.header .header-container {
	width: 92%;
	max-width: 720px;
	padding-top: 36px;
	padding-bottom: 36px;
}

.blog-box figure {
	height:200px;
}

aside.sidebar {
	width:100%;
	float:none;
}

.sidebar-container {
	border:none;
	border-top:1px solid rgba(183, 183, 183, 0.4);
	margin-top:50px;
	padding-top:30px;
}

.tekstvak-met-sidebar, .blog-overzicht {
	padding-top: 0;
}

.lp-popup-hoek {
	width: 90%;
}
  
  .brandstof-naam,.brandstof-prijs{
    width:100%;
  }

  /* == SINGLE BLOG == */

	.single-blog .container-fluid {
		width:80%;
	}

}

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

	/* == SINGLE BLOG == */

	.single-blog .container-fluid {
		width:90%;
	}

}

/** MOBILE SMALL **/

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

.menubalk {
	background: #fff!important;
	box-shadow: 0 4px 2px -2px rgba(0, 0, 0, 0.1);
}

.menubalk .hamburger-menu i {
	color: #264283;
}

.header .overlay {
	background: linear-gradient(180deg, rgba(15, 28, 55, 0.6) 0%, rgba(15, 28, 55, 0.78) 100%);
}

footer .menu-2-kolommen ul{
	columns: 1;
  -webkit-columns: 1;
  -moz-columns: 1;
}

/* BLOG */

	.single-blog h1 {
		font-size: 30px;
	}

	.single-blog h2 {
		font-size: 25px;
	}

	/* == SINGLE BLOG == */

	.single-blog {
		padding-top:50px;
		padding-bottom:30px;
	}

	.single-blog .sidebar-sectie {
		margin-top:50px;
		margin-bottom:0;
	}

	.single-blog .blog-afbeelding img {
		width:100%;
		height:auto;
	}

	.single-blog .blog-datum {
		width:100%;
		float:left;
	}

	.single-blog .leestijd {
		width:100%;
		float:left;
	}

	/* == BLOG == */

	.blog {
		padding-top:80px;
		padding-bottom:0;
	}
	.blog .blog-info {
		margin-bottom:0;
	}

	.blog .blog-info .blog-datum {
		margin-top:10px;
	}

	.blog-box {
		margin-bottom: 20px!important;
	}

/* RESPONSIVE MENU */

.responsive-menu{
	position: fixed;
	left: 0;
	top: -200%;
	background-color: rgba(27, 27, 27, 0.9);
	color: #ffffff;
	width: 100%;
	height: 100%;
	z-index: 99999999;
	transition:all 300ms ease-in-out;
	-moz-transition:all 300ms ease-in-out;
	-webkit-transition:all 300ms ease-in-out;
}

.responsive-menu.open{
	display: block;
	top: 0;
}

.menu-home{
	position: absolute;
	top: 30px;
	font-size: 42px;
	color: #ffffff;
	cursor: pointer;
}

.menu-home a{
	color: #ffffff;
}

.menu-sluiten{
	position: relative;
	top: 30px;
	float:right;
	font-size: 42px;
	color: #ffffff;
	cursor: pointer;
}

.menu-links{
	width: 100%;
	float: left;
	margin-top: 10vh;
}

.menu-links ul {
	padding: 0;
	margin: 0;
}

.menu-links ul li {
	display: block;
	list-style-type: none;
}

.menu-links ul li a {
	font-size: 25px;
	color: #ffffff;
	font-weight: 700;
	margin-bottom: 15px;
	padding-bottom:10px;
	border-bottom:1px solid rgba(255, 255, 255, 0.2);
	display: block;
	/*text-transform: uppercase;*/
}

.menu-links .tsp-place-search-mobile {
	display: flex;
	width: 100%;
	max-width: none;
	margin: 0 0 24px;
}

.menu-links .tsp-place-search-mobile input[type="search"] {
	height: 48px;
	font-size: 16px;
}

.menu-links .tsp-place-search-mobile .tsp-place-search-btn {
	height: 48px;
}

.responsive-menu-label {
	margin: 18px 0 8px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.65);
}

.responsive-menu-label:first-of-type {
	margin-top: 0;
}

.menu-links .menu-secondary-mobile li a {
	font-size: 20px;
	font-weight: 600;
}

.responsive-menu-email {
	margin-top: 24px;
}

.responsive-menu-email a {
	color: #fff;
	font-size: 16px;
	text-decoration: none;
}

.responsive-menu-email i {
	margin-right: 8px;
	color: #99bb30;
}

.menu-links ul li a .menu-rondje {
	display: block;
	float: left;
	width: 30px;
	height: 30px;
	text-align: center;
	line-height: 26px;
	border: 2px solid #d4d4d4;
	border-radius: 100%;
	-moz-border-radius: 100%;
	-webkit-border-radius: 100%;
	font-size: 18px;
	margin-right: 15px;
	margin-top: 10px;
}

/* TOPBALK */

.topbalk-secondary,
.topbalk .menu-header-container,
.topbalk .logo-row {
	display: none;
}

.topbalk {
	height: 75px;
	padding-top: 0;
}

.placeholder {
	height: 75px;
}

.topbalk .responsive-menubalk {
	display: inline-block;
	clear:both;
	overflow: hidden;
	width:100%;
	height:100%;
}

.topbalk .responsive-menubalk .logo {
	width:80%;
	float:left;
	padding:0;
	line-height:50px;
}

.topbalk .responsive-menubalk .logo a {
	color:#fff;
	font-size:20px;
}

.topbalk .responsive-menubalk .hamburger-menu {
	width:20%;
	float:right;
	color:#fff;
	font-size:30px;
	line-height:50px;

}	

/* HEADER */

.header {
	height: auto;
	padding-bottom: 0 !important;
}

.header-container {
	position: relative!important;
	margin:0 auto;
	transform: none!important;
	left:auto!important;
	top:auto!important;
	z-index:99!important;
}

/* BLOG */

.blog-box {
	margin-bottom:50px;
}

/* FOOTER */

footer {
	padding-bottom:0;
}

.footer-box {
	margin-bottom:50px;
}

/* TEKSTVAK MET AFBEELDING */

.tekstvak-met-afbeelding {
	padding-top: 50px;
	padding-bottom: 50px;
}

/* BLOG */

.blog .button-container {
	margin-top: 30px;
}

/* AD BANNER */

.advertentie-banner {
	margin-top: 30px;
}

/* DIENSTEN BOX */

.diensten-blokken {
	padding-bottom: 50px;
}

.diensten-box {
	margin-bottom: 50px;
}

.diensten-icoon {
	margin-bottom: 20px;
}

/*.diensten-blokken .row div:last-child {
	margin-bottom:0;
}*/


/* TEKSTVAK MET AFBEELDING */

.tekstvak-met-afbeelding figure {
	margin-top:30px;
}
	
.topbalk .logo {
	height:auto;
}
  
  .tankstation-box{
    width:49%;
    margin-bottom:15px;
  }

/* == CALCULATOR == */

.header h1 {
	font-size: clamp(1.45rem, 5vw, 1.9rem);
}

.header {
	padding-bottom: 0 !important;
}

.header .header-container {
	padding-top: 36px;
	padding-bottom: 36px;
}

.calculator-kolom {
	margin-bottom: 20px;
}

/* TANKSTATION OVERZICHT */

.sorteer-producten {
	width: 100%;
	margin-top: 20px;
}

#zoekje {
	width: 100%;
	padding: 10px;
}

.tankstation-overzicht .tankstation-rij, .tankstation-rij h3 {
	font-size: 13px!important;
}

/* == KENNISBANK == */

.kennisbank-categorie .container-fluid {
	width:90%;
}

.kennisbank-categorie-container {
	width:100%;
}

}

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

}