$donationCounter_percentFromGoal1: 100 - ($donationCounter_donated / $donationCounter_goal1 * 100);
$donationCounter_percentFromGoal2: 100 - ($donationCounter_donated / $donationCounter_goal2 * 100);
$donationCounter_percentFromGoal3: 100 - ($donationCounter_donated / $donationCounter_goal3 * 100);
$donationCounter_percentFromGoal4: 100 - ($donationCounter_donated / $donationCounter_goal4 * 100);


$goal1_width: $donationCounter_goal1 / $donationCounter_goal4 * 100;
$goal2_width: ($donationCounter_goal2 - $donationCounter_goal1) / $donationCounter_goal4 * 100;
$goal3_width: ($donationCounter_goal3 - $donationCounter_goal2) / $donationCounter_goal4 * 100;
$goal4_width: ($donationCounter_goal4 - $donationCounter_goal3) / $donationCounter_goal4 * 100;


.donationContainer {
	position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100px;

    &:before, &:after {
    	content: "";
	    height: 30px;
	    width: 100%;
	    display: block;
	    position: absolute;
    	z-index: 1;
    }

    &:before {
	    background: linear-gradient(to left bottom, $body-bg 49%, transparent 50%);
	    top: 0px;
	}

	&:after {
	    background: linear-gradient(to left bottom, transparent 49%, $alternate-bg 50%);
	    bottom: 0;
	}

	.total {
		display: block;
		position: absolute;
		left: 50%;
		top: -35px;
		transform: translate3d(-50%,0,0);
		font-size: 1.5rem;
		text-align: center;

		sub {
			display: block;
			font-size: .7rem;
			opacity: .5;
		}
	}

	.overlay {
		display: inline-block;
		height: 100%;
		border-right: 2px solid rgba(0,0,0,.3);
		line-height: 100px;

		&:last-child {
			border-right: none;
		}

		&.goal1 {
			width: $goal1_width + unquote("%");
			line-height: 74px;
			@if $donationCounter_donated > $donationCounter_goal1 {
				animation: donationCounterCelebrate 5s linear 1s forwards;
			}
		}

		&.goal2 {
			width: $goal2_width + unquote("%");
			line-height: 84px;
			@if $donationCounter_donated > $donationCounter_goal2 {
				animation: donationCounterCelebrate 5s linear 1.5s forwards;
			}
		}

		&.goal3 {
			width: $goal3_width + unquote("%");
			line-height: 95px;
			@if $donationCounter_donated > $donationCounter_goal3 {
				animation: donationCounterCelebrate 5s linear 2s forwards;
			}
		}

		&.goal4 {
			width: $goal4_width + unquote("%");
			line-height: 116px;
			@if $donationCounter_donated > $donationCounter_goal4 {
				animation: donationCounterCelebrate 5s linear 2s forwards;
			}
		}
	}
}

.donationCounter {
	width: 100%;
    height: 100%;
    overflow: hidden;
    font-size: 1.3rem;
    background: linear-gradient(to right, $donationCounter_light 50%, $donationCounter_dark 50%);
    background-size: 200%;
    background-position: 100%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    text-align: center;
    animation: donationCounterSlideIn .5s linear .5s forwards;

    sub {
    	display: block;
	    font-size: .8rem;
	    opacity: .5;
    }

}

@keyframes donationCounterCelebrate {
    0% {
        background: $donationCounter_light;
        //ransform: scale(1);
    }

    20% {
        background: #efcc3d;
    }

    40% {
        background: #5670de;
        //transform: scale(1.4);
    }

    60% {
        background: #de41b2;
    }

    80% {
        background: #49ca61;
    }

    100% {
        background: $donationCounter_light;
    }
}

@keyframes donationCounterSlideIn {
	from {
		background-position: 100%;
	}

	to {
		background-position: $donationCounter_percentFromGoal4 + unquote("%");
	}
}

@include media-breakpoint-down(sm) {
	#intro {
		padding-bottom: 8rem;
	}
	.donationContainer {
		position: fixed;
		height: 40px;
		&:before, &:after {
			display: none;
		}

		.total {
			left:0;
			transform: none;
			text-align: center;
			width: 100%;
			background: rgba($body-bg, .8);
			padding: 5px;
    		margin: -10px;
		}

		.overlay {
			&.goal1, &.goal2, &.goal3, &.goal4 {
				line-height: 40px;
				font-size: .9rem;
			}
		}
	}
}