/* Confetti.css */

.confetti
{
opacity: 0.0;
width: 40px;
height: 40px;
margin-top: -40px;
z-index:0;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
border-radius: 20px;
position:relative;
animation:confetti 12s;
-webkit-animation:confetti 12s;
animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
-webkit-animation-iteration-count: infinite;
-o-animation-iteration-count: infinite; /* Safari and Chrome */
animation-timing-function: ease-out;
-webkit-animation-timing-function: ease-out;
}

@keyframes confetti
{
0% {top:0px; left:0%;opacity:1.0;}
5% {left: .5%;}
10% {left: -.5%;}
15% {left: .5%;}
20% {left: -.5%;}
25% {left: .5%;}
30% {left: -.5%;}
35% {left: .5%;}
40% {left: -.5%;}
45% {left: .5%;}
50% {left: -.5%;opacity:0.7;}
55% {left: .5%;}
60% {left: -.5%;}
65% {left: .5%;}
70% {left: -.5%;}
75% {left: .5%;}
80% {left: -.5%;}
85% {left: .5%;}
90% {left: -.5%;}
95% {left: .5%;}
100% {top:500px; left:0%; opacity:0.0;}
}

@-webkit-keyframes confetti /* Safari and Chrome */
{
0% {top:0px; left:0%;opacity:1.0;}
5% {left: .5%;}
10% {left: -.5%;}
15% {left: .5%;}
20% {left: -.5%;}
25% {left: .5%;}
30% {left: -.5%;}
35% {left: .5%;}
40% {left: -.5%;}
45% {left: .5%;}
50% {left: -.5%;opacity:0.7;}
55% {left: .5%;}
60% {left: -.5%;}
65% {left: .5%;}
70% {left: -.5%;}
75% {left: .5%;}
80% {left: -.5%;}
85% {left: .5%;}
90% {left: -.5%;}
95% {left: .5%;}
100% {top:500px; left:0%; opacity:0.0;}
}

.confetti1, .confetti3, .confetti5, .confetti7, confetti9, .confetti11, .confetti13, .confetti15, .confetti17, .confetti19 {
background-color: #21409A;
}

.confetti2, .confetti4, .confetti6, .confetti8, confetti110, .confetti12, .confetti14, .confetti16, .confetti18, .confetti20 {
background-color: #FCD827;
}

.confetti1 {
	margin-left: 0%;
	animation-delay:6.0s;
	-webkit-animation-delay:6s;
}

.confetti2 {
	margin-left: 5%;
	animation-delay:0.6s;
	-webkit-animation-delay:0.6s;
}

.confetti3 {
	margin-left: 10%;
	animation-delay:8.4s;
	-webkit-animation-delay:8.4s;
}

.confetti4 {
	margin-left: 15%;
	animation-delay:4.8s;
	-webkit-animation-delay:4.8s;
}

.confetti5 {
	margin-left: 20%;
	animation-delay:10.8s;
	-webkit-animation-delay:10.8s;
}

.confetti6 {
	margin-left: 25%;
	animation-delay:2.4s;
	-webkit-animation-delay:2.4s;
}

.confetti7 {
	margin-left: 30%;
	animation-delay:3.6s;
	-webkit-animation-delay:3.6s;
}

.confetti8 {
	margin-left: 35%;
	animation-delay:7.8s;
	-webkit-animation-delay:7.8s;
}

.confetti9 {
	margin-left: 40%;
	animation-delay:0s;
	-webkit-animation-delay:0s;
}

.confetti10 {
	margin-left: 45%;
	animation-delay:9.6s;
	-webkit-animation-delay:9.6s;
}

.confetti11 {
	margin-left: 50%;
	animation-delay:4.2s;
	-webkit-animation-delay:4.2s;
}

.confetti12 {
	margin-left: 55%;
	animation-delay:10.2s;
	-webkit-animation-delay:10.2s;
}

.confetti13 {
	margin-left: 60%;
	animation-delay:7.2s;
	-webkit-animation-delay:7.2s;
}

.confetti14 {
	margin-left: 65%;
	animation-delay:1.2s;
	-webkit-animation-delay:1.26s;
}

.confetti15 {
	margin-left: 70%;
	animation-delay:6.6s;
	-webkit-animation-delay:6.6s;
}

.confetti16 {
	margin-left: 75%;
	animation-delay:1.8s;
	-webkit-animation-delay:1.8s;
}

.confetti17 {
	margin-left: 80%;
	animation-delay:11.4s;
	-webkit-animation-delay:11.4s;
}

.confetti18 {
	margin-left: 85%;
	animation-delay:9.0s;
	-webkit-animation-delay:9.0s;
}

.confetti19 {
	margin-left: 90%;
	animation-delay:3.0s;
	-webkit-animation-delay:3.0s;
}

.confetti20 {
	margin-left: 95%;
	animation-delay:5.4s;
	-webkit-animation-delay:5.4s;
}