body, html {
	margin: 0;
	padding: 0;
	font-family: 'Teko', sans-serif;
	background-color: #00e2ff;
}

h1 {
	position: absolute;
	top: 100px;
	width: 100%;
	margin: 0 auto;
	text-align: center;
	font-size: 92px;
	letter-spacing: -1px;
	color: #00e2ff;
	text-transform: uppercase;
	line-height: 0;
	display: inline-block;
	box-sizing: content-box;
	border: none;
	text-overflow: clip;
	white-space: pre;
	text-shadow: 0px -1px 0 rgba(140,140,140,0.5) , 0px -2px 1px rgba(0,0,0,0.5);
	z-index: 99;
}

h1 span {
	animation: emboss 1s ease-in 1;  
}

h1 span:nth-child(1) {
	animation-duration: 1s; 
}

h1 span:nth-child(2) {
	animation-duration: 1.1s; 
}

h1 span:nth-child(3) {
	animation-duration: 1.2s; 
}

h1 span:nth-child(4) {
	animation-duration: 1.3s; 
}

@keyframes emboss {
	0% {
		color: #ffffff;
		text-shadow: 0px -1px 0 rgba(140,140,140,0), 0px -2px 1px rgba(0,0,0,0);
	}
	50% {
		color: #ffffff;
		text-shadow: 0px -1px 0 rgba(140,140,140,0.5), 0px -2px 1px rgba(0,0,0,0.5);
	}
	100% {
		color: #00e2ff;
		text-shadow: 0px -1px 0 rgba(140,140,140,0.5), 0px -2px 1px rgba(0,0,0,0.5);
	}
}

h2 {
	position: absolute;
	top: 150px;
	width: 100%;
	margin: 0 auto;
	text-align: center;
	font-size: 32px;
	line-height: 0;
	letter-spacing: -1px;
	color: #00e2ff;
	font-weight: 500;
	font-weight: 100;
	z-index: 99;
	animation: appear 2.5s linear 1;
}

@keyframes appear {
	0% {
		color: #ffffff;
	}
	100% {
		color: #00e2ff;
	}
}

h3 {
	font-size: 24px;
	text-transform: uppercase;
	padding: 0;
	margin: 5px 0 20px;
	text-shadow: 0px 1px 0px rgba(0,0,0,0.5);
}

h3.single {
	margin-bottom: 0;
	text-shadow: none;
}

#top {
	width: 100%;
	height: 200px;
	display: block;
	background-color: #fff;
	position: fixed;
	top: 0;
}

#cloud {
	width: 100%;
	height: 250px;
	display: block;
	background-image: url(../img/nube.png);
	background-size: cover;
	background-repeat: no-repeat;
	background-position: 50% 0%;
	position: fixed;
	top: 200px;
}

#wrapper {
	position: relative;
	width: 100%;
	height: auto;
	margin: 250px auto 0;
	text-align: center;
}

#personaje {
	position: absolute;
	width: 142px;
	height: 321px;
	top: -216px;
	left: 275px;
}

#columns {
	position: relative;
	width: 100%;
	max-width: 970px;
	display: table;
	text-align: center;
	margin: 0 auto;
	background: transparent;
}

.column {
	display: inline-block;
	margin: 0 1%;
	width: 200px;
	text-align: center;
	vertical-align: bottom;
	background: #ccc;
	position: relative;
	animation: up .5s ease-out 1;
	z-index: 10;
	backdrop-filter: blur(10px);
}

@keyframes up {
	0% {top:100px; opacity:0;}
	100%{top:0px; opacity:1;}
}

.column > *:not(.icon-box) {
	padding: 25px;
}

.column p {
	font-size: 20px;
	line-height: 1.3em
}

#column-1, #column-5 {
	background-color: rgba(254,235,237,.75);
	color: #f65a6e;
	animation-duration: .25s;
}

#column-2, #column-6 {
	background-color: rgba(242, 247, 225,.75);
	color: #94bf08;
	animation-duration: .5s;
}

#column-3, #column-7 {
	background-color: rgba(237, 247, 249,.75);
	color: #68c0cc;
	animation-duration: .75s;
}

#column-4, #column-8 {
	background-color: rgba(252,245,224,.75);
	color: #e6b002;
	animation-duration: 1s;
	z-index: 5;
}

.icon-box {
	background-color: transparent;
	background-repeat: no-repeat;
	background-position: 50% 50%;
	background-size: 125px 125px;
	width: 100%;
	height: 200px;
	margin: 0;
	animation: backgrow .5s ease-out 1;
}

@keyframes backgrow {
	0% {background-size: 12px 12px; opacity:0;}
	100% {background-size: 125px 125px; opacity:1;}
}

#column-1 .icon-box {
	background-image: url(../img/icon-web.png);
	background-color: #f65a6e;
	animation-duration: .5s;
}

#column-2 .icon-box {
	background-image: url(../img/icon-seo.png);
	background-color: #94bf08;
	animation-duration: .66s;
}

#column-3 .icon-box {
	background-image: url(../img/icon-marketing.png);
	background-color: #68c0cc;
	animation-duration: .75s;
}

#column-4 .icon-box {
	background-image: url(../img/icon-ideas.png);
	background-color: #e6b002;
	animation-duration: 1s;
}

#column-5 .icon-box {
	background-image: url(../img/icon-estandar.png);
	background-color: #f65a6e;
	animation-duration: .5s;
}

#column-6 .icon-box {
	background-image: url(../img/icon-destacado.png);
	background-color: #94bf08;
	animation-duration: .66s;
}

#column-7 .icon-box {
	background-image: url(../img/icon-premium.png);
	background-color: #68c0cc;
	animation-duration: .75s;
}

#column-8 .icon-box {
	background-image: url(../img/icon-ideas.png);
	background-color: #e6b002;
	animation-duration: 1s;
}

#contact {
	background: #fff;
	padding: 20px;
	margin-top: 25px;
	margin-bottom: 25px;
	background: rgba(0, 226, 255, 0.5);
	backdrop-filter: blur(10px);
}

#contact, #contact form {
	text-align: center;
	display: block;
}

#contact form {
	margin: 0 auto;
	width: 100%;
}

.input-group {
	width: 100%;
	margin-bottom: 25px;
	font-size: 20px;
}

.input-group {
	width: 100%;
	margin-bottom: 25px;
	font-size: 20px;
}

.input-group-lg > .form-control {
	font-size: 20px;
	border-radius: 0;
}

.input-group-lg > textarea.form-control {
	height: auto;
	margin-bottom: 25px;
}

input[type=submit] {
	width: 100px;
	height: 2em;
	font-size: 1.5em;
	background: #e6b002;
	color: #fff;
	border: 0 none;
	display: block;
	margin: 0 auto;
}

input[type=submit]:hover {
	background: #f65a6e;
	color: #fff;
}

.g-recaptcha {
	display: inline-block;
	margin-bottom: 20px;
}


@media (min-width:970px) {
	#contact {
		width: 100%;
		max-width: 866px;
		margin: 25px auto;
	}
}


@media (max-width:970px) {

	#wrapper {
			margin-top: 175px;
	}

	#top {
			height: 100px;
	}

	#cloud {
			top: 100px;
	}

	h2 {
			display: none;
	}

	#personaje {
			display: none;
	}

	#columns {
			display: block;
	}

	.column, #column-1, #column-2, #column-3, #column-4 {
			display: block;
			width: auto;
			height: auto;
			margin: 0 25px;
			animation-duration: .5s !important;
	}

	.column > :not(.icon-box) {
	display: block;
	width: 100%;
	}

	.icon-box {
			display: block;
			width: 100%;
			height: 100px;
			background-position: 50%;
			background-size: 75px;
			animation-duration: .5s !important;
	}

			@keyframes backgrow {
			0% {background-size: 12px 12px; opacity:0;}
			100% {background-size: 75px 75px; opacity:1;}
	}

}