@font-face {
  font-family: "MariupolRegular";
  src: url("../fonts/Mariupol-Regular.otf") format("opentype"); }

@font-face {
  font-family: "MariupolBold";
  src: url("../fonts/Mariupol-Bold.otf") format("opentype"); }

@font-face {
  font-family: "TatonovelRegular";
  src: url("../fonts/Tatonovel-regular.otf") format("opentype"); }

html,
body {
  margin: 0;
  padding: 0;
  height: 100%; }

body {
  background: #000;
  font-family: "MariupolRegular";
  font-size: 14px;
  line-height: 22px;
  color: #fff; }

article, footer, header, main, nav, section {
  display: block; }

h1, h2, h3, h4, h5, h6 {
  margin: 0; }

h1 {
  font-weight: normal;
  font-size: 25px;
  line-height: 30px;
  margin-bottom: 30px; }

h2 {
  font-weight: normal;
  font-size: 20px;
  line-height: 24px;
  margin-bottom: 15px; }

h3 {
  font-weight: normal;
  font-size: 16px;
  line-height: 24px;
  margin-bottom: 10px; }

p {
  margin: 0 0 20px; }

ol, ul {
  margin: 0 0 20px; }

blockquote {
  margin: 0 0 20px; }

img {
  border: 0; }

a {
  color: #fff;
  text-decoration: none; }
  a:hover {
    color: #fff;
    text-decoration: underline; }
  a:focus {
    outline: none; }

button,
input,
select,
textarea {
  color: inherit;
  font: inherit;
  margin: 0;
  outline: none; }

input:focus {
  outline: none; }

button {
  overflow: visible; }

textarea {
  overflow: auto; }

table {
  border-collapse: collapse;
  border-spacing: 0; }

td,
th {
  padding: 0; }




#preloader {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgb(0 0 0 / 82%);
    z-index: 99;
    display: flex;
    align-items: center;
    justify-content: center;

}  

#preloader #status{position:relative;background:url(../img/fire.gif) no-repeat center; background-size:contain; border:0px solid; display:flex; width:250px; height:250px;}
#preloader #status span{display:block; font-family: "TatonovelRegular"; color:red; font-size:1.4rem; position:absolute; bottom:10px; left:0; text-align:center; width:100%;}

.page-wrapper {
  overflow: hidden; }

.content-wrapper {
  padding: 0 20px;
  position: relative; }
  .content-wrapper_inner {
    max-width: 910px;
    margin: 0 auto; }
    @media (min-width: 1200px) {
      .content-wrapper_inner {
        max-width: 1200px; } }
    @media (min-width: 1400px) {
      .content-wrapper_inner {
        max-width: 1200px; } }

.page-section {
  margin-bottom: 50px; }
  .page-section_title {
    font-family: "TatonovelRegular";
    color: #e8514f;
    text-transform: lowercase; }
    @media (min-width: 1200px) {
      .page-section_title {
        font-size: 28px;
        line-height: 34px; } }

.header {
  padding-top: 50px;
  position: relative; }
  @media (min-width: 768px) {
    .header {
      padding-top: 40px;
      } }
  .header_title {
    background: url("../img/title.png") no-repeat center 0/cover;
    width: 300px;
    height: 51px;
    font-size: 0;
    position: absolute;
    left: 0;
    right: 0;
    top: 50px;
    z-index: 1;
    margin: 0 auto; }
    @media (min-width: 768px) {
      .header_title {
        width: 475px;
        height: 81px;
        top: 70px; } }
    @media (min-width: 1200px) {
      .header_title {
        width: 667px;
        height: 108px;
        top: 50px;
        } }


.video-bg {
  min-height: 300px; 
}
.video-bg_video {
  width: 100%;
  display: none;
}
.video-bg_video__mobile {
    display: none;
}   

  /*@media screen and (max-device-width:845px) and (orientation : portrait), screen and (max-width:845px) and (orientation : portrait) {    and (max-device-width:845px)
  @media screen and (hover: none) and (orientation : portrait){  
    .video-bg_video {
      display: none; } 
    .video-bg_video__mobile {
    display: block; }
  }
*/

.footer {
  padding: 0 20px;
  font-size: 14px;
  margin-top: auto; }
  .footer_container {
    max-width: 910px;
    margin: 0 auto;
    padding-bottom: 50px; }
    @media (min-width: 1200px) {
      .footer_container {
        max-width: 1200px; } }
    @media (min-width: 1400px) {
      .footer_container {
        max-width: 1500px; } }

.partners {
  max-width: 910px;
  margin: 0 auto 80px; }
  .partners_title {
    color: #f25553;
    text-align: center; }
    @media (min-width: 768px) {
      .partners_title {
        margin-bottom: 20px; } }
    @media (min-width: 1200px) {
      .partners_title {
        font-size: 20px;
        line-height: 24px; } }
    .partners_title span {
      font-family: "MariupolBold";
      display: block; }
    .partners_title a {
      color: #f25553;
      white-space: nowrap; }
  .partners_list {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: end;
    align-items: flex-end;
    -ms-flex-pack: center;
    justify-content: center;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin: 0 -15px; }
  .partners_item {
    background-repeat: no-repeat;
    background-size: cover;
    transition: filter .2s ease 0s;
    margin: 15px 15px 0; }
    @media (min-width: 768px) {
      .partners_item {
        margin-top: 0; } }
    .partners_item:hover {
      filter: brightness(0) invert(1); }
    .partners_item__komsa {
      background-image: url("../img/partners/komsa.png");
      width: 68px;
      height: 33px; }
    .partners_item__lutasprava {
      background-image: url("../img/partners/lutasprava.png");
      width: 57px;
      height: 61px; }
    .partners_item__hiatus {
      background-image: url("../img/partners/hiatus.png");
      width: 89px;
      height: 28px; }
    .partners_item__281z {
      background-image: url("../img/partners/281z.png");
      width: 85px;
      height: 26px; }
    .partners_item__rukotvory {
      background-image: url("../img/partners/rukotvory.png");
      width: 80px;
      height: 66px; }
    .partners_item__romamatchin {
      background-image: url("../img/partners/romamatchin.png");
      width: 109px;
      height: 36px; }
    .partners_item__supermakaka {
      background-image: url("../img/partners/supermakaka.png");
      width: 43px;
      height: 54px; }

.copyright {
  font-family: "MariupolRegular";
  color: #f25553;
  text-align: center; }
  @media (min-width: 1200px) {
    .copyright {
      font-size: 18px; } }

.promo {
  margin-bottom: 50px;
  position: relative; }
  @media (min-width: 1200px) {
    .promo {
      margin-bottom: 80px; } }
  @media (min-width: 1400px) {
    .promo {
      margin-bottom: 120px; } }
  /*@media (min-width: 1200px) {
    .promo::before {
      content: "";
      background: url("../img/book-name.png") no-repeat center 0/590px auto;
      width: 590px;
      height: 50%;
      position: absolute;
      right: -60px;
      top: 0; } }
  @media (min-width: 1400px) {
    .promo::before {
      background-size: 625px auto;
      width: 625px;
      } }*/
  .promo_head {
    background: url("../img/book-name.png") no-repeat center 0/330px auto;
    text-align: center;
    }
    @media (min-width: 768px) {
      .promo_head {
        background-size: 550px auto;
        background-position: center -20px;
        margin-top:0;
        /*background-position: right 0;
        position: absolute;
        right: 0;
        top: 0;
        width: 350px;
        text-align: right;*/ } }
    @media (min-width: 1200px) {
      .promo_head {
          background-position: center 0px;
         } }
    /*@media (min-width: 1400px) {
      .promo_head {
        width: 590px; } }*/
  .promo_title {
    font-family: "TatonovelRegular";
    font-size: 17px;
    /* font-style: italic; */
    line-height: normal;
    letter-spacing: 2px;
    margin-bottom: 65px;
    }
    @media (min-width: 768px) {
      .promo_title {
        /*text-align: left;
        padding-left: 30px;
        margin-bottom: 80px;*/
        } }
    @media (min-width: 1200px) {
      .promo_title {
        font-size: 30px; 
        margin-bottom: 100px; } }
    @media (min-width: 1400px) {
      .promo_title {
        font-size: 32px;
        margin-top:0px;
        } }
    .promo_title span {
      display: none; }
  .promo_slogan {
    font-family: "TatonovelRegular";
    font-size: 13px;
    line-height: 14px;
    color: #f25553;
    text-transform: lowercase;
    display: none; }
    @media (min-width: 768px) {
      .promo_slogan {
        display: none;
        font-size: 17px;
        line-height: 19px;
        margin-bottom: 45px; } }

    .promo_head .promo_slogan {
      display: block;
      margin-bottom: 15px; }
      @media (min-width: 768px) {
        .promo_head .promo_slogan {
          /*display: none;*/
          margin-top: 85px;
          font-size: 20px;
          line-height: 23px;
          } }
      @media (min-width: 1200px) {
        .promo_head .promo_slogan {
          font-size: 28px;
          line-height: 29px;
          } }  
                  
  .promo_author {
    text-align: left;
    margin-top: 35px;
    margin-bottom: 15px;
    position: relative;
    z-index: 1; }
    @media (min-width: 1200px) {
      .promo_author {
        font-size: 20px;
        margin-bottom: 30px; } }
    @media (min-width: 1400px) {
      .promo_author {
        font-size: 22px; } }
    .promo_author-name {
      font-family: "TatonovelRegular";
      font-size: 19px;
      margin-top:5px;
      letter-spacing: 2px;
      display: block;
      text-transform: lowercase; }
      @media (min-width: 1200px) {
        .promo_author-name {
          font-size: 34px;
          line-height: 45px; } }
  .promo_info {
    font-family:"MariupolRegular",sans-serif;
    font-size: 13px;
    line-height: 19px;
    text-align: right;
    position: relative;
    z-index: 1; }

    .promo_info .wrap{
      position:absolute;
      right:0;
      top:0;
    }

    .promo_info .wrap span{
      font-family:"MariupolRegular",sans-serif;
      margin-top:18px;

      display:inline-block;
      text-align:right;
    }

    @media (min-width: 568px) {
      .promo_info .wrap{
        top:-50px;
      }}

    @media (min-width: 968px) {
      .promo_info {
        font-size: 15px;
        line-height: 24px; }

      }



    @media (min-width: 1200px) {
      .promo_info {
        font-size: 17px;
        line-height: 26px; } 

      .promo_info .wrap{
        top:-110px;
      }
        }



    @media (min-width: 1400px) {
      .promo_info {
        font-size: 19px;
        line-height: 32px;
        } }
  .promo_book {
    margin-top: 140px;
    margin-bottom: 80px;
    position: relative;
    }
    @media (min-width: 468px) {
      .promo_book {
        margin-top:90px;}}

    @media (min-width: 629px) {
      .promo_book {
        margin-top:0px;}}


    @media (min-width: 768px) {
      .promo_book {
        margin-top:-50px;
        padding: 0 17% 0 22%;
        shape-outside: polygon(48% -14%, 49% 100%, 19% 16%);
        float: right;
        position: relative;
        } }
        .promo_book img {
          width: 100%;
          max-width: 925px; }

    @media (min-width: 1200px) {
      .promo_book {
        margin-top: -80px;
        padding: 0 11% 0 24%; } 

      .promo_book img {
          width: 90%;
          max-width: 825px; }
        }
    
      

  .promo_buy {
    background: url("../img/fire.gif") no-repeat center 0/cover;
    width: 300px;
    height: 277px;
    position: absolute;
    left: 0;
    right: 0;
    bottom: -120px;
    margin: 0 auto; }

  .promo_buy .price{
    position:relative;
    top:130px;
    left:220px;
    text-align:left;
    font-size:15px;
    margin-bottom:50px;
     
  }
  .promo_buy .box span{display:block;}
  .promo_buy .box .full{color:red; text-decoration: line-through; font-size:1.1rem;}
  .promo_buy .box .sale{font-family:'MariupolBold'; font-size:1.2rem;}


  @media (min-width: 508px) {
    .promo_buy .price{
      font-family:'MariupolRegular';
      position:absolute;
      top:140px;
      left:230px; border:0px solid; min-width:220px;
      text-align:left;
      font-size:15px;
      margin-bottom:50px;

    }
    .promo_buy .box span{display:inline-block;}
  }
  @media (min-width: 768px) {
    .promo_buy .price{
      font-size:20px;
      left:300px;
    }}
  @media (min-width: 1200px) {
    .promo_buy .price{
      font-size:24px;
      left:400px;
      top:230px;
    }
    .promo_buy .box .sale{font-size:1.7rem;}
    }
  @media (min-width: 1400px) {
    .promo_buy .price{
      font-size:28px;
      left:500px;
      top:320px;
    }
    .promo_buy .box .full{font-size:1.3rem;}
    .promo_buy .box .sale{font-size:1.7rem;}
    }

    @media (min-width: 1200px) {
      .promo_buy {
        width: 450px;
        height: 415px;
        bottom: -180px; } }
    @media (min-width: 1400px) {
      .promo_buy {
        width: 600px;
        height: 554px;
        bottom: -250px;
         } }
    .promo_buy-button {
      width: 94px;
      height: 94px;
      background: url("../img/buy4.png") no-repeat center 0/cover;
      position: absolute; 
      left: 14px; 
      right: 0;
      bottom: 75px;
      margin: 0 auto; 
      transition: all .3s ease-out;
      background-size:98%;
      }
      .promo_buy-button:hover{
        background-size:100%;
      }
      @media (min-width: 1200px) {
        .promo_buy-button {
          width: 150px;
          height: 150px; 
          bottom: 100px;
          } }
      @media (min-width: 1400px) {
        .promo_buy-button {
          width: 220px;
          height: 220px; 
          bottom: 120px;
          } }
  @media (min-width: 900px) {
    .promo_text {
      font-size: 16px;
      line-height: 24px;
      padding-top: 55px; } }
  @media (min-width: 1200px) {
    .promo_text {
      font-size: 20px;
      line-height: 28px;
      padding-top: 95px;
      max-width: 50%; } }
  @media (min-width: 1400px) {
    .promo_text {
      font-size: 22px;
      line-height: 30px;
      padding-top: 95px; } }
  

@media (min-width: 768px) {
  .gallery {
    padding: 0 13%; } }

.gallery a:not(:first-child) {
  display: none; }

.gallery img {
  width: 100%; }



.promo_social {
  margin-bottom:40px;
} 

@media (min-width: 768px) {
  .author {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: (1fr)[2];
    grid-template-columns: repeat(2, 1fr);
    grid-column-gap: 40px; } }

@media (min-width: 1200px) {
  .author {
    grid-column-gap: 100px; } }

.author_img {
  width: 190px;
  height: 190px;
  border-radius: 50%;
  float: right;
  shape-outside: circle(50%);
  margin-left: 20px;
  margin-right: -35px; }
  @media (min-width: 768px) {
    .author_img {
      width: 250px;
      height: 250px;
      margin-left: 0;
      margin-right: 0;
      grid-area: 1 / 2 / 2 / 3;
      -ms-flex-order: 2;
      order: 2; } }
  @media (min-width: 1200px) {
    .author_img {
      width: 450px;
      height: 450px; } }

@media (min-width: 768px) {
  .author_content {
    font-size: 16px;
    grid-area: 1 / 1 / 3 / 2;
    -ms-flex-order: 1;
    order: 1; } }

@media (min-width: 1200px) {
  .author_content {
    font-size: 20px;
    line-height: 28px; } }

@media (min-width: 1400px) {
  .author_content {
    font-size: 23px;
    line-height: 33px;
    padding-bottom: 50px;
    } }

@media (min-width: 1200px) {
  .author_content p {
    margin-bottom: 35px; } }

@media (min-width: 768px) {
  .author_social {
    grid-area: 2 / 2 / 3 / 3;
    -ms-flex-order: 3;
    order: 3; } }

.social-block {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-pack: end;
  justify-content: flex-end;
  margin-top: 15px; }
  .social-block_title {
    text-align: right;
    line-height: 16px; }
    @media (min-width: 1200px) {
      .social-block_title {
        font-size: 20px;
        line-height: 24px; } }
    @media (min-width: 1400px) {
      .social-block_title {
        font-size: 20px;
        line-height: 29px;
        } }

.social {
  margin: 0;
  padding: 0;
  list-style: none;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: center;
  justify-content: center;
  margin-left: 10px; }
  .social_item {
    margin: 0 5px; }
    @media (min-width: 1200px) {
      .social_item {
        margin: 0 12px; } }
  .social_link {
    width: 40px;
    height: 40px;
    background: #bc3232 no-repeat center center / 24px 24px;
    border-radius: 50%;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: center;
    justify-content: center;
    -ms-flex-align: center;
    align-items: center;
    position: relative;
    transition: background-color .2s ease 0s; }
    @media (min-width: 1200px) {
      .social_link {
        width: 60px;
        height: 60px;
        background-size: 36px 36px; } }
    .social_link:hover, .social_link:active {
      background-color: #fff; }
    .social_link__fb {
      background-image: url("../img/icons/icon-facebook.svg"); }
    .social_link__be {
      background-image: url("../img/icons/icon-behance.svg"); }
    .social_link__ig {
      background-image: url("../img/icons/icon-instagram.svg"); }