/* JERA ON AIR TO THE FUTURE! - 2017 - Cybox Backstage CMS Cybox internet & communicatie - Boxmeer www.cybox.nl */ @import url('https://fonts.googleapis.com/css?family=Roboto+Mono:400,400i,500,700'); @import url('https://fonts.googleapis.com/css?family=Roboto:400,400i,500,500i,700'); @font-face { font-family: 'jera'; src: url('../fonts/jera-font-air-webfont.woff2') format('woff2'), url('../fonts/jera-font-air-webfont.woff') format('woff'); font-weight: normal; font-style: normal; } @font-face { font-family: 'block'; src: url('../fonts/blocktregcon-webfont.woff2') format('woff2'), url('../fonts/blocktregcon-webfont.woff') format('woff'); font-weight: normal; font-style: normal; } /* 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, font, 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 { margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baseline; background: transparent; } body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } /* remember to define focus styles! */ :focus { outline: 0; } /* remember to highlight inserts somehow! */ ins { text-decoration: none; } del { text-decoration: line-through; } /* tables still need 'cellspacing="0"' in the markup */ table { border-collapse: collapse; border-spacing: 0; } /* clearfix */ .cf:before, .cf:after { content: " "; /* 1 */ display: table; /* 2 */ } .cf:after { clear: both; } /** * For IE 6/7 only * Include this rule to trigger hasLayout and contain floats. */ .cf { *zoom: 1; } /* animate.css */ .animated{animation-duration:1s;animation-fill-mode:both}.animated.infinite{animation-iteration-count:infinite}.animated.hinge{animation-duration:2s}.animated.bounceIn,.animated.bounceOut,.animated.flipOutX,.animated.flipOutY{animation-duration:.75s}@keyframes bounce{0%,20%,53%,80%,to{animation-timing-function:cubic-bezier(.215,.61,.355,1);transform:translateZ(0)}40%,43%{animation-timing-function:cubic-bezier(.755,.05,.855,.06);transform:translate3d(0,-30px,0)}70%{animation-timing-function:cubic-bezier(.755,.05,.855,.06);transform:translate3d(0,-15px,0)}90%{transform:translate3d(0,-4px,0)}}.bounce{animation-name:bounce;transform-origin:center bottom}@keyframes flash{0%,50%,to{opacity:1}25%,75%{opacity:0}}.flash{animation-name:flash}@keyframes pulse{0%{transform:scaleX(1)}50%{transform:scale3d(1.05,1.05,1.05)}to{transform:scaleX(1)}}.pulse{animation-name:pulse}@keyframes rubberBand{0%{transform:scaleX(1)}30%{transform:scale3d(1.25,.75,1)}40%{transform:scale3d(.75,1.25,1)}50%{transform:scale3d(1.15,.85,1)}65%{transform:scale3d(.95,1.05,1)}75%{transform:scale3d(1.05,.95,1)}to{transform:scaleX(1)}}.rubberBand{animation-name:rubberBand}@keyframes shake{0%,to{transform:translateZ(0)}10%,30%,50%,70%,90%{transform:translate3d(-10px,0,0)}20%,40%,60%,80%{transform:translate3d(10px,0,0)}}.shake{animation-name:shake}@keyframes headShake{0%{transform:translateX(0)}6.5%{transform:translateX(-6px) rotateY(-9deg)}18.5%{transform:translateX(5px) rotateY(7deg)}31.5%{transform:translateX(-3px) rotateY(-5deg)}43.5%{transform:translateX(2px) rotateY(3deg)}50%{transform:translateX(0)}}.headShake{animation-timing-function:ease-in-out;animation-name:headShake}@keyframes swing{20%{transform:rotate(15deg)}40%{transform:rotate(-10deg)}60%{transform:rotate(5deg)}80%{transform:rotate(-5deg)}to{transform:rotate(0deg)}}.swing{transform-origin:top center;animation-name:swing}@keyframes tada{0%{transform:scaleX(1)}10%,20%{transform:scale3d(.9,.9,.9) rotate(-3deg)}30%,50%,70%,90%{transform:scale3d(1.1,1.1,1.1) rotate(3deg)}40%,60%,80%{transform:scale3d(1.1,1.1,1.1) rotate(-3deg)}to{transform:scaleX(1)}}.tada{animation-name:tada}@keyframes wobble{0%{transform:none}15%{transform:translate3d(-25%,0,0) rotate(-5deg)}30%{transform:translate3d(20%,0,0) rotate(3deg)}45%{transform:translate3d(-15%,0,0) rotate(-3deg)}60%{transform:translate3d(10%,0,0) rotate(2deg)}75%{transform:translate3d(-5%,0,0) rotate(-1deg)}to{transform:none}}.wobble{animation-name:wobble}@keyframes jello{0%,11.1%,to{transform:none}22.2%{transform:skewX(-12.5deg) skewY(-12.5deg)}33.3%{transform:skewX(6.25deg) skewY(6.25deg)}44.4%{transform:skewX(-3.125deg) skewY(-3.125deg)}55.5%{transform:skewX(1.5625deg) skewY(1.5625deg)}66.6%{transform:skewX(-.78125deg) skewY(-.78125deg)}77.7%{transform:skewX(.390625deg) skewY(.390625deg)}88.8%{transform:skewX(-.1953125deg) skewY(-.1953125deg)}}.jello{animation-name:jello;transform-origin:center}@keyframes bounceIn{0%,20%,40%,60%,80%,to{animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:0;transform:scale3d(.3,.3,.3)}20%{transform:scale3d(1.1,1.1,1.1)}40%{transform:scale3d(.9,.9,.9)}60%{opacity:1;transform:scale3d(1.03,1.03,1.03)}80%{transform:scale3d(.97,.97,.97)}to{opacity:1;transform:scaleX(1)}}.bounceIn{animation-name:bounceIn}@keyframes bounceInDown{0%,60%,75%,90%,to{animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:0;transform:translate3d(0,-3000px,0)}60%{opacity:1;transform:translate3d(0,25px,0)}75%{transform:translate3d(0,-10px,0)}90%{transform:translate3d(0,5px,0)}to{transform:none}}.bounceInDown{animation-name:bounceInDown}@keyframes bounceInLeft{0%,60%,75%,90%,to{animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:0;transform:translate3d(-3000px,0,0)}60%{opacity:1;transform:translate3d(25px,0,0)}75%{transform:translate3d(-10px,0,0)}90%{transform:translate3d(5px,0,0)}to{transform:none}}.bounceInLeft{animation-name:bounceInLeft}@keyframes bounceInRight{0%,60%,75%,90%,to{animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:0;transform:translate3d(3000px,0,0)}60%{opacity:1;transform:translate3d(-25px,0,0)}75%{transform:translate3d(10px,0,0)}90%{transform:translate3d(-5px,0,0)}to{transform:none}}.bounceInRight{animation-name:bounceInRight}@keyframes bounceInUp{0%,60%,75%,90%,to{animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:0;transform:translate3d(0,3000px,0)}60%{opacity:1;transform:translate3d(0,-20px,0)}75%{transform:translate3d(0,10px,0)}90%{transform:translate3d(0,-5px,0)}to{transform:translateZ(0)}}.bounceInUp{animation-name:bounceInUp}@keyframes bounceOut{20%{transform:scale3d(.9,.9,.9)}50%,55%{opacity:1;transform:scale3d(1.1,1.1,1.1)}to{opacity:0;transform:scale3d(.3,.3,.3)}}.bounceOut{animation-name:bounceOut}@keyframes bounceOutDown{20%{transform:translate3d(0,10px,0)}40%,45%{opacity:1;transform:translate3d(0,-20px,0)}to{opacity:0;transform:translate3d(0,2000px,0)}}.bounceOutDown{animation-name:bounceOutDown}@keyframes bounceOutLeft{20%{opacity:1;transform:translate3d(20px,0,0)}to{opacity:0;transform:translate3d(-2000px,0,0)}}.bounceOutLeft{animation-name:bounceOutLeft}@keyframes bounceOutRight{20%{opacity:1;transform:translate3d(-20px,0,0)}to{opacity:0;transform:translate3d(2000px,0,0)}}.bounceOutRight{animation-name:bounceOutRight}@keyframes bounceOutUp{20%{transform:translate3d(0,-10px,0)}40%,45%{opacity:1;transform:translate3d(0,20px,0)}to{opacity:0;transform:translate3d(0,-2000px,0)}}.bounceOutUp{animation-name:bounceOutUp}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.fadeIn{animation-name:fadeIn}@keyframes fadeInDown{0%{opacity:0;transform:translate3d(0,-100%,0)}to{opacity:1;transform:none}}.fadeInDown{animation-name:fadeInDown}@keyframes fadeInDownBig{0%{opacity:0;transform:translate3d(0,-2000px,0)}to{opacity:1;transform:none}}.fadeInDownBig{animation-name:fadeInDownBig}@keyframes fadeInLeft{0%{opacity:0;transform:translate3d(-100%,0,0)}to{opacity:1;transform:none}}.fadeInLeft{animation-name:fadeInLeft}@keyframes fadeInLeftBig{0%{opacity:0;transform:translate3d(-2000px,0,0)}to{opacity:1;transform:none}}.fadeInLeftBig{animation-name:fadeInLeftBig}@keyframes fadeInRight{0%{opacity:0;transform:translate3d(100%,0,0)}to{opacity:1;transform:none}}.fadeInRight{animation-name:fadeInRight}@keyframes fadeInRightBig{0%{opacity:0;transform:translate3d(2000px,0,0)}to{opacity:1;transform:none}}.fadeInRightBig{animation-name:fadeInRightBig}@keyframes fadeInUp{0%{opacity:0;transform:translate3d(0,100%,0)}to{opacity:1;transform:none}}.fadeInUp{animation-name:fadeInUp}@keyframes fadeInUpBig{0%{opacity:0;transform:translate3d(0,2000px,0)}to{opacity:1;transform:none}}.fadeInUpBig{animation-name:fadeInUpBig}@keyframes fadeOut{0%{opacity:1}to{opacity:0}}.fadeOut{animation-name:fadeOut}@keyframes fadeOutDown{0%{opacity:1}to{opacity:0;transform:translate3d(0,100%,0)}}.fadeOutDown{animation-name:fadeOutDown}@keyframes fadeOutDownBig{0%{opacity:1}to{opacity:0;transform:translate3d(0,2000px,0)}}.fadeOutDownBig{animation-name:fadeOutDownBig}@keyframes fadeOutLeft{0%{opacity:1}to{opacity:0;transform:translate3d(-100%,0,0)}}.fadeOutLeft{animation-name:fadeOutLeft}@keyframes fadeOutLeftBig{0%{opacity:1}to{opacity:0;transform:translate3d(-2000px,0,0)}}.fadeOutLeftBig{animation-name:fadeOutLeftBig}@keyframes fadeOutRight{0%{opacity:1}to{opacity:0;transform:translate3d(100%,0,0)}}.fadeOutRight{animation-name:fadeOutRight}@keyframes fadeOutRightBig{0%{opacity:1}to{opacity:0;transform:translate3d(2000px,0,0)}}.fadeOutRightBig{animation-name:fadeOutRightBig}@keyframes fadeOutUp{0%{opacity:1}to{opacity:0;transform:translate3d(0,-100%,0)}}.fadeOutUp{animation-name:fadeOutUp}@keyframes fadeOutUpBig{0%{opacity:1}to{opacity:0;transform:translate3d(0,-2000px,0)}}.fadeOutUpBig{animation-name:fadeOutUpBig}@keyframes flip{0%{transform:perspective(400px) rotateY(-1turn);animation-timing-function:ease-out}40%{transform:perspective(400px) translateZ(150px) rotateY(-190deg);animation-timing-function:ease-out}50%{transform:perspective(400px) translateZ(150px) rotateY(-170deg);animation-timing-function:ease-in}80%{transform:perspective(400px) scale3d(.95,.95,.95);animation-timing-function:ease-in}to{transform:perspective(400px);animation-timing-function:ease-in}}.animated.flip{-webkit-backface-visibility:visible;backface-visibility:visible;animation-name:flip}@keyframes flipInX{0%{transform:perspective(400px) rotateX(90deg);animation-timing-function:ease-in;opacity:0}40%{transform:perspective(400px) rotateX(-20deg);animation-timing-function:ease-in}60%{transform:perspective(400px) rotateX(10deg);opacity:1}80%{transform:perspective(400px) rotateX(-5deg)}to{transform:perspective(400px)}}.flipInX{-webkit-backface-visibility:visible!important;backface-visibility:visible!important;animation-name:flipInX}@keyframes flipInY{0%{transform:perspective(400px) rotateY(90deg);animation-timing-function:ease-in;opacity:0}40%{transform:perspective(400px) rotateY(-20deg);animation-timing-function:ease-in}60%{transform:perspective(400px) rotateY(10deg);opacity:1}80%{transform:perspective(400px) rotateY(-5deg)}to{transform:perspective(400px)}}.flipInY{-webkit-backface-visibility:visible!important;backface-visibility:visible!important;animation-name:flipInY}@keyframes flipOutX{0%{transform:perspective(400px)}30%{transform:perspective(400px) rotateX(-20deg);opacity:1}to{transform:perspective(400px) rotateX(90deg);opacity:0}}.flipOutX{animation-name:flipOutX;-webkit-backface-visibility:visible!important;backface-visibility:visible!important}@keyframes flipOutY{0%{transform:perspective(400px)}30%{transform:perspective(400px) rotateY(-15deg);opacity:1}to{transform:perspective(400px) rotateY(90deg);opacity:0}}.flipOutY{-webkit-backface-visibility:visible!important;backface-visibility:visible!important;animation-name:flipOutY}@keyframes lightSpeedIn{0%{transform:translate3d(100%,0,0) skewX(-30deg);opacity:0}60%{transform:skewX(20deg);opacity:1}80%{transform:skewX(-5deg);opacity:1}to{transform:none;opacity:1}}.lightSpeedIn{animation-name:lightSpeedIn;animation-timing-function:ease-out}@keyframes lightSpeedOut{0%{opacity:1}to{transform:translate3d(100%,0,0) skewX(30deg);opacity:0}}.lightSpeedOut{animation-name:lightSpeedOut;animation-timing-function:ease-in}@keyframes rotateIn{0%{transform-origin:center;transform:rotate(-200deg);opacity:0}to{transform-origin:center;transform:none;opacity:1}}.rotateIn{animation-name:rotateIn}@keyframes rotateInDownLeft{0%{transform-origin:left bottom;transform:rotate(-45deg);opacity:0}to{transform-origin:left bottom;transform:none;opacity:1}}.rotateInDownLeft{animation-name:rotateInDownLeft}@keyframes rotateInDownRight{0%{transform-origin:right bottom;transform:rotate(45deg);opacity:0}to{transform-origin:right bottom;transform:none;opacity:1}}.rotateInDownRight{animation-name:rotateInDownRight}@keyframes rotateInUpLeft{0%{transform-origin:left bottom;transform:rotate(45deg);opacity:0}to{transform-origin:left bottom;transform:none;opacity:1}}.rotateInUpLeft{animation-name:rotateInUpLeft}@keyframes rotateInUpRight{0%{transform-origin:right bottom;transform:rotate(-90deg);opacity:0}to{transform-origin:right bottom;transform:none;opacity:1}}.rotateInUpRight{animation-name:rotateInUpRight}@keyframes rotateOut{0%{transform-origin:center;opacity:1}to{transform-origin:center;transform:rotate(200deg);opacity:0}}.rotateOut{animation-name:rotateOut}@keyframes rotateOutDownLeft{0%{transform-origin:left bottom;opacity:1}to{transform-origin:left bottom;transform:rotate(45deg);opacity:0}}.rotateOutDownLeft{animation-name:rotateOutDownLeft}@keyframes rotateOutDownRight{0%{transform-origin:right bottom;opacity:1}to{transform-origin:right bottom;transform:rotate(-45deg);opacity:0}}.rotateOutDownRight{animation-name:rotateOutDownRight}@keyframes rotateOutUpLeft{0%{transform-origin:left bottom;opacity:1}to{transform-origin:left bottom;transform:rotate(-45deg);opacity:0}}.rotateOutUpLeft{animation-name:rotateOutUpLeft}@keyframes rotateOutUpRight{0%{transform-origin:right bottom;opacity:1}to{transform-origin:right bottom;transform:rotate(90deg);opacity:0}}.rotateOutUpRight{animation-name:rotateOutUpRight}@keyframes hinge{0%{transform-origin:top left;animation-timing-function:ease-in-out}20%,60%{transform:rotate(80deg);transform-origin:top left;animation-timing-function:ease-in-out}40%,80%{transform:rotate(60deg);transform-origin:top left;animation-timing-function:ease-in-out;opacity:1}to{transform:translate3d(0,700px,0);opacity:0}}.hinge{animation-name:hinge}@keyframes jackInTheBox{0%{opacity:0;transform:scale(.1) rotate(30deg);transform-origin:center bottom}50%{transform:rotate(-10deg)}70%{transform:rotate(3deg)}to{opacity:1;transform:scale(1)}}.jackInTheBox{animation-name:jackInTheBox}@keyframes rollIn{0%{opacity:0;transform:translate3d(-100%,0,0) rotate(-120deg)}to{opacity:1;transform:none}}.rollIn{animation-name:rollIn}@keyframes rollOut{0%{opacity:1}to{opacity:0;transform:translate3d(100%,0,0) rotate(120deg)}}.rollOut{animation-name:rollOut}@keyframes zoomIn{0%{opacity:0;transform:scale3d(.3,.3,.3)}50%{opacity:1}}.zoomIn{animation-name:zoomIn}@keyframes zoomInDown{0%{opacity:0;transform:scale3d(.1,.1,.1) translate3d(0,-1000px,0);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}60%{opacity:1;transform:scale3d(.475,.475,.475) translate3d(0,60px,0);animation-timing-function:cubic-bezier(.175,.885,.32,1)}}.zoomInDown{animation-name:zoomInDown}@keyframes zoomInLeft{0%{opacity:0;transform:scale3d(.1,.1,.1) translate3d(-1000px,0,0);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}60%{opacity:1;transform:scale3d(.475,.475,.475) translate3d(10px,0,0);animation-timing-function:cubic-bezier(.175,.885,.32,1)}}.zoomInLeft{animation-name:zoomInLeft}@keyframes zoomInRight{0%{opacity:0;transform:scale3d(.1,.1,.1) translate3d(1000px,0,0);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}60%{opacity:1;transform:scale3d(.475,.475,.475) translate3d(-10px,0,0);animation-timing-function:cubic-bezier(.175,.885,.32,1)}}.zoomInRight{animation-name:zoomInRight}@keyframes zoomInUp{0%{opacity:0;transform:scale3d(.1,.1,.1) translate3d(0,1000px,0);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}60%{opacity:1;transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);animation-timing-function:cubic-bezier(.175,.885,.32,1)}}.zoomInUp{animation-name:zoomInUp}@keyframes zoomOut{0%{opacity:1}50%{opacity:0;transform:scale3d(.3,.3,.3)}to{opacity:0}}.zoomOut{animation-name:zoomOut}@keyframes zoomOutDown{40%{opacity:1;transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}to{opacity:0;transform:scale3d(.1,.1,.1) translate3d(0,2000px,0);transform-origin:center bottom;animation-timing-function:cubic-bezier(.175,.885,.32,1)}}.zoomOutDown{animation-name:zoomOutDown}@keyframes zoomOutLeft{40%{opacity:1;transform:scale3d(.475,.475,.475) translate3d(42px,0,0)}to{opacity:0;transform:scale(.1) translate3d(-2000px,0,0);transform-origin:left center}}.zoomOutLeft{animation-name:zoomOutLeft}@keyframes zoomOutRight{40%{opacity:1;transform:scale3d(.475,.475,.475) translate3d(-42px,0,0)}to{opacity:0;transform:scale(.1) translate3d(2000px,0,0);transform-origin:right center}}.zoomOutRight{animation-name:zoomOutRight}@keyframes zoomOutUp{40%{opacity:1;transform:scale3d(.475,.475,.475) translate3d(0,60px,0);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}to{opacity:0;transform:scale3d(.1,.1,.1) translate3d(0,-2000px,0);transform-origin:center bottom;animation-timing-function:cubic-bezier(.175,.885,.32,1)}}.zoomOutUp{animation-name:zoomOutUp}@keyframes slideInDown{0%{transform:translate3d(0,-100%,0);visibility:visible}to{transform:translateZ(0)}}.slideInDown{animation-name:slideInDown}@keyframes slideInLeft{0%{transform:translate3d(-100%,0,0);visibility:visible}to{transform:translateZ(0)}}.slideInLeft{animation-name:slideInLeft}@keyframes slideInRight{0%{transform:translate3d(100%,0,0);visibility:visible}to{transform:translateZ(0)}}.slideInRight{animation-name:slideInRight}@keyframes slideInUp{0%{transform:translate3d(0,100%,0);visibility:visible}to{transform:translateZ(0)}}.slideInUp{animation-name:slideInUp}@keyframes slideOutDown{0%{transform:translateZ(0)}to{visibility:hidden;transform:translate3d(0,100%,0)}}.slideOutDown{animation-name:slideOutDown}@keyframes slideOutLeft{0%{transform:translateZ(0)}to{visibility:hidden;transform:translate3d(-100%,0,0)}}.slideOutLeft{animation-name:slideOutLeft}@keyframes slideOutRight{0%{transform:translateZ(0)}to{visibility:hidden;transform:translate3d(100%,0,0)}}.slideOutRight{animation-name:slideOutRight}@keyframes slideOutUp{0%{transform:translateZ(0)}to{visibility:hidden;transform:translate3d(0,-100%,0)}}.slideOutUp{animation-name:slideOutUp} /* // *************************** OWL CAROUSEL // *************************** */ /* * Core Owl Carousel CSS File * v1.3.2 */ /* clearfix */ .owl-carousel .owl-wrapper:after {content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; } /* display none until init */ .owl-carousel{display: none; position: relative; width: 100%; -ms-touch-action: pan-y; } .owl-carousel .owl-wrapper{display: none; position: relative; -webkit-transform: translate3d(0px, 0px, 0px); } .owl-carousel .owl-wrapper-outer{overflow: hidden; position: relative; float:left; width: 100%; } .owl-carousel .owl-wrapper-outer.autoHeight{-webkit-transition: height 500ms ease-in-out; -moz-transition: height 500ms ease-in-out; -ms-transition: height 500ms ease-in-out; -o-transition: height 500ms ease-in-out; transition: height 500ms ease-in-out; } .owl-carousel .owl-item{float: left; } .owl-controls .owl-page, .owl-controls .owl-buttons div{cursor: pointer; } .owl-controls {-webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } /* mouse grab icon */ .grabbing {cursor:url(../images/grabbing.png) 8 8, move; } /* fix */ .owl-carousel .owl-wrapper, .owl-carousel .owl-item{-webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -ms-backface-visibility: hidden; -webkit-transform: translate3d(0,0,0); -moz-transform: translate3d(0,0,0); -ms-transform: translate3d(0,0,0); } .owl-theme .owl-controls{ text-align: center; } /* Styling Next and Prev buttons */ .owl-theme .owl-controls .owl-buttons div{} .owl-buttons {position: absolute; left: -5%; bottom: 0px; width: 110%; height: 100%; z-index: 9999; box-sizing: border-box; font-size: 2em; color: #222; pointer-events: none; line-height: 1; } .owl-buttons .owl-prev {position: absolute; left: 40px; /* 1em zonder label */ top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); pointer-events: auto; } .owl-buttons .owl-next {position: absolute; right: 40px; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); pointer-events: auto; } /* Clickable class fix problem with hover on touch devices */ /* Use it for non-touch hover action */ .owl-theme .owl-controls.clickable .owl-buttons div:hover{} /* Styling Pagination*/ .owl-theme .owl-controls .owl-page{display: inline-block; zoom: 1; *display: inline;/*IE7 life-saver */ } .owl-theme .owl-controls .owl-page span{display: block; width: 10px; height: 10px; margin: 0 5px; -webkit-border-radius: 20px; -moz-border-radius: 20px; border-radius: 20px; background: var(--maincolor); transition: background 70ms linear; } .owl-theme .owl-controls .owl-page.active span, .owl-theme .owl-controls.clickable .owl-page:hover span{ background: var(--supportcolor); } /* If PaginationNumbers is true */ .owl-theme .owl-controls .owl-page span.owl-numbers{height: auto; width: auto; color: #FFF; padding: 2px 10px; font-size: 15px; -webkit-border-radius: 30px; -moz-border-radius: 30px; border-radius: 30px; } /* preloading images */ .owl-item.loading{/*background: url(AjaxLoader.gif) no-repeat center center */ background-image: url('../images/loading.gif?123'); background-position: 50% 50%; background-repeat: no-repeat; background-size: 30px 32px; background-repeat: no-repeat; background-position: center center; min-height: 200px; } .sponsors .owl-item.loading {background-image: url('../images/loading_invert.gif'); } #sfeer .owl-item.loading {background-image: url('../images/loading_red.gif'); } html, body { margin:0; padding:0; height: 100%; -webkit-font-smoothing: antialiased; } body { font-family: 'Roboto Mono', sans-serif; font-size: 1em; line-height: 1.7; background: var(--backcolor); color: var(--maincolor); overflow-x: hidden; overflow-y: scroll; } body.noscroll { overflow: hidden; } /* links */ a { text-decoration: none; color: var(--maincolor); } a:hover { color: var(--hovercolor); } /* when menu is out */ #disabled { content: ""; position: fixed; left: 0; top: 0; width: 100%; height: 100%; opacity: 0; z-index: 9; transition: all 300ms ease-in-out; transition-delay: 100ms; pointer-events: none; } #disabled:after { content: ""; width: 100%; height: 100%; position: absolute; left: 0; top: 0; background: var(--supportcolor); opacity: 0.8; z-index: 1; } #disabled.show { opacity: 1; pointer-events: all; cursor: none; } #disabled .close { width: 60px; height: 60px; position: fixed; margin-left: -30px; margin-top: 0px; opacity: 0; transition: margin 200ms; z-index: 2; } #disabled:hover .close { opacity: 1; margin-top: -30px; } #disabled .close svg { display: block; width: 60px!important; fill: var(--maincolor); } /* NAV */ #header { height: 100px; width: 100%; position: fixed; left: 0; top: 0; box-sizing: border-box; background: var(--headerfooterbgcolor); transition: all 300ms ease-in-out; z-index: 7; animation-duration: 1000ms; } #header:before /* extra black space for bouncey effect */ { content: ""; position: absolute; left: 0; top: -300px; height: 300px; width: 100%; background: var(--headerfooterbgcolor); } #header #logo { height: 110px; position: absolute; left: 50%; top: 50%; margin-top: 10px; /* for svg */ /* margin-left: -35px; /// for span w/ year */ -webkit-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); z-index: 2; transition: margin 200ms; } #header #logo a svg { display: block; height: 100%; fill: var(--supportcolor); } #header #logo a span { position: absolute; right: -50px; top: 35px; font-family: "jera"; -webkit-transform: rotate(-90deg); transform: rotate(-90deg); width: 70px; height: 30px; text-align: center; font-size: 2.7em; color: var(--supportcolor); line-height: 1; text-transform: uppercase; } #header #logo .datebanner { position: absolute; left: 55%; bottom: 5px; width: 230px; -webkit-transform: translateX(-50%) rotate(-2deg); transform: translateX(-50%) rotate(-2deg); } #header #logo .datebanner svg { display: block; width: 100%; fill: var(--headerfooterbgcolor); display: none; } #header #logo .datebanner span { position: absolute; left: 50%; top: 53%; -webkit-transform: translateX(-50%) translateY(-50%) rotate(-1deg); transform: translateX(-50%) translateY(-50%) rotate(-1deg) ; font-size: 1.5em; font-family: "block"; text-transform: uppercase; width: 100%; color: var(--supportcolor); text-align: center; } #header .open-btns { position: absolute; left: 5%; top: 45px; z-index: 999; } #header .open-btn { height: 70px; min-width: 70px; float: left; border-radius: 3px; margin-right: 15px; text-align: center; box-sizing: border-box; font-family: "block"; font-size: 1.4em; cursor: pointer!important; position: relative; transition: margin 300ms ease-out; list-style-type: 1; width: 50px; cursor: pointer!important; } #header .open-btn .icon svg { fill: var(--headerfooterbgcolor); position: absolute; left: 50%; top: 50%; display: block; -webkit-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); width: 30px; height: 30px; z-index: 2; } #header .open-btn#lang-menu .icon svg { height: 13px; width: 13px; left: 70%; } #header .open-btn .icon span { fill: var(--headerfooterbgcolor); position: absolute; left: 38%; top: 50%; display: block; -webkit-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); width: 70px; height: 70px; color: var(--headerfooterbgcolor); font-size: 1.3em; line-height: 70px; text-transform: uppercase; z-index: 2; } #header .open-btn .back { position: relative; z-index: 2; } #header .open-btn .back svg { fill: var(--maincolor); display: block; width: 100%; height: 100%; } #header .open-btn:hover .back svg { fill: var(--hovercolor); } #header .open-btn#lang-menu .choices { position: absolute; left: 50%; top: 108%; background: var(--headerfooterbgcolor); padding: 20px 30px; border-radius: 3px; -webkit-transform: translateX(-50%); transform: translateX(-50%); text-transform: uppercase; line-height: 1; margin-top: -10px; transition: margin 300ms; pointer-events: none; opacity: 0; z-index: 1; } #header .open-btn#lang-menu .choices.show { pointer-events: all; opacity: 1; margin-top: 0; } #header .open-btn#lang-menu .choices a { color: var(--maincolor); opacity: 0.5; display: block; padding: 4px 0; } #header .open-btn#lang-menu .choices a:hover, #header .open-btn#lang-menu .choices a.active { opacity: 1; } #header .open-btn#open-tickets { transform: scale(.8) translateX(-10px); -webkit-transform: scale(.8) translateX(-10px); } #header .open-btn#open-tickets .back { transform: rotate(90deg); -webkit-transform: rotate(90deg); } #header .border { position: absolute; left: -2px; bottom: -30px; width: 101%; height: 50px; pointer-events: none; -webkit-transform: rotate(-2deg); transform: rotate(-2deg); z-index: 1; border: 0px solid #f00; } #header .border svg { fill: var(--headerfooterbgcolor); width: 100%; height: 50px; position: absolute; left: 0; top: 30px; border: 0px solid green; box-sizing: border-box; } #header .border:before { content: ""; width: 100%; height: 100px; background: var(--headerfooterbgcolor); position: absolute; top: -50px; left: 0; } #header #sponsors-top { position: absolute; right: 5%; top: 20px; width: 120px; height: 60px; z-index: 9; overflow: hidden; } #header #sponsors-top img { display: block; width: 100%; } #header.compact { top: -110px; } #header.compact .open-btn#open-menu { margin-top: 80px; } #header.compact .open-btn#lang-menu, #header.compact .open-btn#open-tickets { margin-top: -40px; } #header.compact .open-btn#lang-menu .choices { opacity: 0; pointer-events: none; } #header.compact #logo { margin-top: -60px; } /* // MENU */ #menu { position: fixed; left: 0; top: 0; width: 600px; height: 100%; max-width: 100%; background: var(--backcolor); font-family: 'block'; text-transform: uppercase; -webkit-transform: translateX(-100%); transform: translateX(-100%); transition: all 300ms; z-index: 91; } #menu.show { -webkit-transform: translateX(0); transform: translateX(0); } #menu a { color: var(--maincolor); } #menu ul.buttons li.active a, #menu a:hover { color: var(--hovercolor); } #menu ul.buttons { text-align: center; font-size: 3em; line-height: 1; position: absolute; top: 50%; -webkit-transform: translateY(-50%) skewY(-3deg); transform: translateY(-50%) skewY(-3deg); width: 100%; } #menu ul.buttons li { text-align: center; font-family: "block"; } #menu .border { position: absolute; right: 15px; top: 0; width: 30px; height: 100%; } #menu .border svg { fill: var(--backcolor); height: 100%; } #menu.show .border { right: -25px; } #menu #menu-logo { position: absolute; left: 50%; top: 5%; -webkit-transform: translateX(-50%); transform: translateX(-50%); width: 90%; max-width: 500px; } #menu #menu-logo svg { fill: var(--maincolor); } #menu #menu-logo-below { position: absolute; left: 50%; bottom: 5%; -webkit-transform: translateX(-50%); transform: translateX(-50%); width: 90%; max-width: 500px; } #menu #menu-logo-below svg { fill: var(--maincolor); -webkit-transform: rotate(180deg); transform: rotate(180deg); } /* // FOOTER */ #footer { min-height: 300px; background: var(--headerfooterbgcolor); position: relative; z-index: 6; } #footer .border { position: absolute; left: 0; top: -35px; width: 100%; height: 30px; pointer-events: none; background: var(--backcolor); -webkit-transform: rotate(-2deg); transform: rotate(-2deg); } #footer.home .border { /* background: var(--supportcolor); */ } #footer .border svg { fill: var(--headerfooterbgcolor); position: absolute; left: 0; top: 0; height: 30px; display: block; width: 100%; -webkit-transform: translateY(2px); transform: translateY(2px); /* bg shine thru fix */ } #footer .border:after { content: ""; width: 100%; height: 70px; background: var(--headerfooterbgcolor); position: absolute; left: 0; bottom: -70px; } #footer #footer-overflow { overflow: hidden; position: relative; } #footer #footer-container a { color: var(--maincolor); } #footer #footer-container { width: 90%; margin: 150px auto; margin-bottom: 100px; padding-bottom: 60px; position: relative; padding-left: 30%; box-sizing: border-box; } #footer #footer-container .col { width: 200px; float: left; font-size: 1.4em; line-height: 1.4; } #footer #footer-container .col .title { font-size: 1.3em; padding-bottom: .2em; font-family: "jera"; text-transform: uppercase; color: var(--maincolor); position: relative; } #footer #footer-container .col ul li { position: relative; } #footer #footer-container .col ul li a { display: block; font-family: "block"; text-transform: uppercase; color: var(--maincolor); position: relative; } #footer #footer-container .col ul li a:hover { color: var(--hovercolor); } #footer #footer-container .col ul li.more a { opacity: 0.5; } #footer #footer-container .col .title a.active:before, #footer #footer-container .col ul li.active a:before, #footer #footer-container .col ul li a.active:before { content: ""; width: 5px; height: 5px; position: absolute; left: -20px; top: 50%; margin-top: -2px; box-sizing: border-box; border-radius: 10px; } #footer #footer-container .col ul li.active a, #footer #footer-container .col ul li a.active { color: var(--supportcolor); } #footer #footer-container .col ul li.button_vws a { line-height: 1; background: var(--supportcolor); color: var(--headerfooterbgcolor); display: block; text-align: center; padding: 12px 10px; box-sizing: border-box; padding-bottom: 13px; border-radius: 3px; margin-top: 20px; width: 70%; transform: rotate(-5deg); -webkit-transform: rotate(-5deg); font-size: .8em; } #footer #footer-container .col ul li.button_vws a:hover { background: var(--maincolor); } #footer #footer-container .cybox-tag { position: absolute; margin-top: 10px; width: 125px; font-size: 9px; white-space: nowrap; font-family: "block"; text-transform: uppercase; display: block; font-size: 0.9em; right: 110px; bottom: -10px; -webkit-transform: rotate(-2deg); transform: rotate(-2deg); z-index: 9; } #footer #footer-container .cybox-tag a { display: block; color: var(--maincolor); } #footer #footer-container .cybox-tag svg { width: 60px; display: inline-block; margin-left: 6px; -webkit-transform: translateY(1px); transform: translateY(1px); fill: var(--maincolor); } #footer #footer-container .cybox-tag a:hover, #footer #footer-container .cybox-tag a:hover svg { color: var(--hovercolor); fill: var(--hovercolor); } #footer #footer-container .back-up { position: absolute; right: 0; bottom: 0; width: 30px; height: 30px; cursor: pointer; z-index: 91; } #footer #footer-container .back-up svg { display: block; width: 100%; fill: var(--maincolor); } #footer #footer-container .back-up:hover svg { fill: var(--hovercolor); } #footer #footer-container #social-media-buttons { float: right; position: relative; box-sizing: border-box; margin-top: 5px; } #footer #footer-container #social-media-buttons a { display: block; width: 30px; margin-bottom: 10px; } #footer #footer-container #social-media-buttons a:nth-of-type(odd) { -webkit-transform: rotate(-3deg); transform: rotate(-3deg); } #footer #footer-container #social-media-buttons a:nth-of-type(even) { -webkit-transform: rotate(3deg); transform: rotate(3deg); } #footer #footer-container #social-media-buttons a svg { fill: var(--maincolor); display: block; width: 30px; height: 30px; } #footer #footer-container #social-media-buttons a:hover svg { fill: var(--hovercolor); } #footer #footer-artwork { position: absolute; left: 0; bottom: 0; width: 40%; height: 100%; z-index: 8; pointer-events: none; max-width: 750px; } #footer #footer-artwork svg, #footer #footer-artwork img { display: block; width: 100%; position: absolute; left: 0; bottom: 0; } /* #footer #footer-artwork svg .st0{fill-rule:evenodd;clip-rule:evenodd;fill: var(--birdcolor);} #footer #footer-artwork svg .st1{fill-rule:evenodd;clip-rule:evenodd;fill: var(--maincolor);} */ /* sponsors-footer */ #sponsors-footer { height: 160px; width: 100%; background-color: var(--maincolor); position: relative; z-index: 7; text-align: center; } #sponsors-footer .border { position: absolute; left: 0; top: -30px; width: 100%; height: 30px; pointer-events: none; -webkit-transform: rotate(-1deg); transform: rotate(-1deg); } #sponsors-footer .border svg { fill: var(--maincolor); position: absolute; left: 0; top: 0; height: 30px; display: block; width: 100%; } #sponsors-footer .border:after { content: ""; width: 100%; height: 70px; background: var(--maincolor); position: absolute; left: 0; bottom: -68px; } #sponsors-footer #sponsors-footer-carousel { /* mup */ } #sponsors-footer #sponsors-footer-carousel .partner img { display: block; max-width: 150px; width: 90%; margin: 40px auto; border-radius: 5px; } /* disable selection */ #menu, #header, #line-up, #sponsors-footer, #sponsors-header, #submenu, #day-select { -moz-user-select: none; -khtml-user-select: none; -webkit-user-select: none; user-select: none; } /* ######################### */ /* ######################### */ /* There's no JOA without distortion */ /* DARK # BOTTOM LEFT AND RIGHT */ #sponsors-footer:before, #home #home-video:after, .media:after { content: ""; z-index: 9; position: absolute; left: 0; bottom: 0; height: 100%; width: 100%; pointer-events: none; background-image: url('../images/distortion-bottom-left.png'), url('../images/distortion-bottom-right.png'); background-position: bottom left, bottom right; background-repeat: no-repeat, no-repeat; } .media:after { z-index: 1; } /* DARK # TOP RIGHT + BOTTOM RIGHT */ #home-intro:before { content: ""; z-index: 9; position: absolute; left: 0; bottom: 0; height: 100%; width: 100%; pointer-events: none; background-image: url('../images/distortion-top-right.png'), url('../images/distortion-bottom-right.png'); background-position: 100% 100px, bottom right; background-repeat: no-repeat, no-repeat; } /* LIGHT # TOP RIGHT + BOTTOM LEFT */ .videotheek a div.still:before, #line-up .item .bandpic:before, #ticketshop:before { content: ""; z-index: 3; position: absolute; left: 0; bottom: 0; height: 100%; width: 100%; pointer-events: none; background-image: url('../images/light-distortion-top-right.png'), url('../images/light-distortion-bottom-left.png'); background-position: top right, bottom left; background-repeat: no-repeat, no-repeat; } /* LIGHT # TOP RIGHT + TOP LEFT */ #header:after { content: ""; z-index: 91; position: absolute; left: 0; top: 0%; height: 150%; width: 100%; pointer-events: none; background-image: url('../images/light-distortion-top-right.png'), url('../images/light-distortion-top-left.png'); background-position: bottom right, bottom left; background-repeat: no-repeat, no-repeat; } #menu:after { content: ""; z-index: 91; position: absolute; left: 0; top: 0%; height: 100%; width: 100%; pointer-events: none; background-image: url('../images/light-distortion-top-left.png'), url('../images/light-distortion-bottom-left.png'); background-position: top left, bottom left; background-repeat: no-repeat, no-repeat; } #home-carousel .slide:before { content: ""; z-index: 9; position: absolute; left: 0; bottom: 0; height: 100%; width: 100%; pointer-events: none; background-image: url('../images/distortion-top-right.png'), url('../images/distortion-bottom-right.png'); background-position: 100% 100px, bottom right; background-repeat: no-repeat, no-repeat; } /* kiek overrides */ #kiek { background-image: url('../images/kiek-loading.gif')!important; } #kiek-overlay { background: #000!important; } /* EDGE FIX */ /* Why: ABS GEPOSITIONEERDE & GEROTEERDE SVG'S IN EDGE VINDEN ZE NOG NIET LEUK IN EDGE */ /* class wordt toegewezen in fxjs */ body.this-is-edge #sponsors-footer .border, body.this-is-edge #footer .border, body.this-is-edge #home .border { display: none; } body.this-is-edge #header .border, body.this-is-edge #home .border { transform: rotate(0deg); } /* JERA * ON * LINE */ #jeraonline { padding-bottom: 70px; display: flex; justify-content: center; align-items: center; } #jeraonline #jeraonline-content { max-width: 1300px; width: 100%; display: flex; } #jeraonline #jeraonline-content .vid { width: 75%; position: relative; } #jeraonline #jeraonline-content .videowrapper /* video-embed MET behoud videoformaat op 16:9 - ook responsive */ { position: relative; width: 100%; padding-bottom: 56.25%; /* the magic ==> indien 100% breed ==> 56.25%; */ height: 0; background: #000; } #jeraonline #jeraonline-content .videowrapper iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: block; } #jeraonline #jeraonline-content .vid div.video-js, #jeraonline #jeraonline-content .vid video { display: block; height: 100%!important; width: 100%!important; } #jeraonline #jeraonline-content .shoutbox { width: 25%; box-sizing: border-box; padding: 0px 40px; color: #fff; background: #333; font-family: "Roboto"; } #jeraonline #jeraonline-content .shoutbox h2 { font-size: 3em; } #jeraonline #jeraonline-content .shoutbox#shoutbox { padding: 0px; display: flex; flex-direction: column; height: 550px; } #shoutbox .messages { overflow-y: scroll; width: 100%; height: 70%; box-sizing: border-box; word-break: break-all; } #shoutbox .input { width: 100%; height: 30%; box-sizing: border-box; padding: 15px 20px; display: flex; flex-direction: column; position: relative; } #shoutbox .input input { font-family: inherit; font-size: inherit; background: #fff; margin: 5px 0; border: 0px; padding: 9px 10px; box-sizing: border-box; border-radius: 3px; color: #fff; } #shoutbox .input input[type=text] { padding-left: 35px; background: rgba(0,0,0,.6); max-width: 75%; background-size: 16px 16px; background-repeat: no-repeat; background-position: 10px 10px; } #shoutbox .input input[type=text][name=username] { background-image: url('../images/icons/shoutbox-user.svg'); } #shoutbox .input input[type=text][name=message] { background-image: url('../images/icons/shoutbox-msg.svg'); } #shoutbox .input input[type=button] { background: transparent; -webkit-appearance:none; position: absolute; right: 24px; top: 15px; width: 15%; height: 80px; border-radius: 3px; color: transparent; cursor: pointer; background-image: url('../images/icons/shoutbox-post.svg?23'); background-size: 40px 40px; background-repeat: no-repeat; background-position: center center; } #shoutbox .input input[type=button]:hover { background-size: 43px 43px; } #shoutbox .input img { display: block; width: 100%; margin-top: 3px; } #shoutbox .yabanned { background-color: #f55; padding: 10px; border-radius: 3px; display: none; } #shoutbox .messages .message { box-sizing: border-box; padding: 10px 20px; } #shoutbox .messages .message:not(last) { border-bottom: 2px solid #666; } #shoutbox .messages .message.own { background-color: #4b4b4b; } #shoutbox .messages .message span { display: block; } #shoutbox .messages .message span.name { font-family: "block"; text-transform: uppercase; font-weight: normal; color: #fff; /* #ffe8b3 */ font-size: 1.2em; letter-spacing: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #shoutbox .messages .message span.name em { font-style: normal; color: #fff; opacity: 0.2; padding-left: 3px; } #shoutbox .messages .message img { display: inline-block; margin: 0 2px; transform: translateY(3px); width: 20px; height: 20px; } #shoutbox input.invalid { /*background-color: #e51c21!important;*/ box-shadow: 0px 0px 10px #e51c21; } .chat-is-disabled { padding: 30px; } #jeraonline-msg { background: #333; padding: 40px 30px; padding-bottom: 20px; text-align: center; max-width: 1300px; width: 100%; box-sizing: border-box; border-radius: 3px; font-size: 1.2em; margin: 0 auto; color: #fff; margin-bottom: 70px; } #jeraonline-msg a { color: #ffe8b3; text-decoration: underline; } .stream-offline { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); white-space: nowrap; } @media screen and (max-width: 900px) { #jeraonline { padding-bottom: 30px; } #jeraonline #jeraonline-content { flex-direction: column; } #jeraonline #jeraonline-content .vid, #jeraonline #jeraonline-content .shoutbox { width: 100%; } #jeraonline #jeraonline-content #shoutbox.shoutbox { min-height: 610px; height: auto!important; display: block; } #shoutbox .input { height: 160px!important; } #shoutbox .input img { max-width: 300px; } #shoutbox .messages { height: 450px!important; } #jeraonline #jeraonline-content .vid div.video-js { height: 200px!important; } }