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


@font-face{
           font-family: via;
           src: url(Viafont.otf);
             

           }




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

header{
            
            width: 100%;
            padding: 20px;
            padding-left: 50px;

            display:flex;
            justify-content:space-between;
            align-items:center;
            flex-direction:row;
            flex-wrap:wrap;}  

header .logo img{
    width: 200px;
    
}       

header nav{
          width: 60%;
          margin-right: 60px;

          display: flex;
          flex-wrap: wrap;
          align-items: center;}  

header nav a {
           text-align: center;
           text-decoration: none;
           font-family: via;

           padding: 5px;
           color: black;

           flex-grow: 1;
         }





.portada{
          width: 100%;

         
          margin: auto;
          
    }

.portada img{ 
          width:100%;
         height: 100%; 
         margin: auto;}
 

 .nosotros{ 
              width:100%;
              
              background: linear-gradient(rgba(5, 7, 12, 0.40), rgba(5, 7, 12, 0.40)),
               url(CUERPO02.jpg);
              background-repeat: no-repeat;
              background-attachment: fixed;
              background-size: cover;

    
             }

 .description{  
                width: 60%;
                margin: auto;
                padding: 5px;
                color: white;
                }            

.description h1{
                  
                width: 100%;
                font-size: 50px;
                text-align: center;
                }

.description p{
                  
                width: 100%;
                font-size: 30px;
                text-align: center;
                }

.productos{
                width: 100%;
                
                background: lightblue;
                justify-content: center;
                }



.nuestros{       
                width: 100%;
                background: black;
              }
.nuestros p {
                color: white;
                text-align: center;
               font-size: 30px;
               font-family: via;}

.productos02{
                width: 100%;
                
                background: lightblue;
                justify-content: center;
                }



.nuestros02{       
                width: 100%;
                background: black;
              }
.nuestros02 p {
                color: white;
                text-align: center;
               font-size: 30px;
               font-family: via;}






.produc{
               display: flex;
               flex-wrap: wrap;
               margin-left: 50px;
               }



.produc img { 
                  width: 180px;
                  padding: 5px;
                  
                  justify-content: center;




           }

.produc figcaption{ 
                    font-family: via;
                    font-size: 12px;
                    text-align: center;                  
                

           }



.especial{ 
              width:100%;
              
              background: lightblue;

    
             }

.especial02{       
                width: 100%;
                background: black;
              }
.especial03 p {
                color: white;
                text-align: center;
               font-size: 30px;
               font-family: via;}



.servi{        
               
               background: linear-gradient(rgba(5, 7, 12, 0.50), rgba(5, 7, 12, 0.50)),
               url(fondo02.jpg);
               background-repeat: no-repeat;
              background-attachment: fixed;
              background-size: cover;


               display: flex;
               flex-wrap: wrap;
               padding-left: 100px;
               padding-top: 20px;
               }


.carga{
          width: 400px;
          }

 .carga img {
          width: 100%;
          
          border-radius: 10px;
          border: solid lightblue 10px;
          }         
.carga p{
           font-size: 20px;
           font-family: via;
           text-align: center;
            padding-top: 50px;
            color: white;
           
            
         text-shadow: 2px 2px 0px grey;
          }


.mapa{
             width: 100%;
             
             display: flex;
             flex-wrap: wrap;
             background: black;
            justify-content: center;

    }




footer{

           width: 100%;
           
           background: black;}               

footer h3,h4,h5,h6{
          
           color: white;
           padding-left: 30px;
           padding-top: 10px;
           font-size: 30px;
           text-align: center;}




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




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

header .logo img{
    width: 250px;
    margin-left: 15px;

    animation-name: animar;
           animation-duration: 2s;
           animation-delay: 0;
    
}       

@keyframes animar{
          0%{
              transform: scale(0.5); }
         

         }




.portada img{
           width: 100%;
           height: 250px;
           
           }





header nav{
          width: 80%;
          height: 200px;
          padding: -50px;
          margin-left: 10px;
                   
           
          
          
          }  

header nav a {
           text-align: center;
           text-decoration: none;
           font-family: via;

           padding: 10px;
           color: black;

           
         }

    
 .description h1{
                  
                width: 100%;
                font-size: 30px;
                text-align: center;
                }

.description p{
                  
                width: 100%;
                font-size: 30px;
                text-align: center;
                }

.produc{
               display: flex;
               flex-wrap: wrap;
               margin-left: 30px;
               }




.produc img { 
                  width: 100px;
                  padding: 5px;





           }




.produc figcaption{ 
                    font-family: via;
                    font-size: 7px;
                    text-align: center;
                  
                

           }


.carga img{
              margin-left:  -50px;}

.carga p{
              margin-left:  -100px;}


 .nosotros{ 
              width:100%;
              
              background: linear-gradient(rgba(5, 7, 12, 0.40), rgba(5, 7, 12, 0.40)),
               url(CUERPO02.jpg);
              background-repeat: no-repeat;
              background-attachment: fixed;
              background-size: cover;
              background-position: center;

    
             }


}



footer h3,h4,h5,h6{
          
           color: white;
           padding-left: 10px;
           
          
           }









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

header .logo img{
    width: 300px;
    margin-left: -40px;

    animation-name: animar;
           animation-duration: 2s;
           animation-delay: 0;
    
}       

@keyframes animar{
          0%{
              transform: scale(0.5); }
         

         }




.portada img{
           width: 100%;
           height: 250px;
           
           }





header nav{
          width: 80%;
          height: 200px;
          padding: -50px;
          margin-left: 10px;
                   
           
          
          
          }  

header nav a {
           text-align: center;
           text-decoration: none;
           font-family: via;

           padding: 10px;
           color: black;

           
         }

    
 .description h1{
                  
                width: 100%;
                font-size: 30px;
                text-align: center;
                }

.description p{
                  
                width: 100%;
                font-size: 30px;
                text-align: center;
                }

.produc{
               display: flex;
               flex-wrap: wrap;
               margin-left: 30px;
               }




.produc img { 
                  width: 130px;
                  padding: 10px;





           }

.produc figcaption{ 
                    font-family: via;
                    padding-left: 0px;
                  
                

           }


.carga img{
              margin-left:  -50px;}

.carga p{
              margin-left:  -100px;}


 .nosotros{ 
              width:100%;
              
              background: linear-gradient(rgba(5, 7, 12, 0.40), rgba(5, 7, 12, 0.40)),
               url(CUERPO02.jpg);
              background-repeat: no-repeat;
              background-attachment: fixed;
              background-size: cover;
              background-position: center;

    
             }


}