html {
line-height: 1.15;
-webkit-text-size-adjust: 100%
}
body {
margin: 0
}
* {
box-sizing: border-box
}
main {
display: block
}
:active,
:focus,
:hover {
outline: 0;
-webkit-tap-highlight-color: transparent
}
h1 {
font-size: 2em;
margin: .67em 0
}
hr {
box-sizing: content-box;
height: 0;
overflow: visible
}
pre {
font-family: monospace, monospace;
font-size: 1em
}
a {
background-color: transparent
}
b,
strong {
font-weight: bolder
}
code,
kbd,
samp {
font-family: monospace, monospace;
font-size: 1em
}
small {
font-size: 80%
}
sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline
}
sub {
bottom: -.25em
}
sup {
top: -.5em
}
img {
border-style: none
}
button {
padding: 0;
border: none;
font: inherit;
color: inherit;
background-color: transparent;
cursor: pointer
}
button,
input,
optgroup,
select,
textarea {
font-family: inherit;
font-size: 100%;
line-height: 1.15;
margin: 0
}
button,
input {
overflow: visible
}
button,
select {
text-transform: none
}
[type=button],
[type=reset],
[type=submit],
button {
-webkit-appearance: button
}
[type=button]::-moz-focus-inner,
[type=reset]::-moz-focus-inner,
[type=submit]::-moz-focus-inner,
button::-moz-focus-inner {
border-style: none;
padding: 0
}
[type=button]:-moz-focusring,
[type=reset]:-moz-focusring,
[type=submit]:-moz-focusring,
button:-moz-focusring {
outline: 1px dotted ButtonText
}
fieldset {
padding: .35em .75em .625em
}
legend {
box-sizing: border-box;
color: inherit;
display: table;
max-width: 100%;
padding: 0;
white-space: normal
}
progress {
vertical-align: baseline
}
[type=checkbox],
[type=radio] {
box-sizing: border-box;
padding: 0
}
[type=number]::-webkit-inner-spin-button,
[type=number]::-webkit-outer-spin-button {
height: auto
}
[type=search] {
-webkit-appearance: textfield;
outline-offset: -2px
}
[type=search]::-webkit-search-decoration {
-webkit-appearance: none
}
::-webkit-file-upload-button {
-webkit-appearance: button;
font: inherit
}
details {
display: block
}
summary {
display: list-item
}
[hidden],
template {
display: none
}
h1,
h2,
h3,
h4,
h5,
h6,
p {
line-height: 1;
margin: 0
}
li,
ul {
box-sizing: border-box;
list-style: none;
padding: 0;
margin: 0
}
button,
input,
label,
select,
textarea {
margin: 0;
border: 0;
padding: 0;
display: inline-block;
vertical-align: middle;
white-space: normal;
background: none;
line-height: 1
}
input:focus {
outline: 0
}
input::placeholder {
color: inherit;
font-size: inherit
}
input::-webkit-input-placeholder {
color: inherit;
font-size: inherit
}
input::-moz-placeholder {
color: inherit;
font-size: inherit
}
input:-ms-input-placeholder {
color: inherit;
font-size: inherit
}
input::-ms-input-placeholder {
color: inherit;
font-size: inherit
}
input,
textarea {
box-sizing: border-box
}
input[type=search] {
-webkit-appearance: textfield;
-webkit-box-sizing: content-box
}
::-webkit-search-decoration {
display: none
}
textarea {
overflow: auto
}
select[multiple],
textarea {
vertical-align: top
}
::selection {
color: inherit;
background: inherit;
text-shadow: inherit
}
::-webkit-selection {
color: inherit;
background: inherit;
text-shadow: inherit
}
::-moz-selection {
color: inherit;
background: inherit;
text-shadow: inherit
}
table {
border-collapse: collapse;
border-spacing: 0
}
td,
th {
padding: 0
}
blockquote {
margin: 0
}
@font-face {
font-family: Pinup-Medium;
src: url(fonts/src/fonts/Pinup-Medium/Pinup-Medium.eot);
src: url(fonts/src/fonts/Pinup-Medium/Pinup-Medium.eot) format("embedded-opentype"), url(fonts/src/fonts/Pinup-Medium/Pinup-Medium.woff) format("woff"), url(fonts/src/fonts/Pinup-Medium/Pinup-Medium.ttf) format("truetype");
font-weight: 500;
font-style: normal
}
@font-face {
font-family: Pinup-Medium-It;
src: url(fonts/src/fonts/Pinup-Medium-It/Pinup-Medium-It.eot);
src: url(fonts/src/fonts/Pinup-Medium-It/Pinup-Medium-It.eot) format("embedded-opentype"), url(fonts/src/fonts/Pinup-Medium-It/Pinup-Medium-It.woff) format("woff"), url(fonts/src/fonts/Pinup-Medium-It/Pinup-Medium-It.ttf) format("truetype");
font-weight: 500;
font-style: italic
}
@font-face {
font-family: Pinup-Bold;
src: url(fonts/src/fonts/Pinup-Bold/Pinup-Bold.eot);
src: url(fonts/src/fonts/Pinup-Bold/Pinup-Bold.eot) format("embedded-opentype"), url(fonts/src/fonts/Pinup-Bold/Pinup-Bold.woff) format("woff"), url(fonts/src/fonts/Pinup-Bold/Pinup-Bold.ttf) format("truetype");
font-weight: 700;
font-style: normal
}
@font-face {
font-family: Pinup-Bold-It;
src: url(fonts/src/fonts/Pinup-Bold-It/Pinup-Bold-It.eot);
src: url(fonts/src/fonts/Pinup-Bold-It/Pinup-Bold-It.eot) format("embedded-opentype"), url(fonts/src/fonts/Pinup-Bold-It/Pinup-Bold-It.woff) format("woff"), url(fonts/src/fonts/Pinup-Bold-It/Pinup-Bold-It.ttf) format("truetype");
font-weight: 700;
font-style: italic
}
@font-face {
font-family: Pinup-Black;
src: url(fonts/src/fonts/Pinup-Black/Pinup-Black.eot);
src: url(fonts/src/fonts/Pinup-Black/Pinup-Black.eot) format("embedded-opentype"), url(fonts/src/fonts/Pinup-Black/Pinup-Black.woff) format("woff"), url(fonts/src/fonts/Pinup-Black/Pinup-Black.ttf) format("truetype");
font-weight: 900;
font-style: normal
}
@font-face {
font-family: Pinup-Black-It;
src: url(fonts/src/fonts/Pinup-Black-It/Pinup-Black-It.eot);
src: url(fonts/src/fonts/Pinup-Black-It/Pinup-Black-It.eot) format("embedded-opentype"), url(fonts/src/fonts/Pinup-Black-It/Pinup-Black-It.woff) format("woff"), url(fonts/src/fonts/Pinup-Black-It/Pinup-Black-It.ttf) format("truetype");
font-weight: 900;
font-style: italic
}
@font-face {
font-family: icomoon;
src: url(fonts/src/icon-fonts/icomoon.eot);
src: url(fonts/src/icon-fonts/icomoon.eot) format("embedded-opentype"), url(fonts/src/icon-fonts/icomoon.ttf) format("truetype"), url(fonts/src/icon-fonts/icomoon.woff) format("woff");
font-weight: 400;
font-style: normal;
font-display: block
}
[class*=" icon-"],
[class^=icon-] {
font-family: icomoon !important;
speak: none;
font-style: normal;
font-weight: 400;
font-variant: normal;
text-transform: none;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale
}
.icon-ars:before {
content: "\e900"
}
.icon-azn:before {
content: "\e901"
}
.icon-bgn:before {
content: "\e902"
}
.icon-brl:before {
content: "\e903"
}
.icon-cop:before {
content: "\e904"
}
.icon-eur:before {
content: "\e905"
}
.icon-idr:before {
content: "\e906"
}
.icon-inr:before {
content: "\e907"
}
.icon-kzt:before {
content: "\e908"
}
.icon-mdl:before {
content: "\e909"
}
.icon-pln:before {
content: "\e90a"
}
.icon-rub:before {
content: "\e90b"
}
.icon-try:before {
content: "\e90c"
}
.icon-uah:before {
content: "\e90d"
}
.icon-usd:before {
content: "\e90e"
}
.icon-uzs:before {
content: "\e90f"
}
.icon-close:before {
content: "\e910"
}
body,
html {
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
-webkit-font-smoothing: subpixel-antialiased;
-moz-osx-font-smoothing: grayscale
}
@media screen and (max-width:479.9px) {
body,
html {
height: 100%
}
}
body {
position: relative;
font-family: Pinup-Bold, sans-serif;
font-size: 20px;
color: #fff;
min-height: 100vh;
overflow-x: hidden
}
@media screen and (max-width:1919.9px) {
body {
font-size: 18px
}
}
@media screen and (max-width:479.9px) {
body {
font-size: 14px;
min-height: inherit;
overflow-y: hidden
}
}
@media screen and (orientation:landscape) and (max-height:420px) and (min-aspect-ratio:13/9) {
body {
font-size: 14px
}
}
@-webkit-keyframes back {
0% {
-webkit-transform: translate(-50px);
transform: translate(-50px)
}
50% {
-webkit-transform: translate(150px) rotate(.001deg);
transform: translate(150px) rotate(.001deg)
}
to {
-webkit-transform: translate(-50px);
transform: translate(-50px)
}
}
@keyframes back {
0% {
-webkit-transform: translate(-50px);
transform: translate(-50px)
}
50% {
-webkit-transform: translate(150px) rotate(.001deg);
transform: translate(150px) rotate(.001deg)
}
to {
-webkit-transform: translate(-50px);
transform: translate(-50px)
}
}
@-webkit-keyframes moveBullets {
0% {
-webkit-transform: translate(0) rotate(0);
transform: translate(0) rotate(0)
}
20% {
-webkit-transform: translateY(-30px) rotate(.8deg);
transform: translateY(-30px) rotate(.8deg)
}
40% {
-webkit-transform: translateY(-15px) rotate(.4deg);
transform: translateY(-15px) rotate(.4deg)
}
60% {
-webkit-transform: translate(0) rotate(.6deg);
transform: translate(0) rotate(.6deg)
}
80% {
-webkit-transform: translateY(20px) rotate(.2deg);
transform: translateY(20px) rotate(.2deg)
}
to {
-webkit-transform: translate(0) rotate(0);
transform: translate(0) rotate(0)
}
}
@keyframes moveBullets {
0% {
-webkit-transform: translate(0) rotate(0);
transform: translate(0) rotate(0)
}
20% {
-webkit-transform: translateY(-30px) rotate(.8deg);
transform: translateY(-30px) rotate(.8deg)
}
40% {
-webkit-transform: translateY(-15px) rotate(.4deg);
transform: translateY(-15px) rotate(.4deg)
}
60% {
-webkit-transform: translate(0) rotate(.6deg);
transform: translate(0) rotate(.6deg)
}
80% {
-webkit-transform: translateY(20px) rotate(.2deg);
transform: translateY(20px) rotate(.2deg)
}
to {
-webkit-transform: translate(0) rotate(0);
transform: translate(0) rotate(0)
}
}
@-webkit-keyframes moveThug {
0% {
-webkit-transform: translateX(0);
transform: translateX(0)
}
50% {
-webkit-transform: translateX(-14vw);
transform: translateX(-14vw)
}
to {
-webkit-transform: translateX(0);
transform: translateX(0)
}
}
@keyframes moveThug {
0% {
-webkit-transform: translateX(0);
transform: translateX(0)
}
50% {
-webkit-transform: translateX(-14vw);
transform: translateX(-14vw)
}
to {
-webkit-transform: translateX(0);
transform: translateX(0)
}
}
@-webkit-keyframes moveRocks {
0% {
-webkit-transform: translateY(0);
transform: translateY(0)
}
50% {
-webkit-transform: translateY(5vw);
transform: translateY(5vw)
}
to {
-webkit-transform: translateY(0);
transform: translateY(0)
}
}
@keyframes moveRocks {
0% {
-webkit-transform: translateY(0);
transform: translateY(0)
}
50% {
-webkit-transform: translateY(5vw);
transform: translateY(5vw)
}
to {
-webkit-transform: translateY(0);
transform: translateY(0)
}
}
@-webkit-keyframes animateGun {
50% {
-webkit-transform: scale(1);
transform: scale(1);
opacity: 0
}
55% {
-webkit-transform: scale(1.15);
transform: scale(1.15);
opacity: 1
}
60% {
-webkit-transform: scale(1);
transform: scale(1);
opacity: 0
}
65% {
-webkit-transform: scale(1.15);
transform: scale(1.15);
opacity: 1
}
70% {
-webkit-transform: scale(1);
transform: scale(1);
opacity: 0
}
75% {
-webkit-transform: scale(1.15);
transform: scale(1.15);
opacity: 1
}
80% {
-webkit-transform: scale(1);
transform: scale(1);
opacity: 0
}
85% {
-webkit-transform: scale(1.15);
transform: scale(1.15);
opacity: 1
}
90% {
-webkit-transform: scale(1);
transform: scale(1);
opacity: 0
}
}
@keyframes animateGun {
50% {
-webkit-transform: scale(1);
transform: scale(1);
opacity: 0
}
55% {
-webkit-transform: scale(1.15);
transform: scale(1.15);
opacity: 1
}
60% {
-webkit-transform: scale(1);
transform: scale(1);
opacity: 0
}
65% {
-webkit-transform: scale(1.15);
transform: scale(1.15);
opacity: 1
}
70% {
-webkit-transform: scale(1);
transform: scale(1);
opacity: 0
}
75% {
-webkit-transform: scale(1.15);
transform: scale(1.15);
opacity: 1
}
80% {
-webkit-transform: scale(1);
transform: scale(1);
opacity: 0
}
85% {
-webkit-transform: scale(1.15);
transform: scale(1.15);
opacity: 1
}
90% {
-webkit-transform: scale(1);
transform: scale(1);
opacity: 0
}
}
@-webkit-keyframes flashingTwinkle {
5% {
-webkit-transform: scale(1.15);
transform: scale(1.15);
opacity: 1
}
10% {
-webkit-transform: scale(1);
transform: scale(1);
opacity: 0
}
15% {
-webkit-transform: scale(1.15);
transform: scale(1.15);
opacity: 1
}
20% {
-webkit-transform: scale(1);
transform: scale(1);
opacity: 0
}
25% {
-webkit-transform: scale(1.15);
transform: scale(1.15);
opacity: 1
}
30% {
-webkit-transform: scale(1);
transform: scale(1);
opacity: 0
}
35% {
-webkit-transform: scale(1.15);
transform: scale(1.15);
opacity: 1
}
40% {
-webkit-transform: scale(1);
transform: scale(1);
opacity: 0
}
45% {
-webkit-transform: scale(1.15);
transform: scale(1.15);
opacity: 1
}
50% {
-webkit-transform: scale(1);
transform: scale(1);
opacity: 0
}
55% {
-webkit-transform: scale(1.15);
transform: scale(1.15);
opacity: 1
}
60% {
-webkit-transform: scale(1);
transform: scale(1);
opacity: 0
}
65% {
-webkit-transform: scale(1.15);
transform: scale(1.15);
opacity: 1
}
70% {
-webkit-transform: scale(1);
transform: scale(1);
opacity: 0
}
75% {
-webkit-transform: scale(1.15);
transform: scale(1.15);
opacity: 1
}
80% {
-webkit-transform: scale(1);
transform: scale(1);
opacity: 0
}
85% {
-webkit-transform: scale(1.15);
transform: scale(1.15);
opacity: 1
}
90% {
-webkit-transform: scale(1);
transform: scale(1);
opacity: 0
}
95% {
-webkit-transform: scale(1.15);
transform: scale(1.15);
opacity: 1
}
}
@keyframes flashingTwinkle {
5% {
-webkit-transform: scale(1.15);
transform: scale(1.15);
opacity: 1
}
10% {
-webkit-transform: scale(1);
transform: scale(1);
opacity: 0
}
15% {
-webkit-transform: scale(1.15);
transform: scale(1.15);
opacity: 1
}
20% {
-webkit-transform: scale(1);
transform: scale(1);
opacity: 0
}
25% {
-webkit-transform: scale(1.15);
transform: scale(1.15);
opacity: 1
}
30% {
-webkit-transform: scale(1);
transform: scale(1);
opacity: 0
}
35% {
-webkit-transform: scale(1.15);
transform: scale(1.15);
opacity: 1
}
40% {
-webkit-transform: scale(1);
transform: scale(1);
opacity: 0
}
45% {
-webkit-transform: scale(1.15);
transform: scale(1.15);
opacity: 1
}
50% {
-webkit-transform: scale(1);
transform: scale(1);
opacity: 0
}
55% {
-webkit-transform: scale(1.15);
transform: scale(1.15);
opacity: 1
}
60% {
-webkit-transform: scale(1);
transform: scale(1);
opacity: 0
}
65% {
-webkit-transform: scale(1.15);
transform: scale(1.15);
opacity: 1
}
70% {
-webkit-transform: scale(1);
transform: scale(1);
opacity: 0
}
75% {
-webkit-transform: scale(1.15);
transform: scale(1.15);
opacity: 1
}
80% {
-webkit-transform: scale(1);
transform: scale(1);
opacity: 0
}
85% {
-webkit-transform: scale(1.15);
transform: scale(1.15);
opacity: 1
}
90% {
-webkit-transform: scale(1);
transform: scale(1);
opacity: 0
}
95% {
-webkit-transform: scale(1.15);
transform: scale(1.15);
opacity: 1
}
}
@-webkit-keyframes animateFire {
0% {
background-position: 0 0
}
to {
background-position: 650px -1280px
}
}
@keyframes animateFire {
0% {
background-position: 0 0
}
to {
background-position: 650px -1280px
}
}
@-webkit-keyframes moveSnow {
0% {
background-position: 0 0
}
to {
background-position: 0 1586px
}
}
@keyframes moveSnow {
0% {
background-position: 0 0
}
to {
background-position: 0 1586px
}
}
@-webkit-keyframes blinkingGarlands {
50% {
opacity: 1
}
}
@keyframes blinkingGarlands {
50% {
opacity: 1
}
}
@-webkit-keyframes moveCarFirst {
to {
-webkit-transform: translateX(-16.8vw) scale(1);
transform: translateX(-16.8vw) scale(1)
}
}
@keyframes moveCarFirst {
to {
-webkit-transform: translateX(-16.8vw) scale(1);
transform: translateX(-16.8vw) scale(1)
}
}
@-webkit-keyframes moveCarSecond {
to {
-webkit-transform: translateX(-8.4vw) scale(1);
transform: translateX(-8.4vw) scale(1)
}
}
@keyframes moveCarSecond {
to {
-webkit-transform: translateX(-8.4vw) scale(1);
transform: translateX(-8.4vw) scale(1)
}
}
@-webkit-keyframes moveCarThird {
to {
-webkit-transform: translateX(0) scale(1);
transform: translateX(0) scale(1)
}
}
@keyframes moveCarThird {
to {
-webkit-transform: translateX(0) scale(1);
transform: translateX(0) scale(1)
}
}
@-webkit-keyframes moveCarFourth {
to {
-webkit-transform: translateX(8.1vw) scale(1);
transform: translateX(8.1vw) scale(1)
}
}
@keyframes moveCarFourth {
to {
-webkit-transform: translateX(8.1vw) scale(1);
transform: translateX(8.1vw) scale(1)
}
}
@-webkit-keyframes moveCarFifth {
to {
-webkit-transform: translateX(16.5vw) scale(1);
transform: translateX(16.5vw) scale(1)
}
}
@keyframes moveCarFifth {
to {
-webkit-transform: translateX(16.5vw) scale(1);
transform: translateX(16.5vw) scale(1)
}
}
@-webkit-keyframes blinkingLights {
20% {
opacity: 1
}
40% {
opacity: 0
}
60% {
opacity: 1
}
80% {
opacity: 0
}
to {
opacity: 1
}
}
@keyframes blinkingLights {
20% {
opacity: 1
}
40% {
opacity: 0
}
60% {
opacity: 1
}
80% {
opacity: 0
}
to {
opacity: 1
}
}
@-webkit-keyframes appearing {
0% {
opacity: 0
}
to {
opacity: 1
}
}
@keyframes appearing {
0% {
opacity: 0
}
to {
opacity: 1
}
}
.header {
color: #df3d22;
display: -webkit-flex;
display: flex;
-webkit-flex-direction: column;
flex-direction: column;
-webkit-align-items: center;
align-items: center;
position: absolute;
left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
top: 17%;
z-index: 20
}
@media screen and (max-width:1919.9px) {
.header {
top: 17%
}
}
@media screen and (max-width:1199.9px) {
.header {
left: 50%
}
}
@media screen and (max-width:919.9px) {
.header {
top: 17%
}
}
@media screen and (max-width:479.9px) {
.header {
top: 3%
}
}
@media screen and (orientation:landscape) and (max-height:420px) and (min-aspect-ratio:13/9) {
.header {
top: 15px;
left: 50%
}
}
.header__logo {
cursor: pointer;
display: -webkit-flex;
display: flex
}
.header__logo>img {
width: 13.22vw;
height: 100%
}
@media screen and (max-width:1919.9px) {
.header__logo>img {
width: 13.22vw
}
}
@media screen and (max-width:919.9px) {
.header__logo>img {
width: 150px
}
}
@media screen and (orientation:landscape) and (max-height:420px) and (min-aspect-ratio:13/9) {
.header__logo>img {
width: 100px
}
}
.main {
position: relative;
display: -webkit-flex;
display: flex;
-webkit-flex-direction: column;
flex-direction: column;
background: url(img/bg-mb.png) 50%/cover no-repeat;
height: 100%;
min-height: 100vh;
width: 100%;
overflow: hidden
}
@media screen and (max-width:479.9px) {
.main {
background: url(img/bg-mb.png) 35%/cover no-repeat;
min-height: inherit
}
}
.main:before {
content: "";
position: absolute;
background: none;
left: 0;
width: 100%;
height: 100%;
-webkit-animation: none;
animation: none
}
@media screen and (max-width:1199.9px) {
.main:before {
-webkit-animation: none;
animation: none
}
}
@media screen and (orientation:landscape) and (max-height:420px) and (min-aspect-ratio:13/9) {
.main:before {
-webkit-animation: none;
animation: none
}
}
.main:after {
content: "";
position: absolute;
bottom: 0;
left: 0;
background: none;
width: 100%;
height: 100%;
z-index: 1
}
.main__container {
position: relative;
display: -webkit-flex;
display: flex;
-webkit-flex-direction: column;
flex-direction: column;
-webkit-align-items: center;
align-items: center;
-webkit-justify-content: flex-start;
justify-content: flex-start;
width: 100%;
padding: 0 15px;
min-height: inherit;
height: 100%
}
@media screen and (max-width:1199.9px) {
.main__container {
width: 100%;
-webkit-justify-content: center;
justify-content: center;
-webkit-align-items: center;
align-items: center
}
}
@media screen and (max-width:919.9px) {
.main__container {
width: 100%
}
}
@media screen and (orientation:landscape) and (max-height:420px) and (min-aspect-ratio:13/9) {
.main__container {
-webkit-justify-content: center;
justify-content: center;
width: 100%;
-webkit-align-items: center;
align-items: center
}
}
.main__container:after {
content: "";
position: absolute;
width: 60vw;
height: 44vw;
bottom: 0;
background: none;
left: 78%;
z-index: 0
}
@media screen and (max-width:1199.9px) {
.main__container:after {
width: 839px;
height: 623px
}
}
@media screen and (max-width:919.9px) {
.main__container:after {
background: none;
width: 62vw;
height: 65vw;
left: 0;
max-width: 440px;
max-height: 475px
}
}
@media screen and (max-width:479.9px) {
.main__container:after {
width: 62vw;
height: 81vw;
bottom: 0;
background: none
}
}
@media screen and (orientation:landscape) and (max-height:420px) and (min-aspect-ratio:13/9) {
.main__container:after {
width: 276px;
height: 276px;
left: 78%;
background: none
}
}
.main__bullets {
position: absolute;
background: none;
width: 100%;
height: 100%;
-webkit-animation: moveBullets 6s ease-in-out infinite;
animation: moveBullets 6s ease-in-out infinite;
z-index: 4
}
@media screen and (max-width:1199.9px) {
.main__bullets {
-webkit-animation: none;
animation: none
}
}
@media screen and (max-width:479.9px) {
.main__bullets {
background: none
}
}
@media screen and (orientation:landscape) and (max-height:420px) and (min-aspect-ratio:13/9) {
.main__bullets {
display: none
}
}
.main__fire {
position: absolute;
top: 0;
left: 0;
right: 0;
width: 100%;
height: 100%;
background: url(img/balls.png) bottom/contain no-repeat;
-webkit-animation: moveBullets 6s ease-in-out infinite;
animation: moveBullets 6s ease-in-out infinite;
/* -webkit-animation:none;animation:none;transition:all .1s ease; */
z-index: 2
}
@media screen and (max-width:1199.9px) {
.main__fire {
-webkit-animation: none;
animation: none
}
}
@media screen and (max-width:479.9px) {
.main__fire {
display: none
}
}
@media screen and (orientation:landscape) and (max-height:420px) and (min-aspect-ratio:13/9) {
.main__fire {
-webkit-animation: none;
animation: none
}
}
.main__thug {
position: absolute;
bottom: 0;
right: 0;
left: inherit;
-webkit-animation: none;
animation: none;
z-index: 1
}
@media screen and (max-width:1199.9px) {
.main__thug {
right: -8vw;
-webkit-animation: none;
animation: none
}
}
@media screen and (max-width:919.9px) {
.main__thug {
bottom: 0;
right: 0
}
}
@media screen and (max-width:479.9px) {
.main__thug {
right: 0;
left: inherit;
bottom: -20px
}
}
@media screen and (orientation:landscape) and (max-height:420px) and (min-aspect-ratio:13/9) {
.main__thug {
bottom: -2vw;
right: -5vw;
-webkit-animation: none;
animation: none
}
}
.main__thug-man {
width: 36vw;
height: 37.5vw;
background: url(img/persons.png) 50%/contain no-repeat
}
@media screen and (max-width:1199.9px) {
.main__thug-man {
width: 47vw;
height: 46vw
}
}
@media screen and (max-width:919.9px) {
.main__thug-man {
width: 58vw;
height: 57vw;
max-width: 653px;
max-height: 584px
}
}
@media screen and (max-width:479.9px) {
.main__thug-man {
width: 51vh;
height: 46vh;
background: none
}
}
@media screen and (orientation:landscape) and (max-height:420px) and (min-aspect-ratio:13/9) {
.main__thug-man {
width: 40vw;
height: 42vw
}
}
.main__thug-gun {
position: absolute;
bottom: 1vw;
right: -10vw;
width: 22vw;
height: 22vw;
background: none;
-webkit-animation: none;
animation: none;
opacity: 0
}
@media screen and (max-width:1199.9px) {
.main__thug-gun {
-webkit-animation: none;
animation: none
}
}
@media screen and (max-width:919.9px) {
.main__thug-gun {
right: -10vw
}
}
@media screen and (max-width:479.9px) {
.main__thug-gun {
right: -10vw
}
}
@media screen and (orientation:landscape) and (max-height:420px) and (min-aspect-ratio:13/9) {
.main__thug-gun {
bottom: 84%;
right: 118px;
width: 78px;
height: 66px;
-webkit-animation: none;
animation: none
}
}
.main__wrapper {
display: -webkit-flex;
display: flex;
-webkit-flex-direction: column;
flex-direction: column;
-webkit-justify-content: center;
justify-content: center;
position: relative;
margin: 138px 0 50px;
max-width: 800px;
width: 100%;
min-height: 556px;
height: 79vh;
z-index: 12
}
@media screen and (max-width:1919.9px) {
.main__wrapper {
margin: 12vh 0 14px;
max-width: 8% 0 6%;
min-height: 466px;
height: 78vh
}
}
@media screen and (max-width:1199.9px) {
.main__wrapper {
max-width: 580px
}
}
@media screen and (max-width:919.9px) {
.main__wrapper {
max-width: 550px;
margin: -13vh 0 40px;
height: 84vh
}
}
@media screen and (max-width:479.9px) {
.main__wrapper {
margin: -55% 0 0;
max-width: 454px;
-webkit-justify-content: flex-end;
justify-content: flex-end
}
}
@media screen and (orientation:landscape) and (max-height:420px) and (min-aspect-ratio:13/9) {
.main__wrapper {
margin: 38px 0 10px;
max-width: 360px;
min-height: auto;
height: auto
}
}
.main__wrapper-block {
position: relative;
display: -webkit-flex;
display: flex;
-webkit-flex-direction: column;
flex-direction: column;
-webkit-align-items: center;
align-items: center;
margin: 26px 0 0
}
@media screen and (max-width:1919.9px) {
.main__wrapper-block {
margin: 26px 0 0
}
}
@media screen and (max-width:919.9px) {
.main__wrapper-block {
margin: 26px 0 0
}
}
@media screen and (max-width:479.9px) {
.main__wrapper-block {
margin: 15px 0 0
}
}
@media screen and (orientation:landscape) and (max-height:420px) and (min-aspect-ratio:13/9) {
.main__wrapper-block {
margin: 15px 0 0
}
}
.main__wrapper-top {
display: -webkit-flex;
display: flex;
-webkit-flex-direction: column;
flex-direction: column;
-webkit-align-items: center;
align-items: center;
position: relative;
text-align: center
}
.main__logo {
position: absolute;
width: 190px;
height: 79px;
background: none;
right: -95%;
bottom: 50px;
-webkit-animation: none;
animation: none;
transition: inherit;
z-index: 2
}
@media screen and (max-width:1199.9px) {
.main__logo {
-webkit-animation: none;
animation: none;
right: -95%;
top: inherit
}
}
@media screen and (max-width:919.9px) {
.main__logo {
right: -95%;
bottom: 50px;
-webkit-transform: translate(50%);
transform: translate(50%);
opacity: 0
}
}
@media screen and (max-width:479.9px) {
.main__logo {
width: 100px;
height: 44px;
right: 50%;
bottom: 106px;
opacity: 1
}
}
@media screen and (orientation:landscape) and (max-height:420px) and (min-aspect-ratio:13/9) {
.main__logo {
width: 100px;
height: 44px;
right: -95%;
-webkit-transform: translate(0);
transform: translate(0);
bottom: 15px;
-webkit-animation: none;
animation: none;
opacity: 1
}
}
.main__logo:after,
.main__logo:before {
content: "";
display: none;
position: absolute;
top: 1.2vw;
left: 5.4vw;
width: 68%;
height: 100%
}
.main__logo:before {
background: none
}
.main__logo:after {
background: none;
-webkit-animation: none;
animation: none;
opacity: 0
}
@media screen and (max-width:1199.9px) {
.main__logo:after {
-webkit-animation: none;
animation: none;
opacity: 1
}
}
.main__title {
display: none;
font-size: inherit;
text-transform: uppercase;
color: #ff2400;
position: relative
}
.main__title-basic {
font-size: 53px;
font-family: Pinup-Black-It, sans-serif
}
@media screen and (max-width:1919.9px) {
.main__title-basic {
font-size: 41px
}
}
@media screen and (max-width:479.9px) {
.main__title-basic {
font-size: 24px
}
}
@media screen and (max-width:320px) {
.main__title-basic {
font-size: 19px
}
}
@media screen and (orientation:landscape) and (max-height:420px) and (min-aspect-ratio:13/9) {
.main__title-basic {
font-size: 16px
}
}
.main__title-sub {
display: initial;
font-size: 53px;
font-family: Pinup-Black-It, sans-serif;
margin: 0;
color: inherit
}
@media screen and (max-width:1919.9px) {
.main__title-sub {
font-size: 41px
}
}
@media screen and (max-width:479.9px) {
.main__title-sub {
font-size: 24px
}
}
@media screen and (max-width:320px) {
.main__title-sub {
font-size: 19px
}
}
@media screen and (orientation:landscape) and (max-height:420px) and (min-aspect-ratio:13/9) {
.main__title-sub {
font-size: 16px
}
}
@media screen and (max-width:479.9px) {
.main__title br {
display: none
}
}
@media screen and (orientation:landscape) and (max-height:420px) and (min-aspect-ratio:13/9) {
.main__title br {
display: none
}
}
.main__text {
max-width: inherit;
width: 100%;
height: auto;
margin: 0;
font-size: 114px;
text-transform: uppercase;
background: none;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
z-index: 1;
-webkit-order: inherit;
order: inherit
}
@media screen and (max-width:1919.9px) {
.main__text {
max-width: inherit;
margin: 8vh 0 0;
font-size: 88px
}
}
@media screen and (max-width:919.9px) {
.main__text {
font-size: 76px;
margin: 32px 0 0
}
}
@media screen and (max-width:479.9px) {
.main__text {
max-width: inherit;
margin: 0;
font-size: 52px
}
}
@media screen and (orientation:landscape) and (max-height:420px) and (min-aspect-ratio:13/9) {
.main__text {
max-width: inherit;
margin: 0;
font-size: 45px
}
}
.main__text-currency {
font-size: 76px
}
@media screen and (max-width:1919.9px) {
.main__text-currency {
font-size: 66px
}
}
@media screen and (max-width:919.9px) {
.main__text-currency {
font-size: 56px
}
}
@media screen and (max-width:479.9px) {
.main__text-currency {
font-size: 38px
}
}
@media screen and (orientation:landscape) and (max-height:420px) and (min-aspect-ratio:13/9) {
.main__text-currency {
font-size: 34px
}
}
.main__steps {
position: relative;
bottom: auto;
right: auto;
display: none;
-webkit-flex-direction: row;
flex-direction: row;
-webkit-justify-content: space-between;
justify-content: space-between;
width: 100%;
margin: 32px 0 0
}
@media screen and (max-width:1199.9px) {
.main__steps {
width: 100%
}
}
@media screen and (max-width:919.9px) {
.main__steps {
right: auto;
width: 100%;
margin: 32px 0 0;
-webkit-transform: none;
transform: none
}
}
@media screen and (orientation:landscape) and (max-height:420px) and (min-aspect-ratio:13/9) {
.main__steps {
bottom: auto;
right: auto;
width: 100%;
margin: 20px 0 0
}
}
.main__steps:after {
content: "";
position: absolute;
top: -45px;
right: -25px;
background: url(img/bullet.png) no-repeat;
width: 122px;
height: 95px
}
@media screen and (max-width:479.9px) {
.main__steps:after {
display: none
}
}
@media screen and (orientation:landscape) and (max-height:420px) and (min-aspect-ratio:13/9) {
.main__steps:after {
display: none
}
}
.main__steps-wrapper {
display: none
}
.main__steps-text,
.main__steps-title {
text-transform: uppercase;
text-align: center
}
.main__steps-title {
font-size: 32px;
color: #eb1606
}
@media screen and (max-width:1919.9px) {
.main__steps-title {
font-size: 26px
}
}
@media screen and (max-width:479.9px) {
.main__steps-title {
font-size: 26px
}
}
@media screen and (orientation:landscape) and (max-height:420px) and (min-aspect-ratio:13/9) {
.main__steps-title {
font-size: 22px
}
}
.main__steps-text {
font-family: Pinup-Medium-It, sans-serif;
font-size: 28px
}
@media screen and (max-width:1919.9px) {
.main__steps-text {
font-size: 22px
}
}
@media screen and (max-width:479.9px) {
.main__steps-text {
font-size: 20px
}
}
@media screen and (orientation:landscape) and (max-height:420px) and (min-aspect-ratio:13/9) {
.main__steps-text {
font-size: 16px
}
}
.main__btn {
position: relative;
font-weight: 700;
text-align: center;
border-radius: 12px;
background-color: #ff2400;
color: #fff;
font-family: Pinup-Medium, sans-serif;
font-size: 26px;
text-transform: none;
padding: 13px;
text-decoration: none;
-webkit-order: 3;
order: 3;
}
.main__btn span {
width: 320px;
font-size: 26px;
padding: 16px 40px;
}
.main__link {
color: #fff;
margin: 16px 0 0;
text-transform: uppercase;
font-weight: 400;
font-family: Roboto, sans-serif
}
@media screen and (max-width:1919.9px) {
.main__link {
margin: 10px 0 0;
font-size: 14px
}
}
@media screen and (max-width:479.9px) {
.main__link {
font-size: 12px;
margin: 8px 0 0
}
}
@media screen and (orientation:landscape) and (max-height:420px) and (min-aspect-ratio:13/9) {
.main__link {
font-size: 12px;
margin: 8px 0 0
}
}
.main__rocks {
display: -webkit-flex;
display: flex;
-webkit-justify-content: space-between;
justify-content: space-between;
position: absolute;
width: 60vw;
top: 34px;
right: 0;
-webkit-animation: moveRocks 16s ease-in-out infinite;
animation: moveRocks 16s ease-in-out infinite
}
@media screen and (max-width:1199.9px) {
.main__rocks {
-webkit-animation: none;
animation: none
}
}
.main__rocks-left {
width: 14vw;
height: 27vw;
background: url(img/rock-second.png) 50%/contain no-repeat
}
.main__rocks-right {
width: 11vw;
height: 20vw;
background: url(img/rock-third.png) 50%/contain no-repeat
}
.main__cars {
position: relative;
display: -webkit-flex;
display: flex;
-webkit-justify-content: center;
justify-content: center;
width: 100%;
height: 9vw
}
@media screen and (max-width:919.9px) {
.main__cars {
height: 17vw;
-webkit-order: 1;
order: 1
}
}
@media screen and (max-width:479.9px) {
.main__cars {
height: 19vw
}
}
@media screen and (orientation:landscape) and (max-height:420px) and (min-aspect-ratio:13/9) {
.main__cars {
height: 9vw;
-webkit-order: initial;
order: 0
}
}
.main__cars:before {
content: "";
position: absolute;
top: 50%;
width: 32vw;
height: 23vw;
background: url(img/background-cars.png) 50%/contain no-repeat;
-webkit-transform: translateY(-66%);
transform: translateY(-66%)
}
@media screen and (max-width:919.9px) {
.main__cars:before {
width: 68vw;
height: 35vw
}
}
.main__form {
display: -webkit-flex;
display: flex;
-webkit-flex-direction: column;
flex-direction: column;
max-width: 400px;
width: 100%;
margin: 32px auto 0
}
@media screen and (max-width:1919.9px) {
.main__form {
max-width: 320px;
margin: 14px auto 0
}
}
@media screen and (max-width:919.9px) {
.main__form {
max-width: 380px
}
}
@media screen and (orientation:landscape) and (max-height:420px) and (min-aspect-ratio:13/9) {
.main__form {
margin: 14px auto 0
}
}
.main__car {
position: absolute;
-webkit-transform: translateX(0) scale(0);
transform: translateX(0) scale(0)
}
@media screen and (max-width:919.9px) {
.main__car {
-webkit-transform: none;
transform: none
}
}
.main__car:before {
content: "";
position: absolute;
height: 100%;
-webkit-animation: blinkingLights 2s linear 3s infinite;
animation: blinkingLights 2s linear 3s infinite;
opacity: 0
}
@media screen and (max-width:919.9px) {
.main__car:before {
-webkit-animation: none;
animation: none;
opacity: 1
}
}
.main__car_first {
bottom: 1.2vw;
width: 12.6vw;
height: 5.6vw;
background: url(img/car-audi.png) 50%/contain no-repeat;
-webkit-animation: moveCarFirst 1s linear 2s both;
animation: moveCarFirst 1s linear 2s both
}
@media screen and (max-width:919.9px) {
.main__car_first {
bottom: 2.6vw;
width: 19vw;
height: 8vw;
-webkit-animation: none;
animation: none;
-webkit-transform: translateX(-26vw);
transform: translateX(-26vw)
}
}
@media screen and (max-width:479.9px) {
.main__car_first {
width: 25vw;
height: 11vw;
-webkit-transform: translateX(-33vw);
transform: translateX(-33vw)
}
}
@media screen and (orientation:landscape) and (max-height:420px) and (min-aspect-ratio:13/9) {
.main__car_first {
bottom: 1.2vw;
width: 12.6vw;
height: 5.6vw;
-webkit-animation: none;
animation: none;
-webkit-transform: translateX(-17vw);
transform: translateX(-17vw)
}
}
.main__car_first:before {
top: .2vw;
left: -2vw;
width: 9.1vw;
background: url(img/headlights-audi.png) 50%/contain no-repeat
}
@media screen and (max-width:919.9px) {
.main__car_first:before {
left: -2.6vw;
width: 12.8vw
}
}
@media screen and (max-width:479.9px) {
.main__car_first:before {
left: -3.6vw;
width: 16.8vw
}
}
@media screen and (orientation:landscape) and (max-height:420px) and (min-aspect-ratio:13/9) {
.main__car_first:before {
left: -2vw;
width: 9.1vw
}
}
.main__car_second {
bottom: 0;
width: 12.9vw;
height: 7vw;
background: url(img/car-porshe.png) 50%/contain no-repeat;
-webkit-animation: moveCarSecond 1s linear 1s both;
animation: moveCarSecond 1s linear 1s both
}
@media screen and (max-width:919.9px) {
.main__car_second {
bottom: .4vw;
width: 19vw;
height: 10vw;
-webkit-animation: none;
animation: none;
-webkit-transform: translateX(-13.5vw);
transform: translateX(-13.5vw)
}
}
@media screen and (max-width:479.9px) {
.main__car_second {
width: 25vw;
height: 13vw;
-webkit-transform: translateX(-16.5vw);
transform: translateX(-16.5vw)
}
}
@media screen and (orientation:landscape) and (max-height:420px) and (min-aspect-ratio:13/9) {
.main__car_second {
bottom: 0;
width: 12.9vw;
height: 7vw;
-webkit-animation: none;
animation: none;
-webkit-transform: translateX(-8.5vw);
transform: translateX(-8.5vw)
}
}
.main__car_second:before {
top: -.7vw;
left: -2.2vw;
width: 10.5vw;
background: url(img/headlights-porshe.png) 50%/contain no-repeat
}
@media screen and (max-width:919.9px) {
.main__car_second:before {
top: -1vw;
left: -3.2vw;
width: 16vw
}
}
@media screen and (max-width:479.9px) {
.main__car_second:before {
top: -1.4vw;
width: 19vw
}
}
@media screen and (orientation:landscape) and (max-height:420px) and (min-aspect-ratio:13/9) {
.main__car_second:before {
top: -.7vw;
left: -2.2vw;
width: 10.5vw
}
}
.main__car_third {
bottom: 0;
width: 10vw;
height: 10.2vw;
background: url(img/car-lexus.png) 50%/contain no-repeat;
-webkit-animation: moveCarThird 1s linear both;
animation: moveCarThird 1s linear both;
z-index: 2
}
@media screen and (max-width:919.9px) {
.main__car_third {
width: 17vw;
height: 17.3vw;
-webkit-animation: none;
animation: none;
-webkit-transform: translateX(0);
transform: translateX(0)
}
}
@media screen and (max-width:479.9px) {
.main__car_third {
width: 20vw;
height: 20.3vw
}
}
@media screen and (orientation:landscape) and (max-height:420px) and (min-aspect-ratio:13/9) {
.main__car_third {
width: 10vw;
height: 10.2vw;
-webkit-animation: none;
animation: none;
-webkit-transform: translateX(0);
transform: translateX(0)
}
}
.main__car_third:before {
top: .3vw;
left: -1.2vw;
width: 12.5vw;
background: url(img/headlights-lexus.png) 50%/contain no-repeat
}
@media screen and (max-width:919.9px) {
.main__car_third:before {
left: -2.2vw;
width: 21.5vw
}
}
@media screen and (max-width:479.9px) {
.main__car_third:before {
width: 24.5vw
}
}
@media screen and (orientation:landscape) and (max-height:420px) and (min-aspect-ratio:13/9) {
.main__car_third:before {
left: -1.2vw;
width: 12.5vw
}
}
.main__car_fourth {
bottom: .6vw;
width: 14.9vw;
height: 6.2vw;
background: url(img/car-mers.png) 50%/contain no-repeat;
-webkit-animation: moveCarFourth 1s linear 1s both;
animation: moveCarFourth 1s linear 1s both;
z-index: 1
}
@media screen and (max-width:919.9px) {
.main__car_fourth {
bottom: 1.6vw;
width: 20.9vw;
height: 9.2vw;
-webkit-animation: none;
animation: none;
-webkit-transform: translateX(13vw);
transform: translateX(13vw)
}
}
@media screen and (max-width:479.9px) {
.main__car_fourth {
width: 28vw;
height: 11.8vw;
-webkit-transform: translateX(16.5vw);
transform: translateX(16.5vw)
}
}
@media screen and (orientation:landscape) and (max-height:420px) and (min-aspect-ratio:13/9) {
.main__car_fourth {
bottom: .6vw;
width: 14.9vw;
height: 6.2vw;
-webkit-animation: none;
animation: none;
-webkit-transform: translateX(9vw);
transform: translateX(9vw)
}
}
.main__car_fourth:before {
top: 0;
left: 6.1vw;
width: 10.4vw;
background: url(img/headlights-mers.png) 50%/contain no-repeat
}
@media screen and (max-width:919.9px) {
.main__car_fourth:before {
top: .2vw;
left: 9.1vw;
width: 13.4vw
}
}
@media screen and (max-width:479.9px) {
.main__car_fourth:before {
left: 12.1vw;
width: 19.4vw
}
}
@media screen and (orientation:landscape) and (max-height:420px) and (min-aspect-ratio:13/9) {
.main__car_fourth:before {
top: 0;
left: 6.1vw;
width: 10.4vw
}
}
.main__car_fifth {
bottom: .8vw;
width: 13.5vw;
height: 5.4vw;
background: url(img/car-toyota.png) 50%/contain no-repeat;
-webkit-animation: moveCarFifth 1s linear 2s both;
animation: moveCarFifth 1s linear 2s both
}
@media screen and (max-width:919.9px) {
.main__car_fifth {
bottom: 2vw;
width: 19.5vw;
height: 8.4vw;
-webkit-animation: none;
animation: none;
-webkit-transform: translateX(25vw);
transform: translateX(25vw)
}
}
@media screen and (max-width:479.9px) {
.main__car_fifth {
width: 26.5vw;
height: 11.4vw;
-webkit-transform: translateX(32vw);
transform: translateX(32vw)
}
}
@media screen and (orientation:landscape) and (max-height:420px) and (min-aspect-ratio:13/9) {
.main__car_fifth {
bottom: .8vw;
width: 13.5vw;
height: 5.4vw;
-webkit-animation: none;
animation: none;
-webkit-transform: translateX(17vw);
transform: translateX(17vw)
}
}
.main__car_fifth:before {
top: -.2vw;
left: 7.9vw;
width: 6.6vw;
background: url(img/headlights-toyota.png) 50%/contain no-repeat
}
@media screen and (max-width:919.9px) {
.main__car_fifth:before {
left: 11vw;
width: 10.2vw
}
}
@media screen and (max-width:479.9px) {
.main__car_fifth:before {
left: 16vw;
width: 12.5vw
}
}
@media screen and (orientation:landscape) and (max-height:420px) and (min-aspect-ratio:13/9) {
.main__car_fifth:before {
left: 7.9vw;
width: 6.6vw
}
}
.main__titles {
-webkit-order: inherit;
order: inherit;
z-index: 2
}
.main__titles,
.step {
position: relative;
text-align: center
}
.step {
display: block;
width: 33%;
font-family: inherit;
-webkit-transform: skew(-12deg);
transform: skew(-12deg);
font-style: italic
}
.step:not(:last-child):before {
content: "";
position: absolute;
left: 94%;
top: 18px;
background: url(img/arrow-right.png) 50%/contain no-repeat;
width: 34px;
height: 30px;
border-top: none;
-webkit-transform: skew(12deg);
transform: skew(12deg);
z-index: -1
}
@media screen and (max-width:1919.9px) {
.step:not(:last-child):before {
left: 89%;
top: 12px
}
}
@media screen and (max-width:479.9px) {
.step:not(:last-child):before {
left: 92%;
top: 9px;
width: 20px;
height: 18px
}
}
@media screen and (orientation:landscape) and (max-height:420px) and (min-aspect-ratio:13/9) {
.step:not(:last-child):before {
left: 92%;
top: 9px;
width: 20px;
height: 18px
}
}
.step__wrap-num {
margin: 0 auto 14px;
width: 70px;
height: 70px;
font-size: 55px;
background: #ff2400
}
@media screen and (max-width:1919.9px) {
.step__wrap-num {
margin: 0 auto 7px;
width: 55px;
height: 55px;
font-size: 46px
}
}
@media screen and (max-width:479.9px) {
.step__wrap-num {
width: 36px;
height: 36px;
font-size: 30px
}
}
@media screen and (orientation:landscape) and (max-height:420px) and (min-aspect-ratio:13/9) {
.step__wrap-num {
width: 36px;
height: 36px;
font-size: 30px
}
}
.step__num {
-webkit-transform: skew(12deg);
transform: skew(12deg);
margin: 0 0 0 -6px
}
@media screen and (max-width:479.9px) {
.step__num {
margin: 0 0 0 -4px
}
}
@media screen and (orientation:landscape) and (max-height:420px) and (min-aspect-ratio:13/9) {
.step__num {
margin: 0 0 0 -4px
}
}
.step__text {
text-transform: uppercase;
-webkit-transform: skew(12deg);
transform: skew(12deg)
}
@media screen and (max-width:479.9px) {
.step__text {
font-size: inherit
}
}
@media screen and (orientation:landscape) and (max-height:420px) and (min-aspect-ratio:13/9) {
.step__text {
font-size: inherit
}
}
.modal {
background-color: rgba(16, 19, 24, .75);
display: none;
visibility: hidden;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 9999;
-webkit-animation-name: appearing;
animation-name: appearing;
-webkit-animation-duration: .8s;
animation-duration: .8s;
overflow: auto
}
@media screen and (max-width:479.9px) {
.modal {
overflow: auto
}
}
@media screen and (orientation:landscape) and (max-height:420px) and (min-aspect-ratio:13/9) {
.modal {
overflow: auto
}
}
.modal.show {
display: -webkit-flex;
display: flex;
visibility: visible
}
.modal::-webkit-scrollbar {
display: none;
width: 0
}
.modal__wrapper {
position: relative;
width: 100%;
font-size: 16px;
font-family: Roboto, sans-serif;
text-align: center;
margin: auto
}
@media screen and (max-width:479.9px) {
.modal__wrapper {
font-size: 14px
}
}
@media screen and (orientation:landscape) and (max-height:420px) and (min-aspect-ratio:13/9) {
.modal__wrapper {
font-size: 14px
}
}
.modal__wrapper_first {
display: none;
max-width: 882px;
min-height: 540px;
padding: 60px 238px
}
@media screen and (max-width:919.9px) {
.modal__wrapper_first {
padding: 74px 24vw
}
}
@media screen and (max-width:479.9px) {
.modal__wrapper_first {
padding: 56px 4vw;
min-height: 364px
}
}
@media screen and (orientation:landscape) and (max-height:420px) and (min-aspect-ratio:13/9) {
.modal__wrapper_first {
padding: 60px 11vw;
min-height: 340px
}
}
.modal__wrapper_first:after,
.modal__wrapper_first:before {
content: "";
position: absolute;
width: 680px;
height: 378px;
background: #171717;
-webkit-transform: matrix(1, -.09, -.15, 1, 0, 0);
transform: matrix(1, -.09, -.15, 1, 0, 0);
z-index: -1
}
.modal__wrapper_first:before {
top: 0;
left: 0
}
@media screen and (max-width:479.9px) {
.modal__wrapper_first:before {
left: -88px
}
}
.modal__wrapper_first:after {
bottom: 0;
right: 0
}
@media screen and (max-width:479.9px) {
.modal__wrapper_first:after {
right: -88px
}
}
.modal__wrapper_first.show {
display: block;
visibility: visible
}
.modal__wrapper_second {
display: none;
max-width: 536px;
background: rgba(10, 29, 50, .6)
}
@media screen and (max-width:1919.9px) {
.modal__wrapper_second {
max-width: 480px
}
}
@media screen and (max-width:479.9px) {
.modal__wrapper_second {
max-width: 310px
}
}
.modal__wrapper_second:before {
content: "";
display: block;
width: 360px;
height: 113px;
background: url(img/form.png) 50%/contain no-repeat;
position: absolute;
bottom: 0;
left: 50%;
-webkit-transform: translate(-50%, 48%);
transform: translate(-50%, 48%);
z-index: -1
}
@media screen and (max-width:1919.9px) {
.modal__wrapper_second:before {
width: 274px;
height: 74px
}
}
@media screen and (max-width:479.9px) {
.modal__wrapper_second:before {
display: none
}
}
.modal__wrapper_second.show {
display: block;
visibility: visible
}
@media screen and (max-width:1919.9px) {
.modal__wrapper_second .checkbox,
.modal__wrapper_second .checkbox__text-link {
font-size: 11px
}
}
.modal__title {
position: relative;
font-size: 24px;
font-weight: 900;
padding: 0 0 17px;
margin: 0 0 24px
}
@media screen and (max-width:479.9px) {
.modal__title {
font-size: 18px;
margin: 0 0 14px
}
}
@media screen and (orientation:landscape) and (max-height:420px) and (min-aspect-ratio:13/9) {
.modal__title {
font-size: 18px;
margin: 0 0 14px
}
}
.modal__title:before {
content: "";
width: 29px;
height: 2px;
position: absolute;
bottom: 0;
left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
background: red
}
.modal__subtitle {
margin: 20px 0 0
}
.modal__list {
margin: 0 0 16px;
text-align: left
}
.modal__list-item {
position: relative;
padding: 0 0 0 24px;
margin: 15px 0 0
}
@media screen and (max-width:479.9px) {
.modal__list-item {
padding: 0 0 0 18px
}
}
.modal__list-item:before {
content: "";
position: absolute;
width: 6px;
height: 6px;
top: 7px;
left: 9px;
border-radius: 50%;
background: red
}
@media screen and (max-width:479.9px) {
.modal__list-item:before {
width: 4px;
height: 4px;
top: 6px;
left: 7px
}
}
.modal__text_bottom {
font-size: 14px;
text-align: left;
color: hsla(0, 0%, 100%, .5)
}
.modal__btn {
position: absolute;
width: 32px;
height: 32px;
top: -30px;
right: -30px;
font-size: 30px
}
@media screen and (max-width:919.9px) {
.modal__btn {
top: 0;
right: 50%;
-webkit-transform: translateX(50%);
transform: translateX(50%)
}
}
@media screen and (max-width:479.9px) {
.modal__btn {
top: -5px
}
}
.modal__titles {
position: relative;
z-index: 2;
margin: 0
}
.modal__titles .main__text {
width: 100%;
position: relative;
z-index: -1
}
@media screen and (max-width:1919.9px) {
.modal__titles .main__text {
margin: 0
}
}
.modal__titles .titles {
margin: 0 0 30px
}
@media screen and (max-width:1919.9px) {
.modal__titles .titles {
margin: 0 0 8px
}
}
.modal__titles .titles__title>h2 {
font-size: 32px
}
@media screen and (max-width:479.9px) {
.modal__titles .titles__title>h2 {
font-size: 20px
}
}
.modal__titles .titles__subtitle>h2 {
font-size: 26px
}
@media screen and (max-width:479.9px) {
.modal__titles .titles__subtitle>h2 {
font-size: 16px
}
}
.modal__titles .titles__subtitle,
.modal__titles .titles__title {
padding: 6px 26px
}
.titles {
position: relative;
text-transform: uppercase;
margin: 0 0 30px
}
@media screen and (max-width:919.9px) {
.titles {
margin: 4% 0 5%
}
}
@media screen and (max-width:479.9px) {
.titles {
margin: 0 0 60%
}
}
@media screen and (max-width:479.9px) and (max-height:670px) {
.titles {
margin: 0 0 30%
}
}
@media screen and (orientation:landscape) and (max-height:420px) and (min-aspect-ratio:13/9) {
.titles {
margin: 2% 0 4%
}
}
.titles__title {
width: -webkit-fit-content;
width: -moz-fit-content;
width: fit-content;
background: #ff2400;
padding: 12px 32px;
margin: 0 auto;
-webkit-transform: skew(-20deg);
transform: skew(-20deg)
}
@media screen and (max-width:1919.9px) {
.titles__title {
padding: 10px 28px
}
}
@media screen and (max-width:1199.9px) {
.titles__title {
padding: 8px 24px
}
}
.titles__title>h1 {
font-size: 50px;
font-family: Pinup-Black, sans-serif;
text-transform: uppercase;
color: #fff;
text-shadow: none;
-webkit-transform: skew(20deg);
transform: skew(20deg)
}
@media screen and (max-width:1919.9px) {
.titles__title>h1 {
font-size: 44px
}
}
@media screen and (max-width:1199.9px) {
.titles__title>h1 {
font-size: 40px
}
}
@media screen and (max-width:919.9px) {
.titles__title>h1 {
font-size: 32px
}
}
@media screen and (max-width:479.9px) {
.titles__title>h1 {
font-size: 8vw
}
}
@media screen and (orientation:landscape) and (max-height:420px) and (min-aspect-ratio:13/9) {
.titles__title>h1 {
font-size: 20px
}
}
.titles__title>h2 {
font-size: 50px;
font-family: Pinup-Black, sans-serif;
text-transform: uppercase;
color: #fff;
text-shadow: none;
-webkit-transform: skew(20deg);
transform: skew(20deg)
}
@media screen and (max-width:1919.9px) {
.titles__title>h2 {
font-size: 44px
}
}
@media screen and (max-width:1199.9px) {
.titles__title>h2 {
font-size: 40px
}
}
@media screen and (max-width:919.9px) {
.titles__title>h2 {
font-size: 32px
}
}
@media screen and (max-width:479.9px) {
.titles__title>h2 {
font-size: 6vw
}
}
@media screen and (orientation:landscape) and (max-height:420px) and (min-aspect-ratio:13/9) {
.titles__title>h2 {
font-size: 20px
}
}
.titles__subtitle {
width: -webkit-fit-content;
width: -moz-fit-content;
width: fit-content;
background: #00cfa6;
font-family: Pinup-Black, sans-serif;
padding: 12px 32px;
margin: 0 auto;
-webkit-transform: skew(-20deg);
transform: skew(-20deg)
}
@media screen and (max-width:1919.9px) {
.titles__subtitle {
padding: 10px 28px
}
}
@media screen and (max-width:1199.9px) {
.titles__subtitle {
padding: 8px 24px
}
}
@media screen and (max-width:479.9px) {
.titles__subtitle {
padding: 8px 16px
}
}
.titles__subtitle>h2 {
font-size: 40px;
text-transform: uppercase;
color: #fff;
text-shadow: none;
-webkit-transform: skew(20deg);
transform: skew(20deg)
}
@media screen and (max-width:1919.9px) {
.titles__subtitle>h2 {
font-size: 36px
}
}
@media screen and (max-width:1199.9px) {
.titles__subtitle>h2 {
font-size: 32px
}
}
@media screen and (max-width:919.9px) {
.titles__subtitle>h2 {
font-size: 24px
}
}
@media screen and (max-width:479.9px) {
.titles__subtitle>h2 {
font-size: 5vw
}
}
@media screen and (orientation:landscape) and (max-height:420px) and (min-aspect-ratio:13/9) {
.titles__subtitle>h2 {
font-size: 16px
}
}
.tabs {
display: -webkit-flex;
display: flex;
-webkit-justify-content: center;
justify-content: center;
width: 71%;
margin: 0 auto;
border-radius: 5px;
overflow: hidden
}
@media screen and (max-width:479.9px) {
.tabs {
width: 91%
}
}
.tabs__item {
cursor: pointer;
-webkit-flex-basis: 50%;
flex-basis: 50%;
width: 50%
}
.tabs__item>button {
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
display: block;
background-color: #040308;
color: #fff;
font-size: 20px;
font-weight: 400;
padding: 0 12px;
height: 46px;
width: 100%;
position: relative
}
@media screen and (max-width:479.9px) {
.tabs__item>button {
font-size: 15px;
height: 42px
}
}
@media screen and (orientation:landscape) and (max-height:420px) and (min-aspect-ratio:13/9) {
.tabs__item>button {
font-size: 18px;
height: 40px
}
}
.tabs__item>button.active {
background: #ff2400;
color: #fff
}
.email-form {
width: 100%;
padding-top: 10px;
position: relative
}
.email-form__item {
position: relative;
margin-bottom: 9px
}
.email-form__email-input,
.email-form__password-input {
background-color: #000;
color: #fff;
border: 1px solid #172f6e;
border-bottom: none;
border-radius: 3px;
height: 40px;
width: 100%;
padding: 5px 0 5px 14px
}
.email-form__email-input::-webkit-input-placeholder,
.email-form__password-input::-webkit-input-placeholder {
color: #fff
}
.email-form__email-input::-moz-placeholder,
.email-form__password-input::-moz-placeholder {
color: #fff
}
.email-form__email-input:-ms-input-placeholder,
.email-form__password-input:-ms-input-placeholder {
color: #fff
}
.email-form__email-input::-ms-input-placeholder,
.email-form__password-input::-ms-input-placeholder {
color: #fff
}
.email-form__email-input::placeholder,
.email-form__password-input::placeholder {
color: #fff
}
@media screen and (max-width:479.9px) {
.email-form__email-input,
.email-form__password-input {
height: 36px
}
}
@media screen and (orientation:landscape) and (max-height:420px) and (min-aspect-ratio:13/9) {
.email-form__email-input,
.email-form__password-input {
height: 36px
}
}
.email-form__password-input {
padding-right: 34px
}
.email-form__view-icon {
background-color: #000;
position: absolute;
right: 0;
top: 0;
cursor: pointer;
width: 34px;
height: 100%
}
.email-form__view-icon_close {
background: url(img/view-close.svg) no-repeat 50%
}
.email-form__view-icon_open {
background: url(img/view.svg) no-repeat 50%
}
.phone-form {
margin-bottom: 0
}
.phone-form__header {
color: #fff;
font-size: 18px;
margin: 0;
padding: 25px 0 12px;
line-height: 22px;
font-weight: 400;
text-align: left
}
@media screen and (max-width:1919.9px) {
.phone-form__header {
font-size: 18px;
padding: 25px 0 12px
}
}
@media screen and (max-width:479.9px) {
.phone-form__header {
padding: 26px 0 7px;
font-size: 16px
}
}
@media screen and (orientation:landscape) and (max-height:420px) and (min-aspect-ratio:13/9) {
.phone-form__header {
font-size: 18px;
padding: 26px 0 7px
}
}
.phone-form__text {
display: none;
font-size: 20px;
text-align: center;
margin: 0 0 22px;
color: #989fab
}
@media screen and (max-width:1919.9px) {
.phone-form__text {
font-size: 16px
}
}
.select-currency {
display: block;
position: relative;
width: 100%
}
.select-currency__main {
background-color: #000;
border: 1px solid #172f6e;
color: #fff;
position: relative;
border-radius: 3px;
height: 40px;
width: 100%;
line-height: 28px
}
@media screen and (max-width:479.9px) {
.select-currency__main {
height: 36px
}
}
@media screen and (orientation:landscape) and (max-height:420px) and (min-aspect-ratio:13/9) {
.select-currency__main {
height: 36px
}
}
.select-currency__main * {
pointer-events: none
}
.select-currency__main:after {
content: "";
cursor: pointer;
display: block;
position: absolute;
right: 0;
top: 0;
height: 100%;
width: 32px;
background: url(img/down-arrow-white.svg) no-repeat 50%;
background-size: 10px;
border-left: 1px
}
.select-currency__default-input {
cursor: pointer;
box-sizing: border-box;
width: 100%;
display: none;
visibility: hidden
}
.select-currency__list {
display: none;
background-color: #000;
border: 1px solid #172f6e;
box-shadow: 0 10px 12px 1px rgba(0, 0, 0, .32);
position: absolute;
top: 42px;
left: 0;
width: 100%;
border-radius: 3px;
z-index: 1;
max-height: 142px;
overflow-x: hidden
}
.select-currency__list::-webkit-scrollbar {
display: none;
width: 0
}
.select-currency__item {
display: -webkit-flex;
display: flex;
-webkit-align-items: center;
align-items: center;
color: #fff;
padding: 5px 9px;
cursor: pointer
}
.select-currency__item * {
pointer-events: none
}
.select-currency__item:hover,
.select-currency__item_active {
background-color: rgba(34, 34, 34, .11);
color: #fff
}
.select-currency__placeholder {
display: -webkit-flex;
display: flex;
-webkit-align-items: center;
align-items: center;
box-sizing: border-box;
cursor: pointer;
height: 100%;
width: 100%;
padding-left: 8px
}
.select-currency__placeholder .select-currency__text {
padding-right: 30px
}
.select-currency__icon {
display: -webkit-flex;
display: flex;
-webkit-align-items: center;
align-items: center;
-webkit-justify-content: center;
justify-content: center;
height: 25px;
width: 25px;
font-size: 24px
}
.select-currency__name {
border-left: 1px solid #fff;
border-right: 1px solid #fff;
padding: 0 5px;
margin: 0 5px
}
.select-currency__text {
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden
}
.select-phone {
position: relative
}
.select-phone[data-open=false]>.select-phone__list {
display: none !important
}
.select-phone__placeholder {
margin-bottom: 9px
}
.select-phone__placeholder-logo {
background-color: #ddd;
border: 1px solid #aeaaaa;
display: block;
width: 28px;
height: 22px;
border-radius: 3px;
position: absolute;
left: 7px;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%)
}
.select-phone__placeholder-label {
display: none;
position: absolute;
top: -8px;
left: 12px;
padding: 2px 4px;
font-size: 13px;
font-family: inherit;
letter-spacing: .4px;
background: #000;
color: #989fab
}
@media screen and (max-width:479.9px) {
.select-phone__placeholder-label {
font-size: 12px
}
}
@media screen and (orientation:landscape) and (max-height:420px) and (min-aspect-ratio:13/9) {
.select-phone__placeholder-label {
font-size: 12px
}
}
.select-phone__placeholder-input {
border: 1px solid #172f6e;
color: #fff;
background: url(img/down-arrow-white.svg) no-repeat #000 44px 50%;
background-size: 10px;
border-radius: 3px;
cursor: text;
width: 100%;
height: 40px;
padding-left: 60px
}
@media screen and (max-width:1919.9px) {
.select-phone__placeholder-input {
height: 40px
}
}
@media screen and (max-width:479.9px) {
.select-phone__placeholder-input {
height: 36px
}
}
@media screen and (orientation:landscape) and (max-height:420px) and (min-aspect-ratio:13/9) {
.select-phone__placeholder-input {
height: 36px
}
}
.select-phone__placeholder-input:focus {
border: 1px solid #172f6e
}
.select-phone__placeholder-btn {
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 60px;
cursor: pointer
}
.select-phone__list {
background-color: #000;
border: 1px solid #172f6e;
box-shadow: 0 10px 12px 1px rgba(0, 0, 0, .32);
border-radius: 3px;
display: none;
line-height: 27px;
position: absolute;
top: 44px;
left: 0;
z-index: 16;
max-height: 182px;
width: 100%;
overflow-x: hidden
}
@media screen and (max-width:1919.9px) {
.select-phone__list {
top: 44px
}
}
@media screen and (max-width:479.9px) {
.select-phone__list {
top: 44px
}
}
@media screen and (orientation:landscape) and (max-height:420px) and (min-aspect-ratio:13/9) {
.select-phone__list {
top: 44px;
max-height: 182px
}
}
.select-phone__list::-webkit-scrollbar {
display: block;
width: 6px
}
.select-phone__list::-webkit-scrollbar-thumb {
background-color: #ccc
}
.select-phone__item {
color: #fff;
display: -webkit-flex;
display: flex;
-webkit-align-items: center;
align-items: center;
cursor: pointer;
padding: 9px 7px
}
@media screen and (max-width:479.9px) {
.select-phone__item {
padding: 4px 7px
}
}
@media screen and (orientation:landscape) and (max-height:420px) and (min-aspect-ratio:13/9) {
.select-phone__item {
padding: 9px 7px
}
}
.select-phone__item:hover {
box-shadow: 0 10px 12px 1px rgba(0, 0, 0, .32)
}
.select-phone__item:hover,
.select-phone__item_active {
background-color: #e7e7e7;
color: #1b2029
}
.select-phone__item-logo {
display: block;
height: 20px;
width: 28px;
margin-right: 4px;
border: 1px solid #797474;
border-radius: 3px;
pointer-events: none
}
.select-phone__item-text {
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
pointer-events: none
}
.checkbox {
margin: 10px 0 40px;
color: #fff;
font-size: 16px
}
@media screen and (max-width:1919.9px) {
.checkbox {
margin: 0 0 16px;
font-size: 14px
}
}
@media screen and (max-width:479.9px) {
.checkbox {
margin: 0 0 8px;
font-size: 14px
}
}
@media screen and (orientation:landscape) and (max-height:420px) and (min-aspect-ratio:13/9) {
.checkbox {
font-size: 14px
}
}
.checkbox__item {
display: -webkit-flex;
display: flex;
-webkit-align-items: center;
align-items: center;
text-align: left
}
.checkbox__item:not(:last-child) {
margin-bottom: 8px
}
.checkbox__item-subs,
.checkbox__label,
.checkbox__text {
display: -webkit-flex;
display: flex
}
.checkbox__label,
.checkbox__text {
-webkit-align-items: center;
align-items: center
}
/* .checkbox__text-link{color:#ff2400;margin-left:5px;font-size:16px;text-decoration:underline;cursor:pointer} */
@media screen and (max-width:1919.9px) {
.checkbox__text-link {
font-size: 14px
}
}
@media screen and (max-width:479.9px) {
.checkbox__text-link {
font-size: 14px
}
}
@media screen and (orientation:landscape) and (max-height:420px) and (min-aspect-ratio:13/9) {
.checkbox__text-link {
font-size: 14px
}
}
.checkbox__text #checkbox-rules {
margin: 0
}
.checkbox__label {
cursor: pointer;
border: 1px solid #172f6e;
border-radius: 2px;
background: #000;
position: relative;
width: 18px;
height: 18px;
margin-right: 10px;
-webkit-flex-shrink: 0;
flex-shrink: 0;
overflow: hidden
}
.checkbox__label-icon {
display: none;
background: url(img/checkbox.svg) no-repeat 50% #000;
background-size: 12px;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0
}
.checkbox__input {
display: none
}
.checkbox__input:checked+.checkbox__label .checkbox__label-icon {
display: -webkit-flex;
display: flex
}
.submit-btn {
background: #ff2400;
box-shadow: none;
color: #fff;
height: 46px;
width: 100%;
text-align: center;
padding: 0 18px;
margin: 10px auto 0;
letter-spacing: 1px;
font-size: 20px;
font-weight: 400;
position: relative;
border-radius: 4px;
overflow: hidden
}
@media screen and (max-width:1919.9px) {
.submit-btn {
height: 46px;
font-size: 20px
}
}
@media screen and (max-width:479.9px) {
.submit-btn {
margin: 10px auto 0;
height: 42px;
font-size: 18px
}
}
@media screen and (orientation:landscape) and (max-height:420px) and (min-aspect-ratio:13/9) {
.submit-btn {
height: 40px;
font-size: 18px
}
}
.forms {
max-width: 380px;
width: 100%;
margin: 0 auto
}
@media screen and (max-width:1919.9px) {
.forms {
max-width: 340px
}
}
@media screen and (max-width:919.9px) {
.forms {
max-width: 340px
}
}
@media screen and (max-width:479.9px) {
.forms {
max-width: 280px
}
}
.forms>form {
display: none
}
.forms>form.active {
display: -webkit-flex;
display: flex;
-webkit-flex-direction: column;
flex-direction: column
}
.forms__login {
display: block;
margin: 15px 0;
text-align: center
}
@media screen and (max-width:479.9px) {
.forms__login {
margin: 4px 0
}
}
.forms__login-link {
margin: 0 0 0 6px;
color: #e93f25
}
.alert {
background-color: rgba(0, 0, 0, .7);
border: 1px solid #bed5e4;
color: #fff;
border-radius: 9px;
position: fixed;
top: 1px;
right: 1px;
padding: 32px;
width: 310px;
text-align: center;
-webkit-transform: translateX(103%);
transform: translateX(103%);
transition: -webkit-transform .3s;
transition: transform .3s;
transition: transform .3s, -webkit-transform .3s;
z-index: 9999
}
@media screen and (max-width:479.9px) {
.alert {
padding: 26px;
width: 300px
}
}
.alert__close {
position: absolute;
width: 32px;
height: 32px;
top: 0;
left: 4px;
cursor: pointer
}
.alert__close:after,
.alert__close:before {
content: "";
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%) rotate(45deg);
transform: translate(-50%, -50%) rotate(45deg);
height: 2px;
width: 50%;
background-color: #fff
}
.alert__close:after {
-webkit-transform: translate(-50%, -50%) rotate(-45deg);
transform: translate(-50%, -50%) rotate(-45deg)
}
.alert_active {
-webkit-transform: translateX(0);
transform: translateX(0)
}
@media screen and (max-width:479.9px) {
.alert_active {
left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%)
}
}
/* ----------------------------------- */
.main__subtitle {
position: relative;
width: -webkit-fit-content;
width: -moz-fit-content;
width: fit-content;
background: transparent;
font-family: Pinup-Black, sans-serif;
padding: 0;
margin: 0;
box-shadow: none;
margin-top: 2em;
}
.bonus-title {
font-weight: 900;
-webkit-text-fill-color: #b6100a;
text-shadow: 1px 1px 0 #fff,
-1px 1px 0 #fff,
1px -1px 0 #fff,
-1px -1px 0 #fff,
0 0 10px #fd2612,
0 0 15px #ff3721,
0 -3px 10px #ff1900,
0 10px 15px #ff1900,
0 0 20px #f30c0c,
0 0 30px #ff4b4b,
0 0 40px #fff;
}
.bonus-content {
text-transform: none !important;
font-weight: 900;
-webkit-text-fill-color: #075851;
text-shadow: 1px 1px 0 #fff,
-1px 1px 0 #fff,
1px -1px 0 #fff,
-1px -1px 0 #fff,
0 0 10px #12f9fd,
0 0 15px #21ffe9,
0 0 20px #33fff1,
0 0 30px #4bfff0,
0 0 40px #fff;
margin-top: 0.2em;
}
@media screen and (max-width:1919.9px) {
.main__subtitle {
padding: 0
}
}
@media screen and (max-width:1199.9px) {
.main__subtitle {
margin: 3em auto;
}
}
@media screen and (max-width:479.9px) {
.main__subtitle {
padding: 0;
margin: 16vh auto 0
}
}
@media screen and (orientation:landscape) and (max-height:420px) and (min-aspect-ratio:13/9) {
.main__subtitle {
padding: 0;
margin: 0 auto;
}
}
.main__subtitle>h2 {
font-size: calc(54px + 28*(100vw - 320px)/1600);
color: #fff;
}
@media screen and (max-width:1919.9px) {
.main__subtitle>h2 {
font-size: calc(52px + 28*(100vw - 320px)/1600)
}
}
@media screen and (max-width:910px) {
.main__subtitle {
margin: 1.5em auto;
}
}
@media screen and (max-width:479.9px) {
.main__subtitle>h2 {
font-size: calc(50px + 40*(100vw - 320px)/1600);
}
.main__subtitle>h1 {
font-size: calc(65px + 40*(100vw - 320px)/1600);
}
}
@media screen and (orientation:landscape) and (max-height:420px) and (min-aspect-ratio:13/9) {
.main__subtitle>h2 {
font-size: 26px
}
}
.main__subtitle>h2 br {
display: none
}
@media screen and (max-width:479.9px) {
.main__subtitle>h2 br {
display: none
}
}
/* -------------------------- */
.ui-button {
box-sizing: border-box;
margin: 0;
font-size: 100%;
font-family: inherit;
vertical-align: baseline;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
display: inline-block;
background: none;
-webkit-appearance: none;
appearance: none;
border: 0;
padding: 0;
cursor: pointer;
letter-spacing: 0;
text-decoration: none !important;
font-size: .875rem;
line-height: .875rem;
padding: .4375rem 1rem;
display: flex;
align-items: center
}
.ui-button::-moz-focus-inner {
border: 0
}
.ui-button.ui-button_primary-animation:after {
width: calc(100% + 24px);
height: calc(100% + 24px)
}
.ui-button_primary-animation {
background: var(--color-button-primary-bg);
color: var(--color-button-primary-txt);
position: relative
}
.ui-button_primary-animation:active {
color: var(--color-button-primary-txt-pressed);
background: var(--color-button-primary-bg-pressed)
}
.ui-button_primary:not(.ui-button_pressed):not(:active):hover:not(:disabled),
.ui-button_primary-animation:not(.ui-button_pressed):not(:active):hover:not(:disabled) {
background: var(--color-button-primary-bg-hover)
}
.ui-button_primary-animation:not(.ui-button_pressed):not(.ui-button_prerender):not(:active):not(:disabled):after {
content: "";
animation: button-pulse 1.6s ease-out infinite .5s;
position: absolute;
border-radius: .25rem;
left: 50%;
top: 50%;
transform: translate(-50%, -50%) scale(.7, .5);
background: var(--color-button-primary-bg-animation);
z-index: -1;
transition: transform .5s linear
}
.ui-button_secondary:not(.ui-button_pressed):not(:active):not(:disabled):hover {
background: var(--color-button-secondary-bg-hover);
color: var(--color-button-secondary-txt-hover)
}
.ui-button_secondary:not(.ui-button_pressed):not(:active):not(:disabled):hover:before {
background: var(--color-button-secondary-bg-hover)
}
@media (pointer: coarse) {
.ui-button_secondary:not(.ui-button_pressed):not(:active):not(:disabled):hover {
background: none;
color: var(--color-button-secondary-txt)
}
.ui-button_secondary:not(.ui-button_pressed):not(:active):not(:disabled):hover:before {
background: var(--color-button-secondary-strk)
}
}
.ui-button_tertiary:not(.ui-button_pressed):not(:active):not(:disabled):hover {
color: var(--color-button-tertiary-txt-hover)
}
.ui-button_tertiary:not(.ui-button_pressed):not(:active):not(:disabled):hover:before {
background: var(--color-button-tertiary-strk-hover)
}
.ui-button_tertiary:not(.ui-button_pressed):not(:active):not(:disabled):hover.ui-button_only-icon:before {
background: var(--color-button-tertiary-strk-hover-only-icon)
}
.ui-button_special-demo:not(.ui-button_pressed):not(:active):not(:disabled):hover {
background: var(--color-button-special-bg-hover-2)
}
.ui-button:disabled {
pointer-events: none;
opacity: .3
}
@keyframes button-pulse {
0% {
transform: translate(-50%, -50%) scale(.7, .5);
opacity: 0;
border-radius: .25rem
}
12% {
opacity: 1
}
34% {
transform: translate(-50%, -50%) scale(1)
}
38% {
opacity: 0
}
40% {
transform: translate(-50%, -50%) scale(1);
opacity: 0;
border-radius: .5rem
}
to {
transform: translate(-50%, -50%) scale(1);
opacity: 0;
border-radius: .25rem
}
}
@media (min-width: 768px) {
.md\:ui-button_m {
font-size: 1rem;
line-height: 1rem;
font-weight: 500;
padding: .5rem 1.5rem;
line-height: 24px
}
}
@media (max-width: 475px) {
.main__btn {
box-shadow: #12f9fd 0 0 50px, #dbfeffd7 0 0 10px;
}
}
:root {
--color-brand-primary: #ff2400;
--color-brand-secondary: #00cfa6;
--color-brand-secondary-light: rgba(0, 207, 166, .15);
--color-additionals-danger: #ff2400;
--color-additionals-success: #00cfa6;
--color-additionals-warning: #ffc700;
--color-additionals-warning: #ffc700;
--color-additionals-favorites: #ffc700;
--color-button-primary-bg: #ff2400;
--color-button-primary-bg-hover: linear-gradient(0deg, rgba(49, 51, 52, .15), rgba(49, 51, 52, .15)), #ff2400;
--color-button-primary-bg-animation: rgba(255, 36, 0, .5);
--color-button-primary-bg-pressed: linear-gradient(0deg, rgba(49, 51, 52, .2), rgba(49, 51, 52, .2)), #ff2400;
--color-button-primary-txt: #ffffff;
--color-button-primary-txt-pressed: #eeeeee;
}