@import url(https://fonts.googleapis.com/css?family=Open+Sans);




body {
    font-family: 'Open Sans', sans-serif;
}


header {
    width: 100%;
    height: 80px;
    background: var(--color-principal);
    color: #fff;
    
    position: fixed;
    top: 0;
    left: 0;
    z-index: 100;
}

header img{
	float:left;
	max-height:70px;
	/*height:100%;*/
	width: auto;
	padding-top: 10px;
	padding-right:20px;
	vertical-align:middle;
	margin:auto;
}
.contenedor {
    width: 98%;
    margin: auto;
}

h1 {
    float: right;
	padding:20px;
	
}

header .contenedor {
    display: table;
	
}
/* agregado pari
@media (max-width:480px) {
    header{
		height: 120px;
	}
	header .contenedor h1 {
        font-size: 12px;
		width:100%;
		text-align:right;
		
    }

    
}
*/
section {
    width: 100%;
    margin-bottom: 25px;
}

#bienvenidos {
    text-align: center;
}

#bienvenidos h2 {
	margin:5px;
}

#bienvenidos p {
	margin: 10px;
}

footer{
	width:100%;
	background-color:var(--color-principal);
	color:white;
	/* GLAB */
	bottom: 0;
        position:fixed;
	}
footer .contenedor {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    padding-bottom: 25px;
	background-color:var(--color-principal);
}

.copy {
    font-size: 20px;
}

.sociales {
    width: 100%;
    text-align: center;
    font-size: 28px;
}

.sociales a {
    color: #333;
    text-decoration: none;
}

@media (min-width:768px) { 
    .sociales {
        width: auto;
    }
    
    footer .contenedor {
        justify-content: space-between;
    }
}


@media (min-width:1024px) {
    .contenedor {
        width: 1000px;
    }
}

#blog h4{
	color: var(--color-primario);
}

#blog h3, h4 {
    text-align: center;
	max-width: 280px; /* agregado pari*/
}
/* pari */
#blog h3 {
   	margin: 25px;      
}

#blog .contenedor{
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
	
}

#blog article {
    margin: 15px;
	background-color: var(--color-gris-medio); /*#dfdfdf;*/
	padding-top: 5px;
	padding-bottom: 5px;
	padding-left:5px;
	padding-right:5px;
}

#blog img {
    width: 100%;
    max-width: 280px;
	max-height: 150px; /*jorge */
}
/*agregado pari*/
#blog h2{
	max-width: 280px;
    text-align: left;
	font-size: 12px;
}


#banner {
    
	margin-top: 80px; /*
    position: relative;*/
	height: 300px;/*400px;*/
	/*
	background-image: url(../img/fondo.webp);/* Ubicación de la imagen */
			/*background-position: center center;/* Para dejar la imagen de fondo centrada, vertical yhorizontalmente */
			/*background-repeat: no-repeat; /* Para que la imagen de fondo no se repita */
			/*background-attachment: fixed;/* La imagen se fija en la ventana de visualización para que la altura de la imagen no supere a la del contenido */
			/*background-size: cover;*/
			
}

#banner img {
    width: 100%;
    /*height: 100%;*/
	height:auto;
}

#banner p{
font-size:14px;
}

#banner .contenedor {
    position: relative; /*absolute;*/
    top: 20px; /* pari 50%*/
    /*left: 50%;
    transform: translateX(-50%) translateY(-50%);*/
    color: #fff;
	background:rgba(51,51,51,0.5);
	padding-bottom:10px;
}

#banner .fcontenedor{
	width:90%;
	margin: 0 auto;
	padding-bottom:10px;
}
#banner .fcontenedor{
    
	background:rgba(51,51,51,0.5);
}


#banner .fcontenedor a{
	border:none;
	margin: 0 auto;
}

#banner .fcontenedor form{
	/*background-color:orange;
	text-align:center;*/
}
#banner h2 {
    font-size: 20px;
	padding:5px;
	
	/*background:rgba(51,51,51,0.5);*/
}

#banner a {
    display: block;
    width: 100px;
    color: #fff;
    text-decoration: none;
    padding: 7px;
    margin-top: 10px;
    border: 3px solid #fff;
}

#banner a:hover {
    background: rgba(51,51,51,0.5);
}

@media (min-width:200px) {
    #banner h2 {
        font-size: 22px;

    }
    
    #banner a {
        margin-top: 25px;
    }

	#banner .fcontenedor{
		width:100%;
	}

	#banner .fcontenedor .valor{
		width:100%;
		text-align:center;
		float:none;
	
	}
}

@media (min-width:768px) { 
	#banner{
		margin-top: 80px; /*80px;*/
	}
    #banner {
        height: 300px; /*400px;*/
        overflow: hidden;
    }
    
    #banner img {
        height: auto;
        margin-top: -100px; 
    }
	#banner .fcontenedor{
	width:70%;
	}
	#banner .fcontenedor .valor{
	width:50%;
	text-align:center;
	float:none;
	}
}

@media (min-width:1024px) { 
	#banner{
		margin-top: 80px; /*120 80px;*/
	}
    #banner img {
        margin-top: -100px;/*-350px; /*-600px; /*200 */
		
    }
	#banner .fcontenedor{
	width:50%; /*100 */
	text-align:center;
	}
	#banner .fcontenedor .valor{
	width:50%;
	text-align:center;
	float:none;
	}

}

/* agregado pari*/
@media (max-width:480px) {
    #banner .contenedor h2 {
        font-size: 18px;
    }
    #banner .fcontenedor{
	width:100%;
	}
	#banner{
		margin-top:80px; /*120px; /*80px;*/
	}
}


/*---------------------------------------*/
#agenda {
	/*
    background:#FEFEFE;
	background-image: url(../img/almanaque3.jpg);
	background-position: center center;
	background-repeat: no-repeat; 
	background-attachment: fixed;
	background-size: cover;
	*/
}


#agenda h3, h4 {
    text-align: center;
	max-width: 280px; 
}

#agenda h2 {
    /*text-align: center;
	max-width: 280px; /* agregado pari*/
	color: var(--color-oscuro);
	font-weight: normal;
	font-size: 12px;
}
#agenda h4 {
   	margin: 25px;  
	color: var(--color-principal);
	font-size: 14px;
	
}

#agenda h3 {
   	margin: 25px;      
}


#agenda h5{
	color: var(--color-principal);
	font-size: 12px;
	padding-top:5px;
}

#agenda h5 span{
	color: white;
    background-color: var(--color-positivo);
    padding: 5px;
    margin: auto;
    border-radius: 50%;
}

#agenda .contenedor{
    display: flex;
    justify-content: center; /*space-between; */
    align-items: stretch; /*space-between; */
	
    flex-wrap: wrap;
	align-content:stretch;
    
}

#agenda article {
    margin: 15px;
	background-color: var(--color-gris); /*#dfdfdf;*/
	padding-top: 5px;
	padding-bottom: 5px;
	padding-left:5px;
	padding-right:5px;
	/*width:250px;*/
	width:30%; /*100%;*/
	border-radius: 10px;
}

#agenda img {
    width: 100%;
    max-width: 280px;
	max-height: 150px; /*jorge */
	margin:auto;
	display:block;
}
/*agregado pari*/
#agenda article h1{
	background-color: var(--color-principal);
	text-align:center;
	color:white;
	padding:10px;
	width:100%;
}
#agenda h2{
	max-width: 280px;
    text-align: left;
	font-size: 14px;
	line-height:150%;
}


article .franjas{
    display: flex;
    justify-content: center; /*space-between; */
    align-items: stretch; /*space-between; */
	
    flex-wrap: wrap;
	align-content:stretch;
    
}
#agenda article #franja{
    background:var(--color-gris-claro);
	color: var(--color-secundario); /*orange;*/
	width:50%;
	padding:10px;
	border:1px solid silver;
}

#agenda #franja h1{
	background-color: var(--color-secundario);
	color:silver;
	border:1px solid silver;

}
#agenda #franja h1 span{
	color:white;
	background-color: var(--color-positivo);
	padding:5px;
	margin:auto;
	border-radius:50%;

}
#agenda #franja ul{
	
	/*list-style-image: url("../img/agent.png");*/
	text-align:left;
	

}
#agenda #franja li{
	list-style-position:inside;
	/*list-style-type: circle;
	list-style-image: url("../img/tilde.png");*/
	font-size:14px;
	cursor:pointer;

}

#agenda #franja li.ocupada{
	
	list-style-image: url("../img/tilde.png");
	

}
#agenda #franja li:hover{
	pointer:hand;
}
#agenda #franja .ocupacion{
	width:100%;
}

@media (max-width:680px) {
    
    #agenda .fcontenedor{
	width:100%;
	}
	#agenda article{
	margin:1px;
	width:90%;}
	
	#agenda .contenedor #article{
		width:100%;
	}
	
}

@media (max-width:480px) {
    
    #agenda .fcontenedor{
	width:100%;
	}
	#agenda article{
	margin:1px;
	width:90%;}
	#agenda #franja{
		width:99%;

	}
	#agenda .contenedor #article{
		width:100%;
	}
	#agenda article #franja{
	width:99%;
	padding-left:5px;
	padding-right:5px;
	}
}
/*---------------------------------------*/

#info {
    background: var(--color-gris-medio); /*#0077B0; /*#333;*/
    color: var(--color-principal);  /*#fff;*/
    /*text-align: center;*/
    padding: 20px;
}

#info .contenedor {
    /* display: flex;
    flex-wrap: wrap;
    justify-content: center;
    */
	 display: flex;
    justify-content: center; /*space-between; */
    align-items: stretch; /*space-between; */
	
    flex-wrap: wrap;
	align-content:stretch;
}

#info article {
    margin: 15px;
	background-color: var(--color-gris); /*#dfdfdf;*/
	padding-top: 5px;
	padding-bottom: 5px;
	padding-left:5px;
	padding-right:5px;
	width:450px;
}

#info h2 {
    /*text-align: center;
	max-width: 280px; /* agregado pari*/
	color: var(--color-oscuro);
	font-weight: bold;
	font-size: 16px;
}
#info span {
    font-size: 12px;
}

#info #pines{
	font-size: 16px;
	border-radius: 50%;
	padding:5px;
	
}

.info-pet {
    margin: 20px;
}

.info-pet img {
    width: 190px;  /*180 */
    height: 190px;  /*180*/
    border-radius: 50%;
    border: 5px solid #fff;
}

@media (min-width:480px) {
    .info-pet {
        width: 40%;
    }
}

@media (min-width:1024px) {
    .info-pet {
        width: auto;
    }
}

#menu-bar {
    display: none;
}

header label {
    float: right;
    font-size: 28px;
    margin: 6px 0;
    cursor: pointer;
}

.menu {
    position: absolute;
    top: 50px;
    left: 0;
    width: 100%;
    height: 100vh;
    background: rgba(0,119,176,0.9);
    transition: all 0.5s;
    transform: translateX(-100%);
}

.menu a {
    display: block;
    color: #fff;
    height: 50px;
    text-decoration: none;
    padding: 15px;
    border-bottom: 1px solid rgba(255,255,255,0.3);
}

.menu a:hover {
    background: rgba(255,255,255,0.3);
}

#menu-bar:checked ~ .menu {
    transform: translateX(0%);
}

@media (min-width:1024px) {
    .menu {
        position: static;
        width: auto;
        height: auto;
        transform: translateX(0%);
        float: right;
        display: flex;
    }
    
    .menu a {
        border: none;
    }
    
    header label { 
        display: none;
    }
}

.formulario {
  width: 80%;
  max-width: 1200px;
  margin: 0 auto;
  background:#f2f2f2; /* #0077B0;*/
  padding-top:10px;
  padding-bottom:10px;
}

.container * {
  box-sizing: border-box;
}

.flex-outer,
.flex-inner {
  list-style-type: none;
  padding: 0;
}

.flex-outer {
  max-width: 800px;
  margin: 0 auto;
}

.flex-outer li,
.flex-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

.flex-inner {
  padding: 0 8px;
  justify-content: space-between;  
}

.flex-outer > li:not(:last-child) {
  margin-bottom: 20px;
}

.flex-outer li label,
.flex-outer li p {
  padding: 8px;
  font-weight: 300;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.flex-outer > li > label,
.flex-outer li p {
  flex: 1 0 120px;
  max-width: 220px;
}

.flex-outer > li > label + *,
.flex-inner {
  flex: 1 0 220px;
}

.flex-outer li p {
  margin: 0;
}

.flex-outer li input:not([type='checkbox']),
.flex-outer li textarea {
  padding: 15px;
  border: none;
}

.flex-outer li button {
  margin-left: auto;
  padding: 8px 16px;
  border: none;
  background: #333;
  color: #f2f2f2;
  text-transform: uppercase;
  letter-spacing: .09em;
  border-radius: 2px;
}

.flex-inner li {
  width: 100px;
}



.cuerpo {
    margin-top:50px; 
	background:#f2f2f2; /*#e67e22;*/
	padding:20px;
	/*FLEX*/
	flex:1 1 30%;
	/*flex:0 0 300px;*/
 
	display: flex;
	flex-wrap:wrap;
	flex-direction:column;
	justify-content:flex-start;
}

.cuerpo img {
    width: 100%;
    height:auto;
}
.cuerpo .widget {
	background: #d35400; /*naranja */
	height:150px;
	margin:10px;
}
.cuerpo article p{
	 font-family: 'Open Sans', sans-serif;
	 font-size: 12px;
	 text-align:center;

}

aside {
	margin-top:25px;
	background:#ccc; /*yellow; /*#e67e22;*/
	padding:20px;
	/*FLEX*/
	flex:1 1 70%;
	/*flex:0 0 300px;*/
 
	display: flex;
	flex-wrap:wrap;
	flex-direction:column;
	justify-content:flex-start;
}
 
aside .widget {
	background: #d35400;
	height:150px;
	margin:10px;
}

aside .evento {
	background: #ccc;  /*#d35400;*/
	/*height:150px;*/
	margin:5px; /*10 */
	/*color:white;*/
	padding:10px;
}

aside .evento p{
	 font-family: 'Open Sans', sans-serif;
	 font-size: 12px;
	 width:100%;
}

aside .evento ul li{
	 font-family: 'Open Sans', sans-serif;
	 font-size: 12px;	 
	 list-style-type: square;
	 margin-left:25px;
}

aside .detalle {
	background:#ccc;  /*#d35400;*/
	/*height:150px;*/
	margin-left:10px; /*10 */
	margin-top:1px;
	margin-right:10px;
	margin-bottom:1px;
	/*color:white;*/
	padding:10px;
}

aside .detalle p{
	 font-family: 'Open Sans', sans-serif;
	 font-size: 12px;
	 /*width:100%;*/
}

aside #certificados .evento {
	background:#f2f2f2;  /*#d35400;*/
	/*height:150px;*/
	margin:5px; /*10 */
	/*color:white;*/
	padding:10px;
}

aside #preinscripciones .evento {
	background:#f2f2f2;  /*#d35400;*/
	/*height:150px;*/
	margin:5px; /*10 */
	/*color:white;*/
	padding:10px;
}

aside .evento .leyenda {
  background: rgb(0,0,0,.1);
  /*width: 90%;*/
  padding:5px;
  font-size:12px;
  margin-top:10px;
  margin-left:15px;
  /*margin-left:15px;
  margin-right:15px;
  /*margin-top: 6px;*/
}
.contenedorppal {
	background:#ccc;
	width:98%;
	max-width:1024px;
	margin:auto;
 
	/* Flexbox */
	display:flex;
	flex-flow:row wrap;
}

@media screen and (max-width: 800px) {
	.contenedorppal {
		flex-direction:column;
	}
 
	header {
		flex-direction:column;
		padding:0;
	}
 
	header .logo {
		margin:20px 0;
	}
 
	header nav {
		width: 100%;
	}
 
	aside {
		flex-direction:row;
		flex:0;
		margin-top:0px;
	}
 
	aside .widget {
		flex-grow:1;
	}
	aside .evento {
		flex-grow:1;
	}
	aside .detalle {
		flex-grow:1;
	}

}

@media screen and (max-width: 600px) {
	aside {
		flex-direction:column;
	}
 
	footer {
		justify-content:space-around;
	}
}

.boton {
	background-color: var(--color-boton);
	font-family: 'MyFonts' !important;
	color:#fff;
	display:inline-block;
	font-size:1.30em !important;
    vertical-align:middle;
	/*margin:5px;*/
	margin-top: 3px;
	margin-right: 0px;
    margin-bottom: 5px;
    margin-left: 0px; /*  pari */
	padding:10px 0px;
	text-align:center;
	width:120px;
	height: 40px;
	text-decoration:none !important;
	border:none;
	box-shadow:0px 3px 0px var(--color-boton-sombra);
	cursor:hand;
}
 
.boton span {
	margin-right:10px;
	cursor:hand;
}
 
/*Colores*/
.boton.blue {
	background:var(--color-boton);  /*#0077B0; /*#3498db;*/
	box-shadow:0px 3px 0px var(--color-boton-sombra);
}
 
.boton.yellow {
	background:#e67e22;
	box-shadow:0px 3px 0px #b55704;
}

.boton.warning {
	background:red; /*var(--color-boton);  /*#0077B0; /*#3498db;*/
	box-shadow:0px 3px 0px #266792;
	
}
/*Activo*/
.boton.activo {
	box-shadow:0px 0px 0px;
	box-shadow:0px 3px 0px red;
	/*box-shadow:0px 3px 0px #7CFC00;*/
	font-weight: bold;
	

}
/*Activo*/
.boton.inactivo {
	box-shadow:0px 0px 0px;
	box-shadow:0px 3px 0px black;
	/*box-shadow:0px 3px 0px #7CFC00;*/
	background:#d9dadb;
	font-weight: bold;
	color:gray;
	

}
 
/*Tamaños*/
.boton.medium {
	width:150px;
}
 
 
.boton.large {
	width:450px;
}
 
.boton.small {
	width:50px;
}

.boton.libre {
	width:100%;
}

 
.boton.radius {
	border-radius:10px;
}
/* Esto es para botones con grafico solo */ 
.boton.simple{
	margin:1px;
	padding:0px 0px 0px 0px;
	width:20px;
	height:20px;
	border:outset;
	/*box-shadow:0px 1px 0px #373c3c;*/
	/*
	-webkit-box-shadow: 1px 1px 0px 0px rgba(55,60,60,1);
	-moz-box-shadow: 1px 1px 0px 0px rgba(55,60,60,1);
	box-shadow: 1px 1px 0px 0px rgba(55,60,60,1);*/
}
/*Efectos, Hover*/
.boton:hover {
	box-shadow:0px 0px 0px;
	box-shadow:0px 3px 0px var(--color-boton-sombra-over); /*#7CFC00; pari */
	font-weight: bold;
	/*padding-top:7px;*/
}

/* Estilos para formulario responsive */

.fcontenedor{
  border-radius: 5px;
  background-color: #f2f2f2;
  padding: 15px;
  margin: 0 auto;

}
/* Style inputs, select elements and textareas */
.fcontenedor  input[type="text"],input[type="email"],input[type="number"],input[type="password"],input[type="date"],input[type="time"],select,textarea{
  width: 100%;
  padding: 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  border-bottom: solid 2px var(--color-readonly-bottom);
  background-color: white;
  /*resize: vertical;*/
}

/* Style the label to display next to the inputs */
.fcontenedor label {
  padding: 12px 12px 12px 0;
  display: inline-block;
  font-size:14px;
  color: var(--color-oscuro);
  font-weight: bold;

}

.fcontenedor > input[type="text"]:disabled {
  background: var(--color-gris-claro);
  color: var(--color-principal);
  font-weight:bold;
}


.fcontenedor fieldset{
	 padding:10px;	
	 width: 100%;
}
.fcontenedor input[type=file] {
	width: 100%;
}

/* Style the submit button */
.fcontenedor input[type=submite] {
  background-color: #4CAF50;
  color: white;
  padding: 12px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  float: right;
}
.fcontenedor #enviar{
	background-color: var(--color-boton);
	color:white;
	border: none;
}

.fcontenedor #titulo{
	margin:0px;
	background-color: var(--color-principal);
	font-size:16px;
	width:100%;
	padding:5px;
	color:white;
	text-align:left;
	margin-bottom:5px;
}
.doscolumnas{
	display: grid;
    grid-template-columns: 1fr 2fr 1fr 2fr;
    grid-gap: 10px;
}
.unafila{
	text-align: center;
	margin-top: 10px;
	background-color: var(--color-gris-medio);
}
.doscolumnas label {
	text-align:right;
}
.doscolumnas >  input, 
.doscolumnas > select, 
.doscolumnas > textarea{
	width:100%;
	border-bottom: solid 2px var(--color-readonly-bottom);
	vertical-align: middle;
}
.doscolumnas input:read-only{
	background-color: var(--color-readonly);
}

@media screen and (max-width: 860px) {
	.doscolumnas{
		grid-template-columns: 1fr 2fr ;
	}
	
}
@media screen and (max-width: 560px) {
	.doscolumnas{
		grid-template-columns: 1fr;
	}
	.doscolumnas label {
		display:block;
		text-align:left;
	}
	
}	


#unalinea {
	/*bottom:5px;*/
	padding-bottom:10px;
}
.fcontenedor #unalinea > label{
	width: 29%;
	text-align:right;
	display:inline-block;
}
.fcontenedor #unalinea > input,select,textarea{
	width:70%;
	border-bottom: solid 1px var(--color-readonly-bottom);
	vertical-align: middle;
	
}

.fcontenedor #unalinea input:read-only{
	background-color: var(--color-readonly);
}

@media screen and (max-width: 600px) {
	.fcontenedor #unalinea label{
		width: 100%;
		text-align:left;
		padding-bottom:1px;
	}
	.fcontenedor #unalinea input,select,textarea{
		width:100%;
		/*border-bottom: solid 1px var(--color-readonly-bottom);*/
}
	
}
/* Style the container */


/* Floating column for labels: 25% width */
.fcontenedor .atributo {
  float: left;
  width: 25%;
  margin-top: 6px;
}

/* Floating column for inputs: 75% width */
.fcontenedor .valor {
  float: left;
  width: 75%;
  margin-top: 6px;
}

/* Floating column for inputs: 75% width */
.fcontenedor .opciones {
  float: left;
  width: 45%;
  text-align:center;
  /*margin-top: 6px;*/
}

.fcontenedor .leyenda {
  background: rgb(0,0,0,.1);
  width: 100%;
  padding:5px;
  font-size:14px;
  margin-top:10px;
  /*margin-top: 6px;*/
}
.fcontededor .legenda img{
float:left;}
/* Clear floats after the columns */
.fcontenedor .row:after {
  content: "";
  display: table;
  clear: both;
}
.contenedor .fcontenedor{
	width:100%;
}
.contenedor .fcontenedor .valor{
	width:30%;
}

.fcontenedor .selectreadonly{
	background-color: var(--color-readonly);
}
/* Responsive layout - when the screen is less than 600px wide, make the two columns stack on top of each other instead of next to each other */
/*
@media screen and (max-width: 600px) {
  .fcontenedor .atributo, .valor, input[type=submit] {
    width: 100%;
    margin-top: 0;
  }
}
*/

#encabezado {
    width: 100%;
    height: 80px;
    background-color: var(--color-fondo-encabezado);
    color: #fff;
    position:relative;
    top: 0;
    left: 0;
    z-index: 100;
	padding-left:20px;
	padding-right:20px;
	padding-top:10px;
	padding-bottom:10px;
	/*cursos */
	display: flex;
	flex-direction: row;
	justify-content: space-around;
	justify-content: space-between; /* jorge solucion*/
	

	
}

#encabezado .contenedor {
    display: table;
	background:white;
	border: 2px red;
}
#encabezado .logo {
	background-color:  var(--color-fondo-encabezado);/*var(--color-principal);*/
	display:inline-block;
	float:left;

	/*padding-top: 1px;
	padding-bottom: 1px;*/
	
}

#encabezado .logo img{
	float:left;
	margin-left: 10px;
	max-height: 60px;
	height: 100%;
	width:auto;
	
}

#encabezado a{
	color: var(--color-principal);/*white;*/
}

@media screen and (max-width: 680px) {
	#encabezado{
		flex-direction: column;
		 height: 110px;
		padding-left:5px;
		padding-right:5px;
		padding-top:5px;
		padding-bottom:10px;
	}
	/*#encabezado .contenedor{
		width:100%;
		}*/
	#encabezado .logo{
		width:100%;
		
	}
	
	#encabezado a {
		/*width:100%;
		color:red;*/
	}
}


#logo-header {
	
	float: right;
	/*clear:right;*/
	padding: 15px 0 0 20px;
	text-decoration: none;
	
}
	#logo-header:hover {
		color: #0b76a6;
	}
	
	#logo-header .site-name {
		display: block;
		font-weight: 700;
		font-size: 1.5em;
		
	}
	
	#logo-header .site-desc {
		display: block;
		font-weight: 300;
		font-size: 1em; /*0.8em;*/
		color: limegreen;
		
	}
	#logo-header #icono-salir{
		color: lime;
	}

@media screen and (max-width: 680px) {
	#encabezado .contenedor{
		width:100%;}
	#logo-header{
		/*flex-direction: column;*/
		 width:100%;
		 padding: 0px;
		 text-align:right;
		 
	}
	#logo-header #icono-salir{
		float:right;}
	
}
	
/*  Encabezado año 2023 */
.encabezado{
	background-color: white; /* #1F6089;*/
	width: 100%;
	padding-left:10px;
	padding-right: 10px;
	max-height: 120px;

}
.div_contenedor{
	padding-left: 10px;
	padding-right: 10px;
		/*background: crimson;
		margin: auto 10%;
		height: 100vh;*/
		/*padding:10px;*/
		display: flex;        
		justify-content: center;
		flex-wrap: wrap;
		align-content:stretch;
		/*background-color:#000;
		opacity: .5;*/
}

#logos {
	width: 100%;
	display: flex;        
	justify-content: space-between;/*center*/
	flex-wrap: wrap;
	align-content:stretch;
	max-height: 120px;

}
#logos img{
	max-height: 100%;
	height: 100%;
	width: auto;
}

@media (max-width:680px) {
	#div_contenedor{
		flex-direction:column;
	}
	#logos{
		flex-direction:column;
	}
	#logos img{
		/*max-height: 100px;
		height: 100%;
		width: auto;*/
		
		max-width: 100%;
		width: 100%;
		height: auto;
	}
	
	#logo_epg{
		display:none;
	}
	
}
/* ************************************   */

#cuerpoppal {
	position:relative;
	width:95%;
	text-align:center;
	background: gray;
	background:#d9dadb;
	background:#fff;
	padding:5px;
	margin-left:auto;
	margin-right:auto;
	border-radius: 10px 10px 10px 10px;
	-moz-border-radius: 10px 10px 10px 10px;
	-webkit-border-radius: 10px 10px 10px 10px;
	border: 0px solid #000000;
	box-shadow:  0 0 1em gray;
	overflow:auto;
}
#cuerpoppal table{
	max-width:100%;
	width:100%;
	margin:auto;
	
}

#cuerpoppal .calendario{
	
	width:300px;
	margin:auto;
	
}


#wespera{
	/*display:inline;*/
	position:absolute;
	z-index:1;
	/*background-image:url("./img/logofcq.jpg");
	background-repeat: no-repeat;
	background-position: center; /*17px 2px;*/
	background-color:#278dbc;
	opacity:0.5;
	/*min-width:300px;*/
	max-width: 99%;
	max-height:100%;
	width:100%;
	height:100%;
	margin:auto;
	text-align:center;
}
#wespera img{
	display:block;
	margin:auto;
	margin-top:200px;
}

@media screen and (max-width: 800px) {
				#cuerpoppal {
					width:100%;
				}
				
			}



#navegacion {
	width:100%;
    display: flex;
    justify-content:flex-end; /*center;*/
    flex-wrap: wrap;
	align-items: center;
	background:var(--color-secundario); /*orange;*/
	border-bottom: 2px  solid var(--color-secundario);
	border-right: 2px solid  var(--color-primario);
}

#navegacion #btn_opcion{
	
	margin-left:5px;
	margin-right:5px;
	vertical-align:middle;
}
#navegacion #btn_menu{
	display:none;
}
#navegacion h1{
	float:left;

}
/* pantalla chica */
@media (max-width:800px) { 
    #navegacion {
        /*flex-direction: column;*/
		justify-content:flex-end;

		right:0;
		
		
    }

	#navegacion #btn_opcion{
		display:block;
		/*background: silver;*/
		/*width: 90%;
		height: 50px;*/
		text-align:right;
		margin-right:0px;
		padding-right:0px;
		margin-left:0px;
		margin-right:0px;
		
	}

    #navegacion #btn_menu{
		display:block;
		width:100%;
		text-align:center;
		
	}
    #navegacion #btn_nomenu{
		display:block;
		width:90%;
		text-align:center;
		
	}
    
}

@media print {

  /* Se aplicará la siguiente regla CSS */
  #navegacion #btn_opcion{
    display: none;
  }

}
/*
@media (min-width:1024px) { 
    #banner  {
        margin-top: -200px;
    }
}*/

.modal-contenido{
  background-color: var(--color-principal);
  width:300px;
  padding: 20px 30px;
  margin: 20% auto;
  position: relative;
}
.modal-contenido a{
float:right;
color:white;
font-size:18px;
text-decoration:none;
}

.modal-contenido p{
color:white;
font-size:14px;
padding:20px;

}
.modal{
  background-color: rgba(0,0,0,.8);
  position:fixed;
  top:0;
  right:0;
  bottom:0;
  left:0;
  opacity:0;
  pointer-events:none;
}
#showModal{
	display:none;
}
#miModal:target{
  opacity:1;
  pointer-events:auto;
}

@media (max-width:800px) { 
    .modal {
        top:60px;
    }
}
#galeria .contenedor{
    display: flex;
    justify-content: space-around; /*center;*/
    flex-wrap: wrap;
	align-items: center;
	align-items: stretch;
	
}

#galeria #cuadro {
    margin: 15px;
	background-color: var(--color-gris-claro);
	padding-top: 5px;
	padding-bottom: 5px;
	padding-left:5px;
	padding-right:5px;
	border-bottom: 2px solid var(--color-gris-oscuro);
	border-right: 2px solid var(--color-gris-oscuro);
}
#galeria img{
			max-height: 3cm;
			height:100%;
			width:auto;
			padding-top:5px;
}

#galeria h1{
text-align:left;
width:100%;
padding:5px;
color: var(--color-principal);
font-size:14px;
}

/*  ******************************************** */
/*  CSS para dividir la pantalla en dos columnas */
/*  **********************************************/
.contenedordoble {
	margin-top:5px;
	background-color:#ccc;
	width:100%; /* UNI 90% */
	/*max-width:1024px;*/
	margin:auto;
 
	/* Flexbox */
	display:flex;
	flex-flow: row wrap;
}

.c_izquierda {
    margin-top:50px; 
	background:#f2f2f2; 
	background-color:var(--color-principal);
	padding:20px;
	/*FLEX*/
	/*flex: 1 1 30%;
	flex: 0;*/
	flex:0 0 100%;
 
	display: flex;
	flex-wrap:wrap;
	flex-direction:column;
	justify-content:flex-start;
}

.c_izquierda img {
    width: 100%;
    height:auto;
	display:block;
	margin: auto;
}
.c_izquierda .widget {
	background: #d35400; /*naranja */
	height:150px;
	margin:10px;
}
.c_izquierda article p{
	 font-family: 'Open Sans', sans-serif;
	 font-size: 12px;
	 text-align:center;
}

.c_derecha {
	margin-top:50px;
	background-color: var(--color-gris-claro); /* #ccc; /*yellow; /*#e67e22;*/
	padding:20px;
	/*FLEX*/
	/*flex:1 1 70%;
	flex: 0;*/
	flex:0 0 100%;
 
	display: flex;
	flex-wrap:wrap;
	flex-direction:column;
	justify-content:flex-start;
}

    /*  PARA PC */
	@media screen and (min-width: 480px) {
		.contenedordoble {
			flex-direction:column nowrap;
			margin-top:5px;
		}
	 
		 
		.c_izquierda {
			width:30%;
			flex-direction:row;
			flex:0;
			flex:1 1 30%;
			margin-top:0px;
			background-color:var(--color-secundario);
		}
	 
		.c_izquierda .widget {
			flex-grow:1;
		}
		.c_izquierda .evento {
			flex-grow:1;
		}
		.c_izquierda .detalle {
			flex-grow:1;
		}
		.c_derecha {
			width:70%;
			flex-direction:row;
			/*flex:0;*/
			flex:1 1 70%;
			margin-top:0px;
			background-color: var(--color-gris-claro); /*var(--color-secundario);*/
		}
	}


/* ------------------------------------------- */
/* Estilos para formularios medianos o pequeños*/
/* ------------------------------------------- */

.for_mediano {
  border-radius: 5px;
  background-color: #f2f2f2;
  padding: 10px;
}
	
	.for_mediano >input[type="text"]input[type="number"],input[type="password"],input[type="date"], select, textarea{
	  width: 100%;
	  padding: 5px;
	  border: 1px solid #ccc;
	  border-radius: 4px;
	  box-sizing: border-box;
	  
	}

	
	.for_mediano label {
	  padding: 5px 5px 5px 0;
	  display: inline-block;
	  font-size:12px;

	}

	.for_mediano input[type="text"]:disabled {
	  background: var(--color-gris-claro);
	  color: var(--color-principal);
	  font-weight:bold;
	}


	.for_mediano fieldset{
		 padding:5px;	
	}

	
	.for_mediano input[type=submite] {
	  background-color: #4CAF50;
	  color: white;
	  padding: 12px 20px;
	  border: none;
	  border-radius: 4px;
	  cursor: pointer;
	  float: right;
	}
	.for_mediano #enviar{
		background-color: var(--color-boton);
		color:white;
		border: none;
	}

	.for_mediano #titulo{
		margin:0px;
		background-color: var(--color-principal);
		font-size:14px;
		width:100%;
		padding:5px;
		color:white;
		text-align:left;
		margin-bottom:5px;
	}

	.for_mediano .atributo {
	  float: left;
	  width: 25%;
	  margin-top: 6px;
	}

	
	.for_mediano .valor {
	  float: left;
	  width: 75%;
	  margin-top: 6px;
	}

	
	.for_mediano .opciones {
	  float: left;
	  width: 45%;
	  text-align:center;
	  
	}

	.for_mediano .leyenda {
	  background: rgb(0,0,0,.1);
	  width: 100%;
	  padding:5px;
	  font-size:12px;
	  margin-top:10px;
	  
	}
	.for_mediano .legenda img{
		float:left;
	}

	
	.for_mediano .row:after {
	  content: "";
	  display: table;
	  clear: both;
	}


.contenedor .for_mediano{
	width:100%;
}
.contenedor .for_mediano .valor{
	width:30%;
}

.for_mediano#unalinea > label{
	width: 29%;
	text-align:right;
}
.for_mediano#unalinea > input,select{
	width:70%;
	border-bottom: solid 1px var(--color-readonly-bottom);
}

.for_mediano#unalinea input:read-only{
	background-color: var(--color-readonly);
}

@media screen and (max-width: 600px) {
	.for_mediano#unalinea label{
		width: 100%;
		text-align:left;
	}
	.for_mediano#unalinea input,select{
		width:100%;
		
	}
	
}
/*Estilos para mostrar los horarios tildados*/
.grid_semana{
	display:grid;
	grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
} 
.grid_jornada{
	display:grid;
	grid-template-columns: 4fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
}

.semana_encab{
	background-color: var(--color-principal);
	color:whitesmoke;
	font-size: small;
	text-align: center;
	border: 1px solid  var(--color-principal);
}
.semana_horario{
	text-align: center;
	font-size: medium;
	color:var(--color-positivo);
	background-color:var(--color-gris);
	border: 1px solid var(--color-principal);
}
.semana_activo{
	text-align: center;
	font-size: medium;
	color:var(--color-positivo);
	background-color:var(--color-gris);
	border: 1px solid var(--color-principal);
}
.semana_libre{
	text-align: center;
	font-size: medium;
	background-color:var(--color-principal); /*white;*/
	border: 1px solid var(--color-principal);
}
.grid_jornadaObj{
	display:grid;
	grid-template-columns: 4fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
}
.grid_obj_activo{
	text-align: center;
	font-size: medium;
	font-weight: bold;
	padding:5px;
	color:lime; /*var(--color-positivo);*/
	background-color:var(--color-gris-oscuro);
	border: 2px solid var(--color-principal);
}
.grid_obj_libre{
	text-align: center;
	font-size: small;
	padding:5px;
	color:var(--color-gris-medio);
	background-color:var(--color-gris-oscuro); /*white;*/
	border: 2px solid var(--color-principal);
}
.grid_obj_horario{
	text-align: center;
	font-size: medium;
	padding:5px;
	color:white; /*var(--gris-claro);*/
	background-color:var(--color-principal);
	border: 1px solid var(--color-principal);
}
.grid_doble {
	display: grid;
	/*grid-template-rows: 100px 100px;*/
	grid-template-columns: 1fr 1fr ;
	grid-gap: 5px;
	background-color: var(--color-gris-claro);
}
.grid_triple {
	display: grid;
	/*grid-template-rows: 100px 100px;*/
	grid-template-columns: 1fr 1fr 1fr;
	grid-gap: 5px;
	background-color: var(--color-gris-claro);
}

.grid_encabezado{
	text-align: center;
	font-size: large;
	padding:5px;
	color:var(--color-gris);
	background-color:var(--color-grid-encabezado-fondo); /*white;*/
	border: 2px solid var(--color-principal);
}
@media (max-width:580px) { 

	.grid_doble {
		display: flex;
		flex-wrap: wrap;
		flex-direction: column;
	}
	.grid_triple {
		display: flex;
		flex-wrap: wrap;
		flex-direction: column;
	}
}
/* Estilos para la oferta de EQUIPOS */
#oferta {
	/*
    background:#FEFEFE;
	background-image: url(../img/almanaque3.jpg);
	background-position: center center;
	background-repeat: no-repeat; 
	background-attachment: fixed;
	background-size: cover;
	*/
}


#oferta h3, h4 {
    text-align: center;
	max-width: 95%; /*280px */
}

#oferta h2 {
    /*text-align: center;
	max-width: 280px; /* agregado pari*/
	color: var(--color-oscuro);
	font-weight: normal;
	font-size: 12px;
}
#oferta h4 {
   	margin: 25px;  
	color: var(--color-principal);
	font-size: 14px;
	
}

#oferta h3 {
   	margin: 25px;      
}


#oferta h5{
	color: var(--color-principal);
	font-size: 12px;
	padding-top:5px;
}

#oferta h5 span{
	color: white;
    background-color: var(--color-positivo);
    padding: 5px;
    margin: auto;
    border-radius: 50%;
}

#oferta .contenedor{
    display: flex;
    justify-content: center; /*space-between; */
    align-items: stretch; /*space-between; */
	
    flex-wrap: wrap;
	align-content:stretch;
    
}

#oferta article {
    margin: 15px;
	background-color: var(--color-gris); /*#dfdfdf;*/
	padding-top: 5px;
	padding-bottom: 5px;
	padding-left:5px;
	padding-right:5px;
	width:15%;
	/*width:100%;*/
	border-radius: 10px;
	box-shadow: 1px 1px 2px #222 inset;
	box-shadow: 2px 2px 10px 2px #444;}

#oferta article img {
	max-width: 95%;
	height: auto
	/*
	max-height: 280px;
	max-height: 90%;
	/*height: 100%; Esto sacaba las cosas fueras del div
    width: auto;*/

    
	/*max-height: 150px; /*jorge */
}
/*agregado pari*/
#oferta article h1{
	background-color: var(--color-principal);
	text-align:center;
	color:white;
	padding:10px;
	width:100%;
}
#oferta h2{
	max-width: 280px;
	max-width: 95%;
    text-align: left;
	font-size: 14px;
	line-height:150%;
}


article .franjas{
    display: flex;
    justify-content: center; /*space-between; */
    align-items: stretch; /*space-between; */
	
    flex-wrap: wrap;
	align-content:stretch;
    
}
#oferta article #franja{
    background:var(--color-gris-claro);
	color: var(--color-secundario); /*orange;*/
	width:50%;
	padding:10px;
	border:1px solid silver;
}

#oferta #franja h1{
	background-color: var(--color-secundario);
	color:silver;
	border:1px solid silver;

}
#oferta #franja h1 span{
	color:white;
	background-color: var(--color-positivo);
	padding:5px;
	margin:auto;
	border-radius:50%;

}
#oferta #franja ul{
	
	/*list-style-image: url("../img/agent.png");*/
	text-align:left;
	

}
#oferta #franja li{
	list-style-position:inside;
	/*list-style-type: circle;
	list-style-image: url("../img/tilde.png");*/
	font-size:14px;
	cursor:pointer;

}

#oferta #franja li.ocupada{
	
	list-style-image: url("../img/tilde.png");
	

}
#oferta #franja li:hover{
	pointer:hand;
}
#oferta #franja .ocupacion{
	width:100%;
}

@media (max-width:680px) {
    
    #oferta .fcontenedor{
	width:100%;
	}
	#oferta article{
	width:90%;
	margin:1px;}
	#oferta #franja{
		width:99%;

	}
	#oferta .contenedor #article{
		width:100%;
	}
	#oferta article #franja{
	width:99%;
	padding-left:5px;
	padding-right:5px;
	}
}

.gtable {
	background-color: whitesmoke;
}

.grow {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
}

.grow:hover {
	background-color: crimson;
}

.grow:nth-child(even) {
	background-color: #dfdfdf;
}

.grow:nth-child(even):hover {
	background-color: crimson;
}

.gtitle {
	display: flex;
	justify-content: center;
	background-color: #dfdfdf;
}

.gheader .grow {
	padding: 10px;
	background-color: cornflowerblue;
}

.gheader .grow div {
	display: flex;
	justify-content: center;
	font-weight: 600;
	color: white;
}

.gbody .grow {
	padding: 10px;
	cursor: pointer;
}

.gbody .grow div {
	display: flex;
	justify-content: center;
}

.gfooter .grow {
	padding: 5px;
	background-color: #777777;
}

.gfooter .grow div {
	display: flex;
	justify-content: center;
	color: white;
}

.goptions {
	display: flex;
	justify-content: space-between;
	padding: 10px;
}

.page-active {
	color: crimson;
}

.table-responsive {
    min-height: .01%;
    overflow-x: auto;
}

@media screen and (max-width: 767px) {
    .table-responsive {
        width: 100%;
        margin-bottom: 15px;
        overflow-y: hidden;
        -ms-overflow-style: -ms-autohiding-scrollbar;
        border: 1px solid rgb(233, 7, 7);
    }
    .table-responsive > .rtable {
        margin-bottom: 0;
		border:1;
    }
    .table-responsive > .rtable > thead > tr > th,
    .table-responsive > .rtable > tbody > tr > th,
    .table-responsive > .rtable > tfoot > tr > th,
    .table-responsive > .rtable > thead > tr > td,
    .table-responsive > .rtable > tbody > tr > td,
    .table-responsive > .rtable > tfoot > tr > td {
        white-space: nowrap;
    }
	
}
@media print {
	.gheader{display:none;}
    .grow {
		display:inline-block;
		/*
        display: grid;
  	grid-template-columns: repeat(6, 10mm);
	
	  grid-template-columns: repeat(6, 1fr);
  	grid-template-columns: repeat(2, 100mm);
	*/
	}
	.table-responsive {
        width: 100%;
        margin-bottom: 15px;
        overflow-y: hidden;
        -ms-overflow-style: -ms-autohiding-scrollbar;
        border: 1px solid black;
    }
    .table-responsive > .rtable {
        margin-bottom: 0;
		border:1;
    }
	
}