/* / mobitank Style Sheet / */
/* //////// v1.023 //////// */

/* ROOT */
:root {
	--color-bg: #EEE;
	--color-banner-bg: #DDD;
	--color-blue: #1d2748;
	--color-blue-light: #e6f2fc;
	--color-blue-highlight: #2f4079;
	--color-green: #3d9b48;
	--color-green-active: #39bc49;
	--color-green-highlight: #3cae35;
	--color-grey-mid: #DDD;
	--color-grey-dark: #999;
	--color-white: #ffffff;
	--color-white-transparent: rgba(255,255,255,0.2);
	--page-width: 1200px;
}

.main{
	max-width: 100%;
	overflow: hidden;
}
/* GENERAL */
body{
	margin: 0;
	padding: 0;
	min-width: 350px;
	background-color: var(--color-white);
	font-size: 1.6rem;
    line-height: 1.6;
    font-weight: 400;
	font-family: 'Mark', sans-serif;
	-webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
    overflow-y: scroll;
}
body, html{
	width: 100%;
	max-width: 1920px;
	margin-left: auto;
	margin-right: auto;
}
html{
	box-sizing: border-box;
    font-size: 62.5%;
    height: 100%;
	background-color: var(--color-bg);	
}
section, .section {
    position: relative;
    max-width: 100%;
}

*, *:before, *:after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
h1, h2, h3, h4, h5, ul, p {
    margin: 2rem 0;
}
h1, h2, h3{
	line-height: 1.1;	
	/*letter-spacing: 0.03rem;*/
}
h1{
	font-family: 'Bruumfy', sans-serif;	
	font-size: 3.2rem;
	margin-top: 1rem;
}
h2{
	font-family: 'Bruumfy', sans-serif;
	font-size: 2.6rem;
}
h2.large{
	font-size: 3rem;
}
h3{
	font-family: 'Bruumfy', sans-serif;	
	margin-bottom: 0.5rem;
}
h1 + h3{
	margin-top: 4rem;
}
h3 + p{
	margin-top: 0.5rem;
}
a.button{
	display: inline-block;
	line-height: 1;
	padding: 1.3rem;
    border-radius: 5px;
	font-size: 90%;
	text-decoration: none !important;
}
/* misc general */
ul.menu{
	list-style: none;
	margin-left: 0;
	margin-right: 0;
}
li.menu-item{
	list-style: none;
	padding-top: 0;
}
img{
	max-width: 100%;
	display: inline-block;
	height: auto;	
}
a{
	outline: none;
	color: inherit;
	text-decoration: none;
}
.main-sections .text-formatted a{
	text-decoration: underline;	
}

/* ROWS & CONTAINERS */
.row{
	width: 100%;
	max-width: var(--page-width);
	display: flex;
	flex-wrap: wrap;
	margin-left: auto;
	margin-right: auto;
}
.column{
	flex-basis: 100%;
	max-width: 100%;	
}
.main-sections .column > *{
	width: 100%;
}

/* MARGINS & PADDINGS */
.row {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}
.column {
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}
.layout-content{
	position: relative;	
}


/* HEADER */
.main-header{
	position: sticky;
	top: -34px;
	z-index: 200;
	font-size: 1.5rem;
	background-color: var(--color-white);
	-webkit-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.25);
    -moz-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.25);
    box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.25);	
}
.main-header .column{
	margin-top: 0;
	margin-bottom: 0;
	position: relative;
}
.main-header .row{
	padding-left: 0;
	padding-right: 0;
}
.header-row-top{
	
}
	.header-row-top .column{
		display: flex;
    	justify-content: flex-end;
	}
	.header-row-top .field{
		padding: 0;
		margin: 0 -1.5rem;
		font-size: 1.2rem;
	}
	.header-row-top i{
		position: relative;
		top: 1px;
		font-size: 14px;
		margin-right: 2px;
		color: var(--color-green);
		line-height: 1;
	}
	.header-row-top .field ul{
		display: inline-block;
		margin: 0;
		padding: 0;
		list-style: none;
	}
	.header-row-top .field ul li,
	.header-row-top .field p{
		margin: 0 12px;
		padding: 12px 0;
		display: inline-block;
	}
	.header-row-top .field ul li:last-child{
		display: none;	
	}


.header-row-bot{
	
}
	.header-keeper{
		position: relative;
	}
	.header-keeper::before{
		content: '';
		position: absolute;
		top: 0;
		bottom: 0;
		width: 33%;
		right: 0;
		background-color: var(--color-blue);
	}
	.column.header-column-logo{
		flex-basis: 230px;
		max-width: 230px;
		background-color: var(--color-white);
	}
		.header-column-logo .logo--link{
			position: relative;
    		bottom: 6px;
    		display: block;
		}
		.header-column-logo img{
			display: block;
		}
	/* NAGIVATION */	
	.header-column-nav{
		flex: 1;
		display: flex;
		justify-content: flex-end;
		background-color: var(--color-blue);
		color: var(--color-grey-mid);
		line-height: 1.1;
	}
		.header-column-nav .menu-rounding{
			width: 100%;
			position: absolute;
			top: -1px;
			left: -1px;
			bottom: 0;
			overflow: hidden;
			background-image: url(/themes/mobitank/images/mask-menu.svg);
			background-repeat: no-repeat;
			background-size: contain;
			background-position: -1px 0;
		}
		
	.menu-toggle{
		display: flex;
		align-content: center;
		flex-wrap: wrap;
		text-transform: uppercase;
		position: relative;
		z-index: 250;
	}
		.menu-toggle--title{
			align-self: center;
    		margin-right: 0.7rem;
			display: none;
		}
		.menu-toggle--bars{
			display: flex;
			width: 40px;
			height: 40px;
			position: relative;
		}
	
		

nav .menu-item a.is-active{
	color: var(--color-green-active);	
}

/* FOOTER */
footer{
	position:relative;
	padding-top: 10rem;
	padding-bottom: 1rem;
	color: var(--color-grey-mid);
	font-size: 1.5rem;
	background-color: var(--color-blue);
	/* border-top: 0.5px solid var(--color-grey-dark); */
}
footer h2{
	color: var(--color-white);
	font-size: 1.8rem;	
	margin-bottom: 2.2rem;
}

footer nav ul.menu{
	margin-top: -0.22rem;	
}
footer nav ul.menu .menu-item a{
	padding: 0.22rem 0 0.22rem 1.4rem;
    display: inline-block;
	position: relative;
}
footer nav ul.menu .menu-item a::before{
	content: '\f054';
    position: absolute;
    left: 0;
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    font-size: 1rem;
    top: 50%;
    transform: translateY(-50%);
    margin-top: 1px;
}

.footer-content .column:first-child h2{
	position: relative;
}
	.footer-content .column:first-child h2::before{
		content: '';
		width: 100%;
		height: 100px;
		position: absolute;
		left: -1rem;
    	bottom: 0.6rem;
		background-image: url(../images/logo-mobitank-white-vertical.svg);
		background-repeat: no-repeat;
		background-size: contain;
	}
	.footer-content .column-contact .field  ul{
		list-style: none;
		padding: 0;
		display: flex;
	}
	.footer-content .column-contact .field ul li{
		margin-right: 5px;	
	}

.footer-endline .column{
	margin-top: 0;	
}
.footer-endline .field{
	font-size: 1.3rem;	
}

/* LAYOUT */
.main-sections section .row{
	padding-top: 4rem;	
	padding-bottom: 4rem;
}
.main-sections .column .field ul{
	list-style: circle;
	padding: 0 0 0 1.7rem;
}
.main-sections .column .field ul li{
	break-inside: avoid-column;
	padding: 0.4rem 0;
}
.main-sections .column .field ul li strong{
	font-family: 'Bruumfy', sans-serif;
	font-weight: normal;
}
.main-sections .column .field ul.double li{
	padding-top: 1rem;
	padding-bottom: 1rem;
}
.main-sections .column .field ul.nobull{
	list-style: none;
	padding-left: 0;
}
.main-sections .column .field ul.small{
	line-height: 1.1;
}

/* VIEWS */
/* pakketten */
.pakketten-list-container{
}
ul.pakketten-list{
	display: flex;
	flex-wrap: wrap;
	column-gap: 3rem;
	list-style: none;
	padding: 0;
}
	li.pakket{
		display: flex;
		flex-basis: 100%;
		margin: 1.5rem 0;
	}
.pakket .panel{
	display: flex;
	flex: 1;
	flex-wrap: wrap;
	background-color: var(--color-white);
	position: relative;
}
	.pakket .panel::after{
		content: '\f061';
		position: absolute;
		right: 2rem;
		bottom: 1rem;
		font-family: 'Font Awesome 6 Free';
		font-weight: 900;
		font-size: 20px;
	}
	.pakket .panel--content{
		width: 100%;
		line-height: 1.4;
		text-align: center;
	}
	/* medium */
	.pakketten-list.pakketten-medium{
		margin: 3rem 0 2rem 0;	
	}
	.pakketten-list.pakketten-medium .pakket .panel--content{
		padding: 3.8rem 3rem 4.2rem 3rem;
	}
	/* short */
	.pakketten-list.pakketten-short{
		margin: 0;	
	}
	.pakketten-list.pakketten-short .panel{
		align-content: center;
	}
	.pakketten-list.pakketten-short .pakket .panel--content{
		padding: 1.9rem 4rem 0.1rem 4rem;
	}
	.pakketten-list.pakketten-short .panel::after{
		content: '';
	}
	
	.pakket .panel--desc{
		font-size: 95%;
    	opacity: 0.9;
	}
	.pakket .panel--desc ul{
		list-style: none;
		padding: 0;
		margin-bottom: 0;
	}
	.pakket .panel--desc ul li{
		/*border-width: 0 0 1px 0;
		border-style: solid;
		border-color: #e5eff8;*/
		padding: 2px 0;
		line-height: 1.2;
	}
	.pakket .panel--desc ul li:last-child{
		border-width: 0;
	}
	.pakket .panel--title h2{
		margin-top: 0;
		color: var(--color-blue);
		font-size: 2.2rem;
	}

li.pakket .panel:hover{
	background-color: var(--color-green);
	color: var(--color-white);
	-webkit-box-shadow: 0px 0px 8px 1px rgba(0,0,0,0.5); 
    -moz-box-shadow: 0px 0px 8px 1px rgba(0,0,0,0.5);
    box-shadow: 0px 0px 8px 1px rgba(0,0,0,0.5);
	transform: scale(1.015);
}
.pakket .panel:hover .panel--desc ul li{
	/*border-color: rgba(255,255,255,0.3); */
}
li.pakket .panel:hover h2{
	color: var(--color-white);
}
li.pakket .panel:hover .panel--desc{
	opacity: 1;	
}
.pakketten-footer{
	text-align: center;	
}

/* details (pakketten) */
.detail-list-container{
}
ul.detail-list{
	list-style: none;
	padding: 0;
	margin: 0;
}
ul.detail-list .detail{
	margin: 3rem 0;
}
.detail-content{
	display: flex;
	flex-wrap: wrap;
	column-gap: 3rem;	
}
.detail-content-title{
	flex-basis: 100%;
	max-width: 100%;
    padding: 3.8rem 4rem 4.2rem 4rem;
    text-align: center;
    display: flex;
    flex-wrap: wrap;
	align-content: center;
    justify-content: center;
}
.detail-content-desc{
	flex-basis: 100%;
	max-width: 100%;	
}
.detail-content-desc .detail-content-text{
	line-height: 1.3;
	margin-top: 2.5rem;
}
.detail-content-desc .detail-content-text ul{
	list-style: disc;
    padding: 0 0 0 16px;
}
.detail-content-actions{
	position: relative;
	padding: 2rem 0;
}

.detail-content-actions::before{
	content: '';
	width: 50%;
	height: 1px;
	position: absolute;
	top: 0;
	left: 0;
	background-color: var(--color-green);
}

/* contact */
.view-contact-blokken .view-content{
	display: flex;
	flex-wrap: wrap;
	column-gap: 5rem;
	margin: 1rem 0 1rem 0;
}
.contact-panel{
	flex-basis: 100%;
	max-width: 100%;
    border: 1px solid #DDD;
    border-top: 4px solid var(--color-green);
    line-height: 1.1;
    display: flex;
    flex-direction: column;
    padding: 2.5rem 2rem;
	margin: 2rem 0;
	box-shadow: 1px 1px 5px 0px rgba(0,0,0,0.15);
}
.contact-panel i{
	font-size: 3.5rem;
	color: var(--color-blue);
}
.contact-panel strong{
	color: var(--color-green);
	font-size: 1.7rem;
}

.contact-panel .button{
	background-color: var(--color-blue);
}
.contact-panel > * {
    flex: 1;
    margin: 1rem 0;
}

/* referenties */
.view-id-referenties{
	padding: 0 2rem;	
}
.referentie-list-container{
	
}
ul.referentie-list{
	display: flex;
    /* flex-wrap: wrap;column-gap: 2rem; */
    list-style: none;
    padding: 0;
    margin: 4rem -1rem 2rem -1rem;
    
}
li.referentie{
	padding: 1rem;	
}
li.referentie:not(.splide__slide){
	display: none;
	flex: 1;
}
li.referentie:nth-child(1),
li.referentie:nth-child(2){
	display: flex;
}

.referentie .panel{
	aspect-ratio: 2;
    display: flex;
	flex: 1;
    background-color: var(--color-white);
    text-align: center;
	padding: 12px;
    border: 1px solid var(--color-grey-mid);
	cursor: default;
}
.referentie .panel .panel--content img{
	width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}
.referentie .panel:hover{
	border-color: var(--color-green-active);
}
.referentie .panel:hover img{
	transform: scale(1.02);
}

/* usps */
ul.usp-list{
	display: flex;
	flex-wrap: wrap;
	list-style: none;
	padding: 0;
	margin: 4rem -3rem 0 -3rem;
}
li.usp{
	flex-basis: 100%;
	max-width: 100%;
	padding: 2rem 3rem;
}
.usp .usp-content{
	text-align: center;
	line-height: 1.45;
}
.usp-content h3{
	font-size: 1.6rem;	
}
.usp-content-logo{
	width: 82px;
	height: 82px;
	margin: 0 auto;
}
	.usp-content-logo img{
		width: 100%;
    	height: 100%;
    	object-fit: contain;
	}

/* BANNER */
.banner-list-container{
	position: relative;
	background-color: var(--color-banner-bg);
}
.banner-list{
	list-style: none;
	padding: 0;
	margin: 0;
}
.banner-list .banner:not(.splide__slide){
	display: none;
}
.banner-list .banner:first-child{
	display: block;
}
.banner-content{
	position: relative;
	padding-top: 85vw;
}
.main-banner.main-banner-type--2{
	margin-bottom: -7rem;
}
.main-banner.main-banner-type--3{
	margin-bottom: -4%;
}
.main-banner.main-banner-type--3::after{
	content: '';
    width: 100%;
    padding-top: 8%;
    position: absolute;
    left: 0;
    bottom: -1px;
    background-image: url(/themes/mobitank/images/mask-banner.svg);
    background-repeat: no-repeat;
    background-position: bottom left;
    background-size: 100%;
}
.banner-image,
.banner-overlay{
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
}
.banner-image .media,
.banner-image .media .field,
.banner-image .media .field img{
	width: 100%;
	height: 100%;
}
.banner-image .media .field img{
	display: block;
	object-fit: cover;
}
.banner-overlay{
	color: var(--color-white);
	display: flex;
    flex-wrap: wrap;
    align-items: center;
	line-height: 1.1;	
	padding: 0 3rem 3rem 3rem;
}
.banner-overlay h3{
	font-size: 2.8rem;
}

/* 1 = main */
.layout--1 .column-2{
	display: none;
}
/* 2 = main-sidebbar */

/* 3 = sidebbar-main */
.layout--3 .column-1{
	order: 2;
}
.layout--3 .column-2{
	order: 1;
}

.main-sections .layout--28 .row{
	width: 100%;
	max-width: 100%;
	padding: 0;
}
.main-sections .layout--28 .column-1{
	margin: 0;
	position: relative;	
}
.main-sections .layout--28 .column-2{
	display: none;
}
.main-sections .layout--28 .column-1 iframe{
	width: calc(100% + 3rem);
    display: block;
    margin-top: -2rem;
    margin-bottom: -2rem;
    margin-left: -1.5rem;
}

/* MEDIA */
/* 11 = bg */
.mediapos--11{
	min-height: 22vw;	
}
.mediapos--11 .section-media{
	position: absolute;
	z-index: 10;
}
.mediapos--11 .section-media,
.mediapos--11 .section-media *{
	width: 100%;
	height: 100%;	
}
.mediapos--11 .section-media img{
	object-fit: cover;
	opacity: 0.8;
	object-position: top;	
}
.mediapos--11 .row{
	position: relative;
	z-index: 20;
}

/* 38 = bg large */
.mediapos--38 .section-media img{
	width: 100%;
	height: auto;
	display: block;	
}

/* 10 = uitvullen */
.mediapos--10 .column-2{
	position: relative;
}
.mediapos--10 .column-2 .media img{
	width: 100%;
	height: 100%;
	display: block;
	object-fit: cover;
	aspect-ratio: 9/6;
}
.mediapos--10 .column-2 .media{
	margin-right: -3rem;
	margin-left: -3rem;
}
.mediapos--10.layout--2 .media{
	margin-bottom: -5.5rem;
}
.mediapos--10.layout--3 .media{
	margin-top: -5.5rem;
}

/* 9 = hoogte */
.mediapos--9 .column-2{
	position: relative;
}
.mediapos--9 .column-2 .media img{
	width: 100%;
	height: 100%;
	display: block;
	object-fit: cover;
	aspect-ratio: 1;
}

/* 8 = breed */
.mediapos--8 .row{
    align-items: center;
}
.mediapos--8 .column-2 .media img{
	width: 100%;
	display: block;
}


/* STYLE */
/* 4 = wit */
/* 5 = blauw */
/* 6 = licht blauw */
/* 7 = licht blauw panel */
.main-sections section.style--7{
	padding-left: 2rem;
	padding-right: 2rem;
}
.main-sections section.style--7 .row{
	padding-top: 2rem;
	margin-bottom: 7rem;
}
.style--7 .column ol{
	list-style: none;
	padding: 0;
}
/* SET WHITE */
.style--4{
	background-color: var(--color-white);	
}
a.button,
.style--5{
	color: var(--color-white);	
}

/* SET GREEN */
a.button{
	background-color: var(--color-green);
}
.style--7 h2,
.style--6 h2,
.style--4 h1,
.style--4 h2,
.style-- h1,
.style-- h2,
.style--5 h1{
	color: var(--color-green);
}

/* SET HIGHLIGHT GREEN */
footer a:hover{
	color: var(--color-green-highlight);	
}
a.button:hover{
	background-color: var(--color-green-highlight);
}
.detail-content-actions a.button:hover,
.pakketten-footer a.button:hover{
	/*background-color: var(--color-blue-highlight);*/
	background-color: var(--color-green-highlight);
}
/* SET HIGHLIGHT BLUE */


/* SET BLUE */
.detail-content-actions a.button,
.pakketten-footer a.button,
.style--5{
	background-color: var(--color-blue);	
}
.detail-content-title h2,
.style--7 .row,
.style--6,
.style--6 h2.large{
	color: var(--color-blue);
}
.detail-content-title{
	border-width: 1px;
	border-style: solid;
	border-color: var(--color-blue);
}

/* SET LIGHT BLUE */
.detail-content-title{
	background-color: var(--color-blue-light);
}

.style--7 .row,
.style--6{
	background-color: var(--color-blue-light);
	background-image: url(/themes/mobitank/images/bg-golf-80.svg);
	background-repeat: no-repeat;
    background-position: center bottom;
    background-size: 100%;
}

/* SPLIDE */
.splide__arrows{
	
}
.splide__arrow{
	width: 36px;
    height: 36px;
	position: absolute;
	z-index: 10;
	top: 50%;
	margin-top: -18px;
    border-radius: 50%;
	border: 1.5px solid;
	background-color: transparent;
	cursor: pointer;
}
.splide__arrow::after{
	content: '\f061';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    font-size: 20px;
}
.splide__arrow svg{
	display: none;	
}
.splide__arrow--prev{
	left: 10px;
	transform: rotate(-180deg);
}
.splide__arrow--next{
	right: 10px;
}
.main-banner .splide__arrow{
	color: var(--color-white);
	border-color: var(--color-white);
	background-color: var(--color-white-transparent);
}
#referentie-slider .splide__arrow{
	color: var(--color-blue);
	border-color: var(--color-blue);
	background-color: var(--color-white-transparent);
}
#referentie-slider .splide__arrow--prev{
	left: -3.5rem;
}
#referentie-slider .splide__arrow--next{
	right: -3.5rem;
}

/* SECTOR */
.sector-list-container{
	margin: 0 -1.5rem;
	background-color: var(--color-green);
}
.sector-list{
	display: flex;
	flex-wrap: wrap;
	list-style: none;
	padding: 0;
	margin: 0;
}
	.sector-item{
		flex-basis: 33.333%;
		max-width: 33.333%;
	}
.sector-item--content{
	position: relative;
}
	.sector-item--img{
		position: relative;
	}
		.sector-item--img img{
			width: 100%;
			display: block;
			object-fit: cover;
		}
		.sector-item--img::after{
			content: '';
			width: 100%;
			height: 100%;
			position: absolute;
			bottom: 0;
			left: 0;
			background: linear-gradient(0deg,#00000080,#0000 45% 100%);
		}
.sector-item--overlay{
	width: 100%;
    position: absolute;
    left: 0;
    bottom: 0;
    padding: 1.5rem 1rem;
    color: #FFF;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.85);
    line-height: 1;
    font-size: 13px;
    letter-spacing: 0;
    font-weight: 600;
}


/* TRANSITIONS */
a.button,
footer a,
.header-column-nav nav > .menu > .menu-item > a::after,
li.pakket .panel h2,
li.pakket .panel{
	transition: all 0.25s;
}

/* FORMS */
.user-login-form .js-form-item label{
	display: block;
	margin-bottom: 0.5rem;
}
.user-login-form input{
	padding: 7px 10px;	
}

/* SYSTEM */
.layout-content nav.tabs{
	position: absolute;
	top: 1px;
	right: 0;
	z-index: 200;	
}

.layout-content nav.tabs a:not(.is-active){
	background-color: rgba(255,255,255,0.5);
}


/* FONT AWESOME */
.media--type-font-awesome,
.media--type-font-awesome *{
	display: inline-block;
}

/* WEBFONTS */
@font-face {
    font-family: 'Mark';
    src: url('webfonts/mark/Mark-Book.eot');
    src: local('Mark-Book'),
        url('webfonts/mark/Mark-Book.eot?#iefix') format('embedded-opentype'),
        url('webfonts/mark/Mark-Book.woff2') format('woff2'),
        url('webfonts/mark/Mark-Book.woff') format('woff'),
        url('webfonts/mark/Mark-Book.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
}
@font-face {
    font-family: 'Mark';
    src: url('webfonts/mark/Mark-Bold.eot');
    src: local('Mark-Bold'),
        url('webfonts/mark/Mark-Bold.eot?#iefix') format('embedded-opentype'),
        url('webfonts/mark/Mark-Bold.woff2') format('woff2'),
        url('webfonts/mark/Mark-Bold.woff') format('woff'),
        url('webfonts/mark/Mark-Bold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
}
@font-face {
    font-family: 'Bruumfy';
    src: url('webfonts/bruumfy/bruumfy-bold.woff2') format('woff2'),
         url('webfonts/bruumfy/bruumfy-bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
}


/* RESPONSIVE */
@media screen and (min-width: 460px){
	.main-header .row{
		padding-left: 1.5rem;
    	padding-right: 1.5rem;
	}
}
@media screen and (min-width: 750px){
	h1{
		font-size: 4rem;
	}
	h2{
		font-size: 2.7rem;
	}
	h2.large{
		font-size: 3.9rem;
	}
	h3{
		font-size: 1.8rem;
	}
	h4{
		font-size: 1.7rem;
	}
	.column{
		flex: 1;	
	}
	.layout--12 .column-1{
		flex: 1.5;
	}
	.banner-content{
		padding-top: 54vw;
	}
	.banner-overlay h3{
		font-size: 4rem;
	}
	.main-sections .column .field ul.small{
		max-width: 100%;
		width: 550px;
		margin-left: auto;
		margin-right:auto;	
	}
	.main-sections .column .field ul.double{
		column-count: 2;
		column-gap: 4rem;
	}
	
	.mediapos--10 .column-2 .media img{
		aspect-ratio: unset;
	}
	.mediapos--10 .column-2 .media{
		position: absolute;
		top: -5.5rem;
		bottom: -5.5rem;
		margin: 0;
	}
	.mediapos--10 .column-2 .media > .field{
		height: 100%;
	}
	.mediapos--10.layout--2 .column-2 .media{
		left: 1.5rem;
		right: 0;
		margin-right: calc((50vw - 100%) * -1);
	}
	.mediapos--10.layout--3 .column-2 .media{
		left: 0;
		right: 1.5rem;
		margin-left: calc((50vw - 100%) * -1);
	}
	
	.mediapos--9 .column-2 .media img{
		aspect-ratio: unset;
	}
	.mediapos--9 .column-2 .media{
		position: absolute;
		top: 0;
		bottom: 0;
		left: 1.5rem;
		right: 1.5rem;
		margin: 0;
	}
	.mediapos--9 .column-2 .media > .field{
		height: 100%;
	}
	
	/* header */
	.main-header .row{
		padding-left: 1.5rem;
		padding-right: 1.5rem;
	}
	.header-row-top .field{
		margin: 0 -12px 0 0;
	}
	.header-row-top .field ul li:last-child{
		display: inline-block;	
	}
	.column.header-column-logo{
		flex-basis: 260px;
		max-width: 260px;
	}
	.menu-toggle--title{
		display: flex;
	}
	
	li.pakket{
		flex: 1;
	}
	li.referentie:nth-child(3){
		display: flex;
	}
	li.usp{
		flex-basis: 50%;
		max-width: 50%;
	}
	
	.detail-content-title{
		flex: 1;	
	}
	.detail-content-desc{
		flex: 3;	
	}
	
	.contact-panel{
		flex: 1;
	}
	
	.sector-item{
		flex: 25%;
		max-width: 25%;
	}
	.sector-item--overlay{
		padding: 1.5rem 1.5rem;
		font-size: 16px;
	}

	/* footer */
	footer .footer-content .column{
		flex: 0.8;
	}
	footer .footer-content .column:first-child{
		flex-basis: 100%;
	}
}

@media screen and (min-width: 940px){
	
	/* header */
	.header-row-top .field{
		font-size: 1.4rem;
	}
	
	.banner-content{
		padding-top: 50vw;
	}
	.banner-overlay h3{
		font-size: 4.5rem;
	}
	
	li.referentie:nth-child(4){
		display: flex;
	}
	
	li.usp{
		flex-basis: 33.333%;
		max-width: 33.333%;
	}
	.sector-item--overlay {
		padding: 2rem 1.5rem;
    	font-size: 17px;
	}
	/* footer */
	footer .footer-content .column:first-child{
		flex: 2;
	}
	footer .footer-content .column:first-child .field{
		padding-right: 15%;
	}
	footer .footer-content .column:last-child{
		flex: 0;
		white-space: nowrap;
	}
	
}
@media screen and (min-width: 1024px){
	.main-header .row,
	.row {
		padding-left: 2rem;
		padding-right: 2rem;
	}
	.column {
		margin-top: 2rem;
		margin-bottom: 2rem;
		padding-left: 3rem;
		padding-right: 3rem;
	}
	.main-sections .layout--28 .column-1 iframe{
		width: calc(100% + 6rem);
		margin-left: -3rem;
	}
	.column.header-column-logo {
		padding-right: 1rem;
	}
	.banner-content{
		padding-top: 45vw;
	}
	.banner-overlay h3{
		font-size: 5rem;
	}
	.main-banner.main-banner-type--3{
		margin-bottom: -8%;
	}
	.mediapos--10 .column-2 .media{
		top: -6rem;
		bottom: -6rem;
	}
	.mediapos--10.layout--2 .column-2 .media{
		left: 3rem;
	}
	.mediapos--10.layout--3 .column-2 .media{
		right: 3rem;
	}
	.mediapos--9 .column-2 .media{
		left: 3rem;
		right: 3rem;
	}
	
	.sector-list-container{
		margin: 0 -3rem;
	}
	.sector-item{
		flex: 1;
		max-width: unset;
	}
	.sector-item--overlay {
		font-size: 14px;
	}
}

@media screen and (min-width: 1200px){
	
	/* referenties */
	.view-id-referenties{
		padding: 0;	
	}
	.banner-content{
		padding-top: 40vw;
	}
	.banner-overlay h3{
		font-size: 5.5rem;
	}
	.panel--title h2{
		font-size: 2rem;
	}
	.sector-item--overlay {
		font-size: 15px;
	}
}
@media screen and (min-width: 1300px){
	.sector-item--overlay {
		font-size: 16px;
		padding: 2.5rem 2rem;
	}
}


/* DESKTOP MENU */
@media screen and (min-width: 1100px){
	.menu-toggle{
		display: none;
	}
	.header-column-nav .menu-nav{
		display: flex;
	}
	.header-column-nav .menu-nav,
	.header-column-nav .menu-nav nav,
	.header-column-nav .menu-nav nav > .menu{
		display: flex;
		flex: 1;
	}
	.header-column-nav nav{
    	position: relative;
    	z-index: 200;
		padding-left: 9%;
	}
	.header-column-nav nav > .menu{
		justify-content: space-between;
		margin: 0 -12px 0 0;
	}
	.header-column-nav nav > .menu > .menu-item > a{
		height: 100%;
		display: flex;
		align-content: center;
		flex-wrap: wrap;
		padding: 12px 12px;
		text-align: center;
		position: relative;
	}
		.header-column-nav nav > .menu > .menu-item > a::after{
			content: '';
			position: absolute;
			height: 3px;
			left: 12px;
			right: 12px;
			background-color: var(--color-green-highlight);
			bottom: 0;
			opacity: 0;
		}
		.header-column-nav nav .menu-item{
			position: relative;	
		}
		.header-column-nav nav .menu-item a{
			display: block;	
		}
			/* submenu */
			.header-column-nav nav .menu-item > .menu{
				min-width: 200px;
				position: absolute;
				left: 12px;
				margin: 0;
    			padding: 2px 0;
				background-color: var(--color-white);
				-webkit-box-shadow: 0px 0px 3px 0px rgba(0,0,0,0.25);
				-moz-box-shadow: 0px 0px 3px 0px rgba(0,0,0,0.25);
				box-shadow: 0px 0px 3px 0px rgba(0,0,0,0.25);
				opacity: 0;
				visibility: hidden;
			}
			.header-column-nav nav .menu-item > .menu .menu-item{
				padding: 0 8px;
			}
			
			.header-column-nav nav .menu-item > .menu .menu-item a{
				padding: 8px 2px;
				color: var(--color-blue);
				border-bottom: 1px solid var(--color-grey-mid);
			}
			.header-column-nav nav .menu-item > .menu .menu-item:last-child a{
				border-bottom: 0;
			}
		/* hovers */
		.header-column-nav nav > .menu > .menu-item:hover > a::after{
			opacity: 1;
		}
		.header-column-nav nav .menu-item:hover > .menu{
			opacity: 1;
			visibility: visible;
		}
		.header-column-nav nav .menu-item > .menu .menu-item a:hover{
			color: var(--color-green);
		}
}

/* MOBILE MENU */
@media screen and (max-width: 1099px){
	.header-column-nav .menu-nav{
		width: 100%;
    	height: 100%;
    	min-height: 100vh;
    	position: fixed;
    	z-index: 200;
    	top: 0;
    	left: 100%;
    	margin: 0;
    	padding: 0;
		overflow: hidden;
		transition: .5s cubic-bezier(.86, 0, .07, 1);
		background-color: var(--color-blue);
		display: flex;
		flex-direction: column;
		justify-content: center;
		border-left: 1rem solid var(--color-white);
	}
	.header-column-nav .menu-nav::before {
		content: '';
		width: 100%;
		padding-top: 8%;
		position: absolute;
		left: 0;
		bottom: 0;
		background-image: url(/themes/mobitank/images/mask-banner.svg);
		background-repeat: no-repeat;
		background-position: bottom left;
		background-size: 100%;
	}
		.menu-open .menu-nav{
			transform: translateX(-100%);
			transition-delay: 0s;
		}
	.header-column-nav .menu-nav nav{
		display: flex;
		justify-content: center;
		align-items: center;
	}
	
	.menu-nav nav > ul.menu{
		
	}
		.menu-nav nav > ul.menu > li{
			margin: 0.5rem 0;
		}
			.menu-nav nav > ul.menu > li > a{
				display: block;
				padding: 0.4rem 0.5rem;
    			font-size: 2.5rem;
				font-weight: 600;
			}
	
	
		.menu-toggle--bars span {
			width: 70%;
			height: 3px;
			background-color: var(--color-white);
			position: absolute;
			left: 15%;
			top: 50%;
		}
			.menu-toggle--bars span:nth-child(1), 
			.menu-toggle--bars span:nth-child(2) {
				margin-top: -2px;
				transition: 0.5s cubic-bezier(.77, 0, .175, 1);
				transition-delay: 0s;
			}
			.menu-toggle--bars span:nth-child(3) {
				margin-top: -9px;
				opacity: 1;
				transition: 0.3s ease-in;
				transition-delay: 0.3s;
			}
			.menu-toggle--bars span:nth-child(4) {
				margin-top: 5px;
				opacity: 1;
				transition: 0.3s ease-in;
				transition-delay: 0.3s;
			}
			.menu-open .menu-toggle--bars span:nth-child(1) {
				transform: rotate(225deg);
				transition-delay: 0.3s;
			}
			.menu-open .menu-toggle--bars span:nth-child(2) {
				transform: rotate(135deg);
				transition-delay: 0.3s;
			}
			.menu-open .menu-toggle--bars span:nth-child(3) {
				margin-top: -2px;
				opacity: 0;
				transition-delay: 0s;
			}
			.menu-open .menu-toggle--bars span:nth-child(4) {
				margin-top: -2px;
				opacity: 0;
				transition-delay: 0s;
			}
}