*,

*::after,

*::before {

	box-sizing: border-box;

}



html {

	background: #000;

}



body {

	font-family: 'Source Sans Pro', Avenir, 'Helvetica Neue', Helvetica, Arial, sans-serif;

	min-height: 100vh;

	color: #57585c;

	color: var(--color-text);	

	background-color: #fff;

	-webkit-font-smoothing: antialiased;

	-moz-osx-font-smoothing: grayscale;

}





.demo-2 {

	--color-text: #fff;

	--color-bg: #333;

	--color-link: #fff;

	--color-link-hover: #f44e5e;

	--color-info: #fff;

	--color-main-bg: #efcb7b;

	--path-fill-1: #dce3f1;

	--path-fill-2: #0e4a3fab;

	--path-fill-3: #0c3b32de;

	--path-fill-4: #0C3B32;

	--color-title: #fff;

	--font-family-title: inherit;

	--font-size-title: 6vmax;

	--font-weight-title: 200;

	--color-menu: #fff;

	--color-menu-hover: #fff;

	--font-size-menu: 5vmax;

	--font-weight-menu: 200;

	--button-bg: #fff;

	--button-circle: #fff;

	--button-line: #222;

}



.demo-3 {

	--color-text: #fbd54a;

	--color-bg: #333;

	--color-link: #4d4f5f;

	--color-link-hover: #bfb5b5;

	--color-info: #fff;

	--color-main-bg: #24262d;

	--path-fill-1: #dce3f1;

	--path-fill-2: #0e4a3fab;

	--path-fill-3: #0c3b32de;

	--path-fill-4: #0C3B32;

	--color-title: #fff;

	--font-size-title: 5vmax;

	--font-weight-title: 200;

	--color-menu: #000000;

	--color-menu-hover: #fff;

	--font-size-menu: 5vmax;

	--font-weight-menu: 400;

	--button-bg: #fff;

	--button-circle: #fff;

	--button-line: #222;

}



.demo-6 {

	--color-text: #120047;

	--color-bg: #333;

	--color-link: #110046;

	--color-link-hover: #e83779;

	--color-info: #fff;

	--color-main-bg: #7115d8;

	--path-fill-1: #dce3f1;

	--path-fill-2: #0e4a3fab;

	--path-fill-3: #0c3b32de;

	--path-fill-4: #0C3B32;

	--color-title: inherit;

	--font-size-title: 8vmax;

	--font-weight-title: 400;

	--color-menu: #ffffff;

	--color-menu-hover: #c14343;

	--font-size-menu: 5vmax;

	--font-weight-menu: 400;

	--button-bg: #fff;

	--button-circle: #fff;

	--button-line: #222;

}



/* Fade effect */

.js body {

	opacity: 0;

	transition: opacity 0.3s;		

}



.js body.render {

	opacity: 1;

}



 .global-menu {

	width: 100vw;

	height: 100vh;

	display: flex;

	justify-content: center;

	align-items: center;

	position: fixed;

	top: 0;

	left: 0;

	pointer-events: none;

	z-index: 100;

	transition-delay: 0s;

}



.global_menu_caligraphy{

	mix-blend-mode: plus-lighter;

	position: relative;

	z-index: 99;

}



.global_menu_caligraphy_overlay{

	background-image: url('../../images/caligraphy.png');

	background-size: contain;

	background-position: center center;

	background-repeat: no-repeat;

	position: fixed;

	top: 0;

	left: 0;

	right: 0;

	width: 100%;

	height: 100%;

	opacity: 0;

	visibility: hidden;

	transition: all ease-in-out 0.25s;

	transition-delay: 0s;

}

.global_menu_caligraphy_overlay.is-opened {

	opacity: 1;

	transition: all ease-in-out 0.85s;

	transition-delay: 1s;

	visibility: visible;

}



.global-menu__overlay {

	width: 33%;

	text-align: center;

	position: absolute;

	left: 50%;

	top: 50%;

	transform: translate(-50%, -50%);

}



.global-menu__overlay .cs_shape_circle {

	position: relative;

	display: flex;

	justify-content: center;

	align-items: center;

	visibility: hidden;

	opacity: 0;

	transition: all ease-in-out 0.25s;

	transition-delay: 0s;

}

.global-menu__overlay .cs_shape_circle.is-opened{

	visibility: visible;

	opacity: 1;

	transition: all ease-in-out 0.85s;

	transition-delay: 0.9s;

}



.global-menu__overlay .cs_shape_circle .logo-icon {

	position: absolute;

	width: 74px;

	height: 71px;

	display: flex;

	justify-content: center;

	align-content: center;

}



.mobile-menu-btn {

	visibility: hidden;

	opacity: 0;

	transition: all ease-in-out 0.25s;

	transition-delay: 0s;

}

.mobile-menu-btn.is-opened {

	pointer-events: auto;

	visibility: visible;

	opacity: 1;

	transition: all ease-in-out 0.85s;

	transition-delay: 0.9s;

}



.global-menu__item {

	color: #fff;

	font-size: var(--font-size-menu);

	font-weight: var(--font-weight-menu);

	opacity: 0;

	transform: translateY(-100%);

	pointer-events: none;

	display: block;

	transition: transform 0.3s, opacity 0.3s;

	transition-timing-function: ease-in;

}



.global-menu__wrap {

	display: flex;

	justify-content: space-between;

	align-items: center;

}

.menu-items {

	width: 30%;

}



.text_hover_animaiton:hover {

	--y: -8px;

}

.menu-text {

	display: -webkit-box;

	display: -ms-flexbox;

	overflow: hidden;

	text-shadow: 0 16px 0 var(--colorPrimary);

	display: flex;

}



.global-menu__item--demo-2:nth-child(odd) {

	transform: translateY(-100%) rotate(10deg);

}



.global-menu__item--demo-2:nth-child(even) {

	transform: translateY(-100%) rotate(-10deg);

}



.global-menu__item--demo-3 {

	transition: transform 0.1s, opacity 0.1s;

	transform: translateY(100%);

	transition-timing-function: ease-out;

}



.global-menu__item--demo-4,

.global-menu__item--demo-5 {

	transition: transform 0.1s, opacity 0.1s;

	transition-timing-function: ease-out;

}



.global-menu__item--demo-4 {

	transform: translateX(40%);

}



.global-menu__item--demo-5:nth-child(odd) {

	transform: translateX(100%) rotate(10deg) scale(0.5);

}



.global-menu__item--demo-5:nth-child(even) {

	transform: translateX(100%) rotate(-10deg) scale(0.5);

}



.global-menu__item--demo-6 {

	transform: translateY(100%);

}



.global-menu__item:hover {

	color: var(--taraana-base-color);

	transition: all ease-in-out 0.3s;

	transition-delay: .1s !important;
}



.global-menu__item.is-opened {

	opacity: 1;

	transform: translateY(0) rotate(0);

	pointer-events: auto;

	transition-timing-function: ease;

}



.global-menu__item--demo-4.is-opened,

.global-menu__item--demo-5.is-opened {

	transform: translateX(0) rotate(0);

}



.global-menu__item--demo-4.is-opened {

	transition-timing-function: cubic-bezier(0.230, 1.000, 0.355, 1.400);

}



.global-menu__item:nth-of-type(1) {

	transition-delay: 0s;

}



.global-menu__item.is-opened:nth-of-type(1) {

	transition-delay: 0.85s;

}



.global-menu__item:nth-of-type(2) {

	transition-delay: 0.05s;

}



.global-menu__item.is-opened:nth-of-type(2) {

	transition-delay: 0.8s;

}



.global-menu__item:nth-of-type(3) {

	transition-delay: 0.1s;

}



/* .global-menu__item.is-opened:nth-of-type(3) {

	transition-delay: 0.75s;

} */



.global-menu__item:nth-of-type(4) {

	transition-delay: 0.15s;

}



.global-menu__item.is-opened:nth-of-type(4) {

	transition-delay: 0.7s;

}



/* demo 2 */

.global-menu__item--demo-2:nth-of-type(1) {

	transition-delay: 0s;

}



.global-menu__item--demo-2.is-opened:nth-of-type(1) {

	transition-delay: 0.85s;

}



.global-menu__item--demo-2:nth-of-type(2) {

	transition-delay: 0.05s;

}



.global-menu__item--demo-2.is-opened:nth-of-type(2) {

	transition-delay: 0.8s;

}



.global-menu__item--demo-2:nth-of-type(3) {

	transition-delay: 0.1s;

}



.global-menu__item--demo-2.is-opened:nth-of-type(3) {

	transition-delay: 0.75s;

}



.global-menu__item--demo-2:nth-of-type(4) {

	transition-delay: 0.15s;

}



.global-menu__item--demo-2.is-opened:nth-of-type(4) {

	transition-delay: 0.7s;

}



/* demo 3 */

.global-menu__item--demo-3.is-opened {

	transition-duration: 0.3s;

}



.global-menu__item--demo-3:nth-of-type(1) {

	transition-delay: 0s;

}



.global-menu__item--demo-3.is-opened:nth-of-type(1) {

	transition-delay: 0.65s;

}



.global-menu__item--demo-3:nth-of-type(2) {

	transition-delay: 0s;

}



.global-menu__item--demo-3.is-opened:nth-of-type(2) {

	transition-delay: 0.7s;

}



.global-menu__item--demo-3:nth-of-type(3) {

	transition-delay: 0s;

}



.global-menu__item--demo-3.is-opened:nth-of-type(3) {

	transition-delay: 0.75s;

}



.global-menu__item--demo-3:nth-of-type(4) {

	transition-delay: 0s;

}



.global-menu__item--demo-3.is-opened:nth-of-type(4) {

	transition-delay: 0.8s;

}



/* demo 4 */

.global-menu__item--demo-4.is-opened {

	transition-duration: 0.6s;

}



.global-menu__item--demo-4:nth-of-type(1) {

	transition-delay: 0s;

}



.global-menu__item--demo-4.is-opened:nth-of-type(1) {

	transition-delay: 0.45s;

}



.global-menu__item--demo-4:nth-of-type(2) {

	transition-delay: 0.05s;

}



.global-menu__item--demo-4.is-opened:nth-of-type(2) {

	transition-delay: 0.5s;

}



.global-menu__item--demo-4:nth-of-type(3) {

	transition-delay: 0.1s;

}



.global-menu__item--demo-4.is-opened:nth-of-type(3) {

	transition-delay: 0.55s;

}



.global-menu__item--demo-4:nth-of-type(4) {

	transition-delay: 0.15s;

}



.global-menu__item--demo-4.is-opened:nth-of-type(4) {

	transition-delay: 0.6s;

}



/* demo 5 */

.global-menu__item--demo-5.is-opened {

	transition-duration: 0.4s;

}



.global-menu__item--demo-5:nth-of-type(1) {

	transition-delay: 0s;

}



.global-menu__item--demo-5.is-opened:nth-of-type(1) {

	transition-delay: 0.55s;

}



.global-menu__item--demo-5:nth-of-type(2) {

	transition-delay: 0.05s;

}



.global-menu__item--demo-5.is-opened:nth-of-type(2) {

	transition-delay: 0.6s;

}



.global-menu__item--demo-5:nth-of-type(3) {

	transition-delay: 0.1s;

}



.global-menu__item--demo-5.is-opened:nth-of-type(3) {

	transition-delay: 0.65s;

}



.global-menu__item--demo-5:nth-of-type(4) {

	transition-delay: 0.15s;

}



.global-menu__item--demo-5.is-opened:nth-of-type(4) {

	transition-delay: 0.7s;

}



/* demo 6 */

.global-menu__item--demo-6.is-opened {

	transition-duration: 0.8s;

}



.global-menu__item--demo-6:nth-of-type(1) {

	transition-delay: 0.25s;

}



.global-menu__item--demo-6.is-opened:nth-of-type(1) {

	transition-delay: 1s;

}



.global-menu__item--demo-6:nth-of-type(2) {

	transition-delay: 0.2s;

}



.global-menu__item--demo-6.is-opened:nth-of-type(2) {

	transition-delay: 1.1s;

}



.global-menu__item--demo-6:nth-of-type(3) {

	transition-delay: 0.15s;

}



.global-menu__item--demo-6.is-opened:nth-of-type(3) {

	transition-delay: 1.2s;

}



.global-menu__item--demo-6:nth-of-type(4) {

	transition-delay: 0.1s;

}



.global-menu__item--demo-6.is-opened:nth-of-type(4) {

	transition-delay: 1.3s;

}



.shape-overlays {

	width: 100vw;

	height: 100vh;

	pointer-events: none;

	position: fixed;

	top: 0;

	left: 0;

	z-index: 98;

}



.shape-overlays.is-opened {

	pointer-events: auto;

	z-index: 98;

}



.shape-overlays__path:nth-of-type(1) {

	fill: var(--path-fill-1);

}



.shape-overlays__path:nth-of-type(2) {

	fill: var(--path-fill-2);

}



.shape-overlays__path:nth-of-type(3) {

	fill: var(--path-fill-3);

}



.shape-overlays__path:nth-of-type(4) {

	fill: var(--path-fill-4);

}



@-webkit-keyframes intervalHamburgerBorder {

	0% {

		opacity: 1;

		-webkit-transform: scale(1);

		transform: scale(1);

	}

	80% {

		-webkit-transform: scale(1.6);

		transform: scale(1.6);

	}

	100% {

		opacity: 0;

		-webkit-transform: scale(1.6);

		transform: scale(1.6);

	}

}



@keyframes intervalHamburgerBorder {

	0% {

		opacity: 1;

		-webkit-transform: scale(1);

		transform: scale(1);

	}

	80% {

		-webkit-transform: scale(1.6);

		transform: scale(1.6);

	}

	100% {

		opacity: 0;

		-webkit-transform: scale(1.6);

		transform: scale(1.6);

	}

}



.hamburger {

	width: 64px;

	height: 64px;

	display: block;

	position: relative;

	cursor: pointer;

	position: absolute;

	/* top: 2.25em;

	right: 2.25em; */

	z-index: 110;

	border-radius: 50%;

	background-color: var(--button-bg);

	pointer-events: auto;

	-webkit-tap-highlight-color: rgba(0,0,0,0);

	z-index: 99;

}



.hamburger::after {

	width: 64px;

	height: 64px;

	box-sizing: border-box;

	content: '';

	display: block;

	position: absolute;

	top: 0;

	left: 0;

	pointer-events: none;

	border: 4px solid var(--button-circle);

	border-radius: 50%;

	-webkit-animation-duration: 1.2s;

	animation-duration: 1.2s;

	-webkit-animation-name: intervalHamburgerBorder;

	animation-name: intervalHamburgerBorder;

	-webkit-animation-iteration-count: infinite;

	animation-iteration-count: infinite;

}



.hamburger__line {

	width: 28px;

	height: 2px;

	overflow: hidden;

	position: absolute;

	z-index: 10;

}



.hamburger__line-in {

	width: 84px;

	height: 2px;

	position: absolute;

	top: 0;

	left: 0;

}



.hamburger__line-in::before,

.hamburger__line-in::after {

	width: 28px;

	height: 2px;

	content: '';

	display: block;

	position: absolute;

	top: 0;

	background-color: var(--button-line);

}



.hamburger__line-in::before {

	left: -56px;

}



.hamburger__line-in::after {

	left: 0;

}



.hamburger__line--01,

.hamburger__line--02,

.hamburger__line--03,

.hamburger__line--cross01,

.hamburger__line--cross02 {

	left: 18px;

}



.hamburger__line--01 {

	top: 24.6px;

}



.hamburger__line--02,

.hamburger__line--cross01,

.hamburger__line--cross02 {

	top: 31px;

}



.hamburger__line--03 {

	top: 37.4px;

}



.hamburger__line--cross01 {

	-webkit-transform: rotate(45deg);

	transform: rotate(45deg);

}



.hamburger__line--cross02 {

	-webkit-transform: rotate(-45deg);

	transform: rotate(-45deg);

}



.hamburger__line {

	-webkit-transition-duration: 0.6s;

	transition-duration: 0.6s;

	-webkit-transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);

	transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);

}



.hamburger__line-in {

	-webkit-transition-duration: 0.6s;

	transition-duration: 0.6s;

	-webkit-transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);

	transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);

}



.hamburger__line-in::before,

.hamburger__line-in::after {

	-webkit-transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);

	transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);

	-webkit-transition-property: -webkit-transform;

	transition-property: -webkit-transform;

	transition-property: transform;

	transition-property: transform, -webkit-transform;

}



.hamburger__line-in--cross01,

.hamburger__line-in--cross02 {

	-webkit-transform: translateX(-33.3%);

	transform: translateX(-33.3%);

}



.hamburger__line-in--01 {

	-webkit-transition-delay: 0.2s;

	transition-delay: 0.2s;

}



.hamburger__line-in--02 {

	-webkit-transition-delay: 0.25s;

	transition-delay: 0.25s;

}



.hamburger__line-in--02::before,

.hamburger__line-in--02::after {

	-webkit-transition-delay: 0.05s;

	transition-delay: 0.05s;

}



.hamburger__line-in--03 {

	-webkit-transition-delay: 0.3s;

	transition-delay: 0.3s;

}



.hamburger__line-in--03::before,

.hamburger__line-in--03::after {

	-webkit-transition-delay: 0.1s;

	transition-delay: 0.1s;

}



.hamburger__line-in--cross01 {

	-webkit-transition-delay: 0.0s;

	transition-delay: 0.0s;

}



.hamburger__line-in--cross02 {

	-webkit-transition-delay: 0.05s;

	transition-delay: 0.05s;

}



.hamburger__line-in--cross02::before,

.hamburger__line-in--cross02::after {

	-webkit-transition-delay: 0.1s;

	transition-delay: 0.1s;

}



.hamburger.is-opened-navi .hamburger__line-in--01,

.hamburger.is-opened-navi .hamburger__line-in--02,

.hamburger.is-opened-navi .hamburger__line-in--03 {

	-webkit-transform: translateX(33.3%);

	transform: translateX(33.3%);

}



.hamburger.is-opened-navi .hamburger__line-in--cross01,

.hamburger.is-opened-navi .hamburger__line-in--cross02 {

	-webkit-transform: translateX(0);

	transform: translateX(0);

}



.hamburger.is-opened-navi .hamburger__line-in--01 {

	-webkit-transition-delay: 0s;

	transition-delay: 0s;

}



.hamburger.is-opened-navi .hamburger__line-in--02 {

	-webkit-transition-delay: 0.05s;

	transition-delay: 0.05s;

}



.hamburger.is-opened-navi .hamburger__line-in--03 {

	-webkit-transition-delay: 0.1s;

	transition-delay: 0.1s;

}



.hamburger.is-opened-navi .hamburger__line-in--cross01 {

	-webkit-transition-delay: 0.25s;

	transition-delay: 0.25s;

}



.hamburger.is-opened-navi .hamburger__line-in--cross02 {

	-webkit-transition-delay: 0.3s;

	transition-delay: 0.3s;

}



.hamburger:hover .hamburger__line-in::before,

.hamburger:hover .hamburger__line-in::after {

	-webkit-transform: translateX(200%);

	transform: translateX(200%);

}



.hamburger:hover .hamburger__line-in--01::before,

.hamburger:hover .hamburger__line-in--01::after,

.hamburger:hover .hamburger__line-in--02::before,

.hamburger:hover .hamburger__line-in--02::after,

.hamburger:hover .hamburger__line-in--03::before,

.hamburger:hover .hamburger__line-in--03::after {

	-webkit-transition-duration: 1s;

	transition-duration: 1s;

}



.hamburger:hover .hamburger__line-in--cross01::before,

.hamburger:hover .hamburger__line-in--cross01::after,

.hamburger:hover .hamburger__line-in--cross02::before,

.hamburger:hover .hamburger__line-in--cross02::after {

	-webkit-transition-duration: 0s;

	transition-duration: 0s;

}



.hamburger.is-opened-navi:hover .hamburger__line-in--cross01::before,

.hamburger.is-opened-navi:hover .hamburger__line-in--cross01::after,

.hamburger.is-opened-navi:hover .hamburger__line-in--cross02::before,

.hamburger.is-opened-navi:hover .hamburger__line-in--cross02::after {

	-webkit-transition-duration: 1s;

	transition-duration: 1s;

}



.hamburger.is-opened-navi:hover .hamburger__line-in--01::before,

.hamburger.is-opened-navi:hover .hamburger__line-in--01::after,

.hamburger.is-opened-navi:hover .hamburger__line-in--02::before,

.hamburger.is-opened-navi:hover .hamburger__line-in--02::after,

.hamburger.is-opened-navi:hover .hamburger__line-in--03::before,

.hamburger.is-opened-navi:hover .hamburger__line-in--03::after {

	-webkit-transition-duration: 0s;

	transition-duration: 0s;

}



.global-menu__wrap .global-menu__right span {

	text-align: center;

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

	-webkit-text-stroke-color:  rgba(119, 234, 84, 0.2);

	font-family: Kanit;

	font-size: 90px;

	font-style: normal;

	font-weight: 600;

	line-height: normal;

	letter-spacing: 10.8px;

	text-transform: uppercase;

}



.global-menu__wrap .global-menu__right {

	transform: rotate(90deg) translateY(-180%);

}





@media screen and (max-width: 55em) {

	html,

	body {

		overflow-x: hidden;

		width: 100vw;

		height: 100%;

	}

	.hamburger {

		position: fixed;

		top: 0.5em;

		right: 0.5em;

		transform: scale(0.75);

	}

}



@media screen and (max-width: 1199px) {

	.global-menu__wrap .global-menu__right {

		transform: rotate(90deg) translateY(-150%);

	}

}