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





/* PAGINA ABAJO DEL SLIDER ~ BIENVENIDOS ~ Y COLOR DE FONDO OTRAS PAGINAS */
body
{
	background: rgb(150, 150, 150);
	color: #000000;
}



/*********************************
1. UBICACION TITULOS OTRAS PAGINAS
*********************************/
*
{
	margin: 0;
	padding: 0;
}



/* 1.1 MARGEN ARRIBA DEL CONTENEDOR DE LOS TITULOS DE OTRAS PAGINAS */

ul
{
	margin-bottom: 0px;
}



/* 1.2 CAMBIO DE COLOR LETRAS TITULOS OTRAS PAGINAS */
a:link
{
	text-decoration: none;
}

/*********************************
1.3 CONTENEDOR TITULOS OTRAS PAGINAS
*********************************/

.header{
	display: flex;
	position: fixed;
	top: 25px;
	left: 670px;
	-webkit-transform: translateX(-50%);
	-moz-transform: translateX(-50%);
	-ms-transform: translateX(-50%);
	-o-transform: translateX(-50%);
	transform: translateX(-50%);
	height: 104px;
	width: 500%;
	background: #000000;
	z-index: 100;
	-webkit-transition: all 200ms ease;
	-moz-transition: all 200ms ease;
	-ms-transition: all 200ms ease;
	-o-transition: all 200ms ease;
	transition: all 200ms ease;
}



/*********************************
1.4 LOGOS EN EL CONTENEDOR
*********************************/

.logo_container
{
	display: inline-block;
	padding-left: 15px;
	padding-top: 10px;
} 
.logo span
{
	font-family: 'Open Sans', sans-serif;
	font-size: 25px;
	font-weight: 700;
	color: #44fa44;
	vertical-align: middle;
	text-transform: uppercase;
	margin-left: 0px;
} 

.logo_sena {
	margin-left: 130px;
	margin-top: 10px;
	z-index: 9999;
}


/*********************************
1.5 ALINEACION Y ESTILOS DE LOS TITULOS
*********************************/
/* .Titulos_todos {
	display: flex;
	padding: 100px;
} */

.menu-vertical > li > a {
	display: block;
	padding: 15px 20px;
	color: #FFFFFF;
	text-decoration: none;
}
.menu-vertical {

	position: absolute;
	display: none;
	list-style: none;
	width: 200px;
	background-color: rgba(0, 0, 0, .5);
}
.menu-vertical li:hover {
	background-color: #000000;
}
.menu-vertical li a {
	display: block;
	color: #FFFFFF;
	padding: 15px 15px 15px 20px;
}
.menu-horizontal li:hover .menu-vertical {
	display: block;
}
.menu-horizontal {
	list-style: none;
	display: flex;
	justify-content: space-around;
}
.menu-horizontal {
	margin-right: 9px;
	margin-left: 20px;
	margin-top: 30px;
}
.menu-horizontal:last-child {
	margin-right: 40px;
	margin-left: 90px;
}
.menu-horizontal a {
	font-family: 'Open Sans', sans-serif;
	font-size: 15px;
	text-transform: uppercase;
	font-weight: 700;
	color: #ffffff;
	-webkit-transition: all 200ms ease;
	-moz-transition: all 200ms ease;
	-ms-transition: all 200ms ease;
	-o-transition: all 200ms ease;
	transition: all 200ms ease;
}

.menu-horizontal a:hover {
	color: #06ff13;
}
li{
	padding: 0 20px;
}








.menu-vertical2 li a:hover {
	display: none;
} 
.menu-vertical2 {
	position: absolute;
	display: none;
	list-style: none;
	width: 200px;
	background-color: rgba(0, 0, 0, .5);
} 
.menu-vertical2 li:hover > ul {
	display: none;
} 
.menu-vertical2 li ul{
	display: none;
	position: absolute;
	min-width: 140px;
} 
.menu-vertical2 ul > li > a {
	float: left;
} 









/*********************************
2. ORGANIZACION FLECHAS EN EL SLIDER
*********************************/

.hero_slider_nav
{
	display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	position: absolute;
	top: 50%;
	-webkit-transform: translateY(-50%);
	-moz-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	-o-transform: translateY(-50%);
	transform: translateY(calc(-50% + 30px));
	width: 58px;
	height: 58px;
	
	z-index: 9;
	cursor: pointer;
}

.hero_slider_left
{
	left: 4.32%;
}
.hero_slider_right
{
	right: 4.32%;
}

.menu_container
{
	position: fixed;
	top: 0;
	right: -50vw;
	width: 50vw;
	height: 100vh;
	background: #FFFFFF;
	z-index: 12;
	-webkit-transition: all 0.6s ease;
	-moz-transition: all 0.6s ease;
	-ms-transition: all 0.6s ease;
	-o-transition: all 0.6s ease;
	transition: all 0.6s ease;
	visibility: hidden;
	opacity: 0;
}




/*********************************
3. FONDO Y ORGANIZACION SLIDER
*********************************/

.hero_slide_background
{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center center;
}

.hero_slide_container
{
	width: 100%;
	height: 100vh;
}

.hero_slide_content
{
	max-width: 80%;
	-webkit-transform: translateY(30px);
	-moz-transform: translateY(30px);
	-ms-transform: translateY(30px);
	-o-transform: translateY(30px);
	transform: translateY(30px);
}


.hero_slide_content div
{
	/* Aca es el color del "bienvenidos al" del slider */
	font-size: 90px;
	font-weight: 400;
	color: #ffffff;
}

.fuente-personalizada {
	font-family: 'mifuente48';
	font-size: 200px;
}


.hero_slide_content div span
{
	/* Aca es el color del "IEMAT" del slider */
	 color: #48ff00;
	padding-left: 13px;
	padding-right: 13px;
	margin-left: -12px;
	margin-right: -12px;
}

@font-face {
	font-family: 'mifuente48';
	src: url(../fuentes/kinsale_display/Kinsale\ Display\ DEMO.ttf);
}

/* Aca están las fuentes personalizadas Bienvenidos(debajo del slider;mision,vision) */
@font-face {
	font-family: 'mifuente';
	src: url(../fuentes/Eyedropper.ttf);
}



/*********************************
~ BIENVENIDOS ~ DEBAJO DEL SLIDER ~
*********************************/

.bienbienvenidos{
	text-align: center;
	font-family: 'mifuente';
	font-size: 90px;
}
.titulobien{
	font-size: 45px;
	color: #ffffff;
	font-family: 'mifuente';
}
.texto100{
	font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
	font-size: 20px;
	text-align: justify;
	margin-right: 30px;
}

.contenedordeqn{
	padding-left: 10px;
	justify-content: center;
	display: flex;
}
.columna100{
	padding-left: 20px;
}

.services
{
	padding-bottom: 76px;
}

/*********************************
GESTION ACADEMICA_1
*********************************/

.encabezado_a {
	padding-top: 30px;
}
.btnbtn-primary {

  color: #ffffff ;
  font-size: 23px;
  font-family: 'mifuente2';
  
}

.btnbtn-primary:hover {

	color: #06ff13;

}
.container_1 {
	margin-top: 150px;
	display: flex;
}

@font-face {
	font-family: 'mifuente2';
	src: url(../fuentes/Mermaid1001.ttf);
}

.Fuente-3 {
	font-family: 'mifuente3';
	color: #dadada;
	font-size: 35px;
}
@font-face {
	font-family: 'mifuente3';
	src: url(../fuentes/GentyDemo-Regular.ttf);
}

.texto1 {
	padding-top: 45px;
	font-size: 22px;
	padding-left: 10px;
	text-align: justify;
	font-family: 'Times New Roman', Times, serif;
}

.imagen_niños1{
	padding-right: 500px;
	padding-left: 60px;
	padding-top: 100px;
}

.imagen_niños2 {
	margin-top: -275px;
	padding-left: 640px;
}

.imagen_colegio{
	padding-right: 150px;
	padding-left: 40px;
}

/* .imagen_colegio {
	margin-top: -280px;
	padding-left: 300px;
	padding-right: 10px;
} */

/**************************************
GESTION ADMINISTRATIVA Y FINANCIERA_2 
**************************************/
.container_2 {
	display: flex;
	padding-top: 150px;
}
.texto2 {
	padding-top: 45px;
	font-size: 22px;
	padding-left: 10px;
	text-align: justify;
	font-family: 'Times New Roman', Times, serif;
}
.img-desarrollo {
	padding-right: 300px;
	padding-left: 100px;
	padding-top: 50px;
}
/**************************************
DIRECTIVA2 
**************************************/
.container_3{
	display: flex;
	padding-top: 150px;
	padding-right: 120px;
}
.textoDirectiva{
	padding-top: 45px;
	font-size: 22px;
	padding-left: 10px;
	text-align: justify;
	font-family: 'Times New Roman', Times, serif;
}
/**************************************
DIRECTIVA=Gobierno escolar 
**************************************/



/**************************************
INSTITUCIONAL 
**************************************/
.bienbienvenidos1{
	text-align: center;
	font-family: 'mifuente';
	font-size: 40px;
}
.bienbienvenidos2{
	text-align: center;
	font-family: 'mifuente';
	font-size: 70px;
}
.subcontainer1{
	display: flex;
	padding-top: 200px;
	padding-right: 150px;
}
.subtexto1{
	padding-top: 45px;
	font-size: 22px;
	padding-left: 10px;
	text-align: justify;
	font-family: 'Times New Roman', Times, serif;
}
.img_qn {
padding-left: 100px;
}

.subcontainer2{
	display: flex;
	padding-top: 80px;
	padding-right: 30px;
	padding-left: 20px;
}

.subcontainer3{
	display: flex;
	padding-top: 100px;
}
.subtexto3{
	padding-top: 45px;
	font-size: 22px;
	padding-left: 10px;
	text-align: justify;
	font-family: 'Times New Roman', Times, serif;
	padding-left: 200px;
}
.img_val{
	padding-left: 200px;
}
.subtexto2 {
	padding-top: 45px;
	font-size: 22px;
	padding-left: 20px;
	padding-right: 20px;
	text-align: justify;
	font-family: 'Times New Roman', Times, serif;
}
.subcontainer4{
	padding-top: 150px;
	display: flex;
}
.subcontainer5{
	padding-top: 100px;
	display: flex;
}
.escudo{
	padding-left: 70px;
}
.bandera{
	padding-left: 80px;
	padding-top: 200px;
}
.subtexto4{
	text-align: justify;
	padding-right: 25px;
	font-size: 22px;
	padding-left: 20px;
	padding-right: 20px;
	text-align: justify;
	font-family: 'Times New Roman', Times, serif;
}
/* Redeeeeeeeeeeeeeeeeeeeeeeeeeees */
*{
    box-sizing: border-box;
}
#btn-mas{
    display: none;
}
.container200{
    position: fixed;
    bottom: 20px;
    right: 20px;
}
.redes a, .btn-mas label{
    display: block;
    text-decoration: none;
    color: #48ff00;
    width: 55px;
    height: 55px;
    line-height: 55px;
    text-align: center;
    border-radius: 50%;
    box-shadow: 0px 1px 10px rgba(0,0,0,0.4);
    transition: all 500ms ease;
	background: #3d3d3d;
}
.icons{
	font-family: 'mifuente34';
	font-size: 55px;
}
@font-face {
	font-family: 'mifuente34';
	src: url(../fuentes/icons.ttf);
}

.redes a{
    margin-bottom: -14px;
    opacity: 0;
    visibility: hidden;
}
#btn-mas:checked~ .redes a{
    margin-bottom: 10px;
    opacity: 1;
    visibility: visible;
}
.btn-mas label{
    cursor: pointer;
    font-size: 23px;
}
#btn-mas:checked ~ .btn-mas label{
    transform: rotate(135deg);
    font-size: 25px;
}
.Contactenos12{
	font-family: mifuente6;
	font-size: 20px;
	color: #06ff13;
}
@font-face {
	font-family: 'mifuente6';
	src: url(../fuentes/Insanibc.ttf);
}



.galerias{
	padding-left: 50px;
	padding-top: 150px;
}


/* Acá van lo de abajo del bienvenidos pag. principal */
.namecole{
	font-family: 'mifuente4';
	font-size: 70px;
	text-align: center;
	color: #06ff13;
}

@font-face{
	font-family: 'mifuente4';
	src: url(../fuentes/UniformBold.otf);
}
.lemacole{
	font-family: 'mifuente5';
	font-size: 25px;
	text-align: center;
	color: #FFFFFF;
}
@font-face{
	font-family: 'mifuente5';
	src: url(../fuentes/Delicious\ Curls.ttf);
}
.direccion{
	color: #06ff13;
	font-size: 30px;
	padding-left: 15px;
	text-align: justify;
}
.direccion1{
	color: #FFFFFF;
	font-size: 20px;
	padding-left: 15px;
	text-align: justify;
}

.contenedordeinfo{
	display: flex;
	justify-content: center;
}

.megacontainerinfo{
	background: #3d3d3d;
}

.pocotexto{
	font-size: 50px;
	color: #06ff13;
	font-family: 'mifuente';
}

.muchotexto{
	text-align: justify;
	font-size: 20px;
	
}

.columnas{
	padding-right: 100px;
}

.interes{
	background: rgb(255, 255, 255);
	font-family: 'mifuente4';
	
}
.interes2{
	display: flex;
	margin-right: 10px;
	margin-left: 20px;
	justify-content: center;
	text-align: center;
	font-size: 25px;
}
.titulos1{
	padding-top: 50px;
	font-family: 'mifuente84';
	font-size: 40px;
}
.coaweb {
	margin-right: 10px;
}
.mun-front {
	margin-right: 10px;
}
.min-edu {
	margin-right: 10px;
}
.src-edu {
	margin-right: 10px;
}
.pag.sena {
	margin-right: 10px;
}
@font-face {
	font-family: 'mifuente84';
	src: url(../fuentes/bBackpack.ttf);
}


@media (max-width: 800px){



	.fuente-personalizada{
		font-size: 100px;
	}

	.hero_slide_content div{
		font-size: 20px;
	}
		.header
		{
		display: flex;
		position: fixed;
		top: 25px;
		left: 200px;
		height: 104px;
		width: 400px;
		background: #000000;
		z-index: 100;
		padding: 0 50px;
		margin: 0 50px;
		}


		.menu-horizontal {
			display: flex;
			margin-right: 0px;
			margin-left: 0px;
			margin-top: 30px;
			left: 600px;
			padding: 0;
			align-items: center;
		}

		li{
			padding: 0 5px;
		}

		.menu-horizontal li a{
			font-size: 10px;
		}
	.bienbienvenidos{
		font-size: 50px;
	}

	.contenedordeinfo{
		display: inline-block;
		width: 100%;
	}

	.namecole{
		font-size: 50px;
	}

	.contenedordeqn{
		display: inline-block;
		width: 100%;
	}
	
	.sedes{
		display: none;
	}

	
}
  /* Estilos generales */
  * {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

body {
	font-family: Arial, sans-serif;
	margin-top: 70px; /* Para evitar que el contenido quede oculto debajo del menú fijo */
}

/* Barra de navegación fija */
.navbar {
	position: fixed;
	top: 0;
	width: 100%;
	display: flex;
	justify-content: space-between;
	align-items: center;
	background-color: #000000;
	padding: 10px 20px;
	z-index: 1000;
}

/* Logo */
.logo {
	width: 50px;
	height: auto;
	padding-right: 15px;
}

/* Links del menú */
.menu {
	display: flex;
	list-style: none;
}

.menu li {
	position: relative;
	padding: 10px 20px;
}

.menu li a {
	color: #fff;
	text-decoration: none;
}

/* Submenú desplegable */
.submenu {
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	background-color: #444;
	list-style: none;
	min-width: 150px;
	z-index: 1000;
}

.submenu li {
	padding: 10px;
}

.submenu li a {
	color: #fff;
}

/* Mostrar submenú al pasar el mouse */
.menu li:hover .submenu {
	display: block;
}

/* Estilos para el icono de menú hamburguesa en móviles */
.menu-toggle {
	display: none;
	font-size: 24px;
	color: #fff;
	cursor: pointer;
}

/* Responsive para móviles */
@media (max-width: 768px) {
	.menu {
		display: none;
		flex-direction: column;
		width: 100%;
		background-color: #333;
	}

	.menu.show {
		display: flex;
	}

	.menu li {
		padding: 10px;
		text-align: center;
	}

	.menu li:hover .submenu {
		position: relative;
	}

	.menu-toggle {
		padding-right: 30px ;
		display: block;
	}
}