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

/*start loading*/
/*loading | defaults styles */ 
#iload{
    overflow:hidden;
    z-index: 999;
    position: fixed;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%; 
    background: #000;
    overflow: hidden;
}
#iload--content{
    overflow: hidden;
    position: absolute;
    bottom: 5%;
    right: 5%;
    width: auto;
    height: auto;  
    text-align: right;
}
#iload--content li{
    position: relative;
    top: 0;
    right:0;
    width:auto;
    font-style: italic;
    line-height: 1.2em;
    font-size: 1.4em;
    color: #fff; 
    padding-left: .3em;
    padding-right: .3em;
}
#iload--content li:after{
    content: " ";
}
.hide--c {
    position: absolute;
    top: 0;
    width: auto;
    height:100%;
    background: #000;
    left: 0;
    -webkit-animation: spinaaa 2s linear infinite;
    -moz-animation: spinaaa 2s linear infinite;
    animation: spinaaa 2s linear infinite;
    transition: all .2s ease-in-out;
}
@keyframes spinaaa{
    15%{ 
        background: #000;
    }
    17%{ 
        background: #fff;
    }
    19%{ 
        background:#000;
    }
    21%{ 
        background:#fff;
    }
    30%{ 
        background:#000;
    }
}

.loadAA{
    z-index: 10;
    overflow: hidden;
    position: absolute;
    top:100%;
    right: 0;
    width: 100%;
    height: 100%;
    background-color: #000;
    /*background-color: #20a7d6;*/
    /*background-color: #a8396c;*/
    transition: all 1s ease-in-out;
}
.loadBB{

    z-index: 11;
    overflow: hidden;
    position: absolute;
    top:100%;
    right: 0;
    width: 100%;
    height: 100%; 
    background-color: #20a7d6;
    transition: all 1s ease-in-out;
}
/*end loading*/ 
#theLoader{
    z-index: 200;
    position: fixed;
    top: 100%;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #000;

}
.partner--logos { 
    overflow: hidden;
    text-align: center;
    margin: 0; 
    background-color: rgba(245,245,245,.9);
}
.partner--logos h1{
    margin: 0 auto;
    width: 90%;
    margin-top: 1em;
    text-align: left;
    font-size: 3.2em; 

    -webkit-text-fill-color: transparent;
    -webkit-text-stroke:  #313131;
    -webkit-text-stroke-width: 1px;

    font-family: 'Kanit', sans-serif;
}
.partner--logos ul{
    margin: 0em auto;
    text-align: center;
    width:90%;
}
.partner--logos ul li{
    display: inline-block;
    height: auto;
    width:calc(100% / 6.1);
    top:0;
    left: 0;
    position: relative;
}
.partner--logos ul li div{
    position: absolute;
    top:0;
    left: 0; 
    background-color: rgba(245,245,245,.9);
    width: 100%;
    height: 100%; 
    transition: all .2s ease-in-out;
}
.partner--logos ul li img{

    width: 150px;

}
.partner--logos ul li:hover div{

    transition: all .4s ease-in-out;
    background-color: rgba(245,245,245,.4);
}
@media only screen and (max-width : 1023px) {
    .partner--logos ul{
        margin: 2em auto; 
        width:90%;
    }
    .partner--logos ul li{ 
        width:calc(100% / 4.1);
    }


}
@media only screen and (max-width : 900px) {
    .partner--logos ul{
        margin: 2em auto; 
        width:96%;
    }
    .partner--logos ul li{ 
        width:calc(100% / 4.1);
    }


}
@media only screen and (max-width : 700px) {
    .partner--logos ul{
        margin: 2em auto; 
        width:92%;
    }
    .partner--logos ul li{ 
        width:calc(100% / 3.1);
    }

    .partner--logos h1{
        font-size: 2.8em;
    }

}
@media only screen and (max-width : 600px) {
    .partner--logos ul{
        margin: 2em auto; 
        width:96%;
    }
    .partner--logos ul li{ 
        width:calc(100% / 2.1);
    }


    .partner--logos h1{
        font-size: 2.4em;
        line-height: 1em;
        margin-left: 1em;
    }
}

.c_coverA{
    z-index: 5;
    position:absolute;
    top:0;
    left: 0;
    width:100%;
    height:100%;
    background: url(../tiltdigitalstudio-imgs/sliceA.png);
    background-size: 100% 100%;
    background-position: 0 0;
    opacity: 0.1;

    background-attachment: fixed;
    transition: all .6s ease-in-out;
    animation: coverB  6s ease-in-out infinite;
}
@keyframes coverA  {
    0%{opacity:0.1;}
    15%{opacity:0.3;}
    20%{opacity:0.1;}
    35%{opacity:0.3;}
    40%{opacity:0.1;}
    75%{opacity:0.3;}
    80%{opacity:0.1;}
    100%{opacity:0.3;}
}
.c_coverB{
    z-index: 5;
    position:absolute;
    top:0;
    left: 0;
    width:100%;
    height:100%;
    background-attachment: fixed;
    background: url(../tiltdigitalstudio-imgs/sliceB.png);
    background-size: 100% 100%;
    background-position: 0 0;
    opacity:0.3;
    transition: all .8s ease-in-out;
    animation: coverB  4s ease-in-out infinite;
}

@keyframes coverB  {
    0%{opacity:0.1;}
    25%{opacity:0.2;}
    30%{opacity:0.1;}
    50%{opacity:0.2;}
    55%{opacity:0.1;}
    75%{opacity:0.2;}
    80%{opacity:0.1;}
    100%{opacity:0.2;}
}
.content--cover{
    overflow: hidden;
    position:relative;
    top:0;
    left: 0;
    width:100%;
    height: 780px; 
    transition: all .4s ease-in-out; 

    background-color: #000;
}
.xxrrCover-next{
    position:relative;
    top:0;
    left: 0;
    width:100%;
    height: 780px; 

    transition: all .4s ease-in-out; 

    background-color: #000;
}
.theWit{
    background-color: #fff;
}
.theWitted{
    background-color: #fff;
}
.c--bg{
    z-index: 1;
    position:absolute;
    top:0;
    left: 0;
    width:100%;
    height: 100%;
    filter: blur(.8px);
    transition: all .4s ease-in-out; 
}
.c--cont{
    z-index: 2;
    position:absolute;
    top:0;
    left: 0;
    width:100%;
    height: 100%; 
    background-color: rgba(255,255,255,.6); 
    transition: all .4s ease-in-out; 
}
.cover article{
    z-index: 5;
    position:absolute;
    top:0;
    left: 0;
    width:100%;
    height:100%;

} 
.c--cont-cover{  
    position: relative;
    top:84%;
    left: 28%;
    width: auto;
    height:auto;
    transform: translate(-20%,-80%);
    transition: all .4s ease-in-out;  
}
.c--cont-cover h1{ 
    margin: -.1em;
    position: relative;
    line-height: 90%;
    font-size: 7em;
    transition: all .4s ease-in-out; 
}
.c--cont-cover h1:last-child{
    font-size: 12em;
}

/*.xxrR {
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    height: 5em;
    background: blue;
}*/
@media only screen and (max-width: 768px) and (min-height: 1024px) {
    .content--cover{
        overflow: hidden;
        position:relative;
        top:0;
        left: 0;
        width:100%;
        height: 1000px; 
    }
}
@media only screen and (max-width: 1024px) {
    .content--cover{
        overflow: hidden;
        position:relative;
        top:0;
        left: 0;
        width:100%;
        height: 1000px; 
    }
    .c--cont-cover h1{ 
        margin: -.1em;
        position: relative;
        line-height: 90%;
        font-size: 5em;
    }
    .c--cont-cover h1:last-child{

        font-size: 8em;
    }
}
@media only screen and (max-width: 900px) {
    .content--cover{
        overflow: hidden;
        position:relative;
        top:0;
        left: 0;
        width:100%;
        height: 600px; 
    }
    .c--cont-cover h1{ 
        margin: -.1em;
        position: relative;
        line-height: 90%;
        font-size: 3em;
    }
    .c--cont-cover h1:last-child{

        font-size: 6em;
    }
}
@media only screen and (max-width: 800px) {
    .content--cover{
        overflow: hidden;
        position:relative;
        top:0;
        left: 0;
        width:100%;
        height: 600px; 
    }

    .xxrrCover-next{

        height: 550px; 
    }
    .c--cont-cover h1{ 
        margin: -.1em;
        position: relative;
        line-height: 90%;
        font-size: 3em;
    }
    .c--cont-cover h1:last-child{

        font-size: 5em;
    }
}
@media only screen and (max-width: 600px) {
    .content--cover{
        overflow: hidden;
        position:relative;
        top:0;
        left: 0;
        width:100%;
        height: 500px; 
    }
    .xxrrCover-next{

        height: 400px; 
    }
    .c--cont-cover h1{ 
        margin: -.1em;
        position: relative;
        line-height: 90%;
        font-size: 2.6em;
    }
    .c--cont-cover h1:last-child{

        font-size: 4.2em;
    }


}
@media only screen and (max-width: 414px) {
    .content--cover{ 
        height: 740px; 
    }
    .xxrrCover-next{

        height: 350px; 
    }
}
@media only screen and (max-width: 360px) {
    .content--cover{ 
        height: 640px; 
    }

}

@media only screen and (max-width: 414px) and  (max-height: 640px) {
    .content--cover{ 
        height: 640px; 
    }
}
@media only screen and (max-width: 414px) and  (max-height: 740px) {
    .content--cover{ 
        height: 700px; 
    }
}
@media only screen and (max-width: 414px) and  (min-height: 730px) {
    .content--cover{ 
        height: 740px; 
    }
    /*    .xxrrCover-next{
    
            height: 350px; 
        }*/
}

@media only screen and (max-width: 360px) and  (min-height: 700px) {
    .content--cover{ 
        height: 740px; 
    }
    .xxrrCover-next{

        height: 350px; 
    }
}
/*start new edits*/
@media only screen and (max-height: 600px) and (min-width: 514px){
    .content--cover{
        overflow: hidden;
        position:relative;
        top:0;
        left: 0;
        width:100%;
        height: 414px; 
    }
    .xxrrCover-next{

        height: 350px; 
    }
    .c--cont-cover h1{ 
        margin: -.1em;
        position: relative;
        line-height: 90%;
        font-size: 3em;
    }
    .c--cont-cover h1:last-child{

        font-size: 6em;
    }    
}
/*@media only screen and (max-height: 400px) and (min-width: 514px){
    .content--cover{ 
        height: 320px; 
    }
    .xxrrCover-next{

        height: 400px; 
    }
    .c--cont-cover h1{  
        font-size: 2.8em;
    }
    .c--cont-cover h1:last-child{
        font-size: 5em;
    }    
}*/
@media only screen and (max-height: 300px) and (min-width: 414px){
    .xxrrCover-next{

        height: 400px; 
    }
    .content--cover{ 
        height: 300px; 
    }
    .c--cont-cover h1{  
        font-size: 2.6em;
    }
    .c--cont-cover h1:last-child{
        font-size: 4.8em;
    }    
}
/*end new edits*/
.cover-ex{ 
}
.c--cont-black{
    z-index: 2;
    position:absolute;
    top:0;
    left: 0;
    width:100%;
    height: 100%; 
    background-color: #000;
    transition: all .2s linear; 
}
.c--cont-black h1{
    transition: all .4s linear; 
    color: #fff;
}
.c--cont-about{
    margin-top: 14em;
    position:relative;
    top:0;
    left: 75%;
    width: 600px;
    height: auto;  
    transform: translate(-75%); 
}
.c--cont-about h2{
    font-size: 2em;
    color: #fff;
    margin: 1em;
}
.c--cont-about p{
    margin-left: 2em;
    line-height: 110%;
    width: auto;
    font-size: 3em;
    color: #fff;
}
.c--cont-about p a{
    color: #20a7d6;
    font-size: 1em;
}
.c--cont-service{ 
    overflow: hidden;
    position:relative;
    top:0;
    left: 0;
    width: auto;
    height: auto;  
    background-color: #000;
}
.c--cont-service h2{
    font-size: 8em;
    color: #fff;
    margin: 1em;
    margin-left: 1.6em;
}
.c--cont-service h2 a{
    font-size: 30px;
    color: #20a7d6;
    margin: .4em;
}
.c--cont-service h3{
    float: right;
    width: 55%;
    font-size: 5.8em;
    color: #fff;
    margin: 1em;
    margin-top: .8em;
    margin-right: 1.6em;
    line-height: 90%;
    margin-bottom: 3em;
}
.c--cont-service-box{

    position:relative;
    top:0;
    left: 0;
    width: 80%;
    height: auto;  
    margin-left: 2em;
    line-height: 110%;
    width: auto;
    font-size: 3em;

    color: #fff;
}
.c--cont-images{ 
    overflow: hidden;
    position:relative;
    top:0;
    left: 0;
    width: auto;
    height: auto;  

}
.c--ms{

    padding: 0;
    display: inline-block;
    position:relative;
    top:0;
    left: 0;
    width: calc(90% / 3);
    height: auto;  
    margin: 1.5%;
}
.c--ms img{
    position:relative;
    top:0;
    left: 0;
    width: 100%;
    height: auto;
}
@media only screen and (max-width : 1023px) {
    .c--cont-about{
        margin-top: 16em;
        position:relative;
        top:0;
        left: 75%;
        width: 600px;
    }
    .c--cont-service h2{
        font-size: 6em;
        color: #fff;
        margin: .8em;
        margin-left: 1em;
    } 
    .c--cont-service h3{
        float: right;
        width: 65%;
        font-size: 4em;
    }
}
@media only screen and (max-width : 800px) {
    .c--cont-about{
        margin-top: 10em;
        position:relative;
        top:0;
        left: 75%;
        width: 400px;
    }

    .c--cont-about h2{
        font-size: 1.8em;
    }
    .c--cont-about p{
        margin-left: 2em;
        line-height: 110%;
        width: auto;
        font-size: 2em;
    }
    .c--cont-service h2{
        font-size: 5em;
        color: #fff;
        margin: .6em;
        margin-left: 1em;
    } 
    .c--cont-service h3{
        float: right;
        width: 65%;
        font-size: 3.8em;
    }

}
@media only screen and (max-width : 600px) {
    .c--cont-about{
        margin-top: 7em;
        position:relative;
        top:0;
        left: 75%;
        width: 90%;
    }
    .c--cont-about h2{
        font-size: 1.2em;
    }  
    .c--cont-about p{
        margin-left: 1.4em;
        line-height: 110%;
        width: auto;
        font-size: 1.8em;
 
    }
    .c--cont-service h2{
        font-size:4em;
        color: #fff;
        margin: .4em;
        margin-left: 1em;
    } 
    .c--cont-service h3{
        float: right;
        width: 75%;
        font-size: 2.4em;
    }
}
@media only screen and (max-width : 500px) {
    .c--cont-about{
        margin-top: 7em;
    }
    .c--cont-service h2{
        font-size: 3em;
        color: #fff;
        margin: .2em;
        margin-left: 1em;
    } 
    .c--cont-service h3{
        float: right;
        width: 75%;
        font-size: 2em;
    }
}
@media only screen and (max-width : 414px) {
    .c--cont-about{
        margin-top: 5em;
    }
    .c--cont-about p{
        margin-left: 1.4em;
        line-height: 110%;
        width: auto;
        font-size: 1.6em;
    }
}
@media only screen and (min-width: 900px) and  (max-height: 600px) {
    .c--cont-about{
        margin-top: 10em;
    }   
    .c--cont-about h2{
        font-size: 1.8em;
    }
    .c--cont-about p{ 
        font-size: 2em; 

    }
}
@media only screen and (min-width: 360px) and  (max-height: 500px) {
    .c--cont-about{
        margin-top: 7em;
    }   
    .c--cont-about h2{
        font-size: 1.5em;
    }
    .c--cont-about p{ 
        font-size: 1.8em; 

    }
}
@media only screen and (min-width: 600px) and  (max-height: 600px) {
    .c--cont-about{
        margin-top: 6em;
    }       
}
@media only screen and (min-width: 600px) and  (max-height: 600px) {
    .c--cont-about{
        margin-top: 6em;
    }       
}
.xxrr {
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    height: 5em;
}