@font-face {
    font-family: "PfdindisplayproBlack";
    font-weight: normal;
    font-style: normal;
    src: url("../fonts/PfdindisplayproBlack.woff2") format('woff2'),
    url("../fonts/PfdindisplayproBlack.woff") format('woff')
}
@font-face {
    font-family: "PfdindisplayproBold";
    font-weight: normal;
    font-style: normal;
    src: url("../fonts/PfdindisplayproBold.woff2") format('woff2'),
    url("../fonts/PfdindisplayproBold.woff") format('woff')
}
@font-face {
    font-family: "PfdindisplayproThin";
    font-weight: normal;
    font-style: normal;
    src: url("../fonts/PfdindisplayproThin.woff2") format('woff2'),
    url("../fonts/PfdindisplayproThin.woff") format('woff')
}
@font-face {
    font-family: "PfdindisplayproXThin";
    font-weight: normal;
    font-style: normal;
    src: url("../fonts/PfdindisplayproXThin.woff2") format('woff2'),
    url("../fonts/PfdindisplayproXThin.woff") format('woff')
}
@font-face {
    font-family: "PfdindisplayproMed";
    font-weight: normal;
    font-style: normal;
    src: url("../fonts/PfdindisplayproMed.woff2") format('woff2'),
    url("../fonts/PfdindisplayproMed.woff") format('woff')
}
@font-face {
    font-family: "Pfdindisplaypro";
    font-weight: normal;
    font-style: normal;
    src: url("../fonts/Pfdindisplaypro.woff2") format('woff2'),
    url("../fonts/Pfdindisplaypro.woff") format('woff')
}
body{
    background-color: #000000;
}
img {
    max-width: 100%;
    height: auto
}
.page-main{
    background-image: url(../img/main-bg.png);
    background-position: center;
    background-size: auto 100%;
    min-height: 979px;
    margin-bottom: -150px;
    position: relative;
}
.page-main__logo{
    text-align: center;
}
.bonus-first{
    background-color: rgba(255, 198, 0, 0.91);
    background-image: url(../img/bg_bonus.png);
    background-size: 100% 100%;
    border-radius: 10px;
    max-width: 340px;
    margin: 0 auto;
    padding: 15px 0;
    text-align: center;
    display: none;
}

.bonus-first__text::before{
    content: "";
    width: 100%;
    display: block;
    height: 1px;
    background-color: rgba(0, 0, 0, 0.2);
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    margin: 10px 0;
}
.bonus-first__text{
    font-family: PfdindisplayproBold, sans-serif;
    font-size: 20px;
    text-transform: uppercase;
}
.bonus-first__text p,
.bonus-second__text p,
.bonus-third__text p{
    margin: 0;
}
.bonus-first__text--title{
    font-size: 39px;
    margin: 0;
    letter-spacing:-3px;
}
.bonus-second{
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    background-color: rgba(0, 0, 0, 0.8);
    padding: 20px 0 30px;
    max-width: 425px;
    margin: 0 auto;
    text-align: center;
    color: white;
    font-family: PfdindisplayproBlack, sans-serif;
    box-sizing: border-box;
    font-size: 31px;
    text-shadow: 0 0 16px rgba(0, 0, 0, 0.81);
}
.bonus-second__text--title{
    font-size: 46px;
    margin: 10px 0;
    text-transform: uppercase;
}
.text--red{
    color: #e85253;
}
.text--thin{
    font-family: PfdindisplayproXThin, sans-serif;
}
.text--x-thin{
    font-family: PfdindisplayproXThin, sans-serif;
}
.text--reg{
    font-family: Pfdindisplaypro, sans-serif;
    font-weight: normal;
}
.bonus-third{
    background-image: url(../img/bg_bonus3.png);
    font-family: PfdindisplayproBlack, sans-serif;
    background-size: 100% 100%;
    max-width: 330px;
    margin: 10px auto;
    padding: 15px 0 30px;
    text-align: center;
    box-sizing: border-box;
    color: black;
    font-size: 30px;
    display: none;
}
.bonus-third__text--title{
    font-size: 50px;
    margin: 0;
}
.main__button{
    background-image: url(../img/bg_button.png);
    background-color: #e85253;
    background-size: 100% 100%;
    display: block;
    font-family: PfdindisplayproBlack, sans-serif;
    text-transform: uppercase;
    text-decoration: none;
    font-size: 28px;
    margin: 100px auto 0;
    max-width: 205px;
    padding: 15px;
    color: white;
    text-align: center;
    border-radius: 23px;
    text-shadow: 0 1px 1px #000000;
    /*box-shadow: 0 0 16px 6px #ffffff;*/
        -webkit-transition: 0.3s;
    -o-transition: 0.3s;
    transition: 0.3s;
    animation-name: pulse;
    animation-duration: 0.7s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}

@keyframes pulse {
  0% {
    box-shadow: 0 0 16px 0 #ffffff;
  }

  7% {
    box-shadow: 0 0 16px 1px #ffffff;
  }

  14% {
    box-shadow: 0 0 16px 2px #ffffff;
  }

  24% {
    box-shadow: 0 0 16px 3px #ffffff;
  }

  34% {
    box-shadow: 0 0 16px 4px #ffffff;
  }

  44% {
    box-shadow: 0 0 16px 5px #ffffff;
  }

  55% {
    box-shadow: 0 0 16px 6px #ffffff;
  }

  65% {
    box-shadow: 0 0 16px 5px #ffffff;
  }

  75% {
    box-shadow: 0 0 16px 4px #ffffff;
  }

  82% {
    box-shadow: 0 0 16px 3px #ffffff;
  }

  90% {
    box-shadow: 0 0 16px 2px #ffffff;
  }

  100% {
    box-shadow: 0 0 16px 1px #ffffff;
  }
}

.main__button:hover{
    animation-play-state: paused;
}
.footer-page{
    background-image: url("../img/footer.jpg");
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    height: 286px;
    position: relative;
    z-index: -1;
}