@media(min-width: 717px) {
  .task * {
    background: initial !important;
  }

  .task {
    background: rgba(255, 255, 255, 0.4) !important;
    position: relative;
    z-index: 4;
    margin-bottom: -50px;
    transform: translateY(-100%);
  }

}

/*** cover ***/

.main-cover {
  position: relative;
  overflow: hidden;
}

.main-cover__phone_1,
.main-cover__phone_2 {
  position: absolute;
  height: auto;
  pointer-events: none;
  transition: transform 100ms linear;
}

.main-cover__phone_1 {
  bottom: -5%;
  left: 50%;
  max-width: 50%;
}

.main-cover__phone_2 {
  top: 14%;
  left: 15%;
  max-width: 20%;
}

@media(max-width: 980px) {
  .main-cover__phone_1 {
    left: 70%;
    transform: translateX(-50%) !important;
    max-width: none;
    width: auto;
    height: 74%;
  }

  .main-cover__phone_2 {
    top: 14%;
    left: 15%;
    transform: translateX(-50%) !important;
    max-width: none;
    width: auto;
    height: 60%;
  }
}

@media(max-width: 540px) {
  .main-cover__phone_1 { left: 50%; }
  .main-cover__phone_2 { display: none; }
}

/*** cover end ***/

/*** grids ***/

.grid {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
}

.grid img {
  max-width: 100%;
  height: auto;
}

.grid__img-wrapper {
  position: relative;
  width: 100%;
  max-width: 411px;
  margin: auto;
  text-align: center;
}

.grid__service {
  position: relative;
  width: 100%;
  max-width: 380px;
  margin: auto;
}

.grid__service img {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: auto;
  /*-moz-transition: .1s transform linear;*/
  transition: .1s transform linear;
  will-change: transform;
}

.grid__service img:first-child {
  position: static;
}

.grid__column_two {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  width: calc(50% - 10px);
  margin-bottom: 40px;
}

.grid__column_three {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  width: calc(33% - 13px);
  margin-bottom: 20px;
}

.grid .grid__column_two:first-child .grid__img-wrapper,
.grid .grid__column_three:first-child .grid__img-wrapper {
  text-align: left;
}

.grid .grid__column_two:last-child .grid__img-wrapper,
.grid .grid__column_three:last-child .grid__img-wrapper {
  text-align: right;
}

@media(max-width: 450px) {
  .grid__column_two {
    width: 100%;
  }

  .grid_mobile-text {
    flex-direction: column-reverse;
  }

  .grid_after-text {
    margin-top: -3em;
  }
}

/*** end grids ***/

/*** transformed preview ***/

.t-prev {
  position: relative;
  overflow: hidden;
}

.t-prev__bg {
  position: absolute;
  top: 10%;
  left: 10%;
  z-index: 1;
  width: 80%;
  height: 80%;
  background: center / cover no-repeat;
}

.t-prev__phone {
  position: absolute;
  height: auto;
  z-index: 3;
}

.t-prev__text {
  position: absolute;
  top: 50%;
  left: 52%;
  transform: translateY(-50%);
  z-index: 4;
  padding: 0;
  margin: 0;
  width: 40%;
}

.t-prev__text_mobile { display: none; }

@media(max-width: 650px) {
  .t-prev__text {
    display: none;
  }

  .t-prev__text_mobile {
    display: block;
  }
}

.t-prev__top-mask,
.t-prev__bottom-mask  {
  position: absolute;
  left: 0;
  height: 10%;
  width: 100%;
  background: #fff;
}

.t-prev__top-mask {
  z-index: 2;
  top: -1px;
}

.t-prev__bottom-mask {
  z-index: 4;
  bottom: -1px;
}

.t-prev__top-mask::before,
.t-prev__bottom-mask::before {
  position: absolute;
  left: 0;
  content: '';
  display: block;
  width: 100%;
  height: 300%;
  transform: skewY(-5deg);
  background: #fff;
}

.t-prev__top-mask::before {
  transform-origin: 100% 100%;
  z-index: 2;
  bottom: 0;
}

.t-prev__bottom-mask::before {
  top: 0;
  transform-origin: 0 0;
  z-index: 4;
}

/*** transformed preview end ***/

/*** premium ***/

.premium {
  padding-top: 58%;
  background: linear-gradient(90deg, #212f5b 50%, #161b36 50%)
}

.premium__bg {
  background-image: url(bspb-mobile-premium-bg.jpg);
}

.premium__phone {
  right: 54%;
  bottom: 5%;
  width: 27%;
}

.premium__text {
  color: #fff;
}


/*** premium end ***/

/*** spec navigation ***/

.spec-nav {
  padding-top: 58%;
  background: #e0eff7;
}

.spec-nav__bg {
  background-image: url(bspb-mobile-spec-nav-bg.png);
  width: 550px;
  height: 524px;
  right: 16%;
  left: initial;
}

.spec-nav__phone {
  right: -4%;
  bottom: 16%;
  width: 62%;
}

.spec-nav__text {
  top: 55%;
  right: 52%;
  left: initial;
}

/*** spec navigation end ***/

.switcher .switcher__pattern {
  position: absolute;
  top: 0;
  left: 50%;
  z-index: -1;
  height: 100%;
  width: auto;
  max-width: none;
  transform: translateX(-50%);
}

.phone-content {
  position: absolute;
  top: 11.4%;
  left: 11.6%;
  z-index: -1;
  width: 77.9%;
  height: auto;
}


.product__note {
  color: #cdcdcd;
}

.credits {
  position: relative;
  color: #fff;
  background: #F77A7B;
}

.credits .column a.underline {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.3);
}

.footer-imgs {
  position: absolute;
  bottom: 100%;
  left: 0;
  overflow: hidden;
  width: 100%;
  pointer-events: none;
}

.footer-imgs__bg {
  position: relative;
  z-index: -2;
  width: 100%;
  height: auto;
  vertical-align: bottom;
}

.footer-imgs__pattern_left {
  position: absolute;
  bottom: 0;
  right: 90%;
  z-index: -1;
  max-width: 50%;
  height: auto;
}

.footer-imgs__pattern_right {
  position: absolute;
  top: 0;
  left: 90%;
  z-index: -1;
  max-width: 50%;
  height: auto;
}

.index-animation {
  overflow: hidden;
  height: 65.2%;
  background: url(bspb-mobile-phone-index.jpg) 50% 0% / cover no-repeat;
  animation-name: index;
  animation-duration: 12s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-play-state: paused;
}

.cards-animation {
  overflow: hidden;
  height: 65.2%;
  background: url(bspb-mobile-phone-cards.png) 50% 0% / cover no-repeat;
  animation-name: cards;
  animation-duration: 8s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-play-state: paused;
}

.selected_layout .cards-animation {
  animation-play-state: running;
}

@keyframes index {
  10% {  background-position: 50% 0%;  }
  87% { background-position: 50% 100%; }
  90% { background-position: 50% 100%; }
  100% { background-position: 50% 0%; }
}

@keyframes cards {
  15% {  background-position: 50% 0%;  }
  81% { background-position: 50% 100%; }
  85% { background-position: 50% 100%; }
  100% { background-position: 50% 0%; }
}