html,body{
	background: #000;
	margin: 0;
	padding: 0;
	overflow: hidden;
	font-family: webfontregular,Arial,sans-serif;
	color: #fff;
	width: 100%;
	height: 100%;
	position: absolute;
	overflow: hidden;
}
a{
	color: inherit;
	text-decoration: none;
}
a:hover{
	text-decoration: underline;
}
#background-container{
	position: absolute;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
	overflow: hidden;
}
#background-container img{
	width: 100%;
	height: auto;
	opacity: 0;
	transition: opacity 1s;
	webkit-transition: opacity 1s;
}
#background-video{
	width: 100%;
	height: auto;
	position: absolute;
	opacity: 0;
	transition: opacity 1s;
	webkit-transition: opacity 1s;
}
@media all and (max-aspect-ratio: 1280/720){
	#background-video, #background-container img{
		height: 100.5% !important;
		width: auto !important;
	}
}

.center-xy{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	-webkit-transform: translate(-50%,-50%);
	transform-style: preserve-3d;
}
#info{
	width: 100%;
    position: absolute;
    bottom: 3.5em;
    text-align: center;
    font-size: 1.8em;
}
#icons{
	margin-bottom: 10px;
}
#icons img{
	height: 35px;
	width: auto;
	margin-bottom: 0;
	transition: margin-bottom .15s ease-in-out;
	webkit-transition: margin-bottom .15s ease-in-out;
}
#icons img:hover{
	margin-bottom: 5px;
}
#cities{
	position: absolute;
    top: 3.5em;
    text-align: center;
    width: 100%;
    left: 0;
    font-size: 1.8em;
}
#logo{
	width: 60%;
	height: auto;
}
/*PORTRAIT*/
@media only screen 
  and (min-device-width: 200px)
  and (max-device-width: 800px)
  and (orientation: portrait)  {
	html,body{
		background: #000;
		margin: 0;
		padding: 0;
		overflow: hidden;
		font-family: apercu_medium,Arial,sans-serif;
		color: #fff;
		width: 100%;
		height: 100%;
		position: absolute;
		overflow: hidden;
	}
	#cities{
		top: 4em;
		font-size: 4.8VW;
	}
	a{
		color: inherit;
		text-decoration: none;
	}
	a:hover{
		text-decoration: underline;
	}
	#punto{
		display:none;
	}
	#logo{
		width: 80%;
		height: auto;
		
	}
	#background{
		width: 100%;
		height: auto;
		opacity: 0;
		transition: opacity .5s;
	}
	#info{
		width: 60%;
		left: 20%;
		position: absolute;
		bottom: 4em;
		font-size: 4.8vw;
		text-align: center;
		letter-spacing: 0.5px;
	}
	.first-link{
		margin-bottom: 2vw;
		display: block;
	}
	#icons{
		margin-bottom: 5vw;
	}
	#icons img{
		height: 11vw;
		width: auto;
		margin: 0 4vw;
	}
}
/* LANDSCAPE */
@media only screen 
  and (min-device-width: 200px) 
  and (max-device-width: 1024px)
  and (orientation: landscape) {
	html,body{
		background: #000;
		margin: 0;
		padding: 0;
		overflow: hidden;
		font-family: apercu_medium,Arial,sans-serif;
		/*font-size: 46px;*/
		color: #fff;
		width: 100%;
		height: 100%;
		position: absolute;
		overflow: hidden;
	}
	a{
		color: inherit;
		text-decoration: none;
	}
	a:hover{
		text-decoration: underline;
	}
	#punto{
		font-size:20px;
	}
	#logo{
		width: 100vh;
		height: auto;
		
	}
	#background{
		width: 100%;
		height: auto;
		opacity: 0;
		transition: opacity .5s;
	}
	#cities{
		top: 3em;
		font-size: 4.8vh; 
	}
	#info{
		width: 60%;
		left: 20%;
		position: absolute;
		bottom: 10vh;
		font-size: 4.8vh;
		text-align: center;
		letter-spacing: 0.5px;
	}
	#icons{
		margin-bottom: 10px;
	}
	#icons img{
		height: 9vh;
		width: auto;
		margin: 0 2vh;
	}	  
}