@charset "utf-8";

@font-face {
    font-family: 'Optima';
    src: url("../fonts/Optima_Medium.ttf") format('truetype');
    font-style: normal;
}

@font-face {
    font-family: 'ankoa';
    src: url("../fonts/ankoa-regular.ttf") format('truetype');
    font-style: normal;
}

/*=============== COLORES ================*/

/*==== BLANCO ROTO ARENA #F1EAE0  =====*/
/*==== VERDE AGUAMARINA  #A0BCB1  =====*/


/*=============== Propiedades Globale s================*/
ul, ol, dl {
	padding: 0;
	margin: 0;
}
h1, h2, h3, h4, h5, h6, p {
	margin-top: 0;
	padding-right: 15px;
	padding-left: 15px;
}
a img { 
	border: none;
}
hr {
  height: 1px;
  background-color: #9d9d9c;
}

/*=============== LINKS ================*/
/*==== BLANCO ROTO ARENA #F1EAE0  =====*/
/*==== VERDE AGUAMARINA  #A0BCB1  =====*/

a:link {
	color:#365B4A;
	text-decoration: none;
}
a:visited {
	color:#365B4A;
	text-decoration: none;
}
a:hover, a:active, a:focus { 
	color:#000000;
	text-decoration: none;
}
a.link_menu:link {
	color:#F1EAE0;
	text-decoration: none; /* a no ser que aplique estilos a los vínculos para que tengan un aspecto muy exclusivo, es recomendable proporcionar subrayados para facilitar una identificación visual rápida */
}
a.link_menu:visited {
	color:#F1EAE0;
	text-decoration: none;
}
a.link_menu:hover, a.link_menu:active, a.link_menu:focus { /* este grupo de selectores proporcionará a un usuario que navegue mediante el teclado la misma experiencia de hover (paso por encima) que experimenta un usuario que emplea un ratón. */
	color:#000000;
	text-decoration: none;
}
a.link_menup:link {
	color:#000000;
	text-decoration: none; /* a no ser que aplique estilos a los vínculos para que tengan un aspecto muy exclusivo, es recomendable proporcionar subrayados para facilitar una identificación visual rápida */
}
a.link_menup:visited {
	color:#000000;
	text-decoration: none;
}
a.link_menup:hover, a.link_menup:active, a.link_menup:focus { /* este grupo de selectores proporcionará a un usuario que navegue mediante el teclado la misma experiencia de hover (paso por encima) que experimenta un usuario que emplea un ratón. */
	color:#648476;
	text-decoration: none;
}
a.link_menuv:link {
	color:#648476;
	text-decoration: none; /* a no ser que aplique estilos a los vínculos para que tengan un aspecto muy exclusivo, es recomendable proporcionar subrayados para facilitar una identificación visual rápida */
}
a.link_menuv:visited {
	color:#648476;
	text-decoration: none;
}
a.link_menuv:hover, a.link_menuv:active, a.link_menuv:focus { /* este grupo de selectores proporcionará a un usuario que navegue mediante el teclado la misma experiencia de hover (paso por encima) que experimenta un usuario que emplea un ratón. */
	color:#000000;
	text-decoration: none;
}
a.link_menunb:link {
	color:#000000;
	text-decoration: none; /* a no ser que aplique estilos a los vínculos para que tengan un aspecto muy exclusivo, es recomendable proporcionar subrayados para facilitar una identificación visual rápida */
}
a.link_menunb:visited {
	color:#000000;
	text-decoration: none;
}
a.link_menunb:hover, a.link_menunb:active, a.link_menunb:focus { /* este grupo de selectores proporcionará a un usuario que navegue mediante el teclado la misma experiencia de hover (paso por encima) que experimenta un usuario que emplea un ratón. */
	color:#365B4A;
	text-decoration: none;
}
a.link_menub:link {
	color:#365B4A;
	text-decoration: none; /* a no ser que aplique estilos a los vínculos para que tengan un aspecto muy exclusivo, es recomendable proporcionar subrayados para facilitar una identificación visual rápida */
}
a.link_menub:visited {
	color:#365B4A;
	text-decoration: none;
}
a.link_menub:hover, a.link_menub:active, a.link_menub:focus { /* este grupo de selectores proporcionará a un usuario que navegue mediante el teclado la misma experiencia de hover (paso por encima) que experimenta un usuario que emplea un ratón. */
	color:#365B4A;
	text-decoration: none;
}

/*=============== utilidades ================*/
.como_h1 {
    font-family: "Optima";
	font-weight:bold;
	font-size:200%;
	margin-top: 0;
	padding-right: 15px;
	padding-left: 15px;
}
/*=============== utilidades ================*/
.pc {
	display:inline;
}
.resto {
	display:none;
}
.tablet {
	display:none;
}
.movil {
	display:none;
}
.espacio_flecha{
 	width: 100%;
  	margin-left: auto;
  	margin-right: auto;
	margin-top:2%;
	margin-bottom:1%;
}
.flecha {
 	width: 3%;
 	margin-right: auto;
  	margin-left: auto;
}
.flecha img {
 	width: 100%;
 	height: auto;
}
.banner_pagina {
	width: 100%;
	float:left;
	margin-left:auto;
	margin-right:auto;
	margin-bottom:1%;
}
.banner_pagina img {
 	width: 100%;
 	height: auto;
}
.migas {
	width: 60%;
	float:left;
	margin-left:38%;
	margin-right:auto;
	margin-bottom:1%;
	display:inline;
	font-size:90%;
	text-align:right;
	margin-top:4%;
}
.separador {
	width: 98%;
	float:left;
	margin-left:1%;
	margin-right:1%;
	margin-bottom:2%;
	margin-top:2%;
}
.separador img {
	width: 100%;
	height:1px;
}
.sombra {
	box-shadow: 2px 2px 10px;
	border-radius:10px;
}
.logo_centrado {
	width: 30%;
	float:left;
	margin-left:35%;
	margin-right:35%;
	margin-top:1%;
	margin-bottom:1%;
	padding:10px;
	box-sizing:border-box;
}
.logo_centrado img {
 	width: 100%;
 	height: auto;
}
.errores_pass {
	width:90%;
	float:left;
	margin-left:5%;
	margin-right:5%;
	text-align:center;
	color:#990000;
	font-size:90%;
}
.errores {
	width:60%;
	float:left;
	margin-left:20%;
	margin-right:20%;
	margin-bottom:2%;
	text-align:center;
	color:#990000;
	font-size:120%;
}
.errores_g {
	width:80%;
	float:left;
	margin-left:10%;
	margin-right:10%;
	margin-bottom:2%;
	text-align:center;
	color:#990000;
	font-size:110%;
}
/* ~~ cookies ~~ */
/* CSS para la animación y localización de los DIV de cookies */
@keyframes desaparecer
{
0%		{bottom: 0px;}
80%		{bottom: 0px;}
100%		{bottom: -50px;}
}
@-webkit-keyframes desaparecer /* Safari and Chrome */
{
0%		{bottom: 0px;}
80%		{bottom: 0px;}
100%		{bottom: -50px;}
}
@keyframes aparecer
{
0%		{bottom: -38px;}
10%		{bottom: 0px;}
90%		{bottom: 0px;}
100%		{bottom: -38px;}
}
@-webkit-keyframes aparecer /* Safari and Chrome */
{
0%		{bottom: -38px;}
10%		{bottom: 0px;}
90%		{bottom: 0px;}
100%		{bottom: -38px;}
}
#cookiesms1:target {
    display: none;
}
.cookiesms{	
	width:100%;
	height:auto;
	margin:0 auto;
	font-size:102%;
	padding-left:1%;
	padding-top:5px;
	clear:both;
	color: #404040;
	font-weight:bolder;
	bottom:0px;
	position:fixed;
	left: 0px;
	background-color: #EAEAEA;
	opacity:0.9;
	transition: bottom 1s;
	-webkit-transition:bottom 1s; /* Safari */
	-webkit-box-shadow: 3px -3px 1px rgba(160, 160, 160, 0.56);
	-moz-box-shadow:    3px -3px 1px rgba(160, 160, 160, 0.56);
	box-shadow:         3px -3px 1px rgba(160, 160, 160, 0.56);
	z-index:999999999;
	text-align:center;
}
.cookiesms:hover{
	bottom:0px;
}
.cookies2{
	background-color: #E6F7F0;
	display:inline;
	opacity:0.95;
	position:absolute; 
	left:1%; 
	top:-30px;
	font-size:95%;
    font-family: 'Optima';
	height:30px;
	padding-left:15px;
	padding-right:15px;
	-webkit-border-top-right-radius: 15px;
	-webkit-border-top-left-radius: 15px;
	-moz-border-radius-topright: 15px;
	-moz-border-radius-topleft: 15px;
	border-top-right-radius: 15px;
	border-top-left-radius: 15px;
	-webkit-box-shadow: 3px -3px 1px rgba(154, 79, 56, 0.56);
	-moz-box-shadow:    3px -3px 1px rgba(154, 79, 56, 0.56);
	box-shadow:         3px -3px 1px rgba(154, 79, 56, 0.56);
}
.boton_cookies {
	width:15%;
	padding:5px;
	float:left;
	background-color:#A0BCB1;
	color:#000000;
	margin-bottom:1%;
	margin-right:0%;
	margin-left:33%;
	text-align:center;
	font-size:100%;
	box-sizing:border-box;
	cursor:pointer;
	border-radius:5px;
	border:#17543B thin solid;
}
.boton_cookies:hover {
	background-color:#17543B;
	color:#ffffff;
}
.boton_cookies1 {
	width:15%;
	padding:5px;
	float:left;
	background-color:#A0BCB1;
	color:#000000;
	margin-bottom:1%;
	margin-right:0%;
	margin-left:4%;
	text-align:center;
	font-size:100%;
	box-sizing:border-box;
	cursor:pointer;
	border-radius:5px;
	border:#17543B thin solid;
}
.boton_cookies1:hover {
	background-color:#17543B;
	color:#ffffff;
}

/*=============== particiones ================*/
body {
    font-family: "Optima";
    overflow-x: hidden;
	font-size:105%;
	background-color:#ffffff; 
	margin: 0;
	padding: 0;
	color:#212121;
}
.container {
 	width: 100%;
	float:left;
 	margin-right: auto;
  	margin-left: auto;
  	background: #FFF;
}
.content {
 	width: 100%;
	float:left;
 	margin-right: auto;
  	margin-left: auto;
  	background: #FFF;
}
.contenedor_imagen {
 	width: 100%;
	float:left;
 	margin-right: auto;
  	margin-left: auto;
	background-image:url(../fotos/banners/aula.png);
	/* Ajusta la imagen al tamaño de la pantalla sin deformar */
	background-size: cover;
	/* Centra la imagen */
	background-position: center;
	/* Evita que la imagen se repita */
	background-repeat: no-repeat;
	/* Fija la imagen para que no se mueva al hacer scroll (opcional) */
	background-attachment: fixed;
	/* Asegura que el body ocupe todo el alto de la ventana */
	min-height: 100vh;
	margin: 0;
}
.contenedor_centrado {
 	width: 80%;
	float:left;
 	margin-right: 10%;
  	margin-left: 10%;
	margin-top:1%;
	margin-bottom:1%;
	box-sizing:border-box;
	padding:10px;
}
.contenedor_centrado_corto {
 	width: 70%;
	float:left;
 	margin-right: 15%;
  	margin-left: 15%;
	margin-top:17%;
	margin-bottom:1%;
	box-sizing:border-box;
	padding:10px;
}
.contenedor_mitad_verde {
 	width: 49%;
	float:left;
	height:450px;
 	margin-right: 0;
  	margin-left: 1%;
	margin-top:1%;
	margin-bottom:1%;
	box-sizing:border-box;
	padding:10px;
	background-color:#A0BCB1;
	box-shadow: 2px 2px 10px;
}
.contenedor_mitad_crema {
 	width: 49%;
	float:left;
	height:450px;
 	margin-right: 1%;
  	margin-left: 0;
	margin-top:1%;
	margin-bottom:1%;
	box-sizing:border-box;
	padding:10px;
	background-color:#F1EAE0;
	box-shadow: 2px 2px 10px;
}
/*=============== header ================*/
.header {
	width: 100%;
 	margin-right: auto;
  	margin-left: auto;
	/*=============para que el menu sea fijo en pantalla ==============*/
	position:fixed;
	left:0;
	top:0;
	right:0;
	background-color:#A0BCB1;
	border-bottom:thin solid #94C3AE;
}
.header_superior {
	width: 100%;
 	margin-right: auto;
  	margin-left: auto;
	background-color:#A0BCB1;
}
.interiorismo {
	width: 11%;
	float:left;
	margin-left:75%;
	font-size:90%;
	text-align:center;
	padding:5px;
	box-sizing:border-box;
    font-family: 'ankoa';
	margin-top:2%;
	border:none;
	border-radius:5px;
	font-weight:bold;
}
.interiorismo:hover {
	font-weight:bold;
}
.logo_terra {
 	width: 5%;
	float:left;
	margin-left:3%;
	margin-top:1%;
}
.logo_terra img {
 	width: 100%;
 	height: auto;
}
.logo {
 	width: 25%;
	float:left;
	margin-left:2%;
	margin-right:1%;
	display: inline-block;
	margin-top:-2%;
}
.logo img {
 	width: 100%;
 	height: auto;
}
.navegador {
 	width: 68%;
	float:left;
  	margin-left: 33%;
	position: relative;
	z-index:1;
	margin-bottom:1%;
    font-family: "optima";
	margin-top:-3%;
}

/*=============== menu DESPLEGABLE Y RESIZEABLE ================*/
.menu_largo {
	display:none;
}
.menu_bar {
	display:none;
}
menu {
	width:100%;
	margin-left:0;
	float:left;
	font-size:100%;
	font-weight:500;
	position: relative;
	z-index:1;
}
menu nav {
	z-index:1000;
	width:100%;
}
menu nav ul {
	list-style:none;
}
menu nav ul li {
	display:inline-block;
	position: relative;
	font-size:100%;
}
menu nav ul li:hover {
	color:#0D9F63;
}
menu nav ul li:hover > ul {
	display:block;
}
menu nav ul li a {
	color:#000000;
	display:block;
	text-decoration:none;
	padding-top:8px;
	padding-bottom:8px;
	padding-left:20px;
	padding-right:20px;
	box-sizing:border-box;
}
menu nav ul li a span {
}

menu nav ul li:hover .children {
	margin-right:1px;
	display:block;
}
menu nav ul li .children {
	display: none;
	position: absolute;
	width:200%;
	height:80px;
	z-index:1000;
	font-size:90%;
	border:thin #A0BCB1 solid;
	padding:10px;
	box-sizing:border-box;
	background-color:#F1EAE0;
}
menu nav ul li .children li {
	float:left;
	display:block;
	overflow: hidden;
	line-height: 0.3em; 
}
menu nav ul li .children li a {
	display: block;
}
menu nav ul li .children li a span {
	float: right;
	position: relative;
	top:5px;
	margin-right:0;
	margin-left:5px;
}
menu nav ul li .caret {
	position: relative;
	top:3px;
	margin-left:10px;
	margin-right:0px;
}
.menu_largo ul {
	background-color:#F4F9FC;
	overflow:hidden;
	list-style:none;
	margin-top:-0.4%;
	font-size:100%;
	margin-left:0;
	padding:0;
}
.menu_largo ul li {
	float:left;
	text-align:center;
	width:19%;
}
.menu_largo ul li a {
	color:#06500c;
	display:block;
	margin-top:2%;
	padding-top:1%;
	padding-bottom:1.5%;
	text-decoration:none;
}
.menu_largo ul li span {
	margin-right:8%;
}
.menu_largo ul li a:hover {
	color:#8db2dd;
}
.menu_largo ul li .children {
	display: none;
	position: absolute;
	width: 150%;
	z-index:1000;
}
.menu_largo ul li .children li {
	display:block;
	overflow: hidden;
}
.menu_largo ul li .children li a {
	display: block;
}
.menu_largo ul li .children li a span {
	float: right;
	position: relative;
	top:3px;
	margin-right:0;
	margin-left:10px;
}
.menu_largo ul li .caret {
	position: relative;
	top:3px;
	margin-left:10px;
	margin-right:0px;
}
/*=============== banner principal ================*/
.foto_index {
 	width: 100%;
	float:left;
    text-align: center;
	margin-top:6%;
}
.foto_index img {
 	width: 100%;
 	height: auto;
}
/*=============== MAPA ================*/
.mapa {
 	width: 100%;
	float:left;
 	margin-right: auto;
  	margin-left: auto;
	border:thin #DBDBDB solid;
	margin-bottom:1%;
	margin-top:3%;
}
.mapa img {
	width: 100%;
	height:auto;
}
/*=============== formularios ================*/
.imagen_ojo {
	width: 60%;
	float:left;
	border-radius:5px;
}
.imagen_ojo img {
	width: 100%;
	height:auto;
}
.formularios_sesion {
 	width: 90%;
	float:left;
	margin-left:5%;
	margin-right:5%;
	padding:5px;
	box-sizing:border-box;
	font-size:90%;
	margin-top:2%;
}
.formularios_error {
 	width: 90%;
	float:left;
	margin-left:5%;
	margin-right:5%;
	padding:5px;
	box-sizing:border-box;
	font-size:105%;
	margin-top:2%;
}
.formularios {
 	width: 80%;
	float:left;
	margin-left:10%;
	margin-right:10%;
	padding:8px;
	box-sizing:border-box;
	font-size:90%;
	background-color:#F9F9F9;
	margin-top:4%;
}
/*=============== contenedores texto ================*/
.contenedor_textos_peque {
 	width: 80%;
	float:left;
 	margin-right: 10%;
  	margin-left: 10%;
	margin-top:1%;
	margin-bottom:3%;
	box-sizing:border-box;
	padding:5px;
}
.contenedor_textos {
 	width: 90%;
	float:left;
 	margin-right: 5%;
  	margin-left: 5%;
	margin-top:1%;
	margin-bottom:3%;
	border:thin #DBDBDB solid;
	box-sizing:border-box;
	padding:5px;
}
.detalle_textos {
 	width: 90%;
	float:left;
 	margin-right: 5%;
  	margin-left: 5%;
	margin-top:1%;
	margin-bottom:2%;
	text-align:justify;
	font-size:100%;
	color:#000000;
}
.detalle_textos_virtual {
 	width: 98%;
	float:left;
 	margin-right: 1%;
  	margin-left: 1%;
	margin-top:1%;
	margin-bottom:2%;
	text-align:justify;
	font-size:100%;
	color:#000000;
}
/*=============== aula virtual ================*/
.titulo_izquierda {
	width: 50%;
	float:left;
	margin-left:0;
	margin-right:5%;
	margin-top:1%;
	font-size:140%;
	font-family:ankoa;
}
.titulo_derecha {
	width: 44%;
	float:left;
	margin-left:0;
	margin-right:1%;
	margin-top:1%;
	font-size:100%;
	font-weight:bold;
	color:#A0C6B1
}
.titulo_izquierda_normal {
	width: 50%;
	float:left;
	margin-left:0;
	margin-right:5%;
	margin-top:1%;
	font-size:100%;
}
/*=============== acordeon boton ================*/
.acordeon-titulo-boton {
 	width: 23%;
	float:left;
	margin-left:1%;
	margin-right:7%;
	font-size:120%;
	font-weight:bold;
	border:thin #CCC solid;
	border-radius:3%;
	text-align:center;
	padding:8px;
	box-sizing:border-box;
	background-color:#A0BCB1;
	box-shadow: 1px 1px 5px;
	cursor:pointer;
}
/*=============== acordeon ================*/
.acordeon-contenido {
    width: 92%;
	margin-left:4%;
	margin-right:4%;
    display: none; /* Ocultar por defecto */
    padding: 15px;
    background-color: #ffffff;
	color:#000000;
	box-sizing:border-box;
	float:left;
	border:thin #DBDBDB solid;
}

.acordeon-item.activo .acordeon-contenido {
    display: block; /* Mostrar cuando está activo */
}

.acordeon-titulo {
    cursor: pointer;
    width: 100%;
    text-align: left;
    padding: 30px;
    background-color: #EFF7F4;
	font-size:110%;
	box-sizing:border-box;
	border:thin #DBDBDB solid;
}
/*=============== indice ================*/
.indice-contenido {
    width: 92%;
	margin-left:4%;
	margin-right:4%;
    padding: 15px;
    background-color: #ffffff;
	color:#000000;
	box-sizing:border-box;
	float:left;
	border:thin #DBDBDB solid;
}

.indice-item.activo .indice-contenido {
    display: block; /* Mostrar cuando está activo */
}

.indice-titulo {
    width: 100%;
    text-align: left;
    padding: 30px;
    background-color: #EFF7F4;
	font-size:110%;
	box-sizing:border-box;
	border:thin #DBDBDB solid;
}
/*=============== lecciones principio ================*/
.lecciones_princi_foto {
 	width: 6%;
	float:left;
	margin-left:2%;
	margin-right:2%;
}
.lecciones_princi_foto img {
 	width: 100%;
 	height: auto;
}
.lecciones_princi_des {
	width: 73%;
	float:left;
	margin-left:2;
	margin-right:3%;
	text-align:left;
}
.lecciones_completado {
	width: 12%;
	float:left;
	margin-left:0;
	margin-right:0;
	text-align:center;
	font-weight:bold;
	font-size:70%;
}
.lecciones_princi_temas {
	width: 40%;
	float:left;
	margin-left:2;
	margin-right:3%;
	font-size:85%;
	padding-top:10px;
	text-align:left;
}
.lecciones_princi_cadu {
	width: 73%;
	float:left;
	margin-left:2;
	margin-right:3%;
	text-align:left;
	margin-top:1%;
	font-size:90%;
	color:#900;
	font-weight:bolder;
}
.temas_princi_foto {
 	width: 4%;
	float:left;
	margin-left:2%;
	margin-right:2%;
}
.temas_princi_foto img {
 	width: 100%;
 	height: auto;
}
.temas_princi_des {
	width: 98%;
	float:left;
	margin-left:1%;
	margin-right:1%;
	text-align:left;
}
.temas_princi_des1 {
	width: 91%;
	float:left;
	margin-left:8%;
	margin-right:1%;
	text-align:left;
}
.temas_princi_des2 {
	width: 91%;
	float:left;
	margin-left:8%;
	margin-right:1%;
	text-align:left;
	font-size:115%;
}
.temas_princi_texto {
	width: 91%;
	float:left;
	margin-left:8%;
	margin-right:1%;
	font-size:90%;
	margin-top:1%;
	text-align:justify;
	color:#3E4C59;
	font-family:"Segoe UI";
}
/*=============== videos ================*/
.videos {
 	width: 99%;
	float:left;
	margin-left:1%;
	margin-right:1%;
	margin-top:1%;
	margin-bottom:3%;
}
/*=============== materiales ================*/
.materiales {
 	width: 99%;
	float:left;
	margin-left:1%;
	margin-right:1%;
	margin-top:1%;
	margin-bottom:1%;
}
.cuadrado_temas {
 	width: 23%;
	float:left;
	margin-left:1%;
	margin-right:7%;
	font-size:120%;
	font-weight:bold;
	border:thin #CCC solid;
	border-radius:3%;
	text-align:center;
	padding:8px;
	box-sizing:border-box;
	background-color:#A0BCB1;
	box-shadow: 1px 1px 5px;
	cursor:pointer;
}
.cuadrado_materiales {
 	width: 20%;
	float:left;
	margin-left:2%;
	font-size:100%;
	border:thin #CCC solid;
	border-radius:3%;
	box-shadow: 1px 1px 5px;
	background: linear-gradient(to top, rgba(197, 175, 146, 0.8),rgba(247, 243, 237, 0.8));
	text-align:center;
	padding:10px;
	box-sizing:border-box;
	cursor:pointer;
}
.centro_fichas{
 	width: 100%;
	float:left;
 	margin-right: auto;
  	margin-left: auto;
	text-align:center;
    padding: 30px;
    background-color: #EFF7F4;
	font-size:110%;
	box-sizing:border-box;
	border:thin #DBDBDB solid;
}
.posicion_fichas{
	width: 50%;
	float:left;
 	margin-right: 25%;
  	margin-left: 25%;
}
.posicion_fichas1{
	width: 80%;
	float:left;
 	margin-right: 10%;
  	margin-left: 10%;
}
/*=============== documentos ================*/
.posicion_documentos{
 	width: 90%;
	float:left;
 	margin-right: 5%;
  	margin-left: 5%;
	margin-top:1%;
	margin-bottom:2%;
	font-size:120%;
	text-align:left;
}
/*=============== videos lecciones ================*/
.posicion_videos{
 	width: 48%;
	float:left;
 	margin-right: 1%;
  	margin-left: 1%;
	margin-top:1%;
	margin-bottom:2%;
	font-size:100%;
	text-align:center;
}
/*=============== progreso ================*/
.barra_progreso {
 	width: 96%;
	float:left;
	margin-left:2%;
	margin-right:2%;
	margin-top:1%;
	margin-bottom:3%;
	border:thin solid #999;
	padding:4px;
	box-sizing:border-box;
	border-radius:3px;
}
progress {
  vertical-align: baseline;
}
@keyframes progress-bar-stripes {
  0% {
    background-position-x: 1rem;
  }
}
.progress,
.progress-stacked {
  --bs-progress-height: 1.5rem;
  --bs-progress-font-size: 0.75rem;
  --bs-progress-bg: var(--bs-secondary-bg);
  --bs-progress-border-radius: var(--bs-border-radius);
  --bs-progress-box-shadow: var(--bs-box-shadow-inset);
  --bs-progress-bar-color: #C0C0C0;
  --bs-progress-bar-bg: #DD9933;
  --bs-progress-bar-transition: width 0.6s ease;
  display: flex;
  height: var(--bs-progress-height);
  overflow: hidden;
  font-size: var(--bs-progress-font-size);
  background-color: var(--bs-progress-bg);
  border-radius: var(--bs-progress-border-radius);
}

.progress-bar {
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
  color: var(--bs-progress-bar-color);
  text-align: center;
  white-space: nowrap;
  background-color: var(--bs-progress-bar-bg);
  transition: var(--bs-progress-bar-transition);
  border-radius:3px;
  font-weight:bold;
  font-size:100%;
  color:#000000;
}
@media (prefers-reduced-motion: reduce) {
  .progress-bar {
    transition: none;
  }
}
.progress-bar-striped {
  background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
  background-size: var(--bs-progress-height) var(--bs-progress-height);
}
.progress-stacked > .progress {
  overflow: visible;
}
.progress-stacked > .progress > .progress-bar {
  width: 100%;
}
.progress-bar-animated {
  animation: 1s linear infinite progress-bar-stripes;
}
@media (prefers-reduced-motion: reduce) {
  .progress-bar-animated {
    animation: none;
  }
}
/*=============== subidas buzon ================*/
.panel-body {
	float:left;
	width:90%;
	margin-left:5%;
	padding:0;
	border: thin solid #666; 
	height:260px;
	margin-top:2%;
	background-color:#FFF;
	box-sizing:border-box;
	margin-bottom:1%;
	border-radius:10px;
}
.text-center {
	float:left;
	width:90%;
	margin-left:5%;
	padding:0;
	text-align:center;
	color:#000000;
	margin-top:2%;
}
.form-group {
	float:left;
	width:90%;
	margin-left:5%;
	padding:0;
	margin-top:2%;
}
.col-sm-8 {
	float:left;
	width:80%;
	margin-left:0;
	border: thin solid #666; 
	box-sizing:border-box;
	height:45px;
	padding:10px;
	margin-right:4%;
	border-radius:10px;
}
.panel-error {
	float:left;
	width:96%;
	margin-right:2%;
	margin-left:2%;
	padding:0;
	margin-top:2%;
	font-size:105%;
	color:#A60018;
	font-weight:bold;
	border: thin solid #A60018;
	padding:10px;
	box-sizing:border-box;
	border-radius:10px;
	margin-bottom:3%;
}
.boton-panel-error {
	float:left;
	width:15%;
	margin-left:2%;
	margin-top:4%;
}
/*=============== tablas ================*/
.tabla_uso {
	font-size:110%;
}
.tablaprincipal {
	background-color: #A0BCB1;
	border-collapse: collapse;
	border: 1px solid #A0BCB1;
	color:#FFFFFF;
}
.brillo:hover {
	background-color: #F1EAE0;
	border-collapse: collapse;
	border: 1px solid #F1EAE0;
}
.borde {
	border-collapse: collapse;
	border: 1px solid #A0BCB1;
}
.tablaprincipal1 {
	background-color: #A0BCB1;
	border-collapse: collapse;
	border: 1px solid #A0BCB1;
	color:#FFFFFF;
	height:40px;
}
.brillo1:hover {
	background-color: #F1EAE0;
	border-collapse: collapse;
	border: 1px solid #F1EAE0;
	height:40px;
}
.borde1 {
	border-collapse: collapse;
	border: 1px solid #A0BCB1;
	height:40px;
}
.tablaprincipal_espe {
	background-color: #A0BCB1;
	color:#000000;
	font-size:130%;
	font-weight:bold;
	height:40px;
}
/*=============== pie de la pagina ================*/
.footer {
	padding: 10px 0;
	box-sizing:border-box;
	box-sizing:border-box;
}
.pie_superior {
	width: 100%;
	float:left;
	padding: 10px 0;
	box-sizing:border-box;
	background-color:#F1EAE0;
}
.pie_centrado {
	width: 48%;
	float:left;
	margin-left:1%;
	margin-right:1%;
}
.parte_footer_corta {
	width:30%;
	float:left;
	padding:0;
	margin-left:1%;
	margin-right:1%;
	margin-top:1%;
	font-size:95%;
	font-weight:normal;
}
.parte_footer {
	width:48%;
	float:left;
	padding:0;
	margin-left:2%;
	margin-top:1%;
	margin-bottom:1%;
	font-size:95%;
	font-weight:normal;
}
.logo_pie {
 	width: 70%;
	float:left;
	margin-left:15%;
	margin-right:15%;
}
.logo_pie img {
 	width: 100%;
 	height: auto;
}
.pie_inferior {
	width: 100%;
	float:left;
	background-color:#A0BCB1;
	color:#404040;
	font-size:85%;
	box-sizing:border-box;
	padding-top: 10px;
	box-sizing:border-box;
	text-align:center;
}
/* ~~ clases float/clear varias ~~ */
.fltrt {  /* esta clase puede utilizarse para que un elemento flote en la parte derecha de la página. El elemento flotante debe preceder al elemento junto al que debe aparecer en la página. */
	float: right;
	margin-left: 8px;
}
.fltlft { /* esta clase puede utilizarse para que un elemento flote en la parte izquierda de la página. El elemento flotante debe preceder al elemento junto al que debe aparecer en la página. */
	float: left;
	margin-right: 8px;
}
.clearfloat { /* esta clase puede situarse en una <br /> o div vacía como elemento final tras la última div flotante (dentro de #container) si #footer se elimina o se saca fuera de #container */
	clear:both;
	height:0;
	font-size: 1px;
	line-height: 0px;
}
/*=============== botones ================*/
.boton_pass {
	width: 50%;
	float:left;
	margin-left:35%;
	margin-right:15%;
	font-size:100%;
	text-align:center;
	padding:8px;
	box-sizing:border-box;
	background-color:#F1EAE0;
	color:#000000;
    font-family: "optima";
	margin-top:3%;
	border:none;
	border-radius:5px;
	font-weight:bold;
	cursor:pointer;
}
.boton_pass:hover {
	color:#A0C6B1;
	font-weight:bold;
	cursor:pointer;
}
.boton_pass1 {
	width: 50%;
	float:left;
	margin-left:35%;
	margin-right:15%;
	font-size:100%;
	text-align:center;
	padding:8px;
	box-sizing:border-box;
	background-color:#A0C6B1;
	color:#000000;
    font-family: "optima";
	margin-top:3%;
	border:none;
	border-radius:5px;
	font-weight:bold;
	cursor:pointer;
}
.boton_pass1:hover {
	color:#F1EAE0;
	font-weight:bold;
	cursor:pointer;
}
.boton_pass_centro {
	width: 50%;
	float:left;
	margin-left:25%;
	margin-right:25%;
	font-size:100%;
	text-align:center;
	padding:8px;
	box-sizing:border-box;
	background-color:#F1EAE0;
	color:#000000;
    font-family: "optima";
	margin-top:3%;
	border:none;
	border-radius:5px;
	font-weight:bold;
	cursor:pointer;
}
.boton_pass_centro:hover {
	color:#A0C6B1;
	font-weight:bold;
	cursor:pointer;
}
.boton_pass_centro1 {
	width: 36%;
	float:left;
	margin-left:32%;
	margin-right:32%;
	font-size:100%;
	text-align:center;
	padding:10px;
	box-sizing:border-box;
	background-color:#A0C6B1;
	color:#000000;
    font-family: "optima";
	margin-top:3%;
	border:none;
	border-radius:5px;
	font-weight:bold;
	cursor:pointer;
}
.boton_pass_centro1:hover {
	color:#F1EAE0;
	font-weight:bold;
	cursor:pointer;
}
.boton_enviar {
	width: 35%;
	float:left;
	margin-left:auto;
	margin-right:auto;
	font-size:100%;
	text-align:center;
	padding:3px;
	box-sizing:border-box;
	background-color:#A1A2A3;
	color:#ffffff;
    font-family: "optima";
	border: solid thin #999;
	border-radius:5px;
}
.boton_enviar:hover {
	background-color:#DBDBDB;
	color:#000000;
}
.boton_centrado {
	width: 20%;
	float:left;
	margin-left:40%;
	margin-right:40%;
	font-size:110%;
	text-align:center;
	padding:8px;
	box-sizing:border-box;
	background-color:#F1EAE0;
	color:#A0C6B1;
    font-family: "optima";
	margin-top:3%;
	border:none;
	border-radius:5px;
	font-weight:bold;
}
.boton_centrado:hover {
	color:#000000;
	font-weight:bold;
}
.boton_indice {
	width: 50%;
	float:left;
	margin-left:45%;
	margin-right:0%;
	font-size:100%;
	text-align:center;
	padding:8px;
	box-sizing:border-box;
	background-color:#F1EAE0;
	color:#000000;
    font-family: "optima";
	margin-top:3%;
	border:none;
	border-radius:5px;
	font-weight:bold;
	cursor:pointer;
}
.boton_indice:hover {
	color:#A0C6B1;
	font-weight:bold;
	cursor:pointer;
}
.bfotos {
	width: 15%;
	float:left;
	margin-left:1%;
	margin-right:0%;
	font-size:100%;
	text-align:center;
	padding:8px;
	box-sizing:border-box;
	background-color:#A0C6B1;
	color:#000000;
    font-family: "optima";
	border:none;
	border-radius:5px;
	font-weight:bold;
	cursor:pointer;
}
.bfotos:hover {
	color:#F1EAE0;
	font-weight:bold;
	cursor:pointer;
}

/*=============== letras ================*/
.letra_pie {
	color:#000000;
	font-size:120%;
    font-family: "optima";
	font-weight:bolder;
}
.letra_especial {
	font-weight:bold;
	color:#A0BCB1;
	font-size:160%;
    font-family: "ankoa";
 }
.letra_especial_subida {
	font-weight:bold;
	color:#648476;
	font-size:160%;
    font-family: "ankoa";
 }
.letra_avisos {
	font-size:90%;
    font-family: "optima";
	color:#000000;
}
.letra_verde {
	color:#006600;
}
.letra_roja {
	color:#900;
}
.letra_morada {
	color:#663399;
}
.letra_roja_p {
	color:#900;
	font-size:75%;
	text-align:center;
}

/* ~~---------------- ESTILO FORMULARIO ------------------------~~ */
.formulario {
	-moz-box-shadow:inset 0px 1px 0px 0px #ffffff;
	-webkit-box-shadow:inset 0px 1px 0px 0px #ffffff;
	box-shadow:inset 0px 1px 0px 0px #ffffff;
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ededed', endColorstr='#dfdfdf');
	-webkit-border-top-left-radius:6px;
	-moz-border-radius-topleft:6px;
	border-top-left-radius:6px;
	-webkit-border-top-right-radius:6px;
	-moz-border-radius-topright:6px;
	border-top-right-radius:6px;
	-webkit-border-bottom-right-radius:6px;
	-moz-border-radius-bottomright:6px;
	border-bottom-right-radius:6px;
	-webkit-border-bottom-left-radius:6px;
	-moz-border-radius-bottomleft:6px;
	border-bottom-left-radius:6px;
	text-indent:0;
	border:1px solid #dcdcdc;
	color:#000000;
	text-decoration:none;
	text-align:left;
	text-shadow:1px 1px 0px #ffffff;
	font-size:105%;
	padding:5px;
}
/*=========================MEDIA QUERIES PANTALLA XLL ================================*/
@media screen and (max-width: 1650px){
/*=============== separadores ================*/
.contenedor_centrado {
 	width: 94%;
 	margin-right: 4%;
  	margin-left: 2%;
}
}
/*=========================MEDIA QUERIES PANTALLA XLL ================================*/
@media screen and (max-width: 1550px){
}
/*=========================MEDIA QUERIES PANTALLA XLL ================================*/
@media screen and (max-width: 1400px){
.interiorismo {
	width: 15%;
	margin-left:69%;
	font-size:90%;
	padding:5px;
	margin-top:2%;
    font-family: 'ankoa';
}
.logo_terra {
 	width: 6%;
	margin-left:3%;
	margin-top:1%;
}
.logo {
 	width: 28%;
	float:left;
	margin-left:2%;
	margin-right:1%;
	display: inline-block;
	margin-top:-2%;
}
.navegador {
 	width: 65%;
	float:left;
  	margin-left: 35%;
	position: relative;
	z-index:1;
	margin-bottom:1%;
    font-family: "optima";
	margin-top:-4%;
}
menu {
	font-size:95%;
}
menu nav ul li a {
	padding-top:8px;
	padding-bottom:8px;
	padding-left:12px;
	padding-right:12px;
}
.letra_pie {
	font-size:100%;
}
.parte_footer {
	font-size:85%;
}
}
/*=========================MEDIA XAOMI ================================*/
@media screen and (max-width: 1360px){
}
/*=========================MEDIA QUERIES PANTALLA L ( SAMSUNG GALAXY TAB 3'10) tablets grandes y pantalla a 1200 ================================*/
@media screen and (max-width: 1200px){
.pc {
	display:none;
}
.resto {
	display:inline;
}
.tablet {
	display:inline;
}
.movil {
	display:none;
}
/*=============== separadores ================*/
.contenedor_centrado {
 	width: 98%;
 	margin-right: 1%;
  	margin-left: 1%;
}
/*=============== footer ================*/
.pie_centrado {
	width: 100%;
	float:left;
	margin-left:auto;
	margin-right:auto;
}
.parte_footer_corta {
	width:30%;
	float:left;
	padding:0;
	margin-left:1%;
	margin-right:1%;
	margin-top:1%;
	font-size:85%;
	font-weight:normal;
}
.parte_footer {
	width:49%;
	float:left;
	padding:0;
	margin-left:1%;
	margin-top:5%;
	margin-bottom:1%;
	font-size:85%;
	font-weight:normal;
}
.logo_pie {
 	width: 70%;
	float:left;
	margin-left:15%;
	margin-right:15%;
}
/*=============== botones ================*/
.boton_centrado {
	width: 30%;
	margin-left:35%;
	margin-right:35%;
}
}
/*=========================MEDIA QUERIES PANTALLA M (APPLE AIPAD 1234 AIR) ================================*/ 
@media screen and (max-width: 820px){
}

@media screen and (max-width: 834px){
}

@media screen and (max-width: 800px){
.flecha {
 	width: 7%;
 	margin-right: auto;
  	margin-left: auto;
}
}

/*=========================MEDIA QUERIES PANTALLA S  MOVIL LG ================================*/
@media screen and (max-width: 428px){
.pc {
	display:none;
}
.resto {
	display:inline;
}
.tablet {
	display:none;
}
.movil {
	display:inline;
}
.flecha {
 	width: 10%;
 	margin-right: auto;
  	margin-left: auto;
}
/*=============== footer ================*/
.parte_footer_corta {
	width:49%;
	float:left;
	padding:0;
	margin-left:1%;
	margin-right:1%;
	margin-top:1%;
	font-size:85%;
	font-weight:normal;
	margin-bottom:2%;
}
.parte_footer {
	width:99%;
	float:left;
	padding:0;
	margin-left:1%;
	margin-top:1%;
	margin-bottom:1%;
	font-size:85%;
	font-weight:normal;
}
.logo_pie {
	display:none;
}
.pie_inferior {
	font-size:70%;
}
}

@media screen and (max-width: 414px){
}

@media screen and (max-width: 390px){
.boton_centrado {
	width: 50%;
	margin-left:25%;
	margin-right:25%;
}
}

@media screen and (max-width: 360px){
}