/** * Owl Carousel v2.3.4 * Copyright 2013-2018 David Deutsch * Licensed under: SEE LICENSE IN https://github.com/OwlCarousel2/OwlCarousel2/blob/master/LICENSE */ .owl-carousel,.owl-carousel .owl-item{-webkit-tap-highlight-color:transparent;position:relative}.owl-carousel{display:none;width:100%;z-index:1}.owl-carousel .owl-stage{position:relative;-ms-touch-action:pan-Y;touch-action:manipulation;-moz-backface-visibility:hidden}.owl-carousel .owl-stage:after{content:".";display:block;clear:both;visibility:hidden;line-height:0;height:0}.owl-carousel .owl-stage-outer{position:relative;overflow:hidden;-webkit-transform:translate3d(0,0,0)}.owl-carousel .owl-item,.owl-carousel .owl-wrapper{-webkit-backface-visibility:hidden;-moz-backface-visibility:hidden;-ms-backface-visibility:hidden;-webkit-transform:translate3d(0,0,0);-moz-transform:translate3d(0,0,0);-ms-transform:translate3d(0,0,0)}.owl-carousel .owl-item{min-height:1px;float:left;-webkit-backface-visibility:hidden;-webkit-touch-callout:none}.owl-carousel .owl-item img{display:block;width:100%}.owl-carousel .owl-dots.disabled,.owl-carousel .owl-nav.disabled{display:none}.no-js .owl-carousel,.owl-carousel.owl-loaded{display:block}.owl-carousel .owl-dot,.owl-carousel .owl-nav .owl-next,.owl-carousel .owl-nav .owl-prev{cursor:pointer;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.owl-carousel .owl-nav button.owl-next,.owl-carousel .owl-nav button.owl-prev,.owl-carousel button.owl-dot{background:0 0;color:inherit;border:none;padding:0!important;font:inherit}.owl-carousel.owl-loading{opacity:0;display:block}.owl-carousel.owl-hidden{opacity:0}.owl-carousel.owl-refresh .owl-item{visibility:hidden}.owl-carousel.owl-drag .owl-item{-ms-touch-action:pan-y;touch-action:pan-y;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.owl-carousel.owl-grab{cursor:move;cursor:grab}.owl-carousel.owl-rtl{direction:rtl}.owl-carousel.owl-rtl .owl-item{float:right}.owl-carousel .animated{animation-duration:1s;animation-fill-mode:both}.owl-carousel .owl-animated-in{z-index:0}.owl-carousel .owl-animated-out{z-index:1}.owl-carousel .fadeOut{animation-name:fadeOut}@keyframes fadeOut{0%{opacity:1}100%{opacity:0}}.owl-height{transition:height .5s ease-in-out}.owl-carousel .owl-item .owl-lazy{opacity:0;transition:opacity .4s ease}.owl-carousel .owl-item .owl-lazy:not([src]),.owl-carousel .owl-item .owl-lazy[src^=""]{max-height:0}.owl-carousel .owl-item img.owl-lazy{transform-style:preserve-3d}.owl-carousel .owl-video-wrapper{position:relative;height:100%;background:#000}.owl-carousel .owl-video-play-icon{position:absolute;height:80px;width:80px;left:50%;top:50%;margin-left:-40px;margin-top:-40px;background:url(../../files/theme/dist/css/owl/owl.video.play.png) no-repeat;cursor:pointer;z-index:1;-webkit-backface-visibility:hidden;transition:transform .1s ease}.owl-carousel .owl-video-play-icon:hover{-ms-transform:scale(1.3,1.3);transform:scale(1.3,1.3)}.owl-carousel .owl-video-playing .owl-video-play-icon,.owl-carousel .owl-video-playing .owl-video-tn{display:none}.owl-carousel .owl-video-tn{opacity:0;height:100%;background-position:center center;background-repeat:no-repeat;background-size:contain;transition:opacity .4s ease}.owl-carousel .owl-video-frame{position:relative;z-index:1;height:100%;width:100%} /** * Owl Carousel v2.3.4 * Copyright 2013-2018 David Deutsch * Licensed under: SEE LICENSE IN https://github.com/OwlCarousel2/OwlCarousel2/blob/master/LICENSE */ .owl-theme .owl-dots,.owl-theme .owl-nav{text-align:center;-webkit-tap-highlight-color:transparent}.owl-theme .owl-nav{margin-top:10px}.owl-theme .owl-nav [class*=owl-]{color:#FFF;font-size:14px;margin:5px;padding:4px 7px;background:#D6D6D6;display:inline-block;cursor:pointer;border-radius:3px}.owl-theme .owl-nav [class*=owl-]:hover{background:#869791;color:#FFF;text-decoration:none}.owl-theme .owl-nav .disabled{opacity:.5;cursor:default}.owl-theme .owl-nav.disabled+.owl-dots{margin-top:10px}.owl-theme .owl-dots .owl-dot{display:inline-block;zoom:1}.owl-theme .owl-dots .owl-dot span{width:10px;height:10px;margin:5px 7px;background:#D6D6D6;display:block;-webkit-backface-visibility:visible;transition:opacity .2s ease;border-radius:30px}.owl-theme .owl-dots .owl-dot.active span,.owl-theme .owl-dots .owl-dot:hover span{background:#869791} .glightbox-container{width:100%;height:100%;position:fixed;top:0;left:0;z-index:999999!important;overflow:hidden;-ms-touch-action:none;touch-action:none;-webkit-text-size-adjust:100%;-moz-text-size-adjust:100%;-ms-text-size-adjust:100%;text-size-adjust:100%;-webkit-backface-visibility:hidden;backface-visibility:hidden;outline:0}.glightbox-container.inactive{display:none}.glightbox-container .gcontainer{position:relative;width:100%;height:100%;z-index:9999;overflow:hidden}.glightbox-container .gslider{-webkit-transition:-webkit-transform .4s ease;transition:-webkit-transform .4s ease;transition:transform .4s ease;transition:transform .4s ease,-webkit-transform .4s ease;height:100%;left:0;top:0;width:100%;position:relative;overflow:hidden;display:-webkit-box!important;display:-ms-flexbox!important;display:flex!important;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}.glightbox-container .gslide{width:100%;position:absolute;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;opacity:0}.glightbox-container .gslide.current{opacity:1;z-index:99999;position:relative}.glightbox-container .gslide.prev{opacity:1;z-index:9999}.glightbox-container .gslide-inner-content{width:100%}.glightbox-container .ginner-container{position:relative;width:100%;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;max-width:100%;margin:auto;height:100vh}.glightbox-container .ginner-container.gvideo-container{width:100%}.glightbox-container .ginner-container.desc-bottom,.glightbox-container .ginner-container.desc-top{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.glightbox-container .ginner-container.desc-left,.glightbox-container .ginner-container.desc-right{max-width:100%!important}.gslide iframe,.gslide video{outline:0!important;border:none;min-height:165px;-webkit-overflow-scrolling:touch;-ms-touch-action:auto;touch-action:auto}.gslide:not(.current){pointer-events:none}.gslide-image{-webkit-box-align:center;-ms-flex-align:center;align-items:center}.gslide-image img{max-height:100vh;display:block;padding:0;float:none;outline:0;border:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;max-width:100vw;width:auto;height:auto;-o-object-fit:cover;object-fit:cover;-ms-touch-action:none;touch-action:none;margin:auto;min-width:200px}.desc-bottom .gslide-image img,.desc-top .gslide-image img{width:auto}.desc-left .gslide-image img,.desc-right .gslide-image img{width:auto;max-width:100%}.gslide-image img.zoomable{position:relative}.gslide-image img.dragging{cursor:-webkit-grabbing!important;cursor:grabbing!important;-webkit-transition:none;transition:none}.gslide-video{position:relative;max-width:100vh;width:100%!important}.gslide-video .plyr__poster-enabled.plyr--loading .plyr__poster{display:none}.gslide-video .gvideo-wrapper{width:100%;margin:auto}.gslide-video::before{content:'';position:absolute;width:100%;height:100%;background:rgba(255,0,0,.34);display:none}.gslide-video.playing::before{display:none}.gslide-video.fullscreen{max-width:100%!important;min-width:100%;height:75vh}.gslide-video.fullscreen video{max-width:100%!important;width:100%!important}.gslide-inline{background:#fff;text-align:left;max-height:calc(100vh - 40px);overflow:auto;max-width:100%;margin:auto}.gslide-inline .ginlined-content{padding:20px;width:100%}.gslide-inline .dragging{cursor:-webkit-grabbing!important;cursor:grabbing!important;-webkit-transition:none;transition:none}.ginlined-content{overflow:auto;display:block!important;opacity:1}.gslide-external{display:-webkit-box;display:-ms-flexbox;display:flex;width:100%;min-width:100%;background:#fff;padding:0;overflow:auto;max-height:75vh;height:100%}.gslide-media{display:-webkit-box;display:-ms-flexbox;display:flex;width:auto}.zoomed .gslide-media{-webkit-box-shadow:none!important;box-shadow:none!important}.desc-bottom .gslide-media,.desc-top .gslide-media{margin:0 auto;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.gslide-description{position:relative;-webkit-box-flex:1;-ms-flex:1 0 100%;flex:1 0 100%}.gslide-description.description-left,.gslide-description.description-right{max-width:100%}.gslide-description.description-bottom,.gslide-description.description-top{margin:0 auto;width:100%}.gslide-description p{margin-bottom:12px}.gslide-description p:last-child{margin-bottom:0}.zoomed .gslide-description{display:none}.glightbox-button-hidden{display:none}.glightbox-mobile .glightbox-container .gslide-description{height:auto!important;width:100%;position:absolute;bottom:0;padding:19px 11px;max-width:100vw!important;-webkit-box-ordinal-group:3!important;-ms-flex-order:2!important;order:2!important;max-height:78vh;overflow:auto!important;background:-webkit-gradient(linear,left top,left bottom,from(rgba(0,0,0,0)),to(rgba(0,0,0,.75)));background:linear-gradient(to bottom,rgba(0,0,0,0) 0,rgba(0,0,0,.75) 100%);-webkit-transition:opacity .3s linear;transition:opacity .3s linear;padding-bottom:50px}.glightbox-mobile .glightbox-container .gslide-title{color:#fff;font-size:1em}.glightbox-mobile .glightbox-container .gslide-desc{color:#a1a1a1}.glightbox-mobile .glightbox-container .gslide-desc a{color:#fff;font-weight:700}.glightbox-mobile .glightbox-container .gslide-desc *{color:inherit}.glightbox-mobile .glightbox-container .gslide-desc .desc-more{color:#fff;opacity:.4}.gdesc-open .gslide-media{-webkit-transition:opacity .5s ease;transition:opacity .5s ease;opacity:.4}.gdesc-open .gdesc-inner{padding-bottom:30px}.gdesc-closed .gslide-media{-webkit-transition:opacity .5s ease;transition:opacity .5s ease;opacity:1}.greset{-webkit-transition:all .3s ease;transition:all .3s ease}.gabsolute{position:absolute}.grelative{position:relative}.glightbox-desc{display:none!important}.glightbox-open{overflow:hidden}.gloader{height:25px;width:25px;-webkit-animation:lightboxLoader .8s infinite linear;animation:lightboxLoader .8s infinite linear;border:2px solid #fff;border-right-color:transparent;border-radius:50%;position:absolute;display:block;z-index:9999;left:0;right:0;margin:0 auto;top:47%}.goverlay{width:100%;height:calc(100vh + 1px);position:fixed;top:-1px;left:0;background:#000;will-change:opacity}.glightbox-mobile .goverlay{background:#000}.gclose,.gnext,.gprev{z-index:99999;cursor:pointer;width:26px;height:44px;border:none;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.gclose svg,.gnext svg,.gprev svg{display:block;width:25px;height:auto;margin:0;padding:0}.gclose.disabled,.gnext.disabled,.gprev.disabled{opacity:.1}.gclose .garrow,.gnext .garrow,.gprev .garrow{stroke:#fff}.gbtn.focused{outline:2px solid #0f3d81}iframe.wait-autoplay{opacity:0}.glightbox-closing .gclose,.glightbox-closing .gnext,.glightbox-closing .gprev{opacity:0!important}.glightbox-clean .gslide-description{background:#fff}.glightbox-clean .gdesc-inner{padding:22px 20px}.glightbox-clean .gslide-title{font-size:1em;font-weight:400;font-family:arial;color:#000;margin-bottom:19px;line-height:1.4em}.glightbox-clean .gslide-desc{font-size:.86em;margin-bottom:0;font-family:arial;line-height:1.4em}.glightbox-clean .gslide-video{background:#000}.glightbox-clean .gclose,.glightbox-clean .gnext,.glightbox-clean .gprev{background-color:rgba(0,0,0,.75);border-radius:4px}.glightbox-clean .gclose path,.glightbox-clean .gnext path,.glightbox-clean .gprev path{fill:#fff}.glightbox-clean .gprev{position:absolute;top:-100%;left:30px;width:40px;height:50px}.glightbox-clean .gnext{position:absolute;top:-100%;right:30px;width:40px;height:50px}.glightbox-clean .gclose{width:35px;height:35px;top:15px;right:10px;position:absolute}.glightbox-clean .gclose svg{width:18px;height:auto}.glightbox-clean .gclose:hover{opacity:1}.gfadeIn{-webkit-animation:gfadeIn .5s ease;animation:gfadeIn .5s ease}.gfadeOut{-webkit-animation:gfadeOut .5s ease;animation:gfadeOut .5s ease}.gslideOutLeft{-webkit-animation:gslideOutLeft .3s ease;animation:gslideOutLeft .3s ease}.gslideInLeft{-webkit-animation:gslideInLeft .3s ease;animation:gslideInLeft .3s ease}.gslideOutRight{-webkit-animation:gslideOutRight .3s ease;animation:gslideOutRight .3s ease}.gslideInRight{-webkit-animation:gslideInRight .3s ease;animation:gslideInRight .3s ease}.gzoomIn{-webkit-animation:gzoomIn .5s ease;animation:gzoomIn .5s ease}.gzoomOut{-webkit-animation:gzoomOut .5s ease;animation:gzoomOut .5s ease}@-webkit-keyframes lightboxLoader{0%{-webkit-transform:rotate(0);transform:rotate(0)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes lightboxLoader{0%{-webkit-transform:rotate(0);transform:rotate(0)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@-webkit-keyframes gfadeIn{from{opacity:0}to{opacity:1}}@keyframes gfadeIn{from{opacity:0}to{opacity:1}}@-webkit-keyframes gfadeOut{from{opacity:1}to{opacity:0}}@keyframes gfadeOut{from{opacity:1}to{opacity:0}}@-webkit-keyframes gslideInLeft{from{opacity:0;-webkit-transform:translate3d(-60%,0,0);transform:translate3d(-60%,0,0)}to{visibility:visible;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0);opacity:1}}@keyframes gslideInLeft{from{opacity:0;-webkit-transform:translate3d(-60%,0,0);transform:translate3d(-60%,0,0)}to{visibility:visible;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0);opacity:1}}@-webkit-keyframes gslideOutLeft{from{opacity:1;visibility:visible;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}to{-webkit-transform:translate3d(-60%,0,0);transform:translate3d(-60%,0,0);opacity:0;visibility:hidden}}@keyframes gslideOutLeft{from{opacity:1;visibility:visible;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}to{-webkit-transform:translate3d(-60%,0,0);transform:translate3d(-60%,0,0);opacity:0;visibility:hidden}}@-webkit-keyframes gslideInRight{from{opacity:0;visibility:visible;-webkit-transform:translate3d(60%,0,0);transform:translate3d(60%,0,0)}to{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0);opacity:1}}@keyframes gslideInRight{from{opacity:0;visibility:visible;-webkit-transform:translate3d(60%,0,0);transform:translate3d(60%,0,0)}to{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0);opacity:1}}@-webkit-keyframes gslideOutRight{from{opacity:1;visibility:visible;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}to{-webkit-transform:translate3d(60%,0,0);transform:translate3d(60%,0,0);opacity:0}}@keyframes gslideOutRight{from{opacity:1;visibility:visible;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}to{-webkit-transform:translate3d(60%,0,0);transform:translate3d(60%,0,0);opacity:0}}@-webkit-keyframes gzoomIn{from{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}to{opacity:1}}@keyframes gzoomIn{from{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}to{opacity:1}}@-webkit-keyframes gzoomOut{from{opacity:1}50%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}to{opacity:0}}@keyframes gzoomOut{from{opacity:1}50%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}to{opacity:0}}@media (min-width:769px){.glightbox-container .ginner-container{width:auto;height:auto;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row}.glightbox-container .ginner-container.desc-top .gslide-description{-webkit-box-ordinal-group:1;-ms-flex-order:0;order:0}.glightbox-container .ginner-container.desc-top .gslide-image,.glightbox-container .ginner-container.desc-top .gslide-image img{-webkit-box-ordinal-group:2;-ms-flex-order:1;order:1}.glightbox-container .ginner-container.desc-left .gslide-description{-webkit-box-ordinal-group:1;-ms-flex-order:0;order:0}.glightbox-container .ginner-container.desc-left .gslide-image{-webkit-box-ordinal-group:2;-ms-flex-order:1;order:1}.gslide-image img{max-height:97vh;max-width:100%}.gslide-image img.zoomable{cursor:-webkit-zoom-in;cursor:zoom-in}.zoomed .gslide-image img.zoomable{cursor:-webkit-grab;cursor:grab}.gslide-inline{max-height:95vh}.gslide-external{max-height:100vh}.gslide-description.description-left,.gslide-description.description-right{max-width:275px}.glightbox-open{height:auto}.goverlay{background:rgba(0,0,0,.92)}.glightbox-clean .gslide-media{-webkit-box-shadow:1px 2px 9px 0 rgba(0,0,0,.65);box-shadow:1px 2px 9px 0 rgba(0,0,0,.65)}.glightbox-clean .description-left .gdesc-inner,.glightbox-clean .description-right .gdesc-inner{position:absolute;height:100%;overflow-y:auto}.glightbox-clean .gclose,.glightbox-clean .gnext,.glightbox-clean .gprev{background-color:rgba(0,0,0,.32)}.glightbox-clean .gclose:hover,.glightbox-clean .gnext:hover,.glightbox-clean .gprev:hover{background-color:rgba(0,0,0,.7)}.glightbox-clean .gprev{top:45%}.glightbox-clean .gnext{top:45%}}@media (min-width:992px){.glightbox-clean .gclose{opacity:.7;right:20px}}@media screen and (max-height:420px){.goverlay{background:#000}} .mobile_menu{position:fixed;z-index:100;display:none}.mobile_menu .inner{height:100%;background:#000;overflow-y:scroll}.mobile_menu.active.position_left{box-shadow:2px 0 5px 0 rgba(0,0,0,.5)}.mobile_menu.active.position_top{box-shadow:0 2px 5px 0 rgba(0,0,0,.5)}.mobile_menu.active.position_right{box-shadow:-2px 0 5px 0 rgba(0,0,0,.5)}.mobile_menu.active.position_bottom{box-shadow:0 -2px 5px 0 rgba(0,0,0,.5)}.mobile_menu.active.no_shadow{box-shadow:none!important}.mobile_menu_trigger{display:none}.mobile_menu_wrapper{position:relative;width:100%;overflow:hidden}.mobile_menu_overlay{position:fixed;top:0;left:0;width:100%;height:100vh;z-index:99}.mobile_menu_overlay.background{background:rgba(0,0,0,.5)}.mobile_menu li.submenu_hide>ul{display:none}.mobile_menu li.submenu_show>ul{display:block}body.ie8 .mobile_menu,body.ie8 .mobile_menu_trigger,body.ie9 .mobile_menu,body.ie9 .mobile_menu_trigger{display:none!important} @charset "UTF-8"; /** * Erdmann & Freunde - Nutshell * Starterkit * erdmann-freunde.de/nutshell/ * * Lizenziert unter MIT OPEN SOURCE * */ /** Contents * * SETTINGS * ...variables * * * MIXINS * ...general * ...responsive * * * GENERIC * ...normalize * ...contao-reset * ...box-sizing * * * BASE * ...shared * ...page * ...type * ...grid * ...layout * * * COMPONENTS * ...media * ...tables * ...accordion * ...links * ...events * ...faq * ...forms * ...navs * ...news * ...newsletter * ...slider * ...downloads * */ /* Vars */ @font-face { font-family: "Aileron-Thin"; src: url("../../files/theme/dist/fonts/Aileron-Thin.eot"); /* IE9 Compat Modes */ src: url("../../files/theme/dist/fonts/Aileron-Thin.eot?#iefix") format("embedded-opentype"), url("../../files/theme/dist/fonts/Aileron-Thin.otf") format("opentype"), url("../../files/theme/dist/fonts/Aileron-Thin.svg") format("svg"), url("../../files/theme/dist/fonts/Aileron-Thin.ttf") format("truetype"), url("../../files/theme/dist/fonts/Aileron-Thin.woff") format("woff"), url("../../files/theme/dist/fonts/Aileron-Thin.woff2") format("woff2"); /* Modern Browsers */ font-weight: normal; font-style: normal; } @font-face { font-family: "Aileron-Bold"; src: url("../../files/theme/dist/fonts/Aileron-Bold.eot"); /* IE9 Compat Modes */ src: url("../../files/theme/dist/fonts/Aileron-Bold.eot?#iefix") format("embedded-opentype"), url("../../files/theme/dist/fonts/Aileron-Bold.otf") format("opentype"), url("../../files/theme/dist/fonts/Aileron-Bold.svg") format("svg"), url("../../files/theme/dist/fonts/Aileron-Bold.ttf") format("truetype"), url("../../files/theme/dist/fonts/Aileron-Bold.woff") format("woff"), url("../../files/theme/dist/fonts/Aileron-Bold.woff2") format("woff2"); /* Modern Browsers */ font-weight: normal; font-style: normal; } @font-face { font-family: "Aileron-Regular"; src: url("../../files/theme/dist/fonts/Aileron-Regular.eot"); /* IE9 Compat Modes */ src: url("../../files/theme/dist/fonts/Aileron-Regular.eot?#iefix") format("embedded-opentype"), url("../../files/theme/dist/fonts/Aileron-Regular.otf") format("opentype"), url("../../files/theme/dist/fonts/Aileron-Regular.svg") format("svg"), url("../../files/theme/dist/fonts/Aileron-Regular.ttf") format("truetype"), url("../../files/theme/dist/fonts/Aileron-Regular.woff") format("woff"), url("../../files/theme/dist/fonts/Aileron-Regular.woff2") format("woff2"); /* Modern Browsers */ font-weight: normal; font-style: normal; } /*@font-face { font-family: "Aileron-SemiBold"; src: url("../../files/theme/dist/fonts/Aileron-SemiBold.eot"); src: url("../../files/theme/dist/fonts/Aileron-SemiBold.eot?#iefix") format("embedded-opentype"), url("../../files/theme/dist/fonts/Aileron-SemiBold.otf") format("opentype"), url("../../files/theme/dist/fonts/Aileron-SemiBold.svg") format("svg"), url("../../files/theme/dist/fonts/Aileron-SemiBold.ttf") format("truetype"), url("../../files/theme/dist/fonts/Aileron-SemiBold.woff") format("woff"), url("../../files/theme/dist/fonts/Aileron-SemiBold.woff2") format("woff2"); font-weight: normal; font-style: normal; } */ #hb1, .ce_player.bgvideo, .wc-container { left: 0; top: 0; right: 0; bottom: 0; position: absolute; } /*! normalize.css v4.0.0 | MIT License | github.com/necolas/normalize.css */ /** * 1. Change the default font family in all browsers (opinionated). * 2. Prevent adjustments of font size after orientation changes in IE and iOS. */ html { font-family: sans-serif; /* 1 */ -ms-text-size-adjust: 100%; /* 2 */ -webkit-text-size-adjust: 100%; /* 2 */ } /** * Remove the margin in all browsers (opinionated). */ body { margin: 0; } /* HTML5 display definitions ========================================================================== */ /** * Add the correct display in IE 9-. * 1. Add the correct display in Edge, IE, and Firefox. * 2. Add the correct display in IE. */ article, aside, details, figcaption, figure, footer, header, main, menu, nav, section, summary { /* 1 */ display: block; } /** * Add the correct display in IE 9-. */ audio, canvas, progress, video { display: inline-block; } /** * Add the correct display in iOS 4-7. */ audio:not([controls]) { display: none; height: 0; } /** * Add the correct vertical alignment in Chrome, Firefox, and Opera. */ progress { vertical-align: baseline; } /** * Add the correct display in IE 10-. * 1. Add the correct display in IE. */ template, [hidden] { display: none; } /* Links ========================================================================== */ /** * Remove the gray background on active links in IE 10. */ a { background-color: transparent; } /** * Remove the outline on focused links when they are also active or hovered * in all browsers (opinionated). */ a:active, a:hover { outline-width: 0; } /* Text-level semantics ========================================================================== */ /** * 1. Remove the bottom border in Firefox 39-. * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. */ abbr[title] { border-bottom: none; /* 1 */ text-decoration: underline; /* 2 */ -webkit-text-decoration: underline dotted; text-decoration: underline dotted; /* 2 */ } /** * Prevent the duplicate application of `bolder` by the next rule in Safari 6. */ b, strong { font-weight: inherit; } /** * Add the correct font weight in Chrome, Edge, and Safari. */ b, strong { font-weight: bolder; } /** * Add the correct font style in Android 4.3-. */ dfn { font-style: italic; } /** * Correct the font size and margin on `h1` elements within `section` and * `article` contexts in Chrome, Firefox, and Safari. */ h1 { font-size: 2em; margin: 0.67em 0; } /** * Add the correct background and color in IE 9-. */ mark { background-color: #ff0; color: #000; } /** * Add the correct font size in all browsers. */ small { font-size: 80%; } /** * Prevent `sub` and `sup` elements from affecting the line height in * all browsers. */ sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } sub { bottom: -0.25em; } sup { top: -0.5em; } /* Embedded content ========================================================================== */ /** * Remove the border on images inside links in IE 10-. */ img { border-style: none; } /** * Hide the overflow in IE. */ svg:not(:root) { overflow: hidden; } /* Grouping content ========================================================================== */ /** * 1. Correct the inheritance and scaling of font size in all browsers. * 2. Correct the odd `em` font sizing in all browsers. */ code, kbd, pre, samp { font-family: monospace, monospace; /* 1 */ font-size: 1em; /* 2 */ } /** * Add the correct margin in IE 8. */ figure { margin: 1em 40px; } /** * 1. Add the correct box sizing in Firefox. * 2. Show the overflow in Edge and IE. */ hr { -webkit-box-sizing: content-box; box-sizing: content-box; /* 1 */ height: 0; /* 1 */ overflow: visible; /* 2 */ } /* Forms ========================================================================== */ /** * Change font properties to `inherit` in all browsers (opinionated). */ button, input, select, textarea { font: inherit; } /** * Restore the font weight unset by the previous rule. */ optgroup { font-weight: bold; } /** * Show the overflow in IE. * 1. Show the overflow in Edge. * 2. Show the overflow in Edge, Firefox, and IE. */ button, input, select { /* 2 */ overflow: visible; } /** * Remove the margin in Safari. * 1. Remove the margin in Firefox and Safari. */ button, input, select, textarea { /* 1 */ margin: 0; } /** * Remove the inheritence of text transform in Edge, Firefox, and IE. * 1. Remove the inheritence of text transform in Firefox. */ button, select { /* 1 */ text-transform: none; } /** * Change the cursor in all browsers (opinionated). */ button, [type="button"], [type="reset"], [type="submit"] { cursor: pointer; } /** * Restore the default cursor to disabled elements unset by the previous rule. */ [disabled] { cursor: default; } /** * 1. Prevent a WebKit bug where (2) destroys native `audio` and `video` * controls in Android 4. * 2. Correct the inability to style clickable types in iOS. */ button, html [type="button"], [type="reset"], [type="submit"] { -webkit-appearance: button; /* 2 */ } /** * Remove the inner border and padding in Firefox. */ button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; } /** * Restore the focus styles unset by the previous rule. */ button:-moz-focusring, input:-moz-focusring { outline: 1px dotted ButtonText; } /** * Change the border, margin, and padding in all browsers (opinionated). */ fieldset { border: 1px solid #c0c0c0; margin: 0 2px; padding: 0.35em 0.625em 0.75em; } /** * 1. Correct the text wrapping in Edge and IE. * 2. Correct the color inheritance from `fieldset` elements in IE. * 3. Remove the padding so developers are not caught out when they zero out * `fieldset` elements in all browsers. */ legend { -webkit-box-sizing: border-box; box-sizing: border-box; /* 1 */ color: inherit; /* 2 */ display: table; /* 1 */ max-width: 100%; /* 1 */ padding: 0; /* 3 */ white-space: normal; /* 1 */ } /** * Remove the default vertical scrollbar in IE. */ textarea { overflow: auto; } /** * 1. Add the correct box sizing in IE 10-. * 2. Remove the padding in IE 10-. */ [type="checkbox"], [type="radio"] { -webkit-box-sizing: border-box; box-sizing: border-box; /* 1 */ padding: 0; /* 2 */ } /** * Correct the cursor style of increment and decrement buttons in Chrome. */ [type="number"]::-webkit-inner-spin-button, [type="number"]::-webkit-outer-spin-button { height: auto; } /** * Correct the odd appearance of search inputs in Chrome and Safari. */ [type="search"] { -webkit-appearance: textfield; } /** * Remove the inner padding and cancel buttons in Chrome on OS X and * Safari on OS X. */ [type="search"]::-webkit-search-cancel-button, [type="search"]::-webkit-search-decoration { -webkit-appearance: none; } .float_left { float: left; } .float_right { float: right; } .block { overflow: hidden; } .clear { height: 0.1px; font-size: 0.1px; line-height: 0.1px; clear: both; } .invisible { width: 0; height: 0; left: -1000px; top: -1000px; position: absolute; overflow: hidden; display: inline; } /** * Set the global `box-sizing` state to `border-box`. * * css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice * paulirish.com/2012/box-sizing-border-box-ftw */ html { -webkit-box-sizing: border-box; box-sizing: border-box; } *, *:before, *:after { -webkit-box-sizing: inherit; box-sizing: inherit; } h1, h2, h3, h4, h5, h6 { margin-top: 0; margin-bottom: 0.5rem; } ul, ol, dl, blockquote, p, address, hr, fieldset, figure, pre { margin-bottom: 1rem; } ul, ol, dd { margin-left: 1rem; } .clearfix:after, .ce_gallery ul:after, .row:after, [id="header"] .inside:after, [id="footer"] > .inside:after, .ce_gallery:after, #grid:after, .nav--horizontal ul:after, .nav--breadcrumb ul:after, .pagination:after, .news-list .layout_short:after, .news-list .layout_latest:after, .news-list .layout_simple:after, .news-grid:after { content: ""; display: table; clear: both; } a { color: inherit; } :not(p) a { text-decoration: none; } figure { margin: 0; } img { display: block; max-width: 100%; height: auto; margin: 0 auto; } img { display: inline-block; vertical-align: middle; } .centered { text-align: center; } .headline_centered h1, .headline_centered h2, .headline_centered h3, .headline_centered h4 { text-align: center; } .bordered { border: thin solid #ccc; } .ce_text.nomargin-bottom { margin-bottom: 0; padding-bottom: 0; } .ce_text.nomargin-bottom .btn { margin-bottom: 0; } html { font-family: "Aileron-Thin", "Helvetica", "Helvetica Neue", arial, sans-serif, sans-serif; font-size: 1em; line-height: 1.45; background-color: #fff; color: #181715; overflow-y: scroll; min-height: 100%; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; } @media screen and (max-width: 34.3125em) { html { font-size: 1em; } } @media screen and (min-width: 68.75em) { html { font-size: 1em; } } html, body { scroll-behavior: smooth; } h1, h2, h3, h4, h5, h6 { font-weight: normal; font-family: "Aileron-Thin", Helvetica, "Helvetica Neue", arial, sans-serif; } h1 { font-size: 2.275rem; font-family: "Aileron-Thin", Helvetica, "Helvetica Neue", arial, sans-serif; font-weight: normal; line-height: 1.125; margin-bottom: 0.5rem; } @media screen and (min-width: 34.375em) { h1 { font-size: 2.275rem; } } @media screen and (min-width: 48em) { h1 { font-size: 2.667rem; } } @media screen and (min-width: 58.75em) { h1 { font-size: 2.667rem; } } @media screen and (min-width: 68.75em) { h1 { font-size: 2.667rem; } } p + h1, ul + h1, ol + h1 { margin-top: 2rem; } .ce_text + .ce_text h1:first-child { margin-top: 1rem; } h1 + h2 { margin-top: -0.5rem; } h2 { font-size: 1.8rem; font-family: "Aileron-Thin", Helvetica, "Helvetica Neue", arial, sans-serif; font-weight: normal; line-height: 1.25; margin-bottom: 0.5rem; } @media screen and (min-width: 34.375em) { h2 { font-size: 1.8rem; } } @media screen and (min-width: 48em) { h2 { font-size: 2.3rem; } } @media screen and (min-width: 58.75em) { h2 { font-size: 2.3rem; } } @media screen and (min-width: 68.75em) { h2 { font-size: 2.3rem; } } p + h2, ul + h2, ol + h2 { margin-top: 2rem; } .ce_text + .ce_text h2:first-child { margin-top: 1rem; } h2 + h3 { margin-top: -0.5rem; } h3 { font-size: 1.375rem; font-family: "Aileron-Thin", Helvetica, "Helvetica Neue", arial, sans-serif; font-weight: normal; line-height: 1.25; margin-bottom: 0.5rem; } @media screen and (min-width: 34.375em) { h3 { font-size: 1.375rem; } } @media screen and (min-width: 48em) { h3 { font-size: 1.5rem; } } @media screen and (min-width: 58.75em) { h3 { font-size: 1.5rem; } } @media screen and (min-width: 68.75em) { h3 { font-size: 1.5rem; } } p + h3, ul + h3, ol + h3 { margin-top: 2rem; } .ce_text + .ce_text h3:first-child { margin-top: 1rem; } h3 + h4 { margin-top: -0.5rem; } h4 { font-size: 1.125rem; font-family: "Aileron-Thin", Helvetica, "Helvetica Neue", arial, sans-serif; font-weight: normal; line-height: 1; margin-bottom: 0.5rem; } @media screen and (min-width: 34.375em) { h4 { font-size: 1.125rem; } } @media screen and (min-width: 48em) { h4 { font-size: 1.25rem; } } @media screen and (min-width: 58.75em) { h4 { font-size: 1.25rem; } } @media screen and (min-width: 68.75em) { h4 { font-size: 1.25rem; } } p + h4, ul + h4, ol + h4 { margin-top: 1.5rem; } .ce_text + .ce_text h4:first-child { margin-top: 0.5rem; } h4 + h5 { margin-top: -0.5rem; } h5 { font-size: 1rem; font-family: "Aileron-Thin", Helvetica, "Helvetica Neue", arial, sans-serif; font-weight: normal; line-height: 1; margin-bottom: 0.5rem; } @media screen and (min-width: 34.375em) { h5 { font-size: 1rem; } } @media screen and (min-width: 48em) { h5 { font-size: 1rem; } } @media screen and (min-width: 58.75em) { h5 { font-size: 1rem; } } @media screen and (min-width: 68.75em) { h5 { font-size: 1rem; } } p + h5, ul + h5, ol + h5 { margin-top: 1.5rem; } .ce_text + .ce_text h5:first-child { margin-top: 0.5rem; } h5 + h6 { margin-top: -0.5rem; } h6 { font-size: 0.875rem; font-family: "Aileron-Thin", Helvetica, "Helvetica Neue", arial, sans-serif; font-weight: normal; line-height: 1; margin-bottom: 0.5rem; } @media screen and (min-width: 34.375em) { h6 { font-size: 0.875rem; } } @media screen and (min-width: 48em) { h6 { font-size: 0.875rem; } } @media screen and (min-width: 58.75em) { h6 { font-size: 0.875rem; } } @media screen and (min-width: 68.75em) { h6 { font-size: 0.875rem; } } p + h6, ul + h6, ol + h6 { margin-top: 1.5rem; } .ce_text + .ce_text h6:first-child { margin-top: 0.5rem; } p, ul, ol { margin-top: 0; } p a, ul a, ol a { color: inherit; text-decoration: underline; } p a:hover, ul a:hover, ol a:hover { text-decoration: none; } p:last-child, ul:last-child, ol:last-child { margin-bottom: 0; } code { color: #ff5636; } pre { padding: 1rem; background: #e3e3e3; color: #fff; overflow-x: scroll; } hr { margin-top: 1rem; margin-bottom: 1rem; border: 0; border-top: 1px solid #ccc; } .li--block { margin-bottom: 1rem; } .ce_text { margin-bottom: 1rem; } ::-moz-selection { background: #181715; color: #fff; opacity: 1; } ::selection { background: #181715; color: #fff; opacity: 1; } b, strong { font-family: "Aileron-Bold"; font-weight: normal; } h1, h2 { text-transform: uppercase; color: #181715; /* &::after{ content:" "; background-color: $color-default; width:100px; height: 3px; display:block; margin-top:calc(25px - 0.5rem); margin-bottom:15px; } */ } h1 strong, h2 strong { font-family: inherit; font-weight: normal; color: #cebda3; } h2 strong { font-weight: inherit; font-family: inherit; color: #cebda3; } @media screen and (min-width: 48em) { h2:before { content: url("/files/content/img/Arrow.svg"); width: 1em; max-width: 34px; -webkit-transform: translateY(10px); transform: translateY(10px); display: inline-block; padding-right: 0.4em; color: #cebda3; margin-left: -1em; } } h2.no--arrow:before { display: none; } .no--arrow h2:before { display: none; } .claim { text-align: center; padding-left: 1rem; padding-right: 1rem; } .claim h2 { width: 100%; max-width: 600px; text-align: left; display: inline-block; margin-bottom: 0; line-height: 1.01; font-size: 3rem; } .claim h2 em { font-size: 0.33em; white-space: nowrap; } .claim h2 strong { font-weight: inherit; color: #cebda3; } @media screen and (min-width: 48em) { .claim h2 { font-size: 3.2rem; } } @media screen and (min-width: 58.75em) { .claim h2 { font-size: 5rem; } } @media screen and (min-width: 68.75em) { .claim h2 { font-size: 6rem; } } .claim h2 strong { font-weight: inherit; } .claim h2:before { display: none; } .claim.paddingtop { padding-top: 3.75rem; } .claim.not-fit h2 { display: block; max-width: none; } .claim.smaller { padding-left: 0; } .claim.smaller h2 { max-width: 100%; font-size: 2rem; } @media screen and (min-width: 58.75em) { .claim.smaller h2 { font-size: 2.5rem; } } @media screen and (min-width: 68.75em) { .claim.smaller h2 { font-size: 3.5rem; } } h3 { color: #181715; } h3.color-gold { color: #cebda3; text-transform: uppercase; } .h3--color-gold h3 { color: #cebda3; text-transform: uppercase; } @media screen and (min-width: 58.75em) { .h3--color-gold h3 { margin-bottom: 3rem; } } h4 { text-transform: uppercase; } .zitat h4 { font-size: 1.25rem; text-align: center; } @media screen and (min-width: 48em) { .zitat h4 { font-size: 3rem; } } .zitat h4:before, .zitat h4:after { display: inline-block; color: #cebda3; -webkit-transform: scale(1.78) translateY(-0.1em); transform: scale(1.78) translateY(-0.1em); } .zitat h4:before { content: "»"; padding-right: 0.25em; } .zitat h4:after { content: "«"; padding-left: 0.25em; } .zitat h5 { font-size: 2rem; text-transform: uppercase; line-height: 1.2; } @media screen and (min-width: 48em) { .zitat h5 { font-size: 1.5rem; } } @media screen and (min-width: 58.75em) { .zitat h5 { font-size: 2.5rem; } } @media screen and (min-width: 68.75em) { .zitat h5 { font-size: 3rem; } } @media screen and (min-width: 120rem) { .zitat h5 { font-size: 4.5rem; } } .zitat p.author--h5 { font-size: 0.825rem; padding-left: 0.5em; } .zitat .quot--open-before:before { content: "„"; display: inline-block; margin-left: -0.37em; } .ce_text p > a.btn { margin-top: 2rem; } .ce_text p, .ce_text ul { letter-spacing: 0.05rem; } .marginbottom-5rem { margin-bottom: 5rem; } .marginbottom-2-5rem { margin-bottom: 2.5rem; } .text-maxlength { max-width: 720px; } .text-maxlength.centered { margin-left: auto; margin-right: auto; } @media screen and (min-width: 120rem) { .font-bigger { font-size: 1.4rem; } .font-bigger h4 { font-size: 1.75rem; } .font-bigger h1 { font-size: 3.4rem; } } .ce_text ul { margin-left: 1rem; padding-left: 0; } .row { margin-left: -3.75rem; margin-right: -3.75rem; } .col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12, .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12, .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12, .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12, .col-xl-1, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-10, .col-xl-11, .col-xl-12 { float: left; padding-left: 3.75rem; padding-right: 3.75rem; width: 100%; } @media screen and (min-width: 0) { .col-xs-1 { width: 8.33333%; } .col-xs-2 { width: 16.66667%; } .col-xs-3 { width: 25%; } .col-xs-4 { width: 33.33333%; } .col-xs-5 { width: 41.66667%; } .col-xs-6 { width: 50%; } .col-xs-7 { width: 58.33333%; } .col-xs-8 { width: 66.66667%; } .col-xs-9 { width: 75%; } .col-xs-10 { width: 83.33333%; } .col-xs-11 { width: 91.66667%; } .col-xs-12 { width: 100%; } } @media screen and (min-width: 0) { .offset-xs-0 { margin-left: 0%; } .offset-xs-1 { margin-left: 8.33333%; } .offset-xs-2 { margin-left: 16.66667%; } .offset-xs-3 { margin-left: 25%; } .offset-xs-4 { margin-left: 33.33333%; } .offset-xs-5 { margin-left: 41.66667%; } .offset-xs-6 { margin-left: 50%; } .offset-xs-7 { margin-left: 58.33333%; } .offset-xs-8 { margin-left: 66.66667%; } .offset-xs-9 { margin-left: 75%; } .offset-xs-10 { margin-left: 83.33333%; } .offset-xs-11 { margin-left: 91.66667%; } } @media screen and (min-width: 0) { .pull-right-xs { float: right; } .pull-left-xs { float: left; } } @media screen and (min-width: 0) { .clear-xs { clear: both; } } @media screen and (min-width: 34.375em) { .clear-xs { clear: none; } } @media screen and (min-width: 34.375em) { .col-sm-1 { width: 8.33333%; } .col-sm-2 { width: 16.66667%; } .col-sm-3 { width: 25%; } .col-sm-4 { width: 33.33333%; } .col-sm-5 { width: 41.66667%; } .col-sm-6 { width: 50%; } .col-sm-7 { width: 58.33333%; } .col-sm-8 { width: 66.66667%; } .col-sm-9 { width: 75%; } .col-sm-10 { width: 83.33333%; } .col-sm-11 { width: 91.66667%; } .col-sm-12 { width: 100%; } } @media screen and (min-width: 34.375em) { .offset-sm-0 { margin-left: 0%; } .offset-sm-1 { margin-left: 8.33333%; } .offset-sm-2 { margin-left: 16.66667%; } .offset-sm-3 { margin-left: 25%; } .offset-sm-4 { margin-left: 33.33333%; } .offset-sm-5 { margin-left: 41.66667%; } .offset-sm-6 { margin-left: 50%; } .offset-sm-7 { margin-left: 58.33333%; } .offset-sm-8 { margin-left: 66.66667%; } .offset-sm-9 { margin-left: 75%; } .offset-sm-10 { margin-left: 83.33333%; } .offset-sm-11 { margin-left: 91.66667%; } } @media screen and (min-width: 34.375em) { .pull-right-sm { float: right; } .pull-left-sm { float: left; } } @media screen and (min-width: 34.375em) { .clear-sm { clear: both; } } @media screen and (min-width: 48em) { .clear-sm { clear: none; } } @media screen and (min-width: 48em) { .col-md-1 { width: 8.33333%; } .col-md-2 { width: 16.66667%; } .col-md-3 { width: 25%; } .col-md-4 { width: 33.33333%; } .col-md-5 { width: 41.66667%; } .col-md-6 { width: 50%; } .col-md-7 { width: 58.33333%; } .col-md-8 { width: 66.66667%; } .col-md-9 { width: 75%; } .col-md-10 { width: 83.33333%; } .col-md-11 { width: 91.66667%; } .col-md-12 { width: 100%; } } @media screen and (min-width: 48em) { .offset-md-0 { margin-left: 0%; } .offset-md-1 { margin-left: 8.33333%; } .offset-md-2 { margin-left: 16.66667%; } .offset-md-3 { margin-left: 25%; } .offset-md-4 { margin-left: 33.33333%; } .offset-md-5 { margin-left: 41.66667%; } .offset-md-6 { margin-left: 50%; } .offset-md-7 { margin-left: 58.33333%; } .offset-md-8 { margin-left: 66.66667%; } .offset-md-9 { margin-left: 75%; } .offset-md-10 { margin-left: 83.33333%; } .offset-md-11 { margin-left: 91.66667%; } } @media screen and (min-width: 48em) { .pull-right-md { float: right; } .pull-left-md { float: left; } } @media screen and (min-width: 48em) { .clear-md { clear: both; } } @media screen and (min-width: 58.75em) { .clear-md { clear: none; } } @media screen and (min-width: 58.75em) { .col-lg-1 { width: 8.33333%; } .col-lg-2 { width: 16.66667%; } .col-lg-3 { width: 25%; } .col-lg-4 { width: 33.33333%; } .col-lg-5 { width: 41.66667%; } .col-lg-6 { width: 50%; } .col-lg-7 { width: 58.33333%; } .col-lg-8 { width: 66.66667%; } .col-lg-9 { width: 75%; } .col-lg-10 { width: 83.33333%; } .col-lg-11 { width: 91.66667%; } .col-lg-12 { width: 100%; } } @media screen and (min-width: 58.75em) { .offset-lg-0 { margin-left: 0%; } .offset-lg-1 { margin-left: 8.33333%; } .offset-lg-2 { margin-left: 16.66667%; } .offset-lg-3 { margin-left: 25%; } .offset-lg-4 { margin-left: 33.33333%; } .offset-lg-5 { margin-left: 41.66667%; } .offset-lg-6 { margin-left: 50%; } .offset-lg-7 { margin-left: 58.33333%; } .offset-lg-8 { margin-left: 66.66667%; } .offset-lg-9 { margin-left: 75%; } .offset-lg-10 { margin-left: 83.33333%; } .offset-lg-11 { margin-left: 91.66667%; } } @media screen and (min-width: 58.75em) { .pull-right-lg { float: right; } .pull-left-lg { float: left; } } @media screen and (min-width: 58.75em) { .clear-lg { clear: both; } } @media screen and (min-width: 68.75em) { .clear-lg { clear: none; } } @media screen and (min-width: 68.75em) { .col-xl-1 { width: 8.33333%; } .col-xl-2 { width: 16.66667%; } .col-xl-3 { width: 25%; } .col-xl-4 { width: 33.33333%; } .col-xl-5 { width: 41.66667%; } .col-xl-6 { width: 50%; } .col-xl-7 { width: 58.33333%; } .col-xl-8 { width: 66.66667%; } .col-xl-9 { width: 75%; } .col-xl-10 { width: 83.33333%; } .col-xl-11 { width: 91.66667%; } .col-xl-12 { width: 100%; } } @media screen and (min-width: 68.75em) { .offset-xl-0 { margin-left: 0%; } .offset-xl-1 { margin-left: 8.33333%; } .offset-xl-2 { margin-left: 16.66667%; } .offset-xl-3 { margin-left: 25%; } .offset-xl-4 { margin-left: 33.33333%; } .offset-xl-5 { margin-left: 41.66667%; } .offset-xl-6 { margin-left: 50%; } .offset-xl-7 { margin-left: 58.33333%; } .offset-xl-8 { margin-left: 66.66667%; } .offset-xl-9 { margin-left: 75%; } .offset-xl-10 { margin-left: 83.33333%; } .offset-xl-11 { margin-left: 91.66667%; } } @media screen and (min-width: 68.75em) { .pull-right-xl { float: right; } .pull-left-xl { float: left; } } @media screen and (min-width: 68.75em) { .clear-xl { clear: both; } } /* // horizontal main padding padding-left:1.5rem;padding-right:1.5rem; @include media-query(screen-md){ padding-left:3.75rem;padding-right:3.75rem; } @include media-query(screen-xl){ padding-left:4.75rem; padding-right:4.75rem } */ .row { margin-left: -1.5rem; margin-right: -1.5rem; } .row .ce_columns { margin-left: -2rem; margin-right: -2rem; } @media screen and (min-width: 48em) { .row { margin-left: -3.75rem; margin-right: -3.75rem; } .row .ce_columns { margin-left: 0; margin-right: 0; } } .row.border-top1 { border-top: 1px solid #333; } @media screen and (min-width: 48em) { .row .ce_columns.border-left1 { border-left: 1px solid #333; } } .row.no-gutter { margin-left: 0; margin-right: 0; } .row.no-gutter .ce_columns, .row.no-gutter .col-md-4, .row.no-gutter .col-md-3, .row.no-gutter .col-md-8, .row.no-gutter .col-lg-4, .row.no-gutter .col-lg-3, .row.no-gutter .col-lg-8, .row.no-gutter .col-md-6, .row.no-gutter .col-lg-6 { padding-left: 0; padding-right: 0; } .row .padding-box { padding: 1.75rem; } @media screen and (min-width: 58.75em) { .row .padding-box { padding: 3rem; } } .row .padding-box--historie { padding: 3rem 1.5rem; } @media screen and (min-width: 68.75em) { .row .padding-box--historie { padding: 5rem 3rem; } } .row.gutter-1 { margin-left: -0.5rem; margin-right: -0.5rem; } .row.gutter-1 .ce_columns { padding-left: 0.5rem; padding-right: 0.5rem; } .flex-container { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; } .flex-container .ce_columns { margin-left: 0; margin-right: 0; } .flex-container div[class^="col-md-"], .flex-container div[class*=" col-md-"] { float: none; } .flex-container div[class^="col-md-"].centered--vh, .flex-container div[class*=" col-md-"].centered--vh { padding: 1.5rem; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .flex-container div[class^="col-md-"].centered--vh.nopadding--horizontal, .flex-container div[class*=" col-md-"].centered--vh.nopadding--horizontal { padding: 0; } .flex-container div[class^="col-md-"].wrapp, .flex-container div[class*=" col-md-"].wrapp { -ms-flex-wrap: wrap; flex-wrap: wrap; } .flex-container .flex-dir-columns { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .flex-container .flex1 { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; width: 100%; } .block.ov-hidden .inner { overflow: hidden; } html, body { min-width: 360px; } .block { overflow: visible; } [id="header"] { background-color: #fff; color: #181715; /*background-image:url("../../files/theme/dist/css/files/content/img/home/header1.jpg"); background-repeat:no-repeat; background-size:cover; background-position: 0 0; @include media-query(screen-lg){ background-image:url("../../files/theme/dist/css/files/content/img/home/header1.jpg") } */ } .mod_article .inner { max-width: 78rem; width: 100%; margin-left: auto; margin-right: auto; padding-left: 1.5rem; padding-right: 1.5rem; padding-top: 3rem; padding-bottom: 3rem; position: relative; } @media screen and (min-width: 48em) { .mod_article .inner { padding-left: 3.75rem; padding-right: 3.75rem; } } @media screen and (min-width: 68.75em) { .mod_article .inner { padding-left: 4.75rem; padding-right: 4.75rem; } } @media screen and (min-width: 48em) { .mod_article .inner { padding-top: 3rem; padding-bottom: 3rem; } } .change-padding2margin-vertical .inner { padding-top: 0; padding-bottom: 0; margin-top: 3rem; margin-bottom: 3rem; } .article--large .inner { max-width: 120rem; width: 100%; margin-left: auto; margin-right: auto; } .article--full .inner { max-width: none; width: 100%; margin-left: auto; margin-right: auto; padding-top: 0; padding-bottom: 0; padding-left: 0; padding-right: 0; } .article--full.padding-bottom { padding-bottom: 2rem; } @media screen and (min-width: 48em) { .article--full.padding-bottom { padding-bottom: 3rem; } } .article--full.padding-top { padding-top: 2rem; } @media screen and (min-width: 48em) { .article--full.padding-top { padding-top: 3rem; } } [id="header"] .inside, [id="footer"] .inside { position: relative; } [id="header"] .inside .mod_article, [id="footer"] .inside .mod_article { padding-top: 0; } [id="footer"] > .inside { max-width: 78rem; width: 100%; margin-left: auto; margin-right: auto; padding-left: 2rem; padding-right: 2rem; padding-top: 2rem; padding-bottom: 2rem; } @media screen and (min-width: 48em) { [id="footer"] > .inside { padding-top: 3rem; padding-bottom: 3rem; } } .margin--left-right-auto { margin-left: auto; margin-right: auto; } [id="header"] { margin-left: 0; margin-right: 0; } @media screen and (min-width: 48em) { [id="header"] { margin-left: 0; margin-right: 0; } } .page_projekt [id="header"] .inside { max-width: 120rem; width: 100%; margin-left: auto; margin-right: auto; } .headerbilder { padding-bottom: 2rem; } .headerbilder .inner { padding-left: 0; padding-right: 0; padding-top: 0; } .logo { display: none; } .page_home .logo { display: block; position: absolute; z-index: 9; top: 4.667rem; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); max-width: 33%; } @media screen and (min-width: 68.75em) { .page_home .logo { margin-top: 140px; } } .page_home .logo img { background: transparent; padding: 0; } /* headerbilder */ .hb { background-size: cover; background-repeat: no-repeat; background-position: bottom center; height: 480px; } @media screen and (min-width: 58.75em) { .hb { height: 540px; } } @media screen and (min-width: 68.75em) { .hb { height: 600px; } } .hb.philosophie { background-image: url("/files/content/img/philosophie/header0.jpg"); } .hb.bg-common { height: 400px; background-image: url("/files/content/img/header-common-mobile.jpg"); } @media screen and (min-width: 48em) { .hb.bg-common { height: 600px; background-position: 50% 50%; background-image: url("/files/content/img/header-common.jpg"); } } @media screen and (min-width: 120rem) { .hb.bg-common { height: 705px; } } .hb.line { background-image: url("/files/content/img/netzwerk/line/header_line.jpg"); background-position: bottom right; } @media screen and (min-width: 120rem) { .hb.line { height: 650px; } } .hb.circles { background-image: url("/files/content/img/netzwerk/circles/header_circles.jpg"); background-position: bottom right; position: relative; overflow: hidden; } @media screen and (min-width: 120rem) { .hb.circles { height: 650px; } } .hb.circles .ce_player { position: absolute; left: 0; bottom: 0; right: 0; top: 0; } .hb.circles .ce_player video { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } .hb.pcm { background-image: url("/files/content/img/netzwerk/pcm/css_visual-pcm.jpg"); background-position: 50% 50%; } @media screen and (min-width: 120rem) { .hb.pcm { height: 650px; } } .hb.pcs { background-image: url("/files/content/img/netzwerk/pcs/css_visual-pcs.jpg"); background-position: 50% 50%; } @media screen and (min-width: 120rem) { .hb.pcs { height: 650px; } } .hb.activating-media { background-image: url("/files/content/img/netzwerk/activating-media/css_visual_activating-media.jpg"); background-position: 50% 50%; } @media screen and (min-width: 120rem) { .hb.activating-media { height: 650px; } } .hb.ro { background-image: url("/files/content/img/netzwerk/redorange/css_RO-visual-940x400.jpg"); background-position: 50% 50%; } @media screen and (min-width: 68.75em) { .hb.ro { background-image: url("/files/content/img/netzwerk/redorange/css_RO-visual-1920x650.jpg"); } } @media screen and (min-width: 120rem) { .hb.ro { height: 650px; } } .hb.agentur05 { background-image: url("/files/content/img/netzwerk/agentur05/css_visual-agentur05.jpg"); background-position: 50% 50%; } @media screen and (min-width: 120rem) { .hb.agentur05 { height: 650px; } } .hb.journalisten { background-image: url("/files/content/img/netzwerk/die_journalisten/css_visual-journalisten.jpg"); background-position: 50% 50%; } @media screen and (min-width: 120rem) { .hb.journalisten { height: 650px; } } .hb.headtrip { background-image: url("/files/content/img/netzwerk/headtrip/css_visual_headtrip.jpg"); background-position: 50% 50%; } @media screen and (min-width: 120rem) { .hb.headtrip { height: 650px; } } @media screen and (min-width: 58.75em) { .hb.headtrip .jqcloud { font-size: 25px; } } @media screen and (min-width: 120rem) { .hb.headtrip .jqcloud { font-size: 36px; } } .hb.bg-performance { background-image: url("/files/content/img/netzwerk/bg-performance/css_visual-bg-performance.jpg"); background-position: 50% 50%; } @media screen and (min-width: 120rem) { .hb.bg-performance { height: 650px; } } .hb.bestzeit { background-image: url("/files/content/img/netzwerk/bestzeit/css_visual_bestzeit.jpg"); } @media screen and (min-width: 120rem) { .hb.bestzeit { height: 650px; } } .hb.thatsretail { background-image: url("/files/content/img/netzwerk/thatsretail/Disziplinen_Contennt_Thats_Retail_1920x650px.jpg"); background-position: 50% 50%; } @media screen and (min-width: 120rem) { .hb.thatsretail { height: 650px; } } #hb0 { height: 480px; } @media screen and (min-width: 58.75em) { #hb0 { height: 570px; } } @media screen and (min-width: 68.75em) { #hb0 { height: 870px; margin-top: -200px; } } .border-top1 { border-top: 1px solid #333; } #hb1 { /*background-image:url("/files/content/img/home/header1.jpg"); background-size: cover; background-repeat:no-repeat; background-position: 50% 100%; */ } .bg-black { background: #000; color: #fff; margin-bottom: 0; margin-top: 0; } .bg-black h1, .bg-black h2, .bg-black h3 { color: #fff; } .bg-black .inner { padding-top: 0; margin-bottom: 0; } .bg-gold { background: #cebda3; } .nopadding-top .inner { padding-top: 0; } .nopadding-bottom .inner { padding-bottom: 0; } .nopadding-left .inner { padding-left: 0; } .nopadding-right .inner { padding-right: 0; } .nomargin-top { margin-top: 0; } .nomargin-bottom { margin-bottom: 0; } .section-parallax { margin-top: 3em; margin-bottom: 3rem; } .section-parallax .inner { height: 400px; overflow: hidden; padding-bottom: 0; padding-top: 0; background-position: 50% 50%; background-repeat: no-repeat; background-size: cover; } @media screen and (min-width: 58.75em) { .section-parallax .inner { height: 450px; } } @media screen and (min-width: 68.75em) { .section-parallax .inner { height: 780px; } } .section-parallax.deko1 .inner, .section-parallax.deko2 .inner { background-size: cover; } .section-parallax.deko1 .inner { background-image: url("/files/content/img/home/deko1.jpg"); } .section-parallax.deko2 .inner { background-image: url("/files/content/img/home/deko2.jpg"); } .section-parallax.pos-fixed .inner { background-attachment: fixed; } /* end parallax */ .header0 .inner { padding-top: 5rem; } @media (min-width: 1290px) { .header0 .inner { padding-top: 3rem; } } .header0 h1 strong { color: #fff; } .header0 h1 em { font-weight: 300; font-size: 1rem; } .page_agenturen #header { position: sticky; width: 100%; top: 0; z-index: 0; } .page_agenturen #container { position: relative; background-color: #fff; } .page_agenturen .logo { left: 0; -webkit-transform: none; transform: none; width: 48px; display: none; } .jobhinweis { background: #181715; text-transform: uppercase; margin-bottom: 0; line-height: 0.8; font-size: 3rem; } @media screen and (min-width: 48em) { .jobhinweis { font-size: 3.2rem; } } @media screen and (min-width: 58.75em) { .jobhinweis { font-size: 5rem; } } .jobhinweis p { margin-bottom: 0; } .jobhinweis a { color: #fff; text-decoration: none; display: block; } .jobhinweis a em { color: #181715; font-size: 0.5em; font-style: normal; } .jobhinweis a:hover { color: #181715; } .jobhinweis a:hover em { color: #fff; } .page_line .header0 { background: #ba022c; } .page_pcm_sales .header0 { background: #a9cf9d; } .page_circles .header0 { background: #eae0be; } .page_pcm .header0 { background: #c59d47; } .page_pcm .jobhinweis { background: #c59d47; } .page_pcm .jobhinweis a { color: #fff; } .page_pcm .jobhinweis a:hover { color: #181715; } .page_pcm .jobhinweis a:hover em { color: #fff; } .page_ag05 .header0 { background: #2d519f; } .page_ag05 .jobhinweis { background: #2d519f; } .page_redorange .header0 { background: #F39100; } .page_bestzeit .header0 { background: #ff6900; } .page_bgp .header0 { background: #d10a11; } .page_letsretail .header0 { background: #f4aa44; } .page_activating-media .header0 { background: #7c191e; } .page_activating-media .padding-inside-no-gutter { padding: 1rem; } .page_activating-media .padding-inside-no-gutter p { margin-bottom: 0.5rem; } .page_journalisten .header0 { background: #a51008; } .page_headtrip .header0 { background: #4c4c4c; } .page_infokontor .header0 { background: #0b3b99; } .claim-box { background: #cebda3; text-align: center; padding: 2rem; font-size: 2rem; color: #fff; line-height: 1.125; text-align: center; } .claim-box strong { font-weight: normal; font-family: "Aileron-Regular"; font-size: 1.215em; } .claim-box em { font-style: normal; color: #000; } @media screen and (min-width: 58.75em) { .claim-box { padding: 2.25rem; font-size: 2.125rem; } } @media screen and (min-width: 120rem) { .claim-box { padding: 7.5rem 2.125rem; } } /* ** Historie */ .fakten { margin-bottom: 0; margin-left: auto; margin-right: auto; } @media screen and (min-width: 48em) { .fakten { width: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } } .fakten table { border: 0; margin-bottom: 0; } .fakten table td { border: 0; padding: 0 10px; font-size: 2rem; text-transform: uppercase; } @media screen and (min-width: 48em) { .fakten table td { font-size: 1.25rem; } } @media screen and (min-width: 58.75em) { .fakten table td { font-size: 1.5rem; } } @media screen and (min-width: 80em) { .fakten table td { font-size: 2.0rem; } } @media screen and (min-width: 120rem) { .fakten table td { font-size: 3.5rem; } } .max-width-1160 { max-width: 1160px; } .bg-dom-koeln { background-image: url("/files/content/img/historie/dom-koeln.jpg"); background-size: cover; background-repeat: no-repeat; background-position: center 0; width: 100%; min-height: 600px; } @media screen and (min-width: 34.375em) { .bg-dom-koeln { min-height: 820px; } } @media screen and (min-width: 48em) { .bg-dom-koeln { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; } } @media screen and (min-width: 120rem) { .bg-dom-koeln { background-image: url("/files/content/img/historie/css_dom-koeln-xxl.jpg"); } } .unsere_preise { text-transform: uppercase; font-size: 2rem; margin: 0 auto; width: 100%; padding: 1rem; line-height: 1; } @media screen and (min-width: 34.375em) { .unsere_preise { width: 50%; } } @media screen and (min-width: 48em) { .unsere_preise { width: auto; } } @media screen and (min-width: 68.75em) { .unsere_preise { font-size: 3rem; } } @media screen and (min-width: 120rem) { .unsere_preise { padding: 2rem; font-size: 4rem; } } .text-circle { width: 40%; min-width: 320px; min-height: 320px; aspect-ratio: 1 / 1; border: 2px solid #fff; padding: 1.5rem; border-radius: 50%; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -ms-flex-line-pack: center; align-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; text-align: center; margin-bottom: 8%; background-color: #cf312f7a; font-size: 0.875rem; padding: 1.5rem 2.5rem; } @media screen and (min-width: 34.375em) { .text-circle { font-size: 1rem; padding: 1.5rem; } } #c1 { width: 30%; margin-right: 5%; margin-bottom: 8%; } #c2 { width: 34%; margin-right: 5%; } #c3 { width: 28%; margin-right: 7%; } #c4 { width: 44%; } .block-bg_galaxy { margin-top: -10%; } .circles-welcome .inner > .ce_text { text-align: center; } .image--left img { text-align: left; margin-left: 0; } .image--right img { text-align: right; margin-right: 0; } .image--center img { text-align: center; margin-left: auto; margin-right: auto; } .ce_gallery ul { margin-left: 0; margin-right: 0; padding: 0; list-style-type: none; } .ce_gallery li { float: left; padding-left: 0; padding-right: 0; margin-bottom: 0; } .ce_gallery .cols_2 li { width: 50%; } .ce_gallery .cols_3 li { width: 50%; } @media screen and (min-width: 48em) { .ce_gallery .cols_3 li { width: 33.33333%; } } .ce_gallery .cols_4 li { width: 50%; } @media screen and (min-width: 48em) { .ce_gallery .cols_4 li { width: 25%; } } .ce_gallery .cols_5 li { width: 50%; } @media screen and (min-width: 48em) { .ce_gallery .cols_5 li { width: 20%; } } .ce_gallery .cols_6 li { width: 50%; } @media screen and (min-width: 48em) { .ce_gallery .cols_6 li { width: 25%; } } @media screen and (min-width: 68.75em) { .ce_gallery .cols_6 li { width: 16.66667%; } } .ce_gallery img { display: block; } .ce_gallery .cols_4 li { width: 100%; } @media screen and (min-width: 0) { .ce_gallery .cols_4 li { width: 50%; } } @media screen and (min-width: 58.75em) { .ce_gallery .cols_4 li { width: 25%; } } .ce_gallery.no-gutter li { padding: 0; margin-bottom: 0; } .gallery_teaserboxes ul { margin-left: 0; margin-right: 0; } .gallery_teaserboxes ul li a { position: relative; display: block; overflow: hidden; } .gallery_teaserboxes ul li a img { z-index: 2; -webkit-transition: all 0.33s ease; transition: all 0.33s ease; } .gallery_teaserboxes ul li a:hover img { -webkit-transform: scale(1.3) rotate(0.0001deg); transform: scale(1.3) rotate(0.0001deg); } .gallery_teaserboxes ul li a:before, .gallery_teaserboxes ul li a:after { content: ""; background-size: cover; background-position: 0 0; background-repeat: no-repeat; display: block; position: absolute; left: 0; top: 0; right: 0; bottom: 0; -webkit-transition: all 0.33s ease; transition: all 0.33s ease; z-index: 3; } .gallery_teaserboxes ul li a:before { opacity: 1; } .gallery_teaserboxes ul li a:hover:before { opacity: 0; } .gallery_teaserboxes ul li a:hover:after { background-color: rgba(255, 255, 255, 0.875); } .gallery_teaserboxes ul li:first-child a:before { background-image: url("/files/content/img/home/agenturen/teaser/teaser-red-orange_1.jpg"); } .gallery_teaserboxes ul li:first-child a:hover:after { background-image: url("/files/content/img/home/agenturen/teaser/logo-red-orange.png"); } .gallery_teaserboxes ul li:nth-child(2) a:before { background-image: url("/files/content/img/home/agenturen/teaser/teaser-line_1.jpg"); } .gallery_teaserboxes ul li:nth-child(2) a:hover:after { background-image: url("/files/content/img/home/agenturen/teaser/logo-line.png"); } .gallery_teaserboxes ul li:nth-child(3) a:before { background-image: url("/files/content/img/home/agenturen/teaser/teaser-agentur05_1.jpg"); } .gallery_teaserboxes ul li:nth-child(3) a:hover:after { background-image: url("/files/content/img/home/agenturen/teaser/logo-agentur05.png"); } .gallery_teaserboxes ul li:nth-child(4) a:before { background-image: url("/files/content/img/home/agenturen/teaser/teaser-proconcept_1.jpg"); } .gallery_teaserboxes ul li:nth-child(4) a:hover:after { background-image: url("/files/content/img/home/agenturen/teaser/logo-proconcept.png"); } .gallery_teaserboxes ul li:nth-child(5) a:before { background-image: url("/files/content/img/home/agenturen/teaser/teaser-headtrip_1.jpg"); } .gallery_teaserboxes ul li:nth-child(5) a:hover:after { background-image: url("/files/content/img/home/agenturen/teaser/logo-headtrip.png"); } .gallery_teaserboxes ul li:nth-child(6) a:before { background-image: url("/files/content/img/home/agenturen/teaser/teaser-bg-performance_1.jpg"); } .gallery_teaserboxes ul li:nth-child(6) a:hover:after { background-image: url("/files/content/img/home/agenturen/teaser/logo-bg-performance.png"); } .gallery_teaserboxes ul li:nth-child(7) a:before { background-image: url("/files/content/img/home/agenturen/teaser/teaser-journalisten_1.jpg"); } .gallery_teaserboxes ul li:nth-child(7) a:hover:after { background-image: url("/files/content/img/home/agenturen/teaser/logo-journalisten.png"); } .gallery_teaserboxes ul li:nth-child(8) a:before { background-image: url("/files/content/img/home/agenturen/teaser/teaser-activating-media_1.jpg"); } .gallery_teaserboxes ul li:nth-child(8) a:hover:after { background-image: url("/files/content/img/home/agenturen/teaser/logo-activatingmedia.png"); } .gallery_teaserboxes ul li:nth-child(9) a:before { background-image: url("/files/content/img/home/agenturen/teaser/teaser-bestzeit_1.jpg"); } .gallery_teaserboxes ul li:nth-child(9) a:hover:after { background-image: url("/files/content/img/home/agenturen/teaser/logo-bestzeit.png"); } .gallery_teaserboxes ul li:nth-child(10) a:before { background-image: url("/files/content/img/home/agenturen/teaser/teaser-infokontor_1.jpg"); } .gallery_teaserboxes ul li:nth-child(10) a:hover:after { background-image: url("/files/content/img/home/agenturen/teaser/logo-infokontor.png"); } .gallery_teaserboxes ul li:nth-child(11) a:before { background-image: url("/files/content/img/home/agenturen/teaser/teaser-thatsretail_1.jpg"); } .gallery_teaserboxes ul li:nth-child(11) a:hover:after { background-image: url("/files/content/img/home/agenturen/teaser/logo-thatsretail.png"); } .gallery_teaserboxes_14 ul { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; } .gallery_teaserboxes_14 ul li { float: none; } @media screen and (min-width: 0) { .gallery_teaserboxes_14 ul li { width: 50%; } } @media screen and (min-width: 58.75em) { .gallery_teaserboxes_14 ul li { width: calc( 100% / 7); } } .gallery_teaserboxes_14 ul li:first-child a:before { background-image: url("/files/content/img/home/agenturen/teaser/teaser-red-orange_1.jpg"); } .gallery_teaserboxes_14 ul li:first-child a:hover:after { background-image: url("/files/content/img/home/agenturen/teaser/logo-red-orange.png"); } .gallery_teaserboxes_14 ul li:nth-child(2) a:before { background-image: url("/files/content/img/home/agenturen/teaser/teaser-line_1.jpg"); } .gallery_teaserboxes_14 ul li:nth-child(2) a:hover:after { background-image: url("/files/content/img/home/agenturen/teaser/logo-line.png"); } .gallery_teaserboxes_14 ul li:nth-child(3) a:before { background-image: url("/files/content/img/home/agenturen/teaser/teaser-agentur05_1.jpg"); } .gallery_teaserboxes_14 ul li:nth-child(3) a:hover:after { background-image: url("/files/content/img/home/agenturen/teaser/logo-agentur05.png"); } .gallery_teaserboxes_14 ul li:nth-child(4) a:before { background-image: url("/files/content/img/home/agenturen/teaser/teaser-proconcept_1.jpg"); } .gallery_teaserboxes_14 ul li:nth-child(4) a:hover:after { background-image: url("/files/content/img/home/agenturen/teaser/logo-proconcept.png"); } .gallery_teaserboxes_14 ul li:nth-child(5) a:before { background-image: url("/files/content/img/home/agenturen/teaser/teaser-circles_1.jpg"); } .gallery_teaserboxes_14 ul li:nth-child(5) a:hover:after { background-image: url("/files/content/img/home/agenturen/teaser/logo-circles.png"); } .gallery_teaserboxes_14 ul li:nth-child(6) a:before { background-image: url("/files/content/img/home/agenturen/teaser/teaser-headtrip_1.jpg"); } .gallery_teaserboxes_14 ul li:nth-child(6) a:hover:after { background-image: url("/files/content/img/home/agenturen/teaser/logo-headtrip.png"); } .gallery_teaserboxes_14 ul li:nth-child(7) a:before { background-image: url("/files/content/img/home/agenturen/teaser/teaser-bg-performance_1.jpg"); } .gallery_teaserboxes_14 ul li:nth-child(7) a:hover:after { background-image: url("/files/content/img/home/agenturen/teaser/logo-bg-performance.png"); } .gallery_teaserboxes_14 ul li:nth-child(8) a:before { background-image: url("/files/content/img/home/agenturen/teaser/teaser-journalisten_1.jpg"); } .gallery_teaserboxes_14 ul li:nth-child(8) a:hover:after { background-image: url("/files/content/img/home/agenturen/teaser/logo-journalisten.png"); } .gallery_teaserboxes_14 ul li:nth-child(9) a:before { background-image: url("/files/content/img/home/agenturen/teaser/teaser-activating-media_1.jpg"); } .gallery_teaserboxes_14 ul li:nth-child(9) a:hover:after { background-image: url("/files/content/img/home/agenturen/teaser/logo-activatingmedia.png"); } .gallery_teaserboxes_14 ul li:nth-child(10) a:before { background-image: url("/files/content/img/home/agenturen/teaser/teaser-bestzeit_1.jpg"); } .gallery_teaserboxes_14 ul li:nth-child(10) a:hover:after { background-image: url("/files/content/img/home/agenturen/teaser/logo-bestzeit.png"); } .gallery_teaserboxes_14 ul li:nth-child(11) a:before { background-image: url("/files/content/img/home/agenturen/teaser/teaser-infokontor_1.jpg"); } .gallery_teaserboxes_14 ul li:nth-child(11) a:hover:after { background-image: url("/files/content/img/home/agenturen/teaser/logo-infokontor.png"); } .gallery_teaserboxes_14 ul li:nth-child(12) a:before { background-image: url("/files/content/img/home/agenturen/teaser/teaser-thatsretail_1.jpg"); } .gallery_teaserboxes_14 ul li:nth-child(12) a:hover:after { display: block; background-image: url("/files/content/img/home/agenturen/teaser/logo-thatsretail.png"); } .gallery_teaserboxes_14 ul li:nth-child(13) a:before { background-image: url("/files/content/img/home/agenturen/teaser/teaser-proconcept-sales_1.jpg"); } .gallery_teaserboxes_14 ul li:nth-child(13) a:hover:after { background-image: url("/files/content/img/home/agenturen/teaser/logo-proconcept-sales.png"); } @media screen and (min-width: 58.75em) { .gallery_teaserboxes_14.addfinder ul li { width: calc( 100% / 5); /*&.box_agenturfinder{ width:calc( (100% / 5) * 2 ); } */ } } .gallery_teaserboxes_14.addfinder ul li.box_agenturfinder { width: 100%; padding: 2rem; background: #cebda3; } @media screen and (min-width: 58.75em) { .gallery_teaserboxes_14.addfinder ul li.box_agenturfinder { width: 40%; padding: 1.5rem 3rem; } } .gallery_teaserboxes_14.addfinder ul li.box_agenturfinder a.btn--primary { display: inline-block; background-color: #fff; } .gallery_teaserboxes_14.addfinder ul li.box_agenturfinder h2 { color: var(--color-text); } @media screen and (min-width: 48em) { .gallery_teaserboxes_14.addfinder ul li.box_agenturfinder h2:before { content: url("/files/content/img/Arrow-white.svg"); width: 1em; max-width: 34px; -webkit-transform: translateY(10px); transform: translateY(10px); display: inline-block; padding-right: 0.4em; color: #cebda3; margin-left: -1em; } } .gallery_teaserboxes_14.addfinder ul li.box_agenturfinder h2 strong { color: #fff; } .gallery_teaserboxes.lang_en ul li:first-child a:before { background-image: url("/files/content/img/home/agenturen/teaser_en/teaser-red-orange_1.jpg"); } .gallery_teaserboxes.lang_en ul li:first-child a:hover:after { background-image: url("/files/content/img/home/agenturen/teaser_en/logo-red-orange.png"); } .gallery_teaserboxes.lang_en ul li:nth-child(2) a:before { background-image: url("/files/content/img/home/agenturen/teaser_en/teaser-line_1.jpg"); } .gallery_teaserboxes.lang_en ul li:nth-child(2) a:hover:after { background-image: url("/files/content/img/home/agenturen/teaser_en/logo-line.png"); } .gallery_teaserboxes.lang_en ul li:nth-child(3) a:before { background-image: url("/files/content/img/home/agenturen/teaser_en/teaser-agentur05_1.jpg"); } .gallery_teaserboxes.lang_en ul li:nth-child(3) a:hover:after { background-image: url("/files/content/img/home/agenturen/teaser_en/logo-agentur05.png"); } .gallery_teaserboxes.lang_en ul li:nth-child(4) a:before { background-image: url("/files/content/img/home/agenturen/teaser_en/teaser-proconcept_1.jpg"); } .gallery_teaserboxes.lang_en ul li:nth-child(4) a:hover:after { background-image: url("/files/content/img/home/agenturen/teaser_en/logo-proconcept.png"); } .gallery_teaserboxes.lang_en ul li:nth-child(5) a:before { background-image: url("/files/content/img/home/agenturen/teaser_en/teaser-headtrip_1.jpg"); } .gallery_teaserboxes.lang_en ul li:nth-child(5) a:hover:after { background-image: url("/files/content/img/home/agenturen/teaser_en/logo-headtrip.png"); } .gallery_teaserboxes.lang_en ul li:nth-child(6) a:before { background-image: url("/files/content/img/home/agenturen/teaser_en/teaser-bg-performance_1.jpg"); } .gallery_teaserboxes.lang_en ul li:nth-child(6) a:hover:after { background-image: url("/files/content/img/home/agenturen/teaser_en/logo-bg-performance.png"); } .gallery_teaserboxes.lang_en ul li:nth-child(7) a:before { background-image: url("/files/content/img/home/agenturen/teaser_en/teaser-journalisten_1.jpg"); } .gallery_teaserboxes.lang_en ul li:nth-child(7) a:hover:after { background-image: url("/files/content/img/home/agenturen/teaser_en/logo-journalisten.png"); } .gallery_teaserboxes.lang_en ul li:nth-child(8) a:before { background-image: url("/files/content/img/home/agenturen/teaser_en/teaser-activating-media_1.jpg"); } .gallery_teaserboxes.lang_en ul li:nth-child(8) a:hover:after { background-image: url("/files/content/img/home/agenturen/teaser_en/logo-activatingmedia.png"); } .gallery_teaserboxes.lang_en ul li:nth-child(9) a:before { background-image: url("/files/content/img/home/agenturen/teaser_en/teaser-bestzeit_1.jpg"); } .gallery_teaserboxes.lang_en ul li:nth-child(9) a:hover:after { background-image: url("/files/content/img/home/agenturen/teaser_en/logo-bestzeit.png"); } .gallery_teaserboxes.lang_en ul li:nth-child(10) a:before { background-image: url("/files/content/img/home/agenturen/teaser_en/teaser-infokontor_1.jpg"); } .gallery_teaserboxes.lang_en ul li:nth-child(10) a:hover:after { background-image: url("/files/content/img/home/agenturen/teaser_en/logo-infokontor.png"); } .gallery_mouseover .image_container { position: relative; overflow: hidden; } .gallery_mouseover a { display: block; } .gallery_mouseover .caption { display: none; position: absolute; left: 50%; top: 50%; -webkit-transform: translateY(-50%) translateX(-50%); transform: translateY(-50%) translateX(-50%); color: #000; text-transform: uppercase; font-size: 1.75rem; } @media screen and (min-width: 58.75em) { .gallery_mouseover .caption { font-size: 2.25rem; } } .gallery_mouseover a:hover img { opacity: 0.125; -webkit-transform: scale(1.2); transform: scale(1.2); } .gallery_mouseover a:hover .caption { display: block; } .gallery_mouseover .grid_lb .grid-brick img { -webkit-transition: all 0.25s linear; transition: all 0.25s linear; } .gallery_mouseover .grid_lb .grid-brick:hover img { -webkit-transform: scale(1.2); transform: scale(1.2); } .owl-theme .owl-nav.disabled + .owl-dots { z-index: 2; position: absolute; bottom: 2rem; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); z-index: 5; } .gallery-team .image_container { position: relative; overflow: hidden; } .gallery-team .image_container .caption { background: #fff; text-align: center; position: absolute; bottom: 0; left: 0; width: 100%; padding: 1rem; z-index: 3; opacity: 0; -webkit-transition: opacity 1s ease; transition: opacity 1s ease; text-transform: uppercase; } .gallery-team .image_container .caption strong { letter-spacing: 0.1rem; } .gallery-team .image_container:hover .caption { opacity: 1; } .gallery-team .image_container:hover img { opacity: 0.15 !important; -webkit-transform: scale(1.3) rotate(0.0001deg); transform: scale(1.3) rotate(0.0001deg); } .gallery-team img { width: 100%; } .ce_gallery.gallery_tiles li { float: left; padding-left: 0; padding-right: 0; margin-bottom: 0; } .ce_player, .ce_youtube { /* */ } .ce_player .inside, .ce_player .mejs-video, .ce_player .mejs__video, .ce_youtube .inside, .ce_youtube .mejs-video, .ce_youtube .mejs__video { margin-left: auto; margin-right: auto; } .ce_player .mejs-video, .ce_player .mejs__video, .ce_youtube .mejs-video, .ce_youtube .mejs__video { width: 100% !important; height: auto !important; padding-top: 56.25%; } .ce_player .mejs-audio, .ce_player .mejs__audio, .ce_youtube .mejs-audio, .ce_youtube .mejs__audio { margin-top: 30px; } .ce_player .mejs-audio audio, .ce_player .mejs__audio audio, .ce_youtube .mejs-audio audio, .ce_youtube .mejs__audio audio { height: auto; } .ce_player .mejs-overlay, .ce_player .mejs-poster, .ce_player .mejs__overlay, .ce_player .mejs__poster, .ce_youtube .mejs-overlay, .ce_youtube .mejs-poster, .ce_youtube .mejs__overlay, .ce_youtube .mejs__poster { width: 100% !important; height: 100% !important; } .ce_player .mejs-video .mejs-mediaelement video, .ce_player .mejs-video .mejs-mediaelement .me-plugin, .ce_player .mejs-video .mejs-mediaelement embed, .ce_youtube .mejs-video .mejs-mediaelement video, .ce_youtube .mejs-video .mejs-mediaelement .me-plugin, .ce_youtube .mejs-video .mejs-mediaelement embed { position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: 100% !important; height: 100% !important; } .ce_player .mejs__video .mejs__mediaelement video, .ce_player .mejs__video .mejs__mediaelement .me__plugin, .ce_player .mejs__video .mejs__mediaelement embed, .ce_youtube .mejs__video .mejs__mediaelement video, .ce_youtube .mejs__video .mejs__mediaelement .me__plugin, .ce_youtube .mejs__video .mejs__mediaelement embed { position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: 100% !important; height: 100% !important; } .ce_player.player-default { position: relative; } .ce_player.player-default .inside, .ce_player.player-default .mejs-video, .ce_player.player-default .mejs__video { margin-left: auto; margin-right: auto; } .ce_player.player-default .mejs-video, .ce_player.player-default .mejs__video { width: 100% !important; height: auto !important; padding-top: 66.667%; overflow: hidden; } .ce_player.player-default .mejs-audio, .ce_player.player-default .mejs__audio { margin-top: 30px; } .ce_player.player-default .mejs-audio audio, .ce_player.player-default .mejs__audio audio { height: auto; } .ce_player.player-default .mejs-video .mejs-mediaelement video, .ce_player.player-default .mejs-video .mejs-mediaelement .me-plugin, .ce_player.player-default .mejs-video .mejs-mediaelement embed { position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: 100% !important; height: 100% !important; } .ce_player.player-default .mejs__video .mejs__mediaelement video, .ce_player.player-default .mejs__video .mejs__mediaelement .me__plugin, .ce_player.player-default .mejs__video .mejs__mediaelement embed { position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: 100% !important; height: 100% !important; } .ce_player.player-default .mejs__controls, .ce_player.player-default .mejs__overlay-button { display: none !important; } .ce_vimeo { position: relative; padding-bottom: 56.25%; width: 100%; height: auto; } .ce_vimeo iframe { position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: 100% !important; height: 100% !important; border: 0; } .ce_vimeo .vp-sidedock { display: none !important; } .ce_player.bgvideo { overflow: hidden; } .ce_player.bgvideo .mejs__container { background: transparent; } .ce_player.bgvideo .mejs-video, .ce_player.bgvideo .mejs__video { width: 100% !important; height: 100% !important; padding-top: 0; margin: 0 auto; max-width: 1920px; text-align: center; } .ce_player.bgvideo .mejs__controls, .ce_player.bgvideo .mejs__overlay-button { display: none !important; } .ce_player.bgvideo video { width: auto !important; height: 100%; min-height: 480px; margin-left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); } .player-fixheight { overflow: hidden; margin-bottom: 0; max-height: 286px; } .player-fixheight .mejs__controls { display: none !important; } @media screen and (min-width: 48em) { .player-fixheight { max-height: 600px; } } @media screen and (min-width: 68.75em) { .player-fixheight { max-height: 724px; } } .player-fixheight video { display: block; height: auto; width: 780px; max-width: 100%; /* @include media-query(screen-xxl){ height:870px; } */ } @media screen and (min-width: 48em) { .player-fixheight video { width: auto; height: 590px; width: auto; max-width: none; } } @media screen and (min-width: 68.75em) { .player-fixheight video { height: 748px; } } .player--scale-normal video { display: block; width: 100%; height: auto; max-height: 100%; } /* grid gallery */ /* *************************************** LOADING STYLE *************************************** */ #grid .caption, #grid .thumbnail-caption { display: none; text-transform: uppercase; font-size: 1.25rem; } @media screen and (min-width: 58.75em) { #grid .caption, #grid .thumbnail-caption { font-size: 1.75rem; } } @media screen and (min-width: 80em) { #grid .caption, #grid .thumbnail-caption { font-size: 2.5rem; } } #grid .caption strong, #grid .thumbnail-caption strong { font-family: "Aileron-Thin", "Helvetica", "Helvetica Neue", arial, sans-serif; font-weight: inherit; font-size: 0.825em; color: #cebda3; } #grid .box img { -webkit-transition: all 0.5s ease; transition: all 0.5s ease; } #grid .box:hover img { -webkit-transform: scale(1.25); transform: scale(1.25); } .grid-loader { width: 43px; height: 30px; padding: 10px 15px 10px 15px; background: url(../../files/theme/dist/img/loader.gif) no-repeat; background-position: center; margin: 20px auto; } .grid-loadMore { cursor: pointer; margin-top: 4rem; /* margin: 30px auto; width: 150px; height: 20px; text-align: center; color: white; background-color: black; background: rgba(0,0,0,.6); border-radius: 2px; padding: 10px 15px 10px 15px; */ } .gallery-masonry { margin-top: -1px; } .gallery-masonry .cols_1 { -webkit-column-gap: 0; -moz-column-gap: 0; column-gap: 0; } @media screen and (min-width: 34.375em) { .gallery-masonry .cols_1 { -webkit-column-count: 2; -moz-column-count: 2; column-count: 2; } } @media screen and (min-width: 48em) { .gallery-masonry .cols_1 { -webkit-column-count: 3; -moz-column-count: 3; column-count: 3; } } .gallery-masonry img { width: 100% !important; height: auto !important; } /* ### grid gallery JB ## */ .jb_gridgallery { display: grid; grid-template-columns: repeat(8, 1fr); grid-gap: 0px; } .gallery__item { overflow: hidden; /*display: none;*/ } .gallery__item img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; max-width: none; } .gallery__item--1, .gallery__item--7, .gallery__item--13, .gallery__item--19 { grid-column-start: 1; grid-column-end: 3; grid-row-start: 1; grid-row-end: 3; } .gallery__item--2, .gallery__item--8, .gallery__item--14, .gallery__item--20 { grid-column-start: 3; grid-column-end: 5; grid-row-start: 1; grid-row-end: 3; } .gallery__item--3, .gallery__item--9, .gallery__item--15, .gallery__item--21 { grid-column-start: 5; grid-column-end: 9; grid-row-start: 1; grid-row-end: 6; } .gallery__item--4, .gallery__item--10, .gallery__item--16, .gallery__item--22 { grid-column-start: 1; grid-column-end: 5; grid-row-start: 3; grid-row-end: 6; } .gallery__item--5, .gallery__item--11, .gallery__item--17, .gallery__item--23 { grid-column-start: 1; grid-column-end: 5; grid-row-start: 6; grid-row-end: 9; } .gallery__item--6, .gallery__item--12, .gallery__item--18, .gallery__item--24 { grid-column-start: 5; grid-column-end: 9; grid-row-start: 6; grid-row-end: 9; } .gallery__item--7 { grid-column-start: 1; grid-column-end: 3; grid-row-start: 1; grid-row-end: 3; } /* colorbox */ #cboxLoadedContent { border: 0; background: transparent; } #cboxTitle { position: absolute; top: -25px; left: 0; color: #ccc; } #cboxCurrent { display: none !important; } @media screen and (min-width: 58.75em) { .overflow22-horizontal { margin-left: -2rem; margin-right: -2rem; } } @media screen and (min-width: 58.75em) { .overflow2-top { margin-top: -2rem; } } .gallery_projekte img { width: 100%; } /* page historie */ .gallery--awards { margin-top: 2rem; margin-bottom: 2rem; } .image--cover img { display: block; -o-object-fit: cover; object-fit: cover; max-width: none; width: 100%; height: 100%; -o-object-position: 0 0; object-position: 0 0; } @media screen and (min-width: 48em) { .image--lg-md-overflow-horizontal .image_container { margin-left: -2rem; margin-right: -2rem; } } a.btn, span.btn, button.btn, div.btn > a, div.btn > button, .ce_toplink > a, .ce_toplink > button, .toplink > a, .toplink > button, div.grid-loadMore, input.submit, button.submit { border-radius: 0; padding: 0.5rem 1rem; display: inline-block; border: 1px solid transparent; font-family: "Aileron-Thin", "Helvetica", "Helvetica Neue", arial, sans-serif; font-weight: 400; line-height: 1.45; text-align: center; background: transparent; background-image: none; white-space: nowrap; } a.btn, span.btn, button.btn { margin-bottom: 1rem; } a.btn--primary, span.btn--primary, button.btn--primary, input.submit, button.submit { background: transparent; color: #fff; } a.btn--primary:hover, span.btn--primary:hover, button.btn--primary:hover, input.submit:hover, button.submit:hover { background: transparent; } div.btn:not(:last-child), .ce_toplink:not(:last-child), .toplink:not(:last-child) { margin-bottom: 1rem; } div.btn--primary > a, div.btn--primary > button, .ce_toplink > a, .ce_toplink > button, .toplink > a, .toplink > button { background: transparent; color: #fff; } div.btn--primary > a:hover, div.btn--primary > button:hover, .ce_toplink > a:hover, .ce_toplink > button:hover, .toplink > a:hover, .toplink > button:hover { background: transparent; } .div.btn--left { text-align: left; } div.btn--center { text-align: center; } div.btn--right { text-align: right; } .btn--floated { float: left; margin-right: 0.25rem; } .ce_toplink a, .toplink a { text-decoration: none; } .back { border-top: 1px solid #ccc; margin-top: 1rem; padding-top: 0.5rem; } .back a { text-decoration: none; } .back a:before { font-size: 0.75rem; line-height: 1.4; padding-bottom: 0.25rem; display: inline-block; content: "◄"; vertical-align: middle; margin-right: 0.25rem; } .ce_toplink { top: -31px; position: absolute; left: 50%; margin-left: -20px; width: 40px; height: 40px; } .ce_toplink img { width: 40px; } .ce_toplink a { text-indent: -9999em; } a.btn--primary, span.btn--primary, button.btn--primary, input.submit, button.submit, a.btn--primary:hover, span.btn--primary:hover, button.btn--primary:hover, input.submit:hover, button.submit:hover, div.grid-loadMore { text-decoration: none; border: 0; font-size: 1rem; padding-left: 1rem; padding-right: 1rem; line-height: 1.5; color: #181715; text-transform: uppercase; border: 1px solid #181715; } @media screen and (min-width: 48em) { a.btn--primary, span.btn--primary, button.btn--primary, input.submit, button.submit, a.btn--primary:hover, span.btn--primary:hover, button.btn--primary:hover, input.submit:hover, button.submit:hover, div.grid-loadMore { font-size: 1.25rem; } } @media screen and (min-width: 58.75em) { a.btn--primary, span.btn--primary, button.btn--primary, input.submit, button.submit, a.btn--primary:hover, span.btn--primary:hover, button.btn--primary:hover, input.submit:hover, button.submit:hover, div.grid-loadMore { /* font-size:1.75rem; padding-left:1.5rem; padding-right:1.5rem; line-height: 1.75; */ } } a.btn--primary:before, span.btn--primary:before, button.btn--primary:before, input.submit:before, button.submit:before, div.grid-loadMore:before { content: url("/files/content/img/Arrow.svg"); width: 1em; display: inline-block; padding-right: 0.5em; color: #cebda3; -webkit-transform: translateY(0.225em); transform: translateY(0.225em); } a.btn--primary:hover, span.btn--primary:hover, button.btn--primary:hover, input.submit:hover, button.submit:hover, div.grid-loadMore:hover { color: #cebda3; } .underlined a { text-decoration: underline; } .underlined a.hover { color: #000; text-decoration: none; } .nav ul { list-style-type: none; margin: 0; padding: 0; } .nav a { text-decoration: none; } @media screen and (min-width: 48em) { .nav--horizontal li { float: left; } } .nav--horizontal a, .nav--horizontal span.active, .nav--horizontal span.trail, .nav--horizontal strong.active, .nav--horizontal strong.trail { display: block; padding: 0.5rem 1rem; } .nav--right { float: right; } .nav--vertical a, .nav--vertical span.active, .nav--vertical span.trail, .nav--vertical strong.active, .nav--vertical strong.trail { display: block; padding: 0.5rem 1rem; } .nav--border { border: 1px solid #ccc; } .nav--border a, .nav--border span.active, .nav--border span.trail, .nav--border strong.active, .nav--border strong.trail { padding: 1rem 1rem; border-bottom: 1px solid #ccc; } .nav--border a.last, .nav--border span.active.last, .nav--border span.trail.last, .nav--border strong.active.last, .nav--border strong.trail.last { border-bottom: 0; } .nav--breadcrumb { border: 1px solid #ccc; padding: 0.5rem 1rem; } @media screen and (min-width: 48em) { .nav--breadcrumb li { float: left; padding-right: 1rem; } } .nav--breadcrumb a:after { font-size: 0.75rem; display: inline-block; content: "►"; vertical-align: middle; padding-left: 1rem; } .nav--select select { -webkit-appearance: none; background: transparent; border: 1px solid #ccc; padding: 0.25rem 0.5rem; } .nav--select .submit { vertical-align: middle; padding: 0.25rem 0.5rem; } .nav--pager ul { text-align: center; } .nav--pager li { display: inline-block; } .nav--pager .empty { width: 0; height: 0; left: -1000px; top: -1000px; position: absolute; overflow: hidden; display: inline; } .nav--pager a { padding: 0.5rem; } .pagination { margin-top: 1rem; clear: both; text-align: center; line-height: 1; } .pagination ul { list-style-type: none; margin: 0; padding: 0; } .pagination a { text-decoration: none; } .pagination p { padding: 0.25rem; padding-left: 0; margin: 0.25rem; margin-left: 0; border-top: 1px solid transparent; } .pagination li { display: inline; } .pagination a, .pagination span, .pagination strong { display: inline-block; padding: 0.25rem; margin: 0.25rem; } .pagination span, .pagination strong { border: 1px solid #ccc; } .pagination a.next { margin-right: 0; padding-right: 0; } @media screen and (min-width: 34.375em) { .pagination p { float: left; } .pagination p + ul { float: right; } } nav li strong { font-weight: inherit; } .nav--meta ul { text-align: center; } .nav--meta ul li { float: none; display: inline-block; } .nav--meta a:hover { text-decoration: underline; } .hamburger { position: fixed; z-index: 999; top: 1rem; left: 1rem; display: block; background: #000; outline: 0; border-radius: 50%; cursor: pointer; } @media screen and (min-width: 68.75em) { .hamburger { top: 2rem; left: 2rem; } } .mobile_menu { /*li:nth-child(odd) a:hover:before{ width: 0.325em; padding-right: 0.1em; margin-left: -0.325em; } */ } .mobile_menu .inner { overflow-y: auto; } @media screen and (min-width: 58.75em) { .mobile_menu .inner { width: 630px; margin: 50vh auto 0; -webkit-transform: translateY(-50%); transform: translateY(-50%); } } @media screen and (min-width: 58.75em) { .mobile_menu .inner { height: auto; } } .mobile_menu #mobilenav { padding: 4rem 3rem; } .mobile_menu .level_1 > li { font-size: 1.75rem; } @media screen and (min-width: 34.375em) { .mobile_menu .level_1 > li { font-size: 2rem; } } @media screen and (min-width: 48em) { .mobile_menu .level_1 > li { font-size: 3.75rem; line-height: 1; } } @media screen and (min-width: 58.75em) { .mobile_menu .level_1 > li { font-size: 4.5rem; } } .mobile_menu a, .mobile_menu strong { color: #cebda3; text-transform: uppercase; font-family: "Aileron-Thin"; padding: 0 0.5rem; line-height: 1; } .mobile_menu li:nth-child(1) a, .mobile_menu li:nth-child(1) strong, .mobile_menu li:nth-child(3) a, .mobile_menu li:nth-child(3) strong { color: #fff; font-size: 1.4em; } @media screen and (min-width: 48em) { .mobile_menu li:nth-child(2) { font-size: 2.667rem; line-height: 1; } } @media screen and (min-width: 58.75em) { .mobile_menu li:nth-child(2) { font-size: 3.667rem; } } .mobile_menu li:nth-child(5) a, .mobile_menu li:nth-child(5) strong { color: #fff; } .mobile_menu li.last a, .mobile_menu li.last strong { font-size: 1em !important; } .mobile_menu .level_1 > li.active > strong, .mobile_menu .level_1 > .submenu.trail > a { font-family: "Aileron-Thin"; font-weight: normal; } .mobile_menu a:hover:before { content: url("/files/content/img/Arrow.svg"); width: 0.4em; display: inline-block; padding-right: 0.1em; color: #cebda3; margin-left: -0.4em; } .mod_booknav ul { text-align: center; } .mod_booknav li { float: none; display: inline-block; } .mod_booknav li.previous { margin-right: 1rem; } @media screen and (min-width: 34.375em) { .mod_booknav li.previous { margin-right: 2rem; } } @media screen and (min-width: 58.75em) { .mod_booknav li.previous { margin-right: 5rem; } } .mod_booknav li.next { margin-left: 1rem; } @media screen and (min-width: 34.375em) { .mod_booknav li.next { margin-left: 2rem; } } @media screen and (min-width: 58.75em) { .mod_booknav li.next { margin-left: 5rem; } } .mod_booknav li.previous img { -webkit-transform: rotate(180deg); transform: rotate(180deg); } .nav--language { position: absolute; right: 1rem; top: 1rem; z-index: 5; } .nav--language li a, .nav--language li strong { background-color: rgba(236, 234, 234, 0.3); line-height: 45px; padding: 0; border-radius: 50%; text-align: center; width: 45px; height: 45px; } .nav--language li a:hover, .nav--language li strong:hover { background-color: rgba(236, 234, 234, 0.42); } .news-list { margin-bottom: 1rem; } .news-list > h1, .news-list > h2, .news-list > h3, .news-list > h4, .news-list > h5, .news-list > h6 { margin-bottom: 0; } .news-list > h1:after, .news-list > h2:after, .news-list > h3:after, .news-list > h4:after, .news-list > h5:after, .news-list > h6:after { border-top: 1px solid #ccc; content: ""; display: block; } .news-list .info { margin-bottom: 0; font-weight: 700; } .news-list .image_container { margin-top: 1rem; margin-bottom: 1rem; } .news-list .float_left { margin-right: 1rem; } .news-list .float_right { margin-left: 1rem; } .news-list .layout_short > h1, .news-list .layout_short > h2, .news-list .layout_short > h3, .news-list .layout_short > h4, .news-list .layout_short > h5, .news-list .layout_short > h6, .news-list .layout_latest > h1, .news-list .layout_latest > h2, .news-list .layout_latest > h3, .news-list .layout_latest > h4, .news-list .layout_latest > h5, .news-list .layout_latest > h6, .news-list .layout_simple > h1, .news-list .layout_simple > h2, .news-list .layout_simple > h3, .news-list .layout_simple > h4, .news-list .layout_simple > h5, .news-list .layout_simple > h6 { margin-top: 1rem; } .news-list .layout_short:after, .news-list .layout_latest:after, .news-list .layout_simple:after { border-bottom: 1px solid #ccc; margin-top: 1rem; content: ""; display: block; } .news-list .layout_simple time, .news-list .layout_simple a, .news-list .layout_upcoming time, .news-list .layout_upcoming a { padding-top: 1rem; display: inline-block; } .news-list .header { margin-top: 1rem; } .news-grid { margin-left: -3.75rem; margin-right: -3.75rem; margin-bottom: 1rem; } .news-grid > h1, .news-grid > h2, .news-grid > h3, .news-grid > h4, .news-grid > h5, .news-grid > h6 { padding-left: 3.75rem; padding-right: 3.75rem; } .news-grid > h1:after, .news-grid > h2:after, .news-grid > h3:after, .news-grid > h4:after, .news-grid > h5:after, .news-grid > h6:after { border-top: 1px solid #ccc; content: ""; display: block; } .news-grid .layout_short, .news-grid .layout_latest, .news-grid .layout_simple { float: left; padding-left: 3.75rem; padding-right: 3.75rem; margin-top: 1rem; } @media screen and (min-width: 34.375em) { .news-grid .layout_short, .news-grid .layout_latest, .news-grid .layout_simple { float: left; padding-left: 3.75rem; padding-right: 3.75rem; width: 50%; } .news-grid .layout_short:nth-of-type(2n + 1), .news-grid .layout_latest:nth-of-type(2n + 1), .news-grid .layout_simple:nth-of-type(2n + 1) { clear: both; } } @media screen and (min-width: 48em) { .news-grid .layout_short, .news-grid .layout_latest, .news-grid .layout_simple { float: left; padding-left: 3.75rem; padding-right: 3.75rem; width: 50%; } .news-grid .layout_short:nth-of-type(n), .news-grid .layout_latest:nth-of-type(n), .news-grid .layout_simple:nth-of-type(n) { clear: none; } .news-grid .layout_short:nth-of-type(2n + 1), .news-grid .layout_latest:nth-of-type(2n + 1), .news-grid .layout_simple:nth-of-type(2n + 1) { clear: both; } } @media screen and (min-width: 58.75em) { .news-grid .layout_short, .news-grid .layout_latest, .news-grid .layout_simple { float: left; padding-left: 3.75rem; padding-right: 3.75rem; width: 33.33333%; } .news-grid .layout_short:nth-of-type(n), .news-grid .layout_latest:nth-of-type(n), .news-grid .layout_simple:nth-of-type(n) { clear: none; } .news-grid .layout_short:nth-of-type(3n + 1), .news-grid .layout_latest:nth-of-type(3n + 1), .news-grid .layout_simple:nth-of-type(3n + 1) { clear: both; } } .news-grid .layout_simple time { display: block; } .news-menu ul { list-style-type: none; margin: 0; padding: 0; } .news-menu a { text-decoration: none; } .news-menu > h1:after, .news-menu > h2:after, .news-menu > h3:after, .news-menu > h4:after, .news-menu > h5:after, .news-menu > h6:after { border-top: 1px solid #ccc; content: ""; display: block; } .news-menu .year { margin-bottom: 0.5rem; } .news-menu .year > a, .news-menu .year > .active { color: inherit; font-weight: normal; font-family: "Aileron-Thin", Helvetica, "Helvetica Neue", arial, sans-serif; } .news-menu .level_2 li { margin-bottom: 0.25rem; } .layout_latest { position: relative; overflow: hidden; } .layout_latest span.more { display: block; font-size: 0.667em; color: #cebda3; } .layout_latest h3 { text-align: center; text-transform: uppercase; position: absolute; left: 0; top: 0; bottom: 0; right: 0; z-index: 2; margin-bottom: 0; font-size: 2rem; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-line-pack: center; align-content: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; /*.more { opacity: 0; transition: opacity 0.78s ease-in-out; } */ } .layout_latest h3 > a { width: 100%; height: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; position: absolute; left: 0; top: 0; bottom: 0; right: 0; z-index: 2; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; text-align: center; padding: 1rem; opacity: 0; display: flex; -ms-flex-line-pack: center; align-content: center; justify-content: center; align-items: center; -webkit-transition: all 0.44s ease; transition: all 0.44s ease; background-color: rgba(255, 255, 255, 0.9); -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .layout_latest h3 > a:hover { opacity: 1; } .layout_latest figure { z-index: 1; position: relative; } .layout_latest img { max-width: none; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } .layout_latest.blue1 h3 > a { background-color: #2d519f; color: #fff; } .layout_latest.orange1 h3 > a { background-color: #f4aa44; color: #fff; } .layout_latest.gray1 h3 > a { background-color: #c8c8c8; color: #333; } .layout_latest figure img { -webkit-transform: scale(1); transform: scale(1); -webkit-transition: -webkit-transform 0.44s ease; transition: -webkit-transform 0.44s ease; transition: transform 0.44s ease; transition: transform 0.44s ease, -webkit-transform 0.44s ease; } .layout_latest.scale12 { /*.more{ opacity: 1; } */ } .layout_latest.scale12 figure img { -webkit-transform: scale(1.2); transform: scale(1.2); } #ticker-bgg-home { padding: 0.5rem 1.5rem; color: var(--color-text); background-color: #fff; text-transform: uppercase; } @media screen and (min-width: 58.75em) { #ticker-bgg-home { font-size: 1.25rem; } } #ticker-bgg-home .tickertext, #ticker-bgg-home .msg-white { background-color: #fff; color: var(--color-text); } #ticker-bgg-home #ticker-bgg-home .tickertext, #ticker-bgg-home #ticker-bgg-home .msg-white { background-color: #fff; color: var(--color-text); } #ticker-bgg-home .telex > div:before { display: inline-block; -webkit-transform: translateX(-50%); transform: translateX(-50%); content: ">>"; color: #cebda3; font-weight: 700; } .ce_form { overflow: visible; } fieldset { padding: 0; margin: 0; border: 0; min-width: 0; } label { display: inline-block; max-width: 100%; margin-bottom: 0.25rem; font-weight: bold; } input.text, input.captcha, textarea { display: block; width: 100%; padding: 0.5rem 1rem; border-radius: 0; border: 1px solid rgba(0, 0, 0, 0.25); background-clip: padding-box; background-image: none; } textarea.textarea { height: auto; } .widget-text, .widget-textarea { margin-bottom: 1rem; } input[type="search"] { -webkit-appearance: none; } input[type="file"] { display: block; vertical-align: middle; line-height: 1; } input.radio, input.checkbox { margin: 0.25rem 0 0; margin-left: 1px; margin-top: 1px \9; line-height: normal; } input.radio + label, input.checkbox + label { margin-right: 0.25rem; font-weight: normal; } select.select { margin-left: 0.25rem; } .widget-radio, .widget-checkbox, .widget-select, .widget-upload { margin-bottom: 1rem; } .widget-radio legend, .widget-checkbox legend, .widget-select legend, .widget-upload legend { font-weight: 700; } .radio_container > span, .checkbox_container > span { display: inline-block; } span.mandatory { color: #181715; } p.error { margin-bottom: 0; } .widget-submit { margin-top: 2rem; margin-bottom: 1rem; } /*.mandatory ::placeholder{ &:after{ content:" *"; color:$color-default; } }*/ .form-kontakt { max-width: 560px; } label { /*position: absolute; margin: 0.5rem 1rem; cursor: auto; z-index: 1; font-weight:300; font-size:1.4rem; */ display: block; text-transform: uppercase; font-family: "Aileron-Regular", arial, helvetica, sans-serif; font-size: 0.825rem; font-weight: normal; } .cb_datenschutz input.checkbox { display: inline-block; } .cb_datenschutz label { text-transform: none; display: inline-block; max-width: calc(100% - 36px); vertical-align: top; font-family: "Aileron-Thin", arial, helvetica, sans-serif; } .cb_datenschutz label a { text-decoration: underline; } input.text, textarea.textarea { background-color: #f7f7f7; font-weight: 300; font-size: 1.4rem; border-color: #e3e3e3; } .widget-explanation { font-weight: 300; color: #b3b3b3; } input.text, textarea.textarea { background-color: #fff; font-weight: 300; font-size: 1rem; border-color: #181715; } span.mandatory { font-family: arial, helvetica, sans-serif; display: inline-block; padding-left: 0.2rem; } .ce_accordion { margin-bottom: 0.25rem; } .ce_accordion .toggler { font-size: inherit; cursor: pointer; background: inherit; color: var(--color-text); padding: 0.5rem; border: 0; } .ce_accordion .toggler:hover { color: rgba(var(--color-text), 0.5); } .ce_accordion .toggler:focus { outline: 0; } .ce_accordion .accordion { padding: 0.5rem; background: inherit; } .ce_accordionStart { margin-bottom: 2rem; } .ce_download, .ce_downloads { margin-bottom: 1rem; } .ce_download .mime_icon, .ce_downloads .mime_icon { display: inline-block; vertical-align: middle; } .ce_download a, .ce_downloads a { display: inline-block; color: inherit; text-decoration: none; } .ce_downloads ul { list-style-type: none; margin: 0; padding: 0; } .ce_downloads a { text-decoration: none; } table { margin-bottom: 1rem; width: 100%; padding: 0; border-spacing: 0; border-left: 1px solid #ccc; border-top: 1px solid #ccc; } table th, table td { border-right: 1px solid #ccc; border-bottom: 1px solid #ccc; padding: 10px; } thead { text-align: left; background: rgba(204, 204, 204, 0.2); } tfoot { font-style: italic; } .table--striped .even { background: rgba(204, 204, 204, 0.2); } .table--overflow { overflow-x: scroll; -ms-overflow-x: auto; } /*** Achtung: diverse EUF imports in default CSS ausgeblendet. //@import "components/events"; //@import "components/accordion"; //@import "components/downloads"; //@import "components/tables"; //@import "components/newsletter"; //@import "components/faq"; //@import "components/comments"; //@import "components/search"; */ .fit { display: inline-block; white-space: nowrap; } /** * typewriter startseite headerbilder */ #tw { position: absolute; z-index: 7; bottom: 200px; width: 100%; text-align: center; } @media screen and (min-width: 58.75em) { #tw { bottom: 260px; } } @media screen and (min-width: 68.75em) { #tw { bottom: 420px; } } #tw h4 { font-size: 1.5rem; } @media screen and (min-width: 48em) { #tw h4 { font-size: 3rem; } } @media screen and (min-width: 58.75em) { #tw h4 { font-size: 3rem; } } @media screen and (min-width: 68.75em) { #tw h4 { font-size: 4rem; } } #tw span.raq { color: #cebda3; } #tw span.wrap { border-right: 0; } #tw span.wrap:after { content: "|"; color: #333; display: inline-block; opacity: 1; -webkit-animation: ult-blink .7s infinite; animation: ult-blink .7s infinite; } #tw span.raq { font-size: 1.75em; display: inline-block; -webkit-transform: translateY(8px); transform: translateY(8px); } #tw span.raq:nth-child(1) { margin-right: 1rem; } #tw span.raq :nth-child(2) { margin-left: 1rem; } #tw.white h4, #tw.white span.wrap { color: #fff; } @-webkit-keyframes ult-blink { 0 { opacity: 1; } 50% { opacity: 0; } 100% { opacity: 1; } } @keyframes ult-blink { 0 { opacity: 1; } 50% { opacity: 0; } 100% { opacity: 1; } } /* @include media-query(screen-md){ @supports ((perspective: 1px) and (not (-webkit-overflow-scrolling: touch))) { .section-parallax{ scroll-behavior: smooth; } } } */ /*! * Hamburgers * @description Tasty CSS-animated hamburgers * @author Jonathan Suh @jonsuh * @site https://jonsuh.com/hamburgers * @link https://github.com/jonsuh/hamburgers */ .hamburger { padding: 15px 15px 10px; display: inline-block; cursor: pointer; -webkit-transition-property: opacity, -webkit-filter; transition-property: opacity, -webkit-filter; transition-property: opacity, filter; transition-property: opacity, filter, -webkit-filter; -webkit-transition-duration: 0.15s; transition-duration: 0.15s; -webkit-transition-timing-function: linear; transition-timing-function: linear; font: inherit; color: inherit; text-transform: none; background-color: #000; border: 0; margin: 0; overflow: visible; } .hamburger:hover { opacity: 0.7; } .hamburger.is-active:hover { opacity: 0.7; } .hamburger.is-active .hamburger-inner, .hamburger.is-active .hamburger-inner::before, .hamburger.is-active .hamburger-inner::after { background-color: #fff; } .hamburger-box { width: 24px; height: 21px; display: inline-block; position: relative; } .hamburger-inner { display: block; top: 50%; margin-top: -1.5px; } .hamburger-inner, .hamburger-inner::before, .hamburger-inner::after { width: 24px; height: 3px; background-color: #fff; border-radius: 3px; position: absolute; -webkit-transition-property: -webkit-transform; transition-property: -webkit-transform; transition-property: transform; transition-property: transform, -webkit-transform; -webkit-transition-duration: 0.15s; transition-duration: 0.15s; -webkit-transition-timing-function: ease; transition-timing-function: ease; } .hamburger-inner::before, .hamburger-inner::after { content: ""; display: block; } .hamburger-inner::before { top: -9px; } .hamburger-inner::after { bottom: -9px; } /* * 3DX */ .hamburger--3dx .hamburger-box { -webkit-perspective: 48px; perspective: 48px; } .hamburger--3dx .hamburger-inner { -webkit-transition: background-color 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform 0.15s cubic-bezier(0.645, 0.045, 0.355, 1); transition: background-color 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform 0.15s cubic-bezier(0.645, 0.045, 0.355, 1); transition: transform 0.15s cubic-bezier(0.645, 0.045, 0.355, 1), background-color 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1); transition: transform 0.15s cubic-bezier(0.645, 0.045, 0.355, 1), background-color 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform 0.15s cubic-bezier(0.645, 0.045, 0.355, 1); } .hamburger--3dx .hamburger-inner::before, .hamburger--3dx .hamburger-inner::after { -webkit-transition: -webkit-transform 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1); transition: -webkit-transform 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1); transition: transform 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1); transition: transform 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1); } .hamburger--3dx.is-active .hamburger-inner { background-color: transparent !important; -webkit-transform: rotateY(180deg); transform: rotateY(180deg); } .hamburger--3dx.is-active .hamburger-inner::before { -webkit-transform: translate3d(0, 9px, 0) rotate(45deg); transform: translate3d(0, 9px, 0) rotate(45deg); } .hamburger--3dx.is-active .hamburger-inner::after { -webkit-transform: translate3d(0, -9px, 0) rotate(-45deg); transform: translate3d(0, -9px, 0) rotate(-45deg); } /* * 3DX Reverse */ .hamburger--3dx-r .hamburger-box { -webkit-perspective: 48px; perspective: 48px; } .hamburger--3dx-r .hamburger-inner { -webkit-transition: background-color 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform 0.15s cubic-bezier(0.645, 0.045, 0.355, 1); transition: background-color 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform 0.15s cubic-bezier(0.645, 0.045, 0.355, 1); transition: transform 0.15s cubic-bezier(0.645, 0.045, 0.355, 1), background-color 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1); transition: transform 0.15s cubic-bezier(0.645, 0.045, 0.355, 1), background-color 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform 0.15s cubic-bezier(0.645, 0.045, 0.355, 1); } .hamburger--3dx-r .hamburger-inner::before, .hamburger--3dx-r .hamburger-inner::after { -webkit-transition: -webkit-transform 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1); transition: -webkit-transform 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1); transition: transform 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1); transition: transform 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1); } .hamburger--3dx-r.is-active .hamburger-inner { background-color: transparent !important; -webkit-transform: rotateY(-180deg); transform: rotateY(-180deg); } .hamburger--3dx-r.is-active .hamburger-inner::before { -webkit-transform: translate3d(0, 9px, 0) rotate(45deg); transform: translate3d(0, 9px, 0) rotate(45deg); } .hamburger--3dx-r.is-active .hamburger-inner::after { -webkit-transform: translate3d(0, -9px, 0) rotate(-45deg); transform: translate3d(0, -9px, 0) rotate(-45deg); } /* * 3DY */ .hamburger--3dy .hamburger-box { -webkit-perspective: 48px; perspective: 48px; } .hamburger--3dy .hamburger-inner { -webkit-transition: background-color 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform 0.15s cubic-bezier(0.645, 0.045, 0.355, 1); transition: background-color 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform 0.15s cubic-bezier(0.645, 0.045, 0.355, 1); transition: transform 0.15s cubic-bezier(0.645, 0.045, 0.355, 1), background-color 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1); transition: transform 0.15s cubic-bezier(0.645, 0.045, 0.355, 1), background-color 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform 0.15s cubic-bezier(0.645, 0.045, 0.355, 1); } .hamburger--3dy .hamburger-inner::before, .hamburger--3dy .hamburger-inner::after { -webkit-transition: -webkit-transform 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1); transition: -webkit-transform 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1); transition: transform 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1); transition: transform 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1); } .hamburger--3dy.is-active .hamburger-inner { background-color: transparent !important; -webkit-transform: rotateX(-180deg); transform: rotateX(-180deg); } .hamburger--3dy.is-active .hamburger-inner::before { -webkit-transform: translate3d(0, 9px, 0) rotate(45deg); transform: translate3d(0, 9px, 0) rotate(45deg); } .hamburger--3dy.is-active .hamburger-inner::after { -webkit-transform: translate3d(0, -9px, 0) rotate(-45deg); transform: translate3d(0, -9px, 0) rotate(-45deg); } /* * 3DY Reverse */ .hamburger--3dy-r .hamburger-box { -webkit-perspective: 48px; perspective: 48px; } .hamburger--3dy-r .hamburger-inner { -webkit-transition: background-color 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform 0.15s cubic-bezier(0.645, 0.045, 0.355, 1); transition: background-color 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform 0.15s cubic-bezier(0.645, 0.045, 0.355, 1); transition: transform 0.15s cubic-bezier(0.645, 0.045, 0.355, 1), background-color 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1); transition: transform 0.15s cubic-bezier(0.645, 0.045, 0.355, 1), background-color 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform 0.15s cubic-bezier(0.645, 0.045, 0.355, 1); } .hamburger--3dy-r .hamburger-inner::before, .hamburger--3dy-r .hamburger-inner::after { -webkit-transition: -webkit-transform 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1); transition: -webkit-transform 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1); transition: transform 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1); transition: transform 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1); } .hamburger--3dy-r.is-active .hamburger-inner { background-color: transparent !important; -webkit-transform: rotateX(180deg); transform: rotateX(180deg); } .hamburger--3dy-r.is-active .hamburger-inner::before { -webkit-transform: translate3d(0, 9px, 0) rotate(45deg); transform: translate3d(0, 9px, 0) rotate(45deg); } .hamburger--3dy-r.is-active .hamburger-inner::after { -webkit-transform: translate3d(0, -9px, 0) rotate(-45deg); transform: translate3d(0, -9px, 0) rotate(-45deg); } /* * 3DXY */ .hamburger--3dxy .hamburger-box { -webkit-perspective: 48px; perspective: 48px; } .hamburger--3dxy .hamburger-inner { -webkit-transition: background-color 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform 0.15s cubic-bezier(0.645, 0.045, 0.355, 1); transition: background-color 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform 0.15s cubic-bezier(0.645, 0.045, 0.355, 1); transition: transform 0.15s cubic-bezier(0.645, 0.045, 0.355, 1), background-color 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1); transition: transform 0.15s cubic-bezier(0.645, 0.045, 0.355, 1), background-color 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform 0.15s cubic-bezier(0.645, 0.045, 0.355, 1); } .hamburger--3dxy .hamburger-inner::before, .hamburger--3dxy .hamburger-inner::after { -webkit-transition: -webkit-transform 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1); transition: -webkit-transform 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1); transition: transform 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1); transition: transform 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1); } .hamburger--3dxy.is-active .hamburger-inner { background-color: transparent !important; -webkit-transform: rotateX(180deg) rotateY(180deg); transform: rotateX(180deg) rotateY(180deg); } .hamburger--3dxy.is-active .hamburger-inner::before { -webkit-transform: translate3d(0, 9px, 0) rotate(45deg); transform: translate3d(0, 9px, 0) rotate(45deg); } .hamburger--3dxy.is-active .hamburger-inner::after { -webkit-transform: translate3d(0, -9px, 0) rotate(-45deg); transform: translate3d(0, -9px, 0) rotate(-45deg); } /* * 3DXY Reverse */ .hamburger--3dxy-r .hamburger-box { -webkit-perspective: 48px; perspective: 48px; } .hamburger--3dxy-r .hamburger-inner { -webkit-transition: background-color 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform 0.15s cubic-bezier(0.645, 0.045, 0.355, 1); transition: background-color 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform 0.15s cubic-bezier(0.645, 0.045, 0.355, 1); transition: transform 0.15s cubic-bezier(0.645, 0.045, 0.355, 1), background-color 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1); transition: transform 0.15s cubic-bezier(0.645, 0.045, 0.355, 1), background-color 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform 0.15s cubic-bezier(0.645, 0.045, 0.355, 1); } .hamburger--3dxy-r .hamburger-inner::before, .hamburger--3dxy-r .hamburger-inner::after { -webkit-transition: -webkit-transform 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1); transition: -webkit-transform 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1); transition: transform 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1); transition: transform 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1); } .hamburger--3dxy-r.is-active .hamburger-inner { background-color: transparent !important; -webkit-transform: rotateX(180deg) rotateY(180deg) rotateZ(-180deg); transform: rotateX(180deg) rotateY(180deg) rotateZ(-180deg); } .hamburger--3dxy-r.is-active .hamburger-inner::before { -webkit-transform: translate3d(0, 9px, 0) rotate(45deg); transform: translate3d(0, 9px, 0) rotate(45deg); } .hamburger--3dxy-r.is-active .hamburger-inner::after { -webkit-transform: translate3d(0, -9px, 0) rotate(-45deg); transform: translate3d(0, -9px, 0) rotate(-45deg); } /* * Arrow */ .hamburger--arrow.is-active .hamburger-inner::before { -webkit-transform: translate3d(-4.8px, 0, 0) rotate(-45deg) scale(0.7, 1); transform: translate3d(-4.8px, 0, 0) rotate(-45deg) scale(0.7, 1); } .hamburger--arrow.is-active .hamburger-inner::after { -webkit-transform: translate3d(-4.8px, 0, 0) rotate(45deg) scale(0.7, 1); transform: translate3d(-4.8px, 0, 0) rotate(45deg) scale(0.7, 1); } /* * Arrow Right */ .hamburger--arrow-r.is-active .hamburger-inner::before { -webkit-transform: translate3d(4.8px, 0, 0) rotate(45deg) scale(0.7, 1); transform: translate3d(4.8px, 0, 0) rotate(45deg) scale(0.7, 1); } .hamburger--arrow-r.is-active .hamburger-inner::after { -webkit-transform: translate3d(4.8px, 0, 0) rotate(-45deg) scale(0.7, 1); transform: translate3d(4.8px, 0, 0) rotate(-45deg) scale(0.7, 1); } /* * Arrow Alt */ .hamburger--arrowalt .hamburger-inner::before { -webkit-transition: top 0.1s 0.1s ease, -webkit-transform 0.1s cubic-bezier(0.165, 0.84, 0.44, 1); transition: top 0.1s 0.1s ease, -webkit-transform 0.1s cubic-bezier(0.165, 0.84, 0.44, 1); transition: top 0.1s 0.1s ease, transform 0.1s cubic-bezier(0.165, 0.84, 0.44, 1); transition: top 0.1s 0.1s ease, transform 0.1s cubic-bezier(0.165, 0.84, 0.44, 1), -webkit-transform 0.1s cubic-bezier(0.165, 0.84, 0.44, 1); } .hamburger--arrowalt .hamburger-inner::after { -webkit-transition: bottom 0.1s 0.1s ease, -webkit-transform 0.1s cubic-bezier(0.165, 0.84, 0.44, 1); transition: bottom 0.1s 0.1s ease, -webkit-transform 0.1s cubic-bezier(0.165, 0.84, 0.44, 1); transition: bottom 0.1s 0.1s ease, transform 0.1s cubic-bezier(0.165, 0.84, 0.44, 1); transition: bottom 0.1s 0.1s ease, transform 0.1s cubic-bezier(0.165, 0.84, 0.44, 1), -webkit-transform 0.1s cubic-bezier(0.165, 0.84, 0.44, 1); } .hamburger--arrowalt.is-active .hamburger-inner::before { top: 0; -webkit-transform: translate3d(-4.8px, -6px, 0) rotate(-45deg) scale(0.7, 1); transform: translate3d(-4.8px, -6px, 0) rotate(-45deg) scale(0.7, 1); -webkit-transition: top 0.1s ease, -webkit-transform 0.1s 0.1s cubic-bezier(0.895, 0.03, 0.685, 0.22); transition: top 0.1s ease, -webkit-transform 0.1s 0.1s cubic-bezier(0.895, 0.03, 0.685, 0.22); transition: top 0.1s ease, transform 0.1s 0.1s cubic-bezier(0.895, 0.03, 0.685, 0.22); transition: top 0.1s ease, transform 0.1s 0.1s cubic-bezier(0.895, 0.03, 0.685, 0.22), -webkit-transform 0.1s 0.1s cubic-bezier(0.895, 0.03, 0.685, 0.22); } .hamburger--arrowalt.is-active .hamburger-inner::after { bottom: 0; -webkit-transform: translate3d(-4.8px, 6px, 0) rotate(45deg) scale(0.7, 1); transform: translate3d(-4.8px, 6px, 0) rotate(45deg) scale(0.7, 1); -webkit-transition: bottom 0.1s ease, -webkit-transform 0.1s 0.1s cubic-bezier(0.895, 0.03, 0.685, 0.22); transition: bottom 0.1s ease, -webkit-transform 0.1s 0.1s cubic-bezier(0.895, 0.03, 0.685, 0.22); transition: bottom 0.1s ease, transform 0.1s 0.1s cubic-bezier(0.895, 0.03, 0.685, 0.22); transition: bottom 0.1s ease, transform 0.1s 0.1s cubic-bezier(0.895, 0.03, 0.685, 0.22), -webkit-transform 0.1s 0.1s cubic-bezier(0.895, 0.03, 0.685, 0.22); } /* * Arrow Alt Right */ .hamburger--arrowalt-r .hamburger-inner::before { -webkit-transition: top 0.1s 0.1s ease, -webkit-transform 0.1s cubic-bezier(0.165, 0.84, 0.44, 1); transition: top 0.1s 0.1s ease, -webkit-transform 0.1s cubic-bezier(0.165, 0.84, 0.44, 1); transition: top 0.1s 0.1s ease, transform 0.1s cubic-bezier(0.165, 0.84, 0.44, 1); transition: top 0.1s 0.1s ease, transform 0.1s cubic-bezier(0.165, 0.84, 0.44, 1), -webkit-transform 0.1s cubic-bezier(0.165, 0.84, 0.44, 1); } .hamburger--arrowalt-r .hamburger-inner::after { -webkit-transition: bottom 0.1s 0.1s ease, -webkit-transform 0.1s cubic-bezier(0.165, 0.84, 0.44, 1); transition: bottom 0.1s 0.1s ease, -webkit-transform 0.1s cubic-bezier(0.165, 0.84, 0.44, 1); transition: bottom 0.1s 0.1s ease, transform 0.1s cubic-bezier(0.165, 0.84, 0.44, 1); transition: bottom 0.1s 0.1s ease, transform 0.1s cubic-bezier(0.165, 0.84, 0.44, 1), -webkit-transform 0.1s cubic-bezier(0.165, 0.84, 0.44, 1); } .hamburger--arrowalt-r.is-active .hamburger-inner::before { top: 0; -webkit-transform: translate3d(4.8px, -6px, 0) rotate(45deg) scale(0.7, 1); transform: translate3d(4.8px, -6px, 0) rotate(45deg) scale(0.7, 1); -webkit-transition: top 0.1s ease, -webkit-transform 0.1s 0.1s cubic-bezier(0.895, 0.03, 0.685, 0.22); transition: top 0.1s ease, -webkit-transform 0.1s 0.1s cubic-bezier(0.895, 0.03, 0.685, 0.22); transition: top 0.1s ease, transform 0.1s 0.1s cubic-bezier(0.895, 0.03, 0.685, 0.22); transition: top 0.1s ease, transform 0.1s 0.1s cubic-bezier(0.895, 0.03, 0.685, 0.22), -webkit-transform 0.1s 0.1s cubic-bezier(0.895, 0.03, 0.685, 0.22); } .hamburger--arrowalt-r.is-active .hamburger-inner::after { bottom: 0; -webkit-transform: translate3d(4.8px, 6px, 0) rotate(-45deg) scale(0.7, 1); transform: translate3d(4.8px, 6px, 0) rotate(-45deg) scale(0.7, 1); -webkit-transition: bottom 0.1s ease, -webkit-transform 0.1s 0.1s cubic-bezier(0.895, 0.03, 0.685, 0.22); transition: bottom 0.1s ease, -webkit-transform 0.1s 0.1s cubic-bezier(0.895, 0.03, 0.685, 0.22); transition: bottom 0.1s ease, transform 0.1s 0.1s cubic-bezier(0.895, 0.03, 0.685, 0.22); transition: bottom 0.1s ease, transform 0.1s 0.1s cubic-bezier(0.895, 0.03, 0.685, 0.22), -webkit-transform 0.1s 0.1s cubic-bezier(0.895, 0.03, 0.685, 0.22); } /* * Arrow Turn */ .hamburger--arrowturn.is-active .hamburger-inner { -webkit-transform: rotate(-180deg); transform: rotate(-180deg); } .hamburger--arrowturn.is-active .hamburger-inner::before { -webkit-transform: translate3d(8px, 0, 0) rotate(45deg) scale(0.7, 1); transform: translate3d(8px, 0, 0) rotate(45deg) scale(0.7, 1); } .hamburger--arrowturn.is-active .hamburger-inner::after { -webkit-transform: translate3d(8px, 0, 0) rotate(-45deg) scale(0.7, 1); transform: translate3d(8px, 0, 0) rotate(-45deg) scale(0.7, 1); } /* * Arrow Turn Right */ .hamburger--arrowturn-r.is-active .hamburger-inner { -webkit-transform: rotate(-180deg); transform: rotate(-180deg); } .hamburger--arrowturn-r.is-active .hamburger-inner::before { -webkit-transform: translate3d(-8px, 0, 0) rotate(-45deg) scale(0.7, 1); transform: translate3d(-8px, 0, 0) rotate(-45deg) scale(0.7, 1); } .hamburger--arrowturn-r.is-active .hamburger-inner::after { -webkit-transform: translate3d(-8px, 0, 0) rotate(45deg) scale(0.7, 1); transform: translate3d(-8px, 0, 0) rotate(45deg) scale(0.7, 1); } /* * Boring */ .hamburger--boring .hamburger-inner, .hamburger--boring .hamburger-inner::before, .hamburger--boring .hamburger-inner::after { -webkit-transition-property: none; transition-property: none; } .hamburger--boring.is-active .hamburger-inner { -webkit-transform: rotate(45deg); transform: rotate(45deg); } .hamburger--boring.is-active .hamburger-inner::before { top: 0; opacity: 0; } .hamburger--boring.is-active .hamburger-inner::after { bottom: 0; -webkit-transform: rotate(-90deg); transform: rotate(-90deg); } /* * Collapse */ .hamburger--collapse .hamburger-inner { top: auto; bottom: 0; -webkit-transition-duration: 0.13s; transition-duration: 0.13s; -webkit-transition-delay: 0.13s; transition-delay: 0.13s; -webkit-transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } .hamburger--collapse .hamburger-inner::after { top: -18px; -webkit-transition: top 0.2s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), opacity 0.1s linear; transition: top 0.2s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), opacity 0.1s linear; } .hamburger--collapse .hamburger-inner::before { -webkit-transition: top 0.12s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), -webkit-transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19); transition: top 0.12s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), -webkit-transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19); transition: top 0.12s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19); transition: top 0.12s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19), -webkit-transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19); } .hamburger--collapse.is-active .hamburger-inner { -webkit-transform: translate3d(0, -9px, 0) rotate(-45deg); transform: translate3d(0, -9px, 0) rotate(-45deg); -webkit-transition-delay: 0.22s; transition-delay: 0.22s; -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } .hamburger--collapse.is-active .hamburger-inner::after { top: 0; opacity: 0; -webkit-transition: top 0.2s cubic-bezier(0.33333, 0, 0.66667, 0.33333), opacity 0.1s 0.22s linear; transition: top 0.2s cubic-bezier(0.33333, 0, 0.66667, 0.33333), opacity 0.1s 0.22s linear; } .hamburger--collapse.is-active .hamburger-inner::before { top: 0; -webkit-transform: rotate(-90deg); transform: rotate(-90deg); -webkit-transition: top 0.1s 0.16s cubic-bezier(0.33333, 0, 0.66667, 0.33333), -webkit-transform 0.13s 0.25s cubic-bezier(0.215, 0.61, 0.355, 1); transition: top 0.1s 0.16s cubic-bezier(0.33333, 0, 0.66667, 0.33333), -webkit-transform 0.13s 0.25s cubic-bezier(0.215, 0.61, 0.355, 1); transition: top 0.1s 0.16s cubic-bezier(0.33333, 0, 0.66667, 0.33333), transform 0.13s 0.25s cubic-bezier(0.215, 0.61, 0.355, 1); transition: top 0.1s 0.16s cubic-bezier(0.33333, 0, 0.66667, 0.33333), transform 0.13s 0.25s cubic-bezier(0.215, 0.61, 0.355, 1), -webkit-transform 0.13s 0.25s cubic-bezier(0.215, 0.61, 0.355, 1); } /* * Collapse Reverse */ .hamburger--collapse-r .hamburger-inner { top: auto; bottom: 0; -webkit-transition-duration: 0.13s; transition-duration: 0.13s; -webkit-transition-delay: 0.13s; transition-delay: 0.13s; -webkit-transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } .hamburger--collapse-r .hamburger-inner::after { top: -18px; -webkit-transition: top 0.2s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), opacity 0.1s linear; transition: top 0.2s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), opacity 0.1s linear; } .hamburger--collapse-r .hamburger-inner::before { -webkit-transition: top 0.12s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), -webkit-transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19); transition: top 0.12s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), -webkit-transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19); transition: top 0.12s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19); transition: top 0.12s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19), -webkit-transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19); } .hamburger--collapse-r.is-active .hamburger-inner { -webkit-transform: translate3d(0, -9px, 0) rotate(45deg); transform: translate3d(0, -9px, 0) rotate(45deg); -webkit-transition-delay: 0.22s; transition-delay: 0.22s; -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } .hamburger--collapse-r.is-active .hamburger-inner::after { top: 0; opacity: 0; -webkit-transition: top 0.2s cubic-bezier(0.33333, 0, 0.66667, 0.33333), opacity 0.1s 0.22s linear; transition: top 0.2s cubic-bezier(0.33333, 0, 0.66667, 0.33333), opacity 0.1s 0.22s linear; } .hamburger--collapse-r.is-active .hamburger-inner::before { top: 0; -webkit-transform: rotate(90deg); transform: rotate(90deg); -webkit-transition: top 0.1s 0.16s cubic-bezier(0.33333, 0, 0.66667, 0.33333), -webkit-transform 0.13s 0.25s cubic-bezier(0.215, 0.61, 0.355, 1); transition: top 0.1s 0.16s cubic-bezier(0.33333, 0, 0.66667, 0.33333), -webkit-transform 0.13s 0.25s cubic-bezier(0.215, 0.61, 0.355, 1); transition: top 0.1s 0.16s cubic-bezier(0.33333, 0, 0.66667, 0.33333), transform 0.13s 0.25s cubic-bezier(0.215, 0.61, 0.355, 1); transition: top 0.1s 0.16s cubic-bezier(0.33333, 0, 0.66667, 0.33333), transform 0.13s 0.25s cubic-bezier(0.215, 0.61, 0.355, 1), -webkit-transform 0.13s 0.25s cubic-bezier(0.215, 0.61, 0.355, 1); } /* * Elastic */ .hamburger--elastic .hamburger-inner { top: 1.5px; -webkit-transition-duration: 0.275s; transition-duration: 0.275s; -webkit-transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55); transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55); } .hamburger--elastic .hamburger-inner::before { top: 9px; -webkit-transition: opacity 0.125s 0.275s ease; transition: opacity 0.125s 0.275s ease; } .hamburger--elastic .hamburger-inner::after { top: 18px; -webkit-transition: -webkit-transform 0.275s cubic-bezier(0.68, -0.55, 0.265, 1.55); transition: -webkit-transform 0.275s cubic-bezier(0.68, -0.55, 0.265, 1.55); transition: transform 0.275s cubic-bezier(0.68, -0.55, 0.265, 1.55); transition: transform 0.275s cubic-bezier(0.68, -0.55, 0.265, 1.55), -webkit-transform 0.275s cubic-bezier(0.68, -0.55, 0.265, 1.55); } .hamburger--elastic.is-active .hamburger-inner { -webkit-transform: translate3d(0, 9px, 0) rotate(135deg); transform: translate3d(0, 9px, 0) rotate(135deg); -webkit-transition-delay: 0.075s; transition-delay: 0.075s; } .hamburger--elastic.is-active .hamburger-inner::before { -webkit-transition-delay: 0s; transition-delay: 0s; opacity: 0; } .hamburger--elastic.is-active .hamburger-inner::after { -webkit-transform: translate3d(0, -18px, 0) rotate(-270deg); transform: translate3d(0, -18px, 0) rotate(-270deg); -webkit-transition-delay: 0.075s; transition-delay: 0.075s; } /* * Elastic Reverse */ .hamburger--elastic-r .hamburger-inner { top: 1.5px; -webkit-transition-duration: 0.275s; transition-duration: 0.275s; -webkit-transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55); transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55); } .hamburger--elastic-r .hamburger-inner::before { top: 9px; -webkit-transition: opacity 0.125s 0.275s ease; transition: opacity 0.125s 0.275s ease; } .hamburger--elastic-r .hamburger-inner::after { top: 18px; -webkit-transition: -webkit-transform 0.275s cubic-bezier(0.68, -0.55, 0.265, 1.55); transition: -webkit-transform 0.275s cubic-bezier(0.68, -0.55, 0.265, 1.55); transition: transform 0.275s cubic-bezier(0.68, -0.55, 0.265, 1.55); transition: transform 0.275s cubic-bezier(0.68, -0.55, 0.265, 1.55), -webkit-transform 0.275s cubic-bezier(0.68, -0.55, 0.265, 1.55); } .hamburger--elastic-r.is-active .hamburger-inner { -webkit-transform: translate3d(0, 9px, 0) rotate(-135deg); transform: translate3d(0, 9px, 0) rotate(-135deg); -webkit-transition-delay: 0.075s; transition-delay: 0.075s; } .hamburger--elastic-r.is-active .hamburger-inner::before { -webkit-transition-delay: 0s; transition-delay: 0s; opacity: 0; } .hamburger--elastic-r.is-active .hamburger-inner::after { -webkit-transform: translate3d(0, -18px, 0) rotate(270deg); transform: translate3d(0, -18px, 0) rotate(270deg); -webkit-transition-delay: 0.075s; transition-delay: 0.075s; } /* * Emphatic */ .hamburger--emphatic { overflow: hidden; } .hamburger--emphatic .hamburger-inner { -webkit-transition: background-color 0.125s 0.175s ease-in; transition: background-color 0.125s 0.175s ease-in; } .hamburger--emphatic .hamburger-inner::before { left: 0; -webkit-transition: top 0.05s 0.125s linear, left 0.125s 0.175s ease-in, -webkit-transform 0.125s cubic-bezier(0.6, 0.04, 0.98, 0.335); transition: top 0.05s 0.125s linear, left 0.125s 0.175s ease-in, -webkit-transform 0.125s cubic-bezier(0.6, 0.04, 0.98, 0.335); transition: transform 0.125s cubic-bezier(0.6, 0.04, 0.98, 0.335), top 0.05s 0.125s linear, left 0.125s 0.175s ease-in; transition: transform 0.125s cubic-bezier(0.6, 0.04, 0.98, 0.335), top 0.05s 0.125s linear, left 0.125s 0.175s ease-in, -webkit-transform 0.125s cubic-bezier(0.6, 0.04, 0.98, 0.335); } .hamburger--emphatic .hamburger-inner::after { top: 9px; right: 0; -webkit-transition: top 0.05s 0.125s linear, right 0.125s 0.175s ease-in, -webkit-transform 0.125s cubic-bezier(0.6, 0.04, 0.98, 0.335); transition: top 0.05s 0.125s linear, right 0.125s 0.175s ease-in, -webkit-transform 0.125s cubic-bezier(0.6, 0.04, 0.98, 0.335); transition: transform 0.125s cubic-bezier(0.6, 0.04, 0.98, 0.335), top 0.05s 0.125s linear, right 0.125s 0.175s ease-in; transition: transform 0.125s cubic-bezier(0.6, 0.04, 0.98, 0.335), top 0.05s 0.125s linear, right 0.125s 0.175s ease-in, -webkit-transform 0.125s cubic-bezier(0.6, 0.04, 0.98, 0.335); } .hamburger--emphatic.is-active .hamburger-inner { -webkit-transition-delay: 0s; transition-delay: 0s; -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out; background-color: transparent !important; } .hamburger--emphatic.is-active .hamburger-inner::before { left: -48px; top: -48px; -webkit-transform: translate3d(48px, 48px, 0) rotate(45deg); transform: translate3d(48px, 48px, 0) rotate(45deg); -webkit-transition: left 0.125s ease-out, top 0.05s 0.125s linear, -webkit-transform 0.125s 0.175s cubic-bezier(0.075, 0.82, 0.165, 1); transition: left 0.125s ease-out, top 0.05s 0.125s linear, -webkit-transform 0.125s 0.175s cubic-bezier(0.075, 0.82, 0.165, 1); transition: left 0.125s ease-out, top 0.05s 0.125s linear, transform 0.125s 0.175s cubic-bezier(0.075, 0.82, 0.165, 1); transition: left 0.125s ease-out, top 0.05s 0.125s linear, transform 0.125s 0.175s cubic-bezier(0.075, 0.82, 0.165, 1), -webkit-transform 0.125s 0.175s cubic-bezier(0.075, 0.82, 0.165, 1); } .hamburger--emphatic.is-active .hamburger-inner::after { right: -48px; top: -48px; -webkit-transform: translate3d(-48px, 48px, 0) rotate(-45deg); transform: translate3d(-48px, 48px, 0) rotate(-45deg); -webkit-transition: right 0.125s ease-out, top 0.05s 0.125s linear, -webkit-transform 0.125s 0.175s cubic-bezier(0.075, 0.82, 0.165, 1); transition: right 0.125s ease-out, top 0.05s 0.125s linear, -webkit-transform 0.125s 0.175s cubic-bezier(0.075, 0.82, 0.165, 1); transition: right 0.125s ease-out, top 0.05s 0.125s linear, transform 0.125s 0.175s cubic-bezier(0.075, 0.82, 0.165, 1); transition: right 0.125s ease-out, top 0.05s 0.125s linear, transform 0.125s 0.175s cubic-bezier(0.075, 0.82, 0.165, 1), -webkit-transform 0.125s 0.175s cubic-bezier(0.075, 0.82, 0.165, 1); } /* * Emphatic Reverse */ .hamburger--emphatic-r { overflow: hidden; } .hamburger--emphatic-r .hamburger-inner { -webkit-transition: background-color 0.125s 0.175s ease-in; transition: background-color 0.125s 0.175s ease-in; } .hamburger--emphatic-r .hamburger-inner::before { left: 0; -webkit-transition: top 0.05s 0.125s linear, left 0.125s 0.175s ease-in, -webkit-transform 0.125s cubic-bezier(0.6, 0.04, 0.98, 0.335); transition: top 0.05s 0.125s linear, left 0.125s 0.175s ease-in, -webkit-transform 0.125s cubic-bezier(0.6, 0.04, 0.98, 0.335); transition: transform 0.125s cubic-bezier(0.6, 0.04, 0.98, 0.335), top 0.05s 0.125s linear, left 0.125s 0.175s ease-in; transition: transform 0.125s cubic-bezier(0.6, 0.04, 0.98, 0.335), top 0.05s 0.125s linear, left 0.125s 0.175s ease-in, -webkit-transform 0.125s cubic-bezier(0.6, 0.04, 0.98, 0.335); } .hamburger--emphatic-r .hamburger-inner::after { top: 9px; right: 0; -webkit-transition: top 0.05s 0.125s linear, right 0.125s 0.175s ease-in, -webkit-transform 0.125s cubic-bezier(0.6, 0.04, 0.98, 0.335); transition: top 0.05s 0.125s linear, right 0.125s 0.175s ease-in, -webkit-transform 0.125s cubic-bezier(0.6, 0.04, 0.98, 0.335); transition: transform 0.125s cubic-bezier(0.6, 0.04, 0.98, 0.335), top 0.05s 0.125s linear, right 0.125s 0.175s ease-in; transition: transform 0.125s cubic-bezier(0.6, 0.04, 0.98, 0.335), top 0.05s 0.125s linear, right 0.125s 0.175s ease-in, -webkit-transform 0.125s cubic-bezier(0.6, 0.04, 0.98, 0.335); } .hamburger--emphatic-r.is-active .hamburger-inner { -webkit-transition-delay: 0s; transition-delay: 0s; -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out; background-color: transparent !important; } .hamburger--emphatic-r.is-active .hamburger-inner::before { left: -48px; top: 48px; -webkit-transform: translate3d(48px, -48px, 0) rotate(-45deg); transform: translate3d(48px, -48px, 0) rotate(-45deg); -webkit-transition: left 0.125s ease-out, top 0.05s 0.125s linear, -webkit-transform 0.125s 0.175s cubic-bezier(0.075, 0.82, 0.165, 1); transition: left 0.125s ease-out, top 0.05s 0.125s linear, -webkit-transform 0.125s 0.175s cubic-bezier(0.075, 0.82, 0.165, 1); transition: left 0.125s ease-out, top 0.05s 0.125s linear, transform 0.125s 0.175s cubic-bezier(0.075, 0.82, 0.165, 1); transition: left 0.125s ease-out, top 0.05s 0.125s linear, transform 0.125s 0.175s cubic-bezier(0.075, 0.82, 0.165, 1), -webkit-transform 0.125s 0.175s cubic-bezier(0.075, 0.82, 0.165, 1); } .hamburger--emphatic-r.is-active .hamburger-inner::after { right: -48px; top: 48px; -webkit-transform: translate3d(-48px, -48px, 0) rotate(45deg); transform: translate3d(-48px, -48px, 0) rotate(45deg); -webkit-transition: right 0.125s ease-out, top 0.05s 0.125s linear, -webkit-transform 0.125s 0.175s cubic-bezier(0.075, 0.82, 0.165, 1); transition: right 0.125s ease-out, top 0.05s 0.125s linear, -webkit-transform 0.125s 0.175s cubic-bezier(0.075, 0.82, 0.165, 1); transition: right 0.125s ease-out, top 0.05s 0.125s linear, transform 0.125s 0.175s cubic-bezier(0.075, 0.82, 0.165, 1); transition: right 0.125s ease-out, top 0.05s 0.125s linear, transform 0.125s 0.175s cubic-bezier(0.075, 0.82, 0.165, 1), -webkit-transform 0.125s 0.175s cubic-bezier(0.075, 0.82, 0.165, 1); } /* * Minus */ .hamburger--minus .hamburger-inner::before, .hamburger--minus .hamburger-inner::after { -webkit-transition: bottom 0.08s 0s ease-out, top 0.08s 0s ease-out, opacity 0s linear; transition: bottom 0.08s 0s ease-out, top 0.08s 0s ease-out, opacity 0s linear; } .hamburger--minus.is-active .hamburger-inner::before, .hamburger--minus.is-active .hamburger-inner::after { opacity: 0; -webkit-transition: bottom 0.08s ease-out, top 0.08s ease-out, opacity 0s 0.08s linear; transition: bottom 0.08s ease-out, top 0.08s ease-out, opacity 0s 0.08s linear; } .hamburger--minus.is-active .hamburger-inner::before { top: 0; } .hamburger--minus.is-active .hamburger-inner::after { bottom: 0; } /* * Slider */ .hamburger--slider .hamburger-inner { top: 1.5px; } .hamburger--slider .hamburger-inner::before { top: 9px; -webkit-transition-property: opacity, -webkit-transform; transition-property: opacity, -webkit-transform; transition-property: transform, opacity; transition-property: transform, opacity, -webkit-transform; -webkit-transition-timing-function: ease; transition-timing-function: ease; -webkit-transition-duration: 0.15s; transition-duration: 0.15s; } .hamburger--slider .hamburger-inner::after { top: 18px; } .hamburger--slider.is-active .hamburger-inner { -webkit-transform: translate3d(0, 9px, 0) rotate(45deg); transform: translate3d(0, 9px, 0) rotate(45deg); } .hamburger--slider.is-active .hamburger-inner::before { -webkit-transform: rotate(-45deg) translate3d(-3.42857px, -6px, 0); transform: rotate(-45deg) translate3d(-3.42857px, -6px, 0); opacity: 0; } .hamburger--slider.is-active .hamburger-inner::after { -webkit-transform: translate3d(0, -18px, 0) rotate(-90deg); transform: translate3d(0, -18px, 0) rotate(-90deg); } /* * Slider Reverse */ .hamburger--slider-r .hamburger-inner { top: 1.5px; } .hamburger--slider-r .hamburger-inner::before { top: 9px; -webkit-transition-property: opacity, -webkit-transform; transition-property: opacity, -webkit-transform; transition-property: transform, opacity; transition-property: transform, opacity, -webkit-transform; -webkit-transition-timing-function: ease; transition-timing-function: ease; -webkit-transition-duration: 0.15s; transition-duration: 0.15s; } .hamburger--slider-r .hamburger-inner::after { top: 18px; } .hamburger--slider-r.is-active .hamburger-inner { -webkit-transform: translate3d(0, 9px, 0) rotate(-45deg); transform: translate3d(0, 9px, 0) rotate(-45deg); } .hamburger--slider-r.is-active .hamburger-inner::before { -webkit-transform: rotate(45deg) translate3d(3.42857px, -6px, 0); transform: rotate(45deg) translate3d(3.42857px, -6px, 0); opacity: 0; } .hamburger--slider-r.is-active .hamburger-inner::after { -webkit-transform: translate3d(0, -18px, 0) rotate(90deg); transform: translate3d(0, -18px, 0) rotate(90deg); } /* * Spin */ .hamburger--spin .hamburger-inner { -webkit-transition-duration: 0.22s; transition-duration: 0.22s; -webkit-transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } .hamburger--spin .hamburger-inner::before { -webkit-transition: top 0.1s 0.25s ease-in, opacity 0.1s ease-in; transition: top 0.1s 0.25s ease-in, opacity 0.1s ease-in; } .hamburger--spin .hamburger-inner::after { -webkit-transition: bottom 0.1s 0.25s ease-in, -webkit-transform 0.22s cubic-bezier(0.55, 0.055, 0.675, 0.19); transition: bottom 0.1s 0.25s ease-in, -webkit-transform 0.22s cubic-bezier(0.55, 0.055, 0.675, 0.19); transition: bottom 0.1s 0.25s ease-in, transform 0.22s cubic-bezier(0.55, 0.055, 0.675, 0.19); transition: bottom 0.1s 0.25s ease-in, transform 0.22s cubic-bezier(0.55, 0.055, 0.675, 0.19), -webkit-transform 0.22s cubic-bezier(0.55, 0.055, 0.675, 0.19); } .hamburger--spin.is-active .hamburger-inner { -webkit-transform: rotate(225deg); transform: rotate(225deg); -webkit-transition-delay: 0.12s; transition-delay: 0.12s; -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } .hamburger--spin.is-active .hamburger-inner::before { top: 0; opacity: 0; -webkit-transition: top 0.1s ease-out, opacity 0.1s 0.12s ease-out; transition: top 0.1s ease-out, opacity 0.1s 0.12s ease-out; } .hamburger--spin.is-active .hamburger-inner::after { bottom: 0; -webkit-transform: rotate(-90deg); transform: rotate(-90deg); -webkit-transition: bottom 0.1s ease-out, -webkit-transform 0.22s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1); transition: bottom 0.1s ease-out, -webkit-transform 0.22s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1); transition: bottom 0.1s ease-out, transform 0.22s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1); transition: bottom 0.1s ease-out, transform 0.22s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1), -webkit-transform 0.22s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1); } /* * Spin Reverse */ .hamburger--spin-r .hamburger-inner { -webkit-transition-duration: 0.22s; transition-duration: 0.22s; -webkit-transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } .hamburger--spin-r .hamburger-inner::before { -webkit-transition: top 0.1s 0.25s ease-in, opacity 0.1s ease-in; transition: top 0.1s 0.25s ease-in, opacity 0.1s ease-in; } .hamburger--spin-r .hamburger-inner::after { -webkit-transition: bottom 0.1s 0.25s ease-in, -webkit-transform 0.22s cubic-bezier(0.55, 0.055, 0.675, 0.19); transition: bottom 0.1s 0.25s ease-in, -webkit-transform 0.22s cubic-bezier(0.55, 0.055, 0.675, 0.19); transition: bottom 0.1s 0.25s ease-in, transform 0.22s cubic-bezier(0.55, 0.055, 0.675, 0.19); transition: bottom 0.1s 0.25s ease-in, transform 0.22s cubic-bezier(0.55, 0.055, 0.675, 0.19), -webkit-transform 0.22s cubic-bezier(0.55, 0.055, 0.675, 0.19); } .hamburger--spin-r.is-active .hamburger-inner { -webkit-transform: rotate(-225deg); transform: rotate(-225deg); -webkit-transition-delay: 0.12s; transition-delay: 0.12s; -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } .hamburger--spin-r.is-active .hamburger-inner::before { top: 0; opacity: 0; -webkit-transition: top 0.1s ease-out, opacity 0.1s 0.12s ease-out; transition: top 0.1s ease-out, opacity 0.1s 0.12s ease-out; } .hamburger--spin-r.is-active .hamburger-inner::after { bottom: 0; -webkit-transform: rotate(90deg); transform: rotate(90deg); -webkit-transition: bottom 0.1s ease-out, -webkit-transform 0.22s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1); transition: bottom 0.1s ease-out, -webkit-transform 0.22s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1); transition: bottom 0.1s ease-out, transform 0.22s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1); transition: bottom 0.1s ease-out, transform 0.22s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1), -webkit-transform 0.22s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1); } /* * Spring */ .hamburger--spring .hamburger-inner { top: 1.5px; -webkit-transition: background-color 0s 0.13s linear; transition: background-color 0s 0.13s linear; } .hamburger--spring .hamburger-inner::before { top: 9px; -webkit-transition: top 0.1s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), -webkit-transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19); transition: top 0.1s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), -webkit-transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19); transition: top 0.1s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19); transition: top 0.1s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19), -webkit-transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19); } .hamburger--spring .hamburger-inner::after { top: 18px; -webkit-transition: top 0.2s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), -webkit-transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19); transition: top 0.2s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), -webkit-transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19); transition: top 0.2s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19); transition: top 0.2s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19), -webkit-transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19); } .hamburger--spring.is-active .hamburger-inner { -webkit-transition-delay: 0.22s; transition-delay: 0.22s; background-color: transparent !important; } .hamburger--spring.is-active .hamburger-inner::before { top: 0; -webkit-transition: top 0.1s 0.15s cubic-bezier(0.33333, 0, 0.66667, 0.33333), -webkit-transform 0.13s 0.22s cubic-bezier(0.215, 0.61, 0.355, 1); transition: top 0.1s 0.15s cubic-bezier(0.33333, 0, 0.66667, 0.33333), -webkit-transform 0.13s 0.22s cubic-bezier(0.215, 0.61, 0.355, 1); transition: top 0.1s 0.15s cubic-bezier(0.33333, 0, 0.66667, 0.33333), transform 0.13s 0.22s cubic-bezier(0.215, 0.61, 0.355, 1); transition: top 0.1s 0.15s cubic-bezier(0.33333, 0, 0.66667, 0.33333), transform 0.13s 0.22s cubic-bezier(0.215, 0.61, 0.355, 1), -webkit-transform 0.13s 0.22s cubic-bezier(0.215, 0.61, 0.355, 1); -webkit-transform: translate3d(0, 9px, 0) rotate(45deg); transform: translate3d(0, 9px, 0) rotate(45deg); } .hamburger--spring.is-active .hamburger-inner::after { top: 0; -webkit-transition: top 0.2s cubic-bezier(0.33333, 0, 0.66667, 0.33333), -webkit-transform 0.13s 0.22s cubic-bezier(0.215, 0.61, 0.355, 1); transition: top 0.2s cubic-bezier(0.33333, 0, 0.66667, 0.33333), -webkit-transform 0.13s 0.22s cubic-bezier(0.215, 0.61, 0.355, 1); transition: top 0.2s cubic-bezier(0.33333, 0, 0.66667, 0.33333), transform 0.13s 0.22s cubic-bezier(0.215, 0.61, 0.355, 1); transition: top 0.2s cubic-bezier(0.33333, 0, 0.66667, 0.33333), transform 0.13s 0.22s cubic-bezier(0.215, 0.61, 0.355, 1), -webkit-transform 0.13s 0.22s cubic-bezier(0.215, 0.61, 0.355, 1); -webkit-transform: translate3d(0, 9px, 0) rotate(-45deg); transform: translate3d(0, 9px, 0) rotate(-45deg); } /* * Spring Reverse */ .hamburger--spring-r .hamburger-inner { top: auto; bottom: 0; -webkit-transition-duration: 0.13s; transition-duration: 0.13s; -webkit-transition-delay: 0s; transition-delay: 0s; -webkit-transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } .hamburger--spring-r .hamburger-inner::after { top: -18px; -webkit-transition: top 0.2s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), opacity 0s linear; transition: top 0.2s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), opacity 0s linear; } .hamburger--spring-r .hamburger-inner::before { -webkit-transition: top 0.1s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), -webkit-transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19); transition: top 0.1s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), -webkit-transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19); transition: top 0.1s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19); transition: top 0.1s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19), -webkit-transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19); } .hamburger--spring-r.is-active .hamburger-inner { -webkit-transform: translate3d(0, -9px, 0) rotate(-45deg); transform: translate3d(0, -9px, 0) rotate(-45deg); -webkit-transition-delay: 0.22s; transition-delay: 0.22s; -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } .hamburger--spring-r.is-active .hamburger-inner::after { top: 0; opacity: 0; -webkit-transition: top 0.2s cubic-bezier(0.33333, 0, 0.66667, 0.33333), opacity 0s 0.22s linear; transition: top 0.2s cubic-bezier(0.33333, 0, 0.66667, 0.33333), opacity 0s 0.22s linear; } .hamburger--spring-r.is-active .hamburger-inner::before { top: 0; -webkit-transform: rotate(90deg); transform: rotate(90deg); -webkit-transition: top 0.1s 0.15s cubic-bezier(0.33333, 0, 0.66667, 0.33333), -webkit-transform 0.13s 0.22s cubic-bezier(0.215, 0.61, 0.355, 1); transition: top 0.1s 0.15s cubic-bezier(0.33333, 0, 0.66667, 0.33333), -webkit-transform 0.13s 0.22s cubic-bezier(0.215, 0.61, 0.355, 1); transition: top 0.1s 0.15s cubic-bezier(0.33333, 0, 0.66667, 0.33333), transform 0.13s 0.22s cubic-bezier(0.215, 0.61, 0.355, 1); transition: top 0.1s 0.15s cubic-bezier(0.33333, 0, 0.66667, 0.33333), transform 0.13s 0.22s cubic-bezier(0.215, 0.61, 0.355, 1), -webkit-transform 0.13s 0.22s cubic-bezier(0.215, 0.61, 0.355, 1); } /* * Stand */ .hamburger--stand .hamburger-inner { -webkit-transition: background-color 0s 0.075s linear, -webkit-transform 0.075s 0.15s cubic-bezier(0.55, 0.055, 0.675, 0.19); transition: background-color 0s 0.075s linear, -webkit-transform 0.075s 0.15s cubic-bezier(0.55, 0.055, 0.675, 0.19); transition: transform 0.075s 0.15s cubic-bezier(0.55, 0.055, 0.675, 0.19), background-color 0s 0.075s linear; transition: transform 0.075s 0.15s cubic-bezier(0.55, 0.055, 0.675, 0.19), background-color 0s 0.075s linear, -webkit-transform 0.075s 0.15s cubic-bezier(0.55, 0.055, 0.675, 0.19); } .hamburger--stand .hamburger-inner::before { -webkit-transition: top 0.075s 0.075s ease-in, -webkit-transform 0.075s 0s cubic-bezier(0.55, 0.055, 0.675, 0.19); transition: top 0.075s 0.075s ease-in, -webkit-transform 0.075s 0s cubic-bezier(0.55, 0.055, 0.675, 0.19); transition: top 0.075s 0.075s ease-in, transform 0.075s 0s cubic-bezier(0.55, 0.055, 0.675, 0.19); transition: top 0.075s 0.075s ease-in, transform 0.075s 0s cubic-bezier(0.55, 0.055, 0.675, 0.19), -webkit-transform 0.075s 0s cubic-bezier(0.55, 0.055, 0.675, 0.19); } .hamburger--stand .hamburger-inner::after { -webkit-transition: bottom 0.075s 0.075s ease-in, -webkit-transform 0.075s 0s cubic-bezier(0.55, 0.055, 0.675, 0.19); transition: bottom 0.075s 0.075s ease-in, -webkit-transform 0.075s 0s cubic-bezier(0.55, 0.055, 0.675, 0.19); transition: bottom 0.075s 0.075s ease-in, transform 0.075s 0s cubic-bezier(0.55, 0.055, 0.675, 0.19); transition: bottom 0.075s 0.075s ease-in, transform 0.075s 0s cubic-bezier(0.55, 0.055, 0.675, 0.19), -webkit-transform 0.075s 0s cubic-bezier(0.55, 0.055, 0.675, 0.19); } .hamburger--stand.is-active .hamburger-inner { -webkit-transform: rotate(90deg); transform: rotate(90deg); background-color: transparent !important; -webkit-transition: background-color 0s 0.15s linear, -webkit-transform 0.075s 0s cubic-bezier(0.215, 0.61, 0.355, 1); transition: background-color 0s 0.15s linear, -webkit-transform 0.075s 0s cubic-bezier(0.215, 0.61, 0.355, 1); transition: transform 0.075s 0s cubic-bezier(0.215, 0.61, 0.355, 1), background-color 0s 0.15s linear; transition: transform 0.075s 0s cubic-bezier(0.215, 0.61, 0.355, 1), background-color 0s 0.15s linear, -webkit-transform 0.075s 0s cubic-bezier(0.215, 0.61, 0.355, 1); } .hamburger--stand.is-active .hamburger-inner::before { top: 0; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); -webkit-transition: top 0.075s 0.1s ease-out, -webkit-transform 0.075s 0.15s cubic-bezier(0.215, 0.61, 0.355, 1); transition: top 0.075s 0.1s ease-out, -webkit-transform 0.075s 0.15s cubic-bezier(0.215, 0.61, 0.355, 1); transition: top 0.075s 0.1s ease-out, transform 0.075s 0.15s cubic-bezier(0.215, 0.61, 0.355, 1); transition: top 0.075s 0.1s ease-out, transform 0.075s 0.15s cubic-bezier(0.215, 0.61, 0.355, 1), -webkit-transform 0.075s 0.15s cubic-bezier(0.215, 0.61, 0.355, 1); } .hamburger--stand.is-active .hamburger-inner::after { bottom: 0; -webkit-transform: rotate(45deg); transform: rotate(45deg); -webkit-transition: bottom 0.075s 0.1s ease-out, -webkit-transform 0.075s 0.15s cubic-bezier(0.215, 0.61, 0.355, 1); transition: bottom 0.075s 0.1s ease-out, -webkit-transform 0.075s 0.15s cubic-bezier(0.215, 0.61, 0.355, 1); transition: bottom 0.075s 0.1s ease-out, transform 0.075s 0.15s cubic-bezier(0.215, 0.61, 0.355, 1); transition: bottom 0.075s 0.1s ease-out, transform 0.075s 0.15s cubic-bezier(0.215, 0.61, 0.355, 1), -webkit-transform 0.075s 0.15s cubic-bezier(0.215, 0.61, 0.355, 1); } /* * Stand Reverse */ .hamburger--stand-r .hamburger-inner { -webkit-transition: background-color 0s 0.075s linear, -webkit-transform 0.075s 0.15s cubic-bezier(0.55, 0.055, 0.675, 0.19); transition: background-color 0s 0.075s linear, -webkit-transform 0.075s 0.15s cubic-bezier(0.55, 0.055, 0.675, 0.19); transition: transform 0.075s 0.15s cubic-bezier(0.55, 0.055, 0.675, 0.19), background-color 0s 0.075s linear; transition: transform 0.075s 0.15s cubic-bezier(0.55, 0.055, 0.675, 0.19), background-color 0s 0.075s linear, -webkit-transform 0.075s 0.15s cubic-bezier(0.55, 0.055, 0.675, 0.19); } .hamburger--stand-r .hamburger-inner::before { -webkit-transition: top 0.075s 0.075s ease-in, -webkit-transform 0.075s 0s cubic-bezier(0.55, 0.055, 0.675, 0.19); transition: top 0.075s 0.075s ease-in, -webkit-transform 0.075s 0s cubic-bezier(0.55, 0.055, 0.675, 0.19); transition: top 0.075s 0.075s ease-in, transform 0.075s 0s cubic-bezier(0.55, 0.055, 0.675, 0.19); transition: top 0.075s 0.075s ease-in, transform 0.075s 0s cubic-bezier(0.55, 0.055, 0.675, 0.19), -webkit-transform 0.075s 0s cubic-bezier(0.55, 0.055, 0.675, 0.19); } .hamburger--stand-r .hamburger-inner::after { -webkit-transition: bottom 0.075s 0.075s ease-in, -webkit-transform 0.075s 0s cubic-bezier(0.55, 0.055, 0.675, 0.19); transition: bottom 0.075s 0.075s ease-in, -webkit-transform 0.075s 0s cubic-bezier(0.55, 0.055, 0.675, 0.19); transition: bottom 0.075s 0.075s ease-in, transform 0.075s 0s cubic-bezier(0.55, 0.055, 0.675, 0.19); transition: bottom 0.075s 0.075s ease-in, transform 0.075s 0s cubic-bezier(0.55, 0.055, 0.675, 0.19), -webkit-transform 0.075s 0s cubic-bezier(0.55, 0.055, 0.675, 0.19); } .hamburger--stand-r.is-active .hamburger-inner { -webkit-transform: rotate(-90deg); transform: rotate(-90deg); background-color: transparent !important; -webkit-transition: background-color 0s 0.15s linear, -webkit-transform 0.075s 0s cubic-bezier(0.215, 0.61, 0.355, 1); transition: background-color 0s 0.15s linear, -webkit-transform 0.075s 0s cubic-bezier(0.215, 0.61, 0.355, 1); transition: transform 0.075s 0s cubic-bezier(0.215, 0.61, 0.355, 1), background-color 0s 0.15s linear; transition: transform 0.075s 0s cubic-bezier(0.215, 0.61, 0.355, 1), background-color 0s 0.15s linear, -webkit-transform 0.075s 0s cubic-bezier(0.215, 0.61, 0.355, 1); } .hamburger--stand-r.is-active .hamburger-inner::before { top: 0; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); -webkit-transition: top 0.075s 0.1s ease-out, -webkit-transform 0.075s 0.15s cubic-bezier(0.215, 0.61, 0.355, 1); transition: top 0.075s 0.1s ease-out, -webkit-transform 0.075s 0.15s cubic-bezier(0.215, 0.61, 0.355, 1); transition: top 0.075s 0.1s ease-out, transform 0.075s 0.15s cubic-bezier(0.215, 0.61, 0.355, 1); transition: top 0.075s 0.1s ease-out, transform 0.075s 0.15s cubic-bezier(0.215, 0.61, 0.355, 1), -webkit-transform 0.075s 0.15s cubic-bezier(0.215, 0.61, 0.355, 1); } .hamburger--stand-r.is-active .hamburger-inner::after { bottom: 0; -webkit-transform: rotate(45deg); transform: rotate(45deg); -webkit-transition: bottom 0.075s 0.1s ease-out, -webkit-transform 0.075s 0.15s cubic-bezier(0.215, 0.61, 0.355, 1); transition: bottom 0.075s 0.1s ease-out, -webkit-transform 0.075s 0.15s cubic-bezier(0.215, 0.61, 0.355, 1); transition: bottom 0.075s 0.1s ease-out, transform 0.075s 0.15s cubic-bezier(0.215, 0.61, 0.355, 1); transition: bottom 0.075s 0.1s ease-out, transform 0.075s 0.15s cubic-bezier(0.215, 0.61, 0.355, 1), -webkit-transform 0.075s 0.15s cubic-bezier(0.215, 0.61, 0.355, 1); } /* * Squeeze */ .hamburger--squeeze .hamburger-inner { -webkit-transition-duration: 0.075s; transition-duration: 0.075s; -webkit-transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } .hamburger--squeeze .hamburger-inner::before { -webkit-transition: top 0.075s 0.12s ease, opacity 0.075s ease; transition: top 0.075s 0.12s ease, opacity 0.075s ease; } .hamburger--squeeze .hamburger-inner::after { -webkit-transition: bottom 0.075s 0.12s ease, -webkit-transform 0.075s cubic-bezier(0.55, 0.055, 0.675, 0.19); transition: bottom 0.075s 0.12s ease, -webkit-transform 0.075s cubic-bezier(0.55, 0.055, 0.675, 0.19); transition: bottom 0.075s 0.12s ease, transform 0.075s cubic-bezier(0.55, 0.055, 0.675, 0.19); transition: bottom 0.075s 0.12s ease, transform 0.075s cubic-bezier(0.55, 0.055, 0.675, 0.19), -webkit-transform 0.075s cubic-bezier(0.55, 0.055, 0.675, 0.19); } .hamburger--squeeze.is-active .hamburger-inner { -webkit-transform: rotate(45deg); transform: rotate(45deg); -webkit-transition-delay: 0.12s; transition-delay: 0.12s; -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } .hamburger--squeeze.is-active .hamburger-inner::before { top: 0; opacity: 0; -webkit-transition: top 0.075s ease, opacity 0.075s 0.12s ease; transition: top 0.075s ease, opacity 0.075s 0.12s ease; } .hamburger--squeeze.is-active .hamburger-inner::after { bottom: 0; -webkit-transform: rotate(-90deg); transform: rotate(-90deg); -webkit-transition: bottom 0.075s ease, -webkit-transform 0.075s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1); transition: bottom 0.075s ease, -webkit-transform 0.075s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1); transition: bottom 0.075s ease, transform 0.075s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1); transition: bottom 0.075s ease, transform 0.075s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1), -webkit-transform 0.075s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1); } /* * Vortex */ .hamburger--vortex .hamburger-inner { -webkit-transition-duration: 0.2s; transition-duration: 0.2s; -webkit-transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1); transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1); } .hamburger--vortex .hamburger-inner::before, .hamburger--vortex .hamburger-inner::after { -webkit-transition-duration: 0s; transition-duration: 0s; -webkit-transition-delay: 0.1s; transition-delay: 0.1s; -webkit-transition-timing-function: linear; transition-timing-function: linear; } .hamburger--vortex .hamburger-inner::before { -webkit-transition-property: top, opacity; transition-property: top, opacity; } .hamburger--vortex .hamburger-inner::after { -webkit-transition-property: bottom, -webkit-transform; transition-property: bottom, -webkit-transform; transition-property: bottom, transform; transition-property: bottom, transform, -webkit-transform; } .hamburger--vortex.is-active .hamburger-inner { -webkit-transform: rotate(765deg); transform: rotate(765deg); -webkit-transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1); transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1); } .hamburger--vortex.is-active .hamburger-inner::before, .hamburger--vortex.is-active .hamburger-inner::after { -webkit-transition-delay: 0s; transition-delay: 0s; } .hamburger--vortex.is-active .hamburger-inner::before { top: 0; opacity: 0; } .hamburger--vortex.is-active .hamburger-inner::after { bottom: 0; -webkit-transform: rotate(90deg); transform: rotate(90deg); } /* * Vortex Reverse */ .hamburger--vortex-r .hamburger-inner { -webkit-transition-duration: 0.2s; transition-duration: 0.2s; -webkit-transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1); transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1); } .hamburger--vortex-r .hamburger-inner::before, .hamburger--vortex-r .hamburger-inner::after { -webkit-transition-duration: 0s; transition-duration: 0s; -webkit-transition-delay: 0.1s; transition-delay: 0.1s; -webkit-transition-timing-function: linear; transition-timing-function: linear; } .hamburger--vortex-r .hamburger-inner::before { -webkit-transition-property: top, opacity; transition-property: top, opacity; } .hamburger--vortex-r .hamburger-inner::after { -webkit-transition-property: bottom, -webkit-transform; transition-property: bottom, -webkit-transform; transition-property: bottom, transform; transition-property: bottom, transform, -webkit-transform; } .hamburger--vortex-r.is-active .hamburger-inner { -webkit-transform: rotate(-765deg); transform: rotate(-765deg); -webkit-transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1); transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1); } .hamburger--vortex-r.is-active .hamburger-inner::before, .hamburger--vortex-r.is-active .hamburger-inner::after { -webkit-transition-delay: 0s; transition-delay: 0s; } .hamburger--vortex-r.is-active .hamburger-inner::before { top: 0; opacity: 0; } .hamburger--vortex-r.is-active .hamburger-inner::after { bottom: 0; -webkit-transform: rotate(-90deg); transform: rotate(-90deg); } .slideInLeft { -webkit-animation-name: slideInLeft; animation-name: slideInLeft; } @-webkit-keyframes slideInLeft { from { -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); visibility: visible; } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes slideInLeft { from { -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); visibility: visible; } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } .slideOutRight { -webkit-animation-name: slideOutRight; animation-name: slideOutRight; } @-webkit-keyframes slideOutRight { from { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } to { visibility: hidden; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } } @keyframes slideOutRight { from { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } to { visibility: hidden; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } } .cookiebar { z-index: 39; } .cookiebar__text { font-size: 12px; } .slideInRight { -webkit-animation-name: slideInRight; animation-name: slideInRight; } @-webkit-keyframes slideInRight { from { -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); visibility: visible; } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes slideInRight { from { -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); visibility: visible; } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } .slideOutLeft { -webkit-animation-name: slideOutLeft; animation-name: slideOutLeft; } @-webkit-keyframes slideOutLeft { from { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } to { visibility: hidden; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } } @keyframes slideOutLeft { from { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } to { visibility: hidden; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } } .box { display: none; } /* *************************************** CATEGORY NAVIGATION BAR *************************************** */ .category-navbar { font-size: 0px; list-style: none; margin: 0 0 10px 0; padding: 7px 0 2px 0px; width: 100%; border-bottom: 1px solid #ddd; background: white; } .category-navbar li:first-child { margin: 0 0 0 7px; } .category-navbar li { display: inline-block; line-height: 16px; margin: 0 0 0 0px; padding: 5px 0 5px 0; } .category-navbar li a { cursor: pointer; color: #999; font-size: 14px; text-decoration: none; margin: 0 10px 10px 0; padding: 6px 10px; border-radius: 1px; moz-border-radius: 1px; -webkit-border-radius: 1px; } .category-navbar li a:hover { text-decoration: none; background: #eee; color: #222; } .category-navbar li.select a { background: #666; color: #fff; } /* *************************************** CAPTION STYLE *************************************** */ .box { cursor: pointer; overflow: hidden; } .lightbox-text { display: none; } .thumbnail-caption { position: absolute; width: 100%; height: 100%; background: #fff; background: rgba(255, 255, 255, 0.9); /*url(../../files/theme/dist/img/bg-caption.png)*/ color: #333; display: none; line-height: 1; font-family: "Aileron-Thin"; } /* The style for centering the caption (vertically and horizontally) */ .thumbnail-caption > div { height: 100%; width: 100%; display: table !important; } .thumbnail-caption > div > div { padding: 15px; display: table-cell !important; vertical-align: middle; /* FOR VERTICAL ALIGN */ text-align: center; /* FOR HORIZONTAL ALIGN */ } /* *************************************** LOADING STYLE *************************************** */ .grid-loader { width: 43px; height: 20px; padding: 10px 15px 10px 15px; background: url("../../files/theme/dist/css/loader.gif") no-repeat; background-position: center; margin: 20px auto; } .grid-loadMore { /*cursor: pointer; margin: 20px auto; width: 150px; height: 20px; text-align: center; color: white; background-color: black; background: rgba(0,0,0,.6); border-radius: 2px; padding: 10px 15px 10px 15px; font-size: 14px; font-family: sans-serif; */ } .grid-loadMore:hover { /*text-decoration: none; color: white; background: rgba(0,0,0,.8); */ } /* *************************************** LIGHT-BOX STYLE *************************************** */ .lightbox-timer { height: 1px; position: absolute; bottom: 0; left: 0; background: white; } .lb-loader { width: 43px; height: 11px; background: url("../../files/theme/dist/css/loader.gif"); margin: 20px auto; } .autoGrid-lightbox { display: none; position: fixed; top: 0; z-index: 1111; width: 100%; height: 100%; background: #313131; background: rgba(0, 0, 0, 0.85); text-align: center; } .autoGrid-lightbox img { margin-top: 5px; max-width: 100%; } .autoGrid-nav { margin-top: -57px; height: 57px; width: 100%; background: #383838; background: #1D1D1D; border-bottom: 1px solid #323232; } .autoGrid-play, .autoGrid-close, .autoGrid-next, .autoGrid-prev, .autoGrid-font { width: 88px; height: 57px; position: relative; cursor: pointer; } .autoGrid-play:hover, .autoGrid-close:hover, .autoGrid-next:hover, .autoGrid-prev:hover, .autoGrid-font:hover { background: black; } .selected { background: black; } .selected .iconPlay { background-position: -164px -3px; } .autoGrid-lbcaption { float: left; color: white; height: 57px; font-size: 16px; } .autoGrid-lbcaption span { margin-left: 3px; color: #D7D7D7; font-size: 11px; } .autoGrid-lbcaption > div { height: 100%; width: 100%; display: table !important; } .autoGrid-lbcaption > div > div { padding: 0 15px 0 15px; display: table-cell !important; vertical-align: middle; /* FOR VERTICAL ALIGN */ text-align: center; /* FOR HORIZONTAL ALIGN */ } .autoGrid-play, .autoGrid-close { float: right; } .autoGrid-next, .autoGrid-prev { float: right; } .iconPlay, .iconClose, .iconNext, .iconPrev, .iconFont { position: absolute; top: 50%; left: 50%; height: 25px; display: block; } .iconClose { width: 25px; margin: -13px 0 0 -13px; background: url("../../files/theme/dist/css/icons.png"); background-position: -2px -3px; } .iconPlay { width: 17px; margin: -13px 0 0 -8px; background: url("../../files/theme/dist/css/icons.png"); background-position: -137px -3px; -webkit-transition: all .3s; transition: all .3s; } .iconFont { width: 46px; margin: -13px 0 0 -23px; background: url("../../files/theme/dist/css/icons.png"); background-position: -85px -3px; } .iconNext, .iconPrev { width: 15px; margin: -13px 0 0 -8px; background: url("../../files/theme/dist/css/icons.png"); } .iconPrev { background-position: -40px -3px; } .iconNext { background-position: -70px -3px; } /* *************************************** GRID STYLE *************************************** */ .centered { margin: auto; } .box { /*margin: 2px; padding: 5px;*/ /*font-size: 11px;*/ line-height: 1.4em; float: left; border-radius: 0px; } .box img, #tumblelog img { display: block; width: 100%; } .rtl .box { float: right; text-align: right; direction: rtl; } /**** Transitions ****/ .transitions-enabled.masonry, .transitions-enabled.masonry .masonry-brick { -webkit-transition-duration: 0.7s; transition-duration: 0.7s; } .transitions-enabled.masonry { -webkit-transition-property: height, width; transition-property: height, width; } .transitions-enabled.masonry .masonry-brick { -webkit-transition-property: left, right, top; transition-property: left, right, top; } /* disable transitions on container */ .transitions-enabled.infinite-scroll.masonry { -webkit-transition-property: none; transition-property: none; } /**** Clearfix ****/ .grid-clearfix:before, .grid-clearfix:after { content: ""; display: table; } .grid-clearfix:after { clear: both; } .grid-clearfix { zoom: 1; } .centered { /* overflow: auto;*/ } /*! * jQCloud 2.0.3 * Copyright 2011 Luca Ongaro (http://www.lucaongaro.eu) * Copyright 2013 Daniel White (http://www.developerdan.com) * Copyright 2014-2017 Damien "Mistic" Sorel (http://www.strangeplanet.fr) * Licensed under MIT (http://opensource.org/licenses/MIT) */ .jqcloud { text-transform: uppercase; font-family: "Aileron-Regular", Arial, Helvetica, sans-serif; font-size: 10px; line-height: normal; overflow: hidden; position: relative; } @media screen and (min-width: 58.75em) { .jqcloud { font-size: 12px; } } @media screen and (min-width: 120rem) { .jqcloud { font-size: 15px; } } .jqcloud-word { margin: 0; padding: 0; } .jqcloud-word.w1 { color: #eee; font-size: 125%; } .jqcloud-word.w2 { color: #eee; font-size: 150%; } .jqcloud-word.w3 { color: #eee; font-size: 200%; } .jqcloud-word.w4 { color: #eee; font-size: 250%; } .jqcloud-word.w5 { color: #eee; font-size: 300%; } .jqcloud-word.w6 { color: #eee; font-size: 350%; } .jqcloud-word.w7 { color: #eee; font-size: 400%; } .jqcloud-word.w8 { color: #eee; font-size: 425%; } .jqcloud-word.w9 { color: #eee; font-size: 480%; } .jqcloud-word.w10 { color: #fff; font-size: 525%; } .jqcloud-word a { color: inherit; font-size: inherit; text-decoration: none; } .jqcloud-word a:hover { color: #fff; } .wordcloud { width: 100%; height: 100%; } .wc--darken .wordcloud { background: rgba(0, 0, 0, 0.64); } /* .wc--transparent .wordcloud{ background: transparent none; } */ .cookiebar.openall { position: fixed; bottom: 0; left: 0; width: 100%; margin-top: 12px; background-color: #313131; -webkit-box-shadow: 12px 0px 14px 0px rgba(6, 6, 6, 0.3); box-shadow: 12px 0px 14px 0px rgba(6, 6, 6, 0.3); color: rgba(255, 255, 255, 0.5); } .cookiebar.openall .cookiebar-inner.closed, .cookiebar.closedall { position: fixed; bottom: -100%; left: 0; width: 100%; } .cookiebar .cookieheadline.closed, .cookiebar .cookiebartext.closed, .cookiebar .cookiebarallowalllink.closed { display: none; } .cookiebar.openall { margin-top: 0; } .cookiebar.openall .cookiebar-inner { max-width: 1220px; margin: 0 auto; padding: 20px 40px; } .cookiebar.open.hidebar .cookiebar-inner { max-width: 220px; margin: 0; padding: 0; } .cookieheadline { font-size: 18px; } .cookiebartext a { text-decoration: underline !important; color: rgba(255, 255, 255, 0.5) !important; } .cookiebartext a:hover { /*color:rgba(0,150,217,1) !important;*/ } .cookiebarlinks a, .cookiebar-inner.open .cookiebarlinks button, .cookiebar-inner.closed .cookiebarlinks button { color: #fff !important; font-size: 12px; line-height: 30px; background-color: #9e9e9e; padding: 0 12px; display: inline-block; cursor: pointer; text-transform: uppercase; border: 0; } .cookiebar.closedall .cookiebar-inner.closed .cookiebarlink.open button#cookibarlink { position: fixed; bottom: 0; right: 120px; z-index: 9; } .cookiebar.closedall .cookiebarlink.closed button#cookibarlink { bottom: -100%; } button#cookibarlink:before { content: ""; margin-right: 5px; } #cookiebarmodal.modal.closed { display: none; } #cookiebarmodal .modal-overlay { z-index: 99999; position: fixed; left: 0; top: 0; right: 0; bottom: 0; width: 100%; background: rgba(0, 0, 0, 0.4); } #cookiebarmodal .modaltext p { margin-bottom: 0.75rem; } @keyframes fadeInUptk { from { opacity: 0; -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); } to { opacity: 1; -webkit-transform: none; transform: none; } } @-webkit-keyframes fadeInUptk { from { opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } to { opacity: 1; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; -webkit-transform: none; transform: none; } } @keyframes fadeInUptk { from { opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } to { opacity: 1; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; -webkit-transform: none; transform: none; } } #cookiebarmodal .modal-inner { position: fixed; bottom: 0; left: 0; right: 0; margin: 0 auto; z-index: 99999; width: 90%; max-width: 400px; font-size: 12px; -webkit-animation-duration: 0.5s; animation-duration: 0.5s; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-name: fadeInUptk; animation-name: fadeInUptk; } #cookiebarmodal .modal-content { -webkit-box-shadow: 0 4px 4px rgba(0, 0, 0, 0.4); box-shadow: 0 4px 4px rgba(0, 0, 0, 0.4); background: #f9f9f9; padding: 1.5rem 1.75rem; /*color:#555;*/ } #cookiebarmodal .modal-inner .modalheadline { margin-bottom: 0.75rem; font-size: 18px; text-align: center; } /*#cookiebarmodal .modal-inner a { color:rgba(0,150,217,1) !important; }*/ #cookiebarmodal .modal-inner .formrow { background-color: #fff; border: 1px solid #eaeaea; padding: 0.5rem 0.75rem; } #cookiebarmodal form { margin-bottom: 0; } #cookiebarmodal form div.formrow { margin-bottom: 0.75rem; } #cookiebarmodal form div.formrow .description { margin-bottom: 0; } #cookiebarmodal .modal-inner .formrow.submit { padding: 0; margin-bottom: 0; } #cookiebarmodal .modal-inner input[type="submit"] { width: 100%; display: inline-block; padding: 10px; margin-bottom: 0; text-align: center; vertical-align: middle; line-height: 1.5; color: #fff; cursor: pointer; background-color: #494a51; font-size: 1rem; } #cookiebarmodal .checkboxlabel { display: inline-block; } .privacypolicy #cookiebarmodal .modal-overlay { display: none; } .privacypolicy #cookiebarmodal .modal-inner { bottom: -150px; -webkit-transition: All 0.25s ease; transition: All 0.25s ease; } .privacypolicy #cookiebarmodal .modal-inner:hover { bottom: 0; -webkit-transition: All 0.25s ease; transition: All 0.25s ease; } @media only screen and (max-width: 767px) { #cookiebarmodal .modal-inner { height: 90%; overflow-y: auto; } .privacypolicy #cookiebarmodal .modal-inner { bottom: 0; -webkit-transition: All 0.25s ease; transition: All 0.25s ease; } .privacypolicy #cookiebarmodal .modal-inner:hover { bottom: 0; -webkit-transition: All 0.25s ease; transition: All 0.25s ease; } }