body
{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
}

.MainCenterBlock
{
    display: flex;
    flex-direction: column;
    width: 80vw;
    height: 60%;

    overflow-y: scroll;
    overflow-x: hidden;
    /*overflow-y:scroll;*/
    -ms-overflow-style: none; /* IE 11 */
    scrollbar-width: none; /* Firefox 64 */
    border-width: 1px 0;
    text-align: justify;
}


.webgl-content
{
    width: 80vw;
}


#unityContainer
{
    border: solid 1px orange;
    border: solid 1px orange; 
    margin-left: 1vh; 
    margin-right: 1vh; 
    width: 64vw;
    height: calc(64vw / 16 * 9);
    z-index: 1; 
    position: relative;  
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    justify-content: center;
}


::-webkit-scrollbar { display: none; }

.logo
{
    width: 45%;
    margin: auto;
}
.logo img
{
    width: 100%;
}


#blockLandscape
{
    display: none;
}






#blockPortret
{
    display: flex;
}



.MainText
{
    width: 80%;
    margin: auto;
    margin-top: 3vw;
}
.MainText img
{
    margin: auto;
    width: 95%;
}

.left-top_block
{
    height: 10vh;
    width: 90vw;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
    margin-top: 1vw;
    margin-bottom: 1vw;

    position: relative;
    left: -0vw;

    border-radius: 10px;
}

.right-bottom_block
{
    height: 10vh;
    width: 80vw;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding: 0 4vw;

    align-items: center;
    margin-top: 1vw;
    margin-bottom: 1vw;

    position: relative;
    left: -0vw;

    border-radius: 10px;
}

.left-top_block div
{
    height: 10vw;
    width: 10vw;
}

.right-bottom_block div
{
    height: 10vw;
    width: 10vw;
}

.left-top_block div img
{
    height: 90%;
    width: 90%;
}

.right-bottom_block div img
{
    height: 100%;
    width: 100%;
}







.left-top_menu
{
    height: 10vh;
    margin: auto 4vw;
    display: flex;
    position: absolute;
    justify-content: center;
    align-items: center;

    left: 5vw;
    top: 2vw;
}


#menu
{
    height: 10vw;
    width: 10vw;
}



#centerBlockWrap
{
    height: 80%; 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    justify-content: space-between;
}

#ModeButton
{
    padding:2% 0; 
    /*height: 5%;*/
    height: 7vw;
    display: flex; 
    flex-direction: row; 
    align-items: center; 
    justify-content: center; 
    width: 80vw; 
    font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif; 
    font-size: 3.5vw; 
    font-weight: 200; 
    border: solid 1px orange; 
    border-width: 1px 0px;
}


#ModeButton div
{
    color: rgb(206, 206, 206); 
    border: solid orange 1px; 
    width: 20%; 
    height: 80%; 
    border-radius: 5px; 
    margin:0 3vw; 
    display: flex; 
    align-items: center; 
    justify-content: center;
    letter-spacing: 0.2ex;
}


#ModeButton .active
{
    color: rgb(31, 31, 31); 
    background-color: rgba(255, 166, 0, 0.789); 
    border: solid rgb(206, 206, 206) 1px; 
}


#game
{

}

#code
{

}

#faq
{

}


#gameBlock
{
    position:relative; 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    justify-content: center; 
    height: 100%;
}

#play
{
    display: block; 
    height: 30%;
}


#wrapMainBlock
{
    height: 95%; 
    color: gray; 
    display: flex; 
    flex-direction: column;
    border: none;
    border-bottom: 1px solid orange;
    border-top: 1px solid orange;
}


#turnPhone
{
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif; 
    font-size: 4.5vw; 
    margin-top: 3vh;
}

#path
{
    padding:2% 0; 
    height: 3%; 
    display: flex; 
    flex-direction: row; 
    align-items: left; 
    justify-content: center; 
    width: 80vw; 
    font-size: 2.5vw; 
    font-weight: 200;
    border: none;
    border-bottom: solid 1px orange; 
    border-width: 1px 0px; 
    align-items: center;
}

#path div
{
    align-items: center; 
    justify-content: center; 
    color: rgb(206, 206, 206); 
    width: 100%; 
    height: 80%; 
    margin:0 1vw; 
    display: flex; 
    font-weight: 100; 
    font-family: 'Courier New', Courier, monospace;
}


#mainlogoBlock
{
    display: none;
}

#logoIMG
{
    display: none;
}

#mainTextIMG
{
    display: none;
}

#headerWrap
{
    display: none; 
    flex-direction: row; 
    align-items: center; 
    justify-content: space-between; 
    width: 80vw; 
    border: none;
}





.webgl-content * {border: 0; margin: 0; padding: 0}

.webgl-content .logo, .progress {position: absolute;}
.webgl-content .logo {background: url('../TemplateData/progressLogo.Dark.png') no-repeat center / contain; height: 40%; top: 21%;}
.webgl-content .logo.Dark {background-image: url('../TemplateData/progressLogo.Dark.png') no-repeat center / contain; height: 40%; position: absolute; top: 21%;}

.webgl-content .progress {top: 70%; height: 3vw; width: calc(3vw / 18 * 141 + 3px);}
.webgl-content .progress .empty {background: url('../TemplateData/progressEmpty.Dark.png') no-repeat right / cover; float: right; width: 100%; height: 100%;}
.webgl-content .progress .full {background: url('../TemplateData/progressFull.Dark.png') no-repeat left / cover; float: left; width: 0%; height: 100%;}
.webgl-content .progress.Dark .empty {background-image: url('../TemplateData/progressEmpty.Dark.png') no-repeat right / cover; float: right; width: 100%; height: 100%;}
.webgl-content .progress.Dark .full {background-image: url('../TemplateData/progressFull.Dark.png') no-repeat left / cover; float: left; width: 0%; height: 100%;}


.webgl-content .footer {margin-top: 5px; height: 38px; line-height: 38px; font-family: Helvetica, Verdana, Arial, sans-serif; font-size: 18px;}
.webgl-content .footer .webgl-logo, .title, .fullscreen {height: 100%; display: inline-block; background: transparent center no-repeat;}
.webgl-content .footer .webgl-logo {background-image: url('webgl-logo.png'); width: 204px; float: left;}
.webgl-content .footer .title {margin-right: 10px; float: right;}
.webgl-content .footer .fullscreen {background-image: url('fullscreen.png'); width: 5vh;}

.fullscreen {background-image: url('fullscreen.png'); width: 5vh;}



details{
    display:block;
    background: rgb(223, 223, 223);
    width:80vw;
    /*box-shadow: 0 10px 15px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);*/
    border-radius: 3px;
    overflow: hidden;
    margin-bottom: 2vh;
    font-size: 1.5vh;
  }
  summary::-webkit-details-marker{display:none;}
  summary::-moz-list-bullet{list-style-type:none;}
  summary::marker{display:none;} 
  summary {
     display:block;
     padding: 1vw;
     padding-left: 2vw;
     /*border-bottom: 1px solid #e0e0e0;*/
     font-size: 1.5vh;
     cursor: pointer;
     position: relative;
  }
  summary:before {
    top: 40%;
    right: 2vw;
    color: transparent;
    background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBkPSJNMTYuNTkgOC41OUwxMiAxMy4xNyA3LjQxIDguNTkgNiAxMGw2IDYgNi02eiIvPjxwYXRoIGQ9Ik0wIDBoMjR2MjRIMHoiIGZpbGw9Im5vbmUiLz48L3N2Zz4=") no-repeat 50% 50% / 1em 1em;
    width: 1vw;
    height: 1vw;  
    content: "";
    position: absolute;
    transition: transform 0.5s;
  }
  details[open] > summary:before {
    transform: scale(1,-1);
  }
  summary ~ * {
     padding: 2vh 2vw;
  }
  details[open] summary ~ *{ 
    animation: sweep 0.5s ease-in-out;
  }
  @keyframes sweep {
    0%    {opacity: 0;}
    100%  {opacity: 1;}
  }
  summary:focus {
      outline-style: none;
      outline-width: 0px !important;
      outline-color: none !important;
    /*box-shadow: inset 0 0 1px rgba(0,0,0,0.3), inset 0 0 2px rgba(0,0,0,0.3);*/
  }
  
  summary::-moz-focus-inner 
  {
      border: 0 !important;
  }
  
  details p
  {
      border-top: gray 1px dotted;
      margin: 0;
  }
  
  summary
  {
      background: rgb(204, 204, 204);
  }





  #main_wrapper
  {
      position: absolute; 
      z-index: 9999; 
      left: 0; 
      top: 0; 
      width: 100vw; 
      height: 100vh; 
      background-color: rgb(0, 0, 0);
  }

  #preloader_wrap
  {
      padding: 2vw; 
      top: 0; 
      right: 0; 
      bottom: 0; 
      left: 0; 
      position: fixed;
  }

  #preloader_block
  {
      width: 100%; 
      height: 100%; 
      display: flex; 
      flex-direction: column; 
      justify-content: center; 
      align-items: center; 
      outline: 2px solid orange;
  }

  #pre_content
  {
      margin: auto; 
      /*outline: 1px solid gray;*/ 
      color: rgb(200, 200, 200); 
      height: 35vw; 
      display: flex; 
      flex-direction: column; 
      justify-content: center; 
      align-items: center;
  }

  #load_anim
  {
      width: 100%;
      height: 100%;
      background: url(../../image/oval.svg) center center no-repeat;
      background-size: contain;  
      /*margin-bottom: 3vh;*/
      /*transform: scale(1.1);*/
      display: flex;
  }

  #pre_logo
  {
      margin: auto; 
      height: 95%; 
      width: 100%; 
      background: url(../../image/logo.png) center center no-repeat; 
      background-size: contain;
  }

  #pre_text
  {
      margin-top: 3vw; 
      text-align: center; 
      font-size: 4vw; 
      font-family: Arial; 
      font-weight: 500; 
      font-style: italic; 
      /*text-shadow: 1px 1px 1px rgba(233, 174, 48, 0.8);*/
  }