/* Now with MOBILE, FRIENDS! MOBILE! */

.hero_anim_container {
	box-sizing:border-box;
	overflow:hidden !important;
	position: relative;
}

.anim_contents {
	display:none;
}

/* Plane, Clouds */

.plane_animation {
	background-color: #091735;
}

@keyframes loop {
    0% { transform: translate(100%) }
    100% { transform: translate(-100%) }
}
@-webkit-keyframes loop {
    0% { -webkit-transform: translate(100%) }
    100% { -webkit-transform: translate(-100%) }
}

@keyframes turbulence {
    0% { transform: translateY(0); }
    15% { transform: translateY(10%) rotate(1deg); }
    30% { transform: translateY(0) rotate(-2deg); }
    45% { transform: translateY(10%) rotate(2deg); }
    60% { transform: translateY(0); }
    75% { transform: translateY(-5%) rotate(-2deg); }
    90% { transform: translateY(15%) rotate(1deg); }
}
@-webkit-keyframes turbulence {
    0% { -webkit-transform: translateY(0); }
    15% { -webkit-transform: translateY(10%) rotate(1deg); }
    30% { -webkit-transform: translateY(0) rotate(-2deg); }
    45% { -webkit-transform: translateY(10%) rotate(2deg); }
    60% { -webkit-transform: translateY(0); }
    75% { -webkit-transform: translateY(-5%) rotate(-2deg); }
    90% { -webkit-transform: translateY(15%) rotate(1deg); }
}

.loop {
	position:absolute;
  top:0px;
  width: 100%;
  height: 100%;
  background-size: 100% 100%;
  z-index:2;
}
.loop_1 {
	background-image: url(https://games.buzzfeed.com/_uk/santa_anim/media_desktop/bg-1.jpg);
  animation: loop 10s infinite linear;
  animation-delay: -5s;
	-webkit-animation: loop 10s infinite linear;
  -webkit-animation-delay: -5.0001s;
}

	@media (max-width:500px) {
		.loop_1 {
			background-image: url(https://games.buzzfeed.com/_uk/santa_anim/media_mobile/bg-1.jpg) !important;
		}
	}

.loop_2 {
	background-image: url(https://games.buzzfeed.com/_uk/santa_anim/media_desktop/bg-2.jpg);
  animation: loop 10s infinite linear;
  -webkit-animation: loop 10s infinite linear;
  -webkit-animation-delay: -0.0001s;
}

	@media (max-width:500px) {
		.loop_2 {
			background-image: url(https://games.buzzfeed.com/_uk/santa_anim/media_mobile/bg-2.jpg) !important;
		}
	}

#super_plane {
	position:absolute;
	display:table;
	width:100%;
	height:100%;
	top:0px;
	left:0px;
	z-index:3;
}
#specific_plane {
	display:table-cell;
	vertical-align:middle;
	height:100%;
	width:100%;
}
#actual_plane {
	width: 95%;
  height: 100%;
  position: absolute;
  top: -4%;
  right: -1%;
	background-image:url(https://games.buzzfeed.com/_uk/santa_anim/media_desktop/santa.png);
	background-repeat:no-repeat;
	background-position:center center;
	background-size:contain;
  animation: turbulence 20s infinite ease-in-out;
  -webkit-animation: turbulence 20s infinite ease-in-out;
  transform-origin: 70% 50%;
  -webkit-transform-origin: 70% 50%;
}

	@media (max-width:500px) {
		#actual_plane {
			background-image:url(https://games.buzzfeed.com/_uk/santa_anim/media_mobile/santa.png) !important;
		}
	}

.clood {
	position:absolute;
  width: 100%;
  background-size: 100% 100%;
  opacity: 0.25;
}

.clood_top {
	top:0px;
}

.clood_bottom {
	bottom:0px;
}

.clood_tf {
	z-index:4;
	height:20%;
	background-image:url(https://games.buzzfeed.com/_uk/santa_anim/media_desktop/cloods/top-front-cloud.png);
}

	@media (max-width:500px) {
		.clood_tf {
			background-image:url(https://games.buzzfeed.com/_uk/santa_anim/media_mobile/cloods/top-front-cloud.png) !important;
		}
	}

.clood_tf_1 {
  animation: loop 20s infinite linear;
  -webkit-animation: loop 20s infinite linear;
  animation-delay: -10s;
  -webkit-animation-delay: -10.0001s;
}
.clood_tf_2 {
  animation: loop 20s infinite linear;
  -webkit-animation: loop 20s infinite linear;
  -webkit-animation-delay: -0.0001s;
}

.clood_tb {
	z-index:3;
	height:24%;
	background-image:url(https://games.buzzfeed.com/_uk/santa_anim/media_desktop/cloods/top-back-cloud.png);
}

	@media (max-width:500px) {
		.clood_tb {
			background-image:url(https://games.buzzfeed.com/_uk/santa_anim/media_mobile/cloods/top-back-cloud.png) !important;
		}
	}

.clood_tb_1 {
  animation: loop 16s infinite linear;
  -webkit-animation: loop 16s infinite linear;
  animation-delay: -8s;
  -webkit-animation-delay: -8.0001s;
}
.clood_tb_2 {
  animation: loop 16s infinite linear;
  -webkit-animation: loop 16s infinite linear;
  -webkit-animation-delay: -0.0001s;
}

.clood_bf {
	z-index:4;
	height:20%;
	background-image:url(https://games.buzzfeed.com/_uk/santa_anim/media_desktop/cloods/bottom-front-cloud.png);
}

	@media (max-width:500px) {
		.clood_bf {
			background-image:url(https://games.buzzfeed.com/_uk/santa_anim/media_mobile/cloods/bottom-front-cloud.png) !important;
		}
	}

.clood_bf_1 {
  animation: loop 20s infinite linear;
  -webkit-animation: loop 20s infinite linear;
  animation-delay: -10s;
  -webkit-animation-delay: -10.0001s;
}
.clood_bf_2 {
  animation: loop 20s infinite linear;
  -webkit-animation: loop 20s infinite linear;
  -webkit-animation-delay: -0.0001s;
}

.clood_bb {
	z-index:3;
	height:24%;
	background-image:url(https://games.buzzfeed.com/_uk/santa_anim/media_desktop/cloods/bottom-back-cloud.png);
}

	@media (max-width:500px) {
		.clood_bb {
			background-image:url(https://games.buzzfeed.com/_uk/santa_anim/media_mobile/cloods/bottom-back-cloud.png) !important;
		}
	}

.clood_bb_1 {
  animation: loop 16s infinite linear;
  -webkit-animation: loop 16s infinite linear;
  animation-delay: -8s;
  -webkit-animation-delay: -8.0001s;
}
.clood_bb_2 {
  animation: loop 16s infinite linear;
  -webkit-animation: loop 16s infinite linear;
  -webkit-animation-delay: -0.0001s;
}