*{margin:0;}
html{width:100%; overflow-x: hidden;}
/*body{background: #f5f5f5;}*/
ul{
    font-family:'Open Sans', Helvetica, Arial, Verdana, sans-serif;
    font-size:14px;
    background: white;
    padding-right:1%;
    color:black;
}


h2{font-family:"Athelas"; font-size:1.2vw; font-weight:100; color:#FFF; margin:0px 0 0 5px; /*opacity:0.8*/}
/*h3{font-family:"Open Sans", Helvetica, Arial, Verdana, sans-serif; font-size:20px; font-weight:300; color:#FFF; margin:0 0 2% 0px; padding:0.5% 0 0.5% 5px;}*/ 
h4{font-family:"Open Sans", Helvetica, Arial, Verdana, sans-serif; font-size:14px; font-weight:200; color:#FFF; margin:0 0 2% 0px}    
h5{}
h6{font-family:/*"Athelas"*/"Open Sans"; font-size:94px; font-weight:100; color:#FFF; margin:0px 0 0 5px; opacity:0.7;}
    
#techNavContainer, #showNav, #techNav, #animNav{width:90%; position:relative; margin:0 auto 0 auto; max-width:1440px;}

#showNav{width:72%; max-width:1280px;}

#showNav, #techNav, #animNav{position:absolute; top:5%; left:0; right:0; display:}
/*#showNav, #techNav, #animNav{position:absolute; top:5%; left:0; right:0;}*/
.overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 105%;
	height: 105%;
	background: #fff;
	/*z-index: 100;*/
}

#anim,
#artShop, 
#digDes, 
#digPrint, 
#edRes, 
#fab,
#fash,
#jour,
#knit,
#loans,
#media,
#photo,
#printC,
#printT,
#proj{width:100%; background: white;}
    

#a, #fixed-a{background:purple;}
#as, #fixed-as{background:darkorange;}
#da, #fixed-dd{background:sienna;} 
#dd, #fixed-dd{background:teal;} 
#df, #fixed-dd{background:#062b01;}
#de, #fixed-dd{background:#ba81f7;}
#dc, #fixed-dc{background:/*#033e3e*//*coral;*//*deeppink*//*plum*/lightcoral}
#dp, #fixed-dp{background:deepskyblue;}
#erc, #fixed-erc{background:darkseagreen;}
#f, #fixed-f{background:maroon;}
#fs, #fixed-fs{background:goldenrod;}
#fm, #fixed-j{background:magenta;}
#it, #fixed-it{background:black;}
#k, #fixed-k{background:green;}
#ld, #fixed-ld{background:#3d1d12;}
#fa, #fixed-mc{background:#d1be4f;}   
#p, #fixed-p{background:olive;}
#pc, #fixed-pc{background:navy;}
#pt, #fixed-pt{background:crimson;}

#sp, #fixed-sp {
    background: #8bc34a; 
    width:16.75%; 
    position: absolute;
    left: 15.77%;
    top:-2%;
}

#ta, #fixed-ta{background:whitesmoke; display:block;}
 #ta h6{color:black;}
 #ta .boxInner, #ta .pInner{background: white; opacity: 0.7; color: black; font-size:1.8vw; letter-spacing: -0.06em; }
 #sp .boxInner, #sp .pInner{/*background: white; opacity: 0.7;color: white; font-size:1.8vw; letter-spacing: -0.06em;*/ }

.a{color:purple;border-radius:1px; /*border-top:1px solid purple; border-bottom:1px solid purple;*/}
.as{color:darkorange; border-radius:2px; /*border-top:1px solid orange; border-bottom:1px solid orange;*/}
.dd{color:teal ;border-radius:2px; /*border-top:1px solid silver; border-bottom:1px solid silver;*/}
.dc{color:/*#033e3e*/lightcoral; border-radius:2px;}
.dp{color:deepskyblue; border-radius:2px;/* border-top:1px solid deepskyblue; border-bottom:1px solid deepskyblue;*/}
.erc{color:darkseagreen; border-radius:2px;/* border-top:1px solid darkseagreen; border-bottom:1px solid darkseagreen;*/}
.f{color:maroon; border-radius:2px;/* border-top:1px solid maroon; border-bottom:1px solid maroon;*/}
.fs{color:goldenrod; border-radius:2px; /* border-top:1px solid gold; border-bottom:1px solid gold;*/}
.df{color:#062b01; border-radius:2px;/* border-top:1px solid pink; border-bottom:1px solid pink;*/}
.de{color:#ba81f7; border-radius:2px;/* border-top:1px solid pink; border-bottom:1px solid pink;*/}
.j{color:pink; border-radius:2px;/* border-top:1px solid pink; border-bottom:1px solid pink;*/}
.k{color:green; border-radius:2px; /*border-top:1px solid green; border-bottom:1px solid green;*/}
.ld{color:#3d1d12; border-radius:2px;/* border-top:1px solid #3d1d12; border-bottom:1px solid #3d1d12;*/}
.fa{color:#d1be4f; border-radius:2px; /*border-top:1px solid navy; border-bottom:1px solid navy;*/}   
.p{color:olive; border-radius:2px; /*border-top:1px solid olive; border-bottom:1px solid olive;*/}
.pc{color:navy; border-radius:2px; /*border-top:1px solid magenta; border-bottom:1px solid magenta;*/}
.pt{color:crimson; border-radius:2px; /*border-top:1px solid red; border-bottom:1px solid red;*/}
.sp{color:#8bc34a; border-radius:2px; }
    
.element, .eSpacer, .logo{
    width:16%/*19.5%*/;
    position:relative;
    float:left;
    margin:0.25%;
    border-radius:5%;
    cursor:pointer;
    overflow: hidden;
}
    
.logo{position:absolute; top:0; background:#e30613; z-index:25; width:100%;}
.logo h1, .fixed-logo h1{
    font-family:'Open Sans', Helvetica, Arial, Verdana, sans-serif;
    font-size:1vw;
    /*font-weight:200;*/
    margin:0px 0 0 6%;
}
.fixed-logo{
    position: absolute;
    top:2%;
    /*font-weight:100; */
    left:0; 
    width:/*14%*/15%;
    max-width:285px;
    z-index:100; 
    background:#e30613; 
    color:#FFF;
    overflow:hidden;
    transform: rotate(-2deg);
    border-radius:5%;
}

#showNav .element, #showNav .fixed-logo, #showNav .eSpacer{width:25%}

#dd h2{
    font-size: 0.7vw;
    margin: 0 0 0 5px
}

.element h2, .sideBox h2{
    position:absolute; 
    top:54%; 
    font-family:"Athelas"; 
    font-size:0.8vw; 
    font-weight:100; 
    color:#FFF; 
    margin: -1% 0 0 5px; 
    opacity:0.7
}
.element h6, .sideBox h6{
    position:absolute; 
    top:-3.5% /*0*/; 
    font-family:"Open Sans"; 
    /*font-size:5.5vw;*/ 
    font-weight:/*100*/400; 
    color:#FFF; 
    margin:0px 0 0 2px; 
    opacity:0.7;
    letter-spacing: -0.06em;
}
    
.boxInner, .headLogo{
    position:absolute;
    top:/*25%*/40%;
    width:100%;
    height:60%; 
    background: rgba(255, 255, 255, 0.3); ;
    /*opacity:0.3; */
    pointer-events:none; 
    color: rgba(0, 0, 0, 0.5);
    font-family:'Open Sans', Helvetica, Arial, Verdana, sans-serif;
    font-size:1.5vw;
    font-weight:300;
    line-height:1.4;
    padding:/*16%*/0 0 0 4px;
    z-index:25;
}

.image50{width:48.5%; margin:0.5% 0 2% 0.5%;}
.image100{width:98%; margin:0.5% 0 2% 0.5%;}
.image200{width:194%; margin:0.5% 0 2% 0.5%;}

#tabs {
	width: 160px;
	height: 225px;
	margin: 80px auto 0 0px;
	position: relative;
	float:left;
}

#tabs ul li {
    float:left; 
    display:block; 
    width:155px; 
    height:50px; 
    margin:0 0 0px 0px;
    padding:10px 0 0 5px;
    color:white;
    font-family: "Open Sans", sans-serif;
    border-radius: 3px;
}

#tab1{background: #caaf54; opacity:0.8}
#tab2{background: #b1a16a; opacity:0.8}
#tab3{background: #b3a67c; opacity:0.8}
#tab4{background: #dc291e; opacity:0.8}

.clearfix{clear:both}

.menuIcon {
    width:30px;
    /*height:20%;*/
    position:absolute;
    right:-40px;
    top:0px;
    cursor:pointer;
    z-index:100; 
    pointer-events:none;
}

#techRes-nav .menuIcon{right:-50px;}

.iBar, .iBarBlack{width:100%; padding:25% 0 0 0; border-bottom:white 2px solid;}
.iBarBlack{border-bottom:black 2px solid;}
.lCross, .rCross, .lCrossBlack, .rCrossBlack{
    position:absolute;
    width:100%;
    margin:40% 0 0 0;
    padding:0% 0 0 0;
    border-bottom:white 2px solid; 
    -ms-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}

.lCrossBlack, .rCrossBlack{
    border-bottom:black 2px solid; 
}
.rCross, .rCrossBlack{
    /*margin:0 0 20% 0;*/
    -ms-transform: rotate(135deg); 
    -webkit-transform: rotate(135deg); 
    transform: rotate(135deg);
}


@media screen and (max-width:736px) {
    .box0{display:none;}
    .box2{width:100%;}
    .mobContent{display:block;}
    .column50pc{width:100%; float:none;}  
    .box1 {display:none;}
   /* .fixed-logo{left:14%4%; top:4%; width:14%}*/
    
    
}

@media screen and (min-width:736px) {
    /*.element h2, .sideBox h2{font-size:1.05vw; margin:-5% 0 0 7px;}*/
}

@media screen and (max-width:1110px) {
    .image50{width:48%; margin:0.5% 0 2% 0.5%;}
}

@media screen and (max-width:1800px) /*and (min-width 1700px*/{
    /*.element h6 {top: 0;}*/ 
}

@media screen and (max-width:1920px) {
    h6 { font-size: 5.5vw;}
    ul{font-size:16px;}
    h2{font-size: 0.8vw; margin:0px 0 0 6%;}
    /*h3{font-size:24px; padding:0.5% 0 0.5% 5px;}*/ 
    /*h3{font-size:28px; font-weight:300; padding:0.25% 0 0.75% 5px;}*/
    #mastNav{margin:1.5% auto 0 auto}
    /*.logo h1, .fixed-logo h1{font-size:1.2vw;}*/
    
    /*.element h6, .sideBox h6{font-size:7.5v;}*/
    /* .element h2, .sideBox h2{font-size:1.05vw; margin:-5% 0 0 7px;}*/
    /* .boxInner, .headLogo{font-size:1.65vw; line-height:1.3; margin:-2% 0 0 0}*/
    .copy{font-size:16px;}         
}



@media screen and (min-width:1921px) {
    h6 { font-size: 4vw;}
    h2 {margin: 0px 0 0 20px; font-size: 0.8vw;}
    ul{font-size:18px;}
    /*h3{font-size:32px}*/
    #mastNav{margin:1% auto 0 auto}
    .logo h1, #fixed-logo h1, #fixed-logo1 h1{font-size:0.8vw;}
    /*.fixed-logo {left: 12.5%; top: 5%; width:12%}*/
    /*.fixed-logo{left:12%; top:0.5%;}*/
    /*.element h6, .sideBox h6{font-size: 5.7vw;}
    /*.element h2, .sideBox h2{font-size:0.9vw; margin:0% 0 0 10px;}*/
    /*.boxInner, .headLogo{font-size:1.7vw; line-height:1.25; padding-left: 10px;}*/
    .sideBox{margin:20% 0 0 0;}
    .copy{font-size:18px;}
    .boxInner {font-size:1.2vw;}
}

@media screen and (max-width:480px) {
    h2{font-size:2.2vw; margin:0px 0 0 5px; }
   /* h3{font-size:18px;}*/
    
    .menuIcon{top:-25px; right:0px; width:7%;}
    #container{width:100%;}
    #mastNav{width:95%; margin:15px auto 0 auto;}
    #showNav{width:95%; max-width:1280px;}
    
    #sp,.element,.eSpacer, .logo, #showNav .element, #showNav, .eSpacer{width:/*33.33%*/32.6%;}
    .element h2{top:55%; font-size:2.2vw;}
    .element h6, .sideBox h6{top:0; font-size:12vw; margin:0px 0 0 5px;}
    /*.sideBox h2{display:none;}*/
    #sp{width:33.5%; left:31.75%; top:-0.55%;}
    .logo{
        position:absolute;  
        top:0; 
        background:#e30613; 
        z-index:25; 
        width:100%;
    }
    .logo h1, .fixed-logo h1{
        font-family:'Open Sans', Helvetica, Arial, Verdana, sans-serif;
        font-size:2vw;
        font-weight:200;
        margin:0px 0 0 5px;
    }
    
    .fixed-logo h1{margin:0 0 0 5px;}
    .fixed-logo, #showNav .fixed-logo{
        position:absolute;
        top:/*10px*/0;
        font-weight:100; 
        left:/*2.5%*/-1.25%; 
        width:32.5%;
    }
    
    .boxInner, .headLogo{
        font-size:3.9vw;
    }
    .sideBox /*.boxInner*/{
        display:none;
    } 
    .copy{
        word-spacing:-0.07em;
        letter-spacing:-0.03em;
    }    
}