/*
* CSS Beeldig Lommel
* Date: 13-02-23
*/

/* RESET*/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,b, u, i, center,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td,article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary,time, mark, audio, video{ margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; }
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section{ display: block;}
body{ line-height: 1;}
blockquote, q{	quotes: none;}
blockquote:before, blockquote:after,q:before, q:after{ content: ''; content: none;}
table{	border-collapse: collapse; border-spacing: 0;}

/* END RESET */


html{ margin:0px; height:100%; }
body{ margin:0px; height:100%; font-family: 'Source Sans Pro', sans-serif; font-weight:300; font-size:18px; color:#fff; }

p{ margin:0px; padding:10px 0px; text-align:justify;}
li{ margin-left:20px;}

h1{ text-transform:uppercase;  margin:0px 0px 20px 0px; font-size:24px; letter-spacing:5px; font-weight:400; }

h2{ font-size:30px; font-weight:400; text-transform:uppercase; letter-spacing:3px; margin:60px 0px 10px 0px;}
.home h2{ color:#a93015; background:none; }
.praktisch h2,.praktisch h3{color:#006861; background:none; }
.partners h2,.partners h3{color:#84761d; background:none; }
.foto h2,.foto h3{color:#ca8800; background:none; }
.info h2,.info h3{color:#821741; background:none; }
.kleur h2{ color:#fff;}

h3{ font-size:20px; font-weight:400; text-transform:uppercase; letter-spacing:2px; margin:20px 0px 0px 0px;}

h4{ font-size:18px; text-transform:uppercase; letter-spacing:1px; margin:20px 0px 0px 0px;}

a{ color:#fff; text-decoration:underline; outline:none;}
a:hover{ color:#ccc;}
a img{ border:none;}

.ls{letter-spacing:5px; text-transform:uppercase;font-size:90%; margin-left:0px;}

strong, b{ font-weight:bold; font-weight:400;}


.home{ background:#a93015;}
.praktisch{ background:#006861;}
.partners{ background:#84761d;}
.foto{ background:#ca8800;}
.info{ background:#821741;}
.webshop{ background:#006861;}

.w{ width:100%;}

header{ position:relative; overflow:hidden;}

#lb{ position:fixed; height:100%; width:50px; background:#ca8800;font-size:100%; z-index:99;}
#lb .date{ margin:90px 0px 0px 3px; line-height:16px; font-size:14px; }
#lb .logo{ margin-top:210px; padding-left:5px;}
#lb .logo-h{ display:none;}
#lb .soc{ position:absolute; bottom:10px; margin-left:10px;}
#lb .soc a{ display:block; padding-top:10px;}

a.menu-link { display: none;}
nav{ margin-left:50px; position:relative; overflow:hidden;  }
nav ul{ display:table; width:100%; margin-top:5px;}
nav li{ display:table-cell; width:16.4%; padding:0 0.1%; vertical-align:middle; }
.home nav li{ border:2px solid #a93015;}
.praktisch nav li{ border:2px solid #006861;}
.partners nav li{ border:2px solid #84761d;}
.foto nav li{ border:2px solid #ca8800;}
.info nav li{ border:2px solid #821741;}
.webshop nav li{ border:2px solid #006861;}
nav li a{ position:relative; z-index:98; letter-spacing:4px; text-transform:uppercase; display:block; padding:5px 0px; text-align:center; font-size:1.0vw; text-decoration:none; font-weight:400;}
nav li a.act, .home nav li a.act{ border-bottom:2px solid #fff;}


main{ position:relative; overflow:hidden;}
main .date{ font-size:26px; letter-spacing:10px; text-transform:uppercase; margin-bottom:40px; margin-top:120px; padding-left:30%;  }
main .logo{padding-left:30%;}
main .logo img{ max-width:600px;}
main .txt{ padding-top:100px; margin-bottom:100px; padding-left:-moz-calc(5% + 50px); padding-left:-webkit-calc(5% + 50px); padding-left:-o-calc(5% + 50px); padding-left:calc(5% + 50px); line-height:28px; display:table-cell; width:68%; margin:60px 0px 200px 5%; font-size:18px; letter-spacing:2px; z-index:99; padding-right:15%;  padding-bottom:50px;}
.home main .txt{ margin-top:30px; margin-bottom:50px; line-height:28px; display:block; width:50%; font-size:18px; letter-spacing:2px;}
main .txtleft{ padding-top:100px; margin-bottom:100px; padding-left:5%; line-height:28px; display:table-cell; width:auto; font-size:18px; letter-spacing:2px; z-index:99; padding-right:0%;  padding-bottom:50px; }
main .img{ display:table-cell; width:20%; height:100%; vertical-align: bottom; z-index:1; margin-bottom:5px; background-size: contain;  }
main .table{ display:table; width:100%;  height: 100%; margin-left:50px;}
main .imgright{ display:table-cell; width:20%;  height:100%; vertical-align: bottom; text-align:right; margin-bottom:5px; }
main .img img{ max-width:100%; display:block;}
main .imgright img{  width:100%; display:block;}

.btn_wrap {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.btn_inschr{ background:#fff; padding:10px 30px; font-weight:bold; text-decoration:none; margin-top:50px; text-align:center;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); color:#a93015;  border-radius: 2px; 
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 2.5px;
  transition: all 0.3s ease 0s; }
.btn_inschr:hover {    box-shadow: 0px 10px 15px rgba(0, 0, 0, 0.4);  color: #a93015;  transform: translateY(-7px);}

.home main .img{ background:url(../img/main-home.png) no-repeat bottom left; background-size: contain; width:30%; }
.praktisch main .imgright{ background:url(../img/main-praktisch.png) no-repeat bottom right; background-size: contain; }
.partners main .img{ background:url(../img/main-programma.png) no-repeat bottom left; background-size: contain; }
.foto main .img{ background:url(../img/main-foto.png) no-repeat bottom left; background-size: contain; }
.info main .img{ background:url(../img/main-info.png) no-repeat bottom left; background-size: contain; }

.wit{ position:relative; overflow:hidden; margin-top:-5px;  background:#fff; color:#777777; font-weight:400; letter-spacing:1px; line-height:28px;  }
.wit .p{ margin:100px 20%; width:60%;}
.wit .l{ display:block; float:left; width:30%; padding: 100px 10% 100px 20%;}
.wit .r{ display:block; float:left; width:30%; padding: 100px 0px 0px 0%; }
.wit a{ /*color:#777777;*/}
.wit strong{ font-weight:600;}

.home .wit, .home .wit a{ color:#a93015;}
.praktisch .wit, .praktisch .wit a{ color:#006861;}
.partners .wit, .partners .wit a{ color:#84761d;}
.foto .wit, .foto .wit a{ color:#ca8800;}
.info .wit, .info .wit a{ color:#821741;}

.wit ul, .wit ol{ padding-left:20px;}



ul.partners-list {
    display: flex;
    flex-wrap: wrap;       
    list-style: none;
    padding: 0;
    margin: 0;
}

ul.partners-list li {
    display: flex;
    align-items: center;   
    justify-content: center; 
    width: 200px;          
    height: 200px;         
    margin: 10px;    
	border:1px solid #ccc;
	opacity:0.9;  
	text-align:center;
	background:#D8D8D8;   
}

ul.partners-list li a {
    display: block;
    max-width: 96%;
	padding:2%;
}

ul.partners-list li img {
    max-width: 90%;       
    height: auto;         
    display: block;
}





.long-list li{ margin:20px 0px 20px 20px;}

.pijl{ background:url(../img/pijl2.png) no-repeat left; display:block; margin:0px 0px 5px 50px; padding:0px 0px 0px 35px; text-transform:uppercase; }

.home .wit{letter-spacing:1px; font-size:20px; font-weight:400;}
.home .wit .p{ margin:100px 10%; width:50%; text-align:left;}

.kleur{ position:relative; overflow:hidden; letter-spacing:1px; font-size:18px; font-weight:400; line-height:28px; font-weight:300; }
.kleur .p{margin:60px 20%; width:60%;}


footer{padding:20px 8%; width:84%;font-size:14px; line-height:20px; border-top:2px solid #fff; }
footer a{ color:#fff; text-decoration:none;}
footer a:hover{ color:#ccc;}

#footer{position:relative; overflow:hidden;  }
#footer strong{ font-weight:400; text-transform:uppercase;}

.l{ display:block; float:left; width:40%; text-align:left;}
.m{ display:block; float:left; width:40%; text-align:left;}
.r{ display:block; float:left; width:20%; text-align:left;}

#sponsors{ position:relative; overflow:hidden; text-align:left; margin:25px 0px;}
#sponsors ul li{ display:block; width:auto; float:left; padding:0px 50px 0px 0px; }
#sponsors ul li a img{ height:100%; max-height:60px; }

#footerbot{ overflow:hidden; opacity: 0.5; }
#footerbot .l{}
#footerbot .r{ float:right;}

#fotobalkfotos{ min-height:10px; max-width:1200px;}
#fotobalkfotos .w{ min-height:196px;}
#fotobalkfotos ul{ margin:0px -10px 0px -5px;}
#fotobalkfotos ul li{ display:block; float:left; margin:10px 4px 10px 5px;}
#fotobalkfotos img{ max-width:100%;}

#my-gallery{ margin:50px 10%;}


.videoContainer
{
  position: relative;
  display: block;
  width: 70%; /* width of iframe wrapper */
  height: 0;
  margin: auto;
  padding: 0% 0% 42.25%; /* 16:9 ratio */
  overflow: hidden;
  left:12%;
  margin-left:70px;
  margin-bottom:50px;
}

.videoContainer iframe
{
  position: absolute;
  top: 0; bottom: 0; left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* ----------------------------------  900px - 1100px --------------------------------------*/
@media screen and (min-width: 1200px) and (max-width: 1500px) { 

.home main .txt{  width:60%; padding:0px 0px 20px 10%; }
main .txt{  width:68%; margin:60px 0px 200px 5%;}
main .img{ width:30%; }
main .imgright{ width:30%;}
main .img img{ width:100%;}
.sponsors ul li{ width:24%; min-width:130px; float:left; margin:0.5% 2%; }
main .logo img{ max-width:600px;}
.videoContainer{ width: 90%; padding: 0% 0% 56.25%; left:0;  }
}



/* ----------------------------------  600 - 900px ------------------------------------------*/
@media screen and (min-width: 600px) and (max-width: 1200px) {
	
nav li a{ letter-spacing:3px; padding:5px 3px; font-size:13px;}

main .date{ padding-left:15%; margin-top:80px;  }
main .logo{padding-left:15%;}
main .logo img{ max-width:500px;}

.home main .txt{  width:68%; padding:0px 0px 20px 0%; display:block;  }
.home main .img{ width:30%; }
.home main .img img{ width:auto; max-height:200px; position:absolute; bottom:0px; z-index:1;}

main .txt{  width:68%; margin:60px 0px 200px 5%; }
main .txtleft{ width:70%; padding-bottom:140px; padding-top:60px;   }
main .img{ width:30%; }
main .imgright{ width:30%;}
main .img img{ width:100%;}

main .imgright{ position:absolute; display:table-cell; bottom:0px; right:0px; vertical-align:bottom;   }
main .imgright img{width:40%;  position:absolute; bottom:0px; right:0px; }


.wit .l{ width:30%; padding: 100px 5% 100px 15%;}
.wit .r{ width:30%; padding: 100px 10%; }


.sponsors ul li{ width:24%; min-width:130px; float:left; margin:0.5% 2%; }
.videoContainer{ width: 90%; padding: 0% 0% 56.25%;  left:0; }

}


/* ----------------------------------  < 600px ------------------------------------------*/
@media screen and (max-width: 600px) {

.table{ display:table; position:relative;  min-height:100%; width:100%;}
main{ margin-top:90px; }
main .date{ margin-top:50px; padding-left:10%;  }
main .logo{padding-left:10%;}
main .logo img{ max-width:90%;}
main .table{ margin-left:0px;}
main .txt{ margin:50px 0px 120px 5%; display:block; width:90%; padding-top:10px; padding-left:0px; }
.home main .txt{ width:90%; padding-bottom:140px;}
main .txtleft{ width:95%; padding-bottom:140px; padding-top:60px;   }
main .img{ position:absolute; display:block; bottom:0px; left:0px; vertical-align:bottom; z-index:1; width:35%; }
.home main .img{ position:absolute; display:block; bottom:0px; left:0px; vertical-align:bottom; z-index:1; }
main .imgright{ position:absolute; display:block; bottom:0px; right:0px; vertical-align:bottom; z-index:1; width:30%;}
main .img img{ width:100%; position:absolute; bottom:0px; left:0px; z-index:1;}
.home main .img img{ width:100%; position:absolute; bottom:0px; left:0px; z-index:1;}
main .imgright img{ width:100%;  position:absolute; bottom:0px; right:0px; z-index:1;}

#lb{ position:fixed; height:50px; width:100%; background:#ca8800;font-size:100%; z-index:99;}
#lb .date{ margin:0px 0px 0px 30px; line-height:16px; }
#lb .logo{ top:0; margin-top:-45px; padding-left:30%;}
#lb .logo img{ display:none;}
#lb .logo-h img, #lb .logo-h{ display:block; max-width:70%; max-height:40px;}

#lb .soc{ position:absolute; bottom:10px; right:0px; margin-left:10px; }
#lb .soc a{ display:block; float:left; padding-top:10px; padding-right:4px;}
#lb .soc a img{ max-width:90%;}

nav{ margin-top:45px; margin-left:0px; z-index:99; position:fixed; height:50px; width:100%;}
nav ul li{  width:16.4%;  padding:0px 0.1%; }
nav ul li a{font-size:2.5vw; letter-spacing:1px;}

a.anchor{ display:block; position:relative; top:-120px; visibility:hidden;}

.wit .p{ margin:50px 5%; width:90%;}
.wit .l{ display:block; float:none; width:80%; padding: 80px 10px 70px 10%;}
.wit .r{ display:block; float:none; width:80%; padding: 10px 10% 80px 10%; }

.kleur .p{margin:60px 5%; width:90%;}

.sponsors{ margin-top:-5px;}
.sponsors ul{ margin-left:2%; }
.sponsors ul li{ width:30%; min-width:90px; margin:0.2% 0.5%; height:auto; }
.sponsors ul li a{ vertical-align: middle;}
.sponsors ul li a img{width:90%; max-width:140px; min-width:90px;}

footer{ margin-top:-5px;}
.videoContainer{ margin-left:10px; width: 90%; padding: 0% 0% 56.25%; left:0;  }
}