/*
	Plantilla: SI-Recargas HTML5/CSS3 
	Fecha: Enero 2015
	Descripción: Solo HTML5y CSS3 
	Versión: 1.0
	Autor: JM QM
	URL del Autor: http://webcien.com
*/

/* ===========================
   ======= Cuerpo Principal ======== 
   =========================== */
html {
  background-color:#bdd1d6;
  background-image: url(../img/fondo.png);
  padding:0px;
	}
@font-face {
    font-family: 'rubik';
	src: url('rubik-regular-webfont.eot');
	src: url('rubik-regular-webfont.eot?iefix') format('eot'),
	     url('rubik-regular-webfont.woff') format('woff'),
	     url('rubik-regular-webfont.ttf') format('truetype'),
	     url('rubik-regular-webfont.svg#webfont') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'rubik';
	src: url('rubik-italic-webfont.eot');
	src: url('rubik-italic-webfont.eot?iefix') format('eot'),
	     url('rubik-italic-webfont.woff') format('woff'),
	     url('rubik-italic-webfont.ttf') format('truetype'),
	     url('rubik-italic-webfont.svg#webfont') format('svg');
    font-weight: normal;
    font-style: italic;
}
@font-face {
    font-family: 'Heuristica';
	src: url('Heuristica-Bold-webfont.eot');
	src: url('Heuristica-Bold-webfont.eot?iefix') format('eot'),
	     url('Heuristica-Bold-webfont.woff') format('woff'),
	     url('Heuristica-Bold-webfont.ttf') format('truetype'),
	     url('Heuristica-Bold-webfont.svg#webfont') format('svg');
    font-weight: bold;
    font-style: normal;
}
@font-face {
    font-family: 'rubik';
	src: url('rubik-bolditalic-webfont.eot');
	src: url('rubik-bolditalic-webfont.eot?iefix') format('eot'),
	     url('rubik-bolditalic-webfont.woff') format('woff'),
	     url('rubik-bolditalic-webfont.ttf') format('truetype'),
	     url('rubik-bolditalic-webfont.svg#webfont') format('svg');
    font-weight: bold;
    font-style: italic;
}
p {
	font-family: 'rubik', arial, sans-serif;
   font-weight: normal;
   font-style: normal;
}
strong {
   font-family: 'Heuristica', arial, sans-serif;
   font-weight: bold;
   font-style: normal;
}	
italic {
   font-family: 'rubik', arial, sans-serif;
   font-weight: normal;
   font-style: italic;
}
body {
    margin: 0 auto; 
	width: 88%;
	background-color:#dee8ea;
    background-image: url(../img/fondo.png);
	color: #000305;
	font-size: 100%; /* Base font size: 14px */
	font-family: 'rubik', 'Trebuchet MS', Trebuchet, 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
	line-height: 1.429;
}
#parte-alta {
  width: 100%;
  display:block;
  margin:auto; 
  padding:0%;
  position:relative;
  border:0 auto ;	
}
#esptop a {
  color:blue;
  background:none;
  margin-left:20px;
  border:none ;	
}
/*espacio top*/
#esptop.maestro { width: 100%; max-width: 100%; background: #d2d7d8 }
#esptop .main-inner { max-width: 100%; margin: 0 auto; }

/* principal layout */
.wrap { width: 100%; display:inline }
.maestro { max-width:100p%; width: 100%; margin: 0 auto; display:block; clear:both }

.main-inner { margin: 0 15px; display:block; position:relative;} 
.browserIE8 .main {max-width: 100%; }

.top1 {
  height: 20px;
  background-color: #dee8ea;
  background-image: url(../img/fondo.png);
 
}

/* ===========================
   ========= Encabezados ======== 
   =========================== */
h2 {font-size: 1.571em}	/* 22px */
h3 {font-size: 1.429em}	/* 20px */
h4 {font-size: 1.286em}	/* 18px */
h5 {font-size: 1.143em}	/* 16px */
h6 {font-size: 1em}		/* 14px */

h2, h3, h4, h5, h6 {
	font-weight: 400;
	line-height: 1.1;
	margin-bottom: .8em;
}
p { font-family: 'rubik', Arial, sans-serif; }

/* ===========================
   ======= Elementos del Header o cabecera de la Web ====== 
   =========================== */
.mainHeader {
	background: #fff;
	margin-top:-15px;
	}
   
a {
	outline: 0;
	}

a img {
	border: 0px; 
	text-decoration: none;
}
	
figure { 
    display: block;
     margin-top: 1.7%;
    margin-left: 10px;
}
	
img {
  display: block;
  max-width: 100%;
}
	
.logo 	{
	        margin-top:2%;
            margin-bottom:-10px;
	        margin-bottom:5px;
	        padding:20px;
		
                
                
	}
	

.eslogan {
		font-size: 15px;
		font-style: italic;
		margin-top:-16px;
		margin-bottom:0px;
		margin-left:40px;				
	} 

a:link, a:visited {
	padding: 0 0px;
	text-decoration: none;
}

a:hover, a:active {
	color:blue;
	border-bottom:solid 4px;
	background-color: #b2c9d8;
	text-decoration: none;
}

embed:focus { 
    outline: none;
	
	
}
.top-sidebar { 
    margin-left:0px;
    
}

embed { 
text-align:center;
float:left;
	width: 480px;
	height: 1450px;
	
}


.mainHeader nav { 
    white-space: nowrap;   
	background: #2ede24;
	font-size: 1.143em;
	height: 50px;
	line-height: 50px;
	margin:10px 0 1% 0;
	text-align: center;
}


.mainHeader nav .active a:link, .mainHeader nav .active a:visited {
	background: #fff;
	color:blue;
	border-bottom:solid 4px #2ede24;
	text-shadow: none !important;
}

/* ===========================
   ===== Área de Navegación  ===== 
   =========================== */
   
/*Strip the ul of padding and list styling*/
nav ul {
	width:100%;
	list-style-type:none;
	margin-top:0;
	margin-left:0.5%;
	padding:0;
	position: absolute;
}

/*crear la lista horizontal con espacio */
nav li {
	display:inline-block;
	width:16.5%;
	float: left;
	margin-right:0px;
	padding-right: 1px;
    line-height: 1.1;
    list-style: none;
    position: relative;
}

/*Estilo para los enlaces del menú*/
nav li a {
	padding: 0 20px;
	margin-top:0px;
	display:block;
	height: 50px;
	text-align: center;
	line-height: 50px;
	font-family: "rubik", Helvetica, Arial, sans-serif;
	background: #2ede24;
	text-decoration: none;
	color:#fff;
}

/*enlaces de primer nivel al pasar el raton o en hover*/
nav li:hover a {
	color:blue;
	background: #b6e8d6;
	border-bottom:solid 4px #2ede24;
}

/*Estilo de enlaces en dropdown*/
nav li:hover ul a {
	background: #b6e8d6;
	color: #2f3036;
	height: 40px;
	line-height: 40px;
}

/*Hover state for dropdown links*/
nav li:hover ul a:hover {
	background: #fff;
	color: blue;
}

/*Hide dropdown links until they are needed*/
nav li ul {
	display: none;
}

/*Make dropdown links vertical*/
nav li ul li {
	display: block;
	float: none;
}

/*Prevent text wrapping*/
nav li ul li a {
	width: 300px;
	min-width: auto;
	padding: 0 20px;
	font-size:16px;
	height: auto;
}

/*Display the dropdown on hover*/
nav ul li a:hover + .hidden, .hidden:hover {
	display: block;
}

/*Style 'show menu' label button and hide it by default*/
.show-menu {
	font-family: "rubik", Helvetica, Arial, sans-serif;
	font-size:25px;
	text-decoration: none;
	color: #fff;
	background: #2ede24;
	line-height: 25px;
	text-align: center;
	padding: 8px 0;
	display: none;
}

/*Hide checkbox*/
input[type=checkbox]{
    display: none;
}

/*Show menu when invisible checkbox is checked*/
input[type=checkbox]:checked ~ #menu{
    display: block;
}


.mainHeader img {
	width: 30%;
	height: auto;
	margin: 2% 0 2% 3%;
}

/* ===========================
   ======= Area de Contenidos ====== 
   =========================== */

.mainContent {
	overflow: hidden;
	line-height: 25px;
	border-radius: 5px;
}
.mainContent a:hover {
	border:none;
    background:none;
}
.topcontent {
	background-color: #fff;
	margin: 0% 0% 1% 1.5%;
	border-radius: 5px;
	padding: 3% 5%;	
	margin-bottom: 3%;
}

.bottomcontent {
	background-color: #fff;	
	margin: 0% 0% 1% 1.5%;
	border-radius: 5px;	
	padding: 3% 5%;
}

.content {
	width: 68%;
	float: left;
	border-radius: 5px;
}

.post-info {
	font-style: italic;
	color: #737373;
	font-size: 85%;
}

.iframe {
    height: 1550px;
    width: 100%;
}
.conta {
    height: 600px;
    width: 90%;
}
.conta-lat {
    height: 550px;
    width: 100%;
}
/* ===========================
   ======== Sidebar o Area 	Lateral ========== 
   =========================== */

.top-sidebar {
	width: 24%;
	float: left;
	margin: 0px 1% 1% 1%;
	border-radius: 5px;	
	background-color: #fff;	
	padding: 2% 3%;
	margin-bottom: 2%;
}

.middle-sidebar {
	width: 24%;
	float: left;
	margin: 0% 1% 1% 1%;
	border-radius: 5px;	
	background-color: #fff;	
	padding: 2% 3%;
	margin-bottom: 2%;
}

.bottom-sidebar {
	width: 24%;
	float: left;
	margin: 0% 1% 1% 1%;
	border-radius: 5px;
	background-color: #fff;	
	padding: 2% 3%;
}

/* ===========================
   ========= Footer O Pie de página ========== 
   =========================== */

.mainFooter {
	width: 100%;
	float: left;
	margin-top: 0%;
	margin-bottom: 2%;
	padding-left: 0;
	background:#b6e8d6;	  
	border-radius: 5px;
	font-size:12px;	
		
}

.mainFooter p {
	width: 91%;
	margin: 2% auto;
	color:#000;
	text-align:center;
}

.mainFooter a {
	color:#000;
	border:none;
}

.mainFooter a:hover, a:active {
	background-color: #b2c9d8;
	color: #004b7e;
	text-decoration: none;
}
.custom a {
	text-decoration:none;
	
	}


.custom {
	border:none;
	width:100%;
	height:60px;
	margin: 0 auto;}
	
.social-icons {float: right; margin: 5px 1px 0 0;}
.social-icons li {display:inline-block; margin: 0 0 0 1px; padding:0; float:left; background: none}
.social-icons li a {
  display: block; margin: 0; padding:0; width:30px; height:40px;
  -moz-transition: background-color 0.4s ease-out 0s, width 0.4s ease-out 0s; 
  -webkit-transition: background-color 0.4s ease-out 0s, width 0.4s ease-out 0s; 
  transition: background-color 0.4s ease-out 0s, width 0.4s ease-out 0s; 
  background-repeat: no-repeat; background-position: center 8px;
  opacity: 0.5; filter: alpha(opacity=50);
}
.social-icons li a.facebook { background-image: url(../img/iconos/facebook.png); }
.social-icons li a.facebook:hover { background-color: #3B5998}

.social-icons li a.twitter {background-image: url(../img/iconos/twitter.png); }
.social-icons li a.twitter:hover {background-color: #0099B9}

.social-icons li a.google {background-image: url(../img/iconos/googlep.png) }
.social-icons li a.google:hover {background-color: #d34836}

.social-icons li a:hover {width: 40px; background-position: 8px -22px; opacity: 1; filter: alpha(opacity=100);}

.flex-control-nav li a.flex-active {cursor: url(../images/arrow.cur), default;}
/* fin enlaces a redes sociales */

/* enlace para subir página */
.enlace-suben a {
	display:block; 
	float:right; 
  bottom: 0; right: 0;
  border-radius: 20px;
  z-index: 5; 
  margin-right:2px;
}

#suben {
  height: 40px; width: 40px; display:block; margin-right:-70px; margin-top:0%;
  background: url(../img/iconos/top.png) no-repeat center 4px;
  -moz-transition: background-color 0.2s ease-out 0s, background-position 0.3s ease-out 0.2s;
  -webkit-transition: background-color 0.2s ease-out 0s, background-position 0.3s ease-out 0.2s;
  transition: background-color 0.2s ease-out 0s, background-position 0.3s ease-out 0.2s;
}


#suben:hover{background-position: center -28px; background-color: #000}

/* ===========================
   ====== Media Queries para hacer Responsive para moviles o pantallas chicas ====== 
   =========================== */
/* monitores medianos */
@media only screen and (max-width:1200px) and (min-width:1025px) {
	   a:link, a:visited {
	font-size:13.5px;
}
   }
 /* monitores de 21 pilgadas y tablets grandes */
@media only screen and (max-width: 1024px) and (min-width: 931px) {
.body {
		clear: both; 
		margin: 3px auto; 
		width: 88%;
		font-size: 90%;
	}
	
.eslogan {
		width: 100%;
		float:left;
		font-size: 12px;
		font-style: italic;
		margin-top:3px;
		margin-bottom:0px;
		margin-left:0.5%;
		margin-right:0.5%;
	} 
figure {
		display:block;
	}
a:link, a:visited {
	font-size:13px;
}
.mainHeader img {
	    padding:0px;
		margin-left:0%;
        margin-bottom: 1%;          
	}
.content {
	width:100%;	
}
.top-sidebar {
	margin-left:3%;
}
.bottom-sidebar {
	width: 90%;
	float: left;
	margin: 0% 1% 1% 1%;
	border-radius: 5px;
	background-color: #fff;	
	padding: 2% 3%;
}
#suben {
  height: 40px; width: 40px; display:block; margin-right:-45px; margin-top:-05%;
}
}
@media only screen and (max-width: 930px) and (min-width: 5px) {
nav {
		width: 100%;
		margin:0 auto;
	    padding:0 auto;
	}
	/*Make dropdown links appear inline*/
nav ul {
		position: static;
		display: none;
		width: 99%;
		margin:0 auto;
	    padding:0 auto;
	}
	/*Create vertical spacing*/
nav li {
		margin-bottom: 1px;
	}
	/*Make all menu links full width*/
nav ul li, li a {
		width: 100%;
		margin:0 auto;
	    padding:0 auto;
	}
	/*Display 'show menu' link*/
.show-menu {
		display:block;
	}
	/*Pestaña activa en pantalla movil*/
.mainHeader nav .active a:link, .mainHeader nav .active a:visited {
	background: #e1f5ee;
	border-radius: 0px 0px 0px 0px;
	color: #000;
	text-shadow: none !important;
}	
nav li a {
	margin-top:0px;
	display:block;
	height: 45px;
	text-align: center;
	line-height: 45px;
	font-family: "rubik", Helvetica, Arial, sans-serif;
	color:#000;
	font-size:18px;
	background: #c4ecde;
	border-bottom:1px solid #2ede24;
	text-decoration: none;
	padding:0 auto;
	margin:0 auto;
}
nav li ul li a {
    width: 100%; 
}
nav li:hover a {
	color:blue;
	background: #e1f5ee;
}
nav li:hover ul a {
	background: #c4ecde;
	color: #2f3036;
	height: 45px;
	line-height: 45px;
	margin:0 auto;
	padding:0 auto;
	width:100%;
}

nav li:hover ul a:hover {
	background: #fff;
	color: blue;
	margin:0 auto;
	padding:0 auto;
	width:100%;
}
	
}

 /* Para 960px */  
@media only screen and (max-width: 930px) and (min-width: 821px) {  
.body {
		clear: both; 
		margin: 3px auto; 
		width: 98%;
		font-size: 90%;
	}
	
.eslogan {
		width: 100%;
		font-size: 12px;
		text-align:center;
		font-style: italic;
		margin-top:3px;
		margin-bottom:0px;
		margin-left:0.5%;
		margin-right:0.5%;
	} 
figure {
		margin-left:1%;
		margin-right:1%;
	}
.logo h3 {
		font-size: 18px;
	}
.mainHeader img {
		width: 56%;
	    padding:0px;
		margin-left:22%;
		margin-right:22%;
        margin-bottom: 1%;          
	}
.content {
	width: 100%;	
}

.content {
	float: left;
	border-radius: 5px;
}
	
.mainContent {
	    display:inline-table;
		overflow: hidden;
		line-height: 25px;
		border-radius: 5px;
		margin-top:0%;
	}
.top-sidebar {
	margin-left:3%;
}
.bottom-sidebar {
	width: 90%;
	float: left;
	margin: 0% 1% 1% 1%;
	border-radius: 5px;
	background-color: #fff;	
	padding: 2% 3%;
}

#suben {
  height: 40px; width: 40px; display:block; margin-right:-5px; margin-top:-20%;
}
} 
/* Estilos comunes para pantallas desde 800px a menos de 320px */
@media only screen and (max-width: 820px) and (min-width: 5px) {
.body {
		clear: both; 
		margin: 3px auto; 
		width: 98%;
		font-size: 90%;
	}
#esptop {
  display:none;	
}	
	.content {
	width: 100%;	
}

.content {
	float: left;
	border-radius: 5px;	
}
	
.mainContent {
	    display:inline-table;
		overflow: hidden;
		line-height: 25px;
		border-radius: 5px;
		margin-top:0%;
	}
.topcontent {
	width:96%;
	padding: 1% 1%;	
	margin:0% auto;
	margin-bottom: 1.5%;
}

.bottomcontent {
	width:96%;
	margin:0% auto;
	margin-bottom: 1.5%;	
	padding: 1% 1%;
}
  	
.post-info {
	    display: none;
	}
	
.top-sidebar {
		width:92%;
	}
.middle-sidebar {
		width:92%;
	}
.bottom-sidebar {
		width:92%;
	}
		
.mainFooter p {
		width: 86%;
		margin: 2% auto;
	}
	.conta {
    height: 600px;
    width: 100%;
}
}

 /* Para 800px */  
@media only screen and (max-width: 820px) and (min-width: 621px) { 

.body {
		clear: both; 
		margin: 3px auto; 
		width: 98%;
		font-size: 90%;
	}
.eslogan {
		width: 100%;
		font-size: 12px;
		text-align:center;
		font-style: italic;
		margin-top:3px;
		margin-bottom:0px;
		margin-left:0.5%;
		margin-right:0.5%;
	} 
.logo h3 {
		font-size: 18px;
	}
	figure {
		margin-left:1%;
		margin-right:1%;
	}
.mainHeader img {
		width: 56%;
	    padding:0px;
		margin-left:22%;
		margin-right:22%;
        margin-bottom: 1%;          
	}

#suben {
  height: 30px; width: 30px; display:flex; float:left; margin-left:40px; margin-top:-10%;
}
}  
/* Para 600px Pestaña activa en pantalla movil, moto g horizontal */  
@media only screen and (max-width: 620px) and (min-width: 501px) {  
.body {
		clear: both; 
		margin: 3px auto; 
		width: 98%;
		font-size: 90%;
	}
.eslogan {
		width: 100%;
		font-size: 12px;
		text-align:center;
		font-style: italic;
		margin-top:3px;
		margin-bottom:0px;
		margin-left:0.5%;
		margin-right:0.5%;
	} 
.logo h3 {
		font-size: 18px;
	}
	figure {
		margin-left:1%;
		margin-right:1%;
	}
.mainHeader img {
		width: 70%;
	    padding:0px;
		margin-left:16%;
		margin-right:16%;
        margin-bottom: 1%;          
	}
#esptop {
  display:none;	
}

#suben {
  height: 30px; width: 30px; display:flex; float:left; margin-left:40px; margin-top:-10%;
}
.iframe {
    height: 1680px;
}
}  
 /* Para 480px moto g vertical max 500px*/  
@media only screen and (max-width: 500px) and (min-width: 341px) {  
.body {
		clear: both; 
		margin: 3px auto; 
		width: 98%;
		font-size: 90%;
	}
.eslogan {
		width: 100%;
		text-align:center;
		font-style: italic;
		margin-top:3px;
		margin-bottom:0px;
		margin-left:0.5%;
		margin-right:0.5%;
	} 
	.logo h3 {
		font-size: 15px;
	}
	figure {
		margin-left:1%;
		margin-right:1%;
	}
	.mainHeader img {
		width: 70%;
	    padding:0px;
		margin-left:16%;
		margin-right:16%;
        margin-bottom: 1%;          
	}
#esptop {
  display:none;	
}	
    
	#suben {
  height: 30px; width: 30px; display:flex; float:left; margin-left:40px; margin-top:-15%;
}
.iframe {
    height: 1810px;
} 
}  
/* de 321px a máximo 340 */  
@media only screen and (max-width: 340px) and (min-width: 321px)  {  
  .body {
		clear: both; 
		margin: 3px auto; 
		width: 98%;
		font-size: 90%;
	}	
  .eslogan {
		width: 100%;
		text-align:center;
		font-style: italic;
		margin-top:3px;
		margin-bottom:0px;
		margin-left:0.5%;
		margin-right:0.5%;
	} 
  .logo h3 {
		font-size: 14px;
	}
figure {
		margin-left:1%;
		margin-right:1%;
	}
  .mainHeader img {
		width: 97%;
	    padding:0px;
        margin-bottom: 1%;           
	}
#esptop {
  display:none;	
}
  
#suben {
        height: 30px; width: 30px; display:flex; float:left; margin-left:40px; margin-top:-15%;
    }  
    }
/* Para máximo 320px */  
@media only screen and (max-width : 320px)  {  
  .body {
		clear: both; 
		margin: 3px auto; 
		width: 100%;
	}
  .eslogan {
		width: 100%;
		text-align:center;
		font-style: italic;
		margin-top:3px;
		margin-bottom:0px;
		margin-left:0.5%;
		margin-right:0.5%;
	} 
  .logo h3 {
		font-size: 14px;
	}
figure {
		margin-left:1%;
		margin-right:1%;
	}
  .mainHeader img {
		width: 97%;
	    padding:0px;
        margin-bottom: 1%;
	}
#esptop {
        display:none;	
    }

#suben {
        height: 30px; width: 30px; display:block; float:right; margin-left:40px; margin-top:-15%;
    } 
    }