
   .swiper-container {
     clear: both;
     position: absolute;
     display: flex;

     width: 100%;

     height: 400px;
     top: 200px;

     justify-content: space-around;
/** change location of image slider, and
size based on screen size **/



   }



   .swiper-slide{
     background-repeat: no-repeat;
     background-position: center;
     background-size: contain;
     object-fit: contain;
     /* Center slide text vertically */
     display: -webkit-box;
     display: -ms-flexbox;
     display: -webkit-flex;
     display: flex;


     -webkit-box-pack: center;
     -ms-flex-pack: center;
     -webkit-justify-content: center;
     justify-content: center;
     -webkit-box-align: center;
     -ms-flex-align: center;
     -webkit-align-items: center;
      align-items: center;
   }

   .text{
     clear: both;
     position: absolute;
     display: flex;
     transition: 0.2s;

     width: 100%;
     height: 12%;
     margin-top: 4%;
     justify-content: space-around;

     -webkit-user-select: none; /* Safari */
     -ms-user-select: none; /* IE 10+ and Edge */
      user-select: none; /* Standard syntax */
      animation: textmove 1.5s ease-in forwards;
   }

   .text h1{
     font-family: BebasNeue-Regular;
     text-align: center;

     font-size: 70px;
     color: white;
}



@keyframes textmove {
  0%{
    opacity: 0;
    transform: scale(0);
  }


  100%{
    opacity: 1;
    transform: scale(1);
  }
}

@media screen and (max-width: 1560px){
  .text{
       margin-top: 5%;
  }

}



@media screen and (max-width: 880px){
    .swiper-container {
      top: 180px;
    }

      .text{
           margin-top: 8%;
         }
}


@media only screen and (max-width: 750px){
  .swiper-container{
    top: 120px;
    width: 75%;
    height: 350px;
    left: -12%;
  }

  .text{
       left: -10%;
       margin-top: 3%;
     }

     .text h1{
       font-size: 60px;
     }
}

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

    .swiper-container{
      top: 50px;
      width: 65%;
      left: -8%;
    }

    .text h1{

      font-size: 40px;
    }

}

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

    .swiper-container{
      width: 50%;
      left: -15%;
      top: 10px;
    }

    .text{
      margin-top: 8%;
      left: -15%;
    }
    .text h1{
      font-size: 25px;
    }


}


@media screen and (max-width: 320px){
    .swiper-container{
      display: none;
    }

    .text{
      display: none;  /** this until I can figure out how to get
                      the page contents to not display while the Hamburger
                      has been clicked **/
    }
}
