body{
font-family: 'Gochi Hand',cursive;
	font-size: 15px;
}
header {
	background-color: #F7F7F7;
	text-align: center;
	border-radius: 10px;
	border: 2px solid #000000;
	width: 95%;
	margin: 0px auto;
	/*borra las esquinas de la imagen q sobresalen*/
	overflow: hidden;
	padding: 0px;
}
header figure {
	float: left;
}
header figure img {
	width: 150px;
	height: 110px;
	border-radius: 50%;
}
header h1 {
	color: #000000;
	float: left;
	font-size: 1.6em;
	display: block;
	padding: 0px;
	font-weight: bold;
	margin-top: 30px;
	margin-right: 70px;
	margin-bottom: 0px;
	margin-left: 50px;
}
div#contenedor {
	width: 100%;
	position:relative;
	height: 200px;
 /* oculta de entrada este contenedor */
	display: none;
}
div#slider {
 	border-radius: 10px;
 	border: 2px solid #123;
 	width: 95%;
 	margin:0 auto;
 	min-height: 550px;
 	margin-top: 20px;
 	margin-bottom: 50px;
 	/*padre*/ 
 	position: relative;
 	/*borra las esquinas de la imagen q sobresalen*/
	overflow: hidden;
	padding: 0px;
  }
div#slider div.elemento{
  	/*hijo*/
  	position: absolute;
  	left: 0px;
  	top: 0px;
  	width: 100%;
  }
div#slider div.elemento img {
  	width: 100%;
  	margin:0px;
  	padding: 0px;
	border: 0px;
  	 }
/* cambios al pasar el cursor */
div#slider div.elemento img:hover {
	cursor: pointer;
	opacity:0.8;
	transform: scale(1.2);
}
section article.control figure img:hover{
	cursor: pointer;
	opacity: 0.9;
	transform: scale(1.2);
	/* webkit-transform:rotate(30deg);*/
}
/*************/
div#slider div.elemento p.gancho{
  	display: block;
  	font-size: 1.4em;
  	font-weight: bolder;
  	line-height: 25px;
  	color: #DF7401;
	width: 	29%; 
	/* right y top se adaptan al porcentaje de cada pantalla*/
	right: 1%;
	top: 5%;
  	 }
	 
/*MENU*/
/*MENU*/
section#menu{
	background-position: center;
	background-color: #F7F7F7;
	background-position: center;
	margin-bottom: 5px;
	text-align: center;
	border-radius: 10px;
	width: 97%;
	color: #F9F9F9;
	margin-top: 0px;
	margin-right: auto;
	margin-left: auto;
	border-top-color: #000;
	border-right-color: #000;
	border-bottom-color: #000;
	border-left-color: #000;
}
section article.contro{
	display: inline-block;
	vertical-align: top;
	position: relative;
	border-radius: 0px 0px 15px 15px;
	width: 50%;
	font-size: 1.2em;
	margin-top: 10px;
	margin-right: 0px;
	margin-bottom: 5px;
	margin-left: 0px;
	border-top-width: 0px;
	border-right-width: 0px;
	border-bottom-width: 0px;
	border-left-width: 0px;
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
	color: #000;
}
section article.contro figure{
	/*Gira a la izq y el resto se acomoda al espacio*/
	float: left;
	/* desplazar la fig a la izq y arriba */
	margin-top: -50px;
	margin-left: 30px;
}
section article.contro figure img {
	border-radius: 50%;
	width: 180px;
	height: 130px;
	background-color: #FFF;
	border-top-width: 4px;
	border-right-width: 4px;
	border-bottom-width: 4px;
	border-left-width: 4px;
	border-top-style: solid;
	border-right-style: solid;
	border-bottom-style: solid;
	border-left-style: solid;
}
/* palabra SOBRESALIENTE MENU */
section article.contro span.tipo{
	color: #000;
	position: absolute;
	border-width: 2px;
	border-style: solid;
	top: -38px;
	right: 45px;
	height: 30px;
	line-height: 30px;
	padding: 2px 10px;
	border-radius: 15px 15px 15px 15px;
	font-weight: bold;
}
section article.contro p{
	font-size: 0.8em;
	text-align: justify;
}
/* PONER COLORES  INICIO****************/
/********************************/
section article.inicio,
section article.inicio figure img,
section article.inicio span.tipo{
	border-color: #004080;
}
section article.inicio span.tipo{
	background-color: #EAF4FF;
}
section article.inicio p{
	color: #000000;
}
section article.inicio{
	background-color: #F7F7F7;
}
section article.inicio span{
	color: #9cd95c;
}
/* PONER COLORES  INFORMACION****************/
/********************************/
section article.info,
section article.info figure img,
section article.info span.tipo{
	border-color: #004080;
}
section article.info span.tipo{
	background-color: #EAF4FF;
}
section article.info p{
	color: #000000;
}
section article.info{
	background-color: #F7F7F7;
}
section article.info span{
	color: #9cd95c;
}

/***************************************/
/* PONER COLORES  HISTORIAL****************/
/********************************/
section article.historial,
section article.historial figure img,
section article.historial span.tipo{
	border-color: #004080;
}
section article.historial span.tipo{
	background-color: #EAF4FF;
}
section article.historial p{
	color: #000000;
}
section article.historial{
	background-color: #F7F7F7;
}
section article.historial span{
	color: #f9f5f0;
}
/***************************************/
/* COLORES CONSULTA   ****************/
/********************************/
section article.consulta,
section article.consulta figure img,
section article.consulta span.tipo{
	border-color: #004080;
}
section article.consulta span.tipo,
section article.consulta div,
section article.consulta div span{
	background-color: #EAF4FF;
}
section article.consulta p{
	color: #000000;
}
section article.consulta {
	background-color: #F7F7F7;
}
section article.consulta span{
	color: #000;
}
	 
/*FIN MENU*/	 
/*TEXTO y VIDEOS*/
section {
	background-position: center;
	background-color: #7FB1B1;
	background-position: center;
	margin-bottom: 5px;
	text-align: center;
	border-radius: 10px;
	width: 97%;
	color: #000000;
	margin-top: 0px;
	margin-right: auto;
	margin-left: auto;
	border-top-color: #000;
	border-right-color: #000;
	border-bottom-color: #000;
	border-left-color: #000;
}
/* video y noticias */
section div.news {
	width: 30%;
	background-color: #FFFFE0;
	border: 1px solid black;
	border-radius: 10px;
	margin-right: 20px;
	float: right;
	padding-bottom: 20px;
	/* no se va a mostrar en pantallas grandes */
	display: none;
	color: #000;
}
section div.news h2{
	text-align: center;
}
section div.news article.post{
	width: 95%;
	margin-left: 2%;
	margin-top: 35px;
	/* linea division */
	border-top: 2px solid #440a4e;
	color: #000;
 }
section div.news figure{
 	float: left;
 	margin-top: 10px;
 }
section div.news figure img {
 	width: 70%;
 }
section div.news p{
	font-style: italic;
	font-size: 0.8em;
	text-align: justify;
	margin: 5px 5% 20px 5%;
	color: #000;
}
section div.news video {
	width: 90%;
	margin: 0px 5px;
	color: #000;
  }
section article.control{
	border-width: 10px;
	border-style: solid;
	display: inline-block;
	vertical-align: top;
	position: relative;
	border-radius: 0px 0px 15px 15px;
	margin: 50px 30px 20px 10%;
	width: 85%;
	font-size: 1.2em;
}
section article.control figure{
	/* se mueve a la izq y el resto se acomoda al espacion q deja */
	 float: left;
	/* desplazar la fig a la izq y arriba */
	 margin-top: -50px;
	 margin-left: -20px;
}
section article.control figure img {
	border-radius: 50%;
	border-width:5px;
	border-style: solid;
	width: 180px;
	height: 140px;
}
/* palabra SOBRESALIENTE CONTROL */
section article.control span.tipo{
	color: #fff;
	position: absolute;
	border-width: 2px;
	border-style: solid;
	top: -38px;
	right: -2px;
	height: 30px;
	line-height: 30px;
	padding: 2px 10px; 
	border-radius: 15px 15px 0px 0px;
	font-weight: bolder;
}
section article.control p{
	font-size: 0.8em;
	text-align: justify;
	margin: 15px 10px 5px 30px;
}
section article.control div {
	width: 90%;
	margin:30px 4% 10px 5%;
	border-width: 2px;
	border-style: solid;
	position: relative;
	padding-top: 20px;
	font-size: 0.9em;
	border-radius: 15px;
}
section article.control div span{
	position: absolute;
	top: -15px;
	left: 10px;
	line-height: 20px;
	border-radius: 15px;
	text-decoration: underline;
	background-color: yellow;
	padding: 3px 10px;
}
/* video y noticias */
section div.consejos {
	width: 60%;
	background-color: #FFFFE0;
	border: 1px solid black;
	border-radius: 10px;
	margin-left: 50px;
	margin-top: 10px;
	margin-bottom: 20px;
	padding-right: 10px;
	padding-left: 10px;
	float: center;
	text-align: justify;
	color: #000;
}
section div.consejos h1{
	text-align: center;
	color: #800000;
	font-size: 1.9em;
}
section div.consejos ul {
	border-top: 2px solid #440a4e;
	font-size: 1.2em;
	line-height: 40px;
}
footer {
	height: 70px;
	line-height: 50px;
	color: #000000;
	text-align: center;
	font-size: 0.8em;
	background-color: #B7B7FF;
	padding: 10px;
	border-radius: 10px;
	width: 98%;
	/*borra las esquinas de la imagen q sobresalen*/
	overflow: hidden;
	padding: 0px;
	font-weight: bold;
	font-style: italic;
	margin-top: 0px;
	margin-right: auto;
	margin-bottom: 0px;
	margin-left: auto;
}
footer imag {
	float: left;
	margin-top: 20px;
	margin-right: 10px;
	margin-bottom: 10px;
	margin-left: 10px;
}
footer a {
	background-color:#123;
	border-radius: 6px;
	color:#fff;
	text-decoration:none;
	padding-left: 10px;
	padding-right: 10px;
	padding-top: 10px;
	padding-bottom: 10px;
	display:inline-block;
	margin-right: 10px;
	float: right;
	box-shadow: -4px -3px 15px #fff;
}
/* PONER COLORES  GENERAL****************/
/********************************/
section article.general,
section article.general figure img,
section article.general span.tipo{
	border-color: #14ffec;
}
section article.general span.tipo{
	background-color: #323232;
}
section article.general p{
	color: #212121;
}
section article.general{
	background-color: #0d7377;
}
section article.general span{
	color: #9cd95c;

}

/***************************************/
/* PONER COLORES  CONTROL****************/
/********************************/

section article.controll,
section article.controll figure img,
section article.controll div,
section article.controll span.tipo{
	border-color: #f4991a;
}
section article.controll h2{

}

section article.controll span.tipo,
section article.controll div,
section article.controll div span{
	background-color: #321313;
}
section article.controll p{
	color: #59606d;
}
section article.controll{
	background-color: #f2ead3;
}

section article.controll span,
section article.controll div span,
section article.controll div ul li {
	color: #f9f5f0;

}


/***************************************/
/* COLORES CONSUMO TOTAL****************/
/********************************/

section article.consumo,
section article.consumo figure img,
section article.consumo div,
section article.consumo span.tipo{
	border-color: #d0dd97;
}
section article.consumo h2{

}

section article.consumo span.tipo,
section article.consumo div,
section article.consumo div span{
	background-color: #535a3b;
}
section article.consumo p{
	color: #f8fae4; 
}
section article.consumo {
	background-color: #658361;
}

section article.consumo span,
section article.consumo div span,
section article.consumo div ul li {
	color: #000;

}
/* respononsive dise;o */
/* celular*/
@media screen and (min-width: 480px) {
	header nav ul li {
		width: 22%;
	}


}

/* tablet*/
@media screen and (min-width: 767px) {
	header nav ul li {
		width: 8%;
	}
	div#contenedor{
		display:inline;
	}

	section article.control{
		width: 40%;
		margin: 50px 3% 20px 6%;

	}
	
}

/* pc*/
@media screen and (min-width: 950px) {

	section article.control {
		width: 26%;
		margin: 50px 1px 20px 5px;
	}

	section div.news{
		display: inline-block;
	}
		
}