/** * Swiper 8.3.1 * Most modern mobile touch slider and framework with hardware accelerated transitions * https://swiperjs.com * * Copyright 2014-2022 Vladimir Kharlampidi * * Released under the MIT License * * Released on: July 13, 2022 */ @font-face{font-family:swiper-icons;src:url('data:application/font-woff;charset=utf-8;base64, d09GRgABAAAAAAZgABAAAAAADAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAAGRAAAABoAAAAci6qHkUdERUYAAAWgAAAAIwAAACQAYABXR1BPUwAABhQAAAAuAAAANuAY7+xHU1VCAAAFxAAAAFAAAABm2fPczU9TLzIAAAHcAAAASgAAAGBP9V5RY21hcAAAAkQAAACIAAABYt6F0cBjdnQgAAACzAAAAAQAAAAEABEBRGdhc3AAAAWYAAAACAAAAAj//wADZ2x5ZgAAAywAAADMAAAD2MHtryVoZWFkAAABbAAAADAAAAA2E2+eoWhoZWEAAAGcAAAAHwAAACQC9gDzaG10eAAAAigAAAAZAAAArgJkABFsb2NhAAAC0AAAAFoAAABaFQAUGG1heHAAAAG8AAAAHwAAACAAcABAbmFtZQAAA/gAAAE5AAACXvFdBwlwb3N0AAAFNAAAAGIAAACE5s74hXjaY2BkYGAAYpf5Hu/j+W2+MnAzMYDAzaX6QjD6/4//Bxj5GA8AuRwMYGkAPywL13jaY2BkYGA88P8Agx4j+/8fQDYfA1AEBWgDAIB2BOoAeNpjYGRgYNBh4GdgYgABEMnIABJzYNADCQAACWgAsQB42mNgYfzCOIGBlYGB0YcxjYGBwR1Kf2WQZGhhYGBiYGVmgAFGBiQQkOaawtDAoMBQxXjg/wEGPcYDDA4wNUA2CCgwsAAAO4EL6gAAeNpj2M0gyAACqxgGNWBkZ2D4/wMA+xkDdgAAAHjaY2BgYGaAYBkGRgYQiAHyGMF8FgYHIM3DwMHABGQrMOgyWDLEM1T9/w8UBfEMgLzE////P/5//f/V/xv+r4eaAAeMbAxwIUYmIMHEgKYAYjUcsDAwsLKxc3BycfPw8jEQA/gZBASFhEVExcQlJKWkZWTl5BUUlZRVVNXUNTQZBgMAAMR+E+gAEQFEAAAAKgAqACoANAA+AEgAUgBcAGYAcAB6AIQAjgCYAKIArAC2AMAAygDUAN4A6ADyAPwBBgEQARoBJAEuATgBQgFMAVYBYAFqAXQBfgGIAZIBnAGmAbIBzgHsAAB42u2NMQ6CUAyGW568x9AneYYgm4MJbhKFaExIOAVX8ApewSt4Bic4AfeAid3VOBixDxfPYEza5O+Xfi04YADggiUIULCuEJK8VhO4bSvpdnktHI5QCYtdi2sl8ZnXaHlqUrNKzdKcT8cjlq+rwZSvIVczNiezsfnP/uznmfPFBNODM2K7MTQ45YEAZqGP81AmGGcF3iPqOop0r1SPTaTbVkfUe4HXj97wYE+yNwWYxwWu4v1ugWHgo3S1XdZEVqWM7ET0cfnLGxWfkgR42o2PvWrDMBSFj/IHLaF0zKjRgdiVMwScNRAoWUoH78Y2icB/yIY09An6AH2Bdu/UB+yxopYshQiEvnvu0dURgDt8QeC8PDw7Fpji3fEA4z/PEJ6YOB5hKh4dj3EvXhxPqH/SKUY3rJ7srZ4FZnh1PMAtPhwP6fl2PMJMPDgeQ4rY8YT6Gzao0eAEA409DuggmTnFnOcSCiEiLMgxCiTI6Cq5DZUd3Qmp10vO0LaLTd2cjN4fOumlc7lUYbSQcZFkutRG7g6JKZKy0RmdLY680CDnEJ+UMkpFFe1RN7nxdVpXrC4aTtnaurOnYercZg2YVmLN/d/gczfEimrE/fs/bOuq29Zmn8tloORaXgZgGa78yO9/cnXm2BpaGvq25Dv9S4E9+5SIc9PqupJKhYFSSl47+Qcr1mYNAAAAeNptw0cKwkAAAMDZJA8Q7OUJvkLsPfZ6zFVERPy8qHh2YER+3i/BP83vIBLLySsoKimrqKqpa2hp6+jq6RsYGhmbmJqZSy0sraxtbO3sHRydnEMU4uR6yx7JJXveP7WrDycAAAAAAAH//wACeNpjYGRgYOABYhkgZgJCZgZNBkYGLQZtIJsFLMYAAAw3ALgAeNolizEKgDAQBCchRbC2sFER0YD6qVQiBCv/H9ezGI6Z5XBAw8CBK/m5iQQVauVbXLnOrMZv2oLdKFa8Pjuru2hJzGabmOSLzNMzvutpB3N42mNgZGBg4GKQYzBhYMxJLMlj4GBgAYow/P/PAJJhLM6sSoWKfWCAAwDAjgbRAAB42mNgYGBkAIIbCZo5IPrmUn0hGA0AO8EFTQAA');font-weight:400;font-style:normal} :root{--swiper-theme-color:#007aff} .swiper{margin-left:auto;margin-right:auto;position:relative;overflow:hidden;list-style:none;padding:0;z-index:1} .swiper-vertical>.swiper-wrapper{flex-direction:column} .swiper-wrapper{position:relative;width:100%;height:100%;z-index:1;display:flex;transition-property:transform;box-sizing:content-box} .swiper-android .swiper-slide,.swiper-wrapper{transform:translate3d(0px,0,0)} .swiper-pointer-events{touch-action:pan-y} .swiper-pointer-events.swiper-vertical{touch-action:pan-x} .swiper-slide{flex-shrink:0;width:100%;height:100%;position:relative;transition-property:transform} .swiper-slide-invisible-blank{visibility:hidden} .swiper-autoheight,.swiper-autoheight .swiper-slide{height:auto} .swiper-autoheight .swiper-wrapper{align-items:flex-start;transition-property:transform,height} .swiper-backface-hidden .swiper-slide{transform:translateZ(0);-webkit-backface-visibility:hidden;backface-visibility:hidden} .swiper-3d,.swiper-3d.swiper-css-mode .swiper-wrapper{perspective:1200px} .swiper-3d .swiper-cube-shadow,.swiper-3d .swiper-slide,.swiper-3d .swiper-slide-shadow,.swiper-3d .swiper-slide-shadow-bottom,.swiper-3d .swiper-slide-shadow-left,.swiper-3d .swiper-slide-shadow-right,.swiper-3d .swiper-slide-shadow-top,.swiper-3d .swiper-wrapper{transform-style:preserve-3d} .swiper-3d .swiper-slide-shadow,.swiper-3d .swiper-slide-shadow-bottom,.swiper-3d .swiper-slide-shadow-left,.swiper-3d .swiper-slide-shadow-right,.swiper-3d .swiper-slide-shadow-top{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;z-index:10} .swiper-3d .swiper-slide-shadow{background:rgba(0,0,0,.15)} .swiper-3d .swiper-slide-shadow-left{background-image:linear-gradient(to left,rgba(0,0,0,.5),rgba(0,0,0,0))} .swiper-3d .swiper-slide-shadow-right{background-image:linear-gradient(to right,rgba(0,0,0,.5),rgba(0,0,0,0))} .swiper-3d .swiper-slide-shadow-top{background-image:linear-gradient(to top,rgba(0,0,0,.5),rgba(0,0,0,0))} .swiper-3d .swiper-slide-shadow-bottom{background-image:linear-gradient(to bottom,rgba(0,0,0,.5),rgba(0,0,0,0))} .swiper-css-mode>.swiper-wrapper{overflow:auto;scrollbar-width:none;-ms-overflow-style:none} .swiper-css-mode>.swiper-wrapper::-webkit-scrollbar{display:none} .swiper-css-mode>.swiper-wrapper>.swiper-slide{scroll-snap-align:start start} .swiper-horizontal.swiper-css-mode>.swiper-wrapper{scroll-snap-type:x mandatory} .swiper-vertical.swiper-css-mode>.swiper-wrapper{scroll-snap-type:y mandatory} .swiper-centered>.swiper-wrapper::before{content:'';flex-shrink:0;order:9999} .swiper-centered.swiper-horizontal>.swiper-wrapper>.swiper-slide:first-child{margin-inline-start:var(--swiper-centered-offset-before)} .swiper-centered.swiper-horizontal>.swiper-wrapper::before{height:100%;min-height:1px;width:var(--swiper-centered-offset-after)} .swiper-centered.swiper-vertical>.swiper-wrapper>.swiper-slide:first-child{margin-block-start:var(--swiper-centered-offset-before)} .swiper-centered.swiper-vertical>.swiper-wrapper::before{width:100%;min-width:1px;height:var(--swiper-centered-offset-after)} .swiper-centered>.swiper-wrapper>.swiper-slide{scroll-snap-align:center center} .swiper-virtual .swiper-slide{-webkit-backface-visibility:hidden;transform:translateZ(0)} .swiper-virtual.swiper-css-mode .swiper-wrapper::after{content:'';position:absolute;left:0;top:0;pointer-events:none} .swiper-virtual.swiper-css-mode.swiper-horizontal .swiper-wrapper::after{height:1px;width:var(--swiper-virtual-size)} .swiper-virtual.swiper-css-mode.swiper-vertical .swiper-wrapper::after{width:1px;height:var(--swiper-virtual-size)} :root{--swiper-navigation-size:44px} .swiper-button-next,.swiper-button-prev{position:absolute;top:50%;width:calc(var(--swiper-navigation-size)/ 44 * 27);height:var(--swiper-navigation-size);margin-top:calc(0px - (var(--swiper-navigation-size)/ 2));z-index:10;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--swiper-navigation-color,var(--swiper-theme-color))} .swiper-button-next.swiper-button-disabled,.swiper-button-prev.swiper-button-disabled{opacity:.35;cursor:auto;pointer-events:none} .swiper-button-next.swiper-button-hidden,.swiper-button-prev.swiper-button-hidden{opacity:0;cursor:auto;pointer-events:none} .swiper-navigation-disabled .swiper-button-next,.swiper-navigation-disabled .swiper-button-prev{display:none!important} .swiper-button-next:after,.swiper-button-prev:after{font-family:swiper-icons;font-size:var(--swiper-navigation-size);text-transform:none!important;letter-spacing:0;font-variant:initial;line-height:1} .swiper-button-prev,.swiper-rtl .swiper-button-next{left:10px;right:auto} .swiper-button-prev:after,.swiper-rtl .swiper-button-next:after{content:'prev'} .swiper-button-next,.swiper-rtl .swiper-button-prev{right:10px;left:auto} .swiper-button-next:after,.swiper-rtl .swiper-button-prev:after{content:'next'} .swiper-button-lock{display:none} .swiper-pagination{position:absolute;text-align:center;transition:.3s opacity;transform:translate3d(0,0,0);z-index:10} .swiper-pagination.swiper-pagination-hidden{opacity:0} .swiper-pagination-disabled>.swiper-pagination,.swiper-pagination.swiper-pagination-disabled{display:none!important} .swiper-horizontal>.swiper-pagination-bullets,.swiper-pagination-bullets.swiper-pagination-horizontal,.swiper-pagination-custom,.swiper-pagination-fraction{bottom:10px;left:0;width:100%} .swiper-pagination-bullets-dynamic{overflow:hidden;font-size:0} .swiper-pagination-bullets-dynamic .swiper-pagination-bullet{transform:scale(.33);position:relative} .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active{transform:scale(1)} .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-main{transform:scale(1)} .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev{transform:scale(.66)} .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev-prev{transform:scale(.33)} .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next{transform:scale(.66)} .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next-next{transform:scale(.33)} .swiper-pagination-bullet{width:var(--swiper-pagination-bullet-width,var(--swiper-pagination-bullet-size,8px));height:var(--swiper-pagination-bullet-height,var(--swiper-pagination-bullet-size,8px));display:inline-block;border-radius:50%;background:var(--swiper-pagination-bullet-inactive-color,#000);opacity:var(--swiper-pagination-bullet-inactive-opacity, .2)} button.swiper-pagination-bullet{border:none;margin:0;padding:0;box-shadow:none;-webkit-appearance:none;appearance:none} .swiper-pagination-clickable .swiper-pagination-bullet{cursor:pointer} .swiper-pagination-bullet:only-child{display:none!important} .swiper-pagination-bullet-active{opacity:var(--swiper-pagination-bullet-opacity, 1);background:var(--swiper-pagination-color,var(--swiper-theme-color))} .swiper-pagination-vertical.swiper-pagination-bullets,.swiper-vertical>.swiper-pagination-bullets{right:10px;top:50%;transform:translate3d(0px,-50%,0)} .swiper-pagination-vertical.swiper-pagination-bullets .swiper-pagination-bullet,.swiper-vertical>.swiper-pagination-bullets .swiper-pagination-bullet{margin:var(--swiper-pagination-bullet-vertical-gap,6px) 0;display:block} .swiper-pagination-vertical.swiper-pagination-bullets.swiper-pagination-bullets-dynamic,.swiper-vertical>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic{top:50%;transform:translateY(-50%);width:8px} .swiper-pagination-vertical.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet,.swiper-vertical>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{display:inline-block;transition:.2s transform,.2s top} .swiper-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet,.swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet{margin:0 var(--swiper-pagination-bullet-horizontal-gap,4px)} .swiper-horizontal>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic,.swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic{left:50%;transform:translateX(-50%);white-space:nowrap} .swiper-horizontal>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet,.swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{transition:.2s transform,.2s left} .swiper-horizontal.swiper-rtl>.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{transition:.2s transform,.2s right} .swiper-pagination-progressbar{background:rgba(0,0,0,.25);position:absolute} .swiper-pagination-progressbar .swiper-pagination-progressbar-fill{background:var(--swiper-pagination-color,var(--swiper-theme-color));position:absolute;left:0;top:0;width:100%;height:100%;transform:scale(0);transform-origin:left top} .swiper-rtl .swiper-pagination-progressbar .swiper-pagination-progressbar-fill{transform-origin:right top} .swiper-horizontal>.swiper-pagination-progressbar,.swiper-pagination-progressbar.swiper-pagination-horizontal,.swiper-pagination-progressbar.swiper-pagination-vertical.swiper-pagination-progressbar-opposite,.swiper-vertical>.swiper-pagination-progressbar.swiper-pagination-progressbar-opposite{width:100%;height:4px;left:0;top:0} .swiper-horizontal>.swiper-pagination-progressbar.swiper-pagination-progressbar-opposite,.swiper-pagination-progressbar.swiper-pagination-horizontal.swiper-pagination-progressbar-opposite,.swiper-pagination-progressbar.swiper-pagination-vertical,.swiper-vertical>.swiper-pagination-progressbar{width:4px;height:100%;left:0;top:0} .swiper-pagination-lock{display:none} .swiper-scrollbar{border-radius:10px;position:relative;-ms-touch-action:none;background:rgba(0,0,0,.1)} .swiper-scrollbar-disabled>.swiper-scrollbar,.swiper-scrollbar.swiper-scrollbar-disabled{display:none!important} .swiper-horizontal>.swiper-scrollbar,.swiper-scrollbar.swiper-scrollbar-horizontal{position:absolute;left:1%;bottom:3px;z-index:50;height:5px;width:98%} .swiper-scrollbar.swiper-scrollbar-vertical,.swiper-vertical>.swiper-scrollbar{position:absolute;right:3px;top:1%;z-index:50;width:5px;height:98%} .swiper-scrollbar-drag{height:100%;width:100%;position:relative;background:rgba(0,0,0,.5);border-radius:10px;left:0;top:0} .swiper-scrollbar-cursor-drag{cursor:move} .swiper-scrollbar-lock{display:none} .swiper-zoom-container{width:100%;height:100%;display:flex;justify-content:center;align-items:center;text-align:center} .swiper-zoom-container>canvas,.swiper-zoom-container>img,.swiper-zoom-container>svg{max-width:100%;max-height:100%;object-fit:contain} .swiper-slide-zoomed{cursor:move} .swiper-lazy-preloader{width:42px;height:42px;position:absolute;left:50%;top:50%;margin-left:-21px;margin-top:-21px;z-index:10;transform-origin:50%;box-sizing:border-box;border:4px solid var(--swiper-preloader-color,var(--swiper-theme-color));border-radius:50%;border-top-color:transparent} .swiper-watch-progress .swiper-slide-visible .swiper-lazy-preloader,.swiper:not(.swiper-watch-progress) .swiper-lazy-preloader{animation:swiper-preloader-spin 1s infinite linear} .swiper-lazy-preloader-white{--swiper-preloader-color:#fff} .swiper-lazy-preloader-black{--swiper-preloader-color:#000} @keyframes swiper-preloader-spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}} .swiper .swiper-notification{position:absolute;left:0;top:0;pointer-events:none;opacity:0;z-index:-1000} .swiper-free-mode>.swiper-wrapper{transition-timing-function:ease-out;margin:0 auto} .swiper-grid>.swiper-wrapper{flex-wrap:wrap} .swiper-grid-column>.swiper-wrapper{flex-wrap:wrap;flex-direction:column} .swiper-fade.swiper-free-mode .swiper-slide{transition-timing-function:ease-out} .swiper-fade .swiper-slide{pointer-events:none;transition-property:opacity} .swiper-fade .swiper-slide .swiper-slide{pointer-events:none} .swiper-fade .swiper-slide-active,.swiper-fade .swiper-slide-active .swiper-slide-active{pointer-events:auto} .swiper-cube{overflow:visible} .swiper-cube .swiper-slide{pointer-events:none;-webkit-backface-visibility:hidden;backface-visibility:hidden;z-index:1;visibility:hidden;transform-origin:0 0;width:100%;height:100%} .swiper-cube .swiper-slide .swiper-slide{pointer-events:none} .swiper-cube.swiper-rtl .swiper-slide{transform-origin:100% 0} .swiper-cube .swiper-slide-active,.swiper-cube .swiper-slide-active .swiper-slide-active{pointer-events:auto} .swiper-cube .swiper-slide-active,.swiper-cube .swiper-slide-next,.swiper-cube .swiper-slide-next+.swiper-slide,.swiper-cube .swiper-slide-prev{pointer-events:auto;visibility:visible} .swiper-cube .swiper-slide-shadow-bottom,.swiper-cube .swiper-slide-shadow-left,.swiper-cube .swiper-slide-shadow-right,.swiper-cube .swiper-slide-shadow-top{z-index:0;-webkit-backface-visibility:hidden;backface-visibility:hidden} .swiper-cube .swiper-cube-shadow{position:absolute;left:0;bottom:0px;width:100%;height:100%;opacity:.6;z-index:0} .swiper-cube .swiper-cube-shadow:before{content:'';background:#000;position:absolute;left:0;top:0;bottom:0;right:0;filter:blur(50px)} .swiper-flip{overflow:visible} .swiper-flip .swiper-slide{pointer-events:none;-webkit-backface-visibility:hidden;backface-visibility:hidden;z-index:1} .swiper-flip .swiper-slide .swiper-slide{pointer-events:none} .swiper-flip .swiper-slide-active,.swiper-flip .swiper-slide-active .swiper-slide-active{pointer-events:auto} .swiper-flip .swiper-slide-shadow-bottom,.swiper-flip .swiper-slide-shadow-left,.swiper-flip .swiper-slide-shadow-right,.swiper-flip .swiper-slide-shadow-top{z-index:0;-webkit-backface-visibility:hidden;backface-visibility:hidden} .swiper-creative .swiper-slide{-webkit-backface-visibility:hidden;backface-visibility:hidden;overflow:hidden;transition-property:transform,opacity,height} .swiper-cards{overflow:visible} .swiper-cards .swiper-slide{transform-origin:center bottom;-webkit-backface-visibility:hidden;backface-visibility:hidden;overflow:hidden} @charset "UTF-8"; /*! Animate.css - http://daneden.me/animate Licensed under the MIT license Copyright (c) 2013 Daniel Eden Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. */ .animated { -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } .animated.hinge { -webkit-animation-duration: 2s; animation-duration: 2s; } @-webkit-keyframes bounce { 0%, 20%, 50%, 80%, 100% { -webkit-transform: translateY(0); transform: translateY(0); } 40% { -webkit-transform: translateY(-30px); transform: translateY(-30px); } 60% { -webkit-transform: translateY(-15px); transform: translateY(-15px); } } @keyframes bounce { 0%, 20%, 50%, 80%, 100% { -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } 40% { -webkit-transform: translateY(-30px); -ms-transform: translateY(-30px); transform: translateY(-30px); } 60% { -webkit-transform: translateY(-15px); -ms-transform: translateY(-15px); transform: translateY(-15px); } } .bounce { -webkit-animation-name: bounce; animation-name: bounce; } @keyframes tada { 0% { transform: scale3d(1, 1, 1); } 10%, 20% { transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg); } 30%, 50%, 70%, 90% { transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg); } 40%, 60%, 80% { transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg); } 100% { transform: scale3d(1, 1, 1); } } @-webkit-keyframes tada { 0% { transform: scale3d(1, 1, 1); } 10%, 20% { transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg); } 30%, 50%, 70%, 90% { transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg); } 40%, 60%, 80% { transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg); } 100% { transform: scale3d(1, 1, 1); } } .tada-animation { animation-duration: 1s; animation-iteration-count: 2, 2; animation-name: tada; } @-webkit-keyframes flash { 0%, 50%, 100% { opacity: 1; } 25%, 75% { opacity: 0; } } @keyframes flash { 0%, 50%, 100% { opacity: 1; } 25%, 75% { opacity: 0; } } .flash { -webkit-animation-name: flash; animation-name: flash; } /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ @-webkit-keyframes pulse { 0% { -webkit-transform: scale(1); transform: scale(1); } 50% { -webkit-transform: scale(1.1); transform: scale(1.1); } 100% { -webkit-transform: scale(1); transform: scale(1); } } @keyframes pulse { 0% { -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); } 50% { -webkit-transform: scale(1.1); -ms-transform: scale(1.1); transform: scale(1.1); } 100% { -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); } } .pulse { -webkit-animation-name: pulse; animation-name: pulse; } @-webkit-keyframes shake { 0%, 100% { -webkit-transform: translateX(0); transform: translateX(0); } 10%, 30%, 50%, 70%, 90% { -webkit-transform: translateX(-10px); transform: translateX(-10px); } 20%, 40%, 60%, 80% { -webkit-transform: translateX(10px); transform: translateX(10px); } } @keyframes shake { 0%, 100% { -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } 10%, 30%, 50%, 70%, 90% { -webkit-transform: translateX(-10px); -ms-transform: translateX(-10px); transform: translateX(-10px); } 20%, 40%, 60%, 80% { -webkit-transform: translateX(10px); -ms-transform: translateX(10px); transform: translateX(10px); } } .shake { -webkit-animation-name: shake; animation-name: shake; } @-webkit-keyframes swing { 20% { -webkit-transform: rotate(15deg); transform: rotate(15deg); } 40% { -webkit-transform: rotate(-10deg); transform: rotate(-10deg); } 60% { -webkit-transform: rotate(5deg); transform: rotate(5deg); } 80% { -webkit-transform: rotate(-5deg); transform: rotate(-5deg); } 100% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } } @keyframes swing { 20% { -webkit-transform: rotate(15deg); -ms-transform: rotate(15deg); transform: rotate(15deg); } 40% { -webkit-transform: rotate(-10deg); -ms-transform: rotate(-10deg); transform: rotate(-10deg); } 60% { -webkit-transform: rotate(5deg); -ms-transform: rotate(5deg); transform: rotate(5deg); } 80% { -webkit-transform: rotate(-5deg); -ms-transform: rotate(-5deg); transform: rotate(-5deg); } 100% { -webkit-transform: rotate(0deg); -ms-transform: rotate(0deg); transform: rotate(0deg); } } .swing { -webkit-transform-origin: top center; -ms-transform-origin: top center; transform-origin: top center; -webkit-animation-name: swing; animation-name: swing; } @-webkit-keyframes tada { 0% { -webkit-transform: scale(1); transform: scale(1); } 10%, 20% { -webkit-transform: scale(0.9) rotate(-3deg); transform: scale(0.9) rotate(-3deg); } 30%, 50%, 70%, 90% { -webkit-transform: scale(1.1) rotate(3deg); transform: scale(1.1) rotate(3deg); } 40%, 60%, 80% { -webkit-transform: scale(1.1) rotate(-3deg); transform: scale(1.1) rotate(-3deg); } 100% { -webkit-transform: scale(1) rotate(0); transform: scale(1) rotate(0); } } @keyframes tada { 0% { -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); } 10%, 20% { -webkit-transform: scale(0.9) rotate(-3deg); -ms-transform: scale(0.9) rotate(-3deg); transform: scale(0.9) rotate(-3deg); } 30%, 50%, 70%, 90% { -webkit-transform: scale(1.1) rotate(3deg); -ms-transform: scale(1.1) rotate(3deg); transform: scale(1.1) rotate(3deg); } 40%, 60%, 80% { -webkit-transform: scale(1.1) rotate(-3deg); -ms-transform: scale(1.1) rotate(-3deg); transform: scale(1.1) rotate(-3deg); } 100% { -webkit-transform: scale(1) rotate(0); -ms-transform: scale(1) rotate(0); transform: scale(1) rotate(0); } } .tada { -webkit-animation-name: tada; animation-name: tada; } /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ @-webkit-keyframes wobble { 0% { -webkit-transform: translateX(0%); transform: translateX(0%); } 15% { -webkit-transform: translateX(-25%) rotate(-5deg); transform: translateX(-25%) rotate(-5deg); } 30% { -webkit-transform: translateX(20%) rotate(3deg); transform: translateX(20%) rotate(3deg); } 45% { -webkit-transform: translateX(-15%) rotate(-3deg); transform: translateX(-15%) rotate(-3deg); } 60% { -webkit-transform: translateX(10%) rotate(2deg); transform: translateX(10%) rotate(2deg); } 75% { -webkit-transform: translateX(-5%) rotate(-1deg); transform: translateX(-5%) rotate(-1deg); } 100% { -webkit-transform: translateX(0%); transform: translateX(0%); } } @keyframes wobble { 0% { -webkit-transform: translateX(0%); -ms-transform: translateX(0%); transform: translateX(0%); } 15% { -webkit-transform: translateX(-25%) rotate(-5deg); -ms-transform: translateX(-25%) rotate(-5deg); transform: translateX(-25%) rotate(-5deg); } 30% { -webkit-transform: translateX(20%) rotate(3deg); -ms-transform: translateX(20%) rotate(3deg); transform: translateX(20%) rotate(3deg); } 45% { -webkit-transform: translateX(-15%) rotate(-3deg); -ms-transform: translateX(-15%) rotate(-3deg); transform: translateX(-15%) rotate(-3deg); } 60% { -webkit-transform: translateX(10%) rotate(2deg); -ms-transform: translateX(10%) rotate(2deg); transform: translateX(10%) rotate(2deg); } 75% { -webkit-transform: translateX(-5%) rotate(-1deg); -ms-transform: translateX(-5%) rotate(-1deg); transform: translateX(-5%) rotate(-1deg); } 100% { -webkit-transform: translateX(0%); -ms-transform: translateX(0%); transform: translateX(0%); } } .wobble { -webkit-animation-name: wobble; animation-name: wobble; } @-webkit-keyframes bounceIn { 0% { opacity: 0; -webkit-transform: scale(.3); transform: scale(.3); } 50% { opacity: 1; -webkit-transform: scale(1.05); transform: scale(1.05); } 70% { -webkit-transform: scale(.9); transform: scale(.9); } 100% { -webkit-transform: scale(1); transform: scale(1); } } @keyframes bounceIn { 0% { opacity: 0; -webkit-transform: scale(.3); -ms-transform: scale(.3); transform: scale(.3); } 50% { opacity: 1; -webkit-transform: scale(1.05); -ms-transform: scale(1.05); transform: scale(1.05); } 70% { -webkit-transform: scale(.9); -ms-transform: scale(.9); transform: scale(.9); } 100% { -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); } } .bounceIn { -webkit-animation-name: bounceIn; animation-name: bounceIn; } @-webkit-keyframes bounceInDown { 0% { opacity: 0; -webkit-transform: translateY(-2000px); transform: translateY(-2000px); } 60% { opacity: 1; -webkit-transform: translateY(30px); transform: translateY(30px); } 80% { -webkit-transform: translateY(-10px); transform: translateY(-10px); } 100% { -webkit-transform: translateY(0); transform: translateY(0); } } @keyframes bounceInDown { 0% { opacity: 0; -webkit-transform: translateY(-2000px); -ms-transform: translateY(-2000px); transform: translateY(-2000px); } 60% { opacity: 1; -webkit-transform: translateY(30px); -ms-transform: translateY(30px); transform: translateY(30px); } 80% { -webkit-transform: translateY(-10px); -ms-transform: translateY(-10px); transform: translateY(-10px); } 100% { -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } } .bounceInDown { -webkit-animation-name: bounceInDown; animation-name: bounceInDown; } @-webkit-keyframes bounceInLeft { 0% { opacity: 0; -webkit-transform: translateX(-2000px); transform: translateX(-2000px); } 60% { opacity: 1; -webkit-transform: translateX(30px); transform: translateX(30px); } 80% { -webkit-transform: translateX(-10px); transform: translateX(-10px); } 100% { -webkit-transform: translateX(0); transform: translateX(0); } } @keyframes bounceInLeft { 0% { opacity: 0; -webkit-transform: translateX(-2000px); -ms-transform: translateX(-2000px); transform: translateX(-2000px); } 60% { opacity: 1; -webkit-transform: translateX(30px); -ms-transform: translateX(30px); transform: translateX(30px); } 80% { -webkit-transform: translateX(-10px); -ms-transform: translateX(-10px); transform: translateX(-10px); } 100% { -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } } .bounceInLeft { -webkit-animation-name: bounceInLeft; animation-name: bounceInLeft; } @-webkit-keyframes bounceInRight { 0% { opacity: 0; -webkit-transform: translateX(2000px); transform: translateX(2000px); } 60% { opacity: 1; -webkit-transform: translateX(-30px); transform: translateX(-30px); } 80% { -webkit-transform: translateX(10px); transform: translateX(10px); } 100% { -webkit-transform: translateX(0); transform: translateX(0); } } @keyframes bounceInRight { 0% { opacity: 0; -webkit-transform: translateX(2000px); -ms-transform: translateX(2000px); transform: translateX(2000px); } 60% { opacity: 1; -webkit-transform: translateX(-30px); -ms-transform: translateX(-30px); transform: translateX(-30px); } 80% { -webkit-transform: translateX(10px); -ms-transform: translateX(10px); transform: translateX(10px); } 100% { -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } } .bounceInRight { -webkit-animation-name: bounceInRight; animation-name: bounceInRight; } @-webkit-keyframes bounceInUp { 0% { opacity: 0; -webkit-transform: translateY(2000px); transform: translateY(2000px); } 60% { opacity: 1; -webkit-transform: translateY(-30px); transform: translateY(-30px); } 80% { -webkit-transform: translateY(10px); transform: translateY(10px); } 100% { -webkit-transform: translateY(0); transform: translateY(0); } } @keyframes bounceInUp { 0% { opacity: 0; -webkit-transform: translateY(2000px); -ms-transform: translateY(2000px); transform: translateY(2000px); } 60% { opacity: 1; -webkit-transform: translateY(-30px); -ms-transform: translateY(-30px); transform: translateY(-30px); } 80% { -webkit-transform: translateY(10px); -ms-transform: translateY(10px); transform: translateY(10px); } 100% { -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } } .bounceInUp { -webkit-animation-name: bounceInUp; animation-name: bounceInUp; } @-webkit-keyframes bounceOut { 0% { -webkit-transform: scale(1); transform: scale(1); } 25% { -webkit-transform: scale(.95); transform: scale(.95); } 50% { opacity: 1; -webkit-transform: scale(1.1); transform: scale(1.1); } 100% { opacity: 0; -webkit-transform: scale(.3); transform: scale(.3); } } @keyframes bounceOut { 0% { -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); } 25% { -webkit-transform: scale(.95); -ms-transform: scale(.95); transform: scale(.95); } 50% { opacity: 1; -webkit-transform: scale(1.1); -ms-transform: scale(1.1); transform: scale(1.1); } 100% { opacity: 0; -webkit-transform: scale(.3); -ms-transform: scale(.3); transform: scale(.3); } } .bounceOut { -webkit-animation-name: bounceOut; animation-name: bounceOut; } @-webkit-keyframes bounceOutDown { 0% { -webkit-transform: translateY(0); transform: translateY(0); } 20% { opacity: 1; -webkit-transform: translateY(-20px); transform: translateY(-20px); } 100% { opacity: 0; -webkit-transform: translateY(2000px); transform: translateY(2000px); } } @keyframes bounceOutDown { 0% { -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } 20% { opacity: 1; -webkit-transform: translateY(-20px); -ms-transform: translateY(-20px); transform: translateY(-20px); } 100% { opacity: 0; -webkit-transform: translateY(2000px); -ms-transform: translateY(2000px); transform: translateY(2000px); } } .bounceOutDown { -webkit-animation-name: bounceOutDown; animation-name: bounceOutDown; } @-webkit-keyframes bounceOutLeft { 0% { -webkit-transform: translateX(0); transform: translateX(0); } 20% { opacity: 1; -webkit-transform: translateX(20px); transform: translateX(20px); } 100% { opacity: 0; -webkit-transform: translateX(-2000px); transform: translateX(-2000px); } } @keyframes bounceOutLeft { 0% { -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } 20% { opacity: 1; -webkit-transform: translateX(20px); -ms-transform: translateX(20px); transform: translateX(20px); } 100% { opacity: 0; -webkit-transform: translateX(-2000px); -ms-transform: translateX(-2000px); transform: translateX(-2000px); } } .bounceOutLeft { -webkit-animation-name: bounceOutLeft; animation-name: bounceOutLeft; } @-webkit-keyframes bounceOutRight { 0% { -webkit-transform: translateX(0); transform: translateX(0); } 20% { opacity: 1; -webkit-transform: translateX(-20px); transform: translateX(-20px); } 100% { opacity: 0; -webkit-transform: translateX(2000px); transform: translateX(2000px); } } @keyframes bounceOutRight { 0% { -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } 20% { opacity: 1; -webkit-transform: translateX(-20px); -ms-transform: translateX(-20px); transform: translateX(-20px); } 100% { opacity: 0; -webkit-transform: translateX(2000px); -ms-transform: translateX(2000px); transform: translateX(2000px); } } .bounceOutRight { -webkit-animation-name: bounceOutRight; animation-name: bounceOutRight; } @-webkit-keyframes bounceOutUp { 0% { -webkit-transform: translateY(0); transform: translateY(0); } 20% { opacity: 1; -webkit-transform: translateY(20px); transform: translateY(20px); } 100% { opacity: 0; -webkit-transform: translateY(-2000px); transform: translateY(-2000px); } } @keyframes bounceOutUp { 0% { -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } 20% { opacity: 1; -webkit-transform: translateY(20px); -ms-transform: translateY(20px); transform: translateY(20px); } 100% { opacity: 0; -webkit-transform: translateY(-2000px); -ms-transform: translateY(-2000px); transform: translateY(-2000px); } } .bounceOutUp { -webkit-animation-name: bounceOutUp; animation-name: bounceOutUp; } @-webkit-keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } .fadeIn { -webkit-animation-name: fadeIn; animation-name: fadeIn; } @-webkit-keyframes fadeInDown { 0% { opacity: 0; -webkit-transform: translateY(-20px); transform: translateY(-20px); } 100% { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } } @keyframes fadeInDown { 0% { opacity: 0; -webkit-transform: translateY(-20px); -ms-transform: translateY(-20px); transform: translateY(-20px); } 100% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } } .fadeInDown { -webkit-animation-name: fadeInDown; animation-name: fadeInDown; } @-webkit-keyframes fadeInDownBig { 0% { opacity: 0; -webkit-transform: translateY(-2000px); transform: translateY(-2000px); } 100% { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } } @keyframes fadeInDownBig { 0% { opacity: 0; -webkit-transform: translateY(-2000px); -ms-transform: translateY(-2000px); transform: translateY(-2000px); } 100% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } } .fadeInDownBig { -webkit-animation-name: fadeInDownBig; animation-name: fadeInDownBig; } @-webkit-keyframes fadeInLeft { 0% { opacity: 0; -webkit-transform: translateX(-20px); transform: translateX(-20px); } 100% { opacity: 1; -webkit-transform: translateX(0); transform: translateX(0); } } @keyframes fadeInLeft { 0% { opacity: 0; -webkit-transform: translateX(-20px); -ms-transform: translateX(-20px); transform: translateX(-20px); } 100% { opacity: 1; -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } } .fadeInLeft { -webkit-animation-name: fadeInLeft; animation-name: fadeInLeft; } @-webkit-keyframes fadeInLeftBig { 0% { opacity: 0; -webkit-transform: translateX(-2000px); transform: translateX(-2000px); } 100% { opacity: 1; -webkit-transform: translateX(0); transform: translateX(0); } } @keyframes fadeInLeftBig { 0% { opacity: 0; -webkit-transform: translateX(-2000px); -ms-transform: translateX(-2000px); transform: translateX(-2000px); } 100% { opacity: 1; -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } } .fadeInLeftBig { -webkit-animation-name: fadeInLeftBig; animation-name: fadeInLeftBig; } @-webkit-keyframes fadeInRight { 0% { opacity: 0; -webkit-transform: translateX(20px); transform: translateX(20px); } 100% { opacity: 1; -webkit-transform: translateX(0); transform: translateX(0); } } @keyframes fadeInRight { 0% { opacity: 0; -webkit-transform: translateX(20px); -ms-transform: translateX(20px); transform: translateX(20px); } 100% { opacity: 1; -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } } .fadeInRight { -webkit-animation-name: fadeInRight; animation-name: fadeInRight; } @-webkit-keyframes fadeInRightBig { 0% { opacity: 0; -webkit-transform: translateX(2000px); transform: translateX(2000px); } 100% { opacity: 1; -webkit-transform: translateX(0); transform: translateX(0); } } @keyframes fadeInRightBig { 0% { opacity: 0; -webkit-transform: translateX(2000px); -ms-transform: translateX(2000px); transform: translateX(2000px); } 100% { opacity: 1; -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } } .fadeInRightBig { -webkit-animation-name: fadeInRightBig; animation-name: fadeInRightBig; } @-webkit-keyframes fadeInUp { 0% { opacity: 0; -webkit-transform: translateY(20px); transform: translateY(20px); } 100% { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } } @keyframes fadeInUp { 0% { opacity: 0; -webkit-transform: translateY(20px); -ms-transform: translateY(20px); transform: translateY(20px); } 100% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } } .fadeInUp { -webkit-animation-name: fadeInUp; animation-name: fadeInUp; } @-webkit-keyframes fadeInUpBig { 0% { opacity: 0; -webkit-transform: translateY(2000px); transform: translateY(2000px); } 100% { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } } @keyframes fadeInUpBig { 0% { opacity: 0; -webkit-transform: translateY(2000px); -ms-transform: translateY(2000px); transform: translateY(2000px); } 100% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } } .fadeInUpBig { -webkit-animation-name: fadeInUpBig; animation-name: fadeInUpBig; } @-webkit-keyframes fadeOut { 0% { opacity: 1; } 100% { opacity: 0; } } @keyframes fadeOut { 0% { opacity: 1; } 100% { opacity: 0; } } .fadeOut { -webkit-animation-name: fadeOut; animation-name: fadeOut; } @-webkit-keyframes fadeOutDown { 0% { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } 100% { opacity: 0; -webkit-transform: translateY(20px); transform: translateY(20px); } } @keyframes fadeOutDown { 0% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } 100% { opacity: 0; -webkit-transform: translateY(20px); -ms-transform: translateY(20px); transform: translateY(20px); } } .fadeOutDown { -webkit-animation-name: fadeOutDown; animation-name: fadeOutDown; } @-webkit-keyframes fadeOutDownBig { 0% { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } 100% { opacity: 0; -webkit-transform: translateY(2000px); transform: translateY(2000px); } } @keyframes fadeOutDownBig { 0% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } 100% { opacity: 0; -webkit-transform: translateY(2000px); -ms-transform: translateY(2000px); transform: translateY(2000px); } } .fadeOutDownBig { -webkit-animation-name: fadeOutDownBig; animation-name: fadeOutDownBig; } @-webkit-keyframes fadeOutLeft { 0% { opacity: 1; -webkit-transform: translateX(0); transform: translateX(0); } 100% { opacity: 0; -webkit-transform: translateX(-20px); transform: translateX(-20px); } } @keyframes fadeOutLeft { 0% { opacity: 1; -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } 100% { opacity: 0; -webkit-transform: translateX(-20px); -ms-transform: translateX(-20px); transform: translateX(-20px); } } .fadeOutLeft { -webkit-animation-name: fadeOutLeft; animation-name: fadeOutLeft; } @-webkit-keyframes fadeOutLeftBig { 0% { opacity: 1; -webkit-transform: translateX(0); transform: translateX(0); } 100% { opacity: 0; -webkit-transform: translateX(-2000px); transform: translateX(-2000px); } } @keyframes fadeOutLeftBig { 0% { opacity: 1; -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } 100% { opacity: 0; -webkit-transform: translateX(-2000px); -ms-transform: translateX(-2000px); transform: translateX(-2000px); } } .fadeOutLeftBig { -webkit-animation-name: fadeOutLeftBig; animation-name: fadeOutLeftBig; } @-webkit-keyframes fadeOutRight { 0% { opacity: 1; -webkit-transform: translateX(0); transform: translateX(0); } 100% { opacity: 0; -webkit-transform: translateX(20px); transform: translateX(20px); } } @keyframes fadeOutRight { 0% { opacity: 1; -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } 100% { opacity: 0; -webkit-transform: translateX(20px); -ms-transform: translateX(20px); transform: translateX(20px); } } .fadeOutRight { -webkit-animation-name: fadeOutRight; animation-name: fadeOutRight; } @-webkit-keyframes fadeOutRightBig { 0% { opacity: 1; -webkit-transform: translateX(0); transform: translateX(0); } 100% { opacity: 0; -webkit-transform: translateX(2000px); transform: translateX(2000px); } } @keyframes fadeOutRightBig { 0% { opacity: 1; -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } 100% { opacity: 0; -webkit-transform: translateX(2000px); -ms-transform: translateX(2000px); transform: translateX(2000px); } } .fadeOutRightBig { -webkit-animation-name: fadeOutRightBig; animation-name: fadeOutRightBig; } @-webkit-keyframes fadeOutUp { 0% { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } 100% { opacity: 0; -webkit-transform: translateY(-20px); transform: translateY(-20px); } } @keyframes fadeOutUp { 0% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } 100% { opacity: 0; -webkit-transform: translateY(-20px); -ms-transform: translateY(-20px); transform: translateY(-20px); } } .fadeOutUp { -webkit-animation-name: fadeOutUp; animation-name: fadeOutUp; } @-webkit-keyframes fadeOutUpBig { 0% { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } 100% { opacity: 0; -webkit-transform: translateY(-2000px); transform: translateY(-2000px); } } @keyframes fadeOutUpBig { 0% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } 100% { opacity: 0; -webkit-transform: translateY(-2000px); -ms-transform: translateY(-2000px); transform: translateY(-2000px); } } .fadeOutUpBig { -webkit-animation-name: fadeOutUpBig; animation-name: fadeOutUpBig; } @-webkit-keyframes flip { 0% { -webkit-transform: perspective(400px) translateZ(0) rotateY(0) scale(1); transform: perspective(400px) translateZ(0) rotateY(0) scale(1); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 40% { -webkit-transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1); transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 50% { -webkit-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1); transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 80% { -webkit-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(.95); transform: perspective(400px) translateZ(0) rotateY(360deg) scale(.95); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 100% { -webkit-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1); transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } } @keyframes flip { 0% { -webkit-transform: perspective(400px) translateZ(0) rotateY(0) scale(1); -ms-transform: perspective(400px) translateZ(0) rotateY(0) scale(1); transform: perspective(400px) translateZ(0) rotateY(0) scale(1); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 40% { -webkit-transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1); -ms-transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1); transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 50% { -webkit-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1); -ms-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1); transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 80% { -webkit-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(.95); -ms-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(.95); transform: perspective(400px) translateZ(0) rotateY(360deg) scale(.95); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 100% { -webkit-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1); -ms-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1); transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } } .animated.flip { -webkit-backface-visibility: visible; -ms-backface-visibility: visible; backface-visibility: visible; -webkit-animation-name: flip; animation-name: flip; } @-webkit-keyframes flipInX { 0% { -webkit-transform: perspective(400px) rotateX(90deg); transform: perspective(400px) rotateX(90deg); opacity: 0; } 40% { -webkit-transform: perspective(400px) rotateX(-10deg); transform: perspective(400px) rotateX(-10deg); } 70% { -webkit-transform: perspective(400px) rotateX(10deg); transform: perspective(400px) rotateX(10deg); } 100% { -webkit-transform: perspective(400px) rotateX(0deg); transform: perspective(400px) rotateX(0deg); opacity: 1; } } @keyframes flipInX { 0% { -webkit-transform: perspective(400px) rotateX(90deg); -ms-transform: perspective(400px) rotateX(90deg); transform: perspective(400px) rotateX(90deg); opacity: 0; } 40% { -webkit-transform: perspective(400px) rotateX(-10deg); -ms-transform: perspective(400px) rotateX(-10deg); transform: perspective(400px) rotateX(-10deg); } 70% { -webkit-transform: perspective(400px) rotateX(10deg); -ms-transform: perspective(400px) rotateX(10deg); transform: perspective(400px) rotateX(10deg); } 100% { -webkit-transform: perspective(400px) rotateX(0deg); -ms-transform: perspective(400px) rotateX(0deg); transform: perspective(400px) rotateX(0deg); opacity: 1; } } .flipInX { -webkit-backface-visibility: visible !important; -ms-backface-visibility: visible !important; backface-visibility: visible !important; -webkit-animation-name: flipInX; animation-name: flipInX; } @-webkit-keyframes flipInY { 0% { -webkit-transform: perspective(400px) rotateY(90deg); transform: perspective(400px) rotateY(90deg); opacity: 0; } 40% { -webkit-transform: perspective(400px) rotateY(-10deg); transform: perspective(400px) rotateY(-10deg); } 70% { -webkit-transform: perspective(400px) rotateY(10deg); transform: perspective(400px) rotateY(10deg); } 100% { -webkit-transform: perspective(400px) rotateY(0deg); transform: perspective(400px) rotateY(0deg); opacity: 1; } } @keyframes flipInY { 0% { -webkit-transform: perspective(400px) rotateY(90deg); -ms-transform: perspective(400px) rotateY(90deg); transform: perspective(400px) rotateY(90deg); opacity: 0; } 40% { -webkit-transform: perspective(400px) rotateY(-10deg); -ms-transform: perspective(400px) rotateY(-10deg); transform: perspective(400px) rotateY(-10deg); } 70% { -webkit-transform: perspective(400px) rotateY(10deg); -ms-transform: perspective(400px) rotateY(10deg); transform: perspective(400px) rotateY(10deg); } 100% { -webkit-transform: perspective(400px) rotateY(0deg); -ms-transform: perspective(400px) rotateY(0deg); transform: perspective(400px) rotateY(0deg); opacity: 1; } } .flipInY { -webkit-backface-visibility: visible !important; -ms-backface-visibility: visible !important; backface-visibility: visible !important; -webkit-animation-name: flipInY; animation-name: flipInY; } @-webkit-keyframes flipOutX { 0% { -webkit-transform: perspective(400px) rotateX(0deg); transform: perspective(400px) rotateX(0deg); opacity: 1; } 100% { -webkit-transform: perspective(400px) rotateX(90deg); transform: perspective(400px) rotateX(90deg); opacity: 0; } } @keyframes flipOutX { 0% { -webkit-transform: perspective(400px) rotateX(0deg); -ms-transform: perspective(400px) rotateX(0deg); transform: perspective(400px) rotateX(0deg); opacity: 1; } 100% { -webkit-transform: perspective(400px) rotateX(90deg); -ms-transform: perspective(400px) rotateX(90deg); transform: perspective(400px) rotateX(90deg); opacity: 0; } } .flipOutX { -webkit-animation-name: flipOutX; animation-name: flipOutX; -webkit-backface-visibility: visible !important; -ms-backface-visibility: visible !important; backface-visibility: visible !important; } @-webkit-keyframes flipOutY { 0% { -webkit-transform: perspective(400px) rotateY(0deg); transform: perspective(400px) rotateY(0deg); opacity: 1; } 100% { -webkit-transform: perspective(400px) rotateY(90deg); transform: perspective(400px) rotateY(90deg); opacity: 0; } } @keyframes flipOutY { 0% { -webkit-transform: perspective(400px) rotateY(0deg); -ms-transform: perspective(400px) rotateY(0deg); transform: perspective(400px) rotateY(0deg); opacity: 1; } 100% { -webkit-transform: perspective(400px) rotateY(90deg); -ms-transform: perspective(400px) rotateY(90deg); transform: perspective(400px) rotateY(90deg); opacity: 0; } } .flipOutY { -webkit-backface-visibility: visible !important; -ms-backface-visibility: visible !important; backface-visibility: visible !important; -webkit-animation-name: flipOutY; animation-name: flipOutY; } @-webkit-keyframes lightSpeedIn { 0% { -webkit-transform: translateX(100%) skewX(-30deg); transform: translateX(100%) skewX(-30deg); opacity: 0; } 60% { -webkit-transform: translateX(-20%) skewX(30deg); transform: translateX(-20%) skewX(30deg); opacity: 1; } 80% { -webkit-transform: translateX(0%) skewX(-15deg); transform: translateX(0%) skewX(-15deg); opacity: 1; } 100% { -webkit-transform: translateX(0%) skewX(0deg); transform: translateX(0%) skewX(0deg); opacity: 1; } } @keyframes lightSpeedIn { 0% { -webkit-transform: translateX(100%) skewX(-30deg); -ms-transform: translateX(100%) skewX(-30deg); transform: translateX(100%) skewX(-30deg); opacity: 0; } 60% { -webkit-transform: translateX(-20%) skewX(30deg); -ms-transform: translateX(-20%) skewX(30deg); transform: translateX(-20%) skewX(30deg); opacity: 1; } 80% { -webkit-transform: translateX(0%) skewX(-15deg); -ms-transform: translateX(0%) skewX(-15deg); transform: translateX(0%) skewX(-15deg); opacity: 1; } 100% { -webkit-transform: translateX(0%) skewX(0deg); -ms-transform: translateX(0%) skewX(0deg); transform: translateX(0%) skewX(0deg); opacity: 1; } } .lightSpeedIn { -webkit-animation-name: lightSpeedIn; animation-name: lightSpeedIn; -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } @-webkit-keyframes lightSpeedOut { 0% { -webkit-transform: translateX(0%) skewX(0deg); transform: translateX(0%) skewX(0deg); opacity: 1; } 100% { -webkit-transform: translateX(100%) skewX(-30deg); transform: translateX(100%) skewX(-30deg); opacity: 0; } } @keyframes lightSpeedOut { 0% { -webkit-transform: translateX(0%) skewX(0deg); -ms-transform: translateX(0%) skewX(0deg); transform: translateX(0%) skewX(0deg); opacity: 1; } 100% { -webkit-transform: translateX(100%) skewX(-30deg); -ms-transform: translateX(100%) skewX(-30deg); transform: translateX(100%) skewX(-30deg); opacity: 0; } } .lightSpeedOut { -webkit-animation-name: lightSpeedOut; animation-name: lightSpeedOut; -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } @-webkit-keyframes rotateIn { 0% { -webkit-transform-origin: center center; transform-origin: center center; -webkit-transform: rotate(-200deg); transform: rotate(-200deg); opacity: 0; } 100% { -webkit-transform-origin: center center; transform-origin: center center; -webkit-transform: rotate(0); transform: rotate(0); opacity: 1; } } @keyframes rotateIn { 0% { -webkit-transform-origin: center center; -ms-transform-origin: center center; transform-origin: center center; -webkit-transform: rotate(-200deg); -ms-transform: rotate(-200deg); transform: rotate(-200deg); opacity: 0; } 100% { -webkit-transform-origin: center center; -ms-transform-origin: center center; transform-origin: center center; -webkit-transform: rotate(0); -ms-transform: rotate(0); transform: rotate(0); opacity: 1; } } .rotateIn { -webkit-animation-name: rotateIn; animation-name: rotateIn; } @-webkit-keyframes rotateInDownLeft { 0% { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(-90deg); transform: rotate(-90deg); opacity: 0; } 100% { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(0); transform: rotate(0); opacity: 1; } } @keyframes rotateInDownLeft { 0% { -webkit-transform-origin: left bottom; -ms-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(-90deg); -ms-transform: rotate(-90deg); transform: rotate(-90deg); opacity: 0; } 100% { -webkit-transform-origin: left bottom; -ms-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(0); -ms-transform: rotate(0); transform: rotate(0); opacity: 1; } } .rotateInDownLeft { -webkit-animation-name: rotateInDownLeft; animation-name: rotateInDownLeft; } @-webkit-keyframes rotateInDownRight { 0% { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate(90deg); transform: rotate(90deg); opacity: 0; } 100% { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate(0); transform: rotate(0); opacity: 1; } } @keyframes rotateInDownRight { 0% { -webkit-transform-origin: right bottom; -ms-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate(90deg); -ms-transform: rotate(90deg); transform: rotate(90deg); opacity: 0; } 100% { -webkit-transform-origin: right bottom; -ms-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate(0); -ms-transform: rotate(0); transform: rotate(0); opacity: 1; } } .rotateInDownRight { -webkit-animation-name: rotateInDownRight; animation-name: rotateInDownRight; } @-webkit-keyframes rotateInUpLeft { 0% { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(90deg); transform: rotate(90deg); opacity: 0; } 100% { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(0); transform: rotate(0); opacity: 1; } } @keyframes rotateInUpLeft { 0% { -webkit-transform-origin: left bottom; -ms-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(90deg); -ms-transform: rotate(90deg); transform: rotate(90deg); opacity: 0; } 100% { -webkit-transform-origin: left bottom; -ms-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(0); -ms-transform: rotate(0); transform: rotate(0); opacity: 1; } } .rotateInUpLeft { -webkit-animation-name: rotateInUpLeft; animation-name: rotateInUpLeft; } @-webkit-keyframes rotateInUpRight { 0% { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate(-90deg); transform: rotate(-90deg); opacity: 0; } 100% { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate(0); transform: rotate(0); opacity: 1; } } @keyframes rotateInUpRight { 0% { -webkit-transform-origin: right bottom; -ms-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate(-90deg); -ms-transform: rotate(-90deg); transform: rotate(-90deg); opacity: 0; } 100% { -webkit-transform-origin: right bottom; -ms-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate(0); -ms-transform: rotate(0); transform: rotate(0); opacity: 1; } } .rotateInUpRight { -webkit-animation-name: rotateInUpRight; animation-name: rotateInUpRight; } @-webkit-keyframes rotateOut { 0% { -webkit-transform-origin: center center; transform-origin: center center; -webkit-transform: rotate(0); transform: rotate(0); opacity: 1; } 100% { -webkit-transform-origin: center center; transform-origin: center center; -webkit-transform: rotate(200deg); transform: rotate(200deg); opacity: 0; } } @keyframes rotateOut { 0% { -webkit-transform-origin: center center; -ms-transform-origin: center center; transform-origin: center center; -webkit-transform: rotate(0); -ms-transform: rotate(0); transform: rotate(0); opacity: 1; } 100% { -webkit-transform-origin: center center; -ms-transform-origin: center center; transform-origin: center center; -webkit-transform: rotate(200deg); -ms-transform: rotate(200deg); transform: rotate(200deg); opacity: 0; } } .rotateOut { -webkit-animation-name: rotateOut; animation-name: rotateOut; } @-webkit-keyframes rotateOutDownLeft { 0% { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(0); transform: rotate(0); opacity: 1; } 100% { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(90deg); transform: rotate(90deg); opacity: 0; } } @keyframes rotateOutDownLeft { 0% { -webkit-transform-origin: left bottom; -ms-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(0); -ms-transform: rotate(0); transform: rotate(0); opacity: 1; } 100% { -webkit-transform-origin: left bottom; -ms-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(90deg); -ms-transform: rotate(90deg); transform: rotate(90deg); opacity: 0; } } .rotateOutDownLeft { -webkit-animation-name: rotateOutDownLeft; animation-name: rotateOutDownLeft; } @-webkit-keyframes rotateOutDownRight { 0% { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate(0); transform: rotate(0); opacity: 1; } 100% { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate(-90deg); transform: rotate(-90deg); opacity: 0; } } @keyframes rotateOutDownRight { 0% { -webkit-transform-origin: right bottom; -ms-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate(0); -ms-transform: rotate(0); transform: rotate(0); opacity: 1; } 100% { -webkit-transform-origin: right bottom; -ms-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate(-90deg); -ms-transform: rotate(-90deg); transform: rotate(-90deg); opacity: 0; } } .rotateOutDownRight { -webkit-animation-name: rotateOutDownRight; animation-name: rotateOutDownRight; } @-webkit-keyframes rotateOutUpLeft { 0% { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(0); transform: rotate(0); opacity: 1; } 100% { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(-90deg); transform: rotate(-90deg); opacity: 0; } } @keyframes rotateOutUpLeft { 0% { -webkit-transform-origin: left bottom; -ms-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(0); -ms-transform: rotate(0); transform: rotate(0); opacity: 1; } 100% { -webkit-transform-origin: left bottom; -ms-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(-90deg); -ms-transform: rotate(-90deg); transform: rotate(-90deg); opacity: 0; } } .rotateOutUpLeft { -webkit-animation-name: rotateOutUpLeft; animation-name: rotateOutUpLeft; } @-webkit-keyframes rotateOutUpRight { 0% { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate(0); transform: rotate(0); opacity: 1; } 100% { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate(90deg); transform: rotate(90deg); opacity: 0; } } @keyframes rotateOutUpRight { 0% { -webkit-transform-origin: right bottom; -ms-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate(0); -ms-transform: rotate(0); transform: rotate(0); opacity: 1; } 100% { -webkit-transform-origin: right bottom; -ms-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate(90deg); -ms-transform: rotate(90deg); transform: rotate(90deg); opacity: 0; } } .rotateOutUpRight { -webkit-animation-name: rotateOutUpRight; animation-name: rotateOutUpRight; } @-webkit-keyframes slideInDown { 0% { opacity: 0; -webkit-transform: translateY(-2000px); transform: translateY(-2000px); } 100% { -webkit-transform: translateY(0); transform: translateY(0); } } @keyframes slideInDown { 0% { opacity: 0; -webkit-transform: translateY(-2000px); -ms-transform: translateY(-2000px); transform: translateY(-2000px); } 100% { -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } } .slideInDown { -webkit-animation-name: slideInDown; animation-name: slideInDown; } @-webkit-keyframes slideInLeft { 0% { opacity: 0; -webkit-transform: translateX(-2000px); transform: translateX(-2000px); } 100% { -webkit-transform: translateX(0); transform: translateX(0); } } @keyframes slideInLeft { 0% { opacity: 0; -webkit-transform: translateX(-2000px); -ms-transform: translateX(-2000px); transform: translateX(-2000px); } 100% { -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } } .slideInLeft { -webkit-animation-name: slideInLeft; animation-name: slideInLeft; } @-webkit-keyframes slideInRight { 0% { opacity: 0; -webkit-transform: translateX(2000px); transform: translateX(2000px); } 100% { -webkit-transform: translateX(0); transform: translateX(0); } } @keyframes slideInRight { 0% { opacity: 0; -webkit-transform: translateX(2000px); -ms-transform: translateX(2000px); transform: translateX(2000px); } 100% { -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } } .slideInRight { -webkit-animation-name: slideInRight; animation-name: slideInRight; } @-webkit-keyframes slideOutLeft { 0% { -webkit-transform: translateX(0); transform: translateX(0); } 100% { opacity: 0; -webkit-transform: translateX(-2000px); transform: translateX(-2000px); } } @keyframes slideOutLeft { 0% { -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } 100% { opacity: 0; -webkit-transform: translateX(-2000px); -ms-transform: translateX(-2000px); transform: translateX(-2000px); } } .slideOutLeft { -webkit-animation-name: slideOutLeft; animation-name: slideOutLeft; } @-webkit-keyframes slideOutRight { 0% { -webkit-transform: translateX(0); transform: translateX(0); } 100% { opacity: 0; -webkit-transform: translateX(2000px); transform: translateX(2000px); } } @keyframes slideOutRight { 0% { -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } 100% { opacity: 0; -webkit-transform: translateX(2000px); -ms-transform: translateX(2000px); transform: translateX(2000px); } } .slideOutRight { -webkit-animation-name: slideOutRight; animation-name: slideOutRight; } @-webkit-keyframes slideOutUp { 0% { -webkit-transform: translateY(0); transform: translateY(0); } 100% { opacity: 0; -webkit-transform: translateY(-2000px); transform: translateY(-2000px); } } @keyframes slideOutUp { 0% { -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } 100% { opacity: 0; -webkit-transform: translateY(-2000px); -ms-transform: translateY(-2000px); transform: translateY(-2000px); } } .slideOutUp { -webkit-animation-name: slideOutUp; animation-name: slideOutUp; } @-webkit-keyframes hinge { 0% { -webkit-transform: rotate(0); transform: rotate(0); -webkit-transform-origin: top left; transform-origin: top left; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } 20%, 60% { -webkit-transform: rotate(80deg); transform: rotate(80deg); -webkit-transform-origin: top left; transform-origin: top left; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } 40% { -webkit-transform: rotate(60deg); transform: rotate(60deg); -webkit-transform-origin: top left; transform-origin: top left; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } 80% { -webkit-transform: rotate(60deg) translateY(0); transform: rotate(60deg) translateY(0); opacity: 1; -webkit-transform-origin: top left; transform-origin: top left; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } 100% { -webkit-transform: translateY(700px); transform: translateY(700px); opacity: 0; } } @keyframes hinge { 0% { -webkit-transform: rotate(0); -ms-transform: rotate(0); transform: rotate(0); -webkit-transform-origin: top left; -ms-transform-origin: top left; transform-origin: top left; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } 20%, 60% { -webkit-transform: rotate(80deg); -ms-transform: rotate(80deg); transform: rotate(80deg); -webkit-transform-origin: top left; -ms-transform-origin: top left; transform-origin: top left; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } 40% { -webkit-transform: rotate(60deg); -ms-transform: rotate(60deg); transform: rotate(60deg); -webkit-transform-origin: top left; -ms-transform-origin: top left; transform-origin: top left; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } 80% { -webkit-transform: rotate(60deg) translateY(0); -ms-transform: rotate(60deg) translateY(0); transform: rotate(60deg) translateY(0); opacity: 1; -webkit-transform-origin: top left; -ms-transform-origin: top left; transform-origin: top left; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } 100% { -webkit-transform: translateY(700px); -ms-transform: translateY(700px); transform: translateY(700px); opacity: 0; } } .hinge { -webkit-animation-name: hinge; animation-name: hinge; } /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ @-webkit-keyframes rollIn { 0% { opacity: 0; -webkit-transform: translateX(-100%) rotate(-120deg); transform: translateX(-100%) rotate(-120deg); } 100% { opacity: 1; -webkit-transform: translateX(0px) rotate(0deg); transform: translateX(0px) rotate(0deg); } } @keyframes rollIn { 0% { opacity: 0; -webkit-transform: translateX(-100%) rotate(-120deg); -ms-transform: translateX(-100%) rotate(-120deg); transform: translateX(-100%) rotate(-120deg); } 100% { opacity: 1; -webkit-transform: translateX(0px) rotate(0deg); -ms-transform: translateX(0px) rotate(0deg); transform: translateX(0px) rotate(0deg); } } .rollIn { -webkit-animation-name: rollIn; animation-name: rollIn; } /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ @-webkit-keyframes rollOut { 0% { opacity: 1; -webkit-transform: translateX(0px) rotate(0deg); transform: translateX(0px) rotate(0deg); } 100% { opacity: 0; -webkit-transform: translateX(100%) rotate(120deg); transform: translateX(100%) rotate(120deg); } } @keyframes rollOut { 0% { opacity: 1; -webkit-transform: translateX(0px) rotate(0deg); -ms-transform: translateX(0px) rotate(0deg); transform: translateX(0px) rotate(0deg); } 100% { opacity: 0; -webkit-transform: translateX(100%) rotate(120deg); -ms-transform: translateX(100%) rotate(120deg); transform: translateX(100%) rotate(120deg); } } .rollOut { -webkit-animation-name: rollOut; animation-name: rollOut; } html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; vertical-align: baseline; } html { -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; } img, fieldset, a img { border: none; } input[type="text"], input[type="email"], input[type="tel"], textarea { -webkit-appearance: none; } input[type="submit"], button { cursor: pointer; } input[type="submit"]::-moz-focus-inner, button::-moz-focus-inner { padding: 0; border: 0; } textarea { overflow: auto; } input, button { margin: 0; padding: 0; border: 0; } div, input, textarea, select, button, h1, h2, h3, h4, h5, h6, a, span, a:focus { outline: none; } ul, ol { list-style-type: none; } table { border-spacing: 0; border-collapse: collapse; width: 100%; } html { box-sizing: border-box; } *, *:before, *:after { box-sizing: inherit; } @media (prefers-reduced-motion: reduce) { * { transition: none !important; } } @font-face { font-family: 'Alumni Sans'; src: url("../fonts/AlumniSans-Regular.woff2") format("woff2"); font-weight: normal; font-style: normal; font-display: swap; } @font-face { font-family: 'Alumni Sans'; src: url("../fonts/AlumniSans-SemiBold.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: 'Alumni Sans'; src: url("../fonts/AlumniSans-ExtraBold.woff2") format("woff2"); font-weight: 800; font-style: normal; font-display: swap; } @font-face { font-family: 'Alumni Sans'; src: url("../fonts/AlumniSans-Bold.woff2") format("woff2"); font-weight: bold; font-style: normal; font-display: swap; } @font-face { font-family: 'Alumni Sans'; src: url("../fonts/AlumniSans-Black.woff2") format("woff2"); font-weight: 900; font-style: normal; font-display: swap; } @font-face { font-family: 'Poppins'; src: url("../fonts/Poppins-SemiBold.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: 'Poppins'; src: url("../fonts/Poppins-Regular.woff2") format("woff2"); font-weight: normal; font-style: normal; font-display: swap; } @font-face { font-family: 'Poppins'; src: url("../fonts/Poppins-Bold.woff2") format("woff2"); font-weight: bold; font-style: normal; font-display: swap; } html, body { height: 100%; -webkit-font-smoothing: antialiased; -moz-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -webkit-overflow-scrolling: touch; text-rendering: optimizelegibility; -webkit-font-feature-settings: "liga" 1; -moz-font-feature-settings: "liga" 1; -ms-font-feature-settings: "liga" 1; font-feature-settings: "liga" 1; } * { box-sizing: border-box; } body { margin: 0; font-family: 'Poppins', sans-serif; background-color: #fff; min-width: 320px; overflow-x: hidden; } body.is-open-modal { overflow: hidden; } h1, h2, h3, h4, h5 { margin: 0; padding: 0; } a { text-decoration: none; } a [x-apple-data-detectors] { font-family: inherit; font-size: inherit; font-weight: inherit; line-height: inherit; text-decoration: none; color: inherit; } input[required]:-moz-ui-invalid, textarea[required]:-moz-ui-invalid { box-shadow: none; } textarea { max-width: 100%; } button { margin: 0; padding: 0; border: none; background-color: transparent; cursor: pointer; } .container { margin: 0 auto; max-width: 1448px; padding: 0 20px; } @media only screen and (max-width: 1599px) { .container { max-width: 1210px; } } @media only screen and (max-width: 767px) { .container { padding: 0 15px; } } .main__title { display: block; font-family: 'Alumni Sans', sans-serif; font-style: normal; font-weight: 900; font-size: 110px; line-height: 1.15; text-transform: uppercase; color: #fff; } @media only screen and (max-width: 1599px) { .main__title { font-size: 100px; line-height: 1.1; } } @media only screen and (max-width: 767px) { .main__title { font-size: 78px; } } @media only screen and (max-width: 599px) { .main__title { font-size: 48px; line-height: 1.1; } } .main__title.xxl { font-size: 214px; } @media only screen and (max-width: 1599px) { .main__title.xxl { font-size: 190px; } } @media only screen and (max-width: 1023px) { .main__title.xxl { font-size: 168px; } } @media only screen and (max-width: 599px) { .main__title.xxl { font-size: 64px; } } .main__title.xl { font-size: 156px; } @media only screen and (max-width: 1599px) { .main__title.xl { font-size: 120px; } } @media only screen and (max-width: 1023px) { .main__title.xl { font-size: 120px; } } @media only screen and (max-width: 767px) { .main__title.xl { font-size: 90px; } } @media only screen and (max-width: 599px) { .main__title.xl { font-size: 64px; font-weight: 800; } } .main__title.lg { font-size: 126px; } @media only screen and (max-width: 1599px) { .main__title.lg { font-size: 100px; } } @media only screen and (max-width: 767px) { .main__title.lg { font-size: 90px; } } @media only screen and (max-width: 599px) { .main__title.lg { font-size: 64px; } } .main__title.md2 { font-size: 100px; } @media only screen and (max-width: 1599px) { .main__title.md2 { font-size: 80px; } } @media only screen and (max-width: 767px) { .main__title.md2 { font-size: 78px; } } @media only screen and (max-width: 599px) { .main__title.md2 { font-size: 48px; line-height: 1.1; } } .main__title.md { font-size: 85px; } @media only screen and (max-width: 1599px) { .main__title.md { font-size: 80px; } } @media only screen and (max-width: 767px) { .main__title.md { font-size: 75px; } } @media only screen and (max-width: 599px) { .main__title.md { font-size: 48px; line-height: 1.1; } } .main__title.sm { font-size: 86px; } @media only screen and (max-width: 767px) { .main__title.sm { font-size: 78px; } } @media only screen and (max-width: 599px) { .main__title.sm { font-size: 48px; line-height: 1.1; } } .main__title.sm2 { font-size: 84px; } @media only screen and (max-width: 1599px) { .main__title.sm2 { font-size: 82px; } } @media only screen and (max-width: 767px) { .main__title.sm2 { font-size: 78px; } } @media only screen and (max-width: 599px) { .main__title.sm2 { font-size: 48px; line-height: 1.1; } } .main__title.xs { font-size: 68px; } @media only screen and (max-width: 1599px) { .main__title.xs { font-size: 64px; } } @media only screen and (max-width: 599px) { .main__title.xs { font-size: 48px; line-height: 1.1; } } .main__title.xs2 { font-size: 62px; } @media only screen and (max-width: 1599px) { .main__title.xs2 { font-size: 56px; } } @media only screen and (max-width: 599px) { .main__title.xs2 { font-size: 48px; line-height: 1.1; } } .main__title.xs3 { font-size: 38px; } @media only screen and (max-width: 1599px) { .main__title.xs3 { font-size: 34px; } } .main__subtitle { display: block; font-style: normal; font-weight: 700; font-size: 28px; line-height: 1.4; color: #000; } @media only screen and (max-width: 1599px) { .main__subtitle { font-size: 24px; } } @media only screen and (max-width: 1023px) { .main__subtitle { font-size: 18px; } } @media only screen and (max-width: 599px) { .main__subtitle { font-size: 16px; } } .main__subtitle.sm { font-size: 20px; } @media only screen and (max-width: 1599px) { .main__subtitle.sm { font-size: 20px; } } .main__subtitle.sm2 { font-size: 18px; } .main__subtitle.xs { font-size: 16px; } @media only screen and (max-width: 1599px) { .main__subtitle.xs { font-size: 15px; } } .main__text { display: block; font-style: normal; font-weight: 400; font-size: 20px; line-height: 1.4; color: #fff; } @media only screen and (max-width: 1599px) { .main__text { font-size: 18px; } } @media only screen and (max-width: 599px) { .main__text { font-size: 18px; } } .main__text.xl { font-size: 28px; } @media only screen and (max-width: 1599px) { .main__text.xl { font-size: 20px; } } @media only screen and (max-width: 767px) { .main__text.xl { font-size: 20px; } } @media only screen and (max-width: 599px) { .main__text.xl { font-size: 18px; } } .main__text.lg { font-size: 22px; } @media only screen and (max-width: 1599px) { .main__text.lg { font-size: 20px; } } @media only screen and (max-width: 599px) { .main__text.lg { font-size: 18px; } } .main__text.md { font-size: 18px; } @media only screen and (max-width: 1599px) { .main__text.md { font-size: 17px; } } @media only screen and (max-width: 599px) { .main__text.md { font-size: 16px; } } .main__text.sm { font-size: 16px; } @media only screen and (max-width: 1599px) { .main__text.sm { font-size: 15px; } } .main__text.xs { font-size: 14px; } .main__text.xs2 { font-size: 12px; } .text-uppercase { text-transform: uppercase; } .text-uppercase-none { text-transform: none; } .font-regular { font-weight: 400; } .font-medium { font-weight: 500; } .font-semiBold { font-weight: 600; } .font-bold { font-weight: 700; } .font-black { font-weight: 800; } .font-extrabold { font-weight: 900; } .color-white { color: #fff; } .color-darkgreen { color: #005F5F; } .color-darkgreen2 { color: #215051; } .color-green { color: #016D71; } .color-yellow { color: #FFE36F; } .color-dark { color: #163939; } .color-dark2 { color: #141721; } .color-dark3 { color: #020202; } .color-dark4 { color: #464646; } .color-black { color: #2B2B2B; } .color-black2 { color: #00141F; } .color-darkblue { color: #002353; } .color-grey { color: #4E6969; } .color-grey2 { color: #AFAFAF; } .color-lightgreen { color: #00C80E; } .color-lightgreen2 { color: #CBFFFF; } .color-red { color: #E82127; } .color-purple { color: #A490F4; } .color-pink { color: #FF0871; } .color-blue { color: #629EF1; } .color-blue2 { color: #20248D; } .color-lightblue { color: #D9FEFF; } .color-lightblue2 { color: #5CE1E6; } .color-lightblue3 { color: #6890A6; } .text-center { text-align: center; } .main__link { display: inline-block; align-items: center; font-style: normal; font-weight: 400; font-size: 16px; line-height: 1.1; color: #fff; padding-right: 40px; position: relative; } .main__link.lg { font-size: 22px; } @media only screen and (max-width: 1599px) { .main__link.lg { font-size: 20px; } } @media only screen and (max-width: 767px) { .main__link.lg { font-size: 18px; } } .main__link.green { color: #016D71; } .main__link.green::after { background-image: url("../images/icon-arrow-next-dark.svg"); } .main__link::after { position: absolute; top: 50%; margin-top: -12px; right: 0; content: ''; width: 24px; height: 24px; background-image: url("../images/icon-arrow-next.svg"); background-repeat: no-repeat; background-size: contain; transition-property: transform; transition-duration: .3s; } .main__link:hover::after { transform: translateX(5px); } .apps-logos { display: flex; align-items: center; flex-wrap: wrap; margin: 15px -5px -5px -5px; } @media only screen and (max-width: 767px) { .apps-logos { margin-top: 5px; justify-content: center; } } .apps-logos a { font-size: 0; margin: 5px; display: inline-block; transition-property: opacity; transition-duration: .3s; } .apps-logos a:hover { opacity: .8; } .apps-logos a.googlePlay img { width: 136px; } .apps-logos a.appStore img { width: 120px; } .btn-white { display: inline-block; width: 100%; padding: 23px 20px; background-color: #fff; border-radius: 16px; font-family: 'Poppins', sans-serif; font-style: normal; font-weight: 400; font-size: 18px; line-height: 1; text-align: center; text-transform: capitalize; color: #005F5F; transition-property: background-color; transition-duration: .3s; } .btn-white:hover { background-color: rgba(255, 255, 255, 0.9); } @media only screen and (max-width: 1599px) { .btn-white { padding: 19px; font-size: 17px; } } .btn-green { display: inline-block; width: 100%; padding: 23px 20px; background-color: #005F5F; border-radius: 16px; font-family: 'Poppins', sans-serif; font-style: normal; font-weight: 400; font-size: 18px; line-height: 1; text-align: center; text-transform: capitalize; color: #fff; transition-property: background-color; transition-duration: .3s; } @media only screen and (max-width: 1599px) { .btn-green { padding: 19px; font-size: 17px; } } .btn-green:hover { background-color: rgba(0, 95, 95, 0.9); } .btn-green.sm { padding: 12px 20px; border-radius: 8px; font-size: 16px; } .btn-dark-outline { display: inline-flex; align-items: center; justify-content: center; width: 100%; padding: 19px 20px; border: 1px solid #2B2B2B; border-radius: 16px; font-family: 'Poppins', sans-serif; font-style: normal; font-weight: 400; font-size: 18px; line-height: 1; text-align: center; text-transform: capitalize; color: #2B2B2B; transition-property: opacity; transition-duration: .3s; } @media only screen and (max-width: 1599px) { .btn-dark-outline { padding: 16.5px 19px; font-size: 17px; } } .btn-dark-outline img { width: 24px; height: 24px; display: inline-block; margin-left: 10px; } @media only screen and (max-width: 1599px) { .btn-dark-outline img { width: 20px; height: 20px; } } .btn-dark-outline:hover { opacity: .8; } .overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 14; background-color: rgba(0, 0, 0, 0.5); display: none; } .modal { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: #fff; border-radius: 10px; z-index: 15; } .modal__close { position: absolute; cursor: pointer; top: 10px; right: 10px; z-index: 2; width: 30px; height: 30px; background-image: url("../images/icon-plus-black.svg"); background-repeat: no-repeat; background-size: 30px; background-position: center; transform: rotate(45deg); } .modal--video { display: none; max-width: 1600px; width: 100%; height: 100%; max-height: 950px; padding: 40px; } @media only screen and (max-width: 1599px) { .modal--video { max-width: 1100px; max-height: 650px; } } @media only screen and (max-width: 1200px) { .modal--video { max-width: 800px; max-height: 480px; } } @media only screen and (max-width: 767px) { .modal--video { padding: 40px 16px; max-height: 400px; border-radius: 0; } } @media only screen and (max-width: 440px) { .modal--video { max-height: 340px; } } .modal--video iframe { width: 100%; height: 100%; } .header { position: fixed; top: 0; left: 0; width: 100%; z-index: 10; transition-property: background-color; transition-duration: .3s; } .header--white .header__menu-item a { color: #fff; } @media only screen and (max-width: 1023px) { .header--white .header__menu-item a { color: #2B2B2B; } } .header--white .header__menu-item a::after { background-color: #fff; } @media only screen and (max-width: 1023px) { .header--white .header__menu-item a::after { background-color: #2B2B2B; } } .header.is-fixed { background-color: #2B2B2B; } @media only screen and (max-width: 1023px) { .header.is-fixed { background-color: #fff; } } .header.is-fixed .header__logo { width: 36px; } @media only screen and (max-width: 1023px) { .header.is-fixed .header__logo { width: 40px; } } .header.is-fixed .header__menu-item a { color: #fff; } @media only screen and (max-width: 1023px) { .header .header__menu-item a, .header.is-fixed .header__menu-item a { color: #2B2B2B; } } .header.is-fixed .header__menu-item a::after { background-color: #fff; } @media only screen and (max-width: 1023px) { .header.is-fixed .header__menu-item a::after { background-color: #2B2B2B; } } .header.is-fixed .header__action .btn-white { padding: 13px 20px; } .header.is-fixed.header--mob-white .header__burger::after, .header.is-fixed.header--mob-white .header__burger::before, .header.is-fixed.header--mob-white .header__burger span { background-color: #141721; } .header__content { padding: 8px 0; display: flex; align-items: center; justify-content: space-between; } @media only screen and (max-width: 1023px) { .header__content { padding: 14px 0; } } .header__logo { flex: 0 0 auto; width: 40px; font-size: 0; transition-property: opacity, width; transition-duration: .3s; } .header__logo:hover { opacity: .9; } .header__logo img { width: 100%; } .header__menu { display: flex; align-items: center; flex: 1 1 auto; margin-left: 16px; } @media only screen and (max-width: 1023px) { .header__menu { position: fixed; top: 68px; right: 0; background-color: #fff; z-index: 9; width: 100%; height: calc(100% - 68px); max-height: calc(100% - 68px); overflow-y: auto; display: block; margin-left: 0; padding: 0 16px 20px 16px; transform: translateX(100%); transition-property: transform; transition-duration: .4s; } } .header__menu-item { flex: 0 0 auto; margin: 0 24px; } @media only screen and (max-width: 1260px) { .header__menu-item { margin: 0 15px; } } @media only screen and (max-width: 1200px) { .header__menu-item { margin: 0 10px; } } @media only screen and (max-width: 1023px) { .header__menu-item { margin: 15px 0; } } .header__menu-item:last-child { margin-left: auto; } .header__menu-item a { font-family: 'Alumni Sans', sans-serif; font-style: normal; font-weight: 700; font-size: 19px; line-height: 1; color: #fff; position: relative; display: inline-block; transition-property: color; transition-duration: .3s; } @media only screen and (max-width: 1023px) { .header__menu-item a { display: block; } } .header__menu-item a::after { position: absolute; top: 100%; left: 0; content: ''; width: 0; height: 1px; background-color: #fff; transition-property: width; transition-duration: .3s; } @media only screen and (max-width: 1023px) { .header__menu-item a::after { display: none; } } .header__menu-item a:hover::after { width: 100%; } .header__action { display: flex; align-items: center; flex: 0 0 auto; justify-content: flex-end; padding-left: 20px; } .header__action .btn-white { max-width: 150px; padding: 19px 20px; transition-property: padding; transition-duration: .3s; } @media only screen and (max-width: 1200px) { .header__action .btn-white { padding: 15px 18px; } } @media only screen and (max-width: 1023px) { .header__action .btn-white { display: none; } } .header__burger { display: none; width: 24px; height: 24px; position: relative; cursor: pointer; } @media only screen and (max-width: 1023px) { .header__burger { display: block; } } .header__burger::before { position: absolute; top: 6px; left: 2px; content: ''; width: calc(100% - 4px); height: 2px; background-color: #141721; border-radius: 2px; transition-property: transform; transition-duration: .3s; } .header__burger span { position: absolute; top: 50%; transform: translateY(-50%); left: 2px; content: ''; width: calc(100% - 4px); height: 2px; background-color: #141721; border-radius: 2px; transition-property: opacity; transition-duration: .3s; } .header__burger::after { position: absolute; bottom: 6px; left: 2px; content: ''; width: calc(100% - 4px); height: 2px; background-color: #141721; border-radius: 2px; transition-property: transform; transition-duration: .3s; } .header--mob-white .header__burger::after, .header--mob-white .header__burger::before, .header--mob-white .header__burger span { background-color: #fff; } body.is-open-menu { overflow: hidden; } body.is-open-menu .header { background-color: #fff; } body.is-open-menu .header__burger::before { transform: translate(0, 5px) rotate(45deg); } body.is-open-menu .header__burger span { opacity: 0; } body.is-open-menu .header__burger::after { transform: translate(0, -5px) rotate(-45deg); } body.is-open-menu .header__menu { transform: translateX(0); } body.is-open-menu .header--mob-white .header__burger::after, body.is-open-menu .header--mob-white .header__burger::before, body.is-open-menu .header--mob-white .header__burger span { background-color: #141721; } .hero { background-repeat: no-repeat; background-size: cover; background-position: center; background-image: url("../images/bg-hero.png"); overflow: hidden; } @media only screen and (max-width: 1100px) { .hero { background-color: #5CE1E6; background-image: url("../images/bg-hero-mob.svg"); background-repeat: no-repeat; background-position: center bottom; background-size: inherit; } } .hero .main__title span { display: inline-block; } @media only screen and (max-width: 1599px) { .hero .main__title { font-size: 100px; } } @media only screen and (max-width: 1000px) { .hero .main__title { font-size: 78px; } } @media only screen and (max-width: 767px) { .hero .main__title { font-size: 58px; } } @media only screen and (max-width: 599px) { .hero .main__title { font-size: 48px; } } .hero--program { background-repeat: inherit; background-size: inherit; background-position: inherit; background-color: #4275CB; background-image: none; } @media only screen and (max-width: 1599px) { .hero--program .hero__content { padding-top: 140px; } } @media only screen and (max-width: 1100px) { .hero--program .hero__content { padding-top: 100px; } } .hero--program .hero__actions .btn-white { max-width: 210px; } @media only screen and (max-width: 1100px) { .hero--program .hero__actions .btn-white { margin: 0 auto; } } .hero--program .hero__description { padding-right: 40px; } @media only screen and (max-width: 1100px) { .hero--program .hero__description { padding-right: 0; } } .hero--program .hero__description .main__text { max-width: 480px; margin-top: 20px; } @media only screen and (max-width: 1100px) { .hero--program .hero__description .main__text { margin: 20px auto 0 auto; } } .hero--program .hero__description .main__title { line-height: .95; } @media only screen and (max-width: 1599px) { .hero--program .hero__description .main__title { line-height: 1; font-size: 90px; } } @media only screen and (max-width: 599px) { .hero--program .hero__description .main__title { font-size: 48px; line-height: 1; } } .hero--program .hero__image { width: 37%; margin-right: 100px; position: relative; } @media only screen and (max-width: 1599px) { .hero--program .hero__image { margin-right: 0; width: 35%; } } .hero--program .hero__image::after { display: none; } .hero--program .hero__image .hero__slider { position: relative; z-index: 2; } .hero--program .hero__image .hero__slider img { max-width: 480px; width: 100%; display: block; margin: 0 auto; } @media only screen and (max-width: 1100px) { .hero--program .hero__image { margin: 40px auto 0 auto; width: 100%; max-width: 390px; } } @media only screen and (max-width: 599px) { .hero--program .hero__image { max-width: 280px; margin-top: 0; } } @media only screen and (max-width: 360px) { .hero--program .hero__image { max-width: 210px; margin-top: 0; } } .hero--program .hero__image-decor { position: absolute; z-index: 1; top: 50%; left: 50%; transform: translate(-50%, -50%); max-height: 100%; } @media only screen and (max-width: 1599px) { .hero--program .hero__image-decor { max-height: 88%; } } .hero--program .hero__total--one { top: 40%; left: 20px; bottom: inherit; } .hero--program .hero__total--two { bottom: 165px; right: 56px; left: inherit; } @media only screen and (max-width: 599px) { .hero--program .hero__total--two { right: 0; bottom: 50px; } } .hero--program .hero__actions .btn-white { max-width: 210px; } .hero--qualification { background-color: #644EBC; background-image: url("../images/bg-qualification.svg"); background-repeat: no-repeat; background-position: center right; background-size: contain; } @media only screen and (max-width: 1100px) { .hero--qualification { background-image: none; } } .hero--qualification .hero__image { width: calc(46.4% + 25px); margin-right: -25px; } @media only screen and (max-width: 1599px) { .hero--qualification .hero__image { width: calc(44.4% + 25px); } } @media only screen and (max-width: 1100px) { .hero--qualification .hero__image { width: 100%; margin: 0 auto; max-width: 500px; } } .hero--qualification .hero__image::after { display: none; } .hero--qualification .hero__content { align-items: flex-start; padding-top: 140px; } @media only screen and (max-width: 1599px) { .hero--qualification .hero__content { padding-top: 120px; } } .hero--qualification .main__title { line-height: 1; max-width: 640px; } @media only screen and (max-width: 1599px) { .hero--qualification .main__title { font-size: 96px; line-height: .8; } } @media only screen and (max-width: 1100px) { .hero--qualification .main__title { margin: 0 auto; font-size: 88px; } } @media only screen and (max-width: 767px) { .hero--qualification .main__title { font-size: 68px; } } @media only screen and (max-width: 599px) { .hero--qualification .main__title { font-size: 48px; } } .hero--qualification .hero__description { padding: 50px 80px 0 0; } @media only screen and (max-width: 1100px) { .hero--qualification .hero__description { text-align: center; padding: 0; } } .hero--qualification .main__text { max-width: 480px; } @media only screen and (max-width: 1100px) { .hero--qualification .main__text { margin: 0 auto; } } .hero--qualification .hero__actions .btn-white { max-width: 210px; } @media only screen and (max-width: 1100px) { .hero--qualification .hero__actions .btn-white { margin: 0 auto; } } .hero--funded-phase { background-color: #BFEB10; background-image: url("../images/bg-funded-phase.svg"); background-repeat: no-repeat; background-position: center right 96px; background-size: contain; } @media only screen and (max-width: 1100px) { .hero--funded-phase { background-image: none; } } .hero--funded-phase .hero__image { width: 41.5%; margin-right: 0; } @media only screen and (max-width: 1100px) { .hero--funded-phase .hero__image { width: 100%; margin: 30px auto 0 auto; max-width: 500px; } } .hero--funded-phase .hero__image-sell { position: absolute; bottom: 270px; left: 20px; background: #BF0404; border-radius: 16px; font-family: 'Alumni Sans', sans-serif; font-style: normal; font-weight: 600; font-size: 40px; color: #fff; line-height: 1; text-transform: uppercase; padding: 12px 24px; z-index: 4; } @media only screen and (max-width: 1599px) { .hero--funded-phase .hero__image-sell { font-size: 30px; padding: 9px 18px; border-radius: 12px; } } @media only screen and (max-width: 500px) { .hero--funded-phase .hero__image-sell { font-size: 16px; bottom: 160px; left: 8px; border-radius: 6px; padding: 6px 10px; } } .hero--funded-phase .hero__image-buy { position: absolute; bottom: 408px; right: 77px; background: #4BBF04; border-radius: 16px; font-family: 'Alumni Sans', sans-serif; font-style: normal; font-weight: 600; font-size: 40px; color: #fff; line-height: 1; text-transform: uppercase; padding: 12px 24px; z-index: 4; } @media only screen and (max-width: 1599px) { .hero--funded-phase .hero__image-buy { font-size: 30px; padding: 9px 18px; border-radius: 12px; } } @media only screen and (max-width: 500px) { .hero--funded-phase .hero__image-buy { bottom: 220px; font-size: 18px; right: 40px; border-radius: 6px; padding: 6px 10px; } } .hero--funded-phase .hero__image::after { display: none; } .hero--funded-phase .hero__image-decor { position: absolute; top: 0; right: 0; z-index: 1; max-width: 585px; width: 100%; } .hero--funded-phase .hero__image .hero__slider { z-index: 2; } .hero--funded-phase .hero__content { align-items: flex-start; padding-top: 88px; } .hero--funded-phase .main__title { max-width: 640px; } @media only screen and (max-width: 1599px) { .hero--funded-phase .main__title { font-size: 96px; } } @media only screen and (max-width: 1100px) { .hero--funded-phase .main__title { margin: 0 auto; font-size: 88px; } } @media only screen and (max-width: 767px) { .hero--funded-phase .main__title { font-size: 68px; } } @media only screen and (max-width: 599px) { .hero--funded-phase .main__title { font-size: 48px; } } .hero--funded-phase .hero__description { padding: 80px 80px 0 0; } @media only screen and (max-width: 1100px) { .hero--funded-phase .hero__description { text-align: center; padding: 0; } } .hero--funded-phase .main__text { max-width: 480px; } @media only screen and (max-width: 1100px) { .hero--funded-phase .main__text { margin: 0 auto; } } .hero--funded-phase .hero__actions .btn-white { max-width: 210px; } @media only screen and (max-width: 1100px) { .hero--funded-phase .hero__actions .btn-white { margin: 0 auto; } } .hero--services { background-color: #58A57D; background-image: none; } .hero--services .hero__image { width: 51%; margin-right: 0; } @media only screen and (max-width: 1599px) { .hero--services .hero__image { width: 45%; } } @media only screen and (max-width: 1250px) { .hero--services .hero__image { width: 43%; } } @media only screen and (max-width: 1100px) { .hero--services .hero__image { width: 100%; margin: 90px auto 0 auto; max-width: 500px; } } .hero--services .hero__image::after { display: none; } .hero--services .hero__image .hero__slider { z-index: 2; } .hero--services .hero__image-bg { position: absolute; bottom: 0; right: 0; max-width: 100%; z-index: 1; } .hero--services .hero__image-decor { position: absolute; bottom: 47px; right: 52px; z-index: 3; max-width: 199px; } @media only screen and (max-width: 1599px) { .hero--services .hero__image-decor { max-width: 150px; } } @media only screen and (max-width: 1250px) { .hero--services .hero__image-decor { max-width: 120px; } } @media only screen and (max-width: 599px) { .hero--services .hero__image-decor { bottom: 20px; right: 40px; max-width: 90px; } } .hero--services .hero__content { padding-top: 140px; align-items: flex-end; } @media only screen and (max-width: 1599px) { .hero--services .hero__content { padding-top: 100px; } } @media only screen and (max-width: 1100px) { .hero--services .hero__content { padding-top: 100px; } } .hero--services .main__title { max-width: 640px; line-height: 1.1; } .hero--services .main__title sup { vertical-align: top; font-size: 40px; font-weight: 400; } @media only screen and (max-width: 1599px) { .hero--services .main__title sup { font-size: 30px; } } @media only screen and (max-width: 599px) { .hero--services .main__title sup { vertical-align: middle; } } @media only screen and (max-width: 599px) { .hero--services .main__title span:last-child { padding-left: 30px; } } @media only screen and (max-width: 1599px) { .hero--services .main__title { font-size: 132px; } } @media only screen and (max-width: 1100px) { .hero--services .main__title { margin: 0 auto; font-size: 152px; } } @media only screen and (max-width: 767px) { .hero--services .main__title { font-size: 72px; } } .hero--services .hero__description { padding: 50px 80px 200px 0; } @media only screen and (max-width: 1599px) { .hero--services .hero__description { padding: 0 0 170px 0; } } @media only screen and (max-width: 1100px) { .hero--services .hero__description { text-align: center; padding: 0; } } .hero--services .main__text { max-width: 480px; } @media only screen and (max-width: 1100px) { .hero--services .main__text { margin: 0 auto; } } .hero--services .hero__actions .btn-white { max-width: 210px; } @media only screen and (max-width: 1100px) { .hero--services .hero__actions .btn-white { margin: 0 auto; } } .hero--markets { background-color: #00253A; background-image: none; } .hero--markets .hero__image { width: 51%; margin-right: 0; } @media only screen and (max-width: 1599px) { .hero--markets .hero__image { width: 45%; } } @media only screen and (max-width: 1250px) { .hero--markets .hero__image { width: 43%; } } @media only screen and (max-width: 1100px) { .hero--markets .hero__image { width: 100%; margin: 40px auto 0 auto; max-width: 500px; } } .hero--markets .hero__image::after { display: none; } .hero--markets .hero__image .hero__slider { z-index: 2; } .hero--markets .hero__content { padding: 180px 0 48px 0; align-items: flex-end; } @media only screen and (max-width: 1599px) { .hero--markets .hero__content { padding: 140px 0 40px 0; } } @media only screen and (max-width: 1100px) { .hero--markets .hero__content { padding-top: 150px; } } .hero--markets .main__title { max-width: 640px; line-height: 1.1; } @media only screen and (max-width: 1100px) { .hero--markets .main__title { margin: 0 auto; } } .hero--markets .hero__description { padding: 50px 80px 200px 0; } @media only screen and (max-width: 1599px) { .hero--markets .hero__description { padding: 0 0 120px 0; } } @media only screen and (max-width: 1100px) { .hero--markets .hero__description { text-align: center; padding: 0; } } .hero--markets .main__text { max-width: 480px; } @media only screen and (max-width: 1100px) { .hero--markets .main__text { margin: 0 auto; } } .hero--blog { background-color: #58A57D; background-image: url("../images/bg-blog.svg"); background-repeat: no-repeat; background-position: center right 17vw; background-size: contain; } @media only screen and (max-width: 1900px) { .hero--blog { background-position: center right 13vw; } } @media only screen and (max-width: 1700px) { .hero--blog { background-position: center right 10vw; } } @media only screen and (max-width: 1439px) { .hero--blog { background-position: center right 7vw; } } @media only screen and (max-width: 1250px) { .hero--blog { background-position: center right 5vw; } } @media only screen and (max-width: 1100px) { .hero--blog { background-image: none; } } .hero--blog .hero__tag1 { bottom: 70px; right: 20px; animation-name: bounce-down-down; } .hero--blog .hero__tag2 { bottom: 200px; right: 20px; animation-name: bounce-down-up; } .hero--blog .hero__image { width: 40%; margin-right: 100px; } @media only screen and (max-width: 1599px) { .hero--blog .hero__image { width: 45%; } } @media only screen and (max-width: 1250px) { .hero--blog .hero__image { width: 43%; } } @media only screen and (max-width: 1100px) { .hero--blog .hero__image { width: 100%; margin: 50px auto 0 auto; max-width: 500px; } } .hero--blog .hero__image::after { display: none; } .hero--blog .hero__image .hero__slider { z-index: 2; max-width: 380px; } .hero--blog .hero__image-bg { position: absolute; bottom: 0; right: 0; max-width: 100%; z-index: 1; } @media only screen and (max-width: 767px) { .hero--blog .hero__image-bg { width: 400px; right: 50%; transform: translateX(50%); max-width: inherit; } } .hero--blog .hero__content { padding-top: 170px; align-items: flex-end; } @media only screen and (max-width: 1100px) { .hero--blog .hero__content { padding-top: 150px; } } .hero--blog .main__title { max-width: 400px; line-height: 1.1; } @media only screen and (max-width: 1599px) { .hero--blog .main__title { font-size: 142px; } } @media only screen and (max-width: 1100px) { .hero--blog .main__title { margin: 0 auto; font-size: 142px; } } @media only screen and (max-width: 767px) { .hero--blog .main__title { font-size: 88px; } } .hero--blog .hero__description { padding: 0 80px 240px 0; } @media only screen and (max-width: 1599px) { .hero--blog .hero__description { padding: 0 80px 170px 0; } } @media only screen and (max-width: 1100px) { .hero--blog .hero__description { text-align: center; padding: 0; } } .hero--blog .main__text { max-width: 480px; } @media only screen and (max-width: 1100px) { .hero--blog .main__text { margin: 0 auto; } } .hero--blog .hero__actions .btn-white { max-width: 210px; } @media only screen and (max-width: 1100px) { .hero--blog .hero__actions .btn-white { margin: 0 auto; } } .hero--article { background-color: #58A57D; background-image: none; } .hero--article .hero__content { padding: 170px 0 190px 0; display: block; } @media only screen and (max-width: 1599px) { .hero--article .hero__content { padding: 120px 0 150px 0; } } @media only screen and (max-width: 500px) { .hero--article .hero__content { padding-bottom: 140px; } } @media only screen and (max-width: 400px) { .hero--article .hero__content { padding-bottom: 120px; } } .hero--article .main__title { margin-top: 20px; line-height: 1.1; max-width: 1170px; } .hero--article .hero__description { padding: 0; text-align: left; } .hero--about { background-color: #B6F8FF; background-image: url("../images/bg-about.svg"); background-repeat: no-repeat; background-position: center right 24vw; background-size: contain; } @media only screen and (max-width: 2500px) { .hero--about { background-position: center right 19vw; } } @media only screen and (max-width: 2000px) { .hero--about { background-position: center right 23vw; } } @media only screen and (max-width: 1900px) { .hero--about { background-position: center right 20vw; } } @media only screen and (max-width: 1439px) { .hero--about { background-position: center right 17vw; } } @media only screen and (max-width: 1250px) { .hero--about { background-position: center right 15vw; } } @media only screen and (max-width: 1100px) { .hero--about { background-position: bottom right -350px; } } @media only screen and (max-width: 500px) { .hero--about { background-position: bottom right -250px; } } .hero--about .hero__tag1 { bottom: 300px; left: 100px; animation-name: bounce-down-down; } @media only screen and (max-width: 440px) { .hero--about .hero__tag1 { bottom: 200px; left: 20px; } } .hero--about .hero__tag2 { bottom: 77px; right: 193px; animation-name: bounce-down-down; white-space: nowrap; } .hero--about .hero__tag3 { bottom: 240px; right: 17px; animation-name: bounce-down-up; } @media only screen and (max-width: 440px) { .hero--about .hero__tag3 { bottom: 120px; } } .hero--about .hero__image { width: 40%; margin-right: 100px; } @media only screen and (max-width: 1599px) { .hero--about .hero__image { width: 38%; margin-right: 60px; } } @media only screen and (max-width: 1250px) { .hero--about .hero__image { width: 43%; } } @media only screen and (max-width: 1100px) { .hero--about .hero__image { width: 100%; margin: 50px auto 0 auto; max-width: 500px; } } .hero--about .hero__image::after { display: none; } .hero--about .hero__content { padding-top: 90px; align-items: center; } .hero--about .main__title { max-width: 620px; line-height: 1; } @media only screen and (max-width: 1599px) { .hero--about .main__title { font-size: 110px; } } @media only screen and (max-width: 1100px) { .hero--about .main__title { margin: 0 auto; } } @media only screen and (max-width: 1023px) { .hero--about .main__title { font-size: 88px; } } @media only screen and (max-width: 767px) { .hero--about .main__title { font-size: 72px; } } .hero--about .hero__description { padding: 0 20px 0 0; } @media only screen and (max-width: 1100px) { .hero--about .hero__description { text-align: center; padding: 0; } } .hero--about .main__text { max-width: 480px; } @media only screen and (max-width: 1100px) { .hero--about .main__text { margin: 0 auto; } } .hero--about .hero__actions .btn-white { max-width: 210px; } @media only screen and (max-width: 1100px) { .hero--about .hero__actions .btn-white { margin: 0 auto; } } .hero--info { background-color: #20248D; background-image: none; } .hero--info .hero__content { padding: 200px 0; align-items: flex-end; } @media only screen and (max-width: 1599px) { .hero--info .hero__content { padding: 160px 0; } } @media only screen and (max-width: 767px) { .hero--info .hero__content { padding: 140px 0; } } .hero--info .main__title { max-width: 1000px; margin: 0 auto; line-height: .8; } @media only screen and (max-width: 1599px) { .hero--info .main__title { font-size: 104px; } } @media only screen and (max-width: 767px) { .hero--info .main__title { font-size: 88px; } } @media only screen and (max-width: 599px) { .hero--info .main__title { font-size: 48px; } } .hero--info .hero__description { padding: 0; text-align: center; } .hero--coming-soon { height: 100vh; } @media only screen and (max-width: 1200px) { .hero--coming-soon { height: 100%; } } .hero--coming-soon .container { height: 100%; } .hero--coming-soon .main__title { max-width: 1250px; } @media only screen and (max-width: 1200px) { .hero--coming-soon .main__title { text-align: center; } } .hero--coming-soon .hero__content { display: flex; flex-direction: column; justify-content: flex-end; height: 100%; padding-top: 100px; } @media only screen and (max-width: 1200px) { .hero--coming-soon .hero__content { display: block; } } @media only screen and (max-width: 599px) { .hero--coming-soon .hero__content { padding-top: 60px; } } .hero--coming-soon .hero__content-hold { display: flex; align-items: flex-end; } @media only screen and (max-width: 1200px) { .hero--coming-soon .hero__content-hold { display: block; } } .hero--coming-soon .hero__image { bottom: -1px; width: 50%; margin-right: 0; } @media only screen and (max-width: 1599px) { .hero--coming-soon .hero__image { width: 45%; } } @media only screen and (max-width: 1200px) { .hero--coming-soon .hero__image { max-width: 500px; margin: 20px auto 0 auto; } } .hero--coming-soon .hero__image::after { display: none; } .hero--coming-soon .hero__image-img { z-index: 2; position: relative; } .hero--coming-soon .hero__image-decor { position: absolute; bottom: 0; right: -100px; max-height: calc(100% + 80px); z-index: 1; } .hero__history { position: absolute; bottom: 27px; right: 0; z-index: 3; background-color: #fff; border: 1px solid #163939; box-shadow: 8px 8px 0 #163939; border-radius: 16px; padding: 22px 24px; width: 286px; } @media only screen and (max-width: 1599px) { .hero__history { width: 210px; padding: 18px; border-radius: 12px; } } @media only screen and (max-width: 500px) { .hero__history { width: 120px; padding: 10px; border-radius: 6px; box-shadow: 3.2px 3.2px 0 #163939; right: 3px; bottom: 10px; } } @media only screen and (max-width: 1599px) { .hero__history > .main__text { font-size: 10px; } } @media only screen and (max-width: 500px) { .hero__history > .main__text { font-size: 6px; } } .hero__history-items { margin-top: 12px; } @media only screen and (max-width: 500px) { .hero__history-items { margin-top: 6px; } } @media only screen and (max-width: 1599px) { .hero__history-items .main__text { font-size: 12px; } } @media only screen and (max-width: 1100px) { .hero__history-items .main__text { margin: 0; } } @media only screen and (max-width: 500px) { .hero__history-items .main__text { font-size: 8px; } } .hero__history-item { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 26px; } @media only screen and (max-width: 1599px) { .hero__history-item { margin-bottom: 10px; } } @media only screen and (max-width: 500px) { .hero__history-item { margin-bottom: 5px; } } .hero__history-item:last-child { margin-bottom: 0; } .hero__history-item-rside { text-align: right; } .hero__content { padding: 200px 0 0 0; display: flex; align-items: flex-end; } @media only screen and (max-width: 1599px) { .hero__content { padding-top: 175px; } } @media only screen and (max-width: 1100px) { .hero__content { display: block; padding-top: 180px; } } .hero__description { flex: 1 1 auto; padding: 0 80px 95px 0; } @media only screen and (max-width: 1599px) { .hero__description { padding: 0 45px 70px 0; } } @media only screen and (max-width: 1200px) { .hero__description { padding-right: 0; } } @media only screen and (max-width: 1100px) { .hero__description { text-align: center; } } .hero__description .main__text { margin-top: 14px; } @media only screen and (max-width: 1000px) { .hero__description .main__text { font-size: 22px; } } @media only screen and (max-width: 767px) { .hero__description .main__text { font-size: 20px; } } @media only screen and (max-width: 599px) { .hero__description .main__text { font-size: 18px; } } .hero__image { flex: 0 0 auto; width: calc(42.7% - 75px); font-size: 0; margin-right: 75px; position: relative; } @media only screen and (max-width: 1599px) { .hero__image { width: calc(43.7% - 75px); } } @media only screen and (max-width: 1200px) { .hero__image { width: calc(42.7% - 55px); margin-right: 55px; } } @media only screen and (max-width: 1100px) { .hero__image { margin: 40px auto 0 auto; width: 100%; max-width: 390px; } } @media only screen and (max-width: 599px) { .hero__image { max-width: 280px; margin-top: 30px; } } @media only screen and (max-width: 360px) { .hero__image { max-width: 250px; margin-top: 20px; } } .hero__image::after { position: absolute; top: -69px; right: -12px; content: ''; width: 237px; height: 485px; background-image: url("../images/hero-arrow-img.svg"); background-repeat: no-repeat; background-size: contain; } @media only screen and (max-width: 1599px) { .hero__image::after { width: 194px; height: 399px; top: -59px; right: -2px; } } @media only screen and (max-width: 360px) { .hero__image::after { width: 95px; height: 194px; top: 10px; } } .hero__image-img { width: 100%; } .hero__total { position: absolute; background-color: #F7FAFF; border: 1px solid #163939; box-shadow: 8px 8px 0 #163939; border-radius: 16px; padding: 8px 16px; min-width: 147px; bottom: 138px; left: 22px; z-index: 3; } @media only screen and (max-width: 1599px) { .hero__total { bottom: 112px; left: 18px; padding: 6px 13px; min-width: 133px; } } @media only screen and (max-width: 599px) { .hero__total { border-radius: 8px; min-width: 100px; left: 0; padding: 6px 10px; } } @media only screen and (max-width: 360px) { .hero__total { border-radius: 6px; min-width: 68px; padding: 3px 6px; left: 8px; bottom: 54px; box-shadow: 3.2px 3.2px 0 #163939; } } @media only screen and (max-width: 1599px) { .hero__total .main__subtitle { font-size: 19px; } } @media only screen and (max-width: 599px) { .hero__total .main__subtitle { font-size: 15px; } } @media only screen and (max-width: 360px) { .hero__total .main__subtitle { font-size: 10px; } } .hero__total .main__text { margin-bottom: 3px; } @media only screen and (max-width: 1599px) { .hero__total .main__text { font-size: 11.5px; } } @media only screen and (max-width: 599px) { .hero__total .main__text { font-size: 9px; } } @media only screen and (max-width: 360px) { .hero__total .main__text { font-size: 6px; } } .hero__total * { white-space: nowrap; } .hero__slider .swiper-slide { opacity: 0 !important; } .hero__slider .swiper-slide > img { width: 100%; position: relative; z-index: 2; } .hero__slider .swiper-slide.swiper-slide-visible.swiper-slide-active { opacity: 1 !important; } .hero__profit { position: absolute; z-index: 4; background-color: #163939; box-shadow: 0 20px 52px rgba(0, 0, 0, 0.16); border-radius: 16px; padding: 16px 80px 16px 16px; width: 350px; right: -72px; bottom: 127px; } @media only screen and (max-width: 1599px) { .hero__profit { bottom: 104px; right: -60px; width: 280px; padding: 13px 70px 13px 13px; } } @media only screen and (max-width: 599px) { .hero__profit { width: 200px; padding: 11px 60px 11px 11px; border-radius: 10px; bottom: 80px; right: -30px; } } @media only screen and (max-width: 360px) { .hero__profit { width: 140px; padding: 6px 30px 6px 6px; border-radius: 6px; right: -28px; bottom: 50px; } } .hero__profit-icon { position: absolute; top: 50%; transform: translateY(-50%); right: 16px; width: 48px; } @media only screen and (max-width: 1599px) { .hero__profit-icon { width: 39px; } } @media only screen and (max-width: 599px) { .hero__profit-icon { width: 30px; } } @media only screen and (max-width: 360px) { .hero__profit-icon { width: 20px; right: 6px; } } @media only screen and (max-width: 599px) { .hero__profit .main__subtitle { font-size: 13px; } } @media only screen and (max-width: 360px) { .hero__profit .main__subtitle { font-size: 8px; } } .hero__profit .main__text { display: flex; align-items: center; margin-top: 6px; } @media only screen and (max-width: 599px) { .hero__profit .main__text { font-size: 12px; } } @media only screen and (max-width: 360px) { .hero__profit .main__text { font-size: 8px; } } @media only screen and (max-width: 1599px) { .hero__profit .main__text img { width: 19px; } } @media only screen and (max-width: 599px) { .hero__profit .main__text img { width: 15px; } } @media only screen and (max-width: 360px) { .hero__profit .main__text img { width: 10px; } } .hero__power { position: absolute; right: 61px; bottom: 78px; display: flex; align-items: center; background: #F7FAFF; border: 1px solid #215051; box-shadow: 8px 8px 0 #163939; border-radius: 16px; padding: 15px 21px; z-index: 3; } @media only screen and (max-width: 1599px) { .hero__power { bottom: 64px; right: 50px; padding: 13px 17px; } } @media only screen and (max-width: 599px) { .hero__power { bottom: 45px; right: 40px; border-radius: 10px; padding: 11px 14px; } } @media only screen and (max-width: 360px) { .hero__power { bottom: 26px; right: 24px; padding: 7px 8px; border-radius: 6px; box-shadow: 3.2px 3.2px 0 #163939; } } .hero__power .main__subtitle { display: inline-flex; align-items: center; } @media only screen and (max-width: 1599px) { .hero__power .main__subtitle { font-size: 13px; } } @media only screen and (max-width: 599px) { .hero__power .main__subtitle { font-size: 11px; } } @media only screen and (max-width: 360px) { .hero__power .main__subtitle { font-size: 8px; } } .hero__power .main__subtitle:first-child { margin-right: 18px; } .hero__power .main__subtitle img { flex: 0 0 auto; margin-right: 6px; } @media only screen and (max-width: 1599px) { .hero__power .main__subtitle img { width: 19px; } } @media only screen and (max-width: 599px) { .hero__power .main__subtitle img { width: 15px; } } @media only screen and (max-width: 360px) { .hero__power .main__subtitle img { width: 10px; } } .hero__actions { display: flex; align-items: center; margin: 30px -12px -12px -12px; } @media only screen and (max-width: 1599px) { .hero__actions { max-width: 590px; } } @media only screen and (max-width: 1100px) { .hero__actions { margin: 30px auto 0 auto; } } .hero__actions .btn-white { max-width: 310px; margin: 12px; } .hero__actions .btn-dark-outline { max-width: 250px; margin: 12px; } @media only screen and (max-width: 1599px) { .hero__actions .btn-dark-outline { display: flex; max-width: 100%; margin: 0; } } .hero__scroll { display: inline-flex; margin-top: 62px; align-items: center; font-style: normal; font-weight: 400; font-size: 16px; line-height: 1; color: #163939; } @media only screen and (max-width: 1100px) { .hero__scroll { display: none; } } .hero__scroll img { flex: 0 0 auto; margin-left: 22px; } .hero__progress { padding: 12px 16px; position: absolute; width: 316px; background: #F7FAFF; border: 1px solid #163939; box-shadow: 8px 8px 0 #163939; border-radius: 16px; bottom: 186px; left: 54px; } @media only screen and (max-width: 1599px) { .hero__progress { width: 250px; bottom: 150px; left: 44px; } } @media only screen and (max-width: 1100px) { .hero__progress { bottom: 120px; } } @media only screen and (max-width: 599px) { .hero__progress { bottom: 100px; left: 0; width: 200px; } } @media only screen and (max-width: 460px) { .hero__progress { bottom: 75px; border-radius: 6px; box-shadow: 3.2px 3.2px 0 #163939; width: 150px; left: 0; padding: 8px; } } @media only screen and (max-width: 1599px) { .hero__progress .main__text { font-size: 11px; } } @media only screen and (max-width: 460px) { .hero__progress .main__text { font-size: 8px; } } .hero__progress-inner { display: flex; align-items: center; } @media only screen and (max-width: 460px) { .hero__progress-inner { margin-top: 2px; } } .hero__progress-inner .main__subtitle { flex: 0 0 auto; min-width: 60px; } @media only screen and (max-width: 1599px) { .hero__progress-inner .main__subtitle { font-size: 19px; min-width: 48px; } } @media only screen and (max-width: 460px) { .hero__progress-inner .main__subtitle { font-size: 13px; min-width: 32px; } } .hero__progress-bar { flex: 1 1 auto; position: relative; background-color: #D5D5D5; border-radius: 8px; width: 100%; margin-left: 4px; height: 24px; overflow: hidden; } @media only screen and (max-width: 1599px) { .hero__progress-bar { height: 18px; border-radius: 6px; } } @media only screen and (max-width: 460px) { .hero__progress-bar { height: 12px; border-radius: 4px; } } .hero__progress-bar span { position: absolute; top: 0; left: 0; height: 100%; border-radius: 8px; transform: translateX(-100%); animation: 2.55s linear .5s forwards running AnimateProgressBar; background-color: #00BF86; } @media only screen and (max-width: 1599px) { .hero__progress-bar span { border-radius: 6px; } } @media only screen and (max-width: 460px) { .hero__progress-bar span { border-radius: 4px; } } @keyframes AnimateProgressBar { 0% { transform: translateX(-100%); } 100% { transform: translateY(0); } } .hero__level { position: absolute; bottom: 348px; right: 77px; padding: 12px 16px; width: 244px; background-color: #F7FAFF; border: 1px solid #163939; border-radius: 16px; box-shadow: 8px 8px 0 #163939; display: flex; align-items: center; } @media only screen and (max-width: 1599px) { .hero__level { right: 0; bottom: 272px; width: 200px; } } @media only screen and (max-width: 1260px) { .hero__level { right: 40px; } } @media only screen and (max-width: 1100px) { .hero__level { bottom: 230px; } } @media only screen and (max-width: 599px) { .hero__level { bottom: 180px; right: 0; } } @media only screen and (max-width: 460px) { .hero__level { bottom: 140px; width: 130px; padding: 8px; border-radius: 6px; box-shadow: 3.2px 3.2px 0 #163939; } } .hero__level-number { flex: 0 0 auto; background-color: #B6F8FF; width: 52px; height: 52px; border-radius: 50%; text-align: center; font-style: normal; font-weight: 600; font-size: 22px; line-height: 52px; color: #2B2B2B; } @media only screen and (max-width: 1599px) { .hero__level-number { width: 40px; height: 40px; font-size: 17px; line-height: 40px; } } @media only screen and (max-width: 460px) { .hero__level-number { width: 24px; height: 24px; font-size: 9px; line-height: 24px; } } .hero__level-rside { flex: 1 1 auto; padding-left: 16px; } @media only screen and (max-width: 1599px) { .hero__level-rside { padding-left: 12px; } } @media only screen and (max-width: 1599px) { .hero__level-rside .main__text { font-size: 11px; } } @media only screen and (max-width: 460px) { .hero__level-rside .main__text { font-size: 8px; } } .hero__level-rside .main__subtitle { margin-top: 2px; } @media only screen and (max-width: 1599px) { .hero__level-rside .main__subtitle { font-size: 14px; } } @media only screen and (max-width: 460px) { .hero__level-rside .main__subtitle { font-size: 9px; } } .hero__coin { position: absolute; animation: 2.6s linear infinite; max-width: 100px; } @media only screen and (max-width: 1100px) { .hero__coin { max-width: 16%; } } @media only screen and (max-width: 440px) { .hero__coin { max-width: 13%; } } .hero__coin.hero__coin1 { bottom: 20px; left: 12px; z-index: 3; animation-name: bounce-down-up; } @media only screen and (max-width: 1599px) { .hero__coin.hero__coin1 { margin: 10px 0 0 10px; } } @media only screen and (max-width: 1100px) { .hero__coin.hero__coin1 { bottom: 10px; } } .hero__coin.hero__coin2 { bottom: 42px; left: -43px; z-index: 2; animation-name: bounce-down-down; } @media only screen and (max-width: 1599px) { .hero__coin.hero__coin2 { margin: 10px 0 0 10px; } } @media only screen and (max-width: 1100px) { .hero__coin.hero__coin2 { bottom: 22px; } } @media only screen and (max-width: 599px) { .hero__coin.hero__coin2 { bottom: 10px; } } .hero__coin.hero__coin3 { bottom: 104px; left: -40px; z-index: 2; animation-name: bounce-down-up; } @media only screen and (max-width: 1599px) { .hero__coin.hero__coin3 { margin: 10px 0 0 10px; } } @media only screen and (max-width: 1100px) { .hero__coin.hero__coin3 { bottom: 84px; } } @media only screen and (max-width: 599px) { .hero__coin.hero__coin3 { bottom: 40px; } } @media only screen and (max-width: 440px) { .hero__coin.hero__coin3 { left: -20px; } } .hero__coin.hero__coin4 { bottom: 153px; left: -77px; z-index: 2; animation-name: bounce-down-down; } @media only screen and (max-width: 1599px) { .hero__coin.hero__coin4 { margin: 10px 0 0 10px; } } @media only screen and (max-width: 1100px) { .hero__coin.hero__coin4 { bottom: 133px; } } @media only screen and (max-width: 599px) { .hero__coin.hero__coin4 { bottom: 75px; } } @media only screen and (max-width: 440px) { .hero__coin.hero__coin4 { left: -37px; } } .hero__coin.hero__coin5 { bottom: 200px; left: -66px; z-index: 2; animation-name: bounce-down-up; } @media only screen and (max-width: 1599px) { .hero__coin.hero__coin5 { margin: 10px 0 0 10px; } } @media only screen and (max-width: 1100px) { .hero__coin.hero__coin5 { bottom: 180px; } } @media only screen and (max-width: 599px) { .hero__coin.hero__coin5 { bottom: 110px; } } @media only screen and (max-width: 440px) { .hero__coin.hero__coin5 { left: -36px; } } .hero__coin.hero__coin6 { bottom: 200px; left: 18px; z-index: 2; animation-name: bounce-down-down; } @media only screen and (max-width: 1599px) { .hero__coin.hero__coin6 { margin: 10px 0 0 10px; } } @media only screen and (max-width: 1100px) { .hero__coin.hero__coin6 { bottom: 180px; } } @media only screen and (max-width: 599px) { .hero__coin.hero__coin6 { bottom: 90px; } } .hero__coin.hero__coin7 { bottom: 249px; left: 28px; z-index: 1; animation-name: bounce-down-up; } @media only screen and (max-width: 1599px) { .hero__coin.hero__coin7 { margin: 10px 0 0 10px; } } @media only screen and (max-width: 1100px) { .hero__coin.hero__coin7 { bottom: 229px; } } @media only screen and (max-width: 599px) { .hero__coin.hero__coin7 { bottom: 110px; } } .hero__coin.hero__coin8 { bottom: 286px; left: -20px; z-index: 2; animation-name: bounce-down-down; } @media only screen and (max-width: 1599px) { .hero__coin.hero__coin8 { margin: 10px 0 0 10px; } } @media only screen and (max-width: 1100px) { .hero__coin.hero__coin8 { bottom: 266px; } } @media only screen and (max-width: 599px) { .hero__coin.hero__coin8 { bottom: 130px; } } @media only screen and (max-width: 440px) { .hero__coin.hero__coin8 { left: -10px; } } .hero__coin.hero__coin9 { bottom: 329px; left: -70px; z-index: 2; animation-name: bounce-down-up; } @media only screen and (max-width: 1599px) { .hero__coin.hero__coin9 { margin: 10px 0 0 10px; } } @media only screen and (max-width: 1100px) { .hero__coin.hero__coin9 { bottom: 309px; } } @media only screen and (max-width: 599px) { .hero__coin.hero__coin9 { bottom: 150px; } } @media only screen and (max-width: 440px) { .hero__coin.hero__coin9 { left: -35px; } } .hero__coin.hero__coin10 { bottom: 346px; left: 12px; z-index: 1; animation-name: bounce-down-up; } @media only screen and (max-width: 1599px) { .hero__coin.hero__coin10 { margin: 10px 0 0 10px; } } @media only screen and (max-width: 1100px) { .hero__coin.hero__coin10 { bottom: 326px; } } @media only screen and (max-width: 599px) { .hero__coin.hero__coin10 { bottom: 160px; } } .hero__coin.hero__coin11 { bottom: 394px; left: -23px; z-index: 2; animation-name: bounce-down-up; } @media only screen and (max-width: 1599px) { .hero__coin.hero__coin11 { margin: 10px 0 0 10px; } } @media only screen and (max-width: 1100px) { .hero__coin.hero__coin11 { bottom: 374px; } } @media only screen and (max-width: 599px) { .hero__coin.hero__coin11 { bottom: 175px; } } @media only screen and (max-width: 440px) { .hero__coin.hero__coin11 { left: -20px; } } .hero__coin.hero__coin12 { bottom: 433px; left: 20px; z-index: 2; animation-name: bounce-down-down; } @media only screen and (max-width: 1599px) { .hero__coin.hero__coin12 { margin: 10px 0 0 10px; } } @media only screen and (max-width: 1100px) { .hero__coin.hero__coin12 { bottom: 413px; } } @media only screen and (max-width: 599px) { .hero__coin.hero__coin12 { bottom: 200px; } } .hero__coin.hero__coin12-tesla { bottom: 406px; left: 94px; z-index: 1; animation-name: bounce-down-up; } @media only screen and (max-width: 1599px) { .hero__coin.hero__coin12-tesla { margin: 10px 0 0 10px; } } @media only screen and (max-width: 1100px) { .hero__coin.hero__coin12-tesla { bottom: 386px; } } @media only screen and (max-width: 599px) { .hero__coin.hero__coin12-tesla { bottom: 190px; } } @media only screen and (max-width: 440px) { .hero__coin.hero__coin12-tesla { left: 50px; } } .hero__coin.hero__coin13 { bottom: 434px; left: -31px; z-index: 2; animation-name: bounce-down-up; } @media only screen and (max-width: 1599px) { .hero__coin.hero__coin13 { margin: 10px 0 0 10px; } } @media only screen and (max-width: 1100px) { .hero__coin.hero__coin13 { bottom: 414px; } } @media only screen and (max-width: 599px) { .hero__coin.hero__coin13 { bottom: 210px; } } .hero__coin.hero__coin14 { bottom: 477px; left: 9px; z-index: 2; animation-name: bounce-down-up; } @media only screen and (max-width: 1599px) { .hero__coin.hero__coin14 { margin: 10px 0 0 10px; } } @media only screen and (max-width: 1100px) { .hero__coin.hero__coin14 { bottom: 457px; } } @media only screen and (max-width: 599px) { .hero__coin.hero__coin14 { bottom: 245px; left: -20px; } } .hero__coin.hero__coin15 { bottom: 493px; left: 105px; z-index: 1; animation-name: bounce-down-down; } @media only screen and (max-width: 1599px) { .hero__coin.hero__coin15 { margin: 10px 0 0 10px; } } @media only screen and (max-width: 1100px) { .hero__coin.hero__coin15 { bottom: 473px; } } @media only screen and (max-width: 599px) { .hero__coin.hero__coin15 { bottom: 235px; } } @media only screen and (max-width: 440px) { .hero__coin.hero__coin15 { left: -60px; } } .hero__coin.hero__coin16 { bottom: 530px; left: 70px; z-index: 2; animation-name: bounce-down-up; } @media only screen and (max-width: 1599px) { .hero__coin.hero__coin16 { margin: 10px 0 0 10px; } } @media only screen and (max-width: 1100px) { .hero__coin.hero__coin16 { bottom: 510px; } } @media only screen and (max-width: 599px) { .hero__coin.hero__coin16 { bottom: 290px; left: -20px; } } @media only screen and (max-width: 440px) { .hero__coin.hero__coin16 { left: -10px; } } .hero__coin.hero__coin17 { bottom: 15px; right: 35px; z-index: 2; animation-name: bounce-down-down; } @media only screen and (max-width: 1599px) { .hero__coin.hero__coin17 { margin: 10px -10px 0 0; } } @media only screen and (max-width: 1100px) { .hero__coin.hero__coin17 { bottom: 10px; } } @media only screen and (max-width: 440px) { .hero__coin.hero__coin17 { right: 25px; } } .hero__coin.hero__coin18 { bottom: 48px; right: -18px; z-index: 2; animation-name: bounce-down-up; } @media only screen and (max-width: 1599px) { .hero__coin.hero__coin18 { margin: 10px -10px 0 0; } } @media only screen and (max-width: 1100px) { .hero__coin.hero__coin18 { bottom: 28px; } } @media only screen and (max-width: 599px) { .hero__coin.hero__coin18 { bottom: 10px; } } @media only screen and (max-width: 440px) { .hero__coin.hero__coin18 { right: -10px; } } .hero__coin.hero__coin19 { bottom: 215px; right: 20px; z-index: 2; animation-name: bounce-down-down; } @media only screen and (max-width: 1599px) { .hero__coin.hero__coin19 { margin: 10px -10px 0 0; } } @media only screen and (max-width: 1100px) { .hero__coin.hero__coin19 { bottom: 195px; } } @media only screen and (max-width: 599px) { .hero__coin.hero__coin19 { bottom: 100px; } } .hero__coin.hero__coin20 { bottom: 244px; right: -52px; z-index: 2; animation-name: bounce-down-up; } @media only screen and (max-width: 1599px) { .hero__coin.hero__coin20 { margin: 10px -10px 0 0; } } @media only screen and (max-width: 1100px) { .hero__coin.hero__coin20 { bottom: 224px; } } @media only screen and (max-width: 599px) { .hero__coin.hero__coin20 { bottom: 110px; } } @media only screen and (max-width: 440px) { .hero__coin.hero__coin20 { right: -25px; } } .hero__coin.hero__coin21 { bottom: 288px; right: 3px; z-index: 2; animation-name: bounce-down-down; } @media only screen and (max-width: 1599px) { .hero__coin.hero__coin21 { margin: 10px -10px 0 0; } } @media only screen and (max-width: 1100px) { .hero__coin.hero__coin21 { bottom: 268px; } } @media only screen and (max-width: 599px) { .hero__coin.hero__coin21 { bottom: 130px; } } .hero__coin.hero__coin22 { bottom: 362px; right: -40px; z-index: 2; animation-name: bounce-down-up; } @media only screen and (max-width: 1599px) { .hero__coin.hero__coin22 { margin: 10px -10px 0 0; } } @media only screen and (max-width: 1100px) { .hero__coin.hero__coin22 { bottom: 342px; } } @media only screen and (max-width: 599px) { .hero__coin.hero__coin22 { bottom: 170px; } } @media only screen and (max-width: 440px) { .hero__coin.hero__coin22 { right: -20px; } } .hero__coin.hero__coin23 { bottom: 380px; right: 24px; z-index: 2; animation-name: bounce-down-down; } @media only screen and (max-width: 1599px) { .hero__coin.hero__coin23 { margin: 10px -10px 0 0; } } @media only screen and (max-width: 1100px) { .hero__coin.hero__coin23 { bottom: 360px; } } @media only screen and (max-width: 599px) { .hero__coin.hero__coin23 { bottom: 180px; } } .hero__coin.hero__coin24 { bottom: 442px; right: 14px; z-index: 2; animation-name: bounce-down-up; } @media only screen and (max-width: 1599px) { .hero__coin.hero__coin24 { margin: 10px -10px 0 0; } } @media only screen and (max-width: 1100px) { .hero__coin.hero__coin24 { bottom: 422px; } } @media only screen and (max-width: 599px) { .hero__coin.hero__coin24 { bottom: 210px; } } .hero__coin.hero__coin25 { bottom: 522px; right: -39px; z-index: 2; animation-name: bounce-down-down; } @media only screen and (max-width: 1599px) { .hero__coin.hero__coin25 { margin: 10px -10px 0 0; } } @media only screen and (max-width: 1100px) { .hero__coin.hero__coin25 { bottom: 502px; } } @media only screen and (max-width: 599px) { .hero__coin.hero__coin25 { bottom: 250px; } } @media only screen and (max-width: 440px) { .hero__coin.hero__coin25 { right: -20px; } } .hero__coin.hero__coin---funded-phase1 { bottom: 145px; left: 20px; z-index: 3; animation-name: bounce-down-up; } @media only screen and (max-width: 1599px) { .hero__coin.hero__coin---funded-phase1 { width: 55px; } } @media only screen and (max-width: 1100px) { .hero__coin.hero__coin---funded-phase1 { bottom: 100px; } } @media only screen and (max-width: 500px) { .hero__coin.hero__coin---funded-phase1 { bottom: 60px; width: 30px; } } .hero__coin.hero__coin---funded-phase2 { bottom: 318px; right: 34px; z-index: 3; animation-name: bounce-down-down; } @media only screen and (max-width: 1599px) { .hero__coin.hero__coin---funded-phase2 { width: 55px; } } @media only screen and (max-width: 1100px) { .hero__coin.hero__coin---funded-phase2 { bottom: 220px; } } @media only screen and (max-width: 599px) { .hero__coin.hero__coin---funded-phase2 { bottom: 210px; } } @media only screen and (max-width: 500px) { .hero__coin.hero__coin---funded-phase2 { bottom: 140px; width: 30px; } } .hero__tag { position: absolute; z-index: 3; font-style: normal; font-weight: 600; font-size: 16px; line-height: 1.2; color: #2B2B2B; background-color: #fff; border: 1px solid #163939; box-shadow: 8px 8px 0 #163939; border-radius: 16px; padding: 9px 15px; animation: 2.6s linear infinite; } @media only screen and (max-width: 440px) { .hero__tag { font-size: 10px; box-shadow: 3.5px 3.5px 0 #163939; border-radius: 8px; padding: 6px 12px; } } .hero__timer { max-width: 452px; width: 100%; margin: 40px auto 0 auto; } .hero__timer .countdown ul { display: flex; align-items: stretch; justify-content: center; background-color: #163939; border-radius: 10px; padding: 20px; margin-top: 20px; } .hero__timer .countdown ul li { flex: 0 0 25%; } .hero__timer .countdown ul li:last-child span::after { display: none; } .hero__timer .countdown ul li span { display: block; width: 100%; height: 90px; text-align: center; color: #fff; font-family: 'Poppins', sans-serif; font-style: normal; font-weight: 400; font-size: 70px; line-height: 90px; position: relative; } @media only screen and (max-width: 599px) { .hero__timer .countdown ul li span { height: 50px; font-size: 40px; line-height: 50px; } } .hero__timer .countdown ul li span::after { position: absolute; top: 50%; transform: translateY(-50%); right: -5px; content: ':'; color: #fff; font-family: 'Poppins', sans-serif; font-style: normal; font-weight: 400; font-size: 50px; line-height: 1; } @media only screen and (max-width: 599px) { .hero__timer .countdown ul li span::after { font-size: 25px; right: -3px; } } .hero__timer .countdown ul li p { text-align: center; display: block; margin-top: 10px; color: #fff; font-family: 'Poppins', sans-serif; font-style: normal; font-weight: 400; font-size: 15px; line-height: 1; text-transform: uppercase; } @media only screen and (max-width: 599px) { .hero__timer .countdown ul li p { font-size: 10px; } } .hero__form { max-width: 455px; width: 100%; margin: 20px auto 0 auto; text-align: center; } .hero__form input[type=email] { display: block; margin-top: 10px; width: 100%; height: 50px; background-color: #fff; border: 1px solid #EDEDED; border-radius: 8px; font-family: 'Poppins', sans-serif; font-style: normal; font-weight: 400; font-size: 16px; line-height: 1; color: #163939; padding: 0 16px; } .hero__form input[type=email]::placeholder { color: #757575; } .hero__form input[type=submit] { display: block; width: 100%; margin-top: 10px; background-color: #FA2685; border-radius: 8px; height: 50px; font-family: 'Poppins', sans-serif; font-style: normal; font-weight: 400; font-size: 24px; line-height: 50px; text-align: center; color: #fff; transition-property: opacity; transition-duration: .3s; } .hero__form input[type=submit]:hover { opacity: .8; } @keyframes bounce-down-up { 25% { transform: translateY(-2.5px); } 50%, 100% { transform: translateY(0); } 75% { transform: translateY(2.5px); } } @keyframes bounce-down-down { 25% { transform: translateY(2.5px); } 50%, 100% { transform: translateY(0); } 75% { transform: translateY(-2.5px); } } .join { background-color: #644EBC; overflow: hidden; } .join__content { padding: 80px 0 0 0; position: relative; } @media only screen and (max-width: 1599px) { .join__content { padding-top: 60px; } } .join__content::before { position: absolute; content: ''; width: 1364px; height: 1364px; background-color: #593FC3; border-radius: 50%; pointer-events: none; right: calc(100% - 380px); top: 64px; } @media only screen and (max-width: 1210px) { .join__content::before { top: 50%; transform: translateY(-50%); right: calc(100% - 250px); } } .join__content::after { position: absolute; content: ''; width: 2043px; height: 2044px; background-color: #593FC3; border-radius: 50%; pointer-events: none; left: calc(100% - 150px); top: 50%; transform: translateY(calc(-50% + 200px)); } @media only screen and (max-width: 1210px) { .join__content::after { display: none; } } .join .main__title { max-width: 570px; width: 100%; margin: 0 auto; position: relative; left: 40px; } @media only screen and (max-width: 1210px) { .join .main__title { text-align: center; left: 0; } } .join__holder { display: flex; align-items: center; position: relative; z-index: 2; margin-top: -222px; } @media only screen and (max-width: 1599px) { .join__holder { margin-top: -210px; align-items: flex-end; } } @media only screen and (max-width: 1210px) { .join__holder { flex-direction: column; margin-top: 20px; } } .join__holder-img { flex: 0 0 47%; font-size: 0; position: relative; z-index: 1; } @media only screen and (max-width: 1599px) { .join__holder-img { flex: 0 0 48%; } } @media only screen and (max-width: 1210px) { .join__holder-img { order: 2; max-width: 520px; margin: 30px auto 0 auto; } } .join__holder-img-inner { width: 100%; position: relative; z-index: 2; } .join__holder-img-decor { max-width: 100%; position: absolute; z-index: 1; top: 0; left: 0; } @media only screen and (max-width: 1599px) { .join__holder-img-decor { max-width: 80%; } } .join__holder-rside { flex: 1 1 auto; margin-left: -8px; padding-top: 230px; } @media only screen and (max-width: 1599px) { .join__holder-rside { padding-bottom: 80px; } } @media only screen and (max-width: 1210px) { .join__holder-rside { padding: 20px 0 0 0; margin: 0; text-align: center; } } @media only screen and (max-width: 1023px) { .join__holder-rside { padding: 20px 0 0 0; max-width: 570px; margin: 0 auto; } } @media only screen and (max-width: 767px) { .join__holder-rside { max-width: 480px; text-align: left; } } .join__holder-rside .main__link { margin-top: 40px; } @media only screen and (max-width: 599px) { .join__holder-rside .main__link { display: none; } } .join__holder-rside .video-wrapper .feedback__inner-photo { background-image: url("../images/wrapper-video.png"); background-repeat: no-repeat; background-position: center; background-size: 100%; text-align: center; position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; } .join__holder-rside .video-wrapper .feedback__inner-photo iframe { position: absolute; top: 48%; left: 50%; transform: translate(-50%, -50%); width: 76%; height: 76%; } .join__holder-items { display: flex; align-items: center; flex-wrap: wrap; margin: -6px -8px; } @media only screen and (max-width: 1210px) { .join__holder-items { justify-content: center; } } @media only screen and (max-width: 767px) { .join__holder-items { justify-content: flex-start; } } .join__holder-items li { display: inline-block; margin: 6px 8px; flex: 0 0 auto; } .join__holder-items li a { display: block; border: 2px solid #F8D5E9; border-radius: 48px; padding: 9px 12px; font-style: normal; font-weight: 400; font-size: 23px; line-height: 1; color: #F8D5E9; transition-property: border-color, color; transition-duration: .3s; } @media only screen and (max-width: 1599px) { .join__holder-items li a { padding: 7px 12px; font-size: 20px; } } @media only screen and (max-width: 767px) { .join__holder-items li a { font-size: 18px; } } .join__holder-items li a:hover { border-color: #A490F4; color: #A490F4; } .packages { background-image: url("../images/graph-line-1.svg"); background-repeat: no-repeat; background-size: cover; background-position: center; } .packages--without-bg { background-image: none; } .packages--without-bg .packages__content { padding-bottom: 0; } @media only screen and (max-width: 1023px) { .packages { background-position: center top 300px; background-size: contain; } } .packages__content { padding: 100px 0 126px 0; } @media only screen and (max-width: 1599px) { .packages__content { padding: 80px 0; } } .packages__content .main__title.xs2 { margin-top: 10px; } .packages__inners { display: flex; align-items: stretch; margin: 35px -16px -16px -16px; } @media only screen and (max-width: 1599px) { .packages__inners { margin: 30px -12px -12px -12px; } } @media only screen and (max-width: 1023px) { .packages__inners { display: block; margin: 50px 0 0 0; } } .packages__inner { flex: 0 0 calc(33.3333333% - 32px); margin: 16px; background-color: #fff; box-shadow: 8px 8px 0 #163939; border-radius: 24px; overflow: hidden; } @media only screen and (max-width: 1599px) { .packages__inner { flex: 0 0 calc(33.3333333% - 24px); margin: 12px; } } @media only screen and (max-width: 1023px) { .packages__inner { max-width: 700px; margin: 0 auto 26px auto; } .packages__inner:last-child { margin-bottom: 0; } } .packages__inner.package-1 { border: 2px solid #163939; } .packages__inner.package-1 .packages__inner-header, .packages__inner.package-1 .packages__inner-select { background-color: #644EBC; } .packages__inner.package-1 .packages__inner-header:hover, .packages__inner.package-1 .packages__inner-select:hover { background-color: #9affcf; } .packages__inner.package-2 { border: 2px solid #163939; } .packages__inner.package-2 .packages__inner-header, .packages__inner.package-2 .packages__inner-select { background-color: #5CFFB2; } .packages__inner.package-2 .packages__inner-header:hover, .packages__inner.package-2 .packages__inner-select:hover { background-color: #b9ffde; } .packages__inner.package-3 { border: 2px solid #163939; } .packages__inner.package-3 .packages__inner-header, .packages__inner.package-3 .packages__inner-select { background-color: #A490F4; } .packages__inner.package-3 .packages__inner-header:hover, .packages__inner.package-3 .packages__inner-select:hover { background-color: #d4c9ff; } .packages__inner-header { padding: 14px 20px 24px 20px; transition-property: background-color; transition-duration: .3s; border-radius: 21px 21px 0 0; } @media only screen and (max-width: 1599px) { .packages__inner-header { padding: 22px 20px 18px 20px; } } .packages__inner-body { padding-bottom: 30px; padding-top: 14px; } @media only screen and (max-width: 440px) { .packages__inner-body { padding: 24px; } } .packages__inner-body ul { display: block; margin-top: 8px; } .packages__inner-body ul li { display: flex; align-items: center; justify-content: space-between; padding: 8.5px 0; border-bottom: 1px solid #DBDDE0; } .packages__inner-body ul li:last-child { border: none; } @media only screen and (max-width: 1599px) { .packages__inner-body ul li { padding: 7px 0; } } .packages__inner-body ul.slide-list { margin-top: 0; position: relative; } .packages__inner-body ul.slide-list:after { position: absolute; content: ''; height: .5px; background: #D9D9D9; width: calc(100% - 64px); transform: translate(-50%, -50%); left: 50%; } .packages__inner-body ul.slide-list > li { display: block; position: relative; font-size: 18px; line-height: 27px; cursor: pointer; } .packages__inner-body ul.slide-list > li:after { position: absolute; content: ''; right:32px; top: 30px; width: 16px; height: 8px; transition: .5s ease transform; background: no-repeat center / 100% url('../icons/arrow-down.svg'); } .packages__inner-body ul.slide-list > li.is-opened:after { transform: rotate(180deg); } .packages__inner-body ul.slide-list > li > ul { background: #F5F5F5CC; } .packages__inner-body ul.slide-list > li:not(.active) > ul{ display: none; } .packages__inner-body ul.slide-list > li > ul > li { position: relative; border-bottom: 1px solid #fff; padding: 19px 33px; } .packages__inner-price { display: flex; align-items: center; margin-bottom: 24px; } @media only screen and (max-width: 1599px) { .packages__inner-price { margin-bottom: 18px; } } .packages__inner-price span { display: inline-block; font-style: normal; font-weight: 400; font-size: 18px; line-height: 1; color: #2B2B2B; margin-right: 8px; position: relative; top: -24px; } @media only screen and (max-width: 1599px) { .packages__inner-price span { font-size: 17px; top: -20px; } } .packages__inner-price strong { display: inline-block; font-style: normal; font-weight: 700; font-size: 68px; line-height: 1.2; color: #000; } .packages__inner-price small { margin-top: 14px; font-size: 16px; line-height: 20px; margin-left: 6px; font-weight: 400; color: #00000099; } .packages__inner-price.bottom-price{ justify-content: center; margin-bottom: 12px; margin-top: 24px; } .packages__inner-price.bottom-price > * { font-size: 18px; } .packages__inner-price.bottom-price > span{ top: 0; } @media only screen and (max-width: 1599px) { .packages__inner-price strong { font-size: 44px; } .packages__inner-header .packages__inner-price>span { font-size: 44px !important; } .packages__inner-price small { margin-top: 5px; font-size: 16px; line-height: 16px; } } .packages__inner-price p { margin-left: 8px; font-style: normal; font-weight: 400; font-size: 16px; line-height: 1; color: rgba(22, 57, 57, 0.47); max-width: 37px; } @media only screen and (max-width: 1599px) { .packages__inner-price p { font-size: 15px; } } .packages__inner-select { display: block; margin-top: 24px; width: 100%; border-radius: 16px; padding: 20px; font-style: normal; font-weight: 600; font-size: 22px; line-height: 1; text-align: center; color: #000; transition-property: background-color; transition-duration: .3s; box-shadow: 6px 6px 0 #163939; transition: .1s ease box-shadow; } .packages__inner-select:hover { box-shadow: none; } @media only screen and (max-width: 1599px) { .packages__inner-select { margin-top: 22px; padding: 17px; font-size: 18px; border-radius: 12px; } } .advantages { background-color: #4275CB; overflow: hidden; } .advantages__content { padding: 90px 0 0 0; position: relative; } @media only screen and (max-width: 1599px) { .advantages__content { padding: 90px 0 0 0; } } @media only screen and (max-width: 1250px) { .advantages__content { padding: 90px 40px 0 40px; } } @media only screen and (max-width: 767px) { .advantages__content { padding: 90px 0 0 0; } } .advantages__content::after { position: absolute; content: ''; top: 50%; left: calc(100% - 400px); transform: translateY(calc(-50% + 100px)); width: 1575px; height: 1575px; background-color: #4682D6; border-radius: 50%; z-index: 1; } @media only screen and (max-width: 1250px) { .advantages__content::after { display: none; } } .advantages__content::before { position: absolute; content: ''; top: 50%; left: calc(100% - 470px); transform: translateY(-50%); width: 734px; height: 1594px; background-image: url("../images/icon-strips.svg"); background-repeat: no-repeat; background-size: contain; border-radius: 50%; z-index: 2; } @media only screen and (max-width: 1250px) { .advantages__content::before { display: none; } } .advantages__holder { display: flex; align-items: flex-end; position: relative; z-index: 2; } @media only screen and (max-width: 1250px) { .advantages__holder { display: block; } } .advantages__description { flex: 1 1 auto; padding: 0 0 90px 0; } @media only screen and (max-width: 1599px) { .advantages__description { margin-right: -100px; } } @media only screen and (max-width: 1250px) { .advantages__description { padding-bottom: 0; } } .advantages__description .main__title { margin-bottom: 20px; line-height: 1.25; } @media only screen and (max-width: 1599px) { .advantages__description .main__title { max-width: 800px; } } .advantages__description .main__text { margin-top: 25px; max-width: 626px; } .advantages__description .main__link { margin-top: 30px; } @media only screen and (max-width: 1599px) { .advantages__description .main__link { margin-top: 20px; } } @media only screen and (max-width: 1250px) { .advantages__description { margin: 0; } } .advantages__image { flex: 0 0 51.2%; font-size: 0; margin-right: -30px; position: relative; } @media only screen and (max-width: 1599px) { .advantages__image { margin-right: -140px; } } @media only screen and (max-width: 1440px) { .advantages__image { margin-right: -80px; } } @media only screen and (max-width: 1360px) { .advantages__image { margin-right: -40px; } } @media only screen and (max-width: 1250px) { .advantages__image { margin: 140px auto 0 auto; max-width: 580px; } } @media only screen and (max-width: 767px) { .advantages__image { margin-top: 200px; } } @media only screen and (max-width: 599px) { .advantages__image { margin: 100px -15px 0 -15px; } } .advantages__image-img { width: 100%; position: relative; z-index: 2; } .advantages__image-decor { max-width: 100%; position: absolute; bottom: 0; left: 0; } @media only screen and (max-width: 1599px) { .advantages__image-decor { max-width: 85%; } } @media only screen and (max-width: 1250px) { .advantages__image-decor { max-width: 100%; } } .advantages__link { display: block; position: absolute; background-color: #fff; border: 1px solid #163939; box-shadow: 8px 8px 0 #163939; border-radius: 16px; padding: 9.5px 15px; font-style: normal; font-weight: 600; font-size: 16px; line-height: 1.2; color: #2B2B2B; transition-property: color; transition-duration: .3s; z-index: 3; } @media only screen and (max-width: 1599px) { .advantages__link { font-size: 13px; padding: 7px 12px; border-radius: 12px; box-shadow: 6.5px 6.5px 0 #163939; } } @media only screen and (max-width: 599px) { .advantages__link { font-size: 10px; padding: 6px 10px; border-radius: 6px; box-shadow: 3.4px 3.4px 0 #163939; } } @media only screen and (max-width: 360px) { .advantages__link { font-size: 8px; } } .advantages__link:hover { color: #757575; } .advantages__link--one { bottom: 158px; left: 15px; } @media only screen and (max-width: 599px) { .advantages__link--one { bottom: 87px; left: 6px; } } .advantages__link--two { bottom: 80px; left: 19px; } @media only screen and (max-width: 599px) { .advantages__link--two { bottom: 34px; left: 7px; } } .advantages__link--three { top: 10px; right: 75px; } @media only screen and (max-width: 1599px) { .advantages__link--three { top: -20px; } } @media only screen and (max-width: 767px) { .advantages__link--three { top: inherit; bottom: 340px; right: 50px; } } @media only screen and (max-width: 599px) { .advantages__link--three { bottom: 155px; right: 31px; } } .advantages__link--four { bottom: 226px; right: 129px; } @media only screen and (max-width: 767px) { .advantages__link--four { right: 70px; } } @media only screen and (max-width: 599px) { .advantages__link--four { bottom: 96px; right: 54px; } } .advantages__link--five { bottom: 126px; right: 96px; } @media only screen and (max-width: 767px) { .advantages__link--five { right: 50px; bottom: 80px; } } @media only screen and (max-width: 599px) { .advantages__link--five { right: 40px; bottom: 53px; } } .advantages__coin { position: absolute; animation: 2.6s linear infinite; max-width: 48px; } @media only screen and (max-width: 440px) { .advantages__coin { max-width: 34px; } } .advantages__coin.advantages__coin1 { bottom: 24vh; left: 16px; z-index: 1; animation-name: bounce-down-up; } @media only screen and (max-width: 599px) { .advantages__coin.advantages__coin1 { bottom: 140px; } } .advantages__coin.advantages__coin2 { bottom: 23vh; right: 6vw; z-index: 1; animation-name: bounce-down-down; } @media only screen and (max-width: 1599px) { .advantages__coin.advantages__coin2 { bottom: 23vh; } } @media only screen and (max-width: 599px) { .advantages__coin.advantages__coin2 { bottom: 230px; } } @media only screen and (max-width: 440px) { .advantages__coin.advantages__coin2 { bottom: 200px; } } .advantages__coin.advantages__coin3 { bottom: 38vh; right: 3vw; z-index: 1; animation-name: bounce-down-up; max-width: 24px; } @media only screen and (max-width: 1599px) { .advantages__coin.advantages__coin3 { bottom: 32vh; } } @media only screen and (max-width: 599px) { .advantages__coin.advantages__coin3 { bottom: 320px; } } @media only screen and (max-width: 440px) { .advantages__coin.advantages__coin3 { bottom: 280px; } } .latest-posts { background-color: #FF0871; } @media only screen and (max-width: 1023px) { .latest-posts { display: none; } } .latest-posts__content { padding: 100px 0; } @media only screen and (max-width: 1599px) { .latest-posts__content { padding: 100px 40px; } } .latest-posts__top { position: relative; padding-right: 140px; } .latest-posts__top-title { max-width: 540px; margin: 0 auto; position: relative; left: -75px; } @media only screen and (max-width: 1599px) { .latest-posts__top-title { margin: 0; left: 0; } } .latest-posts__top-title .main__link { margin-top: 20px; } .latest-posts__nav { display: flex; align-items: center; position: absolute; top: 10px; right: 0; } @media only screen and (max-width: 1599px) { .latest-posts__nav { bottom: 40px; top: inherit; } } .latest-posts__arrow { display: block; cursor: pointer; background-color: #fff; background-position: center; background-repeat: no-repeat; width: 56px; height: 56px; border-radius: 50%; margin-left: 8px; transition-property: background-color; transition-duration: .3s; } @media only screen and (max-width: 1599px) { .latest-posts__arrow { width: 48px; height: 48px; background-size: 22px; } } .latest-posts__arrow.swiper-button-disabled { cursor: default; pointer-events: none; opacity: .7; } .latest-posts__arrow:hover { background-color: rgba(255, 255, 255, 0.9); } .latest-posts__arrow:first-child { margin-left: 0; } .latest-posts__arrow--prev { background-image: url("../images/icon-prev.svg"); } .latest-posts__arrow--next { background-image: url("../images/icon-next.svg"); } .latest-posts__slider { margin-top: 40px; overflow: inherit; } @media only screen and (max-width: 1599px) { .latest-posts__slider { margin-top: 30px; } } .latest-posts__slider .swiper-slide { background-color: #fff; border-radius: 8px; padding: 16px; } @media only screen and (max-width: 1599px) { .latest-posts__slider .swiper-slide { padding: 15px; } } .latest-posts__slider .swiper-slide .main__title { line-height: 1.15; transition-property: opacity; transition-duration: .3s; overflow: hidden; text-overflow: ellipsis; display: -moz-box; -moz-box-orient: vertical; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; } @media only screen and (max-width: 1599px) { .latest-posts__slider .swiper-slide .main__title { line-height: 1.05; } } .latest-posts__slider .swiper-slide .main__title:hover { opacity: .8; } .latest-posts__slider .swiper-slide img { display: block; width: 100%; border-radius: 8px; height: 136px; object-position: center top; object-fit: cover; } .latest-posts__slider .swiper-slide .main__text { margin: 10px 0; line-height: 1.5; overflow: hidden; text-overflow: ellipsis; display: -moz-box; -moz-box-orient: vertical; display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; } @media only screen and (max-width: 767px) { .partners { margin-bottom: -50px; } } .partners__content { padding: 75px 0; } @media only screen and (max-width: 767px) { .partners__content { padding-bottom: 0; } } .partners__items { display: flex; align-items: center; flex-wrap: wrap; justify-content: center; margin: 75px -70px 0 -70px; } @media only screen and (max-width: 1599px) { .partners__items { margin: 55px -35px 0 -35px; } } @media only screen and (max-width: 599px) { .partners__items { display: block; margin: 50px 0 0 0; } } .partners__item { flex: 0 0 calc(20% - 140px); margin: 0 70px; } @media only screen and (max-width: 1599px) { .partners__item { flex: 0 0 calc(20% - 70px); margin: 0 35px; } } @media only screen and (max-width: 1023px) { .partners__item { flex: 0 0 calc(50% - 70px); } } @media only screen and (max-width: 599px) { .partners__item { margin: 0; } } .partners__item img { width: 100%; } @media only screen and (max-width: 1023px) { .partners__item img { max-width: 50%; display: block; margin: 0 auto; } } @media only screen and (max-width: 767px) { .partners__item img { max-width: 80%; } } @media only screen and (max-width: 599px) { .partners__item img { max-width: 150px; } } .feedback { background-color: #4275CB; } .feedback__content { padding: 120px 0 60px 0; } .feedback__content .main__title { max-width: 500px; } .feedback__holder { max-width: 928px; width: 100%; margin: 100px auto 0 auto; } @media only screen and (max-width: 1023px) { .feedback__holder { max-width: 450px; margin-top: 150px; } } .feedback__inners { display: flex; align-items: flex-start; flex-wrap: wrap; margin: -100px -16px; } @media only screen and (max-width: 1023px) { .feedback__inners { display: block; } } @media only screen and (max-width: 599px) { .feedback__inners { margin: -60px -16px; } } .feedback__inner { padding: 100px 16px; flex: 0 0 50%; } @media only screen and (max-width: 599px) { .feedback__inner { padding: 60px 16px; } } .feedback__inner:nth-child(1n) .feedback__inner-photo { background: #DAEDFE; } .feedback__inner:nth-child(2n) .feedback__inner-photo { background: #FFE0E9; } .feedback__inner:nth-child(3n) .feedback__inner-photo { background: #F3FDD8; } .feedback__inner:nth-child(4n) .feedback__inner-photo { background: #FFFAD8; } .feedback__inner-photo { border-radius: 24px; height: 267px; position: relative; } @media only screen and (max-width: 599px) { .feedback__inner-photo { height: 170px; } } .feedback__inner-photo img { position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); max-width: 100%; } @media only screen and (max-width: 599px) { .feedback__inner-photo img { max-width: 90%; } } .feedback__inner .main__text { margin-top: 20px; } @media only screen and (max-width: 767px) { .feedback__inner .main__text { font-size: 16px; } } .buying-power__content { padding: 88px 0; } @media only screen and (max-width: 1599px) { .buying-power__content { padding: 75px 0; } } .buying-power__holder { background-image: url("../images/icon-decor-star-banner.svg"); background-repeat: no-repeat; background-size: cover; background-position: center right; background-color: #5CE1E6; border-radius: 24px; display: flex; align-items: center; padding: 100px 60px 100px 84px; } @media only screen and (max-width: 1599px) { .buying-power__holder { padding: 60px 50px 60px 60px; } } @media only screen and (max-width: 1100px) { .buying-power__holder { display: block; background-image: url("../images/icon-decor-star-banner-mob.svg"); background-position: center bottom; padding: 80px 64px; } } @media only screen and (max-width: 767px) { .buying-power__holder { padding: 80px 18px 140px 18px; overflow: hidden; } } @media only screen and (max-width: 599px) { .buying-power__holder { padding-top: 50px; } } .buying-power__description { flex: 1 1 auto; padding-right: 200px; } @media only screen and (max-width: 1100px) { .buying-power__description { padding: 0; } } .buying-power__description .main__subtitle { margin: 20px 0; } .buying-power__rside { flex: 0 0 auto; position: relative; } @media only screen and (max-width: 1100px) { .buying-power__rside { max-width: 350px; margin: 100px auto 0 auto; } } @media only screen and (max-width: 767px) { .buying-power__rside { margin-top: 200px; } } @media only screen and (max-width: 599px) { .buying-power__rside { max-width: 330px; } } @media only screen and (max-width: 440px) { .buying-power__rside { max-width: 280px; } } .buying-power__inner { display: flex; align-items: center; justify-content: space-between; background-color: #fff; border: 1px solid #163939; box-shadow: 8px 8px 0 #163939; border-radius: 16px; padding: 6.5px 16px; min-height: 64px; margin-bottom: 12px; position: relative; z-index: 3; } @media only screen and (max-width: 767px) { .buying-power__inner { padding: 6px 12px; } } @media only screen and (max-width: 599px) { .buying-power__inner { padding: 5px 12px; min-height: 56px; } } .buying-power__inner:last-child { margin-bottom: 0; } @media only screen and (max-width: 1100px) { .buying-power__inner:nth-child(1) { margin-right: -50px; } } @media only screen and (max-width: 1100px) and (max-width: 767px) { .buying-power__inner:nth-child(1) { margin-right: -20px; } } @media only screen and (max-width: 1100px) and (max-width: 440px) { .buying-power__inner:nth-child(1) { margin-right: -10px; } } .buying-power__inner:nth-child(2) { margin-left: -110px; margin-right: 40px; } @media only screen and (max-width: 767px) { .buying-power__inner:nth-child(2) { margin-left: -20px; } } @media only screen and (max-width: 440px) { .buying-power__inner:nth-child(2) { margin-left: -10px; } } .buying-power__inner:nth-child(3) { margin-left: -30px; margin-right: 20px; } @media only screen and (max-width: 767px) { .buying-power__inner:nth-child(3) { margin-left: -10px; } } @media only screen and (max-width: 440px) { .buying-power__inner:nth-child(3) { margin-left: -5px; } } .buying-power__inner-lside { display: flex; align-items: center; margin-right: 10px; } @media only screen and (max-width: 767px) { .buying-power__inner-lside { flex: 0 0 auto; } } .buying-power__inner-lside-icon { flex: 0 0 auto; width: 38px; font-size: 0; } .buying-power__inner-lside-icon img { width: 100%; } @media only screen and (max-width: 599px) { .buying-power__inner-lside-icon { width: 26px; } } .buying-power__inner-lside-info { padding-left: 16px; } @media only screen and (max-width: 767px) { .buying-power__inner-lside-info { padding-left: 14px; } } @media only screen and (max-width: 599px) { .buying-power__inner-lside-info { padding-left: 12px; } } .buying-power__inner-lside-info .main__subtitle { margin-bottom: 2px; } @media only screen and (max-width: 599px) { .buying-power__inner-lside-info .main__subtitle { font-size: 12px; } } .buying-power__inner-lside-info .main__subtitle:last-child { margin-bottom: 0; } .buying-power__inner-middle { flex: 1 1 auto; display: flex; justify-content: center; padding: 0 20px; font-size: 0; } @media only screen and (max-width: 767px) { .buying-power__inner-middle { padding: 0 15px; } } @media only screen and (max-width: 599px) { .buying-power__inner-middle { padding: 0 10px; } } @media only screen and (max-width: 440px) { .buying-power__inner-middle { padding: 0 5px; } } .buying-power__inner-middle img { max-width: 100%; } .buying-power__inner-rside { flex: 0 0 auto; } .buying-power__inner-rside .main__subtitle { margin-bottom: 2px; } @media only screen and (max-width: 599px) { .buying-power__inner-rside .main__subtitle { font-size: 12px; } } .buying-power__inner-rside .main__subtitle:last-child { margin-bottom: 0; } .buying-power__coin { position: absolute; animation: 2.6s linear infinite; max-width: 94px; } .buying-power__coin.buying-power__coin1 { bottom: -73px; left: -132px; z-index: 1; animation-name: bounce-down-up; } @media only screen and (max-width: 767px) { .buying-power__coin.buying-power__coin1 { left: -30px; bottom: -130px; } } @media only screen and (max-width: 440px) { .buying-power__coin.buying-power__coin1 { left: -10px; } } .buying-power__coin.buying-power__coin2 { bottom: 3px; left: -94px; z-index: 1; animation-name: bounce-down-down; } @media only screen and (max-width: 767px) { .buying-power__coin.buying-power__coin2 { bottom: -60px; left: -40px; } } @media only screen and (max-width: 440px) { .buying-power__coin.buying-power__coin2 { left: -20px; } } .buying-power__coin.buying-power__coin3 { bottom: 80px; left: -158px; animation-name: bounce-down-up; } @media only screen and (max-width: 767px) { .buying-power__coin.buying-power__coin3 { bottom: inherit; top: -100px; left: 0; } } .buying-power__coin.buying-power__coin4 { bottom: 160px; left: -80px; z-index: 1; animation-name: bounce-down-down; } @media only screen and (max-width: 767px) { .buying-power__coin.buying-power__coin4 { display: none; } } .buying-power__coin.buying-power__coin5 { bottom: 206px; left: -112px; z-index: 1; animation-name: bounce-down-up; } @media only screen and (max-width: 767px) { .buying-power__coin.buying-power__coin5 { bottom: inherit; top: 30px; left: -40px; } } @media only screen and (max-width: 440px) { .buying-power__coin.buying-power__coin5 { left: -20px; } } .buying-power__coin.buying-power__coin6 { bottom: 220px; left: 2px; z-index: 1; animation-name: bounce-down-down; } @media only screen and (max-width: 767px) { .buying-power__coin.buying-power__coin6 { bottom: inherit; top: -130px; left: 80px; } } .buying-power__coin.buying-power__coin7 { bottom: 290px; left: 1px; z-index: 1; animation-name: bounce-down-up; } @media only screen and (max-width: 767px) { .buying-power__coin.buying-power__coin7 { bottom: inherit; top: -170px; left: 20px; } } .buying-power__coin.buying-power__coin8 { bottom: -84px; right: 13px; z-index: 1; animation-name: bounce-down-down; } @media only screen and (max-width: 1100px) { .buying-power__coin.buying-power__coin8 { bottom: -40px; } } @media only screen and (max-width: 767px) { .buying-power__coin.buying-power__coin8 { bottom: -100px; right: 100px; } } .buying-power__coin.buying-power__coin9 { bottom: -20px; right: 60px; z-index: 1; animation-name: bounce-down-up; } @media only screen and (max-width: 767px) { .buying-power__coin.buying-power__coin9 { bottom: -40px; right: 120px; } } .buying-power__coin.buying-power__coin10 { bottom: 43px; right: -15px; z-index: 1; animation-name: bounce-down-down; } @media only screen and (max-width: 767px) { .buying-power__coin.buying-power__coin10 { bottom: -70px; right: 20px; } } .buying-power__coin.buying-power__coin11 { bottom: 120px; right: -40px; z-index: 1; animation-name: bounce-down-up; } @media only screen and (max-width: 767px) { .buying-power__coin.buying-power__coin11 { bottom: inherit; top: -130px; right: -20px; } } .buying-power__coin.buying-power__coin12 { bottom: 185px; right: -40px; z-index: 1; animation-name: bounce-down-down; } @media only screen and (max-width: 1100px) { .buying-power__coin.buying-power__coin12 { right: -100px; } } @media only screen and (max-width: 767px) { .buying-power__coin.buying-power__coin12 { bottom: inherit; top: -50px; right: -20px; } } .buying-power__coin.buying-power__coin13 { bottom: 245px; right: 8px; z-index: 1; animation-name: bounce-down-up; } @media only screen and (max-width: 767px) { .buying-power__coin.buying-power__coin13 { bottom: inherit; top: -80px; right: 50px; } } .info { background-color: #73A7F3; } .info__content { padding: 120px 0; display: flex; align-items: center; } @media only screen and (max-width: 1599px) { .info__content { padding: 90px 0; } } @media only screen and (max-width: 1200px) { .info__content { display: block; padding: 90px 40px; } } @media only screen and (max-width: 767px) { .info__content { padding: 75px 0; } } .info__description { flex: 1 1 auto; padding-right: 80px; } @media only screen and (max-width: 1200px) { .info__description { padding: 0; } } .info__description .main__title { max-width: 690px; } .info__description .main__text { margin-top: 20px; max-width: 690px; } .info__image { flex: 0 0 29.9%; margin-right: 110px; position: relative; } @media only screen and (max-width: 1200px) { .info__image { max-width: 440px; margin: 60px auto 0 auto; } } .info__image > img { width: 100%; } .info__image-btn { position: absolute; z-index: 1; top: calc(50% + 34px); left: 50%; transform: translateX(-50%); background-color: #4BBF04; border-radius: 16px; font-family: 'Alumni Sans', sans-serif; font-style: normal; font-weight: 600; font-size: 20px; line-height: 1; text-transform: uppercase; color: #fff; padding: 6px 12px; transition-property: background-color; transition-duration: .3s; } .info__image-btn:hover { background-color: rgba(75, 191, 4, 0.9); } .steps { background-color: #4275CB; } @media only screen and (max-width: 1200px) { .steps { display: none; } } .steps__content { padding: 90px 0; } @media only screen and (max-width: 1599px) { .steps__content { padding: 80px 0; } } .steps__top { position: relative; padding-right: 140px; } .steps__nav { display: flex; align-items: center; position: absolute; top: 14px; right: 0; } .steps__arrow { display: block; cursor: pointer; background-color: #fff; background-position: center; background-repeat: no-repeat; width: 56px; height: 56px; border-radius: 50%; margin-left: 8px; transition-property: background-color; transition-duration: .3s; } @media only screen and (max-width: 1599px) { .steps__arrow { width: 48px; height: 48px; background-size: 22px; } } .steps__arrow.swiper-button-disabled { cursor: default; pointer-events: none; opacity: .7; } .steps__arrow:hover { background-color: rgba(255, 255, 255, 0.9); } .steps__arrow:first-child { margin-left: 0; } .steps__arrow--prev { background-image: url("../images/icon-prev.svg"); } .steps__arrow--next { background-image: url("../images/icon-next.svg"); } .steps__slider { padding: 15px; margin: 15px -15px -15px -15px; overflow: inherit; } .steps__slider .swiper-slide:nth-child(1n) .steps__slide { background-color: #D9FEFF; background-image: url("../images/icon-decor-star0.svg"); background-repeat: no-repeat; background-size: cover; background-position: center; } .steps__slider .swiper-slide:nth-child(1n) .steps__slide-img { width: 42.5%; } .steps__slider .swiper-slide:nth-child(2n) .steps__slide { background-color: #5CFFB2; background-image: url("../images/icon-decor-star.svg"); background-repeat: no-repeat; background-size: cover; background-position: center; } .steps__slider .swiper-slide:nth-child(2n) .steps__slide-img { width: 42.8%; } .steps__slider .swiper-slide:nth-child(2n) .steps__slide-description { padding-bottom: 180px; } @media only screen and (max-width: 1599px) { .steps__slider .swiper-slide:nth-child(2n) .steps__slide-description { padding-bottom: 150px; } } .steps__slider .swiper-slide:nth-child(3n) .steps__slide { padding-top: 30px; background-color: #6100FF; background-image: url("../images/icon-decor-star2.svg"); background-repeat: no-repeat; background-size: cover; background-position: center; } .steps__slider .swiper-slide:nth-child(3n) .steps__slide-img { width: 46.7%; } @media only screen and (max-width: 1599px) { .steps__slider .swiper-slide:nth-child(3n) .steps__slide-img { width: 43%; } } .steps__slider .swiper-slide:nth-child(3n) .main__text { margin-top: 230px; } @media only screen and (max-width: 1599px) { .steps__slider .swiper-slide:nth-child(3n) .main__text { margin-top: 120px; } } .steps__slider .swiper-slide:nth-child(3n) .steps__slide-description { padding-bottom: 150px; } @media only screen and (max-width: 1599px) { .steps__slider .swiper-slide:nth-child(3n) .steps__slide-description { padding-bottom: 140px; } } .steps__slider .swiper-slide:nth-child(4n) .steps__slide { padding-top: 68px; background-color: #4275CB; background-image: none; } .steps__slider .swiper-slide:nth-child(4n) .steps__slide-description { padding-bottom: 88px; padding-top: 32px; } .steps__slider .swiper-slide:nth-child(4n) .btn-white { max-width: 210px; margin-top: 48px; } .steps__slide { padding: 115px 54px 0 88px; display: flex; align-items: flex-end; box-shadow: 8px 8px 0 #163939; border-radius: 16px; border: 1px solid #163939; } @media only screen and (max-width: 1599px) { .steps__slide { padding: 60px 54px 0 80px; } } .steps__slide-description { flex: 1 1 auto; padding: 0 80px 154px 0; } @media only screen and (max-width: 1599px) { .steps__slide-description { padding: 0 80px 120px 0; } } .steps__slide-description .main__text { margin-top: 20px; } .steps__slide-img { flex: 0 0 auto; position: relative; font-size: 0; } .steps__slide-img img { width: 100%; } .steps__slide-buy { position: absolute; bottom: 73px; left: -13px; z-index: 1; padding: 8px 24px; background-color: #4BBF04; border-radius: 16px; font-family: 'Alumni Sans', sans-serif; font-style: normal; font-weight: 600; font-size: 40px; line-height: 1; text-transform: uppercase; color: #fff; transition-property: background-color; transition-duration: .3s; } @media only screen and (max-width: 1599px) { .steps__slide-buy { font-size: 32px; padding: 7px 20px; } } .steps__slide-buy:hover { background-color: rgba(75, 191, 4, 0.9); } .steps__slide-text { display: block; position: absolute; font-style: normal; font-weight: 600; font-size: 28px; line-height: 1.1; color: #fff; background-color: #644EBC; border-radius: 16px; padding: 20px 22px; z-index: 1; } @media only screen and (max-width: 1599px) { .steps__slide-text { font-size: 22px; padding: 16px; border-radius: 12px; } } .steps__slide-text--one { top: 115px; left: -48px; } .steps__slide-text--two { bottom: 41px; right: 0; } .steps__slide-text--three { top: 8px; right: -11px; } .steps__slide-number { display: inline-block; font-style: normal; font-weight: 600; font-size: 16px; line-height: 1.3; color: #2B2B2B; background-color: #fff; border: 1px solid #163939; box-shadow: 8px 8px 0 #163939; border-radius: 16px; padding: 9px 16px; margin-bottom: 26px; } .steps__slide-links { display: flex; align-items: center; flex-wrap: wrap; margin: 160px -12px -12px -12px; } @media only screen and (max-width: 1599px) { .steps__slide-links { margin-top: 100px; } } .steps__slide-links li { display: inline-block; margin: 12px; } .steps__slide-links li a { display: inline; font-style: normal; font-weight: 400; font-size: 16px; line-height: 1.2; color: #fff; border-bottom: 1px solid transparent; transition-duration: .3s; } .steps__slide-links li a:hover { border-bottom-color: #fff; } .why { background-color: #8EB7F0; background-image: url("../images/icon-decor-star3.svg"); background-repeat: no-repeat; background-size: cover; background-position: center bottom; position: relative; overflow: hidden; } .why__content { padding: 90px 0 260px 0; } @media only screen and (max-width: 1599px) { .why__content { padding: 80px 0 150px 0; } } @media only screen and (max-width: 1023px) { .why__content { padding-bottom: 0; } } .why .main__title.xl { margin-top: 40px; } @media only screen and (max-width: 1599px) { .why .main__title.xl { margin-top: 30px; } } .why__slider { overflow: inherit; margin-top: 80px; } @media only screen and (max-width: 1599px) { .why__slider { margin-top: 60px; } } @media only screen and (max-width: 599px) { .why__slider { margin-top: 40px; } } .why__slider .swiper-wrapper { transition-timing-function: linear; } .why__slider .swiper-slide { margin: 0 -8px; } .why__slide { display: flex; flex-direction: column; align-items: center; justify-content: center; } .why__slide-link { display: inline-block; font-style: normal; font-weight: 600; font-size: 16px; line-height: 1; color: #2B2B2B; background: #fff; padding: 11px 16px; border: 1px solid #163939; box-shadow: 8px 8px 0 #163939; border-radius: 16px; margin: 16px; transition-property: color; transition-duration: .3s; } @media only screen and (max-width: 1599px) { .why__slide-link { padding: 9px 15px; font-size: 15px; border-radius: 12px; } } @media only screen and (max-width: 1023px) { .why__slide-link { margin: 8px; } } @media only screen and (max-width: 599px) { .why__slide-link { font-size: 14px; } } .why__slide-link:hover { color: #757575; } .why__slide-link:nth-child(2) { margin-left: -100px; } @media only screen and (max-width: 1240px) { .why__slide-link:nth-child(2) { margin-left: -50px; } } @media only screen and (max-width: 1023px) { .why__slide-link:nth-child(2) { margin-left: -20px; } } .why__slide-link:nth-child(3) { margin-left: -50px; } @media only screen and (max-width: 1240px) { .why__slide-link:nth-child(3) { margin-left: -25px; } } @media only screen and (max-width: 1023px) { .why__slide-link:nth-child(3) { margin-left: -12px; } } .why__bottom { position: absolute; pointer-events: none; bottom: 0; left: 50%; transform: translateX(-50%); width: 784px; z-index: 2; } @media only screen and (max-width: 1599px) { .why__bottom { width: 550px; } } @media only screen and (max-width: 1023px) { .why__bottom { position: relative; transform: none; left: 0; margin: 30px auto -7px auto; max-width: 440%; width: 100%; font-size: 0; pointer-events: inherit; } } .traders__content { padding: 75px 0; } @media only screen and (max-width: 1599px) { .traders__content { padding: 70px 0; } } .traders__content > .main__text { margin-top: 16px; } .traders__table { margin-top: 40px; } @media only screen and (max-width: 1599px) { .traders__table { margin-top: 30px; } } @media only screen and (max-width: 767px) { .traders__table { overflow-x: auto; } } @media only screen and (max-width: 767px) { .traders__table table { min-width: 770px; } } .traders__table table thead { border-bottom: 1px solid #757575; } .traders__table table thead th { padding: 13px 15px; } @media only screen and (max-width: 1599px) { .traders__table table thead th { padding: 13px; } } .traders__table table tbody tr:first-child td { padding-top: 30px; } @media only screen and (max-width: 1599px) { .traders__table table tbody tr:first-child td { margin-top: 20px; } } .traders__table table tbody td { padding: 14px; } .traders__table table .t-main { width: 52%; text-align: left; } @media only screen and (max-width: 1599px) { .traders__table table .t-main { width: 40%; } } @media only screen and (max-width: 1023px) { .traders__table table .t-main { width: 33.3333333%; } } .traders__table table .t-trader { width: 24%; text-align: center; } @media only screen and (max-width: 1023px) { .traders__table table .t-trader { width: 33.3333333%; } } .traders .btn-green { max-width: 210px; display: block; margin: 50px auto 0 auto; } @media only screen and (max-width: 1599px) { .traders .btn-green { margin-top: 30px; } } .traders--markets .btn-green { max-width: 264px; } @media only screen and (max-width: 1599px) { .traders--markets .traders__content { padding-bottom: 20px; } } .traders--markets .traders__table { max-width: 900px; width: 100%; margin: 70px auto 0 auto; } @media only screen and (max-width: 1599px) { .traders--markets .traders__table { margin-top: 30px; } } .traders--markets .traders__table table thead { border-bottom-color: #EDEDED; } .traders--markets .traders__table table td { border-bottom: 1px solid #EDEDED; } @media only screen and (max-width: 1599px) { .traders--markets .traders__table table td { padding: 12px; } } .traders--markets .traders__table table .t-main { width: 23%; text-align: left; } @media only screen and (max-width: 1599px) { .traders--markets .traders__table table .t-main { width: 33.3333333%; } } @media only screen and (max-width: 1023px) { .traders--markets .traders__table table .t-main { width: 33.3333333%; } } .traders--markets .traders__table table .t-trader { width: 33.3333333%; text-align: left; } @media only screen and (max-width: 1023px) { .traders--markets .traders__table table .t-trader { width: 33.3333333%; } } .faq--services { background-color: #003737; } .faq--services .faq__item { border-bottom: 1px solid #73BA95; } .faq--services .faq__item-header::after { background-color: #73BA95; } .faq--services .main__title { line-height: 1; } @media only screen and (max-width: 767px) { .faq--services .main__title.lg { font-size: 90px; line-height: .9; } } @media only screen and (max-width: 599px) { .faq--services .main__title.lg { font-size: 48px; } } @media only screen and (max-width: 1599px) { .faq--services .faq__content { padding: 80px 0; } } .faq--services .faq__items { margin-top: 70px; } @media only screen and (max-width: 1599px) { .faq--services .faq__items { margin-top: 30px; } } .faq--services .main__text { margin-top: 28px; } .faq__content { padding: 80px 0; } @media only screen and (max-width: 1599px) { .faq__content { padding: 40px 0; } } @media only screen and (max-width: 767px) { .faq__content { padding-bottom: 0; } } .faq__item { border-bottom: 1px solid #20248D; padding: 9px 0; } @media only screen and (max-width: 1599px) { .faq__item { padding: 8px 0; } } .faq__item-header { padding: 10px 70px 10px 0; position: relative; cursor: pointer; } @media only screen and (max-width: 1599px) { .faq__item-header { padding: 6px 60px 6px 0; } } @media only screen and (max-width: 1023px) { .faq__item-header { font-size: 22px; } } @media only screen and (max-width: 767px) { .faq__item-header { font-size: 20px; } } .faq__item-header::after { position: absolute; top: 4px; right: 0; content: ''; width: 52px; height: 52px; border-radius: 50%; background-color: #20248D; background-image: url("../images/icon-plus.svg"); background-repeat: no-repeat; background-position: center; background-size: 22px; } @media only screen and (max-width: 1599px) { .faq__item-header::after { top: 3px; width: 40px; height: 40px; background-size: 18px; } } .faq__item-header.is-open::after { background-image: url("../images/icon-minus.svg"); } .faq__item-body { display: none; padding: 6px 0; } .faq__item-body iframe { display: block; margin: 0 auto; max-width: 800px; width: 100%; height: 500px; } .faq__item-body.main__text { margin-top: 0; } .faq .btn-green { max-width: 210px; display: block; margin: 76px auto 0 auto; } @media only screen and (max-width: 1599px) { .faq .btn-green { margin-top: 50px; } } .benefits { background-color: #513AAD; } .benefits__content { padding: 100px 0 50px 0; } @media only screen and (max-width: 1599px) { .benefits__content { padding: 80px 0 50px 0; } } @media only screen and (max-width: 1100px) { .benefits__content { padding: 75px 0 50px 0; } } .benefits__holder { display: flex; align-items: center; margin-top: 20px; } @media only screen and (max-width: 1599px) { .benefits__holder { margin-top: 10px; } } @media only screen and (max-width: 1100px) { .benefits__holder { display: block; } } @media only screen and (max-width: 767px) { .benefits__holder { margin-top: 24px; } } .benefits__description { flex: 1 1 auto; padding-right: 100px; } @media only screen and (max-width: 1350px) { .benefits__description { padding-right: 50px; } } @media only screen and (max-width: 1100px) { .benefits__description { padding: 0; } } .benefits__image { flex: 0 0 auto; width: 680px; position: relative; } @media only screen and (max-width: 1599px) { .benefits__image { width: 540px; } } @media only screen and (max-width: 1100px) { .benefits__image { margin: 20px auto 0 auto; } } @media only screen and (max-width: 599px) { .benefits__image { width: 300px; } } .benefits__image img { width: 100%; } .benefits__image-title { position: absolute; cursor: pointer; top: 42px; left: 145px; font-style: normal; font-weight: 600; font-size: 16px; line-height: 1.3; color: #2B2B2B; background: #fff; border: 1px solid #163939; box-shadow: 8px 8px 0 #163939; border-radius: 16px; padding: 8px 16px; } @media only screen and (max-width: 1599px) { .benefits__image-title { top: 33px; left: 120px; font-size: 13px; border-radius: 14px; } } @media only screen and (max-width: 599px) { .benefits__image-title { font-size: 8px; white-space: nowrap; padding: 6px 8px; top: 14px; left: 38px; border-radius: 10px; } } .rules { background-color: #644EBC; } .rules__content { padding: 76px 0; } @media only screen and (max-width: 1599px) { .rules__content { padding: 70px 0; } } @media only screen and (max-width: 599px) { .rules__content .main__title { font-size: 45px; } } .rules__inners { display: flex; align-items: stretch; flex-wrap: wrap; margin: 25px -13px 0 -13px; position: relative; z-index: 2; } @media only screen and (max-width: 1599px) { .rules__inners { margin: 20px -10px 0 -10px; } } @media only screen and (max-width: 800px) { .rules__inners { display: block; margin: 20px 0 0 0; } } .rules__inner { flex: 0 0 calc(33.3333333% - 26px); margin: 16px 13px; background-color: #fff; border: 2px solid #163939; box-shadow: 8px 8px 0 #163939; border-radius: 24px; padding: 24px 28px; } @media only screen and (max-width: 1599px) { .rules__inner { flex: 0 0 calc(33.3333333% - 20px); margin: 10px; padding: 24px 28px; } } @media only screen and (max-width: 1200px) { .rules__inner { padding: 26px; } } @media only screen and (max-width: 1000px) { .rules__inner { flex: 0 0 calc(50% - 26px); } } @media only screen and (max-width: 800px) { .rules__inner { margin: 0 0 18px 0; } .rules__inner:last-child { margin-bottom: 0; } } @media only screen and (max-width: 599px) { .rules__inner .main__subtitle { font-size: 22px; } } .rules__inner .main__text { margin-top: 8px; } @media only screen and (max-width: 599px) { .rules__inner .main__text { font-size: 16px; } } .rules__title { max-width: 920px; margin: -45px auto 0 auto; } @media only screen and (max-width: 1599px) { .rules__title { margin-top: -25px; } } @media only screen and (max-width: 800px) { .rules__title { margin-top: -20px; } } @media only screen and (max-width: 767px) { .rules__title { margin-top: -23px; } } @media only screen and (max-width: 599px) { .rules__title { font-size: 72px; margin-top: -20px; line-height: .8; } } .rules .join__holder-items { max-width: 920px; margin: 20px auto 0 auto; } @media only screen and (max-width: 1210px) { .rules .join__holder-items { justify-content: flex-start; } } @media only screen and (max-width: 599px) { .rules .join__holder-items li { flex: 0 0 100%; text-align: center; margin: 0 0 18px 0; } .rules .join__holder-items li:last-child { margin-bottom: 0; } .rules .join__holder-items li a { line-height: 1.3; } } .congrats { background-color: #76B041; } .congrats__content { padding: 100px 0; } @media only screen and (max-width: 1599px) { .congrats__content { padding: 90px 0; } } @media only screen and (max-width: 1000px) { .congrats__content { padding: 75px 0; } } .congrats__content > .main__title { margin-bottom: 10px; } .congrats__items { display: block; margin: 18px 0 80px 0; } @media only screen and (max-width: 1599px) { .congrats__items { margin-bottom: 70px; } } @media only screen and (max-width: 767px) { .congrats__items { margin-bottom: 45px; } } .congrats__items li { display: block; padding-left: 42px; position: relative; margin-bottom: 12px; } .congrats__items li:last-child { margin-bottom: 0; } .congrats__items li::before { position: absolute; top: 1px; left: 0; width: 28px; height: 28px; content: ''; background-image: url("../images/icon-check.svg"); background-repeat: no-repeat; background-size: contain; } .congrats__btn { display: inline-block; width: 56px; height: 56px; border-radius: 50%; background-image: url("../images/icon-btn-arrow-right.svg"); background-repeat: no-repeat; background-size: contain; margin-right: 30px; transition-property: opacity; transition-duration: .3s; } .congrats__btn:hover { opacity: .8; } @media only screen and (max-width: 599px) { .congrats__btn { width: 34px; height: 34px; margin-right: 10px; } } .congrats__middle { display: flex; align-items: center; justify-content: center; } .congrats__holder { display: block; max-width: 1170px; margin: 0 auto; } .congrats__holder .main__subtitle { margin: 20px 0 10px 0; } .congrats__holder .main__text { line-height: 1.6; } .congrats__holder .btn-white { max-width: 180px; margin: 40px auto 0 auto; display: block; font-size: 16px; padding: 21px 16px; } .growth__content { padding: 80px 0 220px 0; } @media only screen and (max-width: 1599px) { .growth__content { padding: 75px 0 180px 0; } } @media only screen and (max-width: 767px) { .growth__content { padding-bottom: 220px; } } .growth__content .main__title.md2 { max-width: 1200px; margin: 10px auto 0 auto; } @media only screen and (max-width: 1599px) { .growth__content .main__title.md2 { max-width: 1000px; } } .growth__formulas { display: flex; align-items: stretch; margin: 35px auto 0 auto; max-width: 960px; width: 100%; flex-wrap: wrap; } @media only screen and (max-width: 1599px) { .growth__formulas { margin-top: 30px; max-width: 900px; } } @media only screen and (max-width: 1000px) { .growth__formulas { display: block; } } .growth__formulas-inner { flex: 0 0 calc(50% - 32px); margin: 16px; background: #fff; border: 2px solid #163939; box-shadow: 8px 8px 0 #163939; border-radius: 24px; padding: 40px 42px; } .growth__formulas-inner h5 { margin: 0; } @media only screen and (max-width: 1599px) { .growth__formulas-inner { padding: 28px 34px; } } @media only screen and (max-width: 1000px) { .growth__formulas-inner { margin: 0 0 32px 0; } .growth__formulas-inner:last-child { margin-bottom: 0; } } @media only screen and (max-width: 599px) { .growth__formulas-inner { padding: 34px; } } .growth__formulas-inner-text { line-height: 1.6; } .growth__formulas-inner h5 { margin: 18px 0 14px 0; } @media only screen and (max-width: 1599px) { .growth__formulas-inner h5 { margin: 10px 0; } } .growth__formulas-inner h4 { margin-top: 20px; } @media only screen and (max-width: 1599px) { .growth__formulas-inner h4 { margin-top: 10px; } } .growth__formulas-inner-items { display: block; margin: 0 0 20px 0; } @media only screen and (max-width: 1599px) { .growth__formulas-inner-items { margin-bottom: 14px; } } .growth__formulas-inner-items li { display: flex; align-items: center; justify-content: space-between; padding: 6px 0; border-bottom: 1px solid #DBDDE0; } @media only screen and (max-width: 1599px) { .growth__formulas-inner-items li { padding: 5px 0; } } .growth__formulas-inner-items li:last-child { border-bottom: 0; } .growth__formulas-inner-items li .main__subtitle { background: #F1EDFF; border-radius: 8px; padding: 4px 5px; } .growth-video__content { position: relative; } .growth-video .main__title { position: absolute; top: -133px; max-width: 770px; left: 0; z-index: 4; pointer-events: none; line-height: 1.1; } @media only screen and (max-width: 1599px) { .growth-video .main__title { top: -110px; } } @media only screen and (max-width: 1000px) { .growth-video .main__title { font-size: 104px; top: -112px; max-width: 540px; } } @media only screen and (max-width: 767px) { .growth-video .main__title { font-size: 68px; top: -112px; } } .growth-video__holder { height: 780px; position: relative; background-color: #3F999C; } @media only screen and (max-width: 1599px) { .growth-video__holder { height: 560px; } } @media only screen and (max-width: 1000px) { .growth-video__holder { height: 320px; } } @media only screen and (max-width: 767px) { .growth-video__holder { height: 350px; } } .growth-video__holder iframe { position: absolute; border-radius: 10px; top: 0; left: 0; width: 100%; height: 100%; z-index: 3; background-color: #000; opacity: 0; visibility: hidden; transition-property: opacity, visibility; transition-duration: .3s; } .growth-video__holder iframe.is-show { opacity: 1; visibility: visible; } .growth-video__play { position: absolute; top: 50%; left: 50%; width: 72px; height: 72px; margin: -36px 0 0 -36px; background-image: url("../images/icon-play-white.svg"); background-repeat: no-repeat; background-size: contain; cursor: pointer; z-index: 2; transition-property: opacity, transform; transition-duration: .3s; } .growth-video__play:hover { opacity: .8; } .growth-video__play:active { transform: scale(0.95); } .how-it-work { background-color: #00141F; } .how-it-work__content { padding: 110px 0; } @media only screen and (max-width: 1599px) { .how-it-work__content { padding: 100px 0; } } @media only screen and (max-width: 767px) { .how-it-work__content { padding: 80px 0; } } .how-it-work__img { display: flex; justify-content: center; font-size: 0; margin-top: 70px; } @media only screen and (max-width: 1599px) { .how-it-work__img { margin-top: 50px; } } .how-it-work__img img { max-width: 820px; width: 100%; pointer-events: none; } @media only screen and (max-width: 1599px) { .how-it-work__img img { max-width: 600px; } } .how-it-work__body { max-width: 820px; width: 100%; margin: 100px auto 0 auto; display: block; } @media only screen and (max-width: 1599px) { .how-it-work__body { margin-top: 40px; } } .how-it-work__body .btn-white { max-width: 270px; display: block; margin: 40px auto 0 auto; } .how-it-work__body h3 { display: block; font-style: normal; font-weight: 600; font-size: 28px; line-height: 1.4; color: #fff; margin: 30px 0 10px 0; } @media only screen and (max-width: 1599px) { .how-it-work__body h3 { font-size: 22px; margin: 20px 0 10px 0; } } @media only screen and (max-width: 767px) { .how-it-work__body h3 { margin: 30px 0 10px 0; } } .how-it-work__body p { display: block; margin: 8px 0; font-style: normal; font-weight: 400; font-size: 20px; line-height: 1.4; color: #D5D5D5; } @media only screen and (max-width: 1599px) { .how-it-work__body p { font-size: 18px; margin: 5px 0; } } @media only screen and (max-width: 767px) { .how-it-work__body p { font-size: 18px; } } @media only screen and (max-width: 599px) { .how-it-work__body p { font-size: 18px; } } .blog__content { padding: 14px 0 90px 0; } @media only screen and (max-width: 1599px) { .blog__content { padding-bottom: 75px; } } .blog__holder { margin-top: 70px; display: flex; align-items: flex-start; } @media only screen and (max-width: 1599px) { .blog__holder { margin-top: 50px; } } .blog__themes { display: flex; align-items: center; flex-wrap: wrap; margin: -5px -18px; } .blog__theme { margin: 5px 18px; display: inline-block; font-family: 'Alumni Sans', sans-serif; font-style: normal; font-weight: 700; font-size: 24px; line-height: 1; color: #2B2B2B; } @media only screen and (max-width: 1599px) { .blog__theme { font-size: 22px; } } .blog__img { position: relative; margin-top: -180px; width: 100%; } @media only screen and (max-width: 1599px) { .blog__img { margin-top: -150px; } } .blog__lside { flex: 1 1 auto; } .blog__inners { display: flex; align-items: flex-start; flex-wrap: wrap; margin: -28px -30px; } @media only screen and (max-width: 1599px) { .blog__inners { margin: -16px -22px; } } @media only screen and (max-width: 1439px) { .blog__inners { display: block; margin: 0; } } .blog__inner { flex: 0 0 50%; padding: 28px 30px; transition-property: opacity; transition-duration: .3s; } @media only screen and (max-width: 1599px) { .blog__inner { padding: 16px 22px; } } @media only screen and (max-width: 1439px) { .blog__inner { display: block; padding: 0; margin: 0 0 50px 0; } .blog__inner:last-child { margin-bottom: 0; } } .blog__inner:hover { opacity: .8; } .blog__inner-img { display: block; width: 100%; height: 242px; object-fit: cover; object-position: center; border-radius: 8px; margin-top: 20px; } @media only screen and (max-width: 1599px) { .blog__inner-img { height: 220px; margin-top: 15px; } } @media only screen and (max-width: 440px) { .blog__inner-img { height: 140px; } } .blog__inner .main__title { overflow: hidden; text-overflow: ellipsis; display: -moz-box; -moz-box-orient: vertical; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1; } .blog__inner .main__text.sm { margin: 8px 0 20px 0; overflow: hidden; text-overflow: ellipsis; display: -moz-box; -moz-box-orient: vertical; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; } @media only screen and (max-width: 1599px) { .blog__inner .main__text.sm { margin-bottom: 15px; } } .blog__sidebar { flex: 0 0 auto; width: 328px; margin-left: 108px; } @media only screen and (max-width: 1599px) { .blog__sidebar { margin-left: 72px; } } @media only screen and (max-width: 1250px) { .blog__sidebar { margin-left: 40px; } } @media only screen and (max-width: 1023px) { .blog__sidebar { display: none; } } .blog__sidebar-search input { display: block; width: 100%; height: 40px; background-color: #fff; background-image: url("../images/icon-search.svg"); background-repeat: no-repeat; background-position: center left 16px; border: 1px solid #EDEDED; border-radius: 32px; padding: 0 20px 0 48px; font-family: 'Poppins', sans-serif; font-style: normal; font-weight: 400; font-size: 16px; line-height: 1; color: #141721; } .blog__sidebar-search input::placeholder { color: #757575; } .blog__sidebar-social { display: flex; align-items: center; margin: 24px -8px; } @media only screen and (max-width: 1599px) { .blog__sidebar-social { margin: 15px -8px; } } .blog__sidebar-social li { display: inline-block; flex: 0 0 auto; margin: 8px; } .blog__sidebar-social li a { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; background-color: #00253A; border-radius: 50%; padding: 5px; transition-property: background-color; transition-duration: .3s; } .blog__sidebar-social li a:hover { background-color: rgba(0, 37, 58, 0.7); } .blog__sidebar-social li a img { max-width: 100%; max-height: 100%; } .blog__sidebar-posts { margin: 20px 0 30px 0; } @media only screen and (max-width: 1599px) { .blog__sidebar-posts { margin: 14px 0 18px 0; } } .blog__sidebar-post { margin-bottom: 16px; display: flex; align-items: center; transition-property: opacity; transition-duration: .3s; } @media only screen and (max-width: 1599px) { .blog__sidebar-post { margin-bottom: 12px; } } .blog__sidebar-post:hover { opacity: .8; } .blog__sidebar-post:last-child { margin-bottom: 0; } .blog__sidebar-post-img { flex: 0 0 42%; height: 64px; } .blog__sidebar-post-img img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; border-radius: 6px; } .blog__sidebar-post .main__text { flex: 1 1 auto; padding-left: 16px; overflow: hidden; text-overflow: ellipsis; display: -moz-box; -moz-box-orient: vertical; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; } .blog__sidebar-video { display: block; width: 100%; height: 214px; margin: 14px 0 30px 0; } @media only screen and (max-width: 1599px) { .blog__sidebar-video { height: 184px; margin: 10px 0 20px 0; } } .blog__sidebar-video iframe { width: 100%; height: 100%; border-radius: 6px; } .blog__sidebar .mtop { margin-top: 15px; } .blog__sidebar-subscribe { margin-top: 15px; } @media only screen and (max-width: 1599px) { .blog__sidebar-subscribe { margin-top: 10px; } } .blog__sidebar-subscribe input { display: block; margin-bottom: 12px; width: 100%; height: 40px; background-color: #fff; border: 1px solid #EDEDED; border-radius: 8px; padding: 0 20px; font-family: 'Poppins', sans-serif; font-style: normal; font-weight: 400; font-size: 16px; line-height: 1; color: #141721; } @media only screen and (max-width: 1599px) { .blog__sidebar-subscribe input { margin-bottom: 8px; } } .blog__sidebar-subscribe input::placeholder { color: #757575; } .article__bottom { margin-top: 80px; } @media only screen and (max-width: 1599px) { .article__bottom { margin-top: 50px; } } .article h2 { margin-bottom: 20px; } @media only screen and (max-width: 1599px) { .article h2 { margin-bottom: 15px; } } .article h3 { display: block; font-family: 'Poppins', sans-serif; font-style: normal; font-weight: 600; font-size: 22px; line-height: 1.3; color: #464646; margin: 26px 0 12px 0; } @media only screen and (max-width: 1599px) { .article h3 { font-size: 22px; margin: 20px 0 15px 0; } } .article h3:first-child { margin-top: 0; } @media only screen and (max-width: 767px) { .article h3 { font-size: 20px; } } .article p { display: block; font-family: 'Poppins', sans-serif; font-style: normal; font-weight: 400; font-size: 20px; line-height: 1.5; color: #464646; margin-bottom: 20px; } @media only screen and (max-width: 1599px) { .article p { font-size: 18px; margin-bottom: 15px; } } @media only screen and (max-width: 767px) { .article p { font-size: 16px; } } .article iframe { display: block; width: 100%; height: 480px; margin: 32px 0; } @media only screen and (max-width: 1599px) { .article iframe { height: 400px; margin: 20px 0; } } @media only screen and (max-width: 599px) { .article iframe { height: 220px; } } .about { background-color: #016D71; } .about__content { padding: 120px 0; text-align: center; } @media only screen and (max-width: 1599px) { .about__content { padding: 90px 0; } } @media only screen and (max-width: 1023px) { .about__content { padding: 80px 0; } } @media only screen and (max-width: 599px) { .about__content { padding: 70px 0; } } .about__content .main__title { max-width: 1100px; margin: 0 auto; line-height: .8; } @media only screen and (max-width: 1599px) { .about__content .main__title { line-height: .8; max-width: 1040px; } } .about__content .main__subtitle { display: inline-block; margin-top: 40px; border-bottom: 1px solid transparent; transition-property: border-bottom-color; transition-duration: .3s; } @media only screen and (max-width: 1599px) { .about__content .main__subtitle { margin-top: 20px; } } .about__content .main__subtitle:hover { border-bottom-color: #fff; } .about .main__text { max-width: 810px; margin: 30px auto 0 auto; } .about-description__content { padding: 90px 0 45px 0; text-align: center; } @media only screen and (max-width: 1599px) { .about-description__content { padding: 70px 0; } } @media only screen and (max-width: 599px) { .about-description__content { padding: 60px 0; } } .about-description__content .main__text { max-width: 810px; margin: 30px auto 0 auto; } @media only screen and (max-width: 1599px) { .about-description__content .main__text { margin-top: 26px; max-width: 768px; } } .team__content { padding: 45px 0 90px 0; } @media only screen and (max-width: 1599px) { .team__content { padding: 30px 0 75px 0; } } .team__inners { display: flex; align-items: stretch; flex-wrap: wrap; margin: 30px -14px -14px -14px; } @media only screen and (max-width: 1599px) { .team__inners { max-width: 1000px; margin: 35px auto 0 auto; } } @media only screen and (max-width: 1200px) { .team__inners { margin: 20px -10px -10px -10px; } } @media only screen and (max-width: 500px) { .team__inners { display: block; margin: 35px 0 0 0; } } .team__inner { flex: 0 0 calc(33.3333333% - 28px); margin: 14px; position: relative; overflow: hidden; cursor: pointer; } @media only screen and (max-width: 1599px) { .team__inner { flex: 0 0 calc(33.3333333% - 20px); margin: 10px; } } @media only screen and (max-width: 900px) { .team__inner { flex: 0 0 calc(50% - 20px); margin: 10px; } } @media only screen and (max-width: 500px) { .team__inner { margin: 0 0 20px 0; } .team__inner:last-child { margin-bottom: 0; } } .team__inner-img { width: 100%; display: block; } .team__inner-text { position: absolute; top: 50%; left: 50%; width: 100%; height: 100%; transform: translate(-50%, -50%) scale(0) rotate(-90deg); transition-property: transform; transition-duration: .5s; z-index: 1; padding: 30px; background-color: #000; border-radius: 15px; display: flex; flex-direction: column; align-items: center; justify-content: center; } @media only screen and (max-width: 1599px) { .team__inner-text { border-radius: 12px; padding: 28px; } } @media only screen and (max-width: 1200px) { .team__inner-text { border-radius: 10px; padding: 20px; } } .team__inner-text p { display: block; text-align: center; font-style: normal; font-weight: 400; font-size: 20px; line-height: 1.4; color: #fff; margin-bottom: 16px; text-transform: uppercase; } .team__inner-text p:last-child { margin-bottom: 0; } @media only screen and (max-width: 1599px) { .team__inner-text p { font-size: 18px; } } @media only screen and (max-width: 1200px) { .team__inner-text p { font-size: 16px; } } .team__inner:hover .team__inner-text { transform: translate(-50%, -50%) scale(0.976) rotate(0deg); } .ethics { background-color: #D9FEFF; } .ethics__content { padding: 120px 0; } @media only screen and (max-width: 1599px) { .ethics__content { padding: 90px 0; } } @media only screen and (max-width: 1023px) { .ethics__content { padding: 75px 0; } } .ethics__holder { display: flex; align-items: center; } @media only screen and (max-width: 1023px) { .ethics__holder { display: block; } } .ethics__description { flex: 1 1 auto; padding-right: 80px; } @media only screen and (max-width: 1100px) { .ethics__description { padding-right: 30px; } } @media only screen and (max-width: 1023px) { .ethics__description { padding: 0 0 30px 0; } } .ethics__description .main__text { margin-top: 40px; line-height: 1.5; max-width: 590px; } @media only screen and (max-width: 1599px) { .ethics__description .main__text { margin-top: 30px; line-height: 1.4; } } @media only screen and (max-width: 1023px) { .ethics__description .main__text { max-width: 100%; margin-top: 25px; } } @media only screen and (max-width: 599px) { .ethics__description .main__text { margin-top: 20px; } } .ethics__inners { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; margin: -16px; flex: 0 0 44%; } @media only screen and (max-width: 1599px) { .ethics__inners { margin: -11px; } } @media only screen and (max-width: 599px) { .ethics__inners { margin: -5px; } } .ethics__inner { margin: 16px; flex: 0 0 auto; display: inline-block; font-family: 'Alumni Sans', sans-serif; font-style: normal; font-weight: 700; font-size: 36px; line-height: 1; text-align: center; text-transform: uppercase; color: #005F5F; padding: 12px 44px; background-color: #5CFFB2; border: 1px solid #163939; box-shadow: 8px 8px 0 #163939; border-radius: 40px; } @media only screen and (max-width: 1599px) { .ethics__inner { font-size: 28px; padding: 10px 20px; margin: 11px; } } @media only screen and (max-width: 599px) { .ethics__inner { margin: 5px; font-size: 14px; padding: 6px 20px; box-shadow: 3px 3px 0 #163939; } } .info-bottom__content { padding: 90px 0; } @media only screen and (max-width: 1599px) { .info-bottom__content { padding: 70px 0; } } @media only screen and (max-width: 599px) { .info-bottom__content { padding: 60px 0; } } .info-bottom p { margin-bottom: 20px; } @media only screen and (max-width: 1599px) { .info-bottom p { margin-bottom: 15px; } } .info-bottom p:last-child { margin-bottom: 0; } .text-info__content { padding: 160px 0; } @media only screen and (max-width: 1599px) { .text-info__content { padding: 80px 0; } } @media only screen and (max-width: 767px) { .text-info__content { padding: 60px 0; } } .text-info__content h3 { display: block; font-family: 'Alumni Sans', sans-serif; font-style: normal; font-weight: 800; font-size: 42px; line-height: 1; text-transform: uppercase; color: #2B2B2B; margin-top: 100px; } @media only screen and (max-width: 1599px) { .text-info__content h3 { font-size: 38px; margin-top: 60px; } } @media only screen and (max-width: 767px) { .text-info__content h3 { margin-top: 40px; } } .text-info__content h3:first-child { margin-top: 0; } .text-info__content p { margin-top: 20px; display: block; font-family: 'Poppins', sans-serif; font-style: normal; font-weight: 400; font-size: 20px; line-height: 1.5; color: #2B2B2B; } @media only screen and (max-width: 1599px) { .text-info__content p { font-size: 18px; margin-top: 15px; } } @media only screen and (max-width: 767px) { .text-info__content p { font-size: 16px; } } .text-info__content .btn-green { display: block; max-width: 210px; margin: 50px auto 0 auto; } .section-404 { background-color: #593FC3; min-height: 100vh; } .section-404__content { padding: 100px 0 80px 0; } @media only screen and (max-width: 1023px) { .section-404__content { padding: 100px 0 60px 0; } } .section-404__img { display: block; max-width: 590px; width: 100%; margin: 0 auto; } @media only screen and (max-width: 1599px) { .section-404__img { max-width: 480px; } } .section-404 p { max-width: 590px; margin: 30px auto 0 auto; text-align: center; } @media only screen and (max-width: 1599px) { .section-404 p { max-width: 480px; margin-top: 20px; } } .section-404__links { display: flex; align-items: center; max-width: 600px; margin: 20px auto 0 auto; } @media only screen and (max-width: 1599px) { .section-404__links { max-width: 480px; } } @media only screen and (max-width: 599px) { .section-404__links { display: block; } } .section-404__links a { flex: 1 1 33.3333333%; margin: 8px; display: inline-block; background-color: #005F5F; border-radius: 16px; font-family: 'Poppins', sans-serif; font-style: normal; font-weight: 400; font-size: 16px; line-height: 1.1; text-align: center; text-transform: capitalize; color: #fff; padding: 19px 20px; transition-property: opacity; transition-duration: .3s; } @media only screen and (max-width: 599px) { .section-404__links a { width: 100%; display: block; margin: 0 0 10px 0; } .section-404__links a:last-child { margin-bottom: 0; } } .section-404__links a:hover { opacity: .8; } .contact-us__content { padding: 60px 0 0 0; } .contact-us__form { display: block; background-color: rgba(211, 223, 226, 0.5); padding: 28px 90px; } @media only screen and (max-width: 1023px) { .contact-us__form { padding: 28px 45px; } } @media only screen and (max-width: 767px) { .contact-us__form { padding: 26px 20px; } } .contact-us__title { display: block; font-family: 'Poppins', sans-serif; font-style: normal; font-weight: 400; font-size: 36px; line-height: 1.2; color: #FA2685; } @media only screen and (max-width: 767px) { .contact-us__title { font-size: 32px; } } .contact-us__fields { display: flex; align-items: flex-start; flex-wrap: wrap; margin: 0 -18px -16px -18px; } @media only screen and (max-width: 767px) { .contact-us__fields { display: block; margin: 0; } } .contact-us__field { flex: 0 0 100%; padding: 16px 18px; } @media only screen and (max-width: 767px) { .contact-us__field { padding: 15px 0 0 0; } } .contact-us__field.action { display: flex; justify-content: flex-end; } .contact-us__field.w50 { flex: 0 0 50%; } .contact-us__field input { display: block; width: 100%; height: 48px; border-radius: 5px; font-family: 'Poppins', sans-serif; font-style: normal; font-weight: 400; font-size: 16px; line-height: 24px; color: #2B2E33; background-color: #fff; border: 1px solid #BCBCBC; padding: 0 20px; } @media only screen and (max-width: 767px) { .contact-us__field input { font-size: 15px; } } .contact-us__field input[type=email] { padding-left: 56px; background-image: url("../images/icon-em.svg"); background-repeat: no-repeat; background-position: center left 20px; } @media only screen and (max-width: 767px) { .contact-us__field input[type=email] { background-position: center left 15px; padding-left: 46px; } } .contact-us__field input::placeholder { color: #D8D8D8; } .contact-us__field textarea { display: block; width: 100%; height: 124px; border-radius: 5px; font-family: 'Poppins', sans-serif; font-style: normal; font-weight: 400; font-size: 16px; line-height: 24px; color: #2B2E33; background-color: #fff; border: 1px solid #BCBCBC; padding: 12px 20px; resize: none; } @media only screen and (max-width: 767px) { .contact-us__field textarea { font-size: 15px; } } .contact-us__field textarea::placeholder { color: #D8D8D8; } .contact-us__field .btn { position: relative; max-width: 328px; width: 100%; height: 48px; background: linear-gradient(90deg, #5CE1E6 0%, #FA2685 100%); border-radius: 5px; } .contact-us__field .btn input { width: 100%; height: 100%; font-family: 'Poppins', sans-serif; font-style: normal; font-weight: 400; font-size: 24px; line-height: 1; text-align: center; color: #fff; border: 0; background-color: transparent; } @media only screen and (max-width: 767px) { .contact-us__field .btn input { font-size: 22px; } } .footer { background-color: #020202; } .footer__content { padding: 90px 0; } @media only screen and (max-width: 1599px) { .footer__content { padding: 75px 0; } } @media only screen and (max-width: 1023px) { .footer__content { padding: 64px 40px; } } @media only screen and (max-width: 767px) { .footer__content { padding: 64px 0; } } .footer__inners { display: flex; align-items: flex-start; margin: -15px; } @media only screen and (max-width: 1023px) { .footer__inners { display: block; margin: 0; } } .footer__inner { flex: 0 0 25%; padding: 15px; } @media only screen and (max-width: 1023px) { .footer__inner { padding: 0; } } @media only screen and (max-width: 1023px) { .footer__inner--btn { padding: 16px 30px 16px 0; cursor: pointer; border-bottom: 1px solid #fff; position: relative; color: #fff; } .footer__inner--btn::after { position: absolute; top: 16px; right: 0; content: ''; width: 24px; height: 24px; background-image: url("../images/icon-drop-white.svg"); background-repeat: no-repeat; background-size: contain; transition-property: transform; transition-duration: .3s; } .footer__inner--btn.is-open::after { transform: rotate(180deg); } } .footer__inner:first-child { order: 4; } @media only screen and (max-width: 1023px) { .footer__inner:first-child { display: flex; align-items: flex-start; flex-wrap: wrap; margin: 0 -20px; } } @media only screen and (max-width: 767px) { .footer__inner:first-child { display: block; margin: 0; } } @media only screen and (max-width: 1023px) { .footer__inner-block { flex: 0 0 50%; padding: 0 20px; } } @media only screen and (max-width: 767px) { .footer__inner-block { padding: 0 0 20px 0; } .footer__inner-block .apps-logos { justify-content: flex-start; } } .footer__inner-boxes { margin-top: 17px; } @media only screen and (max-width: 1023px) { .footer__inner-boxes { display: none; } } .footer__inner-box { margin-bottom: 14px; } .footer__inner-box a { display: inline; font-style: normal; font-weight: 400; font-size: 16px; line-height: 1.1; color: #fff; border-bottom: 1px solid transparent; transition-property: border-bottom-color; transition-duration: .3s; } @media only screen and (max-width: 1599px) { .footer__inner-box a { font-size: 15px; } } .footer__inner-box a:hover { border-bottom-color: #fff; } .footer__inner-box .main__subtitle { margin-bottom: 4px; } .footer__inner-box .main__text { margin-bottom: 5px; } .footer__inner-box .main__text:last-child { margin-bottom: 0; } .footer__inner-box:last-child { margin-bottom: 0; } .footer__items { display: block; margin-top: 16px; } @media only screen and (max-width: 1023px) { .footer__items { display: none; } } .footer__items li { display: block; margin-bottom: 6px; } .footer__items li:last-child { margin-bottom: 0; } .footer__items li a { display: inline; font-style: normal; font-weight: 400; font-size: 16px; line-height: 1.1; color: #fff; border-bottom: 1px solid transparent; transition-property: border-bottom-color; transition-duration: .3s; } @media only screen and (max-width: 1599px) { .footer__items li a { font-size: 15px; } } .footer__items li a:hover { border-bottom-color: #fff; } .footer__social { display: flex; align-items: center; margin: 8px -4px 28px -4px; } .footer__social li { display: inline-block; flex: 0 0 auto; margin: 4px; } .footer__social li a { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; background-color: #fff; border-radius: 4px; padding: 5px; transition-property: background-color; transition-duration: .3s; } .footer__social li a:hover { background-color: rgba(255, 255, 255, 0.8); } .footer__social li a img { max-width: 100%; max-height: 100%; } .footer__payment { display: flex; align-items: center; flex-wrap: wrap; margin: 15px -12px 0 -12px; } .footer__payment li { display: inline-block; flex: 0 0 calc(20% - 24px); margin: 0 12px; } .footer__payment li img { max-width: 100%; } .footer__bottom { margin-top: 40px; } @media only screen and (max-width: 1599px) { .footer__bottom { margin-top: 30px; } } .footer__bottom .main__text { line-height: 1.8; }