/* 0. Visor Container & Background */


#vis-con {
position:fixed;
left:0; top:0;
width:100%; height:100%;
overflow:hidden;
color:#d5f5ff;
text-align:center;
font-weight:bold;
font-size: calc(var(--content-height)*0.1);
z-index:3;
}

.vis-con-off {
pointer-events:none;
}

#vis-visor-bg {
background-image: url('/v5/Visor/NewVisorDraftBg2sm.png');
background-size:cover;
background-position:center;
transition: 0.75s;
}

.vis-con-off #vis-visor-bg {
opacity:0;
transform: scale(1.5);
}


/* 1. Visor Bottom Buttons */

/* 1.0 Container */


#vis-buttoncon {
position:absolute;
left:0; right:0; margin:auto; bottom:0.5%;
width: calc(var(--content-height)*0.667); height: 10%; 
}


/* 1.1 Buttons */

.vis-button {
position:relative;
float:left;
width:20%; height:100%; /* AR = 1.5 */
opacity:0.5;
transition: opacity 0.5s;
cursor:pointer;
}

.vis-button:hover {
opacity:1;
}

.vis-button-img {
position:absolute;
left:0; right:0; margin:auto; top:0;
width:50%; height:75%;
background-size: auto 80%;
background-position:bottom;
background-repeat:no-repeat;
}

#vis-button-img1 {
background-image: url('/v5/Visor/VISProfileIconsm.png');
}
#vis-button-img2 {
background-image: url('/v5/Visor/VISPlanetIconsm.png');
}
#vis-button-img3 {
background-image: url('/v5/Visor/VISMissionIconsm.png');
}
#vis-button-img4 {
background-image: url('/v5/Visor/VISInfoIconsm.png');
}

.vis-button-txt {
position:absolute;
left:0; bottom:0;
width:100%; height:25%;
font-size:20%;
}



/* 1.2 Logo */

#vis-logo {
background-image:url('/v5/UI/LogoDraft6Cropsm.png');
background-size: auto 50%;
background-repeat:no-repeat;
background-position:center;
width:15%;
}





/* 2. Visor Content */

/* 2.0 Containers */


#vis-contentsquare {
position:absolute;
left:0; right:0; top:0; bottom:0; margin:auto;
width: calc(var(--content-height)*1); height:100%;
}


.vis-contentcon {
transition: opacity 0.5s;
}

.vis-contentcon-off {
opacity:0;
pointer-events:none;
}

.vis-content-title {
position:absolute;
left:0; top:11%; 
width:100%; height:6%;
font-size: 60%;
}


/* 2.1 Character Profile */


#vis-char-img {
position:absolute;
left:0; right:0; margin:auto; top:0; bottom:0;
width: 50%; height:50%;
background-size: auto 100%;
}

#vis-char-name {
position:absolute;
left:0; top:14.5%; 
width:100%; height:10%;
font-size: 60%;
}

#vis-char-lvl {
position:absolute;
left:0; bottom:14.5%;
width:100%; height: 7%;
font-size: 40%;
}

.vis-progcircle {
position:absolute;
top:0; bottom:0; margin:auto;
width: 33%; height: 33%;
background-image: url('/v5/Visor/VISProgressCircle2sm.png');
background-size: auto 100%;
}

#vis-progcirclel {
left:0;
}

#vis-progcircler {
right:0;
}

.vis-progcirclenum {
position:absolute;
left:0; top: 30%;
width:100%; height: 20%;
font-size: 60%;
}

.vis-progcirclename {
position:absolute;
left:0; bottom: 32%;
width:100%; height:20%;
font-size: 33%;
}





/* 2.2 Solar System */

/* 2.2.0 Container & Sun */


#vis-solarsystem {
position:absolute;
left:0; right:0; top:0; bottom:0; margin:auto;
width:60%; height:60%;
}

#vis-ss-sun {
position:absolute;
left:0; right:0; top:0; bottom:0; margin:auto;
width:25%; height:25%;
background-image: url('/v5/Visor/HBSun5smsm.png');
background-size: auto 100%;
pointer-events:none;
}






/* 2.2.1 Orbit Lines */


.vis-ss-line {
position:absolute;
left:0; right:0; top:0; bottom:0; margin: auto;
border-radius:50%;
border: 0.02em rgba(213,245,255,0.33) solid;
}

.vis-ss-line:nth-child(1) {
width: 22%; height:22%;
}
.vis-ss-line:nth-child(2) {
width: 35%; height:35%;
}
.vis-ss-line:nth-child(3) {
width: 48%; height:48%;
}
.vis-ss-line:nth-child(4) {
width: 61%; height:61%;
}
.vis-ss-line:nth-child(5) {
width: 74%; height:74%;
}
.vis-ss-line:nth-child(6) {
width: 87%; height:87%;
}
.vis-ss-line:nth-child(7) {
width: 100%; height:100%;
}



/* 2.2.2 Planet Orbiters */


.vis-planet-coninner {
position:absolute;
left:0; right:0; top:0; bottom:0; margin:auto;
width:13%; height:13%;
}

.vis-planet-coninner:nth-child(1) {
animation: vis-orbit 20s linear infinite;
}
.vis-planet-coninner:nth-child(2) {
animation: vis-orbit 31.81s linear -12s infinite;
}
.vis-planet-coninner:nth-child(3) {
animation: vis-orbit 43.64s linear -30s infinite;
}
.vis-planet-coninner:nth-child(4) {
animation: vis-orbit 55.45s linear -4s infinite;
}
.vis-planet-coninner:nth-child(5) {
animation: vis-orbit 67.27s linear -44s infinite;
}
.vis-planet-coninner:nth-child(6) {
animation: vis-orbit 79.09s linear -15s infinite;
}
.vis-planet-coninner:nth-child(7) {
animation: vis-orbit 90.91s linear -45s infinite;
}

.vis-planet-anioff .vis-planet-coninner {
animation: none;
}

@keyframes vis-orbit {
0% {transform: rotate(0deg);}
100% {transform: rotate(-360deg);}
}



/* 2.2.3 Planets */

.vis-planet {
position:absolute;
left:0; right:0; top:0; bottom:0; margin:auto;
width: 50%; height:50%;
background-size: auto 100%;
}

.vis-planet-coninner:nth-child(1) .vis-planet {
transform: translateY(169.23%);
background-image: url('/v5/Visor/CDEarthsm7Rsm.png');
} 
.vis-planet-coninner:nth-child(2) .vis-planet {
transform: translateY(269.23%);
background-image: url('/v5/Visor/CDGreenPlanet2smRsm.png');
} 
.vis-planet-coninner:nth-child(3) .vis-planet {
transform: translateY(369.23%);
background-image: url('/v5/Visor/CDMyGalsm2Rsm.png');
} 
.vis-planet-coninner:nth-child(4) .vis-planet {
transform: translateY(469.23%);
background-image: url('/v5/Visor/CDGasPlanetsmRsm.png');
} 
.vis-planet-coninner:nth-child(5) .vis-planet {
transform: translateY(569.23%);
background-image: url('/v5/Visor/CDWhitePlanetAltsmRsm.png');
} 
.vis-planet-coninner:nth-child(6) .vis-planet {
transform: translateY(669.23%);
background-image: url('/v5/Visor/CDRedPlanet2smRsm.png');
} 
.vis-planet-coninner:nth-child(7) .vis-planet {
transform: translateY(769.23%);
background-image: url('/v5/Visor/CDBluePlanet2smRsm.png');
} 





/* 2.2.4 Planet Description */

#vis-ss-desc {
position:absolute;
left:2.5%; bottom:11%; 
width:95%; height:7%;
font-size: 24%;
opacity:0.66;
transition: opacity 0.25s;
}


/* 2.3 Missions */

/* 2.3.1 Top Missions */

#vis-topmission-con {
position:absolute;
left:0; top:23%;
width: 100%; height: 25%;
}


.vis-topmission-col {
position: relative;
float:left;
width: 25%; height:100%;
}

.vis-topmission-title {
position: relative;
width: 100%; height:15%;
font-size: 30%;
}

.vis-topmission-elem {
position:relative;
height:11%;
font-size: 20%; 
opacity:0.67;
background-image: url('/v5/Visor/VISMissionIconsm.png');
background-size: auto 80%;
background-position:left;
background-repeat:no-repeat;
}

.vis-topmission-symbol {
position:absolute;
left:0; top:0;
width: 20%; height:100%;
background-image: url('/v5/Visor/VISMissionIconsm.png');
background-size: contain;
background-position:center;
background-repeat:no-repeat;
}

.vis-missioncomplete {
opacity:0.33;
text-decoration:line-through;
}



/* 2.3.2 Extra Missions */


.vis-mission-extra {
position:absolute;
left:0; 
width:100%; height:25%;
}

.vis-mission-extra1 {
top:49%;
}

.vis-mission-extra2 {
top:69%;
}


.vis-mission-header {
font-size: 30%;
height:15%;
width:50%;
}

.vis-mission-headerr {
float:right;
}


/* 2.4 Manuals */

/* 2.4.0 Manual Menu */


#vis-manual-list {
font-size: 50%;
}

.vis-manual-list-elem {
cursor:pointer;
opacity:0.67;
transition: opacity 0.5s;
}

.vis-manual-list-elem:hover {
opacity:1;
}


#vis-info-title {
z-index:2;
cursor:pointer;
}

/* 2.4.1 Manual Info Containers */

.vis-info-con {
transition:opacity 0.25s;
}

.vis-info-con-off {
opacity:0;
pointer-events:none;
}


.vis-info-subtitle {
position:absolute;
left:0; right:0; margin: auto; bottom: 13%;
font-size: 40%;
opacity:0.67;
}

.vis-info-con-inner {
position:absolute;
left:0; right:0; top:0; bottom:0; margin:auto;
width: 75%; height:67%;
}

.vis-info-details {
font-size: 40%;
opacity:0.67;
}


/* 2.4.2 Disclaimer */


.vis-info-disclaimer {
font-size: 17%;
opacity:0.67;
text-align:justify;
}


/* 2.4.3 Social */

.vis-info-social {
font-size: 40%;
}


/* 2.4.4 Credits */

#vis-visorcreditscon {
display: flex;
align-items: center;
flex-direction: column;
justify-content: center;
font-size: 40%;
}

.vis-visorcredit {
position:relative;
width: 100%; height: 10%;
}

.vis-visorcreditgap {
width:100%; height: 5%;
}

.vis-visorcredittitle {
position:absolute;
left:0; top:0; 
width:100%; height:33%;
font-size:50%;
opacity:0.75;
}

.vis-visorcreditdetail {
position:absolute;
left:0; top:33%; 
width:100%; height:67%;
}



/* 3 Exit Button */


#vis-exit {
position:absolute;
left:0; right:0; margin:auto; top:1%;
width: calc(var(--content-height)*0.067); height: 6.7%;
background-image: url('/v5/Visor/VisorExitButton2sm.png');
background-size: auto 100%;
opacity: 0.67;
transition: opacity 0.5s;
cursor:pointer;
}

#vis-exit:hover {
opacity:1;
}



/* 4 Responsiveness */


@media only screen and (orientation: portrait) {
#vis-con {font-size: calc(var(--content-width)*0.1);}
#vis-contentsquare {height: calc(var(--content-width)*1); width:100%;}
}

@media only screen and (max-device-aspect-ratio: 3/4) {
#vis-buttoncon {width:100%; height: calc(var(--content-width)*0.13333);}
}

@media screen and (max-height: 650px) {
#vis-visor-bg {background-image: url('/v5/Visor/NewVisorDraftBg2smM.png');}
#vis-button-img1 {background-image: url('/v5/Visor/VISProfileIconsmM.png');}
#vis-button-img2 {background-image: url('/v5/Visor/VISPlanetIconsmM.png');}
#vis-button-img3, .vis-topmission-elem, .vis-topmission-symbol  {background-image: url('/v5/Visor/VISMissionIconsmM.png');}
#vis-button-img4 {background-image: url('/v5/Visor/VISInfoIconsmM.png');}
.vis-progcircle {background-image: url('/v5/Visor/VISProgressCircle2smM.png');}
#vis-ss-sun {background-image: url('/v5/Visor/HBSun5smsmM.png');}
.vis-planet-coninner:nth-child(1) .vis-planet {background-image: url('/v5/Visor/CDEarthsm7RsmM.png');} 
.vis-planet-coninner:nth-child(2) .vis-planet {background-image: url('/v5/Visor/CDGreenPlanet2smRsmM.png');} 
.vis-planet-coninner:nth-child(3) .vis-planet {background-image: url('/v5/Visor/CDMyGalsm2RsmM.png');} 
.vis-planet-coninner:nth-child(4) .vis-planet {background-image: url('/v5/Visor/CDGasPlanetsmRsmM.png');} 
.vis-planet-coninner:nth-child(5) .vis-planet {background-image: url('/v5/Visor/CDWhitePlanetAltsmRsmM.png');} 
.vis-planet-coninner:nth-child(6) .vis-planet {background-image: url('/v5/Visor/CDRedPlanet2smRsmM.png');} 
.vis-planet-coninner:nth-child(7) .vis-planet {background-image: url('/v5/Visor/CDBluePlanet2smRsmM.png');} 
#vis-exit {background-image: url('/v5/Visor/VisorExitButton2smM.png');}
#vis-logo {background-image:url('/v5/UI/LogoDraft6CropsmM.png');}
}