@media only screen and (max-width: 1024px)
{
  
.text
{

  font-family: "Impact, Charcoal, sans-serif";
   font-style: italic;
   color: blue;
  font-size: 20px;
  color:#313131;


      -webkit-animation:colorchange 20s infinite alternate;
      
      
    }

    @-webkit-keyframes colorchange {
      0% {
        
        color: blue;
      }
      
      10% {
        
        color: #8e44ad;
      }
      
      20% {
        
        color: #1abc9c;
      }
      
      30% {
        
        color: #d35400;
      }
      
      40% {
        
        color: blue;
      }
      
      50% {
        
        color: #34495e;
      }
      
      60% {
        
        color: blue;
      }
      
      70% {
        
        color: #2980b9;
      }
      80% {
     
        color: #f1c40f;
      }
      
      90% {
     
        color: #2980b9;
      }
      
      100% {
        
        color: pink;
      }
    }
.logo{
  width: 40%;
  height: 94px;

}

} 
.text
{

  font-family: "Impact, Charcoal, sans-serif";
   font-style: italic;
   color: blue;
  font-size: 25px;
  color:#313131;
  font-weight: bold;

      -webkit-animation:colorchange 20s infinite alternate;
      
      
    }

    @-webkit-keyframes colorchange {
      0% {
        
        color: blue;
      }
      
      10% {
        
        color: #8e44ad;
      }
      
      20% {
        
        color: #1abc9c;
      }
      
      30% {
        
        color: #d35400;
      }
      
      40% {
        
        color: blue;
      }
      
      50% {
        
        color: #34495e;
      }
      
      60% {
        
        color: blue;
      }
      
      70% {
        
        color: #2980b9;
      }
      80% {
     
        color: #f1c40f;
      }
      
      90% {
     
        color: #2980b9;
      }
      
      100% {
        
        color: pink;
      }
    }
.logo{
  width: 40%;
  height: 15%;
}

.slider,
.mySlides {
    /* Images default to Center Center. Maybe try 'center top'? */
    background-position: center center;
    display: block;
    width: 100%;
    height: 500px;
    /* height: 100vh; *//* If you want fullscreen */
    position: relative;
    background-size: cover;
    background-repeat: no-repeat;
    background-color: #000;
    overflow: hidden;
    -moz-transition: transform .4s;
    -o-transition: transform .4s;
    -webkit-transition: transform .4s;
    transition: transform .4s;
}

.banner{
    position: absolute;
    bottom: 0;
    height: 60px;
    width: 100%;
    background-color: rgba(0,0,0,0.4);
}
.left-arrow{
    position: absolute;
    left: 0;
    top: 50%;
    background-color: grey;
    width: 30px;

}
.right-arrow{
    position: absolute;
    right: 0;
    top: 50%;
    background-color: grey;
    width: 30px;

}