/* 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);
}
@font-face {
    font-family: "Futura Hv";
    font-style: normal;
    font-weight: normal;
    src: local("?"), url("/fonts/FtraHv__0.woff") format("woff"), url("/fonts/FtraHv__0.ttf") format("truetype");
}
@font-face {
    font-family: "Futura Md";
    font-style: normal;
    font-weight: normal;
    src: local("?"), url("/fonts/FtraMd__0.woff") format("woff"), url("/fonts/FtraMd__0.ttf") format("truetype");
}
@font-face 
{
    font-family: "Skinny Marker";
    font-style: normal;
    font-weight: normal;
    src: local("?"), url("/fonts/Skinny_Marker.ttf") format("truetype");
}
@font-face 
{
    font-family: "Marker SD Italic";
    font-style: normal;
    font-weight: normal;
    src: local("?"), url("/fonts/Marker_SD_Italic.ttf") format("truetype");
}
@font-face 
{
    font-family: "Marker SD";
    font-style: normal;
    font-weight: normal;
    src: local("?"), url("/fonts/Marker_SD.ttf") format("truetype");
}
@font-face 
{
    font-family: "Chubby Gothic";
    font-style: normal;
    font-weight: normal;
    src: local("?"), url("/fonts/Chubby_Gothic.ttf") format("truetype");
}
@font-face 
{
    font-family: "Comica BD";
    font-style: normal;
    font-weight: normal;
    src: local("?"), url("/fonts/Comica_BD.ttf") format("truetype");
}
@font-face 
{
    font-family: "Drawing with markers";
    font-style: normal;
    font-weight: normal;
    src: local("?"), url("/fonts/Drawing_with_markers.ttf") format("truetype");
}

.NombreCombo{ font-family:Arial, Helvetica, sans-serif; color:#000; font-size:18px; }
.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; }
.Texto3Arial-Blanco{ font-family:Arial, Helvetica, sans-serif; color:#FFF; font-size:12px; }
.Texto4Arial-Blanco{ font-family:Arial, Helvetica, sans-serif; color:#FFF; font-size:10px; }

.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; }
.Titulo2Arial-Negro{ font-family:Arial, Helvetica, sans-serif; color:#000; font-size:18px; }
.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; }
.Texto4Arial-Negro{ font-family:Arial, Helvetica, sans-serif; color:#000; font-size:10px; }
.Texto5Arial-Negro{ font-family:Arial, Helvetica, sans-serif; color:#000; font-size:9px; }

.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; }
.Titulo2Otra-AzulO{ font-family:"Chubby Gothic"; color:#F15050; font-size:25px; font-weight:bold; text-shadow:#777 1px 1px 1px;}
.Texto3Otra-AzulO{ font-family:"Drawing with markers"; color:#003366; font-size:18px; text-shadow:#777 1px 1px 1px; }
.TitulosbuckyBactionstitle{ font-family:"Skinny Marker"; font-size:200%; color:#FFF; text-shadow: #000 1px 1px 4px; }
.Texto4Arial-AzulO{ font-family:Arial, Helvetica, sans-serif; color:#336699; font-size:10px; }

.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; }
.Texto4Arial-RojoO{ font-family:Arial, Helvetica, sans-serif; color:#990000; font-size:10px; }

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

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

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

header
{
	position:fixed;
	top:0%;
	background-color:#333;
	z-index:10;
	min-height:40px;

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

	}

	
	#barrasuperior{position:absolute; top:0%; width:100%; height:80%; background: rgba(30,65,92,1);
background: -moz-linear-gradient(left, rgba(30,65,92,1) 24%, rgba(25,80,111,1) 37%, rgba(19,96,132,1) 51%, rgba(0,153,204,1) 100%);
background: -webkit-gradient(left top, right top, color-stop(24%, rgba(30,65,92,1)), color-stop(37%, rgba(25,80,111,1)), color-stop(51%, rgba(19,96,132,1)), color-stop(100%, rgba(0,153,204,1)));
background: -webkit-linear-gradient(left, rgba(30,65,92,1) 24%, rgba(25,80,111,1) 37%, rgba(19,96,132,1) 51%, rgba(0,153,204,1) 100%);
background: -o-linear-gradient(left, rgba(30,65,92,1) 24%, rgba(25,80,111,1) 37%, rgba(19,96,132,1) 51%, rgba(0,153,204,1) 100%);
background: -ms-linear-gradient(left, rgba(30,65,92,1) 24%, rgba(25,80,111,1) 37%, rgba(19,96,132,1) 51%, rgba(0,153,204,1) 100%);
background: linear-gradient(to right, rgba(30,65,92,1) 24%, rgba(25,80,111,1) 37%, rgba(19,96,132,1) 51%, rgba(0,153,204,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e415c', endColorstr='#0099cc', GradientType=1 );
} 	
	#barrainferior{ position:fixed; bottom:0%; width:100%; height:8%; background-color:#CCCCCC;}
	#logoescuela{position:absolute; left:92%; width:5%; top:10%;}
	#logosistema{position:absolute; left:4%; width:100%; top:10%; max-width:50px;}
	#logoescuelaimg{width:90%; min-width:60px;}
	#divusuario{ display:block; position:absolute; font-family:"Futura Md"; left:5%; top:10%; }
	
	/*#menusuperior{position:absolute; left:10%; top:35%; width:100%; z-index:20; background-color:#336633; }*/
	#minimenu{display:none;  position:absolute; width:70%; top:233px; z-index:20; left:0%; }
	#minimenu2{display:block; position:absolute; cursor:pointer; font-family:"Futura Md"; right:3%; top:0%;  }
.btnminimenu1,.btnminimenu2,.btnminimenu3,.btnminimenu4,.btnminimenu5,.btnminimenu6,.btnminimenu7,.btnminimenu8,.btnminimenu9
{
	color:#FFF;
	font-size:14px;	
	text-shadow: #000 4px 4px 4px;
}
.btnminimenu1:hover,.btnminimenu2:hover,.btnminimenu3:hover,.btnminimenu4:hover,.btnminimenu5:hover,.btnminimenu6:hover,.btnminimenu7:hover,.btnminimenu8:hover,.btnminimenu9:hover
{
	color:#0099CC;
	font-size:14px;
}
#barranegra
{
	position:absolute; top:100%; width:100%; height:40%; background:#000; border-bottom:2px solid #FFF; -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); color:#FFF;
}
#cabecera
{
	font-family:Arial, Helvetica, sans-serif; color:#00CCFF; font-size:30px;
}

@media screen and (max-width:800px)
{
.NombreCombo{ font-family:Arial, Helvetica, sans-serif; color:#999; font-size:8px; }
.Titulo1Arial-Blanco-shw{ font-family:Arial, Helvetica, sans-serif; color:#FFF; font-size:18px; text-shadow:#777 1px 1px 1px;}
.Titulo2Arial-Blanco-shw{ font-family:Arial, Helvetica, sans-serif; color:#FFF; font-size:16px; text-shadow:#777 1px 1px 1px;}
.Titulo1Arial-Blanco{ font-family:Arial, Helvetica, sans-serif; color:#FFF; font-size:18px; text-shadow:#777 1px 1px 1px;}
.Titulo2Arial-Blanco{ font-family:Arial, Helvetica, sans-serif; color:#FFF; font-size:16px; text-shadow:#777 1px 1px 1px;}
.Texto1Arial-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; }
.Texto3Arial-Blanco{ font-family:Arial, Helvetica, sans-serif; color:#FFF; font-size:10px; }

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

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

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

.Titulo1Arial-AzulC-shw{ font-family:Arial, Helvetica, sans-serif; color:#00CCFF; font-size:18px; text-shadow:#777 1px 1px 1px;}
.Titulo2Arial-AzulC-shw{ font-family:Arial, Helvetica, sans-serif; color:#00CCFF; font-size:16px; text-shadow:#777 1px 1px 1px;}
.Titulo1Arial-AzulC{ font-family:Arial, Helvetica, sans-serif; color:#00CCFF; font-size:18px;}
.Titulo2Arial-AzulC{ font-family:Arial, Helvetica, sans-serif; color:#00CCFF; font-size:16px;}
.Texto1Arial-AzulC{ font-family:Arial, Helvetica, sans-serif; color:#00CCFF; font-size:14px; }
.Texto2Arial-AzulC{ font-family:Arial, Helvetica, sans-serif; color:#00CCFF; font-size:12px; }
.Texto3Arial-AzulC{ font-family:Arial, Helvetica, sans-serif; color:#00CCFF; font-size:10px; }
.Texto4Arial-AzulC{ font-family:Arial, Helvetica, sans-serif; color:#00CCFF; font-size:9px; }	
	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; }
		#logoescuela{display:none; position:absolute; left:92%; width:5%; top:10%;} 	
		#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%;    }
		

		#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; }
		
}