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

@keyframes viaggio {
 from, to  {
    left: 260px;
    animation-timing-function: linear;
  }
  30% {
    left: 150px;
    animation-timing-function: ease-out;
  }
  60% {
    left: 90px;
    animation-timing-function:ease-in;
  }
  100% {
    left: 90px;
   animation-timing-function: ease-in;
  }
}

@-webkit-keyframes viaggio {
 from, to  {
    left: 260px;
    -webkit-animation-timing-function: linear;
  }
  30% {
    left: 150px;
    -webkit-animation-timing-function: ease-out;
  }
  60% {
    left: 90px;
    -webkit-animation-timing-function:ease-in;
  }
  100% {
    left: 90px;
    -webkit-animation-timing-function: ease-in;
  }
}

@-o-keyframes viaggio {
 from, to  {
    left: 260px;
    -o-animation-timing-function: linear;
  }
  30% {
    left: 150px;
    -o-animation-timing-function: ease-out;
  }
  60% {
    left: 90px;
    -o-animation-timing-function:ease-in;
  }
  100% {
    left: 90px;
    -o-animation-timing-function: ease-in;
  }
}

@-moz-keyframes viaggio {
 from, to  {
    left: 260px;
    -moz-animation-timing-function: linear;
  }
  30% {
    left: 150px;
    -moz-animation-timing-function: ease-out;
  }
  60% {
    left: 90px;
    -moz-animation-timing-function:ease-in;
  }
  100% {
    left: 90px;
    -moz-animation-timing-function: ease-in;
  }
}

@-ms-keyframes viaggio {
 from, to  {
    left: 260px;
    -ms-animation-timing-function: linear;
  }
  30% {
    left: 150px;
    -ms-animation-timing-function: ease-out;
  }
  60% {
    left: 90px;
    -ms-animation-timing-function:ease-in;
  }
  100% {
    left: 90px;
    -ms-animation-timing-function: ease-in;
  }
}



@keyframes boing {
  from, to  {
    top: 140px;
    animation-timing-function: ease-out;
  }
  30% {
    top: 70px;
    animation-timing-function: ease-in;
  }
   60% {
     top: 220px;
    animation-timing-function: ease-in;
  }
  100% {
    top: 220px;
    animation-timing-function: ease-in;
  }
}

@-webkit-keyframes boing {
  from, to  {
    top: 140px;
    -webkit-animation-timing-function: ease-out;
  }
  30% {
    top: 70px;
    -webkit-animation-timing-function: ease-in;
  }
   60% {
     top: 220px;
    -webkit-animation-timing-function: ease-in;
  }
  100% {
    top: 220px;
    -webkit-animation-timing-function: ease-in;
  }
}

@-o-keyframes boing {
  from, to  {
    top: 140px;
    -o-animation-timing-function: ease-out;
  }
  30% {
    top: 70px;
    -o-animation-timing-function: ease-in;
  }
   60% {
     top: 220px;
    -o-animation-timing-function: ease-in;
  }
  100% {
    top: 220px;
    -o-animation-timing-function: ease-in;
  }
}

@-moz-keyframes boing {
  from, to  {
    top: 140px;
    -moz-animation-timing-function: ease-out;
  }
  30% {
    top: 70px;
    -moz-animation-timing-function: ease-in;
  }
   60% {
     top: 220px;
    -moz-animation-timing-function: ease-in;
  }
  100% {
    top: 220px;
    -moz-animation-timing-function: ease-in;
  }
}

@-ms-keyframes boing {
  from, to  {
    top: 140px;
    -ms-animation-timing-function: ease-out;
  }
  30% {
    top: 70px;
    -ms-animation-timing-function: ease-in;
  }
   60% {
     top: 220px;
    -ms-animation-timing-function: ease-in;
  }
  100% {
    top: 220px;
    -ms-animation-timing-function: ease-in;
  }
}


@keyframes braccio {
  from, to {transform: rotate(45deg);}
	8% {transform: rotate(0deg);}
	50% {transform: rotate(45deg);}
	
}

@-webkit-keyframes braccio {
  from, to {-webkit-transform: rotate(45deg);}
8% {-webkit-transform: rotate(0deg);}
	50% {-webkit-transform: rotate(45deg);}
}

@-o-keyframes braccio {
  from, to {-o-transform: rotate(45deg);}
8% {-o-transform: rotate(0deg);}
	50% {-o-transform: rotate(45deg);}
}

@-moz-keyframes braccio {
  from, to {-moz-transform: rotate(45deg);}
8% {-moz-transform: rotate(0deg);}
50% {-moz-transform: rotate(45deg);}
}

@-ms-keyframes braccio {
  from, to {-ms-transform: rotate(45deg);}
8% {-ms-transform: rotate(0deg);}
50% {-ms-transform: rotate(45deg);}
}



/* styles for the stage and animated elements */


#traveler {
  position: absolute;
  width: 20px;
  height: 240px;
  -webkit-animation-name: viaggio;
  -webkit-animation-timing-function: ease-in;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-duration: 2.8s;
  -ms-animation-name:viaggio;
  -ms-animation-timing-function:ease-in;
  -ms-animation-iteration-count:infinite;
  -ms-animation-duration:2.8s;
  -moz-animation-name: viaggio;
  -moz-animation-timing-function: ease-in;
  -moz-animation-iteration-count: infinite;
  -moz-animation-duration: 2.8s;
  -o-animation-name: viaggio;
  -o-animation-timing-function: ease-in;
  -o-animation-iteration-count: infinite;
  -o-animation-duration: 2.8s;
  animation-name: viaggio;
  animation-timing-function: ease-in;
  animation-iteration-count: infinite;
  
  animation-duration: 2.8s;
}

#bouncer {
  position: absolute;
  width: 53px;
  height: 47px;
  background-image:url(../img_animazioni/scoiattolo/noce.png);
  background-size:100%;
  -webkit-animation-name: boing;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-duration: 2.8s;
  -ms-animation-name: boing;
  -ms-animation-iteration-count: infinite;
  -ms-animation-duration: 2.8s;
  -moz-animation-name: boing;
  -moz-animation-iteration-count: infinite;
  -moz-animation-duration: 2.8s;
  -o-animation-name: boing;
  -o-animation-iteration-count: infinite;
  -o-animation-duration: 2.8s;
  animation-name: boing;
  animation-iteration-count: infinite;
  animation-duration: 2.8s;
}

.scoiattolo {
width:128px;
height:122px;
position:relative;
left:187px;
top:150px;
background-image:url(../img_animazioni/scoiattolo/scoiattolo.png);
background-size:100%;
z-index:10;
}

.braccio {
width: 19px;
    height: 36px;
    background-image:url(../img_animazioni/scoiattolo/braccio.png);
	background-size:100%;
    position: relative;
    left: 270px;
    top: 50px;
    z-index: 1;
 animation-name: braccio;
  animation-iteration-count: infinite;
  animation-duration: 2.8s;
   -webkit-animation-name: braccio;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-duration: 2.8s;
  -ms-animation-name: braccio;
  -ms-animation-iteration-count: infinite;
  -ms-animation-duration: 2.8s;
  -moz-animation-name: braccio;
  -moz-animation-iteration-count: infinite;
  -moz-animation-duration: 2.8s;
  -o-animation-name: braccio;
  -o-animation-iteration-count: infinite;
  -o-animation-duration: 2.8s;
}

.scoiattolo_container {
	width:484px;
	height:484px;
	background-color:#F7D160;
	overflow:hidden;
	border-radius:248px;
	position:absolute;
}