*{
   margin: 0px;
   padding: 0px ;
   box-sizing: border-box;
   }






 @font-face{
            font-family: ser;
            src: url(monofonto.otf)}           

              


 .contenedor{
             
             width: 100%;
             max-width: 2000px;
             margin: auto;
             display: flex;
             flex-wrap:  wrap;
        }


header{
            
            width: 100%;
            padding: 10px;
            padding-left: 50px;
            background: black;
            display:flex;
            flex-wrap: wrap;
            justify-content:space-between;
            align-items:center;
            flex-direction:row;
            flex-wrap:wrap;}  

header .logo img{
    width: 150px;
}       

ul,ol{
     list-style: none;}



.nav li a{
           background-color: black;
           color: white;
           font-size: 15px;
           font-family:ser;
           font-weight: bold;
           display: flex;

           text-decoration: none;
           padding: 15px 50px ;

           display: block;
          }

.nav li a:hover{
                 background-color: black;
                 color: yellow;
                }



.nav > li{ 
            float: left;
 }



 .nav li ul {
              display: none;
              position: absolute;
              min-width: 140px;}

.nav li:hover > ul {
    display: block;
               }




.portada{
          width: 100%;
          display: flex;
          flex-wrap: wrap;

         
          
          
    }

.portada img{ 
          width:100%;
         height: 100%;

         margin: auto;}


.menu{
        background: url(SOMOS02.jpg);
        background-repeat: no-repeat;
        background-size: cover;
        background-attachment:fixed;}



.articulo{
            width:80%;
                   
            margin: auto;

            
          }

.articulo h1{  color: yellow;
               
               text-align: center;
               font-size: 40px;              
               font-family: ser;


                }



.plus {
          width: 100%;
          margin: auto;
         background: black;
         
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
     
        
        }

.plus h2{
         font-size: 30px;
         font-family: ser;
         color: white;}


.batt {width: 100%;

      background: black;
      justify-content: center;
      display: flex;
     flex-wrap: wrap;}


 .batt img{   
                 width: 500px;
                margin: 15px;
               
                justify-content: center;

             
             }          


.textt{       
              
              
              text-align: center;
              padding-top: 60px;
              color: white;
              font-weight: bold;
              font-family: ser;

                 }


.textt h2{   font-size:30px;
             font-family: ser;
            color: white;

         }




.realizamos{
             width: 100%;
             background: black;
             color: white;
}
 
.recomendaciones{
           width: 100%;
           display: flex;
           flex-wrap: wrap;
           justify-content: center;
           background: black;

         
          }



.recomendaciones img{  
                
                
                width: 180px;
                height: 120px;
                margin: 15px;
                margin-left: 20px;
               border-radius: 1px;
                 animation: bounce 2s infinite;
               }



.realizamos{
                    width: 100%;
                    background: ;
                    text-align: center;}

           
.realizamos h1{font-family: ser;
               color: white;}


.colocacion{
              width: 100%;
              background: black;
             text-align: center;
              color: white;}
.colocacion h3{ font-family: ser; 
                color: white; }






.produc{       width: 100%;
               display: flex;
               flex-wrap: wrap;
              padding-left: 50px;
               background: black;
         background-attachment: fixed;
         background-repeat: no-repeat;
         background-size: cover;

               }



.produc img { 
                  width: 300px;
                  padding: 4px;

                  
                  justify-content: center;

          }


.porce img{
                width: 350px;
                height: 300px;
                background: black;
                 justify-content: center;}          

.produc figcaption{ 
                    font-family: ser;
                    font-size: 20px;
                    text-align: center;
                     
                     color: white ;                  
                

           }


.trabajos01{
              background: black;
              width: 100%;
              text-align: center;
              color: white;
              font-family: ser;
              padding-top: 15px;
               
      }      



.nuestros{
           width: 100%;
           padding-left: 100px;
           background: black;
           justify-content: all;
           background: url(fondo004.jpg);
           
         
          }

.nuestros img{  
                
                
                width: 100%;
                padding-top: 80px;
                height:80%;
                justify-content: center;
                margin-left: -50px;
               
                display: flex;}



.medios{
          width: 100%;
          background: black;
          color: white;
          font-family: ser;
          text-align: center;}

          
.medios img{  
                
                
                width: 250px;
                margin: 5px;
                margin-left: 10px;
               border-radius: 10px;
                background: red;}





.textubi{

          width: 100%;
          background: black;
          text-align: center;
          color: white;
          font-family: ser;

                }
                





.ubicacion{
             width: 100%;

             height: 350px;
             display: flex;
             flex-wrap: wrap;
             background: black;
            justify-content: center;

           
           
           }





footer{
         width: 100%;
         
         background: black;
         color: white;
         text-align: center;
         
         font-family: ser;
         
         
     }

footer h1{
            font-size: 20px;
           margin-top: 10px;}




.container-redes img{
                 
                 position: fixed;
                 bottom: 20px;
                 right: 20px;
                 width: 50px;}

.what01 img{
                 position: fixed;
                 bottom: 20px;
                 right: 70px;
                 width: 50px;

              }

.whatsapp-icon .icon-text {
   
    display: none;
    position: absolute;
    padding-bottom: 20px;
    
    background-color: RED;
    color: #fff;
    border-radius: 5px;
    padding: ;
    transform: translateX(-50%);
    transition: display 0.3s ease;

}


.whatsapp-icon:hover .icon-text {
    display: block;
    bottom: 30px;
    text-align: center;
}







              .what02 img{
                 position: fixed;
                 bottom: 20px;
                 right: 20px;
                 width: 50px;
              }



.facelogo img{
                 position: fixed;
                 bottom: 20px;
                 right: 200px;
                 width: 50px;}

.insta img{
                 position: fixed;
                 bottom: 20px;
                 right: 130px;
                 width: 50px;}












.container-redes{
                 position: fixed;
                 bottom: 20px;
                 right: 20px;
                 width: 50px;
                 display: flex;

                 flex-direction: column;}


#botonarriba{
                position: fixed;
                bottom: 20px;
                left: 20px;
                 width: 60px;}




.recomendaciones li {
            display: inline-block;
            }

 .recomendaciones a {
            text-decoration: none;}


.lightbox{
           
            position: fixed;
            top: 0;
            left: 0;
            background: rgb(0, 0, 0,.5);
            transition: transform .3s ease-in-out;
            width: 100%;
            height: 100vh;
            z-index: 1000;
            display: flex;
            justify-content: center;
            align-items: center;
            transform: scale(0);
            }

  .lightbox img{
                width: 20vw;
                height:20vw;
               }          

.lightbox:target{
                   transform: scale(1);}


.close{
     display: block;
     position: absolute;
     top: 40px;
     right: 40px;
     background: yellow;
     color: black;
     text-decoration: none;
     width: 40px;
     height: 40px;
     text-align: center;
     line-height: 40px;
     border-radius: 50%;
 }



.reali{
             width: 100%;
             background: black;
             color: white;
}
 
.reco{
           width: 100%;
           display: flex;
           flex-wrap: wrap;
           justify-content: center;
           background: red;

         
          }



.reco img{  
                
                
                width: 250px;
                margin: 15px;
                margin-left: 50px;
               border-radius: 10px;}



.reali{
                    width: 100%;
                    background: ;
                    text-align: center;}

           
.reali h1{font-family: ser;
               color: white;}


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


header{
            
            width: 100%;
            padding: 10px;
            padding-left: 50px;
            background: ;
            display:flex;
            flex-wrap: wrap;
            justify-content:space-between;
            align-items:center;
            flex-direction:row;
            flex-wrap:wrap;}  

header .logo img{
    width: 200px;
    justify-items: center;
}       


.recomendaciones img{  
                
                
                width: 50px;
                height: 50px;
                margin: 5px;
                margin-left: 0px;
               border-radius: 1px;
                 animation: bounce 2s infinite;
               } 

.reco img{
                width: 150px;
                height: 150px;
                display: flex;
                justify-content: center;
                flex-wrap: wrap;
                
        }
.reco{
           width: 100%;
           display: flex;
           flex-wrap: wrap;
           justify-content: center;
           background: black;

         
          }

.nuestros{

        
           
           
         }

.nuestros img{

          
         }











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


.container-redes{
                 
                 bottom: 20px;
                 right: 20px;
                 width: 50px;
                 display: flex;
                 margin-left: 60px;
                 }






header{
            
            width: 100%;
            padding: 10px;
            padding-left: 50px;
            background: ;
            display:flex;
            flex-wrap: wrap;
            justify-content:space-between;
            align-items:center;
            flex-direction:row;
            flex-wrap:wrap;}  

header .logo img{
    width: 200px;
    justify-items: center;
}       


.recomendaciones img{  
                
                
                width: 50px;
                height: 50px;
                margin: 5px;
                margin-left: 0px;
               border-radius: 1px;
                 animation: bounce 2s infinite;
               } 

.reco img{
                width: 150px;
                height: 150px;
                display: flex;
                justify-content: center;
                flex-wrap: wrap;
                
        }
.reco{
           width: 100%;
           display: flex;
           flex-wrap: wrap;
           justify-content: center;
           background: black;

         
          }

.nuestros{

           width: 100%;
           height: 200px;

         }

.nuestros img{

           width: 130%;
           height: 200px;
           margin-top: -60px;
           padding-right: 80px;
           justify-content: center;

         }


   }