/* GENERAL STYLING */
* { padding: 0; margin: 0; }
html { scroll-behavior: smooth; }
body { font-family: 'Heebo', sans-serif !important; }

p { line-height: 1.3; }

p a { color: #07BBFF !important; }
p a:hover,
p a:focus { color: #07BBFF !important; text-decoration: underline; }

svg,
img { max-width: 100% !important; height: auto !important; }

.layout-container { margin: 0 !important; }

body:not(.page-node-type-home) { background: #f4f4f4 !important; }
body:not(.page-node-type-home) main { margin-top: 250px; }
body.page-node-type-home.user-logged-in { padding: 0 !important; }

body:not(.page-node-type-home) main { min-height: 500px;text-align: center; }

#block-samvdhwebdev-local-tasks { width: 1000px; max-width: 100%; margin: 10px auto; }

h1.page-title { font-size: 36px; font-weight: bold; }

#block-tabs { margin-bottom: 30px; }

.toolbar-oriented .toolbar-bar { z-index: 1000; }

.button { margin: 0; text-shadow: none !important; background: #EF6728; padding: 21px 60px 18px; border-radius: 5px; color: #fff !important; text-decoration: none !important; font-size: 26px; font-weight: bold; box-shadow: none !important; border: none !important; }
.button:hover,
.button.active,
.button:focus { background: #EF6728; border: none; color: #fff !important; box-shadow: none !important; }

/* HEADER */
header { z-index: 101; background: #fff; position: absolute; top: 0; left: 0; right: 0;  }
header:after { content: ''; position: absolute; top: 100%; left: 0; right: 0; height: 45px; background: url('../img/boog.png') no-repeat; background-size: cover; background-position: center center;  }
.region-header { font-size: 0; }
.region-header > div { font-size: 16px; }
header .region-header { display: flex; padding-top: 20px; }

header #block-leftmenu,
header #block-samvdhwebdev-branding,
header #block-samvdhwebdev-main-menu,
header #block-languageswitchercontent { vertical-align: middle; }

header #block-leftmenu { width: 43%; text-align: right; padding-right: 90px; margin-top: 70px; }
header #block-samvdhwebdev-branding { width: 14%; margin-top: 20px; }
header #block-samvdhwebdev-main-menu { width: 28%; padding-left: 90px; margin-top: 70px; }
header #block-languageswitchercontent { width: 15%; margin-top: 70px; }

header #block-leftmenu ul.menu { text-align: right; }
header ul.menu { margin: 0; }
header ul.menu li { list-style-type: none; display: inline-block; }
header ul.menu li:not(:first-child) { margin-left: 100px; }
header ul.menu li a { color: #000 !important; font-size: 16px; }
#block-mobilelogo { display: none; }

body.page-node-type-page header ul.menu li a { display: none !important; }


/*#block-samvdhwebdev-branding { width: 300px; position: absolute; left: 50%; transform: translateX(-50%); top: 35px; }*/

#block-languageswitchercontent { display: inline-block; width: 20%; }
#block-languageswitchercontent ul li { display: inline-block; list-style-type: none; position: relative; }
#block-languageswitchercontent ul li:first-child { margin-right: 5px; }
#block-languageswitchercontent ul li:first-child:after { content: ''; width: 2px; position: absolute; right: 2px; top: -2px; bottom: -2px; background: #EF6728;}
#block-languageswitchercontent ul li a { color: #000; font-size: 18px; }
#block-languageswitchercontent ul li a:hover { color: #000; font-size: 18px; }


/* MOBILE MENU */
body.page-node-type-page .mobile-header .menu-toggler { display: none !important; }
.mobile-header { padding: 5px; position: fixed; top: 0; left: 0; right: 0; background: #fff; z-index: 499; }
.mobile-header:after { content: ''; position: absolute; top: 100%; left: 0; right: 0; height: 22px; background: url('../img/boog.png') no-repeat; background-size: cover; background-position: center center;  }
body.user-logged-in .mobile-header { position: sticky; top: 0; }
.mobile-header #block-samvdhwebdev-branding { width: 240px; margin: auto; padding: 10px 0; transition: width .4s ease-in-out;}
.mobile-header.small #block-samvdhwebdev-branding { width: 150px; }
.mobile-header .menu-toggler { width: 30px; height: 20px; background: url('../img/menu-open.png') no-repeat; background-size: cover; position: absolute; top: 22px; right: 20px; z-index: 502; }
.mobile-header .inner.toggled .menu-toggler { filter: invert(1); }
.mobile-header .menu-toggler:hover { cursor: pointer; }
.mobile-header .mobile-menu { display: none; position: fixed; z-index: 500; background: #222; width: 100%; left: 0; top: 0; padding: 30px; height: 100vh; }
body.user-logged-in .mobile-header .mobile-menu { top: 39px !important; }
.mobile-header ul.menu { margin: 0; text-align: center; margin-top: 40vh; transform: translate(0, -50%); }
.mobile-header .mobile-menu ul.menu li { list-style: none; margin: 0 0 10px 0; }
.mobile-header .mobile-menu ul.menu li a { font-size: 24px; color: #fff; text-decoration: none !important; position: relative; }
.mobile-header .mobile-menu ul.menu li a:after { content: ''; position: absolute; left: 0; right: 100%; top: 103%; height: 2px; background: #fff; }

.mobile-header .mobile-menu ul.menu li.menu-item--active-trail a:after,
.mobile-header .mobile-menu ul.menu li a.is-active:after,
.mobile-header .mobile-menu ul.menu li a:hover:after,
.mobile-header .mobile-menu ul.menu li a:active:after { right: 0; }

.mobile-header .mobile-menu #block-languageswitchercontent { width: 100%; }
.mobile-header .mobile-menu .mobile-language-switcher { text-align: center; }
.mobile-header .mobile-menu .mobile-language-switcher ul > li > a { color: #fff !important; }
.mobile-header .mobile-menu .mobile-language-switcher ul { margin: 0 !important; }
.mobile-header .mobile-menu .mobile-language-switcher ul li:last-child { padding: 0; }




#slider { height: 100vh; min-height: 800px; overflow: hidden; margin-bottom: 160px; position: relative; }
#slider .overlay { width: 34%; position: absolute; left: 53%; top: 500px; transform: translateY(-50%); z-index: 101; }
#slider .overlay .text { font-size: 34px; font-weight: bold; color: #fff; margin-left: 10px; margin-top: 100px; }
#slider .overlay .text p { line-height: 1.1; letter-spacing: 1px; }
#slider .overlay .text .button { padding: 20px 110px; margin-top: 20px; }
#slider .field--name-field-slider,
#slider .field--name-field-slider > div { height: 100% !important; }
#slider .field__item { width: 100%; height: 100vh; margin: 0; padding: 0; }
#slider .field__item img { height: 100% !important; width: 100% !important; object-fit: cover; }


.page-node-type-page .field--name-body { width: 1000px; margin: auto; max-width: 95%; margin-bottom: 90px; }
.page-node-type-page .field--name-body table,
.page-node-type-page .field--name-body table tr,
.page-node-type-page .field--name-body table td { border: none !important; }
.page-node-type-page .field--name-body table td { width: 50%; }
.page-node-type-page .field--name-body table * { background: transparent !important; }


/*intro*/
#block-samvdhwebdev-page-title { text-align: center; margin-bottom: 60px; }
.field--name-field-intro { width: 800px; margin: auto; max-width: 90%; margin-bottom: 200px; font-size: 20px; text-align: center; }
.field--name-field-intro p { color: #707070; line-height: 1.7; text-align: center; }
.field--name-field-intro .link { margin: auto; margin-top: 60px; display: inline-block; }


/*pluspunten*/
#pluspunten { padding: 100px 0; position: relative; margin-bottom: 300px; }
#pluspunten:after { content: ''; position: absolute; top: 0; bottom: 0; left: 0; right: 0; background: #F1F1F1; z-index: -2; }
#pluspunten .field--name-field-pluspunt-title { font-size: 36px; font-weight: bold; text-align: center; }
#pluspunten .field--name-field-pluspunt-subtitle { font-size: 18px; color: #707070; font-family: 'Source Sans Pro', sans-serif; text-align: center; margin-bottom: 120px; }
#pluspunten .field--name-field-pluspunten .row .field__item { margin-bottom: 60px; } /*60px ipv 120px*/
#pluspunten .field--name-field-pluspunten .row .field__item .number { text-align: center; margin-bottom: 30px; }
#pluspunten .field--name-field-pluspunten .row .field__item .number .inner { position: relative; color: #fff; font-size: 40px; font-weight: bold; }
#pluspunten .field--name-field-pluspunten .row .field__item .number .inner:after { content: ''; width: 70px; height: 70px; background: #EE451E; border-radius: 50%; position: absolute; top: -7px; left: 50%; transform: translateX(-50%); z-index: -1; }
#pluspunten .field--name-field-pluspunten .row .field__item p { width: 250px; max-width: 100%; margin: auto; text-align: center; }



/*process*/
.field--name-field-proces {}
.field--name-field-proces .field--items > .field__item:not(:last-child) { margin-bottom: 300px; position: relative; }
/*.field--name-field-proces .field--items > .field__item:not(:last-child) .arrow { width: 20px; height: 180px; background: url('../img/arrow.png') no-repeat; background-size: contain; background-position: center center; position: absolute; left: 50%; top: 110%; transform: translateX(-50%); }*/
.field--name-field-proces .field--items > .field__item .arrow { width: 20px; height: 180px; position: absolute; left: 50%; top: 110%; transform: translateX(-50%); z-index: -1; }
.field--name-field-proces .field--items > .field__item.arrow .inner { height: 0; transition: 1s ease; }
.field--name-field-proces .field--items > .field__item:last-child .arrow { display: none; }
.field--name-field-proces strong { color: #EF6728; }
.field--name-field-proces .field--name-field-title { line-height: 1; font-size: 36px; font-weight: bold; text-align: center; width: 730px; max-width: 100%; margin: 0 auto 60px auto; }
.field--name-field-proces .field--name-field-title p { line-height: 1 }
.field--name-field-proces .wrapper { font-size: 0; display: flex; }
.field--name-field-proces .wrapper > div { display: inline-block; font-size: 18px; }
.field--name-field-proces .wrapper .field--name-field-text { width: 60%; border: 2px solid #97C64F; position: relative; background: #fff;}
.field--name-field-proces .wrapper .field--name-field-text p { font-size: 16px; color: #707070; width: 500px; max-width: 90%; text-align: center; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
.field--name-field-proces .wrapper .field--name-field-image { width: 40%; }
.field--name-field-proces .linkcontainer { text-align: center; }
.field--name-field-proces .responsive-text { display: none; }


#block-bottomlink { margin-bottom: 200px; text-align: center; }




footer { background: #1C2022; color: #fff; font-size: 0; padding: 80px 0 120px 0; }
footer a { color: #fff !important; text-decoration: none !important; }
footer .footer-content { width: 1000px; max-width: 95%; margin: auto; }
footer .left,
footer .right { display: inline-block; font-size: 16px; vertical-align: top; }
footer .left .logo { width: 230px; max-width: 100%; margin-bottom: 40px; }
footer .left .text { font-size: 18px; }
footer .left .info { margin-top: 40px; }
footer .left .text li { list-style-type: none; }
footer .left { width: 60%; padding-left: 150px; }
footer .right{ width: 40%; }
footer .right .icon { position: relative; font-weight: bold; font-size: 18px; }
footer .right .icon:after { content: ''; width: 25px; height: 25px; left: -40px; top: 0; position: absolute; }
footer .right .tel:after { background: url('../img/tel.png') no-repeat; background-size: contain; background-position: center; }
footer .right .tel { margin-bottom: 20px; }
/*footer .right .email { font-size: 18px; }*/
footer .right .email:after { background: url('../img/Mail.png') no-repeat; background-size: contain; background-position: center; }
footer .right .info { margin-top: 30px; font-size: 18px; }

footer .mgd { color: #949494 !important; margin-top: 20px; }
footer .mgd a { color: #949494 !important; }


form#user-login-form { width: 1000px; max-width: 100%; margin: 0 auto 240px auto; }
form #edit-submit { border: none !important; padding: 5px 40px !important; }



/* RESPONSIVE */
@media only screen and (min-width: 1301px) {
	.mobile-header { display: none; }
}

@media only screen and (max-width: 1300px) {
	body { background: #f4f4f4 !important; }

	.button { font-size: 24px !important; }

	header { display: none !important; }

	#slider .overlay { width: 100%; top: 0; left: 0; height: 100%; transform: none; padding: 170px 20px 15px 20px; }
	#slider .overlay .bigtext { width: 380px; max-width: 100%; margin: auto; }
	#slider .overlay .text { position: absolute; bottom: 70px; text-align: center; left: 0; right: 0; }
	#slider .overlay .text p { width: 600px; max-width: 80; margin: auto; }
	
	#pluspunten:after { background: #E6E6E6; }
}
@media only screen and (max-width: 991px) {

	h1.page-title { max-width: 80%; }

	#slider { min-height: 500px; }

	#pluspunten .field--name-field-pluspunt-subtitle { max-width: 80%; margin: auto; margin-bottom: 60px; }

	.field--name-field-proces .wrapper { display: block; }
	.field--name-field-proces .wrapper:after { content:''; display: block; clear: both; }
	.field--name-field-proces .wrapper .field--name-field-image { width: 100%; height: 240px; }
	.field--name-field-proces .wrapper .field--name-field-image img { height: 100% !important; width: 100% !important; object-fit: cover; }
	.field--name-field-proces .wrapper .field--name-field-text { display: none; }
	.field--name-field-proces .field__item:not(:last-child) .responsive-text { display: block; border: 2px solid #97C64F; text-align: center; padding: 90px 60px; color: #707070; }

	footer { text-align: center; }
	footer .footer-content { width: auto; text-align: left; display: inline-block; max-width: 100%;}
	footer .left,
	footer .right{ display: block; width: 100%; }


	footer .left { padding: 0; }
	footer .right{ margin-top: 60px; }
	footer .right .icon { margin-left: 40px; }

	footer .right .info li { display: inline-block; margin-right: 10px; }
	footer .right .info li:nth-child(2) { clear: both; }
}
@media only screen and (max-width: 790px) {}
@media only screen and (max-width: 720px) {
	/*footer .footer-content { width: 90%; }*/
}
@media only screen and (max-width: 620px) {

	.button { padding: 10px 20px !important; font-size: 18px !important; }

	#slider .overlay { padding-top: 190px; }

	#slider .overlay .bigtext { width: 60%; }
	#slider .overlay .text { font-size: 4vw; }
	#slider .overlay .text p { width: 80%; }

	.field--name-field-intro { margin-bottom: 100px; }

	#pluspunten { padding: 30px 0; margin-bottom: 100px; }

	.field--name-field-proces .field__item:not(:last-child) .responsive-text { padding: 30px; }
}
@media only screen and (max-width: 576px) {}
@media only screen and (max-width: 500px) {}
@media only screen and (max-width: 450px) {}
@media only screen and (max-width: 374px) {}