.fondo0{
	background-color:white;
}

.fondointro{
  background-image: url("../images/fondos/fondointro.jpg");
  /*este cover es lo q hace q sea banner p q cubra todo lo ancho. pero yo podria ajustar imagen en photoshop p q tenga el tamaño q debe y me ahorro poner el cover*/
  background-size: cover;
  /*le quité background-position center porq en vista celular solo me mostraba el fondo naranja y ocupo q se vea el logo del catalogo
  background-position: center;*/
  /*esto de fixed es lo q hace q se cree el efecto de q la imagen no se mueve y el resto sí*/
  background-attachment: fixed;
  background-repeat: no-repeat;
}


.fondo1{
	background-image: url("../images/fondos/fondonaranja2.jpg");
	/*este cover es lo q hace q sea banner p q cubra todo lo ancho. pero yo podria ajustar imagen en photoshop p q tenga el tamaño q debe y me ahorro poner el cover*/
	background-size: cover;
	/*le quité background-position center porq en vista celular solo me mostraba el fondo naranja y ocupo q se vea el logo del catalogo
	background-position: center;*/
  /*esto de fixed es lo q hace q se cree el efecto de q la imagen no se mueve y el resto sí*/
	background-attachment: fixed;
  background-repeat: no-repeat;
}

.fondoartes{
  background-image: url("../images/fondos/artes.jpg");
  /*este cover es lo q hace q sea banner p q cubra todo lo ancho. pero yo podria ajustar imagen en photoshop p q tenga el tamaño q debe y me ahorro poner el cover*/
  background-size: cover;
  /*position-center es p q quede ene l centro*/
  background-position: center;
  background-attachment: fixed;
}

.fondobiblio{
  background-image: url("../images/fondos/biblio.jpg");
  /*este cover es lo q hace q sea banner p q cubra todo lo ancho. pero yo podria ajustar imagen en photoshop p q tenga el tamaño q debe y me ahorro poner el cover*/
  background-size: cover;
  /*position-center es p q quede ene l centro*/
  background-position: center;
  background-attachment: fixed;
}

.fondovivas{
  background-image: url("../images/fondos/vivas.jpg");
  /*este cover es lo q hace q sea banner p q cubra todo lo ancho. pero yo podria ajustar imagen en photoshop p q tenga el tamaño q debe y me ahorro poner el cover*/
  background-size: cover;
  /*position-center es p q quede ene l centro*/
  background-position: center;
  background-attachment: fixed;
}

.fondonatural{
  background-image: url("../images/fondos/natural.jpg");
  /*este cover es lo q hace q sea banner p q cubra todo lo ancho. pero yo podria ajustar imagen en photoshop p q tenga el tamaño q debe y me ahorro poner el cover*/
  background-size: cover;
  /*position-center es p q quede ene l centro*/
  background-position: center;
  background-attachment: fixed;
}

.fondomemoria{
  background-image: url("../images/fondos/memoria.jpg");
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
}

.fondomuseos{
  background-image: url("../images/fondos/museos.jpg");
  background-size:cover;
  background-position: center;
  background-attachment: fixed;
}

.fondosalud{
  background-image: url("../images/fondos/salud.jpg");
  background-size:cover;
  background-position:center;
  background-attachment:fixed;
}


/*contenedores*/
.container-fluid0{
	padding-top: 50px;
	padding-bottom: 150px;
}

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

/*estas clases de contenedor son necesarias p q titulo no pegue en la parte superior de contenedor*/
.container-fluid2{
	padding-top: 90px;
	padding-bottom: 30px;
}

.container-fluid3{
	padding-top: 30px;
	padding-bottom: 30px;
}

.container-fluid4{
		padding-top: 60px;
	padding-bottom: 80px;
}

/*intento q scroll no tape titulo de seccion*/
.section{
    width: 100%;
    height: 100vh;
    padding: 150px 0;
}


.izq{
	align-content: right;
	margin-right: 20px;
}







.titulointros{
  font-weight: bold;
  color:#ff8b14;
  font-family: 'Myriad Pro';
  font-size: 1.5em!important;
}
.titintros{
  margin-top: 1em;
  font-weight: bold;
  font-family: 'Myriad Pro';
}

.titulocredprincipal:before {
   content: "• • • • • • • • •";
   font-size: 160%; /* or whatever */
   padding-right: 5px;
   font-weight: bold;
   color:black;
  font-family: 'Myriad Pro';
}

.titcreducr:before{
  content: "• • • • • • • • •";
  font-size: 130%; /* or whatever */
   padding-right: 5px;
   font-weight: bold;
   color:black;
  font-family: 'Myriad Pro';
}





.tituloartes{
  font-weight: bold;
  color: #E7332C;
  font-family: 'Myriad Pro';
}
.tituloartesprincipal {
   font-weight: bold;
   color:#E7332C;
  font-family: 'Myriad Pro';
}
/*intento 2 de punto*/
.tituloartesprincipal:before {
   content: "• • • • • • • • • • •";
   font-size: 160%; /* or whatever */
   padding-right: 5px;
   font-weight: bold;
   color:#E7332C;
  font-family: 'Myriad Pro';
}




.titulobiblio{
  font-weight: bold;
	color:#E94C17;
  font-family: 'Myriad Pro';
}
.titulobiblioprincipal {
   font-weight: bold;
   color:#E94C17;
  font-family: 'Myriad Pro';
}
/*intento 2 de punto*/
.titulobiblioprincipal:before {
   content: "• • • • • • •";
   font-size: 160%; /* or whatever */
   padding-right: 5px;
   font-weight: bold;
   color:#E94C17;
  font-family: 'Myriad Pro';
}
.subtitulobiblio{
  color:#E94C17;
  font-family: 'Myriad Pro';
}





.titulovivas{
  font-weight: bold;
  color:#D57232;
  font-family: 'Myriad Pro';
}
.titulovivasprincipal {
   font-weight: bold;
   color:#D57232;
  font-family: 'Myriad Pro';
}

/*intento 2 de punto*/
.titulovivasprincipal:before {
   content: "• • • • • • • • • • •";
   font-size: 160%; /* or whatever */
   padding-right: 5px;
   font-weight: bold;
   color:#D57232;
  font-family: 'Myriad Pro';
}
.subtitulovivas{
  color: #D57232;
  font-family: 'Myriad Pro';
}





.titulonatural{
  font-weight: bold;
  color:#A2608A;
  font-family: 'Myriad Pro';
}
.titulonaturalprincipal {
   font-weight: bold;
   color:#A2608A;
  font-family: 'Myriad Pro';
}

/*intento 2 de punto*/
.titulonaturalprincipal:before {
   content: "• • • • •";
   font-size: 160%; /* or whatever */
   padding-right: 5px;
   font-weight: bold;
   color:#A2608A;
  font-family: 'Myriad Pro';
}
.subtitulonatural{
  color: #A2608A;
  font-family: 'Myriad Pro';
}



.titulomemoria{
  font-weight: bold;
  color:#9E356A;
  font-family: 'Myriad Pro';
  margin-top: -5%;
}
.titulomemoriaprincipal {
   font-weight: bold;
   color:#9E356A;
  font-family: 'Myriad Pro';
}

/*intento 2 de punto*/
.titulomemoriaprincipal:before {
   content: "• • • • • • • • •";
   font-size: 160%; /* or whatever */
   padding-right: 5px;
   font-weight: bold;
   color:#9E356A;
  font-family: 'Myriad Pro';
}
.subtitulomemoria{
  color: #9E356A;
  font-family: 'Myriad Pro';
}




.titulomuseos{
  font-weight: bold;
  color:#6D3A9C;
  font-family: 'Myriad Pro';
}

.titulomuseosprincipal {
   font-weight: bold;
   color:#6D3A9C;
  font-family: 'Myriad Pro';
}

/*intento 2 de punto*/
.titulomuseosprincipal:before {
   content: "• • • • • ";
   font-size: 160%; /* or whatever */
   padding-right: 5px;
   font-weight: bold;
   color:#6D3A9C;
  font-family: 'Myriad Pro';
}





.titulosalud{
  font-weight: bold;
  color:#3E4D9F;
  font-family: 'Myriad Pro';
}

.titulosaludprincipal {
   font-weight: bold;
   color:#3E4D9F;
  font-family: 'Myriad Pro';
}

/*intento 2 de punto*/
.titulosaludprincipal:before {
   content: "• • • • • ";
   font-size: 160%; /* or whatever */
   padding-right: 5px;
   font-weight: bold;
   color:#3E4D9F;
  font-family: 'Myriad Pro';
}


.titulointros{
  font-weight: bold;
  color:#ff8b14;
  font-family: 'Myriad Pro';
}




/*botones de Leer más de cada sub-colección*/
.botonartes{
  color: #E7332C;
  border-color: #E7332C;
}
/*intento de cambiar hover.
AYYYYYYYYYYYYYY lo logré con este q me INVENTÉ YO solo agregando !important. yujuuuu!*/
.botonartes:hover{
  background-color:#989898!important;
  border-color: #E7332C;
}





.botonbiblio{
  color: #E94C17;
  border-color: #E94C17;
}
.botonbiblio:hover{
  background-color:#989898!important;
  border-color: #E94C17;
}



.botonvivas{
  color: #D57232;
  border-color: #D57232;
}
.botonvivas:hover{
  background-color:#989898!important;
  border-color: #D57232;
}



.botonnatural{
  color: #A2608A;
  border-color: #A2608A;
}
.botonnatural:hover{
  background-color:#989898!important;
  border-color: #A2608A;
}



.botonmemoria{
  color: #9E356A;
  border-color: #9E356A;
}
.botonmemoria:hover{
  background-color: #989898!important;
  border-color: #9E356A;
}



.botonmuseos{
  color: #6D3A9C;
  border-color: #6D3A9C;
}
.botonmuseos:hover{
  background-color: #989898!important;
  border-color: #6D3A9C;
}




.botonsalud{
  color: #3E4D9F;
  border-color: #3E4D9F;
}
.botonsalud:hover{
  background-color: #989898!important;
  border-color: #3E4D9F;
}


.botonvolver{
  color: black;
  position:fixed;

  top:4.8em;
  /*los negativooos!! ooh qué maravilla!!! -2em para por fin el signo se mueva más cerca del borde de la pantalla*/
  left:1em;
  text-decoration: none;
  padding:1em;
  /*por fin con z-index pude fijar este boton aquí arriba p q el usuario se pueda devolver cuando quiera*/
  z-index: 100;
  background-color: white;
  /*he batallaaado p q cubra todo el ancho de la barra superior y por fin lo logré. La única diferencia esta vez fue q antes de poner width:100%, en el html cambié el tamaño de la flecha p devolverse del botón Volver. La bajé de 3em a 2em y ya! Como si nada la barra blanca se corrió hasta el final!*/
  width: 100%;
  font-family: 'Myriad Pro', sans-serif;

}  







/* esto era p hacer un marquito p encerrar el nuevo boton de volver pero al final no lo usé
.content-box{
  box-sizing: content-box;
}
.padding-box{
  box-sizing: padding-box;
}
.border-box{
  box-sizing: border-box;
}
div[class*="box"]{
  margin-top: 3em;
  width: 15em;
  padding: 0.3em;
  color: black;
  border: 0.2em solid black;
  background-clip: content-box;
}*/


/*mas intentos de cambiar el hover de leer más
.btn-outline-info: hover, .btn-outline-info:focus, .btn-outline-info:active, .btn-outline-info.active{
  color: #989898;
  background-color: #989898!important;
  border-color: black;
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary.active, .open>.dropdown-toggle.btn-primary {
    color: #fff;
    background-color: #00b3db;
    border-color: #285e8e;
}
*/


.titulo2{
  margin-top: 100px;
  padding-top: 170px;
  text-align: left;
  font-size: 300%;
  color:#000;
  font-family: 'Myriad Pro';
  font-weight: bold;
}

.titulo3{
  margin-right: 50px;
  padding-top: 170px;
  font-size: 70px;
  color:#000;
  text-align: right;
  font-family: 'Myriad Pro';
}



.texto{
	font-size: 0.5em;
	color:#000;
  font-family: 'Myriad Pro', sans-serif;
}

.texto2{
  font-size: 20px;
  color:white !important;
  font-family: 'Myriad Pro', sans-serif;
  text-decoration:none;
}

.tam1{
  display:block;
  margin:0 auto;
  width: 74%;
}

.tam2{
  display:block;
  margin:0 auto;
  width: 98%;
}


.tam3{
  display:inline;
  width: 60%;
}


.parrafo{
  text-align: justify !important;
  text-justify:auto;
  margin:0 5% 0 5%;
}

.tab{
  text-indent: 5%;
}







/*para bibliografia*/
.hide {
  display: none;
}
    
.myDIV:hover + .hide {
  display: inline-block;
  color:#3e5090;
}
/*eso era p bibliografia*/


.margenes1{
	margin-top: 20px;
	margin-left: 120px;

}



.espacio{
	display:inline-block;
	margin: 0px 15px 0px 15px;
}



.fijo{
  position:sticky;
  position:fixed;
  /*con fixed, ya menu se queda fijo arriba*/
  width:100%;
  /*z index es como p darle tridimensionalidad al menu y q sea lo q esta encima de todo lo demas, como si fuera la capa de arriba de photoshop*/
  /*entre mas numero le ponga, mas lo va a respetar, es xq 1000 es un numero muy alto entonces de fijo va a ser la capa superior. aunq en realidad ocn q tenga 1 ya lo va a respetar xq nada mas tiene z index*/
  z-index:1000;
}


.aire{
  margin-top: 10px;
  margin-bottom: 30px;

  }

  .aire2 /*de fijo no puede ser más q esto porque al subir y bajar con el scroll, se tapan ciertos títulos*/{
  margin-top: 0.3em;
  margin-bottom: 0.5em;
  }


    .aire3 /*de fijo no puede ser más q esto porque al subir y bajar con el scroll, se tapan ciertos títulos*/{
  margin-bottom: 5%;
  }

.navbar{
  /*p q barra del menu sea mas ancha*/
  padding-top: 5px;
  padding-bottom: 5px;
  color: #000;
  justify-content: left;
}

.navbar-nav li a{
  /*links sin subrayado*/
  text-decoration:none;
  font-size:16px;
  font-family: 'Myriad Pro', sans-serif;
  color: black !important;

}

/*y poniendo este hover por aparte a la clase de navbar-nav li a, hago q el texto cambie a blanco cuando paso por encima con hover. Sin el important, no respeta el blanco*/
.navbar-nav li a:hover{
  color: white !important;
}





/*intento de hover de diferente color*/
.nav-item-intros:hover{
  background-color: #ff8b14;
}
.nav-item-artes:hover{
  background-color: #E7332C;
}
.nav-item-biblio:hover{
  background-color: #E94C17;
}
.nav-item-vivas:hover{
  background-color: #D57232;
}
.nav-item-natural:hover{
  background-color: #A2608A;
}
.nav-item-memoria:hover{
  background-color: #9E356A;
}
.nav-item-museos:hover{
  background-color: #6D3A9C;
}
.nav-item-salud:hover{
  background-color: #3E4D9F;
}






/*menu hamburguesa, p q cuando pantalla se hace pequeña, se vea una mancha morada como ejemplificacion del menu hamburg. desp con otro toque se le ponen las rayitas*/
.navbar-toggler{
  background-color:#989898;
  margin-right: 3%;
}
/*parece q puedo quitar esto y al menos en vista celular el rojo se mantiene sin cambiar a gris
.navbar-toggler: hover{
  background-color:#989898;*/
}
.custom-toggler.navbar-toggler{
  border-color:white;
  /*aunq ya de por sí sin border width, sale un borde y dice el profe q no se puede quitar... mmm no me gusta con borde*/
  border-width: 7%;
}

/*toque magico p hacer lineas de menu hamburguesa*/
/*con estas clases yo decido color de rayas y color de fondo*/
/*custom toggler es clase personalizada p las rayitas*/
/*en ese mega texto amarillo vienen dos strokes: el primero es p color de lineas y el segundo stroke es p grosor*/
/*ese mega texto dice ahorita en stroke: stroke='#cc0000' stroke-width='2' pero eso hay q cambiarlo usando la direccion http://hex2rgba.devoth.com/ p cambiar el color hexa decimal de codigo #85848 a RGBA;*/
.custom-toggler .navbar-toggler-icon {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255, 255, 255, 255)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
}         
.custom-toggler .navbar-toggler-icon:hover {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(0, 0, 0, 1)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
}    

/*scroll top es una ayuda visual p q usuario no se pierda*/
.go-top{
  position:fixed;
  bottom:-1em;
  /*los negativooos!! ooh qué maravilla!!! -2em para por fin el signo se mueva más cerca del borde de la pantalla*/
  right:-2em;
  text-decoration: none;
  padding:3em;
  opacity: 0.5;

}  
.go-top:hover{
  /*esto no me había servido porque seguía diciendo go-top: img hover. Y ya no era imagen! Lo había cambiado por un icono de fontawesome*/
  transform:scale(1.2);
  transition:all 0.4s;
  opacity: 100%;
}   
/*flecha para go-top*/
/* con:
  color:#989898;
  text-shadow: 0 0 7px #FFFFFF;
  me hace una sombra que puede servir pero no quiero ese efecto de difuminado porq no va con la estética de la página*/
.fa-border-icon {
    color: black;
    border-width: 4px;
    border-style: solid;
    border-color: white; 
    fill-color: white;
    padding: 6% 9% 6% 9%; 
}

/*quizas p lograrlo tengo q leer esto: https://www.smashingmagazine.com/2019/03/css-alignment/#top
.centrar{ 
  display: flex;
  align-items: center;
  justify-content: center;
}*/



/*sin esta opcion, me deja permanantes las opciones del submenu, aunq no les pase x encima*/
#menu>li>ul{
  list-style: none;
  display:none;
}

/*esta opcinon es necesaria p q me despliegue las subopciones del submenu, si no lo pongo, no se muestran aunq le pase x encima a la opcion del menu donde deberian aparecer*/
#menu>li:hover>ul {
  display:block;
  padding: 5px;
  list-style: none;
}



.galeria{
   padding: 0% 6%;
}

.galeria img{
   width: 90%;
   padding: 4%;
}


/*sidebar nueva*/

.nolist {
    list-style: none;
}
.sidebar-wrapper {
  max-width: 295px;
  margin-bottom: 50px;
    /*p q suba sidebar porq ya no hay boton volver*/
  margin-top: -100px;
}
@media (max-width:991px) {
  .sidebar-wrapper {
    width: 100%;
    max-width: 992px;
    margin-bottom: 0;
  }
}
.sidebar-wrapper>ul li {
  font-size: 1rem;
}
.sidebar-wrapper>ul>li {
  border-top: 1px solid #e9e7e7;
}
.sidebar-wrapper nav>ul {
  font-family: Myriad Pro, sans-serif;
  margin-bottom: 0
}
.sidebar-wrapper nav>ul li {
  font-size: 1.2rem;
}
.sidebar-wrapper nav>ul>li {
  border-top: 1px solid #e9e7e7;
  font-weight: 500
}
.sidebar-wrapper nav>ul>li:first-child {
  border: 0
}
.sidebar-wrapper nav>ul>li>a {
  color: #1f1a17;
  display: block;
  padding: 20px 20px
}
.sidebar-wrapper nav>ul>li>a:hover {
  color: #fff;
  background: #9E356A;
}

/*opciones activas en la sidebar*/
.opcion{
  border: none;
  outline: none;
  padding: 10px 16px;
  background-color: white;
  cursor: pointer;
}

.active, .opcion:hover {
  background-color: #9E356A;
  color: white;
}

/*mi nombre p IG*/
.daniela{
  text-decoration: none;
  color: black;
}


/*tratando de cubrir blanco a lo ancho de toda la franja*/
#sub-menu{
  margin: 0.5em;
}

select#sub-menu {
    width: 40%;
    height: 55px;
    color: #000;
    margin: 15px 0;
    padding: 13px;
    border: 1px solid #333;
    /*al final no le dejé la flecha naranja q hice en Ai porq el texto le pasa por encima y se ve feo, mejor la deafult*/
}

.colorenhover:hover{
  background-color:#9E356A!important;
}


}
select#sub-menu, select#sub-menu>option {
    font-family: Myriad Pro,sans-serif;
    font-size: 1.2rem;
    line-height: 28px;
}
/*rarísimo q hay q agregar este id (esta clase pues) 2 veces para q me respete el bold!*/
select#sub-menu, select#sub-menu>option {
    font-weight: bold;
}


/*acordeon*/
.accordion {
  background-color: white;
  color: #444;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: solid;
  border-width: thin;
  text-align: left;
  outline: none;
  font-size: 15px;
  transition: 0.4s;
}

.active2, .accordion:hover {
  background-color: #ff8b14; 
  color: white;
}


.panel {
  padding: 0 18px;
  display: none;
  background-color: white;
  overflow: hidden;
}