/**********************************************************************************************************************************************************************************************************************************************************************************************************************************************DESKTOP VERSION************** ******************************************************************************************************************************************************************************************************************************/
body{
    /*background-color: grey;
    /*background-color:#7d5d3e;
    /*background-color:#cc9900;
    background-color:#333132;
    background-color:#f2f2f2;
    background-color: #1A1A1A;*/
    background-color:#333132;
    background-color:white;
    
    width:100%;
    margin:0 auto;
    font-size:14px;
    line-height:20px;
    /*max-width:1440px;*/
    
}



/***********MOBILE NAVIGATION**********/
nav#mobilemainNav {
    display:none;
    background-color:#333132;
    background-color:white;
    
}






/***********MAIN NAVIGATION************/





nav#mainNav{
    
    z-index:999;
    position:fixed;
    top:0px;
    left:0px;
    background-size:cover;
    width:97%;
    padding-right:3%;
    background-color:transparent;
    background-color:black;
    background-color:#333132;
    background-color:white;
    height: 7.5vw;
}














#workNav{
    float:left;
    z-index:999;
    position:fixed;
    top:0px;
    left:0px;
    background-size:cover;
    width:97%;
    padding-right:3%;
    background-color:transparent;
    background-color:black;
    background-color:#333132;
    background-color:white;
    height: 7vw;
}





#mainNavLogo {
    float:left;
    margin:0 auto;
    padding-top:0%;
    width:20%;
    padding:3%;
    z-index: 999px;
}


li img#navLogo{
    margin-left:0px;
}




ul{
    float:right;
    width:28%;
    padding:3% 0%;
    
}





li{
    float:right;
    display:inline-block;
    width:60px;
    background-color:transparent;
    font-size:1.3em;
    padding-left:0px;
    font-family: 'roboto',bold, sans-serif;
    font-weight: 300;
    margin-right:5px;
    z-index: 999px;
    
}




li a{
    text-decoration:none;
    color:white;
    color:black;
}


li a:hover{
    cursor:pointer;
    /*color:#35a4c0;*/
    color:#00bfff;
    color:deepskyblue;
    
}

li a:active{
    cursor:pointer;
    /*color:#35a4c0;*/
    color:deepskyblue;
}

nav#mainNav li.current a {
    /*color:#35a4c0;*/
    color:deepskyblue;
}



nav#workNav li.current a {
    /*color:#35a4c0;*/
    color:deepskyblue;
}





/**************HEADERS**************/
h1{
    
}

h2{
    font-family: 'roboto-bold';
}

p{
    font-family: 'roboto';
    margin-bottom:0px;
    
}






div#mobilebutton{
    display:none;
}

span.navTitle{
    display:none;
}











/**********SCENE BACKGROUNDS***********/

/*SPLASH PAGE*/
div#homedesk{
    display:inline-block;
    z-index:100;
    margin: 0 auto;
    /*background-image: url(../img/desktop/bg/Home/darrenjkemp.png);*/
    background-size:contain;
    background-repeat: no-repeat;
    background-position: right;
    background-color:deepskyblue;
    background-color:lightgrey;
    background-color:white;
    
    width:100%;
    max-height: 1300px;
    height:100%;
    height:60vw;
    
}


div#homedesk:hover{
    background-color:white;
    background-color:deepskyblue;
    background-color:white;
    
   
    
}






div#homemobile{
    background: contain;
    display:none;
}


#homeLeft{
    display: inline-block;
    padding:120px 3%;
    float:left;
    font-size: 80px;
    font-weight: 700;
    color:#333132;
    font-weight: 600;
    letter-spacing: .035em;
    width:94%;
    padding:none;
    height:700px;
    
    

   
}


/*
#homeRight{
    background-image: url(../img/desktop/bg/Home/darrenjkemp.png);
    background-size:cover;
    background-repeat: no-repeat;
    float:left;
    width:50%;
}

*/







#hello{
    z-index:999;
    width:50%;
    
    
    
}


#helloRule{
    margin-top:10%;
    padding:30px 0px;
    float:left;
    clear:both;
    font-size: 100px;
    font-size: 9vw;
    color:#333132;
    color:black;
    /*border-bottom: 1vw solid #333132;*/
    font-family: 'roboto',bold, sans-serif;
    font-weight: 600;
    letter-spacing: .035em;
    text-align: center;
    padding:5% 17.5%;
    width:65%;
    margin-bottom:3%;
}


span.blue{
    color:#45bbec;
    color:black;
}


div#personalQuote{
    z-index: 0;
    color:#333132;
    color:black;
    /*width:40%;*/
    width:33%;
    float:left;
    clear:both;
    text-align: center;
    font-family: 'roboto', sans-serif;
    font-weight: 100;
    /*font-size:1.7vw;
    font-size:1.5vw;*/
    font-size:16px;
    letter-spacing: .04em;
    line-height: 24px;
    padding:0% 33%;
    
}










/*//////////WORK GRID/////////////*/
div#work{
    z-index:0;
    display:inline-block;
    position:relative;
    position:static;
    margin: 0 auto;
    margin-top:0%;
    padding-top: 5%;
    margin-bottom: 1%;
    background-color: #333132;
    background-color: white;
    width:100%;
    /*height:1300px;*/
    background-size:cover;
    
    
}

/*******PROCESS EXHIBITION*******/  
#workThumb01{
    float:left;
    width:46%;
    height:500px;
    
    margin-left:3%;
    margin-right:1%;
    margin-bottom:1%;
    
    margin-top:1%;
    background-image: url(../img/desktop/bg/Home/thumbnails/process.jpg);
    background-size:cover;
    background-position: center;
    
}




/*******HUDDLE BRANDING*******/  
#workThumb02{
    float:left;
    max-height:1800px;
    width:46%;
    height:500px;
    
    margin-left:1%;
    margin-right:3%;
    margin-bottom:1%;
    
    margin-top:1%;
    /*background-image: url(../img/desktop/bg/Home/thumbnails/huddleLG.png);*/
    background-image: url(../img/desktop/bg/huddle/Assets/img_13.jpg);
    background-color:#39B54A;
    background-color:#ececec;
    background-size:cover;
    background-repeat: no-repeat;
    background-position:center;

}



/*******STRUCTURE MAGAZINE*******/  
#workThumb03{
    float:left;
    max-height:1800px;
    width:46%;
    height:500px;
    
    margin-left:1%;
    margin-right:3%;
    margin-bottom:1%;
    margin-top:1%;
    background-image: url(../img/desktop/bg/Home/thumbnails/structure02.png);
    background-size:cover;
    background-position:center;
}



/*******RUONA TYPEFACE*******/  
#workThumb04{
    float:left;
    max-height:1800px;
    width:46%;
    height:500px;
    
    margin-left:1%;
    margin-right:3%;
    margin-bottom:30px;
    
    margin-top:1%;
    background-image: url(../img/desktop/bg/Home/thumbnails/ruona_paper.jpg);
    background-size:cover;
    background-position:center;
}




/*******ICA INTERNSHIP*******/  
#workThumb05{
    float:left;
    max-height:1800px;
    width:46%;
    height:500px;
    
    margin-left:3%;
    margin-right:1%;
    margin-bottom:1%;
    
    margin-top:1%;
    background-image: url(../img/desktop/bg/Home/thumbnails/ICA_paper.jpg);
    background-size:cover;
    background-repeat: no-repeat;
    background-position:center;
    background-color: #FCB34A;
}






/*******HOME SWEET HOME*******/  
#workThumb07{
    float:left;
    max-height:1800px;
    width:46%;
    height:500px;
    
    margin-left:3%;
    margin-right:1%;
    margin-bottom:1%;
    
    margin-top:1%;
    background-image: url(../img/desktop/bg/Home/thumbnails/HomeSweetHome.gif);
    background-image: url(../img/desktop/bg/Home/thumbnails/HomeSweetHome.gif);
    background-size:contain;
    background-position:center;
    background-color:#ddebf1;
    background-repeat: no-repeat;
}





/*******ALI SITE*******/  
#workThumb08{
    float:left;
    max-height:1800px;
    width:46%;
    height:500px;
    
    margin-left:1%;
    margin-right:3%;
    margin-bottom:1%;
    
    margin-top:1%;
    background-image: url(../img/desktop/bg/Home/thumbnails/Ali_Website01.jpg);
    background-color:#ececec;
    background-size:contain;
    background-repeat: no-repeat;
    background-position:center;

}
    


/*******CAPSTONE PROJECT*******/    
#workThumb09{
    float:left;
    width:46%;
    height:500px;
    
    margin-left:3%;
    margin-right:1%;
    margin-bottom:1%;
    
    margin-top:1%;
    
    /*background-image: url(../img/desktop/bg/Home/thumbnails/NoPlaceLikeHome.jpg);
    */
    
    background-image: url(../img/desktop/bg/theres-no-place-like-home/Assets/Hero_img_02.jpg);
    background-size:cover;
    background-repeat: no-repeat;
    background-position: center;
    background-color:#ececec;
    
    /****
    background-size:contain;
    background-image: url(../img/desktop/bg/theres-no-place-like-home/Assets/img_04.jpg);
    background-color:#fafafa;
    ***/
}





.wrapper {
    position: relative;
    padding: 0;
    width:100%;
    height:600px;
    display:block;
}



.text {
    position: absolute;
    top: 0;
    color:white;
    background-color:rgba(0,0,0,0.9);
    width: 100%;
    height: 350px;
    padding-top:250px;
    line-height:100px;
    text-align: center;
    font-size: 20px;
    font-family: 'roboto';
    z-index: 10;
    opacity: 0;
    -webkit-transition: all 0.25s ease;
    -moz-transition: all 0.25s ease;
    -o-transition: all 0.25s ease;
    transition: all 0.2 s5s ease;
    
}


.text:hover {
    opacity:.75;
}




img {
    z-index:1;
}




/*******/





















/*PROCESS*/
#process{
    background-color:white;
    /*background-color:#333132;*/
    display:inline-block;
    z-index:100;
    margin: 0 auto;
    /*background-image: url(../img/desktop/bg/Home/darrenjkemp_splash%20page.png);*/
    background-size:contain;
    background-position:top;
    background-repeat: no-repeat;
    width:100%;
    /*height:1710px;*/
    padding-top:53px;
}





/************WORK PAGES**********/

div.heroImage01 img{
    margin:auto;
    width:100%;
    background-size:contain;
    margin-top:90px;
    margin-top:50px;
    margin-bottom:25px;
    
}











#workPage{
    display:inline-block;
    margin-top:0px;
    width:94%;
    margin-left:10.7%;
    margin-left:18.7%;
    margin-left:3%;
    margin-right:3%;
}




div.projectTitle{
    height:60px;
    width:81.3%;
    width:65%;
   /* margin-left:18.7%;*/
    margin-left:20%;
    font-family: 'roboto-bold',serif;
    font-weight: 700;
    font-size:30px;
    line-height:1.1em;
    margin-top:20px;
    /*margin-top:10%;*/
    margin-bottom:-20px;
    
    letter-spacing: .02em;
    
}







b{
    float:left;
    clear:right;
    font-family: 'roboto-bold', sans-serif;
    letter-spacing: .02em;
    width:81.3%;
    width:65%;
    /*margin-left:18.7%;
    margin-left:30%;*/
    margin-bottom:10px;
    font-size: 20px;
    margin-left:20%;
    
    
    
}






b.About{
    float:left;
    clear:right;
    font-family: 'roboto', serif;
    letter-spacing: .02em;
    width:100%;
    margin-left:0%;
    
}


/*span.emphasis{
    z-index: 0;
    color:#333132;
    color:black;
    
    
   

    text-align: center;
    font-family: 'roboto-bold', sans-serif;
    font-weight: 100;
    font-size:1.7vw;
    font-size:1.5vw;
    letter-spacing: .04em;
    line-height: 1.4em;
    
}
*/




p{
    float:left;
    margin:auto 0; 
    margin-right:5%;
    margin-bottom: 20px;
    width:50%; 
    min-width:325px;
    font-size: 14px;
    line-height: 24px;
    font-family: 'roboto', sans-serif;
   /*margin-left:18.7%;
    margin-left:30%;*/
    max-width:550px;
    margin-left:20%;
    
    
}







p a{
    cursor:pointer;
    text-decoration:underline;
    color:black;
}



img.imageFull{
    float:left;
    margin-top:30px;
    margin-bottom:100px;
    width:100%;
    clear:both;
    margin-bottom:1.5%;
    margin-top:1.5%;
}



img.imageFullGIF{
    float:left;
    margin-top:0px;
    margin-bottom:100px;
    width:100%;
    margin-left:0%;
    clear:both;
    margin-bottom:1.5%;
    margin-top:1.5%;
}


img.imageLeft{
    float:left;
    clear:left;
    width:48.5%;
    /*margin-bottom:60px;*/
    margin-bottom:1.5%;
    margin-top:1.5%;
    margin-right:1.5%;

    
}


img.imageRight{
    float:right;
    clear:right;
    width:500px;
    width:48.5%;
    /*margin-bottom:60px;*/
    margin-bottom:1.5%;
    margin-top:1.5%;
    margin-left:1.5%;
}

img.imageRightAdobe{
    float:left;
    margin-left:10px;
    margin-right:330px;
    width:100%;
    width:150px;
    margin-bottom:60px;
    margin-bottom:1.5%;
    margin-top:1.5%;
}

img.imageLeft01{
    float:left;
    margin-left:0px;
    width:31.3%;
    margin-bottom:60px;
    margin-bottom:1.5%;
    margin-top:1.5%;
    
}

img.imageCenter02{
    float:left;
    margin-left:3%;
    width:31.3%;
    margin-bottom:60px;
    margin-bottom:1.5%;
    margin-top:1.5%;
}



img.imageRight03{
    float:left;
    margin-left:3%;
    width:100%;
    width:31.3%;
    margin-bottom:60px;
    margin-bottom:1.5%;
    margin-top:1.5%;
}



/**VIDEO**/

iframe{
    float:center;
    clear:both;
    margin-bottom:30px;
    margin-top:30px;
    padding-left:0%;
    margin-bottom:1.5%;
    margin-top:1.5%;
    max-width:1400px;
    width:100%;
}








/************ABOUT PAGE***************/
#about{
    display:inline-block;
    z-index:999px;
    background-color:#333132;
    background-color:white;
    display:inline-block;
    z-index:100;
    margin: 0 auto;
    background-size:contain;
    background-position:top;
    background-repeat: no-repeat;
    
    float:left;
    width:94%;
    padding-left:3%;
    padding-right:0%;
    
    margin-top:40px;
    margin-bottom:40px;
    padding-top:1%;
    

    
}


div#aboutPhoto img{
    float:left;
    margin:auto;
    
    background-image: url(../img/desktop/bg/about/profile02.jpg);
    background-size:cover;
    margin-bottom:0px;
    width:40%;
    
    position:static;
    margin-right:2%;
    margin-bottom:20px;
}







div#aboutPage{
    float:left;
    width:85%;
    padding-left:13%;
    padding-right:%;
    margin-top:15%;
}






div.projectTitleAbout{
    float:left;
    width: 36%;
    margin-bottom:0px;
    margin-right:0%;
    padding-right:15%;
    
}


div.AboutTitle{
    
    font-family: 'roboto-bold',serif;
    font-weight: 700;
    letter-spacing: .04em;
    font-size: 18px;
    margin-bottom: 10px;
    margin-top:0px;
    width:100%;
    letter-spacing: .04em;
}



div#aboutText{
    float:left;
    margin:auto 0; 
    margin-top:0px;
    margin-bottom: 40px;
    font-family: 'roboto-light', sans-serif;
    color:black;
    font-size:14px;
    letter-spacing: .04em;
    line-height: 20px;
    width:100%;
}







div.projectTitleA{
    float:left;
    /*width: 23%;*/
    width: 49%;
    margin-bottom:50px;
    
}




div#awards{
    font-size: 14px;
    line-height: 24px;
    font-family: 'roboto-light', sans-serif;
    color:white;
    color:black;
    margin-bottom:0px;
    width:75%;
    
}





div.projectTitleB{
    float:left;
    width: 49%;
}




div#skills{
    float:left;
    width:45%;
    font-size: 14px;
    line-height: 24px;
    font-family: 'roboto-light', sans-serif;
    color:white;
    color:black;
    margin-bottom:30px;
    margin-right:0%;
    
}


div#getInTouch{
    float:left;
    width:100%;
    font-size: 16px;
    line-height: 24px;
    font-family: 'roboto-light', sans-serif;
    color:black;
    margin-bottom:30px;
    
}

div#getInTouch a{
    color:#29A3CE;
    text-decoration: underline;
    
}




b{
   font-family: 'roboto',sans-serif;
    font-weight: 700;
    letter-spacing: .04em;
    font-size: 14px;
    margin-bottom: 0px;
}



div#socialLinks{
    
}




i{
    font-family: 'roboto',sans-serif;
    color:deepskyblue;
    color:black;
    font-size: 14px;
}
















#mainNav{
    z-index:999;
    position:fixed;
    top:0px;
    left:0px;
    background-size:cover;
    width:100%;
    background-color:transparent;
    background-color:black;
    background-color:#333132;
}







div#homeFooter{
    position:static;
    float:left;
    width:100%;
    height:80px;
    text-align: center;
    background-color: #333132;
    background-color:white;
    margin-top:0px;
    padding-top:0px;
    
}

div#homeFooter small{
    font-family: 'roboto-light', sans-serif;
    font-size:.9em;
    color: black;
    
}







div#workFooter{
    clear:both;
    display:inline-block;
    position:static;
    width:100%;
    height:60px;
    text-align: center;
    background-color: #333132;
    background-color:white;
    margin-top:0px;
    padding-top:50px;
    
}

div#workFooter a{
    float:right;
    font-family: 'roboto-slab', sans-serif;
    font-weight: 400;
    font-size:1.3em;
    color: white;
    color: black;
    margin-right:3%;
    text-decoration: none;
    
}

div#workFooter a: hover{
    cursor:pointer;
    
}














iframe{
    width:100%;
    margin-left:0px;
    background-position: center;
    background-size: cover;
}





/*
.video-container {
position: relative;
padding-bottom: 56.25%;
padding-bottom: 50%;
padding-top: 30px; height: 0; overflow: hidden;
}

.video-container iframe,
.video-container object,
.video-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}



*/










div#workThumb01, 
div#workThumb02, 
div#workThumb03, 
div#workThumb04, 
div#workThumb05, 
div#workThumb06,
div#workThumb07,
div#workThumb08,
div#workThumb09{
        height:600px;
    }
    




div#scroll{
    float:left;
    font-family: 'roboto' sans-serif;
    font-size:.2em;
    width:100%;
    text-align: center;
    margin-top:190px;
    letter-spacing: .12em;
}





















































/**************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************LAPTOP******************* ******************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/

@media only screen and (max-width:1280px){
    
    div#workThumb01, div#workThumb02, div#workThumb03, div#workThumb04, div#workThumb05, div#workThumb06,
    div#workThumb07, div#workThumb08, div#workThumb09{
        height:400px;
        
    }
    
    
    
    
    
    li{
        font-size:1.25em;

    }
    
    
    .wrapper {
    height:400px;
    height:600px;
    
    }



    .text {
    
    height: 275px;
    padding-top:125px;
    
    }
    
    img.imageFullGIF{
    float:left;
    margin-top:0px;
    margin-bottom:100px;
    width:122%;
    margin-left:-13.1%;
    clear:both;
    margin-bottom:1.5%;
    margin-top:1.5%;
    }
    
    
    nav#mainNav{
    
    z-index:999;
    position:fixed;
    top:0px;
    left:0px;
    background-size:cover;
    width:97%;
    padding-right:3%;
    background-color:transparent;
    background-color:black;
    background-color:#333132;
    background-color:white;
    height: 7em;
    }





    iframe{
    float:center;
    clear:both;
    margin-bottom:30px;
    margin-top:30px;
    padding-left:0%;
    margin-bottom:1.5%;
    margin-top:1.5%;
    max-width:1200px;
    max-height:600px;
    width:100%;
    
    
    
    }








    #workNav{
    float:left;
    z-index:999;
    position:fixed;
    top:0px;
    left:0px;
    background-size:cover;
    width:97%;
    padding-right:3%;
    background-color:transparent;
    background-color:black;
    background-color:#333132;
    background-color:white;
    height: 7em;
    }

   img.imageFullGIF{
    float:left;
    margin-top:0px;
    margin-bottom:100px;
    width:100%;
    margin-left:0%;
    clear:both;
    margin-bottom:1.5%;
    margin-top:1.5%;
    }

    
    #mainNavLogo {
    float:left;
    margin:0 auto;
    
    
    margin-left:0%;
    font-family: 'roboto',bold, sans-serif;
    font-weight: 400;
    font-size:20pt;
    padding-top:0%;
    width:20%;
    padding:3%;
    }


    li img#navLogo{
    margin-left:0px;
    }

    
}


































/**************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************MOBILE VERSION******************* ******************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/


@media only screen and (max-width:780px){
    body{
        margin:0 auto;
        background-color:#333132;
        background-color:white;
        width:100%;
        font-size:5.3vw;
        line-height:8.3vw;
        max-width: 414px;

    }
    
    nav ul{
        float:left;
        width:100%;
        z-index: 999;
        margin:none;
        padding:none;
        padding-top:30px;
        margin:0 auto;
        height:615px;
        z-index: 999;
        background-color:white;
        margin-top:60px;
        
    }
    
    
    nav li{
        width:100%;
        height:20px;
        padding:6vw 0vw;
        background-color:#333132;
        background-color:white;
        text-align: center;
        text-align: center;
        font-family: 'roboto', sans-serif;
        
        
        
    }
    
    
    nav#mobilemainNav li.current a{
        color:white;
        color:black;
    }
    
    li a{
        color:white;
        color:black;
    }
    
    li a:selected{
        color:white;
        color:black;
    }
    
    nav#mobilemainNav a:hover{
        color:white;
        color:black;
        
    }
    
    
    h1{
        font-size:7.3vw;
    }
    
    
    
   /* div#nav{
        display:none;
    }
    */
    
    nav#mainNav{
        display:none;
    }
    
    nav#workNav{
        display:none;
    }
    
    
    
    img#navLogo{
        display:inline-block;
        float:left;
    }
    
    #mainNavLogo {
    float:left;
    margin:0 auto;
        
    }

    li#mainnavLogo{
        display:inline-block;
    }

    
    
    span.navTitle{
    display:block;
    }
    
    
    
    /***************************************************HOMEPAGE**********************/
    
    div#homedesk{
        height:300px;
        
    }
    
    

    
    div#homedesk:hover{
    background-color:none;
    
    }

    
    
    
    #helloHover{
    z-index: -999;
    /*margin-top:-100px;*/
    margin-top:0px;
    /*margin-left:-145px;*/
    margin-left:0px;
    background: cover;
    width:100%;
        
}  
    
    
    #homeLeft{
    width:100%;
    max-width: 385px;
    float:left;
    font-size: 80px;
    cursor:pointer;
    font-family: sans-serif;
    font-weight: 700;
    color:#333132;
    color:black;
    font-family: 'roboto',bold, sans-serif;
    font-weight: 600;
    letter-spacing: .035em;
    height:25%;
    background-color:white;

   
}



#hello{
    z-index:999;
    width:50%;
    
    
    
}


#helloRule{
    float:left;
    width:85%;
    margin-top:0px;
    padding:10px 7.5%;
    padding-bottom: 30px;
    font-size: 80px;
    color:black;
    font-family: 'roboto',bold, sans-serif;
    font-weight: 600;
    letter-spacing: .035em;
    text-align: center;
    
}




div#personalQuote{
    z-index: 0;
    color:black;
    /*color:#f2f2f2;*/
    width:85%;
    margin:0px 0px;
    margin-left:7%;
    margin-top:15px;
    padding:0px 0px;
    font-size:4.9vw;
    float:left;
    line-height: 24px;
    text-align: center;
    font-family: 'roboto', sans-serif;
    font-weight: 100;
    font-size:16px;
    letter-spacing: .0em;
}



#helloHover{
    display:none;
}

    
   /* span.emphasis{
    z-index: 0;
    color:#333132;
    color:black;
    
    text-align: center;
    font-family: 'roboto-bold', sans-serif;
    font-weight: 100;
    font-size:3.9vw;
    letter-spacing: .04em;
    line-height: 1.4em;
    
    }/*
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
  /*       MOBILE NAVIGATION     */  
    div#mobilebutton{
        z-index:999;
        position:fixed;
        /*display:inline-block;*/
        display:block;
        /*background-color: black;*/
        background-color:white;
        width:100%;
        height:30px;
        padding:10px;
        margin-top:none;
        margin-left:none;
        
        
        
    
    }
    
    div#mobilebutton img{
        z-index:999;
        display:block;
        float:right;
        margin-left:88%;
        padding-top:10px;
     
    }
    
    
    div img#MENUHam{
        display:block;
        float:right;
        position:fixed;
        width:20px;
        z-index:999;
        /*top:4vw;*/
        
    
    }
    
     div img#MENUX{
        display:none;
        position:fixed;
        width:4.5%;
        width:20px;
        
        z-index:999;


    }
    
    
   
    nav#mobilemainNav{
        display:hidden;
        MARGIN-TOP:0px;
        float:right;
        z-index:1;
        position:fixed;
        width:100%;
        height:350px; 
        /*margin-top:60px;*/
        
    }
    
    
    
    
    
    nav#mobilemainNav li a{
        width:10vw;
        font-size:5vw;
        
    }
    
    
    
    

    
    
    
    
    /*************BACKGROUND PAGES***********/
    
    /*SPLASH PAGE*/
    div#homedesk{
        margin: 0 auto;
        background-color:#333132;
        background-color:white;
        width:100%;
        height:370px;
        background-image: none;
    }
    
    
    div#homedesk:hover{
        
        background-color:white;
        
    }
   
    
    div#homeText img{
        display:block;
        width:220px;
        margin-top:240px;
        
    }
    
    
    
    span.text {
    display:none;
    
    }


    span.text:hover {
    display:none;
    }
    
    
    
    
    
    
    
    
    
    
    
    /*WORK*/
    div#work{
        width:100%;
        background-color: #333132;
        background-color:white;
        
    }
    
    
    /*THUMBNAILS*/
    div#workThumb01{
        margin-top:0px;
        margin-bottom: 20px;
        height:400px;
        width:90%;
        background-color:darkgray;
        background-color:white;
        margin-left:5%;
        margin-right:5%;
        margin-bottom:3%;
        margin-top:1%;
    }
    
    
    div#workThumb01 a:hover{
        color:none;
    }

    
    
    
    div#workThumb02{
        margin-top:0px;
        margin-bottom: 20px;
        height:400px;
        width:100%;
        background-color:darkgray;
        margin-left:0%;
        margin-right:0%;
        margin-bottom:3%;
        margin-top:1%;
        
        width:90%;
        margin-left:5%;
        margin-right:5%;
    }
    
    div#workThumb03{
        margin-top:0px;
        margin-bottom: 20px;
        height:400px;
        width:100%;
        background-color:darkgray;
        margin-left:0%;
        margin-right:0%;
        margin-bottom:3%;
        margin-top:1%;
        
        width:90%;
        margin-left:5%;
        margin-right:5%;
    }
    
    div#workThumb04{
        margin-top:0px;
        margin-bottom: 0px;
        height:400px;
        width:100%;
        background-color:darkgray;
        margin-left:0%;
        margin-right:0%;
        
        margin-top:1%;
        
        width:90%;
        margin-left:5%;
        margin-right:5%;
    }
    
    div#workThumb05{
        margin-top:0px;
        margin-bottom: 20px;
        height:400px;
        width:100%;
        background-color:darkgray;
        margin-left:0%;
        margin-right:0%;
        margin-bottom:3%;
        margin-top:1%;
        
        width:90%;
        margin-left:5%;
        margin-right:5%;
    }
    
    div#workThumb06{
        margin-top:0px;
        margin-bottom: 20px;
        height:400px;
        width:100%;
        background-color:darkgray;
        margin-left:0%;
        margin-right:0%;
        margin-bottom:3%;
        margin-top:1%;
    }
    
    div#workThumb07{
        margin-top:0px;
        margin-bottom: 20px;
        height:400px;
        width:100%;
        background-color:darkgray;
        margin-left:0%;
        margin-right:0%;
        margin-bottom:3%;
        margin-top:1%;
        background-size: cover;
        
        
        width:90%;
        margin-left:5%;
        margin-right:5%;
    }
    
    
    
    
    div#workThumb08{
        margin-top:0px;
        margin-bottom: 20px;
        height:400px;
        width:100%;
        background-color:darkgray;
        margin-left:0%;
        margin-right:0%;
        margin-bottom:3%;
        margin-top:1%;
        background-size: cover;
        
        width:90%;
        margin-left:5%;
        margin-right:5%;
    }
    
    div#workThumb09{
        margin-top:0px;
        margin-bottom: 20px;
        height:400px;
        width:100%;
        background-color:darkgray;
        margin-left:0%;
        margin-right:0%;
        margin-bottom:3%;
        margin-top:1%;
        background-size: cover;
        
        width:90%;
        margin-left:5%;
        margin-right:5%;
    }
    
    
    
    
    
    
    
    
    .text {
    position: absolute;
    top: 0;
    /*color:black;*/
    color:white;
    /*background-color:rgba(255,255,255,0.8);*/
    background-color:rgba(0,0,0,0.8);
    width: 100%;
    height: 100%;
    line-height:100px;
    text-align: center;
    font-size: 18px;
    font-family: sans-serif;
    z-index: 10;
    opacity: 0;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
    
}


.text:hover {
    opacity:none;
}


    
    
    
    
    
    
    
    
    
    
    
    /**************************************************Process Work Page********/
    
    body#process{
        width:100%;
        margin-top:-55px;
        max-width:414px;/*IPhone 7 plus***/
    }
    
    
    
    div.heroImage01{
        width:100%;
        margin-top:0px;
        max-width:414px;
    }
    
    
    
    
    
   
    div.projectTitleA{
        
        width:100%;
        max-width:414px;
        font-size: 30px;
        margin-left:5%;
        margin-top:130px;

        
        

        
    }
    
    
    div.projectTitleB{
        
        width:100%;
        max-width:414px;
        font-size: 30px;
        margin-left:5%;
        margin-top:0px;

        
        

        
    }
    
    
    
    
    div.projectTitleP img{
    margin-left:10.7%;
    margin-right:64%;
    width:85%;
    height:100%; 
    max-width:350px;
    max-width:414px;

    }
    
        
    #workPage{
    display:block;
    margin-top:20px;
    /*width:81.3%;*/
    width:100%;
    /*margin-left:10.7%;*/
    margin-left:0;
    margin-right:0;
    max-width:414px;
    }
    
    
    
    p{
        margin-bottom:10px;
        margin-top:5px;
        MARGIN-LEFT:5%;
        margin-bottom:30px;
        font-size: 14px;
        line-height:22px;
    }
    
    
    
    
    img.imageFull{
    margin-top:10px;
    width:100%;
    margin-bottom:1.5%;
    margin-top:1.5%;
    
    
    }
    
    
    img.imageFullGIF{
    float:left;
    margin-top:0px;
    margin-bottom:1.5%;
    margin-top:1.5%;
    width:122%;
    margin-left:-11%;
    clear:both;
    }
    
    img.imageLeft{
    float:left;
    margin-left:0px;
    margin-bottom:1.5%;
    margin-top:1.5%;
    width:100%;
    
    }
    
    
    img.imageRight{
    float:left;
    margin-left:0px;
    margin-bottom:1.5%;
    margin-top:1.5%;
    width:100%;
    
    }
    
    
    
    img.imageLeft01{
    float:left;
    margin-left:0px;
    width:100%;
    margin-bottom:1.5%;
    margin-top:1.5%;
    
    }

    img.imageCenter02{
    float:left;
    margin-left:0px;
    width:100%;
    margin-bottom:1.5%;
    margin-top:1.5%;
    }



    img.imageRight03{
    float:left;
    margin-left:0px;
    width:100%;
    margin-bottom:1.5%;
    margin-top:1.5%;
    }
    
    
    
    /**VIDEO**/

    iframe{
    float:left;
    width:100%;
    height:250px;
    margin-bottom:1.5%;
    margin-top:1.5%;
    max-height:700px;
    max-width:450px;
    
    
    }

     
    
    img.imageFullGIF{
    float:left;
    margin-top:0px;
    margin-bottom:100px;
    width:100%;
    margin-left:0%;
    clear:both;
    margin-bottom:1.5%;
    margin-top:1.5%;
}
    
    
    
    
    
    
    
    
    
    
    /******ABOUT PAGE********/
    
    
    div#about{
        padding-top:40px;
        display: inline-block;
        margin-top:0px;
        margin-right:5%;
    }
    
    
    div#aboutPhoto img{
        width:100%;
        /*padding-left:3%;*/
        margin-left:0%;
        margin-bottom:0;
        margin-top:0px;
        width:370px;
        
    }

    div#aboutPage{
    float:left;
    width:90%;
    margin-left:-10%;
    margin-top:15%;
    }


    div.AboutTitle{
    font-size: 24px;
    margin-bottom:5px;
    margin-left:0%;
    /*border-bottom:2px solid black;*/
    width:100%;
    
    }
    
    
    
    div#aboutText{
    float:left; 
    margin-bottom: 30px;
    margin-top:0%;
    width:100%; 
    min-width:330px;
    font-family: 'roboto-light', sans-serif;
    color:black;
    margin-left:0%;
    font-size: 14px;
    line-height: 22px;
    width: 360px;
  
        
    }

    

    
    div.projectTitleA{
    margin-top:20px;
    float:left;
    margin-bottom:10px;
    max-width: 360px;
    margin-left:0%;
    
    
    }


    div.projectTitleB{
    margin-top:10px;
    float:left;
    margin-bottom:80px;
    max-width: 360px;
    margin-left:0%;
    }
    
    
    

    div#awards{
    
    margin:auto 0; 
    margin-top: 0px;
    margin-bottom: 0px;
    MARGIN-LEFT:0%;
    width:60%; 
    min-width:330px;
    /*font-size: 3.13vw;
    line-height:5.5vw;*/
    font-size: 14px;
    line-height:22px;
    font-family: 'roboto-light', sans-serif;
    color:black;
    
    
    }






    div#skills{
    float:left;
    margin:auto 0;
    margin-bottom: 0px;
    MARGIN-LEFT:0%;
    width:30%; 
    min-width:330px;
    /*font-size: 18px;
    line-height: 25px;
    font-size: 3.13vw;
    line-height:5.5vw;*/
    font-size: 14px;
    line-height:22px;
    font-family: 'roboto-light', sans-serif;
    color:white;
    color:black;
        
    }

    
    
    
    div#getInTouch{
    
    margin:auto 0; 
    margin-bottom: 0px;
    MARGIN-LEFT:0%;
    width:60%; 
    min-width:330px;
    /*font-size: 18px;
    line-height: 25px;
    font-size: 3.13vw;
    line-height:6vw;*/
    font-size: 16px;
    line-height:20px;
    font-family: 'roboto-light', sans-serif;
    color:black;
    margin-top: 20px;
        
    }

    #getInTouch a href{
    margin-right:5px;
    }
    
    div#homeFooter{
    position:static;
    float:left;
    width:100%;
    height:80px;
    text-align: center;
    background-color: #333132;
    background-color:white;
    margin-top:70px;
    padding-top:0px;
    
    }
    
    
    
    div#homeFooter{
    position:relative;
    float:left;
    width:100%;
    height:30px;
    text-align: center;
    background-color: #333132;
    background-color:white;
    max-width:414px;
    margin-top:50px;
    padding-top:0px;
    margin-bottom:20px;
    
    }

    
    
    
    
    
    
    
    div#homeFooter small{
    font-family: 'roboto', sans-serif;
    font-size:13px;
    color: black;
    
    }
    
    
    
    
    
    
    
    
    div#workFooter{
        float:left;
        position:relative;
        display:inline-block;
        width:100%;
        height:90px;
        padding-top:25px;
        margin-bottom:0px;
        max-width:414px;
    }
    
    
    
    div#workFooter a{
        margin:0 auto;
        margin-top:0px;
        font-size:.7em;
        width:30%;
        margin-top:10px;
        margin-right:2%;
    }
    
    
    
    
    p{
        font-size: 14px;
        line-height: 20px;
        margin-bottom:10px;
        width:345px;

    }
    
    
    
    
    
    
    b{
        margin-left:5%;
        width:95%;
        max-width: 480px;
        font-size: 14px;
        margin-bottom: -5px;
        
    }
    
    
    b.About{
    float:left;
    clear:right;
    font-family: 'roboto', serif;
    letter-spacing: .02em;
    width:100%;
    margin-left:0%;
    font-size: 14px;
    
    }
    
    
    
    #about{
    
    float:left;
    width:90%;
    padding-left:5%;
    padding-right:0%;
    
    margin-top:40px;
    padding-top:0%;
    
    
    }
    
    
    
    
    div.projectTitle{
        width:95%;
        margin-left:5%;
        font-size: 1.75em;
        margin-bottom:-35px;
        float:left;
        max-width:414px;
        font-size: 25px;
        margin-top:20%;
        margin-top:0px;

        
    }
    
     
    
    
    div.slimScrollBar{
        display:none !important;
    }
    
    div.slimScrollRail{
        display:none !important;
    }
    
    div.slimScrollDiv{
        height:auto !important;
    }
    
    br{
        line-height: 1.5em;
    }
    
}