*{

    margin:0;

    padding:0;

    text-decoration: none;

}

body{

    margin:0 auto;

    width:100%;



}

.slider{

     overflow: hidden;

     height: 400px;

}



@media (max-width:776px){

.slider{

     overflow: hidden;

     height:260px!important;

}
.slider figure .s{
  display: none!important;
}

}

@media (max-width:991px){

.slider{

     overflow: hidden;

     height: 260px!important;

}
.slider figure .s{
  display: none;
}
.slider figure img{

  width: 81%;

  

  float: left;

}

}

.slider figure div{
 width:11%;
 float:left;
     

     

}

.slider figure img{

    width: 500px;

   margin-left:auto;
   margin-right:auto; 

    float: left;

}

.s{
  display: block;
}
.slider figure{

    position:relative;

    width:500%;

    margin:0px;

    left:0;

   

    animation:16s sathish infinite  alternate  ;

}

@keyframes sathish{

    0%{left:0%;}

    10%{left:0%;}

    12%{left:-100%;}

    22%{left:-100%;}

    24%{left:-200%;}

    34%{left:-200%;}

    36%{left:-300%;}

    46%{left:-300%;}

    48%{left:-400%;}

    58%{left:-400%;}

    60%{right:-300%;}

    70%{right:-300%;}

    72%{left:-200%;}

    82%{lef:-200%;}

    84%{right:-100%;}

    94%{right:-100%;}

    98%{left:0%;}

    100%{left:0%;}





   

}


.dis1{

    display:none;

    width:30%;

    position:relative;

    top:234px;

    left:200px;

    background-color: #454545;

    color:white;

    font-family: 'Times New Roman', Times, serif;



}

/*  modals====================================*/



/* The Modal (background) */

.modal {

  display: none; /* Hidden by default */

  position: fixed; /* Stay in place */

  z-index: 50; /* Sit on top */

  padding-top: 100px; /* Location of the box */

  left: 0;

  top: 0;

  width: 100%; /* Full width */

  height: 100%; /* Full height */

  overflow: auto; /* Enable scroll if needed */

  background-color: rgb(0,0,0); /* Fallback color */

  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */

}



/* Modal Content */

.modal-content {

  background-image: linear-gradient(45deg, #5a2911, #d10707d4)!important;
  

  

  margin: auto;

  padding: 0;

  border: 1px solid #888;

  width:auto;

  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);

  -webkit-animation-name: animatetop;

  -webkit-animation-duration: 0.4s;

  animation-name: animatetop;

  animation-duration: 0.4s;
  animation-name:animatetop;

}



/* Add Animation */

@-webkit-keyframes animatetop {

  from {top:-300px; opacity:0} 

  to {top:0; opacity:1}

}



@keyframes animatetop {

  from {top:-300px; opacity:0}

  to {top:0; opacity:1}

}



/* The Close Button */

.close {

  color: rgb(243, 68, 14);

  float: right;

  font-size: 28px;

  font-weight: bold;

}



.close:hover,

.close:focus {

  color: #000;

  text-decoration: none;

  cursor: pointer;

}



.modal-header {

  padding: 2px 16px;

 

  letter-spacing: .2px;
  background-image: linear-gradient(45deg, #c31616, #d07d06);
  line-height: 16px;

}


.modal-body {padding: 2px 16px;
 color:#454545;
font-family: 'Times New Roman', Times, serif;
}



.modal-footer {

  padding: 2px 16px;


  letter-spacing: .2px;
  background-image: linear-gradient(45deg, #d07d06, #c31616);


  

}