/* RESET STYLES */
*, html, body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, label, fieldset, input, p, blockquote, th, td { margin:0; padding:0 }
table { border-collapse:collapse; border-spacing:0 }
fieldset, img { border:0 }
address, caption, cite, code, dfn, em, strong, th, var { font-style:normal; font-weight:normal }
ol, ul, li { list-style:none }
caption, th { text-align:left }
h1, h2, h3, h4, h5, h6 {font-weight:normal;}
q:before, q:after { content:''}
strong { font-weight: bold }
em { font-style: italic }
.italic { font-style: italic }
.aligncenter { display:block; margin:0 auto; }
.alignleft { float:left; margin:10px; }
.alignright { float:right;margin:10px; }
.no-margin{margin:0px;}
.no-bottom{margin-bottom:0px;}
.no-padding{padding:0px;}
.margin-t{margin-top:22px;}
a{text-decoration:none;}

/*div { position:relative }*/		/* Este comando activado me manda las flechas del slider hacia arriba */
/*a{text-decoration:none;}*/
/*a:hover{text-decoration:underline;}
a:active,a:focus{outline: none;}*/

img.alignleft, img.alignright, img.aligncenter {
    margin-bottom: 11px;
}

.alignleft, img.alignleft{
    display: inline;
    float: left;
    margin-right: 22px;
}

.alignright, img.alignright {
    display: inline;
    float: right;
    margin-left: 22px;
}

.aligncenter, img.aligncenter {
    clear: both;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

article, aside, figure, footer, header, hgroup, nav, section {display: block;}

*{ 
	-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
	-moz-box-sizing: border-box;    /* Firefox, other Gecko */
	box-sizing: border-box;         /* Opera/IE 8+ */
}

a{color:#BA0707;}
a:hover{color:#BA0707;text-decoration:underline;}

h1{font-size:36px;line-height:1.3em; color: #000}
h2{font-size:32px;line-height:1.3em; color: #000}
h3{font-size:24px;line-height:1.3em;}
h4{font-size:18px;line-height:1.3em;}
h5{font-size:16px;}
h6{font-size:14px;}
p{padding-bottom:11px;}
p,div, span{line-height:1.5em;}		
.column-clear{clear:both;}
.clear{overflow: hidden;}

.mainWrap{width:950px;margin:0 auto;}			/* Si se quita manda el menu principal a la izquierda */

.title{margin:100px 0 20px 0;
text-align:center;
color:#3E4156;}
.back{text-align:center;}

nav{display:block;
margin-top: 0px;								/* Original 100px Sube o baja el menu */
background:#0769E9;								/* Original negro #3E4156 Color de la barra del menu principal, actual color negro */
}

.menu{display:block;}

.menu li{display: inline-block;					/* Si se quita el menu principal queda vertical queda horrible */
position: relative;
z-index:100;}

.menu li:first-child{margin-left:0;}

/*.menu li a {font-weight:400;*/				/* Original, Controla el tamaño de fuente del menu principal */

.menu li a {font-size:17px;						/* Controla el tamaño de fuente del menu principal */
text-decoration:none;							/* Si se desactiva subraya las opciones de los menus, y se ve feo */
padding:6px;									/* Achica o agranda el ancho de la banda antes negra ahora celeste, del menu principal original 11px */
display:block;
color:#ffffff;									/* #ffffff color blanco, 7fffd4 Controla el color de la fuente del menu principal */
-webkit-transition: all 0.2s ease-in-out 0s;
   -moz-transition: all 0.2s ease-in-out 0s;
   -o-transition: all 0.2s ease-in-out 0s;
   -ms-transition: all 0.2s ease-in-out 0s;
   transition: all 0.2s ease-in-out 0s;
}

.menu li a:hover, .menu li:hover > a{color:#3E4156;			/* #ffffff, 3E4156 Controla el color de fondo del cuadro de color celeste claro del menu principal */
background:#a2d9ce;											/* #a3e4d7 verde, #9CA3DA el original Controla el color de fondo del cuadro de color celeste claro del menu principal */
}			

.menu ul {display: none;						/* No tocar esbarata el menu principal */
margin: 0;
padding: 0;
width: 165px;									/* Controla el tamaño o ancho de las opciones de los submenus */
position: absolute;
top: 35px;										/* Alinea o pega o despega el submenu al menu a la barra negra */
left: 0px;										/* Corre a la izquierda o derecha el submenu */
/*background: #ffffff;*/						/* Original #ffffff; actual a3e4d7 verde */
}

.menu ul li {display:block;						/* Controla los submenus que esten en orden hacia abajo */
float: none;
background:none;
margin:0;
padding:0;
}

.menu ul li a {font-size:16px;					/* Controla el tamaño del fuente de los submenus */
font-weight:normal;
display:block;
color:#1b2631;  								/* Original #797979; Este color hace que los submenus se vean de lo contrario se pierden */
border-left:0px solid #ffffff;
background:#a2d9ce;								/* Original #ffffff; genera el cuadro o rectangulo de las opciones del submenu */
}

.menu ul li a:hover, .menu ul li:hover > a{
background:#f0f0f0;								/* Efecto de la franja gris de cada opcion del submenu */
border-left:6px solid #0769E9;					/* Original #5dade2 Original #9CA3DA, Efecto de la reyita celeste que se hace al lado izquierdo que se hace en las opciones del submenu */
/*color:#797979;*/
}

.menu li:hover > ul{ display: block;}			/* Esconde las opciones de los submenus */
.menu ul ul {left: 149px;
top: 0px;
}

/* Fin del control del Menu Principal */

/* Menu responsive y sus efectos */

.mobile-menu{display:none;
width:100%;
padding:6px;								/* Achica o agranda el ancho de la banda azul del menu responsive original 11px */
background:#0769E9;							/* #3E4156 Efecto de las 3 Rayitas del menu responsive y la banda negra actual quedo la banda celeste */
color:#ffffff;								/* Actual blanco es el color efecto de las 3 Rayitas del menu responsive */
/*text-transform:uppercase;*/
/*font-weight:600;*/						/* Controla el tamaño de la palabra menu responsive */
}

.mobile-menu:hover{background:#0769E9;		/* Es el color celeste actual de la banda del submenu responsive, antes era color negro */
color:#ffffff;								/* Al desactivarlo crea efecto de las 3 rayitas entre blanco y rojo */
text-decoration:none;						/* Al desactivarlo pone 4 rayitas en lugar de de las 3 rayitas color blanco */
}

/* Este @media que sigue son efectos del menu responsive */

/* DISPOSITIVOS MOVILES */

@media (max-width: 768px) {

.mainWrap{width:auto;padding:0px 10px;}		/* 	Default 50px 20px, 50px sube o baja el menu y 20px agranda la banda negra donde esta la palabra menu en forma responsive */ 

.menu{display:none;}

.mobile-menu{display:block;
margin-top:10px;}							/* Sube o baja el menu cuando esta en forma responsive default 100px */

nav{margin:0;
background:none;}

.menu li{display:block;
margin:0;}

.menu li a {background:#ffffff;				/* Efectos de las bandas grisis de las opciones del menu responsive */
color:#797979;
border-top:1px solid #e0e0e0;
border-left:3px solid #ffffff;}

.menu li a:hover, .menu li:hover > a{
background:#f0f0f0;							/* Efectos */
color:#797979;								/* Efectos */
border-left:6px solid #5499c7;}				/* Original #5dade2 #9CA3DA, Efecto de la rayita celeste que se hace al lado izquierdo que se hace en las opciones del submenu */

.menu ul {display:block;					/* Hace que el menu y las opciones del submenu se abran automaticamente en forma responsive */
position:relative;
top:0;
left:0;
width:100%;}

.menu ul ul {left:0;}

}

/* Fin del primer @media */
	
@media screen and (max-width: 768px){		/* Si se quita los titulos de distorcionan */
 #body-wrapper{
 width:auto;
 }
}