@charset "utf-8";




/* ----------------------------------------------------------------------------------------------- */
/* Los elementos de GLOBAL se aplican primero. Aquí se deben colocar todas las propiedades comunes */
/* que no deberían estar ya en los otros grupos: */
/* FIXED min 1561px, DESKTOP max 1560px, LAPTOP max 1360px , TABLET max 1024px, PHONE max 640px    */
/* Los elementos de FIXED, DESKTOP, TABLET, PHONE, se aplican, según se cumpla su condicional.     */
/* Estos sobreescribiran las propiedades, en caso que existan en el elemento GLOBAL */

/*   width:100%; height: auto;     escalan un elemento de manera proporcional (sea img, div, etc.) */
/*   margin: 0 auto;               centran un elemento horizontalmente */
/* ----------------------------------------------------------------------------------------------- */




/* G L O B A L  */


/* B A S I C */
header, nav, article, section, aside, figure, figcaption, section, footer {
	display: block;
}
* {
	margin: 0px;
	padding: 0px;
}
/* web fonts */
@font-face {
	font-family: robotothin;
	src: url('robotothin.eot');
	src: url('robotothin.eot?#iefix') format('embedded-opentype'),
    url('robotothin.woff') format('woff'),
    url('robotothin.ttf') format('truetype'),
    url('robotothin.svg') format('svg');
}





/* C O N T E N E D O R E S    S T A R T */
body {
	font-family:  Verdana, Geneva, sans-serif;		/* estilo de fuente de body */
	text-align: center;
	font-size: 0.97em;
	color: #697380; /* B50% #808080   BLUE WHITE 212 18 50  697380    old #999999 web-safe rgb 152 152 152 */
	color: #919599;
	/*background-color: #000000;*/     /* 000000  00% */
	background: url(../images_lms/g5_background_pattern.gif);      /*BACKGROUND TEXTURE*/
	/*background-color:blue;*/     /* DEBUG */
	overflow-x: hidden;   /* ocultar horizontal scroll-bar */
}
/* position relative para que en su interior se puedan ubicar elementos con position absolute */
#wrapper {
	position: relative;
	margin: 0 auto;
	text-align: left;
	/*background-color:cadetblue;*/       /* 1a1a1a  10%   debug */
}
/* C O N T E N E D O R E S    E N D */




/* H E A D E R   S T A R T */
header {
	position: absolute;  /* absolute */
	width: 100%;
	z-index: 10;
	/*background: url(../images_g0/g0_header_bg.png);*/
	background: url(../images_lms/g0_header_bg20blue.png);
	text-align: center;  /* centra elementos internos que no tengan  definido ni width, ni float, ni absolute */
}
/* H E A D E R    P O S I T O N */
/* logo area */
#logoArea {				
	/*width: 150px;
	height: 35px;
	float: right;
	padding: 15px 30px 2px 30px;*/  /*top right bottom left*/
}
/* logo header */
#logoHeader {
	position: relative;  /*absolute*/
	top: 12px;  
	width: 300px;
	height: 35px;
	float: left;
	padding: 00px 30px 0px 30px;  /* 10 30 0 30  top right bottom left*/
}
/* TESTING */
#logoArea img  {
	border-style: none;
	outline: none;
}
#logoHeader img  {
	border-style: none;
	outline: none;
}
/* END TESTING */
/* nav bar */
#navHeader {
	position: relative;   /* relative */
	top: -8px;  /*NEW*/
	float: right;
	padding: 2px 30px 2px 30px;  /* 2 30 12 30 top right bottom left*/
}
/* H E A D E R    S T Y L E */
/* logo area */
#logoArea img {
	 opacity: 1.00;
     filter: alpha(opacity=100); /* For IE8 and earlier */
}
#logoArea img:hover {
	 opacity: 0.60;
     filter: alpha(opacity=60); /* For IE8 and earlier */
}
/* logo header */
#logoHeader img {
	 opacity: 1.00;
     filter: alpha(opacity=100); /* For IE8 and earlier */
}
#logoHeader img:hover {
	 opacity: 0.60;
     filter: alpha(opacity=60); /* For IE8 and earlier */
}
/* nav bar */
#navHeader a {
	padding: 0 0.15em;  
	font-size: 0.85em;
	color: #8c8c8c;    /*#808080 50%    8c8c8c 55% */
	/*color: #536ea6;*/    /*  LIGHT BLUE HSB 220 50 65  536ea6     B70 b3b3b3*/
	line-height: 1.0em;
	text-decoration: none;
}
#navHeader a:hover {
	color: #666666;
}
/* H E A D E R   E N D */




/* M A I N   C O N T E N T    S T A R T */
/* para evitar linea inferior sobre footer se coloca -3px de margen negativo */
#main {
	position: relative;
	text-align: center;
	width: 100%;
	height: auto;
	margin: 0px 0px 20px 0px;   /*  0 0 -3 0   margin-top controla SEPARACION SUPERIOR DE SLIDES */
											/*  margin-bottom controla SEPARACION DE FOOTER */
}

/* G R A F I C O    S U P E R I O R */
#graphic {
	position: relative;
}
#graphic img {		/* hacer imagen de fondo responsive */
	width: 100%;   	
	height: auto;
	margin: 0;
	margin-bottom: 20px;   /*SEPARACION ENTRE SLIDES Y CONTENT*/
	padding: 0;
	top: 0;
	left: 0;
}
/* G R A F I C O    S U P E R I O R */
#content .project_img {
	position: relative;
	padding: 15px 0 30px 0;
}
#content .project_img img {		/* hacer imagen de fondo responsive */
	width: 100%;   	
	height: auto;
	margin: 0;
	padding: 0;
	top: 0;
	left: 0;
}



/* stage slideshow */
#stage {			/* ubica stage sobre imagen de fondo */
	position: absolute;
	top: 0;
	left: 0;
}
/* stage reel */
#stagereel_C, #stagereel_A, #stagereel_B {			/* ubica stage sobre imagen de fondo */
	margin: 30px 0px 0px 0px;
	top: 0;
	left: 0;
}


/* C O N T E N I D O    I N F E R I O R */

#title {								/*ver media queries: max1024px*/
	position: relative;
	margin: 0 auto;						/* centrado de  content  dentro de  main   */
	width: 960px;     					/* ancho del bloque de texto del contenido */
	padding: 5px 50px 7px 50px;		/* padding de texto del contenido */
	text-align: left;
	background-color:#01080f;      /* DARK BLUE  HSB 210 96 6  01080f */
	/*background-image: linear-gradient(#1e252d, #010913);*/
}
#title h1, h2, h3 {
	font-family: robotothin, Verdana, sans-serif;
	/*color: #ccc314;*/   /*  blue: #245fb3   yellow: #ccc314  */
}
#title h1 {
	font-size: 1.8em;
/*	margin-top: 0.25em;
	margin-bottom: 0.75em;*/
	color: #536ea6;    /*   BLUE WHITE  220 18 62  828b9e   LIGHT BLUE HSB 220 50 65  536ea6     B70 b3b3b3*/
}
#title h1 a.back {
	text-decoration: none;
	color: #394c73;
}
#title h1 a.back:hover {
	color: #5977b3;
}
#content {								/*ver media queries: max1024px*/
	position: relative;
	margin: 0 auto;						/* centrado de  content  dentro de  main   */
	width: 960px;     					/* ancho del bloque de texto del contenido */
	padding: 20px 50px 30px 50px;		/* padding de texto del contenido */
	text-align: left;
	background-color:#01080f;      /* DARK BLUE  HSB 210 96 6  01080f */
	/*background-image: linear-gradient(#0d131a , #010913);*/   /*  sup to inf  #1e252d, #010913  14191f  */
}


/* estilo de fuentes */
#content h1, h2, h3 {
	font-family: robotothin, Verdana, sans-serif;
	/*color: #ccc314;*/   /*  blue: #245fb3   yellow: #ccc314  */
}
#content h1 {
	font-size: 1.8em;     /* 3em */
	margin-top: 0.25em;
	margin-bottom: 0.75em;
	color: #b3b3b3;
}
#content h1 a.back {
	text-decoration: none;
	color: #666666;
}
#content h1 a.back:hover {
	color: #b3b3b3;
}
#content h2 {
	font-size: 1.2em;    /* 2em */
	margin-top:1.5em;
	margin-bottom: 0.6em;
	/*color: #cccccc;*/ 
	color: #536ea6;    /*   BLUE WHITE  220 18 62  828b9e   LIGHT BLUE HSB 220 50 65  536ea6     B70 b3b3b3*/
}
#content h3 {
	font-size: 1.2em;   /* 1.5em */
	margin-top:0.1em;
	margin-bottom: 0.5em;
	/*color: #a6a6a6;*/
	color: #536ea6;    /*   BLUE WHITE  220 18 62  828b9e   LIGHT BLUE HSB 220 50 65  536ea6     B70 b3b3b3*/
}
#content p {
	line-height: 1.50em;       /*  SEPARACION ENTRE LINEAS     1.5em */
	margin-bottom: 0.6em;	 /*    SEPARACION PARRAFOS   (all) (top/bottom left/right)(top right bottom left)   */
}

/* EDICION FEBRERO 2018 */
#content p.citas {
	line-height: 1.5em;
	margin-top: 1.0em;
	margin-bottom: 1.0em;	
	margin-left: 2.0em;
	margin-right: 3.0em;
}


#content .aptitudes {      /*  ver media queries  max 640px */
	width: 480px;          /*  480px */
	float: left;
}

/* control imagenes del pie   2018 */
#content img.pie {
	margin-top: 1.5em;
	width: 100%;
	height: auto;
	
}


/* control imagenes de galeria */
#content .gallery {      
}
#content .gallery:hover {      
}
#content .gallery img {		/* hacer imagen de fondo responsive */
	 width: 100%;
    height: auto;
	border: 1px solid #1a1a1a;
}
#content .gallery img:hover {		
	border: 1px solid #4d4d4d;
}
.responsive {				/*  ver media queries  max 640px */
    padding: 0 1.0%;
    float: left;
    width: 48.0%;
}
#content .gallery p {		/* texto descripción imagen*/
	text-align: center;
	margin: 0;
	padding: 0 0 30px 0;
}
#content .gallery a {
	text-decoration: none;
	color: #6b6b6b;
}
#content .gallery a:hover {		
    color: #808080;
}
.clearfix:after {
    content: "";
    display: table;
    clear: both;
}
/* end gallery */
#content ul {
	margin-left: 1.0em;
	margin-bottom: 1.0em;
}

#content li {
	line-height: 1.5em;
}


#contacto {
	text-align: center;
}

#content .logoYoutube {
	 opacity: 1.00;
     filter: alpha(opacity=100); /* For IE8 and earlier */
}
#content .logoYoutube:hover {
	 opacity: 0.80;
     filter: alpha(opacity=80); /* For IE8 and earlier */
}

#imagen img {		/* hacer imagen de fondo responsive */
	width: 100%;   	
	height: auto;
	margin: 0;
	/*margin-bottom: 20px;*/   /*SEPARACION ENTRE SLIDES Y CONTENT*/
	padding: 20px 0;
	top: 00;
	left: 0;
}

/* M A I N   C O N T E N T    E N D */




/* EXTRAS */
.clear {
	clear: both
}




/* F O O T E R */
footer {
	position: relative;
	
	
	/*margin: 0 auto;	*/					/* centrado de  content  dentro de  main   */
	/*width: 960px; */    					/* ancho del bloque de texto del contenido */
	/*padding: 5px 50px 0px 50px;*/		/* PADDING DE FOOTER */
	
	/*margin-top: -4px;*/      /* para eliminar linea inferior del elemento wrapper, pero no se usa, pues */
	                           /* margen negativo provoca que elementos superiores muevan contenido de footer*/
							   /* se, usa márgen negativo, pero en el inferior del div main */
	/*background-color: #0f0f0f;*/ /* #0d0d0d 5% #0f0f0f 6% #121212 7.5% */
	background-color:#01080f;      /* DARK BLUE  HSB 210 96 6  01080f */
	text-align: center;
	
	
}
/* logo de sección (texto: animus/visus) */
footer .textoFooterCenter {
	 padding: 15px 0px 1px 0px;
	 opacity: 1.00;
     filter: alpha(opacity=100); /* For IE8 and earlier */	
	 border-style: none;
	 outline: none;
}
footer .textoFooterCenter:hover {
	 opacity: 0.60;
     filter: alpha(opacity=60); /* For IE8 and earlier */
}
/* barra de navegación */
#navFooter {
	margin: 0 auto;  
	padding: 0.35em 0 0.15em 0;
	/*background-color: blue;*/  /* debug */
}
#navFooter a {
	padding: 0 0.12em;
	font-size: 0.85em;
	color: #666666;  /* B35 404040   B30 4d4d4d  B35 595959  */
	line-height: 1.0em;
	text-decoration: none;
}
#navFooter a:hover {
	color: #333333;
}
/* copyright */
footer #copyright {
	color: #4d4d4d;   /* 333333 */
	/*color: #666666;*/  /*web-safe rgb 102 102 102 */
	/*color: #808080;*/  /*web-safe? rgb 128 128 128 */
	padding: 4px 0px 15px 0px;
}
footer p {
	font-size: 0.75em;
	line-height: 1.6em;
}


















/* F I X E D    S I Z E */	

@media only screen and (min-width: 1561px) {      /* 1561px   new 1921 */

/* C O N T E N E D O R */
/* contenido de ancho fijo 1560px y centrado horizontalmente */
#wrapper {
	width: 1560px;			/* 1560px   new 1920 */
	height: auto;
}


header {

}



#content {
	
}




}







/* D E S K T O P */	

@media only screen and (max-width: 1560px) {        /* 1560px   new 1920 */

/* C O N T E N E D O R */
/* contenido de ancho ajustable */
#wrapper {
	width: 100%;
	height: auto;
}


#content {
	/*width:100%;*/     	/* ancho del bloque de texto del contenido */
}



}







/* L A P T O P S */	

@media only screen and (max-width: 1360px) { 

/* C O N T E N E D O R */
/* contenido de ancho ajustable */
#wrapper {
	width: 100%;
	height: auto;
}





}












/* I M A G E S    C H A N G E S    F R O M    1 5 6 0    P X   T O    1 0 2 0    P X  */

/* T A B L E T S */	

@media only screen and (max-width: 1024px) { 

/* C O N T E N E D O R */
/* contenido de ancho ajustable, hasta mínimo de 360px */
#wrapper {
	width: 100%;
	height: auto;
}


#content {
	width:90%;     					/* ancho del bloque de texto del contenido */
	padding: 20px 7% 30px 7%;		/* padding de texto del contenido */
}



}


footer {
	/*width: 100%;  */   					/* ancho del bloque de texto del contenido */
	
}




/* I N T E R */	

@media only screen and (max-width: 768px) { 

/* C O N T E N E D O R */
/* contenido de ancho ajustable */
#wrapper {
	width: 100%;
	height: auto;
}



/* A J U S T E    D E    E N C A B E Z A D O */
/* H E A D E R   S T A R T */
header {

}
/* H E A D E R    P O S I T O N */
/* logo area */
#logoArea {	
	position: relative;
	width: 100%;
	margin: -5px auto;
	padding: 10px 0px 0px 0px;			
	/*width: 150px;
	height: 35px;
	float: right;
	padding: 15px 30px 2px 30px;*/  /*top right bottom left*/
}
/* logo header */
#logoHeader {
	position: relative;
	width: 100%;
	margin: auto;
	padding: 0;
	/*position: absolute;
	top: 15px;  
	width: 300px;
	height: 35px;
	float: left;
	padding: 10px 30px 0px 30px;*/  /*top right bottom left*/
}
#logoHeader img {
	width: 240px;
	height: 28px;
}
/* nav bar */
#navHeader {
	position: relative;
	width: 100%;
	margin: auto;
	padding: 15px 0px 10px 0px;
	/*position: relative;
	float: right;
	padding: 2px 30px 15px 30px;*/  /*top right bottom left*/
}
/* H E A D E R    S T Y L E */
/* logo header */
#logoHeader img {
	 opacity: 0.70;
     filter: alpha(opacity=80); /* For IE8 and earlier */
}
#logoHeader img:hover {
	 opacity: 0.50;
     filter: alpha(opacity=40); /* For IE8 and earlier */
}




}






/* P H O N E S */	

@media only screen and (max-width: 640px) { 

/* C O N T E N E D O R */
/* contenido de ancho ajustable */
#wrapper {
	width: 100%;
	height: auto;
	min-width: 360px;
}


#content .aptitudes {      /*  ver media queries  max 640px */
	width: 100%;
}

.responsive {
    width: 100.0%;
}


}