@charset "UTF-8";
/* CSS Document */

body, html {
	height: 100%;
	background-color: rgba(12,16,33,1.00);
}

@font-face {
	font-family: "titilliumRegular";
	src: url(fonts/Titillium-RegularUpright.otf);
}
@font-face {
	font-family: "titilliumLight";
	src:url(fonts/Titillium-LightUpright.otf);
}

h1,h2,h3, p {font-family: "titilliumRegular"}
h4,h5 {font-family: "titilliumLight"}

.parallax {
	background-image:url(img/fondoPlano.png);
	height: 45%;
	background-attachment: fixed;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}

#overlay {
	position: absolute;
    top: 0;
    bottom: 0;
    background: #999;
    width: 100%;
    height: 100%;
    opacity: 0.8;
    z-index: 100;
}

#popUp {
	position: absolute;
    top: 50%;
    left: 50%;
    background: #fff;
    width: 80%;
    height: 80%;
    margin-left: -40%; /*Half the value of width to center div*/
    margin-top: -20%; /*Half the value of height to center div*/
    z-index: 200;
	border-radius: 10px;
}

#popUpClose {
	margin-left: 85%;
	margin-top: 60%;
    cursor: pointer;
}

.popUpContent {
	padding-top: 15px;
	padding-left: 2px;
	padding-right: 2px;
}

.popUpContent iframe {
	position: absolute;
	width: 100%;
	height: 90%;
}

#button {
	cursor: pointer;
}

.imgResponsive {
	max-width: 100%;
	height: auto;
	float: left;
}

.imgBotones {
	width: 19.2%;
	height: auto;
	float: left;
	margin-left: 8px;
	margin-top: 8px;
}

.imgBoton {
	width: 13%;
	height: auto;
	position: absolute;
}

.imgBoton2 {
	width: 11%;
	height: auto;
	position: absolute;
	margin-top: 30.15%;
	margin-left: 87.5%;
}

.ventanaPrincipal {
	display: inline;
	align-content: center;
	clear: both;
}

.cajaTexto{
	float: left;
	width: 52.8%;
	margin-right: 46.2%;
	position: absolute;
}

.contenedorVideo{
	position: relative;
	padding-bottom: 30%;
	width: auto;
	margin-left: 46.5%;
}

.contenedorVideo iframe{
	position: absolute;
	width: 100%;
	height: 100%;
}

.galeria{
	position: absolute;
	float: inherit;
	margin-top: 4%;
	position: absolute;
	overflow-y: scroll;
	width: 100%;
}

.texto{
	width: 80%;
	height: auto;
	float: left;
	color: white;
	margin-left: 20px;
	margin-top: 20px;
	position: absolute;
}
@media screen and (max-width: 1920px){
	.texto{
		font-size: 18px;
		margin-top: 50px;
	}
	.galeria{
		height: 400px;
		margin-top: 4%;
	}
	#popUp {
		height: 80%;
	}
}

@media screen and (max-width: 1460px){
	.texto{
		font-size: 12px;
		margin-top: 35px;
	}
	.galeria{
		height: 330px;
		margin-top: 4%;
	}
	#popUp {
		height: 80%;
		margin-top: -25%;
	}
}

@media screen and (max-width: 1000px){
	.texto{
		font-size: 10px;
		margin-top: 25px;
	}
	.galeria{
		height: 1120px;
		margin-top: 4%;
	}
	.imgBotones {
	    width: 48%;
	    height: auto;
		float: left;
	    margin-left: 15px;
	    margin-top: 15px;
	}
	.titulo1{
	    color: white;
	    margin-left: 5px;
		font-size: 16px;
	}
	#popUp {
		height: 40%;
		margin-top: -40%;
	}
}
@media screen and (max-width: 970px){
	.texto{
		font-size: 10px;
		margin-left: 15px;
	}
    .galeria{
		height: 340px;
		margin-top: 4%;
	}
	.imgBotones {
	    width: 32%;
	    height: auto;
		float: left;
	    margin-left: 8px;
	    margin-top: 15px;
	}
	.titulo1{
	    color: white;
	    margin-left: 5px;
		font-size: 10px;
	}
	#popUp {
		height: 60%;
		margin-top: -30%;
	}
}
@media screen and (max-width: 600px){
	.texto{
		font-size: 4px;
		margin-left: 5px;
		margin-top: 15px;
	}
	.galeria{
		height: 690px;
		margin-top: 4%;
	}
	.imgBotones {
	    width: 48%;
	    height: auto;
		float: left;
	    margin-left: 8px;
	    margin-top: 15px;
	}
	.titulo1{
	    color: white;
	    margin-left: 5px;
		font-size: 10px;
	}
    #popUp {
		height: 50%;
		margin-top: -30%;
	}
}

.seccion1, .seccion2 {
	color: white;
	width: 100%;
	float: left;
}
.titulo1{
	color: white;
	margin-left: 20px;
}

/*
calc(16px + (32-12)*(100vw - 600px)/(700-500);
calc(18px + (30-16)*(100vw - 970px)/(1100-800);
calc(20px + (28-18)*(100vw - 1000px)/(1200-990);
calc(24px + (26-20)*(100vw - 1460px)/(1600-1200);
calc(26px + (28-24)*(100vw - 1920px)/(2000-1650);
*/

/*
#boton01:hover, #boton02:hover, #boton03:hover, #boton04:hover, #boton05:hover, #boton06:hover, #boton07:hover, #boton08:hover, #boton09:hover, #boton010:hover, #boton011:hover, #boton012:hover, #boton013:hover, #boton014:hover, #boton015:hover, #boton016:hover, #boton017:hover, #boton018:hover, #boton019:hover, #boton020:hover, #boton021:hover, #boton022:hover, #boton023:hover, #boton024:hover{
	filter: opacity(.7);*/
}