body{
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
}

#contenedor{
	width: 100%;
	min-height: 100vh;
	height: fit-content;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1fr;
	padding: 0 20px 30px 20px;
	box-sizing: border-box;
	grid-gap: 60px;
	background: linear-gradient(90deg, rgba(0,0,0,.9) 0%, rgba(0,0,0,.5) 100%);
	position: relative;
}	
	#informacion {
		display: grid;
		align-content: space-around;
		margin-top: 65px;
	}
		#informacion img.logo-issd{
			width: 220px;
			display: block;
			margin-bottom: 20px;
		}
		#informacion h1{
			font-size: 42px;
			line-height: 47px;
			font-weight: 300;
			color: transparent;
			background: var(--degradado-verde);
			-webkit-background-clip: text;
			grid-column: 1/-1;
			text-shadow: none;
			filter: drop-shadow(0 1px 3px rgba(0,0,0,.4));
		}
		#informacion h2{
			color: var(--blanco);
			text-shadow: 1px 1px 4px rgba(0,0,0,.6);
			grid-column: 1/-1;
			margin-bottom: 30px;
		}
			#informacion h2::before{
				content: none;
			}
		#informacion article > ul{
			display: grid;
			grid-template-columns: repeat(3, 1fr);
			grid-auto-flow: row;
			grid-gap: 10px;
			max-width: 400px;
			margin: 20px 0;
		}
			#informacion article > ul li{
				color: var(--issd-mas-c);
				font-size: 16px;
				text-shadow: 1px 1px 4px rgba(0,0,0,.3);
				font-weight: 600;
			}
			#informacion article > ul li::before{
				font-family: var(--iconos);
				display: block;
				font-size: 24px;
				margin: 10px 0;
				font-weight: 400;
				color: var(--issd-mas-c-2);
			}
				li.duracion::before{content: 'watch_later';}
				li.modalidad::before{content: 'cast_for_education';}
				li.titulo::before{content: 'workspace_premium';}
				li.flexibilidad::before{content: 'devices';}
				li.articulacion::before{content: 'home_work';}
				li.contenido::before{content: 'book';}
		#informacion h3{
			background: linear-gradient(75deg, var(--amarillo-c) 0%, var(--amarillo-mas-c-2) 100%);
			color: var(--issd-o);
			padding: 10px 15px;
			border-radius: 10px;
			text-align: center;
			display: inline-block;
			font-weight: 400;
			position: relative;
		}
			#informacion h3::before{
				content: "";
				width: 0 !important;
				height: 0;
				border: 0 solid transparent;
				border-right-width: 12px;
				border-left-width: 12px;
				display: block;
				position: absolute;
				top: -12px;
				left: 40px;
				border-bottom: 12px solid var(--amarillo-c);
			}
		#informacion img{
			filter: grayscale(1) brightness(100);
			margin: 15px 15px 0 0;
		}
	.contenedor-contacto{
		background: none;
		padding: 0;
	}
	#contacto{
		width: 100%;
		padding: 25px 20px 25px 20px;
		grid-gap: 0 10px;
		margin: 0;
	}
		#contacto h2{
			margin-left: 35px;
		}
		#contacto article:first-of-type {
			grid-gap: 10px;
		}
			#contacto > article:first-of-type > span:nth-of-type(1)::before{
				content: 'person';
			}
			#contacto > article:first-of-type > span:nth-of-type(3)::before{
				content: 'phone';
			}
			#contacto > article:first-of-type > span:nth-of-type(4)::before{
				content: 'email';
			}
			#contacto > article:first-of-type > span:nth-of-type(5)::before{
				content: 'place';
			}
			#contacto > article:first-of-type > span:nth-of-type(6),
			#contacto > article:first-of-type > span:nth-of-type(7){
				display: none;
			}
			#contacto .requerido::before{
				display: none;
			}
				#contacto input{
					margin-bottom: 10px;
				}
			#contacto .boton-envio{
				margin-top: 10px;
			}
				#contacto textarea,
				#contacto textarea ~ label{
					display: none;
				}
			#contacto form input:valid ~ label{
				font-size: 12px;
				position: absolute;
				top: -10px;
				left: 8px;
				padding: 1px 4px;
				z-index: 200;
				transition: all .2s ease;
			}	
			#contacto .politica-uso{
				display: none;
			}
				.contenedor-contacto > div{
					padding: 10px 0;
				}
		#mensaje{
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
		}

/*Pop up con texto de promo 50% off*/
section#promo{
	display: grid;
	position: absolute;
	top: 0;
	left: 50%;
	transform: translate(-50%);
	padding: 10px 0;
	background: var(--amarillo-c);
	text-align: center;
	width: 100%;
}
	section#promo p{
		font-size: 16px;
		color: var(--gris-10);
		position: relative;

	}
		section#promo p::before,
		section#promo p::after{
			font-family: var(--iconos);
			content: 'arrow_downward';
			padding: 0 10px;
			position: relative;
			top: 2px;
		}
	section#promo p span#cerrar::after{
		font-family: var(--iconos);
		content: 'close';
		padding: 4px 20px;
		position: absolute;
		display: inline-block;
		right: 25px;
		font-size: 30px;
		transition: all .2s ease;
		opacity: .5;
		display: inline-block;
		top: -8px;
	}
		section#promo p span#cerrar:hover::after{
			opacity: 1;
			cursor: pointer;
			background-color: var(--amarillo-mas-c);
		}

@media screen and (min-width:560px){
	#informacion h1{
		font-size: 52px;
		line-height: 57px;
	}
	#contacto h2{
		margin-left: 15px;
	}
		.contenedor-contacto > div{
			padding: 40px 0;
		}
}

@media screen and (min-width:900px){
	#contenedor{
		padding: 0 60px;
		background: linear-gradient(90deg, rgba(0,0,0,1) 0%, rgba(0,0,0,.3) 80%);
	}
}

@media screen and (min-width:1100px){
	#informacion h1{
		font-size: 56px;
		line-height: 61px;
	}
	#contacto{
		max-width: 400px;
		padding: 20px 35px 30px 25px;
		grid-gap: 0 10px;
	}
	#contenedor{
		grid-template-columns: 1fr minmax(360px, 420px);
		align-items: center;
	}
}

@media screen and (min-width:1320px){
	#informacion h1{
		font-size: 62px;
		line-height: 67px;
	}
}