body {
	margin: 0;
	padding: 0;
	background-color: black;
	overflow: hidden;
	width: 100%;
	height: 100%;
	scrollbar-width: none;
}



/*        *, *:before, *:after {



      box-sizing: border-box;



      margin: 0;



      padding: 0;



    }*/



    ::-webkit-scrollbar {
 display: none;
}
@font-face {
	font-family: zcoolBold;
	src: url(../fonts/zcoolbold.ttf);
}
@font-face {
	font-family: sht;
	src: url(../fonts/sht.ttf);
}
@font-face {
	font-family: siyuanHeavy;
	src: url(../fonts/siyuan-heavy.otf);
}
#menuBackground {
	background-color: black;
	width: 100vw;
	height: 100vh;
	position: absolute;
	margin: 0;
	z-index: 1;/*box-shadow: 0 0 5px 10px ;*/



}
.demo {
	z-index: 2;
	width: 100vw;
	height: 100vh;
	display: flex;
	/*align-items: center;*/



      /*justify-content: center;*/



	position: fixed;
	background-color: transparent;
	overflow: hidden;
}
.demo__svg {
	flex-shrink: 0;
	fill: transparent;
	stroke: #fff;
	stroke-width: 1px;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 100%;
	height: 100%;
	justify-content: center;
	z-index: 2; /* Adjust the z-index as needed */
}
.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;
}
.imageWrapper {
	width: 100vw;
	height: 85vh;
	top: 20vh;
	position: fixed;
	background-color: white;
	margin: 0;
	z-index: 0;/*display: flex;*/



        /*justify-content: center;*/



}
.mainImages {
	width: 100vw;
	/*display: inline-block;*/



	margin: auto;
	transition: all 1s ease;
	vertical-align: middle;
	top: 0;
	left: 0;
	transform: translate(0, -30%);
	position: absolute;
	/*height: 100%;*/



        /*position: absolute;*/



	z-index: 2;
}
.menu {
	position: fixed;
	z-index: 9999;
	width: 100%;
	height: 13vh;
	margin: 0;
	left: 0;
	top: 0;
	background-image: linear-gradient(grey, transparent);
}
#menulogo {
	width: 7em;
	left: 3vw;
	position: absolute;
}
.menulist {
	position: absolute;
	list-style-type: none;
	margin: 0;
	/*padding-left: 30vw;*/



	top: 2vh;
	right: 8vw;
	overflow: hidden;
	background-color: transparent;
	/*width: 60vw;*/



	height: 13vh;
}
.catagory {
	float: left;
}
.catagory a {
	text-decoration: none;
	text-align: center;
	color: white;
	padding: 1.5vw;
	font-family: zcoolBold;
}
#container {
	background-color: black;
	width: 100%;
	height: 200vh;
	position: absolute;
	left: 0;
	top: 0;
	margin: 0;
}
#fg {
	left: 0;
	width: 110vw;
	/*transform: translate(-50%,-30%);*/



	z-index: 5;
}
#bg {
	position: fixed;
	width: 100%;
	height: 100%;
	margin: 0;
	top: 0;
	left: 0;
	/*background-image: linear-gradient(#99dde9,#c19f8e);*/



	background-image: linear-gradient(#99b9ba, black);
}
#bg1 {
	position: fixed;
	background-color: white;
	/*background-image: linear-gradient(black, grey);*/



	width: 100%;
	height: 100%;
	margin: 0;
	top: 0;
	left: 0;
	opacity: 0;/*display: none;*/



}
 @keyframes fadeIn {
 0% {
opacity: 0;
}
 100% {
opacity: 1;
}
}
.spin {
	display: block;
	width: 100%;
	/*height: 30vh;*/



	letter-spacing: 0.2em;
	position: fixed;
	left: -15vw;
	z-index: 4;
}
.spin text {
	transform-origin: 50% 50%;
	font-family: zcoolBold;
	fill: white;
}
#spin1 {
	height: 15vh;
	top: 32vh;
	animation: rotate 15s linear infinite;
}
#spin2 {
	height: 30vh;
	top: 24vh;
	animation: rotatereverse 15s linear infinite;
}
#spin3 {
	height: 48vh;
	top: 14vh;
	animation: rotate 15s linear infinite;
}
#spin4 {
	height: 75vh;
	top: 1vh;
	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: 100vh;
	opacity: 1;
	background-color: white;
	z-index: 99;
	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;



}*/