.orientation-msg-container, .device-msg-container{
  width: 100%;
  height: 100%;
  display: none;
  position: fixed;
  background-color: #2c2a54;
  top: 0;
}
.orientation-msg-text, .device-msg-text{
  font-size:18px;
  font-family: "Arial";
  color: #fff;
  text-align: center;
  position: absolute;
  top: 50%;
  transform: translate(0,-50%);    
  margin: 40px 0 0;
  left: 0;
  right: 0;
  text-align: center;
  display: block;
  opacity: 0;
}
.phone {
  position: relative;
  width: 0;
  height: 0;
  border: 0 solid #11101c;
  background: #fff;
  border-radius: 4px;
  box-sizing: border-box;
  margin: 20px auto;
}
.orientation-msg-container[data-orientation="portrait"] .phone{
margin: 70px auto;
}
.phone img {
  display: block;
  margin: 0 auto;
  opacity: 0;
  left: 0;
  right: 0;
  top: 50%;
  transform: translate(0,-50%);
  position: absolute;
}
.phone {
  -webkit-animation: sizeIncrease .5s forwards ease,  borderIncrease .5s .5s forwards ease,  rotateRight .7s 1s forwards ease;
      animation: sizeIncrease .5s forwards ease,  borderIncrease .5s .5s forwards ease,  rotateRight .7s 1s forwards ease;
}
.orientation-msg-container[data-orientation="portrait"] .phone{
-webkit-animation: sizeIncrease2 .5s forwards ease,  borderIncrease .5s .5s forwards ease,  rotateRight .7s 2s forwards ease;
      animation: sizeIncrease2 .5s forwards ease,  borderIncrease .5s .5s forwards ease,  rotateRight .7s 1s forwards ease;
}
.phone img {
-webkit-animation: fadeIn .5s .8s forwards ease;
      animation: fadeIn .5s .8s forwards ease;
}

.orientation-msg-text  {
-webkit-animation: fadeIn .5s 1.3s forwards ease;
      animation: fadeIn .5s 1.3s forwards ease;
}
/* KEYFRAMES
------------------------------------------- */
/* Animate width + height */
@keyframes sizeIncrease2 {
  0% {
    height: 0;
    width: 10px;
  }
  50% {
    height: 70px;
    width: 10px;
  }
  100% {
    height: 70px;
    width: 120px;
  }
}
@keyframes sizeIncrease {
  0% {
    width: 0;
    height: 10px;
  }
  50% {
    width: 70px;
    height: 10px;
  }
  100% {
    width: 70px;
    height: 120px;
  }
}
@keyframes borderIncrease {
  100% {
      border-width: 8px;
  }
}
@keyframes fadeIn {
  100% {
    opacity: 1;
  }
}
@keyframes rotateRight {
  100% {
    -webkit-transform: rotate(90deg);
            transform: rotate(90deg);
  }
}

@media(max-width:330px){
    .phone{
      margin-top: 10px;
    }
    .orientation-msg-text, .device-msg-text {
      font-size: 14px;
    }
}
@media(max-width:280px){
    .phone{
      margin-top: 0;
    }
}