/* CSS Document */

/* 
0 - ALGEMEEN
1 - MENU
2 - TOP
3 - WAAROM
4 - WANNEER
5 - STAATVOOR
6 - CONTACT
7 - FOOTER
8 - FORMS & BUTTONS
9 - LOGO SLIDER

*/

/* 0 - ALGEMEEN */

@font-face { font-family: "AvenirLTStd Black"; src: url("../fonts/AvenirLTStd-Black.otf") format("opentype"); }
@font-face { font-family: "AvenirLTStd Roman"; src: url("../fonts/AvenirLTStd-Roman.otf") format("opentype"); }
html { scroll-behavior: smooth; }
.row { max-width: 100% !important; }
@media only screen and (max-width: 40em) {
.row .row { margin: 0 0rem; }
}
.spacing { margin-bottom: 2em !important; }
.contain-to-grid { background: #FFF; padding: 1em 0 1em 0; }
#top,
#waarom,
#wanneer,
#staatvoor,
#contact { padding: 5em 1em 5em 1em; }
 @media only screen and (min-width: 40em) {
#top
/*#waarom,
#wanneer,
#staatvoor*/ { padding: 6em 5em 6em 5em; min-height: 100vh; }
/*#contact { padding: 6em 5em -2em 5em; height: 85vh; }
*/}
h1,
h2,
h3,
h4,
h5,
h6,
h7,
p,
ul,
ol { font-family: "AvenirLTStd Roman"; }
h1 { font-family: "AvenirLTStd Black"; font-size: 1.4em; color: #FAB343; margin-bottom: 1em; }
h2 { font-size: 1.2em; color: #FAB343; }
h3 { font-size: 1.1em; color: #FAB343; }
p { color: #485259; }
/* 1 - MENU */

#menu { background: #fff; padding: 0; }
#menu .top-bar { background: #fff; max-width:100%; }
#menu .top-bar-section { padding: 0 1em; }
.top-bar-section ul li {
    background: none;
}
#menu .top-bar-section ul li::before { content: url("../img/icon_arrow.png"); position: absolute; padding-top: 15px; }
#menu .top-bar-section ul li > a { color: #485259;}
@media only screen and (min-width: 40em) 
{#menu .top-bar-section ul li > a { padding-right:3em;}
}
.fixed { left: auto; }
#menu .top-bar-section li:not(.has-form) a:not(.button) { background: #fff; }
#menu .top-bar-section li:not(.has-form) a:not(.button):hover { background-color: #fff; background: #fff; }
#menu img { max-height: 3em; margin-right: 2em; }
/* Mobile */
#menu .top-bar .toggle-topbar.menu-icon a { color: #485259; }
#menu .top-bar .toggle-topbar.menu-icon a span::after { box-shadow: 0 0 0 1px #485259, 0 7px 0 1px #485259, 0 14px 0 1px #485259; }
#menu .top-bar.expanded .title-area { background: #FFF; }
/* 2 - TOP */
#top { padding: 0; }
#top img { min-width: 100%; min-height: 100%; }
#foto { height: 100vh; display: block; background: url(../img/DOEN_Development_top.png); background-size: cover; background-repeat: no-repeat; background-position: center; position:relative;}

#foto #text {display:block; position:absolute; bottom:8em; left:2em;}
#foto p{font-family: "AvenirLTStd Black"; color:#FAB343; font-size:5em; line-height:1em; text-shadow: 0px 0px 5px #666;}
#foto p.bigger{ font-size:10em; margin:0 0 0 0 ;}
@media only screen and (max-width: 40em) 
{
	#foto #text {bottom:10em; left:2em;}
	#foto p{font-size:2em; line-height:1em; }
	#foto p.bigger{ font-size:3em; margin:1em 0 0 0 ;}
}

/* 3 - WAAROM */
#waarom { background: #FAB343; }
#waarom h1 { color: #fff; }
#waarom p { margin-right: 1em; }
#waarom img { width: 100%; }
#waarom .waarom_img{ 
background-image: url(../img/DOEN_Development_waarom.png);
background-repeat: no-repeat;
background-size: cover;
background-position: right top;
}
#waarom { }
/* 4 - WANNEER */
#wanneer { background: #FFF; }
#wanneer img { width: 100%; }
#wanneer .wanneer_img{ 
background-image: url(../img/DOEN_Development_wanneer.png);
background-repeat: no-repeat;
background-size: cover;
background-position: right top;
}

.space-l { padding-left:3em;}
@media only screen and (max-width: 40em) 
{.space-l { padding-left:0.9375em;}
}

/* 5 - STAATVOOR */
#staatvoor { background: #FEF7EC; }
#staatvoor .icon img { width: 6em; margin: auto auto; display: block; margin-bottom: 1em; }
#staatvoor .icon p { font-family: "AvenirLTStd Black"; text-align: center; }
#staatvoor img { width: 100%; }

#staatvoor .staatvoor_img{ 
background-image: url(../img/DOEN_Development_staat_voor.png);
background-repeat: no-repeat;
background-size: cover;
background-position: right top;
}


#staatvoor { }
#staatvoor { }
/* 6 - CONTACT */
#contact { background: #FBB344; background-size: cover; }
#contact h1 { color: #485259; }
@media only screen and (min-width: 40em) {
/*#contact h1 { margin-top: 2em; }*/
}
#contact form { }
#contact form .columns { padding: 0; }
#contact button,
.button { position: relative; }
#contact { }
/* 7 - FOOTER */
#footer { background: #485259; padding-bottom: 1em; }
#footer img.logo { max-height: 3em; margin-right: 1em; }
#footer img.f-icon1 { width: 1.4em; margin-right: 1em; }
#footer img.f-icon2 { height: 1.4em; margin-right: 1em; }
#footer ul { list-style: none; }
#footer li { color: #FAB343; float: left; margin-left: 1em; line-height: 3em; }
#footer a { color: #FAB343; }
#footer a:hover,
#footer a:active,
#footer a:focus,
#footer a:visited { color: #FAB343; text-decoration: underline; }
#footer { }
/* 8 - FORMS & BUTTONS */
input:not([type]),
input[type="text"],
input[type="password"],
input[type="date"],
input[type="datetime"],
input[type="datetime-local"],
input[type="month"],
input[type="week"],
input[type="email"],
input[type="number"],
input[type="search"],
input[type="tel"],
input[type="time"],
input[type="url"],
input[type="color"],
textarea { -webkit-border-radius: 5px; border-radius: 5px; }
button,
.button { background: rgba(157,0,85,1); bottom: 0; /*position: absolute;*/
margin: 1em 0 0 0; -webkit-border-radius: 5px; border-radius: 5px; }
button:hover,
.button:hover { background: rgba(157,0,85,.75); }

/* 9 - LOGO SLIDER */