/*

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

*/


.c-bricks {
    opacity: 0;
    z-index: 1;
    position: absolute;
    top: 89%;
    transform: translateY(-89%);
    left: 10em;

    -moz-filter: blur(1px);
    filter: blur(1px);
    width: 420px;   
    height: 180px;
    background-size:100% 100%;
}
.c-bricks:after {
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    content: "";
    background: rgba(1,1,1,.5);
}
.cbricks {
    z-index: 1;
    position: absolute;
    top: 89%;
    transform: translateY(-89%);
    left: 10em;

    -moz-filter: blur(.8px);
    filter: blur(.8px);
    width: 420px;   
    height: 180px;
    background-size:100% 100%;
}

.ccL{
    z-index: 4;
    position: absolute;
    background-color: #9d216a;
    transform-style: preserve-3d;
    transition: initial;
    border-radius: 3px;
}
.lA {
    top: 55px;
    left: 20px;
    width: 70px;
    height: 4px;
    -webkit-transform: rotate(25deg) translate3d(-2px,-4px,0);
    -moz-transform: rotate(25deg) translate3d(-2px,-4px,0);
    transform: rotate(25deg) translate3d(-2px,-4px,0);
}
.lB {
    top: 110px;
    left: 40px;
    width: 90px;
    height: 4px;
    transform: rotate(96deg) translate3d(0,0,0);
}
.lC {
    top: 55px;
    left: 90px;
    width: 85px;
    height: 7px;
    background-color: #303131;
    transform: rotate(-10deg) translate3d(0,-4px,0);
}
.lD{
    top: 125px;
    left: 150px;
    width: 70px;
    height: 7px;

    background-color:  #303131;
    transform: rotate(105deg) translate3d(-15px,0,0);
}
.lE{
    top: 95px;
    left: 230px;
    width: 85px;
    height: 7px;

    background-color: #303131;
    transform: rotate(35deg) translate3d(0,0,0);
}
.lF{
    top: 135px;
    left:280px;
    width: 50px;
    height: 4px;
    transform: rotate(-60deg) translate3d(0,0,0);
}
.lG{
    top: 80px;
    left:310px;
    width: 105px;
    height: 4px;
    transform: rotate(-43deg) translate3d(0,0,0);
}
.ccI{
    z-index: 5;
    position: absolute;
    background: rgba(0,0,0,.8);
    border-radius: 100%;
    background-color:  #303131;
    transform-style: preserve-3d;
    transition: initial;

}
.cA {
    top: 20px;
    left: 5px;
    width: 30px;
    height: 30px;

    transform: translate3d(1px,2px,0);
}
.cB {
    top: 50px;
    left: 80px;
    width: 35px;
    height: 35px;
    transform: translate3d(-5px,-15px,0);
    background-color: #9d216a;
}
.cC {
    top: 145px;
    left: 75px;
    width: 30px;
    height: 30px;
    transform: translate3d(-10px,2px,0);


}
.cD {
    top: 5px;
    left: 170px;
    width: 105px;
    height: 105px;
    transform: translate3d(1px,2px,0);


}
.cE {
    top: 140px;
    left: 170px;
    width: 35px;
    height: 35px;
    transform: translate3d(-5px,-15px,0);
    background-color: #9d216a;
}
.cF {
    top: 160px;
    left: 280px;
    width: 25px;
    height: 25px;
    transform: translate3d(-5px,-15px,0);

}
.cG {
    top: 105px;
    left: 295px;
    width: 35px;
    height: 35px;
    transform: translate3d(1px,-5px,0);
    background-color: #9d216a;
}
.cH {
    top: 40px;
    left: 385px;
    width: 30px;
    height: 30px;
    transform: translate3d(-5px,-15px,0);

}



@media only screen and (max-width: 900px) {
    
    .c-bricks {
    display: none;
    }
}
@media only screen and (max-width : 740px) {
    .cbricks {
        z-index: 1;
        position: absolute; 
        left: 14em;
    }
}
@media only screen and (max-width : 400px) {
    .cbricks {
        z-index: 1;
        position: absolute; 
        left: 4em;
    }
}

/*start of navigator*/
nav{
    z-index: 10;
    overflow: hidden;
    text-align: left;
    z-index: 98;
    position: fixed;
    /*top: 0;*/
    top: -110%;
    width: 100%;
    min-width:320px;
    height: 100%;
    background: #9d216a;
    /*min-width: 1280px;*/
}


.navSec{ 
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #000;

}
nav ul{
    margin-left: 15em;
    position: relative;
    top: 55%;
    left: 70%;
    height: auto;
    transform: translate(-75%, -55%);
    width: 24em; 
    /*background-color: pink;*/
}
nav ul li{
    overflow: hidden;
    margin: 0.2em auto;
    display: block;
    position: relative;
    top: 0;
    left:0;
    height: 3.6em;
    width: 100%;
}
nav ul li h4{
    z-index: 10;
    position: absolute;
    /*top: 0;*/
    top: 100%;
    left:10%; 
    margin: 0 auto;
    font-size: 3.4em;
    width: auto;
    height: 100%;
    line-height: 1em;
    color: rgba(255,255,255,.6);
    font-family: 'Roboto', sans-serif;
    transition:  all 0.2s ease-in-out;
    font-weight: 700;
}

nav ul li h4:hover{
    opacity: .6;
    transition:  all 0.2s ease-in-out;
    color: #9d216a;

}


nav  .active h4{
opacity: .8;
    color: #9d216a;

}


.mini--nav{
    margin: .6em auto;
    position: relative;;
    top: 0;
    left: 0;  

    transform: translate(0,0);
    /*background-color: grey;*/
}
.mini--nav li{
    overflow: hidden;
    margin: 0.3em auto;
    display: block;
    position: relative;
    top: 0;
    left:0;
    height: 2em;
    width: 100%;
}
.mini--nav h4{ 
    z-index: 10;
    position: absolute;
    /*top: 0;*/
    top: 100%;
    left:14%; 
    margin: 0 auto;
    font-size: 1.4em;
    width: auto;
    height: 2em; 
    color: rgba(255,255,255,.6);
    font-family: 'Roboto', sans-serif;
    transition:  all 0.2s ease-in-out;
    font-weight: 700;
}

@media only screen and (max-width : 1024px) {
    nav ul{ 
        top: 55%;
        left: 60%;
        height: auto;
        transform: translate(-75%, -55%);
        width: 20em;  
    }
    nav ul li{
        overflow: hidden;
        margin: 0em auto;
        height: 3em;
    }
    nav ul li h4{

        left:10%; 
        margin: 0 auto;
        font-size: 3em;
        width: auto;
        height: 100%;
        line-height: 1em; 
        font-weight: 700;
    }

    .mini--nav{
        margin: .3em auto; 
        transform: translate(0,0); 
    }
    .mini--nav li{
        overflow: hidden;
        margin: 0.3em auto; 
        height: 1.6em; 
    }
    .mini--nav h4{  
        left:14%;  
        font-size: 1.4em;
        width: auto;
        height: 1.6em;  
        font-weight: 700;
    }

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

    nav ul{ 
        top: 60%;
        left: calc(50% - 10em);
        height: auto;
        transform: translate(calc(- 50% - 10em), -65%);
        width: 20em;  
    }
    nav ul li{
        overflow: hidden;
        margin: 0em auto;
        height: 2.6em;
    }
    nav ul li h4{

        left:10%; 
        margin: 0 auto;
        font-size: 2.6em; 
    }

    .mini--nav{
        margin: .3em auto; 
        transform: translate(0,0); 
    }
    .mini--nav li{
        overflow: hidden;
        margin: 0.3em auto; 
        height: 1.6em; 
    }
    .mini--nav h4{  
        left:14%;  
        font-size: 1.4em;
        width: auto;
        height: 1.6em;  
        font-weight: 700;
    }

}

@media only screen and (max-height : 480px) {
     nav ul{ 
        top: 65%;
        left: calc(50% - 10em);
        height: auto;
        transform: translate(calc(- 50% - 10em), -65%);
        width: 20em;  
    }
        nav ul li{
        overflow: hidden;
        margin: 0em auto;
        height: 2.2em;
    }
    nav ul li h4{

        left:10%; 
        margin: 0 auto;
        font-size: 2.2em; 
    }

}
/*end of navigator*/
/*start footer */

footer{
    margin: 0 auto;
    position: relative;;
    top: 0;
    left: 0;
    width: 90%;
    height: 3em;
}

footer article{
    display: inline-block;
    position: relative;;
    top: 0;
    left: 0;
    width: auto;
    height: auto; 
}



.social--media{
    float: right;
    display: inline-block;
    position: relative;;
    top: 0;
    left: 0;
    width: auto;
    height: auto; 
}

.social--media li{
    margin-left: .5em;
    display: inline-block;
}
footer article p {
    font-size: .9em;
    color: #fff;
}
.social--media li a{

    font-size: .9em;
    color: #fff;
    font-weight: 700;
}

.scrolldown--line{

    position: absolute;
    top: 95%;
    left: 5em;
    width: 6em;
    height: 6em;
    transform: translateY(-95%);
    background-image: url(../tiltdigitalstudio-img/mahodiscrolldown.png);
    background-size: 100% 100%;
}
.owl{
    left: 4em;
}

#scrollDown:hover 

.c--circle{
    display: none;
}
@media only screen and (max-width : 900px) {
    .scrolldown--line{

        top: 94%;
        left: 92%;
        width: 4em;
        height: 4em;
        transform: translate(-95%,-95%);
    }
}
@media only screen and (max-width : 740px) {
    .scrolldown--line{

        top: 94%;
        left: 92%;
        width: 4em;
        height: 4em;
        transform: translate(-95%,-95%);
    }

    footer{ 
        width: 94%;
        height: auto;
    }

    footer article p {
        margin: 0em auto;
        margin-top: 1em;
        text-align: center;

    }

    .social--media{
        width: 94%;
        margin: .4em auto;
        float: none; 
        text-align: center;
    }

    .social--media li{
        margin: .2em;
    }
}
@media only screen and (max-width : 500px) {
    .scrolldown--line{

        top: 95%;
        left: 3em;
        width: 4em;
        height: 4em;
        transform: translate(0%,-95%);
    }
    footer{ 
        width: 94%;
        height: auto;
    }

    footer article p {
        margin: .3em auto;
        margin-top: 1em;
        text-align: center;

    }

    .social--media{
        width: 94%;
        margin: .4em auto;
        float: none; 
        text-align: center;
    }

    .social--media li{
        margin: .4em;
    }
}