@charset "utf-8";
/* CSS DEL BOTON Y TEXTO 'MENÚ' */
@import url("../../webfonts/TitilliumWeb_SemiBoldItalic/stylesheet.css");
@import url("../../webfonts/TitilliumWeb_LightItalic/stylesheet.css");
@import url("../../webfonts/TitilliumWeb_ExtraLight/stylesheet.css");
@import url("../../webfonts/TitilliumWeb_SemiBold/stylesheet.css");

*{margin: 0; padding: 0;}
body {margin: 0;padding: 0;background-color: #333;}

/*-----// CONTIENE LA BARRA MENU Y SIRVE PARA OCULTARLA AL BAJAR LA PAGINA //-----*/
.shy-header {
	width: 100%;
	max-width: 100%;
	position: fixed;
	z-index: 1;
	-webkit-transition: all 200ms ease-out;
	transition: all 200ms ease-out;
	background: rgba(255,255,255,.8);
	padding: 0px;
}

.is-watching {-webkit-transform: translate3d(0,-100%,0);transform: translate3d(0,-100%,0);}

/*----------------------------------------------------------------------------------*/
/*---------------------------// CONFIGURACION GENERAL //----------------------------*/
/*----------------------------------------------------------------------------------*/

.nav {
	font-family: "TitilliumWeb SemiBoldItalic";
	overflow: hidden;
	display: flex;
	justify-content: left;
	align-items: center;
	background: rgb(169,3,41); /* Old browsers */
	background: -moz-linear-gradient(top,  rgba(169,3,41,1) 0%, rgba(143,2,34,1) 44%, rgba(109,0,25,1) 100%);
	background: -webkit-linear-gradient(top,  rgba(169,3,41,1) 0%,rgba(143,2,34,1) 44%,rgba(109,0,25,1) 100%);
	background: linear-gradient(to bottom,  rgba(169,3,41,1) 0%,rgba(143,2,34,1) 44%,rgba(109,0,25,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a90329', endColorstr='#6d0019',GradientType=0 ); 	margin: 0;/*text-align: center; para centrar el menu en pagina */
	width: auto;
	padding-top: 0%;
	padding-right: 2%;
	padding-bottom: 0%;
	padding-left: 2%;
	z-index: 10002;
	/*display: none;*/
}

X.menu-btn, X.a2, X.a3, X.a4 {padding-top: 1.0%;padding-right: 2%;padding-bottom: 1.0%;
padding-left: 2%;}

/*-------------------------------// FIN DE LA BARRA //------------------------------*/

/*------------------------------------------------------------------------------*/
/*-------------------// INICIO BOTON DEL MENU DE LA WEB //----------------------*/
/*------------------------------------------------------------------------------*/
#contenebtnmenu{/* #FFF;background-color: #900;*/display: table;border-radius: 7pt;
width: auto;font-family: "TitilliumWeb SemiBoldItalic";cursor: pointer;
-webkit-transition: all 0.8s;-moz-transition: all 0.8s;-ms-transition: all 0.8s;
-o-transition: all 0.8s;transition: all 0.8s;padding-top: 6px;padding-right: 10px;
padding-bottom: 6px;padding-left: 10px;border-top-width: 3px;border-right-width: 3px;
border-bottom-width: 2px;border-left-width: 2px;border-top-style: solidborder-right-style: solid;border-bottom-style: solid;border-left-style: solid;
border-top-color: #800;border-right-color: #800;border-bottom-color: #800;border-left-color: #800;}
#contenebtnmenu:hover{background-color: #900; border-radius: 7pt;}
.fa{margin-right: 5px; font-size: 1.9em;}
.btn-menu{display: table-cell;vertical-align: middle;color: #FFF;font-family: "TitilliumWeb SemiBoldItalic";}
.btn-menu{font-size: 1.1em;}
/*------------------------------------------------------------------------------*/
/*---------------------// FIN BOTON DEL MENU DE LA WEB //-----------------------*/
/*------------------------------------------------------------------------------*/


/*----------------------------------------------------------------------------------*/
/*-----------------------------// INICIO DONDE ESTAS //-----------------------------*/
.a2 {padding-top: 1.0%; padding-right: 0%; padding-bottom: 1.0%; padding-left: 1%;margin-left: 0%;margin-right: 9%;}
.a2 {font-size: 1em;color: #FFFFFF;font-family: "TitilliumWeb SemiBoldItalic";}
.a2 {max-width: 25%; min-width: 25%; display: inline-block;text-decoration: none;
-webkit-transition: all 0.8s;-moz-transition: all 0.8s;-ms-transition: all 0.8s;
-o-transition: all 0.8s;transition: all 0.8s; background-color: #666666;/*#C00*/
border-radius: 7pt;/*border-bottom-width: 1px;border-bottom-style: inset;
border-bottom-color: #999;*/}
.a2:hover{/*--- background-color: #0F0; ---*/
color: #FFFFFF;background-color: #336600;}
/*-------------------------------// FIN DONDE ESTAS //------------------------------*/
/*----------------------------------------------------------------------------------*/


.img-logo, .img-avatar {width: auto; max-height: 50px;width: auto;display: inline-block;
vertical-align: middle;}
.img-logo:hover, .img-avatar:hover {opacity: 0.5;-webkit-transition: all 0.8s;-moz-transition: all 0.8s;-ms-transition: all 0.8s;-o-transition: all 0.8s;transition: all 0.8s;}
/*-----------------------------// FIN IMAGEN LOGOTIPO //----------------------------*/

#a4 {/*------// A4 IMAGEN AVATAR //------*/
padding-left: 0%; padding-right: 0%;}
.img-avatar {border-radius: 50%;}
/*-----------------------------// FIN IMAGEN AVATAR //------------------------------*/
/*----------------------------------------------------------------------------------*/


/*----------------------------------------------------------------------------------*/
/*-----------------------------// INICIO DE POSICIONES //---------------------------*/
/*----------------------------------------------------------------------------------*/

#a1{margin-left: 0.0%; margin-right: 2%; display: table-cell; vertical-align: middle;}
#a2{display: block; margin-left: 0%; margin-right: 5%;}
#a3{margin-left: 0%; margin-right: 32%; padding-left: 0%; padding-right: 0.0%;}/*background-color: #0f0;*/




/*----------------------------------------------------------------------------------*/
/*-------------------------------// FIN DE POSICIONES //----------------------------*/
/*----------------------------------------------------------------------------------*/

@media (min-width: 1367px) and (max-width: 1440px) and (orientation: landscape) { /*---// #a2 MAXIMO 38 CARACTERES //---*/
#a2 {margin-left: 3%; margin-right: 0%; width: 30%; min-width: 30%; max-width: 30%;}
#a3 {margin-left: 8%; margin-right: 22%; padding-left: 0%; padding-right: 0.0%;}
.img-logo, .img-avatar {max-height: 60px;}
.a2, .btn-menu{font-size: 1.3em;}
.fa{font-size: 1.9em;}
}

@media (min-width: 1281px) and (max-width: 1366px) and (orientation: landscape) { /*---// #a2 MAXIMO 38 CARACTERES //---*/
#a2 {margin-left: 3%; margin-right: 0%; width: 30%; min-width: 30%; max-width: 30%;}
#a3 {margin-left: 8%; margin-right: 20%; padding-left: 0%; padding-right: 0.0%;}
.img-logo, .img-avatar {max-height: 60px;}
.a2, .btn-menu{font-size: 1.3em;}
.fa{font-size: 1.9em;}
}




@media (min-width: 1280px) and (orientation: landscape) { /*---// #a2 MAXIMO 38 CARACTERES //---*/
.nav {padding-top: 0.5%;padding-right: 1.5%;padding-bottom: 0.5%;padding-left: 1.5%;margin-top: 0;}
#a2 {margin-left: 3%; margin-right: 0%; width: 30%; min-width: 30%; max-width: 30%; padding-top: 0.5%; padding-right: 0%; padding-bottom: 0.5%; padding-left: 1%;}
#a3 {margin-left: 8%; margin-right: 27.5%; padding-left: 0%; padding-right: 0.0%;}
.img-logo, .img-avatar {width: auto; max-height: 44px;}
.a2, .btn-menu{font-size: 1.0em;}
.fa{font-size: 2.0em;}
}

@media (min-width: 900px) and (max-width: 1024px) and (orientation: landscape) {
#a2 {margin-left: 3%; margin-right: 0%; width: 30%; min-width: 30%; max-width: 30%;}
#a3 {margin-left: 8%; margin-right: 19%; padding-left: 0%; padding-right: 0.0%;}
.img-logo, .img-avatar {max-height: 46px;}
}

@media (min-width: 813px) and (max-width: 823px) and (orientation: landscape) {
#a2 {margin-left: 3%; margin-right: 0%; width: 30%; min-width: 30%; max-width: 30%;}
#a3 {margin-left: 7%; margin-right: 8%; padding-left: 0%; padding-right: 0.0%;}
.img-logo, .img-avatar {max-height: 50px;}
}

@media (min-width: 737px) and (max-width: 812px) and (orientation: landscape) {
#a2 {margin-left: 3%; margin-right: 0%; width: 30%; min-width: 30%; max-width: 30%;}
#a3 {margin-left: 8%; margin-right: 10%; padding-left: 0%; padding-right: 0.0%;}
.img-logo, .img-avatar {max-height: 44px;}
}

@media (min-width: 668px) and (max-width: 736px) and (orientation: landscape) {
#a2 {margin-left: 3%; margin-right: 0%; width: 30%; min-width: 30%; max-width: 30%;}
#a3 {margin-left: 6%; margin-right: 6%; padding-left: 0%; padding-right: 0.0%;}
.img-logo, .img-avatar {max-height: 45px;}
}

@media (min-width: 641px) and (max-width: 667px) and (orientation: landscape) {
#a2 {margin-left: 3%; margin-right: 0%; width: 30%; min-width: 30%; max-width: 30%;}
#a3 {margin-left: 4%; margin-right: 4%; padding-left: 0%; padding-right: 0.0%;}
.img-logo, .img-avatar {max-height: 45px;}
}

@media (min-width: 569px) and (max-width: 640px) and (orientation: landscape) {
#a2 {margin-left: 2%; margin-right: 0%; width: 30%; min-width: 30%; max-width: 30%;}
#a3 {margin-left: 3%; margin-right: 3%; padding-left: 0%; padding-right: 0.0%;}
.img-logo, .img-avatar {max-height: 45px;}
}


@media (min-width: 560px) and (max-width: 568px) and (orientation: landscape) {
#a2 {margin-left: 0%; margin-right: 0%; width: 30%; min-width: 30%; max-width: 30%;}
#a3 {margin-left: 3%; margin-right: 3%; padding-left: 0%; padding-right: 0.0%;}
.img-logo, .img-avatar {max-height: 40px;}
}



@media (min-width: 1025px) and (max-width: 1080px) and (orientation: portrait) {
#a2 {margin-left: 3%; margin-right: 0%; width: 30%; min-width: 30%; max-width: 30%;}
#a3 {margin-left: 8%; margin-right: 21%; padding-left: 0%; padding-right: 0.0%;}
.img-logo, .img-avatar {max-height: 46px;}
}

@media (min-width: 1000px) and (max-width: 1024px) and (orientation: portrait) {
#a2 {margin-left: 3%; margin-right: 0%; width: 30%; min-width: 30%; max-width: 30%;}
#a3 {margin-left: 8%; margin-right: 19%; padding-left: 0%; padding-right: 0.0%;}
.img-logo, .img-avatar {max-height: 46px;}
}

@media (min-width: 901px) and (max-width: 992px) {
#a2 {margin-left: 3%; margin-right: 0%; width: 30%; min-width: 30%; max-width: 30%;}
#a3 {margin-left: 9%; margin-right: 18%; padding-left: 0%; padding-right: 0.0%;}
.img-logo, .img-avatar {max-height: 44px;}
}

@media (min-width: 850px) and (max-width: 900px) {
#a2 {margin-left: 3%; margin-right: 0%; width: 30%; min-width: 30%; max-width: 30%;}
#a3 {margin-left: 9%; margin-right: 14%; padding-left: 0%; padding-right: 0.0%;}
.img-logo, .img-avatar {max-height: 44px;}
}



@media (min-width: 769px) and (max-width: 800px) and (orientation: portrait) {
#a2 {margin-left: 3%; margin-right: 0%; width: 30%; min-width: 30%; max-width: 30%;}
#a3 {margin-left: 9%; margin-right: 8%; padding-left: 0%; padding-right: 0.0%;}
.img-logo, .img-avatar {max-height: 44px;}
}

@media (min-width: 601px) and (max-width: 768px) and (orientation: portrait) {
#a2 {margin-left: 3%; margin-right: 0%; width: 30%; min-width: 30%; max-width: 30%;}
#a3 {margin-left: 9%; margin-right: 8%; padding-left: 0%; padding-right: 0.0%;}
.img-logo, .img-avatar {max-height: 44px;}
}

@media (min-width: 569px) and (max-width: 600px) and (orientation: portrait) {
#a2 {margin-left: 1%; margin-right: 0%; width: 30%; min-width: 30%; max-width: 30%;}
#a3 {margin-left: 2%; margin-right: 2%; padding-left: 0%; padding-right: 0.0%;}
.img-logo, .img-avatar {max-height: 45px;}
}

@media (min-width: 200px) and (max-width: 540px) and (orientation: portrait) {
.btn-menu{font-size: 1.0em;}	
#a2 {margin-left: 1%; margin-right: 0%; width: 29%; min-width: 29%; max-width: 29%;}
#a3 {margin-left: 2%; margin-right: 2%; padding-left: 0%; padding-right: 0.0%;}
.img-logo, .img-avatar {max-height: 40px;}
}

@media (min-width: 200px) and (max-width: 480px) and (orientation: portrait) {
.btn-menu{font-size: 1.0em;}
.fa{font-size: 1.2em; /*display: none;*/}
#a2{display: none;}
.img-logo, .img-avatar {max-height: 32px;}
}

@media (max-width: 414px) and (orientation: portrait) {
#a3{margin-left: 13%; margin-right: 16%;}
}

@media (max-width: 384px) and (orientation: portrait) {
#a3{margin-left: 9%; margin-right: 16%;}
}

@media (min-width: 361px) and (max-width: 375px) and (orientation: portrait) {
#a3{margin-left: 10%; margin-right: 12%;}
}

@media (min-width: 321px) and (max-width: 360px) and (orientation: portrait) {
#a3{margin-left: 7%; margin-right: 11%;}
}

@media (max-width: 320px) and (orientation: portrait) {
#a3{margin-left: 3%; margin-right: 6%;}/*background-color: #0f0;*/
}

@media (max-width: 280px) and (orientation: portrait) {
#a2 {margin-left: 1.5%;}
#a3{margin-left: 0%; margin-right: 1%;}/*background-color: #0f0;*/
}