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

.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: 40%;
          margin-right: 60px;

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

header nav a {
           text-align: center;
           text-decoration: none;
           padding: 10px;
           color: green;

           flex-grow: 1;
         }





.portada{
          width: 100%;

         
          margin: auto;
          
    }

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

 .menu{
         width: 100%;
         background: whitesmoke;
         padding: 20px;
         display: flex;
         justify-content: center;
         align-items: center;
         flex-wrap: wrap;
         

          
} 


.articulo{
            width: 300px;
            background: url(madera01.jpg)80%;;
            float: left;
            margin: 10px;
            height: 200px;
            text-align: center;
            padding: 6px;
            color: white;
            border-radius: 10px ;
            border: solid burlywood;
            box-shadow: 10px 10px 20px burlywood;
                       
            }
.articulo h1{
              text-decoration: underline;
              color: brown;
              padding: 10px;}


.articulo p{
              
              color: black;
              font-family: cursive ;
              }


.articulo2 p{
              
              color: black;
              font-family: cursive ;
              }

.articulo3 p{
              
              color: black;
              font-family: cursive ;
              }

.articulo4 p{
              
              color: black;
              font-family: cursive ;
              }


 .articulo2{
            width: 300px;
            background: url(madera01.jpg)60%;;
            float: left;
            margin: 10px;
            height: 200px;
            text-align: center;
            padding: 6px;
            color: brown;
            border-radius: 10px ;
            border: solid burlywood;
            box-shadow: 10px 10px 20px white;
          }  

.articulo2 h1{
              text-decoration: underline;
              color: brown;
              padding: 10px;}


  .articulo3{
            width: 300px;
            background: url(madera01.jpg) 10%;;
            float: left;
            margin: 10px;
            height: 200px;
            text-align: center;
            padding: 6px;
            color: brown;
            border-radius: 10px ;
            border: solid burlywood;
            box-shadow: 10px 10px 20px white;
            
           } 

.articulo3 h1{
              text-decoration: underline;
              color: brown;
              padding: 10px;}




   .articulo4{
            width: 300px;
            background: url(madera01.jpg) 40%;
            float: left;
            margin: 10px;
            height: 200px;
            text-align: center;
            padding: 6px;
            color: brown;
            border-radius: 10px ;
            
            box-shadow: 10px 10px 20px burlywood;
              }  

.articulo4 h1{
              text-decoration: underline;
              color: brown;
              padding: 10px;}


.titulo{    
            width: 100%;
            background: ;
            text-align: center;
            font-size: 20px;
            margin: auto;
            padding-bottom: ;
            text-align: center;
   }
            


             

.container{
            width: 100%;
            
             background: url(madera.jpg);
             padding-top: 40px;
             
             display: flex;
             flex-wrap: wrap;
             justify-content: center;
             overflow: hidden;}


.mostrador{
            width: 600px;

            height: 500px;
            background:  ;

            color:white ;
            float: left;
            }

.mostrador img{
            width: 90%;
            margin-left: 30px;
            border-radius: 20px;
            border: 10px brown;}


 .mostrador p {
              font-family: monospace;
              font-size: 20px;
              margin-left: 40px;
              color: black;}           


.mostrador1{
            width: 600px;
            height: 500px;
            background: ;
            color:black ;
            float: left;
            }
              
.mostrador1 img{
            width: 90%;
           margin-left: 30px;
           border-radius: 20px;}



.mostrador1 p {
              font-family: monospace;
              font-size: 20px;
              margin-left: 80px;
              } 


.materiales{
              width: 100%;
              
              background: ;
              display: flex;
              }

.materiales h6{
                 font-family: fantasy;
                 font-size: 40px;
                 text-align: center;
                 color: white;
                 margin-top: 20px;
                 -webkit-text-stroke: 2px brown ;
                  margin-left: 00px;}

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

.maderas img{
          width: 250px;
          height: 250px;
          margin: 5px;
          border-radius: 10px;
          } 

.maderas img:hover{
         transform: scale(1.3);
         transition: 2s;}

.googlemap{
           width: 100%;
           background: ghostwhite;
           display: flex;
           flex-wrap: wrap;
           justify-content: center;
           }


.pago{
          width: 100%;
          height: 50px;
          background: whitesmoke;
          display: flex;
          flex-wrap: wrap;
          justify-content: center;
          margin-top: 20px;



        }

.pago img{
          width: 30%;
          
          }      




footer{
        width: 100%;
        height: 150px;
        background: black;
        color: white ;}


.lun{
      width: 80%;
      height: 80px;
      margin-left: 20px;
      margin-top: 10px;
      
      font-size: 20px;}


.direc{
        text-align: center;}












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

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

 header{
        margin-right: 30px;
        display: flex;
        justify-content: center;}


header .logo img{
    padding-bottom: 10px;

    width: 250px;

   
    

}       

header nav{
          width: 100%;
          height: 90px;
          padding: -50px;
                   
          text-decoration: underline  ;
          
          
          }  

header nav a  {
           width: 100%;
           
           font-size: 15px;
           padding: 1px;
           margin-left: 50px;
           

           
         }



.mostrador {
         
            padding-top: 40px;
            padding-right: 30px;
            }

.mostrador1 {
         
            padding-top: 40px;
            padding-right: 30px;
            } 
.materiales {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            
            text-align: center;
            margin-right: 10px;
            padding-right: 10px;
            

            
            }

.materiales h6{
                font-size: 25px;
                text-align: center;
                margin-left: 20px;
                font-family: serif;
                color: black;
                -webkit-text-stroke: 1px  ;

            }   


.pago{
          width: 100%;
          height: 50px;
          background: whitesmoke;
          display: flex;
          flex-wrap: wrap;
          justify-content: center;
          margin-top: 20px;}

.pago img{ 
           width: 100px;
           height: 50px; }

 






.maderas img{
          width: 100px;
          height: 100px;
          margin: 5px;
          border-radius: 10px;
          } 

}

@media screen and ( max-width: 500px){
  .maderas img{
          width: 100px;
          height: 100px;
          margin: 5px;
          border-radius: 10px;
          } 




  }







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

.pago{
          width: 100%;
          height: 50px;
          background: whitesmoke;
          display: flex;
          flex-wrap: wrap;
          justify-content: center;
          margin-top: 20px;}


.pago img{ 
           width: 300px;
           height: 50px; }

 

  }