/* Mi hoja de estilos 
body   {
font-size: 16;
font-family: ;	
}
p, h1, h2, h3 {
text-align: left;	
}
ul { 
	color: indigo;

}
body.dark ul {
	color: violet;
}
.ul {
 	font font-size: 16px;
 	color:garnet ;
 	font-family: cursive;
 }*/

/*puedo hacer sombras de la siguiente manera: ;
	5px 5px rgba(0, 98, 90, 0.4),
				10px 10px rgba(0,98, 90, 0.3),
				15px 15px rgba(0,98, 90, 0.2),
				20px 20px rgba(0,98, 90, 0.1),
				25px 25px rgba(0,98, 90, 0.05);*/

.caja1 {
	border: 1px solid orange;
	width: 80%;
	margin-left: auto;
	margin-right: auto;
	padding: 15px;
	border-radius: 12px;
	background-color: rgb(255, 160, 122);
	box-shadow: 5px 5px 8px black;
}

.caja2 {
  	width: 80%;
	margin-left: auto;
	margin-right: auto;
	border-radius: 12px;
	background-color: aliceblue;
	box-shadow: 5px 5px 8px black;
  
}
   
.caja2 h5 {
  padding: .3rem .5rem;
  margin: 0;
  background: red;
  color: white;
  font-size: 20px;
  text-align: center;
  border-radius: 12px 12px 0px 0px;
	text-align: center;
  
}

.caja2 .content {
  padding: 20px;
   
}

body.dark .caja2 .content {
	color: black;
}

.caja5 {
  background: hsl(250 30% 90%);
  border-radius: .3rem;
  overflow: hidden;
  margin: 0.65em 0;
  color:var(--raro-color);
  width:80%;
  margin-left:10%;
  
}
   
.caja5 h5 {
  padding: .3rem .5rem;
  margin: 0;
  background: hsl(250 80% 90%);
  color: white;
  font-size: 20px;
  text-align: center;
  
}

.caja5 .content {
  padding: 0 .5rem;
  text-shadow: 2px 2px 1px #c2c2c2;
  
}

body.dark .caja5 .content {
	color: black;
}

.caja5 .modo1 {
  background: hsl(170 90% 40%);
  text-shadow: 2px 2px 3px black;
  background-image: url("../images/icono1.png");
  background-repeat: no-repeat;
}

.caja5 .modo2 {
  background: #8D6E63;
  text-shadow: 2px 2px 3px  black;
  background-image: url("../images/icono1.png");
  background-repeat: no-repeat;
  
}

.caja5 .modo3 {
  background: #8DAE63;
  text-shadow: 2px 2px 3px  black;
  background-image: url("../images/icono1.png");
  background-repeat: no-repeat;
  
}

.caja5 .modo4 {
  background: #E65100;
  text-shadow: 2px 2px 3px black;
  background-image: url("../images/icono1.png");
  background-repeat: no-repeat;
}

.caja5 .modo5 {
  background: #D81B60;
  text-shadow: 2px 2px 3px black;
  background-image: url("../images/icono1.png");
  background-repeat: no-repeat;
}

.caja5 .modo6 {
  background: #5E35B1;
  text-shadow: 2px 2px 3px black;
  background-image: url("../images/icono1.png");
  background-repeat: no-repeat;
}

.caja5 .modo7 {
  background: #301400;
  text-shadow: 2px 2px 3px black;
  background-image: url("../images/rytr.png");
  background-repeat: no-repeat;
}

.lista1 li{
	list-style: none;
	background-image: url("listas/laura.png");
	background-repeat: no-repeat;
	background-position: left top;
	background-size: 30px;
	padding-left: 40px;
	margin-left: -30px;
}


.flota_d {
	float: right;
	margin: 0px -190px 0px 15px;
	padding: 5px;
	width: 70%;
	margin-top: 0px;
}

.flota_d figcaption {
	text-align: center;
	color: var(--text-color);
	margin-bottom: 0;
}
.flota_i {
	float: left;
	margin: 0px 10px -15px -5px;
	padding: -5px;
	width: 50%;
	margin-top: -10px;
}

.flota_i figcaption {
	text-align:center;
	color: var(--text-color);
	margin-bottom: 0;
}
.sin_boton {
	border: 0px; background-color: rgba(1,1,1,0);
}

.sin_boton .btn_expand {
border: 0px solid red;
background-color: rgba(1,1,1, 0);
background-image: url("img/vacio.png");
}

/* Tooltip contenedor (selector)*/
.Tooltip {
  position: relative;  
  display: inline-block;
  border-bottom: 1px dotted black;
  font-size:110%;
}


/* Texto (contenido) del Tooltip */
.Tooltip .TooltipText {
  visibility: hidden;
  width:200px;
  background-color: rgb(250,250,250);
  color: #000;
  box-shadow: 15px 15px 20px #aaa;
  font-size: 10pt;
  text-align:center;
  border-radius: 15px;
  padding:5px 5px;
  /* Posiciona el Tooltip abajo*/
  position: absolute;
  z-index: 1;
  bottom: 95%;
  left: 80%;
  margin-left: -100px;
  }
/* Muestra el texto del Tooltip (contenido) cuando se pasa el mouse sobre el selector (contenedor) del Tooltip*/
.Tooltip:hover .TooltipText  {
  visibility: visible;
}
.note  {
      border-left: 4px solid var (--h1-color);