/*

Pixel pusher, exploring creativity as a tool

full names: tshidiso brandon sibiya
alies: stbrandon
handler :@stbrandondoncanvas
phone: +27 (0) 65 848 7526
email: tshidisosibiya@gmail.com

website : www.tiltdigitalstudio.com
email hello@tiltdigitalstudi.com

*/

/*start direction*/
#nav-right{ 
    right: 0; 
}
/*end direction*/

/*start slide*/ 
.main--Slider{
    z-index: 2;
    position: relative;
    top:0;
    left: 0;
    width: 100%;
    height:768px;  
    background-color: rgba(1,1,1,.6);
}
.slide{ 
    z-index: 97;
    position: absolute;
    top:0;
    left:0;
    width:100%;
    height: 100%;  
}
#slideshow { 

    /*background: yellow;*/
    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 .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;*/

}

.scont{
    z-index: -1;
    width: 100%;
    height: 100%;
    position: absolute; 
    top: 0;
    left: 0;    
}  
.slide_text h1{ 
    z-index: 15;
    width: auto;
    height: auto;
    position: absolute;
    transform: translate(-15%,-70%);
    top: 70%;
    left: 15%;
    font-weight:900;
    font-size: 6em;
    color: #790c5a;
    transition: all 1s ease-in-out;
}
.slide_text p{ 
    z-index: 15;
    width: auto;
    height: auto;
    position: absolute;
    transform: translate(-25%,-78%);
    top: 78%;
    left: 25%;
    font-weight:700;
    font-size: 4em;
    transition: all 1s ease-in-out;
    color: #fff;
}

.s--c{
    z-index: 15;
    text-align: left;
}
.s--c h1{
    -webkit-text-fill-color: transparent;
    -webkit-text-stroke:  #790c5a;
    -webkit-text-stroke-width: 2px;
}
.s--c p{
    -webkit-text-fill-color: transparent;
    -webkit-text-stroke:  #fff;
    -webkit-text-stroke-width: 2px;
}
.s--c h2{
    -webkit-text-fill-color: transparent;
    -webkit-text-stroke:  #fff;
    -webkit-text-stroke-width: 2px;
}

/*end slide*/

/*start other slide*/

.slide_text-services h1{ 
    z-index: 15;
    width: auto;
    height: auto;
    position: absolute;
    top:15%;
    left: 10%;
    font-weight:900;
    font-size: 5em;
    color: #790c5a;
    transition: all 1s ease-in-out;
}
.slide_text-services p{ 
    z-index: 15;
    width: auto;
    height: auto;
    position: absolute;
    top:calc(14% + 2em);
    left: 13%;
    font-weight:700;
    font-size: 2.8em;
    transition: all 1s ease-in-out;
    color: #fff;
}
.slide_text-services h2{
    z-index: 15;
    width: auto;
    height: auto;
    position: absolute;
    top:50%;
    right: 2%;
    font-weight:700;
    font-size: 18em;
    transition: all 1s ease-in-out;
    color: #fff;

}
.slide_text-services h2 span{
    position: absolute;
    top:10%;
    right: 0;
    font-weight:100;
    font-size: 14px;  
    color: #fff;
}

.services--box{
    margin: 1em;
    position: relative;
    top:60%;
    left: 15%;
    transform: translate(-15%, -60%);
    width:35em;
    height: auto;
    min-height: 50%;
    font-weight:700;
    font-size: 1em; 
    text-align: left; 
}
.services--box h4{
    position: relative;
    top: 0;
    left: 0;
    width: 300px;
    height: auto;
    font-size: 1.2em;
    margin: .3px;
    color: #fff;
}
.services--box ul{
    margin: 1em auto;
    position: relative;
    top: 0;
    left: 0;
}
.services--box li{
    position: relative;
    top: 0;
    left: 1em;
    width: auto;
    height: auto;
    font-size: 1.2em;
    margin: .2px;
    color: #fff;
}
.services--box li:before{

    position: relative;
    top: 0;
    left: -.4em;
    content: '-';
    color: #790c5a;
    font-weight: 700;
}
/*end other slide*/

/*start images*/
.snav{  
    z-index: 99;

    top: 50%;
    transform: translateY(-50%);
    width: 900px;
    height: 560px; 
    position: absolute; 
    color:  black; 

}
.imegs{

    position: absolute; 

    top: 50%;
    transform: translateY(-50%);
    right: 0;
    z-index: 10;
    width: 900px;
    height: 600px; 
    /*background-color: green;*/
    text-align: right;
}
.imegs img{
    /*display: none;*/
    z-index: 10;
    width: auto;
    height: 100%;
}


.snavig{
    top: 10%;
    z-index: 99;
    width: 800px;
    height: 560px; 
    position: absolute; 
    color:  black; 

    top: 50%;
    transform: translateY(-50%);
}
.imegs--services{

    text-align: right;
    position: absolute;  
    right:0;
    z-index: 10;

    width: 800px;
    height: 560px; 
    /*background-color: green;*/

    top: 50%;
    transform: translateY(-50%);
}

.imegs--services img{
    /*display: none;*/
    z-index: 10;
    width: auto;
    height: 100%;
}

/*end images*/

@media only screen and (max-width : 1023px) {


    .imegs--services , .imegs, .snav, .snavig{
        width: 100%;
    }
    .slide_text-services h2{
        top:60%;
        right: 5%; 
        font-size: 15em;
    }
    .slide_text h1{ 

        transform: translate(-15%,-70%);
        top: 70%;
        left: 15%; 
        font-size: 5em; 
    }
    .slide_text p{  
        transform: translate(-22%,-76%);
        top: 76%;
        left: 22%;
        font-weight:700;
        font-size: 3em; 
    }

}

@media only screen and (max-width : 900px) {
    #nav-right{ 
        right: 5%; 
        background-image: url(../tiltdigitalstudio-img/mahodiscrolldown.png);
        background-size: 100% 100%;
        transform: rotate(-90deg);

    }

    #nav-right:hover{ 
        background-color: rgba(5,5,5,.1);
    }

    .snav, .snavig{ 
        width: 100px;
        height: 100px; 
        position: absolute; 
        top: calc(65%);
        transform: translateY(calc(-65%));
    }
    .slide_text-services h2{

        font-size: 10em;
        right: 60%; 
        top: 76%;
        transform: translateX(-60%);

    }
       .slide_text-services h2 span{
        position: absolute;
        top:-2%;
        right: -5%;
        font-weight:100;   
    }
}

@media only screen and (max-width : 740px) {
    #nav-right{ 
        right: 10%;  
    }
    .snav, .snavig{ 
        width: 60px;
        height: 60px; 
        position: absolute; 
        top: calc(95% - 30px);
        transform: translateY(calc(95% - 30px));
    }

    .main--Slider{ 
        margin: 5em auto;
        width:100%;
        height:400px;  
    }
    .slide{ 
        width:100%;
        height:400px;  
    }
    .imegs{  

        top: calc(50% - 150px);
        transform: translateY(calc(50% - 150px));
        width: 380px;
        height: 300px;
    }  

    .slide_text h1{ 

        top: calc(50%);
        transform: translateY(calc(-50%));
        font-size: 4em;
    }
    .slide_text p{
        top: calc(60%);
        transform: translateY(calc(-60%));
        font-size: 1.8em;
    }

    .imegs--services{
        top: calc(50% - 150px);
        transform: translateY(calc(50% - 150px));
        width: 380px;
        height: 300px;
    }
    .slide_text-services h2{
        right: 10%;
        font-weight:700;
        font-size: 3em;
        top: calc(5%);
        transform: translateY(calc(-5%));

    }
    .slide_text-services h2 span{
        position: absolute;
        top:-25%;
        right: -50%;
        font-weight:100;
        font-size: 14px;  
    }
    .slide_text-services h1{ 

        top: calc(5%);
        transform: translateY(calc(-5%));
        font-size: 3em;
    }
    .slide_text-services p{
        top: calc(15%);
        transform: translateY(calc(-15%));
        font-size: 1.8em;
    }

    .services--box{
        margin: .8em;
        position: relative;
        top:50%;
        left: 25%;
        transform: translate(-25%, -50%);
        width:50%; 
    }

    .services--box h4{
        font-size: 1em;
        text-shadow: 1px 0px 1px #000, -1px 0px 2px #000 ;

    }
    .services--box ul{
        margin: .3em auto;
    }

    .services--box li{
        font-size: 1em;
        text-shadow: 1px 0px 1px #000, -1px 0px 2px #000;
    }
}
@media only screen and (max-width : 480px) {
    #nav-right{ 
        right: 10%;  
    }
    .snav, .snavig{ 
        width: 50px;
        height: 50px;  
        top: calc(95% - 25px);
        transform: translateY(calc(95% - 25px));
    }
    .main--Slider{ 
        margin: 10em auto;
        width:100%;
        height:400px;  
    }
    .slide{ 


        width:100%;
        height:400px;  
    }

    .imegs{  

        top: calc(50% - 140px);
        transform: translateY(calc(50% - 140px));
        width: 300px;
        height: 280px;
    }  


    .slide_text h1{ 

        top: calc(70%);
        transform: translateY(calc(-70%));
        font-size: 2em;
    }
    .slide_text p{
        top: calc(75%);
        transform: translateY(calc(-75%));
        font-size: 1.4em;
    }



    .imegs--services{
        top: calc(50% - 140px);
        transform: translateY(calc(50% - 140px));
        width: 300px;
        height: 280px;
    }
    .slide_text-services h2{
        right: 10%;
        font-weight:700;
        font-size: 3em;
        top: calc(5%);
        transform: translateY(calc(-5%));

    }
    .slide_text-services h2 span{
        position: absolute;
        top:-25%;
        right: -25%;
        font-weight:100;
        font-size: 14px;  
    }
    .slide_text-services h1{ 

        top: calc(8%);
        transform: translateY(calc(-8%));
        font-size: 2em;
    }
    .slide_text-services p{
        top: calc(15%);
        transform: translateY(calc(-15%));
        font-size: 1.4em;
    }

    .services--box{
        margin: .8em;
        position: relative;
        top:50%;
        left: 25%;
        transform: translate(-25%, -50%);
        width:80%; 
    }

    .services--box h4{
        font-size: 1em;
    }
    .services--box ul{
        margin: .3em auto;
    }

    .services--box li{
        font-size: 1em;
    }
}

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


    .imegs{  
        top: 0;
        transform: translateY(0);

    }
}