#loading-icon {-webkit-filter: invert(100%) brightness(180%);filter: invert(100%) brightness(180%);opacity: 0.8;}
#loading-icon .loading-icon-text {color: rgb(255, 255, 255);-webkit-filter: invert();filter: invert();}
body.black #hero-container-pinsgayan {background-color: black;}
#hero-container-pinsgayan {-webkit-mask-image: -webkit-gradient(linear, left 95%, left bottom, from(rgba(0,0,0,1)), to(rgba(0,0,0,0)));mask-image: -moz-linear-gradient(to bottom, rgb(0, 0, 0) 95%, rgba(0,0,0,0) 100%);}
#hero-background-layer {background: url(images/night_sky_01122020.jpg);background-size: cover;background-position: center top;}

#stars {position: absolute;top: -600px;left: -1000px;width: 3600px;height: 1305px;background-image: url(images/stars.gif);background-size: 1298px 471px;background-repeat: repeat;background-position: center top;-webkit-animation: sky-rotation 50s linear 0s infinite normal;animation: sky-rotation 50s linear 0s infinite normal;left: 50%;-webkit-transform-origin: left 650px;-webkit-transform: translateX(-50%);transform-origin: left 650px;transform: translateX(-50%);}
#night-foreground-top {position: absolute;top: 0;left: 0;width: 100%;height: 100%;background-image: url(images/night_foreground_top.gif);background-size: cover;background-position: center top;}
#foreground-bottom {position: absolute;top: 0;left: 0;width: 100%;height: 100%;background-image: url(images/night_foreground_bottom.jpg);background-size: cover;background-position: center top;-webkit-clip-path: polygon(0 416px, 100% 416px, 100% 100%, 0% 100%);clip-path: polygon(0 416px, 100% 416px, 100% 100%, 0% 100%);}

#moon {position: absolute;top: 650px;left: 60%;background-image: url(images/moon.png);background-repeat: no-repeat;background-size: 100% 100%;width: 190px;height: 190px;color: white;}
#fence {width: 2560px;height: 115px;top: 586px;background-image: url(images/fence.png);background-size: 1497px 100%;position: absolute;left: 50%;-webkit-transform: translateX(-50%);transform: translateX(-50%);}
.grass {background-image: url(images/krasan-grass.png);background-repeat: no-repeat;position: absolute;left: 50%;-webkit-transform: translateX(-50%);transform: translateX(-50%);width: 255px;height: 153px;background-size: 100%;-webkit-animation: plant-animation-1 20s cubic-bezier(.48,.01,.55,.97) 0s infinite normal;animation: plant-animation-1 20s cubic-bezier(.48,.01,.55,.97) 0s infinite normal;-webkit-transform-origin: left bottom;transform-origin: left bottom;}
#grass1 {top: 476px;margin-left: -216px;}
#grass2 {left: 0;-webkit-animation-delay: -0.2s;animation-delay: -0.2s;}
#grass2-container {top: 468px;margin-left: -325px;-webkit-animation: none;animation: none;-webkit-transform: rotate(10deg) scale(0.85);transform: rotate(10deg) scale(0.85);}
#child {position: absolute;width: 720px;max-width: 65%;height: 392px;top: 309px;left: 0;background-image: url(images/krasan-child-2020.png);background-size: 690px 392px;background-position: right top;background-repeat: no-repeat;}
#child #eyes {width: 92px;height: 86px;background-image: url(images/eyes-closed.png);background-size: 100%;position: absolute;top: 114px;right: 199px;-webkit-transform: translateX(-50%);transform: translateX(-50%);-webkit-animation: blinking-eyes 15s linear 0s infinite normal;animation: blinking-eyes 15s linear 0s infinite normal;}
#leaves-container {position: absolute;top: 0;left: 0;width: 100%;}
#leaves-container div {position: absolute;background-repeat: no-repeat;background-size: 100%;-webkit-transform-origin: left top;transform-origin: left top;-webkit-animation: plant-animation-2 5s cubic-bezier(.48,.01,.55,.97) 0.6s infinite normal;animation: plant-animation-2 5s cubic-bezier(.48,.01,.55,.97) 0.6s infinite normal;}
#leaves-container > div.leave:first-child {width: 129px;height: 148px;top: 96px;left: 50%;margin-left: -655px;background-image: url(images/krasan-leave-1.gif);}	
#leaves-container > div.leave:nth-child(2) {width: 129px;height: 132px;top: 114px;left: 50%;margin-left: -903px;background-image: url(images/krasan-leave-2.gif);-webkit-animation-duration: 6s;-webkit-animation-delay: 0.4s;animation-duration: 6s;animation-delay: 0.4s;-webkit-transform-origin: center top;transform-origin: center top;}
#leaves-container > div.leave:nth-child(3) {width: 142px;height: 132px;top: 48px;left: 50%;margin-left: -808px;background-image: url(images/krasan-leave-3.gif);-webkit-animation-duration: 6s;-webkit-animation-delay: -0.2s;animation-duration: 6s;animation-delay: -0.2s;}
#leaves-container > div.leave:nth-child(4) {width: 142px;height: 132px;top: -30px;left: 50%;margin-left: -708px;-webkit-transform: rotate(-22deg);transform: rotate(-22deg);}
#leaves-container > div.leave:nth-child(4) div {width: 142px;height: 132px;background-image: url(images/krasan-leave-3.gif);-webkit-animation-duration: 7s;-webkit-animation-delay: 0.1s;animation-duration: 7s;animation-delay: 0.1s;}

#main-text {color: rgb(153, 183, 208);}

.muntjac {background-repeat: no-repeat;background-size: 100%;position: absolute;opacity: 0;}
#muntjac1 {width: 126px;height: 220px;background-image: url(images/muntjac1-with-shadow.gif);top: 382px;left: 50%;-webkit-transform: translateX(-50%);transform: translateX(-50%);margin-left: 306px;-webkit-animation: muntjac2 16s linear 0s infinite normal;animation: muntjac2 16s linear 0s infinite normal;}
#muntjac2 {width: 160px;height: 205px;background-image: url(images/muntjac2.gif);top: 270px;left: 50%;-webkit-transform: translateX(-50%);transform: translateX(-50%);margin-left: -35px;-webkit-animation: muntjac2 16s linear 4s infinite normal;animation: muntjac2 16s linear 4s infinite normal;}
#muntjac3 {width: 260px;height: 309px;background-image: url(images/muntjac3.gif);top: 0;left: 50%;-webkit-transform: translateX(-50%);transform: translateX(-50%);margin-left: -425px;-webkit-animation: muntjac2 16s linear 8s infinite normal;animation: muntjac2 16s linear 8s infinite normal;}
@-webkit-keyframes sky-rotation {
	0% {-webkit-transform: rotate(0deg) translateX(-50%);}
	100% {-webkit-transform: rotate(-360deg) translateX(-50%);}
}
@keyframes sky-rotation {
	0% {transform: rotate(0deg) translateX(-50%);}
	100% {transform: rotate(-360deg) translateX(-50%);}
}
@-webkit-keyframes cloud-movement-1 {
	0% {-webkit-transform: translate(0, -146px) scale(3.1);opacity: 0.9;}
	50% {-webkit-transform: translate(-300px, 146px) scale(1.6);opacity: 0.5;}
	100% {-webkit-transform: translate(-600px, 438px) scale(0.1);opacity: 0.1;}
}
@keyframes cloud-movement-1 {
	0% {transform: translate(0, -146px) scale(3.1);opacity: 0.9;}
	50% {transform: translate(-300px, 146px) scale(1.6);opacity: 0.5;}
	100% {transform: translate(-600px, 438px) scale(0.1);opacity: 0.1;}
}
@-webkit-keyframes muntjac1 {
	0% {opacity: 1;}
	90% {opacity: 1;}
	100% {opacity: 0;}
}
@keyframes muntjac1 {
	0% {opacity: 1;}
	90% {opacity: 1;}
	100% {opacity: 0;}
}
@-webkit-keyframes muntjac2 {
	0% {opacity: 0;}
	3% {opacity: 1;}
	22% {opacity: 1;}
	25% {opacity: 0;}
}
@keyframes muntjac2 {
	0% {opacity: 0;}
	3% {opacity: 1;}
	22% {opacity: 1;}
	25% {opacity: 0;}
}
@-webkit-keyframes blinking-eyes {
	0% {opacity: 0;}
	40% {opacity: 0;}
	40.5% {opacity: 1;}
	41% {opacity: 0;}
	48% {opacity: 0;}
	48.5% {opacity: 1;}
	49% {opacity: 0;}
	97% {opacity: 0;}
	97.5% {opacity: 1;}
	98% {opacity: 0;}
	100% {opacity: 0;}
}
@keyframes blinking-eyes {
	0% {opacity: 0;}
	40% {opacity: 0;}
	40.5% {opacity: 1;}
	41% {opacity: 0;}
	48% {opacity: 0;}
	48.5% {opacity: 1;}
	49% {opacity: 0;}
	97% {opacity: 0;}
	97.5% {opacity: 1;}
	98% {opacity: 0;}
	100% {opacity: 0;}
}
@media screen and (min-width: 2022px) {
	#muntjac1 {top: 405px;}
	#fence {top: 612px;}
	#grass1, #grass2-container {top: 502px;}
	#child {top: 335px;}
	#leaves-container {margin-left: -50px;}
}
@media screen and (min-width: 2282px) {
	#muntjac1 {top: 482px;}
	#leaves-container {margin-left: -150px;}
}
@media screen and (min-width: 1660px) {
	#moon {left: 65%;}
}
@media screen and (max-width: 1410px) {
	#muntjac2 {margin-left: 80px;}
}
@media screen and (max-width: 850px) {
	#muntjac2 {margin-left: 0;}
	#muntjac3 {margin-left: -306px;}
}
@media screen and (max-width: 600px) {
	#muntjac1 {margin-left: 246px;}
	#muntjac2 {margin-left: 23px;}
	#muntjac3 {margin-left: -195px;}
}
@media screen and (max-width: 414px) {
	#muntjac1 {margin-left: 168px;}
	#muntjac2 {margin-left: 23px;top: 210px}
	#muntjac3 {margin-left: -125px;}
	#child {max-width: 78%;}
}
@media screen and (max-width: 375px) {
	#child {max-width: 85%;}
}
@media screen and (max-width: 320px) {
	#child {max-width: 95%;}
}
@media screen and (max-width: 320px) {
	#muntjac1 {margin-left: 168px;}
	#muntjac2 {margin-left: 8px;top: 220px;}
	#muntjac3 {margin-left: -102px;}
}

@-webkit-keyframes plant-animation-1 {
	0% {-webkit-transform: scaleX(1.02) rotateZ(0.2deg) translate3d(0.5px, 0, 0);}
	5% {-webkit-transform: rotateZ(-0.5deg) translate3d(-0.5px, 0, 0);}
	10% {-webkit-transform: scaleX(1.02) rotateZ(0.2deg) translate3d(1px, 0, 0);}
	15% {-webkit-transform: rotateZ(-0.5deg) translate3d(-1px, 0, 0);}
	20% {-webkit-transform: scaleX(1.02) rotateZ(0.2deg) translate3d(1px, 0, 0);}
	25% {-webkit-transform: rotateZ(-0.5deg) translate3d(-1px, 0, 0);}
	30% {-webkit-transform: scaleX(1.02) rotateZ(0.2deg) translate3d(1px, 0, 0);}
	35% {-webkit-transform: rotateZ(-0.5deg) translate3d(-0.5px, 0, 0);}
	40% {-webkit-transform: scaleX(1.02) rotateZ(0.2deg) translate3d(0, 0, 0);}
	45% {-webkit-transform: rotateZ(-0.5deg) translate3d(0, 0, 0);}
	50% {-webkit-transform: scaleX(1.02) rotateZ(0.2deg) translate3d(0, 0, 0);}
	55% {-webkit-transform: rotateZ(-0.5deg) translate3d(0, 0, 0);}
	60% {-webkit-transform: scaleX(1.02) rotateZ(0.2deg) translate3d(0, 0, 0);}
	65% {-webkit-transform: rotateZ(-0.5deg) translate3d(0, 0, 0);}
	70% {-webkit-transform: scaleX(1.02) rotateZ(0.2deg) translate3d(0, 0, 0);}
	75% {-webkit-transform: rotateZ(-0.5deg) translate3d(0, 0, 0);}
	80% {-webkit-transform: scaleX(1.02) rotateZ(0.2deg) translate3d(0, 0, 0);}
	85% {-webkit-transform: rotateZ(-0.5deg) translate3d(0, 0, 0);}
	90% {-webkit-transform: scaleX(1.02) rotateZ(0.2deg) translate3d(0, 0, 0);}
	95% {-webkit-transform: rotateZ(-0.5deg) translate3d(0, 0, 0);}
	100% {-webkit-transform: scaleX(1.02) rotateZ(0.2deg) translate3d(0.5px, 0, 0);}
}
@keyframes plant-animation-1 {
	0% {transform: scaleX(1.02) rotateZ(0.2deg) translate3d(0.5px, 0, 0);}
	5% {transform: rotateZ(-0.5deg) translate3d(-0.5px, 0, 0);}
	10% {transform: scaleX(1.02) rotateZ(0.2deg) translate3d(1px, 0, 0);}
	15% {transform: rotateZ(-0.5deg) translate3d(-1px, 0, 0);}
	20% {transform: scaleX(1.02) rotateZ(0.2deg) translate3d(1px, 0, 0);}
	25% {transform: rotateZ(-0.5deg) translate3d(-1px, 0, 0);}
	30% {transform: scaleX(1.02) rotateZ(0.2deg) translate3d(1px, 0, 0);}
	35% {transform: rotateZ(-0.5deg) translate3d(-0.5px, 0, 0);}
	40% {transform: scaleX(1.02) rotateZ(0.2deg) translate3d(0, 0, 0);}
	45% {transform: rotateZ(-0.5deg) translate3d(0, 0, 0);}
	50% {transform: scaleX(1.02) rotateZ(0.2deg) translate3d(0, 0, 0);}
	55% {transform: rotateZ(-0.5deg) translate3d(0, 0, 0);}
	60% {transform: scaleX(1.02) rotateZ(0.2deg) translate3d(0, 0, 0);}
	65% {transform: rotateZ(-0.5deg) translate3d(0, 0, 0);}
	70% {transform: scaleX(1.02) rotateZ(0.2deg) translate3d(0, 0, 0);}
	75% {transform: rotateZ(-0.5deg) translate3d(0, 0, 0);}
	80% {transform: scaleX(1.02) rotateZ(0.2deg) translate3d(0, 0, 0);}
	85% {transform: rotateZ(-0.5deg) translate3d(0, 0, 0);}
	90% {transform: scaleX(1.02) rotateZ(0.2deg) translate3d(0, 0, 0);}
	95% {transform: rotateZ(-0.5deg) translate3d(0, 0, 0);}
	100% {transform: scaleX(1.02) rotateZ(0.2deg) translate3d(0.5px, 0, 0);}
}
@-webkit-keyframes plant-animation-2 {
	0% {-webkit-transform: rotateZ(0.9deg) }
	17% {-webkit-transform: scaleX(1.01) rotateZ(-0.5deg)}
	33% {-webkit-transform: rotateZ(0.8deg)}
	50% {-webkit-transform: scaleX(1.01) rotateZ(-0.5deg)}
	67% {-webkit-transform: rotateZ(0.8deg)}
	83% {-webkit-transform: scaleX(1.02) rotateZ(-0.5deg)}
	100% {-webkit-transform: rotateZ(0.9deg)}
}
@keyframes plant-animation-2 {
	0% {transform: rotateZ(0.9deg) }
	17% {transform: scaleX(1.01) rotateZ(-0.5deg)}
	33% {transform: rotateZ(0.8deg)}
	50% {transform: scaleX(1.01) rotateZ(-0.5deg)}
	67% {transform: rotateZ(0.8deg)}
	83% {transform: scaleX(1.02) rotateZ(-0.5deg)}
	100% {transform: rotateZ(0.9deg)}
}

@-webkit-keyframes cold-breath {
	0% {opacity: 0;-webkit-transform: scale(0.7);}
	5% {opacity: 0.4;}
	75% {opacity: 0.4;}
	100% {opacity: 0;-webkit-transform: scale(1.3) translateY(-75px);}
}
@keyframes cold-breath {
	0% {opacity: 0;transform: scale(0.7);}
	5% {opacity: 0.4;}
	75% {opacity: 0.4;}
	100% {opacity: 0;transform: scale(1.3) translateY(-75px);}
}

.cold-breath {position: absolute;width: 175px;height: 229px;background-image: url(images/cold-breath.png);background-size: 100%;right: 77px;top: 126px;-webkit-animation: cold-breath 16s cubic-bezier(.48,.01,.55,.97) 0s infinite normal;animation: cold-breath 16s cubic-bezier(.48,.01,.55,.97) 0s infinite normal;}
#cold-breath-2 {-webkit-animation-delay: -8s;animation-delay: -8s;}