body,h1,h2,h3,h4,h5 {font-family: "Raleway", sans-serif}
.w3-quarter img{margin-bottom: -6px; cursor: pointer}

body, html {height: 100%; width: auto;}
img {    
  height: auto;
  width: 100%;
}
#img01 {  
  height: auto;  
  width: 100%;
}
.texto{  
  padding: 22px;
}
#mySidebar {
    z-index:3;width:250px;font-weight:bold;display:none;right:0;
}

@media screen and (orientation: landscape)and (max-width:650px) {
  #img01 {  
    height: auto;
    width: 30%;
  }
  #especial{
    width: 200%;
  }
}

@media screen and (orientation: landscape)and (min-width: 651px) and (max-width:730px) {
  #img01 {  
    height: auto;
    width: 40%;
  }
}

@media screen and (orientation: landscape)and (min-width: 731px) and (max-width:800px){
  #img01 {  
    height: auto;
    width: 45%;
  }
}

@media screen and (orientation: landscape)and (min-width: 801px) and (max-width:850px) {
  #img01 {  
    height: auto;
    width: 35%;
  }
}
@media screen and (orientation: landscape)and (min-width: 851px) and (max-width:999px) {
  #img01 {  
    height: auto;
    width: 55%;
  }
}
@media screen and (orientation: landscape)and (min-width: 1000px) and (max-width:3000px) {
  #img01 {  
    height: auto;
    width: 45%;
  }  
}
@media screen and (min-width: 1000px) and (max-width:3000px) {
  #img01 {  
    height: auto;
    width: 45%;
  }  
}