.flex-5 {
    flex: 5;
  }
  
  .flex-7 {
    flex: 7;
    margin-left: 1px;
    margin-top: 1px;
  }
  
  .padding--xs {
    padding: 8px;
  }
  
  .padding--xxs {
    padding: 8px;
  }
  
  /* body {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: #efefef;
    height: 88vh;
  } */
  
  .h3ad {
    font-size: 24px;
    color: #fff;
    font-family: "Avenir Next Condensed";
    text-transform: uppercase;
    line-height: 1;
    margin: 0;
    font-weight: 800;
    animation: text-fade-in 8000ms ease backwards;
    animation-iteration-count: infinite;
  }
  
  .pad {
    color: #fff;
    font-size: 14px;
    font-family: "Avenir Next";
    margin: 0;
    margin-top: 150px;
    margin-left: -155px;
    line-height: 1.2;
    animation: text-fade-in-2 8000ms ease backwards;
    animation-iteration-count: infinite;
  }
  
  .aad.button {
    display: block;
    background-color: #21CE99;
    /* background-color: #2c394693; */
    height: 34px;
    width: 100px;
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-left: -125px;
    margin-top: 150px;
    justify-content: center;
    text-align: center;
    color: #fff;
    border-radius: 34px;
    font-family: "Avenir Next Condensed";
    font-weight: 600;
    animation: button-fade-in 8000ms ease backwards;
    animation-iteration-count: infinite;
  }
  
  .ad-container {
    height: 250px;
    width: 355px;
    /* background: linear-gradient(to bottom right, #002060, #004FEC); */
    background: transparent;
    display: flex;
    flex-direction: row;
    overflow: hidden;
    }
    
    .imgad.screenshot {
      height: 250px;
      width: auto;
      /* margin-top: 10px; */
      /* margin-left: 12px; */
      
      animation: screenshot-fade-in 8000ms ease backwards;
      animation-iteration-count: infinite;
      transform-origin: bottom left;
    }
    
    .imgad.logo {
      height: 18px;
      width: auto;
      
      animation: logo-fade-in 8000ms ease backwards;
      animation-iteration-count: infinite;
    }
  
  
  @keyframes logo-fade-in {
    0% {
      opacity: 0;
      transform: translateY(8px);
    }
    
    8%, 94% {
      opacity: 1;
      transform: translateY(0);
    }
    
    100% {
      opacity: 0;
    }
  }
  
  @keyframes text-fade-in {
    0%, 2% {
      opacity: 0;
      transform: translateY(8px);
    }
    
    10%, 94% {
      opacity: 1;
      transform: translateY(0);
    }
     
    100% {
      opacity: 0;
    }
  }
  
  @keyframes text-fade-in-2 {
    0%, 4% {
      opacity: 0;
      transform: translateY(8px);
    }
    
    12%, 94% {
      opacity: 1;
      transform: translateY(0);
    }
    
      
    100% {
      opacity: 0;
    }
  }
  
  @keyframes button-fade-in {
    0%, 6% {
      opacity: 0;
      transform: translateY(8px);
    }
    
    14%, 94% {
      opacity: 1;
      transform: translateY(0);
    }
    
    100% {
      opacity: 0;
    }
    
  }
  
  @keyframes screenshot-fade-in {
    0%, 10% {
      opacity: 0;
      transform: translate(-24px, 8px) rotate(-30deg);
    }
    
    20%, 94% {
      opacity: 1;
      transform: translateY(0);
    }
    
    100% {
      opacity: 0;
    }
  }
  
  /* Screen Res */

  @media screen and (max-width: 1680px) {

   

  }

  @media screen and (max-width: 736px) {

    

  }

  @media screen and (max-width: 480px) {

		

	}

  @media screen and (max-width: 360px) {

   

  }