/* CSS Document */
html, body{font-size:1em;line-height:22px;margin: 0;padding: 0;color:rgba(255,255,255,1);font-family: 'Open Sans', sans-serif;font-weight:400;height:100%;width: 100%;background-image:url('../img/bgr.jpg');background-size:cover;background-attachment:fixed;background-position:center center}
@font-face {
      font-family: 'icons';
		src: url('../font/fontello.eot?58440312');
  		src: url('../font/fontello.eot?58440312#iefix') format('embedded-opentype'),
       url('../font/fontello.woff2?58440312') format('woff2'),
       url('../font/fontello.woff?58440312') format('woff'),
       url('../font/fontello.ttf?58440312') format('truetype'),
       url('../font/fontello.svg?58440312#fontello') format('svg');
      font-weight: normal;
      font-style: normal;
    }
/* animatie */
a, .bas, .martin, .pitmaster .bas .insta, .pitmaster .martin .insta
{-webkit-transition:all .25s linear;-moz-transition:all .25s linear;-o-transition:all .25s linear;-ms-transition:all .25s linear}

#container{width:100%;height:100%;min-height:100%;padding:0;margin: 0 auto}

#header{display:block;height:450px}

#logo{z-index:888;display:block;position:fixed;height:300px;width:300px;left: 50%;margin-left:-150px;}
#logo_small{display:block;height:auto;width:30%;max-width:450px;padding-top:15px;}

#content{display:block;position:absolute;width:100%;height:100%;min-height:100%;padding:0;margin: 0 auto}

h1, h3, h5{text-transform:uppercase;font-weight:700;color:rgba(225,0,0,1.00)}
h1{text-align: right; font-size:2.8em;line-height:1.5em;margin:0px}
h2{text-transform:uppercase;font-weight:700;color:rgba(255,255,255,1.00);text-align: right; font-size:2.2em;line-height:1.5em;margin:0px}
h3{font-size:2.5em;line-height:1em;margin:0px}
h4{text-transform:uppercase;color:rgba(255,255,255,1);font-size:1.5em;line-height:2em;margin:0px}
h5{font-size:1.5em;line-height:1em;margin:0px}
red{font-weight:700;color:rgba(225,0,0,1)}
payoff{display:block;width:100%;padding:50px 0px 50px 0px;font-size:4em;text-align: center; text-transform:uppercase;font-weight:700;color:rgba(0,0,0,1.00)}

a{color:rgba(255,255,255,1);font-weight:700;text-decoration:none}
a:hover{color:rgba(225,0,0,1)}

.referenties{display:flex;flex-direction:row;justify-content:flex-start;align-items:center}
a.referentie{position:relative;display:block;padding:10px;background-color:rgba(0,0,0,0);}
a.referentie img{display:block;width:100%;max-width:200px;height:auto;max-height:100px}

strong{font-weight:700;font-weight:400;line-height:1.5em;letter-spacing:0.1em;word-spacing:0.2em;padding:0px}
p{font-weight:400;line-height:1.5em;letter-spacing:0.1em;word-spacing:0.2em;padding:0px}

/* Menu */
.balk{display:block;width:100%;height:75px;position:fixed;margin:0 auto;top:0px;z-index:777}
.balk .wrapper {width:90%;padding:0px 5% 0px 5%;margin:0 auto;display:block;height:75px;line-height:75px;overflow:show;max-width:1260px}
.balk .wrapper .menu {display:flex;flex-direction:row;justify-content:space-between;align-items: center;align-content:center;width:100%;height:75px;z-index:999}
.balk .wrapper .menu .spacer{display:block;height:50px;width:1px;background-color:rgba(255,255,255,1)}
.balk .wrapper .menu #logo_spacer{width:200px;display:block;position:relative;background: linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 50%, rgba(0,0,0,0) 100%);height:75px;z-index:999}
.balk .wrapper .menu a.menu_knop{text-transform:uppercase;text-align:center;font-weight:700;width:auto;padding:0px;font-size:1em;display:block;height:45px;line-height:45px;color:rgba(255,255,255,1);border-bottom: 2px solid rgba(255,255,255,0);text-decoration:none;z-index:888}
.balk .wrapper .menu a.menu_knop:hover{border-bottom: 2px solid rgba(0,0,0,0.5)}
.balk .wrapper .menu a.menu_knop.active{border-bottom:2px solid rgba(0,0,0,1)}
.balk .wrapper .menu a.menu_knop.active:hover{border-bottom:2px solid rgba(255,255,255,1)}

/* content */
.wrapper{width:90%;padding:50px 5% 50px 5%;height:auto;margin:0 auto;max-width:1260px}

.boxes{display:flex;flex-direction:row;justify-content:space-between;align-items:flex-start;width:100%}

.box_full{flex:1;display:block;vertical-align:top;height:auto;padding:10px 20px 10px 20px;width:100%}
.box_single{flex:1;display:block}
.box_dubble{flex:2;display:block}
.box{flex:1;display:block;padding:0px 20px 0px 20px}
.box p a, .thema_box p a{border-bottom: 1px solid rgba(225,0,0,1)}

/* pitmasters */
.pitmaster{height:225px;line-height:225px;width:225px;overflow:hidden;background-position:center center}
.pitmaster .blackbox{height:225px;width:225px;background-color:rgba(0,0,0,0.5);margin:-225px auto}
.pitmaster .bas, .pitmaster .martin, .pitmaster .kevin{text-transform:uppercase;font-weight:700;color:rgba(255,255,255,1.00);text-align: center;vertical-align: middle; font-size:1.8em;height:225px;width:225px;background-size:100%;background-position:center center;}
.pitmaster .bas, .pitmaster .bas .insta{background-image:url('../img/fotos/002.jpg')}
.pitmaster .martin, .pitmaster .martin .insta{background-image:url('../img/fotos/025.jpg')}
.pitmaster .kevin, .pitmaster .kevin .insta{background-image:url('../img/fotos/026.jpg')}
.pitmaster .martin .insta, .pitmaster .bas .insta, .pitmaster .kevin .insta{display:flex;flex-direction:column;justify-content:center;position:absolute;width:225px;height:225px;margin:0px auto;text-align:center;padding:0px;opacity:0;background-size:100%;background-position:center center}
.pitmaster:hover .martin .insta, .pitmaster:hover .kevin .insta, .pitmaster:hover .bas .insta{opacity: 1}

a.knop{color:rgba(255,255,255,1);background-color:rgba(0,0,0,0);border: 3px solid rgba(255,255,255,1);padding: 8px 11px;text-transform:uppercase;font-weight:700;font-size:0.9em;}
a.knop:hover{color:rgba(0,0,0,1);border: 3px solid rgba(255,255,255,1);background-color:rgba(255,255,255,1);}

a.knop_small{display:block;text-align:center;width:auto;margin:0 auto;color:rgba(255,255,255,1);background-color:rgba(0,0,0,0);border: 3px solid rgba(255,255,255,1);height:40px;line-height:40px;padding:0px 10px 0px 10px;text-transform:uppercase;font-weight:700;font-size:0.4em}
a.knop_small:hover{color:rgba(0,0,0,1);border: 3px solid rgba(255,255,255,1);background-color:rgba(255,255,255,1);}

.food{background-color:rgba(225,0,0,1);background-image:url('../img/food.png');background-size:cover;background-attachment:fixed;background-position:center center}
.light{background-color:rgba(255,255,255,1)}
.dark{background-color:rgba(0,0,0,0.8)}
.dark h1, .dark h3, .dark h5{text-transform:uppercase;font-weight:700;color:rgba(225,0,0,1.00)}
.food h1, .food h2, .food h3, .food h4, .food h5{text-transform:uppercase;font-weight:700;color:rgba(255,255,255,1.00)}
.dark p, .food p{color:rgba(255,255,255,1.00)}
.dark strong{font-weight:700;color:rgba(255,255,255,1.00)}
.food strong{font-weight:700;color:rgba(255,255,255,1.00)}

.thema_wrapper {height:100%;width:100%}
.themas {display: flex;flex-wrap:wrap;width:100%;margin:0 auto}

.thema_box{display: inline-block;flex-grow: 1;height:auto;width: calc(100% * (1/4) - 51px);padding:0px 25px 0px 25px;margin:25px 0px 25px 0px;border-right:1px solid rgba(225,0,0,1)}
.thema_box:nth-child(4n), .thema_box:nth-child(8n), .thema_box:nth-child(12n), .thema_box:nth-child(16n){border-right:0px solid rgba(255,255,255,0)}

.thema_box_big{display: inline-block;flex-grow: 1;height:auto;width: calc(100% * (1/2) - 51px);padding:0px 25px 0px 25px;margin:25px 0px 25px 0px;border-right:0px solid rgba(225,0,0,1)}
.thema_box_big:nth-child(2n), .thema_box_big:nth-child(4n) {border-right:0px solid rgba(255,255,255,0)}

.thema_box strong, .thema_box_big strong{font-weight: 700;color:rgba(255,255,255,1);text-transform:uppercase;font-size:1.1em}
.thema_box p, .thema_box_big p{font-weight:400;line-height:1.5em;letter-spacing:0.1em;word-spacing:0.2em;padding:0px;font-size:0.8em}
.thema_box spec, .thema_box_big spec{display:block;font-weight: 400;color:rgba(255,255,255,1);font-size:0.7em;border-top:1px solid rgba(255,255,255,1)}
.thema_box red, .thema_box_big red{font-size:0.8em;text-transform:uppercase}
.thema_box spec i, .thema_box_big spec i{display:inline}
.thema_box spec:first-child, .thema_box_big spec:first-child{margin-top:10px}
.thema_box spec strong, .thema_box_big spec strong{font-weight: 700;color:rgba(255,255,255,1);font-size:0.9em;display:inline-block;width:150px}

.thema_box .info_box, .thema_box_big .info_box{border-top:1px solid rgba(255,255,255,1);display:flex;flex-wrap:wrap;width:100%;padding:10px 0px 0px 0px;margin:0 auto;align-items:flex-start;justify-content:flex-start}
.thema_box .info_box info, .thema_box_big .info_box info{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;width:52px;padding:0px 0px 5px 0px; height:62px;font-size:0.6em;line-height:1em;text-transform:uppercase;text-align:center;vertical-align: top}
.thema_box .info_box info img, .thema_box_big .info_box info img{width:35px;margin-bottom:5px}

.thema_seperator{display: inline-block;flex-grow: 1;height:auto;width: calc(100% * (1/4) - 101px);padding:0px 25px 0px 25px;margin:0px 25px 0px 25px;border-top:1px solid rgba(225,0,0,1)}
.thema_seperator_big{display: inline-block;flex-grow: 1;height:auto;width: calc(100% * (1/2) - 101px);padding:0px 25px 0px 25px;margin:0px 25px 0px 25px;border-top:1px solid rgba(225,0,0,1)}

.thema_box .menu{display: flex;flex-direction:column;align-items: center; text-align:center;padding-top:25px}
.thema_box .menu img{display:inline;width:15px;}
.thema_box .menu item{display:block;width:100%;margin:0 auto;font-weight: 700;color:rgba(255,255,255,1);text-transform:uppercase;font-size:0.8em;padding:10px 0px 0px 0px}
.thema_box .menu item:first-child{padding:0px 0px 0px 0px}
.thema_box .menu beschrijving{display:block;width:100%;margin:0 auto;font-style: italic;font-size:0.7em;line-height:1.3em}

groen{color:rgba(0,200,0,1)}
rood{color:rgba(225,0,0,1)}

.clear{width:100%;display:block;clear:both;height:1px}

/* slider */
slider{width:100%;margin:0 auto;background-color:rgba(255,255,255,0.2);height:150px}
.bx-wrapper {width:100%;min-width:100%;margin:0 auto;padding: 0; *zoom: 1; -ms-touch-action: pan-y; touch-action: pan-y}
.bx-wrapper img {height:100%; max-height:250px; display: block}
.bxslider {	margin: 0;padding: 0;min-width:100%}
ul.bxslider { list-style: none}
ul.bxslider li a {margin:0px;padding:0px;text-decoration:none;border:0px}
ul.bxslider li a {margin:0px;padding:0px;text-decoration:none;border:0px}
ul.bxslider li a:after{opacity: 0;-webkit-transition: .25s all ease-in-out;display:block;content:"\e80b";font-family: "icons";width:250px;height:250px;line-height:250px;text-align:center;color:rgba(255,255,255,1);font-size:4em;left:0px;top:0px;position:absolute;font-weight:normal;background-color:rgba(225,0,0,0.8)}
ul.bxslider li a:hover:after{opacity:1;font-size:7em}

.bx-viewport { -webkit-transform: translatez(0)}
.bx-wrapper { background: rgba(0,0,0,0)}

/* footer */
.footer{font-size:0.7em}
.footer .boxes .box:first-child{padding-right:30px;text-align:right}
.footer .boxes .box:first-child p{text-align:right}
.footer .boxes .box:first-child a{display:block;text-transform:uppercase;padding-right:5px;margin-bottom:10px;border-right:1px solid rgba(0,0,0,1);border-bottom:0px solid rgba(0,0,0,0)}
.footer .boxes .box:first-child a:hover{padding-right:10px;border-right:1px solid rgba(255,255,255,1)}
.footer .boxes .box:first-child a.active{color:rgba(255,255,255,1)}
.footer .boxes .box:first-child a.active:hover{padding-right:10px;border-right:1px solid rgba(255,255,255,1)}
.footer .boxes .box:last-child{padding-left:30px;}

.footer p{text-align: justify}
.footer a{color:rgba(0,0,0,1);font-weight:700;text-decoration:none;width:auto}
.footer a:hover{color:rgba(255,255,255,1)}

.desktop{display:block} 
.mobile{display:none}
#menu_mobile{display:none}
.mobile_menu{display:none}
.schaduw_logo{display:none}
#menuToggle{display:none}

@media (max-width: 630px) {

.balk{display:none}
	
.schaduw_logo{z-index:777;display:block;position:fixed;height:200px;width:100vw;background: linear-gradient(0deg, rgba(2,0,36,1) 0%, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 100%);top:0px}

/* menu */
#menuToggle{display: block;position: fixed;top: 20px;left: 15px;z-index: 999;-webkit-user-select: none;user-select: none}

#menulabel:after{opacity:1;display: block;top:45px;left:12px;width: auto;height: 33px;position: fixed;color: rgba(0,0,0,1);z-index:999;content:'menu';transition: left 0.5s cubic-bezier(0.77,0.2,0.05,1.0), top 0.5s ease, color 0.5s ease}

#menuToggle input{display: block;width: 40px;height: 32px;position: absolute;top: -7px;left: 2px;cursor: pointer;opacity: 0;z-index: 2;-webkit-touch-callout: none;transition: left 0.5s cubic-bezier(0.77,0.2,0.05,1.0)}
#menuToggle span{display: block;width: 33px;height: 4px;margin-left:2px;margin-bottom: 5px;position: relative;background: rgba(255,255,255,1);border-radius: 3px;z-index: 1;transform-origin: 4px 0px;transition: margin-left 0.5s cubic-bezier(0.77,0.2,0.05,1.0), transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),opacity 0.55s ease}
#menuToggle span:first-child{transform-origin: 0% 0%}
#menuToggle span:nth-last-child(2){transform-origin: 0% 100%}

/* Transform all the slices of hamburger into a crossmark */
#menuToggle input:checked ~ span{margin-left:6px;opacity: 1;transform: rotate(45deg) translate(-2px, -1px);background: rgba(255,0,0,1)}
#menuToggle input:checked ~ span:nth-last-child(3){opacity: 0;transform: rotate(0deg) scale(0.2, 0.2)}
#menuToggle input:checked ~ span:nth-last-child(2){margin-left:6px;transform: rotate(-45deg) translate(0, -1px)}
#menuToggle input:checked ~ #balkje{background-color:rgba(255,0,0,1)}
#menuToggle input:checked ~ ul{transform: none;background-color:rgba(0,0,0,0.8)}
#menuToggle input:checked ~ #menu li{transform:translate(-0px, 0)}
#menuToggle input:checked ~ #menulabel:after{left:15px;top:46px;content:'sluit';color:rgba(255,255,255,1)}

#menuBlokje{opacity:1;display: block;top:0px;left:0px;width: 69px;height: 69px;position: fixed;background: rgba(255,0,0,1);z-index:1;transition:background 0.5s ease}

#menuToggle input:checked ~ #menuBlokje{background: rgba(0,0,0,0.9)}

#menu{display:flex;align-content:center;align-items:center;flex-direction: column; position: absolute;width: 100vw;margin: -120px 0 0 -15px;padding: 135px 0px 50px 0px;height:100vh;background-color:rgba(0,0,0,0.8);list-style-type: none;-webkit-font-smoothing: antialiased;transform-origin: 0% 0%;transform: translate(-100vw, 0);transition: transform 1s cubic-bezier(0.77,0.2,0.05,1.0);overflow:hidden}
#menu a.menu_knop li{text-transform:uppercase;font-weight:700;width:auto;padding:0px 0px 20px 0px;font-size:1.2em;height:auto;color:rgba(255,255,255,1);border-bottom: 2px solid rgba(255,255,255,0);text-decoration:none;}
#menu a.menu_knop.active li{color:rgba(255,0,0,1)}
#menu .mobile_info{text-align: center; padding-top:25px;font-size:0.8em}
#menu .mobile_info strong{font-weight:700}

#logo_small_mobile{display:block;margin:0 auto;height:auto;width:30%;max-width:450px;padding-top:15px;}

h1{text-align: left}
h2{text-align: left}
	
.columns{display:flex;flex-direction:column;justify-content:space-between;align-items:flex-start;width:100%}
.coll{display:block;vertical-align:top;height:auto;padding:2,5%;max-width:630px;width:95%}
	
.boxes{display:flex;flex-direction:column;justify-content:space-between;align-items:center;width:100%}
.referenties{display:flex;flex-direction:column;justify-content:flex-start;align-items:center}
.balk .wrapper .menu {display:flex;flex-direction:column;justify-content:space-between;align-items: center;align-content:center;width:100%;height:75px;z-index:999}

.box_full{flex:1;display:block;vertical-align:top;height:auto;padding:10px 20px 10px 20px;width:calc(100% - 40px)}
.box_single{flex:1;display:block}
	
.pitmaster{height:250px;line-height:250px;width:250px;margin-bottom:50px;overflow:hidden;background-position:center center}
	
.thema_box_big{display: inline-block;flex-grow: 1;height:auto;width: calc(100% * (1/1) - 51px);padding:0px 25px 0px 25px;margin:25px 0px 25px 0px;border-right:1px solid rgba(0,0,0,1)}
.thema_box{display: inline-block;flex-grow: 1;height:auto;width: calc(100% * (1/1) - 51px);padding:0px 25px 0px 25px;margin:25px 0px 25px 0px;border-right:1px solid rgba(0,0,0,1)}
.thema_seperator{display: none}
.thema_seperator_big{display: none}
.thema_box_big .catering .blokje{display: inline-block;flex-grow: 1;height:auto;width: calc(100% * (1/1) - 25px)}

.footer .boxes .box:last-child{display:none}
.footer .boxes .box:first-child{display:none}
	
}

@media (max-width: 700px) and (orientation:landscape){
	.desktop{display:none}
	.mobile{display:block}
}

@media (max-width: 700px) and (orientation:portrait){
	.desktop{display:none}
	.mobile{display:block}
	

}