/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {


/*esto es p q se respete alto de imagen de inicio de catalogo en todos los tamaños*/
	.container-fluid{
	height: 100%;
	padding-top: 130px;
    padding-bottom: 130px;
    position: absolute;
    right: 0px;
}


/*p q submenu lateral desaparezca en vista compu y aparezca en vista cel*/ 
   #sub-menu{
     display:inline;
     /*fixed p q se quede fijo arriba y z-index p q esté encima de todo*/
     position:fixed!important;
     z-index: 1000;
     /*background important es clave p q respete el blanco de fondo*/
     background-color: white!important;
     /*solo con esto de margenes logré desplazar el boton a la derecha del boton de volver*/
     margin-top: -16%!important;
     margin-left: 45%!important;
   }
      /*AYYYYYYYY DIOOOOS GRACIAAAAAS, con este none ya desaparece el chorro de títulos y se quedan solo en el menu colapsable :3*/
	.sidebar-wrapper{
     display:none;
   }



.container-fluid1{
	padding-bottom: 100%;
}




/*p bajar de altura boton volver en vista cel*/
.botonvolver{
	top: 7.5em;
	left: 0.1em;
}

/*p bajar de altura menú colapsable con sub colecciones en vista cel*/
.bajarlo{
	top: 8.5em;
}
}














/*iPhone 4+ */ /*bueno, esa es la descripción q venía en https://stackoverflow.com/questions/19186352/iphone-5-is-not-displaying-the-responsive-mode-of-the-website-correctly, pero en mi caso es iphone 5*/
/*y tanta batalla con esto para q Andy me diga q los iphone5 ya están obsoletos!!!!!! Parece q es como un 0.1% probable q alguien siga teniendo 1, jaja. Bueno, ya descubrí cómo especificar reglas por tamaño al menos*/
@media only screen and (device-width: 320px) and (-webkit-min-device-pixel-ratio: 2) {
    /* CSS3 Rules for iPhone */
    .botonvolver{
  top: 11.2em;
  left: 0.1em;
}
/*p bajar de altura menú colapsable con sub colecciones en vista cel*/
.bajarlo{
  top: 12em;
  margin: 5%;
}
}


























/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {

/*esto es p q se respete alto de imagen de inicio de catalogo en todos los tamaños*/
	.container-fluid1{
	padding-bottom: 90%;
}



/*p q submenu lateral desaparezca en vista compu y aparezca en vista cel*/ 
   #sub-menu{
     display:inline!important;

     /*fixed p q se quede fijo arriba y z-index p q esté encima de todo*/
     position:fixed!important;
     z-index: 100;
     /*background important es clave p q respete el blanco de fondo*/
     background-color: white!important;
     /*solo con esto de margenes logré desplazar el boton a la derecha del boton de volver*/
      margin-top: 1em!important;
     margin-left: 45%!important;
   }
   /*AYYYYYYYY DIOOOOS GRACIAAAAAS, con este none ya desaparece el chorro de títulos y se quedan solo en el menu colapsable :3*/
   	.sidebar-wrapper{
     display:none;
   }


.boton3{
	font-family: 'Myriad Pro', sans-serif;
	font-size: 15px;
	padding-top: 5px;
  padding-bottom: 5px;
  background-color: white;
}

/*p q aparezca menu de hamburguesa en vista tableta*/
   .navbar-toggler{
    display: block;
   } 

/*quizas no voy a aplicar esto porq no se está mostrando solo en la tableta sino en todo y la letra se vuelve muy grande
/*hacer letra de parrafo mas grande para vista en ipad
.parrafo{
	font-size: 1.5em;
}
.tituloartesprincipal{
	font-size: 2.5em;
}
.tituloartes{
	font-size: 1.8em;
}
/*aumentar tamaño de letra de cada texto con imagen en vista ipad
.descripcion{
	font-size: 1.3em;
}*/
}






























/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {


/*p q submenu lateral desaparezca en vista compu y aparezca en vista cel*/ 
   #sub-menu{
     display:none;
   }
.sidebar-wrapper{
  display: block;
}


}













































/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {

/*p q submenu lateral desaparezca en vista compu y aparezca en vista cel*/ 
   #sub-menu{
     display:none!important;
   }

   .sidebar-wrapper{
  display: block;
}


   /*p q aparezca menu de hamburguesa en vista tableta*/
   .navbar-toggler{
    display: block;
   }

      /*p q botón volver se vea más grande en vista compu*/
.boton3{
  width: 18%;
  font-size: 1.3em;
  display: block;
}

/*ayyy qué bonitooo!!!! creé esta clase p ponerle inline-block Y SOBRETODO: width40% p q ambos logos del menú estuvieran a la par y así el botón volver se vea en vista horizontal de tableta y en laptop sin q tapen este botón*/
/*tiene q ser 40% el width porq si no, se vuelve a pasar el logo del museo p abajo del de la UCR y tapa el botón de volver*/
.alapar{
  display: inline-block;
  width: 40%;
}



}


























/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px){

/*p q submenu colapsable desaparezca en vista compu y aparezca en vista cel*/ 
   #sub-menu{
     display:none;
   }
      /*p q aparezca menu de hamburguesa en vista tableta*/
   .navbar-toggler{
    display: block;
    margin-right: 25%;
   }

   /*p q botón volver se vea más grande en vista compu*/
.boton3{
  width: 10%;
  /*la unica forma p q se medio vea el botón de volver en vista de laptop y ipad pro en horizontal, es alterando este margin-top con vh, pero entonces en la vista de mi laptop, al menos, se baja un poco más de lo deseado el botón de volver...margin-top: 5vh;*/
  font-size: 1.3em;
  display: block;
}


}












/*p compus q no quieren mostrar botón de devolverse 
@media only screen and (min-width: 1360px) {
    .boton3{
    display: flex!important;
    height: 11vh;
    width: 8%;
}
    .botonvolver{
    display: flex!important;
    height: 11vh;
    width: 8%;
}

}*/