@font-face {
	font-family: Roboto;
	src: url(../fonts/Roboto-Regular-webfont.eot), url(../fonts/Roboto-Regular-webfont.woff), url(../fonts/Roboto-Regular-webfont.ttf), url(../fonts/Roboto-Regular-webfont.svg);
}

@font-face {
	font-family: Sosa;
	src: url(../fonts/sosa-regular-webfont.eot), url(../fonts/sosa-regular-webfont.woff), url(../fonts/sosa-regular-webfont.ttf), url(../fonts/sosa-regular-webfont.svg);
}

@font-face {
	font-family: Merienda;
	src: url(../fonts/Merienda-Regular.ttf), url(../fonts/Merienda-Bold.ttf);
}

@font-face {
	font-family: Lato;
	src: url(../fonts/Lato-Regular.ttf), url(../fonts/Lato-Black.ttf), url(../fonts/Lato-BlackItalic.ttf), url(../fonts/Lato-Bold.ttf), url(../fonts/Lato-BoldItalic.ttf), url(../fonts/Lato-Hairline.ttf), url(../fonts/Lato-HairlineItalic.ttf), url(../fonts/Lato-Italic.ttf), url(../fonts/Lato-Light.ttf), url(../fonts/Lato-LightItalic.ttf);
}

* {
	font-family: "Lato", serif;
	font-size: 16px;
	text-decoration: none;
}

h1 {
	font-family: "Roboto", sans-serif;
	text-align: center;
	vertical-align: bottom;
	font-weight: bold;
	color: #ffffff;
	text-shadow: 1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}

h2 {
	font-family: "Merienda", cursive;
	color: #000000;
	text-shadow: 2px 0 5px #ffffff;
}

h3 {
	font-family: "Lato", serif;
	color: #000000;
	text-shadow: 0 0 10px #fff;
}

body {
	text-align: center;
	background: url(../images/body.jpg) no-repeat center center/cover fixed;
}

.header {
	grid-area: header;
}

.subheader {
	grid-area: subheader;
}

.contenido {
	grid-area: contenido;
}

.contenedor-main .contenidoCaja {
	display: block;
	text-decoration: none;
	transition: all 1s;
}

.contenedor-main .contenidoCaja .caja {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	border-radius: 3px;
	color: #fff;
	min-height: 200px;
	min-width: 200px;
	padding: 2rem;
	margin: .5rem;
}

.contenedor-main .contenidoCaja:hover {
	transform: scale(1.03);
	transition: all 1s;
}

.contenedor-proyectos .contenidoCaja {
	display: block;
	text-decoration: none;
	transition: all 1s;
}

.contenedor-proyectos .contenidoCaja .caja {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	border-radius: 3px;
	color: #fff;
	min-height: 100px;
	padding: 2rem;
	margin: 0.5rem;
}

.contenedor-proyectos .contenidoCaja:hover {
	transform: scale(1.03);
	transition: all 1s;
}

.nav-icon {
	grid-area: nav;
}

.social-icon-header {
	grid-area: social-icon-header;
}

.footer {
	grid-area: footer;
}

.web {
	display: grid;
	grid-template-areas: "header""subheader""nav""social-icon-header""contenido""principal""footer";
}

@media only screen and (min-width: 50px) and (max-width: 767px) {
	h1, h2 {
		line-height: 5vmax;
		font-size: 1.5rem;
	}
	h3 {
		font-size: 1.5rem;
	}
	.web {
		grid-template-columns: 1fr;
		grid-template-areas: "header""subheader""nav""social-icon-header""contenido""principal""footer";
	}
	.header {
		width: 100%;
		background: url(../images/cabecera.png) no-repeat center center/cover fixed;
		height: 40vh;
		overflow: hidden;
		font-family: Arial, Helvetica, sans-serif;
		margin: 0 auto;
	}
	.subheader {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 100%;
		height: 30vh;
		background: url(../images/subheader.jpg) no-repeat center center/cover fixed;
		overflow: hidden;
		color: #1c3312;
		font-family: "Merienda", cursive;
		background-color: #1976d2;
	}
	.social-icon-header {
		display: none;
	}
	.fa-3x {
		text-align: center;
		font-size: 2.5rem;
	}
	.nav {
		display: flex;
		position: sticky;
		top: 0;
		z-index: 1;
		width: 100%;
	}
	.nav-icon {
		text-align: center;
		background: linear-gradient(to right, rgba(0, 148, 255, 1), rgba(189, 189, 189, 1));
		padding-top: 0.5rem;
		width: 100%;
		padding-right: 2rem;
	}
	.contenido {
		grid-area: contenido;
		width: 100%;
		border: solid black 1px;
		margin: 0 auto;
	}
	.principal {
		width: 100%;
	}
	.principal {
		margin: 0 auto;
		margin-top: 1rem;
		margin-bottom: 1rem;
		opacity: 0.97;
		width: 95%;
		border: solid black 1px;
		background-color: rgb(46, 162, 245);
		color: rgb(34, 157, 245);
		min-height: 400px;
	}
	.principal>article {
		text-align: center;
		margin-top: 1rem;
		margin-bottom: 2rem;
		margin-right: 1.5rem;
		margin-left: 1rem;
		padding: 7px;
		border-radius: 10px;
		min-height: 400px;
		background-color: rgb(255, 255, 255);
		border: 5px solid black;
		box-shadow: -2px -2px 2px 2px rgba(0, 0, 0, 0.35), inset 3px 3px 3px -3px rgba(0, 0, 0, 0.75);
		word-break: normal;
	}
	
	.contenedor {
		display: flex;
		justify-content: center;
		align-items: center;
		flex-flow: column;
		background-color: rgb(255, 255, 255);
	}
	.contenedor-proyectos {
		display: grid;
		grid-template-columns: 1fr;
		background-color: rgb(255, 255, 255);
		width: 100%;
	}
	.contenedor>p {
		overflow-x: hidden;
		text-align: left;
		margin: 0;
		padding: 0;
		width: 80%;
	}
	.responsive-img {
		margin-top: 2rem;
		margin-bottom: 2rem;
		max-width: 100%;
		height: auto;
	}
	footer {
		align-items: center;
		text-align: left;
		background: linear-gradient(to right, #ff5252, rgba(0, 148, 255, 1));
	}
	.footer-copyright {
		text-align: center;
		min-height: 50px;
	}
	.social-icon {
		text-align: center;
		min-height: 50px;
	}
	.nav-icon .icon:hover {
		transform: scale(1);
		-webkit-transform: scale(1);
		-moz-transform: scale(1);
		-o-transform: scale(1);
	}
	.nav-icon .icon {
		transform: scale(1);
		-webkit-transform: scale(0.5);
		-moz-transform: scale(0.5);
		-o-transform: scale(0.5);
		transition-duration: 0.5s;
		-webkit-transition-duration: 0.5s;
		-moz-transition-duration: 0.5s;
		-o-transition-duration: 0.5s;
	}
}

@media only screen and (min-width: 768px) and (max-width: 1023px) {
	h1, h2 {
		font-size: 2rem;
	}
	h3 {
		font-size: 2rem;
	}
	.web {
		grid-template-columns: 1fr;
		grid-template-areas: "subheader subheader""header header""social-icon-header social-icon-header""nav nav""contenido contenido""footer footer";
	}
	.header {
		width: 100%;
		background: url(../images/cabecera.png) no-repeat center center/cover fixed;
		height: 50vh;
		overflow: hidden;
		font-family: Arial, Helvetica, sans-serif;
		margin: 0 auto;
	}
	.subheader {
		display: flex;
		justify-content: center;
		align-items: flex-end;
		width: 100%;
		height: 50vh;
		background: url(../images/subheader.jpg) no-repeat center center/cover fixed;
		overflow: hidden;
		color: #1c3312;
		font-family: "Merienda", cursive;
		background-color: #1976d2;
	}
	.social-icon-header {
		text-align: left;
		background: linear-gradient(to left, rgba(0, 148, 255, 1), rgba(189, 189, 189, 1));
		padding-top: 0.5rem;
		width: 49%;
	}
	.nav {
		display: flex;
		position: sticky;
		top: 0;
		z-index: 2;
		width: 100%;
	}
	.nav-icon {
		text-align: right;
		background: linear-gradient(to right, rgba(0, 148, 255, 1), rgba(189, 189, 189, 1));
		padding-top: 0.5rem;
		width: 49%;
		padding-right: 2rem;
	}
	.contenido {
		grid-area: contenido;
		width: 95%;
		margin: 0 auto;
	}
	.principal {
		margin: 0 auto;
		margin-top: 1rem;
		margin-bottom: 1rem;
		width: 100%;
		border: solid black 1px;
		background: #0094ffff;
		opacity: 0.97;
		color: #0094ffff;
		min-height: 400px;
	}
	.principal {
		width: 100%;
	}
	.principal>article {
		margin-top: 1rem;
		margin-bottom: 2rem;
		margin-right: 1.5rem;
		margin-left: 1.5rem;
		padding: 7px;
		border-radius: 10px;
		min-height: 400px;
		background-color: rgb(255, 255, 255);
		border: 5px solid black;
		box-shadow: -3px -3px 3px 3px rgba(0, 0, 0, 0.35), inset 5px 5px 5px -3px rgba(0, 0, 0, 0.75);
		word-break: normal;
	}
	
	.contenedor {
		display: flex;
		justify-content: center;
		align-items: center;
		flex-flow: column;
		background-color: rgb(255, 255, 255);
	}
	.contenedor-proyectos {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		background-color: rgb(255, 255, 255);
		width: 100%;
	}
	.contenedor>p {
		margin-top: 2rem;
		margin-bottom: 2rem;
		max-width: 100%;
		height: auto;
	}
	.responsive-img>img {
		border-radius: 10%;
		max-width: 100%;
		height: auto;
		filter: drop-shadow(16px 16px 10px black);
	}
	footer {
		display: flex;
		width: 100%;
		background-color: #1976d2;
	}
	.footer-copyright {
		text-align: center;
		background: linear-gradient(to right, rgba(0, 148, 255, 1), rgba(189, 189, 189, 1));
		min-height: 50px;
		width: 70%;
	}
	.social-icon {
		text-align: center;
		background: linear-gradient(to left, rgba(0, 148, 255, 1), rgba(189, 189, 189, 1));
		min-height: 50px;
		width: 30%;
	}
}

@media only screen and (min-width: 1024px) {
	h1, h2 {
		font-size: 2.5rem;
	}
	h3 {
		font-size: 2rem;
	}
	.web {
		display: grid;
		margin: 0 auto;
		grid-template-columns: 1fr;
		grid-template-areas: "header header""subheader subheader""nav social-icon-header""contenido contenido""footer footer";
	}
	.header {
		width: 100%;
		background: url(../images/cabecera.png) no-repeat center center/cover fixed;
		height: 60vh;
		overflow: hidden;
		font-family: Arial, Helvetica, sans-serif;
		margin: 0 auto;
	}
	.subheader {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 100%;
		height: 70vh;
		background: url(../images/subheader.jpg) no-repeat center center/cover fixed;
		overflow: hidden;
		color: #1c3312;
		font-family: "Merienda", cursive;
		background-color: #1976d2;
	}
	.social-icon-header {
		text-align: left;
		background: linear-gradient(to left, rgba(0, 148, 255, 1), rgba(189, 189, 189, 1));
		padding-top: 1rem;
		width: 49%;
	}
	.nav {
		display: flex;
		position: sticky;
		top: 0;
		z-index: 2;
		width: 100%;
		height: 80px;
	}
	.nav-icon {
		text-align: right;
		background: linear-gradient(to right, rgba(0, 148, 255, 1), rgba(189, 189, 189, 1));
		padding-top: 1rem;
		width: 49%;
		padding-right: 2rem;
	}
	.contenido {
		grid-area: contenido;
		width: 95%;
		margin: 0 auto;
	}
	.principal {
		margin: 0 auto;
		margin-top: 1rem;
		margin-bottom: 1rem;
		opacity: 0.97;
		width: 100%;
		border: solid black 1px;
		background-color: #0094ffff;
		color: #0094ffff;
		min-height: 400px;
	}
	.principal {
		width: 100%;
	}
	.principal>article {
		margin-top: 1rem;
		margin-bottom: 2rem;
		margin-right: 1.5rem;
		margin-left: 1.5rem;
		padding: 7px;
		border-radius: 10px;
		min-height: 400px;
		background-color: rgb(255, 255, 255);
		border: 5px solid black;
		box-shadow: -3px -3px 3px 3px rgba(0, 0, 0, 0.35), inset 5px 5px 5px -3px rgba(0, 0, 0, 0.75);
		word-break: normal;
	}
	.articulo {
		display: flex;
	}
	.contenedor {
		display: flex;
		justify-content: center;
		align-items: center;
		flex-flow: column;
		background-color: rgb(255, 255, 255);
		border: 3px solid #000000ff;
	}
	.contenedor-main {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		background-color: rgb(255, 255, 255);
		width: 100%;
	}
	.contenedor-main .contenidoCaja {
		display: block;
		text-decoration: none;
		transition: all 1s;
	}
	.contenedor-main .contenidoCaja .caja {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		border-radius: 3px;
		min-width: 200px;
		min-height: 300px;
	}
	.contenedor-main .contenidoCaja .caja>ol {
		text-align: justify;
	}
	.contenedor-main .contenidoCaja .caja ol {
		color: #000000;
	}
	.contenedor-main .contenidoCaja .caja li a {
		color: #000000;
	}
	.contenedor-main .contenidoCaja .caja ol li:hover, .contenedor-main .contenidoCaja .caja ol li:hover:before {
		color: #ffffff;
	}
	.contenedor-main.contenidoCaja .caja ol .pendiente, .contenedor-main .contenidoCaja .caja ol li .pendiente {
		color: #5b6178;
	}
	.contenedor-main .contenidoCaja .caja ol .pendiente:hover, .contenedor-main .contenidoCaja .caja ol .pendiente:hover:before {
		color: #5b6178;
	}
	.contenedor-main .contenidoCaja .caja li a:hover, .contenedor-main .contenidoCaja .caja li a:hover:before {
		color: #ffffff;
	}
	.contenedor-proyectos {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		background-color: rgb(255, 255, 255);
		width: 100%;
	}
	.contenedor-proyectos .contenidoCaja {
		display: block;
		text-decoration: none;
		transition: all 1s;
	}
	.contenedor-proyectos .contenidoCaja .caja {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		border-radius: 3px;
		color: #fff;
		min-height: 300px;
	}
	.contenedor>p, footer {
		display: flex;
		width: 100%;
		background-color: #1976d2;
	}
	.footer-copyright {
		text-align: center;
		background: linear-gradient(to right, rgba(0, 148, 255, 1), rgba(189, 189, 189, 1));
		min-height: 50px;
		width: 70%;
	}
	.social-icon {
		text-align: center;
		background: linear-gradient(to left, rgba(0, 148, 255, 1), rgba(189, 189, 189, 1));
		min-height: 50px;
		width: 30%;
	}
}

.social-icon a, .social-icon-header a {
	color: #ffffff;
}

.social-icon .icon:hover, .social-icon-header .icon:hover {
	transform: scale(1);
	-webkit-transform: scale(1);
	-webkit-transform: scale(1);
	-moz-transform: scale(1);
	-o-transform: scale(1);
}

.social-icon .icon, .social-icon-header .icon {
	transform: scale(0.7);
	-webkit-transform: scale(0.7);
	-moz-transform: scale(0.7);
	-o-transform: scale(0.7);
	transition-duration: 0.5s;
	-webkit-transition-duration: 0.5s;
	-moz-transition-duration: 0.5s;
	-o-transition-duration: 0.5s;
}

.social-icon #social-fb:hover, .social-icon-header #social-fb:hover {
	color: #3b5998;
}

.social-icon #social-tw:hover, .social-icon-header #social-tw:hover {
	color: #4099ff;
}

.social-icon #social-em:hover, .social-icon-header #social-em:hover {
	color: #f39c12;
}

.social-icon #social-li:hover, .social-icon-header #social-li:hover {
	color: #006699;
}

.social-icon #social-gh:hover, .social-icon-header #social-gh:hover {
	color: #323131;
}

.nav-icon #nav-inicio:hover, .nav-icon #nav-about:hover, #nav-contact:hover, #nav-back:hover, #nav-forward:hover, #nav-projects:hover {
	color: #228cac;
}

.nav-icon .icon:hover {
	transform: scale(1);
	-webkit-transform: scale(1);
	-moz-transform: scale(1);
	-o-transform: scale(1);
}

.nav-icon a {
	color: #ffffff;
}

.nav-icon .icon {
	transform: scale(0.7);
	-webkit-transform: scale(0.7);
	-moz-transform: scale(0.7);
	-o-transform: scale(0.7);
	transition-duration: 0.5s;
	-webkit-transition-duration: 0.5s;
	-moz-transition-duration: 0.5s;
	-o-transition-duration: 0.5s;
}

.botonera {
	display: inline-flex;
}

.botonera>p {
	margin: 1rem;
}

footer p {
	font-family: "Merienda", cursive;
}

.violet {
	background-color: rgb(140, 97, 212);
}

.pink {
	background-color: rgb(255, 118, 164);
}

.green {
	background-color: rgb(36, 167, 54);
}

.orange {
	background-color: rgb(216, 140, 27);
}

.red {
	background-color: rgb(245, 47, 40);
}

.brown {
	background-color: rgb(104, 80, 72);
}

.gray {
	background-color: rgb(151, 146, 146);
}

.blue {
	background-color: rgb(68, 163, 207);
}

.dark-blue {
	background-color: rgb(87, 121, 231);
}

.aquamarine {
	background-color: rgb(21, 226, 158);
}

.fucsia {
	background-color: rgb(248, 7, 208);
}

.darker-blue {
	background-color: rgb(6, 32, 119);
}

.darkcyan {
	background-color: darkcyan;
}

.chocolate {
	background-color: chocolate;
}

.light-green {
	background-color: rgb(139, 245, 97);
}

.kitana {
	background-color: #577B98;
}

.mileena {
	background-color: #820687;
}

.raiden {
	background-color: #1A89D5;
}

.scorpion {
	background-color: #AD8204;
}

.reptile {
	background-color: #398347;
}

.sub-zero {
	background-color: #006FF6;
}

.liu-kang {
	background-color: #BB3C36;
}

.baraka {
	background-color: #C9B696;
}