@import url(https://use.typekit.net/pwn3kcg.css); .not-selectable{-webkit-user-select:none;user-select:none}.carousel{position:relative;box-sizing:border-box}.carousel *,.carousel *:before,.carousel *:after{box-sizing:inherit}.carousel.is-draggable{cursor:move;cursor:-webkit-grab;cursor:grab}.carousel.is-dragging{cursor:move;cursor:-webkit-grabbing;cursor:grabbing}.carousel__viewport{position:relative;overflow:hidden;max-width:100%;max-height:100%}.carousel__track{display:flex}.carousel__slide{flex:0 0 auto;width:var(--carousel-slide-width, 60%);max-width:100%;padding:1rem;position:relative;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;touch-action:pan-y}.has-dots{margin-bottom:calc(0.5rem + 22px)}.carousel__dots{margin:0 auto;padding:0;position:absolute;top:calc(100% + 0.5rem);left:0;right:0;display:flex;justify-content:center;list-style:none;-webkit-user-select:none;user-select:none}.carousel__dots .carousel__dot{margin:0;padding:0;display:block;position:relative;width:22px;height:22px;cursor:pointer}.carousel__dots .carousel__dot:after{content:"";width:8px;height:8px;border-radius:50%;position:absolute;top:50%;left:50%;-webkit-transform:translate(-50%, -50%);transform:translate(-50%, -50%);background-color:currentColor;opacity:.25;transition:opacity .15s ease-in-out}.carousel__dots .carousel__dot.is-selected:after{opacity:1}.carousel__button{width:var(--carousel-button-width, 48px);height:var(--carousel-button-height, 48px);padding:0;border:0;display:flex;justify-content:center;align-items:center;pointer-events:all;cursor:pointer;color:var(--carousel-button-color, currentColor);background:var(--carousel-button-bg, transparent);border-radius:var(--carousel-button-border-radius, 50%);box-shadow:var(--carousel-button-shadow, none);transition:opacity .15s ease}.carousel__button.is-prev,.carousel__button.is-next{position:absolute;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%)}.carousel__button.is-prev{left:10px}.carousel__button.is-next{right:10px}.carousel__button[disabled]{cursor:default;opacity:.3}.carousel__button svg{width:var(--carousel-button-svg-width, 50%);height:var(--carousel-button-svg-height, 50%);fill:none;stroke:currentColor;stroke-width:var(--carousel-button-svg-stroke-width, 1.5);stroke-linejoin:bevel;stroke-linecap:round;-webkit-filter:var(--carousel-button-svg-filter, none);filter:var(--carousel-button-svg-filter, none);pointer-events:none}html.with-fancybox{scroll-behavior:auto}body.compensate-for-scrollbar{overflow:hidden !important;touch-action:none}.fancybox__container{position:fixed;top:0;left:0;bottom:0;right:0;direction:ltr;margin:0;padding:env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px);box-sizing:border-box;display:flex;flex-direction:column;color:var(--fancybox-color, #fff);-webkit-tap-highlight-color:transparent;overflow:hidden;z-index:1050;outline:none;-webkit-transform-origin:top left;transform-origin:top left;--carousel-button-width: 48px;--carousel-button-height: 48px;--carousel-button-svg-width: 24px;--carousel-button-svg-height: 24px;--carousel-button-svg-stroke-width: 2.5;--carousel-button-svg-filter: drop-shadow(1px 1px 1px rgba(0, 0, 0, 0.4))}.fancybox__container *,.fancybox__container *::before,.fancybox__container *::after{box-sizing:inherit}.fancybox__container :focus{outline:none}body:not(.is-using-mouse) .fancybox__container :focus{box-shadow:0 0 0 1px #fff,0 0 0 2px var(--fancybox-accent-color, rgba(1, 210, 232, 0.94))}@media all and (min-width: 1024px){.fancybox__container{--carousel-button-width:48px;--carousel-button-height:48px;--carousel-button-svg-width:27px;--carousel-button-svg-height:27px}}.fancybox__backdrop{position:absolute;top:0;right:0;bottom:0;left:0;z-index:-1;background:var(--fancybox-bg, rgba(24, 24, 27, 0.92))}.fancybox__carousel{position:relative;flex:1 1 auto;min-height:0;height:100%;z-index:10}.fancybox__carousel.has-dots{margin-bottom:calc(0.5rem + 22px)}.fancybox__viewport{position:relative;width:100%;height:100%;overflow:visible;cursor:default}.fancybox__track{display:flex;height:100%}.fancybox__slide{flex:0 0 auto;width:100%;max-width:100%;margin:0;padding:48px 8px 8px 8px;position:relative;overscroll-behavior:contain;display:flex;flex-direction:column;outline:0;overflow:auto;-webkit-overflow-scrolling:touch;--carousel-button-width: 36px;--carousel-button-height: 36px;--carousel-button-svg-width: 22px;--carousel-button-svg-height: 22px}.fancybox__slide::before,.fancybox__slide::after{content:"";flex:0 0 0;margin:auto}@media all and (min-width: 1024px){.fancybox__slide{padding:64px 100px}}.fancybox__content{margin:0 env(safe-area-inset-right, 0px) 0 env(safe-area-inset-left, 0px);padding:36px;color:var(--fancybox-content-color, #374151);background:var(--fancybox-content-bg, #fff);position:relative;align-self:center;display:flex;flex-direction:column;z-index:20}.fancybox__content :focus:not(.carousel__button.is-close){outline:thin dotted;box-shadow:none}.fancybox__caption{align-self:center;max-width:100%;margin:0;padding:1rem 0 0 0;line-height:1.375;color:var(--fancybox-color, currentColor);visibility:visible;cursor:auto;flex-shrink:0;overflow-wrap:anywhere}.is-loading .fancybox__caption{visibility:hidden}.fancybox__container>.carousel__dots{top:100%;color:var(--fancybox-color, #fff)}.fancybox__nav .carousel__button{z-index:40}.fancybox__nav .carousel__button.is-next{right:8px}@media all and (min-width: 1024px){.fancybox__nav .carousel__button.is-next{right:40px}}.fancybox__nav .carousel__button.is-prev{left:8px}@media all and (min-width: 1024px){.fancybox__nav .carousel__button.is-prev{left:40px}}.carousel__button.is-close{position:absolute;top:8px;right:8px;top:calc(env(safe-area-inset-top, 0px) + 8px);right:calc(env(safe-area-inset-right, 0px) + 8px);z-index:40}@media all and (min-width: 1024px){.carousel__button.is-close{right:40px}}.fancybox__content>.carousel__button.is-close{position:absolute;top:-40px;right:0;color:var(--fancybox-color, #fff)}.fancybox__no-click,.fancybox__no-click button{pointer-events:none}.fancybox__spinner{position:absolute;top:50%;left:50%;-webkit-transform:translate(-50%, -50%);transform:translate(-50%, -50%);width:50px;height:50px;color:var(--fancybox-color, currentColor)}.fancybox__slide .fancybox__spinner{cursor:pointer;z-index:1053}.fancybox__spinner svg{-webkit-animation:fancybox-rotate 2s linear infinite;animation:fancybox-rotate 2s linear infinite;-webkit-transform-origin:center center;transform-origin:center center;position:absolute;top:0;right:0;bottom:0;left:0;margin:auto;width:100%;height:100%}.fancybox__spinner svg circle{fill:none;stroke-width:2.75;stroke-miterlimit:10;stroke-dasharray:1,200;stroke-dashoffset:0;-webkit-animation:fancybox-dash 1.5s ease-in-out infinite;animation:fancybox-dash 1.5s ease-in-out infinite;stroke-linecap:round;stroke:currentColor}@-webkit-keyframes fancybox-rotate{100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes fancybox-rotate{100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@-webkit-keyframes fancybox-dash{0%{stroke-dasharray:1,200;stroke-dashoffset:0}50%{stroke-dasharray:89,200;stroke-dashoffset:-35px}100%{stroke-dasharray:89,200;stroke-dashoffset:-124px}}@keyframes fancybox-dash{0%{stroke-dasharray:1,200;stroke-dashoffset:0}50%{stroke-dasharray:89,200;stroke-dashoffset:-35px}100%{stroke-dasharray:89,200;stroke-dashoffset:-124px}}.fancybox__backdrop,.fancybox__caption,.fancybox__nav,.carousel__dots,.carousel__button.is-close{opacity:var(--fancybox-opacity, 1)}.fancybox__container.is-animated[aria-hidden=false] .fancybox__backdrop,.fancybox__container.is-animated[aria-hidden=false] .fancybox__caption,.fancybox__container.is-animated[aria-hidden=false] .fancybox__nav,.fancybox__container.is-animated[aria-hidden=false] .carousel__dots,.fancybox__container.is-animated[aria-hidden=false] .carousel__button.is-close{-webkit-animation:.15s ease backwards fancybox-fadeIn;animation:.15s ease backwards fancybox-fadeIn}.fancybox__container.is-animated.is-closing .fancybox__backdrop,.fancybox__container.is-animated.is-closing .fancybox__caption,.fancybox__container.is-animated.is-closing .fancybox__nav,.fancybox__container.is-animated.is-closing .carousel__dots,.fancybox__container.is-animated.is-closing .carousel__button.is-close{-webkit-animation:.15s ease both fancybox-fadeOut;animation:.15s ease both fancybox-fadeOut}.fancybox-fadeIn{-webkit-animation:.15s ease both fancybox-fadeIn;animation:.15s ease both fancybox-fadeIn}.fancybox-fadeOut{-webkit-animation:.1s ease both fancybox-fadeOut;animation:.1s ease both fancybox-fadeOut}.fancybox-zoomInUp{-webkit-animation:.2s ease both fancybox-zoomInUp;animation:.2s ease both fancybox-zoomInUp}.fancybox-zoomOutDown{-webkit-animation:.15s ease both fancybox-zoomOutDown;animation:.15s ease both fancybox-zoomOutDown}.fancybox-throwOutUp{-webkit-animation:.15s ease both fancybox-throwOutUp;animation:.15s ease both fancybox-throwOutUp}.fancybox-throwOutDown{-webkit-animation:.15s ease both fancybox-throwOutDown;animation:.15s ease both fancybox-throwOutDown}@-webkit-keyframes fancybox-fadeIn{from{opacity:0}to{opacity:1}}@keyframes fancybox-fadeIn{from{opacity:0}to{opacity:1}}@-webkit-keyframes fancybox-fadeOut{to{opacity:0}}@keyframes fancybox-fadeOut{to{opacity:0}}@-webkit-keyframes fancybox-zoomInUp{from{-webkit-transform:scale(0.97) translate3d(0, 16px, 0);transform:scale(0.97) translate3d(0, 16px, 0);opacity:0}to{-webkit-transform:scale(1) translate3d(0, 0, 0);transform:scale(1) translate3d(0, 0, 0);opacity:1}}@keyframes fancybox-zoomInUp{from{-webkit-transform:scale(0.97) translate3d(0, 16px, 0);transform:scale(0.97) translate3d(0, 16px, 0);opacity:0}to{-webkit-transform:scale(1) translate3d(0, 0, 0);transform:scale(1) translate3d(0, 0, 0);opacity:1}}@-webkit-keyframes fancybox-zoomOutDown{to{-webkit-transform:scale(0.97) translate3d(0, 16px, 0);transform:scale(0.97) translate3d(0, 16px, 0);opacity:0}}@keyframes fancybox-zoomOutDown{to{-webkit-transform:scale(0.97) translate3d(0, 16px, 0);transform:scale(0.97) translate3d(0, 16px, 0);opacity:0}}@-webkit-keyframes fancybox-throwOutUp{to{-webkit-transform:translate3d(0, -30%, 0);transform:translate3d(0, -30%, 0);opacity:0}}@keyframes fancybox-throwOutUp{to{-webkit-transform:translate3d(0, -30%, 0);transform:translate3d(0, -30%, 0);opacity:0}}@-webkit-keyframes fancybox-throwOutDown{to{-webkit-transform:translate3d(0, 30%, 0);transform:translate3d(0, 30%, 0);opacity:0}}@keyframes fancybox-throwOutDown{to{-webkit-transform:translate3d(0, 30%, 0);transform:translate3d(0, 30%, 0);opacity:0}}.fancybox__carousel .carousel__slide{scrollbar-width:thin;scrollbar-color:#ccc rgba(255,255,255,.1)}.fancybox__carousel .carousel__slide::-webkit-scrollbar{width:8px;height:8px}.fancybox__carousel .carousel__slide::-webkit-scrollbar-track{background-color:rgba(255,255,255,.1)}.fancybox__carousel .carousel__slide::-webkit-scrollbar-thumb{background-color:#ccc;border-radius:2px;box-shadow:inset 0 0 4px rgba(0,0,0,.2)}.fancybox__carousel.is-draggable .fancybox__slide,.fancybox__carousel.is-draggable .fancybox__slide .fancybox__content{cursor:move;cursor:-webkit-grab;cursor:grab}.fancybox__carousel.is-dragging .fancybox__slide,.fancybox__carousel.is-dragging .fancybox__slide .fancybox__content{cursor:move;cursor:-webkit-grabbing;cursor:grabbing}.fancybox__carousel .fancybox__slide .fancybox__content{cursor:auto}.fancybox__carousel .fancybox__slide.can-zoom_in .fancybox__content{cursor:zoom-in}.fancybox__carousel .fancybox__slide.can-zoom_out .fancybox__content{cursor:zoom-out}.fancybox__carousel .fancybox__slide.is-draggable .fancybox__content{cursor:move;cursor:-webkit-grab;cursor:grab}.fancybox__carousel .fancybox__slide.is-dragging .fancybox__content{cursor:move;cursor:-webkit-grabbing;cursor:grabbing}.fancybox__image{-webkit-transform-origin:0 0;transform-origin:0 0;touch-action:none;-webkit-user-select:none;user-select:none;transition:none}.has-image .fancybox__content{padding:0;background:transparent;min-height:1px}.is-closing .has-image .fancybox__content{overflow:visible}.has-image[data-image-fit=contain]{overflow:visible;touch-action:none}.has-image[data-image-fit=contain] .fancybox__content{flex-direction:row;flex-wrap:wrap}.has-image[data-image-fit=contain] .fancybox__image{max-width:100%;max-height:100%;object-fit:contain}.has-image[data-image-fit=contain-w]{overflow-x:hidden;overflow-y:auto}.has-image[data-image-fit=contain-w] .fancybox__content{min-height:auto}.has-image[data-image-fit=contain-w] .fancybox__image{max-width:100%;height:auto}.has-image[data-image-fit=cover]{overflow:visible;touch-action:none}.has-image[data-image-fit=cover] .fancybox__content{width:100%;height:100%}.has-image[data-image-fit=cover] .fancybox__image{width:100%;height:100%;object-fit:cover}.fancybox__carousel .fancybox__slide.has-iframe .fancybox__content,.fancybox__carousel .fancybox__slide.has-map .fancybox__content,.fancybox__carousel .fancybox__slide.has-pdf .fancybox__content,.fancybox__carousel .fancybox__slide.has-video .fancybox__content,.fancybox__carousel .fancybox__slide.has-html5video .fancybox__content{max-width:100%;flex-shrink:1;min-height:1px;overflow:visible}.fancybox__carousel .fancybox__slide.has-iframe .fancybox__content,.fancybox__carousel .fancybox__slide.has-map .fancybox__content,.fancybox__carousel .fancybox__slide.has-pdf .fancybox__content{width:100%;height:80%}.fancybox__carousel .fancybox__slide.has-video .fancybox__content,.fancybox__carousel .fancybox__slide.has-html5video .fancybox__content{width:960px;height:540px;max-width:100%;max-height:100%}.fancybox__carousel .fancybox__slide.has-map .fancybox__content,.fancybox__carousel .fancybox__slide.has-pdf .fancybox__content,.fancybox__carousel .fancybox__slide.has-video .fancybox__content,.fancybox__carousel .fancybox__slide.has-html5video .fancybox__content{padding:0;background:rgba(24,24,27,.9);color:#fff}.fancybox__carousel .fancybox__slide.has-map .fancybox__content{background:#e5e3df}.fancybox__html5video,.fancybox__iframe{border:0;display:block;height:100%;width:100%;background:transparent}.fancybox-placeholder{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border-width:0}.fancybox__thumbs{flex:0 0 auto;position:relative;padding:0px 3px;opacity:var(--fancybox-opacity, 1)}.fancybox__container.is-animated[aria-hidden=false] .fancybox__thumbs{-webkit-animation:.15s ease-in backwards fancybox-fadeIn;animation:.15s ease-in backwards fancybox-fadeIn}.fancybox__container.is-animated.is-closing .fancybox__thumbs{opacity:0}.fancybox__thumbs .carousel__slide{flex:0 0 auto;width:var(--fancybox-thumbs-width, 96px);margin:0;padding:8px 3px;box-sizing:content-box;display:flex;align-items:center;justify-content:center;overflow:visible;cursor:pointer}.fancybox__thumbs .carousel__slide .fancybox__thumb::after{content:"";position:absolute;top:0;left:0;right:0;bottom:0;border-width:5px;border-style:solid;border-color:var(--fancybox-accent-color, rgba(34, 213, 233, 0.96));opacity:0;transition:opacity .15s ease;border-radius:var(--fancybox-thumbs-border-radius, 4px)}.fancybox__thumbs .carousel__slide.is-nav-selected .fancybox__thumb::after{opacity:.92}.fancybox__thumbs .carousel__slide>*{pointer-events:none;-webkit-user-select:none;user-select:none}.fancybox__thumb{position:relative;width:100%;padding-top:calc(100%/(var(--fancybox-thumbs-ratio, 1.5)));background-size:cover;background-position:center center;background-color:rgba(255,255,255,.1);background-repeat:no-repeat;border-radius:var(--fancybox-thumbs-border-radius, 4px)}.fancybox__toolbar{position:absolute;top:0;right:0;left:0;z-index:20;background:linear-gradient(to top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.006) 8.1%, rgba(0, 0, 0, 0.021) 15.5%, rgba(0, 0, 0, 0.046) 22.5%, rgba(0, 0, 0, 0.077) 29%, rgba(0, 0, 0, 0.114) 35.3%, rgba(0, 0, 0, 0.155) 41.2%, rgba(0, 0, 0, 0.198) 47.1%, rgba(0, 0, 0, 0.242) 52.9%, rgba(0, 0, 0, 0.285) 58.8%, rgba(0, 0, 0, 0.326) 64.7%, rgba(0, 0, 0, 0.363) 71%, rgba(0, 0, 0, 0.394) 77.5%, rgba(0, 0, 0, 0.419) 84.5%, rgba(0, 0, 0, 0.434) 91.9%, rgba(0, 0, 0, 0.44) 100%);padding:0;touch-action:none;display:flex;justify-content:space-between;--carousel-button-svg-width: 20px;--carousel-button-svg-height: 20px;opacity:var(--fancybox-opacity, 1);text-shadow:var(--fancybox-toolbar-text-shadow, 1px 1px 1px rgba(0, 0, 0, 0.4))}@media all and (min-width: 1024px){.fancybox__toolbar{padding:8px}}.fancybox__container.is-animated[aria-hidden=false] .fancybox__toolbar{-webkit-animation:.15s ease-in backwards fancybox-fadeIn;animation:.15s ease-in backwards fancybox-fadeIn}.fancybox__container.is-animated.is-closing .fancybox__toolbar{opacity:0}.fancybox__toolbar__items{display:flex}.fancybox__toolbar__items--left{margin-right:auto}.fancybox__toolbar__items--center{position:absolute;left:50%;-webkit-transform:translateX(-50%);transform:translateX(-50%)}.fancybox__toolbar__items--right{margin-left:auto}@media(max-width: 640px){.fancybox__toolbar__items--center:not(:last-child){display:none}}.fancybox__counter{min-width:72px;padding:0 10px;line-height:var(--carousel-button-height, 48px);text-align:center;font-size:17px;font-variant-numeric:tabular-nums;-webkit-font-smoothing:subpixel-antialiased}.fancybox__progress{background:var(--fancybox-accent-color, rgba(34, 213, 233, 0.96));height:3px;left:0;position:absolute;right:0;top:0;-webkit-transform:scaleX(0);transform:scaleX(0);-webkit-transform-origin:0;transform-origin:0;transition-property:-webkit-transform;transition-property:transform;transition-property:transform, -webkit-transform;transition-timing-function:linear;z-index:30;-webkit-user-select:none;user-select:none}.fancybox__container:-webkit-full-screen::backdrop{opacity:0}.fancybox__container:fullscreen::-webkit-backdrop{opacity:0}.fancybox__container:fullscreen::backdrop{opacity:0}.fancybox__button--fullscreen g:nth-child(2){display:none}.fancybox__container:-webkit-full-screen .fancybox__button--fullscreen g:nth-child(1){display:none}.fancybox__container:fullscreen .fancybox__button--fullscreen g:nth-child(1){display:none}.fancybox__container:-webkit-full-screen .fancybox__button--fullscreen g:nth-child(2){display:block}.fancybox__container:fullscreen .fancybox__button--fullscreen g:nth-child(2){display:block}.fancybox__button--slideshow g:nth-child(2){display:none}.fancybox__container.has-slideshow .fancybox__button--slideshow g:nth-child(1){display:none}.fancybox__container.has-slideshow .fancybox__button--slideshow g:nth-child(2){display:block} .splide__container{box-sizing:border-box;position:relative}.splide__list{backface-visibility:hidden;display:-ms-flexbox;display:flex;height:100%;margin:0!important;padding:0!important}.splide.is-initialized:not(.is-active) .splide__list{display:block}.splide__pagination{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-ms-flex-pack:center;justify-content:center;margin:0;pointer-events:none}.splide__pagination li{display:inline-block;line-height:1;list-style-type:none;margin:0;pointer-events:auto}.splide__progress__bar{width:0}.splide{position:relative;visibility:hidden}.splide.is-initialized,.splide.is-rendered{visibility:visible}.splide__slide{backface-visibility:hidden;box-sizing:border-box;-ms-flex-negative:0;flex-shrink:0;list-style-type:none!important;margin:0;position:relative}.splide__slide img{vertical-align:bottom}.splide__spinner{animation:splide-loading 1s linear infinite;border:2px solid #999;border-left-color:transparent;border-radius:50%;bottom:0;contain:strict;display:inline-block;height:20px;left:0;margin:auto;position:absolute;right:0;top:0;width:20px}.splide__sr{clip:rect(0 0 0 0);border:0;height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.splide__toggle.is-active .splide__toggle__play,.splide__toggle__pause{display:none}.splide__toggle.is-active .splide__toggle__pause{display:inline}.splide__track{overflow:hidden;position:relative;z-index:0}@keyframes splide-loading{0%{transform:rotate(0)}to{transform:rotate(1turn)}}.splide__track--draggable{-webkit-touch-callout:none;-webkit-user-select:none;-ms-user-select:none;user-select:none}.splide__track--fade>.splide__list{display:block}.splide__track--fade>.splide__list>.splide__slide{left:0;opacity:0;position:absolute;top:0;z-index:0}.splide__track--fade>.splide__list>.splide__slide.is-active{opacity:1;position:relative;z-index:1}.splide--rtl{direction:rtl}.splide__track--ttb>.splide__list{display:block}.splide__arrow{-ms-flex-align:center;align-items:center;background:#ccc;border:0;border-radius:50%;cursor:pointer;display:-ms-flexbox;display:flex;height:2em;-ms-flex-pack:center;justify-content:center;opacity:.7;padding:0;position:absolute;top:50%;transform:translateY(-50%);width:2em;z-index:1}.splide__arrow svg{fill:#000;height:1.2em;width:1.2em}.splide__arrow:hover:not(:disabled){opacity:.9}.splide__arrow:disabled{opacity:.3}.splide__arrow:focus-visible{outline:3px solid #0bf;outline-offset:3px}.splide__arrow--prev{left:1em}.splide__arrow--prev svg{transform:scaleX(-1)}.splide__arrow--next{right:1em}.splide.is-focus-in .splide__arrow:focus{outline:3px solid #0bf;outline-offset:3px}.splide__pagination{bottom:.5em;left:0;padding:0 1em;position:absolute;right:0;z-index:1}.splide__pagination__page{background:#ccc;border:0;border-radius:50%;display:inline-block;height:8px;margin:3px;opacity:.7;padding:0;position:relative;transition:transform .2s linear;width:8px}.splide__pagination__page.is-active{background:#fff;transform:scale(1.4);z-index:1}.splide__pagination__page:hover{cursor:pointer;opacity:.9}.splide__pagination__page:focus-visible{outline:3px solid #0bf;outline-offset:3px}.splide.is-focus-in .splide__pagination__page:focus{outline:3px solid #0bf;outline-offset:3px}.splide__progress__bar{background:#ccc;height:3px}.splide__slide{-webkit-tap-highlight-color:transparent}.splide__slide:focus{outline:0}@supports(outline-offset:-3px){.splide__slide:focus-visible{outline:3px solid #0bf;outline-offset:-3px}}@media screen and (-ms-high-contrast:none){.splide__slide:focus-visible{border:3px solid #0bf}}@supports(outline-offset:-3px){.splide.is-focus-in .splide__slide:focus{outline:3px solid #0bf;outline-offset:-3px}}@media screen and (-ms-high-contrast:none){.splide.is-focus-in .splide__slide:focus{border:3px solid #0bf}.splide.is-focus-in .splide__track>.splide__list>.splide__slide:focus{border-color:#0bf}}.splide__toggle{cursor:pointer}.splide__toggle:focus-visible{outline:3px solid #0bf;outline-offset:3px}.splide.is-focus-in .splide__toggle:focus{outline:3px solid #0bf;outline-offset:3px}.splide__track--nav>.splide__list>.splide__slide{border:3px solid transparent;cursor:pointer}.splide__track--nav>.splide__list>.splide__slide.is-active{border:3px solid #000}.splide__arrows--rtl .splide__arrow--prev{left:auto;right:1em}.splide__arrows--rtl .splide__arrow--prev svg{transform:scaleX(1)}.splide__arrows--rtl .splide__arrow--next{left:1em;right:auto}.splide__arrows--rtl .splide__arrow--next svg{transform:scaleX(-1)}.splide__arrows--ttb .splide__arrow{left:50%;transform:translate(-50%)}.splide__arrows--ttb .splide__arrow--prev{top:1em}.splide__arrows--ttb .splide__arrow--prev svg{transform:rotate(-90deg)}.splide__arrows--ttb .splide__arrow--next{bottom:1em;top:auto}.splide__arrows--ttb .splide__arrow--next svg{transform:rotate(90deg)}.splide__pagination--ttb{bottom:0;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;left:auto;padding:1em 0;right:.5em;top:0} h1, .heading-1 { font-family: "DM Sans", sans-serif; font-size: 91px; font-weight: 700; line-height: 1.09; color: #000; letter-spacing: -0.03rem; } @media (max-width: 1024px) { h1, .heading-1 { font-size: 47px; } } @media (max-width: 768px) { h1, .heading-1 { font-size: 30px; } } @media (max-width: 576px) { h1, .heading-1 { font-size: 30px; } } h1 + *, .heading-1 + * { margin-top: 30px; } @media (max-width: 1024px) { h1 + *, .heading-1 + * { margin-top: 20px; } } @media (max-width: 768px) { h1 + *, .heading-1 + * { margin-top: 20px; } } @media (max-width: 576px) { h1 + *, .heading-1 + * { margin-top: 30px; } } @media (min-width: 1024px) and (max-width: 1680px) { h1, .heading-1 { font-size: 72px; } } h2, .heading-2 { font-family: "DM Sans", sans-serif; font-size: 62px; font-weight: 700; line-height: 1.08; color: #000; letter-spacing: -0.03rem; } @media (max-width: 1024px) { h2, .heading-2 { font-size: 32px; } } @media (max-width: 768px) { h2, .heading-2 { font-size: 32px; } } @media (max-width: 576px) { h2, .heading-2 { font-size: 25px; } } h2 + *, .heading-2 + * { margin-top: 65px; } @media (max-width: 1024px) { h2 + *, .heading-2 + * { margin-top: 35px; } } @media (max-width: 768px) { h2 + *, .heading-2 + * { margin-top: 20px; } } @media (max-width: 576px) { h2 + *, .heading-2 + * { margin-top: 20px; } } @media (min-width: 1024px) and (max-width: 1680px) { h2, .heading-2 { font-size: 50px; } } h3, .heading-3 { font-family: work-sans, sans-serif; font-size: 34px; font-weight: 400; line-height: 1.2; color: #AAACB5; letter-spacing: -0.02rem; } @media (max-width: 1024px) { h3, .heading-3 { font-size: 22px; } } @media (max-width: 768px) { h3, .heading-3 { font-size: 19px; } } @media (max-width: 576px) { h3, .heading-3 { font-size: 19px; } } h3 + *, .heading-3 + * { margin-top: 50px; } @media (max-width: 1024px) { h3 + *, .heading-3 + * { margin-top: 35px; } } @media (max-width: 768px) { h3 + *, .heading-3 + * { margin-top: 35px; } } @media (max-width: 576px) { h3 + *, .heading-3 + * { margin-top: 35px; } } @media (min-width: 1024px) and (max-width: 1680px) { h3, .heading-3 { font-size: 28px; } } h4, .heading-4 { font-family: "DM Sans", sans-serif; font-size: 30px; font-weight: 700; line-height: 1.17; color: #000; } @media (max-width: 1024px) { h4, .heading-4 { font-size: 24px; } } @media (max-width: 768px) { h4, .heading-4 { font-size: 19px; } } @media (max-width: 576px) { h4, .heading-4 { font-size: 16px; } } h4 + *, .heading-4 + * { margin-top: 20px; } @media (max-width: 1024px) { h4 + *, .heading-4 + * { margin-top: 20px; } } @media (max-width: 768px) { h4 + *, .heading-4 + * { margin-top: 20px; } } @media (max-width: 576px) { h4 + *, .heading-4 + * { margin-top: 20px; } } h4 .tag, .heading-4 .tag { transform: translateY(-6px); margin-left: 10px; } @media (max-width: 576px) { h4 .tag, .heading-4 .tag { transform: translate(0); } } h5, .heading-5 { font-family: "DM Sans", sans-serif; font-size: 14px; font-weight: 700; line-height: 1.21; color: #000; text-transform: uppercase; } @media (max-width: 1024px) { h5, .heading-5 { font-size: 14px; } } @media (max-width: 768px) { h5, .heading-5 { font-size: 14px; } } @media (max-width: 576px) { h5, .heading-5 { font-size: 14px; } } h5 + *, .heading-5 + * { margin-top: 0px; } @media (max-width: 1024px) { h5 + *, .heading-5 + * { margin-top: 0px; } } @media (max-width: 768px) { h5 + *, .heading-5 + * { margin-top: 0px; } } @media (max-width: 576px) { h5 + *, .heading-5 + * { margin-top: 0px; } } h6, .heading-6 { font-family: work-sans, sans-serif; font-size: 14px; font-weight: 700; line-height: 1.2; color: #AAACB5; text-transform: uppercase; } @media (max-width: 1024px) { h6, .heading-6 { font-size: 11px; } } @media (max-width: 768px) { h6, .heading-6 { font-size: 11px; } } @media (max-width: 576px) { h6, .heading-6 { font-size: 10px; } } h6 + *, .heading-6 + * { margin-top: 30px; } @media (max-width: 1024px) { h6 + *, .heading-6 + * { margin-top: 30px; } } @media (max-width: 768px) { h6 + *, .heading-6 + * { margin-top: 20px; } } @media (max-width: 576px) { h6 + *, .heading-6 + * { margin-top: 20px; } } h6.-less-space + *, .heading-6.-less-space + * { margin-top: 5px; } h6 + h1, .heading-6 + h1 { margin-top: 10px; } a { text-decoration: none; } p { font-family: open-sans, sans-serif; line-height: 1.55; font-size: 18px; font-weight: 400; color: #4A4A4A; } @media (max-width: 1024px) { p { font-size: 16px; } } @media (max-width: 768px) { p { font-size: 16px; } } @media (max-width: 576px) { p { font-size: 13px; } } p + * { margin-top: 45px; } @media (max-width: 1024px) { p + * { margin-top: 35px; } } @media (max-width: 768px) { p + * { margin-top: 35px; } } @media (max-width: 576px) { p + * { margin-top: 35px; } } p a:not(.button):not(.filter__remove):not(.filter__tag) { transition: color 0.2s ease-in-out; } p b { font-weight: 700; } p b + br + .button, p b + br + .filter__remove, p b + br + .filter__tag { margin-top: 10px; } p + h5 { margin-top: 25px; } p.-large { font-family: work-sans, sans-serif; font-size: 34px; line-height: 1.17; letter-spacing: -0.02rem; } @media (max-width: 1024px) { p.-large { font-size: 22px; } } @media (max-width: 576px) { p.-large { font-size: 19px; } } p + ul { margin-top: 25px; } p.-no-top-space { margin-top: 0; } p + h6 { margin-top: 50px; } @media (max-width: 1024px) { p + h6 { margin-top: 50px; } } @media (max-width: 768px) { p + h6 { margin-top: 50px; } } @media (max-width: 576px) { p + h6 { margin-top: 30px; } } @media (max-width: 375px) { p + h6 { margin-top: 30px; } } p .tag { margin-left: 8px; } small { display: block; font-size: 14px; font-weight: 800; } .section p a:not(.button):not(.filter__remove):not(.filter__tag) { transition: color 0.2s ease-in-out, border-color 0.2s ease-in-out; border-bottom: 1px solid currentColor; color: #23457c; } .section p a:not(.button):not(.filter__remove):not(.filter__tag):hover { color: #2D77C0; } .-extrabold { font-weight: 800; } .quote { display: flex; font-family: open-sans, sans-serif; line-height: 1.2; font-size: 46px; font-weight: 400; color: #000; } .quote + * { margin-top: 20px; } @media (max-width: 1024px) { .quote { font-size: 42px; } } @media (max-width: 768px) { .quote { font-size: 38px; } } @media (max-width: 576px) { .quote { font-size: 34px; } } h1, h2, h3, h4, h5, h6, .heading-1, .heading-2, .heading-3, .heading-4, .heading-5, .heading-6 { display: block; } h1.-text-left, h2.-text-left, h3.-text-left, h4.-text-left, h5.-text-left, h6.-text-left, .heading-1.-text-left, .heading-2.-text-left, .heading-3.-text-left, .heading-4.-text-left, .heading-5.-text-left, .heading-6.-text-left { text-align: center; } h1.-text-center, h2.-text-center, h3.-text-center, h4.-text-center, h5.-text-center, h6.-text-center, .heading-1.-text-center, .heading-2.-text-center, .heading-3.-text-center, .heading-4.-text-center, .heading-5.-text-center, .heading-6.-text-center { text-align: center; } h1.-text-right, h2.-text-right, h3.-text-right, h4.-text-right, h5.-text-right, h6.-text-right, .heading-1.-text-right, .heading-2.-text-right, .heading-3.-text-right, .heading-4.-text-right, .heading-5.-text-right, .heading-6.-text-right { text-align: right; } h1.-color-1, h2.-color-1, h3.-color-1, h4.-color-1, h5.-color-1, h6.-color-1, .heading-1.-color-1, .heading-2.-color-1, .heading-3.-color-1, .heading-4.-color-1, .heading-5.-color-1, .heading-6.-color-1 { color: #23457c; } h1.-color-2, h2.-color-2, h3.-color-2, h4.-color-2, h5.-color-2, h6.-color-2, .heading-1.-color-2, .heading-2.-color-2, .heading-3.-color-2, .heading-4.-color-2, .heading-5.-color-2, .heading-6.-color-2 { color: #e5e5e5; } h1.-color-3, h2.-color-3, h3.-color-3, h4.-color-3, h5.-color-3, h6.-color-3, .heading-1.-color-3, .heading-2.-color-3, .heading-3.-color-3, .heading-4.-color-3, .heading-5.-color-3, .heading-6.-color-3 { color: #AAACB5; } h1.-white, h2.-white, h3.-white, h4.-white, h5.-white, h6.-white, .heading-1.-white, .heading-2.-white, .heading-3.-white, .heading-4.-white, .heading-5.-white, .heading-6.-white { color: white; } h1.-black, h2.-black, h3.-black, h4.-black, h5.-black, h6.-black, .heading-1.-black, .heading-2.-black, .heading-3.-black, .heading-4.-black, .heading-5.-black, .heading-6.-black { color: #000; } h1 a, h1 span, h1 ul, h1 li, h2 a, h2 span, h2 ul, h2 li, h3 a, h3 span, h3 ul, h3 li, h4 a, h4 span, h4 ul, h4 li, h5 a, h5 span, h5 ul, h5 li, h6 a, h6 span, h6 ul, h6 li, .heading-1 a, .heading-1 span, .heading-1 ul, .heading-1 li, .heading-2 a, .heading-2 span, .heading-2 ul, .heading-2 li, .heading-3 a, .heading-3 span, .heading-3 ul, .heading-3 li, .heading-4 a, .heading-4 span, .heading-4 ul, .heading-4 li, .heading-5 a, .heading-5 span, .heading-5 ul, .heading-5 li, .heading-6 a, .heading-6 span, .heading-6 ul, .heading-6 li { font-size: inherit; font-weight: inherit; color: inherit; } a:not(.button):not(.filter__remove):not(.filter__tag).-text-left, span.-text-left, li.-text-left, p.-text-left, h1.-text-left, h2.-text-left, h3.-text-left, h4.-text-left, h5.-text-left, h6.-text-left { text-align: center; } a:not(.button):not(.filter__remove):not(.filter__tag).-text-center, span.-text-center, li.-text-center, p.-text-center, h1.-text-center, h2.-text-center, h3.-text-center, h4.-text-center, h5.-text-center, h6.-text-center { text-align: center; } a:not(.button):not(.filter__remove):not(.filter__tag).-text-right, span.-text-right, li.-text-right, p.-text-right, h1.-text-right, h2.-text-right, h3.-text-right, h4.-text-right, h5.-text-right, h6.-text-right { text-align: right; } a:not(.button):not(.filter__remove):not(.filter__tag).-color-1, span.-color-1, li.-color-1, p.-color-1, h1.-color-1, h2.-color-1, h3.-color-1, h4.-color-1, h5.-color-1, h6.-color-1 { color: #23457c; } a:not(.button):not(.filter__remove):not(.filter__tag).-color-2, span.-color-2, li.-color-2, p.-color-2, h1.-color-2, h2.-color-2, h3.-color-2, h4.-color-2, h5.-color-2, h6.-color-2 { color: #e5e5e5; } a:not(.button):not(.filter__remove):not(.filter__tag).-color-3, span.-color-3, li.-color-3, p.-color-3, h1.-color-3, h2.-color-3, h3.-color-3, h4.-color-3, h5.-color-3, h6.-color-3 { color: #AAACB5; } a:not(.button):not(.filter__remove):not(.filter__tag).-white, span.-white, li.-white, p.-white, h1.-white, h2.-white, h3.-white, h4.-white, h5.-white, h6.-white { color: white; } a:not(.button):not(.filter__remove):not(.filter__tag).-black, span.-black, li.-black, p.-black, h1.-black, h2.-black, h3.-black, h4.-black, h5.-black, h6.-black { color: #000; } a:not(.button):not(.filter__remove):not(.filter__tag) a, a:not(.button):not(.filter__remove):not(.filter__tag) span, a:not(.button):not(.filter__remove):not(.filter__tag) ul, a:not(.button):not(.filter__remove):not(.filter__tag) li, span a, span span, span ul, span li, li a, li span, li ul, li li, p a, p span, p ul, p li, h1 a, h1 span, h1 ul, h1 li, h2 a, h2 span, h2 ul, h2 li, h3 a, h3 span, h3 ul, h3 li, h4 a, h4 span, h4 ul, h4 li, h5 a, h5 span, h5 ul, h5 li, h6 a, h6 span, h6 ul, h6 li { font-size: inherit; font-weight: inherit; color: inherit; } ul { padding-left: 20px; } ul li { position: relative; list-style: none; } ul li::before { content: ""; position: absolute; left: -20px; } ul li::before { top: 10px; width: 8px; height: 8px; border-radius: 2px; background-color: #23457c; } ul li + li { margin-top: 10px; } ul + p { margin-top: 40px; } ol { padding-left: 15px; } ol li { padding-left: 5px; } .text .editor-js-content p b { display: block; } .editor-js-block + p { margin-top: 40px; } .gradient-title { background: -webkit-radial-gradient(#23457c, #000, #000); background-size: 100% 200%; -webkit-background-clip: text; -webkit-text-fill-color: transparent; } ::-moz-selection { background-color: rgba(181, 255, 0, 0.4); } ::selection { background-color: rgba(181, 255, 0, 0.4); } .-text-center .icon { margin-left: auto; margin-right: auto; } .-text-center .icon + h2 { margin-top: 20px; } .convert-p-to-h6 p b { font-family: work-sans, sans-serif; font-size: 14px; font-weight: 700; line-height: 1.2; color: #AAACB5; } @media (max-width: 1024px) { .convert-p-to-h6 p b { font-size: 11px; } } @media (max-width: 768px) { .convert-p-to-h6 p b { font-size: 11px; } } @media (max-width: 576px) { .convert-p-to-h6 p b { font-size: 10px; } } .convert-p-to-h6 p b + * { margin-top: 30px; } @media (max-width: 1024px) { .convert-p-to-h6 p b + * { margin-top: 30px; } } @media (max-width: 768px) { .convert-p-to-h6 p b + * { margin-top: 20px; } } @media (max-width: 576px) { .convert-p-to-h6 p b + * { margin-top: 20px; } } @keyframes bounce { 0% { transform: translateY(0); } 50% { transform: translateY(3px); } 100% { transform: translateY(0); } } @keyframes bounceRight { 0% { transform: translateX(0); } 50% { transform: translateX(3px); } 100% { transform: translateX(0); } } @keyframes intoView { 0% { opacity: 0; } 50% { opacity: 0; } 100% { opacity: 1; } } @keyframes intoViewFast { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes outView { 0% { opacity: 1; } 100% { opacity: 0; } } @keyframes slideRight { 0% { transform: translateX(200%); } 100% { transform: translateX(0); } } @keyframes slideLeft { 0% { transform: translateX(0); } 100% { transform: translateX(-200%); } } @keyframes buttonAnimation { 0% { stroke-dasharray: 1 98; stroke-dashoffset: -105; } 50% { stroke-dasharray: 80 10; stroke-dashoffset: -160; } 100% { stroke-dasharray: 1 98; stroke-dashoffset: -300; } } @keyframes arrowVertical { 0%, 100% { transform: translateY(0); opacity: 1; } 49% { transform: translateY(-25px); opacity: 1; } 50% { opacity: 0; } 51% { opacity: 1; transform: translateY(25px); } } @keyframes arrowVerticalReversed { 0%, 100% { transform: translateY(0); opacity: 1; } 49% { transform: translateY(25px); opacity: 1; } 50% { opacity: 0; } 51% { opacity: 1; transform: translateY(-25px); } } .header { position: fixed; top: 0; left: 0; z-index: 999; width: 100%; transition: transform 0.2s ease-in-out; background-color: white; z-index: 99999; transition: background-color 250ms; background-color: white; } .header .container { position: relative; display: flex; justify-content: space-between; align-items: stretch; flex-direction: row; flex-wrap: wrap; width: 100%; margin-right: auto; margin-left: auto; padding-right: 90px; padding-left: 90px; max-width: 1560px; height: 60px; display: flex; align-items: center; justify-content: space-between; } .header .container .part-1:not(.no-gutter) { width: calc(((100% - (24px * (12 - 1))) / 12) * 1 + (24px * (1 - 1))); } .header .container .part-1.no-gutter { width: calc(((100% - (0px * (12 - 1))) / 12) * 1 + (0px * (1 - 1))); } .header .container .part-2:not(.no-gutter) { width: calc(((100% - (24px * (12 - 1))) / 12) * 2 + (24px * (2 - 1))); } .header .container .part-2.no-gutter { width: calc(((100% - (0px * (12 - 1))) / 12) * 2 + (0px * (2 - 1))); } .header .container .part-3:not(.no-gutter) { width: calc(((100% - (24px * (12 - 1))) / 12) * 3 + (24px * (3 - 1))); } .header .container .part-3.no-gutter { width: calc(((100% - (0px * (12 - 1))) / 12) * 3 + (0px * (3 - 1))); } .header .container .part-4:not(.no-gutter) { width: calc(((100% - (24px * (12 - 1))) / 12) * 4 + (24px * (4 - 1))); } .header .container .part-4.no-gutter { width: calc(((100% - (0px * (12 - 1))) / 12) * 4 + (0px * (4 - 1))); } .header .container .part-5:not(.no-gutter) { width: calc(((100% - (24px * (12 - 1))) / 12) * 5 + (24px * (5 - 1))); } .header .container .part-5.no-gutter { width: calc(((100% - (0px * (12 - 1))) / 12) * 5 + (0px * (5 - 1))); } .header .container .part-6:not(.no-gutter) { width: calc(((100% - (24px * (12 - 1))) / 12) * 6 + (24px * (6 - 1))); } .header .container .part-6.no-gutter { width: calc(((100% - (0px * (12 - 1))) / 12) * 6 + (0px * (6 - 1))); } .header .container .part-7:not(.no-gutter) { width: calc(((100% - (24px * (12 - 1))) / 12) * 7 + (24px * (7 - 1))); } .header .container .part-7.no-gutter { width: calc(((100% - (0px * (12 - 1))) / 12) * 7 + (0px * (7 - 1))); } .header .container .part-8:not(.no-gutter) { width: calc(((100% - (24px * (12 - 1))) / 12) * 8 + (24px * (8 - 1))); } .header .container .part-8.no-gutter { width: calc(((100% - (0px * (12 - 1))) / 12) * 8 + (0px * (8 - 1))); } .header .container .part-9:not(.no-gutter) { width: calc(((100% - (24px * (12 - 1))) / 12) * 9 + (24px * (9 - 1))); } .header .container .part-9.no-gutter { width: calc(((100% - (0px * (12 - 1))) / 12) * 9 + (0px * (9 - 1))); } .header .container .part-10:not(.no-gutter) { width: calc(((100% - (24px * (12 - 1))) / 12) * 10 + (24px * (10 - 1))); } .header .container .part-10.no-gutter { width: calc(((100% - (0px * (12 - 1))) / 12) * 10 + (0px * (10 - 1))); } .header .container .part-11:not(.no-gutter) { width: calc(((100% - (24px * (12 - 1))) / 12) * 11 + (24px * (11 - 1))); } .header .container .part-11.no-gutter { width: calc(((100% - (0px * (12 - 1))) / 12) * 11 + (0px * (11 - 1))); } .header .container .part-12:not(.no-gutter) { width: calc(((100% - (24px * (12 - 1))) / 12) * 12 + (24px * (12 - 1))); } .header .container .part-12.no-gutter { width: calc(((100% - (0px * (12 - 1))) / 12) * 12 + (0px * (12 - 1))); } @media (max-width: 1280px) { .header .container .part-xl-1:not(.no-gutter) { width: calc(((100% - (24px * (12 - 1))) / 12) * 1 + (24px * (1 - 1))); } .header .container .part-xl-1.no-gutter { width: calc(((100% - (0px * (12 - 1))) / 12) * 1 + (0px * (1 - 1))); } .header .container .part-xl-2:not(.no-gutter) { width: calc(((100% - (24px * (12 - 1))) / 12) * 2 + (24px * (2 - 1))); } .header .container .part-xl-2.no-gutter { width: calc(((100% - (0px * (12 - 1))) / 12) * 2 + (0px * (2 - 1))); } .header .container .part-xl-3:not(.no-gutter) { width: calc(((100% - (24px * (12 - 1))) / 12) * 3 + (24px * (3 - 1))); } .header .container .part-xl-3.no-gutter { width: calc(((100% - (0px * (12 - 1))) / 12) * 3 + (0px * (3 - 1))); } .header .container .part-xl-4:not(.no-gutter) { width: calc(((100% - (24px * (12 - 1))) / 12) * 4 + (24px * (4 - 1))); } .header .container .part-xl-4.no-gutter { width: calc(((100% - (0px * (12 - 1))) / 12) * 4 + (0px * (4 - 1))); } .header .container .part-xl-5:not(.no-gutter) { width: calc(((100% - (24px * (12 - 1))) / 12) * 5 + (24px * (5 - 1))); } .header .container .part-xl-5.no-gutter { width: calc(((100% - (0px * (12 - 1))) / 12) * 5 + (0px * (5 - 1))); } .header .container .part-xl-6:not(.no-gutter) { width: calc(((100% - (24px * (12 - 1))) / 12) * 6 + (24px * (6 - 1))); } .header .container .part-xl-6.no-gutter { width: calc(((100% - (0px * (12 - 1))) / 12) * 6 + (0px * (6 - 1))); } .header .container .part-xl-7:not(.no-gutter) { width: calc(((100% - (24px * (12 - 1))) / 12) * 7 + (24px * (7 - 1))); } .header .container .part-xl-7.no-gutter { width: calc(((100% - (0px * (12 - 1))) / 12) * 7 + (0px * (7 - 1))); } .header .container .part-xl-8:not(.no-gutter) { width: calc(((100% - (24px * (12 - 1))) / 12) * 8 + (24px * (8 - 1))); } .header .container .part-xl-8.no-gutter { width: calc(((100% - (0px * (12 - 1))) / 12) * 8 + (0px * (8 - 1))); } .header .container .part-xl-9:not(.no-gutter) { width: calc(((100% - (24px * (12 - 1))) / 12) * 9 + (24px * (9 - 1))); } .header .container .part-xl-9.no-gutter { width: calc(((100% - (0px * (12 - 1))) / 12) * 9 + (0px * (9 - 1))); } .header .container .part-xl-10:not(.no-gutter) { width: calc(((100% - (24px * (12 - 1))) / 12) * 10 + (24px * (10 - 1))); } .header .container .part-xl-10.no-gutter { width: calc(((100% - (0px * (12 - 1))) / 12) * 10 + (0px * (10 - 1))); } .header .container .part-xl-11:not(.no-gutter) { width: calc(((100% - (24px * (12 - 1))) / 12) * 11 + (24px * (11 - 1))); } .header .container .part-xl-11.no-gutter { width: calc(((100% - (0px * (12 - 1))) / 12) * 11 + (0px * (11 - 1))); } .header .container .part-xl-12:not(.no-gutter) { width: calc(((100% - (24px * (12 - 1))) / 12) * 12 + (24px * (12 - 1))); } .header .container .part-xl-12.no-gutter { width: calc(((100% - (0px * (12 - 1))) / 12) * 12 + (0px * (12 - 1))); } } @media (max-width: 1024px) { .header .container .part-l-1:not(.no-gutter) { width: calc(((100% - (16px * (8 - 1))) / 8) * 1 + (16px * (1 - 1))); } .header .container .part-l-1.no-gutter { width: calc(((100% - (0px * (8 - 1))) / 8) * 1 + (0px * (1 - 1))); } .header .container .part-l-2:not(.no-gutter) { width: calc(((100% - (16px * (8 - 1))) / 8) * 2 + (16px * (2 - 1))); } .header .container .part-l-2.no-gutter { width: calc(((100% - (0px * (8 - 1))) / 8) * 2 + (0px * (2 - 1))); } .header .container .part-l-3:not(.no-gutter) { width: calc(((100% - (16px * (8 - 1))) / 8) * 3 + (16px * (3 - 1))); } .header .container .part-l-3.no-gutter { width: calc(((100% - (0px * (8 - 1))) / 8) * 3 + (0px * (3 - 1))); } .header .container .part-l-4:not(.no-gutter) { width: calc(((100% - (16px * (8 - 1))) / 8) * 4 + (16px * (4 - 1))); } .header .container .part-l-4.no-gutter { width: calc(((100% - (0px * (8 - 1))) / 8) * 4 + (0px * (4 - 1))); } .header .container .part-l-5:not(.no-gutter) { width: calc(((100% - (16px * (8 - 1))) / 8) * 5 + (16px * (5 - 1))); } .header .container .part-l-5.no-gutter { width: calc(((100% - (0px * (8 - 1))) / 8) * 5 + (0px * (5 - 1))); } .header .container .part-l-6:not(.no-gutter) { width: calc(((100% - (16px * (8 - 1))) / 8) * 6 + (16px * (6 - 1))); } .header .container .part-l-6.no-gutter { width: calc(((100% - (0px * (8 - 1))) / 8) * 6 + (0px * (6 - 1))); } .header .container .part-l-7:not(.no-gutter) { width: calc(((100% - (16px * (8 - 1))) / 8) * 7 + (16px * (7 - 1))); } .header .container .part-l-7.no-gutter { width: calc(((100% - (0px * (8 - 1))) / 8) * 7 + (0px * (7 - 1))); } .header .container .part-l-8:not(.no-gutter) { width: calc(((100% - (16px * (8 - 1))) / 8) * 8 + (16px * (8 - 1))); } .header .container .part-l-8.no-gutter { width: calc(((100% - (0px * (8 - 1))) / 8) * 8 + (0px * (8 - 1))); } } @media (max-width: 768px) { .header .container .part-m-1:not(.no-gutter) { width: calc(((100% - (14px * (8 - 1))) / 8) * 1 + (14px * (1 - 1))); } .header .container .part-m-1.no-gutter { width: calc(((100% - (0px * (8 - 1))) / 8) * 1 + (0px * (1 - 1))); } .header .container .part-m-2:not(.no-gutter) { width: calc(((100% - (14px * (8 - 1))) / 8) * 2 + (14px * (2 - 1))); } .header .container .part-m-2.no-gutter { width: calc(((100% - (0px * (8 - 1))) / 8) * 2 + (0px * (2 - 1))); } .header .container .part-m-3:not(.no-gutter) { width: calc(((100% - (14px * (8 - 1))) / 8) * 3 + (14px * (3 - 1))); } .header .container .part-m-3.no-gutter { width: calc(((100% - (0px * (8 - 1))) / 8) * 3 + (0px * (3 - 1))); } .header .container .part-m-4:not(.no-gutter) { width: calc(((100% - (14px * (8 - 1))) / 8) * 4 + (14px * (4 - 1))); } .header .container .part-m-4.no-gutter { width: calc(((100% - (0px * (8 - 1))) / 8) * 4 + (0px * (4 - 1))); } .header .container .part-m-5:not(.no-gutter) { width: calc(((100% - (14px * (8 - 1))) / 8) * 5 + (14px * (5 - 1))); } .header .container .part-m-5.no-gutter { width: calc(((100% - (0px * (8 - 1))) / 8) * 5 + (0px * (5 - 1))); } .header .container .part-m-6:not(.no-gutter) { width: calc(((100% - (14px * (8 - 1))) / 8) * 6 + (14px * (6 - 1))); } .header .container .part-m-6.no-gutter { width: calc(((100% - (0px * (8 - 1))) / 8) * 6 + (0px * (6 - 1))); } .header .container .part-m-7:not(.no-gutter) { width: calc(((100% - (14px * (8 - 1))) / 8) * 7 + (14px * (7 - 1))); } .header .container .part-m-7.no-gutter { width: calc(((100% - (0px * (8 - 1))) / 8) * 7 + (0px * (7 - 1))); } .header .container .part-m-8:not(.no-gutter) { width: calc(((100% - (14px * (8 - 1))) / 8) * 8 + (14px * (8 - 1))); } .header .container .part-m-8.no-gutter { width: calc(((100% - (0px * (8 - 1))) / 8) * 8 + (0px * (8 - 1))); } } @media (max-width: 576px) { .header .container .part-s-1:not(.no-gutter) { width: calc(((100% - (10px * (4 - 1))) / 4) * 1 + (10px * (1 - 1))); } .header .container .part-s-1.no-gutter { width: calc(((100% - (0px * (4 - 1))) / 4) * 1 + (0px * (1 - 1))); } .header .container .part-s-2:not(.no-gutter) { width: calc(((100% - (10px * (4 - 1))) / 4) * 2 + (10px * (2 - 1))); } .header .container .part-s-2.no-gutter { width: calc(((100% - (0px * (4 - 1))) / 4) * 2 + (0px * (2 - 1))); } .header .container .part-s-3:not(.no-gutter) { width: calc(((100% - (10px * (4 - 1))) / 4) * 3 + (10px * (3 - 1))); } .header .container .part-s-3.no-gutter { width: calc(((100% - (0px * (4 - 1))) / 4) * 3 + (0px * (3 - 1))); } .header .container .part-s-4:not(.no-gutter) { width: calc(((100% - (10px * (4 - 1))) / 4) * 4 + (10px * (4 - 1))); } .header .container .part-s-4.no-gutter { width: calc(((100% - (0px * (4 - 1))) / 4) * 4 + (0px * (4 - 1))); } } @media (max-width: 375px) { .header .container .part-xs-1:not(.no-gutter) { width: calc(((100% - (10px * (4 - 1))) / 4) * 1 + (10px * (1 - 1))); } .header .container .part-xs-1.no-gutter { width: calc(((100% - (0px * (4 - 1))) / 4) * 1 + (0px * (1 - 1))); } .header .container .part-xs-2:not(.no-gutter) { width: calc(((100% - (10px * (4 - 1))) / 4) * 2 + (10px * (2 - 1))); } .header .container .part-xs-2.no-gutter { width: calc(((100% - (0px * (4 - 1))) / 4) * 2 + (0px * (2 - 1))); } .header .container .part-xs-3:not(.no-gutter) { width: calc(((100% - (10px * (4 - 1))) / 4) * 3 + (10px * (3 - 1))); } .header .container .part-xs-3.no-gutter { width: calc(((100% - (0px * (4 - 1))) / 4) * 3 + (0px * (3 - 1))); } .header .container .part-xs-4:not(.no-gutter) { width: calc(((100% - (10px * (4 - 1))) / 4) * 4 + (10px * (4 - 1))); } .header .container .part-xs-4.no-gutter { width: calc(((100% - (0px * (4 - 1))) / 4) * 4 + (0px * (4 - 1))); } } .header .container .part-top-0 { margin-top: 0px; } .header .container .part-left-0 { margin-left: 0px; } .header .container .part-right-0 { margin-right: 0px; } .header .container .part-bottom-0 { margin-bottom: calc(0px + 50px); } .header .container .part-top-1 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 1 + (24px * (1 - 1))); } .header .container .part-left-1 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 1 + (24px * (1 - 1))); } .header .container .part-right-1 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 1 + (24px * (1 - 1))); } .header .container .part-bottom-1 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 1 + (24px * (1 - 1))) + 50px); } .header .container .part-top-2 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 2 + (24px * (2 - 1))); } .header .container .part-left-2 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 2 + (24px * (2 - 1))); } .header .container .part-right-2 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 2 + (24px * (2 - 1))); } .header .container .part-bottom-2 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 2 + (24px * (2 - 1))) + 50px); } .header .container .part-top-3 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 3 + (24px * (3 - 1))); } .header .container .part-left-3 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 3 + (24px * (3 - 1))); } .header .container .part-right-3 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 3 + (24px * (3 - 1))); } .header .container .part-bottom-3 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 3 + (24px * (3 - 1))) + 50px); } .header .container .part-top-4 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 4 + (24px * (4 - 1))); } .header .container .part-left-4 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 4 + (24px * (4 - 1))); } .header .container .part-right-4 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 4 + (24px * (4 - 1))); } .header .container .part-bottom-4 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 4 + (24px * (4 - 1))) + 50px); } .header .container .part-top-5 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 5 + (24px * (5 - 1))); } .header .container .part-left-5 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 5 + (24px * (5 - 1))); } .header .container .part-right-5 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 5 + (24px * (5 - 1))); } .header .container .part-bottom-5 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 5 + (24px * (5 - 1))) + 50px); } .header .container .part-top-6 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 6 + (24px * (6 - 1))); } .header .container .part-left-6 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 6 + (24px * (6 - 1))); } .header .container .part-right-6 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 6 + (24px * (6 - 1))); } .header .container .part-bottom-6 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 6 + (24px * (6 - 1))) + 50px); } .header .container .part-top-7 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 7 + (24px * (7 - 1))); } .header .container .part-left-7 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 7 + (24px * (7 - 1))); } .header .container .part-right-7 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 7 + (24px * (7 - 1))); } .header .container .part-bottom-7 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 7 + (24px * (7 - 1))) + 50px); } .header .container .part-top-8 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 8 + (24px * (8 - 1))); } .header .container .part-left-8 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 8 + (24px * (8 - 1))); } .header .container .part-right-8 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 8 + (24px * (8 - 1))); } .header .container .part-bottom-8 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 8 + (24px * (8 - 1))) + 50px); } .header .container .part-top-9 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 9 + (24px * (9 - 1))); } .header .container .part-left-9 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 9 + (24px * (9 - 1))); } .header .container .part-right-9 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 9 + (24px * (9 - 1))); } .header .container .part-bottom-9 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 9 + (24px * (9 - 1))) + 50px); } .header .container .part-top-10 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 10 + (24px * (10 - 1))); } .header .container .part-left-10 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 10 + (24px * (10 - 1))); } .header .container .part-right-10 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 10 + (24px * (10 - 1))); } .header .container .part-bottom-10 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 10 + (24px * (10 - 1))) + 50px); } .header .container .part-top-11 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 11 + (24px * (11 - 1))); } .header .container .part-left-11 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 11 + (24px * (11 - 1))); } .header .container .part-right-11 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 11 + (24px * (11 - 1))); } .header .container .part-bottom-11 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 11 + (24px * (11 - 1))) + 50px); } .header .container .part-top-12 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 12 + (24px * (12 - 1))); } .header .container .part-left-12 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 12 + (24px * (12 - 1))); } .header .container .part-right-12 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 12 + (24px * (12 - 1))); } .header .container .part-bottom-12 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 12 + (24px * (12 - 1))) + 50px); } @media (max-width: 1024px) { .header .container .part-top-l-0 { margin-top: 0px; } .header .container .part-left-l-0 { margin-left: 0px; } .header .container .part-right-l-0 { margin-right: 0px; } .header .container .part-bottom-l-0 { margin-bottom: calc(0px + 50px); } .header .container .part-top-l-1 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 1 + (24px * (1 - 1))); } .header .container .part-left-l-1 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 1 + (24px * (1 - 1))); } .header .container .part-right-l-1 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 1 + (24px * (1 - 1))); } .header .container .part-bottom-l-1 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 1 + (24px * (1 - 1))) + 50px); } .header .container .part-top-l-2 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 2 + (24px * (2 - 1))); } .header .container .part-left-l-2 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 2 + (24px * (2 - 1))); } .header .container .part-right-l-2 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 2 + (24px * (2 - 1))); } .header .container .part-bottom-l-2 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 2 + (24px * (2 - 1))) + 50px); } .header .container .part-top-l-3 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 3 + (24px * (3 - 1))); } .header .container .part-left-l-3 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 3 + (24px * (3 - 1))); } .header .container .part-right-l-3 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 3 + (24px * (3 - 1))); } .header .container .part-bottom-l-3 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 3 + (24px * (3 - 1))) + 50px); } .header .container .part-top-l-4 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 4 + (24px * (4 - 1))); } .header .container .part-left-l-4 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 4 + (24px * (4 - 1))); } .header .container .part-right-l-4 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 4 + (24px * (4 - 1))); } .header .container .part-bottom-l-4 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 4 + (24px * (4 - 1))) + 50px); } .header .container .part-top-l-5 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 5 + (24px * (5 - 1))); } .header .container .part-left-l-5 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 5 + (24px * (5 - 1))); } .header .container .part-right-l-5 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 5 + (24px * (5 - 1))); } .header .container .part-bottom-l-5 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 5 + (24px * (5 - 1))) + 50px); } .header .container .part-top-l-6 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 6 + (24px * (6 - 1))); } .header .container .part-left-l-6 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 6 + (24px * (6 - 1))); } .header .container .part-right-l-6 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 6 + (24px * (6 - 1))); } .header .container .part-bottom-l-6 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 6 + (24px * (6 - 1))) + 50px); } .header .container .part-top-l-7 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 7 + (24px * (7 - 1))); } .header .container .part-left-l-7 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 7 + (24px * (7 - 1))); } .header .container .part-right-l-7 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 7 + (24px * (7 - 1))); } .header .container .part-bottom-l-7 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 7 + (24px * (7 - 1))) + 50px); } .header .container .part-top-l-8 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 8 + (24px * (8 - 1))); } .header .container .part-left-l-8 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 8 + (24px * (8 - 1))); } .header .container .part-right-l-8 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 8 + (24px * (8 - 1))); } .header .container .part-bottom-l-8 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 8 + (24px * (8 - 1))) + 50px); } .header .container .part-top-l-9 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 9 + (24px * (9 - 1))); } .header .container .part-left-l-9 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 9 + (24px * (9 - 1))); } .header .container .part-right-l-9 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 9 + (24px * (9 - 1))); } .header .container .part-bottom-l-9 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 9 + (24px * (9 - 1))) + 50px); } .header .container .part-top-l-10 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 10 + (24px * (10 - 1))); } .header .container .part-left-l-10 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 10 + (24px * (10 - 1))); } .header .container .part-right-l-10 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 10 + (24px * (10 - 1))); } .header .container .part-bottom-l-10 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 10 + (24px * (10 - 1))) + 50px); } .header .container .part-top-l-11 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 11 + (24px * (11 - 1))); } .header .container .part-left-l-11 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 11 + (24px * (11 - 1))); } .header .container .part-right-l-11 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 11 + (24px * (11 - 1))); } .header .container .part-bottom-l-11 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 11 + (24px * (11 - 1))) + 50px); } .header .container .part-top-l-12 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 12 + (24px * (12 - 1))); } .header .container .part-left-l-12 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 12 + (24px * (12 - 1))); } .header .container .part-right-l-12 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 12 + (24px * (12 - 1))); } .header .container .part-bottom-l-12 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 12 + (24px * (12 - 1))) + 50px); } } @media (max-width: 768px) { .header .container .part-top-m-0 { margin-top: 0px; } .header .container .part-left-m-0 { margin-left: 0px; } .header .container .part-right-m-0 { margin-right: 0px; } .header .container .part-bottom-m-0 { margin-bottom: calc(0px + 50px); } .header .container .part-top-m-1 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 1 + (24px * (1 - 1))); } .header .container .part-left-m-1 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 1 + (24px * (1 - 1))); } .header .container .part-right-m-1 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 1 + (24px * (1 - 1))); } .header .container .part-bottom-m-1 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 1 + (24px * (1 - 1))) + 50px); } .header .container .part-top-m-2 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 2 + (24px * (2 - 1))); } .header .container .part-left-m-2 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 2 + (24px * (2 - 1))); } .header .container .part-right-m-2 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 2 + (24px * (2 - 1))); } .header .container .part-bottom-m-2 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 2 + (24px * (2 - 1))) + 50px); } .header .container .part-top-m-3 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 3 + (24px * (3 - 1))); } .header .container .part-left-m-3 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 3 + (24px * (3 - 1))); } .header .container .part-right-m-3 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 3 + (24px * (3 - 1))); } .header .container .part-bottom-m-3 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 3 + (24px * (3 - 1))) + 50px); } .header .container .part-top-m-4 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 4 + (24px * (4 - 1))); } .header .container .part-left-m-4 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 4 + (24px * (4 - 1))); } .header .container .part-right-m-4 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 4 + (24px * (4 - 1))); } .header .container .part-bottom-m-4 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 4 + (24px * (4 - 1))) + 50px); } .header .container .part-top-m-5 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 5 + (24px * (5 - 1))); } .header .container .part-left-m-5 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 5 + (24px * (5 - 1))); } .header .container .part-right-m-5 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 5 + (24px * (5 - 1))); } .header .container .part-bottom-m-5 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 5 + (24px * (5 - 1))) + 50px); } .header .container .part-top-m-6 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 6 + (24px * (6 - 1))); } .header .container .part-left-m-6 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 6 + (24px * (6 - 1))); } .header .container .part-right-m-6 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 6 + (24px * (6 - 1))); } .header .container .part-bottom-m-6 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 6 + (24px * (6 - 1))) + 50px); } .header .container .part-top-m-7 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 7 + (24px * (7 - 1))); } .header .container .part-left-m-7 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 7 + (24px * (7 - 1))); } .header .container .part-right-m-7 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 7 + (24px * (7 - 1))); } .header .container .part-bottom-m-7 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 7 + (24px * (7 - 1))) + 50px); } .header .container .part-top-m-8 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 8 + (24px * (8 - 1))); } .header .container .part-left-m-8 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 8 + (24px * (8 - 1))); } .header .container .part-right-m-8 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 8 + (24px * (8 - 1))); } .header .container .part-bottom-m-8 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 8 + (24px * (8 - 1))) + 50px); } .header .container .part-top-m-9 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 9 + (24px * (9 - 1))); } .header .container .part-left-m-9 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 9 + (24px * (9 - 1))); } .header .container .part-right-m-9 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 9 + (24px * (9 - 1))); } .header .container .part-bottom-m-9 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 9 + (24px * (9 - 1))) + 50px); } .header .container .part-top-m-10 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 10 + (24px * (10 - 1))); } .header .container .part-left-m-10 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 10 + (24px * (10 - 1))); } .header .container .part-right-m-10 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 10 + (24px * (10 - 1))); } .header .container .part-bottom-m-10 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 10 + (24px * (10 - 1))) + 50px); } .header .container .part-top-m-11 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 11 + (24px * (11 - 1))); } .header .container .part-left-m-11 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 11 + (24px * (11 - 1))); } .header .container .part-right-m-11 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 11 + (24px * (11 - 1))); } .header .container .part-bottom-m-11 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 11 + (24px * (11 - 1))) + 50px); } .header .container .part-top-m-12 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 12 + (24px * (12 - 1))); } .header .container .part-left-m-12 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 12 + (24px * (12 - 1))); } .header .container .part-right-m-12 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 12 + (24px * (12 - 1))); } .header .container .part-bottom-m-12 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 12 + (24px * (12 - 1))) + 50px); } } @media (max-width: 576px) { .header .container .part-top-s-0 { margin-top: 0px; } .header .container .part-left-s-0 { margin-left: 0px; } .header .container .part-right-s-0 { margin-right: 0px; } .header .container .part-bottom-s-0 { margin-bottom: calc(0px + 30px); } .header .container .part-top-s-1 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 1 + (24px * (1 - 1))); } .header .container .part-left-s-1 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 1 + (24px * (1 - 1))); } .header .container .part-right-s-1 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 1 + (24px * (1 - 1))); } .header .container .part-bottom-s-1 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 1 + (24px * (1 - 1))) + 30px); } .header .container .part-top-s-2 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 2 + (24px * (2 - 1))); } .header .container .part-left-s-2 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 2 + (24px * (2 - 1))); } .header .container .part-right-s-2 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 2 + (24px * (2 - 1))); } .header .container .part-bottom-s-2 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 2 + (24px * (2 - 1))) + 30px); } .header .container .part-top-s-3 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 3 + (24px * (3 - 1))); } .header .container .part-left-s-3 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 3 + (24px * (3 - 1))); } .header .container .part-right-s-3 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 3 + (24px * (3 - 1))); } .header .container .part-bottom-s-3 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 3 + (24px * (3 - 1))) + 30px); } .header .container .part-top-s-4 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 4 + (24px * (4 - 1))); } .header .container .part-left-s-4 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 4 + (24px * (4 - 1))); } .header .container .part-right-s-4 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 4 + (24px * (4 - 1))); } .header .container .part-bottom-s-4 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 4 + (24px * (4 - 1))) + 30px); } .header .container .part-top-s-5 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 5 + (24px * (5 - 1))); } .header .container .part-left-s-5 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 5 + (24px * (5 - 1))); } .header .container .part-right-s-5 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 5 + (24px * (5 - 1))); } .header .container .part-bottom-s-5 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 5 + (24px * (5 - 1))) + 30px); } .header .container .part-top-s-6 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 6 + (24px * (6 - 1))); } .header .container .part-left-s-6 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 6 + (24px * (6 - 1))); } .header .container .part-right-s-6 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 6 + (24px * (6 - 1))); } .header .container .part-bottom-s-6 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 6 + (24px * (6 - 1))) + 30px); } .header .container .part-top-s-7 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 7 + (24px * (7 - 1))); } .header .container .part-left-s-7 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 7 + (24px * (7 - 1))); } .header .container .part-right-s-7 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 7 + (24px * (7 - 1))); } .header .container .part-bottom-s-7 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 7 + (24px * (7 - 1))) + 30px); } .header .container .part-top-s-8 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 8 + (24px * (8 - 1))); } .header .container .part-left-s-8 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 8 + (24px * (8 - 1))); } .header .container .part-right-s-8 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 8 + (24px * (8 - 1))); } .header .container .part-bottom-s-8 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 8 + (24px * (8 - 1))) + 30px); } .header .container .part-top-s-9 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 9 + (24px * (9 - 1))); } .header .container .part-left-s-9 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 9 + (24px * (9 - 1))); } .header .container .part-right-s-9 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 9 + (24px * (9 - 1))); } .header .container .part-bottom-s-9 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 9 + (24px * (9 - 1))) + 30px); } .header .container .part-top-s-10 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 10 + (24px * (10 - 1))); } .header .container .part-left-s-10 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 10 + (24px * (10 - 1))); } .header .container .part-right-s-10 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 10 + (24px * (10 - 1))); } .header .container .part-bottom-s-10 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 10 + (24px * (10 - 1))) + 30px); } .header .container .part-top-s-11 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 11 + (24px * (11 - 1))); } .header .container .part-left-s-11 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 11 + (24px * (11 - 1))); } .header .container .part-right-s-11 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 11 + (24px * (11 - 1))); } .header .container .part-bottom-s-11 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 11 + (24px * (11 - 1))) + 30px); } .header .container .part-top-s-12 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 12 + (24px * (12 - 1))); } .header .container .part-left-s-12 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 12 + (24px * (12 - 1))); } .header .container .part-right-s-12 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 12 + (24px * (12 - 1))); } .header .container .part-bottom-s-12 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 12 + (24px * (12 - 1))) + 30px); } } @media (max-width: 375px) { .header .container .part-top-xs-0 { margin-top: 0px; } .header .container .part-left-xs-0 { margin-left: 0px; } .header .container .part-right-xs-0 { margin-right: 0px; } .header .container .part-bottom-xs-0 { margin-bottom: calc(0px + 30px); } .header .container .part-top-xs-1 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 1 + (24px * (1 - 1))); } .header .container .part-left-xs-1 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 1 + (24px * (1 - 1))); } .header .container .part-right-xs-1 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 1 + (24px * (1 - 1))); } .header .container .part-bottom-xs-1 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 1 + (24px * (1 - 1))) + 30px); } .header .container .part-top-xs-2 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 2 + (24px * (2 - 1))); } .header .container .part-left-xs-2 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 2 + (24px * (2 - 1))); } .header .container .part-right-xs-2 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 2 + (24px * (2 - 1))); } .header .container .part-bottom-xs-2 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 2 + (24px * (2 - 1))) + 30px); } .header .container .part-top-xs-3 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 3 + (24px * (3 - 1))); } .header .container .part-left-xs-3 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 3 + (24px * (3 - 1))); } .header .container .part-right-xs-3 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 3 + (24px * (3 - 1))); } .header .container .part-bottom-xs-3 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 3 + (24px * (3 - 1))) + 30px); } .header .container .part-top-xs-4 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 4 + (24px * (4 - 1))); } .header .container .part-left-xs-4 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 4 + (24px * (4 - 1))); } .header .container .part-right-xs-4 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 4 + (24px * (4 - 1))); } .header .container .part-bottom-xs-4 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 4 + (24px * (4 - 1))) + 30px); } .header .container .part-top-xs-5 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 5 + (24px * (5 - 1))); } .header .container .part-left-xs-5 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 5 + (24px * (5 - 1))); } .header .container .part-right-xs-5 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 5 + (24px * (5 - 1))); } .header .container .part-bottom-xs-5 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 5 + (24px * (5 - 1))) + 30px); } .header .container .part-top-xs-6 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 6 + (24px * (6 - 1))); } .header .container .part-left-xs-6 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 6 + (24px * (6 - 1))); } .header .container .part-right-xs-6 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 6 + (24px * (6 - 1))); } .header .container .part-bottom-xs-6 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 6 + (24px * (6 - 1))) + 30px); } .header .container .part-top-xs-7 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 7 + (24px * (7 - 1))); } .header .container .part-left-xs-7 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 7 + (24px * (7 - 1))); } .header .container .part-right-xs-7 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 7 + (24px * (7 - 1))); } .header .container .part-bottom-xs-7 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 7 + (24px * (7 - 1))) + 30px); } .header .container .part-top-xs-8 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 8 + (24px * (8 - 1))); } .header .container .part-left-xs-8 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 8 + (24px * (8 - 1))); } .header .container .part-right-xs-8 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 8 + (24px * (8 - 1))); } .header .container .part-bottom-xs-8 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 8 + (24px * (8 - 1))) + 30px); } .header .container .part-top-xs-9 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 9 + (24px * (9 - 1))); } .header .container .part-left-xs-9 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 9 + (24px * (9 - 1))); } .header .container .part-right-xs-9 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 9 + (24px * (9 - 1))); } .header .container .part-bottom-xs-9 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 9 + (24px * (9 - 1))) + 30px); } .header .container .part-top-xs-10 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 10 + (24px * (10 - 1))); } .header .container .part-left-xs-10 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 10 + (24px * (10 - 1))); } .header .container .part-right-xs-10 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 10 + (24px * (10 - 1))); } .header .container .part-bottom-xs-10 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 10 + (24px * (10 - 1))) + 30px); } .header .container .part-top-xs-11 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 11 + (24px * (11 - 1))); } .header .container .part-left-xs-11 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 11 + (24px * (11 - 1))); } .header .container .part-right-xs-11 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 11 + (24px * (11 - 1))); } .header .container .part-bottom-xs-11 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 11 + (24px * (11 - 1))) + 30px); } .header .container .part-top-xs-12 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 12 + (24px * (12 - 1))); } .header .container .part-left-xs-12 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 12 + (24px * (12 - 1))); } .header .container .part-right-xs-12 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 12 + (24px * (12 - 1))); } .header .container .part-bottom-xs-12 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 12 + (24px * (12 - 1))) + 30px); } } @media (max-width: 375px) { .header .container .part-xs-0 { display: none; } } @media (max-width: 576px) { .header .container .part-s-0 { display: none; } } @media (max-width: 768px) { .header .container .part-m-0 { display: none; } } @media (max-width: 1024px) { .header .container .part-l-0 { display: none; } } @media (max-width: 1280px) { .header .container .part-xl-0 { display: none; } } .header .container [class*=part].-justify-start { display: flex; justify-content: flex-start; } .header .container [class*=part].-justify-center { display: flex; justify-content: center; } .header .container [class*=part].-justify-end { display: flex; justify-content: flex-end; } .header .container [class*=part].-align-start { display: flex; align-items: flex-start; } .header .container [class*=part].-align-center { display: flex; align-items: center; } .header .container [class*=part].-align-end { display: flex; align-items: flex-end; } .header .container [class*=part].-text-left { text-align: left; } .header .container [class*=part].-text-center { text-align: center; } .header .container [class*=part].-text-right { text-align: right; } @media (max-width: 768px) { .header .container { padding-right: 45px; padding-left: 45px; } } @media (max-width: 768px) { .header .container { height: 60px; } } .header .container a:not(.button):not(.filter__remove):not(.filter__tag):not(.submenu__item), .header .container span:not(.submenu__item), .header .container li:not(.submenu__item), .header .container p:not(.submenu__item), .header .container h1:not(.submenu__item), .header .container h2:not(.submenu__item), .header .container h3:not(.submenu__item), .header .container h4:not(.submenu__item), .header .container h5:not(.submenu__item), .header .container h6:not(.submenu__item) { color: white; } .header__nav { display: flex; height: 100%; } @media (max-width: 1395px) { .header__nav { display: none; } } .header__item { display: flex; align-items: center; height: 100%; } .header__item + .header__item { margin-left: 25px; } .header::after { content: ""; position: absolute; bottom: 0; left: 0; right: 0; z-index: 1; display: block; width: calc(1560px - 180px); margin-left: auto; margin-right: auto; height: 1px; margin: 0 auto; background-color: #DADDDF; } @media (max-width: 1560px) { .header::after { width: calc(100% - 180px); } } @media (max-width: 768px) { .header::after { width: calc(100% - 90px); } } @media (max-width: 576px) { .header::after { width: calc(100% - 30px); } } .header .button, .header .filter__remove, .header .filter__tag { margin-top: 0; } .header .container { transition: 0ms; transition-delay: 0s; background-color: white; } .header .container svg:not(.logo) { width: 10px; } .header .container svg:not(.logo) path, .header .container svg:not(.logo) polygon { stroke: #AAACB5; } @media (max-width: 576px) { .header .container { padding-left: 15px; padding-right: 15px; } } .header .container [class*=part] { height: 100%; } .header__logo { display: flex; height: 100%; width: 144px; } .header__logo .logo { display: block; width: 100% !important; } .header__logo .logo rect, .header__logo .logo circle, .header__logo .logo ellipse, .header__logo .logo path, .header__logo .logo polygon, .header__logo .logo polyline { fill: black; } .header__switch { display: flex; align-items: center; justify-content: flex-end; pointer-events: none; } .header__switch * { pointer-events: auto; } .header__switch .button, .header__switch .filter__remove, .header__switch .filter__tag { margin-left: 30px; } @media (max-width: 1600px) { .header__switch .button, .header__switch .filter__remove, .header__switch .filter__tag { margin-left: 20px; } } @media (max-width: 1395px) { .header__switch .button, .header__switch .filter__remove, .header__switch .filter__tag { display: none; } } .header__nav { padding-left: 30px; } @media (max-width: 1600px) and (min-width: 1395px) { .header__nav { padding-left: 0; } } @media (max-width: 1600px) and (min-width: 1395px) { .header__left { width: auto !important; } } * { box-sizing: border-box; margin: 0; padding: 0; -webkit-font-smoothing: antialiased; scroll-behavior: smooth; } body { display: flex; flex-direction: column; min-height: 100vh; font-family: open-sans, sans-serif; line-height: 1.55; font-size: 18px; font-weight: 400; color: #4A4A4A; overflow-x: hidden; overflow-y: auto; } body main { flex: 1 0 auto; } body footer { flex-shrink: 0; } @media (max-width: 1024px) { body { font-size: 16px; } } @media (max-width: 768px) { body { font-size: 16px; } } @media (max-width: 576px) { body { font-size: 13px; } } body + * { margin-top: 45px; } @media (max-width: 1024px) { body + * { margin-top: 35px; } } @media (max-width: 768px) { body + * { margin-top: 35px; } } @media (max-width: 576px) { body + * { margin-top: 35px; } } body img, body video, body svg { width: 100%; max-width: 100%; height: auto; } body img, body video { display: block; } body #app { overflow-x: hidden; overflow-y: auto; } body #app:has(.-left-bordered):has(.--empty) strong { font-size: 30px; color: #000; } @media (max-width: 576px) { body main .-hide-s { display: none; } } @media (max-width: 768px) { body main .-hide-m { display: none; } } body main .basic-icon { width: 54px; } @media (max-width: 1024px) { body main .basic-icon { width: 40px; } } @media (max-width: 576px) { body main .basic-icon { width: 35px; } } body main .basic-icon + * { margin-top: 20px; } body.-no-overflow main { overflow-y: unset; overflow-x: unset; } body .fancybox__container { z-index: 99999; } .footer { background-color: white; } .footer .container { position: relative; display: flex; justify-content: space-between; align-items: stretch; flex-direction: row; flex-wrap: wrap; width: 100%; margin-right: auto; margin-left: auto; padding-right: 90px; padding-left: 90px; max-width: 1560px; } .footer .container .part-1:not(.no-gutter) { width: calc(((100% - (24px * (12 - 1))) / 12) * 1 + (24px * (1 - 1))); } .footer .container .part-1.no-gutter { width: calc(((100% - (0px * (12 - 1))) / 12) * 1 + (0px * (1 - 1))); } .footer .container .part-2:not(.no-gutter) { width: calc(((100% - (24px * (12 - 1))) / 12) * 2 + (24px * (2 - 1))); } .footer .container .part-2.no-gutter { width: calc(((100% - (0px * (12 - 1))) / 12) * 2 + (0px * (2 - 1))); } .footer .container .part-3:not(.no-gutter) { width: calc(((100% - (24px * (12 - 1))) / 12) * 3 + (24px * (3 - 1))); } .footer .container .part-3.no-gutter { width: calc(((100% - (0px * (12 - 1))) / 12) * 3 + (0px * (3 - 1))); } .footer .container .part-4:not(.no-gutter) { width: calc(((100% - (24px * (12 - 1))) / 12) * 4 + (24px * (4 - 1))); } .footer .container .part-4.no-gutter { width: calc(((100% - (0px * (12 - 1))) / 12) * 4 + (0px * (4 - 1))); } .footer .container .part-5:not(.no-gutter) { width: calc(((100% - (24px * (12 - 1))) / 12) * 5 + (24px * (5 - 1))); } .footer .container .part-5.no-gutter { width: calc(((100% - (0px * (12 - 1))) / 12) * 5 + (0px * (5 - 1))); } .footer .container .part-6:not(.no-gutter) { width: calc(((100% - (24px * (12 - 1))) / 12) * 6 + (24px * (6 - 1))); } .footer .container .part-6.no-gutter { width: calc(((100% - (0px * (12 - 1))) / 12) * 6 + (0px * (6 - 1))); } .footer .container .part-7:not(.no-gutter) { width: calc(((100% - (24px * (12 - 1))) / 12) * 7 + (24px * (7 - 1))); } .footer .container .part-7.no-gutter { width: calc(((100% - (0px * (12 - 1))) / 12) * 7 + (0px * (7 - 1))); } .footer .container .part-8:not(.no-gutter) { width: calc(((100% - (24px * (12 - 1))) / 12) * 8 + (24px * (8 - 1))); } .footer .container .part-8.no-gutter { width: calc(((100% - (0px * (12 - 1))) / 12) * 8 + (0px * (8 - 1))); } .footer .container .part-9:not(.no-gutter) { width: calc(((100% - (24px * (12 - 1))) / 12) * 9 + (24px * (9 - 1))); } .footer .container .part-9.no-gutter { width: calc(((100% - (0px * (12 - 1))) / 12) * 9 + (0px * (9 - 1))); } .footer .container .part-10:not(.no-gutter) { width: calc(((100% - (24px * (12 - 1))) / 12) * 10 + (24px * (10 - 1))); } .footer .container .part-10.no-gutter { width: calc(((100% - (0px * (12 - 1))) / 12) * 10 + (0px * (10 - 1))); } .footer .container .part-11:not(.no-gutter) { width: calc(((100% - (24px * (12 - 1))) / 12) * 11 + (24px * (11 - 1))); } .footer .container .part-11.no-gutter { width: calc(((100% - (0px * (12 - 1))) / 12) * 11 + (0px * (11 - 1))); } .footer .container .part-12:not(.no-gutter) { width: calc(((100% - (24px * (12 - 1))) / 12) * 12 + (24px * (12 - 1))); } .footer .container .part-12.no-gutter { width: calc(((100% - (0px * (12 - 1))) / 12) * 12 + (0px * (12 - 1))); } @media (max-width: 1280px) { .footer .container .part-xl-1:not(.no-gutter) { width: calc(((100% - (24px * (12 - 1))) / 12) * 1 + (24px * (1 - 1))); } .footer .container .part-xl-1.no-gutter { width: calc(((100% - (0px * (12 - 1))) / 12) * 1 + (0px * (1 - 1))); } .footer .container .part-xl-2:not(.no-gutter) { width: calc(((100% - (24px * (12 - 1))) / 12) * 2 + (24px * (2 - 1))); } .footer .container .part-xl-2.no-gutter { width: calc(((100% - (0px * (12 - 1))) / 12) * 2 + (0px * (2 - 1))); } .footer .container .part-xl-3:not(.no-gutter) { width: calc(((100% - (24px * (12 - 1))) / 12) * 3 + (24px * (3 - 1))); } .footer .container .part-xl-3.no-gutter { width: calc(((100% - (0px * (12 - 1))) / 12) * 3 + (0px * (3 - 1))); } .footer .container .part-xl-4:not(.no-gutter) { width: calc(((100% - (24px * (12 - 1))) / 12) * 4 + (24px * (4 - 1))); } .footer .container .part-xl-4.no-gutter { width: calc(((100% - (0px * (12 - 1))) / 12) * 4 + (0px * (4 - 1))); } .footer .container .part-xl-5:not(.no-gutter) { width: calc(((100% - (24px * (12 - 1))) / 12) * 5 + (24px * (5 - 1))); } .footer .container .part-xl-5.no-gutter { width: calc(((100% - (0px * (12 - 1))) / 12) * 5 + (0px * (5 - 1))); } .footer .container .part-xl-6:not(.no-gutter) { width: calc(((100% - (24px * (12 - 1))) / 12) * 6 + (24px * (6 - 1))); } .footer .container .part-xl-6.no-gutter { width: calc(((100% - (0px * (12 - 1))) / 12) * 6 + (0px * (6 - 1))); } .footer .container .part-xl-7:not(.no-gutter) { width: calc(((100% - (24px * (12 - 1))) / 12) * 7 + (24px * (7 - 1))); } .footer .container .part-xl-7.no-gutter { width: calc(((100% - (0px * (12 - 1))) / 12) * 7 + (0px * (7 - 1))); } .footer .container .part-xl-8:not(.no-gutter) { width: calc(((100% - (24px * (12 - 1))) / 12) * 8 + (24px * (8 - 1))); } .footer .container .part-xl-8.no-gutter { width: calc(((100% - (0px * (12 - 1))) / 12) * 8 + (0px * (8 - 1))); } .footer .container .part-xl-9:not(.no-gutter) { width: calc(((100% - (24px * (12 - 1))) / 12) * 9 + (24px * (9 - 1))); } .footer .container .part-xl-9.no-gutter { width: calc(((100% - (0px * (12 - 1))) / 12) * 9 + (0px * (9 - 1))); } .footer .container .part-xl-10:not(.no-gutter) { width: calc(((100% - (24px * (12 - 1))) / 12) * 10 + (24px * (10 - 1))); } .footer .container .part-xl-10.no-gutter { width: calc(((100% - (0px * (12 - 1))) / 12) * 10 + (0px * (10 - 1))); } .footer .container .part-xl-11:not(.no-gutter) { width: calc(((100% - (24px * (12 - 1))) / 12) * 11 + (24px * (11 - 1))); } .footer .container .part-xl-11.no-gutter { width: calc(((100% - (0px * (12 - 1))) / 12) * 11 + (0px * (11 - 1))); } .footer .container .part-xl-12:not(.no-gutter) { width: calc(((100% - (24px * (12 - 1))) / 12) * 12 + (24px * (12 - 1))); } .footer .container .part-xl-12.no-gutter { width: calc(((100% - (0px * (12 - 1))) / 12) * 12 + (0px * (12 - 1))); } } @media (max-width: 1024px) { .footer .container .part-l-1:not(.no-gutter) { width: calc(((100% - (16px * (8 - 1))) / 8) * 1 + (16px * (1 - 1))); } .footer .container .part-l-1.no-gutter { width: calc(((100% - (0px * (8 - 1))) / 8) * 1 + (0px * (1 - 1))); } .footer .container .part-l-2:not(.no-gutter) { width: calc(((100% - (16px * (8 - 1))) / 8) * 2 + (16px * (2 - 1))); } .footer .container .part-l-2.no-gutter { width: calc(((100% - (0px * (8 - 1))) / 8) * 2 + (0px * (2 - 1))); } .footer .container .part-l-3:not(.no-gutter) { width: calc(((100% - (16px * (8 - 1))) / 8) * 3 + (16px * (3 - 1))); } .footer .container .part-l-3.no-gutter { width: calc(((100% - (0px * (8 - 1))) / 8) * 3 + (0px * (3 - 1))); } .footer .container .part-l-4:not(.no-gutter) { width: calc(((100% - (16px * (8 - 1))) / 8) * 4 + (16px * (4 - 1))); } .footer .container .part-l-4.no-gutter { width: calc(((100% - (0px * (8 - 1))) / 8) * 4 + (0px * (4 - 1))); } .footer .container .part-l-5:not(.no-gutter) { width: calc(((100% - (16px * (8 - 1))) / 8) * 5 + (16px * (5 - 1))); } .footer .container .part-l-5.no-gutter { width: calc(((100% - (0px * (8 - 1))) / 8) * 5 + (0px * (5 - 1))); } .footer .container .part-l-6:not(.no-gutter) { width: calc(((100% - (16px * (8 - 1))) / 8) * 6 + (16px * (6 - 1))); } .footer .container .part-l-6.no-gutter { width: calc(((100% - (0px * (8 - 1))) / 8) * 6 + (0px * (6 - 1))); } .footer .container .part-l-7:not(.no-gutter) { width: calc(((100% - (16px * (8 - 1))) / 8) * 7 + (16px * (7 - 1))); } .footer .container .part-l-7.no-gutter { width: calc(((100% - (0px * (8 - 1))) / 8) * 7 + (0px * (7 - 1))); } .footer .container .part-l-8:not(.no-gutter) { width: calc(((100% - (16px * (8 - 1))) / 8) * 8 + (16px * (8 - 1))); } .footer .container .part-l-8.no-gutter { width: calc(((100% - (0px * (8 - 1))) / 8) * 8 + (0px * (8 - 1))); } } @media (max-width: 768px) { .footer .container .part-m-1:not(.no-gutter) { width: calc(((100% - (14px * (8 - 1))) / 8) * 1 + (14px * (1 - 1))); } .footer .container .part-m-1.no-gutter { width: calc(((100% - (0px * (8 - 1))) / 8) * 1 + (0px * (1 - 1))); } .footer .container .part-m-2:not(.no-gutter) { width: calc(((100% - (14px * (8 - 1))) / 8) * 2 + (14px * (2 - 1))); } .footer .container .part-m-2.no-gutter { width: calc(((100% - (0px * (8 - 1))) / 8) * 2 + (0px * (2 - 1))); } .footer .container .part-m-3:not(.no-gutter) { width: calc(((100% - (14px * (8 - 1))) / 8) * 3 + (14px * (3 - 1))); } .footer .container .part-m-3.no-gutter { width: calc(((100% - (0px * (8 - 1))) / 8) * 3 + (0px * (3 - 1))); } .footer .container .part-m-4:not(.no-gutter) { width: calc(((100% - (14px * (8 - 1))) / 8) * 4 + (14px * (4 - 1))); } .footer .container .part-m-4.no-gutter { width: calc(((100% - (0px * (8 - 1))) / 8) * 4 + (0px * (4 - 1))); } .footer .container .part-m-5:not(.no-gutter) { width: calc(((100% - (14px * (8 - 1))) / 8) * 5 + (14px * (5 - 1))); } .footer .container .part-m-5.no-gutter { width: calc(((100% - (0px * (8 - 1))) / 8) * 5 + (0px * (5 - 1))); } .footer .container .part-m-6:not(.no-gutter) { width: calc(((100% - (14px * (8 - 1))) / 8) * 6 + (14px * (6 - 1))); } .footer .container .part-m-6.no-gutter { width: calc(((100% - (0px * (8 - 1))) / 8) * 6 + (0px * (6 - 1))); } .footer .container .part-m-7:not(.no-gutter) { width: calc(((100% - (14px * (8 - 1))) / 8) * 7 + (14px * (7 - 1))); } .footer .container .part-m-7.no-gutter { width: calc(((100% - (0px * (8 - 1))) / 8) * 7 + (0px * (7 - 1))); } .footer .container .part-m-8:not(.no-gutter) { width: calc(((100% - (14px * (8 - 1))) / 8) * 8 + (14px * (8 - 1))); } .footer .container .part-m-8.no-gutter { width: calc(((100% - (0px * (8 - 1))) / 8) * 8 + (0px * (8 - 1))); } } @media (max-width: 576px) { .footer .container .part-s-1:not(.no-gutter) { width: calc(((100% - (10px * (4 - 1))) / 4) * 1 + (10px * (1 - 1))); } .footer .container .part-s-1.no-gutter { width: calc(((100% - (0px * (4 - 1))) / 4) * 1 + (0px * (1 - 1))); } .footer .container .part-s-2:not(.no-gutter) { width: calc(((100% - (10px * (4 - 1))) / 4) * 2 + (10px * (2 - 1))); } .footer .container .part-s-2.no-gutter { width: calc(((100% - (0px * (4 - 1))) / 4) * 2 + (0px * (2 - 1))); } .footer .container .part-s-3:not(.no-gutter) { width: calc(((100% - (10px * (4 - 1))) / 4) * 3 + (10px * (3 - 1))); } .footer .container .part-s-3.no-gutter { width: calc(((100% - (0px * (4 - 1))) / 4) * 3 + (0px * (3 - 1))); } .footer .container .part-s-4:not(.no-gutter) { width: calc(((100% - (10px * (4 - 1))) / 4) * 4 + (10px * (4 - 1))); } .footer .container .part-s-4.no-gutter { width: calc(((100% - (0px * (4 - 1))) / 4) * 4 + (0px * (4 - 1))); } } @media (max-width: 375px) { .footer .container .part-xs-1:not(.no-gutter) { width: calc(((100% - (10px * (4 - 1))) / 4) * 1 + (10px * (1 - 1))); } .footer .container .part-xs-1.no-gutter { width: calc(((100% - (0px * (4 - 1))) / 4) * 1 + (0px * (1 - 1))); } .footer .container .part-xs-2:not(.no-gutter) { width: calc(((100% - (10px * (4 - 1))) / 4) * 2 + (10px * (2 - 1))); } .footer .container .part-xs-2.no-gutter { width: calc(((100% - (0px * (4 - 1))) / 4) * 2 + (0px * (2 - 1))); } .footer .container .part-xs-3:not(.no-gutter) { width: calc(((100% - (10px * (4 - 1))) / 4) * 3 + (10px * (3 - 1))); } .footer .container .part-xs-3.no-gutter { width: calc(((100% - (0px * (4 - 1))) / 4) * 3 + (0px * (3 - 1))); } .footer .container .part-xs-4:not(.no-gutter) { width: calc(((100% - (10px * (4 - 1))) / 4) * 4 + (10px * (4 - 1))); } .footer .container .part-xs-4.no-gutter { width: calc(((100% - (0px * (4 - 1))) / 4) * 4 + (0px * (4 - 1))); } } .footer .container .part-top-0 { margin-top: 0px; } .footer .container .part-left-0 { margin-left: 0px; } .footer .container .part-right-0 { margin-right: 0px; } .footer .container .part-bottom-0 { margin-bottom: calc(0px + 50px); } .footer .container .part-top-1 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 1 + (24px * (1 - 1))); } .footer .container .part-left-1 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 1 + (24px * (1 - 1))); } .footer .container .part-right-1 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 1 + (24px * (1 - 1))); } .footer .container .part-bottom-1 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 1 + (24px * (1 - 1))) + 50px); } .footer .container .part-top-2 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 2 + (24px * (2 - 1))); } .footer .container .part-left-2 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 2 + (24px * (2 - 1))); } .footer .container .part-right-2 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 2 + (24px * (2 - 1))); } .footer .container .part-bottom-2 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 2 + (24px * (2 - 1))) + 50px); } .footer .container .part-top-3 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 3 + (24px * (3 - 1))); } .footer .container .part-left-3 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 3 + (24px * (3 - 1))); } .footer .container .part-right-3 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 3 + (24px * (3 - 1))); } .footer .container .part-bottom-3 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 3 + (24px * (3 - 1))) + 50px); } .footer .container .part-top-4 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 4 + (24px * (4 - 1))); } .footer .container .part-left-4 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 4 + (24px * (4 - 1))); } .footer .container .part-right-4 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 4 + (24px * (4 - 1))); } .footer .container .part-bottom-4 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 4 + (24px * (4 - 1))) + 50px); } .footer .container .part-top-5 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 5 + (24px * (5 - 1))); } .footer .container .part-left-5 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 5 + (24px * (5 - 1))); } .footer .container .part-right-5 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 5 + (24px * (5 - 1))); } .footer .container .part-bottom-5 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 5 + (24px * (5 - 1))) + 50px); } .footer .container .part-top-6 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 6 + (24px * (6 - 1))); } .footer .container .part-left-6 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 6 + (24px * (6 - 1))); } .footer .container .part-right-6 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 6 + (24px * (6 - 1))); } .footer .container .part-bottom-6 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 6 + (24px * (6 - 1))) + 50px); } .footer .container .part-top-7 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 7 + (24px * (7 - 1))); } .footer .container .part-left-7 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 7 + (24px * (7 - 1))); } .footer .container .part-right-7 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 7 + (24px * (7 - 1))); } .footer .container .part-bottom-7 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 7 + (24px * (7 - 1))) + 50px); } .footer .container .part-top-8 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 8 + (24px * (8 - 1))); } .footer .container .part-left-8 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 8 + (24px * (8 - 1))); } .footer .container .part-right-8 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 8 + (24px * (8 - 1))); } .footer .container .part-bottom-8 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 8 + (24px * (8 - 1))) + 50px); } .footer .container .part-top-9 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 9 + (24px * (9 - 1))); } .footer .container .part-left-9 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 9 + (24px * (9 - 1))); } .footer .container .part-right-9 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 9 + (24px * (9 - 1))); } .footer .container .part-bottom-9 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 9 + (24px * (9 - 1))) + 50px); } .footer .container .part-top-10 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 10 + (24px * (10 - 1))); } .footer .container .part-left-10 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 10 + (24px * (10 - 1))); } .footer .container .part-right-10 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 10 + (24px * (10 - 1))); } .footer .container .part-bottom-10 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 10 + (24px * (10 - 1))) + 50px); } .footer .container .part-top-11 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 11 + (24px * (11 - 1))); } .footer .container .part-left-11 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 11 + (24px * (11 - 1))); } .footer .container .part-right-11 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 11 + (24px * (11 - 1))); } .footer .container .part-bottom-11 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 11 + (24px * (11 - 1))) + 50px); } .footer .container .part-top-12 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 12 + (24px * (12 - 1))); } .footer .container .part-left-12 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 12 + (24px * (12 - 1))); } .footer .container .part-right-12 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 12 + (24px * (12 - 1))); } .footer .container .part-bottom-12 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 12 + (24px * (12 - 1))) + 50px); } @media (max-width: 1024px) { .footer .container .part-top-l-0 { margin-top: 0px; } .footer .container .part-left-l-0 { margin-left: 0px; } .footer .container .part-right-l-0 { margin-right: 0px; } .footer .container .part-bottom-l-0 { margin-bottom: calc(0px + 50px); } .footer .container .part-top-l-1 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 1 + (24px * (1 - 1))); } .footer .container .part-left-l-1 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 1 + (24px * (1 - 1))); } .footer .container .part-right-l-1 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 1 + (24px * (1 - 1))); } .footer .container .part-bottom-l-1 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 1 + (24px * (1 - 1))) + 50px); } .footer .container .part-top-l-2 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 2 + (24px * (2 - 1))); } .footer .container .part-left-l-2 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 2 + (24px * (2 - 1))); } .footer .container .part-right-l-2 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 2 + (24px * (2 - 1))); } .footer .container .part-bottom-l-2 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 2 + (24px * (2 - 1))) + 50px); } .footer .container .part-top-l-3 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 3 + (24px * (3 - 1))); } .footer .container .part-left-l-3 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 3 + (24px * (3 - 1))); } .footer .container .part-right-l-3 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 3 + (24px * (3 - 1))); } .footer .container .part-bottom-l-3 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 3 + (24px * (3 - 1))) + 50px); } .footer .container .part-top-l-4 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 4 + (24px * (4 - 1))); } .footer .container .part-left-l-4 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 4 + (24px * (4 - 1))); } .footer .container .part-right-l-4 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 4 + (24px * (4 - 1))); } .footer .container .part-bottom-l-4 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 4 + (24px * (4 - 1))) + 50px); } .footer .container .part-top-l-5 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 5 + (24px * (5 - 1))); } .footer .container .part-left-l-5 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 5 + (24px * (5 - 1))); } .footer .container .part-right-l-5 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 5 + (24px * (5 - 1))); } .footer .container .part-bottom-l-5 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 5 + (24px * (5 - 1))) + 50px); } .footer .container .part-top-l-6 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 6 + (24px * (6 - 1))); } .footer .container .part-left-l-6 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 6 + (24px * (6 - 1))); } .footer .container .part-right-l-6 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 6 + (24px * (6 - 1))); } .footer .container .part-bottom-l-6 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 6 + (24px * (6 - 1))) + 50px); } .footer .container .part-top-l-7 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 7 + (24px * (7 - 1))); } .footer .container .part-left-l-7 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 7 + (24px * (7 - 1))); } .footer .container .part-right-l-7 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 7 + (24px * (7 - 1))); } .footer .container .part-bottom-l-7 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 7 + (24px * (7 - 1))) + 50px); } .footer .container .part-top-l-8 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 8 + (24px * (8 - 1))); } .footer .container .part-left-l-8 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 8 + (24px * (8 - 1))); } .footer .container .part-right-l-8 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 8 + (24px * (8 - 1))); } .footer .container .part-bottom-l-8 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 8 + (24px * (8 - 1))) + 50px); } .footer .container .part-top-l-9 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 9 + (24px * (9 - 1))); } .footer .container .part-left-l-9 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 9 + (24px * (9 - 1))); } .footer .container .part-right-l-9 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 9 + (24px * (9 - 1))); } .footer .container .part-bottom-l-9 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 9 + (24px * (9 - 1))) + 50px); } .footer .container .part-top-l-10 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 10 + (24px * (10 - 1))); } .footer .container .part-left-l-10 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 10 + (24px * (10 - 1))); } .footer .container .part-right-l-10 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 10 + (24px * (10 - 1))); } .footer .container .part-bottom-l-10 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 10 + (24px * (10 - 1))) + 50px); } .footer .container .part-top-l-11 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 11 + (24px * (11 - 1))); } .footer .container .part-left-l-11 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 11 + (24px * (11 - 1))); } .footer .container .part-right-l-11 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 11 + (24px * (11 - 1))); } .footer .container .part-bottom-l-11 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 11 + (24px * (11 - 1))) + 50px); } .footer .container .part-top-l-12 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 12 + (24px * (12 - 1))); } .footer .container .part-left-l-12 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 12 + (24px * (12 - 1))); } .footer .container .part-right-l-12 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 12 + (24px * (12 - 1))); } .footer .container .part-bottom-l-12 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 12 + (24px * (12 - 1))) + 50px); } } @media (max-width: 768px) { .footer .container .part-top-m-0 { margin-top: 0px; } .footer .container .part-left-m-0 { margin-left: 0px; } .footer .container .part-right-m-0 { margin-right: 0px; } .footer .container .part-bottom-m-0 { margin-bottom: calc(0px + 50px); } .footer .container .part-top-m-1 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 1 + (24px * (1 - 1))); } .footer .container .part-left-m-1 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 1 + (24px * (1 - 1))); } .footer .container .part-right-m-1 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 1 + (24px * (1 - 1))); } .footer .container .part-bottom-m-1 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 1 + (24px * (1 - 1))) + 50px); } .footer .container .part-top-m-2 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 2 + (24px * (2 - 1))); } .footer .container .part-left-m-2 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 2 + (24px * (2 - 1))); } .footer .container .part-right-m-2 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 2 + (24px * (2 - 1))); } .footer .container .part-bottom-m-2 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 2 + (24px * (2 - 1))) + 50px); } .footer .container .part-top-m-3 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 3 + (24px * (3 - 1))); } .footer .container .part-left-m-3 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 3 + (24px * (3 - 1))); } .footer .container .part-right-m-3 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 3 + (24px * (3 - 1))); } .footer .container .part-bottom-m-3 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 3 + (24px * (3 - 1))) + 50px); } .footer .container .part-top-m-4 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 4 + (24px * (4 - 1))); } .footer .container .part-left-m-4 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 4 + (24px * (4 - 1))); } .footer .container .part-right-m-4 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 4 + (24px * (4 - 1))); } .footer .container .part-bottom-m-4 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 4 + (24px * (4 - 1))) + 50px); } .footer .container .part-top-m-5 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 5 + (24px * (5 - 1))); } .footer .container .part-left-m-5 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 5 + (24px * (5 - 1))); } .footer .container .part-right-m-5 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 5 + (24px * (5 - 1))); } .footer .container .part-bottom-m-5 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 5 + (24px * (5 - 1))) + 50px); } .footer .container .part-top-m-6 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 6 + (24px * (6 - 1))); } .footer .container .part-left-m-6 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 6 + (24px * (6 - 1))); } .footer .container .part-right-m-6 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 6 + (24px * (6 - 1))); } .footer .container .part-bottom-m-6 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 6 + (24px * (6 - 1))) + 50px); } .footer .container .part-top-m-7 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 7 + (24px * (7 - 1))); } .footer .container .part-left-m-7 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 7 + (24px * (7 - 1))); } .footer .container .part-right-m-7 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 7 + (24px * (7 - 1))); } .footer .container .part-bottom-m-7 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 7 + (24px * (7 - 1))) + 50px); } .footer .container .part-top-m-8 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 8 + (24px * (8 - 1))); } .footer .container .part-left-m-8 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 8 + (24px * (8 - 1))); } .footer .container .part-right-m-8 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 8 + (24px * (8 - 1))); } .footer .container .part-bottom-m-8 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 8 + (24px * (8 - 1))) + 50px); } .footer .container .part-top-m-9 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 9 + (24px * (9 - 1))); } .footer .container .part-left-m-9 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 9 + (24px * (9 - 1))); } .footer .container .part-right-m-9 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 9 + (24px * (9 - 1))); } .footer .container .part-bottom-m-9 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 9 + (24px * (9 - 1))) + 50px); } .footer .container .part-top-m-10 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 10 + (24px * (10 - 1))); } .footer .container .part-left-m-10 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 10 + (24px * (10 - 1))); } .footer .container .part-right-m-10 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 10 + (24px * (10 - 1))); } .footer .container .part-bottom-m-10 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 10 + (24px * (10 - 1))) + 50px); } .footer .container .part-top-m-11 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 11 + (24px * (11 - 1))); } .footer .container .part-left-m-11 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 11 + (24px * (11 - 1))); } .footer .container .part-right-m-11 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 11 + (24px * (11 - 1))); } .footer .container .part-bottom-m-11 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 11 + (24px * (11 - 1))) + 50px); } .footer .container .part-top-m-12 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 12 + (24px * (12 - 1))); } .footer .container .part-left-m-12 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 12 + (24px * (12 - 1))); } .footer .container .part-right-m-12 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 12 + (24px * (12 - 1))); } .footer .container .part-bottom-m-12 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 12 + (24px * (12 - 1))) + 50px); } } @media (max-width: 576px) { .footer .container .part-top-s-0 { margin-top: 0px; } .footer .container .part-left-s-0 { margin-left: 0px; } .footer .container .part-right-s-0 { margin-right: 0px; } .footer .container .part-bottom-s-0 { margin-bottom: calc(0px + 30px); } .footer .container .part-top-s-1 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 1 + (24px * (1 - 1))); } .footer .container .part-left-s-1 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 1 + (24px * (1 - 1))); } .footer .container .part-right-s-1 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 1 + (24px * (1 - 1))); } .footer .container .part-bottom-s-1 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 1 + (24px * (1 - 1))) + 30px); } .footer .container .part-top-s-2 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 2 + (24px * (2 - 1))); } .footer .container .part-left-s-2 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 2 + (24px * (2 - 1))); } .footer .container .part-right-s-2 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 2 + (24px * (2 - 1))); } .footer .container .part-bottom-s-2 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 2 + (24px * (2 - 1))) + 30px); } .footer .container .part-top-s-3 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 3 + (24px * (3 - 1))); } .footer .container .part-left-s-3 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 3 + (24px * (3 - 1))); } .footer .container .part-right-s-3 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 3 + (24px * (3 - 1))); } .footer .container .part-bottom-s-3 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 3 + (24px * (3 - 1))) + 30px); } .footer .container .part-top-s-4 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 4 + (24px * (4 - 1))); } .footer .container .part-left-s-4 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 4 + (24px * (4 - 1))); } .footer .container .part-right-s-4 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 4 + (24px * (4 - 1))); } .footer .container .part-bottom-s-4 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 4 + (24px * (4 - 1))) + 30px); } .footer .container .part-top-s-5 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 5 + (24px * (5 - 1))); } .footer .container .part-left-s-5 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 5 + (24px * (5 - 1))); } .footer .container .part-right-s-5 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 5 + (24px * (5 - 1))); } .footer .container .part-bottom-s-5 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 5 + (24px * (5 - 1))) + 30px); } .footer .container .part-top-s-6 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 6 + (24px * (6 - 1))); } .footer .container .part-left-s-6 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 6 + (24px * (6 - 1))); } .footer .container .part-right-s-6 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 6 + (24px * (6 - 1))); } .footer .container .part-bottom-s-6 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 6 + (24px * (6 - 1))) + 30px); } .footer .container .part-top-s-7 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 7 + (24px * (7 - 1))); } .footer .container .part-left-s-7 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 7 + (24px * (7 - 1))); } .footer .container .part-right-s-7 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 7 + (24px * (7 - 1))); } .footer .container .part-bottom-s-7 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 7 + (24px * (7 - 1))) + 30px); } .footer .container .part-top-s-8 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 8 + (24px * (8 - 1))); } .footer .container .part-left-s-8 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 8 + (24px * (8 - 1))); } .footer .container .part-right-s-8 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 8 + (24px * (8 - 1))); } .footer .container .part-bottom-s-8 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 8 + (24px * (8 - 1))) + 30px); } .footer .container .part-top-s-9 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 9 + (24px * (9 - 1))); } .footer .container .part-left-s-9 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 9 + (24px * (9 - 1))); } .footer .container .part-right-s-9 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 9 + (24px * (9 - 1))); } .footer .container .part-bottom-s-9 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 9 + (24px * (9 - 1))) + 30px); } .footer .container .part-top-s-10 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 10 + (24px * (10 - 1))); } .footer .container .part-left-s-10 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 10 + (24px * (10 - 1))); } .footer .container .part-right-s-10 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 10 + (24px * (10 - 1))); } .footer .container .part-bottom-s-10 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 10 + (24px * (10 - 1))) + 30px); } .footer .container .part-top-s-11 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 11 + (24px * (11 - 1))); } .footer .container .part-left-s-11 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 11 + (24px * (11 - 1))); } .footer .container .part-right-s-11 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 11 + (24px * (11 - 1))); } .footer .container .part-bottom-s-11 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 11 + (24px * (11 - 1))) + 30px); } .footer .container .part-top-s-12 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 12 + (24px * (12 - 1))); } .footer .container .part-left-s-12 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 12 + (24px * (12 - 1))); } .footer .container .part-right-s-12 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 12 + (24px * (12 - 1))); } .footer .container .part-bottom-s-12 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 12 + (24px * (12 - 1))) + 30px); } } @media (max-width: 375px) { .footer .container .part-top-xs-0 { margin-top: 0px; } .footer .container .part-left-xs-0 { margin-left: 0px; } .footer .container .part-right-xs-0 { margin-right: 0px; } .footer .container .part-bottom-xs-0 { margin-bottom: calc(0px + 30px); } .footer .container .part-top-xs-1 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 1 + (24px * (1 - 1))); } .footer .container .part-left-xs-1 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 1 + (24px * (1 - 1))); } .footer .container .part-right-xs-1 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 1 + (24px * (1 - 1))); } .footer .container .part-bottom-xs-1 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 1 + (24px * (1 - 1))) + 30px); } .footer .container .part-top-xs-2 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 2 + (24px * (2 - 1))); } .footer .container .part-left-xs-2 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 2 + (24px * (2 - 1))); } .footer .container .part-right-xs-2 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 2 + (24px * (2 - 1))); } .footer .container .part-bottom-xs-2 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 2 + (24px * (2 - 1))) + 30px); } .footer .container .part-top-xs-3 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 3 + (24px * (3 - 1))); } .footer .container .part-left-xs-3 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 3 + (24px * (3 - 1))); } .footer .container .part-right-xs-3 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 3 + (24px * (3 - 1))); } .footer .container .part-bottom-xs-3 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 3 + (24px * (3 - 1))) + 30px); } .footer .container .part-top-xs-4 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 4 + (24px * (4 - 1))); } .footer .container .part-left-xs-4 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 4 + (24px * (4 - 1))); } .footer .container .part-right-xs-4 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 4 + (24px * (4 - 1))); } .footer .container .part-bottom-xs-4 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 4 + (24px * (4 - 1))) + 30px); } .footer .container .part-top-xs-5 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 5 + (24px * (5 - 1))); } .footer .container .part-left-xs-5 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 5 + (24px * (5 - 1))); } .footer .container .part-right-xs-5 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 5 + (24px * (5 - 1))); } .footer .container .part-bottom-xs-5 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 5 + (24px * (5 - 1))) + 30px); } .footer .container .part-top-xs-6 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 6 + (24px * (6 - 1))); } .footer .container .part-left-xs-6 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 6 + (24px * (6 - 1))); } .footer .container .part-right-xs-6 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 6 + (24px * (6 - 1))); } .footer .container .part-bottom-xs-6 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 6 + (24px * (6 - 1))) + 30px); } .footer .container .part-top-xs-7 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 7 + (24px * (7 - 1))); } .footer .container .part-left-xs-7 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 7 + (24px * (7 - 1))); } .footer .container .part-right-xs-7 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 7 + (24px * (7 - 1))); } .footer .container .part-bottom-xs-7 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 7 + (24px * (7 - 1))) + 30px); } .footer .container .part-top-xs-8 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 8 + (24px * (8 - 1))); } .footer .container .part-left-xs-8 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 8 + (24px * (8 - 1))); } .footer .container .part-right-xs-8 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 8 + (24px * (8 - 1))); } .footer .container .part-bottom-xs-8 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 8 + (24px * (8 - 1))) + 30px); } .footer .container .part-top-xs-9 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 9 + (24px * (9 - 1))); } .footer .container .part-left-xs-9 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 9 + (24px * (9 - 1))); } .footer .container .part-right-xs-9 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 9 + (24px * (9 - 1))); } .footer .container .part-bottom-xs-9 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 9 + (24px * (9 - 1))) + 30px); } .footer .container .part-top-xs-10 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 10 + (24px * (10 - 1))); } .footer .container .part-left-xs-10 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 10 + (24px * (10 - 1))); } .footer .container .part-right-xs-10 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 10 + (24px * (10 - 1))); } .footer .container .part-bottom-xs-10 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 10 + (24px * (10 - 1))) + 30px); } .footer .container .part-top-xs-11 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 11 + (24px * (11 - 1))); } .footer .container .part-left-xs-11 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 11 + (24px * (11 - 1))); } .footer .container .part-right-xs-11 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 11 + (24px * (11 - 1))); } .footer .container .part-bottom-xs-11 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 11 + (24px * (11 - 1))) + 30px); } .footer .container .part-top-xs-12 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 12 + (24px * (12 - 1))); } .footer .container .part-left-xs-12 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 12 + (24px * (12 - 1))); } .footer .container .part-right-xs-12 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 12 + (24px * (12 - 1))); } .footer .container .part-bottom-xs-12 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 12 + (24px * (12 - 1))) + 30px); } } @media (max-width: 375px) { .footer .container .part-xs-0 { display: none; } } @media (max-width: 576px) { .footer .container .part-s-0 { display: none; } } @media (max-width: 768px) { .footer .container .part-m-0 { display: none; } } @media (max-width: 1024px) { .footer .container .part-l-0 { display: none; } } @media (max-width: 1280px) { .footer .container .part-xl-0 { display: none; } } .footer .container [class*=part].-justify-start { display: flex; justify-content: flex-start; } .footer .container [class*=part].-justify-center { display: flex; justify-content: center; } .footer .container [class*=part].-justify-end { display: flex; justify-content: flex-end; } .footer .container [class*=part].-align-start { display: flex; align-items: flex-start; } .footer .container [class*=part].-align-center { display: flex; align-items: center; } .footer .container [class*=part].-align-end { display: flex; align-items: flex-end; } .footer .container [class*=part].-text-left { text-align: left; } .footer .container [class*=part].-text-center { text-align: center; } .footer .container [class*=part].-text-right { text-align: right; } @media (max-width: 768px) { .footer .container { padding-right: 45px; padding-left: 45px; } } .footer__top a:not(.button):not(.filter__remove):not(.filter__tag), .footer__top span, .footer__top li, .footer__top p, .footer__top h1, .footer__top h2, .footer__top h3, .footer__top h4, .footer__top h5, .footer__top h6 { color: #000; } .footer__bottom a:not(.button):not(.filter__remove):not(.filter__tag), .footer__bottom span, .footer__bottom li, .footer__bottom p, .footer__bottom h1, .footer__bottom h2, .footer__bottom h3, .footer__bottom h4, .footer__bottom h5, .footer__bottom h6 { color: #000; } .footer .container p, .footer .container a:not(.button):not(.filter__remove):not(.filter__tag):not(.footer__link) { font-size: 14px; color: #4A4A4A; line-height: 1.6; } @media (max-width: 1024px) { .footer .container p, .footer .container a:not(.button):not(.filter__remove):not(.filter__tag):not(.footer__link) { font-size: 13px; } } @media (max-width: 576px) { .footer .container p, .footer .container a:not(.button):not(.filter__remove):not(.filter__tag):not(.footer__link) { font-size: 10px; } } .footer .container p b, .footer .container a:not(.button):not(.filter__remove):not(.filter__tag):not(.footer__link) b { color: #000; } @media (max-width: 576px) { .footer .container .heading-4 + *, .footer .container h4 + * { margin-top: 10px; } } .footer .container a:not(.button):not(.filter__remove):not(.filter__tag):not(.footer__link), .footer .container .-active { transition: color 0.2s ease-in-out; } .footer .container a:not(.button):not(.filter__remove):not(.filter__tag):not(.footer__link):hover, .footer .container .-active:hover { color: #2D77C0; } @media (max-width: 576px) { .footer .container { padding-right: 15px; padding-left: 15px; } } .footer__left { padding-right: 30px; } @media (max-width: 576px) { .footer__left { display: flex; padding-right: 0; } .footer__left > div { width: 50%; } } .footer__top .divider { margin-bottom: 100px; } @media (max-width: 1024px) { .footer__top .divider { margin-bottom: 70px; } } @media (max-width: 768px) { .footer__top .divider { margin-bottom: 70px; } } @media (max-width: 576px) { .footer__top .divider { margin-bottom: 50px; } } @media (max-width: 375px) { .footer__top .divider { margin-bottom: 50px; } } .footer__top a:not(.button):not(.filter__remove):not(.filter__tag):not(.footer__logo) { display: block; transition: transform 0.2s ease-in-out !important; } .footer__top .button, .footer__top .filter__remove, .footer__top .filter__tag { display: flex; align-items: center; width: -moz-fit-content; width: fit-content; } .footer__top .button + .button, .footer__top .filter__remove + .button, .footer__top .button + .filter__remove, .footer__top .filter__remove + .filter__remove, .footer__top .filter__tag + .button, .footer__top .filter__tag + .filter__remove, .footer__top .button + .filter__tag, .footer__top .filter__remove + .filter__tag, .footer__top .filter__tag + .filter__tag { margin-top: 10px; } .footer__link { position: relative; overflow: hidden; display: flex !important; align-items: center; width: -moz-fit-content; width: fit-content; font-family: "DM Sans", sans-serif; font-size: 30px; font-weight: 700; line-height: 1.17; color: #000; } @media (max-width: 1024px) { .footer__link { font-size: 24px; } } @media (max-width: 768px) { .footer__link { font-size: 19px; } } @media (max-width: 576px) { .footer__link { font-size: 16px; } } .footer__link + * { margin-top: 20px; } @media (max-width: 1024px) { .footer__link + * { margin-top: 20px; } } @media (max-width: 768px) { .footer__link + * { margin-top: 20px; } } @media (max-width: 576px) { .footer__link + * { margin-top: 20px; } } .footer__link svg { width: 7px; margin-top: 1px; margin-left: 15px; transition: 0.2s ease-in-out; } @media (max-width: 576px) { .footer__link svg { width: 5px; margin-left: 10px; } } .footer__link:hover svg { animation: arrowVertical 0.6s ease-in-out; } .footer__link:hover svg + svg { opacity: 1; top: 5px; transform: translateY(0%); } @media (max-width: 576px) { .footer__link + .footer__link { margin-top: 10px; } } .footer__follow { margin-top: 70px; padding-bottom: 80px; } @media (max-width: 576px) { .footer__follow { margin-top: 0; padding-top: 0; } } .footer__logoMember { width: 150px; } .footer__bottom { padding-top: 50px; padding-bottom: 50px; background-color: white; padding-top: 0; } .footer__bottom nav { display: flex; align-items: center; } .footer__bottom nav * { margin: 0; } .footer__bottom nav * + * { margin-left: 60px; } @media (max-width: 576px) { .footer__bottom * { font-size: 8px; } } .footer__bottom .divider { margin-top: -10px; margin-bottom: 20px; } .footer__bottom .container { align-items: center; } @media (max-width: 576px) { .footer__bottom .container { align-items: flex-start; } } @media (max-width: 1024px) { .footer__bottom nav * + * { margin-left: 25px; } } @media (max-width: 576px) { .footer__bottom nav * + * { margin-left: 20px; } } .footer__logo svg { margin-bottom: 50px; } @media (max-width: 1024px) { .footer__logo svg { margin-bottom: 50px; } } @media (max-width: 768px) { .footer__logo svg { margin-bottom: 50px; } } @media (max-width: 576px) { .footer__logo svg { margin-bottom: 30px; } } @media (max-width: 375px) { .footer__logo svg { margin-bottom: 30px; } } .footer__columns { position: relative; display: flex; justify-content: space-between; flex-wrap: wrap; padding-left: calc(((1560px - (24px * (12 - 1))) / 12) * 1 + (24px * (1 - 1))); padding-bottom: 80px; border-left: 1px solid #DADDDF; } @media (max-width: 1024px) { .footer__columns { padding-left: 8%; } } @media (max-width: 576px) { .footer__columns { padding-left: 0; border-left: 0; padding-top: 20px; padding-bottom: 50px; margin-top: 50px; } } @media (max-width: 576px) { .footer__columns::before { content: ""; position: absolute; top: 0; left: 0; right: 0; width: 100%; height: 10px; border: 1px solid #DADDDF; border-bottom: 0; border-radius: 10px 10px 0 0; } } .footer__column { width: 30%; } @media (max-width: 1024px) { .footer__column { width: 50%; } .footer__column:not(:nth-child(1)):not(:nth-child(2)) { margin-top: 50px; } } @media (max-width: 576px) { .footer__column { width: 50%; margin-top: 30px; } } .footer__column_wide { background-image: url("/img/footer/background_footer.jpg"); background-size: cover; width: 60%; margin-right: 5%; border-radius: 8px; text-align: center; display: flex; flex-direction: column; justify-content: center; align-items: center; } .footer__column_wide h6 { color: white; margin-top: 10px; } .footer__column_wide h4 { color: white; } .footer__column_wide .button, .footer__column_wide .filter__remove, .footer__column_wide .filter__tag { margin-top: 10px; } @media (max-width: 1024px) { .footer__column_wide { width: 100%; padding: 15px; } .footer__column_wide:not(:nth-child(1)):not(:nth-child(2)) { margin-top: 50px; } } @media (max-width: 576px) { .footer__column_wide { width: 100%; margin-top: 30px; padding: 15px; } } .footer__nav { margin-top: 0; } .footer__lang { position: relative; display: flex; border-radius: 8px; border: 1px solid black; padding: 5px 16px; height: fit-content; height: -moz-fit-content; } @media (max-width: 576px) { .footer__lang { margin-left: 50%; margin-top: 40px; } } .footer__lang:hover .footer__dropdown { opacity: 1; pointer-events: auto; height: auto; max-height: 100px !important; } .footer__lang:hover .footer__langitem { opacity: 1; pointer-events: auto; } .footer__langitem:not(.-lang) { pointer-events: none; transition: opacity 0.2s ease-in-out 100ms, pointer-events 0.2s ease-in-out 100ms; opacity: 0; } .footer__langitem.-lang { display: flex; justify-content: space-between; text-transform: uppercase; } .footer__langitem.-lang svg { width: 12px; margin-left: 10px; } .footer__dropdown { position: absolute; bottom: calc(100% - 10px); left: -1px; display: flex; flex-direction: column; transition: max-height 0.2s ease-in-out; opacity: 0; pointer-events: none; max-height: 0; height: 0; border-top-left-radius: 8px; border-top-right-radius: 8px; border: 1px solid black; border-bottom: 0; width: calc(100% + 2px); padding: 5px 16px; background-color: white; } .section { position: relative; } .section .container { position: relative; display: flex; justify-content: space-between; align-items: stretch; flex-direction: row; flex-wrap: wrap; position: relative; display: flex; justify-content: space-between; align-items: stretch; flex-direction: row; flex-wrap: wrap; width: 100%; margin-right: auto; margin-left: auto; padding-right: 90px; padding-left: 90px; max-width: 1560px; } .section .container .part-1:not(.no-gutter) { width: calc(((100% - (24px * (12 - 1))) / 12) * 1 + (24px * (1 - 1))); } .section .container .part-1.no-gutter { width: calc(((100% - (0px * (12 - 1))) / 12) * 1 + (0px * (1 - 1))); } .section .container .part-2:not(.no-gutter) { width: calc(((100% - (24px * (12 - 1))) / 12) * 2 + (24px * (2 - 1))); } .section .container .part-2.no-gutter { width: calc(((100% - (0px * (12 - 1))) / 12) * 2 + (0px * (2 - 1))); } .section .container .part-3:not(.no-gutter) { width: calc(((100% - (24px * (12 - 1))) / 12) * 3 + (24px * (3 - 1))); } .section .container .part-3.no-gutter { width: calc(((100% - (0px * (12 - 1))) / 12) * 3 + (0px * (3 - 1))); } .section .container .part-4:not(.no-gutter) { width: calc(((100% - (24px * (12 - 1))) / 12) * 4 + (24px * (4 - 1))); } .section .container .part-4.no-gutter { width: calc(((100% - (0px * (12 - 1))) / 12) * 4 + (0px * (4 - 1))); } .section .container .part-5:not(.no-gutter) { width: calc(((100% - (24px * (12 - 1))) / 12) * 5 + (24px * (5 - 1))); } .section .container .part-5.no-gutter { width: calc(((100% - (0px * (12 - 1))) / 12) * 5 + (0px * (5 - 1))); } .section .container .part-6:not(.no-gutter) { width: calc(((100% - (24px * (12 - 1))) / 12) * 6 + (24px * (6 - 1))); } .section .container .part-6.no-gutter { width: calc(((100% - (0px * (12 - 1))) / 12) * 6 + (0px * (6 - 1))); } .section .container .part-7:not(.no-gutter) { width: calc(((100% - (24px * (12 - 1))) / 12) * 7 + (24px * (7 - 1))); } .section .container .part-7.no-gutter { width: calc(((100% - (0px * (12 - 1))) / 12) * 7 + (0px * (7 - 1))); } .section .container .part-8:not(.no-gutter) { width: calc(((100% - (24px * (12 - 1))) / 12) * 8 + (24px * (8 - 1))); } .section .container .part-8.no-gutter { width: calc(((100% - (0px * (12 - 1))) / 12) * 8 + (0px * (8 - 1))); } .section .container .part-9:not(.no-gutter) { width: calc(((100% - (24px * (12 - 1))) / 12) * 9 + (24px * (9 - 1))); } .section .container .part-9.no-gutter { width: calc(((100% - (0px * (12 - 1))) / 12) * 9 + (0px * (9 - 1))); } .section .container .part-10:not(.no-gutter) { width: calc(((100% - (24px * (12 - 1))) / 12) * 10 + (24px * (10 - 1))); } .section .container .part-10.no-gutter { width: calc(((100% - (0px * (12 - 1))) / 12) * 10 + (0px * (10 - 1))); } .section .container .part-11:not(.no-gutter) { width: calc(((100% - (24px * (12 - 1))) / 12) * 11 + (24px * (11 - 1))); } .section .container .part-11.no-gutter { width: calc(((100% - (0px * (12 - 1))) / 12) * 11 + (0px * (11 - 1))); } .section .container .part-12:not(.no-gutter) { width: calc(((100% - (24px * (12 - 1))) / 12) * 12 + (24px * (12 - 1))); } .section .container .part-12.no-gutter { width: calc(((100% - (0px * (12 - 1))) / 12) * 12 + (0px * (12 - 1))); } @media (max-width: 1280px) { .section .container .part-xl-1:not(.no-gutter) { width: calc(((100% - (24px * (12 - 1))) / 12) * 1 + (24px * (1 - 1))); } .section .container .part-xl-1.no-gutter { width: calc(((100% - (0px * (12 - 1))) / 12) * 1 + (0px * (1 - 1))); } .section .container .part-xl-2:not(.no-gutter) { width: calc(((100% - (24px * (12 - 1))) / 12) * 2 + (24px * (2 - 1))); } .section .container .part-xl-2.no-gutter { width: calc(((100% - (0px * (12 - 1))) / 12) * 2 + (0px * (2 - 1))); } .section .container .part-xl-3:not(.no-gutter) { width: calc(((100% - (24px * (12 - 1))) / 12) * 3 + (24px * (3 - 1))); } .section .container .part-xl-3.no-gutter { width: calc(((100% - (0px * (12 - 1))) / 12) * 3 + (0px * (3 - 1))); } .section .container .part-xl-4:not(.no-gutter) { width: calc(((100% - (24px * (12 - 1))) / 12) * 4 + (24px * (4 - 1))); } .section .container .part-xl-4.no-gutter { width: calc(((100% - (0px * (12 - 1))) / 12) * 4 + (0px * (4 - 1))); } .section .container .part-xl-5:not(.no-gutter) { width: calc(((100% - (24px * (12 - 1))) / 12) * 5 + (24px * (5 - 1))); } .section .container .part-xl-5.no-gutter { width: calc(((100% - (0px * (12 - 1))) / 12) * 5 + (0px * (5 - 1))); } .section .container .part-xl-6:not(.no-gutter) { width: calc(((100% - (24px * (12 - 1))) / 12) * 6 + (24px * (6 - 1))); } .section .container .part-xl-6.no-gutter { width: calc(((100% - (0px * (12 - 1))) / 12) * 6 + (0px * (6 - 1))); } .section .container .part-xl-7:not(.no-gutter) { width: calc(((100% - (24px * (12 - 1))) / 12) * 7 + (24px * (7 - 1))); } .section .container .part-xl-7.no-gutter { width: calc(((100% - (0px * (12 - 1))) / 12) * 7 + (0px * (7 - 1))); } .section .container .part-xl-8:not(.no-gutter) { width: calc(((100% - (24px * (12 - 1))) / 12) * 8 + (24px * (8 - 1))); } .section .container .part-xl-8.no-gutter { width: calc(((100% - (0px * (12 - 1))) / 12) * 8 + (0px * (8 - 1))); } .section .container .part-xl-9:not(.no-gutter) { width: calc(((100% - (24px * (12 - 1))) / 12) * 9 + (24px * (9 - 1))); } .section .container .part-xl-9.no-gutter { width: calc(((100% - (0px * (12 - 1))) / 12) * 9 + (0px * (9 - 1))); } .section .container .part-xl-10:not(.no-gutter) { width: calc(((100% - (24px * (12 - 1))) / 12) * 10 + (24px * (10 - 1))); } .section .container .part-xl-10.no-gutter { width: calc(((100% - (0px * (12 - 1))) / 12) * 10 + (0px * (10 - 1))); } .section .container .part-xl-11:not(.no-gutter) { width: calc(((100% - (24px * (12 - 1))) / 12) * 11 + (24px * (11 - 1))); } .section .container .part-xl-11.no-gutter { width: calc(((100% - (0px * (12 - 1))) / 12) * 11 + (0px * (11 - 1))); } .section .container .part-xl-12:not(.no-gutter) { width: calc(((100% - (24px * (12 - 1))) / 12) * 12 + (24px * (12 - 1))); } .section .container .part-xl-12.no-gutter { width: calc(((100% - (0px * (12 - 1))) / 12) * 12 + (0px * (12 - 1))); } } @media (max-width: 1024px) { .section .container .part-l-1:not(.no-gutter) { width: calc(((100% - (16px * (8 - 1))) / 8) * 1 + (16px * (1 - 1))); } .section .container .part-l-1.no-gutter { width: calc(((100% - (0px * (8 - 1))) / 8) * 1 + (0px * (1 - 1))); } .section .container .part-l-2:not(.no-gutter) { width: calc(((100% - (16px * (8 - 1))) / 8) * 2 + (16px * (2 - 1))); } .section .container .part-l-2.no-gutter { width: calc(((100% - (0px * (8 - 1))) / 8) * 2 + (0px * (2 - 1))); } .section .container .part-l-3:not(.no-gutter) { width: calc(((100% - (16px * (8 - 1))) / 8) * 3 + (16px * (3 - 1))); } .section .container .part-l-3.no-gutter { width: calc(((100% - (0px * (8 - 1))) / 8) * 3 + (0px * (3 - 1))); } .section .container .part-l-4:not(.no-gutter) { width: calc(((100% - (16px * (8 - 1))) / 8) * 4 + (16px * (4 - 1))); } .section .container .part-l-4.no-gutter { width: calc(((100% - (0px * (8 - 1))) / 8) * 4 + (0px * (4 - 1))); } .section .container .part-l-5:not(.no-gutter) { width: calc(((100% - (16px * (8 - 1))) / 8) * 5 + (16px * (5 - 1))); } .section .container .part-l-5.no-gutter { width: calc(((100% - (0px * (8 - 1))) / 8) * 5 + (0px * (5 - 1))); } .section .container .part-l-6:not(.no-gutter) { width: calc(((100% - (16px * (8 - 1))) / 8) * 6 + (16px * (6 - 1))); } .section .container .part-l-6.no-gutter { width: calc(((100% - (0px * (8 - 1))) / 8) * 6 + (0px * (6 - 1))); } .section .container .part-l-7:not(.no-gutter) { width: calc(((100% - (16px * (8 - 1))) / 8) * 7 + (16px * (7 - 1))); } .section .container .part-l-7.no-gutter { width: calc(((100% - (0px * (8 - 1))) / 8) * 7 + (0px * (7 - 1))); } .section .container .part-l-8:not(.no-gutter) { width: calc(((100% - (16px * (8 - 1))) / 8) * 8 + (16px * (8 - 1))); } .section .container .part-l-8.no-gutter { width: calc(((100% - (0px * (8 - 1))) / 8) * 8 + (0px * (8 - 1))); } } @media (max-width: 768px) { .section .container .part-m-1:not(.no-gutter) { width: calc(((100% - (14px * (8 - 1))) / 8) * 1 + (14px * (1 - 1))); } .section .container .part-m-1.no-gutter { width: calc(((100% - (0px * (8 - 1))) / 8) * 1 + (0px * (1 - 1))); } .section .container .part-m-2:not(.no-gutter) { width: calc(((100% - (14px * (8 - 1))) / 8) * 2 + (14px * (2 - 1))); } .section .container .part-m-2.no-gutter { width: calc(((100% - (0px * (8 - 1))) / 8) * 2 + (0px * (2 - 1))); } .section .container .part-m-3:not(.no-gutter) { width: calc(((100% - (14px * (8 - 1))) / 8) * 3 + (14px * (3 - 1))); } .section .container .part-m-3.no-gutter { width: calc(((100% - (0px * (8 - 1))) / 8) * 3 + (0px * (3 - 1))); } .section .container .part-m-4:not(.no-gutter) { width: calc(((100% - (14px * (8 - 1))) / 8) * 4 + (14px * (4 - 1))); } .section .container .part-m-4.no-gutter { width: calc(((100% - (0px * (8 - 1))) / 8) * 4 + (0px * (4 - 1))); } .section .container .part-m-5:not(.no-gutter) { width: calc(((100% - (14px * (8 - 1))) / 8) * 5 + (14px * (5 - 1))); } .section .container .part-m-5.no-gutter { width: calc(((100% - (0px * (8 - 1))) / 8) * 5 + (0px * (5 - 1))); } .section .container .part-m-6:not(.no-gutter) { width: calc(((100% - (14px * (8 - 1))) / 8) * 6 + (14px * (6 - 1))); } .section .container .part-m-6.no-gutter { width: calc(((100% - (0px * (8 - 1))) / 8) * 6 + (0px * (6 - 1))); } .section .container .part-m-7:not(.no-gutter) { width: calc(((100% - (14px * (8 - 1))) / 8) * 7 + (14px * (7 - 1))); } .section .container .part-m-7.no-gutter { width: calc(((100% - (0px * (8 - 1))) / 8) * 7 + (0px * (7 - 1))); } .section .container .part-m-8:not(.no-gutter) { width: calc(((100% - (14px * (8 - 1))) / 8) * 8 + (14px * (8 - 1))); } .section .container .part-m-8.no-gutter { width: calc(((100% - (0px * (8 - 1))) / 8) * 8 + (0px * (8 - 1))); } } @media (max-width: 576px) { .section .container .part-s-1:not(.no-gutter) { width: calc(((100% - (10px * (4 - 1))) / 4) * 1 + (10px * (1 - 1))); } .section .container .part-s-1.no-gutter { width: calc(((100% - (0px * (4 - 1))) / 4) * 1 + (0px * (1 - 1))); } .section .container .part-s-2:not(.no-gutter) { width: calc(((100% - (10px * (4 - 1))) / 4) * 2 + (10px * (2 - 1))); } .section .container .part-s-2.no-gutter { width: calc(((100% - (0px * (4 - 1))) / 4) * 2 + (0px * (2 - 1))); } .section .container .part-s-3:not(.no-gutter) { width: calc(((100% - (10px * (4 - 1))) / 4) * 3 + (10px * (3 - 1))); } .section .container .part-s-3.no-gutter { width: calc(((100% - (0px * (4 - 1))) / 4) * 3 + (0px * (3 - 1))); } .section .container .part-s-4:not(.no-gutter) { width: calc(((100% - (10px * (4 - 1))) / 4) * 4 + (10px * (4 - 1))); } .section .container .part-s-4.no-gutter { width: calc(((100% - (0px * (4 - 1))) / 4) * 4 + (0px * (4 - 1))); } } @media (max-width: 375px) { .section .container .part-xs-1:not(.no-gutter) { width: calc(((100% - (10px * (4 - 1))) / 4) * 1 + (10px * (1 - 1))); } .section .container .part-xs-1.no-gutter { width: calc(((100% - (0px * (4 - 1))) / 4) * 1 + (0px * (1 - 1))); } .section .container .part-xs-2:not(.no-gutter) { width: calc(((100% - (10px * (4 - 1))) / 4) * 2 + (10px * (2 - 1))); } .section .container .part-xs-2.no-gutter { width: calc(((100% - (0px * (4 - 1))) / 4) * 2 + (0px * (2 - 1))); } .section .container .part-xs-3:not(.no-gutter) { width: calc(((100% - (10px * (4 - 1))) / 4) * 3 + (10px * (3 - 1))); } .section .container .part-xs-3.no-gutter { width: calc(((100% - (0px * (4 - 1))) / 4) * 3 + (0px * (3 - 1))); } .section .container .part-xs-4:not(.no-gutter) { width: calc(((100% - (10px * (4 - 1))) / 4) * 4 + (10px * (4 - 1))); } .section .container .part-xs-4.no-gutter { width: calc(((100% - (0px * (4 - 1))) / 4) * 4 + (0px * (4 - 1))); } } .section .container .part-top-0 { margin-top: 0px; } .section .container .part-left-0 { margin-left: 0px; } .section .container .part-right-0 { margin-right: 0px; } .section .container .part-bottom-0 { margin-bottom: calc(0px + 50px); } .section .container .part-top-1 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 1 + (24px * (1 - 1))); } .section .container .part-left-1 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 1 + (24px * (1 - 1))); } .section .container .part-right-1 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 1 + (24px * (1 - 1))); } .section .container .part-bottom-1 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 1 + (24px * (1 - 1))) + 50px); } .section .container .part-top-2 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 2 + (24px * (2 - 1))); } .section .container .part-left-2 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 2 + (24px * (2 - 1))); } .section .container .part-right-2 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 2 + (24px * (2 - 1))); } .section .container .part-bottom-2 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 2 + (24px * (2 - 1))) + 50px); } .section .container .part-top-3 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 3 + (24px * (3 - 1))); } .section .container .part-left-3 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 3 + (24px * (3 - 1))); } .section .container .part-right-3 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 3 + (24px * (3 - 1))); } .section .container .part-bottom-3 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 3 + (24px * (3 - 1))) + 50px); } .section .container .part-top-4 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 4 + (24px * (4 - 1))); } .section .container .part-left-4 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 4 + (24px * (4 - 1))); } .section .container .part-right-4 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 4 + (24px * (4 - 1))); } .section .container .part-bottom-4 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 4 + (24px * (4 - 1))) + 50px); } .section .container .part-top-5 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 5 + (24px * (5 - 1))); } .section .container .part-left-5 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 5 + (24px * (5 - 1))); } .section .container .part-right-5 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 5 + (24px * (5 - 1))); } .section .container .part-bottom-5 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 5 + (24px * (5 - 1))) + 50px); } .section .container .part-top-6 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 6 + (24px * (6 - 1))); } .section .container .part-left-6 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 6 + (24px * (6 - 1))); } .section .container .part-right-6 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 6 + (24px * (6 - 1))); } .section .container .part-bottom-6 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 6 + (24px * (6 - 1))) + 50px); } .section .container .part-top-7 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 7 + (24px * (7 - 1))); } .section .container .part-left-7 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 7 + (24px * (7 - 1))); } .section .container .part-right-7 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 7 + (24px * (7 - 1))); } .section .container .part-bottom-7 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 7 + (24px * (7 - 1))) + 50px); } .section .container .part-top-8 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 8 + (24px * (8 - 1))); } .section .container .part-left-8 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 8 + (24px * (8 - 1))); } .section .container .part-right-8 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 8 + (24px * (8 - 1))); } .section .container .part-bottom-8 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 8 + (24px * (8 - 1))) + 50px); } .section .container .part-top-9 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 9 + (24px * (9 - 1))); } .section .container .part-left-9 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 9 + (24px * (9 - 1))); } .section .container .part-right-9 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 9 + (24px * (9 - 1))); } .section .container .part-bottom-9 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 9 + (24px * (9 - 1))) + 50px); } .section .container .part-top-10 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 10 + (24px * (10 - 1))); } .section .container .part-left-10 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 10 + (24px * (10 - 1))); } .section .container .part-right-10 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 10 + (24px * (10 - 1))); } .section .container .part-bottom-10 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 10 + (24px * (10 - 1))) + 50px); } .section .container .part-top-11 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 11 + (24px * (11 - 1))); } .section .container .part-left-11 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 11 + (24px * (11 - 1))); } .section .container .part-right-11 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 11 + (24px * (11 - 1))); } .section .container .part-bottom-11 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 11 + (24px * (11 - 1))) + 50px); } .section .container .part-top-12 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 12 + (24px * (12 - 1))); } .section .container .part-left-12 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 12 + (24px * (12 - 1))); } .section .container .part-right-12 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 12 + (24px * (12 - 1))); } .section .container .part-bottom-12 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 12 + (24px * (12 - 1))) + 50px); } @media (max-width: 1024px) { .section .container .part-top-l-0 { margin-top: 0px; } .section .container .part-left-l-0 { margin-left: 0px; } .section .container .part-right-l-0 { margin-right: 0px; } .section .container .part-bottom-l-0 { margin-bottom: calc(0px + 50px); } .section .container .part-top-l-1 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 1 + (24px * (1 - 1))); } .section .container .part-left-l-1 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 1 + (24px * (1 - 1))); } .section .container .part-right-l-1 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 1 + (24px * (1 - 1))); } .section .container .part-bottom-l-1 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 1 + (24px * (1 - 1))) + 50px); } .section .container .part-top-l-2 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 2 + (24px * (2 - 1))); } .section .container .part-left-l-2 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 2 + (24px * (2 - 1))); } .section .container .part-right-l-2 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 2 + (24px * (2 - 1))); } .section .container .part-bottom-l-2 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 2 + (24px * (2 - 1))) + 50px); } .section .container .part-top-l-3 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 3 + (24px * (3 - 1))); } .section .container .part-left-l-3 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 3 + (24px * (3 - 1))); } .section .container .part-right-l-3 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 3 + (24px * (3 - 1))); } .section .container .part-bottom-l-3 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 3 + (24px * (3 - 1))) + 50px); } .section .container .part-top-l-4 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 4 + (24px * (4 - 1))); } .section .container .part-left-l-4 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 4 + (24px * (4 - 1))); } .section .container .part-right-l-4 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 4 + (24px * (4 - 1))); } .section .container .part-bottom-l-4 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 4 + (24px * (4 - 1))) + 50px); } .section .container .part-top-l-5 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 5 + (24px * (5 - 1))); } .section .container .part-left-l-5 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 5 + (24px * (5 - 1))); } .section .container .part-right-l-5 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 5 + (24px * (5 - 1))); } .section .container .part-bottom-l-5 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 5 + (24px * (5 - 1))) + 50px); } .section .container .part-top-l-6 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 6 + (24px * (6 - 1))); } .section .container .part-left-l-6 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 6 + (24px * (6 - 1))); } .section .container .part-right-l-6 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 6 + (24px * (6 - 1))); } .section .container .part-bottom-l-6 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 6 + (24px * (6 - 1))) + 50px); } .section .container .part-top-l-7 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 7 + (24px * (7 - 1))); } .section .container .part-left-l-7 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 7 + (24px * (7 - 1))); } .section .container .part-right-l-7 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 7 + (24px * (7 - 1))); } .section .container .part-bottom-l-7 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 7 + (24px * (7 - 1))) + 50px); } .section .container .part-top-l-8 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 8 + (24px * (8 - 1))); } .section .container .part-left-l-8 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 8 + (24px * (8 - 1))); } .section .container .part-right-l-8 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 8 + (24px * (8 - 1))); } .section .container .part-bottom-l-8 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 8 + (24px * (8 - 1))) + 50px); } .section .container .part-top-l-9 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 9 + (24px * (9 - 1))); } .section .container .part-left-l-9 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 9 + (24px * (9 - 1))); } .section .container .part-right-l-9 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 9 + (24px * (9 - 1))); } .section .container .part-bottom-l-9 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 9 + (24px * (9 - 1))) + 50px); } .section .container .part-top-l-10 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 10 + (24px * (10 - 1))); } .section .container .part-left-l-10 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 10 + (24px * (10 - 1))); } .section .container .part-right-l-10 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 10 + (24px * (10 - 1))); } .section .container .part-bottom-l-10 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 10 + (24px * (10 - 1))) + 50px); } .section .container .part-top-l-11 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 11 + (24px * (11 - 1))); } .section .container .part-left-l-11 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 11 + (24px * (11 - 1))); } .section .container .part-right-l-11 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 11 + (24px * (11 - 1))); } .section .container .part-bottom-l-11 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 11 + (24px * (11 - 1))) + 50px); } .section .container .part-top-l-12 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 12 + (24px * (12 - 1))); } .section .container .part-left-l-12 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 12 + (24px * (12 - 1))); } .section .container .part-right-l-12 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 12 + (24px * (12 - 1))); } .section .container .part-bottom-l-12 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 12 + (24px * (12 - 1))) + 50px); } } @media (max-width: 768px) { .section .container .part-top-m-0 { margin-top: 0px; } .section .container .part-left-m-0 { margin-left: 0px; } .section .container .part-right-m-0 { margin-right: 0px; } .section .container .part-bottom-m-0 { margin-bottom: calc(0px + 50px); } .section .container .part-top-m-1 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 1 + (24px * (1 - 1))); } .section .container .part-left-m-1 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 1 + (24px * (1 - 1))); } .section .container .part-right-m-1 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 1 + (24px * (1 - 1))); } .section .container .part-bottom-m-1 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 1 + (24px * (1 - 1))) + 50px); } .section .container .part-top-m-2 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 2 + (24px * (2 - 1))); } .section .container .part-left-m-2 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 2 + (24px * (2 - 1))); } .section .container .part-right-m-2 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 2 + (24px * (2 - 1))); } .section .container .part-bottom-m-2 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 2 + (24px * (2 - 1))) + 50px); } .section .container .part-top-m-3 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 3 + (24px * (3 - 1))); } .section .container .part-left-m-3 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 3 + (24px * (3 - 1))); } .section .container .part-right-m-3 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 3 + (24px * (3 - 1))); } .section .container .part-bottom-m-3 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 3 + (24px * (3 - 1))) + 50px); } .section .container .part-top-m-4 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 4 + (24px * (4 - 1))); } .section .container .part-left-m-4 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 4 + (24px * (4 - 1))); } .section .container .part-right-m-4 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 4 + (24px * (4 - 1))); } .section .container .part-bottom-m-4 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 4 + (24px * (4 - 1))) + 50px); } .section .container .part-top-m-5 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 5 + (24px * (5 - 1))); } .section .container .part-left-m-5 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 5 + (24px * (5 - 1))); } .section .container .part-right-m-5 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 5 + (24px * (5 - 1))); } .section .container .part-bottom-m-5 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 5 + (24px * (5 - 1))) + 50px); } .section .container .part-top-m-6 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 6 + (24px * (6 - 1))); } .section .container .part-left-m-6 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 6 + (24px * (6 - 1))); } .section .container .part-right-m-6 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 6 + (24px * (6 - 1))); } .section .container .part-bottom-m-6 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 6 + (24px * (6 - 1))) + 50px); } .section .container .part-top-m-7 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 7 + (24px * (7 - 1))); } .section .container .part-left-m-7 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 7 + (24px * (7 - 1))); } .section .container .part-right-m-7 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 7 + (24px * (7 - 1))); } .section .container .part-bottom-m-7 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 7 + (24px * (7 - 1))) + 50px); } .section .container .part-top-m-8 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 8 + (24px * (8 - 1))); } .section .container .part-left-m-8 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 8 + (24px * (8 - 1))); } .section .container .part-right-m-8 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 8 + (24px * (8 - 1))); } .section .container .part-bottom-m-8 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 8 + (24px * (8 - 1))) + 50px); } .section .container .part-top-m-9 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 9 + (24px * (9 - 1))); } .section .container .part-left-m-9 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 9 + (24px * (9 - 1))); } .section .container .part-right-m-9 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 9 + (24px * (9 - 1))); } .section .container .part-bottom-m-9 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 9 + (24px * (9 - 1))) + 50px); } .section .container .part-top-m-10 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 10 + (24px * (10 - 1))); } .section .container .part-left-m-10 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 10 + (24px * (10 - 1))); } .section .container .part-right-m-10 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 10 + (24px * (10 - 1))); } .section .container .part-bottom-m-10 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 10 + (24px * (10 - 1))) + 50px); } .section .container .part-top-m-11 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 11 + (24px * (11 - 1))); } .section .container .part-left-m-11 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 11 + (24px * (11 - 1))); } .section .container .part-right-m-11 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 11 + (24px * (11 - 1))); } .section .container .part-bottom-m-11 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 11 + (24px * (11 - 1))) + 50px); } .section .container .part-top-m-12 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 12 + (24px * (12 - 1))); } .section .container .part-left-m-12 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 12 + (24px * (12 - 1))); } .section .container .part-right-m-12 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 12 + (24px * (12 - 1))); } .section .container .part-bottom-m-12 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 12 + (24px * (12 - 1))) + 50px); } } @media (max-width: 576px) { .section .container .part-top-s-0 { margin-top: 0px; } .section .container .part-left-s-0 { margin-left: 0px; } .section .container .part-right-s-0 { margin-right: 0px; } .section .container .part-bottom-s-0 { margin-bottom: calc(0px + 30px); } .section .container .part-top-s-1 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 1 + (24px * (1 - 1))); } .section .container .part-left-s-1 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 1 + (24px * (1 - 1))); } .section .container .part-right-s-1 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 1 + (24px * (1 - 1))); } .section .container .part-bottom-s-1 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 1 + (24px * (1 - 1))) + 30px); } .section .container .part-top-s-2 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 2 + (24px * (2 - 1))); } .section .container .part-left-s-2 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 2 + (24px * (2 - 1))); } .section .container .part-right-s-2 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 2 + (24px * (2 - 1))); } .section .container .part-bottom-s-2 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 2 + (24px * (2 - 1))) + 30px); } .section .container .part-top-s-3 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 3 + (24px * (3 - 1))); } .section .container .part-left-s-3 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 3 + (24px * (3 - 1))); } .section .container .part-right-s-3 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 3 + (24px * (3 - 1))); } .section .container .part-bottom-s-3 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 3 + (24px * (3 - 1))) + 30px); } .section .container .part-top-s-4 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 4 + (24px * (4 - 1))); } .section .container .part-left-s-4 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 4 + (24px * (4 - 1))); } .section .container .part-right-s-4 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 4 + (24px * (4 - 1))); } .section .container .part-bottom-s-4 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 4 + (24px * (4 - 1))) + 30px); } .section .container .part-top-s-5 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 5 + (24px * (5 - 1))); } .section .container .part-left-s-5 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 5 + (24px * (5 - 1))); } .section .container .part-right-s-5 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 5 + (24px * (5 - 1))); } .section .container .part-bottom-s-5 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 5 + (24px * (5 - 1))) + 30px); } .section .container .part-top-s-6 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 6 + (24px * (6 - 1))); } .section .container .part-left-s-6 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 6 + (24px * (6 - 1))); } .section .container .part-right-s-6 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 6 + (24px * (6 - 1))); } .section .container .part-bottom-s-6 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 6 + (24px * (6 - 1))) + 30px); } .section .container .part-top-s-7 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 7 + (24px * (7 - 1))); } .section .container .part-left-s-7 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 7 + (24px * (7 - 1))); } .section .container .part-right-s-7 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 7 + (24px * (7 - 1))); } .section .container .part-bottom-s-7 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 7 + (24px * (7 - 1))) + 30px); } .section .container .part-top-s-8 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 8 + (24px * (8 - 1))); } .section .container .part-left-s-8 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 8 + (24px * (8 - 1))); } .section .container .part-right-s-8 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 8 + (24px * (8 - 1))); } .section .container .part-bottom-s-8 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 8 + (24px * (8 - 1))) + 30px); } .section .container .part-top-s-9 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 9 + (24px * (9 - 1))); } .section .container .part-left-s-9 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 9 + (24px * (9 - 1))); } .section .container .part-right-s-9 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 9 + (24px * (9 - 1))); } .section .container .part-bottom-s-9 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 9 + (24px * (9 - 1))) + 30px); } .section .container .part-top-s-10 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 10 + (24px * (10 - 1))); } .section .container .part-left-s-10 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 10 + (24px * (10 - 1))); } .section .container .part-right-s-10 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 10 + (24px * (10 - 1))); } .section .container .part-bottom-s-10 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 10 + (24px * (10 - 1))) + 30px); } .section .container .part-top-s-11 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 11 + (24px * (11 - 1))); } .section .container .part-left-s-11 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 11 + (24px * (11 - 1))); } .section .container .part-right-s-11 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 11 + (24px * (11 - 1))); } .section .container .part-bottom-s-11 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 11 + (24px * (11 - 1))) + 30px); } .section .container .part-top-s-12 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 12 + (24px * (12 - 1))); } .section .container .part-left-s-12 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 12 + (24px * (12 - 1))); } .section .container .part-right-s-12 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 12 + (24px * (12 - 1))); } .section .container .part-bottom-s-12 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 12 + (24px * (12 - 1))) + 30px); } } @media (max-width: 375px) { .section .container .part-top-xs-0 { margin-top: 0px; } .section .container .part-left-xs-0 { margin-left: 0px; } .section .container .part-right-xs-0 { margin-right: 0px; } .section .container .part-bottom-xs-0 { margin-bottom: calc(0px + 30px); } .section .container .part-top-xs-1 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 1 + (24px * (1 - 1))); } .section .container .part-left-xs-1 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 1 + (24px * (1 - 1))); } .section .container .part-right-xs-1 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 1 + (24px * (1 - 1))); } .section .container .part-bottom-xs-1 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 1 + (24px * (1 - 1))) + 30px); } .section .container .part-top-xs-2 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 2 + (24px * (2 - 1))); } .section .container .part-left-xs-2 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 2 + (24px * (2 - 1))); } .section .container .part-right-xs-2 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 2 + (24px * (2 - 1))); } .section .container .part-bottom-xs-2 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 2 + (24px * (2 - 1))) + 30px); } .section .container .part-top-xs-3 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 3 + (24px * (3 - 1))); } .section .container .part-left-xs-3 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 3 + (24px * (3 - 1))); } .section .container .part-right-xs-3 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 3 + (24px * (3 - 1))); } .section .container .part-bottom-xs-3 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 3 + (24px * (3 - 1))) + 30px); } .section .container .part-top-xs-4 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 4 + (24px * (4 - 1))); } .section .container .part-left-xs-4 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 4 + (24px * (4 - 1))); } .section .container .part-right-xs-4 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 4 + (24px * (4 - 1))); } .section .container .part-bottom-xs-4 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 4 + (24px * (4 - 1))) + 30px); } .section .container .part-top-xs-5 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 5 + (24px * (5 - 1))); } .section .container .part-left-xs-5 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 5 + (24px * (5 - 1))); } .section .container .part-right-xs-5 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 5 + (24px * (5 - 1))); } .section .container .part-bottom-xs-5 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 5 + (24px * (5 - 1))) + 30px); } .section .container .part-top-xs-6 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 6 + (24px * (6 - 1))); } .section .container .part-left-xs-6 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 6 + (24px * (6 - 1))); } .section .container .part-right-xs-6 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 6 + (24px * (6 - 1))); } .section .container .part-bottom-xs-6 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 6 + (24px * (6 - 1))) + 30px); } .section .container .part-top-xs-7 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 7 + (24px * (7 - 1))); } .section .container .part-left-xs-7 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 7 + (24px * (7 - 1))); } .section .container .part-right-xs-7 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 7 + (24px * (7 - 1))); } .section .container .part-bottom-xs-7 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 7 + (24px * (7 - 1))) + 30px); } .section .container .part-top-xs-8 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 8 + (24px * (8 - 1))); } .section .container .part-left-xs-8 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 8 + (24px * (8 - 1))); } .section .container .part-right-xs-8 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 8 + (24px * (8 - 1))); } .section .container .part-bottom-xs-8 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 8 + (24px * (8 - 1))) + 30px); } .section .container .part-top-xs-9 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 9 + (24px * (9 - 1))); } .section .container .part-left-xs-9 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 9 + (24px * (9 - 1))); } .section .container .part-right-xs-9 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 9 + (24px * (9 - 1))); } .section .container .part-bottom-xs-9 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 9 + (24px * (9 - 1))) + 30px); } .section .container .part-top-xs-10 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 10 + (24px * (10 - 1))); } .section .container .part-left-xs-10 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 10 + (24px * (10 - 1))); } .section .container .part-right-xs-10 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 10 + (24px * (10 - 1))); } .section .container .part-bottom-xs-10 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 10 + (24px * (10 - 1))) + 30px); } .section .container .part-top-xs-11 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 11 + (24px * (11 - 1))); } .section .container .part-left-xs-11 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 11 + (24px * (11 - 1))); } .section .container .part-right-xs-11 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 11 + (24px * (11 - 1))); } .section .container .part-bottom-xs-11 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 11 + (24px * (11 - 1))) + 30px); } .section .container .part-top-xs-12 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 12 + (24px * (12 - 1))); } .section .container .part-left-xs-12 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 12 + (24px * (12 - 1))); } .section .container .part-right-xs-12 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 12 + (24px * (12 - 1))); } .section .container .part-bottom-xs-12 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 12 + (24px * (12 - 1))) + 30px); } } @media (max-width: 375px) { .section .container .part-xs-0 { display: none; } } @media (max-width: 576px) { .section .container .part-s-0 { display: none; } } @media (max-width: 768px) { .section .container .part-m-0 { display: none; } } @media (max-width: 1024px) { .section .container .part-l-0 { display: none; } } @media (max-width: 1280px) { .section .container .part-xl-0 { display: none; } } .section .container [class*=part].-justify-start { display: flex; justify-content: flex-start; } .section .container [class*=part].-justify-center { display: flex; justify-content: center; } .section .container [class*=part].-justify-end { display: flex; justify-content: flex-end; } .section .container [class*=part].-align-start { display: flex; align-items: flex-start; } .section .container [class*=part].-align-center { display: flex; align-items: center; } .section .container [class*=part].-align-end { display: flex; align-items: flex-end; } .section .container [class*=part].-text-left { text-align: left; } .section .container [class*=part].-text-center { text-align: center; } .section .container [class*=part].-text-right { text-align: right; } .section .container .part-1:not(.no-gutter) { width: calc(((100% - (24px * (12 - 1))) / 12) * 1 + (24px * (1 - 1))); } .section .container .part-1.no-gutter { width: calc(((100% - (0px * (12 - 1))) / 12) * 1 + (0px * (1 - 1))); } .section .container .part-2:not(.no-gutter) { width: calc(((100% - (24px * (12 - 1))) / 12) * 2 + (24px * (2 - 1))); } .section .container .part-2.no-gutter { width: calc(((100% - (0px * (12 - 1))) / 12) * 2 + (0px * (2 - 1))); } .section .container .part-3:not(.no-gutter) { width: calc(((100% - (24px * (12 - 1))) / 12) * 3 + (24px * (3 - 1))); } .section .container .part-3.no-gutter { width: calc(((100% - (0px * (12 - 1))) / 12) * 3 + (0px * (3 - 1))); } .section .container .part-4:not(.no-gutter) { width: calc(((100% - (24px * (12 - 1))) / 12) * 4 + (24px * (4 - 1))); } .section .container .part-4.no-gutter { width: calc(((100% - (0px * (12 - 1))) / 12) * 4 + (0px * (4 - 1))); } .section .container .part-5:not(.no-gutter) { width: calc(((100% - (24px * (12 - 1))) / 12) * 5 + (24px * (5 - 1))); } .section .container .part-5.no-gutter { width: calc(((100% - (0px * (12 - 1))) / 12) * 5 + (0px * (5 - 1))); } .section .container .part-6:not(.no-gutter) { width: calc(((100% - (24px * (12 - 1))) / 12) * 6 + (24px * (6 - 1))); } .section .container .part-6.no-gutter { width: calc(((100% - (0px * (12 - 1))) / 12) * 6 + (0px * (6 - 1))); } .section .container .part-7:not(.no-gutter) { width: calc(((100% - (24px * (12 - 1))) / 12) * 7 + (24px * (7 - 1))); } .section .container .part-7.no-gutter { width: calc(((100% - (0px * (12 - 1))) / 12) * 7 + (0px * (7 - 1))); } .section .container .part-8:not(.no-gutter) { width: calc(((100% - (24px * (12 - 1))) / 12) * 8 + (24px * (8 - 1))); } .section .container .part-8.no-gutter { width: calc(((100% - (0px * (12 - 1))) / 12) * 8 + (0px * (8 - 1))); } .section .container .part-9:not(.no-gutter) { width: calc(((100% - (24px * (12 - 1))) / 12) * 9 + (24px * (9 - 1))); } .section .container .part-9.no-gutter { width: calc(((100% - (0px * (12 - 1))) / 12) * 9 + (0px * (9 - 1))); } .section .container .part-10:not(.no-gutter) { width: calc(((100% - (24px * (12 - 1))) / 12) * 10 + (24px * (10 - 1))); } .section .container .part-10.no-gutter { width: calc(((100% - (0px * (12 - 1))) / 12) * 10 + (0px * (10 - 1))); } .section .container .part-11:not(.no-gutter) { width: calc(((100% - (24px * (12 - 1))) / 12) * 11 + (24px * (11 - 1))); } .section .container .part-11.no-gutter { width: calc(((100% - (0px * (12 - 1))) / 12) * 11 + (0px * (11 - 1))); } .section .container .part-12:not(.no-gutter) { width: calc(((100% - (24px * (12 - 1))) / 12) * 12 + (24px * (12 - 1))); } .section .container .part-12.no-gutter { width: calc(((100% - (0px * (12 - 1))) / 12) * 12 + (0px * (12 - 1))); } @media (max-width: 1280px) { .section .container .part-xl-1:not(.no-gutter) { width: calc(((100% - (24px * (12 - 1))) / 12) * 1 + (24px * (1 - 1))); } .section .container .part-xl-1.no-gutter { width: calc(((100% - (0px * (12 - 1))) / 12) * 1 + (0px * (1 - 1))); } .section .container .part-xl-2:not(.no-gutter) { width: calc(((100% - (24px * (12 - 1))) / 12) * 2 + (24px * (2 - 1))); } .section .container .part-xl-2.no-gutter { width: calc(((100% - (0px * (12 - 1))) / 12) * 2 + (0px * (2 - 1))); } .section .container .part-xl-3:not(.no-gutter) { width: calc(((100% - (24px * (12 - 1))) / 12) * 3 + (24px * (3 - 1))); } .section .container .part-xl-3.no-gutter { width: calc(((100% - (0px * (12 - 1))) / 12) * 3 + (0px * (3 - 1))); } .section .container .part-xl-4:not(.no-gutter) { width: calc(((100% - (24px * (12 - 1))) / 12) * 4 + (24px * (4 - 1))); } .section .container .part-xl-4.no-gutter { width: calc(((100% - (0px * (12 - 1))) / 12) * 4 + (0px * (4 - 1))); } .section .container .part-xl-5:not(.no-gutter) { width: calc(((100% - (24px * (12 - 1))) / 12) * 5 + (24px * (5 - 1))); } .section .container .part-xl-5.no-gutter { width: calc(((100% - (0px * (12 - 1))) / 12) * 5 + (0px * (5 - 1))); } .section .container .part-xl-6:not(.no-gutter) { width: calc(((100% - (24px * (12 - 1))) / 12) * 6 + (24px * (6 - 1))); } .section .container .part-xl-6.no-gutter { width: calc(((100% - (0px * (12 - 1))) / 12) * 6 + (0px * (6 - 1))); } .section .container .part-xl-7:not(.no-gutter) { width: calc(((100% - (24px * (12 - 1))) / 12) * 7 + (24px * (7 - 1))); } .section .container .part-xl-7.no-gutter { width: calc(((100% - (0px * (12 - 1))) / 12) * 7 + (0px * (7 - 1))); } .section .container .part-xl-8:not(.no-gutter) { width: calc(((100% - (24px * (12 - 1))) / 12) * 8 + (24px * (8 - 1))); } .section .container .part-xl-8.no-gutter { width: calc(((100% - (0px * (12 - 1))) / 12) * 8 + (0px * (8 - 1))); } .section .container .part-xl-9:not(.no-gutter) { width: calc(((100% - (24px * (12 - 1))) / 12) * 9 + (24px * (9 - 1))); } .section .container .part-xl-9.no-gutter { width: calc(((100% - (0px * (12 - 1))) / 12) * 9 + (0px * (9 - 1))); } .section .container .part-xl-10:not(.no-gutter) { width: calc(((100% - (24px * (12 - 1))) / 12) * 10 + (24px * (10 - 1))); } .section .container .part-xl-10.no-gutter { width: calc(((100% - (0px * (12 - 1))) / 12) * 10 + (0px * (10 - 1))); } .section .container .part-xl-11:not(.no-gutter) { width: calc(((100% - (24px * (12 - 1))) / 12) * 11 + (24px * (11 - 1))); } .section .container .part-xl-11.no-gutter { width: calc(((100% - (0px * (12 - 1))) / 12) * 11 + (0px * (11 - 1))); } .section .container .part-xl-12:not(.no-gutter) { width: calc(((100% - (24px * (12 - 1))) / 12) * 12 + (24px * (12 - 1))); } .section .container .part-xl-12.no-gutter { width: calc(((100% - (0px * (12 - 1))) / 12) * 12 + (0px * (12 - 1))); } } @media (max-width: 1024px) { .section .container .part-l-1:not(.no-gutter) { width: calc(((100% - (16px * (8 - 1))) / 8) * 1 + (16px * (1 - 1))); } .section .container .part-l-1.no-gutter { width: calc(((100% - (0px * (8 - 1))) / 8) * 1 + (0px * (1 - 1))); } .section .container .part-l-2:not(.no-gutter) { width: calc(((100% - (16px * (8 - 1))) / 8) * 2 + (16px * (2 - 1))); } .section .container .part-l-2.no-gutter { width: calc(((100% - (0px * (8 - 1))) / 8) * 2 + (0px * (2 - 1))); } .section .container .part-l-3:not(.no-gutter) { width: calc(((100% - (16px * (8 - 1))) / 8) * 3 + (16px * (3 - 1))); } .section .container .part-l-3.no-gutter { width: calc(((100% - (0px * (8 - 1))) / 8) * 3 + (0px * (3 - 1))); } .section .container .part-l-4:not(.no-gutter) { width: calc(((100% - (16px * (8 - 1))) / 8) * 4 + (16px * (4 - 1))); } .section .container .part-l-4.no-gutter { width: calc(((100% - (0px * (8 - 1))) / 8) * 4 + (0px * (4 - 1))); } .section .container .part-l-5:not(.no-gutter) { width: calc(((100% - (16px * (8 - 1))) / 8) * 5 + (16px * (5 - 1))); } .section .container .part-l-5.no-gutter { width: calc(((100% - (0px * (8 - 1))) / 8) * 5 + (0px * (5 - 1))); } .section .container .part-l-6:not(.no-gutter) { width: calc(((100% - (16px * (8 - 1))) / 8) * 6 + (16px * (6 - 1))); } .section .container .part-l-6.no-gutter { width: calc(((100% - (0px * (8 - 1))) / 8) * 6 + (0px * (6 - 1))); } .section .container .part-l-7:not(.no-gutter) { width: calc(((100% - (16px * (8 - 1))) / 8) * 7 + (16px * (7 - 1))); } .section .container .part-l-7.no-gutter { width: calc(((100% - (0px * (8 - 1))) / 8) * 7 + (0px * (7 - 1))); } .section .container .part-l-8:not(.no-gutter) { width: calc(((100% - (16px * (8 - 1))) / 8) * 8 + (16px * (8 - 1))); } .section .container .part-l-8.no-gutter { width: calc(((100% - (0px * (8 - 1))) / 8) * 8 + (0px * (8 - 1))); } } @media (max-width: 768px) { .section .container .part-m-1:not(.no-gutter) { width: calc(((100% - (14px * (8 - 1))) / 8) * 1 + (14px * (1 - 1))); } .section .container .part-m-1.no-gutter { width: calc(((100% - (0px * (8 - 1))) / 8) * 1 + (0px * (1 - 1))); } .section .container .part-m-2:not(.no-gutter) { width: calc(((100% - (14px * (8 - 1))) / 8) * 2 + (14px * (2 - 1))); } .section .container .part-m-2.no-gutter { width: calc(((100% - (0px * (8 - 1))) / 8) * 2 + (0px * (2 - 1))); } .section .container .part-m-3:not(.no-gutter) { width: calc(((100% - (14px * (8 - 1))) / 8) * 3 + (14px * (3 - 1))); } .section .container .part-m-3.no-gutter { width: calc(((100% - (0px * (8 - 1))) / 8) * 3 + (0px * (3 - 1))); } .section .container .part-m-4:not(.no-gutter) { width: calc(((100% - (14px * (8 - 1))) / 8) * 4 + (14px * (4 - 1))); } .section .container .part-m-4.no-gutter { width: calc(((100% - (0px * (8 - 1))) / 8) * 4 + (0px * (4 - 1))); } .section .container .part-m-5:not(.no-gutter) { width: calc(((100% - (14px * (8 - 1))) / 8) * 5 + (14px * (5 - 1))); } .section .container .part-m-5.no-gutter { width: calc(((100% - (0px * (8 - 1))) / 8) * 5 + (0px * (5 - 1))); } .section .container .part-m-6:not(.no-gutter) { width: calc(((100% - (14px * (8 - 1))) / 8) * 6 + (14px * (6 - 1))); } .section .container .part-m-6.no-gutter { width: calc(((100% - (0px * (8 - 1))) / 8) * 6 + (0px * (6 - 1))); } .section .container .part-m-7:not(.no-gutter) { width: calc(((100% - (14px * (8 - 1))) / 8) * 7 + (14px * (7 - 1))); } .section .container .part-m-7.no-gutter { width: calc(((100% - (0px * (8 - 1))) / 8) * 7 + (0px * (7 - 1))); } .section .container .part-m-8:not(.no-gutter) { width: calc(((100% - (14px * (8 - 1))) / 8) * 8 + (14px * (8 - 1))); } .section .container .part-m-8.no-gutter { width: calc(((100% - (0px * (8 - 1))) / 8) * 8 + (0px * (8 - 1))); } } @media (max-width: 576px) { .section .container .part-s-1:not(.no-gutter) { width: calc(((100% - (10px * (4 - 1))) / 4) * 1 + (10px * (1 - 1))); } .section .container .part-s-1.no-gutter { width: calc(((100% - (0px * (4 - 1))) / 4) * 1 + (0px * (1 - 1))); } .section .container .part-s-2:not(.no-gutter) { width: calc(((100% - (10px * (4 - 1))) / 4) * 2 + (10px * (2 - 1))); } .section .container .part-s-2.no-gutter { width: calc(((100% - (0px * (4 - 1))) / 4) * 2 + (0px * (2 - 1))); } .section .container .part-s-3:not(.no-gutter) { width: calc(((100% - (10px * (4 - 1))) / 4) * 3 + (10px * (3 - 1))); } .section .container .part-s-3.no-gutter { width: calc(((100% - (0px * (4 - 1))) / 4) * 3 + (0px * (3 - 1))); } .section .container .part-s-4:not(.no-gutter) { width: calc(((100% - (10px * (4 - 1))) / 4) * 4 + (10px * (4 - 1))); } .section .container .part-s-4.no-gutter { width: calc(((100% - (0px * (4 - 1))) / 4) * 4 + (0px * (4 - 1))); } } @media (max-width: 375px) { .section .container .part-xs-1:not(.no-gutter) { width: calc(((100% - (10px * (4 - 1))) / 4) * 1 + (10px * (1 - 1))); } .section .container .part-xs-1.no-gutter { width: calc(((100% - (0px * (4 - 1))) / 4) * 1 + (0px * (1 - 1))); } .section .container .part-xs-2:not(.no-gutter) { width: calc(((100% - (10px * (4 - 1))) / 4) * 2 + (10px * (2 - 1))); } .section .container .part-xs-2.no-gutter { width: calc(((100% - (0px * (4 - 1))) / 4) * 2 + (0px * (2 - 1))); } .section .container .part-xs-3:not(.no-gutter) { width: calc(((100% - (10px * (4 - 1))) / 4) * 3 + (10px * (3 - 1))); } .section .container .part-xs-3.no-gutter { width: calc(((100% - (0px * (4 - 1))) / 4) * 3 + (0px * (3 - 1))); } .section .container .part-xs-4:not(.no-gutter) { width: calc(((100% - (10px * (4 - 1))) / 4) * 4 + (10px * (4 - 1))); } .section .container .part-xs-4.no-gutter { width: calc(((100% - (0px * (4 - 1))) / 4) * 4 + (0px * (4 - 1))); } } .section .container .part-top-0 { margin-top: 0px; } .section .container .part-left-0 { margin-left: 0px; } .section .container .part-right-0 { margin-right: 0px; } .section .container .part-bottom-0 { margin-bottom: calc(0px + 50px); } .section .container .part-top-1 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 1 + (24px * (1 - 1))); } .section .container .part-left-1 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 1 + (24px * (1 - 1))); } .section .container .part-right-1 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 1 + (24px * (1 - 1))); } .section .container .part-bottom-1 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 1 + (24px * (1 - 1))) + 50px); } .section .container .part-top-2 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 2 + (24px * (2 - 1))); } .section .container .part-left-2 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 2 + (24px * (2 - 1))); } .section .container .part-right-2 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 2 + (24px * (2 - 1))); } .section .container .part-bottom-2 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 2 + (24px * (2 - 1))) + 50px); } .section .container .part-top-3 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 3 + (24px * (3 - 1))); } .section .container .part-left-3 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 3 + (24px * (3 - 1))); } .section .container .part-right-3 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 3 + (24px * (3 - 1))); } .section .container .part-bottom-3 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 3 + (24px * (3 - 1))) + 50px); } .section .container .part-top-4 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 4 + (24px * (4 - 1))); } .section .container .part-left-4 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 4 + (24px * (4 - 1))); } .section .container .part-right-4 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 4 + (24px * (4 - 1))); } .section .container .part-bottom-4 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 4 + (24px * (4 - 1))) + 50px); } .section .container .part-top-5 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 5 + (24px * (5 - 1))); } .section .container .part-left-5 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 5 + (24px * (5 - 1))); } .section .container .part-right-5 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 5 + (24px * (5 - 1))); } .section .container .part-bottom-5 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 5 + (24px * (5 - 1))) + 50px); } .section .container .part-top-6 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 6 + (24px * (6 - 1))); } .section .container .part-left-6 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 6 + (24px * (6 - 1))); } .section .container .part-right-6 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 6 + (24px * (6 - 1))); } .section .container .part-bottom-6 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 6 + (24px * (6 - 1))) + 50px); } .section .container .part-top-7 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 7 + (24px * (7 - 1))); } .section .container .part-left-7 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 7 + (24px * (7 - 1))); } .section .container .part-right-7 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 7 + (24px * (7 - 1))); } .section .container .part-bottom-7 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 7 + (24px * (7 - 1))) + 50px); } .section .container .part-top-8 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 8 + (24px * (8 - 1))); } .section .container .part-left-8 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 8 + (24px * (8 - 1))); } .section .container .part-right-8 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 8 + (24px * (8 - 1))); } .section .container .part-bottom-8 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 8 + (24px * (8 - 1))) + 50px); } .section .container .part-top-9 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 9 + (24px * (9 - 1))); } .section .container .part-left-9 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 9 + (24px * (9 - 1))); } .section .container .part-right-9 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 9 + (24px * (9 - 1))); } .section .container .part-bottom-9 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 9 + (24px * (9 - 1))) + 50px); } .section .container .part-top-10 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 10 + (24px * (10 - 1))); } .section .container .part-left-10 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 10 + (24px * (10 - 1))); } .section .container .part-right-10 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 10 + (24px * (10 - 1))); } .section .container .part-bottom-10 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 10 + (24px * (10 - 1))) + 50px); } .section .container .part-top-11 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 11 + (24px * (11 - 1))); } .section .container .part-left-11 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 11 + (24px * (11 - 1))); } .section .container .part-right-11 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 11 + (24px * (11 - 1))); } .section .container .part-bottom-11 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 11 + (24px * (11 - 1))) + 50px); } .section .container .part-top-12 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 12 + (24px * (12 - 1))); } .section .container .part-left-12 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 12 + (24px * (12 - 1))); } .section .container .part-right-12 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 12 + (24px * (12 - 1))); } .section .container .part-bottom-12 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 12 + (24px * (12 - 1))) + 50px); } @media (max-width: 1024px) { .section .container .part-top-l-0 { margin-top: 0px; } .section .container .part-left-l-0 { margin-left: 0px; } .section .container .part-right-l-0 { margin-right: 0px; } .section .container .part-bottom-l-0 { margin-bottom: calc(0px + 50px); } .section .container .part-top-l-1 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 1 + (24px * (1 - 1))); } .section .container .part-left-l-1 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 1 + (24px * (1 - 1))); } .section .container .part-right-l-1 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 1 + (24px * (1 - 1))); } .section .container .part-bottom-l-1 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 1 + (24px * (1 - 1))) + 50px); } .section .container .part-top-l-2 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 2 + (24px * (2 - 1))); } .section .container .part-left-l-2 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 2 + (24px * (2 - 1))); } .section .container .part-right-l-2 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 2 + (24px * (2 - 1))); } .section .container .part-bottom-l-2 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 2 + (24px * (2 - 1))) + 50px); } .section .container .part-top-l-3 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 3 + (24px * (3 - 1))); } .section .container .part-left-l-3 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 3 + (24px * (3 - 1))); } .section .container .part-right-l-3 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 3 + (24px * (3 - 1))); } .section .container .part-bottom-l-3 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 3 + (24px * (3 - 1))) + 50px); } .section .container .part-top-l-4 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 4 + (24px * (4 - 1))); } .section .container .part-left-l-4 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 4 + (24px * (4 - 1))); } .section .container .part-right-l-4 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 4 + (24px * (4 - 1))); } .section .container .part-bottom-l-4 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 4 + (24px * (4 - 1))) + 50px); } .section .container .part-top-l-5 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 5 + (24px * (5 - 1))); } .section .container .part-left-l-5 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 5 + (24px * (5 - 1))); } .section .container .part-right-l-5 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 5 + (24px * (5 - 1))); } .section .container .part-bottom-l-5 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 5 + (24px * (5 - 1))) + 50px); } .section .container .part-top-l-6 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 6 + (24px * (6 - 1))); } .section .container .part-left-l-6 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 6 + (24px * (6 - 1))); } .section .container .part-right-l-6 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 6 + (24px * (6 - 1))); } .section .container .part-bottom-l-6 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 6 + (24px * (6 - 1))) + 50px); } .section .container .part-top-l-7 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 7 + (24px * (7 - 1))); } .section .container .part-left-l-7 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 7 + (24px * (7 - 1))); } .section .container .part-right-l-7 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 7 + (24px * (7 - 1))); } .section .container .part-bottom-l-7 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 7 + (24px * (7 - 1))) + 50px); } .section .container .part-top-l-8 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 8 + (24px * (8 - 1))); } .section .container .part-left-l-8 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 8 + (24px * (8 - 1))); } .section .container .part-right-l-8 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 8 + (24px * (8 - 1))); } .section .container .part-bottom-l-8 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 8 + (24px * (8 - 1))) + 50px); } .section .container .part-top-l-9 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 9 + (24px * (9 - 1))); } .section .container .part-left-l-9 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 9 + (24px * (9 - 1))); } .section .container .part-right-l-9 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 9 + (24px * (9 - 1))); } .section .container .part-bottom-l-9 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 9 + (24px * (9 - 1))) + 50px); } .section .container .part-top-l-10 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 10 + (24px * (10 - 1))); } .section .container .part-left-l-10 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 10 + (24px * (10 - 1))); } .section .container .part-right-l-10 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 10 + (24px * (10 - 1))); } .section .container .part-bottom-l-10 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 10 + (24px * (10 - 1))) + 50px); } .section .container .part-top-l-11 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 11 + (24px * (11 - 1))); } .section .container .part-left-l-11 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 11 + (24px * (11 - 1))); } .section .container .part-right-l-11 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 11 + (24px * (11 - 1))); } .section .container .part-bottom-l-11 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 11 + (24px * (11 - 1))) + 50px); } .section .container .part-top-l-12 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 12 + (24px * (12 - 1))); } .section .container .part-left-l-12 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 12 + (24px * (12 - 1))); } .section .container .part-right-l-12 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 12 + (24px * (12 - 1))); } .section .container .part-bottom-l-12 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 12 + (24px * (12 - 1))) + 50px); } } @media (max-width: 768px) { .section .container .part-top-m-0 { margin-top: 0px; } .section .container .part-left-m-0 { margin-left: 0px; } .section .container .part-right-m-0 { margin-right: 0px; } .section .container .part-bottom-m-0 { margin-bottom: calc(0px + 50px); } .section .container .part-top-m-1 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 1 + (24px * (1 - 1))); } .section .container .part-left-m-1 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 1 + (24px * (1 - 1))); } .section .container .part-right-m-1 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 1 + (24px * (1 - 1))); } .section .container .part-bottom-m-1 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 1 + (24px * (1 - 1))) + 50px); } .section .container .part-top-m-2 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 2 + (24px * (2 - 1))); } .section .container .part-left-m-2 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 2 + (24px * (2 - 1))); } .section .container .part-right-m-2 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 2 + (24px * (2 - 1))); } .section .container .part-bottom-m-2 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 2 + (24px * (2 - 1))) + 50px); } .section .container .part-top-m-3 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 3 + (24px * (3 - 1))); } .section .container .part-left-m-3 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 3 + (24px * (3 - 1))); } .section .container .part-right-m-3 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 3 + (24px * (3 - 1))); } .section .container .part-bottom-m-3 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 3 + (24px * (3 - 1))) + 50px); } .section .container .part-top-m-4 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 4 + (24px * (4 - 1))); } .section .container .part-left-m-4 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 4 + (24px * (4 - 1))); } .section .container .part-right-m-4 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 4 + (24px * (4 - 1))); } .section .container .part-bottom-m-4 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 4 + (24px * (4 - 1))) + 50px); } .section .container .part-top-m-5 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 5 + (24px * (5 - 1))); } .section .container .part-left-m-5 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 5 + (24px * (5 - 1))); } .section .container .part-right-m-5 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 5 + (24px * (5 - 1))); } .section .container .part-bottom-m-5 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 5 + (24px * (5 - 1))) + 50px); } .section .container .part-top-m-6 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 6 + (24px * (6 - 1))); } .section .container .part-left-m-6 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 6 + (24px * (6 - 1))); } .section .container .part-right-m-6 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 6 + (24px * (6 - 1))); } .section .container .part-bottom-m-6 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 6 + (24px * (6 - 1))) + 50px); } .section .container .part-top-m-7 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 7 + (24px * (7 - 1))); } .section .container .part-left-m-7 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 7 + (24px * (7 - 1))); } .section .container .part-right-m-7 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 7 + (24px * (7 - 1))); } .section .container .part-bottom-m-7 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 7 + (24px * (7 - 1))) + 50px); } .section .container .part-top-m-8 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 8 + (24px * (8 - 1))); } .section .container .part-left-m-8 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 8 + (24px * (8 - 1))); } .section .container .part-right-m-8 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 8 + (24px * (8 - 1))); } .section .container .part-bottom-m-8 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 8 + (24px * (8 - 1))) + 50px); } .section .container .part-top-m-9 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 9 + (24px * (9 - 1))); } .section .container .part-left-m-9 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 9 + (24px * (9 - 1))); } .section .container .part-right-m-9 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 9 + (24px * (9 - 1))); } .section .container .part-bottom-m-9 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 9 + (24px * (9 - 1))) + 50px); } .section .container .part-top-m-10 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 10 + (24px * (10 - 1))); } .section .container .part-left-m-10 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 10 + (24px * (10 - 1))); } .section .container .part-right-m-10 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 10 + (24px * (10 - 1))); } .section .container .part-bottom-m-10 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 10 + (24px * (10 - 1))) + 50px); } .section .container .part-top-m-11 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 11 + (24px * (11 - 1))); } .section .container .part-left-m-11 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 11 + (24px * (11 - 1))); } .section .container .part-right-m-11 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 11 + (24px * (11 - 1))); } .section .container .part-bottom-m-11 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 11 + (24px * (11 - 1))) + 50px); } .section .container .part-top-m-12 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 12 + (24px * (12 - 1))); } .section .container .part-left-m-12 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 12 + (24px * (12 - 1))); } .section .container .part-right-m-12 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 12 + (24px * (12 - 1))); } .section .container .part-bottom-m-12 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 12 + (24px * (12 - 1))) + 50px); } } @media (max-width: 576px) { .section .container .part-top-s-0 { margin-top: 0px; } .section .container .part-left-s-0 { margin-left: 0px; } .section .container .part-right-s-0 { margin-right: 0px; } .section .container .part-bottom-s-0 { margin-bottom: calc(0px + 30px); } .section .container .part-top-s-1 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 1 + (24px * (1 - 1))); } .section .container .part-left-s-1 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 1 + (24px * (1 - 1))); } .section .container .part-right-s-1 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 1 + (24px * (1 - 1))); } .section .container .part-bottom-s-1 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 1 + (24px * (1 - 1))) + 30px); } .section .container .part-top-s-2 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 2 + (24px * (2 - 1))); } .section .container .part-left-s-2 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 2 + (24px * (2 - 1))); } .section .container .part-right-s-2 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 2 + (24px * (2 - 1))); } .section .container .part-bottom-s-2 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 2 + (24px * (2 - 1))) + 30px); } .section .container .part-top-s-3 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 3 + (24px * (3 - 1))); } .section .container .part-left-s-3 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 3 + (24px * (3 - 1))); } .section .container .part-right-s-3 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 3 + (24px * (3 - 1))); } .section .container .part-bottom-s-3 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 3 + (24px * (3 - 1))) + 30px); } .section .container .part-top-s-4 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 4 + (24px * (4 - 1))); } .section .container .part-left-s-4 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 4 + (24px * (4 - 1))); } .section .container .part-right-s-4 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 4 + (24px * (4 - 1))); } .section .container .part-bottom-s-4 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 4 + (24px * (4 - 1))) + 30px); } .section .container .part-top-s-5 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 5 + (24px * (5 - 1))); } .section .container .part-left-s-5 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 5 + (24px * (5 - 1))); } .section .container .part-right-s-5 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 5 + (24px * (5 - 1))); } .section .container .part-bottom-s-5 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 5 + (24px * (5 - 1))) + 30px); } .section .container .part-top-s-6 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 6 + (24px * (6 - 1))); } .section .container .part-left-s-6 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 6 + (24px * (6 - 1))); } .section .container .part-right-s-6 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 6 + (24px * (6 - 1))); } .section .container .part-bottom-s-6 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 6 + (24px * (6 - 1))) + 30px); } .section .container .part-top-s-7 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 7 + (24px * (7 - 1))); } .section .container .part-left-s-7 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 7 + (24px * (7 - 1))); } .section .container .part-right-s-7 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 7 + (24px * (7 - 1))); } .section .container .part-bottom-s-7 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 7 + (24px * (7 - 1))) + 30px); } .section .container .part-top-s-8 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 8 + (24px * (8 - 1))); } .section .container .part-left-s-8 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 8 + (24px * (8 - 1))); } .section .container .part-right-s-8 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 8 + (24px * (8 - 1))); } .section .container .part-bottom-s-8 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 8 + (24px * (8 - 1))) + 30px); } .section .container .part-top-s-9 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 9 + (24px * (9 - 1))); } .section .container .part-left-s-9 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 9 + (24px * (9 - 1))); } .section .container .part-right-s-9 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 9 + (24px * (9 - 1))); } .section .container .part-bottom-s-9 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 9 + (24px * (9 - 1))) + 30px); } .section .container .part-top-s-10 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 10 + (24px * (10 - 1))); } .section .container .part-left-s-10 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 10 + (24px * (10 - 1))); } .section .container .part-right-s-10 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 10 + (24px * (10 - 1))); } .section .container .part-bottom-s-10 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 10 + (24px * (10 - 1))) + 30px); } .section .container .part-top-s-11 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 11 + (24px * (11 - 1))); } .section .container .part-left-s-11 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 11 + (24px * (11 - 1))); } .section .container .part-right-s-11 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 11 + (24px * (11 - 1))); } .section .container .part-bottom-s-11 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 11 + (24px * (11 - 1))) + 30px); } .section .container .part-top-s-12 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 12 + (24px * (12 - 1))); } .section .container .part-left-s-12 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 12 + (24px * (12 - 1))); } .section .container .part-right-s-12 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 12 + (24px * (12 - 1))); } .section .container .part-bottom-s-12 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 12 + (24px * (12 - 1))) + 30px); } } @media (max-width: 375px) { .section .container .part-top-xs-0 { margin-top: 0px; } .section .container .part-left-xs-0 { margin-left: 0px; } .section .container .part-right-xs-0 { margin-right: 0px; } .section .container .part-bottom-xs-0 { margin-bottom: calc(0px + 30px); } .section .container .part-top-xs-1 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 1 + (24px * (1 - 1))); } .section .container .part-left-xs-1 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 1 + (24px * (1 - 1))); } .section .container .part-right-xs-1 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 1 + (24px * (1 - 1))); } .section .container .part-bottom-xs-1 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 1 + (24px * (1 - 1))) + 30px); } .section .container .part-top-xs-2 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 2 + (24px * (2 - 1))); } .section .container .part-left-xs-2 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 2 + (24px * (2 - 1))); } .section .container .part-right-xs-2 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 2 + (24px * (2 - 1))); } .section .container .part-bottom-xs-2 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 2 + (24px * (2 - 1))) + 30px); } .section .container .part-top-xs-3 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 3 + (24px * (3 - 1))); } .section .container .part-left-xs-3 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 3 + (24px * (3 - 1))); } .section .container .part-right-xs-3 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 3 + (24px * (3 - 1))); } .section .container .part-bottom-xs-3 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 3 + (24px * (3 - 1))) + 30px); } .section .container .part-top-xs-4 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 4 + (24px * (4 - 1))); } .section .container .part-left-xs-4 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 4 + (24px * (4 - 1))); } .section .container .part-right-xs-4 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 4 + (24px * (4 - 1))); } .section .container .part-bottom-xs-4 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 4 + (24px * (4 - 1))) + 30px); } .section .container .part-top-xs-5 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 5 + (24px * (5 - 1))); } .section .container .part-left-xs-5 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 5 + (24px * (5 - 1))); } .section .container .part-right-xs-5 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 5 + (24px * (5 - 1))); } .section .container .part-bottom-xs-5 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 5 + (24px * (5 - 1))) + 30px); } .section .container .part-top-xs-6 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 6 + (24px * (6 - 1))); } .section .container .part-left-xs-6 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 6 + (24px * (6 - 1))); } .section .container .part-right-xs-6 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 6 + (24px * (6 - 1))); } .section .container .part-bottom-xs-6 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 6 + (24px * (6 - 1))) + 30px); } .section .container .part-top-xs-7 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 7 + (24px * (7 - 1))); } .section .container .part-left-xs-7 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 7 + (24px * (7 - 1))); } .section .container .part-right-xs-7 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 7 + (24px * (7 - 1))); } .section .container .part-bottom-xs-7 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 7 + (24px * (7 - 1))) + 30px); } .section .container .part-top-xs-8 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 8 + (24px * (8 - 1))); } .section .container .part-left-xs-8 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 8 + (24px * (8 - 1))); } .section .container .part-right-xs-8 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 8 + (24px * (8 - 1))); } .section .container .part-bottom-xs-8 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 8 + (24px * (8 - 1))) + 30px); } .section .container .part-top-xs-9 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 9 + (24px * (9 - 1))); } .section .container .part-left-xs-9 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 9 + (24px * (9 - 1))); } .section .container .part-right-xs-9 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 9 + (24px * (9 - 1))); } .section .container .part-bottom-xs-9 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 9 + (24px * (9 - 1))) + 30px); } .section .container .part-top-xs-10 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 10 + (24px * (10 - 1))); } .section .container .part-left-xs-10 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 10 + (24px * (10 - 1))); } .section .container .part-right-xs-10 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 10 + (24px * (10 - 1))); } .section .container .part-bottom-xs-10 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 10 + (24px * (10 - 1))) + 30px); } .section .container .part-top-xs-11 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 11 + (24px * (11 - 1))); } .section .container .part-left-xs-11 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 11 + (24px * (11 - 1))); } .section .container .part-right-xs-11 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 11 + (24px * (11 - 1))); } .section .container .part-bottom-xs-11 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 11 + (24px * (11 - 1))) + 30px); } .section .container .part-top-xs-12 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 12 + (24px * (12 - 1))); } .section .container .part-left-xs-12 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 12 + (24px * (12 - 1))); } .section .container .part-right-xs-12 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 12 + (24px * (12 - 1))); } .section .container .part-bottom-xs-12 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 12 + (24px * (12 - 1))) + 30px); } } @media (max-width: 375px) { .section .container .part-xs-0 { display: none; } } @media (max-width: 576px) { .section .container .part-s-0 { display: none; } } @media (max-width: 768px) { .section .container .part-m-0 { display: none; } } @media (max-width: 1024px) { .section .container .part-l-0 { display: none; } } @media (max-width: 1280px) { .section .container .part-xl-0 { display: none; } } .section .container [class*=part].-justify-start { display: flex; justify-content: flex-start; } .section .container [class*=part].-justify-center { display: flex; justify-content: center; } .section .container [class*=part].-justify-end { display: flex; justify-content: flex-end; } .section .container [class*=part].-align-start { display: flex; align-items: flex-start; } .section .container [class*=part].-align-center { display: flex; align-items: center; } .section .container [class*=part].-align-end { display: flex; align-items: flex-end; } .section .container [class*=part].-text-left { text-align: left; } .section .container [class*=part].-text-center { text-align: center; } .section .container [class*=part].-text-right { text-align: right; } @media (max-width: 768px) { .section .container { padding-right: 45px; padding-left: 45px; } } @media (max-width: 576px) { .section .container { padding-right: 15px; padding-left: 15px; } } .section .container .container, .section .container.--full-width { position: relative; display: flex; justify-content: space-between; align-items: stretch; flex-direction: row; flex-wrap: wrap; width: 100%; margin-right: auto; margin-left: auto; padding-right: 90px; padding-left: 90px; max-width: unset; padding-right: 0; padding-left: 0; } .section .container .container .part-1:not(.no-gutter), .section .container.--full-width .part-1:not(.no-gutter) { width: calc(((100% - (24px * (12 - 1))) / 12) * 1 + (24px * (1 - 1))); } .section .container .container .part-1.no-gutter, .section .container.--full-width .part-1.no-gutter { width: calc(((100% - (0px * (12 - 1))) / 12) * 1 + (0px * (1 - 1))); } .section .container .container .part-2:not(.no-gutter), .section .container.--full-width .part-2:not(.no-gutter) { width: calc(((100% - (24px * (12 - 1))) / 12) * 2 + (24px * (2 - 1))); } .section .container .container .part-2.no-gutter, .section .container.--full-width .part-2.no-gutter { width: calc(((100% - (0px * (12 - 1))) / 12) * 2 + (0px * (2 - 1))); } .section .container .container .part-3:not(.no-gutter), .section .container.--full-width .part-3:not(.no-gutter) { width: calc(((100% - (24px * (12 - 1))) / 12) * 3 + (24px * (3 - 1))); } .section .container .container .part-3.no-gutter, .section .container.--full-width .part-3.no-gutter { width: calc(((100% - (0px * (12 - 1))) / 12) * 3 + (0px * (3 - 1))); } .section .container .container .part-4:not(.no-gutter), .section .container.--full-width .part-4:not(.no-gutter) { width: calc(((100% - (24px * (12 - 1))) / 12) * 4 + (24px * (4 - 1))); } .section .container .container .part-4.no-gutter, .section .container.--full-width .part-4.no-gutter { width: calc(((100% - (0px * (12 - 1))) / 12) * 4 + (0px * (4 - 1))); } .section .container .container .part-5:not(.no-gutter), .section .container.--full-width .part-5:not(.no-gutter) { width: calc(((100% - (24px * (12 - 1))) / 12) * 5 + (24px * (5 - 1))); } .section .container .container .part-5.no-gutter, .section .container.--full-width .part-5.no-gutter { width: calc(((100% - (0px * (12 - 1))) / 12) * 5 + (0px * (5 - 1))); } .section .container .container .part-6:not(.no-gutter), .section .container.--full-width .part-6:not(.no-gutter) { width: calc(((100% - (24px * (12 - 1))) / 12) * 6 + (24px * (6 - 1))); } .section .container .container .part-6.no-gutter, .section .container.--full-width .part-6.no-gutter { width: calc(((100% - (0px * (12 - 1))) / 12) * 6 + (0px * (6 - 1))); } .section .container .container .part-7:not(.no-gutter), .section .container.--full-width .part-7:not(.no-gutter) { width: calc(((100% - (24px * (12 - 1))) / 12) * 7 + (24px * (7 - 1))); } .section .container .container .part-7.no-gutter, .section .container.--full-width .part-7.no-gutter { width: calc(((100% - (0px * (12 - 1))) / 12) * 7 + (0px * (7 - 1))); } .section .container .container .part-8:not(.no-gutter), .section .container.--full-width .part-8:not(.no-gutter) { width: calc(((100% - (24px * (12 - 1))) / 12) * 8 + (24px * (8 - 1))); } .section .container .container .part-8.no-gutter, .section .container.--full-width .part-8.no-gutter { width: calc(((100% - (0px * (12 - 1))) / 12) * 8 + (0px * (8 - 1))); } .section .container .container .part-9:not(.no-gutter), .section .container.--full-width .part-9:not(.no-gutter) { width: calc(((100% - (24px * (12 - 1))) / 12) * 9 + (24px * (9 - 1))); } .section .container .container .part-9.no-gutter, .section .container.--full-width .part-9.no-gutter { width: calc(((100% - (0px * (12 - 1))) / 12) * 9 + (0px * (9 - 1))); } .section .container .container .part-10:not(.no-gutter), .section .container.--full-width .part-10:not(.no-gutter) { width: calc(((100% - (24px * (12 - 1))) / 12) * 10 + (24px * (10 - 1))); } .section .container .container .part-10.no-gutter, .section .container.--full-width .part-10.no-gutter { width: calc(((100% - (0px * (12 - 1))) / 12) * 10 + (0px * (10 - 1))); } .section .container .container .part-11:not(.no-gutter), .section .container.--full-width .part-11:not(.no-gutter) { width: calc(((100% - (24px * (12 - 1))) / 12) * 11 + (24px * (11 - 1))); } .section .container .container .part-11.no-gutter, .section .container.--full-width .part-11.no-gutter { width: calc(((100% - (0px * (12 - 1))) / 12) * 11 + (0px * (11 - 1))); } .section .container .container .part-12:not(.no-gutter), .section .container.--full-width .part-12:not(.no-gutter) { width: calc(((100% - (24px * (12 - 1))) / 12) * 12 + (24px * (12 - 1))); } .section .container .container .part-12.no-gutter, .section .container.--full-width .part-12.no-gutter { width: calc(((100% - (0px * (12 - 1))) / 12) * 12 + (0px * (12 - 1))); } @media (max-width: 1280px) { .section .container .container .part-xl-1:not(.no-gutter), .section .container.--full-width .part-xl-1:not(.no-gutter) { width: calc(((100% - (24px * (12 - 1))) / 12) * 1 + (24px * (1 - 1))); } .section .container .container .part-xl-1.no-gutter, .section .container.--full-width .part-xl-1.no-gutter { width: calc(((100% - (0px * (12 - 1))) / 12) * 1 + (0px * (1 - 1))); } .section .container .container .part-xl-2:not(.no-gutter), .section .container.--full-width .part-xl-2:not(.no-gutter) { width: calc(((100% - (24px * (12 - 1))) / 12) * 2 + (24px * (2 - 1))); } .section .container .container .part-xl-2.no-gutter, .section .container.--full-width .part-xl-2.no-gutter { width: calc(((100% - (0px * (12 - 1))) / 12) * 2 + (0px * (2 - 1))); } .section .container .container .part-xl-3:not(.no-gutter), .section .container.--full-width .part-xl-3:not(.no-gutter) { width: calc(((100% - (24px * (12 - 1))) / 12) * 3 + (24px * (3 - 1))); } .section .container .container .part-xl-3.no-gutter, .section .container.--full-width .part-xl-3.no-gutter { width: calc(((100% - (0px * (12 - 1))) / 12) * 3 + (0px * (3 - 1))); } .section .container .container .part-xl-4:not(.no-gutter), .section .container.--full-width .part-xl-4:not(.no-gutter) { width: calc(((100% - (24px * (12 - 1))) / 12) * 4 + (24px * (4 - 1))); } .section .container .container .part-xl-4.no-gutter, .section .container.--full-width .part-xl-4.no-gutter { width: calc(((100% - (0px * (12 - 1))) / 12) * 4 + (0px * (4 - 1))); } .section .container .container .part-xl-5:not(.no-gutter), .section .container.--full-width .part-xl-5:not(.no-gutter) { width: calc(((100% - (24px * (12 - 1))) / 12) * 5 + (24px * (5 - 1))); } .section .container .container .part-xl-5.no-gutter, .section .container.--full-width .part-xl-5.no-gutter { width: calc(((100% - (0px * (12 - 1))) / 12) * 5 + (0px * (5 - 1))); } .section .container .container .part-xl-6:not(.no-gutter), .section .container.--full-width .part-xl-6:not(.no-gutter) { width: calc(((100% - (24px * (12 - 1))) / 12) * 6 + (24px * (6 - 1))); } .section .container .container .part-xl-6.no-gutter, .section .container.--full-width .part-xl-6.no-gutter { width: calc(((100% - (0px * (12 - 1))) / 12) * 6 + (0px * (6 - 1))); } .section .container .container .part-xl-7:not(.no-gutter), .section .container.--full-width .part-xl-7:not(.no-gutter) { width: calc(((100% - (24px * (12 - 1))) / 12) * 7 + (24px * (7 - 1))); } .section .container .container .part-xl-7.no-gutter, .section .container.--full-width .part-xl-7.no-gutter { width: calc(((100% - (0px * (12 - 1))) / 12) * 7 + (0px * (7 - 1))); } .section .container .container .part-xl-8:not(.no-gutter), .section .container.--full-width .part-xl-8:not(.no-gutter) { width: calc(((100% - (24px * (12 - 1))) / 12) * 8 + (24px * (8 - 1))); } .section .container .container .part-xl-8.no-gutter, .section .container.--full-width .part-xl-8.no-gutter { width: calc(((100% - (0px * (12 - 1))) / 12) * 8 + (0px * (8 - 1))); } .section .container .container .part-xl-9:not(.no-gutter), .section .container.--full-width .part-xl-9:not(.no-gutter) { width: calc(((100% - (24px * (12 - 1))) / 12) * 9 + (24px * (9 - 1))); } .section .container .container .part-xl-9.no-gutter, .section .container.--full-width .part-xl-9.no-gutter { width: calc(((100% - (0px * (12 - 1))) / 12) * 9 + (0px * (9 - 1))); } .section .container .container .part-xl-10:not(.no-gutter), .section .container.--full-width .part-xl-10:not(.no-gutter) { width: calc(((100% - (24px * (12 - 1))) / 12) * 10 + (24px * (10 - 1))); } .section .container .container .part-xl-10.no-gutter, .section .container.--full-width .part-xl-10.no-gutter { width: calc(((100% - (0px * (12 - 1))) / 12) * 10 + (0px * (10 - 1))); } .section .container .container .part-xl-11:not(.no-gutter), .section .container.--full-width .part-xl-11:not(.no-gutter) { width: calc(((100% - (24px * (12 - 1))) / 12) * 11 + (24px * (11 - 1))); } .section .container .container .part-xl-11.no-gutter, .section .container.--full-width .part-xl-11.no-gutter { width: calc(((100% - (0px * (12 - 1))) / 12) * 11 + (0px * (11 - 1))); } .section .container .container .part-xl-12:not(.no-gutter), .section .container.--full-width .part-xl-12:not(.no-gutter) { width: calc(((100% - (24px * (12 - 1))) / 12) * 12 + (24px * (12 - 1))); } .section .container .container .part-xl-12.no-gutter, .section .container.--full-width .part-xl-12.no-gutter { width: calc(((100% - (0px * (12 - 1))) / 12) * 12 + (0px * (12 - 1))); } } @media (max-width: 1024px) { .section .container .container .part-l-1:not(.no-gutter), .section .container.--full-width .part-l-1:not(.no-gutter) { width: calc(((100% - (16px * (8 - 1))) / 8) * 1 + (16px * (1 - 1))); } .section .container .container .part-l-1.no-gutter, .section .container.--full-width .part-l-1.no-gutter { width: calc(((100% - (0px * (8 - 1))) / 8) * 1 + (0px * (1 - 1))); } .section .container .container .part-l-2:not(.no-gutter), .section .container.--full-width .part-l-2:not(.no-gutter) { width: calc(((100% - (16px * (8 - 1))) / 8) * 2 + (16px * (2 - 1))); } .section .container .container .part-l-2.no-gutter, .section .container.--full-width .part-l-2.no-gutter { width: calc(((100% - (0px * (8 - 1))) / 8) * 2 + (0px * (2 - 1))); } .section .container .container .part-l-3:not(.no-gutter), .section .container.--full-width .part-l-3:not(.no-gutter) { width: calc(((100% - (16px * (8 - 1))) / 8) * 3 + (16px * (3 - 1))); } .section .container .container .part-l-3.no-gutter, .section .container.--full-width .part-l-3.no-gutter { width: calc(((100% - (0px * (8 - 1))) / 8) * 3 + (0px * (3 - 1))); } .section .container .container .part-l-4:not(.no-gutter), .section .container.--full-width .part-l-4:not(.no-gutter) { width: calc(((100% - (16px * (8 - 1))) / 8) * 4 + (16px * (4 - 1))); } .section .container .container .part-l-4.no-gutter, .section .container.--full-width .part-l-4.no-gutter { width: calc(((100% - (0px * (8 - 1))) / 8) * 4 + (0px * (4 - 1))); } .section .container .container .part-l-5:not(.no-gutter), .section .container.--full-width .part-l-5:not(.no-gutter) { width: calc(((100% - (16px * (8 - 1))) / 8) * 5 + (16px * (5 - 1))); } .section .container .container .part-l-5.no-gutter, .section .container.--full-width .part-l-5.no-gutter { width: calc(((100% - (0px * (8 - 1))) / 8) * 5 + (0px * (5 - 1))); } .section .container .container .part-l-6:not(.no-gutter), .section .container.--full-width .part-l-6:not(.no-gutter) { width: calc(((100% - (16px * (8 - 1))) / 8) * 6 + (16px * (6 - 1))); } .section .container .container .part-l-6.no-gutter, .section .container.--full-width .part-l-6.no-gutter { width: calc(((100% - (0px * (8 - 1))) / 8) * 6 + (0px * (6 - 1))); } .section .container .container .part-l-7:not(.no-gutter), .section .container.--full-width .part-l-7:not(.no-gutter) { width: calc(((100% - (16px * (8 - 1))) / 8) * 7 + (16px * (7 - 1))); } .section .container .container .part-l-7.no-gutter, .section .container.--full-width .part-l-7.no-gutter { width: calc(((100% - (0px * (8 - 1))) / 8) * 7 + (0px * (7 - 1))); } .section .container .container .part-l-8:not(.no-gutter), .section .container.--full-width .part-l-8:not(.no-gutter) { width: calc(((100% - (16px * (8 - 1))) / 8) * 8 + (16px * (8 - 1))); } .section .container .container .part-l-8.no-gutter, .section .container.--full-width .part-l-8.no-gutter { width: calc(((100% - (0px * (8 - 1))) / 8) * 8 + (0px * (8 - 1))); } } @media (max-width: 768px) { .section .container .container .part-m-1:not(.no-gutter), .section .container.--full-width .part-m-1:not(.no-gutter) { width: calc(((100% - (14px * (8 - 1))) / 8) * 1 + (14px * (1 - 1))); } .section .container .container .part-m-1.no-gutter, .section .container.--full-width .part-m-1.no-gutter { width: calc(((100% - (0px * (8 - 1))) / 8) * 1 + (0px * (1 - 1))); } .section .container .container .part-m-2:not(.no-gutter), .section .container.--full-width .part-m-2:not(.no-gutter) { width: calc(((100% - (14px * (8 - 1))) / 8) * 2 + (14px * (2 - 1))); } .section .container .container .part-m-2.no-gutter, .section .container.--full-width .part-m-2.no-gutter { width: calc(((100% - (0px * (8 - 1))) / 8) * 2 + (0px * (2 - 1))); } .section .container .container .part-m-3:not(.no-gutter), .section .container.--full-width .part-m-3:not(.no-gutter) { width: calc(((100% - (14px * (8 - 1))) / 8) * 3 + (14px * (3 - 1))); } .section .container .container .part-m-3.no-gutter, .section .container.--full-width .part-m-3.no-gutter { width: calc(((100% - (0px * (8 - 1))) / 8) * 3 + (0px * (3 - 1))); } .section .container .container .part-m-4:not(.no-gutter), .section .container.--full-width .part-m-4:not(.no-gutter) { width: calc(((100% - (14px * (8 - 1))) / 8) * 4 + (14px * (4 - 1))); } .section .container .container .part-m-4.no-gutter, .section .container.--full-width .part-m-4.no-gutter { width: calc(((100% - (0px * (8 - 1))) / 8) * 4 + (0px * (4 - 1))); } .section .container .container .part-m-5:not(.no-gutter), .section .container.--full-width .part-m-5:not(.no-gutter) { width: calc(((100% - (14px * (8 - 1))) / 8) * 5 + (14px * (5 - 1))); } .section .container .container .part-m-5.no-gutter, .section .container.--full-width .part-m-5.no-gutter { width: calc(((100% - (0px * (8 - 1))) / 8) * 5 + (0px * (5 - 1))); } .section .container .container .part-m-6:not(.no-gutter), .section .container.--full-width .part-m-6:not(.no-gutter) { width: calc(((100% - (14px * (8 - 1))) / 8) * 6 + (14px * (6 - 1))); } .section .container .container .part-m-6.no-gutter, .section .container.--full-width .part-m-6.no-gutter { width: calc(((100% - (0px * (8 - 1))) / 8) * 6 + (0px * (6 - 1))); } .section .container .container .part-m-7:not(.no-gutter), .section .container.--full-width .part-m-7:not(.no-gutter) { width: calc(((100% - (14px * (8 - 1))) / 8) * 7 + (14px * (7 - 1))); } .section .container .container .part-m-7.no-gutter, .section .container.--full-width .part-m-7.no-gutter { width: calc(((100% - (0px * (8 - 1))) / 8) * 7 + (0px * (7 - 1))); } .section .container .container .part-m-8:not(.no-gutter), .section .container.--full-width .part-m-8:not(.no-gutter) { width: calc(((100% - (14px * (8 - 1))) / 8) * 8 + (14px * (8 - 1))); } .section .container .container .part-m-8.no-gutter, .section .container.--full-width .part-m-8.no-gutter { width: calc(((100% - (0px * (8 - 1))) / 8) * 8 + (0px * (8 - 1))); } } @media (max-width: 576px) { .section .container .container .part-s-1:not(.no-gutter), .section .container.--full-width .part-s-1:not(.no-gutter) { width: calc(((100% - (10px * (4 - 1))) / 4) * 1 + (10px * (1 - 1))); } .section .container .container .part-s-1.no-gutter, .section .container.--full-width .part-s-1.no-gutter { width: calc(((100% - (0px * (4 - 1))) / 4) * 1 + (0px * (1 - 1))); } .section .container .container .part-s-2:not(.no-gutter), .section .container.--full-width .part-s-2:not(.no-gutter) { width: calc(((100% - (10px * (4 - 1))) / 4) * 2 + (10px * (2 - 1))); } .section .container .container .part-s-2.no-gutter, .section .container.--full-width .part-s-2.no-gutter { width: calc(((100% - (0px * (4 - 1))) / 4) * 2 + (0px * (2 - 1))); } .section .container .container .part-s-3:not(.no-gutter), .section .container.--full-width .part-s-3:not(.no-gutter) { width: calc(((100% - (10px * (4 - 1))) / 4) * 3 + (10px * (3 - 1))); } .section .container .container .part-s-3.no-gutter, .section .container.--full-width .part-s-3.no-gutter { width: calc(((100% - (0px * (4 - 1))) / 4) * 3 + (0px * (3 - 1))); } .section .container .container .part-s-4:not(.no-gutter), .section .container.--full-width .part-s-4:not(.no-gutter) { width: calc(((100% - (10px * (4 - 1))) / 4) * 4 + (10px * (4 - 1))); } .section .container .container .part-s-4.no-gutter, .section .container.--full-width .part-s-4.no-gutter { width: calc(((100% - (0px * (4 - 1))) / 4) * 4 + (0px * (4 - 1))); } } @media (max-width: 375px) { .section .container .container .part-xs-1:not(.no-gutter), .section .container.--full-width .part-xs-1:not(.no-gutter) { width: calc(((100% - (10px * (4 - 1))) / 4) * 1 + (10px * (1 - 1))); } .section .container .container .part-xs-1.no-gutter, .section .container.--full-width .part-xs-1.no-gutter { width: calc(((100% - (0px * (4 - 1))) / 4) * 1 + (0px * (1 - 1))); } .section .container .container .part-xs-2:not(.no-gutter), .section .container.--full-width .part-xs-2:not(.no-gutter) { width: calc(((100% - (10px * (4 - 1))) / 4) * 2 + (10px * (2 - 1))); } .section .container .container .part-xs-2.no-gutter, .section .container.--full-width .part-xs-2.no-gutter { width: calc(((100% - (0px * (4 - 1))) / 4) * 2 + (0px * (2 - 1))); } .section .container .container .part-xs-3:not(.no-gutter), .section .container.--full-width .part-xs-3:not(.no-gutter) { width: calc(((100% - (10px * (4 - 1))) / 4) * 3 + (10px * (3 - 1))); } .section .container .container .part-xs-3.no-gutter, .section .container.--full-width .part-xs-3.no-gutter { width: calc(((100% - (0px * (4 - 1))) / 4) * 3 + (0px * (3 - 1))); } .section .container .container .part-xs-4:not(.no-gutter), .section .container.--full-width .part-xs-4:not(.no-gutter) { width: calc(((100% - (10px * (4 - 1))) / 4) * 4 + (10px * (4 - 1))); } .section .container .container .part-xs-4.no-gutter, .section .container.--full-width .part-xs-4.no-gutter { width: calc(((100% - (0px * (4 - 1))) / 4) * 4 + (0px * (4 - 1))); } } .section .container .container .part-top-0, .section .container.--full-width .part-top-0 { margin-top: 0px; } .section .container .container .part-left-0, .section .container.--full-width .part-left-0 { margin-left: 0px; } .section .container .container .part-right-0, .section .container.--full-width .part-right-0 { margin-right: 0px; } .section .container .container .part-bottom-0, .section .container.--full-width .part-bottom-0 { margin-bottom: calc(0px + 50px); } .section .container .container .part-top-1, .section .container.--full-width .part-top-1 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 1 + (24px * (1 - 1))); } .section .container .container .part-left-1, .section .container.--full-width .part-left-1 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 1 + (24px * (1 - 1))); } .section .container .container .part-right-1, .section .container.--full-width .part-right-1 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 1 + (24px * (1 - 1))); } .section .container .container .part-bottom-1, .section .container.--full-width .part-bottom-1 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 1 + (24px * (1 - 1))) + 50px); } .section .container .container .part-top-2, .section .container.--full-width .part-top-2 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 2 + (24px * (2 - 1))); } .section .container .container .part-left-2, .section .container.--full-width .part-left-2 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 2 + (24px * (2 - 1))); } .section .container .container .part-right-2, .section .container.--full-width .part-right-2 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 2 + (24px * (2 - 1))); } .section .container .container .part-bottom-2, .section .container.--full-width .part-bottom-2 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 2 + (24px * (2 - 1))) + 50px); } .section .container .container .part-top-3, .section .container.--full-width .part-top-3 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 3 + (24px * (3 - 1))); } .section .container .container .part-left-3, .section .container.--full-width .part-left-3 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 3 + (24px * (3 - 1))); } .section .container .container .part-right-3, .section .container.--full-width .part-right-3 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 3 + (24px * (3 - 1))); } .section .container .container .part-bottom-3, .section .container.--full-width .part-bottom-3 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 3 + (24px * (3 - 1))) + 50px); } .section .container .container .part-top-4, .section .container.--full-width .part-top-4 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 4 + (24px * (4 - 1))); } .section .container .container .part-left-4, .section .container.--full-width .part-left-4 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 4 + (24px * (4 - 1))); } .section .container .container .part-right-4, .section .container.--full-width .part-right-4 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 4 + (24px * (4 - 1))); } .section .container .container .part-bottom-4, .section .container.--full-width .part-bottom-4 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 4 + (24px * (4 - 1))) + 50px); } .section .container .container .part-top-5, .section .container.--full-width .part-top-5 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 5 + (24px * (5 - 1))); } .section .container .container .part-left-5, .section .container.--full-width .part-left-5 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 5 + (24px * (5 - 1))); } .section .container .container .part-right-5, .section .container.--full-width .part-right-5 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 5 + (24px * (5 - 1))); } .section .container .container .part-bottom-5, .section .container.--full-width .part-bottom-5 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 5 + (24px * (5 - 1))) + 50px); } .section .container .container .part-top-6, .section .container.--full-width .part-top-6 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 6 + (24px * (6 - 1))); } .section .container .container .part-left-6, .section .container.--full-width .part-left-6 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 6 + (24px * (6 - 1))); } .section .container .container .part-right-6, .section .container.--full-width .part-right-6 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 6 + (24px * (6 - 1))); } .section .container .container .part-bottom-6, .section .container.--full-width .part-bottom-6 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 6 + (24px * (6 - 1))) + 50px); } .section .container .container .part-top-7, .section .container.--full-width .part-top-7 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 7 + (24px * (7 - 1))); } .section .container .container .part-left-7, .section .container.--full-width .part-left-7 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 7 + (24px * (7 - 1))); } .section .container .container .part-right-7, .section .container.--full-width .part-right-7 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 7 + (24px * (7 - 1))); } .section .container .container .part-bottom-7, .section .container.--full-width .part-bottom-7 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 7 + (24px * (7 - 1))) + 50px); } .section .container .container .part-top-8, .section .container.--full-width .part-top-8 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 8 + (24px * (8 - 1))); } .section .container .container .part-left-8, .section .container.--full-width .part-left-8 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 8 + (24px * (8 - 1))); } .section .container .container .part-right-8, .section .container.--full-width .part-right-8 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 8 + (24px * (8 - 1))); } .section .container .container .part-bottom-8, .section .container.--full-width .part-bottom-8 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 8 + (24px * (8 - 1))) + 50px); } .section .container .container .part-top-9, .section .container.--full-width .part-top-9 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 9 + (24px * (9 - 1))); } .section .container .container .part-left-9, .section .container.--full-width .part-left-9 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 9 + (24px * (9 - 1))); } .section .container .container .part-right-9, .section .container.--full-width .part-right-9 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 9 + (24px * (9 - 1))); } .section .container .container .part-bottom-9, .section .container.--full-width .part-bottom-9 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 9 + (24px * (9 - 1))) + 50px); } .section .container .container .part-top-10, .section .container.--full-width .part-top-10 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 10 + (24px * (10 - 1))); } .section .container .container .part-left-10, .section .container.--full-width .part-left-10 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 10 + (24px * (10 - 1))); } .section .container .container .part-right-10, .section .container.--full-width .part-right-10 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 10 + (24px * (10 - 1))); } .section .container .container .part-bottom-10, .section .container.--full-width .part-bottom-10 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 10 + (24px * (10 - 1))) + 50px); } .section .container .container .part-top-11, .section .container.--full-width .part-top-11 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 11 + (24px * (11 - 1))); } .section .container .container .part-left-11, .section .container.--full-width .part-left-11 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 11 + (24px * (11 - 1))); } .section .container .container .part-right-11, .section .container.--full-width .part-right-11 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 11 + (24px * (11 - 1))); } .section .container .container .part-bottom-11, .section .container.--full-width .part-bottom-11 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 11 + (24px * (11 - 1))) + 50px); } .section .container .container .part-top-12, .section .container.--full-width .part-top-12 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 12 + (24px * (12 - 1))); } .section .container .container .part-left-12, .section .container.--full-width .part-left-12 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 12 + (24px * (12 - 1))); } .section .container .container .part-right-12, .section .container.--full-width .part-right-12 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 12 + (24px * (12 - 1))); } .section .container .container .part-bottom-12, .section .container.--full-width .part-bottom-12 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 12 + (24px * (12 - 1))) + 50px); } @media (max-width: 1024px) { .section .container .container .part-top-l-0, .section .container.--full-width .part-top-l-0 { margin-top: 0px; } .section .container .container .part-left-l-0, .section .container.--full-width .part-left-l-0 { margin-left: 0px; } .section .container .container .part-right-l-0, .section .container.--full-width .part-right-l-0 { margin-right: 0px; } .section .container .container .part-bottom-l-0, .section .container.--full-width .part-bottom-l-0 { margin-bottom: calc(0px + 50px); } .section .container .container .part-top-l-1, .section .container.--full-width .part-top-l-1 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 1 + (24px * (1 - 1))); } .section .container .container .part-left-l-1, .section .container.--full-width .part-left-l-1 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 1 + (24px * (1 - 1))); } .section .container .container .part-right-l-1, .section .container.--full-width .part-right-l-1 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 1 + (24px * (1 - 1))); } .section .container .container .part-bottom-l-1, .section .container.--full-width .part-bottom-l-1 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 1 + (24px * (1 - 1))) + 50px); } .section .container .container .part-top-l-2, .section .container.--full-width .part-top-l-2 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 2 + (24px * (2 - 1))); } .section .container .container .part-left-l-2, .section .container.--full-width .part-left-l-2 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 2 + (24px * (2 - 1))); } .section .container .container .part-right-l-2, .section .container.--full-width .part-right-l-2 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 2 + (24px * (2 - 1))); } .section .container .container .part-bottom-l-2, .section .container.--full-width .part-bottom-l-2 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 2 + (24px * (2 - 1))) + 50px); } .section .container .container .part-top-l-3, .section .container.--full-width .part-top-l-3 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 3 + (24px * (3 - 1))); } .section .container .container .part-left-l-3, .section .container.--full-width .part-left-l-3 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 3 + (24px * (3 - 1))); } .section .container .container .part-right-l-3, .section .container.--full-width .part-right-l-3 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 3 + (24px * (3 - 1))); } .section .container .container .part-bottom-l-3, .section .container.--full-width .part-bottom-l-3 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 3 + (24px * (3 - 1))) + 50px); } .section .container .container .part-top-l-4, .section .container.--full-width .part-top-l-4 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 4 + (24px * (4 - 1))); } .section .container .container .part-left-l-4, .section .container.--full-width .part-left-l-4 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 4 + (24px * (4 - 1))); } .section .container .container .part-right-l-4, .section .container.--full-width .part-right-l-4 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 4 + (24px * (4 - 1))); } .section .container .container .part-bottom-l-4, .section .container.--full-width .part-bottom-l-4 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 4 + (24px * (4 - 1))) + 50px); } .section .container .container .part-top-l-5, .section .container.--full-width .part-top-l-5 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 5 + (24px * (5 - 1))); } .section .container .container .part-left-l-5, .section .container.--full-width .part-left-l-5 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 5 + (24px * (5 - 1))); } .section .container .container .part-right-l-5, .section .container.--full-width .part-right-l-5 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 5 + (24px * (5 - 1))); } .section .container .container .part-bottom-l-5, .section .container.--full-width .part-bottom-l-5 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 5 + (24px * (5 - 1))) + 50px); } .section .container .container .part-top-l-6, .section .container.--full-width .part-top-l-6 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 6 + (24px * (6 - 1))); } .section .container .container .part-left-l-6, .section .container.--full-width .part-left-l-6 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 6 + (24px * (6 - 1))); } .section .container .container .part-right-l-6, .section .container.--full-width .part-right-l-6 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 6 + (24px * (6 - 1))); } .section .container .container .part-bottom-l-6, .section .container.--full-width .part-bottom-l-6 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 6 + (24px * (6 - 1))) + 50px); } .section .container .container .part-top-l-7, .section .container.--full-width .part-top-l-7 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 7 + (24px * (7 - 1))); } .section .container .container .part-left-l-7, .section .container.--full-width .part-left-l-7 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 7 + (24px * (7 - 1))); } .section .container .container .part-right-l-7, .section .container.--full-width .part-right-l-7 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 7 + (24px * (7 - 1))); } .section .container .container .part-bottom-l-7, .section .container.--full-width .part-bottom-l-7 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 7 + (24px * (7 - 1))) + 50px); } .section .container .container .part-top-l-8, .section .container.--full-width .part-top-l-8 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 8 + (24px * (8 - 1))); } .section .container .container .part-left-l-8, .section .container.--full-width .part-left-l-8 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 8 + (24px * (8 - 1))); } .section .container .container .part-right-l-8, .section .container.--full-width .part-right-l-8 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 8 + (24px * (8 - 1))); } .section .container .container .part-bottom-l-8, .section .container.--full-width .part-bottom-l-8 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 8 + (24px * (8 - 1))) + 50px); } .section .container .container .part-top-l-9, .section .container.--full-width .part-top-l-9 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 9 + (24px * (9 - 1))); } .section .container .container .part-left-l-9, .section .container.--full-width .part-left-l-9 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 9 + (24px * (9 - 1))); } .section .container .container .part-right-l-9, .section .container.--full-width .part-right-l-9 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 9 + (24px * (9 - 1))); } .section .container .container .part-bottom-l-9, .section .container.--full-width .part-bottom-l-9 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 9 + (24px * (9 - 1))) + 50px); } .section .container .container .part-top-l-10, .section .container.--full-width .part-top-l-10 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 10 + (24px * (10 - 1))); } .section .container .container .part-left-l-10, .section .container.--full-width .part-left-l-10 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 10 + (24px * (10 - 1))); } .section .container .container .part-right-l-10, .section .container.--full-width .part-right-l-10 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 10 + (24px * (10 - 1))); } .section .container .container .part-bottom-l-10, .section .container.--full-width .part-bottom-l-10 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 10 + (24px * (10 - 1))) + 50px); } .section .container .container .part-top-l-11, .section .container.--full-width .part-top-l-11 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 11 + (24px * (11 - 1))); } .section .container .container .part-left-l-11, .section .container.--full-width .part-left-l-11 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 11 + (24px * (11 - 1))); } .section .container .container .part-right-l-11, .section .container.--full-width .part-right-l-11 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 11 + (24px * (11 - 1))); } .section .container .container .part-bottom-l-11, .section .container.--full-width .part-bottom-l-11 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 11 + (24px * (11 - 1))) + 50px); } .section .container .container .part-top-l-12, .section .container.--full-width .part-top-l-12 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 12 + (24px * (12 - 1))); } .section .container .container .part-left-l-12, .section .container.--full-width .part-left-l-12 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 12 + (24px * (12 - 1))); } .section .container .container .part-right-l-12, .section .container.--full-width .part-right-l-12 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 12 + (24px * (12 - 1))); } .section .container .container .part-bottom-l-12, .section .container.--full-width .part-bottom-l-12 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 12 + (24px * (12 - 1))) + 50px); } } @media (max-width: 768px) { .section .container .container .part-top-m-0, .section .container.--full-width .part-top-m-0 { margin-top: 0px; } .section .container .container .part-left-m-0, .section .container.--full-width .part-left-m-0 { margin-left: 0px; } .section .container .container .part-right-m-0, .section .container.--full-width .part-right-m-0 { margin-right: 0px; } .section .container .container .part-bottom-m-0, .section .container.--full-width .part-bottom-m-0 { margin-bottom: calc(0px + 50px); } .section .container .container .part-top-m-1, .section .container.--full-width .part-top-m-1 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 1 + (24px * (1 - 1))); } .section .container .container .part-left-m-1, .section .container.--full-width .part-left-m-1 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 1 + (24px * (1 - 1))); } .section .container .container .part-right-m-1, .section .container.--full-width .part-right-m-1 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 1 + (24px * (1 - 1))); } .section .container .container .part-bottom-m-1, .section .container.--full-width .part-bottom-m-1 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 1 + (24px * (1 - 1))) + 50px); } .section .container .container .part-top-m-2, .section .container.--full-width .part-top-m-2 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 2 + (24px * (2 - 1))); } .section .container .container .part-left-m-2, .section .container.--full-width .part-left-m-2 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 2 + (24px * (2 - 1))); } .section .container .container .part-right-m-2, .section .container.--full-width .part-right-m-2 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 2 + (24px * (2 - 1))); } .section .container .container .part-bottom-m-2, .section .container.--full-width .part-bottom-m-2 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 2 + (24px * (2 - 1))) + 50px); } .section .container .container .part-top-m-3, .section .container.--full-width .part-top-m-3 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 3 + (24px * (3 - 1))); } .section .container .container .part-left-m-3, .section .container.--full-width .part-left-m-3 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 3 + (24px * (3 - 1))); } .section .container .container .part-right-m-3, .section .container.--full-width .part-right-m-3 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 3 + (24px * (3 - 1))); } .section .container .container .part-bottom-m-3, .section .container.--full-width .part-bottom-m-3 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 3 + (24px * (3 - 1))) + 50px); } .section .container .container .part-top-m-4, .section .container.--full-width .part-top-m-4 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 4 + (24px * (4 - 1))); } .section .container .container .part-left-m-4, .section .container.--full-width .part-left-m-4 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 4 + (24px * (4 - 1))); } .section .container .container .part-right-m-4, .section .container.--full-width .part-right-m-4 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 4 + (24px * (4 - 1))); } .section .container .container .part-bottom-m-4, .section .container.--full-width .part-bottom-m-4 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 4 + (24px * (4 - 1))) + 50px); } .section .container .container .part-top-m-5, .section .container.--full-width .part-top-m-5 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 5 + (24px * (5 - 1))); } .section .container .container .part-left-m-5, .section .container.--full-width .part-left-m-5 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 5 + (24px * (5 - 1))); } .section .container .container .part-right-m-5, .section .container.--full-width .part-right-m-5 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 5 + (24px * (5 - 1))); } .section .container .container .part-bottom-m-5, .section .container.--full-width .part-bottom-m-5 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 5 + (24px * (5 - 1))) + 50px); } .section .container .container .part-top-m-6, .section .container.--full-width .part-top-m-6 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 6 + (24px * (6 - 1))); } .section .container .container .part-left-m-6, .section .container.--full-width .part-left-m-6 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 6 + (24px * (6 - 1))); } .section .container .container .part-right-m-6, .section .container.--full-width .part-right-m-6 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 6 + (24px * (6 - 1))); } .section .container .container .part-bottom-m-6, .section .container.--full-width .part-bottom-m-6 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 6 + (24px * (6 - 1))) + 50px); } .section .container .container .part-top-m-7, .section .container.--full-width .part-top-m-7 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 7 + (24px * (7 - 1))); } .section .container .container .part-left-m-7, .section .container.--full-width .part-left-m-7 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 7 + (24px * (7 - 1))); } .section .container .container .part-right-m-7, .section .container.--full-width .part-right-m-7 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 7 + (24px * (7 - 1))); } .section .container .container .part-bottom-m-7, .section .container.--full-width .part-bottom-m-7 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 7 + (24px * (7 - 1))) + 50px); } .section .container .container .part-top-m-8, .section .container.--full-width .part-top-m-8 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 8 + (24px * (8 - 1))); } .section .container .container .part-left-m-8, .section .container.--full-width .part-left-m-8 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 8 + (24px * (8 - 1))); } .section .container .container .part-right-m-8, .section .container.--full-width .part-right-m-8 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 8 + (24px * (8 - 1))); } .section .container .container .part-bottom-m-8, .section .container.--full-width .part-bottom-m-8 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 8 + (24px * (8 - 1))) + 50px); } .section .container .container .part-top-m-9, .section .container.--full-width .part-top-m-9 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 9 + (24px * (9 - 1))); } .section .container .container .part-left-m-9, .section .container.--full-width .part-left-m-9 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 9 + (24px * (9 - 1))); } .section .container .container .part-right-m-9, .section .container.--full-width .part-right-m-9 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 9 + (24px * (9 - 1))); } .section .container .container .part-bottom-m-9, .section .container.--full-width .part-bottom-m-9 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 9 + (24px * (9 - 1))) + 50px); } .section .container .container .part-top-m-10, .section .container.--full-width .part-top-m-10 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 10 + (24px * (10 - 1))); } .section .container .container .part-left-m-10, .section .container.--full-width .part-left-m-10 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 10 + (24px * (10 - 1))); } .section .container .container .part-right-m-10, .section .container.--full-width .part-right-m-10 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 10 + (24px * (10 - 1))); } .section .container .container .part-bottom-m-10, .section .container.--full-width .part-bottom-m-10 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 10 + (24px * (10 - 1))) + 50px); } .section .container .container .part-top-m-11, .section .container.--full-width .part-top-m-11 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 11 + (24px * (11 - 1))); } .section .container .container .part-left-m-11, .section .container.--full-width .part-left-m-11 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 11 + (24px * (11 - 1))); } .section .container .container .part-right-m-11, .section .container.--full-width .part-right-m-11 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 11 + (24px * (11 - 1))); } .section .container .container .part-bottom-m-11, .section .container.--full-width .part-bottom-m-11 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 11 + (24px * (11 - 1))) + 50px); } .section .container .container .part-top-m-12, .section .container.--full-width .part-top-m-12 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 12 + (24px * (12 - 1))); } .section .container .container .part-left-m-12, .section .container.--full-width .part-left-m-12 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 12 + (24px * (12 - 1))); } .section .container .container .part-right-m-12, .section .container.--full-width .part-right-m-12 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 12 + (24px * (12 - 1))); } .section .container .container .part-bottom-m-12, .section .container.--full-width .part-bottom-m-12 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 12 + (24px * (12 - 1))) + 50px); } } @media (max-width: 576px) { .section .container .container .part-top-s-0, .section .container.--full-width .part-top-s-0 { margin-top: 0px; } .section .container .container .part-left-s-0, .section .container.--full-width .part-left-s-0 { margin-left: 0px; } .section .container .container .part-right-s-0, .section .container.--full-width .part-right-s-0 { margin-right: 0px; } .section .container .container .part-bottom-s-0, .section .container.--full-width .part-bottom-s-0 { margin-bottom: calc(0px + 30px); } .section .container .container .part-top-s-1, .section .container.--full-width .part-top-s-1 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 1 + (24px * (1 - 1))); } .section .container .container .part-left-s-1, .section .container.--full-width .part-left-s-1 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 1 + (24px * (1 - 1))); } .section .container .container .part-right-s-1, .section .container.--full-width .part-right-s-1 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 1 + (24px * (1 - 1))); } .section .container .container .part-bottom-s-1, .section .container.--full-width .part-bottom-s-1 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 1 + (24px * (1 - 1))) + 30px); } .section .container .container .part-top-s-2, .section .container.--full-width .part-top-s-2 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 2 + (24px * (2 - 1))); } .section .container .container .part-left-s-2, .section .container.--full-width .part-left-s-2 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 2 + (24px * (2 - 1))); } .section .container .container .part-right-s-2, .section .container.--full-width .part-right-s-2 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 2 + (24px * (2 - 1))); } .section .container .container .part-bottom-s-2, .section .container.--full-width .part-bottom-s-2 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 2 + (24px * (2 - 1))) + 30px); } .section .container .container .part-top-s-3, .section .container.--full-width .part-top-s-3 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 3 + (24px * (3 - 1))); } .section .container .container .part-left-s-3, .section .container.--full-width .part-left-s-3 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 3 + (24px * (3 - 1))); } .section .container .container .part-right-s-3, .section .container.--full-width .part-right-s-3 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 3 + (24px * (3 - 1))); } .section .container .container .part-bottom-s-3, .section .container.--full-width .part-bottom-s-3 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 3 + (24px * (3 - 1))) + 30px); } .section .container .container .part-top-s-4, .section .container.--full-width .part-top-s-4 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 4 + (24px * (4 - 1))); } .section .container .container .part-left-s-4, .section .container.--full-width .part-left-s-4 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 4 + (24px * (4 - 1))); } .section .container .container .part-right-s-4, .section .container.--full-width .part-right-s-4 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 4 + (24px * (4 - 1))); } .section .container .container .part-bottom-s-4, .section .container.--full-width .part-bottom-s-4 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 4 + (24px * (4 - 1))) + 30px); } .section .container .container .part-top-s-5, .section .container.--full-width .part-top-s-5 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 5 + (24px * (5 - 1))); } .section .container .container .part-left-s-5, .section .container.--full-width .part-left-s-5 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 5 + (24px * (5 - 1))); } .section .container .container .part-right-s-5, .section .container.--full-width .part-right-s-5 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 5 + (24px * (5 - 1))); } .section .container .container .part-bottom-s-5, .section .container.--full-width .part-bottom-s-5 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 5 + (24px * (5 - 1))) + 30px); } .section .container .container .part-top-s-6, .section .container.--full-width .part-top-s-6 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 6 + (24px * (6 - 1))); } .section .container .container .part-left-s-6, .section .container.--full-width .part-left-s-6 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 6 + (24px * (6 - 1))); } .section .container .container .part-right-s-6, .section .container.--full-width .part-right-s-6 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 6 + (24px * (6 - 1))); } .section .container .container .part-bottom-s-6, .section .container.--full-width .part-bottom-s-6 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 6 + (24px * (6 - 1))) + 30px); } .section .container .container .part-top-s-7, .section .container.--full-width .part-top-s-7 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 7 + (24px * (7 - 1))); } .section .container .container .part-left-s-7, .section .container.--full-width .part-left-s-7 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 7 + (24px * (7 - 1))); } .section .container .container .part-right-s-7, .section .container.--full-width .part-right-s-7 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 7 + (24px * (7 - 1))); } .section .container .container .part-bottom-s-7, .section .container.--full-width .part-bottom-s-7 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 7 + (24px * (7 - 1))) + 30px); } .section .container .container .part-top-s-8, .section .container.--full-width .part-top-s-8 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 8 + (24px * (8 - 1))); } .section .container .container .part-left-s-8, .section .container.--full-width .part-left-s-8 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 8 + (24px * (8 - 1))); } .section .container .container .part-right-s-8, .section .container.--full-width .part-right-s-8 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 8 + (24px * (8 - 1))); } .section .container .container .part-bottom-s-8, .section .container.--full-width .part-bottom-s-8 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 8 + (24px * (8 - 1))) + 30px); } .section .container .container .part-top-s-9, .section .container.--full-width .part-top-s-9 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 9 + (24px * (9 - 1))); } .section .container .container .part-left-s-9, .section .container.--full-width .part-left-s-9 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 9 + (24px * (9 - 1))); } .section .container .container .part-right-s-9, .section .container.--full-width .part-right-s-9 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 9 + (24px * (9 - 1))); } .section .container .container .part-bottom-s-9, .section .container.--full-width .part-bottom-s-9 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 9 + (24px * (9 - 1))) + 30px); } .section .container .container .part-top-s-10, .section .container.--full-width .part-top-s-10 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 10 + (24px * (10 - 1))); } .section .container .container .part-left-s-10, .section .container.--full-width .part-left-s-10 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 10 + (24px * (10 - 1))); } .section .container .container .part-right-s-10, .section .container.--full-width .part-right-s-10 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 10 + (24px * (10 - 1))); } .section .container .container .part-bottom-s-10, .section .container.--full-width .part-bottom-s-10 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 10 + (24px * (10 - 1))) + 30px); } .section .container .container .part-top-s-11, .section .container.--full-width .part-top-s-11 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 11 + (24px * (11 - 1))); } .section .container .container .part-left-s-11, .section .container.--full-width .part-left-s-11 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 11 + (24px * (11 - 1))); } .section .container .container .part-right-s-11, .section .container.--full-width .part-right-s-11 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 11 + (24px * (11 - 1))); } .section .container .container .part-bottom-s-11, .section .container.--full-width .part-bottom-s-11 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 11 + (24px * (11 - 1))) + 30px); } .section .container .container .part-top-s-12, .section .container.--full-width .part-top-s-12 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 12 + (24px * (12 - 1))); } .section .container .container .part-left-s-12, .section .container.--full-width .part-left-s-12 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 12 + (24px * (12 - 1))); } .section .container .container .part-right-s-12, .section .container.--full-width .part-right-s-12 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 12 + (24px * (12 - 1))); } .section .container .container .part-bottom-s-12, .section .container.--full-width .part-bottom-s-12 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 12 + (24px * (12 - 1))) + 30px); } } @media (max-width: 375px) { .section .container .container .part-top-xs-0, .section .container.--full-width .part-top-xs-0 { margin-top: 0px; } .section .container .container .part-left-xs-0, .section .container.--full-width .part-left-xs-0 { margin-left: 0px; } .section .container .container .part-right-xs-0, .section .container.--full-width .part-right-xs-0 { margin-right: 0px; } .section .container .container .part-bottom-xs-0, .section .container.--full-width .part-bottom-xs-0 { margin-bottom: calc(0px + 30px); } .section .container .container .part-top-xs-1, .section .container.--full-width .part-top-xs-1 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 1 + (24px * (1 - 1))); } .section .container .container .part-left-xs-1, .section .container.--full-width .part-left-xs-1 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 1 + (24px * (1 - 1))); } .section .container .container .part-right-xs-1, .section .container.--full-width .part-right-xs-1 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 1 + (24px * (1 - 1))); } .section .container .container .part-bottom-xs-1, .section .container.--full-width .part-bottom-xs-1 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 1 + (24px * (1 - 1))) + 30px); } .section .container .container .part-top-xs-2, .section .container.--full-width .part-top-xs-2 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 2 + (24px * (2 - 1))); } .section .container .container .part-left-xs-2, .section .container.--full-width .part-left-xs-2 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 2 + (24px * (2 - 1))); } .section .container .container .part-right-xs-2, .section .container.--full-width .part-right-xs-2 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 2 + (24px * (2 - 1))); } .section .container .container .part-bottom-xs-2, .section .container.--full-width .part-bottom-xs-2 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 2 + (24px * (2 - 1))) + 30px); } .section .container .container .part-top-xs-3, .section .container.--full-width .part-top-xs-3 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 3 + (24px * (3 - 1))); } .section .container .container .part-left-xs-3, .section .container.--full-width .part-left-xs-3 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 3 + (24px * (3 - 1))); } .section .container .container .part-right-xs-3, .section .container.--full-width .part-right-xs-3 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 3 + (24px * (3 - 1))); } .section .container .container .part-bottom-xs-3, .section .container.--full-width .part-bottom-xs-3 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 3 + (24px * (3 - 1))) + 30px); } .section .container .container .part-top-xs-4, .section .container.--full-width .part-top-xs-4 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 4 + (24px * (4 - 1))); } .section .container .container .part-left-xs-4, .section .container.--full-width .part-left-xs-4 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 4 + (24px * (4 - 1))); } .section .container .container .part-right-xs-4, .section .container.--full-width .part-right-xs-4 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 4 + (24px * (4 - 1))); } .section .container .container .part-bottom-xs-4, .section .container.--full-width .part-bottom-xs-4 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 4 + (24px * (4 - 1))) + 30px); } .section .container .container .part-top-xs-5, .section .container.--full-width .part-top-xs-5 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 5 + (24px * (5 - 1))); } .section .container .container .part-left-xs-5, .section .container.--full-width .part-left-xs-5 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 5 + (24px * (5 - 1))); } .section .container .container .part-right-xs-5, .section .container.--full-width .part-right-xs-5 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 5 + (24px * (5 - 1))); } .section .container .container .part-bottom-xs-5, .section .container.--full-width .part-bottom-xs-5 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 5 + (24px * (5 - 1))) + 30px); } .section .container .container .part-top-xs-6, .section .container.--full-width .part-top-xs-6 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 6 + (24px * (6 - 1))); } .section .container .container .part-left-xs-6, .section .container.--full-width .part-left-xs-6 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 6 + (24px * (6 - 1))); } .section .container .container .part-right-xs-6, .section .container.--full-width .part-right-xs-6 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 6 + (24px * (6 - 1))); } .section .container .container .part-bottom-xs-6, .section .container.--full-width .part-bottom-xs-6 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 6 + (24px * (6 - 1))) + 30px); } .section .container .container .part-top-xs-7, .section .container.--full-width .part-top-xs-7 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 7 + (24px * (7 - 1))); } .section .container .container .part-left-xs-7, .section .container.--full-width .part-left-xs-7 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 7 + (24px * (7 - 1))); } .section .container .container .part-right-xs-7, .section .container.--full-width .part-right-xs-7 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 7 + (24px * (7 - 1))); } .section .container .container .part-bottom-xs-7, .section .container.--full-width .part-bottom-xs-7 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 7 + (24px * (7 - 1))) + 30px); } .section .container .container .part-top-xs-8, .section .container.--full-width .part-top-xs-8 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 8 + (24px * (8 - 1))); } .section .container .container .part-left-xs-8, .section .container.--full-width .part-left-xs-8 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 8 + (24px * (8 - 1))); } .section .container .container .part-right-xs-8, .section .container.--full-width .part-right-xs-8 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 8 + (24px * (8 - 1))); } .section .container .container .part-bottom-xs-8, .section .container.--full-width .part-bottom-xs-8 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 8 + (24px * (8 - 1))) + 30px); } .section .container .container .part-top-xs-9, .section .container.--full-width .part-top-xs-9 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 9 + (24px * (9 - 1))); } .section .container .container .part-left-xs-9, .section .container.--full-width .part-left-xs-9 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 9 + (24px * (9 - 1))); } .section .container .container .part-right-xs-9, .section .container.--full-width .part-right-xs-9 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 9 + (24px * (9 - 1))); } .section .container .container .part-bottom-xs-9, .section .container.--full-width .part-bottom-xs-9 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 9 + (24px * (9 - 1))) + 30px); } .section .container .container .part-top-xs-10, .section .container.--full-width .part-top-xs-10 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 10 + (24px * (10 - 1))); } .section .container .container .part-left-xs-10, .section .container.--full-width .part-left-xs-10 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 10 + (24px * (10 - 1))); } .section .container .container .part-right-xs-10, .section .container.--full-width .part-right-xs-10 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 10 + (24px * (10 - 1))); } .section .container .container .part-bottom-xs-10, .section .container.--full-width .part-bottom-xs-10 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 10 + (24px * (10 - 1))) + 30px); } .section .container .container .part-top-xs-11, .section .container.--full-width .part-top-xs-11 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 11 + (24px * (11 - 1))); } .section .container .container .part-left-xs-11, .section .container.--full-width .part-left-xs-11 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 11 + (24px * (11 - 1))); } .section .container .container .part-right-xs-11, .section .container.--full-width .part-right-xs-11 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 11 + (24px * (11 - 1))); } .section .container .container .part-bottom-xs-11, .section .container.--full-width .part-bottom-xs-11 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 11 + (24px * (11 - 1))) + 30px); } .section .container .container .part-top-xs-12, .section .container.--full-width .part-top-xs-12 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 12 + (24px * (12 - 1))); } .section .container .container .part-left-xs-12, .section .container.--full-width .part-left-xs-12 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 12 + (24px * (12 - 1))); } .section .container .container .part-right-xs-12, .section .container.--full-width .part-right-xs-12 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 12 + (24px * (12 - 1))); } .section .container .container .part-bottom-xs-12, .section .container.--full-width .part-bottom-xs-12 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 12 + (24px * (12 - 1))) + 30px); } } @media (max-width: 375px) { .section .container .container .part-xs-0, .section .container.--full-width .part-xs-0 { display: none; } } @media (max-width: 576px) { .section .container .container .part-s-0, .section .container.--full-width .part-s-0 { display: none; } } @media (max-width: 768px) { .section .container .container .part-m-0, .section .container.--full-width .part-m-0 { display: none; } } @media (max-width: 1024px) { .section .container .container .part-l-0, .section .container.--full-width .part-l-0 { display: none; } } @media (max-width: 1280px) { .section .container .container .part-xl-0, .section .container.--full-width .part-xl-0 { display: none; } } .section .container .container [class*=part].-justify-start, .section .container.--full-width [class*=part].-justify-start { display: flex; justify-content: flex-start; } .section .container .container [class*=part].-justify-center, .section .container.--full-width [class*=part].-justify-center { display: flex; justify-content: center; } .section .container .container [class*=part].-justify-end, .section .container.--full-width [class*=part].-justify-end { display: flex; justify-content: flex-end; } .section .container .container [class*=part].-align-start, .section .container.--full-width [class*=part].-align-start { display: flex; align-items: flex-start; } .section .container .container [class*=part].-align-center, .section .container.--full-width [class*=part].-align-center { display: flex; align-items: center; } .section .container .container [class*=part].-align-end, .section .container.--full-width [class*=part].-align-end { display: flex; align-items: flex-end; } .section .container .container [class*=part].-text-left, .section .container.--full-width [class*=part].-text-left { text-align: left; } .section .container .container [class*=part].-text-center, .section .container.--full-width [class*=part].-text-center { text-align: center; } .section .container .container [class*=part].-text-right, .section .container.--full-width [class*=part].-text-right { text-align: right; } .section .container.-justify-center { justify-content: center; } .section > .container { margin-bottom: -50px; } @media (max-width: 1024px) { .section > .container { margin-bottom: -50px; } } @media (max-width: 768px) { .section > .container { margin-bottom: -50px; } } @media (max-width: 576px) { .section > .container { margin-bottom: -30px; } } @media (max-width: 375px) { .section > .container { margin-bottom: -30px; } } .section > .container [class*=part] { margin-bottom: 50px; } @media (max-width: 1024px) { .section > .container [class*=part] { margin-bottom: 50px; } } @media (max-width: 768px) { .section > .container [class*=part] { margin-bottom: 50px; } } @media (max-width: 576px) { .section > .container [class*=part] { margin-bottom: 30px; } } @media (max-width: 375px) { .section > .container [class*=part] { margin-bottom: 30px; } } .section + .section { margin-top: 100px; } @media (max-width: 1024px) { .section + .section { margin-top: 70px; } } @media (max-width: 768px) { .section + .section { margin-top: 70px; } } @media (max-width: 576px) { .section + .section { margin-top: 50px; } } @media (max-width: 375px) { .section + .section { margin-top: 50px; } } @media (min-width: 1680px) { .section + .section { margin-top: 100px; } } .section:first-of-type:not(.--colored):not(.--page-header) { padding-top: 190px; } @media (max-width: 1024px) { .section:first-of-type:not(.--colored):not(.--page-header) { padding-top: 170px; } } @media (max-width: 768px) { .section:first-of-type:not(.--colored):not(.--page-header) { padding-top: 170px; } } @media (max-width: 576px) { .section:first-of-type:not(.--colored):not(.--page-header) { padding-top: 140px; } } @media (max-width: 375px) { .section:first-of-type:not(.--colored):not(.--page-header) { padding-top: 140px; } } .section:first-of-type.--colored.section, .section:first-of-type.--page-header.section { padding-top: 190px; } @media (max-width: 1024px) { .section:first-of-type.--colored.section, .section:first-of-type.--page-header.section { padding-top: 170px; } } @media (max-width: 768px) { .section:first-of-type.--colored.section, .section:first-of-type.--page-header.section { padding-top: 170px; } } @media (max-width: 576px) { .section:first-of-type.--colored.section, .section:first-of-type.--page-header.section { padding-top: 140px; } } @media (max-width: 375px) { .section:first-of-type.--colored.section, .section:first-of-type.--page-header.section { padding-top: 140px; } } .section:last-of-type { margin-bottom: 100px; } @media (max-width: 1024px) { .section:last-of-type { margin-bottom: 70px; } } @media (max-width: 768px) { .section:last-of-type { margin-bottom: 70px; } } @media (max-width: 576px) { .section:last-of-type { margin-bottom: 50px; } } @media (max-width: 375px) { .section:last-of-type { margin-bottom: 50px; } } .section.--extra-small { position: relative; display: flex; justify-content: space-between; align-items: stretch; flex-direction: row; flex-wrap: wrap; width: 100%; margin-right: auto; margin-left: auto; padding-right: 90px; padding-left: 90px; max-width: 550px; } .section.--extra-small .part-1:not(.no-gutter) { width: calc(((100% - (24px * (12 - 1))) / 12) * 1 + (24px * (1 - 1))); } .section.--extra-small .part-1.no-gutter { width: calc(((100% - (0px * (12 - 1))) / 12) * 1 + (0px * (1 - 1))); } .section.--extra-small .part-2:not(.no-gutter) { width: calc(((100% - (24px * (12 - 1))) / 12) * 2 + (24px * (2 - 1))); } .section.--extra-small .part-2.no-gutter { width: calc(((100% - (0px * (12 - 1))) / 12) * 2 + (0px * (2 - 1))); } .section.--extra-small .part-3:not(.no-gutter) { width: calc(((100% - (24px * (12 - 1))) / 12) * 3 + (24px * (3 - 1))); } .section.--extra-small .part-3.no-gutter { width: calc(((100% - (0px * (12 - 1))) / 12) * 3 + (0px * (3 - 1))); } .section.--extra-small .part-4:not(.no-gutter) { width: calc(((100% - (24px * (12 - 1))) / 12) * 4 + (24px * (4 - 1))); } .section.--extra-small .part-4.no-gutter { width: calc(((100% - (0px * (12 - 1))) / 12) * 4 + (0px * (4 - 1))); } .section.--extra-small .part-5:not(.no-gutter) { width: calc(((100% - (24px * (12 - 1))) / 12) * 5 + (24px * (5 - 1))); } .section.--extra-small .part-5.no-gutter { width: calc(((100% - (0px * (12 - 1))) / 12) * 5 + (0px * (5 - 1))); } .section.--extra-small .part-6:not(.no-gutter) { width: calc(((100% - (24px * (12 - 1))) / 12) * 6 + (24px * (6 - 1))); } .section.--extra-small .part-6.no-gutter { width: calc(((100% - (0px * (12 - 1))) / 12) * 6 + (0px * (6 - 1))); } .section.--extra-small .part-7:not(.no-gutter) { width: calc(((100% - (24px * (12 - 1))) / 12) * 7 + (24px * (7 - 1))); } .section.--extra-small .part-7.no-gutter { width: calc(((100% - (0px * (12 - 1))) / 12) * 7 + (0px * (7 - 1))); } .section.--extra-small .part-8:not(.no-gutter) { width: calc(((100% - (24px * (12 - 1))) / 12) * 8 + (24px * (8 - 1))); } .section.--extra-small .part-8.no-gutter { width: calc(((100% - (0px * (12 - 1))) / 12) * 8 + (0px * (8 - 1))); } .section.--extra-small .part-9:not(.no-gutter) { width: calc(((100% - (24px * (12 - 1))) / 12) * 9 + (24px * (9 - 1))); } .section.--extra-small .part-9.no-gutter { width: calc(((100% - (0px * (12 - 1))) / 12) * 9 + (0px * (9 - 1))); } .section.--extra-small .part-10:not(.no-gutter) { width: calc(((100% - (24px * (12 - 1))) / 12) * 10 + (24px * (10 - 1))); } .section.--extra-small .part-10.no-gutter { width: calc(((100% - (0px * (12 - 1))) / 12) * 10 + (0px * (10 - 1))); } .section.--extra-small .part-11:not(.no-gutter) { width: calc(((100% - (24px * (12 - 1))) / 12) * 11 + (24px * (11 - 1))); } .section.--extra-small .part-11.no-gutter { width: calc(((100% - (0px * (12 - 1))) / 12) * 11 + (0px * (11 - 1))); } .section.--extra-small .part-12:not(.no-gutter) { width: calc(((100% - (24px * (12 - 1))) / 12) * 12 + (24px * (12 - 1))); } .section.--extra-small .part-12.no-gutter { width: calc(((100% - (0px * (12 - 1))) / 12) * 12 + (0px * (12 - 1))); } @media (max-width: 1280px) { .section.--extra-small .part-xl-1:not(.no-gutter) { width: calc(((100% - (24px * (12 - 1))) / 12) * 1 + (24px * (1 - 1))); } .section.--extra-small .part-xl-1.no-gutter { width: calc(((100% - (0px * (12 - 1))) / 12) * 1 + (0px * (1 - 1))); } .section.--extra-small .part-xl-2:not(.no-gutter) { width: calc(((100% - (24px * (12 - 1))) / 12) * 2 + (24px * (2 - 1))); } .section.--extra-small .part-xl-2.no-gutter { width: calc(((100% - (0px * (12 - 1))) / 12) * 2 + (0px * (2 - 1))); } .section.--extra-small .part-xl-3:not(.no-gutter) { width: calc(((100% - (24px * (12 - 1))) / 12) * 3 + (24px * (3 - 1))); } .section.--extra-small .part-xl-3.no-gutter { width: calc(((100% - (0px * (12 - 1))) / 12) * 3 + (0px * (3 - 1))); } .section.--extra-small .part-xl-4:not(.no-gutter) { width: calc(((100% - (24px * (12 - 1))) / 12) * 4 + (24px * (4 - 1))); } .section.--extra-small .part-xl-4.no-gutter { width: calc(((100% - (0px * (12 - 1))) / 12) * 4 + (0px * (4 - 1))); } .section.--extra-small .part-xl-5:not(.no-gutter) { width: calc(((100% - (24px * (12 - 1))) / 12) * 5 + (24px * (5 - 1))); } .section.--extra-small .part-xl-5.no-gutter { width: calc(((100% - (0px * (12 - 1))) / 12) * 5 + (0px * (5 - 1))); } .section.--extra-small .part-xl-6:not(.no-gutter) { width: calc(((100% - (24px * (12 - 1))) / 12) * 6 + (24px * (6 - 1))); } .section.--extra-small .part-xl-6.no-gutter { width: calc(((100% - (0px * (12 - 1))) / 12) * 6 + (0px * (6 - 1))); } .section.--extra-small .part-xl-7:not(.no-gutter) { width: calc(((100% - (24px * (12 - 1))) / 12) * 7 + (24px * (7 - 1))); } .section.--extra-small .part-xl-7.no-gutter { width: calc(((100% - (0px * (12 - 1))) / 12) * 7 + (0px * (7 - 1))); } .section.--extra-small .part-xl-8:not(.no-gutter) { width: calc(((100% - (24px * (12 - 1))) / 12) * 8 + (24px * (8 - 1))); } .section.--extra-small .part-xl-8.no-gutter { width: calc(((100% - (0px * (12 - 1))) / 12) * 8 + (0px * (8 - 1))); } .section.--extra-small .part-xl-9:not(.no-gutter) { width: calc(((100% - (24px * (12 - 1))) / 12) * 9 + (24px * (9 - 1))); } .section.--extra-small .part-xl-9.no-gutter { width: calc(((100% - (0px * (12 - 1))) / 12) * 9 + (0px * (9 - 1))); } .section.--extra-small .part-xl-10:not(.no-gutter) { width: calc(((100% - (24px * (12 - 1))) / 12) * 10 + (24px * (10 - 1))); } .section.--extra-small .part-xl-10.no-gutter { width: calc(((100% - (0px * (12 - 1))) / 12) * 10 + (0px * (10 - 1))); } .section.--extra-small .part-xl-11:not(.no-gutter) { width: calc(((100% - (24px * (12 - 1))) / 12) * 11 + (24px * (11 - 1))); } .section.--extra-small .part-xl-11.no-gutter { width: calc(((100% - (0px * (12 - 1))) / 12) * 11 + (0px * (11 - 1))); } .section.--extra-small .part-xl-12:not(.no-gutter) { width: calc(((100% - (24px * (12 - 1))) / 12) * 12 + (24px * (12 - 1))); } .section.--extra-small .part-xl-12.no-gutter { width: calc(((100% - (0px * (12 - 1))) / 12) * 12 + (0px * (12 - 1))); } } @media (max-width: 1024px) { .section.--extra-small .part-l-1:not(.no-gutter) { width: calc(((100% - (16px * (8 - 1))) / 8) * 1 + (16px * (1 - 1))); } .section.--extra-small .part-l-1.no-gutter { width: calc(((100% - (0px * (8 - 1))) / 8) * 1 + (0px * (1 - 1))); } .section.--extra-small .part-l-2:not(.no-gutter) { width: calc(((100% - (16px * (8 - 1))) / 8) * 2 + (16px * (2 - 1))); } .section.--extra-small .part-l-2.no-gutter { width: calc(((100% - (0px * (8 - 1))) / 8) * 2 + (0px * (2 - 1))); } .section.--extra-small .part-l-3:not(.no-gutter) { width: calc(((100% - (16px * (8 - 1))) / 8) * 3 + (16px * (3 - 1))); } .section.--extra-small .part-l-3.no-gutter { width: calc(((100% - (0px * (8 - 1))) / 8) * 3 + (0px * (3 - 1))); } .section.--extra-small .part-l-4:not(.no-gutter) { width: calc(((100% - (16px * (8 - 1))) / 8) * 4 + (16px * (4 - 1))); } .section.--extra-small .part-l-4.no-gutter { width: calc(((100% - (0px * (8 - 1))) / 8) * 4 + (0px * (4 - 1))); } .section.--extra-small .part-l-5:not(.no-gutter) { width: calc(((100% - (16px * (8 - 1))) / 8) * 5 + (16px * (5 - 1))); } .section.--extra-small .part-l-5.no-gutter { width: calc(((100% - (0px * (8 - 1))) / 8) * 5 + (0px * (5 - 1))); } .section.--extra-small .part-l-6:not(.no-gutter) { width: calc(((100% - (16px * (8 - 1))) / 8) * 6 + (16px * (6 - 1))); } .section.--extra-small .part-l-6.no-gutter { width: calc(((100% - (0px * (8 - 1))) / 8) * 6 + (0px * (6 - 1))); } .section.--extra-small .part-l-7:not(.no-gutter) { width: calc(((100% - (16px * (8 - 1))) / 8) * 7 + (16px * (7 - 1))); } .section.--extra-small .part-l-7.no-gutter { width: calc(((100% - (0px * (8 - 1))) / 8) * 7 + (0px * (7 - 1))); } .section.--extra-small .part-l-8:not(.no-gutter) { width: calc(((100% - (16px * (8 - 1))) / 8) * 8 + (16px * (8 - 1))); } .section.--extra-small .part-l-8.no-gutter { width: calc(((100% - (0px * (8 - 1))) / 8) * 8 + (0px * (8 - 1))); } } @media (max-width: 768px) { .section.--extra-small .part-m-1:not(.no-gutter) { width: calc(((100% - (14px * (8 - 1))) / 8) * 1 + (14px * (1 - 1))); } .section.--extra-small .part-m-1.no-gutter { width: calc(((100% - (0px * (8 - 1))) / 8) * 1 + (0px * (1 - 1))); } .section.--extra-small .part-m-2:not(.no-gutter) { width: calc(((100% - (14px * (8 - 1))) / 8) * 2 + (14px * (2 - 1))); } .section.--extra-small .part-m-2.no-gutter { width: calc(((100% - (0px * (8 - 1))) / 8) * 2 + (0px * (2 - 1))); } .section.--extra-small .part-m-3:not(.no-gutter) { width: calc(((100% - (14px * (8 - 1))) / 8) * 3 + (14px * (3 - 1))); } .section.--extra-small .part-m-3.no-gutter { width: calc(((100% - (0px * (8 - 1))) / 8) * 3 + (0px * (3 - 1))); } .section.--extra-small .part-m-4:not(.no-gutter) { width: calc(((100% - (14px * (8 - 1))) / 8) * 4 + (14px * (4 - 1))); } .section.--extra-small .part-m-4.no-gutter { width: calc(((100% - (0px * (8 - 1))) / 8) * 4 + (0px * (4 - 1))); } .section.--extra-small .part-m-5:not(.no-gutter) { width: calc(((100% - (14px * (8 - 1))) / 8) * 5 + (14px * (5 - 1))); } .section.--extra-small .part-m-5.no-gutter { width: calc(((100% - (0px * (8 - 1))) / 8) * 5 + (0px * (5 - 1))); } .section.--extra-small .part-m-6:not(.no-gutter) { width: calc(((100% - (14px * (8 - 1))) / 8) * 6 + (14px * (6 - 1))); } .section.--extra-small .part-m-6.no-gutter { width: calc(((100% - (0px * (8 - 1))) / 8) * 6 + (0px * (6 - 1))); } .section.--extra-small .part-m-7:not(.no-gutter) { width: calc(((100% - (14px * (8 - 1))) / 8) * 7 + (14px * (7 - 1))); } .section.--extra-small .part-m-7.no-gutter { width: calc(((100% - (0px * (8 - 1))) / 8) * 7 + (0px * (7 - 1))); } .section.--extra-small .part-m-8:not(.no-gutter) { width: calc(((100% - (14px * (8 - 1))) / 8) * 8 + (14px * (8 - 1))); } .section.--extra-small .part-m-8.no-gutter { width: calc(((100% - (0px * (8 - 1))) / 8) * 8 + (0px * (8 - 1))); } } @media (max-width: 576px) { .section.--extra-small .part-s-1:not(.no-gutter) { width: calc(((100% - (10px * (4 - 1))) / 4) * 1 + (10px * (1 - 1))); } .section.--extra-small .part-s-1.no-gutter { width: calc(((100% - (0px * (4 - 1))) / 4) * 1 + (0px * (1 - 1))); } .section.--extra-small .part-s-2:not(.no-gutter) { width: calc(((100% - (10px * (4 - 1))) / 4) * 2 + (10px * (2 - 1))); } .section.--extra-small .part-s-2.no-gutter { width: calc(((100% - (0px * (4 - 1))) / 4) * 2 + (0px * (2 - 1))); } .section.--extra-small .part-s-3:not(.no-gutter) { width: calc(((100% - (10px * (4 - 1))) / 4) * 3 + (10px * (3 - 1))); } .section.--extra-small .part-s-3.no-gutter { width: calc(((100% - (0px * (4 - 1))) / 4) * 3 + (0px * (3 - 1))); } .section.--extra-small .part-s-4:not(.no-gutter) { width: calc(((100% - (10px * (4 - 1))) / 4) * 4 + (10px * (4 - 1))); } .section.--extra-small .part-s-4.no-gutter { width: calc(((100% - (0px * (4 - 1))) / 4) * 4 + (0px * (4 - 1))); } } @media (max-width: 375px) { .section.--extra-small .part-xs-1:not(.no-gutter) { width: calc(((100% - (10px * (4 - 1))) / 4) * 1 + (10px * (1 - 1))); } .section.--extra-small .part-xs-1.no-gutter { width: calc(((100% - (0px * (4 - 1))) / 4) * 1 + (0px * (1 - 1))); } .section.--extra-small .part-xs-2:not(.no-gutter) { width: calc(((100% - (10px * (4 - 1))) / 4) * 2 + (10px * (2 - 1))); } .section.--extra-small .part-xs-2.no-gutter { width: calc(((100% - (0px * (4 - 1))) / 4) * 2 + (0px * (2 - 1))); } .section.--extra-small .part-xs-3:not(.no-gutter) { width: calc(((100% - (10px * (4 - 1))) / 4) * 3 + (10px * (3 - 1))); } .section.--extra-small .part-xs-3.no-gutter { width: calc(((100% - (0px * (4 - 1))) / 4) * 3 + (0px * (3 - 1))); } .section.--extra-small .part-xs-4:not(.no-gutter) { width: calc(((100% - (10px * (4 - 1))) / 4) * 4 + (10px * (4 - 1))); } .section.--extra-small .part-xs-4.no-gutter { width: calc(((100% - (0px * (4 - 1))) / 4) * 4 + (0px * (4 - 1))); } } .section.--extra-small .part-top-0 { margin-top: 0px; } .section.--extra-small .part-left-0 { margin-left: 0px; } .section.--extra-small .part-right-0 { margin-right: 0px; } .section.--extra-small .part-bottom-0 { margin-bottom: calc(0px + 50px); } .section.--extra-small .part-top-1 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 1 + (24px * (1 - 1))); } .section.--extra-small .part-left-1 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 1 + (24px * (1 - 1))); } .section.--extra-small .part-right-1 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 1 + (24px * (1 - 1))); } .section.--extra-small .part-bottom-1 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 1 + (24px * (1 - 1))) + 50px); } .section.--extra-small .part-top-2 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 2 + (24px * (2 - 1))); } .section.--extra-small .part-left-2 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 2 + (24px * (2 - 1))); } .section.--extra-small .part-right-2 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 2 + (24px * (2 - 1))); } .section.--extra-small .part-bottom-2 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 2 + (24px * (2 - 1))) + 50px); } .section.--extra-small .part-top-3 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 3 + (24px * (3 - 1))); } .section.--extra-small .part-left-3 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 3 + (24px * (3 - 1))); } .section.--extra-small .part-right-3 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 3 + (24px * (3 - 1))); } .section.--extra-small .part-bottom-3 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 3 + (24px * (3 - 1))) + 50px); } .section.--extra-small .part-top-4 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 4 + (24px * (4 - 1))); } .section.--extra-small .part-left-4 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 4 + (24px * (4 - 1))); } .section.--extra-small .part-right-4 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 4 + (24px * (4 - 1))); } .section.--extra-small .part-bottom-4 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 4 + (24px * (4 - 1))) + 50px); } .section.--extra-small .part-top-5 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 5 + (24px * (5 - 1))); } .section.--extra-small .part-left-5 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 5 + (24px * (5 - 1))); } .section.--extra-small .part-right-5 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 5 + (24px * (5 - 1))); } .section.--extra-small .part-bottom-5 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 5 + (24px * (5 - 1))) + 50px); } .section.--extra-small .part-top-6 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 6 + (24px * (6 - 1))); } .section.--extra-small .part-left-6 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 6 + (24px * (6 - 1))); } .section.--extra-small .part-right-6 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 6 + (24px * (6 - 1))); } .section.--extra-small .part-bottom-6 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 6 + (24px * (6 - 1))) + 50px); } .section.--extra-small .part-top-7 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 7 + (24px * (7 - 1))); } .section.--extra-small .part-left-7 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 7 + (24px * (7 - 1))); } .section.--extra-small .part-right-7 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 7 + (24px * (7 - 1))); } .section.--extra-small .part-bottom-7 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 7 + (24px * (7 - 1))) + 50px); } .section.--extra-small .part-top-8 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 8 + (24px * (8 - 1))); } .section.--extra-small .part-left-8 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 8 + (24px * (8 - 1))); } .section.--extra-small .part-right-8 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 8 + (24px * (8 - 1))); } .section.--extra-small .part-bottom-8 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 8 + (24px * (8 - 1))) + 50px); } .section.--extra-small .part-top-9 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 9 + (24px * (9 - 1))); } .section.--extra-small .part-left-9 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 9 + (24px * (9 - 1))); } .section.--extra-small .part-right-9 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 9 + (24px * (9 - 1))); } .section.--extra-small .part-bottom-9 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 9 + (24px * (9 - 1))) + 50px); } .section.--extra-small .part-top-10 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 10 + (24px * (10 - 1))); } .section.--extra-small .part-left-10 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 10 + (24px * (10 - 1))); } .section.--extra-small .part-right-10 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 10 + (24px * (10 - 1))); } .section.--extra-small .part-bottom-10 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 10 + (24px * (10 - 1))) + 50px); } .section.--extra-small .part-top-11 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 11 + (24px * (11 - 1))); } .section.--extra-small .part-left-11 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 11 + (24px * (11 - 1))); } .section.--extra-small .part-right-11 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 11 + (24px * (11 - 1))); } .section.--extra-small .part-bottom-11 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 11 + (24px * (11 - 1))) + 50px); } .section.--extra-small .part-top-12 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 12 + (24px * (12 - 1))); } .section.--extra-small .part-left-12 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 12 + (24px * (12 - 1))); } .section.--extra-small .part-right-12 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 12 + (24px * (12 - 1))); } .section.--extra-small .part-bottom-12 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 12 + (24px * (12 - 1))) + 50px); } @media (max-width: 1024px) { .section.--extra-small .part-top-l-0 { margin-top: 0px; } .section.--extra-small .part-left-l-0 { margin-left: 0px; } .section.--extra-small .part-right-l-0 { margin-right: 0px; } .section.--extra-small .part-bottom-l-0 { margin-bottom: calc(0px + 50px); } .section.--extra-small .part-top-l-1 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 1 + (24px * (1 - 1))); } .section.--extra-small .part-left-l-1 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 1 + (24px * (1 - 1))); } .section.--extra-small .part-right-l-1 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 1 + (24px * (1 - 1))); } .section.--extra-small .part-bottom-l-1 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 1 + (24px * (1 - 1))) + 50px); } .section.--extra-small .part-top-l-2 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 2 + (24px * (2 - 1))); } .section.--extra-small .part-left-l-2 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 2 + (24px * (2 - 1))); } .section.--extra-small .part-right-l-2 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 2 + (24px * (2 - 1))); } .section.--extra-small .part-bottom-l-2 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 2 + (24px * (2 - 1))) + 50px); } .section.--extra-small .part-top-l-3 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 3 + (24px * (3 - 1))); } .section.--extra-small .part-left-l-3 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 3 + (24px * (3 - 1))); } .section.--extra-small .part-right-l-3 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 3 + (24px * (3 - 1))); } .section.--extra-small .part-bottom-l-3 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 3 + (24px * (3 - 1))) + 50px); } .section.--extra-small .part-top-l-4 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 4 + (24px * (4 - 1))); } .section.--extra-small .part-left-l-4 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 4 + (24px * (4 - 1))); } .section.--extra-small .part-right-l-4 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 4 + (24px * (4 - 1))); } .section.--extra-small .part-bottom-l-4 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 4 + (24px * (4 - 1))) + 50px); } .section.--extra-small .part-top-l-5 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 5 + (24px * (5 - 1))); } .section.--extra-small .part-left-l-5 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 5 + (24px * (5 - 1))); } .section.--extra-small .part-right-l-5 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 5 + (24px * (5 - 1))); } .section.--extra-small .part-bottom-l-5 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 5 + (24px * (5 - 1))) + 50px); } .section.--extra-small .part-top-l-6 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 6 + (24px * (6 - 1))); } .section.--extra-small .part-left-l-6 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 6 + (24px * (6 - 1))); } .section.--extra-small .part-right-l-6 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 6 + (24px * (6 - 1))); } .section.--extra-small .part-bottom-l-6 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 6 + (24px * (6 - 1))) + 50px); } .section.--extra-small .part-top-l-7 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 7 + (24px * (7 - 1))); } .section.--extra-small .part-left-l-7 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 7 + (24px * (7 - 1))); } .section.--extra-small .part-right-l-7 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 7 + (24px * (7 - 1))); } .section.--extra-small .part-bottom-l-7 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 7 + (24px * (7 - 1))) + 50px); } .section.--extra-small .part-top-l-8 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 8 + (24px * (8 - 1))); } .section.--extra-small .part-left-l-8 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 8 + (24px * (8 - 1))); } .section.--extra-small .part-right-l-8 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 8 + (24px * (8 - 1))); } .section.--extra-small .part-bottom-l-8 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 8 + (24px * (8 - 1))) + 50px); } .section.--extra-small .part-top-l-9 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 9 + (24px * (9 - 1))); } .section.--extra-small .part-left-l-9 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 9 + (24px * (9 - 1))); } .section.--extra-small .part-right-l-9 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 9 + (24px * (9 - 1))); } .section.--extra-small .part-bottom-l-9 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 9 + (24px * (9 - 1))) + 50px); } .section.--extra-small .part-top-l-10 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 10 + (24px * (10 - 1))); } .section.--extra-small .part-left-l-10 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 10 + (24px * (10 - 1))); } .section.--extra-small .part-right-l-10 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 10 + (24px * (10 - 1))); } .section.--extra-small .part-bottom-l-10 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 10 + (24px * (10 - 1))) + 50px); } .section.--extra-small .part-top-l-11 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 11 + (24px * (11 - 1))); } .section.--extra-small .part-left-l-11 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 11 + (24px * (11 - 1))); } .section.--extra-small .part-right-l-11 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 11 + (24px * (11 - 1))); } .section.--extra-small .part-bottom-l-11 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 11 + (24px * (11 - 1))) + 50px); } .section.--extra-small .part-top-l-12 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 12 + (24px * (12 - 1))); } .section.--extra-small .part-left-l-12 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 12 + (24px * (12 - 1))); } .section.--extra-small .part-right-l-12 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 12 + (24px * (12 - 1))); } .section.--extra-small .part-bottom-l-12 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 12 + (24px * (12 - 1))) + 50px); } } @media (max-width: 768px) { .section.--extra-small .part-top-m-0 { margin-top: 0px; } .section.--extra-small .part-left-m-0 { margin-left: 0px; } .section.--extra-small .part-right-m-0 { margin-right: 0px; } .section.--extra-small .part-bottom-m-0 { margin-bottom: calc(0px + 50px); } .section.--extra-small .part-top-m-1 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 1 + (24px * (1 - 1))); } .section.--extra-small .part-left-m-1 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 1 + (24px * (1 - 1))); } .section.--extra-small .part-right-m-1 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 1 + (24px * (1 - 1))); } .section.--extra-small .part-bottom-m-1 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 1 + (24px * (1 - 1))) + 50px); } .section.--extra-small .part-top-m-2 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 2 + (24px * (2 - 1))); } .section.--extra-small .part-left-m-2 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 2 + (24px * (2 - 1))); } .section.--extra-small .part-right-m-2 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 2 + (24px * (2 - 1))); } .section.--extra-small .part-bottom-m-2 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 2 + (24px * (2 - 1))) + 50px); } .section.--extra-small .part-top-m-3 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 3 + (24px * (3 - 1))); } .section.--extra-small .part-left-m-3 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 3 + (24px * (3 - 1))); } .section.--extra-small .part-right-m-3 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 3 + (24px * (3 - 1))); } .section.--extra-small .part-bottom-m-3 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 3 + (24px * (3 - 1))) + 50px); } .section.--extra-small .part-top-m-4 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 4 + (24px * (4 - 1))); } .section.--extra-small .part-left-m-4 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 4 + (24px * (4 - 1))); } .section.--extra-small .part-right-m-4 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 4 + (24px * (4 - 1))); } .section.--extra-small .part-bottom-m-4 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 4 + (24px * (4 - 1))) + 50px); } .section.--extra-small .part-top-m-5 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 5 + (24px * (5 - 1))); } .section.--extra-small .part-left-m-5 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 5 + (24px * (5 - 1))); } .section.--extra-small .part-right-m-5 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 5 + (24px * (5 - 1))); } .section.--extra-small .part-bottom-m-5 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 5 + (24px * (5 - 1))) + 50px); } .section.--extra-small .part-top-m-6 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 6 + (24px * (6 - 1))); } .section.--extra-small .part-left-m-6 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 6 + (24px * (6 - 1))); } .section.--extra-small .part-right-m-6 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 6 + (24px * (6 - 1))); } .section.--extra-small .part-bottom-m-6 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 6 + (24px * (6 - 1))) + 50px); } .section.--extra-small .part-top-m-7 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 7 + (24px * (7 - 1))); } .section.--extra-small .part-left-m-7 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 7 + (24px * (7 - 1))); } .section.--extra-small .part-right-m-7 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 7 + (24px * (7 - 1))); } .section.--extra-small .part-bottom-m-7 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 7 + (24px * (7 - 1))) + 50px); } .section.--extra-small .part-top-m-8 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 8 + (24px * (8 - 1))); } .section.--extra-small .part-left-m-8 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 8 + (24px * (8 - 1))); } .section.--extra-small .part-right-m-8 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 8 + (24px * (8 - 1))); } .section.--extra-small .part-bottom-m-8 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 8 + (24px * (8 - 1))) + 50px); } .section.--extra-small .part-top-m-9 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 9 + (24px * (9 - 1))); } .section.--extra-small .part-left-m-9 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 9 + (24px * (9 - 1))); } .section.--extra-small .part-right-m-9 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 9 + (24px * (9 - 1))); } .section.--extra-small .part-bottom-m-9 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 9 + (24px * (9 - 1))) + 50px); } .section.--extra-small .part-top-m-10 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 10 + (24px * (10 - 1))); } .section.--extra-small .part-left-m-10 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 10 + (24px * (10 - 1))); } .section.--extra-small .part-right-m-10 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 10 + (24px * (10 - 1))); } .section.--extra-small .part-bottom-m-10 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 10 + (24px * (10 - 1))) + 50px); } .section.--extra-small .part-top-m-11 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 11 + (24px * (11 - 1))); } .section.--extra-small .part-left-m-11 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 11 + (24px * (11 - 1))); } .section.--extra-small .part-right-m-11 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 11 + (24px * (11 - 1))); } .section.--extra-small .part-bottom-m-11 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 11 + (24px * (11 - 1))) + 50px); } .section.--extra-small .part-top-m-12 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 12 + (24px * (12 - 1))); } .section.--extra-small .part-left-m-12 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 12 + (24px * (12 - 1))); } .section.--extra-small .part-right-m-12 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 12 + (24px * (12 - 1))); } .section.--extra-small .part-bottom-m-12 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 12 + (24px * (12 - 1))) + 50px); } } @media (max-width: 576px) { .section.--extra-small .part-top-s-0 { margin-top: 0px; } .section.--extra-small .part-left-s-0 { margin-left: 0px; } .section.--extra-small .part-right-s-0 { margin-right: 0px; } .section.--extra-small .part-bottom-s-0 { margin-bottom: calc(0px + 30px); } .section.--extra-small .part-top-s-1 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 1 + (24px * (1 - 1))); } .section.--extra-small .part-left-s-1 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 1 + (24px * (1 - 1))); } .section.--extra-small .part-right-s-1 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 1 + (24px * (1 - 1))); } .section.--extra-small .part-bottom-s-1 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 1 + (24px * (1 - 1))) + 30px); } .section.--extra-small .part-top-s-2 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 2 + (24px * (2 - 1))); } .section.--extra-small .part-left-s-2 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 2 + (24px * (2 - 1))); } .section.--extra-small .part-right-s-2 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 2 + (24px * (2 - 1))); } .section.--extra-small .part-bottom-s-2 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 2 + (24px * (2 - 1))) + 30px); } .section.--extra-small .part-top-s-3 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 3 + (24px * (3 - 1))); } .section.--extra-small .part-left-s-3 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 3 + (24px * (3 - 1))); } .section.--extra-small .part-right-s-3 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 3 + (24px * (3 - 1))); } .section.--extra-small .part-bottom-s-3 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 3 + (24px * (3 - 1))) + 30px); } .section.--extra-small .part-top-s-4 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 4 + (24px * (4 - 1))); } .section.--extra-small .part-left-s-4 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 4 + (24px * (4 - 1))); } .section.--extra-small .part-right-s-4 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 4 + (24px * (4 - 1))); } .section.--extra-small .part-bottom-s-4 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 4 + (24px * (4 - 1))) + 30px); } .section.--extra-small .part-top-s-5 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 5 + (24px * (5 - 1))); } .section.--extra-small .part-left-s-5 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 5 + (24px * (5 - 1))); } .section.--extra-small .part-right-s-5 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 5 + (24px * (5 - 1))); } .section.--extra-small .part-bottom-s-5 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 5 + (24px * (5 - 1))) + 30px); } .section.--extra-small .part-top-s-6 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 6 + (24px * (6 - 1))); } .section.--extra-small .part-left-s-6 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 6 + (24px * (6 - 1))); } .section.--extra-small .part-right-s-6 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 6 + (24px * (6 - 1))); } .section.--extra-small .part-bottom-s-6 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 6 + (24px * (6 - 1))) + 30px); } .section.--extra-small .part-top-s-7 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 7 + (24px * (7 - 1))); } .section.--extra-small .part-left-s-7 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 7 + (24px * (7 - 1))); } .section.--extra-small .part-right-s-7 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 7 + (24px * (7 - 1))); } .section.--extra-small .part-bottom-s-7 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 7 + (24px * (7 - 1))) + 30px); } .section.--extra-small .part-top-s-8 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 8 + (24px * (8 - 1))); } .section.--extra-small .part-left-s-8 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 8 + (24px * (8 - 1))); } .section.--extra-small .part-right-s-8 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 8 + (24px * (8 - 1))); } .section.--extra-small .part-bottom-s-8 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 8 + (24px * (8 - 1))) + 30px); } .section.--extra-small .part-top-s-9 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 9 + (24px * (9 - 1))); } .section.--extra-small .part-left-s-9 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 9 + (24px * (9 - 1))); } .section.--extra-small .part-right-s-9 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 9 + (24px * (9 - 1))); } .section.--extra-small .part-bottom-s-9 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 9 + (24px * (9 - 1))) + 30px); } .section.--extra-small .part-top-s-10 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 10 + (24px * (10 - 1))); } .section.--extra-small .part-left-s-10 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 10 + (24px * (10 - 1))); } .section.--extra-small .part-right-s-10 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 10 + (24px * (10 - 1))); } .section.--extra-small .part-bottom-s-10 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 10 + (24px * (10 - 1))) + 30px); } .section.--extra-small .part-top-s-11 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 11 + (24px * (11 - 1))); } .section.--extra-small .part-left-s-11 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 11 + (24px * (11 - 1))); } .section.--extra-small .part-right-s-11 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 11 + (24px * (11 - 1))); } .section.--extra-small .part-bottom-s-11 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 11 + (24px * (11 - 1))) + 30px); } .section.--extra-small .part-top-s-12 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 12 + (24px * (12 - 1))); } .section.--extra-small .part-left-s-12 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 12 + (24px * (12 - 1))); } .section.--extra-small .part-right-s-12 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 12 + (24px * (12 - 1))); } .section.--extra-small .part-bottom-s-12 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 12 + (24px * (12 - 1))) + 30px); } } @media (max-width: 375px) { .section.--extra-small .part-top-xs-0 { margin-top: 0px; } .section.--extra-small .part-left-xs-0 { margin-left: 0px; } .section.--extra-small .part-right-xs-0 { margin-right: 0px; } .section.--extra-small .part-bottom-xs-0 { margin-bottom: calc(0px + 30px); } .section.--extra-small .part-top-xs-1 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 1 + (24px * (1 - 1))); } .section.--extra-small .part-left-xs-1 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 1 + (24px * (1 - 1))); } .section.--extra-small .part-right-xs-1 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 1 + (24px * (1 - 1))); } .section.--extra-small .part-bottom-xs-1 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 1 + (24px * (1 - 1))) + 30px); } .section.--extra-small .part-top-xs-2 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 2 + (24px * (2 - 1))); } .section.--extra-small .part-left-xs-2 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 2 + (24px * (2 - 1))); } .section.--extra-small .part-right-xs-2 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 2 + (24px * (2 - 1))); } .section.--extra-small .part-bottom-xs-2 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 2 + (24px * (2 - 1))) + 30px); } .section.--extra-small .part-top-xs-3 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 3 + (24px * (3 - 1))); } .section.--extra-small .part-left-xs-3 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 3 + (24px * (3 - 1))); } .section.--extra-small .part-right-xs-3 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 3 + (24px * (3 - 1))); } .section.--extra-small .part-bottom-xs-3 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 3 + (24px * (3 - 1))) + 30px); } .section.--extra-small .part-top-xs-4 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 4 + (24px * (4 - 1))); } .section.--extra-small .part-left-xs-4 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 4 + (24px * (4 - 1))); } .section.--extra-small .part-right-xs-4 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 4 + (24px * (4 - 1))); } .section.--extra-small .part-bottom-xs-4 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 4 + (24px * (4 - 1))) + 30px); } .section.--extra-small .part-top-xs-5 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 5 + (24px * (5 - 1))); } .section.--extra-small .part-left-xs-5 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 5 + (24px * (5 - 1))); } .section.--extra-small .part-right-xs-5 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 5 + (24px * (5 - 1))); } .section.--extra-small .part-bottom-xs-5 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 5 + (24px * (5 - 1))) + 30px); } .section.--extra-small .part-top-xs-6 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 6 + (24px * (6 - 1))); } .section.--extra-small .part-left-xs-6 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 6 + (24px * (6 - 1))); } .section.--extra-small .part-right-xs-6 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 6 + (24px * (6 - 1))); } .section.--extra-small .part-bottom-xs-6 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 6 + (24px * (6 - 1))) + 30px); } .section.--extra-small .part-top-xs-7 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 7 + (24px * (7 - 1))); } .section.--extra-small .part-left-xs-7 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 7 + (24px * (7 - 1))); } .section.--extra-small .part-right-xs-7 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 7 + (24px * (7 - 1))); } .section.--extra-small .part-bottom-xs-7 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 7 + (24px * (7 - 1))) + 30px); } .section.--extra-small .part-top-xs-8 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 8 + (24px * (8 - 1))); } .section.--extra-small .part-left-xs-8 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 8 + (24px * (8 - 1))); } .section.--extra-small .part-right-xs-8 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 8 + (24px * (8 - 1))); } .section.--extra-small .part-bottom-xs-8 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 8 + (24px * (8 - 1))) + 30px); } .section.--extra-small .part-top-xs-9 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 9 + (24px * (9 - 1))); } .section.--extra-small .part-left-xs-9 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 9 + (24px * (9 - 1))); } .section.--extra-small .part-right-xs-9 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 9 + (24px * (9 - 1))); } .section.--extra-small .part-bottom-xs-9 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 9 + (24px * (9 - 1))) + 30px); } .section.--extra-small .part-top-xs-10 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 10 + (24px * (10 - 1))); } .section.--extra-small .part-left-xs-10 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 10 + (24px * (10 - 1))); } .section.--extra-small .part-right-xs-10 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 10 + (24px * (10 - 1))); } .section.--extra-small .part-bottom-xs-10 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 10 + (24px * (10 - 1))) + 30px); } .section.--extra-small .part-top-xs-11 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 11 + (24px * (11 - 1))); } .section.--extra-small .part-left-xs-11 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 11 + (24px * (11 - 1))); } .section.--extra-small .part-right-xs-11 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 11 + (24px * (11 - 1))); } .section.--extra-small .part-bottom-xs-11 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 11 + (24px * (11 - 1))) + 30px); } .section.--extra-small .part-top-xs-12 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 12 + (24px * (12 - 1))); } .section.--extra-small .part-left-xs-12 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 12 + (24px * (12 - 1))); } .section.--extra-small .part-right-xs-12 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 12 + (24px * (12 - 1))); } .section.--extra-small .part-bottom-xs-12 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 12 + (24px * (12 - 1))) + 30px); } } @media (max-width: 375px) { .section.--extra-small .part-xs-0 { display: none; } } @media (max-width: 576px) { .section.--extra-small .part-s-0 { display: none; } } @media (max-width: 768px) { .section.--extra-small .part-m-0 { display: none; } } @media (max-width: 1024px) { .section.--extra-small .part-l-0 { display: none; } } @media (max-width: 1280px) { .section.--extra-small .part-xl-0 { display: none; } } .section.--extra-small [class*=part].-justify-start { display: flex; justify-content: flex-start; } .section.--extra-small [class*=part].-justify-center { display: flex; justify-content: center; } .section.--extra-small [class*=part].-justify-end { display: flex; justify-content: flex-end; } .section.--extra-small [class*=part].-align-start { display: flex; align-items: flex-start; } .section.--extra-small [class*=part].-align-center { display: flex; align-items: center; } .section.--extra-small [class*=part].-align-end { display: flex; align-items: flex-end; } .section.--extra-small [class*=part].-text-left { text-align: left; } .section.--extra-small [class*=part].-text-center { text-align: center; } .section.--extra-small [class*=part].-text-right { text-align: right; } @media (max-width: 768px) { .section.--extra-small { padding-right: 45px; padding-left: 45px; } } .section.--wide { max-width: calc(100% - 90px); margin-left: auto; margin-right: auto; border-radius: 5px; } @media (max-width: 1024px) { .section.--wide { border-radius: 3px; } } @media (max-width: 576px) { .section.--wide { border-radius: 3px; } } @media (max-width: calc(1560px)) { .section.--wide { max-width: calc(100% - 32px); } } @media (max-width: 576px) { .section.--wide { max-width: calc(100% - 30px); } } .section.--wide:not(.--colored) .container { position: relative; display: flex; justify-content: space-between; align-items: stretch; flex-direction: row; flex-wrap: wrap; width: 100%; margin-right: auto; margin-left: auto; padding-right: 90px; padding-left: 90px; max-width: unset; padding-right: 0; padding-left: 0; } .section.--wide:not(.--colored) .container .part-1:not(.no-gutter) { width: calc(((100% - (24px * (12 - 1))) / 12) * 1 + (24px * (1 - 1))); } .section.--wide:not(.--colored) .container .part-1.no-gutter { width: calc(((100% - (0px * (12 - 1))) / 12) * 1 + (0px * (1 - 1))); } .section.--wide:not(.--colored) .container .part-2:not(.no-gutter) { width: calc(((100% - (24px * (12 - 1))) / 12) * 2 + (24px * (2 - 1))); } .section.--wide:not(.--colored) .container .part-2.no-gutter { width: calc(((100% - (0px * (12 - 1))) / 12) * 2 + (0px * (2 - 1))); } .section.--wide:not(.--colored) .container .part-3:not(.no-gutter) { width: calc(((100% - (24px * (12 - 1))) / 12) * 3 + (24px * (3 - 1))); } .section.--wide:not(.--colored) .container .part-3.no-gutter { width: calc(((100% - (0px * (12 - 1))) / 12) * 3 + (0px * (3 - 1))); } .section.--wide:not(.--colored) .container .part-4:not(.no-gutter) { width: calc(((100% - (24px * (12 - 1))) / 12) * 4 + (24px * (4 - 1))); } .section.--wide:not(.--colored) .container .part-4.no-gutter { width: calc(((100% - (0px * (12 - 1))) / 12) * 4 + (0px * (4 - 1))); } .section.--wide:not(.--colored) .container .part-5:not(.no-gutter) { width: calc(((100% - (24px * (12 - 1))) / 12) * 5 + (24px * (5 - 1))); } .section.--wide:not(.--colored) .container .part-5.no-gutter { width: calc(((100% - (0px * (12 - 1))) / 12) * 5 + (0px * (5 - 1))); } .section.--wide:not(.--colored) .container .part-6:not(.no-gutter) { width: calc(((100% - (24px * (12 - 1))) / 12) * 6 + (24px * (6 - 1))); } .section.--wide:not(.--colored) .container .part-6.no-gutter { width: calc(((100% - (0px * (12 - 1))) / 12) * 6 + (0px * (6 - 1))); } .section.--wide:not(.--colored) .container .part-7:not(.no-gutter) { width: calc(((100% - (24px * (12 - 1))) / 12) * 7 + (24px * (7 - 1))); } .section.--wide:not(.--colored) .container .part-7.no-gutter { width: calc(((100% - (0px * (12 - 1))) / 12) * 7 + (0px * (7 - 1))); } .section.--wide:not(.--colored) .container .part-8:not(.no-gutter) { width: calc(((100% - (24px * (12 - 1))) / 12) * 8 + (24px * (8 - 1))); } .section.--wide:not(.--colored) .container .part-8.no-gutter { width: calc(((100% - (0px * (12 - 1))) / 12) * 8 + (0px * (8 - 1))); } .section.--wide:not(.--colored) .container .part-9:not(.no-gutter) { width: calc(((100% - (24px * (12 - 1))) / 12) * 9 + (24px * (9 - 1))); } .section.--wide:not(.--colored) .container .part-9.no-gutter { width: calc(((100% - (0px * (12 - 1))) / 12) * 9 + (0px * (9 - 1))); } .section.--wide:not(.--colored) .container .part-10:not(.no-gutter) { width: calc(((100% - (24px * (12 - 1))) / 12) * 10 + (24px * (10 - 1))); } .section.--wide:not(.--colored) .container .part-10.no-gutter { width: calc(((100% - (0px * (12 - 1))) / 12) * 10 + (0px * (10 - 1))); } .section.--wide:not(.--colored) .container .part-11:not(.no-gutter) { width: calc(((100% - (24px * (12 - 1))) / 12) * 11 + (24px * (11 - 1))); } .section.--wide:not(.--colored) .container .part-11.no-gutter { width: calc(((100% - (0px * (12 - 1))) / 12) * 11 + (0px * (11 - 1))); } .section.--wide:not(.--colored) .container .part-12:not(.no-gutter) { width: calc(((100% - (24px * (12 - 1))) / 12) * 12 + (24px * (12 - 1))); } .section.--wide:not(.--colored) .container .part-12.no-gutter { width: calc(((100% - (0px * (12 - 1))) / 12) * 12 + (0px * (12 - 1))); } @media (max-width: 1280px) { .section.--wide:not(.--colored) .container .part-xl-1:not(.no-gutter) { width: calc(((100% - (24px * (12 - 1))) / 12) * 1 + (24px * (1 - 1))); } .section.--wide:not(.--colored) .container .part-xl-1.no-gutter { width: calc(((100% - (0px * (12 - 1))) / 12) * 1 + (0px * (1 - 1))); } .section.--wide:not(.--colored) .container .part-xl-2:not(.no-gutter) { width: calc(((100% - (24px * (12 - 1))) / 12) * 2 + (24px * (2 - 1))); } .section.--wide:not(.--colored) .container .part-xl-2.no-gutter { width: calc(((100% - (0px * (12 - 1))) / 12) * 2 + (0px * (2 - 1))); } .section.--wide:not(.--colored) .container .part-xl-3:not(.no-gutter) { width: calc(((100% - (24px * (12 - 1))) / 12) * 3 + (24px * (3 - 1))); } .section.--wide:not(.--colored) .container .part-xl-3.no-gutter { width: calc(((100% - (0px * (12 - 1))) / 12) * 3 + (0px * (3 - 1))); } .section.--wide:not(.--colored) .container .part-xl-4:not(.no-gutter) { width: calc(((100% - (24px * (12 - 1))) / 12) * 4 + (24px * (4 - 1))); } .section.--wide:not(.--colored) .container .part-xl-4.no-gutter { width: calc(((100% - (0px * (12 - 1))) / 12) * 4 + (0px * (4 - 1))); } .section.--wide:not(.--colored) .container .part-xl-5:not(.no-gutter) { width: calc(((100% - (24px * (12 - 1))) / 12) * 5 + (24px * (5 - 1))); } .section.--wide:not(.--colored) .container .part-xl-5.no-gutter { width: calc(((100% - (0px * (12 - 1))) / 12) * 5 + (0px * (5 - 1))); } .section.--wide:not(.--colored) .container .part-xl-6:not(.no-gutter) { width: calc(((100% - (24px * (12 - 1))) / 12) * 6 + (24px * (6 - 1))); } .section.--wide:not(.--colored) .container .part-xl-6.no-gutter { width: calc(((100% - (0px * (12 - 1))) / 12) * 6 + (0px * (6 - 1))); } .section.--wide:not(.--colored) .container .part-xl-7:not(.no-gutter) { width: calc(((100% - (24px * (12 - 1))) / 12) * 7 + (24px * (7 - 1))); } .section.--wide:not(.--colored) .container .part-xl-7.no-gutter { width: calc(((100% - (0px * (12 - 1))) / 12) * 7 + (0px * (7 - 1))); } .section.--wide:not(.--colored) .container .part-xl-8:not(.no-gutter) { width: calc(((100% - (24px * (12 - 1))) / 12) * 8 + (24px * (8 - 1))); } .section.--wide:not(.--colored) .container .part-xl-8.no-gutter { width: calc(((100% - (0px * (12 - 1))) / 12) * 8 + (0px * (8 - 1))); } .section.--wide:not(.--colored) .container .part-xl-9:not(.no-gutter) { width: calc(((100% - (24px * (12 - 1))) / 12) * 9 + (24px * (9 - 1))); } .section.--wide:not(.--colored) .container .part-xl-9.no-gutter { width: calc(((100% - (0px * (12 - 1))) / 12) * 9 + (0px * (9 - 1))); } .section.--wide:not(.--colored) .container .part-xl-10:not(.no-gutter) { width: calc(((100% - (24px * (12 - 1))) / 12) * 10 + (24px * (10 - 1))); } .section.--wide:not(.--colored) .container .part-xl-10.no-gutter { width: calc(((100% - (0px * (12 - 1))) / 12) * 10 + (0px * (10 - 1))); } .section.--wide:not(.--colored) .container .part-xl-11:not(.no-gutter) { width: calc(((100% - (24px * (12 - 1))) / 12) * 11 + (24px * (11 - 1))); } .section.--wide:not(.--colored) .container .part-xl-11.no-gutter { width: calc(((100% - (0px * (12 - 1))) / 12) * 11 + (0px * (11 - 1))); } .section.--wide:not(.--colored) .container .part-xl-12:not(.no-gutter) { width: calc(((100% - (24px * (12 - 1))) / 12) * 12 + (24px * (12 - 1))); } .section.--wide:not(.--colored) .container .part-xl-12.no-gutter { width: calc(((100% - (0px * (12 - 1))) / 12) * 12 + (0px * (12 - 1))); } } @media (max-width: 1024px) { .section.--wide:not(.--colored) .container .part-l-1:not(.no-gutter) { width: calc(((100% - (16px * (8 - 1))) / 8) * 1 + (16px * (1 - 1))); } .section.--wide:not(.--colored) .container .part-l-1.no-gutter { width: calc(((100% - (0px * (8 - 1))) / 8) * 1 + (0px * (1 - 1))); } .section.--wide:not(.--colored) .container .part-l-2:not(.no-gutter) { width: calc(((100% - (16px * (8 - 1))) / 8) * 2 + (16px * (2 - 1))); } .section.--wide:not(.--colored) .container .part-l-2.no-gutter { width: calc(((100% - (0px * (8 - 1))) / 8) * 2 + (0px * (2 - 1))); } .section.--wide:not(.--colored) .container .part-l-3:not(.no-gutter) { width: calc(((100% - (16px * (8 - 1))) / 8) * 3 + (16px * (3 - 1))); } .section.--wide:not(.--colored) .container .part-l-3.no-gutter { width: calc(((100% - (0px * (8 - 1))) / 8) * 3 + (0px * (3 - 1))); } .section.--wide:not(.--colored) .container .part-l-4:not(.no-gutter) { width: calc(((100% - (16px * (8 - 1))) / 8) * 4 + (16px * (4 - 1))); } .section.--wide:not(.--colored) .container .part-l-4.no-gutter { width: calc(((100% - (0px * (8 - 1))) / 8) * 4 + (0px * (4 - 1))); } .section.--wide:not(.--colored) .container .part-l-5:not(.no-gutter) { width: calc(((100% - (16px * (8 - 1))) / 8) * 5 + (16px * (5 - 1))); } .section.--wide:not(.--colored) .container .part-l-5.no-gutter { width: calc(((100% - (0px * (8 - 1))) / 8) * 5 + (0px * (5 - 1))); } .section.--wide:not(.--colored) .container .part-l-6:not(.no-gutter) { width: calc(((100% - (16px * (8 - 1))) / 8) * 6 + (16px * (6 - 1))); } .section.--wide:not(.--colored) .container .part-l-6.no-gutter { width: calc(((100% - (0px * (8 - 1))) / 8) * 6 + (0px * (6 - 1))); } .section.--wide:not(.--colored) .container .part-l-7:not(.no-gutter) { width: calc(((100% - (16px * (8 - 1))) / 8) * 7 + (16px * (7 - 1))); } .section.--wide:not(.--colored) .container .part-l-7.no-gutter { width: calc(((100% - (0px * (8 - 1))) / 8) * 7 + (0px * (7 - 1))); } .section.--wide:not(.--colored) .container .part-l-8:not(.no-gutter) { width: calc(((100% - (16px * (8 - 1))) / 8) * 8 + (16px * (8 - 1))); } .section.--wide:not(.--colored) .container .part-l-8.no-gutter { width: calc(((100% - (0px * (8 - 1))) / 8) * 8 + (0px * (8 - 1))); } } @media (max-width: 768px) { .section.--wide:not(.--colored) .container .part-m-1:not(.no-gutter) { width: calc(((100% - (14px * (8 - 1))) / 8) * 1 + (14px * (1 - 1))); } .section.--wide:not(.--colored) .container .part-m-1.no-gutter { width: calc(((100% - (0px * (8 - 1))) / 8) * 1 + (0px * (1 - 1))); } .section.--wide:not(.--colored) .container .part-m-2:not(.no-gutter) { width: calc(((100% - (14px * (8 - 1))) / 8) * 2 + (14px * (2 - 1))); } .section.--wide:not(.--colored) .container .part-m-2.no-gutter { width: calc(((100% - (0px * (8 - 1))) / 8) * 2 + (0px * (2 - 1))); } .section.--wide:not(.--colored) .container .part-m-3:not(.no-gutter) { width: calc(((100% - (14px * (8 - 1))) / 8) * 3 + (14px * (3 - 1))); } .section.--wide:not(.--colored) .container .part-m-3.no-gutter { width: calc(((100% - (0px * (8 - 1))) / 8) * 3 + (0px * (3 - 1))); } .section.--wide:not(.--colored) .container .part-m-4:not(.no-gutter) { width: calc(((100% - (14px * (8 - 1))) / 8) * 4 + (14px * (4 - 1))); } .section.--wide:not(.--colored) .container .part-m-4.no-gutter { width: calc(((100% - (0px * (8 - 1))) / 8) * 4 + (0px * (4 - 1))); } .section.--wide:not(.--colored) .container .part-m-5:not(.no-gutter) { width: calc(((100% - (14px * (8 - 1))) / 8) * 5 + (14px * (5 - 1))); } .section.--wide:not(.--colored) .container .part-m-5.no-gutter { width: calc(((100% - (0px * (8 - 1))) / 8) * 5 + (0px * (5 - 1))); } .section.--wide:not(.--colored) .container .part-m-6:not(.no-gutter) { width: calc(((100% - (14px * (8 - 1))) / 8) * 6 + (14px * (6 - 1))); } .section.--wide:not(.--colored) .container .part-m-6.no-gutter { width: calc(((100% - (0px * (8 - 1))) / 8) * 6 + (0px * (6 - 1))); } .section.--wide:not(.--colored) .container .part-m-7:not(.no-gutter) { width: calc(((100% - (14px * (8 - 1))) / 8) * 7 + (14px * (7 - 1))); } .section.--wide:not(.--colored) .container .part-m-7.no-gutter { width: calc(((100% - (0px * (8 - 1))) / 8) * 7 + (0px * (7 - 1))); } .section.--wide:not(.--colored) .container .part-m-8:not(.no-gutter) { width: calc(((100% - (14px * (8 - 1))) / 8) * 8 + (14px * (8 - 1))); } .section.--wide:not(.--colored) .container .part-m-8.no-gutter { width: calc(((100% - (0px * (8 - 1))) / 8) * 8 + (0px * (8 - 1))); } } @media (max-width: 576px) { .section.--wide:not(.--colored) .container .part-s-1:not(.no-gutter) { width: calc(((100% - (10px * (4 - 1))) / 4) * 1 + (10px * (1 - 1))); } .section.--wide:not(.--colored) .container .part-s-1.no-gutter { width: calc(((100% - (0px * (4 - 1))) / 4) * 1 + (0px * (1 - 1))); } .section.--wide:not(.--colored) .container .part-s-2:not(.no-gutter) { width: calc(((100% - (10px * (4 - 1))) / 4) * 2 + (10px * (2 - 1))); } .section.--wide:not(.--colored) .container .part-s-2.no-gutter { width: calc(((100% - (0px * (4 - 1))) / 4) * 2 + (0px * (2 - 1))); } .section.--wide:not(.--colored) .container .part-s-3:not(.no-gutter) { width: calc(((100% - (10px * (4 - 1))) / 4) * 3 + (10px * (3 - 1))); } .section.--wide:not(.--colored) .container .part-s-3.no-gutter { width: calc(((100% - (0px * (4 - 1))) / 4) * 3 + (0px * (3 - 1))); } .section.--wide:not(.--colored) .container .part-s-4:not(.no-gutter) { width: calc(((100% - (10px * (4 - 1))) / 4) * 4 + (10px * (4 - 1))); } .section.--wide:not(.--colored) .container .part-s-4.no-gutter { width: calc(((100% - (0px * (4 - 1))) / 4) * 4 + (0px * (4 - 1))); } } @media (max-width: 375px) { .section.--wide:not(.--colored) .container .part-xs-1:not(.no-gutter) { width: calc(((100% - (10px * (4 - 1))) / 4) * 1 + (10px * (1 - 1))); } .section.--wide:not(.--colored) .container .part-xs-1.no-gutter { width: calc(((100% - (0px * (4 - 1))) / 4) * 1 + (0px * (1 - 1))); } .section.--wide:not(.--colored) .container .part-xs-2:not(.no-gutter) { width: calc(((100% - (10px * (4 - 1))) / 4) * 2 + (10px * (2 - 1))); } .section.--wide:not(.--colored) .container .part-xs-2.no-gutter { width: calc(((100% - (0px * (4 - 1))) / 4) * 2 + (0px * (2 - 1))); } .section.--wide:not(.--colored) .container .part-xs-3:not(.no-gutter) { width: calc(((100% - (10px * (4 - 1))) / 4) * 3 + (10px * (3 - 1))); } .section.--wide:not(.--colored) .container .part-xs-3.no-gutter { width: calc(((100% - (0px * (4 - 1))) / 4) * 3 + (0px * (3 - 1))); } .section.--wide:not(.--colored) .container .part-xs-4:not(.no-gutter) { width: calc(((100% - (10px * (4 - 1))) / 4) * 4 + (10px * (4 - 1))); } .section.--wide:not(.--colored) .container .part-xs-4.no-gutter { width: calc(((100% - (0px * (4 - 1))) / 4) * 4 + (0px * (4 - 1))); } } .section.--wide:not(.--colored) .container .part-top-0 { margin-top: 0px; } .section.--wide:not(.--colored) .container .part-left-0 { margin-left: 0px; } .section.--wide:not(.--colored) .container .part-right-0 { margin-right: 0px; } .section.--wide:not(.--colored) .container .part-bottom-0 { margin-bottom: calc(0px + 50px); } .section.--wide:not(.--colored) .container .part-top-1 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 1 + (24px * (1 - 1))); } .section.--wide:not(.--colored) .container .part-left-1 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 1 + (24px * (1 - 1))); } .section.--wide:not(.--colored) .container .part-right-1 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 1 + (24px * (1 - 1))); } .section.--wide:not(.--colored) .container .part-bottom-1 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 1 + (24px * (1 - 1))) + 50px); } .section.--wide:not(.--colored) .container .part-top-2 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 2 + (24px * (2 - 1))); } .section.--wide:not(.--colored) .container .part-left-2 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 2 + (24px * (2 - 1))); } .section.--wide:not(.--colored) .container .part-right-2 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 2 + (24px * (2 - 1))); } .section.--wide:not(.--colored) .container .part-bottom-2 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 2 + (24px * (2 - 1))) + 50px); } .section.--wide:not(.--colored) .container .part-top-3 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 3 + (24px * (3 - 1))); } .section.--wide:not(.--colored) .container .part-left-3 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 3 + (24px * (3 - 1))); } .section.--wide:not(.--colored) .container .part-right-3 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 3 + (24px * (3 - 1))); } .section.--wide:not(.--colored) .container .part-bottom-3 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 3 + (24px * (3 - 1))) + 50px); } .section.--wide:not(.--colored) .container .part-top-4 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 4 + (24px * (4 - 1))); } .section.--wide:not(.--colored) .container .part-left-4 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 4 + (24px * (4 - 1))); } .section.--wide:not(.--colored) .container .part-right-4 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 4 + (24px * (4 - 1))); } .section.--wide:not(.--colored) .container .part-bottom-4 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 4 + (24px * (4 - 1))) + 50px); } .section.--wide:not(.--colored) .container .part-top-5 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 5 + (24px * (5 - 1))); } .section.--wide:not(.--colored) .container .part-left-5 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 5 + (24px * (5 - 1))); } .section.--wide:not(.--colored) .container .part-right-5 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 5 + (24px * (5 - 1))); } .section.--wide:not(.--colored) .container .part-bottom-5 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 5 + (24px * (5 - 1))) + 50px); } .section.--wide:not(.--colored) .container .part-top-6 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 6 + (24px * (6 - 1))); } .section.--wide:not(.--colored) .container .part-left-6 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 6 + (24px * (6 - 1))); } .section.--wide:not(.--colored) .container .part-right-6 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 6 + (24px * (6 - 1))); } .section.--wide:not(.--colored) .container .part-bottom-6 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 6 + (24px * (6 - 1))) + 50px); } .section.--wide:not(.--colored) .container .part-top-7 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 7 + (24px * (7 - 1))); } .section.--wide:not(.--colored) .container .part-left-7 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 7 + (24px * (7 - 1))); } .section.--wide:not(.--colored) .container .part-right-7 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 7 + (24px * (7 - 1))); } .section.--wide:not(.--colored) .container .part-bottom-7 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 7 + (24px * (7 - 1))) + 50px); } .section.--wide:not(.--colored) .container .part-top-8 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 8 + (24px * (8 - 1))); } .section.--wide:not(.--colored) .container .part-left-8 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 8 + (24px * (8 - 1))); } .section.--wide:not(.--colored) .container .part-right-8 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 8 + (24px * (8 - 1))); } .section.--wide:not(.--colored) .container .part-bottom-8 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 8 + (24px * (8 - 1))) + 50px); } .section.--wide:not(.--colored) .container .part-top-9 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 9 + (24px * (9 - 1))); } .section.--wide:not(.--colored) .container .part-left-9 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 9 + (24px * (9 - 1))); } .section.--wide:not(.--colored) .container .part-right-9 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 9 + (24px * (9 - 1))); } .section.--wide:not(.--colored) .container .part-bottom-9 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 9 + (24px * (9 - 1))) + 50px); } .section.--wide:not(.--colored) .container .part-top-10 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 10 + (24px * (10 - 1))); } .section.--wide:not(.--colored) .container .part-left-10 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 10 + (24px * (10 - 1))); } .section.--wide:not(.--colored) .container .part-right-10 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 10 + (24px * (10 - 1))); } .section.--wide:not(.--colored) .container .part-bottom-10 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 10 + (24px * (10 - 1))) + 50px); } .section.--wide:not(.--colored) .container .part-top-11 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 11 + (24px * (11 - 1))); } .section.--wide:not(.--colored) .container .part-left-11 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 11 + (24px * (11 - 1))); } .section.--wide:not(.--colored) .container .part-right-11 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 11 + (24px * (11 - 1))); } .section.--wide:not(.--colored) .container .part-bottom-11 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 11 + (24px * (11 - 1))) + 50px); } .section.--wide:not(.--colored) .container .part-top-12 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 12 + (24px * (12 - 1))); } .section.--wide:not(.--colored) .container .part-left-12 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 12 + (24px * (12 - 1))); } .section.--wide:not(.--colored) .container .part-right-12 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 12 + (24px * (12 - 1))); } .section.--wide:not(.--colored) .container .part-bottom-12 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 12 + (24px * (12 - 1))) + 50px); } @media (max-width: 1024px) { .section.--wide:not(.--colored) .container .part-top-l-0 { margin-top: 0px; } .section.--wide:not(.--colored) .container .part-left-l-0 { margin-left: 0px; } .section.--wide:not(.--colored) .container .part-right-l-0 { margin-right: 0px; } .section.--wide:not(.--colored) .container .part-bottom-l-0 { margin-bottom: calc(0px + 50px); } .section.--wide:not(.--colored) .container .part-top-l-1 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 1 + (24px * (1 - 1))); } .section.--wide:not(.--colored) .container .part-left-l-1 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 1 + (24px * (1 - 1))); } .section.--wide:not(.--colored) .container .part-right-l-1 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 1 + (24px * (1 - 1))); } .section.--wide:not(.--colored) .container .part-bottom-l-1 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 1 + (24px * (1 - 1))) + 50px); } .section.--wide:not(.--colored) .container .part-top-l-2 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 2 + (24px * (2 - 1))); } .section.--wide:not(.--colored) .container .part-left-l-2 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 2 + (24px * (2 - 1))); } .section.--wide:not(.--colored) .container .part-right-l-2 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 2 + (24px * (2 - 1))); } .section.--wide:not(.--colored) .container .part-bottom-l-2 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 2 + (24px * (2 - 1))) + 50px); } .section.--wide:not(.--colored) .container .part-top-l-3 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 3 + (24px * (3 - 1))); } .section.--wide:not(.--colored) .container .part-left-l-3 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 3 + (24px * (3 - 1))); } .section.--wide:not(.--colored) .container .part-right-l-3 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 3 + (24px * (3 - 1))); } .section.--wide:not(.--colored) .container .part-bottom-l-3 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 3 + (24px * (3 - 1))) + 50px); } .section.--wide:not(.--colored) .container .part-top-l-4 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 4 + (24px * (4 - 1))); } .section.--wide:not(.--colored) .container .part-left-l-4 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 4 + (24px * (4 - 1))); } .section.--wide:not(.--colored) .container .part-right-l-4 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 4 + (24px * (4 - 1))); } .section.--wide:not(.--colored) .container .part-bottom-l-4 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 4 + (24px * (4 - 1))) + 50px); } .section.--wide:not(.--colored) .container .part-top-l-5 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 5 + (24px * (5 - 1))); } .section.--wide:not(.--colored) .container .part-left-l-5 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 5 + (24px * (5 - 1))); } .section.--wide:not(.--colored) .container .part-right-l-5 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 5 + (24px * (5 - 1))); } .section.--wide:not(.--colored) .container .part-bottom-l-5 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 5 + (24px * (5 - 1))) + 50px); } .section.--wide:not(.--colored) .container .part-top-l-6 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 6 + (24px * (6 - 1))); } .section.--wide:not(.--colored) .container .part-left-l-6 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 6 + (24px * (6 - 1))); } .section.--wide:not(.--colored) .container .part-right-l-6 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 6 + (24px * (6 - 1))); } .section.--wide:not(.--colored) .container .part-bottom-l-6 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 6 + (24px * (6 - 1))) + 50px); } .section.--wide:not(.--colored) .container .part-top-l-7 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 7 + (24px * (7 - 1))); } .section.--wide:not(.--colored) .container .part-left-l-7 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 7 + (24px * (7 - 1))); } .section.--wide:not(.--colored) .container .part-right-l-7 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 7 + (24px * (7 - 1))); } .section.--wide:not(.--colored) .container .part-bottom-l-7 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 7 + (24px * (7 - 1))) + 50px); } .section.--wide:not(.--colored) .container .part-top-l-8 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 8 + (24px * (8 - 1))); } .section.--wide:not(.--colored) .container .part-left-l-8 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 8 + (24px * (8 - 1))); } .section.--wide:not(.--colored) .container .part-right-l-8 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 8 + (24px * (8 - 1))); } .section.--wide:not(.--colored) .container .part-bottom-l-8 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 8 + (24px * (8 - 1))) + 50px); } .section.--wide:not(.--colored) .container .part-top-l-9 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 9 + (24px * (9 - 1))); } .section.--wide:not(.--colored) .container .part-left-l-9 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 9 + (24px * (9 - 1))); } .section.--wide:not(.--colored) .container .part-right-l-9 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 9 + (24px * (9 - 1))); } .section.--wide:not(.--colored) .container .part-bottom-l-9 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 9 + (24px * (9 - 1))) + 50px); } .section.--wide:not(.--colored) .container .part-top-l-10 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 10 + (24px * (10 - 1))); } .section.--wide:not(.--colored) .container .part-left-l-10 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 10 + (24px * (10 - 1))); } .section.--wide:not(.--colored) .container .part-right-l-10 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 10 + (24px * (10 - 1))); } .section.--wide:not(.--colored) .container .part-bottom-l-10 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 10 + (24px * (10 - 1))) + 50px); } .section.--wide:not(.--colored) .container .part-top-l-11 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 11 + (24px * (11 - 1))); } .section.--wide:not(.--colored) .container .part-left-l-11 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 11 + (24px * (11 - 1))); } .section.--wide:not(.--colored) .container .part-right-l-11 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 11 + (24px * (11 - 1))); } .section.--wide:not(.--colored) .container .part-bottom-l-11 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 11 + (24px * (11 - 1))) + 50px); } .section.--wide:not(.--colored) .container .part-top-l-12 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 12 + (24px * (12 - 1))); } .section.--wide:not(.--colored) .container .part-left-l-12 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 12 + (24px * (12 - 1))); } .section.--wide:not(.--colored) .container .part-right-l-12 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 12 + (24px * (12 - 1))); } .section.--wide:not(.--colored) .container .part-bottom-l-12 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 12 + (24px * (12 - 1))) + 50px); } } @media (max-width: 768px) { .section.--wide:not(.--colored) .container .part-top-m-0 { margin-top: 0px; } .section.--wide:not(.--colored) .container .part-left-m-0 { margin-left: 0px; } .section.--wide:not(.--colored) .container .part-right-m-0 { margin-right: 0px; } .section.--wide:not(.--colored) .container .part-bottom-m-0 { margin-bottom: calc(0px + 50px); } .section.--wide:not(.--colored) .container .part-top-m-1 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 1 + (24px * (1 - 1))); } .section.--wide:not(.--colored) .container .part-left-m-1 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 1 + (24px * (1 - 1))); } .section.--wide:not(.--colored) .container .part-right-m-1 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 1 + (24px * (1 - 1))); } .section.--wide:not(.--colored) .container .part-bottom-m-1 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 1 + (24px * (1 - 1))) + 50px); } .section.--wide:not(.--colored) .container .part-top-m-2 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 2 + (24px * (2 - 1))); } .section.--wide:not(.--colored) .container .part-left-m-2 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 2 + (24px * (2 - 1))); } .section.--wide:not(.--colored) .container .part-right-m-2 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 2 + (24px * (2 - 1))); } .section.--wide:not(.--colored) .container .part-bottom-m-2 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 2 + (24px * (2 - 1))) + 50px); } .section.--wide:not(.--colored) .container .part-top-m-3 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 3 + (24px * (3 - 1))); } .section.--wide:not(.--colored) .container .part-left-m-3 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 3 + (24px * (3 - 1))); } .section.--wide:not(.--colored) .container .part-right-m-3 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 3 + (24px * (3 - 1))); } .section.--wide:not(.--colored) .container .part-bottom-m-3 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 3 + (24px * (3 - 1))) + 50px); } .section.--wide:not(.--colored) .container .part-top-m-4 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 4 + (24px * (4 - 1))); } .section.--wide:not(.--colored) .container .part-left-m-4 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 4 + (24px * (4 - 1))); } .section.--wide:not(.--colored) .container .part-right-m-4 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 4 + (24px * (4 - 1))); } .section.--wide:not(.--colored) .container .part-bottom-m-4 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 4 + (24px * (4 - 1))) + 50px); } .section.--wide:not(.--colored) .container .part-top-m-5 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 5 + (24px * (5 - 1))); } .section.--wide:not(.--colored) .container .part-left-m-5 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 5 + (24px * (5 - 1))); } .section.--wide:not(.--colored) .container .part-right-m-5 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 5 + (24px * (5 - 1))); } .section.--wide:not(.--colored) .container .part-bottom-m-5 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 5 + (24px * (5 - 1))) + 50px); } .section.--wide:not(.--colored) .container .part-top-m-6 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 6 + (24px * (6 - 1))); } .section.--wide:not(.--colored) .container .part-left-m-6 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 6 + (24px * (6 - 1))); } .section.--wide:not(.--colored) .container .part-right-m-6 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 6 + (24px * (6 - 1))); } .section.--wide:not(.--colored) .container .part-bottom-m-6 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 6 + (24px * (6 - 1))) + 50px); } .section.--wide:not(.--colored) .container .part-top-m-7 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 7 + (24px * (7 - 1))); } .section.--wide:not(.--colored) .container .part-left-m-7 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 7 + (24px * (7 - 1))); } .section.--wide:not(.--colored) .container .part-right-m-7 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 7 + (24px * (7 - 1))); } .section.--wide:not(.--colored) .container .part-bottom-m-7 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 7 + (24px * (7 - 1))) + 50px); } .section.--wide:not(.--colored) .container .part-top-m-8 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 8 + (24px * (8 - 1))); } .section.--wide:not(.--colored) .container .part-left-m-8 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 8 + (24px * (8 - 1))); } .section.--wide:not(.--colored) .container .part-right-m-8 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 8 + (24px * (8 - 1))); } .section.--wide:not(.--colored) .container .part-bottom-m-8 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 8 + (24px * (8 - 1))) + 50px); } .section.--wide:not(.--colored) .container .part-top-m-9 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 9 + (24px * (9 - 1))); } .section.--wide:not(.--colored) .container .part-left-m-9 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 9 + (24px * (9 - 1))); } .section.--wide:not(.--colored) .container .part-right-m-9 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 9 + (24px * (9 - 1))); } .section.--wide:not(.--colored) .container .part-bottom-m-9 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 9 + (24px * (9 - 1))) + 50px); } .section.--wide:not(.--colored) .container .part-top-m-10 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 10 + (24px * (10 - 1))); } .section.--wide:not(.--colored) .container .part-left-m-10 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 10 + (24px * (10 - 1))); } .section.--wide:not(.--colored) .container .part-right-m-10 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 10 + (24px * (10 - 1))); } .section.--wide:not(.--colored) .container .part-bottom-m-10 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 10 + (24px * (10 - 1))) + 50px); } .section.--wide:not(.--colored) .container .part-top-m-11 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 11 + (24px * (11 - 1))); } .section.--wide:not(.--colored) .container .part-left-m-11 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 11 + (24px * (11 - 1))); } .section.--wide:not(.--colored) .container .part-right-m-11 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 11 + (24px * (11 - 1))); } .section.--wide:not(.--colored) .container .part-bottom-m-11 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 11 + (24px * (11 - 1))) + 50px); } .section.--wide:not(.--colored) .container .part-top-m-12 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 12 + (24px * (12 - 1))); } .section.--wide:not(.--colored) .container .part-left-m-12 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 12 + (24px * (12 - 1))); } .section.--wide:not(.--colored) .container .part-right-m-12 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 12 + (24px * (12 - 1))); } .section.--wide:not(.--colored) .container .part-bottom-m-12 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 12 + (24px * (12 - 1))) + 50px); } } @media (max-width: 576px) { .section.--wide:not(.--colored) .container .part-top-s-0 { margin-top: 0px; } .section.--wide:not(.--colored) .container .part-left-s-0 { margin-left: 0px; } .section.--wide:not(.--colored) .container .part-right-s-0 { margin-right: 0px; } .section.--wide:not(.--colored) .container .part-bottom-s-0 { margin-bottom: calc(0px + 30px); } .section.--wide:not(.--colored) .container .part-top-s-1 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 1 + (24px * (1 - 1))); } .section.--wide:not(.--colored) .container .part-left-s-1 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 1 + (24px * (1 - 1))); } .section.--wide:not(.--colored) .container .part-right-s-1 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 1 + (24px * (1 - 1))); } .section.--wide:not(.--colored) .container .part-bottom-s-1 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 1 + (24px * (1 - 1))) + 30px); } .section.--wide:not(.--colored) .container .part-top-s-2 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 2 + (24px * (2 - 1))); } .section.--wide:not(.--colored) .container .part-left-s-2 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 2 + (24px * (2 - 1))); } .section.--wide:not(.--colored) .container .part-right-s-2 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 2 + (24px * (2 - 1))); } .section.--wide:not(.--colored) .container .part-bottom-s-2 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 2 + (24px * (2 - 1))) + 30px); } .section.--wide:not(.--colored) .container .part-top-s-3 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 3 + (24px * (3 - 1))); } .section.--wide:not(.--colored) .container .part-left-s-3 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 3 + (24px * (3 - 1))); } .section.--wide:not(.--colored) .container .part-right-s-3 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 3 + (24px * (3 - 1))); } .section.--wide:not(.--colored) .container .part-bottom-s-3 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 3 + (24px * (3 - 1))) + 30px); } .section.--wide:not(.--colored) .container .part-top-s-4 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 4 + (24px * (4 - 1))); } .section.--wide:not(.--colored) .container .part-left-s-4 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 4 + (24px * (4 - 1))); } .section.--wide:not(.--colored) .container .part-right-s-4 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 4 + (24px * (4 - 1))); } .section.--wide:not(.--colored) .container .part-bottom-s-4 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 4 + (24px * (4 - 1))) + 30px); } .section.--wide:not(.--colored) .container .part-top-s-5 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 5 + (24px * (5 - 1))); } .section.--wide:not(.--colored) .container .part-left-s-5 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 5 + (24px * (5 - 1))); } .section.--wide:not(.--colored) .container .part-right-s-5 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 5 + (24px * (5 - 1))); } .section.--wide:not(.--colored) .container .part-bottom-s-5 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 5 + (24px * (5 - 1))) + 30px); } .section.--wide:not(.--colored) .container .part-top-s-6 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 6 + (24px * (6 - 1))); } .section.--wide:not(.--colored) .container .part-left-s-6 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 6 + (24px * (6 - 1))); } .section.--wide:not(.--colored) .container .part-right-s-6 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 6 + (24px * (6 - 1))); } .section.--wide:not(.--colored) .container .part-bottom-s-6 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 6 + (24px * (6 - 1))) + 30px); } .section.--wide:not(.--colored) .container .part-top-s-7 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 7 + (24px * (7 - 1))); } .section.--wide:not(.--colored) .container .part-left-s-7 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 7 + (24px * (7 - 1))); } .section.--wide:not(.--colored) .container .part-right-s-7 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 7 + (24px * (7 - 1))); } .section.--wide:not(.--colored) .container .part-bottom-s-7 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 7 + (24px * (7 - 1))) + 30px); } .section.--wide:not(.--colored) .container .part-top-s-8 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 8 + (24px * (8 - 1))); } .section.--wide:not(.--colored) .container .part-left-s-8 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 8 + (24px * (8 - 1))); } .section.--wide:not(.--colored) .container .part-right-s-8 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 8 + (24px * (8 - 1))); } .section.--wide:not(.--colored) .container .part-bottom-s-8 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 8 + (24px * (8 - 1))) + 30px); } .section.--wide:not(.--colored) .container .part-top-s-9 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 9 + (24px * (9 - 1))); } .section.--wide:not(.--colored) .container .part-left-s-9 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 9 + (24px * (9 - 1))); } .section.--wide:not(.--colored) .container .part-right-s-9 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 9 + (24px * (9 - 1))); } .section.--wide:not(.--colored) .container .part-bottom-s-9 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 9 + (24px * (9 - 1))) + 30px); } .section.--wide:not(.--colored) .container .part-top-s-10 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 10 + (24px * (10 - 1))); } .section.--wide:not(.--colored) .container .part-left-s-10 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 10 + (24px * (10 - 1))); } .section.--wide:not(.--colored) .container .part-right-s-10 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 10 + (24px * (10 - 1))); } .section.--wide:not(.--colored) .container .part-bottom-s-10 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 10 + (24px * (10 - 1))) + 30px); } .section.--wide:not(.--colored) .container .part-top-s-11 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 11 + (24px * (11 - 1))); } .section.--wide:not(.--colored) .container .part-left-s-11 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 11 + (24px * (11 - 1))); } .section.--wide:not(.--colored) .container .part-right-s-11 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 11 + (24px * (11 - 1))); } .section.--wide:not(.--colored) .container .part-bottom-s-11 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 11 + (24px * (11 - 1))) + 30px); } .section.--wide:not(.--colored) .container .part-top-s-12 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 12 + (24px * (12 - 1))); } .section.--wide:not(.--colored) .container .part-left-s-12 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 12 + (24px * (12 - 1))); } .section.--wide:not(.--colored) .container .part-right-s-12 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 12 + (24px * (12 - 1))); } .section.--wide:not(.--colored) .container .part-bottom-s-12 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 12 + (24px * (12 - 1))) + 30px); } } @media (max-width: 375px) { .section.--wide:not(.--colored) .container .part-top-xs-0 { margin-top: 0px; } .section.--wide:not(.--colored) .container .part-left-xs-0 { margin-left: 0px; } .section.--wide:not(.--colored) .container .part-right-xs-0 { margin-right: 0px; } .section.--wide:not(.--colored) .container .part-bottom-xs-0 { margin-bottom: calc(0px + 30px); } .section.--wide:not(.--colored) .container .part-top-xs-1 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 1 + (24px * (1 - 1))); } .section.--wide:not(.--colored) .container .part-left-xs-1 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 1 + (24px * (1 - 1))); } .section.--wide:not(.--colored) .container .part-right-xs-1 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 1 + (24px * (1 - 1))); } .section.--wide:not(.--colored) .container .part-bottom-xs-1 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 1 + (24px * (1 - 1))) + 30px); } .section.--wide:not(.--colored) .container .part-top-xs-2 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 2 + (24px * (2 - 1))); } .section.--wide:not(.--colored) .container .part-left-xs-2 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 2 + (24px * (2 - 1))); } .section.--wide:not(.--colored) .container .part-right-xs-2 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 2 + (24px * (2 - 1))); } .section.--wide:not(.--colored) .container .part-bottom-xs-2 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 2 + (24px * (2 - 1))) + 30px); } .section.--wide:not(.--colored) .container .part-top-xs-3 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 3 + (24px * (3 - 1))); } .section.--wide:not(.--colored) .container .part-left-xs-3 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 3 + (24px * (3 - 1))); } .section.--wide:not(.--colored) .container .part-right-xs-3 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 3 + (24px * (3 - 1))); } .section.--wide:not(.--colored) .container .part-bottom-xs-3 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 3 + (24px * (3 - 1))) + 30px); } .section.--wide:not(.--colored) .container .part-top-xs-4 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 4 + (24px * (4 - 1))); } .section.--wide:not(.--colored) .container .part-left-xs-4 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 4 + (24px * (4 - 1))); } .section.--wide:not(.--colored) .container .part-right-xs-4 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 4 + (24px * (4 - 1))); } .section.--wide:not(.--colored) .container .part-bottom-xs-4 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 4 + (24px * (4 - 1))) + 30px); } .section.--wide:not(.--colored) .container .part-top-xs-5 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 5 + (24px * (5 - 1))); } .section.--wide:not(.--colored) .container .part-left-xs-5 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 5 + (24px * (5 - 1))); } .section.--wide:not(.--colored) .container .part-right-xs-5 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 5 + (24px * (5 - 1))); } .section.--wide:not(.--colored) .container .part-bottom-xs-5 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 5 + (24px * (5 - 1))) + 30px); } .section.--wide:not(.--colored) .container .part-top-xs-6 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 6 + (24px * (6 - 1))); } .section.--wide:not(.--colored) .container .part-left-xs-6 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 6 + (24px * (6 - 1))); } .section.--wide:not(.--colored) .container .part-right-xs-6 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 6 + (24px * (6 - 1))); } .section.--wide:not(.--colored) .container .part-bottom-xs-6 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 6 + (24px * (6 - 1))) + 30px); } .section.--wide:not(.--colored) .container .part-top-xs-7 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 7 + (24px * (7 - 1))); } .section.--wide:not(.--colored) .container .part-left-xs-7 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 7 + (24px * (7 - 1))); } .section.--wide:not(.--colored) .container .part-right-xs-7 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 7 + (24px * (7 - 1))); } .section.--wide:not(.--colored) .container .part-bottom-xs-7 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 7 + (24px * (7 - 1))) + 30px); } .section.--wide:not(.--colored) .container .part-top-xs-8 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 8 + (24px * (8 - 1))); } .section.--wide:not(.--colored) .container .part-left-xs-8 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 8 + (24px * (8 - 1))); } .section.--wide:not(.--colored) .container .part-right-xs-8 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 8 + (24px * (8 - 1))); } .section.--wide:not(.--colored) .container .part-bottom-xs-8 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 8 + (24px * (8 - 1))) + 30px); } .section.--wide:not(.--colored) .container .part-top-xs-9 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 9 + (24px * (9 - 1))); } .section.--wide:not(.--colored) .container .part-left-xs-9 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 9 + (24px * (9 - 1))); } .section.--wide:not(.--colored) .container .part-right-xs-9 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 9 + (24px * (9 - 1))); } .section.--wide:not(.--colored) .container .part-bottom-xs-9 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 9 + (24px * (9 - 1))) + 30px); } .section.--wide:not(.--colored) .container .part-top-xs-10 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 10 + (24px * (10 - 1))); } .section.--wide:not(.--colored) .container .part-left-xs-10 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 10 + (24px * (10 - 1))); } .section.--wide:not(.--colored) .container .part-right-xs-10 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 10 + (24px * (10 - 1))); } .section.--wide:not(.--colored) .container .part-bottom-xs-10 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 10 + (24px * (10 - 1))) + 30px); } .section.--wide:not(.--colored) .container .part-top-xs-11 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 11 + (24px * (11 - 1))); } .section.--wide:not(.--colored) .container .part-left-xs-11 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 11 + (24px * (11 - 1))); } .section.--wide:not(.--colored) .container .part-right-xs-11 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 11 + (24px * (11 - 1))); } .section.--wide:not(.--colored) .container .part-bottom-xs-11 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 11 + (24px * (11 - 1))) + 30px); } .section.--wide:not(.--colored) .container .part-top-xs-12 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 12 + (24px * (12 - 1))); } .section.--wide:not(.--colored) .container .part-left-xs-12 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 12 + (24px * (12 - 1))); } .section.--wide:not(.--colored) .container .part-right-xs-12 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 12 + (24px * (12 - 1))); } .section.--wide:not(.--colored) .container .part-bottom-xs-12 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 12 + (24px * (12 - 1))) + 30px); } } @media (max-width: 375px) { .section.--wide:not(.--colored) .container .part-xs-0 { display: none; } } @media (max-width: 576px) { .section.--wide:not(.--colored) .container .part-s-0 { display: none; } } @media (max-width: 768px) { .section.--wide:not(.--colored) .container .part-m-0 { display: none; } } @media (max-width: 1024px) { .section.--wide:not(.--colored) .container .part-l-0 { display: none; } } @media (max-width: 1280px) { .section.--wide:not(.--colored) .container .part-xl-0 { display: none; } } .section.--wide:not(.--colored) .container [class*=part].-justify-start { display: flex; justify-content: flex-start; } .section.--wide:not(.--colored) .container [class*=part].-justify-center { display: flex; justify-content: center; } .section.--wide:not(.--colored) .container [class*=part].-justify-end { display: flex; justify-content: flex-end; } .section.--wide:not(.--colored) .container [class*=part].-align-start { display: flex; align-items: flex-start; } .section.--wide:not(.--colored) .container [class*=part].-align-center { display: flex; align-items: center; } .section.--wide:not(.--colored) .container [class*=part].-align-end { display: flex; align-items: flex-end; } .section.--wide:not(.--colored) .container [class*=part].-text-left { text-align: left; } .section.--wide:not(.--colored) .container [class*=part].-text-center { text-align: center; } .section.--wide:not(.--colored) .container [class*=part].-text-right { text-align: right; } .section.--no-padding-bottom { padding-bottom: 0px !important; } .section.--no-padding-top { padding-top: 0px !important; } .section.--margin-top { margin-top: 0px !important; } .section.--margin-top .images-header { margin-top: 100px; } .section.--empty { margin-bottom: 200px; } @media (max-width: 576px) { .section.--empty { margin-bottom: 100px; } } .section.--empty::after { content: ""; position: absolute; bottom: 0; left: 0; right: 0; width: 100%; height: 10px; border: 1px solid #DADDDF; border-top: 0; border-radius: 0 0 10px 10px; width: calc(1560px - 180px); margin-left: auto; margin-right: auto; } @media (max-width: 1560px) { .section.--empty::after { width: calc(100% - 180px); } } @media (max-width: 768px) { .section.--empty::after { width: calc(100% - 90px); } } @media (max-width: 576px) { .section.--empty::after { width: calc(100% - 30px); } } .section.--contact-white .cta__footer { margin-top: 50px; color: #23457c; font-weight: 600; } .section.--image-text, .section.--text-image { position: relative; } .section.--image-text .container, .section.--text-image .container { margin-bottom: 0; } .section.--image-text .container [class*=part], .section.--text-image .container [class*=part] { margin-bottom: 0; } .section.--image-text .container, .section.--text-image .container { align-items: center; } .section.--image-text .container img, .section.--text-image .container img { border-radius: 10px; } @media (max-width: 1024px) { .section.--image-text .container img, .section.--text-image .container img { border-radius: 7px; } } @media (max-width: 576px) { .section.--image-text .container img, .section.--text-image .container img { border-radius: 5px; } } @media (max-width: 1024px) { .section.--image-text .container .text { margin-bottom: 30px; } } @media (max-width: 1024px) { .section.--text-image .container { flex-direction: column-reverse; } } @media (max-width: 1024px) { .section.--text-image .container .text { margin-top: 30px; } } .section.--floor { background-image: url("/img/gradient/gradient-bottom-right.svg"); background-size: contain; background-repeat: no-repeat; background-position: center center; position: relative; background-position: bottom right; } @media (max-width: 1024px) { .section.--revert-on-l .container { flex-direction: column-reverse; } } .section.--reversed .container { flex-direction: row-reverse; } @media (max-width: 1024px) { .section.--reversed .container { flex-direction: column-reverse; } } .section.--align-center .container { align-items: center; } .section.--horizontal-center .container { justify-content: center; } @media (max-width: 1024px) { .section.--vertical-l .container { flex-direction: column; align-items: center; } } .section.--hide-overflow { overflow: hidden; } .section.--reduce-space { margin-top: 50px; } .section.--reduce-space + .section { margin-top: 50px; } @media (max-width: 1024px) { .section.--reduce-space + .section { margin-top: 50px; } } @media (max-width: 768px) { .section.--reduce-space + .section { margin-top: 50px; } } @media (max-width: 576px) { .section.--reduce-space + .section { margin-top: 30px; } } @media (max-width: 375px) { .section.--reduce-space + .section { margin-top: 30px; } } .section.--section-titles { margin-top: 100px; } @media (max-width: 1024px) { .section.--section-titles { margin-top: 70px; } } @media (max-width: 768px) { .section.--section-titles { margin-top: 70px; } } @media (max-width: 576px) { .section.--section-titles { margin-top: 50px; } } @media (max-width: 375px) { .section.--section-titles { margin-top: 50px; } } .section.--centered-gradient { background-image: url("/img/gradient/jobs-gradient.svg"); background-size: contain; background-repeat: no-repeat; background-position: center center; background-size: auto 130%; } .section.-who-we-are .divider { margin-bottom: 100px; opacity: 0.6; } @media (max-width: 1024px) { .section.-who-we-are .divider { margin-bottom: 70px; } } @media (max-width: 768px) { .section.-who-we-are .divider { margin-bottom: 70px; } } @media (max-width: 576px) { .section.-who-we-are .divider { margin-bottom: 50px; } } @media (max-width: 375px) { .section.-who-we-are .divider { margin-bottom: 50px; } } .section.-who-we-are h1 { text-align: center; } .section.-who-we-are p { text-align: center; } .section.--extra-top-bottom-space { padding-top: 150px; padding-bottom: 150px; } @media (max-width: calc(1560px)) { .section.--extra-top-bottom-space { padding-top: 100px; } } @media (max-width: 768px) { .section.--extra-top-bottom-space { padding-top: 100px; } } @media (max-width: 576px) { .section.--extra-top-bottom-space { padding-top: 75px; } } @media (max-width: calc(1560px)) { .section.--extra-top-bottom-space { padding-bottom: 100px; } } @media (max-width: 768px) { .section.--extra-top-bottom-space { padding-bottom: 100px; } } @media (max-width: 576px) { .section.--extra-top-bottom-space { padding-bottom: 75px; } } .--software-insights { height: 790px; overflow: hidden; } .--software-insights .view-more { position: absolute !important; display: flex; justify-content: center; left: 0%; top: 690px; } @media (max-width: 1024px) { .--software-insights .view-more { top: 580px !important; } } .--software-insights .view-more.-button { top: 730px !important; } @media (max-width: 1024px) { .--software-insights .view-more.-button { top: 625px !important; } } @media (max-width: 1024px) { .--software-insights { height: 680px; } } .--software-insights.-show-all { animation: moreInsights 1s forwards; } .--software-insights.-show-all .gradientback { display: none; } .--software-insights.-show-all .view-more { position: relative !important; top: unset !important; } .--software-insights.-show-all .button-more { position: relative !important; bottom: unset !important; } .--software-insights.-show-all .button-more .button__text span { display: none; } .--software-insights.-show-all .button-more .button__text::after { content: "View less"; } .--software-insights .container .gradientback { position: absolute; left: 0px; width: 100%; height: 100px; /* FF3.6+ */ /* Chrome,Safari4+ */ /* Chrome10+,Safari5.1+ */ /* Opera 11.10+ */ /* IE10+ */ background: linear-gradient(to bottom, rgba(137, 255, 241, 0) 0%, white 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr="#0089fff1", endColorstr="#000000",GradientType=0 ); /* IE6-9 */ } .--software-insights .container .button-more { background-color: white; } .--software-insights img { margin-bottom: 20px; } @keyframes moreInsights { 0% { height: 717px; } 100% { height: 100%; } } .section.--conversion { position: relative; padding-top: 50px; padding-bottom: 50px; } @media (max-width: 1024px) { .section.--conversion { padding-top: 50px; } } @media (max-width: 768px) { .section.--conversion { padding-top: 50px; } } @media (max-width: 576px) { .section.--conversion { padding-top: 30px; } } @media (max-width: 375px) { .section.--conversion { padding-top: 30px; } } @media (max-width: 1024px) { .section.--conversion { padding-bottom: 50px; } } @media (max-width: 768px) { .section.--conversion { padding-bottom: 50px; } } @media (max-width: 576px) { .section.--conversion { padding-bottom: 30px; } } @media (max-width: 375px) { .section.--conversion { padding-bottom: 30px; } } .section.--conversion::before { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; margin-left: 60px; margin-right: 60px; width: auto; height: 100%; background-image: url("/img/blue-gradient.svg"); background-size: contain; background-repeat: no-repeat; background-position: center center; background-color: black; background-position: left top; } @media (max-width: calc(1560px)) { .section.--conversion::before { margin-left: 40px; } } @media (max-width: 768px) { .section.--conversion::before { margin-left: 30px; } } @media (max-width: 576px) { .section.--conversion::before { margin-left: 15px; } } @media (max-width: calc(1560px)) { .section.--conversion::before { margin-right: 40px; } } @media (max-width: 768px) { .section.--conversion::before { margin-right: 30px; } } @media (max-width: 576px) { .section.--conversion::before { margin-right: 15px; } } @media (max-width: 576px) { .section.--conversion::before { background-size: 200% auto; } } .section.--conversion * { color: white; } .section.--conversion h2 { width: calc(100% + 10px); margin-top: -10px; } .section.--conversion img { width: 380px; } section.--page-header { padding-top: 190px; padding-bottom: 100px; position: relative; margin-top: 0; min-height: 700px; background-size: cover; background-repeat: no-repeat; background-position: center center; background-color: black; background-position: bottom center; } @media (max-width: 1024px) { section.--page-header { padding-top: 170px; } } @media (max-width: 768px) { section.--page-header { padding-top: 170px; } } @media (max-width: 576px) { section.--page-header { padding-top: 140px; } } @media (max-width: 375px) { section.--page-header { padding-top: 140px; } } @media (max-width: 1024px) { section.--page-header { padding-bottom: 70px; } } @media (max-width: 768px) { section.--page-header { padding-bottom: 70px; } } @media (max-width: 576px) { section.--page-header { padding-bottom: 50px; } } @media (max-width: 375px) { section.--page-header { padding-bottom: 50px; } } @media (max-width: 1024px) { section.--page-header { min-height: unset; } } section.--page-header video { position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } section.--page-header video + .layer { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: url("/img/home/layer.webp"); background-size: cover; background-repeat: no-repeat; background-position: left bottom; } section.--page-header .container { position: relative; z-index: 1; } section.--page-header .container * { color: white; } section.--page-header .container .text { display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; } section.--page-header .container .text:not(.-no-top-margin) { margin-top: 55px; } @media (max-width: 1024px) { section.--page-header .container .text:not(.-no-top-margin) { margin-top: 35px; } } @media (max-width: 576px) { section.--page-header .container .text:not(.-no-top-margin) { margin-top: 0; } } section.--page-header .container h1 { overflow: hidden; padding-bottom: 10px; width: 100%; text-overflow: ellipsis; } @media (max-width: 576px) { section.--page-header .container h1.-bold { font-size: 43px; } } section.--page-header::before { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; z-index: 0; opacity: 0.7; background-color: black; } section.--page-header + .section { margin-top: 100px; } @media (max-width: 1024px) { section.--page-header + .section { margin-top: 70px; } } @media (max-width: 768px) { section.--page-header + .section { margin-top: 70px; } } @media (max-width: 576px) { section.--page-header + .section { margin-top: 50px; } } @media (max-width: 375px) { section.--page-header + .section { margin-top: 50px; } } @media (min-width: 1024px) { section.--page-header + .section { margin-top: 100px; } } section.--page-header.-large { display: flex; align-items: flex-end; min-height: calc(100vh + 130px); padding-bottom: 90px; } @media (max-width: 1024px) { section.--page-header.-large { min-height: 100vh; } } section.--page-header.-large::before { display: none; } section.--page-header.-large .container .text { align-items: flex-end; } section.--page-header.--with-gradient::before { background-image: url("/img/blue-gradient.svg"); background-size: contain; background-repeat: no-repeat; background-position: center center; background-color: black; background-position: left top; background-size: 200% auto; background-color: #000; } @media (max-width: 576px) { section.--page-header.--with-gradient::before { background-size: 200% auto; } } .--cases-header { padding-top: 190px; padding-bottom: 100px; position: relative; margin-top: 0; background-size: cover; background-repeat: no-repeat; background-position: center center; background-position: bottom center; } @media (max-width: 1024px) { .--cases-header { padding-top: 170px; } } @media (max-width: 768px) { .--cases-header { padding-top: 170px; } } @media (max-width: 576px) { .--cases-header { padding-top: 140px; } } @media (max-width: 375px) { .--cases-header { padding-top: 140px; } } @media (max-width: 1024px) { .--cases-header { min-height: unset; padding-bottom: 0; } } .-subtitle { margin-bottom: 35px; } .section.--colored { position: relative; background-color: #000; } .section.--colored.-color-1 { background-color: #23457c; } .section.--colored.-color-2 { background-color: #e5e5e5; } .section.--colored.-color-3 { background-color: #AAACB5; } .section.--colored.-white { background-color: white; } .section.--colored.-black { background-color: #000; } .section.--colored *:not(.button):not(.filter__remove):not(.filter__tag):not(.button *):not(.filter__remove *):not(.filter__tag *):not(p):not(p a):not(h6):not(.modal *) { color: white; } .section.--colored p, .section.--colored p a, .section.--colored h6 { color: #717484; } .section.--colored p a, .section.--colored p a a, .section.--colored h6 a { color: #717484 !important; } .section.--colored p a:hover, .section.--colored p a a:hover, .section.--colored h6 a:hover { color: #2D77C0 !important; } .section.--colored p a { border: none !important; } .section.--colored:not(.--bordered) { padding-top: 100px; padding-top: 100px; padding-bottom: 100px; padding-bottom: 100px; } @media (max-width: 1024px) { .section.--colored:not(.--bordered) { padding-top: 100px; padding-top: 100px; } } @media (max-width: 768px) { .section.--colored:not(.--bordered) { padding-top: 100px; padding-top: 100px; } } @media (max-width: 576px) { .section.--colored:not(.--bordered) { padding-top: 50px; padding-top: 50px; } } @media (max-width: 1024px) { .section.--colored:not(.--bordered) { padding-bottom: 100px; padding-bottom: 100px; } } @media (max-width: 768px) { .section.--colored:not(.--bordered) { padding-bottom: 100px; padding-bottom: 100px; } } @media (max-width: 576px) { .section.--colored:not(.--bordered) { padding-bottom: 50px; padding-bottom: 50px; } } .section.--colored.-bottom-gradient { background-image: url("/img/gradient/solution-gradient.jpg"); background-size: contain; background-repeat: no-repeat; background-position: center center; background-position: bottom; } .section.--colored.--extra-top-bottom-space { padding-top: 150px; padding-bottom: 150px; } @media (max-width: calc(1560px)) { .section.--colored.--extra-top-bottom-space { padding-top: 100px; } } @media (max-width: 768px) { .section.--colored.--extra-top-bottom-space { padding-top: 100px; } } @media (max-width: 576px) { .section.--colored.--extra-top-bottom-space { padding-top: 75px; } } @media (max-width: calc(1560px)) { .section.--colored.--extra-top-bottom-space { padding-bottom: 100px; } } @media (max-width: 768px) { .section.--colored.--extra-top-bottom-space { padding-bottom: 100px; } } @media (max-width: 576px) { .section.--colored.--extra-top-bottom-space { padding-bottom: 75px; } } .section.--colored.--bordered::before, .section.--colored.--bordered::after, .section.--colored.--top-bordered::before, .section.--colored.--top-bordered::after, .section.--colored.--bottom-bordered::before, .section.--colored.--bottom-bordered::after { border-color: #717484; } .section.--colored:not(.--bordered):not(.--bottom-bordered) + .--colored { margin-top: 0; } .section.--colored:not(.--bordered):not(.--bottom-bordered) + .--colored:not(.--bordered):not(.--top-bordered) { padding-top: 0; } .section.--colored.--bordered + .--colored, .section.--colored.--bottom-bordered + .--colored { margin-top: 0; } .section.--colored.--no-bottom-space { padding-bottom: 0; } .section.--gradient { position: relative; margin-left: 60px; margin-right: 60px; padding-top: 100px; padding-bottom: 100px; } @media (max-width: calc(1560px)) { .section.--gradient { margin-left: 40px; } } @media (max-width: 768px) { .section.--gradient { margin-left: 30px; } } @media (max-width: 576px) { .section.--gradient { margin-left: 15px; } } @media (max-width: calc(1560px)) { .section.--gradient { margin-right: 40px; } } @media (max-width: 768px) { .section.--gradient { margin-right: 30px; } } @media (max-width: 576px) { .section.--gradient { margin-right: 15px; } } @media (max-width: 1024px) { .section.--gradient { padding-top: 70px; } } @media (max-width: 768px) { .section.--gradient { padding-top: 70px; } } @media (max-width: 576px) { .section.--gradient { padding-top: 50px; } } @media (max-width: 375px) { .section.--gradient { padding-top: 50px; } } @media (max-width: 1024px) { .section.--gradient { padding-bottom: 70px; } } @media (max-width: 768px) { .section.--gradient { padding-bottom: 70px; } } @media (max-width: 576px) { .section.--gradient { padding-bottom: 50px; } } @media (max-width: 375px) { .section.--gradient { padding-bottom: 50px; } } .section.--gradient * { color: white; } .section.--gradient::before { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; background-image: url("/img/blue-gradient-right.svg"); background-size: contain; background-repeat: no-repeat; background-position: center center; background-color: black; background-position: right top; } @media (max-width: 576px) { .section.--gradient::before { background-size: 200% auto; } } .section.--gradient.-color-black::before { background-color: black; } .section.--gradient.-color-gradient::before { background-image: url("/img/blue-gradient-right.svg"); background-size: contain; background-repeat: no-repeat; background-position: center center; background-color: black; background-position: right top; } @media (max-width: 576px) { .section.--gradient.-color-gradient::before { background-size: 200% auto; } } .section.--page-title { overflow: hidden; } .section.--page-title .container { padding-top: 40px; } .section.--page-title .container p { max-width: 912px; margin-left: auto; margin-right: auto; } @media (max-width: 1024px) { .section.--page-title .container { padding-top: 0; } } .section.--page-title::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: calc(190px + 91px + 40px + 30px); width: calc(1560px - 180px); margin-left: auto; margin-right: auto; background-image: url("/img/gradient/gradient-green-hero.svg"); background-size: cover; background-repeat: no-repeat; background-position: center center; background-position: bottom center; } @media (max-width: 1560px) { .section.--page-title::before { width: calc(100% - 180px); } } @media (max-width: 768px) { .section.--page-title::before { width: calc(100% - 90px); } } @media (max-width: 576px) { .section.--page-title::before { width: calc(100% - 30px); } } @media (max-width: 1024px) { .section.--page-title::before { height: calc(170px + 47px + 20px + 20px); } } @media (max-width: 768px) { .section.--page-title::before { height: calc(170px + 30px + 20px + 20px); } } @media (max-width: 576px) { .section.--page-title::before { left: -50%; height: calc(140px + 30px + 0px + 30px); width: 200%; } } .section.--page-title.-gradient-blue::before { background-image: url("/img/gradient/gradient-blue-hero.svg"); } .section.--page-title.-gradient-dark { background-color: #000; padding-bottom: 100px; } @media (max-width: 1024px) { .section.--page-title.-gradient-dark { padding-bottom: 70px; } } @media (max-width: 768px) { .section.--page-title.-gradient-dark { padding-bottom: 70px; } } @media (max-width: 576px) { .section.--page-title.-gradient-dark { padding-bottom: 50px; } } @media (max-width: 375px) { .section.--page-title.-gradient-dark { padding-bottom: 50px; } } .section.--page-title.-gradient-dark h1, .section.--page-title.-gradient-dark h2, .section.--page-title.-gradient-dark h3, .section.--page-title.-gradient-dark h4, .section.--page-title.-gradient-dark h5, .section.--page-title.-gradient-dark h6 { color: white; } .section.--page-title.-gradient-dark p { color: #4A4A4A !important; } .section.--page-title.-gradient-dark::before { background-image: url("/img/gradient/gradient-blue-dark-hero.svg"); } .section.--page-title.-gradient-dark + .section { margin-top: 0; } .section.--page-title.-gradient-dark + .section.--colored:not(.--bordered):not(.--top-bordered) { padding-top: 0; } .section.--page-title + .section { margin-top: 130px; } @media (max-width: calc(1560px)) { .section.--page-title + .section { margin-top: 130px; } } @media (max-width: 768px) { .section.--page-title + .section { margin-top: 100px; } } @media (max-width: 576px) { .section.--page-title + .section { margin-top: 60px; } } .section.--page-title p.-large { margin-top: 22px; color: #AAACB5; } .section.--slogan .slogan { border-radius: 10px; position: relative; overflow: hidden; padding-top: 42%; } @media (max-width: 1024px) { .section.--slogan .slogan { border-radius: 7px; } } @media (max-width: 576px) { .section.--slogan .slogan { border-radius: 5px; } } @media (max-width: 1280px) { .section.--slogan .slogan { padding-top: 60%; } } @media (max-width: 768px) { .section.--slogan .slogan { padding-top: 83%; } } .section.--slogan .slogan__title { font-family: "DM Sans", sans-serif; font-size: 91px; font-weight: 700; line-height: 1.09; color: #000; max-width: calc(((1560px - (24px * (12 - 1))) / 12) * 8 + (24px * (8 - 1))); color: white; text-align: center; letter-spacing: -0.03rem; } @media (max-width: 1024px) { .section.--slogan .slogan__title { font-size: 47px; } } @media (max-width: 768px) { .section.--slogan .slogan__title { font-size: 30px; } } @media (max-width: 576px) { .section.--slogan .slogan__title { font-size: 30px; } } .section.--slogan .slogan__title + * { margin-top: 30px; } @media (max-width: 1024px) { .section.--slogan .slogan__title + * { margin-top: 20px; } } @media (max-width: 768px) { .section.--slogan .slogan__title + * { margin-top: 20px; } } @media (max-width: 576px) { .section.--slogan .slogan__title + * { margin-top: 30px; } } .section.--slogan .slogan__inner { display: flex; align-items: center; justify-content: center; position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; padding: 0 15px; } .section.--slogan .slogan__inner::after { position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; content: ""; z-index: -1; background-color: rgba(0, 0, 0, 0.5); } .section.--slogan .slogan__image { position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; top: -25%; height: 140%; -o-object-fit: cover; object-fit: cover; z-index: -1; } .section.--slogan .slogan__image img { max-width: unset; } .section.--slogan .slogan__buttons { margin-top: 0; margin-left: 45px; } @media (max-width: 576px) { .section.--slogan .slogan__buttons { margin-left: 0; margin-top: 10px; } } .section.--slogan .slogan__bottom { border-radius: 20px; position: absolute; left: 0; right: 0; bottom: 30px; display: flex; align-items: center; flex-wrap: wrap; width: -moz-fit-content; width: fit-content; margin: auto; padding: 20px 35px; background-color: white; } @media (max-width: 1024px) { .section.--slogan .slogan__bottom { border-radius: 15px; } } @media (max-width: 576px) { .section.--slogan .slogan__bottom { border-radius: 15px; } } @media (max-width: 768px) { .section.--slogan .slogan__bottom { max-width: calc(100% - 22px); width: -moz-fit-content; width: fit-content; padding: 12px; bottom: 14px; } } @media (max-width: 576px) { .section.--slogan .slogan__bottom { flex-direction: column; width: 100%; padding: 20px; bottom: 10px; } } .section.--slogan .slogan.-with-bottom .slogan__inner { padding-bottom: 80px; } .section.--bordered { padding-top: 100px; padding-bottom: 100px; } @media (max-width: 1024px) { .section.--bordered { padding-top: 70px; } } @media (max-width: 768px) { .section.--bordered { padding-top: 70px; } } @media (max-width: 576px) { .section.--bordered { padding-top: 50px; } } @media (max-width: 375px) { .section.--bordered { padding-top: 50px; } } @media (max-width: 1024px) { .section.--bordered { padding-bottom: 70px; } } @media (max-width: 768px) { .section.--bordered { padding-bottom: 70px; } } @media (max-width: 576px) { .section.--bordered { padding-bottom: 50px; } } @media (max-width: 375px) { .section.--bordered { padding-bottom: 50px; } } .section.--bordered::before { content: ""; position: absolute; top: 0; left: 0; right: 0; width: 100%; height: 10px; border: 1px solid #DADDDF; border-bottom: 0; border-radius: 10px 10px 0 0; width: calc(1560px - 180px); margin-left: auto; margin-right: auto; } @media (max-width: 1560px) { .section.--bordered::before { width: calc(100% - 180px); } } @media (max-width: 768px) { .section.--bordered::before { width: calc(100% - 90px); } } @media (max-width: 576px) { .section.--bordered::before { width: calc(100% - 30px); } } .section.--bordered::after { content: ""; position: absolute; bottom: 0; left: 0; right: 0; width: 100%; height: 10px; border: 1px solid #DADDDF; border-top: 0; border-radius: 0 0 10px 10px; width: calc(1560px - 180px); margin-left: auto; margin-right: auto; } @media (max-width: 1560px) { .section.--bordered::after { width: calc(100% - 180px); } } @media (max-width: 768px) { .section.--bordered::after { width: calc(100% - 90px); } } @media (max-width: 576px) { .section.--bordered::after { width: calc(100% - 30px); } } .section.--bottom-bordered { padding-bottom: 100px; } @media (max-width: 1024px) { .section.--bottom-bordered { padding-bottom: 70px; } } @media (max-width: 768px) { .section.--bottom-bordered { padding-bottom: 70px; } } @media (max-width: 576px) { .section.--bottom-bordered { padding-bottom: 50px; } } @media (max-width: 375px) { .section.--bottom-bordered { padding-bottom: 50px; } } .section.--bottom-bordered::after { content: ""; position: absolute; bottom: 0; left: 0; right: 0; width: 100%; height: 10px; border: 1px solid #DADDDF; border-top: 0; border-radius: 0 0 10px 10px; width: calc(1560px - 180px); margin-left: auto; margin-right: auto; } @media (max-width: 1560px) { .section.--bottom-bordered::after { width: calc(100% - 180px); } } @media (max-width: 768px) { .section.--bottom-bordered::after { width: calc(100% - 90px); } } @media (max-width: 576px) { .section.--bottom-bordered::after { width: calc(100% - 30px); } } .section.--top-bordered { padding-top: 100px; } @media (max-width: 1024px) { .section.--top-bordered { padding-top: 70px; } } @media (max-width: 768px) { .section.--top-bordered { padding-top: 70px; } } @media (max-width: 576px) { .section.--top-bordered { padding-top: 50px; } } @media (max-width: 375px) { .section.--top-bordered { padding-top: 50px; } } .section.--top-bordered::before { content: ""; position: absolute; top: 0; left: 0; right: 0; width: 100%; height: 10px; border: 1px solid #DADDDF; border-bottom: 0; border-radius: 10px 10px 0 0; width: calc(1560px - 180px); margin-left: auto; margin-right: auto; } @media (max-width: 1560px) { .section.--top-bordered::before { width: calc(100% - 180px); } } @media (max-width: 768px) { .section.--top-bordered::before { width: calc(100% - 90px); } } @media (max-width: 576px) { .section.--top-bordered::before { width: calc(100% - 30px); } } .section.--bordered + .--bordered, .section.--bottom-bordered + .--bordered { margin-top: 0; } .section.--bordered + .--bordered::before, .section.--bottom-bordered + .--bordered::before { display: none; } .images-header::after { content: ""; display: block; margin-top: 100px; } @media (max-width: 1024px) { .images-header::after { margin-top: 70px; } } @media (max-width: 768px) { .images-header::after { margin-top: 70px; } } @media (max-width: 576px) { .images-header::after { margin-top: 50px; } } @media (max-width: 375px) { .images-header::after { margin-top: 50px; } } .images-header .--images .-absolute { position: absolute; max-width: 444px; width: 25%; } .images-header .--images .-left { left: -100px; top: 225px; } @media (max-width: 1680px) { .images-header .--images .-left { left: -200px; } } @media (max-width: 1024px) { .images-header .--images .-left { top: 180px; left: -100px; } } .images-header .--images .-right { right: -100px; top: 150px; } @media (max-width: 1680px) { .images-header .--images .-right { right: -200px; } } @media (max-width: 1024px) { .images-header .--images .-right { right: -100px; } } .images-header .--images .-left-center { bottom: 100px; left: 153px; } @media (max-width: 1024px) { .images-header .--images .-left-center { bottom: 70px; } } @media (max-width: 768px) { .images-header .--images .-left-center { bottom: 70px; } } @media (max-width: 576px) { .images-header .--images .-left-center { bottom: 50px; } } @media (max-width: 375px) { .images-header .--images .-left-center { bottom: 50px; } } @media (max-width: 1680px) { .images-header .--images .-left-center { left: 50px; } } @media (max-width: 576px) { .images-header .--images .-left-center { left: 18px; } } .images-header .--images .-right-center { bottom: 82px; right: 153px; } @media (max-width: 1680px) { .images-header .--images .-right-center { right: 50px; } } @media (max-width: 576px) { .images-header .--images .-right-center { right: 18px; } } .images-header .--content { display: flex; flex-direction: column; align-items: center; } .images-header .--content h1 { text-align: center; max-width: 750px; } @media (min-width: 1681px) { .images-header .--content h1 { max-width: 820px; } } .images-header .--content .tag { opacity: 0.7; } .images-header .-center { margin-top: 190px; } @media (max-width: 1024px) { .images-header .-center { margin-top: 170px; } } @media (max-width: 768px) { .images-header .-center { margin-top: 170px; } } @media (max-width: 576px) { .images-header .-center { margin-top: 140px; } } @media (max-width: 375px) { .images-header .-center { margin-top: 140px; } } @media (max-width: 576px) { .images-header .-center { margin-top: 57px; } } .section.--error { overflow: hidden; height: 100vh; background-image: url("/img/gradient/gradient-error.svg"); background-size: contain; background-repeat: no-repeat; background-position: center center; background-size: 200% 200%; background-position: left 10% top 10%; } .section.--error .container { position: relative; z-index: 1; } .section.--error .letters { position: absolute; bottom: -8%; right: 0; width: 60%; z-index: 0; } @media (max-width: 1680px) { .section.--error .letters { bottom: -5%; } } @media (max-width: 1280px) { .section.--error .letters { bottom: -4%; } } @media (max-width: 1024px) { .section.--error .letters { bottom: -3%; } } @media (max-width: 768px) { .section.--error .letters { width: 100%; } } .section.--error .letters .letter:nth-child(2) { transform: translate(1025.132px, 248.381px) rotate(20deg); animation: fs-circle 1s forwards ease-out 0.5s, fs-circle-place 2.1s forwards ease-out 2.25s; /* */ } .section.--error p { max-width: 444px; } .benefits__content { display: flex; } .benefits img { width: 54px; max-width: none; margin-right: 43px; margin-left: 25px; } .question .-grey-500 { color: #aaacb6 !important; } .question .-show-mobile { display: none; } .question .-show-mobile .-grey-500 { margin-right: 12px; } @media (max-width: 576px) { .question .-show-mobile h4 { font-size: 22px; } } @media (max-width: 1024px) { .question .-show-mobile { display: flex; } } .question .-hide-mobile { display: block; } @media (max-width: 1024px) { .question .-hide-mobile { display: none; } } @media (max-width: 768px) { .question.--step1 { padding-top: 50px !important; } } .question.--step1 .labl { width: calc(50% - 13px); } @media (max-width: 768px) { .question.--step1 .labl { width: 100%; } } .question.--step1 .labl .item { overflow: hidden; display: flex; flex-direction: row; min-height: 214px; width: 100%; } @media (max-width: 768px) { .question.--step1 .labl .item { min-height: 100px; } } .question.--step1 .labl .item .image { width: 50%; min-width: 50%; } .question.--step1 .labl .item .image img { margin: 0; border-top-left-radius: 0; border-bottom-left-radius: 0; } .question.--step1 .labl .item .detail { padding: 25px; } @media (max-width: 768px) { .question.--step1 .labl .item .detail { padding: 20px; } } @media (max-width: 576px) { .question.--step1 .labl .item { height: -moz-fit-content; height: fit-content; } } @media (max-width: 768px) { .question.--step1 .question__items { flex-wrap: wrap; } } .question.--step2 { position: relative; } .question.--step2 .labl .item { display: flex; align-items: center; justify-content: center; padding: 0 40px; height: 120px; } @media (max-width: 576px) { .question.--step2 .labl .item { height: 100px; } .question.--step2 .labl .item * { font-size: 18px; } } .question.--step3 { position: relative; } .question.--step3 .labl .item { display: flex; align-items: center; justify-content: center; padding: 0 32px; height: 120px; } @media (max-width: 576px) { .question.--step3 .labl .item { height: 100px; } .question.--step3 .labl .item * { font-size: 18px; } } .question.--step4 { position: relative; } .question.--step4 .labl .item { display: flex; align-items: center; justify-content: center; padding: 0 32px; height: 120px; } .question.--contact-details { position: relative; } .question #step-2, .question #step-3, .question #step-4, .question #contact-details { position: absolute; top: -180px; visibility: hidden; } .question__items { display: flex; margin-top: 70px; margin-bottom: 70px; gap: 25px; flex-wrap: wrap; } @media (max-width: 768px) { .question__items { gap: 12px; margin-top: 40px; margin-bottom: 40px; } } .question__items.-wrap { flex-wrap: wrap; } .question__items .labl { width: 31.35%; } @media (max-width: 768px) { .question__items .labl { width: 48.5%; } } @media (max-width: 576px) { .question__items .labl { width: 100%; } } .question__items .labl .item { border: 1px solid #DADDDF !important; border-radius: 10px; display: flex; flex-direction: column; justify-content: space-between; } .question__items .labl .item h4 { font-size: 25px; } @media (max-width: 768px) { .question__items .labl .item h4 { font-size: 20px; margin-top: 10px !important; } } .question__items .labl .item p { color: #2e77c0; } .question__items .labl .item .image { display: flex; justify-content: center; } .question__items .labl .item .image img { margin-top: 20px; } .question__items .labl .item .image img.small { width: 154px; } .question__items .labl > input { visibility: hidden; position: absolute; } .question__items .labl > input + div { /* DIV STYLES */ cursor: pointer; border: 2px solid transparent; transition: all 0.9s ease; } .question__items .labl > input { transition: all 0.3s ease; } .question__items .labl > input:checked + div { /* (RADIO CHECKED) DIV STYLES */ border: 1px solid #2D77C0 !important; } .question__items .labl > input:checked + div h4 { color: #2D77C0 !important; } .question__items .labl > input:checked + div p { font-weight: 600; } .question__items .labl > input:hover + div { /* (RADIO CHECKED) DIV STYLES */ border: 1px solid #2D77C0 !important; } .question__form { display: flex; flex-direction: column; gap: 10px; max-width: 900px; margin: 40px auto; } .question__form .privacy { position: absolute; opacity: 0; cursor: pointer; height: 0; width: 0; } .question__form .privacy:checked ~ .checkmark { background-color: #B5FF00; } .question__form a { color: #23457c; } .question__form label { z-index: 9; position: relative; padding-left: 35px; color: black; } .question__form .checkbox { display: flex; justify-content: flex-start; } .question__form .checkmark { position: absolute; top: 4px; left: 0; height: 20px; width: 20px; background-color: #eee; border-radius: 5px; } .question__form a { width: -moz-fit-content; width: fit-content; margin-top: 50px; } .question__form a input { background-color: transparent; border: none; font-size: 16px; font-family: work-sans, sans-serif; cursor: pointer; } .question__form h6, .question__form h4 { text-align: left !important; } .question__form .-fields { display: flex; gap: 10px; } .question__form .-fields textarea { width: 100%; height: 119px; } .question__form .-fields .-field { width: 50%; position: relative; } .question__form .-fields .-required::before { content: "*"; position: absolute; top: 10px; right: 15px; color: #23457c; } .question__form .-fields input[type=text] { width: 100%; } .question__form .-fields input[type=text], .question__form .-fields textarea { border-radius: 10px; border: none; padding: 10px 17px; background-color: rgba(0, 0, 0, 0.1); font-size: 16px; font-family: "DM Sans", sans-serif; color: black; } .question__form .-fields input[type=text]::-moz-placeholder, .question__form .-fields textarea::-moz-placeholder { font-size: 16px; color: black; } .question__form .-fields input[type=text]::placeholder, .question__form .-fields textarea::placeholder { font-size: 16px; color: black; } .question__form .-fields input[type=text]:focus, .question__form .-fields textarea:focus { outline: none; } .question__form .field__row { display: flex; } @media (max-width: 576px) { .question__form .field__row { width: 100% !important; } } .question__form .field__row input { border-top-right-radius: 0 !important; border-bottom-right-radius: 0 !important; } .question__form .field__row::before { right: 75px !important; } .question__form .field__after { border: 1px solid #e5e5e5; padding: 10px 15px; border-radius: 0 10px 10px 0; color: #23457c; font-size: 16px; } .question__subtitle { font-family: work-sans, sans-serif; font-size: 14px; font-weight: 700; line-height: 1.2; color: #AAACB5; margin-top: 5px !important; text-transform: uppercase; text-align: left; } @media (max-width: 1024px) { .question__subtitle { font-size: 11px; } } @media (max-width: 768px) { .question__subtitle { font-size: 11px; } } @media (max-width: 576px) { .question__subtitle { font-size: 10px; } } .question__subtitle + * { margin-top: 30px; } @media (max-width: 1024px) { .question__subtitle + * { margin-top: 30px; } } @media (max-width: 768px) { .question__subtitle + * { margin-top: 20px; } } @media (max-width: 576px) { .question__subtitle + * { margin-top: 20px; } } .question__subtitle span { color: #e5e5e5 !important; } .overview { display: flex; flex-wrap: wrap; margin-left: calc(-24px / 2); margin-right: calc(-24px / 2); margin-bottom: -50px; width: calc(100% + (24px)); } .overview__item { width: calc((4 * 100% / 12) - 24px); margin: 0 calc(24px / 2); margin-bottom: 50px; } .overview__item.-hidden { display: none; } @media (max-width: 1024px) { .overview { display: flex; flex-wrap: wrap; margin-left: calc(-16px / 2); margin-right: calc(-16px / 2); margin-bottom: -50px; width: calc(100% + (16px)); } .overview__item { width: calc((4 * 100% / 12) - 16px); margin: 0 calc(16px / 2); margin-bottom: 50px; } .overview__item.-hidden { display: none; } } @media (max-width: 768px) { .overview { display: flex; flex-wrap: wrap; margin-left: calc(-14px / 2); margin-right: calc(-14px / 2); margin-bottom: -50px; width: calc(100% + (14px)); } .overview__item { width: calc((6 * 100% / 12) - 14px); margin: 0 calc(14px / 2); margin-bottom: 50px; } .overview__item.-hidden { display: none; } } @media (max-width: 576px) { .overview { display: flex; flex-wrap: wrap; margin-left: calc(-10px / 2); margin-right: calc(-10px / 2); margin-bottom: -30px; width: calc(100% + (10px)); } .overview__item { width: calc((12 * 100% / 12) - 10px); margin: 0 calc(10px / 2); margin-bottom: 30px; } .overview__item.-hidden { display: none; } } .--preview .overview { display: flex; flex-wrap: wrap; margin-left: calc(-24px / 2); margin-right: calc(-24px / 2); margin-bottom: 0; width: calc(100% + (24px)); } .--preview .overview__item { width: calc((6 * 100% / 12) - 24px); margin: 0 calc(24px / 2); margin-bottom: 0; } .--preview .overview__item.-hidden { display: none; } @media (max-width: 1024px) { .--preview .overview { display: flex; flex-wrap: wrap; margin-left: calc(-16px / 2); margin-right: calc(-16px / 2); margin-bottom: -50px; width: calc(100% + (16px)); } .--preview .overview__item { width: calc((6 * 100% / 12) - 16px); margin: 0 calc(16px / 2); margin-bottom: 50px; } .--preview .overview__item.-hidden { display: none; } } @media (max-width: 768px) { .--preview .overview { display: flex; flex-wrap: wrap; margin-left: calc(-14px / 2); margin-right: calc(-14px / 2); margin-bottom: -50px; width: calc(100% + (14px)); } .--preview .overview__item { width: calc((12 * 100% / 12) - 14px); margin: 0 calc(14px / 2); margin-bottom: 50px; } .--preview .overview__item.-hidden { display: none; } } .news .overview { display: flex; flex-wrap: wrap; margin-left: calc(-24px / 2); margin-right: calc(-24px / 2); margin-bottom: -100px; width: calc(100% + (24px)); } .news .overview__item { width: calc((6 * 100% / 12) - 24px); margin: 0 calc(24px / 2); margin-bottom: 100px; } .news .overview__item.-hidden { display: none; } @media (max-width: 1024px) { .news .overview { display: flex; flex-wrap: wrap; margin-left: calc(-16px / 2); margin-right: calc(-16px / 2); margin-bottom: -50px; width: calc(100% + (16px)); } .news .overview__item { width: calc((6 * 100% / 12) - 16px); margin: 0 calc(16px / 2); margin-bottom: 50px; } .news .overview__item.-hidden { display: none; } } @media (max-width: 576px) { .news .overview { display: flex; flex-wrap: wrap; margin-left: calc(-14px / 2); margin-right: calc(-14px / 2); margin-bottom: -50px; width: calc(100% + (14px)); } .news .overview__item { width: calc((12 * 100% / 12) - 14px); margin: 0 calc(14px / 2); margin-bottom: 50px; } .news .overview__item.-hidden { display: none; } } .applications .overview { display: flex; flex-wrap: wrap; margin-left: calc(-24px / 2); margin-right: calc(-24px / 2); margin-bottom: -50px; width: calc(100% + (24px)); } .applications .overview__item { width: calc((6 * 100% / 12) - 24px); margin: 0 calc(24px / 2); margin-bottom: 50px; } .applications .overview__item.-hidden { display: none; } @media (max-width: 1024px) { .applications .overview { display: flex; flex-wrap: wrap; margin-left: calc(-16px / 2); margin-right: calc(-16px / 2); margin-bottom: -35px; width: calc(100% + (16px)); } .applications .overview__item { width: calc((6 * 100% / 12) - 16px); margin: 0 calc(16px / 2); margin-bottom: 35px; } .applications .overview__item.-hidden { display: none; } } @media (max-width: 768px) { .applications .overview { display: flex; flex-wrap: wrap; margin-left: calc(-14px / 2); margin-right: calc(-14px / 2); margin-bottom: -35px; width: calc(100% + (14px)); } .applications .overview__item { width: calc((12 * 100% / 12) - 14px); margin: 0 calc(14px / 2); margin-bottom: 35px; } .applications .overview__item.-hidden { display: none; } } @media (max-width: 576px) { .applications .overview { display: flex; flex-wrap: wrap; margin-left: calc(-14px / 2); margin-right: calc(-14px / 2); margin-bottom: -25px; width: calc(100% + (14px)); } .applications .overview__item { width: calc((12 * 100% / 12) - 14px); margin: 0 calc(14px / 2); margin-bottom: 25px; } .applications .overview__item.-hidden { display: none; } } .applications .overview__item:nth-child(1) { order: 2; } .applications .overview__item:nth-child(2) { order: 0; } .applications .overview__item:nth-child(3) { order: 4; } .applications .overview__item:nth-child(4) { order: 1; } .applications .overview__item:nth-child(5) { order: 3; } .tech__images .overview { display: flex; flex-wrap: wrap; margin-left: calc(-24px / 2); margin-right: calc(-24px / 2); margin-bottom: -24px; width: calc(100% + (24px)); } .tech__images .overview__item { width: calc((4 * 100% / 12) - 24px); margin: 0 calc(24px / 2); margin-bottom: 24px; } .tech__images .overview__item.-hidden { display: none; } @media (max-width: 576px) { .tech__images .overview { display: flex; flex-wrap: wrap; margin-left: calc(-14px / 2); margin-right: calc(-14px / 2); margin-bottom: -14px; width: calc(100% + (14px)); } .tech__images .overview__item { width: calc((6 * 100% / 12) - 14px); margin: 0 calc(14px / 2); margin-bottom: 14px; } .tech__images .overview__item.-hidden { display: none; } } .-into-view .overview__item { opacity: 1; transform: translateY(0); transition: opacity 0.75s ease-in-out, transform 0.75s ease-in-out; } .-into-view .overview__item:nth-of-type(1) { transition-delay: calc(1 * 200ms); } .-into-view .overview__item:nth-of-type(2) { transition-delay: calc(2 * 200ms); } .-into-view .overview__item:nth-of-type(3) { transition-delay: calc(3 * 200ms); } .-into-view .overview__item:nth-of-type(4) { transition-delay: calc(4 * 200ms); } .-into-view .overview__item:nth-of-type(5) { transition-delay: calc(5 * 200ms); } .-into-view .overview__item:nth-of-type(6) { transition-delay: calc(6 * 200ms); } .-into-view .overview__item:nth-of-type(7) { transition-delay: calc(7 * 200ms); } .-into-view .overview__item:nth-of-type(8) { transition-delay: calc(8 * 200ms); } .-into-view .overview__item:nth-of-type(9) { transition-delay: calc(9 * 200ms); } .-into-view .overview__item:nth-of-type(10) { transition-delay: calc(10 * 200ms); } .-into-view .overview__item:nth-of-type(11) { transition-delay: calc(11 * 200ms); } .-into-view .overview__item:nth-of-type(12) { transition-delay: calc(12 * 200ms); } .-into-view .overview__item:nth-of-type(13) { transition-delay: calc(13 * 200ms); } .-into-view .overview__item:nth-of-type(14) { transition-delay: calc(14 * 200ms); } .-into-view .overview__item:nth-of-type(15) { transition-delay: calc(15 * 200ms); } .-into-view .overview__item:nth-of-type(16) { transition-delay: calc(16 * 200ms); } .-into-view .overview__item:nth-of-type(17) { transition-delay: calc(17 * 200ms); } .-into-view .overview__item:nth-of-type(18) { transition-delay: calc(18 * 200ms); } .-into-view .overview__item:nth-of-type(19) { transition-delay: calc(19 * 200ms); } .-into-view .overview__item:nth-of-type(20) { transition-delay: calc(20 * 200ms); } .-into-view .overview__item:nth-of-type(21) { transition-delay: calc(21 * 200ms); } .-into-view .overview__item:nth-of-type(22) { transition-delay: calc(22 * 200ms); } .-into-view .overview__item:nth-of-type(23) { transition-delay: calc(23 * 200ms); } .-into-view .overview__item:nth-of-type(24) { transition-delay: calc(24 * 200ms); } .-into-view .overview__item:nth-of-type(25) { transition-delay: calc(25 * 200ms); } .-into-view .overview__item:nth-of-type(26) { transition-delay: calc(26 * 200ms); } .-into-view .overview__item:nth-of-type(27) { transition-delay: calc(27 * 200ms); } .-into-view .overview__item:nth-of-type(28) { transition-delay: calc(28 * 200ms); } .-into-view .overview__item:nth-of-type(29) { transition-delay: calc(29 * 200ms); } .-into-view .overview__item:nth-of-type(30) { transition-delay: calc(30 * 200ms); } .team .overview { display: flex; flex-wrap: wrap; margin-left: calc(-24px / 2); margin-right: calc(-24px / 2); margin-bottom: -50px; width: calc(100% + (24px)); } .team .overview__item { width: calc((3 * 100% / 12) - 24px); margin: 0 calc(24px / 2); margin-bottom: 50px; } .team .overview__item.-hidden { display: none; } @media (max-width: 1024px) { .team .overview { display: flex; flex-wrap: wrap; margin-left: calc(-16px / 2); margin-right: calc(-16px / 2); margin-bottom: -50px; width: calc(100% + (16px)); } .team .overview__item { width: calc((4 * 100% / 12) - 16px); margin: 0 calc(16px / 2); margin-bottom: 50px; } .team .overview__item.-hidden { display: none; } } @media (max-width: 768px) { .team .overview { display: flex; flex-wrap: wrap; margin-left: calc(-14px / 2); margin-right: calc(-14px / 2); margin-bottom: -50px; width: calc(100% + (14px)); } .team .overview__item { width: calc((6 * 100% / 12) - 14px); margin: 0 calc(14px / 2); margin-bottom: 50px; } .team .overview__item.-hidden { display: none; } } @media (max-width: 576px) { .team .overview { display: flex; flex-wrap: wrap; margin-left: calc(-10px / 2); margin-right: calc(-10px / 2); margin-bottom: -30px; width: calc(100% + (10px)); } .team .overview__item { width: calc((12 * 100% / 12) - 10px); margin: 0 calc(10px / 2); margin-bottom: 30px; } .team .overview__item.-hidden { display: none; } } .cases .container { position: relative; display: flex; justify-content: space-between; align-items: stretch; flex-direction: row; flex-wrap: wrap; width: 100%; margin-right: auto; margin-left: auto; padding-right: 90px; padding-left: 90px; max-width: unset; padding-right: 0; padding-left: 0; } .cases .container .part-1:not(.no-gutter) { width: calc(((100% - (24px * (12 - 1))) / 12) * 1 + (24px * (1 - 1))); } .cases .container .part-1.no-gutter { width: calc(((100% - (0px * (12 - 1))) / 12) * 1 + (0px * (1 - 1))); } .cases .container .part-2:not(.no-gutter) { width: calc(((100% - (24px * (12 - 1))) / 12) * 2 + (24px * (2 - 1))); } .cases .container .part-2.no-gutter { width: calc(((100% - (0px * (12 - 1))) / 12) * 2 + (0px * (2 - 1))); } .cases .container .part-3:not(.no-gutter) { width: calc(((100% - (24px * (12 - 1))) / 12) * 3 + (24px * (3 - 1))); } .cases .container .part-3.no-gutter { width: calc(((100% - (0px * (12 - 1))) / 12) * 3 + (0px * (3 - 1))); } .cases .container .part-4:not(.no-gutter) { width: calc(((100% - (24px * (12 - 1))) / 12) * 4 + (24px * (4 - 1))); } .cases .container .part-4.no-gutter { width: calc(((100% - (0px * (12 - 1))) / 12) * 4 + (0px * (4 - 1))); } .cases .container .part-5:not(.no-gutter) { width: calc(((100% - (24px * (12 - 1))) / 12) * 5 + (24px * (5 - 1))); } .cases .container .part-5.no-gutter { width: calc(((100% - (0px * (12 - 1))) / 12) * 5 + (0px * (5 - 1))); } .cases .container .part-6:not(.no-gutter) { width: calc(((100% - (24px * (12 - 1))) / 12) * 6 + (24px * (6 - 1))); } .cases .container .part-6.no-gutter { width: calc(((100% - (0px * (12 - 1))) / 12) * 6 + (0px * (6 - 1))); } .cases .container .part-7:not(.no-gutter) { width: calc(((100% - (24px * (12 - 1))) / 12) * 7 + (24px * (7 - 1))); } .cases .container .part-7.no-gutter { width: calc(((100% - (0px * (12 - 1))) / 12) * 7 + (0px * (7 - 1))); } .cases .container .part-8:not(.no-gutter) { width: calc(((100% - (24px * (12 - 1))) / 12) * 8 + (24px * (8 - 1))); } .cases .container .part-8.no-gutter { width: calc(((100% - (0px * (12 - 1))) / 12) * 8 + (0px * (8 - 1))); } .cases .container .part-9:not(.no-gutter) { width: calc(((100% - (24px * (12 - 1))) / 12) * 9 + (24px * (9 - 1))); } .cases .container .part-9.no-gutter { width: calc(((100% - (0px * (12 - 1))) / 12) * 9 + (0px * (9 - 1))); } .cases .container .part-10:not(.no-gutter) { width: calc(((100% - (24px * (12 - 1))) / 12) * 10 + (24px * (10 - 1))); } .cases .container .part-10.no-gutter { width: calc(((100% - (0px * (12 - 1))) / 12) * 10 + (0px * (10 - 1))); } .cases .container .part-11:not(.no-gutter) { width: calc(((100% - (24px * (12 - 1))) / 12) * 11 + (24px * (11 - 1))); } .cases .container .part-11.no-gutter { width: calc(((100% - (0px * (12 - 1))) / 12) * 11 + (0px * (11 - 1))); } .cases .container .part-12:not(.no-gutter) { width: calc(((100% - (24px * (12 - 1))) / 12) * 12 + (24px * (12 - 1))); } .cases .container .part-12.no-gutter { width: calc(((100% - (0px * (12 - 1))) / 12) * 12 + (0px * (12 - 1))); } @media (max-width: 1280px) { .cases .container .part-xl-1:not(.no-gutter) { width: calc(((100% - (24px * (12 - 1))) / 12) * 1 + (24px * (1 - 1))); } .cases .container .part-xl-1.no-gutter { width: calc(((100% - (0px * (12 - 1))) / 12) * 1 + (0px * (1 - 1))); } .cases .container .part-xl-2:not(.no-gutter) { width: calc(((100% - (24px * (12 - 1))) / 12) * 2 + (24px * (2 - 1))); } .cases .container .part-xl-2.no-gutter { width: calc(((100% - (0px * (12 - 1))) / 12) * 2 + (0px * (2 - 1))); } .cases .container .part-xl-3:not(.no-gutter) { width: calc(((100% - (24px * (12 - 1))) / 12) * 3 + (24px * (3 - 1))); } .cases .container .part-xl-3.no-gutter { width: calc(((100% - (0px * (12 - 1))) / 12) * 3 + (0px * (3 - 1))); } .cases .container .part-xl-4:not(.no-gutter) { width: calc(((100% - (24px * (12 - 1))) / 12) * 4 + (24px * (4 - 1))); } .cases .container .part-xl-4.no-gutter { width: calc(((100% - (0px * (12 - 1))) / 12) * 4 + (0px * (4 - 1))); } .cases .container .part-xl-5:not(.no-gutter) { width: calc(((100% - (24px * (12 - 1))) / 12) * 5 + (24px * (5 - 1))); } .cases .container .part-xl-5.no-gutter { width: calc(((100% - (0px * (12 - 1))) / 12) * 5 + (0px * (5 - 1))); } .cases .container .part-xl-6:not(.no-gutter) { width: calc(((100% - (24px * (12 - 1))) / 12) * 6 + (24px * (6 - 1))); } .cases .container .part-xl-6.no-gutter { width: calc(((100% - (0px * (12 - 1))) / 12) * 6 + (0px * (6 - 1))); } .cases .container .part-xl-7:not(.no-gutter) { width: calc(((100% - (24px * (12 - 1))) / 12) * 7 + (24px * (7 - 1))); } .cases .container .part-xl-7.no-gutter { width: calc(((100% - (0px * (12 - 1))) / 12) * 7 + (0px * (7 - 1))); } .cases .container .part-xl-8:not(.no-gutter) { width: calc(((100% - (24px * (12 - 1))) / 12) * 8 + (24px * (8 - 1))); } .cases .container .part-xl-8.no-gutter { width: calc(((100% - (0px * (12 - 1))) / 12) * 8 + (0px * (8 - 1))); } .cases .container .part-xl-9:not(.no-gutter) { width: calc(((100% - (24px * (12 - 1))) / 12) * 9 + (24px * (9 - 1))); } .cases .container .part-xl-9.no-gutter { width: calc(((100% - (0px * (12 - 1))) / 12) * 9 + (0px * (9 - 1))); } .cases .container .part-xl-10:not(.no-gutter) { width: calc(((100% - (24px * (12 - 1))) / 12) * 10 + (24px * (10 - 1))); } .cases .container .part-xl-10.no-gutter { width: calc(((100% - (0px * (12 - 1))) / 12) * 10 + (0px * (10 - 1))); } .cases .container .part-xl-11:not(.no-gutter) { width: calc(((100% - (24px * (12 - 1))) / 12) * 11 + (24px * (11 - 1))); } .cases .container .part-xl-11.no-gutter { width: calc(((100% - (0px * (12 - 1))) / 12) * 11 + (0px * (11 - 1))); } .cases .container .part-xl-12:not(.no-gutter) { width: calc(((100% - (24px * (12 - 1))) / 12) * 12 + (24px * (12 - 1))); } .cases .container .part-xl-12.no-gutter { width: calc(((100% - (0px * (12 - 1))) / 12) * 12 + (0px * (12 - 1))); } } @media (max-width: 1024px) { .cases .container .part-l-1:not(.no-gutter) { width: calc(((100% - (16px * (8 - 1))) / 8) * 1 + (16px * (1 - 1))); } .cases .container .part-l-1.no-gutter { width: calc(((100% - (0px * (8 - 1))) / 8) * 1 + (0px * (1 - 1))); } .cases .container .part-l-2:not(.no-gutter) { width: calc(((100% - (16px * (8 - 1))) / 8) * 2 + (16px * (2 - 1))); } .cases .container .part-l-2.no-gutter { width: calc(((100% - (0px * (8 - 1))) / 8) * 2 + (0px * (2 - 1))); } .cases .container .part-l-3:not(.no-gutter) { width: calc(((100% - (16px * (8 - 1))) / 8) * 3 + (16px * (3 - 1))); } .cases .container .part-l-3.no-gutter { width: calc(((100% - (0px * (8 - 1))) / 8) * 3 + (0px * (3 - 1))); } .cases .container .part-l-4:not(.no-gutter) { width: calc(((100% - (16px * (8 - 1))) / 8) * 4 + (16px * (4 - 1))); } .cases .container .part-l-4.no-gutter { width: calc(((100% - (0px * (8 - 1))) / 8) * 4 + (0px * (4 - 1))); } .cases .container .part-l-5:not(.no-gutter) { width: calc(((100% - (16px * (8 - 1))) / 8) * 5 + (16px * (5 - 1))); } .cases .container .part-l-5.no-gutter { width: calc(((100% - (0px * (8 - 1))) / 8) * 5 + (0px * (5 - 1))); } .cases .container .part-l-6:not(.no-gutter) { width: calc(((100% - (16px * (8 - 1))) / 8) * 6 + (16px * (6 - 1))); } .cases .container .part-l-6.no-gutter { width: calc(((100% - (0px * (8 - 1))) / 8) * 6 + (0px * (6 - 1))); } .cases .container .part-l-7:not(.no-gutter) { width: calc(((100% - (16px * (8 - 1))) / 8) * 7 + (16px * (7 - 1))); } .cases .container .part-l-7.no-gutter { width: calc(((100% - (0px * (8 - 1))) / 8) * 7 + (0px * (7 - 1))); } .cases .container .part-l-8:not(.no-gutter) { width: calc(((100% - (16px * (8 - 1))) / 8) * 8 + (16px * (8 - 1))); } .cases .container .part-l-8.no-gutter { width: calc(((100% - (0px * (8 - 1))) / 8) * 8 + (0px * (8 - 1))); } } @media (max-width: 768px) { .cases .container .part-m-1:not(.no-gutter) { width: calc(((100% - (14px * (8 - 1))) / 8) * 1 + (14px * (1 - 1))); } .cases .container .part-m-1.no-gutter { width: calc(((100% - (0px * (8 - 1))) / 8) * 1 + (0px * (1 - 1))); } .cases .container .part-m-2:not(.no-gutter) { width: calc(((100% - (14px * (8 - 1))) / 8) * 2 + (14px * (2 - 1))); } .cases .container .part-m-2.no-gutter { width: calc(((100% - (0px * (8 - 1))) / 8) * 2 + (0px * (2 - 1))); } .cases .container .part-m-3:not(.no-gutter) { width: calc(((100% - (14px * (8 - 1))) / 8) * 3 + (14px * (3 - 1))); } .cases .container .part-m-3.no-gutter { width: calc(((100% - (0px * (8 - 1))) / 8) * 3 + (0px * (3 - 1))); } .cases .container .part-m-4:not(.no-gutter) { width: calc(((100% - (14px * (8 - 1))) / 8) * 4 + (14px * (4 - 1))); } .cases .container .part-m-4.no-gutter { width: calc(((100% - (0px * (8 - 1))) / 8) * 4 + (0px * (4 - 1))); } .cases .container .part-m-5:not(.no-gutter) { width: calc(((100% - (14px * (8 - 1))) / 8) * 5 + (14px * (5 - 1))); } .cases .container .part-m-5.no-gutter { width: calc(((100% - (0px * (8 - 1))) / 8) * 5 + (0px * (5 - 1))); } .cases .container .part-m-6:not(.no-gutter) { width: calc(((100% - (14px * (8 - 1))) / 8) * 6 + (14px * (6 - 1))); } .cases .container .part-m-6.no-gutter { width: calc(((100% - (0px * (8 - 1))) / 8) * 6 + (0px * (6 - 1))); } .cases .container .part-m-7:not(.no-gutter) { width: calc(((100% - (14px * (8 - 1))) / 8) * 7 + (14px * (7 - 1))); } .cases .container .part-m-7.no-gutter { width: calc(((100% - (0px * (8 - 1))) / 8) * 7 + (0px * (7 - 1))); } .cases .container .part-m-8:not(.no-gutter) { width: calc(((100% - (14px * (8 - 1))) / 8) * 8 + (14px * (8 - 1))); } .cases .container .part-m-8.no-gutter { width: calc(((100% - (0px * (8 - 1))) / 8) * 8 + (0px * (8 - 1))); } } @media (max-width: 576px) { .cases .container .part-s-1:not(.no-gutter) { width: calc(((100% - (10px * (4 - 1))) / 4) * 1 + (10px * (1 - 1))); } .cases .container .part-s-1.no-gutter { width: calc(((100% - (0px * (4 - 1))) / 4) * 1 + (0px * (1 - 1))); } .cases .container .part-s-2:not(.no-gutter) { width: calc(((100% - (10px * (4 - 1))) / 4) * 2 + (10px * (2 - 1))); } .cases .container .part-s-2.no-gutter { width: calc(((100% - (0px * (4 - 1))) / 4) * 2 + (0px * (2 - 1))); } .cases .container .part-s-3:not(.no-gutter) { width: calc(((100% - (10px * (4 - 1))) / 4) * 3 + (10px * (3 - 1))); } .cases .container .part-s-3.no-gutter { width: calc(((100% - (0px * (4 - 1))) / 4) * 3 + (0px * (3 - 1))); } .cases .container .part-s-4:not(.no-gutter) { width: calc(((100% - (10px * (4 - 1))) / 4) * 4 + (10px * (4 - 1))); } .cases .container .part-s-4.no-gutter { width: calc(((100% - (0px * (4 - 1))) / 4) * 4 + (0px * (4 - 1))); } } @media (max-width: 375px) { .cases .container .part-xs-1:not(.no-gutter) { width: calc(((100% - (10px * (4 - 1))) / 4) * 1 + (10px * (1 - 1))); } .cases .container .part-xs-1.no-gutter { width: calc(((100% - (0px * (4 - 1))) / 4) * 1 + (0px * (1 - 1))); } .cases .container .part-xs-2:not(.no-gutter) { width: calc(((100% - (10px * (4 - 1))) / 4) * 2 + (10px * (2 - 1))); } .cases .container .part-xs-2.no-gutter { width: calc(((100% - (0px * (4 - 1))) / 4) * 2 + (0px * (2 - 1))); } .cases .container .part-xs-3:not(.no-gutter) { width: calc(((100% - (10px * (4 - 1))) / 4) * 3 + (10px * (3 - 1))); } .cases .container .part-xs-3.no-gutter { width: calc(((100% - (0px * (4 - 1))) / 4) * 3 + (0px * (3 - 1))); } .cases .container .part-xs-4:not(.no-gutter) { width: calc(((100% - (10px * (4 - 1))) / 4) * 4 + (10px * (4 - 1))); } .cases .container .part-xs-4.no-gutter { width: calc(((100% - (0px * (4 - 1))) / 4) * 4 + (0px * (4 - 1))); } } .cases .container .part-top-0 { margin-top: 0px; } .cases .container .part-left-0 { margin-left: 0px; } .cases .container .part-right-0 { margin-right: 0px; } .cases .container .part-bottom-0 { margin-bottom: calc(0px + 50px); } .cases .container .part-top-1 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 1 + (24px * (1 - 1))); } .cases .container .part-left-1 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 1 + (24px * (1 - 1))); } .cases .container .part-right-1 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 1 + (24px * (1 - 1))); } .cases .container .part-bottom-1 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 1 + (24px * (1 - 1))) + 50px); } .cases .container .part-top-2 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 2 + (24px * (2 - 1))); } .cases .container .part-left-2 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 2 + (24px * (2 - 1))); } .cases .container .part-right-2 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 2 + (24px * (2 - 1))); } .cases .container .part-bottom-2 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 2 + (24px * (2 - 1))) + 50px); } .cases .container .part-top-3 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 3 + (24px * (3 - 1))); } .cases .container .part-left-3 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 3 + (24px * (3 - 1))); } .cases .container .part-right-3 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 3 + (24px * (3 - 1))); } .cases .container .part-bottom-3 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 3 + (24px * (3 - 1))) + 50px); } .cases .container .part-top-4 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 4 + (24px * (4 - 1))); } .cases .container .part-left-4 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 4 + (24px * (4 - 1))); } .cases .container .part-right-4 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 4 + (24px * (4 - 1))); } .cases .container .part-bottom-4 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 4 + (24px * (4 - 1))) + 50px); } .cases .container .part-top-5 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 5 + (24px * (5 - 1))); } .cases .container .part-left-5 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 5 + (24px * (5 - 1))); } .cases .container .part-right-5 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 5 + (24px * (5 - 1))); } .cases .container .part-bottom-5 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 5 + (24px * (5 - 1))) + 50px); } .cases .container .part-top-6 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 6 + (24px * (6 - 1))); } .cases .container .part-left-6 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 6 + (24px * (6 - 1))); } .cases .container .part-right-6 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 6 + (24px * (6 - 1))); } .cases .container .part-bottom-6 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 6 + (24px * (6 - 1))) + 50px); } .cases .container .part-top-7 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 7 + (24px * (7 - 1))); } .cases .container .part-left-7 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 7 + (24px * (7 - 1))); } .cases .container .part-right-7 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 7 + (24px * (7 - 1))); } .cases .container .part-bottom-7 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 7 + (24px * (7 - 1))) + 50px); } .cases .container .part-top-8 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 8 + (24px * (8 - 1))); } .cases .container .part-left-8 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 8 + (24px * (8 - 1))); } .cases .container .part-right-8 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 8 + (24px * (8 - 1))); } .cases .container .part-bottom-8 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 8 + (24px * (8 - 1))) + 50px); } .cases .container .part-top-9 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 9 + (24px * (9 - 1))); } .cases .container .part-left-9 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 9 + (24px * (9 - 1))); } .cases .container .part-right-9 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 9 + (24px * (9 - 1))); } .cases .container .part-bottom-9 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 9 + (24px * (9 - 1))) + 50px); } .cases .container .part-top-10 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 10 + (24px * (10 - 1))); } .cases .container .part-left-10 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 10 + (24px * (10 - 1))); } .cases .container .part-right-10 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 10 + (24px * (10 - 1))); } .cases .container .part-bottom-10 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 10 + (24px * (10 - 1))) + 50px); } .cases .container .part-top-11 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 11 + (24px * (11 - 1))); } .cases .container .part-left-11 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 11 + (24px * (11 - 1))); } .cases .container .part-right-11 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 11 + (24px * (11 - 1))); } .cases .container .part-bottom-11 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 11 + (24px * (11 - 1))) + 50px); } .cases .container .part-top-12 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 12 + (24px * (12 - 1))); } .cases .container .part-left-12 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 12 + (24px * (12 - 1))); } .cases .container .part-right-12 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 12 + (24px * (12 - 1))); } .cases .container .part-bottom-12 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 12 + (24px * (12 - 1))) + 50px); } @media (max-width: 1024px) { .cases .container .part-top-l-0 { margin-top: 0px; } .cases .container .part-left-l-0 { margin-left: 0px; } .cases .container .part-right-l-0 { margin-right: 0px; } .cases .container .part-bottom-l-0 { margin-bottom: calc(0px + 50px); } .cases .container .part-top-l-1 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 1 + (24px * (1 - 1))); } .cases .container .part-left-l-1 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 1 + (24px * (1 - 1))); } .cases .container .part-right-l-1 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 1 + (24px * (1 - 1))); } .cases .container .part-bottom-l-1 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 1 + (24px * (1 - 1))) + 50px); } .cases .container .part-top-l-2 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 2 + (24px * (2 - 1))); } .cases .container .part-left-l-2 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 2 + (24px * (2 - 1))); } .cases .container .part-right-l-2 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 2 + (24px * (2 - 1))); } .cases .container .part-bottom-l-2 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 2 + (24px * (2 - 1))) + 50px); } .cases .container .part-top-l-3 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 3 + (24px * (3 - 1))); } .cases .container .part-left-l-3 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 3 + (24px * (3 - 1))); } .cases .container .part-right-l-3 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 3 + (24px * (3 - 1))); } .cases .container .part-bottom-l-3 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 3 + (24px * (3 - 1))) + 50px); } .cases .container .part-top-l-4 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 4 + (24px * (4 - 1))); } .cases .container .part-left-l-4 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 4 + (24px * (4 - 1))); } .cases .container .part-right-l-4 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 4 + (24px * (4 - 1))); } .cases .container .part-bottom-l-4 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 4 + (24px * (4 - 1))) + 50px); } .cases .container .part-top-l-5 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 5 + (24px * (5 - 1))); } .cases .container .part-left-l-5 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 5 + (24px * (5 - 1))); } .cases .container .part-right-l-5 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 5 + (24px * (5 - 1))); } .cases .container .part-bottom-l-5 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 5 + (24px * (5 - 1))) + 50px); } .cases .container .part-top-l-6 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 6 + (24px * (6 - 1))); } .cases .container .part-left-l-6 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 6 + (24px * (6 - 1))); } .cases .container .part-right-l-6 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 6 + (24px * (6 - 1))); } .cases .container .part-bottom-l-6 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 6 + (24px * (6 - 1))) + 50px); } .cases .container .part-top-l-7 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 7 + (24px * (7 - 1))); } .cases .container .part-left-l-7 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 7 + (24px * (7 - 1))); } .cases .container .part-right-l-7 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 7 + (24px * (7 - 1))); } .cases .container .part-bottom-l-7 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 7 + (24px * (7 - 1))) + 50px); } .cases .container .part-top-l-8 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 8 + (24px * (8 - 1))); } .cases .container .part-left-l-8 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 8 + (24px * (8 - 1))); } .cases .container .part-right-l-8 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 8 + (24px * (8 - 1))); } .cases .container .part-bottom-l-8 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 8 + (24px * (8 - 1))) + 50px); } .cases .container .part-top-l-9 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 9 + (24px * (9 - 1))); } .cases .container .part-left-l-9 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 9 + (24px * (9 - 1))); } .cases .container .part-right-l-9 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 9 + (24px * (9 - 1))); } .cases .container .part-bottom-l-9 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 9 + (24px * (9 - 1))) + 50px); } .cases .container .part-top-l-10 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 10 + (24px * (10 - 1))); } .cases .container .part-left-l-10 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 10 + (24px * (10 - 1))); } .cases .container .part-right-l-10 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 10 + (24px * (10 - 1))); } .cases .container .part-bottom-l-10 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 10 + (24px * (10 - 1))) + 50px); } .cases .container .part-top-l-11 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 11 + (24px * (11 - 1))); } .cases .container .part-left-l-11 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 11 + (24px * (11 - 1))); } .cases .container .part-right-l-11 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 11 + (24px * (11 - 1))); } .cases .container .part-bottom-l-11 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 11 + (24px * (11 - 1))) + 50px); } .cases .container .part-top-l-12 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 12 + (24px * (12 - 1))); } .cases .container .part-left-l-12 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 12 + (24px * (12 - 1))); } .cases .container .part-right-l-12 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 12 + (24px * (12 - 1))); } .cases .container .part-bottom-l-12 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 12 + (24px * (12 - 1))) + 50px); } } @media (max-width: 768px) { .cases .container .part-top-m-0 { margin-top: 0px; } .cases .container .part-left-m-0 { margin-left: 0px; } .cases .container .part-right-m-0 { margin-right: 0px; } .cases .container .part-bottom-m-0 { margin-bottom: calc(0px + 50px); } .cases .container .part-top-m-1 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 1 + (24px * (1 - 1))); } .cases .container .part-left-m-1 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 1 + (24px * (1 - 1))); } .cases .container .part-right-m-1 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 1 + (24px * (1 - 1))); } .cases .container .part-bottom-m-1 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 1 + (24px * (1 - 1))) + 50px); } .cases .container .part-top-m-2 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 2 + (24px * (2 - 1))); } .cases .container .part-left-m-2 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 2 + (24px * (2 - 1))); } .cases .container .part-right-m-2 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 2 + (24px * (2 - 1))); } .cases .container .part-bottom-m-2 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 2 + (24px * (2 - 1))) + 50px); } .cases .container .part-top-m-3 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 3 + (24px * (3 - 1))); } .cases .container .part-left-m-3 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 3 + (24px * (3 - 1))); } .cases .container .part-right-m-3 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 3 + (24px * (3 - 1))); } .cases .container .part-bottom-m-3 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 3 + (24px * (3 - 1))) + 50px); } .cases .container .part-top-m-4 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 4 + (24px * (4 - 1))); } .cases .container .part-left-m-4 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 4 + (24px * (4 - 1))); } .cases .container .part-right-m-4 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 4 + (24px * (4 - 1))); } .cases .container .part-bottom-m-4 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 4 + (24px * (4 - 1))) + 50px); } .cases .container .part-top-m-5 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 5 + (24px * (5 - 1))); } .cases .container .part-left-m-5 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 5 + (24px * (5 - 1))); } .cases .container .part-right-m-5 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 5 + (24px * (5 - 1))); } .cases .container .part-bottom-m-5 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 5 + (24px * (5 - 1))) + 50px); } .cases .container .part-top-m-6 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 6 + (24px * (6 - 1))); } .cases .container .part-left-m-6 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 6 + (24px * (6 - 1))); } .cases .container .part-right-m-6 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 6 + (24px * (6 - 1))); } .cases .container .part-bottom-m-6 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 6 + (24px * (6 - 1))) + 50px); } .cases .container .part-top-m-7 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 7 + (24px * (7 - 1))); } .cases .container .part-left-m-7 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 7 + (24px * (7 - 1))); } .cases .container .part-right-m-7 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 7 + (24px * (7 - 1))); } .cases .container .part-bottom-m-7 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 7 + (24px * (7 - 1))) + 50px); } .cases .container .part-top-m-8 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 8 + (24px * (8 - 1))); } .cases .container .part-left-m-8 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 8 + (24px * (8 - 1))); } .cases .container .part-right-m-8 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 8 + (24px * (8 - 1))); } .cases .container .part-bottom-m-8 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 8 + (24px * (8 - 1))) + 50px); } .cases .container .part-top-m-9 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 9 + (24px * (9 - 1))); } .cases .container .part-left-m-9 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 9 + (24px * (9 - 1))); } .cases .container .part-right-m-9 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 9 + (24px * (9 - 1))); } .cases .container .part-bottom-m-9 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 9 + (24px * (9 - 1))) + 50px); } .cases .container .part-top-m-10 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 10 + (24px * (10 - 1))); } .cases .container .part-left-m-10 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 10 + (24px * (10 - 1))); } .cases .container .part-right-m-10 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 10 + (24px * (10 - 1))); } .cases .container .part-bottom-m-10 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 10 + (24px * (10 - 1))) + 50px); } .cases .container .part-top-m-11 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 11 + (24px * (11 - 1))); } .cases .container .part-left-m-11 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 11 + (24px * (11 - 1))); } .cases .container .part-right-m-11 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 11 + (24px * (11 - 1))); } .cases .container .part-bottom-m-11 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 11 + (24px * (11 - 1))) + 50px); } .cases .container .part-top-m-12 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 12 + (24px * (12 - 1))); } .cases .container .part-left-m-12 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 12 + (24px * (12 - 1))); } .cases .container .part-right-m-12 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 12 + (24px * (12 - 1))); } .cases .container .part-bottom-m-12 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 12 + (24px * (12 - 1))) + 50px); } } @media (max-width: 576px) { .cases .container .part-top-s-0 { margin-top: 0px; } .cases .container .part-left-s-0 { margin-left: 0px; } .cases .container .part-right-s-0 { margin-right: 0px; } .cases .container .part-bottom-s-0 { margin-bottom: calc(0px + 30px); } .cases .container .part-top-s-1 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 1 + (24px * (1 - 1))); } .cases .container .part-left-s-1 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 1 + (24px * (1 - 1))); } .cases .container .part-right-s-1 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 1 + (24px * (1 - 1))); } .cases .container .part-bottom-s-1 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 1 + (24px * (1 - 1))) + 30px); } .cases .container .part-top-s-2 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 2 + (24px * (2 - 1))); } .cases .container .part-left-s-2 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 2 + (24px * (2 - 1))); } .cases .container .part-right-s-2 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 2 + (24px * (2 - 1))); } .cases .container .part-bottom-s-2 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 2 + (24px * (2 - 1))) + 30px); } .cases .container .part-top-s-3 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 3 + (24px * (3 - 1))); } .cases .container .part-left-s-3 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 3 + (24px * (3 - 1))); } .cases .container .part-right-s-3 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 3 + (24px * (3 - 1))); } .cases .container .part-bottom-s-3 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 3 + (24px * (3 - 1))) + 30px); } .cases .container .part-top-s-4 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 4 + (24px * (4 - 1))); } .cases .container .part-left-s-4 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 4 + (24px * (4 - 1))); } .cases .container .part-right-s-4 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 4 + (24px * (4 - 1))); } .cases .container .part-bottom-s-4 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 4 + (24px * (4 - 1))) + 30px); } .cases .container .part-top-s-5 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 5 + (24px * (5 - 1))); } .cases .container .part-left-s-5 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 5 + (24px * (5 - 1))); } .cases .container .part-right-s-5 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 5 + (24px * (5 - 1))); } .cases .container .part-bottom-s-5 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 5 + (24px * (5 - 1))) + 30px); } .cases .container .part-top-s-6 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 6 + (24px * (6 - 1))); } .cases .container .part-left-s-6 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 6 + (24px * (6 - 1))); } .cases .container .part-right-s-6 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 6 + (24px * (6 - 1))); } .cases .container .part-bottom-s-6 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 6 + (24px * (6 - 1))) + 30px); } .cases .container .part-top-s-7 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 7 + (24px * (7 - 1))); } .cases .container .part-left-s-7 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 7 + (24px * (7 - 1))); } .cases .container .part-right-s-7 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 7 + (24px * (7 - 1))); } .cases .container .part-bottom-s-7 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 7 + (24px * (7 - 1))) + 30px); } .cases .container .part-top-s-8 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 8 + (24px * (8 - 1))); } .cases .container .part-left-s-8 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 8 + (24px * (8 - 1))); } .cases .container .part-right-s-8 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 8 + (24px * (8 - 1))); } .cases .container .part-bottom-s-8 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 8 + (24px * (8 - 1))) + 30px); } .cases .container .part-top-s-9 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 9 + (24px * (9 - 1))); } .cases .container .part-left-s-9 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 9 + (24px * (9 - 1))); } .cases .container .part-right-s-9 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 9 + (24px * (9 - 1))); } .cases .container .part-bottom-s-9 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 9 + (24px * (9 - 1))) + 30px); } .cases .container .part-top-s-10 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 10 + (24px * (10 - 1))); } .cases .container .part-left-s-10 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 10 + (24px * (10 - 1))); } .cases .container .part-right-s-10 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 10 + (24px * (10 - 1))); } .cases .container .part-bottom-s-10 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 10 + (24px * (10 - 1))) + 30px); } .cases .container .part-top-s-11 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 11 + (24px * (11 - 1))); } .cases .container .part-left-s-11 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 11 + (24px * (11 - 1))); } .cases .container .part-right-s-11 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 11 + (24px * (11 - 1))); } .cases .container .part-bottom-s-11 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 11 + (24px * (11 - 1))) + 30px); } .cases .container .part-top-s-12 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 12 + (24px * (12 - 1))); } .cases .container .part-left-s-12 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 12 + (24px * (12 - 1))); } .cases .container .part-right-s-12 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 12 + (24px * (12 - 1))); } .cases .container .part-bottom-s-12 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 12 + (24px * (12 - 1))) + 30px); } } @media (max-width: 375px) { .cases .container .part-top-xs-0 { margin-top: 0px; } .cases .container .part-left-xs-0 { margin-left: 0px; } .cases .container .part-right-xs-0 { margin-right: 0px; } .cases .container .part-bottom-xs-0 { margin-bottom: calc(0px + 30px); } .cases .container .part-top-xs-1 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 1 + (24px * (1 - 1))); } .cases .container .part-left-xs-1 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 1 + (24px * (1 - 1))); } .cases .container .part-right-xs-1 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 1 + (24px * (1 - 1))); } .cases .container .part-bottom-xs-1 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 1 + (24px * (1 - 1))) + 30px); } .cases .container .part-top-xs-2 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 2 + (24px * (2 - 1))); } .cases .container .part-left-xs-2 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 2 + (24px * (2 - 1))); } .cases .container .part-right-xs-2 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 2 + (24px * (2 - 1))); } .cases .container .part-bottom-xs-2 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 2 + (24px * (2 - 1))) + 30px); } .cases .container .part-top-xs-3 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 3 + (24px * (3 - 1))); } .cases .container .part-left-xs-3 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 3 + (24px * (3 - 1))); } .cases .container .part-right-xs-3 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 3 + (24px * (3 - 1))); } .cases .container .part-bottom-xs-3 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 3 + (24px * (3 - 1))) + 30px); } .cases .container .part-top-xs-4 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 4 + (24px * (4 - 1))); } .cases .container .part-left-xs-4 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 4 + (24px * (4 - 1))); } .cases .container .part-right-xs-4 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 4 + (24px * (4 - 1))); } .cases .container .part-bottom-xs-4 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 4 + (24px * (4 - 1))) + 30px); } .cases .container .part-top-xs-5 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 5 + (24px * (5 - 1))); } .cases .container .part-left-xs-5 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 5 + (24px * (5 - 1))); } .cases .container .part-right-xs-5 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 5 + (24px * (5 - 1))); } .cases .container .part-bottom-xs-5 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 5 + (24px * (5 - 1))) + 30px); } .cases .container .part-top-xs-6 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 6 + (24px * (6 - 1))); } .cases .container .part-left-xs-6 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 6 + (24px * (6 - 1))); } .cases .container .part-right-xs-6 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 6 + (24px * (6 - 1))); } .cases .container .part-bottom-xs-6 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 6 + (24px * (6 - 1))) + 30px); } .cases .container .part-top-xs-7 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 7 + (24px * (7 - 1))); } .cases .container .part-left-xs-7 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 7 + (24px * (7 - 1))); } .cases .container .part-right-xs-7 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 7 + (24px * (7 - 1))); } .cases .container .part-bottom-xs-7 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 7 + (24px * (7 - 1))) + 30px); } .cases .container .part-top-xs-8 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 8 + (24px * (8 - 1))); } .cases .container .part-left-xs-8 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 8 + (24px * (8 - 1))); } .cases .container .part-right-xs-8 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 8 + (24px * (8 - 1))); } .cases .container .part-bottom-xs-8 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 8 + (24px * (8 - 1))) + 30px); } .cases .container .part-top-xs-9 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 9 + (24px * (9 - 1))); } .cases .container .part-left-xs-9 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 9 + (24px * (9 - 1))); } .cases .container .part-right-xs-9 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 9 + (24px * (9 - 1))); } .cases .container .part-bottom-xs-9 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 9 + (24px * (9 - 1))) + 30px); } .cases .container .part-top-xs-10 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 10 + (24px * (10 - 1))); } .cases .container .part-left-xs-10 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 10 + (24px * (10 - 1))); } .cases .container .part-right-xs-10 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 10 + (24px * (10 - 1))); } .cases .container .part-bottom-xs-10 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 10 + (24px * (10 - 1))) + 30px); } .cases .container .part-top-xs-11 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 11 + (24px * (11 - 1))); } .cases .container .part-left-xs-11 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 11 + (24px * (11 - 1))); } .cases .container .part-right-xs-11 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 11 + (24px * (11 - 1))); } .cases .container .part-bottom-xs-11 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 11 + (24px * (11 - 1))) + 30px); } .cases .container .part-top-xs-12 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 12 + (24px * (12 - 1))); } .cases .container .part-left-xs-12 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 12 + (24px * (12 - 1))); } .cases .container .part-right-xs-12 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 12 + (24px * (12 - 1))); } .cases .container .part-bottom-xs-12 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 12 + (24px * (12 - 1))) + 30px); } } @media (max-width: 375px) { .cases .container .part-xs-0 { display: none; } } @media (max-width: 576px) { .cases .container .part-s-0 { display: none; } } @media (max-width: 768px) { .cases .container .part-m-0 { display: none; } } @media (max-width: 1024px) { .cases .container .part-l-0 { display: none; } } @media (max-width: 1280px) { .cases .container .part-xl-0 { display: none; } } .cases .container [class*=part].-justify-start { display: flex; justify-content: flex-start; } .cases .container [class*=part].-justify-center { display: flex; justify-content: center; } .cases .container [class*=part].-justify-end { display: flex; justify-content: flex-end; } .cases .container [class*=part].-align-start { display: flex; align-items: flex-start; } .cases .container [class*=part].-align-center { display: flex; align-items: center; } .cases .container [class*=part].-align-end { display: flex; align-items: flex-end; } .cases .container [class*=part].-text-left { text-align: left; } .cases .container [class*=part].-text-center { text-align: center; } .cases .container [class*=part].-text-right { text-align: right; } .cases__item { position: relative; display: flex; align-items: center; min-height: calc(100vh - 40px); } .cases__item.-monta .cases__logo, .cases__item.-royal .cases__logo { width: 270px; } .cases__item.-kws .cases__logo { width: 110px; } .cases__item.-dhl .cases__logo { width: 280px; } .cases__item.-double .cases__logo { width: 235px; } .cases__item * { color: white; } .cases__item + .cases__item { margin-top: 60px; } @media (max-width: 1024px) { .cases__item { min-height: auto; } } .cases__inner { position: relative; display: flex; justify-content: space-between; align-items: stretch; flex-direction: row; flex-wrap: wrap; width: 100%; margin-right: auto; margin-left: auto; padding-right: 90px; padding-left: 90px; max-width: 1560px; justify-content: flex-start; flex-wrap: wrap; flex-direction: column; padding-top: 100px; padding-bottom: 100px; } .cases__inner .part-1:not(.no-gutter) { width: calc(((100% - (24px * (12 - 1))) / 12) * 1 + (24px * (1 - 1))); } .cases__inner .part-1.no-gutter { width: calc(((100% - (0px * (12 - 1))) / 12) * 1 + (0px * (1 - 1))); } .cases__inner .part-2:not(.no-gutter) { width: calc(((100% - (24px * (12 - 1))) / 12) * 2 + (24px * (2 - 1))); } .cases__inner .part-2.no-gutter { width: calc(((100% - (0px * (12 - 1))) / 12) * 2 + (0px * (2 - 1))); } .cases__inner .part-3:not(.no-gutter) { width: calc(((100% - (24px * (12 - 1))) / 12) * 3 + (24px * (3 - 1))); } .cases__inner .part-3.no-gutter { width: calc(((100% - (0px * (12 - 1))) / 12) * 3 + (0px * (3 - 1))); } .cases__inner .part-4:not(.no-gutter) { width: calc(((100% - (24px * (12 - 1))) / 12) * 4 + (24px * (4 - 1))); } .cases__inner .part-4.no-gutter { width: calc(((100% - (0px * (12 - 1))) / 12) * 4 + (0px * (4 - 1))); } .cases__inner .part-5:not(.no-gutter) { width: calc(((100% - (24px * (12 - 1))) / 12) * 5 + (24px * (5 - 1))); } .cases__inner .part-5.no-gutter { width: calc(((100% - (0px * (12 - 1))) / 12) * 5 + (0px * (5 - 1))); } .cases__inner .part-6:not(.no-gutter) { width: calc(((100% - (24px * (12 - 1))) / 12) * 6 + (24px * (6 - 1))); } .cases__inner .part-6.no-gutter { width: calc(((100% - (0px * (12 - 1))) / 12) * 6 + (0px * (6 - 1))); } .cases__inner .part-7:not(.no-gutter) { width: calc(((100% - (24px * (12 - 1))) / 12) * 7 + (24px * (7 - 1))); } .cases__inner .part-7.no-gutter { width: calc(((100% - (0px * (12 - 1))) / 12) * 7 + (0px * (7 - 1))); } .cases__inner .part-8:not(.no-gutter) { width: calc(((100% - (24px * (12 - 1))) / 12) * 8 + (24px * (8 - 1))); } .cases__inner .part-8.no-gutter { width: calc(((100% - (0px * (12 - 1))) / 12) * 8 + (0px * (8 - 1))); } .cases__inner .part-9:not(.no-gutter) { width: calc(((100% - (24px * (12 - 1))) / 12) * 9 + (24px * (9 - 1))); } .cases__inner .part-9.no-gutter { width: calc(((100% - (0px * (12 - 1))) / 12) * 9 + (0px * (9 - 1))); } .cases__inner .part-10:not(.no-gutter) { width: calc(((100% - (24px * (12 - 1))) / 12) * 10 + (24px * (10 - 1))); } .cases__inner .part-10.no-gutter { width: calc(((100% - (0px * (12 - 1))) / 12) * 10 + (0px * (10 - 1))); } .cases__inner .part-11:not(.no-gutter) { width: calc(((100% - (24px * (12 - 1))) / 12) * 11 + (24px * (11 - 1))); } .cases__inner .part-11.no-gutter { width: calc(((100% - (0px * (12 - 1))) / 12) * 11 + (0px * (11 - 1))); } .cases__inner .part-12:not(.no-gutter) { width: calc(((100% - (24px * (12 - 1))) / 12) * 12 + (24px * (12 - 1))); } .cases__inner .part-12.no-gutter { width: calc(((100% - (0px * (12 - 1))) / 12) * 12 + (0px * (12 - 1))); } @media (max-width: 1280px) { .cases__inner .part-xl-1:not(.no-gutter) { width: calc(((100% - (24px * (12 - 1))) / 12) * 1 + (24px * (1 - 1))); } .cases__inner .part-xl-1.no-gutter { width: calc(((100% - (0px * (12 - 1))) / 12) * 1 + (0px * (1 - 1))); } .cases__inner .part-xl-2:not(.no-gutter) { width: calc(((100% - (24px * (12 - 1))) / 12) * 2 + (24px * (2 - 1))); } .cases__inner .part-xl-2.no-gutter { width: calc(((100% - (0px * (12 - 1))) / 12) * 2 + (0px * (2 - 1))); } .cases__inner .part-xl-3:not(.no-gutter) { width: calc(((100% - (24px * (12 - 1))) / 12) * 3 + (24px * (3 - 1))); } .cases__inner .part-xl-3.no-gutter { width: calc(((100% - (0px * (12 - 1))) / 12) * 3 + (0px * (3 - 1))); } .cases__inner .part-xl-4:not(.no-gutter) { width: calc(((100% - (24px * (12 - 1))) / 12) * 4 + (24px * (4 - 1))); } .cases__inner .part-xl-4.no-gutter { width: calc(((100% - (0px * (12 - 1))) / 12) * 4 + (0px * (4 - 1))); } .cases__inner .part-xl-5:not(.no-gutter) { width: calc(((100% - (24px * (12 - 1))) / 12) * 5 + (24px * (5 - 1))); } .cases__inner .part-xl-5.no-gutter { width: calc(((100% - (0px * (12 - 1))) / 12) * 5 + (0px * (5 - 1))); } .cases__inner .part-xl-6:not(.no-gutter) { width: calc(((100% - (24px * (12 - 1))) / 12) * 6 + (24px * (6 - 1))); } .cases__inner .part-xl-6.no-gutter { width: calc(((100% - (0px * (12 - 1))) / 12) * 6 + (0px * (6 - 1))); } .cases__inner .part-xl-7:not(.no-gutter) { width: calc(((100% - (24px * (12 - 1))) / 12) * 7 + (24px * (7 - 1))); } .cases__inner .part-xl-7.no-gutter { width: calc(((100% - (0px * (12 - 1))) / 12) * 7 + (0px * (7 - 1))); } .cases__inner .part-xl-8:not(.no-gutter) { width: calc(((100% - (24px * (12 - 1))) / 12) * 8 + (24px * (8 - 1))); } .cases__inner .part-xl-8.no-gutter { width: calc(((100% - (0px * (12 - 1))) / 12) * 8 + (0px * (8 - 1))); } .cases__inner .part-xl-9:not(.no-gutter) { width: calc(((100% - (24px * (12 - 1))) / 12) * 9 + (24px * (9 - 1))); } .cases__inner .part-xl-9.no-gutter { width: calc(((100% - (0px * (12 - 1))) / 12) * 9 + (0px * (9 - 1))); } .cases__inner .part-xl-10:not(.no-gutter) { width: calc(((100% - (24px * (12 - 1))) / 12) * 10 + (24px * (10 - 1))); } .cases__inner .part-xl-10.no-gutter { width: calc(((100% - (0px * (12 - 1))) / 12) * 10 + (0px * (10 - 1))); } .cases__inner .part-xl-11:not(.no-gutter) { width: calc(((100% - (24px * (12 - 1))) / 12) * 11 + (24px * (11 - 1))); } .cases__inner .part-xl-11.no-gutter { width: calc(((100% - (0px * (12 - 1))) / 12) * 11 + (0px * (11 - 1))); } .cases__inner .part-xl-12:not(.no-gutter) { width: calc(((100% - (24px * (12 - 1))) / 12) * 12 + (24px * (12 - 1))); } .cases__inner .part-xl-12.no-gutter { width: calc(((100% - (0px * (12 - 1))) / 12) * 12 + (0px * (12 - 1))); } } @media (max-width: 1024px) { .cases__inner .part-l-1:not(.no-gutter) { width: calc(((100% - (16px * (8 - 1))) / 8) * 1 + (16px * (1 - 1))); } .cases__inner .part-l-1.no-gutter { width: calc(((100% - (0px * (8 - 1))) / 8) * 1 + (0px * (1 - 1))); } .cases__inner .part-l-2:not(.no-gutter) { width: calc(((100% - (16px * (8 - 1))) / 8) * 2 + (16px * (2 - 1))); } .cases__inner .part-l-2.no-gutter { width: calc(((100% - (0px * (8 - 1))) / 8) * 2 + (0px * (2 - 1))); } .cases__inner .part-l-3:not(.no-gutter) { width: calc(((100% - (16px * (8 - 1))) / 8) * 3 + (16px * (3 - 1))); } .cases__inner .part-l-3.no-gutter { width: calc(((100% - (0px * (8 - 1))) / 8) * 3 + (0px * (3 - 1))); } .cases__inner .part-l-4:not(.no-gutter) { width: calc(((100% - (16px * (8 - 1))) / 8) * 4 + (16px * (4 - 1))); } .cases__inner .part-l-4.no-gutter { width: calc(((100% - (0px * (8 - 1))) / 8) * 4 + (0px * (4 - 1))); } .cases__inner .part-l-5:not(.no-gutter) { width: calc(((100% - (16px * (8 - 1))) / 8) * 5 + (16px * (5 - 1))); } .cases__inner .part-l-5.no-gutter { width: calc(((100% - (0px * (8 - 1))) / 8) * 5 + (0px * (5 - 1))); } .cases__inner .part-l-6:not(.no-gutter) { width: calc(((100% - (16px * (8 - 1))) / 8) * 6 + (16px * (6 - 1))); } .cases__inner .part-l-6.no-gutter { width: calc(((100% - (0px * (8 - 1))) / 8) * 6 + (0px * (6 - 1))); } .cases__inner .part-l-7:not(.no-gutter) { width: calc(((100% - (16px * (8 - 1))) / 8) * 7 + (16px * (7 - 1))); } .cases__inner .part-l-7.no-gutter { width: calc(((100% - (0px * (8 - 1))) / 8) * 7 + (0px * (7 - 1))); } .cases__inner .part-l-8:not(.no-gutter) { width: calc(((100% - (16px * (8 - 1))) / 8) * 8 + (16px * (8 - 1))); } .cases__inner .part-l-8.no-gutter { width: calc(((100% - (0px * (8 - 1))) / 8) * 8 + (0px * (8 - 1))); } } @media (max-width: 768px) { .cases__inner .part-m-1:not(.no-gutter) { width: calc(((100% - (14px * (8 - 1))) / 8) * 1 + (14px * (1 - 1))); } .cases__inner .part-m-1.no-gutter { width: calc(((100% - (0px * (8 - 1))) / 8) * 1 + (0px * (1 - 1))); } .cases__inner .part-m-2:not(.no-gutter) { width: calc(((100% - (14px * (8 - 1))) / 8) * 2 + (14px * (2 - 1))); } .cases__inner .part-m-2.no-gutter { width: calc(((100% - (0px * (8 - 1))) / 8) * 2 + (0px * (2 - 1))); } .cases__inner .part-m-3:not(.no-gutter) { width: calc(((100% - (14px * (8 - 1))) / 8) * 3 + (14px * (3 - 1))); } .cases__inner .part-m-3.no-gutter { width: calc(((100% - (0px * (8 - 1))) / 8) * 3 + (0px * (3 - 1))); } .cases__inner .part-m-4:not(.no-gutter) { width: calc(((100% - (14px * (8 - 1))) / 8) * 4 + (14px * (4 - 1))); } .cases__inner .part-m-4.no-gutter { width: calc(((100% - (0px * (8 - 1))) / 8) * 4 + (0px * (4 - 1))); } .cases__inner .part-m-5:not(.no-gutter) { width: calc(((100% - (14px * (8 - 1))) / 8) * 5 + (14px * (5 - 1))); } .cases__inner .part-m-5.no-gutter { width: calc(((100% - (0px * (8 - 1))) / 8) * 5 + (0px * (5 - 1))); } .cases__inner .part-m-6:not(.no-gutter) { width: calc(((100% - (14px * (8 - 1))) / 8) * 6 + (14px * (6 - 1))); } .cases__inner .part-m-6.no-gutter { width: calc(((100% - (0px * (8 - 1))) / 8) * 6 + (0px * (6 - 1))); } .cases__inner .part-m-7:not(.no-gutter) { width: calc(((100% - (14px * (8 - 1))) / 8) * 7 + (14px * (7 - 1))); } .cases__inner .part-m-7.no-gutter { width: calc(((100% - (0px * (8 - 1))) / 8) * 7 + (0px * (7 - 1))); } .cases__inner .part-m-8:not(.no-gutter) { width: calc(((100% - (14px * (8 - 1))) / 8) * 8 + (14px * (8 - 1))); } .cases__inner .part-m-8.no-gutter { width: calc(((100% - (0px * (8 - 1))) / 8) * 8 + (0px * (8 - 1))); } } @media (max-width: 576px) { .cases__inner .part-s-1:not(.no-gutter) { width: calc(((100% - (10px * (4 - 1))) / 4) * 1 + (10px * (1 - 1))); } .cases__inner .part-s-1.no-gutter { width: calc(((100% - (0px * (4 - 1))) / 4) * 1 + (0px * (1 - 1))); } .cases__inner .part-s-2:not(.no-gutter) { width: calc(((100% - (10px * (4 - 1))) / 4) * 2 + (10px * (2 - 1))); } .cases__inner .part-s-2.no-gutter { width: calc(((100% - (0px * (4 - 1))) / 4) * 2 + (0px * (2 - 1))); } .cases__inner .part-s-3:not(.no-gutter) { width: calc(((100% - (10px * (4 - 1))) / 4) * 3 + (10px * (3 - 1))); } .cases__inner .part-s-3.no-gutter { width: calc(((100% - (0px * (4 - 1))) / 4) * 3 + (0px * (3 - 1))); } .cases__inner .part-s-4:not(.no-gutter) { width: calc(((100% - (10px * (4 - 1))) / 4) * 4 + (10px * (4 - 1))); } .cases__inner .part-s-4.no-gutter { width: calc(((100% - (0px * (4 - 1))) / 4) * 4 + (0px * (4 - 1))); } } @media (max-width: 375px) { .cases__inner .part-xs-1:not(.no-gutter) { width: calc(((100% - (10px * (4 - 1))) / 4) * 1 + (10px * (1 - 1))); } .cases__inner .part-xs-1.no-gutter { width: calc(((100% - (0px * (4 - 1))) / 4) * 1 + (0px * (1 - 1))); } .cases__inner .part-xs-2:not(.no-gutter) { width: calc(((100% - (10px * (4 - 1))) / 4) * 2 + (10px * (2 - 1))); } .cases__inner .part-xs-2.no-gutter { width: calc(((100% - (0px * (4 - 1))) / 4) * 2 + (0px * (2 - 1))); } .cases__inner .part-xs-3:not(.no-gutter) { width: calc(((100% - (10px * (4 - 1))) / 4) * 3 + (10px * (3 - 1))); } .cases__inner .part-xs-3.no-gutter { width: calc(((100% - (0px * (4 - 1))) / 4) * 3 + (0px * (3 - 1))); } .cases__inner .part-xs-4:not(.no-gutter) { width: calc(((100% - (10px * (4 - 1))) / 4) * 4 + (10px * (4 - 1))); } .cases__inner .part-xs-4.no-gutter { width: calc(((100% - (0px * (4 - 1))) / 4) * 4 + (0px * (4 - 1))); } } .cases__inner .part-top-0 { margin-top: 0px; } .cases__inner .part-left-0 { margin-left: 0px; } .cases__inner .part-right-0 { margin-right: 0px; } .cases__inner .part-bottom-0 { margin-bottom: calc(0px + 50px); } .cases__inner .part-top-1 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 1 + (24px * (1 - 1))); } .cases__inner .part-left-1 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 1 + (24px * (1 - 1))); } .cases__inner .part-right-1 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 1 + (24px * (1 - 1))); } .cases__inner .part-bottom-1 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 1 + (24px * (1 - 1))) + 50px); } .cases__inner .part-top-2 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 2 + (24px * (2 - 1))); } .cases__inner .part-left-2 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 2 + (24px * (2 - 1))); } .cases__inner .part-right-2 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 2 + (24px * (2 - 1))); } .cases__inner .part-bottom-2 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 2 + (24px * (2 - 1))) + 50px); } .cases__inner .part-top-3 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 3 + (24px * (3 - 1))); } .cases__inner .part-left-3 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 3 + (24px * (3 - 1))); } .cases__inner .part-right-3 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 3 + (24px * (3 - 1))); } .cases__inner .part-bottom-3 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 3 + (24px * (3 - 1))) + 50px); } .cases__inner .part-top-4 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 4 + (24px * (4 - 1))); } .cases__inner .part-left-4 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 4 + (24px * (4 - 1))); } .cases__inner .part-right-4 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 4 + (24px * (4 - 1))); } .cases__inner .part-bottom-4 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 4 + (24px * (4 - 1))) + 50px); } .cases__inner .part-top-5 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 5 + (24px * (5 - 1))); } .cases__inner .part-left-5 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 5 + (24px * (5 - 1))); } .cases__inner .part-right-5 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 5 + (24px * (5 - 1))); } .cases__inner .part-bottom-5 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 5 + (24px * (5 - 1))) + 50px); } .cases__inner .part-top-6 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 6 + (24px * (6 - 1))); } .cases__inner .part-left-6 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 6 + (24px * (6 - 1))); } .cases__inner .part-right-6 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 6 + (24px * (6 - 1))); } .cases__inner .part-bottom-6 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 6 + (24px * (6 - 1))) + 50px); } .cases__inner .part-top-7 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 7 + (24px * (7 - 1))); } .cases__inner .part-left-7 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 7 + (24px * (7 - 1))); } .cases__inner .part-right-7 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 7 + (24px * (7 - 1))); } .cases__inner .part-bottom-7 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 7 + (24px * (7 - 1))) + 50px); } .cases__inner .part-top-8 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 8 + (24px * (8 - 1))); } .cases__inner .part-left-8 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 8 + (24px * (8 - 1))); } .cases__inner .part-right-8 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 8 + (24px * (8 - 1))); } .cases__inner .part-bottom-8 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 8 + (24px * (8 - 1))) + 50px); } .cases__inner .part-top-9 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 9 + (24px * (9 - 1))); } .cases__inner .part-left-9 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 9 + (24px * (9 - 1))); } .cases__inner .part-right-9 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 9 + (24px * (9 - 1))); } .cases__inner .part-bottom-9 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 9 + (24px * (9 - 1))) + 50px); } .cases__inner .part-top-10 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 10 + (24px * (10 - 1))); } .cases__inner .part-left-10 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 10 + (24px * (10 - 1))); } .cases__inner .part-right-10 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 10 + (24px * (10 - 1))); } .cases__inner .part-bottom-10 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 10 + (24px * (10 - 1))) + 50px); } .cases__inner .part-top-11 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 11 + (24px * (11 - 1))); } .cases__inner .part-left-11 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 11 + (24px * (11 - 1))); } .cases__inner .part-right-11 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 11 + (24px * (11 - 1))); } .cases__inner .part-bottom-11 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 11 + (24px * (11 - 1))) + 50px); } .cases__inner .part-top-12 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 12 + (24px * (12 - 1))); } .cases__inner .part-left-12 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 12 + (24px * (12 - 1))); } .cases__inner .part-right-12 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 12 + (24px * (12 - 1))); } .cases__inner .part-bottom-12 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 12 + (24px * (12 - 1))) + 50px); } @media (max-width: 1024px) { .cases__inner .part-top-l-0 { margin-top: 0px; } .cases__inner .part-left-l-0 { margin-left: 0px; } .cases__inner .part-right-l-0 { margin-right: 0px; } .cases__inner .part-bottom-l-0 { margin-bottom: calc(0px + 50px); } .cases__inner .part-top-l-1 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 1 + (24px * (1 - 1))); } .cases__inner .part-left-l-1 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 1 + (24px * (1 - 1))); } .cases__inner .part-right-l-1 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 1 + (24px * (1 - 1))); } .cases__inner .part-bottom-l-1 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 1 + (24px * (1 - 1))) + 50px); } .cases__inner .part-top-l-2 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 2 + (24px * (2 - 1))); } .cases__inner .part-left-l-2 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 2 + (24px * (2 - 1))); } .cases__inner .part-right-l-2 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 2 + (24px * (2 - 1))); } .cases__inner .part-bottom-l-2 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 2 + (24px * (2 - 1))) + 50px); } .cases__inner .part-top-l-3 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 3 + (24px * (3 - 1))); } .cases__inner .part-left-l-3 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 3 + (24px * (3 - 1))); } .cases__inner .part-right-l-3 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 3 + (24px * (3 - 1))); } .cases__inner .part-bottom-l-3 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 3 + (24px * (3 - 1))) + 50px); } .cases__inner .part-top-l-4 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 4 + (24px * (4 - 1))); } .cases__inner .part-left-l-4 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 4 + (24px * (4 - 1))); } .cases__inner .part-right-l-4 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 4 + (24px * (4 - 1))); } .cases__inner .part-bottom-l-4 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 4 + (24px * (4 - 1))) + 50px); } .cases__inner .part-top-l-5 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 5 + (24px * (5 - 1))); } .cases__inner .part-left-l-5 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 5 + (24px * (5 - 1))); } .cases__inner .part-right-l-5 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 5 + (24px * (5 - 1))); } .cases__inner .part-bottom-l-5 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 5 + (24px * (5 - 1))) + 50px); } .cases__inner .part-top-l-6 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 6 + (24px * (6 - 1))); } .cases__inner .part-left-l-6 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 6 + (24px * (6 - 1))); } .cases__inner .part-right-l-6 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 6 + (24px * (6 - 1))); } .cases__inner .part-bottom-l-6 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 6 + (24px * (6 - 1))) + 50px); } .cases__inner .part-top-l-7 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 7 + (24px * (7 - 1))); } .cases__inner .part-left-l-7 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 7 + (24px * (7 - 1))); } .cases__inner .part-right-l-7 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 7 + (24px * (7 - 1))); } .cases__inner .part-bottom-l-7 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 7 + (24px * (7 - 1))) + 50px); } .cases__inner .part-top-l-8 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 8 + (24px * (8 - 1))); } .cases__inner .part-left-l-8 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 8 + (24px * (8 - 1))); } .cases__inner .part-right-l-8 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 8 + (24px * (8 - 1))); } .cases__inner .part-bottom-l-8 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 8 + (24px * (8 - 1))) + 50px); } .cases__inner .part-top-l-9 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 9 + (24px * (9 - 1))); } .cases__inner .part-left-l-9 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 9 + (24px * (9 - 1))); } .cases__inner .part-right-l-9 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 9 + (24px * (9 - 1))); } .cases__inner .part-bottom-l-9 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 9 + (24px * (9 - 1))) + 50px); } .cases__inner .part-top-l-10 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 10 + (24px * (10 - 1))); } .cases__inner .part-left-l-10 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 10 + (24px * (10 - 1))); } .cases__inner .part-right-l-10 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 10 + (24px * (10 - 1))); } .cases__inner .part-bottom-l-10 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 10 + (24px * (10 - 1))) + 50px); } .cases__inner .part-top-l-11 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 11 + (24px * (11 - 1))); } .cases__inner .part-left-l-11 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 11 + (24px * (11 - 1))); } .cases__inner .part-right-l-11 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 11 + (24px * (11 - 1))); } .cases__inner .part-bottom-l-11 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 11 + (24px * (11 - 1))) + 50px); } .cases__inner .part-top-l-12 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 12 + (24px * (12 - 1))); } .cases__inner .part-left-l-12 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 12 + (24px * (12 - 1))); } .cases__inner .part-right-l-12 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 12 + (24px * (12 - 1))); } .cases__inner .part-bottom-l-12 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 12 + (24px * (12 - 1))) + 50px); } } @media (max-width: 768px) { .cases__inner .part-top-m-0 { margin-top: 0px; } .cases__inner .part-left-m-0 { margin-left: 0px; } .cases__inner .part-right-m-0 { margin-right: 0px; } .cases__inner .part-bottom-m-0 { margin-bottom: calc(0px + 50px); } .cases__inner .part-top-m-1 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 1 + (24px * (1 - 1))); } .cases__inner .part-left-m-1 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 1 + (24px * (1 - 1))); } .cases__inner .part-right-m-1 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 1 + (24px * (1 - 1))); } .cases__inner .part-bottom-m-1 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 1 + (24px * (1 - 1))) + 50px); } .cases__inner .part-top-m-2 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 2 + (24px * (2 - 1))); } .cases__inner .part-left-m-2 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 2 + (24px * (2 - 1))); } .cases__inner .part-right-m-2 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 2 + (24px * (2 - 1))); } .cases__inner .part-bottom-m-2 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 2 + (24px * (2 - 1))) + 50px); } .cases__inner .part-top-m-3 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 3 + (24px * (3 - 1))); } .cases__inner .part-left-m-3 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 3 + (24px * (3 - 1))); } .cases__inner .part-right-m-3 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 3 + (24px * (3 - 1))); } .cases__inner .part-bottom-m-3 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 3 + (24px * (3 - 1))) + 50px); } .cases__inner .part-top-m-4 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 4 + (24px * (4 - 1))); } .cases__inner .part-left-m-4 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 4 + (24px * (4 - 1))); } .cases__inner .part-right-m-4 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 4 + (24px * (4 - 1))); } .cases__inner .part-bottom-m-4 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 4 + (24px * (4 - 1))) + 50px); } .cases__inner .part-top-m-5 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 5 + (24px * (5 - 1))); } .cases__inner .part-left-m-5 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 5 + (24px * (5 - 1))); } .cases__inner .part-right-m-5 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 5 + (24px * (5 - 1))); } .cases__inner .part-bottom-m-5 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 5 + (24px * (5 - 1))) + 50px); } .cases__inner .part-top-m-6 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 6 + (24px * (6 - 1))); } .cases__inner .part-left-m-6 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 6 + (24px * (6 - 1))); } .cases__inner .part-right-m-6 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 6 + (24px * (6 - 1))); } .cases__inner .part-bottom-m-6 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 6 + (24px * (6 - 1))) + 50px); } .cases__inner .part-top-m-7 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 7 + (24px * (7 - 1))); } .cases__inner .part-left-m-7 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 7 + (24px * (7 - 1))); } .cases__inner .part-right-m-7 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 7 + (24px * (7 - 1))); } .cases__inner .part-bottom-m-7 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 7 + (24px * (7 - 1))) + 50px); } .cases__inner .part-top-m-8 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 8 + (24px * (8 - 1))); } .cases__inner .part-left-m-8 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 8 + (24px * (8 - 1))); } .cases__inner .part-right-m-8 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 8 + (24px * (8 - 1))); } .cases__inner .part-bottom-m-8 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 8 + (24px * (8 - 1))) + 50px); } .cases__inner .part-top-m-9 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 9 + (24px * (9 - 1))); } .cases__inner .part-left-m-9 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 9 + (24px * (9 - 1))); } .cases__inner .part-right-m-9 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 9 + (24px * (9 - 1))); } .cases__inner .part-bottom-m-9 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 9 + (24px * (9 - 1))) + 50px); } .cases__inner .part-top-m-10 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 10 + (24px * (10 - 1))); } .cases__inner .part-left-m-10 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 10 + (24px * (10 - 1))); } .cases__inner .part-right-m-10 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 10 + (24px * (10 - 1))); } .cases__inner .part-bottom-m-10 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 10 + (24px * (10 - 1))) + 50px); } .cases__inner .part-top-m-11 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 11 + (24px * (11 - 1))); } .cases__inner .part-left-m-11 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 11 + (24px * (11 - 1))); } .cases__inner .part-right-m-11 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 11 + (24px * (11 - 1))); } .cases__inner .part-bottom-m-11 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 11 + (24px * (11 - 1))) + 50px); } .cases__inner .part-top-m-12 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 12 + (24px * (12 - 1))); } .cases__inner .part-left-m-12 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 12 + (24px * (12 - 1))); } .cases__inner .part-right-m-12 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 12 + (24px * (12 - 1))); } .cases__inner .part-bottom-m-12 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 12 + (24px * (12 - 1))) + 50px); } } @media (max-width: 576px) { .cases__inner .part-top-s-0 { margin-top: 0px; } .cases__inner .part-left-s-0 { margin-left: 0px; } .cases__inner .part-right-s-0 { margin-right: 0px; } .cases__inner .part-bottom-s-0 { margin-bottom: calc(0px + 30px); } .cases__inner .part-top-s-1 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 1 + (24px * (1 - 1))); } .cases__inner .part-left-s-1 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 1 + (24px * (1 - 1))); } .cases__inner .part-right-s-1 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 1 + (24px * (1 - 1))); } .cases__inner .part-bottom-s-1 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 1 + (24px * (1 - 1))) + 30px); } .cases__inner .part-top-s-2 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 2 + (24px * (2 - 1))); } .cases__inner .part-left-s-2 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 2 + (24px * (2 - 1))); } .cases__inner .part-right-s-2 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 2 + (24px * (2 - 1))); } .cases__inner .part-bottom-s-2 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 2 + (24px * (2 - 1))) + 30px); } .cases__inner .part-top-s-3 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 3 + (24px * (3 - 1))); } .cases__inner .part-left-s-3 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 3 + (24px * (3 - 1))); } .cases__inner .part-right-s-3 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 3 + (24px * (3 - 1))); } .cases__inner .part-bottom-s-3 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 3 + (24px * (3 - 1))) + 30px); } .cases__inner .part-top-s-4 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 4 + (24px * (4 - 1))); } .cases__inner .part-left-s-4 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 4 + (24px * (4 - 1))); } .cases__inner .part-right-s-4 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 4 + (24px * (4 - 1))); } .cases__inner .part-bottom-s-4 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 4 + (24px * (4 - 1))) + 30px); } .cases__inner .part-top-s-5 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 5 + (24px * (5 - 1))); } .cases__inner .part-left-s-5 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 5 + (24px * (5 - 1))); } .cases__inner .part-right-s-5 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 5 + (24px * (5 - 1))); } .cases__inner .part-bottom-s-5 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 5 + (24px * (5 - 1))) + 30px); } .cases__inner .part-top-s-6 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 6 + (24px * (6 - 1))); } .cases__inner .part-left-s-6 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 6 + (24px * (6 - 1))); } .cases__inner .part-right-s-6 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 6 + (24px * (6 - 1))); } .cases__inner .part-bottom-s-6 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 6 + (24px * (6 - 1))) + 30px); } .cases__inner .part-top-s-7 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 7 + (24px * (7 - 1))); } .cases__inner .part-left-s-7 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 7 + (24px * (7 - 1))); } .cases__inner .part-right-s-7 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 7 + (24px * (7 - 1))); } .cases__inner .part-bottom-s-7 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 7 + (24px * (7 - 1))) + 30px); } .cases__inner .part-top-s-8 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 8 + (24px * (8 - 1))); } .cases__inner .part-left-s-8 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 8 + (24px * (8 - 1))); } .cases__inner .part-right-s-8 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 8 + (24px * (8 - 1))); } .cases__inner .part-bottom-s-8 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 8 + (24px * (8 - 1))) + 30px); } .cases__inner .part-top-s-9 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 9 + (24px * (9 - 1))); } .cases__inner .part-left-s-9 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 9 + (24px * (9 - 1))); } .cases__inner .part-right-s-9 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 9 + (24px * (9 - 1))); } .cases__inner .part-bottom-s-9 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 9 + (24px * (9 - 1))) + 30px); } .cases__inner .part-top-s-10 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 10 + (24px * (10 - 1))); } .cases__inner .part-left-s-10 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 10 + (24px * (10 - 1))); } .cases__inner .part-right-s-10 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 10 + (24px * (10 - 1))); } .cases__inner .part-bottom-s-10 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 10 + (24px * (10 - 1))) + 30px); } .cases__inner .part-top-s-11 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 11 + (24px * (11 - 1))); } .cases__inner .part-left-s-11 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 11 + (24px * (11 - 1))); } .cases__inner .part-right-s-11 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 11 + (24px * (11 - 1))); } .cases__inner .part-bottom-s-11 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 11 + (24px * (11 - 1))) + 30px); } .cases__inner .part-top-s-12 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 12 + (24px * (12 - 1))); } .cases__inner .part-left-s-12 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 12 + (24px * (12 - 1))); } .cases__inner .part-right-s-12 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 12 + (24px * (12 - 1))); } .cases__inner .part-bottom-s-12 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 12 + (24px * (12 - 1))) + 30px); } } @media (max-width: 375px) { .cases__inner .part-top-xs-0 { margin-top: 0px; } .cases__inner .part-left-xs-0 { margin-left: 0px; } .cases__inner .part-right-xs-0 { margin-right: 0px; } .cases__inner .part-bottom-xs-0 { margin-bottom: calc(0px + 30px); } .cases__inner .part-top-xs-1 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 1 + (24px * (1 - 1))); } .cases__inner .part-left-xs-1 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 1 + (24px * (1 - 1))); } .cases__inner .part-right-xs-1 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 1 + (24px * (1 - 1))); } .cases__inner .part-bottom-xs-1 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 1 + (24px * (1 - 1))) + 30px); } .cases__inner .part-top-xs-2 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 2 + (24px * (2 - 1))); } .cases__inner .part-left-xs-2 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 2 + (24px * (2 - 1))); } .cases__inner .part-right-xs-2 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 2 + (24px * (2 - 1))); } .cases__inner .part-bottom-xs-2 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 2 + (24px * (2 - 1))) + 30px); } .cases__inner .part-top-xs-3 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 3 + (24px * (3 - 1))); } .cases__inner .part-left-xs-3 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 3 + (24px * (3 - 1))); } .cases__inner .part-right-xs-3 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 3 + (24px * (3 - 1))); } .cases__inner .part-bottom-xs-3 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 3 + (24px * (3 - 1))) + 30px); } .cases__inner .part-top-xs-4 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 4 + (24px * (4 - 1))); } .cases__inner .part-left-xs-4 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 4 + (24px * (4 - 1))); } .cases__inner .part-right-xs-4 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 4 + (24px * (4 - 1))); } .cases__inner .part-bottom-xs-4 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 4 + (24px * (4 - 1))) + 30px); } .cases__inner .part-top-xs-5 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 5 + (24px * (5 - 1))); } .cases__inner .part-left-xs-5 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 5 + (24px * (5 - 1))); } .cases__inner .part-right-xs-5 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 5 + (24px * (5 - 1))); } .cases__inner .part-bottom-xs-5 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 5 + (24px * (5 - 1))) + 30px); } .cases__inner .part-top-xs-6 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 6 + (24px * (6 - 1))); } .cases__inner .part-left-xs-6 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 6 + (24px * (6 - 1))); } .cases__inner .part-right-xs-6 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 6 + (24px * (6 - 1))); } .cases__inner .part-bottom-xs-6 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 6 + (24px * (6 - 1))) + 30px); } .cases__inner .part-top-xs-7 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 7 + (24px * (7 - 1))); } .cases__inner .part-left-xs-7 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 7 + (24px * (7 - 1))); } .cases__inner .part-right-xs-7 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 7 + (24px * (7 - 1))); } .cases__inner .part-bottom-xs-7 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 7 + (24px * (7 - 1))) + 30px); } .cases__inner .part-top-xs-8 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 8 + (24px * (8 - 1))); } .cases__inner .part-left-xs-8 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 8 + (24px * (8 - 1))); } .cases__inner .part-right-xs-8 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 8 + (24px * (8 - 1))); } .cases__inner .part-bottom-xs-8 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 8 + (24px * (8 - 1))) + 30px); } .cases__inner .part-top-xs-9 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 9 + (24px * (9 - 1))); } .cases__inner .part-left-xs-9 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 9 + (24px * (9 - 1))); } .cases__inner .part-right-xs-9 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 9 + (24px * (9 - 1))); } .cases__inner .part-bottom-xs-9 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 9 + (24px * (9 - 1))) + 30px); } .cases__inner .part-top-xs-10 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 10 + (24px * (10 - 1))); } .cases__inner .part-left-xs-10 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 10 + (24px * (10 - 1))); } .cases__inner .part-right-xs-10 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 10 + (24px * (10 - 1))); } .cases__inner .part-bottom-xs-10 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 10 + (24px * (10 - 1))) + 30px); } .cases__inner .part-top-xs-11 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 11 + (24px * (11 - 1))); } .cases__inner .part-left-xs-11 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 11 + (24px * (11 - 1))); } .cases__inner .part-right-xs-11 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 11 + (24px * (11 - 1))); } .cases__inner .part-bottom-xs-11 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 11 + (24px * (11 - 1))) + 30px); } .cases__inner .part-top-xs-12 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 12 + (24px * (12 - 1))); } .cases__inner .part-left-xs-12 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 12 + (24px * (12 - 1))); } .cases__inner .part-right-xs-12 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 12 + (24px * (12 - 1))); } .cases__inner .part-bottom-xs-12 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 12 + (24px * (12 - 1))) + 30px); } } @media (max-width: 375px) { .cases__inner .part-xs-0 { display: none; } } @media (max-width: 576px) { .cases__inner .part-s-0 { display: none; } } @media (max-width: 768px) { .cases__inner .part-m-0 { display: none; } } @media (max-width: 1024px) { .cases__inner .part-l-0 { display: none; } } @media (max-width: 1280px) { .cases__inner .part-xl-0 { display: none; } } .cases__inner [class*=part].-justify-start { display: flex; justify-content: flex-start; } .cases__inner [class*=part].-justify-center { display: flex; justify-content: center; } .cases__inner [class*=part].-justify-end { display: flex; justify-content: flex-end; } .cases__inner [class*=part].-align-start { display: flex; align-items: flex-start; } .cases__inner [class*=part].-align-center { display: flex; align-items: center; } .cases__inner [class*=part].-align-end { display: flex; align-items: flex-end; } .cases__inner [class*=part].-text-left { text-align: left; } .cases__inner [class*=part].-text-center { text-align: center; } .cases__inner [class*=part].-text-right { text-align: right; } @media (max-width: 768px) { .cases__inner { padding-right: 45px; padding-left: 45px; } } @media (max-width: 1024px) { .cases__inner { padding-top: 64px; padding-bottom: 64px; } } @media (max-width: 576px) { .cases__inner { padding-left: 40px; padding-right: 40px; padding-top: 39px; padding-bottom: 39px; } } .cases__image { position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; z-index: 0; margin-left: 60px; margin-right: 60px; background-size: cover; background-repeat: no-repeat; background-position: center center; width: auto; } @media (max-width: calc(1560px)) { .cases__image { margin-left: 40px; } } @media (max-width: 768px) { .cases__image { margin-left: 30px; } } @media (max-width: 576px) { .cases__image { margin-left: 15px; } } @media (max-width: calc(1560px)) { .cases__image { margin-right: 40px; } } @media (max-width: 768px) { .cases__image { margin-right: 30px; } } @media (max-width: 576px) { .cases__image { margin-right: 15px; } } .cases__image::after { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; background-image: url(/images/cases_gradient.png?ad34e976db4a80535847c280a40b2198); background-size: cover; } .cases__title { position: relative; margin-top: 40px; width: 66%; } @media (max-width: 768px) { .cases__title { width: 100%; margin-bottom: 20px; margin-top: 0; } } .cases__logo { width: 173px; -o-object-fit: contain; object-fit: contain; -o-object-position: left; object-position: left; margin-top: 40px; } @media (max-width: 576px) { .cases__logo { max-width: 130px; max-height: 80px; } } .cases__content { position: relative; margin: 0; width: 33%; } @media (max-width: 768px) { .cases__content { width: 100%; } } .cases__content p { margin-top: 90px; margin-bottom: 65px; } @media (max-width: 1024px) { .cases__content p { margin-top: 45px; margin-bottom: 36px; } } .cases__content .button, .cases__content .filter__remove, .cases__content .filter__tag { margin: 0; } .cases__details { margin-top: 70px; } .--nospace { padding-left: 60px !important; } @media (max-width: 576px) { .--nospace { padding-left: 0px !important; } } .events { -ms-overflow-style: none; scrollbar-width: none; } .events::-webkit-scrollbar { display: none; } @media (max-width: 1024px) { .events { overflow: scroll; display: flex; width: calc(100% + 180px); margin-left: calc(-90px); } } @media (max-width: 768px) { .events { width: calc(100% + 90px); margin-left: calc(-45px); } } @media (max-width: 576px) { .events { width: calc(100% + 30px); margin-left: calc(-15px); } } .events .event { border-radius: 10px; padding: 25px; border: 1px solid #DADDDF; } @media (max-width: 1024px) { .events .event { padding: 15px; min-width: 245px; width: 245px; } } @media (max-width: 576px) { .events .event { min-width: 220px; width: 220px; } } .events .event__title { color: #000; font-weight: 700; } .events .event__title + * { margin-top: 15px; } @media (max-width: 1024px) { .events .event__title + * { margin-top: 10px; } } .events .event + .event { margin-top: 20px; } @media (max-width: 1024px) { .events .event + .event { margin-top: 0; margin-left: 16px; } } @media (max-width: 1024px) { .events .event:last-child { margin-right: 90px; } } @media (max-width: 768px) { .events .event:last-child { margin-right: 45px; } } @media (max-width: 576px) { .events .event:last-child { margin-right: 15px; } } .events .block h3 { font-weight: 700; } @media (max-width: 1024px) { .events .block { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 15px; width: 245px; min-width: 245px; margin-left: 90px; } } @media (max-width: 768px) { .events .block { margin-left: 45px; } } @media (max-width: 576px) { .events .block { min-width: 220px; width: 220px; margin-left: 15px; } } @media (max-width: 1024px) { .events .block + .event { margin-left: 16px; margin-top: 0; } } .seopages { display: flex; flex-wrap: wrap; padding-top: 20px; padding-bottom: 45px; } .seopages__item { width: 25%; transition: color 0.2s ease-in-out; color: #DADDDF !important; } @media (max-width: 1024px) { .seopages__item { width: 50%; } } @media (max-width: 768px) { .seopages__item { width: 100%; } } .seopages__item:hover { color: #4A4A4A !important; } .button, .filter__remove, .filter__tag { display: inline-flex; align-items: center; padding: 11px 18px; border-radius: 10px; cursor: pointer; -webkit-appearance: none; -moz-appearance: none; appearance: none; font-family: open-sans, sans-serif; line-height: 1.55; font-size: 18px; font-weight: 400; color: #4A4A4A; color: white; line-height: 1.1; text-decoration: none; background-color: #23457c; position: relative; display: inline-flex; align-items: center; transition: opacity 0.2s ease-in-out, border-color 0.2s ease-in-out, color 0.2s ease-in-out, background-color 0.2s ease-in-out; border-radius: 10px; border: none; padding: 11px 18px; appearance: none; background-color: #B5FF00; font-family: work-sans, sans-serif; font-size: 16px; color: #23457c; white-space: nowrap; } @media (max-width: 1024px) { .button, .filter__remove, .filter__tag { font-size: 16px; } } @media (max-width: 768px) { .button, .filter__remove, .filter__tag { font-size: 16px; } } @media (max-width: 576px) { .button, .filter__remove, .filter__tag { font-size: 13px; } } .button + *, .filter__remove + *, .filter__tag + * { margin-top: 45px; } @media (max-width: 1024px) { .button + *, .filter__remove + *, .filter__tag + * { margin-top: 35px; } } @media (max-width: 768px) { .button + *, .filter__remove + *, .filter__tag + * { margin-top: 35px; } } @media (max-width: 576px) { .button + *, .filter__remove + *, .filter__tag + * { margin-top: 35px; } } .button__icon { display: block; margin-left: 15px; height: 100%; width: auto; } .button__icon rect, .button__icon circle, .button__icon ellipse, .button__icon path, .button__icon polygon, .button__icon polyline { fill: currentColor; } .button__icon.-left { margin-left: 0; margin-right: 15px; } @media (max-width: 1024px) { .button, .filter__remove, .filter__tag { border-radius: 7px; } } @media (max-width: 576px) { .button, .filter__remove, .filter__tag { border-radius: 5px; } } @media (max-width: 1024px) { .button, .filter__remove, .filter__tag { padding: 8px 10px 7px; } } @media (max-width: 576px) { .button, .filter__remove, .filter__tag { padding: 6px 10px 5px; } } .button > div, .filter__remove > div, .filter__tag > div { background-color: inherit; } .button__text { position: relative; overflow: hidden; padding: 11px 18px; color: inherit !important; } @media (max-width: 1024px) { .button__text { padding: 8px 10px 7px; font-size: 13px; } } @media (max-width: 576px) { .button__text { font-size: 11px; padding: 6px 10px 5px; } } .button__text span { display: block; transition: 0.2s ease-in-out; color: inherit !important; } .button__text span + span { transform: translate(0%, 100%); position: absolute; } .button:hover .button__text span, .filter__remove:hover .button__text span, .filter__tag:hover .button__text span { transform: translateY(-200%); } .button:hover .button__text span + span, .filter__remove:hover .button__text span + span, .filter__tag:hover .button__text span + span { transform: translate(0%, -100%); } .button:hover .button__icon, .filter__remove:hover .button__icon, .filter__tag:hover .button__icon { transform: translate(0%, 200%); } .button:hover .button__icon + .button__icon, .filter__remove:hover .button__icon + .button__icon, .filter__tag:hover .button__icon + .button__icon { transform: translate(0%, 0%); } .button__right { overflow: hidden; position: absolute; left: 100%; top: 0; border: inherit; display: flex; align-items: center; justify-content: center; border-radius: 10px; width: 40px; height: 100%; margin-left: 0 !important; background-color: inherit; } @media (max-width: 1024px) { .button__right { border-radius: 7px; } } @media (max-width: 576px) { .button__right { border-radius: 5px; } } @media (max-width: 1024px) { .button__right { width: 28px; } } @media (max-width: 576px) { .button__right { width: 25px; } } .button__icon { display: flex; align-items: center; justify-content: center; margin: 0; height: -moz-fit-content; height: fit-content; transform: translateY(0%); transition: 0.2s ease-in-out; } .button__icon + .button__icon { position: absolute; transform: translate(0%, -200%); } .button .icon, .filter__remove .icon, .filter__tag .icon, .button svg, .filter__remove svg, .filter__tag svg { width: 18px; -o-object-fit: contain; object-fit: contain; fill: currentColor; } @media (max-width: 1024px) { .button .icon, .filter__remove .icon, .filter__tag .icon, .button svg, .filter__remove svg, .filter__tag svg { width: 14px; } } @media (max-width: 576px) { .button .icon, .filter__remove .icon, .filter__tag .icon, .button svg, .filter__remove svg, .filter__tag svg { width: 12px; } } .button .icon.-play, .filter__remove .icon.-play, .filter__tag .icon.-play, .button svg.-play, .filter__remove svg.-play, .filter__tag svg.-play { width: 10px; } @media (max-width: 1024px) { .button .icon.-play, .filter__remove .icon.-play, .filter__tag .icon.-play, .button svg.-play, .filter__remove svg.-play, .filter__tag svg.-play { width: 8px; } } @media (max-width: 576px) { .button .icon.-play, .filter__remove .icon.-play, .filter__tag .icon.-play, .button svg.-play, .filter__remove svg.-play, .filter__tag svg.-play { width: 6px; } } .button .icon.-plus, .filter__remove .icon.-plus, .filter__tag .icon.-plus, .button svg.-plus, .filter__remove svg.-plus, .filter__tag svg.-plus { width: 16px; } @media (max-width: 576px) { .button .icon.-plus, .filter__remove .icon.-plus, .filter__tag .icon.-plus, .button svg.-plus, .filter__remove svg.-plus, .filter__tag svg.-plus { width: 12px; } } .button.-icon-left .icon, .-icon-left.filter__remove .icon, .-icon-left.filter__tag .icon { margin-left: 0; margin-right: 15px; } .button.-dark, .-dark.filter__remove, .-dark.filter__tag { background-color: rgba(255, 255, 255, 0.2); -webkit-backdrop-filter: blur(30px) brightness(115%); backdrop-filter: blur(30px) brightness(115%); color: white; } .button.-dark .button__icon, .-dark.filter__remove .button__icon, .-dark.filter__tag .button__icon { fill: #000; } .button.-color-white, .-color-white.filter__remove, .-color-white.filter__tag { color: white !important; } .button.-bordered, .-bordered.filter__remove, .filter__tag { border: 1px solid #DADDDF; background-color: transparent; color: #23457c; } .button.-bordered.-white, .-bordered.-white.filter__remove, .-white.filter__tag { border-color: white; color: white; } .button.-center, .-center.filter__remove, .-center.filter__tag { text-align: center; } .button:disabled, .filter__remove:disabled, .filter__tag:disabled, .button.-disabled, .-disabled.filter__remove, .-disabled.filter__tag { background-color: rgba(0, 0, 0, 0.1); } .button.-icon, .-icon.filter__remove, .-icon.filter__tag { display: flex; align-items: center; justify-content: center; width: 39px; height: 39px; padding: 0; } @media (max-width: 1024px) { .button.-icon, .-icon.filter__remove, .-icon.filter__tag { width: 29px; height: 29px; } } @media (max-width: 576px) { .button.-icon, .-icon.filter__remove, .-icon.filter__tag { width: 23px; height: 23px; } } .button.-icon svg, .-icon.filter__remove svg, .-icon.filter__tag svg { width: 30%; } .button .icon.-loading, .filter__remove .icon.-loading, .filter__tag .icon.-loading { display: none; } .button + br + .button, .filter__remove + br + .button, .button + br + .filter__remove, .filter__remove + br + .filter__remove, .filter__tag + br + .button, .filter__tag + br + .filter__remove, .button + br + .filter__tag, .filter__remove + br + .filter__tag, .filter__tag + br + .filter__tag { margin-top: 10px; } .button.-loading .icon:not(.-loading), .-loading.filter__remove .icon:not(.-loading), .-loading.filter__tag .icon:not(.-loading) { display: none; } .button.-loading .icon.-loading, .-loading.filter__remove .icon.-loading, .-loading.filter__tag .icon.-loading { display: inline-block; } .button.-loading .icon.-loading #spinner, .-loading.filter__remove .icon.-loading #spinner, .-loading.filter__tag .icon.-loading #spinner { transform-origin: center; animation-name: buttonAnimation; animation-duration: 1.2s; animation-timing-function: cubic-bezier; animation-iteration-count: infinite; } .button.-floating, .-floating.filter__remove, .-floating.filter__tag { transform: translateY(160px); z-index: 1; } @media (max-width: 1024px) { .button.-floating, .-floating.filter__remove, .-floating.filter__tag { transform: translateY(120px); } } @media (max-width: 576px) { .button.-floating, .-floating.filter__remove, .-floating.filter__tag { transform: translateY(0); } } .button .counter, .filter__remove .counter, .filter__tag .counter { display: inline; background-color: #23457c; color: #B5FF00 !important; padding: 2px 7px; border-radius: 30px; } @media (max-width: 1024px) { .button .counter, .filter__remove .counter, .filter__tag .counter { padding: 2px 5px; } } .buttons { display: flex; align-items: center; flex-wrap: wrap; margin-bottom: -20px; } @media (max-width: 1024px) { .buttons { margin-bottom: -10px; } } @media (max-width: 768px) { .buttons { margin-bottom: -10px; } } @media (max-width: 576px) { .buttons { margin-bottom: -15px; } } .buttons > * { margin-top: 0; margin-bottom: 20px; margin-right: 20px; } @media (max-width: 1024px) { .buttons > * { margin-bottom: 10px; margin-right: 10px; } } @media (max-width: 768px) { .buttons > * { margin-bottom: 10px; margin-right: 10px; } } @media (max-width: 576px) { .buttons > * { margin-bottom: 15px; margin-right: 15px; } } .buttons > *:last-child { margin-right: 0; } .buttons.-center { justify-content: center; margin-left: auto; margin-right: auto; } .tag { display: inline-block; border-radius: 5px; padding: 1px 6px 1px; background-color: rgba(255, 255, 255, 0.1); -webkit-backdrop-filter: blur(11px) brightness(115%); backdrop-filter: blur(11px) brightness(115%); font-size: 12px !important; font-weight: 600 !important; text-transform: uppercase; font-family: work-sans, sans-serif; color: #AAACB5 !important; letter-spacing: 0; } @media (max-width: 1024px) { .tag { font-size: 10px !important; } } @media (max-width: 576px) { .tag { padding: 1px 4px 0; border-radius: 3px; font-size: 8px !important; } } .tag + .tag { margin-left: 5px; } .tag.-white { border-color: white; } .tag.-grey { background-color: #DADDDF; color: #000 !important; } .tag.-color-3 { background-color: white; color: #AAACB5 !important; background-color: rgba(255, 255, 255, 0); -webkit-backdrop-filter: blur(11px) brightness(brightness(115%)); backdrop-filter: blur(11px) brightness(brightness(115%)); } .tag.-color-4 { background-color: #B5FF00; color: #23457c !important; } .tag + .-large { margin-top: 35px; } .tag + h1, .tag + h2, .tag + h3, .tag + h4, .tag + h5, .tag + h6, .tag + p { margin-top: 20px; } @media (max-width: 576px) { .tag + h1, .tag + h2, .tag + h3, .tag + h4, .tag + h5, .tag + h6, .tag + p { margin-top: 10px; } } .tag + .controls { margin-top: 10px; } .tags { display: flex; flex-wrap: wrap; } .tags + .-large { margin-top: 40px; } .item__image { position: relative; overflow: hidden; display: block; margin-bottom: 22px; height: 0; padding-top: 100%; border-radius: 10px; cursor: pointer; } @media (max-width: 1024px) { .item__image { border-radius: 7px; } } @media (max-width: 576px) { .item__image { border-radius: 5px; } } .item__image.-small { padding-top: 55%; } .item__image img { position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; -o-object-position: center; object-position: center; border-radius: 10px; transition: transform 0.2s ease-in-out; } @media (max-width: 1024px) { .item__image img { border-radius: 7px; } } @media (max-width: 576px) { .item__image img { border-radius: 5px; } } .item__noImage { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; background-color: rgba(0, 0, 0, 0.5); border-radius: 10px; height: 95%; } .item__date + * { margin-top: 12px; } .item__title { display: flex; align-items: center; margin-top: 12px; cursor: pointer; } .item__title .tag { transform: none; } .item__title + * { margin-top: 12px; } @media (max-width: 576px) { .item__title + * { margin-top: 10px; } } .item__title + .button, .item__title + .filter__remove, .item__title + .filter__tag { margin-top: 20px; } .item__label { margin-left: 15px; } .item__preview { opacity: 0.7; color: #3c3c3c; } .item__preview + * { margin-top: 20px; } @media (max-width: 576px) { .item__preview + * { margin-top: 10px; } } .item.-underlined { padding-left: 24px; padding-right: 24px; padding-bottom: 30px; } @media (max-width: 576px) { .item.-underlined { padding-left: 10px; padding-right: 10px; padding-bottom: 20px; } } .item.-underlined::after { content: ""; position: absolute; bottom: 0; left: 0; right: 0; width: 100%; height: 10px; border: 1px solid #DADDDF; border-top: 0; border-radius: 0 0 10px 10px; } .item.-show-all .item:nth-of-type(n + 9) { display: block; } .item:hover .item__image img { transform: scale(1.05); } .--colored .item__preview { color: #717484 !important; opacity: 1; } .--colored .item .tag { background-color: rgba(255, 255, 255, 0); -webkit-backdrop-filter: blur(11px) brightness(115%); backdrop-filter: blur(11px) brightness(115%); background-color: rgba(255, 255, 255, 0.2); color: #AAACB5 !important; } .--colored .item .button, .--colored .item .filter__remove, .--colored .item .filter__tag { color: white; } .--colored .item.-underlined::after { border-color: #717484; } .slider { width: 100%; height: auto; } .slider__inner { position: relative; height: 100%; } .slider__slide { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-size: cover; background-repeat: no-repeat; background-position: center center; } .slider__controls { display: none; justify-content: space-between; } .slider__controls.-active { display: flex; } .slider__control { cursor: pointer; } .slider.-seo { position: relative; } .slider__inner { padding-top: 57%; } .slider__slide { transition: opacity 0.2s ease-in-out; opacity: 0; border-radius: 10px; } @media (max-width: 1024px) { .slider__slide { border-radius: 7px; } } @media (max-width: 576px) { .slider__slide { border-radius: 5px; } } .slider__slide.-active { opacity: 1; } .slider__controls { position: absolute; left: 20px; bottom: 20px; display: flex; } @media (max-width: 576px) { .slider__controls { left: 15px; bottom: 15px; } } .slider__control { display: flex; align-items: center; justify-content: center; overflow: hidden; transition: background-color 0.2s ease-in-out; width: 40px; height: 40px; border-radius: 10px; background-color: #B5FF00; } @media (max-width: 1024px) { .slider__control { border-radius: 7px; } } @media (max-width: 576px) { .slider__control { border-radius: 5px; } } @media (max-width: 1024px) { .slider__control { width: 30px; height: 30px; } } @media (max-width: 576px) { .slider__control { width: 25px; height: 25px; } } .slider__control:first-child { transform: rotate(180deg); } .slider__control svg { width: 32%; } .slider__control svg path { transition: fill 0.2s ease-in-out; } .slider__control:hover svg { animation: arrowVertical 0.4s ease; } .slider__control:hover:first-child svg { animation: arrowVerticalReversed 0.4s ease; } .mobile-menu { position: fixed; top: 0; left: 0; display: none; transition: 0.2s ease-in-out; width: 100%; height: 100%; background-color: white; left: 100%; z-index: 9; overflow: hidden; border-radius: 5px; width: 100vw; top: 10px; right: -100%; left: unset; width: calc(100% - 16px); max-width: 360px; height: -moz-fit-content; height: fit-content; background-color: transparent; } @media (max-width: 1395px) { .mobile-menu { display: block; } } .mobile-menu .container { position: relative; display: flex; justify-content: space-between; align-items: stretch; flex-direction: row; flex-wrap: wrap; width: 100%; margin-right: auto; margin-left: auto; padding-right: 90px; padding-left: 90px; max-width: 1560px; } .mobile-menu .container .part-1:not(.no-gutter) { width: calc(((100% - (24px * (12 - 1))) / 12) * 1 + (24px * (1 - 1))); } .mobile-menu .container .part-1.no-gutter { width: calc(((100% - (0px * (12 - 1))) / 12) * 1 + (0px * (1 - 1))); } .mobile-menu .container .part-2:not(.no-gutter) { width: calc(((100% - (24px * (12 - 1))) / 12) * 2 + (24px * (2 - 1))); } .mobile-menu .container .part-2.no-gutter { width: calc(((100% - (0px * (12 - 1))) / 12) * 2 + (0px * (2 - 1))); } .mobile-menu .container .part-3:not(.no-gutter) { width: calc(((100% - (24px * (12 - 1))) / 12) * 3 + (24px * (3 - 1))); } .mobile-menu .container .part-3.no-gutter { width: calc(((100% - (0px * (12 - 1))) / 12) * 3 + (0px * (3 - 1))); } .mobile-menu .container .part-4:not(.no-gutter) { width: calc(((100% - (24px * (12 - 1))) / 12) * 4 + (24px * (4 - 1))); } .mobile-menu .container .part-4.no-gutter { width: calc(((100% - (0px * (12 - 1))) / 12) * 4 + (0px * (4 - 1))); } .mobile-menu .container .part-5:not(.no-gutter) { width: calc(((100% - (24px * (12 - 1))) / 12) * 5 + (24px * (5 - 1))); } .mobile-menu .container .part-5.no-gutter { width: calc(((100% - (0px * (12 - 1))) / 12) * 5 + (0px * (5 - 1))); } .mobile-menu .container .part-6:not(.no-gutter) { width: calc(((100% - (24px * (12 - 1))) / 12) * 6 + (24px * (6 - 1))); } .mobile-menu .container .part-6.no-gutter { width: calc(((100% - (0px * (12 - 1))) / 12) * 6 + (0px * (6 - 1))); } .mobile-menu .container .part-7:not(.no-gutter) { width: calc(((100% - (24px * (12 - 1))) / 12) * 7 + (24px * (7 - 1))); } .mobile-menu .container .part-7.no-gutter { width: calc(((100% - (0px * (12 - 1))) / 12) * 7 + (0px * (7 - 1))); } .mobile-menu .container .part-8:not(.no-gutter) { width: calc(((100% - (24px * (12 - 1))) / 12) * 8 + (24px * (8 - 1))); } .mobile-menu .container .part-8.no-gutter { width: calc(((100% - (0px * (12 - 1))) / 12) * 8 + (0px * (8 - 1))); } .mobile-menu .container .part-9:not(.no-gutter) { width: calc(((100% - (24px * (12 - 1))) / 12) * 9 + (24px * (9 - 1))); } .mobile-menu .container .part-9.no-gutter { width: calc(((100% - (0px * (12 - 1))) / 12) * 9 + (0px * (9 - 1))); } .mobile-menu .container .part-10:not(.no-gutter) { width: calc(((100% - (24px * (12 - 1))) / 12) * 10 + (24px * (10 - 1))); } .mobile-menu .container .part-10.no-gutter { width: calc(((100% - (0px * (12 - 1))) / 12) * 10 + (0px * (10 - 1))); } .mobile-menu .container .part-11:not(.no-gutter) { width: calc(((100% - (24px * (12 - 1))) / 12) * 11 + (24px * (11 - 1))); } .mobile-menu .container .part-11.no-gutter { width: calc(((100% - (0px * (12 - 1))) / 12) * 11 + (0px * (11 - 1))); } .mobile-menu .container .part-12:not(.no-gutter) { width: calc(((100% - (24px * (12 - 1))) / 12) * 12 + (24px * (12 - 1))); } .mobile-menu .container .part-12.no-gutter { width: calc(((100% - (0px * (12 - 1))) / 12) * 12 + (0px * (12 - 1))); } @media (max-width: 1280px) { .mobile-menu .container .part-xl-1:not(.no-gutter) { width: calc(((100% - (24px * (12 - 1))) / 12) * 1 + (24px * (1 - 1))); } .mobile-menu .container .part-xl-1.no-gutter { width: calc(((100% - (0px * (12 - 1))) / 12) * 1 + (0px * (1 - 1))); } .mobile-menu .container .part-xl-2:not(.no-gutter) { width: calc(((100% - (24px * (12 - 1))) / 12) * 2 + (24px * (2 - 1))); } .mobile-menu .container .part-xl-2.no-gutter { width: calc(((100% - (0px * (12 - 1))) / 12) * 2 + (0px * (2 - 1))); } .mobile-menu .container .part-xl-3:not(.no-gutter) { width: calc(((100% - (24px * (12 - 1))) / 12) * 3 + (24px * (3 - 1))); } .mobile-menu .container .part-xl-3.no-gutter { width: calc(((100% - (0px * (12 - 1))) / 12) * 3 + (0px * (3 - 1))); } .mobile-menu .container .part-xl-4:not(.no-gutter) { width: calc(((100% - (24px * (12 - 1))) / 12) * 4 + (24px * (4 - 1))); } .mobile-menu .container .part-xl-4.no-gutter { width: calc(((100% - (0px * (12 - 1))) / 12) * 4 + (0px * (4 - 1))); } .mobile-menu .container .part-xl-5:not(.no-gutter) { width: calc(((100% - (24px * (12 - 1))) / 12) * 5 + (24px * (5 - 1))); } .mobile-menu .container .part-xl-5.no-gutter { width: calc(((100% - (0px * (12 - 1))) / 12) * 5 + (0px * (5 - 1))); } .mobile-menu .container .part-xl-6:not(.no-gutter) { width: calc(((100% - (24px * (12 - 1))) / 12) * 6 + (24px * (6 - 1))); } .mobile-menu .container .part-xl-6.no-gutter { width: calc(((100% - (0px * (12 - 1))) / 12) * 6 + (0px * (6 - 1))); } .mobile-menu .container .part-xl-7:not(.no-gutter) { width: calc(((100% - (24px * (12 - 1))) / 12) * 7 + (24px * (7 - 1))); } .mobile-menu .container .part-xl-7.no-gutter { width: calc(((100% - (0px * (12 - 1))) / 12) * 7 + (0px * (7 - 1))); } .mobile-menu .container .part-xl-8:not(.no-gutter) { width: calc(((100% - (24px * (12 - 1))) / 12) * 8 + (24px * (8 - 1))); } .mobile-menu .container .part-xl-8.no-gutter { width: calc(((100% - (0px * (12 - 1))) / 12) * 8 + (0px * (8 - 1))); } .mobile-menu .container .part-xl-9:not(.no-gutter) { width: calc(((100% - (24px * (12 - 1))) / 12) * 9 + (24px * (9 - 1))); } .mobile-menu .container .part-xl-9.no-gutter { width: calc(((100% - (0px * (12 - 1))) / 12) * 9 + (0px * (9 - 1))); } .mobile-menu .container .part-xl-10:not(.no-gutter) { width: calc(((100% - (24px * (12 - 1))) / 12) * 10 + (24px * (10 - 1))); } .mobile-menu .container .part-xl-10.no-gutter { width: calc(((100% - (0px * (12 - 1))) / 12) * 10 + (0px * (10 - 1))); } .mobile-menu .container .part-xl-11:not(.no-gutter) { width: calc(((100% - (24px * (12 - 1))) / 12) * 11 + (24px * (11 - 1))); } .mobile-menu .container .part-xl-11.no-gutter { width: calc(((100% - (0px * (12 - 1))) / 12) * 11 + (0px * (11 - 1))); } .mobile-menu .container .part-xl-12:not(.no-gutter) { width: calc(((100% - (24px * (12 - 1))) / 12) * 12 + (24px * (12 - 1))); } .mobile-menu .container .part-xl-12.no-gutter { width: calc(((100% - (0px * (12 - 1))) / 12) * 12 + (0px * (12 - 1))); } } @media (max-width: 1024px) { .mobile-menu .container .part-l-1:not(.no-gutter) { width: calc(((100% - (16px * (8 - 1))) / 8) * 1 + (16px * (1 - 1))); } .mobile-menu .container .part-l-1.no-gutter { width: calc(((100% - (0px * (8 - 1))) / 8) * 1 + (0px * (1 - 1))); } .mobile-menu .container .part-l-2:not(.no-gutter) { width: calc(((100% - (16px * (8 - 1))) / 8) * 2 + (16px * (2 - 1))); } .mobile-menu .container .part-l-2.no-gutter { width: calc(((100% - (0px * (8 - 1))) / 8) * 2 + (0px * (2 - 1))); } .mobile-menu .container .part-l-3:not(.no-gutter) { width: calc(((100% - (16px * (8 - 1))) / 8) * 3 + (16px * (3 - 1))); } .mobile-menu .container .part-l-3.no-gutter { width: calc(((100% - (0px * (8 - 1))) / 8) * 3 + (0px * (3 - 1))); } .mobile-menu .container .part-l-4:not(.no-gutter) { width: calc(((100% - (16px * (8 - 1))) / 8) * 4 + (16px * (4 - 1))); } .mobile-menu .container .part-l-4.no-gutter { width: calc(((100% - (0px * (8 - 1))) / 8) * 4 + (0px * (4 - 1))); } .mobile-menu .container .part-l-5:not(.no-gutter) { width: calc(((100% - (16px * (8 - 1))) / 8) * 5 + (16px * (5 - 1))); } .mobile-menu .container .part-l-5.no-gutter { width: calc(((100% - (0px * (8 - 1))) / 8) * 5 + (0px * (5 - 1))); } .mobile-menu .container .part-l-6:not(.no-gutter) { width: calc(((100% - (16px * (8 - 1))) / 8) * 6 + (16px * (6 - 1))); } .mobile-menu .container .part-l-6.no-gutter { width: calc(((100% - (0px * (8 - 1))) / 8) * 6 + (0px * (6 - 1))); } .mobile-menu .container .part-l-7:not(.no-gutter) { width: calc(((100% - (16px * (8 - 1))) / 8) * 7 + (16px * (7 - 1))); } .mobile-menu .container .part-l-7.no-gutter { width: calc(((100% - (0px * (8 - 1))) / 8) * 7 + (0px * (7 - 1))); } .mobile-menu .container .part-l-8:not(.no-gutter) { width: calc(((100% - (16px * (8 - 1))) / 8) * 8 + (16px * (8 - 1))); } .mobile-menu .container .part-l-8.no-gutter { width: calc(((100% - (0px * (8 - 1))) / 8) * 8 + (0px * (8 - 1))); } } @media (max-width: 768px) { .mobile-menu .container .part-m-1:not(.no-gutter) { width: calc(((100% - (14px * (8 - 1))) / 8) * 1 + (14px * (1 - 1))); } .mobile-menu .container .part-m-1.no-gutter { width: calc(((100% - (0px * (8 - 1))) / 8) * 1 + (0px * (1 - 1))); } .mobile-menu .container .part-m-2:not(.no-gutter) { width: calc(((100% - (14px * (8 - 1))) / 8) * 2 + (14px * (2 - 1))); } .mobile-menu .container .part-m-2.no-gutter { width: calc(((100% - (0px * (8 - 1))) / 8) * 2 + (0px * (2 - 1))); } .mobile-menu .container .part-m-3:not(.no-gutter) { width: calc(((100% - (14px * (8 - 1))) / 8) * 3 + (14px * (3 - 1))); } .mobile-menu .container .part-m-3.no-gutter { width: calc(((100% - (0px * (8 - 1))) / 8) * 3 + (0px * (3 - 1))); } .mobile-menu .container .part-m-4:not(.no-gutter) { width: calc(((100% - (14px * (8 - 1))) / 8) * 4 + (14px * (4 - 1))); } .mobile-menu .container .part-m-4.no-gutter { width: calc(((100% - (0px * (8 - 1))) / 8) * 4 + (0px * (4 - 1))); } .mobile-menu .container .part-m-5:not(.no-gutter) { width: calc(((100% - (14px * (8 - 1))) / 8) * 5 + (14px * (5 - 1))); } .mobile-menu .container .part-m-5.no-gutter { width: calc(((100% - (0px * (8 - 1))) / 8) * 5 + (0px * (5 - 1))); } .mobile-menu .container .part-m-6:not(.no-gutter) { width: calc(((100% - (14px * (8 - 1))) / 8) * 6 + (14px * (6 - 1))); } .mobile-menu .container .part-m-6.no-gutter { width: calc(((100% - (0px * (8 - 1))) / 8) * 6 + (0px * (6 - 1))); } .mobile-menu .container .part-m-7:not(.no-gutter) { width: calc(((100% - (14px * (8 - 1))) / 8) * 7 + (14px * (7 - 1))); } .mobile-menu .container .part-m-7.no-gutter { width: calc(((100% - (0px * (8 - 1))) / 8) * 7 + (0px * (7 - 1))); } .mobile-menu .container .part-m-8:not(.no-gutter) { width: calc(((100% - (14px * (8 - 1))) / 8) * 8 + (14px * (8 - 1))); } .mobile-menu .container .part-m-8.no-gutter { width: calc(((100% - (0px * (8 - 1))) / 8) * 8 + (0px * (8 - 1))); } } @media (max-width: 576px) { .mobile-menu .container .part-s-1:not(.no-gutter) { width: calc(((100% - (10px * (4 - 1))) / 4) * 1 + (10px * (1 - 1))); } .mobile-menu .container .part-s-1.no-gutter { width: calc(((100% - (0px * (4 - 1))) / 4) * 1 + (0px * (1 - 1))); } .mobile-menu .container .part-s-2:not(.no-gutter) { width: calc(((100% - (10px * (4 - 1))) / 4) * 2 + (10px * (2 - 1))); } .mobile-menu .container .part-s-2.no-gutter { width: calc(((100% - (0px * (4 - 1))) / 4) * 2 + (0px * (2 - 1))); } .mobile-menu .container .part-s-3:not(.no-gutter) { width: calc(((100% - (10px * (4 - 1))) / 4) * 3 + (10px * (3 - 1))); } .mobile-menu .container .part-s-3.no-gutter { width: calc(((100% - (0px * (4 - 1))) / 4) * 3 + (0px * (3 - 1))); } .mobile-menu .container .part-s-4:not(.no-gutter) { width: calc(((100% - (10px * (4 - 1))) / 4) * 4 + (10px * (4 - 1))); } .mobile-menu .container .part-s-4.no-gutter { width: calc(((100% - (0px * (4 - 1))) / 4) * 4 + (0px * (4 - 1))); } } @media (max-width: 375px) { .mobile-menu .container .part-xs-1:not(.no-gutter) { width: calc(((100% - (10px * (4 - 1))) / 4) * 1 + (10px * (1 - 1))); } .mobile-menu .container .part-xs-1.no-gutter { width: calc(((100% - (0px * (4 - 1))) / 4) * 1 + (0px * (1 - 1))); } .mobile-menu .container .part-xs-2:not(.no-gutter) { width: calc(((100% - (10px * (4 - 1))) / 4) * 2 + (10px * (2 - 1))); } .mobile-menu .container .part-xs-2.no-gutter { width: calc(((100% - (0px * (4 - 1))) / 4) * 2 + (0px * (2 - 1))); } .mobile-menu .container .part-xs-3:not(.no-gutter) { width: calc(((100% - (10px * (4 - 1))) / 4) * 3 + (10px * (3 - 1))); } .mobile-menu .container .part-xs-3.no-gutter { width: calc(((100% - (0px * (4 - 1))) / 4) * 3 + (0px * (3 - 1))); } .mobile-menu .container .part-xs-4:not(.no-gutter) { width: calc(((100% - (10px * (4 - 1))) / 4) * 4 + (10px * (4 - 1))); } .mobile-menu .container .part-xs-4.no-gutter { width: calc(((100% - (0px * (4 - 1))) / 4) * 4 + (0px * (4 - 1))); } } .mobile-menu .container .part-top-0 { margin-top: 0px; } .mobile-menu .container .part-left-0 { margin-left: 0px; } .mobile-menu .container .part-right-0 { margin-right: 0px; } .mobile-menu .container .part-bottom-0 { margin-bottom: calc(0px + 50px); } .mobile-menu .container .part-top-1 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 1 + (24px * (1 - 1))); } .mobile-menu .container .part-left-1 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 1 + (24px * (1 - 1))); } .mobile-menu .container .part-right-1 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 1 + (24px * (1 - 1))); } .mobile-menu .container .part-bottom-1 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 1 + (24px * (1 - 1))) + 50px); } .mobile-menu .container .part-top-2 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 2 + (24px * (2 - 1))); } .mobile-menu .container .part-left-2 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 2 + (24px * (2 - 1))); } .mobile-menu .container .part-right-2 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 2 + (24px * (2 - 1))); } .mobile-menu .container .part-bottom-2 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 2 + (24px * (2 - 1))) + 50px); } .mobile-menu .container .part-top-3 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 3 + (24px * (3 - 1))); } .mobile-menu .container .part-left-3 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 3 + (24px * (3 - 1))); } .mobile-menu .container .part-right-3 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 3 + (24px * (3 - 1))); } .mobile-menu .container .part-bottom-3 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 3 + (24px * (3 - 1))) + 50px); } .mobile-menu .container .part-top-4 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 4 + (24px * (4 - 1))); } .mobile-menu .container .part-left-4 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 4 + (24px * (4 - 1))); } .mobile-menu .container .part-right-4 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 4 + (24px * (4 - 1))); } .mobile-menu .container .part-bottom-4 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 4 + (24px * (4 - 1))) + 50px); } .mobile-menu .container .part-top-5 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 5 + (24px * (5 - 1))); } .mobile-menu .container .part-left-5 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 5 + (24px * (5 - 1))); } .mobile-menu .container .part-right-5 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 5 + (24px * (5 - 1))); } .mobile-menu .container .part-bottom-5 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 5 + (24px * (5 - 1))) + 50px); } .mobile-menu .container .part-top-6 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 6 + (24px * (6 - 1))); } .mobile-menu .container .part-left-6 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 6 + (24px * (6 - 1))); } .mobile-menu .container .part-right-6 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 6 + (24px * (6 - 1))); } .mobile-menu .container .part-bottom-6 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 6 + (24px * (6 - 1))) + 50px); } .mobile-menu .container .part-top-7 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 7 + (24px * (7 - 1))); } .mobile-menu .container .part-left-7 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 7 + (24px * (7 - 1))); } .mobile-menu .container .part-right-7 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 7 + (24px * (7 - 1))); } .mobile-menu .container .part-bottom-7 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 7 + (24px * (7 - 1))) + 50px); } .mobile-menu .container .part-top-8 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 8 + (24px * (8 - 1))); } .mobile-menu .container .part-left-8 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 8 + (24px * (8 - 1))); } .mobile-menu .container .part-right-8 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 8 + (24px * (8 - 1))); } .mobile-menu .container .part-bottom-8 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 8 + (24px * (8 - 1))) + 50px); } .mobile-menu .container .part-top-9 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 9 + (24px * (9 - 1))); } .mobile-menu .container .part-left-9 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 9 + (24px * (9 - 1))); } .mobile-menu .container .part-right-9 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 9 + (24px * (9 - 1))); } .mobile-menu .container .part-bottom-9 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 9 + (24px * (9 - 1))) + 50px); } .mobile-menu .container .part-top-10 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 10 + (24px * (10 - 1))); } .mobile-menu .container .part-left-10 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 10 + (24px * (10 - 1))); } .mobile-menu .container .part-right-10 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 10 + (24px * (10 - 1))); } .mobile-menu .container .part-bottom-10 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 10 + (24px * (10 - 1))) + 50px); } .mobile-menu .container .part-top-11 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 11 + (24px * (11 - 1))); } .mobile-menu .container .part-left-11 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 11 + (24px * (11 - 1))); } .mobile-menu .container .part-right-11 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 11 + (24px * (11 - 1))); } .mobile-menu .container .part-bottom-11 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 11 + (24px * (11 - 1))) + 50px); } .mobile-menu .container .part-top-12 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 12 + (24px * (12 - 1))); } .mobile-menu .container .part-left-12 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 12 + (24px * (12 - 1))); } .mobile-menu .container .part-right-12 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 12 + (24px * (12 - 1))); } .mobile-menu .container .part-bottom-12 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 12 + (24px * (12 - 1))) + 50px); } @media (max-width: 1024px) { .mobile-menu .container .part-top-l-0 { margin-top: 0px; } .mobile-menu .container .part-left-l-0 { margin-left: 0px; } .mobile-menu .container .part-right-l-0 { margin-right: 0px; } .mobile-menu .container .part-bottom-l-0 { margin-bottom: calc(0px + 50px); } .mobile-menu .container .part-top-l-1 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 1 + (24px * (1 - 1))); } .mobile-menu .container .part-left-l-1 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 1 + (24px * (1 - 1))); } .mobile-menu .container .part-right-l-1 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 1 + (24px * (1 - 1))); } .mobile-menu .container .part-bottom-l-1 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 1 + (24px * (1 - 1))) + 50px); } .mobile-menu .container .part-top-l-2 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 2 + (24px * (2 - 1))); } .mobile-menu .container .part-left-l-2 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 2 + (24px * (2 - 1))); } .mobile-menu .container .part-right-l-2 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 2 + (24px * (2 - 1))); } .mobile-menu .container .part-bottom-l-2 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 2 + (24px * (2 - 1))) + 50px); } .mobile-menu .container .part-top-l-3 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 3 + (24px * (3 - 1))); } .mobile-menu .container .part-left-l-3 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 3 + (24px * (3 - 1))); } .mobile-menu .container .part-right-l-3 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 3 + (24px * (3 - 1))); } .mobile-menu .container .part-bottom-l-3 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 3 + (24px * (3 - 1))) + 50px); } .mobile-menu .container .part-top-l-4 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 4 + (24px * (4 - 1))); } .mobile-menu .container .part-left-l-4 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 4 + (24px * (4 - 1))); } .mobile-menu .container .part-right-l-4 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 4 + (24px * (4 - 1))); } .mobile-menu .container .part-bottom-l-4 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 4 + (24px * (4 - 1))) + 50px); } .mobile-menu .container .part-top-l-5 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 5 + (24px * (5 - 1))); } .mobile-menu .container .part-left-l-5 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 5 + (24px * (5 - 1))); } .mobile-menu .container .part-right-l-5 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 5 + (24px * (5 - 1))); } .mobile-menu .container .part-bottom-l-5 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 5 + (24px * (5 - 1))) + 50px); } .mobile-menu .container .part-top-l-6 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 6 + (24px * (6 - 1))); } .mobile-menu .container .part-left-l-6 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 6 + (24px * (6 - 1))); } .mobile-menu .container .part-right-l-6 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 6 + (24px * (6 - 1))); } .mobile-menu .container .part-bottom-l-6 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 6 + (24px * (6 - 1))) + 50px); } .mobile-menu .container .part-top-l-7 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 7 + (24px * (7 - 1))); } .mobile-menu .container .part-left-l-7 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 7 + (24px * (7 - 1))); } .mobile-menu .container .part-right-l-7 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 7 + (24px * (7 - 1))); } .mobile-menu .container .part-bottom-l-7 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 7 + (24px * (7 - 1))) + 50px); } .mobile-menu .container .part-top-l-8 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 8 + (24px * (8 - 1))); } .mobile-menu .container .part-left-l-8 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 8 + (24px * (8 - 1))); } .mobile-menu .container .part-right-l-8 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 8 + (24px * (8 - 1))); } .mobile-menu .container .part-bottom-l-8 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 8 + (24px * (8 - 1))) + 50px); } .mobile-menu .container .part-top-l-9 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 9 + (24px * (9 - 1))); } .mobile-menu .container .part-left-l-9 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 9 + (24px * (9 - 1))); } .mobile-menu .container .part-right-l-9 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 9 + (24px * (9 - 1))); } .mobile-menu .container .part-bottom-l-9 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 9 + (24px * (9 - 1))) + 50px); } .mobile-menu .container .part-top-l-10 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 10 + (24px * (10 - 1))); } .mobile-menu .container .part-left-l-10 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 10 + (24px * (10 - 1))); } .mobile-menu .container .part-right-l-10 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 10 + (24px * (10 - 1))); } .mobile-menu .container .part-bottom-l-10 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 10 + (24px * (10 - 1))) + 50px); } .mobile-menu .container .part-top-l-11 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 11 + (24px * (11 - 1))); } .mobile-menu .container .part-left-l-11 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 11 + (24px * (11 - 1))); } .mobile-menu .container .part-right-l-11 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 11 + (24px * (11 - 1))); } .mobile-menu .container .part-bottom-l-11 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 11 + (24px * (11 - 1))) + 50px); } .mobile-menu .container .part-top-l-12 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 12 + (24px * (12 - 1))); } .mobile-menu .container .part-left-l-12 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 12 + (24px * (12 - 1))); } .mobile-menu .container .part-right-l-12 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 12 + (24px * (12 - 1))); } .mobile-menu .container .part-bottom-l-12 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 12 + (24px * (12 - 1))) + 50px); } } @media (max-width: 768px) { .mobile-menu .container .part-top-m-0 { margin-top: 0px; } .mobile-menu .container .part-left-m-0 { margin-left: 0px; } .mobile-menu .container .part-right-m-0 { margin-right: 0px; } .mobile-menu .container .part-bottom-m-0 { margin-bottom: calc(0px + 50px); } .mobile-menu .container .part-top-m-1 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 1 + (24px * (1 - 1))); } .mobile-menu .container .part-left-m-1 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 1 + (24px * (1 - 1))); } .mobile-menu .container .part-right-m-1 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 1 + (24px * (1 - 1))); } .mobile-menu .container .part-bottom-m-1 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 1 + (24px * (1 - 1))) + 50px); } .mobile-menu .container .part-top-m-2 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 2 + (24px * (2 - 1))); } .mobile-menu .container .part-left-m-2 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 2 + (24px * (2 - 1))); } .mobile-menu .container .part-right-m-2 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 2 + (24px * (2 - 1))); } .mobile-menu .container .part-bottom-m-2 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 2 + (24px * (2 - 1))) + 50px); } .mobile-menu .container .part-top-m-3 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 3 + (24px * (3 - 1))); } .mobile-menu .container .part-left-m-3 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 3 + (24px * (3 - 1))); } .mobile-menu .container .part-right-m-3 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 3 + (24px * (3 - 1))); } .mobile-menu .container .part-bottom-m-3 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 3 + (24px * (3 - 1))) + 50px); } .mobile-menu .container .part-top-m-4 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 4 + (24px * (4 - 1))); } .mobile-menu .container .part-left-m-4 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 4 + (24px * (4 - 1))); } .mobile-menu .container .part-right-m-4 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 4 + (24px * (4 - 1))); } .mobile-menu .container .part-bottom-m-4 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 4 + (24px * (4 - 1))) + 50px); } .mobile-menu .container .part-top-m-5 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 5 + (24px * (5 - 1))); } .mobile-menu .container .part-left-m-5 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 5 + (24px * (5 - 1))); } .mobile-menu .container .part-right-m-5 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 5 + (24px * (5 - 1))); } .mobile-menu .container .part-bottom-m-5 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 5 + (24px * (5 - 1))) + 50px); } .mobile-menu .container .part-top-m-6 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 6 + (24px * (6 - 1))); } .mobile-menu .container .part-left-m-6 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 6 + (24px * (6 - 1))); } .mobile-menu .container .part-right-m-6 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 6 + (24px * (6 - 1))); } .mobile-menu .container .part-bottom-m-6 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 6 + (24px * (6 - 1))) + 50px); } .mobile-menu .container .part-top-m-7 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 7 + (24px * (7 - 1))); } .mobile-menu .container .part-left-m-7 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 7 + (24px * (7 - 1))); } .mobile-menu .container .part-right-m-7 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 7 + (24px * (7 - 1))); } .mobile-menu .container .part-bottom-m-7 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 7 + (24px * (7 - 1))) + 50px); } .mobile-menu .container .part-top-m-8 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 8 + (24px * (8 - 1))); } .mobile-menu .container .part-left-m-8 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 8 + (24px * (8 - 1))); } .mobile-menu .container .part-right-m-8 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 8 + (24px * (8 - 1))); } .mobile-menu .container .part-bottom-m-8 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 8 + (24px * (8 - 1))) + 50px); } .mobile-menu .container .part-top-m-9 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 9 + (24px * (9 - 1))); } .mobile-menu .container .part-left-m-9 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 9 + (24px * (9 - 1))); } .mobile-menu .container .part-right-m-9 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 9 + (24px * (9 - 1))); } .mobile-menu .container .part-bottom-m-9 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 9 + (24px * (9 - 1))) + 50px); } .mobile-menu .container .part-top-m-10 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 10 + (24px * (10 - 1))); } .mobile-menu .container .part-left-m-10 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 10 + (24px * (10 - 1))); } .mobile-menu .container .part-right-m-10 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 10 + (24px * (10 - 1))); } .mobile-menu .container .part-bottom-m-10 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 10 + (24px * (10 - 1))) + 50px); } .mobile-menu .container .part-top-m-11 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 11 + (24px * (11 - 1))); } .mobile-menu .container .part-left-m-11 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 11 + (24px * (11 - 1))); } .mobile-menu .container .part-right-m-11 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 11 + (24px * (11 - 1))); } .mobile-menu .container .part-bottom-m-11 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 11 + (24px * (11 - 1))) + 50px); } .mobile-menu .container .part-top-m-12 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 12 + (24px * (12 - 1))); } .mobile-menu .container .part-left-m-12 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 12 + (24px * (12 - 1))); } .mobile-menu .container .part-right-m-12 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 12 + (24px * (12 - 1))); } .mobile-menu .container .part-bottom-m-12 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 12 + (24px * (12 - 1))) + 50px); } } @media (max-width: 576px) { .mobile-menu .container .part-top-s-0 { margin-top: 0px; } .mobile-menu .container .part-left-s-0 { margin-left: 0px; } .mobile-menu .container .part-right-s-0 { margin-right: 0px; } .mobile-menu .container .part-bottom-s-0 { margin-bottom: calc(0px + 30px); } .mobile-menu .container .part-top-s-1 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 1 + (24px * (1 - 1))); } .mobile-menu .container .part-left-s-1 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 1 + (24px * (1 - 1))); } .mobile-menu .container .part-right-s-1 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 1 + (24px * (1 - 1))); } .mobile-menu .container .part-bottom-s-1 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 1 + (24px * (1 - 1))) + 30px); } .mobile-menu .container .part-top-s-2 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 2 + (24px * (2 - 1))); } .mobile-menu .container .part-left-s-2 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 2 + (24px * (2 - 1))); } .mobile-menu .container .part-right-s-2 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 2 + (24px * (2 - 1))); } .mobile-menu .container .part-bottom-s-2 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 2 + (24px * (2 - 1))) + 30px); } .mobile-menu .container .part-top-s-3 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 3 + (24px * (3 - 1))); } .mobile-menu .container .part-left-s-3 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 3 + (24px * (3 - 1))); } .mobile-menu .container .part-right-s-3 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 3 + (24px * (3 - 1))); } .mobile-menu .container .part-bottom-s-3 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 3 + (24px * (3 - 1))) + 30px); } .mobile-menu .container .part-top-s-4 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 4 + (24px * (4 - 1))); } .mobile-menu .container .part-left-s-4 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 4 + (24px * (4 - 1))); } .mobile-menu .container .part-right-s-4 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 4 + (24px * (4 - 1))); } .mobile-menu .container .part-bottom-s-4 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 4 + (24px * (4 - 1))) + 30px); } .mobile-menu .container .part-top-s-5 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 5 + (24px * (5 - 1))); } .mobile-menu .container .part-left-s-5 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 5 + (24px * (5 - 1))); } .mobile-menu .container .part-right-s-5 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 5 + (24px * (5 - 1))); } .mobile-menu .container .part-bottom-s-5 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 5 + (24px * (5 - 1))) + 30px); } .mobile-menu .container .part-top-s-6 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 6 + (24px * (6 - 1))); } .mobile-menu .container .part-left-s-6 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 6 + (24px * (6 - 1))); } .mobile-menu .container .part-right-s-6 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 6 + (24px * (6 - 1))); } .mobile-menu .container .part-bottom-s-6 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 6 + (24px * (6 - 1))) + 30px); } .mobile-menu .container .part-top-s-7 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 7 + (24px * (7 - 1))); } .mobile-menu .container .part-left-s-7 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 7 + (24px * (7 - 1))); } .mobile-menu .container .part-right-s-7 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 7 + (24px * (7 - 1))); } .mobile-menu .container .part-bottom-s-7 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 7 + (24px * (7 - 1))) + 30px); } .mobile-menu .container .part-top-s-8 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 8 + (24px * (8 - 1))); } .mobile-menu .container .part-left-s-8 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 8 + (24px * (8 - 1))); } .mobile-menu .container .part-right-s-8 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 8 + (24px * (8 - 1))); } .mobile-menu .container .part-bottom-s-8 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 8 + (24px * (8 - 1))) + 30px); } .mobile-menu .container .part-top-s-9 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 9 + (24px * (9 - 1))); } .mobile-menu .container .part-left-s-9 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 9 + (24px * (9 - 1))); } .mobile-menu .container .part-right-s-9 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 9 + (24px * (9 - 1))); } .mobile-menu .container .part-bottom-s-9 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 9 + (24px * (9 - 1))) + 30px); } .mobile-menu .container .part-top-s-10 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 10 + (24px * (10 - 1))); } .mobile-menu .container .part-left-s-10 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 10 + (24px * (10 - 1))); } .mobile-menu .container .part-right-s-10 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 10 + (24px * (10 - 1))); } .mobile-menu .container .part-bottom-s-10 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 10 + (24px * (10 - 1))) + 30px); } .mobile-menu .container .part-top-s-11 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 11 + (24px * (11 - 1))); } .mobile-menu .container .part-left-s-11 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 11 + (24px * (11 - 1))); } .mobile-menu .container .part-right-s-11 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 11 + (24px * (11 - 1))); } .mobile-menu .container .part-bottom-s-11 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 11 + (24px * (11 - 1))) + 30px); } .mobile-menu .container .part-top-s-12 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 12 + (24px * (12 - 1))); } .mobile-menu .container .part-left-s-12 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 12 + (24px * (12 - 1))); } .mobile-menu .container .part-right-s-12 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 12 + (24px * (12 - 1))); } .mobile-menu .container .part-bottom-s-12 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 12 + (24px * (12 - 1))) + 30px); } } @media (max-width: 375px) { .mobile-menu .container .part-top-xs-0 { margin-top: 0px; } .mobile-menu .container .part-left-xs-0 { margin-left: 0px; } .mobile-menu .container .part-right-xs-0 { margin-right: 0px; } .mobile-menu .container .part-bottom-xs-0 { margin-bottom: calc(0px + 30px); } .mobile-menu .container .part-top-xs-1 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 1 + (24px * (1 - 1))); } .mobile-menu .container .part-left-xs-1 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 1 + (24px * (1 - 1))); } .mobile-menu .container .part-right-xs-1 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 1 + (24px * (1 - 1))); } .mobile-menu .container .part-bottom-xs-1 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 1 + (24px * (1 - 1))) + 30px); } .mobile-menu .container .part-top-xs-2 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 2 + (24px * (2 - 1))); } .mobile-menu .container .part-left-xs-2 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 2 + (24px * (2 - 1))); } .mobile-menu .container .part-right-xs-2 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 2 + (24px * (2 - 1))); } .mobile-menu .container .part-bottom-xs-2 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 2 + (24px * (2 - 1))) + 30px); } .mobile-menu .container .part-top-xs-3 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 3 + (24px * (3 - 1))); } .mobile-menu .container .part-left-xs-3 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 3 + (24px * (3 - 1))); } .mobile-menu .container .part-right-xs-3 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 3 + (24px * (3 - 1))); } .mobile-menu .container .part-bottom-xs-3 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 3 + (24px * (3 - 1))) + 30px); } .mobile-menu .container .part-top-xs-4 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 4 + (24px * (4 - 1))); } .mobile-menu .container .part-left-xs-4 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 4 + (24px * (4 - 1))); } .mobile-menu .container .part-right-xs-4 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 4 + (24px * (4 - 1))); } .mobile-menu .container .part-bottom-xs-4 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 4 + (24px * (4 - 1))) + 30px); } .mobile-menu .container .part-top-xs-5 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 5 + (24px * (5 - 1))); } .mobile-menu .container .part-left-xs-5 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 5 + (24px * (5 - 1))); } .mobile-menu .container .part-right-xs-5 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 5 + (24px * (5 - 1))); } .mobile-menu .container .part-bottom-xs-5 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 5 + (24px * (5 - 1))) + 30px); } .mobile-menu .container .part-top-xs-6 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 6 + (24px * (6 - 1))); } .mobile-menu .container .part-left-xs-6 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 6 + (24px * (6 - 1))); } .mobile-menu .container .part-right-xs-6 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 6 + (24px * (6 - 1))); } .mobile-menu .container .part-bottom-xs-6 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 6 + (24px * (6 - 1))) + 30px); } .mobile-menu .container .part-top-xs-7 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 7 + (24px * (7 - 1))); } .mobile-menu .container .part-left-xs-7 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 7 + (24px * (7 - 1))); } .mobile-menu .container .part-right-xs-7 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 7 + (24px * (7 - 1))); } .mobile-menu .container .part-bottom-xs-7 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 7 + (24px * (7 - 1))) + 30px); } .mobile-menu .container .part-top-xs-8 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 8 + (24px * (8 - 1))); } .mobile-menu .container .part-left-xs-8 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 8 + (24px * (8 - 1))); } .mobile-menu .container .part-right-xs-8 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 8 + (24px * (8 - 1))); } .mobile-menu .container .part-bottom-xs-8 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 8 + (24px * (8 - 1))) + 30px); } .mobile-menu .container .part-top-xs-9 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 9 + (24px * (9 - 1))); } .mobile-menu .container .part-left-xs-9 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 9 + (24px * (9 - 1))); } .mobile-menu .container .part-right-xs-9 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 9 + (24px * (9 - 1))); } .mobile-menu .container .part-bottom-xs-9 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 9 + (24px * (9 - 1))) + 30px); } .mobile-menu .container .part-top-xs-10 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 10 + (24px * (10 - 1))); } .mobile-menu .container .part-left-xs-10 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 10 + (24px * (10 - 1))); } .mobile-menu .container .part-right-xs-10 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 10 + (24px * (10 - 1))); } .mobile-menu .container .part-bottom-xs-10 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 10 + (24px * (10 - 1))) + 30px); } .mobile-menu .container .part-top-xs-11 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 11 + (24px * (11 - 1))); } .mobile-menu .container .part-left-xs-11 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 11 + (24px * (11 - 1))); } .mobile-menu .container .part-right-xs-11 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 11 + (24px * (11 - 1))); } .mobile-menu .container .part-bottom-xs-11 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 11 + (24px * (11 - 1))) + 30px); } .mobile-menu .container .part-top-xs-12 { margin-top: calc(((1560px - (24px * (12 - 1))) / 12) * 12 + (24px * (12 - 1))); } .mobile-menu .container .part-left-xs-12 { margin-left: calc(((1560px - (24px * (12 - 1))) / 12) * 12 + (24px * (12 - 1))); } .mobile-menu .container .part-right-xs-12 { margin-right: calc(((1560px - (24px * (12 - 1))) / 12) * 12 + (24px * (12 - 1))); } .mobile-menu .container .part-bottom-xs-12 { margin-bottom: calc(calc(((1560px - (24px * (12 - 1))) / 12) * 12 + (24px * (12 - 1))) + 30px); } } @media (max-width: 375px) { .mobile-menu .container .part-xs-0 { display: none; } } @media (max-width: 576px) { .mobile-menu .container .part-s-0 { display: none; } } @media (max-width: 768px) { .mobile-menu .container .part-m-0 { display: none; } } @media (max-width: 1024px) { .mobile-menu .container .part-l-0 { display: none; } } @media (max-width: 1280px) { .mobile-menu .container .part-xl-0 { display: none; } } .mobile-menu .container [class*=part].-justify-start { display: flex; justify-content: flex-start; } .mobile-menu .container [class*=part].-justify-center { display: flex; justify-content: center; } .mobile-menu .container [class*=part].-justify-end { display: flex; justify-content: flex-end; } .mobile-menu .container [class*=part].-align-start { display: flex; align-items: flex-start; } .mobile-menu .container [class*=part].-align-center { display: flex; align-items: center; } .mobile-menu .container [class*=part].-align-end { display: flex; align-items: flex-end; } .mobile-menu .container [class*=part].-text-left { text-align: left; } .mobile-menu .container [class*=part].-text-center { text-align: center; } .mobile-menu .container [class*=part].-text-right { text-align: right; } @media (max-width: 768px) { .mobile-menu .container { padding-right: 45px; padding-left: 45px; } } .mobile-menu .container a:not(.button):not(.filter__remove):not(.filter__tag), .mobile-menu .container span, .mobile-menu .container li, .mobile-menu .container p, .mobile-menu .container h1, .mobile-menu .container h2, .mobile-menu .container h3, .mobile-menu .container h4, .mobile-menu .container h5, .mobile-menu .container h6 { color: #000; } .mobile-menu__nav { margin-top: 100px; } @media (max-width: 1024px) { .mobile-menu__nav { margin-top: 70px; } } @media (max-width: 768px) { .mobile-menu__nav { margin-top: 70px; } } @media (max-width: 576px) { .mobile-menu__nav { margin-top: 50px; } } @media (max-width: 375px) { .mobile-menu__nav { margin-top: 50px; } } .mobile-menu__link { display: block; } .mobile-menu.-active { left: 0; } .mobile-menu::before { content: ""; position: fixed; top: 0; left: 0; right: 0; bottom: 0; transition: opacity 0.2s ease-in-out; z-index: -2; opacity: 0; pointer-events: none; background-color: rgba(0, 0, 0, 0.5); } .mobile-menu__container { overflow: hidden; height: 100vh; border-radius: 5px; background-color: transparent; } .mobile-menu__nav { position: absolute; left: 0; right: 0; top: 0; transition: transform 0.2s ease-in-out; transform: translateX(100vw); padding: 40px 20px 0; border-radius: 5px; margin-top: 0; border: 1px solid #DADDDF; background-color: white; } .mobile-menu__nav.-first { position: relative; transform: translateX(-100%); } .mobile-menu__nav.-active { transform: translateX(0); } @media (max-width: 576px) { .mobile-menu__tags { padding-right: 20px; } } @media (max-width: 576px) { .mobile-menu__tags small { font-size: 10px; } } .mobile-menu__item, .mobile-menu__link, .mobile-menu__heading { position: relative; display: flex; align-items: center; padding: 0 !important; height: 55px; border-top: 1px solid #DADDDF; font-size: 16px; color: #4A4A4A !important; } .mobile-menu__item *, .mobile-menu__link *, .mobile-menu__heading * { color: inherit !important; } @media (max-width: 576px) { .mobile-menu__item, .mobile-menu__link, .mobile-menu__heading { font-size: 16px; padding: 17px 15px; } } .mobile-menu__item::before, .mobile-menu__link::before, .mobile-menu__heading::before { content: ""; position: absolute; top: 0; bottom: 0; right: 0; transition: opacity 0.2s ease-in-out; margin: auto; width: 7px; height: 23px; background-size: contain; background-repeat: no-repeat; background-position: center center; background-image: url("/img/icons/arrow-right.svg"); background-position: right center; } @media (max-width: 576px) { .mobile-menu__item::before, .mobile-menu__link::before, .mobile-menu__heading::before { height: 15px; } } .mobile-menu__item.-back, .mobile-menu__link.-back, .mobile-menu__heading.-back { cursor: pointer; color: #2D77C0 !important; } .mobile-menu__item.-back::before, .mobile-menu__link.-back::before, .mobile-menu__heading.-back::before { position: static; margin: 0 11px 0 0; width: 7px; background-image: url("/img/icons/arrow-left-grey.svg"); background-position: left center; } .mobile-menu__item.-coming-soon, .mobile-menu__link.-coming-soon, .mobile-menu__heading.-coming-soon { position: relative; pointer-events: none; } .mobile-menu__item.-coming-soon::before, .mobile-menu__link.-coming-soon::before, .mobile-menu__heading.-coming-soon::before { display: none; } .mobile-menu__item.-coming-soon .mobile-menu__model, .mobile-menu__item.-coming-soon img, .mobile-menu__link.-coming-soon .mobile-menu__model, .mobile-menu__link.-coming-soon img, .mobile-menu__heading.-coming-soon .mobile-menu__model, .mobile-menu__heading.-coming-soon img { opacity: 0.5; } .mobile-menu__item.-coming-soon .mobile-menu__image, .mobile-menu__link.-coming-soon .mobile-menu__image, .mobile-menu__heading.-coming-soon .mobile-menu__image { position: relative; } .mobile-menu__item.-coming-soon .mobile-menu__image::after, .mobile-menu__link.-coming-soon .mobile-menu__image::after, .mobile-menu__heading.-coming-soon .mobile-menu__image::after { content: "Coming soon"; position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; right: unset; width: auto; margin-left: -10px; font-size: 12px; font-weight: 700; text-align: center; line-height: 1.3; } .mobile-menu__item.-lang, .mobile-menu__link.-lang, .mobile-menu__heading.-lang { margin-top: -40px; width: -moz-fit-content; width: fit-content; height: 45px; text-transform: uppercase; } .mobile-menu__item.-lang::before, .mobile-menu__link.-lang::before, .mobile-menu__heading.-lang::before { right: unset; left: calc(100% + 10px); background-image: url("/img/icons/arrow-bottom-grey.svg"); } .mobile-menu__image { position: relative; width: 40px; min-width: 40px; height: 40px; margin-right: 20px; } .mobile-menu__image img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; -o-object-position: center; object-position: center; } .mobile-menu__model { display: block; min-width: 50%; } @media (max-width: 576px) { .mobile-menu__model { min-width: 40%; } } .mobile-menu__lang { position: fixed; bottom: 0; transition: transform 0.2s ease-in-out; width: 100%; transform: translateY(calc(100% - 60px)); } .mobile-menu__lang .mobile-menu__item::before { max-width: 110px; transition: transform 0.2s ease-in-out; } .mobile-menu__lang .mobile-menu__link::before { background-image: url("/img/icons/arrow-right.svg"); } .mobile-menu__lang.-active { transform: translateY(0); } .mobile-menu__lang.-active .mobile-menu__item::before { transform: rotate(180deg); } .mobile-menu__link { cursor: pointer; } .mobile-menu__link::before { background-image: url("/img/icons/arrow-right-small.svg"); } .mobile-menu__heading { font-family: work-sans, sans-serif; font-size: 14px; font-weight: 700; line-height: 1.2; color: #AAACB5; text-transform: uppercase; color: #AAACB5 !important; font-size: 11px !important; } @media (max-width: 1024px) { .mobile-menu__heading { font-size: 11px; } } @media (max-width: 768px) { .mobile-menu__heading { font-size: 11px; } } @media (max-width: 576px) { .mobile-menu__heading { font-size: 10px; } } .mobile-menu__heading + * { margin-top: 30px; } @media (max-width: 1024px) { .mobile-menu__heading + * { margin-top: 30px; } } @media (max-width: 768px) { .mobile-menu__heading + * { margin-top: 20px; } } @media (max-width: 576px) { .mobile-menu__heading + * { margin-top: 20px; } } .mobile-menu__heading + .mobile-menu__item { border-top: 0; } .mobile-menu__heading::before { display: none; } .mobile-menu__heading + * { margin-top: 0; } .mobile-menu.-active { left: unset; right: calc(90px - 20px); } @media (max-width: 768px) { .mobile-menu.-active { right: calc(45px - 20px); } } @media (max-width: 576px) { .mobile-menu.-active { right: calc(15px - 8px); } } .mobile-menu.-active::before { opacity: 1; } .hamburger { position: relative; display: none; width: 20px; height: 10px; cursor: pointer; position: relative; right: 0; z-index: 99; transition: 0.2s ease-in-out; margin-top: 0; } @media (max-width: 1395px) { .hamburger { display: block; } } .hamburger span { position: absolute; right: 0; display: inline-block; transition: 0.2s ease-in-out; width: 100%; height: 1px; margin: auto; background-color: #000; } .hamburger span:nth-of-type(1) { top: 0; } .hamburger span:nth-of-type(2) { top: 0; bottom: 0; } .hamburger span:nth-of-type(3) { top: calc(10px - 1px); } .hamburger span { left: 0; right: 0; } .hamburger span:nth-of-type(1), .hamburger span:nth-of-type(3) { transition: transform 250ms ease-in-out, top 250ms ease-in-out 250ms; } .hamburger span:nth-of-type(2) { transition: width 250ms 250ms; } .hamburger.-active span { background-color: #000; } .hamburger.-active span:nth-of-type(1) { top: calc(5px); transform: rotate(-45deg); } .hamburger.-active span:nth-of-type(2) { width: 0; transition: width 250ms; } .hamburger.-active span:nth-of-type(3) { top: calc(5px); transform: rotate(45deg); } .hamburger.-active span:nth-of-type(1), .hamburger.-active span:nth-of-type(3) { transition: top 250ms ease-in-out, transform 250ms ease-in-out 250ms; } .hamburger span:nth-child(2) { opacity: 0; } @media (max-width: 576px) { .hamburger.-active { right: 10px; } } .faq__item { display: block; } .faq__item.-active .faq__answer { height: auto; } .faq__question { position: relative; cursor: pointer; } .faq__icon { position: absolute; right: 0; top: 0; width: 20px; height: auto; } .faq__answer { overflow: hidden; height: 0; margin: 0; padding: 0; } .faq__icon { transition: transform 0.2s ease-in-out; transform-origin: center; } .faq__item.-active .faq__icon { transform: rotate(180deg); } .faq__item { position: relative; padding: 40px 70px; background-color: whitesmoke; } @media (max-width: 768px) { .faq__item { padding: 30px 40px; } } @media (max-width: 576px) { .faq__item { padding: 30px 15px; } } .faq__item .button, .faq__item .filter__remove, .faq__item .filter__tag { position: absolute; right: 70px; bottom: 40px; } @media (max-width: 768px) { .faq__item .button, .faq__item .filter__remove, .faq__item .filter__tag { position: static; margin-top: 20px; } } .faq__item + * { margin-top: 20px; } .faq__item.-active .faq__answer { margin: 50px 0; } @media (max-width: 576px) { .faq__item.-active .faq__answer { margin: 30px 0 10px; } } .faq__item.-active .icon { transform: rotate(180deg); } .faq__item.-active .icon:hover { transform: translateX(3px) rotate(180deg); } .faq__question { position: static; width: 66%; } @media (max-width: 768px) { .faq__question { display: flex; flex-direction: column; align-items: flex-start; width: 100%; } } .faq__answer { width: 66%; } @media (max-width: 768px) { .faq__answer { width: 100%; } } .block { padding: 30px 30px; border-radius: 10px; background-color: #000; background-image: url("/img/gradient/gradient-block.svg"); background-size: cover; background-repeat: no-repeat; background-position: center center; background-position: bottom center; } @media (max-width: 1024px) { .block { padding: 30px 30px; } } @media (max-width: 768px) { .block { padding: 30px 30px; } } @media (max-width: 576px) { .block { padding: 30px 30px; } } .block a:not(.button):not(.filter__remove):not(.filter__tag), .block span, .block li, .block p, .block h1, .block h2, .block h3, .block h4, .block h5, .block h6 { color: white; } .block h1, .block h2, .block h3, .block h4, .block h5, .block h6, .block .heading-1, .block .heading-2, .block .heading-3, .block .heading-4, .block .heading-5, .block .heading-6 { color: white; } .block.-gradient-bottom-right { transition: 0.75s ease-in-out 500ms; background-image: url("/img/gradient/gradient-bottom-right.svg"); background-size: 0; background-position: bottom right; } .block.-gradient-bottom-center { transition: 0.75s ease-in-out 500ms; background-image: url("/img/gradient/gradient-bottom-center-green.svg"); background-size: 0; background-position: bottom center; } .block.-large { padding-top: 100px; padding-bottom: 100px; } @media (max-width: 1024px) { .block.-large { padding-top: 70px; } } @media (max-width: 768px) { .block.-large { padding-top: 70px; } } @media (max-width: 576px) { .block.-large { padding-top: 50px; } } @media (max-width: 375px) { .block.-large { padding-top: 50px; } } @media (max-width: 1024px) { .block.-large { padding-bottom: 70px; } } @media (max-width: 768px) { .block.-large { padding-bottom: 70px; } } @media (max-width: 576px) { .block.-large { padding-bottom: 50px; } } @media (max-width: 375px) { .block.-large { padding-bottom: 50px; } } .block.-center { display: flex; flex-direction: column; align-items: center; } .block.-bordered, .block.filter__tag { border: 1px solid #DADDDF; } .block.-color-1 { background-color: #23457c; } .block.-color-1 a:not(.button):not(.filter__remove):not(.filter__tag), .block.-color-1 span, .block.-color-1 li, .block.-color-1 p, .block.-color-1 h1, .block.-color-1 h2, .block.-color-1 h3, .block.-color-1 h4, .block.-color-1 h5, .block.-color-1 h6 { color: white; } .block.-color-1 h1, .block.-color-1 h2, .block.-color-1 h3, .block.-color-1 h4, .block.-color-1 h5, .block.-color-1 h6, .block.-color-1 .heading-1, .block.-color-1 .heading-2, .block.-color-1 .heading-3, .block.-color-1 .heading-4, .block.-color-1 .heading-5, .block.-color-1 .heading-6 { color: white; } .block.-color-2 { background-color: #e5e5e5; } .block.-color-2 a:not(.button):not(.filter__remove):not(.filter__tag), .block.-color-2 span, .block.-color-2 li, .block.-color-2 p, .block.-color-2 h1, .block.-color-2 h2, .block.-color-2 h3, .block.-color-2 h4, .block.-color-2 h5, .block.-color-2 h6 { color: white; } .block.-color-2 h1, .block.-color-2 h2, .block.-color-2 h3, .block.-color-2 h4, .block.-color-2 h5, .block.-color-2 h6, .block.-color-2 .heading-1, .block.-color-2 .heading-2, .block.-color-2 .heading-3, .block.-color-2 .heading-4, .block.-color-2 .heading-5, .block.-color-2 .heading-6 { color: white; } .block.-color-3 { background-color: #AAACB5; } .block.-color-3 a:not(.button):not(.filter__remove):not(.filter__tag), .block.-color-3 span, .block.-color-3 li, .block.-color-3 p, .block.-color-3 h1, .block.-color-3 h2, .block.-color-3 h3, .block.-color-3 h4, .block.-color-3 h5, .block.-color-3 h6 { color: #4b4b4b; } .block.-color-3 h1, .block.-color-3 h2, .block.-color-3 h3, .block.-color-3 h4, .block.-color-3 h5, .block.-color-3 h6, .block.-color-3 .heading-1, .block.-color-3 .heading-2, .block.-color-3 .heading-3, .block.-color-3 .heading-4, .block.-color-3 .heading-5, .block.-color-3 .heading-6 { color: #4b4b4b; } .block.-white { background-color: white; border: 1px solid #DADDDF; } .block.-white a:not(.button):not(.filter__remove):not(.filter__tag), .block.-white span, .block.-white li, .block.-white p, .block.-white h1, .block.-white h2, .block.-white h3, .block.-white h4, .block.-white h5, .block.-white h6 { color: #000; } .block.-white h1, .block.-white h2, .block.-white h3, .block.-white h4, .block.-white h5, .block.-white h6, .block.-white .heading-1, .block.-white .heading-2, .block.-white .heading-3, .block.-white .heading-4, .block.-white .heading-5, .block.-white .heading-6 { color: #000; } .block.-white *:not(.tag):not(.question__subtitle):not(.cta__footer) { color: #000 !important; } .block.-white .divider { border-color: #000; } .block.-black { background-color: #000; } .block.-black a:not(.button):not(.filter__remove):not(.filter__tag), .block.-black span, .block.-black li, .block.-black p, .block.-black h1, .block.-black h2, .block.-black h3, .block.-black h4, .block.-black h5, .block.-black h6 { color: white; } .block.-black h1, .block.-black h2, .block.-black h3, .block.-black h4, .block.-black h5, .block.-black h6, .block.-black .heading-1, .block.-black .heading-2, .block.-black .heading-3, .block.-black .heading-4, .block.-black .heading-5, .block.-black .heading-6 { color: white; } .block.-text-center { text-align: center; } .block + * { margin-top: 20px; } .-into-view .block.-gradient-bottom-center { background-size: 100%; } .-into-view .block.-gradient-bottom-right { background-size: 60%; } .blocks { display: flex; flex-wrap: wrap; justify-content: space-between; } .blocks .block { padding: 50px; width: calc(50% - 8px); background: white; background-image: url("/img/gradient/block-1-gradient.svg"); background-size: cover; background-repeat: no-repeat; background-position: center center; background-position: left -10px top -10px; } @media (max-width: 768px) { .blocks .block { width: 100%; padding: 20px; } } .blocks .block:nth-child(even) { background-image: url("/img/gradient/block-2-gradient.svg"); } .blocks .block h1, .blocks .block h2, .blocks .block h3, .blocks .block h4, .blocks .block h5, .blocks .block h6, .blocks .block .heading-1, .blocks .block .heading-2, .blocks .block .heading-3, .blocks .block .heading-4, .blocks .block .heading-5, .blocks .block .heading-6 { color: #000 !important; } .blocks .block h6 { color: #717484 !important; } .blocks .block + .block { margin-top: 0 !important; } @media (max-width: 768px) { .blocks .block + .block { margin-top: 20px !important; } } .grey-block { padding: 70px; background-color: whitesmoke; } @media (max-width: 1024px) { .grey-block { padding: 25px; } } .grey-block .tag { margin-bottom: 15px; } .grey-block.-bottom-text { display: flex; flex-direction: column; } .grey-block.-bottom-text h1, .grey-block.-bottom-text h2, .grey-block.-bottom-text h3, .grey-block.-bottom-text h4, .grey-block.-bottom-text h5, .grey-block.-bottom-text h6, .grey-block.-bottom-text .heading-1, .grey-block.-bottom-text .heading-2, .grey-block.-bottom-text .heading-3, .grey-block.-bottom-text .heading-4, .grey-block.-bottom-text .heading-5, .grey-block.-bottom-text .heading-6 { flex-grow: 1; } p.-large + .block { margin-top: 100px; } @media (max-width: 768px) { p.-large + .block { margin-top: 40px; } } .image { border-radius: 10px; } @media (max-width: 1024px) { .image { border-radius: 7px; } } @media (max-width: 576px) { .image { border-radius: 5px; } } .image + * { margin-top: 50px; } @media (max-width: 1024px) { .image + * { margin-top: 50px; } } @media (max-width: 768px) { .image + * { margin-top: 50px; } } @media (max-width: 576px) { .image + * { margin-top: 30px; } } @media (max-width: 375px) { .image + * { margin-top: 30px; } } .image img { border-radius: inherit; } .image--lowpad-detail { position: absolute; overflow: hidden; top: 60px; left: 0; pointer-events: none; height: 300vh; } .image--lowpad-detail img { position: relative; left: -7%; width: 114%; max-width: unset; } @media (max-width: 576px) { .image--lowpad-detail img { left: -50%; width: 200%; } } .image--cover { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; -o-object-position: center; object-position: center; } .image--contain { width: 100%; height: 100%; -o-object-fit: contain; object-fit: contain; -o-object-position: center; object-position: center; } .image__header { overflow: hidden; position: relative; padding-top: 52%; background-image: url("/img/home/home-header.webp"); background-size: cover; background-repeat: no-repeat; background-position: center center; border-radius: 10px; } @media (max-width: 1024px) { .image__header { border-radius: 7px; } } @media (max-width: 576px) { .image__header { border-radius: 5px; } } .image__header > * { position: absolute !important; -o-object-fit: cover; object-fit: cover; position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; } .image--full { position: relative; min-height: 100%; width: calc(100% + 90px + ((100vw - 1560px) / 2)); height: 0; padding-top: calc(100% + 90px + ((100vw - 1560px) / 2)); } @media (max-width: calc(1560px)) { .image--full { width: calc(100% + 90px); padding-top: calc(100% + 90px); } } @media (max-width: 1024px) { .image--full { float: right; } } @media (max-width: 768px) { .image--full { width: calc(100% + 45px); padding-top: calc(100% + 45px); } } @media (max-width: 576px) { .image--full { width: calc(100% + 15px); padding-top: calc(100% + 15px); } } .image--full img { position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; -o-object-position: center; object-position: center; } .image--full.-right { float: right; } .image--full .tab__panel { opacity: 0; visibility: hidden; pointer-events: none; transition: 0.2s ease-in-out; } .image--full .tab__panel.-active { opacity: 1; visibility: visible; pointer-events: auto; } .image--full.-bg-dark { background-color: #252627; } .image--full.-png { padding-top: 100%; } .image--full.-png > img { left: 20%; top: 10%; height: 80%; width: 60%; -o-object-fit: contain; object-fit: contain; } .image--full.-sticky { position: sticky; top: 90px; min-height: unset; padding-top: calc(100vh - 90px); max-height: calc(100vh - 90px); } @media (max-width: 1024px) { .image--full.-sticky { float: left; } } @media (max-width: 768px) { .image--full.-sticky { padding-top: 90vw; max-height: unset; } } @media (max-width: 576px) { .image--full.-sticky { width: calc(100% + 90px); margin-left: -45px; } } .--logo { width: 210px; } @media (max-width: 576px) { .--logo { width: 123px; } } .section .container [class*=part] { position: relative; } .section .container [class*=part] > img { border-radius: 10px; } @media (max-width: 1024px) { .section .container [class*=part] > img { border-radius: 7px; } } @media (max-width: 576px) { .section .container [class*=part] > img { border-radius: 5px; } } .section .container [class*=part].--colored { padding: calc(((1560px - (24px * (12 - 1))) / 12) * 1 + (24px * (1 - 1))); background-color: #23457c; } .section .container [class*=part].--colored.-color-1 { background-color: #23457c; } .section .container [class*=part].--colored.-color-2 { background-color: #e5e5e5; } .section .container [class*=part].--colored.-color-3 { background-color: #AAACB5; } .section .container [class*=part].--colored.-white { background-color: white; } .section .container [class*=part].--colored.-black { background-color: #000; } @media (max-width: 1024px) { .section .container [class*=part].part-l-0 { display: none; } } .section .container [class*=part].-align-between { display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start; } .section .container [class*=part].-left-space { padding-left: calc(((1560px - (24px * (12 - 1))) / 12) * 1 + (24px * (1 - 1))); } @media (max-width: 1280px) { .section .container [class*=part].-left-space { padding-left: calc(9% + 16px); } } @media (max-width: 1024px) { .section .container [class*=part].-left-space { padding-left: 0; } } .section .container [class*=part].-right-space { padding-right: calc(((1560px - (24px * (12 - 1))) / 12) * 1 + (24px * (1 - 1))); } @media (max-width: 1280px) { .section .container [class*=part].-right-space { padding-right: calc(9% + 16px); } } @media (max-width: 1024px) { .section .container [class*=part].-right-space { padding-right: 0; } } .section .container [class*=part].-left-bordered { position: relative; padding-left: calc(((1560px - (24px * (12 - 1))) / 12) * 1 + (24px * (1 - 1))); } @media (max-width: 1280px) { .section .container [class*=part].-left-bordered { padding-left: calc(9% + 16px); } } .section .container [class*=part].-left-bordered .container:last-child { margin-bottom: 0; } .section .container [class*=part].-left-bordered .container:last-child [class*=part]:last-child { margin-bottom: 0; } .section .container [class*=part].-left-bordered::before { content: ""; position: absolute; left: 0; top: calc(-100px); display: block; height: calc(100% + 200px); border-left: 1px solid #DADDDF; } @media (max-width: 1024px) { .section .container [class*=part].-left-bordered::before { top: calc(-70px); height: calc(100% + 140px); } } @media (max-width: 768px) { .section .container [class*=part].-left-bordered::before { top: calc(-70px); height: calc(100% + 140px); } } @media (max-width: 576px) { .section .container [class*=part].-left-bordered::before { top: calc(-50px); height: calc(100% + 100px); } } @media (max-width: 1024px) { .section .container [class*=part].-left-bordered.part-l-8 { padding-left: 0; } } @media (max-width: 1024px) { .section .container [class*=part].-left-bordered.part-l-8::before { display: none; } } @media (max-width: 576px) { .section .container [class*=part].-left-bordered.part-s-4 { padding-left: 0; } } @media (max-width: 576px) { .section .container [class*=part].-left-bordered.part-s-4::before { display: none; } } .section .container [class*=part].-left-bordered.-no-left-space { padding-left: 0; } .section .container [class*=part].-left-bordered.-no-left-space [class*=part] { padding-left: calc(((1560px - (24px * (12 - 1))) / 12) * 1 + (24px * (1 - 1))); } @media (max-width: 1280px) { .section .container [class*=part].-left-bordered.-no-left-space [class*=part] { padding-left: calc(12% + 16px); } } @media (max-width: 576px) { .section .container [class*=part].-left-bordered.-no-left-space.part-s-4::before { display: none; } } @media (max-width: 576px) { .section .container [class*=part].-left-bordered.-no-left-space.part-s-4 [class*=part] { padding-left: 0 !important; } .section .container [class*=part].-left-bordered.-no-left-space.part-s-4 [class*=part] + div { padding-top: 0; } } .section .container [class*=part].-bottom-bordered { position: relative; border-bottom: 1px solid #DADDDF; padding-bottom: 100px; } @media (max-width: 1024px) { .section .container [class*=part].-bottom-bordered { padding-bottom: 70px; } } @media (max-width: 768px) { .section .container [class*=part].-bottom-bordered { padding-bottom: 70px; } } @media (max-width: 576px) { .section .container [class*=part].-bottom-bordered { padding-bottom: 50px; } } @media (max-width: 375px) { .section .container [class*=part].-bottom-bordered { padding-bottom: 50px; } } @media (min-width: 1280px) { .section .container [class*=part].-bottom-bordered { padding-bottom: calc(((1560px - (24px * (12 - 1))) / 12) * 1 + (24px * (1 - 1))); } } @media (max-width: 576px) { .section .container [class*=part].-bottom-bordered { padding-bottom: 30px; } } @media (max-width: 576px) { .section .container [class*=part].-bottom-bordered:empty { display: none; } } .section .container [class*=part].-bottom-bordered + .part-12 { padding-top: 50px; } @media (max-width: 1024px) { .section .container [class*=part].-bottom-bordered + .part-12 { padding-top: 50px; } } @media (max-width: 768px) { .section .container [class*=part].-bottom-bordered + .part-12 { padding-top: 50px; } } @media (max-width: 576px) { .section .container [class*=part].-bottom-bordered + .part-12 { padding-top: 30px; } } @media (max-width: 375px) { .section .container [class*=part].-bottom-bordered + .part-12 { padding-top: 30px; } } .section .container [class*=part].-top-space-grid { padding-top: 50px; } @media (max-width: 1024px) { .section .container [class*=part].-top-space-grid { padding-top: 50px; } } @media (max-width: 768px) { .section .container [class*=part].-top-space-grid { padding-top: 50px; } } @media (max-width: 576px) { .section .container [class*=part].-top-space-grid { padding-top: 30px; } } @media (max-width: 375px) { .section .container [class*=part].-top-space-grid { padding-top: 30px; } } @media (max-width: 1024px) { .section .container [class*=part].-top-space-grid { padding-top: 0; } } .section .container [class*=part].-title { display: flex; align-items: flex-end; justify-content: space-between; width: 100%; } .section .container [class*=part].-title .link { width: -moz-fit-content; width: fit-content; } @media (max-width: 576px) { .section .container [class*=part].-top-bordered-s { padding-top: 30px; border-top: 1px solid #DADDDF; } } @media (max-width: 576px) { .section .container [class*=part].-justify-between-s { display: flex; justify-content: space-between; flex-direction: row; align-items: flex-start; } .section .container [class*=part].-justify-between-s > * { margin-top: 0; } } .section .container [class*=part].-sticky { position: sticky; top: calc(50vh - 190px); height: fit-content; height: -moz-fit-content; } @media (max-width: 576px) { .section .container [class*=part].-sticky { position: static; padding-left: 36px; } } @media (max-width: 576px) { .section .container [class*=part].part-s-0 { display: none !important; } } .section.--colored .container [class*=part].-left-bordered, .section.--colored .container [class*=part].-bottom-bordered, .section.--colored .container [class*=part].-top-bordered-s { border-color: #717484; } .section.--colored .container [class*=part].-left-bordered::before, .section.--colored .container [class*=part].-bottom-bordered::before, .section.--colored .container [class*=part].-top-bordered-s::before { border-color: #717484; } .video { position: relative; } .video__source { position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; -o-object-position: center; object-position: center; display: block; border-radius: 10px; object-fit: cover; } @media (max-width: 1024px) { .video__source { border-radius: 7px; } } @media (max-width: 576px) { .video__source { border-radius: 5px; } } .video__control { position: absolute; left: 0; top: 0; right: 0; bottom: 0; margin: auto; width: -moz-fit-content; width: fit-content; height: -moz-fit-content; height: fit-content; transform: translateX(-12px); } .video__container { position: relative; padding-top: 52%; } .video__description { padding: 20px; } .video__description::after { content: ""; position: absolute; bottom: 0; left: 0; right: 0; width: 100%; height: 10px; border: 1px solid #DADDDF; border-top: 0; border-radius: 0 0 10px 10px; } .video.-playing .video__control, .video.-autoplay .video__control { opacity: 0; } .video + .editor-js-content { margin-top: 50px; } @media (max-width: 1024px) { .video + .editor-js-content { margin-top: 50px; } } @media (max-width: 768px) { .video + .editor-js-content { margin-top: 50px; } } @media (max-width: 576px) { .video + .editor-js-content { margin-top: 30px; } } @media (max-width: 375px) { .video + .editor-js-content { margin-top: 30px; } } .-left .video__source { padding-right: 0; } .carousel__button { right: -55px !important; top: -65px !important; } @media (max-width: 1024px) { .carousel__button { right: -10px !important; top: -55px !important; } } .numbers__item { border-bottom: 1px solid rgba(0, 0, 0, 0.5); padding-bottom: 60px; } @media (max-width: 576px) { .numbers__item:not(:last-of-type) { margin-bottom: 25px !important; } } @media (max-width: 1024px) { .numbers__item { padding-bottom: 30px; } } .numbers__row { display: flex; align-items: flex-start; margin-bottom: 50px; } @media (max-width: 1024px) { .numbers__row { margin-bottom: 20px; } } @media (max-width: 576px) { .numbers__row { margin-bottom: 0; } } .numbers__number { display: flex; } .numbers__overlay { overflow: hidden; height: 160px; } @media (max-width: 1680px) { .numbers__overlay { height: 136px; } } @media (max-width: 1024px) { .numbers__overlay { height: 112px; } } @media (max-width: 576px) { .numbers__overlay { height: 64px; } } .numbers__inner { position: relative; top: 160px; display: flex; flex-direction: column; } @media (max-width: 1680px) { .numbers__inner { top: 136px; } } @media (max-width: 1024px) { .numbers__inner { top: 112px; } } @media (max-width: 576px) { .numbers__inner { top: 64px; } } .numbers__inner > span { font-weight: 700; line-height: 1; font-size: 160px; } @media (max-width: 1680px) { .numbers__inner > span { font-size: 136px; } } @media (max-width: 1024px) { .numbers__inner > span { font-size: 112px; } } @media (max-width: 576px) { .numbers__inner > span { font-size: 64px; } } .numbers__unit { margin-left: 15px; margin-top: 3px; transform: translateY(65px); opacity: 0; transition: none; } @media (max-width: 576px) { .numbers__unit { margin-left: 5px; } } .numbers .icon { display: block; transform: translateY(-100px); opacity: 0; transition: none; margin-top: 23px; min-width: 13px; margin-right: 25px; width: 13px; } @media (max-width: 1024px) { .numbers .icon { margin-top: 30px; } } @media (max-width: 576px) { .numbers .icon { margin-right: 10px; margin-top: 16px; transform: translateY(-20px); opacity: 0; transition: none; } } .numbers .icon polygon { fill: #54d054 !important; } .numbers.-into-view .numbers__inner { transition: 3s ease-in-out; } .numbers.-into-view .numbers__unit, .numbers.-into-view .icon { opacity: 1; transform: translate(0); transition: 3s ease-in-out; } .quote { display: flex; flex-direction: column; align-items: center; border-radius: 10px; border: 1px solid #DADDDF; padding-top: 100px; padding-bottom: 100px; padding-right: 100px; padding-left: 100px; background-image: url("/img/gradient/quote-background.svg"); background-size: cover; background-repeat: no-repeat; background-position: center center; } @media (max-width: 1024px) { .quote { border-radius: 7px; } } @media (max-width: 576px) { .quote { border-radius: 5px; } } @media (max-width: 1024px) { .quote { padding-top: 70px; } } @media (max-width: 768px) { .quote { padding-top: 70px; } } @media (max-width: 576px) { .quote { padding-top: 50px; } } @media (max-width: 375px) { .quote { padding-top: 50px; } } @media (max-width: 1024px) { .quote { padding-bottom: 70px; } } @media (max-width: 768px) { .quote { padding-bottom: 70px; } } @media (max-width: 576px) { .quote { padding-bottom: 50px; } } @media (max-width: 375px) { .quote { padding-bottom: 50px; } } @media (max-width: 1024px) { .quote { padding-right: 70px; } } @media (max-width: 768px) { .quote { padding-right: 70px; } } @media (max-width: 576px) { .quote { padding-right: 50px; } } @media (max-width: 375px) { .quote { padding-right: 50px; } } @media (max-width: 1024px) { .quote { padding-left: 70px; } } @media (max-width: 768px) { .quote { padding-left: 70px; } } @media (max-width: 576px) { .quote { padding-left: 50px; } } @media (max-width: 375px) { .quote { padding-left: 50px; } } @media (max-width: 576px) { .quote { padding: 30px; } } .quote__text { max-width: 920px; margin-left: auto; margin-right: auto; padding-bottom: 50px; } @media (max-width: 1024px) { .quote__text { padding-bottom: 50px; } } @media (max-width: 768px) { .quote__text { padding-bottom: 50px; } } @media (max-width: 576px) { .quote__text { padding-bottom: 30px; } } @media (max-width: 375px) { .quote__text { padding-bottom: 30px; } } @media (max-width: 576px) { .quote__text { padding-bottom: 20px; } } .quote__text p { font-family: work-sans, sans-serif; font-size: 34px; line-height: 1.17; letter-spacing: -0.02rem; color: #000; } @media (max-width: 1024px) { .quote__text p { font-size: 22px; } } @media (max-width: 576px) { .quote__text p { font-size: 19px; } } .quote__name { font-size: 22px; color: #AAACB5; } @media (max-width: 576px) { .quote__name { font-size: 16px; } } .quote .tag { margin-right: 0; } @media (max-width: 576px) { .quote .tag { margin-top: 20px; } } .quote * { text-align: center; } .section .container [class*=part] .sticky-menu { position: sticky; top: calc(110px); display: flex; flex-direction: column; min-height: calc(100vh - 160px); } @media (max-width: 1024px) { .section .container [class*=part] .sticky-menu { min-height: unset; } } .section .container [class*=part] .sticky-menu__bottom { padding-top: 50px; margin-top: auto; } @media (max-width: 1024px) { .section .container [class*=part] .sticky-menu__bottom { display: none; } } .section .container [class*=part] .sticky-menu__bottom .link.-active { font-weight: 400; } .section .container [class*=part] .sticky-menu__bottom .link.-active .icon { opacity: 1; } .section .container [class*=part] .sticky-menu__bottom .link.-active ~ .-active .icon { opacity: 0; } .section .container [class*=part] .sticky-menu__bottom .link.-active ~ .-active:hover .icon { opacity: 1; } .link { display: flex; justify-content: space-between; align-items: center; padding: 20px 38px; border: 1px solid #DADDDF; border-radius: 20px; } @media (max-width: 1024px) { .link { border-radius: 15px; } } @media (max-width: 576px) { .link { border-radius: 15px; } } @media (max-width: 1024px) { .link { padding: 12px; } } @media (max-width: 576px) { .link { padding: 20px; } } .link__button { margin-top: 0 !important; } .menu .container { justify-content: flex-start; height: auto; } .menu__link { position: relative; display: flex; align-items: center; height: 100%; cursor: pointer; color: white; } .menu__link::after { content: ""; position: absolute; bottom: 0; left: 0; width: 100%; height: 4px; border-radius: 4px 4px 0 0; background-color: transparent; } @media (max-width: 1395px) { .menu__link { display: none; } } .menu__link.-active::after { background-color: #2D77C0; } .menu__link + .menu__link { margin-left: 25px; } @media (max-width: 1600px) { .menu__link + .menu__link { margin-left: 20px; } } .menu .icon { width: 15px; margin-left: 10px; } .menu__title { display: flex; align-items: center; font-family: work-sans, sans-serif; font-size: 16px; font-weight: 400; color: #3c3c3c !important; white-space: nowrap; text-overflow: ellipsis; } .menu__title > svg { min-width: 10px; margin-left: 8px; transition: all ease-in-out 350ms; } .menu__title .tag { margin-left: 10px; } .menu__tags { position: absolute; top: 0; left: 0; } .menu__link, .menu__title { transition: 0.2s ease-in-out; } .menu__link:hover, .menu__title:hover { color: #aaacb6 !important; } .-loaded .menu__submenu { transition: 0.2s ease-in-out; } .section .tech__image { display: flex; align-items: center; justify-content: center; border-radius: 10px; position: relative; height: auto; background-color: #DADDDF; } @media (max-width: 1024px) { .section .tech__image { border-radius: 7px; } } @media (max-width: 576px) { .section .tech__image { border-radius: 5px; } } .section .tech__image::before { content: ""; display: block; padding-top: 100%; width: 100%; } .section .tech__image img { position: absolute; width: 77%; height: 77%; } .controls { display: flex; align-items: center; flex-wrap: wrap; margin-bottom: -24px; } @media (max-width: 1024px) { .controls { margin-bottom: -10px; } } @media (max-width: 768px) { .controls { margin-bottom: -5px; } } @media (max-width: 576px) { .controls { margin-bottom: -15px; } } .controls > * { margin-top: 0; margin-bottom: 24px; margin-right: 24px; } @media (max-width: 1024px) { .controls > * { margin-bottom: 10px; margin-right: 10px; } } @media (max-width: 768px) { .controls > * { margin-bottom: 5px; margin-right: 5px; } } @media (max-width: 576px) { .controls > * { margin-bottom: 15px; margin-right: 15px; } } .controls > *:last-child { margin-right: 0; } .controls .control { display: inline-flex; align-items: center; padding: 11px 18px; border-radius: 10px; cursor: pointer; -webkit-appearance: none; -moz-appearance: none; appearance: none; font-family: open-sans, sans-serif; line-height: 1.55; font-size: 18px; font-weight: 400; color: #4A4A4A; color: white; line-height: 1.1; text-decoration: none; background-color: #23457c; transition: color 0.2s ease-in-out, border 0.2s ease-in-out; margin-top: 0; height: -moz-min-content; height: min-content; border: 1px solid #DADDDF; margin-right: 24px; margin-top: 0 !important; background: transparent; cursor: pointer; color: #23457c; } @media (max-width: 1024px) { .controls .control { font-size: 16px; } } @media (max-width: 768px) { .controls .control { font-size: 16px; } } @media (max-width: 576px) { .controls .control { font-size: 13px; } } .controls .control + * { margin-top: 45px; } @media (max-width: 1024px) { .controls .control + * { margin-top: 35px; } } @media (max-width: 768px) { .controls .control + * { margin-top: 35px; } } @media (max-width: 576px) { .controls .control + * { margin-top: 35px; } } .controls .control__icon { display: block; margin-left: 15px; height: 100%; width: auto; } .controls .control__icon rect, .controls .control__icon circle, .controls .control__icon ellipse, .controls .control__icon path, .controls .control__icon polygon, .controls .control__icon polyline { fill: currentColor; } .controls .control__icon.-left { margin-left: 0; margin-right: 15px; } .controls .control::before { content: ""; width: 9px; height: 9px; border-radius: 2px; margin-right: 15px; background-color: #23457c; } @media (max-width: 1024px) { .controls .control::before { margin-right: 10px; width: 6px; height: 6px; } } .controls .control:hover::before { background-color: #B5FF00; } .control__arrow { position: absolute; top: 0; bottom: 0; display: flex; align-items: center; justify-content: center; display: none; width: 50px; height: 50px; margin: auto; background-color: #23457c; } @media (max-width: 576px) { .control__arrow { display: flex; } } .control__arrow:not(.-right) { left: -15px; border-top-right-radius: 10px; border-bottom-right-radius: 10px; } .control__arrow.-right { right: -15px; border-top-left-radius: 10px; border-bottom-left-radius: 10px; } .control__arrow svg { width: 18px; height: auto; } .control__arrow svg rect, .control__arrow svg circle, .control__arrow svg ellipse, .control__arrow svg path, .control__arrow svg polygon, .control__arrow svg polyline { fill: white; } .contact { display: flex; flex-wrap: wrap; margin-top: 0; } .contact__column { width: 42%; min-width: -moz-fit-content; min-width: fit-content; margin-top: 35px; } @media (max-width: 576px) { .contact__column { margin-top: 20px; } } .contact__column:nth-of-type(2) { width: 58%; } .contact__column h1, .contact__column h2, .contact__column h3, .contact__column h4, .contact__column h5, .contact__column h6, .contact__column .heading-1, .contact__column .heading-2, .contact__column .heading-3, .contact__column .heading-4, .contact__column .heading-5, .contact__column .heading-6 { margin-top: 10px; } .usps { display: flex; flex-wrap: wrap; margin-bottom: -30px; } .usps__item { flex: 1; padding: 0 12px; margin-bottom: 30px; } @media (max-width: 1024px) { .usps__item { display: flex; align-items: flex-start; flex: unset; width: 100%; } } @media (max-width: 576px) { .usps__item { padding: 0; } } .usps__item img { width: 54px; } @media (max-width: 1024px) { .usps__item img { margin-right: 35px; width: 40px; } } .usps__item img + * { margin-top: 25px; } @media (max-width: 576px) { .usps__item img + * { margin-top: 15px; } } @media (max-width: 1024px) { .usps__text { margin-top: 0 !important; } } @media (max-width: 1024px) { .usps__text p { margin-top: 0; } } .usps.-lowpad-f .usps__title { margin-bottom: -200px; } @media (max-width: 1280px) { .usps.-lowpad-f .usps__title { margin-bottom: -120px; } } @media (max-width: 1024px) { .usps.-lowpad-f .usps__title { margin-bottom: -100px; } } @media (max-width: 576px) { .usps.-lowpad-f .usps__title { margin-bottom: -45px; } } .usps.-large .usps__image { width: calc(((1560px - (24px * (12 - 1))) / 12) * 5 + (24px * (5 - 1))); } @media (max-width: 576px) { .usps.-large .usps__image { width: 60%; } } .clients__item { position: relative; padding: 40px 0; border-top: 1px solid rgba(255, 255, 255, 0.5); } .clients__item p, .clients__item .editor-js-content, .clients__item br, .clients__item .button, .clients__item .filter__remove, .clients__item .filter__tag { display: none; } .clients__item-author { display: block; margin-top: 15px; } .clients__item-author br { display: block; } .clients__item .client__button { position: absolute; right: 0; top: 0; bottom: 0; display: block; margin: auto; height: -moz-fit-content; height: fit-content; } .clients__item:last-of-type { border-bottom: 1px solid rgba(255, 255, 255, 0.5); } .clients__item.-active p, .clients__item.-active .editor-js-content, .clients__item.-active br { display: block; } .clients__item.-active .button, .clients__item.-active .filter__remove, .clients__item.-active .filter__tag { display: inline-block; } .clients__item.-active .client__button { display: none; } .clients__logo { position: absolute; left: 0; top: 0; padding: 30px; width: 270px !important; height: auto !important; } @media (max-width: 1024px) { .clients__logo { width: 240px !important; } } @media (max-width: 576px) { .clients__logo { padding: 20px; width: 200px !important; } } .clients__logo::before { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; background-color: rgba(255, 255, 255, 0); -webkit-backdrop-filter: blur(30px) brightness(115%); backdrop-filter: blur(30px) brightness(115%); } .clients__logo img { position: relative !important; display: block; width: 100%; height: 100%; -o-object-fit: contain; object-fit: contain; -o-object-position: center; object-position: center; } .section .container .tab__panel { display: none; } .section .container .tab__panel.-active { display: block; } .section .container .tab__panel + .controls { margin-top: 100px; margin-top: 100px; } @media (max-width: 1024px) { .section .container .tab__panel + .controls { margin-top: 100px; margin-top: 100px; } } @media (max-width: 768px) { .section .container .tab__panel + .controls { margin-top: 100px; margin-top: 100px; } } @media (max-width: 576px) { .section .container .tab__panel + .controls { margin-top: 50px; margin-top: 50px; } } .section .container .tab__panel.-auto { display: block; opacity: 0; transition: opacity 0.75s ease-in-out; } .section .container .tab__panel.-auto.-active { opacity: 1; } .casetab { position: relative; padding: 20%; background-color: #f5f5f5; margin-top: 100px; } @media (max-width: 1024px) { .casetab { margin-top: 70px; } } @media (max-width: 768px) { .casetab { margin-top: 70px; } } @media (max-width: 576px) { .casetab { margin-top: 50px; } } @media (max-width: 375px) { .casetab { margin-top: 50px; } } .casetab img { height: 60px; max-width: 80%; margin-top: 40px; -o-object-fit: contain; object-fit: contain; -o-object-position: left; object-position: left; } .casetab img + * { margin-top: 70px; } @media (max-width: 768px) { .casetab { padding: 12%; margin-bottom: -50px; } } @media (max-width: 576px) { .casetab { padding: 55px 0; margin-bottom: -30px; } } @media (max-width: 768px) { .casetab::before { content: ""; position: absolute; left: 0; top: 0; z-index: -1; height: 100%; width: 100vw; background-color: #f5f5f5; } } @media (max-width: 576px) { .casetab::before { width: 150vw; left: -50vw; } } .casetab .tab__menu { display: flex; } .casetab .tab__item { transition: color 0.2s ease-in-out; border-bottom: 1px solid currentColor; color: #AAACB5; cursor: pointer; } .casetab .tab__item:hover, .casetab .tab__item.-active { color: #000; } .casetab .tab__item + .tab__item { margin-left: 24px; } .casetab .tab__panel { margin-top: 70px; } .gallery--masonry { width: 100%; } .gallery__sizer { width: calc((100% - 48px) / 3); } .gallery__gutter-sizer { width: 24px; } .gallery__item { width: calc((100% - 48px) / 3); height: auto; margin-bottom: 24px; } @media (max-width: 768px) { .gallery__item { width: 100%; } } .gallery__item > img { display: block; width: 100%; height: auto; } .supervisor-icon { width: 60px; height: 60px; -o-object-fit: contain; object-fit: contain; } .supervisor-icon + * { margin-top: 20px; } .icon { width: 54px; } .--steps .container .gradient { position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; display: block; width: 800px; height: 800px; max-width: 100%; max-height: 100%; margin: auto; background: radial-gradient(#23457c, transparent, transparent); } .--steps .steps .step { display: flex; opacity: 0; transform: translateX(40px); } .--steps .steps .step .number { display: flex; align-items: center; justify-content: center; margin-right: 55px; width: 60px; min-width: 60px; height: 60px; border-radius: 10px; border: 1px solid white; font-weight: 800; } @media (max-width: 1024px) { .--steps .steps .step .number { border-radius: 7px; } } @media (max-width: 576px) { .--steps .steps .step .number { border-radius: 5px; } } @media (max-width: 576px) { .--steps .steps .step .number { margin-right: 25px; min-width: 40px; width: 40px; height: 40px; font-size: 16px; } } .--steps .steps .step .number + * { margin-top: 12px; } @media (max-width: 576px) { .--steps .steps .step .number + * { margin-top: 8px; } } .--steps .steps .step + .step { margin-top: 60px; } @media (max-width: 576px) { .--steps .steps .step + .step { margin-top: 30px; } } .--steps.-into-view .steps .step { opacity: 1; transform: translateY(0); transition: opacity 0.75s ease-in-out, transform 0.75s ease-in-out; } .--steps.-into-view .steps .step:nth-of-type(1) { transition-delay: calc(1 * 200ms); } .--steps.-into-view .steps .step:nth-of-type(2) { transition-delay: calc(2 * 200ms); } .--steps.-into-view .steps .step:nth-of-type(3) { transition-delay: calc(3 * 200ms); } .--steps.-into-view .steps .step:nth-of-type(4) { transition-delay: calc(4 * 200ms); } .--steps.-into-view .steps .step:nth-of-type(5) { transition-delay: calc(5 * 200ms); } .--steps.-into-view .steps .step:nth-of-type(6) { transition-delay: calc(6 * 200ms); } .--steps.-into-view .steps .step:nth-of-type(7) { transition-delay: calc(7 * 200ms); } .--steps.-into-view .steps .step:nth-of-type(8) { transition-delay: calc(8 * 200ms); } .--steps.-into-view .steps .step:nth-of-type(9) { transition-delay: calc(9 * 200ms); } .--steps.-into-view .steps .step:nth-of-type(10) { transition-delay: calc(10 * 200ms); } .--steps.-into-view .steps .step:nth-of-type(11) { transition-delay: calc(11 * 200ms); } .--steps.-into-view .steps .step:nth-of-type(12) { transition-delay: calc(12 * 200ms); } .--steps.-into-view .steps .step:nth-of-type(13) { transition-delay: calc(13 * 200ms); } .--steps.-into-view .steps .step:nth-of-type(14) { transition-delay: calc(14 * 200ms); } .--steps.-into-view .steps .step:nth-of-type(15) { transition-delay: calc(15 * 200ms); } .--steps.-into-view .steps .step:nth-of-type(16) { transition-delay: calc(16 * 200ms); } .--steps.-into-view .steps .step:nth-of-type(17) { transition-delay: calc(17 * 200ms); } .--steps.-into-view .steps .step:nth-of-type(18) { transition-delay: calc(18 * 200ms); } .--steps.-into-view .steps .step:nth-of-type(19) { transition-delay: calc(19 * 200ms); } .--steps.-into-view .steps .step:nth-of-type(20) { transition-delay: calc(20 * 200ms); } .--steps.-into-view .steps .step:nth-of-type(21) { transition-delay: calc(21 * 200ms); } .--steps.-into-view .steps .step:nth-of-type(22) { transition-delay: calc(22 * 200ms); } .--steps.-into-view .steps .step:nth-of-type(23) { transition-delay: calc(23 * 200ms); } .--steps.-into-view .steps .step:nth-of-type(24) { transition-delay: calc(24 * 200ms); } .--steps.-into-view .steps .step:nth-of-type(25) { transition-delay: calc(25 * 200ms); } .--steps.-into-view .steps .step:nth-of-type(26) { transition-delay: calc(26 * 200ms); } .--steps.-into-view .steps .step:nth-of-type(27) { transition-delay: calc(27 * 200ms); } .--steps.-into-view .steps .step:nth-of-type(28) { transition-delay: calc(28 * 200ms); } .--steps.-into-view .steps .step:nth-of-type(29) { transition-delay: calc(29 * 200ms); } .--steps.-into-view .steps .step:nth-of-type(30) { transition-delay: calc(30 * 200ms); } .popup { position: fixed; right: 140px; bottom: 100px; z-index: 999; display: flex; flex-direction: column; align-items: flex-end; pointer-events: none; } @media (max-width: 1560px) { .popup { right: 20px; bottom: 20px; } } .popup hr { margin-top: 20px; height: 0; border-top: 1px solid #000; } .popup hr + * { margin-top: 20px; } .popup small { font-weight: 600; } .popup small + * { margin-top: 10px; } .popup__opener { display: flex; align-items: center; justify-content: center; position: relative; transition: background-color 0.2s ease-in-out, border 0.2s ease-in-out; pointer-events: auto; width: 60px; height: 60px; border-radius: 100%; margin-top: 30px; border: 2px solid white; box-shadow: 0 2px 10px rgba(35, 69, 124, 0.8); background-color: #000; cursor: pointer; } .popup__opener img { position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; transition: opacity 0.2s ease-in-out; -o-object-fit: cover; object-fit: cover; border-radius: 100%; } .popup__opener svg * { transition: fill 0.2s ease-in-out; } .popup__prompt { position: absolute; bottom: 10px; right: calc(100% - 30px); pointer-events: auto; cursor: pointer; transition: transform 0.2s ease-in-out, opacity 0.2s ease-in-out; border-radius: 80px; padding: 7px 40px 8px 20px; transform-origin: right center; animation: showPrompt 5s; background-color: #000; font-weight: 400; color: white; white-space: nowrap; } @keyframes showPrompt { 0%, 90% { opacity: 0; transform: translate(20px); } 100% { opacity: 1; transform: translate(0); } } .popup__name .heading-4 { font-size: 18px; font-weight: 700; } .popup__name .heading-4 + p { margin-top: 0; } .popup__step { display: none; flex-direction: column; padding: 20px; background-color: white; } .popup__step input, .popup__step textarea { transition: border-color 0.2s ease-in-out; border: none; border-bottom: 1px solid rgba(0, 0, 0, 0.3); padding: 0 0 10px; outline: none; resize: none; font-family: open-sans, sans-serif; line-height: 1.55; font-size: 18px; font-weight: 400; color: #4A4A4A; } @media (max-width: 1024px) { .popup__step input, .popup__step textarea { font-size: 16px; } } @media (max-width: 768px) { .popup__step input, .popup__step textarea { font-size: 16px; } } @media (max-width: 576px) { .popup__step input, .popup__step textarea { font-size: 13px; } } .popup__step input + *, .popup__step textarea + * { margin-top: 45px; } @media (max-width: 1024px) { .popup__step input + *, .popup__step textarea + * { margin-top: 35px; } } @media (max-width: 768px) { .popup__step input + *, .popup__step textarea + * { margin-top: 35px; } } @media (max-width: 576px) { .popup__step input + *, .popup__step textarea + * { margin-top: 35px; } } .popup__step input + input, .popup__step textarea + input { margin-top: 30px; } .popup__step input + .button, .popup__step input + .filter__remove, .popup__step input + .filter__tag, .popup__step textarea + .button, .popup__step textarea + .filter__remove, .popup__step textarea + .filter__tag { margin-top: 55px; } .popup__step input:not(:-moz-placeholder-shown), .popup__step textarea:not(:-moz-placeholder-shown) { border-color: #000; } .popup__step input:not(:placeholder-shown), .popup__step input:focus, .popup__step textarea:not(:placeholder-shown), .popup__step textarea:focus { border-color: #000; } .popup__step input::-moz-placeholder, .popup__step textarea::-moz-placeholder { color: rgba(0, 0, 0, 0.3); } .popup__step input::placeholder, .popup__step textarea::placeholder { color: rgba(0, 0, 0, 0.3); } .popup__step textarea { height: 110px; } .popup__step .button, .popup__step .filter__remove, .popup__step .filter__tag { width: -moz-fit-content; width: fit-content; } .popup__step .button + .button, .popup__step .filter__remove + .button, .popup__step .button + .filter__remove, .popup__step .filter__remove + .filter__remove, .popup__step .filter__tag + .button, .popup__step .filter__tag + .filter__remove, .popup__step .button + .filter__tag, .popup__step .filter__remove + .filter__tag, .popup__step .filter__tag + .filter__tag { margin-top: 10px; } .popup__step .buttons { display: flex; justify-content: space-between; width: 100%; } .popup__step .buttons .button:first-of-type, .popup__step .buttons .filter__remove:first-of-type, .popup__step .buttons .filter__tag:first-of-type { border: 2px solid #000; background-color: transparent; color: #000; } .popup__step .buttons .button + .button, .popup__step .buttons .filter__remove + .button, .popup__step .buttons .button + .filter__remove, .popup__step .buttons .filter__remove + .filter__remove, .popup__step .buttons .filter__tag + .button, .popup__step .buttons .filter__tag + .filter__remove, .popup__step .buttons .button + .filter__tag, .popup__step .buttons .filter__remove + .filter__tag, .popup__step .buttons .filter__tag + .filter__tag { margin-top: 0; } .popup__step.-active { display: flex; } .popup__step.-success { border-radius: 9px; padding-top: 100px; background-color: #B5FF00; } .popup__step.-success * { color: white; } .popup__step.-success h1, .popup__step.-success h2, .popup__step.-success h3, .popup__step.-success h4, .popup__step.-success h5, .popup__step.-success h6, .popup__step.-success .heading-1, .popup__step.-success .heading-2, .popup__step.-success .heading-3, .popup__step.-success .heading-4, .popup__step.-success .heading-5, .popup__step.-success .heading-6 { font-weight: 700; } .popup__step.-success h1 + p, .popup__step.-success h2 + p, .popup__step.-success h3 + p, .popup__step.-success h4 + p, .popup__step.-success h5 + p, .popup__step.-success h6 + p, .popup__step.-success .heading-1 + p, .popup__step.-success .heading-2 + p, .popup__step.-success .heading-3 + p, .popup__step.-success .heading-4 + p, .popup__step.-success .heading-5 + p, .popup__step.-success .heading-6 + p { margin-top: 20px; } .popup__step.-success .button, .popup__step.-success .filter__remove, .popup__step.-success .filter__tag { justify-content: center; } .popup__step.-success.-active + .popup__top { display: none; } .popup__content { position: absolute; bottom: 15px; right: 15px; overflow: hidden; opacity: 0; pointer-events: none; transform: translate(20px); transition: transform 0.2s ease-in-out, opacity 0.2s ease-in-out; width: 365px; max-width: calc(100vw - 40px); border-radius: 15px; box-shadow: 0 10px 20px rgba(0, 0, 0, 0.16), 0 10px 20px rgba(0, 0, 0, 0.23); } .popup__top { display: flex; align-items: center; background-color: #000; } .popup__top img { height: 90px; width: 80px; margin-right: 20px; -o-object-fit: cover; object-fit: cover; } .popup__top * { color: white; } .popup__cross { position: relative; top: -1px; right: 53px; width: 20px; height: 20px; margin-left: 80px; margin-top: 0; cursor: pointer; } .popup__cross span { position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; top: 10px; right: 6px; transform: rotate(45deg); width: 25px; height: 2px; border-radius: 4px; background-color: white; } .popup__cross span:nth-child(2) { transform: rotate(-45deg); } .popup.-active { z-index: 99999; pointer-events: auto; } .popup.-active .popup__opener { border: 2px solid #000; background-color: #000; } .popup.-active .popup__opener img { opacity: 0; } .popup.-active .popup__opener .cross { display: block; } .popup.-active .popup__opener svg * { fill: #000; } .popup.-active .popup__content { opacity: 1; pointer-events: auto; transform: translate(0); } .popup.-active .popup__prompt { display: none; } .modal { position: fixed; top: 0; left: 0; z-index: 999999; width: 100%; height: 100%; padding: 12vh 0; background-color: rgba(0, 0, 0, 0.75); visibility: hidden; opacity: 0; pointer-events: none; } @media (max-width: 600px) { .modal { padding: 5vh 0; } } .modal__container { position: relative; transition: opacity 0.2s ease-in-out, transform 0.2s ease-in-out; opacity: 0; transform: translateY(20px); display: flex; flex-direction: column; align-items: flex-start; border-radius: 10px; width: 1140px; max-width: calc(100% - 40px); max-height: 100%; margin: auto; border: 1px solid #DADDDF; background-color: white; } @media (max-width: 1024px) { .modal__container { border-radius: 7px; } } @media (max-width: 576px) { .modal__container { border-radius: 5px; } } .modal__container.-no-background { position: absolute; top: 0; bottom: 0; left: 0; right: 0; max-height: 700px; height: 75vh; width: calc(75vh - 64px); max-width: 636px; margin: auto; border: none; background-color: transparent; } @media (max-width: 1024px) { .modal__container.-no-background { height: 60vw; width: calc(60vw - 64px); } } @media (max-width: 768px) { .modal__container.-no-background { height: calc(100vw - 15px + 64px); width: calc(100vw - 15px); max-height: unset; } } .modal__image { width: 100%; height: auto; } .modal__images { position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; border-radius: 10px; top: -1px; overflow: hidden; } @media (max-width: 1024px) { .modal__images { border-radius: 7px; } } @media (max-width: 576px) { .modal__images { border-radius: 5px; } } @media (max-width: 576px) { .modal__images { padding-top: 85%; } } .modal__images img { border-radius: 10px; height: calc(100% - 60px); -o-object-fit: cover; object-fit: cover; } @media (max-width: 1024px) { .modal__images img { border-radius: 7px; } } @media (max-width: 576px) { .modal__images img { border-radius: 5px; } } .modal__images * { color: white; border-color: white; } .modal__description { display: flex; padding: 20px 20px 20px; font-size: 16px; } .modal__description h6 { display: flex; align-items: center; justify-content: center; margin-left: 10px; } .modal__description::after { content: ""; position: absolute; bottom: 0; left: 0; right: 0; width: 100%; height: 10px; border: 1px solid #DADDDF; border-top: 0; border-radius: 0 0 10px 10px; } .modal__slide { position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 0.2s ease-in-out; } .modal__slide.-active { opacity: 1; } .modal__controls { position: absolute; bottom: 80px; left: 20px; display: flex; } .modal__content { -ms-overflow-style: none; scrollbar-width: none; overflow: scroll; width: 100%; padding: 9%; } .modal__content::-webkit-scrollbar { display: none; } .modal__content .video + * { margin-top: 50px; } @media (max-width: 1024px) { .modal__content .video + * { margin-top: 50px; } } @media (max-width: 768px) { .modal__content .video + * { margin-top: 50px; } } @media (max-width: 576px) { .modal__content .video + * { margin-top: 30px; } } @media (max-width: 375px) { .modal__content .video + * { margin-top: 30px; } } @media (max-width: 576px) { .modal__content { padding: 25px; margin-top: 40px; } } .modal__cross { position: absolute; right: 25px; top: 25px; margin-top: 0; margin-right: 40px; } @media (max-width: 1024px) { .modal__cross { margin-right: 30px; } } @media (max-width: 576px) { .modal__cross { right: 15px; top: 15px; margin-right: 25px; } } .modal__cross svg { width: 35%; } .modal.-active { visibility: visible; opacity: 1; pointer-events: auto; } .modal.-active .modal__container { opacity: 1; transform: translateY(0px); } .form__input { display: block; width: 100%; padding: 9px 20px; -webkit-appearance: none; -moz-appearance: none; appearance: none; border: none; outline: none; background-color: #DADDDF; border-radius: 10px; font-family: open-sans, sans-serif; line-height: 1.55; font-size: 18px; font-weight: 400; color: #4A4A4A; color: #000 !important; font-size: 16px; } @media (max-width: 1024px) { .form__input { border-radius: 7px; } } @media (max-width: 576px) { .form__input { border-radius: 5px; } } @media (max-width: 1024px) { .form__input { font-size: 16px; } } @media (max-width: 768px) { .form__input { font-size: 16px; } } @media (max-width: 576px) { .form__input { font-size: 13px; } } .form__input + * { margin-top: 45px; } @media (max-width: 1024px) { .form__input + * { margin-top: 35px; } } @media (max-width: 768px) { .form__input + * { margin-top: 35px; } } @media (max-width: 576px) { .form__input + * { margin-top: 35px; } } .form__input::-moz-placeholder { color: #000; } .form__input::placeholder { color: #000; } .form__input + .form__input { margin-top: 20px; } .form__optional { position: absolute; right: 15px; top: 15px; margin-top: 0; color: #000 !important; font-size: 11px; } .form__optional + * { margin-top: 0; } .form__field { position: relative; margin-top: 20px; max-width: 444px; } .form__field.-required::before { content: "*"; position: absolute; top: 10px; right: 15px; color: #000; } .form__field + * { margin-top: 10px; } .form__field + .button, .form__field + .filter__remove, .form__field + .filter__tag { margin-top: 20px; } textarea { resize: none; height: 100px; } .checkbox { position: relative; margin-top: 20px; } .checkbox .input--checkbox { position: absolute; pointer-events: none; opacity: 0; } .checkbox .input--checkbox + label { position: relative; display: block; padding-left: calc(22px + 17px); cursor: pointer; } .checkbox .input--checkbox + label::before { display: block; width: 100%; padding: 17px 20px; background-color: #F7F8F8; transition: 0.2s ease-in-out; -webkit-appearance: none; -moz-appearance: none; appearance: none; resize: none; font-family: open-sans, sans-serif; line-height: 1.55; font-size: 18px; font-weight: 400; color: #4A4A4A; border: 1px solid #DDDDDD; content: ""; position: absolute; left: 0; top: calc(((1.55 * 18px) - (22px + 1px)) / 2); cursor: pointer; padding: 0; width: 22px; height: 22px; transition: 0.2s ease-in-out; background-color: #F7F8F8; } @media (max-width: 1024px) { .checkbox .input--checkbox + label::before { font-size: 16px; } } @media (max-width: 768px) { .checkbox .input--checkbox + label::before { font-size: 16px; } } @media (max-width: 576px) { .checkbox .input--checkbox + label::before { font-size: 13px; } } .checkbox .input--checkbox + label::before + * { margin-top: 45px; } @media (max-width: 1024px) { .checkbox .input--checkbox + label::before + * { margin-top: 35px; } } @media (max-width: 768px) { .checkbox .input--checkbox + label::before + * { margin-top: 35px; } } @media (max-width: 576px) { .checkbox .input--checkbox + label::before + * { margin-top: 35px; } } .checkbox .input--checkbox + label::before:hover { border-color: #7E7E7E; } .checkbox .input--checkbox + label::before:focus { outline: none; } .checkbox .input--checkbox + label:hover ~ .check { opacity: 0.2; } .checkbox .input--checkbox ~ .check { position: absolute; top: 0; left: 0; z-index: 1; pointer-events: none; margin: 0; opacity: 0; transition: 0.2s ease-in-out; padding: calc(22px - 18px); width: calc(22px + 1px); height: calc(22px + 1px); } .checkbox .input--checkbox:checked ~ .check { opacity: 1; } .checkbox .input--checkbox.-error + label::before { background-color: #FFEFEF; border-color: #D00000; } .checkbox .input--checkbox.-error ~ .check rect, .checkbox .input--checkbox.-error ~ .check circle, .checkbox .input--checkbox.-error ~ .check ellipse, .checkbox .input--checkbox.-error ~ .check path, .checkbox .input--checkbox.-error ~ .check polygon, .checkbox .input--checkbox.-error ~ .check polyline { fill: #D00000; } .checkbox .input--checkbox.-success + label::before { background-color: #F7F8F8; border-color: #54d054; } .checkbox .input--checkbox.-success ~ .check rect, .checkbox .input--checkbox.-success ~ .check circle, .checkbox .input--checkbox.-success ~ .check ellipse, .checkbox .input--checkbox.-success ~ .check path, .checkbox .input--checkbox.-success ~ .check polygon, .checkbox .input--checkbox.-success ~ .check polyline { fill: #54d054; } .checkbox .input--checkbox + label::before { border-color: white; border-radius: 5px; background-color: transparent; } .checkbox .input--checkbox + label a { font-weight: 800; } .checkbox .input--checkbox ~ .check { top: 6px; left: 4px; border-radius: 2px; width: 16px; height: 16px; opacity: 0; background-color: transparent; } .checkbox .input--checkbox:checked ~ .check { background-color: white; } .checkbox + * { margin-top: 30px; } .lang { display: flex; flex-direction: column; justify-content: center; align-items: center; margin-top: 0; margin-left: 15px; height: fit-content; height: -moz-fit-content; } @media (max-width: 1500px) { .lang { margin-left: 20px; } } .lang .icon { fill: #aaacb6; max-width: unset; } .lang .menu__title { display: flex; align-items: center; text-transform: uppercase; } .lang .menu__title > svg { display: block; margin-left: 8px; width: 10px; } .lang .menu__title > svg path { fill: #AAACB5; } .lang .glink { display: flex !important; align-items: center; color: #000 !important; font-weight: 700 !important; } .lang .glink + * { margin-top: 5px !important; } .lang .glink::before { content: ""; display: block; width: 24px; height: 18px; margin-right: 15px; background-image: url("/img/icons/deutsch_flag.svg"); background-size: contain; background-repeat: no-repeat; background-position: center center; } .lang .glink[data-gt-lang=en]::before { background-image: url("/img/icons/english_flag.svg"); } .lang .glink[data-gt-lang=es]::before { background-image: url("/img/icons/es_flag.svg"); } .lang .glink[data-gt-lang=fr]::before { background-image: url("/img/icons/fr_flag.svg"); } .lang .glink[data-gt-lang=it]::before { background-image: url("/img/icons/it_flag.svg"); } .lang .glink[data-gt-lang=nl]::before { background-image: url("/img/icons/nederland_flag.svg"); } @media (max-width: 1395px) { .lang { display: none; } } @media (max-width: 1024px) { .floor { flex-direction: column-reverse !important; } } .floor * { transition-delay: 0s !important; } .floor__infobox { flex-grow: 1; padding: 30px; border: 1px solid white; margin-top: 90px; width: 100%; border-radius: 10px; } @media (max-width: 1024px) { .floor__infobox { border-radius: 7px; } } @media (max-width: 576px) { .floor__infobox { border-radius: 5px; } } @media (max-width: 1024px) { .floor__infobox { border: none; padding: 0; margin-top: 35px; margin-bottom: 60px; } } .floor__infobox.-empty { opacity: 0.5; } .floor__right { display: flex; flex-direction: column; align-items: flex-start; } .floor__plan { overflow: hidden; padding-top: 0; height: auto; min-height: unset; } .floor__plan::before { content: ""; display: block; padding-top: 93.61%; } .floor__plan.-is-hovering .floor__location:not(.-hover)::after { border-color: white; } .floor__plan.-is-hovering .floor__location:not(.-hover) .floor__tag { background-color: white; color: #23457c; } .floor__plan.-is-active .floor__location:not(.-active) { pointer-events: none; opacity: 0; } .floor__blur { position: absolute; bottom: 100%; left: 0; z-index: 0; width: 100vw; height: 200vw; display: block; opacity: 0 !important; pointer-events: none; background-color: white; background-color: rgba(255, 255, 255, 0.1) !important; -webkit-backdrop-filter: blur(5px) brightness(95%); backdrop-filter: blur(5px) brightness(95%); } .floor__blur:nth-child(2) { right: unset; bottom: unset; left: 100%; top: 0; } .floor__blur:nth-child(3) { right: 0; bottom: unset; left: unset; top: 100%; } .floor__blur:nth-child(4) { right: 100%; bottom: 0; left: unset; top: unset; } .floor__location { position: absolute; z-index: 1; transition: border-color 0.2s ease-in-out; border-radius: 10px; cursor: pointer; } @media (max-width: 1024px) { .floor__location { border-radius: 7px; } } @media (max-width: 576px) { .floor__location { border-radius: 5px; } } @media (max-width: 576px) { .floor__location { transform: scaleY(0.96); } } .floor__location::after { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; transition: border-color 0.2s ease-in-out; display: block; border-radius: 10px; border: 2px solid #2e77c0; pointer-events: none; } @media (max-width: 1024px) { .floor__location::after { border-radius: 7px; } } @media (max-width: 576px) { .floor__location::after { border-radius: 5px; } } @media (max-width: 576px) { .floor__location::after { border-radius: 4px; } } .floor__location.-active .floor__blur { opacity: 1 !important; } @media (max-width: 1280px) { .floor__location { border-width: 2px; } } .floor__button { position: absolute; bottom: 20px; left: 0; right: 0; width: -moz-fit-content; width: fit-content; transition: opacity 0.2s ease-in-out, background-color 0.2s ease-in-out, color 0.2s ease-in-out !important; opacity: 0 !important; margin: auto; padding: 10px 16px; border-radius: 8px; } @media (max-width: 1680px) { .floor__button { bottom: 12px; font-size: 14px; } } @media (max-width: 1280px) { .floor__button { display: none; } } @media (max-width: 2300px) { .floor__button.-small:not(.-active) span { display: none; } } @media (max-width: 2300px) { .floor__button.-small:not(.-active) .button__icon { margin-left: 0 !important; } } .floor__button svg { transition: transform 0.2s ease-in-out; } @media (max-width: 1680px) { .floor__button svg { width: 10px; margin-left: 10px; } } .floor__button:not(.-active) { background-color: white; } .floor__button:not(.-active) span { color: #23457c !important; } .floor__button:not(.-active) svg { transform: rotate(45deg); } .floor__button:not(.-active) svg line { stroke: #23457c !important; } .floor__button.-active, .floor__button.-hover { opacity: 1 !important; } .floor__tag { position: absolute; top: 0; left: 12px; transition: 0.2s ease-in-out !important; border-radius: 0 0 6px 6px; padding: 0 8px 2px; max-width: calc(100% - 24px); background-color: #2e77c0; font-size: 9px !important; font-weight: 600; } @media (max-width: 576px) { .floor__tag { left: 3px; max-width: calc(100% - 6px); padding: 3px 5px; font-size: 6px !important; line-height: 1.1; } } .floor__close { position: absolute; top: 20px; right: 20px; display: flex; align-items: center; padding: 0 0 0 15px; background-color: rgba(0, 0, 0, 0.1) !important; -webkit-backdrop-filter: blur(30px) brightness(115%); backdrop-filter: blur(30px) brightness(115%); border-radius: 10px; cursor: pointer; } @media (max-width: 1024px) { .floor__close { border-radius: 7px; } } @media (max-width: 576px) { .floor__close { border-radius: 5px; } } .floor__cross { padding: 6px 10px; margin-left: 15px; border-radius: 0 10px 10px 0; background-color: #23457c; } .floor__blocks { width: 100%; } @media (max-width: 1024px) { .floor__blocks { position: fixed; top: 0; left: 0; bottom: 0; right: 0; z-index: 99999; animation: intoViewFast 500ms; display: flex; align-items: center; justify-content: center; margin: auto; background-color: rgba(255, 255, 255, 0.16); -webkit-backdrop-filter: blur(37px) brightness(120%); backdrop-filter: blur(37px) brightness(120%); } } .floor .item { position: relative; width: 100%; border-radius: 10px; margin-top: 90px; background-color: rgba(255, 255, 255, 0.16) !important; -webkit-backdrop-filter: blur(37px) brightness(120%); backdrop-filter: blur(37px) brightness(120%); animation: intoViewFast 500ms; } @media (max-width: 1024px) { .floor .item { border-radius: 7px; } } @media (max-width: 576px) { .floor .item { border-radius: 5px; } } .floor .item * { opacity: 1 !important; } @media (max-width: 1024px) { .floor .item { margin: auto; width: calc(100% - 180px); background-color: #000; -webkit-backdrop-filter: unset; backdrop-filter: unset; } } @media (max-width: 576px) { .floor .item { width: calc(100% - 30px); } } .floor .item__image { overflow: hidden; border-radius: 10px; margin-bottom: -15px; } @media (max-width: 1024px) { .floor .item__image { border-radius: 7px; } } @media (max-width: 576px) { .floor .item__image { border-radius: 5px; } } .floor .item__content { padding: 55px 40px 40px; border-radius: 0 0 10px 10px; } @media (max-width: 1024px) { .floor .item__content { background-color: #000; } } @media (max-width: 576px) { .floor .item__content { padding: 40px 25px 25px; } } .floor .item .button, .floor .item .filter__remove, .floor .item .filter__tag { background-color: rgba(255, 255, 255, 0.1) !important; -webkit-backdrop-filter: blur(30px) brightness(115%); backdrop-filter: blur(30px) brightness(115%); color: white; } @media (max-width: 1024px) { .floor .item .button, .floor .item .filter__remove, .floor .item .filter__tag { background-color: rgba(255, 255, 255, 0.3) !important; } } .floor .item .button__icon { width: 15px; } .divider { display: block; width: 100%; height: 10px; border-top: 0; border-left: 1px solid #DADDDF; border-right: 1px solid #DADDDF; border-bottom: 1px solid #DADDDF; border-radius: 0 0 10px 10px; } .divider.-top { border: 1px solid #DADDDF; border-bottom: 0; border-radius: 10px 10px 0 0; } [class*=part] > * + .divider { margin-top: 100px; } @media (max-width: 1024px) { [class*=part] > * + .divider { margin-top: 70px; } } @media (max-width: 768px) { [class*=part] > * + .divider { margin-top: 70px; } } @media (max-width: 576px) { [class*=part] > * + .divider { margin-top: 50px; } } @media (max-width: 375px) { [class*=part] > * + .divider { margin-top: 50px; } } .--image-text .divider { margin-bottom: 100px; display: none; } @media (max-width: 1024px) { .--image-text .divider { margin-bottom: 70px; } } @media (max-width: 768px) { .--image-text .divider { margin-bottom: 70px; } } @media (max-width: 576px) { .--image-text .divider { margin-bottom: 50px; } } @media (max-width: 375px) { .--image-text .divider { margin-bottom: 50px; } } .--image-text ~ .--image-text .divider { display: block; border-top: 0; border-bottom: 1px solid #DADDDF; border-radius: 0 0 10px 10px; } .revolution > *:not(.--wide *) { max-width: 680px; margin-left: auto; margin-right: auto; } .revolution__title { font-family: "DM Sans", sans-serif; font-size: 62px; font-weight: 700; line-height: 1.08; color: #000; background: -webkit-radial-gradient(white, #23457c, #23457c); background-size: 100% 200%; -webkit-background-clip: text; -webkit-text-fill-color: transparent; color: #23457c !important; } @media (max-width: 1024px) { .revolution__title { font-size: 32px; } } @media (max-width: 768px) { .revolution__title { font-size: 32px; } } @media (max-width: 576px) { .revolution__title { font-size: 25px; } } .revolution__title + * { margin-top: 65px; } @media (max-width: 1024px) { .revolution__title + * { margin-top: 35px; } } @media (max-width: 768px) { .revolution__title + * { margin-top: 20px; } } @media (max-width: 576px) { .revolution__title + * { margin-top: 20px; } } .revolution__title + * { margin-top: 50px; } @media (max-width: 576px) { .revolution__title + * { margin-top: 20px; } } .revolution__subtitle { color: #717484 !important; } .revolution__buttons { width: 100%; max-width: 720px !important; margin-left: -15px; margin-top: 50px; } .revolution__link { display: flex; flex-direction: column; align-items: flex-start; margin-top: 0 !important; padding: 0 15px; width: calc(50% - 24px); font-family: work-sans, sans-serif; font-size: 34px; font-weight: 400; line-height: 1.2; color: #AAACB5; color: white; } @media (max-width: 1024px) { .revolution__link { font-size: 22px; } } @media (max-width: 768px) { .revolution__link { font-size: 19px; } } @media (max-width: 576px) { .revolution__link { font-size: 19px; } } .revolution__link + * { margin-top: 50px; } @media (max-width: 1024px) { .revolution__link + * { margin-top: 35px; } } @media (max-width: 768px) { .revolution__link + * { margin-top: 35px; } } @media (max-width: 576px) { .revolution__link + * { margin-top: 35px; } } @media (max-width: 576px) { .revolution__link { width: 100%; margin-right: 0; padding: 0 10px; } } .revolution__link a { position: relative; overflow: hidden; letter-spacing: -0.03rem; } .revolution__link a span { display: block; transition: 0.2s ease-in-out; } .revolution__link a span + span { position: absolute; left: 0; opacity: 0; transform: translateY(50%); } .revolution__link a:hover span { opacity: 0; transform: translateY(-100%); } .revolution__link a:hover span + span { opacity: 1; transform: translateY(-100%); } .revolution__link .divider { height: 10px; margin-left: -15px; margin-top: 10px; width: calc(100% + 30px); } @media (max-width: 576px) { .revolution__link .divider { margin-top: 5px; width: calc(100% + 20px); } } .revolution__link .tag + * { margin-top: 18px; } @media (min-width: 1280px) { .--wide .revolution__title { font-size: 130px; } } .--wide .revolution__subtitle { font-family: work-sans, sans-serif; font-size: 34px; line-height: 1.17; letter-spacing: -0.02rem; } @media (max-width: 1024px) { .--wide .revolution__subtitle { font-size: 22px; } } @media (max-width: 576px) { .--wide .revolution__subtitle { font-size: 19px; } } .--wide .revolution__buttons { max-width: unset; margin-top: 100px; width: calc(1560px - 180px); margin-left: auto; margin-right: auto; max-width: unset !important; } @media (max-width: 1024px) { .--wide .revolution__buttons { margin-top: 70px; } } @media (max-width: 768px) { .--wide .revolution__buttons { margin-top: 70px; } } @media (max-width: 576px) { .--wide .revolution__buttons { margin-top: 50px; } } @media (max-width: 375px) { .--wide .revolution__buttons { margin-top: 50px; } } @media (max-width: 1560px) { .--wide .revolution__buttons { width: calc(100% - 180px); } } @media (max-width: 768px) { .--wide .revolution__buttons { width: calc(100% - 90px); } } @media (max-width: 576px) { .--wide .revolution__buttons { width: calc(100% - 30px); } } .--wide .revolution__link { font-weight: 400 !important; } @media (min-width: 1680px) { .--wide .revolution__link { font-size: 62px; } } .--wide .revolution__link .divider { margin-top: 20px; } @media (max-width: 1280px) { .--wide .revolution__link .divider { margin-top: 10px; } } .team__member { display: flex; flex-direction: column; align-items: center; } .team__member h4 { text-align: center; } .team__member--portret { margin-bottom: 30px; border-radius: 10px; overflow: hidden; } .team__member--buttons { display: flex; } .team__member .--transparent { background-color: transparent; border: 1px solid #DADDDF; color: #23457C; margin-right: 10px; } .team__member .--transparent:hover { background-color: #23457c; border: 1px solid #23457c; color: white; } .details { display: flex; flex-wrap: wrap; font-size: 16px; } @media (max-width: 1024px) { .details { font-size: 13px; } } @media (max-width: 576px) { .details { font-size: 11px; } } .details > * { display: flex; align-items: center; margin: 0 !important; width: 55%; min-height: 28px; } @media (max-width: 1024px) { .details > * { min-height: 22px; } } @media (max-width: 576px) { .details > * { min-height: 18px; } } .details > *:nth-child(odd) { width: 45%; } .details + h4 { margin-top: 50px; } @media (max-width: 1024px) { .details + h4 { margin-top: 50px; } } @media (max-width: 768px) { .details + h4 { margin-top: 50px; } } @media (max-width: 576px) { .details + h4 { margin-top: 30px; } } @media (max-width: 375px) { .details + h4 { margin-top: 30px; } } .splide__arrows { display: none; } @media (max-width: 576px) { .splide__slide { width: 75% !important; } } .splide__slide .item { margin-bottom: 0; width: 100% !important; } .-has-submenu { display: flex; } .-has-submenu:hover .submenu { opacity: 1; visibility: visible; pointer-events: auto; } .submenu { position: absolute; top: 60px; min-width: auto; padding: 30px 30px; transform: translateX(-30px); background-color: #000; opacity: 0; visibility: hidden; pointer-events: none; transition: 0.2s ease-in-out; border-radius: 10px; opacity: 0; visibility: hidden; pointer-events: none; transition: 0.2s ease-in-out; position: absolute; top: calc(60px + 20px); z-index: -1; transform: translateY(-100%); transition: none; border: 1px solid #DADDDF; margin-left: -30px; box-shadow: 0 13px 20px rgba(0, 0, 0, 0.1); width: 466px; background-color: white; cursor: auto; } .submenu__item { display: block; height: 100%; white-space: nowrap; color: #000; } .submenu__icon { margin-left: 10px; width: 14px; height: auto; fill: white; } @media (max-width: 1024px) { .submenu { border-radius: 7px; } } @media (max-width: 576px) { .submenu { border-radius: 5px; } } .submenu__image { width: 54px; min-width: 54px; height: 54px; border-radius: 10px; margin-right: 15px; -o-object-fit: cover; object-fit: cover; } @media (max-width: 1024px) { .submenu__image { border-radius: 7px; } } @media (max-width: 576px) { .submenu__image { border-radius: 5px; } } .submenu__column { width: 50%; } .submenu__column + .submenu__column { margin-left: 30px; padding-left: 30px; border-left: 1px solid #DADDDF; } .submenu__link { position: relative; display: flex; align-items: flex-start; color: #000 !important; font-weight: 700 !important; white-space: nowrap; } .submenu__link.-coming-soon { pointer-events: none; } .submenu__link.-coming-soon .submenu__text { opacity: 0.3; } .submenu__link.-coming-soon .submenu__image { position: relative; display: flex; align-items: center; justify-content: center; } .submenu__link.-coming-soon .submenu__image img, .submenu__link.-coming-soon .submenu__image svg { opacity: 0.2; } .submenu__link.-coming-soon .submenu__image::after { content: "Coming soon"; position: absolute; max-width: 100%; white-space: wrap; text-align: center; font-size: 10px; } .submenu__link::before { content: ""; position: absolute; top: 0; left: -30px; width: 4px; height: 100%; border-radius: 0 4px 4px 0; background-color: transparent; } .submenu__link.-active::before { background-color: #2D77C0; } .submenu__link + .submenu__link { margin-top: 25px; } .submenu__text { display: flex; flex-direction: column; justify-content: center; min-height: 54px; color: #000 !important; } .submenu__text small { display: block; font-size: 14px; font-weight: 400; color: #4A4A4A !important; white-space: initial; } .submenu .tag { margin-left: 8px; transform: translateY(-2px); } .submenu.-columns { display: flex; width: 790px; } .submenu.-small { width: 400px; } .submenu.-lang { left: 0; margin-top: -15px; width: 200px; } .submenu.-lang h6 + * { margin-top: 10px; } .submenu.-lang .submenu__link + .submenu__link { margin-top: 10px; } .submenu.-lang .submenu__link .flag { width: 24px; margin-right: 17px; } .submenu h6 { color: #AAACB5 !important; } .-open .submenu { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0); transition: 350ms ease-in-out; } .-open .submenu:before { content: ""; position: absolute; top: -30px; left: 0; height: 30px; width: 100%; } .logos { display: flex; justify-content: space-between; padding-left: calc(((1560px - (24px * (12 - 1))) / 12) * 1 + (24px * (1 - 1))); padding-right: calc(((1560px - (24px * (12 - 1))) / 12) * 1 + (24px * (1 - 1))); margin-top: 75px; padding-bottom: 50px; -ms-overflow-style: none; scrollbar-width: none; } @media (max-width: 1024px) { .logos { padding-bottom: 50px; } } @media (max-width: 768px) { .logos { padding-bottom: 50px; } } @media (max-width: 576px) { .logos { padding-bottom: 30px; } } @media (max-width: 375px) { .logos { padding-bottom: 30px; } } .logos::-webkit-scrollbar { display: none; } @media (max-width: 1280px) { .logos { padding-left: 30px; padding-right: 30px; margin-top: 45px; padding-bottom: 45px; } } @media (max-width: 576px) { .logos { overflow: scroll; margin-top: 30px; padding-bottom: 30px; } } .logos::after { content: ""; position: absolute; bottom: 0; left: 0; right: 0; width: 100%; height: 10px; border: 1px solid #DADDDF; border-top: 0; border-radius: 0 0 10px 10px; } .logos img { height: 66px; width: auto; } .logos img:first-child, .logos img:nth-child(4) { padding-top: 0.6%; padding-bottom: 0.6%; } @media (max-width: 1680px) { .logos img { height: 55px; } } @media (max-width: 1280px) { .logos img { height: 34px; } } @media (max-width: 768px) { .logos img { height: 30px; } } @media (max-width: 576px) { .logos img:not(:last-of-type) { margin-right: 70px; } } .unfolder { margin-top: 25px; } @media (max-width: 576px) { .unfolder { margin-top: 10px; } } .unfolder__item { position: relative; display: flex; padding: 0 20px 30px; } @media (max-width: 576px) { .unfolder__item { padding: 0 10px 20px; } } .unfolder__item::after { content: ""; position: absolute; bottom: 0; left: 0; right: 0; width: 100%; height: 10px; border: 1px solid #DADDDF; border-top: 0; border-radius: 0 0 10px 10px; } .unfolder__item.-active h4 { color: #2D77C0; } .unfolder__item.-active .unfolder__text { transition: max-height 0.75s ease-in-out, padding 0.2s ease-in-out; padding-top: 20px; max-height: 500px; } .unfolder__item.-active .unfolder__control svg { transform: rotate(180deg); } .unfolder__item + .unfolder__item { margin-top: 50px; } @media (max-width: 1024px) { .unfolder__item + .unfolder__item { margin-top: 50px; } } @media (max-width: 768px) { .unfolder__item + .unfolder__item { margin-top: 50px; } } @media (max-width: 576px) { .unfolder__item + .unfolder__item { margin-top: 30px; } } @media (max-width: 375px) { .unfolder__item + .unfolder__item { margin-top: 30px; } } @media (max-width: 1024px) { .unfolder__item + .unfolder__item { margin-top: 35px; } } @media (max-width: 576px) { .unfolder__item + .unfolder__item { margin-top: 30px; } } .unfolder__control { display: flex; align-items: flex-end; justify-content: flex-end; width: calc(((1560px - (24px * (12 - 1))) / 12) * 2 + (24px * (2 - 1))); } @media (max-width: 1024px) { .unfolder__control { min-width: 45px; width: 45px; } } .unfolder__content { width: calc(((1560px - (24px * (12 - 1))) / 12) * 8 + (24px * (8 - 1))); } @media (max-width: 1024px) { .unfolder__content { width: 75%; } } @media (max-width: 576px) { .unfolder__content { width: calc(100% - 25px); } } .unfolder__text { overflow: hidden; margin-top: 0; max-width: 678px; max-height: 0; } .unfolder__number { width: calc(((1560px - (24px * (12 - 1))) / 12) * 2 + (24px * (2 - 1))); } @media (max-width: 1024px) { .unfolder__number { width: 25%; } } @media (max-width: 576px) { .unfolder__number { width: 45px; min-width: 45px; } } .unfolder__number * { color: #AAACB5; } .cores__item { display: flex; } .cores__item .--icon { margin-right: 43px; } .cores__item .--icon img { width: 54px; max-width: none; } @media (max-width: 1024px) { .cores__item .--icon img { width: 38px; } } .cores__item .item__title { margin-top: 10px !important; } .cores .divider { margin-top: 100px; margin-bottom: 100px; } @media (max-width: 1024px) { .cores .divider { margin-top: 70px; } } @media (max-width: 768px) { .cores .divider { margin-top: 70px; } } @media (max-width: 576px) { .cores .divider { margin-top: 50px; } } @media (max-width: 375px) { .cores .divider { margin-top: 50px; } } @media (max-width: 1024px) { .cores .divider { margin-bottom: 70px; } } @media (max-width: 768px) { .cores .divider { margin-bottom: 70px; } } @media (max-width: 576px) { .cores .divider { margin-bottom: 50px; } } @media (max-width: 375px) { .cores .divider { margin-bottom: 50px; } } .cores .overview { display: flex; flex-wrap: wrap; margin-left: calc(-24px / 2); margin-right: calc(-24px / 2); margin-bottom: -50px; width: calc(100% + (24px)); } .cores .overview__item { width: calc((6 * 100% / 12) - 24px); margin: 0 calc(24px / 2); margin-bottom: 50px; min-height: 180px; } @media (max-width: 1330px) { .cores .overview__item { min-height: 250px; max-height: 250px; } } @media (max-width: 768px) { .cores .overview__item { width: 100%; min-height: 180px; max-height: unset; } } @media (max-width: 576px) { .cores .overview__item { min-height: 100px; } } .solution { overflow: hidden; padding-top: 325px !important; padding-bottom: 150px !important; } @media (max-width: 1024px) { .solution { padding-top: 220px !important; padding-bottom: 70px !important; } } @media (max-width: 576px) { .solution { padding-top: 220px !important; padding-bottom: 90px !important; } } .solution::before { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; background-image: url("/img/home/raster.svg"); background-size: contain; background-repeat: no-repeat; background-position: center center; background-position: top; } @media (max-width: 1024px) { .solution::before { background-image: url("/img/icons/raster-l.svg"); } } @media (max-width: 576px) { .solution::before { background-image: url("/img/icons/raster-mobile.svg"); background-size: 200%; } } .solution__container { margin-top: 100px; } @media (max-width: 1024px) { .solution__container { margin-top: 70px; } } @media (max-width: 768px) { .solution__container { margin-top: 70px; } } @media (max-width: 576px) { .solution__container { margin-top: 50px; } } @media (max-width: 375px) { .solution__container { margin-top: 50px; } } .solution__image, .solution__video { position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; background-size: cover; background-repeat: no-repeat; background-position: center center; transition: none; -o-object-fit: cover; object-fit: cover; } @media (max-width: 576px) { .solution__image.-desktop, .solution__video.-desktop { display: none; } } @media (min-width: 576px) { .solution__image.-mobile, .solution__video.-mobile { display: none; } } @media (max-width: 576px) { .solution__image { -o-object-position: left; object-position: left; } } .solution__video { -o-object-fit: contain; object-fit: contain; -o-object-position: right; object-position: right; } .solution__content { position: relative; z-index: 1; display: flex; align-items: center; height: 600px; padding: calc(((1560px - (24px * (12 - 1))) / 12) * 1 + (24px * (1 - 1))); } @media (max-width: 1024px) { .solution__content { height: calc(50vw - 70px - 90px); padding: 20px; } } @media (max-width: 576px) { .solution__content { align-items: flex-start; padding: 30px; height: calc(110vw - 65px); } } .solution__bottom { display: flex; justify-content: space-between; align-items: center; padding: 28px calc(((1560px - (24px * (12 - 1))) / 12) * 1 + (24px * (1 - 1))); border-radius: 10px; background-color: rgba(255, 255, 255, 0.1); -webkit-backdrop-filter: blur(30px) brightness(108%); backdrop-filter: blur(30px) brightness(108%); background-color: rgba(0, 0, 0, 0.1); } @media (max-width: 1024px) { .solution__bottom { border-radius: 7px; } } @media (max-width: 576px) { .solution__bottom { border-radius: 5px; } } @media (max-width: 1024px) { .solution__bottom { justify-content: flex-end; padding: 20px; } } @media (max-width: 576px) { .solution__bottom { justify-content: center; } } .solution__bottom > * { margin-top: 0; } .solution__bottom p { display: flex; align-items: center; color: white !important; } @media (max-width: 1024px) { .solution__bottom p { display: none; } } .solution__bottom p::before { content: ""; display: block; transform: rotate(45deg); width: 10px; min-width: 10px; height: 10px; min-height: 10px; margin-right: 10px; border-radius: 3px; background-color: #2D77C0; } .solution__bottom .button, .solution__bottom .filter__remove, .solution__bottom .filter__tag { color: white; } .solution__bottom .buttons { display: flex; align-items: center; flex-wrap: wrap; margin-bottom: -15px; justify-content: flex-end; } @media (max-width: 1024px) { .solution__bottom .buttons { margin-bottom: -15px; } } @media (max-width: 768px) { .solution__bottom .buttons { margin-bottom: -15px; } } @media (max-width: 576px) { .solution__bottom .buttons { margin-bottom: -15px; } } .solution__bottom .buttons > * { margin-top: 0; margin-bottom: 15px; margin-right: 15px; } @media (max-width: 1024px) { .solution__bottom .buttons > * { margin-bottom: 15px; margin-right: 15px; } } @media (max-width: 768px) { .solution__bottom .buttons > * { margin-bottom: 15px; margin-right: 15px; } } @media (max-width: 576px) { .solution__bottom .buttons > * { margin-bottom: 15px; margin-right: 15px; } } .solution__bottom .buttons > *:last-child { margin-right: 0; } .solution__blurred-text { opacity: 0.5; } .solution__block { position: relative; overflow: hidden; background-color: #313131; border-radius: 10px; } @media (max-width: 1024px) { .solution__block { border-radius: 7px; } } @media (max-width: 576px) { .solution__block { border-radius: 5px; } } .solution__block:first-child { margin-top: 0; } .solution__block:first-child p { color: #4A4A4A !important; } .solution__block:first-child .solution__content { width: 40%; margin-left: auto; } @media (max-width: 576px) { .solution__block:first-child .solution__content { width: 100%; margin-left: 0; } } .solution__block + .solution__block { margin-top: 24px; } .solution__line { position: absolute; overflow: hidden; z-index: 1; } .solution__line svg { opacity: 0; } .solution__line.-right svg, .solution__line.-top-2 svg { position: absolute; right: 0; } .-into-view .solution__line svg { opacity: 1; max-width: unset; } .-into-view .solution__line.-left { left: 0; top: 284px; width: 310px; height: 243px; animation: line-1 2.5s ease-out; } .-into-view .solution__line.-left svg { width: 310px; height: 243px; } @keyframes line-1 { 0%, 10% { width: 0; } 90% { width: 310px; } } @media (max-width: 1024px) { .-into-view .solution__line.-left { top: 115px; width: 120px; height: 95px; animation: line-1 2.5s ease-out; } .-into-view .solution__line.-left svg { width: 120px; height: 95px; } @keyframes line-1 { 0%, 10% { width: 0; } 90% { width: 120px; } } } @media (max-width: 576px) { .-into-view .solution__line.-left { left: -50px; } } .-into-view .solution__line.-top { top: 0; left: 18%; height: 234px; width: 160px; animation: line-2 2.5s ease-out; } .-into-view .solution__line.-top svg { width: 160px; height: 234px; } @keyframes line-2 { 0%, 20% { height: 0; } 100% { height: 234px; } } @media (max-width: 1024px) { .-into-view .solution__line.-top { left: 20%; width: 65px; height: 120px; animation: line-1 2.5s ease-out; } .-into-view .solution__line.-top svg { width: 65px; height: 120px; } @keyframes line-1 { 0%, 10% { width: 0; } 90% { width: 65px; } } } @media (max-width: 576px) { .-into-view .solution__line.-top { left: 15%; top: -30px; } } .-into-view .solution__line.-top-2 { top: 0; right: 16%; width: 430px; height: 220px; animation: line-3 2.5s ease-out; } .-into-view .solution__line.-top-2 svg { width: 430px; height: 220px; } @keyframes line-3 { 0%, 10% { width: 0; } 90% { width: 430px; } } @media (max-width: 1024px) { .-into-view .solution__line.-top-2 { width: 175px; height: 86px; animation: line-1 2.5s ease-out; } .-into-view .solution__line.-top-2 svg { width: 175px; height: 86px; } @keyframes line-1 { 0%, 10% { width: 0; } 90% { width: 175px; } } } @media (max-width: 576px) { .-into-view .solution__line.-top-2 { right: -50px; left: unset; } } .-into-view .solution__line.-right { right: 0; top: 284px; width: 310px; height: 243px; animation: line-4 2.5s ease-out; } .-into-view .solution__line.-right svg { width: 310px; height: 243px; } @keyframes line-4 { 0%, 10% { width: 0; } 90% { width: 310px; } } @media (max-width: 1024px) { .-into-view .solution__line.-right { top: 150px; width: 97px; height: 122px; animation: line-4 2.5s ease-out; } .-into-view .solution__line.-right svg { width: 97px; height: 122px; } @keyframes line-4 { 0%, 10% { width: 0; } 90% { width: 97px; } } } @media (max-width: 576px) { .-into-view .solution__line.-right { top: 150px; right: -50px; } } .processes [class*=part] { position: relative; } .processes video { margin-top: 40px; margin-bottom: 40px; } @media (max-width: 1024px) { .processes video { margin-top: 0; margin-bottom: 0; } } .processes__button { position: absolute; margin-top: 0 !important; } @media (max-width: 768px) { .processes__button { position: relative; top: 0 !important; left: 0 !important; display: flex; margin-top: 10px !important; width: -moz-fit-content !important; width: fit-content !important; } } .list ul { margin-top: 10px; padding-left: 0px; } .list__bordered { border: 1px solid #DADDDF; padding: 16px; border-radius: 10px; } .list__bordered::before { left: unset; top: 26px; } .list__bordered p { margin-left: 20px; } .filter { display: flex; width: 100%; padding-bottom: 35px; } .filter__tag { padding: 11px 18px; margin-left: 20px; } .filter__tag:first-of-type { margin-left: 0; } .filter__tag + * { margin-top: 0; } .filter__tag.-active { background-color: #23457c; color: white; } .filter__tag.-active .button__icon { background-color: inherit; } .filter__select { margin-left: 20px; margin-top: 0 !important; padding: 6px 48px 6px 18px; border: 1px solid #DADDDF; border-radius: 10px; font-family: open-sans, sans-serif; line-height: 1.55; font-size: 18px; font-weight: 400; color: #4A4A4A; -moz-appearance: none; appearance: none; -webkit-appearance: none; background-color: transparent; background-image: url("/img/icons/arrow-button-blue.svg"); background-size: contain; background-repeat: no-repeat; background-position: center center; background-size: 10px; background-position: right 18px center; font-size: 16px; color: #23457c; } @media (max-width: 1024px) { .filter__select { border-radius: 7px; } } @media (max-width: 576px) { .filter__select { border-radius: 5px; } } @media (max-width: 1024px) { .filter__select { font-size: 16px; } } @media (max-width: 768px) { .filter__select { font-size: 16px; } } @media (max-width: 576px) { .filter__select { font-size: 13px; } } .filter__select + * { margin-top: 45px; } @media (max-width: 1024px) { .filter__select + * { margin-top: 35px; } } @media (max-width: 768px) { .filter__select + * { margin-top: 35px; } } @media (max-width: 576px) { .filter__select + * { margin-top: 35px; } } .filter__select:first-of-type { margin-left: 0; } .filter__remove { margin-top: 0 !important; padding: 11px 18px; margin-left: 20px; background-color: transparent; } .filter__remove svg { width: 10px; margin-right: 8px; } .filter__remove + * { margin-top: 0; } .loads { padding: 30px; border: 1px solid #DADDDF; border-radius: 10px; } @media (max-width: 1024px) { .loads { border-radius: 7px; } } @media (max-width: 576px) { .loads { border-radius: 5px; } } @media (max-width: 576px) { .loads { padding: 20px; } } .loads > * { text-align: center; } .loads__text { display: inline-flex; align-items: center; padding: 11px 18px; border-radius: 10px; cursor: pointer; -webkit-appearance: none; -moz-appearance: none; appearance: none; font-family: open-sans, sans-serif; line-height: 1.55; font-size: 18px; font-weight: 400; color: #4A4A4A; color: white; line-height: 1.1; text-decoration: none; background-color: #23457c; border-radius: 10px; position: relative; overflow: hidden; flex-grow: 1; align-items: center; border: 1px solid #DADDDF; background-color: transparent; color: #23457c; font-size: 16px; } @media (max-width: 1024px) { .loads__text { font-size: 16px; } } @media (max-width: 768px) { .loads__text { font-size: 16px; } } @media (max-width: 576px) { .loads__text { font-size: 13px; } } .loads__text + * { margin-top: 45px; } @media (max-width: 1024px) { .loads__text + * { margin-top: 35px; } } @media (max-width: 768px) { .loads__text + * { margin-top: 35px; } } @media (max-width: 576px) { .loads__text + * { margin-top: 35px; } } .loads__text__icon { display: block; margin-left: 15px; height: 100%; width: auto; } .loads__text__icon rect, .loads__text__icon circle, .loads__text__icon ellipse, .loads__text__icon path, .loads__text__icon polygon, .loads__text__icon polyline { fill: currentColor; } .loads__text__icon.-left { margin-left: 0; margin-right: 15px; } @media (max-width: 1024px) { .loads__text { border-radius: 7px; } } @media (max-width: 576px) { .loads__text { border-radius: 5px; } } @media (max-width: 1024px) { .loads__text { padding: 8px 10px 7px; } } @media (max-width: 576px) { .loads__text { padding: 6px 10px 5px; } } .loads__text span { display: flex; transition: 0.2s ease-in-out; color: inherit !important; } .loads__text span + span { transform: translate(0%, 200%); position: absolute; } .loads__text h6 { display: flex; align-items: center; margin-left: 10px; } .loads__item { display: flex; width: 100%; } .loads__item + .loads__item { margin-top: 10px; } .loads__item:hover .loads__text span { transform: translate(0%, -200%); } .loads__item:hover .loads__text span + span { transform: translate(0%, 0%); } .loads__item:hover .loads__icon svg { transform: translate(0%, 200%); } .loads__item:hover .loads__icon svg + svg { transform: translate(0%, 0%); } .loads__icon { border-radius: 10px; display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; width: 41px; height: 41px; margin-top: 0; margin-left: -1px; border: 1px solid #DADDDF; border-radius: 10px; } @media (max-width: 1024px) { .loads__icon { border-radius: 7px; } } @media (max-width: 576px) { .loads__icon { border-radius: 5px; } } @media (max-width: 1024px) { .loads__icon { border-radius: 7px; } } @media (max-width: 576px) { .loads__icon { border-radius: 5px; } } @media (max-width: 1024px) { .loads__icon { width: 35px; height: 35px; } } @media (max-width: 576px) { .loads__icon { width: 27px; height: 27px; } } .loads__icon svg { width: 40%; transition: 0.2s ease-in-out; } .loads__icon svg + svg { position: absolute; transform: translate(0%, -200%); } .loads__icon svg * { fill: #23457c; } .beam { display: flex; justify-content: space-between; align-items: center; width: 100%; padding: 15px 25px; background-color: transparent; border: 1px solid #DADDDF; border-radius: 10px; } .beam__content { display: inline-flex; } .beam__button { display: inline-flex; } .dutch { top: 59px; z-index: 999; padding-top: 0px !important; width: 100%; background-color: rgba(255, 255, 255, 0.1); } .dutch .container { justify-content: center; padding-top: 20px; padding-bottom: 20px; } @media (max-width: 768px) { .dutch .container { padding-top: 10px; padding-bottom: 10px; } } .dutch p { font-size: 14px; } .dutch p svg { width: 16px !important; } .pagination { display: flex; flex-direction: column; align-items: center; margin-top: 100px; } @media (max-width: 1024px) { .pagination { margin-top: 70px; } } @media (max-width: 768px) { .pagination { margin-top: 70px; } } @media (max-width: 576px) { .pagination { margin-top: 50px; } } @media (max-width: 375px) { .pagination { margin-top: 50px; } } .pagination__numbers { display: flex; } .pagination__item { display: flex; align-items: center; justify-content: center; border-radius: 5px; width: 30px; height: 30px; border: 1px solid #DADDDF; background-color: white; color: #2B2E34; font-size: 14px; } @media (max-width: 1024px) { .pagination__item { border-radius: 3px; } } @media (max-width: 576px) { .pagination__item { border-radius: 3px; } } .pagination__item img { width: 25%; margin: 0; } .pagination__item.-previous img { transform: rotate(180deg); } .pagination__item.-active, .pagination__item:hover { background-color: #23457c; color: white; } .pagination__item.-disabled { pointer-events: none; } .pagination__item.-disabled svg { opacity: 0.3; } .pagination__item + .pagination__item { margin-left: 5px; } .pagination__text { margin-top: 20px; color: #2B2E34; font-size: 12px; } .topbar { display: flex; background-color: black; } .topbar__inner { justify-content: center !important; align-items: center; grid-gap: 40px; padding: 15px 0; height: auto !important; background: linear-gradient(to right, black, #23457c, black) !important; } @media (max-width: 576px) { .topbar__inner { justify-content: space-between !important; grid-gap: 10px; padding: 10px 0; } } .topbar__inner * { margin-top: 0 !important; } .topbar__inner p, .topbar__inner a, .topbar__inner .topbar__link { font-size: 16px !important; color: white !important; } @media (max-width: 576px) { .topbar__inner p, .topbar__inner a, .topbar__inner .topbar__link { font-size: 12px; } } .topbar__inner a { font-family: work-sans, sans-serif; } @media (max-width: 576px) { .topbar__inner .button__mobile { display: none; } }