/** * Swiper 4.5.0 * Most modern mobile touch slider and framework with hardware accelerated transitions * http://www.idangero.us/swiper/ * * Copyright 2014-2019 Vladimir Kharlampidi * * Released under the MIT License * * Released on: February 22, 2019 */ .swiper-container{margin:0 auto;position:relative;overflow:hidden;list-style:none;padding:0;z-index:1}.swiper-container-no-flexbox .swiper-slide{float:left}.swiper-container-vertical>.swiper-wrapper{-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column}.swiper-wrapper{position:relative;width:100%;height:100%;z-index:1;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-transition-property:-webkit-transform;transition-property:-webkit-transform;-o-transition-property:transform;transition-property:transform;transition-property:transform,-webkit-transform;-webkit-box-sizing:content-box;box-sizing:content-box}.swiper-container-android .swiper-slide,.swiper-wrapper{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}.swiper-container-multirow>.swiper-wrapper{-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap}.swiper-container-free-mode>.swiper-wrapper{-webkit-transition-timing-function:ease-out;-o-transition-timing-function:ease-out;transition-timing-function:ease-out;margin:0 auto}.swiper-slide{-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;width:100%;height:100%;position:relative;-webkit-transition-property:-webkit-transform;transition-property:-webkit-transform;-o-transition-property:transform;transition-property:transform;transition-property:transform,-webkit-transform}.swiper-slide-invisible-blank{visibility:hidden}.swiper-container-autoheight,.swiper-container-autoheight .swiper-slide{height:auto}.swiper-container-autoheight .swiper-wrapper{-webkit-box-align:start;-webkit-align-items:flex-start;-ms-flex-align:start;align-items:flex-start;-webkit-transition-property:height,-webkit-transform;transition-property:height,-webkit-transform;-o-transition-property:transform,height;transition-property:transform,height;transition-property:transform,height,-webkit-transform}.swiper-container-3d{-webkit-perspective:1200px;perspective:1200px}.swiper-container-3d .swiper-cube-shadow,.swiper-container-3d .swiper-slide,.swiper-container-3d .swiper-slide-shadow-bottom,.swiper-container-3d .swiper-slide-shadow-left,.swiper-container-3d .swiper-slide-shadow-right,.swiper-container-3d .swiper-slide-shadow-top,.swiper-container-3d .swiper-wrapper{-webkit-transform-style:preserve-3d;transform-style:preserve-3d}.swiper-container-3d .swiper-slide-shadow-bottom,.swiper-container-3d .swiper-slide-shadow-left,.swiper-container-3d .swiper-slide-shadow-right,.swiper-container-3d .swiper-slide-shadow-top{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;z-index:10}.swiper-container-3d .swiper-slide-shadow-left{background-image:-webkit-gradient(linear,right top,left top,from(rgba(0,0,0,.5)),to(rgba(0,0,0,0)));background-image:-webkit-linear-gradient(right,rgba(0,0,0,.5),rgba(0,0,0,0));background-image:-o-linear-gradient(right,rgba(0,0,0,.5),rgba(0,0,0,0));background-image:linear-gradient(to left,rgba(0,0,0,.5),rgba(0,0,0,0))}.swiper-container-3d .swiper-slide-shadow-right{background-image:-webkit-gradient(linear,left top,right top,from(rgba(0,0,0,.5)),to(rgba(0,0,0,0)));background-image:-webkit-linear-gradient(left,rgba(0,0,0,.5),rgba(0,0,0,0));background-image:-o-linear-gradient(left,rgba(0,0,0,.5),rgba(0,0,0,0));background-image:linear-gradient(to right,rgba(0,0,0,.5),rgba(0,0,0,0))}.swiper-container-3d .swiper-slide-shadow-top{background-image:-webkit-gradient(linear,left bottom,left top,from(rgba(0,0,0,.5)),to(rgba(0,0,0,0)));background-image:-webkit-linear-gradient(bottom,rgba(0,0,0,.5),rgba(0,0,0,0));background-image:-o-linear-gradient(bottom,rgba(0,0,0,.5),rgba(0,0,0,0));background-image:linear-gradient(to top,rgba(0,0,0,.5),rgba(0,0,0,0))}.swiper-container-3d .swiper-slide-shadow-bottom{background-image:-webkit-gradient(linear,left top,left bottom,from(rgba(0,0,0,.5)),to(rgba(0,0,0,0)));background-image:-webkit-linear-gradient(top,rgba(0,0,0,.5),rgba(0,0,0,0));background-image:-o-linear-gradient(top,rgba(0,0,0,.5),rgba(0,0,0,0));background-image:linear-gradient(to bottom,rgba(0,0,0,.5),rgba(0,0,0,0))}.swiper-container-wp8-horizontal,.swiper-container-wp8-horizontal>.swiper-wrapper{-ms-touch-action:pan-y;touch-action:pan-y}.swiper-container-wp8-vertical,.swiper-container-wp8-vertical>.swiper-wrapper{-ms-touch-action:pan-x;touch-action:pan-x}.swiper-button-next,.swiper-button-prev{position:absolute;top:50%;width:27px;height:44px;margin-top:-22px;z-index:10;cursor:pointer;background-size:27px 44px;background-position:center;background-repeat:no-repeat}.swiper-button-next.swiper-button-disabled,.swiper-button-prev.swiper-button-disabled{opacity:.35;cursor:auto;pointer-events:none}.swiper-button-prev,.swiper-container-rtl .swiper-button-next{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23007aff'%2F%3E%3C%2Fsvg%3E");left:10px;right:auto}.swiper-button-next,.swiper-container-rtl .swiper-button-prev{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23007aff'%2F%3E%3C%2Fsvg%3E");right:10px;left:auto}.swiper-button-prev.swiper-button-white,.swiper-container-rtl .swiper-button-next.swiper-button-white{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23ffffff'%2F%3E%3C%2Fsvg%3E")}.swiper-button-next.swiper-button-white,.swiper-container-rtl .swiper-button-prev.swiper-button-white{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23ffffff'%2F%3E%3C%2Fsvg%3E")}.swiper-button-prev.swiper-button-black,.swiper-container-rtl .swiper-button-next.swiper-button-black{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23000000'%2F%3E%3C%2Fsvg%3E")}.swiper-button-next.swiper-button-black,.swiper-container-rtl .swiper-button-prev.swiper-button-black{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23000000'%2F%3E%3C%2Fsvg%3E")}.swiper-button-lock{display:none}.swiper-pagination{position:absolute;text-align:center;-webkit-transition:.3s opacity;-o-transition:.3s opacity;transition:.3s opacity;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0);z-index:10}.swiper-pagination.swiper-pagination-hidden{opacity:0}.swiper-container-horizontal>.swiper-pagination-bullets,.swiper-pagination-custom,.swiper-pagination-fraction{bottom:10px;left:0;width:100%}.swiper-pagination-bullets-dynamic{overflow:hidden;font-size:0}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{-webkit-transform:scale(.33);-ms-transform:scale(.33);transform:scale(.33);position:relative}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active{-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-main{-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev{-webkit-transform:scale(.66);-ms-transform:scale(.66);transform:scale(.66)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev-prev{-webkit-transform:scale(.33);-ms-transform:scale(.33);transform:scale(.33)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next{-webkit-transform:scale(.66);-ms-transform:scale(.66);transform:scale(.66)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next-next{-webkit-transform:scale(.33);-ms-transform:scale(.33);transform:scale(.33)}.swiper-pagination-bullet{width:8px;height:8px;display:inline-block;border-radius:100%;background:#000;opacity:.2}button.swiper-pagination-bullet{border:none;margin:0;padding:0;-webkit-box-shadow:none;box-shadow:none;-webkit-appearance:none;-moz-appearance:none;appearance:none}.swiper-pagination-clickable .swiper-pagination-bullet{cursor:pointer}.swiper-pagination-bullet-active{opacity:1;background:#007aff}.swiper-container-vertical>.swiper-pagination-bullets{right:10px;top:50%;-webkit-transform:translate3d(0,-50%,0);transform:translate3d(0,-50%,0)}.swiper-container-vertical>.swiper-pagination-bullets .swiper-pagination-bullet{margin:6px 0;display:block}.swiper-container-vertical>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic{top:50%;-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%);width:8px}.swiper-container-vertical>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{display:inline-block;-webkit-transition:.2s top,.2s -webkit-transform;transition:.2s top,.2s -webkit-transform;-o-transition:.2s transform,.2s top;transition:.2s transform,.2s top;transition:.2s transform,.2s top,.2s -webkit-transform}.swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet{margin:0 4px}.swiper-container-horizontal>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic{left:50%;-webkit-transform:translateX(-50%);-ms-transform:translateX(-50%);transform:translateX(-50%);white-space:nowrap}.swiper-container-horizontal>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{-webkit-transition:.2s left,.2s -webkit-transform;transition:.2s left,.2s -webkit-transform;-o-transition:.2s transform,.2s left;transition:.2s transform,.2s left;transition:.2s transform,.2s left,.2s -webkit-transform}.swiper-container-horizontal.swiper-container-rtl>.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{-webkit-transition:.2s right,.2s -webkit-transform;transition:.2s right,.2s -webkit-transform;-o-transition:.2s transform,.2s right;transition:.2s transform,.2s right;transition:.2s transform,.2s right,.2s -webkit-transform}.swiper-pagination-progressbar{background:rgba(0,0,0,.25);position:absolute}.swiper-pagination-progressbar .swiper-pagination-progressbar-fill{background:#007aff;position:absolute;left:0;top:0;width:100%;height:100%;-webkit-transform:scale(0);-ms-transform:scale(0);transform:scale(0);-webkit-transform-origin:left top;-ms-transform-origin:left top;transform-origin:left top}.swiper-container-rtl .swiper-pagination-progressbar .swiper-pagination-progressbar-fill{-webkit-transform-origin:right top;-ms-transform-origin:right top;transform-origin:right top}.swiper-container-horizontal>.swiper-pagination-progressbar,.swiper-container-vertical>.swiper-pagination-progressbar.swiper-pagination-progressbar-opposite{width:100%;height:4px;left:0;top:0}.swiper-container-horizontal>.swiper-pagination-progressbar.swiper-pagination-progressbar-opposite,.swiper-container-vertical>.swiper-pagination-progressbar{width:4px;height:100%;left:0;top:0}.swiper-pagination-white .swiper-pagination-bullet-active{background:#fff}.swiper-pagination-progressbar.swiper-pagination-white{background:rgba(255,255,255,.25)}.swiper-pagination-progressbar.swiper-pagination-white .swiper-pagination-progressbar-fill{background:#fff}.swiper-pagination-black .swiper-pagination-bullet-active{background:#000}.swiper-pagination-progressbar.swiper-pagination-black{background:rgba(0,0,0,.25)}.swiper-pagination-progressbar.swiper-pagination-black .swiper-pagination-progressbar-fill{background:#000}.swiper-pagination-lock{display:none}.swiper-scrollbar{border-radius:10px;position:relative;-ms-touch-action:none;background:rgba(0,0,0,.1)}.swiper-container-horizontal>.swiper-scrollbar{position:absolute;left:1%;bottom:3px;z-index:50;height:5px;width:98%}.swiper-container-vertical>.swiper-scrollbar{position:absolute;right:3px;top:1%;z-index:50;width:5px;height:98%}.swiper-scrollbar-drag{height:100%;width:100%;position:relative;background:rgba(0,0,0,.5);border-radius:10px;left:0;top:0}.swiper-scrollbar-cursor-drag{cursor:move}.swiper-scrollbar-lock{display:none}.swiper-zoom-container{width:100%;height:100%;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;text-align:center}.swiper-zoom-container>canvas,.swiper-zoom-container>img,.swiper-zoom-container>svg{max-width:100%;max-height:100%;-o-object-fit:contain;object-fit:contain}.swiper-slide-zoomed{cursor:move}.swiper-lazy-preloader{width:42px;height:42px;position:absolute;left:50%;top:50%;margin-left:-21px;margin-top:-21px;z-index:10;-webkit-transform-origin:50%;-ms-transform-origin:50%;transform-origin:50%;-webkit-animation:swiper-preloader-spin 1s steps(12,end) infinite;animation:swiper-preloader-spin 1s steps(12,end) infinite}.swiper-lazy-preloader:after{display:block;content:'';width:100%;height:100%;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20viewBox%3D'0%200%20120%20120'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20xmlns%3Axlink%3D'http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink'%3E%3Cdefs%3E%3Cline%20id%3D'l'%20x1%3D'60'%20x2%3D'60'%20y1%3D'7'%20y2%3D'27'%20stroke%3D'%236c6c6c'%20stroke-width%3D'11'%20stroke-linecap%3D'round'%2F%3E%3C%2Fdefs%3E%3Cg%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(30%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(60%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(90%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(120%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(150%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.37'%20transform%3D'rotate(180%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.46'%20transform%3D'rotate(210%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.56'%20transform%3D'rotate(240%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.66'%20transform%3D'rotate(270%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.75'%20transform%3D'rotate(300%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.85'%20transform%3D'rotate(330%2060%2C60)'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");background-position:50%;background-size:100%;background-repeat:no-repeat}.swiper-lazy-preloader-white:after{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20viewBox%3D'0%200%20120%20120'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20xmlns%3Axlink%3D'http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink'%3E%3Cdefs%3E%3Cline%20id%3D'l'%20x1%3D'60'%20x2%3D'60'%20y1%3D'7'%20y2%3D'27'%20stroke%3D'%23fff'%20stroke-width%3D'11'%20stroke-linecap%3D'round'%2F%3E%3C%2Fdefs%3E%3Cg%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(30%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(60%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(90%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(120%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(150%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.37'%20transform%3D'rotate(180%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.46'%20transform%3D'rotate(210%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.56'%20transform%3D'rotate(240%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.66'%20transform%3D'rotate(270%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.75'%20transform%3D'rotate(300%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.85'%20transform%3D'rotate(330%2060%2C60)'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E")}@-webkit-keyframes swiper-preloader-spin{100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes swiper-preloader-spin{100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}.swiper-container .swiper-notification{position:absolute;left:0;top:0;pointer-events:none;opacity:0;z-index:-1000}.swiper-container-fade.swiper-container-free-mode .swiper-slide{-webkit-transition-timing-function:ease-out;-o-transition-timing-function:ease-out;transition-timing-function:ease-out}.swiper-container-fade .swiper-slide{pointer-events:none;-webkit-transition-property:opacity;-o-transition-property:opacity;transition-property:opacity}.swiper-container-fade .swiper-slide .swiper-slide{pointer-events:none}.swiper-container-fade .swiper-slide-active,.swiper-container-fade .swiper-slide-active .swiper-slide-active{pointer-events:auto}.swiper-container-cube{overflow:visible}.swiper-container-cube .swiper-slide{pointer-events:none;-webkit-backface-visibility:hidden;backface-visibility:hidden;z-index:1;visibility:hidden;-webkit-transform-origin:0 0;-ms-transform-origin:0 0;transform-origin:0 0;width:100%;height:100%}.swiper-container-cube .swiper-slide .swiper-slide{pointer-events:none}.swiper-container-cube.swiper-container-rtl .swiper-slide{-webkit-transform-origin:100% 0;-ms-transform-origin:100% 0;transform-origin:100% 0}.swiper-container-cube .swiper-slide-active,.swiper-container-cube .swiper-slide-active .swiper-slide-active{pointer-events:auto}.swiper-container-cube .swiper-slide-active,.swiper-container-cube .swiper-slide-next,.swiper-container-cube .swiper-slide-next+.swiper-slide,.swiper-container-cube .swiper-slide-prev{pointer-events:auto;visibility:visible}.swiper-container-cube .swiper-slide-shadow-bottom,.swiper-container-cube .swiper-slide-shadow-left,.swiper-container-cube .swiper-slide-shadow-right,.swiper-container-cube .swiper-slide-shadow-top{z-index:0;-webkit-backface-visibility:hidden;backface-visibility:hidden}.swiper-container-cube .swiper-cube-shadow{position:absolute;left:0;bottom:0;width:100%;height:100%;background:#000;opacity:.6;-webkit-filter:blur(50px);filter:blur(50px);z-index:0}.swiper-container-flip{overflow:visible}.swiper-container-flip .swiper-slide{pointer-events:none;-webkit-backface-visibility:hidden;backface-visibility:hidden;z-index:1}.swiper-container-flip .swiper-slide .swiper-slide{pointer-events:none}.swiper-container-flip .swiper-slide-active,.swiper-container-flip .swiper-slide-active .swiper-slide-active{pointer-events:auto}.swiper-container-flip .swiper-slide-shadow-bottom,.swiper-container-flip .swiper-slide-shadow-left,.swiper-container-flip .swiper-slide-shadow-right,.swiper-container-flip .swiper-slide-shadow-top{z-index:0;-webkit-backface-visibility:hidden;backface-visibility:hidden}.swiper-container-coverflow .swiper-wrapper{-ms-perspective:1200px} @charset "UTF-8"; /*! Animate.css - http://daneden.me/animate Licensed under the MIT license Copyright (c) 2013 Daniel Eden Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. */ .animated { -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } .animated.hinge { -webkit-animation-duration: 2s; animation-duration: 2s; } @-webkit-keyframes bounce { 0%, 20%, 50%, 80%, 100% { -webkit-transform: translateY(0); transform: translateY(0); } 40% { -webkit-transform: translateY(-30px); transform: translateY(-30px); } 60% { -webkit-transform: translateY(-15px); transform: translateY(-15px); } } @keyframes bounce { 0%, 20%, 50%, 80%, 100% { -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } 40% { -webkit-transform: translateY(-30px); -ms-transform: translateY(-30px); transform: translateY(-30px); } 60% { -webkit-transform: translateY(-15px); -ms-transform: translateY(-15px); transform: translateY(-15px); } } .bounce { -webkit-animation-name: bounce; animation-name: bounce; } @-webkit-keyframes flash { 0%, 50%, 100% { opacity: 1; } 25%, 75% { opacity: 0; } } @keyframes flash { 0%, 50%, 100% { opacity: 1; } 25%, 75% { opacity: 0; } } .flash { -webkit-animation-name: flash; animation-name: flash; } /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ @-webkit-keyframes pulse { 0% { -webkit-transform: scale(1); transform: scale(1); } 50% { -webkit-transform: scale(1.1); transform: scale(1.1); } 100% { -webkit-transform: scale(1); transform: scale(1); } } @keyframes pulse { 0% { -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); } 50% { -webkit-transform: scale(1.1); -ms-transform: scale(1.1); transform: scale(1.1); } 100% { -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); } } .pulse { -webkit-animation-name: pulse; animation-name: pulse; } @-webkit-keyframes shake { 0%, 100% { -webkit-transform: translateX(0); transform: translateX(0); } 10%, 30%, 50%, 70%, 90% { -webkit-transform: translateX(-10px); transform: translateX(-10px); } 20%, 40%, 60%, 80% { -webkit-transform: translateX(10px); transform: translateX(10px); } } @keyframes shake { 0%, 100% { -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } 10%, 30%, 50%, 70%, 90% { -webkit-transform: translateX(-10px); -ms-transform: translateX(-10px); transform: translateX(-10px); } 20%, 40%, 60%, 80% { -webkit-transform: translateX(10px); -ms-transform: translateX(10px); transform: translateX(10px); } } .shake { -webkit-animation-name: shake; animation-name: shake; } @-webkit-keyframes swing { 20% { -webkit-transform: rotate(15deg); transform: rotate(15deg); } 40% { -webkit-transform: rotate(-10deg); transform: rotate(-10deg); } 60% { -webkit-transform: rotate(5deg); transform: rotate(5deg); } 80% { -webkit-transform: rotate(-5deg); transform: rotate(-5deg); } 100% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } } @keyframes swing { 20% { -webkit-transform: rotate(15deg); -ms-transform: rotate(15deg); transform: rotate(15deg); } 40% { -webkit-transform: rotate(-10deg); -ms-transform: rotate(-10deg); transform: rotate(-10deg); } 60% { -webkit-transform: rotate(5deg); -ms-transform: rotate(5deg); transform: rotate(5deg); } 80% { -webkit-transform: rotate(-5deg); -ms-transform: rotate(-5deg); transform: rotate(-5deg); } 100% { -webkit-transform: rotate(0deg); -ms-transform: rotate(0deg); transform: rotate(0deg); } } .swing { -webkit-transform-origin: top center; -ms-transform-origin: top center; transform-origin: top center; -webkit-animation-name: swing; animation-name: swing; } @-webkit-keyframes tada { 0% { -webkit-transform: scale(1); transform: scale(1); } 10%, 20% { -webkit-transform: scale(0.9) rotate(-3deg); transform: scale(0.9) rotate(-3deg); } 30%, 50%, 70%, 90% { -webkit-transform: scale(1.1) rotate(3deg); transform: scale(1.1) rotate(3deg); } 40%, 60%, 80% { -webkit-transform: scale(1.1) rotate(-3deg); transform: scale(1.1) rotate(-3deg); } 100% { -webkit-transform: scale(1) rotate(0); transform: scale(1) rotate(0); } } @keyframes tada { 0% { -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); } 10%, 20% { -webkit-transform: scale(0.9) rotate(-3deg); -ms-transform: scale(0.9) rotate(-3deg); transform: scale(0.9) rotate(-3deg); } 30%, 50%, 70%, 90% { -webkit-transform: scale(1.1) rotate(3deg); -ms-transform: scale(1.1) rotate(3deg); transform: scale(1.1) rotate(3deg); } 40%, 60%, 80% { -webkit-transform: scale(1.1) rotate(-3deg); -ms-transform: scale(1.1) rotate(-3deg); transform: scale(1.1) rotate(-3deg); } 100% { -webkit-transform: scale(1) rotate(0); -ms-transform: scale(1) rotate(0); transform: scale(1) rotate(0); } } .tada { -webkit-animation-name: tada; animation-name: tada; } /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ @-webkit-keyframes wobble { 0% { -webkit-transform: translateX(0%); transform: translateX(0%); } 15% { -webkit-transform: translateX(-25%) rotate(-5deg); transform: translateX(-25%) rotate(-5deg); } 30% { -webkit-transform: translateX(20%) rotate(3deg); transform: translateX(20%) rotate(3deg); } 45% { -webkit-transform: translateX(-15%) rotate(-3deg); transform: translateX(-15%) rotate(-3deg); } 60% { -webkit-transform: translateX(10%) rotate(2deg); transform: translateX(10%) rotate(2deg); } 75% { -webkit-transform: translateX(-5%) rotate(-1deg); transform: translateX(-5%) rotate(-1deg); } 100% { -webkit-transform: translateX(0%); transform: translateX(0%); } } @keyframes wobble { 0% { -webkit-transform: translateX(0%); -ms-transform: translateX(0%); transform: translateX(0%); } 15% { -webkit-transform: translateX(-25%) rotate(-5deg); -ms-transform: translateX(-25%) rotate(-5deg); transform: translateX(-25%) rotate(-5deg); } 30% { -webkit-transform: translateX(20%) rotate(3deg); -ms-transform: translateX(20%) rotate(3deg); transform: translateX(20%) rotate(3deg); } 45% { -webkit-transform: translateX(-15%) rotate(-3deg); -ms-transform: translateX(-15%) rotate(-3deg); transform: translateX(-15%) rotate(-3deg); } 60% { -webkit-transform: translateX(10%) rotate(2deg); -ms-transform: translateX(10%) rotate(2deg); transform: translateX(10%) rotate(2deg); } 75% { -webkit-transform: translateX(-5%) rotate(-1deg); -ms-transform: translateX(-5%) rotate(-1deg); transform: translateX(-5%) rotate(-1deg); } 100% { -webkit-transform: translateX(0%); -ms-transform: translateX(0%); transform: translateX(0%); } } .wobble { -webkit-animation-name: wobble; animation-name: wobble; } @-webkit-keyframes bounceIn { 0% { opacity: 0; -webkit-transform: scale(.3); transform: scale(.3); } 50% { opacity: 1; -webkit-transform: scale(1.05); transform: scale(1.05); } 70% { -webkit-transform: scale(.9); transform: scale(.9); } 100% { -webkit-transform: scale(1); transform: scale(1); } } @keyframes bounceIn { 0% { opacity: 0; -webkit-transform: scale(.3); -ms-transform: scale(.3); transform: scale(.3); } 50% { opacity: 1; -webkit-transform: scale(1.05); -ms-transform: scale(1.05); transform: scale(1.05); } 70% { -webkit-transform: scale(.9); -ms-transform: scale(.9); transform: scale(.9); } 100% { -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); } } .bounceIn { -webkit-animation-name: bounceIn; animation-name: bounceIn; } @-webkit-keyframes bounceInDown { 0% { opacity: 0; -webkit-transform: translateY(-2000px); transform: translateY(-2000px); } 60% { opacity: 1; -webkit-transform: translateY(30px); transform: translateY(30px); } 80% { -webkit-transform: translateY(-10px); transform: translateY(-10px); } 100% { -webkit-transform: translateY(0); transform: translateY(0); } } @keyframes bounceInDown { 0% { opacity: 0; -webkit-transform: translateY(-2000px); -ms-transform: translateY(-2000px); transform: translateY(-2000px); } 60% { opacity: 1; -webkit-transform: translateY(30px); -ms-transform: translateY(30px); transform: translateY(30px); } 80% { -webkit-transform: translateY(-10px); -ms-transform: translateY(-10px); transform: translateY(-10px); } 100% { -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } } .bounceInDown { -webkit-animation-name: bounceInDown; animation-name: bounceInDown; } @-webkit-keyframes bounceInLeft { 0% { opacity: 0; -webkit-transform: translateX(-2000px); transform: translateX(-2000px); } 60% { opacity: 1; -webkit-transform: translateX(30px); transform: translateX(30px); } 80% { -webkit-transform: translateX(-10px); transform: translateX(-10px); } 100% { -webkit-transform: translateX(0); transform: translateX(0); } } @keyframes bounceInLeft { 0% { opacity: 0; -webkit-transform: translateX(-2000px); -ms-transform: translateX(-2000px); transform: translateX(-2000px); } 60% { opacity: 1; -webkit-transform: translateX(30px); -ms-transform: translateX(30px); transform: translateX(30px); } 80% { -webkit-transform: translateX(-10px); -ms-transform: translateX(-10px); transform: translateX(-10px); } 100% { -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } } .bounceInLeft { -webkit-animation-name: bounceInLeft; animation-name: bounceInLeft; } @-webkit-keyframes bounceInRight { 0% { opacity: 0; -webkit-transform: translateX(2000px); transform: translateX(2000px); } 60% { opacity: 1; -webkit-transform: translateX(-30px); transform: translateX(-30px); } 80% { -webkit-transform: translateX(10px); transform: translateX(10px); } 100% { -webkit-transform: translateX(0); transform: translateX(0); } } @keyframes bounceInRight { 0% { opacity: 0; -webkit-transform: translateX(2000px); -ms-transform: translateX(2000px); transform: translateX(2000px); } 60% { opacity: 1; -webkit-transform: translateX(-30px); -ms-transform: translateX(-30px); transform: translateX(-30px); } 80% { -webkit-transform: translateX(10px); -ms-transform: translateX(10px); transform: translateX(10px); } 100% { -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } } .bounceInRight { -webkit-animation-name: bounceInRight; animation-name: bounceInRight; } @-webkit-keyframes bounceInUp { 0% { opacity: 0; -webkit-transform: translateY(2000px); transform: translateY(2000px); } 60% { opacity: 1; -webkit-transform: translateY(-30px); transform: translateY(-30px); } 80% { -webkit-transform: translateY(10px); transform: translateY(10px); } 100% { -webkit-transform: translateY(0); transform: translateY(0); } } @keyframes bounceInUp { 0% { opacity: 0; -webkit-transform: translateY(2000px); -ms-transform: translateY(2000px); transform: translateY(2000px); } 60% { opacity: 1; -webkit-transform: translateY(-30px); -ms-transform: translateY(-30px); transform: translateY(-30px); } 80% { -webkit-transform: translateY(10px); -ms-transform: translateY(10px); transform: translateY(10px); } 100% { -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } } .bounceInUp { -webkit-animation-name: bounceInUp; animation-name: bounceInUp; } @-webkit-keyframes bounceOut { 0% { -webkit-transform: scale(1); transform: scale(1); } 25% { -webkit-transform: scale(.95); transform: scale(.95); } 50% { opacity: 1; -webkit-transform: scale(1.1); transform: scale(1.1); } 100% { opacity: 0; -webkit-transform: scale(.3); transform: scale(.3); } } @keyframes bounceOut { 0% { -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); } 25% { -webkit-transform: scale(.95); -ms-transform: scale(.95); transform: scale(.95); } 50% { opacity: 1; -webkit-transform: scale(1.1); -ms-transform: scale(1.1); transform: scale(1.1); } 100% { opacity: 0; -webkit-transform: scale(.3); -ms-transform: scale(.3); transform: scale(.3); } } .bounceOut { -webkit-animation-name: bounceOut; animation-name: bounceOut; } @-webkit-keyframes bounceOutDown { 0% { -webkit-transform: translateY(0); transform: translateY(0); } 20% { opacity: 1; -webkit-transform: translateY(-20px); transform: translateY(-20px); } 100% { opacity: 0; -webkit-transform: translateY(2000px); transform: translateY(2000px); } } @keyframes bounceOutDown { 0% { -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } 20% { opacity: 1; -webkit-transform: translateY(-20px); -ms-transform: translateY(-20px); transform: translateY(-20px); } 100% { opacity: 0; -webkit-transform: translateY(2000px); -ms-transform: translateY(2000px); transform: translateY(2000px); } } .bounceOutDown { -webkit-animation-name: bounceOutDown; animation-name: bounceOutDown; } @-webkit-keyframes bounceOutLeft { 0% { -webkit-transform: translateX(0); transform: translateX(0); } 20% { opacity: 1; -webkit-transform: translateX(20px); transform: translateX(20px); } 100% { opacity: 0; -webkit-transform: translateX(-2000px); transform: translateX(-2000px); } } @keyframes bounceOutLeft { 0% { -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } 20% { opacity: 1; -webkit-transform: translateX(20px); -ms-transform: translateX(20px); transform: translateX(20px); } 100% { opacity: 0; -webkit-transform: translateX(-2000px); -ms-transform: translateX(-2000px); transform: translateX(-2000px); } } .bounceOutLeft { -webkit-animation-name: bounceOutLeft; animation-name: bounceOutLeft; } @-webkit-keyframes bounceOutRight { 0% { -webkit-transform: translateX(0); transform: translateX(0); } 20% { opacity: 1; -webkit-transform: translateX(-20px); transform: translateX(-20px); } 100% { opacity: 0; -webkit-transform: translateX(2000px); transform: translateX(2000px); } } @keyframes bounceOutRight { 0% { -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } 20% { opacity: 1; -webkit-transform: translateX(-20px); -ms-transform: translateX(-20px); transform: translateX(-20px); } 100% { opacity: 0; -webkit-transform: translateX(2000px); -ms-transform: translateX(2000px); transform: translateX(2000px); } } .bounceOutRight { -webkit-animation-name: bounceOutRight; animation-name: bounceOutRight; } @-webkit-keyframes bounceOutUp { 0% { -webkit-transform: translateY(0); transform: translateY(0); } 20% { opacity: 1; -webkit-transform: translateY(20px); transform: translateY(20px); } 100% { opacity: 0; -webkit-transform: translateY(-2000px); transform: translateY(-2000px); } } @keyframes bounceOutUp { 0% { -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } 20% { opacity: 1; -webkit-transform: translateY(20px); -ms-transform: translateY(20px); transform: translateY(20px); } 100% { opacity: 0; -webkit-transform: translateY(-2000px); -ms-transform: translateY(-2000px); transform: translateY(-2000px); } } .bounceOutUp { -webkit-animation-name: bounceOutUp; animation-name: bounceOutUp; } @-webkit-keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } .fadeIn { -webkit-animation-name: fadeIn; animation-name: fadeIn; } @-webkit-keyframes fadeInDown { 0% { opacity: 0; -webkit-transform: translateY(-20px); transform: translateY(-20px); } 100% { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } } @keyframes fadeInDown { 0% { opacity: 0; -webkit-transform: translateY(-20px); -ms-transform: translateY(-20px); transform: translateY(-20px); } 100% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } } .fadeInDown { -webkit-animation-name: fadeInDown; animation-name: fadeInDown; } @-webkit-keyframes fadeInDownBig { 0% { opacity: 0; -webkit-transform: translateY(-2000px); transform: translateY(-2000px); } 100% { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } } @keyframes fadeInDownBig { 0% { opacity: 0; -webkit-transform: translateY(-2000px); -ms-transform: translateY(-2000px); transform: translateY(-2000px); } 100% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } } .fadeInDownBig { -webkit-animation-name: fadeInDownBig; animation-name: fadeInDownBig; } @-webkit-keyframes fadeInLeft { 0% { opacity: 0; -webkit-transform: translateX(-20px); transform: translateX(-20px); } 100% { opacity: 1; -webkit-transform: translateX(0); transform: translateX(0); } } @keyframes fadeInLeft { 0% { opacity: 0; -webkit-transform: translateX(-20px); -ms-transform: translateX(-20px); transform: translateX(-20px); } 100% { opacity: 1; -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } } .fadeInLeft { -webkit-animation-name: fadeInLeft; animation-name: fadeInLeft; } @-webkit-keyframes fadeInLeftBig { 0% { opacity: 0; -webkit-transform: translateX(-2000px); transform: translateX(-2000px); } 100% { opacity: 1; -webkit-transform: translateX(0); transform: translateX(0); } } @keyframes fadeInLeftBig { 0% { opacity: 0; -webkit-transform: translateX(-2000px); -ms-transform: translateX(-2000px); transform: translateX(-2000px); } 100% { opacity: 1; -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } } .fadeInLeftBig { -webkit-animation-name: fadeInLeftBig; animation-name: fadeInLeftBig; } @-webkit-keyframes fadeInRight { 0% { opacity: 0; -webkit-transform: translateX(20px); transform: translateX(20px); } 100% { opacity: 1; -webkit-transform: translateX(0); transform: translateX(0); } } @keyframes fadeInRight { 0% { opacity: 0; -webkit-transform: translateX(20px); -ms-transform: translateX(20px); transform: translateX(20px); } 100% { opacity: 1; -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } } .fadeInRight { -webkit-animation-name: fadeInRight; animation-name: fadeInRight; } @-webkit-keyframes fadeInRightBig { 0% { opacity: 0; -webkit-transform: translateX(2000px); transform: translateX(2000px); } 100% { opacity: 1; -webkit-transform: translateX(0); transform: translateX(0); } } @keyframes fadeInRightBig { 0% { opacity: 0; -webkit-transform: translateX(2000px); -ms-transform: translateX(2000px); transform: translateX(2000px); } 100% { opacity: 1; -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } } .fadeInRightBig { -webkit-animation-name: fadeInRightBig; animation-name: fadeInRightBig; } @-webkit-keyframes fadeInUp { 0% { opacity: 0; -webkit-transform: translateY(20px); transform: translateY(20px); } 100% { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } } @keyframes fadeInUp { 0% { opacity: 0; -webkit-transform: translateY(20px); -ms-transform: translateY(20px); transform: translateY(20px); } 100% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } } .fadeInUp { -webkit-animation-name: fadeInUp; animation-name: fadeInUp; } @-webkit-keyframes fadeInUpBig { 0% { opacity: 0; -webkit-transform: translateY(2000px); transform: translateY(2000px); } 100% { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } } @keyframes fadeInUpBig { 0% { opacity: 0; -webkit-transform: translateY(2000px); -ms-transform: translateY(2000px); transform: translateY(2000px); } 100% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } } .fadeInUpBig { -webkit-animation-name: fadeInUpBig; animation-name: fadeInUpBig; } @-webkit-keyframes fadeOut { 0% { opacity: 1; } 100% { opacity: 0; } } @keyframes fadeOut { 0% { opacity: 1; } 100% { opacity: 0; } } .fadeOut { -webkit-animation-name: fadeOut; animation-name: fadeOut; } @-webkit-keyframes fadeOutDown { 0% { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } 100% { opacity: 0; -webkit-transform: translateY(20px); transform: translateY(20px); } } @keyframes fadeOutDown { 0% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } 100% { opacity: 0; -webkit-transform: translateY(20px); -ms-transform: translateY(20px); transform: translateY(20px); } } .fadeOutDown { -webkit-animation-name: fadeOutDown; animation-name: fadeOutDown; } @-webkit-keyframes fadeOutDownBig { 0% { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } 100% { opacity: 0; -webkit-transform: translateY(2000px); transform: translateY(2000px); } } @keyframes fadeOutDownBig { 0% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } 100% { opacity: 0; -webkit-transform: translateY(2000px); -ms-transform: translateY(2000px); transform: translateY(2000px); } } .fadeOutDownBig { -webkit-animation-name: fadeOutDownBig; animation-name: fadeOutDownBig; } @-webkit-keyframes fadeOutLeft { 0% { opacity: 1; -webkit-transform: translateX(0); transform: translateX(0); } 100% { opacity: 0; -webkit-transform: translateX(-20px); transform: translateX(-20px); } } @keyframes fadeOutLeft { 0% { opacity: 1; -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } 100% { opacity: 0; -webkit-transform: translateX(-20px); -ms-transform: translateX(-20px); transform: translateX(-20px); } } .fadeOutLeft { -webkit-animation-name: fadeOutLeft; animation-name: fadeOutLeft; } @-webkit-keyframes fadeOutLeftBig { 0% { opacity: 1; -webkit-transform: translateX(0); transform: translateX(0); } 100% { opacity: 0; -webkit-transform: translateX(-2000px); transform: translateX(-2000px); } } @keyframes fadeOutLeftBig { 0% { opacity: 1; -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } 100% { opacity: 0; -webkit-transform: translateX(-2000px); -ms-transform: translateX(-2000px); transform: translateX(-2000px); } } .fadeOutLeftBig { -webkit-animation-name: fadeOutLeftBig; animation-name: fadeOutLeftBig; } @-webkit-keyframes fadeOutRight { 0% { opacity: 1; -webkit-transform: translateX(0); transform: translateX(0); } 100% { opacity: 0; -webkit-transform: translateX(20px); transform: translateX(20px); } } @keyframes fadeOutRight { 0% { opacity: 1; -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } 100% { opacity: 0; -webkit-transform: translateX(20px); -ms-transform: translateX(20px); transform: translateX(20px); } } .fadeOutRight { -webkit-animation-name: fadeOutRight; animation-name: fadeOutRight; } @-webkit-keyframes fadeOutRightBig { 0% { opacity: 1; -webkit-transform: translateX(0); transform: translateX(0); } 100% { opacity: 0; -webkit-transform: translateX(2000px); transform: translateX(2000px); } } @keyframes fadeOutRightBig { 0% { opacity: 1; -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } 100% { opacity: 0; -webkit-transform: translateX(2000px); -ms-transform: translateX(2000px); transform: translateX(2000px); } } .fadeOutRightBig { -webkit-animation-name: fadeOutRightBig; animation-name: fadeOutRightBig; } @-webkit-keyframes fadeOutUp { 0% { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } 100% { opacity: 0; -webkit-transform: translateY(-20px); transform: translateY(-20px); } } @keyframes fadeOutUp { 0% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } 100% { opacity: 0; -webkit-transform: translateY(-20px); -ms-transform: translateY(-20px); transform: translateY(-20px); } } .fadeOutUp { -webkit-animation-name: fadeOutUp; animation-name: fadeOutUp; } @-webkit-keyframes fadeOutUpBig { 0% { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } 100% { opacity: 0; -webkit-transform: translateY(-2000px); transform: translateY(-2000px); } } @keyframes fadeOutUpBig { 0% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } 100% { opacity: 0; -webkit-transform: translateY(-2000px); -ms-transform: translateY(-2000px); transform: translateY(-2000px); } } .fadeOutUpBig { -webkit-animation-name: fadeOutUpBig; animation-name: fadeOutUpBig; } @-webkit-keyframes flip { 0% { -webkit-transform: perspective(400px) translateZ(0) rotateY(0) scale(1); transform: perspective(400px) translateZ(0) rotateY(0) scale(1); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 40% { -webkit-transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1); transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 50% { -webkit-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1); transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 80% { -webkit-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(.95); transform: perspective(400px) translateZ(0) rotateY(360deg) scale(.95); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 100% { -webkit-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1); transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } } @keyframes flip { 0% { -webkit-transform: perspective(400px) translateZ(0) rotateY(0) scale(1); -ms-transform: perspective(400px) translateZ(0) rotateY(0) scale(1); transform: perspective(400px) translateZ(0) rotateY(0) scale(1); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 40% { -webkit-transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1); -ms-transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1); transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 50% { -webkit-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1); -ms-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1); transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 80% { -webkit-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(.95); -ms-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(.95); transform: perspective(400px) translateZ(0) rotateY(360deg) scale(.95); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 100% { -webkit-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1); -ms-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1); transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } } .animated.flip { -webkit-backface-visibility: visible; -ms-backface-visibility: visible; backface-visibility: visible; -webkit-animation-name: flip; animation-name: flip; } @-webkit-keyframes flipInX { 0% { -webkit-transform: perspective(400px) rotateX(90deg); transform: perspective(400px) rotateX(90deg); opacity: 0; } 40% { -webkit-transform: perspective(400px) rotateX(-10deg); transform: perspective(400px) rotateX(-10deg); } 70% { -webkit-transform: perspective(400px) rotateX(10deg); transform: perspective(400px) rotateX(10deg); } 100% { -webkit-transform: perspective(400px) rotateX(0deg); transform: perspective(400px) rotateX(0deg); opacity: 1; } } @keyframes flipInX { 0% { -webkit-transform: perspective(400px) rotateX(90deg); -ms-transform: perspective(400px) rotateX(90deg); transform: perspective(400px) rotateX(90deg); opacity: 0; } 40% { -webkit-transform: perspective(400px) rotateX(-10deg); -ms-transform: perspective(400px) rotateX(-10deg); transform: perspective(400px) rotateX(-10deg); } 70% { -webkit-transform: perspective(400px) rotateX(10deg); -ms-transform: perspective(400px) rotateX(10deg); transform: perspective(400px) rotateX(10deg); } 100% { -webkit-transform: perspective(400px) rotateX(0deg); -ms-transform: perspective(400px) rotateX(0deg); transform: perspective(400px) rotateX(0deg); opacity: 1; } } .flipInX { -webkit-backface-visibility: visible !important; -ms-backface-visibility: visible !important; backface-visibility: visible !important; -webkit-animation-name: flipInX; animation-name: flipInX; } @-webkit-keyframes flipInY { 0% { -webkit-transform: perspective(400px) rotateY(90deg); transform: perspective(400px) rotateY(90deg); opacity: 0; } 40% { -webkit-transform: perspective(400px) rotateY(-10deg); transform: perspective(400px) rotateY(-10deg); } 70% { -webkit-transform: perspective(400px) rotateY(10deg); transform: perspective(400px) rotateY(10deg); } 100% { -webkit-transform: perspective(400px) rotateY(0deg); transform: perspective(400px) rotateY(0deg); opacity: 1; } } @keyframes flipInY { 0% { -webkit-transform: perspective(400px) rotateY(90deg); -ms-transform: perspective(400px) rotateY(90deg); transform: perspective(400px) rotateY(90deg); opacity: 0; } 40% { -webkit-transform: perspective(400px) rotateY(-10deg); -ms-transform: perspective(400px) rotateY(-10deg); transform: perspective(400px) rotateY(-10deg); } 70% { -webkit-transform: perspective(400px) rotateY(10deg); -ms-transform: perspective(400px) rotateY(10deg); transform: perspective(400px) rotateY(10deg); } 100% { -webkit-transform: perspective(400px) rotateY(0deg); -ms-transform: perspective(400px) rotateY(0deg); transform: perspective(400px) rotateY(0deg); opacity: 1; } } .flipInY { -webkit-backface-visibility: visible !important; -ms-backface-visibility: visible !important; backface-visibility: visible !important; -webkit-animation-name: flipInY; animation-name: flipInY; } @-webkit-keyframes flipOutX { 0% { -webkit-transform: perspective(400px) rotateX(0deg); transform: perspective(400px) rotateX(0deg); opacity: 1; } 100% { -webkit-transform: perspective(400px) rotateX(90deg); transform: perspective(400px) rotateX(90deg); opacity: 0; } } @keyframes flipOutX { 0% { -webkit-transform: perspective(400px) rotateX(0deg); -ms-transform: perspective(400px) rotateX(0deg); transform: perspective(400px) rotateX(0deg); opacity: 1; } 100% { -webkit-transform: perspective(400px) rotateX(90deg); -ms-transform: perspective(400px) rotateX(90deg); transform: perspective(400px) rotateX(90deg); opacity: 0; } } .flipOutX { -webkit-animation-name: flipOutX; animation-name: flipOutX; -webkit-backface-visibility: visible !important; -ms-backface-visibility: visible !important; backface-visibility: visible !important; } @-webkit-keyframes flipOutY { 0% { -webkit-transform: perspective(400px) rotateY(0deg); transform: perspective(400px) rotateY(0deg); opacity: 1; } 100% { -webkit-transform: perspective(400px) rotateY(90deg); transform: perspective(400px) rotateY(90deg); opacity: 0; } } @keyframes flipOutY { 0% { -webkit-transform: perspective(400px) rotateY(0deg); -ms-transform: perspective(400px) rotateY(0deg); transform: perspective(400px) rotateY(0deg); opacity: 1; } 100% { -webkit-transform: perspective(400px) rotateY(90deg); -ms-transform: perspective(400px) rotateY(90deg); transform: perspective(400px) rotateY(90deg); opacity: 0; } } .flipOutY { -webkit-backface-visibility: visible !important; -ms-backface-visibility: visible !important; backface-visibility: visible !important; -webkit-animation-name: flipOutY; animation-name: flipOutY; } @-webkit-keyframes lightSpeedIn { 0% { -webkit-transform: translateX(100%) skewX(-30deg); transform: translateX(100%) skewX(-30deg); opacity: 0; } 60% { -webkit-transform: translateX(-20%) skewX(30deg); transform: translateX(-20%) skewX(30deg); opacity: 1; } 80% { -webkit-transform: translateX(0%) skewX(-15deg); transform: translateX(0%) skewX(-15deg); opacity: 1; } 100% { -webkit-transform: translateX(0%) skewX(0deg); transform: translateX(0%) skewX(0deg); opacity: 1; } } @keyframes lightSpeedIn { 0% { -webkit-transform: translateX(100%) skewX(-30deg); -ms-transform: translateX(100%) skewX(-30deg); transform: translateX(100%) skewX(-30deg); opacity: 0; } 60% { -webkit-transform: translateX(-20%) skewX(30deg); -ms-transform: translateX(-20%) skewX(30deg); transform: translateX(-20%) skewX(30deg); opacity: 1; } 80% { -webkit-transform: translateX(0%) skewX(-15deg); -ms-transform: translateX(0%) skewX(-15deg); transform: translateX(0%) skewX(-15deg); opacity: 1; } 100% { -webkit-transform: translateX(0%) skewX(0deg); -ms-transform: translateX(0%) skewX(0deg); transform: translateX(0%) skewX(0deg); opacity: 1; } } .lightSpeedIn { -webkit-animation-name: lightSpeedIn; animation-name: lightSpeedIn; -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } @-webkit-keyframes lightSpeedOut { 0% { -webkit-transform: translateX(0%) skewX(0deg); transform: translateX(0%) skewX(0deg); opacity: 1; } 100% { -webkit-transform: translateX(100%) skewX(-30deg); transform: translateX(100%) skewX(-30deg); opacity: 0; } } @keyframes lightSpeedOut { 0% { -webkit-transform: translateX(0%) skewX(0deg); -ms-transform: translateX(0%) skewX(0deg); transform: translateX(0%) skewX(0deg); opacity: 1; } 100% { -webkit-transform: translateX(100%) skewX(-30deg); -ms-transform: translateX(100%) skewX(-30deg); transform: translateX(100%) skewX(-30deg); opacity: 0; } } .lightSpeedOut { -webkit-animation-name: lightSpeedOut; animation-name: lightSpeedOut; -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } @-webkit-keyframes rotateIn { 0% { -webkit-transform-origin: center center; transform-origin: center center; -webkit-transform: rotate(-200deg); transform: rotate(-200deg); opacity: 0; } 100% { -webkit-transform-origin: center center; transform-origin: center center; -webkit-transform: rotate(0); transform: rotate(0); opacity: 1; } } @keyframes rotateIn { 0% { -webkit-transform-origin: center center; -ms-transform-origin: center center; transform-origin: center center; -webkit-transform: rotate(-200deg); -ms-transform: rotate(-200deg); transform: rotate(-200deg); opacity: 0; } 100% { -webkit-transform-origin: center center; -ms-transform-origin: center center; transform-origin: center center; -webkit-transform: rotate(0); -ms-transform: rotate(0); transform: rotate(0); opacity: 1; } } .rotateIn { -webkit-animation-name: rotateIn; animation-name: rotateIn; } @-webkit-keyframes rotateInDownLeft { 0% { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(-90deg); transform: rotate(-90deg); opacity: 0; } 100% { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(0); transform: rotate(0); opacity: 1; } } @keyframes rotateInDownLeft { 0% { -webkit-transform-origin: left bottom; -ms-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(-90deg); -ms-transform: rotate(-90deg); transform: rotate(-90deg); opacity: 0; } 100% { -webkit-transform-origin: left bottom; -ms-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(0); -ms-transform: rotate(0); transform: rotate(0); opacity: 1; } } .rotateInDownLeft { -webkit-animation-name: rotateInDownLeft; animation-name: rotateInDownLeft; } @-webkit-keyframes rotateInDownRight { 0% { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate(90deg); transform: rotate(90deg); opacity: 0; } 100% { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate(0); transform: rotate(0); opacity: 1; } } @keyframes rotateInDownRight { 0% { -webkit-transform-origin: right bottom; -ms-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate(90deg); -ms-transform: rotate(90deg); transform: rotate(90deg); opacity: 0; } 100% { -webkit-transform-origin: right bottom; -ms-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate(0); -ms-transform: rotate(0); transform: rotate(0); opacity: 1; } } .rotateInDownRight { -webkit-animation-name: rotateInDownRight; animation-name: rotateInDownRight; } @-webkit-keyframes rotateInUpLeft { 0% { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(90deg); transform: rotate(90deg); opacity: 0; } 100% { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(0); transform: rotate(0); opacity: 1; } } @keyframes rotateInUpLeft { 0% { -webkit-transform-origin: left bottom; -ms-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(90deg); -ms-transform: rotate(90deg); transform: rotate(90deg); opacity: 0; } 100% { -webkit-transform-origin: left bottom; -ms-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(0); -ms-transform: rotate(0); transform: rotate(0); opacity: 1; } } .rotateInUpLeft { -webkit-animation-name: rotateInUpLeft; animation-name: rotateInUpLeft; } @-webkit-keyframes rotateInUpRight { 0% { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate(-90deg); transform: rotate(-90deg); opacity: 0; } 100% { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate(0); transform: rotate(0); opacity: 1; } } @keyframes rotateInUpRight { 0% { -webkit-transform-origin: right bottom; -ms-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate(-90deg); -ms-transform: rotate(-90deg); transform: rotate(-90deg); opacity: 0; } 100% { -webkit-transform-origin: right bottom; -ms-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate(0); -ms-transform: rotate(0); transform: rotate(0); opacity: 1; } } .rotateInUpRight { -webkit-animation-name: rotateInUpRight; animation-name: rotateInUpRight; } @-webkit-keyframes rotateOut { 0% { -webkit-transform-origin: center center; transform-origin: center center; -webkit-transform: rotate(0); transform: rotate(0); opacity: 1; } 100% { -webkit-transform-origin: center center; transform-origin: center center; -webkit-transform: rotate(200deg); transform: rotate(200deg); opacity: 0; } } @keyframes rotateOut { 0% { -webkit-transform-origin: center center; -ms-transform-origin: center center; transform-origin: center center; -webkit-transform: rotate(0); -ms-transform: rotate(0); transform: rotate(0); opacity: 1; } 100% { -webkit-transform-origin: center center; -ms-transform-origin: center center; transform-origin: center center; -webkit-transform: rotate(200deg); -ms-transform: rotate(200deg); transform: rotate(200deg); opacity: 0; } } .rotateOut { -webkit-animation-name: rotateOut; animation-name: rotateOut; } @-webkit-keyframes rotateOutDownLeft { 0% { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(0); transform: rotate(0); opacity: 1; } 100% { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(90deg); transform: rotate(90deg); opacity: 0; } } @keyframes rotateOutDownLeft { 0% { -webkit-transform-origin: left bottom; -ms-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(0); -ms-transform: rotate(0); transform: rotate(0); opacity: 1; } 100% { -webkit-transform-origin: left bottom; -ms-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(90deg); -ms-transform: rotate(90deg); transform: rotate(90deg); opacity: 0; } } .rotateOutDownLeft { -webkit-animation-name: rotateOutDownLeft; animation-name: rotateOutDownLeft; } @-webkit-keyframes rotateOutDownRight { 0% { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate(0); transform: rotate(0); opacity: 1; } 100% { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate(-90deg); transform: rotate(-90deg); opacity: 0; } } @keyframes rotateOutDownRight { 0% { -webkit-transform-origin: right bottom; -ms-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate(0); -ms-transform: rotate(0); transform: rotate(0); opacity: 1; } 100% { -webkit-transform-origin: right bottom; -ms-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate(-90deg); -ms-transform: rotate(-90deg); transform: rotate(-90deg); opacity: 0; } } .rotateOutDownRight { -webkit-animation-name: rotateOutDownRight; animation-name: rotateOutDownRight; } @-webkit-keyframes rotateOutUpLeft { 0% { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(0); transform: rotate(0); opacity: 1; } 100% { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(-90deg); transform: rotate(-90deg); opacity: 0; } } @keyframes rotateOutUpLeft { 0% { -webkit-transform-origin: left bottom; -ms-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(0); -ms-transform: rotate(0); transform: rotate(0); opacity: 1; } 100% { -webkit-transform-origin: left bottom; -ms-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(-90deg); -ms-transform: rotate(-90deg); transform: rotate(-90deg); opacity: 0; } } .rotateOutUpLeft { -webkit-animation-name: rotateOutUpLeft; animation-name: rotateOutUpLeft; } @-webkit-keyframes rotateOutUpRight { 0% { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate(0); transform: rotate(0); opacity: 1; } 100% { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate(90deg); transform: rotate(90deg); opacity: 0; } } @keyframes rotateOutUpRight { 0% { -webkit-transform-origin: right bottom; -ms-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate(0); -ms-transform: rotate(0); transform: rotate(0); opacity: 1; } 100% { -webkit-transform-origin: right bottom; -ms-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate(90deg); -ms-transform: rotate(90deg); transform: rotate(90deg); opacity: 0; } } .rotateOutUpRight { -webkit-animation-name: rotateOutUpRight; animation-name: rotateOutUpRight; } @-webkit-keyframes slideInDown { 0% { opacity: 0; -webkit-transform: translateY(-2000px); transform: translateY(-2000px); } 100% { -webkit-transform: translateY(0); transform: translateY(0); } } @keyframes slideInDown { 0% { opacity: 0; -webkit-transform: translateY(-2000px); -ms-transform: translateY(-2000px); transform: translateY(-2000px); } 100% { -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } } .slideInDown { -webkit-animation-name: slideInDown; animation-name: slideInDown; } @-webkit-keyframes slideInLeft { 0% { opacity: 0; -webkit-transform: translateX(-2000px); transform: translateX(-2000px); } 100% { -webkit-transform: translateX(0); transform: translateX(0); } } @keyframes slideInLeft { 0% { opacity: 0; -webkit-transform: translateX(-2000px); -ms-transform: translateX(-2000px); transform: translateX(-2000px); } 100% { -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } } .slideInLeft { -webkit-animation-name: slideInLeft; animation-name: slideInLeft; } @-webkit-keyframes slideInRight { 0% { opacity: 0; -webkit-transform: translateX(2000px); transform: translateX(2000px); } 100% { -webkit-transform: translateX(0); transform: translateX(0); } } @keyframes slideInRight { 0% { opacity: 0; -webkit-transform: translateX(2000px); -ms-transform: translateX(2000px); transform: translateX(2000px); } 100% { -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } } .slideInRight { -webkit-animation-name: slideInRight; animation-name: slideInRight; } @-webkit-keyframes slideOutLeft { 0% { -webkit-transform: translateX(0); transform: translateX(0); } 100% { opacity: 0; -webkit-transform: translateX(-2000px); transform: translateX(-2000px); } } @keyframes slideOutLeft { 0% { -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } 100% { opacity: 0; -webkit-transform: translateX(-2000px); -ms-transform: translateX(-2000px); transform: translateX(-2000px); } } .slideOutLeft { -webkit-animation-name: slideOutLeft; animation-name: slideOutLeft; } @-webkit-keyframes slideOutRight { 0% { -webkit-transform: translateX(0); transform: translateX(0); } 100% { opacity: 0; -webkit-transform: translateX(2000px); transform: translateX(2000px); } } @keyframes slideOutRight { 0% { -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } 100% { opacity: 0; -webkit-transform: translateX(2000px); -ms-transform: translateX(2000px); transform: translateX(2000px); } } .slideOutRight { -webkit-animation-name: slideOutRight; animation-name: slideOutRight; } @-webkit-keyframes slideOutUp { 0% { -webkit-transform: translateY(0); transform: translateY(0); } 100% { opacity: 0; -webkit-transform: translateY(-2000px); transform: translateY(-2000px); } } @keyframes slideOutUp { 0% { -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } 100% { opacity: 0; -webkit-transform: translateY(-2000px); -ms-transform: translateY(-2000px); transform: translateY(-2000px); } } .slideOutUp { -webkit-animation-name: slideOutUp; animation-name: slideOutUp; } @-webkit-keyframes hinge { 0% { -webkit-transform: rotate(0); transform: rotate(0); -webkit-transform-origin: top left; transform-origin: top left; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } 20%, 60% { -webkit-transform: rotate(80deg); transform: rotate(80deg); -webkit-transform-origin: top left; transform-origin: top left; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } 40% { -webkit-transform: rotate(60deg); transform: rotate(60deg); -webkit-transform-origin: top left; transform-origin: top left; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } 80% { -webkit-transform: rotate(60deg) translateY(0); transform: rotate(60deg) translateY(0); opacity: 1; -webkit-transform-origin: top left; transform-origin: top left; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } 100% { -webkit-transform: translateY(700px); transform: translateY(700px); opacity: 0; } } @keyframes hinge { 0% { -webkit-transform: rotate(0); -ms-transform: rotate(0); transform: rotate(0); -webkit-transform-origin: top left; -ms-transform-origin: top left; transform-origin: top left; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } 20%, 60% { -webkit-transform: rotate(80deg); -ms-transform: rotate(80deg); transform: rotate(80deg); -webkit-transform-origin: top left; -ms-transform-origin: top left; transform-origin: top left; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } 40% { -webkit-transform: rotate(60deg); -ms-transform: rotate(60deg); transform: rotate(60deg); -webkit-transform-origin: top left; -ms-transform-origin: top left; transform-origin: top left; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } 80% { -webkit-transform: rotate(60deg) translateY(0); -ms-transform: rotate(60deg) translateY(0); transform: rotate(60deg) translateY(0); opacity: 1; -webkit-transform-origin: top left; -ms-transform-origin: top left; transform-origin: top left; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } 100% { -webkit-transform: translateY(700px); -ms-transform: translateY(700px); transform: translateY(700px); opacity: 0; } } .hinge { -webkit-animation-name: hinge; animation-name: hinge; } /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ @-webkit-keyframes rollIn { 0% { opacity: 0; -webkit-transform: translateX(-100%) rotate(-120deg); transform: translateX(-100%) rotate(-120deg); } 100% { opacity: 1; -webkit-transform: translateX(0px) rotate(0deg); transform: translateX(0px) rotate(0deg); } } @keyframes rollIn { 0% { opacity: 0; -webkit-transform: translateX(-100%) rotate(-120deg); -ms-transform: translateX(-100%) rotate(-120deg); transform: translateX(-100%) rotate(-120deg); } 100% { opacity: 1; -webkit-transform: translateX(0px) rotate(0deg); -ms-transform: translateX(0px) rotate(0deg); transform: translateX(0px) rotate(0deg); } } .rollIn { -webkit-animation-name: rollIn; animation-name: rollIn; } /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ @-webkit-keyframes rollOut { 0% { opacity: 1; -webkit-transform: translateX(0px) rotate(0deg); transform: translateX(0px) rotate(0deg); } 100% { opacity: 0; -webkit-transform: translateX(100%) rotate(120deg); transform: translateX(100%) rotate(120deg); } } @keyframes rollOut { 0% { opacity: 1; -webkit-transform: translateX(0px) rotate(0deg); -ms-transform: translateX(0px) rotate(0deg); transform: translateX(0px) rotate(0deg); } 100% { opacity: 0; -webkit-transform: translateX(100%) rotate(120deg); -ms-transform: translateX(100%) rotate(120deg); transform: translateX(100%) rotate(120deg); } } .rollOut { -webkit-animation-name: rollOut; animation-name: rollOut; } /* Magnific Popup CSS */ .mfp-bg { top: 0; left: 0; width: 100%; height: 100%; z-index: 1042; overflow: hidden; position: fixed; background: #0b0b0b; opacity: 0.8; } .mfp-wrap { top: 0; left: 0; width: 100%; height: 100%; z-index: 1043; position: fixed; outline: none !important; -webkit-backface-visibility: hidden; } .mfp-container { text-align: center; position: absolute; width: 100%; height: 100%; left: 0; top: 0; padding: 0 8px; box-sizing: border-box; } .mfp-container:before { content: ''; display: inline-block; height: 100%; vertical-align: middle; } .mfp-align-top .mfp-container:before { display: none; } .mfp-content { position: relative; display: inline-block; vertical-align: middle; margin: 0 auto; text-align: left; z-index: 1045; } .mfp-inline-holder .mfp-content, .mfp-ajax-holder .mfp-content { width: 100%; cursor: auto; } .mfp-ajax-cur { cursor: progress; } .mfp-zoom-out-cur, .mfp-zoom-out-cur .mfp-image-holder .mfp-close { cursor: -moz-zoom-out; cursor: -webkit-zoom-out; cursor: zoom-out; } .mfp-zoom { cursor: pointer; cursor: -webkit-zoom-in; cursor: -moz-zoom-in; cursor: zoom-in; } .mfp-auto-cursor .mfp-content { cursor: auto; } .mfp-close, .mfp-arrow, .mfp-preloader, .mfp-counter { -webkit-user-select: none; -moz-user-select: none; user-select: none; } .mfp-loading.mfp-figure { display: none; } .mfp-hide { display: none !important; } .mfp-preloader { color: #CCC; position: absolute; top: 50%; width: auto; text-align: center; margin-top: -0.8em; left: 8px; right: 8px; z-index: 1044; } .mfp-preloader a { color: #CCC; } .mfp-preloader a:hover { color: #FFF; } .mfp-s-ready .mfp-preloader { display: none; } .mfp-s-error .mfp-content { display: none; } button.mfp-close, button.mfp-arrow { overflow: visible; cursor: pointer; background: transparent; border: 0; -webkit-appearance: none; display: block; outline: none; padding: 0; z-index: 1046; box-shadow: none; touch-action: manipulation; } button::-moz-focus-inner { padding: 0; border: 0; } .mfp-close { width: 44px; height: 44px; line-height: 44px; position: absolute; right: 0; top: 0; text-decoration: none; text-align: center; opacity: 0.65; padding: 0 0 18px 10px; color: #FFF; font-style: normal; font-size: 28px; font-family: Arial, Baskerville, monospace; } .mfp-close:hover, .mfp-close:focus { opacity: 1; } .mfp-close:active { top: 1px; } .mfp-close-btn-in .mfp-close { color: #333; } .mfp-image-holder .mfp-close, .mfp-iframe-holder .mfp-close { color: #FFF; right: -6px; text-align: right; padding-right: 6px; width: 100%; } .mfp-counter { position: absolute; top: 0; right: 0; color: #CCC; font-size: 12px; line-height: 18px; white-space: nowrap; } .mfp-arrow { position: absolute; opacity: 0.65; margin: 0; top: 50%; margin-top: -55px; padding: 0; width: 90px; height: 110px; -webkit-tap-highlight-color: transparent; } .mfp-arrow:active { margin-top: -54px; } .mfp-arrow:hover, .mfp-arrow:focus { opacity: 1; } .mfp-arrow:before, .mfp-arrow:after { content: ''; display: block; width: 0; height: 0; position: absolute; left: 0; top: 0; margin-top: 35px; margin-left: 35px; border: medium inset transparent; } .mfp-arrow:after { border-top-width: 13px; border-bottom-width: 13px; top: 8px; } .mfp-arrow:before { border-top-width: 21px; border-bottom-width: 21px; opacity: 0.7; } .mfp-arrow-left { left: 0; } .mfp-arrow-left:after { border-right: 17px solid #FFF; margin-left: 31px; } .mfp-arrow-left:before { margin-left: 25px; border-right: 27px solid #3F3F3F; } .mfp-arrow-right { right: 0; } .mfp-arrow-right:after { border-left: 17px solid #FFF; margin-left: 39px; } .mfp-arrow-right:before { border-left: 27px solid #3F3F3F; } .mfp-iframe-holder { padding-top: 40px; padding-bottom: 40px; } .mfp-iframe-holder .mfp-content { line-height: 0; width: 100%; max-width: 900px; } .mfp-iframe-holder .mfp-close { top: -40px; } .mfp-iframe-scaler { width: 100%; height: 0; overflow: hidden; padding-top: 56.25%; } .mfp-iframe-scaler iframe { position: absolute; display: block; top: 0; left: 0; width: 100%; height: 100%; box-shadow: 0 0 8px rgba(0, 0, 0, 0.6); background: #000; } /* Main image in popup */ img.mfp-img { width: auto; max-width: 100%; height: auto; display: block; line-height: 0; box-sizing: border-box; padding: 40px 0 40px; margin: 0 auto; } /* The shadow behind the image */ .mfp-figure { line-height: 0; } .mfp-figure:after { content: ''; position: absolute; left: 0; top: 40px; bottom: 40px; display: block; right: 0; width: auto; height: auto; z-index: -1; box-shadow: 0 0 8px rgba(0, 0, 0, 0.6); background: #444; } .mfp-figure small { color: #BDBDBD; display: block; font-size: 12px; line-height: 14px; } .mfp-figure figure { margin: 0; } .mfp-bottom-bar { margin-top: -36px; position: absolute; top: 100%; left: 0; width: 100%; cursor: auto; } .mfp-title { text-align: left; line-height: 18px; color: #F3F3F3; word-wrap: break-word; padding-right: 36px; } .mfp-image-holder .mfp-content { max-width: 100%; } .mfp-gallery .mfp-image-holder .mfp-figure { cursor: pointer; } @media screen and (max-width: 800px) and (orientation: landscape), screen and (max-height: 300px) { /** * Remove all paddings around the image on small screen */ .mfp-img-mobile .mfp-image-holder { padding-left: 0; padding-right: 0; } .mfp-img-mobile img.mfp-img { padding: 0; } .mfp-img-mobile .mfp-figure:after { top: 0; bottom: 0; } .mfp-img-mobile .mfp-figure small { display: inline; margin-left: 5px; } .mfp-img-mobile .mfp-bottom-bar { background: rgba(0, 0, 0, 0.6); bottom: 0; margin: 0; top: auto; padding: 3px 5px; position: fixed; box-sizing: border-box; } .mfp-img-mobile .mfp-bottom-bar:empty { padding: 0; } .mfp-img-mobile .mfp-counter { right: 5px; top: 3px; } .mfp-img-mobile .mfp-close { top: 0; right: 0; width: 35px; height: 35px; line-height: 35px; background: rgba(0, 0, 0, 0.6); position: fixed; text-align: center; padding: 0; } } @media all and (max-width: 900px) { .mfp-arrow { -webkit-transform: scale(0.75); transform: scale(0.75); } .mfp-arrow-left { -webkit-transform-origin: 0; transform-origin: 0; } .mfp-arrow-right { -webkit-transform-origin: 100%; transform-origin: 100%; } .mfp-container { padding-left: 6px; padding-right: 6px; } } [data-simplebar]{position:relative;flex-direction:column;flex-wrap:wrap;justify-content:flex-start;align-content:flex-start;align-items:flex-start}.simplebar-wrapper{overflow:hidden;width:inherit;height:inherit;max-width:inherit;max-height:inherit}.simplebar-mask{direction:inherit;position:absolute;overflow:hidden;padding:0;margin:0;left:0;top:0;bottom:0;right:0;width:auto!important;height:auto!important;z-index:0}.simplebar-offset{direction:inherit!important;box-sizing:inherit!important;resize:none!important;position:absolute;top:0;left:0;bottom:0;right:0;padding:0;margin:0;-webkit-overflow-scrolling:touch}.simplebar-content-wrapper{direction:inherit;box-sizing:border-box!important;position:relative;display:block;height:100%;width:auto;visibility:visible;max-width:100%;max-height:100%;scrollbar-width:none;-ms-overflow-style:none}.simplebar-content-wrapper::-webkit-scrollbar,.simplebar-hide-scrollbar::-webkit-scrollbar{width:0;height:0}.simplebar-content:after,.simplebar-content:before{content:' ';display:table}.simplebar-placeholder{max-height:100%;max-width:100%;width:100%;pointer-events:none}.simplebar-height-auto-observer-wrapper{box-sizing:inherit!important;height:100%;width:100%;max-width:1px;position:relative;float:left;max-height:1px;overflow:hidden;z-index:-1;padding:0;margin:0;pointer-events:none;flex-grow:inherit;flex-shrink:0;flex-basis:0}.simplebar-height-auto-observer{box-sizing:inherit;display:block;opacity:0;position:absolute;top:0;left:0;height:1000%;width:1000%;min-height:1px;min-width:1px;overflow:hidden;pointer-events:none;z-index:-1}.simplebar-track{z-index:1;position:absolute;right:0;bottom:0;pointer-events:none;overflow:hidden}[data-simplebar].simplebar-dragging .simplebar-content{pointer-events:none;user-select:none;-webkit-user-select:none}[data-simplebar].simplebar-dragging .simplebar-track{pointer-events:all}.simplebar-scrollbar{position:absolute;left:0;right:0;min-height:10px}.simplebar-scrollbar:before{position:absolute;content:'';background:#000;border-radius:7px;left:2px;right:2px;opacity:0;transition:opacity .2s linear}.simplebar-scrollbar.simplebar-visible:before{opacity:.5;transition:opacity 0s linear}.simplebar-track.simplebar-vertical{top:0;width:11px}.simplebar-track.simplebar-vertical .simplebar-scrollbar:before{top:2px;bottom:2px}.simplebar-track.simplebar-horizontal{left:0;height:11px}.simplebar-track.simplebar-horizontal .simplebar-scrollbar:before{height:100%;left:2px;right:2px}.simplebar-track.simplebar-horizontal .simplebar-scrollbar{right:auto;left:0;top:2px;height:7px;min-height:0;min-width:10px;width:auto}[data-simplebar-direction=rtl] .simplebar-track.simplebar-vertical{right:auto;left:0}.hs-dummy-scrollbar-size{direction:rtl;position:fixed;opacity:0;visibility:hidden;height:500px;width:500px;overflow-y:hidden;overflow-x:scroll}.simplebar-hide-scrollbar{position:fixed;left:0;visibility:hidden;overflow-y:scroll;scrollbar-width:none;-ms-overflow-style:none} @charset "UTF-8"; /* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 License: none (public domain) */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, main, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; } /* HTML5 display-role reset for older browsers */ article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section { display: block; } body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } table { border-collapse: collapse; border-spacing: 0; } /* //////////////////// */ /* SETTINGS / VARIABLES */ /* //////////////////// */ /** @font-face Includes ... */ @font-face { font-family: 'Montserrat'; src: url("../fonts/montserrat/Montserrat-Regular.ttf"); font-style: normal; font-weight: 400; } @font-face { font-family: 'Montserrat'; src: url("../fonts/montserrat/Montserrat-RegularItalic.ttf"); font-style: italic; font-weight: 400; } @font-face { font-family: 'Montserrat'; src: url("../fonts/montserrat/Montserrat-Medium.ttf"); font-style: normal; font-weight: 500; } @font-face { font-family: 'Montserrat'; src: url("../fonts/montserrat/Montserrat-MediumItalic.ttf"); font-style: italic; font-weight: 500; } @font-face { font-family: 'Montserrat'; src: url("../fonts/montserrat/Montserrat-SemiBold.ttf"); font-style: normal; font-weight: 600; } @font-face { font-family: 'Montserrat'; src: url("../fonts/montserrat/Montserrat-SemiBoldItalic.ttf"); font-style: italic; font-weight: 600; } @font-face { font-family: 'Montserrat'; src: url("../fonts/montserrat/Montserrat-Bold.ttf"); font-style: normal; font-weight: 700; } @font-face { font-family: 'Montserrat'; src: url("../fonts/montserrat/Montserrat-BoldItalic.ttf"); font-style: italic; font-weight: 700; } /** Muli */ @font-face { font-family: 'Muli'; src: url("../fonts/muli/Muli-Regular.ttf"); font-style: normal; font-weight: 400; } @font-face { font-family: 'Muli'; src: url("../fonts/muli/Muli-RegularItalic.ttf"); font-style: italic; font-weight: 400; } @font-face { font-family: 'Muli'; src: url("../fonts/muli/Muli-SemiBold.ttf"); font-style: normal; font-weight: 600; } @font-face { font-family: 'Muli'; src: url("../fonts/muli/Muli-SemiBoldItalic.ttf"); font-style: italic; font-weight: 600; } /** Libre */ @font-face { font-family: 'Libre Baskerville'; src: url("../fonts/baskerville/LibreBaskerville-Italic.ttf"); font-style: italic; font-weight: 400; } @font-face { font-family: 'Libre Baskerville'; src: url("../fonts/baskerville/LibreBaskerville-Italic.ttf"); font-style: normal; font-weight: 400; } /** Explicit Color-Variables $color_red: red; $color_red-dark: darkred; ... */ /** Readable Color-Variables */ /** Global Variables */ /* If any value is `false` it will be ignored */ /** Mixins */ /** Use Describing Font-Weight Mixin Bsp: "@include fontweight(light)" @arg {*} $fontweight = light, regular, medium, bold */ /** Applies font-smoothing */ /** Removes any unit (px, rem, % etc.) from given argument */ /** Map deep get @arg {Map} $map = Map @arg {Arglist} $keys = Key chain @return {*} - Desired value */ /** Calculated a Rem value for a given Pixel Input @arg {Int} $px = Pixel-Value without "px"-Unit @return {String} = Calculated Rem-value */ /** Calculates the rem value for the base fontsize with px fallback @arg {Int} $sizeValue = Desired Font-Size without 'px' @arg {Bool|Int} = Set line-height property as well. true for automatic calculation from $sizeValue @args {Bool|Int} = Set the letter-spacing property as well. */ /** Gets font-size from array for a needed font-key @arg {*} $fontKey = h1, h2, h3, h4, h5, subline, copy, meta @arg {d|lg|md|sm|xs} $viewport = Viewport Font-Size-Stack the value should be fetched from @arg {Bool} $responsive = Should the mixin return all media queries/sizes for that fontKey? @arg {Bool} $letterspacing = Should the mixin also print the letterspacing-property? */ /** Generate Cascading Transition delays for child elements @arg {Int} $delay_step = Increase of delay for every child @arg {Int} $init_delay = Initial delay for the first child @arg {Int} $count = Number of children to cascade for */ /** Lets a div breakout of his parent without destroying the flow @arg {String} $realWidth = Width of the div inside its parent @arg {Type} $dir = Direction on which side the div breaks out of the parent @arg {Bool} $padding = If the extra space is filled with padding or with its content @arg {String} $maxWidth = How far the div should breakout (default: full viewport) */ /** Generates a fake-border around text @arg {Ing} $width = Border width @arg {Color} $color = Border color @arg {Int} $blur = Blur amount */ /** Sets the global placeholder color @arg {Color} $color_placeholder = Color to set placeholder to @arg {Bool} $child = Use mixin as global placeholder style (false) or within an element (true) */ /** Browser Targeting */ /** Only target Internet Explorers (not Edge) */ /** Only target Edge (not Internet Explorers) */ /** Only target Safari (mobile and desktop) */ /** * Combines targeting of Internet Explorer and Edge */ /** Only target Firefox */ /** Responsive Breakpoints */ /* ///// */ /* GRID */ /* ///// */ .row { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -ms-flex-wrap: wrap; flex-wrap: wrap; } @media (max-width: 670px) { .row:not(.keep-row) { -ms-flex-wrap: nowrap; flex-wrap: nowrap; } .row:not(.keep-row):not(.keep-row) { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } } .row.gutters, .row.gutters > .row { margin-left: -20px; } @media (max-width: 670px) { .row.gutters:not(.keep-row), .row.gutters > .row:not(.keep-row) { margin-left: 0; } } .row.gutters > .col, .row.gutters > .row > .col { margin-left: 20px; } @media (max-width: 670px) { .row.gutters:not(.keep-row) > .col, .row.gutters > .row:not(.keep-row) > .col { margin-left: 0; } } .row.around { -ms-flex-pack: distribute; justify-content: space-around; } .row.between { -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .row.auto .col { -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; } .flex-row { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-flow: row nowrap; flex-flow: row nowrap; } .col-1 { width: 8.33333%; } .offset-1 { margin-left: 8.33333%; } .col-2 { width: 16.66667%; } .offset-2 { margin-left: 16.66667%; } .col-3 { width: 25%; } .offset-3 { margin-left: 25%; } .col-4 { width: 33.33333%; } .offset-4 { margin-left: 33.33333%; } .col-5 { width: 41.66667%; } .offset-5 { margin-left: 41.66667%; } .col-6 { width: 50%; } .offset-6 { margin-left: 50%; } .col-7 { width: 58.33333%; } .offset-7 { margin-left: 58.33333%; } .col-8 { width: 66.66667%; } .offset-8 { margin-left: 66.66667%; } .col-9 { width: 75%; } .offset-9 { margin-left: 75%; } .col-10 { width: 83.33333%; } .offset-10 { margin-left: 83.33333%; } .col-11 { width: 91.66667%; } .offset-11 { margin-left: 91.66667%; } .col-12 { width: 100%; } .offset-12 { margin-left: 100%; } @media (max-width: 1260px) { .col-lg-0 { width: 0%; } .offset-lg-0 { margin-left: 0%; } } @media (max-width: 1260px) { .col-lg-1 { width: 8.33333%; } .offset-lg-1 { margin-left: 8.33333%; } } @media (max-width: 1260px) { .col-lg-2 { width: 16.66667%; } .offset-lg-2 { margin-left: 16.66667%; } } @media (max-width: 1260px) { .col-lg-3 { width: 25%; } .offset-lg-3 { margin-left: 25%; } } @media (max-width: 1260px) { .col-lg-4 { width: 33.33333%; } .offset-lg-4 { margin-left: 33.33333%; } } @media (max-width: 1260px) { .col-lg-5 { width: 41.66667%; } .offset-lg-5 { margin-left: 41.66667%; } } @media (max-width: 1260px) { .col-lg-6 { width: 50%; } .offset-lg-6 { margin-left: 50%; } } @media (max-width: 1260px) { .col-lg-7 { width: 58.33333%; } .offset-lg-7 { margin-left: 58.33333%; } } @media (max-width: 1260px) { .col-lg-8 { width: 66.66667%; } .offset-lg-8 { margin-left: 66.66667%; } } @media (max-width: 1260px) { .col-lg-9 { width: 75%; } .offset-lg-9 { margin-left: 75%; } } @media (max-width: 1260px) { .col-lg-10 { width: 83.33333%; } .offset-lg-10 { margin-left: 83.33333%; } } @media (max-width: 1260px) { .col-lg-11 { width: 91.66667%; } .offset-lg-11 { margin-left: 91.66667%; } } @media (max-width: 1260px) { .col-lg-12 { width: 100%; } .offset-lg-12 { margin-left: 100%; } } @media (max-width: 1023px) { .col-md-0 { width: 0%; } .offset-md-0 { margin-left: 0%; } } @media (max-width: 1023px) { .col-md-1 { width: 8.33333%; } .offset-md-1 { margin-left: 8.33333%; } } @media (max-width: 1023px) { .col-md-2 { width: 16.66667%; } .offset-md-2 { margin-left: 16.66667%; } } @media (max-width: 1023px) { .col-md-3 { width: 25%; } .offset-md-3 { margin-left: 25%; } } @media (max-width: 1023px) { .col-md-4 { width: 33.33333%; } .offset-md-4 { margin-left: 33.33333%; } } @media (max-width: 1023px) { .col-md-5 { width: 41.66667%; } .offset-md-5 { margin-left: 41.66667%; } } @media (max-width: 1023px) { .col-md-6 { width: 50%; } .offset-md-6 { margin-left: 50%; } } @media (max-width: 1023px) { .col-md-7 { width: 58.33333%; } .offset-md-7 { margin-left: 58.33333%; } } @media (max-width: 1023px) { .col-md-8 { width: 66.66667%; } .offset-md-8 { margin-left: 66.66667%; } } @media (max-width: 1023px) { .col-md-9 { width: 75%; } .offset-md-9 { margin-left: 75%; } } @media (max-width: 1023px) { .col-md-10 { width: 83.33333%; } .offset-md-10 { margin-left: 83.33333%; } } @media (max-width: 1023px) { .col-md-11 { width: 91.66667%; } .offset-md-11 { margin-left: 91.66667%; } } @media (max-width: 1023px) { .col-md-12 { width: 100%; } .offset-md-12 { margin-left: 100%; } } @media (max-width: 670px) { .col-sm-0 { width: 0%; } .offset-sm-0 { margin-left: 0%; } } @media (max-width: 670px) { .col-sm-1 { width: 8.33333%; } .offset-sm-1 { margin-left: 8.33333%; } } @media (max-width: 670px) { .col-sm-2 { width: 16.66667%; } .offset-sm-2 { margin-left: 16.66667%; } } @media (max-width: 670px) { .col-sm-3 { width: 25%; } .offset-sm-3 { margin-left: 25%; } } @media (max-width: 670px) { .col-sm-4 { width: 33.33333%; } .offset-sm-4 { margin-left: 33.33333%; } } @media (max-width: 670px) { .col-sm-5 { width: 41.66667%; } .offset-sm-5 { margin-left: 41.66667%; } } @media (max-width: 670px) { .col-sm-6 { width: 50%; } .offset-sm-6 { margin-left: 50%; } } @media (max-width: 670px) { .col-sm-7 { width: 58.33333%; } .offset-sm-7 { margin-left: 58.33333%; } } @media (max-width: 670px) { .col-sm-8 { width: 66.66667%; } .offset-sm-8 { margin-left: 66.66667%; } } @media (max-width: 670px) { .col-sm-9 { width: 75%; } .offset-sm-9 { margin-left: 75%; } } @media (max-width: 670px) { .col-sm-10 { width: 83.33333%; } .offset-sm-10 { margin-left: 83.33333%; } } @media (max-width: 670px) { .col-sm-11 { width: 91.66667%; } .offset-sm-11 { margin-left: 91.66667%; } } @media (max-width: 670px) { .col-sm-12 { width: 100%; } .offset-sm-12 { margin-left: 100%; } } @media (max-width: 480px) { .col-xs-0 { width: 0%; } .offset-xs-0 { margin-left: 0%; } } @media (max-width: 480px) { .col-xs-1 { width: 8.33333%; } .offset-xs-1 { margin-left: 8.33333%; } } @media (max-width: 480px) { .col-xs-2 { width: 16.66667%; } .offset-xs-2 { margin-left: 16.66667%; } } @media (max-width: 480px) { .col-xs-3 { width: 25%; } .offset-xs-3 { margin-left: 25%; } } @media (max-width: 480px) { .col-xs-4 { width: 33.33333%; } .offset-xs-4 { margin-left: 33.33333%; } } @media (max-width: 480px) { .col-xs-5 { width: 41.66667%; } .offset-xs-5 { margin-left: 41.66667%; } } @media (max-width: 480px) { .col-xs-6 { width: 50%; } .offset-xs-6 { margin-left: 50%; } } @media (max-width: 480px) { .col-xs-7 { width: 58.33333%; } .offset-xs-7 { margin-left: 58.33333%; } } @media (max-width: 480px) { .col-xs-8 { width: 66.66667%; } .offset-xs-8 { margin-left: 66.66667%; } } @media (max-width: 480px) { .col-xs-9 { width: 75%; } .offset-xs-9 { margin-left: 75%; } } @media (max-width: 480px) { .col-xs-10 { width: 83.33333%; } .offset-xs-10 { margin-left: 83.33333%; } } @media (max-width: 480px) { .col-xs-11 { width: 91.66667%; } .offset-xs-11 { margin-left: 91.66667%; } } @media (max-width: 480px) { .col-xs-12 { width: 100%; } .offset-xs-12 { margin-left: 100%; } } .gutters > .col-0 { width: calc(0% - 20px); } .gutters > .offset-0 { margin-left: calc(0% + 20px) !important; } .gutters > .col-1 { width: calc(8.33333% - 20px); } .gutters > .offset-1 { margin-left: calc(8.33333% + 20px) !important; } .gutters > .col-2 { width: calc(16.66667% - 20px); } .gutters > .offset-2 { margin-left: calc(16.66667% + 20px) !important; } .gutters > .col-3 { width: calc(25% - 20px); } .gutters > .offset-3 { margin-left: calc(25% + 20px) !important; } .gutters > .col-4 { width: calc(33.33333% - 20px); } .gutters > .offset-4 { margin-left: calc(33.33333% + 20px) !important; } .gutters > .col-5 { width: calc(41.66667% - 20px); } .gutters > .offset-5 { margin-left: calc(41.66667% + 20px) !important; } .gutters > .col-6 { width: calc(50% - 20px); } .gutters > .offset-6 { margin-left: calc(50% + 20px) !important; } .gutters > .col-7 { width: calc(58.33333% - 20px); } .gutters > .offset-7 { margin-left: calc(58.33333% + 20px) !important; } .gutters > .col-8 { width: calc(66.66667% - 20px); } .gutters > .offset-8 { margin-left: calc(66.66667% + 20px) !important; } .gutters > .col-9 { width: calc(75% - 20px); } .gutters > .offset-9 { margin-left: calc(75% + 20px) !important; } .gutters > .col-10 { width: calc(83.33333% - 20px); } .gutters > .offset-10 { margin-left: calc(83.33333% + 20px) !important; } .gutters > .col-11 { width: calc(91.66667% - 20px); } .gutters > .offset-11 { margin-left: calc(91.66667% + 20px) !important; } .gutters > .col-12 { width: calc(100% - 20px); } .gutters > .offset-12 { margin-left: calc(100% + 20px) !important; } @media (max-width: 1260px) { .gutters > .col-lg-0 { width: calc(0% - 20px); } .gutters > .offset-lg-0 { margin-left: calc(0% + 20px) !important; } } @media (max-width: 1260px) { .gutters > .col-lg-1 { width: calc(8.33333% - 20px); } .gutters > .offset-lg-1 { margin-left: calc(8.33333% + 20px) !important; } } @media (max-width: 1260px) { .gutters > .col-lg-2 { width: calc(16.66667% - 20px); } .gutters > .offset-lg-2 { margin-left: calc(16.66667% + 20px) !important; } } @media (max-width: 1260px) { .gutters > .col-lg-3 { width: calc(25% - 20px); } .gutters > .offset-lg-3 { margin-left: calc(25% + 20px) !important; } } @media (max-width: 1260px) { .gutters > .col-lg-4 { width: calc(33.33333% - 20px); } .gutters > .offset-lg-4 { margin-left: calc(33.33333% + 20px) !important; } } @media (max-width: 1260px) { .gutters > .col-lg-5 { width: calc(41.66667% - 20px); } .gutters > .offset-lg-5 { margin-left: calc(41.66667% + 20px) !important; } } @media (max-width: 1260px) { .gutters > .col-lg-6 { width: calc(50% - 20px); } .gutters > .offset-lg-6 { margin-left: calc(50% + 20px) !important; } } @media (max-width: 1260px) { .gutters > .col-lg-7 { width: calc(58.33333% - 20px); } .gutters > .offset-lg-7 { margin-left: calc(58.33333% + 20px) !important; } } @media (max-width: 1260px) { .gutters > .col-lg-8 { width: calc(66.66667% - 20px); } .gutters > .offset-lg-8 { margin-left: calc(66.66667% + 20px) !important; } } @media (max-width: 1260px) { .gutters > .col-lg-9 { width: calc(75% - 20px); } .gutters > .offset-lg-9 { margin-left: calc(75% + 20px) !important; } } @media (max-width: 1260px) { .gutters > .col-lg-10 { width: calc(83.33333% - 20px); } .gutters > .offset-lg-10 { margin-left: calc(83.33333% + 20px) !important; } } @media (max-width: 1260px) { .gutters > .col-lg-11 { width: calc(91.66667% - 20px); } .gutters > .offset-lg-11 { margin-left: calc(91.66667% + 20px) !important; } } @media (max-width: 1260px) { .gutters > .col-lg-12 { width: calc(100% - 20px); } .gutters > .offset-lg-12 { margin-left: calc(100% + 20px) !important; } } @media (max-width: 1023px) { .gutters > .col-md-0 { width: calc(0% - 20px); } .gutters > .offset-md-0 { margin-left: calc(0% + 20px) !important; } } @media (max-width: 1023px) { .gutters > .col-md-1 { width: calc(8.33333% - 20px); } .gutters > .offset-md-1 { margin-left: calc(8.33333% + 20px) !important; } } @media (max-width: 1023px) { .gutters > .col-md-2 { width: calc(16.66667% - 20px); } .gutters > .offset-md-2 { margin-left: calc(16.66667% + 20px) !important; } } @media (max-width: 1023px) { .gutters > .col-md-3 { width: calc(25% - 20px); } .gutters > .offset-md-3 { margin-left: calc(25% + 20px) !important; } } @media (max-width: 1023px) { .gutters > .col-md-4 { width: calc(33.33333% - 20px); } .gutters > .offset-md-4 { margin-left: calc(33.33333% + 20px) !important; } } @media (max-width: 1023px) { .gutters > .col-md-5 { width: calc(41.66667% - 20px); } .gutters > .offset-md-5 { margin-left: calc(41.66667% + 20px) !important; } } @media (max-width: 1023px) { .gutters > .col-md-6 { width: calc(50% - 20px); } .gutters > .offset-md-6 { margin-left: calc(50% + 20px) !important; } } @media (max-width: 1023px) { .gutters > .col-md-7 { width: calc(58.33333% - 20px); } .gutters > .offset-md-7 { margin-left: calc(58.33333% + 20px) !important; } } @media (max-width: 1023px) { .gutters > .col-md-8 { width: calc(66.66667% - 20px); } .gutters > .offset-md-8 { margin-left: calc(66.66667% + 20px) !important; } } @media (max-width: 1023px) { .gutters > .col-md-9 { width: calc(75% - 20px); } .gutters > .offset-md-9 { margin-left: calc(75% + 20px) !important; } } @media (max-width: 1023px) { .gutters > .col-md-10 { width: calc(83.33333% - 20px); } .gutters > .offset-md-10 { margin-left: calc(83.33333% + 20px) !important; } } @media (max-width: 1023px) { .gutters > .col-md-11 { width: calc(91.66667% - 20px); } .gutters > .offset-md-11 { margin-left: calc(91.66667% + 20px) !important; } } @media (max-width: 1023px) { .gutters > .col-md-12 { width: calc(100% - 20px); } .gutters > .offset-md-12 { margin-left: calc(100% + 20px) !important; } } @media (max-width: 670px) { .gutters > .col-sm-0 { width: calc(0% - 20px); } .gutters > .offset-sm-0 { margin-left: calc(0% + 20px) !important; } } @media (max-width: 670px) { .gutters > .col-sm-1 { width: calc(8.33333% - 20px); } .gutters > .offset-sm-1 { margin-left: calc(8.33333% + 20px) !important; } } @media (max-width: 670px) { .gutters > .col-sm-2 { width: calc(16.66667% - 20px); } .gutters > .offset-sm-2 { margin-left: calc(16.66667% + 20px) !important; } } @media (max-width: 670px) { .gutters > .col-sm-3 { width: calc(25% - 20px); } .gutters > .offset-sm-3 { margin-left: calc(25% + 20px) !important; } } @media (max-width: 670px) { .gutters > .col-sm-4 { width: calc(33.33333% - 20px); } .gutters > .offset-sm-4 { margin-left: calc(33.33333% + 20px) !important; } } @media (max-width: 670px) { .gutters > .col-sm-5 { width: calc(41.66667% - 20px); } .gutters > .offset-sm-5 { margin-left: calc(41.66667% + 20px) !important; } } @media (max-width: 670px) { .gutters > .col-sm-6 { width: calc(50% - 20px); } .gutters > .offset-sm-6 { margin-left: calc(50% + 20px) !important; } } @media (max-width: 670px) { .gutters > .col-sm-7 { width: calc(58.33333% - 20px); } .gutters > .offset-sm-7 { margin-left: calc(58.33333% + 20px) !important; } } @media (max-width: 670px) { .gutters > .col-sm-8 { width: calc(66.66667% - 20px); } .gutters > .offset-sm-8 { margin-left: calc(66.66667% + 20px) !important; } } @media (max-width: 670px) { .gutters > .col-sm-9 { width: calc(75% - 20px); } .gutters > .offset-sm-9 { margin-left: calc(75% + 20px) !important; } } @media (max-width: 670px) { .gutters > .col-sm-10 { width: calc(83.33333% - 20px); } .gutters > .offset-sm-10 { margin-left: calc(83.33333% + 20px) !important; } } @media (max-width: 670px) { .gutters > .col-sm-11 { width: calc(91.66667% - 20px); } .gutters > .offset-sm-11 { margin-left: calc(91.66667% + 20px) !important; } } @media (max-width: 670px) { .gutters > .col-sm-12 { width: calc(100% - 20px); } .gutters > .offset-sm-12 { margin-left: calc(100% + 20px) !important; } } @media (max-width: 480px) { .gutters > .col-xs-0 { width: calc(0% - 20px); } .gutters > .offset-xs-0 { margin-left: calc(0% + 20px) !important; } } @media (max-width: 480px) { .gutters > .col-xs-1 { width: calc(8.33333% - 20px); } .gutters > .offset-xs-1 { margin-left: calc(8.33333% + 20px) !important; } } @media (max-width: 480px) { .gutters > .col-xs-2 { width: calc(16.66667% - 20px); } .gutters > .offset-xs-2 { margin-left: calc(16.66667% + 20px) !important; } } @media (max-width: 480px) { .gutters > .col-xs-3 { width: calc(25% - 20px); } .gutters > .offset-xs-3 { margin-left: calc(25% + 20px) !important; } } @media (max-width: 480px) { .gutters > .col-xs-4 { width: calc(33.33333% - 20px); } .gutters > .offset-xs-4 { margin-left: calc(33.33333% + 20px) !important; } } @media (max-width: 480px) { .gutters > .col-xs-5 { width: calc(41.66667% - 20px); } .gutters > .offset-xs-5 { margin-left: calc(41.66667% + 20px) !important; } } @media (max-width: 480px) { .gutters > .col-xs-6 { width: calc(50% - 20px); } .gutters > .offset-xs-6 { margin-left: calc(50% + 20px) !important; } } @media (max-width: 480px) { .gutters > .col-xs-7 { width: calc(58.33333% - 20px); } .gutters > .offset-xs-7 { margin-left: calc(58.33333% + 20px) !important; } } @media (max-width: 480px) { .gutters > .col-xs-8 { width: calc(66.66667% - 20px); } .gutters > .offset-xs-8 { margin-left: calc(66.66667% + 20px) !important; } } @media (max-width: 480px) { .gutters > .col-xs-9 { width: calc(75% - 20px); } .gutters > .offset-xs-9 { margin-left: calc(75% + 20px) !important; } } @media (max-width: 480px) { .gutters > .col-xs-10 { width: calc(83.33333% - 20px); } .gutters > .offset-xs-10 { margin-left: calc(83.33333% + 20px) !important; } } @media (max-width: 480px) { .gutters > .col-xs-11 { width: calc(91.66667% - 20px); } .gutters > .offset-xs-11 { margin-left: calc(91.66667% + 20px) !important; } } @media (max-width: 480px) { .gutters > .col-xs-12 { width: calc(100% - 20px); } .gutters > .offset-xs-12 { margin-left: calc(100% + 20px) !important; } } @media (max-width: 670px) { .row:not(.keep-row) [class^='offset-'], .row:not(.keep-row) [class*=' offset-'] { margin-left: 0 !important; } } .first { -webkit-box-ordinal-group: 0; -ms-flex-order: -1; order: -1; } .last { -webkit-box-ordinal-group: 2; -ms-flex-order: 1; order: 1; } @media (max-width: 670px) { .row:not(.keep-row) > .col { margin-left: 0; width: 100%; } .row:not(.keep-row).gutters > .col { margin-bottom: 20px; } .first-sm { -webkit-box-ordinal-group: 0; -ms-flex-order: -1; order: -1; } .last-sm { -webkit-box-ordinal-group: 2; -ms-flex-order: 1; order: 1; } } @media (max-width: 1023px) { .first-md { -webkit-box-ordinal-group: 0; -ms-flex-order: -1; order: -1; } } .gutters .column.push-left, .push-left { margin-right: auto; } .gutters .column.push-right, .push-right { margin-left: auto; } .gutters .column.push-center, .push-center { margin-left: auto; margin-right: auto; } .gutters .column.push-middle, .push-middle { margin-top: auto; margin-bottom: auto; } .push-bottom { margin-top: auto; } @media (max-width: 670px) { .gutters .column.push-left-sm, .push-left-sm { margin-left: 0; } .gutters .column.push-center-sm, .push-center-sm { margin-left: auto; margin-right: auto; } .push-top-sm { margin-top: 0; } } .align-middle { -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .align-right { -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; } .align-center { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .align-bottom { -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; } .align-top { -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; } @media (max-width: 670px) { .align-left-sm { -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; } } .fixed { position: fixed; top: 0; left: 0; z-index: 10; width: 100%; } /* ///////////// */ /* GLOBAL STYLES */ /* ///////////// */ /** Generates all available font-sizes as element and class */ .h0 { font-size: 56px; font-size: 3.11111rem; line-height: 62px; line-height: 3.44444rem; letter-spacing: 1px; } .h1 { font-size: 34px; font-size: 1.88889rem; line-height: 37px; line-height: 2.05556rem; letter-spacing: 0.94px; } .h2 { font-size: 24px; font-size: 1.33333rem; line-height: 24px; line-height: 1.33333rem; letter-spacing: 0.4px; } .h3 { font-size: 20px; font-size: 1.11111rem; line-height: 21px; line-height: 1.16667rem; letter-spacing: 0.4px; } .h4 { font-size: 18px; font-size: 1rem; line-height: 21px; line-height: 1.16667rem; letter-spacing: 0.7px; } .h5 { font-size: 16px; font-size: 0.88889rem; line-height: 23px; line-height: 1.27778rem; } .h6 { font-size: 16px; font-size: 0.88889rem; line-height: 23px; line-height: 1.27778rem; } .copy { font-size: 16px; font-size: 0.88889rem; line-height: 23px; line-height: 1.27778rem; letter-spacing: 0.3px; } .meta { font-size: 13px; font-size: 0.72222rem; line-height: 18px; line-height: 1rem; } @media (max-width: 1260px) { .h0 { font-size: 56px; font-size: 3.11111rem; line-height: 62px; line-height: 3.44444rem; letter-spacing: 1px; } } @media (max-width: 1260px) { .h1 { font-size: 34px; font-size: 1.88889rem; line-height: 37px; line-height: 2.05556rem; letter-spacing: 0.94px; } } @media (max-width: 1260px) { .h2 { font-size: 24px; font-size: 1.33333rem; line-height: 24px; line-height: 1.33333rem; letter-spacing: 0.4px; } } @media (max-width: 1260px) { .h3 { font-size: 20px; font-size: 1.11111rem; line-height: 21px; line-height: 1.16667rem; letter-spacing: 0.4px; } } @media (max-width: 1260px) { .h4 { font-size: 18px; font-size: 1rem; line-height: 21px; line-height: 1.16667rem; letter-spacing: 0.7px; } } @media (max-width: 1260px) { .h5 { font-size: 16px; font-size: 0.88889rem; line-height: 23px; line-height: 1.27778rem; } } @media (max-width: 1260px) { .h6 { font-size: 16px; font-size: 0.88889rem; line-height: 23px; line-height: 1.27778rem; } } @media (max-width: 1260px) { .copy { font-size: 16px; font-size: 0.88889rem; line-height: 23px; line-height: 1.27778rem; letter-spacing: 0.3px; } } @media (max-width: 1260px) { .meta { font-size: 13px; font-size: 0.72222rem; line-height: 16px; line-height: 0.88889rem; } } @media (max-width: 1023px) { .h0 { font-size: 56px; font-size: 3.11111rem; line-height: 62px; line-height: 3.44444rem; letter-spacing: 1px; } } @media (max-width: 1023px) { .h1 { font-size: 29px; font-size: 1.61111rem; line-height: 31px; line-height: 1.72222rem; letter-spacing: 0.8px; } } @media (max-width: 1023px) { .h2 { font-size: 20px; font-size: 1.11111rem; line-height: 20px; line-height: 1.11111rem; letter-spacing: 0.33px; } } @media (max-width: 1023px) { .h3 { font-size: 18px; font-size: 1rem; line-height: 19px; line-height: 1.05556rem; letter-spacing: 0.7px; } } @media (max-width: 1023px) { .h4 { font-size: 16px; font-size: 0.88889rem; line-height: 21px; line-height: 1.16667rem; letter-spacing: 0.7px; } } @media (max-width: 1023px) { .h5 { font-size: 16px; font-size: 0.88889rem; line-height: 23px; line-height: 1.27778rem; } } @media (max-width: 1023px) { .h6 { font-size: 16px; font-size: 0.88889rem; line-height: 23px; line-height: 1.27778rem; } } @media (max-width: 1023px) { .copy { font-size: 14px; font-size: 0.77778rem; line-height: 18px; line-height: 1rem; letter-spacing: 0.3px; } } @media (max-width: 1023px) { .meta { font-size: 12px; font-size: 0.66667rem; line-height: 14px; line-height: 0.77778rem; } } @media (max-width: 670px) { .h0 { font-size: 56px; font-size: 3.11111rem; line-height: 62px; line-height: 3.44444rem; letter-spacing: 1px; } } @media (max-width: 670px) { .h1 { font-size: 24px; font-size: 1.33333rem; line-height: 29px; line-height: 1.61111rem; letter-spacing: 0.66px; } } @media (max-width: 670px) { .h2 { font-size: 20px; font-size: 1.11111rem; line-height: 20px; line-height: 1.11111rem; letter-spacing: 0.33px; } } @media (max-width: 670px) { .h3 { font-size: 16px; font-size: 0.88889rem; line-height: 18px; line-height: 1rem; letter-spacing: 0.7px; } } @media (max-width: 670px) { .h4 { font-size: 16px; font-size: 0.88889rem; line-height: 21px; line-height: 1.16667rem; letter-spacing: 0.7px; } } @media (max-width: 670px) { .h5 { font-size: 16px; font-size: 0.88889rem; line-height: 23px; line-height: 1.27778rem; } } @media (max-width: 670px) { .h6 { font-size: 16px; font-size: 0.88889rem; line-height: 23px; line-height: 1.27778rem; } } @media (max-width: 670px) { .copy { font-size: 14px; font-size: 0.77778rem; line-height: 18px; line-height: 1rem; letter-spacing: 0.3px; } } @media (max-width: 670px) { .meta { font-size: 12px; font-size: 0.66667rem; line-height: 14px; line-height: 0.77778rem; } } @media (max-width: 480px) { .h0 { font-size: 56px; font-size: 3.11111rem; line-height: 62px; line-height: 3.44444rem; letter-spacing: 1px; } } @media (max-width: 480px) { .h1 { font-size: 24px; font-size: 1.33333rem; line-height: 29px; line-height: 1.61111rem; letter-spacing: 0.66px; } } @media (max-width: 480px) { .h2 { font-size: 20px; font-size: 1.11111rem; line-height: 20px; line-height: 1.11111rem; letter-spacing: 0.33px; } } @media (max-width: 480px) { .h3 { font-size: 16px; font-size: 0.88889rem; line-height: 18px; line-height: 1rem; letter-spacing: 0.7px; } } @media (max-width: 480px) { .h4 { font-size: 16px; font-size: 0.88889rem; line-height: 21px; line-height: 1.16667rem; letter-spacing: 0.7px; } } @media (max-width: 480px) { .h5 { font-size: 16px; font-size: 0.88889rem; line-height: 23px; line-height: 1.27778rem; } } @media (max-width: 480px) { .h6 { font-size: 16px; font-size: 0.88889rem; line-height: 23px; line-height: 1.27778rem; } } @media (max-width: 480px) { .copy { font-size: 14px; font-size: 0.77778rem; line-height: 18px; line-height: 1rem; letter-spacing: 0.3px; } } @media (max-width: 480px) { .meta { font-size: 12px; font-size: 0.66667rem; line-height: 14px; line-height: 0.77778rem; } } /** Sets the Font-Family for all headings inside a selector */ /** Sets the Font-Family for all buttons inside a selector */ a { color: #52595f; } a:hover { color: #5e666d; } strong, b { font-weight: 700; } .semibold { font-weight: 600; } .medium { font-weight: 500; } i, em { font-style: italic; } .nostyle { font-size: inherit; font-weight: inherit; color: inherit; } a.clear-links, .clear-links a { text-decoration: none; color: inherit; } a.clear-links:hover, .clear-links a:hover { color: inherit; text-decoration: none; } .action-item__label, .breadcrumb, .download-listing__suffix, .listing-post__meta-row, .news-post__meta-row, .gfield_description, .validation_error, .validation_message, #mce-error-response, #mce-success-response, .product-details__checks, .product-specs__row, .product-variant-col__checks, .fmeta { font-size: 13px; font-size: 0.72222rem; line-height: 18px; line-height: 1rem; font-family: "Muli", "Arial", sans-serif; } @media (max-width: 1260px) { .action-item__label, .breadcrumb, .download-listing__suffix, .listing-post__meta-row, .news-post__meta-row, .gfield_description, .validation_error, .validation_message, #mce-error-response, #mce-success-response, .product-details__checks, .product-specs__row, .product-variant-col__checks, .fmeta { font-size: 13px; font-size: 0.72222rem; line-height: 16px; line-height: 0.88889rem; } } @media (max-width: 1023px) { .action-item__label, .breadcrumb, .download-listing__suffix, .listing-post__meta-row, .news-post__meta-row, .gfield_description, .validation_error, .validation_message, #mce-error-response, #mce-success-response, .product-details__checks, .product-specs__row, .product-variant-col__checks, .fmeta { font-size: 12px; font-size: 0.66667rem; line-height: 14px; line-height: 0.77778rem; } } @media (max-width: 670px) { .action-item__label, .breadcrumb, .download-listing__suffix, .listing-post__meta-row, .news-post__meta-row, .gfield_description, .validation_error, .validation_message, #mce-error-response, #mce-success-response, .product-details__checks, .product-specs__row, .product-variant-col__checks, .fmeta { font-size: 12px; font-size: 0.66667rem; line-height: 14px; line-height: 0.77778rem; } } @media (max-width: 480px) { .action-item__label, .breadcrumb, .download-listing__suffix, .listing-post__meta-row, .news-post__meta-row, .gfield_description, .validation_error, .validation_message, #mce-error-response, #mce-success-response, .product-details__checks, .product-specs__row, .product-variant-col__checks, .fmeta { font-size: 12px; font-size: 0.66667rem; line-height: 14px; line-height: 0.77778rem; } } .p, .rte-content p { font-size: 16px; font-size: 0.88889rem; line-height: 23px; line-height: 1.27778rem; letter-spacing: 0.3px; color: #1a1919; } @media (max-width: 1260px) { .p, .rte-content p { font-size: 16px; font-size: 0.88889rem; line-height: 23px; line-height: 1.27778rem; letter-spacing: 0.3px; } } @media (max-width: 1023px) { .p, .rte-content p { font-size: 14px; font-size: 0.77778rem; line-height: 18px; line-height: 1rem; letter-spacing: 0.3px; } } @media (max-width: 670px) { .p, .rte-content p { font-size: 14px; font-size: 0.77778rem; line-height: 18px; line-height: 1rem; letter-spacing: 0.3px; } } @media (max-width: 480px) { .p, .rte-content p { font-size: 14px; font-size: 0.77778rem; line-height: 18px; line-height: 1rem; letter-spacing: 0.3px; } } .link--more { position: relative; display: inline-block; text-decoration: none; } .link--more:hover .icon { -webkit-transform: translateX(4px); transform: translateX(4px); } .link--more .icon { content: ''; display: inline-block; width: 7px; height: 9px; position: relative; top: 1px; will-change: transform; -webkit-transition: 0.12s cubic-bezier(0.86, 0, 0.07, 1) -webkit-transform; transition: 0.12s cubic-bezier(0.86, 0, 0.07, 1) -webkit-transform; transition: 0.12s cubic-bezier(0.86, 0, 0.07, 1) transform; transition: 0.12s cubic-bezier(0.86, 0, 0.07, 1) transform, 0.12s cubic-bezier(0.86, 0, 0.07, 1) -webkit-transform; } .link--more.medium .icon { top: 0; } .caption, .caption__title, .wp-caption-text, .caption__subtitle { font-size: 18px; font-size: 1rem; line-height: 21px; line-height: 1.16667rem; letter-spacing: 0.7px; } @media (max-width: 1260px) { .caption, .caption__title, .wp-caption-text, .caption__subtitle { font-size: 18px; font-size: 1rem; line-height: 21px; line-height: 1.16667rem; letter-spacing: 0.7px; } } @media (max-width: 1023px) { .caption, .caption__title, .wp-caption-text, .caption__subtitle { font-size: 16px; font-size: 0.88889rem; line-height: 21px; line-height: 1.16667rem; letter-spacing: 0.7px; } } @media (max-width: 670px) { .caption, .caption__title, .wp-caption-text, .caption__subtitle { font-size: 16px; font-size: 0.88889rem; line-height: 21px; line-height: 1.16667rem; letter-spacing: 0.7px; } } @media (max-width: 480px) { .caption, .caption__title, .wp-caption-text, .caption__subtitle { font-size: 16px; font-size: 0.88889rem; line-height: 21px; line-height: 1.16667rem; letter-spacing: 0.7px; } } .button, input[type="submit"] { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: greyscale; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; font-size: 16px; font-size: 0.88889rem; line-height: 23px; line-height: 1.27778rem; letter-spacing: 0.3px; font-weight: 500; color: #fff; text-decoration: none; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; padding: 11px 30px 12px 30px; background: #52595f; cursor: pointer; will-change: background, transform; -webkit-transition: 0.18s cubic-bezier(0.77, 0, 0.175, 1) all; transition: 0.18s cubic-bezier(0.77, 0, 0.175, 1) all; } @media (max-width: 1260px) { .button, input[type="submit"] { font-size: 16px; font-size: 0.88889rem; line-height: 23px; line-height: 1.27778rem; letter-spacing: 0.3px; } } @media (max-width: 1023px) { .button, input[type="submit"] { font-size: 14px; font-size: 0.77778rem; line-height: 18px; line-height: 1rem; letter-spacing: 0.3px; } } @media (max-width: 670px) { .button, input[type="submit"] { font-size: 14px; font-size: 0.77778rem; line-height: 18px; line-height: 1rem; letter-spacing: 0.3px; } } @media (max-width: 480px) { .button, input[type="submit"] { font-size: 14px; font-size: 0.77778rem; line-height: 18px; line-height: 1rem; letter-spacing: 0.3px; } } .button:hover, input:hover[type="submit"] { color: #fff; background: #3a3f44; -webkit-transform: translateY(-1px); transform: translateY(-1px); } .button:active, input:active[type="submit"] { -webkit-transform: translateY(1px); transform: translateY(1px); background: #2f3336; } .button.disabled, input.disabled[type="submit"], .button:disabled, input:disabled[type="submit"] { background: #595959; } .button.button--ghost, input.button--ghost[type="submit"] { background: transparent; border: 1px solid #52595f; color: #52595f; padding: 10px 29px 11px 29px; } @media (max-width: 670px) { .button.button--ghost, input.button--ghost[type="submit"] { padding: 11px 29px 10px 29px; } } .button.button--ghost:hover, input.button--ghost:hover[type="submit"] { color: #fff; background: #52595f; } .button.button--ghost.button--small, input.button--ghost.button--small[type="submit"] { padding: 7px 24px 7px 24px; } .button.button--small, input.button--small[type="submit"] { font-size: 13px; font-size: 0.72222rem; line-height: 18px; line-height: 1rem; padding: 8px 25px 8px 25px; } @media (max-width: 1260px) { .button.button--small, input.button--small[type="submit"] { font-size: 13px; font-size: 0.72222rem; line-height: 16px; line-height: 0.88889rem; } } @media (max-width: 1023px) { .button.button--small, input.button--small[type="submit"] { font-size: 12px; font-size: 0.66667rem; line-height: 14px; line-height: 0.77778rem; } } @media (max-width: 670px) { .button.button--small, input.button--small[type="submit"] { font-size: 12px; font-size: 0.66667rem; line-height: 14px; line-height: 0.77778rem; } } @media (max-width: 480px) { .button.button--small, input.button--small[type="submit"] { font-size: 12px; font-size: 0.66667rem; line-height: 14px; line-height: 0.77778rem; } } .button.button--meta, input.button--meta[type="submit"] { font-size: 13px; font-size: 0.72222rem; line-height: 18px; line-height: 1rem; font-family: "Muli", "Arial", sans-serif; text-transform: none; } @media (max-width: 1260px) { .button.button--meta, input.button--meta[type="submit"] { font-size: 13px; font-size: 0.72222rem; line-height: 16px; line-height: 0.88889rem; } } @media (max-width: 1023px) { .button.button--meta, input.button--meta[type="submit"] { font-size: 12px; font-size: 0.66667rem; line-height: 14px; line-height: 0.77778rem; } } @media (max-width: 670px) { .button.button--meta, input.button--meta[type="submit"] { font-size: 12px; font-size: 0.66667rem; line-height: 14px; line-height: 0.77778rem; } } @media (max-width: 480px) { .button.button--meta, input.button--meta[type="submit"] { font-size: 12px; font-size: 0.66667rem; line-height: 14px; line-height: 0.77778rem; } } .button.button--success, input.button--success[type="submit"] { background: #cce4c8; color: #000; } .button.button--success:hover, input.button--success:hover[type="submit"] { background: #98c191; } .button.button--cta, input.button--cta[type="submit"] { background: #ff6700; color: #fff; } .button.button--cta:hover, input.button--cta:hover[type="submit"] { background: #ff761a; } .button .icon, input[type="submit"] .icon { position: relative; margin-top: -4px; width: 24px; height: 24px; } .button .icon + span, input[type="submit"] .icon + span { margin-left: 15px; } .button span + .icon, input[type="submit"] span + .icon { margin-left: 15px; } /** HELPER CLASSES */ .margin__bottom--none { margin-bottom: 0 !important; } .margin__bottom--xsmall, .product-result__title, .cart-item__product-title, .cart-item__amounts-container { margin-bottom: 0.55556rem !important; } .margin__bottom--small, .search-product-results li, .text-icon-block__header, .text-icon-block__icon, .rte-content p:not(.gform_fields):not(.gfield_checkbox), .rte-content ul:not(.gform_fields):not(.gfield_checkbox), .rte-content ol:not(.gform_fields):not(.gfield_checkbox) { margin-bottom: 1.11111rem !important; } .margin__bottom--medium, .text-icon-block__content .p, .text-icon-block__content .rte-content p, .rte-content .text-icon-block__content p { margin-bottom: 2.22222rem !important; } @media (max-width: 1023px) { .margin__bottom--medium, .text-icon-block__content .p, .text-icon-block__content .rte-content p, .rte-content .text-icon-block__content p { margin-bottom: 1.66667rem !important; } } .margin__bottom--semi, .rte-content .wp-block-cover { margin-bottom: 3.33333rem !important; } @media (max-width: 1023px) { .margin__bottom--semi, .rte-content .wp-block-cover { margin-bottom: 2.22222rem !important; } } .margin__bottom--large { margin-bottom: 5rem !important; } @media (max-width: 1023px) { .margin__bottom--large { margin-bottom: 3.33333rem !important; } } .margin__bottom--xlarge { margin-bottom: 6.66667rem !important; } @media (max-width: 1023px) { .margin__bottom--xlarge { margin-bottom: 5rem !important; } } @media (max-width: 670px) { .margin__bottom--xlarge { margin-bottom: 3.33333rem !important; } } .relative { position: relative; } .text--right { text-align: right; } .text--centered { text-align: center; } .text--left { text-align: left; } .text--justify { text-align: justify; } .text--twocol { -webkit-column-count: 2; -moz-column-count: 2; column-count: 2; } @media (max-width: 480px) { .text--twocol { -webkit-column-count: 1; -moz-column-count: 1; column-count: 1; } } .uppercase { text-transform: uppercase; } .color--white { color: #fff; } .color--black { color: #000; } .color--green-light-1 { color: #cce4c8; } .color--red { color: #ff0e0e; } .color--blue { color: #253858 !important; } .color--blue-light-1 { color: #77d0ec; } .color--blue--light-2 { color: #ddf3fb; } .color--blue--highlight { color: #6f8ec3; } .color--blue--highlight-2 { color: #4a628d; } .color--grey { color: #cdcdcd; } .color--grey-ligh-1 { color: #f0f0f0; } .color--grey-ligh-2 { color: #f7f7f7; } .color--grey-ligh-3 { color: #fbfbfb; } .color--grey-dark-1 { color: #757373; } .hidden { display: none; } .greyscale { -webkit-filter: grayscale(100%); filter: grayscale(100%); } .font--headline { font-family: "Montserrat", "Arial", sans-serif !important; } .font--text { font-family: "Montserrat", "Arial", sans-serif !important; } .padded { padding: 60px 0; } .padded--small { padding: 40px 0; } .padded--medium { padding: 80px 0; } @media (max-width: 1023px) { .padded--medium { padding: 60px 0; } } @media (max-width: 670px) { .padded--medium { padding: 40px 0; } } .padded--large { padding: 100px 0; } .half { width: 50%; } .third { width: calc(100% / 3); } .two-third { width: calc(100% / 3 * 2); } .w--10 { width: 10%; } .w--20 { width: 20%; } .w--25 { width: 25%; } .w--30 { width: 30%; } .w--40 { width: 40%; } .w--45 { width: 45%; } .w--50 { width: 50%; } .w--55 { width: 55%; } .w--60 { width: 60%; } .w--70 { width: 70%; } .w--75 { width: 75%; } .w--80 { width: 80%; } .w--90 { width: 90%; } .w--100 { width: 100%; } @media (max-width: 480px) { .hide--phone { display: none !important; } } @media (max-width: 1023px) { .hide--tablet { display: none !important; } } @media (max-width: 1260px) { .hide--lg { display: none !important; } } @media (min-width: 1023px) and (max-width: 1260px) { .hide--lg-only { display: none !important; } } @media (max-width: 1023px) { .hide--md { display: none !important; } } @media (min-width: 670px) and (max-width: 1023px) { .hide--md-only { display: none !important; } } @media (max-width: 670px) { .hide--sm { display: none !important; } } @media (min-width: 480px) and (max-width: 670px) { .hide--sm-only { display: none !important; } } @media (max-width: 480px) { .hide--xs { display: none !important; } } @media (max-width: 330px) { .hide--xxs { display: none !important; } } .show--sm { display: none !important; } @media (max-width: 670px) { .show--sm { display: block !important; } } .hidden { display: none; } .gfield_visibility_hidden { display: none !important; } /* Elemente auf denen die Schrift geglättet werden muss, können mit `@extend .fs;` in ihrer Klasse erweitert werden. */ .fs { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } * { -webkit-box-sizing: border-box; box-sizing: border-box; -webkit-tap-highlight-color: rgba(255, 255, 255, 0); } *:after, *:before { -webkit-box-sizing: inherit; box-sizing: inherit; } *:focus { outline: none; } ::-moz-focus-inner { bottom: 0; padding: 0; } html, body { position: relative; height: 100%; } html { font-size: 18px; overflow-x: hidden; } body { font-family: "Montserrat", "Arial", sans-serif; font-display: swap; font-size: 16px; font-size: 0.88889rem; line-height: 23px; line-height: 1.27778rem; letter-spacing: 0.3px; line-height: 1; } @media (max-width: 1260px) { body { font-size: 16px; font-size: 0.88889rem; line-height: 23px; line-height: 1.27778rem; letter-spacing: 0.3px; } } @media (max-width: 1023px) { body { font-size: 14px; font-size: 0.77778rem; line-height: 18px; line-height: 1rem; letter-spacing: 0.3px; } } @media (max-width: 670px) { body { font-size: 14px; font-size: 0.77778rem; line-height: 18px; line-height: 1rem; letter-spacing: 0.3px; } } @media (max-width: 480px) { body { font-size: 14px; font-size: 0.77778rem; line-height: 18px; line-height: 1rem; letter-spacing: 0.3px; } } .fix.fix { overflow: hidden; } section, .section { position: relative; } img, svg, video, audio, object { max-width: 100%; } img, video { height: auto; } svg { max-height: 100%; } iframe { border: none; } hr.hr--light { border: none; height: 1px; background: #f0f0f0; } /** Klasse .clear für manuelle DOM-Clearfixes und .clearfix als ergänzende Klasse mit :after-Clearfix */ .clear { clear: both; } .clearfix:after, .rte-content .alignright:after, .rte-content .alignleft:after { content: ""; display: table; clear: both; } .wow { visibility: hidden; } .wrapper { width: 100%; } @media (max-width: 670px) { .wrapper { overflow: hidden; } } .inner, .outer { margin: 0 auto; } :root { --inner-width: calc(100vw - 80px); } @media (min-width: 1400px) { :root { --inner-width: 1370px; } } @media (max-width: 1023px) { :root { --inner-width: calc(100vw - 40px); } } @media (max-width: 670px) { :root { --inner-width: calc(100vw - 40px); } } .inner { max-width: var(--inner-width); } .outer { max-width: 1400px; width: calc(100vw - 60px); } .inner-but-full { margin: 0 calc(-50vw + 50%); } hr { border-color: #cdcdcd; border-style: solid; border-width: 0 0 1px 0; } .site-wrap { background: #fff; position: relative; z-index: 1; will-change: transform; -webkit-transition: 0.33s cubic-bezier(0.075, 0.82, 0.165, 1) -webkit-transform; transition: 0.33s cubic-bezier(0.075, 0.82, 0.165, 1) -webkit-transform; transition: 0.33s cubic-bezier(0.075, 0.82, 0.165, 1) transform; transition: 0.33s cubic-bezier(0.075, 0.82, 0.165, 1) transform, 0.33s cubic-bezier(0.075, 0.82, 0.165, 1) -webkit-transform; } .page-fade { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: rgba(255, 255, 255, 0.8); z-index: 14; cursor: pointer; pointer-events: none; opacity: 0; will-change: transform; -webkit-transition: 0.33s cubic-bezier(0.075, 0.82, 0.165, 1) -webkit-transform; transition: 0.33s cubic-bezier(0.075, 0.82, 0.165, 1) -webkit-transform; transition: 0.33s cubic-bezier(0.075, 0.82, 0.165, 1) transform; transition: 0.33s cubic-bezier(0.075, 0.82, 0.165, 1) transform, 0.33s cubic-bezier(0.075, 0.82, 0.165, 1) -webkit-transform; } .occart-open .page-fade { opacity: 1; pointer-events: auto; } .occart-open .page-fade, .occart-open .site-wrap, .occart-open .site-header { -webkit-transform: translateX(-600px); transform: translateX(-600px); } @media (max-width: 670px) { .occart-open .page-fade, .occart-open .site-wrap, .occart-open .site-header { -webkit-transform: translateX(-500px); transform: translateX(-500px); } } @media (max-width: 480px) { .occart-open .page-fade, .occart-open .site-wrap, .occart-open .site-header { -webkit-transform: translateX(calc(-1 * (100vw - 30px))); transform: translateX(calc(-1 * (100vw - 30px))); } } .icon { display: block; } .icon--arrow-right { background: url("../img/icons/caret-right-blue.svg") no-repeat center center; background-size: contain; } .icon--search { background: url("../img/icons/search-grey.svg") no-repeat center center; background-size: contain; } .icon--attachment { background: url("../img/icons/attachment-blue.svg") no-repeat center center; background-size: contain; } .i--16, .icon--16 { width: 16px; height: 16px; } .i--20, .icon--20 { width: 20px; height: 20px; } .i--24, .icon--24 { width: 24px; height: 24px; } .i--32, .icon--32 { width: 32px; height: 32px; } /* // Define Icon by .icon--NAME class .icon { &__close { @include icon( 'close' ); &-red { @include icon( 'close' , 'red' ); } } } */ .page__title, .rte-content h1 { font-size: 34px; font-size: 1.88889rem; line-height: 37px; line-height: 2.05556rem; letter-spacing: 0.94px; font-weight: 500; text-transform: uppercase; } @media (max-width: 1260px) { .page__title, .rte-content h1 { font-size: 34px; font-size: 1.88889rem; line-height: 37px; line-height: 2.05556rem; letter-spacing: 0.94px; } } @media (max-width: 1023px) { .page__title, .rte-content h1 { font-size: 29px; font-size: 1.61111rem; line-height: 31px; line-height: 1.72222rem; letter-spacing: 0.8px; } } @media (max-width: 670px) { .page__title, .rte-content h1 { font-size: 24px; font-size: 1.33333rem; line-height: 29px; line-height: 1.61111rem; letter-spacing: 0.66px; } } @media (max-width: 480px) { .page__title, .rte-content h1 { font-size: 24px; font-size: 1.33333rem; line-height: 29px; line-height: 1.61111rem; letter-spacing: 0.66px; } } .page__title.semibold, .rte-content h1.semibold { font-weight: 600; } .page__subtitle, .rte-content h2 { font-size: 24px; font-size: 1.33333rem; line-height: 24px; line-height: 1.33333rem; letter-spacing: 0.4px; font-weight: 600; text-transform: uppercase; } @media (max-width: 1260px) { .page__subtitle, .rte-content h2 { font-size: 24px; font-size: 1.33333rem; line-height: 24px; line-height: 1.33333rem; letter-spacing: 0.4px; } } @media (max-width: 1023px) { .page__subtitle, .rte-content h2 { font-size: 20px; font-size: 1.11111rem; line-height: 20px; line-height: 1.11111rem; letter-spacing: 0.33px; } } @media (max-width: 670px) { .page__subtitle, .rte-content h2 { font-size: 20px; font-size: 1.11111rem; line-height: 20px; line-height: 1.11111rem; letter-spacing: 0.33px; } } @media (max-width: 480px) { .page__subtitle, .rte-content h2 { font-size: 20px; font-size: 1.11111rem; line-height: 20px; line-height: 1.11111rem; letter-spacing: 0.33px; } } .section__title { font-size: 24px; font-size: 1.33333rem; line-height: 24px; line-height: 1.33333rem; letter-spacing: 0.4px; text-transform: uppercase; font-weight: 600; } @media (max-width: 1260px) { .section__title { font-size: 24px; font-size: 1.33333rem; line-height: 24px; line-height: 1.33333rem; letter-spacing: 0.4px; } } @media (max-width: 1023px) { .section__title { font-size: 20px; font-size: 1.11111rem; line-height: 20px; line-height: 1.11111rem; letter-spacing: 0.33px; } } @media (max-width: 670px) { .section__title { font-size: 20px; font-size: 1.11111rem; line-height: 20px; line-height: 1.11111rem; letter-spacing: 0.33px; } } @media (max-width: 480px) { .section__title { font-size: 20px; font-size: 1.11111rem; line-height: 20px; line-height: 1.11111rem; letter-spacing: 0.33px; } } .section__subtitle, .rte-content h3, .product-result__title { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: greyscale; text-transform: uppercase; font-size: 20px; font-size: 1.11111rem; line-height: 21px; line-height: 1.16667rem; letter-spacing: 0.4px; font-weight: 500; letter-spacing: .5px; } @media (max-width: 1260px) { .section__subtitle, .rte-content h3, .product-result__title { font-size: 20px; font-size: 1.11111rem; line-height: 21px; line-height: 1.16667rem; letter-spacing: 0.4px; } } @media (max-width: 1023px) { .section__subtitle, .rte-content h3, .product-result__title { font-size: 18px; font-size: 1rem; line-height: 19px; line-height: 1.05556rem; letter-spacing: 0.7px; } } @media (max-width: 670px) { .section__subtitle, .rte-content h3, .product-result__title { font-size: 16px; font-size: 0.88889rem; line-height: 18px; line-height: 1rem; letter-spacing: 0.7px; } } @media (max-width: 480px) { .section__subtitle, .rte-content h3, .product-result__title { font-size: 16px; font-size: 0.88889rem; line-height: 18px; line-height: 1rem; letter-spacing: 0.7px; } } .section__subtitle.semibold, .rte-content h3.semibold, .semibold.product-result__title { font-weight: 600; } .caption__title, .wp-caption-text { color: #757373; font-weight: 500; } .caption__subtitle { color: #757373; } .copy__title { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: greyscale; text-transform: uppercase; font-size: 16px; font-size: 0.88889rem; line-height: 23px; line-height: 1.27778rem; letter-spacing: 0.3px; font-weight: 500; letter-spacing: .5px; } @media (max-width: 1260px) { .copy__title { font-size: 16px; font-size: 0.88889rem; line-height: 23px; line-height: 1.27778rem; letter-spacing: 0.3px; } } @media (max-width: 1023px) { .copy__title { font-size: 14px; font-size: 0.77778rem; line-height: 18px; line-height: 1rem; letter-spacing: 0.3px; } } @media (max-width: 670px) { .copy__title { font-size: 14px; font-size: 0.77778rem; line-height: 18px; line-height: 1rem; letter-spacing: 0.3px; } } @media (max-width: 480px) { .copy__title { font-size: 14px; font-size: 0.77778rem; line-height: 18px; line-height: 1rem; letter-spacing: 0.3px; } } /* //////////////////// */ /* HEADER / MOBILE MENU */ /* //////////////////// */ .site-header { background: #fff; border-bottom: 1px solid #cdcdcd; position: relative; z-index: 10; will-change: transform; -webkit-transition: 0.33s cubic-bezier(0.075, 0.82, 0.165, 1) -webkit-transform; transition: 0.33s cubic-bezier(0.075, 0.82, 0.165, 1) -webkit-transform; transition: 0.33s cubic-bezier(0.075, 0.82, 0.165, 1) transform; transition: 0.33s cubic-bezier(0.075, 0.82, 0.165, 1) transform, 0.33s cubic-bezier(0.075, 0.82, 0.165, 1) -webkit-transform; } @media (max-width: 670px) { .site-header__action-bar { margin-left: -20px; } } @media (max-width: 670px) { .site-header__action-bar .action-item { margin-left: 20px; } } .site-header__action-bar .action-item__icon { color: #cdcdcd; } .site-header__action-bar .action-item:hover .action-item__icon, .site-header__action-bar .action-item:hover .action-item__label { color: #253858; } .site-header__hamburger.action-item { display: none; } @media (max-width: 670px) { .site-header__hamburger.action-item { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; margin-left: 0; width: auto; } } .menu-open .site-header__hamburger .hamburger .line:nth-child(2) { -webkit-transform: scale(0); transform: scale(0); opacity: 0; } .menu-open .site-header__hamburger .hamburger .line:nth-child(1) { -webkit-transform: translate(0, 5px) rotate(45deg); transform: translate(0, 5px) rotate(45deg); } .menu-open .site-header__hamburger .hamburger .line:nth-child(3) { -webkit-transform: translate(0, -5px) rotate(-45deg); transform: translate(0, -5px) rotate(-45deg); } .site-header__search { position: relative; } .site-header__search .input-group { width: 255px; } @media (max-width: 1260px) { .site-header__search .input-group { width: 140px; } } @media (max-width: 1023px) { .site-header__search .input-group { width: 45px; } .site-header__search .input-group input { padding-left: 10px; padding-right: 10px; } .site-header__search .input-group label { display: none; } } .site-header__search-icon { position: absolute; top: 50%; right: 20px; -webkit-transform: translateY(-50%); transform: translateY(-50%); display: block; width: 18px; height: 18px; pointer-events: none; } @media (max-width: 1023px) { .site-header__search-icon { right: 14px; } } .hamburger { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-flow: column nowrap; flex-flow: column nowrap; width: 100%; } .hamburger .line { display: block; width: 100%; height: 2px; background: #253858; will-change: opacity, transform; -webkit-transition: 0.2s cubic-bezier(0.455, 0.03, 0.515, 0.955) all; transition: 0.2s cubic-bezier(0.455, 0.03, 0.515, 0.955) all; } .hamburger .line + .line { margin-top: 3px; } .hamburger.cross .line:nth-child(2) { -webkit-transform: scale(0); transform: scale(0); opacity: 0; } .hamburger.cross .line:nth-child(1) { -webkit-transform: translate(0, 5px) rotate(45deg); transform: translate(0, 5px) rotate(45deg); } .hamburger.cross .line:nth-child(3) { -webkit-transform: translate(0, -5px) rotate(-45deg); transform: translate(0, -5px) rotate(-45deg); } .site-header__meta { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-flow: row nowrap; flex-flow: row nowrap; padding: 18px 0; font-family: "Muli", "Arial", sans-serif; font-size: 13px; font-size: 0.72222rem; line-height: 18px; line-height: 1rem; color: #757373; border-bottom: 1px solid #f7f7f7; } @media (max-width: 1260px) { .site-header__meta { font-size: 13px; font-size: 0.72222rem; line-height: 16px; line-height: 0.88889rem; } } @media (max-width: 1023px) { .site-header__meta { font-size: 12px; font-size: 0.66667rem; line-height: 14px; line-height: 0.77778rem; } } @media (max-width: 670px) { .site-header__meta { font-size: 12px; font-size: 0.66667rem; line-height: 14px; line-height: 0.77778rem; } } @media (max-width: 480px) { .site-header__meta { font-size: 12px; font-size: 0.66667rem; line-height: 14px; line-height: 0.77778rem; } } @media (max-width: 1260px) { .site-header__meta { padding: 10px 0; } } .site-header__meta .clear-select { padding-right: 20px; background-size: 12px 7px; background-position-y: calc(50% + 1px); } .site-header-meta__left { width: 50%; } .site-header-meta__right { width: 50%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-flow: row wrap; flex-flow: row wrap; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; } .social-links { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-flow: row nowrap; flex-flow: row nowrap; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; margin-left: -10px; } .social-links li { margin-left: 10px; width: 19px; height: 19px; } .social-links a { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-flow: row nowrap; flex-flow: row nowrap; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; height: 100%; } .social-links a svg { width: 100%; max-height: 100%; } .site-header__main { padding: 18px 0 40px 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-flow: row nowrap; flex-flow: row nowrap; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } @media (max-width: 670px) { .site-header__main { padding: 10px 0 12px 0; } } .site-header-main__left { width: 41.66667%; } .site-header-main__center { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-flow: row nowrap; flex-flow: row nowrap; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; width: 16.66667%; } .site-header-main__right { width: 41.66667%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-flow: row wrap; flex-flow: row wrap; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; } .site-header-main__search-action-item { display: none !important; } @media (max-width: 670px) { .site-header-main__search-action-item { display: -webkit-box !important; display: -ms-flexbox !important; display: flex !important; } } .site-logo-link { display: block; width: 97px; } @media (max-width: 670px) { .site-logo-link { width: 65px; } .site-logo-link .logo__furniture-typo { display: none; } } .site-logo-link:hover svg * { fill: #5e666d; } .site-claim { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: greyscale; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-flow: row nowrap; flex-flow: row nowrap; -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; } .site-claim:hover { color: #757373 !important; } @media (max-width: 670px) { .site-claim { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-flow: column nowrap; flex-flow: column nowrap; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; display: none; } } .site-claim__headline { font-size: 24px; font-size: 1.33333rem; line-height: 24px; line-height: 1.33333rem; letter-spacing: 0.4px; line-height: .85; font-weight: 600; margin-right: 10px; } @media (max-width: 1260px) { .site-claim__headline { font-size: 24px; font-size: 1.33333rem; line-height: 24px; line-height: 1.33333rem; letter-spacing: 0.4px; } } @media (max-width: 1023px) { .site-claim__headline { font-size: 20px; font-size: 1.11111rem; line-height: 20px; line-height: 1.11111rem; letter-spacing: 0.33px; } } @media (max-width: 670px) { .site-claim__headline { font-size: 20px; font-size: 1.11111rem; line-height: 20px; line-height: 1.11111rem; letter-spacing: 0.33px; } } @media (max-width: 480px) { .site-claim__headline { font-size: 20px; font-size: 1.11111rem; line-height: 20px; line-height: 1.11111rem; letter-spacing: 0.33px; } } @media (max-width: 670px) { .site-claim__headline { margin-bottom: 5px; } } .site-claim__subline { font-family: "Libre Baskerville", "Times New Roman", serif; } @media (max-width: 1260px) { .site-claim__subline { line-height: 1.1; } } .site-header-nav { position: relative; width: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-flow: row nowrap; flex-flow: row nowrap; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin-bottom: 20px; } @media (max-width: 670px) { .site-header-nav { position: absolute; top: 100%; left: 0; width: 100vw; margin-bottom: 0; background: #fff; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-flow: column nowrap; flex-flow: column nowrap; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; -webkit-box-shadow: 30px 15px 20px 0 rgba(37, 56, 88, 0.1); box-shadow: 30px 15px 20px 0 rgba(37, 56, 88, 0.1); -webkit-transform: translateX(-120%); transform: translateX(-120%); pointer-events: none; opacity: 0; will-change: opacity, transform; -webkit-transition: 0.2s cubic-bezier(0.6, 0.04, 0.98, 0.335) all; transition: 0.2s cubic-bezier(0.6, 0.04, 0.98, 0.335) all; } .menu-open .site-header-nav { -webkit-transform: translateX(0); transform: translateX(0); opacity: 1; pointer-events: auto; -webkit-transition: 0.2s cubic-bezier(0.075, 0.82, 0.165, 1) all; transition: 0.2s cubic-bezier(0.075, 0.82, 0.165, 1) all; } } .nav-menu { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-flow: row wrap; flex-flow: row wrap; margin-left: -30px; } @media (max-width: 1023px) { .nav-menu { margin-left: -20px; } } @media (max-width: 670px) { .nav-menu { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-flow: column nowrap; flex-flow: column nowrap; margin-left: 0; margin-bottom: 0; } } .nav-menu > li { position: relative; margin-left: 30px; } @media (max-width: 1023px) { .nav-menu > li { margin-left: 20px; } } @media (max-width: 670px) { .nav-menu > li { margin-left: 0; } } .nav-menu > li.current-menu-item > a { font-weight: 500; color: #52595f; } .nav-menu > li.menu-item-has-children { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-flow: row nowrap; flex-flow: row nowrap; } @media (max-width: 670px) { .nav-menu > li.menu-item-has-children { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-flow: column nowrap; flex-flow: column nowrap; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; } } .nav-menu > li.menu-item-has-children:after { content: ''; display: block; width: 12px; height: 8px; background: url("../img/icons/nav-caret-down-blue.svg") no-repeat center center; background-size: contain; margin-left: 5px; } @media (max-width: 670px) { .nav-menu > li.menu-item-has-children:after { width: 10px; height: 6px; -webkit-transform: rotate(-90deg); transform: rotate(-90deg); margin-left: auto; position: absolute; top: 20px; right: 30px; } } .nav-menu > li.menu-item-has-children.menu-open:after { -webkit-transform: translateY(1px) rotate(180deg); transform: translateY(1px) rotate(180deg); } .nav-menu > li > ul { display: none; position: absolute; top: calc(100% + 1px); left: -20px; background: #fff; z-index: 2; } .nav-menu li { position: relative; } @media (max-width: 670px) { .nav-menu li { padding: 15px 30px; border-bottom: 1px solid #f0f0f0; } } .nav-menu li.menu-open > .sub-menu { display: -webkit-box; display: -ms-flexbox; display: flex; } .nav-menu .sub-menu { display: none; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-flow: column nowrap; flex-flow: column nowrap; background: #fff; font-size: 13px; font-size: 0.72222rem; } @media (max-width: 670px) { .nav-menu .sub-menu { position: relative !important; left: 0 !important; margin-top: 5px; margin-bottom: 20px; width: 100%; } } .nav-menu .sub-menu li { padding: 15px 20px; border-bottom: 1px solid #f0f0f0; } .nav-menu .sub-menu li.menu-item-has-children > a { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-flow: row nowrap; flex-flow: row nowrap; } .nav-menu .sub-menu li.menu-item-has-children > a:after { content: ''; display: block; width: 12px; height: 8px; background: url("../img/icons/nav-caret-down-blue.svg") no-repeat center center; background-size: contain; margin-left: 5px; margin-top: 3px; -webkit-transform: translateY(-1px) rotate(-90deg) scale(0.6); transform: translateY(-1px) rotate(-90deg) scale(0.6); } .nav-menu .sub-menu li.menu-item-has-children.menu-open > a { font-weight: 500; color: #5e666d; } .nav-menu .sub-menu li.menu-item-has-children.menu-open > a:after { -webkit-transform: translateY(-1px) rotate(90deg) scale(0.6); transform: translateY(-1px) rotate(90deg) scale(0.6); } .nav-menu .sub-menu > a { display: inline-block; } .nav-menu .sub-menu li.current_page_item > a { font-weight: 500; color: #77d0ec; } .nav-menu .sub-menu li.current-menu-parent > a { font-weight: 500; } .nav-menu .sub-menu .sub-menu { position: absolute; top: 0; left: 100%; width: 100%; background: #fff; } /* /////// */ /* FOOTER */ /* /////// */ .site-footer { position: relative; background: #fff; border-top: 1px solid #cdcdcd; padding-top: 45px; z-index: 1; } .site-footer__main { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: greyscale; font-size: 13px; font-size: 0.72222rem; line-height: 18px; line-height: 1rem; font-family: "Muli", "Arial", sans-serif; margin-bottom: 45px; } @media (max-width: 1260px) { .site-footer__main { font-size: 13px; font-size: 0.72222rem; line-height: 16px; line-height: 0.88889rem; } } @media (max-width: 1023px) { .site-footer__main { font-size: 12px; font-size: 0.66667rem; line-height: 14px; line-height: 0.77778rem; } } @media (max-width: 670px) { .site-footer__main { font-size: 12px; font-size: 0.66667rem; line-height: 14px; line-height: 0.77778rem; } } @media (max-width: 480px) { .site-footer__main { font-size: 12px; font-size: 0.66667rem; line-height: 14px; line-height: 0.77778rem; } } @media (max-width: 670px) { .site-footer__col:last-child { margin-top: 20px; } } @media (max-width: 480px) { .site-footer__col { margin-bottom: 30px; } .site-footer__col:last-child { margin-top: 0; margin-bottom: 0; } } .site-footer__meta > .outer { padding: 20px 0; border-top: 1px solid #f7f7f7; } /* //////////////////////// */ /* MODULE / MODULAR CONTENT */ /* //////////////////////// */ /** Reset Inputs */ input[type="text"], input[type="password"], input[type="email"], input[type="number"], input[type="phone"], input[type="submit"], input[type="checkbox"], input[type="radio"], input[type="search"], textarea, select, button { border: none; border-radius: 0; -webkit-box-shadow: none; box-shadow: none; -webkit-appearance: none; font-family: "Montserrat", "Arial", sans-serif; font-size: 1rem; color: #000; padding: .5rem; } input[type="text"]:focus, input[type="password"]:focus, input[type="email"]:focus, input[type="number"]:focus, input[type="phone"]:focus, input[type="submit"]:focus, input[type="checkbox"]:focus, input[type="radio"]:focus, input[type="search"]:focus, textarea:focus, select:focus, button:focus { outline: 0; } label { display: block; font-family: "Montserrat", "Arial", sans-serif; -webkit-appearance: none; } /** Style Inputs */ input[type="text"], input[type="password"], input[type="email"], input[type="number"], input[type="phone"], input[type="search"], textarea, select { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: greyscale; background: #fff; border: 1px solid #cdcdcd; font-size: 16px; font-size: 0.88889rem; line-height: 23px; line-height: 1.27778rem; letter-spacing: 0.3px; padding: 10px 20px; border-radius: 4px; } @media (max-width: 1260px) { input[type="text"], input[type="password"], input[type="email"], input[type="number"], input[type="phone"], input[type="search"], textarea, select { font-size: 16px; font-size: 0.88889rem; line-height: 23px; line-height: 1.27778rem; letter-spacing: 0.3px; } } @media (max-width: 1023px) { input[type="text"], input[type="password"], input[type="email"], input[type="number"], input[type="phone"], input[type="search"], textarea, select { font-size: 14px; font-size: 0.77778rem; line-height: 18px; line-height: 1rem; letter-spacing: 0.3px; } } @media (max-width: 670px) { input[type="text"], input[type="password"], input[type="email"], input[type="number"], input[type="phone"], input[type="search"], textarea, select { font-size: 14px; font-size: 0.77778rem; line-height: 18px; line-height: 1rem; letter-spacing: 0.3px; } } @media (max-width: 480px) { input[type="text"], input[type="password"], input[type="email"], input[type="number"], input[type="phone"], input[type="search"], textarea, select { font-size: 14px; font-size: 0.77778rem; line-height: 18px; line-height: 1rem; letter-spacing: 0.3px; } } input[type="text"]::-webkit-input-placeholder, input[type="password"]::-webkit-input-placeholder, input[type="email"]::-webkit-input-placeholder, input[type="number"]::-webkit-input-placeholder, input[type="phone"]::-webkit-input-placeholder, input[type="search"]::-webkit-input-placeholder, textarea::-webkit-input-placeholder, select::-webkit-input-placeholder { /* Chrome/Opera/Safari */ color: #cdcdcd; } input[type="text"]::-moz-placeholder, input[type="password"]::-moz-placeholder, input[type="email"]::-moz-placeholder, input[type="number"]::-moz-placeholder, input[type="phone"]::-moz-placeholder, input[type="search"]::-moz-placeholder, textarea::-moz-placeholder, select::-moz-placeholder { /* Firefox 19+ */ color: #cdcdcd; } input[type="text"]:-ms-input-placeholder, input[type="password"]:-ms-input-placeholder, input[type="email"]:-ms-input-placeholder, input[type="number"]:-ms-input-placeholder, input[type="phone"]:-ms-input-placeholder, input[type="search"]:-ms-input-placeholder, textarea:-ms-input-placeholder, select:-ms-input-placeholder { /* IE 10+ */ color: #cdcdcd; } input[type="text"]:-moz-placeholder, input[type="password"]:-moz-placeholder, input[type="email"]:-moz-placeholder, input[type="number"]:-moz-placeholder, input[type="phone"]:-moz-placeholder, input[type="search"]:-moz-placeholder, textarea:-moz-placeholder, select:-moz-placeholder { /* Firefox 18- */ color: #cdcdcd; } input[type="text"]:focus, input[type="password"]:focus, input[type="email"]:focus, input[type="number"]:focus, input[type="phone"]:focus, input[type="search"]:focus, textarea:focus, select:focus { border: 1px solid #b4b4b4; } input[type="text"].meta, input[type="password"].meta, input[type="email"].meta, input[type="number"].meta, input[type="phone"].meta, input[type="search"].meta, textarea.meta, select.meta { font-size: 13px; font-size: 0.72222rem; line-height: 18px; line-height: 1rem; } @media (max-width: 1260px) { input[type="text"].meta, input[type="password"].meta, input[type="email"].meta, input[type="number"].meta, input[type="phone"].meta, input[type="search"].meta, textarea.meta, select.meta { font-size: 13px; font-size: 0.72222rem; line-height: 16px; line-height: 0.88889rem; } } @media (max-width: 1023px) { input[type="text"].meta, input[type="password"].meta, input[type="email"].meta, input[type="number"].meta, input[type="phone"].meta, input[type="search"].meta, textarea.meta, select.meta { font-size: 12px; font-size: 0.66667rem; line-height: 14px; line-height: 0.77778rem; } } @media (max-width: 670px) { input[type="text"].meta, input[type="password"].meta, input[type="email"].meta, input[type="number"].meta, input[type="phone"].meta, input[type="search"].meta, textarea.meta, select.meta { font-size: 12px; font-size: 0.66667rem; line-height: 14px; line-height: 0.77778rem; } } @media (max-width: 480px) { input[type="text"].meta, input[type="password"].meta, input[type="email"].meta, input[type="number"].meta, input[type="phone"].meta, input[type="search"].meta, textarea.meta, select.meta { font-size: 12px; font-size: 0.66667rem; line-height: 14px; line-height: 0.77778rem; } } input[type="text"].input--large, input[type="password"].input--large, input[type="email"].input--large, input[type="number"].input--large, input[type="phone"].input--large, input[type="search"].input--large, textarea.input--large, select.input--large { font-size: 20px; font-size: 1.11111rem; line-height: 21px; line-height: 1.16667rem; letter-spacing: 0.4px; padding: 20px 24px; } @media (max-width: 1260px) { input[type="text"].input--large, input[type="password"].input--large, input[type="email"].input--large, input[type="number"].input--large, input[type="phone"].input--large, input[type="search"].input--large, textarea.input--large, select.input--large { font-size: 18px; font-size: 1rem; line-height: 21px; line-height: 1.16667rem; letter-spacing: 0.7px; padding: 18px 24px; } } @media (max-width: 670px) { input[type="text"].input--large, input[type="password"].input--large, input[type="email"].input--large, input[type="number"].input--large, input[type="phone"].input--large, input[type="search"].input--large, textarea.input--large, select.input--large { font-size: 16px; font-size: 0.88889rem; line-height: 18px; line-height: 1rem; letter-spacing: 0.7px; padding: 14px 15px; } } .input-group { position: relative; } .input-group .input { width: 100%; } .input-group .input + label { font-size: 13px; font-size: 0.72222rem; line-height: 18px; line-height: 1rem; position: absolute; top: 50%; left: 10px; -webkit-transform: translateY(-50%); transform: translateY(-50%); color: #cdcdcd; padding: 0 15px; background: #fff; will-change: top, color; -webkit-transition: 0.18s cubic-bezier(0.785, 0.135, 0.15, 0.86) all; transition: 0.18s cubic-bezier(0.785, 0.135, 0.15, 0.86) all; cursor: text; } @media (max-width: 1260px) { .input-group .input + label { font-size: 13px; font-size: 0.72222rem; line-height: 16px; line-height: 0.88889rem; } } @media (max-width: 1023px) { .input-group .input + label { font-size: 12px; font-size: 0.66667rem; line-height: 14px; line-height: 0.77778rem; } } @media (max-width: 670px) { .input-group .input + label { font-size: 12px; font-size: 0.66667rem; line-height: 14px; line-height: 0.77778rem; } } @media (max-width: 480px) { .input-group .input + label { font-size: 12px; font-size: 0.66667rem; line-height: 14px; line-height: 0.77778rem; } } .input-group .input:not(:placeholder-shown) + label { top: 0; color: #000; font-size: .9em; } .input-group.focus-within .input + label { top: 0; color: #000; font-size: .9em; } .input-group.input--large { font-size: 20px; font-size: 1.11111rem; line-height: 21px; line-height: 1.16667rem; letter-spacing: 0.4px; } @media (max-width: 1260px) { .input-group.input--large { font-size: 20px; font-size: 1.11111rem; line-height: 21px; line-height: 1.16667rem; letter-spacing: 0.4px; } } @media (max-width: 1023px) { .input-group.input--large { font-size: 18px; font-size: 1rem; line-height: 19px; line-height: 1.05556rem; letter-spacing: 0.7px; } } @media (max-width: 670px) { .input-group.input--large { font-size: 16px; font-size: 0.88889rem; line-height: 18px; line-height: 1rem; letter-spacing: 0.7px; } } @media (max-width: 480px) { .input-group.input--large { font-size: 16px; font-size: 0.88889rem; line-height: 18px; line-height: 1rem; letter-spacing: 0.7px; } } .input-group.input--large .input + label { font-size: 18px; font-size: 1rem; line-height: 21px; line-height: 1.16667rem; letter-spacing: 0.7px; } @media (max-width: 1260px) { .input-group.input--large .input + label { font-size: 16px; font-size: 0.88889rem; line-height: 23px; line-height: 1.27778rem; } } @media (max-width: 670px) { .input-group.input--large .input + label { font-size: 14px; font-size: 0.77778rem; line-height: 18px; line-height: 1rem; letter-spacing: 0.3px; left: 10px; padding-left: 5px; padding-right: 5px; } } .select, .clear-select { position: relative; width: 100%; background: #fff url("../img/icons/caret-down-grey.svg") no-repeat calc(100% - 15px) calc(100% - 17px); background-size: 18px 9px; } .clear-select { width: auto; font-size: inherit; color: inherit; padding: 0 25px 0 0; border: none; background-position: 100% 50%; } .radio { position: absolute; top: 0; left: -9999px; visibility: hidden; } .radio + label { position: relative; padding-left: calc(20px + 10px); font-size: 16px; font-size: 0.88889rem; line-height: 23px; line-height: 1.27778rem; letter-spacing: 0.3px; cursor: pointer; } @media (max-width: 1260px) { .radio + label { font-size: 16px; font-size: 0.88889rem; line-height: 23px; line-height: 1.27778rem; letter-spacing: 0.3px; } } @media (max-width: 1023px) { .radio + label { font-size: 14px; font-size: 0.77778rem; line-height: 18px; line-height: 1rem; letter-spacing: 0.3px; } } @media (max-width: 670px) { .radio + label { font-size: 14px; font-size: 0.77778rem; line-height: 18px; line-height: 1rem; letter-spacing: 0.3px; } } @media (max-width: 480px) { .radio + label { font-size: 14px; font-size: 0.77778rem; line-height: 18px; line-height: 1rem; letter-spacing: 0.3px; } } .radio + label:before { content: ''; display: block; width: 20px; height: 20px; position: absolute; top: 0; left: 0; background: #fff; border: 1px solid #cdcdcd; border-radius: 100%; } .radio:checked + label:after { content: ''; display: block; width: 8px; height: 8px; position: absolute; top: 6px; left: 6px; background: #000; border-radius: 100%; } .checkbox, .gfield_checkbox li input { position: absolute; top: 0; left: -9999px; visibility: hidden; } .checkbox + label, .gfield_checkbox li input + label { position: relative; padding-left: calc(20px + 10px); font-size: 16px; font-size: 0.88889rem; line-height: 23px; line-height: 1.27778rem; letter-spacing: 0.3px; cursor: pointer; } @media (max-width: 1260px) { .checkbox + label, .gfield_checkbox li input + label { font-size: 16px; font-size: 0.88889rem; line-height: 23px; line-height: 1.27778rem; letter-spacing: 0.3px; } } @media (max-width: 1023px) { .checkbox + label, .gfield_checkbox li input + label { font-size: 14px; font-size: 0.77778rem; line-height: 18px; line-height: 1rem; letter-spacing: 0.3px; } } @media (max-width: 670px) { .checkbox + label, .gfield_checkbox li input + label { font-size: 14px; font-size: 0.77778rem; line-height: 18px; line-height: 1rem; letter-spacing: 0.3px; } } @media (max-width: 480px) { .checkbox + label, .gfield_checkbox li input + label { font-size: 14px; font-size: 0.77778rem; line-height: 18px; line-height: 1rem; letter-spacing: 0.3px; } } .checkbox + label:before, .gfield_checkbox li input + label:before { content: ''; display: block; width: 20px; height: 20px; position: absolute; top: 0; left: 0; background: #fff; border: 1px solid #cdcdcd; } .fmeta .checkbox + label, .fmeta .gfield_checkbox li input + label, .gfield_checkbox li .fmeta input + label { font-size: 13px; font-size: 0.72222rem; line-height: 18px; line-height: 1rem; font-family: "Muli", "Arial", sans-serif; } @media (max-width: 1260px) { .fmeta .checkbox + label, .fmeta .gfield_checkbox li input + label, .gfield_checkbox li .fmeta input + label { font-size: 13px; font-size: 0.72222rem; line-height: 16px; line-height: 0.88889rem; } } @media (max-width: 1023px) { .fmeta .checkbox + label, .fmeta .gfield_checkbox li input + label, .gfield_checkbox li .fmeta input + label { font-size: 12px; font-size: 0.66667rem; line-height: 14px; line-height: 0.77778rem; } } @media (max-width: 670px) { .fmeta .checkbox + label, .fmeta .gfield_checkbox li input + label, .gfield_checkbox li .fmeta input + label { font-size: 12px; font-size: 0.66667rem; line-height: 14px; line-height: 0.77778rem; } } @media (max-width: 480px) { .fmeta .checkbox + label, .fmeta .gfield_checkbox li input + label, .gfield_checkbox li .fmeta input + label { font-size: 12px; font-size: 0.66667rem; line-height: 14px; line-height: 0.77778rem; } } .fmeta .checkbox + label:before, .fmeta .gfield_checkbox li input + label:before, .gfield_checkbox li .fmeta input + label:before { width: 15px; height: 15px; } .checkbox:checked + label:before, .gfield_checkbox li input:checked + label:before { background: #fff url("../img/icons/tick-blue.svg") no-repeat center center; background-size: 13px 11px; } /** Rendert einen Div mit gleichbleibendem Seitenverhältnis */ .ar--16-9 { display: block; position: relative; width: 100%; } .ar--16-9:after { content: ''; position: relative; display: block; width: 100%; padding-top: 56.25%; pointer-events: none; } .ar--4-3 { display: block; position: relative; width: 100%; } .ar--4-3:after { content: ''; position: relative; display: block; width: 100%; padding-top: 75%; pointer-events: none; } .ar--21-9 { display: block; position: relative; width: 100%; } .ar--21-9:after { content: ''; position: relative; display: block; width: 100%; padding-top: 42.8571%; pointer-events: none; } .ar__content { position: absolute; top: 0; left: 0; display: block; width: 100%; height: 100%; } .ar__content iframe, .ar__content video { display: block; width: 100%; height: 100%; } [class^="spacer"] { display: block; width: 100%; } .spacer--xsmall { height: 0.55556rem !important; } .spacer--small { height: 1.11111rem !important; } .spacer--medium { height: 2.22222rem !important; } .spacer--large { height: 5rem !important; } @media (max-width: 1023px) { .spacer--large { height: 3.33333rem !important; } } .spacer--xlarge { height: 6.66667rem !important; } @media (max-width: 1023px) { .spacer--xlarge { height: 5rem !important; } } .list--links a { text-decoration: none; } .list--links a:hover { text-decoration: underline; } .list--links li { margin-bottom: 8px; } .list--checks li { position: relative; padding-left: 34px; } .list--checks li:before { content: ''; display: block; width: 24px; height: 24px; position: absolute; top: 0; left: 0; -webkit-transform: translateY(-25%); transform: translateY(-25%); background: url("../img/icons/icon-checkmark-green-light.svg") no-repeat center center; background-size: contain; } .list--checks li + li { margin-top: 20px; } .cookie-banner { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: greyscale; position: fixed; bottom: 30px; left: 30px; z-index: 11; width: 410px; padding: 1.11111rem 1.66667rem 0.55556rem; background: #fff; -webkit-box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.14); box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.14); will-change: transform, opacity; -webkit-transition: 0.56s cubic-bezier(0.86, 0, 0.07, 1) all; transition: 0.56s cubic-bezier(0.86, 0, 0.07, 1) all; } @media (max-width: 1023px) { .cookie-banner { width: 340px; } } @media (max-width: 670px) { .cookie-banner { width: calc(100% - 40px); padding-left: 1.11111rem; padding-right: 1.11111rem; right: 20px; bottom: 20px; } } .cookie-banner--hidden { -webkit-transform: translateY(100%); transform: translateY(100%); opacity: 0; pointer-events: none; } .cookie-banner__text a { font-weight: 500; } .cookie-banner__text .button, .cookie-banner__text input[type="submit"] { width: 100%; } .cookie-banner__settings { display: none; padding-top: 10px; } .cookie-banner__settings-link { display: block; text-align: center; font-size: 13px; font-size: 0.72222rem; line-height: 18px; line-height: 1rem; text-decoration: none; margin-top: 20px; margin-bottom: 10px; } @media (max-width: 1260px) { .cookie-banner__settings-link { font-size: 13px; font-size: 0.72222rem; line-height: 16px; line-height: 0.88889rem; } } @media (max-width: 1023px) { .cookie-banner__settings-link { font-size: 12px; font-size: 0.66667rem; line-height: 14px; line-height: 0.77778rem; } } @media (max-width: 670px) { .cookie-banner__settings-link { font-size: 12px; font-size: 0.66667rem; line-height: 14px; line-height: 0.77778rem; } } @media (max-width: 480px) { .cookie-banner__settings-link { font-size: 12px; font-size: 0.66667rem; line-height: 14px; line-height: 0.77778rem; } } .cookie-banner__settings label { display: block; margin-bottom: 5px; font-weight: 500; } .language-switcher { position: relative; display: inline-block; font-weight: 500; } .language-switcher__list { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-flow: column nowrap; flex-flow: column nowrap; } .language-switcher__dropdown { display: none; position: absolute; top: calc(100% + 10px); left: -10px; width: 270%; background: #fff; padding: 0 20px 0 20px; border: 1px solid #f7f7f7; border-top: none; -webkit-box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.04); box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.04); z-index: 2; } .language-switcher__dropdown a { padding: 5px 0; } .language-switcher__dropdown a + a { border-top: 1px solid #eaeaea; } .flag { display: block; font-size: 20px; width: 1em; height: 1.33333em; -webkit-box-flex: 0; -ms-flex: 0 0 auto; flex: 0 0 auto; margin-right: 10px; } .flag--de { background: url("../img/icons/flags/de.svg") no-repeat center center; background-size: contain; } .flag--en { background: url("../img/icons/flags/us.svg") no-repeat center center; background-size: contain; } .flag--fr { background: url("../img/icons/flags/fr.svg") no-repeat center center; background-size: contain; } .flag--es { background: url("../img/icons/flags/es.svg") no-repeat center center; background-size: contain; } .flag--it { background: url("../img/icons/flags/it.svg") no-repeat center center; background-size: contain; } .flag--nl { background: url("../img/icons/flags/nl.svg") no-repeat center center; background-size: contain; } .wpml-ls-legacy-list-horizontal.wpml-ls-statics-footer > ul { z-index: 1; position: relative; } .amount-box { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-flow: row nowrap; flex-flow: row nowrap; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .amount-box.amount-box--vertical { -webkit-box-orient: vertical; -webkit-box-direction: reverse; -ms-flex-flow: column-reverse nowrap; flex-flow: column-reverse nowrap; } .amount-box__action { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-flow: row nowrap; flex-flow: row nowrap; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; width: 46px; height: 46px; color: #cdcdcd; background: #f7f7f7; cursor: pointer; } .amount-box__action:hover { color: #fff; background: #000; } .amount-box--small .amount-box__action { width: 35px; height: 35px; } .amount-box--disabled .amount-box__action { pointer-events: none; opacity: .2; } .amount-box__value { width: 46px; height: 46px; text-align: center; background: #fff; margin: 0 10px; } .amount-box__value.amount-box__value { padding: 0; border-radius: 0; font-size: 18px; font-size: 1rem; line-height: 21px; line-height: 1.16667rem; letter-spacing: 0.7px; border: 1px solid #cdcdcd; } @media (max-width: 1260px) { .amount-box__value.amount-box__value { font-size: 18px; font-size: 1rem; line-height: 21px; line-height: 1.16667rem; letter-spacing: 0.7px; } } @media (max-width: 1023px) { .amount-box__value.amount-box__value { font-size: 16px; font-size: 0.88889rem; line-height: 21px; line-height: 1.16667rem; letter-spacing: 0.7px; } } @media (max-width: 670px) { .amount-box__value.amount-box__value { font-size: 16px; font-size: 0.88889rem; line-height: 21px; line-height: 1.16667rem; letter-spacing: 0.7px; } } @media (max-width: 480px) { .amount-box__value.amount-box__value { font-size: 16px; font-size: 0.88889rem; line-height: 21px; line-height: 1.16667rem; letter-spacing: 0.7px; } } .amount-box--small .amount-box__value { width: 35px; height: 35px; font-size: 16px; font-size: 0.88889rem; line-height: 23px; line-height: 1.27778rem; letter-spacing: 0.3px; } @media (max-width: 1260px) { .amount-box--small .amount-box__value { font-size: 16px; font-size: 0.88889rem; line-height: 23px; line-height: 1.27778rem; letter-spacing: 0.3px; } } @media (max-width: 1023px) { .amount-box--small .amount-box__value { font-size: 14px; font-size: 0.77778rem; line-height: 18px; line-height: 1rem; letter-spacing: 0.3px; } } @media (max-width: 670px) { .amount-box--small .amount-box__value { font-size: 14px; font-size: 0.77778rem; line-height: 18px; line-height: 1rem; letter-spacing: 0.3px; } } @media (max-width: 480px) { .amount-box--small .amount-box__value { font-size: 14px; font-size: 0.77778rem; line-height: 18px; line-height: 1rem; letter-spacing: 0.3px; } } .amount-box--disabled .amount-box__value { background: #f7f7f7; border: 1px solid transparent; } .minus span, .plus span { display: block; width: 16px; height: 2px; background: currentColor; } .amount-box--small .minus, .amount-box--small .plus { -webkit-transform: scale(0.85); transform: scale(0.85); } .plus span:nth-child(2) { position: relative; top: -2px; -webkit-transform-origin: 50% 50%; transform-origin: 50% 50%; -webkit-transform: rotate(90deg); transform: rotate(90deg); } .empty-state { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-flow: column nowrap; flex-flow: column nowrap; -webkit-box-align: center; -ms-flex-align: center; align-items: center; text-align: center; } .empty-state__icon { width: 42px; color: #cdcdcd; } @media (min-width: 1400px) { .empty-state__icon { width: 56px; } } .empty-state__title { color: #253858; } .empty-state__desc { width: 83.33333%; color: #757373; } @media (min-width: 1400px) { .empty-state__desc { width: 66.66667%; } } @media (max-width: 670px) { .empty-state__desc { width: 100%; } } .action-bar-container { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-flow: row nowrap; flex-flow: row nowrap; margin-left: -40px; } .action-bar-float { position: fixed; bottom: 40px; right: 40px; z-index: 15; will-change: transform; -webkit-transition: .23s ease-in-out transform; transition: .23s ease-in-out transform; } @media (max-width: 670px) { .action-bar-float { bottom: 20px; right: 20px; } } @media (max-width: 670px) { .site--down .action-bar-float:not(.actionbar-module--open) { -webkit-transform: translateY(90%); transform: translateY(90%); } } .occart-open .action-bar-float, .search-open .action-bar-float { -webkit-transform: translateY(170%); transform: translateY(170%); pointer-events: none; } .action-bar-main { background: #1a1919; border-radius: 3px; -webkit-box-shadow: 0 4px 14px 0 rgba(82, 89, 95, 0.44); box-shadow: 0 4px 14px 0 rgba(82, 89, 95, 0.44); padding: 12px 25px; will-change: transform; -webkit-transition: .23s ease-in-out transform; transition: .23s ease-in-out transform; max-width: calc(100vw - 40px); } .action-bar-main .action-item__icon { color: #cdcdcd; } .action-bar-main .action-item__label { color: #cdcdcd; } .action-bar-main .action-item[data-item-active="active"] .action-item__icon { color: #cdcdcd; } .action-bar-main .action-item[data-item-active="active"] .action-item__label { color: #cdcdcd; } .action-bar-main .action-item[data-item-active="inactive"] { opacity: .5; } .action-bar__callout { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-flow: row nowrap; flex-flow: row nowrap; position: absolute; right: calc(100% + 20px); top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); white-space: nowrap; text-decoration: none; text-shadow: 0 0 10px white; } @media (max-width: 670px) { .action-bar__callout { font-size: 12px; font-size: 0.66667rem; line-height: 14px; line-height: 0.77778rem; right: calc(100% + 10px); } } @media (max-width: 670px) { .site--down .action-bar__callout { -webkit-transform: translateY(-30px); transform: translateY(-30px); } } .action-bar__callout .icon { -webkit-box-flex: 0; -ms-flex: 0 0 auto; flex: 0 0 auto; display: block; width: 15px; position: relative; top: -1px; margin-right: 10px; will-change: opacity, transform; -webkit-transition: .2s ease-out all; transition: .2s ease-out all; } @media (max-width: 670px) { .action-bar__callout .icon { width: 12px; } } .action-bar__callout.scroll--bottom .icon { -webkit-transform: rotate(180deg); transform: rotate(180deg); } .action-bar__callout .label { position: relative; } .callout-label { will-change: opacity, transform; -webkit-transition: .2s ease-out all; transition: .2s ease-out all; } @media (max-width: 480px) { .callout-label { display: none; } } .callout-label__default { position: absolute; top: 0; left: 0; } .scroll--bottom .callout-label__default { opacity: 0; -webkit-transform: translateY(-100%); transform: translateY(-100%); } .callout-label__active { opacity: 0; -webkit-transform: translateY(100%); transform: translateY(100%); } .scroll--bottom .callout-label__active { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } .action-item { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-flow: column nowrap; flex-flow: column nowrap; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin-left: 40px; cursor: pointer; } .action-item[data-item-active="active"] .action-item__icon { color: #1a1919; } .action-item[data-item-active="active"] .action-item__label { color: #1a1919; } .action-item__icon { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-flow: row nowrap; flex-flow: row nowrap; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; width: 20px; height: 20px; margin-bottom: 10px; } .action-item__icon svg { width: 100%; } [data-actionbar-module-state="active"] .action-item__icon > svg { opacity: 0; } [data-actionbar-module-state="active"] .action-item__icon .action-item__close { opacity: 1; } .action-item__close { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; pointer-events: none; } .action-item__label { position: relative; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: greyscale; color: #cdcdcd; text-align: center; white-space: nowrap; } .action-item__label .text--active { position: absolute; top: 0; left: 0; width: 100%; opacity: 0; } [data-actionbar-module-state="active"] .action-item__label .text--default { opacity: 0; } [data-actionbar-module-state="active"] .action-item__label .text--active { opacity: 1; } .action-bar__module-container { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: greyscale; position: absolute; bottom: calc(100% - 3px); padding-bottom: 3px; left: 0; width: 100%; background: #1a1919; border-radius: 3px; max-height: 500px; overflow: auto; -webkit-overflow-scrolling: touch; color: #fff; font-family: "Muli", "Arial", sans-serif; font-size: 13px; font-size: 0.72222rem; line-height: 18px; line-height: 1rem; -ms-overflow-style: none; /* IE 11 */ scrollbar-width: none; /* Firefox 64 */ } @media (max-width: 1260px) { .action-bar__module-container { font-size: 13px; font-size: 0.72222rem; line-height: 16px; line-height: 0.88889rem; } } @media (max-width: 1023px) { .action-bar__module-container { font-size: 12px; font-size: 0.66667rem; line-height: 14px; line-height: 0.77778rem; } } @media (max-width: 670px) { .action-bar__module-container { font-size: 12px; font-size: 0.66667rem; line-height: 14px; line-height: 0.77778rem; } } @media (max-width: 480px) { .action-bar__module-container { font-size: 12px; font-size: 0.66667rem; line-height: 14px; line-height: 0.77778rem; } } .action-bar__module-container::-webkit-scrollbar { width: 0px; /* Remove scrollbar space */ background: transparent; /* Optional: just make scrollbar invisible */ } @media screen and (max-height: 500px) { .action-bar__module-container { max-height: 220px; } } @media (max-width: 480px) { .action-bar__module-container { max-height: 400px; } } .action-bar-module { display: none; padding: 20px; } @media (max-width: 670px) { .action-bar-module { padding: 15px; } } .action-bar-module__close { position: -webkit-sticky; position: sticky; top: 10px; margin-left: auto; width: 30px; height: 30px; padding: 7px; color: rgba(240, 240, 240, 0.5); background: #1a1919; border: 1px solid rgba(240, 240, 240, 0.2); border-radius: 3px; z-index: 10; cursor: pointer; } .action-bar-module__close.is--fixed { margin-bottom: -30px; } .action-bar-module__close:hover { background: rgba(247, 247, 247, 0.2); } .product-menu-nav { margin-left: -20px; margin-right: -20px; } @media (max-width: 670px) { .product-menu-nav { margin-left: -15px; margin-right: -15px; } } .product-menu-nav li a { position: relative; display: block; width: 100%; padding: 10px 20px; } .product-menu-nav li a:hover { background: rgba(221, 243, 251, 0.2); } @media (max-width: 670px) { .product-menu-nav li a { padding-top: 15px; padding-bottom: 15px; } } .product-menu-nav li.menu-item-has-children > a:after { content: ''; display: block; position: absolute; top: calc(10px + .5ch); right: 20px; width: 10px; height: 6px; background: url("../img/icons/arrow-down-white.svg") no-repeat center center; background-size: contain; } @media (max-width: 670px) { .product-menu-nav li.menu-item-has-children > a:after { top: calc(15px + .5ch); } } .product-menu-nav li.menu-item--open > a:after { -webkit-transform: rotate(180deg); transform: rotate(180deg); } .product-menu-nav li ul { display: none; background: rgba(221, 243, 251, 0.3); } .product-menu-nav li ul a { padding-left: 35px; } .actionbar--onboarding .page-fade { opacity: 1; pointer-events: auto; } .actionbar--onboarding .action-bar-float { bottom: 50%; right: 50%; -webkit-transform: translate(50%, 50%); transform: translate(50%, 50%); } @media (max-width: 670px) { .actionbar--onboarding .action-bar-float { bottom: 40%; } } .actionbar--onboarding .action-bar__onboarding { opacity: 1; pointer-events: auto; } .actionbar--prepare .action-bar-float { will-change: top, left, bottom, right, transform; -webkit-transition: 1.25s cubic-bezier(0.785, 0.135, 0.15, 0.86) all; transition: 1.25s cubic-bezier(0.785, 0.135, 0.15, 0.86) all; } .action-bar__onboarding { opacity: 0; pointer-events: none; position: absolute; bottom: calc(100% + 50px); width: 50vw; left: calc(-1 * ((50vw - 100%) / 2)); text-align: center; will-change: opacity; -webkit-transition: 1s ease opacity; transition: 1s ease opacity; } @media (max-width: 670px) { .action-bar__onboarding { width: 100vw; left: calc(-1 * ((100vw - 100%) / 2)); padding: 0 40px; } } .product-box { width: calc(16.66667% - 20px); } @-moz-document url-prefix() { .product-box { width: calc(16.58333% - 20px); } } @media (max-width: 1260px) { .product-box { width: calc(25% - 20px); } } @media (max-width: 670px) { .product-box { width: calc(33.33333% - 20px); } } @media (max-width: 480px) { .product-box { width: calc(50% - 20px); } } .product-box__image { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-flow: row nowrap; flex-flow: row nowrap; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; background: #f7f7f7; margin-bottom: 15px; -webkit-transition: .2s ease background; transition: .2s ease background; padding: 15px; } @media (max-width: 670px) { .product-box__image { padding: 25px; } } .product-box__image:hover { background: rgba(205, 205, 205, 0.7); } .product-box__image:hover img { opacity: .7; -webkit-transform: scale(1.03); transform: scale(1.03); } .product-box__image:hover + .product-box__content { pointer-events: none; color: #fff; -webkit-transform: translate(15px, calc(-1 * 100% - 30px)); transform: translate(15px, calc(-1 * 100% - 30px)); } .product-box__image img { will-change: opacity, transform; -webkit-transition: .2s ease all; transition: .2s ease all; } .product-box__image a { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-flow: row nowrap; flex-flow: row nowrap; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; width: 100%; height: 100%; } .product-box__image a:after { content: ''; display: block; padding-top: 100%; } .product-box__image:after { content: ''; display: block; padding-top: 100%; } .product-box__content { font-weight: 500; color: #52595f; padding-right: 20px; will-change: transform, color; -webkit-transition: .2s ease all; transition: .2s ease all; } .product-box__content a { color: inherit; text-decoration: none; } .product-grid { margin-bottom: -40px; } .product-grid .product-box { margin-bottom: 40px; } .product-grid__text { width: calc(33.33333% - 20px); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-flow: column nowrap; flex-flow: column nowrap; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; margin-bottom: 70px; padding-left: 40px; } @media (max-width: 1023px) { .product-grid__text { width: calc(50% - 20px); padding-left: 20px; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; padding-bottom: 0; padding-top: 10px; } } @media (max-width: 480px) { .product-grid__text { width: 100%; padding-left: 0; } } .breakout-section__element { width: calc(100% + (var(--bs-max-width) - var(--inner-width)) / 2); } .breakout-section--left .breakout-section__element { margin-left: calc(-1 * (var(--bs-max-width) - var(--inner-width)) / 2) !important; } .text-icon-block__icon { width: 50px; height: 50px; } @media (max-width: 1023px) { .text-icon-block__icon { width: 40px; height: 40px; } } .text-icon-block__headline { font-size: 20px; font-size: 1.11111rem; line-height: 21px; line-height: 1.16667rem; letter-spacing: 0.4px; color: #1a1919; text-transform: uppercase; font-weight: 600; } @media (max-width: 1260px) { .text-icon-block__headline { font-size: 20px; font-size: 1.11111rem; line-height: 21px; line-height: 1.16667rem; letter-spacing: 0.4px; } } @media (max-width: 1023px) { .text-icon-block__headline { font-size: 18px; font-size: 1rem; line-height: 19px; line-height: 1.05556rem; letter-spacing: 0.7px; } } @media (max-width: 670px) { .text-icon-block__headline { font-size: 16px; font-size: 0.88889rem; line-height: 18px; line-height: 1rem; letter-spacing: 0.7px; } } @media (max-width: 480px) { .text-icon-block__headline { font-size: 16px; font-size: 0.88889rem; line-height: 18px; line-height: 1rem; letter-spacing: 0.7px; } } .divider { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-flow: row nowrap; flex-flow: row nowrap; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .divider:before, .divider:after { content: ''; display: block; width: 100%; height: 1px; background: #cdcdcd; } .divider__content { -webkit-box-flex: 0; -ms-flex: 0 0 auto; flex: 0 0 auto; padding: 0 35px; text-transform: uppercase; font-size: 20px; font-size: 1.11111rem; line-height: 21px; line-height: 1.16667rem; letter-spacing: 0.4px; letter-spacing: 1.5px; color: #cdcdcd; } @media (max-width: 1260px) { .divider__content { font-size: 20px; font-size: 1.11111rem; line-height: 21px; line-height: 1.16667rem; letter-spacing: 0.4px; } } @media (max-width: 1023px) { .divider__content { font-size: 18px; font-size: 1rem; line-height: 19px; line-height: 1.05556rem; letter-spacing: 0.7px; } } @media (max-width: 670px) { .divider__content { font-size: 16px; font-size: 0.88889rem; line-height: 18px; line-height: 1rem; letter-spacing: 0.7px; } } @media (max-width: 480px) { .divider__content { font-size: 16px; font-size: 0.88889rem; line-height: 18px; line-height: 1rem; letter-spacing: 0.7px; } } @media (max-width: 480px) { .divider__content { padding: 0 15px; } } .image-slider img { width: 100%; } .image-slider .ar { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .image-slider .ar iframe { position: relative; } .image-slider .swiper-slide.is--video { height: auto; } .image-slider .swiper-slide.is--video a { display: block; } .image-slider .swiper-slide.is--video iframe { pointer-events: none; height: 100%; } .swiper-button-prev, .swiper-button-next { width: 45px; height: 45px; background: #fff; } @media (max-width: 670px) { .swiper-button-prev, .swiper-button-next { width: 30px; height: 30px; } } .swiper-button-prev:after, .swiper-button-next:after { content: ''; display: block; width: 20px; height: 16px; background: url("../img/icons/nav-caret-down-blue.svg") no-repeat center center; background-size: contain; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } @media (max-width: 670px) { .swiper-button-prev:after, .swiper-button-next:after { width: 10px; height: 8px; } } .swiper-button-prev { left: 20px; } .swiper-button-prev:after { left: calc(50% - 3px); -webkit-transform: translate(-50%, -50%) rotate(90deg); transform: translate(-50%, -50%) rotate(90deg); } .swiper-button-next { right: 20px; } .swiper-button-next:after { top: calc(50% + 1px); left: calc(50% + 1px); -webkit-transform: translate(-50%, -50%) rotate(-90deg); transform: translate(-50%, -50%) rotate(-90deg); } .swiper-container-horizontal .swiper-pagination-bullets { bottom: 0; width: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-flow: row nowrap; flex-flow: row nowrap; } .swiper-container-horizontal .swiper-pagination-bullet { position: relative; width: 100%; height: 6px; border-radius: 0; opacity: 1; background: #f0f0f0; margin: 0 !important; border-left: 2px solid #fff; border-right: 2px solid #fff; } @media (max-width: 1023px) { .swiper-container-horizontal .swiper-pagination-bullet { height: 4px; } } .swiper-container-horizontal .swiper-pagination-bullet:after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #cdcdcd; z-index: 1; -webkit-transform-origin: 100% 100%; transform-origin: 100% 100%; -webkit-transform: scaleX(0); transform: scaleX(0); will-change: transform; -webkit-transition: 0.23s cubic-bezier(0.6, 0.04, 0.98, 0.335) -webkit-transform; transition: 0.23s cubic-bezier(0.6, 0.04, 0.98, 0.335) -webkit-transform; transition: 0.23s cubic-bezier(0.6, 0.04, 0.98, 0.335) transform; transition: 0.23s cubic-bezier(0.6, 0.04, 0.98, 0.335) transform, 0.23s cubic-bezier(0.6, 0.04, 0.98, 0.335) -webkit-transform; } .swiper-container-horizontal .swiper-pagination-bullet.swiper-pagination-bullet-active:after { -webkit-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: scaleX(1); transform: scaleX(1); } .logo-grid-container .swiper-pagination, .logo-grid-container .swiper-button-prev, .logo-grid-container .swiper-button-next { display: none; } @media (max-width: 670px) { .logo-grid-container .swiper-pagination, .logo-grid-container .swiper-button-prev, .logo-grid-container .swiper-button-next { display: block; } } .logo-grid__logo { padding: 30px; width: calc(16.66667% - 20px); } .frontpage__logo-grid .logo-grid__logo { -webkit-filter: grayscale(100%); filter: grayscale(100%); } @media (max-width: 1023px) { .logo-grid__logo { width: calc(25% - 20px); } } @media (max-width: 670px) { .logo-grid__logo { padding: 20px; width: calc(33.33333% - 20px); } } @media (max-width: 480px) { .logo-grid__logo { padding: 10px; } } .breadcrumb { text-transform: uppercase; } @media (max-width: 480px) { .breadcrumb { font-size: 10px; font-size: 0.55556rem; } } .breadcrumb__nav { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-flow: row wrap; flex-flow: row wrap; margin-left: -15px; margin-bottom: -10px; } @media (max-width: 480px) { .breadcrumb__nav { margin-left: -10px; } } .breadcrumb__nav li { margin-left: 15px; margin-bottom: 10px; color: #757373; } @media (max-width: 480px) { .breadcrumb__nav li { margin-left: 10px; } } .breadcrumb__nav li:last-of-type { color: #253858; } .breadcrumb__nav li + li { position: relative; padding-left: 15px; } @media (max-width: 480px) { .breadcrumb__nav li + li { padding-left: 10px; } } .breadcrumb__nav li + li:before { content: ''; display: inline-block; width: 1px; height: 15px; position: absolute; left: 0; top: 2px; background: #cdcdcd; -webkit-transform: rotate(18deg); transform: rotate(18deg); } @media (max-width: 480px) { .breadcrumb__nav li + li:before { top: 0; height: 13px; } } .intro { padding-top: 40px; } .info-chapter__header { margin-bottom: 40px; border-bottom: 1px solid #cdcdcd; padding-bottom: 30px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-flow: row nowrap; flex-flow: row nowrap; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } @media (max-width: 670px) { .info-chapter__header { margin-bottom: 30px; padding-bottom: 20px; } } .product-info-chapters .info-chapter__header { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-flow: row nowrap; flex-flow: row nowrap; } .info-chapter__digit { -webkit-box-flex: 0; -ms-flex: 0 0 auto; flex: 0 0 auto; font-size: 62px; font-size: 3.44444rem; font-weight: 600; margin-right: 20px; margin-left: 20px; } @media (max-width: 670px) { .info-chapter__digit { font-size: 42px; font-size: 2.33333rem; } } .info-chapter__title { font-size: 24px; font-size: 1.33333rem; line-height: 24px; line-height: 1.33333rem; letter-spacing: 0.4px; font-weight: 600; } @media (max-width: 1260px) { .info-chapter__title { font-size: 24px; font-size: 1.33333rem; line-height: 24px; line-height: 1.33333rem; letter-spacing: 0.4px; } } @media (max-width: 1023px) { .info-chapter__title { font-size: 20px; font-size: 1.11111rem; line-height: 20px; line-height: 1.11111rem; letter-spacing: 0.33px; } } @media (max-width: 670px) { .info-chapter__title { font-size: 20px; font-size: 1.11111rem; line-height: 20px; line-height: 1.11111rem; letter-spacing: 0.33px; } } @media (max-width: 480px) { .info-chapter__title { font-size: 20px; font-size: 1.11111rem; line-height: 20px; line-height: 1.11111rem; letter-spacing: 0.33px; } } @media (max-width: 670px) { .info-chapter__title { font-size: 16px; font-size: 0.88889rem; line-height: 23px; line-height: 1.27778rem; letter-spacing: 0.3px; } } @media (max-width: 670px) and (max-width: 1260px) { .info-chapter__title { font-size: 16px; font-size: 0.88889rem; line-height: 23px; line-height: 1.27778rem; letter-spacing: 0.3px; } } @media (max-width: 670px) and (max-width: 1023px) { .info-chapter__title { font-size: 14px; font-size: 0.77778rem; line-height: 18px; line-height: 1rem; letter-spacing: 0.3px; } } @media (max-width: 670px) and (max-width: 670px) { .info-chapter__title { font-size: 14px; font-size: 0.77778rem; line-height: 18px; line-height: 1rem; letter-spacing: 0.3px; } } @media (max-width: 670px) and (max-width: 480px) { .info-chapter__title { font-size: 14px; font-size: 0.77778rem; line-height: 18px; line-height: 1rem; letter-spacing: 0.3px; } } .info-chapter__subtitle { width: 50%; text-align: right; font-size: 13px; font-size: 0.72222rem; line-height: 18px; line-height: 1rem; } @media (max-width: 1260px) { .info-chapter__subtitle { font-size: 13px; font-size: 0.72222rem; line-height: 16px; line-height: 0.88889rem; } } @media (max-width: 1023px) { .info-chapter__subtitle { font-size: 12px; font-size: 0.66667rem; line-height: 14px; line-height: 0.77778rem; } } @media (max-width: 670px) { .info-chapter__subtitle { font-size: 12px; font-size: 0.66667rem; line-height: 14px; line-height: 0.77778rem; } } @media (max-width: 480px) { .info-chapter__subtitle { font-size: 12px; font-size: 0.66667rem; line-height: 14px; line-height: 0.77778rem; } } .info-chapter-header__content { width: 50%; } .content-block + .content-block { margin-top: 60px; padding-top: 60px; border-top: 1px solid #eaeaea; } @media (max-width: 670px) { .content-block + .content-block { margin-top: 40px; padding-top: 40px; } } .content-block .col { padding: 20px; } @media (max-width: 670px) { .content-block .col { padding: 20px 0; } } @media (max-width: 480px) { .content-block .col { padding: 0; } } .content-block .col:first-of-type { padding-left: 0; } .content-block .col:last-of-type { padding-right: 0; } .content-block .col + .col { border-left: 1px solid #f0f0f0; } .info-chapter + .info-chapter { margin-top: 60px; } .download-listing { margin-bottom: -14px; } .download-listing__entry { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-flow: row nowrap; flex-flow: row nowrap; margin-bottom: 14px; } .download-listing__entry .icon { position: relative; top: -2px; margin-right: 10px; } .download-listing__link { font-weight: 500; display: inline-block; margin-right: 5px; } .download-listing__suffix { color: #757373; } .lightbox-gallery__image { width: calc(16.66667% - 20px); } @media (max-width: 670px) { .lightbox-gallery__image { width: calc(33.33333% - 20px); } } .lightbox-gallery__image img { display: block; } .product-slider:hover .product-slide { opacity: .5; } .product-slider .swiper-slide { display: inline-block; width: auto; padding: 0 30px; } @media (max-width: 1023px) { .product-slider .swiper-slide { padding: 0 20px; } } .product-slide { text-align: center; will-change: opacity; -webkit-transition: .2s ease opacity; transition: .2s ease opacity; } .product-slide:hover { opacity: 1 !important; } .product-slide:hover .button, .product-slide:hover input[type="submit"] { -webkit-transform: translateY(-5px); transform: translateY(-5px); } .product-slide__image { display: block; width: 300px; height: 300px; margin: 0 auto 20px auto; padding: 20px; text-align: center; } @media (max-width: 1023px) { .product-slide__image { width: 250px; height: 250px; } } @media (max-width: 670px) { .product-slide__image { width: 200px; height: 200px; } } .product-slide__image:hover img { -webkit-transform: scale(1.05); transform: scale(1.05); } .product-slide__image img { height: 100%; will-change: transform; -webkit-transition: 0.13s cubic-bezier(0.86, 0, 0.07, 1) -webkit-transform; transition: 0.13s cubic-bezier(0.86, 0, 0.07, 1) -webkit-transform; transition: 0.13s cubic-bezier(0.86, 0, 0.07, 1) transform; transition: 0.13s cubic-bezier(0.86, 0, 0.07, 1) transform, 0.13s cubic-bezier(0.86, 0, 0.07, 1) -webkit-transform; } .product-slide .button, .product-slide input[type="submit"] { margin-bottom: 30px; } .category-slider .swiper-button-prev, .category-slider .swiper-button-next { top: calc(50% - 40px); } @media (max-width: 670px) { .category-slider .swiper-button-prev, .category-slider .swiper-button-next { top: calc(50% - 35px); } } .category-slider .swiper-button-next { right: 0; } @media (max-width: 670px) { .category-slider .swiper-button-next { right: -1px; } } .category-slider .swiper-button-prev { left: 0; } @media (max-width: 670px) { .category-slider .swiper-button-prev { left: -1px; } } .category-slider .swiper-pagination { width: 200px; height: 3px; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); } .tab-switcher { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-flow: row nowrap; flex-flow: row nowrap; overflow-x: auto; } .tab-switcher-wrapper { position: relative; width: 100%; padding: 0 30px; } @media (max-width: 670px) { .tab-switcher-wrapper { padding: 0 10px; } } .tab-switcher__tab { -webkit-box-flex: 0; -ms-flex: 0 0 auto; flex: 0 0 auto; margin-left: 0; font-size: 16px; font-size: 0.88889rem; line-height: 23px; line-height: 1.27778rem; letter-spacing: 0.3px; font-weight: 500; color: #757373; padding: 20px 20px 18px 20px; border-top: 3px solid transparent; } @media (max-width: 1260px) { .tab-switcher__tab { font-size: 16px; font-size: 0.88889rem; line-height: 23px; line-height: 1.27778rem; letter-spacing: 0.3px; } } @media (max-width: 1023px) { .tab-switcher__tab { font-size: 14px; font-size: 0.77778rem; line-height: 18px; line-height: 1rem; letter-spacing: 0.3px; } } @media (max-width: 670px) { .tab-switcher__tab { font-size: 14px; font-size: 0.77778rem; line-height: 18px; line-height: 1rem; letter-spacing: 0.3px; } } @media (max-width: 480px) { .tab-switcher__tab { font-size: 14px; font-size: 0.77778rem; line-height: 18px; line-height: 1rem; letter-spacing: 0.3px; } } .tab-switcher__tab:hover { border-top: 3px solid #cdcdcd; } .tab-switcher__tab.tab--current { font-weight: 600; color: #253858; border-top: 3px solid #f0f0f0; border-top-right-radius: 5px; border-top-left-radius: 5px; background: #fbfbfb; } .tab-switcher__arrow { display: none; width: 40px; height: 100%; position: absolute; top: 0; background: white url("../img/icons/caret-right-blue.svg") no-repeat center center; background-size: 8px; cursor: pointer; z-index: 2; } .tab-switcher__arrow:hover { background-color: #ddf3fb; } .tab-switcher__arrow--left { left: 0; -webkit-transform: scaleX(-1); transform: scaleX(-1); } @media (max-width: 1260px) { .tab-switcher__arrow--left { left: -30px; } } .tab-switcher__arrow--right { right: 0; } @media (max-width: 1260px) { .tab-switcher__arrow--right { right: -30px; } } .tab-switcher--scrolling .tab-switcher__arrow { display: block; } .listing-post { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: greyscale; } .listing-post__image-col { -webkit-box-flex: 0; -ms-flex: 0 0 auto; flex: 0 0 auto; width: calc(25% - 20px); } @media (max-width: 1260px) { .listing-post__image-col { width: calc(33.33333% - 20px); } } @media (max-width: 670px) { .listing-post__image-col { width: calc(100% - 20px); margin-bottom: 20px; } } .listing-post__image-col img { display: block; } @media (max-width: 670px) { .listing-post__image-col img { width: 100%; } } .listing-post__content { width: calc(75% - 20px); } @media (max-width: 1260px) { .listing-post__content { width: calc(66.66667% - 20px); } } @media (max-width: 670px) { .listing-post__content { width: calc(100% - 20px); } } .listing-post__meta-row, .news-post__meta-row { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-flow: row nowrap; flex-flow: row nowrap; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding-bottom: 10px; border-bottom: 1px solid #f0f0f0; margin-bottom: 20px; } .listing-post__date, .news-post__date { text-transform: uppercase; color: #757373; } .listing-post__headline { color: #253858; } .tag-pill, .listing-post__tags li, .news-post__tag-list li { display: inline-block; color: #fff; background: #253858; padding: 4px 10px 5px 10px; } .video-list__col { position: relative; width: calc(25% - 20px); overflow: hidden; margin-bottom: 20px; } @media (max-width: 1023px) { .video-list__col { width: calc(33.33333% - 20px); } } @media (max-width: 670px) { .video-list__col { width: calc(50% - 20px); } } @media (max-width: 480px) { .video-list--1 .video-list__col { width: calc(100% - 20px); } } .video-list__col:after { content: ''; display: block; width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 2; background: rgba(37, 56, 88, 0.5) url("../img/icons/play-white.svg") no-repeat center center; background-size: 60px; pointer-events: none; -webkit-transition: 0.2s ease color, 0.13s cubic-bezier(0.455, 0.03, 0.515, 0.955) background, 0.13s cubic-bezier(0.455, 0.03, 0.515, 0.955) background-size; transition: 0.2s ease color, 0.13s cubic-bezier(0.455, 0.03, 0.515, 0.955) background, 0.13s cubic-bezier(0.455, 0.03, 0.515, 0.955) background-size; } @media (max-width: 670px) { .video-list__col:after { background-size: 40px; } } .video-list__col:hover:after { background: rgba(119, 208, 236, 0.5) url("../img/icons/play-white.svg") no-repeat center center; background-size: 80px; } @media (max-width: 670px) { .video-list__col:hover:after { background-size: 55px; } } .video-list__col a { display: block; width: 100%; } .video-list__col img { display: block; width: 100%; } .video-list__link { color: #253858; } .video-list__link .icon--arrow-right { width: 8px; height: 18px; margin-left: 5px; } .rte-content { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: greyscale; } @media (max-width: 1023px) { .rte-content { font-size: .9rem; } } @media (max-width: 670px) { .rte-content { font-size: .8rem; } } .rte-content h1 { text-transform: uppercase; } .rte-content h1, .rte-content h2, .rte-content h3, .rte-content h4, .rte-content h5, .rte-content h6 { margin-bottom: .8em; } .rte-content p:not(.gform_fields):not(.gfield_checkbox) + h1, .rte-content p:not(.gform_fields):not(.gfield_checkbox) + h2, .rte-content p:not(.gform_fields):not(.gfield_checkbox) + h3, .rte-content p:not(.gform_fields):not(.gfield_checkbox) + h4, .rte-content p:not(.gform_fields):not(.gfield_checkbox) + h5, .rte-content p:not(.gform_fields):not(.gfield_checkbox) + h6, .rte-content ul:not(.gform_fields):not(.gfield_checkbox) + h1, .rte-content ul:not(.gform_fields):not(.gfield_checkbox) + h2, .rte-content ul:not(.gform_fields):not(.gfield_checkbox) + h3, .rte-content ul:not(.gform_fields):not(.gfield_checkbox) + h4, .rte-content ul:not(.gform_fields):not(.gfield_checkbox) + h5, .rte-content ul:not(.gform_fields):not(.gfield_checkbox) + h6, .rte-content ol:not(.gform_fields):not(.gfield_checkbox) + h1, .rte-content ol:not(.gform_fields):not(.gfield_checkbox) + h2, .rte-content ol:not(.gform_fields):not(.gfield_checkbox) + h3, .rte-content ol:not(.gform_fields):not(.gfield_checkbox) + h4, .rte-content ol:not(.gform_fields):not(.gfield_checkbox) + h5, .rte-content ol:not(.gform_fields):not(.gfield_checkbox) + h6 { margin-top: 2em; } .rte-content ul:not(.gform_fields):not(.gfield_checkbox), .rte-content ol:not(.gform_fields):not(.gfield_checkbox) { padding-left: 1em; line-height: 1.2; } .rte-content ul:not(.gform_fields):not(.gfield_checkbox) li, .rte-content ol:not(.gform_fields):not(.gfield_checkbox) li { margin-bottom: .5em; } .rte-content ul:not(.gform_fields):not(.gfield_checkbox) { list-style: disc; } .rte-content ol { list-style: decimal-leading-zero; padding-left: 2em !important; } .rte-content small { font-size: 16px; font-size: 0.88889rem; line-height: 23px; line-height: 1.27778rem; letter-spacing: 0.3px; } @media (max-width: 1260px) { .rte-content small { font-size: 16px; font-size: 0.88889rem; line-height: 23px; line-height: 1.27778rem; letter-spacing: 0.3px; } } @media (max-width: 1023px) { .rte-content small { font-size: 14px; font-size: 0.77778rem; line-height: 18px; line-height: 1rem; letter-spacing: 0.3px; } } @media (max-width: 670px) { .rte-content small { font-size: 14px; font-size: 0.77778rem; line-height: 18px; line-height: 1rem; letter-spacing: 0.3px; } } @media (max-width: 480px) { .rte-content small { font-size: 14px; font-size: 0.77778rem; line-height: 18px; line-height: 1rem; letter-spacing: 0.3px; } } @media (max-width: 480px) { .rte-content img { display: block; margin: 0 auto 20px auto; } } .rte-content iframe { max-width: 100%; } .rte-content .aligncenter { display: block; margin: 0 auto; } .rte-content .alignright { float: right; margin-left: 20px; margin-bottom: 20px; } @media (max-width: 480px) { .rte-content .alignright { float: none; } } .rte-content .alignleft { float: left; margin-right: 20px; margin-bottom: 20px; } @media (max-width: 480px) { .rte-content .alignleft { float: none; } } .rte-content figure { margin: 40px 0; } @media (max-width: 1023px) { .rte-content figure { margin: 30px 0; } } @media (max-width: 480px) { .rte-content figure { margin: 20px 0; } } .rte-content hr.wp-block-separator { margin: 2rem 0; } .rte-content .has-medium-font-size { font-size: 20px; font-size: 1.11111rem; line-height: 21px; line-height: 1.16667rem; letter-spacing: 0.4px; line-height: 1.4; } @media (max-width: 1260px) { .rte-content .has-medium-font-size { font-size: 20px; font-size: 1.11111rem; line-height: 21px; line-height: 1.16667rem; letter-spacing: 0.4px; } } @media (max-width: 1023px) { .rte-content .has-medium-font-size { font-size: 18px; font-size: 1rem; line-height: 19px; line-height: 1.05556rem; letter-spacing: 0.7px; } } @media (max-width: 670px) { .rte-content .has-medium-font-size { font-size: 16px; font-size: 0.88889rem; line-height: 18px; line-height: 1rem; letter-spacing: 0.7px; } } @media (max-width: 480px) { .rte-content .has-medium-font-size { font-size: 16px; font-size: 0.88889rem; line-height: 18px; line-height: 1rem; letter-spacing: 0.7px; } } .rte-content .wp-block-cover { width: 100vw; height: auto; margin-left: calc( -1 * ((100vw - 100%) / 2)); } .rte-content .wp-block-quote { font-family: "Libre Baskerville", "Times New Roman", serif; } .rte-content .wp-block-quote.is-style-large { text-align: center; margin: 3rem 0; } .rte-content .wp-block-quote.is-style-large p { font-size: 34px; font-size: 1.88889rem; line-height: 37px; line-height: 2.05556rem; letter-spacing: 0.94px; line-height: 1.5; } @media (max-width: 1260px) { .rte-content .wp-block-quote.is-style-large p { font-size: 34px; font-size: 1.88889rem; line-height: 37px; line-height: 2.05556rem; letter-spacing: 0.94px; } } @media (max-width: 1023px) { .rte-content .wp-block-quote.is-style-large p { font-size: 29px; font-size: 1.61111rem; line-height: 31px; line-height: 1.72222rem; letter-spacing: 0.8px; } } @media (max-width: 670px) { .rte-content .wp-block-quote.is-style-large p { font-size: 24px; font-size: 1.33333rem; line-height: 29px; line-height: 1.61111rem; letter-spacing: 0.66px; } } @media (max-width: 480px) { .rte-content .wp-block-quote.is-style-large p { font-size: 24px; font-size: 1.33333rem; line-height: 29px; line-height: 1.61111rem; letter-spacing: 0.66px; } } .rte-content .wp-block-quote p { color: #253858; } .rte-content .kt-svg-icon-list { padding-left: 0 !important; } .rte-content .kt-svg-icon-list-single { -webkit-box-flex: 0; -ms-flex: 0 0 auto; flex: 0 0 auto; } .rte-content .kt-blocks-accordion-header.kt-accordion-panel-active { background: #77d0ec !important; } .rte-content ul.kt-tabs-title-list[role="tablist"] { margin-bottom: -9px !important; padding-left: 0 !important; } .rte-content .kt-row-column-wrap { padding: 0; } .wp-caption { max-width: 100%; } .wp-caption-text { text-align: center; padding: 5px 10px; } .ngg-gallery-thumbnail img { display: block; width: 100%; } .ngg-galleryoverview { margin-top: 0 !important; } div.ngg-navigation { font-size: 16px; font-size: 0.88889rem; line-height: 23px; line-height: 1.27778rem; letter-spacing: 0.3px; } @media (max-width: 1260px) { div.ngg-navigation { font-size: 16px; font-size: 0.88889rem; line-height: 23px; line-height: 1.27778rem; letter-spacing: 0.3px; } } @media (max-width: 1023px) { div.ngg-navigation { font-size: 14px; font-size: 0.77778rem; line-height: 18px; line-height: 1rem; letter-spacing: 0.3px; } } @media (max-width: 670px) { div.ngg-navigation { font-size: 14px; font-size: 0.77778rem; line-height: 18px; line-height: 1rem; letter-spacing: 0.3px; } } @media (max-width: 480px) { div.ngg-navigation { font-size: 14px; font-size: 0.77778rem; line-height: 18px; line-height: 1rem; letter-spacing: 0.3px; } } div.ngg-navigation span.current { background: #77d0ec !important; padding: 4px 10px !important; border-radius: 0 !important; } div.ngg-navigation a.page-numbers { font-weight: 400 !important; background: transparent !important; color: #000 !important; padding: 4px 10px !important; border-radius: 0 !important; } div.ngg-navigation a.page-numbers:hover { color: #757373 !important; background: #f0f0f0 !important; } .gform_hidden, .gform_validation_container { display: none !important; } .gform_fields { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-flow: row wrap; flex-flow: row wrap; margin-left: -20px; } .gform_fields > li { margin-left: 20px; margin-bottom: 20px; } .gform_button { width: 100%; } .gfield { position: relative; } .gfield_label { font-size: 13px; font-size: 0.72222rem; line-height: 18px; line-height: 1rem; position: absolute; top: 50%; left: 10px; -webkit-transform: translateY(-50%); transform: translateY(-50%); color: #cdcdcd; padding: 0 15px; background: #fff; will-change: top, color; -webkit-transition: 0.18s cubic-bezier(0.785, 0.135, 0.15, 0.86) all; transition: 0.18s cubic-bezier(0.785, 0.135, 0.15, 0.86) all; cursor: text; top: 0; left: 10px; color: #000; } @media (max-width: 1260px) { .gfield_label { font-size: 13px; font-size: 0.72222rem; line-height: 16px; line-height: 0.88889rem; } } @media (max-width: 1023px) { .gfield_label { font-size: 12px; font-size: 0.66667rem; line-height: 14px; line-height: 0.77778rem; } } @media (max-width: 670px) { .gfield_label { font-size: 12px; font-size: 0.66667rem; line-height: 14px; line-height: 0.77778rem; } } @media (max-width: 480px) { .gfield_label { font-size: 12px; font-size: 0.66667rem; line-height: 14px; line-height: 0.77778rem; } } .field_description_above .gfield_description { margin-bottom: 20px; } .ginput_container input { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: greyscale; width: 100%; font-size: 16px; font-size: 0.88889rem; line-height: 23px; line-height: 1.27778rem; letter-spacing: 0.3px; } @media (max-width: 1260px) { .ginput_container input { font-size: 16px; font-size: 0.88889rem; line-height: 23px; line-height: 1.27778rem; letter-spacing: 0.3px; } } @media (max-width: 1023px) { .ginput_container input { font-size: 14px; font-size: 0.77778rem; line-height: 18px; line-height: 1rem; letter-spacing: 0.3px; } } @media (max-width: 670px) { .ginput_container input { font-size: 14px; font-size: 0.77778rem; line-height: 18px; line-height: 1rem; letter-spacing: 0.3px; } } @media (max-width: 480px) { .ginput_container input { font-size: 14px; font-size: 0.77778rem; line-height: 18px; line-height: 1rem; letter-spacing: 0.3px; } } .ginput_container_textarea { width: 100%; } .ginput_container_textarea textarea { height: 100px; width: 100%; } .validation_error, .validation_message, #mce-error-response, #mce-success-response { background: #db3232; padding: 10px 20px; border-radius: 3px; color: white; margin-bottom: 40px; } #mce-success-response { background: #98c191; color: #365630; margin-bottom: 0; } .validation_message { display: inline-block; padding: 5px 10px; margin-top: 5px; } .gfield_checkboxes .gfield_label { position: relative; left: 0; padding: 0; } .bf-page { position: absolute; top: 0; left: 0; width: 100%; opacity: 0; visibility: hidden; } @media (max-width: 670px) { .bf-page { display: none !important; } } @media (max-width: 670px) { .bf-page[data-chapter="3"] { display: block !important; opacity: 1 !important; visibility: visible !important; position: relative !important; } } .bf-page.bf--current { position: relative; opacity: 1; visibility: visible; } .bf-page__footer { margin-top: 40px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-flow: row wrap; flex-flow: row wrap; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .beachflag-form-container { background: #fff; } @media (max-width: 670px) { .bf-notice { width: calc(100% + 40px); margin-left: -20px; background: #98c191; padding: 10px 20px; color: #000 !important; } .bf-notice .caption__title, .bf-notice .wp-caption-text { color: #000 !important; margin-bottom: 5px; } } .beachflag__breadcrumb li { cursor: pointer; color: #757373 !important; } .beachflag__breadcrumb.breadcrumb--1 [data-chapter="1"] { color: #253858 !important; } .beachflag__breadcrumb.breadcrumb--2 [data-chapter="2"] { color: #253858 !important; } .beachflag__breadcrumb.breadcrumb--3 [data-chapter="3"] { color: #253858 !important; } .bf-types__sizes-row { width: calc(100% + 60px); margin-left: -20px !important; margin-right: -40px; } .bf-types__sizes-container { width: 100%; padding: 30px 40px; background: #f7f7f7; display: none; } .bf-types__type { position: relative; padding: 10px; cursor: pointer; -webkit-transform: scale(0.98); transform: scale(0.98); will-change: transform; -webkit-transition: 0.2s cubic-bezier(0.455, 0.03, 0.515, 0.955) all; transition: 0.2s cubic-bezier(0.455, 0.03, 0.515, 0.955) all; } .bf-types__type:hover { background: #ddf3fb; } .bf-types__type.type--hasvalue:before { content: ''; display: block; width: 30px; height: 30px; position: absolute; top: 15px; right: 15px; background: url("../img/icons/icon-checkmark-green-light.svg") no-repeat center center; background-size: contain; } .bf-types__type.current { background: #77d0ec; -webkit-transform: scale(1.02); transform: scale(1.02); } .bf-types__type.current:after { content: ''; display: block; position: absolute; bottom: -10px; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); border-style: solid; border-width: 10px 10px 0 10px; border-color: #77d0ec transparent transparent transparent; } .bf-types__type img { display: block; } .bf-sizes-row.js-bf-row-clone .bf-sizes__remove { display: none; } .bf-sizes__remove { text-decoration: none; display: inline-block; line-height: 27px; font-weight: 600; width: 30px; height: 30px; border: 1px solid #253858; text-align: center; border-radius: 200px; } .bf-sizes__remove-col { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-flow: row nowrap; flex-flow: row nowrap; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; } .bf-addon { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-flow: row nowrap; flex-flow: row nowrap; width: calc(50% - 20px); margin-bottom: 20px; } .bf-addon__content { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-flow: row nowrap; flex-flow: row nowrap; } .bf-addon__img { -webkit-box-flex: 0; -ms-flex: 0 0 auto; flex: 0 0 auto; display: block; width: 50px; margin-right: 10px; } .bf-addon__amount-box .amount-box__action { height: 25px; background: #ddf3fb; } .bf-addon__amount-box .amount-box__action:hover { background: #77d0ec; } .bf-addon__amount-box .amount-box__action .minus, .bf-addon__amount-box .amount-box__action .plus { -webkit-transform: scale(0.6); transform: scale(0.6); } .bf-addon__amount-box .amount-box__action .minus span, .bf-addon__amount-box .amount-box__action .plus span { background: #253858; } .off-canvas { position: fixed; top: 0; right: 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-flow: column nowrap; flex-flow: column nowrap; } .off-canvas-header { padding: 30px 40px 0 40px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-flow: row wrap; flex-flow: row wrap; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } @media (max-width: 670px) { .off-canvas-header { padding: 20px 20px 0 20px; } } .off-canvas-header:after { content: ''; display: block; width: 100%; height: 1px; background: #f0f0f0; margin-top: 30px; } @media (max-width: 670px) { .off-canvas-header:after { margin-top: 20px; } } .off-canvas-header__left { width: 25%; } .off-canvas-header__center { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: greyscale; width: 50%; text-align: center; font-size: 16px; font-size: 0.88889rem; line-height: 23px; line-height: 1.27778rem; letter-spacing: 0.3px; font-weight: 500; text-transform: uppercase; color: #757373; } @media (max-width: 1260px) { .off-canvas-header__center { font-size: 16px; font-size: 0.88889rem; line-height: 23px; line-height: 1.27778rem; letter-spacing: 0.3px; } } @media (max-width: 1023px) { .off-canvas-header__center { font-size: 14px; font-size: 0.77778rem; line-height: 18px; line-height: 1rem; letter-spacing: 0.3px; } } @media (max-width: 670px) { .off-canvas-header__center { font-size: 14px; font-size: 0.77778rem; line-height: 18px; line-height: 1rem; letter-spacing: 0.3px; } } @media (max-width: 480px) { .off-canvas-header__center { font-size: 14px; font-size: 0.77778rem; line-height: 18px; line-height: 1rem; letter-spacing: 0.3px; } } @media (max-width: 670px) { .off-canvas-header__center { font-size: 12px; font-size: 0.66667rem; line-height: 14px; line-height: 0.77778rem; } } .off-canvas-header__right { width: 25%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-flow: row wrap; flex-flow: row wrap; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; } .off-canvas-content { padding-bottom: 100px; overflow: auto; -webkit-overflow-scrolling: touch; } .oc-cart { width: 600px; height: 100vh; background: #fff; z-index: 0; border-left: 1px solid #f0f0f0; } @media (max-width: 1023px) { .oc-cart { width: 500px; } } @media (max-width: 480px) { .oc-cart { width: calc(100vw - 30px); } } .oc-cart__close { width: 20px; cursor: pointer; } .oc-cart__items { padding: 30px 40px; } @media (max-width: 670px) { .oc-cart__items { padding: 20px 20px; } } .oc-cart__items:empty:before { display: block; margin: 60px 0 80px; font-size: 13px; font-size: 0.72222rem; line-height: 18px; line-height: 1rem; text-align: center; color: #757373; } @media (max-width: 1260px) { .oc-cart__items:empty:before { font-size: 13px; font-size: 0.72222rem; line-height: 16px; line-height: 0.88889rem; } } @media (max-width: 1023px) { .oc-cart__items:empty:before { font-size: 12px; font-size: 0.66667rem; line-height: 14px; line-height: 0.77778rem; } } @media (max-width: 670px) { .oc-cart__items:empty:before { font-size: 12px; font-size: 0.66667rem; line-height: 14px; line-height: 0.77778rem; } } @media (max-width: 480px) { .oc-cart__items:empty:before { font-size: 12px; font-size: 0.66667rem; line-height: 14px; line-height: 0.77778rem; } } .oc-cart__prices { padding: 20px 40px; background: #f0f0f0; } @media (max-width: 670px) { .oc-cart__prices { padding: 15px 20px; } } .oc-cart__buttons { padding: 0 40px; } @media (max-width: 670px) { .oc-cart__buttons { padding: 0 20px; } .oc-cart__buttons .button, .oc-cart__buttons input[type="submit"] { font-size: 13px; font-size: 0.72222rem; line-height: 18px; line-height: 1rem; } } @media (max-width: 670px) and (max-width: 1260px) { .oc-cart__buttons .button, .oc-cart__buttons input[type="submit"] { font-size: 13px; font-size: 0.72222rem; line-height: 16px; line-height: 0.88889rem; } } @media (max-width: 670px) and (max-width: 1023px) { .oc-cart__buttons .button, .oc-cart__buttons input[type="submit"] { font-size: 12px; font-size: 0.66667rem; line-height: 14px; line-height: 0.77778rem; } } @media (max-width: 670px) and (max-width: 670px) { .oc-cart__buttons .button, .oc-cart__buttons input[type="submit"] { font-size: 12px; font-size: 0.66667rem; line-height: 14px; line-height: 0.77778rem; } } @media (max-width: 670px) and (max-width: 480px) { .oc-cart__buttons .button, .oc-cart__buttons input[type="submit"] { font-size: 12px; font-size: 0.66667rem; line-height: 14px; line-height: 0.77778rem; } } [data-item-count="0"] .oc-cart-button__checkout { display: none; } .prices--articles { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-flow: row nowrap; flex-flow: row nowrap; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; font-size: 16px; font-size: 0.88889rem; line-height: 23px; line-height: 1.27778rem; letter-spacing: 0.3px; } @media (max-width: 1260px) { .prices--articles { font-size: 16px; font-size: 0.88889rem; line-height: 23px; line-height: 1.27778rem; letter-spacing: 0.3px; } } @media (max-width: 1023px) { .prices--articles { font-size: 14px; font-size: 0.77778rem; line-height: 18px; line-height: 1rem; letter-spacing: 0.3px; } } @media (max-width: 670px) { .prices--articles { font-size: 14px; font-size: 0.77778rem; line-height: 18px; line-height: 1rem; letter-spacing: 0.3px; } } @media (max-width: 480px) { .prices--articles { font-size: 14px; font-size: 0.77778rem; line-height: 18px; line-height: 1rem; letter-spacing: 0.3px; } } @media (max-width: 670px) { .prices--articles { font-size: 12px; font-size: 0.66667rem; line-height: 14px; line-height: 0.77778rem; } } .prices--articles-amount { font-weight: 500; } .cart-badge { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-flow: row nowrap; flex-flow: row nowrap; } .cart-badge__icon { position: relative; -webkit-box-flex: 0; -ms-flex: 0 0 auto; flex: 0 0 auto; width: 20px; margin-right: 10px; color: #253858; } .cart-badge__count { position: relative; top: -1px; font-size: 16px; font-size: 0.88889rem; line-height: 23px; line-height: 1.27778rem; font-weight: 500; } @media (max-width: 1260px) { .cart-badge__count { font-size: 16px; font-size: 0.88889rem; line-height: 23px; line-height: 1.27778rem; } } @media (max-width: 1023px) { .cart-badge__count { font-size: 14px; font-size: 0.77778rem; line-height: 18px; line-height: 1rem; } } @media (max-width: 670px) { .cart-badge__count { font-size: 14px; font-size: 0.77778rem; line-height: 18px; line-height: 1rem; } } @media (max-width: 480px) { .cart-badge__count { font-size: 14px; font-size: 0.77778rem; line-height: 18px; line-height: 1rem; } } .badge { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: greyscale; position: absolute; top: -12px; right: -12px; width: 24px; height: 24px; background: #ff0e0e; color: #fff; font-family: "Muli", "Arial", sans-serif; font-size: 13px; font-size: 0.72222rem; line-height: 18px; line-height: 1rem; font-weight: 600; border-radius: 30px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-flow: row nowrap; flex-flow: row nowrap; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; will-change: transform; -webkit-transition: 0.2s cubic-bezier(0.6, 0.04, 0.98, 0.335) -webkit-transform; transition: 0.2s cubic-bezier(0.6, 0.04, 0.98, 0.335) -webkit-transform; transition: 0.2s cubic-bezier(0.6, 0.04, 0.98, 0.335) transform; transition: 0.2s cubic-bezier(0.6, 0.04, 0.98, 0.335) transform, 0.2s cubic-bezier(0.6, 0.04, 0.98, 0.335) -webkit-transform; } @media (max-width: 1260px) { .badge { font-size: 13px; font-size: 0.72222rem; line-height: 16px; line-height: 0.88889rem; } } @media (max-width: 1023px) { .badge { font-size: 12px; font-size: 0.66667rem; line-height: 14px; line-height: 0.77778rem; } } @media (max-width: 670px) { .badge { font-size: 12px; font-size: 0.66667rem; line-height: 14px; line-height: 0.77778rem; } } @media (max-width: 480px) { .badge { font-size: 12px; font-size: 0.66667rem; line-height: 14px; line-height: 0.77778rem; } } .badge:empty { -webkit-transform: scale(0); transform: scale(0); } .cart-item { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: greyscale; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-flow: row nowrap; flex-flow: row nowrap; padding-bottom: 20px; border-bottom: 1px solid #f0f0f0; margin-bottom: 20px; } .cart-item__image { -webkit-box-flex: 0; -ms-flex: 0 0 auto; flex: 0 0 auto; width: 115px; } @media (max-width: 1023px) { .cart-item__image { width: 80px; } } .cart-item__content { width: 100%; } .cart-item__product-title { font-size: 16px; font-size: 0.88889rem; line-height: 23px; line-height: 1.27778rem; letter-spacing: 0.3px; font-weight: 600; color: #253858; } @media (max-width: 1260px) { .cart-item__product-title { font-size: 16px; font-size: 0.88889rem; line-height: 23px; line-height: 1.27778rem; letter-spacing: 0.3px; } } @media (max-width: 1023px) { .cart-item__product-title { font-size: 14px; font-size: 0.77778rem; line-height: 18px; line-height: 1rem; letter-spacing: 0.3px; } } @media (max-width: 670px) { .cart-item__product-title { font-size: 14px; font-size: 0.77778rem; line-height: 18px; line-height: 1rem; letter-spacing: 0.3px; } } @media (max-width: 480px) { .cart-item__product-title { font-size: 14px; font-size: 0.77778rem; line-height: 18px; line-height: 1rem; letter-spacing: 0.3px; } } .cart-item-info-label { font-family: "Muli", "Arial", sans-serif; font-size: 13px; font-size: 0.72222rem; line-height: 18px; line-height: 1rem; font-weight: 600; } @media (max-width: 1260px) { .cart-item-info-label { font-size: 13px; font-size: 0.72222rem; line-height: 16px; line-height: 0.88889rem; } } @media (max-width: 1023px) { .cart-item-info-label { font-size: 12px; font-size: 0.66667rem; line-height: 14px; line-height: 0.77778rem; } } @media (max-width: 670px) { .cart-item-info-label { font-size: 12px; font-size: 0.66667rem; line-height: 14px; line-height: 0.77778rem; } } @media (max-width: 480px) { .cart-item-info-label { font-size: 12px; font-size: 0.66667rem; line-height: 14px; line-height: 0.77778rem; } } .cart-item__amounts-container { font-family: "Muli", "Arial", sans-serif; font-size: 13px; font-size: 0.72222rem; line-height: 18px; line-height: 1rem; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-flow: row nowrap; flex-flow: row nowrap; } @media (max-width: 1260px) { .cart-item__amounts-container { font-size: 13px; font-size: 0.72222rem; line-height: 16px; line-height: 0.88889rem; } } @media (max-width: 1023px) { .cart-item__amounts-container { font-size: 12px; font-size: 0.66667rem; line-height: 14px; line-height: 0.77778rem; } } @media (max-width: 670px) { .cart-item__amounts-container { font-size: 12px; font-size: 0.66667rem; line-height: 14px; line-height: 0.77778rem; } } @media (max-width: 480px) { .cart-item__amounts-container { font-size: 12px; font-size: 0.66667rem; line-height: 14px; line-height: 0.77778rem; } } .cart-item__amounts { margin-left: 10px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-flow: row nowrap; flex-flow: row nowrap; } .cart-item__amount { text-align: center; } .cart-item__amount + .cart-item__amount:before { content: ''; display: inline-block; -webkit-box-flex: 0; -ms-flex: 0 0 auto; flex: 0 0 auto; width: 1px; height: 10px; background: #cdcdcd; -webkit-transform: rotate(24deg); transform: rotate(24deg); margin: 0 5px; } .cart-item__amount-input { width: 40px; text-align: center; padding: 5px 10px; border-radius: 3px; -webkit-box-shadow: none; box-shadow: none; border: 1px solid #cdcdcd; } .cart-item__amount-input[readonly] { border: none; } .cart-item__comment[data-comment=""] .cart-item-comment { display: block !important; } .cart-item__comment[data-comment=""] .cart-item-comment-preview { display: none !important; } .cart-item-comment { padding: 5px 10px; border-radius: 3px; -webkit-box-shadow: none; box-shadow: none; border: 1px solid #cdcdcd; resize: none; font-size: 13px; font-size: 0.72222rem; line-height: 18px; line-height: 1rem; width: 100%; } @media (max-width: 1260px) { .cart-item-comment { font-size: 13px; font-size: 0.72222rem; line-height: 16px; line-height: 0.88889rem; } } @media (max-width: 1023px) { .cart-item-comment { font-size: 12px; font-size: 0.66667rem; line-height: 14px; line-height: 0.77778rem; } } @media (max-width: 670px) { .cart-item-comment { font-size: 12px; font-size: 0.66667rem; line-height: 14px; line-height: 0.77778rem; } } @media (max-width: 480px) { .cart-item-comment { font-size: 12px; font-size: 0.66667rem; line-height: 14px; line-height: 0.77778rem; } } .cart-item-comment[readonly] { display: none; border: none; padding-left: 0; } .cart-item-comment[readonly] + .cart-item-comment-preview { display: block; } .cart-item-comment + .cart-item-comment-preview { display: none; } .cart-item-comment-preview { margin-top: 5px; font-size: 13px; font-size: 0.72222rem; line-height: 18px; line-height: 1rem; } @media (max-width: 1260px) { .cart-item-comment-preview { font-size: 13px; font-size: 0.72222rem; line-height: 16px; line-height: 0.88889rem; } } @media (max-width: 1023px) { .cart-item-comment-preview { font-size: 12px; font-size: 0.66667rem; line-height: 14px; line-height: 0.77778rem; } } @media (max-width: 670px) { .cart-item-comment-preview { font-size: 12px; font-size: 0.66667rem; line-height: 14px; line-height: 0.77778rem; } } @media (max-width: 480px) { .cart-item-comment-preview { font-size: 12px; font-size: 0.66667rem; line-height: 14px; line-height: 0.77778rem; } } .cart-item__action-col { -webkit-box-flex: 0; -ms-flex: 0 0 auto; flex: 0 0 auto; width: 20px; } .cart-item__action { color: #cdcdcd; width: 20px; height: 20px; margin-bottom: 20px; cursor: pointer; } .cart-item__action:hover { color: #77d0ec; } .cart-item__delete:hover { color: #db3232; } .cart-item__edit { padding: 2px; } .cart-item__edit .icon-check { display: none; } .action-bar-chatbot { padding-bottom: 0; } .chatbot-section { position: relative; z-index: 2; } .chatbot-container { position: relative; } .chatbot { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-flow: column nowrap; flex-flow: column nowrap; position: relative; width: 100%; max-height: 400px; } @media (max-width: 670px) { .chatbot { max-height: 382px; } } .chatbot > * { z-index: 1; } .header-chatbot--active { overflow: hidden; } .chatbot__header { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-flow: row nowrap; flex-flow: row nowrap; background: #253858; padding-bottom: 20px; border-bottom: 1px solid #4a628d; z-index: 2; } @media (max-width: 670px) { .chatbot__header { padding-bottom: 15px; } } .chatbot__header:after { content: ''; display: block; position: absolute; left: 0; top: calc(100% + 1px); width: 100%; height: 30px; background: -webkit-gradient(linear, left top, left bottom, from(rgba(37, 56, 88, 0.8)), to(rgba(37, 56, 88, 0))); background: linear-gradient(to bottom, rgba(37, 56, 88, 0.8) 0%, rgba(37, 56, 88, 0) 100%); z-index: 2; } .chatbot-header__title { -webkit-box-flex: 0; -ms-flex: 0 0 auto; flex: 0 0 auto; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-flow: row nowrap; flex-flow: row nowrap; color: #6f8ec3; } .chatbot-header__title .icon { -webkit-box-flex: 0; -ms-flex: 0 0 auto; flex: 0 0 auto; display: block; width: 20px; height: 18px; margin-right: 10px; } .chatbot-header__actions { margin-left: -15px; color: #6f8ec3; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-flow: row nowrap; flex-flow: row nowrap; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; width: 100%; } .chatbot-header__action { -webkit-box-flex: 0; -ms-flex: 0 0 auto; flex: 0 0 auto; display: block; margin-left: 15px; width: 15px; height: 15px; } .chatbot-header__action:hover { color: #fff !important; } .chatbot__window { position: relative; -webkit-box-flex: 2; -ms-flex-positive: 2; flex-grow: 2; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-flow: column nowrap; flex-flow: column nowrap; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; width: 100%; padding: 10px 0 20px 0; overflow-y: auto; -webkit-overflow-scrolling: touch; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); will-change: margin; -webkit-transition: 0.23s cubic-bezier(0.55, 0.085, 0.68, 0.53) margin; transition: 0.23s cubic-bezier(0.55, 0.085, 0.68, 0.53) margin; -ms-overflow-style: none; /* IE 11 */ scrollbar-width: none; /* Firefox 64 */ } .chatbot__window::-webkit-scrollbar { width: 0px; /* Remove scrollbar space */ background: transparent; /* Optional: just make scrollbar invisible */ } .chatbot--label-active .chatbot__window { -webkit-transition: 0.12s cubic-bezier(0.55, 0.085, 0.68, 0.53) margin; transition: 0.12s cubic-bezier(0.55, 0.085, 0.68, 0.53) margin; margin-bottom: 30px; } @media (max-width: 1260px) { .chatbot__window { font-size: 16px; font-size: 0.88889rem; } } @media (max-width: 670px) { .chatbot__window { overflow-x: hidden; } } .chatbot__window:before { content: ''; width: 100%; height: 50px; display: block; position: fixed; top: 0; left: 0; background: -webkit-gradient(linear, left top, left bottom, color-stop(10%, #253858), to(rgba(37, 56, 88, 0))); background: linear-gradient(to bottom, #253858 10%, rgba(37, 56, 88, 0) 100%); z-index: 1; pointer-events: none; display: none; } .chatbot--white .chatbot__window:before { height: 100px; background: -webkit-gradient(linear, left top, left bottom, color-stop(10%, #fff), to(rgba(255, 255, 255, 0))); background: linear-gradient(to bottom, #fff 10%, rgba(255, 255, 255, 0) 100%); } @media (max-width: 670px) { .chatbot--white .chatbot__window:before { display: none; } } .chat-window__empty { width: 100%; -webkit-box-flex: 2; -ms-flex-positive: 2; flex-grow: 2; -ms-flex-negative: 1; flex-shrink: 1; } .chatbot__actionbar { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-flow: row nowrap; flex-flow: row nowrap; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-flex: 0; -ms-flex: 0 0 auto; flex: 0 0 auto; pointer-events: none; } @media (max-width: 670px) { .chatbot__actionbar { padding: 0; } .chatbot__actionbar .input-container--textbox:after, .chatbot__actionbar .input-container--textbox:before { display: none; } } .actionbar--header { padding-right: 0; padding-top: 0; } @media (min-width: 768px) { .actionbar--header { display: block !important; } } @media (max-width: 670px) { .actionbar--header { display: none; position: fixed; bottom: 0; left: 0; width: 100%; background: #fff; z-index: 999; } } @media (max-width: 670px) { .actionbar--header .input-container--textbox { border-left: none; border-right: none; border-bottom: none; } } .actionbar--header .input-container__icon:hover .input-icon__play svg * { fill: #fff; } .actionbar--header .input-container__icon:hover .input-icon__glass svg * { stroke: #fff; } .actionbar__label { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: greyscale; position: absolute; top: -35px; left: 0; font-weight: 700; font-size: 16px; font-size: 0.88889rem; line-height: 23px; line-height: 1.27778rem; letter-spacing: 0.3px; color: #fff; -webkit-transform: translateY(5px); transform: translateY(5px); opacity: 0; will-change: transform, opacity; -webkit-transition: 0.12s cubic-bezier(0.55, 0.085, 0.68, 0.53) all; transition: 0.12s cubic-bezier(0.55, 0.085, 0.68, 0.53) all; } @media (max-width: 1260px) { .actionbar__label { font-size: 16px; font-size: 0.88889rem; line-height: 23px; line-height: 1.27778rem; letter-spacing: 0.3px; } } @media (max-width: 1023px) { .actionbar__label { font-size: 14px; font-size: 0.77778rem; line-height: 18px; line-height: 1rem; letter-spacing: 0.3px; } } @media (max-width: 670px) { .actionbar__label { font-size: 14px; font-size: 0.77778rem; line-height: 18px; line-height: 1rem; letter-spacing: 0.3px; } } @media (max-width: 480px) { .actionbar__label { font-size: 14px; font-size: 0.77778rem; line-height: 18px; line-height: 1rem; letter-spacing: 0.3px; } } .chatbot--label-active .actionbar__label { -webkit-transform: translateY(0); transform: translateY(0); opacity: 1; -webkit-transition: 0.23s cubic-bezier(0.25, 0.46, 0.45, 0.94) all; transition: 0.23s cubic-bezier(0.25, 0.46, 0.45, 0.94) all; } .chatbot__userinput { position: relative; width: 100%; border-top: 1px solid #4a628d; } .userinput__icon { display: block; position: absolute; top: 50%; right: 0; width: 30px; height: 30px; padding: 6px; -webkit-transform: translateY(-25%); transform: translateY(-25%); color: #6f8ec3; opacity: .4; } @media (max-width: 670px) { .userinput__icon { padding: 8px; } } .userinput__icon:hover { color: #fff; } .userinput__icon .input-icon__icon { display: none; } .userinput__icon .input-icon__icon.input-icon--active { display: block; } .userinput__textbox textarea { height: 40px; width: 100%; resize: none; will-change: height; -webkit-transition: 0.12s cubic-bezier(0.455, 0.03, 0.515, 0.955) height; transition: 0.12s cubic-bezier(0.455, 0.03, 0.515, 0.955) height; } .userinput__textbox textarea:focus { height: auto; } .userinput__textbox input { background: transparent; border-radius: 0; border: none !important; padding: 22px 40px 5px 0; font-size: 13px; font-size: 0.72222rem; line-height: 18px; line-height: 1rem; width: 100%; } @media (max-width: 1260px) { .userinput__textbox input { font-size: 13px; font-size: 0.72222rem; line-height: 16px; line-height: 0.88889rem; } } @media (max-width: 1023px) { .userinput__textbox input { font-size: 12px; font-size: 0.66667rem; line-height: 14px; line-height: 0.77778rem; } } @media (max-width: 670px) { .userinput__textbox input { font-size: 12px; font-size: 0.66667rem; line-height: 14px; line-height: 0.77778rem; } } @media (max-width: 480px) { .userinput__textbox input { font-size: 12px; font-size: 0.66667rem; line-height: 14px; line-height: 0.77778rem; } } .userinput__textbox input::-webkit-input-placeholder { /* Chrome/Opera/Safari */ color: #4a628d; } .userinput__textbox input::-moz-placeholder { /* Firefox 19+ */ color: #4a628d; } .userinput__textbox input:-ms-input-placeholder { /* IE 10+ */ color: #4a628d; } .userinput__textbox input:-moz-placeholder { /* Firefox 18- */ color: #4a628d; } @media (max-width: 670px) { .userinput__textbox input { padding-bottom: 0; padding-top: 15px; } } .chatbot__option, .message-contact__option { display: block; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: greyscale; -webkit-box-flex: 0; -ms-flex: 0 0 auto; flex: 0 0 auto; padding: 8px 16px; margin-right: 10px; margin-bottom: 10px; border: 1px solid #77d0ec; border-radius: 50px; color: #fff; cursor: pointer; white-space: nowrap; -webkit-transition: 0.2s ease box-shadow, 0.23s cubic-bezier(0.075, 0.82, 0.165, 1) -webkit-transform; transition: 0.2s ease box-shadow, 0.23s cubic-bezier(0.075, 0.82, 0.165, 1) -webkit-transform; transition: 0.23s cubic-bezier(0.075, 0.82, 0.165, 1) transform, 0.2s ease box-shadow; transition: 0.23s cubic-bezier(0.075, 0.82, 0.165, 1) transform, 0.2s ease box-shadow, 0.23s cubic-bezier(0.075, 0.82, 0.165, 1) -webkit-transform; -webkit-animation: messageIn .33s ease-out forwards; animation: messageIn .33s ease-out forwards; opacity: 0; -webkit-transform: translateY(15px); transform: translateY(15px); font-size: 13px; font-size: 0.72222rem; line-height: 18px; line-height: 1rem; } @media (max-width: 1260px) { .chatbot__option, .message-contact__option { font-size: 13px; font-size: 0.72222rem; line-height: 16px; line-height: 0.88889rem; } } @media (max-width: 1023px) { .chatbot__option, .message-contact__option { font-size: 12px; font-size: 0.66667rem; line-height: 14px; line-height: 0.77778rem; } } @media (max-width: 670px) { .chatbot__option, .message-contact__option { font-size: 12px; font-size: 0.66667rem; line-height: 14px; line-height: 0.77778rem; } } @media (max-width: 480px) { .chatbot__option, .message-contact__option { font-size: 12px; font-size: 0.66667rem; line-height: 14px; line-height: 0.77778rem; } } @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) { .chatbot__option, .message-contact__option { -webkit-transition: none; transition: none; } } .chatbot--white .chatbot__option, .chatbot--white .message-contact__option { border-color: #77d0ec; color: #253858; } .chatbot__option:nth-child(0), .message-contact__option:nth-child(0) { -webkit-animation-delay: 0.3s; animation-delay: 0.3s; } .chatbot__option:nth-child(1), .message-contact__option:nth-child(1) { -webkit-animation-delay: 0.4s; animation-delay: 0.4s; } .chatbot__option:nth-child(2), .message-contact__option:nth-child(2) { -webkit-animation-delay: 0.5s; animation-delay: 0.5s; } .chatbot__option:nth-child(3), .message-contact__option:nth-child(3) { -webkit-animation-delay: 0.6s; animation-delay: 0.6s; } .chatbot__option:nth-child(4), .message-contact__option:nth-child(4) { -webkit-animation-delay: 0.7s; animation-delay: 0.7s; } .chatbot__option:nth-child(5), .message-contact__option:nth-child(5) { -webkit-animation-delay: 0.8s; animation-delay: 0.8s; } .chatbot__option:nth-child(6), .message-contact__option:nth-child(6) { -webkit-animation-delay: 0.9s; animation-delay: 0.9s; } .chatbot__option:nth-child(7), .message-contact__option:nth-child(7) { -webkit-animation-delay: 0.10s; animation-delay: 0.10s; } .chatbot__option:nth-child(8), .message-contact__option:nth-child(8) { -webkit-animation-delay: 0.11s; animation-delay: 0.11s; } .chatbot__option:nth-child(9), .message-contact__option:nth-child(9) { -webkit-animation-delay: 0.12s; animation-delay: 0.12s; } .chatbot__option:nth-child(10), .message-contact__option:nth-child(10) { -webkit-animation-delay: 0.13s; animation-delay: 0.13s; } .chatbot__option:last-child, .message-contact__option:last-child { margin-right: 0; } .chatbot__option:hover, .message-contact__option:hover { color: #fff; background: rgba(255, 255, 255, 0.2); -webkit-box-shadow: 0 3px 9px 0 rgba(0, 0, 0, 0.13), 0 5px 13px 0 rgba(0, 0, 0, 0.03); box-shadow: 0 3px 9px 0 rgba(0, 0, 0, 0.13), 0 5px 13px 0 rgba(0, 0, 0, 0.03); } @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) { .chatbot__option:hover, .message-contact__option:hover { -webkit-transform: translateY(0); transform: translateY(0); } } .chatbot__option:focus, .message-contact__option:focus { outline: 0; background: rgba(255, 255, 255, 0.2); } .chatbot__option:active, .message-contact__option:active { background: rgba(255, 255, 255, 0.1); } .chatbot--white .chatbot__option:hover, .chatbot--white .message-contact__option:hover { color: #000; background: rgba(119, 208, 236, 0.2); } .chatbot__user-options { margin-left: 30px; width: 83.33333%; margin-top: 15px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-flow: row wrap; flex-flow: row wrap; -webkit-box-flex: 0; -ms-flex: 0 0 auto; flex: 0 0 auto; } @media (max-width: 1260px) { .chatbot__user-options { margin-left: 20px; } } @media (max-width: 1023px) { .chatbot__user-options { width: 83.33333%; } } .jsCh_showMore { -webkit-box-ordinal-group: 1000000; -ms-flex-order: 999999; order: 999999; } .option--negative { color: #4a628d; border: 1px solid #4a628d; } .chatbot--white .option--negative { color: #f0f0f0; border: 1px solid #f0f0f0; } .option--loading { color: transparent; overflow: hidden; } .option--loading:hover { color: transparent; } .option--loading:before { content: ''; display: block; width: 100%; height: 100%; position: absolute; top: 0; left: 0; background: rgba(255, 255, 255, 0.2); z-index: 0; } .option--loading:after { content: ''; display: block; width: 25px; height: 25px; background: url("../img/chatbot/bot-icon.png") no-repeat center center; background-size: contain; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); z-index: 1; -webkit-animation: 2s cubic-bezier(0.645, 0.045, 0.355, 1) breathe infinite; animation: 2s cubic-bezier(0.645, 0.045, 0.355, 1) breathe infinite; } @-webkit-keyframes breathe { 0% { opacity: 1; -webkit-transform: translate(-50%, -50%) scale(1); transform: translate(-50%, -50%) scale(1); } 30% { opacity: .5; -webkit-transform: translate(-50%, -50%) scale(0.9); transform: translate(-50%, -50%) scale(0.9); } 100% { opacity: 1; -webkit-transform: translate(-50%, -50%) scale(1); transform: translate(-50%, -50%) scale(1); } } @keyframes breathe { 0% { opacity: 1; -webkit-transform: translate(-50%, -50%) scale(1); transform: translate(-50%, -50%) scale(1); } 30% { opacity: .5; -webkit-transform: translate(-50%, -50%) scale(0.9); transform: translate(-50%, -50%) scale(0.9); } 100% { opacity: 1; -webkit-transform: translate(-50%, -50%) scale(1); transform: translate(-50%, -50%) scale(1); } } .chatbot__option.hidden, .hidden.message-contact__option { display: none; -webkit-animation: none; animation: none; } .chatbot__message { z-index: 0; } .chat-message, .chat-message--job, .chat-message--location, .chat-message--contact, .chat-message--link, .chat-message--article { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: greyscale; position: relative; display: inline-block; font-family: "Muli", "Arial", sans-serif; font-size: 13px; font-size: 0.72222rem; line-height: 18px; line-height: 1rem; -webkit-box-shadow: 0 5px 14px 0 rgba(0, 0, 0, 0.13); box-shadow: 0 5px 14px 0 rgba(0, 0, 0, 0.13); border-radius: 15px 15px 15px 15px; margin-top: 15px; -webkit-box-flex: 0; -ms-flex: 0 0 auto; flex: 0 0 auto; max-width: 70%; -webkit-transform: translateY(30px); transform: translateY(30px); opacity: 0; -webkit-transition: .23s ease opacity, .2s ease-out transform; transition: .23s ease opacity, .2s ease-out transform; /** * Botmessages */ /** * User styles messaged */ } @media (max-width: 1260px) { .chat-message, .chat-message--job, .chat-message--location, .chat-message--contact, .chat-message--link, .chat-message--article { font-size: 13px; font-size: 0.72222rem; line-height: 16px; line-height: 0.88889rem; } } @media (max-width: 1023px) { .chat-message, .chat-message--job, .chat-message--location, .chat-message--contact, .chat-message--link, .chat-message--article { font-size: 12px; font-size: 0.66667rem; line-height: 14px; line-height: 0.77778rem; } } @media (max-width: 670px) { .chat-message, .chat-message--job, .chat-message--location, .chat-message--contact, .chat-message--link, .chat-message--article { font-size: 12px; font-size: 0.66667rem; line-height: 14px; line-height: 0.77778rem; } } @media (max-width: 480px) { .chat-message, .chat-message--job, .chat-message--location, .chat-message--contact, .chat-message--link, .chat-message--article { font-size: 12px; font-size: 0.66667rem; line-height: 14px; line-height: 0.77778rem; } } @media (max-width: 1260px) { .chat-message, .chat-message--job, .chat-message--location, .chat-message--contact, .chat-message--link, .chat-message--article { max-width: 80%; } } @media (max-width: 670px) { .chat-message, .chat-message--job, .chat-message--location, .chat-message--contact, .chat-message--link, .chat-message--article { max-width: 90%; } } .chatbot--white .chat-message, .chatbot--white .chat-message--job, .chatbot--white .chat-message--location, .chatbot--white .chat-message--contact, .chatbot--white .chat-message--link, .chatbot--white .chat-message--article { -webkit-box-shadow: none; box-shadow: none; } .chat-message .text, .chat-message--job .text, .chat-message--location .text, .chat-message--contact .text, .chat-message--link .text, .chat-message--article .text { display: block; padding: 7px 15px; } .chat-message--in { -webkit-transform: translateY(0); transform: translateY(0); opacity: 1; } .chat-message--in .message-jobs__job { opacity: 1 !important; -webkit-transform: translateY(0) !important; transform: translateY(0) !important; } .chat-message--left, .chat-message--bot, .chat-message--job, .chat-message--location, .chat-message--link, .chat-message--article, .chat-message--contact { margin-left: 30px; color: #000; background: #ddf3fb; border-top-left-radius: 3px; border-bottom-left-radius: 3px; } .chat-message--left.msg--last, .msg--last.chat-message--bot, .msg--last.chat-message--job, .msg--last.chat-message--location, .msg--last.chat-message--link, .msg--last.chat-message--article, .msg--last.chat-message--contact { border-bottom-left-radius: 15px; } @media (max-width: 1260px) { .chat-message--left, .chat-message--bot, .chat-message--job, .chat-message--location, .chat-message--link, .chat-message--article, .chat-message--contact { margin-left: 20px; } } @media (max-width: 1023px) { .chat-message--left, .chat-message--bot, .chat-message--job, .chat-message--location, .chat-message--link, .chat-message--article, .chat-message--contact { max-width: 85%; } } .chat-message--bot:before, .chat-message--job:before, .chat-message--location:before, .chat-message--link:before, .chat-message--article:before { position: absolute; top: 0; left: -30px; display: inline-block; content: ''; width: 16px; height: 16px; background: url("../img/chatbot/bot-icon.png") no-repeat center center; background-size: contain; } @media (max-width: 670px) { .chat-message--bot:before, .chat-message--job:before, .chat-message--location:before, .chat-message--link:before, .chat-message--article:before { left: -20px; } } .chatbot--white .chat-message--bot:before, .chatbot--white .chat-message--job:before, .chatbot--white .chat-message--location:before, .chatbot--white .chat-message--link:before, .chatbot--white .chat-message--article:before { background: url("../img/chatbot/bot-icon.png") no-repeat center center; background-size: contain; } .chat-message--bot + .chat-message--bot, .chat-message--job + .chat-message--bot, .chat-message--location + .chat-message--bot, .chat-message--link + .chat-message--bot, .chat-message--article + .chat-message--bot, .chat-message--bot + .chat-message--job, .chat-message--job + .chat-message--job, .chat-message--location + .chat-message--job, .chat-message--link + .chat-message--job, .chat-message--article + .chat-message--job, .chat-message--bot + .chat-message--location, .chat-message--job + .chat-message--location, .chat-message--location + .chat-message--location, .chat-message--link + .chat-message--location, .chat-message--article + .chat-message--location, .chat-message--bot + .chat-message--link, .chat-message--job + .chat-message--link, .chat-message--location + .chat-message--link, .chat-message--link + .chat-message--link, .chat-message--article + .chat-message--link, .chat-message--bot + .chat-message--article, .chat-message--job + .chat-message--article, .chat-message--location + .chat-message--article, .chat-message--link + .chat-message--article, .chat-message--article + .chat-message--article { margin-top: 5px; border-top-left-radius: 3px; } .chat-message--bot + .chat-message--bot:before, .chat-message--job + .chat-message--bot:before, .chat-message--location + .chat-message--bot:before, .chat-message--link + .chat-message--bot:before, .chat-message--article + .chat-message--bot:before, .chat-message--bot + .chat-message--job:before, .chat-message--job + .chat-message--job:before, .chat-message--location + .chat-message--job:before, .chat-message--link + .chat-message--job:before, .chat-message--article + .chat-message--job:before, .chat-message--bot + .chat-message--location:before, .chat-message--job + .chat-message--location:before, .chat-message--location + .chat-message--location:before, .chat-message--link + .chat-message--location:before, .chat-message--article + .chat-message--location:before, .chat-message--bot + .chat-message--link:before, .chat-message--job + .chat-message--link:before, .chat-message--location + .chat-message--link:before, .chat-message--link + .chat-message--link:before, .chat-message--article + .chat-message--link:before, .chat-message--bot + .chat-message--article:before, .chat-message--job + .chat-message--article:before, .chat-message--location + .chat-message--article:before, .chat-message--link + .chat-message--article:before, .chat-message--article + .chat-message--article:before { display: none; } .chat-message--user { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: greyscale; margin-left: auto; color: #000; background: #cce4c8; border-radius: 15px 3px 3px 15px; } .chat-message--user.msg--last { border-bottom-right-radius: 15px; } .chat-message--user + .chat-message--user { margin-top: 0.27778rem; border-top-right-radius: 3px; } @-webkit-keyframes messageIn { from { opacity: 0; -webkit-transform: translateY(15px); transform: translateY(15px); } to { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } } @keyframes messageIn { from { opacity: 0; -webkit-transform: translateY(15px); transform: translateY(15px); } to { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } } .chat-message--job .message-link__title { float: none; width: 100%; } .chat-message--job .message-link__title:hover { color: #253858; } .chat-message--job .message-link__link { margin-left: 10px; margin-bottom: 0; } @media (max-width: 670px) { .chat-message--job .message-link__link { display: block; margin-left: 0; } } .chat-message--job .message-link__desc { margin-bottom: 0; } .chatbot__overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(37, 56, 88, 0.97); color: #fff; font-size: 13px; font-size: 0.72222rem; line-height: 18px; line-height: 1rem; text-align: center; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-flow: column nowrap; flex-flow: column nowrap; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; padding: 60px 20px 20px 20px; z-index: 2; will-change: opacity, transform; opacity: 0; -webkit-transform: translateY(10px); transform: translateY(10px); -webkit-transition: 0.23s cubic-bezier(0.075, 0.82, 0.165, 1) all; transition: 0.23s cubic-bezier(0.075, 0.82, 0.165, 1) all; pointer-events: none; } @media (max-width: 1260px) { .chatbot__overlay { font-size: 13px; font-size: 0.72222rem; line-height: 16px; line-height: 0.88889rem; } } @media (max-width: 1023px) { .chatbot__overlay { font-size: 12px; font-size: 0.66667rem; line-height: 14px; line-height: 0.77778rem; } } @media (max-width: 670px) { .chatbot__overlay { font-size: 12px; font-size: 0.66667rem; line-height: 14px; line-height: 0.77778rem; } } @media (max-width: 480px) { .chatbot__overlay { font-size: 12px; font-size: 0.66667rem; line-height: 14px; line-height: 0.77778rem; } } .chatbot-overlay--open .chatbot__overlay { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); pointer-events: auto; } @media (max-width: 670px) { .chatbot__overlay { padding: 15px; } } .chatbot-overlay__title { font-weight: 600; color: #fff; } .chatbot-overlay__desc { color: #6f8ec3; } .chatbot-history .chatbot__user-options { display: none !important; } .chat-message--location { max-width: none; width: 70%; } .chat-message--location .text { padding-left: 2px; padding-top: 2px; padding-bottom: 2px; } .message-location { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-flow: row nowrap; flex-flow: row nowrap; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .location__map { -webkit-box-flex: 0; -ms-flex: 0 0 auto; flex: 0 0 auto; } .location__map img { display: block; } .location__content { padding: .33rem 0 .33rem 1rem; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-flow: column nowrap; flex-flow: column nowrap; } .location__title { font-weight: 600; color: #77d0ec; } .location__address { color: #757373; font-size: 17px; font-size: 0.94444rem; line-height: 1.3; } .location__url { font-size: 17px; font-size: 0.94444rem; } .chat-message--contact .text { padding-top: 2px; margin-top: .75rem; } .message-contact { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-flow: column nowrap; flex-flow: column nowrap; -webkit-box-align: center; -ms-flex-align: center; align-items: center; text-align: center; min-width: 330px; max-width: 100%; } @media (max-width: 1023px) { .message-contact { min-width: initial; max-width: initial; } } .message-contact__image { margin-bottom: 10px; border-radius: 200px; width: 87px; height: 87px; } @media (max-width: 1023px) { .message-contact__image { width: 63px; height: 63px; } } .chatbot--white .message-contact__image { border-color: #D9DADB; } .message-contact__image img { display: block; } .message-contact__content { margin-bottom: 6px; } .message-contact__title { color: #77d0ec; font-size: 18px; font-size: 1rem; line-height: 21px; line-height: 1.16667rem; letter-spacing: 0.7px; font-weight: 700; margin-bottom: 5px; } @media (max-width: 1260px) { .message-contact__title { font-size: 18px; font-size: 1rem; line-height: 21px; line-height: 1.16667rem; letter-spacing: 0.7px; } } @media (max-width: 1023px) { .message-contact__title { font-size: 16px; font-size: 0.88889rem; line-height: 21px; line-height: 1.16667rem; letter-spacing: 0.7px; } } @media (max-width: 670px) { .message-contact__title { font-size: 16px; font-size: 0.88889rem; line-height: 21px; line-height: 1.16667rem; letter-spacing: 0.7px; } } @media (max-width: 480px) { .message-contact__title { font-size: 16px; font-size: 0.88889rem; line-height: 21px; line-height: 1.16667rem; letter-spacing: 0.7px; } } .message-contact__subtitle { color: #000; font-size: 16px; font-size: 0.88889rem; line-height: 23px; line-height: 1.27778rem; letter-spacing: 0.3px; } @media (max-width: 1023px) { .message-contact__subtitle { font-size: 13px; font-size: 0.72222rem; line-height: 18px; line-height: 1rem; } } .message-contact__address { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: greyscale; font-size: 16px; font-size: 0.88889rem; line-height: 23px; line-height: 1.27778rem; letter-spacing: 0.3px; line-height: 22px; color: #cdcdcd; } @media (max-width: 1023px) { .message-contact__address { font-size: 13px; font-size: 0.72222rem; line-height: 18px; line-height: 1rem; line-height: 20px; } } .message-contact__cta { display: block; color: #77d0ec; font-weight: 700; line-height: 1.2; } .message-contact__cta + .message-contact__cta { margin-top: 4px; } .message-contact__options { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-flow: row wrap; flex-flow: row wrap; margin-top: 20px; } .message-contact__option { border-color: #77d0ec; color: #fff; line-height: 1; } @media (max-width: 670px) { .message-contact__option { line-height: 1.8; } } .message-contact__option:hover { color: #000; } .chatbot--white .chat-message--link { max-width: 70%; } .message-link__image { width: 110px; height: 110px; float: right; border-top-right-radius: 12px; overflow: hidden; margin-top: -4px; margin-right: -12px; } @media (max-width: 1023px) { .message-link__image { width: 81px; height: 81px; } } .message-link__image img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; display: block; } .message-link__title { display: inline-block; color: #77d0ec; font-size: 18px; font-size: 1rem; line-height: 21px; line-height: 1.16667rem; letter-spacing: 0.7px; font-weight: 700; margin-bottom: 7px; float: left; width: calc(100% - 110px); } @media (max-width: 670px) { .message-link__title { font-size: 15px; font-size: 0.83333rem; line-height: 20px; line-height: 1.11111rem; } } .message-link__desc { color: #757373; font-size: 15px; font-size: 0.83333rem; margin-bottom: 6px; } @media (max-width: 670px) { .message-link__desc { font-size: 13px; font-size: 0.72222rem; line-height: 19px; line-height: 1.05556rem; } } .message-link__url { display: inline-block; font-size: 13px; font-size: 0.72222rem; line-height: 18px; line-height: 1rem; } @media (max-width: 1260px) { .message-link__url { font-size: 13px; font-size: 0.72222rem; line-height: 16px; line-height: 0.88889rem; } } @media (max-width: 1023px) { .message-link__url { font-size: 12px; font-size: 0.66667rem; line-height: 14px; line-height: 0.77778rem; } } @media (max-width: 670px) { .message-link__url { font-size: 12px; font-size: 0.66667rem; line-height: 14px; line-height: 0.77778rem; } } @media (max-width: 480px) { .message-link__url { font-size: 12px; font-size: 0.66667rem; line-height: 14px; line-height: 0.77778rem; } } .chat-message--article .text { padding-left: 2px; padding-top: 2px; padding-bottom: 2px; } .message-article { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-flow: row nowrap; flex-flow: row nowrap; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .message-article__image { -webkit-box-flex: 0; -ms-flex: 0 0 auto; flex: 0 0 auto; margin-right: 1rem; } .message-article__image img { display: block; } .message-article__content { padding: .33rem 0; } .message-article__date { font-size: 15px; font-size: 0.83333rem; color: #cdcdcd; } .message-article__title { color: #77d0ec; font-size: 20px; font-size: 1.11111rem; font-weight: 300; } .message-article__desc { font-size: 17px; font-size: 0.94444rem; color: #757373; } .msg--sleep { position: relative; padding: 7px 0 6px 0; background: transparent; border-radius: 30px !important; border: 1px solid rgba(111, 142, 195, 0.5); -webkit-box-shadow: none; box-shadow: none; margin-top: 10px !important; } @media (max-width: 670px) { .msg--sleep { padding: 5px 0 3px 0; } } .msg--sleep:before { display: none; } .sleep-anim { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-flow: row nowrap; flex-flow: row nowrap; } .sleep-anim span { display: block; width: 6px; height: 6px; background: #6f8ec3; border-radius: 20px; margin: 0 2px; -webkit-animation: 1.8s sleepAnimGrowLine infinite; animation: 1.8s sleepAnimGrowLine infinite; -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); opacity: .6; -webkit-transform: translateY(0); transform: translateY(0); } .sleep-anim span:nth-child(1) { -webkit-animation-delay: -1.5s; animation-delay: -1.5s; } .sleep-anim span:nth-child(2) { -webkit-animation-delay: -3s; animation-delay: -3s; } .sleep-anim span:nth-child(3) { -webkit-animation-delay: -4.5s; animation-delay: -4.5s; } .sleep-anim span:nth-child(4) { -webkit-animation-delay: -6s; animation-delay: -6s; } .sleep-anim span:nth-child(5) { -webkit-animation-delay: -7.5s; animation-delay: -7.5s; } .sleep-anim span:nth-child(6) { -webkit-animation-delay: -9s; animation-delay: -9s; } .sleep-anim span:nth-child(7) { -webkit-animation-delay: -10.5s; animation-delay: -10.5s; } .sleep-anim span:nth-child(8) { -webkit-animation-delay: -12s; animation-delay: -12s; } .sleep-anim span:nth-child(9) { -webkit-animation-delay: -13.5s; animation-delay: -13.5s; } .sleep-anim span:nth-child(10) { -webkit-animation-delay: -15s; animation-delay: -15s; } .sleep-anim__text { color: #6f8ec3; position: absolute; left: calc(100% + 10px); top: 50%; white-space: nowrap; font-size: 13px; font-size: 0.72222rem; line-height: 18px; line-height: 1rem; -webkit-transform: translateY(-50%); transform: translateY(-50%); } @media (max-width: 1260px) { .sleep-anim__text { font-size: 13px; font-size: 0.72222rem; line-height: 16px; line-height: 0.88889rem; } } @media (max-width: 1023px) { .sleep-anim__text { font-size: 12px; font-size: 0.66667rem; line-height: 14px; line-height: 0.77778rem; } } @media (max-width: 670px) { .sleep-anim__text { font-size: 12px; font-size: 0.66667rem; line-height: 14px; line-height: 0.77778rem; } } @media (max-width: 480px) { .sleep-anim__text { font-size: 12px; font-size: 0.66667rem; line-height: 14px; line-height: 0.77778rem; } } @-webkit-keyframes sleepAnimGrowLine { from { opacity: .6; -webkit-transform: translateY(0); transform: translateY(0); } 50% { opacity: 1; -webkit-transform: translateY(-2px); transform: translateY(-2px); } 100% { opacity: .4; -webkit-transform: translateY(0); transform: translateY(0); } } @keyframes sleepAnimGrowLine { from { opacity: .6; -webkit-transform: translateY(0); transform: translateY(0); } 50% { opacity: 1; -webkit-transform: translateY(-2px); transform: translateY(-2px); } 100% { opacity: .4; -webkit-transform: translateY(0); transform: translateY(0); } } .wp-block-image { max-width: 100%; } .wp-block-image img { display: block; width: 100%; } @media (max-width: 1023px) { .wp-block-image .aligncenter { margin: 0; } .wp-block-image .aligncenter img { margin: 0 auto; } } @-webkit-keyframes shine-lines { 0% { background-position: 140%; } 100% { background-position: 0%; } } @keyframes shine-lines { 0% { background-position: 140%; } 100% { background-position: 0%; } } .search-open .page-fade { opacity: 1; pointer-events: auto; } .search-overlay { position: absolute; top: 0; left: 0; width: 100%; padding: 40px; opacity: 0; visibility: hidden; pointer-events: none; -webkit-transform: translateY(-100px); transform: translateY(-100px); -webkit-transition: 0.33s cubic-bezier(0.075, 0.82, 0.165, 1) all; transition: 0.33s cubic-bezier(0.075, 0.82, 0.165, 1) all; background: #fff; z-index: 15; } @media (max-width: 1023px) { .search-overlay { padding: 30px; } } @media (max-width: 670px) { .search-overlay { padding: 20px 45px 20px 20px; } } @media (max-width: 1260px) { .search-overlay { height: calc(100vh - 40px); } } @media (max-width: 670px) { .search-overlay { height: 100vh; overflow: auto; -webkit-overflow-scrolling: touch; } } .search-open .search-overlay { opacity: 1; visibility: visible; -webkit-transform: translateY(0); transform: translateY(0); pointer-events: auto; } @media (max-width: 1260px) { .search-overlay__inner { height: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-flow: column nowrap; flex-flow: column nowrap; } } @media (max-width: 670px) { .search-overlay__inner { display: block; height: auto; } } .search-overlay__close { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-flow: row nowrap; flex-flow: row nowrap; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; width: 24px; height: 24px; } @media (max-width: 1023px) { .search-overlay__close { width: 20px; height: 20px; } } .search-overlay__close svg { width: 100%; } .search-overlay__close-col { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-flow: row nowrap; flex-flow: row nowrap; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; } @media (max-width: 1260px) { .search-overlay__result-list { height: 100%; overflow: auto; -webkit-overflow-scrolling: touch; padding-bottom: 40px; } } @media (max-width: 670px) { .search-overlay__result-list { padding-bottom: 0; height: auto; overflow: visible; } } .search-overlay__no-results { color: #757373; font-size: 13px; font-size: 0.72222rem; line-height: 18px; line-height: 1rem; } @media (max-width: 1260px) { .search-overlay__no-results { font-size: 13px; font-size: 0.72222rem; line-height: 16px; line-height: 0.88889rem; } } @media (max-width: 1023px) { .search-overlay__no-results { font-size: 12px; font-size: 0.66667rem; line-height: 14px; line-height: 0.77778rem; } } @media (max-width: 670px) { .search-overlay__no-results { font-size: 12px; font-size: 0.66667rem; line-height: 14px; line-height: 0.77778rem; } } @media (max-width: 480px) { .search-overlay__no-results { font-size: 12px; font-size: 0.66667rem; line-height: 14px; line-height: 0.77778rem; } } .search-overlay.is--loading .search-suggestions li a, .search-overlay.is--loading .search-product-results li a { opacity: .5; color: transparent; border-radius: 5px; background-image: linear-gradient(90deg, #f0f0f0 0px, #f7f7f7 80px, #f0f0f0 180px); background-size: 320%; -webkit-animation: shine-lines 2.6s infinite linear; animation: shine-lines 2.6s infinite linear; } .search-overlay.is--loading .search-suggestions li a *, .search-overlay.is--loading .search-product-results li a * { opacity: 0; } .search-content { height: 100%; -webkit-box-flex: 0; -ms-flex: 0 1 auto; flex: 0 1 auto; overflow: hidden; } .search-content .col { padding-right: 20px; border-right: 1px solid #f7f7f7; } @media (max-width: 1260px) { .search-content .col { height: 100%; } } @media (max-width: 1023px) { .search-content .col:nth-child(2) { border-right: none; padding-right: 0; } } .search-content .col:last-child { padding-right: 0; border-right: none; } .search-content .row { height: 100%; } .search-container { -webkit-box-flex: 0; -ms-flex: 0 0 auto; flex: 0 0 auto; } .search-form { position: relative; } .search-form__close { display: none; } @media (max-width: 670px) { .search-form__close { display: -webkit-box; display: -ms-flexbox; display: flex; position: absolute; top: 50%; right: -33px; padding: 2px; -webkit-transform: translateY(-50%); transform: translateY(-50%); } } .search-form__button { position: absolute; top: 50%; right: 10px; width: 44px; height: 44px; padding: 10px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-flow: row nowrap; flex-flow: row nowrap; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; cursor: pointer; background: transparent; -webkit-appearance: none; -webkit-transform: translateY(-50%); transform: translateY(-50%); z-index: 2; } @media (max-width: 670px) { .search-form__button { padding: 12px; right: 5px; } } .search-form__button svg { width: 100%; } .search-form__button:hover svg * { fill: #77d0ec; } .product-result { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-flow: row nowrap; flex-flow: row nowrap; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .product-result__image { width: 80px; -webkit-box-flex: 0; -ms-flex: 0 0 auto; flex: 0 0 auto; margin-right: 20px; } @media (max-width: 1023px) { .product-result__image { width: 60px; } } .product-result__content { display: block; } .product-result__title { display: block; color: #253858; } .product-result__tags { display: block; color: #757373; } .product-result__tags:empty { display: none; } .product-result--all { width: 100%; display: block; font-weight: 500; padding: 10px 0; } .search-suggestions li { margin-bottom: 20px; color: #253858; -webkit-transition: .2s ease all; transition: .2s ease all; } @media (max-width: 670px) { .search-suggestions li:nth-child(4) ~ li { display: none; } } .search-suggestions .highlight { display: inline-block; padding: 5px 0; background: #ddf3fb; font-weight: 600; } .search-highlight a { display: block; } .search-highlight a:hover .search-highlight__text { color: #77d0ec; } .search-highlight__image { display: block; margin-bottom: 20px; } .search-highlight__text { font-size: 18px; font-size: 1rem; line-height: 21px; line-height: 1.16667rem; letter-spacing: 0.7px; line-height: 1.2; color: #253858; text-transform: none; } @media (max-width: 1260px) { .search-highlight__text { font-size: 18px; font-size: 1rem; line-height: 21px; line-height: 1.16667rem; letter-spacing: 0.7px; } } @media (max-width: 1023px) { .search-highlight__text { font-size: 16px; font-size: 0.88889rem; line-height: 21px; line-height: 1.16667rem; letter-spacing: 0.7px; } } @media (max-width: 670px) { .search-highlight__text { font-size: 16px; font-size: 0.88889rem; line-height: 21px; line-height: 1.16667rem; letter-spacing: 0.7px; } } @media (max-width: 480px) { .search-highlight__text { font-size: 16px; font-size: 0.88889rem; line-height: 21px; line-height: 1.16667rem; letter-spacing: 0.7px; } } .testimonial-slider .swiper-slide { opacity: .5; } @media (max-width: 670px) { .testimonial-slider .swiper-slide { padding-bottom: 50px; } } .testimonial-slider .swiper-slide.swiper-slide-active { opacity: 1; } .testimonial-slider .swiper-button-prev, .testimonial-slider .swiper-button-next { background: #77d0ec; } @media (max-width: 670px) { .testimonial-slider .swiper-button-prev, .testimonial-slider .swiper-button-next { top: auto; bottom: 0; } } .testimonial-slider .swiper-button-prev:after, .testimonial-slider .swiper-button-next:after { background: url("../img/icons/caret-right-white.svg") no-repeat center center; } @media (max-width: 670px) { .testimonial-slider .swiper-button-prev { left: 0; } } .testimonial-slider .swiper-button-prev:after { -webkit-transform-origin: 6px 4px; transform-origin: 6px 4px; -webkit-transform: rotate(180deg); transform: rotate(180deg); } @media (max-width: 670px) { .testimonial-slider .swiper-button-prev:after { -webkit-transform-origin: 5px 2px; transform-origin: 5px 2px; } } @media (max-width: 670px) { .testimonial-slider .swiper-button-next { right: 0; } } .testimonial-slider .swiper-button-next:after { -webkit-transform: translate(-10px, -9px); transform: translate(-10px, -9px); } @media (max-width: 670px) { .testimonial-slider .swiper-button-next:after { -webkit-transform: translate(-8px, -5px); transform: translate(-8px, -5px); } } .testimonial-slide { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-flow: row nowrap; flex-flow: row nowrap; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } @media (max-width: 670px) { .testimonial-slide { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-flow: column nowrap; flex-flow: column nowrap; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; } } .testimonial-slide__image { position: relative; width: 320px; -webkit-box-flex: 0; -ms-flex: 0 0 auto; flex: 0 0 auto; margin-right: 30px; } @media (max-width: 1023px) { .testimonial-slide__image { width: 200px; } } @media (max-width: 670px) { .testimonial-slide__image { width: 120px; margin-right: 0; margin-bottom: 20px; } } @supports ((-o-object-fit: cover) or (object-fit: cover)) { .testimonial-slide__image:before { content: ''; display: block; width: 100%; position: relative; padding-top: 100%; } .testimonial-slide__image a { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .testimonial-slide__image img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } } .testimonial-slide__logo { display: block; width: 100px; height: 100px; margin-bottom: 20px; } @media (max-width: 1023px) { .testimonial-slide__logo { width: 70px; height: 70px; margin-bottom: 10px; } } @media (max-width: 670px) { .testimonial-slide__logo { width: 50px; height: 50px; } } .testimonial-slide__text { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: greyscale; font-size: 18px; font-size: 1rem; line-height: 21px; line-height: 1.16667rem; letter-spacing: 0.7px; line-height: 1.4; letter-spacing: 0.3px; margin-bottom: 20px; } @media (max-width: 1260px) { .testimonial-slide__text { font-size: 18px; font-size: 1rem; line-height: 21px; line-height: 1.16667rem; letter-spacing: 0.7px; } } @media (max-width: 1023px) { .testimonial-slide__text { font-size: 16px; font-size: 0.88889rem; line-height: 21px; line-height: 1.16667rem; letter-spacing: 0.7px; } } @media (max-width: 670px) { .testimonial-slide__text { font-size: 16px; font-size: 0.88889rem; line-height: 21px; line-height: 1.16667rem; letter-spacing: 0.7px; } } @media (max-width: 480px) { .testimonial-slide__text { font-size: 16px; font-size: 0.88889rem; line-height: 21px; line-height: 1.16667rem; letter-spacing: 0.7px; } } @media (max-width: 670px) { .testimonial-slide__text { font-size: 14px; font-size: 0.77778rem; line-height: 18px; line-height: 1rem; } } .testimonial-slide__name { font-weight: 600; margin-bottom: 20px; } /* ////////////////// */ /* PAGES / TEMPLATES */ /* ////////////////// */ .content--404 { text-align: center; } .content--404 h1 { margin: 40px auto 15px auto; } @media (max-width: 670px) { .content--404 h1 { font-size: 20px; margin: 20px auto 15px auto; } } .content--404 h3 { text-transform: none; color: #757373; max-width: 70%; margin: 0 auto 20px auto; } @media (max-width: 670px) { .content--404 h3 { font-size: 16px; } } .content--404 img { max-width: 70%; } .content--404 .button, .content--404 input[type="submit"] { display: inline-block; } .product-catalog { position: relative; border-top: 1px solid #f7f7f7; border-bottom: 1px solid #f7f7f7; } .product-catalog__image { width: calc(100% + (100vw - 100%) / 2); } @media (max-width: 670px) { .product-catalog__image { position: absolute; top: 0; right: 0; height: 100%; width: calc(70% + (100vw - 100%) / 2); margin-right: calc(-1 * (100vw - 100%) / 2); } } @media (max-width: 480px) { .product-catalog__image { width: 100vw; opacity: .2; } } .product-catalog__image img { display: block; width: 100%; } @media (max-width: 670px) { @supports ((-o-object-fit: cover) or (object-fit: cover)) { .product-catalog__image img { height: 100%; -o-object-fit: cover; object-fit: cover; -o-object-position: 50% 100%; object-position: 50% 100%; } } } @media (max-width: 480px) { @supports ((-o-object-fit: cover) or (object-fit: cover)) { .product-catalog__image img { -o-object-position: 50% 100%; object-position: 50% 100%; } } } .product-catalog__content { position: absolute; bottom: 40%; left: 0; width: 35%; -webkit-transform: translateY(50%); transform: translateY(50%); } @media (max-width: 1023px) { .product-catalog__content { width: 45%; } } @media (max-width: 670px) { .product-catalog__content { position: relative; bottom: 0; padding: 40px 0; width: 55%; -webkit-transform: none; transform: none; } } @media (max-width: 480px) { .product-catalog__content { width: 100%; } } .about-us-bs { --bs-max-width: 1920px; } @media (max-width: 1260px) { .about-us-bs { --bs-max-width: 100vw; } } .about-us-bs__element { position: absolute; top: 0; left: 0; display: block; height: 100%; } .about-us-bs__content { padding: 40px 0; } @media (max-width: 670px) { .about-us-bs__content { padding: 0; } } .team__text-col { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-flow: column nowrap; flex-flow: column nowrap; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; padding-left: 60px; padding-bottom: 60px; } @media (max-width: 1260px) { .team__text-col { padding-left: 20px; } } .product-search { position: relative; } .product-search__icon { position: absolute; top: 50%; right: 15px; -webkit-transform: translateY(-50%); transform: translateY(-50%); pointer-events: none; } .product-listing .product-grid__text { padding-top: 55px; } @media (max-width: 670px) { .product-listing .product-grid__text { width: 100%; padding-left: 0; padding-top: 0; } } .product-images-col { width: calc(50% - 20px); } .product-images__slider img { display: block; width: 100%; } .product-images__slider .swiper-button-prev { left: 0; } .product-images__slider .swiper-button-next { right: 0; } @media (max-width: 1023px) { .is--interacted .swiper-button-prev, .is--interacted .swiper-button-next { opacity: .3; } } .slider-double-tap-info { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: greyscale; position: absolute; bottom: 20px; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); background: rgba(0, 0, 0, 0.6); padding: 10px 20px; border-radius: 3px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-flow: row nowrap; flex-flow: row nowrap; font-size: 13px; font-size: 0.72222rem; line-height: 18px; line-height: 1rem; font-family: "Muli", "Arial", sans-serif; font-weight: 500; color: #fff; z-index: 10; pointer-events: none; will-change: opacity, transform; -webkit-transition: 0.23s cubic-bezier(0.6, 0.04, 0.98, 0.335) all; transition: 0.23s cubic-bezier(0.6, 0.04, 0.98, 0.335) all; } @media (max-width: 1260px) { .slider-double-tap-info { font-size: 13px; font-size: 0.72222rem; line-height: 16px; line-height: 0.88889rem; } } @media (max-width: 1023px) { .slider-double-tap-info { font-size: 12px; font-size: 0.66667rem; line-height: 14px; line-height: 0.77778rem; } } @media (max-width: 670px) { .slider-double-tap-info { font-size: 12px; font-size: 0.66667rem; line-height: 14px; line-height: 0.77778rem; } } @media (max-width: 480px) { .slider-double-tap-info { font-size: 12px; font-size: 0.66667rem; line-height: 14px; line-height: 0.77778rem; } } @media (max-width: 1023px) { .slider-double-tap-info { white-space: nowrap; } } .is--interacted .slider-double-tap-info { -webkit-transform: translateX(-50%) translateY(80%); transform: translateX(-50%) translateY(80%); opacity: 0; } .slider-double-tap__icon { display: block; width: 20px; color: #fff; margin-right: 20px; } @media (max-width: 670px) { .slider-double-tap__icon { width: 15px; } } .product-thumbnails-container { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-flow: row nowrap; flex-flow: row nowrap; margin-bottom: 30px; } @media (min-width: 670px) { .product-thumbnails-container { display: block; margin-left: -10px; } .product-thumbnails-container .thumbnail-nav-prev, .product-thumbnails-container .thumbnail-nav-next { display: none !important; } .product-thumbnails-container .swiper-wrapper { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-flow: row wrap; flex-flow: row wrap; -webkit-transform: translate(0) !important; transform: translate(0) !important; } .product-thumbnails-container .swiper-container { pointer-events: none; } .product-thumbnails-container .product-thumbnails__slide { height: auto; margin-left: 10px; margin-bottom: 10px; pointer-events: auto; } } .product-thumbnails__slider { width: 100%; } .product-thumbnails__slide { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-flow: row nowrap; flex-flow: row nowrap; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; width: 60px; background: #f0f0f0; border: 2px solid transparent; cursor: pointer; } .product-thumbnails__slide.swiper-slide-thumb-active { border: 2px solid #cdcdcd; } .product-thumbnails__slide.swiper-slide-thumb-active:before { content: ''; display: block; width: 100%; height: 100%; position: absolute; top: 0; left: 0; pointer-events: none; border: 1px solid #fff; z-index: 2; } .product-thumbnails__slide.slide--video { position: relative; overflow: hidden; } @supports ((-o-object-fit: cover) or (object-fit: cover)) { .product-thumbnails__slide.slide--video img { height: 100%; width: 100%; -o-object-fit: cover; object-fit: cover; -webkit-transform: scale(1.4); transform: scale(1.4); } } .product-thumbnails__slide.slide--video:after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(240, 240, 240, 0.5) url("../img/icons/play-white.svg") no-repeat center center; background-size: 30px; z-index: 2; } .product-thumbnails__slide img { max-height: 100%; } @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) { .product-thumbnails__slide img { width: 100%; } } .thumbnail-nav-prev, .thumbnail-nav-next { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-flow: row nowrap; flex-flow: row nowrap; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; background: #ddf3fb; -webkit-box-flex: 0; -ms-flex: 0 0 auto; flex: 0 0 auto; width: 50px; cursor: pointer; } @media (max-width: 1023px) { .thumbnail-nav-prev, .thumbnail-nav-next { width: 30px; } } .thumbnail-nav-prev:hover, .thumbnail-nav-next:hover { background: #77d0ec; } .thumbnail-nav-prev:hover svg *, .thumbnail-nav-next:hover svg * { stroke: #fff; } .thumbnail-nav-prev.swiper-button-disabled, .thumbnail-nav-next.swiper-button-disabled { background: #f7f7f7; cursor: not-allowed; } .thumbnail-nav-prev.swiper-button-disabled svg *, .thumbnail-nav-next.swiper-button-disabled svg * { stroke: #cdcdcd; } .thumbnail-nav-prev { margin-right: 20px; } @media (max-width: 670px) { .thumbnail-nav-prev { margin-right: 10px; } } .thumbnail-nav-prev svg { -webkit-transform: rotate(180deg); transform: rotate(180deg); position: relative; left: -2px; } .thumbnail-nav-next { margin-left: 20px; } @media (max-width: 670px) { .thumbnail-nav-next { margin-left: 10px; } } .thumbnail-nav-next svg { position: relative; left: 1px; } .product-info-col { margin-left: calc(8.33333% + 20px) !important; width: calc(41.66667% - 20px); position: -webkit-sticky; position: sticky; top: 20px; z-index: 2; } @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) { .product-info-col { position: relative; top: 0; } } @media (max-width: 670px) { .product-info-col { position: relative; top: 0; width: 100%; margin-left: 0 !important; } } .product-quicklinks { font-weight: 500; margin-left: -30px; margin-bottom: -20px; } .product-quicklinks a { display: inline-block; margin-left: 30px; margin-bottom: 20px; } .product-more-actions { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-flow: column nowrap; flex-flow: column nowrap; } .product-more-actions .button, .product-more-actions input[type="submit"] { width: 100%; } .product-more-actions .button + .button, .product-more-actions input[type="submit"] + .button, .product-more-actions .button + input[type="submit"], .product-more-actions input[type="submit"] + input[type="submit"] { margin-top: 10px; } .product-details { background: #fbfbfb; padding: 40px 0; } .product-details__certs, .product-parent__certs { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-flow: row wrap; flex-flow: row wrap; margin-left: -20px; margin-bottom: -20px; } .product-details__checks li:before { -webkit-transform: translateY(-13%); transform: translateY(-13%); } .certs__single-cert { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-flow: row nowrap; flex-flow: row nowrap; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; width: 80px; height: 80px; margin-left: 20px; margin-bottom: 20px; } @media (max-width: 1260px) { .certs__single-cert { width: 60px; height: 60px; } } @media (max-width: 1023px) { .certs__single-cert { width: 50px; height: 50px; } } @media (max-width: 480px) { .certs__single-cert { width: calc(19.16667% - 20px); height: auto; } } .certs__single-cert img { height: 100%; } @media (max-width: 480px) { .certs__single-cert img { height: auto; width: 100%; } } .product-specs { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: greyscale; } .product-specs__row { padding: 14px 0 15px 0; border-bottom: 1px solid #e3e3e3; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-flow: row nowrap; flex-flow: row nowrap; } .product-specs__row:first-of-type { padding-top: 0; } .product-specs__row .specs-title { width: 30%; font-weight: 600; -webkit-hyphens: auto; -ms-hyphens: auto; hyphens: auto; -webkit-box-flex: 0; -ms-flex: 0 0 auto; flex: 0 0 auto; } .product-form-container { position: absolute; top: 0; right: 0; z-index: 5; background: #fff; padding: 40px; -webkit-box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.08); box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.08); border-radius: 5px; opacity: 0; -webkit-transform: translateY(100px); transform: translateY(100px); pointer-events: none; will-change: opacity, transform; -webkit-transition: 0.34s cubic-bezier(0.075, 0.82, 0.165, 1) all; transition: 0.34s cubic-bezier(0.075, 0.82, 0.165, 1) all; width: 150%; } @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) { .product-form-container { max-width: 1000px; } } @media (min-width: 1400px) { .product-form-container { width: 100%; } } @media (max-width: 1260px) { .product-form-container { width: 150%; } } @media (max-width: 1023px) { .product-form-container { width: calc(100vw - 60px); } } @media (max-width: 670px) { .product-form-container { width: 100%; padding: 20px; } } .product-form-container.form--visible { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); pointer-events: auto; } .product-form__close { position: absolute; top: -15px; right: -15px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-flow: row nowrap; flex-flow: row nowrap; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; width: 40px; height: 40px; background: #52595f; cursor: pointer; } @media (max-width: 670px) { .product-form__close { width: 30px; height: 30px; top: -10px; right: -10px; } } .product-form__close:hover { background: #1a1919; } .product-form__close .icon { display: block; width: 15px; height: 15px; color: #fff; } @media (max-width: 670px) { .product-form__close .icon { width: 14px; height: 14px; } } .product-form__salutation { width: calc(16.66667% - 20px); -webkit-box-flex: 1; -ms-flex: 1 0 auto; flex: 1 0 auto; } @media (max-width: 670px) { .product-form__salutation { width: calc(100% - 20px); } } .product-form__salutation select { width: 100%; } .product-form__firstname, .product-form__surname { width: calc(41.66667% - 20px); } @media (max-width: 670px) { .product-form__firstname, .product-form__surname { width: calc(50% - 20px); } } @media (max-width: 480px) { .product-form__firstname, .product-form__surname { width: calc(100% - 20px); } } .product-form__company { width: calc(100% - 20px); } .product-form__name, .product-form__mail, .product-form__phone { width: calc(50% - 20px); } @media (max-width: 480px) { .product-form__name, .product-form__mail, .product-form__phone { width: calc(100% - 20px); } } .product-form__amount { width: calc(33.33333% - 20px); } @media (max-width: 480px) { .product-form__amount { width: calc(100% - 20px); } } .product-form__message { width: calc(100% - 20px); } .product-form__chat-html { margin-top: 20px; } .product-parent__certs .certs__single-cert { width: 60px; height: 60px; } @media (max-width: 1260px) { .product-parent__certs .certs__single-cert { width: 50px; height: 50px; } } @media (max-width: 480px) { .product-parent__certs .certs__single-cert { width: 45px; height: 45px; } } .product-parent__thumbnail { position: -webkit-sticky; position: sticky; top: 20px; } @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) { .product-parent__thumbnail { position: relative; } } @media (max-width: 480px) { .product-parent__thumbnail { position: relative; top: 0; } } .product-parent__thumbnail:before { content: ''; display: block; width: 80%; height: 80%; position: absolute; top: 0; right: 0; background: #f0f0f0; z-index: 0; } .product-parent-thumbnail__image { position: relative; display: block; z-index: 1; } @media (max-width: 480px) { .product-parent-opener { margin-bottom: 60px; } } @media (max-width: 480px) { .product-parent-opener__content-col { -webkit-box-ordinal-group: 3; -ms-flex-order: 2; order: 2; padding: 0; } } @media (max-width: 480px) { .product-parent-opener__image-col { -webkit-box-ordinal-group: 2; -ms-flex-order: 1; order: 1; margin-bottom: 20px; } } .product-variant-col { margin-bottom: 40px; } .variants--1 .product-variant-col { width: calc(41.66667% - 20px); margin: 0 auto !important; } @media (max-width: 670px) { .variants--1 .product-variant-col { width: calc(50% - 20px); } } @media (max-width: 480px) { .variants--1 .product-variant-col { width: 100%; } } .variants--2 .product-variant-col { width: calc(33.33333% - 20px); } @media (max-width: 1023px) { .variants--2 .product-variant-col { width: calc(50% - 20px); } } @media (max-width: 480px) { .variants--2 .product-variant-col { width: 100%; } } .variants--3 .product-variant-col { width: calc(33.33333% - 20px); } @media (max-width: 670px) { .variants--3 .product-variant-col { width: calc(50% - 20px); } } @media (max-width: 480px) { .variants--3 .product-variant-col { width: 100%; } } .variants--4 .product-variant-col, .variants--5 .product-variant-col, .variants--6 .product-variant-col { width: calc(25% - 20px); } @media (max-width: 1023px) { .variants--4 .product-variant-col, .variants--5 .product-variant-col, .variants--6 .product-variant-col { width: calc(33.33333% - 20px); } } @media (max-width: 670px) { .variants--4 .product-variant-col, .variants--5 .product-variant-col, .variants--6 .product-variant-col { width: calc(50% - 20px); } } @media (max-width: 480px) { .variants--4 .product-variant-col, .variants--5 .product-variant-col, .variants--6 .product-variant-col { width: 100%; } } .product-variant-col__image { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-flow: row nowrap; flex-flow: row nowrap; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; background: #f7f7f7; padding: 20px; } @media (max-width: 670px) { .product-variant-col__image { padding: 15px; } } .product-variant-col__image:hover { background: #f0f0f0; } .product-variant-col__image:after { content: ''; display: block; width: 1px; padding-top: 100%; } @media (max-width: 480px) { .product-variant-col__checks { height: auto !important; } } .product-variant-col__checks li:before { -webkit-transform: translateY(-13%); transform: translateY(-13%); } .news-post__thumbnail { max-height: 80vh; overflow: hidden; } .news-post__thumbnail img { display: block; width: 100%; } .checkout-list .cart-item__action-col { display: none; } @media (max-width: 1023px) { .checkout-list .cart-item { margin-left: 0 !important; } } @media (max-width: 1260px) { .checkout-list .cart-item__image { width: 80px; } } @media (max-width: 1023px) { .checkout-list .cart-item__image { width: 50px; margin-left: 0 !important; } } @media (max-width: 1023px) { .checkout-list .cart-item__amounts-container { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-flow: row wrap; flex-flow: row wrap; } } .checkout-list .oc-cart__items { padding-left: 0; padding-right: 0; } .s_submit .hs-button { width: 100%; text-align: center; } /* ///////////////// */ /* PLUGIN OVERWRITES */ /* ///////////////// */ /*# sourceMappingURL=style.css.map */