/* ==========================================================================
   Author's custom styles
   ========================================================================== */



   #slideshow {
     position:relative;
      width: 80%;
      margin: auto;
     }

   img {
     max-width: 100%;
     max-height: 400px;
     margin: auto;
   }

  .navBTN {
    opacity: 0.3;
  }
  .navBTN:hover {
    opacity: 1;
  }

  .playPause {
    position: absolute;
    bottom: 10px;
    left: 48%
  }

   .arrowright {
     text-align: right;
     position: absolute;
     right: 0;
     width:50px;
     height: 50px;
     top: 42%;
   }

   .arrowleft {
    position: absolute;
    left: 0;
     width:50px;
     height: 50px;
     top: 42%;
    }

     @media all and (max-width :768px) {
       #slideshow {
          width: 100%;
         }
       .playPause {
         position: absolute;
         bottom: 10px;
         left: 45%;
       }
     }
     @media all and (max-width :450px) {
       .playPause {
         left: 42%;
       }
     }