/* general styles */

h1 {
    font-family: "input-mono",monospace;
    font-size: 52px;
    font-weight:100;
    
    
}

a{
    text-decoration: none;
    color: #000;
    font-family:  "input-mono", monospace;
    font-size: 22px;
}

h2{
    font-family: "input-mono", monospace;
    font-weight: 100;
    font-size: 22px;
    margin: 0px;
   
}

h3{
    font-family: "input-mono", monospace;
    font-weight: 200;
    font-size: 24px;
  
    margin: 0px;
    padding-bottom: 5px;
}

p{
    font-family: "input-sans",sans-serif;
    font-weight: 100;
    font-size: 12px;
}

em{
    font-weight: 300;
}

.nav{
    position: fixed;
    z-index: 20;
    
}

.collapsed{
    width: 35px;
    height: 35px;
    background-image: url(../img/burger.png);
    background-size: 100%;
    position: fixed;
}

.collapsed:hover{
    background-image: url(../img/burger_hover.png);
}

.full{
    background-color: black;
    width: 300px;
    height: 175x;
    position: fixed;
    z-index: 3;
    display: flex;
    flex-direction: column;
   
}

.full > a{
   color: white;
    font-family: "input-mono",monospace;
    margin: 10px;
     
}

.full_icon{
    width: 35px;
    height: 35px;
}

/* global site elements */



.container{
    width: 95%;
    margin: 0% 2.5%;
    
}

/* home page*/

.head_nav{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    position: relative;
    top: 25px;
    margin-bottom: 20px;
    width: 80%;
    margin: 0% 10%;

    
}

.links{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    width: 50%;
    position: relative;
    top: 10px;
  
}

a:hover{
    text-decoration: underline;
}


.index_head{
    margin-bottom: 20px;
    width: 40%;
}

.index_nav{
    margin-bottom: 20px;
}



.hp_entry{
    display: grid;
    width: 100%;
    height: 400px;
    margin: 3% 0%;
    
}

.hp_entry_left{
   grid-template-columns: 600px 1fr; 
}

.hp_left_img{
    background-color: aqua;
    overflow: hidden;
 
    
}

.hp_entry_right{
    grid-template-columns: 1fr 600px;
}

.hp_right_img{
    background-color: aqua;
    overflow: hidden;


}

.formal_desc{
    padding: 5%;
}

.spectra_desc{
    padding: 5% 5% 5% 45%;
    text-align: right;
    width: 50%;
}

.transit_desc{
    padding: 5%;
}


.formal_large{
    width: 100%;
}

.formal_mid{
    width: 100%;
     display:none;
}

.formal_small{
    width: 100%;
     display:none;
}

.spectra_large{
    width: 100%;
}

.spectra_mid{
    width: 100%;
     display:none;
}

.spectra_small{
    width: 100%;
     display:none;
}

.phone_large{
    width: 100%;
}

.phone_mid{
    width: 100%;
    display: none;
    
}

.phone_small{
    width: 100%;
    display: none;
}

#index_vert{
    display: none;
}





/* project pages */

.proj_header{
  
   margin: 0px auto;
    height: 150px;
}

.proj_header > h1{
position: relative;
    top: 75px;
}

.proj_hero{
    margin-bottom: 5%;
}

.proj_hero_img{
    width: 800px;
    height: 400px;
    background-color: salmon;
    margin: 10px auto;
    
}

.proj_hero_desc{
    width: 800px;
    margin: 10px auto;
}

.proj_left{
    display: grid;
    width: 100%;
    height: 400px;
    grid-template-columns: 400px 300px 1fr;
    margin-bottom: 5%;
}

.proj_left_img{
    grid-column: 1/2;
    background-color: coral;
}

.proj_left_desc{
    grid-column: 2/3;
    padding-left: 15px;
      
}



.proj_right{
     display: grid;
    width: 100%;
    height: 400px;
    grid-template-columns: 1fr 300px 400px;
    margin-bottom: 5%;
    
}

.proj_right_img{
    grid-column: 3/4;
    background-color: coral;
}

.proj_right_desc{
    grid-column: 2/3;
    padding-right: 15px;
     
    
}

.proj_center{
    width: 600px;
    height: 600px;
    margin: 0px auto 5% auto;
}

.proj_center_img{
    width: 600px;
    height: 400px;
    background-color: coral;
    margin-bottom: 10px;
}

.proj_center_desc{
    width: 300px;
  
}

.formal_link{
    width: 400px;
    margin: 10% auto;
    text-align: center;
}

.formal_link > a {
    
}

.hero_img{
    width: 100%;
}

#hero_big{
    
}

#hero_small{
    display: none;
}

.proj_left_img_small{
    width: 100%;
    display: none;
}

.proj_right_img_small{
    width: 100%;
    display: none;
}

.proj_cent_img_small{
    width: 100%;
    display: none;
}

.proj_left_img_big{
    width: 100%;
    display: block;
}

.proj_right_img_big{
    width: 100%;
    display: block;
}

.proj_cent_img_big{
    width: 100%;
    display: block;
}

.video_desc{
    width: 600px;
    margin: 0px auto 5% auto;
    position: relative;
    bottom: 65px;
}

.video_desc_adj{
    bottom: 30px;
}

/* about */

.about_content{
    display: flex;
    flex-direction: row;
    width: 100%;
    
}

.face{
    width: 400px;
    height: 400px;
    background-color: gray;
    margin: 10px;
}

.about_img{
    width: 100%;
}

.flavortext{
    width: 40%;
    margin: 10px;
    
}

.photo_credit{
    font-size: 8px;
    color: #575757;
}

/* under construction page*/
.const_main{
    width: 400px;
    margin: 10% auto;
    
}

.const_logo{
    height: 30px;
}

@media screen and (max-width: 600px){
    
    .const_main{
        width: 60%;
        margin: 20% 20%;
    }
}

/* spectra styles */

.proj_center_spectra{
    margin: 0px auto 5% auto;
    width: 600px;
    height: 200px;
}

.spectra_header{
    height: 500px;
    
}


.spectra_gallery {
    width: 80%;
    height: 450px;
    margin: 5% 10%;
    display: grid;
    grid-template-columns: 5% 15% 60% 15% 5%;
    
}

.border_left {
   width: 150%;
    height: 100%;
    border-left: 1px solid #ef4625;
    border-top: 1px solid #ef4625;
}

.left_control {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 225px;
    margin: 100px 0px;
}

.right_control {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 225px;
    margin: 100px 0px;
}

.rot_left{
    width: 90px;
    margin: 0px 0px 20px 0px;
    position: relative;
    z-index: 20;
}

.rot_right {
    transform:scaleX(-1);
    width: 90px;
    margin: 0px 0px 20px 0px;
    position: relative;
    z-index: 20;
}

.open{
    width: 100px;
}

.gallery_text{
    width: 50%;
    margin: 0px 25%;
}

.center{
    display: flex;
   align-items: center;
    flex-direction: column;
}

.gallery_img {
    position: relative;
    width: 100%;
}

.cent_ui{
    width: 100%;
    display: flex;
    justify-content: center;
 
}

.border_right {
    width: 150%;
    height: 100%;
    position: relative;
    right: 25px;
    border-right: 1px solid #ef4625;
    border-bottom: 1px solid #ef4625;
}


#f_open{
  position: relative;
    z-index: 3;
    display: none;
}

#f_closed {
      position: relative;
    z-index: 4;
    display:block;
    
}

#fl_open {
      position: relative;
    z-index: 5;
    display: none;
    
}

#fl_closed {
      position: relative;
    z-index: 6;
    display: none;
    
}

#l_open {
      position: relative;
    z-index: 7;
    display: none;
    
}

#l_closed {
      position: relative;
    z-index: 8;
    display: none;
    
}

#bl_open{
      position: relative;
    z-index: 9;
    display: none;
    
}

#bl_closed {
      position: relative;
    z-index: 10;
    display: none;
    
}

#b_open {
      position: relative;
    z-index: 11;
    display: none;
    
}

#b_closed{
      position: relative;
    z-index: 12;
    display: none;
    
}

#br_open{
      position: relative;
    z-index: 13;
    display: none;
    
}

#br_closed {
      position: relative;
    z-index: 14;
    display: none;
    
}

#r_open{
      position: relative;
    z-index: 15;
    display: none;
    
}

#r_closed{
      position: relative;
    z-index: 16;
    display: none;
    
}

#fr_open{
      position: relative;
    z-index: 17;
    display: none;
    
}

#fr_closed{
      position: relative;
    z-index: 18;
    display: none;
    
}

#film1 {
    height: 450px;
    position: relative;
    z-index:1;
    right: 125px;
}

#film2{
    height: 450px;
    position: relative;
    z-index:2;
    right: 125px;
    bottom: 450px;

    
}

/* transit specific styles*/
.transit_vid{
    display: flex;
   justify-content: center;
}




/* css animations */



/* query the media */



@media screen and (max-width: 1024px){
    .links{
        display: grid;
        grid-template-rows: 1fr 1fr;
        grid-template-columns: 1fr;
        justify-items: right;
    }
    
    #vert1{
        grid-column: 1/3;
        grid-row: 1/2;
        
    }

    #vert2{
        grid-column: 1/3;
        grid-row: 2/3;
       
       
    }
    
    #vert3{
        display: none;
       
    }
    

    #aboutlink{
        grid-column: 1/3;
        grid-row: 1/2;
        margin-right: 15px;
    }
    
    #explink{
        grid-column: 1/3;
        grid-row: 2/3;
        margin-right: 15px;
    }
    
    .gallery{
        position: relative;
        top: 45px;
    }
    
  

    
}
 


@media screen and (max-width: 850px){
    
    .hp_entry_left{
   grid-template-columns: 400px 1fr; 
}
    
    .hp_entry_right{
        grid-template-columns: 1fr 400px;
    }
    
    .formal_large{
        display: none;
    }
    
    .formal_mid{
        display: block;
    }
    
    .spectra_large{
        display:none;
    }
    
    .spectra_mid{
        display:block;
    }
    
    .phone_large{
        display: none;
    }
    
    .phone_mid{
        display: block;
    }
    
    
     #index_horiz{
        display: none;
    }
    
    #index_vert{
        display:block;
        width: 30%;
    }
    
    .proj_hero_img{
        width: 600px;
        height: 300px;
    }
    
    .proj_hero_desc{
        width: 600px;
    }
    
    .proj_left{
        height: 300px;
        grid-template-columns: 300px 200px 1fr;
        
        
    }
    
    .proj_right{
        height: 300px;
         grid-template-columns: 1fr 200px 300px;
    }
    
     #long_desc{
         height: 650px;
       
    }
    
    
    
}

@media screen and (max-width: 800px){
    
    .container{
        width: 100%;
        margin: 0%;
    }
    
    .hp_entry{
        margin: 15% 0%; 
        height: 280px;
    }
    
    .hp_entry_left{
        grid-template-columns: 100%;
        grid-template-rows: 250px 25%;
        
    }
    
    .hp_left_img{
        grid-column: 1;
        grid-row: 1/2;
        
    }
    
    .hp_left_desc{
        grid-column: 1;
        grid-row: 2/3;
    }
    
    .hp_entry_right{
        grid-template-columns: 100%;
        grid-template-rows: 250px 25%;
        
    }
    
    .hp_right_img{
        grid-column: 1;
        grid-row: 1/2;
    }
    
    .hp_right_desc{
        grid-column: 1;
        grid-row: 2/3;
    }
    
    .formal_desc{
        padding: 3%;
    }
    
    .spectra_desc{
    padding: 3%;
    text-align: left;
   width: 75%;
    }
    
    .transit_desc{
        padding: 3%;
    }
    

    .formal_mid{
        display:none;
    }
    
    .formal_small{
        display: block;
    }
    
    .spectra_mid{
        display: none;
    }
    
    .spectra_small{
        display: block;
    }
    
    .phone_mid{
        display: none;
    }
    
    .phone_small{
        display: block;
    }
    
    .proj_hero_img{
        width: 450px;
        height: 200px;
        margin: 10px auto;
    }
    
    #hero_big{
        display: none;
    }
    
    #hero_small{
        display: block;
    }
    
    .proj_hero_desc{
        width: 450px;
    }
    
    .proj_left{
        width: 400px;
        height: auto;
        grid-template-columns: 1fr;
        grid-template-rows: 300px 200px; 
        margin: 5% auto;
        
    }
    
    .proj_left_img{
        grid-row: 1/2;
        grid-column: 1/2;
    }
    
    .proj_left_desc{
        grid-row: 2/3;
        grid-column: 1/2;
        margin-top: 20px;
    }
    
    .proj_right{
        width: 400px;
        height: auto;
        grid-template-columns: 1fr;
        grid-template-rows: 300px 200px;
        margin: 5% auto;
    }
    
    
    .proj_right_img{
        grid-row: 1/2;
        grid-column: 1/2;
    }
    
    .proj_right_desc{
        grid-row: 2/3;
        grid-column: 1/2;
        margin-top: 20px;
    }
    
.proj_center{
    width: 450px;
    height: auto;
    margin: 0px auto 8% auto;
}
    
.proj_center_spectra{
    margin: 0px auto 8% auto;
    width: 450px;
    height: 200px;
}

.proj_center_img{
    width: 450px;
    height: 300px;
    background-color: coral;
    margin-bottom: 10px;
}

.proj_center_desc{
    width: 400px;
    margin: 10px auto;
  
}
    
    #long_desc{
        grid-template-rows: 300px 400px;
    }
    
    #hero_small{
        display:block;
    }
    
.proj_left_img_small{
    width: 100%;
    display: block;
}

.proj_right_img_small{
    width: 100%;
    display: block;
}

.proj_cent_img_small{
    width: 100%;
    display: block;
}

.proj_left_img_big{
    width: 100%;
    display: none;
}

.proj_right_img_big{
    width: 100%;
    display: none;
}

.proj_cent_img_big{
    width: 100%;
    display:none;
}
    
.about_content{
    display: flex;
    flex-direction: column;
    width: 100%;
    
}

.face{
    width: 200px;
    height: 200px;
    background-color: gray;
    margin: 10px 5%;}

.flavortext{
    width: 80%;
    margin: 10px 5% 20% 5%;
    
}
    
    

}