* {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
}
body {
   background-image: url(img/logo_madera.jpg);
   background-position: center center;
   background-repeat: no-repeat;
   background-size: cover;
   background-attachment: fixed;
}
a {
   font-size: 1.2rem;
   font-family: 'Arial Narrow Bold', sans-serif;
   text-decoration: none;
   color: rgb(20, 3, 3);
}

footer {

   width: 100%;
   height: 40px;
   bottom: 0;
   position: absolute;
   margin-bottom: 10px;
   color: white;
   display: flex;
   justify-content: space-around;
   font-size: 1rem;
   font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;

}

.mail {
   color: white;
}
.vertical {
   color: transparent;
   display: inline;
   position: absolute;
   right: 0;
   margin-top: 7%;
   
}
.vertical:hover{
cursor: pointer;
}

.presupuesto {
   display: flex;
   width: 500px;
   height: 460px;
   position: absolute;
   left: 50%;
   top: 20%;
  visibility: hidden;
  z-index: 10;
 
 }
.letras_presupuesto {
   color: white;
   width: 45px;
   height: 50%;
   background-color: rgb(42, 109, 53);
   writing-mode: vertical-rl;
   transform: rotate(180deg);
   border-bottom-right-radius: 15px;
   border-top-right-radius: 15px;
   text-align: center;
   font-size: 1.2rem;
   font-family: Arial, Helvetica, sans-serif;
   padding: 5px;
}
.formulario {
   color: rgb(172, 62, 62);
   background: linear-gradient(rgba(251, 252, 253, 0.75), rgba(206, 214, 235, 0.75));
   width: 100%;
   height: 450px;
   border: 5px solid white;
   border-radius: 10px;
   box-shadow: 0 0 10px rgba(0, 0, 0, 0.7); 
}
.X {
   right: 10px;
   top: 10px;
   position: absolute;
}
form {
   padding: 30px;
}

h2 {
   margin-left: 30px;
}

#from_name {
   width: 100%;
}

#email_id {
   width: 100%;
}

#message {
   width: 100%;
   height: 250px;
}






header {
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: 2rem;
   background: linear-gradient(rgba(251, 252, 253, 0.75), rgba(206, 214, 235, 0.75));
   border: 5px solid white;
   margin: 10px;
   box-shadow: 0 0 10px rgba(0, 0, 0, 0.7);
}

.nav-list {
   list-style-type: none;
   display: flex;
   gap: 1rem;
   
}

.nav-list li a {
   text-decoration: none;
   color: #351c06;
 
}

.abrir-menu,
.cerrar-menu {
   display: none;
}
.titulo_responsive{
   display: none;
}
.wsp{
display: flex;
}
.wup{
   color: white;
 text-decoration: underline;
   }
   .fb{
     margin-top: -5px;
      }

      .grande{
         width: 200px;
         height: 200px;
 background-color: transparent;
  left: 10px;
  top: 160px;
  position: relative;
  
}
  .arriba{
         width: 200px;
         height: 50px;
 background-color: transparent(137, 226, 53);
 color: rgb(183, 243, 42);
 font-family: "Style Script", cursive;
  font-weight: 400;
  font-style: normal;
 font-size: 2rem;
 
  }
  .abajo{
         width: 150px;
         height: 150px;
 background-image: url(img/fondo.png);
 background-repeat: no-repeat;
 background-size: cover;
 color: white;
 border-radius: 50%;
 border: 10px solid white;
 
 box-shadow: 0 15px 15px 0px rgba(0,0,0,0.6);
 transform: translatey(0px);
	animation: float 6s ease-in-out infinite;
 }
 @keyframes float {
	0% {
		box-shadow: 0 5px 15px 0px rgba(0,0,0,0.6);
		transform: translatey(0px);
	}
	50% {
		box-shadow: 0 25px 15px 0px rgba(0,0,0,0.2);
		transform: translatey(-20px);
	}
	100% {
		box-shadow: 0 5px 15px 0px rgba(0,0,0,0.6);
		transform: translatey(0px);
	}
}
.mas_abajo{
   font-family:'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
   color: rgb(172, 243, 170);
   padding-top: 10px;
}












@media screen and (max-width: 1235px) {
   .abrir-menu,
   .cerrar-menu {
       display: block;
       border: 1px solid white;
       font-size: 1.25rem;
       background-color: transparent;
       cursor: pointer;
       padding: 5px;
       border-radius: 4px;
   }

   .abrir-menu {
       color: #1c1c1c;
       border: 1px solid #1c1c1c;
       
   }

   .cerrar-menu {
       color: #ececec;
      
   }

   .nav {
       opacity: 0;
       visibility: hidden;
       display: flex;
       flex-direction: column;
       align-items: end;
       gap: 1rem;
       position: absolute;
       top: 0;
       right: 0;
       bottom: 0;
       background-color: #1c1c1c;
       padding: 2rem;
       box-shadow: 0 0 0 100vmax rgba(0, 0, 0, .5);
       z-index: 5;
   }

   .nav.visible {
       opacity: 1;
       visibility: visible;
   }
   
   .nav-list {
       flex-direction: column;
       align-items: end;
   }

   .nav-list li a {
       color: #ecececec;
   }
   .presupuesto {
      display: flex;
      width: 100%;
      height: 500px;
      position: absolute;
      left: 0%;
      top: 15%;
   visibility: hidden;
   
     
   }
  
    footer {
      align-items: center;
      text-align: center;
      position: absolute;
      width: 100%;
      bottom: 50px;
      display: flex;
      flex-direction: column;

  } 
  .titulo_responsive{
   display: grid;
 
   text-align: center;
   font-family: "Krona One", sans-serif;
  font-weight: 400;
  color: #351c06;
 
}

.grande{
top: 250px;
color: aquamarine;

}
.mas_abajo{
   
   color: rgb(163, 243, 177);
   
}


}

@media screen and (orientation:landscape) and (min-width:300px) and (max-width: 1215px) {
   footer {
      align-items: center;
      text-align: center;
      position: absolute;
      width: 100%;
     bottom: 20px;
      display: block;

  }
  .vertical {
   
   margin-top: 1%;
   
}
.grande{
   top: 0px;
   color: aquamarine;
   
   }
   .mas_abajo{
      
      color: rgb(163, 243, 177);
      
   }
   
   }