#menuBackground{



        background-color:black;



        width: 100vw;



        height: 100vh;



        position: absolute;



        margin:0;



        z-index: 11;



        /*box-shadow: 0 0 5px 10px ;*/



    }







    .demo {



        z-index: 12;



      width: 100%;



      height: 100vh;



      display: flex;



      /*align-items: center;*/



      /*justify-content: center;*/



      position: absolute;
      background-color: transparent;
      overflow: hidden;
}
.demo__svg {
  flex-shrink: 0;
  fill: transparent;
  stroke: #fff;
  stroke-width: 1px;
  position: absolute;
  top: 50%;
  left: 45%;
  transform: translate(-50%, -45%);
  width: 100%;
  height: 100%;
  justify-content: center;
  z-index: 12; /* Adjust the z-index as needed */
}
.logo{
        transform: scale(0.4) translateX(33vw) translateY(40vh);
}
/*@media screen and (min-width: 1600px) {
   .demo__svg {left: 32%;top: 40%;}
}*/

@media screen and (min-width: 1100px) and (max-width: 1300px) {
   .logo{
       transform: scale(0.4) translateX(40vw) translateY(40vh);
    }
}
@media screen and (min-width: 1301px) and (max-width: 1600px) {
   .logo{
       transform: scale(0.4) translateX(33vw) translateY(40vh);
    }
}
@media screen and (min-width: 1601px) and (max-width: 2000px) {
   .logo{
       transform: scale(0.4) translateX(29vw) translateY(30vh);
    }
}
@media screen and (min-width: 2001px) and (max-width: 2200px) {
   .logo{
       transform: scale(0.4) translateX(25vw) translateY(30vh);
    }
}
@media screen and (min-width: 2201px) and (max-width: 2400px) {
   .logo{
       transform: scale(0.4) translateX(21vw) translateY(30vh);
    }
}
@media screen and (min-width: 2401px) and (max-width: 2800px) {
   .logo{
       transform: scale(0.4) translateX(19vw) translateY(30vh);
    }
}
.animatable {
      transition: stroke-dashoffset 1s ease, fill 0.3s ease 0.6s;
}
.shown {
      transform: none;
      opacity: 1;
      animation: fadeIn 2s;
    }
.hidden {



      opacity: 0;



    }







    .menubar{



        background-color: #58c1cfff;



        width: 0;



        height: 100vh;



        position: fixed;



        left: 65vw;



        top: 0;



        margin:0;



        z-index: 2;



    }



   











    .spin {



        display: block;



      width: 100%;



      /*height: 30vh;*/



      letter-spacing: 0.2em;



      position: absolute;



      left: -15vw;



      z-index: 0;       



    }



    .spin text {



      transform-origin: 50% 50%;



      font-family: zcoolBold;



      fill: white;



    }



    #spin1{



        height: 34vh;



        top: 27vh;



      animation: rotate 15s linear infinite;



    }



    #spin2{



        height: 44vh;



        top: 22vh;



        animation: rotatereverse 15s linear infinite;



    }



    #spin3{



        height: 55vh;



        top: 17vh;



        animation: rotate 15s linear infinite;



    }



    #spin4{



        height: 65vh;



        top: 12vh;



        animation: rotatereverse 15s linear infinite;



        font-size: 0.9em;







    }







    .curves{



        fill: transparent;



        stroke: transparent;



    }







    .el{



        width: 100vw;



        height: 100vh;



        position: fixed;



        /*top: 20vh;*/



        /*display: block;*/



        z-index: 5;



        opacity: 1;



        transform: none;







    }



    .el1{



        list-style-type: none;



        text-align: right;



      margin: 0;



      margin-top: 10vh;   



      width: 20vw;   



      overflow: hidden;



      background-color: transparent;



      display: block;



    }



    .reveal-element p{



        font-family: sht;



        color: white;



        font-size: 4em;



        text-decoration: none;



    }







    .el .cata-img-holder{



        right: 5vw;



        width: 30vh;



        height: 12vh;



        overflow: hidden;



        position: absolute;



        /*padding:2vh;*/



        transform: none;



    }







    .el .cata-img{



        height: 100vh;



        position: absolute;







    }



    .el1{



      /*display: none;*/



    }



    .reveal-element{



      right: 15vw;



      bottom: 5vh;



      position: absolute;



      display: none;



      opacity: 0;



    }



      #slideshow { 



        opacity: 0;



        position: fixed;



        width: 100vw;



        height: 100vh;



        top: 0;



        left: 0;



        }







    #slideshow > div { 



      position: absolute; 



      width: 100vw;



    }



    #slideshow > div >img{



      width: 100%;



    }



    .slide-text{



      position: absolute;



      right: 10vw;



      top: 60vh;



      font-family: sht;



        color: white;



        font-size: 4em;



        /*mix-blend-mode: difference;*/



    }



    .learn-more{



      position: absolute;



      right: 10vw;



      top: 85vh;



      width: 7vw;



      font-family: siyuanMid;



      color: white;



      font-size: 1.3em;



      background-color: grey;



      text-align: center;



      text-decoration: none;



    }



    .content{



      position: absolute;



      height: 100%;



      width: 100vw;



      top: 350vh;



      /*top: 250vh;*/



      opacity: 1;



      background-color: white;



      z-index: 5;



      text-align: center;



    }



    .mission-ch{



      position: absolute;



      top: 30vh;



      left: 20vw;



      z-index: 4;



      font-size: 3em;



      font-family: siyuanMid;



      color: #57c1cf;



    }



    .mission-ch-out{



      position: absolute;



      top: 30vh;



      left: 20vw;



      z-index: 7;



      font-size: 3em;



      font-family: siyuanMid;



      -webkit-text-stroke-width: 2px;



    -webkit-text-stroke-color: #57c1cf;



    color: transparent;



      /*mix-blend-mode: difference;*/



    }



    .mission-en{



      width: 40vw;



      position: absolute;



      top: 60vh;



      left: 40vw;



      z-index: 4;



      font-size: 2em;



      font-family: siyuanMid;



      color: #57c1cf;



    }



    .mission-en-out{



      width: 40vw;



      position: absolute;



      top: 60vh;



      left: 40vw;



      z-index: 7;



      font-size: 2em;



      font-family: siyuanMid;



      -webkit-text-stroke-width: 2px;



    -webkit-text-stroke-color: #57c1cf;



    color: transparent;



      /*mix-blend-mode: difference;*/



    }



    .mission-img{



      position: absolute;



      top: 50vh;



      left: 55vw;



      width: 60vw;



      z-index: 5;



    }



    .news{



      position: absolute;



      top: 120vh;



      width: 100%;



      height: 100%;



      background-color: #57c1cf;



    }



    .news-titles{



      position: absolute;



      font-size: 3em;



      font-family: siyuanMid;



      color: white;



      top: 10vh;



      left: 5vw;



    }







    input[name='r'] {



      position: fixed;



      visibility: hidden;



      z-index: 6;



    }



    .navigation {



      width: 100%;



      height:100%;



      position: fixed;



      bottom: 20px;



      left: 50%;



      transform: translateX(-50%);



      display: inline;



      z-index: 6;



      display: block;







    }



    .bar {



      display: block;



      position: absolute;



      width: 50px;



      height: 10px;



      border: 2px solid #fff;



      margin: 6px;



      cursor: pointer;



      transition: 0.4s;



      background-color: #fff;



      z-index: 7;



    }



@keyframes rotate {



  from {



    transform: rotate(0);



  }



  to {



    transform: rotate(-360deg);



  }



}



@keyframes rotatereverse {



  from {



    transform: rotate(0);



  }



  to {



    transform: rotate(360deg);



  }



}



/*body {



  height: 100vh;



  display: flex;



  background-color: #dbdbdb;



}*/