html{
	font-family: 'Open Sans', sans-serif;
}

body{
	background-color: #00aeef !important;
	color:  #fff;
}

#nav{
	z-index: 100;
	display: grid;
	grid-template-columns: auto;
	align-content: center;
	justify-content: center;
	position: fixed;
	top: 0;
	width: 100%;
	height: 50px;
	background: #000;
}

#nav li{
	display:  inline;
}
#nav a{
}

.grid-container{
	display: grid;
	min-height: 500px;
	grid-template-columns: auto;
	justify-content: center;
	align-content: center;
	transform: skewY(-5deg);
}

.grid-container h1{
	margin:  0;
	text-align: center;
}

.grid-container p{
	position: relative;
	max-width: 600px;
	font-size: 18px;
	text-align: center;
	top: 1em;
}

.grid-container p a{
	color: #fdbf10;
	font-weight: 800;
	background: #000;
}

.titular-linea-1{
	position: relative;
	font-size: 4em;
	animation-name: animacion-linea-1;
	animation-duration: 1.2s;

}
.titular-linea-2{
	position: relative;
	background: #fdbf10;
	color:  #000;
	text-transform: uppercase;
	font-size: 6em;
	padding: 0 20px 0 20px;
	/* offset-x | offset-y | color */
	box-shadow: 10px 10px teal;
	animation-name: animacion-linea-2;
	animation-duration: 0.5s;
	animation-timing-function: ease-in-out;
	overflow: hidden;

}
.titular-linea-3{
	position: relative;
	top: 10px;
	animation-name: animacion-linea-3;
	animation-duration: 1s;

}

@keyframes animacion-linea-2{
	0% {top: -300px}
	100% {top: 0;}
}

@keyframes animacion-linea-1{
	0% {color: #00aeef}
	50%{color: #00aeef;}
	100% {color: #fff;}
}

@keyframes animacion-linea-3{
	0% {color: #00aeef}
	50%{color: #00aeef;}	
	100% {color: #fff;}
}



.fortalezas{
	display: grid;
	justify-content: center;
	align-content: center;
	gap: 4px;
  	grid-auto-flow: column;	
	border-top: 1px solid #fdbf10;
	margin-top: 20px;
	padding-top: 40px;
	padding-bottom: 40px;
}

.fortalezas div{
	max-width: 280px;
	text-align: center;	
}

.fortalezas div h3{
	color: white;
	padding-bottom: 10px;
}


#formulario{
	display: grid;
	min-height: 500px;
	grid-template-columns: auto;
	justify-content: center;
	align-content: center;
	border-top: 1px solid #fdbf10;
	margin-top: 20px;
	padding-top: 50px;
}

.form-wrap{
    min-width: 350px;
    max-width: 450;
}

.form-header{
	text-align: center;
	text-transform: uppercase;
}

.form-content{
	background: rgba(202,202,202,.72);
    padding: 26px 10px 45px;
    min-width: 350px;
    max-width: 450;
}



@media (max-width: 768px) {
	.grid-container{
		min-height: 400px;
	}

	.titular-linea-1{
		font-size: 2em;
	}
	.titular-linea-2{
		font-size: 3em;
	}
	.titular-linea-3{
		font-size: 1.5em;
	}

	.fortalezas{
		display: block;
		border: 0;
		margin: 0;
	}
	.fortalezas div{
		margin: 0 auto 0 auto;
		border-top: 1px solid #fff;
		padding-top: 25px;
		padding-bottom: 25px;
	}

}