/*#slideshow img{
    
    float: left;
    height: 100%;
    width:1000px;

    
}
*/

#outerslidshow{
    
    width:80%;
    overflow: hidden;
    background-color:blue;
    transform: translate(10%);
    border: 2px solid red;
    height: 200px;
    
    
}


#slideshow{
    
    position: relative;
    background-color: red;
    width:100%;
    height: 300px;
    animation-name: slideshow;
    animation-duration: 10s;
    animation-iteration-count: infinite;
}
@keyframes slideshow{
    
    
    0%{
        
       background: url(sample%202.jpg) no-repeat ;
        
        background-size:100% 100%;
    }
    10%{
        
        
       background: url(sample%203.jpg) no-repeat ;
        background-size:100% 100%;
    }
    20%{
           background: url(sample%204.jpg) no-repeat ;
        background-size:100% 100%;
     }
    35%{
        
          background: url(sample%204.jpg) no-repeat ;
        background-size:100% 100%;
    
    }
    45%{
        
   background: url(sample%205.jpg) no-repeat ;
        background-size:100% 100%;
    
    }
    55%{
        
   background: url(sample%207.jpg) no-repeat ;
        background-size:100% 100%;
    
    }
    
    80%{
        
   background: url(sample%207.jpg) no-repeat ;
        background-size:100% 100%;
    
    }
    
    100%{
        
   background: url(sample1.jpg) no-repeat ;
        background-size:100% 100%;
    
    }
    
    
    
}


#gallary{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    width: 100%;
    margin: 0;
    padding: 0;
    
}


#gallary div{
    width: 20%;
    margin: 2%;
    height: auto;   
}


#gallary div img{
    width: 100%;
    height: 50%;
    margin: 0;
    padding: 0;
    
}