@import url('https://fonts.cdnfonts.com/css/storybook');

* { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
body { background: #333; overflow-y: scroll; font-family: 'Roboto', sans-serif; }
   
    #menu { width: 100%; position: fixed; top: 0; left: 0;  color: #fff; height: 80px; z-index: 99999;}
    #menu .menu { display: block; list-style: none; margin: 0; padding: 0; position: absolute; right: 20px; }
    #menu .menu li { float: left; padding: 26px 15px; }
    #menu .menu li a { color: #fbf3df; font-size: 16px; font-family: 'Montserrat', sans-serif; font-weight: 400; letter-spacing: 1px; text-transform: uppercase; }
    #menu .menu li a:hover { color: #b0191d; text-decoration: none;  }
    #menu .brand { display: none; position: absolute; top: 10px; left: 20px; height: 60px;}
    #menu .menubut { display: none; z-index: 200; background: #b0191d;}
	#menu .menu li a.btn { margin-top: -7px; background: #b0191d;}
    #menu.bg { background: #111; }
    #menu.bg .brand { display: block; }
    
   	#videoheader { display: block; position: relative; width: 100%; height: 800px; }
   	#videoheader iframe { position: absolute; width: 100%; height: 800px; top: 0; left: 0; z-index: 10; }
   	#videoheader .headercontent { position: absolute; width: 100%; text-align: center; top: 300px;  z-index: 20;}
   	#videoheader .headercontent h2 { color: #fbf3df; text-align: center; z-index: 20; font-family: 'Montserrat', sans-serif; font-weight: 800;}
   	#videoheader .headercontent h3 { color: #fbf3df; text-align: center; z-index: 20; font-family: 'Montserrat', sans-serif; font-weight: 800;}
   	
   	#tickets { position: relative; margin-top: -25px; padding: 50px 0 40px 0; text-align: center; background: url('/theme/img/bg01.png') top center repeat-x; z-index: 11;}
   	#tickets a { color:  #fbf3df; transition: .3s }
   	#tickets a:hover { text-decoration: none; color: #fff; transition: .3s }
   	#tickets a h2 { font-family: 'Storybook', sans-serif; font-weight: 800; text-transform: uppercase; }
   	#tickets a h3 { font-family: 'Roboto', sans-serif; font-weight: 400; font-size: 18px; }
	#tickets .bottom { position: absolute; left: 0px; bottom: -18px; background: #fbf3df url("/theme/img/bg05.png") bottom center repeat-x; height: 30px; width: 100%; }

	.count-down .timer { display: inline-block; min-width: 100px; text-align: center; border: 1px solid rgba(255,255,255,.4);  border-radius: 10px; }
	.count-down .timer h2 { font-family: 'Montserrat', sans-serif; font-weight: 900; font-size: 50px; color: #fbf3df; padding: 0px 20px; margin: 0;}
	.count-down .timer small { font-family: 'Montserrat', sans-serif; font-weight: 200; font-size: 12px; color: #fbf3df; }

   	#news { position: relative; padding: 80px 0; background: #fbf3df; }
	#news .card { height: 475px !important;}
	#news .card img { border-bottom: 1px solid #eee; }
   	#news .newsitems h2 { font-size: 35px; font-family: 'Storybook', sans-serif; font-weight: 800; padding: 10px 0; text-transform: uppercase; color: #b0191d; }
   	#news .newsitems { background: #fff; padding: 10px 25px; }
   	#news .newsitems a h3 { font-size: 20px; font-family: 'Montserrat', sans-serif; font-weight: 400; color: #333; padding: 10px 0; display: block; border-top: 1px dashed #eee; }
   	#news .newsitems a h3 span { font-size: 12px; font-family: 'Roboto', sans-serif; font-weight: 400;  }
   	#news .card a { text-decoration: none; color: #b0191d;  }
   	#news .newsitems a:hover h3 { text-decoration: none; color: #b0191d; }
   	#news .nieuwsitembig { display: block; position: relative; min-height: 100%; background: #333;}
   	#news .nieuwsitembig h2 { position: absolute; bottom: -8px; left: 0; width: 100%; background: rgba(0,0,0,.7); color: #fff; padding: 10px 20px; text-transform: uppercase; }
   	#news .nieuwsitembig h2 span { font-size: 14px; font-family: 'Roboto', sans-serif; font-weight: 400; }
	.slick-prev, .slick-next { color: #f00; }
	#news h2 { color: #b0191d; text-align: center; font-family: 'Storybook', sans-serif; font-weight: 800; font-size: 50px;  margin-bottom: 30px; text-transform: uppercase; }

	#intro { position: relative; padding: 80px 0; background: #fbf3df url("/theme/img/bg03.png") top center repeat-x; color: #fff; line-height: 30px; }
	#intro h1 { color: #fbf3df; text-align: center; font-family: 'Storybook', sans-serif; font-weight: 800; font-size: 50px; text-transform: uppercase; margin-bottom: 30px; }
	#intro .bottom { position: absolute; left: 0px; bottom: 0px; background: #fbf3df url("/theme/img/bg04.png") bottom center repeat-x; height: 35px; width: 100%; }

   	#social { position: relative; padding: 60px 0 40px 0; text-align: center; background: #fbf3df url('/theme/img/bg01.png') top center repeat-x; }
   	#social a { color: #fbf3df; }
   	#social a:hover { text-decoration: none; color: #333;  }
   	#social i { padding-left: 10px; }
   	#social h3 { font-family: 'Roboto', sans-serif; font-weight: 800; font-size: 30px; line-height: 50px; color: #fbf3df; }
   	#social h2 { font-family: 'Storybook', sans-serif; font-size: 50px; line-height: 50px; color: #fbf3df; text-transform: uppercase; }
	#social .bottom { position: absolute; left: 0px; bottom: -18px; background: #fbf3df url("/theme/img/bg05.png") bottom center repeat-x; height: 30px; width: 100%; }

	#lineup { padding: 80px 20px; background: #fbf3df; overflow: hidden; }
	#lineup .largeitem { display: block; background: #b0191d; color: #fff; min-height: 93%; padding: 50px; transition: .4s;}
	#lineup .largeitem:hover { text-decoration: none; background: #bf1a1a; transition: .4s; }
	#lineup .largeitem h3 { font-family: 'Storybook', sans-serif; font-size: 50px; line-height: 50px; color: #fff; text-transform: uppercase; }
	#lineup .item { position: relative; background: #333; }
	#lineup .top { margin-top: 20px; }
	#lineup .item h3 { position: absolute; bottom: -10px; left: 0; width: 100%; background: rgba(0,0,0,.7); color: #fff; padding: 10px 20px 20px 20px; transition: .5s;}
	#lineup .item:hover h3 { position: absolute; bottom: -10px; left: 0; width: 100%; background: rgba(0,0,0,.7); color: #fff; padding: 10px 20px 40px 20px; transition: .5s; }
	
	#sponsors { padding: 80px 0; background: #fbf3df; }
	#sponsors  a { display: block; background: #fff; width: 100%; height: 100%; padding: 5px; border: 1px solid #eee; }
	
	#footer { padding: 40px 0; color: #fff; background: #333;}
	#footer .site { text-align: right; }
	#footer a { color: #fff; }
	
	#content { margin-top: 80px; padding: 50px 0; line-height: 28px; }
	#content h1 { color: #b0191d; font-family: 'Storybook', sans-serif; text-transform: uppercase;}

	#content.line-up { background: #fbf3df; }
	#content.line-up .vak { background: #fff; border-radius: 5px; padding: 15px 0;}
	#content.line-up .vak h3 { color: #b0191d; font-family: 'Storybook', sans-serif; font-weight: 800; text-transform: uppercase; margin-top: 10px;}

	#content.nieuws { background: #fbf3df;  }
	#content.nieuws .vak { background: #fff; border-radius: 5px; padding: 15px 0;}
	#content.nieuws .vak a { color:#b0191d; font-family: 'Montserrat', sans-serif; font-weight: 800; text-transform: uppercase;  }
	#content.nieuws .vak h3 {  color:#b0191d; font-family: 'Montserrat', sans-serif; font-weight: 800; text-transform: uppercase; margin-top: 10px;}
	#content.nieuws a.terugbutton { color: #fff; display: block; padding: 10px 20px; }
	
	
	#content.nieuws .vakgroot { background: #fff; border-radius: 5px; padding: 20px;}
	#content.nieuws .vakgroot a { color: #b0191d; font-family: 'Montserrat', sans-serif; font-weight: 800; text-transform: uppercase;  }
	#content.nieuws .vakgroot h1 { line-height: 35px; color: #b0191d; font-family: 'Storybook', sans-serif; font-weight: 800; text-transform: uppercase; margin-top: 10px;}
	#content.nieuws .vakgroot h3 { color: #b0191d; font-family: 'Montserrat', sans-serif; font-weight: 800; text-transform: uppercase; margin-top: 10px;}
	#content.nieuws .vakgroot ul li { line-height: 30px; }
	#content.nieuws .vakgroot ul li i { line-height: 30px; }

	#content.contact { background: #fbf3df; }
	#content.contact .vak { background: #fff; border-radius: 5px; padding: 25px;}
	#content.contact .vak a { color: #b0191d; font-family: 'Montserrat', sans-serif; font-weight: 800; text-transform: uppercase;  }
	#content.contact .vak h1 { color: #b0191d; font-family: 'Storybook', sans-serif; font-weight: 800; text-transform: uppercase; margin-top: 10px;}


	#content.tickets { background: #fbf3df; }
	#content.tickets .vak { background: #fff; border-radius: 5px; padding: 20px;}

	#content.page { background: #fbf3df; }
	#content.page .vak { background: #fff; border-radius: 5px; padding: 20px;}
	
	.vak.zijkant { background: #b0191d !important; color: #fff; margin-bottom: 25px; }
	.vak.zijkant ul { margin-left: 20px; }
	.vak.zijkant ul li { line-height: 30px; }
	.vak.zijkant ul li a { color: #fff; }
	.vak.zijkant ul li i { line-height: 30px; }
	.vak.zijkant h2 { font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: 30px; line-height: 50px; color: #fff; text-transform: uppercase; }
	.vak.zijkant h1 { font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: 35px; line-height: 40px; color: #fff; text-transform: uppercase; }

	#content.sponsoren { background: #fbf3df; }
	#content.sponsoren .item { background: #fff; border-radius: 5px; margin: 10px 0; padding: 15px;}
	#content.sponsoren h2 { color: #b0191d; font-family: 'Storybook', sans-serif; font-weight: 800; text-transform: uppercase; margin-top: 10px;}
		
	
/* LG */		
@media (max-width: 1140px) {

    #menu .menu li a { color: #fff; font-size: 14px; font-family: 'Montserrat', sans-serif; font-weight: 400; letter-spacing: 1px; text-transform: uppercase; }

   	#videoheader { height: 550px; }
   	#videoheader iframe { height: 550px !important;  }
   	#videoheader .headercontent { top: 280px; }
   	#videoheader .headercontent { position: absolute; width: 70%; text-align: center; top: 120px;  z-index: 20; margin: 0 15%; }


}


/* MD */	
@media (max-width: 960px) {

    #menu .menubut { display: block; position: absolute; right: 20px; top: 20px;  font-size: 40px; background: none; }
            
    #menu .menu { display: none; background: rgba(0,0,0,.9); position: absolute; top: 0; left: 0; width: 100%; padding: 20px 0; z-index: 100; }
    #menu .menu li { display: block; width: 100%; padding: 20px; }
    #menu .menu li a { display: block; width: 100%;  }

   	#videoheader { height: 430px; }
   	#videoheader iframe { height: 430px !important;  }
   	#videoheader .headercontent { top: 200px; }
   	#videoheader .headercontent { position: absolute; width: 70%; text-align: center; top: 120px;  z-index: 20; margin: 0 15%; }
       	#videoheader .headercontent h2 {
       	    color: #fff;
       	    text-align: center;
       	    z-index: 20;
       	    font-family: 'Montserrat', sans-serif;
       	    font-weight: 800;
       	    font-size: 18px;
       	}
    
       	#videoheader .headercontent h3 {
       	    color: #fff;
       	    text-align: center;
       	    z-index: 20;
       	    font-family: 'Montserrat', sans-serif;
       	    font-weight: 800;
       	    font-size: 16px;
       	}
   	#tickets a h2 { font-family: 'Montserrat', sans-serif;  font-size: 20px; font-weight: 800; }
   	#tickets a h3 { font-size: 18px; }

   	#social { padding: 40px 20px; text-align: center;}
   	#social a { color: #fff; }
   	#social a:hover { text-decoration: none; color: #b0191d;  }
   	#social i { padding: 10px; font-size: 40px;}
   	#social h3 { font-size: 20px; line-height: 20px; }
   	#social h2 { font-size: 40px; line-height: 40px; }
   	#social h3 span { display: block; }

	#sponsors { padding: 40px 0 20px 0; background: #fff; }

	#lineup .largeitem { padding: 30px; }
	#lineup .largeitem h3 { font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: 30px; line-height: 30px; color: #fff; text-transform: uppercase; }

	#content { padding: 10px; }
}


/* SM */	
@media (max-width: 540px) {

  #menu .menu { display: none; }
  
   	#videoheader { display: block; position: relative; width: 100%; height: 530px;  }
   	#videoheader iframe { display: none; }
   	#videoheader .headercontent { position: absolute; width: 80%; text-align: center; top: 120px;  z-index: 20; margin: 0 10%; }
   	#videoheader .headercontent h2 { color: #fff; text-align: center; z-index: 20; font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: 18px; }
   	#videoheader .headercontent h3 { color: #fff; text-align: center; z-index: 20; font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: 16px;}

    img.embleem { width: 200px; margin-top: -50px; }
    
    .count-down .timer h2 { font-size: 30px; margin: 0; padding: 0;  }
    .count-down .itmer .small { font-size: 10px; padding:0; margin: 0;}
    .count-down .timer { padding: 0px; margin: 0px; width: 20%; }
    
    #news { padding: 50px 0px;  }
   	#news .newsitems h2 { font-size: 35px; font-family: 'Montserrat', sans-serif; font-weight: 800; color: #333; padding: 10px 0; text-transform: uppercase; color: #f00; }
   	#news .newsitems { background: #fff; padding: 10px 25px; margin: 20px; }
   	#news .newsitems a h3 { font-size: 20px; font-family: 'Montserrat', sans-serif; font-weight: 400; color: #333; padding: 10px 0; display: block; border-top: 1px dashed #eee;}
   	#news .newsitems a h3 span { font-size: 12px; font-family: 'Roboto', sans-serif; font-weight: 400; }
   	#news .newsitems a:hover { text-decoration: none; color: #b0191d; }
   	#news .newsitems a:hover h3 { text-decoration: none; color: #b0191d; }

	#lineup { padding: 50px 10px; }
	#lineup .item { margin-top: 10px; }
	#lineup .top { margin-bottom: 0px; }

   	#tickets a h2 { font-family: 'Montserrat', sans-serif;  font-size: 20px; font-weight: 800; }
   	#tickets a h3 { font-size: 18px; }

   	#intro { padding: 50px 10px;  }
   	#intro h1 { font-size: 40px; line-height: 40px; }

   	#social { padding: 40px 20px; text-align: center;  }
   	#social a { color: #fff; }
   	#social a:hover { text-decoration: none; color: #f00;  }
   	#social i { padding: 10px; font-size: 40px;}
   	#social h3 { font-size: 20px; line-height: 20px; }
   	#social h2 { font-size: 40px; line-height: 40px; }
   	#social h3 span { display: block; }

	#sponsors { padding: 40px 0; background: #fff; }

	#footer { text-align: center; }
	#footer .site { text-align: center; }   	
   	
   	}