/* 
---------------------------------------------------------------------
Custom Highlighting 
---------------------------------------------------------------------
*/
::selection {
  color:#f2f2f2;
  background:#fff; /* Safari & Chrome */
}
::-moz-selection {
  color:#f2f2f2;
  background:#fff; /* Firefox */
}

/* 
---------------------------------------------------------------------
Body
---------------------------------------------------------------------
*/

html {
  height: 100%;
  background: #000;
}

body {
  background: #000;
  padding: 0;
  position: relative;
  margin: 0;
  height: 100%;
 
  -webkit-transition: all 1s ease;
  -moz-transition: all 1s ease;
  -o-transition: all 1s ease;
  transition: all 1s ease; 

  -moz-font-feature-settings: "liga", "kern";
  -moz-font-feature-settings:"liga=1, kern=1";
  -ms-font-feature-settings:"liga", "kern";
  -o-font-feature-settings:"liga", "kern";
  -webkit-font-feature-settings:"liga", "kern";
  font-feature-settings: "liga", "kern";    
}

/* 
---------------------------------------------------------------------
Sections
---------------------------------------------------------------------
*/

.wrapper {
  height: 100% !important;
  height: 100%;
  margin: 0 auto; 
  overflow: hidden;
  -webkit-transition: all 1s ease;
  -moz-transition: all 1s ease;
  -o-transition: all 1s ease;
  transition: all 1s ease;   
}

.main {
  float: left;
  width: 100%;
  margin: 0 auto; 
}

.loader {
  position: fixed;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  z-index: 9999;
  background: url('page-loader.gif') 50% 50% no-repeat rgb(0,0,0);
}

.onepage-wrapper {
  width: 100%;
  height: 100%;
  display: block;
  position: relative;
  padding: 0;
  -webkit-transform-style: preserve-3d;
}

.onepage-wrapper .section {
  width: 100%;
  height: 100%;
  cursor:pointer;
}

#slide-nav {
  margin:0;
  padding:0;
}

.slide-forward {
  width:50%;
  height:100%;
  position:fixed;
  right:0;
  top:0;
  background-color:transparent;
  z-index:99;
  cursor:e-resize;
}

.slide-backward {
  width:50%;
  height:100%;
  position:fixed;
  left:0;
  top:0;
  background-color:transparent;
  z-index:99;
  cursor:w-resize;
}


/* 
---------------------------------------------------------------------
Main Navigation
---------------------------------------------------------------------
*/

#navigation {
  position:fixed;
  display:block;
  width:100%;
  top:0;
  left:0;
  padding:0;
  margin:-55px 0 0 0;
  z-index:100;
  width:100%;
  background-color:rgba(0,0,0,.85);
  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;  
}

#navigation ul {
  list-style-type:none;
  display:block;
  margin:0;
  padding:20px 0 35px 75px;
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease;   
}

#navigation li {
  font-size: 15px;
  line-height:15px;
  color:#fff;  
  margin:0;
  padding:0;
  float:left;
  white-space:nowrap;
  
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease;  
}

#navigation ul li:nth-child(1) {
  font-family: 'Atlas Grotesk Web';
  font-weight:  700;
  font-style:   normal;
  font-stretch: normal; 
}

#navigation ul li:nth-child(n+2) {
  font-family: 'Atlas Typewriter Web';
  font-weight:  400;
  font-style:   normal;
  font-stretch: normal;  
  padding:0 0 0 25px;
}

#navigation a:link, a:visited {
  color:#fff;
  text-decoration:none;
  border-bottom:2px solid transparent;
  padding:0 0 3px 0;
  opacity:1;
  -webkit-transition: all 0.25s ease;
  -moz-transition: all 0.25s ease;
  -o-transition: all 0.25s ease;
  transition: all 0.25s ease;  
}

#navigation li:nth-child(1) a:hover {
  text-decoration:none;
  border-bottom:2px solid #fff;
  padding:0 0 3px 0;
}


#navigation li:nth-child(2) a:hover {
  text-decoration:none;
  border-bottom:1px solid #fff;
  padding:0 0 3px 0;
}

.animate {
  margin:0!important;
  opacity:1!important;
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease;
}

.project-navigation {
  margin:0!important;
  opacity:1!important;
  background:rgba(0,0,0,.25)!important;
}

/* 
---------------------------------------------------------------------
Pagination
---------------------------------------------------------------------
*/

.onepage-pagination {
  position: absolute;
  right: 75px;
  top: 18px;
  z-index: 101;
  list-style: none;
  margin: 0;
  padding: 0;
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease;    
}
.onepage-pagination li {
  padding: 0;
  margin:0;
  text-align: right;
}

.onepage-pagination ul {
  list-style: none;
}
.onepage-pagination li a{
  font-family: 'Atlas Typewriter Web';
  font-size: 15px;
  font-weight:  400;
  font-style:   normal;
  font-stretch: normal;
  line-height:15px;
  color:#fff;
  padding: 0px;
  display:none;
  text-decoration:none;

  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease;    
}

.onepage-pagination li a.active {
  display:inline-block;
}


/* 
---------------------------------------------------------------------
Close Project
---------------------------------------------------------------------
*/

.project-close {
  top:19px;
  right:15px;
  position:fixed;
  z-index:100;
  -webkit-transition: all 0.25s ease;
  -moz-transition: all 0.25s ease;
  -o-transition: all 0.25s ease;
  transition: all 0.25s ease;  
}

.project-close a:link, a:visited {
  padding:10px;
  opacity:1;
}

.project-close:hover {
  opacity:.5;
  transform: scale(1.25);
}

.project-close img {
  width:14px;
  height:14px;
}

/* 
---------------------------------------------------------------------
Project Arrow
---------------------------------------------------------------------
*/

.project-arrow {
  cursor:pointer;
  top:45%;
  right:25px;
  position:absolute;
  z-index:100;
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease;  
}

.project-arrow:hover {
  opacity:.5;
}

.project-arrow img {
  width:55px;
  height:auto;
}

.hide-arrow {
  opacity:0;
  visibility:hidden;
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease;  
}

/* 
---------------------------------------------------------------------
Grid Masonry Container
---------------------------------------------------------------------
*/

.masonry-container {
  width: 90%;
  margin: 200px 25% 0 75px;
  transition: all .5s ease-in-out;
}

/* 
---------------------------------------------------------------------
Column Generator
---------------------------------------------------------------------
*/

.masonry {
  margin: 1.5em 0;
  padding: 0;
  -moz-column-gap: 1.5em;
  -webkit-column-gap: 1.5em;
  column-gap: 1.5em;  
}

/* 
---------------------------------------------------------------------
Project Thumbnails
---------------------------------------------------------------------
*/

.thumbnail {
  display: inline-block;
  padding:0;
  margin: 0 0 1.5em;
  width: 100%;
  border-bottom:2px solid transparent;    
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
}

.thumbnail a:link {
   text-decoration:none;

}

.thumbnail a:hover {
  text-decoration:none;
}

.thumbnail a:hover img {
  opacity:.65;
  transition: all .2s ease-in-out;
}

.thumbnail a:hover p {
  transition: all .2s ease-in-out;
} 

.thumbnail img {
  max-width: 100%;
  height: auto;
  display: block;
  opacity:1;
  -webkit-backface-visibility: hidden;
  transition: all .2s ease-in-out;
}

.thumbnail p {
  text-align:left;
  font-family: 'Atlas Typewriter Web';
  font-weight:  400;
  font-style:   normal;
  font-stretch: normal;
  font-size: 12px;  
  line-height: 24px;
  color:#fff;
  transition: all .2s ease-in-out;
}

/* 
---------------------------------------------------------------------
Text Container (Controls Mobile Padding)
---------------------------------------------------------------------
*/

.text-container {
  margin:none;
  padding:none;
}

/* 
---------------------------------------------------------------------
Intro Text
---------------------------------------------------------------------
*/

.intro-text, .about-text {
  padding:9% 0 0 75px;
  display:block;
  clear:both;
  width:70%;
}

.intro-text p, .about-text p {
  display:inline-block;
  text-align:left;
  font-family: 'Atlas Grotesk Web'; 
  font-weight:  700;
  font-style:   normal;
  font-stretch: normal;
  font-size: 2.7vw;  
  line-height: 4vw;
  color:#fff;
  -webkit-font-smoothing: antialiased;  
}

.intro-text a {
  display: inline-block;
  position: relative;
  text-decoration:none;
  color:#fff;
}

.intro-text a:hover, a:visited {
  text-decoration:none;
  color:#fff;
}

.intro-text a::after {
  content: '';
  position: absolute;
  left: 0;
  display: inline-block;
  height: 1em;
  width: 100%;
  border-bottom: 2px solid;
  margin-top: 12px;
}

.about-text a:link, a:visited {
  color:#fff;
  text-decoration:none;
  border-bottom:2px solid transparent;
  padding:0 0 5px 0;
  opacity:1;
  -webkit-transition: all 0.25s ease;
  -moz-transition: all 0.25s ease;
  -o-transition: all 0.25s ease;
  transition: all 0.25s ease;  
}

.about-text a:hover {
  text-decoration:none;
  border-bottom:2px solid #fff;
  padding:0 0 5px 0;
}

/* 
---------------------------------------------------------------------
Project Text
---------------------------------------------------------------------
*/

.project-text-light, .project-text-bold {
  padding:9% 0 0 75px;
  display:block;
  clear:both;
}

.project-text-light, .project-text-bold p {
  text-align:left;
  font-size: 2.25vw;
  font-style: normal;
  font-variant: normal;
  line-height: 3.375vw;
  color:#fff;
  -webkit-font-smoothing: antialiased; 
}

.project-text-light p {
  width:75%;
  font-family: 'Atlas Grotesk Web';
  font-weight:  300;
  font-style:   normal;
  font-stretch: normal;
}

.project-text-bold p {
  font-family: 'Atlas Grotesk Web'; 
  font-weight:  700;
  font-style:   normal;
  font-stretch: normal;
}


/* 
---------------------------------------------------------------------
Project Sub Text
---------------------------------------------------------------------
*/
.project-sub-text {
  padding:0 0 0 75px;
  clear:both;
}

.project-sub-text p {
  text-align:left;
  font-family: 'Atlas Typewriter Web';
  font-size: 15px;
  font-weight:  400;
  font-style:   normal;
  font-stretch: normal;
  line-height: 24px;
  color:#fff;
}

.project-sub-text ul {
  list-style:none;
  padding:125px 0 0 0;
}

.project-sub-text li {
  text-align:left;
  font-family: 'Atlas Typewriter Web';
  font-size: 15px;
  font-weight:  400;
  font-style:   normal;
  font-stretch: normal;
  line-height: 24px;
  color:#fff;
  padding-left:25px;
  text-indent:-25px;
}


/* 
---------------------------------------------------------------------
About Sub Text
---------------------------------------------------------------------
*/

.about-container {
  color:#fff;
  padding:125px 0 0 75px;
  width:100%;
}

.about-container ul {
  list-style:none;
  float:left;
  margin:0;
  padding:0;
}

.about-container li {
  text-align:left;
  font-family: 'Atlas Typewriter Web';
  font-size: 15px;
  font-weight:  400;
  font-style:   normal;
  font-stretch: normal;
  line-height: 24px;
  color:#fff;
  padding-left:20px;
  text-indent:-20px;
  border-bottom:2px solid transparent;
}

.about-container li:nth-child(1) {
  font-family: 'Atlas Grotesk Web'; 
  font-weight:  700;
  font-style:   normal;
  font-stretch: normal;
}

.about-image-container {
  clear:both;
  padding:15% 0 0 0;
  margin:0;
}

.about-image {
  display:inline-block;
  width:55%;
  float:right;
  margin:0;
  padding:0 2.5% 2.5% 0;
}

.about-image img {
  width:100%;
  height:auto;
}

.about-column-01 {
  width:20%;
  margin:0;
  padding:0;
}

.about-column-02 {
  float:left;
  width:60%;
  margin:0 0 0 5%;
  padding:0;
}

.light {
  font-family: 'Atlas Grotesk Web'!important;
  font-weight:  300!important;
  font-style:   normal;
  font-stretch: normal;
}

.italic {
font-family: 'Atlas Grotesk Web';
font-weight: 300;
font-style: italic;
font-stretch: normal;
}


/* 
---------------------------------------------------------------------
Full Bleed Image
---------------------------------------------------------------------
*/

.full-image {
  margin:0;
}

.full-image img {
  display: block;
  width: 100vw;
  height: 100vh;
  object-fit: cover;
}

/* 
---------------------------------------------------------------------
Float Image Left
---------------------------------------------------------------------
*/

.float-left-portrait {
  margin:0;
}

.float-left-portrait img  {
  display: block;
  height: 100vh;
  width: auto;
  float:left;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  padding:65px 0 4% 25px;  
}

.float-left-landscape {
  margin:0;
}

.float-left-landscape img  {
  display: block;
  height: auto;
  width: 80vw;
  float:left;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  padding:65px 0 4% 25px;  
}

/* 
---------------------------------------------------------------------
Float Image Right
---------------------------------------------------------------------
*/

.float-right-portrait {
    margin:0;
}

.float-right-portrait img  {
  display: block;
  height: 5vh;
  width:auto;
  float:right;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  padding:65px 25px 50px 0;    
}

.float-right-landscape {
    margin:0;
}

.float-right-landscape img  {
  display: block;
  height: auto;
  width: 80vw;
  float:right;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  padding:65px 25px 50px 0;    
}

/* 
---------------------------------------------------------------------
320px - Media Queries
---------------------------------------------------------------------
*/

@media only screen and (min-width: 320px) {
    .main {
      padding:50px 0 0 0;
    }
    .masonry {
      -moz-column-count: 1;
      -webkit-column-count: 1;
      column-count: 1;
    }
    .masonry-container {
      width: 90%;
      margin: 125px auto;
    }
    .onepage-wrapper .section {
      height:auto!important;
    }  
    .wrapper {
      margin-bottom:5%;
    }
    #slide-nav {
      display:none;
    }                    
    #navigation ul {
      padding:20px 0 35px 5%;
    }
    #navigation li, .onepage-pagination li a {
      font-size: 12px;
      line-height:12px;
    }
    #navigation ul li:nth-child(n+2) {
      padding:0 0 0 15px;
    }   
    #navigation ul li:nth-child(3) {
      display:none;
    }
    .project-navigation {
      background:rgba(0,0,0,.85)!important;
    }       
    .project-close {
      top:18px;
      right:3%;
    }
    .project-arrow {
      display:none;
    }
    .onepage-pagination {
      top: 18px;
    }    
    .intro-text, .about-text {
      padding:25px 5% 0 5%;
      width:90%;
    }
    .text-container {
      margin:none;
      padding:0 0 50% 0;
    }
    .project-text-bold, .project-text-light {
      padding:75px 5% 0 5%;
      width:90%;
    }
    .about-container {
      padding:50px 5% 0 5%;
      width:90%;
    }
    .about-image-container {
      padding:20% 0 0 0;
    }    
    .about-column-01 {
      width:100%;
      margin:0;
      padding:0;
    }
    .about-column-02 {
      width:100%;
      margin:0;
      padding:50px 0 0 0;
    }
    .about-container li {
      font-size: 12px;
      line-height: 18px;
    }     
    .about-image {
      width:90%;
      padding:0 5% 5% 5%;
      float:left;
    }        
    .intro-text p, .about-text p, .project-text-bold p, .project-text-light p {
      font-size: 4.25vw;
      line-height: 6.5vw;
    }
    .intro-text a::after {
      border-bottom: 1px solid;
      margin-top: 8px;
    }
    .about-text a:link, a:visited {
      border-bottom:1px solid transparent;
    }

    .about-text a:hover {
      border-bottom:1px solid #fff;
    }         
    .project-text-light p {
      width:85%;
    }
    .project-sub-text {
      padding:0 5% 0 5%;
    }
    .project-sub-text p {
      font-size: 12px;
      line-height: 21px;
    }
    .project-sub-text ul {
      padding:100px 0 0 0;
    }             
    .full-image  {
      padding:25px 5% 0 5%;
    }
    .full-image img {
      width: 100%;
      height: auto;
    }
    .float-left-portrait, .float-left-landscape, .float-right-portrait, .float-right-landscape {
      padding:0 5% 0 5%;
    }
    .float-left-portrait img, .float-left-landscape img, .float-right-portrait img, .float-right-landscape img  {
      width: 100%;
      height: auto;
      padding:0 0 5% 0;
    }                                 
}


@media only screen and (min-width: 600px) {
    .wrapper {
      margin: 0 auto; 
    }
    #slide-nav {
      display:block;
    }         
    .masonry {
      -moz-column-count: 2;
      -webkit-column-count: 2;
      column-count: 2;
    }
    .masonry-container {
      width: 90%;
      margin: 200px auto;
    }
    .onepage-wrapper .section {
      height: 100%;
    }    
    #navigation ul li:nth-child(3) {
      display:inline-block;
    }
    .project-navigation {
      background:rgba(0,0,0,.25)!important;
    } 
    .project-close {
      right:15px;
    }
    .project-arrow {
      display:block;
    }    
    .text-container {
      margin:none;
      padding:none;
      width:80%;

    }
    .intro-text, .about-text {
      width:75%;
    }
    .project-text-bold, .project-text-light {
      width:90%;
    }    
    .intro-text p, .about-text p, .project-text-bold p, .project-text-light p {
      font-size: 2.9vw;
      line-height: 4.3vw;
    } 
    .project-text-light p {
      width:90%;
    } 
    .full-image {
      margin:0;
      padding:0;
    }
    .full-image img {
      display: block;
      width: 100vw;
      height: 100vh;
      object-fit: cover;
    }
    .float-left-portrait {
      margin:0;
      padding:0;
    }
    .float-left-portrait img  {
      display: block;
      height: 100vh;
      width: auto;
      float:left;
      box-sizing: border-box;
      -moz-box-sizing: border-box;
      -webkit-box-sizing: border-box;
      padding:65px 0 4% 25px;  
    }
    .float-left-landscape {
      margin:0;
      padding:0;
    }
    .float-left-landscape img  {
      display: block;
      height: auto;
      width: 80vw;
      float:left;
      box-sizing: border-box;
      -moz-box-sizing: border-box;
      -webkit-box-sizing: border-box;
      padding:65px 0 4% 25px;  
    }    
    .float-right-portrait {
      margin:0;
      padding:0;
    }
    .float-right-portrait img  {
      display: block;
      height: 100vh;
      width:auto;
      float:right;
      box-sizing: border-box;
      -moz-box-sizing: border-box;
      -webkit-box-sizing: border-box;
      padding:65px 25px 50px 0;    
    }
    .float-right-landscape {
      margin:0;
      padding:0;
    }
    .float-right-landscape img  {
      display: block;
      height: auto;
      width:80vw;
      float:right;
      box-sizing: border-box;
      -moz-box-sizing: border-box;
      -webkit-box-sizing: border-box;
      padding:65px 25px 50px 0;    
    }    
    .about-column-01 {
      width:30%;
      margin:0;
      padding:0
    }
    .about-column-02 {
      float:left;
      width:50%;
      margin:0 0 0 10%;
      padding:0;
    }                                
}

@media only screen and (min-width: 900px) {
    .masonry {
      -moz-column-count: 3;
      -webkit-column-count: 3;
      column-count: 3;
      padding-right:8%;
    }
    .masonry-container {
      margin: 200px 0 0 75px;
    }
    #navigation ul {
      padding:20px 0 35px 75px;
    }
    #navigation li, .onepage-pagination li a {
      font-size: 15px;
      line-height:15px;
    }      
    #navigation ul li:nth-child(n+2) {
      padding:0 0 0 25px;
    } 
    .project-close {
      top:19px;
    }
    .intro-text, .about-text {
      padding:9% 0 0 75px;
      width:70%;
    }        
    .project-text-bold, .project-text-light {
      padding:9% 0 0 75px;
      width:85%;
    }
    .intro-text p, .about-text p, .project-text-bold p, .project-text-light p {
      font-size: 2.7vw;
      line-height: 4vw;
    }     
    .intro-text a::after {
      border-bottom: 2px solid;
      margin-top: 12px;
    }
    .about-text a:link, a:visited {
      border-bottom:2px solid transparent;
      padding:0 0 5px 0;
    }

    .about-text a:hover {
      border-bottom:2px solid #fff;
      padding:0 0 5px 0;
    }          
    .project-sub-text {
      padding:0 0 0 75px;
    }
    .project-sub-text ul {
      padding:125px 0 0 0;
    }    
    .project-sub-text p {
      font-size: 15px;
      line-height: 24px;
    }
    .about-container {
      padding:9% 0 0 75px;
    }        
    .about-container li {
      font-size: 15px;
      line-height: 24px;
    } 
    .about-image-container {
      padding:15% 0 0 0;
    }
    .about-column-01 {
      width:20%;
      margin:0;
      padding:0
    }
    .about-column-02 {
      float:left;
      width:60%;
      margin:0 0 0 15%;
      padding:0;
    }            
    .about-image {
      width:55%;
      float:right;
      padding:0 2.5% 2.5% 0;
    }
}

@media only screen and (min-width: 1100px) {
    .masonry {
      -moz-column-count: 3;
      -webkit-column-count: 3;
      column-count: 3;
    }
    .masonry-container {
      margin: 225px 0 0 75px;
    }    
}

@media only screen and (min-width: 1800px) {
    .masonry {
      -moz-column-count: 4;
      -webkit-column-count: 4;
      column-count: 4;
    }    
}