body {
  margin: 0;

  background:#000;
}

.scroll-wrap {
  overflow: hidden;
  height: 100vh;
}

.scroll {
  display: flex;
  overflow: auto;
}

.scroll > div {
  flex-shrink: 0;
  width: 50vw;
  height: 100vh;
  background: #111;
  color:#fff;
}
p {  }

.arrow1{
position:absolute;
right:50px;
top:38%;
width:50px;
height:25px;
background:url(../img/arrow.png) no-repeat center center; 

}

.interior{
position:absolute;
right:0px;
top:100%;
width:100%;


}
#graphic{
position:absolute;
right:-200px;
top:-200px;
width:1500px;
height:1500px;
display:none;

}

#intro_text{
position:absolute;
left:16.6666667%;
top:25.5%;
margin-top:150px;
width:33.3333333%;
height:70px;
background:rgba(0,0,0,0)url(../img/intro_text.png) no-repeat left top; 
opacity:1;
}

.arrow2{
position:absolute;
right:50px;
top:67%;
width:50px;
height:25px;
background:url(../img/arrow.png) no-repeat center center; 

}

#logo{
position:fixed;
left:50px;
top:-160px;
width:150px;
height:40px;
background:url(../img/logo1.png) no-repeat center center; 
  -webkit-background-size: contain;
  -moz-background-size: contain;
  -o-background-size: contain;
  background-size: contain;

}

#footer{
position:absolute;
left:3.5%;
margin-left:500px;
bottom:0px;
width:180px;
height:150px;
font-size: .50vw;
line-height:.8vw;
font-family: 'gilroy-extrabold', Arial, sans-serif;
color:#fff;
text-transform:uppercase;
opacity:.0;
}
#box1_b{
position:absolute;
left:0px;
top:0px;
width:16.6666667%;
height:50%;
background:rgba(0,0,0,1);
opacity:0; 

      background:#000000 url(../img/6_b .png) no-repeat center center; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
#box2_b{
position:absolute;
left:16.6666667%;
top:0px;
width:16.6666667%;
height:50%;
background:rgba(0,0,0,1);
opacity:0;  

       background:#000000 url(../img/1_b .png) no-repeat center center; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
#box3_b{
position:absolute;
left:33.3333333%;
top:0px;
width:16.8%;
height:50%;
background:rgba(0,0,0,1);
opacity:0; 

       background:#000000 url(../img/2_b .png) no-repeat center center; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
#box4_b{
position:absolute;
left:0px;
top:50%;
width:16.6666667%;
height:50%;
background:rgba(0,0,0,1);
opacity:0; 
 
       background:#000000 url(../img/3_b .png) no-repeat center center; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
#box5_b{
position:absolute;
left:16.6666667%;
top:50%;
width:16.6666667%;
height:50%;
background:rgba(0,0,0,1);
opacity:0; 

       background:#000000 url(../img/4_b .png) no-repeat center center ; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
#box6_b{
position:absolute;
left:33.3333333%;
top:50%;
width:16.8%;
height:50%;
background:rgba(0,0,0,1);
opacity:0; 
 
       background:#000000 url(../img/5_b .png) no-repeat center center; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
#box1_c{
position:absolute;
left:0px;
top:0px;
width:16.6666667%;
height:50%;
background:rgba(0,0,0,1);
opacity:1; 

      background:#000000 url(../img/6_b .png) no-repeat center center; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
#box2_c{
position:absolute;
left:16.6666667%;
top:0px;
width:16.6666667%;
height:50%;
background:rgba(0,0,0,1);
opacity:1;  

       background:#000000 url(../img/1_b.png) no-repeat center center; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
#box3_c{
position:absolute;
left:33.3333333%;
top:0px;
width:16.8%;
height:50%;
background:rgba(0,0,0,1);
opacity:1; 

       background:#000000 url(../img/2_b.png) no-repeat center center; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
#box4_c{
position:absolute;
left:0px;
top:50%;
width:16.6666667%;
height:50%;
background:rgba(0,0,0,1);
opacity:1; 
 
       background:#000000 url(../img/3_b.png) no-repeat center center; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
#box5_c{
position:absolute;
left:16.6666667%;
top:50%;
width:16.6666667%;
height:50%;
background:rgba(0,0,0,1);
opacity:1; 

       background:#000000 url(../img/4_b.png) no-repeat center center ; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
#box6_c{
position:absolute;
left:33.3333333%;
top:50%;
width:16.8%;
height:50%;
background:rgba(0,0,0,1);
opacity:1; 
 
       background:#000000 url(../img/5_b.png) no-repeat center center; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
#box1{
position:absolute;
left:0px;
top:0px;
width:16.6666667%;
height:50%;
background:rgba(0,0,0,1);
 
}
#box2{
position:absolute;
left:16.6666667%;
top:0px;
width:16.6666667%;
height:50%;
background:rgba(0,0,0,1);
 
}
#box3{
position:absolute;
left:33.3333333%;
top:0px;
width:16.8%;
height:50%;
background:rgba(0,0,0,1);
 
}
#box4{
position:absolute;
left:0px;
top:50%;
width:16.6666667%;
height:50%;
background:rgba(0,0,0,1);
 
}
#box5{
position:absolute;
left:16.6666667%;
top:50%;
width:16.6666667%;
height:50%;
background:rgba(0,0,0,1);

}
#box6{
position:absolute;
left:33.3333333%;
top:50%;
width:16.8%;
height:50%;
background:rgba(0,0,0,1);
 
}
#box7{
position:absolute;
left:50%;
top:0px;
width:16.6666667%;
height:50%;
background:rgba(0,0,0,1);
 
}
#box8{
position:absolute;
left:66.6666667%;
top:0px;
width:16.6666667%;
height:50%;
background:rgba(0,0,0,1);
 
}
#box9{
position:absolute;
left:83.3333334%;
top:0px;
width:16.6666667%;
height:50%;
background:rgba(0,0,0,1);
 
}
#box10{
position:absolute;
left:50%;
top:50%;
width:16.6666667%;
height:50%;
background:rgba(0,0,0,1);
 
}
#box11{
position:absolute;
left:66.6666667%;
top:50%;
width:16.6666667%;
height:50%;
background:rgba(0,0,0,1);
}
#box12{
position:absolute;
left:83.3333334%;
top:50%;
width:16.6666667%;
height:50%;
background:rgba(0,0,0,1);
 
}

#nav_horizontal{
position:absolute;
left:50%;
top:-200px;
width:50%;
height:120px;
background: url(../img/) no-repeat center center; 
  -webkit-background-size: contain;
  -moz-background-size: contain;
  -o-background-size: contain;
  background-size: contain;


}


#nav2{
position:fixed;
width:16.6666667%;
left:-600px;
top:0px;
height:100%;
background:rgba(0,0,0,0) url(../img/nav.png) no-repeat center center; 
  -webkit-background-size: contain;
  -moz-background-size: contain;
  -o-background-size: contain;
  background-size: contain;
  
  

}

#nav2_color{
position:absolute;
width:16.6666667%;
left:0px;
top:0px;
height:100%;
background:rgba(97,126,139,1) url(../img/nav.png) no-repeat center center; 
  -webkit-background-size: contain;
  -moz-background-size: contain;
  -o-background-size: contain;
  background-size: contain;
  
   transition: all .7s ease-out;
opacity:0;

}

.show_nav{

opacity:1;

}


.nav_bg{
height:120px;
width:100%;
background:#000;
position:absolute;
top:0px;
left:0px;
opacity:.5;
top:-120px;
}

#tagline{
position:absolute;
left:16.6666667%;
top:25.5%;
text-transform:uppercase;
width:905px;
height:33.3333333%;
font-size: 95.367px;
color:#fff;
font-family: 'gilroy-extrabold', Arial, sans-serif;

 opacity:0;
}
#scroll {
  position:absolute;
left:50%;
top:50%;
margin-left:-100px;
margin-top:-50px;
text-transform:uppercase;
width:200px;
height:200px;
font-size: 1.5vw;
line-height:1.5vw;

font-family: 'gilroy-extrabold', Arial, sans-serif;

 opacity:0;

 text-align:center;
 background:#111 url(../img/scroll.png) no-repeat center center; 
 -webkit-background-size: contain;
  -moz-background-size: contain;
  -o-background-size: contain;
  background-size: contain;
 border-radius:1500px;

}
.v2{
 position:relative;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  overflow:hidden;
}

.project_title1{
position:relative;
left:70%;
top:43%;
width:150%;
height:33.3333333%;
font-size: 4.5vw;
line-height:4.5vw;
color:#fff;
font-family: 'gilroy-extrabold', Arial, sans-serif;
 transition: all .7s ease-out;
 text-shadow: 0px 0px 300px rgba(0, 0, 0, 1);
}

.project_title1_big{
position:relative;
left:-12%;
top:45%;
width:150%;
height:33.3333333%;
font-size: 4.5vw;
line-height:4.5vw;
color:#fff;
font-family: 'gilroy-extrabold', Arial, sans-serif;
}


.project_title2{
position:relative;
left:30%;
top:45%;
width:150%;
height:33.3333333%;
font-size: 4.5vw;
line-height:4.5vw;
color:#fff;
font-family: 'gilroy-extrabold', Arial, sans-serif;
transition: all .7s ease-out;
text-shadow: 0px 0px 300px rgba(0, 0, 0, 1);
}

.project_title2_big{
position:relative;
left:-12%;
top:45%;
width:150%;
height:33.3333333%;
font-size: 4.5vw;
line-height:4.5vw;
color:#fff;
font-family: 'gilroy-extrabold', Arial, sans-serif;
transition: all .7s ease-out;
text-shadow: 0px 0px 300px rgba(0, 0, 0, 1);
}

.project_title3{
position:relative;
left:30%;
top:45%;
width:150%;
height:33.3333333%;
font-size: 4.5vw;
line-height:4.5vw;
color:#fff;
font-family: 'gilroy-extrabold', Arial, sans-serif;
transition: all .7s ease-out;
text-shadow: 0px 0px 300px rgba(0, 0, 0, 1);
}

.project_title3_big{
position:relative;
left:-12%;
top:45%;
width:150%;
height:33.3333333%;
font-size: 4.5vw;
line-height:4.5vw;
color:#fff;
font-family: 'gilroy-extrabold', Arial, sans-serif;
transition: all .7s ease-out;
text-shadow: 0px 0px 300px rgba(0, 0, 0, 1);
}

.project_title4{
position:relative;
left:30%;
top:45%;
width:150%;
height:33.3333333%;
font-size: 4.5vw;
line-height:4.5vw;
color:#fff;
font-family: 'gilroy-extrabold', Arial, sans-serif;
transition: all .7s ease-out;
text-shadow: 0px 0px 300px rgba(0, 0, 0, 1);
}

.project_title4_big{
position:relative;
left:-12%;
top:45%;
width:150%;
height:33.3333333%;
font-size: 4.5vw;
line-height:4.5vw;
color:#fff;
font-family: 'gilroy-extrabold', Arial, sans-serif;
transition: all .7s ease-out;
text-shadow: 0px 0px 300px rgba(0, 0, 0, 1);
}

.who_title{
position:relative;
left:66.6666667%;  
top:30%;
width:50%;
height:25%;
font-size: 2.5vw;
line-height:2.5vw;
color:#fff;
font-family: 'gilroy-extrabold', Arial, sans-serif;
transition: all .7s ease-out;

}


.what_title{
position:relative;
left:66.6666667%;
top:35%;
width:50%;
height:25%;
font-size: 2.5vw;
line-height:2.5vw;
color:#fff;
font-family: 'gilroy-extrabold', Arial, sans-serif;
transition: all .7s ease-out;

}

.life_title{
position:relative;
left:33.333333333%;
top:30%;
width:50%;
height:25%;
font-size: 2.5vw;
line-height:2.5vw;
color:#fff;
font-family: 'gilroy-extrabold', Arial, sans-serif;
transition: all .7s ease-out;

}


.news_title{
position:relative;
left:33.333333333%;
top:35%;
width:50%;
height:25%;
font-size: 2.5vw;
line-height:2.5vw;
color:#fff;
font-family: 'gilroy-extrabold', Arial, sans-serif;
transition: all .7s ease-out;

}

.who_hit{
position:relative;
left:40px;
}

.what_hit{
position:relative;
left:40px;
}

.news_hit{
position:relative;
left:40px;
}

.life_hit{
position:relative;
left:40px;
}


.body_copy{
text-transform:uppercase;
font-size: .55vw;
line-height:1.1vw;
font-family: 'gilroy-light', Arial, sans-serif;
margin-top:10px;
opacity:.8;
width:250px;

}
.view_project{
text-transform:uppercase;
font-size: .65vw;
line-height:1.5vw;
font-family: 'gilroy-extrabold', Arial, sans-serif;
margin-top:10px;
opacity:.8;
width:300px;
margin-left:10px;

}

.bottom_line{
height:1px;
width:150px;
background:#fff;
margin-left:10px;
margin-top:10px;
margin-bottom:10px;
}



.vert_line{
position:absolute;
width:1px;
height:150%;
top:0px;
background:#fff;
opacity:.0;
float:left;
}

.horizontal_line{
position:absolute;
width:55%;
height:1px;
top:50%;
background:#fff;
opacity:.0;

}

.horizontal_line_top{
position:absolute;
width:55%;
height:1px;
top:5%;
background:#fff;
opacity:.0;

}
.horizontal_line_bottom{
position:absolute;
width:55%;
height:1px;
bottom:5%;
background:#fff;
opacity:.0;

}

#section1{
left:1px;
position:relative;



}

.section1_video{
 position:absolute;
  top: 50%;
  left: 16.6666667%;
  width: 83.3333334%;
  height: 50%;
  object-fit: cover;
   overflow:hidden;
   opacity:1;
     background:#000000 url(../img/1.jpg) no-repeat center center; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

.section2_image{
  position:relative;
  top:20%;
  left:40%;
  width:60%;
  height:60%;
  transition: all .4s ease-out;
  opacity:.5;
  background:#333333 url(../img/1.jpg) no-repeat center center; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
 font-family: 'WebFont', Arial, sans-serif;
}


.test_bigger {
  left:0px;
  top:0px;
  width: 100%;
  height: 100%;
   opacity:1;
}

.section3_image{
  position:relative;
  left:0px;
  top:0px;
  width: 100%;
  height: 100%;
  transition: all .4s ease-out;
  opacity:.3;
  background:#333333 url(../img/2.jpg) no-repeat center center; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
 font-family: 'WebFont', Arial, sans-serif;
}

.section4_image{
  position:relative;
  left:0px;
  top:0px;
  width: 100%;
  height: 100%;
  transition: all .4s ease-out;
  opacity:.3;
  background:#333333 url(../img/3.jpg) no-repeat center center; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
 font-family: 'WebFont', Arial, sans-serif;
}

.section5_image{
  position:relative;
  left:0px;
  top:0px;
  width: 100%;
  height: 100%;
  transition: all .4s ease-out;
  opacity:.3;
  background:#333333 url(../img/4.jpg) no-repeat center center; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
 font-family: 'WebFont', Arial, sans-serif;
}


.block1{
position:absolute;
width:16.6666667%;
height:100%;
top:0px;
background:#000;
left:16.6666667%;
margin-left:500px;
opacity:0; 
pointer-events: none;
background: #000 url(../img/3a.png) no-repeat left center; 
  -webkit-background-size: cover;
  -moz-background-size:  cover;
  -o-background-size:  cover;
  background-size:  cover;
  
 
}

.block2{
position:absolute;
width:16.6666667%;
height:100%;
top:0px;
background:#000;
left:50%;
margin-left:500px;
opacity:1;
opacity:0; 
pointer-events: none;
background: #000 url(../img/3a.png) no-repeat right center; 
  -webkit-background-size: cover;
  -moz-background-size:  cover;
  -o-background-size:  cover;
  background-size:  cover;
  
 
}

.show{
display:inline-block;
}

.full_opacity{
 opacity:1; 
}

.half_opacity{
 opacity:.15; 
}

.one{

margin-left:16.6666667%;

}

.two{

margin-left:33.3333333%;

}

.three{

margin-left:50%;

}

.four{

margin-left:66.6666667%;

}

.five{

margin-left:83.3333334%;

}