@-webkit-keyframes 'a_comparsa' {

from {
  opacity: 0.35;
}
 
33% {
  opacity: 0.50;
}
 
67% {
  opacity: 0.85;
}
 
to {
  opacity: 1.0;
}

}

@-moz-keyframes 'a_comparsa' {

from {
  opacity: 0.35;
}
 
33% {
  opacity: 0.50;
}
 
67% {
  opacity: 0.85;
}
 
to {
  opacity: 1.0;
}

}

     @keyframes bounceDimension
    {
      5%   {height:16px;width: 16px;}
      10%  {height:24px;width: 24px;}
      15%  {height:16px;width: 16px;}
      20%  {height:24px;width: 24px;}
      25%  {height:16px;width: 16px;}
      30%  {height:24px;width: 24px;}
      35%  {height:16px;width: 16px;}
      40%  {height:24px;width: 24px;}
      45%  {height:16px;width: 16px;}
      50%  {height:24px;width: 24px;}
      55%  {height:16px;width: 16px;}
      60%  {height:24px;width: 24px;}
      65%  {height:16px;width: 16px;}
      70%  {height:24px;width: 24px;}
      75%  {height:16px;width: 16px;}
      80%  {height:24px;width: 24px;}
      85%  {height:16px;width: 16px;}
      90%  {height:24px;width: 24px;}
      95%  {height:16px;width: 16px;}
      100% {height:24px;width: 24px;}
    }

    @-moz-keyframes bounceDimension /* Firefox */
    {
      5%   {height:16px;width: 16px;}
      10%  {height:24px;width: 24px;}
      15%  {height:16px;width: 16px;}
      20%  {height:24px;width: 24px;}
      25%  {height:16px;width: 16px;}
      30%  {height:24px;width: 24px;}
      35%  {height:16px;width: 16px;}
      40%  {height:24px;width: 24px;}
      45%  {height:16px;width: 16px;}
      50%  {height:24px;width: 24px;}
      55%  {height:16px;width: 16px;}
      60%  {height:24px;width: 24px;}
      65%  {height:16px;width: 16px;}
      70%  {height:24px;width: 24px;}
      75%  {height:16px;width: 16px;}
      80%  {height:24px;width: 24px;}
      85%  {height:16px;width: 16px;}
      90%  {height:24px;width: 24px;}
      95%  {height:16px;width: 16px;}
      100% {height:24px;width: 24px;}
    }

    @-webkit-keyframes bounceDimension /* Safari and Chrome */
    {
      5%   {height:16px;width: 16px;}
      10%  {height:24px;width: 24px;}
      15%  {height:16px;width: 16px;}
      20%  {height:24px;width: 24px;}
      25%  {height:16px;width: 16px;}
      30%  {height:24px;width: 24px;}
      35%  {height:16px;width: 16px;}
      40%  {height:24px;width: 24px;}
      45%  {height:16px;width: 16px;}
      50%  {height:24px;width: 24px;}
      55%  {height:16px;width: 16px;}
      60%  {height:24px;width: 24px;}
      65%  {height:16px;width: 16px;}
      70%  {height:24px;width: 24px;}
      75%  {height:16px;width: 16px;}
      80%  {height:24px;width: 24px;}
      85%  {height:16px;width: 16px;}
      90%  {height:24px;width: 24px;}
      95%  {height:16px;width: 16px;}
      100% {height:24px;width: 24px;}
    }

    @-o-keyframes bounceDimension /* Opera */
    {
      5%   {height:16px;width: 16px;}
      10%  {height:24px;width: 24px;}
      15%  {height:16px;width: 16px;}
      20%  {height:24px;width: 24px;}
      25%  {height:16px;width: 16px;}
      30%  {height:24px;width: 24px;}
      35%  {height:16px;width: 16px;}
      40%  {height:24px;width: 24px;}
      45%  {height:16px;width: 16px;}
      50%  {height:24px;width: 24px;}
      55%  {height:16px;width: 16px;}
      60%  {height:24px;width: 24px;}
      65%  {height:16px;width: 16px;}
      70%  {height:24px;width: 24px;}
      75%  {height:16px;width: 16px;}
      80%  {height:24px;width: 24px;}
      85%  {height:16px;width: 16px;}
      90%  {height:24px;width: 24px;}
      95%  {height:16px;width: 16px;}
      100% {height:24px;width: 24px;}
    }


    @keyframes bounceRedWhite
    {
      5% {background-color: red;color:white;}
      25% {background-color: white;color:black;}
      50% {background-color: red;color:white;}
      75% {background-color: white;color:black;}
      100% {background-color: red;color:white;}
    }

    @-moz-keyframes bounceRedWhite /* Firefox */
    {
     5% {background-color: red;color:white;}
      25% {background-color: white;color:black;}
      50% {background-color: red;color:white;}
      75% {background-color: white;color:black;}
      100% {background-color: red;color:white;}
    }

    @-webkit-keyframes bounceRedWhite /* Safari and Chrome */
    {
     5% {background-color: red;color:white;}
      25% {background-color: white;color:black;}
      50% {background-color: red;color:white;}
      75% {background-color: white;color:black;}
      100% {background-color: red;color:white;}
    }

    @-o-keyframes bounceRedWhite /* Opera */
    {
    5% {background-color: red;color:white;}
      25% {background-color: white;color:black;}
      50% {background-color: red;color:white;}
      75% {background-color: white;color:black;}
      100% {background-color: red;color:white;}
    }
    
    
    
    @keyframes bounceScritta
    {
      5%   {color: red;color:black;font-size: 24px;opacity: 0.5;}
      25%  {color: black;color:red;font-size: 16px;opacity: 1;}
      50%  {color: red;color:black;font-size: 24px;opacity: 0.5;}
      75%  {color: black;color:red;font-size: 16px;opacity: 1;}
      90%  {color: red;color:black;font-size: 24px;opacity: 0.5;}
      100% {color: black;color:black;font-size: 128px;opacity: 0.01;}
    }

    @-moz-keyframes bounceScritta /* Firefox */
    {
    5%   {color: red;color:black;font-size: 24px;opacity: 0.5;}
      25%  {color: black;color:red;font-size: 16px;opacity: 1;}
      50%  {color: red;color:black;font-size: 24px;opacity: 0.5;}
      75%  {color: black;color:red;font-size: 16px;opacity: 1;}
      90%  {color: red;color:black;font-size: 24px;opacity: 0.5;}
      100% {color: black;color:black;font-size: 128px;opacity: 0.01;}
    }

    @-webkit-keyframes bounceScritta /* Safari and Chrome */
    {
     5%   {color: red;color:black;font-size: 24px;opacity: 0.5;}
      25%  {color: black;color:red;font-size: 16px;opacity: 1;}
      50%  {color: red;color:black;font-size: 24px;opacity: 0.5;}
      75%  {color: black;color:red;font-size: 16px;opacity: 1;}
      90%  {color: red;color:black;font-size: 24px;opacity: 0.5;}
      100% {color: black;color:black;font-size: 128px;opacity: 0.01;}
    }

    @-o-keyframes bounceScritta /* Opera */
    {
     5%   {color: red;color:black;font-size: 24px;opacity: 0.5;}
      25%  {color: black;color:red;font-size: 16px;opacity: 1;}
      50%  {color: red;color:black;font-size: 24px;opacity: 0.5;}
      75%  {color: black;color:red;font-size: 16px;opacity: 1;}
      90%  {color: red;color:black;font-size: 24px;opacity: 0.5;}
      100% {color: black;color:black;font-size: 128px;opacity: 0.01;}
    }
    
    @keyframes ritardo
    {
      50% {opacity: 0.01;cursor:progress;}
      75% {opacity: 0.30;cursor:progress;}
      100% {opacity: 1;cursor: auto;}
    }

    @-moz-keyframes ritardo /* Firefox */
    {
      50% {opacity: 0.01;cursor:progress;}
      75% {opacity: 0.30;cursor:progress;}
      100% {opacity: 1;cursor: auto;}
    }

    @-webkit-keyframes ritardo /* Safari and Chrome */
    {
      50% {opacity: 0.01;cursor:progress;}
      75% {opacity: 0.30;cursor:progress;}
      100% {opacity: 1;cursor: auto;}
    }

    @-o-keyframes ritardo /* Opera */
    {
      50% {opacity: 0.01;cursor:progress;}
      75% {opacity: 0.30;cursor:progress;}
      100% {opacity: 1;cursor: auto;}
    }    


.compariInRitardo{
	     -webkit-animation-name: a_comparsa;
       -webkit-animation-duration: 0.5s;
       -webkit-animation-iteration-count: 1;
       -webkit-animation-timing-function: ease-in-out;
       
       -moz-animation-name: a_comparsa;
       -moz-animation-duration: 0.5s;
       -moz-animation-iteration-count: 1;
       -moz-animation-timing-function: ease-in-out;
       
       -o-animation-name: a_comparsa;
       -o-animation-duration: 0.5s;
       -o-animation-iteration-count: 1;
       -o-animation-timing-function: ease-in-out;
}

.compariInRitardo2{
      -webkit-animation-name: a_comparsa;
       -webkit-animation-duration: 2s;
       -webkit-animation-iteration-count: 1;
       -webkit-animation-timing-function: ease-in-out;
       
       -moz-animation-name: a_comparsa;
       -moz-animation-duration: 2s;
       -moz-animation-iteration-count: 1;
       -moz-animation-timing-function: ease-in-out;
       
       -o-animation-name: a_comparsa;
       -o-animation-duration: 2s;
       -o-animation-iteration-count: 1;
       -o-animation-timing-function: ease-in-out;
}        






   @keyframes carrellata
    {
      0%   {right:900px; bottom:0px;}
      90% {right:-10px; bottom:0px;}
      95% {right:-5px; bottom:0px;}
      100% {right:0px; bottom:0px;}
    }

    @-moz-keyframes carrellata /* Firefox */
    {
      0%   {right:900px; bottom:0px;}
      90% {right:-10px; bottom:0px;}
      95% {right:-5px; bottom:0px;}
      100% {right:0px; bottom:0px;}
    }

    @-webkit-keyframes carrellata /* Safari and Chrome */
    {
      0%   {right:900px; bottom:0px;}
      90% {right:-10px; bottom:0px;}
      95% {right:-5px; bottom:0px;}
      100% {right:0px; bottom:0px;}
    }

    @-o-keyframes carrellata /* Opera */
    {
      0%   {right:900px; bottom:0px;}
      90% {right:-10px; bottom:0px;}
      95% {right:-5px; bottom:0px;}
      100% {right:0px; bottom:0px;}
    }


  @keyframes trema
    {
      0%   {margin:0px;}
      10% {margin:1px;}
      20% {margin:0px;}
      30% {margin:1px;}
      40% {margin:0px;}
      50% {margin:1px;}
      60% {margin:0px;}
      70% {margin:1px;}
      80% {margin:0px;}
      90% {margin:1px;}
      100% {margin:1px;}
    }

    @-moz-keyframes trema /* Firefox */
    {
      0%   {margin:0px;}
      10% {margin:1px;}
      20% {margin:0px;}
      30% {margin:1px;}
      40% {margin:0px;}
      50% {margin:1px;}
      60% {margin:0px;}
      70% {margin:1px;}
      80% {margin:0px;}
      90% {margin:1px;}
      100% {margin:1px;}
    }

    @-webkit-keyframes trema /* Safari and Chrome */
    {
     0%   {margin:0px;}
      10% {margin:1px;}
      20% {margin:0px;}
      30% {margin:1px;}
      40% {margin:0px;}
      50% {margin:1px;}
      60% {margin:0px;}
      70% {margin:1px;}
      80% {margin:0px;}
      90% {margin:1px;}
      100% {margin:1px;}
    }

    @-o-keyframes trema /* Opera */
    {
      0%   {margin:0px;}
      10% {margin:1px;}
      20% {margin:0px;}
      30% {margin:1px;}
      40% {margin:0px;}
      50% {margin:1px;}
      60% {margin:0px;}
      70% {margin:1px;}
      80% {margin:0px;}
      90% {margin:1px;}
      100% {margin:1px;}
    }


.evidenzia{
	 animation: trema 3s;
  -moz-animation: trema 3s; /* Firefox */
  -webkit-animation: trema 3s; /* Safari and Chrome */
  -o-animation: trema 3s; /* Opera */
}

.carrello{
	animation: carrellata 1s;
  -moz-animation: carrellata 1s; /* Firefox */
  -webkit-animation: carrellata 1s; /* Safari and Chrome */
  -o-animation: carrellata 1s; /* Opera */
}

.allarmaaa{
   animation: bounceScritta 5s 3;
  -moz-animation: bounceScritta 5s 3; /* Firefox */
  -webkit-animation: bounceScritta 5s 3; /* Safari and Chrome */
  -o-animation: bounceScritta 5s 3; /* Opera */
  
}
.spostaFluottante{
  -webkit-animation: apriAnimation 0.3s forwards;
  animation: apriAnimation 0.3s forwards;
}

@-webkit-keyframes apriAnimation {
    0% { opacity: 0;-moz-opacity:0;margin-left: 600px; }
    100% {opacity: 1;-moz-opacity:1;margin-left:0px; }
}
      
@keyframes apriAnimation {
      0% { opacity: 0;-moz-opacity:0;margin-left: 600px; }
    100% {opacity: 1;-moz-opacity:1;margin-left:0px; }
}