#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;



}*/