/* FUENTES */

@font-face {
	font-family: 'OpenSansBold';
	src: url('../fuentes/opensans-bold-webfont.woff2') format('woff2'),
		url('../fuentes/opensans-bold-webfont.woff') format('woff');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'OpenSansRegular';
	src: url('../fuentes/opensans-regular-webfont.woff2') format('woff2'),
		url('../fuentes/opensans-regular-webfont.woff') format('woff');
	font-weight: normal;
	font-style: normal;
}

/* ESTILOS GENERALES */
*{
	box-sizing: border-box;
	font-family: 'OpenSansRegular', sans-serif;
}
body{
	margin: 0;
	padding: 0;
}
ul{
	margin: 0;
	padding:0;
	list-style: none;
}
a{
	text-decoration: none;
}
img,video{
	max-width: 100%;
}

/* MOVIL */
@media screen and (min-width: 15em){

	/* UTILITARIOS */

		.desdeIpad{
			display: none;
		}
		.paginaContenedor{
			max-width: 280px;
			margin: 0 auto;
			padding: 0;
		}

	/* HEADER */

		header{
			background: black;
			padding-bottom: 10px;
		}
		header h1{
			color: white;
			text-align: center;
			font-size: 1.5em;
		}
		.headerParrafo{
			margin: 10px 0;
		}
		.headerParrafo p{
			color: white;
			text-align: center;
			margin: 0;
			font-size: 0.8em;
		}
		.headerContenedorImagen{
			height: 100px;
			overflow: hidden;
		}

	/* NAV */

		nav{
			background: #4D4D4D;
		}
		.menuPrincipal{
			display: flex;
			flex-direction: column;
			align-items: center;
			padding: 10px 0;
		}
		.menuPrincipal li{
			background: black;
			padding: 10px;
			margin: 5px 0;
		}
		.menuPrincipal li a{
			color: white;
            font-family: OpenSansBold;
		}

	/* FOOTER */

		footer{
			padding-bottom: 10px;
		}
		footer p{
			font-size: 0.5em;
			text-align: center;
		}

	/* MAIN */

		main{
			margin-bottom: 20px;
		}
		.cajaTrabajos{
			display: flex;
			align-items: center;
		}
		.mainSeccionCajaTitulo{
			width: 100%;
			border-bottom: solid black 1px;
			margin-bottom: 15px;
		}
		.mainSeccionCajaTitulo h2{
			text-align: center;
			margin-bottom: 9px;
		}
		.botonPortfolioCompleto{
			width: 80%;
			display: block;
			background: black;
			padding: 10px;
			margin: 10px auto;
			margin-top: 25px;
			color: white;
			text-align: center;
		}
		.flechaRotativaIzq img{
			width: 50px;
			padding-right: 10px;
		}
		.flechaRotativaDer img{
			width: 50px;
			padding-left: 10px;
		}

	/* INFORMACION PERSONAL */
		.cajaFotoCarnet{
			margin: 0 auto;
			width: 150px;
			height: 150px;
			overflow: hidden;
			border-radius: 50%;
		}
		.cajaHeaderParrafos{
			width: 55%;
		}
		.cajaHeaderParrafos p{
			text-align: center;
		}
		.parrafoMasChico{
			font-size: 0.9em;
		}

	/* INDEX */
		.indexTitulo{
			background: black;
			padding: 10px;
			color: white;
			font-family: OpenSansBold;
            font-weight: normal;
			font-size: 1.3em;
		}
		.indexContenedorParrafos p{
			display: flex;
			justify-content: center;
		}
		.indexContenedorParrafos p span{
			margin: 0 10px;
		}

}

/* IPAD */
@media screen and (min-width: 40em){

	/* UTILITARIOS */

		.desdeIpad{
			display: block;
		}
		.paginaContenedor{
			max-width: 680px;
			margin: 0 auto;
			padding: 0;
		}

	/* HEADER */

		header{
			padding-bottom: 0;
			display: flex;
			align-items: center;
		}
		.headerContenedorImagen{
			max-width: 30%;
			height: auto;
			margin-right: 20px;
		}
		.headerContenedorImagen img{
			width: 100%;
		}
		header h1{
			text-align: left;
		}
		.headerParrafo{
			margin: 10px 0 20px 0;
		}
		.headerParrafo p{
			text-align: left;
		}

	/* NAV */

		.menuPrincipal{
			flex-direction: row;
			justify-content: space-around;
		}

	/* FOOTER */

		footer{
			padding-bottom: 10px;
		}
		footer img{
			width: 100%;
		}
		footer p{
			font-size: 0.55em;
			text-align: center;
		}

	/* MAIN */

		main{
			margin-bottom: 20px;
		}
		.cajaTrabajos .cajaItem{
			padding: 0 10px;
		}
		.botonPortfolioCompleto{
			width: 35%;
		}

	/* INFORMACION PERSONAL */
		.contenedorMiInformacion{
			padding: 30px;
			padding-bottom: 10px;
			display: flex;
			justify-content: space-around;
		}
		.cajaFotoCarnet{
			margin: 0 0;
		}
		.cajaInfoParrafos{
			width: 65%;
			padding-left: 20px;
			border-left: 1px solid black;
		}
		.cajaHeaderParrafos p{
			text-align: left;
		}

	/* INDEX */
	.indexContenedorParrafos{
		display: flex;
		justify-content: flex-start;
		flex-wrap: wrap;
	}
	.indexContenedorParrafos p{
		width: 33.333%;
	}

}

/* WEB */
@media screen and (min-width: 60em){

	/* UTILITARIOS */

		.paginaContenedor{
			max-width: 980px;
		}

	/* HEADER */

		.headerContenedorImagen{
			height: 150px;
		}

	/* NAV */

		.menuPrincipal{
			flex-direction: row;
			justify-content: space-around;
		}

	/* FOOTER */

		footer p{
			font-size: 0.75em;
		}

	/* MAIN */
		.cajaTrabajos{
			justify-content: center;
		}

}