/*

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.teecubesolutions.com
email brandon@teecubesolutions.com
*/
/*start main logo*/
.logo--dar{
    z-index: 700;
    position: fixed;
    top:3em;
    left: 2em;
    width: auto;
    height: auto;
    transition: all 0.4s ease-in-out;
    /*background-color: green;*/
}
.logo--darChange{
    overflow: hidden;
    position: relative;
    top: 0;
    left: 0; 
    height: 4em;
    width: 20em;  
    transition: all 0.4s ease-in-out; 
}
.logo--darWhite{
    background-repeat: no-repeat;
    background-size: 100% auto;
    background-image: url(../teecubesolutions-img/teecubesolutionsWhite.png);

    transition: all 0.4s ease-in-out;
}
.logo--darBlack{

    transition: all 0.4s ease-in-out;
    background-repeat: no-repeat;
    background-size: 100% auto;
    background-image: url(../teecubesolutions-img/teecubesolutionsBlack.png);

}
.logo--darMove{
    left: calc(50% - 10em);
    width: auto;
    height: auto;
    transition: left 0.4s ease-in-out;

    /*transition-delay: .6s;*/
} 
@media only screen and (max-width : 900px){
    .logo--dar{
        top:2em;
    }
    .logo--darMove{

        left: calc(50% - 8em);
    }
    .logo--darChange{ 
        width: 16em; 
    }

}
@media only screen and (max-width : 800px){
    .logo--dar{
        top:1em;
    }
    .logo--darMove{

        left: calc(50% - 8em);
    }
    .logo--darChange{ 
        width: 16em; 
    }

}
@media only screen and (max-width : 768px){
    .logo--dar{
        top:1.2em;       
        left: 1.6em;
    }
    .logo--darMove{
        left: calc(50% - 8em);
    }
    .logo--darChange{ 
        width: 16em; 
    }
}
@media only screen and (max-width : 768px) and (min-height: 600px){
    .logo--dar{
        top:3em;
        left: 3em;
    } 
      .logo--darMove{
        left: calc(50% - 8em);
    }
    .logo--darChange{ 
        width: 16em; 
    }
}
@media only screen and (max-width : 640px){
 
}
@media only screen and (max-width : 416px){
    .logo--dar{
        top:1.6em;
        left: 1.4em;
    }
    .logo--darMove{
        left: calc(100% - 14em);
    }
    .logo--darChange{ 
        height: 3em;
        width: 12em; 
    }
}
@media only screen and (max-width : 320px){
    .logo--dar{
        top:1.6em;
    }
    .logo--darMove{

        left: calc(100% - 13em);
    }
    .logo--darChange{ 

        height: 2em;
        width: 12em; 
    }
}
#nav{
    display: none;
    z-index: 700;
    position: fixed;
    top: 0;
    left: 0;
    width:  100%;
    height:auto;   
}
.backSet{
    display: none;
    opacity: 0;
    /*opacity: 1;*/
    position: absolute;
    top: 1em;
  
    left: 2em;
    background: none;
    border: none;
    font-size: 1.4em;
    font-family: 'Raleway', sans-serif;
    color: #fff;
    transition: all 0.4s ease-in-out;
}
.backSetOnWhite{
    
    display: block;
    color: #000;
    opacity: 1;
    
    transition-delay: .6s;
    transition: all 0.4s ease-in-out;
}
.backSetOnBlack{
    
    display: block;
    color: #fff;
    opacity: 1;
    
    transition-delay: .6s;
    transition: all 0.4s ease-in-out;
}
@media only screen and (max-width : 1024px){
    #nav{
        display: block;
    }
    .backSet{ 
        top: 2em;
        /*left: 1em;*/
        font-size: 2em;
    }
}
@media only screen and (max-width : 900px){
    .backSet{ 
        top: 1.6em;
        /*left: 2em;*/
        font-size: 1.8em;
    }
}
@media only screen and (max-width : 800px){
    .backSet{ 
        top: 1.4em;
        /*left: 2em;*/
        font-size: 1.6em;
    }
}
 
@media only screen and (max-width : 640px){
    .backSet{ 
        top: 1.4em;  
        left: 1.4em;
        font-size: 1.4em;
    }
}
@media only screen and (max-width : 416px){}
@media only screen and (max-width : 320px){}
 
/*end main logo*/

.c--circle{
    display: none;
}
.c--back{
    /*display: none;*/
}
/*start slider control*/
/*start portfolio and services box*/
.ContentList{
    z-index: 6;
    display: block;
    position: relative;
    top:0;
    left: 30em;
    width: calc(100% - 30em);
    padding-top: 4em;
    margin-bottom: 1em;
    transition: all .4s ease-in-out;
}
.BloaderStep3 .ContentList{
    z-index: 6;
    display: block;
    position: relative;
    top:0;
    left: 18em;
    width: calc(100% - 18em);
}
/*end portfolio and services box*/

/*start about us and contact box*/
.ContentFixed{
    z-index: 6;
    display: block;
    position: relative;
    top:0;
    left: 32em;
    width:  calc(100% - 38em);
    height: 100%; 
    background-color: #fff; 
    margin-bottom: 1em;
    color: #fff;
    padding-top: 4em;
    
    padding-bottom: 1em;
    
    /*background-color: green;*/
}
.BloaderStep3 .ContentFixed{
    z-index: 6;
    display: block;
    position: relative;
    top:0;
    left: 18%;
    width:  calc(100% - 18em);
    height: 100%; 
    background-color: #fff; 
    margin-bottom: 1em;
    color: #fff;
    padding-top: 4em;

}
/*end about us and contact box*/
@media only screen and (max-width : 1024px){

    .ContentList{ 

        margin: 0 auto;

        left: 0;
        width: 96%;
    }
    .BloaderStep3 .ContentList{
        left: 0;
        width: 100%;

    }
    .ContentFixed{ 
        margin: 0 auto;

        left: 0;
        width: 96%; 
        margin-bottom: 1em; 
        padding-top: 4em;
    }

    .BloaderStep3 .ContentFixed{ 

        left: 0;
        height: 100%;  
        margin-bottom: 1em; 
        padding-top: 4em;

    }
}
@media only screen and (max-width : 900px){}
@media only screen and (max-width : 800px){}
@media only screen and (max-width : 768px){}
@media only screen and (max-width : 640px){}
@media only screen and (max-width : 416px){}
@media only screen and (max-width : 320px){}
@media only screen and (max-width : 400px) {
    /*    .ContentList{ 
            left: 0;
            width: 100%;
        }
        .BloaderStep3 .ContentList{
            left: 0;
            width: 100%;
        }
        .ContentFixed{ 
            left: 0;
            width:  100%; 
            margin-bottom: 1em; 
            padding-top: 4em;
        }
    
        .BloaderStep3 .ContentFixed{ 
    
            left: 0;
            height: 100%;  
            margin-bottom: 1em; 
            padding-top: 4em;
        }*/

}
/*end slider control*/

/* start of about us*/ 
.aboutFixed h1{
    margin: .3em auto;
    margin-top: .8em;
    width: 98%;
    font-size: 7.6em;
    line-height: 80%;
    /*background-color: pink;*/
    color: #111111;
}
.aboutFixed h2{
    padding-top: .4em;
    margin: .4em auto;
    width: 94%;
    font-size: 5em;
}
.aboutFixed p{
    margin: .5em auto;
    width: 90%;
    font-size: 1.3em;
    color: #6c6c6c;
    line-height: 170%;
}
@media only screen and (max-width : 1024px){
    .aboutFixed h1{
        margin-top: 1.4em;
        font-size: 6em;
        width: 96%;
    }
    .aboutFixed h2{
        font-size: 2em;
    }
    .aboutFixed p{
        width: 92%;
        font-size: 1.2em;
    }
}
@media only screen and (max-width : 900px){
    .aboutFixed h1{ 
        margin: .6em auto;
        margin-top: 1.2em;
        font-size: 5em;
    }
}
@media only screen and (max-width : 800px){


}
@media only screen and (max-width : 768px){
    .aboutFixed h1{  

        margin-top: 1.6em;
        font-size: 5.4em;
    }
}
@media only screen and (max-width : 640px){
    .aboutFixed h1{   
        font-size: 3.8em;
    }
    .aboutFixed p{
        font-size: 1.2em;
    }
} 
@media only screen and (max-width : 416px) {
    .aboutFixed h1{  
        font-size: 2.8em;
    }
    .aboutFixed h2{
        font-size: 2em;
    }
    .aboutFixed p{
        font-size: 1.3em;
    }
}
@media only screen and (max-width : 360px) {
    .aboutFixed p{
        font-size: 1.1em;
    }   
}
@media only screen and (max-width : 320px) {
    .aboutFixed h1{   

        font-size: 2em;
    }
    .aboutFixed p{
        font-size: 1em;
    }  
}
/*end of about us*/

/* start of contact*/
.contactFixed h1{

    margin: .3em auto;
    margin-top: .8em;
    width: 98%;
    font-size: 7.6em;
    line-height: 80%;
    
}
.contactFixed h3{
    padding-top: .2em;
    margin: .2em auto;
    width: 90%;
    font-size: 1.2em;
    float: left;
}
.contactFixed h2{ 
    width: 90%;
    font-size: 2em;

}
.contactFixed p{
    margin: .8em auto;
    width: 88%;
    font-size: 1.2em; 
}
.contactsLink{

    padding-top: 3em;

    overflow: hidden;
    display: inline-block;
    margin: 0 auto;
    position: relative;
    top: 0;
    left: 0;
    width: calc(60% - 5em);
    height: 20em;
    margin-left: 3em;
}
.socialLink{

    padding-top: 3em;

    overflow: hidden;
    display: inline-block;
    margin: 0 auto;
    position: relative;
    top: 0;
    left: 0;
    width: 35%; 
    height: 20em; 
}

@media only screen and (max-width : 1024px){
    .contactFixed h1{
        margin: .4em auto;

        margin-top: 1.4em;
        width: 96%;
        font-size: 6em;
        line-height: 80%;
    }
    /*    .contactFixed h3{
            padding-top: .2em;
            margin: .2em auto;
            width: 90%;
            font-size: 1.2em;
            float: left;
        }
        .contactFixed h2{ 
            width: 90%;
            font-size: 2em;
    
        }
        .contactFixed p{
            margin: .8em auto;
            width: 88%;
            font-size: 1.2em; 
        }*/
}
@media only screen and (max-width : 900px){
    .contactFixed h1{

        margin: .6em auto; 
        font-size: 5em;
        line-height: 80%;
        margin-bottom: .6em;
    }
    .contactsLink, .socialLink{

        padding: 0;

        position: relative;
        top: 0;
        left: 0;
        width: calc(100% - 6em); 
        height: auto; 
        margin-left: 3em;
    }


} 
@media only screen and (max-width : 768px){
    .contactFixed h1{


        margin-top: 1.6em;
        font-size: 5.4em;
        line-height: 80%;
    }
}
@media only screen and (max-width : 640px){
    .contactFixed h1{

        font-size: 3.8em;
    }
    .contactFixed h2{  
        font-size: 1.6em;

    }
}
@media only screen and (max-width : 416px){
    .contactsLink, .socialLink{

        padding: 0;

        position: relative;
        top: 0;
        left: 0;
        width: calc(100% - 2em); 
        height: auto; 
        margin-left: 1em;
    }


    .contactFixed h1{

        /*margin-top: .8em;*/
        font-size: 2.8em;
    }
    .contactFixed h2{  
        font-size: 1.4em; 

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

}
@media only screen and (max-width : 320px){
    .contactFixed h1{
        /*margin-top: .8em;*/
        font-size: 2em;
    }
    .contactFixed h3{  
        font-size: 1em;

    }
    .contactFixed h2{  
        font-size: 1.2em; 

    }
}

/*@media only screen and (max-width : 400px) {

    .contactFixed h1{

        font-size: 3em; 
    }
    .contactFixed h3{ 
        font-size: 1.2em;
    }
    .contactFixed h2{  
        font-size: 1.4em;
    }
    .contactFixed p{ 
        font-size: 1.2em;
    }
    .contactsLink{ 
        width: 100%;
        height: auto;
    }
    .socialLink{ 
        width: 100%; 
        height: auto;
    }

}*/
/* end of contact*/

/*start of portfolio*/
.portfolioFixed{
    display: inline-block;
    margin: 0 auto;
    position: relative;
    top: 0;
    left: 0;
    width: auto; 
    height: auto; 
}
.portfolioFixed ul{
    margin: 0 auto;
    width: 92%;
}
.portfolioFixed h1{
    margin: .3em auto;
    margin-top: .8em;
    width: 98%;
    font-size: 7.6em;
    line-height: 80%;
    
     color: #fff;
    /*margin-bottom: .6em;*/
 }
.portfolioFixed ul li {
    margin-top: 1em;
    padding: 0;
    border-bottom: 2px solid #fff;
    margin-bottom: .6em;
}
.portfolioFixed ul li h2{
    color: #fff;
    font-size: 3em;
    margin: 0;
    padding: 0;
    line-height: 100%;
    padding-bottom: .1em;
}

.portfolioFixed ul li p{
    color:#fff;
}
.portfolioFixed:hover li h2{
    color: grey;
}
.portfolioFixed:hover li p{
    color: grey;
}
.portfolioFixed li:hover h2 {
    color: #fff;
}
.portfolioFixed li:hover p{
    color: #fff;
}
.BloaderStep3 .portfolioFixed h1{
    color: #fff;
    margin: 1em auto;
    margin-bottom: .2em;
    width: 98%;
    font-size: 5em;}
.BloaderStep3 .portfolioFixed ul li h2{

    color: #fff;
    font-size: 2.6em;
    margin: 0;
    padding: 0; 
    width: 100%;
}
@media only screen and (max-width : 1024px){
    .portfolioFixed h1{
        margin-top: 1.4em;
        font-size: 5.4em; 
    }
    .portfolioFixed ul li h2{ 
        font-size: 2.6em;
    }
}
@media only screen and (max-width : 900px){
    .portfolioFixed h1{ 
        margin: .6em auto; 
        margin-top: 1.4em;
        font-size: 5em; 
    }

} 
@media only screen and (max-width : 768px){
    .portfolioFixed h1{  
        margin-top: 1em;
        font-size: 5.4em; 
    }
    .portfolioFixed ul li h2{ 
        font-size: 2.4em;
    }
}
@media only screen and (max-width : 640px){
    .portfolioFixed h1{  
        margin-top: 1.6em;
        font-size: 3.8em; 
    }
    .portfolioFixed ul li h2{ 
        font-size: 2.2em;
    }
}
@media only screen and (max-width : 416px){
    .portfolioFixed h1{   
        font-size: 2.8em; 
    }
    .portfolioFixed ul li h2{ 
        font-size: 2em;
    }
}
@media only screen and (max-width : 320px){
    .portfolioFixed h1{   
        font-size: 2em; 
    } 
}
/*@media only screen and (max-width : 400px) {
    .portfolioFixed h1{
        margin-top: 2em;
        font-size: 3em;
        margin-bottom: .4em;
    }
    .portfolioFixed ul li h2{
        color: #fff;
        font-size: 2em;
    }
}*/

/*end of portfolio*/
/*start of services */
.servicesFixed{
    display: inline-block;
    margin: 0 auto;
    position: relative;
    top: 0;
    left: 0;
    width: auto; 
    height: auto;
}
.servicesFixed ul{
    width: 92%;
    margin: 0 auto;
}
.servicesFixed h1{
    margin: .3em auto;
    margin-top: .8em; 
    font-size: 7.6em;
    line-height: 80%;
    
     
    color: #fff;
    margin-bottom: .2em;
    width: 98%;
    font-size: 8em;
    line-height: 80%;
}
.servicesFixed ul li {
    margin: 0;
    padding: 0; 
}
.servicesFixed ul li h2{
    color: #fff;
    font-size: 2.8em;
    margin: 0;
    padding: 0;
    line-height: 98%; 
}
.servicesFixed:hover li h2{
    color: grey;
}
.servicesFixed li h2:hover {
    color: #fff;
}
@media only screen and (max-width : 1024px){

    .servicesFixed h1{

        margin: .4em auto;
        margin-top: 1.4em;
        margin-bottom: .2em;
        width: 96%;
        font-size: 6em; 
    }
    .servicesFixed ul li h2{ 
        font-size: 2.6em; 
    }
}
@media only screen and (max-width : 900px){
    .servicesFixed h1{

        margin: .6em auto;
        margin-top: 1.2em;  
        font-size: 5.4em; 
    }
    /*    .servicesFixed ul li h2{ 
            font-size: 2.4em; 
        }*/
} 
@media only screen and (max-width : 768px){

    .servicesFixed h1{


        margin-top: 1.6em; 
        font-size: 5em; 
    }

    .servicesFixed ul li h2{ 
        font-size: 2.4em; 
    }
}
@media only screen and (max-width : 640px){
    .servicesFixed h1{

        /*margin-top: .8em;*/  
        font-size: 3.8em; 
    }
    .servicesFixed ul li h2{ 
        font-size: 2.4em; 
    }

}
@media only screen and (max-width : 416px){
    .servicesFixed h1{

        font-size: 2.8em; 
    }
    .servicesFixed ul li h2{ 
        font-size: 2.2em; 
        line-height: 110%;
    }
}
@media only screen and (max-width : 320px){
    .servicesFixed h1{

        font-size: 2.8em; 
    }
    .servicesFixed ul li h2{ 
        font-size: 2em; 
    }

}
/*@media only screen and (max-width : 400px) {
    .servicesFixed ul{
        margin-left: 1em;
    }
    .servicesFixed h1{ 
        width: 98%;
        font-size: 3em;
        margin-bottom: .6em;
        margin-top: 2em;
    }
    .servicesFixed ul li h2{ 
        font-size: 2em;
    }
}*/
/*end of services*/
/*end of navigator*/
.portData h1{
    width: 90%;
    line-height: 80%;
    margin: .4em auto;
    margin-top: 2em;
    font-size: 4em;
    color: #fff; 
}
.portData h2{
    padding-top: 2em;
    width: 90%;
    line-height: 80%;
    margin: .8em auto;
    font-size: 1.6em;
    color: #fff;
}
.portData img{
    position: relative;
    top: 0;
    left: 1em;
    width: calc(100% - 2em);
    height: auto;
    margin: 0 auto;
}
.portData ul{
    margin: 1em auto;
    text-align: right;
    font-size: 1.4em;
    margin-right: 2em;
    color: #fff;

}
.portData ul li{
    color: #fff;
    display: inline-block;
}
.portData p{
    width: calc(94% - 2em);
    margin: 1em auto;
    color: #fff;
}
.portData a{
    color: #fff;
    width: calc(94% - 2em);
    margin: 1em auto;

}
@media only screen and (max-width : 1024px){
    .portData h1{
        margin-top: 3.6em;
        font-size: 3em;
    }
}
@media only screen and (max-width : 900px){
    .portData h1{
        margin-top: 3.6em;
        font-size: 3em;
    }
} 
@media only screen and (max-width : 768px){
    .portData h1{
        margin-top: 3em; 
        font-size: 2.8em;

    }
}
@media only screen and (max-width : 640px){
    .portData h1{
        margin-top: 3em; 
        font-size: 2.8em; 
    }
    .portData ul{
        font-size: 1.2em;
    }
}
@media only screen and (max-width : 416px){
    .portData h1{
        margin-top: 3.2em; 
        font-size: 2.8em; 
    }
}
@media only screen and (max-width : 320px){
    .portData h1{
        margin-top: 3em;
        font-size: 2em;
    }
    .portData ul{
        font-size: 1em;
    }
}
/*@media only screen and (max-width : 400px) {
    .portData h1{
        margin-top: 3em;
        font-size: 2em;
    }
    .portData ul{
        font-size: 1em;
    }
}*/