/**
 * @copyright GMH Global Markets Trade
 * @author Edoardo Alejandro Palazuelos Osorio (e@ignisaltus.com)
 * @version 2.0 (Octubre 2018)
 * @since 1.0
 */

/*Importación de otros estilos*/
@import "reset.css";
@import "cabecera.css";
@import "menu.css";
@import "portada.css";
@import "quienes.css";
@import "que.css";
@import "familia.css";
@import "donde.css";
@import "contacto.css";
@import "footer.css";

/*Tipografías*/
@font-face{
	font-family: "CrimsonText";
	src: url("fonts/CrimsonText-SemiBold.ttf");
}

@font-face{
	font-family: "Abel";
	src: url("fonts/Abel-Regular.ttf");
}

@font-face{
	font-family: "Raleway";
	src: url("fonts/Raleway_Light.ttf");
}

/*Página*/
html,body{
    background-color: white;
	width: 100%;
	height: 100%;
	color: #707070;
	font-family: "Abel", sans-serif;
	font-size: 1.3vw;
	line-height: 1.5;
}

h1{
	color: #CB5320;
	font-family: "CrimsonText", sans-serif;
	font-weight: normal;
	font-size: 3vw;
	line-height: 1.2;
}

h2{
	color: #CB5320;
	font-weight: normal;
	font-size: 1.8vw;
}

h4{
	font-family: "Raleway", sans-serif;
	font-weight: normal;
	font-size: 0.8vw;
	text-transform: uppercase;
	letter-spacing: 0.28vw;
}

.flecha{
	display: flex;
	justify-content: center;
	position: absolute;
	bottom: 3vh;
	width: 84%;

	display: -webkit-flex;
	-webkit-justify-content: center;
}

.flecha img{
	width: 4vw;
	height: 4vw;
	cursor: pointer;
}

.flecha-familia{
	width: 100%;
}

/*Estilo para media pantalla
______________________________*/
@media only screen and (max-width: 1024px){
	html,body{
		font-size: 2vw;
	}

	h1{
		font-size: 5vw;
	}

	h2{
		font-size: 2.5vw;
	}

	h4{
		font-size: 1.8vw;
	}

	.flecha{
		width: 90%;
	}

	.flecha img{
		width: 6vw;
		height: 6vw;
	}

	.flecha-familia{
		width: 100%;
	}
}

/*Estilo para móviles
______________________________*/
@media only screen and (max-device-width: 465px){
	html,body{
		font-size: 4.5vw;
	}

	h1{
		font-size: 8vw;
	}

	h2{
		font-size: 5.5vw;
	}

	h4{
		font-size: 3vw;
	}

	.flecha{
		bottom: 5vh;
	}

	.flecha img{
		width: 13vw;
		height: 13vw;
	}

	.flecha-inicio{
		width: 100%;
	}	
}

@media only screen and (max-device-width: 465px) and (orientation: landscape){
	html,body{
		font-size: 2vw;
	}

	h1{
		font-size: 5vw;
	}

	h2{
		font-size: 3.5vw;
	}

	h4{
		font-size: 1.8vw;
	}
}