rDrama/files/templates/CHRISTMAS/awards/Christmas/Sleighs.html

<!-- For use in Submission (threads) page only -->
<!-- Include in /templates/submission/submission.html -->
<!-- Requires `p` object -->

<img class="train1" src="/assets/CHRISTMAS/santasleigh.gif">

{% if p.award_count("train") > 1 %}
<img class="train2" src="/assets/CHRISTMAS/santasleigh.gif">
{% endif %}

{% if p.award_count("train") > 2 %}
<img class="train3" src="/assets/CHRISTMAS/santasleigh.gif">
{% endif %}

{% if p.award_count("train") > 3 %}
<img class="train4" src="/assets/CHRISTMAS/santasleigh.gif">
{% endif %}

<style>
	@keyframes train {
		0% {
			right: 0%;
		}
		100% {
			right: 100%;
		}
	}

	@keyframes trainrev {
		0% {
			right: 100%;
		}
		100% {
			right: 0%;
		}
	}

	@media (max-width: 768px) {
		.train1 {
			position: fixed;
			z-index: 10;
			width: 150px;
			animation: train 3s linear infinite !important;
			top: 35%
		}
		.train2 {
			display: none !important;
		}
		.train3 {
			display: none !important;
		}
		.train4 {
			display: none !important;
		}
	}

	@media (min-width: 768px) {
		.train1 {
			position: absolute;
			z-index: 10;
			width: 150px;
			animation: trainrev 5s linear infinite !important;
			transform: scaleX(-1);
			-webkit-transform: scaleX(-1);
			top: 35%
		}
		.train2 {
			position: absolute;
			z-index: 10;
			width: 150px;
			animation: train 5s linear infinite !important;
			top: 10%
		}
		.train3 {
			position: absolute;
			z-index: 10;
			width: 150px;
			animation: train 5s linear infinite !important;
			top: 60%
		}
		.train4 {
			position: absolute;
			z-index: 10;
			width: 150px;
			animation: trainrev 5s linear infinite !important;
			transform: scaleX(-1);
			-webkit-transform: scaleX(-1);
			top: 85%
		}
	}
</style>