/*==================================================
 * LOADING SCREEN
 * ===============================================*/

#loading_wrap {
position:absolute;
height:100vh;
width:100vw;
/*background: linear-gradient(#a794c5, #120814);
background: url('../img/bg/bg_roof_skyline.jpg');
background-size:cover;*/
z-index:111111;
transition: all 1.2s ease;
}


#loading_brackets {
  position: absolute;
  height: 760px;
  width: 1366px;
  background: url(../img/bg/bg_loading_brackets.gif);
  background-size: cover;
  z-index: 9111;
  opacity:1;


}

#loading_background { 
position: absolute;
height: 100vh;
width: 100vw;
/**background: url(../img/bg/bg_roof_skyline.jpg);
background: url(../img/bg/loading_splash4.jpg);**/
background-size: cover;
z-index: 1111;
opacity:1;
transition: all 900ms ease-out;

}

#loading_transition_background {
  position: absolute;
  height: 100vh;
  width: 100vw;
  background-color:#000;
  /*background:url(../img/bg/bg_stars_dark.png);*/
  background-size: cover;
  z-index: 1110;
  /*opacity:0;
  display:none;*/

}

#loading_box {
  position:absolute;
  top:120px;
  left:50vw;
  margin-left:-350px;
  background-color: #E16B6B;
  width:700px;
  height:540px;
  display:block;
  z-index:22222;
  }
  
  .A_displaynone {
  display: none !important;
  
  }
  
  .sunset_transition {
    animation: A_sunset 1.2s no-repeat;
    display:block;
  }
  
  @keyframes A_sunset {
    to {opacity:0;}
  }


#version_tracker {
position: relative;
top: 98%;
float: right;
color:#fff;
font-size:10px;
font-family: 'Ubuntu Mono', monospace;
z-index:22222;
}

/* -----
SVG Icons - svgicons.sparkk.fr
----- */

.svg-icon path {
  width: 4em;
  height: 4em;
  fill: #000;
  filter: drop-shadow(1px 1px 1px rgb(0 0 0 / 0.4));
}

.svg-icon:hover path {
  fill: #fff;
  filter: drop-shadow(1px 1px 1px rgba(255, 255, 255, 0.5));
}

.svg-icon_on path {
  fill: #5a728c;
  filter: drop-shadow(1px 1px 1px rgb(0 0 0 / 0.4));
}




#loading_svg_icons {
  position: absolute;
  top: 7px;
  left: 60vw;
  width: 100px;
  height: 100px;
  margin-left: -380px;
  
}





#svg_mute_button {
  position:absolute;
  top:5px;
  left:500px;
  width:80px;
  height:80px;
  cursor: pointer;
  z-index:22222;
}


#loading_tip_wrap {
position:absolute;
top:35px;
left:50vw;
width:700px;
height:30px;
margin-left:-320px;
z-index:22222;
}

#loading_tip_wrap span {
font-family: 'Cutive Mono', serif;
color: #000;
font-size: 24px;  
font-weight:500;
text-shadow: 0 1px 2px #000;
-webkit-font-smoothing: antialiased;
}

#loading_tip_wrap span::selection {
  background: #b786bf;
}

.loading_tip_small {
display:inline;
font-size: 18px !important;  
line-height:22px !important;
}

.loading_tip_small_p {
display:block;
font-size: 18px !important;  
line-height:22px !important;
}



/**#loading_box:before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(30, 30, 30, 0.2);
background: -webkit-repeating-linear-gradient(top, transparent 0px, transparent 1px, rgba(30, 30, 30, 0.15) 1px, rgba(30, 30, 30, 0.15) 2px);
-webkit-background-size: 100% 2px;
background: -moz-repeating-linear-gradient(top, transparent 0px, transparent 1px, rgba(30, 30, 30, 0.15) 1px, rgba(30, 30, 30, 0.15) 2px);
-moz-background-size: 100% 2px;
display: block;
z-index: 99999;
}**/

#loading_shadow {
position:absolute;
top:120px;
left:50vw;
margin-left:-350px;
width:700px;
height:540px;
box-shadow:inset 0px 0px 20px 0px rgba(0,0,0,1);
z-index:33333;
}

#loading_shadow_outline {
position:absolute;
top:120px;
left:50vw;
margin-left:-350px;
width:700px;
height:540px;
z-index:33333;
}

#loading_svgs {
  position: absolute;
  top: 158px;
  left: 190px;
  height: 70px;
  width: 200px;
  z-index: 88888888;
}

.loading_svg0 {
stroke:#fff;
stroke-width:1px;
fill-opacity:0;
stroke-opacity:.6;
stroke-dasharray: 250, 50;
animation: A_loading_svg 3s linear infinite;
shape-rendering:crispEdges;
}

.loading_svg1 {
stroke:#fff;
stroke-width:1px;
fill-opacity:0;
stroke-opacity:.6;
stroke-dasharray: 220, 50;
animation: A_loading_svg 3s linear infinite;
shape-rendering:crispEdges;
}

.loading_svg2 {
stroke:#fff;
stroke-width:1px;
fill-opacity:0;
stroke-opacity:.6;
stroke-dasharray: 200, 50;
animation: A_loading_svg 3s linear infinite;		
shape-rendering:crispEdges;
}

@keyframes A_loading_svg {
	to{stroke-dashoffset: 363;}
}






#loading_text {
position:absolute;
top: 51px;
left: 174px;
font-family: 'Alfa Slab One', monospace;
font-size: 48px;
color:#fff;
-webkit-font-smoothing: antialiased;
z-index: 999999999;
}

#loading_text::selection {
  background: #d2d174;
}

.loading_blinker {
font-size: 40px;	
animation: A_blinker .5s infinite;
margin-left:4px;
}


#loading_faceplate_wrap {
  position: absolute;
  top: 30px;
  left: 137px;
  z-index: 33333333;
}

#loading_faceplate {
  width: 402px;
  height: 276px;
  border: 3px solid #444;
  border-radius: 3px 3px 3px 3px;

  box-shadow: 1px -1px 2px 2px #fff,
              -1px -1px 2px 2px #fff;
  
}

#loading_faceplate:before {
  content: " ";
  position: absolute;
  top: -1px;
  left: -4px;
  right: -3px;
  bottom: -4px;
  border: 15px double #333;
  border-radius: 1px 1px 1px 1px;
  z-index: 77777777;
}

#loading_faceplate:after {
  content: " ";
  position: absolute;
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;
  border: 10px inset #444;
  z-index: 88888888;
}


#scanlines_faceplate {
  position:absolute;
  top: 42px;
  left: 147px;
  width: 386px;
  height: 259px;
  z-index: 1666;
  background: linear-gradient(#444 50%, #000 50%);
  background-size: 100% 3px;
  background-repeat: repeat-y;
  opacity: .12;
  box-shadow : inset 0px 0px 1px 1px rgba(0, 0, 0, .8);
  z-index:99999999;

}

#loading_pc_screen {
  position: absolute;
  top: 33px;
  left: 148px;
  width: 400px;
  height: 283px;
box-shadow: 1px -1px 0px #999,
            2px -2px 0px #999,
            3px -3px 0px #999,
            4px -4px 0px #999,
            4px -4px 4px 2px #fff;
            background: linear-gradient(90deg, #318f9b, #ccdfdf);
animation: A_hueShift 10s infinite;
z-index:1111111;
}

@keyframes A_hueShift {
  to {-webkit-filter:hue-rotate(360deg);}
}

#loading_keyboard_wrap {
  position:absolute;
  top:330px;
  left:112px;
  width:488px;
  height:199px;
  box-shadow: 1px -1px 0px #999,
            2px -2px 0px #999,
            3px -3px 0px #999,
            4px -4px 0px #999,
            4px -4px 4px 2px #fff;
background:#d2d174;
z-index:11111111;
  }

#loading_keyboard {
position:absolute;
top:2px;
left:2px;
}

.loading_shadow_rect {
stroke-dasharray: 700;
stroke-dashoffset: -700;
stroke-width: 8px;
fill: transparent;
stroke: rgba(255, 255, 255, 0);
border-bottom: 5px solid black;
}

.loading_rect_anim {
animation: A_loading_light 1s linear 1;
animation-fill-mode: forwards;
}

@keyframes A_loading_light {
  to {stroke: #fff;
	stroke-width: 4px;
	stroke-dashoffset: 0;
	stroke-dasharray: 2478;}
}


#loading_prompt {
position:absolute;
left: 437px;
top: 205px;
width: 105px;
height: 45px;
background: url('../img/sprite/keyboard_sheet.png') no-repeat -594px -347px;
animation: A_press_enter 2s infinite steps(2);
box-shadow: 0 0 10px #fff,
            0 0 20px #fff,
            0 0 10px #fff,
            0 0 40px #fff,
            0 0 70px #fff,
            0 0 100px #fff;
z-index:99999999;
display:none;
}

.bg_cover_splash {
animation: A_bg_lightbox .8s ease-out 1;
animation-fill-mode: forwards;
}

@keyframes A_bg_lightbox {
  100%{background-color:#999;}
}

#img_load0 {
background: url('../img/sprite/spr_title_type0.png') no-repeat -666666px -666666px;
}

#img_load1 {
background: url('../img/sprite/keyboard_sheet.png') no-repeat -666666px -666666px;
}