@import url('https://fonts.googleapis.com/css?family=Athiti:400,600|Open+Sans:400,600,700');

html, body { min-height: 100% }
body { font-family: 'Athiti', sans-serif; }
body { font-size: 1.2rem; line-height: 2rem; }
.embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; }
.embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

#panel { min-height: 100vh; display: flex; flex-direction: column; }

.background { background-attachment:fixed; z-index: -1; position: fixed; left: 0; top: 0; width: 100%; height: auto; background-size: cover; background-position: center; background-repeat: no-repeat; min-height: 100%;  }
.background { background-image : url('/_img/home.jpg');} /* default image */
.professioneel .background { background-image : url('/_img/professionals.jpg');}
.expertise .background { background-image : url('/_img/expertise.jpg');}
.inliner .background { background-image : url('/_img/inliner.jpg');}
.partliner .background { background-image : url('/_img/partliner.jpg');}
.renovatie .background { background-image : url('/_img/renovatie.jpg');}
.contact .background { background-image : url('/_img/contact.jpg');}

/* HEADER */
header { background-color : #91d2fa }
/*header { position: sticky; top: 0; z-index: 2;}*/


/* NAVS */
.navbar-subnet { padding: 130px 0 7px 0; font-size: 14px }
.navbar-subnet .navbar-nav .nav-link { font-family: 'Open Sans', sans-serif; color: #575656; text-transform: uppercase; padding: 6px 0 5px 0; font-weight: 400 }
.navbar-subnet .navbar-nav .nav-item { position: relative }
.navbar-subnet .navbar-nav .nav-item:hover:before,
.navbar-subnet .navbar-nav .nav-item.active:before {content : "";position: absolute;bottom  : 0;height  : 1px;width : 40px;border-bottom: 5px solid #0075be; left: 50%;transform: translateX(-50%);}
.navbar-subnet .navbar-toggler { position : relative; border-color:#575656; color:#575656; font-size: 1.25rem;line-height: 1;background-color: transparent; border: 1px;}
.navbar-subnet .navbar-toggler-icon { background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255, 255, 255, 1)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");}

/* LOGO */
.logo-link { position : absolute }

/* MAIN */
main { background-color: rgba(40, 48, 62, 0.72); flex: 1 0 auto; padding-bottom : 100px }
.projecten main { background-color: #28303e }

/* CONTENT */
.content { color: #FFF; text-align: center; padding-top : 90px; line-height: 2.4rem }
.content h1 { font-size: 45px; font-weight:600; margin-bottom: 2rem }
.content h1 .subtitle { font-weight: 400 }
.content a { color: inherit; font-style: italic }
.content a:hover { color : inherit }
.content ul { padding-left: 23px; }
.content img { width: 100% !important; max-width: 100%; height: auto !important }

.projectlist .project .btn-link { color: inherit }
.projectlist .project { display : block; position: relative; font-style: normal; text-decoration: none; background-size: cover; background-repeat: no-repeat;  }
.projectlist .project:after { content: ""; display: block; padding-bottom: 100%; }
.projectlist .project:hover > div { text-decoration: none; background-color: rgba(0, 117, 190, 0.72); }
.projectlist .project > div { font-size: 16px; line-height: 18px; position: absolute; left: 0; top: 0; right: 0; bottom: 0; background-color: rgba(40, 48, 62, 0.72); padding: 80px 20px 20px 20px; }
.projectlist .project > div h2 { line-height: 28px; font-size: 23px; font-weight: 600; margin-bottom: 0; height: 55px }
.projectlist .project > div h3 { line-height: 28px; font-size: 23px; font-weight: 400; height: 75px; }
.projectlist .project > div p { height : 50px; }
.projectlist .project > div .btn-link { font-style: italic }

/* FOOTER */
footer { background-color: #FFF; position: sticky; bottom : 0  }
footer .gradient2 { width : 100%; height: 100% }
.footerright { position: relative; min-height: auto}

/* BUTTON */
.button { transition: all 0.2s; font-family: 'Open Sans', sans-serif; display: block; background-color: #179a3c; color: #FFF; position: absolute; padding: 5px 10px; bottom: 10px; font-size: 14px; white-space: nowrap; text-align: center; text-transform: uppercase; line-height: 40px }
.button .tel { font-size: 24px; font-weight: 600 }
.button:hover { background-color: #17B43E; color : #FFF; text-decoration: none; }

/* ADMIN */
#admindiv { display:none; background-color:#eeeeee; filter:alpha(opacity=75); -moz-opacity:.75; opacity:.75; position:fixed; border:1px solid #000; width : 250px;top : 0px; left: 10px; z-index: 2000; font-size: 11px; line-height: 14px; }
#admindiv .header { padding:2px; background-color:#e32322; color:#FFF; font-weight:bold; background-image : url(/_images/generic/sitemanager.png); background-repeat : no-repeat; background-position : 232px 0px; height : 15px;border-bottom : 1px solid #000; }
#admindiv .header SPAN A { color:#FFF; font-weight:bold; text-decoration : none; }
#admindiv .body { padding:4px; color : #000; }
#admindiv .body A { color : #000; font-weight : bold; }
#admindiv .body LI { list-style: none; }
.edit { color : #000; position : absolute; margin-left: -20px; margin-top: -20px; }
.editbtn { position : absolute; margin: 0; padding: 0; margin-left: -12px !important; margin-top: -12px !important; display : inline !important; }

@media (min-width: 1024px) {
    #admindiv { display : block }
}

@media (min-width: 576px)
{
    .button { font-size: 20px; line-height: 40px; padding: 10px 20px; }
    .button .tel { font-size: 40px;  }
}
@media (min-width: 768px)
{

}

@media (min-width: 992px)
{
    footer .gradient1 {background: #fff;background: -moz-linear-gradient(left, #b3acad 0%, #ebe9e9 100%);background: -webkit-linear-gradient(left, #b3acad 0%,#ebe9e9 100%);background: linear-gradient(to right, #b3acad 0%,#ebe9e9 100%);filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b3acad', endColorstr='#ebe9e9',GradientType=1 );}
    footer .gradient2 {background: #fff;background: -moz-linear-gradient(left, #ebe9e9 0%, #a1999a 100%);background: -webkit-linear-gradient(left, #ebe9e9 0%,#a1999a 100%);background: linear-gradient(to right, #ebe9e9 0%,#a1999a 100%);filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ebe9e9', endColorstr='#a1999a',GradientType=1 );}
    footer .gradient2 { width : 89%; height: 100% }
    .footerright { position: relative; min-height: 90px}
}


.slideout-menu {position: fixed;top: 0;bottom: 0;width: 256px;min-height: 100vh;overflow-y: scroll;-webkit-overflow-scrolling: touch;z-index: 0;display: none;}
.slideout-menu-left {left: 0;}
.slideout-menu-right {right: 0;}
.slideout-panel {position: relative;z-index: 1;will-change: transform;background-color: transparent; /* A background-color is required */min-height: 100vh;}
.slideout-open, .slideout-open body, .slideout-open .slideout-panel {overflow: hidden;}
.slideout-open .slideout-menu {display: block;}

.menu { background: #2C2F3C;background: -moz-linear-gradient(top, #2C2F3C 4%, #4C5367 97%);background: -webkit-linear-gradient(top, #2C2F3C 4%,#4C5367 97%);background: linear-gradient(to bottom, #2C2F3C 4%,#4C5367 97%);filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2C2F3C', endColorstr='#4C5367',GradientType=0 )}
.menu { padding-bottom : 40px; padding-top: 20px }
.menu a {color: #fff;}
.menu a:hover {text-decoration: underline;}
.menu-section {margin: 25px 0;}
.menu-section-title {text-transform: uppercase;color: #85888d;font-weight: 200;font-size: 13px;letter-spacing: 1px;padding: 0 20px;margin:0;}
.menu-section-list {padding:0;margin: 0 0 0 0;list-style:none;}
.menu-section-list.submenu { padding-left: 20px }
.menu-section-list a {display: block;padding: 10px 20px;}
.menu-section-list a:hover {background-color: rgba(255, 255, 255, 0.1);text-decoration: none;}

.nolinelink a, .nolinelink a:hover { text-decoration: none !important; border: 0 !important }
.font-bigger { font-size: 1.1rem }

/* COOKIE BAR */
#cookie-bar { background:#111111; height:auto; line-height:40px; color:#eeeeee; text-align:center; padding:3px 0;z-index: 999}
#cookie-bar.fixed {position:fixed; top:0; left:0; width:100%;}
#cookie-bar.fixed.bottom {bottom:0; top:auto;}
#cookie-bar p {margin:0; padding:0;}
#cookie-bar a {color:#ffffff; display:inline-block; border-radius:3px; text-decoration:none; padding:0 6px; margin:10px 0 10px 8px;}
#cookie-bar .cb-enable {background:#007700;}
#cookie-bar .cb-enable:hover {background:#009900;}
#cookie-bar .cb-disable {background:#990000;}
#cookie-bar .cb-disable:hover {background:#bb0000;}
#cookie-bar .cb-policy {background:#0033bb;}
#cookie-bar .cb-policy:hover {background:#0055dd;}