body, html{
	font-family: 'Open Sans', sans-serif;
	margin: 0;
	height: 100%;
	width: 100%;

}
div,section,h1,h2,h3,h4{
	margin: 0
}

p{
	font-size: 1.4em;
	line-height: 1.8
}
ul, ul li{
	-webkit-transition: all 0.2s ease-out;
	 -moz-transition: all 0.2s ease-out;
	 -o-transition: all 0.2 s ease-out;
	 -ms-transition: all 0.2s ease-out;
	 transition: all 0.2s ease-out;
}

.nav{
	position: fixed;
	top:0px;
	right: 13px;
	z-index: 1000;
	cursor: pointer;
}
.nav i{
	background: none;
    color: #446cb3;
    font-size: 4em;


}
body.main{
	margin-right: 400px;
}
.background{
	background: white;
    position: fixed;
    height: 2em;
    width: 2em;
    top: 30px;
    right: 23px;
    z-index: -1;
}
.novisible{
	display: none;
}
.menu{
	background: #1d2f52;
	color: #78839b;
	position: fixed;
	font-weight: 300;
	height: 100%;
	width: 350px;
	z-index: 100;
  	margin: 0;
  	padding: 0;
  	text-align:center;
  	text-transform: uppercase;
  	right: -350px;
		-moz-box-shadow: 0px 0px 5px rgba(0,0,0,.7);
		-webkit-box-shadow: 0px 0px 5px rgba(0,0,0,.7);
		box-shadow: 0px 0px 5px rgba(0,0,0,.7);

}
				.menu-ul{
					list-style: none;
					padding-top: 50px;
				}
				.menu-li{
					padding-top: 45px;
					font-size: 1.5em;

				}

				.menu-a{
					color:white;
				}
				.menu-a:hover{
					color:white;
					text-decoration: none
				}
/*** Section Principal***/

#principal{
	background: url("../img/education.jpg") no-repeat;
	background-size: cover;
	margin: 0;
	width: 100%;


}
 	.titulo{
 		text-align: center;
		padding:200px 0;
 	}
 		.titulo h1{
 			font-size: 2.9em;
 			font-weight: bold;
 			text-transform: uppercase;
 		}
 		.titulo h3{
 			font-size: 1.4em;
 			padding-top: 25px
 		}
		.titulo-p{
			font-size: 1.2em;
			line-height: 1.8
		}
				.botones{
		 	list-style: none;
		 	margin:25px 0;
			padding: 0;
		 	text-align: center;

		 }

 .botones-li{
 	cursor:pointer;
 	border-radius: 5px;
 	color: white;
 	display: inline-block;
 	margin: 5px;
 	padding: 12px 25px;
 	text-transform: uppercase;
	-webkit-transition: all 0.2s ease-out;
	-moz-transition: all 0.2s ease-out;
	-o-transition: all 0.2 s ease-out;
	-ms-transition: all 0.2s ease-out;
	transition: all 0.2s ease-out;

 }
             /** COLORES FONDO BOTONES **/
		 	.azul{
		 		background:#446cb3;
		 		box-shadow: inset 0 -2px 0px #345287, 0px 2px 1px rgba(0,0,0,0.2);

		 	}
		 	.azul:hover{
		 		background: #345287;
		 		box-shadow: inset 0 -2px 0px #24395f, 0px 2px 1px rgba(0,0,0,0.2);
		 	}
		 	.verde{
		 		background:#03C9A9 ;
		 		box-shadow: inset 0 -2px 0px #03977f, 0px 2px 1px rgba(0,0,0,0.2);
			}
			.verde:hover{
		 		background: #03937c;
				box-shadow: inset 0 -2px 0px #026051, 0px 2px 1px rgba(0,0,0,0.2);
		 	}
		 	.naranja{
		 		background:#e67e22;
		 		box-shadow: inset 0 -2px 0px #af6019, 0px 2px 1px rgba(0,0,0,0.2);
		 	}
			.naranja:hover{
		 		background: #af6019;
		 		box-shadow: inset 0 -2px 0px #784211, 0px 2px 1px rgba(0,0,0,0.2);
		 	}
			.li-idioma{
				border:1px solid #e67e22;
				color: #e67e22;
			}
			.li-idioma:hover{
				background:#e67e22;
		 		box-shadow: inset 0 -2px 0px #af6019, 0px 2px 1px rgba(0,0,0,0.2);
				color:white;
			}
						.li-idioma a{
							color: inherit;
						}

						.boton-modal{
						color:#03C9A9;
						background: white;
						border: 1px solid #03C9A9;
						margin-bottom: 15px
						}
						.boton-modal:hover,.boton-modal:focus,.boton-modal.in{
							background:#03C9A9 ;
					 		box-shadow: inset 0 -2px 0px #03977f, 0px 2px 1px rgba(0,0,0,0.2);
							color: white
						}
		 	/** FIN COLORES FONDO BOTONES **/
	.estadisticas{
		background-color: #5788df;
		border: 4px solid #446cb3;
		color: white;
	}
		.flecha{
			background:#446cb3;
			border-radius: 100%;
			cursor:pointer;
			height: 50px;
			margin-left: auto;
			margin-right: auto;
			position: absolute;
			margin-top:-25px;
			left: 0;
			right: 0;
			width: 50px;
			-webkit-transition: all 0.2s ease-out;
				 -moz-transition: all 0.2s ease-out;
				 -o-transition: all 0.2 s ease-out;
				 -ms-transition: all 0.2s ease-out;
				 transition: all 0.2s ease-out;
-moz-box-shadow: 0 5px 5px rgba(0,0,0,.4);
-webkit-box-shadow: 0 5px 5px rgba(0,0,0,.4);
box-shadow: 0 5px 5px rgba(0,0,0,.4);
		}
		.flecha:hover{
			background: #345287
		}
			.flecha i{
				position: absolute;
				font-size: 20px;
				top: 15px;
				left: 0;
				right: 0;
				margin: 0 0;
				text-align: center;
			}

		.estadisticas-ul{
			list-style: none;
			text-align: center;
		}
			.estadisticas-li{
				display: inline-block;
			    font-size: 2em;
			    font-weight: 300;
			    width:30%;
			}
			.estadisticas-li i{
				font-size: 2.5em;
			}
				.estadisticas-div{
					display: inline;
					float: left;
					margin: 0 10px 0 0;
					padding: 25px 0;
					vertical-align: middle;
				}

/* CURSOS DISTANCIA */
.foto-idioma{
		background: url(../img/educacion/idiomas.png) center;
		border: 2px solid  #e67e22;
		background-size: contain;
}

.foto-distancia{
	background: url(../img/educacion/curso-distancia.png) center;
	background-size: contain;
	border: 2px solid #03C9A9;
}
.nada{
	background: #222;
}
.caja-h3.curso-distancia-caja{
	padding: 25px 0;
}
.categoria{
	text-align: left;
	color: #03C9A9
}
.bold{
	font-weight: bold;
}
.margin-top{
	margin-top: 20px;
}
/* CURSOS */
.derecha{
	float: right;
}
.derecha,.izquierda{
	padding: 0;
}
.portada{
	margin: 50px;
}
@media (max-width: 990px) {
.titulo-h2{
	margin-top: 25px;
	text-align: center

}
}
.items{
	padding: 20px 0;
	text-align: center;
}
				.ninos{
					background: url("../img/educacion/ninos.jpg")
				}
				.adolescente{
					background: url("../img/educacion/teen.jpg")
				}
				.adultos{
					background: url("../img/educacion/adultos.jpg")
				}
				.abuelos{
					background: url("../img/educacion/abuelos2.jpg")
				}
				.foto-curso{
					background: url(../img/educacion/cursos.png) center;
					background-size: contain;
					border: 2px solid #446cb3;
				}


				.caja{
	background-size: cover;
	margin: 20px auto;
	width: 100%;
	cursor: pointer;

}

.caja-h3{
	color: white;
	padding: 50px 0;
	text-align: center;
}
.categorias{
	list-style: none;
	margin: auto;
	padding: 0;
	text-align: center;
}
.categorias-li{
	padding: 10px;
	display: inline-block;
	border: 1px solid #03C9A9;
	border-radius: 5px;
	margin: 10px;
	cursor: pointer;
	}
.categorias-li:hover,.categorias-li.active{
	background: #03C9A9;
	color: white
}
.Universidades,.Terciarios,.Bachillerato,.Cursos{
	list-style: none;
	display: none;
	text-align: center;
}
.cat-li{
	background: #03C9A9;
	padding: 10px;
	color:white;
	cursor: pointer;
	margin: 5px auto;
	width: 100px;
		border-radius: 5px;
}
.Universidades.active,.Terciarios.active,.Bachillerato.active,.Cursos.active{
	display: block;
}
.foto{
	border-radius: 100%;
	margin: auto;
	height: 200px;
	width: 200px;
}
						/* DENTRO MODAL BOOTSTRAP */
					.modal-body{
						background: #e9eaed
					}
						.modal-ul{
							list-style: none;
							text-align: left;

						}
						.modal-li i{
							margin: 0 5px 0 0;
							font-size: 1.5em;
						}
						.cursos .modal-li{
							color:#446cb3
						}
						.modal-li{
							display: inline-block;
							padding: 5px 10px;
							cursor: pointer;
							font-size: 1.3em;
							text-transform: capitalize;
						}
								.modal-li.active{
									border-bottom: none;
									border-left: 1px solid #e5e5e5;
									border-right: 1px solid #e5e5e5;
									color: white;
									background: #446cb3;
								}
								.mix {
									opacity: 0;
									display: none;
									vertical-align: top;
									width: 32%;
									min-width: 200px;
									}
									.dato-curso{
										border: 1px solid;
										border-color: #e5e6e9 #dfe0e4 #d0d1d5;
										border-radius: 3px;
										background: white;
										margin: 5px;
										padding: 5px;
										width: 95%;

									-webkit-transition: all 0.2s ease-out;
										 -moz-transition: all 0.2s ease-out;
										 -o-transition: all 0.2 s ease-out;
										 -ms-transition: all 0.2s ease-out;
										 transition: all 0.2s ease-out;
									}
									.dato-curso:hover{
										-moz-box-shadow: 0 0px 5px rgba(0,0,0,.3);
									-webkit-box-shadow: 0 0px 5px rgba(0,0,0,.3);
									box-shadow: 0 0px 5px rgba(0,0,0,.3);
									}
									.caja-curso{
										text-align: left
									}
											.caja-curso-h4{
												font-size: 1.2em;;
												line-height: 1.5;
												margin-top: 10px;
											}
											.name{
												border-bottom: 1px solid #e5e5e5
											}
/** BANNER ABUELOS **/

	#banner-abuelos{
		background: url(../img/educacion/abuelos.jpg) no-repeat;
		background-size: cover;
		background-attachment: fixed;
	}
	#banner-abuelos h3{
		color: white;
		padding: 150px 0;
		font-size: 3em;
		font-weight: bold;
		text-align: center;
		text-transform: uppercase;
		text-shadow: 0 3px 11px black;
	}


	/** banner Idiomas **/
	 #banner-idiomas{
	 	background: url(../img/educacion/idiomas.jpg) no-repeat;
	 	background-size: cover;
	 	border-bottom: 5px solid #e67e22;
	 	height: 300px;
	 }

/**DISTANCIA **/



.terminacion{
	background: url(../img/educacion/curs.png) no-repeat;
}
.terminacion2{
	background: url(../img/educacion/curs2.png) no-repeat;
}
.terminacion{
	background-size: contain;
	height: 147px;
	width: 100%;
	position: absolute;
}
/** INSTITUCIONES **/

.instituciones{
	background: white;
	color:#222;
	text-align: center;
}
.instituciones hr{
	border: 0;
	background: #446cb3;
	height: 5px;
	text-align: center;
	width: 150px;
}
.instituciones-h3{
	padding-top: 100px;
	text-transform: uppercase;
	font-size: 2em;
}

	.logos-ul{
		list-style: none;
		padding: 0

	}


			.isiv{
				background:url(../img/educacion/isiv.png);

			}
			.ied{
				background:url(../img/educacion/ied.png);
			}
			.ifes{
				background:url(../img/educacion/ifes.png);
			}
			.fude{
				background:url(../img/educacion/fude.png);
			}
			.issd{
				background:url(../img/educacion/issd.png);
			}
			.belgrano{
				background:url(../img/educacion/belgrano.png);
			}
			.salta{

				background:url(../img/educacion/salta.png);
			}
			.noun{
				background:url(../img/educacion/noun.png);
			}
			.logos-li{
				background-repeat: no-repeat;
				background-size:contain;
				background-position:center;
				display: inline-block;
				height: 150px;
				width: 250px;
				margin: 20px;
				padding: 0
			}
/** CONTACTO **/

#contacto{
	background-color: #2b4678;
	color: white;
	padding: 20px 0;
	text-align: center;
}


	.logo-copetel{
		background: url(../img/logo3.png) no-repeat center;
		background-size: contain;
		height:150px;
		margin: 45px auto;
		width: 132px;
		text-align: center;
	}
	.datos{
		margin: 45px auto;
		text-align: left;
		text-transform: uppercase;
	}

		.datos h3{
			padding: 20px 0;
			font-weight: bold;

		}
		.datos h5{
			margin-top: 20px;
			line-height: 0px;
			padding-top: 0
		}



	form{
		margin: 0px auto;
		width: 100%;
	}
	form input{
		background: none;
		border: 2px solid white;
		border-radius: 5px;
		display: inline-block;
		padding: 5px 10px;
		width: 47%;
		margin: 5px 5px;
		min-width: 200px;
		-webkit-transition: all 0.2s ease-out;
		-moz-transition: all 0.2s ease-out;
		-o-transition: all 0.2 s ease-out;
		-ms-transition: all 0.2s ease-out;
		transition: all 0.2s ease-out;

	}
	form input:hover, form input:focus,form textarea:hover, form textarea:focus{
		background: rgba(255,255,255,0.2)
	}
	form textarea{
		background: none;
		border: 2px solid white;
		border-radius: 5px;
		height: 150px;
		margin: 10px auto;
		width: 97%;

		-webkit-transition: all 0.2s ease-out;
		-moz-transition: all 0.2s ease-out;
		-o-transition: all 0.2 s ease-out;
		-ms-transition: all 0.2s ease-out;
		transition: all 0.2s ease-out;
	}
	form button{
		background: none;
		border-radius: 5px;
		border: 2px solid white;
		display: block;
		margin: auto;
		padding:5px 10px;

	}
	form button:hover{
		background: rgba(255,255,255,0.2)
	}
	.error{
		color:#ef9a9a;
		display: none;
	}
	.sendok{
		color: #66bb6a;
		display: none;
	}
/** FOOTER **/

.footer{
	background: #1d2f52
}
.sitemap{
	text-align: left;
	color: white;
	text-transform: uppercase;
	padding:40px 0;
}
.sitemap-h5{
	border-bottom: 1px solid #777;
	color:#eee;
	padding:5px;
}
.sitemap-ul{
	list-style: none;
	padding:5px  0;
	font-size: .9em
}
.sitemap-li{
	cursor: pointer;
	padding: 5px;
}
.sitemap-li:hover{
	font-weight: bold;
}
.sitemap-ul-contact{
	list-style: none;
	padding: 5px 0;
}
.sitemap-li-contact{
	padding: 5px;
	text-transform:lowercase;
}
.sitemap-li-contact i{
	font-size: 1.5em;
padding-right: 15px;
}

.footer p{
	color:white;
	margin-top: 0;
	padding: 0
}

.responsive{
	display: none;
}

.copy{
	background: #222;
	color: #eee;
	padding: 15px;
	width: 100%;
}
.copy-ul{
	padding: 0;
	margin: 0;
	list-style: none;
}
.copy-li{
	display: inline-block;
}
/** MEDIA QUERYS **/

@media (max-width: 573px) {
.botones {
	padding: 0;
	margin: 30px auto;
	width: 250px;
}
.botones li{
	display: block;
}
}



@media (max-height: 850px) {
	#menu ul li{
		font-size: 1em;
	}
}