@charset "UTF-8"; .choices[data-type*="select-one"] .choices__button { background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjEiIGhlaWdodD0iMjEiIHZpZXdCb3g9IjAgMCAyMSAyMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBmaWxsPSIjMDAwIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjxwYXRoIGQ9Ik0yLjU5Mi4wNDRsMTguMzY0IDE4LjM2NC0yLjU0OCAyLjU0OEwuMDQ0IDIuNTkyeiIvPjxwYXRoIGQ9Ik0wIDE4LjM2NEwxOC4zNjQgMGwyLjU0OCAyLjU0OEwyLjU0OCAyMC45MTJ6Ii8+PC9nPjwvc3ZnPg==); padding: 0; background-size: 8px; position: absolute; top: 50%; right: 0; margin-top: -10px; margin-right: 25px; height: 20px; width: 20px; border-radius: 10em; opacity: 0.25; } .choices[data-type*="select-multiple"] .choices__button, .choices[data-type*="text"] .choices__button { position: relative; display: inline-block; margin: 0-4px 0 8px; padding-left: 16px; border-left: 1px solid #003642; background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjEiIGhlaWdodD0iMjEiIHZpZXdCb3g9IjAgMCAyMSAyMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBmaWxsPSIjRkZGIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjxwYXRoIGQ9Ik0yLjU5Mi4wNDRsMTguMzY0IDE4LjM2NC0yLjU0OCAyLjU0OEwuMDQ0IDIuNTkyeiIvPjxwYXRoIGQ9Ik0wIDE4LjM2NEwxOC4zNjQgMGwyLjU0OCAyLjU0OEwyLjU0OCAyMC45MTJ6Ii8+PC9nPjwvc3ZnPg==); background-size: 8px; width: 8px; line-height: 1; opacity: 0.75; border-radius: 0; } @font-face { font-family: Arial Italic; src: url(../fonts/arial/ARIALI1.TTF); font-weight: 400; font-style: italic; } @font-face { font-family: Arial; src: url(../fonts/arial/ARIAL.TTF); font-weight: 400; font-style: normal; } @font-face { font-family: Noto Sans; src: url(../fonts/Noto_Sans/NotoSans-Thin.ttf); font-weight: 100; font-style: normal; } @font-face { font-family: Noto Sans; src: url(../fonts/Noto_Sans/NotoSans-Regular.ttf); font-weight: 400; font-style: normal; } @font-face { font-family: Noto Sans; src: url(../fonts/Noto_Sans/NotoSans-Light.ttf); font-weight: 300; font-style: normal; } .preloader__logo { background: url(../img/picture/logo.svg) no-repeat center center; background-size: contain; width: 330px; height: 35px; animation: 2s linear infinite opacity; } .choices[data-type*="select-one"]:after { background-image: url('data:image/svg+xml, '); background-repeat: no-repeat; height: clamp(0.375rem, 0.574vw + -0.064rem, 0.625rem); width: clamp(0.688rem, 1.291vw + -0.299rem, 1.25rem); color: #fff; background-size: contain; border: unset; right: clamp(0.938rem, 0.717vw + 0.389rem, 1.25rem); } .select--filter .choices[data-type*="select-one"]:after { background-image: url('data:image/svg+xml, '); height: 10px; background-size: contain; width: 20px; color: #fff; right: unset; left: 20px; } .home__img { width: 40%; height: clamp(18.75rem, 18.651vw + 4.493rem, 26.875rem); background: url(../img/picture/1c.png) no-repeat 0-30px; background-size: contain; position: relative; z-index: 1; mix-blend-mode: luminosity; } .calculator__img:before { content: ""; position: absolute; bottom: 0; right: 0; width: 100%; height: 100%; background: url(../img/picture/calculator-img/bl_01.svg) no-repeat center center; background-size: contain; filter: blur(50px); } .title { font-family: Noto Sans; font-weight: 100; font-size: clamp(1.375rem, 4.735vw + -2.244rem, 3.438rem); color: #fff; } .title--big { font-size: clamp(3.125rem, 10.043vw + -4.552rem, 7.5rem); color: transparent; -webkit-background-clip: text; background-clip: text; background-image: linear-gradient(91.83deg, #02c295 8.22%, #002565 96.97%); } .title--green { color: #02c295; } .title--grey { color: #c4c4c4; } .title--white { background-image: linear-gradient(270deg, #fff, #656565); } .title--orange { color: #ff5b46; } .choices[data-type*="select-one"] .choices__button { background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjEiIGhlaWdodD0iMjEiIHZpZXdCb3g9IjAgMCAyMSAyMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBmaWxsPSIjMDAwIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjxwYXRoIGQ9Ik0yLjU5Mi4wNDRsMTguMzY0IDE4LjM2NC0yLjU0OCAyLjU0OEwuMDQ0IDIuNTkyeiIvPjxwYXRoIGQ9Ik0wIDE4LjM2NEwxOC4zNjQgMGwyLjU0OCAyLjU0OEwyLjU0OCAyMC45MTJ6Ii8+PC9nPjwvc3ZnPg==); padding: 0; background-size: 8px; position: absolute; top: 50%; right: 0; margin-top: -10px; margin-right: 25px; height: 20px; width: 20px; border-radius: 10em; opacity: 0.25; } .choices[data-type*="select-multiple"] .choices__button, .choices[data-type*="text"] .choices__button { position: relative; display: inline-block; margin: 0-4px 0 8px; padding-left: 16px; border-left: 1px solid #003642; background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjEiIGhlaWdodD0iMjEiIHZpZXdCb3g9IjAgMCAyMSAyMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBmaWxsPSIjRkZGIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjxwYXRoIGQ9Ik0yLjU5Mi4wNDRsMTguMzY0IDE4LjM2NC0yLjU0OCAyLjU0OEwuMDQ0IDIuNTkyeiIvPjxwYXRoIGQ9Ik0wIDE4LjM2NEwxOC4zNjQgMGwyLjU0OCAyLjU0OEwyLjU0OCAyMC45MTJ6Ii8+PC9nPjwvc3ZnPg==); background-size: 8px; width: 8px; line-height: 1; opacity: 0.75; border-radius: 0; } @font-face { font-family: Arial Italic; src: url(../fonts/arial/ARIALI1.TTF); font-weight: 400; font-style: italic; } @font-face { font-family: Arial; src: url(../fonts/arial/ARIAL.TTF); font-weight: 400; font-style: normal; } @font-face { font-family: Noto Sans; src: url(../fonts/Noto_Sans/NotoSans-Thin.ttf); font-weight: 100; font-style: normal; } @font-face { font-family: Noto Sans; src: url(../fonts/Noto_Sans/NotoSans-Regular.ttf); font-weight: 400; font-style: normal; } @font-face { font-family: Noto Sans; src: url(../fonts/Noto_Sans/NotoSans-Light.ttf); font-weight: 300; font-style: normal; } .preloader__logo { background: url(../img/picture/logo.svg) no-repeat center center; background-size: contain; width: 330px; height: 35px; animation: 2s linear infinite opacity; } .choices[data-type*="select-one"]:after { background-image: url('data:image/svg+xml, '); background-repeat: no-repeat; height: clamp(0.375rem, 0.574vw + -0.064rem, 0.625rem); width: clamp(0.688rem, 1.291vw + -0.299rem, 1.25rem); color: #fff; background-size: contain; border: unset; right: clamp(0.938rem, 0.717vw + 0.389rem, 1.25rem); } .select--filter .choices[data-type*="select-one"]:after { background-image: url('data:image/svg+xml, '); height: 10px; background-size: contain; width: 20px; color: #fff; right: unset; left: 20px; } .home__img { width: 40%; height: clamp(18.75rem, 18.651vw + 4.493rem, 26.875rem); background: url(../img/picture/1c.png) no-repeat 0-30px; background-size: contain; position: relative; z-index: 1; mix-blend-mode: luminosity; } .calculator__img:before { content: ""; position: absolute; bottom: 0; right: 0; width: 100%; height: 100%; background: url(../img/picture/calculator-img/bl_01.svg) no-repeat center center; background-size: contain; filter: blur(50px); } .btn { border: 0; outline: 0; display: block; cursor: pointer; padding: clamp(0.75rem, 1.722vw + -0.566rem, 1.5rem) clamp(1.5rem, 5.882vw + -2.996rem, 4.063rem); font-size: clamp(0.75rem, 1.148vw + -0.127rem, 1.25rem); font-family: Arial; font-weight: 400; color: #fff; text-align: center; position: relative; background-color: #000; border-radius: 120px; } .btn__text { position: relative; z-index: 2; } .btn--gradient { --x: 50%; --y: 50%; } .btn--gradient:after { position: absolute; content: ""; z-index: 1; inset: 0; opacity: 0; transition: opacity 0.38s ease-in-out; border-radius: 120px; background-image: radial-gradient( 75% 150%at var(--x) var(--y), #259d8f, #259d8f 0%, #184e4a 46%, #000 100% ); } .btn--gradient:before { content: ""; position: absolute; border-radius: 120px; border: 3px solid transparent; background: linear-gradient(180deg, #01a7b8, #01ab9e, #03b58c); top: -3px; left: -3px; width: calc(100% + 6px); z-index: -1; height: calc(100% + 6px); } .btn--gradient:hover:after { opacity: 1; } .btn--gradient .btn__bg { inset: 0; position: absolute; border-radius: 120px; opacity: 0; z-index: -1; } .btn--gradientRed { --x: 50%; --y: 50%; } .btn--gradientRed:after { position: absolute; content: ""; z-index: 1; inset: 0; opacity: 0; transition: opacity 0.38s ease-in-out; border-radius: 120px; background-image: radial-gradient( 45% 120%at var(--x) var(--y), #ff703b, #ffce0b 0%, #ffb43b 20%, #000 100% ); } .btn--gradientRed:before { content: ""; position: absolute; border-radius: 120px; border: 3px solid transparent; background: #ff5b46; top: -3px; left: -3px; width: calc(100% + 6px); z-index: -1; height: calc(100% + 6px); } .btn--gradientRed:hover:after { opacity: 1; } .btn--gradientRed .btn__bg { inset: 0; position: absolute; border-radius: 120px; opacity: 0; z-index: -1; } .btn--disabled { cursor: no-drop; } .btn--disabled:after { content: none; } .btn--disabled:before { background: #c4c4c4; } .btn--small { padding: clamp(0.75rem, 0.574vw + 0.311rem, 1rem) clamp(1.25rem, 0.861vw + 0.592rem, 1.625rem); border: 1px solid #e7e7e7; transition: background-color 0.38s ease-in-out; } .btn--small:hover { background-color: #05848f; } .btn--orange { border: 1px solid #c4c4c4; color: #c4c4c4; transition: background-color 0.38s ease-in-out, border 0.38s ease-in-out, color 0.38s ease-in-out; } .btn--orange:hover { background-color: #ff5b46; border: 1px solid #e7e7e7; color: #fff; } .btn--active { background-color: #05848f; } .btn--activeOrange { background-color: #ff5b46; border: 1px solid #e7e7e7; color: #fff; } .btn--submit { display: block; } .choices[data-type*="select-one"] .choices__button { background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjEiIGhlaWdodD0iMjEiIHZpZXdCb3g9IjAgMCAyMSAyMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBmaWxsPSIjMDAwIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjxwYXRoIGQ9Ik0yLjU5Mi4wNDRsMTguMzY0IDE4LjM2NC0yLjU0OCAyLjU0OEwuMDQ0IDIuNTkyeiIvPjxwYXRoIGQ9Ik0wIDE4LjM2NEwxOC4zNjQgMGwyLjU0OCAyLjU0OEwyLjU0OCAyMC45MTJ6Ii8+PC9nPjwvc3ZnPg==); padding: 0; background-size: 8px; position: absolute; top: 50%; right: 0; margin-top: -10px; margin-right: 25px; height: 20px; width: 20px; border-radius: 10em; opacity: 0.25; } .choices[data-type*="select-multiple"] .choices__button, .choices[data-type*="text"] .choices__button { position: relative; display: inline-block; margin: 0-4px 0 8px; padding-left: 16px; border-left: 1px solid #003642; background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjEiIGhlaWdodD0iMjEiIHZpZXdCb3g9IjAgMCAyMSAyMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBmaWxsPSIjRkZGIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjxwYXRoIGQ9Ik0yLjU5Mi4wNDRsMTguMzY0IDE4LjM2NC0yLjU0OCAyLjU0OEwuMDQ0IDIuNTkyeiIvPjxwYXRoIGQ9Ik0wIDE4LjM2NEwxOC4zNjQgMGwyLjU0OCAyLjU0OEwyLjU0OCAyMC45MTJ6Ii8+PC9nPjwvc3ZnPg==); background-size: 8px; width: 8px; line-height: 1; opacity: 0.75; border-radius: 0; } @font-face { font-family: Arial Italic; src: url(../fonts/arial/ARIALI1.TTF); font-weight: 400; font-style: italic; } @font-face { font-family: Arial; src: url(../fonts/arial/ARIAL.TTF); font-weight: 400; font-style: normal; } @font-face { font-family: Noto Sans; src: url(../fonts/Noto_Sans/NotoSans-Thin.ttf); font-weight: 100; font-style: normal; } @font-face { font-family: Noto Sans; src: url(../fonts/Noto_Sans/NotoSans-Regular.ttf); font-weight: 400; font-style: normal; } @font-face { font-family: Noto Sans; src: url(../fonts/Noto_Sans/NotoSans-Light.ttf); font-weight: 300; font-style: normal; } .preloader__logo { background: url(../img/picture/logo.svg) no-repeat center center; background-size: contain; width: 330px; height: 35px; animation: 2s linear infinite opacity; } .choices[data-type*="select-one"]:after { background-image: url('data:image/svg+xml, '); background-repeat: no-repeat; height: clamp(0.375rem, 0.574vw + -0.064rem, 0.625rem); width: clamp(0.688rem, 1.291vw + -0.299rem, 1.25rem); color: #fff; background-size: contain; border: unset; right: clamp(0.938rem, 0.717vw + 0.389rem, 1.25rem); } .select--filter .choices[data-type*="select-one"]:after { background-image: url('data:image/svg+xml, '); height: 10px; background-size: contain; width: 20px; color: #fff; right: unset; left: 20px; } .home__img { width: 40%; height: clamp(18.75rem, 18.651vw + 4.493rem, 26.875rem); background: url(../img/picture/1c.png) no-repeat 0-30px; background-size: contain; position: relative; z-index: 1; mix-blend-mode: luminosity; } .calculator__img:before { content: ""; position: absolute; bottom: 0; right: 0; width: 100%; height: 100%; background: url(../img/picture/calculator-img/bl_01.svg) no-repeat center center; background-size: contain; filter: blur(50px); } input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, input:-webkit-autofill:active { box-shadow: 0 0 0 30px #000 inset !important; -webkit-text-fill-color: #fff !important; -webkit-tap-highlight-color: #fff !important; } .input { position: relative; } .input__element { width: 100%; background-color: transparent; border-bottom: 2px solid rgba(255, 255, 255, 0.2); padding: 8px 0; font-size: clamp(0.875rem, 0.861vw + 0.217rem, 1.25rem); outline: 0; color: #fff; } .input__element:focus + .input__label, .input__element:not(:placeholder-shown) + .input__label { top: -15px; font-size: 12px; color: #c4c4c4; } .input__element:focus { border-bottom: 2px solid transparent; border-image: linear-gradient(to right, #009387, #02c295, #75b3d9) 1; } .input__element--orange:focus { border-image: linear-gradient(270deg, #ff5b46, #ffde02) 1; } .input__label { position: absolute; left: 0; top: 8px; color: #c4c4c4; transition: all 0.38s ease-in-out; font-size: clamp(0.875rem, 0.861vw + 0.217rem, 1.25rem); } .choices[data-type*="select-one"] .choices__button { background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjEiIGhlaWdodD0iMjEiIHZpZXdCb3g9IjAgMCAyMSAyMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBmaWxsPSIjMDAwIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjxwYXRoIGQ9Ik0yLjU5Mi4wNDRsMTguMzY0IDE4LjM2NC0yLjU0OCAyLjU0OEwuMDQ0IDIuNTkyeiIvPjxwYXRoIGQ9Ik0wIDE4LjM2NEwxOC4zNjQgMGwyLjU0OCAyLjU0OEwyLjU0OCAyMC45MTJ6Ii8+PC9nPjwvc3ZnPg==); padding: 0; background-size: 8px; position: absolute; top: 50%; right: 0; margin-top: -10px; margin-right: 25px; height: 20px; width: 20px; border-radius: 10em; opacity: 0.25; } .choices[data-type*="select-multiple"] .choices__button, .choices[data-type*="text"] .choices__button { position: relative; display: inline-block; margin: 0-4px 0 8px; padding-left: 16px; border-left: 1px solid #003642; background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjEiIGhlaWdodD0iMjEiIHZpZXdCb3g9IjAgMCAyMSAyMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBmaWxsPSIjRkZGIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjxwYXRoIGQ9Ik0yLjU5Mi4wNDRsMTguMzY0IDE4LjM2NC0yLjU0OCAyLjU0OEwuMDQ0IDIuNTkyeiIvPjxwYXRoIGQ9Ik0wIDE4LjM2NEwxOC4zNjQgMGwyLjU0OCAyLjU0OEwyLjU0OCAyMC45MTJ6Ii8+PC9nPjwvc3ZnPg==); background-size: 8px; width: 8px; line-height: 1; opacity: 0.75; border-radius: 0; } @font-face { font-family: Arial Italic; src: url(../fonts/arial/ARIALI1.TTF); font-weight: 400; font-style: italic; } @font-face { font-family: Arial; src: url(../fonts/arial/ARIAL.TTF); font-weight: 400; font-style: normal; } @font-face { font-family: Noto Sans; src: url(../fonts/Noto_Sans/NotoSans-Thin.ttf); font-weight: 100; font-style: normal; } @font-face { font-family: Noto Sans; src: url(../fonts/Noto_Sans/NotoSans-Regular.ttf); font-weight: 400; font-style: normal; } @font-face { font-family: Noto Sans; src: url(../fonts/Noto_Sans/NotoSans-Light.ttf); font-weight: 300; font-style: normal; } .preloader__logo { background: url(../img/picture/logo.svg) no-repeat center center; background-size: contain; width: 330px; height: 35px; animation: 2s linear infinite opacity; } .choices[data-type*="select-one"]:after { background-image: url('data:image/svg+xml, '); background-repeat: no-repeat; height: clamp(0.375rem, 0.574vw + -0.064rem, 0.625rem); width: clamp(0.688rem, 1.291vw + -0.299rem, 1.25rem); color: #fff; background-size: contain; border: unset; right: clamp(0.938rem, 0.717vw + 0.389rem, 1.25rem); } .select--filter .choices[data-type*="select-one"]:after { background-image: url('data:image/svg+xml, '); height: 10px; background-size: contain; width: 20px; color: #fff; right: unset; left: 20px; } .home__img { width: 40%; height: clamp(18.75rem, 18.651vw + 4.493rem, 26.875rem); background: url(../img/picture/1c.png) no-repeat 0-30px; background-size: contain; position: relative; z-index: 1; mix-blend-mode: luminosity; } .calculator__img:before { content: ""; position: absolute; bottom: 0; right: 0; width: 100%; height: 100%; background: url(../img/picture/calculator-img/bl_01.svg) no-repeat center center; background-size: contain; filter: blur(50px); } .checkbox { width: 0; height: 0; } .checkbox:checked + .checkbox__label:after { content: ""; position: absolute; left: clamp(0.375rem, 0.072vw + 0.32rem, 0.406rem); top: clamp(0.125rem, 0.43vw + -0.204rem, 0.313rem); width: 6px; height: clamp(0.688rem, -0.287vw + 0.907rem, 0.563rem); border: solid #c4c4c4; border-width: 0 2px 2px 0; transform: rotate(45deg); } .checkbox--orange:checked + .checkbox__label { color: #ff5b46; } .checkbox--orange:checked + .checkbox__label:before { border-color: #ff5b46; } .checkbox--orange:checked + .checkbox__label:after { border-color: #ff5b46; } .checkbox__wrapper { display: flex; } .checkbox + .checkbox__label { position: relative; padding-left: clamp(2.125rem, -1.435vw + 3.222rem, 1.5rem); cursor: pointer; font-size: clamp(0.75rem, 1.148vw + -0.127rem, 1.25rem); } .checkbox + .checkbox__label:before { content: ""; position: absolute; left: 0; top: clamp(0rem, 0.43vw + -0.329rem, 0.188rem); width: 18px; height: 18px; border: 2px solid #c4c4c4; } .checkbox + .checkbox__label:after { content: ""; transition: all 0.2s ease; position: absolute; left: 0; } .checkbox__link { text-decoration: underline; transition: color 0.38s ease-in-out; } .checkbox__link:hover { color: #02c295; } .checkbox__link--orange:hover { color: #ff5b46; } .choices[data-type*="select-one"] .choices__button { background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjEiIGhlaWdodD0iMjEiIHZpZXdCb3g9IjAgMCAyMSAyMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBmaWxsPSIjMDAwIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjxwYXRoIGQ9Ik0yLjU5Mi4wNDRsMTguMzY0IDE4LjM2NC0yLjU0OCAyLjU0OEwuMDQ0IDIuNTkyeiIvPjxwYXRoIGQ9Ik0wIDE4LjM2NEwxOC4zNjQgMGwyLjU0OCAyLjU0OEwyLjU0OCAyMC45MTJ6Ii8+PC9nPjwvc3ZnPg==); padding: 0; background-size: 8px; position: absolute; top: 50%; right: 0; margin-top: -10px; margin-right: 25px; height: 20px; width: 20px; border-radius: 10em; opacity: 0.25; } .choices[data-type*="select-multiple"] .choices__button, .choices[data-type*="text"] .choices__button { position: relative; display: inline-block; margin: 0-4px 0 8px; padding-left: 16px; border-left: 1px solid #003642; background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjEiIGhlaWdodD0iMjEiIHZpZXdCb3g9IjAgMCAyMSAyMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBmaWxsPSIjRkZGIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjxwYXRoIGQ9Ik0yLjU5Mi4wNDRsMTguMzY0IDE4LjM2NC0yLjU0OCAyLjU0OEwuMDQ0IDIuNTkyeiIvPjxwYXRoIGQ9Ik0wIDE4LjM2NEwxOC4zNjQgMGwyLjU0OCAyLjU0OEwyLjU0OCAyMC45MTJ6Ii8+PC9nPjwvc3ZnPg==); background-size: 8px; width: 8px; line-height: 1; opacity: 0.75; border-radius: 0; } @font-face { font-family: Arial Italic; src: url(../fonts/arial/ARIALI1.TTF); font-weight: 400; font-style: italic; } @font-face { font-family: Arial; src: url(../fonts/arial/ARIAL.TTF); font-weight: 400; font-style: normal; } @font-face { font-family: Noto Sans; src: url(../fonts/Noto_Sans/NotoSans-Thin.ttf); font-weight: 100; font-style: normal; } @font-face { font-family: Noto Sans; src: url(../fonts/Noto_Sans/NotoSans-Regular.ttf); font-weight: 400; font-style: normal; } @font-face { font-family: Noto Sans; src: url(../fonts/Noto_Sans/NotoSans-Light.ttf); font-weight: 300; font-style: normal; } .preloader__logo { background: url(../img/picture/logo.svg) no-repeat center center; background-size: contain; width: 330px; height: 35px; animation: 2s linear infinite opacity; } .choices[data-type*="select-one"]:after { background-image: url('data:image/svg+xml, '); background-repeat: no-repeat; height: clamp(0.375rem, 0.574vw + -0.064rem, 0.625rem); width: clamp(0.688rem, 1.291vw + -0.299rem, 1.25rem); color: #fff; background-size: contain; border: unset; right: clamp(0.938rem, 0.717vw + 0.389rem, 1.25rem); } .select--filter .choices[data-type*="select-one"]:after { background-image: url('data:image/svg+xml, '); height: 10px; background-size: contain; width: 20px; color: #fff; right: unset; left: 20px; } .home__img { width: 40%; height: clamp(18.75rem, 18.651vw + 4.493rem, 26.875rem); background: url(../img/picture/1c.png) no-repeat 0-30px; background-size: contain; position: relative; z-index: 1; mix-blend-mode: luminosity; } .calculator__img:before { content: ""; position: absolute; bottom: 0; right: 0; width: 100%; height: 100%; background: url(../img/picture/calculator-img/bl_01.svg) no-repeat center center; background-size: contain; filter: blur(50px); } .radio { display: flex; align-items: center; gap: 12px; } .radio--orange .radio__element:checked { border: 4px solid #ff5b46; background-color: #3b3b3b; } .radio--orange .radio__element:checked ~ .radio__label { color: #ff5b46; } .radio__label { cursor: pointer; font-size: clamp(0.875rem, 0.861vw + 0.217rem, 1.25rem); transition: color 0.38s ease-in-out; } .radio__element { appearance: none; padding: 0; print-color-adjust: exact; display: inline-block; vertical-align: middle; background-origin: border-box; user-select: none; flex-shrink: 0; height: 16px; width: 16px; background-color: #3b3b3b; border-radius: 50%; border: 2px solid #c4c4c4; cursor: pointer; transition: border 0.38s ease-in-out, background-color 0.38s ease-in-out; } .radio__element:checked { border: 4px solid #02c295; background-color: #05848f; } .radio__element:checked ~ .radio__label { color: #02c295; } @media (max-width: 576px) { .radio { margin-inline: unset; } } @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; } :host { position: relative; display: block; margin-left: auto; margin-right: auto; z-index: 1; } .swiper { margin-left: auto; margin-right: auto; position: relative; overflow: hidden; list-style: none; padding: 0; z-index: 1; display: block; } .swiper-vertical > .swiper-wrapper { flex-direction: column; } .swiper-wrapper { position: relative; width: 100%; height: 100%; z-index: 1; display: flex; transition-property: transform; transition-timing-function: var( --swiper-wrapper-transition-timing-function, initial ); box-sizing: content-box; } .swiper-android .swiper-slide, .swiper-ios .swiper-slide, .swiper-wrapper { transform: translateZ(0); } .swiper-horizontal { touch-action: pan-y; } .swiper-vertical { touch-action: pan-x; } .swiper-slide { flex-shrink: 0; width: 100%; height: 100%; position: relative; transition-property: transform; display: block; } .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-css-mode .swiper-wrapper { perspective: 1200px; } .swiper-3d .swiper-wrapper { transform-style: preserve-3d; } .swiper-3d { perspective: 1200px; } .swiper-3d .swiper-slide, .swiper-3d .swiper-cube-shadow { transform-style: preserve-3d; } .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-css-mode.swiper-horizontal > .swiper-wrapper { scroll-snap-type: x mandatory; } .swiper-css-mode.swiper-vertical > .swiper-wrapper { scroll-snap-type: y mandatory; } .swiper-css-mode.swiper-free-mode > .swiper-wrapper { scroll-snap-type: none; } .swiper-css-mode.swiper-free-mode > .swiper-wrapper > .swiper-slide { scroll-snap-align: none; } .swiper-css-mode.swiper-centered > .swiper-wrapper:before { content: ""; flex-shrink: 0; order: 9999; } .swiper-css-mode.swiper-centered > .swiper-wrapper > .swiper-slide { scroll-snap-align: center center; scroll-snap-stop: always; } .swiper-css-mode.swiper-centered.swiper-horizontal > .swiper-wrapper > .swiper-slide:first-child { margin-inline-start: var(--swiper-centered-offset-before); } .swiper-css-mode.swiper-centered.swiper-horizontal > .swiper-wrapper:before { height: 100%; min-height: 1px; width: var(--swiper-centered-offset-after); } .swiper-css-mode.swiper-centered.swiper-vertical > .swiper-wrapper > .swiper-slide:first-child { margin-block-start: var(--swiper-centered-offset-before); } .swiper-css-mode.swiper-centered.swiper-vertical > .swiper-wrapper:before { width: 100%; min-width: 1px; height: var(--swiper-centered-offset-after); } .swiper-3d .swiper-slide-shadow, .swiper-3d .swiper-slide-shadow-left, .swiper-3d .swiper-slide-shadow-right, .swiper-3d .swiper-slide-shadow-top, .swiper-3d .swiper-slide-shadow-bottom { position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; z-index: 10; } .swiper-3d .swiper-slide-shadow { background: #00000026; } .swiper-3d .swiper-slide-shadow-left { background-image: linear-gradient(to left, #00000080, #0000); } .swiper-3d .swiper-slide-shadow-right { background-image: linear-gradient(to right, #00000080, #0000); } .swiper-3d .swiper-slide-shadow-top { background-image: linear-gradient(to top, #00000080, #0000); } .swiper-3d .swiper-slide-shadow-bottom { background-image: linear-gradient(to bottom, #00000080, #0000); } .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:not(.swiper-watch-progress) .swiper-lazy-preloader, .swiper-watch-progress .swiper-slide-visible .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(0); } to { transform: rotate(360deg); } } .choices[data-type*="select-one"] .choices__button { background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjEiIGhlaWdodD0iMjEiIHZpZXdCb3g9IjAgMCAyMSAyMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBmaWxsPSIjMDAwIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjxwYXRoIGQ9Ik0yLjU5Mi4wNDRsMTguMzY0IDE4LjM2NC0yLjU0OCAyLjU0OEwuMDQ0IDIuNTkyeiIvPjxwYXRoIGQ9Ik0wIDE4LjM2NEwxOC4zNjQgMGwyLjU0OCAyLjU0OEwyLjU0OCAyMC45MTJ6Ii8+PC9nPjwvc3ZnPg==); padding: 0; background-size: 8px; position: absolute; top: 50%; right: 0; margin-top: -10px; margin-right: 25px; height: 20px; width: 20px; border-radius: 10em; opacity: 0.25; } .choices[data-type*="select-multiple"] .choices__button, .choices[data-type*="text"] .choices__button { position: relative; display: inline-block; margin: 0-4px 0 8px; padding-left: 16px; border-left: 1px solid #003642; background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjEiIGhlaWdodD0iMjEiIHZpZXdCb3g9IjAgMCAyMSAyMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBmaWxsPSIjRkZGIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjxwYXRoIGQ9Ik0yLjU5Mi4wNDRsMTguMzY0IDE4LjM2NC0yLjU0OCAyLjU0OEwuMDQ0IDIuNTkyeiIvPjxwYXRoIGQ9Ik0wIDE4LjM2NEwxOC4zNjQgMGwyLjU0OCAyLjU0OEwyLjU0OCAyMC45MTJ6Ii8+PC9nPjwvc3ZnPg==); background-size: 8px; width: 8px; line-height: 1; opacity: 0.75; border-radius: 0; } @font-face { font-family: Arial Italic; src: url(../fonts/arial/ARIALI1.TTF); font-weight: 400; font-style: italic; } @font-face { font-family: Arial; src: url(../fonts/arial/ARIAL.TTF); font-weight: 400; font-style: normal; } @font-face { font-family: Noto Sans; src: url(../fonts/Noto_Sans/NotoSans-Thin.ttf); font-weight: 100; font-style: normal; } @font-face { font-family: Noto Sans; src: url(../fonts/Noto_Sans/NotoSans-Regular.ttf); font-weight: 400; font-style: normal; } @font-face { font-family: Noto Sans; src: url(../fonts/Noto_Sans/NotoSans-Light.ttf); font-weight: 300; font-style: normal; } .preloader__logo { background: url(../img/picture/logo.svg) no-repeat center center; background-size: contain; width: 330px; height: 35px; animation: 2s linear infinite opacity; } .choices[data-type*="select-one"]:after { background-image: url('data:image/svg+xml, '); background-repeat: no-repeat; height: clamp(0.375rem, 0.574vw + -0.064rem, 0.625rem); width: clamp(0.688rem, 1.291vw + -0.299rem, 1.25rem); color: #fff; background-size: contain; border: unset; right: clamp(0.938rem, 0.717vw + 0.389rem, 1.25rem); } .select--filter .choices[data-type*="select-one"]:after { background-image: url('data:image/svg+xml, '); height: 10px; background-size: contain; width: 20px; color: #fff; right: unset; left: 20px; } .home__img { width: 40%; height: clamp(18.75rem, 18.651vw + 4.493rem, 26.875rem); background: url(../img/picture/1c.png) no-repeat 0-30px; background-size: contain; position: relative; z-index: 1; mix-blend-mode: luminosity; } .calculator__img:before { content: ""; position: absolute; bottom: 0; right: 0; width: 100%; height: 100%; background: url(../img/picture/calculator-img/bl_01.svg) no-repeat center center; background-size: contain; filter: blur(50px); } .textarea { position: relative; grid-column: span 2; } .textarea__element { width: 100%; background-color: transparent; border-bottom: 2px solid rgba(255, 255, 255, 0.2); font-size: clamp(0.875rem, 0.861vw + 0.217rem, 1.25rem); outline: 0; color: #fff; padding: 8px 0; height: clamp(2.188rem, 12.195vw + -7.134rem, 7.5rem); resize: none; } .textarea__element:focus + .textarea__label, .textarea__element:not(:placeholder-shown) + .textarea__label { top: -15px; font-size: 12px; color: #c4c4c4; } .textarea__element:focus { border-bottom: 2px solid transparent; border-image: linear-gradient(to right, #009387, #02c295, #75b3d9) 1; } .textarea__element--orange:focus { border-image: linear-gradient(270deg, #ff5b46, #ffde02) 1; } .textarea__label { position: absolute; left: 0; top: 8px; color: #c4c4c4; transition: all 0.38s ease-in-out; font-size: clamp(0.875rem, 0.861vw + 0.217rem, 1.25rem); } .choices[data-type*="select-one"] .choices__button { background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjEiIGhlaWdodD0iMjEiIHZpZXdCb3g9IjAgMCAyMSAyMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBmaWxsPSIjMDAwIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjxwYXRoIGQ9Ik0yLjU5Mi4wNDRsMTguMzY0IDE4LjM2NC0yLjU0OCAyLjU0OEwuMDQ0IDIuNTkyeiIvPjxwYXRoIGQ9Ik0wIDE4LjM2NEwxOC4zNjQgMGwyLjU0OCAyLjU0OEwyLjU0OCAyMC45MTJ6Ii8+PC9nPjwvc3ZnPg==); padding: 0; background-size: 8px; position: absolute; top: 50%; right: 0; margin-top: -10px; margin-right: 25px; height: 20px; width: 20px; border-radius: 10em; opacity: 0.25; } .choices[data-type*="select-multiple"] .choices__button, .choices[data-type*="text"] .choices__button { position: relative; display: inline-block; margin: 0-4px 0 8px; padding-left: 16px; border-left: 1px solid #003642; background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjEiIGhlaWdodD0iMjEiIHZpZXdCb3g9IjAgMCAyMSAyMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBmaWxsPSIjRkZGIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjxwYXRoIGQ9Ik0yLjU5Mi4wNDRsMTguMzY0IDE4LjM2NC0yLjU0OCAyLjU0OEwuMDQ0IDIuNTkyeiIvPjxwYXRoIGQ9Ik0wIDE4LjM2NEwxOC4zNjQgMGwyLjU0OCAyLjU0OEwyLjU0OCAyMC45MTJ6Ii8+PC9nPjwvc3ZnPg==); background-size: 8px; width: 8px; line-height: 1; opacity: 0.75; border-radius: 0; } @font-face { font-family: Arial Italic; src: url(../fonts/arial/ARIALI1.TTF); font-weight: 400; font-style: italic; } @font-face { font-family: Arial; src: url(../fonts/arial/ARIAL.TTF); font-weight: 400; font-style: normal; } @font-face { font-family: Noto Sans; src: url(../fonts/Noto_Sans/NotoSans-Thin.ttf); font-weight: 100; font-style: normal; } @font-face { font-family: Noto Sans; src: url(../fonts/Noto_Sans/NotoSans-Regular.ttf); font-weight: 400; font-style: normal; } @font-face { font-family: Noto Sans; src: url(../fonts/Noto_Sans/NotoSans-Light.ttf); font-weight: 300; font-style: normal; } .preloader__logo { background: url(../img/picture/logo.svg) no-repeat center center; background-size: contain; width: 330px; height: 35px; animation: 2s linear infinite opacity; } .choices[data-type*="select-one"]:after { background-image: url('data:image/svg+xml, '); background-repeat: no-repeat; height: clamp(0.375rem, 0.574vw + -0.064rem, 0.625rem); width: clamp(0.688rem, 1.291vw + -0.299rem, 1.25rem); color: #fff; background-size: contain; border: unset; right: clamp(0.938rem, 0.717vw + 0.389rem, 1.25rem); } .select--filter .choices[data-type*="select-one"]:after { background-image: url('data:image/svg+xml, '); height: 10px; background-size: contain; width: 20px; color: #fff; right: unset; left: 20px; } .home__img { width: 40%; height: clamp(18.75rem, 18.651vw + 4.493rem, 26.875rem); background: url(../img/picture/1c.png) no-repeat 0-30px; background-size: contain; position: relative; z-index: 1; mix-blend-mode: luminosity; } .calculator__img:before { content: ""; position: absolute; bottom: 0; right: 0; width: 100%; height: 100%; background: url(../img/picture/calculator-img/bl_01.svg) no-repeat center center; background-size: contain; filter: blur(50px); } .cooperation__container { display: flex; justify-content: space-between; align-items: flex-start; gap: clamp(1.25rem, 5.739vw + -3.137rem, 3.75rem); } .cooperation__content { width: 50%; } .cooperation__content--disabled { display: none; } .cooperation__title { margin-bottom: clamp(2.5rem, 2.869vw + 0.307rem, 3.75rem); display: block; } .cooperation__text { font-size: clamp(0.875rem, 0.861vw + 0.217rem, 1.25rem); margin-bottom: clamp(1.25rem, 2.869vw + -0.943rem, 2.5rem); width: 74%; } .cooperation__text--underline { text-decoration: underline; } .cooperation__form { width: 100%; } .cooperation__email { margin-bottom: clamp(1.25rem, 0.287vw + 1.031rem, 1.375rem); font-size: clamp(0.875rem, 0.861vw + 0.217rem, 1.25rem); display: block; } .cooperation__address { font-size: clamp(0.875rem, 0.861vw + 0.217rem, 1.25rem); width: 70%; } .cooperation__fields { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(1.563rem, 1.578vw + 0.356rem, 2.25rem); margin-bottom: clamp(1.563rem, 5.022vw + -2.276rem, 3.75rem); } .cooperation__field { position: relative; } .cooperation__field-large { grid-column: span 2; position: relative; } .cooperation__field-required { grid-column: span 2; font-size: clamp(0.75rem, 1.148vw + -0.127rem, 1.25rem); color: #888; } .cooperation__links { display: flex; align-items: center; gap: clamp(1.563rem, 1.578vw + 0.356rem, 2.25rem); } .cooperation__links-icon { width: clamp(2.188rem, 2.582vw + 0.214rem, 3.313rem); height: clamp(2.188rem, 2.582vw + 0.214rem, 3.313rem); background-size: contain; background-repeat: no-repeat; transition: background-image 0.38s ease-in-out; } .cooperation__links-icon--vk { background-image: url(../img/icon/vk.svg); } .cooperation__links-icon--vk:hover { background-image: url(../img/icon/vk-green.svg); } .cooperation__links-icon--tg { background-image: url(../img/icon/tg.svg); } .cooperation__links-icon--tg:hover { background-image: url(../img/icon/tg-green.svg); } .cooperation__agree { display: flex; justify-content: space-between; align-items: center; gap: clamp(0.625rem, 1.435vw + -0.472rem, 1.25rem); } .cooperation__agree .checkbox:checked + .checkbox__label { color: #c4c4c4; } .cooperation__agree .checkbox:checked + .checkbox__label:after { top: clamp(0.438rem, 1.291vw + -0.549rem, 1rem); } .cooperation__agree .checkbox__label { width: clamp(14.063rem, 17.934vw + 0.354rem, 21.875rem); } .cooperation__agree .checkbox__label:before { top: clamp(0.313rem, 1.435vw + -0.784rem, 0.938rem); } @media screen and (max-width: 1023px) { .cooperation__container { flex-direction: column; } .cooperation__content, .cooperation__text, .cooperation__address { width: 100%; } } @media screen and (max-width: 576px) { .cooperation { margin-bottom: 72px; } .cooperation__container { flex-direction: column; gap: 60px; } .cooperation__content { width: 100%; } .cooperation__address { width: 100%; margin-bottom: 23px; } .cooperation__fields { display: flex; flex-direction: column; } .cooperation__agree { flex-direction: column; align-items: flex-end; gap: 20px; } } .choices[data-type*="select-one"] .choices__button { background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjEiIGhlaWdodD0iMjEiIHZpZXdCb3g9IjAgMCAyMSAyMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBmaWxsPSIjMDAwIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjxwYXRoIGQ9Ik0yLjU5Mi4wNDRsMTguMzY0IDE4LjM2NC0yLjU0OCAyLjU0OEwuMDQ0IDIuNTkyeiIvPjxwYXRoIGQ9Ik0wIDE4LjM2NEwxOC4zNjQgMGwyLjU0OCAyLjU0OEwyLjU0OCAyMC45MTJ6Ii8+PC9nPjwvc3ZnPg==); padding: 0; background-size: 8px; position: absolute; top: 50%; right: 0; margin-top: -10px; margin-right: 25px; height: 20px; width: 20px; border-radius: 10em; opacity: 0.25; } .choices[data-type*="select-multiple"] .choices__button, .choices[data-type*="text"] .choices__button { position: relative; display: inline-block; margin: 0-4px 0 8px; padding-left: 16px; border-left: 1px solid #003642; background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjEiIGhlaWdodD0iMjEiIHZpZXdCb3g9IjAgMCAyMSAyMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBmaWxsPSIjRkZGIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjxwYXRoIGQ9Ik0yLjU5Mi4wNDRsMTguMzY0IDE4LjM2NC0yLjU0OCAyLjU0OEwuMDQ0IDIuNTkyeiIvPjxwYXRoIGQ9Ik0wIDE4LjM2NEwxOC4zNjQgMGwyLjU0OCAyLjU0OEwyLjU0OCAyMC45MTJ6Ii8+PC9nPjwvc3ZnPg==); background-size: 8px; width: 8px; line-height: 1; opacity: 0.75; border-radius: 0; } @font-face { font-family: Arial Italic; src: url(../fonts/arial/ARIALI1.TTF); font-weight: 400; font-style: italic; } @font-face { font-family: Arial; src: url(../fonts/arial/ARIAL.TTF); font-weight: 400; font-style: normal; } @font-face { font-family: Noto Sans; src: url(../fonts/Noto_Sans/NotoSans-Thin.ttf); font-weight: 100; font-style: normal; } @font-face { font-family: Noto Sans; src: url(../fonts/Noto_Sans/NotoSans-Regular.ttf); font-weight: 400; font-style: normal; } @font-face { font-family: Noto Sans; src: url(../fonts/Noto_Sans/NotoSans-Light.ttf); font-weight: 300; font-style: normal; } .preloader__logo { background: url(../img/picture/logo.svg) no-repeat center center; background-size: contain; width: 330px; height: 35px; animation: 2s linear infinite opacity; } .choices[data-type*="select-one"]:after { background-image: url('data:image/svg+xml, '); background-repeat: no-repeat; height: clamp(0.375rem, 0.574vw + -0.064rem, 0.625rem); width: clamp(0.688rem, 1.291vw + -0.299rem, 1.25rem); color: #fff; background-size: contain; border: unset; right: clamp(0.938rem, 0.717vw + 0.389rem, 1.25rem); } .select--filter .choices[data-type*="select-one"]:after { background-image: url('data:image/svg+xml, '); height: 10px; background-size: contain; width: 20px; color: #fff; right: unset; left: 20px; } .home__img { width: 40%; height: clamp(18.75rem, 18.651vw + 4.493rem, 26.875rem); background: url(../img/picture/1c.png) no-repeat 0-30px; background-size: contain; position: relative; z-index: 1; mix-blend-mode: luminosity; } .calculator__img:before { content: ""; position: absolute; bottom: 0; right: 0; width: 100%; height: 100%; background: url(../img/picture/calculator-img/bl_01.svg) no-repeat center center; background-size: contain; filter: blur(50px); } .footer { padding-top: clamp(4.5rem, 8.034vw + -1.641rem, 8rem); padding-bottom: clamp(1.25rem, 8.034vw + -4.891rem, 4.75rem); } .footer__basement { display: flex; flex-direction: column; gap: clamp(0.313rem, 0.43vw + -0.016rem, 0.5rem); width: fit-content; } .footer__basement-text { font-size: clamp(0.625rem, 0.287vw + 0.406rem, 0.75rem); color: #fff; } .footer__basement-img { width: clamp(5.5rem, -4.735vw + 9.119rem, 3.438rem); } .choices[data-type*="select-one"] .choices__button { background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjEiIGhlaWdodD0iMjEiIHZpZXdCb3g9IjAgMCAyMSAyMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBmaWxsPSIjMDAwIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjxwYXRoIGQ9Ik0yLjU5Mi4wNDRsMTguMzY0IDE4LjM2NC0yLjU0OCAyLjU0OEwuMDQ0IDIuNTkyeiIvPjxwYXRoIGQ9Ik0wIDE4LjM2NEwxOC4zNjQgMGwyLjU0OCAyLjU0OEwyLjU0OCAyMC45MTJ6Ii8+PC9nPjwvc3ZnPg==); padding: 0; background-size: 8px; position: absolute; top: 50%; right: 0; margin-top: -10px; margin-right: 25px; height: 20px; width: 20px; border-radius: 10em; opacity: 0.25; } .choices[data-type*="select-multiple"] .choices__button, .choices[data-type*="text"] .choices__button { position: relative; display: inline-block; margin: 0-4px 0 8px; padding-left: 16px; border-left: 1px solid #003642; background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjEiIGhlaWdodD0iMjEiIHZpZXdCb3g9IjAgMCAyMSAyMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBmaWxsPSIjRkZGIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjxwYXRoIGQ9Ik0yLjU5Mi4wNDRsMTguMzY0IDE4LjM2NC0yLjU0OCAyLjU0OEwuMDQ0IDIuNTkyeiIvPjxwYXRoIGQ9Ik0wIDE4LjM2NEwxOC4zNjQgMGwyLjU0OCAyLjU0OEwyLjU0OCAyMC45MTJ6Ii8+PC9nPjwvc3ZnPg==); background-size: 8px; width: 8px; line-height: 1; opacity: 0.75; border-radius: 0; } @font-face { font-family: Arial Italic; src: url(../fonts/arial/ARIALI1.TTF); font-weight: 400; font-style: italic; } @font-face { font-family: Arial; src: url(../fonts/arial/ARIAL.TTF); font-weight: 400; font-style: normal; } @font-face { font-family: Noto Sans; src: url(../fonts/Noto_Sans/NotoSans-Thin.ttf); font-weight: 100; font-style: normal; } @font-face { font-family: Noto Sans; src: url(../fonts/Noto_Sans/NotoSans-Regular.ttf); font-weight: 400; font-style: normal; } @font-face { font-family: Noto Sans; src: url(../fonts/Noto_Sans/NotoSans-Light.ttf); font-weight: 300; font-style: normal; } .preloader__logo { background: url(../img/picture/logo.svg) no-repeat center center; background-size: contain; width: 330px; height: 35px; animation: 2s linear infinite opacity; } .choices[data-type*="select-one"]:after { background-image: url('data:image/svg+xml, '); background-repeat: no-repeat; height: clamp(0.375rem, 0.574vw + -0.064rem, 0.625rem); width: clamp(0.688rem, 1.291vw + -0.299rem, 1.25rem); color: #fff; background-size: contain; border: unset; right: clamp(0.938rem, 0.717vw + 0.389rem, 1.25rem); } .select--filter .choices[data-type*="select-one"]:after { background-image: url('data:image/svg+xml, '); height: 10px; background-size: contain; width: 20px; color: #fff; right: unset; left: 20px; } .home__img { width: 40%; height: clamp(18.75rem, 18.651vw + 4.493rem, 26.875rem); background: url(../img/picture/1c.png) no-repeat 0-30px; background-size: contain; position: relative; z-index: 1; mix-blend-mode: luminosity; } .calculator__img:before { content: ""; position: absolute; bottom: 0; right: 0; width: 100%; height: 100%; background: url(../img/picture/calculator-img/bl_01.svg) no-repeat center center; background-size: contain; filter: blur(50px); } .catalog { margin-bottom: clamp(5.438rem, 16.786vw + -7.393rem, 12.75rem); position: relative; } .catalog--mobile { display: none; } .catalog__title { margin-bottom: clamp(2.5rem, 2.869vw + 0.307rem, 3.75rem); } .catalog__container { display: block; opacity: 1; transition: opacity 0.38s ease-in-out; } .catalog__container--none { display: none; } .catalog__container--opacity { opacity: 0; } .catalog__modal { display: none; opacity: 0; transition: opacity 0.38s ease-in-out; } .catalog__modal--active { display: block; } .catalog__modal--opacity { opacity: 1; } .catalog__modal-item { display: flex; justify-content: space-between; align-items: center; margin-bottom: clamp(2.5rem, 1.435vw + 1.403rem, 3.125rem); } .catalog__modal-subtitle { margin-bottom: clamp(1.375rem, 1.435vw + 0.278rem, 2rem); font-size: clamp(1.25rem, 1.148vw + 0.373rem, 1.75rem); font-weight: 300; font-family: Noto Sans; } .catalog__modal-text { font-size: clamp(0.875rem, 0.861vw + 0.217rem, 1.25rem); width: 78%; } .catalog__modal-close { background: url(../img/icon/close.svg) no-repeat; background-size: contain; width: 27px; height: 27px; cursor: pointer; transition: background-image 0.38s ease-in-out; } .catalog__modal-close:hover { background-image: url(../img/icon/close-orange.svg); } .catalog__modal-content { border-bottom: 1px solid rgba(255, 255, 255, 0.4); padding-bottom: clamp(2rem, 4.591vw + -1.509rem, 4rem); margin-bottom: clamp(2.5rem, 1.435vw + 1.403rem, 3.125rem); } .catalog__modal-back { font-size: 20px; color: #fff; cursor: pointer; display: flex; align-items: center; transition: color 0.38s ease-in-out; } .catalog__modal-back:hover { color: #ff5b46; } .catalog__modal-back:hover .catalog__modal-icon { background-image: url(../img/icon/next-orange.svg); } .catalog__modal-icon { background: url(../img/icon/next-white.svg) no-repeat; transform: rotate(180deg); margin-right: 12px; background-size: contain; width: 14px; height: 13px; transition: background-image 0.38s ease-in-out; } .catalog__item { align-items: center; display: grid; grid-template-columns: 1fr 22px 1fr; padding: 15px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.4); } .catalog__item:last-child { border-bottom: none; } .catalog__text { cursor: pointer; font-size: clamp(0.875rem, 0.861vw + 0.217rem, 1.25rem); transition: color 0.38s ease-in-out; } .catalog__text--right { text-align: right; } .catalog__text:hover { color: #ff5b46; } .catalog__line { width: 22px; height: 2px; background-color: #ff5b46; } @media screen and (max-width: 1023px) { .catalog__modal-text { width: 100%; } } @media screen and (max-width: 576px) { .catalog { display: none; } .catalog--mobile { display: block; } .catalog__line { width: 14px; } .catalog__item { grid-template-columns: 24px 1fr; } } .choices[data-type*="select-one"] .choices__button { background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjEiIGhlaWdodD0iMjEiIHZpZXdCb3g9IjAgMCAyMSAyMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBmaWxsPSIjMDAwIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjxwYXRoIGQ9Ik0yLjU5Mi4wNDRsMTguMzY0IDE4LjM2NC0yLjU0OCAyLjU0OEwuMDQ0IDIuNTkyeiIvPjxwYXRoIGQ9Ik0wIDE4LjM2NEwxOC4zNjQgMGwyLjU0OCAyLjU0OEwyLjU0OCAyMC45MTJ6Ii8+PC9nPjwvc3ZnPg==); padding: 0; background-size: 8px; position: absolute; top: 50%; right: 0; margin-top: -10px; margin-right: 25px; height: 20px; width: 20px; border-radius: 10em; opacity: 0.25; } .choices[data-type*="select-multiple"] .choices__button, .choices[data-type*="text"] .choices__button { position: relative; display: inline-block; margin: 0-4px 0 8px; padding-left: 16px; border-left: 1px solid #003642; background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjEiIGhlaWdodD0iMjEiIHZpZXdCb3g9IjAgMCAyMSAyMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBmaWxsPSIjRkZGIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjxwYXRoIGQ9Ik0yLjU5Mi4wNDRsMTguMzY0IDE4LjM2NC0yLjU0OCAyLjU0OEwuMDQ0IDIuNTkyeiIvPjxwYXRoIGQ9Ik0wIDE4LjM2NEwxOC4zNjQgMGwyLjU0OCAyLjU0OEwyLjU0OCAyMC45MTJ6Ii8+PC9nPjwvc3ZnPg==); background-size: 8px; width: 8px; line-height: 1; opacity: 0.75; border-radius: 0; } @font-face { font-family: Arial Italic; src: url(../fonts/arial/ARIALI1.TTF); font-weight: 400; font-style: italic; } @font-face { font-family: Arial; src: url(../fonts/arial/ARIAL.TTF); font-weight: 400; font-style: normal; } @font-face { font-family: Noto Sans; src: url(../fonts/Noto_Sans/NotoSans-Thin.ttf); font-weight: 100; font-style: normal; } @font-face { font-family: Noto Sans; src: url(../fonts/Noto_Sans/NotoSans-Regular.ttf); font-weight: 400; font-style: normal; } @font-face { font-family: Noto Sans; src: url(../fonts/Noto_Sans/NotoSans-Light.ttf); font-weight: 300; font-style: normal; } .preloader__logo { background: url(../img/picture/logo.svg) no-repeat center center; background-size: contain; width: 330px; height: 35px; animation: 2s linear infinite opacity; } .choices[data-type*="select-one"]:after { background-image: url('data:image/svg+xml, '); background-repeat: no-repeat; height: clamp(0.375rem, 0.574vw + -0.064rem, 0.625rem); width: clamp(0.688rem, 1.291vw + -0.299rem, 1.25rem); color: #fff; background-size: contain; border: unset; right: clamp(0.938rem, 0.717vw + 0.389rem, 1.25rem); } .select--filter .choices[data-type*="select-one"]:after { background-image: url('data:image/svg+xml, '); height: 10px; background-size: contain; width: 20px; color: #fff; right: unset; left: 20px; } .home__img { width: 40%; height: clamp(18.75rem, 18.651vw + 4.493rem, 26.875rem); background: url(../img/picture/1c.png) no-repeat 0-30px; background-size: contain; position: relative; z-index: 1; mix-blend-mode: luminosity; } .calculator__img:before { content: ""; position: absolute; bottom: 0; right: 0; width: 100%; height: 100%; background: url(../img/picture/calculator-img/bl_01.svg) no-repeat center center; background-size: contain; filter: blur(50px); } .arrowBtn { width: clamp(2rem, 3.443vw + -0.632rem, 3.5rem); height: clamp(2rem, 3.443vw + -0.632rem, 3.5rem); background: url(../img/icon/arrow-white.svg) no-repeat center center; background-size: contain; transition: background-image 0.38s ease-in-out; } .arrowBtn:hover { background-image: url(../img/icon/arrow-orange.svg); } .arrowBtn--left { transform: rotate(-180deg); } .choices[data-type*="select-one"] .choices__button { background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjEiIGhlaWdodD0iMjEiIHZpZXdCb3g9IjAgMCAyMSAyMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBmaWxsPSIjMDAwIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjxwYXRoIGQ9Ik0yLjU5Mi4wNDRsMTguMzY0IDE4LjM2NC0yLjU0OCAyLjU0OEwuMDQ0IDIuNTkyeiIvPjxwYXRoIGQ9Ik0wIDE4LjM2NEwxOC4zNjQgMGwyLjU0OCAyLjU0OEwyLjU0OCAyMC45MTJ6Ii8+PC9nPjwvc3ZnPg==); padding: 0; background-size: 8px; position: absolute; top: 50%; right: 0; margin-top: -10px; margin-right: 25px; height: 20px; width: 20px; border-radius: 10em; opacity: 0.25; } .choices[data-type*="select-multiple"] .choices__button, .choices[data-type*="text"] .choices__button { position: relative; display: inline-block; margin: 0-4px 0 8px; padding-left: 16px; border-left: 1px solid #003642; background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjEiIGhlaWdodD0iMjEiIHZpZXdCb3g9IjAgMCAyMSAyMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBmaWxsPSIjRkZGIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjxwYXRoIGQ9Ik0yLjU5Mi4wNDRsMTguMzY0IDE4LjM2NC0yLjU0OCAyLjU0OEwuMDQ0IDIuNTkyeiIvPjxwYXRoIGQ9Ik0wIDE4LjM2NEwxOC4zNjQgMGwyLjU0OCAyLjU0OEwyLjU0OCAyMC45MTJ6Ii8+PC9nPjwvc3ZnPg==); background-size: 8px; width: 8px; line-height: 1; opacity: 0.75; border-radius: 0; } @font-face { font-family: Arial Italic; src: url(../fonts/arial/ARIALI1.TTF); font-weight: 400; font-style: italic; } @font-face { font-family: Arial; src: url(../fonts/arial/ARIAL.TTF); font-weight: 400; font-style: normal; } @font-face { font-family: Noto Sans; src: url(../fonts/Noto_Sans/NotoSans-Thin.ttf); font-weight: 100; font-style: normal; } @font-face { font-family: Noto Sans; src: url(../fonts/Noto_Sans/NotoSans-Regular.ttf); font-weight: 400; font-style: normal; } @font-face { font-family: Noto Sans; src: url(../fonts/Noto_Sans/NotoSans-Light.ttf); font-weight: 300; font-style: normal; } .preloader__logo { background: url(../img/picture/logo.svg) no-repeat center center; background-size: contain; width: 330px; height: 35px; animation: 2s linear infinite opacity; } .choices[data-type*="select-one"]:after { background-image: url('data:image/svg+xml, '); background-repeat: no-repeat; height: clamp(0.375rem, 0.574vw + -0.064rem, 0.625rem); width: clamp(0.688rem, 1.291vw + -0.299rem, 1.25rem); color: #fff; background-size: contain; border: unset; right: clamp(0.938rem, 0.717vw + 0.389rem, 1.25rem); } .select--filter .choices[data-type*="select-one"]:after { background-image: url('data:image/svg+xml, '); height: 10px; background-size: contain; width: 20px; color: #fff; right: unset; left: 20px; } .home__img { width: 40%; height: clamp(18.75rem, 18.651vw + 4.493rem, 26.875rem); background: url(../img/picture/1c.png) no-repeat 0-30px; background-size: contain; position: relative; z-index: 1; mix-blend-mode: luminosity; } .calculator__img:before { content: ""; position: absolute; bottom: 0; right: 0; width: 100%; height: 100%; background: url(../img/picture/calculator-img/bl_01.svg) no-repeat center center; background-size: contain; filter: blur(50px); } .quiz { margin-bottom: clamp(5.438rem, 16.786vw + -7.393rem, 12.75rem); padding-bottom: clamp(0rem, 8.608vw + -6.58rem, 3.75rem); opacity: 1; transition: opacity 0.38s ease-in-out; position: relative; } .quiz:before { content: ""; position: absolute; bottom: 0; right: -112px; background: url(../img/picture/1c-quiz.svg) no-repeat; background-size: contain; width: 1160px; height: 375px; filter: blur(40px); } .quiz--none { display: none; } .quiz--opacity { opacity: 0; } .quiz__title { margin-bottom: clamp(4rem, 2.869vw + 1.807rem, 5.25rem); } .quiz__container { display: flex; justify-content: space-between; align-items: flex-start; gap: clamp(3.125rem, 27.26vw + -17.712rem, 15rem); } .quiz__progressbar { margin-bottom: clamp(1.25rem, 2.869vw + -0.943rem, 2.5rem); } .quiz__progressbar-text { font-size: clamp(0.875rem, 0.861vw + 0.217rem, 1.25rem); color: #fff; margin-bottom: 23px; } .quiz__progressbar-line { height: 2px; background-color: #ff5b46; position: relative; } .quiz__progressbar-line .swiper-pagination-progressbar-fill { background-color: #fff; position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: block; transform-origin: left top; } .quiz__btn { width: 100%; margin-top: 70px; } .quiz__btn--none { display: none; } .quiz__navigate { display: flex; gap: clamp(1.875rem, 4.304vw + -1.415rem, 3.75rem); margin-top: 75px; position: relative; } .quiz__navigate--none { display: none; } .quiz__navigate .swiper-button-disabled { opacity: 0.5; } .quiz__navigate .swiper-button-disabled:hover { background-image: url(../img/icon/arrow-white.svg); } .quiz__slide { padding-bottom: 20px; } .quiz__slide-title { font-size: clamp(1.25rem, 1.148vw + 0.373rem, 1.75rem); font-weight: 300; color: #fff; font-family: Noto Sans; margin-bottom: 12px; } .quiz__slide-title--orange { color: #ff5b46; margin-bottom: clamp(1.25rem, 2.869vw + -0.943rem, 2.5rem); } .quiz__slide-text { font-size: clamp(0.875rem, 0.861vw + 0.217rem, 1.25rem); color: #888; font-style: italic; width: 463px; margin-bottom: clamp(1.563rem, 3.587vw + -1.179rem, 3.125rem); } .quiz__slide-text--w100 { width: 100%; } .quiz__slide-description { font-size: clamp(0.875rem, 0.861vw + 0.217rem, 1.25rem); color: #888; font-style: italic; opacity: 0; transition: opacity 0.5s ease-in; display: block; line-height: 1.5; white-space: pre-wrap; } .quiz__checkboxes { display: grid; gap: clamp(1.25rem, 0.574vw + 0.811rem, 1.5rem); } .quiz__btns { display: flex; gap: 12px; } .quiz__inputs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 34px; } .finishQuiz { display: none; opacity: 0; position: relative; margin-bottom: clamp(5.438rem, 16.786vw + -7.393rem, 12.75rem); height: 100vh; transition: opacity 0.38s ease-in-out; } .finishQuiz--active { display: block; } .finishQuiz--opacity { opacity: 1; } .finishQuiz__close { cursor: pointer; background: url(../img/icon/close.svg) no-repeat; background-size: contain; position: absolute; width: 27px; height: 27px; top: 50px; right: 0; transition: background-image 0.38s ease-in-out; } .finishQuiz__close:hover { background-image: url(../img/icon/close-orange.svg); } .finishQuiz__container { display: flex; flex-direction: column; height: 100%; justify-content: center; align-items: center; } .finishQuiz__img { width: 80px; height: 57px; object-fit: contain; margin-bottom: 20px; } .finishQuiz__title { font-size: clamp(1.375rem, 1.435vw + 0.278rem, 2rem); font-family: Noto Sans; font-weight: 100; color: #fff; margin-bottom: 20px; } .finishQuiz__text { font-size: clamp(0.875rem, 0.861vw + 0.217rem, 1.25rem); text-align: center; color: #fff; width: 20%; } @media screen and (max-width: 1023px) { .quiz__inputs { grid-template-columns: repeat(1, 1fr); } .quiz__slide-text { width: 100%; } .quiz__btns { flex-direction: column; } .finishQuiz__text { width: 47%; } } @media screen and (max-width: 768px) { .quiz__slider { width: 100%; } .quiz__container { flex-direction: column; gap: 20px; } .quiz__navigate { margin-top: 0; } } .choices[data-type*="select-one"] .choices__button { background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjEiIGhlaWdodD0iMjEiIHZpZXdCb3g9IjAgMCAyMSAyMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBmaWxsPSIjMDAwIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjxwYXRoIGQ9Ik0yLjU5Mi4wNDRsMTguMzY0IDE4LjM2NC0yLjU0OCAyLjU0OEwuMDQ0IDIuNTkyeiIvPjxwYXRoIGQ9Ik0wIDE4LjM2NEwxOC4zNjQgMGwyLjU0OCAyLjU0OEwyLjU0OCAyMC45MTJ6Ii8+PC9nPjwvc3ZnPg==); padding: 0; background-size: 8px; position: absolute; top: 50%; right: 0; margin-top: -10px; margin-right: 25px; height: 20px; width: 20px; border-radius: 10em; opacity: 0.25; } .choices[data-type*="select-multiple"] .choices__button, .choices[data-type*="text"] .choices__button { position: relative; display: inline-block; margin: 0-4px 0 8px; padding-left: 16px; border-left: 1px solid #003642; background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjEiIGhlaWdodD0iMjEiIHZpZXdCb3g9IjAgMCAyMSAyMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBmaWxsPSIjRkZGIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjxwYXRoIGQ9Ik0yLjU5Mi4wNDRsMTguMzY0IDE4LjM2NC0yLjU0OCAyLjU0OEwuMDQ0IDIuNTkyeiIvPjxwYXRoIGQ9Ik0wIDE4LjM2NEwxOC4zNjQgMGwyLjU0OCAyLjU0OEwyLjU0OCAyMC45MTJ6Ii8+PC9nPjwvc3ZnPg==); background-size: 8px; width: 8px; line-height: 1; opacity: 0.75; border-radius: 0; } @font-face { font-family: Arial Italic; src: url(../fonts/arial/ARIALI1.TTF); font-weight: 400; font-style: italic; } @font-face { font-family: Arial; src: url(../fonts/arial/ARIAL.TTF); font-weight: 400; font-style: normal; } @font-face { font-family: Noto Sans; src: url(../fonts/Noto_Sans/NotoSans-Thin.ttf); font-weight: 100; font-style: normal; } @font-face { font-family: Noto Sans; src: url(../fonts/Noto_Sans/NotoSans-Regular.ttf); font-weight: 400; font-style: normal; } @font-face { font-family: Noto Sans; src: url(../fonts/Noto_Sans/NotoSans-Light.ttf); font-weight: 300; font-style: normal; } .preloader__logo { background: url(../img/picture/logo.svg) no-repeat center center; background-size: contain; width: 330px; height: 35px; animation: 2s linear infinite opacity; } .choices[data-type*="select-one"]:after { background-image: url('data:image/svg+xml, '); background-repeat: no-repeat; height: clamp(0.375rem, 0.574vw + -0.064rem, 0.625rem); width: clamp(0.688rem, 1.291vw + -0.299rem, 1.25rem); color: #fff; background-size: contain; border: unset; right: clamp(0.938rem, 0.717vw + 0.389rem, 1.25rem); } .select--filter .choices[data-type*="select-one"]:after { background-image: url('data:image/svg+xml, '); height: 10px; background-size: contain; width: 20px; color: #fff; right: unset; left: 20px; } .home__img { width: 40%; height: clamp(18.75rem, 18.651vw + 4.493rem, 26.875rem); background: url(../img/picture/1c.png) no-repeat 0-30px; background-size: contain; position: relative; z-index: 1; mix-blend-mode: luminosity; } .calculator__img:before { content: ""; position: absolute; bottom: 0; right: 0; width: 100%; height: 100%; background: url(../img/picture/calculator-img/bl_01.svg) no-repeat center center; background-size: contain; filter: blur(50px); } .aboutUs { margin-bottom: clamp(5.438rem, 16.786vw + -7.393rem, 12.75rem); } .aboutUs__title { margin-bottom: clamp(2.5rem, 2.869vw + 0.307rem, 3.75rem); } .aboutUs__container { display: grid; grid-template-columns: clamp(23.188rem, 30.99vw + -0.5rem, 36.688rem) clamp( 25.75rem, 56.815vw + -17.678rem, 50.5rem ); gap: clamp(2.5rem, 30.56vw + -20.859rem, 15.813rem); position: relative; } .aboutUs__container:before { content: ""; position: absolute; top: 0; left: -100px; width: 100%; height: clamp(43.75rem, 74.605vw + -13.277rem, 76.25rem); background: url(../img/picture/bg-company.svg) no-repeat; background-size: contain; filter: blur(120px); } .aboutUs__info-item { padding: clamp(1.875rem, 1.435vw + 0.778rem, 2.5rem) 0 52px; border-bottom: 1px solid #fff; } .aboutUs__info-item:last-child { border-bottom: none; } .aboutUs__info-title { font-family: Noto Sans; font-size: clamp(5.625rem, 4.304vw + 2.335rem, 7.5rem); font-weight: 100; color: #ff5b46; margin-bottom: 32px; line-height: 0.8; } .aboutUs__text { font-size: clamp(0.875rem, 0.861vw + 0.217rem, 1.25rem); } .aboutUs__subtitle { font-family: Noto Sans; font-size: clamp(1.25rem, 1.148vw + 0.373rem, 1.75rem); font-weight: 300; } .aboutUs__images { display: flex; gap: clamp(2.75rem, 7.317vw + -2.843rem, 5.938rem); } .aboutUs__images img { width: 100%; height: clamp(2.063rem, 4.017vw + -1.008rem, 3.813rem); object-fit: contain; } .aboutUs__content { margin-top: clamp(2rem, 1.148vw + 1.123rem, 2.5rem); display: grid; gap: clamp(1.375rem, 7.891vw + -4.657rem, 4.813rem); } .aboutUs__description { display: grid; gap: 22px; } @media screen and (max-width: 1023px) { .aboutUs__container { grid-template-columns: repeat(1, 1fr); gap: 0; } .aboutUs__content { margin-top: 0; } } @media screen and (max-width: 576px) { .aboutUs__images { overflow: scroll; } } .choices[data-type*="select-one"] .choices__button { background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjEiIGhlaWdodD0iMjEiIHZpZXdCb3g9IjAgMCAyMSAyMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBmaWxsPSIjMDAwIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjxwYXRoIGQ9Ik0yLjU5Mi4wNDRsMTguMzY0IDE4LjM2NC0yLjU0OCAyLjU0OEwuMDQ0IDIuNTkyeiIvPjxwYXRoIGQ9Ik0wIDE4LjM2NEwxOC4zNjQgMGwyLjU0OCAyLjU0OEwyLjU0OCAyMC45MTJ6Ii8+PC9nPjwvc3ZnPg==); padding: 0; background-size: 8px; position: absolute; top: 50%; right: 0; margin-top: -10px; margin-right: 25px; height: 20px; width: 20px; border-radius: 10em; opacity: 0.25; } .choices[data-type*="select-multiple"] .choices__button, .choices[data-type*="text"] .choices__button { position: relative; display: inline-block; margin: 0-4px 0 8px; padding-left: 16px; border-left: 1px solid #003642; background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjEiIGhlaWdodD0iMjEiIHZpZXdCb3g9IjAgMCAyMSAyMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBmaWxsPSIjRkZGIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjxwYXRoIGQ9Ik0yLjU5Mi4wNDRsMTguMzY0IDE4LjM2NC0yLjU0OCAyLjU0OEwuMDQ0IDIuNTkyeiIvPjxwYXRoIGQ9Ik0wIDE4LjM2NEwxOC4zNjQgMGwyLjU0OCAyLjU0OEwyLjU0OCAyMC45MTJ6Ii8+PC9nPjwvc3ZnPg==); background-size: 8px; width: 8px; line-height: 1; opacity: 0.75; border-radius: 0; } @font-face { font-family: Arial Italic; src: url(../fonts/arial/ARIALI1.TTF); font-weight: 400; font-style: italic; } @font-face { font-family: Arial; src: url(../fonts/arial/ARIAL.TTF); font-weight: 400; font-style: normal; } @font-face { font-family: Noto Sans; src: url(../fonts/Noto_Sans/NotoSans-Thin.ttf); font-weight: 100; font-style: normal; } @font-face { font-family: Noto Sans; src: url(../fonts/Noto_Sans/NotoSans-Regular.ttf); font-weight: 400; font-style: normal; } @font-face { font-family: Noto Sans; src: url(../fonts/Noto_Sans/NotoSans-Light.ttf); font-weight: 300; font-style: normal; } .preloader__logo { background: url(../img/picture/logo.svg) no-repeat center center; background-size: contain; width: 330px; height: 35px; animation: 2s linear infinite opacity; } .choices[data-type*="select-one"]:after { background-image: url('data:image/svg+xml, '); background-repeat: no-repeat; height: clamp(0.375rem, 0.574vw + -0.064rem, 0.625rem); width: clamp(0.688rem, 1.291vw + -0.299rem, 1.25rem); color: #fff; background-size: contain; border: unset; right: clamp(0.938rem, 0.717vw + 0.389rem, 1.25rem); } .select--filter .choices[data-type*="select-one"]:after { background-image: url('data:image/svg+xml, '); height: 10px; background-size: contain; width: 20px; color: #fff; right: unset; left: 20px; } .home__img { width: 40%; height: clamp(18.75rem, 18.651vw + 4.493rem, 26.875rem); background: url(../img/picture/1c.png) no-repeat 0-30px; background-size: contain; position: relative; z-index: 1; mix-blend-mode: luminosity; } .calculator__img:before { content: ""; position: absolute; bottom: 0; right: 0; width: 100%; height: 100%; background: url(../img/picture/calculator-img/bl_01.svg) no-repeat center center; background-size: contain; filter: blur(50px); } .caseSlider { margin-bottom: clamp(5.438rem, 16.786vw + -7.393rem, 12.75rem); } .caseSlider__title { margin-bottom: clamp(2.5rem, 2.869vw + 0.307rem, 3.75rem); } .caseSlider .swiper-wrapper { -webkit-transition-timing-function: linear !important; transition-timing-function: linear !important; } .caseSlider .swiper { overflow: visible; } .caseSlider__slide { padding-bottom: clamp(1.875rem, 1.435vw + 0.778rem, 2.5rem); border-bottom: 2px solid #ff5b46; height: auto; } .caseSlider__slide-img { width: 100%; height: clamp(3.75rem, 2.869vw + 1.557rem, 5rem); object-fit: contain; object-position: left; margin-bottom: clamp(1.375rem, 1.578vw + 0.169rem, 2.063rem); } .caseSlider__slide-title { font-size: clamp(0.875rem, 0.861vw + 0.217rem, 1.25rem); color: #ff5b46; margin-bottom: clamp(1.375rem, 1.578vw + 0.169rem, 2.063rem); } .caseSlider__slide-text { font-size: clamp(0.875rem, 0.861vw + 0.217rem, 1.25rem); } .choices[data-type*="select-one"] .choices__button { background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjEiIGhlaWdodD0iMjEiIHZpZXdCb3g9IjAgMCAyMSAyMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBmaWxsPSIjMDAwIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjxwYXRoIGQ9Ik0yLjU5Mi4wNDRsMTguMzY0IDE4LjM2NC0yLjU0OCAyLjU0OEwuMDQ0IDIuNTkyeiIvPjxwYXRoIGQ9Ik0wIDE4LjM2NEwxOC4zNjQgMGwyLjU0OCAyLjU0OEwyLjU0OCAyMC45MTJ6Ii8+PC9nPjwvc3ZnPg==); padding: 0; background-size: 8px; position: absolute; top: 50%; right: 0; margin-top: -10px; margin-right: 25px; height: 20px; width: 20px; border-radius: 10em; opacity: 0.25; } .choices[data-type*="select-multiple"] .choices__button, .choices[data-type*="text"] .choices__button { position: relative; display: inline-block; margin: 0-4px 0 8px; padding-left: 16px; border-left: 1px solid #003642; background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjEiIGhlaWdodD0iMjEiIHZpZXdCb3g9IjAgMCAyMSAyMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBmaWxsPSIjRkZGIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjxwYXRoIGQ9Ik0yLjU5Mi4wNDRsMTguMzY0IDE4LjM2NC0yLjU0OCAyLjU0OEwuMDQ0IDIuNTkyeiIvPjxwYXRoIGQ9Ik0wIDE4LjM2NEwxOC4zNjQgMGwyLjU0OCAyLjU0OEwyLjU0OCAyMC45MTJ6Ii8+PC9nPjwvc3ZnPg==); background-size: 8px; width: 8px; line-height: 1; opacity: 0.75; border-radius: 0; } @font-face { font-family: Arial Italic; src: url(../fonts/arial/ARIALI1.TTF); font-weight: 400; font-style: italic; } @font-face { font-family: Arial; src: url(../fonts/arial/ARIAL.TTF); font-weight: 400; font-style: normal; } @font-face { font-family: Noto Sans; src: url(../fonts/Noto_Sans/NotoSans-Thin.ttf); font-weight: 100; font-style: normal; } @font-face { font-family: Noto Sans; src: url(../fonts/Noto_Sans/NotoSans-Regular.ttf); font-weight: 400; font-style: normal; } @font-face { font-family: Noto Sans; src: url(../fonts/Noto_Sans/NotoSans-Light.ttf); font-weight: 300; font-style: normal; } .preloader__logo { background: url(../img/picture/logo.svg) no-repeat center center; background-size: contain; width: 330px; height: 35px; animation: 2s linear infinite opacity; } .choices[data-type*="select-one"]:after { background-image: url('data:image/svg+xml, '); background-repeat: no-repeat; height: clamp(0.375rem, 0.574vw + -0.064rem, 0.625rem); width: clamp(0.688rem, 1.291vw + -0.299rem, 1.25rem); color: #fff; background-size: contain; border: unset; right: clamp(0.938rem, 0.717vw + 0.389rem, 1.25rem); } .select--filter .choices[data-type*="select-one"]:after { background-image: url('data:image/svg+xml, '); height: 10px; background-size: contain; width: 20px; color: #fff; right: unset; left: 20px; } .home__img { width: 40%; height: clamp(18.75rem, 18.651vw + 4.493rem, 26.875rem); background: url(../img/picture/1c.png) no-repeat 0-30px; background-size: contain; position: relative; z-index: 1; mix-blend-mode: luminosity; } .calculator__img:before { content: ""; position: absolute; bottom: 0; right: 0; width: 100%; height: 100%; background: url(../img/picture/calculator-img/bl_01.svg) no-repeat center center; background-size: contain; filter: blur(50px); } .business { margin-bottom: clamp(5.438rem, 16.786vw + -7.393rem, 12.75rem); } .business__title { margin-bottom: clamp(2.5rem, 2.869vw + 0.307rem, 3.75rem); } .business .typed-cursor { display: none; } .business__wrapper { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1rem, 2.296vw + -0.755rem, 2rem); } .business__item { background-color: #212121; } .business__num { background-image: linear-gradient(270deg, #fff, #656565); color: transparent; background-clip: text; font-size: clamp(9.75rem, 20.66vw + -6.042rem, 18.75rem); font-family: Noto Sans; font-weight: 100; line-height: 1; margin-bottom: clamp(4.563rem, 9.9vw + -3.004rem, 8.875rem); height: clamp(9.75rem, 20.66vw + -6.042rem, 18.75rem); } .business__text { font-size: clamp(1.5rem, 4.448vw + -1.9rem, 3.438rem); font-family: Noto Sans; font-weight: 100; padding-left: clamp(0.813rem, 1.865vw + -0.613rem, 1.625rem); padding-right: clamp(0.813rem, 1.865vw + -0.613rem, 1.625rem); padding-bottom: clamp(1.063rem, 2.296vw + -0.692rem, 2.063rem); display: flex; flex-direction: column; } .business__text span { color: #ff5b46; } @media screen and (max-width: 1023px) { .business__container { overflow: visible; } .business__wrapper { display: flex; gap: 0; } } @media screen and (max-width: 576px) { .business__item { height: auto; } } .choices[data-type*="select-one"] .choices__button { background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjEiIGhlaWdodD0iMjEiIHZpZXdCb3g9IjAgMCAyMSAyMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBmaWxsPSIjMDAwIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjxwYXRoIGQ9Ik0yLjU5Mi4wNDRsMTguMzY0IDE4LjM2NC0yLjU0OCAyLjU0OEwuMDQ0IDIuNTkyeiIvPjxwYXRoIGQ9Ik0wIDE4LjM2NEwxOC4zNjQgMGwyLjU0OCAyLjU0OEwyLjU0OCAyMC45MTJ6Ii8+PC9nPjwvc3ZnPg==); padding: 0; background-size: 8px; position: absolute; top: 50%; right: 0; margin-top: -10px; margin-right: 25px; height: 20px; width: 20px; border-radius: 10em; opacity: 0.25; } .choices[data-type*="select-multiple"] .choices__button, .choices[data-type*="text"] .choices__button { position: relative; display: inline-block; margin: 0-4px 0 8px; padding-left: 16px; border-left: 1px solid #003642; background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjEiIGhlaWdodD0iMjEiIHZpZXdCb3g9IjAgMCAyMSAyMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBmaWxsPSIjRkZGIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjxwYXRoIGQ9Ik0yLjU5Mi4wNDRsMTguMzY0IDE4LjM2NC0yLjU0OCAyLjU0OEwuMDQ0IDIuNTkyeiIvPjxwYXRoIGQ9Ik0wIDE4LjM2NEwxOC4zNjQgMGwyLjU0OCAyLjU0OEwyLjU0OCAyMC45MTJ6Ii8+PC9nPjwvc3ZnPg==); background-size: 8px; width: 8px; line-height: 1; opacity: 0.75; border-radius: 0; } @font-face { font-family: Arial Italic; src: url(../fonts/arial/ARIALI1.TTF); font-weight: 400; font-style: italic; } @font-face { font-family: Arial; src: url(../fonts/arial/ARIAL.TTF); font-weight: 400; font-style: normal; } @font-face { font-family: Noto Sans; src: url(../fonts/Noto_Sans/NotoSans-Thin.ttf); font-weight: 100; font-style: normal; } @font-face { font-family: Noto Sans; src: url(../fonts/Noto_Sans/NotoSans-Regular.ttf); font-weight: 400; font-style: normal; } @font-face { font-family: Noto Sans; src: url(../fonts/Noto_Sans/NotoSans-Light.ttf); font-weight: 300; font-style: normal; } .preloader__logo { background: url(../img/picture/logo.svg) no-repeat center center; background-size: contain; width: 330px; height: 35px; animation: 2s linear infinite opacity; } .choices[data-type*="select-one"]:after { background-image: url('data:image/svg+xml, '); background-repeat: no-repeat; height: clamp(0.375rem, 0.574vw + -0.064rem, 0.625rem); width: clamp(0.688rem, 1.291vw + -0.299rem, 1.25rem); color: #fff; background-size: contain; border: unset; right: clamp(0.938rem, 0.717vw + 0.389rem, 1.25rem); } .select--filter .choices[data-type*="select-one"]:after { background-image: url('data:image/svg+xml, '); height: 10px; background-size: contain; width: 20px; color: #fff; right: unset; left: 20px; } .home__img { width: 40%; height: clamp(18.75rem, 18.651vw + 4.493rem, 26.875rem); background: url(../img/picture/1c.png) no-repeat 0-30px; background-size: contain; position: relative; z-index: 1; mix-blend-mode: luminosity; } .calculator__img:before { content: ""; position: absolute; bottom: 0; right: 0; width: 100%; height: 100%; background: url(../img/picture/calculator-img/bl_01.svg) no-repeat center center; background-size: contain; filter: blur(50px); } .ac.js-enabled .ac-panel { visibility: hidden; } .ac.is-active .ac-panel { visibility: visible; } .ac .ac-panel { overflow: hidden; transition-property: height, visibility; transition-timing-function: ease; } .accordion { display: flex; flex-direction: column; gap: 16px; padding-top: clamp(1.25rem, 5.739vw + -3.137rem, 3.75rem); padding-bottom: clamp(0rem, 8.608vw + -6.58rem, 3.75rem); margin-bottom: clamp(1.25rem, 5.739vw + -3.137rem, 3.75rem); } .accordion__item { display: flex; align-items: center; flex-wrap: wrap; gap: clamp(1rem, 0.574vw + 0.561rem, 1.25rem); padding-left: clamp(1.5rem, 4.878vw + -2.229rem, 3.625rem); padding-top: 12px; padding-bottom: clamp(1rem, -0.574vw + 1.439rem, 0.75rem); margin-left: clamp(0.625rem, 2.009vw + -0.91rem, 1.5rem); position: relative; } .accordion__item:before { content: ""; position: absolute; height: 100%; width: 2px; top: 0; left: 0; background-color: #2d2d2d; } .accordion__clue { font-style: italic; font-size: clamp(0.875rem, 0.861vw + 0.217rem, 1.25rem); color: #888; padding-left: clamp(1.5rem, 4.878vw + -2.229rem, 3.625rem); margin-left: clamp(0.625rem, 2.009vw + -0.91rem, 1.5rem); position: relative; width: clamp(18.938rem, 22.956vw + 1.391rem, 28.938rem); } .accordion__clue:before { content: ""; position: absolute; height: 100%; width: 2px; top: 0; left: 0; background-color: #02c295; } .accordion__container.is-active .accordion__title { color: #c4c4c4; } .accordion__btn { display: flex; align-items: center; } .accordion__title { font-family: Noto Sans; font-weight: 300; font-size: clamp(1.25rem, 2.296vw + -0.505rem, 2.25rem); transition: color 0.38s ease-in-out; color: #3b3b3b; } .accordion__title span { padding-right: clamp(0.625rem, 4.591vw + -2.884rem, 2.625rem); color: #02c295; } .accordion__content { font-size: clamp(1rem, 0.287vw + 0.781rem, 1.125rem); margin-top: 16px; } @media screen and (max-width: 768px) { .accordion__item { flex-direction: column; align-items: flex-start; } .accordion__clue { width: 100%; } .accordion__title { display: flex; } } @media screen and (max-width: 576px) { .accordion { padding: 0; } .accordion__item { display: flex; align-items: flex-start; flex-direction: column; } .accordion__content { margin-top: 10px; } .accordion__clue { width: auto; } .accordion__title { display: flex; } } .choices[data-type*="select-one"] .choices__button { background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjEiIGhlaWdodD0iMjEiIHZpZXdCb3g9IjAgMCAyMSAyMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBmaWxsPSIjMDAwIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjxwYXRoIGQ9Ik0yLjU5Mi4wNDRsMTguMzY0IDE4LjM2NC0yLjU0OCAyLjU0OEwuMDQ0IDIuNTkyeiIvPjxwYXRoIGQ9Ik0wIDE4LjM2NEwxOC4zNjQgMGwyLjU0OCAyLjU0OEwyLjU0OCAyMC45MTJ6Ii8+PC9nPjwvc3ZnPg==); padding: 0; background-size: 8px; position: absolute; top: 50%; right: 0; margin-top: -10px; margin-right: 25px; height: 20px; width: 20px; border-radius: 10em; opacity: 0.25; } .choices[data-type*="select-multiple"] .choices__button, .choices[data-type*="text"] .choices__button { position: relative; display: inline-block; margin: 0-4px 0 8px; padding-left: 16px; border-left: 1px solid #003642; background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjEiIGhlaWdodD0iMjEiIHZpZXdCb3g9IjAgMCAyMSAyMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBmaWxsPSIjRkZGIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjxwYXRoIGQ9Ik0yLjU5Mi4wNDRsMTguMzY0IDE4LjM2NC0yLjU0OCAyLjU0OEwuMDQ0IDIuNTkyeiIvPjxwYXRoIGQ9Ik0wIDE4LjM2NEwxOC4zNjQgMGwyLjU0OCAyLjU0OEwyLjU0OCAyMC45MTJ6Ii8+PC9nPjwvc3ZnPg==); background-size: 8px; width: 8px; line-height: 1; opacity: 0.75; border-radius: 0; } @font-face { font-family: Arial Italic; src: url(../fonts/arial/ARIALI1.TTF); font-weight: 400; font-style: italic; } @font-face { font-family: Arial; src: url(../fonts/arial/ARIAL.TTF); font-weight: 400; font-style: normal; } @font-face { font-family: Noto Sans; src: url(../fonts/Noto_Sans/NotoSans-Thin.ttf); font-weight: 100; font-style: normal; } @font-face { font-family: Noto Sans; src: url(../fonts/Noto_Sans/NotoSans-Regular.ttf); font-weight: 400; font-style: normal; } @font-face { font-family: Noto Sans; src: url(../fonts/Noto_Sans/NotoSans-Light.ttf); font-weight: 300; font-style: normal; } .preloader__logo { background: url(../img/picture/logo.svg) no-repeat center center; background-size: contain; width: 330px; height: 35px; animation: 2s linear infinite opacity; } .choices[data-type*="select-one"]:after { background-image: url('data:image/svg+xml, '); background-repeat: no-repeat; height: clamp(0.375rem, 0.574vw + -0.064rem, 0.625rem); width: clamp(0.688rem, 1.291vw + -0.299rem, 1.25rem); color: #fff; background-size: contain; border: unset; right: clamp(0.938rem, 0.717vw + 0.389rem, 1.25rem); } .select--filter .choices[data-type*="select-one"]:after { background-image: url('data:image/svg+xml, '); height: 10px; background-size: contain; width: 20px; color: #fff; right: unset; left: 20px; } .home__img { width: 40%; height: clamp(18.75rem, 18.651vw + 4.493rem, 26.875rem); background: url(../img/picture/1c.png) no-repeat 0-30px; background-size: contain; position: relative; z-index: 1; mix-blend-mode: luminosity; } .calculator__img:before { content: ""; position: absolute; bottom: 0; right: 0; width: 100%; height: 100%; background: url(../img/picture/calculator-img/bl_01.svg) no-repeat center center; background-size: contain; filter: blur(50px); } .link { display: flex; align-items: center; } .link:hover .link__icon { margin-left: 30px; } .link__text { color: #02c295; font-size: clamp(0.875rem, 0.861vw + 0.217rem, 1.25rem); } .link__icon { background: url(../img/icon/next.svg) no-repeat; background-size: contain; width: 16px; height: clamp(0.938rem, 0.143vw + 0.828rem, 1rem); margin-left: 14px; transition: margin-left 0.38s ease-in-out; } .choices[data-type*="select-one"] .choices__button { background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjEiIGhlaWdodD0iMjEiIHZpZXdCb3g9IjAgMCAyMSAyMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBmaWxsPSIjMDAwIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjxwYXRoIGQ9Ik0yLjU5Mi4wNDRsMTguMzY0IDE4LjM2NC0yLjU0OCAyLjU0OEwuMDQ0IDIuNTkyeiIvPjxwYXRoIGQ9Ik0wIDE4LjM2NEwxOC4zNjQgMGwyLjU0OCAyLjU0OEwyLjU0OCAyMC45MTJ6Ii8+PC9nPjwvc3ZnPg==); padding: 0; background-size: 8px; position: absolute; top: 50%; right: 0; margin-top: -10px; margin-right: 25px; height: 20px; width: 20px; border-radius: 10em; opacity: 0.25; } .choices[data-type*="select-multiple"] .choices__button, .choices[data-type*="text"] .choices__button { position: relative; display: inline-block; margin: 0-4px 0 8px; padding-left: 16px; border-left: 1px solid #003642; background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjEiIGhlaWdodD0iMjEiIHZpZXdCb3g9IjAgMCAyMSAyMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBmaWxsPSIjRkZGIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjxwYXRoIGQ9Ik0yLjU5Mi4wNDRsMTguMzY0IDE4LjM2NC0yLjU0OCAyLjU0OEwuMDQ0IDIuNTkyeiIvPjxwYXRoIGQ9Ik0wIDE4LjM2NEwxOC4zNjQgMGwyLjU0OCAyLjU0OEwyLjU0OCAyMC45MTJ6Ii8+PC9nPjwvc3ZnPg==); background-size: 8px; width: 8px; line-height: 1; opacity: 0.75; border-radius: 0; } @font-face { font-family: Arial Italic; src: url(../fonts/arial/ARIALI1.TTF); font-weight: 400; font-style: italic; } @font-face { font-family: Arial; src: url(../fonts/arial/ARIAL.TTF); font-weight: 400; font-style: normal; } @font-face { font-family: Noto Sans; src: url(../fonts/Noto_Sans/NotoSans-Thin.ttf); font-weight: 100; font-style: normal; } @font-face { font-family: Noto Sans; src: url(../fonts/Noto_Sans/NotoSans-Regular.ttf); font-weight: 400; font-style: normal; } @font-face { font-family: Noto Sans; src: url(../fonts/Noto_Sans/NotoSans-Light.ttf); font-weight: 300; font-style: normal; } .preloader__logo { background: url(../img/picture/logo.svg) no-repeat center center; background-size: contain; width: 330px; height: 35px; animation: 2s linear infinite opacity; } .choices[data-type*="select-one"]:after { background-image: url('data:image/svg+xml, '); background-repeat: no-repeat; height: clamp(0.375rem, 0.574vw + -0.064rem, 0.625rem); width: clamp(0.688rem, 1.291vw + -0.299rem, 1.25rem); color: #fff; background-size: contain; border: unset; right: clamp(0.938rem, 0.717vw + 0.389rem, 1.25rem); } .select--filter .choices[data-type*="select-one"]:after { background-image: url('data:image/svg+xml, '); height: 10px; background-size: contain; width: 20px; color: #fff; right: unset; left: 20px; } .home__img { width: 40%; height: clamp(18.75rem, 18.651vw + 4.493rem, 26.875rem); background: url(../img/picture/1c.png) no-repeat 0-30px; background-size: contain; position: relative; z-index: 1; mix-blend-mode: luminosity; } .calculator__img:before { content: ""; position: absolute; bottom: 0; right: 0; width: 100%; height: 100%; background: url(../img/picture/calculator-img/bl_01.svg) no-repeat center center; background-size: contain; filter: blur(50px); } .swiper-wrapper { -webkit-transition-timing-function: linear !important; transition-timing-function: linear !important; } .slider { width: clamp(37.625rem, 84.362vw + -26.859rem, 74.375rem); } .slider__slide { position: relative; height: auto; display: flex; cursor: pointer; justify-content: center; padding-bottom: clamp(0.5rem, 1.722vw + -0.816rem, 1.25rem); transition: padding-bottom 0.38s ease-in-out; } .slider__slide:after { content: ""; position: absolute; bottom: 0; left: 0; right: 0; height: 2px; background-color: #02c295; transform: scaleX(0); transition: transform 0.38s ease-in-out; } .slider__slide:hover:after { transform: scaleX(1); } .slider__slide:hover .slider__img { opacity: 1; } .slider__slide--active:after { transform: scaleX(1); } .slider__slide--active .slider__img { opacity: 1; } .slider__img { width: auto; height: clamp(3.75rem, 4.304vw + 0.46rem, 5.625rem); object-fit: contain; opacity: 0.5; transition: opacity 0.38s ease-in-out; } @media screen and (max-width: 1023px) { .slider { width: 70%; } } @media screen and (max-width: 576px) { .slider { width: 62%; } .slider__container, .slider__wrapper { height: 100%; } .slider__img { height: 40px; } .slider__slide { padding-bottom: 5px; } } :root { --animate-duration: 1s; --animate-delay: 1s; --animate-repeat: 1; } .animate__animated { -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-duration: var(--animate-duration); animation-duration: var(--animate-duration); -webkit-animation-fill-mode: both; animation-fill-mode: both; } .animate__animated.animate__infinite { -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; } .animate__animated.animate__repeat-1 { -webkit-animation-iteration-count: 1; animation-iteration-count: 1; -webkit-animation-iteration-count: var(--animate-repeat); animation-iteration-count: var(--animate-repeat); } .animate__animated.animate__repeat-2 { -webkit-animation-iteration-count: 2; animation-iteration-count: 2; -webkit-animation-iteration-count: calc(var(--animate-repeat) * 2); animation-iteration-count: calc(var(--animate-repeat) * 2); } .animate__animated.animate__repeat-3 { -webkit-animation-iteration-count: 3; animation-iteration-count: 3; -webkit-animation-iteration-count: calc(var(--animate-repeat) * 3); animation-iteration-count: calc(var(--animate-repeat) * 3); } .animate__animated.animate__delay-1s { -webkit-animation-delay: 1s; animation-delay: 1s; -webkit-animation-delay: var(--animate-delay); animation-delay: var(--animate-delay); } .animate__animated.animate__delay-2s { -webkit-animation-delay: 2s; animation-delay: 2s; -webkit-animation-delay: calc(var(--animate-delay) * 2); animation-delay: calc(var(--animate-delay) * 2); } .animate__animated.animate__delay-3s { -webkit-animation-delay: 3s; animation-delay: 3s; -webkit-animation-delay: calc(var(--animate-delay) * 3); animation-delay: calc(var(--animate-delay) * 3); } .animate__animated.animate__delay-4s { -webkit-animation-delay: 4s; animation-delay: 4s; -webkit-animation-delay: calc(var(--animate-delay) * 4); animation-delay: calc(var(--animate-delay) * 4); } .animate__animated.animate__delay-5s { -webkit-animation-delay: 5s; animation-delay: 5s; -webkit-animation-delay: calc(var(--animate-delay) * 5); animation-delay: calc(var(--animate-delay) * 5); } .animate__animated.animate__faster { -webkit-animation-duration: 0.5s; animation-duration: 0.5s; -webkit-animation-duration: calc(var(--animate-duration) / 2); animation-duration: calc(var(--animate-duration) / 2); } .animate__animated.animate__fast { -webkit-animation-duration: 0.8s; animation-duration: 0.8s; -webkit-animation-duration: calc(var(--animate-duration) * 0.8); animation-duration: calc(var(--animate-duration) * 0.8); } .animate__animated.animate__slow { -webkit-animation-duration: 2s; animation-duration: 2s; -webkit-animation-duration: calc(var(--animate-duration) * 2); animation-duration: calc(var(--animate-duration) * 2); } .animate__animated.animate__slower { -webkit-animation-duration: 3s; animation-duration: 3s; -webkit-animation-duration: calc(var(--animate-duration) * 3); animation-duration: calc(var(--animate-duration) * 3); } @media print, (prefers-reduced-motion: reduce) { .animate__animated { -webkit-animation-duration: 1ms !important; animation-duration: 1ms !important; -webkit-transition-duration: 1ms !important; transition-duration: 1ms !important; -webkit-animation-iteration-count: 1 !important; animation-iteration-count: 1 !important; } .animate__animated[class*="Out"] { opacity: 0; } } @-webkit-keyframes bounce { 0%, 20%, 53%, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); -webkit-transform: translate3d(0, 0, 0); transform: translateZ(0); } 40%, 43% { -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); -webkit-transform: translate3d(0, -30px, 0) scaleY(1.1); transform: translate3d(0, -30px, 0) scaleY(1.1); } 70% { -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); -webkit-transform: translate3d(0, -15px, 0) scaleY(1.05); transform: translate3d(0, -15px, 0) scaleY(1.05); } 80% { -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); -webkit-transform: translate3d(0, 0, 0) scaleY(0.95); transform: translateZ(0) scaleY(0.95); } 90% { -webkit-transform: translate3d(0, -4px, 0) scaleY(1.02); transform: translate3d(0, -4px, 0) scaleY(1.02); } } @keyframes bounce { 0%, 20%, 53%, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); -webkit-transform: translate3d(0, 0, 0); transform: translateZ(0); } 40%, 43% { -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); -webkit-transform: translate3d(0, -30px, 0) scaleY(1.1); transform: translate3d(0, -30px, 0) scaleY(1.1); } 70% { -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); -webkit-transform: translate3d(0, -15px, 0) scaleY(1.05); transform: translate3d(0, -15px, 0) scaleY(1.05); } 80% { -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); -webkit-transform: translate3d(0, 0, 0) scaleY(0.95); transform: translateZ(0) scaleY(0.95); } 90% { -webkit-transform: translate3d(0, -4px, 0) scaleY(1.02); transform: translate3d(0, -4px, 0) scaleY(1.02); } } .animate__bounce { -webkit-animation-name: bounce; animation-name: bounce; -webkit-transform-origin: center bottom; transform-origin: center bottom; } @-webkit-keyframes flash { 0%, 50%, to { opacity: 1; } 25%, 75% { opacity: 0; } } @keyframes flash { 0%, 50%, to { opacity: 1; } 25%, 75% { opacity: 0; } } .animate__flash { -webkit-animation-name: flash; animation-name: flash; } @-webkit-keyframes pulse { 0% { -webkit-transform: scale3d(1, 1, 1); transform: scaleZ(1); } 50% { -webkit-transform: scale3d(1.05, 1.05, 1.05); transform: scale3d(1.05, 1.05, 1.05); } to { -webkit-transform: scale3d(1, 1, 1); transform: scaleZ(1); } } @keyframes pulse { 0% { -webkit-transform: scale3d(1, 1, 1); transform: scaleZ(1); } 50% { -webkit-transform: scale3d(1.05, 1.05, 1.05); transform: scale3d(1.05, 1.05, 1.05); } to { -webkit-transform: scale3d(1, 1, 1); transform: scaleZ(1); } } .animate__pulse { -webkit-animation-name: pulse; animation-name: pulse; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } @-webkit-keyframes rubberBand { 0% { -webkit-transform: scale3d(1, 1, 1); transform: scaleZ(1); } 30% { -webkit-transform: scale3d(1.25, 0.75, 1); transform: scale3d(1.25, 0.75, 1); } 40% { -webkit-transform: scale3d(0.75, 1.25, 1); transform: scale3d(0.75, 1.25, 1); } 50% { -webkit-transform: scale3d(1.15, 0.85, 1); transform: scale3d(1.15, 0.85, 1); } 65% { -webkit-transform: scale3d(0.95, 1.05, 1); transform: scale3d(0.95, 1.05, 1); } 75% { -webkit-transform: scale3d(1.05, 0.95, 1); transform: scale3d(1.05, 0.95, 1); } to { -webkit-transform: scale3d(1, 1, 1); transform: scaleZ(1); } } @keyframes rubberBand { 0% { -webkit-transform: scale3d(1, 1, 1); transform: scaleZ(1); } 30% { -webkit-transform: scale3d(1.25, 0.75, 1); transform: scale3d(1.25, 0.75, 1); } 40% { -webkit-transform: scale3d(0.75, 1.25, 1); transform: scale3d(0.75, 1.25, 1); } 50% { -webkit-transform: scale3d(1.15, 0.85, 1); transform: scale3d(1.15, 0.85, 1); } 65% { -webkit-transform: scale3d(0.95, 1.05, 1); transform: scale3d(0.95, 1.05, 1); } 75% { -webkit-transform: scale3d(1.05, 0.95, 1); transform: scale3d(1.05, 0.95, 1); } to { -webkit-transform: scale3d(1, 1, 1); transform: scaleZ(1); } } .animate__rubberBand { -webkit-animation-name: rubberBand; animation-name: rubberBand; } @-webkit-keyframes shakeX { 0%, to { -webkit-transform: translate3d(0, 0, 0); transform: translateZ(0); } 10%, 30%, 50%, 70%, 90% { -webkit-transform: translate3d(-10px, 0, 0); transform: translate3d(-10px, 0, 0); } 20%, 40%, 60%, 80% { -webkit-transform: translate3d(10px, 0, 0); transform: translate3d(10px, 0, 0); } } @keyframes shakeX { 0%, to { -webkit-transform: translate3d(0, 0, 0); transform: translateZ(0); } 10%, 30%, 50%, 70%, 90% { -webkit-transform: translate3d(-10px, 0, 0); transform: translate3d(-10px, 0, 0); } 20%, 40%, 60%, 80% { -webkit-transform: translate3d(10px, 0, 0); transform: translate3d(10px, 0, 0); } } .animate__shakeX { -webkit-animation-name: shakeX; animation-name: shakeX; } @-webkit-keyframes shakeY { 0%, to { -webkit-transform: translate3d(0, 0, 0); transform: translateZ(0); } 10%, 30%, 50%, 70%, 90% { -webkit-transform: translate3d(0, -10px, 0); transform: translate3d(0, -10px, 0); } 20%, 40%, 60%, 80% { -webkit-transform: translate3d(0, 10px, 0); transform: translate3d(0, 10px, 0); } } @keyframes shakeY { 0%, to { -webkit-transform: translate3d(0, 0, 0); transform: translateZ(0); } 10%, 30%, 50%, 70%, 90% { -webkit-transform: translate3d(0, -10px, 0); transform: translate3d(0, -10px, 0); } 20%, 40%, 60%, 80% { -webkit-transform: translate3d(0, 10px, 0); transform: translate3d(0, 10px, 0); } } .animate__shakeY { -webkit-animation-name: shakeY; animation-name: shakeY; } @-webkit-keyframes headShake { 0% { -webkit-transform: translateX(0); transform: translate(0); } 6.5% { -webkit-transform: translateX(-6px) rotateY(-9deg); transform: translate(-6px) rotateY(-9deg); } 18.5% { -webkit-transform: translateX(5px) rotateY(7deg); transform: translate(5px) rotateY(7deg); } 31.5% { -webkit-transform: translateX(-3px) rotateY(-5deg); transform: translate(-3px) rotateY(-5deg); } 43.5% { -webkit-transform: translateX(2px) rotateY(3deg); transform: translate(2px) rotateY(3deg); } 50% { -webkit-transform: translateX(0); transform: translate(0); } } @keyframes headShake { 0% { -webkit-transform: translateX(0); transform: translate(0); } 6.5% { -webkit-transform: translateX(-6px) rotateY(-9deg); transform: translate(-6px) rotateY(-9deg); } 18.5% { -webkit-transform: translateX(5px) rotateY(7deg); transform: translate(5px) rotateY(7deg); } 31.5% { -webkit-transform: translateX(-3px) rotateY(-5deg); transform: translate(-3px) rotateY(-5deg); } 43.5% { -webkit-transform: translateX(2px) rotateY(3deg); transform: translate(2px) rotateY(3deg); } 50% { -webkit-transform: translateX(0); transform: translate(0); } } .animate__headShake { -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; -webkit-animation-name: headShake; animation-name: headShake; } @-webkit-keyframes swing { 20% { -webkit-transform: rotate3d(0, 0, 1, 15deg); transform: rotate3d(0, 0, 1, 15deg); } 40% { -webkit-transform: rotate3d(0, 0, 1, -10deg); transform: rotate3d(0, 0, 1, -10deg); } 60% { -webkit-transform: rotate3d(0, 0, 1, 5deg); transform: rotate3d(0, 0, 1, 5deg); } 80% { -webkit-transform: rotate3d(0, 0, 1, -5deg); transform: rotate3d(0, 0, 1, -5deg); } to { -webkit-transform: rotate3d(0, 0, 1, 0deg); transform: rotate3d(0, 0, 1, 0); } } @keyframes swing { 20% { -webkit-transform: rotate3d(0, 0, 1, 15deg); transform: rotate3d(0, 0, 1, 15deg); } 40% { -webkit-transform: rotate3d(0, 0, 1, -10deg); transform: rotate3d(0, 0, 1, -10deg); } 60% { -webkit-transform: rotate3d(0, 0, 1, 5deg); transform: rotate3d(0, 0, 1, 5deg); } 80% { -webkit-transform: rotate3d(0, 0, 1, -5deg); transform: rotate3d(0, 0, 1, -5deg); } to { -webkit-transform: rotate3d(0, 0, 1, 0deg); transform: rotate3d(0, 0, 1, 0); } } .animate__swing { -webkit-transform-origin: top center; transform-origin: top center; -webkit-animation-name: swing; animation-name: swing; } @-webkit-keyframes tada { 0% { -webkit-transform: scale3d(1, 1, 1); transform: scaleZ(1); } 10%, 20% { -webkit-transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg); transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg); } 30%, 50%, 70%, 90% { -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg); transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg); } 40%, 60%, 80% { -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg); transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg); } to { -webkit-transform: scale3d(1, 1, 1); transform: scaleZ(1); } } @keyframes tada { 0% { -webkit-transform: scale3d(1, 1, 1); transform: scaleZ(1); } 10%, 20% { -webkit-transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg); transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg); } 30%, 50%, 70%, 90% { -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg); transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg); } 40%, 60%, 80% { -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg); transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg); } to { -webkit-transform: scale3d(1, 1, 1); transform: scaleZ(1); } } .animate__tada { -webkit-animation-name: tada; animation-name: tada; } @-webkit-keyframes wobble { 0% { -webkit-transform: translate3d(0, 0, 0); transform: translateZ(0); } 15% { -webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg); transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg); } 30% { -webkit-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg); transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg); } 45% { -webkit-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg); transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg); } 60% { -webkit-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg); transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg); } 75% { -webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg); transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg); } to { -webkit-transform: translate3d(0, 0, 0); transform: translateZ(0); } } @keyframes wobble { 0% { -webkit-transform: translate3d(0, 0, 0); transform: translateZ(0); } 15% { -webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg); transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg); } 30% { -webkit-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg); transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg); } 45% { -webkit-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg); transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg); } 60% { -webkit-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg); transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg); } 75% { -webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg); transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg); } to { -webkit-transform: translate3d(0, 0, 0); transform: translateZ(0); } } .animate__wobble { -webkit-animation-name: wobble; animation-name: wobble; } @-webkit-keyframes jello { 0%, 11.1%, to { -webkit-transform: translate3d(0, 0, 0); transform: translateZ(0); } 22.2% { -webkit-transform: skewX(-12.5deg) skewY(-12.5deg); transform: skew(-12.5deg) skewY(-12.5deg); } 33.3% { -webkit-transform: skewX(6.25deg) skewY(6.25deg); transform: skew(6.25deg) skewY(6.25deg); } 44.4% { -webkit-transform: skewX(-3.125deg) skewY(-3.125deg); transform: skew(-3.125deg) skewY(-3.125deg); } 55.5% { -webkit-transform: skewX(1.5625deg) skewY(1.5625deg); transform: skew(1.5625deg) skewY(1.5625deg); } 66.6% { -webkit-transform: skewX(-0.78125deg) skewY(-0.78125deg); transform: skew(-0.78125deg) skewY(-0.78125deg); } 77.7% { -webkit-transform: skewX(0.390625deg) skewY(0.390625deg); transform: skew(0.390625deg) skewY(0.390625deg); } 88.8% { -webkit-transform: skewX(-0.1953125deg) skewY(-0.1953125deg); transform: skew(-0.1953125deg) skewY(-0.1953125deg); } } @keyframes jello { 0%, 11.1%, to { -webkit-transform: translate3d(0, 0, 0); transform: translateZ(0); } 22.2% { -webkit-transform: skewX(-12.5deg) skewY(-12.5deg); transform: skew(-12.5deg) skewY(-12.5deg); } 33.3% { -webkit-transform: skewX(6.25deg) skewY(6.25deg); transform: skew(6.25deg) skewY(6.25deg); } 44.4% { -webkit-transform: skewX(-3.125deg) skewY(-3.125deg); transform: skew(-3.125deg) skewY(-3.125deg); } 55.5% { -webkit-transform: skewX(1.5625deg) skewY(1.5625deg); transform: skew(1.5625deg) skewY(1.5625deg); } 66.6% { -webkit-transform: skewX(-0.78125deg) skewY(-0.78125deg); transform: skew(-0.78125deg) skewY(-0.78125deg); } 77.7% { -webkit-transform: skewX(0.390625deg) skewY(0.390625deg); transform: skew(0.390625deg) skewY(0.390625deg); } 88.8% { -webkit-transform: skewX(-0.1953125deg) skewY(-0.1953125deg); transform: skew(-0.1953125deg) skewY(-0.1953125deg); } } .animate__jello { -webkit-animation-name: jello; animation-name: jello; -webkit-transform-origin: center; transform-origin: center; } @-webkit-keyframes heartBeat { 0% { -webkit-transform: scale(1); transform: scale(1); } 14% { -webkit-transform: scale(1.3); transform: scale(1.3); } 28% { -webkit-transform: scale(1); transform: scale(1); } 42% { -webkit-transform: scale(1.3); transform: scale(1.3); } 70% { -webkit-transform: scale(1); transform: scale(1); } } @keyframes heartBeat { 0% { -webkit-transform: scale(1); transform: scale(1); } 14% { -webkit-transform: scale(1.3); transform: scale(1.3); } 28% { -webkit-transform: scale(1); transform: scale(1); } 42% { -webkit-transform: scale(1.3); transform: scale(1.3); } 70% { -webkit-transform: scale(1); transform: scale(1); } } .animate__heartBeat { -webkit-animation-name: heartBeat; animation-name: heartBeat; -webkit-animation-duration: 1.3s; animation-duration: 1.3s; -webkit-animation-duration: calc(var(--animate-duration) * 1.3); animation-duration: calc(var(--animate-duration) * 1.3); -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } @-webkit-keyframes backInDown { 0% { -webkit-transform: translateY(-1200px) scale(0.7); transform: translateY(-1200px) scale(0.7); opacity: 0.7; } 80% { -webkit-transform: translateY(0) scale(0.7); transform: translateY(0) scale(0.7); opacity: 0.7; } to { -webkit-transform: scale(1); transform: scale(1); opacity: 1; } } @keyframes backInDown { 0% { -webkit-transform: translateY(-1200px) scale(0.7); transform: translateY(-1200px) scale(0.7); opacity: 0.7; } 80% { -webkit-transform: translateY(0) scale(0.7); transform: translateY(0) scale(0.7); opacity: 0.7; } to { -webkit-transform: scale(1); transform: scale(1); opacity: 1; } } .animate__backInDown { -webkit-animation-name: backInDown; animation-name: backInDown; } @-webkit-keyframes backInLeft { 0% { -webkit-transform: translateX(-2000px) scale(0.7); transform: translate(-2000px) scale(0.7); opacity: 0.7; } 80% { -webkit-transform: translateX(0) scale(0.7); transform: translate(0) scale(0.7); opacity: 0.7; } to { -webkit-transform: scale(1); transform: scale(1); opacity: 1; } } @keyframes backInLeft { 0% { -webkit-transform: translateX(-2000px) scale(0.7); transform: translate(-2000px) scale(0.7); opacity: 0.7; } 80% { -webkit-transform: translateX(0) scale(0.7); transform: translate(0) scale(0.7); opacity: 0.7; } to { -webkit-transform: scale(1); transform: scale(1); opacity: 1; } } .animate__backInLeft { -webkit-animation-name: backInLeft; animation-name: backInLeft; } @-webkit-keyframes backInRight { 0% { -webkit-transform: translateX(2000px) scale(0.7); transform: translate(2000px) scale(0.7); opacity: 0.7; } 80% { -webkit-transform: translateX(0) scale(0.7); transform: translate(0) scale(0.7); opacity: 0.7; } to { -webkit-transform: scale(1); transform: scale(1); opacity: 1; } } @keyframes backInRight { 0% { -webkit-transform: translateX(2000px) scale(0.7); transform: translate(2000px) scale(0.7); opacity: 0.7; } 80% { -webkit-transform: translateX(0) scale(0.7); transform: translate(0) scale(0.7); opacity: 0.7; } to { -webkit-transform: scale(1); transform: scale(1); opacity: 1; } } .animate__backInRight { -webkit-animation-name: backInRight; animation-name: backInRight; } @-webkit-keyframes backInUp { 0% { -webkit-transform: translateY(1200px) scale(0.7); transform: translateY(1200px) scale(0.7); opacity: 0.7; } 80% { -webkit-transform: translateY(0) scale(0.7); transform: translateY(0) scale(0.7); opacity: 0.7; } to { -webkit-transform: scale(1); transform: scale(1); opacity: 1; } } @keyframes backInUp { 0% { -webkit-transform: translateY(1200px) scale(0.7); transform: translateY(1200px) scale(0.7); opacity: 0.7; } 80% { -webkit-transform: translateY(0) scale(0.7); transform: translateY(0) scale(0.7); opacity: 0.7; } to { -webkit-transform: scale(1); transform: scale(1); opacity: 1; } } .animate__backInUp { -webkit-animation-name: backInUp; animation-name: backInUp; } @-webkit-keyframes backOutDown { 0% { -webkit-transform: scale(1); transform: scale(1); opacity: 1; } 20% { -webkit-transform: translateY(0) scale(0.7); transform: translateY(0) scale(0.7); opacity: 0.7; } to { -webkit-transform: translateY(700px) scale(0.7); transform: translateY(700px) scale(0.7); opacity: 0.7; } } @keyframes backOutDown { 0% { -webkit-transform: scale(1); transform: scale(1); opacity: 1; } 20% { -webkit-transform: translateY(0) scale(0.7); transform: translateY(0) scale(0.7); opacity: 0.7; } to { -webkit-transform: translateY(700px) scale(0.7); transform: translateY(700px) scale(0.7); opacity: 0.7; } } .animate__backOutDown { -webkit-animation-name: backOutDown; animation-name: backOutDown; } @-webkit-keyframes backOutLeft { 0% { -webkit-transform: scale(1); transform: scale(1); opacity: 1; } 20% { -webkit-transform: translateX(0) scale(0.7); transform: translate(0) scale(0.7); opacity: 0.7; } to { -webkit-transform: translateX(-2000px) scale(0.7); transform: translate(-2000px) scale(0.7); opacity: 0.7; } } @keyframes backOutLeft { 0% { -webkit-transform: scale(1); transform: scale(1); opacity: 1; } 20% { -webkit-transform: translateX(0) scale(0.7); transform: translate(0) scale(0.7); opacity: 0.7; } to { -webkit-transform: translateX(-2000px) scale(0.7); transform: translate(-2000px) scale(0.7); opacity: 0.7; } } .animate__backOutLeft { -webkit-animation-name: backOutLeft; animation-name: backOutLeft; } @-webkit-keyframes backOutRight { 0% { -webkit-transform: scale(1); transform: scale(1); opacity: 1; } 20% { -webkit-transform: translateX(0) scale(0.7); transform: translate(0) scale(0.7); opacity: 0.7; } to { -webkit-transform: translateX(2000px) scale(0.7); transform: translate(2000px) scale(0.7); opacity: 0.7; } } @keyframes backOutRight { 0% { -webkit-transform: scale(1); transform: scale(1); opacity: 1; } 20% { -webkit-transform: translateX(0) scale(0.7); transform: translate(0) scale(0.7); opacity: 0.7; } to { -webkit-transform: translateX(2000px) scale(0.7); transform: translate(2000px) scale(0.7); opacity: 0.7; } } .animate__backOutRight { -webkit-animation-name: backOutRight; animation-name: backOutRight; } @-webkit-keyframes backOutUp { 0% { -webkit-transform: scale(1); transform: scale(1); opacity: 1; } 20% { -webkit-transform: translateY(0) scale(0.7); transform: translateY(0) scale(0.7); opacity: 0.7; } to { -webkit-transform: translateY(-700px) scale(0.7); transform: translateY(-700px) scale(0.7); opacity: 0.7; } } @keyframes backOutUp { 0% { -webkit-transform: scale(1); transform: scale(1); opacity: 1; } 20% { -webkit-transform: translateY(0) scale(0.7); transform: translateY(0) scale(0.7); opacity: 0.7; } to { -webkit-transform: translateY(-700px) scale(0.7); transform: translateY(-700px) scale(0.7); opacity: 0.7; } } .animate__backOutUp { -webkit-animation-name: backOutUp; animation-name: backOutUp; } @-webkit-keyframes bounceIn { 0%, 20%, 40%, 60%, 80%, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } 0% { opacity: 0; -webkit-transform: scale3d(0.3, 0.3, 0.3); transform: scale3d(0.3, 0.3, 0.3); } 20% { -webkit-transform: scale3d(1.1, 1.1, 1.1); transform: scale3d(1.1, 1.1, 1.1); } 40% { -webkit-transform: scale3d(0.9, 0.9, 0.9); transform: scale3d(0.9, 0.9, 0.9); } 60% { opacity: 1; -webkit-transform: scale3d(1.03, 1.03, 1.03); transform: scale3d(1.03, 1.03, 1.03); } 80% { -webkit-transform: scale3d(0.97, 0.97, 0.97); transform: scale3d(0.97, 0.97, 0.97); } to { opacity: 1; -webkit-transform: scale3d(1, 1, 1); transform: scaleZ(1); } } @keyframes bounceIn { 0%, 20%, 40%, 60%, 80%, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } 0% { opacity: 0; -webkit-transform: scale3d(0.3, 0.3, 0.3); transform: scale3d(0.3, 0.3, 0.3); } 20% { -webkit-transform: scale3d(1.1, 1.1, 1.1); transform: scale3d(1.1, 1.1, 1.1); } 40% { -webkit-transform: scale3d(0.9, 0.9, 0.9); transform: scale3d(0.9, 0.9, 0.9); } 60% { opacity: 1; -webkit-transform: scale3d(1.03, 1.03, 1.03); transform: scale3d(1.03, 1.03, 1.03); } 80% { -webkit-transform: scale3d(0.97, 0.97, 0.97); transform: scale3d(0.97, 0.97, 0.97); } to { opacity: 1; -webkit-transform: scale3d(1, 1, 1); transform: scaleZ(1); } } .animate__bounceIn { -webkit-animation-duration: 0.75s; animation-duration: 0.75s; -webkit-animation-duration: calc(var(--animate-duration) * 0.75); animation-duration: calc(var(--animate-duration) * 0.75); -webkit-animation-name: bounceIn; animation-name: bounceIn; } @-webkit-keyframes bounceInDown { 0%, 60%, 75%, 90%, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } 0% { opacity: 0; -webkit-transform: translate3d(0, -3000px, 0) scaleY(3); transform: translate3d(0, -3000px, 0) scaleY(3); } 60% { opacity: 1; -webkit-transform: translate3d(0, 25px, 0) scaleY(0.9); transform: translate3d(0, 25px, 0) scaleY(0.9); } 75% { -webkit-transform: translate3d(0, -10px, 0) scaleY(0.95); transform: translate3d(0, -10px, 0) scaleY(0.95); } 90% { -webkit-transform: translate3d(0, 5px, 0) scaleY(0.985); transform: translate3d(0, 5px, 0) scaleY(0.985); } to { -webkit-transform: translate3d(0, 0, 0); transform: translateZ(0); } } @keyframes bounceInDown { 0%, 60%, 75%, 90%, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } 0% { opacity: 0; -webkit-transform: translate3d(0, -3000px, 0) scaleY(3); transform: translate3d(0, -3000px, 0) scaleY(3); } 60% { opacity: 1; -webkit-transform: translate3d(0, 25px, 0) scaleY(0.9); transform: translate3d(0, 25px, 0) scaleY(0.9); } 75% { -webkit-transform: translate3d(0, -10px, 0) scaleY(0.95); transform: translate3d(0, -10px, 0) scaleY(0.95); } 90% { -webkit-transform: translate3d(0, 5px, 0) scaleY(0.985); transform: translate3d(0, 5px, 0) scaleY(0.985); } to { -webkit-transform: translate3d(0, 0, 0); transform: translateZ(0); } } .animate__bounceInDown { -webkit-animation-name: bounceInDown; animation-name: bounceInDown; } @-webkit-keyframes bounceInLeft { 0%, 60%, 75%, 90%, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } 0% { opacity: 0; -webkit-transform: translate3d(-3000px, 0, 0) scaleX(3); transform: translate3d(-3000px, 0, 0) scaleX(3); } 60% { opacity: 1; -webkit-transform: translate3d(25px, 0, 0) scaleX(1); transform: translate3d(25px, 0, 0) scaleX(1); } 75% { -webkit-transform: translate3d(-10px, 0, 0) scaleX(0.98); transform: translate3d(-10px, 0, 0) scaleX(0.98); } 90% { -webkit-transform: translate3d(5px, 0, 0) scaleX(0.995); transform: translate3d(5px, 0, 0) scaleX(0.995); } to { -webkit-transform: translate3d(0, 0, 0); transform: translateZ(0); } } @keyframes bounceInLeft { 0%, 60%, 75%, 90%, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } 0% { opacity: 0; -webkit-transform: translate3d(-3000px, 0, 0) scaleX(3); transform: translate3d(-3000px, 0, 0) scaleX(3); } 60% { opacity: 1; -webkit-transform: translate3d(25px, 0, 0) scaleX(1); transform: translate3d(25px, 0, 0) scaleX(1); } 75% { -webkit-transform: translate3d(-10px, 0, 0) scaleX(0.98); transform: translate3d(-10px, 0, 0) scaleX(0.98); } 90% { -webkit-transform: translate3d(5px, 0, 0) scaleX(0.995); transform: translate3d(5px, 0, 0) scaleX(0.995); } to { -webkit-transform: translate3d(0, 0, 0); transform: translateZ(0); } } .animate__bounceInLeft { -webkit-animation-name: bounceInLeft; animation-name: bounceInLeft; } @-webkit-keyframes bounceInRight { 0%, 60%, 75%, 90%, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } 0% { opacity: 0; -webkit-transform: translate3d(3000px, 0, 0) scaleX(3); transform: translate3d(3000px, 0, 0) scaleX(3); } 60% { opacity: 1; -webkit-transform: translate3d(-25px, 0, 0) scaleX(1); transform: translate3d(-25px, 0, 0) scaleX(1); } 75% { -webkit-transform: translate3d(10px, 0, 0) scaleX(0.98); transform: translate3d(10px, 0, 0) scaleX(0.98); } 90% { -webkit-transform: translate3d(-5px, 0, 0) scaleX(0.995); transform: translate3d(-5px, 0, 0) scaleX(0.995); } to { -webkit-transform: translate3d(0, 0, 0); transform: translateZ(0); } } @keyframes bounceInRight { 0%, 60%, 75%, 90%, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } 0% { opacity: 0; -webkit-transform: translate3d(3000px, 0, 0) scaleX(3); transform: translate3d(3000px, 0, 0) scaleX(3); } 60% { opacity: 1; -webkit-transform: translate3d(-25px, 0, 0) scaleX(1); transform: translate3d(-25px, 0, 0) scaleX(1); } 75% { -webkit-transform: translate3d(10px, 0, 0) scaleX(0.98); transform: translate3d(10px, 0, 0) scaleX(0.98); } 90% { -webkit-transform: translate3d(-5px, 0, 0) scaleX(0.995); transform: translate3d(-5px, 0, 0) scaleX(0.995); } to { -webkit-transform: translate3d(0, 0, 0); transform: translateZ(0); } } .animate__bounceInRight { -webkit-animation-name: bounceInRight; animation-name: bounceInRight; } @-webkit-keyframes bounceInUp { 0%, 60%, 75%, 90%, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } 0% { opacity: 0; -webkit-transform: translate3d(0, 3000px, 0) scaleY(5); transform: translate3d(0, 3000px, 0) scaleY(5); } 60% { opacity: 1; -webkit-transform: translate3d(0, -20px, 0) scaleY(0.9); transform: translate3d(0, -20px, 0) scaleY(0.9); } 75% { -webkit-transform: translate3d(0, 10px, 0) scaleY(0.95); transform: translate3d(0, 10px, 0) scaleY(0.95); } 90% { -webkit-transform: translate3d(0, -5px, 0) scaleY(0.985); transform: translate3d(0, -5px, 0) scaleY(0.985); } to { -webkit-transform: translate3d(0, 0, 0); transform: translateZ(0); } } @keyframes bounceInUp { 0%, 60%, 75%, 90%, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } 0% { opacity: 0; -webkit-transform: translate3d(0, 3000px, 0) scaleY(5); transform: translate3d(0, 3000px, 0) scaleY(5); } 60% { opacity: 1; -webkit-transform: translate3d(0, -20px, 0) scaleY(0.9); transform: translate3d(0, -20px, 0) scaleY(0.9); } 75% { -webkit-transform: translate3d(0, 10px, 0) scaleY(0.95); transform: translate3d(0, 10px, 0) scaleY(0.95); } 90% { -webkit-transform: translate3d(0, -5px, 0) scaleY(0.985); transform: translate3d(0, -5px, 0) scaleY(0.985); } to { -webkit-transform: translate3d(0, 0, 0); transform: translateZ(0); } } .animate__bounceInUp { -webkit-animation-name: bounceInUp; animation-name: bounceInUp; } @-webkit-keyframes bounceOut { 20% { -webkit-transform: scale3d(0.9, 0.9, 0.9); transform: scale3d(0.9, 0.9, 0.9); } 50%, 55% { opacity: 1; -webkit-transform: scale3d(1.1, 1.1, 1.1); transform: scale3d(1.1, 1.1, 1.1); } to { opacity: 0; -webkit-transform: scale3d(0.3, 0.3, 0.3); transform: scale3d(0.3, 0.3, 0.3); } } @keyframes bounceOut { 20% { -webkit-transform: scale3d(0.9, 0.9, 0.9); transform: scale3d(0.9, 0.9, 0.9); } 50%, 55% { opacity: 1; -webkit-transform: scale3d(1.1, 1.1, 1.1); transform: scale3d(1.1, 1.1, 1.1); } to { opacity: 0; -webkit-transform: scale3d(0.3, 0.3, 0.3); transform: scale3d(0.3, 0.3, 0.3); } } .animate__bounceOut { -webkit-animation-duration: 0.75s; animation-duration: 0.75s; -webkit-animation-duration: calc(var(--animate-duration) * 0.75); animation-duration: calc(var(--animate-duration) * 0.75); -webkit-animation-name: bounceOut; animation-name: bounceOut; } @-webkit-keyframes bounceOutDown { 20% { -webkit-transform: translate3d(0, 10px, 0) scaleY(0.985); transform: translate3d(0, 10px, 0) scaleY(0.985); } 40%, 45% { opacity: 1; -webkit-transform: translate3d(0, -20px, 0) scaleY(0.9); transform: translate3d(0, -20px, 0) scaleY(0.9); } to { opacity: 0; -webkit-transform: translate3d(0, 2000px, 0) scaleY(3); transform: translate3d(0, 2000px, 0) scaleY(3); } } @keyframes bounceOutDown { 20% { -webkit-transform: translate3d(0, 10px, 0) scaleY(0.985); transform: translate3d(0, 10px, 0) scaleY(0.985); } 40%, 45% { opacity: 1; -webkit-transform: translate3d(0, -20px, 0) scaleY(0.9); transform: translate3d(0, -20px, 0) scaleY(0.9); } to { opacity: 0; -webkit-transform: translate3d(0, 2000px, 0) scaleY(3); transform: translate3d(0, 2000px, 0) scaleY(3); } } .animate__bounceOutDown { -webkit-animation-name: bounceOutDown; animation-name: bounceOutDown; } @-webkit-keyframes bounceOutLeft { 20% { opacity: 1; -webkit-transform: translate3d(20px, 0, 0) scaleX(0.9); transform: translate3d(20px, 0, 0) scaleX(0.9); } to { opacity: 0; -webkit-transform: translate3d(-2000px, 0, 0) scaleX(2); transform: translate3d(-2000px, 0, 0) scaleX(2); } } @keyframes bounceOutLeft { 20% { opacity: 1; -webkit-transform: translate3d(20px, 0, 0) scaleX(0.9); transform: translate3d(20px, 0, 0) scaleX(0.9); } to { opacity: 0; -webkit-transform: translate3d(-2000px, 0, 0) scaleX(2); transform: translate3d(-2000px, 0, 0) scaleX(2); } } .animate__bounceOutLeft { -webkit-animation-name: bounceOutLeft; animation-name: bounceOutLeft; } @-webkit-keyframes bounceOutRight { 20% { opacity: 1; -webkit-transform: translate3d(-20px, 0, 0) scaleX(0.9); transform: translate3d(-20px, 0, 0) scaleX(0.9); } to { opacity: 0; -webkit-transform: translate3d(2000px, 0, 0) scaleX(2); transform: translate3d(2000px, 0, 0) scaleX(2); } } @keyframes bounceOutRight { 20% { opacity: 1; -webkit-transform: translate3d(-20px, 0, 0) scaleX(0.9); transform: translate3d(-20px, 0, 0) scaleX(0.9); } to { opacity: 0; -webkit-transform: translate3d(2000px, 0, 0) scaleX(2); transform: translate3d(2000px, 0, 0) scaleX(2); } } .animate__bounceOutRight { -webkit-animation-name: bounceOutRight; animation-name: bounceOutRight; } @-webkit-keyframes bounceOutUp { 20% { -webkit-transform: translate3d(0, -10px, 0) scaleY(0.985); transform: translate3d(0, -10px, 0) scaleY(0.985); } 40%, 45% { opacity: 1; -webkit-transform: translate3d(0, 20px, 0) scaleY(0.9); transform: translate3d(0, 20px, 0) scaleY(0.9); } to { opacity: 0; -webkit-transform: translate3d(0, -2000px, 0) scaleY(3); transform: translate3d(0, -2000px, 0) scaleY(3); } } @keyframes bounceOutUp { 20% { -webkit-transform: translate3d(0, -10px, 0) scaleY(0.985); transform: translate3d(0, -10px, 0) scaleY(0.985); } 40%, 45% { opacity: 1; -webkit-transform: translate3d(0, 20px, 0) scaleY(0.9); transform: translate3d(0, 20px, 0) scaleY(0.9); } to { opacity: 0; -webkit-transform: translate3d(0, -2000px, 0) scaleY(3); transform: translate3d(0, -2000px, 0) scaleY(3); } } .animate__bounceOutUp { -webkit-animation-name: bounceOutUp; animation-name: bounceOutUp; } @-webkit-keyframes fadeIn { 0% { opacity: 0; } to { opacity: 1; } } @keyframes fadeIn { 0% { opacity: 0; } to { opacity: 1; } } .animate__fadeIn { -webkit-animation-name: fadeIn; animation-name: fadeIn; } @-webkit-keyframes fadeInDown { 0% { opacity: 0; -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translateZ(0); } } @keyframes fadeInDown { 0% { opacity: 0; -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translateZ(0); } } .animate__fadeInDown { -webkit-animation-name: fadeInDown; animation-name: fadeInDown; } @-webkit-keyframes fadeInDownBig { 0% { opacity: 0; -webkit-transform: translate3d(0, -2000px, 0); transform: translate3d(0, -2000px, 0); } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translateZ(0); } } @keyframes fadeInDownBig { 0% { opacity: 0; -webkit-transform: translate3d(0, -2000px, 0); transform: translate3d(0, -2000px, 0); } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translateZ(0); } } .animate__fadeInDownBig { -webkit-animation-name: fadeInDownBig; animation-name: fadeInDownBig; } @-webkit-keyframes fadeInLeft { 0% { opacity: 0; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translateZ(0); } } @keyframes fadeInLeft { 0% { opacity: 0; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translateZ(0); } } .animate__fadeInLeft { -webkit-animation-name: fadeInLeft; animation-name: fadeInLeft; } @-webkit-keyframes fadeInLeftBig { 0% { opacity: 0; -webkit-transform: translate3d(-2000px, 0, 0); transform: translate3d(-2000px, 0, 0); } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translateZ(0); } } @keyframes fadeInLeftBig { 0% { opacity: 0; -webkit-transform: translate3d(-2000px, 0, 0); transform: translate3d(-2000px, 0, 0); } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translateZ(0); } } .animate__fadeInLeftBig { -webkit-animation-name: fadeInLeftBig; animation-name: fadeInLeftBig; } @-webkit-keyframes fadeInRight { 0% { opacity: 0; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translateZ(0); } } @keyframes fadeInRight { 0% { opacity: 0; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translateZ(0); } } .animate__fadeInRight { -webkit-animation-name: fadeInRight; animation-name: fadeInRight; } @-webkit-keyframes fadeInRightBig { 0% { opacity: 0; -webkit-transform: translate3d(2000px, 0, 0); transform: translate3d(2000px, 0, 0); } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translateZ(0); } } @keyframes fadeInRightBig { 0% { opacity: 0; -webkit-transform: translate3d(2000px, 0, 0); transform: translate3d(2000px, 0, 0); } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translateZ(0); } } .animate__fadeInRightBig { -webkit-animation-name: fadeInRightBig; animation-name: fadeInRightBig; } @-webkit-keyframes fadeInUp { 0% { opacity: 0; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translateZ(0); } } @keyframes fadeInUp { 0% { opacity: 0; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translateZ(0); } } .animate__fadeInUp { -webkit-animation-name: fadeInUp; animation-name: fadeInUp; } @-webkit-keyframes fadeInUpBig { 0% { opacity: 0; -webkit-transform: translate3d(0, 2000px, 0); transform: translate3d(0, 2000px, 0); } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translateZ(0); } } @keyframes fadeInUpBig { 0% { opacity: 0; -webkit-transform: translate3d(0, 2000px, 0); transform: translate3d(0, 2000px, 0); } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translateZ(0); } } .animate__fadeInUpBig { -webkit-animation-name: fadeInUpBig; animation-name: fadeInUpBig; } @-webkit-keyframes fadeInTopLeft { 0% { opacity: 0; -webkit-transform: translate3d(-100%, -100%, 0); transform: translate3d(-100%, -100%, 0); } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translateZ(0); } } @keyframes fadeInTopLeft { 0% { opacity: 0; -webkit-transform: translate3d(-100%, -100%, 0); transform: translate3d(-100%, -100%, 0); } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translateZ(0); } } .animate__fadeInTopLeft { -webkit-animation-name: fadeInTopLeft; animation-name: fadeInTopLeft; } @-webkit-keyframes fadeInTopRight { 0% { opacity: 0; -webkit-transform: translate3d(100%, -100%, 0); transform: translate3d(100%, -100%, 0); } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translateZ(0); } } @keyframes fadeInTopRight { 0% { opacity: 0; -webkit-transform: translate3d(100%, -100%, 0); transform: translate3d(100%, -100%, 0); } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translateZ(0); } } .animate__fadeInTopRight { -webkit-animation-name: fadeInTopRight; animation-name: fadeInTopRight; } @-webkit-keyframes fadeInBottomLeft { 0% { opacity: 0; -webkit-transform: translate3d(-100%, 100%, 0); transform: translate3d(-100%, 100%, 0); } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translateZ(0); } } @keyframes fadeInBottomLeft { 0% { opacity: 0; -webkit-transform: translate3d(-100%, 100%, 0); transform: translate3d(-100%, 100%, 0); } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translateZ(0); } } .animate__fadeInBottomLeft { -webkit-animation-name: fadeInBottomLeft; animation-name: fadeInBottomLeft; } @-webkit-keyframes fadeInBottomRight { 0% { opacity: 0; -webkit-transform: translate3d(100%, 100%, 0); transform: translate3d(100%, 100%, 0); } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translateZ(0); } } @keyframes fadeInBottomRight { 0% { opacity: 0; -webkit-transform: translate3d(100%, 100%, 0); transform: translate3d(100%, 100%, 0); } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translateZ(0); } } .animate__fadeInBottomRight { -webkit-animation-name: fadeInBottomRight; animation-name: fadeInBottomRight; } @-webkit-keyframes fadeOut { 0% { opacity: 1; } to { opacity: 0; } } @keyframes fadeOut { 0% { opacity: 1; } to { opacity: 0; } } .animate__fadeOut { -webkit-animation-name: fadeOut; animation-name: fadeOut; } @-webkit-keyframes fadeOutDown { 0% { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } } @keyframes fadeOutDown { 0% { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } } .animate__fadeOutDown { -webkit-animation-name: fadeOutDown; animation-name: fadeOutDown; } @-webkit-keyframes fadeOutDownBig { 0% { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(0, 2000px, 0); transform: translate3d(0, 2000px, 0); } } @keyframes fadeOutDownBig { 0% { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(0, 2000px, 0); transform: translate3d(0, 2000px, 0); } } .animate__fadeOutDownBig { -webkit-animation-name: fadeOutDownBig; animation-name: fadeOutDownBig; } @-webkit-keyframes fadeOutLeft { 0% { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } } @keyframes fadeOutLeft { 0% { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } } .animate__fadeOutLeft { -webkit-animation-name: fadeOutLeft; animation-name: fadeOutLeft; } @-webkit-keyframes fadeOutLeftBig { 0% { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(-2000px, 0, 0); transform: translate3d(-2000px, 0, 0); } } @keyframes fadeOutLeftBig { 0% { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(-2000px, 0, 0); transform: translate3d(-2000px, 0, 0); } } .animate__fadeOutLeftBig { -webkit-animation-name: fadeOutLeftBig; animation-name: fadeOutLeftBig; } @-webkit-keyframes fadeOutRight { 0% { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } } @keyframes fadeOutRight { 0% { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } } .animate__fadeOutRight { -webkit-animation-name: fadeOutRight; animation-name: fadeOutRight; } @-webkit-keyframes fadeOutRightBig { 0% { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(2000px, 0, 0); transform: translate3d(2000px, 0, 0); } } @keyframes fadeOutRightBig { 0% { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(2000px, 0, 0); transform: translate3d(2000px, 0, 0); } } .animate__fadeOutRightBig { -webkit-animation-name: fadeOutRightBig; animation-name: fadeOutRightBig; } @-webkit-keyframes fadeOutUp { 0% { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); } } @keyframes fadeOutUp { 0% { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); } } .animate__fadeOutUp { -webkit-animation-name: fadeOutUp; animation-name: fadeOutUp; } @-webkit-keyframes fadeOutUpBig { 0% { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(0, -2000px, 0); transform: translate3d(0, -2000px, 0); } } @keyframes fadeOutUpBig { 0% { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(0, -2000px, 0); transform: translate3d(0, -2000px, 0); } } .animate__fadeOutUpBig { -webkit-animation-name: fadeOutUpBig; animation-name: fadeOutUpBig; } @-webkit-keyframes fadeOutTopLeft { 0% { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translateZ(0); } to { opacity: 0; -webkit-transform: translate3d(-100%, -100%, 0); transform: translate3d(-100%, -100%, 0); } } @keyframes fadeOutTopLeft { 0% { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translateZ(0); } to { opacity: 0; -webkit-transform: translate3d(-100%, -100%, 0); transform: translate3d(-100%, -100%, 0); } } .animate__fadeOutTopLeft { -webkit-animation-name: fadeOutTopLeft; animation-name: fadeOutTopLeft; } @-webkit-keyframes fadeOutTopRight { 0% { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translateZ(0); } to { opacity: 0; -webkit-transform: translate3d(100%, -100%, 0); transform: translate3d(100%, -100%, 0); } } @keyframes fadeOutTopRight { 0% { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translateZ(0); } to { opacity: 0; -webkit-transform: translate3d(100%, -100%, 0); transform: translate3d(100%, -100%, 0); } } .animate__fadeOutTopRight { -webkit-animation-name: fadeOutTopRight; animation-name: fadeOutTopRight; } @-webkit-keyframes fadeOutBottomRight { 0% { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translateZ(0); } to { opacity: 0; -webkit-transform: translate3d(100%, 100%, 0); transform: translate3d(100%, 100%, 0); } } @keyframes fadeOutBottomRight { 0% { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translateZ(0); } to { opacity: 0; -webkit-transform: translate3d(100%, 100%, 0); transform: translate3d(100%, 100%, 0); } } .animate__fadeOutBottomRight { -webkit-animation-name: fadeOutBottomRight; animation-name: fadeOutBottomRight; } @-webkit-keyframes fadeOutBottomLeft { 0% { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translateZ(0); } to { opacity: 0; -webkit-transform: translate3d(-100%, 100%, 0); transform: translate3d(-100%, 100%, 0); } } @keyframes fadeOutBottomLeft { 0% { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translateZ(0); } to { opacity: 0; -webkit-transform: translate3d(-100%, 100%, 0); transform: translate3d(-100%, 100%, 0); } } .animate__fadeOutBottomLeft { -webkit-animation-name: fadeOutBottomLeft; animation-name: fadeOutBottomLeft; } @-webkit-keyframes flip { 0% { -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, -360deg); transform: perspective(400px) scaleZ(1) translateZ(0) rotateY(-360deg); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 40% { -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg); transform: perspective(400px) scaleZ(1) translateZ(150px) rotateY(-190deg); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 50% { -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg); transform: perspective(400px) scaleZ(1) translateZ(150px) rotateY(-170deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 80% { -webkit-transform: perspective(400px) scale3d(0.95, 0.95, 0.95) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg); transform: perspective(400px) scale3d(0.95, 0.95, 0.95) translateZ(0) rotateY(0); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } to { -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg); transform: perspective(400px) scaleZ(1) translateZ(0) rotateY(0); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } } @keyframes flip { 0% { -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, -360deg); transform: perspective(400px) scaleZ(1) translateZ(0) rotateY(-360deg); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 40% { -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg); transform: perspective(400px) scaleZ(1) translateZ(150px) rotateY(-190deg); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 50% { -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg); transform: perspective(400px) scaleZ(1) translateZ(150px) rotateY(-170deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 80% { -webkit-transform: perspective(400px) scale3d(0.95, 0.95, 0.95) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg); transform: perspective(400px) scale3d(0.95, 0.95, 0.95) translateZ(0) rotateY(0); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } to { -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg); transform: perspective(400px) scaleZ(1) translateZ(0) rotateY(0); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } } .animate__animated.animate__flip { -webkit-backface-visibility: visible; backface-visibility: visible; -webkit-animation-name: flip; animation-name: flip; } @-webkit-keyframes flipInX { 0% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg); transform: perspective(400px) rotateX(90deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; opacity: 0; } 40% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg); transform: perspective(400px) rotateX(-20deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 60% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg); transform: perspective(400px) rotateX(10deg); opacity: 1; } 80% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg); transform: perspective(400px) rotateX(-5deg); } to { -webkit-transform: perspective(400px); transform: perspective(400px); } } @keyframes flipInX { 0% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg); transform: perspective(400px) rotateX(90deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; opacity: 0; } 40% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg); transform: perspective(400px) rotateX(-20deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 60% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg); transform: perspective(400px) rotateX(10deg); opacity: 1; } 80% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg); transform: perspective(400px) rotateX(-5deg); } to { -webkit-transform: perspective(400px); transform: perspective(400px); } } .animate__flipInX { -webkit-backface-visibility: visible !important; backface-visibility: visible !important; -webkit-animation-name: flipInX; animation-name: flipInX; } @-webkit-keyframes flipInY { 0% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg); transform: perspective(400px) rotateY(90deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; opacity: 0; } 40% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg); transform: perspective(400px) rotateY(-20deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 60% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg); transform: perspective(400px) rotateY(10deg); opacity: 1; } 80% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg); transform: perspective(400px) rotateY(-5deg); } to { -webkit-transform: perspective(400px); transform: perspective(400px); } } @keyframes flipInY { 0% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg); transform: perspective(400px) rotateY(90deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; opacity: 0; } 40% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg); transform: perspective(400px) rotateY(-20deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 60% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg); transform: perspective(400px) rotateY(10deg); opacity: 1; } 80% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg); transform: perspective(400px) rotateY(-5deg); } to { -webkit-transform: perspective(400px); transform: perspective(400px); } } .animate__flipInY { -webkit-backface-visibility: visible !important; backface-visibility: visible !important; -webkit-animation-name: flipInY; animation-name: flipInY; } @-webkit-keyframes flipOutX { 0% { -webkit-transform: perspective(400px); transform: perspective(400px); } 30% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg); transform: perspective(400px) rotateX(-20deg); opacity: 1; } to { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg); transform: perspective(400px) rotateX(90deg); opacity: 0; } } @keyframes flipOutX { 0% { -webkit-transform: perspective(400px); transform: perspective(400px); } 30% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg); transform: perspective(400px) rotateX(-20deg); opacity: 1; } to { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg); transform: perspective(400px) rotateX(90deg); opacity: 0; } } .animate__flipOutX { -webkit-animation-duration: 0.75s; animation-duration: 0.75s; -webkit-animation-duration: calc(var(--animate-duration) * 0.75); animation-duration: calc(var(--animate-duration) * 0.75); -webkit-animation-name: flipOutX; animation-name: flipOutX; -webkit-backface-visibility: visible !important; backface-visibility: visible !important; } @-webkit-keyframes flipOutY { 0% { -webkit-transform: perspective(400px); transform: perspective(400px); } 30% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -15deg); transform: perspective(400px) rotateY(-15deg); opacity: 1; } to { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg); transform: perspective(400px) rotateY(90deg); opacity: 0; } } @keyframes flipOutY { 0% { -webkit-transform: perspective(400px); transform: perspective(400px); } 30% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -15deg); transform: perspective(400px) rotateY(-15deg); opacity: 1; } to { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg); transform: perspective(400px) rotateY(90deg); opacity: 0; } } .animate__flipOutY { -webkit-animation-duration: 0.75s; animation-duration: 0.75s; -webkit-animation-duration: calc(var(--animate-duration) * 0.75); animation-duration: calc(var(--animate-duration) * 0.75); -webkit-backface-visibility: visible !important; backface-visibility: visible !important; -webkit-animation-name: flipOutY; animation-name: flipOutY; } @-webkit-keyframes lightSpeedInRight { 0% { -webkit-transform: translate3d(100%, 0, 0) skewX(-30deg); transform: translate3d(100%, 0, 0) skew(-30deg); opacity: 0; } 60% { -webkit-transform: skewX(20deg); transform: skew(20deg); opacity: 1; } 80% { -webkit-transform: skewX(-5deg); transform: skew(-5deg); } to { -webkit-transform: translate3d(0, 0, 0); transform: translateZ(0); } } @keyframes lightSpeedInRight { 0% { -webkit-transform: translate3d(100%, 0, 0) skewX(-30deg); transform: translate3d(100%, 0, 0) skew(-30deg); opacity: 0; } 60% { -webkit-transform: skewX(20deg); transform: skew(20deg); opacity: 1; } 80% { -webkit-transform: skewX(-5deg); transform: skew(-5deg); } to { -webkit-transform: translate3d(0, 0, 0); transform: translateZ(0); } } .animate__lightSpeedInRight { -webkit-animation-name: lightSpeedInRight; animation-name: lightSpeedInRight; -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } @-webkit-keyframes lightSpeedInLeft { 0% { -webkit-transform: translate3d(-100%, 0, 0) skewX(30deg); transform: translate3d(-100%, 0, 0) skew(30deg); opacity: 0; } 60% { -webkit-transform: skewX(-20deg); transform: skew(-20deg); opacity: 1; } 80% { -webkit-transform: skewX(5deg); transform: skew(5deg); } to { -webkit-transform: translate3d(0, 0, 0); transform: translateZ(0); } } @keyframes lightSpeedInLeft { 0% { -webkit-transform: translate3d(-100%, 0, 0) skewX(30deg); transform: translate3d(-100%, 0, 0) skew(30deg); opacity: 0; } 60% { -webkit-transform: skewX(-20deg); transform: skew(-20deg); opacity: 1; } 80% { -webkit-transform: skewX(5deg); transform: skew(5deg); } to { -webkit-transform: translate3d(0, 0, 0); transform: translateZ(0); } } .animate__lightSpeedInLeft { -webkit-animation-name: lightSpeedInLeft; animation-name: lightSpeedInLeft; -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } @-webkit-keyframes lightSpeedOutRight { 0% { opacity: 1; } to { -webkit-transform: translate3d(100%, 0, 0) skewX(30deg); transform: translate3d(100%, 0, 0) skew(30deg); opacity: 0; } } @keyframes lightSpeedOutRight { 0% { opacity: 1; } to { -webkit-transform: translate3d(100%, 0, 0) skewX(30deg); transform: translate3d(100%, 0, 0) skew(30deg); opacity: 0; } } .animate__lightSpeedOutRight { -webkit-animation-name: lightSpeedOutRight; animation-name: lightSpeedOutRight; -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } @-webkit-keyframes lightSpeedOutLeft { 0% { opacity: 1; } to { -webkit-transform: translate3d(-100%, 0, 0) skewX(-30deg); transform: translate3d(-100%, 0, 0) skew(-30deg); opacity: 0; } } @keyframes lightSpeedOutLeft { 0% { opacity: 1; } to { -webkit-transform: translate3d(-100%, 0, 0) skewX(-30deg); transform: translate3d(-100%, 0, 0) skew(-30deg); opacity: 0; } } .animate__lightSpeedOutLeft { -webkit-animation-name: lightSpeedOutLeft; animation-name: lightSpeedOutLeft; -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } @-webkit-keyframes rotateIn { 0% { -webkit-transform: rotate3d(0, 0, 1, -200deg); transform: rotate3d(0, 0, 1, -200deg); opacity: 0; } to { -webkit-transform: translate3d(0, 0, 0); transform: translateZ(0); opacity: 1; } } @keyframes rotateIn { 0% { -webkit-transform: rotate3d(0, 0, 1, -200deg); transform: rotate3d(0, 0, 1, -200deg); opacity: 0; } to { -webkit-transform: translate3d(0, 0, 0); transform: translateZ(0); opacity: 1; } } .animate__rotateIn { -webkit-animation-name: rotateIn; animation-name: rotateIn; -webkit-transform-origin: center; transform-origin: center; } @-webkit-keyframes rotateInDownLeft { 0% { -webkit-transform: rotate3d(0, 0, 1, -45deg); transform: rotate3d(0, 0, 1, -45deg); opacity: 0; } to { -webkit-transform: translate3d(0, 0, 0); transform: translateZ(0); opacity: 1; } } @keyframes rotateInDownLeft { 0% { -webkit-transform: rotate3d(0, 0, 1, -45deg); transform: rotate3d(0, 0, 1, -45deg); opacity: 0; } to { -webkit-transform: translate3d(0, 0, 0); transform: translateZ(0); opacity: 1; } } .animate__rotateInDownLeft { -webkit-animation-name: rotateInDownLeft; animation-name: rotateInDownLeft; -webkit-transform-origin: left bottom; transform-origin: left bottom; } @-webkit-keyframes rotateInDownRight { 0% { -webkit-transform: rotate3d(0, 0, 1, 45deg); transform: rotate3d(0, 0, 1, 45deg); opacity: 0; } to { -webkit-transform: translate3d(0, 0, 0); transform: translateZ(0); opacity: 1; } } @keyframes rotateInDownRight { 0% { -webkit-transform: rotate3d(0, 0, 1, 45deg); transform: rotate3d(0, 0, 1, 45deg); opacity: 0; } to { -webkit-transform: translate3d(0, 0, 0); transform: translateZ(0); opacity: 1; } } .animate__rotateInDownRight { -webkit-animation-name: rotateInDownRight; animation-name: rotateInDownRight; -webkit-transform-origin: right bottom; transform-origin: right bottom; } @-webkit-keyframes rotateInUpLeft { 0% { -webkit-transform: rotate3d(0, 0, 1, 45deg); transform: rotate3d(0, 0, 1, 45deg); opacity: 0; } to { -webkit-transform: translate3d(0, 0, 0); transform: translateZ(0); opacity: 1; } } @keyframes rotateInUpLeft { 0% { -webkit-transform: rotate3d(0, 0, 1, 45deg); transform: rotate3d(0, 0, 1, 45deg); opacity: 0; } to { -webkit-transform: translate3d(0, 0, 0); transform: translateZ(0); opacity: 1; } } .animate__rotateInUpLeft { -webkit-animation-name: rotateInUpLeft; animation-name: rotateInUpLeft; -webkit-transform-origin: left bottom; transform-origin: left bottom; } @-webkit-keyframes rotateInUpRight { 0% { -webkit-transform: rotate3d(0, 0, 1, -90deg); transform: rotate3d(0, 0, 1, -90deg); opacity: 0; } to { -webkit-transform: translate3d(0, 0, 0); transform: translateZ(0); opacity: 1; } } @keyframes rotateInUpRight { 0% { -webkit-transform: rotate3d(0, 0, 1, -90deg); transform: rotate3d(0, 0, 1, -90deg); opacity: 0; } to { -webkit-transform: translate3d(0, 0, 0); transform: translateZ(0); opacity: 1; } } .animate__rotateInUpRight { -webkit-animation-name: rotateInUpRight; animation-name: rotateInUpRight; -webkit-transform-origin: right bottom; transform-origin: right bottom; } @-webkit-keyframes rotateOut { 0% { opacity: 1; } to { -webkit-transform: rotate3d(0, 0, 1, 200deg); transform: rotate3d(0, 0, 1, 200deg); opacity: 0; } } @keyframes rotateOut { 0% { opacity: 1; } to { -webkit-transform: rotate3d(0, 0, 1, 200deg); transform: rotate3d(0, 0, 1, 200deg); opacity: 0; } } .animate__rotateOut { -webkit-animation-name: rotateOut; animation-name: rotateOut; -webkit-transform-origin: center; transform-origin: center; } @-webkit-keyframes rotateOutDownLeft { 0% { opacity: 1; } to { -webkit-transform: rotate3d(0, 0, 1, 45deg); transform: rotate3d(0, 0, 1, 45deg); opacity: 0; } } @keyframes rotateOutDownLeft { 0% { opacity: 1; } to { -webkit-transform: rotate3d(0, 0, 1, 45deg); transform: rotate3d(0, 0, 1, 45deg); opacity: 0; } } .animate__rotateOutDownLeft { -webkit-animation-name: rotateOutDownLeft; animation-name: rotateOutDownLeft; -webkit-transform-origin: left bottom; transform-origin: left bottom; } @-webkit-keyframes rotateOutDownRight { 0% { opacity: 1; } to { -webkit-transform: rotate3d(0, 0, 1, -45deg); transform: rotate3d(0, 0, 1, -45deg); opacity: 0; } } @keyframes rotateOutDownRight { 0% { opacity: 1; } to { -webkit-transform: rotate3d(0, 0, 1, -45deg); transform: rotate3d(0, 0, 1, -45deg); opacity: 0; } } .animate__rotateOutDownRight { -webkit-animation-name: rotateOutDownRight; animation-name: rotateOutDownRight; -webkit-transform-origin: right bottom; transform-origin: right bottom; } @-webkit-keyframes rotateOutUpLeft { 0% { opacity: 1; } to { -webkit-transform: rotate3d(0, 0, 1, -45deg); transform: rotate3d(0, 0, 1, -45deg); opacity: 0; } } @keyframes rotateOutUpLeft { 0% { opacity: 1; } to { -webkit-transform: rotate3d(0, 0, 1, -45deg); transform: rotate3d(0, 0, 1, -45deg); opacity: 0; } } .animate__rotateOutUpLeft { -webkit-animation-name: rotateOutUpLeft; animation-name: rotateOutUpLeft; -webkit-transform-origin: left bottom; transform-origin: left bottom; } @-webkit-keyframes rotateOutUpRight { 0% { opacity: 1; } to { -webkit-transform: rotate3d(0, 0, 1, 90deg); transform: rotate3d(0, 0, 1, 90deg); opacity: 0; } } @keyframes rotateOutUpRight { 0% { opacity: 1; } to { -webkit-transform: rotate3d(0, 0, 1, 90deg); transform: rotate3d(0, 0, 1, 90deg); opacity: 0; } } .animate__rotateOutUpRight { -webkit-animation-name: rotateOutUpRight; animation-name: rotateOutUpRight; -webkit-transform-origin: right bottom; transform-origin: right bottom; } @-webkit-keyframes hinge { 0% { -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } 20%, 60% { -webkit-transform: rotate3d(0, 0, 1, 80deg); transform: rotate3d(0, 0, 1, 80deg); -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } 40%, 80% { -webkit-transform: rotate3d(0, 0, 1, 60deg); transform: rotate3d(0, 0, 1, 60deg); -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; opacity: 1; } to { -webkit-transform: translate3d(0, 700px, 0); transform: translate3d(0, 700px, 0); opacity: 0; } } @keyframes hinge { 0% { -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } 20%, 60% { -webkit-transform: rotate3d(0, 0, 1, 80deg); transform: rotate3d(0, 0, 1, 80deg); -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } 40%, 80% { -webkit-transform: rotate3d(0, 0, 1, 60deg); transform: rotate3d(0, 0, 1, 60deg); -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; opacity: 1; } to { -webkit-transform: translate3d(0, 700px, 0); transform: translate3d(0, 700px, 0); opacity: 0; } } .animate__hinge { -webkit-animation-duration: 2s; animation-duration: 2s; -webkit-animation-duration: calc(var(--animate-duration) * 2); animation-duration: calc(var(--animate-duration) * 2); -webkit-animation-name: hinge; animation-name: hinge; -webkit-transform-origin: top left; transform-origin: top left; } @-webkit-keyframes jackInTheBox { 0% { opacity: 0; -webkit-transform: scale(0.1) rotate(30deg); transform: scale(0.1) rotate(30deg); -webkit-transform-origin: center bottom; transform-origin: center bottom; } 50% { -webkit-transform: rotate(-10deg); transform: rotate(-10deg); } 70% { -webkit-transform: rotate(3deg); transform: rotate(3deg); } to { opacity: 1; -webkit-transform: scale(1); transform: scale(1); } } @keyframes jackInTheBox { 0% { opacity: 0; -webkit-transform: scale(0.1) rotate(30deg); transform: scale(0.1) rotate(30deg); -webkit-transform-origin: center bottom; transform-origin: center bottom; } 50% { -webkit-transform: rotate(-10deg); transform: rotate(-10deg); } 70% { -webkit-transform: rotate(3deg); transform: rotate(3deg); } to { opacity: 1; -webkit-transform: scale(1); transform: scale(1); } } .animate__jackInTheBox { -webkit-animation-name: jackInTheBox; animation-name: jackInTheBox; } @-webkit-keyframes rollIn { 0% { opacity: 0; -webkit-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg); transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg); } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translateZ(0); } } @keyframes rollIn { 0% { opacity: 0; -webkit-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg); transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg); } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translateZ(0); } } .animate__rollIn { -webkit-animation-name: rollIn; animation-name: rollIn; } @-webkit-keyframes rollOut { 0% { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg); transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg); } } @keyframes rollOut { 0% { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg); transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg); } } .animate__rollOut { -webkit-animation-name: rollOut; animation-name: rollOut; } @-webkit-keyframes zoomIn { 0% { opacity: 0; -webkit-transform: scale3d(0.3, 0.3, 0.3); transform: scale3d(0.3, 0.3, 0.3); } 50% { opacity: 1; } } @keyframes zoomIn { 0% { opacity: 0; -webkit-transform: scale3d(0.3, 0.3, 0.3); transform: scale3d(0.3, 0.3, 0.3); } 50% { opacity: 1; } } .animate__zoomIn { -webkit-animation-name: zoomIn; animation-name: zoomIn; } @-webkit-keyframes zoomInDown { 0% { opacity: 0; -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0); transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0); -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } 60% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } @keyframes zoomInDown { 0% { opacity: 0; -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0); transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0); -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } 60% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } .animate__zoomInDown { -webkit-animation-name: zoomInDown; animation-name: zoomInDown; } @-webkit-keyframes zoomInLeft { 0% { opacity: 0; -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0); transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0); -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } 60% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0); -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } @keyframes zoomInLeft { 0% { opacity: 0; -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0); transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0); -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } 60% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0); -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } .animate__zoomInLeft { -webkit-animation-name: zoomInLeft; animation-name: zoomInLeft; } @-webkit-keyframes zoomInRight { 0% { opacity: 0; -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0); transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0); -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } 60% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0); -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } @keyframes zoomInRight { 0% { opacity: 0; -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0); transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0); -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } 60% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0); -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } .animate__zoomInRight { -webkit-animation-name: zoomInRight; animation-name: zoomInRight; } @-webkit-keyframes zoomInUp { 0% { opacity: 0; -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0); transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0); -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } 60% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } @keyframes zoomInUp { 0% { opacity: 0; -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0); transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0); -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } 60% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } .animate__zoomInUp { -webkit-animation-name: zoomInUp; animation-name: zoomInUp; } @-webkit-keyframes zoomOut { 0% { opacity: 1; } 50% { opacity: 0; -webkit-transform: scale3d(0.3, 0.3, 0.3); transform: scale3d(0.3, 0.3, 0.3); } to { opacity: 0; } } @keyframes zoomOut { 0% { opacity: 1; } 50% { opacity: 0; -webkit-transform: scale3d(0.3, 0.3, 0.3); transform: scale3d(0.3, 0.3, 0.3); } to { opacity: 0; } } .animate__zoomOut { -webkit-animation-name: zoomOut; animation-name: zoomOut; } @-webkit-keyframes zoomOutDown { 40% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } to { opacity: 0; -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0); transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0); -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } @keyframes zoomOutDown { 40% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } to { opacity: 0; -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0); transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0); -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } .animate__zoomOutDown { -webkit-animation-name: zoomOutDown; animation-name: zoomOutDown; -webkit-transform-origin: center bottom; transform-origin: center bottom; } @-webkit-keyframes zoomOutLeft { 40% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0); } to { opacity: 0; -webkit-transform: scale(0.1) translate3d(-2000px, 0, 0); transform: scale(0.1) translate3d(-2000px, 0, 0); } } @keyframes zoomOutLeft { 40% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0); } to { opacity: 0; -webkit-transform: scale(0.1) translate3d(-2000px, 0, 0); transform: scale(0.1) translate3d(-2000px, 0, 0); } } .animate__zoomOutLeft { -webkit-animation-name: zoomOutLeft; animation-name: zoomOutLeft; -webkit-transform-origin: left center; transform-origin: left center; } @-webkit-keyframes zoomOutRight { 40% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0); } to { opacity: 0; -webkit-transform: scale(0.1) translate3d(2000px, 0, 0); transform: scale(0.1) translate3d(2000px, 0, 0); } } @keyframes zoomOutRight { 40% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0); } to { opacity: 0; -webkit-transform: scale(0.1) translate3d(2000px, 0, 0); transform: scale(0.1) translate3d(2000px, 0, 0); } } .animate__zoomOutRight { -webkit-animation-name: zoomOutRight; animation-name: zoomOutRight; -webkit-transform-origin: right center; transform-origin: right center; } @-webkit-keyframes zoomOutUp { 40% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } to { opacity: 0; -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0); transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0); -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } @keyframes zoomOutUp { 40% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } to { opacity: 0; -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0); transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0); -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } .animate__zoomOutUp { -webkit-animation-name: zoomOutUp; animation-name: zoomOutUp; -webkit-transform-origin: center bottom; transform-origin: center bottom; } @-webkit-keyframes slideInDown { 0% { -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); visibility: visible; } to { -webkit-transform: translate3d(0, 0, 0); transform: translateZ(0); } } @keyframes slideInDown { 0% { -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); visibility: visible; } to { -webkit-transform: translate3d(0, 0, 0); transform: translateZ(0); } } .animate__slideInDown { -webkit-animation-name: slideInDown; animation-name: slideInDown; } @-webkit-keyframes slideInLeft { 0% { -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); visibility: visible; } to { -webkit-transform: translate3d(0, 0, 0); transform: translateZ(0); } } @keyframes slideInLeft { 0% { -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); visibility: visible; } to { -webkit-transform: translate3d(0, 0, 0); transform: translateZ(0); } } .animate__slideInLeft { -webkit-animation-name: slideInLeft; animation-name: slideInLeft; } @-webkit-keyframes slideInRight { 0% { -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); visibility: visible; } to { -webkit-transform: translate3d(0, 0, 0); transform: translateZ(0); } } @keyframes slideInRight { 0% { -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); visibility: visible; } to { -webkit-transform: translate3d(0, 0, 0); transform: translateZ(0); } } .animate__slideInRight { -webkit-animation-name: slideInRight; animation-name: slideInRight; } @-webkit-keyframes slideInUp { 0% { -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); visibility: visible; } to { -webkit-transform: translate3d(0, 0, 0); transform: translateZ(0); } } @keyframes slideInUp { 0% { -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); visibility: visible; } to { -webkit-transform: translate3d(0, 0, 0); transform: translateZ(0); } } .animate__slideInUp { -webkit-animation-name: slideInUp; animation-name: slideInUp; } @-webkit-keyframes slideOutDown { 0% { -webkit-transform: translate3d(0, 0, 0); transform: translateZ(0); } to { visibility: hidden; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } } @keyframes slideOutDown { 0% { -webkit-transform: translate3d(0, 0, 0); transform: translateZ(0); } to { visibility: hidden; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } } .animate__slideOutDown { -webkit-animation-name: slideOutDown; animation-name: slideOutDown; } @-webkit-keyframes slideOutLeft { 0% { -webkit-transform: translate3d(0, 0, 0); transform: translateZ(0); } to { visibility: hidden; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } } @keyframes slideOutLeft { 0% { -webkit-transform: translate3d(0, 0, 0); transform: translateZ(0); } to { visibility: hidden; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } } .animate__slideOutLeft { -webkit-animation-name: slideOutLeft; animation-name: slideOutLeft; } @-webkit-keyframes slideOutRight { 0% { -webkit-transform: translate3d(0, 0, 0); transform: translateZ(0); } to { visibility: hidden; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } } @keyframes slideOutRight { 0% { -webkit-transform: translate3d(0, 0, 0); transform: translateZ(0); } to { visibility: hidden; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } } .animate__slideOutRight { -webkit-animation-name: slideOutRight; animation-name: slideOutRight; } @-webkit-keyframes slideOutUp { 0% { -webkit-transform: translate3d(0, 0, 0); transform: translateZ(0); } to { visibility: hidden; -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); } } @keyframes slideOutUp { 0% { -webkit-transform: translate3d(0, 0, 0); transform: translateZ(0); } to { visibility: hidden; -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); } } .animate__slideOutUp { -webkit-animation-name: slideOutUp; animation-name: slideOutUp; } .choices { position: relative; overflow: hidden; margin-bottom: 24px; font-size: 16px; } .choices:focus { outline: 0; } .choices:last-child { margin-bottom: 0; } .choices.is-open { overflow: visible; } .choices.is-disabled .choices__inner, .choices.is-disabled .choices__input { background-color: #eaeaea; cursor: not-allowed; -webkit-user-select: none; user-select: none; } .choices.is-disabled .choices__item { cursor: not-allowed; } .choices [hidden] { display: none !important; } .choices[data-type*="select-one"] { cursor: pointer; } .choices[data-type*="select-one"] .choices__inner { padding-bottom: 7.5px; } .choices[data-type*="select-one"] .choices__input { display: block; width: 100%; padding: 10px; border-bottom: 1px solid #ddd; background-color: #fff; margin: 0; } .choices[data-type*="select-one"] .choices__button { background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjEiIGhlaWdodD0iMjEiIHZpZXdCb3g9IjAgMCAyMSAyMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBmaWxsPSIjMDAwIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjxwYXRoIGQ9Ik0yLjU5Mi4wNDRsMTguMzY0IDE4LjM2NC0yLjU0OCAyLjU0OEwuMDQ0IDIuNTkyeiIvPjxwYXRoIGQ9Ik0wIDE4LjM2NEwxOC4zNjQgMGwyLjU0OCAyLjU0OEwyLjU0OCAyMC45MTJ6Ii8+PC9nPjwvc3ZnPg==); padding: 0; background-size: 8px; position: absolute; top: 50%; right: 0; margin-top: -10px; margin-right: 25px; height: 20px; width: 20px; border-radius: 10em; opacity: 0.25; } .choices[data-type*="select-one"] .choices__button:focus, .choices[data-type*="select-one"] .choices__button:hover { opacity: 1; } .choices[data-type*="select-one"] .choices__button:focus { box-shadow: 0 0 0 2px #005f75; } .choices[data-type*="select-one"] .choices__item[data-placeholder] .choices__button { display: none; } .choices[data-type*="select-one"]:after { content: ""; height: 0; width: 0; border-style: solid; border-color: #333 transparent transparent; border-width: 5px; position: absolute; right: 11.5px; top: 50%; margin-top: -2.5px; pointer-events: none; } .choices[data-type*="select-one"].is-open:after { border-color: transparent transparent #333; margin-top: -7.5px; } .choices[data-type*="select-one"][dir="rtl"]:after { left: 11.5px; right: auto; } .choices[data-type*="select-one"][dir="rtl"] .choices__button { right: auto; left: 0; margin-left: 25px; margin-right: 0; } .choices[data-type*="select-multiple"] .choices__inner, .choices[data-type*="text"] .choices__inner { cursor: text; } .choices[data-type*="select-multiple"] .choices__button, .choices[data-type*="text"] .choices__button { position: relative; display: inline-block; margin: 0-4px 0 8px; padding-left: 16px; border-left: 1px solid #003642; background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjEiIGhlaWdodD0iMjEiIHZpZXdCb3g9IjAgMCAyMSAyMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBmaWxsPSIjRkZGIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjxwYXRoIGQ9Ik0yLjU5Mi4wNDRsMTguMzY0IDE4LjM2NC0yLjU0OCAyLjU0OEwuMDQ0IDIuNTkyeiIvPjxwYXRoIGQ9Ik0wIDE4LjM2NEwxOC4zNjQgMGwyLjU0OCAyLjU0OEwyLjU0OCAyMC45MTJ6Ii8+PC9nPjwvc3ZnPg==); background-size: 8px; width: 8px; line-height: 1; opacity: 0.75; border-radius: 0; } .choices[data-type*="select-multiple"] .choices__button:focus, .choices[data-type*="select-multiple"] .choices__button:hover, .choices[data-type*="text"] .choices__button:focus, .choices[data-type*="text"] .choices__button:hover { opacity: 1; } .choices__inner { display: inline-block; vertical-align: top; width: 100%; background-color: #f9f9f9; padding: 7.5px 7.5px 3.75px; border: 1px solid #ddd; border-radius: 2.5px; font-size: 14px; min-height: 44px; overflow: hidden; } .is-focused .choices__inner, .is-open .choices__inner { border-color: #b7b7b7; } .is-open .choices__inner { border-radius: 2.5px 2.5px 0 0; } .is-flipped.is-open .choices__inner { border-radius: 0 0 2.5px 2.5px; } .choices__list { margin: 0; padding-left: 0; list-style: none; } .choices__list--single { display: inline-block; padding: 4px 16px 4px 4px; width: 100%; } [dir="rtl"] .choices__list--single { padding-right: 4px; padding-left: 16px; } .choices__list--single .choices__item { width: 100%; } .choices__list--multiple { display: inline; } .choices__list--multiple .choices__item { display: inline-block; vertical-align: middle; border-radius: 20px; padding: 4px 10px; font-size: 12px; font-weight: 500; margin-right: 3.75px; margin-bottom: 3.75px; background-color: #005f75; border: 1px solid #004a5c; color: #fff; word-break: break-all; box-sizing: border-box; } .choices__list--multiple .choices__item[data-deletable] { padding-right: 5px; } [dir="rtl"] .choices__list--multiple .choices__item { margin-right: 0; margin-left: 3.75px; } .choices__list--multiple .choices__item.is-highlighted { background-color: #004a5c; border: 1px solid #003642; } .is-disabled .choices__list--multiple .choices__item { background-color: #aaa; border: 1px solid #919191; } .choices__list--dropdown, .choices__list[aria-expanded] { display: none; z-index: 1; position: absolute; width: 100%; background-color: #fff; border: 1px solid #ddd; top: 100%; margin-top: -1px; border-bottom-left-radius: 2.5px; border-bottom-right-radius: 2.5px; overflow: hidden; word-break: break-all; } .is-active.choices__list--dropdown, .is-active.choices__list[aria-expanded] { display: block; } .is-open .choices__list--dropdown, .is-open .choices__list[aria-expanded] { border-color: #b7b7b7; } .is-flipped .choices__list--dropdown, .is-flipped .choices__list[aria-expanded] { top: auto; bottom: 100%; margin-top: 0; margin-bottom: -1px; border-radius: 0.25rem 0.25rem 0 0; } .choices__list--dropdown .choices__list, .choices__list[aria-expanded] .choices__list { position: relative; max-height: 300px; overflow: auto; -webkit-overflow-scrolling: touch; will-change: scroll-position; } .choices__list--dropdown .choices__item, .choices__list[aria-expanded] .choices__item { position: relative; padding: 10px; font-size: 14px; } [dir="rtl"] .choices__list--dropdown .choices__item, [dir="rtl"] .choices__list[aria-expanded] .choices__item { text-align: right; } @media (min-width: 640px) { .choices__list--dropdown .choices__item--selectable[data-select-text], .choices__list[aria-expanded] .choices__item--selectable[data-select-text] { padding-right: 100px; } .choices__list--dropdown .choices__item--selectable[data-select-text]:after, .choices__list[aria-expanded] .choices__item--selectable[data-select-text]:after { content: attr(data-select-text); font-size: 12px; opacity: 0; position: absolute; right: 10px; top: 50%; transform: translateY(-50%); } [dir="rtl"] .choices__list--dropdown .choices__item--selectable[data-select-text], [dir="rtl"] .choices__list[aria-expanded] .choices__item--selectable[data-select-text] { text-align: right; padding-left: 100px; padding-right: 10px; } [dir="rtl"] .choices__list--dropdown .choices__item--selectable[data-select-text]:after, [dir="rtl"] .choices__list[aria-expanded] .choices__item--selectable[data-select-text]:after { right: auto; left: 10px; } } .choices__list--dropdown .choices__item--selectable.is-highlighted, .choices__list[aria-expanded] .choices__item--selectable.is-highlighted { background-color: #f2f2f2; } .choices__list--dropdown .choices__item--selectable.is-highlighted:after, .choices__list[aria-expanded] .choices__item--selectable.is-highlighted:after { opacity: 0.5; } .choices__item { cursor: default; } .choices__item--selectable { cursor: pointer; } .choices__item--disabled { cursor: not-allowed; -webkit-user-select: none; user-select: none; opacity: 0.5; } .choices__heading { font-weight: 600; font-size: 12px; padding: 10px; border-bottom: 1px solid #f7f7f7; color: gray; } .choices__button { text-indent: -9999px; appearance: none; border: 0; background-color: transparent; background-repeat: no-repeat; background-position: center; cursor: pointer; } .choices__button:focus, .choices__input:focus { outline: 0; } .choices__input { display: inline-block; vertical-align: baseline; background-color: #f9f9f9; font-size: 14px; margin-bottom: 5px; border: 0; border-radius: 0; max-width: 100%; padding: 4px 0 4px 2px; } .choices__input::-webkit-search-cancel-button, .choices__input::-webkit-search-decoration, .choices__input::-webkit-search-results-button, .choices__input::-webkit-search-results-decoration { display: none; } .choices__input::-ms-clear, .choices__input::-ms-reveal { display: none; width: 0; height: 0; } [dir="rtl"] .choices__input { padding-right: 2px; padding-left: 0; } .choices__placeholder { opacity: 0.5; } input:focus::-webkit-input-placeholder { color: transparent; } textarea:focus::-webkit-input-placeholder { color: transparent; } body { font-family: Arial; font-weight: 400; color: #c4c4c4; background-color: #000; line-height: 1.2; } body, html { overflow-x: hidden !important; } .main { width: 100%; max-width: 1880px; padding-left: 100px; padding-right: 100px; margin: 0 auto; } @media screen and (max-width: 1023px) { .main { max-width: 720px; } } @media screen and (max-width: 768px) { .main { max-width: 540px; padding-left: 20px; padding-right: 20px; } } @media screen and (max-width: 576px) { .main { max-width: none; } } p { font-size: clamp(0.875rem, 0.861vw + 0.217rem, 1.25rem); } @font-face { font-family: Arial Italic; src: url(../fonts/arial/ARIALI1.TTF); font-weight: 400; font-style: italic; } @font-face { font-family: Arial; src: url(../fonts/arial/ARIAL.TTF); font-weight: 400; font-style: normal; } @font-face { font-family: Noto Sans; src: url(../fonts/Noto_Sans/NotoSans-Thin.ttf); font-weight: 100; font-style: normal; } @font-face { font-family: Noto Sans; src: url(../fonts/Noto_Sans/NotoSans-Regular.ttf); font-weight: 400; font-style: normal; } @font-face { font-family: Noto Sans; src: url(../fonts/Noto_Sans/NotoSans-Light.ttf); font-weight: 300; font-style: normal; } .header { width: 100%; max-width: 1880px; padding-left: 100px; padding-right: 100px; margin: 0 auto; padding-top: clamp(1.25rem, 8.034vw + -4.891rem, 4.75rem); padding-bottom: clamp(4.5rem, 8.034vw + -1.641rem, 8rem); display: flex; align-items: center; justify-content: space-between; } @media screen and (max-width: 1023px) { .header { max-width: 720px; } } @media screen and (max-width: 768px) { .header { max-width: 540px; padding-left: 20px; padding-right: 20px; } } @media screen and (max-width: 576px) { .header { max-width: none; } } .header__logo { width: clamp(8.625rem, 28.121vw + -12.87rem, 20.875rem); height: clamp(0.875rem, 3.013vw + -1.428rem, 2.188rem); } .header__logo img { object-fit: contain; width: 100%; height: 100%; } .preloader { background-color: #000; position: fixed; left: 0; top: 0; width: 100%; height: 100%; z-index: 9999; } .preloader__logo { background: url(../img/picture/logo.svg) no-repeat center center; background-size: contain; width: 330px; height: 35px; animation: 2s linear infinite opacity; } .preloader__img { width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; } .preloader__background { position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; pointer-events: none; } .preloader .pxl_one, .preloader .pxl_two, .preloader .pxl_three { transition: 2s; padding-top: 1rem; filter: blur(35px); } @media screen and (max-width: 576px) { .preloader__logo { width: 230px; } .preloader__img:after, .preloader__img:before { background-position: center center; filter: blur(60px); } } .choices__list--dropdown, .choices__list[aria-expanded] { background-color: #000; } .choices { font-size: clamp(0.875rem, 0.861vw + 0.217rem, 1.25rem); margin: unset; } .choices__list--dropdown { background-color: #000; } .choices__item { color: #fff; } .choices__list--dropdown .choices__item--selectable.is-highlighted { color: #000; } .choices__list--single { padding: 0; } .choices__inner { border: 1px solid #888; background-color: #000; font-size: clamp(0.875rem, 0.861vw + 0.217rem, 1.25rem); } .choices__list--dropdown .choices__item, .choices__list[aria-expanded] .choices__item { font-size: clamp(0.875rem, 0.861vw + 0.217rem, 1.25rem); } .choices[data-type*="select-one"] .choices__inner { padding: clamp(0.5rem, 1.722vw + -0.816rem, 1.25rem) clamp(0.75rem, 1.148vw + -0.127rem, 1.25rem); display: flex; align-items: center; } .choices__list--dropdown .choices__item { font-size: clamp(0.875rem, 0.861vw + 0.217rem, 1.25rem); } .choices__list--dropdown .choices__item, .choices__list[aria-expanded] .choices__item { padding: 12px 16px; } .choices[data-type*="select-one"]:after { background-image: url('data:image/svg+xml, '); background-repeat: no-repeat; height: clamp(0.375rem, 0.574vw + -0.064rem, 0.625rem); width: clamp(0.688rem, 1.291vw + -0.299rem, 1.25rem); color: #fff; background-size: contain; border: unset; right: clamp(0.938rem, 0.717vw + 0.389rem, 1.25rem); } .select--filter .choices[data-type*="select-one"]:after { background-image: url('data:image/svg+xml, '); height: 10px; background-size: contain; width: 20px; color: #fff; right: unset; left: 20px; } .choices[data-type*="select-one"].is-open:after { margin-top: -5px; transform: rotate(180deg); } .select--filter .choices[data-type*="select-one"].is-open:after { transform: unset; } .is-focused .choices__inner, .is-open .choices__inner { border-color: #888; border-top-left-radius: 0; border-top-right-radius: 0; } .select--filter .is-focused .choices__inner, .select--filter .is-open .choices__inner { border-color: #888; border-radius: 0; } .is-flipped.is-open .choices__inner { border-bottom-left-radius: 0; border-bottom-right-radius: 0; } .is-open .choices__list--dropdown, .is-open .choices__list[aria-expanded] { border-color: #888; border-bottom-left-radius: 0; border-bottom-right-radius: 0; border-top-width: 0; } .is-flipped .choices__list--dropdown, .is-flipped .choices__list[aria-expanded] { border-color: #888; border-radius: 0; border-top-width: 1px; border-bottom-width: 0; } .select--filter .is-open .choices__list--dropdown, .select--filter .is-open .choices__list[aria-expanded] { margin-top: 8px; border-radius: 15px; border: unset; box-shadow: 0 4px 15.6px #8596a036; } .select--filter .is-flipped .choices__list--dropdown, .select--filter .is-flipped .choices__list[aria-expanded] { margin-bottom: 8px; } .select--filter .choices__list--dropdown .choices__item, .select--filter .choices__list[aria-expanded] .choices__item { font-size: 16px; padding-top: 11px; padding-bottom: 11px; word-break: auto-phrase; } .select--filter .choices__list--dropdown .choices__list, .select--filter .choices__list[aria-expanded] .choices__list { padding-top: 8px; padding-bottom: 8px; padding-inline: 20px; } .select--filter .choices__list--dropdown .choices__item--selectable.is-highlighted, .select--filter .choices__list[aria-expanded] .choices__item--selectable.is-highlighted { background-color: unset; } .select--filter .choices__list--dropdown .choices__item, .select--filter .choices__list[aria-expanded] .choices__item { padding-inline: unset; } @media (max-width: 992px) { .choices__inner { border: 1px solid #888; background-color: #000; border-radius: 0; } .choices__list--dropdown .choices__item, .choices__list[aria-expanded] .choices__item { padding: 12px 16px; } .choices[data-type*="select-one"]:after { right: 16px; } } .animate__delay-0_5s { animation-delay: 0.5s; } .animate__delay-0_6s { animation-delay: 0.6s; } .animate__delay-0_7s { animation-delay: 0.7s; } .animate__delay-0_8s { animation-delay: 0.8s; } .animate__delay-0_9s { animation-delay: 0.9s; } @keyframes rotate { 0% { transform: rotate(0); } to { transform: rotate(360deg); } } @keyframes rotate2 { 0% { transform: rotate(360deg); } to { transform: rotate(0); } } @keyframes opacity { 0% { opacity: 1; } 50% { opacity: 0; } to { opacity: 1; } } .home { position: relative; padding-top: clamp(0rem, 10.904vw + -8.335rem, 4.75rem); padding-bottom: clamp(0rem, 10.904vw + -8.335rem, 4.75rem); margin-bottom: clamp(4.5rem, 8.034vw + -1.641rem, 8rem); } .home--flex { display: flex; align-items: flex-start; gap: 60px; margin-bottom: clamp(5.438rem, 16.786vw + -7.393rem, 12.75rem); } .home__container { width: clamp(25rem, 79.053vw + -35.426rem, 59.438rem); } .home__img { width: 40%; height: clamp(18.75rem, 18.651vw + 4.493rem, 26.875rem); background: url(../img/picture/1c.png) no-repeat 0-30px; background-size: contain; position: relative; z-index: 1; mix-blend-mode: luminosity; } .home__background { position: absolute; right: 0; top: 0; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; pointer-events: none; } .home__background--w50 { width: 50%; } .home .pxl_one, .home .pxl_two, .home .pxl_three { transition: 2s; padding-top: 1rem; filter: blur(35px); } .home__title { margin-bottom: clamp(2.5rem, 2.869vw + 0.307rem, 3.75rem); width: 43%; line-height: 1; } .home__title--white { width: 100%; } .home__select { width: clamp(12.875rem, 30.129vw + -10.155rem, 26rem); } @media screen and (max-width: 1023px) { .home:before { display: none; } .home:after { display: none; } .home .title { width: 70%; } .home--flex { flex-direction: column; gap: 40px; margin-bottom: 185px; } .home--flex .title { width: 90%; } .home__img { width: 100%; height: 267px; background-position: right; } .home__container { width: 100%; } .home__background--w50 { height: 50%; top: auto; bottom: 0; } } @media screen and (max-width: 576px) { .home:before { display: none; } .home__title--white.title { font-size: 42px; } .home .title { width: 100%; } } .calculator { padding-top: clamp(0rem, 10.904vw + -8.335rem, 4.75rem); padding-bottom: clamp(0rem, 10.904vw + -8.335rem, 4.75rem); margin-bottom: clamp(4.5rem, 8.034vw + -1.641rem, 8rem); } .calculator__title { margin-bottom: clamp(1.25rem, 5.739vw + -3.137rem, 3.75rem); } .calculator__container { display: flex; gap: clamp(3.75rem, 1.004vw + 2.982rem, 4.188rem); } .calculator__img { width: 38%; height: clamp(15rem, 37.303vw + -13.513rem, 31.25rem); position: relative; } .calculator__img:before { content: ""; position: absolute; bottom: 0; right: 0; width: 100%; height: 100%; background: url(../img/picture/calculator-img/bl_01.svg) no-repeat center center; background-size: contain; filter: blur(50px); } .calculator__img img { object-fit: contain; width: 100%; height: 100%; } .calculator__item { width: 58%; } .calculator__price { display: flex; justify-content: flex-end; align-items: center; } .calculator__price-text { font-family: Noto Sans; font-size: clamp(1.125rem, 5.165vw + -2.823rem, 3.375rem); font-weight: 400; color: #fff; margin-right: clamp(1.938rem, 0.143vw + 1.828rem, 2rem); text-transform: lowercase; display: flex; } .calculator__price-text .total { margin-left: 10px; margin-right: 10px; } .calculator__price-text span { font-weight: 100; margin-right: clamp(0.375rem, 3.73vw + -2.476rem, 2rem); } @media screen and (max-width: 1023px) { .calculator { padding-top: 10px; } .calculator__container { display: flex; flex-direction: column; gap: 20px; } .calculator__img { width: 100%; height: 200px; } .calculator__img:before { filter: blur(25px); } .calculator__item { width: 100%; } .calculator__price { justify-content: space-between; } } @media screen and (max-width: 576px) { .calculator__price-text .total { margin-left: 5px; margin-right: 5px; } } .tab__item { transition: background-color 0.38s ease-in-out, color 0.38s ease-in-out; } .tab__content { display: none; opacity: 0; transition: opacity 0.38s ease-in-out; } .tab__content--active { display: block; } .tab__content--opacity { opacity: 1; } .tab__img { display: block; visibility: hidden; opacity: 0.5; transition: 0.38s ease; } .tab__img--active { visibility: visible; } .tab__img--opacity { opacity: 1; } .case { margin-bottom: clamp(4.5rem, 8.034vw + -1.641rem, 8rem); position: relative; } .case__content { padding-top: clamp(0rem, 10.904vw + -8.335rem, 4.75rem); padding-bottom: clamp(0rem, 10.904vw + -8.335rem, 4.75rem); margin-bottom: clamp(4.5rem, 8.034vw + -1.641rem, 8rem); } .case__content-link { display: flex; padding-left: clamp(1.25rem, 5.739vw + -3.137rem, 3.75rem); margin-top: clamp(0.875rem, 0.861vw + 0.217rem, 1.25rem); } .case__content-spacer { width: 50%; } .case__title { margin-bottom: clamp(2.5rem, 1.722vw + 1.184rem, 3.25rem); } .case__title-green { color: #02c295; display: block; } .case__img { content: ""; position: absolute; object-fit: contain; top: clamp(0rem, 2.152vw + -1.645rem, 0.938rem); right: 0; width: clamp(21.875rem, 52.654vw + -18.373rem, 44.813rem); height: clamp(25rem, 56.958vw + -18.538rem, 49.813rem); z-index: 999; } .case__description { font-size: clamp(0.875rem, 0.861vw + 0.217rem, 1.25rem); width: clamp(24.5rem, 25.538vw + 4.979rem, 35.625rem); margin-bottom: clamp(2.5rem, 1.722vw + 1.184rem, 3.25rem); } .case__master { display: flex; gap: clamp(1.25rem, 5.739vw + -3.137rem, 3.75rem); } .case__master-text { width: 50%; text-align: justify; display: flex; gap: clamp(0.875rem, 0.861vw + 0.217rem, 1.25rem); flex-direction: column; } @media screen and (max-width: 1023px) { .case__master { flex-direction: column; } .case__master-text { width: 100%; } .case__img { top: 80px; width: 240px; height: 270px; } .case__content-link { justify-content: space-between; } .case__description { width: 68%; } } @media screen and (max-width: 768px) { .case__master { flex-direction: column; } .case__master-text { width: 100%; } .case__content-spacer { display: none; } .case__content-link { padding-left: 0; } } @media screen and (max-width: 576px) { .case__content:last-child { padding-top: 75px; } .case__content-link { padding-left: 0; } .case__content-spacer { display: none; } .case__description { width: 76%; } .case__img { top: 140px; width: 190px; height: 210px; } .case__master { flex-direction: column; width: 100%; } .case__master-text { width: 100%; } } @media screen and (max-width: 400px) { .case__description { width: 72%; } }