h1 {
    font-family : "roboto", sans-serif;
    font-weight: 200;
    font-size: 17px;
    letter-spacing: 12px;
}

h2 {
    font-family: "modula-tall",sans-serif;
    font-weight: 400;
    margin: 0;
    font-size: 75px;
    letter-spacing: 10px;
}

h3 {
  font-family: "modula-tall",sans-serif;
    font-weight: 400;
    margin: 0;
    font-size: 52px;

}

p {
    font-family : "roboto", sans-serif;
    font-weight: 200;
    font-size: 14px;
  
}

p2 {
    font-family : "roboto", sans-serif;
    font-weight: 300;
    font-size: 18px; 
    border: 1px solid #ef4625;
    padding: 1%;
    margin: 1%;
   width: 20%;
    text-align: center;
}



.first{
    width: 80%;
    margin: 5% 10%;
     border-bottom: 1px solid #ef4625;
}



.head_title{
    width:  44%;
    margin: 5% 27% 0% 27%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-content: center;
    
}

.head_text{
    text-align: center;
}

.headdia_left{
    width: 110px;
    height:95px;
}

.headdia_right{
    width: 110px;
    height: 95px;
    transform: scaleX(-1);
}

.head_img {
    width: 50%;
    margin: 0% 25%;
    padding-left: 9px;
    position: relative;
    z-index:1;
}



.history {
    width: 50%;
    height: 50%;
    margin: 20% 25%;
    display: flex;
    flex-direction: row;
    align-content: center;
    justify-content:space-between;
}

.history_text {
    width: 35%;
    
}

.border {
    border-right: 1px solid #ef4625;
}

.hist_img {
    width: 35%;
  
}

.bg_dia {
    width: 200px;
    height: 200px;
    position: relative;
    z-index: 1;
    top: 25px;
    left: 25px;
}

.iso_photo {
    width: 200px;
    position: relative;
    z-index: 2;
    bottom: 125px;
    right: 25px;
}

.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;
}

.film{
    width: 50%;
    height: 50%;
    margin: 20% 25%;
    display: flex;
    flex-direction: row;
    align-content: center;
    justify-content:space-between;
}

.film_img{
    width: 300px;
    height:300px;
    
}

.film_text{
     width: 35%;
}


.sonar {
     width: 75%;
    height: 65%;
    margin: 20% 0% 20% 25%;
    display: grid;
    grid-template-columns: 34% 1% 1fr;
    overflow:hidden;
}


.sonar_img_box{
      position: relative;
    
}

.sonar_img{
    position: relative;
    width: 150%;
    bottom: 75px;


}

.store {
    width: 80%;
    margin: 5% 10%;
    display: grid;
    grid-template-columns: 5% 1fr 1fr 5%;
}

.shop_cam{
    width: 100%;
}

.film_photo {
    width: 55%;
    background-color: aqua;
    position: relative;
    left: 140px;
}

.links_2{
    position: relative;
    left: 90%;
}
.links{
    display: flex;
    flex-direction: column;
    
}

.way_1 {
    width: 50px;
    height: 50px;
    background-color: aqua;
    position: relative;
    z-index: 20;
    bottom: 500px;
}

#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;
    
}

#fog {
    position: relative;
    z-index: 1;
    display: none;
}

#cars{
    position: relative;
    z-index: 2;
    display: none;
}

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

#cube{
    position: relative;
    z-index: 4;
    display: none;
}

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

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

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

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

.hide_cam{
    display:none;
}

.show_cam{
    display:block;
}

@media screen and (max-width: 1024px){
    .head_title {
    width:  44%;
    margin: 5% 28% 0% 28%;
    }
    
    .head_img {
    width: 60%;
    margin: 0% 20%;
    padding-left: 2%;
    position: relative;
    z-index:1;
}
    
.center{
    display: flex;
    align-items: center; 
    }
    
.gallery_img {
    width: 125%;
    right: 50px;

    
}
    
    .border_left{
        
        
    }
    
    .border_right {
        
    }
    
    .film{
    width: 60%;
    height: 50%;
    margin: 15% 15%;
    
}
    
    .border.filmborder{
        height: 100%;
    }
    
    .border.sonarborder{
        height: 80%;
    }
    
    .sonar_img{
    width: 150%;
    bottom: 30px;
    }
    
    .histborder{
        height: 110%;
    }
        
    
}

@media screen and (max-width: 950px){
     .histborder{
        height: 130%;
    }
    
    .hist_img{
        position: relative;
        top: 50px;
        
    }
    
    .links_2{
        top: 10%;
    }
    
    .film_photo{
        top: 50px; 
        
    }
    
    .gallery_img{
        width: 100%;
        left: 25px;
    }
    
    .rot_left{
        width: 50px;
        
    }
    
    .rot_right{
        width:50px;
    }
      
    
}

@media screen and (max-width: 800px){
    
h1 {
    font-family : "roboto", sans-serif;
    font-weight: 200;
    font-size: 15px;
    letter-spacing: 10px;
}

h2 {
    font-family: "modula-tall",sans-serif;
    font-weight: 400;
    margin: 0;
    font-size: 64px;
    letter-spacing: 8px;
}
    
     .head_img {
    width: 60%;
    margin: 0% 13% 0% 20%;
    padding-left: 7%;
    
}
    
   
    
.headdia_left{
    width: 100px;
    height:87px;
}

.headdia_right{
    width: 100px;
    height: 87px;
   
}
    
.head_title {
    width:  56%;
    margin: 5% 28% 0% 28%;
    }
    
.history{
    width: 60%;
    height: 60%;
    margin: 20% 20%;
    }
    
    .gallery{
        width: 90%;
        height: 100%;
        margin: 5% 5%;
        display: grid;
        grid-template-columns: 10% 35% 35% 10%;
        grid-template-rows: 80% 20%;
        
    }
    
    .gallery_img{
        width: 100%;
    }
    
    .border_left{
        grid-column: 1/2;
        grid-row: 1/3;
        
    }
    
    .border_right{
        grid-column: 4/5;
        grid-row: 1/3;
    }
    
    .center{
       
        grid-column: 2/4;
        grid-row: 1/2;
    }
    
    .left_control{
        grid-column: 2/3;
        grid-row: 2/3;
        height: 50px;
        margin: 100px 0px;
    }
    
    .rot_left{
        width: 65px;
        height: 65px;
    }
    
    .right_control{
        grid-column: 3/4;
        grid-row: 2/3;
    }
    
    .store{
        width: 90%;
        margin: 5%;
    }
    
    
    
}

@media screen and (max-width: 500px){
    
}