.anima {
    opacity:1;
}
.faixa {
	z-index:100;
	position:relative;
}
.canvas {
	position: relative;
	height:460px;
	z-index:10;
	background:url(../images/bg-animacao.png);
	background-repeat: no-repeat;
	background-size: cover;
}
.laranja {
	position: absolute;
	top:-120px;
	left:-120px;
	z-index:15;
    -webkit-animation: fadeInFromNone 8s ease-out;
    animation: fadeInFromNone 8s ease-out;
}
.pontos {
	position: absolute;
	top:0px;
	left:0px;
	z-index:20;
}
.roxo {
	position: absolute;
	top:20px;
	left:210px;
	z-index:30;
    width: 200px;
    height: 200px;
    animation: rotateAnimationi linear 68s infinite;
	transition: all .5s
}
.azul_gd {
	position: absolute;
	top:250px;
	left:220px;
	width:260px;
	z-index:40;
    animation: rotateAnimation linear 70s infinite;
	transition: all .5s
}
.vermelho {
	position: absolute;
	top:295px;
	left:270px;
	width:400px;
	z-index:50;
    animation: rotateAnimation linear 60s infinite;
	transition: all .5s
}
.azul_pq {
	position: absolute;
	top:277px;
	left:248px;
	width:200px;
	z-index:60;
    animation: rotateAnimationi linear 36s infinite;
	transition: all .5s
}
.verde {
	position: absolute;
	top:50px;
	left:500px;
	z-index:60;
    width: 300px;
    height: 300px;
    animation: rotateAnimation linear 40s infinite;
	transition: all .5s
}
.relatorio {
	position: absolute;
	top:0;
	right: 50px;
	padding:2rem 1rem;
	color: #000;
    -webkit-animation: fadeInFromNone 5s ease-out;
    animation: fadeInFromNone 5s ease-out;
}
.relatorio h2 {
	font-weight: 700;
	font-size: 130px;
	line-height: 90px;
}
.relatorio h3 {
	font-weight: 700;
	font-size: 33px;
	line-height: 30px;
	text-transform:uppercase;
}
.ums {
    -webkit-animation: fadeInFromNone 1s ease-out;
    animation: fadeInFromNone 1s ease-out;
}
.doiss {
    -webkit-animation: fadeInFromNone 2s ease-out;
    animation: fadeInFromNone 2s ease-out;
}
.tress {
    -webkit-animation: fadeInFromNone 3s ease-out;
    animation: fadeInFromNone 3s ease-out;
}
.cincos {
    -webkit-animation: fadeInFromNone 5s ease-out;
    animation: fadeInFromNone 5s ease-out;
}
.dezs {
    -webkit-animation: fadeInFromNone 10s ease-out;
    animation: fadeInFromNone 10s ease-out;
}

@-webkit-keyframes rotateAnimation{100%{-webkit-transform:rotate(360deg);-ms-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes rotateAnimation{100%{-webkit-transform:rotate(360deg);-ms-transform:rotate(360deg);transform:rotate(360deg)}}

@-webkit-keyframes rotateAnimationi{100%{-webkit-transform:rotate(-360deg);-ms-transform:rotate(-360deg);transform:rotate(-360deg)}}@keyframes rotateAnimationi{100%{-webkit-transform:rotate(-360deg);-ms-transform:rotate(-360deg);transform:rotate(-360deg)}}

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

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

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

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

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

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