/* CSS Document */
@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;600&display=swap');
body,html { font-family: 'Orbitron', sans-serif; color:#FFF; background-color:#9e8aba; margin:0; min-height:100%; font-size:16px; }
* { box-sizing:border-box; }
h3 {font-weight:600;margin-bottom:.25em;letter-spacing: 1px;}
a, a:visited { color:#FFF; text-decoration:none; transition:color .25s; }
a:hover { text-decoration:none; color: #dcd2b5; }
.img-loading {
	transform:none!important;
	opacity: 0;
}

/* Template */
.body-wrapper {
	position: relative;
	overflow-x: hidden;
}
.container {
	position: relative;
	max-width: 1280px;
	margin: 0 auto;
	padding: 0 40px;
}
.body-wrapper .container {
	text-align: center;
}
.kg-scroll-down { 
	font-family:Arial;
	cursor: pointer;
	position: relative;
	top:0;
	animation: scrollDown .5s steps(3) infinite;
}
@keyframes scrollDown {
	0%{ top: 0; }
	50%{ top: 6px; }
	100%{ top: 0; }
}
.body-wrapper h3, .kg-scroll-down {
	font-size: 2.75em;
	text-align:center;
	text-shadow: 3px 3px 0 rgba(0,0,0,.75);
}
.body-wrapper h4 {
	font-size: 1.65em;
	text-align:center;
	text-shadow: 3px 3px 0 rgba(0,0,0,.75);
	margin-top: 0;
}
.body-wrapper h3 > a {
	text-decoration: underline;
}
/* Header */
.top-bg {
	position: relative;
	width: 100%;
	left:0;
	z-index: 6;
	padding: 20px 0;
	background: linear-gradient(180deg, black, transparent);
}
.gradient-bg > .top-bg {
	background: #302036;
	position: absolute;
	top: 0;
	z-index: 2;
}
.gradient-bg > .top-bg > .container {
	visibility: hidden;
}
.logo-wrapper img {
	max-width: 100%;
}
/* Main */
.main-wrapper {
	position: relative;
}
.main-bg-wrapper {
	position: absolute;
	width: 100%;
	min-height: 100%;
	z-index: 2;
}
.main-content-wrapper {
	position: relative;
	z-index:10;
}
.gradient-bg {
	background: linear-gradient(0deg, rgba(48,32,54,0) 0%, rgba(48,32,54,1) 100%);
	overflow: visible;
	margin-top: -1px;
	padding-top: 1px;
}
.gradient-bg div:not(.top-bg) .container {
	padding: 40px 0 40px 0;
	min-height: 400px;
}
.parallax-wrapper {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	z-index: 2;
	opacity: .3;
}
.parallax-wrapper > div.parallax {
	position: absolute;
	width:100%;
	height:100%;
}
.parallax-wrapper > div {
	position:absolute;
	width: 100%;
	height:100%;
	top: 0;
	left: 0;
}
.parallax-wrapper img {
	transition: opacity 1s;
}
.parallax-wrapper > div.stars-bg {
    background-image: url('../images/stars.png');
    z-index: 10;
    background-attachment: fixed;
    background-position: top center;
}
.parallax-wrapper > div.planet-a-bg {
	max-width: 1280px;
	right: 0;
	top: 120px;
	margin: 0 auto;
	z-index: 20;
	height: auto;
	text-align: right;
}
.planet-a-bg img{
	position: absolute;
	right: -25%;
}
.parallax-wrapper > div.planet-b-bg {
	max-width: 1280px;
	right: 0;
	top: auto;
	bottom: 0;
	margin: 0 auto;
	z-index: 30;
	height: auto;
}
.planet-b-bg img{
	position: absolute;
	left: -10%;
	bottom: 450px;
}
.parallax-wrapper > div.clouds-a-bg {
	background-image:url('../images/clouds-a.png');
	z-index:80;
	opacity: .75;
	animation: clouds 20s steps(200) infinite;
}
.parallax-wrapper > div.clouds-b-bg {
	background-image:url('../images/clouds-b.png');
	z-index: 60;
	animation: clouds 45s steps(250) infinite;
}
.parallax-wrapper > div.clouds-c-bg {
	background-image:url('../images/clouds-c.png');
	z-index: 50;
	animation: clouds 60s steps(300) infinite;
}
@keyframes clouds {
	0%{ background-position: 0 0; }
	100% { background-position: -1600px 0; }
}
.parallax-wrapper > div.island-bg {
	text-align: center;
	top: 380px;
	z-index: 70;
	padding: 0 20px;
}
.island-bg img {
	max-width: 100%;
	position: relative;
	top: 0;
	animation: floatIsland 3s steps(20) infinite;
}
@keyframes floatIsland {
	0%{ top: 0; }
	15%{ top: 2px; }
	35%{ top: 10px; }
	50%{ top: 12px; }
	65%{ top: 10px; }
	85%{ top: 2px; }
	100%{ top: 0; }
}

.kg-section-a {
    position: relative;
    z-index: 10;
}
.kg-section-b {
    position: relative;
    z-index: 11;
}
.kg-section-c {
    position: relative;
    z-index: 12;
}
/* Bottom */
.bottom-wrapper {
	position: relative;
	min-height:505px;
	z-index:40;
}
.bottom-bg {
	position:absolute;
	background-image:url('../images/bottom-bg.png');
	background-position: bottom left;
	background-repeat: repeat-x;
	height: 100%;
	width: 100%;
	animation: bottomBG 1s steps(60) infinite;
	background-size: 142px;
}
@keyframes bottomBG {
	0%{ background-position: 0 bottom; }
	100% { background-position: -142px bottom; }
}
.bottom-wrapper h3 {
	padding-top: 40px;
}
.sprite-wrapper {
	position: relative;
}
#sprite-run-e {
  position: relative;
  top: 45px;
  left: -20px;
  width: 175px;
  height: 252px;
  margin: 0 auto;
  background-image: url('../images/mitch-run-e.png');
  background-position: left center;
  animation: spriteRun 1s steps(10) infinite;
  transform: scale(.65);
  cursor: pointer;
}
@keyframes spriteRun {
	100% { background-position: -1750px; }
}
.kgNPC-bubble {
	width: 32px;
	height: 23px;
	position: absolute;
	left: 64px;
	right: 0;
	margin: auto;
	top: -52px;
	opacity: .7;
	animation: npcBubble .7s steps(10) alternate infinite;
	transition: transform .7s;
}
#sprite-run-e:hover .kgNPC-bubble, .kgNPC-bubble:hover {
	animation-name: npcBubble2;
	transform: scale(1.2);
}
.kgNPC-bubble::before,.kgNPC-bubble::after {
    display: block;
    width: 32px;
    height: 32px;
    position: absolute;
    top: 0;
    left: 0;
    line-height: 36px;
}
.kgNPC-bubble::before {
    display: block;
    border: 2px solid #FFF;
    background-color: #fff596;
    content: '';
    border-radius: 50%;
    border-bottom-right-radius: 0;
    position: absolute;
    transform: rotateZ(45deg);
    box-shadow: 0 0 4px #FFF;
}
.kgNPC-bubble::after {
    content:'!';
    text-align:center;
    font-size: 33px;
    padding: 2px;
    font-weight: bold;
    color: #C00;
}
@keyframes npcBubble {
	100% { opacity: .4; }
}
@keyframes npcBubble2 {
	0% { opacity: 1; }
	100% { opacity: .7; }
}
/* Footer */
footer {
	position:relative;
	z-index: 50;
}
.footer-top {
	background-image:url('../images/footer-bg.png');
	background-position: 0 bottom;
	background-repeat: repeat-x;
	background-size: 1278px;
	height: 170px;
	margin-top: -180px;
	animation: footerTop 2s steps(60) infinite;
}
@keyframes footerTop {
	0%{ background-position: 0 bottom; }
	100% { background-position: -1278px bottom; }
}
.footer-main {
	background: #000;
	padding: 60px 20px;
	margin-top: -5px;
}
.footer-text {
	text-align: center;
	font-size: 18px;
}
/* Popup */
.kg-popup-open,.kg-popup-close {
	cursor: pointer;
}
div#kg-popup {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 1000;
}
.kg-popup-overlay {
    position: fixed;
    z-index: 1;
    background-color: #333;
    left: 0;
    top: 0;
    width: 100%;
    min-height: 100%;
    opacity: .85;
}
.kg-popup-box-wrapper {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    padding: 40px;
    display: flex;
    align-items: center;
    align-content: center;
    overflow: scroll;
}
.kg-popup-box-container {
    margin: auto;
    max-width: 900px;
    width: 100%;
    position: relative;
    z-index: 5;
}
.kg-popup-box {
    background-color: #000;
    background-image: url('../images/popup-bg.png');
    padding: 20px;
    border: 2px solid #dcd2b5;
    border-radius: 4px;
    box-shadow: 0 0 0px 2px #000, inset 0 0 0px 2px #000, 16px 16px 0 0 rgba(0,0,0,.75);
}
a.kg-popup-close-btn {
    display: block;
    position: absolute;
    top: 8px;
    right: 8px;
    border: 1px solid #9e89ba;
    color: #E00;
    width: 20px;
    height: 20px;
    border-radius: 4px;
    text-align: center;
    font-size: 20px;
    line-height: 16px;
    background-color: #000;
}
.kg-popup-box-inner {
    display: flex;
}
.kg-popup-box-inner::after {
	display: block;
	content: '';
	clear: both;
}
.kgNPC-left {
    width: 224px;
    padding-right: 20px;
}
.kgNPC-face {
    width: 100%;
    padding-bottom: calc(100% - 4px);
    position: relative;
    border: 2px solid #9e8aba;
    border-radius: 4px;
    overflow: hidden;
    background-color: #bca995;
}
#sprite-face {
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: url('../images/mitch-face.png');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: left;
    box-shadow: 0 0 0px 2px #000, inset 0 0 0px 2px #000;
    animation: spriteFace 5s steps(20) infinite;
}
@keyframes spriteFace {
	0% { background-position: top left; }
	93.99999% { background-position: top left; }
	94% { background-position: top center; }
	95.99999% { background-position: top center; }
    96% { background-position: top right; }
    97.99999% { background-position: top right; }
	98% { background-position: top center; }
	100% { background-position: top center; }
}
.kgNPC-right {
    letter-spacing: .5px;
    width: calc(100% - 224px);
    min-height: 300px;
}
.kgNPC-right h4 {
	font-weight: normal;
	color: #9e8aba;
    margin-top: 0;
    font-size: 2em;
    margin-bottom: 20px;
}
.kgNPC-right a {
    color: #9e8aba;
    transition: color .25s;
}
.kgNPC-right a:hover {
    color: #F00;
}
div#kgNPC-text {
    line-height: 1.5;
    font-size: 1.25em;
    margin-bottom: 5px;
}
.kgNPC-options-wrapper {
	padding: 0;
	list-style-type: none;
	display: block;
	margin-bottom: 0;
	margin-top: 0;
	float: left;
}
.kgNPC-options-wrapper li {
	margin-top: 8px;
	font-size: 1.1em;
	position: relative;
}
.kgNPC-right .kgNPC-options-wrapper a {
    color: #dcd2b5;
    cursor: pointer;
    display: block;
    border: 1px solid;
    border-radius: 4px;
    background-color: #000;
    padding: 4px 8px;
}
.kgNPC-right .kgNPC-options-wrapper a:hover {
    color: #f00;
}
.kgNPC-right a#kgNPC-next {
	padding-right: 2em;
	position: relative;
}
.kgNPC-right a#kgNPC-next::after {
    content: '\25b6\00fe0e';
	font-family: sans-serif;
	display: inline-block;
	position: absolute;
	right: 5px;
	animation: talkNext 1s steps(9) infinite;
}
@keyframes talkNext {
	0% { opacity: 1; }
	25% { opacity: 1; }
	50% { opacity: 0; }
	75% { opacity: 1; }
}
li#kgdo-continue {
    padding-bottom: 10px;
    margin-bottom: 10px;
    border-bottom: 1px dotted #9e8aba;
}
li#kgdo-fb > a {
    padding-left: 75px;
}
li#kgdo-fb .fb-like {
    position: absolute;
    height: 20px;
    top: 0;
    bottom: 0;
    left: 6px;
    margin: auto;
	z-index:2;
}
li#kgdo-tw > a:last-child {
    padding-left: 90px;
}
li#kgdo-tw .twitter-follow-button {
    position: absolute!important;
    top: 0;
    bottom: 0;
    left: 6px;
    margin: auto;
    z-index:2;
}
li#kgdo-yt > a {
    padding-left: 100px;
}
li#kgdo-yt > .kgdo-yt-button {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 6px;
    margin: auto;
    z-index:2;
	height: 24px;
	width: 90px;
	overflow:hidden;
}
.body-wrapper.kg-pause * {
    animation: none !important;
}