@charset "UTF-8";
/* CSS Document */

@import url('../font/stylesheet.css');

body {font-family: 'MisoLight', Helvetica, Arial, sans-serif; width:100%; margin:0 auto; padding:0; position:relative; display:block; color:#fff; background:#000;}

ul, li {width:100%; height:100%;}

a {text-decoration: none;}

.height100 {height:100%;}
.height50 {height:50%;}

.width100 {width:100%;}
.width50 {width:50%;}

.width33 {width:33%;}
.width34 {width:34%;}


.blocco {position:relative; overflow:hidden; display:block; float:left; overflow:hidden;}
.blocco.fright {float:right;}


img.cover {position:absolute; top:50%; left:50%; z-index:0; opacity:0;}

.blocco .grid {position:absolute; z-index:5; width:100%; height:100%; background:url(../images/grid.png); top:0; left:0;}

.blocco .overlay, .blocco .overlayvisibile, .scheda {
	position:absolute;
	z-index:10;
	width:100%;
	top:40%;
	left:0;
	display:none;
	color:#fff;
	text-align:center;
	text-decoration:none;
	text-transform:uppercase;
	text-shadow: 0px 0px 10px rgba(0, 0, 0, 1);
	}

.blocco .overlayvisibile {display:block; height:540px; top:50%; margin-top:-190px;}

	.scheda {background:url(../images/black50.png); width:399px; padding:20px; display:block; left:2em; top:20%; z-index:20;}
	.scheda.circanoi {text-align:left;  background:url(../images/black50.png); color:#fff; text-shadow: none;
	position:relative; left:0; float:left; width:20%}

	.scheda.circanoi.vuoto {background:none;}
	.scheda.circanoi.pieno {background:url(../images/black50.png);}

	.scheda .txt {text-transform:none; font-size:18px; line-height:22px;}
	.scheda.circanoi .txt {margin:0;}


	#circanoi {width:90%; display:block; left:2em; top:20%; z-index:20; position:absolute; }

	#about {
		box-sizing: border-box;
    display: block;
    letter-spacing: -0.01em;
    padding-left: 2em;
    padding-right: 2em;
    position: absolute;
    top: 20%;
    width: 100%;
    z-index: 20;
	}

	#about h2 {
    box-sizing: border-box;
    font-size: 48px;
    padding: 30px 0 70px 146px;
    width: 1000px;
	}
	#about h1 {
		font-size:36px;
		font-weight:normal;
		padding:60px 0;
		margin:0 auto 330px;
		width:1000px;
		border-top:2px solid #fff;
		border-bottom:2px solid #fff;
	}
	#about p {
		font-size:24px;
		line-height:30px;
		box-sizing: border-box;
		width: 900px;
		padding: 0 0 0 292px;
		z-index:2;
	}
	#about p strong {
		font-size:36px;
		font-weight:normal;
	}
	#about p a {
		color:#fff;
		text-decoration:underline;
	}
	.schema {
		position:relative;
		width:1000px;
		height:1000px;
		margin:-100px auto;
		z-index:1;
	}
	.outer {
	  width: 70%;
	  height: 70%;
	  position: absolute;
	  top:0; bottom:0; left:0; right:0;
	  margin: auto;

	  -webkit-animation: ROTATE 60s linear infinite;
		-moz-animation: ROTATE 60s linear infinite;
		animation: ROTATE 60s linear infinite;
	}
	.cerchio {
	  width: 70%;
	  height: 70%;
	  position: absolute;
	  top:0; bottom:0; left:0; right:0;
	  margin: auto;
		border:2px solid #000;
		border-radius:500px;
	}
	.parola {
	  width: 150px;
	  height: 150px;
		padding:62px 0;
		box-sizing:border-box;
	  position: absolute;
	  top:0; bottom:0; left:0; right:0;
	  margin: auto;
		background:#000;
		border-radius:500px;
		color:#fff;
		z-index:30;
		text-align:center;
		font-size:36px;
		line-height:36px;
		text-transform: uppercase;
		-webkit-transition: all 3000ms linear;
		-moz-transition: all 3000ms linear;
		transition: all 3000ms linear;
	}
	.parola.parola2 {
		background:rgba(0,0,0,0.5);
		z-index:2;
		transform: scale(1.08);
		-webkit-transition: all 2200ms ease;
		-moz-transition: all 2200ms ease;
		transition: all 2200ms ease;
	}

	/*
	.inner {
	  color: #fff;
	  text-align:center;
		font-size:36px;
		text-transform: uppercase;
		margin-left: -46px;
		left:50%;
		bottom:0;
		position:absolute;
		-webkit-transition: opacity 3000ms ease-in-out, padding 2500ms ease-in-out;
		-moz-transition: opacity 3000ms ease-in-out, padding 2500ms ease-in-out;
		transition: opacity 3000ms ease-in-out, padding 2500ms ease-in-out;

		-webkit-animation: COUNTER1 60s linear infinite;
		-moz-animation: COUNTER1 60s linear infinite;
		animation: COUNTER1 60s linear infinite;
	}
	.inner.inner2 {
		left: 11%;
    top: 26%;
		bottom: auto;
		margin-left:-78px;

		-webkit-animation: COUNTER2 60s linear infinite;
		-moz-animation: COUNTER2 60s linear infinite;
		animation: COUNTER2 60s linear infinite;
	}
	.inner.inner3 {
		right: 1%;
    top: 26%;
		bottom: auto;
		left:auto;
		margin-left:-23px;

		-webkit-animation: COUNTER3 60s linear infinite;
		-moz-animation: COUNTER3 60s linear infinite;
		animation: COUNTER3 60s linear infinite;
	}*/
	.inner {
	  color: #fff;
	  text-align:center;
		font-size:36px;
		text-transform: uppercase;
		margin-left: -60px;
		width:120px;
		height:36px;
		left:50%;
		bottom:0;
		position:absolute;
		-webkit-transition: opacity 3000ms ease-in-out, padding 2500ms ease-in-out;
		-moz-transition: opacity 3000ms ease-in-out, padding 2500ms ease-in-out;
		transition: opacity 3000ms ease-in-out, padding 2500ms ease-in-out;

		-webkit-animation: INNER 60s linear infinite;
		-moz-animation: INNER 60s linear infinite;
		animation: INNER 60s linear infinite;
	}
	.inner.inner2 {
		-webkit-animation: INNER2 60s linear infinite;
		-moz-animation: INNER2 60s linear infinite;
		animation: INNER2 60s linear infinite;
	}
	.inner.inner3 {
		-webkit-animation: INNER3 60s linear infinite;
		-moz-animation: INNER3 60s linear infinite;
		animation: INNER3 60s linear infinite;
	}
	@keyframes INNER {
	  0% {transform: rotate(0deg);}
		25% {transform: rotate(-90deg);}
		50% {transform: rotate(-180deg);}
		75% {transform: rotate(-270deg);}
		100% {transform: rotate(-360deg);}
	}
	@keyframes INNER2 {
	  0% {transform: rotate(-120deg);}
	  33.33% {transform: rotate(-240deg);}
	  66.66% {transform: rotate(-360deg);}
	  100% {transform: rotate(-480deg);}
	}
	@keyframes INNER3 {
	  0% {transform: rotate(120deg);}
	  33.33% {transform: rotate(0deg);}
	  66.66% {transform: rotate(-120deg);}
	  100% {transform: rotate(-240deg);}
	}
	.outer2 {
	  -webkit-animation: ROTATE2 60s linear infinite;
		-moz-animation: ROTATE2 60s linear infinite;
		animation: ROTATE2 60s linear infinite;
	}
	.outer3 {
	  -webkit-animation: ROTATE3 60s linear infinite;
		-moz-animation: ROTATE3 60s linear infinite;
		animation: ROTATE3 60s linear infinite;
	}
	.asta {
		width:2px;
		height:35%;
		background:#000;
		left:50%;
		margin-left:-1px;
		position:absolute;
		top:50%;
		z-index:3;
	}
	.asta.asta2 {
		left: 65.2%;
    top: 23.5%;
    transform: rotate(60deg);
		-moz-transform: rotate(60deg);
		-webkit-transform: rotate(60deg);
	}
	.asta.asta3 {
		left:auto;
		right: 65.2%;
    top: 23.5%;
    transform: rotate(-60deg);
		-moz-transform: rotate(-60deg);
		-webkit-transform: rotate(-60deg);
	}

	@keyframes ROTATE {
	  0% {transform: rotate(0deg);}
		100% {transform: rotate(360deg);}
	}
	@keyframes ROTATE2 {
	  0% {transform: rotate(120deg);}
	  66.6% {transform: rotate(360deg);}
	  100% {transform: rotate(480deg);}
	}
	@keyframes ROTATE3 {
	  0% {transform: rotate(240deg);}
	  33.33% {transform: rotate(360deg);}
	  100% {transform: rotate(600deg);}
	}
	@keyframes COUNTER1 {
	  0% {transform: rotate(0deg); margin-left:-46px;}
		25% {transform: rotate(-90deg); margin-left:-90px;}
		50% {transform: rotate(-180deg); margin-left:-46px;}
		75% {transform: rotate(-270deg); margin-left:0px;}
		100% {transform: rotate(-360deg); margin-left:-46px;}
	}
	@keyframes COUNTER2 {
	  0% {transform: rotate(0deg); margin-left:-78px;}
		42% {transform: rotate(-151deg); margin-left:0px;}
		92% {transform: rotate(-331deg); margin-left:-90px;}
		100% {transform: rotate(-360deg); margin-left:-78px;}
	}
	@keyframes COUNTER3 {
	  0% {transform: rotate(0deg); margin-left:-23px;}
		8,3% {transform: rotate(-30deg); margin-left:0px;}
		58,3% {transform: rotate(-210deg); margin-left:-90px;}
		100% {transform: rotate(-360deg); margin-left:-23px;}
	}
	@-moz-keyframes ROTATE {
	  0% {-moz-transform: rotate(0deg);}
		100% {-moz-transform: rotate(360deg);}
	}
	@-moz-keyframes COUNTER {
	  0% {-moz-transform: rotate(0deg);}
		100% {-moz-transform: rotate(-360deg);}
	}
	@-webkit-keyframes ROTATE {
		0% {-webkit-transform: rotate(0deg);}
		/*50% {-webkit-transform: rotate(270deg);}
		70% {-webkit-transform: rotate(100deg);}*/
		100% {-webkit-transform: rotate(360deg);}
	}
	@-webkit-keyframes COUNTER {
		0% {-webkit-transform: rotate(0deg);}
		/*50% {-webkit-transform: rotate(-270deg);}
		70% {-webkit-transform: rotate(-100deg);}*/
		100% {-webkit-transform: rotate(-360deg);}
	}



	.whiterow {width:100%; height:1px; background:#fff; margin:20px 0;}


	.title {font-size:36px; letter-spacing:-1px; }
	.scheda.circanoi .title {font-size:24px; margin-top:0;}
	.scheda .title {margin-top:20px; display:inline-block;}

	.scheda .images, .scheda .videos {display: inline; margin: 0 auto; width: 49%; }

	.scheda .images a, .scheda .videos a {display:inline-block; background:url(../images/square.png) no-repeat left top; width:28px; height:18px; padding:5px 0; margin:0 2px; color:#000; line-height: 20px;}
	.scheda .images a.lens {background:url(../images/lens.png) no-repeat left top;}
	.scheda .videos a.video {background:url(../images/video.png) no-repeat left top; }

	.scheda .images img, .scheda .videos img {margin-top:2px;}




	#divcontatti {width:1030px; display:block; left:2em; top:20%; z-index:20; position:absolute;}
	#divcontatti div {float:left;}
	.bloccocontatti {background:#000; color:#fff; padding:10px;}

	#divcontatti {margin-bottom:100px;}
	#divcontatti div {position:relative;}
	#divcontatti div a {color:#fff;}
	.eti {display:inline-block; background:#000; padding:10px 12px; width:122px; position:absolute; top:0; left:0;}



	.category {margin:2px auto; text-shadow: 0px 0px 3px rgba(0, 0, 0, 1);}

	.tleft {background:url(../images/tleft-white.png) no-repeat right top;}
	.tright {background:url(../images/tright-white.png) no-repeat left top;}
	.tcenter {background:url(../images/tcenter-white.png) repeat-x left top; padding:4px 0 2px; white-space: nowrap; line-height: 14px;}


	.zoom {background:url(../images/black50.png); height:80%; padding:10px; display:block; left:50%; top:10%; z-index:30; position:absolute; overflow:hidden; }
		.zoom img {height:100%;}



#menusito {position:fixed; top:0; left:0; /*overflow:hidden;*/ z-index:2000; padding: 0 2em; vertical-align: baseline;}

.menu-categorie-voci {
	background:#000;
	padding:4px 0;
	position:absolute;
	display:none;
	z-index:100;
}
.menu-categorie-attiva {
	z-index:99;
	display:none;
	background:#000;
	padding:4px 0;
	position:absolute;
}
.mainmenu .menu-categorie-voci a, .mainmenu .menu-categorie-voci a:hover,
.mainmenu .menu-categorie-attiva a, .mainmenu .menu-categorie-attiva a:hover {
	display: block;
	width:100%;
	padding:4px 12px;
}

#menusito-bottom {position:absolute; bottom:0; left:0; overflow:hidden; z-index:1999; padding: 0 2em; vertical-align: baseline;}

	a.mainlogo, a.mainlogo:hover {display:block; background:#000; color:#fff; font-size:24px; height:24px; width:126px; padding:15px 0 10px 20px; float:left; vertical-align: baseline; line-height:1.625;}

	.mainmenu {float:left; background:url(../images/black50.png); height:24px; padding:25px 0 0 0; width:293px; line-height:1.4;}

		.mainmenu a, .mainmenu a:hover, .mainmenu span, .mainmenu span:hover {font-size:14px; color:#fff; text-transform:uppercase; padding:0 12px 10px; margin:0 3px;}
		.mainmenu a:hover, .mainmenu span:hover {text-decoration:underline;}

		.mainmenu a.attivo {text-decoration:underline; cursor:default;}

	a.backtorandom {display:block; background:url(../images/randompiccolo.jpg) no-repeat 10px 10px #fff; color:#000; font-size:16px; height:16px; width:96px; padding:15px 0 15px 40px; clear:left; float:left; vertical-align: baseline; font-family: 'MisoRegular';}
	.categorytitle {display:block; background:url(../images/white50.png); color:#000; font-size:16px; height:16px; width:278px; padding:15px 0 15px 25px; float:left; vertical-align: baseline;  font-family: 'MisoRegular'; text-transform:uppercase; cursor:pointer; position:relative;}
	.categorytitle img {position:absolute; top:13px; left:10px;}


.prevrandom, .nextrandom {width:118px; height:118px; background:url(../images/randombutton.png) no-repeat center center; z-index:1000; position:absolute; top:50%; margin-top:-55px; left:0; right:auto; opacity:0.7;}
.nextrandom {background:url(../images/randombutton.png) no-repeat right top; right:50%; left:auto; margin-right:-59px;}
.prevrandom:hover, .nextrandom:hover {opacity:1;}

h1 {font-weight:normal; font-size:140px; margin:0 auto;}
h2.claim {background:url(../images/lineahome.png) no-repeat center center; padding:5px 0 0; height:29px; font-size:28px; font-weight:normal; margin:0 auto;}

.randomtour {color:#8b8b8b; margin-top:20px; z-index:1002; position:absolute; top:185px; right:50%; left:auto; margin-right:-150px; width:300px; text-align:center; display:block;}
.randomtour span {display:block; margin:0 auto; position:relative; white-space:nowrap; text-align:center; font-size:16px; line-height:20px;}
.randomtour.go {top:290px; font-size:30px;}


*::selection
{
background-color:#b20015;
}
*::-moz-selection
{
background-color:#b20015;
}

html {width:100%;}

a.grid {display:block;}

footer {
	background: #000;
	padding: 30px 2em;
	font-size: 18px;
	color: #999;
	float: left;
	z-index: 1000;
	line-height: 22px;
	width:100%;
	box-sizing:border-box;
}