/* CSS Document */

/*
	### CSS LAYOUT 2017					   #######################################################
	### Implementazione e progettazione di #######################################################
	#
	#	Alessandro Iannone
	#	-----------------------
	#	www.cromofilla..com
	#	iannone@cromofilla.it	
	#
	#	 ######  ########   #######  ##     ##  #######  ######## #### ##       ##          ###    
	#	##    ## ##     ## ##     ## ###   ### ##     ## ##        ##  ##       ##         ## ##   
	#	##       ##     ## ##     ## #### #### ##     ## ##        ##  ##       ##        ##   ##  
	#	##       ########  ##     ## ## ### ## ##     ## ######    ##  ##       ##       ##     ## 
	#	##       ##   ##   ##     ## ##     ## ##     ## ##        ##  ##       ##       ######### 
	#	##    ## ##    ##  ##     ## ##     ## ##     ## ##        ##  ##       ##       ##     ## 
	#	 ######  ##     ##  #######  ##     ##  #######  ##       #### ######## ######## ##     ##
	#		
	##############################################################################################
*/

/* HTML BODY */
html, body { width: 100%; height: 100%;  /*-webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; */ font-family: 'Nexa Slab'; font-size: 100%; color: #464A4C; background-color: #fff; margin: 0; padding: 0; -webkit-transition: all .2s linear; -moz-transition: all .2s linear; transition: all .2s linear; }
/* LANDING */	
.landing-bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #ffffff; background-size: cover; background-position: center center; background-repeat: no-repeat; }
.landing-bg .color { width: 100%; height: 100%; background-color: rgba(255,255,255,0); }
.landing { border: 0px solid none; height: 680px; width: 700px; position: absolute; margin: -340px 0 0 -350px; left: 50%; top: 50%; text-align: center;  -webkit-transition: all .2s linear; -moz-transition: all .2s linear; transition: all .2s linear;}
.brand { position: relative; border: none; width: 100%; height: 100%; margin: 0 auto; background-size: contain; background-repeat: no-repeat; background-position: center center }
.brand >.email { position: absolute; bottom: 100px; left: 50%; transform: translateX(-50%); }
.brand >.email>a { color: #000; }
.brand >.social { position: absolute; bottom: 38px; left: 50%; transform: translateX(-50%); }
.brand >.social>a { width: 70px; padding: 0 10px; display: inline-block;   }
.brand >.social>a:hover { opacity: 0.5; }
.brand >.social>a img { width: 100%; height: 100%; }

.brand >.flags { position: absolute; bottom: 48px; left: 50%; transform: translateX(-50%); }
.brand >.flags>a { width: 70px; padding: 0 10px;margin: 0 20px; display: inline-block; color: #000; font-size: 20px;}
.brand >.flags>a:first-child { margin: 0}
.brand >.flags>a:hover { opacity: 0.5; }
.brand >.flags>a img { width: 100%; height: 100%; }

@media screen and (max-width: 736px) {
.landing { height: 350px; width: 350px; margin: -175px 0 0 -175px; }
.brand { width: 90% !important; }
.brand >.email { bottom: 56px; }
.brand >.email>a { font-size: 10px; }
.brand >.social { bottom: 30px; }
.brand >.social>a { width: 30px; padding: 0 3px;  }
.brand >.flags { bottom: 33px;width: 170px; }
.brand >.flags>a { width: 40px; padding: 0 3px;     font-size: 14px; }
.brand >.flags>a:first-child { margin: 0}
}

/* RESPONSIVE MOBILE INFERIORE A 480px */
@media screen and (max-width: 667px) {
}