* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}


img {
    max-width: 100%;
    height: auto;
}

a {
	text-decoration: none;
}




.contenedor{
	background:WHITE  ;
	width: 100%;
	max-width: 1024x;
	margin:auto; /* Centra al medio (horizontalmente) */
	/*Flex*/
	display: flex; /* Se coloca display flex aca porque .contenedor es padre de todo*/
	flex-direction: row; /* Queremos que la direcion sea en filas */
	flex-wrap: wrap;	/* Pone debajo las cosas que no caben debajo */
	/* Tambien se puede usar el atajo "flex-flow" de la siguiente manera 
	flex-flow:row wrap; y haria la misma funcion*/
}
header{ /* el header sera hijo del contenedor pero sera padre del icono y del menu */
	background: #e74c3c;  /* fallback for old browsers */
	background: -webkit-linear-gradient(to left, #3A6073, #16222A);  /* Chrome 10-25, Safari 5.1-6 */
	background: linear-gradient(to left, #3A6073, #16222A); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */

	width: 100%; /* abarque todo el ancho */
	padding:5px;

	/* Flex*/
	display: flex; /* se coloca display flex porque este tambien sera un elemento padre */
	justify-content: space-between;/* hace que un elemento se ponga a la izquierda y el otro a la derecha y se pone justify content pq es una fila y no una columna */
	align-items: center; /* Se usa align items pq es una linea de elementos, y para alinear verticalmente */
	flex-flow: row wrap; /* Queremos que la direccion sea en filas y que se pongan elementos hacia abajo si se pasa el ancho*/
}
header .logo{ /* dando estilos al logo del header (.logo es hijo del header) */
	font-size: 30px; /*Tamaño del titulo del logo */
}
header .logo img{
	width: 50px; /*Anchura de la imagen del logo */
	vertical-align: top; /*Alineamiento Vertical */
}

header .logo a{
	color:#FFF; /*Color de los enlaces del logo */
	text-decoration: none; /*Decoracion del titulo del logo*/
	line-height: 60px; /*Altura del alineado del logo */
}

header nav{ /*El elemento nav sera padre de todos los a */
width: 50%;
background: white;
/* Flex */

display: flex; /*Colocando el nav flexible */
flex-wrap: wrap; /* Haciendo que si n ocabe el ancho se baje*/
align-items: center; /* Alineandolo al centro horizontalmente */
}

header nav a{
	 /*Fondo de los lementos A*/
	color: #FFF; /* Color de la fuente*/
	text-align: center; /*Alineando elementos */
	text-decoration: none; /*Quitando decoracion de las a */
	padding: 20px; /*Dandole el tamaño a los cuadros de 10px */


	/* flex */

	flex-grow: 1; /* Hace que todos los elementos a haga lo posible para que abarque el 100%;*/

}

header nav a:hover{
	background: ;
}

.main{
background: white;  /* fallback for old browsers */
padding: 10px;

/* flex */

flex:1 1 60%; /*Tamaño dinamico Primer valor es del el flex:shrink(valor que permitia crecer el elemento) 2, lo que se encojeria y el tercero es el width;
*/
/*flex:1; Tamaño fijo */
}
.main article{
	margin-bottom: 20px;
	padding-bottom: 20px;
	border-bottom: 1px solid #AFAEAE;
}
.main article:nth-last-child(1){ /* esto quiere decir que al ultimo articulo no se le van a aplicar los css */
	margin-bottom: 0;
	padding-bottom: 0;
	border-bottom: 0px;
}
aside{ /*Elemento padre e hijo */
	background: ;
	padding: 0px;
	/*flex*/
	flex:1 1 30%; /* Esto es para tamaño dinamica */
	/*flex:0 0 300px; /* tamaño fijo */
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	flex-direction: column;/*tenga una relacion de columnas */

}
aside .widget{
	width: 370px;
	background: white;
	height: 250px;
	margin: 10px;
	
}
footer{ /* elemento hijo y padre*/
	background: #fefeff;  /* fallback for old browsers */
	background: -webkit-linear-gradient(to left, #f6f7f8, #ffffff);  /* Chrome 10-25, Safari 5.1-6 */
	background: linear-gradient(to left, white, WHITE ); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
	width: 100%;
	padding: 15px;
	
	
	
	/* FLEX */

	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}

footer .links{
	background: #FFF;
	/* FLEX */
	display: flex;
	flex-wrap: wrap;
}
footer .links a{
	color:rgb(252, 252, 252);
	padding: 10px;
	text-decoration: none;
	text-align: center;
	/*flex*/
	flex-grow: 1;

}
footer .links a:hover{
	background: p;
}

footer .social{
	background: #FFF;
	/* FLEX */
	display: flex;
	flex-wrap: wrap;
}
footer .social a{
	color:#333;
	padding: 10px;
	text-decoration: none;
	display: inline-block;
	/*flex*/

}
footer .social a:hover{
	background: #fdc830;

}

@media screen and (max-width: 800px){
	.contenedor{
		flex-direction: column;
		
	}
	header{
		flex-direction: column;
		padding: 0;
		
	}
	header .logo{
	margin: 20px 0;
	}
	header nav{
		width: 100%;
		border-bottom: 1px solid #000;
	}
		
	
	aside{
		flex-direction: row;
		flex:0;
	}
	aside .widget{
		flex-grow: 1; /* para que sean el mismo ancho */
		
	}
	footer{
		padding-right:  0;
		padding-left: 0;
		justify-content: space-between;
	}
	footer  .links{
		margin-left: 20px;
	}
	footer .social{
		margin-right: 20px;
	}


}

@media screen and (max-width: 600px) {
	
	aside{
		flex-direction: column;
		
	}
	footer{
		justify-content: space-around;
		padding-right:  0;
		padding-left: 0;
	}
}
 










/*---------- LINEA DE COLORES ----------*/
.box {
  display: flex;
  width: 100%;
  height: 8px;
  margin: 5px 0px 40px 0px;
}

.box-sm {
  height: 8px;
  margin: 0;
  flex-grow: 1;
  transition: all .8s ease-in-out;
  cursor: pointer;
}

// Growing the width of box, when hover using flex-grow property
.box-sm:hover {
  flex-grow: 12;
}


.red {
  background-color: #FF5852;
}

.orange {
  background-color: #FF9000;
}

.yellow {
  background-color: #FFD300;
}

.green {
  background-color: #3DCD49;
}

.blue {
  background-color: #0089D7;
}

.purple {
  background-color: #9E44C4;
}






#lista3 {  /* LISTAS SERVICIOS EJERCISOS PARA PRONUCNIAR LA LETRA R*/ 
    counter-reset: li; 
    list-style: none; 
    *list-style: decimal; 
    font: 15px 'Century Gothic', 'Arial';
    padding: 0;


}

#lista3 ol {
    margin: 0 0 0 2em; 
}

#lista3 li{
    position: relative;
    display: block;
    padding: .4em .4em .4em .8em;
    *padding: .4em;
    margin: .5em 0 .5em 2.5em;
    background: #ddd;
    color: #444;
    text-decoration: none;
    transition: all .3s ease-out;   
}

#lista3 li:hover{
    background: #f5f5f5;
}   

#lista3 li:before{
    content: counter(li);
    counter-increment: li;
    position: absolute; 
    left: -2.5em;
    top: 50%;
    margin-top: -1em;
    background: #F8C471  ;
    height: 2em;
    width: 2em;
    line-height: 2em;
    text-align: center;
    font-weight: bold;
}

#lista3 li:after{
    position: absolute; 
    content: '';
    border: .5em solid transparent;
    left: -1em;
    top: 50%;
    margin-top: -.5em;
    transition: all .3s ease-out;               
}

#lista3 li:hover:after{
    left: -.5em;
    border-left-color: #cd314c;             
}





.hover_effect {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  display: block;
  width:92%;
  padding: 1px;
  position: relative;
  z-index: 2;
  text-decoration: none;
  color: #FA2B14;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  font-size: 4.2em;
  font-weight: 550;
  -webkit-user-select: none;
-webkit-touch-callout: none;  
}

.hover_effect:after {
  content: "";
  height: 5px;
  left: 0;
  width: 1px;
  position: absolute;
  -webkit-transition: width 1s ease, background-color 1s ease;
  -moz-transition: width 1s ease, background-color 1s ease;;
  -ms-transition: width 1s ease, background-color 1s ease;;
  -o-transition: width 1s ease, background-color 1s ease;;
  transition: width 1s ease, background-color 1s ease;;
  right: 0;
  margin: 0 auto;
}

.hover_effect:hover {
  color: orange ;
  -webkit-transition: color 1s ease;
  -moz-transition: color 1s ease;
  -ms-transition: color 1s ease;
  -o-transition: color 1s ease;
  transition: color 1s ease;
  cursor: pointer;
}

.hover_effect:hover:after, 
.hover_effect:focus:after{
  width: 100%;
  background-color: #FA2B14;
}

.ua {
  position: absolute;
  right: 20px;
  bottom: 20px;
  color: #fff;
  font-size: 2em;
}

.fa {
  color: #2C3E50;
    -webkit-transition: all 1s ease;
   -moz-transition: all 1s ease;
   -ms-transition: all 1s ease;
   -o-transition: all 1s ease;
   transition: all 1s ease;
}

.ua:hover .fa {
   color:#2C3E50;
   -webkit-transform: scale(1.5);
   -moz-transform: scale(1.5);
   -ms-transform: scale(1.5);
   -o-transform: scale(1.5);
   transform: scale(1.5);
   -webkit-transition: all 1s ease;
   -moz-transition: all 1s ease;
   -ms-transition: all 1s ease;
   -o-transition: all 1s ease;
   transition: all 1s ease;
}

.anchor {
  position: absolute;
  
  top: 5px;
  right: 20px;
}

.anchor a {
  color: #fff;
  text-decoration: none;
}











.btn {
    border: none; /* botonessss */
	font-size: 16px;
	font-family: 'Century Gothic', Arial;
    color: white; /* Add a text color */
    padding: 15px 8px; /* Add some padding */
    cursor: pointer; /* Add a pointer cursor on mouse-over */
}

.success {background-color: #4CAF50;} /* Green */
.success:hover {background-color: #46a049;}

.info {background-color: #2196F3;} /* Blue */
.info:hover {background: #0b7dda;}

.warning {background-color: #ff9800;} /* Orange */
.warning:hover {background: #e68a00;}

.danger {background-color: #f44336;} /* Red */ 
.danger:hover {background: #da190b;}

.default {background-color: #e2348b;} /* Gray */ 
.default:hover {background: #ddd;}