/* abel-regular - latin */
@font-face {
    font-family: 'Abel';
    font-style: normal;
    font-weight: 400;
    src: url('/fonts/abel-v8-latin-regular.eot'); /* IE9 Compat Modes */
    src: local('Abel Regular'), local('Abel-Regular'),
         url('/fonts/abel-v8-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('/fonts/abel-v8-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
         url('/fonts/abel-v8-latin-regular.woff') format('woff'), /* Modern Browsers */
         url('/fonts/abel-v8-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
         url('/fonts/abel-v8-latin-regular.svg#Abel') format('svg'); /* Legacy iOS */
}
* {padding: 0; margin: 0;}
a {color: #E94927;}
body, html {height: 100%;}
body {background: #d4d6d5; font-family: 'Abel'; font-size: 16px; color: black; line-height: 1.4; overflow-y: scroll;}
#innerbody {width: 100%;}
/*
commented bacuse part of inphone display (no longer used)
------------
@media (min-width: 1000px) and (min-height: 800px) {
    body {background: #d4d6d5 url(/img/bg.png) center center / auto 967px no-repeat;}
    body, html {height: 100%;}
    #phone body {overflow-x:hidden;}
}
*/
#top {background: white; width: 400px; margin: 0 auto; position: relative;}
.header {position: absolute; top: 0; width: 400px; margin: 0 auto; height: 60px; z-index: 3; background: white;}
.headertext {display: block; padding: 12px 0 0 110px; color: #3eb73c; font-size: 12px; line-height: 1.3;}
.scrolled .headertext {padding-left: 100px;}
img {max-width: 100%; height: auto;}
.subtitle {text-transform: uppercase; font-size: 12px; line-height: 1em;}
.section {position: relative; padding: 25px 30px 30px; font-size: 23px; line-height: 1.4;}
.section .img {position: absolute; z-index: 0;}
.section .img img {width: 100%; display: block;}

/* KLEUREN */
.lightgray {background-color: #ecebe8!important;}
.lightgreen {background-color: #cdedca!important;}
.yellow {background-color: #f1d932!important;}
.green {background-color: #3eb73c!important; color: white;}
.gray {background-color: #d6d8d5!important;}
.darkred {background-color: #A90000!important; color: white;}
.lightpink {background-color: #F8EFF2!important;}

.logo, #menutoggle {position: absolute; top: 15px; left: 30px; width: 70px;}
#menutoggle {cursor: pointer; left: auto; right: 30px; width: 30px; top: 17px;}
@keyframes flyin {from{margin-top: -60px;}to{margin-top: 0px;};}
.menuopen .header, .scrolled .header {position: fixed; box-shadow: 0px 0px 5px rgba(0,0,0,0.25);}
.scrolled .header {animation-name: flyin; animation-duration: 300ms; animation-timing-function: ease-out;}
.menuopen .logo, .scrolled .logo {width: 40px; top: 8px;}
.scrolled #menutoggle {width: 30px;}
.menu {display: none; background: #E94927; position: fixed; z-index: 3; width: 100vw; left: 0; padding: 10px 0; margin-top: 60px; opacity: 0.9;}
.menu li {list-style: none; text-align: center;}
.menu a {color: white; text-decoration: none; text-transform: uppercase; display: block; padding: 5px 15px; font-size: 20px;}
strong {color: #3eb73c; font-weight: normal;}
em.highlight {background: white; font-style: normal}
.green em.highlight {color: #000; background: white;}
p {margin-bottom: 1.4em;}
p:last-child {margin-bottom: 0;}
.container {margin-inline: auto; max-width: 1200px; position: relative;}
.carousel {overflow: hidden; padding: 0;}
.carousel .navigation {position: absolute; padding: 25px 30px; z-index: 2;}
.carousel .navigation .dot {float: left; background: transparent; border: 1px solid black; width: 10px; height: 10px; margin: 15px 7px 0 0; border-radius: 15px; cursor: pointer;}
.carousel .navigation .dot.active {background: black;}
.slides_container {overflow: hidden; transition: margin-left 0.3s ease-in-out;} 
.slides_container.touch {transition: none;}
.slide {width: 340px; height: 400px; float: left; padding: 25px 30px; background-repeat: no-repeat;}
.imagesleft {margin-left: 120px;}
.imagesleft .img {position: absolute; margin-left: -120px; width: 100px; font-size: 12px; line-height: 1.2;}
#over .imagesleft .img {margin-left: -135px; width: 135px;}
.imagesleft .img img {width: 100%; margin-bottom: 5px;}
.small {font-size: 16px; line-height: 1.2;}
.smaller {font-size: 12px; line-height: 1.2;}
.button {cursor: pointer; background: #E94927; display: inline-block; border: 0; padding: 0 5px 1px; color: white; text-decoration: none; text-transform: uppercase; font-size: 16px; transition: all 0.3s ease-in-out;}
input, textarea {background: white; border: 0; display: block; padding: 5px 5px; width: calc(100% - 10px); font-family: 'Abel'; font-size: 20px;}
input[type="submit"].button {height: 44px; line-height: 44px; padding: 0; width: 100%; text-transform: none; margin-top: 15px;}
p label {display: block;}
label input[type="radio"] {width: auto; display: inline-block;}
.button:hover {background: #f1d932; color: black;}
.button.large {display: block; text-align: center; margin-bottom: 20px; padding: 8px 15px; font-size: 20px; text-transform: none;}
.bloglink {border: 1px solid #E94927; position: relative; background: white; font-size: 20px; line-height: 1.2; display: block; text-decoration: none; color: black; padding: 8px 10px 10px 90px; margin-top: 15px;}
.bloglink span {width: 80px; top: 0; display: block; height: 100%; position: absolute; margin-left: -90px;}
.blogcontent {padding: 10px 0px; border-top: 0;}
.blogcontent a {color: #E94927;}
.blogrequest {padding: 15px 15px 15px; margin: 0 0 -10px;}
.blogrequest > * > * {margin-bottom: 10px!important;}
.blogrequest > * > *:last-child {margin-bottom: 5px!important;}
.blogrequest > * > *:first-child {margin-bottom: 15px!important;}
.blogrequest > *:first-child img {float: left; height: 146px; margin-right: 15px;}
.blogrequest form {display: none;}
.blogrequest .button {display: inline-block; background: #f1d932; color: black;}
.blogrequest .button:hover {background: #E94927; color: white;}
.downloadlink {transition: all 0.3s ease-in-out; overflow: auto; position: relative; background: #E94927; color: white; display: block; font-size: 19px; line-height: 1.2; text-decoration: none; padding: 9px 17px; margin: 10px 0 20px;}
.downloadlink img {position: relative; bottom: 1px; width: 50px; float: left; margin-right: 24px;}
.downloadlink span {font-size: 14px;}
.downloadlink:hover {background: #f1d932; color: black;}
.gallery {overflow: auto; margin-right: -2%; position: relative; bottom: 4px; margin-bottom: 10px;}
.gallerythumbnail {width: 23%; margin-right: 2%; padding-bottom: 19%; float: left; background-size: cover; background-position: center center; cursor: pointer;}
.gallerythumbnail.active {opacity: 0.25;}
h2 {font-size: 16px;}
h4 {color: gray; font-weight: normal;}
@keyframes spin {from{transform: rotate(0deg);}to{transform: rotate(360deg);}}
.rotating:hover {animation-name: spin; animation-duration: 300ms; animation-iteration-count: infinite; animation-timing-function: linear;}
.hoekje {background: url(/img/hoekje.png) center center / cover no-repeat; color: #E94927; text-decoration: none; width: 80px; height: 10px; position: absolute; margin-top: -79px; right: 0px; text-transform: uppercase; font-size: 12px; line-height: 1em; padding: 55px 0 15px; text-align: right;}

.video::after, .video::before {
    position: absolute;
    content: "";
    width: 65px;
    height: 65px;
    background: #E94927; 
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    border-radius: 100%;
    pointer-events: none;
}

.video::before {
    width: 0; 
    height: 0; 
    border-top: 15px solid transparent;
    border-bottom: 15px solid transparent; 
    border-left: 25px solid white;
    background: none;
    z-index: 1;
    border-radius: 0;
    margin-left: 3px;
}

/* way off screen 
commented bacuse part of inphone display (no longer used)
------
.scrollbar-measure {
	width: 100px;
	height: 100px;
	overflow: scroll;
	position: absolute;
	top: -9999px;
}
*/
body .headertext {opacity: 0; pointer-events: none;}
body.scrolled .headertext {opacity: 1;}

.section.invisible {display: none;}
#moreorless::before {content: "meer";}
.active #moreorless::before {content: "minder";}

#over .img {bottom: 0;}
#over .img img {margin-bottom: 0;}

@media (min-width: 600px) {
    #top, .header {width: 100%;}
    .section, .carousel .navigation {padding: 40px 60px 45px;}
    .section.carousel {padding: 0;}
    .hoekje {right: 0px;}
    .logo, #menutoggle {left: 60px;}
    #menutoggle {left: auto; right: 60px;}
    .headertext {padding: 12px 0 0 100px;}
    .scrolled .headertext {padding-left: 130px;}
    .button.large {
        max-width: 400px;
        margin-left: auto;
        margin-right: auto;
    }
    .center.img {position: absolute; left: 50%; transform: translateX(-50%); margin-left: 200px; bottom: 90px!important;}
    .itemholder.twoup {overflow: hidden;}
    .itemholder.twoup .item {float: left; width: calc(50% - 10px); margin-right: 20px;}
	.itemholder.twoup .item > div.lightgreen:first-child {top: 40px;}
    .itemholder.twoup .item:nth-child(even) {margin-right: 0;}
    .section {text-align: center;}
    .section .slide {text-align: left;}
    .section.green p {max-width: 450px; margin-left: auto; margin-right: auto;}
    div#portfolio, div#blogs, div#reviews, div#communicatiemiddelen, div#over .imagesleft, div#over, .sectionholder.twoup .section > p {text-align: center;}
    #portfolio .itemholder, #blogs .bloglink, .imagesleft {text-align: left;}
    #portfolio .itemholder, #blogs .bloglink, .itemholder.twoup {max-width: 850px; margin-left: auto; margin-right: auto;}
    .bloglink {max-width: 328px!important; margin-left: auto; margin-right: auto;}
    #over .imagesleft {margin: 0 auto;}
    .itemholder .item, .bloglink {text-align: left;}
    .imageholder {margin-left: auto!important; margin-right: auto!important; margin-top: 15px!important; margin-bottom: 20px!important;}
    .imageholder + div {max-width: 430px; text-align: left; margin-left: auto; margin-right: auto;}
    .imageholder #currentimage {max-width: 630px!important; height: 395px!important;}
    .imageholder {max-width: 630px!important;}
    .blogcontent {max-width: 398px; margin-left: auto; margin-right: auto; text-align: left;}
    body.communicatiemiddelen .section {max-width: 450px; margin-left: auto; margin-right: auto;}
    p img {min-width: 100%; height: auto;}
    .gallery {bottom: 0;}
}

@media (min-width: 900px) {
    .carousel .navigation {text-align: center; left: 50%; transform: translateX(-50%);}
    .carousel .navigation > div:nth-child(2) {overflow: auto;display: inline-block;}
    .carousel .navigation .dot {margin-left: 1px;}
    .itemholder .item {text-align: center;}
}