/******Slider****/
  .anim-slider
  {
  list-style-type: none;
  overflow: hidden;
  text-align: center;
  top: 0;
  left: 0;
  
    margin: 0px 10%;
    position: relative;
    width: 80%;
    height: auto;
    padding-bottom: 58%;
    box-shadow: 0 0 50px #000;
    border: 2px solid #fff;
  
  }
  /********Slides**********/
  .anim-slide
  {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  }
  .anim-slide *
  {
  position: absolute;
  opacity: 0;
  }
  /*****Current Slide******/
  .anim-slide-this
  {
  z-index: 100;
  } 
  .anim-slide-this *
  {
  opacity: 1;
  }
  /***********************************************************/
  /* Initial position and style of each element in the Slide */
  /***********************************************************/
  





  /*******Arrows********/
  nav.anim-arrows>span
  {
  position: absolute;
  top: 48%;
  z-index: 2000;
  opacity: 0;
  -webkit-transition: opacity .4s ease-in;
  -moz-transition: opacity .4s ease-in;
  -ms-transition: opacity .4s ease-in;
  -o-transition: opacity .4s ease-in;
  transition: opacity .4s ease-in;
  }
  nav.anim-arrows>span.anim-arrows-prev,
  nav.anim-arrows>span.anim-arrows-next
  {
  color: #fff;
  position: absolute;
  padding: 2px 10px;
  }
  nav.anim-arrows>span.anim-arrows-prev
  {
  left: 1%;
  }
  nav.anim-arrows>span.anim-arrows-next
  {
  right: 1%;
  }
  .anim-slider:hover>nav.anim-arrows>span
  {
  opacity:1;
  cursor: pointer;
  }
  /********Dots************/
  .anim-dots
  {
    width: 80px;
  margin: 0 10% 0 70%;
  position: absolute;
  text-align: center;
  left: 0px;
  bottom: 20px;
  z-index: 2000;
  }
  .anim-dots span
  {
  display: inline-block;
  position: relative;
  width: 14px;
  height: 14px;
  margin: 3px;
  cursor: pointer;
  box-shadow: 
  	1px 1px 1px rgba(0,0,0,0.1) inset, 
  	1px 1px 1px rgba(255,255,255,0.1);
  }
  
  .anim-dots span:after
  {
  content: '';
  width: 10px;
  height: 10px;
  position: absolute;
  top: 2px;
  left: 2px;
  background: rgba(255,255,255,0.5);
  border-radius: 50%;
  }
  
  .anim-dots span.anim-dots-this:after
  {
  content: '';
  width: 10px;
  height: 10px;
  position: absolute;
  top: 2px;
  left: 2px;
  background: #fff;
  }

  .delay0-5s{-webkit-animation-delay:1s;animation-delay:.5s;}
  .delay1s{-webkit-animation-delay:1s;animation-delay:1s;}
  .delay1-5s{-webkit-animation-delay:1.5s;animation-delay:1.5s;}
  .delay2s{-webkit-animation-delay:2s;animation-delay:2s;}
  .delay2-5s{-webkit-animation-delay:2.5s;animation-delay:2.5s;}
  .delay3s{-webkit-animation-delay:3s;animation-delay:3s;}
  .delay3-5s{-webkit-animation-delay:3.5s;animation-delay:3.5s;}
  .delay4s{-webkit-animation-delay:4s;animation-delay:4s;}
  .delay4-5s{-webkit-animation-delay:4.5s;animation-delay:4.5s;}
  .delay5s{-webkit-animation-delay:5s;animation-delay:5s;}
  .delay5-5s{-webkit-animation-delay:5.5s;animation-delay:5.5s;}
  .delay6s{-webkit-animation-delay:6s;animation-delay:6s;}
  .delay6-5s{-webkit-animation-delay:6.5s;animation-delay:6.5s;}
  .delay13s{-webkit-animation-delay:13s;animation-delay:13s;}







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

}

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


} 

@media only screen and (max-width : 485px) {  
 .anim-dots
  {
   display: none;
  }

} @media only screen and (max-width : 325px) {  
 .anim-dots
  {
    width: 80px;
  margin: 0 10% 0 70%;
  position: absolute;
  text-align: center;
  left: 0px;
  bottom: 20px;
  z-index: 2000;
  }

}