/* CSS Document */


@import  url(reset.css);
@import  url(animation.css);
@import  url(pages.css);
@import  url(colGrid.css);
@import  url(mob.css);
/*fonts*/
@import url("https://use.typekit.net/qfl7zmq.css");




 :root {
    --mcolor:#fff;
    --tcolor1:#000;
    --tcolor2:#009ee3; 
    --mHover:#009ee3;
     --Bcol1: #eb6ea7; /*mag, illus*/
     --Bcol2: #009ee3; /*cyan, motion*/
     --Bcol3: #00c496; /*green, photo*/
     --Bcol4: #ffee07; /*yel, graph*/
     --Bcol5: #fff;
     --hover: #009ee3;
	 --hoverWhite: white;
    --detail-color:rgba(234,234,234,1.00);
    --ltype: 42px;
    --mtype: 20px;
    --stype: 16px;
    --xLarge:80px;
     --SvarType: 5vw;
    --varType: 25vw;
    --mtface: "neue-haas-grotesk-display", sans-serif;
	--altType: "eurostile", sans-serif;
    --xpos:50px;
    --ypos:10px;
    
    

}

.mobApp {
        display:none!important;
        
        
    }

#lPlayer{ width:100%; height:100%;   }

a {
    color:var(--tcolor1);
}



a:visted{
    color: var(--tcolor1);
}


    body{
        width: 5000px;
        height: 5000px;
        overflow: hidden;

    }

h1{
font-family:var(--altType);
	}
    
h2,h3,h4,h5,h6, figcaption{
    font-family: var(--mtface);
    
}

#home h3 {
   width:80%;
    
  font-size:30px;
   height: auto;
   margin: 40vh auto;
	letter-spacing:0.04em;
	text-align: center;
    
}


p{ font-size: var( --stype); line-height: 18px; margin:0px 0px 10px 0px; }
#back{
    
    width:100vw;
    height: 100vh;
    position: fixed;
    z-index: -1;
    display: block;
}


#back header {
    background: var(--mcolor);
    height: 50px;
}
.line{
        width:100%;
        margin: 0 auto;
        height:2px;
        overflow: hidden;
        position: absolute;
        top:0px;
        z-index: 1000;
       
        
    }
.line .Red{ width:27.28%; float: left; }



.line .Green{ width:12.12%; float: left;}

.line .Blue{ width:10.6%;float: left;}

.line .Yellow{ width:50%;float: left;}

.line .Yelfull{ width:100%;float: left;}

.lineStu{
        width:100%;
        margin: 0 auto;
        height:50px;
        overflow: hidden;
        position: absolute;
        top:0px;
        z-index: 100;
       
        
    }
.lineStu .Red{ width:100%; float: left; }



.lineStu .Green{ width:100%; float: left;}

.lineStu .Blue{ width:100%;float: left;}

.lineStu .Yellow{ width:100%;float: left;}

.lineStu .Yelfull{ width:100%;float: left;}


.lineStu h1 {
     
    /* margin:  0 0 0 28px!important;*/
     font-size: 20px!important;
     font-weight: 300;
}

.red{   color: var(--Bcol1); }
.green{color :var(--Bcol2); }
.blue { color :var(--Bcol3); }
.yellow{ color : var(--Bcol4); }



.Red{ background-color: var(--Bcol1); }
.Green{ background-color:var(--Bcol2);}
.Blue{ background-color: var(--Bcol3); }
.Yellow{ background-color: var(--Bcol4) ;}
.White {  background-color: var(--Bcol5) ;}


.illus  a:hover { color: var(--Bcol1)!important; }
.motion  a:hover{ color:var(--Bcol2)!important;}
.photo  a:hover{ color: var(--Bcol3)!important; }
.graph  a:hover{ color: var(--Bcol4)!important ;}


.redBorder {border:solid 25px var(--Bcol1);}
.greenBorder {border:solid 25px var(--Bcol2);}
.blueBorder {border:solid 25px var(--Bcol3);}
.yellowBorder {border:solid 25px var(--Bcol4);}



.expand {
    margin: 0 auto!important;
    animation: 2s grow !important;
    animation-play-state: running;
    
    
    
}
.expand2 {
    margin: 0 auto!important;
    animation: 2s grow2 !important;
    animation-play-state: running;
    
    
    
}





.Red, .Blue  {
   
    width:100%;
    height: 50vh;
    display: block;
     
}
 .Yellow{
   
    width:100%;
    height: 80vh;
    display: block;
    
}
.Green{
   
    width:100%;
    height: 20vh;
    display: block;
    
}
    header{
        position: fixed;
        z-index: 5;
        width:100%;
        height: auto;
        min-height: 5vh;
       /* background:var(--mcolor);*/
        font-family:    var(--mtface);
    }
    
    header h1{
        
        width:auto;
        padding: 5px;
        line-height: 25px;
        font-size: var(--mtype);
        font-family: var(--mtface);
        height: auto;
        color: var(--tcolor1);
       
    }
    header h1:hover, h2:hover{
         color: var(--tcolor2);
        
    }

header h1 a{
    color: #000;
    text-decoration: none!important;
    line-height: 40px;
}


header h2 {
    
    float: right;
}

#logo {
    
   width:25%;
    height: auto;
    display: block;
    float:left;
    padding-left: 30px;
	font-family: var(--altType);

    
}


   #logo .flipText > li {
    font-size: var(--mtype);
    font-family: var(--altType)!important;
    float: left;
    width:auto;
    height:auto;
	   
    
    
    
    
}

  #logo  li.flip{
    animation: 10s flippingText infinite ;
    
    animation-play-state: running;
    
    
    
}

#logo li.flip:hover

    { transform: scale(-1, 1);
        
        -moz-transform: scale(-1, 1);
        -webkit-transform: scale(-1, 1);
        -o-transform: scale(-1, 1);
        -ms-transform: scale(-1, 1);
        transform: scale(-1, 1);}




 #logo  li.flipUp:hover

    { transform: rotate(180deg);
        
        -moz-transform: rotate(180deg);
        -webkit-transform: rotate(180deg);
        -o-transform: rotate(180deg);
        -ms-transform: rotate(180deg);
        }


 #headerNav  ul {
    width: 50%;
    height: auto;
    float: right;
    
    
}
  #headerNav li {
    width: auto;
    height: auto;
    float: right;
    line-height: 50px;
}


#headerNav li:nth-child(1){
	
    margin: 0 5.4% 0;
	
}

#headerNav li:nth-child(2){
	
    margin: 0 6.8% 0;
	
	
}

#headerNav li a {
    
    color:var( --tcolor1)!important;
}
#headerNav li:hover {
    
  color:var(--hoverWhite);
	cursor:pointer;
}

    nav {
        width: 100%;
        height: auto;
        min-height: 100px;
        position: fixed;
        padding: 20px 0 0 0;
        background: var(--mcolor);
        display: none;
        top:50px;
      
       
        
    }

 #headerNav {
    
    width:60%;
       float:right;
}
    
    nav h1{
        
        font-size: var(--stype);
        
    }
    
    
    nav h1 a:hover{
         color: var(--tcolor2);
        
        
    }
    section{
        
        width:100vw;
      
        height:93vh;
        float:left;
        padding-top: 5vh;
		z-index:0;
        
        
    }
    section h1{
        
       
        
        
        
    }
    #first{
        width: 200px;
        height:300px;
        position: absolute;
        left:1000px;
        top:3000px;
        border: solid 10px #000;
        
    }
    
    
        .box{
           box-sizing: border-box;
           width:200px; 
           height: 200px;
           border: 2px solid #000;
           float:left;
        
        }   
        nav li{
    width: 260px;
    height: 25px;
    float: left;
    line-height: 10px;
    padding: 0!important;
    margin: 0!important;
    display: table;
}
    
    nav li a{
        
        color: var(--tcolor1);
        text-align: center;
        text-decoration: none;
        font-family: var(--mtface);
    }

nav li a:hover{
     color:var(--hover);
    
}
     
.work h1
{
    
    font-size: var(--xLarge);
        width:auto;
        padding-top: 20%;
        line-height: 50%;
        text-align: center;
        font-weight: 600;
        font-family: var(--mtface);
        height: auto;
}
   

section:focus { outline: none!important;}


#home  h1.title {
    line-height: 50px;
    font-family: var(--mtface) ,san-serif;
    font-size:  var(--ltype);
    padding: 20px 0 0 0;
    
    
}

#home .logo{
    width:50%;
    height: auto;
    margin: auto;
    
}


/* info tab */



#infoTab{
    width:100%;
    height: 100vh;
    background-color: #fff;
    margin-top: 50px;
    position: absolute;
    display: none;
    
    
}

#infoTab article{
    width: 80%;
    padding: 30px 30px;
    float:left ;
    margin: 0 10px 0 0; 

    
}

#infoTab .arthalf article{
    width: 50%!important;
   

    
}

#infoTab h2 { width:100%; margin-bottom: 10px;}

#infoTab ul {
    width:100%;
    
    
}

#infoTab ul li{
    
    
}


footer{ height: auto; min-height: 2vh; width: 100%; padding: 0px 0px; position:fixed; top: 97vh; background-color: #fff; color: var(--tcolor1);}

/*filtering CSS*/


ul.filter{
    
    width: 100%;
    height: auto;
    display: block;
    margin-bottom: 40px!important;
    
    
    
}

.filter li{
    float: left;
    margin: 0 10px 0 30px!important;
    width: 100% ;
    height: 50px;
    line-height: 20px;
    font-size: 25px;
    
   
    
    
}

 .filter li.illus  { color: var(--Bcol1)!important; }
.filter  li.motion{ color:var(--Bcol2)!important;}
.filter li.photo  { color: var(--Bcol3)!important; }
.filter li.graph  { color: var(--Bcol4)!important ;}

.filter li.illus a:hover  { color: var(--Bcol1)!important; }
.filter  li.motion a:hover{ color:var(--Bcol2)!important;}
.filter li.photo a:hover  { color: var(--Bcol3)!important; }
.filter li.graph a:hover  { color: var(--Bcol4)!important ;}


.filter li.illus a:active  { color: var(--Bcol1)!important; }
.filter  li.motion a:active{ color:var(--Bcol2)!important;}
.filter li.photo a:active  { color: var(--Bcol3)!important; }
.filter li.graph a:active  { color: var(--Bcol4)!important ;}

.filter li.all a:focus  { color: var(--hover)!important; }
.filter li.illus a:focus  { color: var(--Bcol1)!important; }
.filter  li.motion a:focus{ color:var(--Bcol2)!important;}
.filter li.photo a:focus  { color: var(--Bcol3)!important; }
.filter li.graph a:focus  { color: var(--Bcol4)!important ;}

.filter a {
  position: relative;
}

.filter a:hover{
    
    color:var(--hover)!important;
    
}

.filter a.active:before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  display: inline-block;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 15px 15px 0 0;
  border-color: #333 transparent transparent transparent;
}

.students {
  display: flex;
  flex-wrap: wrap;
  float: left;
}

.students a {
  width: 23%;
  
  margin: 0 1% 20px 1%;
  line-height: 20px;
}

@keyframes zoom-in {
  0% {
   transform: scale(.5);
  }
  100% {
    transform: none;
  }
}

@keyframes rotate-right {
  0% {
    transform: translate(-100%) rotate(-100deg);
  }
  100% {
    transform: none;
  }
}

.animated {
  animation: .8s zoom-in;
 
}

.gradientBackground #back {
    background: linear-gradient(37deg, #fface4, #ccd550, #d266b1);
    background-size: 600% 600%;

    -webkit-animation: grad 39s ease infinite;
    -moz-animation: grad 39s ease infinite;
    animation: grad 39s ease infinite;
}

@-webkit-keyframes grad {
    0%{background-position:60% 0%}
    50%{background-position:41% 100%}
    100%{background-position:60% 0%}
}
@-moz-keyframes grad {
    0%{background-position:60% 0%}
    50%{background-position:41% 100%}
    100%{background-position:60% 0%}
}
@keyframes grad {
    0%{background-position:60% 0%}
    50%{background-position:41% 100%}
    100%{background-position:60% 0%}
}


.solidBackground #back{
    
    
}

@-webkit-keyframes move {
    0%{background-position:60% 0%}
    50%{background-position:41% 100%}
    100%{background-position:60% 0%}
}
@-moz-keyframes move {
    0%{background-position:60% 0%}
    50%{background-position:41% 100%}
    100%{background-position:60% 0%}
}
@keyframes move {
    0%{background-position:60% 0%}
    50%{background-position:41% 100%}
    100%{background-position:60% 0%}
}

@-webkit-keyframes expand {
    0%{background-position:60% 0%}
    50%{background-position:41% 100%}
    100%{background-position:60% 0%}
}
@-moz-keyframes expand {
    0%{background-position:60% 0%}
    50%{background-position:41% 100%}
    100%{background-position:60% 0%}
}
@keyframes expand {
    0%{background-position:60% 0%}
    50%{background-position:41% 100%}
    100%{background-position:60% 0%}
}