/*
full names: tshidiso brandon khoza
alies: stbrandon
handler :@stbrandondoncanvas
phone: +27 (0) 67 8959 224
email: 8brandonkhoza@gmail.com 
https://github.com/tshidisobrandonkhoza 
*/
/*start slide*/ 
.main--Slider{
    z-index: 2;
    position: relative;
    top:0;
    left: 0;
    width: 100%;
    height:20em;   
    transform: translateY(14em);
}
.slideCover{ 
    z-index: 99;
    position: absolute;
    top:0;
    left:5%;
    width:80%;
    height: 100%;  
    background-color: #fff;
}
.slide{ 
    z-index: 97;
    position: absolute;
    top:0;
    left:5%;
    width:90%;
    height: 100%;  
}
#slideshowA { 

    /*background: yellow;*/
    position: absolute;
    top: 4em;
    left: 0;
    margin: 0 auto;  
    width: 15%; 
    height: 16em; 
    overflow:hidden;

    -webkit-transition: all 0.8s  ease-in-out;
    -moz-transition: all 0.8s  ease-in-out;
    -o-transition: all 0.8s  ease-in-out;
    transition:all .8s ease-in-out;
    border-style: none ; 
}
#slideshowB { 

    /*background: yellow;*/
    position: absolute;
    top: 0;
    left: 17%;
    margin: 0 auto;  

    width: 15%; 
    height: 10em; 
    overflow:hidden;

    -webkit-transition: all 0.8s  ease-in-out;
    -moz-transition: all 0.8s  ease-in-out;
    -o-transition: all 0.8s  ease-in-out;
    transition:all .8s ease-in-out;
    border-style: none ; 
}
#slideshowC { 

    /*background: yellow;*/
    position: absolute;
    top: 6em;
    left: 34%;
    margin: 0 auto;  

    width: 15%; 
    height: 14em; 

    -webkit-transition: all 0.8s  ease-in-out;
    -moz-transition: all 0.8s  ease-in-out;
    -o-transition: all 0.8s  ease-in-out;
    transition:all .8s ease-in-out;
    border-style: none ; 
}
#slideshowD { 

    /*background: yellow;*/
    position: absolute;
    top: 0;
    left: 51%;
    margin: 0 auto;  

    width: 15%; 
    height: 16em;
    overflow:hidden;

    -webkit-transition: all 0.8s  ease-in-out;
    -moz-transition: all 0.8s  ease-in-out;
    -o-transition: all 0.8s  ease-in-out;
    transition:all .8s ease-in-out;
    border-style: none ; 
}
#slideshowE { 

    /*background: yellow;*/
    position: absolute;
    top: 6em;
    left: 68%;
    margin:0 auto;  

    width: 15%; 
    height: 15em;
    overflow:hidden;

    -webkit-transition: all 0.8s  ease-in-out;
    -moz-transition: all 0.8s  ease-in-out;
    -o-transition: all 0.8s  ease-in-out;
    transition:all .8s ease-in-out;
    border-style: none ; 
}
#slideshowF { 

    /*background: yellow;*/
    position: absolute;
    top: 2em;
    left: 85%;
    margin: 0 auto;  

    width: 15%; 
    height: 18em;
    overflow:hidden;

    -webkit-transition: all 0.8s  ease-in-out;
    -moz-transition: all 0.8s  ease-in-out;
    -o-transition: all 0.8s  ease-in-out;
    transition:all .8s ease-in-out;
    border-style: none ; 
}
.scroll{ 
    top: 0;
    left: 0;
    z-index: 10;
    width: 100%;
    height: 100%;
    position: absolute;
    overflow: hidden;

    /*background: green;*/

} 
/*end slide*/
.imegs{

    position: absolute; 

    top: 50%;
    transform: translateY(-50%);
    right: 0;
    z-index: 10;
    width: 200px;
    height: 200px; 
    /*background-color: green;*/
    text-align: right;
}
.imegs img{
    /*display: none;*/
    z-index: 10;
    width: auto;
    height: 100%;
} 
/*end images*/
@media only screen and (max-width : 800px){
    #slideshowA img{
        position: absolute; 
        top: 0;
        left: 40%;
        
    }
       #slideshowB img{
        position: absolute; 
        top: 0;
        left: 15%;
        
    }
      #slideshowD img{
        position: absolute; 
        top: 0;
        left: 40%;
        
    }
       #slideshowE img{
        position: absolute; 
        top: 0;
        left: 15%;
        
    }
}