.classOne{
    position: fixed; 
    top: 0; 
    left: 0; 
    height: 100%; 
    z-index: 12;
    background-color: white; 
    visibility: visible; 
    width: 100%;
    opacity: 1;
    
	 

  }
.classTwo{
    opacity: 0;
    transition: all 0.9s ease-out;
    pointer-events: none;
}
section#homepage .clickme
{
    cursor: pointer;
    
}

 
section#homepage{
  padding: 0;
  position: absolute;
  top: 48vh;
  left: calc(20vw - 80px);
  width: 320px;
  display: inline-block;
  max-width: 100%;
  
  cursor: pointer;
  
}
 /* section#homepage img{
  max-width: 100%;
  height: auto;
  position: absolute;
  
}  */

section#homepage img:hover{
    opacity: 0.7;
}

.chevron {
  /* display: block; */
  /* top: 48.35vh; */
  
  color: red;
  
  margin-top: 0.30em;
  width: 6.5px;
  height: 6.5px;
  position: relative;
  border-left: 1.5px solid red;
  border-bottom: 1.5px solid red;
  transform: rotate(-135deg); 
  -moz-transform: rotate(-135deg);
  -ms-transform: rotate(-135deg);
  
}
.out-chevron{
  
    right: 0;
    top: 0;
    width: 10px;
    height: 100%;
    position: absolute;
    -webkit-animation-name: bounceball;
    -webkit-animation-duration: 1s;
    -webkit-animation-delay: 0s;
    -webkit-animation-play-state: running;
    -webkit-animation-fill-mode: forwards;
    -moz-animation-name: bounceball;
    -moz-animation-duration: 1s;
    -moz-animation-delay: 0s;
    -moz-animation-play-state: running;
    -moz-animation-fill-mode: forwards;
    -ms-animation-name: bounceball;
    -ms-animation-duration: 1s;
    -ms-animation-delay: 0s;
    -ms-animation-play-state: running;
    -ms-animation-fill-mode: forwards;
    animation-name: bounceball;
    animation-duration: 1s;
    animation-delay: 0s;
    animation-play-state: running;
    animation-fill-mode: forwards;
} 
i {
    transition-property: transform;
    transition-duration: 1s;

}

i:hover {
    animation-name: rotate; 
    animation-duration: 2s; 
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

@keyframes rotate {
    from {transform: rotate(0deg);}
    to {transform: rotate(360deg);}
}

@-webkit-keyframes bounceball {
  from {
    transform: translateX(-10px);
    opacity: 0;
  }
  to {
    transform: translateX(19px);
    opacity: 1;
  }
}
@-moz-keyframes bounceball {
  from {
    transform: translateX(-10px);
    opacity: 0;
  }
  to {
    transform: translateX(19px);
    opacity: 1;
  }
}
@-ms-keyframes bounceball {
  from {
    transform: translateX(-10px);
    opacity: 0;
  }
  to {
    transform: translateX(19px);
    opacity: 1;
  }
}
@keyframes bounceball {
  from {
    transform: translateX(-10px);
    opacity: 0;
  }
  to {
    transform: translateX(19px);
    opacity: 1;
  }
}

@media only screen and (max-width: 1300px){
    
    section#homepage {
		left: calc(20vw - 75px);
		
    }
   
}


@media only screen and (max-width: 1080px){
   
    section#homepage  {
        
        left: calc(20vw - 45px);
       
    }
   
}
@media only screen and (max-width: 768px){
    section#homepage {
       
        left: calc(20vw - 20px);
       
    }
    
}
@media only screen and (max-width: 523px){
    section#homepage {
        
        left: calc(20vw - 10px);
        
    }
   
}

@media only screen and (max-width: 430px){
    section#homepage{
        left: calc(30vw - 90px);
       
    }
    
}

@media only screen and (max-width: 330px){
    section#homepage{
        left: calc(30vw - 70px);
       
    }
    section#homepage img{
      width: 210px;
    }
    .chevron{
      width: 4.8px;
      height: 4.8px;
      border-left: 1.7px solid red;
      border-bottom: 1.7px solid red;
      margin-top: 0.47em;
    }
    /* i {
      font-size: 0.8em !important;
    } */
  @-webkit-keyframes bounceball {
    from {
      transform: translateX(-110px);
      opacity: 0;
    }
    to {
      transform: translateX(-80px);
      opacity: 1;
    }
  }
  @-moz-keyframes bounceball {
    from {
      transform: translateX(-110px);
      opacity: 0;
    }
    to {
      transform: translateX(-80px);
      opacity: 1;
    }
  }
  @-ms-keyframes bounceball {
    from {
      transform: translateX(-110px);
      opacity: 0;
    }
    to {
      transform: translateX(-80px);
      opacity: 1;
    }
  }
  @keyframes bounceball {
    from {
      transform: translateX(-110px);
      opacity: 0;
    }
    to {
      transform: translateX(-80px);
      opacity: 1;
    }
  }
    
}