@import url(http://fonts.googleapis.com/css?family=Open+Sans);
@import url(blog4.css);
@import url(info.css);
@import url(redes_sociales.css);
@import url(blogcredito.css);
@import url(estilo_form.css);

* {
	box-sizing: border-box;	
	}
	
img {
	display: block;
	max-width: 100%;
}

body {
	margin: 0;
	font-family: 'Mulish', sans-serif;
	background: #000;
	background-image:url(../-.img/pexels-karolina-grabowska-5725833.jpg);
	background-size: 100vw 100vh;	
	background-attachment:fixed;
	
	}

h1, h2, h3, h4, h5, h6 {
font-family: 'Mulish', sans-serif;
letter-spacing: 1.5px;
}

.section__titulo {
text-align: center;
font-size: 40px;
color: #ffff00;
}

section {
width: 100%;
margin-bottom: 25px;	
}


.contenedor {
margin: auto;
width:98%; 	
}




/*----------------Estilos del header-------------------------*/

.header {
	height: 60px;
	}

.header .contenedor {
	display: flex;
	justify-content:space-between;
}

.logo, .icon-menu {
margin: 5px;
color:  #000;

}

.header .contenedor .logo {
	width: 600px;
	height: 90px;
	align-content:center;
			
	}

/*----------------Estilos del menu------------------------*/
.nav {
	position: absolute;
	top: 60px;
	left: -100%;
	width: 100%;
	transition: all 0.4s;
	} 

.icon-menu {
	display: block;
	width: 40px;
	height: 40px;
	font-size: 30px;
	background: #ffff00;
	text-align: center;
	line-height: 45px;
	border-radius: 5px;	
	margin-left: auto;
	cursor: pointer;
	}

.menu {
list-style: none;
padding: 0;
margin: 0;
}

.menu__link {
display: block;
padding: 15px;
background: #000;
text-decoration: none;
color: #fff;

}

.menu__link:hover {
	background: #ffff00;
	color: #000;
}

.mostrar {
left: 0;	
}

.select {
	background: white;
	color: #000;
}

/*----------------Estilos del banner ---------------*/

.banner {
margin-top: -60px;
position: relative;
z-index: -1000;	
margin-bottom: 20px;
}

.banner .contenedor {
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
width: 100%;
color: #fff;
text-align: center;	
}

.banner__txt {
display: none;	
}

.banner__img {
	width: 100%;
}

/*---------------------Estilos de info---------------------*/

.info__columna {
	background: #66f306;
	color: #000;
	padding: 15px;
	margin-bottom: 30px;
	width: 100%;
	
}
.info__columna2 {
	background: #FBA919;
	color: #000;
	padding: 15px;
	margin-bottom: 30px;
	width: 100%;
	
}

.info__titulo a {
text-decoration: none;
color: #000;
}

.info__titulo a:hover {
background: #000;
color: #fff;

}

.info__columna3 {
	background: #12FFB9;
	color: #000;
	padding: 15px;
	margin-bottom: 30px;
	width: 100%;
	
}

.info__titulo {
text-align: center;
font-size: 40px;
margin: 5px 0;		
}

.info__txt {
	font-size: 20px;
}

.info__img {
width: 100%;	
}



/*---------------------Estilos de cursos---------------------*/
.cursos__columna {
position: relative;	
margin-bottom: 30px;
width: 100%;
}

.cursos__descripcion {
	position: absolute;
	top: 0;
	left: 0;
	color: #fff;
	background: rgba(0,0,0,0.5);
	width: 60%;
	height: 100%;
	padding: 5px;
		
}

.cursos__titulo {
font-size: 20px;
margin: 5px 0px;
text-align: left; 
}

.cursos__txt {
font-size: 14px;
margin: 5px 0px;
}

.cursos__img {
width: 100%;
}

.cursos__columna .pauta {
	display: block;
	width: 180px;
	color: #fff;
	text-decoration: none;
	padding: 10px;
	margin-top: 10px;
	border: 3px solid #fff;
	text-align: center;
}

.cursos__columna .pauta:hover{
	background: #12FFB9;
	color: #000;
	
}
.cursos__columna a {
	display: block;
	width: 120px;
	color: #fff;
	text-decoration: none;
	padding: 10px;
	margin-top: 10px;
	border: 3px solid #fff;
	text-align: center;
}

.cursos__columna a:hover{
	background:  #66f306;
	color: #000;
}
.cursos {
background: #fff;	
}


/*---------------------Estilos de footer---------------------*/
.footer {
background: #333;
color: #fff;
padding: 10px;
text-align: center;	
}

.footer a {
color: #FFDE00;
text-decoration: none;
}

.footer a:hover {
color: #12FFB9;
text-decoration: none;
}

/*----------------------Estilos responsive-------------*/

@media(max-width:480px) {
	.header .contenedor .logo {
	width: 400px;
	height: 60px;	
	}
	
	.cursos__titulo {
	font-size: 20px;	
	}
	
	.cursos__txt {
font-size: 10px;
}

.info {
margin-top: -20px;	
}

.modal {
width: 100%;
height: 100vh;
background: rgba(0,0,0,0.8);

position: absolute;
top: 0;
left: 0;

display: flex;

animation: modal 2s 3s forwards;
visibility: hidden;
opacity: 0;	
}

.contenido_modal {
margin: auto;
margin-top: 100px;
width: 70%;
height: 70%;
background: white;
border-radius: 10px;	
}

#cerrar {
display: none;	
}

#cerrar + label {
position: fixed;	
color: #fff;
font-size: 25px;
z-index: 50;
background: darkred;
text-align: center;
height:40px;
width: 40px;
line-height: 40px;
border-radius: 50%;
right: 100px;
cursor: pointer;

animation: modal 2s 3s forwards;
visibility: hidden;
opacity: 0;	
}

#cerrar:checked + label, #cerrar:checked ~ .modal {
	display: none;
}


}



@media(min-width:480px) {
	
.banner__titulo {
font-size: 30px;
margin: 5px 0;
}

.banner__txt {
display: block;
font-size: 18px;
margin: 7px 0;	
}

.info, .cursos {
display: flex;
justify-content: space-between;
margin-top: -20px;	
}

.info {
flex-wrap: wrap;
}

.info__columna, .info__columna2, .info__columna3 {
width: 100%;	
}

.section__titulo {
width: 100%;	
}

.cursos {
flex-wrap: wrap;
margin-top: 0;	
}

.cursos__columna {
width: 100%;
}

.cursos__titulo {
	font-size: 30px;	
	}
	
	.cursos__txt {
font-size: 14px;
}

.header .contenedor .logo {
	width: 420px;
	height: 70px;	
	}
	
	.modal {
width: 100%;
height: 100vh;
background: rgba(0,0,0,0.8);

position: absolute;
top: 0;
left: 0;

display: flex;

animation: modal 2s 3s forwards;
visibility: hidden;
opacity: 0;	
}

.contenido_modal {
margin: auto;
margin-top: 100px;
width: 70%;
height: 70%;
background: white;
border-radius: 10px;	
}

#cerrar {
display: none;	
}

#cerrar + label {
position: fixed;	
color: #fff;
font-size: 25px;
z-index: 50;
background: darkred;
text-align: center;
height:40px;
width: 40px;
line-height: 40px;
border-radius: 50%;
right: 100px;
cursor: pointer;

animation: modal 2s 3s forwards;
visibility: hidden;
opacity: 0;	
}

#cerrar:checked + label, #cerrar:checked ~ .modal {
	display: none;
}

}

@media(min-width:768px) {
	.banner__titulo {
	font-size: 50px;	
	}
	
	.header .contenedor .logo {
	width: 600px;
	height: 90px;
	text-align: center;
	}
	
	.cursos__columna {
width: 49%;
}

.cursos__titulo {
font-size: 30px;	
}

.cursos__txt {
font-size: 13px;
}

.info__columna, .info__columna2, .info__columna3 {
width: 32%;	
}
	
.info {
margin-top: -120px;	
}

.contenido_modal {
margin: auto;
margin-top: 50px;
width: 50%;
height: 50%;
background: white;
border-radius: 10px;	
}


}
@media(min-width:1024px) {

.contenedor {
width: 1000px; 	
}

.section__titulo {
font-size: 50px;
margin: 30px 0;	
}

.nav {
	position: static;
	width: auto;
	}

.menu {
display: flex;	
}

.icon-menu {
display: none;	
}

.menu__link {
background: #000;
color: #fff;
font-size: 16px;	
}

.select {
background: #ffff00;
color: #000;	
}

.menu__link:hover {
	background: #ffff00;
	color:  #000;
}

.banner__titulo	 {
font-size: 60px;	
}

.banner__txt {
font-size: 25px;	
}

.info {
margin-top: -170px;	
}

.cursos__descripcion {
 padding: 20px;
}

.cursos__titulo {
font-size: 36px;	
}

.cursos__txt {
font-size: 16px;
}


.info__columna, .info_columna2, .info_columna3 {
padding: 30px;
}

.modal {
width: 100%;
height: 100vh;
background: rgba(0,0,0,0.8);

position: absolute;
top: 0;
left: 0;

display: flex;

animation: modal 2s 3s forwards;
visibility: hidden;
opacity: 0;	
}

.contenido_modal {
margin: auto;
margin-top: 50px;
width: 40%;
height: 40%;
background: white;
border-radius: 10px;	
}

#cerrar {
display: none;	
}

#cerrar + label {
position: fixed;	
color: #fff;
font-size: 25px;
z-index: 50;
background: darkred;
text-align: center;
height:40px;
width: 40px;
line-height: 40px;
border-radius: 50%;
right: 500px;
cursor: pointer;

animation: modal 2s 3s forwards;
visibility: hidden;
opacity: 0;	
}

#cerrar:checked + label, #cerrar:checked ~ .modal {
	display: none;
}

}


@media (min-width:1280px) {
.contenedor {
width: 1200px;	
}

.banner .contenedor {
top: 40%;	
}

.info {
margin-top: -320px;	
}

.cursos__titulo {
font-size: 40px;	
}

.cursos__txt {
font-size: 20px;
}

.contenido_modal {
margin: auto;
margin-top: 50px;
width: 30%;
height: 30%;
background: white;
border-radius: 10px;	
}
}

/*----------------Modal pagina de inicio ---------------*/





@keyframes modal {
100% {
visibility: visible;
opacity: 1;	
	
}

}