/* ===== General settings ===== */
/* ================================================== */
/* ================================================== */

html {
    color: #222;
    font-size: 1em;
    line-height: 1.4;
    background-color: WHITE;
    position: relative;
    min-height: 100%;
}

html body {
    background-color: transparent;
    font-family: 'exo_2regular_condensed', arial , helvetica, sans-serif;
}

section {
    display: block;
    position: relative;
    width: 100%;
    height: auto;
    margin: 0 auto;
    padding-top: 20px;
    padding-right: 0;
    padding-bottom: 20px;
    padding-left: 0;
    text-align: left;
}

#index section {
    text-align: center;
}

.container {
    width: 90%;
    margin: 0 auto;
    max-width: 1280px;
}

article {
    background-color: transparent;
    text-align: left;
    box-sizing: border-box;
    width: 100%;
    padding: 20px;
    margin: 20px 0;
}

#index article {
    text-align: center;
}

article.transparent {
    position: relative;
    z-index:1;
}

article.transparent:before {
    content:"";
    position:absolute;
    z-index:-1;
    top:0;
    bottom:0;
    left:0;
    right:0;
    background-color:#cc0000;
    opacity:0.65;
    border-radius:10px;
}

img#affiche {
    max-width: 100%;
    box-shadow: 5px 5px 10px #cccccc;
}




















/* ===== Typo settings ===== */
/* ================================================== */
/* ================================================== */

section article h1 {
    font-size: 2em;
/*    margin: 0.67em 0;*/
    margin: 1.34em 0;
    word-wrap: normal;
    -webkit-hyphens: manual;
    -moz-hyphens: manual;
    -ms-hyphens: manual;
    hyphens: manual;
}

section article h2 {
    font-size: 1.5em;
/*    margin: 0.62em 0;*/
    margin: 1.24em 0;
    word-wrap: normal;
    -webkit-hyphens: manual;
    -moz-hyphens: manual;
    -ms-hyphens: manual;
    hyphens: manual;
}

section article h3 {
    font-size: 1.17em;
/*    margin: 0.58em 0;*/
    margin: 1.16em 0;
    word-wrap: normal;
    -webkit-hyphens: manual;
    -moz-hyphens: manual;
    -ms-hyphens: manual;
    hyphens: manual;
}

section article h4 {
    font-size: 1em;
/*    margin: 0.66em 0;*/
    margin: 1.32em 0;
    word-wrap: normal;
    -webkit-hyphens: manual;
    -moz-hyphens: manual;
    -ms-hyphens: manual;
    hyphens: manual;
}

section article h5 {
    font-size: 0.83em;
/*    margin: 0.69em 0;*/
    margin: 1.38em 0;
    word-wrap: normal;
    -webkit-hyphens: manual;
    -moz-hyphens: manual;
    -ms-hyphens: manual;
    hyphens: manual;
}

section article h6 {
    font-size: 0.67em;
/*    margin: 0.78em 0;*/
    margin: 1.56em 0;
    word-wrap: normal;
    -webkit-hyphens: manual;
    -moz-hyphens: manual;
    -ms-hyphens: manual;
    hyphens: manual;
}

section article p,
section article ul,
section article ol {
    font-size: 1em;
/*    margin: 0.66em 0;*/
    margin: 1.32em 0;
    word-wrap: normal;
    -webkit-hyphens: manual;
    -moz-hyphens: manual;
    -ms-hyphens: manual;
    hyphens: manual;
}

section article dt {
    font-size: 1.17em;
/*    margin: 0.58em 0;*/
    margin: 1.16em 0;
    word-wrap: normal;
    -webkit-hyphens: manual;
    -moz-hyphens: manual;
    -ms-hyphens: manual;
    hyphens: manual;
    font-weight: bold;
}

address {
    font-style: normal;
}

ul.indent30 {
    margin-left: 30px;
}

ul.listInText {
    text-align: center;
    display: inline-block;
}

ul.listInText li {
    text-align: left;
}



















/* ===== Link settings ===== */
/* ================================================== */
/* ================================================== */

h1 a,
h2 a,
h3 a,
h4 a,
h5 a,
h6 a {
    color: inherit;
    text-decoration: none;
}

h1 a:hover,
h2 a:hover,
h3 a:hover,
h4 a:hover,
h5 a:hover,
h6 a:hover {
    color: inherit;
    text-decoration: none;
}

article a {
    color: inherit;
}

article a:hover {
    color: #cc0000;
}



address a {
    color: inherit;
}

address a:hover {
    color: #cc0000;
}



footer a {
    color: inherit;
}

footer a:hover {
    color: #cc0000;
}

a.back-to-top {
	display: none;
	width: 40px;
	height: 40px;
	text-indent: -9999px;
	position: fixed;
	z-index: 999;
	right: 20px;
	bottom: 20px;
	background: #222222 url("../img/up-arrow.png") no-repeat center 43%;
	-webkit-border-radius: 20px;
	-moz-border-radius: 20px;
	border-radius: 20px;
}

a:hover.back-to-top {
	background-color: #cc0000;
}

a.button {
    display: inline-block;
    width: auto;
    padding: 12px 24px;
    text-align: center;
    outline: none;
    text-decoration: none;
    background-color: #222222;
    color: #ffffff;
    border: none;
    border-radius: 20px;
    margin: 5px;
}

a.button:hover,
a.button:active {
    background-color: #cc0000;
    color: #ffffff;
}
















/* ===== section 'navigation' settings ===== */
/* ================================================== */
/* ================================================== */


section#navigation {
    padding: 0;
    z-index: 9999;
}


#mobileNavigationWrapper {
    position: relative;
    z-index:1;
    padding: 10px 20px 0px 20px;
    background-color: white;
}

/*
#mobileNavigation:before {
    content:"";
    position:absolute;
    z-index:-1;
    top:0;
    bottom:0;
    left:0;
    right:0;
    background-color:#ffffff;
    opacity:0.5;
    border-radius:0px;
}
*/

#desktopNavigationWrapper {
    position: relative;
    z-index:1;
    padding: 20px 0;
    background-color: white;
}

/*
#desktopNavigation:before {
    content:"";
    position:absolute;
    z-index:-1;
    top:0;
    bottom:0;
    left:0;
    right:0;
    background-color:#ffffff;
    opacity:0.5;
    border-radius:0px;
}
*/


/*hide the desktop navigation and show the mobile navigation*/
#desktopNavigationWrapper {
    display:none;
}

#mobileNavigationWrapper {
    display:block;
}





/*logo settings*/
.mobileLogo {
    width: auto;
    height: auto;
    float: left;
}

.mobileLogo img{
    width: 154px;
    height: 98px;
}


.desktopLogo {
    width: 220px;
    height: 140px;
    float: left;
    margin-left: 5%;
}

.desktopLogo img {
    width: 220px;
    height: 140px;
}





/*general header nav settings*/
nav .current {
    cursor: default;
}

nav ul {
    padding-left: 0;
}

nav li {
    list-style: none;
}

nav li a {
    text-decoration: none;
}





/*mobile header nav settings*/
div.slicknav_menu {
    background-color: transparent;
    padding-left: 0px;
    padding-right: 0px;
}

ul.slicknav_nav a {
    margin-left: 0px;
    margin-right: 0px;
}

div.slicknav_menu li a {
    background-color: #222;
    text-align: center;
}

div.slicknav_menu a.slicknav_btn {
    margin-top: 20px;
    margin-right: 0px;
    background-color: #222;
}

ul.slicknav_nav .slicknav_item {
    margin:2px 0px; /*overrules the '5px side margins' when button has a sub-menu*/
}

ul.slicknav_nav .slicknav_item:hover {
    -webkit-border-radius: 0px;
    -moz-border-radius: 0px;
    border-radius: 0px;
    background-color: #fff;
    color: #222;
}

ul.slicknav_nav a:hover{
    -webkit-border-radius: 0px;
    -moz-border-radius: 0px;
    border-radius: 0px;
    background-color: #fff;
    color:#222;
}





/*primary header nav settings*/
nav.primaryNavigation ul {

    display: block;
    padding: 0;
    text-align: center;
    margin: 5px auto;

    float: right;
    margin-right: 5%;
}

nav.primaryNavigation li {
    display: inline-block;
}

nav.primaryNavigation a {
    display: block;
    margin: 72px 15px 0px 15px;
    padding: 5px 20px;
    text-decoration: none;
    color: #222;
    font-size: 80%;
    border-radius: 30px;
}

nav.primaryNavigation a:hover {
    color: #cc0000;
}






/*primary nav sub-menu settings*/
    #desktopNavigationWrapper #menu li.sub ul {
        display: none;
        position:absolute;
        z-index: 100;
        background-color: white;
        padding: 3px 25px 8px 25px;
        border-radius: 12px;
        margin: 0;
        float: none;
    }

    #desktopNavigationWrapper #menu li.sub:hover ul {
        display: block;
    }
         
    #desktopNavigationWrapper #menu li.sub ul li {
        font-size: 80%;
        float: none;
        display: block;
        height: 10px;
        padding: 9px 0px;
        margin: 0;
/*        text-align: center;*/
    }

    #desktopNavigationWrapper #menu li.sub ul li a {
        float: none;
        margin: 0 auto;
        padding: 0 20px;
        display: block;
        text-align: left;
    }























/* ===== section 'businesshero' settings ===== */
/* ================================================== */
/* ================================================== */


#businesshero { 
    padding: 0;
    margin: 0;
    background-color: white;
    background-size:cover;
    background-position: center center;
    position:relative;
    width: 100%;
}

#businesshero .grid {
    margin: 0 auto;
    width:90%;
    text-align:center;
    color:#fff;
}

#businesshero .grid-sizer,
#businesshero .grid-item {
    width: 100%;
    box-sizing: border-box;
}

#businesshero .grid-item {
    float: left;
    overflow: hidden; /* zoom content only*/
    border: 10px solid white;
}

#businesshero .grid-item img {
    display: block;
    width: 100%;
}

#businesshero .grid-item a {
    display: block;
    padding-top: 26%;
    padding-bottom: 8%;
    position: relative;
    text-decoration: none;
    background-color: black;
    background-size: cover;
    background-position: center center;
	transition: all 1s ease;
      -moz-transition: all 1s ease;
      -ms-transition: all 1s ease;
      -webkit-transition: all 1s ease;
      -o-transition: all 1s ease;
}

#businesshero .grid-item a:hover { 
    transform: scale(1.2); /* zoom */
      -moz-transform: scale(1.2);
      -webkit-transform: scale(1.2);
      -o-transform: scale(1.2);
      -ms-transform: scale(1.2); /* IE 9 */
}

/*#businesshero .grid-item a#grid_langstenacht {
    background-image: url(../img/langstenacht_600x313.jpg);
}

#businesshero .grid-item a#grid_qparty {
    background-image: url(../img/qparty_600x313.jpg);
}

#businesshero .grid-item a#grid_divine {
    background-image: url(../img/divine_600x313.jpg);
}

#businesshero .grid-item a#grid_familiebrunch {
    background-image: url(../img/familiebrunch_600x313.jpg);
}

#businesshero .grid-item a#grid_netwerkavond {
    background-image: url(../img/netwerkavond_600x313.jpg);
}

#businesshero .grid-item a#grid_mosseldag {
    background-image: url(../img/mosseldag_600x313.jpg);
}

#businesshero .grid-item a#grid_apresskiparty {
    background-image: url(../img/apresskiparty_600x313.jpg);
}

#businesshero .grid-item a#grid_voetbalquiz {
    background-image: url(../img/voetbalquiz_600x313.jpg);
}

#businesshero .grid-item a#grid_brunch {
    background-image: url(../img/brunch_600x313.jpg);
}*/

#businesshero .grid-item a#grid_thuiswedstrijden-diner {
    background-image: url(../img/thuiswedstrijden-diner_600x313.jpg);
}

#businesshero .grid-item a#grid_partnership {
    background-image: url(../img/partnership_600x313.jpg);
}

#businesshero .grid-item span.title {
    font-size: 1.5em;
    display: block;
    color: white;
    position: relative;
    z-index:1;
}

#businesshero .grid-item span.title:before {
    content:"";
    position:absolute;
    z-index:-1;
    top:0;
    bottom:0;
    left:0;
    right:0;
    background-color:#222222;
    opacity:0.30;
}

#businesshero .grid-item a#grid_divine span.title:before {
    background-color:transparent;
}

#businesshero .grid-item span.date {
    font-size: 1em;
    display: block;
    color: white;
    position: relative;
    z-index:1;
}

#businesshero .grid-item span.date:before {
    content:"";
    position:absolute;
    z-index:-1;
    top:0;
    bottom:0;
    left:0;
    right:0;
    background-color:#222222;
    opacity:0.30;
}

























/* ===== section 'hero' settings ===== */
/* ================================================== */
/* ================================================== */



#hero {
    padding: 0;
    margin: 0;
    background-color: #222222;
    background-size:cover;
    background-position: center center;
    background-repeat: no-repeat;
    position:relative;
    /*height: 30vh;*/
    height: 200px;
    width: 100%;
}

/*#a-kern #hero,
#b-kern #hero{
    background-size: contain;
}*/

#wedstrijden #hero {
    background-image: url(../img/wedstrijden_600x313.jpg);
}

#ploegen #hero {
    background-image: url(../img/ploegen_600x313.jpg);
}

/*#a-kern #hero {
    background-image: url(../img/akern_600x313.jpg);
}

#b-kern #hero {
    background-image: url(../img/bkern_600x313.jpg);
}*/

#clubinfo #hero {
    background-image: url(../img/clubinfo_600x313.jpg);
}

/*#netwerkavond #hero {
    background-image: url(../img/netwerkavond_600x313.jpg);
}*/

#thuiswedstrijden-diner #hero {
    background-image: url(../img/thuiswedstrijden-diner_600x313.jpg);
}

#partnership #hero {
    background-image: url(../img/partnership_600x313.jpg);
}

.header{
    position:absolute;
    top:60%;
    text-align:center;
    width:100%;
    color:#fff;
    -ms-transform: translate(0,-60%);
   	-webkit-transform: translate(0,-60%);
    transform: translate(0,-60%);
}

/*#a-kern #hero .header,
#b-kern #hero .header{
    top:100%;
    -ms-transform: translate(0,-100%);
   	-webkit-transform: translate(0,-100%);
    transform: translate(0,-100%);
}*/

.header h1 {
    font-size: 2.5em;
    margin: 0;
    text-shadow: 0px 0px 10px #888888;
}

.header h3 {
    font-size: 1.463em;
    margin: 0;
    text-shadow: 0px 0px 10px #888888;
}

























/* ===== section 'mainSlider' settings ===== */
/* ================================================== */
/* ================================================== */





/*#mainSlider,
#mainSlider div.sy-box,
#mainSlider div.sy-box div.sy-slides-wrap,
#mainSlider div.sy-box div.sy-slides-wrap div.sy-slides-crop,
#mainSlider div.sy-box div.sy-slides-wrap div.sy-slides-crop ul#slipprySliderlist,
#mainSlider div.sy-box div.sy-slides-wrap div.sy-slides-crop ul#slipprySliderlist li.sy-slide,
#mainSlider div.sy-box div.sy-slides-wrap div.sy-slides-crop ul#slipprySliderlist li.sy-slide img {
}*/




#mainSlider {
    display: block;
    background-color: black;
    padding-top: 0px;
    padding-bottom: 0px;
    position: relative;
}




#mainSlider li.sy-slide {
    height: 240px;
}




#mainSlider .external-captions { 
    background-color: transparent;
    color: white;
    font-size: 1em;
    text-shadow: 5px 5px 10px #888;
    text-transform: uppercase;
    display: block;
    width: 100%;
    height: 0;
    padding-bottom: 15%;
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: 13;
}









#mainSlider .external-captions:before {
    content:"";
    position:absolute;
    z-index:-1;
    top:0;
    bottom:0;
    left:0;
    right:0;
    background-color:#000;
    opacity:0.50;
}










/* ===== section 'nieuws' settings ===== */
/* ================================================== */
/* ================================================== */


section#nieuws {
    background-color: #ffffff;
}

section#nieuws article {
    background-color: #f9f9f9;
}

section#nieuws article div.img-holder {
    background-color: white;
    background-size: cover;
    background-position: center center;
    width: 100%;
    padding-bottom: 70%;
}



section#nieuws article.meerNieuws {
    width: 100%;
    display: inline-block;
    vertical-align: top;
}


















/* ===== section 'klassement' settings ===== */
/* ================================================== */
/* ================================================== */




section#klassement {
    background-color: #f3f3f3;
}

table.klassementstabel {
	table-layout: auto;
	margin: 0px auto 20px auto;
	width: 100%
}

table.klassementstabel th,
table.klassementstabel td
{
	padding: 0.3em 0.7em;
    font-size: 0.85em;
}

table.klassementstabel th {
	background-color: #eeeeee;
}

table.klassementstabel tr.odd {
	background-color: #dddddd;
}

table.klassementstabel tr.even {
	background-color: #eeeeee;
}
















/* ===== section 'kalender' settings ===== */
/* ================================================== */
/* ================================================== */



section#kalender {
    background-color: #ffffff;
}

table.kalendertabel {
	table-layout: auto;
	margin: 0px auto 20px auto;
	width: 100%;
    border: 1px solid #222222;
}

table.kalendertabel th,
table.kalendertabel td
{
	padding: 0.3em 0.7em;
    font-size: 0.85em;
}

table.kalendertabel th {
	background-color: #dddddd;
}



















/* ===== section 'wedstrijden' settings ===== */
/* ================================================== */
/* ================================================== */


/*section#wedstrijden {
    background-color: #222222;
}

section#wedstrijden article {
    background-color: white;
}*/















/* ===== section 'fotolinks' settings ===== */
/* ================================================== */
/* ================================================== */

section#fotolinks {
    background-color: #f3f3f3;
}

















/* ===== section 'sponsors' settings ===== */
/* ================================================== */
/* ================================================== */


section#sponsors {
    background-color: #ffffff;
}

section#sponsors ul#sponsorGallery {
    text-align: center;
    padding: 20px 0 40px 0;
}

section#sponsors ul#sponsorGallery li {
    list-style: none;
    display: inline-block;
    padding: 30px;
    margin: 10px;
    width: auto;
    position: relative;
}

section#sponsors ul#sponsorGallery li img {
    width: 100%;
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}






















/* ===== section 'algemeneInfo' settings ===== */
/* ================================================== */
/* ================================================== */




section#algemeneInfo {
    background-color: #ffffff;
}















/* ===== section 'bestuur' settings ===== */
/* ================================================== */
/* ================================================== */




section#bestuur {
    background-color: #f3f3f3;
}


section#bestuur article#dagelijksBestuur ul {
	list-style: none;
    padding: 0;
}

section#bestuur article#dagelijksBestuur ul li {
	float: left;
	margin-right: 5%;
    width:95%;
}





















/* ===== section 'stadion' settings ===== */
/* ================================================== */
/* ================================================== */


section#stadion {
    background-color: #ffffff;
}

section#stadion img {
    width: 100%;
    max-width: 440px;
}



















/* ===== section 'historiek' settings ===== */
/* ================================================== */
/* ================================================== */

section#historiek {
    background-color: #f3f3f3;
}

section#historiek img {
    width: 100%;
    max-width: 440px;
}














/* ===== section 'visie' settings ===== */
/* ================================================== */
/* ================================================== */


section#visie {
    background-color: #ffffff;
}




















/* ===== section 'akern' settings ===== */
/* ================================================== */
/* ================================================== */

section#akern {
    background-color: #ffffff;
}

section#akern article div {
	display: inline-block;
    width:100%;
    vertical-align: top;
}

section#akern article div ul {
	list-style: none;
    padding: 0;
}

section#akern img.ploegfoto{
    width: 100%;
}





/* ===== section 'bkern' settings ===== */
/* ================================================== */
/* ================================================== */

section#bkern {
    background-color: #f3f3f3;
}

section#bkern article div {
	display: inline-block;
    width:100%;
    vertical-align: top;
}

section#bkern article div ul {
	list-style: none;
    padding: 0;
}

section#bkern img.ploegfoto {
    width: 100%;
}











/* ===== section 'staf' settings ===== */
/* ================================================== */
/* ================================================== */

section#staf {
    background-color: #ffffff;
}













/* ===== section 'jeugd' settings ===== */
/* ================================================== */
/* ================================================== */

section#jeugd {
    background-color: #ffffff;
}

section#jeugd article div {
	display: inline-block;
    width:100%;
    vertical-align: top;
}

section#jeugd article div ul {
	list-style: none;
    padding: 0;
}

section#jeugd img.ploegfoto {
    width: 100%;
}













/* ===== sections 'verslagen' settings ===== */
/* ================================================== */
/* ================================================== */

section#verslagOverigeWedstrijden {
    background-color: #f3f3f3;
}

.verslagenarchief article {
    border-bottom: 1px solid #ccc;
    padding-bottom: 2.5em;
}

.verslagenarchief article.bottomMenu {
    border-bottom: none;
}











/* ===== sections 'partnershipmogelijkheden' settings ===== */
/* ================================================== */
/* ================================================== */
section#partnershipmogelijkheden {
    background-color: #f3f3f3;
}













/* ===== sections 'thuisspeeldata' settings ===== */
/* ================================================== */
/* ================================================== */
section#thuisspeeldata {
    background-color: #ffffff;
}









/* ===== sections 'opdenblanckaert' settings ===== */
/* ================================================== */
/* ================================================== */
section#opdenblanckaert {
    background-color: #f3f3f3;
}













/* ===== sections 'inschrijven' settings ===== */
/* ================================================== */
/* ================================================== */
section#inschrijven {
    background-color: #ffffff;
}
















/* ===== section 'googleMap' settings ===== */
/* ================================================== */
/* ================================================== */

section#googlemap {
    padding-top: 0px;
    padding-bottom: 0px;
    z-index: 0;
    width: 100%;
}

section#googlemap div.stretchy-wrapper {
    width: 100%;
    padding-bottom: 100%;
    position: relative;
    background: black;
}

section#googlemap div.stretchy-wrapper > div {
    position: absolute;
    top: 0; bottom: 0; left: 0; right: 0;
}























/* ===== footer settings ===== */
/* ================================================== */
/* ================================================== */


footer {
    background-color: #222;
    color: #999;
    font-size: 0.70em;
    width: 100%;
    padding-bottom: 40px;
    padding-top: 20px;
}

/*footer article {
    margin-top: 0px;
    display: inline-block;
    padding: 20px 0 20px 0;
    box-sizing: border-box;
    width: 100%;
    border-bottom: 1px solid #999;
    vertical-align: top;
}*/

footer article {
    margin-top: 0px;
    display: inline-block;
    box-sizing: border-box;
    width: 49%;
    vertical-align: top;
    padding: 0 0 0 1em;
}

footer article h3,
footer article nav{
    text-align: left;
}

footer nav ul li {
    padding: 5px;
}

































/* ===== form settings ===== */
/* ================================================== */
/* ================================================== */

form {
    width: 98%;
}

form .form-row-beveiligingsveld { 
    display: none;
}

form .form-row {
    margin: 10px 0;
}

fieldset {
	margin: 20px 0px;
	padding: 20px;
	border: 1px solid #cccccc;
	background:#f8f8f8;
}

legend {
	font-weight:bold;
    padding: 10px;
}

input,
textarea,
select {
    width: 100%;
    color: #666666;
    box-sizing: border-box;
    padding: 10px 10%;
    
    border: 1px solid #cccccc;
    border-radius: 0;
}

select {
    
}

label {
	display: block;
	cursor: pointer;
}

input[type="radio"],
input[type="checkbox"] {
    width: auto;
    float: left;
    margin-top: 5px;
    margin-right: 10px;
}

input[type="number"] {
	width: 30%;
    padding-right: 0;
}

label.radioLabel,
label.checkboxLabel {
    display: table-cell;
}

input#submit {
    display: inline-block;
    width: auto;
    padding: 12px 24px;
    text-align: center;
    outline: none;
    text-decoration: none;
    background-color: #222222;
    color: #ffffff;
    border: none;
    border-radius: 20px;
}

input#submit:hover,
input#submit:active {
    background-color: #cc0000;
}

div#totalPrice {
    background-color:orange; 
    text-align:right;
}

div#totalPrice p {
    padding: 10px 10%;
}

div.errorMessage {
    padding: 20px;
    background-color: #cc0000;
    color: #ffffff;
}