/*selector {
	propiedad: valor;
}*/


* {
	 
}

h1 {
	color: transparent;
}

/*VARIABLES*/

:root {
	--azul: #1077DD;
	--blanco: #FFFFFF;
	--negro: #000000;
}

h2 {
	font-family: 'Roboto', sans-serif;
	padding: 1.5em 2em;
	text-align: center;
}

h2 b {
	font-family: 'Roboto 700', sans-serif;
}

h3 {
	color: var(--azul);
	font-family: 'Roboto', sans-serif;
	text-align: center;
	padding-top: 1.5em;
	font-size: 2em;
}

h3 b {
	font-family: 'Roboto 700', sans-serif;
}

p {
 	font-family: 'Roboto', sans-serif;
 	text-align: justify;
}

p b {
 	font-family: 'Roboto 700', sans-serif;
 	text-align: justify;
}

span {
 	font-family: 'Roboto', sans-serif;
 	text-align: justify;
}

li {
	font-size: 1.25em;
}

body {
	background-image: url(../img/espacio.jpg);
}

a {
	text-decoration: none;
	color: var(--blanco);
}

:root {
	--negro: #000000;
	--azul: #1077DD;
	--blanco: #FFFFFF;
}

.grid-container {
	display: grid;
	grid-template-areas:
		"header"
		"menu"
		"main"
		"footer";
	grid-template-rows: repeat(auto-fill, 1fr);
}

.header {
	grid-area: header;
	display: flex;
	background: linear-gradient(var(--negro), transparent);
	justify-content: center;
	height: 75px;
	padding-top: 5px;
}

.nav {
	grid-area: menu;
	display: grid;
	background: white;
	height: 50px;
}

/*.aside {
	grid-area: aside;
	background: yellow;
	}*/

.main {
	grid-area: main;
	/*background-image: url(espacio.jpg);*/
	transition: .9s ease;
	
}

.main__oferta {
	display: grid;
	align-items: center;
	grid-template-columns: 1 100%;
	padding: 10px;
	background: var(blanco);
	transition: .9s ease;
}

.main__oferta div {
	display: grid;
	background: var(--blanco);
	border-radius: 5px;
	justify-items: center;
	text-align: center;
}

.main__oferta div img {
	object-fit: contain;
	width: 75%;
	padding-bottom: 10px;
}

.main__oferta div p {
	padding-bottom: 10px;
}

.boton {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 50%;
	height: 50px;
	background: var(--negro);
	color: #fff;
	font-family: 'Roboto', sans-serif;
	font-weight: 700;
	border: none;
	cursor: pointer;
	text-transform: uppercase;
	transition: .3s ease all;
	border-radius: 5px;
	position: relative;
	overflow: hidden;
}

.boton:link, .boton:visited {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 50%;
	height: 50px;
	background: var(--negro);
	color: #fff;
	font-family: 'Roboto', sans-serif;
	font-weight: 700;
	border: none;
	cursor: pointer;
	text-transform: uppercase;
	transition: .3s ease all;
	border-radius: 5px;
	position: relative;
	overflow: hidden;
	text-decoration: none;
}

.boton span {
	position: relative;
	z-index: 2;
	transition: .3s ease all;
}

.yt {
	display: grid;
	justify-items: center;
	padding: 10px;
}

.yt iframe {
	width: 100%;
	height: min(400px);
}

.footer {
	grid-area: footer;
	background: linear-gradient(transparent,var(--negro));
	background-color: var(--negro);
	height: 200px;
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	grid-template-rows: 2;
	gap: 10px;
	color: var(--blanco);
	border-radius: 5px;
	border: var(--blanco) 2px solid;
}

.footer div {
	padding-top: 10px;
}

.footer img {
	width: 50px;
}

.footer p {
	text-align: center;
	font-weight: 700;
}

.footer i a span {
	padding-left: 10px;
}

@media screen AND (min-width: 800px) /*AND (max-width: 1010px)*/ {
	.main__oferta {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		content: 10px;
		column-gap: 10px;
		transition: .9s ease;
	}

	.yt iframe {
		width: 100%;
		height: 500px;
	}


@media screen AND (min-width: 1010px) {
	/*.grid-container {
	grid-template-areas:
		"header header header"
		"aside menu aside"
		"aside main aside"
		"footer";
	grid-template-rows: repeat(auto-fill, 1fr);
	}
	Nada, que no me sale lo del aside*/ 



	/*.main__oferta {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		content: 10px;
		column-gap: 10px;
	}*/

	.yt iframe {
		width: 1010px;
		height: 568px;
	}
}

@media screen AND (min-width: 1500px) {

	.main {
			padding: 0px 10%;
			transition: .9s ease;
		}

}