@import url('https://fonts.googleapis.com/css2?family=PT+Sans:wght@400;700&display=swap');

html, body { height: 100%; min-height: 100%; color: #646466; font-size: 1rem }
body { font-family: 'PT Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" }

h1 { font-size: 36px; font-weight: 400; margin-bottom: 25px; color: #646466  }
h1 strong { font-weight: 700 }
h1 small { font-size: 12px;  }
h2 { font-size: 20px; color: inherit; font-weight: 700; margin-bottom: 1.6rem; line-height: 140% }
h3 { font-size: 18px; font-weight: 700; margin-bottom: 1rem; background-color: #f5d300; min-width: 100px; display: inline-block; padding: 5px 10px 5px 10px; color: #000; text-align: center }
UL { margin : 0 0 1.6rem 0; padding: 0 0 0 1.4rem  }
P { margin-bottom: 1.6rem  }
A { color: inherit; text-decoration: underline }
A:hover { color: inherit }
main { margin-bottom : 50px }

header { background-color: #f5d300; position: relative }

.bg-geel { background-color: #f5d300; position: relative; color: #000 }
.bg-geel h1 { color: #000; font-weight: 700 }

.btncontainer { margin-top: 70px }
.btn { padding: 5px 10px; text-decoration: none; color: #fff; background-color: #2c2c53; border: 0; border-radius: 0  }
.btn:hover { color: #FFF }
.btn-grijs { background-color: #5e5e5b; color: #FFF }
.btn-groot { font-size: 30px; padding: 10px 20px;  }
.btn-rechts {  position: absolute; bottom: 20px; right : 20px;  }

.competitie-blok { background-color: #e1dfdf; padding: 20px 15px; display: block; text-decoration: none; text-align: center; font-size: 20px; line-height: 26px; color: #000 }
.competitie-blok:hover { text-decoration: none }
.competitie-blok h2 { font-size: 28px; font-weight: 700; margin-bottom: 10px; color: #000 }
.competitie-blok h3 { background-color: transparent; font-size: 28px; font-weight: 400; margin-bottom: 25px; color: #000 }

/* NAVBAR */
.navbar { justify-content: flex-end; }
.navbar-light .navbar-nav .nav-link { padding: 10px 1rem; text-transform: uppercase; text-decoration: none; color: #000; font-weight: bold; font-size: 16px; }
.navbar-light .navbar-nav .nav-link:focus, .navbar-light .navbar-nav .nav-link:hover {color: rgba(0,0,0,.6);}
.nav-item.active { background-color: #000; margin-right: 15px }
.navbar-light .navbar-nav .nav-item.active .nav-link  { color: #FFF }
.navbar-light .navbar-toggler {position: relative; margin: 20px 0;}
.navbar-collapse { text-align: right; font-size: 20px; line-height: 34px; }
.navbar-collapse.collapsing .navbar-nav, .navbar-collapse.show .navbar-nav { padding-top : 40px; padding-bottom: 40px; }

/* SUBMENU */
.down { position : absolute; bottom : 20px; font-size: 0.9rem; color : #222c33 }
.down:hover { color: rgba(0, 0, 0, 0.7) }

/*.dropdown:hover > .dropdown-menu { display: block; }*/
/*.active .dropdown-menu { display : block }*/
.dropdown-menu { /*display: block;*/ padding: 0; margin: 0; min-width: 11rem; font-size: 0.9rem;color: #000; background-color: #f5d300; border: 0; border-radius: 0; }
.dropdown-menu .dropdown-item { color: #000; font-weight: bold; font-size: 16px; text-decoration: none; padding: 10px 15px 10px 10px; text-align: right; }
.dropdown-menu .dropdown-item:focus { background-color: black; color: #FFF }
.dropdown-menu .dropdown-item.active,
.dropdown-menu .dropdown-item:active { color: #FFF !important;text-decoration: none;background-color: black;}
.dropdown-menu .dropdown-item:hover { color: rgba(0,0,0,.6); text-decoration: none; background-color: #f5d300;}
.dropdown-menu .dropdown-item:hover.active,
.dropdown-menu .dropdown-item:active:hover { color: #FFF !important;text-decoration: none;background-color: black; }

/* HEADER FOTO */
.headerfoto { background-image: url('/_img/header.jpg'); height: 320px; background-repeat: no-repeat; background-size: cover; background-position: center center; }

.padcontent { padding: 35px 15px }
.content { line-height: 170% }
.nolinelink { text-decoration: none }

.row.smaller-gutter > .col, .row.smaller-gutter > [class*="col-"] { padding-right: 5px; padding-left: 5px; }

.logo { background-color: rgba(255, 255, 255, 0.85); position: relative; top: -160px; margin-bottom: -145px; width: calc(100% + 60px); left: -30px; padding: 30px 30px 0 30px }

footer { background-color: #4c4c4c; color: #FFF }
footer h2 { font-size: 24px; font-weight: 300 }
.footernav a { text-decoration: none }

.news--image { background-size: cover; background-position : center;}
.news--image:after { content: ""; display : block; padding-bottom : 80% }
.news--text a { color: #000; font-weight: 700; font-style: italic; text-decoration: none }

/* CALENDER */
.cal--item { margin-bottom : 25px }
.cal--item .cal--dag,
.cal--item--wide .cal--dag { position: absolute; font-size: 50px; text-align: center; color: #FFF; background-color: #f5d300; width: 75px; min-width: 75px; height: 65px; line-height : 65px; font-weight: bold; }
.cal--item .cal--dag-rood,
.cal--item--wide .cal--dag-rood { background-color: #db0000 }
.cal--item .cal--dag-grijs,
.cal--item--wide .cal--dag-grijs { background-color: #646464 }
.cal--item .cal--header { padding-left : 85px; }
.cal--item .cal--box { border: 2px solid #999; margin-left: 37px }
.cal--item .cal--box .cal--boxheader { padding-left : 45px; padding-bottom: 10px }
.cal--item .cal--box .cal--text { padding: 20px 20px 0 20px }
.cal--item .cal--box .cal--text p { margin-bottom : 15px; }

/* CALENDAR WIDE */
.cal--item--wide {  }
.cal--item--wide .cal--dag { position: relative; height: auto; }
.cal--item--wide .cal--container { background-color: #E5E5E5 }

/* ADMIN */
#admindiv { display : none; background-color:#eeeeee; filter:alpha(opacity=75); -moz-opacity:.75; opacity:.75; position:fixed; border:1px solid #000; width : 250px; left : 10px; top: 10px; z-index: 1000; }
#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 0; height : 25px; border-bottom : 1px solid #000; }
#admindiv .header SPAN A { color:#FFF; font-weight:bold; text-decoration : none; }
#admindiv .body { padding:4px; }
#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;cursor:help; }
span.editbtn { cursor:help; position : absolute; width : 22px; height : 11px; margin: 0; padding: 0; margin-left: -12px !important; margin-top: -12px !important; display : inline !important; }

/* MEDIA QUERIES */
@media (min-width: 992px){
    .navbar-expand-lg .navbar-nav .nav-link {padding-right: 1rem; padding-left: 1rem;}
    .navbar-collapse { text-align: right; font-size: 14px; line-height: 1.2; }
    .navbar-light .navbar-nav .nav-link { padding: 30px 1rem; text-transform: uppercase; text-decoration: none; color: #000; font-weight: bold; font-size: 16px; }
    .dropdown-menu { display: none; }
    .dropdown-menu .dropdown-item { padding: 10px 15px 10px 15px; text-align: left; }
    .navbar-collapse.collapsing .navbar-nav, .navbar-collapse.show .navbar-nav { padding-bottom: 0; padding-top: 40px; }
    #admindiv { display : block }
    }

@media (min-width: 768px){
    .navbar-collapse { text-align: right; font-size: 14px; line-height: 1.2; }
}

@media (min-width: 576px) {
}


@media (max-width: 992px){
    .nav-item.active {background-color: inherit;margin-right: 15px;}
    .nav-item.active > .nav-link { background-color: #000 }
    .nav-item .nav-link { display : inline-block; }
    .dropdown-item { width: auto; display: inline-block; }
    .dropdown-menu { text-align: right }
    .dropdown-menu .dropdown-item.active:hover {color: #000; background-color: #000;}
    .navbar-collapse.collapsing .navbar-nav, .navbar-collapse.show .navbar-nav { padding-bottom: 40px; padding-top: 0px; }
    .headerfoto { height: 150px;  }
}