@charset "utf-8";
@import url("https://fonts.googleapis.com/css?family=Ubuntu:300");
/* CSS Document */

/* Fonts */
@font-face {
    font-family: 'HelveticaNeueLT StdUltLt';
    src: url('HelveticaNeueLTStd-UltLt.otf');
	font-weight: normal;
    font-style: normal;
}
@font-face {
	font-family: 'HelveticaNeueLT Std';
    src: url('HelveticaNeueLTStd-Bd.otf');
}
/* Fonts */

::selection{
    background: hsla(40,100%,75%,0.50);
    color:hsla(211,60%,18%,1);
}
::-moz-selection{
    background: hsla(40,100%,75%,0.50);
    color:hsla(211,60%,18%,1);
}
::-webkit-selection{
    background: hsla(40,100%,75%,0.50);
    color:hsla(211,60%,18%,1);
}

*{
	margin:0;
	height:100%;
}
body{
	background: url(../images/back_humo.jpg) no-repeat fixed center;
	background-size:cover;
	height:100%;
}
/* Inicio */
#inicioback{
	background: url(../images/pyl.png) hsla(211,60%,18%,0.70) no-repeat fixed center;
	background-size:cover;
	height:100%;
}
#alas{
	margin:auto;
	background: url(../images/alas.png) no-repeat center;
	background-size:100%;
	width:59%;
	height:100%;
	display:flex;
	justify-content:center;
	align-items:center;
}
#cont-text{
	width:auto;
	height:350px;
	display:flex;
	justify-content: center;
	align-items:center;
	flex-direction:column-reverse;
}
#nombre, #line{
	width:auto;
	height:auto;
	font-family: 'HelveticaNeueLT StdUltLt';
	font-size:20px;
	text-align:center;
	color: rgba(255,211,126,0.35);
	letter-spacing:9px;
}
#pyl{
	width:auto;
	height:auto;
	font-family: 'HelveticaNeueLT Std';
	letter-spacing:15px;
	text-align:center;
	font-size:90px;
	color:#FFFFFF;
	line-height:1;
}
/* Inicio */

@media screen and (max-width: 2880px){
	#cont-text{
		height:350px;
	}
	#nombre, #line{
		font-size:50px;
		letter-spacing:20px;
	}
	#pyl{
		font-size:220px;
	}
	
}

@media screen and (max-width: 2560px){
	#nombre, #line{
		font-size:40px;
	}
	#pyl{
		font-size:190px;
	}
}

@media screen and (max-width: 1920px){
	#nombre, #line{
		font-size:30px;
		letter-spacing:16px;
	}
	#pyl{
		font-size:140px;
	}
}

@media screen and (max-width: 1440px){
	#alas{
		width:68%;
	}
	#nombre, #line{
		font-size:28px;
		letter-spacing:13px;
	}
	#pyl{
		font-size:115px;
	}
	
}

@media screen and (max-width: 1366px){
	#alas{
		width:59%;
	}
	#cont-text{
		height:350px;
	}
	#nombre, #line{
		font-size:20px;
		letter-spacing:9px;
	}
	#pyl{
		font-size:90px;
	}
	
}

@media screen and (max-width: 1280px){
	#alas{
		width:65%;
	}
	#nombre, #line{
		font-size:23px;
	}
	#pyl{
		font-size:95px;
	}
	
}

@media screen and (max-width: 1024px){
	#alas{
		width:78%;
	}
	
}

@media screen and (max-width: 800px){
	#alas{
		width:80%;
	}
	#nombre, #line{
		font-size:19px;
	}
	#pyl{
		font-size:70px;
	}	
}

@media screen and (max-width: 768px){
	#alas{
		width:85%;
	}	
}

@media screen and (max-width: 736px){
	#alas{
		width:63%;
	}
	#nombre, #line{
		font-size:15px;
		letter-spacing:5px;
	}
	#pyl{
		font-size:54px;
		letter-spacing:8px;
	}	
}

@media screen and (max-width: 667px){
	#nombre, #line{
		font-size:12px;
		letter-spacing:5px;
	}
	#pyl{
		font-size:48px;
		letter-spacing:8px;
	}	
}

@media screen and (max-width: 568px){
	#cont-text{
		height:300px;
	}
	#pyl{
		font-size:40px;
		letter-spacing:8px;
	}
	
}
@media screen and (max-width: 480px){
	#alas{
		width:75%;
	}
	
}
@media screen and (max-width: 414px){
	#alas{
		width:89%;
	}
	#nombre, #line{
		letter-spacing:5px;
	}
	#pyl{
		font-size:40px;
		letter-spacing:8px;
	}
}

@media screen and (max-width: 375px){
	#nombre, #line{
		font-size:12px;
		letter-spacing:4px;
	}
	#pyl{
		font-size:35px;
		letter-spacing:8px;
	}
}

@media screen and (max-width: 320px){
	#nombre, #line{
		font-size:10px;
		letter-spacing:4px;
	}
	#pyl{
		font-size:33px;
		letter-spacing:6px;
	}
}