#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);
}
}
@media screen and (min-width: 821px) and (max-width: 850px) {
.logo {
transform: scale(0.3) translateX(60vw) translateY(40vh);
}
}
@media screen and (min-width: 781px) and (max-width: 821px) {
.logo {
transform: scale(0.3) translateX(100vw) translateY(20vh);
}
}
@media screen and (min-width: 721px) and (max-width: 780px) {
.logo {
transform: scale(0.3) translateX(100vw) translateY(40vh);
}
}
@media screen and (min-width: 681px) and (max-width: 720px) {
.logo {
transform: scale(0.3) translateX(110vw) translateY(30vh);
}
}
@media screen and (min-width: 631px) and (max-width: 680px) {
.logo {
transform: scale(0.3) translateX(120vw) translateY(30vh);
}
}
@media screen and (min-width: 581px) and (max-width: 630px) {
.logo {
transform: scale(0.3) translateX(130vw) translateY(30vh);
}
}
@media screen and (min-width: 531px) and (max-width: 580px) {
.logo {
transform: scale(0.25) translateX(140vw) translateY(35vh);
}
}
@media screen and (min-width: 481px) and (max-width: 530px) {
.logo {
transform: scale(0.25) translateX(160vw) translateY(40vh);
}
}
@media screen and (min-width: 461px) and (max-width: 480px) {
.logo {
transform: scale(0.25) translateX(180vw) translateY(40vh);
}
}
@media screen and (min-width: 441px) and (max-width: 460px) {
.logo {
transform: scale(0.25) translateX(200vw) translateY(45vh);
}
}
@media screen and (min-width: 421px) and (max-width: 440px) {
.logo {
transform: scale(0.25) translateX(220vw) translateY(55vh);
}
}
@media screen and (min-width: 396px) and (max-width: 420px) {
.logo {
transform: scale(0.25) translateX(230vw) translateY(62vh);
}
}
@media screen and (min-width: 371px) and (max-width: 395px) {
.logo {
transform: scale(0.25) translateX(250vw) translateY(68vh);
}
}
@media screen and (min-width: 351px) and (max-width: 370px) {
.logo {
transform: scale(0.25) translateX(265vw) translateY(70vh);
}
}
@media screen and (min-width: 330px) and (max-width: 350px) {
.logo {
transform: scale(0.25) translateX(288vw) translateY(72vh);
}
}
.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;
}*/