/*

full names: tshidiso brandon khoza
alies: stbrandon
handler :@stbrandondoncanvas
phone: +27 (0) 67 8959 224
email: 8brandonkhoza@gmail.com 
https://github.com/tshidisobrandonkhoza 
*/

/*start direction*/
#nav-right{ 
    position: absolute;

    top:50%;

    left: calc(50% + 300px - 4em); 
    transform: translate(50%,-50%);
    z-index: 99;  
    width: 5em;
    height: 5em; 
}
#nav-left{ 
    position: absolute;
    top:50%;
    left:  calc(50% - 300px);
    transform: translate(-50%,-50%);
    z-index: 99;  
    width: 4em;
    height: 4em; 
} 
#nav-right img{
    width: 5em;
    height: 5em; 
}
#nav-left img{
    width: 4em;
    height: 4em; 
}
/*end direction*/

/*start slide*/ 
.main--Slider{
    z-index: 2;
    position: relative;
    top:0;
    left: 0;
    width: 100%;
    height:600px;  
    background-color: rgba(1,1,1,.6);
}
.slide{ 
    z-index: 97;
    position: absolute;
    top:0;
    left:0;
    width:100%;
    height: 100%;  
}
#slideshow { 
    position: absolute;
    top: 0;
    left: 0;
    margin: 0 auto;  
    width: 100%; 
    height: 100%; 
    overflow:hidden; 
    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;

}

.scont{ 
    width: 100%;
    height: 100%;
    position: absolute; 
    top: 0;
    left: 0;    
}  
.slide_text h1{ 
    text-align: center;
    z-index: 15;
    width: 100%;;
    height: auto;
    position: absolute;
    top: 0;
    left: 0;
    font-weight:900;
    font-size: 4.4em;
    color: #20a7d6;
    transition: all 1s ease-in-out;

    -webkit-text-fill-color: transparent;
    -webkit-text-stroke:   #20a7d6;
    -webkit-text-stroke-width: 1.5px;
}
.slide_text p{ 
    z-index: 15;
    width: 100%;
    height: auto;
    position: absolute;
    bottom: 1.6em;
    left: 0;

    font-weight:700;
    font-size: 3em;
    transition: all 1s ease-in-out;

    color: #20a7d6;
    
    -webkit-text-fill-color: transparent;
    -webkit-text-stroke:   #20a7d6;
    -webkit-text-stroke-width: .5px;
}

/*end slide*/


/*start images*/

.imegs{

    position:absolute;

    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); 
    z-index: 10;
    width: 500px;
    height: 500px;  
    text-align: right;
}
.imegs img{ 
    z-index: 10;
    width: 100%;
    height: 100%;
}


@media only screen and (max-width : 1023px) {
    .slide_text h1{
        top: .2em;
        font-size: 4em;
    }   
    .slide_text p{ 
        bottom: 1.6em;
        background-color: rgba(31,167,214,.2);
        color: #fff;
    }
}
@media only screen and (max-width : 900px) {



    #nav-right{  
        left: calc(50% + 200px - 3em); 
        transform: translate(50%,-50%); 
        width: 4em;
        height: 4em; 
    }

    #nav-left{  
        left:  calc(50% - 200px);
        transform: translate(-50%,-50%);

        width: 3em;
        height: 3em; 
    } 
    #nav-right img{
        width: 4em;
        height: 4em; 
    }


    #nav-left img{
        width: 3em;
        height:3em; 
    }

    .main--Slider{ 
        height:400px;  
    }
    .slide_text h1{ 
        top: .2em;
        width: 100%;  
        left: 0;
        text-align: center;

        font-size: 3.8em;
    }
    .slide_text p{ 
        bottom: 2em;
        font-size: 1.8em;
    }    
    .imegs{

        width: 300px;
        height: 300px; 
    }

}

@media only screen and (max-width : 900px) {
    .slide_text h1{ 
        top: .4em;


        font-size: 3.2em;
    }
}
@media only screen and (max-width : 740px) {

    .slide_text h1{ 
        top: 1.6em;

        font-size: 2.6em;
    }
    .slide_text p{ 
        bottom: 3.2em;
        font-size: 1.4em;
    }    
}
@media only screen and (max-width : 600px) {

    .slide_text h1{ 
        top: 1.8em;

        font-size: 2.2em;

        background-color: rgba(32,167,214,.3);
        color: #fff;
            -webkit-text-stroke:  #fff;
            
               -webkit-text-fill-color: transparent; 
    -webkit-text-stroke-width: 1.5px;
    }
    .slide_text p{  
        background-color: rgba(32,167,214,.3);
        color: #fff;
            -webkit-text-stroke: #fff;
               -webkit-text-fill-color: transparent; 
    -webkit-text-stroke-width: .5px;
    }
}

@media only screen and (max-width : 500px) {
    #nav-right{  
        left: calc(100% - 3em);
        transform: translateX(calc(100% - 3em)); 
        width: 3em;
        height: 3em; 
    }

    #nav-left{  
        left:  0;
        transform: translateX(0);

        width: 3em;
        height: 3em; 
    } 
    #nav-right img{
        width: 3em;
        height: 3em; 
    }


    #nav-left img{
        width: 3em;
        height:3em; 
    }
    .slide_text h1{ 
        top: 2.2em;

        font-size: 2em;
    }
}


@media only screen and (max-width : 414px) {
    .slide_text h1{ 
        top: 2.8em;

        font-size: 1.6em;
    }
    #nav-right{  
        background-color: rgba(32,167,214,.5);
    }

    #nav-left{  
        background-color: rgba(32,167,214,.5);
    } 

    .imegs{

        width: 300px;
        height: 300px; 
    }

}
@media only screen and (max-width : 360px) {
    .slide_text h1{ 
        top: 3.8em;

        font-size: 1.4em;
    }

}
@media only screen and (min-width : 500px) and (max-height : 500px) {

    .main--Slider{ 
        height:350px;  
    } 
    .imegs{

        width: 250px;
        height: 250px; 
    }
    .slide_text h1{ 
        line-height: 100%;
        top: 0;
        font-size: 3.4em;
    }
    .slide_text p{ 
        bottom: .4em;
        font-size: 2em;
    }
}
@media only screen and (min-width : 500px) and (max-height : 414px) {

    .main--Slider{ 
        height:320px;  
    } 
    .imegs{

        width: 250px;
        height: 250px; 
    }
    .slide_text h1{ 
        line-height: 100%;
        top: .2em;
        font-size: 2.8em;
    }
    .slide_text p{ 
        bottom: .4em;
        font-size: 2em;
    }
}

/*end images*/