/*  @import url(files/bootstrap.css); */

* {
	-webkit-font-smoothing: antialiased;
	letter-spacing:0.1em;
}

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	background: transparent;
	border: 0;
	margin: 0;
	padding: 0;
	vertical-align: baseline;
}

body {
	line-height: 1;
	font-size: 1em;
	background: #000;
}

/* styles for desktop */
.tinynav { display: none;
	position: relative;
	z-index: 9998;
	width:90%;
	margin: auto;
	padding-left: 5%;
	padding-right: 5%;
	
	font-family:Helvetica, Arial, sans-serif;
	font-size-adjust:0.508;
	font-weight:600;
	color: #000000;
	text-transform: none;
}

a:hover {text-decoration: none;}

.video-container {
	position: relative;
	z-index: 3;
	padding-bottom: 54.25%;
	padding-top: 25px;
	height: 0;
	overflow: hidden;
}
		
.video-container iframe,  
.video-container object,  
.video-container embed,
.video-container img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.video-container-2 {
	position: relative;
	padding-bottom: 54.25%;
	padding-top: 30px;
	height: 0;
	overflow: hidden;
}

.video-container-2 iframe,  
.video-container-2 object,  
.video-container-2 embed,
.video-container-2 img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

h1, h2, h3, h4, h5, h6 {
	clear: both;
	font-weight: normal;
}
ol, ul {
	list-style: none;
}
blockquote {
	quotes: none;
}
blockquote:before, blockquote:after {
	content: '';
	content: none;
}
del {
	text-decoration: line-through;
}

table {
	border-collapse: collapse;
	border-spacing: 0;
}

a img {
	border: none;
}

p img {
	width: 100%;
}

input::-moz-focus-inner, button::-moz-focus-inner {
	padding:0; border:0;
}

/* clearfix */

.cf:before,
.cf:after {
    content:"";
    display:table;
	}

.cf:after { clear:both }

.cf { zoom:1; }


/* Top Section - Poster */

.opensans {font-family:Helvetica, Arial, sans-serif; font-size-adjust:0.508; font-weight:600; color: #000;}

.imprint_sans {font-family:Helvetica, Arial, sans-serif; font-size-adjust:0.508; font-size: 1em; text-decoration: none; color: #FFFFFF; -webkit-transition: color 0.3s linear; -moz-transition: color 0.3s linear;}

#social {position: fixed; top:0; right:1%; z-index: 9999; background: rgba(255,255,255,0); padding-top: 0.7em;padding-bottom: 0.7em;}

#socialmobile {position: fixed; top:0; right:1%; z-index: 9999; background: rgba(255,255,255,0); padding-top: 1.3em;padding-bottom: 1.3em; display: none; padding-right: 5%;}

#logo {position:relative; top:0; left:10%; z-index: 9999; background: rgba(255,255,255,0); padding-top: 0.7em;padding-bottom: 0.7em;}

#logo a{font-family:Helvetica, Arial, sans-serif; font-size-adjust:0.508; font-size: 1em; text-decoration: none; color: #FFFFFF; -webkit-transition: color 0.3s linear; -moz-transition: color 0.3s linear;}


#logo a:hover {color: #CECECE;}

#navigation {position: fixed; top:0; left:0; z-index: 9998; height:auto; width: 100%; background: #000000; padding-top:0.7em; padding-bottom: 0.7em; word-spacing: 1.5em; }

#navigation li  {font-family:Helvetica, Arial, sans-serif; font-size-adjust:0.508; font-weight:600; color: #000; font-size: 0.9em; text-transform: none;  display: inline; none: 0 1px 1px rgba(0,0,0,.4);}

#navigation a {text-decoration: none; color: #000000; -webkit-transition: color 0.3s linear; -moz-transition: color 0.3s linear;}

#navigation a:hover {color: #4D4D4D;}

#archive{
	color: #000000; -webkit-transition: color 0.1s linear; -moz-transition: color 0.1s linear;
}

#archive:hover{
	color:grey;
}

#poster {position: fixed; z-index: 0; top: 0; height: 36em; width: 100%; /*min-width: 980px;*/
 background:#000;

/* background: url(./poster/rotator.php) no-repeat center center;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	T*/
}

#mask {position:fixed; z-index: 0; width: 100%; /*min-width: 980px;*/ height: 32em; top: 0; background: #000; text-align: center; cursor: pointer; padding-bottom: 5em;}

#mask h1 {font-size: 4.5em; line-height: 1em; margin-top: 0.5em; margin-bottom: 0.5em; text-align: left; margin-left:15%; margin-right:15%; color:#ffffff; letter-spacing: 0em; text-shadow: 0px 1px 3px rgba(0,0,0,0.3);}

#mask h2 {font-size: 1.5em; font-weight: 500; margin-top: 0.8em; line-height: 10px; text-align: left; margin-left:15%; margin-right:15%; color: #ffffff; letter-spacing: 0em; text-shadow: 0px 1px 1px rgba(0,0,0,0.3);}

#imprint {position: relative; top:0; left:10%; z-index: 9999; background: rgba(255,255,255,0); padding-top: 0.7em;padding-bottom: 0.7em;}

#imprint a{font-family:Helvetica, Arial, sans-serif; font-size-adjust:0.508; font-size: 1em; text-decoration: none; color: #FFFFFF; -webkit-transition: color 0.3s linear; -moz-transition: color 0.3s linear;}

#imprint a:hover {color: #CECECE;} 

/* layout di base  */

body#about {background: #CECECE;}

.page {position:relative; width:100%; z-index: 3; background: #000000;}
.first {position: relative; z-index: 3; margin-top: 25em;}
.white {position: relative; z-index: 3; background: #CECECE; color: #FFFFFF;}
.wrapper {position: relative; z-index: 3; width: 100%; /*max-width: 960px;*/ padding-top:3em; margin-bottom: 4em; margin: auto;}

.lowercase {text-transform: none;}

.leaderboard {margin-top: 4em; margin-bottom:0; width:100%;}

.left {float: left;}
.right {float: right;}


/* video */

.video {width: 80%; margin-top: 5em; margin-right: auto; margin-bottom: 5em; margin-left: auto;}

.video:last-child {border-bottom: none; padding-bottom: 0;}



/* sezione testo backg bianco */

.white .opensans {color: #000;}

.white a {color: #000;
}

.white a:hover {
color: #FFF;
text-decoration: none;
}

.section {font-size: 1.5em; line-height: normal; display: block; margin: 0 auto; text-align: left; position: relative; text-transform: none; margin: 2em; margin-left: 10%; margin-right: 10%; margin-top: 0;}

.tiny {font-size: 1em; font-weight: 400; font-style:oblique; line-height: normal; display: block; margin: 0 auto; text-align: left; position: relative; margin: 2em; margin-left: 10%; margin-right: 10%; margin-bottom: 0.5em;}


.body_text {font-family:Helvetica, Arial, sans-serif; font-size-adjust:0.508; font-size: 1em; font-weight: 400; line-height: normal; display: block; margin: 2em; text-align: left; position: relative; margin-left: 10%; margin-right: 10%;}

#reference-1 {font-family:Helvetica, Arial, sans-serif; font-size-adjust:0.508; font-size: 0.8em; font-weight: 400; line-height: normal; display: block; margin: 2em; text-align: left; position: relative; margin-left: 10%; margin-right: 10%;}

#reference-2 {font-family:Helvetica, Arial, sans-serif; font-size-adjust:0.508; font-size: 0.8em; font-weight: 400; line-height: normal; display: block; margin: 2em; text-align: left; position: relative; margin-left: 10%; margin-right: 10%;}

.infotext {margin-top: 70px;}

.infotext a img {
 opacity: 0.9;
 filter: alpha(opacity=90);
}

.infotext a:hover img {
 opacity: 1;
 filter: alpha(opacity=100);
}

.infotext .copy {width: 280px; text-align: center; text-transform: none;}

.infotext .copy p {font-family:Helvetica, Arial, sans-serif; font-size-adjust:0.508; font-weight:600; font-size: 30px; line-height: 35px; margin-bottom: 35px;}



/* breakpoints */


@media all and (min-width: 768px) and (max-width: 1080px) {

	#poster {height: 26em;}
	
	#mask {height: 40em;}
	
	.first {margin-top: 15em;}
	
	#mask h1 {font-size: 3.5em; margin-top: 0.5em;}
	
	#mask h2 {font-size: 1.1em;}
	
	#imprint {padding-bottom: 1em;}
	
	.video {width: 100%; margin-top: 2em; margin-bottom: 2em;}
	
}

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

	#poster {height: 23em;}
	
	#mask {height: 40em;}
	
	.first {margin-top: 12em;}
	
	#logo {left:5%;}
	
	#social {right:5%;}
	
	#mask h1 {font-size: 2em; margin-top: 0.3em;}
	
	#mask h2 {font-size: 0.9em; line-height: 1em; margin-top: 0.3em;}
	
	#imprint {padding-bottom: 1em;}
	
	.tinynav {display: block; width:50%; height: 1.5em; font-size: 0.9em; z-index: 9998;}
    #nav { display: none }
    
    .video {width: 100%; margin-top: 1em; margin-bottom: 1em;}
}

@media screen and (min-width: 0px) and (max-width: 480px) {

	#poster {height: 18em;}
	
	#mask {height: 30em;}
	
	.first {margin-top: 10em;}
	
	#logo {left:5%;}
	
	#social {right:5%;}
	
	#mask h1 {font-size: 1.5em; margin-top: 0.3em;}
	
	#mask h2 {font-size: 0.75em; line-height: 1.2em; margin-top: 0.3em;}
	
	#imprint {padding-bottom: 2em;}
	
	.tinynav { display: block; width:30%; height: 1.5em; font-size: 0.9em;}
    #nav { display: none }
    
    .video {width: 100%; margin-top: 0; margin-bottom: 0;}
	
}

/* iPad [portrait + landscape] */

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

	body {
	font-size: 2em;
	background: #000;
	}

	
	#poster {height: 23em;}
	
	#mask {height: 25em;}
	
	.first {margin-top: 15em;}
	
	.wrapper {width: 95%;}
	
	#logo {left:5%;}
	
	#social {right:5%;}
	
	#social img {display: none;}
	
	#socialmobile {display: inline; font-size: 0.7em; font-family:Helvetica, Arial, sans-serif; font-weight: 600; color: #000000; font-size-adjust:0.508;}
	
	#socialmobile a {display: inline; font-family:Helvetica, Arial, sans-serif; font-weight: 600; color: #000000; text-decoration: none;}
	
	#navigation {padding-top: 2.2em;}
	
	#navigation li {line-height: 150%;}
	
	#mask h1 {font-size: 2em; margin-top: 0.5em;}
	
	#mask h2 {font-size: 1em; margin-top: 0.3em;}
	
	#imprint {padding-bottom: 1em;}
	
	.tinynav { display: block; height: 1.5em; font-size: 1em; }
    #nav { display: none }
	
}

/* iPhone [portrait + landscape] */

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

	body {
	font-size: 3em;
	background: #000;
	}

	#poster {height: 23em;}
	
	#mask {height: 25em;}
	
	.first {margin-top: 10em;}
	
	.wrapper {width: 95%;}
	
	#logo {left:5%;}
	
	#social {right:5%;}
	
	#social img {display: none;}
	
	#socialmobile {display: inline; font-size: 0.7em; font-family:Helvetica, Arial, sans-serif; font-weight: 600; color: #000000; font-size-adjust:0.508;}
	
	#socialmobile a {display: inline; font-family:Helvetica, Arial, sans-serif; font-weight: 600; color: #000000; text-decoration: none;}
	
	#navigation {padding-top: 2.2em;}
	
	#navigation li {line-height: 150%;}
	
	#mask h1 {font-size: 2em; margin-top: 0.3em;}
	
	#mask h2 {font-size: 1em; line-height: 1em; margin-top: 0.3em;}
	
	#imprint {padding-bottom: 1em;}
	
	.tinynav { display: block; height: 1.5em; font-size: 1em; }
    #nav { display: none }
	
}

/* iPhone 5 only */

@media only screen and (min-device-width: 560px) and (max-device-width: 1136px) and (-webkit-min-device-pixel-ratio: 2) {
   
   body {
	font-size: 3em;
	background: #000;
	}

	#poster {height: 23em;}
	
	#mask {height: 25em;}
	
	.first {margin-top: 12em;}
	
	.wrapper {width: 95%;}
	
	#logo {left:5%;}
	
	#social {right:5%;}
	
	#social img {display: none;}
	
	#socialmobile {display: inline; font-size: 0.7em; font-family:Helvetica, Arial, sans-serif; font-weight: 600; color: #000000; font-size-adjust:0.508;}
	
	#socialmobile a {display: inline; font-family:Helvetica, Arial, sans-serif; font-weight: 600; color: #000000; text-decoration: none;}
	
	#navigation {padding-top: 2.2em;}
	
	#navigation li {line-height: 150%;}
	
	#mask h1 {font-size: 2em; margin-top: 0.3em;}
	
	#mask h2 {font-size: 1em; line-height: 1em; margin-top: 0.3em;}
	
	#imprint {padding-bottom: 1em;}
	
	.tinynav { display: block; height: 1.5em; font-size: 1em; }
    #nav { display: none }
    
}