/*  

Theme Name: Clementoni - Tablet QR
Theme URI: http://www.sapientino.it
Description: Clementoni - Tablet QR
Version: 1.0
Author: BeeSoft - Web & Mobile Solutions
Author URI: http://www.beesoft.it

*/

/**************************************************************************************/

@import url('http://fonts.googleapis.com/css?family=Nunito:400,300,700');
@import url('http://netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.css');

@import url('styles/bee-ui.css');

/**************************************************************************************/

body { 
	font-family: 'Nunito', Arial, sans-serif;
	font-size: 14px;
	font-weight: 400; 
	color: #fff;
	background: #001238 url('images/loader.gif') no-repeat center -200px;
	-webkit-transition: background-position 0.5s ease-in-out;
	transition: background-position 0.5s ease-in-out;
}

body.loading { background-position-y: 150px; }

h1, h2, h3, h4 { color: #fff; }

a { color: #fff; }

input[type=text], input[type=email], input[type=tel], input[type=number], input[type=submit], textarea, select { 
	font-family: 'Nunito', Arial, sans-serif;
	font-weight: 400; 
}

/**************************************************************************************/

#content { 
	overflow: hidden;
	text-align: center; 
	margin: 50px 0px;
}

#logo, #video, #lang, #credits {
	-webkit-transition: 0.5s ease-in-out;
	transition: 0.5s ease-in-out;
}

#logo { margin: 20px 0px; }

.loading #logo { 
	margin-top: -500px; 
	opacity: 0;
}

#logo img {
	display: inline-block;
	width: 200px;
	max-width: 100%;
}

#video { margin: 20px 0px; }
#video iframe { height: 380px !important; }

.loading #video { 
	margin-top: 200px; 
	opacity: 0;
}

#lang { margin-top: 40px; }

.loading #lang { 
	margin-left: 50px; 
	opacity: 0;
}

#lang a { margin: 0px 3px; }

#lang img {
	display: inline-block;
	width: 25px;
	padding: 3px;
	border-radius: 3px;
	opacity: 0.5;
}

#lang .sel img { 
	background: #0066b8; 
	opacity: 1;
}

.home #lang img { opacity: 1; }

#credits {
	font-family: Arial, sans-serif;
	line-height: 150%;
	margin-top: 40px;
	font-size: 0.6em;
	color: rgba(255,255,255,0.6);
}

.loading #credits { opacity: 0; }

#credits a {
	text-decoration: none;
	color: rgba(255,255,255,0.6);
}



/**************************************************************************************/
/**************************************************************************************/


/*** WIDE 1280px ***/

@media only screen and (min-width: 1280px) {
	
	#video iframe { height: 380px !important; }	
	
}


/*** TABLET (vertical) + MOBILE common rules ***/

@media only screen and (max-width: 991px) {


}

/*** TABLET 768px (vertical) ***/

@media only screen and (min-width: 768px) and (max-width: 991px) {

	.col {
		margin-left: 20px !important;
		width: 700px;
		float: none;
	}
	
	#logo { margin-bottom: 80px; }
	#video iframe { height: 500px !important; }
	
}

/*** MOBILE 320px ***/

@media only screen and (max-width: 767px) {

	#content { margin: 20px 0px; }
	#video iframe { height: 220px !important; }
	
}

/*** MOBILE (WIDE) 480px ***/

@media only screen and (min-width: 480px) and (max-width: 767px) {
	
	#video iframe { height: 340px !important; }
	
}