*{margin:0;padding:0;box-sizing: border-box}

@font-face {font-family: 'HelveticaNeueLTStd-Roman';src: url('fonts/2A854B_0_0/2A854B_0_0.eot');src: url('fonts/2A854B_0_0/2A854B_0_0.eot?#iefix') format('embedded-opentype'),url('fonts/2A854B_0_0/2A854B_0_0.woff') format('woff'),url('fonts/2A854B_0_0/2A854B_0_0.ttf') format('truetype');}
 
 @media screen and (min-width:700px){
    
      ::-webkit-scrollbar {
          width: 10px;
          height:10px;
          background: transparent;
      }
     
      ::-webkit-scrollbar-track { 
          border-radius: 10px;
          background: transparent;
      }
       
      ::-webkit-scrollbar-thumb {
          border-radius: 10px;
          background: hsl(0,0%,80%)
      } 
}

  body{
    position: relative;
    float: left;
  }

    p{
      position: absolute;
      bottom:0;right:0;
      z-index:999;
      background:white;
      padding-bottom:20px;
      font:10px arial;
      letter-spacing: 0.5px;
    }

      p span{opacity:0;}

    span{
      display: block;
      position: absolute;
      /*border:2px dashed transparent;*/
    }

    /*span:hover{
      border:2px dashed hsla(0,0%,10%,0.8);
    }*/

    h1{
      pointer-events:none;
      position:absolute;
      top:50%;left:50%;
      width:100%;
      text-align: left;
      font:24px/32px "HelveticaNeueLTStd-Roman",helvetica;
      letter-spacing: 0px;
      text-align: center;
      -moz-transform:translate(-50%,-50%);
      -webkit-transform:translate(-50%,-50%);
      		  transform:translate(-50%,-50%);
      z-index:-1;
      padding:30px 0px;
/*       text-indent: -webkit-calc(50vw - 100px); */

    }


    .body{
      position: relative;
      float: left;
      height:100vh;
      width:100vw;
      overflow-x: auto;
        -moz-perspective: 300px;
        -webkit-perspective: 300px;
        perspective: 300px;
      overflow-x:hidden;
    padding:0px 7px;
    box-sizing: border-box;
    }


    .project{
      position: relative;
      float:left;
/*       margin:1vw; */
/*       width:99vw; */
	  width:100%;
	  margin: 0px 3px;
      height:80vh;
      transform-style: preserve-3d;
    }
    
    @media screen and (max-width:700px){
    
    
    .body{
	    padding:0;padding-right: 6px;
    }
	    .project{
		    height: 50vh;
	    }
    }

      .project:nth-child(2){
        margin-top:60vh;
      }

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

    .project span{
      position: absolute;
      z-index:1;
      overflow: hidden;
      -moz-transition:100ms;
      -webkit-transition:100ms;
      transition:100ms;
      cursor: zoom-in;
    }

    span.a{
      z-index:9;
      -moz-transform:translateZ(0px);
      -webkit-transform:translateZ(0px);
      transform:translateZ(0px);
      cursor: default;
    }

      span img{
        position: relative;
        float:left;
        width:100%;
      }

      span.sm img{
        position: relative;
        float:left;
        width:100%;
        width:45vw;
      }

      span.med img{
        position: relative;
        float:left;
        width:75vw;
      }
      
      span.med img[data-type*='process']{
        width:40%;
      }
      
      @media screen and (max-width:700px){
	      span.med img{
		      width: 100%;
	      }
	      
	      span.med img[data-type*='process']{
			  width:60%;
			  }
      }
      
      


      /*span:hover{
        border:1px dashed hsla(0,0%,0%,0.5);
      }
*/
      /*span.large img{
        position: relative;
        float:left;
        max-width:100vw;
      }
      span.small img{
        position: relative;
        float:left;
        max-width:40vw;
      }*/

    span img:nth-child(2){
      position: absolute;
      top:0;left:0;
      width:100%;
      opacity: 0;
      -moz-transition:3s;
      -webkit-transition:3s;
      transition:3s;
    }
    
    span img:nth-child(2):hover{
	    opacity:1;
    }

    img.a{
      opacity:1!important;
      /*border:1px solid red;*/
      z-index:9;
    }

  
  
  .video{pointer-events: none;}
  .med.a .video{pointer-events: auto;}

  .credits{
      position: relative;
      float:left;
/*       margin-top:50vh; */
      width:100%;height:100vh;
      /*border:1px solid #eee;*/
  }
  
  .credits h2{
  	  position:relative;
  	  float: left;
	  font: 500 12px "Helvetica Neue",Helvetica, sans-serif;
	  letter-spacing: 0.02em;
	  text-transform: uppercase;
	  line-height: 23px;
  }
  
  .credits center{
    max-width:540px;
    }

  .credits p{
    position:relative;
    float:left;
    font:18px/23px arial;
    letter-spacing: 0.25px;
    min-width:250px;
    width:100%;
    /*text-indent: 34.5%;*/
  }
  
  .credits p a{
    text-decoration: underline
/* 	border-bottom: 1px solid black; */
  }
  
  center{
	  position:absolute;
	  top:50%;left:50%;
	  transform:translate(-50%,-50%);
	  text-align: left;
	  width: 80%;
  }
  
  @media (max-width:600px){
	    .credits{
				margin-top:0vh;
	  	}
  }