/*! CSS */
@font-face {
  font-family: fivo;
  src: url(FivoSansModern-Bold.otf) format("opentype");
}
@font-face {
  font-family: messapia;
  src: url(Messapia-Bold.woff) format("woff");
}
* {
	padding:0;
	margin:0;
	font-family:Arial, Helvetica, sans-serif;
	font-weight:400;
	font-style:normal;
	line-height:normal;
}
html {
    scrollbar-width: none;
    //-ms-overflow-style: none;
    overflow-x: hidden;
}

html::-webkit-scrollbar {
    width: 0px;
}
html, body
{
	background-color:#fff;
}

body
{
	position:relative;
	font-size:14px;
	color:#666;
}

a {text-decoration: none;}

.site
{
	position:relative;
	z-index:1;
}


/* SITE LAYER
----------------------------------------------------------------------*/
.site .layer
{
    -ms-transform-origin: 0% 0%;		/* IE 9 */
    -webkit-transform-origin: 0% 0%;	/* Chrome, Safari, Opera */
    transform-origin: 0% 0%;			/* GLI ALTRI */
}

.site .layer.img > a > img
{
	display:block;
	width:100%;

}

.site .layer a[event]
{
	position:absolute;
	width:100%;
	left:0;
	top:0;
	z-index:99;
}

.site .layer a[event],
.site .layer audio[event]
{
	display:none;
}

.site .layer:hover a[event="over"]
{
	display:block;
}

.site .layer.spt > iframe
{
	width:100%;
	height:100%;
}

.site .layer.my_hover
{
	cursor:pointer;
}


/* BACKGROUND LAYER
----------------------------------------------------------------------*/
.backgrounds
{
	width:1000px;
    -ms-transform-origin: 0% 0%;		/* IE 9 */
    -webkit-transform-origin: 0% 0%;	/* Chrome, Safari, Opera */
    transform-origin: 0% 0%;			/* GLI ALTRI */
}

.backgrounds .lay_bgr
{
	position:relative;
}

.backgrounds .lay_bgr img
{
	display:block;
	width:100%;
	z-index:1;
}

.backgrounds .lay_bgr a
{
	position:absolute;
	display:block;
	width:100%;
	height:100%;
	left:0;
	top:0;
	z-index:2;
}



.screensaver {
    opacity: 0;
	position: fixed;
    width: 100vw;
    height: 100vh;
    z-index: 1000000;
    background: #000;
    color: #fff;
    top: 0;
    padding-top: 0vh;
    pointer-events: none;
}
.screensaver .screen {
	padding: 0vh 10vw 0 10vw;
	animation: about 120s linear infinite;
	font-size: 90px;
}
.screensaver .screen span{
	font-family: fivo;
}
.screensaver .screen span div{
	display: inline-block;
	font-family: messapia;
	color: #EEE541;
}
@keyframes about {
  0%    { transform: translateY( 0%); }
  100%  { transform: translateY( -100%); }
}

.screensaver .mano {
  position: absolute;
    right: 50px;
    top: 70%;
    z-index: 10;
    transform: translateY(-50%);
}
.screensaver .mano img{
  width: 300px;
}



/*rotate*/
@-webkit-keyframes rotating {
  from {
    -webkit-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes rotating {
  from {
    -ms-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  to {
    -ms-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

@keyframes rotating-sx {
  from {
    -ms-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
  to {
    -ms-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
}

@keyframes dance {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(300px); }
}

  @-webkit-keyframes spinner {
    from,15% { -webkit-transform: rotateY(0deg);    }
    20%,35%  { -webkit-transform: rotateY(-72deg);  }
    40%,55%  { -webkit-transform: rotateY(-144deg); }
    60%,75%  { -webkit-transform: rotateY(-216deg); }
    80%,95%  { -webkit-transform: rotateY(-288deg); }
    to       { -webkit-transform: rotateY(-360deg); }
  }

.layer[id_layer="141"] img{
	   -webkit-animation: rotating-sx 5s linear infinite;
  -moz-animation: rotating-sx 5s linear infinite;
  -ms-animation: rotating-sx 5s linear infinite;
  -o-animation: rotating-sx 5s linear infinite;
  animation: rotating-sx 5s linear infinite;
}



/*
.layer[id_layer="16"] img{
	 animation: dance 5s linear infinite;
}

.layer[id_layer="136"] img,
.layer[id_layer="152"] img,
.layer[id_layer="153"] img,
.layer[id_layer="44"] img,
.layer[id_layer="66"] img,
.layer[id_layer="70"] img,
.layer[id_layer="76"] img,
.layer[id_layer="84"] img
{
  -webkit-animation: rotating 5s linear infinite;
  -moz-animation: rotating 5s linear infinite;
  -ms-animation: rotating 5s linear infinite;
  -o-animation: rotating 5s linear infinite;
  animation: rotating 5s linear infinite;
}

.layer[id_layer="21"] img,
.layer[id_layer="22"] img,
.layer[id_layer="159"] img,
.layer[id_layer="150"] img,
.layer[id_layer="99"] img,
.layer[id_layer="105"] img
{
  -webkit-animation: rotating-sx 5s linear infinite;
  -moz-animation: rotating-sx 5s linear infinite;
  -ms-animation: rotating-sx 5s linear infinite;
  -o-animation: rotating-sx 5s linear infinite;
  animation: rotating-sx 5s linear infinite;
}*/