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

/*
*:not(path):not(g) {
    color:                    hsla(210, 100%, 100%, 0.9) !important;
    background:               hsla(210, 100%,  50%, 0.5) !important;
    outline:    solid 0.25rem hsla(210, 100%, 100%, 0.5) !important;
    box-shadow: none !important;
}
*/
html, body { min-height : 100%; height: 100vh }
body { font-family: 'Open Sans', sans-serif; }
body { background: #666 url('/img/background-home.jpg') no-repeat center center fixed;-webkit-background-size: cover;-moz-background-size: cover;-o-background-size: cover;background-size: cover; }
body { height: 100%; min-height:100vh; display: flex; flex-direction: column; }

body.contact { background-image: url('/img/background-contact.jpg') }

.content {font-family: 'Athiti', sans-serif;}

header { background-size: 50% 75px; background-color: #FFF; background-image: url('/img/rainbow-fill.jpg'); background-repeat: no-repeat; background-position: right bottom; }
header .container { background-image: url('/img/regenboog.png'); background-repeat: no-repeat; background-position: center 269px; }
header h2 { font-size: 74px; font-weight: 300; text-transform: uppercase }
/*header  { overflow-y: hidden }*/
header .header { display: flex; flex-direction: column; justify-content: flex-end}
header .header > div { padding-left: 1rem }
header .logo { border-right: 1px solid #000; }
header .logo img { margin-bottom : 2rem; padding-top : 3rem; }
header .logo .row { justify-content: center}

header h2 { text-align: right }
header nav { margin-bottom: 0.5rem }
header nav ul { list-style: none; margin: 0; padding: 25px 0 0 0; display : flex; justify-content: flex-end; } /*37*/
header nav ul > li { padding: 0 0 0 1.2rem }
header nav a { color: inherit; text-transform: uppercase; opacity: 0.8; white-space: nowrap }
header nav a.active { font-weight: 600;opacity: 1; }
header nav a:hover { color: inherit; text-decoration: none; opacity: 1; }

#rainbow { height:75px; position: relative; color: #FFF; font-size: 14px; }
/*
#rainbow:after{ content: ''; height: 75px; display : block; background-image : url('/img/rainbow-fill.jpg'); width: calc(100% - 223px); position:absolute; left: 100%; top:0  }
*/

main { flex: 1 0 auto; display : flex; background: url('/img/regenboog.png') no-repeat center -76px; position: relative }
main .container { background-color: rgba(255, 255, 255, 0.8); flex: 1 0 auto; display: flex; z-index: 1 }
main .container > .row { flex: 1 1 auto }
main .subnav { padding-top : 90px;  padding-bottom : 30px; border-right: 1px solid #000; font-size: 14px;  }
main .subnav ul { list-style: none; margin: 0; padding: 0 }
main .subnav ul > li { padding: 0 0 1.5rem 0 }
main .subnav ul li.active a { font-weight: 600 }
main .subnav a { color: inherit; text-transform: uppercase}
main .subnav a.active { color: inherit; font-weight: bold; }
main .subnav a:hover { color: inherit; text-decoration: none; font-weight: bold }
main .content {  padding-top : 81px;  padding-bottom : 30px; }
main .content > div { padding-left: 1rem } 
main:before { content: ''; height: 75px; display : block; background-image : url('/img/rainbow-fill.jpg'); width: 50vw; position:absolute; top:205px; z-index: -1  }

.content { font-size: 18px; }
.content h1 { font-size: 32px;  font-family: 'Open Sans', sans-serif; font-weight: 400; margin-bottom : 2rem }
.content h2 { font-size: 26px;  font-family: 'Open Sans', sans-serif; font-weight: 400; margin-bottom : 1.4rem }
.content img { max-width : 100% !important; height: auto !important }

footer { background-color : #FFF; padding: 0.5rem 0; font-size: 90%; color: #666;  }
footer a { color: inherit; text-transform: lowercase }
footer a:hover, footer a.active { color: #000; text-decoration: none; }

.btn.aanmelden { position: absolute; top: 126px; left: -15px; background-image: url('/img/button.png'); width: 195px; height: 80px; background-repeat: no-repeat; color: #fff; padding: 20px 0 0 30px; text-align: left; text-transform: uppercase }
.btn.aanmelden:focus { box-shadow: none; }

@media (max-width: 1200px) {
    header { background-position-y: 269px }
}

@media (max-width: 992px) {
    /*header .container { background-position-y: 255px }*/
    .btn.aanmelden { position: absolute; top: 50px;}
}

@media (max-width: 768px) {
    header { background-position-y: 255px; background-image: none }
    header h2 { font-size: 50px; margin-bottom: 1rem }
    header h2 { text-align : right }
    #rainbow { display : none }
    #rainbow:after { display : none }
    main { background-image : none }
    main:before { display : none }
}

@media (max-width: 576px) {
    header { background: #FFF none }
    header .logo { border-right: 0px solid #000; }
    main { background-image: none }
    main .subnav { padding-top : 20px;  padding-bottom: 20px; border-right: 0 solid #000; background-color: #FFF; border-top: 1px solid #000; border-bottom: 1px solid #000  }
    main .subnav ul > li { padding: 0 0 1em 0 } 
    main .content { padding-top: 20px; padding-bottom: 20px; }
    header h2 { font-size: 40px; margin-bottom: 1rem }
    header h2 { text-align : center }
    #admindiv { display : none }
    header .header > div { padding-left: 0; }
    .btn.aanmelden { display : none }
}


/* ADMIN */
#admindiv { 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; }
A.editbtn { position : absolute; width : 22px; height : 11px; margin: 0; padding: 0; margin-left: -12px !important; margin-top: -12px !important; display : inline !important; }


.flex-center {display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;-webkit-box-pack: center;-ms-flex-pack: center;justify-content: center;}
.outer-menu {position: fixed;top: 1vh;right: 0;z-index: 11;}
.outer-menu .checkbox-toggle {position: absolute;top: 0;right: 0;z-index: 12;cursor: pointer;width: 60px;height: 60px;opacity: 0;}
.outer-menu .checkbox-toggle:checked + .hamburger > div {-webkit-transform: rotate(135deg);transform: rotate(135deg);}
.outer-menu .checkbox-toggle:checked + .hamburger > div:before, .outer-menu .checkbox-toggle:checked + .hamburger > div:after {top: 0;-webkit-transform: rotate(90deg);transform: rotate(90deg);}
.outer-menu .checkbox-toggle:checked + .hamburger > div:after {opacity: 0;}
.outer-menu .checkbox-toggle:checked ~ .menu {pointer-events: auto;visibility: visible;}
.outer-menu .checkbox-toggle:checked ~ .menu > div {-webkit-transform: scale(1);transform: scale(1);-webkit-transition-duration: .75s;transition-duration: .75s;}
.outer-menu .checkbox-toggle:checked ~ .menu > div > div {opacity: 1;-webkit-transition: opacity 0.1s ease 0.1s;transition: opacity 0.1s ease 0.1s;}
.outer-menu .checkbox-toggle:hover + .hamburger {-webkit-box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.1);box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.1);}
.outer-menu .checkbox-toggle:checked:hover + .hamburger > div {-webkit-transform: rotate(225deg);transform: rotate(225deg);}
.outer-menu .hamburger {position: absolute;top: 0;right: 0;z-index: 11;width: 60px;height: 60px;padding: .5em 1em;background: rgba(0, 0, 0, 0.6);border-radius: 0 0.12em 0.12em 0;cursor: pointer;-webkit-transition: -webkit-box-shadow 0.1s ease;transition: -webkit-box-shadow 0.1s ease;transition: box-shadow 0.1s ease;transition: box-shadow 0.1s ease, -webkit-box-shadow 0.1s ease;-webkit-backface-visibility: hidden;backface-visibility: hidden;display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;-webkit-box-pack: center;-ms-flex-pack: center;justify-content: center;}
.outer-menu .hamburger > div {position: relative;-webkit-box-flex: 0;-ms-flex: none;flex: none;width: 100%;height: 2px;background: #FEFEFE;-webkit-transition: all 0.1s ease;transition: all 0.1s ease;display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;-webkit-box-pack: center;-ms-flex-pack: center;justify-content: center;}
.outer-menu .hamburger > div:before, .outer-menu .hamburger > div:after {content: '';position: absolute;z-index: 1;top: -10px;left: 0;width: 100%;height: 2px;background: #FEFEFE;-webkit-transition: all 0.1s ease;transition: all 0.1s ease;}
.outer-menu .hamburger > div:after {top: 10px;}
.outer-menu .menu {position: fixed;top: 0;left: -100vw;width: 300vw;height: 100%;pointer-events: none;visibility: hidden;overflow: hidden;-webkit-backface-visibility: hidden;backface-visibility: hidden;outline: 1px solid transparent;display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;-webkit-box-pack: center;-ms-flex-pack: center;justify-content: center;}
.outer-menu .menu > div {width: 300vw;height: 300vw;color: #FEFEFE;background: rgba(0, 0, 0, 0.9);border-radius: 50%;-webkit-transition: all 0.2s ease;transition: all 0.2s ease;-webkit-box-flex: 0;-ms-flex: none;flex: none;-webkit-transform: scale(0);transform: scale(0);-webkit-backface-visibility: hidden;backface-visibility: hidden;overflow: hidden;display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;-webkit-box-pack: center;-ms-flex-pack: center;justify-content: center;}
.outer-menu .menu > div > div {text-align: center;max-width: 90vw;max-height: 100vh;opacity: 0;-webkit-transition: opacity 0.1s ease;transition: opacity 0.1s ease;overflow-y: auto;-webkit-box-flex: 0;-ms-flex: none;flex: none;display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;-webkit-box-pack: center;-ms-flex-pack: center;justify-content: center;}
.outer-menu .menu > div > div > ul {list-style: none;padding: 0 1em;margin: 0;display: block;max-height: 100vh;}
.outer-menu .menu > div > div > ul > li {padding: 0;margin: 1em;font-size: 24px;display: block;}
.outer-menu .menu > div > div > ul > li > a {position: relative;display: inline;cursor: pointer;-webkit-transition: color 0.1s ease;transition: color 0.1s ease;color: #FFF;}
.outer-menu .menu > div > div > ul > li > a:hover {color: #e5e5e5;text-decoration: none;} 

/* 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;}