@charset "utf-8";
/* CSS Document */

.container-calendar { /*----------------------contenedor área contenido----------------------*/
	padding-right: 15px;
	padding-left: 15px;
	margin-top: 30px;
	margin-right: auto;
 	margin-left: auto;
	padding-bottom: 50px;
	width: 60%;
	height: 1350px;
}
.contenedor {
	width: 110%;
	height: 280px;
	position: relative;
	}
.card {
	width: 100%;
	height: 100%;
	position: absolute;
	}

.contentfront { /*caja con datos y calendario */
	width: 100%;
	height: 40px;
	float: left;
	}
		
.contentMes { /*caja con datos y calendario */
	width: 100%;
	height: 100%;
	float: left;
	}

	.contentFebrero { /* separación entre cajas de meses*/
	margin-top:0px;
	}

	.contentMarzo { /* separación entre cajas de meses*/
	margin-top:-95px;
	}

	.contentAbril { /* separación entre cajas de meses*/
	margin-top:-95px;
	}

	.contentMayo { /* separación entre cajas de meses*/
	margin-top:10px;
	}

	.contentJunio { /* separación entre cajas de meses*/
	margin-top: -120px;
	}

	.contentJulio { /* separación entre cajas de meses*/
	margin-top:-95px;
	}

	.contentAgosto { /* separación entre cajas de meses*/
	margin-top:-120px;
	}

	.contentSep { /* separación entre cajas de meses*/
	margin-top:-120px;
	}

	.contentOct { /* separación entre cajas de meses*/
	margin-top:-90px;
	}

	.contentNov { /* separación entre cajas de meses*/
	margin-top:-100px;
	}

.mes { /*caja nombre mes */
	font-family: "Open Sans", sans-serif;
	font-size: 1.2em;
	letter-spacing: 0.1em;
	color: #808080;
	font-weight: 200;
	text-transform: uppercase;
	width: 40px;
	height: 50%;
	float: left;
	background-color: #F5F5F5;
	text-align: center;
	padding: 0px 0px 0px 4px;
	box-sizing: border-box;
	writing-mode: vertical-lr;
    transform: rotate(180deg);
	margin-top: 55px;
	}
	.mescont {
		height: 100%;
	}

		.febrero {
			margin-top:30px;
			height: 55%;
		}
		.marzo {
			margin-top:30px;
			height: 55%;
		}
		.abril {
			margin-top:20px;
			height: 50%;
		}
		.mayo {
			margin-top:20px;
			height: 50%;
		}
		.junio {
			margin-top:20px;
			height: 60%;
		}
		.julio {
			margin-top:20px;
			height: 50%;
		}

		.agosto {
			margin-top:20px;
			height: 50%;
		}

		.sep {
			margin-top:20px;
			height: 60%;
		}

		.oct {
			margin-top:20px;
			height: 60%;
		}

		.nov {
			margin-top:30px;
			height: 55%;
		}

.date { /*caja contenedor detalles */
	height: 100%;
	width: 50%;
	float: left;
	text-align: right;
	padding: 10px 30px;
	box-sizing: border-box;
	}
		.datejunio {
		margin-top: -30px;
		}

	.horario {
		font-family: "Open Sans", sans-serif;
		font-size: 0.7em;
		color: #808080;
		text-align: left;
		font-style: italic;
		padding: 22px 0px 10px 0px;
		border-bottom: 1px solid #E6E6E6;
		width: 100%;
		float: left;
		}
.horario span {
	padding-left: 25%;
}
	.curso { /*Nombre cursos*/
		font-size: 0.8em;
		color: #808080;
		font-family: "Open Sans", sans-serif;
		font-weight: bold;
		text-align: left;
		text-transform: uppercase;
		float: left;
		border-bottom: 1px solid #E6E6E6;
		width: 100%;
		height: 45px;
		padding: 22px 0px 0px 0px;
		background-color: #fff;
		}

	.Regular {
		width: 1.7%;
		height: 30%;
		border-radius: 6px 0px 0px 6px;
		margin: 5px 0px 0px 0px;
		float: left;
		}
			.R1 {background-color: #389AE0;} /*Recuadro días curso regular*/
			.R2 {background-color: #336699;}
			.R3 {background-color: #5CC6D0;}
			.R4 {background-color: #4169E1;}
			.R5 {background-color: #83C2DE;}

	.Flex {
		width: 1.7%;
		height: 30%;
		border-radius: 6px 0px 0px 6px;
		margin: 5px 0px 0px 25px;
		float: left;
		}
			.F1 {background-color: #33CC66;} /*Recuadro días curso flex*/
			.F2 {background-color: #2E8B57;}
			.F3 {background-color: #33CC99;}
			.F4 {background-color: #6B8E23;}
			.F5 {background-color: #006400;}
		
	.datos {
		font-size: 1em;
		color: #232227;
		font-family: "Open Sans", sans-serif;
		font-weight: 400;
		text-align: left;
		width: 45%;
		height: 30%;
  		background-color: #F7F7F7;
		margin: 5px 0px 0px 0px;
		float: left;
		 /* CENTRADO VERTICAL PADRE */
  		display: table;
		border-radius: 0px 0px 0px 0px;
		}
			.backgroundFlex {
			background-image: url("images/tl_flex.svg"); 
			background-position: right bottom;
			background-repeat: no-repeat;
			}
			.datos p {
			padding: 0px 0px 0px 10px;
			margin: 0px 0px 0px 10px;
			/* CENTRADO VERTICAL HIJO */
  			display: table-cell;
  			vertical-align: middle;
			}
		
.month { /*contenedor mes*/
  height: 100%;
  width: 40%; /*se cambió valor de 270px a 40%*/
  float: left;
  padding: 20px 30px;
  box-sizing: border-box;
}
.month table { /*caja mes*/
  width: 100%;
}
.orangeTr { /*caja nombre días*/
	font-family: "Open Sans", sans-serif;
	font-size: 1em;
	color: #666;
	border-bottom: 1px solid #E6E6E6;
}
.whiteTr { /*caja días*/
	font-family: "Open Sans", sans-serif;
	font-size: 0.9em;	
  	font-weight: normal;
  	color: #999;
	}
	.dR1 {border: 2px solid #389AE0;}
	.dR2 {border: 2px solid #336699;}
	.dR3 {border: 2px solid #5CC6D0;}
	.dR4 {border: 2px solid #4169E1;}
	.dR5 {border: 2px solid #83C2DE;}
	.dF1 {border: 2px solid #33CC66;}
	.dF2 {border: 2px solid #2E8B57;}
	.dF3 {border: 2px solid #33CC99;}
	.dF4 {border: 2px solid #6B8E23;}
	.dF5 {border: 2px solid #006400;}


.IrFlex a {
  	color: #2ca44b;
	font-weight: bold;
	text-decoration: underline;
 	transition: 0.2s ease;
}

.IrFlex a:link {
  	color: #2ca44b;
	font-weight: bold;
 	transition: 0.2s ease;
}

.IrFlex a:hover {
  	color: #23527c;
	text-decoration: underline;
  	transition: 0.3s ease;
}

a {
	outline: none;
	text-decoration: none;
	color: #808080;
	}

.tlCurso a:link {
  color: #808080;
  transition: 0.2s ease;
}
		
.tlCurso a:hover {
  color: #23527c;
  transition: 0.3s ease;
}

.month tr {
  	height: 35px; /*alto celdas días*/
	font-weight: bolder;
}
.month th {
	text-align: center;
	font-weight: normal;
}

@media(max-width:1152px) { /*iPad*/
	.datos {font-size: 0.7em;} /*tamaño de fuente datos cursos */
	.Flex {margin: 5px 0px 0px 15px;} /* separación entre cajas de cursos regular y flex */
	
	.horario {font-size: 0.7em;padding: 22px 0px 10px 0px;} /*nota horarios cursos */
	.horarioFlex {margin-top: -15px;} /*Horarios cursos nota*/
	.horario span {padding-left: 5%;}
	
	.datejunio {margin-top: -20px;}
}

@media(max-width:800px) { /*Celular*/
	.container-calendar { /*contenedor área contenido*/
	padding-right: 0px;
	padding-left: 5px; /*aquí se cambió*/
	margin-top: 20px;
	padding-bottom: 50px;
	width: 100%;
	height: 980px;
	}
	.contenedor {width: 100%;} /*caja completa, se cambió valor de 110% a 100%*/
	
	.date {padding: 0px 0px 0px 0px;}/*caja contenedor detalles */
		.datejunio {margin-top: -10px;}
	
	.contentMarzo { margin-top:-125px;}/* separación entre cajas de meses*/
	.contentAbril { margin-top:-135px;}/* separación entre cajas de meses*/
	.contentMayo { margin-top:0px;}/* separación entre cajas de meses*/
	.contentJunio { margin-top: -150px;}/* separación entre cajas de meses*/
	.contentJulio { margin-top: -150px;}/* separación entre cajas de meses*/
	.contentAgosto { margin-top: -150px;}/* separación entre cajas de meses*/
	.contentSep { margin-top: -150px;}/* separación entre cajas de meses*/
	.contentOct { margin-top: -150px;}/* separación entre cajas de meses*/
	.contentNov { margin-top: -150px;}/* separación entre cajas de meses*/
	
	
	.mes { /*nombre meses */
	width: 20px; /*se redujo tamaño*/
	font-size: 0.8em; /*se cambió tamaño*/
	letter-spacing: 0em; /*se quitó*/
	padding: 0px; /*se quitó*/
	height: 40%;
	margin-top: 25px;
	}
		.marzo {margin-top:0px;height: 45%;}
		.abril {margin-top:0px;height: 40%;}
		.mayo {margin-top:0px;height: 40%;}
		.junio {margin-top:0px;height: 45%;}
	
	
	.month { padding: 0px 15px 0px 15px;}/*separación contenedor mes*/
	.month tr {height: 25px;}/*alto celdas días*/
	
	.orangeTr { font-size: 0.8em;}/*Nombre días-semana*/
	.whiteTr { font-size: 0.7em;}/*Nombre días-numeros*/
	
	.horarioFlex {margin-top: -30px;} /*Horarios cursos nota*/
	.horario span {padding-left: 5%;}
	.horario {font-size: 0.5em;}
	
	.curso {padding: 10px 0px 0px 0px; height: 30px;} /*Nombre cursos*/
	
	.datos {
	font-size: 0.65em;
	width: 44.5%;
	height: 23%;
	margin: 5px 0px 0px 0px;
	}
	.datos p {padding: 0px 5px 0px 5px;margin: 0px 0px 0px 0px;}
	.Regular {height: 23%;}
	.Flex {height: 23%; margin: 5px 0px 0px 10px;}/*separación curso regular y curso Flex */
}