@font-face {
    font-family: fuente-black;
    src: url("../fonts/Roboto-Black.ttf") format("truetype");
}

@font-face {
    font-family: fuente-light;
    src: url("../fonts/Roboto-Light.ttf") format("truetype");
}

@font-face {
    font-family: fuente-bold;
    src: url("../fonts/Roboto-Bold.ttf") format("truetype");
}

@font-face {
    font-family: fuente-regular;
    src: url("../fonts/Roboto-Regular.ttf") format("truetype");
}

body{
	font-family: fuente-regular;	
}
h1, h2, h3, h4, h5, h6{
	margin:0px;
}

.margenes-contenido{
	padding-left: 120px;
	padding-right: 120px;
}


@media only screen and (max-width: 1000px) {
	.margenes-contenido{
		padding-right: 20px;
	}
}

@media only screen and (max-width: 768px) {
	.margenes-contenido{
		padding-left: 90px;
	}
}


.tamano-1{
	font-size: 35px;
}
.tamano-2{
	font-size: 30px;
}
.tamano-3{
	font-size: 25px;
}
.tamano-4{
	font-size: 20px;
}

.fuente-light{
	font-family: fuente-light;
}
.fuente-bold{
	font-family: fuente-bold;
}

@media only screen and (max-width: 1000px) {
	.tamano-1{
		font-size: 30px;
	}
	.tamano-2{
		font-size: 25px;
	}
	.tamano-3{
		font-size: 20px;
	}
	.tamano-4{
		font-size: 18px;
	}
}

@media only screen and (max-width: 850px) {
	.tamano-1{
		font-size: 25px;
	}
	.tamano-2{
		font-size: 22px;
	}
	.tamano-3{
		font-size: 19px;
	}
	.tamano-4{
		font-size: 15px;
	}
}


.logo-fijo{
	position: fixed;
	top:20px;
	left: 20px;
	height: 70px;
	display: block;
	z-index: 10;
	display: none;
}

@media only screen and (max-width: 768px) {
	.logo-fijo{
		height: 50px;
	}
}


.portada{
	position: fixed;
	top:0px;
	left: 0px;
	width: 100vw;
	height: 100vh;
}

.portada .contenido{
	position: relative;
	width: 100%;
	height: 100%;
}

.portada .boton-desplazar{
	position: absolute;
	bottom:100px;
	left: 20px;
	z-index: 3;
	cursor:pointer;
}
.portada .boton-desplazar img{
	width: 50px;
}

.portada .desplazable{
	width: 500%;
	height: 100vh;
	position: relative;
	z-index: 1;
}

.portada .mascara{
	width: 100vw;
	height: 100vh;
	background-color: black;
	position: absolute;
	top:0px;
	left: 0px;
	z-index: 2;
	opacity: .5;
}

.portada .elemento{
	width: 20%;
	height: 100vh;
}

.portada .elemento img{
	display: block;
}

.portada .isotipo{
	position: absolute;
	z-index: 3;
	left: 20px;
	top:20px;
}
.portada .isotipo img{
	height: 70px;
	display: block;
}

.portada .logo{
	position: absolute;
	z-index: 3;
	top: 50%;
	left: 0px;
	width: 100%;
	transform: translateY(-50%);
}

.portada .logo img{
	width: 100%;
	max-width: 400px;
}

@media only screen and (max-width: 768px) {
	.portada .isotipo img{
		height: 50px;
	}
}



.barra-menu{
	position: relative;
	bottom:0px;
	left: 0px;
	width:100%;
	padding-top: 25px;
	padding-bottom: 25px;
	background-color: black;
	color:white;
	z-index: 3;
}

.barra-menu .opcion{
	margin-left: 30px;
	margin-right: 30px;
	cursor:pointer;
}

.barra-menu .opcion:hover{
	text-decoration: underline;
}

/*@media only screen and (max-width: 1000px) {
	.barra-menu{
		text-align: right;
	}
}*/

@media only screen and (max-width: 650px) {
	.barra-menu .opcion{
		margin-left: 10px;
		margin-right: 10px;
	}
}

@media only screen and (max-width: 500px) {
	.barra-menu .opcion{
		margin-left: 5px;
		margin-right: 5px;
	}
}


@media only screen and (max-width: 400px) {
	.barra-menu .opcion{
		display:none;
	}
}



.espacio-vacio{
	width:100vw;
	height: 100vh;
}


.nosotros{
	position: relative;
	background-color: white;
	z-index: 5;
	padding-top: 80px;
	padding-bottom: 80px;
}

.nosotros .imagen{
	width: 40%;	
	padding-right: 80px;
	box-sizing: border-box;

}
.nosotros .textos{
	width: 60%;
	box-sizing: border-box;
	padding-left: 0px;
}

.nosotros .titulo{
	font-family:fuente-light
}
.nosotros .imagen img{
	display: block;
	width: 100%;
	max-width: 400px;
}

.nosotros .texto{
	margin-top: 30px;
	text-align: justify;
}

.nosotros .render{
	display: block;
	width: 100%;
	margin-top: 50px;
}

@media only screen and (max-width: 1050px) {
	.nosotros .imagen{
		padding-right: 40px;
	}

	.nosotros .textos{
		padding-left: 20px;
	}

}


@media only screen and (max-width: 950px) {
	.nosotros .imagen{
		padding-right: 0px;
	}

	.nosotros .textos{
		padding-left: 40px;
	}

}

@media only screen and (max-width: 768px) {
	.nosotros .imagen{
		width: 100%;
		text-align: center;
		padding-right: 0px;

	}

	.nosotros .imagen img{
		max-width: 200px;
		margin:0 auto;
	}

	.nosotros .textos{
		width:100%;
		padding-left: 0px;
		margin-top: 40px;
	}	
}


.desarrollos{
	position: relative;
	z-index: 5;
	background-color: white;
	text-align: center;
	padding-bottom: 80px;
}
.desarrollos .titulo{

}

.desarrollos .elementos{
	margin-top: 50px;
}

.desarrollos .elemento{
	width:33.33%;
	padding-left: 20px;
	padding-right: 20px,;
	box-sizing: border-box;
}

.desarrollos .elemento img{
	width: 100%;
}

.desarrollos .elemento .subtitulo{
	margin-top: 10px;
}




.informacion{
	background-color: white;
	position: relative;
	z-index: 5;
	padding-bottom: 80px;
}

.informacion .introduccion{
	margin-top: 30px;
}

.informacion .elementos{
	margin-top: 50px;
}

.informacion .elemento{
	margin-bottom: 80px;
}

.informacion .elemento .imagen{
	width: 35%;
	box-sizing: border-box;
}

.informacion .elemento .imagen img{
	display: block;
	width: 100%;
}

.informacion .elemento .textos{
	width: 65%;
	box-sizing: border-box;
	text-align: left;
}

.informacion .elemento .textos .texto{
	margin-top: 15px;
}

.informacion .elemento[data-orientacion="izquierda"] .textos{
	padding-left: 50px;
}

.informacion .elemento[data-orientacion="derecha"] .textos{
	padding-right: 50px;
}