@-webkit-keyframes swing
{
    15%
    {
        -webkit-transform: translateX(5px);
        transform: translateX(5px);
    }
    30%
    {
        -webkit-transform: translateX(-5px);
       transform: translateX(-5px);
    } 
    50%
    {
        -webkit-transform: translateX(3px);
        transform: translateX(3px);
    }
    65%
    {
        -webkit-transform: translateX(-3px);
        transform: translateX(-3px);
    }
    80%
    {
        -webkit-transform: translateX(2px);
        transform: translateX(2px);
    }
    100%
    {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
}
@keyframes swing
{
    15%
    {
        -webkit-transform: translateX(5px);
        transform: translateX(5px);
    }
    30%
    {
        -webkit-transform: translateX(-5px);
        transform: translateX(-5px);
    }
    50%
    {
        -webkit-transform: translateX(3px);
        transform: translateX(3px);
    }
    65%
    {
        -webkit-transform: translateX(-3px);
        transform: translateX(-3px);
    }
    80%
    {
        -webkit-transform: translateX(2px);
        transform: translateX(2px);
    }
    100%
    {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
}

#slider4:HOVER,#slider5:HOVER,#slider6:HOVER
{
        -webkit-animation: swing 1s ease;
         -moz-animation: swing 1s ease;
        animation: swing 1s ease;
        -webkit-animation-iteration-count: 1;
        animation-iteration-count: 1;
}

@keyframes dropHeader {
  0% {
    transform: translateY(-100%);
  }
  100% {
    transform: translateY(0);
  }
}

@keyframes dropHeader1 {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(0);
  }
}

@keyframes dropHeader2 {
  0% {
    transform: translateX(100%);
  }
  -100% {
    transform: translateX(0);
  }
}

.slidertext h1 {
  margin: 0px 0 0 0px; 
  white-space: nowrap;
  overflow: hidden;
  width: 10.2em;
  animation: type 6s steps(60, end); 
}

@keyframes type{ 
  from { width: 0; } 
}

header {
  /* background: #ccc; */
  /* padding: 30px; */
  
  /* this section calls the dropHeader animation we defined above */
  animation-name: dropHeader;
  animation-iteration-count: 1;
  animation-timing-function: ease-out;
  animation-duration: 1s;
}

.textanimateleft {
  /* background: #ccc; */
  /* padding: 30px; */
  
  /* this section calls the dropHeader animation we defined above */
  animation-name: dropHeader1;
  animation-iteration-count: 1;
  animation-timing-function: ease-out;
  animation-duration: 1s;
}

.textanimateright {
  /* background: #ccc; */
  /* padding: 30px; */
  
  /* this section calls the dropHeader animation we defined above */
  animation-name: dropHeader2;
  animation-iteration-count: 1;
  animation-timing-function: ease-out;
  animation-duration: 1s;
}
   

/* Added for aesthetics */
/* body {margin: 0;font-family: "Segoe UI", Arial, Helvetica, Sans Serif;} */
a {text-decoration: none; display: inline-block;}