 
.dirigt{
    position: fixed;
    background:rgba(0, 0, 0, 0.712);
    width: 100%;
    height: 100%;
    
    top:0;
    left: 0;
    display:inline-block;
justify-content: center;
align-items: center;
transform: translate(100%);
transition: transform .2s ease-in-out;
overflow: hidden;
}
.misio{
    position: fixed;
    background:rgba(0, 0, 0, 0.712);
    width: 100%;
    height: 100%;
    
    top:0;
    left: 0;
    display:inline-block;
justify-content: center;
align-items: center;
transform: translate(100%);
transition: transform .2s ease-in-out;
overflow: hidden;
}
.mision{
    position: fixed;
    background:rgba(0, 0, 0, 0.712);
    width: 100%;
    height: 100%;
    
    top:0;
    left: 0;
    display:inline-block;
justify-content: center;
align-items: center;
transform: translate(100%);
transition: transform .2s ease-in-out;
overflow: hidden;
}
.misionrn{
    position: fixed;
    background:rgba(0, 0, 0, 0.712);
    width: 100%;
    height: 100%;
    
    top:0;
    left: 0;
    display:inline-block;
justify-content: center;
align-items: center;
transform: translate(100%);
transition: transform .2s ease-in-out;
overflow: hidden;
}
.misionr{
    position: fixed;
    background:rgba(0, 0, 0, 0.712);
    width: 100%;
    height: 100%;
    
    top:0;
    left: 0;
    display:inline-block;
justify-content: center;
align-items: center;
transform: translate(100%);
transition: transform .2s ease-in-out;
overflow: hidden;
}
.misio1{
    position: fixed;
    background:rgba(0, 0, 0, 0.712);
    width: 100%;
    height: 100%;
    
    top:0;
    left: 0;
    display:inline-block;
justify-content: center;
align-items: center;
transform: translate(100%);
transition: transform .2s ease-in-out;
overflow: hidden;
}
.misio2{
    position: fixed;
    background:rgba(0, 0, 0, 0.712);
    width: 100%;
    height: 100%;
    
    top:0;
    left: 0;
    display:inline-block;
justify-content: center;
align-items: center;
transform: translate(100%);
transition: transform .2s ease-in-out;
overflow: hidden;
}
.misioa{
    position: fixed;
    background:rgba(0, 0, 0, 0.712);
    width: 100%;
    height: 100%;
    
    top:0px;
    left: 0;
    display:inline-block;
justify-content: center;
align-items: center;
transform: translate(100%);
transition: transform .2s ease-in-out;
overflow: hidden;
}
 
.img-galeriaxx{
    width: 95%;
    height: 100%;
   flex-direction: column-reverse;
    
    
   
    justify-content: space-evenly;
    flex-wrap: wrap;
        
    margin-bottom:  10px;
    position: relative;
    

}
.img-galeria1{
    height: 100px;
   cursor: progress;
  
    
    width: 200px;
    text-align: center;
    display:flex;
    margin-left: 13px;
    margin-bottom:  15px;
    box-shadow: 0 0 6px rgba(212, 3, 3, 0.5);
    object-fit: cover; 
    position:relative;
     

}
.capat{
    position: absolute;
background: rgba(5, 5, 5, 0.075);
margin-top:-110px;
width: 20%;
height: 110%;
cursor: pointer;
justify-content: space-evenly;
align-items: center;
object-fit: cover;
}
.padre{
    
   width: 100%;
     height:0%;
     
}
.iframgallery{
    margin-top: 175px;
    width: 100%;
    height: calc(75vh - 48px);  
    
    
    
}
.lateral{
    display: block;
margin-top: 0px;
    margin-bottom:  15px;
    justify-content: space-evenly;
  align-items: center;
    width: 70%;
    height: 180px;
    position: absolute;
    background-color: rgba(12, 11, 11, 0.384);
    overflow:auto;
    flex-wrap: wrap;
}
.imaqa{
    margin-left: 40%;
     width: 100%;
      height: 100%;
       margin-top: -50% ;
                    
    display: block;
}
.imaqa:hover{
    
    
    cursor: move;
}
.img-galeria:hover{
   
    transform: scale(1.5);
}
.proim{
    width: 200px;
    height: 200px;
}
.agregar-imagen{
    object-fit: cover;
    width: 60%;
    border-radius:10px ;
   
}
.imagen-light{
    position: fixed;
    background:rgba(0, 0, 0, .5);
    width: 100%;
    height: 100%;
    top:0;
    left: 0;
display: flex;
justify-content: center;
align-items: center;

}
.hism{
    height: 85%;
       margin-top: 50px;
       display: list-item;
   margin-left: 20%;      
       width: 45%;
    background-color: rgb(199, 194, 194);
       overflow: auto;
}
.parraf{
    height: 20px;
    width: 10px;
}
.textos{
    width: 20px;
    height: 20px;
}
.his{
  width: 40%; height: 100%; flex-wrap: wrap; overflow: auto;
}
.hisxc{
    width: 100%; height: 100%; flex-wrap: wrap; overflow: auto;
  }
  .hisxc1{
    width: 100%; height: 100%; flex-wrap: wrap; overflow: auto;
  }
  .hisxc12{
    width: 100%; height: 100%; flex-wrap: wrap; overflow: auto;
  }
.hismep{
    height: 100%;
       
       display:flex;
       
    margin-bottom:  15px;
   margin-left: 5%;      
       width: 70%;
    background-color: rgb(199, 194, 194);
       overflow: auto;
flex-wrap: wrap;
}
.hismepxrn{
    height: 100%;
       
       display:flex;
       
    margin-bottom:  15px;
   margin-left: 5%;      
   margin-right: 10%;
       width: 85%;
    background-color: rgb(199, 194, 194);
       overflow: auto;
flex-wrap: wrap;
}
.hismepxr{
    height: 100%;
       
       display:flex;
       
    margin-bottom:  15px;
   margin-left: 5%;      
   margin-right: 10%;
       width: 85%;
    background-color: rgb(199, 194, 194);
       overflow: auto;
flex-wrap: wrap;
}
.hismepx{
    height: 100%;
       
       display:flex;
       
    margin-bottom:  15px;
   margin-left: 5%;      
   margin-right: 10%;
       width: 85%;
    background-color: rgb(199, 194, 194);
       overflow: auto;
flex-wrap: wrap;
}

.hismee{
    height: 80%;
       
       display:flex;
       
    margin-bottom:  15px;
   margin-left: 5%;      
       width: 70%;
    background-color: rgb(199, 194, 194);
       overflow: auto;
flex-wrap: wrap;
}

.hismg{
    height: 80%;
       
       display:flex;
       justify-content: space-evenly;
    margin-bottom:  15px;
   margin-left: 5%;      
       width: 70%;
    background-color: rgb(199, 194, 194);
       overflow: auto;
flex-wrap: wrap;
}
.img-galeria{
    margin: 15px;
    height: 100px;
  width: 100px;
 box-shadow: 0 0 6px rgba(0, 0, 0, .5);
cursor: pointer;
}

.hismev{
    height: 100%;
       margin-top: -70px;
       display: list-item;
   margin-left: 5%;      
       width: 70%;
    background-color: rgb(199, 194, 194);
       overflow: auto;
}

.colm{
    height: 85%;
       margin-top: 50px;
       
 margin-left: 20%;      
       width: 45%;
    background-color: rgb(199, 194, 194);
       overflow: auto;
}

.close{
    position: absolute;
    top: 0px;
    right:   10%;
    width: 40px;
    cursor: pointer;
    background-color: #f2f2f2;
    background: #f2f2f2;
}
.iml{
    width: 200px;
    height: 200px;
}
.closexz{
    position: absolute;
    top: 10px;
    
    width: 40px;
    margin-left: 65%;
    cursor: pointer;
    background-color: #f2f2f2;
    background: #f2f2f2;
}
 .default{

    height: 100%;
       margin-top: 1px;
       margin-left: 1px;
       width: 99%;
    background-color: rgb(15, 15, 15);
       overflow: auto;}
 
.col-md-6{
    height: 50%;
       margin-top: 50px;
       margin-left: 1px;
       width: 30%;
    background-color: #ffff;
       overflow: auto;}

.tabimag{
    width: 75%;
        }
        .tabimag:hover{
            transform: scale(1.1);
        }
        
        .tabimag1:hover{
            transform: scale(3);
        }
        .tabimag1{
            margin-top: 55px;
            width: 25%;
                }

       


   .badge-secondary{
    animation-name:drivez;
    animation-duration: 30s;
    animation-fill-mode: both;
    animation-iteration-count: infinite;


   }

   .cerrarrxx{
    width: 100%;
     height: 100%; 
     margin-top: 0px; 
     margin-left: 40%;
      display: block;
      color: rgba(5, 5, 5, 0); 
      position: absolute;
      
}
.col-md-4{
    height: 50%;
       margin-top: -350px;
       margin-left: 1px;
       width: 30%;
    background-color: #ffff;
    height: 85%;
       overflow: auto;}
   @keyframes drivez{
    from{
        transform: translate(-1000px);
                }
to{
    transform: translate(1500px);
}
}
 
   @media screen and (max-width:800px) {
    .his{
        width: 90%; 
        height: 100%; 
        flex-wrap: wrap;
         overflow: auto;
      }
    .imaqa{
        margin-left: 0%;
         width: 1%;
          height: 1%;
         
                        
        
    }
    .imaqa:hover{
        
        
        cursor: move;
    }
    
    .default{

        height: 100%;
           margin-top: 1px;
           margin-left: 1px;
           width: 99%;
        background-color: rgb(12, 12, 12);
           overflow: auto;}
    .hismep{
        height: 100%;
           
           display:flex;
           
        margin-bottom:  15px;
       margin-left: 5%;      
           width: 100%;
        background-color: rgb(199, 194, 194);
           overflow: auto;
    flex-wrap: wrap;
    }

    .capat{
        position: absolute;
    background: rgba(5, 5, 5, 0.075);
    margin-top:-110px;
    width: 100%;
    height: 110%;
    cursor: pointer;
    justify-content: space-evenly;
    align-items: center;
    object-fit: cover;
    }
    .hism{
        height: 85%;
           margin-top: 50px;
           display: list-item;
       margin-left: 0%;      
           width:95%;
        background-color: rgb(199, 194, 194);
           overflow: auto;
    }
    .colm{
        height: 85%;
           margin-top: 50px;
           display: list-item;
       margin-left: 0%;      
           width: 90%;
        background-color: rgb(199, 194, 194);
           overflow: auto;
    }
    .col-md-6{
        height: 80%;
        width: 100%;
        margin-top: 50px;
        margin-left: 1px;
        background: #faf6f6;
        overflow: auto;
        
    }
    .col-md-4{
        position: absolute;
        height: 50%;
           margin-top: -450px;
           margin-left: -40%;
           width: 100%;
        background-color: #ffff;
        height: 85%;
           overflow: auto;}

   .badge-secondary{
    animation-name:drivezx;
    animation-duration: 20s;
    animation-fill-mode: both;
    animation-iteration-count: infinite;


   }
   @keyframes drivezx{
    from{
        transform: translate(-500px);
                }
to{
    transform: translate(300px);
}
}

 



}


