/*El atributo charset especifica la codificación de
carácteres para el documento HTML, y con él podemos
escribir acentos por ejemplo.*/
@charset "utf-8";

/* Archivos importados
--------------------------------------------------------------------------------------- */
@import url("fontawesome-4.5.0.min.css");
@import 'https://fonts.googleapis.com/css?family=Gudea';
@import 'https://fonts.googleapis.com/css?family=Donegal+One';

/*@import url(https://fonts.googleapis.com/css?family=Raleway:400,700);
@import url(https://fonts.googleapis.com/css?family=Libre+Baskerville:400,400italic,700);*/

/* =============================================================================
   DISEÑO MÓVIL: 480PX E INFERIOR.
   ========================================================================== */

html{overflow-y:scroll; overflow-x:hidden;}

html, body{margin:0; padding:0; font-size:14px; line-height:1.6em;}

html {position: relative; min-height: 100%;}
body {/*Margin bottom by footer height */ margin-bottom: 242px;}

/* Transición
--------------------------------------------------------------------------------------- */
*, *::before, *::after{box-sizing:border-box;}

/* Estilos de texto
------------------------------------------------------------------------------------------ */

.center{text-align:center;}
.right{text-align:right;}
.left{text-align:left;}
.justify{text-align:justify;}
.bold{font-weight:bold;}
.uppercase{text-transform:uppercase;}
.capitalise{text-transform:capitalize;}

.white{ color:#fff;}
.resaltar{color:red;}

.hidden{display:none;}
.nospace{margin:0; padding:0; list-style:none;}
.block{display:block;}
.inline *{display:inline-block;}
.inline *:last-child{margin-right:0;}

.pushright li{margin-right:20px;}
.pushright li:last-child{margin-right:0;}

.borderedbox{border:1px solid;}

.overlay{position:relative; z-index:1;}
.overlay::after{display:block; position:absolute; top:0; left:0; width:100%; height:100%; content:""; z-index:-1;}

.bgded{background-position:top center; background-repeat:no-repeat; background-size:cover;}
.circle{border-radius:50%; background-clip:padding-box;}

a{outline:none; text-decoration:none;}

.bac{ background: red;}

.resaltardos{
	font-weight: bold;
	color:#426DA7;
}
/* Íconos
------------------------------------------------------------------------------------------ */
.icon{display:inline-block; position:relative; margin-bottom:50px; width:100px; height:100px; line-height:98px; border-radius:50%; background-clip:padding-box; text-align:center; font-size:36px;}
article .icon{color:#FFFFFF; background-color:#292B2C;}
article:hover .icon{color:#292B2C; background-color:#DDC915;}

/* Estilos de imágen
------------------------------------------------------------------------------------------ */

.fl_left, .imgl{float:left;}
.fl_right, .imgr{float:right;}
img{width:auto; max-width:100%; height:auto; margin:0; padding:0; border:none; line-height:normal; vertical-align:middle;}
.imgl{margin:0 15px 10px 0; clear:left;}
.imgr{margin:0 0 10px 15px; clear:right;}

/*Estas clases sirven para mostrar imágenes en la
vista de celular y ocultarla en las otras vistas.*/
.img_desk{display: none;}
.img_tablet{display: none;}
.img_movil{display: block;}

img, object, embed, video {max-width: 100%;}
/* IE 6 no admite max-width (anchura máxima),por lo que usa de manera
predeterminada una anchura del 100% */
.ie6 img {width:100%;}

/* Fuentes
------------------------------------------------------------------------------------------ */
body, input, textarea, select{font-family: 'Gudea', sans-serif;}
h1, h2, h3, h4, h5, h6, .heading{font-family: 'Donegal One', serif; font-size:22px;}
p{line-height: 22px;font-size:16px;}

/* Generalizar
------------------------------------------------------------------------------------------ */

h1, h2, h3, h4, h5, h6, .heading{margin:0 0 20px 0; line-height:normal; font-weight:normal; text-transform:uppercase;}

address{font-style:normal; font-weight:normal;}
hr{display:block; width:100%; height:1px; border:solid; border-width:1px 0 0 0;}

.font-xs{font-size:.8rem;}
.font-x1{font-size:1.2rem;}
.font-x2{font-size:1.8rem;}
.font-x3{font-size:2.8rem;}

.sin_espacio{margin-bottom: -10px;}
.sin_espaciodos{margin-bottom: -5px;}

/* Anulaciones HTML 5
------------------------------------------------------------------------------------------ */
address, article, aside, figcaption, figure, footer, header, main, nav, section{display:block;
margin:0; padding:0;}

/* Colores
------------------------------------------------------------------------------------------ */
body{color:#444242; background-color:#fff;}

h1, h2, h3, h4, h5, h6 {color:#426DA7;}
.heading {color:#fff;}

a{color:#DDC915;}
a:active, a:focus{background:transparent;}/* IE10 + 11 Bugfix - prevents grey background */
hr, .borderedbox{border-color:#D7D7D7;}

.degree{
	background: #19265C; /* For browsers that do not support gradients */
    background: -webkit-linear-gradient(#19265C, #009BDB); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(#19265C, #009BDB); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(#19265C,#009BDB); /* For Firefox 3.6 to 15 */
    background: linear-gradient(#19265C,#009BDB); /* Standard syntax */
}

/*::::::::::::::::::::::::::::::::::::
Estilos Footer
::::::::::::::::::::::::::::::::::::*/
footer{background-color:#000;margin-top:30px;}
footer p{color:#fff;font-size: 13px;}
.menu_footer a{font-weight:bold;color:#53BFFF;font-family: 'Libre Baskerville', serif;}
.menu_footer a:hover {color:#fff;}
footer{background-color:inherit;}

/* Copyright
-------------------------------------------------------- */
#copyright{padding:20px 0;}
#copyright *{margin:0; padding:0;}


/* Quick Links
------------------------------------------- */
.quicklinks{}
.quicklinks {padding:30px 0; text-transform:uppercase;}
.quicklinks ul{ text-align:center;}
.quicklinks ul li{display:inline-block; margin-right:10px;}
.quicklinks ul li::after{margin-left:10px; content:"|";}
.quicklinks ul li:last-child::after{margin-left:0; content:"";}

/* Quick Links */
.quicklinks{color:#FFFFFF;}
.quicklinks a{color:inherit;}
.quicklinks ul li::after{color:rgba(255,255,255,.3);}

/* Navigation
----------------------------------------------------------- */
#mainav, #breadcrumb, .sidebar nav{line-height:normal;}
#mainav .drop::after, #mainav li li .drop::after, #breadcrumb li a::after, .sidebar nav a::after{position:absolute; font-family:"FontAwesome"; font-size:10px; line-height:10px;}

/* Breadcrumb */
#breadcrumb{padding:120px 0 20px;}
#breadcrumb ul{margin:0; padding:0; list-style:none; text-transform:uppercase;}
#breadcrumb li{display:inline-block; margin:0 6px 0 0; padding:0;}
#breadcrumb li a{display:block; position:relative; margin:0; padding:0 12px 0 0; font-size:12px;}
#breadcrumb li a::after{top:3px; right:0; content:"\f101";}
#breadcrumb li:last-child a{margin:0; padding:0;}
#breadcrumb li:last-child a::after{display:none;}

/* Navigation */
#breadcrumb a{color:inherit; background-color:inherit;}
#breadcrumb li:last-child a{color:skyblue;}


.boxleft{
	display:block;
	float:left;
	width:50%;
	padding:0 4%;
	color:#797979;
	height: 391px;
	background-position:top right;
	background-repeat:no-repeat;
	background-size:cover;
	background-image:url('../../documentacion/img/03.png');
	
}

.boxright{
	display:block;
	float:right;
	width:50%;
	padding:80px 4%;
	color:white;
	height: 391px;
}


	.foot {
	  position: absolute;
	  bottom: 0;
	  width: 100%;
	  /* Set the fixed height of the footer here */
	  height: 242px;
	}

/* Gallery-------------------------------------------------------------- */
#gallery{display:block; width:100%; margin-bottom:50px;}
#gallery figure figcaption{display:block; width:100%; clear:both;}
#gallery li{margin-bottom:30px;}

nav ul, nav ol{margin:0; padding:0; list-style:none;}
/* Pagination */
 .pagination{display:block; width:100%; text-align:center; clear:both;}
 .pagination li{display:inline-block; margin:0 auto; border: 1px solid #333; }
.pagination li:hover a{background:#009BDB; color:#fff;}
 .pagination li:last-child{margin-right:0;}
 .pagination a, .pagination strong{display:block; padding:8px 11px;  background-clip:padding-box; font-weight:normal;}

/* Navigation */
.pagination a, .pagination strong{border-color:#D7D7D7;}
.pagination .current *{color:#FFFFFF; background-color:#009BDB;}


/* =============================================================================
   DISEÑO TABLETA: DE 481PX A 768 PX. HEREDA ESTILOS DE: DISEÑO MÓVIL.
   ========================================================================== */

@media only screen and (min-width: 481px) {
	
body {/*Margin bottom by footer height */ margin-bottom: 178px;}
    
/*Estas clases sirven para mostrar imágenes en la
vista de tableta y ocultarla en las otras vistas.*/    
.img_desk{ display: none;}
.img_tablet{ display: block;}
.img_movil{ display: none;}
	
	
.foot {
	  position: absolute;
	  bottom: 0;
	  width: 100%;
	  /* Set the fixed height of the footer here */
	  height: 178px;
	}
}

.redes a{
	color:#426DA7;
	font-weight:bolder;
}


/* =============================================================================
   DISEÑO ESCRITORIO: DE 769PX HASTA UN MÁXIMO DE 1232 PX.  HEREDA ESTILOS DE:
   DISEÑO MÓVIL Y DISEÑO TABLETA.
   ========================================================================== */

@media only screen and (min-width: 769px) {
	
body {/*Margin bottom by footer height */ margin-bottom: 144px;}
    
/*Estas clases sirven para mostrar imágenes en la
vista de escritorio y ocultarla en las otras vistas.*/        
.img_desk{display: block;}
.img_tablet{display: none;}
.img_movil{display: none;}
	
.foot {
	  position: absolute;
	  bottom: 0;
	  width: 100%;
	  /* Set the fixed height of the footer here */
	  height: 144px;
	}
	
}

@media screen and (max-width:750px){
.boxleft{float:none; width:100%; padding:10%;}
.boxright{float:none; width:100%; padding:10%;}	
}

/* Mobile Devices
-------------------------------------------------------- */
@media screen and (max-width:900px){
	#copyright{}
	#copyright p:first-of-type{margin-bottom:10px;}
}

@media screen and (max-width:750px){
	.fl_left, .fl_right{display:block; float:none;}
}