/** New on 09242018. For the demo page. **/
#nav #nav-right ul li a {
	text-shadow: 0 0 12px rgba(6, 118, 121, 1);
}

#nav-right ul li a {background-image: url(images/nav_item_back_active_dark.png);}
#nav-left {opacity: 0.85;}
/** **/html {height: 100%;overflow-x: hidden;}
@keyframes fog-animation {0% {left: -900px;opacity: 0;}
5% {opacity: 1;}
100% {left: 100%;opacity:1;}
}
@keyframes cloud-animation-1 {0% {transform: translate(-85px);opacity: 0;}
10% {opacity: 0.6;}
90% {opacity: 0.6;}
100% {transform: translate(70px);opacity: 0;}
}
@keyframes cloud-animation-2 {0% {transform: translate(0);opacity: 0;}
25% {opacity: 0.6;}
50% {opacity: 0;}
75% {opacity: 0.6;}
100% {transform: translate(50px);opacity: 0;}
}
@keyframes cloud-large-animation {0% {transform: translate(-100px);opacity: 0;}
20% {opacity: 0.6;}
80% {opacity: 0.65;}
100% {transform: translate(180px);opacity: 0;}
}
@keyframes smoke-animation {0% {transform: scale(0.5) translateY(0) translateX(0) rotate(-50deg);opacity: 0;}
33% {opacity: 1;}
66% {opacity: 1;}
100% {transform: scale(1.1) translateY(-110px) translateX(50px) rotate(50deg);opacity: 0;}
}
@keyframes ray-animation {0% {opacity: 0.4}
30% {opacity: 0.2}
50% {opacity: 0.3}
80% {opacity: 0.2}
100% {opacity: 0.4}
}
@-webkit-keyframes fog-animation {0% {left: -900px;opacity: 0;}
5% {opacity: 1;}
100% {left: 100%;opacity:1;}
}
@-webkit-keyframes cloud-animation-1 {0% {-webkit-transform: translate(-85px);opacity: 0;}
10% {opacity: 0.6;}
90% {opacity: 0.6;}
100% {-webkit-transform: translate(70px);opacity: 0;}
}
@-webkit-keyframes cloud-animation-2 {0% {-webkit-transform: translate(0);opacity: 0;}
25% {opacity: 0.6;}
50% {opacity: 0;}
75% {opacity: 0.6;}
100% {-webkit-transform: translate(50px);opacity: 0;}
}
@-webkit-keyframes cloud-large-animation {0% {-webkit-transform: translate(-100px);opacity: 0;}
20% {opacity: 0.6;}
80% {opacity: 0.65;}
100% {-webkit-transform: translate(180px);opacity: 0;}
}
@-webkit-keyframes smoke-animation {0% {-webkit-transform: scale(0.5) translateY(0) translateX(0) rotate(-50deg);opacity: 0;}
33% {opacity: 1;}
66% {opacity: 1;}
100% {-webkit-transform: scale(1.1) translateY(-110px) translateX(50px) rotate(50deg);opacity: 0;}
}
@-webkit-keyframes ray-animation {0% {opacity: 0.4}
30% {opacity: 0.2}
50% {opacity: 0.3}
80% {opacity: 0.2}
100% {opacity: 0.4}
}
#hero-container-pinsgayan {position: relative;min-width: 320px;width: 100%;height: 700px;background: url(images/pinsbkan_narrow.jpg);background-size: 2560px 100%;background-position: center top;margin: auto;overflow: hidden;-webkit-mask-image: -webkit-linear-gradient(top, rgba(0,0,0,1) 0%,rgba(0,0,0,1) 70%,rgba(0,0,0,0.3) 85%,rgba(0,0,0,0) 100%);}
#cloud-large-1 {display: flex;justify-content: center;position: absolute;top: 0;left: 0;margin: auto;width: 100%;height: 100%;-webkit-animation: cloud-large-animation 23s linear 0s infinite normal;animation: cloud-large-animation 23s linear 0s infinite normal;text-align: center;opacity: 0;}
#cloud-large-1 img {flex-shrink: 0;margin: auto;width: 2560px;height: 100%}
#cloud-large-2 {display: flex;justify-content: center;position: absolute;top: 0;left: 0;margin: auto;width: 100%;height: 100%;-webkit-animation: cloud-large-animation 23s linear 11s infinite normal;animation: cloud-large-animation 23s linear 11s infinite normal;text-align: center;opacity: 0;}
#cloud-large-2 img {flex-shrink: 0;margin: auto;width: 2560px;height: 100%}
#foreground-fog-1 {position: absolute;bottom: 0;left: -3000px;width: 3000px;height: 612px;background-image: url(images/fog_blurry.png);background-repeat: no-repeat;background-size: contain;-webkit-animation: fog-animation 90s linear 0s infinite normal;animation: fog-animation 90s linear 0s infinite normal;}
#foreground-fog-2 {position: absolute;bottom: 0;left: -3000px;width: 3000px;height: 512px;background-image: url(images/fog_blurry.png);background-repeat: no-repeat;background-size: contain;-webkit-animation: fog-animation 90s linear 60s infinite normal;animation: fog-animation 90s linear 60s infinite normal;}
#cloud-1 {position: relative;top: 260px;left: 38%;width: 240px;height: 80px;background-image: url(images/cloud_1.png);background-repeat: no-repeat;background-size: 100% 100%;opacity: 0;-webkit-animation: cloud-animation-1 35s linear 0s infinite normal;animation: cloud-animation-1 35s linear 0s infinite normal;}
#cloud-2 {position: absolute;top: 333px;left: 38%;width: 240px;height: 50px;background-image: url(images/cloud_2.png);background-repeat: no-repeat;background-size: 100% 100%;opacity: 0;-webkit-animation: cloud-animation-2 7s linear 0s infinite normal;animation: cloud-animation-2 7s linear 0s infinite normal;}
.smoke-group {position: relative;width: 155px;height: 80px;margin-left: auto;margin-right: auto;top: 188px;overflow: visible;}
.smoke-container {position: absolute;left:15px;top: 24px;width: 50px;height: 50px;-webkit-transform: scale(0.7);-webkit-transform-origin: center;transform: scale(0.7);transform-origin: center;}
#smoke-container-2 {left:85px;top: 19px;-webkit-transform: scale(0.6);transform: scale(0.6);opacity: 0.8;}
#smoke-container-3 {left:113px;top: 33px;-webkit-transform: scale(0.4);transform: scale(0.4);}
.smoke-particle-container {position: absolute;left: 0;top: 0;width: 50px;height: 50px;opacity: 0;-webkit-animation: smoke-animation 10s linear 0s infinite normal;animation: smoke-animation 10s linear 0s infinite normal;opacity: 0;-webkit-transform-origin: center;transform-origin: center;}
.smoke-particle-container div {position: absolute;left: 0;top: 0;width: 100%;height: 100%;background: url(images/smoke_dark.png) no-repeat;background-size: 100% 100%; -webkit-filter: drop-shadow(-8px -8px 10px rgba(255,255,255,0.8));filter: drop-shadow(-8px -8px 10px rgba(255,255,255,0.8)); }
.smoke-particle-container:first-child {-webkit-animation-delay: -10s;animation-delay: -10s;}
.smoke-particle-container:nth-child(2) {-webkit-animation-delay: -8s;-webkit-transform: rotate(80deg);animation-delay: -8s;transform: rotate(80deg);}
.smoke-particle-container:nth-child(3) {-webkit-animation-delay: -6s;-webkit-transform: rotate(45deg);animation-delay: -6s;transform: rotate(45deg);}
.smoke-particle-container:nth-child(4) {-webkit-animation-delay: -4s;-webkit-transform: rotate(65deg);animation-delay: -4s;transform: rotate(65deg);}
.smoke-particle-container:nth-child(5) {-webkit-animation-delay: -2s;-webkit-transform: rotate(45deg);animation-delay: -2s;transform: rotate(45deg);}
.smoke-particle-container:nth-child(6) {-webkit-animation-delay: -2s;-webkit-transform: rotate(-45deg);animation-delay: -2s;transform: rotate(-45deg);}
#smoke-container-2 .smoke-particle-container:first-child {-webkit-animation-delay: -12s;animation-delay: -12s;}
#smoke-container-2 .smoke-particle-container:nth-child(2) {-webkit-animation-delay: -10s;animation-delay: -10s;}
#smoke-container-2 .smoke-particle-container:nth-child(3) {-webkit-animation-delay: -8s;animation-delay: -8s;}
#smoke-container-2 .smoke-particle-container:nth-child(4) {-webkit-animation-delay: -6s;animation-delay: -6s;}
#smoke-container-2 .smoke-particle-container:nth-child(5) {-webkit-animation-delay: -4s;animation-delay: -4s;}
#smoke-container-2 .smoke-particle-container:nth-child(6) {-webkit-animation-delay: -2s;animation-delay: -2s;}
.smoke-particle-container:nth-child(2) div {-webkit-animation-delay: -8s;-webkit-transform: rotate(80deg);animation-delay: -8s;transform: rotate(80deg);}
.smoke-particle-container:nth-child(3) div {-webkit-animation-delay: -6s;-webkit-transform: rotate(45deg);animation-delay: -6s;transform: rotate(45deg);}
.smoke-particle-container:nth-child(4) div {-webkit-animation-delay: -4s;-webkit-transform: rotate(65deg);animation-delay: -4s;transform: rotate(65deg);}
.smoke-particle-container:nth-child(5) div {-webkit-animation-delay: -2s;-webkit-transform: rotate(45deg);animation-delay: -2s;transform: rotate(45deg);}
.smoke-particle-container:nth-child(6) div {-webkit-animation-delay: -2s;-webkit-transform: rotate(-45deg);animation-delay: -2s;transform: rotate(-45deg);}
.ray-container {position: relative;margin-left: auto;margin-right: auto;top: -180px;width: 300px;height: 100px;}
.ray:nth-child(1) {position: absolute;left: -198px;top: -80px;width: 740px;height: 131px;background: url(images/ray_1.png) no-repeat;background-size: contain;opacity: 0.2;-webkit-transform: scale(0.8) rotate(-60deg);transform: scale(0.8) rotate(-60deg);;-webkit-animation: ray-animation 4s linear 0s infinite normal;animation: ray-animation 4s linear 0s infinite normal;}
.ray:nth-child(2) {position: absolute;left: -77px;top: -40px;width: 740px;height: 131px;background: url(images/ray_2.png) no-repeat;background-size: contain;opacity: 0.4;;-webkit-transform: scale(0.5) rotate(-60deg);transform: scale(0.5) rotate(-60deg);;-webkit-animation: ray-animation 5s linear 3s infinite normal;animation: ray-animation 5s linear 3s infinite normal;}
.ray:nth-child(3) {position: absolute;left: -47px;top: -80px;width: 740px;height: 131px;background: url(images/ray_2.png) no-repeat;background-size: contain;opacity: 0.4;;-webkit-transform: scale(0.65) rotate(-60deg);transform: scale(0.65) rotate(-60deg);;-webkit-animation: ray-animation 6s linear 0.5s infinite normal;animation: ray-animation 6s linear 0.5s infinite normal;}
.ray:nth-child(4) {position: absolute;left: -18px;top: -60px;width: 740px;height: 131px;background: url(images/ray_1.png) no-repeat;background-size: contain;opacity: 0.4;;-webkit-transform: scale(0.5) rotate(-60deg);transform: scale(0.5) rotate(-60deg);;-webkit-animation: ray-animation 5.5s linear 1s infinite normal;animation: ray-animation 5.5s linear 1s infinite normal;}
.ray:nth-child(5) {position: absolute;left: 82px;top: -40px;width: 740px;height: 131px;background: url(images/ray_2.png) no-repeat;background-size: contain;opacity: 0.4;;-webkit-transform: scale(0.8) rotate(-60deg);transform: scale(0.8) rotate(-60deg);;-webkit-animation: ray-animation 4.5s linear 0.3s infinite normal;animation: ray-animation 4.5s linear 0.3s infinite normal;}
@keyframes eagle-left-wing-animation {0% {transform: rotate(-0.4deg);}
20% {transform: rotate(0.4deg);}
50% {transform: rotate(0.6deg);}
78% {transform: rotate(0.2deg);}
100% {transform: rotate(-0.4deg);}
}
@keyframes eagle-wing-back-animation {0% {transform: rotate(-0.2deg);}
20% {transform: rotate(0.2deg);}
50% {transform: rotate(0.4deg);}
78% {transform: rotate(0.1deg);}
100% {transform: rotate(-0.3deg);}
}
@keyframes eagle-wing-right-animation {0% {transform: rotateX(0deg) rotateZ(0deg);}
10% {transform: rotateX(0.5deg) rotateZ(0.5deg);}
50% {transform: rotateX(-0.5deg) rotateZ(-0.5deg);}
78% {transform: rotateX(0.5deg) rotateZ(0.5deg);}
100% {transform: rotateX(0deg) rotateZ(0deg);}
}
@keyframes eagle-wing-right-back-animation {0% {transform: rotateX(0deg) rotateY(0deg);}
20% {transform: rotateX(5deg) rotateY(5deg);}
50% {transform: rotateX(-5deg) rotateY(-5deg);}
78% {transform: rotateX(6deg) rotateY(4deg);}
100% {transform: rotateX(0deg) rotateY(0deg);}
}
@keyframes eagle-tail-animation {0% {transform: rotateX(0deg) rotateY(0deg);}
10% {transform: rotateX(2.5deg) rotateY(2.5deg);}
50% {transform: rotateX(-2.5deg) rotateY(-2.5deg);}
78% {transform: rotateX(2.5deg) rotateY(2.5deg);}
100% {transform: rotateX(0deg) rotateY(0deg);}
}
@keyframes eagle-body-animation {0% {transform: rotate(-0.1deg);}
20% {transform: rotate(0.2deg);}
50% {transform: rotate(0deg);}
78% {transform: rotate(0.1deg);}
100% {transform: rotate(-0.1deg);}
}
@keyframes eagle-movement {0% {transform: translate(-1200px, 600px) scale(0.7);}
100% {transform: translate(2200px, -700px) scale(0.5);}
}
/** Safari 有時會忽略 animation-delay 而同時開始產生動畫，解決方式為：用 nth-child 指定各個 delay，並使用負數值 **/#eagle-animation-container {position: absolute;top: 0px;width: 992px;height: 601px;-webkit-animation: eagle-movement 14s ease-out 0s infinite normal;animation: eagle-movement 14s ease-out 0s infinite normal;-webkit-transform-origin: center;transform-origin: center;}
}
/**
#eagle-animation-container {position: absolute;top: 0px;width: 992px;height: 601px;-webkit-animation: eagle-movement 20s linear -5s infinite normal;animation: eagle-movement 20s linear -5s infinite normal;-webkit-transform-origin: center;transform-origin: center;}
#eagle-container {position: absolute;top: 0px;width: 992px;height: 601px;-webkit-animation: eagle-body-animation 1s linear -1.05s infinite normal;animation: eagle-body-animation 1s linear -1.05s infinite normal;-webkit-transform-origin: center;transform-origin: center;perspective: 1000px;}
#eagle-body {position: aboslute;top:0;left: 0;width: 992px;height: 601px;background: url(images/eagle_body.png) no-repeat;background-size: 100% 100%;}
#eagle-wing-left {position: absolute;top: 42px;left: 13px;width: 269px;height: 132px;background: url(images/eagle_wing_left.png) no-repeat;-webkit-animation: eagle-left-wing-animation 0.15s linear 0s infinite normal;animation: eagle-left-wing-animation 0.15s linear 0s infinite normal;-webkit-transform-origin: right;transform-origin: right;}
#eagle-wing-right {position: absolute;top: 378px;right: 13px;width: 292px;height: 196px;background: url(images/eagle_wing_right.png) no-repeat;-webkit-animation: eagle-wing-right-animation 0.15s linear 0s infinite normal;animation: eagle-wing-right-animation 0.15s linear 0s infinite normal;-webkit-transform-origin: left;transform-origin: left;-webkit-transform-style: preserve-3d;transform-style: preserve-3d;}
#eagle-wing-left-back {position: absolute;top: 49px;left: 43px;width: 383px;height: 274px;background: url(images/eagle_wing_left_back.png) no-repeat;-webkit-animation: eagle-wing-back-animation 0.15s linear -1s infinite normal;animation: eagle-wing-back-animation 0.15s linear -1s infinite normal;-wbekit-transform-origin: center right;transform-origin: center right;}
#eagle-wing-right-back {position: absolute;top: 299px;right: 225px;width: 342px;height: 267px;background: url(images/eagle_wing_right_back.png) no-repeat;-webkit-animation: eagle-wing-right-back-animation 0.15s linear 0s infinite normal;animation: eagle-wing-right-back-animation 0.15s linear 0s infinite normal;-webkit-transform-origin: right;transform-origin: right;-webkit-transform-style: preserve-3d;transform-style: preserve-3d;}
#eagle-wing-tail {position: absolute;top: 345px;left: 192px;width: 247px;height: 190px;background: url(images/eagle_tail.png) no-repeat;-webkit-animation: eagle-tail-animation 0.15s linear 0s infinite normal;animation: eagle-tail-animation 0.15s linear 0s infinite normal;-webkit-transform-origin: right top;transform-origin: right top;-webkit-transform-style: preserve-3d;transform-style: preserve-3d;}
**/
#under-construction br {display: none;}
.nav-pinsgayan {margin-top: -98px;}
.loading-icon-container {position: absolute;width: 100%;}

@media screen and (max-width: 670px) {#nav-right a:link, #nav a:visited {color: rgba(255,255,255,0.88);}
}
@media screen and (max-width:544px) {#under-construction br {display: inline;}
.punc {display: none;}
.punc:first-child {display: inline-block;visibility: hidden;width: 8px;}
}
@media screen and (max-width:544px) {
	.nav-pinsgayan {margin-top: -158px;}
}

/** Parallax effects **/
body {
	overflow: hidden;
}
#hero-container-pinsgayan-container {
	position: relative;
	top: 0;
	left: 0;
	width: 100%;
	height: 700px;
	-webkit-transition: transform ease-out .2s;
	transition: transform ease-out .2s;
}
#hero-container-pinsgayan {
	width: 102%;
	background-size: 2660px 100%;
	left: 50%;
	-webkit-transform: translate(-50%);
	transform: translate(-50%);
}
#foreground-mountain {
	position: absolute;
	top: 375px;
	left: 50%;
	width: 1952px;
	height: 320px;
	margin-left: 60px;
	background: url(images/foreground-mountain.png) no-repeat;
	background-size: 100% 100%;
	-webkit-transform: translateX(-50%);
	transform: translateX(-50%);
}