/*  
	NAME 1.0 2022
	Author: Bruto
	Author URI: www.bruto.cc
*/

/* ************************************************************************************* */
/*                                                ! Estilos para la versión de 1024px    */
/* ************************************************************************************* */

@media only screen and (min-width: 0px) and (max-width: 1024px){
	/* COLUMNAS 5 */
	
	.columnas_5 > div:nth-child(2){
		margin-top: 30px;
		padding-top: 30px;
	}
	
	/* COLUMNAS 2 */
	
	.columnas_2 > div > div:nth-child(1) > div{
		padding-left: 40px;
	}
	
	.columnas_2 > div > div:nth-child(2) > p{
		padding-right: 40px;
	}
}

/* ************************************************************************************* */
/*                                                     ! Estilos para la versión 960px   */
/* ************************************************************************************* */

@media only screen and (min-width: 0px) and (max-width: 1023px){
	/* HEADER */
	
	header > div > span{
		display: block;
		z-index: 1;
	}
	
	header > div > div:nth-child(3){
		right: 70px;
		z-index: 1;
	}
	
	header > div > nav{
		top: 70px;
		right: -180px;
		width: 150px;
		background-color: white;
		padding-left: 30px;
	}
	
	header > div > nav ul{
		text-align: right;
		padding-top: 30px;
	}
	
	header > div > nav ul > li{
		display: block;
		margin: 0 20px 20px 0;
	}
	
	header > div > nav ul > li > a{
		color: black;
	}
	
	/* COLUMNAS 5 */
	
	.columnas_5 > div > div:nth-child(3) > div{
		width: calc(32% - 50px);
		margin-bottom: 10px;
	}
	
	/* CABECERA BLOG */
	
	.cabecera_blog > div:nth-child(2){
		font-size: 45px;
	}
}
	
/* ************************************************************************************* */
/*                                                     ! Estilos para la versión 800px   */
/* ************************************************************************************* */

@media only screen and (min-width: 0px) and (max-width: 959px){
	/* CABECERA */
	
	.cabecera > div > div > video{
		height: auto;
	}
	
	/* CABECERA BLOG */
	
	.cabecera_blog > div:nth-child(2) {
		font-size: 35px;
	}
	
	/* BLOG */
	
	.blog > div > div > article{
		width: 48%;
	}
	
	.blog > div > div > article:nth-child(3n+2){
		margin: 0;
	}
	
	.blog > div > div > article:nth-child(2n+2){
		margin: 0 0 0 4%;
	}
	
	.blog > aside > div > section input{
		width: 100px;
	}
	
	.blog > aside > div > section div.tags a{
		display: block;
		margin-bottom: 10px;
	}
	
	/* POST */
	
	.post > aside > div > section input{
		width: 100px;
	}
	
	.post > aside > div > section div.tags a{
		display: block;
		margin-bottom: 10px;
	}
}

/* ************************************************************************************* */
/*                                                     ! Estilos para la versión 640px   */
/* ************************************************************************************* */
	
@media only screen and (min-width: 0px) and (max-width: 799px){
	/* CABECERA */
	
	.cabecera > div > h1{
		font-size: 60px;
	}
	
	/* COLUMNAS 5 */
	
	.columnas_5 > div > div:nth-child(3) > div{
		width: 95%;
		padding: 0;
		min-height: 350px;
	}
	
	/* COLUMNAS 2 */
	
	.columnas_2 > div > div:nth-child(1){
		width: 100%;
		margin-bottom: 20px;
	}
	
	.columnas_2 > div > div:nth-child(1) > p{
		padding-right: 40px;
	}
	
	.columnas_2 > div > div:nth-child(2){
		width: 100%;
		margin-left: auto;
	}
	
	.columnas_2 > div > div:nth-child(2) > p{
		padding-left: 40px;
	}
	
	/* COLUMNAS 2 FOTO */
	
	.columnas_2_foto > div > figure{
		width: 100%;
		margin-bottom: 30px;
	}
	
	.columnas_2_foto > div > div{
		width: 95%;
		padding: 0 2.5%;
		margin-left: 0;
	}
	
	/* CABECERA BLOG */
	
	.cabecera_blog > span:nth-child(3), .cabecera_blog > span:nth-child(4){
		display: none;
	}
	
	/* SUSCRIBIR */
	
	.suscribir > div form div{
		font-size: 40px;
	}
	
	/* CABECERA POST */
	
	.cabecera_post > span:nth-child(3), .cabecera_post > span:nth-child(4){
		display: none;
	}
	
	/* CABECERA CURSOS */
	
	.cabecera_cursos > div:nth-child(1){
		margin: 0 auto 0 auto;
		padding: 30px 0 30px 0;
	}
	
	.cabecera_cursos > span:nth-child(2), .cabecera_cursos > span:nth-child(3){
		display: none;
	}
	
	/* CURSOS CURSOS */
	
	.cursos_cursos > div > div{
		width: 47.5%;
		margin-bottom: 30px;
	}
	
	.cursos_cursos > div > div:nth-child(3n+2){
		margin: 0 0 30px 0;
	}
	
	.cursos_cursos > div > div:nth-child(2n+2){
		margin: 0 0 30px 5%;
	}
	
	/* CABECERA CURSO GRATUITO */
	
	.cabecera_curso_gratuito > span:nth-child(4), .cabecera_curso_gratuito > span:nth-child(5){
		display: none;
	}
	
	.cabecera_curso_gratuito > div:nth-child(2){
		font-size: 40px;
	}
	
	/* CABECERA CURSOS POST */
	
	.cabecera_cursos_post > div > h1{
		font-size: 50px;
	}
	
	.cabecera_cursos_post > div > h2{
		font-size: 40px;
	}
	
	.cabecera_cursos_post > span:nth-child(2), .cabecera_cursos_post > span:nth-child(3){
		display: none;
	}
}

/* ************************************************************************************* */
/*                                                     ! Estilos para la versión 480px   */
/* ************************************************************************************* */

@media handheld, only screen and (min-width: 0px) and (max-width: 639px){
	/* FOOTER */
	
	footer > div:nth-child(2){
		padding-top: 40px;
	}
	
	footer > div:nth-child(2) > ul > li{
		display: block;
		margin-bottom: 20px;
		width: 100%;
		text-align: center !important;
	}
	
	/* COLUMNAS 4 */
	
	.columnas_4 > div > div:nth-child(1){
		padding-left: 0;
	}
	
	/* BLOG */
	
	.blog > div{
		width: 100%;
	}
	
	.blog > div > div{
		width: 100%;
	}
	
	.blog > aside{
		width: 100%;
	}
	
	.blog > aside > div{
		max-width: inherit;
	}
	
	/* POST */
	
	.post > div{
		width: 100%;
	}
	
	.post > aside{
		width: 100%;
	}
	
	.post > aside > div{
		max-width: inherit;
	}
	
	/* CURSOS DESCRIPCIÓN */
	
	.cursos_descripcion > div > div > span{
		font-size: 40px;
	}
	
	/* CURSOS CONTENIDOS */
	
	.cursos_contenidos > div > div:nth-child(2){
		width: 100%;
		margin-right: 0;
	}
	
	.cursos_contenidos > div > div:nth-child(3){
		width: 100%;
	}
	
	/* POST CURSO */
	
	.post_curso > div > aside{
		width: 100%;
	}
	
	.post_curso > div > article{
		width: 100%;
		padding: 100px 0 50px 0;
	}
}

/* ************************************************************************************* */
/*                                                     ! Estilos para la versión 390px   */
/* ************************************************************************************* */

@media handheld, only screen and (min-width: 0px) and (max-width: 479px){	
	/* HEADER */
	
	header > div > div:nth-child(1){
		left: 10px;
	}
	
	header > div > div:nth-child(3){
		right: 50px;
	}
	
	header > div > div:nth-child(3) > a{
		font-size: 14px;
		padding: 10px 10px;
	}
	
	header > div > span{
		right: 10px;
	}
	
	/* FOOTER */
	
	footer > div > div{
		position: relative;
		top: inherit;
		left: inherit;
		margin: auto auto 30px auto;
	}
	
	footer > div:nth-child(1) > ul{
		text-align: center;
	}
	
	/* CABECERA */
	
	.cabecera > div:nth-child(2){
		font-size: 60px;
	}
	
	.cabecera > span:nth-child(3), .cabecera > span:nth-child(4){
		display: none;
	}
	
	/* COLUMNAS 4 */
	
	.columnas_4 > div > div:nth-child(1){
		font-size: 50px;
	}
	
	.columnas_4 > div > div:nth-child(2) > ul > li{
		width: 30%;
	}
	
	.columnas_4 > div > div:nth-child(2) > ul > li:nth-child(4n+4){
		margin-right: 3.3%;
	}
	
	.columnas_4 > div > div:nth-child(2) > ul > li:nth-child(3n+3){
		margin-right: 0;
	}
	
	/* CURSOS CURSOS */
	
	.cursos_cursos > div > div{
		width: 100%;
		margin-bottom: 30px;
	}
	
	.cursos_cursos > div > div:nth-child(2n+2){
		margin: 0 0 30px 0;
	}
	
	/* CURSOS DESCRIPCIÓN */
	
	.cursos_descripcion > div > div > span {
		font-size: 32px;
	}
	
	/* CABECERA CURSOS POST */
	
	.cabecera_cursos_post > div > h1 {
		font-size: 40px;
	}
	
	.cabecera_cursos_post > div > h2{
		font-size: 35px;
	}
}

/* ************************************************************************************* */
/*                                                     ! Estilos para la versión 320px   */
/* ************************************************************************************* */

@media handheld, only screen and (min-width: 0px) and (max-width: 389px){
	
}

/* ************************************************************************************* */
/*                                                       ! Estilos para RETINA DISPLAY   */
/* ************************************************************************************* */

@media only screen and (-Webkit-min-device-pixel-ratio: 1.5),
only screen and (-moz-min-device-pixel-ratio: 1.5),
only screen and (-o-min-device-pixel-ratio: 3/2),
only screen and (min-device-pixel-ratio: 1.5) 
{
	
}