/*@import"forms.css";*/
@import"forms.css";
@import"reset.css";
@import"grid.css";

body {
	font-family: georgia;
	color: #333;
	font-size: 1.2rem;
	line-height: 1.6em; /*interlineado*/
	margin: 0;
}

/*EFECTOS DE LINEAS*/
h1 {
	display: inline-block;
	position: relative;
	font-size: 1.2rem;
	line-height: 1.3em; /*interlineado 1.3*/
	text-align: center;
}

h1::after, h1::before {
	content:'';
position:absolute;
width: 120px;
height: 3px;
background: #db1d1d;
top: 0.6em;
}


h1::before {
	left: -140px;
}

h1::after{
	right: -140px;
}

/*--------------------------------*/
h2 {
	font-size: 1.05rem; /*1.2rem*/
	line-height: 1.3em; /*interlineado 1.3*/
	text-align: center;

}


p {
	font-size: 16px;
	margin-bottom: 1.6em;
	text-align:justify;

}

.main {
	padding-top: 13rem;
}

.contanier {  
	width: 100%;
	max-width: 1200px;
	margin: 0 auto;
}

.header {
	background: #FFF;
	color: #333; /*color de ver menu*/
	padding: 0.5rem 0; /*espacio superior e inferior de la cabecera*/
	text-align:center;
	font-size:16px;
	line-height: 1.6em; /*interlineado*/
	
	
	position: fixed;
	left: 0;
	top: 0;
	right:0;
	z-index:50;
	

}

	.header a {  
	color: white; /*color del texto*/
	text-decoration: none; /*no tenga el subrayado*/
	background: #8B0000; /*color rojo oscuro de los menus*/
	}


.menu-icon {
	display: none;
	color: white; /*color del texto*/
	background: #8B0000; /*color rojo oscuro de los menus*/
}
	
	
.navigation ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

	.navigation ul li {
	display: inline-block; /*texto en linea*/
	}
	
		.navigation ul li a {
		display: block;
		padding: 0.5rem 1rem;
		transition: all 0.4s linear; /**efectos*/
		border-radius: 5px;
		}

			.navigation ul li a:hover {  /*cuando se pasa el cursos cambia de color*/
			background: #B30404;
	
			}
			
.footer {
	background:#090;
	padding: 0.5rem 0;
	text-align:center;
	margin-top: 1rem;
}
			
@media only screen and (max-width: 767px) {
	
	.menu-icon {
		display: block;
		cursor: pointer;
		padding: 0.5rem 1rem;
	}
	
	.navigation {
		width: 100%;
		margin-top: 1rem;
	}
	
		.navigation ul {
			display: none;
		}
	
		.navigation ul.show {
			display: block; /*para ocultar los menus cuando se minimiza la ventana*/
		}
	
	.navigation ul li {
		display: block; /*texto en linea*/
	}
	
		.navigation ul li a {
		display: block;
		padding: 0.5rem 0;
		transition: all 0.4s linear; /**efectos*/
		border-radius: 5px;
		}
		
			.navigation ul li a:hover {  /*cuando se pasa el cursos cambia de color*/
				background:  #B30404;
			}	
	
}

.navigation ul ul{
	position: absolute;
	visibility: hidden;
	
}

.navigation ul li:hover ul{
	display:block;
	visibility: visible;
	
}


 /*TABLA PRINCIPAL*/
 
.table-principal {
border-collapse: separate; 
font-family: georgia;
color: #333;
font-size: 1.2rem;
line-height: 1.6em; /*interlineado*/
margin: 0;
	padding: 0.5rem 0;
	  border-spacing: 15px 10px;
	  width:100%;
}

.table-principal thead tr { 
background-color:#8B0000; 
color: #ffffff; 
text-align: middle;

 }

.table-principal th, .table-principal td {
	padding: 3px 15px;
 }

.table-principal td {
	text-align:justify;
	background-color:#FFF;
		border: solid 1px #CCCCCC;

 }

.table-principal th {
		border: solid 1px  #CCCCCC;

 }
 

/********************** Slider ************************/
.slider-frame {
	width: 1200px;
    height: 426;
	margin:0px auto 0;
	overflow: hidden;
}

.slider-frame ul {
	display: flex;
	padding: 0;
	width: 400%;
	animation: slide 20s infinite alternate ease-in-out;
}

.slider-frame li {
	width: 100%;
	list-style: none;
}

.slider-frame img {
	width: 100%;
}

@keyframes slide {
	0% {margin-left: 0;}
	20% {margin-left: 0;}
	
	25% {margin-left: -100%;}
	45% {margin-left: -100%;}
	
	50% {margin-left: -200%;}
	70% {margin-left: -200%;}
	
	75% {margin-left: -300%;}
	100% {margin-left: -300%;}
}

/********************** Tablas ************************/

/*
	Color fondo: #632432;
	Color header: 246355;
	Color borde: 0F362D;
	Color iluminado: 369681;
*/




.table-costos{
	background-color: white;
	text-align: left;
	border-collapse: collapse;
	width: 100%; /*total del ancho*/
		font-family: georgia;
		color: #333;
		font-size: 16px;
		line-height: 1.6em; /*interlineado*/

}

.table-costos th, .table-costos td{
	padding: 12px;
	width:auto;  /*ocupa el espacio de la letra*/

}

.table-costos thead tr{
	background-color: #bd0202;
	border-bottom: solid 5px #8B0000;
	color: white;
}

.table-costos tr:nth-child(even){
	background-color: #ddd;
}

.table-costos tr:hover td{
	background-color: #e80202;
	color: white;
}



.table-programacion {
border-collapse: separate; 
font-family: georgia;
color: #333;
font-size: 1.2rem;
line-height: 1.6em; /*interlineado*/
margin: 0;
	padding: 0.5rem 0;
	  border-spacing: 15px 10px;
	  width:100%;
}

.table-programacion thead tr { 
background-color:#8B0000; 
color: #ffffff; 
text-align: middle;

 }


/********************** Contactenos ************************/
.col-12 {
	float:left;
	width:400px;
	text-align: center;
	
}

.button {
	display:inline-block;
	font-size:18px;
	line-height:22px;
	color:#fff;
	text-decoration:none;
	background:#CC0000;  /*#CC0000*/
	padding:7px 20px;
	font-family:  georgia;
	text-transform:uppercase; /*LETRA MAYUSCULA*/
	
}	

	.button:hover {
		text-decoration:none;
		background:#3a3e14;
	}
	
.link {
	text-decoration: underline;
	color:#ee623a;
	font-weight:bold;
}
	.link:hover {
	text-decoration: none;
	font-family: georgia;
	color: #009900;
}

a {
	color: #339900;
	text-decoration: none;
	cursor: pointer;
}
	a:hover {
	font-family: georgia;
}

.wrapper{
	overflow: hidden;
	padding-right: 5px;
	margin-top: 10px;
	margin-left: 0px;
	margin-right: 0px;
	margin-bottom: 15px;
}

.col-1 {
	width: 280px;
	margin-right: 10px;
	float:left ;
	margin-bottom: 10px;
	text-align: center;
	margin-left: 85px;
	border: 0px solid #d9d9d9; /*Borde para que no se vea*/
	
}

.table-docente {
border-collapse: separate; 
font-family: georgia;
font-size: 1.2rem;
line-height: 1.6em; /*interlineado*/
margin: 0;
	padding: 0.5rem 0;
	  border-spacing: 15px 10px;
	  width:100%;
	  
	  background:white; 
text-align: center;
	max-width: 1200px;
		border-radius: 5px;


}