/* CSS Document */
*{ margin:0;padding: 0;}
body
{
	background-color:#FFF;
}
#fondo
{
	display:none;
	position:absolute;
	width:100%;
	height:100%;
	opacity:0.1;
	background-image:url(imagenes/fondo.jpg);
}
.NombreCombo{ font-family:Arial, Helvetica, sans-serif; color:#000; font-size:18px; }
.FontBlanco-Arial12{ font-family:Arial, Helvetica, sans-serif; color:#FFF; font-size:12px; }
.FontBlanco-Arial14{ font-family:Arial, Helvetica, sans-serif; color:#FFF; font-size:14px; }
.FontBlanco-Arial12N{ font-family:Arial, Helvetica, sans-serif; color:#FFF; font-size:12px; font-weight:bold;}
.FontBlanco-Arial14N{ font-family:Arial, Helvetica, sans-serif; color:#FFF; font-size:14px; font-weight:bold;}
.FontNegro-Arial12{ font-family:Arial, Helvetica, sans-serif; color:#000; font-size:12px; }
.FontNegro-Arial12N{ font-family:Arial, Helvetica, sans-serif; color:#000; font-size:12px; font-weight:bold; }
.FontNegro-Arial14{ font-family:Arial, Helvetica, sans-serif; color:#000; font-size:14px; }
.FontNegro-Arial14N{ font-family:Arial, Helvetica, sans-serif; color:#000; font-size:14px; font-weight:bold;}
.FontNegro-Arial20{ font-family:Arial, Helvetica, sans-serif; color:#000; font-size:20px; }
.FontNegro-Arial20N{ font-family:Arial, Helvetica, sans-serif; color:#000; font-size:20px; font-weight:bold;}
.FontAzulOscuro-Arial14N{ font-family:Arial, Helvetica, sans-serif; color:#336699; font-size:14px; font-weight:bold;}
.FontAzulOscuro-Arial16N{ font-family:Arial, Helvetica, sans-serif; color:#336699; font-size:16px; font-weight:bold;}
.FontAzulOscuro-Arial18N{ font-family:Arial, Helvetica, sans-serif; color:#336699; font-size:18px; font-weight:bold;}
.FontRojoOscuro-Arial12N{ font-family:Arial, Helvetica, sans-serif; color:#990000; font-size:12px; font-weight:bold;}
.FontRojoOscuro-Arial16N{ font-family:Arial, Helvetica, sans-serif; color:#990000; font-size:16px; font-weight:bold;}
.FontRojoOscuro-Arial18N{ font-family:Arial, Helvetica, sans-serif; color:#990000; font-size:18px; font-weight:bold;}
.FontRojoOscuro-Arial18N-shd{ font-family:Arial, Helvetica, sans-serif; color:#990000; font-size:18px; font-weight:bold; text-shadow:#777 1px 1px 1px; }
.Titulo1Arial-Blanco-shw{ font-family:Arial, Helvetica, sans-serif; color:#FFF; font-size:20px; text-shadow:#777 1px 1px 1px;}
.Titulo2Arial-Blanco-shw{ font-family:Arial, Helvetica, sans-serif; color:#FFF; font-size:18px; text-shadow:#777 1px 1px 1px;}
.Titulo1Arial-Blanco{ font-family:Arial, Helvetica, sans-serif; color:#FFF; font-size:20px; }
.Titulo2Arial-Blanco{ font-family:Arial, Helvetica, sans-serif; color:#FFF; font-size:18px; }
.Texto1Arial-Blanco{ font-family:Arial, Helvetica, sans-serif; color:#FFF; font-size:16px; }
.Texto2Arial-Blanco{ font-family:Arial, Helvetica, sans-serif; color:#FFF; font-size:14px; }
.Texto2Arial-Blanco{ font-family:Arial, Helvetica, sans-serif; color:#FFF; font-size:12px; }

.Titulo1Arial-Negro-shw{ font-family:Arial, Helvetica, sans-serif; color:#000; font-size:20px; text-shadow:#777 1px 1px 1px;}
.Titulo2Arial-Negro-shw{ font-family:Arial, Helvetica, sans-serif; color:#000; font-size:18px; text-shadow:#777 1px 1px 1px;}
.Titulo1Arial-Negro{ font-family:Arial, Helvetica, sans-serif; color:#000; font-size:20px; text-shadow:#777 1px 1px 1px;}
.Titulo2Arial-Negro{ font-family:Arial, Helvetica, sans-serif; color:#000; font-size:18px; text-shadow:#777 1px 1px 1px;}
.Texto1Arial-Negro{ font-family:Arial, Helvetica, sans-serif; color:#000; font-size:16px; }
.Texto2Arial-Negro{ font-family:Arial, Helvetica, sans-serif; color:#000; font-size:14px; }
.Texto3Arial-Negro{ font-family:Arial, Helvetica, sans-serif; color:#000; font-size:12px; }

.Titulo1Arial-AzulO-shw{ font-family:Arial, Helvetica, sans-serif; color:#336699; font-size:20px; text-shadow:#777 1px 1px 1px;}
.Titulo2Arial-AzulO-shw{ font-family:Arial, Helvetica, sans-serif; color:#336699; font-size:18px; text-shadow:#777 1px 1px 1px;}
.Titulo1Arial-AzulO{ font-family:Arial, Helvetica, sans-serif; color:#336699; font-size:20px; }
.Titulo2Arial-AzulO{ font-family:Arial, Helvetica, sans-serif; color:#336699; font-size:18px; }
.Texto1Arial-AzulO{ font-family:Arial, Helvetica, sans-serif; color:#336699; font-size:16px; }
.Texto2Arial-AzulO{ font-family:Arial, Helvetica, sans-serif; color:#336699; font-size:14px; }
.Texto3Arial-AzulO{ font-family:Arial, Helvetica, sans-serif; color:#336699; font-size:12px; }

.Titulo1Arial-RojoO-shw{ font-family:Arial, Helvetica, sans-serif; color:#990000; font-size:20px; text-shadow:#777 1px 1px 1px;}
.Titulo2Arial-RojoO-shw{ font-family:Arial, Helvetica, sans-serif; color:#990000; font-size:18px; text-shadow:#777 1px 1px 1px;}
.Titulo1Arial-RojoO{ font-family:Arial, Helvetica, sans-serif; color:#990000; font-size:20px;}
.Titulo2Arial-RojoO{ font-family:Arial, Helvetica, sans-serif; color:#990000; font-size:18px;}
.Texto1Arial-RojoO{ font-family:Arial, Helvetica, sans-serif; color:#990000; font-size:16px; }
.Texto2Arial-RojoO{ font-family:Arial, Helvetica, sans-serif; color:#990000; font-size:14px; }
.Texto3Arial-RojoO{ font-family:Arial, Helvetica, sans-serif; color:#990000; font-size:12px; }

header
{
	position:fixed;
	width: 100%;
	height:10%;
	background-color:#EEE;
	z-index:10;
	min-height:40px; max-height:10%;

}
	.menu_bar
	{
		display: none;
	}
	#cabeza
	{
		position:absolute;
		background-color:#FFFFFF;
		width:100%;
		height:100%;

	}
	#barrasuperior{position:absolute; top:0%; width:100%; height:100%; background:#185277; -webkit-box-shadow: 1px 6px 25px -7px rgba(0,0,0,0.75);
-moz-box-shadow: 1px 6px 25px -7px rgba(0,0,0,0.75);
box-shadow: 1px 6px 25px -7px rgba(0,0,0,0.75); border-bottom:2px solid #FFF;} 	
	#logotiposuperior{ position:absolute; width:8%; top:10%; z-index:11; left:5%; min-width:30px; max-width:50px; }
	#titulosuperior{ position:absolute; top:10%; z-index:11; left:15%; max-height:90%; min-height:40% }
	.titulocolegio{ position:absolute; left:20%; display:inline; width:12%; font-family:"Futura Hv"; color:#FFF; font-size:110%; overflow:hidden; top:9%; text-shadow: #061123 2px 2px 4px; min-width:150px;   }
	#menusuperior{position:absolute; left:60%; top:35%; width:100%; z-index:20; }


section{ position:absolute; top:0%; width:100%; height:95%;  }
#cajalogin
{
	position:absolute;
	font-family:Arial, Helvetica, sans-serif;
	font-size:100%;
	padding:5%;
	background-color:#DDD;
	border:#fff solid 2px;
	overflow:hidden;
	
	-webkit-animation: cajamove 1s linear forwards;  /* Safari 4.0 - 8.0 */
    -webkit-animation-delay: 0s; /* Safari 4.0 - 8.0 */
    animation: cajamove 1s linear forwards;
    animation-delay: 0s;
  }
@-webkit-keyframes cajamove {
    from {top:50%; left:50%; width:1%;height:1%; opacity:0;}
    to {top:20%; left:5%; width:80%;height:40%; opacity:1;}
	}

@keyframes cajamove {
    from {top:50%; left:50%; width:1%;height:1%; opacity:0;}
    to {top:25%; left:5%; width:80%;height:40%; opacity:1;}
	}
#promocionprincipal
{
	position:absolute;
	top:0%;
	/*width:40%;
	height:90%;*/
	opacity:0;
    -webkit-animation: efectopromocionprincipal 2s linear forwards; /* Safari 4.0 - 8.0 */
    -webkit-animation-delay: 2s; /* Safari 4.0 - 8.0 */
	-webkit-transform:rotate(0deg);
	animation: efectopromocionprincipal 1s linear forwards;
    animation-delay: 2s;
  }

/* Safari 4.0 - 8.0 */
@-webkit-keyframes efectopromocionprincipal {
    from { opacity: 0.1; width:50%; left:-150; -webkit-transition-timing-function: ease-in; -webkit-transform:rotate(0deg); }
    to {opacity: 1; /*width:40%;*/ 	left:30; top:0%; width:23%; -webkit-transition-timing-function: ease-in; -webkit-transform:rotate(360deg); }
	}

@keyframes efectopromocionprincipal {
    from { opacity: 0.1; width:50%; left:-150; -webkit-transition-timing-function: ease-in; -webkit-transform:rotate(0deg); }
    to {opacity: 1; /*width:40%;*/ 	left:30; top:0%; width:23%; -webkit-transition-timing-function: ease-in; -webkit-transform:rotate(360deg); }
	}


#logintxt
{
	position:absolute;
	opacity:0;
	top:5%;
	width:40%;
	height:59%;
	left:50%;
	padding:2%;
	background-color:#ccc;
	overflow:hidden;
	
    -webkit-animation: efectoinput 2s linear forwards; /* Safari 4.0 - 8.0 */
    -webkit-animation-delay: 2s; /* Safari 4.0 - 8.0 */
	animation: efectoinput 2s linear forwards;
    animation-delay: 2s;
  }

/* Safari 4.0 - 8.0 */
@-webkit-keyframes efectoinput {
    from { opacity: 0.1; -webkit-transition-timing-function: ease-in; }
    to {opacity: 1; -webkit-transition-timing-function: ease-in; }
	}

@keyframes efectoinput {
    from { opacity: 0.1; -webkit-transition-timing-function: ease-in; }
    to {opacity: 1; -webkit-transition-timing-function: ease-in; }
	}


 #caja1-2, #caja1-3, #caja1-4, #caja1-5
 {
	opacity:0;
	position:absolute;
	top:10%;
	width:90%; /* 90% */
	height:100%;
	overflow:hidden;
	left:5%; /*  5% */
	text-shadow:#000000,2px,2px,2px;
  }

 .btnizq, .btnder
 { 
	 position:absolute;
	 bottom:3%;
	 background-color:#FFFFFF; 
	 width:20px; 
	 border:#0099CC solid 2px;  
	 border-radius: 10px;
 } 
 .btnizq{ left:5px; }.btnder{ right:5px; }
/* Safari 4.0 - 8.0 */

@media screen and (max-width:800px)
{
	#menusuperior{position:absolute; display:block; top:15%; right:10%; background-color:#00CCFF; width:25%;}
		#minimenu{display:block;  position:absolute; width:70%; top:10%; z-index:20;}
		#minimenu2{display:none; position:absolute; cursor:pointer;}

}
@media screen and (max-width:500px)
{
	.FontNegro-Arial20{ font-family:Arial, Helvetica, sans-serif; color:#000; font-size:14px; }
	.FontNegro-Arial20N{ font-family:Arial, Helvetica, sans-serif; color:#000; font-size:14px; font-weight:bold;}
	#fondo
	{
	display:none;
	position:absolute;
	width:1%;
	height:1%;
	opacity:0.1;
	}
	header
	{
		position:fixed;
		width: 100%;
		height:10%;
		background-color:#EEE;
		z-index:10;
		min-height:40px; max-height:10%;
		/*-webkit-box-shadow: 0px 0px 0px 0px rgba(0,0,0,0.75);
	-moz-box-shadow: 0px 0px 0px 0px rgba(0,0,0,0.75);
	box-shadow: 0px 0px 0px 0px rgba(0,0,0,0.75);*/
	
	}
		/*////////////////*/
		.menu_bar
		{
			display: block;
			font-family:Arial, Helvetica, sans-serif;
			font-size: 12px;
			width:100%;
			position:fixed;
			z-index: 10;
			
		}
		.menu_bar .bt-menu
		{
			display: block;
			padding: 2px;
			color: #FFF;
			text-decoration: none;
			font-weight: bold;
			font-size: 25px;
			-webkit-box-sizing:border-box;
			-moz-sizing:border-box;
			box-sizing:border-box;
			
		}
		.menu_bar span
		{
			float: right;
			font-size:40px;
			top:0%;
			
		}
		header nav
		{
			top:11%;
			width:80%;
			height:100%;
			left:-100%; /* con esta el menu lo pone fuera de la pantalla*/
			margin:0;
			position:fixed;
			background: #1A2940;
			-webkit-box-shadow: 1px 20px 50px -10px rgba(0,0,0,0.75);
			-moz-box-shadow: 1px 20px 50px -10px rgba(0,0,0,0.75);
			box-shadow: 1px 20px 50px -10px rgba(0,0,0,0.75);
		}
		header nav ul li
		{
			display:block; /* Que se ponga en todo lo que pueda*/
			height:80%;
			float: none;
			border-bottom: 1px solid rgba(255,255,255, .8);
		}
		
		
	
	
	/* DARLE FORMA AL MENU*/
	header nav ul
	{
		overflow: hidden;
		list-style:none; /* con esta propiedad quitas las viņetas de li */	
	}
	
	
	/* Aqui editamos los A que en si pueden ser los links*/
	header nav ul li a
	{
		font-family:Arial, Helvetica, sans-serif;
		font-size:12px;
		color: #FFF;
		padding: 5px;
		display: block;
		text-decoration: none;
		padding-left:10.5px; /* agrandar boton de lado izquierdo*/
		padding-right:10.5px; /* agrandar boton del lado derecho*/
	}
	/* EN ESTE CASO LOS SPAN SON LOS ICONOS*/
	header nav ul li span 
	{
		/*margin-right: 80px;*/
		font-size:40px;
	}
	
	/* Esto es para cuando le pones el mouse arrib<*/
	header nav ul li a:hover 
	{
		background: #45DAFE; /*VERDE*/
	}
		/**********/
		
		
		#cabeza
		{
			position:absolute;
			background-color:#FFFFFF;
			width:100%;
			height:100%;
	
		}
		#barrasuperior{position:absolute; top:0%; width:100%; left:0%; height:100%; background:#1A2940;  border-bottom:2px solid #1A2940;  -webkit-box-shadow: 3px 3px 3px 3px rgba(0,0,0,0.5);
	-moz-box-shadow: 3px 3px 3px 3px rgba(0,0,0,0.5);
	box-shadow: 3px 3px 3px 3px rgba(0,0,0,0.5);
	border-bottom:2px solid #FFF; } 	
		#logotiposuperior{ position:absolute; width:40%; top:15%; z-index:11; left:5%; min-width:40px; }
		#titulosuperior{ position:absolute; width:40%; top:5%; z-index:11; left:27%; }
		.titulocolegio{ position:absolute; left:25%; display:inline; width:55%; font-family:"Futura Hv"; color:#FFF; font-size:18px; overflow:hidden; top:30%;    }
		
		#cajalogin
{
	position:absolute;
	font-family:Arial, Helvetica, sans-serif;
	font-size:100%;
	color:#FFFFFF;
	padding:5%;
	background-color:#DDD;
	border:#aaa solid 2px;
	
	-webkit-animation: cajamove 1s linear forwards;  /* Safari 4.0 - 8.0 */
    -webkit-animation-delay: 0s; /* Safari 4.0 - 8.0 */
    animation: cajamove 1s linear forwards;
    animation-delay: 0s;
  }
@-webkit-keyframes cajamove {
    from {top:50%; left:50%; width:1%;height:1%; opacity:0;}
    to {top:20%; left:5%; width:80%;height:40%; opacity:1;}
	}

@keyframes cajamove {
    from {top:50%; left:50%; width:1%;height:1%; opacity:0;}
    to {top:25%; left:5%; width:80%;height:40%; opacity:1;}
	}
#promocionprincipal
{
	position:absolute;
	top:5%;
	width:40%;
	height:90%;
	opacity:0;
    -webkit-animation: efectopromocionprincipal 2s linear forwards; /* Safari 4.0 - 8.0 */
    -webkit-animation-delay: 2s; /* Safari 4.0 - 8.0 */
	-webkit-transform:rotate(0deg);
	animation: efectopromocionprincipal 1s linear forwards;
    animation-delay: 2s;
  }

/* Safari 4.0 - 8.0 */
@-webkit-keyframes efectopromocionprincipal {
    from { opacity: 0.1; width:200%; -webkit-transition-timing-function: ease-in; -webkit-transform:rotate(0deg); }
    to {opacity: 1; width:40%; height:90%; -webkit-transition-timing-function: ease-in; -webkit-transform:rotate(360deg); }
	}

@keyframes efectopromocionprincipal {
    from { opacity: 0.1; width:200%; -webkit-transition-timing-function: ease-in; -webkit-transform:rotate(0deg); }
    to {opacity: 1; width:40%; height:90%; -webkit-transition-timing-function: ease-in; -webkit-transform:rotate(360deg); }
	}


#logintxt
{
	position:absolute;
	opacity:0;
	top:5%;
	width:40%;
	height:59%;
	left:50%;
	padding:2%;
	background-color:#ccc;
	overflow:hidden;
	
    -webkit-animation: efectoinput 2s linear forwards; /* Safari 4.0 - 8.0 */
    -webkit-animation-delay: 2s; /* Safari 4.0 - 8.0 */
	animation: efectoinput 2s linear forwards;
    animation-delay: 2s;
  }

/* Safari 4.0 - 8.0 */
@-webkit-keyframes efectoinput {
    from { opacity: 0.1; -webkit-transition-timing-function: ease-in; }
    to {opacity: 1; -webkit-transition-timing-function: ease-in; }
	}

@keyframes efectoinput {
    from { opacity: 0.1; -webkit-transition-timing-function: ease-in; }
    to {opacity: 1; -webkit-transition-timing-function: ease-in; }
	}
		
	#encabezado
	{
		position:absolute;
		background-color:#1E3759;
		width:100%;
		height:40%;
		max-height:270px;
		background: rgba(31,76,113,1);
		background: -moz-linear-gradient(top, rgba(31,76,113,1) 0%, rgba(31,76,113,1) 42%, rgba(28,50,82,1) 94%, rgba(28,50,82,1) 100%);
		background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(31,76,113,1)), color-stop(42%, rgba(31,76,113,1)), color-stop(94%, rgba(28,50,82,1)), color-stop(100%, rgba(28,50,82,1)));
		background: -webkit-linear-gradient(top, rgba(31,76,113,1) 0%, rgba(31,76,113,1) 42%, rgba(28,50,82,1) 94%, rgba(28,50,82,1) 100%);
		background: -o-linear-gradient(top, rgba(31,76,113,1) 0%, rgba(31,76,113,1) 42%, rgba(28,50,82,1) 94%, rgba(28,50,82,1) 100%);
		background: -ms-linear-gradient(top, rgba(31,76,113,1) 0%, rgba(31,76,113,1) 42%, rgba(28,50,82,1) 94%, rgba(28,50,82,1) 100%);
		background: linear-gradient(to bottom, rgba(31,76,113,1) 0%, rgba(31,76,113,1) 42%, rgba(28,50,82,1) 94%, rgba(28,50,82,1) 100%);
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1f4c71', endColorstr='#1c3252', GradientType=0 );
		border:0px;
	}
		#imagensuperiorfondo
		{
			display:none;
			width:100%;
			height:50%;
			top:20%;
			left:0%;
			border:5px solid #FFF;
			-webkit-box-shadow: 0px 0px 0px 0px rgba(0,0,0,0.85);
		}
		#cajaderecha{ position:absolute; width:200px; height:190px; top:25px; z-index:20; left:12%; max-width:500px; min-width:250px;
		background-image:url(imagenes/gisesnosotros.png);
		background-repeat:no-repeat;
		-webkit-animation-name: example; /* Chrome, Safari, Opera */
    	-webkit-animation-duration: 10s; /* Chrome, Safari, Opera */
    	animation-name: example;
    	animation-duration: 10s;}
		
		@-webkit-keyframes example 
		{
			0%   {background-image:url(imagenes/gisesnosotros.png); opacity:0.0; background-repeat:no-repeat;}
			72% {background-image:url(imagenes/gisesnosotros.png); background-repeat:no-repeat; opacity:0.5;}
			100% {background-image:url(imagenes/gisesnosotros.png); background-repeat:no-repeat;}
		}

		/* Standard syntax */
		@keyframes example {
			0%   {background-image:url(imagenes/gisesnosotros.png); opacity:0.0; background-repeat:no-repeat;}
			72% {background-image:url(imagenes/gisesnosotros.png);  background-repeat:no-repeat; opacity:0.5;}
			100% {background-image:url(imagenes/gisesnosotros.png); background-repeat:no-repeat;}
		}
			#menusuperior{position:absolute; display:none; }
		#minimenu{display:none;  position:absolute; width:70%; top:233px; z-index:20; left:0%; }
		#minimenu2{display:none; position:absolute; cursor:pointer; max-width:500px; min-width:250px; font-family: "Futura Md"; color:#FFF; font-size:16px; text-shadow: #000 4px 4px 4px; }
		
		#escudoescuela{ display:none; }
		
}