/* 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!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: 0.4vh!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;
   }


   .parrafo{
     /*por alguna razón extraña, agrega más margen entre más pequeño sea este porcentaje. Antes puse 7 y más bien lo sacó del ancho de la pantalla*/
     margin-left: 1%;
   }

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

.fondo1{
/*GLORIA A DIOS. batallé minimo 1 hora creo p q el logo del catálogo no quedara semitapado en vista celular. La magia: vh porq ajusta la altura relativa al 1% del viewport (tamaño de pantalla en q se ve). Además de q en la hoja css quité background position center p q en vista cel se tirara a la derecha, p q se viera el logo;*/
	height: 87vh;
}

}





























/* 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: 0.4vh!important;
     margin-left: 45%!important;
   }

.fondo1{
/*GLORIA A DIOS. batallé minimo 1 hora creo p q el logo del catálogo no quedara semitapado en vista celular. La magia: vh porq ajusta la altura relativa al 1% del viewport (tamaño de pantalla en q se ve). Además de q en la hoja css quité background position center p q en vista cel se tirara a la derecha, p q se viera el logo;*/
	height: 55vh;
}
/*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) {

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


/*p ajustar imagen banner en pagina principal*/
.fondo1{
	height: 85vh;
}
}






































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


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

/*p ajustar imagen banner en pagina principal*/
.fondo1{
	height: 85vh;
}

.alapar{
  display: inline-block;
  width: 30%;
}
}

























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

   /*p ajustar imagen banner en pagina principal*/
.fondo1{
	height: 110vh;
}
}