body,h1,h2,h3,h4,h5 {font-family: "Raleway", sans-serif}

html {height: 100%; width: auto;
}

#mySidebar {
    z-index:3;width:250px;font-weight:bold;display:none;right:0;
}

button{
  border: none; 
  border-radius: 0 0 16px 16px;
}
.btInterior{
  width: 100%;
}
.flex{
  display: flex;
  flex-wrap: wrap;  
}

#b1{/* ROSA */ 
  order: 1; 
}
#b2{ /* TEXTO */ 
  order: 2;
  padding-right: 40px;
  padding-left: 40px;
}
#b3{ /* AMARIILO */ 
  order: 5;
}
#b4{ /* AZUL OSCURO */ 
  order: 7;
}
#b5{ /* AZUL CLARO*/ 
  order: 6;
}
#b6{ /* ROJO */ 
  order: 3;
}
#b7{ /* LILA */ 
  order: 8;
}
#b8{ /* NARANJA */ 
  order: 4;
}
.bloqueFinal{
  height: 200px;
}

 /* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {
  
  img{
   width: 60%; 
  }  
  button{
    width: 60%;
  }
    
  #b1, #b2, #b3, #b4, #b5, #b6, #b7, #b8{
    padding-top: 60px;
  } 
}

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 601px) and (max-width:850px) {
  
   img{
   width: 60%; 
  }  
  button{
    width: 60%;
  }
   
  #b1, #b2, #b3, #b4, #b5, #b6, #b7, #b8{
    padding-top: 60px;
  } 

}
@media only screen and (min-width: 851px) and (max-width:875px) {
  
   img{
   width: 80%; 
  } 
  button{
    width: 80%;
  }  
   #b1, #b2, #b3, #b4, #b5, #b6, #b7, #b8{
    padding-top: 60px;
  } 

}
/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 876px) and (max-width:1199px) {
  .bloque{  
    display: flex; 
    align-items: center;
    width: 50%;
    height: 450px;    
  }
  img{
   width: 50%; 
  }
  button{
    width: 50%;
  }
  #b1{
  order: 1;
  }
  #b2{  
    order: 2;
  }
  #b3{
    order: 7;
  }
  #b4{
    order: 6;
  }
  #b5{
    order: 8;
  }
  #b6{
    order: 3;
  }
  #b7{ /* LILA */ 
    order:4;
  }
  #b8{ /* NARANJA */ 
    order: 5;
  }
  
  #b1, #b2, #b3, #b4, #b5, #b6, #b7, #b8 {
    padding-top: 60px;     
  }

}

/* Large devices (laptops/desktops, 992px and up) */


/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {
  .bloque{
    display: flex; 
    align-items: center;
    height: 650px;  
    width: 50%;
  }
   img{
   width: 60%; 
  }  
  button{
    width: 60%;
  }
  #b1{
  order: 1;
  }
  #b2{  
    order: 2;
    padding-right: 40px;
  }
  #b3{
    order: 7;
  }
  #b4{
    order: 6;
  }
  #b5{
    order: 8;
  }
  #b6{
    order: 3;
  }
  #b7{ /* LILA */ 
    order:4;
  }
  #b8{ /* NARANJA */ 
    order: 5;
  }
}