.aquarela
{
    display: block;
    animation: fadeInFromNone 1.5s ease-out;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
    -webkit-animation: fadeInFromNone 1.5s ease-out;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-fill-mode: forwards;
    -moz-animation: fadeInFromNone 1.5s ease-out;
    -moz-animation-iteration-count: 1;
    -moz-animation-fill-mode: forwards;
    -o-animation: fadeInFromNone 1.5s ease-out;
    -o-animation-iteration-count: 1;
    -o-animation-fill-mode: forwards;
    
}
.aquarela2
{
    display: block;
    animation: fadeInFromNone2 1.5s ease-out;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
    -webkit-animation: fadeInFromNone2 1.5s ease-out;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-fill-mode: forwards;
    -moz-animation: fadeInFromNone2 1.5s ease-out;
    -moz-animation-iteration-count: 1;
    -moz-animation-fill-mode: forwards;
    -o-animation: fadeInFromNone2 1.5s ease-out;
    -o-animation-iteration-count: 1;
    -o-animation-fill-mode: forwards;
    
}

.fadeout
{
    display: block;
    animation: fadeOut 0.5s ease-out;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
    -webkit-animation: fadeOut 0.5s ease-out;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-fill-mode: forwards;
    -moz-animation: fadeOut 0.5s ease-out;
    -moz-animation-iteration-count: 1;
    -moz-animation-fill-mode: forwards;
    -o-animation: fadeOut 0.5s ease-out;
    -o-animation-iteration-count: 1;
    -o-animation-fill-mode: forwards;
    
}
.highlight
{
    display: block;
    animation: darHighlight 1s ease-out;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
    -webkit-animation: darHighlight 1s ease-out;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-fill-mode: forwards;
    -moz-animation: darHighlight 1s ease-out;
    -moz-animation-iteration-count: 1;
    -moz-animation-fill-mode: forwards;
    -o-animation: darHighlight 1s ease-out;
    -o-animation-iteration-count: 1;
    -o-animation-fill-mode: forwards;
    
}
.deshighlight
{
    display: block;
    animation: tirarHighlight 1s ease-out;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
    -webkit-animation: tirarHighlight 1s ease-out;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-fill-mode: forwards;
    -moz-animation: tirarHighlight 1s ease-out;
    -moz-animation-iteration-count: 1;
    -moz-animation-fill-mode: forwards;
    -o-animation: tirarHighlight 1s ease-out;
    -o-animation-iteration-count: 1;
    -o-animation-fill-mode: forwards;
    
}

@-webkit-keyframes fadeInFromNone {
    0% {
        display: none;
        opacity: 0;
    }

    1% {
        display: block;
        opacity: 0;
    }

    100% {
        display: block;
        opacity: 0.5;
    }
}

@-moz-keyframes fadeInFromNone {
    0% {
        display: none;
        opacity: 0;
    }

    1% {
        display: block;
        opacity: 0;
    }

    100% {
        display: block;
        opacity: 0.5;
    }
}

@-o-keyframes fadeInFromNone {
    0% {
        display: none;
        opacity: 0;
    }

    1% {
        display: block;
        opacity: 0;
    }

    100% {
        display: block;
        opacity: 0.5;
    }
}

@keyframes fadeInFromNone {
    0% {
        display: none;
        opacity: 0;
    }

    1% {
        display: block;
        opacity: 0;
    }

    100% {
        display: block;
        opacity: 0.5;
    }
}



@-webkit-keyframes fadeInFromNone2 {
    0% {
        display: none;
        opacity: 0;
    }

    10% {
        display: block;
        opacity: 0;
    }

    100% {
        display: block;
        opacity: 0.5;
    }
}

@-moz-keyframes fadeInFromNone2 {
    0% {
        display: none;
        opacity: 0;
    }

    10% {
        display: block;
        opacity: 0;
    }

    100% {
        display: block;
        opacity: 0.5;
    }
}

@-o-keyframes fadeInFromNone2 {
    0% {
        display: none;
        opacity: 0;
    }

    10% {
        display: block;
        opacity: 0;
    }

    100% {
        display: block;
        opacity: 0.5;
    }
}

@keyframes fadeInFromNone2 {
    0% {
        display: none;
        opacity: 0;
    }

    10% {
        display: block;
        opacity: 0;
    }

    100% {
        display: block;
        opacity: 0.5;
    }
}




@-webkit-keyframes fadeOut {
    0% {
        display: none;
        opacity: 0.5;
    }

    1% {
        display: block;
        opacity: 0.5;
    }

    100% {
        display: block;
        opacity: 0;
    }
}

@-moz-keyframes fadeOut {
    0% {
        display: none;
        opacity: 0.5;
    }

    1% {
        display: block;
        opacity: 0.5;
    }

    100% {
        display: block;
        opacity: 0;
    }
}

@-o-keyframes fadeOut {
    0% {
        display: none;
        opacity: 0.5;
    }

    1% {
        display: block;
        opacity: 0.5;
    }

    100% {
        display: block;
        opacity: 0;
    }
}

@keyframes fadeOut {
    0% {
        display: none;
        opacity: 0.5;
    }

    1% {
        display: block;
        opacity: 0.5;
    }

    100% {
        display: block;
        opacity: 0;
    }
}



@-webkit-keyframes darHighlight {
    0% {
        opacity: 0.3;
    }
    100% {
        opacity: 0.6;
    }
}

@-moz-keyframes darHighlight {
    0% {
        opacity: 0.3;
    }
    100% {
        opacity: 0.6;
    }
}

@-o-keyframes darHighlight {
    0% {
        opacity: 0.3;
    }
    100% {
        opacity: 0.6;
    }
}

@keyframes darHighlight {
    0% {
        opacity: 0.3;
    }
    100% {
        opacity: 0.6;
    }
}


@-webkit-keyframes tirarHighlight {
    0% {
        opacity: 0.6;
    }
    100% {
        opacity: 0.3;
    }
}

@-moz-keyframes tirarHighlight {
    0% {
        opacity: 0.6;
    }
    100% {
        opacity: 0.3;
    }
}

@-o-keyframes tirarHighlight {
    0% {
        opacity: 0.6;
    }
    100% {
        opacity: 0.3;
    }
}

@keyframes tirarHighlight {
    0% {
        opacity: 0.6;
    }
    100% {
        opacity: 0.3;
    }
}





.mudandodecor {

}









@keyframes girando-dir {
	0% {
		transform: rotate(0);
	}
	100% {
		transform: rotate(360deg);
	}
}

@keyframes girando-esq {
	0% {
		transform: rotate(0);
	}
	100% {
		transform: rotate(-360deg);
	}
}






.girandodirv1 {
	animation: girando-dir 100s linear infinite;
  -webkit-animation: girando-dir 100s linear infinite;
  -moz-animation: girando-dir 100s linear infinite;
  -o-animation: girando-dir 100s linear infinite;
  -ms-animation: girando-dir 100s linear infinite;
}


.girandoesqv1 {
	animation: girando-esq 100s linear infinite;
  -webkit-animation: girando-esq 100s linear infinite;
  -moz-animation: girando-esq 100s linear infinite;
  -o-animation: girando-esq 100s linear infinite;
  -ms-animation: girando-esq 100s linear infinite;
}

.girandodirv2 {
	animation: girando-dir 50s linear infinite;
  -webkit-animation: girando-dir 50s linear infinite;
  -moz-animation: girando-dir 50s linear infinite;
  -o-animation: girando-dir 50s linear infinite;
  -ms-animation: girando-dir 50s linear infinite;

}


.girandoesqv2 {
	animation: girando-esq 50s linear infinite;
  -webkit-animation: girando-esq 50s linear infinite;
  -moz-animation: girando-esq 50s linear infinite;
  -o-animation: girando-esq 50s linear infinite;
  -ms-animation: girando-esq 50s linear infinite;
}





.pontogirando1 {
  animation: girando-dir linear 3s;
  animation-iteration-count: infinite;
  transform-origin: 50% 600%;
  -webkit-animation: girando-dir linear 3s;
  -webkit-animation-iteration-count: infinite;
  -webkit-transform-origin: 50% 600%;
  -moz-animation: girando-dir linear 3s;
  -moz-animation-iteration-count: infinite;
  -moz-transform-origin: 50% 600%;
  -o-animation: girando-dir linear 3s;
  -o-animation-iteration-count: infinite;
  -o-transform-origin: 50% 600%;
  -ms-animation: girando-dir linear 3s;
  -ms-animation-iteration-count: infinite;
  -ms-transform-origin: 50% 600%;
}

.pontogirando2 {
  animation: girando-dir linear 3s;
  animation-iteration-count: infinite;
  transform-origin: 50% -380%;
  -webkit-animation: girando-dir linear 3s;
  -webkit-animation-iteration-count: infinite;
  -webkit-transform-origin: 50% -380%;
  -moz-animation: girando-dir linear 3s;
  -moz-animation-iteration-count: infinite;
  -moz-transform-origin: 50% -380%;
  -o-animation: girando-dir linear 3s;
  -o-animation-iteration-count: infinite;
  -o-transform-origin: 50% -380%;
  -ms-animation: girando-dir linear 3s;
  -ms-animation-iteration-count: infinite;
  -ms-transform-origin: 50% -380%;
}










.crescendototal1 {
  animation: crescendo-total ease 1.5s;
  animation-iteration-count: 1;
  transform-origin: 50% 50%;
  animation-fill-mode:forwards;
  -webkit-animation: crescendo-total ease 1.5s;
  -webkit-animation-iteration-count: 1;
  -webkit-transform-origin: 50% 50%;
  -webkit-animation-fill-mode:forwards;
  -moz-animation: crescendo-total ease 1.5s;
  -moz-animation-iteration-count: 1;
  -moz-transform-origin: 50% 50%;
  -moz-animation-fill-mode:forwards;
  -o-animation: crescendo-total ease 1.5s;
  -o-animation-iteration-count: 1;
  -o-transform-origin: 50% 50%;
  -o-animation-fill-mode:forwards;
  -ms-animation: crescendo-total ease 1.5s;
  -ms-animation-iteration-count: 1;
  -ms-transform-origin: 50% 50%;
  -ms-animation-fill-mode:forwards;
}
.crescendototal2 {
  animation: crescendo-total ease-in 1.6s;
  animation-iteration-count: 1;
  transform-origin: 50% 50%;
  animation-fill-mode:forwards;
  -webkit-animation: crescendo-total ease-in 1.6s;
  -webkit-animation-iteration-count: 1;
  -webkit-transform-origin: 50% 50%;
  -webkit-animation-fill-mode:forwards;
  -moz-animation: crescendo-total ease-in 1.6s;
  -moz-animation-iteration-count: 1;
  -moz-transform-origin: 50% 50%;
   -moz-animation-fill-mode:forwards;
  -o-animation: crescendo-total ease-in 1.6s;
  -o-animation-iteration-count: 1;
  -o-transform-origin: 50% 50%;
  -o-animation-fill-mode:forwards;
  -ms-animation: crescendo-total ease-in 1.6s;
  -ms-animation-iteration-count: 1;
  -ms-transform-origin: 50% 50%;
  -ms-animation-fill-mode:forwards;
}
.crescendototal3 {
  animation: crescendo-total ease-in 1.4s;
  animation-iteration-count: 1;
  transform-origin: 50% 50%;
  animation-fill-mode:forwards;
  -webkit-animation: crescendo-total ease-in 1.4s;
  -webkit-animation-iteration-count: 1;
  -webkit-transform-origin: 50% 50%;
  -webkit-animation-fill-mode:forwards;
  -moz-animation: crescendo-total ease-in 1.4s;
  -moz-animation-iteration-count: 1;
  -moz-transform-origin: 50% 50%;
   -moz-animation-fill-mode:forwards;
  -o-animation: crescendo-total ease-in 1.4s;
  -o-animation-iteration-count: 1;
  -o-transform-origin: 50% 50%;
  -o-animation-fill-mode:forwards;
  -ms-animation: crescendo-total ease-in 1.4s;
  -ms-animation-iteration-count: 1;
  -ms-transform-origin: 50% 50%;
  -ms-animation-fill-mode:forwards;
}

@keyframes crescendo-total{
  0% {
    transform:  scaleX(1.00) scaleY(1.00) ;
  }
  100% {
    transform:  scaleX(20.00) scaleY(20.00) ;
  }
}

@-moz-keyframes crescendo-total{
  0% {
    -moz-transform:  scaleX(1.00) scaleY(1.00) ;
  }
  100% {
    -moz-transform:  scaleX(20.00) scaleY(20.00) ;
  }
}

@-webkit-keyframes crescendo-total {
  0% {
    -webkit-transform:  scaleX(1.00) scaleY(1.00) ;
  }
  100% {
    -webkit-transform:  scaleX(20.00) scaleY(20.00) ;
  }
}

@-o-keyframes crescendo-total {
  0% {
    -o-transform:  scaleX(1.00) scaleY(1.00) ;
  }
  100% {
    -o-transform:  scaleX(20.00) scaleY(20.00) ;
  }
}

@-ms-keyframes crescendo-total {
  0% {
    -ms-transform:  scaleX(1.00) scaleY(1.00) ;
  }
  100% {
    -ms-transform:  scaleX(20.00) scaleY(20.00) ;
  }
}


.ponto {
  width: 7px;
  height: 7px;
  margin-bottom: 0px;
  margin-top: 4px;
  background: black;
  border-radius: 3px;
}


@media (min-width: 1px) and (max-width: 450px) {
  .linha {
   width: 11rem;
   height: 3px;
   margin-bottom: 0px;
   margin-top: 4px;
   background: black;
   border-radius: 3px;
  }
  .virarlinha{
  animation: virar-linha-sm ease-out 0.3s;
  animation-iteration-count: 1;
  transform-origin: 50% 50%;
  animation-fill-mode:forwards; /*when the spec is finished*/
  -webkit-animation: virar-linha-sm ease-out 0.3s;
  -webkit-animation-iteration-count: 1;
  -webkit-transform-origin: 50% 50%;
  -webkit-animation-fill-mode:forwards; /*Chrome 16+, Safari 4+*/ 
  -moz-animation: virar-linha-sm ease-out 0.3s;
  -moz-animation-iteration-count: 1;
  -moz-transform-origin: 50% 50%;
  -moz-animation-fill-mode:forwards; /*FF 5+*/
  -o-animation: virar-linha-sm ease-out 0.3s;
  -o-animation-iteration-count: 1;
  -o-transform-origin: 50% 50%;
  -o-animation-fill-mode:forwards; /*Not implemented yet*/
  -ms-animation: virar-linha-sm ease-out 0.3s;
  -ms-animation-iteration-count: 1;
  -ms-transform-origin: 50% 50%;
  -ms-animation-fill-mode:forwards; /*IE 10+*/
}
}

@media (min-width: 451px) {
  .linha {
   width: 100%;
   height: 3px;
   margin-bottom: 0px;
   margin-top: 4px;
   background: black;
   border-radius: 3px;
  }
  .virarlinha{
  animation: virar-linha ease-out 0.3s;
  animation-iteration-count: 1;
  transform-origin: 50% 50%;
  animation-fill-mode:forwards; /*when the spec is finished*/
  -webkit-animation: virar-linha ease-out 0.3s;
  -webkit-animation-iteration-count: 1;
  -webkit-transform-origin: 50% 50%;
  -webkit-animation-fill-mode:forwards; /*Chrome 16+, Safari 4+*/ 
  -moz-animation: virar-linha ease-out 0.3s;
  -moz-animation-iteration-count: 1;
  -moz-transform-origin: 50% 50%;
  -moz-animation-fill-mode:forwards; /*FF 5+*/
  -o-animation: virar-linha ease-out 0.3s;
  -o-animation-iteration-count: 1;
  -o-transform-origin: 50% 50%;
  -o-animation-fill-mode:forwards; /*Not implemented yet*/
  -ms-animation: virar-linha ease-out 0.3s;
  -ms-animation-iteration-count: 1;
  -ms-transform-origin: 50% 50%;
  -ms-animation-fill-mode:forwards; /*IE 10+*/
}
}




.virarponto{
  animation: virar-ponto ease-out 0.3s;
  animation-iteration-count: 1;
  transform-origin: 50% 50%;
  animation-fill-mode:forwards; /*when the spec is finished*/
  -webkit-animation: virar-ponto ease-out 0.3s;
  -webkit-animation-iteration-count: 1;
  -webkit-transform-origin: 50% 50%;
  -webkit-animation-fill-mode:forwards; /*Chrome 16+, Safari 4+*/ 
  -moz-animation: virar-ponto ease-out 0.3s;
  -moz-animation-iteration-count: 1;
  -moz-transform-origin: 50% 50%;
  -moz-animation-fill-mode:forwards; /*FF 5+*/
  -o-animation: virar-ponto ease-out 0.3s;
  -o-animation-iteration-count: 1;
  -o-transform-origin: 50% 50%;
  -o-animation-fill-mode:forwards; /*Not implemented yet*/
  -ms-animation: virar-ponto ease-out 0.3s;
  -ms-animation-iteration-count: 1;
  -ms-transform-origin: 50% 50%;
  -ms-animation-fill-mode:forwards; /*IE 10+*/
}







@keyframes virar-linha{
    0% {
        width: 7px;
        height: 7px;
        margin-bottom: 0px;
        margin-top: 0px;
    }
    100% {
        width: 100%;
        height: 3px;
        margin-bottom: 2px;
        margin-top: 2px;

    }
}

@-moz-keyframes virar-linha{
    0% {
        width: 7px;
        height: 7px;
        margin-bottom: 0px;
        margin-top: 0px;
    }
    100% {
        width: 100%;
        height: 3px;
        margin-bottom: 2px;
        margin-top: 2px;

    }
}

@-webkit-keyframes virar-linha {
    0% {
        width: 7px;
        height: 7px;
        margin-bottom: 0px;
        margin-top: 0px;
    }
    100% {
        width: 100%;
        height: 3px;
        margin-bottom: 2px;
        margin-top: 2px;

    }
}

@-o-keyframes virar-linha {
    0% {
        width: 7px;
        height: 7px;
        margin-bottom: 0px;
        margin-top: 0px;
    }
    100% {
        width: 100%;
        height: 3px;
        margin-bottom: 2px;
        margin-top: 2px;

    }
}

@-ms-keyframes virar-linha {
    0% {
        width: 7px;
        height: 7px;
        margin-bottom: 0px;
        margin-top: 0px;
    }
    100% {
        width: 100%;
        height: 3px;
        margin-bottom: 2px;
        margin-top: 2px;

    }
}





@keyframes virar-linha-sm {
    0% {
        width: 7px;
        height: 7px;
        margin-bottom: 0px;
        margin-top: 0px;
    }
    100% {
        width: 11rem;
        height: 3px;
        margin-bottom: 2px;
        margin-top: 2px;

    }
}

@-moz-keyframes virar-linha-sm {
    0% {
        width: 7px;
        height: 7px;
        margin-bottom: 0px;
        margin-top: 0px;
    }
    100% {
        width: 11rem;
        height: 3px;
        margin-bottom: 2px;
        margin-top: 2px;

    }
}

@-webkit-keyframes virar-linha-sm {
    0% {
        width: 7px;
        height: 7px;
        margin-bottom: 0px;
        margin-top: 0px;
    }
    100% {
        width: 11rem;
        height: 3px;
        margin-bottom: 2px;
        margin-top: 2px;

    }
}

@-o-keyframes virar-linha-sm {
    0% {
        width: 7px;
        height: 7px;
        margin-bottom: 0px;
        margin-top: 0px;
    }
    100% {
        width: 11rem;
        height: 3px;
        margin-bottom: 2px;
        margin-top: 2px;

    }
}

@-ms-keyframes virar-linha-sm {
    0% {
        width: 7px;
        height: 7px;
        margin-bottom: 0px;
        margin-top: 0px;
    }
    100% {
        width: 11rem;
        height: 3px;
        margin-bottom: 2px;
        margin-top: 2px;

    }
}









@keyframes virar-ponto{
    100% {
        width: 7px;
        height: 7px;
        margin-bottom: 0px;
        margin-top: 0px;
    }
    0% {
        width: 100%;
        height: 3px;
        margin-bottom: 2px;
        margin-top: 2px;

    }
}

@-moz-keyframes virar-ponto{
    100% {
        width: 7px;
        height: 7px;
        margin-bottom: 0px;
        margin-top: 0px;
    }
    0% {
        width: 100%;
        height: 3px;
        margin-bottom: 2px;
        margin-top: 2px;

    }
}

@-webkit-keyframes virar-ponto {
    100% {
        width: 7px;
        height: 7px;
        margin-bottom: 0px;
        margin-top: 0px;
    }
    0% {
        width: 100%;
        height: 3px;
        margin-bottom: 2px;
        margin-top: 2px;

    }
}

@-o-keyframes virar-ponto {
    100% {
        width: 7px;
        height: 7px;
        margin-bottom: 0px;
        margin-top: 0px;
    }
    0% {
        width: 100%;
        height: 3px;
        margin-bottom: 2px;
        margin-top: 2px;

    }
}

@-ms-keyframes virar-ponto {
    100% {
        width: 7px;
        height: 7px;
        margin-bottom: 0px;
        margin-top: 0px;
    }
    0% {
        width: 100%;
        height: 3px;
        margin-bottom: 2px;
        margin-top: 2px;

    }
}