/*
full names: tshidiso brandon khoza
alies: stbrandon
handler :@stbrandondoncanvas
phone: +27 (0) 67 8959 224
email: 8brandonkhoza@gmail.com 
https://github.com/tshidisobrandonkhoza 
*/
/*start main cover*/
.coverPage{
    position: relative;
    top:0;
    left: 0;
    width: 100%;
    height: 780px; 
}
.slide{
    z-index: 97;
    position: absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background-color: #000;
}
/*end main cover*/
/*start controls*/
.snav{

    z-index: 99;
    position: absolute;
    bottom: 2em;
    right: calc(40% - 6em); 
    cursor: pointer;
    width: 2.2em;
    height: 2.2em;
    border-radius: 100%;
    border: 1px solid #fff;
    padding: 3px;

}
#nav-right{
    right: calc(40% - 10em); 
    /*    width: 8em;
        height: 6em;*/
}
#nav-right img,#nav-left img{
    margin: 10%;
    width: 80%;
    height: 80%;

    opacity: 0.6;

    -webkit-transition: all 0.4s  ease-in-out;
    -moz-transition: all 0.4s  ease-in-out;
    -o-transition: all 0.4s  ease-in-out;
    transition: all 0.4s ease-in-out;
}
#nav-right:hover scont,#nav-left:hover scont{ 
    opacity: 0.9;

    background-color: rgba(25,25,25, .8);
    -webkit-transition: all 0.4s  ease-in-out;
    -moz-transition: all 0.4s  ease-in-out;
    -o-transition: all 0.4s  ease-in-out;
    transition: all 0.4s ease-in-out;
}

/*end controlsr*/
#slideshow { 
    position: absolute;
    top: 0;
    left: 0;
    margin: 0 auto;  
    width: 100%; 
    height: 100%; 
    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 0.8s ease-in-out;
    border-style: none ; 
} 
.scroll{ 
    top: 0;
    left: 0;
    z-index: 10;
    width: 100%;
    height: 100%;
    position: absolute;
    overflow: hidden;
}
/*start image selection*/
.imegs{
    position: absolute; 
    top: 0;
    right: 0;
    z-index: 10;
    width: 100%;
    height: auto;
}
.imegs img{
    z-index: 10;
    min-width: 100%;
    height: auto;
}
.imegs::after { 

    position: absolute;
    content: " ";
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    background-color: rgba(25,25,25,.3);
}
/*end image selection*/
/*end content selection*/
.scont{
    text-align: left;
    z-index: 15;
    width: 40%;
    height: 300px;
    position: absolute; 
    top: calc(100% - 300px);
    left: 60%;    
    transform: translate(calc(-60%),calc(- 100% - 300px));
    background-color:#191919;
    transition: all 0.4s ease-in-out;
}
.scont:hover{
    background-color: rgba(25,25,25, .8);
    transition: all 0.4s ease-in-out;
}
.theText{ 
    display: block;
    position: relative;
    top: 15%;
    left: 8%;
    width: 70%;
    height: 70%; 
}
.theText h1{
    font-size: 1.6em;
    margin: .2em;
    color: #fff;
    line-height: 100%;
}
.theText p{

    font-size: 1.2em;
    margin: .6em;
    color: #fff;
}
.theCount{
    position: absolute;
    bottom: 2em;
    right: 10%;
    width: auto;
    height: auto; 
}
.theCount span{
    font-size: 1em;
    color: #fff;
}
.theCount span:nth-child(1){
    font-size: 1.2em;
    color: #fff;
}

.ouT{
    position: absolute;
    content: " ";
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-image: url(../imgs/slide/connectkonkesacompany.jpg);
}
@media only screen and (max-width : 1366px) {
    .scont{

        width: 50%;
    }
    .theCount{ 
        right: 30%;
    }
}
@media only screen and (max-width : 1023px) {
    /*    .scont{
            display: none;
        }
        .theText{ 
            display: none;
        }*/
    .theCount{
        position: absolute;
        bottom: 1.8em;
        right: 2em;
    }
    .scont{
        top: calc(100% - 300px);
        left: 50%;    
        text-align: left;
        z-index: 15;
        width: 50%;
 
    }
    .theText{ 
        display: block;
        position: relative;
        top: 15%;
        left: 8%;
        width: 84%;
    }
    .snav{
        right: calc(30% - 5em);  
        width: 3em;
        height: 3em; 
        bottom: 2.5em;

    }
    #nav-right{
        right: calc(30% - 10em);  
    }
}
@media only screen and (max-width : 900px) {
    .scont{
        top: calc(100% - 300px);
        left: calc(100% - 35em);    
        text-align: left;
        z-index: 15;
        width: 35em;
    }
}
@media only screen and (max-width : 700px) {

    .snav{
        right: calc(40% - 5em);  
    }
    #nav-right{
        right: calc(40% - 10em);  
    }
}
@media only screen and (max-width : 600px) {

    .coverPage{ 

        height: 640px; 
    }
    .imegs img{
        z-index: 10;
        min-height: 100%;
        height: auto;
    }
    .snav{
        right: calc(50% - 5em);   

    }
    #nav-right{
        right: calc(50% - 10em);  
    }
    .scont{
        top: calc(100% - 300px);
        left: 0;    
        text-align: left;
        z-index: 15;
        width: 100%;

        transform: translate(0,0);
    }
    .theText{ 
        display: block;
        position: relative;
        top: 3.5em;

        left: 4%;
        width: 92%;
    }
}

@media only screen and (max-width : 414px) {
    .scont{
        top: calc(calc(100% - 300px) - 4em );

        height:calc(300px + 4em);
    }

    .snav{ 
        bottom: 4em;

    }
}
@media only screen and (max-height : 600px) {

    .coverPage{ 
        height: 412px; 
    }
    .snav{
        right: calc(30% - 5em);   

    }
    #nav-right{
        right: calc(30% - 10em);  
    }


}
@media only screen and (max-height : 400px) {
  .scont{
        top: calc(100% - 275px);

        height:calc(275px);
    }
    .coverPage{ 
        height: 280px; 
    }
    .snav{
        right: calc(30% - 5em);   

    }
    #nav-right{
        right: calc(30% - 10em);  
    }
}