@import url(extra.css);
@import url(menu.css);

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

header{
   width: 100%;
   height: 350px;
   background-color: black;
   background-image: url(../img/banner.jpg);
   background-attachment: fixed;
   background-size: 100%;
   background-repeat: no-repeat;
}



.med{
   background-color: antiquewhite;
   background-image: url(../img/med.jpg);
   background-attachment: fixed;
   background-repeat: no-repeat;
   background-size: cover;
   display: none;
}

/*Parte Flex*/
.contenedor{
   display: flex;
}

article{
   width: 600px;
   background-color: rgba(173, 173, 173, 0.42);
   
   flex-basis: 70%;
   flex-shrink: 0;
   flex-grow: 0;
}

aside{
   width: 400px;
   background-color: rgba(207, 207, 207, 0.42);
   
   flex-basis: 20%;
   flex-shrink: 2;
   flex-grow: 2;
}

.lado{
   background-color: darkviolet;
   background-image: url(../img/ladd.jpeg);
   background-attachment: fixed;
   background-repeat: no-repeat;
   background-size: cover;
   
   flex-basis: 10%;
   flex-shrink: 1;
   flex-grow: 3;
}

/*//Parte Flex*/

footer{
   width: 100%;
   height: auto;
   background-color: rgba(66, 66, 66, 0.96);
}

@media(min-width: 1024px){
   header{
      height: 400px;
   }
}

@media(max-width: 740px){
 
   
   .lado{
      display: none
   }
   
   
}

@media(max-width: 480px){
   
   .h-contenedor{
      display: flex;
      flex-direction: column;
      height: 450px;
   }
   
   header{
      background-size: 110%;
      background-attachment: scroll;
      flex-shrink: 3;
      flex-grow: 1;
      flex-basis: 70%;
   }
   
   .med{
      display:block;
      width: 100%;
      height: 100px;
      flex-shrink: 1;
      flex-grow: 3;
      flex-basis: 30%
   }
   
  
   
   .contenedor{
      flex-direction: column;
   }
   
   article{
      width: 100%;
   }
   
   aside{
      width: 100%;
   }
}