/* ==========================================================================
   Base styles: opinionated defaults
   ========================================================================== */

:root {
  --white: #FFFFFF;
  --black: #040404;
  --red: #FF331F;
  --gray-1: #171717;
  --gray-2: #373737;
  --sucsess-color: #38B136;
  --error-color: #D53838;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
@font-face {
  font-family: DrukWideCyr;
  src: url('../fonts/drukwidecyr-bold.woff2') format('woff2');
  font-weight: normal;
}
@font-face {
  font-family: Inter-Bold;
  src: url('../fonts/Inter-Bold.woff2') format('woff2');
  font-weight: normal;
}
@font-face {
  font-family: Inter-BoldItalic;
  src: url('../fonts/Inter-BoldItalic.woff2') format('woff2');
  font-weight: normal;
}
@font-face {
  font-family: Inter-Medium;
  src: url('../fonts/Inter-Medium.woff2') format('woff2');
  font-weight: normal;
}
@font-face {
  font-family: Inter-MediumItalic;
  src: url('../fonts/Inter-MediumItalic.woff2') format('woff2');
  font-weight: normal;
}
@font-face {
  font-family: Inter-Regular;
  src: url('../fonts/Inter-Regular_new.woff2') format('woff2');
  font-weight: normal;
}

h1 {font-family: DrukWideCyr; font-size: 90px; font-weight: 100;  text-transform: uppercase; text-align: center;}
h2 {font-family: DrukWideCyr; font-size: 40px; font-weight: 100;  text-transform: uppercase; text-align: center;}
h3 {font-family: DrukWideCyr; font-size: 20px; font-weight: 100;  text-transform: uppercase;letter-spacing: 2px;}
h4 {font-family: DrukWideCyr; font-size: 14px; font-weight: 100;  text-transform: uppercase;}
a { margin: 0; padding: 0; border: none; text-decoration: none; color: var(--white);}
a.underline {text-decoration: underline;}



body {
  background-color: var(--black);
  background-repeat: no-repeat;
  background-position: top center;
  font-family: Inter-Regular;
  font-size: 14px;
  color: var(--white);

}

.checkbox {}
.checkbox-input {cursor: pointer; appearance: none; position: relative; width: 16px; height: 16px; min-width: 16px; background: var(--gray-1); box-shadow: inset 0 0 5px rgb(0, 0, 0, 0.2); border-radius: 3px;   border: 1px solid #ffffff33;; -webkit-background-clip: padding-box; background-clip: padding-box;}
.checkbox-input::after {content: ""; position: absolute; width: 0px; height: 0px; background-image: url("../img/checked.svg"); background-repeat: no-repeat; background-position: center;}
.checkbox-input:checked {background-color: var(--red);border: none;}
.checkbox-input:checked::after {width: 16px; height: 16px;}
.checkbox-input + label {padding-left: 10px; position: relative; top:-4px;}
.checkbox.form-error .checkbox-input {border: 1px solid var(--red);}
.checkbox.form-error .checkbox-input + label {color: var(--red);}
.field-text {font-size: 16px; font-weight: 400; color: var(--white);}
.mt-0{margin-top:0!important}
.mt-1{margin-top:.25rem!important}
.mt-2{margin-top:.5rem!important}
.mt-3{margin-top:1rem!important}
.mt-4{margin-top:1.5rem!important}
.mt-5{margin-top:3rem!important}
.mb-0{margin-bottom:0!important}
.mb-1{margin-bottom:.25rem!important}
.mb-2{margin-bottom:.5rem!important}
.mb-3{margin-bottom:1rem!important}
.mb-4{margin-bottom:1.75rem!important}
.mb-5{margin-bottom:3rem!important}
.mb-6{margin-bottom:9rem!important}
.mr-1{margin-right: 5.5rem !important;}
.mr-2{margin-right: 1rem !important;}
.n-mr-r{margin-right: 0 !important;}
main {max-width: 1600px;min-width: 365px; margin: 0 auto; padding: 0 0  80px; display: flex; flex-direction: column; min-height: 100vh;overflow: hidden}
.redtext{color:var(--red)}
.rederrortext{color:var(--error-color)}
.gray2{background-color: var(--gray-2) !important;}
.gray1{background-color: var(--gray-1) !important;}
header {z-index: auto;padding: 15px 180px; background-color: var(--black); display: flex; justify-content: space-between; align-items: center;}
header a {text-decoration: none;}
header ul {display: flex; align-items: center;}
header ul li {list-style: none; vertical-align: middle;}
header ul li a:not(.btn){color: var(--white);}
header ul li a.btn {background-color: var(--gray-2); padding: 8px 16px; color: var(--white);}
.disabled{opacity: 0.75}
header .logo {
  background-image: url('../img/main_logo.svg');
  width: 78px;
  height: 34px;
}
.center{text-align: center;}
.druk{font-family: DrukWideCyr;}

.d-mobile {display: none !important;}
.class404 {
  background-color: var(--black);
  background-repeat: no-repeat;
  background-position: top center;
  background-image: url('../img/big_back.png');
  max-width: 1600px;
  height: 730px;

}

.class404 .page_window {
  margin: 230px auto 230px;
  width: 312px;
  z-index: 101;
  position: relative;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 40px;

}
.class404 .btn {
  background-color: var(--gray-2);
  color: var(--white);
  cursor: pointer;
  border: none;
  clip-path: polygon(calc(0% + 8px) 0%, calc(100% - 8px) 0%, 100% calc(0% + 4px), 100% calc(100% - 4px), calc(100% - 8px) 100%, calc(0% + 8px) 100%, 0% calc(100% - 4px), 0% calc(0% + 4px));
  font-size: 14px;
  font-weight: 700;
  padding: 18px 8px;/
  text-align: center;
}
.class404 .btn.btnred {
  background-color: var(--red);
}

@media screen and (max-width: 980px) {
  .d-mobile {display: block !important;}
  .d-desktop {display: none !important;}
}
@media screen and (max-width: 1199px) {
  body.modal main {overflow: hidden; height: 100vh;}
}
header .logo a {display: flex;height: 34px;}
header .menu-all {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: stretch;
  width: 100%;
  /* min-width: 1240px; */
  justify-content: space-between;
}
.mr-a {}
header .menu  {display: flex;}
header .menu ul {gap: 16px;}
header .right {display: flex; align-items: center;}
header .right .personal ul {gap: 15px; padding-right: 15px;}
header .right .social ul {gap: 15px; padding:0px 15px; border-left: 1px solid var(--gray-2);}
header .right .social ul a {display: flex;}
header .right .lang ul, .main-menu .lang ul {gap: 15px; padding-left: 15px; border-left: 1px solid var(--gray-2);}
header .right .lang ul a, .main-menu .lang ul a {display: flex; color:var(--gray-2)}
header .right .lang ul a.check, .main-menu .lang ul a.check {color:var(--white)}
header .right .burger img {cursor: pointer;}
header .right .personal {position:relative;  min-width: 100px;}
header .right .personal .prof-header {
  padding-right: 15px;
  text-align: center;
  text-transform: uppercase;
}
header .right .personal .prof-header-dropdown .prof-header-dropdown-inner h4 {
  margin-bottom: 5px;
}
header .right .personal .prof-header-dropdown .prof-header-dropdown-inner {
  position: absolute;
  top: 17px;
  left: -75px;
  background: var(--gray-1) url(../img/corner-prof.svg) top right no-repeat;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  width: 278px;
  box-shadow: inset -4px 4px 0px 0px var(--gray-2);
  align-items: stretch;
  padding: 16px 20px 12px;
  text-align: center;
  z-index: 100;
  clip-path: polygon(0% 0%, calc(100% - 9px) 0%, 100% calc(0% + 9px), 100% 100%, 0% 100%);
}
header .right .personal .prof-header-dropdown .prof-header-dropdown-inner ul{
  flex-direction: column;
  gap:5px;
  padding: 0;
;}
header .right .personal .prof-header-dropdown .prof-header-dropdown-inner ul li {
  height: 29px;
  list-style: none;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  opacity: 0.75;
}
header .right .personal .prof-header-dropdown .prof-header-dropdown-inner ul li.menu_separator {
  border-top: 1px solid #ffffff33;
  height: 8px;
  margin-top: 8px;
}
header .right .personal .prof-header-dropdown .prof-header-dropdown-inner a
{
  width: 100%;
  text-align: center;
}
header .right .personal .prof-header-dropdown .t-5 {
  height: 18px;
  width: 20px;
  position: absolute;
  left: 30%;
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}
header .right .personal .prof-header-dropdown {
  position: relative;
}


header .right .personal .user_dropdown {display:none; position: fixed; padding-top: 32px; background: center 20px no-repeat; max-width: 250px; overflow: hidden; transform: translateX(-40%);}
header .right .personal:hover .user_dropdown {display: block;}
header .right .user_dropdown .user_menu {padding: 20px; background-color: var(--black); border: 1px solid var(--gray-1);}
header .right .user_dropdown .user_menu .menu_separator {width: 100%; padding-top: 15px; margin-bottom: 15px; border-bottom: 1px solid #ffffff33;}
header .right .user_dropdown .user_menu ul {display: flex; flex-direction:column; gap: 10px;}
header .right .user_dropdown .user_menu ul li {list-style: none;}
.personal .navigation-text li a{clip-path: polygon(
        calc(0% + 8px) 0%, calc(100% - 8px) 0%, 100% calc(0% + 4px), 100% calc(100% - 4px)  ,calc(100% - 8px) 100% ,calc(0% + 8px) 100%, 0% calc(100% - 4px),0% calc(0% + 4px)
);font-weight: bold;}
.btn.gray_btn {
  background-color: var(--gray-2) !important;
}
section {
  margin-bottom: 140px;
}
.running-text-container {
  position: relative;
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
  height: 64px;
}

.running-text {
  display: inline-block;
  animation: runText 30s linear infinite;
  position: absolute;
  width: max-content;
  left: 100%
}

@keyframes runText {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-140%);
  }
}
.running-text2 {
  display: inline-block;
  animation: runText2 30s linear infinite;
  position: absolute;
  width: max-content;
  left: 100%
}

@keyframes runText2 {
  0% {
    transform: translateX(-140%);
  }
  100% {
    transform: translateX(0);
  }
}

.main-banner { background: var(--black) url('../img/keyart_sparta.png?1') no-repeat 50% top;    height: 730px;}
.main-banner .main-banner-text{max-width: 1240px;  position: relative;top: 369px;margin:auto}
.main-banner .main-banner-text .text{    font-size: 82px;
  color: var(--white);
  text-transform: uppercase;
  letter-spacing: -2px;
  line-height: 100%;

}
.main-banner .main-banner-btn{ margin-top:32px;display:flex;justify-self: center;}
.main-banner .btn{font-size:32px; padding: 8px 16px; text-align: center;  width: 400px; justify-self: center; background-color: var(--red);}
.main-banner .main-banner-btn::before{ content: '';background-image: url('../img/main-btn-back.png');background-size: cover;width: 8px;}
.main-banner .main-banner-btn::after{ content: '';background-image: url('../img/main-btn-back.png');background-size: cover;width: 8px;transform: scaleX(-1);}
.roundtex {font-family: Inter-BoldItalic; padding: 10px 0;background-color: var(--gray-2);font-size: 36px;color: var(--white);vertical-align: middle;}
section.main{margin:auto; max-width: 1240px;width: 100%;}
.header-section{display: flex; justify-content: space-between;align-items: center;margin-bottom: 50px;}
.header-section .h-section{      font-size: 24px;
  transform: skew(-24deg);
  background-color: var(--gray-2);
  -webkit-box-shadow: -8px 5px 0px -2px rgba(255, 51, 31, 1);
  -moz-box-shadow: -5px 5px 0px -2px rgba(255, 51, 31, 1);
  box-shadow: -8px 5px 0px -2px rgba(255, 51, 31, 1);
  display: flex;margin-left: 20px;
  flex-direction: column-reverse;
  padding: 13px;}



.body-section .slider{margin-bottom: 20px;}
.body-section .control-slider{margin: 10px;display: flex; justify-content: space-between;align-items: center;position: relative;}
.body-section .line {
  top: 50%;
  left: 0;
  width: 100%;
  height: 2px;
  background: var(--white);
  margin: 0px 6px;
}
.main-banner .logo_partner{display: flex;margin-top: 25px;
  justify-content: center;}
.main-banner .logo_partner a{
  height: 53px; width: 55px; margin:6px;
}
.main-banner .logo_partner a.steam{
  background:  url('../img/logo_pr.svg') top left no-repeat;
}
.main-banner .logo_partner a.epic{
  background:  url('../img/logo_pr.svg') top center no-repeat;
}
.main-banner .logo_partner a.gog{
  background:  url('../img/logo_pr.svg') top right no-repeat;
}
.footer-top .main-section .logo_partner{display: flex;margin-top: 15px;
  justify-content: center;}
.footer-top .main-section .logo_partner a{
  height: 36px; width: 38px; margin:3px;
}
.footer-top .main-section .logo_partner a.steam{
  background:  url('../img/logo_pr_footer.svg') top left no-repeat;
}
.footer-top .main-section .logo_partner a.epic{
  background:  url('../img/logo_pr_footer.svg') top center no-repeat;
}
 .footer-top .main-section .logo_partner a.gog{
  background:  url('../img/logo_pr_footer.svg') top right no-repeat;
}
.body-section .control-slider .type{
  position: relative;
  font-family: DrukWideCyr;    font-size: 12px;
  padding: 18px 10px;
}
.body-section .control-slider .type1{
  outline-offset: 6px;
  outline: 2px solid var(--red);
  background-color: rgba(255, 51, 31, .5);
}
.body-section .control-slider .type2{
  outline-offset: 6px;
  outline: 2px solid var(--red) ;
  background-color: var(--red);
}
.body-section .control-slider .type3{
  outline-offset: 6px;
  outline: 2px solid var(--gray-2);
  background-color: var(--gray-2);
}
.slider {

}


.slides {

}

/* Каждый отдельный слайд */
.mainslide {
  width: 1240px;
  position: relative;
  height: 500px;
  background-size: cover;
}
.mainslide.main-slide-1 {
  background-image: url('/assets/img/slider/slider-1.png');
}
.mainslide.main-slide-2 {
  background-image: url('/assets/img/slider/slider-2.png');
}
.mainslide.main-slide-3 {
  background-image: url('/assets/img/slider/slider-3.png');
}
.mainslide.main-slide-4 {
  background-image: url('/assets/img/slider/slider-4.png');
}
.redborder{
  position: absolute;
  bottom: 16px;
  width: 750px;
  padding: 12px;
  right:30px;
  font-size: 16px;
  background: var(--black)  url('../img/corner.png') top right no-repeat;
  clip-path: polygon(0% 0%, calc(100% - 20px) 0%, 100% calc(0% + 20px), 100% 100%, calc(0% + 20px) 100%, 0% calc(100% - 20px));
  box-shadow: inset -3px 3px 0px 0px rgba(255, 51, 31, 1);
}

.body-section2{display: flex; justify-content: space-between;align-items: center;}
.body-section2 .col{max-width: 400px;display: flex;
  justify-content: space-between;
  flex-direction: column;}
.body-section2 .col-2{
  border-top: 2px solid var(--red);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  background: var(--gray-1) url('../img/for-col-2.svg') top left no-repeat;
  padding: 16px;
  position: relative;
  clip-path: polygon(
          0% 0%,
          100% 0%,
          100% 90%,
          90% 100%,
          0% 100%
  );
  min-height: 265px;
  justify-content: space-between;
}

.body-section2 .col.b-gif img{transform-style: preserve-3d;
  max-width: 390px;    margin: auto;
  }
/*.body-section2 .col-2:hover{
  background: var(--red) url('../img/for-col-2-hover.png') top left no-repeat;
}*/
.body-section2 .col-2 > ul li a{
  cursor: pointer;
}
/*.body-section2 .col-2:hover > ul li a{
  color: var(--white) !important;
  text-decoration: underline;
}*/
.body-section2 .col-2:first-child{ margin-bottom: 30px;}
.body-section2 .col-2 h3{  margin-top: 0;margin-bottom: 67px;}
.body-section2 .col-2 ul{ padding: 0;
  bottom: 0;
  display: flex;
  gap: 6px;
  flex-direction: column;
  margin: 0; }
.body-section2 .col-2 ul li {list-style: none; vertical-align: middle;border-bottom: 1px solid var(--gray-2);    padding: 4px 0px; font-size: 16px;}
.body-section2 .col-2 ul li:last-child{border-bottom:none}
.body-section3{}
.col-4 {background-color: var(--gray-1);   min-width: 298px;clip-path: polygon(
  0% 0%, calc(100% - 26px) 0%, 100% calc(0% + 26px), 100% 100%,calc(0% + 26px) 100%, 0% calc(100% - 26px)
);}
.col-4 .text{ padding: 16px 8px;
  font-size: 16px;
  font-weight: 100;
  gap: 12px;
  display: flex;
  flex-direction: column;
  align-items: stretch;}
.col-4 .text h3{margin: 0;}
.col-4 .text .date{margin-top: -8px;}
.col-4 .text .link{text-align: right; color: var(--red)}

.bottom {
  height: 600px;
  position: relative;
  overflow: hidden;
  display: flex;
  align-content: space-between;
  justify-content: space-between;
  flex-direction: column;
  align-items: stretch;
  /*background: var(--red) url('../img/cover-bottom3.png') top center no-repeat;*/
  background-size: contain;
  margin-bottom: 20px;
}
.bottom .top-text{
  font-family: DrukWideCyr;    font-size: 90px;top: 45px;
  position: relative;
  text-align: center;
  z-index: 1;
}
.bottom .top-line{
  background: var(--red) url('../img/top-line-bottom.png') top center no-repeat;
  height: 48px;
  background-size: contain;
}

.bottom .solders{    background: url('../img/soldiers.png') top center no-repeat;
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}
.bottom .bottom-line{ display: flex; justify-content: center;
  background: url('../img/bottom-line-bottom.png') bottom center no-repeat;
  z-index: 3;width: 100%;    padding: 0 10%;
}

.bottom .bottom-line .button{padding: 6px 0;font-size: 36px;font-family: Inter-Bold;
  background: var(--white);color:var(--red); flex:1;
  clip-path: polygon(
          0% 0%,
          100% 0%,
          100% calc(100% - 8px),
          calc(100% - 16px) 100%,
          calc(0% + 16px) 100%,
          0% calc(100% - 8px)
  );
  text-align: center;
  margin:22px;
}
.sale{color:#D5D5D5; text-decoration: line-through;    margin: 0 10px;}
.bottom .space {height: 120px;}

section.back-bage{margin-bottom:unset;  }
section.back-bage::after{
  content: '';
  background: url('../img/background.png')  top center no-repeat;
  background-size: cover;
  opacity: 0.2;
  bottom: 0;
  left: 0;
  height: 740px;
  position: absolute;
  right: 0;
  top: 100px;
  z-index: 0;}


.over{
  content: '';
  background: #04040480;
  background-size: contain;
  bottom: 0;
  left: 0;
  height: 100vh;
  position: absolute;
  right: 0;
  top: 100px;
  z-index: 100;}



.over .page_window {
  margin: 130px auto 100px;
  width: 376px;
  padding: 42px;
  background: var(--gray-1) url('../img/rectangle16.svg') bottom left no-repeat;
  z-index: 101;
  position: relative;
  box-shadow: 8px -8px 0px 2px rgba(55, 55, 55, 1);
  text-align: center;

}
section.support {
  display: flex;
  min-height:730px;
  flex-direction: column;
}
section .page_window.support_window {
  max-width: 500px;
}
.headform {
  font-family: 'DrukWideCyr';
  font-size: 20px;
  text-align: center;
  clip-path: polygon(
          calc(0% + 24px) 0%,  calc(100% - 24px) 0, 100% 100%, 0% 100%
  );
  position: absolute;
  padding: 6px 16px;
  padding-bottom:8px;
  cursor:pointer;
}

.headform.t-2 {
  top: -37px;
  width: 182px;
  right: 0;
  z-index: 4;
}

.headform.t-3 {
  top: -37px;
  width: 180px;
  right: 145px;
  z-index: 3;
  clip-path: polygon(
          calc(0% + 24px) 0%, 100% 0, 100% 100%, 0% 100%
  );
}
.headform.t-4 {
  top: -37px;
  width: 257px;
  right: 0px;
}

section .page_window {
  margin: 130px auto 100px;
  width: 376px;
  padding: 150px 30px 30px;
  background: var(--gray-1) url('../img/WH_Logo_white.svg') center 15px no-repeat;
  z-index: 2;
  position: relative;
  box-shadow: 8px -8px 0px 2px rgba(55, 55, 55, 1);
}
section .page_window.support_window{
  width: 520px;
}
section .page_window.success-block {
  background: var(--gray-1);
  padding: 30px;
  font-size: 16px;
  text-align: center;
  width: 344px;
}
section .page_window.success-block h3{margin-bottom:16px}

section .page_window input[type="text"], section .page_window input[type="password"], section .page_window input[type="email"] {
  padding: 12px 16px;
  border: 1px solid #ffffff33;
  width: 100%;
  background-color: var(--gray-1);
  outline: none;
}
section .page_window .form-error input[type="text"], section .page_window .form-error  input[type="password"], section .page_window .form-error  input[type="email"] {
  border-color: var(--error-color);
}

.field-text {
  font-size: 16px;
  font-weight: 400;
  color: var(--white);
}
section .page_window input[type="text"] + div, section .page_window input[type="password"] + div, section .page_window input[type="email"] + div {
  display: none;
}

section .page_window .error-detail {
  display: none;
  color: var(--error-color);
}
section .page_window .form-error .error-detail {
  display: block;
}

.info-text2 {
  font-size: 12px;
  font-weight: 500;
}
.select-box {
  position: relative;
  display: block;
  width: 100%;
  margin: 0 auto;
  color: var(--white);
  outline: none;
}
.select-box__current {
  position: relative;
  cursor: pointer;
  outline: none;
}
.select-box__current {
  position: relative;
  cursor: pointer;
  outline: none;
}
.select-box__value {
  display: flex;
}
.select-box__input {
  display: none;
}
.select-box__input:checked + .select-box__input-text {
  display: block;
}
.placeholder-value .select-box__input-text{
  color: #ffffff80;
}
.select-box__input-text {
  display: none;
  width: 100%;
  margin: 0;
  padding: 15px;
  background-color: var(--gray-1);
  border: 1px solid #ffffff33;

}
.form-error .select-box__input-text {
  border: 1px solid var(--red);
  color: var(--red);
}
.select-box__icon {
  position: absolute;
  top: 50%;
  right: 15px;
  transform: translateY(-50%);
  width: 24px;
  opacity: 0.3;
  transition: 0.2s ease;
}
.select-box__current:focus .select-box__icon {
  transform: translateY(-50%) rotate(180deg);
}
.select-box__list {
  margin: 0.25em 0;
  position: absolute;
  width: 100%;
  padding: 10px;
  display: none;
  list-style: none;
  -webkit-animation-name: HideList;
  animation-name: HideList;
  -webkit-animation-duration: 0.5s;
  animation-duration: 0.5s;
  -webkit-animation-delay: 0.5s;
  animation-delay: 0.5s;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
  -webkit-animation-timing-function: step-start;
  animation-timing-function: step-start;
  z-index: 10;
  background-color: var(--gray-1);
  border: 1px solid #ffffff33;
}
.select-box__current:focus .select-box__list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  -webkit-animation-name: none;
  animation-name: none;
}
.select-box__option {
  display: block;
  padding: 15px;
  cursor: pointer;
  opacity: 50%;
}
.select-box__option:hover, .select-box__option:focus {
  background-color: var(--gray-2);
  opacity: 100%;
}
section .page_window textarea {
  border: 1px solid #ffffff33;
  width: 100%;
  background-color: var(--gray-1);
  height: 140px;
  resize: none;
  outline: none;
  padding: 18px 16px;
  color: var(--white);
}
section .page_window button.btn {
  width: 100%;
  background-color: var(--red);
  color: var(--white);
  padding: 10px 0;
  cursor: pointer;
  border: none;
  clip-path: polygon(calc(0% + 8px) 0%, calc(100% - 8px) 0%, 100% calc(0% + 4px), 100% calc(100% - 4px), calc(100% - 8px) 100%, calc(0% + 8px) 100%, 0% calc(100% - 4px), 0% calc(0% + 4px));
  font-size: 14px;
  margin-top: 1rem;
}
.not-success {padding: 25px  !important;}
.not-success h3{color:var(--error-color)}
.success-block button.btn.not-success{background-color: var(--gray-2) !important;}

.login .success .back-box__icon{    position: absolute;
  z-index: 2;
  background: url(../img/select_arrow.png) no-repeat 50% 50%;
  width: 24px;
  height: 24px;
  left: 24px;
  background-size: cover;
  transform: rotate(90deg);}
.login .success p{margin:15px  0;}
.login .page_window.success-block {

  width: 376px;
}
.over .page_window .back-box__icon{    position: absolute;
  z-index: 2;
  background: url(../img/cross.svg) no-repeat 50% 50%;
  width: 24px;
  height: 24px;
  right: 24px;
  background-size: cover;}
section .page_window input::placeholder {font-family: Inter-Regular; font-size: 16px; font-weight: 400; color: var(--white);opacity: 0.5}
section .page_window .form-error input::placeholder, section .page_window .form-error textarea::placeholder {color: var(--red);}
section .page_window .password-toggle:after {
  width: 24px;
  height: 24px;
  cursor: pointer;
  content: '';
  float: right;
  margin-top: -33px;
  left: -16px;
  position: relative;
  z-index: 2;
  -webkit-mask: url('../img/password-toggle-show.svg') no-repeat 50% 50%;
  mask: url('../img/password-toggle-show.svg') no-repeat 50% 50%;
  -webkit-mask-size: cover;
  mask-size: cover;
  display: inline-block;
  background-color: var(--white);
  opacity: 0.5;
}
section .page_window .form-error .password-toggle:after {
  background-color: var(--error-color);
}



footer {padding: 40px 180px; background-color: var(--black);z-index: 3; }
footer a {text-decoration: none;}
footer .footer-top {display: flex; justify-content: space-between; align-items: center;align-items: flex-start;}
footer div {display: inline-block;}
footer .footer-logo {background-image: url('../img/main_logo.svg');background-size: cover;background-repeat: no-repeat;
  width: 218px;
  height: 95px;}
footer .main-section {justify-content: center;width: 40%;display: flex;align-items: center;    flex-direction: column;}
footer .menu-section {display: flex;}
footer .menu-section .foter-list {padding: 0 20px;text-align: left;}
footer ul {padding:0}
footer ul li {list-style: none; vertical-align: middle;margin: 15px 0;}
footer .footer-bottom{width: 100%;
  border-top: 1px solid var(--gray-2);
  display: flex;
  justify-content: space-between;
  padding: 12px;}

footer .f-bottom{
  margin-bottom: 36px;
}

.video {
  max-width: 1600px;
  margin:auto ;
}
.video-wrp {
  position: relative;
  padding-top: 56.25%;
}
.video-wrp iframe {
  width: 100%;
  height: 100%;
  display: block;
  position: absolute;
  margin: 0;
  top: 0;
  left: 0;
  border: none;
}

.main-menu {
  z-index: 3;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background-color: var(--black);
  padding: 35px 20px;
  display: flex;
  justify-content: space-between;
  flex-direction: column;
  transform: translateX(150%);
  transition: transform .3s ease;
  overflow-y: scroll;
  background: var(--black) url(../img/WH_Logo_white.svg) 35px 35px no-repeat;
  background-size: 78px;
}
body.modal .main-menu
{
  transform: translateX(0%);
}
.main-menu li{
  list-style: none;
}
.main-menu .close {
  text-align: right;
  padding-bottom: 40px;
}
.main-menu .menu ul {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.main-menu .menu ul li
{
  list-style: none;
  width: 100%;
  min-height: 46px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-size: 32px;
  font-weight: 700;
  padding: 16px 8px;
}
.main-menu .menu.profile-2 ul{
gap:unset;
}
.main-menu .menu.profile-2 ul li
{
  min-height: unset;
  list-style: none;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-size: 16px;
  font-weight: 400;
  padding: unset;
}
.main-menu .menu.profile-2 a{
  width: 100%;
  text-align: center;
  padding: 6px;
}
.main-menu .menu.profile-2 a:hover{
 background-color: var(--gray-2);
}
.main-menu .menu.profile-2 {
  display: flex;
  align-items: stretch;
  flex-direction: column;
  text-align: center;
  font-size: 16px;
}
.main-menu .menu ul li.btn.btn-gray{
  background-color: var(--gray-2) !important;
}
.main-menu .menu ul li.btn
{
  width: 100%;
  background-color: var(--red);
  color: var(--white);
  padding: 10px 0;
  cursor: pointer;
  border: none;
  clip-path: polygon(calc(0% + 8px) 0%, calc(100% - 8px) 0%, 100% calc(0% + 8px), 100% calc(100% - 8px), calc(100% - 8px) 100%, calc(0% + 8px) 100%, 0% calc(100% - 8px), 0% calc(0% + 8px));
}
.main-menu .menu_separator {
  width: 100%;
  padding-top: 40px;
  margin-bottom: 40px;
  border-bottom: 1px solid #ffffff33;
}
.main-menu .lang {
  font-size: 24px;
}
.main-menu .lang ul {border: none !important}
.main-menu .social{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
.main-menu .social ul {
  display: flex;
  align-items: center;
}
.main-menu .social .logosocial a {
  height: 36px;
  width: 38px;
  margin: 3px;
}
section .page_window_profile {
  margin: 100px auto 100px;
  width: 392px;
  padding: 8px;
  background: var(--gray-2);
  z-index: 2;
  position: relative;
  clip-path: polygon(calc(0% + 16px) calc(0% + 8px), calc(0% + 16px) 0, 100% 0, 100% calc(100% - 16px), calc(100% - 8px) calc(100% - 16px), calc(100% - 16px) calc(100% - 8px),calc(100% - 16px) 100%, 0 100%, 0 calc(0% + 16px), calc(0% + 8px) calc(0% + 16px));
}
section .page_window_profile .profile_window {
  background: var(--gray-1);
  padding: 30px;
}
section .page_window_profile .profile_window h3 {
  text-align: center;
}
section .page_window_profile .profile_window p{
  text-align: center;
  padding: 6px;
}
section .page_window_profile .profile_window .button-text .menu_separator {
  width: 100%;
  border-bottom: 1px solid #ffffff33;
  min-height: unset;
  margin: 14px 0;
}
section .page_window_profile .profile_window ul{
  text-transform: uppercase;
}
section.profile .page_window.success-block {
  width: 376px;
  padding: 24px;
}
section .page_window_profile .profile_window ul li
{
  list-style: none;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-weight: 400;
}
section .page_window_profile .profile_window .button-text .btn-gray {
  clip-path: polygon(calc(0% + 8px) 0%, 100% 0, 100% calc(100% - 4px), calc(100% - 8px) 100%, 0 100%, 0 calc(0% + 4px));
  background: var(--gray-2);
  margin: 12px 0px;
}
section .page_window_profile .profile_window .button-text .btn-gray2 {
  clip-path: polygon(0 0, calc(100% - 4px) 0%, 100% calc(0% + 4px), 100% 100%, calc(0% + 8px) 100%, 0 calc(100% - 4px));
  background: var(--gray-2);
  margin: 12px 0px;
}
section .page_window_profile .profile_window .button-text a {
  width: 100%;
  text-align: center;
  padding: 9px 0;
}
section.profile .page_window button.btn {
  margin: unset;
}
section.profile .page_window button.btn_back {
  width: 100%;
  background-color: var(--gray-2) !important;
  color: var(--white);
  padding: 10px 0;
  cursor: pointer;
  border: none;
  clip-path: polygon(calc(0% + 8px) 0%, calc(100% - 8px) 0%, 100% calc(0% + 4px), 100% calc(100% - 4px), calc(100% - 8px) 100%, calc(0% + 8px) 100%, 0% calc(100% - 4px), 0% calc(0% + 4px));
  font-size: 14px;
}
.full{
  width: 1240px;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  box-shadow: 6px -8px 0px 0px var(--gray-2);

}

.full .image {
  height: 134px;
  position: relative;
  width: 377px;
  background-size: cover;
  background-position: top center;
  clip-path: polygon(100% 0, 100% 100%, calc(0% + 16px) 100%, 0% calc(100% - 16px), 0 0);
}
.full .inner{
  display: flex;
  align-items: center;
  width: -webkit-fill-available;
  position: relative;
  width: 100%;
  -ms-flex: 0 0 41.666667%;
  flex: 0 0 41.666667%;
  max-width: 41.666667%;
}
.full .line-out{
  position: absolute;
  left: -7px;
  width: 8px;
  height: 132px;
  clip-path: polygon(calc(0% + 8px) 0, 100% 0, 100% 100%, calc(0% + 8px) 100%, calc(0% + 8px) calc(100% - 8px), 0% calc(100% - 12px), 0 calc(0% + 12px), calc(0% + 8px) calc(0% + 8px));
}
.full .inner-text{
  max-width: 478px;
  margin: 26px;
}
.full .inner-btn{
  display: flex;
  justify-content: flex-end;
  margin: 26px;
  position: relative;
  width: 100%;
  -ms-flex-preferred-size: 0;
  flex-basis: 0;
  -ms-flex-positive: 1;
  flex-grow: 1;
  max-width: 100%;
  align-items: flex-end;
}
.full .inner-text .inner-text-header{
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  flex-wrap: nowrap;
  align-items: center;
}

.full .inner-text .inner-text-header .date{
opacity: 0.5;
}
.full .image img{transform-style: preserve-3d;
  max-width: 377px;
}
.full .btn {
  background-color: var(--gray-2);
  color: var(--white);
  cursor: pointer;
  border: none;
  clip-path: polygon(calc(0% + 8px) 0%, calc(100% - 8px) 0%, 100% calc(0% + 4px), 100% calc(100% - 4px), calc(100% - 8px) 100%, calc(0% + 8px) 100%, 0% calc(100% - 4px), 0% calc(0% + 4px));
  font-size: 14px;
  font-weight: 700;
  padding: 10px 8px;
  display: flex;
}
.full .btn img{
  transform-style: preserve-3d;
  max-width: 16px;margin-left: 2px;
}
.full .btn.btnred {
  background-color: var(--red);
}
.full input[type="text"]{
  padding: 12px 16px;
  border: 1px solid #ffffff33;
  width: 100%;
  background-color: var(--gray-1);
  outline: none;
}
.full .copy-btn:after {
  width: 24px;
  height: 24px;
  cursor: pointer;
  content: '';
  float: right;
  margin-top: -33px;
  left: -10px;
  position: relative;
  z-index: 2;
  -webkit-mask: url(../img/copy.svg) no-repeat 50% 50%;
  mask: url(../img/copy.svg) no-repeat 50% 50%;
  -webkit-mask-size: cover;
  mask-size: cover;
  display: inline-block;
  background-color: var(--white);
  opacity: 0.5;
}
.full .inner-btn .price{
  font-size: 24px;
  font-weight: 700;
  padding: 4px;
}
#error_occurred p{padding: 10px 15px;}
@media screen and (max-width: 1300px) {
  header,footer {padding: 15px 20px!important;}
  .d-padding {padding: 15px 0px!important;}
  .d-tablet {font-size: 75px !important;}
  .bottom .bottom-line {
    background-size: contain;
  }
  .main-banner .main-banner-text .text {
    line-height: normal;
    font-size: 60px;
  }
  .bottom .bottom-line .button { margin: 10px 0; }
  .bottom .bottom-line {
    padding: 0 15%;
  }
  .main-page h2 {
    text-align: right;
  }
  .col-4 {min-width: 200px;}
  .body-section .slider {
    width: 900px;
    margin: auto;
  }
  .redborder {
    width: 600px;
  }
  .full {
    width: 900px;
  }
  .full .image{ width: 195px;}

  section.main:not(.main-page) {
    margin: auto;
    max-width: 900px;
    width: 100%;
  }
}
@media screen and (min-width: 1600px) {
  main {
     max-width: unset;
  }
  .bottom .solders {
    background-size: cover;
  }
  .bottom  {
    height: 704px;
  }
  .main-banner {
    background-size: cover;
  }
  .bottom .bottom-line .button {
   max-width:1240px;
  }
}
@media screen and (max-width: 1240px) {
  .body-section2 .col.b-gif{display: none}
  h2, .main-page h2 {
    font-size: 34px;
    text-align: center;
  }
  .mainslide {
    max-width: 800px;
    margin: auto;
    min-width: 344px;
    height:500px;
    background-position-x: 25%;
  }
  .body-section .control-slider {
    max-width: 800px;
    margin: 15px auto;
  }

}

@media screen and (max-width: 1199px) {
  section .page_window, section .page_window_profile {
    margin: 92px auto 90px;
    width: 95% !important;
    max-width:376px;
  }
  section .page_window_profile h3{
    overflow: hidden;
    white-space: nowrap;
    text-overflow:ellipsis;
  }


}
@media screen and (max-width: 980px) {
  section{margin-bottom:60px;}
  main {margin: 0px; padding-top: 15px; }
  header .menu-all {

    justify-content: space-between;
  }
  section.main {
    margin: unset;
  width:100%
  }
  section.back-bage {
    padding-right: 8px;
  }
  section.back-bage::after {
    background-size: auto !important;
  }
  .main-banner .main-banner-text .text{ line-height: normal; font-size: 40px;}
  .main-banner .btn {width: 100%}
  h2 {font-size: 30px; text-align: center}
  .body-section2 {flex-wrap: wrap;}
  .d-tablet {font-size: 40px !important;}
  .bottom .bottom-line .button {min-width: 300px !important;padding: 13px 0;
    font-size: 24px;}
  .sale{ margin: 0 5px;}
  footer .footer-top {
    display: flex;
    align-items: flex-start;
    flex-direction: column;
  }
  .slider{
    max-width: 850px;
    margin: auto;
    min-width: 344px;
    width: 100%;
  }
  .mainslide {
    max-width: 400px;
    margin: auto;
    min-width: 344px;
height:500px;
    background-position: 50% 50%;
  }
  .body-section .control-slider {
    max-width: 344px;
    margin: 15px auto;
  }
  .body-section2 {
    flex-direction: column;
  }
  .col-4 {max-width: 320px;margin: auto;}
  .body-section2 .col {
    margin-bottom: 30px;
  }
  .body-section .slider {
    width: 343px;
    margin: auto;
  }
  .redborder {
    margin: auto;
    width: 295px;
    left: 24px;
  }
  .main-banner .main-banner-text {
    top: 325px;
  }
  .header-section {
    display: block;
    align-items: center;
    margin-bottom: 50px;
  }
  footer .menu-section {
    display: flex;
    flex-direction: column;
  }
  footer .main-section {
    width: 100%;
    justify-content: left;
  }
  footer .footer-bottom {
    width: 100%;
    border-top: 1px solid var(--gray-2);
    display: flex;
    padding: 12px;
    flex-direction: column;
    gap: 16px;
  }
  footer .menu-section .foter-list {
    padding: 20px 0;
    text-align: left;
  }
  .bottom{
    background: var(--red) url('../img/cover-bottom-mobile.png') top center no-repeat;
  }
  .bottom .bottom-line .bottom-inner {
    background-color: var(--black);
    position: relative;
    top: 0;
    padding: 12px 0;
  }
  .bottom .space {height: 250px;}
  .body-section2{
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-direction: column;
  }
  .bottom .bottom-line {
    background: url('../img/bottom-line-bottom-mobile.png') bottom center no-repeat;background-size: cover;
  }
  footer .main-section {
    align-items: flex-start;
  }
  .full {
    width: 343px;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: nowrap;
    box-shadow: 6px -8px 0px 0px var(--gray-2);
    flex-direction: column;
    margin: auto;
    align-items: flex-start;
  }
  .full .line-out {
    display: none;
    width: 0px;
    height: 0;
  }
  .full .image{ width: 343px;}
  .full .inner {
    display: flex;
    align-items: center;
    width: -webkit-fill-available;
    position: relative;
    width: 100%;
    -ms-flex: 0 0 100%;
     flex: 0 0 100%;
     max-width: 100%;
  }
  .full .inner-text .inner-text-header {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    flex-wrap: wrap;
    align-items: center;
  }
  .full .inner-text .inner-text-header .date {
    opacity: 0.5;
    margin: 5px 0;
  }
  .full .inner-btn {
    margin: 26px;
    position: relative;
    width: 295px;
    -ms-flex-preferred-size: 0;
    flex-basis: 0;
    -ms-flex-positive: 1;
    flex-grow: 1;
    max-width: 100%;
    text-align: center;
  }
  .full .btn {
    background-color: var(--gray-2);
    color: var(--white);
    cursor: pointer;
    border: none;
    clip-path: polygon(calc(0% + 8px) 0%, calc(100% - 8px) 0%, 100% calc(0% + 4px), 100% calc(100% - 4px), calc(100% - 8px) 100%, calc(0% + 8px) 100%, 0% calc(100% - 4px), 0% calc(0% + 4px));
    font-size: 14px;
    font-weight: 700;
    padding: 10px 8px;
    display: flex;
    width: 295px;
    text-align: center;
    flex-direction: row;
    align-items: center;
    justify-content: center;
  }
  .inner-btn.n-mr-r{
    width: 327px;
  }
  .full .inner-text {
    max-width: 478px;
    margin: 26px;
    gap: 10px;
    display: flex;
    flex-direction: column;
  }
  .full .inner-text  .date{
    opacity: 0.5;
  }
  .full .inner .price{
    font-size: 24px;
    font-weight: 700;
    padding: 4px;
    position: absolute;
    top: 22px;
    right: 20px;
  }
  .inner-text-header .mr-2{
    margin-right: 0.25rem !important
  }

}



hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid #ccc;
  margin: 1em 0;
  padding: 0;
}

/*
 * Remove the gap between audio, canvas, iframes,
 * images, videos and the bottom of their containers:
 * https://github.com/h5bp/html5-boilerplate/issues/440
 */

audio,
canvas,
iframe,
img,
svg,
video {
  vertical-align: middle;
}

/*
 * Remove default fieldset styles.
 */

fieldset {
  border: 0;
  margin: 0;
  padding: 0;
}

/*
 * Allow only vertical resizing of textareas.
 */

textarea {
  resize: vertical;
}

/*
 * Hide visually and from screen readers
 */

.hidden,
[hidden] {
  display: none !important;
}

.content.in .checkbox{width: 50%; float:left}
.content.in .forgot{text-align: right;cursor:pointer}