/* Section 0 - Fonts */	

/**
 * @license
 * MyFonts Webfont Build ID 3882026, 2020-03-20T14:14:12-0400
 * 
 * The fonts listed in this notice are subject to the End User License
 * Agreement(s) entered into by the website owner. All other parties are 
 * explicitly restricted from using the Licensed Webfonts(s).
 * 
 * You may obtain a valid license at the URLs below.
 * 
 * Webfont: BankGothicBT-Light by Bitstream
 * URL: https://www.myfonts.com/fonts/bitstream/bank-gothic/light/
 * Copyright: Copyright 1990-2003 Bitstream Inc. All rights reserved.
 * 
 * 
 * 
 * © 2020 MyFonts Inc
*/


/* @import must be at top of file, otherwise CSS will not work */
@import url("//hello.myfonts.net/count/3b3c2a");
  
@font-face {
  src: url('/v5/Fonts/BankGothicBT-Light/font.eot');
  font-family: 'Bank';
  src: url('/v5/Fonts/BankGothicBT-Light/font.woff2') format('woff2'), url('/v5/Fonts/BankGothicBT-Light/font.woff') format('woff'), url('/v5/Fonts/BankGothicBT-Light/font.eot?#iefix') format('embedded-opentype'), url('/v5/Fonts/BankGothicBT-Light/font.ttf') format('truetype');
}



a {
  color: inherit; /* blue colors for links too */
  text-decoration: inherit; /* no underline */
}


/* Section 1 - Full Body */	

body { 
font-family: Bank;
background-color:black; 
-webkit-touch-callout: none;
    -webkit-user-select: none;
     -khtml-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
			-webkit-tap-highlight-color: transparent;
}	




/* Section 2 - Initial Loading Cover */

#loadcover {
position:fixed;
left:0%; top:0%;
width:100%; height:100%;
background-color:black;
z-index: 4;
transition: opacity 0.75s;
}

.loadout {
opacity:0; 
pointer-events:none;
}


/* Section 3 - Clickable Items */

.clickable {
cursor:pointer;
transition: transform 0.75s;
}

.clickable:hover {
transform:scale(1.1);
}


/* Section 4 - Vertical Centering */

.middle {
display:table;
}

.middle p {
display:table-cell;
vertical-align:middle;
}

.inlineelem {
display:inline;
margin:0;
padding:0;
}

/* Section 5 - Flickering Animation */


@keyframes flicker {
0% {opacity: 0.5;}
45% {opacity: 1;}
46% {opacity: 0.15;}
55% {opacity: 1;}
100% {opacity: 0.5;}
}


.minibutton {
position:fixed;
left:0; top:0;
width:1px; height:1px;
opacity:0;
z-index:-1;
}

.flip {
transform:scaleX(-1);
}


/* Section 6 - Hover Pointer Label */

/* Section 6.1 - Pointer */


#fih-pointer {
position:absolute;
width: calc(var(--content-height)*0.1); height: calc(var(--content-height)*0.1);
top:10%; left:10%;
background-size:auto 100%;
font-size: calc(var(--content-height)*0.02697);
color: #a9fcfd;
text-shadow:0em 0em 0.25em white;
opacity:0;
pointer-events:none;
z-index:300;
}


/* Section 6.2 - Label */

#fih-pointerlabel {
position:absolute;
bottom:98.39%;
border-bottom: 0.06em solid #a9fcfd;
font-family: Bank;
text-shadow:0em 0em 0.25em white;
}

#fih-pointerlabel p {
display:inline;
margin:0;
padding:0;
}

/* Section 6.3 - Under Label */

#fih-pointersublabel {
position:absolute;
top:100%;
text-align:right;
}


/* Section 6.4 - Right Facing */

.fih-pointerr {
background-image:url('/v5/UI/FIHPointer6sm.png');
}

.fih-pointerr #fih-pointerlabel {
left:100%; 
}

.fih-pointerr #fih-pointersublabel {
right:0; 
}

/* Section 6.5 - Left Facing */


.fih-pointerl {
background-image:url('/v5/UI/FIHPointer6rsm.png');
}

.fih-pointerl #fih-pointerlabel {
right:100%; 
}

.fih-pointerl #fih-pointersublabel {
left:0; 
}

/* Section 6.6 - Mobile Images */


@media screen and (max-height: 650px) {
.fih-pointerr {background-image:url('/v5/UI/FIHPointer6smM.png');}	
.fih-pointerl {background-image:url('/v5/UI/FIHPointer6rsmM.png');}
}





/* Section x - Universal User Interface */

/* Section x.0 - Container */

.ui-con {
font-weight:bold;
font-size: calc(var(--content-height) * 0.1);
z-index:3;
}


/* Section x.1 - Location */


#ui-logo {
position:fixed;
right:1%; bottom: 11%;
width: calc(var(--content-height)*0.045); height: 6%;
background-image:url('/v5/UI/LogoDraft6CropsmM.png');
background-size: auto 100%;
pointer-events:none;
}



#ui-locationcon {
position:fixed;
right:1%; bottom:5%;
height: 5%;
pointer-events:none;
font-size: calc(var(--content-height) * 0.03);
text-align:right;
color:#f58d14;
pointer-events:none;
}

#ui-locationplanet {
font-size: 67%;
color:#3d3c41;
}



/* Section x.2 - Buttons */

#ui-buttoncon {
position:fixed;
right:0.5%; top:3%;
width: calc(var(--content-height) * 0.08); height: 16%;
}


.ui-button {
position:relative;
width:100%; height:50%;
transition: transform 0.5s;
cursor:pointer;
}

.ui-button:hover {
transform:scale(1.15);
}

#ui-button-top {
top: -2.5%;
}

#ui-button-bottom {
bottom: -2.5%;
}

.ui-button-border {
background-image:url('/v5/UI/UISquareButtonBordersm.png');
}

.ui-button-bg {
background-image:url('/v5/UI/UISquareButtonBgsm.png');
opacity:0.5;
transition: opacity 0.5s;
}



.ui-button:hover .ui-button-bg { 
opacity:1;
}

.ui-button-img {
position:absolute;
left:0; right:0; top:0; bottom:0; margin:auto;
width:75%; height:75%;
background-size: auto 100%;
}

#ui-button-top .ui-button-img {
background-image:url('/v5/UI/UIMenuSymbolsm.png');
}
#ui-button-bottom .ui-button-img {
background-image:url('/v5/UI/UIPhoneSymbol2sm.png');
}





/* Section x.3 - Profile */

/* Section x.3.1 - Character Image */


#ui-character-con {
position:fixed;
left:0; top:0;
width: calc(var(--content-height) * 0.2); height:20%;
cursor:pointer;
}

#ui-character-border, #ui-level-border {
background-image:url('/v5/UI/UICircleBorder2sm.png');
}

.ui-circle-bg {
background-image:url('/v5/UI/UICircleBlankBgsm.png');
}

.ui-lightup {
filter:brightness(0.5);
transition: filter;
}

#ui-character-con:hover .ui-lightup {
filter:brightness(1);
}

#ui-character-char {
background-image:url('/v5/UI/UICircleCharsm.png');
}



/* Section x.3.2 - Level */


#ui-level-con {
position:absolute;
bottom:0; right:0;
width: 35%; height:35%;
}

#ui-level-bg {
background-image:url('/v5/UI/UILevelBgsm.png');
}

#ui-level {
position:absolute;
left:0; top:25%;
width:100%; height: 60%;
color:white;
font-size: 25%;
font-weight:bold;
text-align:center;
}

#ui-circle-level {
background-image:url('/v5/UI/UICircleLevelsm.png');
}





/* Section x.3.3 - Home Button */


#ui-home-con {
position:absolute;
bottom:0; left:0;
width: 35%; height:35%;
cursor:pointer;

}

#ui-home-bg {
background-image:url('/v5/UI/UICircleSolarSystemsm.png');
}


#ui-home-link {
position:fixed;
left:0; top: 13%;
width: calc(var(--content-height) * 0.07); height: 7%;
}



/* Section x.3.4 - Progress Bars */


/* Section x.3.4.1 - Containers */

.ui-healthbar-con {
position:absolute;
width: 175%; height:17.5%;
}

#ui-healthbar-con1 {
top: 15%; left: 72.5%;
}

#ui-healthbar-con2 {
top: 33.5%; left: 62.5%;
}

#ui-healthbar-con3 {
top: 52%; left: 52.5%;
}


/* Section x.3.4.2 - Bar Structure */


.ui-healthbar-border {
background-image:url('/v5/UI/UIHealthBarBorder2sm.png');
}

.ui-healthbar-bg {
background-image:url('/v5/UI/UIHealthBarBg2sm.png');
}





/* Section x.3.4.3 - Bars */


.ui-healthbar-innercon {
position:absolute;
left:1.78%; top:21.64%;
width: 92.86%; height: 58.21%;
}

#ui-healthbar-innercon2 {
left:11.78%; width: 82.86%;
}
#ui-healthbar-innercon3 {
left:20%; width: 74.64%;
}

.ui-healthbar {
position:absolute;
left:0; top:0;
height:100%;
background-image: linear-gradient(to right,#c4ffff,white);
opacity:0.67;
transition: 0.5s;
}


.ui-healthbar-end {
position:absolute;
left:100%; top: 0;
width: calc(var(--content-height)*0.012014); height: 100%;
background-image:url('/v5/UI/UIHealthBarEndsm.png');
background-size: auto 100%;
background-repeat:no-repeat;
}


/* Section x.3.4.4 - Text */


.ui-healthbar-text {
text-align:center;
color:black;
font-size: 17.5%;
opacity:0;
transition: opacity 0.5s;
text-shadow: 0em 0em 0.1em white;
font-weight:bold;
display:table;
}
.ui-healthbar-text p {
display:table-cell;
vertical-align:middle;
}


/* Section x.3.4.5 - Hover Effect */


#ui-character-con:hover .ui-healthbar, #ui-character-con:hover .ui-healthbar-text {
opacity:1;
}

#ui-character-con:hover .ui-healthbar-bg {
filter:brightness(1);
}



/* Section x.3.4.5 - Health Bar XP Notification */

#ui-xpnot {
position:absolute;
left: 100%; top: 70%;
width:150%; height:15%;
color:white;
transition: opacity 0.5s;
font-size: 17.5%;
text-shadow:0em 0em 0.05em black,0em 0em 0.1em black;
}

.ui-xpnot-off {
opacity:0;
}



/* Section x.4 - Mobile Images */



@media screen and (max-height: 650px) {
#ui-logo {background-image:url('/v5/UI/LogoDraft6CropsmM.png');}
.ui-button-border {background-image:url('/v5/UI/UISquareButtonBordersmM.png');}
.ui-button-bg {background-image:url('/v5/UI/UISquareButtonBgsmM.png');}
#ui-button-top .ui-button-img {background-image:url('/v5/UI/UIMenuSymbolsmM.png');}
#ui-button-bottom .ui-button-img {background-image:url('/v5/UI/UIPhoneSymbol2smM.png');}
#ui-character-border, #ui-level-border {background-image:url('/v5/UI/UICircleBorder2smM.png');}
.ui-circle-bg {background-image:url('/v5/UI/UICircleBlankBgsmM.png');}
#ui-character-char {background-image:url('/v5/UI/UICircleCharsmM.png');}
#ui-level-bg {background-image:url('/v5/UI/UILevelBgsmM.png');}
#ui-circle-level {background-image:url('/v5/UI/UICircleLevelsmM.png');}
#ui-home-bg {background-image:url('/v5/UI/UICircleSolarSystemsmM.png');}
.ui-healthbar-border {background-image:url('/v5/UI/UIHealthBarBorder2smM.png');}
.ui-healthbar-bg {background-image:url('/v5/UI/UIHealthBarBg2smM.png');}
.ui-healthbar-end {background-image:url('/v5/UI/UIHealthBarEndsmM.png');}
}







/* 0. Notifications Container */

#nd-con {
position:fixed;
right:100%; bottom: 10%;
width: calc(var(--content-height)*0.5); height: 50%;
font-weight:bold;
z-index: 4;
color: #e3ffff;
}


/* 1. Notification Bar */

.nd-bar {
width:100%; height:20%;
background-image:url('/v5/UI/UINotificationBarsm.png');
background-size: auto 100%;
transition: transform 0.5s;
}

.nd-bar-on {
transform: translateX(90%);
}


/* 2. Notification Description */


.nd-bar-desc {
position:absolute;
left:12%; top:20%;
width: 75%; height: 55%;
font-size: 25%;
transition: 0.5s;
}

.nd-complete .nd-bar-desc {
opacity:0.5;
}


/* 3. Notification Status */


.nd-bar-status {
position:absolute;
left: 58%; top:60%;
width: 35%; height:25%;
font-size: 15%;
color:#3d3c41;
text-align:right;
transition: 0.5s;
opacity:1;
}


.nd-complete .nd-bar-status {
opacity:1;
}

/* 4. Notification Logo */


.nd-bar-logo {
position:absolute;
left: 88.42%; top:25%;
width:4.04%; height: 26.94%;
background-image:url('/v5/UI/LogoDraft6Cropsm.png');
background-size: auto 100%;
}


/* 5. Level Notification */



.nd-bar-level {
background-image:url('/v5/UI/UINotificationBarOrangesm.png');
}

.nd-bar-level .nd-bar-status {
display:none;
}

.nd-bar-congrats {
display:none;
}

.nd-bar-level .nd-bar-congrats {
display:block;
}


/* 6. Responsiveness */

@media screen and (max-height: 650px) {
.nd-bar {background-image:url('/v5/UI/UINotificationBarsmM.png');}
.nd-bar-logo {background-image:url('/v5/UI/LogoDraft6CropsmM.png');}
.nd-bar-level {background-image:url('/v5/UI/UINotificationBarOrangesmM.png');}
}
















/* W. Welcome Animation */


/* W.0 Welcome Container */

#smileyscreen {
position:fixed;
left:0; top:0;
width:100%; height:100%;
z-index:3;
transition: opacity 1s;
color: #3d3c41;
font-weight: bold;
font-size: calc(var(--content-height)*0.1);
}

#smileyscreenbg {
background-image: radial-gradient(white,#c6f5ff); /* #4ab6c3 */
}


.smileyscreenoff {
opacity:0;
pointer-events:none;
}


/* W.1 Logo */

/* W.1.1 Logo F's */


#smileyscreenlogo {
position:absolute;
right: calc(var(--content-height)*0.02); top: 2%;
left:0; right:0; bottom:0; top:0; margin: auto;
width: calc(var(--content-height)*0.12); height: 16%;
transition: transform 0.75s;
}

#smileyscreenlogol {
background-image:url('/v5/0/LogoDraft6CropLsm.png');
}
#smileyscreenlogor {
background-image:url('/v5/0/LogoDraft6CropRsm.png');
}

.smileyscreenlogohalf {
position:absolute;
width:100%; height:100%;
background-size:auto 100%;
transition: transform 1.5s;
}


/* W.1.2 Logo Title */


#smileyscreenlogotextt {
left:0.25%; bottom:100%;
text-align:left;
}


#smileyscreenlogotextb {
position:relative;
right:16%; top:100%;
text-align:right;
color: #f58d14;
}


/* W.1.3 Logo Slogan */


.smileyscreenlogoslogan {
position:absolute;
top:0;
color: #3d3c41;
opacity:0;
transition: transform 0.5s, opacity 1s;
}


.smileyscreenlogosloganl {
right:107%;
text-align:right;
transform:translateX(100%);
}
.smileyscreenlogosloganr {
left:107%;
text-align:left;
transform:translateX(-100%);
}

.smileyscreenlogotextonc .smileyscreenlogoslogan {
opacity:1;
transform:translateX(0);
}

.smileyscreenlogotext {
position:absolute;
width: 99.5%; height: 12%;
display:table;
font-size:35%;
transition: opacity 0.5s;
opacity:0;
}

.smileyscreenlogotext p {
display:table-cell;
vertical-align:middle;
}

.smileyscreenlogotexton .smileyscreenlogotext {
opacity:1;
}




/* W.1.4 Character Select */


/* W.1.4.0 Container */



#smileycharcon {
position:absolute;
left:0; right:0; top:0; bottom:0; margin:auto;
height: 50%; width: calc(var(--content-height)*0.5);
transition: opacity 0.5s;
opacity:0;
}


/* W.1.4.1 Character Positions */


.smileychar {
position:absolute;
top:0; bottom:0; left:0; right:0; margin:auto;
width:100%; height:100%;
transition: transform 0.75s;
cursor:pointer;
}


.smileycharinitialpos0 {
transform: translateX(-25%) scale(0.5);
}

.smileycharinitialpos1 {
transform: translateX(25%) scale(0.5);
}


/* W.1.4.2 Character Images */


.smileycharimg, .smileycharimgshadow {
transition: 0.75s;
}

.smileycharimgshadow {
opacity:0;
}

.smileychardarkmode .smileycharimgshadow {
opacity:1;
}

.smileychardarkmode {
pointer-events:none;
}

.smileycharinitialpos0:hover .smileycharimg, .smileycharinitialpos1:hover .smileycharimg {
transform: scale(1.15);
}

#smileycharl .smileycharimg {
background-image: url('/v5/0/SMIBellesm.png');
}

#smileycharr .smileycharimg {
background-image: url('/v5/0/SMISamsm.png');
}

#smileycharl .smileycharimgshadow {
background-image: url('/v5/0/SMIBelleShadowsm.png');
}

#smileycharr .smileycharimgshadow {
background-image: url('/v5/0/SMISamShadowsm.png');
}


@media screen and (max-height: 650px) {
#smileyscreenlogol {background-image:url('/v5/0/LogoDraft6CropLsmM.png');}
#smileyscreenlogor {background-image:url('/v5/0/LogoDraft6CropRsmM.png');}
#smileycharl .smileycharimg {background-image: url('/v5/0/SMIBellesmM.png');}
#smileycharr .smileycharimg {background-image: url('/v5/0/SMISamsmM.png');}
#smileycharl .smileycharimgshadow {background-image: url('/v5/0/SMIBelleShadowsmM.png');}
#smileycharr .smileycharimgshadow {background-image: url('/v5/0/SMISamShadowsmM.png');}
}




/* W.1.4.3 Character Names */


.smileygold {
color: #f58d14;
}

.smileychartext {
transition: opacity 0.5s;
text-align:center;
}

.smileychardarkmode .smileychartext {
opacity:0; 
}

.smileycharname {
position:absolute;
left:0; top: 115%;
width:100%; height: 15%;
font-size:84%;
}



/* W.1.4.4 Character Title */


#smileychartitle {
position:absolute;
left:0; bottom:85%;
width:100%; height: 15%;
font-size:42%;
}


/* W.1.4.5 Character Selected Fade */


.smileycharselectedfader {
transition: opacity 0.5s;
}

.smileycharselected .smileycharselectedfader {
opacity:0;
}

.smileycharselected {
pointer-events:none;
}

/* W.1.4.6 Welcome Text */


.smileywelcometext {
position:absolute;
left:-100%; top: 107.5%;
width:300%; height: 15%;
opacity:0;
font-size:37.5%;
transition: opacity 0.5s;
text-align:center;
}

.smileywelcometexton .smileywelcometext {
animation: flash 0.5s linear 3 alternate;
}