.board {
  position: absolute;
  top: 3.9%;
  left: 4.6%;
  display: -webkit-flex;
  display: flex;
  background: #0036b0;
  width: 90.9%;
  /* width: 483px; */
  height: 45.3%;
  /* height: 241px; */
}

.stripe {
  height: 100%;
  width: 100%;
  /*transform: rotateY(-90deg);*/
  transform: rotateY(0deg);
  background-size: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  background-position-y: -2px; 
}

/*.stripe-next {
  transform: rotateY(0deg);
  transition: 0.6s transform ease-in;
}*/

.stripe-frame-1 {
  background-image: url(billboard-1.jpg);
  animation: 1.5s linear forwards frame1;
}

.stripe-frame-2 {
  background-image: url(billboard-2.jpg);
  animation: 1.5s linear forwards frame2;
}

.stripe-frame-3 {
  background-image: url(billboard-3.jpg);
  animation: 1.5s linear forwards frame3;
}

.firefox .stripe-frame-1,
.ie .stripe-frame-1 {
  animation: 0.6s linear forwards firefox-frame1;
}
.firefox .stripe-frame-2,
.ie .stripe-frame-2 {
  animation: 0.6s linear forwards firefox-frame2;
}
.firefox .stripe-frame-3,
.ie .stripe-frame-3 {
  animation: 0.6s linear forwards firefox-frame3;
}

@keyframes frame1 {
  0% { transform: rotateY(0deg); background-image: url(billboard-3.jpg); }
  40% { transform: rotateY(90deg); background-image: url(billboard-3.jpg); }
  40.1% { transform: rotateY(-90deg); background-image: url(billboard-1.jpg); }
  100% { transform: rotateY(0deg); background-image: url(billboard-1.jpg); }
}

@keyframes frame2 {
  0% { transform: rotateY(0deg); background-image: url(billboard-1.jpg); }
  40% { transform: rotateY(90deg); background-image: url(billboard-1.jpg); }
  40.1% { transform: rotateY(-90deg); background-image: url(billboard-2.jpg); }
  100% { transform: rotateY(0deg); background-image: url(billboard-2.jpg); }
}

@keyframes frame3{
  0% { transform: rotateY(0deg); background-image: url(billboard-2.jpg); }
  40% { transform: rotateY(90deg); background-image: url(billboard-2.jpg); }
  40.1% { transform: rotateY(-90deg); background-image: url(billboard-3.jpg); }
  100% { transform: rotateY(0deg); background-image: url(billboard-3.jpg); }
}

@keyframes firefox-frame1 {
  0% {transform: rotateY(-90deg);}
  100% {transform: rotateY(0deg);}
}

@keyframes firefox-frame2 {
  0% {transform: rotateY(-90deg);}
  100% {transform: rotateY(0deg);}
}

@keyframes firefox-frame3 {
  0% {transform: rotateY(-90deg);}
  100% {transform: rotateY(0deg);}
}

.board-wrapper {
  position: relative;
  width: 762px;
  max-width: calc(100% - 44px);
  margin: auto;
  perspective: 2000px;
}

.board-shdow {
  position: absolute;
  top: 3.6%;
  left: 4.6%;
  height: 46%;
  width: 90.8%;
  border: 2px solid #0041D1;
  box-sizing: border-box;
  z-index: 9;
}

.board__wrapper-mobile {
  display: none;
}

@media(max-width: 570px) {
  .board-wrapper {
    display: none;
  }

  .board__wrapper-mobile {
    display: block;
  }
}