* {
    margin: 0;
    padding: 0;
  }
  
  #vmc-apps-ad {
    height: 100vh;
    width: 100vw;
  }
  
  #vmc-apps-ad-invitation {
    height: 100%;
    overflow: hidden;
    position: relative;
    width: 100%;
  }
  
  #cards-container {
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    -webkit-transition: top .6s ease-in-out;
    transition: top .6s ease-in-out;
    width: 100%;
  }
  #cards-container.expanded {
    top: 26%;
  }
  
  .background {
    display: block;
    width: 100%;
  }
  
  .cards {
    border-radius: 12px;
    height: 94%;
    left: -120%;
    position: absolute;
    -webkit-transition: left .6s ease-in-out, -webkit-transform .6s ease-in-out;
    transition: left .6s ease-in-out, -webkit-transform .6s ease-in-out;
    transition: left .6s ease-in-out, transform .6s ease-in-out;
    transition: left .6s ease-in-out, transform .6s ease-in-out, -webkit-transform .6s ease-in-out;
    -webkit-transform: rotateZ(-720deg);
    transform: rotateZ(-720deg);
  }
  .cards.type-1.show {
    left: 5%;
    top: 4%;
    -webkit-transform: rotateZ(-5deg);
    transform: rotateZ(-5deg);
  }
  .cards.type-2.show {
    left: 26%;
    top: 2%;
    -webkit-transform: rotateZ(-2deg);
    transform: rotateZ(-2deg);
  }
  .cards.type-3.show {
    left: 47%;
    top: 2%;
    -webkit-transform: rotateZ(2deg);
    transform: rotateZ(2deg);
  }
  .cards.type-cta.show {
    left: 68%;
    top: 4%;
    -webkit-transform: rotateZ(5deg);
    transform: rotateZ(5deg);
  }
  
  .expanded .cards.show[data-pos='1'] {
    left: 20%;
    -webkit-transform: rotateZ(-5deg);
    transform: rotateZ(-5deg);
  }
  .expanded .cards.show[data-pos='2'] {
    left: 41%;
    top: 0;
    -webkit-transform: rotateZ(0deg);
    transform: rotateZ(0deg);
  }
  .expanded .cards.show[data-pos='3'] {
    left: 62%;
    -webkit-transform: rotateZ(5deg);
    transform: rotateZ(5deg);
  }
  
  .expanded .cards.off {
    left: 120%;
    -webkit-transform: rotateZ(720deg);
    transform: rotateZ(720deg);
  }
  .expanded .cards.hidden-to-initial-place {
    opacity: 0;
    -webkit-transition: none;
    transition: none;
  }
  
  .cards img {
    display: block;
    height: 100%;
  }
  
  #point1, #point2, #point3, #point4 {
    width: 28.8%;
    height:auto;
    left: 0;
    position: absolute;
    top: 0;
    -webkit-transition: opacity .5s;
    transition: opacity .5s;
    animation: pointAnim  .5s infinite linear;
    -webkit-animation: pointAnim  .5s infinite linear;
  }
  
  .transition {
    opacity: 0;
  }
  
  @keyframes pointAnim {
      0%{-webkit-transform: scale(1.1);transform: scale(1.1)}
      50%{-webkit-transform: scale(0.9);transform: scale(0.9)}
      100%{-webkit-transform: scale(1.1);transform: scale(1.1)}
  }
  
  @-webkit-keyframes pointAnim {
      0%{-webkit-transform: scale(1.1)}
      50%{-webkit-transform: scale(0.9)}
      100%{-webkit-transform: scale(1.1)}
  }