/* ABCRESTAURANTS.COM 2017/2018 - Cybox Backstage CMS Cybox internet & communicatie - Boxmeer www.cybox.nl */ @import url('https://fonts.googleapis.com/css?family=Cabin+Sketch|Grand+Hotel|Barlow Semi Condensed:700|Barlow:400,400i,500,500i,700,700i|Barlow+Semi+Condensed:400,700,800,900'); @font-face { font-family: 'din'; font-weight: normal; src: url('../fonts/abc-dcb-webfont.woff2') format('woff2'), url('../fonts/abc-dcb-webfont.woff') format('woff'); 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 */ .animated{-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-fill-mode:both;animation-fill-mode:both}.animated.infinite{-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite}.animated.hinge{-webkit-animation-duration:2s;animation-duration:2s}.animated.bounceIn,.animated.bounceOut,.animated.flipOutX,.animated.flipOutY{-webkit-animation-duration:.75s;animation-duration:.75s}@-webkit-keyframes bounce{0%,20%,53%,80%,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1);-webkit-transform:translateZ(0);transform:translateZ(0)}40%,43%{-webkit-transform:translate3d(0,-30px,0);transform:translate3d(0,-30px,0)}40%,43%,70%{-webkit-animation-timing-function:cubic-bezier(.755,.05,.855,.06);animation-timing-function:cubic-bezier(.755,.05,.855,.06)}70%{-webkit-transform:translate3d(0,-15px,0);transform:translate3d(0,-15px,0)}90%{-webkit-transform:translate3d(0,-4px,0);transform:translate3d(0,-4px,0)}}@keyframes bounce{0%,20%,53%,80%,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1);-webkit-transform:translateZ(0);transform:translateZ(0)}40%,43%{-webkit-transform:translate3d(0,-30px,0);transform:translate3d(0,-30px,0)}40%,43%,70%{-webkit-animation-timing-function:cubic-bezier(.755,.05,.855,.06);animation-timing-function:cubic-bezier(.755,.05,.855,.06)}70%{-webkit-transform:translate3d(0,-15px,0);transform:translate3d(0,-15px,0)}90%{-webkit-transform:translate3d(0,-4px,0);transform:translate3d(0,-4px,0)}}.bounce{-webkit-animation-name:bounce;animation-name:bounce;-webkit-transform-origin:center bottom;transform-origin:center bottom}@-webkit-keyframes flash{0%,50%,to{opacity:1}25%,75%{opacity:0}}@keyframes flash{0%,50%,to{opacity:1}25%,75%{opacity:0}}.flash{-webkit-animation-name:flash;animation-name:flash}@-webkit-keyframes pulse{0%{-webkit-transform:scaleX(1);transform:scaleX(1)}50%{-webkit-transform:scale3d(1.05,1.05,1.05);transform:scale3d(1.05,1.05,1.05)}to{-webkit-transform:scaleX(1);transform:scaleX(1)}}@keyframes pulse{0%{-webkit-transform:scaleX(1);transform:scaleX(1)}50%{-webkit-transform:scale3d(1.05,1.05,1.05);transform:scale3d(1.05,1.05,1.05)}to{-webkit-transform:scaleX(1);transform:scaleX(1)}}.pulse{-webkit-animation-name:pulse;animation-name:pulse}@-webkit-keyframes rubberBand{0%{-webkit-transform:scaleX(1);transform:scaleX(1)}30%{-webkit-transform:scale3d(1.25,.75,1);transform:scale3d(1.25,.75,1)}40%{-webkit-transform:scale3d(.75,1.25,1);transform:scale3d(.75,1.25,1)}50%{-webkit-transform:scale3d(1.15,.85,1);transform:scale3d(1.15,.85,1)}65%{-webkit-transform:scale3d(.95,1.05,1);transform:scale3d(.95,1.05,1)}75%{-webkit-transform:scale3d(1.05,.95,1);transform:scale3d(1.05,.95,1)}to{-webkit-transform:scaleX(1);transform:scaleX(1)}}@keyframes rubberBand{0%{-webkit-transform:scaleX(1);transform:scaleX(1)}30%{-webkit-transform:scale3d(1.25,.75,1);transform:scale3d(1.25,.75,1)}40%{-webkit-transform:scale3d(.75,1.25,1);transform:scale3d(.75,1.25,1)}50%{-webkit-transform:scale3d(1.15,.85,1);transform:scale3d(1.15,.85,1)}65%{-webkit-transform:scale3d(.95,1.05,1);transform:scale3d(.95,1.05,1)}75%{-webkit-transform:scale3d(1.05,.95,1);transform:scale3d(1.05,.95,1)}to{-webkit-transform:scaleX(1);transform:scaleX(1)}}.rubberBand{-webkit-animation-name:rubberBand;animation-name:rubberBand}@-webkit-keyframes shake{0%,to{-webkit-transform:translateZ(0);transform:translateZ(0)}10%,30%,50%,70%,90%{-webkit-transform:translate3d(-10px,0,0);transform:translate3d(-10px,0,0)}20%,40%,60%,80%{-webkit-transform:translate3d(10px,0,0);transform:translate3d(10px,0,0)}}@keyframes shake{0%,to{-webkit-transform:translateZ(0);transform:translateZ(0)}10%,30%,50%,70%,90%{-webkit-transform:translate3d(-10px,0,0);transform:translate3d(-10px,0,0)}20%,40%,60%,80%{-webkit-transform:translate3d(10px,0,0);transform:translate3d(10px,0,0)}}.shake{-webkit-animation-name:shake;animation-name:shake}@-webkit-keyframes headShake{0%{-webkit-transform:translateX(0);transform:translateX(0)}6.5%{-webkit-transform:translateX(-6px) rotateY(-9deg);transform:translateX(-6px) rotateY(-9deg)}18.5%{-webkit-transform:translateX(5px) rotateY(7deg);transform:translateX(5px) rotateY(7deg)}31.5%{-webkit-transform:translateX(-3px) rotateY(-5deg);transform:translateX(-3px) rotateY(-5deg)}43.5%{-webkit-transform:translateX(2px) rotateY(3deg);transform:translateX(2px) rotateY(3deg)}50%{-webkit-transform:translateX(0);transform:translateX(0)}}@keyframes headShake{0%{-webkit-transform:translateX(0);transform:translateX(0)}6.5%{-webkit-transform:translateX(-6px) rotateY(-9deg);transform:translateX(-6px) rotateY(-9deg)}18.5%{-webkit-transform:translateX(5px) rotateY(7deg);transform:translateX(5px) rotateY(7deg)}31.5%{-webkit-transform:translateX(-3px) rotateY(-5deg);transform:translateX(-3px) rotateY(-5deg)}43.5%{-webkit-transform:translateX(2px) rotateY(3deg);transform:translateX(2px) rotateY(3deg)}50%{-webkit-transform:translateX(0);transform:translateX(0)}}.headShake{-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out;-webkit-animation-name:headShake;animation-name:headShake}@-webkit-keyframes swing{20%{-webkit-transform:rotate(15deg);transform:rotate(15deg)}40%{-webkit-transform:rotate(-10deg);transform:rotate(-10deg)}60%{-webkit-transform:rotate(5deg);transform:rotate(5deg)}80%{-webkit-transform:rotate(-5deg);transform:rotate(-5deg)}to{-webkit-transform:rotate(0deg);transform:rotate(0deg)}}@keyframes swing{20%{-webkit-transform:rotate(15deg);transform:rotate(15deg)}40%{-webkit-transform:rotate(-10deg);transform:rotate(-10deg)}60%{-webkit-transform:rotate(5deg);transform:rotate(5deg)}80%{-webkit-transform:rotate(-5deg);transform:rotate(-5deg)}to{-webkit-transform:rotate(0deg);transform:rotate(0deg)}}.swing{-webkit-transform-origin:top center;transform-origin:top center;-webkit-animation-name:swing;animation-name:swing}@-webkit-keyframes tada{0%{-webkit-transform:scaleX(1);transform:scaleX(1)}10%,20%{-webkit-transform:scale3d(.9,.9,.9) rotate(-3deg);transform:scale3d(.9,.9,.9) rotate(-3deg)}30%,50%,70%,90%{-webkit-transform:scale3d(1.1,1.1,1.1) rotate(3deg);transform:scale3d(1.1,1.1,1.1) rotate(3deg)}40%,60%,80%{-webkit-transform:scale3d(1.1,1.1,1.1) rotate(-3deg);transform:scale3d(1.1,1.1,1.1) rotate(-3deg)}to{-webkit-transform:scaleX(1);transform:scaleX(1)}}@keyframes tada{0%{-webkit-transform:scaleX(1);transform:scaleX(1)}10%,20%{-webkit-transform:scale3d(.9,.9,.9) rotate(-3deg);transform:scale3d(.9,.9,.9) rotate(-3deg)}30%,50%,70%,90%{-webkit-transform:scale3d(1.1,1.1,1.1) rotate(3deg);transform:scale3d(1.1,1.1,1.1) rotate(3deg)}40%,60%,80%{-webkit-transform:scale3d(1.1,1.1,1.1) rotate(-3deg);transform:scale3d(1.1,1.1,1.1) rotate(-3deg)}to{-webkit-transform:scaleX(1);transform:scaleX(1)}}.tada{-webkit-animation-name:tada;animation-name:tada}@-webkit-keyframes wobble{0%{-webkit-transform:none;transform:none}15%{-webkit-transform:translate3d(-25%,0,0) rotate(-5deg);transform:translate3d(-25%,0,0) rotate(-5deg)}30%{-webkit-transform:translate3d(20%,0,0) rotate(3deg);transform:translate3d(20%,0,0) rotate(3deg)}45%{-webkit-transform:translate3d(-15%,0,0) rotate(-3deg);transform:translate3d(-15%,0,0) rotate(-3deg)}60%{-webkit-transform:translate3d(10%,0,0) rotate(2deg);transform:translate3d(10%,0,0) rotate(2deg)}75%{-webkit-transform:translate3d(-5%,0,0) rotate(-1deg);transform:translate3d(-5%,0,0) rotate(-1deg)}to{-webkit-transform:none;transform:none}}@keyframes wobble{0%{-webkit-transform:none;transform:none}15%{-webkit-transform:translate3d(-25%,0,0) rotate(-5deg);transform:translate3d(-25%,0,0) rotate(-5deg)}30%{-webkit-transform:translate3d(20%,0,0) rotate(3deg);transform:translate3d(20%,0,0) rotate(3deg)}45%{-webkit-transform:translate3d(-15%,0,0) rotate(-3deg);transform:translate3d(-15%,0,0) rotate(-3deg)}60%{-webkit-transform:translate3d(10%,0,0) rotate(2deg);transform:translate3d(10%,0,0) rotate(2deg)}75%{-webkit-transform:translate3d(-5%,0,0) rotate(-1deg);transform:translate3d(-5%,0,0) rotate(-1deg)}to{-webkit-transform:none;transform:none}}.wobble{-webkit-animation-name:wobble;animation-name:wobble}@-webkit-keyframes jello{0%,11.1%,to{-webkit-transform:none;transform:none}22.2%{-webkit-transform:skewX(-12.5deg) skewY(-12.5deg);transform:skewX(-12.5deg) skewY(-12.5deg)}33.3%{-webkit-transform:skewX(6.25deg) skewY(6.25deg);transform:skewX(6.25deg) skewY(6.25deg)}44.4%{-webkit-transform:skewX(-3.125deg) skewY(-3.125deg);transform:skewX(-3.125deg) skewY(-3.125deg)}55.5%{-webkit-transform:skewX(1.5625deg) skewY(1.5625deg);transform:skewX(1.5625deg) skewY(1.5625deg)}66.6%{-webkit-transform:skewX(-.78125deg) skewY(-.78125deg);transform:skewX(-.78125deg) skewY(-.78125deg)}77.7%{-webkit-transform:skewX(.390625deg) skewY(.390625deg);transform:skewX(.390625deg) skewY(.390625deg)}88.8%{-webkit-transform:skewX(-.1953125deg) skewY(-.1953125deg);transform:skewX(-.1953125deg) skewY(-.1953125deg)}}@keyframes jello{0%,11.1%,to{-webkit-transform:none;transform:none}22.2%{-webkit-transform:skewX(-12.5deg) skewY(-12.5deg);transform:skewX(-12.5deg) skewY(-12.5deg)}33.3%{-webkit-transform:skewX(6.25deg) skewY(6.25deg);transform:skewX(6.25deg) skewY(6.25deg)}44.4%{-webkit-transform:skewX(-3.125deg) skewY(-3.125deg);transform:skewX(-3.125deg) skewY(-3.125deg)}55.5%{-webkit-transform:skewX(1.5625deg) skewY(1.5625deg);transform:skewX(1.5625deg) skewY(1.5625deg)}66.6%{-webkit-transform:skewX(-.78125deg) skewY(-.78125deg);transform:skewX(-.78125deg) skewY(-.78125deg)}77.7%{-webkit-transform:skewX(.390625deg) skewY(.390625deg);transform:skewX(.390625deg) skewY(.390625deg)}88.8%{-webkit-transform:skewX(-.1953125deg) skewY(-.1953125deg);transform:skewX(-.1953125deg) skewY(-.1953125deg)}}.jello{-webkit-animation-name:jello;animation-name:jello;-webkit-transform-origin:center;transform-origin:center}@-webkit-keyframes bounceIn{0%,20%,40%,60%,80%,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}20%{-webkit-transform:scale3d(1.1,1.1,1.1);transform:scale3d(1.1,1.1,1.1)}40%{-webkit-transform:scale3d(.9,.9,.9);transform:scale3d(.9,.9,.9)}60%{opacity:1;-webkit-transform:scale3d(1.03,1.03,1.03);transform:scale3d(1.03,1.03,1.03)}80%{-webkit-transform:scale3d(.97,.97,.97);transform:scale3d(.97,.97,.97)}to{opacity:1;-webkit-transform:scaleX(1);transform:scaleX(1)}}@keyframes bounceIn{0%,20%,40%,60%,80%,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}20%{-webkit-transform:scale3d(1.1,1.1,1.1);transform:scale3d(1.1,1.1,1.1)}40%{-webkit-transform:scale3d(.9,.9,.9);transform:scale3d(.9,.9,.9)}60%{opacity:1;-webkit-transform:scale3d(1.03,1.03,1.03);transform:scale3d(1.03,1.03,1.03)}80%{-webkit-transform:scale3d(.97,.97,.97);transform:scale3d(.97,.97,.97)}to{opacity:1;-webkit-transform:scaleX(1);transform:scaleX(1)}}.bounceIn{-webkit-animation-name:bounceIn;animation-name:bounceIn}@-webkit-keyframes bounceInDown{0%,60%,75%,90%,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:0;-webkit-transform:translate3d(0,-3000px,0);transform:translate3d(0,-3000px,0)}60%{opacity:1;-webkit-transform:translate3d(0,25px,0);transform:translate3d(0,25px,0)}75%{-webkit-transform:translate3d(0,-10px,0);transform:translate3d(0,-10px,0)}90%{-webkit-transform:translate3d(0,5px,0);transform:translate3d(0,5px,0)}to{-webkit-transform:none;transform:none}}@keyframes bounceInDown{0%,60%,75%,90%,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:0;-webkit-transform:translate3d(0,-3000px,0);transform:translate3d(0,-3000px,0)}60%{opacity:1;-webkit-transform:translate3d(0,25px,0);transform:translate3d(0,25px,0)}75%{-webkit-transform:translate3d(0,-10px,0);transform:translate3d(0,-10px,0)}90%{-webkit-transform:translate3d(0,5px,0);transform:translate3d(0,5px,0)}to{-webkit-transform:none;transform:none}}.bounceInDown{-webkit-animation-name:bounceInDown;animation-name:bounceInDown}@-webkit-keyframes bounceInLeft{0%,60%,75%,90%,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:0;-webkit-transform:translate3d(-3000px,0,0);transform:translate3d(-3000px,0,0)}60%{opacity:1;-webkit-transform:translate3d(25px,0,0);transform:translate3d(25px,0,0)}75%{-webkit-transform:translate3d(-10px,0,0);transform:translate3d(-10px,0,0)}90%{-webkit-transform:translate3d(5px,0,0);transform:translate3d(5px,0,0)}to{-webkit-transform:none;transform:none}}@keyframes bounceInLeft{0%,60%,75%,90%,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:0;-webkit-transform:translate3d(-3000px,0,0);transform:translate3d(-3000px,0,0)}60%{opacity:1;-webkit-transform:translate3d(25px,0,0);transform:translate3d(25px,0,0)}75%{-webkit-transform:translate3d(-10px,0,0);transform:translate3d(-10px,0,0)}90%{-webkit-transform:translate3d(5px,0,0);transform:translate3d(5px,0,0)}to{-webkit-transform:none;transform:none}}.bounceInLeft{-webkit-animation-name:bounceInLeft;animation-name:bounceInLeft}@-webkit-keyframes bounceInRight{0%,60%,75%,90%,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:0;-webkit-transform:translate3d(3000px,0,0);transform:translate3d(3000px,0,0)}60%{opacity:1;-webkit-transform:translate3d(-25px,0,0);transform:translate3d(-25px,0,0)}75%{-webkit-transform:translate3d(10px,0,0);transform:translate3d(10px,0,0)}90%{-webkit-transform:translate3d(-5px,0,0);transform:translate3d(-5px,0,0)}to{-webkit-transform:none;transform:none}}@keyframes bounceInRight{0%,60%,75%,90%,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:0;-webkit-transform:translate3d(3000px,0,0);transform:translate3d(3000px,0,0)}60%{opacity:1;-webkit-transform:translate3d(-25px,0,0);transform:translate3d(-25px,0,0)}75%{-webkit-transform:translate3d(10px,0,0);transform:translate3d(10px,0,0)}90%{-webkit-transform:translate3d(-5px,0,0);transform:translate3d(-5px,0,0)}to{-webkit-transform:none;transform:none}}.bounceInRight{-webkit-animation-name:bounceInRight;animation-name:bounceInRight}@-webkit-keyframes bounceInUp{0%,60%,75%,90%,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:0;-webkit-transform:translate3d(0,3000px,0);transform:translate3d(0,3000px,0)}60%{opacity:1;-webkit-transform:translate3d(0,-20px,0);transform:translate3d(0,-20px,0)}75%{-webkit-transform:translate3d(0,10px,0);transform:translate3d(0,10px,0)}90%{-webkit-transform:translate3d(0,-5px,0);transform:translate3d(0,-5px,0)}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes bounceInUp{0%,60%,75%,90%,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:0;-webkit-transform:translate3d(0,3000px,0);transform:translate3d(0,3000px,0)}60%{opacity:1;-webkit-transform:translate3d(0,-20px,0);transform:translate3d(0,-20px,0)}75%{-webkit-transform:translate3d(0,10px,0);transform:translate3d(0,10px,0)}90%{-webkit-transform:translate3d(0,-5px,0);transform:translate3d(0,-5px,0)}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}.bounceInUp{-webkit-animation-name:bounceInUp;animation-name:bounceInUp}@-webkit-keyframes bounceOut{20%{-webkit-transform:scale3d(.9,.9,.9);transform:scale3d(.9,.9,.9)}50%,55%{opacity:1;-webkit-transform:scale3d(1.1,1.1,1.1);transform:scale3d(1.1,1.1,1.1)}to{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}}@keyframes bounceOut{20%{-webkit-transform:scale3d(.9,.9,.9);transform:scale3d(.9,.9,.9)}50%,55%{opacity:1;-webkit-transform:scale3d(1.1,1.1,1.1);transform:scale3d(1.1,1.1,1.1)}to{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}}.bounceOut{-webkit-animation-name:bounceOut;animation-name:bounceOut}@-webkit-keyframes bounceOutDown{20%{-webkit-transform:translate3d(0,10px,0);transform:translate3d(0,10px,0)}40%,45%{opacity:1;-webkit-transform:translate3d(0,-20px,0);transform:translate3d(0,-20px,0)}to{opacity:0;-webkit-transform:translate3d(0,2000px,0);transform:translate3d(0,2000px,0)}}@keyframes bounceOutDown{20%{-webkit-transform:translate3d(0,10px,0);transform:translate3d(0,10px,0)}40%,45%{opacity:1;-webkit-transform:translate3d(0,-20px,0);transform:translate3d(0,-20px,0)}to{opacity:0;-webkit-transform:translate3d(0,2000px,0);transform:translate3d(0,2000px,0)}}.bounceOutDown{-webkit-animation-name:bounceOutDown;animation-name:bounceOutDown}@-webkit-keyframes bounceOutLeft{20%{opacity:1;-webkit-transform:translate3d(20px,0,0);transform:translate3d(20px,0,0)}to{opacity:0;-webkit-transform:translate3d(-2000px,0,0);transform:translate3d(-2000px,0,0)}}@keyframes bounceOutLeft{20%{opacity:1;-webkit-transform:translate3d(20px,0,0);transform:translate3d(20px,0,0)}to{opacity:0;-webkit-transform:translate3d(-2000px,0,0);transform:translate3d(-2000px,0,0)}}.bounceOutLeft{-webkit-animation-name:bounceOutLeft;animation-name:bounceOutLeft}@-webkit-keyframes bounceOutRight{20%{opacity:1;-webkit-transform:translate3d(-20px,0,0);transform:translate3d(-20px,0,0)}to{opacity:0;-webkit-transform:translate3d(2000px,0,0);transform:translate3d(2000px,0,0)}}@keyframes bounceOutRight{20%{opacity:1;-webkit-transform:translate3d(-20px,0,0);transform:translate3d(-20px,0,0)}to{opacity:0;-webkit-transform:translate3d(2000px,0,0);transform:translate3d(2000px,0,0)}}.bounceOutRight{-webkit-animation-name:bounceOutRight;animation-name:bounceOutRight}@-webkit-keyframes bounceOutUp{20%{-webkit-transform:translate3d(0,-10px,0);transform:translate3d(0,-10px,0)}40%,45%{opacity:1;-webkit-transform:translate3d(0,20px,0);transform:translate3d(0,20px,0)}to{opacity:0;-webkit-transform:translate3d(0,-2000px,0);transform:translate3d(0,-2000px,0)}}@keyframes bounceOutUp{20%{-webkit-transform:translate3d(0,-10px,0);transform:translate3d(0,-10px,0)}40%,45%{opacity:1;-webkit-transform:translate3d(0,20px,0);transform:translate3d(0,20px,0)}to{opacity:0;-webkit-transform:translate3d(0,-2000px,0);transform:translate3d(0,-2000px,0)}}.bounceOutUp{-webkit-animation-name:bounceOutUp;animation-name:bounceOutUp}@-webkit-keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.fadeIn{-webkit-animation-name:fadeIn;animation-name:fadeIn}@-webkit-keyframes fadeInDown{0%{opacity:0;-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}to{opacity:1;-webkit-transform:none;transform:none}}@keyframes fadeInDown{0%{opacity:0;-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}to{opacity:1;-webkit-transform:none;transform:none}}.fadeInDown{-webkit-animation-name:fadeInDown;animation-name:fadeInDown}@-webkit-keyframes fadeInDownBig{0%{opacity:0;-webkit-transform:translate3d(0,-2000px,0);transform:translate3d(0,-2000px,0)}to{opacity:1;-webkit-transform:none;transform:none}}@keyframes fadeInDownBig{0%{opacity:0;-webkit-transform:translate3d(0,-2000px,0);transform:translate3d(0,-2000px,0)}to{opacity:1;-webkit-transform:none;transform:none}}.fadeInDownBig{-webkit-animation-name:fadeInDownBig;animation-name:fadeInDownBig}@-webkit-keyframes fadeInLeft{0%{opacity:0;-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}to{opacity:1;-webkit-transform:none;transform:none}}@keyframes fadeInLeft{0%{opacity:0;-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}to{opacity:1;-webkit-transform:none;transform:none}}.fadeInLeft{-webkit-animation-name:fadeInLeft;animation-name:fadeInLeft}@-webkit-keyframes fadeInLeftBig{0%{opacity:0;-webkit-transform:translate3d(-2000px,0,0);transform:translate3d(-2000px,0,0)}to{opacity:1;-webkit-transform:none;transform:none}}@keyframes fadeInLeftBig{0%{opacity:0;-webkit-transform:translate3d(-2000px,0,0);transform:translate3d(-2000px,0,0)}to{opacity:1;-webkit-transform:none;transform:none}}.fadeInLeftBig{-webkit-animation-name:fadeInLeftBig;animation-name:fadeInLeftBig}@-webkit-keyframes fadeInRight{0%{opacity:0;-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}to{opacity:1;-webkit-transform:none;transform:none}}@keyframes fadeInRight{0%{opacity:0;-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}to{opacity:1;-webkit-transform:none;transform:none}}.fadeInRight{-webkit-animation-name:fadeInRight;animation-name:fadeInRight}@-webkit-keyframes fadeInRightBig{0%{opacity:0;-webkit-transform:translate3d(2000px,0,0);transform:translate3d(2000px,0,0)}to{opacity:1;-webkit-transform:none;transform:none}}@keyframes fadeInRightBig{0%{opacity:0;-webkit-transform:translate3d(2000px,0,0);transform:translate3d(2000px,0,0)}to{opacity:1;-webkit-transform:none;transform:none}}.fadeInRightBig{-webkit-animation-name:fadeInRightBig;animation-name:fadeInRightBig}@-webkit-keyframes fadeInUp{0%{opacity:0;-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}to{opacity:1;-webkit-transform:none;transform:none}}@keyframes fadeInUp{0%{opacity:0;-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}to{opacity:1;-webkit-transform:none;transform:none}}.fadeInUp{-webkit-animation-name:fadeInUp;animation-name:fadeInUp}@-webkit-keyframes fadeInUpBig{0%{opacity:0;-webkit-transform:translate3d(0,2000px,0);transform:translate3d(0,2000px,0)}to{opacity:1;-webkit-transform:none;transform:none}}@keyframes fadeInUpBig{0%{opacity:0;-webkit-transform:translate3d(0,2000px,0);transform:translate3d(0,2000px,0)}to{opacity:1;-webkit-transform:none;transform:none}}.fadeInUpBig{-webkit-animation-name:fadeInUpBig;animation-name:fadeInUpBig}@-webkit-keyframes fadeOut{0%{opacity:1}to{opacity:0}}@keyframes fadeOut{0%{opacity:1}to{opacity:0}}.fadeOut{-webkit-animation-name:fadeOut;animation-name:fadeOut}@-webkit-keyframes fadeOutDown{0%{opacity:1}to{opacity:0;-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}}@keyframes fadeOutDown{0%{opacity:1}to{opacity:0;-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}}.fadeOutDown{-webkit-animation-name:fadeOutDown;animation-name:fadeOutDown}@-webkit-keyframes fadeOutDownBig{0%{opacity:1}to{opacity:0;-webkit-transform:translate3d(0,2000px,0);transform:translate3d(0,2000px,0)}}@keyframes fadeOutDownBig{0%{opacity:1}to{opacity:0;-webkit-transform:translate3d(0,2000px,0);transform:translate3d(0,2000px,0)}}.fadeOutDownBig{-webkit-animation-name:fadeOutDownBig;animation-name:fadeOutDownBig}@-webkit-keyframes fadeOutLeft{0%{opacity:1}to{opacity:0;-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}}@keyframes fadeOutLeft{0%{opacity:1}to{opacity:0;-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}}.fadeOutLeft{-webkit-animation-name:fadeOutLeft;animation-name:fadeOutLeft}@-webkit-keyframes fadeOutLeftBig{0%{opacity:1}to{opacity:0;-webkit-transform:translate3d(-2000px,0,0);transform:translate3d(-2000px,0,0)}}@keyframes fadeOutLeftBig{0%{opacity:1}to{opacity:0;-webkit-transform:translate3d(-2000px,0,0);transform:translate3d(-2000px,0,0)}}.fadeOutLeftBig{-webkit-animation-name:fadeOutLeftBig;animation-name:fadeOutLeftBig}@-webkit-keyframes fadeOutRight{0%{opacity:1}to{opacity:0;-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}}@keyframes fadeOutRight{0%{opacity:1}to{opacity:0;-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}}.fadeOutRight{-webkit-animation-name:fadeOutRight;animation-name:fadeOutRight}@-webkit-keyframes fadeOutRightBig{0%{opacity:1}to{opacity:0;-webkit-transform:translate3d(2000px,0,0);transform:translate3d(2000px,0,0)}}@keyframes fadeOutRightBig{0%{opacity:1}to{opacity:0;-webkit-transform:translate3d(2000px,0,0);transform:translate3d(2000px,0,0)}}.fadeOutRightBig{-webkit-animation-name:fadeOutRightBig;animation-name:fadeOutRightBig}@-webkit-keyframes fadeOutUp{0%{opacity:1}to{opacity:0;-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}}@keyframes fadeOutUp{0%{opacity:1}to{opacity:0;-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}}.fadeOutUp{-webkit-animation-name:fadeOutUp;animation-name:fadeOutUp}@-webkit-keyframes fadeOutUpBig{0%{opacity:1}to{opacity:0;-webkit-transform:translate3d(0,-2000px,0);transform:translate3d(0,-2000px,0)}}@keyframes fadeOutUpBig{0%{opacity:1}to{opacity:0;-webkit-transform:translate3d(0,-2000px,0);transform:translate3d(0,-2000px,0)}}.fadeOutUpBig{-webkit-animation-name:fadeOutUpBig;animation-name:fadeOutUpBig}@-webkit-keyframes flip{0%{-webkit-transform:perspective(400px) rotateY(-1turn);transform:perspective(400px) rotateY(-1turn)}0%,40%{-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}40%{-webkit-transform:perspective(400px) translateZ(150px) rotateY(-190deg);transform:perspective(400px) translateZ(150px) rotateY(-190deg)}50%{-webkit-transform:perspective(400px) translateZ(150px) rotateY(-170deg);transform:perspective(400px) translateZ(150px) rotateY(-170deg)}50%,80%{-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}80%{-webkit-transform:perspective(400px) scale3d(.95,.95,.95);transform:perspective(400px) scale3d(.95,.95,.95)}to{-webkit-transform:perspective(400px);transform:perspective(400px);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}}@keyframes flip{0%{-webkit-transform:perspective(400px) rotateY(-1turn);transform:perspective(400px) rotateY(-1turn)}0%,40%{-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}40%{-webkit-transform:perspective(400px) translateZ(150px) rotateY(-190deg);transform:perspective(400px) translateZ(150px) rotateY(-190deg)}50%{-webkit-transform:perspective(400px) translateZ(150px) rotateY(-170deg);transform:perspective(400px) translateZ(150px) rotateY(-170deg)}50%,80%{-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}80%{-webkit-transform:perspective(400px) scale3d(.95,.95,.95);transform:perspective(400px) scale3d(.95,.95,.95)}to{-webkit-transform:perspective(400px);transform:perspective(400px);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}}.animated.flip{-webkit-backface-visibility:visible;backface-visibility:visible;-webkit-animation-name:flip;animation-name:flip}@-webkit-keyframes flipInX{0%{-webkit-transform:perspective(400px) rotateX(90deg);transform:perspective(400px) rotateX(90deg);opacity:0}0%,40%{-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}40%{-webkit-transform:perspective(400px) rotateX(-20deg);transform:perspective(400px) rotateX(-20deg)}60%{-webkit-transform:perspective(400px) rotateX(10deg);transform:perspective(400px) rotateX(10deg);opacity:1}80%{-webkit-transform:perspective(400px) rotateX(-5deg);transform:perspective(400px) rotateX(-5deg)}to{-webkit-transform:perspective(400px);transform:perspective(400px)}}@keyframes flipInX{0%{-webkit-transform:perspective(400px) rotateX(90deg);transform:perspective(400px) rotateX(90deg);opacity:0}0%,40%{-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}40%{-webkit-transform:perspective(400px) rotateX(-20deg);transform:perspective(400px) rotateX(-20deg)}60%{-webkit-transform:perspective(400px) rotateX(10deg);transform:perspective(400px) rotateX(10deg);opacity:1}80%{-webkit-transform:perspective(400px) rotateX(-5deg);transform:perspective(400px) rotateX(-5deg)}to{-webkit-transform:perspective(400px);transform:perspective(400px)}}.flipInX{-webkit-backface-visibility:visible!important;backface-visibility:visible!important;-webkit-animation-name:flipInX;animation-name:flipInX}@-webkit-keyframes flipInY{0%{-webkit-transform:perspective(400px) rotateY(90deg);transform:perspective(400px) rotateY(90deg);opacity:0}0%,40%{-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}40%{-webkit-transform:perspective(400px) rotateY(-20deg);transform:perspective(400px) rotateY(-20deg)}60%{-webkit-transform:perspective(400px) rotateY(10deg);transform:perspective(400px) rotateY(10deg);opacity:1}80%{-webkit-transform:perspective(400px) rotateY(-5deg);transform:perspective(400px) rotateY(-5deg)}to{-webkit-transform:perspective(400px);transform:perspective(400px)}}@keyframes flipInY{0%{-webkit-transform:perspective(400px) rotateY(90deg);transform:perspective(400px) rotateY(90deg);opacity:0}0%,40%{-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}40%{-webkit-transform:perspective(400px) rotateY(-20deg);transform:perspective(400px) rotateY(-20deg)}60%{-webkit-transform:perspective(400px) rotateY(10deg);transform:perspective(400px) rotateY(10deg);opacity:1}80%{-webkit-transform:perspective(400px) rotateY(-5deg);transform:perspective(400px) rotateY(-5deg)}to{-webkit-transform:perspective(400px);transform:perspective(400px)}}.flipInY{-webkit-backface-visibility:visible!important;backface-visibility:visible!important;-webkit-animation-name:flipInY;animation-name:flipInY}@-webkit-keyframes flipOutX{0%{-webkit-transform:perspective(400px);transform:perspective(400px)}30%{-webkit-transform:perspective(400px) rotateX(-20deg);transform:perspective(400px) rotateX(-20deg);opacity:1}to{-webkit-transform:perspective(400px) rotateX(90deg);transform:perspective(400px) rotateX(90deg);opacity:0}}@keyframes flipOutX{0%{-webkit-transform:perspective(400px);transform:perspective(400px)}30%{-webkit-transform:perspective(400px) rotateX(-20deg);transform:perspective(400px) rotateX(-20deg);opacity:1}to{-webkit-transform:perspective(400px) rotateX(90deg);transform:perspective(400px) rotateX(90deg);opacity:0}}.flipOutX{-webkit-animation-name:flipOutX;animation-name:flipOutX;-webkit-backface-visibility:visible!important;backface-visibility:visible!important}@-webkit-keyframes flipOutY{0%{-webkit-transform:perspective(400px);transform:perspective(400px)}30%{-webkit-transform:perspective(400px) rotateY(-15deg);transform:perspective(400px) rotateY(-15deg);opacity:1}to{-webkit-transform:perspective(400px) rotateY(90deg);transform:perspective(400px) rotateY(90deg);opacity:0}}@keyframes flipOutY{0%{-webkit-transform:perspective(400px);transform:perspective(400px)}30%{-webkit-transform:perspective(400px) rotateY(-15deg);transform:perspective(400px) rotateY(-15deg);opacity:1}to{-webkit-transform:perspective(400px) rotateY(90deg);transform:perspective(400px) rotateY(90deg);opacity:0}}.flipOutY{-webkit-backface-visibility:visible!important;backface-visibility:visible!important;-webkit-animation-name:flipOutY;animation-name:flipOutY}@-webkit-keyframes lightSpeedIn{0%{-webkit-transform:translate3d(100%,0,0) skewX(-30deg);transform:translate3d(100%,0,0) skewX(-30deg);opacity:0}60%{-webkit-transform:skewX(20deg);transform:skewX(20deg)}60%,80%{opacity:1}80%{-webkit-transform:skewX(-5deg);transform:skewX(-5deg)}to{-webkit-transform:none;transform:none;opacity:1}}@keyframes lightSpeedIn{0%{-webkit-transform:translate3d(100%,0,0) skewX(-30deg);transform:translate3d(100%,0,0) skewX(-30deg);opacity:0}60%{-webkit-transform:skewX(20deg);transform:skewX(20deg)}60%,80%{opacity:1}80%{-webkit-transform:skewX(-5deg);transform:skewX(-5deg)}to{-webkit-transform:none;transform:none;opacity:1}}.lightSpeedIn{-webkit-animation-name:lightSpeedIn;animation-name:lightSpeedIn;-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}@-webkit-keyframes lightSpeedOut{0%{opacity:1}to{-webkit-transform:translate3d(100%,0,0) skewX(30deg);transform:translate3d(100%,0,0) skewX(30deg);opacity:0}}@keyframes lightSpeedOut{0%{opacity:1}to{-webkit-transform:translate3d(100%,0,0) skewX(30deg);transform:translate3d(100%,0,0) skewX(30deg);opacity:0}}.lightSpeedOut{-webkit-animation-name:lightSpeedOut;animation-name:lightSpeedOut;-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}@-webkit-keyframes rotateIn{0%{transform-origin:center;-webkit-transform:rotate(-200deg);transform:rotate(-200deg);opacity:0}0%,to{-webkit-transform-origin:center}to{transform-origin:center;-webkit-transform:none;transform:none;opacity:1}}@keyframes rotateIn{0%{transform-origin:center;-webkit-transform:rotate(-200deg);transform:rotate(-200deg);opacity:0}0%,to{-webkit-transform-origin:center}to{transform-origin:center;-webkit-transform:none;transform:none;opacity:1}}.rotateIn{-webkit-animation-name:rotateIn;animation-name:rotateIn}@-webkit-keyframes rotateInDownLeft{0%{transform-origin:left bottom;-webkit-transform:rotate(-45deg);transform:rotate(-45deg);opacity:0}0%,to{-webkit-transform-origin:left bottom}to{transform-origin:left bottom;-webkit-transform:none;transform:none;opacity:1}}@keyframes rotateInDownLeft{0%{transform-origin:left bottom;-webkit-transform:rotate(-45deg);transform:rotate(-45deg);opacity:0}0%,to{-webkit-transform-origin:left bottom}to{transform-origin:left bottom;-webkit-transform:none;transform:none;opacity:1}}.rotateInDownLeft{-webkit-animation-name:rotateInDownLeft;animation-name:rotateInDownLeft}@-webkit-keyframes rotateInDownRight{0%{transform-origin:right bottom;-webkit-transform:rotate(45deg);transform:rotate(45deg);opacity:0}0%,to{-webkit-transform-origin:right bottom}to{transform-origin:right bottom;-webkit-transform:none;transform:none;opacity:1}}@keyframes rotateInDownRight{0%{transform-origin:right bottom;-webkit-transform:rotate(45deg);transform:rotate(45deg);opacity:0}0%,to{-webkit-transform-origin:right bottom}to{transform-origin:right bottom;-webkit-transform:none;transform:none;opacity:1}}.rotateInDownRight{-webkit-animation-name:rotateInDownRight;animation-name:rotateInDownRight}@-webkit-keyframes rotateInUpLeft{0%{transform-origin:left bottom;-webkit-transform:rotate(45deg);transform:rotate(45deg);opacity:0}0%,to{-webkit-transform-origin:left bottom}to{transform-origin:left bottom;-webkit-transform:none;transform:none;opacity:1}}@keyframes rotateInUpLeft{0%{transform-origin:left bottom;-webkit-transform:rotate(45deg);transform:rotate(45deg);opacity:0}0%,to{-webkit-transform-origin:left bottom}to{transform-origin:left bottom;-webkit-transform:none;transform:none;opacity:1}}.rotateInUpLeft{-webkit-animation-name:rotateInUpLeft;animation-name:rotateInUpLeft}@-webkit-keyframes rotateInUpRight{0%{transform-origin:right bottom;-webkit-transform:rotate(-90deg);transform:rotate(-90deg);opacity:0}0%,to{-webkit-transform-origin:right bottom}to{transform-origin:right bottom;-webkit-transform:none;transform:none;opacity:1}}@keyframes rotateInUpRight{0%{transform-origin:right bottom;-webkit-transform:rotate(-90deg);transform:rotate(-90deg);opacity:0}0%,to{-webkit-transform-origin:right bottom}to{transform-origin:right bottom;-webkit-transform:none;transform:none;opacity:1}}.rotateInUpRight{-webkit-animation-name:rotateInUpRight;animation-name:rotateInUpRight}@-webkit-keyframes rotateOut{0%{transform-origin:center;opacity:1}0%,to{-webkit-transform-origin:center}to{transform-origin:center;-webkit-transform:rotate(200deg);transform:rotate(200deg);opacity:0}}@keyframes rotateOut{0%{transform-origin:center;opacity:1}0%,to{-webkit-transform-origin:center}to{transform-origin:center;-webkit-transform:rotate(200deg);transform:rotate(200deg);opacity:0}}.rotateOut{-webkit-animation-name:rotateOut;animation-name:rotateOut}@-webkit-keyframes rotateOutDownLeft{0%{transform-origin:left bottom;opacity:1}0%,to{-webkit-transform-origin:left bottom}to{transform-origin:left bottom;-webkit-transform:rotate(45deg);transform:rotate(45deg);opacity:0}}@keyframes rotateOutDownLeft{0%{transform-origin:left bottom;opacity:1}0%,to{-webkit-transform-origin:left bottom}to{transform-origin:left bottom;-webkit-transform:rotate(45deg);transform:rotate(45deg);opacity:0}}.rotateOutDownLeft{-webkit-animation-name:rotateOutDownLeft;animation-name:rotateOutDownLeft}@-webkit-keyframes rotateOutDownRight{0%{transform-origin:right bottom;opacity:1}0%,to{-webkit-transform-origin:right bottom}to{transform-origin:right bottom;-webkit-transform:rotate(-45deg);transform:rotate(-45deg);opacity:0}}@keyframes rotateOutDownRight{0%{transform-origin:right bottom;opacity:1}0%,to{-webkit-transform-origin:right bottom}to{transform-origin:right bottom;-webkit-transform:rotate(-45deg);transform:rotate(-45deg);opacity:0}}.rotateOutDownRight{-webkit-animation-name:rotateOutDownRight;animation-name:rotateOutDownRight}@-webkit-keyframes rotateOutUpLeft{0%{transform-origin:left bottom;opacity:1}0%,to{-webkit-transform-origin:left bottom}to{transform-origin:left bottom;-webkit-transform:rotate(-45deg);transform:rotate(-45deg);opacity:0}}@keyframes rotateOutUpLeft{0%{transform-origin:left bottom;opacity:1}0%,to{-webkit-transform-origin:left bottom}to{transform-origin:left bottom;-webkit-transform:rotate(-45deg);transform:rotate(-45deg);opacity:0}}.rotateOutUpLeft{-webkit-animation-name:rotateOutUpLeft;animation-name:rotateOutUpLeft}@-webkit-keyframes rotateOutUpRight{0%{transform-origin:right bottom;opacity:1}0%,to{-webkit-transform-origin:right bottom}to{transform-origin:right bottom;-webkit-transform:rotate(90deg);transform:rotate(90deg);opacity:0}}@keyframes rotateOutUpRight{0%{transform-origin:right bottom;opacity:1}0%,to{-webkit-transform-origin:right bottom}to{transform-origin:right bottom;-webkit-transform:rotate(90deg);transform:rotate(90deg);opacity:0}}.rotateOutUpRight{-webkit-animation-name:rotateOutUpRight;animation-name:rotateOutUpRight}@-webkit-keyframes hinge{0%{transform-origin:top left}0%,20%,60%{-webkit-transform-origin:top left;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out}20%,60%{-webkit-transform:rotate(80deg);transform:rotate(80deg);transform-origin:top left}40%,80%{-webkit-transform:rotate(60deg);transform:rotate(60deg);-webkit-transform-origin:top left;transform-origin:top left;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out;opacity:1}to{-webkit-transform:translate3d(0,700px,0);transform:translate3d(0,700px,0);opacity:0}}@keyframes hinge{0%{transform-origin:top left}0%,20%,60%{-webkit-transform-origin:top left;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out}20%,60%{-webkit-transform:rotate(80deg);transform:rotate(80deg);transform-origin:top left}40%,80%{-webkit-transform:rotate(60deg);transform:rotate(60deg);-webkit-transform-origin:top left;transform-origin:top left;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out;opacity:1}to{-webkit-transform:translate3d(0,700px,0);transform:translate3d(0,700px,0);opacity:0}}.hinge{-webkit-animation-name:hinge;animation-name:hinge}@-webkit-keyframes rollIn{0%{opacity:0;-webkit-transform:translate3d(-100%,0,0) rotate(-120deg);transform:translate3d(-100%,0,0) rotate(-120deg)}to{opacity:1;-webkit-transform:none;transform:none}}@keyframes rollIn{0%{opacity:0;-webkit-transform:translate3d(-100%,0,0) rotate(-120deg);transform:translate3d(-100%,0,0) rotate(-120deg)}to{opacity:1;-webkit-transform:none;transform:none}}.rollIn{-webkit-animation-name:rollIn;animation-name:rollIn}@-webkit-keyframes rollOut{0%{opacity:1}to{opacity:0;-webkit-transform:translate3d(100%,0,0) rotate(120deg);transform:translate3d(100%,0,0) rotate(120deg)}}@keyframes rollOut{0%{opacity:1}to{opacity:0;-webkit-transform:translate3d(100%,0,0) rotate(120deg);transform:translate3d(100%,0,0) rotate(120deg)}}.rollOut{-webkit-animation-name:rollOut;animation-name:rollOut}@-webkit-keyframes zoomIn{0%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}50%{opacity:1}}@keyframes zoomIn{0%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}50%{opacity:1}}.zoomIn{-webkit-animation-name:zoomIn;animation-name:zoomIn}@-webkit-keyframes zoomInDown{0%{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(0,-1000px,0);transform:scale3d(.1,.1,.1) translate3d(0,-1000px,0);-webkit-animation-timing-function:cubic-bezier(.55,.055,.675,.19);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}60%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(0,60px,0);transform:scale3d(.475,.475,.475) translate3d(0,60px,0);-webkit-animation-timing-function:cubic-bezier(.175,.885,.32,1);animation-timing-function:cubic-bezier(.175,.885,.32,1)}}@keyframes zoomInDown{0%{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(0,-1000px,0);transform:scale3d(.1,.1,.1) translate3d(0,-1000px,0);-webkit-animation-timing-function:cubic-bezier(.55,.055,.675,.19);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}60%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(0,60px,0);transform:scale3d(.475,.475,.475) translate3d(0,60px,0);-webkit-animation-timing-function:cubic-bezier(.175,.885,.32,1);animation-timing-function:cubic-bezier(.175,.885,.32,1)}}.zoomInDown{-webkit-animation-name:zoomInDown;animation-name:zoomInDown}@-webkit-keyframes zoomInLeft{0%{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(-1000px,0,0);transform:scale3d(.1,.1,.1) translate3d(-1000px,0,0);-webkit-animation-timing-function:cubic-bezier(.55,.055,.675,.19);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}60%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(10px,0,0);transform:scale3d(.475,.475,.475) translate3d(10px,0,0);-webkit-animation-timing-function:cubic-bezier(.175,.885,.32,1);animation-timing-function:cubic-bezier(.175,.885,.32,1)}}@keyframes zoomInLeft{0%{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(-1000px,0,0);transform:scale3d(.1,.1,.1) translate3d(-1000px,0,0);-webkit-animation-timing-function:cubic-bezier(.55,.055,.675,.19);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}60%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(10px,0,0);transform:scale3d(.475,.475,.475) translate3d(10px,0,0);-webkit-animation-timing-function:cubic-bezier(.175,.885,.32,1);animation-timing-function:cubic-bezier(.175,.885,.32,1)}}.zoomInLeft{-webkit-animation-name:zoomInLeft;animation-name:zoomInLeft}@-webkit-keyframes zoomInRight{0%{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(1000px,0,0);transform:scale3d(.1,.1,.1) translate3d(1000px,0,0);-webkit-animation-timing-function:cubic-bezier(.55,.055,.675,.19);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}60%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(-10px,0,0);transform:scale3d(.475,.475,.475) translate3d(-10px,0,0);-webkit-animation-timing-function:cubic-bezier(.175,.885,.32,1);animation-timing-function:cubic-bezier(.175,.885,.32,1)}}@keyframes zoomInRight{0%{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(1000px,0,0);transform:scale3d(.1,.1,.1) translate3d(1000px,0,0);-webkit-animation-timing-function:cubic-bezier(.55,.055,.675,.19);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}60%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(-10px,0,0);transform:scale3d(.475,.475,.475) translate3d(-10px,0,0);-webkit-animation-timing-function:cubic-bezier(.175,.885,.32,1);animation-timing-function:cubic-bezier(.175,.885,.32,1)}}.zoomInRight{-webkit-animation-name:zoomInRight;animation-name:zoomInRight}@-webkit-keyframes zoomInUp{0%{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(0,1000px,0);transform:scale3d(.1,.1,.1) translate3d(0,1000px,0);-webkit-animation-timing-function:cubic-bezier(.55,.055,.675,.19);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}60%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);-webkit-animation-timing-function:cubic-bezier(.175,.885,.32,1);animation-timing-function:cubic-bezier(.175,.885,.32,1)}}@keyframes zoomInUp{0%{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(0,1000px,0);transform:scale3d(.1,.1,.1) translate3d(0,1000px,0);-webkit-animation-timing-function:cubic-bezier(.55,.055,.675,.19);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}60%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);-webkit-animation-timing-function:cubic-bezier(.175,.885,.32,1);animation-timing-function:cubic-bezier(.175,.885,.32,1)}}.zoomInUp{-webkit-animation-name:zoomInUp;animation-name:zoomInUp}@-webkit-keyframes zoomOut{0%{opacity:1}50%{-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}50%,to{opacity:0}}@keyframes zoomOut{0%{opacity:1}50%{-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}50%,to{opacity:0}}.zoomOut{-webkit-animation-name:zoomOut;animation-name:zoomOut}@-webkit-keyframes zoomOutDown{40%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);-webkit-animation-timing-function:cubic-bezier(.55,.055,.675,.19);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}to{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(0,2000px,0);transform:scale3d(.1,.1,.1) translate3d(0,2000px,0);-webkit-transform-origin:center bottom;transform-origin:center bottom;-webkit-animation-timing-function:cubic-bezier(.175,.885,.32,1);animation-timing-function:cubic-bezier(.175,.885,.32,1)}}@keyframes zoomOutDown{40%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);-webkit-animation-timing-function:cubic-bezier(.55,.055,.675,.19);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}to{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(0,2000px,0);transform:scale3d(.1,.1,.1) translate3d(0,2000px,0);-webkit-transform-origin:center bottom;transform-origin:center bottom;-webkit-animation-timing-function:cubic-bezier(.175,.885,.32,1);animation-timing-function:cubic-bezier(.175,.885,.32,1)}}.zoomOutDown{-webkit-animation-name:zoomOutDown;animation-name:zoomOutDown}@-webkit-keyframes zoomOutLeft{40%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(42px,0,0);transform:scale3d(.475,.475,.475) translate3d(42px,0,0)}to{opacity:0;-webkit-transform:scale(.1) translate3d(-2000px,0,0);transform:scale(.1) translate3d(-2000px,0,0);-webkit-transform-origin:left center;transform-origin:left center}}@keyframes zoomOutLeft{40%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(42px,0,0);transform:scale3d(.475,.475,.475) translate3d(42px,0,0)}to{opacity:0;-webkit-transform:scale(.1) translate3d(-2000px,0,0);transform:scale(.1) translate3d(-2000px,0,0);-webkit-transform-origin:left center;transform-origin:left center}}.zoomOutLeft{-webkit-animation-name:zoomOutLeft;animation-name:zoomOutLeft}@-webkit-keyframes zoomOutRight{40%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(-42px,0,0);transform:scale3d(.475,.475,.475) translate3d(-42px,0,0)}to{opacity:0;-webkit-transform:scale(.1) translate3d(2000px,0,0);transform:scale(.1) translate3d(2000px,0,0);-webkit-transform-origin:right center;transform-origin:right center}}@keyframes zoomOutRight{40%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(-42px,0,0);transform:scale3d(.475,.475,.475) translate3d(-42px,0,0)}to{opacity:0;-webkit-transform:scale(.1) translate3d(2000px,0,0);transform:scale(.1) translate3d(2000px,0,0);-webkit-transform-origin:right center;transform-origin:right center}}.zoomOutRight{-webkit-animation-name:zoomOutRight;animation-name:zoomOutRight}@-webkit-keyframes zoomOutUp{40%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(0,60px,0);transform:scale3d(.475,.475,.475) translate3d(0,60px,0);-webkit-animation-timing-function:cubic-bezier(.55,.055,.675,.19);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}to{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(0,-2000px,0);transform:scale3d(.1,.1,.1) translate3d(0,-2000px,0);-webkit-transform-origin:center bottom;transform-origin:center bottom;-webkit-animation-timing-function:cubic-bezier(.175,.885,.32,1);animation-timing-function:cubic-bezier(.175,.885,.32,1)}}@keyframes zoomOutUp{40%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(0,60px,0);transform:scale3d(.475,.475,.475) translate3d(0,60px,0);-webkit-animation-timing-function:cubic-bezier(.55,.055,.675,.19);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}to{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(0,-2000px,0);transform:scale3d(.1,.1,.1) translate3d(0,-2000px,0);-webkit-transform-origin:center bottom;transform-origin:center bottom;-webkit-animation-timing-function:cubic-bezier(.175,.885,.32,1);animation-timing-function:cubic-bezier(.175,.885,.32,1)}}.zoomOutUp{-webkit-animation-name:zoomOutUp;animation-name:zoomOutUp}@-webkit-keyframes slideInDown{0%{-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0);visibility:visible}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes slideInDown{0%{-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0);visibility:visible}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}.slideInDown{-webkit-animation-name:slideInDown;animation-name:slideInDown}@-webkit-keyframes slideInLeft{0%{-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0);visibility:visible}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes slideInLeft{0%{-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0);visibility:visible}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}.slideInLeft{-webkit-animation-name:slideInLeft;animation-name:slideInLeft}@-webkit-keyframes slideInRight{0%{-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0);visibility:visible}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes slideInRight{0%{-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0);visibility:visible}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}.slideInRight{-webkit-animation-name:slideInRight;animation-name:slideInRight}@-webkit-keyframes slideInUp{0%{-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0);visibility:visible}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes slideInUp{0%{-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0);visibility:visible}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}.slideInUp{-webkit-animation-name:slideInUp;animation-name:slideInUp}@-webkit-keyframes slideOutDown{0%{-webkit-transform:translateZ(0);transform:translateZ(0)}to{visibility:hidden;-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}}@keyframes slideOutDown{0%{-webkit-transform:translateZ(0);transform:translateZ(0)}to{visibility:hidden;-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}}.slideOutDown{-webkit-animation-name:slideOutDown;animation-name:slideOutDown}@-webkit-keyframes slideOutLeft{0%{-webkit-transform:translateZ(0);transform:translateZ(0)}to{visibility:hidden;-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}}@keyframes slideOutLeft{0%{-webkit-transform:translateZ(0);transform:translateZ(0)}to{visibility:hidden;-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}}.slideOutLeft{-webkit-animation-name:slideOutLeft;animation-name:slideOutLeft}@-webkit-keyframes slideOutRight{0%{-webkit-transform:translateZ(0);transform:translateZ(0)}to{visibility:hidden;-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}}@keyframes slideOutRight{0%{-webkit-transform:translateZ(0);transform:translateZ(0)}to{visibility:hidden;-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}}.slideOutRight{-webkit-animation-name:slideOutRight;animation-name:slideOutRight}@-webkit-keyframes slideOutUp{0%{-webkit-transform:translateZ(0);transform:translateZ(0)}to{visibility:hidden;-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}}@keyframes slideOutUp{0%{-webkit-transform:translateZ(0);transform:translateZ(0)}to{visibility:hidden;-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}}.slideOutUp{-webkit-animation-name:slideOutUp;animation-name:slideOutUp} /* ABC *** Body */ html, body { margin:0; padding:0; min-height: 100%; } body { font-family: "Barlow", Arial, Verdana, sans-serif; font-size: 1.1em; line-height: 1.7; background: #13172C; color: #fff; overflow-x: hidden; overflow-y: scroll; } body.rtl, body.rtl *{ direction: rtl; } a { text-decoration: none; color: #fff; } a:hover { color: #206BB3; } body.noscroll { overflow-y: hidden; } /* ABC *** Menu (slideout) */ #menu { position: fixed; width: 350px; top: 0; right: 0; z-index: 9; height: 100%; background: #0f1224; -webkit-transform: translateX(100%); transform: translateX(100%); transition: all 300ms; } #menu.active { -webkit-transform: translateX(0%); transform: translateX(0%); } #menu ul { position: absolute; right: 0; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); width: 100%; } #menu ul li { font-size: 1.2em; text-align: center; text-transform: uppercase; font-family: 'din'; font-weight: normal; } #menu ul li a { font-weight: 700; color: #fff; display: block; padding: 5px 0; } #menu ul li a:hover, #menu ul li.active a { color: #565f90; } #menu .close { position: absolute; left: 50%; top: 39px; cursor: pointer; height: 36px; width: 36px; background: #2a315b; border-radius: 40px; margin-left: -18px; font-weight: 900; background-image: url('../images/icons/close.png'); background-size: 16px 16px; background-position: 50% 50%; background-repeat: no-repeat; z-index: 2; } #menu .close:hover { background-color: #3F7CB8; -webkit-transform: scale(1.1); transform: scale(1.1); } /* ABC *** header navigation */ #header { height: 120px; width: 100%; position: fixed; z-index: 8; left: 0; top: 0; box-sizing: border-box; transition: all 200ms; background-image: url('../images/menu.png'); background-repeat: repeat-x; background-position: 0px 0px; } #header.moved { -webkit-transform: translateX(-350px); transform: translateX(-350px); } #header.moved-wide { -webkit-transform: translateX(-600px); transform: translateX(-600px); } #header #header-container { position: relative; width: 90%; max-width: 1100px; margin: 0 auto; height: 120px; transition: all 200ms; } #header #header-container #logo { width: 230px; height: 160px; position: absolute; left: -33px; top: 80%; background-image: url('../images/logo_emblem@2x.png'); background-size: 230px 160px; -webkit-transform: translateY(-50%); transform: translateY(-50%); } #header #header-container #logo a { display: block; height: 100%; width: 100%; } #header #header-container #buttons { position: absolute; right: 0; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); font-size: 0.9em; font-family: 'din'; font-weight: normal; } #header #header-container #buttons #menu-mobile { background: #fff; color: #D31418; padding: 15px 15px; padding-left: 40px; float: left; cursor: pointer; line-height: 1.1; position: relative; } body.rtl #header #header-container #buttons #menu-mobile { padding-left: 20px; padding-right: 40px; } #header #header-container #buttons #menu-mobile:hover { background-color: #efefef; } #header #header-container #buttons #reserveren { float: left; margin-left: 1em; position: relative; } #header #header-container #buttons #reserveren div.buttonreserveren { display: block; background: #e10814; position: relative; line-height: 1.1; cursor: pointer; } #header #header-container #buttons #reserveren div.buttonreserveren a { display: block; padding: 15px 20px; padding-left: 0; color: #fff; padding-left: 50px; } body.rtl #header #header-container #buttons #reserveren div.buttonreserveren { padding-left: 20px; padding-right: 50px; } #header #header-container #buttons #reserveren div.buttonreserveren:hover { background: #c50f1a; color: #fff; } #header #header-container #buttons .button .icon { width: 16px; height: 16px; position: absolute; left: 15px; top: 50%; margin-top: -8px; } body.rtl #header #header-container #buttons .button .icon { left: inherit; right: 15px; } #header #header-container #buttons .button#reserveren .icon { background-image: url('../images/icons/reserveren.png'); background-size: 22px 22px; background-repeat: no-repeat; left: 15px; width: 22px; height: 22px; margin-top: -11px; } #header #header-container #buttons .button#menu-mobile .icon .bar { width: 100%; height: 2px; border-radius: 1px; background: #D31418; position: absolute; transition: all 300ms ease-in-out; } #header #header-container #buttons .button#menu-mobile .icon .bar.bar-1 { top: 0px; left: 0; } #header #header-container #buttons .button#menu-mobile .icon .bar.bar-2 { top: 7px; left: 0; } #header #header-container #buttons .button#menu-mobile .icon .bar.bar-3 { top: 14px; left: 0; } #header.moved #header-container #buttons .button#menu-mobile .icon .bar.bar-1 { -webkit-transform: rotate(45deg); transform: rotate(45deg); top: 8px; } #header.moved #header-container #buttons .button#menu-mobile .icon .bar.bar-2 { opacity: 0; } #header.moved #header-container #buttons .button#menu-mobile .icon .bar.bar-3 { -webkit-transform: rotate(-45deg); transform: rotate(-45deg); top: 8px; } #header #header-container #langmenu { position: relative; float: left; height: 46px; width: 35px; margin: 0 15px; margin-right: 10px; } #header #header-container #langmenu img.trigger { position: absolute; left: 50%; top: 50%; width: 20px; height: 20px; margin-left: -10px; margin-top: -10px; border-radius: 20px; cursor: pointer; box-shadow: 2px 2px 0px rgba(0,0,0,0.05); } #header #header-container #langmenu .arrow, #header #header-container #buttons #location .arrow { width: 18px; height: 18px; position: absolute; bottom: -10px; left: 50%; background: #1d2f72; border-radius: 18px; cursor: pointer; background-image: url('../images/icons/down.png'); background-size: 18px 18px; background-repeat: no-repeat; background-position: center center; transition: all 200ms; margin-left: -9px; } #header #header-container #langmenu .arrow.toggle, #header #header-container #buttons #location .arrow.toggle { -webkit-transform: rotate(180deg); transform: rotate(180deg); right: 6px; } #header #header-container #langmenu .choices, #header #header-container #location .choices { padding: 15px 10px; background: #fff; position: absolute; left: -15%; box-sizing: border-box; width: 130%; top: 100%; border-radius: 3px; opacity: 0; pointer-events: none; transition: all 300ms cubic-bezier(0.64, 0.57, 0.67, 1.53); margin-top: 30px; } #header #header-container #langmenu .choices.visible, #header #header-container #location .choices.visible { margin-top: 10px; opacity: 1; pointer-events: all; } #header #header-container #langmenu .choices:before, #header #header-container #location .choices:before { content: ""; width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 5px solid #fff; position: absolute; left: 50%; margin-left: -5px; top: -4px; } #header #header-container #langmenu .choices .lang { margin: 0 auto; overflow: hidden; border-radius: 20px; margin-bottom: 10px; width: 100%; } #header #header-container #langmenu .choices .lang:last-child { margin: 0 auto; } #header #header-container #langmenu .choices .lang a img { display: block; width: 100%; } #header #header-container #langmenu .choices .lang:hover { -webkit-transform: scale(0.9); transform: scale(0.9); } #header #header-container #buttons #location .choices a { color: #13172c; display: block; line-height: 1; text-align: center; padding: 3px 0; font-size: .9em; } #header #header-container #buttons #location .choices a:hover { color: #206cb4; } #header #header-container #buttons #location { float: left; height: 46px; line-height: 46px; text-transform: uppercase; position: relative; padding: 0 0px; font-size: 1em; cursor: pointer; text-shadow: 2px 2px 0px rgba(0,0,0,0.05); } #header #header-container #buttons #location:after { content: ""; width: 2px; height: 30px; background: rgba(0,0,0,0.05); position: absolute; right: -12px; top: 50%; margin-top: -15px; } #header #header-container #buttons #location .choices { width: 150px; left: 50%; margin-left: -75px; } #header #header-container #buttons #location .choices ul li a.first { font-size: .6em; padding-bottom: 10px; } #header.compact, #header.compact #header-container { height: 80px; } #header.compact { background-position: 0px -30px } /* ABC *** Wrapper */ #wrapper { position: relative; transition: transform 300ms; } #wrapper.moved { -webkit-transform: translateX(-350px); transform: translateX(-350px); } #wrapper.moved-wide { -webkit-transform: translateX(-600px); transform: translateX(-600px); } /* ABC *** Preloader */ .loader-holder { position: fixed; left: 0; top: 0; width: 100%; height: 100%; background: #191E39; z-index: 9; display: none; -webkit-animation-duration: 200ms; } .loader-holder.show { display: block; } .loader-holder.loaded { pointer-events: none; } .loader-holder .loader { width: 200px; height: 60px; position: fixed; left: 50%; top: 50%; z-index: 9; -webkit-transform: translateX(-50%) translateY(-50%); } .loader-holder .loader.hide { display: none; } .loader-holder .loader img { display: block; position: relative; z-index: 3; width: 100%; } .loader-holder .loader:after { content: ""; width: 100%; height: 0px; position: absolute; left: 0; bottom: 2px; background: #13172C; transition: all 300ms ease-in-out; } .loader-holder.loaded .loader:after { height: calc(100% - 2px); } .loader-holder, .loader-holder.show { display: none!important; } /* ABC *** Page content items */ #content { box-sizing: border-box; background-image: url('../images/bg.jpg'); background-position: 50% 0; background-repeat: repeat-y; background-size: 100%; background-attachment: fixed; position: relative; z-index: 1; } #wrapper.restaurants .page_content { margin-top: -2em; } #content .page_content { padding-bottom: 0px; width: 90%; max-width: 1100px; margin: 0 auto; min-height: 300px; font-size: 1.1em; position: relative; z-index: 2; } #content .page_content .page { padding-bottom: 1em; } #content .page_content .page p { padding-bottom: 1em; } #content .page_content .page p a { color: #4b99e0; border-bottom: 2px solid #4b99e0; } #content .page_content .page p a:hover { color: #8bc8ff; border-color: #8bc8ff; } #content .page_content .page h1 { font-size: 3em; line-height: 1; padding-bottom: .6em; font-weight: normal; font-family: "Cabin Sketch"; } #content .page_content .page h2 { font-size: 1.5em; font-weight: normal; font-family: "Cabin Sketch"; margin-top: 1.6em; line-height: 1.2; color: #eee; } #content .page_content .page.hassubmenu { width: calc(100% - 350px); float: left; } #content #show-submenu { display: none; } #content .page_content #submenu { width: 350px; float: left; box-sizing: border-box; margin-bottom: 3em; position: relative; z-index: 3; } #wrapper.restaurants #content .page_content #submenu { margin-top: 100px; } body.page27 #wrapper.restaurants #content .page_content #submenu, body.page62 #wrapper.restaurants #content .page_content #submenu, /* diet/vega */ body.page28 #wrapper.restaurants #content .page_content #submenu, body.page61 #wrapper.restaurants #content .page_content #submenu, /* diet/vega */ body.page46 #wrapper.restaurants #content .page_content #submenu, body.page48 #wrapper.restaurants #content .page_content #submenu, body.page63 #wrapper.restaurants #content .page_content #submenu /* healthy options */ { margin-top: 0; } #content .page_content #submenu ul { margin-right: 60px; background: #fff; border-radius: 3px; padding: 1em 0; background-image: url('../images/border.png'); background-repeat: repeat-y; background-position: calc(100% - 20px) 0px; box-shadow: 2px 2px 0px rgba(0,0,0,0.1); } #content .page_content #submenu ul li { padding: 5px 0; padding-left: 27px; padding-right: 52px; font-family: "Barlow Semi Condensed"; font-weight: bold; text-transform: uppercase; font-size: 0.9em; line-height: 1.2; } #content .page_content #submenu ul li:first-child a { color: #206DB5; } #content .page_content #submenu ul li:first-child a:before { content: "‹"; position: absolute; left: -12px; top: -2px; } body.rtl #content .page_content #submenu ul li:first-child a:before { content: "›"; left: inherit; right: -12px; } #content .page_content #submenu ul li a { color: #2A315B; display: block; position: relative; } #content .page_content #submenu ul li a:hover, #content .page_content #submenu ul li.active a { color: #D31418; } #content .page_content .page ul, #content .page_content .page ol { margin: 1.5em 0; margin-bottom: 2em; } #content .page_content .page ul li { list-style-type: disc; margin-left: 1em; padding-left: 1em; } #content .page_content .page ol li { list-style-type: decimal; margin-left: 1em; padding-left: 1em; } /* lists @ healhy food (15-08-2018) */ body.page46 #content .page_content .page ul, body.page46 #content .page_content .page ol, body.page48 #content .page_content .page ul, body.page48 #content .page_content .page ol { margin: .2em 0; } /* tables @ groepen (03-07-2019) */ body.page48 #content .page_content table, body.page53 #content .page_content table { border: 1px solid #666; margin: 1.5em 0 2em 0; } body.page48 #content .page_content table tr td, body.page53 #content .page_content table tr td { padding: 10px; border: 1px solid #666; } body.page48 #content .page_content p, body.page53 #content .page_content p, body.page50 #content .page_content p, body.page54 #content .page_content p { padding-bottom: .1em; } body.page48 #content .page_content h2, body.page53 #content .page_content h2, body.page50 #content .page_content h2 body.page54 #content .page_content h2 { margin-bottom: .5em; } body.page50 #content .page_content p img, body.page54 #content .page_content p img { display: block; width: 100%; margin-top: 2em; } #content .page_content .page .links { margin: 3em 0; color: #fff; box-sizing: border-box; font-family: "Cabin Sketch"; padding-top: 2em; position: relative; } #content .page_content .page .links:before { content: ""; width: 20px; height: 3px; background: #fff; border-radius: 2px; position: absolute; left: 0; top: 0; } #content .page_content .page .links h3 { font-weight: normal; } #content .page_content .page .links a { display: block; font-size: 1.2em; color: #fff; background-image: url('../images/icons/download.png'); background-size: 16px 16px; background-repeat: no-repeat; background-position: center left; padding-left: 30px; } #content .page_content .page .links a.link { background-image: url('../images/icons/link.png'); } #content .page_content .page .links a:hover { color: #ccc; } #content .page_content .page img.birthday-card-image, #content .page_content .page img.healthy-options-image { float: right; display: block; width: 200px; margin: 1em; margin-left: 2em; } #content .page_content .page .birthday-card-div { float: right; display: block; width: 300px; margin: 1em; margin-left: 2em; margin-top: 0px; } #content .page_content .page .birthday-card-div img { display: block; width: 100%; margin-top: 2em; } #content .page_content .page .birthday-card-div .birthday-card-div-panel { background: #191E39; float: left; padding: 1.5em; border-radius: 3px; font-size: 0.9em; margin-bottom: 2em; } #content .page_content .page .birthday-card-div .birthday-card-div-panel h2 { margin-top: 0; margin-bottom: 1em; } /* ABC *** Graphic headers (in #content) */ #imagery { margin-bottom: -100px; position: relative; z-index: 1; } #imagery.restaurant { margin-bottom: 0px; } #imagery #art { position: relative; width: 100%; margin: 0 auto; margin-top: -50px; } #imagery #art img { display: block; width: 100%; } /* ABC *** Homevideo */ #content #homevideo-holder { width: 100%; height: auto; overflow: hidden; position: relative; background-image: url('../images/loading.gif'); background-size: 32px 32px; background-position: 50% 400px ; background-repeat: no-repeat; transition: background 300ms; } #wrapper.moved #content #homevideo-holder { background-position: 50% -400px ; } #wrapper.moved #content #homevideo-holder #homevideo { /*opacity: 0.5;*/ transform: translateY(0%); } #content #homevideo-holder #homevideo { height: 870px; position: relative; transition: all 300ms; } #content #homevideo-holder.homevideo-holder-abc #homevideo { height: 900px; } .vimeo-wrapper { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; overflow: hidden; display: none; } .vimeo-wrapper iframe { width: 100vw; height: 56.25vw; /* Given a 16:9 aspect ratio, 9/16*100 = 56.25 */ min-height: 100vh; min-width: 177.77vh; /* Given a 16:9 aspect ratio, 16/9*100 = 177.77 */ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } #content #homevideo-holder #homevideo-overlay /* paneltje rechts met slides */ { position: absolute; left: 50%; bottom: 5%; transform: translateX(-50%); width: 90%; max-width: 1130px; z-index: 3; display: flex; justify-content: flex-end; } #content #homevideo-holder #homevideo-overlay .panel img { display: block; width: 100%; } #content #homevideo-holder #homevideo-overlay .panel { position: relative; background: #13172C; background-image: url('../images/bg.jpg'); background-position: 50% 50%; width: 31.333%; animation-delay: 1000ms; -webkit-animation-delay: 1000ms; } #content #homevideo-holder #homevideo-overlay .panel .slides { position: relative; } #content #homevideo-holder #homevideo-overlay .panel .slides .nav.next, #content #homevideo-holder #homevideo-overlay .panel .slides .nav.prev { content: ""; width: 45px; height: 45px; background: rgba(25,30,57,1); position: absolute; left: 25px; bottom: -25px; border-radius: 45px; background-image: url('../images/icons/prev.png'); background-size: 30px 30px; background-position: 50% 50%; background-repeat: no-repeat; cursor: pointer; z-index: 999; } #content #homevideo-holder #homevideo-overlay .panel .slides a { z-index: 1; } #content #homevideo-holder #homevideo-overlay .panel .slides .nav.next { left: auto; right: 25px; background-image: url('../images/icons/next.png'); } #content #homevideo-holder #homevideo-overlay .panel .slides .nav:hover { background-color: #E20714; } #content #homevideo-holder #homevideo-overlay .panel .slides .text { font-size: 1.1em; font-weight: bold; background: #1d2f72; padding: 20px 20px; font-family: 'din'; font-weight: normal; text-transform: uppercase; } #content #homevideo-holder #homevideo-overlay .panel .slides .text span { display: inline-block; color: #fff; padding: 0px 10px; margin: -7px 0; font-size: 0.9em; } #content #homevideo-holder #homevideo-overlay .panel .slides .text span:first-child { text-transform: uppercase; } #content #homevideo-holder #homevideo-overlay .panel .slides .text span strong { font-size: 1.4em; font-weight: normal; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #content #homevideo-holder #homevideo-overlay .panel p { padding: 35px 30px; padding-bottom: 35px; } #content #homevideo-holder #homevideo-overlay .panel p:nth-of-type(1) { padding-top: 30px; padding-bottom: 0; } #content #homevideo-holder #homevideo-overlay .panel p:nth-of-type(2) { padding-top: 30px; } #content #homevideo-holder #homevideo-overlay .panel ul { padding: 35px 30px; padding-bottom: 45px; } #content #homevideo-holder #homevideo-overlay .panel ul li { font-weight: normal; padding-left: 30px; background-image: url('../images/icons/check.png'); background-size: 16px 16px; background-position: center left; background-repeat: no-repeat; font-size: 1em; color: #fff; white-space: nowrap; font-family: "Cabin Sketch"; } body.rtl #content #homevideo-holder #homevideo-overlay .panel ul li { padding-left: 0; padding-right: 30px; background-position: center right; } #content #homevideo-holder #homevideo-overlay .panel ul li:nth-of-type(even) { background-size: 20px 20px; } #content #homevideo-holder #homevideo-overlay .panel .slides a:hover .text span { color: #efefef; } #content #homevideo-holder #homevideo-overlay .panel .open { /* position: absolute; left: 50%; bottom: -20px; -webkit-transform: translateX(-50%) translateY(50%); transform: translateX(-50%) translateY(50%) max-width: 100%; width: 100%; white-space: nowrap; font-size: 0.8em; box-sizing: border-box;*/ } body.rtl #content #homevideo-holder #homevideo-overlay .panel .open { padding-left: 20px; padding-right: 60px; background-position: right 15px center; } #content #homevideo-holder #homevideo-overlay .panel .open strong { display: block; font-weight: normal; } #content #homevideo-holder #homevideo-overlay .panel .open strong.title { font-weight: 800; text-transform: uppercase; } #content #homevideo-holder #homevideo-overlay .panel .open a { display: block; padding: 15px 20px; padding-left: 70px; background-image: url('../images/icons/clock.png'); background-size: 30px 30px; background-position: 25px 50%; background-repeat: no-repeat; background-color: #bd1f24; } #content #homevideo-holder #homevideo-overlay .panel .open a:hover { background-color: #c50f1a; color: #fff; } /* ABC *** 4 panels onderin (titel, foto, link) */ #content .panels { padding-top: 120px; padding-bottom: 80px; clear: both; background: #191E39; position: relative; z-index: 2; } #content .panels .panels-container { max-width: 1330px; margin: 0 auto; width: 90%; position: relative; } #content .panels .panels-container .panel { width: 23%; margin: 1%; background: #2167B0; min-height: 140px; float: left; position: relative; } #content .panels .panels-container .panel .image { width: 100%; /*overflow: hidden; height: 200px;*/ } #content .panels .panels-container .panel img { display: block; min-width: 100%; height: auto; width: 100%; /*position: relative; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%);*/ } #content .panels .panels-container .panel .text { position: absolute; left: 0%; top: -20px; /*-webkit-transform: rotate(-2deg); transform: rotate(-2deg); */ width: 100%; box-sizing: border-box; text-align: left; font-size: 0.9em; background: #1d2f72; padding: 15px 20px; transition: top 300ms; } body.rtl #content .panels .panels-container .panel .text { left: inherit; right: 0%; text-align: right; } #content .panels .panels-container .panel .text span { display: block; color: #fff; /*font-family: "Barlow";*/ text-align: left; border-radius: 3px; line-height: 1.2; font-weight: bold; } body.rtl #content .panels .panels-container .panel .text span { text-align: right; } #content .panels .panels-container .panel a .text span:nth-of-type(2) { padding-top: 5px; } #content .panels .panels-container .panel a:hover .text { background: #BD1F24; top: -25px; } #content .panels .panels-container .panel .text span strong { font-size: 1.2em; display: block; } #content .panels:before { content: ""; width: 76px; height: 10px; background-image: url(../images/blob.png); position: absolute; left: 50%; top: -9px; -webkit-transform: translateX(-50%); transform: translateX(-50%); z-index: 3; } #content .panels .panels-container:before /* arrow */ { content: ""; position: absolute; left: 50%; top: -90px; height: 40px; width: 40px; background: #bd1f24; border-radius: 40px; margin-left: -20px; font-weight: 900; background-image: url('../images/icons/down.png'); background-size: 30px 30px; background-position: 50% 50%; background-repeat: no-repeat; } #content .panels .arrow-action { position: absolute; left: 50%; top: 30px; width: 40px; height: 40px; border-radius: 40px; margin-left: -20px; z-index: 9; cursor: pointer; /* invisible overlay over pseudo arrow in circle to scroll down */ } /* 2 grote onderaan */ #content .panels { padding-bottom: 20px; } #content .panels.panels-big { padding-top: 0; padding-bottom: 80px; } #content .panels.no-bigs { padding-bottom: 80px; } #content .panels.panels-big::before, #content .panels.panels-big .panels-container::before { display: none; } #content .panels.panels-big .panel { width: 48%; } #content .panels.panels-big .panels-container .panel .image { height: auto; } #content .panels.panels-big .panels-container .panel img { height: auto; width: 100%; left: auto; -webkit-transform: none; transform: none; } /* ABC *** Restaurant-overzicht */ #content #restaurants { width: 102%; margin-left: -1%; margin-bottom: 3em; margin-top: 2em; position: relative; } /* filter /abc/ filters restaurants 2018: */ #content #restaurants ul#restaurants-filter { margin: 0; padding: 0; position: absolute; left: -3px; top: -35px; font-size: .9em; } #content #restaurants ul#restaurants-filter li { display: inline-block; padding-left: 22px; padding-right: 20px; position: relative; color: #666; cursor: pointer; font-family: "Barlow Semi Condensed"; font-weight: 800; text-transform: uppercase; } #content #restaurants ul#restaurants-filter li:first-child { margin-left: .8em; } #content #restaurants ul#restaurants-filter li.on { color: #fff; } #content #restaurants ul#restaurants-filter li:before { content: ""; width: 15px; height: 15px; position: absolute; left: 0; top: 50%; background: #666; transform: translateY(-50%); -webkit-transform: translateY(-50%); } #content #restaurants ul#restaurants-filter li.on:before { background: #206bb3; } /* submenu diets/vega/specials: */ #content #restaurants .restaurant-sub-info-pages { position: absolute; right: 10px; top: -50px; font-family: "Barlow Semi Condensed"; text-transform: uppercase; line-height: 1; font-size: 0.8em; border-radius: 3px; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; } #content #restaurants .restaurant-sub-info-pages a { display: inline-block; color: #fff; padding: 11px 14px; background: #1d2f72; margin-left: 1em; border-radius: 3px; } #content #restaurants .restaurant-sub-info-pages a:hover { background: #2167B0; } #content #restaurants .restaurant-sub-info-pages a.healthy { background: #659541; } #content #restaurants .restaurant-sub-info-pages a.healthy:hover { background: #0c7232; } /* rest-menu: tegels van ieder restaurant (tegel, titel, lijstje snippet) */ #content #restaurants ul.rest-menu { clear:both; display: flex; flex-direction: row; flex-wrap: wrap; } #content #restaurants ul.rest-menu li { width: 31.333%; /*float: left;*/ background: #191E39; margin: 1%; position: relative; transition: opacity 1000ms; } #content #restaurants ul.rest-menu li.disabled { opacity: 0.1; pointer-events: none; } #content #restaurants ul.rest-menu li a img { display: block; width: 100%; } #content #restaurants ul.rest-menu li span.title { font-size: 1.8em; font-family: "Cabin Sketch"; display: block; text-align: center; padding-top: 20px; padding-bottom: 10px; } #content #restaurants ul.rest-menu li :hover span.title { color: #ccc; } #content #restaurants ul.rest-menu li div.teaser, #content .page_content .page ul.usps { padding: 35px 20px; padding-top: 0; /*min-height: 220px;*/ box-sizing: border-box; } #content .page_content .page ul.usps { padding-left: 0; padding-bottom: 0; } #content #restaurants ul.rest-menu li div.teaser ul li, #content .page_content .page div.teaser ul li { float: none; width: 100%; margin: 0; font-weight: normal; padding-left: 30px; background-image: url('../images/icons/check.png'); background-size: 16px 16px; background-position: 4px 8px; background-repeat: no-repeat; font-size: 0.9em; color: #fff; padding-right: 0.1em; list-style-type: none; margin-left: 0em; box-sizing: border-box; line-height: 1.6; } body.rtl #content #restaurants ul.rest-menu li a div.teaser ul li, body.rtl #content .page_content .page div.teaser ul li { padding-left: .5em; padding-right: 28px; background-position: right 2px top 8px; } #content #restaurants ul.rest-menu li div.teaser ul li:nth-of-type(even), #content .page_content .page div.teaser ul li:nth-of-type(even) { background-size: 20px 20px; background-position: 2px 7px; } #content #restaurants ul.rest-menu li a:after { content: ""; width: 45px; height: 45px; background: #E10814; position: absolute; right: 25px; top: 25px; border-radius: 45px; background-image: url('../images/icons/next.png'); background-size: 30px 30px; background-position: 50% 50%; background-repeat: no-repeat; cursor: pointer; z-index: 3; } #content #restaurants.specials ul.rest-menu li a:after { display: none; } #content #restaurants ul.rest-menu li a:hover:after { -webkit-transform: scale(1.1); transform: scale(1.1); } #content #restaurants ul.rest-menu li a div.teaser p, #content #restaurants ul.rest-menu li a div.teaser p:hover { background: transparent; border: 0; padding: 0; margin: 0; color: #fff; font-size: 0.9em; } /* specials iets hoger - jan 2019 */ /*#content #restaurants.specials ul.rest-menu li div.teaser { min-height: 260px; }*/ /* ABC *** Specific content types */ /* 360 graden */ #photo360 { background: #206CB4; color: #fff; text-align: center; clear:both; font-size: 3.5em; position: relative; z-index: 2; } #photo360 iframe { display: block; width: 100%; height: 567px; } /* Plugin */ #plugin { width: 100%; margin-top: 1em; background: #fff; border-radius: 3px; background-image: url('../images/border.png'); background-repeat: repeat-y; background-position: 20px 0px; box-shadow: 2px 2px 0px rgba(0,0,0,0.1); color: #2E3F8E; margin-bottom: 2em; float: left; box-sizing: border-box; width: 100%; border-radius: 3px; } #plugin #plugin_content, #embed #embed_content { max-width: 1100px; margin: 0 auto; min-height: 400px; box-sizing: border-box; } /* Giftcard */ #giftcard { border-radius: 3px; overflow: hidden; margin-bottom: 2em; } #giftcard iframe { width: 100%; height: 600px; } /* Verjaardagskaart */ #birthdaycard { background: #fff; border-radius: 3px; margin-bottom: 2em; width: 100%; margin-top: 1em; background: #fff; border-radius: 3px; background-image: url('../images/border.png'); background-repeat: repeat-y; background-position: 20px 0px; box-shadow: 2px 2px 0px rgba(0,0,0,0.1); color: #2E3F8E; margin-bottom: 2em; } #birthdaycard iframe { width: 100%; height: 900px; display: block; overflow-y: auto; } /* Reserveren (iframe eigen css) */ #reserveren-page { overflow: hidden; padding-top: 0px; background: #fff; position: relative; z-index: 2; width: 100%; max-width: 1100px; margin: 0 auto; border-radius: 3px; box-shadow: 0px 0px 50px #000; color: #000; } #reserveren-page iframe { width: calc(100% + 40px); height: 1350px; } #reserveren-page .reserveren-note-extra { text-align: center; background: #efefef; padding: 20px; margin-bottom: 10px; } #reserveren-page .reserveren-note-extra a { color: #e10814; } /* Solliciteren */ form { position: relative; } #content #contact { background: #fff; border-radius: 3px; background-image: url('../images/border.png'); background-repeat: repeat-y; background-position: 20px 0px; box-shadow: 2px 2px 0px rgba(0,0,0,0.1); color: #2E3F8E; margin-bottom: 2em; box-sizing: border-box; width: 100%; border-radius: 3px; padding: 2em; padding-top: 100px; padding-left: 60px; } #content #contact form { max-width: 600px; margin: 0 auto; margin-bottom: 2em; } #content #contact form .field { padding: 0 0 30px 0; clear: both; position: relative; width: auto; } #content #contact form .field.textfield { width: 100%; float: left; } #content #contact form .field label { clear: both; display: block; margin: 0; padding: 0; width: 50%; float: left; box-sizing: border-box; padding-right: 3em; line-height: 30px; line-height: 1.4; } #content #contact form .field.radio label, #content #contact form .field.checkbox label { line-height: 1.4; } #content #contact form .field.radio label, #content #contact form .field.checkbox label span { } #content #contact form .field.checkbox { padding-bottom: 0; } #content #contact form .field label.checkbox { float: right; } #content #contact form input, #content #contact form textarea, #content #contact form select { padding: 9px 12px 11px 12px; font-family: inherit; font-size: inherit; color: #333; border: none; width: 50%; float: right; margin-top: 3px; border-radius: 2px; box-sizing: border-box; background-color:#eee; } #content #contact form input.required, #content #contact form select.required, #content #contact form textarea.required { background-image: url('../images/icons/check-input.png'); background-size: 16px 16px; background-position: 98% 10px; background-repeat: no-repeat; } #content #contact form select { width:50%; } #content #contact form textarea { height:127px; max-height:293px; max-width: 50%; /* prevent freestyle scaling */ } #content #contact form input[type=checkbox], #content #contact form input[type=radio] { width: auto; padding: 0; margin: 0; border: none; display: inline; margin-right: 5px; height: 20px; float: left; margin-top: 5px; } #content #contact form .field.checkbox input[type=checkbox] { margin-bottom: 60px; margin-right: 20px; } #content #contact form input.submit { clear: both; padding: 10px 20px; margin-bottom: 20px; cursor: pointer; width: auto; font-family: "Barlow Semi Condensed"; font-weight:bold; font-size: 19px; color: #fff; font-style: normal; font-weight:normal; text-transform: uppercase; line-height:28px; text-decoration: none; margin-top: 16px; border: 0; border-radius: 5px; -webkit-appearance: none; background-color: #111838; } #content #contact form input.submit:hover { cursor: pointer; background-color:#1c275a; } #content #contact form br { display: none; } #content #contact form label.error { background: #ed2024; background: rgba(237, 32, 36, 0.9); color: #fff; font-size: 12px; width: auto; text-align: center; padding: 5px 10px !important; position: absolute; bottom: 0px; right: -4px; font-weight: normal !important; line-height: 1.2; border-radius: 3px; width: auto!important; line-height: 1!important; max-width: 120px; } /*#content #contact form label.error:before { content: ""; width: 0; height: 0; border-top: 5px solid transparent; border-bottom: 5px solid transparent; border-right: 5px solid rgba(237, 32, 36, 0.9); position: absolute; left: -5px; }*/ #content #contact div.field.bc { display: none; } #content #contact .in_progress { background: #21b856; color: #fff; padding: 10px 20px; border-radius: 3px; clear: both; display: block; padding-left: 40px; background-image: url('../images/icons/in_progress.gif'); background-size: 20px 20px; background-position: 20px 50%; background-repeat: no-repeat; width: 250px; margin: 0 auto; text-align: right; font-weight: bold; display:none; } #contact .file_field_button { display: none; } #contact .file_field { font-size: 12px; cursor: pointer; } /* Voorwaarden bij formulieren, bv. proefeters */ #content #contact blockquote { padding: 1em 0; color: #000; border-radius: 3px; margin-top: 1em; max-width: 1100px; max-width: 600px; margin: 0 auto; } #content #contact blockquote h3 { font-size: 1em; margin: 0; padding: 0; margin-bottom: 1em; } #content #contact blockquote ul { margin: 0; margin-left: 1em; } #content #contact blockquote ul li { font-size: .8em; list-style-type: disc; padding-left: .5em; } /* Proefeters uitz */ #content #contact.proefeters form .field.checkbox label { width: 100%; font-weight: bold; } #content .page_content .page #contact.proefeters h2 { font-family: "Barlow"; max-width: 600px; margin: 0 auto; margin-bottom: 2em; font-weight: bold; } /* Nieuwsbrief (Laposta) op eiegn pagina */ #lapostaform { background: #fff; padding: 2em 2em; position: relative; border-radius: 3px; color: #000; } #lapostaform .newletter-description { max-width: 1000px; margin: 0 auto; padding-bottom: 25px; } #lapostaform #laposta-apiform { max-width: 1000px; margin: 0 auto; padding-bottom: 2em; } #lapostaform #laposta-apiform .field { display: block; position: relative; width: 100%; margin: 0 auto; } #lapostaform #laposta-apiform .field.checkboxes { margin: 1em auto; } #lapostaform #laposta-apiform .field.checkboxes .question { margin-bottom: .2em; } #lapostaform #laposta-apiform .field.checkboxes label { text-align: left; display: block; } #lapostaform #laposta-apiform input { font-size: inherit; font-family: inherit; padding: 10px; border: 0; margin: 10px 0px; box-sizing: border-box; background-color: #efefef; transform: translateY(-1px); } #lapostaform #laposta-apiform input[type=input] { width: 100%; display: block; } #lapostaform .newletter-description ul { margin-left: 0; } #lapostaform .newletter-description ul li{ list-style: none!important; padding-left: 0; margin: 0!important; margin-left: 0em!important; padding-left: 35px!important; background-image:url('../images/icons/check-red.png'); background-size: 20px 20px; background-repeat: no-repeat; background-position: 0px 6px; } /*#lapostaform .newletter-description ul li:before { content: '✓ '; margin-right: 1em; color: #e00914; font-weight: bold; }*/ #lapostaform #laposta-apiform input[type=checkbox] { vertical-align: middle; position: relative; bottom: 1px; background: #eee; -webkit-appearance: none; width: 16px; height: 16px; border-radius: 2px; margin-right: 1em; } #lapostaform #laposta-apiform input[type=checkbox]:checked { background: #2460aa; background-image: url('../images/icons/check.v1.png'); background-size: 14px 14px; background-position: 50% 50%; background-repeat: no-repeat; } #lapostaform #laposta-apiform input[type=submit] { background: #E00914; color: #fff; cursor: pointer; font-family: "Barlow Semi Condensed"; text-transform: uppercase; font-size: 1.2em; padding: 20px; } #lapostaform #laposta-apiform input[type=submit]:hover { background: #2268B1; } p.laposta-apiform-note { padding: 20px; padding-top: 15px; background: #ebd8d8; border-radius: 3px; margin: 0 auto; } #lapostaform #laposta-succes { max-width: 1000px; margin: 0 auto; display: none; text-align: center; font-family: "Barlow Semi Condensed"; text-transform: uppercase; font-size: 1.4em; } #lapostaform #laposta-error { max-width: 1000px; margin: 0 auto; display: none; text-align: center; font-family: "Barlow Semi Condensed"; text-transform: uppercase; font-size: 1.4em; } #lapostaform #laposta-apiform label.error:before { /* markup? */ } #lapostaform #laposta-apiform label.error { font-size: 0.9em; padding-left: 5px; padding-right: 20px; color: #2167B0; position: absolute; right: -20px; bottom: -10px; font-size: 0.6em; white-space: nowrap; z-index: 9; background: #333; color: #fff; padding: 10px; line-height: 1; } /* ABC * Reviews op home /velp/ */ #reviews { padding-top: 60px; background: #13172c; box-sizing: border-box; overflow: hidden; z-index: 2; position: relative; } #reviews #reviews-container { position: relative; width: 90%; max-width: 1340px; max-width: 1100px; margin: 0 auto; min-height: 120px; } #reviews #reviews-container #reviews-set { width: 62%; float: left; box-sizing: border-box; } #reviews #reviews-container .review { width: 48%; float: left; margin: 1%; margin-top: 0; box-sizing: border-box; background: #191E39; text-align: center; position: relative; min-height: 140px; } #reviews #reviews-container .review a { display: block; padding: 30px 20px; padding-bottom: 0; } #reviews #reviews-container .review a:hover { opacity: 0.9; color: #fff; } #reviews #reviews-container .review .score { position: relative; min-height: 60px; width: auto; display: inline-block; padding-top: 12px; } #reviews #reviews-container .review .score .total-score { font-size: 2em; line-height: 1; float: left; font-weight: bold; } #reviews #reviews-container .review .score .max-score { float: left; padding-left: 10px; opacity: 0.3; -webkit-transform: translateY(4px); transform: translateY(4x); } #reviews #reviews-container .review .n-o-r { font-size: 0.8em; -webkit-transform: translateY(-20px); transform: translateY(-20px); } #reviews #reviews-container .review .icon { position: absolute; left: 50%; top: -20px; margin-left: -20px; width: 40px; height: 40px; background: #BD1F24; border-radius: 30px; background-size: 25px 25px; background-repeat: no-repeat; background-position: 50% 50%; } #reviews #reviews-container .review.facebook .icon { background-image: url('../images/icons/review/icon_facebook.png'); } #reviews #reviews-container .review.google .icon { background-image: url('../images/icons/review/icon_google.png'); } #reviews #reviews-container .review.eetnu .icon { background-image: url('../images/icons/review/icon_eetnu.png'); } #reviews #reviews-container .review.tripadvisor .icon { background-image: url('../images/icons/review/icon_tripadvisor.png'); } #reviews #reviews-container .attention-set { width: 38%; float: left; box-sizing: border-box; padding-left: 1em; } #reviews #reviews-container .attention { box-sizing: border-box; background: #BD1F24; position: relative; min-height: 130px; padding: 8px; box-sizing: border-box; } #reviews #reviews-container .attention a { display: block; padding: 21px 20px; padding-right: 0; font-family: "Barlow Semi Condensed"; text-transform: uppercase; padding-left: 45px; background-size: 32px 32px; background-position: 10px 50%; background-repeat: no-repeat; background-color: #fff; font-weight: bold; color: #E10914; line-height: 1; font-size: .9em; box-sizing: border-box; width: 50%; float: left; margin-bottom: 10px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; } #reviews #reviews-container .attention a:nth-of-type(2), #reviews #reviews-container .attention a:nth-of-type(4) { width: calc(50% - 10px); margin-left: 10px; } #reviews #reviews-container .attention a:nth-of-type(3), #reviews #reviews-container .attention a:nth-of-type(4) { margin-bottom: 0; } #reviews #reviews-container .attention a.facebook { background-image: url('../images/social/icon_facebook.png'); } #reviews #reviews-container .attention a.instagram { background-image: url('../images/social/icon_instagram.png'); } #reviews #reviews-container .attention a.youtube { background-image: url('../images/social/icon_youtube.png'); } #reviews #reviews-container .attention a.happenings { background-image: url('../images/social/icon_happenings.png'); } #reviews #reviews-container .attention a:hover { background-color: #efefef; } .reviews-title { text-align: center; font-family: "din"; text-transform: uppercase; font-size: 1.5em; margin-bottom: 30px; } /* ABC * Overall footer */ #footer { min-height: 260px; padding-top: 70px; background: #13172c; box-sizing: border-box; overflow: hidden; z-index: 1; position: relative; } #footer #footer-container { position: relative; width: 90%; max-width: 1100px; margin: 0 auto; min-height: 120px; } #footer #footer-container #logo_footer { width: 150px; height: 113px; background-image: url("../images/logo_full.png"); background-size: 150px 113px; position: absolute; left: 0; top: -22px; transition: all 300ms ease-in-out; -webkit-transform: translateY(200px); transform: translateY(200px); } #footer.fx #footer-container #logo_footer { -webkit-transform: translateY(0px); transform: translateY(0px); } #footer.fx #footer-container #logo_footer a { display: block; width: 100%; height: 100%; } #footer #footer-container ul { clear: both; margin-left: 180px; font-weight: 800; } body.rtl #footer #footer-container ul { margin-left: 0px; margin-right: 180px; } #footer #footer-container ul.naw { clear: both; font-family: 'din'; font-weight: normal; text-transform: uppercase; font-size: 1em; text-transform: uppercase; margin-bottom: 10px; } #footer #footer-container ul li { float: left; margin-right: 1em; } body.rtl #footer #footer-container ul li { float: right; margin-right: 0; margin-left: 1em; } #footer #footer-container ul.bottom-menu li { font-size: 0.8em; } #footer #footer-container ul.naw li:first-child { color: #206BB3; } #footer #footer-container ul.naw li.phone a { color: #206BB3; display: block; padding-left: 35px; background-image: url('../images/icons/phone.png'); background-size: 30px 30px; background-repeat: no-repeat; background-position: 0px -1px; } #footer #footer-container ul.naw li.phone a:hover { color: #fff; } #footer #footer-container ul.naw li.newsletter { color: #206BB3; display: block; background-image: url('../images/icons/newsletter.png'); background-size: 30px 30px; background-repeat: no-repeat; background-position: 0px -1px; cursor: pointer; } body.rtl #footer #footer-container ul.naw li.newsletter { padding-left: 0; padding-right: 35px; background-position: right 0px top -1px; } #footer #footer-container ul.naw li.newsletter a { color: #206BB3; display: block; padding-left: 35px; } #footer #footer-container ul.naw li.newsletter a:hover { color: #fff; } #footer #footer-container .keurmerk { position: absolute; right: 60px; top: -25px; width: 80px; } #footer #footer-container .keurmerk img { display: block; width: 100%; } #footer #footer-container #social-media-buttons { position: absolute; right: 0; top: -3px; clear: both; box-sizing: border-box; transition: all 300ms; -webkit-transform: translateY(140px); transform: translateY(140px); } #footer.fx #footer-container #social-media-buttons { -webkit-transform: translateY(0px); transform: translateY(0px); } #footer #footer-container #social-media-buttons a { width: 30px; height: 30px; border-radius: 30px; display: block; margin-bottom: 10px; background-color: #fff; margin-left: 14px; background-size: 20px 20px; background-repeat: no-repeat; background-position: 50% 50%; } #footer #footer-container #social-media-buttons a:hover { -webkit-transform: scale(1.1); transform: scale(1.1); } #footer #footer-container #social-media-buttons a.tw { background-image: url('../images/social/icon_twitter.png'); } #footer #footer-container #social-media-buttons a.fb { background-image: url('../images/social/icon_facebook.png'); } #footer #footer-container #social-media-buttons a.yt { background-image: url('../images/social/icon_youtube.png'); } #footer #footer-container #social-media-buttons a.li { background-image: url('../images/social/icon_linkedin.png'); } #footer #footer-container #social-media-buttons a.gp { background-image: url('../images/social/icon_googleplus.png'); } #footer #footer-container #social-media-buttons a.ig { background-image: url('../images/social/icon_instagram.png'); } /* reserveren * error-page */ #error-page { text-align: center; margin: 0 auto; margin-bottom: 5%; max-width: 500px; font-size: 1.2em; position: relative; z-index: inherit; box-sizing: border-box; } #error-page img{ width: 80%; display: block; margin: 0 auto; margin-top: -50%; } #error-page h1{ display: inline-block; } #error-page p { margin-bottom: 1.4em; padding: 0 20px; } #error-page p:last-of-type { margin-bottom: 0; } #error-page p a { color: #67b0f1; } #error-page p a:hover { color: #96caf7; } @media screen and (max-width: 900px) { #error-page { padding: 2em 0; font-size: 1em; } #error-page img { margin-top: 50px; width: 50%; } } /* emergency cookie melding */ #emergency-cookie-notice { position: fixed; left: 0; bottom: 0; background: #1d2f72; color: #fff; padding: 40px; width: 100%; box-sizing: border-box; z-index: 999; box-shadow: 0px 0px 30px rgba(0,0,0,0.5); } #emergency-cookie-notice p { margin: 0; border: 0; background: transparent; margin-bottom: .5em; padding: 0; text-align: left; font-family: inherit; } /*#emergency-cookie-notice #emergency-cookie-notice-panel p:last-of-type { margin-bottom: 0; }*/ #emergency-cookie-notice p a { text-decoration: underline; } #emergency-cookie-notice p .emergency-cookie-notice-button { padding: 12px 15px; padding-bottom: 13px; background: #bd1f24; line-height: 1; font-weight: normal; color: #fff; cursor: pointer; display: inline-block; text-decoration: none; margin-right: 20px; margin-top: 15px; font-weight: 800; border-radius: 3px; } #emergency-cookie-notice p .emergency-cookie-notice-button.close { background: #191e39; font-weight: 400; } #emergency-cookie-notice p .emergency-cookie-notice-button:hover { color: #efefef; background: #bd1f24; } @media screen and (max-width: 900px) { #emergency-cookie-notice { padding: 20px; font-size: 0.9em; } } /* No-select */ #buttons,#menu, #header, #homevideo-overlay, #footer, body#abc-portal-page, #restaurants-filter { -moz-user-select: none; -khtml-user-select: none; -webkit-user-select: none; user-select: none; } body.has_top_melding #header{ margin-top: 30px; } .top_melding { text-align: center; background: #e10814; color: #fff; height: 40px; line-height: 40px; z-index: 9; position: fixed; box-sizing: border-box; top: 0; width: 100%; padding: 0 20px; font-size: .9em; } .top_melding a { text-decoration: underline; color: #fff; } @media screen and (max-width: 900px) { body.has_top_melding #header{ margin-top: 40px; } .top_melding { font-size: 0.9em; white-space: nowrap; overflow-x: scroll; -webkit-overflow-scrolling: touch; } } /*MELDING 5-6-2020*/ .center--notice { position: fixed; left: 50%; top: 50%; width: 100%; max-width: 600px; padding: 33px; background: #e10814; color: #fff; text-align: center; z-index: 91; font-size: .9em; box-sizing: border-box; box-shadow: 0px 0px 30px rgba(0,0,0,0.3); transform: translate(-50%,-50%); max-height: 80%; overflow-y: auto; } .center--notice a { text-decoration: underline; } .center--notice .close { position: absolute; right: 0px; top: 0px; width: 30px; height: 30px; cursor: pointer; font-size: 2em; color: #fff; background: #191d64; line-height: 28px; } .center--notice_bg { position: fixed; left: 0; top: 0; background: #191d64; opacity: 0.6; width: 100%; height: 100%; z-index: 90; cursor: pointer; } .playground-photo { margin: 50px 0; margin-bottom: 120px; pointer-events: none; display: flex; justify-content: space-between; box-sizing: border-box; } .playground-photo img { display: block; width: 100%; } .playground-photo .col { width: calc(50% - 10px); } .playground-photo .col .row { display: flex; justify-content: space-between; margin-bottom: 0px; } .playground-photo .col .row img { width: calc(50% - 10px); } .playground-photo .col .row:nth-of-type(2) img { width: calc(100%); margin-top: 20px; } @media screen and (max-width: 900px) { .playground-photo { flex-direction: column; margin-bottom: 20px; } .playground-photo .col { width: 100%; margin-bottom: 20px; } }