@import url(../css/NullStyle.css);
@import url(../css/fonts.css);
body {
  font-family: montserrat;
  height: 100%;
  background-color: #96cdf7;
  overflow: hidden;
}

.header {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  background-color: #5184b6;
  z-index: 10;
}
.header__container {
  padding: 0 5%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.header__logo {
  width: 9%;
  height: calc(90px + 50 * ((100vw - 992px) / 928));
  position: relative;
}
.header__logo-img {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  -o-object-fit: contain;
     object-fit: contain;
  transition-duration: 0.3s;
}
.header__logo-img:hover {
  width: 105%;
  height: 105%;
}
.header__menu {
  flex: 0 0 38%;
  display: flex;
  justify-content: space-between;
}
.header__menu-ref {
  color: white;
  font-size: calc(18px + 12 * ((100vw - 992px) / 928));
  font-weight: 600;
  text-transform: uppercase;
  transition-duration: 0.3s;
}
.header__menu-ref:hover {
  text-shadow: 0 0 3px white;
}
.header__search {
  flex: 0 0 34%;
  display: flex;
  justify-content: space-between;
}
.header__search-item {
  width: 57%;
  background-color: transparent;
  font-size: calc(18px + 12 * ((100vw - 992px) / 928));
  border: 2px solid white;
  border-radius: 40px;
  padding: 2% 7%;
  color: white;
  transition-duration: 0.3s;
}
.header__search-item::-moz-placeholder {
  color: white;
  text-align: right;
  text-transform: uppercase;
}
.header__search-item:-ms-input-placeholder {
  color: white;
  text-align: right;
  text-transform: uppercase;
}
.header__search-item::placeholder {
  color: white;
  text-align: right;
  text-transform: uppercase;
}
.header__search-item:focus {
  box-shadow: 0 0 5px white;
}

.header-social {
  flex: 0 0 33%;
  display: flex;
  justify-content: space-between;
}
.header-social__ref {
  display: inline-block;
  width: 21%;
  height: 100%;
  position: relative;
}
.header-social__icon {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  -o-object-fit: contain;
     object-fit: contain;
  transition-duration: 0.3s;
}
.header-social__icon:hover {
  width: 105%;
  height: 105%;
}

.textblock {
  z-index: 10;
  height: 100%;
}
.textblock__container {
  position: relative;
  height: 100%;
}
.textblock__sale {
  position: absolute;
  top: 0%;
  left: 36vw;
  width: 28vw;
  height: 55vh;
}
.textblock__desk {
  position: relative;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.textblock__desk-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.textblock__text-item1 {
  position: absolute;
  top: 57%;
  left: 11%;
  font-size: calc(70px + 65 * ((100vw - 992px) / 928));
  color: white;
  font-family: "Kaushan Script";
}
.textblock__text-item2 {
  position: absolute;
  top: 79%;
  left: 29%;
  font-size: calc(40px + 50 * ((100vw - 992px) / 928));
  color: white;
  font-weight: 700;
  font-family: montserrat;
  text-transform: uppercase;
}
.textblock__promo {
  position: absolute;
  top: 60%;
  left: 33%;
  display: flex;
  flex-direction: column;
  align-items: center;
  font-family: montserrat;
  color: #064460;
  width: 34vw;
  text-align: center;
  z-index: 10;
}
.textblock__promo-title {
  font-weight: 600;
  font-size: calc(18px + 18 * ((100vw - 992px) / 928));
}
.textblock__promo-text {
  margin-top: 3%;
  font-weight: 500;
  font-size: calc(15px + 13 * ((100vw - 992px) / 928));
}
.textblock__promo-button {
  margin-top: 8%;
  width: 100%;
  z-index: 10;
  font-size: calc(15px + 13 * ((100vw - 992px) / 928));
}
.textblock__special {
  position: absolute;
  width: 17vw;
  height: 17vw;
  top: 46%;
  left: 12%;
}
.textblock__special-snowball {
  position: relative;
  width: 100%;
  height: 100%;
}
.textblock__special-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -webkit-animation: rotate 15s linear infinite;
          animation: rotate 15s linear infinite;
}
.textblock__special-title {
  position: absolute;
  top: 17%;
  left: 17%;
  font-size: calc(20px + 18 * ((100vw - 992px) / 928));
  color: #ca4e4e;
  font-family: "Kaushan Script";
}
.textblock__special-get {
  position: absolute;
  top: 36%;
  left: 23%;
  font-size: calc(15px + 15 * ((100vw - 992px) / 928));
  color: #0f5479;
  font-weight: 700;
  text-transform: uppercase;
}

.promo-button {
  color: white;
  background-color: #064460;
  border-radius: 20px;
  padding: 2% 6%;
  transition-duration: 0.3s;
  z-index: 10;
}
.promo-button:hover {
  background-color: #0a5a80;
}

.special-percent1 {
  position: absolute;
  top: 45%;
  left: 13%;
  font-size: calc(64px + 56 * ((100vw - 992px) / 928));
  color: #0f5479;
  font-weight: 700;
  text-transform: uppercase;
}

.special-percent2 {
  position: absolute;
  top: 45%;
  left: 61%;
  font-size: calc(36px + 44 * ((100vw - 992px) / 928));
  color: #0f5479;
  font-weight: 700;
  text-transform: uppercase;
}

.special-percent3 {
  position: absolute;
  top: 65%;
  left: 61%;
  font-size: calc(20px + 16 * ((100vw - 992px) / 928));
  color: #0f5479;
  font-weight: 700;
  text-transform: uppercase;
}

.background {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}
.background__snow {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 2;
}
.background__snow-container {
  position: relative;
  width: 100%;
  height: 100%;
}
.background__snow-1 {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 26%;
}
.background__snow-2 {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 7%;
}
.background__snow-3 {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 16%;
}
.background__trees {
  position: absolute;
  width: 100%;
  height: 100%;
}
.background__trees-container {
  position: relative;
  width: 100%;
  height: 100%;
}
.background__trees-1 {
  position: absolute;
  top: 11%;
  left: 0;
  width: 27%;
  height: 26%;
}
.background__trees-2 {
  position: absolute;
  top: 14%;
  right: 0;
  width: 26%;
  height: 18%;
}
.background__trees-3 {
  position: absolute;
  top: 60%;
  left: 0;
  width: 13.5%;
  height: 28%;
}
.background__trees-4 {
  position: absolute;
  top: 56%;
  right: 0;
  width: 15%;
  height: 30%;
}
.background__snowman {
  z-index: 3;
  position: absolute;
  width: 100%;
  height: 100%;
}
.background__snowman-container {
  position: relative;
  width: 100%;
  height: 100%;
}
.background__snowman1 {
  position: absolute;
  top: 53.5%;
  right: 10%;
  width: 20%;
  height: 36%;
}
.background__snowflake {
  z-index: 4;
  position: absolute;
  width: 100%;
  height: 100%;
}
.background__snowflake-container {
  position: relative;
  z-index: 7;
  width: 100%;
  height: 100%;
  background: url(../img/snowflake-bg.png) center/cover no-repeat;
}
.background .snowflake {
  position: relative;
  width: 100%;
  height: 100%;
}
.background .snowflake-item {
  position: absolute;
  top: 0%;
  width: 30px;
  height: 30px;
}
.background .snowflake-item:nth-child(1) {
  left: 8%;
  -webkit-animation: fallingRotate 32s ease infinite 0.5s;
          animation: fallingRotate 32s ease infinite 0.5s;
}
.background .snowflake-item:nth-child(2) {
  left: 27%;
  width: 25px;
  height: 25px;
  -webkit-animation: fallingRotate 29s ease-in infinite 0.6s;
          animation: fallingRotate 29s ease-in infinite 0.6s;
}
.background .snowflake-item:nth-child(3) {
  left: 55%;
  width: 28px;
  height: 28px;
  -webkit-animation: fallingRotate 39s ease-in-out infinite 0.2s;
          animation: fallingRotate 39s ease-in-out infinite 0.2s;
}
.background .snowflake-item:nth-child(4) {
  left: 70%;
  width: 33px;
  height: 33px;
  -webkit-animation: fallingRotate 17s linear infinite 4s;
          animation: fallingRotate 17s linear infinite 4s;
}
.background .snowflake-item:nth-child(5) {
  left: 90%;
  -webkit-animation: fallingRotate 28s ease-out 2s infinite;
          animation: fallingRotate 28s ease-out 2s infinite;
}
@-webkit-keyframes rotate {
  0% {
    rotate: 0deg;
  }
  100% {
    rotate: 360deg;
  }
}
@keyframes rotate {
  0% {
    rotate: 0deg;
  }
  100% {
    rotate: 360deg;
  }
}
@-webkit-keyframes fallingRotate {
  0% {
    top: 0%;
    rotate: 0deg;
  }
  100% {
    top: 100%;
    rotate: 360deg;
  }
}
@keyframes fallingRotate {
  0% {
    top: 0%;
    rotate: 0deg;
  }
  100% {
    top: 100%;
    rotate: 360deg;
  }
}
.background .snowflake-round-item {
  position: absolute;
  top: 20%;
  opacity: 0.6;
  background-color: white;
  border-radius: 50%;
}
.background .snowflake-round-item:nth-child(6) {
  left: 7%;
  width: 13px;
  height: 13px;
  -webkit-animation: fallingRotate 29s ease-out 3.8s infinite;
          animation: fallingRotate 29s ease-out 3.8s infinite;
}
.background .snowflake-round-item:nth-child(7) {
  left: 11%;
  width: 10px;
  height: 10px;
  -webkit-animation: fallingRotate 15s ease-out 1.4s infinite;
          animation: fallingRotate 15s ease-out 1.4s infinite;
}
.background .snowflake-round-item:nth-child(8) {
  left: 18%;
  width: 5px;
  height: 5px;
  -webkit-animation: fallingRotate 23s ease-out 0.5s infinite;
          animation: fallingRotate 23s ease-out 0.5s infinite;
}
.background .snowflake-round-item:nth-child(9) {
  left: 26%;
  width: 11px;
  height: 11px;
  -webkit-animation: fallingRotate 37s ease-out 4.2s infinite;
          animation: fallingRotate 37s ease-out 4.2s infinite;
}
.background .snowflake-round-item:nth-child(10) {
  left: 35%;
  width: 9px;
  height: 9px;
  -webkit-animation: fallingRotate 26s ease-out 3s infinite;
          animation: fallingRotate 26s ease-out 3s infinite;
}
.background .snowflake-round-item:nth-child(11) {
  left: 47%;
  width: 12px;
  height: 12px;
  -webkit-animation: fallingRotate 19s ease-out 2.5s infinite;
          animation: fallingRotate 19s ease-out 2.5s infinite;
}
.background .snowflake-round-item:nth-child(12) {
  left: 54%;
  width: 6px;
  height: 6px;
  -webkit-animation: fallingRotate 27s ease-out 2.6s infinite;
          animation: fallingRotate 27s ease-out 2.6s infinite;
}
.background .snowflake-round-item:nth-child(13) {
  left: 68%;
  width: 10px;
  height: 10px;
  -webkit-animation: fallingRotate 12s ease-out 5.3s infinite;
          animation: fallingRotate 12s ease-out 5.3s infinite;
}
.background .snowflake-round-item:nth-child(14) {
  left: 73%;
  width: 13px;
  height: 13px;
  -webkit-animation: fallingRotate 30s ease-out 0s infinite;
          animation: fallingRotate 30s ease-out 0s infinite;
}
.background .snowflake-round-item:nth-child(15) {
  left: 20%;
  width: 8px;
  height: 8px;
  -webkit-animation: fallingRotate 13s ease-out 4s infinite;
          animation: fallingRotate 13s ease-out 4s infinite;
}