@font-face {
	font-family: 'Noticia';
	src: url("../fonts/NoticiaText-Regular.ttf");
	font-weight: normal;
	font-style: normal
}

@font-face {
	font-family: 'Noticia';
	src: url("../fonts/NoticiaText-Italic.ttf");
	font-weight: normal;
	font-style: italic
}

@font-face {
	font-family: 'Rubik';
	font-weight: 500;
	font-style: normal;
	src: url("../fonts/Rubik-500.eot");
	src: url("../fonts/Rubik-500d41d.eot?#iefix") format("embedded-opentype"), local("../fonts/Rubik Medium"), local("../fonts/Rubik-500"), url("../fonts/Rubik-500.woff2") format("woff2"), url("../fonts/Rubik-500.woff") format("woff"), url("../fonts/Rubik-500.ttf") format("truetype"), url("../fonts/Rubik-500.svg#Rubik") format("svg")
}

@font-face {
	font-family: 'Rubik';
	font-weight: 700;
	font-style: normal;
	src: url("../fonts/Rubik-700.eot");
	src: url("../fonts/Rubik-700d41d.eot?#iefix") format("embedded-opentype"), local("../fonts/Rubik Bold"), local("../fonts/Rubik-700"), url("../fonts/Rubik-700.woff2") format("woff2"), url("../fonts/Rubik-700.woff") format("woff"), url("../fonts/Rubik-700.ttf") format("truetype"), url("../fonts/Rubik-700.svg#Rubik") format("svg")
}

@font-face {
	font-family: 'Teko';
	font-weight: 400;
	font-style: normal;
	src: local("Teko Regular"), local("Teko-400"), url("../fonts/Teko-Regular.ttf") format("truetype")
}

@font-face {
	font-family: 'Teko';
	font-weight: 500;
	font-style: normal;
	src: local("Teko Medium"), local("Teko-500"), url("../fonts/Teko-Medium.woff2") format("woff2"), url("../fonts/Teko-Medium.woff") format("woff"), url("../fonts/Teko-Medium.ttf") format("truetype")
}

@font-face {
	font-family: 'Work';
	font-weight: 500;
	font-style: normal;
	src: local("Teko Medium"), local("Teko-500"), url("../fonts/Teko-Medium.woff2") format("woff2"), url("../fonts/Teko-Medium.woff") format("woff"), url("../fonts/Teko-Medium.ttf") format("truetype")
}

@keyframes example {
	100% {
		left: -50%
	}
	30% {
		left: -50%
	}
	0% {
		left: 100%
	}
}

@keyframes mask {
	100% {
		-webkit-mask-position-x: 100%
	}
	0% {
		-webkit-mask-position-x: 0%
	}
}

@keyframes hand {
	50% {
		transform: translateY(30px)
	}
	0% {
		transform: translateY(0px)
	}
}

@keyframes fade {
	50% {
		opacity: 1
	}
	0% {
		opacity: 0
	}
}

@keyframes flicker {
	14% {
		opacity: 1
	}
	13% {
		opacity: 0
	}
	12% {
		opacity: 1
	}
	11% {
		opacity: 0
	}
	10% {
		opacity: 1
	}
}

@font-face {
	font-family: 'Noticia';
	src: url("../fonts/NoticiaText-Regular.ttf");
	font-weight: normal;
	font-style: normal
}

@font-face {
	font-family: 'Noticia';
	src: url("../fonts/NoticiaText-Italic.ttf");
	font-weight: normal;
	font-style: italic
}

@font-face {
	font-family: 'Rubik';
	font-weight: 500;
	font-style: normal;
	src: url("../fonts/Rubik-500.eot");
	src: url("../fonts/Rubik-500d41d.eot?#iefix") format("embedded-opentype"), local("../fonts/Rubik Medium"), local("../fonts/Rubik-500"), url("../fonts/Rubik-500.woff2") format("woff2"), url("../fonts/Rubik-500.woff") format("woff"), url("../fonts/Rubik-500.ttf") format("truetype"), url("../fonts/Rubik-500.svg#Rubik") format("svg")
}

@font-face {
	font-family: 'Rubik';
	font-weight: 700;
	font-style: normal;
	src: url("../fonts/Rubik-700.eot");
	src: url("../fonts/Rubik-700d41d.eot?#iefix") format("embedded-opentype"), local("../fonts/Rubik Bold"), local("../fonts/Rubik-700"), url("../fonts/Rubik-700.woff2") format("woff2"), url("../fonts/Rubik-700.woff") format("woff"), url("../fonts/Rubik-700.ttf") format("truetype"), url("../fonts/Rubik-700.svg#Rubik") format("svg")
}

@font-face {
	font-family: 'Teko';
	font-weight: 400;
	font-style: normal;
	src: local("Teko Regular"), local("Teko-400"), url("../fonts/Teko-Regular.ttf") format("truetype")
}

@font-face {
	font-family: 'Teko';
	font-weight: 500;
	font-style: normal;
	src: local("Teko Medium"), local("Teko-500"), url("../fonts/Teko-Medium.woff2") format("woff2"), url("../fonts/Teko-Medium.woff") format("woff"), url("../fonts/Teko-Medium.ttf") format("truetype")
}

@font-face {
	font-family: 'Work';
	font-weight: 500;
	font-style: normal;
	src: local("Teko Medium"), local("Teko-500"), url("../fonts/Teko-Medium.woff2") format("woff2"), url("../fonts/Teko-Medium.woff") format("woff"), url("../fonts/Teko-Medium.ttf") format("truetype")
}

@keyframes example {
	100% {
		left: -50%
	}
	30% {
		left: -50%
	}
	0% {
		left: 100%
	}
}

@keyframes mask {
	100% {
		-webkit-mask-position-x: 100%
	}
	0% {
		-webkit-mask-position-x: 0%
	}
}

@keyframes hand {
	50% {
		transform: translateY(30px)
	}
	0% {
		transform: translateY(0px)
	}
}

@keyframes fade {
	50% {
		opacity: 1
	}
	0% {
		opacity: 0
	}
}

@keyframes flicker {
	14% {
		opacity: 1
	}
	13% {
		opacity: 0
	}
	12% {
		opacity: 1
	}
	11% {
		opacity: 0
	}
	10% {
		opacity: 1
	}
}

body.tech .project-content .studio-wrap .scene .split-left {
	background-color: #0f0f10
}

body.tech .project-content .studio-wrap .scene .split-right {
	background-color: #161618
}

body.tech .project-content .studio-wrap .scene .split-right>div {
	position: absolute;
	left: 50%;
	top: 50%;
	height: 0
}

body.tech .project-content .studio-wrap .scene .split-right>div>img {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%
}

body.tech .project-content .studio-wrap .scene .split-right .parallax-1 {
	padding-top: 80%;
	width: 113%;
	margin-left: -70%;
	margin-top: -50%
}

body.tech .project-content .studio-wrap .scene .split-right .parallax-2 {
	margin-left: -10%;
	margin-top: -30%;
	width: 43%;
	padding-top: 60%
}

body.tech .project-content .studio-wrap .scene .split-right .parallax-3 {
	margin-left: -32%;
	margin-top: -33.7%;
	width: 54%;
	padding-top: 60%
}

body.tech .project-content .studio-wrap .scene .split-right .parallax-4 {
	left: 23.7%;
	top: 50%;
	margin-top: -13.7%;
	width: 19.4%;
	padding-top: 44%
}

body.tech .project-content .studio-wrap .scene .split-left {
	background-color: #342530
}

body.tech .project-content .studio-wrap .scene .split-right {
	background-color: #dfd8d4
}

body.tech .project-content .studio-wrap .scene.variant>div {
	background-color: #f9c474
}

body.tech .project-content .studio-wrap .scene.variant>div .text-title small {
	color: #f1e5e3
}

body.tech .project-content .studio-wrap .scene.variant>div .text-title h2 {
	color: #2c1f27
}

body.tech .project-content .studio-wrap .scene.variant>div .text-content {
	color: #2c1f27
}

body.tech .project-content .studio-wrap .scene .text-content {
	color: #f2ebe5
}

body.tech .project-content .studio-wrap .scene .parallax-1 {
	background-color: #f2ebe5;
	width: 65%;
	height: 0;
	overflow: hidden;
	padding-top: 40%;
	left: 17.5%;
	top: 50%;
	z-index: 1;
	margin-top: -20%;
	position: absolute;
	transform: rotate(15deg);
	transform-origin: center
}

body.tech .project-content .studio-wrap .scene .parallax-1>div {
	position: absolute;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 120%;
	top: -10%;
	left: -10%;
	width: 120%;
	transform: rotate(-15deg)
}

body.tech .project-content .studio-wrap .scene .parallax-2 {
	left: 14%;
	top: 58%;
	position: absolute;
	z-index: 1
}

body.tech .project-content .studio-wrap .scene .parallax-3 {
	right: 15%;
	top: 70%;
	position: absolute;
	z-index: 1
}

body.tech .project-content .studio-wrap .scene .parallax-4 {
	top: 20%;
	position: absolute;
	z-index: 1;
	left: 20%
}

body.tech .project-content .studio-wrap .scene .parallax-5 {
	background-color: #d0c6c0;
	width: 65%;
	height: 0;
	overflow: hidden;
	padding-top: 40%;
	left: 19.5%;
	top: 54%;
	margin-top: -20%;
	position: absolute;
	z-index: 0;
	transform: rotate(15deg);
	transform-origin: center
}

body.tech .project-content .studio-wrap .scene .parallax-6 {
	position: absolute;
	left: 17.5%;
	top: 50%;
	z-index: 0;
	margin-top: -24%;
	width: 50%;
	height: 0;
	padding-top: 30%;
	transform: rotate(15deg)
}

body.tech .project-content .studio-wrap .scene .parallax-6::before {
	width: 100%;
	height: 1px;
	background-color: #d0c6c0;
	content: "";
	position: absolute;
	left: -10%;
	top: 0
}

body.tech .project-content .studio-wrap .scene .parallax-6::after {
	width: 1px;
	height: 100%;
	background-color: #d0c6c0;
	content: "";
	position: absolute;
	left: 0;
	top: -10%
}

body.non-tech.studio .project-content .studio-wrap .scene .split-left {
	background-color: #312e33;
	color: #fff
}

body.non-tech.studio .project-content .studio-wrap .scene .split-left .text-title small {
	color: #cca553
}

body.non-tech.studio .project-content .studio-wrap .scene .split-left h2 {
	color: #e8be96
}

body.non-tech.studio .project-content .studio-wrap .scene.split .split-right {
	background-color: #2b272e;
	align-items: center
}

body.non-tech.studio .project-content .studio-wrap .scene.split .split-right>div {
	position: absolute;
	width: 80%;
	max-width: 450px
}

body.non-tech.studio .project-content .studio-wrap .scene.split .split-right>div video {
	width: 100%
}

body.non-tech.studio .project-content .studio-wrap .scene.cards.split .split-left {
	background-color: #755236
}

body.non-tech.studio .project-content .studio-wrap .scene.cards.split .split-left small {
	color: #d49d81
}

body.non-tech.studio .project-content .studio-wrap .scene.cards.split .split-left h2 {
	color: #1d1f21
}

body.non-tech.studio .project-content .studio-wrap .scene.cards.split .split-right {
	overflow: hidden;
	background-color: #19181a;
	flex-wrap: nowrap
}

body.non-tech.studio .project-content .studio-wrap .scene.cards.split .split-right>div {
	top: 50%;
	left: 50%;
	position: absolute;
	margin-top: -200px;
	width: 100%;
	height: auto
}

body.non-tech.studio .project-content .studio-wrap .scene.cards.split .split-right .parallax-1 {
	margin-left: -368px
}

body.non-tech.studio .project-content .studio-wrap .scene.cards.split .split-right .parallax-2 {
	margin-left: 68px
}

body.non-tech.studio .project-content .studio-wrap .scene.cards.split .split-right .parallax-3 {
	margin-left: -153px
}

body.simon-cuchillerias.studio .project-content .studio-wrap .scene.logo-studio .split-left {
	background-color: #f3f3eb
}

body.simon-cuchillerias.studio .project-content .studio-wrap .scene.logo-studio .text-title small {
	color: #af9773
}

body.simon-cuchillerias.studio .project-content .studio-wrap .scene.logo-studio .text-content {
	color: #34332e
}

body.simon-cuchillerias.studio .project-content .studio-wrap .scene.logo-studio .split-right {
	padding: 0;
	background-color: #d8d6d3;
	display: block
}

body.simon-cuchillerias.studio .project-content .studio-wrap .scene.logo-studio .split-right>div {
	position: absolute;
	top: 50%
}

body.simon-cuchillerias.studio .project-content .studio-wrap .scene.logo-studio .split-right>div>img {
	position: absolute;
	height: 100%;
	width: 100%;
	top: 0;
	left: 0
}

body.simon-cuchillerias.studio .project-content .studio-wrap .scene.logo-studio .split-right .parallax-1 {
	width: 100%;
	padding-top: 83.2%;
	top: 50%;
	margin-top: -35%;
	left: 0
}

body.simon-cuchillerias.studio .project-content .studio-wrap .scene.logo-studio .split-right .parallax-2 {
	left: 25%;
	margin-top: -22%;
	height: 0%;
	padding-top: 9.5%;
	width: 50%
}

body.simon-cuchillerias.studio .project-content .studio-wrap .scene.logo-studio .split-right .parallax-3 {
	left: 25%;
	margin-top: -22%;
	height: 0%;
	padding-top: 7%;
	width: 50%
}

body.simon-cuchillerias.studio .project-content .studio-wrap .scene.mobile-studio .split-left {
	background-color: #34332e
}

body.simon-cuchillerias.studio .project-content .studio-wrap .scene.mobile-studio .text-title small {
	color: #f3f3eb
}

body.simon-cuchillerias.studio .project-content .studio-wrap .scene.mobile-studio .split-right {
	padding: 0;
	background: #22211f
}

body.simon-cuchillerias.studio .project-content .studio-wrap .scene.mobile-studio .split-right>div {
	position: absolute
}

body.simon-cuchillerias.studio .project-content .studio-wrap .scene.mobile-studio .split-right>div>img {
	position: absolute;
	left: 0;
	top: 0;
	height: 100%
}

body.simon-cuchillerias.studio .project-content .studio-wrap .scene.mobile-studio .split-right .parallax-4 {
	bottom: 0;
	width: 140%;
	left: -20%;
	height: 0;
	padding-top: 25%
}

body.simon-cuchillerias.studio .project-content .studio-wrap .scene.mobile-studio .split-right .parallax-3 {
	bottom: 2%;
	left: 57%;
	width: 18%;
	height: 0;
	padding-top: 60%
}

body.simon-cuchillerias.studio .project-content .studio-wrap .scene.mobile-studio .split-right .parallax-2 {
	height: 0;
	width: 42%;
	padding-top: 65%;
	left: 50%;
	margin-left: -18%;
	bottom: 5%
}

body.simon-cuchillerias.studio .project-content .studio-wrap .scene.mobile-studio .split-right .parallax-1 {
	height: 0;
	width: 51%;
	padding-top: 60%;
	left: 50%;
	margin-left: -48%;
	bottom: 5%
}

body.guild-storm.studio .project-content .studio-wrap .scene .split-left {
	background-color: #211819
}

body.guild-storm.studio .project-content .studio-wrap .scene .split-right {
	background-color: black
}

body.guild-storm.studio .project-content .studio-wrap .scene .split-right>div {
	position: absolute;
	width: 150%;
	max-width: 500px;
	align-self: center
}

body.guild-storm.studio .project-content .studio-wrap .scene .split-right>div img {
	width: 100%;
	height: auto
}

@media (max-width: 600px) {
	body.non-tech.studio .studio-next h4 {
		font-size: 30px !important
	}
}

body {
	transition: all 500ms cubic-bezier(0.47, 0, 0.745, 0.715);
	background: #171717;
	color: #4c4a4a;
	margin: 0;
	overflow: hidden;
	font-family: "Rubik", sans-serif;
	font-size: 14px;
	line-height: 20px
}

body a {
	transition: color 300ms cubic-bezier(0.47, 0, 0.745, 0.715);
	color: #969292;
	text-decoration: none;
	display: inline-block
}

body a.fractured>span {
	display: inline-block
}

body a.fractured>span span {
	display: inline-block;
	font-family: "Rubik", sans-serif;
	line-height: 20px;
	text-transform: none
}

body a:hover {
	color: #c46b6b
}

body .gradient {
	position: absolute;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
	opacity: 0.8
}

body .gradient stop {
	transition: all 500ms cubic-bezier(0.47, 0, 0.745, 0.715);
	stop-color: #171717
}

body .gradient stop:last-of-type {
	stop-color: #171717
}

body .circle-transition {
	position: absolute;
	height: 0;
	width: 0;
	border-radius: 50%;
	transform: translateX(-50%) translateY(-50%);
	left: 50%;
	top: 50%
}

body .logo {
	width: 250px;
	position: fixed;
	opacity: 1;
	z-index: 2;
	left: 80px;
	top: 60px;
	color: #969292;
	cursor: pointer
}

body .logo.revert {
	color: #f14343
}

body .logo.revert svg {
	fill: #f14343
}

@media (max-width: 1250px) {
	body .logo {
		left: 50px;
		top: 40px
	}
}

@media (max-width: 600px) {
	body .logo {
		left: 20px;
		top: 20px
	}
}

body .logo h2 {
	transition: color 500ms cubic-bezier(0.47, 0, 0.745, 0.715);
	font-size: 18px;
	font-weight: 400;
	line-height: normal;
	margin: 8px 0 0;
	display: block
}

body .logo h3 {
	transition: color 500ms cubic-bezier(0.47, 0, 0.745, 0.715);
	font-size: 11px;
	text-transform: uppercase;
	font-weight: 700;
	margin: 0;
	letter-spacing: 0.45px;
	display: none
}

body .logo svg {
	transition: all 500ms cubic-bezier(0.47, 0, 0.745, 0.715);
	fill: #969292;
	float: left;
	margin-right: 15px
}

@media (max-width: 600px) {
	body .logo h2,
	body .logo h3 {
		display: none
	}
}

@media (max-height: 500px) {
	body .logo h2,
	body .logo h3 {
		display: none
	}
}

body .mobile-menu {
	transition: fill 500ms cubic-bezier(0.47, 0, 0.745, 0.715);
	position: absolute;
	bottom: 33px;
	fill: #969292;
	left: 20px;
	z-index: 2;
	cursor: pointer;
	opacity: 0;
	visibility: hidden;
	display: none
}

@media (max-width: 600px) {
	body .mobile-menu {
		display: block
	}
}

body .menu-top {
	position: fixed;
	right: 80px;
	z-index: 10;
	top: 70px
}

@media (max-width: 1250px) {
	body .menu-top {
		right: 50px;
		top: 50px
	}
}

@media (max-width: 600px) {
	body .menu-top {
		right: 20px;
		top: 30px
	}
}

body .menu-top a {
	padding: 20px;
	padding-right: 0;
	margin-top: -20px;
	opacity: 0;
	visibility: hidden;
	transform: translateY(-10px)
}

body .menu-top a span {
	display: inline-block
}

body .mouse-track {
	pointer-events: none;
	position: absolute;
	z-index: 1000;
	opacity: 0
}

body .mouse-track .outer-circle {
	stroke: #969292;
	transform: translateX(-50%) translateY(-50%) rotate(-90deg);
	stroke-width: 2px;
	fill: none;
	height: 18px;
	width: 18px;
	overflow: visible;
	position: absolute
}

body .mouse-track .outer-circle .countdown {
	opacity: 0;
	stroke: #f14343;
	position: absolute;
	stroke-dashoffset: 125px;
	stroke-dasharray: 125px;
	stroke-width: 4px
}

body .mouse-track .inner-circle {
	stroke: #969292;
	transform: translateX(-50%) translateY(-50%);
	stroke-width: 2px;
	fill: none;
	height: 2px;
	width: 2px;
	opacity: 0.6;
	overflow: visible;
	position: absolute
}

body .mouse-track .arrow-right {
	stroke: #f14343;
	opacity: 0;
	visibility: hidden;
	stroke-width: 2px;
	transform: rotate(180deg);
	margin-left: 10px;
	margin-top: -7px;
	position: absolute
}

body .mouse-track .arrow-left {
	stroke: #f14343;
	opacity: 0;
	margin-left: -20px;
	margin-top: -6px;
	visibility: hidden;
	stroke-width: 2px;
	position: absolute
}

body .mouse-track .play {
	fill: #969292;
	opacity: 1;
	margin-top: -6px;
	stroke-width: 2px;
	margin-top: -18px;
	margin-left: -14px;
	transform: scale(0);
	position: absolute
}

body .mouse-track .stop {
	fill: #969292;
	height: 38px;
	width: 38px;
	margin-left: -19px;
	margin-top: -19px;
	transform: scale(0);
	position: absolute
}

@media (max-width: 600px) {
	body .mouse-track {
		opacity: 0 !important;
		visibility: hidden !important
	}
}

body .about-page {
	position: absolute;
	height: 100%;
	width: 100%;
	padding: 40px;
	left: 0;
	opacity: 1;
	top: 0;
	display: flex;
	flex-direction: row;
	visibility: hidden;
	align-items: stretch
}

@media (max-width: 1250px) {
	body .about-page {
		padding: 20px
	}
}

@media (max-width: 600px) {
	body .about-page {
		flex-direction: column;
		padding: 0
	}
}

body .about-page.active .neon-sign {
	animation: flicker 10s infinite
}

body .about-page.active .split-left::before {
	width: 100%;
	bottom: 0
}

body .about-page.active .split-left.shaded::after {
	opacity: 1
}

body .about-page .split-left {
	opacity: 0;
	visibility: hidden;
	overflow: hidden
}

body .about-page .split-left.shaded::after {
	content: "Swipe or Scroll and click image to know more";
	padding-right: 20px;
	line-height: 100px;
	color: #323131;
	text-align: right;
	position: absolute;
	bottom: 0;
	width: 100%;
	opacity: 0;
	transition: all 500ms cubic-bezier(0.47, 0, 0.745, 0.715);
	transition-delay: 1;
	height: 100px;
	background-color: red;
	background: linear-gradient(transparent, #14141a 50%);
	pointer-events: none
}

body .about-page .split-left::before {
	transition: all 500ms cubic-bezier(0.47, 0, 0.745, 0.715);
	content: "";
	position: absolute;
	width: 0%;
	height: 100%;
	left: 0;
	background-color: #14141a;
	z-index: -1;
	bottom: 0
}

body .about-page>* {
	position: relative;
	z-index: 1;
	flex: 0 0 50%;
	display: flex;
	align-items: center
}

body .about-page .gradient-about {
	background-color: red;
	position: absolute;
	width: 100%;
	height: 100%;
	z-index: 1;
	top: 0;
	left: 0;
	-webkit-mask-image: url("../smoke-sprite.png");
	-webkit-mask-size: 3000% 100%;
	-webkit-mask-position-x: 0%;
	animation-iteration-count: 1;
	animation-delay: 1s
}

body .about-page .gradient-about.active {
	animation: mask 1.5s steps(29) forwards
}

body .about-page .gradient-about stop {
	transition: all 500ms cubic-bezier(0.47, 0, 0.745, 0.715);
	stop-color: #292038
}

body .about-page .gradient-about stop:last-of-type {
	stop-color: #18181d
}

@media (max-width: 600px) {
	body .about-page .gradient-about stop {
		transition: all 500ms cubic-bezier(0.47, 0, 0.745, 0.715);
		stop-color: #18181d
	}
	body .about-page .gradient-about stop:last-of-type {
		stop-color: #18181d
	}
}

body .about-page .about-text {
	position: absolute;
	padding: 120px;
	padding-right: 240px
}

body .about-page .about-text h1 {
	color: #f14343;
	white-space: nowrap;
	font-weight: 500;
	display: block;
	font-family: "Teko", sans-serif;
	text-transform: uppercase;
	font-size: 40px;
	line-height: 40px;
	margin-top: 10px;
	margin-bottom: 40px
}

@media (max-width: 600px) {
	body .about-page .about-text h1 {
		font-size: 28px;
		line-height: 28px;
		margin: 0 0 20px
	}
}

body .about-page .about-text h1>span {
	display: block
}

body .about-page .about-text h1>span span {
	display: inline-block
}

body .about-page .about-text p {
	opacity: 0;
	font-size: 16px;
	line-height: 32px
}

@media (max-width: 600px) {
	body .about-page .about-text p {
		line-height: 24px
	}
}

@media (max-width: 1250px) {
	body .about-page .about-text {
		padding-left: 40px;
		padding-right: 40px
	}
}

@media (max-width: 600px) {
	body .about-page .about-text {
		padding-left: 20px;
		padding-right: 20px
	}
}

body .about-page .about-render {
	position: absolute;
	visibility: hidden;
	top: 0%;
	opacity: 0;
	right: 0;
	width: 140%;
	height: 100%;
	transform: translateY(0) scale(1);
	z-index: 1;
	pointer-events: none
}

@media (max-width: 1250px) {
	body .about-page .about-render {
		width: 100%
	}
}

@media (max-width: 600px) {
	body .about-page .about-render {
		width: 100%
	}
}

body .about-page .about-render canvas {
	position: absolute;
	transform: translateY(-50%);
	top: 50%
}

body .about-page .neon-sign {
	opacity: 0;
	height: 570px;
	width: 140%;
	position: absolute;
	text-transform: uppercase;
	font-size: 46px;
	color: #ff0054;
	right: 260px;
	top: -30px;
	transform: scale(0.5) perspective(900px) translateZ(-300px) rotateY(-10deg) rotateX(0deg) rotateZ(0deg) skewY(9deg);
	filter: blur(2px) brightness(2)
}

body .about-page .neon-sign::before {
	content: "";
	width: 410px;
	height: 100%;
	position: absolute;
	left: 100%
}

@media (max-width: 1250px) {
	body .about-page .neon-sign {
		display: none
	}
}

@media (max-width: 600px) {
	body .about-page .neon-sign {
		display: none
	}
}

body .about-page .neon-sign::after {
	content: "";
	border: 6px solid #ff0054;
	width: 210px;
	height: 100%;
	position: absolute;
	right: 0
}

body .about-page .neon-sign.var-1 {
	transform: scale(0.7) perspective(900px) rotateY(-8deg) rotateX(0deg) rotateZ(0deg) skewY(9deg) translateX(150px)
}

body .about-page .neon-sign.var-2 {
	transform: scale(0.7) perspective(900px) rotateY(-6deg) rotateX(0deg) rotateZ(0deg) skewY(6deg) translateY(6px) translateX(140px)
}

body .about-page .neon-sign>* {
	position: absolute
}

body .about-page .neon-sign .code {
	top: 40px;
	right: 42px;
	animation: flicker 5s infinite
}

body .about-page .neon-sign .and {
	top: 94px;
	color: #00e4ff;
	font-size: 80px;
	right: 70px
}

body .about-page .neon-sign .design {
	top: 145px;
	right: 19px
}

body .about-page .neon-sign .key {
	animation: fade 2s steps(1) infinite;
	animation-direction: reverse;
	bottom: 45px;
	right: 53px
}

body .about-page .neon-sign .key-pressed {
	animation: fade 2s steps(1) infinite;
	animation-direction: normal;
	bottom: 40px;
	right: 19px
}

body .about-page .neon-sign .hand {
	animation: hand 2s steps(1) infinite;
	right: 30px;
	bottom: 100px
}

body .about-page .neon-sign .key-base {
	bottom: 20px;
	right: 45px
}

body .introduction {
	position: absolute;
	background-color: #171717;
	height: 100%;
	width: 100%;
	top: 0;
	left: 0;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center
}

body .introduction .skip {
	padding: 30px;
	position: absolute;
	bottom: 50px;
	font-size: 16px;
	color: #4c4a4a;
	cursor: pointer
}

body .intro-text {
	transition: color 500ms cubic-bezier(0.47, 0, 0.745, 0.715);
	position: absolute;
	bottom: 50%;
	z-index: 1;
	width: 100%;
	padding: 0 10px;
	text-align: center;
	font-size: 24px;
	color: #969292
}

body .intro-text.tutorial {
	font-size: 16px;
	bottom: 70px
}

body .intro-text span {
	display: inline-block
}

@media (max-width: 1250px) {
	body .intro-text.tutorial {
		bottom: 40px
	}
}

@media (max-width: 600px) {
	body .intro-text {
		font-size: 16px
	}
	body .intro-text.tutorial {
		bottom: auto;
		top: 140px
	}
}

body .discover {
	opacity: 0;
	visibility: hidden;
	color: #f14343;
	position: absolute;
	bottom: 0;
	right: 0;
	height: 160px;
	width: 240px;
	z-index: 100;
	cursor: pointer
}

body .discover .open>span {
	position: absolute;
	height: 14px;
	width: 7px;
	bottom: 65px;
	right: 80px;
	transform: translateX(-80px)
}

body .discover .open>span::before {
	transition: all 300ms cubic-bezier(0.47, 0, 0.745, 0.715);
	transition-property: background-color, transform, opacity;
	transition-delay: 0s, 0.8s, 0.8s;
	content: "";
	position: absolute;
	border-radius: 10px 10px 20px 0;
	height: 8px;
	transform-origin: top left;
	width: 1.5px;
	background-color: #f14343;
	transform: rotate(-45deg) scaleY(4);
	opacity: 0
}

body .discover .open>span::after {
	transition: all 300ms cubic-bezier(0.47, 0, 0.745, 0.715);
	transition-property: background-color, transform, opacity;
	transition-delay: 0s, 1.1s, 1.1s;
	content: "";
	position: absolute;
	border-radius: 0 20px 10px 10px;
	height: 8px;
	transform-origin: bottom left;
	margin-top: 1px;
	width: 1.5px;
	background-color: #f14343;
	transform: rotate(45deg) scaleY(4);
	opacity: 0
}

body .discover .open.active>span::before {
	transform: rotate(-45deg) scaleY(1);
	opacity: 1;
	transition-delay: 0
}

body .discover .open.active>span::after {
	transform: rotate(45deg) scaleY(1);
	opacity: 1;
	transition-delay: 0
}

body .discover .close>span {
	position: absolute;
	height: 17px;
	width: 7px;
	bottom: 65px;
	right: 80px;
	transform: translateX(-57px)
}

body .discover .close>span::before {
	transition: all 300ms cubic-bezier(0.47, 0, 0.745, 0.715);
	transition-delay: 1.1s;
	content: "";
	position: absolute;
	border-radius: 5px;
	height: 15px;
	width: 2px;
	margin-left: -5px;
	margin-top: 1px;
	background-color: #f14343;
	transform-origin: top;
	transform: rotate(-45deg) scaleY(0)
}

body .discover .close>span::after {
	transition: all 300ms cubic-bezier(0.47, 0, 0.745, 0.715);
	transition-delay: 0.8s;
	content: "";
	position: absolute;
	border-radius: 5px;
	height: 15px;
	width: 2px;
	background-color: #f14343;
	transform-origin: bottom;
	margin-left: -5px;
	margin-top: -3px;
	transform: rotate(45deg) scaleY(0)
}

body .discover .close.active>span::before {
	transform: rotate(-45deg) scaleY(1);
	transition-delay: 0
}

body .discover .close.active>span::after {
	transform: rotate(45deg) scaleY(1);
	transition-delay: 0
}

body .discover .open,
body .discover .close {
	transition: all 300ms cubic-bezier(0.47, 0, 0.745, 0.715);
	height: 100%;
	position: absolute;
	width: 100%;
	left: 0;
	top: 0;
	opacity: 0
}

body .discover .open.active,
body .discover .close.active {
	opacity: 1
}

body .discover .open a span,
body .discover .close a span {
	transform: translateX(5px) translateY(5px);
	opacity: 0
}

body .discover .open.active a span,
body .discover .close.active a span {
	transform: translateX(0px) translateY(0px);
	opacity: 1
}

body .discover:hover {
	height: 200px;
	width: 300px
}

body .discover:hover a {
	color: #969292
}

body .discover:hover svg {
	stroke: #4c4a4a
}

body .discover>div>a {
	position: absolute;
	right: 80px;
	bottom: 65px
}

body .discover a span {
	position: relative;
	display: inline-block
}

@media (max-width: 1250px) {
	body .discover {
		height: 100px;
		width: 170px
	}
}

@media (max-width: 600px) {
	body .discover {
		height: 70px;
		width: 120px;
		z-index: 2
	}
	body .discover:hover {
		width: 100%;
		height: 90px
	}
}

body .line-aux {
	width: 45px;
	position: fixed;
	opacity: 1;
	height: 100px;
	left: 82px;
	bottom: 110px;
	z-index: 3;
	opacity: 0;
	visibility: hidden
}

@media (max-width: 1250px) {
	body .line-aux {
		left: 50px;
		bottom: 90px
	}
}

@media (max-width: 600px) {
	body .line-aux {
		left: 20px;
		bottom: 73px;
		visibility: hidden !important;
		opacity: 0 !important
	}
}

body .line-aux::after {
	transition: background-color 500ms cubic-bezier(0.47, 0, 0.745, 0.715);
	content: "";
	background-color: #292929;
	width: 2px;
	height: 10px;
	margin-left: -1px;
	left: 50%;
	bottom: -65px;
	position: absolute
}

body .line-aux .line {
	transition: background-color 500ms cubic-bezier(0.47, 0, 0.745, 0.715);
	width: 2px;
	background-color: #292929;
	height: 0;
	margin-left: -1px;
	left: 50%;
	margin-bottom: 10px;
	position: relative
}

@media (max-width: 600px) {
	body .line-aux .line {
		display: none
	}
}

@media (max-height: 500px) {
	body .line-aux .line {
		display: none
	}
}

body .line-aux .counter {
	transition: all 500ms cubic-bezier(0.47, 0, 0.745, 0.715);
	text-transform: uppercase;
	font-family: "Teko", sans-serif;
	font-weight: 500;
	font-size: 18px;
	color: #969292;
	height: 50px;
	width: 100px;
	overflow: hidden;
	text-align: center;
	position: absolute;
	bottom: -50px;
	left: -27px
}

body .line-aux .counter .page {
	transition: color 500ms cubic-bezier(0.47, 0, 0.745, 0.715);
	position: absolute;
	right: 50%;
	margin-right: 7px;
	bottom: 20px;
	margin-bottom: 45px;
	text-align: right
}

body .line-aux .counter .divider {
	transition: color 500ms cubic-bezier(0.47, 0, 0.745, 0.715);
	position: absolute;
	left: 50%;
	color: #f14343;
	bottom: 12px;
	transform: translateX(-50%);
	margin-bottom: 45px
}

body .line-aux .counter .total {
	transition: color 500ms cubic-bezier(0.47, 0, 0.745, 0.715);
	left: 50%;
	margin-left: 7px;
	position: absolute;
	bottom: 5px;
	margin-bottom: 45px
}

body .scroll-position {
	width: 100%;
	position: absolute;
	bottom: 0;
	height: 2px;
	opacity: 0;
	z-index: 2;
	visibility: hidden
}

body .scroll-position span {
	position: relative;
	display: block;
	width: 50%;
	background-color: #f14343;
	height: 100%
}

body .line-scroll {
	position: absolute;
	z-index: 2;
	opacity: 0;
	visibility: hidden;
	height: 45px;
	width: 140px;
	left: 500px;
	bottom: 40px;
	overflow: hidden
}

body .line-scroll>span {
	position: absolute;
	content: "";
	background-color: #f14343;
	width: 50%;
	bottom: 0px;
	top: auto !important;
	height: 2px !important;
	z-index: 1;
	animation-name: example;
	animation-duration: 4s;
	animation-iteration-count: infinite
}

body .line-scroll::after {
	content: "->";
	position: absolute;
	color: #f14343;
	margin-left: 15px
}

@media (max-width: 1250px) {
	body .line-scroll {
		left: 480px;
		bottom: 20px
	}
}

@media (max-width: 600px) {
	body .line-scroll {
		left: 20px;
		bottom: 20px;
		height: 35px
	}
}

body .fireworks-plane {
	width: 600px;
	height: 600px;
	left: 340px;
	position: absolute;
	opacity: 0;
	top: 50%;
	transform: translateX(-50%) translateY(-50%) rotateY(180deg);
	perspective: 500px;
	z-index: 1
}

@media (max-width: 1250px) {
	body .fireworks-plane {
		transform: translateX(-50%) translateY(-50%) rotateY(180deg) scale(0.6)
	}
}

@media (max-width: 600px) {
	body .fireworks-plane {
		transform: translateX(-50%) translateY(-50%) rotateY(180deg) scale(0.4);
		left: 50%
	}
}

body .firework-1 {
	position: absolute;
	top: 280px;
	left: 50px;
	overflow: visible;
	stroke: #f14343;
	stroke-width: 10px;
	stroke-dashoffset: -358;
	transform: rotateX(40deg);
	stroke-dasharray: 0, 10000;
	stroke-linecap: round
}

body .firework-1:nth-of-type(2) {
	top: 230px;
	transform: rotateZ(20deg) rotateX(40deg)
}

body .firework-2>span {
	height: 100px;
	width: 4px;
	position: absolute;
	left: 190px;
	transform-origin: bottom;
	top: 145px
}

body .firework-2>span span {
	content: "";
	height: 0;
	background-color: #f14343;
	bottom: 0;
	width: 100%;
	position: absolute;
	border-radius: 2px
}

body .firework-2>span:nth-of-type(1) {
	transform: rotate(60deg)
}

body .firework-2>span:nth-of-type(2) {
	transform: rotate(120deg)
}

body .firework-2>span:nth-of-type(3) {
	transform: rotate(180deg)
}

body .firework-2>span:nth-of-type(4) {
	transform: rotate(240deg)
}

body .firework-2>span:nth-of-type(5) {
	transform: rotate(300deg)
}

body .firework-2>span:nth-of-type(6) {
	transform: rotate(360deg)
}

body .models {
	height: 100%;
	width: 100%;
	position: absolute;
	overflow: hidden;
	left: 0;
	top: 0;
	z-index: 1
}

body .models .project-link>* {
	position: absolute
}

body .models .project-link {
	position: absolute;
	height: 100%;
	opacity: 0;
	visibility: hidden;
	width: 100%;
	transform: perspective(1400px)
}

body .models .project-link.tech span {
	color: #5bf46d
}

body .models .project-link.tech span {
	color: #ff9273
}

body .models .project-link.non-tech span {
	color: #a07f5e
}

body .models .project-link.simon-cuchillerias span {
	color: #f7ce3c
}

body .models .project-link.guild-storm span {
	color: #f76565
}

@media (max-width: 600px) {
	body .models .project-link {
		transform: scale(0.5)
	}
}

body .models canvas {
	top: 0;
	z-index: 1
}

body .models .frame {
	stroke: rgba(76, 74, 74, 0.03);
	stroke-width: 85px;
	height: 600px;
	width: 600px;
	margin: 0;
	padding: 25px;
	border-radius: 50%
}

body .models h2 {
	top: 50%;
	left: 400px;
	opacity: 0;
	margin-top: -62px;
	font-size: 24px;
	font-weight: 400;
	white-space: nowrap;
	height: 24px
}

body .models small {
	top: 50%;
	left: 400px;
	margin-top: 25px;
	opacity: 0;
	text-transform: uppercase;
	white-space: nowrap
}

body .models span {
	top: 50%;
	font-family: "Teko", sans-serif;
	font-size: 18px;
	position: absolute;
	height: 0;
	overflow: hidden;
	margin-top: -45px;
	left: 400px
}

body .projects {
	position: absolute;
	width: 100%;
	height: 100%;
	z-index: 1
}

body .project-content {
	position: relative;
	z-index: 1
}

body .project-content .studio-wrap {
	height: 100%
}

body .project-content .studio-wrap .scene {
	height: 100%;
	width: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	position: absolute;
	transform: translateX(100%);
	top: 50%
}

body .project-content .studio-wrap .scene .image {
	padding: 40px;
	display: flex;
	align-items: center;
	align-self: stretch;
	justify-content: center
}

body .project-content .studio-wrap .scene .video {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 40px;
	position: relative
}

body .project-content .studio-wrap .scene .video .video-wrap {
	position: absolute;
	width: 100%;
	height: 100%;
	padding: 40px;
	pointer-events: none;
	z-index: 1
}

@media (max-width: 600px) {
	body .project-content .studio-wrap .scene .video::before {
		content: "";
		position: absolute;
		width: 30%;
		padding-top: 30%;
		border-radius: 50%;
		border: 2px solid #f14343
	}
	body .project-content .studio-wrap .scene .video::after {
		content: "";
		position: absolute;
		left: 50%;
		margin-left: -15px;
		border-left: 33px solid #969292;
		border-top: 20px solid transparent;
		border-right: 20px solid transparent;
		border-bottom: 20px solid transparent
	}
}

body .project-content .studio-wrap .scene img {
	max-height: 100%;
	max-width: 100%
}

body .project-content .studio-wrap .scene .fractured {
	padding: 0
}

body .project-content .studio-wrap .scene h2 {
	font-weight: 500;
	display: block;
	font-family: "Teko", sans-serif;
	text-transform: uppercase;
	font-size: 40px;
	line-height: 40px;
	margin-top: 10px;
	margin-bottom: 40px
}

body .project-content .studio-wrap .scene h2 span {
	display: inline-block
}

body .project-content .studio-wrap .scene .text-title {
	color: #f14343
}

body .project-content .studio-wrap .scene .text-title small {
	color: #4c4a4a;
	text-transform: uppercase;
	font-weight: bold
}

body .project-content .studio-wrap .scene .text-content {
	line-height: 36px;
	color: #969292;
	font-size: 14px
}

@media (max-width: 600px) {
	body .project-content .studio-wrap .scene .text-content {
		line-height: 24px;
		font-size: 14px
	}
}

@media (max-height: 500px) {
	body .project-content .studio-wrap .scene .text-content {
		line-height: 24px
	}
}

body .project-content .studio-wrap .scene.split {
	flex-direction: row;
	align-items: stretch;
	padding: 40px
}

body .project-content .studio-wrap .scene.split>div {
	position: relative;
	padding: 20px 10%;
	display: flex;
	flex: 0 0 50%;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	overflow: hidden
}

@media (max-width: 600px) {
	body .project-content .studio-wrap .scene.split h2 {
		font-size: 28px;
		line-height: 28px;
		margin: 0 0 10px
	}
}

@media (max-height: 500px) {
	body .project-content .studio-wrap .scene.split h2 {
		font-size: 28px;
		line-height: 28px;
		margin: 0 0 10px
	}
}

body .project-content .studio-wrap .scene.split.variant {
	position: relative;
	overflow: hidden
}

body .project-content .studio-wrap .scene.split.variant .split-right {
	align-items: stretch;
	padding: 20px 0;
	flex-wrap: nowrap;
	overflow: visible
}

body .project-content .studio-wrap .scene.split.variant .split-right>div {
	position: absolute;
	top: 40px;
	bottom: 40px
}

body .project-content .studio-wrap .scene.split.variant .split-right>div img {
	max-width: none;
	max-height: 100%
}

@media (max-width: 1250px) {
	body .project-content .studio-wrap .scene.split {
		padding: 20px
	}
	body .project-content .studio-wrap .scene.split>div {
		padding: 20px
	}
}

@media (max-width: 600px) {
	body .project-content .studio-wrap .scene.split {
		flex-direction: column;
		padding: 0
	}
	body .project-content .studio-wrap .scene.split>div {
		padding: 20px;
		flex: auto
	}
	body .project-content .studio-wrap .scene.split.variant .split-right {
		padding: 0 20px
	}
	body .project-content .studio-wrap .scene.split.variant .split-right>div {
		left: 20px;
		right: 20px;
		top: 0;
		bottom: 0
	}
	body .project-content .studio-wrap .scene.split.variant .split-right>div img {
		max-width: 100%;
		max-height: none
	}
}

@media (max-height: 500px) {
	body .project-content .studio-wrap .scene.split {
		flex-direction: column;
		padding: 0
	}
	body .project-content .studio-wrap .scene.split>div {
		padding: 20px;
		flex: auto
	}
	body .project-content .studio-wrap .scene.split.variant .split-right {
		padding: 0 20px
	}
	body .project-content .studio-wrap .scene.split.variant .split-right>div {
		left: 20px;
		right: 20px;
		top: 0;
		bottom: 0
	}
	body .project-content .studio-wrap .scene.split.variant .split-right>div img {
		max-width: 100%;
		max-height: none
	}
}

body .project-content .studio-wrap .intro {
	align-items: flex-start;
	padding-left: 550px;
	width: calc(100% - 500px);
	padding-right: 20px
}

body .project-content .studio-wrap .intro h1 {
	font-family: "Teko", sans-serif;
	font-weight: 500;
	font-size: 72px;
	line-height: 54px;
	text-transform: uppercase;
	padding-right: 100px;
	margin: 20px 0
}

body .project-content .studio-wrap .intro h1>span {
	display: block
}

body .project-content .studio-wrap .intro h1>span span {
	display: inline-block
}

body .project-content .studio-wrap .intro h1 small {
	color: #f14343;
	display: block;
	margin-left: -52px;
	text-align: right;
	font-size: 46px;
	font-weight: 400;
	line-height: 46px;
	width: 50px;
	margin-bottom: -46px;
	height: 46px
}

@media (max-width: 1250px) {
	body .project-content .studio-wrap .intro {
		bottom: 20px;
		padding: 20px 0;
		max-width: 640px;
		width: 100%;
		align-items: stretch;
		justify-content: flex-end
	}
	body .project-content .studio-wrap .intro>div {
		height: auto;
		padding: 0 20px 80px;
		text-align: center
	}
	body .project-content .studio-wrap .intro h1 {
		display: inline-block;
		width: auto;
		font-size: 48px;
		text-align: center
	}
	body .project-content .studio-wrap .intro h1>span {
		display: inline-block
	}
	body .project-content .studio-wrap .intro h1 small {
		font-size: 18px;
		line-height: 36px
	}
}

@media (max-width: 600px) {
	body .project-content .studio-wrap .intro>div {
		padding-bottom: 100px
	}
	body .project-content .studio-wrap .intro>div h1 small {
		display: none
	}
}

@media (max-width: 1400px) {
	body .project-content .studio-wrap .intro h1.fractured {
		font-size: 48px;
		line-height: 48px;
		padding-right: 20px
	}
	body .project-content .studio-wrap .intro h1.fractured small {
		font-size: 24px;
		line-height: 32px
	}
}

@media (max-height: 500px) {
	body .project-content .studio-wrap .intro>div {
		height: auto;
		padding: 0 20px 80px
	}
	body .project-content .studio-wrap .intro h1 {
		font-size: 48px;
		line-height: 48px;
		margin-bottom: 0
	}
}

body .project-content .studio-next {
	width: 600px;
	max-width: 100%;
	position: absolute;
	border-bottom: 1px solid #292929;
	border-top: 1px solid #292929;
	top: 50%;
	margin-top: -50px;
	left: 100%;
	z-index: 1;
	padding-left: 40px;
	overflow: hidden
}

body .project-content .studio-next small {
	font-weight: bold;
	font-size: 11px;
	text-transform: uppercase;
	margin-bottom: -20px;
	margin-top: 10px;
	margin-left: 2px;
	display: block;
	color: #f14343
}

body .project-content .studio-next h4 {
	font-family: "Teko", sans-serif;
	text-transform: uppercase;
	font-size: 60px;
	font-weight: 500;
	margin: 30px 0
}

body .project-content .studio-next .button {
	transition: all 500ms cubic-bezier(0.47, 0, 0.745, 0.715);
	width: 40px;
	height: 40px;
	position: absolute;
	right: 30px;
	border: 1px solid #292929;
	top: 50%;
	transform: translateY(-50%)
}

body .project-content .studio-next .button::after {
	content: "";
	border-left: solid 3px #969292;
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translateX(-50%) translateY(-50%);
	border-right: solid 3px transparent;
	border-top: solid 3px transparent;
	border-bottom: solid 3px transparent;
	height: 6px;
	width: 6px;
	display: block
}

body .project-content .studio-next .progress {
	background-color: #f14343;
	width: 0%;
	height: 1px;
	position: absolute;
	bottom: 0;
	left: 100%
}

body .project-content .studio-next.complete .button {
	border: 1px solid #f14343
}

@media (max-width: 600px) {
	body .project-content .studio-next small {
		margin-bottom: -18px
	}
	body .project-content .studio-next h4 {
		font-size: 40px;
		margin: 20px 0
	}
}

body .project-details {
	list-style: none;
	display: flex;
	padding: 0;
	padding-left: 2px;
	margin: 0
}

body .project-details li {
	opacity: 1;
	margin-bottom: 10px;
	position: relative;
	margin-right: 20px;
	font-family: "Teko", sans-serif;
	text-transform: uppercase;
	font-size: 18px;
	color: #969292
}

body .project-details li:last-of-type {
	margin-right: 0
}

body .project-details small {
	color: #f14343;
	font-family: "Rubik", sans-serif;
	font-size: 10px;
	font-weight: 600;
	margin-bottom: -2px;
	display: block
}

@media (max-width: 1250px) {
	body .project-details {
		text-align: center;
		justify-content: center
	}
}

body .circles {
	position: absolute;
	z-index: 1;
	width: 100%;
	height: 100%
}

body .circles .circle-trail {
	stroke: #969292;
	position: absolute;
	height: 550px;
	width: 550px;
	overflow: visible;
	border-radius: 50%;
	stroke-linecap: round;
	stroke-width: 1px;
	opacity: 0;
	stroke-dasharray: 0.2, 10.268;
	left: 50%;
	top: 50%;
	transform: translateY(-50%) translateX(-50%)
}

@media (max-width: 600px) {
	body .circles .circle-trail {
		height: 280px;
		width: 280px
	}
}

body .circles .circle-progress {
	stroke: #f14343;
	position: absolute;
	height: 550px;
	width: 550px;
	border-radius: 50%;
	overflow: visible;
	transform-origin: center;
	stroke-width: 1.5px;
	stroke-linecap: round;
	stroke-dasharray: 629;
	stroke-dashoffset: 629;
	left: 50%;
	opacity: 0;
	top: 50%;
	transform: translateY(-50%) translateX(-50%) rotate(270deg)
}

@media (max-width: 600px) {
	body .circles .circle-progress {
		height: 280px;
		width: 280px
	}
}

body .circles .circle-progress-bullets {
	height: 550px;
	width: 550px;
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translateY(-50%) translateX(-50%)
}

@media (max-width: 600px) {
	body .circles .circle-progress-bullets {
		height: 280px;
		width: 280px
	}
}

body .circles .circle-progress-bullets .bullet {
	width: 12px;
	height: 100%;
	display: block;
	position: absolute;
	left: 50%;
	margin-left: -6px
}

body .circles .circle-progress-bullets .bullet span {
	transition: border 500ms cubic-bezier(0.47, 0, 0.745, 0.715);
	border: 3px solid #f14343;
	background-color: #171717;
	content: "";
	height: 12px;
	opacity: 0;
	width: 12px;
	display: block;
	border-radius: 50%;
	margin-top: -6px;
	transform: scale(0)
}

body .circles .circle-progress-bullets .bullet-project {
	position: absolute;
	height: 100%;
	width: 20px;
	left: 50%;
	margin-left: -10px
}

body .circles .circle-progress-bullets .bullet-project span {
	transition: background-color 500ms cubic-bezier(0.47, 0, 0.745, 0.715);
	border: 2px solid #292929;
	background-color: #171717;
	height: 20px;
	width: 20px;
	display: block;
	border-radius: 50%;
	margin-top: -10px;
	transform: scale(0)
}

body .layout {
	position: absolute;
	width: 100%;
	height: 100%
}

body .layout .gameboy {
	position: absolute;
	z-index: 100000;
	top: 20px;
	left: 50%
}

body .transition {
	position: absolute;
	height: 100%;
	width: 100%;
	overflow: hidden;
	background-color: #f3f2ef;
	opacity: 0;
	visibility: hidden
}

body .project {
	left: 50%;
	position: absolute;
	top: 50%;
	width: 50%;
	opacity: 0;
	visibility: hidden;
	padding-left: 120px;
	transform: translateY(-50%)
}

body .project h1 {
	color: #969292;
	font-family: "Teko", sans-serif;
	font-size: 72px;
	line-height: 60px;
	font-weight: 400;
	margin: 0 0 30px;
	white-space: nowrap;
	perspective: 400px;
	text-transform: uppercase
}

body .project h1>span {
	display: block
}

body .project h1>span span {
	display: inline-block;
	position: relative;
	transform-origin: top left
}

@media (max-width: 1250px) {
	body .project {
		left: 0;
		width: 100%;
		top: auto;
		bottom: 0;
		padding: 0 20px 100px;
		transform: none
	}
	body .project h1 {
		font-size: 72px;
		text-align: center
	}
	body .project h1 div {
		display: inline-block
	}
}

@media (max-width: 600px) {
	body .project {
		top: auto;
		bottom: 0;
		padding: 0 20px 100px
	}
	body .project h1 {
		font-size: 48px;
		line-height: 48px;
		margin-bottom: 0
	}
}

@media (max-height: 500px) {
	body .project {
		padding-left: 150px;
		padding-right: 150px;
		padding-bottom: 0;
		bottom: 50%;
		transform: translateY(50%)
	}
	body .project h1 {
		text-align: center;
		display: flex;
		justify-content: center;
		font-size: 36px;
		line-height: 36px;
		margin-bottom: 20px
	}
	body .project h1>span {
		display: inline-block;
		margin-right: 7px
	}
	body .project h1>span:last-of-type {
		margin-right: 0
	}
}

@media (max-width: 600px) {
	body.studio .line-aux,
	body.about .line-aux {
		opacity: 0 !important;
		visibility: hidden !important
	}
}

@media (max-width: 1250px) {
	body.about .line {
		opacity: 0
	}
}

@media (max-width: 600px) {
	body.menu .project-link {
		transform: scale(0.8)
	}
}

@media (max-height: 300px) and (max-width: 300px) {
	body .layout::after {
		content: "This web works in a GameBoy but Tamagotchis are not supported yet, sorry for the inconvenience";
		position: absolute;
		height: 100%;
		padding: 20px;
		display: flex;
		text-align: center;
		align-items: center;
		width: 100%;
		background-color: #d0beaf;
		color: #434343;
		z-index: 10000
	}
	body .gameboy {
		display: block
	}
}

body.menu {
	transition: all 500ms cubic-bezier(0.47, 0, 0.745, 0.715);
	background: #f1f3f2;
	color: #191819;
	margin: 0;
	overflow: hidden;
	font-family: "Rubik", sans-serif;
	font-size: 14px;
	line-height: 20px
}

body.menu a {
	transition: color 300ms cubic-bezier(0.47, 0, 0.745, 0.715);
	color: #90908c;
	text-decoration: none;
	display: inline-block
}

body.menu a.fractured>span {
	display: inline-block
}

body.menu a.fractured>span span {
	display: inline-block;
	font-family: "Rubik", sans-serif;
	line-height: 20px;
	text-transform: none
}

body.menu a:hover {
	color: #c16a68
}

body.menu .gradient {
	position: absolute;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
	opacity: 0.8
}

body.menu .gradient stop {
	transition: all 500ms cubic-bezier(0.47, 0, 0.745, 0.715);
	stop-color: #f1f3f2
}

body.menu .gradient stop:last-of-type {
	stop-color: #e6e4dc
}

body.menu .circle-transition {
	position: absolute;
	height: 0;
	width: 0;
	border-radius: 50%;
	transform: translateX(-50%) translateY(-50%);
	left: 50%;
	top: 50%
}

body.menu .logo {
	width: 250px;
	position: fixed;
	opacity: 1;
	z-index: 2;
	left: 80px;
	top: 60px;
	color: #90908c;
	cursor: pointer
}

body.menu .logo.revert {
	color: #f14343
}

body.menu .logo.revert svg {
	fill: #f14343
}

@media (max-width: 1250px) {
	body.menu .logo {
		left: 50px;
		top: 40px
	}
}

@media (max-width: 600px) {
	body.menu .logo {
		left: 20px;
		top: 20px
	}
}

body.menu .logo h2 {
	transition: color 500ms cubic-bezier(0.47, 0, 0.745, 0.715);
	font-size: 18px;
	font-weight: 400;
	line-height: normal;
	margin: 8px 0 0;
	display: block
}

body.menu .logo h3 {
	transition: color 500ms cubic-bezier(0.47, 0, 0.745, 0.715);
	font-size: 11px;
	text-transform: uppercase;
	font-weight: 700;
	margin: 0;
	letter-spacing: 0.45px;
	display: none
}

body.menu .logo svg {
	transition: all 500ms cubic-bezier(0.47, 0, 0.745, 0.715);
	fill: #90908c;
	float: left;
	margin-right: 15px
}

@media (max-width: 600px) {
	body.menu .logo h2,
	body.menu .logo h3 {
		display: none
	}
}

@media (max-height: 500px) {
	body.menu .logo h2,
	body.menu .logo h3 {
		display: none
	}
}

body.menu .mobile-menu {
	transition: fill 500ms cubic-bezier(0.47, 0, 0.745, 0.715);
	position: absolute;
	bottom: 33px;
	fill: #90908c;
	left: 20px;
	z-index: 2;
	cursor: pointer;
	opacity: 0;
	visibility: hidden;
	display: none
}

@media (max-width: 600px) {
	body.menu .mobile-menu {
		display: block
	}
}

body.menu .menu-top {
	position: fixed;
	right: 80px;
	z-index: 10;
	top: 70px
}

@media (max-width: 1250px) {
	body.menu .menu-top {
		right: 50px;
		top: 50px
	}
}

@media (max-width: 600px) {
	body.menu .menu-top {
		right: 20px;
		top: 30px
	}
}

body.menu .menu-top a {
	padding: 20px;
	padding-right: 0;
	margin-top: -20px;
	opacity: 0;
	visibility: hidden;
	transform: translateY(-10px)
}

body.menu .menu-top a span {
	display: inline-block
}

body.menu .mouse-track {
	pointer-events: none;
	position: absolute;
	z-index: 1000;
	opacity: 0
}

body.menu .mouse-track .outer-circle {
	stroke: #90908c;
	transform: translateX(-50%) translateY(-50%) rotate(-90deg);
	stroke-width: 2px;
	fill: none;
	height: 18px;
	width: 18px;
	overflow: visible;
	position: absolute
}

body.menu .mouse-track .outer-circle .countdown {
	opacity: 0;
	stroke: #f14343;
	position: absolute;
	stroke-dashoffset: 125px;
	stroke-dasharray: 125px;
	stroke-width: 4px
}

body.menu .mouse-track .inner-circle {
	stroke: #90908c;
	transform: translateX(-50%) translateY(-50%);
	stroke-width: 2px;
	fill: none;
	height: 2px;
	width: 2px;
	opacity: 0.6;
	overflow: visible;
	position: absolute
}

body.menu .mouse-track .arrow-right {
	stroke: #f14343;
	opacity: 0;
	visibility: hidden;
	stroke-width: 2px;
	transform: rotate(180deg);
	margin-left: 10px;
	margin-top: -7px;
	position: absolute
}

body.menu .mouse-track .arrow-left {
	stroke: #f14343;
	opacity: 0;
	margin-left: -20px;
	margin-top: -6px;
	visibility: hidden;
	stroke-width: 2px;
	position: absolute
}

body.menu .mouse-track .play {
	fill: #90908c;
	opacity: 1;
	margin-top: -6px;
	stroke-width: 2px;
	margin-top: -18px;
	margin-left: -14px;
	transform: scale(0);
	position: absolute
}

body.menu .mouse-track .stop {
	fill: #90908c;
	height: 38px;
	width: 38px;
	margin-left: -19px;
	margin-top: -19px;
	transform: scale(0);
	position: absolute
}

@media (max-width: 600px) {
	body.menu .mouse-track {
		opacity: 0 !important;
		visibility: hidden !important
	}
}

body.menu .about-page {
	position: absolute;
	height: 100%;
	width: 100%;
	padding: 40px;
	left: 0;
	opacity: 1;
	top: 0;
	display: flex;
	flex-direction: row;
	visibility: hidden;
	align-items: stretch
}

@media (max-width: 1250px) {
	body.menu .about-page {
		padding: 20px
	}
}

@media (max-width: 600px) {
	body.menu .about-page {
		flex-direction: column;
		padding: 0
	}
}

body.menu .about-page.active .neon-sign {
	animation: flicker 10s infinite
}

body.menu .about-page.active .split-left::before {
	width: 100%;
	bottom: 0
}

body.menu .about-page.active .split-left.shaded::after {
	opacity: 1
}

body.menu .about-page .split-left {
	opacity: 0;
	visibility: hidden;
	overflow: hidden
}

body.menu .about-page .split-left.shaded::after {
	content: "Swipe or Scroll and click image to know more";
	padding-right: 20px;
	line-height: 100px;
	color: #858686;
	text-align: right;
	position: absolute;
	bottom: 0;
	width: 100%;
	opacity: 0;
	transition: all 500ms cubic-bezier(0.47, 0, 0.745, 0.715);
	transition-delay: 1;
	height: 100px;
	background-color: red;
	background: linear-gradient(transparent, #14141a 50%);
	pointer-events: none
}

body.menu .about-page .split-left::before {
	transition: all 500ms cubic-bezier(0.47, 0, 0.745, 0.715);
	content: "";
	position: absolute;
	width: 0%;
	height: 100%;
	left: 0;
	background-color: #14141a;
	z-index: -1;
	bottom: 0
}

body.menu .about-page>* {
	position: relative;
	z-index: 1;
	flex: 0 0 50%;
	display: flex;
	align-items: center
}

body.menu .about-page .gradient-about {
	background-color: red;
	position: absolute;
	width: 100%;
	height: 100%;
	z-index: 1;
	top: 0;
	left: 0;
	-webkit-mask-image: url("../smoke-sprite.png");
	-webkit-mask-size: 3000% 100%;
	-webkit-mask-position-x: 0%;
	animation-iteration-count: 1;
	animation-delay: 1s
}

body.menu .about-page .gradient-about.active {
	animation: mask 1.5s steps(29) forwards
}

body.menu .about-page .gradient-about stop {
	transition: all 500ms cubic-bezier(0.47, 0, 0.745, 0.715);
	stop-color: #292038
}

body.menu .about-page .gradient-about stop:last-of-type {
	stop-color: #18181d
}

@media (max-width: 600px) {
	body.menu .about-page .gradient-about stop {
		transition: all 500ms cubic-bezier(0.47, 0, 0.745, 0.715);
		stop-color: #18181d
	}
	body.menu .about-page .gradient-about stop:last-of-type {
		stop-color: #18181d
	}
}

body.menu .about-page .about-text {
	position: absolute;
	padding: 120px;
	padding-right: 240px
}

body.menu .about-page .about-text h1 {
	color: #f14343;
	white-space: nowrap;
	font-weight: 500;
	display: block;
	font-family: "Teko", sans-serif;
	text-transform: uppercase;
	font-size: 40px;
	line-height: 40px;
	margin-top: 10px;
	margin-bottom: 40px
}

@media (max-width: 600px) {
	body.menu .about-page .about-text h1 {
		font-size: 28px;
		line-height: 28px;
		margin: 0 0 20px
	}
}

body.menu .about-page .about-text h1>span {
	display: block
}

body.menu .about-page .about-text h1>span span {
	display: inline-block
}

body.menu .about-page .about-text p {
	opacity: 0;
	font-size: 16px;
	line-height: 32px
}

@media (max-width: 600px) {
	body.menu .about-page .about-text p {
		line-height: 24px
	}
}

@media (max-width: 1250px) {
	body.menu .about-page .about-text {
		padding-left: 40px;
		padding-right: 40px
	}
}

@media (max-width: 600px) {
	body.menu .about-page .about-text {
		padding-left: 20px;
		padding-right: 20px
	}
}

body.menu .about-page .about-render {
	position: absolute;
	visibility: hidden;
	top: 0%;
	opacity: 0;
	right: 0;
	width: 140%;
	height: 100%;
	transform: translateY(0) scale(1);
	z-index: 1;
	pointer-events: none
}

@media (max-width: 1250px) {
	body.menu .about-page .about-render {
		width: 100%
	}
}

@media (max-width: 600px) {
	body.menu .about-page .about-render {
		width: 100%
	}
}

body.menu .about-page .about-render canvas {
	position: absolute;
	transform: translateY(-50%);
	top: 50%
}

body.menu .about-page .neon-sign {
	opacity: 0;
	height: 570px;
	width: 140%;
	position: absolute;
	text-transform: uppercase;
	font-size: 46px;
	color: #ff0054;
	right: 260px;
	top: -30px;
	transform: scale(0.5) perspective(900px) translateZ(-300px) rotateY(-10deg) rotateX(0deg) rotateZ(0deg) skewY(9deg);
	filter: blur(2px) brightness(2)
}

body.menu .about-page .neon-sign::before {
	content: "";
	width: 410px;
	height: 100%;
	position: absolute;
	left: 100%
}

@media (max-width: 1250px) {
	body.menu .about-page .neon-sign {
		display: none
	}
}

@media (max-width: 600px) {
	body.menu .about-page .neon-sign {
		display: none
	}
}

body.menu .about-page .neon-sign::after {
	content: "";
	border: 6px solid #ff0054;
	width: 210px;
	height: 100%;
	position: absolute;
	right: 0
}

body.menu .about-page .neon-sign.var-1 {
	transform: scale(0.7) perspective(900px) rotateY(-8deg) rotateX(0deg) rotateZ(0deg) skewY(9deg) translateX(150px)
}

body.menu .about-page .neon-sign.var-2 {
	transform: scale(0.7) perspective(900px) rotateY(-6deg) rotateX(0deg) rotateZ(0deg) skewY(6deg) translateY(6px) translateX(140px)
}

body.menu .about-page .neon-sign>* {
	position: absolute
}

body.menu .about-page .neon-sign .code {
	top: 40px;
	right: 42px;
	animation: flicker 5s infinite
}

body.menu .about-page .neon-sign .and {
	top: 94px;
	color: #00e4ff;
	font-size: 80px;
	right: 70px
}

body.menu .about-page .neon-sign .design {
	top: 145px;
	right: 19px
}

body.menu .about-page .neon-sign .key {
	animation: fade 2s steps(1) infinite;
	animation-direction: reverse;
	bottom: 45px;
	right: 53px
}

body.menu .about-page .neon-sign .key-pressed {
	animation: fade 2s steps(1) infinite;
	animation-direction: normal;
	bottom: 40px;
	right: 19px
}

body.menu .about-page .neon-sign .hand {
	animation: hand 2s steps(1) infinite;
	right: 30px;
	bottom: 100px
}

body.menu .about-page .neon-sign .key-base {
	bottom: 20px;
	right: 45px
}

body.menu .introduction {
	position: absolute;
	background-color: #f1f3f2;
	height: 100%;
	width: 100%;
	top: 0;
	left: 0;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center
}

body.menu .introduction .skip {
	padding: 30px;
	position: absolute;
	bottom: 50px;
	font-size: 16px;
	color: #191819;
	cursor: pointer
}

body.menu .intro-text {
	transition: color 500ms cubic-bezier(0.47, 0, 0.745, 0.715);
	position: absolute;
	bottom: 50%;
	z-index: 1;
	width: 100%;
	padding: 0 10px;
	text-align: center;
	font-size: 24px;
	color: #90908c
}

body.menu .intro-text.tutorial {
	font-size: 16px;
	bottom: 70px
}

body.menu .intro-text span {
	display: inline-block
}

@media (max-width: 1250px) {
	body.menu .intro-text.tutorial {
		bottom: 40px
	}
}

@media (max-width: 600px) {
	body.menu .intro-text {
		font-size: 16px
	}
	body.menu .intro-text.tutorial {
		bottom: auto;
		top: 140px
	}
}

body.menu .discover {
	opacity: 0;
	visibility: hidden;
	color: #f14343;
	position: absolute;
	bottom: 0;
	right: 0;
	height: 160px;
	width: 240px;
	z-index: 100;
	cursor: pointer
}

body.menu .discover .open>span {
	position: absolute;
	height: 14px;
	width: 7px;
	bottom: 65px;
	right: 80px;
	transform: translateX(-80px)
}

body.menu .discover .open>span::before {
	transition: all 300ms cubic-bezier(0.47, 0, 0.745, 0.715);
	transition-property: background-color, transform, opacity;
	transition-delay: 0s, 0.8s, 0.8s;
	content: "";
	position: absolute;
	border-radius: 10px 10px 20px 0;
	height: 8px;
	transform-origin: top left;
	width: 1.5px;
	background-color: #f14343;
	transform: rotate(-45deg) scaleY(4);
	opacity: 0
}

body.menu .discover .open>span::after {
	transition: all 300ms cubic-bezier(0.47, 0, 0.745, 0.715);
	transition-property: background-color, transform, opacity;
	transition-delay: 0s, 1.1s, 1.1s;
	content: "";
	position: absolute;
	border-radius: 0 20px 10px 10px;
	height: 8px;
	transform-origin: bottom left;
	margin-top: 1px;
	width: 1.5px;
	background-color: #f14343;
	transform: rotate(45deg) scaleY(4);
	opacity: 0
}

body.menu .discover .open.active>span::before {
	transform: rotate(-45deg) scaleY(1);
	opacity: 1;
	transition-delay: 0
}

body.menu .discover .open.active>span::after {
	transform: rotate(45deg) scaleY(1);
	opacity: 1;
	transition-delay: 0
}

body.menu .discover .close>span {
	position: absolute;
	height: 17px;
	width: 7px;
	bottom: 65px;
	right: 80px;
	transform: translateX(-57px)
}

body.menu .discover .close>span::before {
	transition: all 300ms cubic-bezier(0.47, 0, 0.745, 0.715);
	transition-delay: 1.1s;
	content: "";
	position: absolute;
	border-radius: 5px;
	height: 15px;
	width: 2px;
	margin-left: -5px;
	margin-top: 1px;
	background-color: #f14343;
	transform-origin: top;
	transform: rotate(-45deg) scaleY(0)
}

body.menu .discover .close>span::after {
	transition: all 300ms cubic-bezier(0.47, 0, 0.745, 0.715);
	transition-delay: 0.8s;
	content: "";
	position: absolute;
	border-radius: 5px;
	height: 15px;
	width: 2px;
	background-color: #f14343;
	transform-origin: bottom;
	margin-left: -5px;
	margin-top: -3px;
	transform: rotate(45deg) scaleY(0)
}

body.menu .discover .close.active>span::before {
	transform: rotate(-45deg) scaleY(1);
	transition-delay: 0
}

body.menu .discover .close.active>span::after {
	transform: rotate(45deg) scaleY(1);
	transition-delay: 0
}

body.menu .discover .open,
body.menu .discover .close {
	transition: all 300ms cubic-bezier(0.47, 0, 0.745, 0.715);
	height: 100%;
	position: absolute;
	width: 100%;
	left: 0;
	top: 0;
	opacity: 0
}

body.menu .discover .open.active,
body.menu .discover .close.active {
	opacity: 1
}

body.menu .discover .open a span,
body.menu .discover .close a span {
	transform: translateX(5px) translateY(5px);
	opacity: 0
}

body.menu .discover .open.active a span,
body.menu .discover .close.active a span {
	transform: translateX(0px) translateY(0px);
	opacity: 1
}

body.menu .discover:hover {
	height: 200px;
	width: 300px
}

body.menu .discover:hover a {
	color: #90908c
}

body.menu .discover:hover svg {
	stroke: #191819
}

body.menu .discover>div>a {
	position: absolute;
	right: 80px;
	bottom: 65px
}

body.menu .discover a span {
	position: relative;
	display: inline-block
}

@media (max-width: 1250px) {
	body.menu .discover {
		height: 100px;
		width: 170px
	}
}

@media (max-width: 600px) {
	body.menu .discover {
		height: 70px;
		width: 120px;
		z-index: 2
	}
	body.menu .discover:hover {
		width: 100%;
		height: 90px
	}
}

body.menu .line-aux {
	width: 45px;
	position: fixed;
	opacity: 1;
	height: 100px;
	left: 82px;
	bottom: 110px;
	z-index: 3;
	opacity: 0;
	visibility: hidden
}

@media (max-width: 1250px) {
	body.menu .line-aux {
		left: 50px;
		bottom: 90px
	}
}

@media (max-width: 600px) {
	body.menu .line-aux {
		left: 20px;
		bottom: 73px;
		visibility: hidden !important;
		opacity: 0 !important
	}
}

body.menu .line-aux::after {
	transition: background-color 500ms cubic-bezier(0.47, 0, 0.745, 0.715);
	content: "";
	background-color: #fcfcfb;
	width: 2px;
	height: 10px;
	margin-left: -1px;
	left: 50%;
	bottom: -65px;
	position: absolute
}

body.menu .line-aux .line {
	transition: background-color 500ms cubic-bezier(0.47, 0, 0.745, 0.715);
	width: 2px;
	background-color: #fcfcfb;
	height: 0;
	margin-left: -1px;
	left: 50%;
	margin-bottom: 10px;
	position: relative
}

@media (max-width: 600px) {
	body.menu .line-aux .line {
		display: none
	}
}

@media (max-height: 500px) {
	body.menu .line-aux .line {
		display: none
	}
}

body.menu .line-aux .counter {
	transition: all 500ms cubic-bezier(0.47, 0, 0.745, 0.715);
	text-transform: uppercase;
	font-family: "Teko", sans-serif;
	font-weight: 500;
	font-size: 18px;
	color: #90908c;
	height: 50px;
	width: 100px;
	overflow: hidden;
	text-align: center;
	position: absolute;
	bottom: -50px;
	left: -27px
}

body.menu .line-aux .counter .page {
	transition: color 500ms cubic-bezier(0.47, 0, 0.745, 0.715);
	position: absolute;
	right: 50%;
	margin-right: 7px;
	bottom: 20px;
	margin-bottom: 45px;
	text-align: right
}

body.menu .line-aux .counter .divider {
	transition: color 500ms cubic-bezier(0.47, 0, 0.745, 0.715);
	position: absolute;
	left: 50%;
	color: #f14343;
	bottom: 12px;
	transform: translateX(-50%);
	margin-bottom: 45px
}

body.menu .line-aux .counter .total {
	transition: color 500ms cubic-bezier(0.47, 0, 0.745, 0.715);
	left: 50%;
	margin-left: 7px;
	position: absolute;
	bottom: 5px;
	margin-bottom: 45px
}

body.menu .scroll-position {
	width: 100%;
	position: absolute;
	bottom: 0;
	height: 2px;
	opacity: 0;
	z-index: 2;
	visibility: hidden
}

body.menu .scroll-position span {
	position: relative;
	display: block;
	width: 50%;
	background-color: #f14343;
	height: 100%
}

body.menu .line-scroll {
	position: absolute;
	z-index: 2;
	opacity: 0;
	visibility: hidden;
	height: 45px;
	width: 140px;
	left: 500px;
	bottom: 40px;
	overflow: hidden
}

body.menu .line-scroll>span {
	position: absolute;
	content: "";
	background-color: #f14343;
	width: 50%;
	bottom: 0px;
	top: auto !important;
	height: 2px !important;
	z-index: 1;
	animation-name: example;
	animation-duration: 4s;
	animation-iteration-count: infinite
}

body.menu .line-scroll::after {
	content: "->";
	position: absolute;
	color: #f14343;
	margin-left: 15px
}

@media (max-width: 1250px) {
	body.menu .line-scroll {
		left: 480px;
		bottom: 20px
	}
}

@media (max-width: 600px) {
	body.menu .line-scroll {
		left: 20px;
		bottom: 20px;
		height: 35px
	}
}

body.menu .fireworks-plane {
	width: 600px;
	height: 600px;
	left: 340px;
	position: absolute;
	opacity: 0;
	top: 50%;
	transform: translateX(-50%) translateY(-50%) rotateY(180deg);
	perspective: 500px;
	z-index: 1
}

@media (max-width: 1250px) {
	body.menu .fireworks-plane {
		transform: translateX(-50%) translateY(-50%) rotateY(180deg) scale(0.6)
	}
}

@media (max-width: 600px) {
	body.menu .fireworks-plane {
		transform: translateX(-50%) translateY(-50%) rotateY(180deg) scale(0.4);
		left: 50%
	}
}

body.menu .firework-1 {
	position: absolute;
	top: 280px;
	left: 50px;
	overflow: visible;
	stroke: #f14343;
	stroke-width: 10px;
	stroke-dashoffset: -358;
	transform: rotateX(40deg);
	stroke-dasharray: 0, 10000;
	stroke-linecap: round
}

body.menu .firework-1:nth-of-type(2) {
	top: 230px;
	transform: rotateZ(20deg) rotateX(40deg)
}

body.menu .firework-2>span {
	height: 100px;
	width: 4px;
	position: absolute;
	left: 190px;
	transform-origin: bottom;
	top: 145px
}

body.menu .firework-2>span span {
	content: "";
	height: 0;
	background-color: #f14343;
	bottom: 0;
	width: 100%;
	position: absolute;
	border-radius: 2px
}

body.menu .firework-2>span:nth-of-type(1) {
	transform: rotate(60deg)
}

body.menu .firework-2>span:nth-of-type(2) {
	transform: rotate(120deg)
}

body.menu .firework-2>span:nth-of-type(3) {
	transform: rotate(180deg)
}

body.menu .firework-2>span:nth-of-type(4) {
	transform: rotate(240deg)
}

body.menu .firework-2>span:nth-of-type(5) {
	transform: rotate(300deg)
}

body.menu .firework-2>span:nth-of-type(6) {
	transform: rotate(360deg)
}

body.menu .models {
	height: 100%;
	width: 100%;
	position: absolute;
	overflow: hidden;
	left: 0;
	top: 0;
	z-index: 1
}

body.menu .models .project-link>* {
	position: absolute
}

body.menu .models .project-link {
	position: absolute;
	height: 100%;
	opacity: 0;
	visibility: hidden;
	width: 100%;
	transform: perspective(1400px)
}

body.menu .models .project-link.tech span {
	color: #5bf46d
}

body.menu .models .project-link.tech span {
	color: #ff9273
}

body.menu .models .project-link.non-tech span {
	color: #a07f5e
}

body.menu .models .project-link.simon-cuchillerias span {
	color: #f7ce3c
}

body.menu .models .project-link.guild-storm span {
	color: #f76565
}

@media (max-width: 600px) {
	body.menu .models .project-link {
		transform: scale(0.5)
	}
}

body.menu .models canvas {
	top: 0;
	z-index: 1
}

body.menu .models .frame {
	stroke: rgba(25, 24, 25, 0.03);
	stroke-width: 85px;
	height: 600px;
	width: 600px;
	margin: 0;
	padding: 25px;
	border-radius: 50%
}

body.menu .models h2 {
	top: 50%;
	left: 400px;
	opacity: 0;
	margin-top: -62px;
	font-size: 24px;
	font-weight: 400;
	white-space: nowrap;
	height: 24px
}

body.menu .models small {
	top: 50%;
	left: 400px;
	margin-top: 25px;
	opacity: 0;
	text-transform: uppercase;
	white-space: nowrap
}

body.menu .models span {
	top: 50%;
	font-family: "Teko", sans-serif;
	font-size: 18px;
	position: absolute;
	height: 0;
	overflow: hidden;
	margin-top: -45px;
	left: 400px
}

body.menu .projects {
	position: absolute;
	width: 100%;
	height: 100%;
	z-index: 1
}

body.menu .project-content {
	position: relative;
	z-index: 1
}

body.menu .project-content .studio-wrap {
	height: 100%
}

body.menu .project-content .studio-wrap .scene {
	height: 100%;
	width: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	position: absolute;
	transform: translateX(100%);
	top: 50%
}

body.menu .project-content .studio-wrap .scene .image {
	padding: 40px;
	display: flex;
	align-items: center;
	align-self: stretch;
	justify-content: center
}

body.menu .project-content .studio-wrap .scene .video {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 40px;
	position: relative
}

body.menu .project-content .studio-wrap .scene .video .video-wrap {
	position: absolute;
	width: 100%;
	height: 100%;
	padding: 40px;
	pointer-events: none;
	z-index: 1
}

@media (max-width: 600px) {
	body.menu .project-content .studio-wrap .scene .video::before {
		content: "";
		position: absolute;
		width: 30%;
		padding-top: 30%;
		border-radius: 50%;
		border: 2px solid #f14343
	}
	body.menu .project-content .studio-wrap .scene .video::after {
		content: "";
		position: absolute;
		left: 50%;
		margin-left: -15px;
		border-left: 33px solid #90908c;
		border-top: 20px solid transparent;
		border-right: 20px solid transparent;
		border-bottom: 20px solid transparent
	}
}

body.menu .project-content .studio-wrap .scene img {
	max-height: 100%;
	max-width: 100%
}

body.menu .project-content .studio-wrap .scene .fractured {
	padding: 0
}

body.menu .project-content .studio-wrap .scene h2 {
	font-weight: 500;
	display: block;
	font-family: "Teko", sans-serif;
	text-transform: uppercase;
	font-size: 40px;
	line-height: 40px;
	margin-top: 10px;
	margin-bottom: 40px
}

body.menu .project-content .studio-wrap .scene h2 span {
	display: inline-block
}

body.menu .project-content .studio-wrap .scene .text-title {
	color: #f14343
}

body.menu .project-content .studio-wrap .scene .text-title small {
	color: #191819;
	text-transform: uppercase;
	font-weight: bold
}

body.menu .project-content .studio-wrap .scene .text-content {
	line-height: 36px;
	color: #90908c;
	font-size: 14px
}

@media (max-width: 600px) {
	body.menu .project-content .studio-wrap .scene .text-content {
		line-height: 24px;
		font-size: 14px
	}
}

@media (max-height: 500px) {
	body.menu .project-content .studio-wrap .scene .text-content {
		line-height: 24px
	}
}

body.menu .project-content .studio-wrap .scene.split {
	flex-direction: row;
	align-items: stretch;
	padding: 40px
}

body.menu .project-content .studio-wrap .scene.split>div {
	position: relative;
	padding: 20px 10%;
	display: flex;
	flex: 0 0 50%;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	overflow: hidden
}

@media (max-width: 600px) {
	body.menu .project-content .studio-wrap .scene.split h2 {
		font-size: 28px;
		line-height: 28px;
		margin: 0 0 10px
	}
}

@media (max-height: 500px) {
	body.menu .project-content .studio-wrap .scene.split h2 {
		font-size: 28px;
		line-height: 28px;
		margin: 0 0 10px
	}
}

body.menu .project-content .studio-wrap .scene.split.variant {
	position: relative;
	overflow: hidden
}

body.menu .project-content .studio-wrap .scene.split.variant .split-right {
	align-items: stretch;
	padding: 20px 0;
	flex-wrap: nowrap;
	overflow: visible
}

body.menu .project-content .studio-wrap .scene.split.variant .split-right>div {
	position: absolute;
	top: 40px;
	bottom: 40px
}

body.menu .project-content .studio-wrap .scene.split.variant .split-right>div img {
	max-width: none;
	max-height: 100%
}

@media (max-width: 1250px) {
	body.menu .project-content .studio-wrap .scene.split {
		padding: 20px
	}
	body.menu .project-content .studio-wrap .scene.split>div {
		padding: 20px
	}
}

@media (max-width: 600px) {
	body.menu .project-content .studio-wrap .scene.split {
		flex-direction: column;
		padding: 0
	}
	body.menu .project-content .studio-wrap .scene.split>div {
		padding: 20px;
		flex: auto
	}
	body.menu .project-content .studio-wrap .scene.split.variant .split-right {
		padding: 0 20px
	}
	body.menu .project-content .studio-wrap .scene.split.variant .split-right>div {
		left: 20px;
		right: 20px;
		top: 0;
		bottom: 0
	}
	body.menu .project-content .studio-wrap .scene.split.variant .split-right>div img {
		max-width: 100%;
		max-height: none
	}
}

@media (max-height: 500px) {
	body.menu .project-content .studio-wrap .scene.split {
		flex-direction: column;
		padding: 0
	}
	body.menu .project-content .studio-wrap .scene.split>div {
		padding: 20px;
		flex: auto
	}
	body.menu .project-content .studio-wrap .scene.split.variant .split-right {
		padding: 0 20px
	}
	body.menu .project-content .studio-wrap .scene.split.variant .split-right>div {
		left: 20px;
		right: 20px;
		top: 0;
		bottom: 0
	}
	body.menu .project-content .studio-wrap .scene.split.variant .split-right>div img {
		max-width: 100%;
		max-height: none
	}
}

body.menu .project-content .studio-wrap .intro {
	align-items: flex-start;
	padding-left: 550px;
	width: calc(100% - 500px);
	padding-right: 20px
}

body.menu .project-content .studio-wrap .intro h1 {
	font-family: "Teko", sans-serif;
	font-weight: 500;
	font-size: 72px;
	line-height: 54px;
	text-transform: uppercase;
	padding-right: 100px;
	margin: 20px 0
}

body.menu .project-content .studio-wrap .intro h1>span {
	display: block
}

body.menu .project-content .studio-wrap .intro h1>span span {
	display: inline-block
}

body.menu .project-content .studio-wrap .intro h1 small {
	color: #f14343;
	display: block;
	margin-left: -52px;
	text-align: right;
	font-size: 46px;
	font-weight: 400;
	line-height: 46px;
	width: 50px;
	margin-bottom: -46px;
	height: 46px
}

@media (max-width: 1250px) {
	body.menu .project-content .studio-wrap .intro {
		bottom: 20px;
		padding: 20px 0;
		max-width: 640px;
		width: 100%;
		align-items: stretch;
		justify-content: flex-end
	}
	body.menu .project-content .studio-wrap .intro>div {
		height: auto;
		padding: 0 20px 80px;
		text-align: center
	}
	body.menu .project-content .studio-wrap .intro h1 {
		display: inline-block;
		width: auto;
		font-size: 48px;
		text-align: center
	}
	body.menu .project-content .studio-wrap .intro h1>span {
		display: inline-block
	}
	body.menu .project-content .studio-wrap .intro h1 small {
		font-size: 18px;
		line-height: 36px
	}
}

@media (max-width: 600px) {
	body.menu .project-content .studio-wrap .intro>div {
		padding-bottom: 100px
	}
	body.menu .project-content .studio-wrap .intro>div h1 small {
		display: none
	}
}

@media (max-width: 1400px) {
	body.menu .project-content .studio-wrap .intro h1.fractured {
		font-size: 48px;
		line-height: 48px;
		padding-right: 20px
	}
	body.menu .project-content .studio-wrap .intro h1.fractured small {
		font-size: 24px;
		line-height: 32px
	}
}

@media (max-height: 500px) {
	body.menu .project-content .studio-wrap .intro>div {
		height: auto;
		padding: 0 20px 80px
	}
	body.menu .project-content .studio-wrap .intro h1 {
		font-size: 48px;
		line-height: 48px;
		margin-bottom: 0
	}
}

body.menu .project-content .studio-next {
	width: 600px;
	max-width: 100%;
	position: absolute;
	border-bottom: 1px solid #fcfcfb;
	border-top: 1px solid #fcfcfb;
	top: 50%;
	margin-top: -50px;
	left: 100%;
	z-index: 1;
	padding-left: 40px;
	overflow: hidden
}

body.menu .project-content .studio-next small {
	font-weight: bold;
	font-size: 11px;
	text-transform: uppercase;
	margin-bottom: -20px;
	margin-top: 10px;
	margin-left: 2px;
	display: block;
	color: #f14343
}

body.menu .project-content .studio-next h4 {
	font-family: "Teko", sans-serif;
	text-transform: uppercase;
	font-size: 60px;
	font-weight: 500;
	margin: 30px 0
}

body.menu .project-content .studio-next .button {
	transition: all 500ms cubic-bezier(0.47, 0, 0.745, 0.715);
	width: 40px;
	height: 40px;
	position: absolute;
	right: 30px;
	border: 1px solid #fcfcfb;
	top: 50%;
	transform: translateY(-50%)
}

body.menu .project-content .studio-next .button::after {
	content: "";
	border-left: solid 3px #90908c;
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translateX(-50%) translateY(-50%);
	border-right: solid 3px transparent;
	border-top: solid 3px transparent;
	border-bottom: solid 3px transparent;
	height: 6px;
	width: 6px;
	display: block
}

body.menu .project-content .studio-next .progress {
	background-color: #f14343;
	width: 0%;
	height: 1px;
	position: absolute;
	bottom: 0;
	left: 100%
}

body.menu .project-content .studio-next.complete .button {
	border: 1px solid #f14343
}

@media (max-width: 600px) {
	body.menu .project-content .studio-next small {
		margin-bottom: -18px
	}
	body.menu .project-content .studio-next h4 {
		font-size: 40px;
		margin: 20px 0
	}
}

body.menu .project-details {
	list-style: none;
	display: flex;
	padding: 0;
	padding-left: 2px;
	margin: 0
}

body.menu .project-details li {
	opacity: 1;
	margin-bottom: 10px;
	position: relative;
	margin-right: 20px;
	font-family: "Teko", sans-serif;
	text-transform: uppercase;
	font-size: 18px;
	color: #90908c
}

body.menu .project-details li:last-of-type {
	margin-right: 0
}

body.menu .project-details small {
	color: #f14343;
	font-family: "Rubik", sans-serif;
	font-size: 10px;
	font-weight: 600;
	margin-bottom: -2px;
	display: block
}

@media (max-width: 1250px) {
	body.menu .project-details {
		text-align: center;
		justify-content: center
	}
}

body.menu .circles {
	position: absolute;
	z-index: 1;
	width: 100%;
	height: 100%
}

body.menu .circles .circle-trail {
	stroke: #90908c;
	position: absolute;
	height: 550px;
	width: 550px;
	overflow: visible;
	border-radius: 50%;
	stroke-linecap: round;
	stroke-width: 1px;
	opacity: 0;
	stroke-dasharray: 0.2, 10.268;
	left: 50%;
	top: 50%;
	transform: translateY(-50%) translateX(-50%)
}

@media (max-width: 600px) {
	body.menu .circles .circle-trail {
		height: 280px;
		width: 280px
	}
}

body.menu .circles .circle-progress {
	stroke: #f14343;
	position: absolute;
	height: 550px;
	width: 550px;
	border-radius: 50%;
	overflow: visible;
	transform-origin: center;
	stroke-width: 1.5px;
	stroke-linecap: round;
	stroke-dasharray: 629;
	stroke-dashoffset: 629;
	left: 50%;
	opacity: 0;
	top: 50%;
	transform: translateY(-50%) translateX(-50%) rotate(270deg)
}

@media (max-width: 600px) {
	body.menu .circles .circle-progress {
		height: 280px;
		width: 280px
	}
}

body.menu .circles .circle-progress-bullets {
	height: 550px;
	width: 550px;
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translateY(-50%) translateX(-50%)
}

@media (max-width: 600px) {
	body.menu .circles .circle-progress-bullets {
		height: 280px;
		width: 280px
	}
}

body.menu .circles .circle-progress-bullets .bullet {
	width: 12px;
	height: 100%;
	display: block;
	position: absolute;
	left: 50%;
	margin-left: -6px
}

body.menu .circles .circle-progress-bullets .bullet span {
	transition: border 500ms cubic-bezier(0.47, 0, 0.745, 0.715);
	border: 3px solid #f14343;
	background-color: #e6e4dc;
	content: "";
	height: 12px;
	opacity: 0;
	width: 12px;
	display: block;
	border-radius: 50%;
	margin-top: -6px;
	transform: scale(0)
}

body.menu .circles .circle-progress-bullets .bullet-project {
	position: absolute;
	height: 100%;
	width: 20px;
	left: 50%;
	margin-left: -10px
}

body.menu .circles .circle-progress-bullets .bullet-project span {
	transition: background-color 500ms cubic-bezier(0.47, 0, 0.745, 0.715);
	border: 2px solid #fcfcfb;
	background-color: #ecece7;
	height: 20px;
	width: 20px;
	display: block;
	border-radius: 50%;
	margin-top: -10px;
	transform: scale(0)
}

body.menu .layout {
	position: absolute;
	width: 100%;
	height: 100%
}

body.menu .layout .gameboy {
	position: absolute;
	z-index: 100000;
	top: 20px;
	left: 50%
}

body.menu .transition {
	position: absolute;
	height: 100%;
	width: 100%;
	overflow: hidden;
	background-color: #f3f2ef;
	opacity: 0;
	visibility: hidden
}

body.menu .project {
	left: 50%;
	position: absolute;
	top: 50%;
	width: 50%;
	opacity: 0;
	visibility: hidden;
	padding-left: 120px;
	transform: translateY(-50%)
}

body.menu .project h1 {
	color: #90908c;
	font-family: "Teko", sans-serif;
	font-size: 72px;
	line-height: 60px;
	font-weight: 400;
	margin: 0 0 30px;
	white-space: nowrap;
	perspective: 400px;
	text-transform: uppercase
}

body.menu .project h1>span {
	display: block
}

body.menu .project h1>span span {
	display: inline-block;
	position: relative;
	transform-origin: top left
}

@media (max-width: 1250px) {
	body.menu .project {
		left: 0;
		width: 100%;
		top: auto;
		bottom: 0;
		padding: 0 20px 100px;
		transform: none
	}
	body.menu .project h1 {
		font-size: 72px;
		text-align: center
	}
	body.menu .project h1 div {
		display: inline-block
	}
}

@media (max-width: 600px) {
	body.menu .project {
		top: auto;
		bottom: 0;
		padding: 0 20px 100px
	}
	body.menu .project h1 {
		font-size: 48px;
		line-height: 48px;
		margin-bottom: 0
	}
}

@media (max-height: 500px) {
	body.menu .project {
		padding-left: 150px;
		padding-right: 150px;
		padding-bottom: 0;
		bottom: 50%;
		transform: translateY(50%)
	}
	body.menu .project h1 {
		text-align: center;
		display: flex;
		justify-content: center;
		font-size: 36px;
		line-height: 36px;
		margin-bottom: 20px
	}
	body.menu .project h1>span {
		display: inline-block;
		margin-right: 7px
	}
	body.menu .project h1>span:last-of-type {
		margin-right: 0
	}
}

@media (max-width: 600px) {
	body.menu.studio .line-aux,
	body.menu.about .line-aux {
		opacity: 0 !important;
		visibility: hidden !important
	}
}

@media (max-width: 1250px) {
	body.menu.about .line {
		opacity: 0
	}
}

@media (max-width: 600px) {
	body.menu.menu .project-link {
		transform: scale(0.8)
	}
}

body.about {
	transition: all 500ms cubic-bezier(0.47, 0, 0.745, 0.715);
	background: #171717;
	color: #707f9a;
	margin: 0;
	overflow: hidden;
	font-family: "Rubik", sans-serif;
	font-size: 14px;
	line-height: 20px
}

body.about a {
	transition: color 300ms cubic-bezier(0.47, 0, 0.745, 0.715);
	color: #fff;
	text-decoration: none;
	display: inline-block
}

body.about a.fractured>span {
	display: inline-block
}

body.about a.fractured>span span {
	display: inline-block;
	font-family: "Rubik", sans-serif;
	line-height: 20px;
	text-transform: none
}

body.about a:hover {
	color: #ff80aa
}

body.about .gradient {
	position: absolute;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
	opacity: 0.8
}

body.about .gradient stop {
	transition: all 500ms cubic-bezier(0.47, 0, 0.745, 0.715);
	stop-color: #000
}

body.about .gradient stop:last-of-type {
	stop-color: #000
}

body.about .circle-transition {
	position: absolute;
	height: 0;
	width: 0;
	border-radius: 50%;
	transform: translateX(-50%) translateY(-50%);
	left: 50%;
	top: 50%
}

body.about .logo {
	width: 250px;
	position: fixed;
	opacity: 1;
	z-index: 2;
	left: 80px;
	top: 60px;
	color: #fff;
	cursor: pointer
}

body.about .logo.revert {
	color: #ff0054
}

body.about .logo.revert svg {
	fill: #ff0054
}

@media (max-width: 1250px) {
	body.about .logo {
		left: 50px;
		top: 40px
	}
}

@media (max-width: 600px) {
	body.about .logo {
		left: 20px;
		top: 20px
	}
}

body.about .logo h2 {
	transition: color 500ms cubic-bezier(0.47, 0, 0.745, 0.715);
	font-size: 18px;
	font-weight: 400;
	line-height: normal;
	margin: 8px 0 0;
	display: block
}

body.about .logo h3 {
	transition: color 500ms cubic-bezier(0.47, 0, 0.745, 0.715);
	font-size: 11px;
	text-transform: uppercase;
	font-weight: 700;
	margin: 0;
	letter-spacing: 0.45px;
	display: none
}

body.about .logo svg {
	transition: all 500ms cubic-bezier(0.47, 0, 0.745, 0.715);
	fill: #fff;
	float: left;
	margin-right: 15px
}

@media (max-width: 600px) {
	body.about .logo h2,
	body.about .logo h3 {
		display: none
	}
}

@media (max-height: 500px) {
	body.about .logo h2,
	body.about .logo h3 {
		display: none
	}
}

body.about .mobile-menu {
	transition: fill 500ms cubic-bezier(0.47, 0, 0.745, 0.715);
	position: absolute;
	bottom: 33px;
	fill: #fff;
	left: 20px;
	z-index: 2;
	cursor: pointer;
	opacity: 0;
	visibility: hidden;
	display: none
}

@media (max-width: 600px) {
	body.about .mobile-menu {
		display: block
	}
}

body.about .menu-top {
	position: fixed;
	right: 80px;
	z-index: 10;
	top: 70px
}

@media (max-width: 1250px) {
	body.about .menu-top {
		right: 50px;
		top: 50px
	}
}

@media (max-width: 600px) {
	body.about .menu-top {
		right: 20px;
		top: 30px
	}
}

body.about .menu-top a {
	padding: 20px;
	padding-right: 0;
	margin-top: -20px;
	opacity: 0;
	visibility: hidden;
	transform: translateY(-10px)
}

body.about .menu-top a span {
	display: inline-block
}

body.about .mouse-track {
	pointer-events: none;
	position: absolute;
	z-index: 1000;
	opacity: 0
}

body.about .mouse-track .outer-circle {
	stroke: #fff;
	transform: translateX(-50%) translateY(-50%) rotate(-90deg);
	stroke-width: 2px;
	fill: none;
	height: 18px;
	width: 18px;
	overflow: visible;
	position: absolute
}

body.about .mouse-track .outer-circle .countdown {
	opacity: 0;
	stroke: #ff0054;
	position: absolute;
	stroke-dashoffset: 125px;
	stroke-dasharray: 125px;
	stroke-width: 4px
}

body.about .mouse-track .inner-circle {
	stroke: #fff;
	transform: translateX(-50%) translateY(-50%);
	stroke-width: 2px;
	fill: none;
	height: 2px;
	width: 2px;
	opacity: 0.6;
	overflow: visible;
	position: absolute
}

body.about .mouse-track .arrow-right {
	stroke: #ff0054;
	opacity: 0;
	visibility: hidden;
	stroke-width: 2px;
	transform: rotate(180deg);
	margin-left: 10px;
	margin-top: -7px;
	position: absolute
}

body.about .mouse-track .arrow-left {
	stroke: #ff0054;
	opacity: 0;
	margin-left: -20px;
	margin-top: -6px;
	visibility: hidden;
	stroke-width: 2px;
	position: absolute
}

body.about .mouse-track .play {
	fill: #fff;
	opacity: 1;
	margin-top: -6px;
	stroke-width: 2px;
	margin-top: -18px;
	margin-left: -14px;
	transform: scale(0);
	position: absolute
}

body.about .mouse-track .stop {
	fill: #fff;
	height: 38px;
	width: 38px;
	margin-left: -19px;
	margin-top: -19px;
	transform: scale(0);
	position: absolute
}

@media (max-width: 600px) {
	body.about .mouse-track {
		opacity: 0 !important;
		visibility: hidden !important
	}
}

body.about .about-page {
	position: absolute;
	height: 100%;
	width: 100%;
	padding: 40px;
	left: 0;
	opacity: 1;
	top: 0;
	display: flex;
	flex-direction: row;
	visibility: hidden;
	align-items: stretch
}

@media (max-width: 1250px) {
	body.about .about-page {
		padding: 20px
	}
}

@media (max-width: 600px) {
	body.about .about-page {
		flex-direction: column;
		padding: 0
	}
}

body.about .about-page.active .neon-sign {
	animation: flicker 10s infinite
}

body.about .about-page.active .split-left::before {
	width: 100%;
	bottom: 0
}

body.about .about-page.active .split-left.shaded::after {
	opacity: 1
}

body.about .about-page .split-left {
	opacity: 0;
	visibility: hidden;
	overflow: hidden
}

body.about .about-page .split-left.shaded::after {
	content: "Swipe or Scroll and click image to know more";
	padding-right: 20px;
	line-height: 100px;
	color: #38404d;
	text-align: right;
	position: absolute;
	bottom: 0;
	width: 100%;
	opacity: 0;
	transition: all 500ms cubic-bezier(0.47, 0, 0.745, 0.715);
	transition-delay: 1;
	height: 100px;
	background-color: red;
	background: linear-gradient(transparent, #14141a 50%);
	pointer-events: none
}

body.about .about-page .split-left::before {
	transition: all 500ms cubic-bezier(0.47, 0, 0.745, 0.715);
	content: "";
	position: absolute;
	width: 0%;
	height: 100%;
	left: 0;
	background-color: #14141a;
	z-index: -1;
	bottom: 0
}

body.about .about-page>* {
	position: relative;
	z-index: 1;
	flex: 0 0 50%;
	display: flex;
	align-items: center
}

body.about .about-page .gradient-about {
	background-color: red;
	position: absolute;
	width: 100%;
	height: 100%;
	z-index: 1;
	top: 0;
	left: 0;
	-webkit-mask-image: url("../smoke-sprite.png");
	-webkit-mask-size: 3000% 100%;
	-webkit-mask-position-x: 0%;
	animation-iteration-count: 1;
	animation-delay: 1s
}

body.about .about-page .gradient-about.active {
	animation: mask 1.5s steps(29) forwards
}

body.about .about-page .gradient-about stop {
	transition: all 500ms cubic-bezier(0.47, 0, 0.745, 0.715);
	stop-color: #292038
}

body.about .about-page .gradient-about stop:last-of-type {
	stop-color: #18181d
}

@media (max-width: 600px) {
	body.about .about-page .gradient-about stop {
		transition: all 500ms cubic-bezier(0.47, 0, 0.745, 0.715);
		stop-color: #18181d
	}
	body.about .about-page .gradient-about stop:last-of-type {
		stop-color: #18181d
	}
}

body.about .about-page .about-text {
	position: absolute;
	padding: 120px;
	padding-right: 240px
}

body.about .about-page .about-text h1 {
	color: #ff0054;
	white-space: nowrap;
	font-weight: 500;
	display: block;
	font-family: "Teko", sans-serif;
	text-transform: uppercase;
	font-size: 40px;
	line-height: 40px;
	margin-top: 10px;
	margin-bottom: 40px
}

@media (max-width: 600px) {
	body.about .about-page .about-text h1 {
		font-size: 28px;
		line-height: 28px;
		margin: 0 0 20px
	}
}

body.about .about-page .about-text h1>span {
	display: block
}

body.about .about-page .about-text h1>span span {
	display: inline-block
}

body.about .about-page .about-text p {
	opacity: 0;
	font-size: 16px;
	line-height: 32px
}

@media (max-width: 600px) {
	body.about .about-page .about-text p {
		line-height: 24px
	}
}

@media (max-width: 1250px) {
	body.about .about-page .about-text {
		padding-left: 40px;
		padding-right: 40px
	}
}

@media (max-width: 600px) {
	body.about .about-page .about-text {
		padding-left: 20px;
		padding-right: 20px
	}
}

body.about .about-page .about-render {
	position: absolute;
	visibility: hidden;
	top: 0%;
	opacity: 0;
	right: 0;
	width: 140%;
	height: 100%;
	transform: translateY(0) scale(1);
	z-index: 1;
	pointer-events: none
}

@media (max-width: 1250px) {
	body.about .about-page .about-render {
		width: 100%
	}
}

@media (max-width: 600px) {
	body.about .about-page .about-render {
		width: 100%
	}
}

body.about .about-page .about-render canvas {
	position: absolute;
	transform: translateY(-50%);
	top: 50%
}

body.about .about-page .neon-sign {
	opacity: 0;
	height: 570px;
	width: 140%;
	position: absolute;
	text-transform: uppercase;
	font-size: 46px;
	color: #ff0054;
	right: 260px;
	top: -30px;
	transform: scale(0.5) perspective(900px) translateZ(-300px) rotateY(-10deg) rotateX(0deg) rotateZ(0deg) skewY(9deg);
	filter: blur(2px) brightness(2)
}

body.about .about-page .neon-sign::before {
	content: "";
	width: 410px;
	height: 100%;
	position: absolute;
	left: 100%
}

@media (max-width: 1250px) {
	body.about .about-page .neon-sign {
		display: none
	}
}

@media (max-width: 600px) {
	body.about .about-page .neon-sign {
		display: none
	}
}

body.about .about-page .neon-sign::after {
	content: "";
	border: 6px solid #ff0054;
	width: 210px;
	height: 100%;
	position: absolute;
	right: 0
}

body.about .about-page .neon-sign.var-1 {
	transform: scale(0.7) perspective(900px) rotateY(-8deg) rotateX(0deg) rotateZ(0deg) skewY(9deg) translateX(150px)
}

body.about .about-page .neon-sign.var-2 {
	transform: scale(0.7) perspective(900px) rotateY(-6deg) rotateX(0deg) rotateZ(0deg) skewY(6deg) translateY(6px) translateX(140px)
}

body.about .about-page .neon-sign>* {
	position: absolute
}

body.about .about-page .neon-sign .code {
	top: 40px;
	right: 42px;
	animation: flicker 5s infinite
}

body.about .about-page .neon-sign .and {
	top: 94px;
	color: #00e4ff;
	font-size: 80px;
	right: 70px
}

body.about .about-page .neon-sign .design {
	top: 145px;
	right: 19px
}

body.about .about-page .neon-sign .key {
	animation: fade 2s steps(1) infinite;
	animation-direction: reverse;
	bottom: 45px;
	right: 53px
}

body.about .about-page .neon-sign .key-pressed {
	animation: fade 2s steps(1) infinite;
	animation-direction: normal;
	bottom: 40px;
	right: 19px
}

body.about .about-page .neon-sign .hand {
	animation: hand 2s steps(1) infinite;
	right: 30px;
	bottom: 100px
}

body.about .about-page .neon-sign .key-base {
	bottom: 20px;
	right: 45px
}

body.about .introduction {
	position: absolute;
	background-color: #000;
	height: 100%;
	width: 100%;
	top: 0;
	left: 0;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center
}

body.about .introduction .skip {
	padding: 30px;
	position: absolute;
	bottom: 50px;
	font-size: 16px;
	color: #707f9a;
	cursor: pointer
}

body.about .intro-text {
	transition: color 500ms cubic-bezier(0.47, 0, 0.745, 0.715);
	position: absolute;
	bottom: 50%;
	z-index: 1;
	width: 100%;
	padding: 0 10px;
	text-align: center;
	font-size: 24px;
	color: #fff
}

body.about .intro-text.tutorial {
	font-size: 16px;
	bottom: 70px
}

body.about .intro-text span {
	display: inline-block
}

@media (max-width: 1250px) {
	body.about .intro-text.tutorial {
		bottom: 40px
	}
}

@media (max-width: 600px) {
	body.about .intro-text {
		font-size: 16px
	}
	body.about .intro-text.tutorial {
		bottom: auto;
		top: 140px
	}
}

body.about .discover {
	opacity: 0;
	visibility: hidden;
	color: #ff0054;
	position: absolute;
	bottom: 0;
	right: 0;
	height: 160px;
	width: 240px;
	z-index: 100;
	cursor: pointer
}

body.about .discover .open>span {
	position: absolute;
	height: 14px;
	width: 7px;
	bottom: 65px;
	right: 80px;
	transform: translateX(-80px)
}

body.about .discover .open>span::before {
	transition: all 300ms cubic-bezier(0.47, 0, 0.745, 0.715);
	transition-property: background-color, transform, opacity;
	transition-delay: 0s, 0.8s, 0.8s;
	content: "";
	position: absolute;
	border-radius: 10px 10px 20px 0;
	height: 8px;
	transform-origin: top left;
	width: 1.5px;
	background-color: #ff0054;
	transform: rotate(-45deg) scaleY(4);
	opacity: 0
}

body.about .discover .open>span::after {
	transition: all 300ms cubic-bezier(0.47, 0, 0.745, 0.715);
	transition-property: background-color, transform, opacity;
	transition-delay: 0s, 1.1s, 1.1s;
	content: "";
	position: absolute;
	border-radius: 0 20px 10px 10px;
	height: 8px;
	transform-origin: bottom left;
	margin-top: 1px;
	width: 1.5px;
	background-color: #ff0054;
	transform: rotate(45deg) scaleY(4);
	opacity: 0
}

body.about .discover .open.active>span::before {
	transform: rotate(-45deg) scaleY(1);
	opacity: 1;
	transition-delay: 0
}

body.about .discover .open.active>span::after {
	transform: rotate(45deg) scaleY(1);
	opacity: 1;
	transition-delay: 0
}

body.about .discover .close>span {
	position: absolute;
	height: 17px;
	width: 7px;
	bottom: 65px;
	right: 80px;
	transform: translateX(-57px)
}

body.about .discover .close>span::before {
	transition: all 300ms cubic-bezier(0.47, 0, 0.745, 0.715);
	transition-delay: 1.1s;
	content: "";
	position: absolute;
	border-radius: 5px;
	height: 15px;
	width: 2px;
	margin-left: -5px;
	margin-top: 1px;
	background-color: #ff0054;
	transform-origin: top;
	transform: rotate(-45deg) scaleY(0)
}

body.about .discover .close>span::after {
	transition: all 300ms cubic-bezier(0.47, 0, 0.745, 0.715);
	transition-delay: 0.8s;
	content: "";
	position: absolute;
	border-radius: 5px;
	height: 15px;
	width: 2px;
	background-color: #ff0054;
	transform-origin: bottom;
	margin-left: -5px;
	margin-top: -3px;
	transform: rotate(45deg) scaleY(0)
}

body.about .discover .close.active>span::before {
	transform: rotate(-45deg) scaleY(1);
	transition-delay: 0
}

body.about .discover .close.active>span::after {
	transform: rotate(45deg) scaleY(1);
	transition-delay: 0
}

body.about .discover .open,
body.about .discover .close {
	transition: all 300ms cubic-bezier(0.47, 0, 0.745, 0.715);
	height: 100%;
	position: absolute;
	width: 100%;
	left: 0;
	top: 0;
	opacity: 0
}

body.about .discover .open.active,
body.about .discover .close.active {
	opacity: 1
}

body.about .discover .open a span,
body.about .discover .close a span {
	transform: translateX(5px) translateY(5px);
	opacity: 0
}

body.about .discover .open.active a span,
body.about .discover .close.active a span {
	transform: translateX(0px) translateY(0px);
	opacity: 1
}

body.about .discover:hover {
	height: 200px;
	width: 300px
}

body.about .discover:hover a {
	color: #fff
}

body.about .discover:hover svg {
	stroke: #707f9a
}

body.about .discover>div>a {
	position: absolute;
	right: 80px;
	bottom: 65px
}

body.about .discover a span {
	position: relative;
	display: inline-block
}

@media (max-width: 1250px) {
	body.about .discover {
		height: 100px;
		width: 170px
	}
}

@media (max-width: 600px) {
	body.about .discover {
		height: 70px;
		width: 120px;
		z-index: 2
	}
	body.about .discover:hover {
		width: 100%;
		height: 90px
	}
}

body.about .line-aux {
	width: 45px;
	position: fixed;
	opacity: 1;
	height: 100px;
	left: 82px;
	bottom: 110px;
	z-index: 3;
	opacity: 0;
	visibility: hidden
}

@media (max-width: 1250px) {
	body.about .line-aux {
		left: 50px;
		bottom: 90px
	}
}

@media (max-width: 600px) {
	body.about .line-aux {
		left: 20px;
		bottom: 73px;
		visibility: hidden !important;
		opacity: 0 !important
	}
}

body.about .line-aux::after {
	transition: background-color 500ms cubic-bezier(0.47, 0, 0.745, 0.715);
	content: "";
	background-color: #121212;
	width: 2px;
	height: 10px;
	margin-left: -1px;
	left: 50%;
	bottom: -65px;
	position: absolute
}

body.about .line-aux .line {
	transition: background-color 500ms cubic-bezier(0.47, 0, 0.745, 0.715);
	width: 2px;
	background-color: #121212;
	height: 0;
	margin-left: -1px;
	left: 50%;
	margin-bottom: 10px;
	position: relative
}

@media (max-width: 600px) {
	body.about .line-aux .line {
		display: none
	}
}

@media (max-height: 500px) {
	body.about .line-aux .line {
		display: none
	}
}

body.about .line-aux .counter {
	transition: all 500ms cubic-bezier(0.47, 0, 0.745, 0.715);
	text-transform: uppercase;
	font-family: "Teko", sans-serif;
	font-weight: 500;
	font-size: 18px;
	color: #fff;
	height: 50px;
	width: 100px;
	overflow: hidden;
	text-align: center;
	position: absolute;
	bottom: -50px;
	left: -27px
}

body.about .line-aux .counter .page {
	transition: color 500ms cubic-bezier(0.47, 0, 0.745, 0.715);
	position: absolute;
	right: 50%;
	margin-right: 7px;
	bottom: 20px;
	margin-bottom: 45px;
	text-align: right
}

body.about .line-aux .counter .divider {
	transition: color 500ms cubic-bezier(0.47, 0, 0.745, 0.715);
	position: absolute;
	left: 50%;
	color: #ff0054;
	bottom: 12px;
	transform: translateX(-50%);
	margin-bottom: 45px
}

body.about .line-aux .counter .total {
	transition: color 500ms cubic-bezier(0.47, 0, 0.745, 0.715);
	left: 50%;
	margin-left: 7px;
	position: absolute;
	bottom: 5px;
	margin-bottom: 45px
}

body.about .scroll-position {
	width: 100%;
	position: absolute;
	bottom: 0;
	height: 2px;
	opacity: 0;
	z-index: 2;
	visibility: hidden
}

body.about .scroll-position span {
	position: relative;
	display: block;
	width: 50%;
	background-color: #ff0054;
	height: 100%
}

body.about .line-scroll {
	position: absolute;
	z-index: 2;
	opacity: 0;
	visibility: hidden;
	height: 45px;
	width: 140px;
	left: 500px;
	bottom: 40px;
	overflow: hidden
}

body.about .line-scroll>span {
	position: absolute;
	content: "";
	background-color: #ff0054;
	width: 50%;
	bottom: 0px;
	top: auto !important;
	height: 2px !important;
	z-index: 1;
	animation-name: example;
	animation-duration: 4s;
	animation-iteration-count: infinite
}

body.about .line-scroll::after {
	content: "->";
	position: absolute;
	color: #ff0054;
	margin-left: 15px
}

@media (max-width: 1250px) {
	body.about .line-scroll {
		left: 480px;
		bottom: 20px
	}
}

@media (max-width: 600px) {
	body.about .line-scroll {
		left: 20px;
		bottom: 20px;
		height: 35px
	}
}

body.about .fireworks-plane {
	width: 600px;
	height: 600px;
	left: 340px;
	position: absolute;
	opacity: 0;
	top: 50%;
	transform: translateX(-50%) translateY(-50%) rotateY(180deg);
	perspective: 500px;
	z-index: 1
}

@media (max-width: 1250px) {
	body.about .fireworks-plane {
		transform: translateX(-50%) translateY(-50%) rotateY(180deg) scale(0.6)
	}
}

@media (max-width: 600px) {
	body.about .fireworks-plane {
		transform: translateX(-50%) translateY(-50%) rotateY(180deg) scale(0.4);
		left: 50%
	}
}

body.about .firework-1 {
	position: absolute;
	top: 280px;
	left: 50px;
	overflow: visible;
	stroke: #ff0054;
	stroke-width: 10px;
	stroke-dashoffset: -358;
	transform: rotateX(40deg);
	stroke-dasharray: 0, 10000;
	stroke-linecap: round
}

body.about .firework-1:nth-of-type(2) {
	top: 230px;
	transform: rotateZ(20deg) rotateX(40deg)
}

body.about .firework-2>span {
	height: 100px;
	width: 4px;
	position: absolute;
	left: 190px;
	transform-origin: bottom;
	top: 145px
}

body.about .firework-2>span span {
	content: "";
	height: 0;
	background-color: #ff0054;
	bottom: 0;
	width: 100%;
	position: absolute;
	border-radius: 2px
}

body.about .firework-2>span:nth-of-type(1) {
	transform: rotate(60deg)
}

body.about .firework-2>span:nth-of-type(2) {
	transform: rotate(120deg)
}

body.about .firework-2>span:nth-of-type(3) {
	transform: rotate(180deg)
}

body.about .firework-2>span:nth-of-type(4) {
	transform: rotate(240deg)
}

body.about .firework-2>span:nth-of-type(5) {
	transform: rotate(300deg)
}

body.about .firework-2>span:nth-of-type(6) {
	transform: rotate(360deg)
}

body.about .models {
	height: 100%;
	width: 100%;
	position: absolute;
	overflow: hidden;
	left: 0;
	top: 0;
	z-index: 1
}

body.about .models .project-link>* {
	position: absolute
}

body.about .models .project-link {
	position: absolute;
	height: 100%;
	opacity: 0;
	visibility: hidden;
	width: 100%;
	transform: perspective(1400px)
}

body.about .models .project-link.tech span {
	color: #5bf46d
}

body.about .models .project-link.tech span {
	color: #ff9273
}

body.about .models .project-link.non-tech span {
	color: #a07f5e
}

body.about .models .project-link.simon-cuchillerias span {
	color: #f7ce3c
}

body.about .models .project-link.guild-storm span {
	color: #f76565
}

@media (max-width: 600px) {
	body.about .models .project-link {
		transform: scale(0.5)
	}
}

body.about .models canvas {
	top: 0;
	z-index: 1
}

body.about .models .frame {
	stroke: rgba(112, 127, 154, 0.03);
	stroke-width: 85px;
	height: 600px;
	width: 600px;
	margin: 0;
	padding: 25px;
	border-radius: 50%
}

body.about .models h2 {
	top: 50%;
	left: 400px;
	opacity: 0;
	margin-top: -62px;
	font-size: 24px;
	font-weight: 400;
	white-space: nowrap;
	height: 24px
}

body.about .models small {
	top: 50%;
	left: 400px;
	margin-top: 25px;
	opacity: 0;
	text-transform: uppercase;
	white-space: nowrap
}

body.about .models span {
	top: 50%;
	font-family: "Teko", sans-serif;
	font-size: 18px;
	position: absolute;
	height: 0;
	overflow: hidden;
	margin-top: -45px;
	left: 400px
}

body.about .projects {
	position: absolute;
	width: 100%;
	height: 100%;
	z-index: 1
}

body.about .project-content {
	position: relative;
	z-index: 1
}

body.about .project-content .studio-wrap {
	height: 100%
}

body.about .project-content .studio-wrap .scene {
	height: 100%;
	width: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	position: absolute;
	transform: translateX(100%);
	top: 50%
}

body.about .project-content .studio-wrap .scene .image {
	padding: 40px;
	display: flex;
	align-items: center;
	align-self: stretch;
	justify-content: center
}

body.about .project-content .studio-wrap .scene .video {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 40px;
	position: relative
}

body.about .project-content .studio-wrap .scene .video .video-wrap {
	position: absolute;
	width: 100%;
	height: 100%;
	padding: 40px;
	pointer-events: none;
	z-index: 1
}

@media (max-width: 600px) {
	body.about .project-content .studio-wrap .scene .video::before {
		content: "";
		position: absolute;
		width: 30%;
		padding-top: 30%;
		border-radius: 50%;
		border: 2px solid #ff0054
	}
	body.about .project-content .studio-wrap .scene .video::after {
		content: "";
		position: absolute;
		left: 50%;
		margin-left: -15px;
		border-left: 33px solid #fff;
		border-top: 20px solid transparent;
		border-right: 20px solid transparent;
		border-bottom: 20px solid transparent
	}
}

body.about .project-content .studio-wrap .scene img {
	max-height: 100%;
	max-width: 100%
}

body.about .project-content .studio-wrap .scene .fractured {
	padding: 0
}

body.about .project-content .studio-wrap .scene h2 {
	font-weight: 500;
	display: block;
	font-family: "Teko", sans-serif;
	text-transform: uppercase;
	font-size: 40px;
	line-height: 40px;
	margin-top: 10px;
	margin-bottom: 40px
}

body.about .project-content .studio-wrap .scene h2 span {
	display: inline-block
}

body.about .project-content .studio-wrap .scene .text-title {
	color: #ff0054
}

body.about .project-content .studio-wrap .scene .text-title small {
	color: #707f9a;
	text-transform: uppercase;
	font-weight: bold
}

body.about .project-content .studio-wrap .scene .text-content {
	line-height: 36px;
	color: #fff;
	font-size: 14px
}

@media (max-width: 600px) {
	body.about .project-content .studio-wrap .scene .text-content {
		line-height: 24px;
		font-size: 14px
	}
}

@media (max-height: 500px) {
	body.about .project-content .studio-wrap .scene .text-content {
		line-height: 24px
	}
}

body.about .project-content .studio-wrap .scene.split {
	flex-direction: row;
	align-items: stretch;
	padding: 40px
}

body.about .project-content .studio-wrap .scene.split>div {
	position: relative;
	padding: 20px 10%;
	display: flex;
	flex: 0 0 50%;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	overflow: hidden
}

@media (max-width: 600px) {
	body.about .project-content .studio-wrap .scene.split h2 {
		font-size: 28px;
		line-height: 28px;
		margin: 0 0 10px
	}
}

@media (max-height: 500px) {
	body.about .project-content .studio-wrap .scene.split h2 {
		font-size: 28px;
		line-height: 28px;
		margin: 0 0 10px
	}
}

body.about .project-content .studio-wrap .scene.split.variant {
	position: relative;
	overflow: hidden
}

body.about .project-content .studio-wrap .scene.split.variant .split-right {
	align-items: stretch;
	padding: 20px 0;
	flex-wrap: nowrap;
	overflow: visible
}

body.about .project-content .studio-wrap .scene.split.variant .split-right>div {
	position: absolute;
	top: 40px;
	bottom: 40px
}

body.about .project-content .studio-wrap .scene.split.variant .split-right>div img {
	max-width: none;
	max-height: 100%
}

@media (max-width: 1250px) {
	body.about .project-content .studio-wrap .scene.split {
		padding: 20px
	}
	body.about .project-content .studio-wrap .scene.split>div {
		padding: 20px
	}
}

@media (max-width: 600px) {
	body.about .project-content .studio-wrap .scene.split {
		flex-direction: column;
		padding: 0
	}
	body.about .project-content .studio-wrap .scene.split>div {
		padding: 20px;
		flex: auto
	}
	body.about .project-content .studio-wrap .scene.split.variant .split-right {
		padding: 0 20px
	}
	body.about .project-content .studio-wrap .scene.split.variant .split-right>div {
		left: 20px;
		right: 20px;
		top: 0;
		bottom: 0
	}
	body.about .project-content .studio-wrap .scene.split.variant .split-right>div img {
		max-width: 100%;
		max-height: none
	}
}

@media (max-height: 500px) {
	body.about .project-content .studio-wrap .scene.split {
		flex-direction: column;
		padding: 0
	}
	body.about .project-content .studio-wrap .scene.split>div {
		padding: 20px;
		flex: auto
	}
	body.about .project-content .studio-wrap .scene.split.variant .split-right {
		padding: 0 20px
	}
	body.about .project-content .studio-wrap .scene.split.variant .split-right>div {
		left: 20px;
		right: 20px;
		top: 0;
		bottom: 0
	}
	body.about .project-content .studio-wrap .scene.split.variant .split-right>div img {
		max-width: 100%;
		max-height: none
	}
}

body.about .project-content .studio-wrap .intro {
	align-items: flex-start;
	padding-left: 550px;
	width: calc(100% - 500px);
	padding-right: 20px
}

body.about .project-content .studio-wrap .intro h1 {
	font-family: "Teko", sans-serif;
	font-weight: 500;
	font-size: 72px;
	line-height: 54px;
	text-transform: uppercase;
	padding-right: 100px;
	margin: 20px 0
}

body.about .project-content .studio-wrap .intro h1>span {
	display: block
}

body.about .project-content .studio-wrap .intro h1>span span {
	display: inline-block
}

body.about .project-content .studio-wrap .intro h1 small {
	color: #ff0054;
	display: block;
	margin-left: -52px;
	text-align: right;
	font-size: 46px;
	font-weight: 400;
	line-height: 46px;
	width: 50px;
	margin-bottom: -46px;
	height: 46px
}

@media (max-width: 1250px) {
	body.about .project-content .studio-wrap .intro {
		bottom: 20px;
		padding: 20px 0;
		max-width: 640px;
		width: 100%;
		align-items: stretch;
		justify-content: flex-end
	}
	body.about .project-content .studio-wrap .intro>div {
		height: auto;
		padding: 0 20px 80px;
		text-align: center
	}
	body.about .project-content .studio-wrap .intro h1 {
		display: inline-block;
		width: auto;
		font-size: 48px;
		text-align: center
	}
	body.about .project-content .studio-wrap .intro h1>span {
		display: inline-block
	}
	body.about .project-content .studio-wrap .intro h1 small {
		font-size: 18px;
		line-height: 36px
	}
}

@media (max-width: 600px) {
	body.about .project-content .studio-wrap .intro>div {
		padding-bottom: 100px
	}
	body.about .project-content .studio-wrap .intro>div h1 small {
		display: none
	}
}

@media (max-width: 1400px) {
	body.about .project-content .studio-wrap .intro h1.fractured {
		font-size: 48px;
		line-height: 48px;
		padding-right: 20px
	}
	body.about .project-content .studio-wrap .intro h1.fractured small {
		font-size: 24px;
		line-height: 32px
	}
}

@media (max-height: 500px) {
	body.about .project-content .studio-wrap .intro>div {
		height: auto;
		padding: 0 20px 80px
	}
	body.about .project-content .studio-wrap .intro h1 {
		font-size: 48px;
		line-height: 48px;
		margin-bottom: 0
	}
}

body.about .project-content .studio-next {
	width: 600px;
	max-width: 100%;
	position: absolute;
	border-bottom: 1px solid #121212;
	border-top: 1px solid #121212;
	top: 50%;
	margin-top: -50px;
	left: 100%;
	z-index: 1;
	padding-left: 40px;
	overflow: hidden
}

body.about .project-content .studio-next small {
	font-weight: bold;
	font-size: 11px;
	text-transform: uppercase;
	margin-bottom: -20px;
	margin-top: 10px;
	margin-left: 2px;
	display: block;
	color: #ff0054
}

body.about .project-content .studio-next h4 {
	font-family: "Teko", sans-serif;
	text-transform: uppercase;
	font-size: 60px;
	font-weight: 500;
	margin: 30px 0
}

body.about .project-content .studio-next .button {
	transition: all 500ms cubic-bezier(0.47, 0, 0.745, 0.715);
	width: 40px;
	height: 40px;
	position: absolute;
	right: 30px;
	border: 1px solid #121212;
	top: 50%;
	transform: translateY(-50%)
}

body.about .project-content .studio-next .button::after {
	content: "";
	border-left: solid 3px #fff;
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translateX(-50%) translateY(-50%);
	border-right: solid 3px transparent;
	border-top: solid 3px transparent;
	border-bottom: solid 3px transparent;
	height: 6px;
	width: 6px;
	display: block
}

body.about .project-content .studio-next .progress {
	background-color: #ff0054;
	width: 0%;
	height: 1px;
	position: absolute;
	bottom: 0;
	left: 100%
}

body.about .project-content .studio-next.complete .button {
	border: 1px solid #ff0054
}

@media (max-width: 600px) {
	body.about .project-content .studio-next small {
		margin-bottom: -18px
	}
	body.about .project-content .studio-next h4 {
		font-size: 40px;
		margin: 20px 0
	}
}

body.about .project-details {
	list-style: none;
	display: flex;
	padding: 0;
	padding-left: 2px;
	margin: 0
}

body.about .project-details li {
	opacity: 1;
	margin-bottom: 10px;
	position: relative;
	margin-right: 20px;
	font-family: "Teko", sans-serif;
	text-transform: uppercase;
	font-size: 18px;
	color: #fff
}

body.about .project-details li:last-of-type {
	margin-right: 0
}

body.about .project-details small {
	color: #ff0054;
	font-family: "Rubik", sans-serif;
	font-size: 10px;
	font-weight: 600;
	margin-bottom: -2px;
	display: block
}

@media (max-width: 1250px) {
	body.about .project-details {
		text-align: center;
		justify-content: center
	}
}

body.about .circles {
	position: absolute;
	z-index: 1;
	width: 100%;
	height: 100%
}

body.about .circles .circle-trail {
	stroke: #fff;
	position: absolute;
	height: 550px;
	width: 550px;
	overflow: visible;
	border-radius: 50%;
	stroke-linecap: round;
	stroke-width: 1px;
	opacity: 0;
	stroke-dasharray: 0.2, 10.268;
	left: 50%;
	top: 50%;
	transform: translateY(-50%) translateX(-50%)
}

@media (max-width: 600px) {
	body.about .circles .circle-trail {
		height: 280px;
		width: 280px
	}
}

body.about .circles .circle-progress {
	stroke: #ff0054;
	position: absolute;
	height: 550px;
	width: 550px;
	border-radius: 50%;
	overflow: visible;
	transform-origin: center;
	stroke-width: 1.5px;
	stroke-linecap: round;
	stroke-dasharray: 629;
	stroke-dashoffset: 629;
	left: 50%;
	opacity: 0;
	top: 50%;
	transform: translateY(-50%) translateX(-50%) rotate(270deg)
}

@media (max-width: 600px) {
	body.about .circles .circle-progress {
		height: 280px;
		width: 280px
	}
}

body.about .circles .circle-progress-bullets {
	height: 550px;
	width: 550px;
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translateY(-50%) translateX(-50%)
}

@media (max-width: 600px) {
	body.about .circles .circle-progress-bullets {
		height: 280px;
		width: 280px
	}
}

body.about .circles .circle-progress-bullets .bullet {
	width: 12px;
	height: 100%;
	display: block;
	position: absolute;
	left: 50%;
	margin-left: -6px
}

body.about .circles .circle-progress-bullets .bullet span {
	transition: border 500ms cubic-bezier(0.47, 0, 0.745, 0.715);
	border: 3px solid #ff0054;
	background-color: #000;
	content: "";
	height: 12px;
	opacity: 0;
	width: 12px;
	display: block;
	border-radius: 50%;
	margin-top: -6px;
	transform: scale(0)
}

body.about .circles .circle-progress-bullets .bullet-project {
	position: absolute;
	height: 100%;
	width: 20px;
	left: 50%;
	margin-left: -10px
}

body.about .circles .circle-progress-bullets .bullet-project span {
	transition: background-color 500ms cubic-bezier(0.47, 0, 0.745, 0.715);
	border: 2px solid #121212;
	background-color: #000;
	height: 20px;
	width: 20px;
	display: block;
	border-radius: 50%;
	margin-top: -10px;
	transform: scale(0)
}

body.about .layout {
	position: absolute;
	width: 100%;
	height: 100%
}

body.about .layout .gameboy {
	position: absolute;
	z-index: 100000;
	top: 20px;
	left: 50%
}

body.about .transition {
	position: absolute;
	height: 100%;
	width: 100%;
	overflow: hidden;
	background-color: #f3f2ef;
	opacity: 0;
	visibility: hidden
}

body.about .project {
	left: 50%;
	position: absolute;
	top: 50%;
	width: 50%;
	opacity: 0;
	visibility: hidden;
	padding-left: 120px;
	transform: translateY(-50%)
}

body.about .project h1 {
	color: #fff;
	font-family: "Teko", sans-serif;
	font-size: 72px;
	line-height: 60px;
	font-weight: 400;
	margin: 0 0 30px;
	white-space: nowrap;
	perspective: 400px;
	text-transform: uppercase
}

body.about .project h1>span {
	display: block
}

body.about .project h1>span span {
	display: inline-block;
	position: relative;
	transform-origin: top left
}

@media (max-width: 1250px) {
	body.about .project {
		left: 0;
		width: 100%;
		top: auto;
		bottom: 0;
		padding: 0 20px 100px;
		transform: none
	}
	body.about .project h1 {
		font-size: 72px;
		text-align: center
	}
	body.about .project h1 div {
		display: inline-block
	}
}

@media (max-width: 600px) {
	body.about .project {
		top: auto;
		bottom: 0;
		padding: 0 20px 100px
	}
	body.about .project h1 {
		font-size: 48px;
		line-height: 48px;
		margin-bottom: 0
	}
}

@media (max-height: 500px) {
	body.about .project {
		padding-left: 150px;
		padding-right: 150px;
		padding-bottom: 0;
		bottom: 50%;
		transform: translateY(50%)
	}
	body.about .project h1 {
		text-align: center;
		display: flex;
		justify-content: center;
		font-size: 36px;
		line-height: 36px;
		margin-bottom: 20px
	}
	body.about .project h1>span {
		display: inline-block;
		margin-right: 7px
	}
	body.about .project h1>span:last-of-type {
		margin-right: 0
	}
}

@media (max-width: 600px) {
	body.about.studio .line-aux,
	body.about.about .line-aux {
		opacity: 0 !important;
		visibility: hidden !important
	}
}

@media (max-width: 1250px) {
	body.about.about .line {
		opacity: 0
	}
}

@media (max-width: 600px) {
	body.about.menu .project-link {
		transform: scale(0.8)
	}
}

body.tech {
	transition: all 500ms cubic-bezier(0.47, 0, 0.745, 0.715);
	background: #212322;
	color: #666a6f;
	margin: 0;
	overflow: hidden;
	font-family: "Rubik", sans-serif;
	font-size: 14px;
	line-height: 20px
}

body.tech a {
	transition: color 300ms cubic-bezier(0.47, 0, 0.745, 0.715);
	color: #aebebf;
	text-decoration: none;
	display: inline-block
}

body.tech a.fractured>span {
	display: inline-block
}

body.tech a.fractured>span span {
	display: inline-block;
	font-family: "Rubik", sans-serif;
	line-height: 20px;
	text-transform: none
}

body.tech a:hover {
	color: #76ce97
}

body.tech .gradient {
	position: absolute;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
	opacity: 0.8
}

body.tech .gradient stop {
	transition: all 500ms cubic-bezier(0.47, 0, 0.745, 0.715);
	stop-color: #000
}

body.tech .gradient stop:last-of-type {
	stop-color: #1d2227
}

body.tech .circle-transition {
	position: absolute;
	height: 0;
	width: 0;
	border-radius: 50%;
	transform: translateX(-50%) translateY(-50%);
	left: 50%;
	top: 50%
}

body.tech .logo {
	width: 250px;
	position: fixed;
	opacity: 1;
	z-index: 2;
	left: 80px;
	top: 60px;
	color: #aebebf;
	cursor: pointer
}

body.tech .logo.revert {
	color: #3dde6e
}

body.tech .logo.revert svg {
	fill: #3dde6e
}

@media (max-width: 1250px) {
	body.tech .logo {
		left: 50px;
		top: 40px
	}
}

@media (max-width: 600px) {
	body.tech .logo {
		left: 20px;
		top: 20px
	}
}

body.tech .logo h2 {
	transition: color 500ms cubic-bezier(0.47, 0, 0.745, 0.715);
	font-size: 18px;
	font-weight: 400;
	line-height: normal;
	margin: 8px 0 0;
	display: block
}

body.tech .logo h3 {
	transition: color 500ms cubic-bezier(0.47, 0, 0.745, 0.715);
	font-size: 11px;
	text-transform: uppercase;
	font-weight: 700;
	margin: 0;
	letter-spacing: 0.45px;
	display: none
}

body.tech .logo svg {
	transition: all 500ms cubic-bezier(0.47, 0, 0.745, 0.715);
	fill: #aebebf;
	float: left;
	margin-right: 15px
}

@media (max-width: 600px) {
	body.tech .logo h2,
	body.tech .logo h3 {
		display: none
	}
}

@media (max-height: 500px) {
	body.tech .logo h2,
	body.tech .logo h3 {
		display: none
	}
}

body.tech .mobile-menu {
	transition: fill 500ms cubic-bezier(0.47, 0, 0.745, 0.715);
	position: absolute;
	bottom: 33px;
	fill: #aebebf;
	left: 20px;
	z-index: 2;
	cursor: pointer;
	opacity: 0;
	visibility: hidden;
	display: none
}

@media (max-width: 600px) {
	body.tech .mobile-menu {
		display: block
	}
}

body.tech .menu-top {
	position: fixed;
	right: 80px;
	z-index: 10;
	top: 70px
}

@media (max-width: 1250px) {
	body.tech .menu-top {
		right: 50px;
		top: 50px
	}
}

@media (max-width: 600px) {
	body.tech .menu-top {
		right: 20px;
		top: 30px
	}
}

body.tech .menu-top a {
	padding: 20px;
	padding-right: 0;
	margin-top: -20px;
	opacity: 0;
	visibility: hidden;
	transform: translateY(-10px)
}

body.tech .menu-top a span {
	display: inline-block
}

body.tech .mouse-track {
	pointer-events: none;
	position: absolute;
	z-index: 1000;
	opacity: 0
}

body.tech .mouse-track .outer-circle {
	stroke: #aebebf;
	transform: translateX(-50%) translateY(-50%) rotate(-90deg);
	stroke-width: 2px;
	fill: none;
	height: 18px;
	width: 18px;
	overflow: visible;
	position: absolute
}

body.tech .mouse-track .outer-circle .countdown {
	opacity: 0;
	stroke: #3dde6e;
	position: absolute;
	stroke-dashoffset: 125px;
	stroke-dasharray: 125px;
	stroke-width: 4px
}

body.tech .mouse-track .inner-circle {
	stroke: #aebebf;
	transform: translateX(-50%) translateY(-50%);
	stroke-width: 2px;
	fill: none;
	height: 2px;
	width: 2px;
	opacity: 0.6;
	overflow: visible;
	position: absolute
}

body.tech .mouse-track .arrow-right {
	stroke: #3dde6e;
	opacity: 0;
	visibility: hidden;
	stroke-width: 2px;
	transform: rotate(180deg);
	margin-left: 10px;
	margin-top: -7px;
	position: absolute
}

body.tech .mouse-track .arrow-left {
	stroke: #3dde6e;
	opacity: 0;
	margin-left: -20px;
	margin-top: -6px;
	visibility: hidden;
	stroke-width: 2px;
	position: absolute
}

body.tech .mouse-track .play {
	fill: #aebebf;
	opacity: 1;
	margin-top: -6px;
	stroke-width: 2px;
	margin-top: -18px;
	margin-left: -14px;
	transform: scale(0);
	position: absolute
}

body.tech .mouse-track .stop {
	fill: #aebebf;
	height: 38px;
	width: 38px;
	margin-left: -19px;
	margin-top: -19px;
	transform: scale(0);
	position: absolute
}

@media (max-width: 600px) {
	body.tech .mouse-track {
		opacity: 0 !important;
		visibility: hidden !important
	}
}

body.tech .about-page {
	position: absolute;
	height: 100%;
	width: 100%;
	padding: 40px;
	left: 0;
	opacity: 1;
	top: 0;
	display: flex;
	flex-direction: row;
	visibility: hidden;
	align-items: stretch
}

@media (max-width: 1250px) {
	body.tech .about-page {
		padding: 20px
	}
}

@media (max-width: 600px) {
	body.tech .about-page {
		flex-direction: column;
		padding: 0
	}
}

body.tech .about-page.active .neon-sign {
	animation: flicker 10s infinite
}

body.tech .about-page.active .split-left::before {
	width: 100%;
	bottom: 0
}

body.tech .about-page.active .split-left.shaded::after {
	opacity: 1
}

body.tech .about-page .split-left {
	opacity: 0;
	visibility: hidden;
	overflow: hidden
}

body.tech .about-page .split-left.shaded::after {
	content: "Swipe or Scroll and click image to know more";
	padding-right: 20px;
	line-height: 100px;
	color: #333538;
	text-align: right;
	position: absolute;
	bottom: 0;
	width: 100%;
	opacity: 0;
	transition: all 500ms cubic-bezier(0.47, 0, 0.745, 0.715);
	transition-delay: 1;
	height: 100px;
	background-color: red;
	background: linear-gradient(transparent, #14141a 50%);
	pointer-events: none
}

body.tech .about-page .split-left::before {
	transition: all 500ms cubic-bezier(0.47, 0, 0.745, 0.715);
	content: "";
	position: absolute;
	width: 0%;
	height: 100%;
	left: 0;
	background-color: #14141a;
	z-index: -1;
	bottom: 0
}

body.tech .about-page>* {
	position: relative;
	z-index: 1;
	flex: 0 0 50%;
	display: flex;
	align-items: center
}

body.tech .about-page .gradient-about {
	background-color: red;
	position: absolute;
	width: 100%;
	height: 100%;
	z-index: 1;
	top: 0;
	left: 0;
	-webkit-mask-image: url("../smoke-sprite.png");
	-webkit-mask-size: 3000% 100%;
	-webkit-mask-position-x: 0%;
	animation-iteration-count: 1;
	animation-delay: 1s
}

body.tech .about-page .gradient-about.active {
	animation: mask 1.5s steps(29) forwards
}

body.tech .about-page .gradient-about stop {
	transition: all 500ms cubic-bezier(0.47, 0, 0.745, 0.715);
	stop-color: #292038
}

body.tech .about-page .gradient-about stop:last-of-type {
	stop-color: #18181d
}

@media (max-width: 600px) {
	body.tech .about-page .gradient-about stop {
		transition: all 500ms cubic-bezier(0.47, 0, 0.745, 0.715);
		stop-color: #18181d
	}
	body.tech .about-page .gradient-about stop:last-of-type {
		stop-color: #18181d
	}
}

body.tech .about-page .about-text {
	position: absolute;
	padding: 120px;
	padding-right: 240px
}

body.tech .about-page .about-text h1 {
	color: #3dde6e;
	white-space: nowrap;
	font-weight: 500;
	display: block;
	font-family: "Teko", sans-serif;
	text-transform: uppercase;
	font-size: 40px;
	line-height: 40px;
	margin-top: 10px;
	margin-bottom: 40px
}

@media (max-width: 600px) {
	body.tech .about-page .about-text h1 {
		font-size: 28px;
		line-height: 28px;
		margin: 0 0 20px
	}
}

body.tech .about-page .about-text h1>span {
	display: block
}

body.tech .about-page .about-text h1>span span {
	display: inline-block
}

body.tech .about-page .about-text p {
	opacity: 0;
	font-size: 16px;
	line-height: 32px
}

@media (max-width: 600px) {
	body.tech .about-page .about-text p {
		line-height: 24px
	}
}

@media (max-width: 1250px) {
	body.tech .about-page .about-text {
		padding-left: 40px;
		padding-right: 40px
	}
}

@media (max-width: 600px) {
	body.tech .about-page .about-text {
		padding-left: 20px;
		padding-right: 20px
	}
}

body.tech .about-page .about-render {
	position: absolute;
	visibility: hidden;
	top: 0%;
	opacity: 0;
	right: 0;
	width: 140%;
	height: 100%;
	transform: translateY(0) scale(1);
	z-index: 1;
	pointer-events: none
}

@media (max-width: 1250px) {
	body.tech .about-page .about-render {
		width: 100%
	}
}

@media (max-width: 600px) {
	body.tech .about-page .about-render {
		width: 100%
	}
}

body.tech .about-page .about-render canvas {
	position: absolute;
	transform: translateY(-50%);
	top: 50%
}

body.tech .about-page .neon-sign {
	opacity: 0;
	height: 570px;
	width: 140%;
	position: absolute;
	text-transform: uppercase;
	font-size: 46px;
	color: #ff0054;
	right: 260px;
	top: -30px;
	transform: scale(0.5) perspective(900px) translateZ(-300px) rotateY(-10deg) rotateX(0deg) rotateZ(0deg) skewY(9deg);
	filter: blur(2px) brightness(2)
}

body.tech .about-page .neon-sign::before {
	content: "";
	width: 410px;
	height: 100%;
	position: absolute;
	left: 100%
}

@media (max-width: 1250px) {
	body.tech .about-page .neon-sign {
		display: none
	}
}

@media (max-width: 600px) {
	body.tech .about-page .neon-sign {
		display: none
	}
}

body.tech .about-page .neon-sign::after {
	content: "";
	border: 6px solid #ff0054;
	width: 210px;
	height: 100%;
	position: absolute;
	right: 0
}

body.tech .about-page .neon-sign.var-1 {
	transform: scale(0.7) perspective(900px) rotateY(-8deg) rotateX(0deg) rotateZ(0deg) skewY(9deg) translateX(150px)
}

body.tech .about-page .neon-sign.var-2 {
	transform: scale(0.7) perspective(900px) rotateY(-6deg) rotateX(0deg) rotateZ(0deg) skewY(6deg) translateY(6px) translateX(140px)
}

body.tech .about-page .neon-sign>* {
	position: absolute
}

body.tech .about-page .neon-sign .code {
	top: 40px;
	right: 42px;
	animation: flicker 5s infinite
}

body.tech .about-page .neon-sign .and {
	top: 94px;
	color: #00e4ff;
	font-size: 80px;
	right: 70px
}

body.tech .about-page .neon-sign .design {
	top: 145px;
	right: 19px
}

body.tech .about-page .neon-sign .key {
	animation: fade 2s steps(1) infinite;
	animation-direction: reverse;
	bottom: 45px;
	right: 53px
}

body.tech .about-page .neon-sign .key-pressed {
	animation: fade 2s steps(1) infinite;
	animation-direction: normal;
	bottom: 40px;
	right: 19px
}

body.tech .about-page .neon-sign .hand {
	animation: hand 2s steps(1) infinite;
	right: 30px;
	bottom: 100px
}

body.tech .about-page .neon-sign .key-base {
	bottom: 20px;
	right: 45px
}

body.tech .introduction {
	position: absolute;
	background-color: #000;
	height: 100%;
	width: 100%;
	top: 0;
	left: 0;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center
}

body.tech .introduction .skip {
	padding: 30px;
	position: absolute;
	bottom: 50px;
	font-size: 16px;
	color: #666a6f;
	cursor: pointer
}

body.tech .intro-text {
	transition: color 500ms cubic-bezier(0.47, 0, 0.745, 0.715);
	position: absolute;
	bottom: 50%;
	z-index: 1;
	width: 100%;
	padding: 0 10px;
	text-align: center;
	font-size: 24px;
	color: #aebebf
}

body.tech .intro-text.tutorial {
	font-size: 16px;
	bottom: 70px
}

body.tech .intro-text span {
	display: inline-block
}

@media (max-width: 1250px) {
	body.tech .intro-text.tutorial {
		bottom: 40px
	}
}

@media (max-width: 600px) {
	body.tech .intro-text {
		font-size: 16px
	}
	body.tech .intro-text.tutorial {
		bottom: auto;
		top: 140px
	}
}

body.tech .discover {
	opacity: 0;
	visibility: hidden;
	color: #3dde6e;
	position: absolute;
	bottom: 0;
	right: 0;
	height: 160px;
	width: 240px;
	z-index: 100;
	cursor: pointer
}

body.tech .discover .open>span {
	position: absolute;
	height: 14px;
	width: 7px;
	bottom: 65px;
	right: 80px;
	transform: translateX(-80px)
}

body.tech .discover .open>span::before {
	transition: all 300ms cubic-bezier(0.47, 0, 0.745, 0.715);
	transition-property: background-color, transform, opacity;
	transition-delay: 0s, 0.8s, 0.8s;
	content: "";
	position: absolute;
	border-radius: 10px 10px 20px 0;
	height: 8px;
	transform-origin: top left;
	width: 1.5px;
	background-color: #3dde6e;
	transform: rotate(-45deg) scaleY(4);
	opacity: 0
}

body.tech .discover .open>span::after {
	transition: all 300ms cubic-bezier(0.47, 0, 0.745, 0.715);
	transition-property: background-color, transform, opacity;
	transition-delay: 0s, 1.1s, 1.1s;
	content: "";
	position: absolute;
	border-radius: 0 20px 10px 10px;
	height: 8px;
	transform-origin: bottom left;
	margin-top: 1px;
	width: 1.5px;
	background-color: #3dde6e;
	transform: rotate(45deg) scaleY(4);
	opacity: 0
}

body.tech .discover .open.active>span::before {
	transform: rotate(-45deg) scaleY(1);
	opacity: 1;
	transition-delay: 0
}

body.tech .discover .open.active>span::after {
	transform: rotate(45deg) scaleY(1);
	opacity: 1;
	transition-delay: 0
}

body.tech .discover .close>span {
	position: absolute;
	height: 17px;
	width: 7px;
	bottom: 65px;
	right: 80px;
	transform: translateX(-57px)
}

body.tech .discover .close>span::before {
	transition: all 300ms cubic-bezier(0.47, 0, 0.745, 0.715);
	transition-delay: 1.1s;
	content: "";
	position: absolute;
	border-radius: 5px;
	height: 15px;
	width: 2px;
	margin-left: -5px;
	margin-top: 1px;
	background-color: #3dde6e;
	transform-origin: top;
	transform: rotate(-45deg) scaleY(0)
}

body.tech .discover .close>span::after {
	transition: all 300ms cubic-bezier(0.47, 0, 0.745, 0.715);
	transition-delay: 0.8s;
	content: "";
	position: absolute;
	border-radius: 5px;
	height: 15px;
	width: 2px;
	background-color: #3dde6e;
	transform-origin: bottom;
	margin-left: -5px;
	margin-top: -3px;
	transform: rotate(45deg) scaleY(0)
}

body.tech .discover .close.active>span::before {
	transform: rotate(-45deg) scaleY(1);
	transition-delay: 0
}

body.tech .discover .close.active>span::after {
	transform: rotate(45deg) scaleY(1);
	transition-delay: 0
}

body.tech .discover .open,
body.tech .discover .close {
	transition: all 300ms cubic-bezier(0.47, 0, 0.745, 0.715);
	height: 100%;
	position: absolute;
	width: 100%;
	left: 0;
	top: 0;
	opacity: 0
}

body.tech .discover .open.active,
body.tech .discover .close.active {
	opacity: 1
}

body.tech .discover .open a span,
body.tech .discover .close a span {
	transform: translateX(5px) translateY(5px);
	opacity: 0
}

body.tech .discover .open.active a span,
body.tech .discover .close.active a span {
	transform: translateX(0px) translateY(0px);
	opacity: 1
}

body.tech .discover:hover {
	height: 200px;
	width: 300px
}

body.tech .discover:hover a {
	color: #aebebf
}

body.tech .discover:hover svg {
	stroke: #666a6f
}

body.tech .discover>div>a {
	position: absolute;
	right: 80px;
	bottom: 65px
}

body.tech .discover a span {
	position: relative;
	display: inline-block
}

@media (max-width: 1250px) {
	body.tech .discover {
		height: 100px;
		width: 170px
	}
}

@media (max-width: 600px) {
	body.tech .discover {
		height: 70px;
		width: 120px;
		z-index: 2
	}
	body.tech .discover:hover {
		width: 100%;
		height: 90px
	}
}

body.tech .line-aux {
	width: 45px;
	position: fixed;
	opacity: 1;
	height: 100px;
	left: 82px;
	bottom: 110px;
	z-index: 3;
	opacity: 0;
	visibility: hidden
}

@media (max-width: 1250px) {
	body.tech .line-aux {
		left: 50px;
		bottom: 90px
	}
}

@media (max-width: 600px) {
	body.tech .line-aux {
		left: 20px;
		bottom: 73px;
		visibility: hidden !important;
		opacity: 0 !important
	}
}

body.tech .line-aux::after {
	transition: background-color 500ms cubic-bezier(0.47, 0, 0.745, 0.715);
	content: "";
	background-color: #1e2228;
	width: 2px;
	height: 10px;
	margin-left: -1px;
	left: 50%;
	bottom: -65px;
	position: absolute
}

body.tech .line-aux .line {
	transition: background-color 500ms cubic-bezier(0.47, 0, 0.745, 0.715);
	width: 2px;
	background-color: #1e2228;
	height: 0;
	margin-left: -1px;
	left: 50%;
	margin-bottom: 10px;
	position: relative
}

@media (max-width: 600px) {
	body.tech .line-aux .line {
		display: none
	}
}

@media (max-height: 500px) {
	body.tech .line-aux .line {
		display: none
	}
}

body.tech .line-aux .counter {
	transition: all 500ms cubic-bezier(0.47, 0, 0.745, 0.715);
	text-transform: uppercase;
	font-family: "Teko", sans-serif;
	font-weight: 500;
	font-size: 18px;
	color: #aebebf;
	height: 50px;
	width: 100px;
	overflow: hidden;
	text-align: center;
	position: absolute;
	bottom: -50px;
	left: -27px
}

body.tech .line-aux .counter .page {
	transition: color 500ms cubic-bezier(0.47, 0, 0.745, 0.715);
	position: absolute;
	right: 50%;
	margin-right: 7px;
	bottom: 20px;
	margin-bottom: 45px;
	text-align: right
}

body.tech .line-aux .counter .divider {
	transition: color 500ms cubic-bezier(0.47, 0, 0.745, 0.715);
	position: absolute;
	left: 50%;
	color: #3dde6e;
	bottom: 12px;
	transform: translateX(-50%);
	margin-bottom: 45px
}

body.tech .line-aux .counter .total {
	transition: color 500ms cubic-bezier(0.47, 0, 0.745, 0.715);
	left: 50%;
	margin-left: 7px;
	position: absolute;
	bottom: 5px;
	margin-bottom: 45px
}

body.tech .scroll-position {
	width: 100%;
	position: absolute;
	bottom: 0;
	height: 2px;
	opacity: 0;
	z-index: 2;
	visibility: hidden
}

body.tech .scroll-position span {
	position: relative;
	display: block;
	width: 50%;
	background-color: #3dde6e;
	height: 100%
}

body.tech .line-scroll {
	position: absolute;
	z-index: 2;
	opacity: 0;
	visibility: hidden;
	height: 45px;
	width: 140px;
	left: 500px;
	bottom: 40px;
	overflow: hidden
}

body.tech .line-scroll>span {
	position: absolute;
	content: "";
	background-color: #3dde6e;
	width: 50%;
	bottom: 0px;
	top: auto !important;
	height: 2px !important;
	z-index: 1;
	animation-name: example;
	animation-duration: 4s;
	animation-iteration-count: infinite
}

body.tech .line-scroll::after {
	content: "->";
	position: absolute;
	color: #3dde6e;
	margin-left: 15px
}

@media (max-width: 1250px) {
	body.tech .line-scroll {
		left: 480px;
		bottom: 20px
	}
}

@media (max-width: 600px) {
	body.tech .line-scroll {
		left: 20px;
		bottom: 20px;
		height: 35px
	}
}

body.tech .fireworks-plane {
	width: 600px;
	height: 600px;
	left: 340px;
	position: absolute;
	opacity: 0;
	top: 50%;
	transform: translateX(-50%) translateY(-50%) rotateY(180deg);
	perspective: 500px;
	z-index: 1
}

@media (max-width: 1250px) {
	body.tech .fireworks-plane {
		transform: translateX(-50%) translateY(-50%) rotateY(180deg) scale(0.6)
	}
}

@media (max-width: 600px) {
	body.tech .fireworks-plane {
		transform: translateX(-50%) translateY(-50%) rotateY(180deg) scale(0.4);
		left: 50%
	}
}

body.tech .firework-1 {
	position: absolute;
	top: 280px;
	left: 50px;
	overflow: visible;
	stroke: #3dde6e;
	stroke-width: 10px;
	stroke-dashoffset: -358;
	transform: rotateX(40deg);
	stroke-dasharray: 0, 10000;
	stroke-linecap: round
}

body.tech .firework-1:nth-of-type(2) {
	top: 230px;
	transform: rotateZ(20deg) rotateX(40deg)
}

body.tech .firework-2>span {
	height: 100px;
	width: 4px;
	position: absolute;
	left: 190px;
	transform-origin: bottom;
	top: 145px
}

body.tech .firework-2>span span {
	content: "";
	height: 0;
	background-color: #3dde6e;
	bottom: 0;
	width: 100%;
	position: absolute;
	border-radius: 2px
}

body.tech .firework-2>span:nth-of-type(1) {
	transform: rotate(60deg)
}

body.tech .firework-2>span:nth-of-type(2) {
	transform: rotate(120deg)
}

body.tech .firework-2>span:nth-of-type(3) {
	transform: rotate(180deg)
}

body.tech .firework-2>span:nth-of-type(4) {
	transform: rotate(240deg)
}

body.tech .firework-2>span:nth-of-type(5) {
	transform: rotate(300deg)
}

body.tech .firework-2>span:nth-of-type(6) {
	transform: rotate(360deg)
}

body.tech .models {
	height: 100%;
	width: 100%;
	position: absolute;
	overflow: hidden;
	left: 0;
	top: 0;
	z-index: 1
}

body.tech .models .project-link>* {
	position: absolute
}

body.tech .models .project-link {
	position: absolute;
	height: 100%;
	opacity: 0;
	visibility: hidden;
	width: 100%;
	transform: perspective(1400px)
}

body.tech .models .project-link.tech span {
	color: #5bf46d
}

body.tech .models .project-link.tech span {
	color: #ff9273
}

body.tech .models .project-link.non-tech span {
	color: #a07f5e
}

body.tech .models .project-link.simon-cuchillerias span {
	color: #f7ce3c
}

body.tech .models .project-link.guild-storm span {
	color: #f76565
}

@media (max-width: 600px) {
	body.tech .models .project-link {
		transform: scale(0.5)
	}
}

body.tech .models canvas {
	top: 0;
	z-index: 1
}

body.tech .models .frame {
	stroke: rgba(102, 106, 111, 0.03);
	stroke-width: 85px;
	height: 600px;
	width: 600px;
	margin: 0;
	padding: 25px;
	border-radius: 50%
}

body.tech .models h2 {
	top: 50%;
	left: 400px;
	opacity: 0;
	margin-top: -62px;
	font-size: 24px;
	font-weight: 400;
	white-space: nowrap;
	height: 24px
}

body.tech .models small {
	top: 50%;
	left: 400px;
	margin-top: 25px;
	opacity: 0;
	text-transform: uppercase;
	white-space: nowrap
}

body.tech .models span {
	top: 50%;
	font-family: "Teko", sans-serif;
	font-size: 18px;
	position: absolute;
	height: 0;
	overflow: hidden;
	margin-top: -45px;
	left: 400px
}

body.tech .projects {
	position: absolute;
	width: 100%;
	height: 100%;
	z-index: 1
}

body.tech .project-content {
	position: relative;
	z-index: 1
}

body.tech .project-content .studio-wrap {
	height: 100%
}

body.tech .project-content .studio-wrap .scene {
	height: 100%;
	width: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	position: absolute;
	transform: translateX(100%);
	top: 50%
}

body.tech .project-content .studio-wrap .scene .image {
	padding: 40px;
	display: flex;
	align-items: center;
	align-self: stretch;
	justify-content: center
}

body.tech .project-content .studio-wrap .scene .video {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 40px;
	position: relative
}

body.tech .project-content .studio-wrap .scene .video .video-wrap {
	position: absolute;
	width: 100%;
	height: 100%;
	padding: 40px;
	pointer-events: none;
	z-index: 1
}

@media (max-width: 600px) {
	body.tech .project-content .studio-wrap .scene .video::before {
		content: "";
		position: absolute;
		width: 30%;
		padding-top: 30%;
		border-radius: 50%;
		border: 2px solid #3dde6e
	}
	body.tech .project-content .studio-wrap .scene .video::after {
		content: "";
		position: absolute;
		left: 50%;
		margin-left: -15px;
		border-left: 33px solid #aebebf;
		border-top: 20px solid transparent;
		border-right: 20px solid transparent;
		border-bottom: 20px solid transparent
	}
}

body.tech .project-content .studio-wrap .scene img {
	max-height: 100%;
	max-width: 100%
}

body.tech .project-content .studio-wrap .scene .fractured {
	padding: 0
}

body.tech .project-content .studio-wrap .scene h2 {
	font-weight: 500;
	display: block;
	font-family: "Teko", sans-serif;
	text-transform: uppercase;
	font-size: 40px;
	line-height: 40px;
	margin-top: 10px;
	margin-bottom: 40px
}

body.tech .project-content .studio-wrap .scene h2 span {
	display: inline-block
}

body.tech .project-content .studio-wrap .scene .text-title {
	color: #3dde6e
}

body.tech .project-content .studio-wrap .scene .text-title small {
	color: #666a6f;
	text-transform: uppercase;
	font-weight: bold
}

body.tech .project-content .studio-wrap .scene .text-content {
	line-height: 36px;
	color: #aebebf;
	font-size: 14px
}

@media (max-width: 600px) {
	body.tech .project-content .studio-wrap .scene .text-content {
		line-height: 24px;
		font-size: 14px
	}
}

@media (max-height: 500px) {
	body.tech .project-content .studio-wrap .scene .text-content {
		line-height: 24px
	}
}

body.tech .project-content .studio-wrap .scene.split {
	flex-direction: row;
	align-items: stretch;
	padding: 40px
}

body.tech .project-content .studio-wrap .scene.split>div {
	position: relative;
	padding: 20px 10%;
	display: flex;
	flex: 0 0 50%;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	overflow: hidden
}

@media (max-width: 600px) {
	body.tech .project-content .studio-wrap .scene.split h2 {
		font-size: 28px;
		line-height: 28px;
		margin: 0 0 10px
	}
}

@media (max-height: 500px) {
	body.tech .project-content .studio-wrap .scene.split h2 {
		font-size: 28px;
		line-height: 28px;
		margin: 0 0 10px
	}
}

body.tech .project-content .studio-wrap .scene.split.variant {
	position: relative;
	overflow: hidden
}

body.tech .project-content .studio-wrap .scene.split.variant .split-right {
	align-items: stretch;
	padding: 20px 0;
	flex-wrap: nowrap;
	overflow: visible
}

body.tech .project-content .studio-wrap .scene.split.variant .split-right>div {
	position: absolute;
	top: 40px;
	bottom: 40px
}

body.tech .project-content .studio-wrap .scene.split.variant .split-right>div img {
	max-width: none;
	max-height: 100%
}

@media (max-width: 1250px) {
	body.tech .project-content .studio-wrap .scene.split {
		padding: 20px
	}
	body.tech .project-content .studio-wrap .scene.split>div {
		padding: 20px
	}
}

@media (max-width: 600px) {
	body.tech .project-content .studio-wrap .scene.split {
		flex-direction: column;
		padding: 0
	}
	body.tech .project-content .studio-wrap .scene.split>div {
		padding: 20px;
		flex: auto
	}
	body.tech .project-content .studio-wrap .scene.split.variant .split-right {
		padding: 0 20px
	}
	body.tech .project-content .studio-wrap .scene.split.variant .split-right>div {
		left: 20px;
		right: 20px;
		top: 0;
		bottom: 0
	}
	body.tech .project-content .studio-wrap .scene.split.variant .split-right>div img {
		max-width: 100%;
		max-height: none
	}
}

@media (max-height: 500px) {
	body.tech .project-content .studio-wrap .scene.split {
		flex-direction: column;
		padding: 0
	}
	body.tech .project-content .studio-wrap .scene.split>div {
		padding: 20px;
		flex: auto
	}
	body.tech .project-content .studio-wrap .scene.split.variant .split-right {
		padding: 0 20px
	}
	body.tech .project-content .studio-wrap .scene.split.variant .split-right>div {
		left: 20px;
		right: 20px;
		top: 0;
		bottom: 0
	}
	body.tech .project-content .studio-wrap .scene.split.variant .split-right>div img {
		max-width: 100%;
		max-height: none
	}
}

body.tech .project-content .studio-wrap .intro {
	align-items: flex-start;
	padding-left: 550px;
	width: calc(100% - 500px);
	padding-right: 20px
}

body.tech .project-content .studio-wrap .intro h1 {
	font-family: "Teko", sans-serif;
	font-weight: 500;
	font-size: 72px;
	line-height: 54px;
	text-transform: uppercase;
	padding-right: 100px;
	margin: 20px 0
}

body.tech .project-content .studio-wrap .intro h1>span {
	display: block
}

body.tech .project-content .studio-wrap .intro h1>span span {
	display: inline-block
}

body.tech .project-content .studio-wrap .intro h1 small {
	color: #3dde6e;
	display: block;
	margin-left: -52px;
	text-align: right;
	font-size: 46px;
	font-weight: 400;
	line-height: 46px;
	width: 50px;
	margin-bottom: -46px;
	height: 46px
}

@media (max-width: 1250px) {
	body.tech .project-content .studio-wrap .intro {
		bottom: 20px;
		padding: 20px 0;
		max-width: 640px;
		width: 100%;
		align-items: stretch;
		justify-content: flex-end
	}
	body.tech .project-content .studio-wrap .intro>div {
		height: auto;
		padding: 0 20px 80px;
		text-align: center
	}
	body.tech .project-content .studio-wrap .intro h1 {
		display: inline-block;
		width: auto;
		font-size: 48px;
		text-align: center
	}
	body.tech .project-content .studio-wrap .intro h1>span {
		display: inline-block
	}
	body.tech .project-content .studio-wrap .intro h1 small {
		font-size: 18px;
		line-height: 36px
	}
}

@media (max-width: 600px) {
	body.tech .project-content .studio-wrap .intro>div {
		padding-bottom: 100px
	}
	body.tech .project-content .studio-wrap .intro>div h1 small {
		display: none
	}
}

@media (max-width: 1400px) {
	body.tech .project-content .studio-wrap .intro h1.fractured {
		font-size: 48px;
		line-height: 48px;
		padding-right: 20px
	}
	body.tech .project-content .studio-wrap .intro h1.fractured small {
		font-size: 24px;
		line-height: 32px
	}
}

@media (max-height: 500px) {
	body.tech .project-content .studio-wrap .intro>div {
		height: auto;
		padding: 0 20px 80px
	}
	body.tech .project-content .studio-wrap .intro h1 {
		font-size: 48px;
		line-height: 48px;
		margin-bottom: 0
	}
}

body.tech .project-content .studio-next {
	width: 600px;
	max-width: 100%;
	position: absolute;
	border-bottom: 1px solid #1e2228;
	border-top: 1px solid #1e2228;
	top: 50%;
	margin-top: -50px;
	left: 100%;
	z-index: 1;
	padding-left: 40px;
	overflow: hidden
}

body.tech .project-content .studio-next small {
	font-weight: bold;
	font-size: 11px;
	text-transform: uppercase;
	margin-bottom: -20px;
	margin-top: 10px;
	margin-left: 2px;
	display: block;
	color: #3dde6e
}

body.tech .project-content .studio-next h4 {
	font-family: "Teko", sans-serif;
	text-transform: uppercase;
	font-size: 60px;
	font-weight: 500;
	margin: 30px 0
}

body.tech .project-content .studio-next .button {
	transition: all 500ms cubic-bezier(0.47, 0, 0.745, 0.715);
	width: 40px;
	height: 40px;
	position: absolute;
	right: 30px;
	border: 1px solid #1e2228;
	top: 50%;
	transform: translateY(-50%)
}

body.tech .project-content .studio-next .button::after {
	content: "";
	border-left: solid 3px #aebebf;
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translateX(-50%) translateY(-50%);
	border-right: solid 3px transparent;
	border-top: solid 3px transparent;
	border-bottom: solid 3px transparent;
	height: 6px;
	width: 6px;
	display: block
}

body.tech .project-content .studio-next .progress {
	background-color: #3dde6e;
	width: 0%;
	height: 1px;
	position: absolute;
	bottom: 0;
	left: 100%
}

body.tech .project-content .studio-next.complete .button {
	border: 1px solid #3dde6e
}

@media (max-width: 600px) {
	body.tech .project-content .studio-next small {
		margin-bottom: -18px
	}
	body.tech .project-content .studio-next h4 {
		font-size: 40px;
		margin: 20px 0
	}
}

body.tech .project-details {
	list-style: none;
	display: flex;
	padding: 0;
	padding-left: 2px;
	margin: 0
}

body.tech .project-details li {
	opacity: 1;
	margin-bottom: 10px;
	position: relative;
	margin-right: 20px;
	font-family: "Teko", sans-serif;
	text-transform: uppercase;
	font-size: 18px;
	color: #aebebf
}

body.tech .project-details li:last-of-type {
	margin-right: 0
}

body.tech .project-details small {
	color: #3dde6e;
	font-family: "Rubik", sans-serif;
	font-size: 10px;
	font-weight: 600;
	margin-bottom: -2px;
	display: block
}

@media (max-width: 1250px) {
	body.tech .project-details {
		text-align: center;
		justify-content: center
	}
}

body.tech .circles {
	position: absolute;
	z-index: 1;
	width: 100%;
	height: 100%
}

body.tech .circles .circle-trail {
	stroke: #aebebf;
	position: absolute;
	height: 550px;
	width: 550px;
	overflow: visible;
	border-radius: 50%;
	stroke-linecap: round;
	stroke-width: 1px;
	opacity: 0;
	stroke-dasharray: 0.2, 10.268;
	left: 50%;
	top: 50%;
	transform: translateY(-50%) translateX(-50%)
}

@media (max-width: 600px) {
	body.tech .circles .circle-trail {
		height: 280px;
		width: 280px
	}
}

body.tech .circles .circle-progress {
	stroke: #3dde6e;
	position: absolute;
	height: 550px;
	width: 550px;
	border-radius: 50%;
	overflow: visible;
	transform-origin: center;
	stroke-width: 1.5px;
	stroke-linecap: round;
	stroke-dasharray: 629;
	stroke-dashoffset: 629;
	left: 50%;
	opacity: 0;
	top: 50%;
	transform: translateY(-50%) translateX(-50%) rotate(270deg)
}

@media (max-width: 600px) {
	body.tech .circles .circle-progress {
		height: 280px;
		width: 280px
	}
}

body.tech .circles .circle-progress-bullets {
	height: 550px;
	width: 550px;
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translateY(-50%) translateX(-50%)
}

@media (max-width: 600px) {
	body.tech .circles .circle-progress-bullets {
		height: 280px;
		width: 280px
	}
}

body.tech .circles .circle-progress-bullets .bullet {
	width: 12px;
	height: 100%;
	display: block;
	position: absolute;
	left: 50%;
	margin-left: -6px
}

body.tech .circles .circle-progress-bullets .bullet span {
	transition: border 500ms cubic-bezier(0.47, 0, 0.745, 0.715);
	border: 3px solid #3dde6e;
	background-color: #1d2227;
	content: "";
	height: 12px;
	opacity: 0;
	width: 12px;
	display: block;
	border-radius: 50%;
	margin-top: -6px;
	transform: scale(0)
}

body.tech .circles .circle-progress-bullets .bullet-project {
	position: absolute;
	height: 100%;
	width: 20px;
	left: 50%;
	margin-left: -10px
}

body.tech .circles .circle-progress-bullets .bullet-project span {
	transition: background-color 500ms cubic-bezier(0.47, 0, 0.745, 0.715);
	border: 2px solid #1e2228;
	background-color: #0f1114;
	height: 20px;
	width: 20px;
	display: block;
	border-radius: 50%;
	margin-top: -10px;
	transform: scale(0)
}

body.tech .layout {
	position: absolute;
	width: 100%;
	height: 100%
}

body.tech .layout .gameboy {
	position: absolute;
	z-index: 100000;
	top: 20px;
	left: 50%
}

body.tech .transition {
	position: absolute;
	height: 100%;
	width: 100%;
	overflow: hidden;
	background-color: #f3f2ef;
	opacity: 0;
	visibility: hidden
}

body.tech .project {
	left: 50%;
	position: absolute;
	top: 50%;
	width: 50%;
	opacity: 0;
	visibility: hidden;
	padding-left: 120px;
	transform: translateY(-50%)
}

body.tech .project h1 {
	color: #aebebf;
	font-family: "Teko", sans-serif;
	font-size: 72px;
	line-height: 60px;
	font-weight: 400;
	margin: 0 0 30px;
	white-space: nowrap;
	perspective: 400px;
	text-transform: uppercase
}

body.tech .project h1>span {
	display: block
}

body.tech .project h1>span span {
	display: inline-block;
	position: relative;
	transform-origin: top left
}

@media (max-width: 1250px) {
	body.tech .project {
		left: 0;
		width: 100%;
		top: auto;
		bottom: 0;
		padding: 0 20px 100px;
		transform: none
	}
	body.tech .project h1 {
		font-size: 72px;
		text-align: center
	}
	body.tech .project h1 div {
		display: inline-block
	}
}

@media (max-width: 600px) {
	body.tech .project {
		top: auto;
		bottom: 0;
		padding: 0 20px 100px
	}
	body.tech .project h1 {
		font-size: 48px;
		line-height: 48px;
		margin-bottom: 0
	}
}

@media (max-height: 500px) {
	body.tech .project {
		padding-left: 150px;
		padding-right: 150px;
		padding-bottom: 0;
		bottom: 50%;
		transform: translateY(50%)
	}
	body.tech .project h1 {
		text-align: center;
		display: flex;
		justify-content: center;
		font-size: 36px;
		line-height: 36px;
		margin-bottom: 20px
	}
	body.tech .project h1>span {
		display: inline-block;
		margin-right: 7px
	}
	body.tech .project h1>span:last-of-type {
		margin-right: 0
	}
}

@media (max-width: 600px) {
	body.tech.studio .line-aux,
	body.tech.about .line-aux {
		opacity: 0 !important;
		visibility: hidden !important
	}
}

@media (max-width: 1250px) {
	body.tech.about .line {
		opacity: 0
	}
}

@media (max-width: 600px) {
	body.tech.menu .project-link {
		transform: scale(0.8)
	}
}

body.tech.studio {
	transition: all 500ms cubic-bezier(0.47, 0, 0.745, 0.715);
	background: #212322;
	color: #404a45;
	margin: 0;
	overflow: hidden;
	font-family: "Rubik", sans-serif;
	font-size: 14px;
	line-height: 20px
}

body.tech.studio a {
	transition: color 300ms cubic-bezier(0.47, 0, 0.745, 0.715);
	color: #ebefdd;
	text-decoration: none;
	display: inline-block
}

body.tech.studio a.fractured>span {
	display: inline-block
}

body.tech.studio a.fractured>span span {
	display: inline-block;
	font-family: "Rubik", sans-serif;
	line-height: 20px;
	text-transform: none
}

body.tech.studio a:hover {
	color: #94e7a6
}

body.tech.studio .gradient {
	position: absolute;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
	opacity: 0.8
}

body.tech.studio .gradient stop {
	transition: all 500ms cubic-bezier(0.47, 0, 0.745, 0.715);
	stop-color: #212322
}

body.tech.studio .gradient stop:last-of-type {
	stop-color: #212322
}

body.tech.studio .circle-transition {
	position: absolute;
	height: 0;
	width: 0;
	border-radius: 50%;
	transform: translateX(-50%) translateY(-50%);
	left: 50%;
	top: 50%
}

body.tech.studio .logo {
	width: 250px;
	position: fixed;
	opacity: 1;
	z-index: 2;
	left: 80px;
	top: 60px;
	color: #ebefdd;
	cursor: pointer
}

body.tech.studio .logo.revert {
	color: #3dde6e
}

body.tech.studio .logo.revert svg {
	fill: #3dde6e
}

@media (max-width: 1250px) {
	body.tech.studio .logo {
		left: 50px;
		top: 40px
	}
}

@media (max-width: 600px) {
	body.tech.studio .logo {
		left: 20px;
		top: 20px
	}
}

body.tech.studio .logo h2 {
	transition: color 500ms cubic-bezier(0.47, 0, 0.745, 0.715);
	font-size: 18px;
	font-weight: 400;
	line-height: normal;
	margin: 8px 0 0;
	display: block
}

body.tech.studio .logo h3 {
	transition: color 500ms cubic-bezier(0.47, 0, 0.745, 0.715);
	font-size: 11px;
	text-transform: uppercase;
	font-weight: 700;
	margin: 0;
	letter-spacing: 0.45px;
	display: none
}

body.tech.studio .logo svg {
	transition: all 500ms cubic-bezier(0.47, 0, 0.745, 0.715);
	fill: #ebefdd;
	float: left;
	margin-right: 15px
}

@media (max-width: 600px) {
	body.tech.studio .logo h2,
	body.tech.studio .logo h3 {
		display: none
	}
}

@media (max-height: 500px) {
	body.tech.studio .logo h2,
	body.tech.studio .logo h3 {
		display: none
	}
}

body.tech.studio .mobile-menu {
	transition: fill 500ms cubic-bezier(0.47, 0, 0.745, 0.715);
	position: absolute;
	bottom: 33px;
	fill: #ebefdd;
	left: 20px;
	z-index: 2;
	cursor: pointer;
	opacity: 0;
	visibility: hidden;
	display: none
}

@media (max-width: 600px) {
	body.tech.studio .mobile-menu {
		display: block
	}
}

body.tech.studio .menu-top {
	position: fixed;
	right: 80px;
	z-index: 10;
	top: 70px
}

@media (max-width: 1250px) {
	body.tech.studio .menu-top {
		right: 50px;
		top: 50px
	}
}

@media (max-width: 600px) {
	body.tech.studio .menu-top {
		right: 20px;
		top: 30px
	}
}

body.tech.studio .menu-top a {
	padding: 20px;
	padding-right: 0;
	margin-top: -20px;
	opacity: 0;
	visibility: hidden;
	transform: translateY(-10px)
}

body.tech.studio .menu-top a span {
	display: inline-block
}

body.tech.studio .mouse-track {
	pointer-events: none;
	position: absolute;
	z-index: 1000;
	opacity: 0
}

body.tech.studio .mouse-track .outer-circle {
	stroke: #ebefdd;
	transform: translateX(-50%) translateY(-50%) rotate(-90deg);
	stroke-width: 2px;
	fill: none;
	height: 18px;
	width: 18px;
	overflow: visible;
	position: absolute
}

body.tech.studio .mouse-track .outer-circle .countdown {
	opacity: 0;
	stroke: #3dde6e;
	position: absolute;
	stroke-dashoffset: 125px;
	stroke-dasharray: 125px;
	stroke-width: 4px
}

body.tech.studio .mouse-track .inner-circle {
	stroke: #ebefdd;
	transform: translateX(-50%) translateY(-50%);
	stroke-width: 2px;
	fill: none;
	height: 2px;
	width: 2px;
	opacity: 0.6;
	overflow: visible;
	position: absolute
}

body.tech.studio .mouse-track .arrow-right {
	stroke: #3dde6e;
	opacity: 0;
	visibility: hidden;
	stroke-width: 2px;
	transform: rotate(180deg);
	margin-left: 10px;
	margin-top: -7px;
	position: absolute
}

body.tech.studio .mouse-track .arrow-left {
	stroke: #3dde6e;
	opacity: 0;
	margin-left: -20px;
	margin-top: -6px;
	visibility: hidden;
	stroke-width: 2px;
	position: absolute
}

body.tech.studio .mouse-track .play {
	fill: #ebefdd;
	opacity: 1;
	margin-top: -6px;
	stroke-width: 2px;
	margin-top: -18px;
	margin-left: -14px;
	transform: scale(0);
	position: absolute
}

body.tech.studio .mouse-track .stop {
	fill: #ebefdd;
	height: 38px;
	width: 38px;
	margin-left: -19px;
	margin-top: -19px;
	transform: scale(0);
	position: absolute
}

@media (max-width: 600px) {
	body.tech.studio .mouse-track {
		opacity: 0 !important;
		visibility: hidden !important
	}
}

body.tech.studio .about-page {
	position: absolute;
	height: 100%;
	width: 100%;
	padding: 40px;
	left: 0;
	opacity: 1;
	top: 0;
	display: flex;
	flex-direction: row;
	visibility: hidden;
	align-items: stretch
}

@media (max-width: 1250px) {
	body.tech.studio .about-page {
		padding: 20px
	}
}

@media (max-width: 600px) {
	body.tech.studio .about-page {
		flex-direction: column;
		padding: 0
	}
}

body.tech.studio .about-page.active .neon-sign {
	animation: flicker 10s infinite
}

body.tech.studio .about-page.active .split-left::before {
	width: 100%;
	bottom: 0
}

body.tech.studio .about-page.active .split-left.shaded::after {
	opacity: 1
}

body.tech.studio .about-page .split-left {
	opacity: 0;
	visibility: hidden;
	overflow: hidden
}

body.tech.studio .about-page .split-left.shaded::after {
	content: "Swipe or Scroll and click image to know more";
	padding-right: 20px;
	line-height: 100px;
	color: #313734;
	text-align: right;
	position: absolute;
	bottom: 0;
	width: 100%;
	opacity: 0;
	transition: all 500ms cubic-bezier(0.47, 0, 0.745, 0.715);
	transition-delay: 1;
	height: 100px;
	background-color: red;
	background: linear-gradient(transparent, #14141a 50%);
	pointer-events: none
}

body.tech.studio .about-page .split-left::before {
	transition: all 500ms cubic-bezier(0.47, 0, 0.745, 0.715);
	content: "";
	position: absolute;
	width: 0%;
	height: 100%;
	left: 0;
	background-color: #14141a;
	z-index: -1;
	bottom: 0
}

body.tech.studio .about-page>* {
	position: relative;
	z-index: 1;
	flex: 0 0 50%;
	display: flex;
	align-items: center
}

body.tech.studio .about-page .gradient-about {
	background-color: red;
	position: absolute;
	width: 100%;
	height: 100%;
	z-index: 1;
	top: 0;
	left: 0;
	-webkit-mask-image: url("../smoke-sprite.png");
	-webkit-mask-size: 3000% 100%;
	-webkit-mask-position-x: 0%;
	animation-iteration-count: 1;
	animation-delay: 1s
}

body.tech.studio .about-page .gradient-about.active {
	animation: mask 1.5s steps(29) forwards
}

body.tech.studio .about-page .gradient-about stop {
	transition: all 500ms cubic-bezier(0.47, 0, 0.745, 0.715);
	stop-color: #292038
}

body.tech.studio .about-page .gradient-about stop:last-of-type {
	stop-color: #18181d
}

@media (max-width: 600px) {
	body.tech.studio .about-page .gradient-about stop {
		transition: all 500ms cubic-bezier(0.47, 0, 0.745, 0.715);
		stop-color: #18181d
	}
	body.tech.studio .about-page .gradient-about stop:last-of-type {
		stop-color: #18181d
	}
}

body.tech.studio .about-page .about-text {
	position: absolute;
	padding: 120px;
	padding-right: 240px
}

body.tech.studio .about-page .about-text h1 {
	color: #3dde6e;
	white-space: nowrap;
	font-weight: 500;
	display: block;
	font-family: "Teko", sans-serif;
	text-transform: uppercase;
	font-size: 40px;
	line-height: 40px;
	margin-top: 10px;
	margin-bottom: 40px
}

@media (max-width: 600px) {
	body.tech.studio .about-page .about-text h1 {
		font-size: 28px;
		line-height: 28px;
		margin: 0 0 20px
	}
}

body.tech.studio .about-page .about-text h1>span {
	display: block
}

body.tech.studio .about-page .about-text h1>span span {
	display: inline-block
}

body.tech.studio .about-page .about-text p {
	opacity: 0;
	font-size: 16px;
	line-height: 32px
}

@media (max-width: 600px) {
	body.tech.studio .about-page .about-text p {
		line-height: 24px
	}
}

@media (max-width: 1250px) {
	body.tech.studio .about-page .about-text {
		padding-left: 40px;
		padding-right: 40px
	}
}

@media (max-width: 600px) {
	body.tech.studio .about-page .about-text {
		padding-left: 20px;
		padding-right: 20px
	}
}

body.tech.studio .about-page .about-render {
	position: absolute;
	visibility: hidden;
	top: 0%;
	opacity: 0;
	right: 0;
	width: 140%;
	height: 100%;
	transform: translateY(0) scale(1);
	z-index: 1;
	pointer-events: none
}

@media (max-width: 1250px) {
	body.tech.studio .about-page .about-render {
		width: 100%
	}
}

@media (max-width: 600px) {
	body.tech.studio .about-page .about-render {
		width: 100%
	}
}

body.tech.studio .about-page .about-render canvas {
	position: absolute;
	transform: translateY(-50%);
	top: 50%
}

body.tech.studio .about-page .neon-sign {
	opacity: 0;
	height: 570px;
	width: 140%;
	position: absolute;
	text-transform: uppercase;
	font-size: 46px;
	color: #ff0054;
	right: 260px;
	top: -30px;
	transform: scale(0.5) perspective(900px) translateZ(-300px) rotateY(-10deg) rotateX(0deg) rotateZ(0deg) skewY(9deg);
	filter: blur(2px) brightness(2)
}

body.tech.studio .about-page .neon-sign::before {
	content: "";
	width: 410px;
	height: 100%;
	position: absolute;
	left: 100%
}

@media (max-width: 1250px) {
	body.tech.studio .about-page .neon-sign {
		display: none
	}
}

@media (max-width: 600px) {
	body.tech.studio .about-page .neon-sign {
		display: none
	}
}

body.tech.studio .about-page .neon-sign::after {
	content: "";
	border: 6px solid #ff0054;
	width: 210px;
	height: 100%;
	position: absolute;
	right: 0
}

body.tech.studio .about-page .neon-sign.var-1 {
	transform: scale(0.7) perspective(900px) rotateY(-8deg) rotateX(0deg) rotateZ(0deg) skewY(9deg) translateX(150px)
}

body.tech.studio .about-page .neon-sign.var-2 {
	transform: scale(0.7) perspective(900px) rotateY(-6deg) rotateX(0deg) rotateZ(0deg) skewY(6deg) translateY(6px) translateX(140px)
}

body.tech.studio .about-page .neon-sign>* {
	position: absolute
}

body.tech.studio .about-page .neon-sign .code {
	top: 40px;
	right: 42px;
	animation: flicker 5s infinite
}

body.tech.studio .about-page .neon-sign .and {
	top: 94px;
	color: #00e4ff;
	font-size: 80px;
	right: 70px
}

body.tech.studio .about-page .neon-sign .design {
	top: 145px;
	right: 19px
}

body.tech.studio .about-page .neon-sign .key {
	animation: fade 2s steps(1) infinite;
	animation-direction: reverse;
	bottom: 45px;
	right: 53px
}

body.tech.studio .about-page .neon-sign .key-pressed {
	animation: fade 2s steps(1) infinite;
	animation-direction: normal;
	bottom: 40px;
	right: 19px
}

body.tech.studio .about-page .neon-sign .hand {
	animation: hand 2s steps(1) infinite;
	right: 30px;
	bottom: 100px
}

body.tech.studio .about-page .neon-sign .key-base {
	bottom: 20px;
	right: 45px
}

body.tech.studio .introduction {
	position: absolute;
	background-color: #212322;
	height: 100%;
	width: 100%;
	top: 0;
	left: 0;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center
}

body.tech.studio .introduction .skip {
	padding: 30px;
	position: absolute;
	bottom: 50px;
	font-size: 16px;
	color: #404a45;
	cursor: pointer
}

body.tech.studio .intro-text {
	transition: color 500ms cubic-bezier(0.47, 0, 0.745, 0.715);
	position: absolute;
	bottom: 50%;
	z-index: 1;
	width: 100%;
	padding: 0 10px;
	text-align: center;
	font-size: 24px;
	color: #ebefdd
}

body.tech.studio .intro-text.tutorial {
	font-size: 16px;
	bottom: 70px
}

body.tech.studio .intro-text span {
	display: inline-block
}

@media (max-width: 1250px) {
	body.tech.studio .intro-text.tutorial {
		bottom: 40px
	}
}

@media (max-width: 600px) {
	body.tech.studio .intro-text {
		font-size: 16px
	}
	body.tech.studio .intro-text.tutorial {
		bottom: auto;
		top: 140px
	}
}

body.tech.studio .discover {
	opacity: 0;
	visibility: hidden;
	color: #3dde6e;
	position: absolute;
	bottom: 0;
	right: 0;
	height: 160px;
	width: 240px;
	z-index: 100;
	cursor: pointer
}

body.tech.studio .discover .open>span {
	position: absolute;
	height: 14px;
	width: 7px;
	bottom: 65px;
	right: 80px;
	transform: translateX(-80px)
}

body.tech.studio .discover .open>span::before {
	transition: all 300ms cubic-bezier(0.47, 0, 0.745, 0.715);
	transition-property: background-color, transform, opacity;
	transition-delay: 0s, 0.8s, 0.8s;
	content: "";
	position: absolute;
	border-radius: 10px 10px 20px 0;
	height: 8px;
	transform-origin: top left;
	width: 1.5px;
	background-color: #3dde6e;
	transform: rotate(-45deg) scaleY(4);
	opacity: 0
}

body.tech.studio .discover .open>span::after {
	transition: all 300ms cubic-bezier(0.47, 0, 0.745, 0.715);
	transition-property: background-color, transform, opacity;
	transition-delay: 0s, 1.1s, 1.1s;
	content: "";
	position: absolute;
	border-radius: 0 20px 10px 10px;
	height: 8px;
	transform-origin: bottom left;
	margin-top: 1px;
	width: 1.5px;
	background-color: #3dde6e;
	transform: rotate(45deg) scaleY(4);
	opacity: 0
}

body.tech.studio .discover .open.active>span::before {
	transform: rotate(-45deg) scaleY(1);
	opacity: 1;
	transition-delay: 0
}

body.tech.studio .discover .open.active>span::after {
	transform: rotate(45deg) scaleY(1);
	opacity: 1;
	transition-delay: 0
}

body.tech.studio .discover .close>span {
	position: absolute;
	height: 17px;
	width: 7px;
	bottom: 65px;
	right: 80px;
	transform: translateX(-57px)
}

body.tech.studio .discover .close>span::before {
	transition: all 300ms cubic-bezier(0.47, 0, 0.745, 0.715);
	transition-delay: 1.1s;
	content: "";
	position: absolute;
	border-radius: 5px;
	height: 15px;
	width: 2px;
	margin-left: -5px;
	margin-top: 1px;
	background-color: #3dde6e;
	transform-origin: top;
	transform: rotate(-45deg) scaleY(0)
}

body.tech.studio .discover .close>span::after {
	transition: all 300ms cubic-bezier(0.47, 0, 0.745, 0.715);
	transition-delay: 0.8s;
	content: "";
	position: absolute;
	border-radius: 5px;
	height: 15px;
	width: 2px;
	background-color: #3dde6e;
	transform-origin: bottom;
	margin-left: -5px;
	margin-top: -3px;
	transform: rotate(45deg) scaleY(0)
}

body.tech.studio .discover .close.active>span::before {
	transform: rotate(-45deg) scaleY(1);
	transition-delay: 0
}

body.tech.studio .discover .close.active>span::after {
	transform: rotate(45deg) scaleY(1);
	transition-delay: 0
}

body.tech.studio .discover .open,
body.tech.studio .discover .close {
	transition: all 300ms cubic-bezier(0.47, 0, 0.745, 0.715);
	height: 100%;
	position: absolute;
	width: 100%;
	left: 0;
	top: 0;
	opacity: 0
}

body.tech.studio .discover .open.active,
body.tech.studio .discover .close.active {
	opacity: 1
}

body.tech.studio .discover .open a span,
body.tech.studio .discover .close a span {
	transform: translateX(5px) translateY(5px);
	opacity: 0
}

body.tech.studio .discover .open.active a span,
body.tech.studio .discover .close.active a span {
	transform: translateX(0px) translateY(0px);
	opacity: 1
}

body.tech.studio .discover:hover {
	height: 200px;
	width: 300px
}

body.tech.studio .discover:hover a {
	color: #ebefdd
}

body.tech.studio .discover:hover svg {
	stroke: #404a45
}

body.tech.studio .discover>div>a {
	position: absolute;
	right: 80px;
	bottom: 65px
}

body.tech.studio .discover a span {
	position: relative;
	display: inline-block
}

@media (max-width: 1250px) {
	body.tech.studio .discover {
		height: 100px;
		width: 170px
	}
}

@media (max-width: 600px) {
	body.tech.studio .discover {
		height: 70px;
		width: 120px;
		z-index: 2
	}
	body.tech.studio .discover:hover {
		width: 100%;
		height: 90px
	}
}

body.tech.studio .line-aux {
	width: 45px;
	position: fixed;
	opacity: 1;
	height: 100px;
	left: 82px;
	bottom: 110px;
	z-index: 3;
	opacity: 0;
	visibility: hidden
}

@media (max-width: 1250px) {
	body.tech.studio .line-aux {
		left: 50px;
		bottom: 90px
	}
}

@media (max-width: 600px) {
	body.tech.studio .line-aux {
		left: 20px;
		bottom: 73px;
		visibility: hidden !important;
		opacity: 0 !important
	}
}

body.tech.studio .line-aux::after {
	transition: background-color 500ms cubic-bezier(0.47, 0, 0.745, 0.715);
	content: "";
	background-color: #323534;
	width: 2px;
	height: 10px;
	margin-left: -1px;
	left: 50%;
	bottom: -65px;
	position: absolute
}

body.tech.studio .line-aux .line {
	transition: background-color 500ms cubic-bezier(0.47, 0, 0.745, 0.715);
	width: 2px;
	background-color: #323534;
	height: 0;
	margin-left: -1px;
	left: 50%;
	margin-bottom: 10px;
	position: relative
}

@media (max-width: 600px) {
	body.tech.studio .line-aux .line {
		display: none
	}
}

@media (max-height: 500px) {
	body.tech.studio .line-aux .line {
		display: none
	}
}

body.tech.studio .line-aux .counter {
	transition: all 500ms cubic-bezier(0.47, 0, 0.745, 0.715);
	text-transform: uppercase;
	font-family: "Teko", sans-serif;
	font-weight: 500;
	font-size: 18px;
	color: #ebefdd;
	height: 50px;
	width: 100px;
	overflow: hidden;
	text-align: center;
	position: absolute;
	bottom: -50px;
	left: -27px
}

body.tech.studio .line-aux .counter .page {
	transition: color 500ms cubic-bezier(0.47, 0, 0.745, 0.715);
	position: absolute;
	right: 50%;
	margin-right: 7px;
	bottom: 20px;
	margin-bottom: 45px;
	text-align: right
}

body.tech.studio .line-aux .counter .divider {
	transition: color 500ms cubic-bezier(0.47, 0, 0.745, 0.715);
	position: absolute;
	left: 50%;
	color: #3dde6e;
	bottom: 12px;
	transform: translateX(-50%);
	margin-bottom: 45px
}

body.tech.studio .line-aux .counter .total {
	transition: color 500ms cubic-bezier(0.47, 0, 0.745, 0.715);
	left: 50%;
	margin-left: 7px;
	position: absolute;
	bottom: 5px;
	margin-bottom: 45px
}

body.tech.studio .scroll-position {
	width: 100%;
	position: absolute;
	bottom: 0;
	height: 2px;
	opacity: 0;
	z-index: 2;
	visibility: hidden
}

body.tech.studio .scroll-position span {
	position: relative;
	display: block;
	width: 50%;
	background-color: #3dde6e;
	height: 100%
}

body.tech.studio .line-scroll {
	position: absolute;
	z-index: 2;
	opacity: 0;
	visibility: hidden;
	height: 45px;
	width: 140px;
	left: 500px;
	bottom: 40px;
	overflow: hidden
}

body.tech.studio .line-scroll>span {
	position: absolute;
	content: "";
	background-color: #3dde6e;
	width: 50%;
	bottom: 0px;
	top: auto !important;
	height: 2px !important;
	z-index: 1;
	animation-name: example;
	animation-duration: 4s;
	animation-iteration-count: infinite
}

body.tech.studio .line-scroll::after {
	content: "->";
	position: absolute;
	color: #3dde6e;
	margin-left: 15px
}

@media (max-width: 1250px) {
	body.tech.studio .line-scroll {
		left: 480px;
		bottom: 20px
	}
}

@media (max-width: 600px) {
	body.tech.studio .line-scroll {
		left: 20px;
		bottom: 20px;
		height: 35px
	}
}

body.tech.studio .fireworks-plane {
	width: 600px;
	height: 600px;
	left: 340px;
	position: absolute;
	opacity: 0;
	top: 50%;
	transform: translateX(-50%) translateY(-50%) rotateY(180deg);
	perspective: 500px;
	z-index: 1
}

@media (max-width: 1250px) {
	body.tech.studio .fireworks-plane {
		transform: translateX(-50%) translateY(-50%) rotateY(180deg) scale(0.6)
	}
}

@media (max-width: 600px) {
	body.tech.studio .fireworks-plane {
		transform: translateX(-50%) translateY(-50%) rotateY(180deg) scale(0.4);
		left: 50%
	}
}

body.tech.studio .firework-1 {
	position: absolute;
	top: 280px;
	left: 50px;
	overflow: visible;
	stroke: #3dde6e;
	stroke-width: 10px;
	stroke-dashoffset: -358;
	transform: rotateX(40deg);
	stroke-dasharray: 0, 10000;
	stroke-linecap: round
}

body.tech.studio .firework-1:nth-of-type(2) {
	top: 230px;
	transform: rotateZ(20deg) rotateX(40deg)
}

body.tech.studio .firework-2>span {
	height: 100px;
	width: 4px;
	position: absolute;
	left: 190px;
	transform-origin: bottom;
	top: 145px
}

body.tech.studio .firework-2>span span {
	content: "";
	height: 0;
	background-color: #3dde6e;
	bottom: 0;
	width: 100%;
	position: absolute;
	border-radius: 2px
}

body.tech.studio .firework-2>span:nth-of-type(1) {
	transform: rotate(60deg)
}

body.tech.studio .firework-2>span:nth-of-type(2) {
	transform: rotate(120deg)
}

body.tech.studio .firework-2>span:nth-of-type(3) {
	transform: rotate(180deg)
}

body.tech.studio .firework-2>span:nth-of-type(4) {
	transform: rotate(240deg)
}

body.tech.studio .firework-2>span:nth-of-type(5) {
	transform: rotate(300deg)
}

body.tech.studio .firework-2>span:nth-of-type(6) {
	transform: rotate(360deg)
}

body.tech.studio .models {
	height: 100%;
	width: 100%;
	position: absolute;
	overflow: hidden;
	left: 0;
	top: 0;
	z-index: 1
}

body.tech.studio .models .project-link>* {
	position: absolute
}

body.tech.studio .models .project-link {
	position: absolute;
	height: 100%;
	opacity: 0;
	visibility: hidden;
	width: 100%;
	transform: perspective(1400px)
}

body.tech.studio .models .project-link.tech span {
	color: #5bf46d
}

body.tech.studio .models .project-link.tech span {
	color: #ff9273
}

body.tech.studio .models .project-link.non-tech span {
	color: #a07f5e
}

body.tech.studio .models .project-link.simon-cuchillerias span {
	color: #f7ce3c
}

body.tech.studio .models .project-link.guild-storm span {
	color: #f76565
}

@media (max-width: 600px) {
	body.tech.studio .models .project-link {
		transform: scale(0.5)
	}
}

body.tech.studio .models canvas {
	top: 0;
	z-index: 1
}

body.tech.studio .models .frame {
	stroke: rgba(64, 74, 69, 0.03);
	stroke-width: 85px;
	height: 600px;
	width: 600px;
	margin: 0;
	padding: 25px;
	border-radius: 50%
}

body.tech.studio .models h2 {
	top: 50%;
	left: 400px;
	opacity: 0;
	margin-top: -62px;
	font-size: 24px;
	font-weight: 400;
	white-space: nowrap;
	height: 24px
}

body.tech.studio .models small {
	top: 50%;
	left: 400px;
	margin-top: 25px;
	opacity: 0;
	text-transform: uppercase;
	white-space: nowrap
}

body.tech.studio .models span {
	top: 50%;
	font-family: "Teko", sans-serif;
	font-size: 18px;
	position: absolute;
	height: 0;
	overflow: hidden;
	margin-top: -45px;
	left: 400px
}

body.tech.studio .projects {
	position: absolute;
	width: 100%;
	height: 100%;
	z-index: 1
}

body.tech.studio .project-content {
	position: relative;
	z-index: 1
}

body.tech.studio .project-content .studio-wrap {
	height: 100%
}

body.tech.studio .project-content .studio-wrap .scene {
	height: 100%;
	width: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	position: absolute;
	transform: translateX(100%);
	top: 50%
}

body.tech.studio .project-content .studio-wrap .scene .image {
	padding: 40px;
	display: flex;
	align-items: center;
	align-self: stretch;
	justify-content: center
}

body.tech.studio .project-content .studio-wrap .scene .video {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 40px;
	position: relative
}

body.tech.studio .project-content .studio-wrap .scene .video .video-wrap {
	position: absolute;
	width: 100%;
	height: 100%;
	padding: 40px;
	pointer-events: none;
	z-index: 1
}

@media (max-width: 600px) {
	body.tech.studio .project-content .studio-wrap .scene .video::before {
		content: "";
		position: absolute;
		width: 30%;
		padding-top: 30%;
		border-radius: 50%;
		border: 2px solid #3dde6e
	}
	body.tech.studio .project-content .studio-wrap .scene .video::after {
		content: "";
		position: absolute;
		left: 50%;
		margin-left: -15px;
		border-left: 33px solid #ebefdd;
		border-top: 20px solid transparent;
		border-right: 20px solid transparent;
		border-bottom: 20px solid transparent
	}
}

body.tech.studio .project-content .studio-wrap .scene img {
	max-height: 100%;
	max-width: 100%
}

body.tech.studio .project-content .studio-wrap .scene .fractured {
	padding: 0
}

body.tech.studio .project-content .studio-wrap .scene h2 {
	font-weight: 500;
	display: block;
	font-family: "Teko", sans-serif;
	text-transform: uppercase;
	font-size: 40px;
	line-height: 40px;
	margin-top: 10px;
	margin-bottom: 40px
}

body.tech.studio .project-content .studio-wrap .scene h2 span {
	display: inline-block
}

body.tech.studio .project-content .studio-wrap .scene .text-title {
	color: #3dde6e
}

body.tech.studio .project-content .studio-wrap .scene .text-title small {
	color: #404a45;
	text-transform: uppercase;
	font-weight: bold
}

body.tech.studio .project-content .studio-wrap .scene .text-content {
	line-height: 36px;
	color: #ebefdd;
	font-size: 14px
}

@media (max-width: 600px) {
	body.tech.studio .project-content .studio-wrap .scene .text-content {
		line-height: 24px;
		font-size: 14px
	}
}

@media (max-height: 500px) {
	body.tech.studio .project-content .studio-wrap .scene .text-content {
		line-height: 24px
	}
}

body.tech.studio .project-content .studio-wrap .scene.split {
	flex-direction: row;
	align-items: stretch;
	padding: 40px
}

body.tech.studio .project-content .studio-wrap .scene.split>div {
	position: relative;
	padding: 20px 10%;
	display: flex;
	flex: 0 0 50%;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	overflow: hidden
}

@media (max-width: 600px) {
	body.tech.studio .project-content .studio-wrap .scene.split h2 {
		font-size: 28px;
		line-height: 28px;
		margin: 0 0 10px
	}
}

@media (max-height: 500px) {
	body.tech.studio .project-content .studio-wrap .scene.split h2 {
		font-size: 28px;
		line-height: 28px;
		margin: 0 0 10px
	}
}

body.tech.studio .project-content .studio-wrap .scene.split.variant {
	position: relative;
	overflow: hidden
}

body.tech.studio .project-content .studio-wrap .scene.split.variant .split-right {
	align-items: stretch;
	padding: 20px 0;
	flex-wrap: nowrap;
	overflow: visible
}

body.tech.studio .project-content .studio-wrap .scene.split.variant .split-right>div {
	position: absolute;
	top: 40px;
	bottom: 40px
}

body.tech.studio .project-content .studio-wrap .scene.split.variant .split-right>div img {
	max-width: none;
	max-height: 100%
}

@media (max-width: 1250px) {
	body.tech.studio .project-content .studio-wrap .scene.split {
		padding: 20px
	}
	body.tech.studio .project-content .studio-wrap .scene.split>div {
		padding: 20px
	}
}

@media (max-width: 600px) {
	body.tech.studio .project-content .studio-wrap .scene.split {
		flex-direction: column;
		padding: 0
	}
	body.tech.studio .project-content .studio-wrap .scene.split>div {
		padding: 20px;
		flex: auto
	}
	body.tech.studio .project-content .studio-wrap .scene.split.variant .split-right {
		padding: 0 20px
	}
	body.tech.studio .project-content .studio-wrap .scene.split.variant .split-right>div {
		left: 20px;
		right: 20px;
		top: 0;
		bottom: 0
	}
	body.tech.studio .project-content .studio-wrap .scene.split.variant .split-right>div img {
		max-width: 100%;
		max-height: none
	}
}

@media (max-height: 500px) {
	body.tech.studio .project-content .studio-wrap .scene.split {
		flex-direction: column;
		padding: 0
	}
	body.tech.studio .project-content .studio-wrap .scene.split>div {
		padding: 20px;
		flex: auto
	}
	body.tech.studio .project-content .studio-wrap .scene.split.variant .split-right {
		padding: 0 20px
	}
	body.tech.studio .project-content .studio-wrap .scene.split.variant .split-right>div {
		left: 20px;
		right: 20px;
		top: 0;
		bottom: 0
	}
	body.tech.studio .project-content .studio-wrap .scene.split.variant .split-right>div img {
		max-width: 100%;
		max-height: none
	}
}

body.tech.studio .project-content .studio-wrap .intro {
	align-items: flex-start;
	padding-left: 550px;
	width: calc(100% - 500px);
	padding-right: 20px
}

body.tech.studio .project-content .studio-wrap .intro h1 {
	font-family: "Teko", sans-serif;
	font-weight: 500;
	font-size: 72px;
	line-height: 54px;
	text-transform: uppercase;
	padding-right: 100px;
	margin: 20px 0
}

body.tech.studio .project-content .studio-wrap .intro h1>span {
	display: block
}

body.tech.studio .project-content .studio-wrap .intro h1>span span {
	display: inline-block
}

body.tech.studio .project-content .studio-wrap .intro h1 small {
	color: #3dde6e;
	display: block;
	margin-left: -52px;
	text-align: right;
	font-size: 46px;
	font-weight: 400;
	line-height: 46px;
	width: 50px;
	margin-bottom: -46px;
	height: 46px
}

@media (max-width: 1250px) {
	body.tech.studio .project-content .studio-wrap .intro {
		bottom: 20px;
		padding: 20px 0;
		max-width: 640px;
		width: 100%;
		align-items: stretch;
		justify-content: flex-end
	}
	body.tech.studio .project-content .studio-wrap .intro>div {
		height: auto;
		padding: 0 20px 80px;
		text-align: center
	}
	body.tech.studio .project-content .studio-wrap .intro h1 {
		display: inline-block;
		width: auto;
		font-size: 48px;
		text-align: center
	}
	body.tech.studio .project-content .studio-wrap .intro h1>span {
		display: inline-block
	}
	body.tech.studio .project-content .studio-wrap .intro h1 small {
		font-size: 18px;
		line-height: 36px
	}
}

@media (max-width: 600px) {
	body.tech.studio .project-content .studio-wrap .intro>div {
		padding-bottom: 100px
	}
	body.tech.studio .project-content .studio-wrap .intro>div h1 small {
		display: none
	}
}

@media (max-width: 1400px) {
	body.tech.studio .project-content .studio-wrap .intro h1.fractured {
		font-size: 48px;
		line-height: 48px;
		padding-right: 20px
	}
	body.tech.studio .project-content .studio-wrap .intro h1.fractured small {
		font-size: 24px;
		line-height: 32px
	}
}

@media (max-height: 500px) {
	body.tech.studio .project-content .studio-wrap .intro>div {
		height: auto;
		padding: 0 20px 80px
	}
	body.tech.studio .project-content .studio-wrap .intro h1 {
		font-size: 48px;
		line-height: 48px;
		margin-bottom: 0
	}
}

body.tech.studio .project-content .studio-next {
	width: 600px;
	max-width: 100%;
	position: absolute;
	border-bottom: 1px solid #323534;
	border-top: 1px solid #323534;
	top: 50%;
	margin-top: -50px;
	left: 100%;
	z-index: 1;
	padding-left: 40px;
	overflow: hidden
}

body.tech.studio .project-content .studio-next small {
	font-weight: bold;
	font-size: 11px;
	text-transform: uppercase;
	margin-bottom: -20px;
	margin-top: 10px;
	margin-left: 2px;
	display: block;
	color: #3dde6e
}

body.tech.studio .project-content .studio-next h4 {
	font-family: "Teko", sans-serif;
	text-transform: uppercase;
	font-size: 60px;
	font-weight: 500;
	margin: 30px 0
}

body.tech.studio .project-content .studio-next .button {
	transition: all 500ms cubic-bezier(0.47, 0, 0.745, 0.715);
	width: 40px;
	height: 40px;
	position: absolute;
	right: 30px;
	border: 1px solid #323534;
	top: 50%;
	transform: translateY(-50%)
}

body.tech.studio .project-content .studio-next .button::after {
	content: "";
	border-left: solid 3px #ebefdd;
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translateX(-50%) translateY(-50%);
	border-right: solid 3px transparent;
	border-top: solid 3px transparent;
	border-bottom: solid 3px transparent;
	height: 6px;
	width: 6px;
	display: block
}

body.tech.studio .project-content .studio-next .progress {
	background-color: #3dde6e;
	width: 0%;
	height: 1px;
	position: absolute;
	bottom: 0;
	left: 100%
}

body.tech.studio .project-content .studio-next.complete .button {
	border: 1px solid #3dde6e
}

@media (max-width: 600px) {
	body.tech.studio .project-content .studio-next small {
		margin-bottom: -18px
	}
	body.tech.studio .project-content .studio-next h4 {
		font-size: 40px;
		margin: 20px 0
	}
}

body.tech.studio .project-details {
	list-style: none;
	display: flex;
	padding: 0;
	padding-left: 2px;
	margin: 0
}

body.tech.studio .project-details li {
	opacity: 1;
	margin-bottom: 10px;
	position: relative;
	margin-right: 20px;
	font-family: "Teko", sans-serif;
	text-transform: uppercase;
	font-size: 18px;
	color: #ebefdd
}

body.tech.studio .project-details li:last-of-type {
	margin-right: 0
}

body.tech.studio .project-details small {
	color: #3dde6e;
	font-family: "Rubik", sans-serif;
	font-size: 10px;
	font-weight: 600;
	margin-bottom: -2px;
	display: block
}

@media (max-width: 1250px) {
	body.tech.studio .project-details {
		text-align: center;
		justify-content: center
	}
}

body.tech.studio .circles {
	position: absolute;
	z-index: 1;
	width: 100%;
	height: 100%
}

body.tech.studio .circles .circle-trail {
	stroke: #ebefdd;
	position: absolute;
	height: 550px;
	width: 550px;
	overflow: visible;
	border-radius: 50%;
	stroke-linecap: round;
	stroke-width: 1px;
	opacity: 0;
	stroke-dasharray: 0.2, 10.268;
	left: 50%;
	top: 50%;
	transform: translateY(-50%) translateX(-50%)
}

@media (max-width: 600px) {
	body.tech.studio .circles .circle-trail {
		height: 280px;
		width: 280px
	}
}

body.tech.studio .circles .circle-progress {
	stroke: #3dde6e;
	position: absolute;
	height: 550px;
	width: 550px;
	border-radius: 50%;
	overflow: visible;
	transform-origin: center;
	stroke-width: 1.5px;
	stroke-linecap: round;
	stroke-dasharray: 629;
	stroke-dashoffset: 629;
	left: 50%;
	opacity: 0;
	top: 50%;
	transform: translateY(-50%) translateX(-50%) rotate(270deg)
}

@media (max-width: 600px) {
	body.tech.studio .circles .circle-progress {
		height: 280px;
		width: 280px
	}
}

body.tech.studio .circles .circle-progress-bullets {
	height: 550px;
	width: 550px;
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translateY(-50%) translateX(-50%)
}

@media (max-width: 600px) {
	body.tech.studio .circles .circle-progress-bullets {
		height: 280px;
		width: 280px
	}
}

body.tech.studio .circles .circle-progress-bullets .bullet {
	width: 12px;
	height: 100%;
	display: block;
	position: absolute;
	left: 50%;
	margin-left: -6px
}

body.tech.studio .circles .circle-progress-bullets .bullet span {
	transition: border 500ms cubic-bezier(0.47, 0, 0.745, 0.715);
	border: 3px solid #3dde6e;
	background-color: #212322;
	content: "";
	height: 12px;
	opacity: 0;
	width: 12px;
	display: block;
	border-radius: 50%;
	margin-top: -6px;
	transform: scale(0)
}

body.tech.studio .circles .circle-progress-bullets .bullet-project {
	position: absolute;
	height: 100%;
	width: 20px;
	left: 50%;
	margin-left: -10px
}

body.tech.studio .circles .circle-progress-bullets .bullet-project span {
	transition: background-color 500ms cubic-bezier(0.47, 0, 0.745, 0.715);
	border: 2px solid #323534;
	background-color: #212322;
	height: 20px;
	width: 20px;
	display: block;
	border-radius: 50%;
	margin-top: -10px;
	transform: scale(0)
}

body.tech.studio .layout {
	position: absolute;
	width: 100%;
	height: 100%
}

body.tech.studio .layout .gameboy {
	position: absolute;
	z-index: 100000;
	top: 20px;
	left: 50%
}

body.tech.studio .transition {
	position: absolute;
	height: 100%;
	width: 100%;
	overflow: hidden;
	background-color: #f3f2ef;
	opacity: 0;
	visibility: hidden
}

body.tech.studio .project {
	left: 50%;
	position: absolute;
	top: 50%;
	width: 50%;
	opacity: 0;
	visibility: hidden;
	padding-left: 120px;
	transform: translateY(-50%)
}

body.tech.studio .project h1 {
	color: #ebefdd;
	font-family: "Teko", sans-serif;
	font-size: 72px;
	line-height: 60px;
	font-weight: 400;
	margin: 0 0 30px;
	white-space: nowrap;
	perspective: 400px;
	text-transform: uppercase
}

body.tech.studio .project h1>span {
	display: block
}

body.tech.studio .project h1>span span {
	display: inline-block;
	position: relative;
	transform-origin: top left
}

@media (max-width: 1250px) {
	body.tech.studio .project {
		left: 0;
		width: 100%;
		top: auto;
		bottom: 0;
		padding: 0 20px 100px;
		transform: none
	}
	body.tech.studio .project h1 {
		font-size: 72px;
		text-align: center
	}
	body.tech.studio .project h1 div {
		display: inline-block
	}
}

@media (max-width: 600px) {
	body.tech.studio .project {
		top: auto;
		bottom: 0;
		padding: 0 20px 100px
	}
	body.tech.studio .project h1 {
		font-size: 48px;
		line-height: 48px;
		margin-bottom: 0
	}
}

@media (max-height: 500px) {
	body.tech.studio .project {
		padding-left: 150px;
		padding-right: 150px;
		padding-bottom: 0;
		bottom: 50%;
		transform: translateY(50%)
	}
	body.tech.studio .project h1 {
		text-align: center;
		display: flex;
		justify-content: center;
		font-size: 36px;
		line-height: 36px;
		margin-bottom: 20px
	}
	body.tech.studio .project h1>span {
		display: inline-block;
		margin-right: 7px
	}
	body.tech.studio .project h1>span:last-of-type {
		margin-right: 0
	}
}

@media (max-width: 600px) {
	body.tech.studio.studio .line-aux,
	body.tech.studio.about .line-aux {
		opacity: 0 !important;
		visibility: hidden !important
	}
}

@media (max-width: 1250px) {
	body.tech.studio.about .line {
		opacity: 0
	}
}

@media (max-width: 600px) {
	body.tech.studio.menu .project-link {
		transform: scale(0.8)
	}
}

body.tech {
	transition: all 500ms cubic-bezier(0.47, 0, 0.745, 0.715);
	background: #271c24;
	color: #8d1959;
	margin: 0;
	overflow: hidden;
	font-family: "Rubik", sans-serif;
	font-size: 14px;
	line-height: 20px
}

body.tech a {
	transition: color 300ms cubic-bezier(0.47, 0, 0.745, 0.715);
	color: #f3f1bb;
	text-decoration: none;
	display: inline-block
}

body.tech a.fractured>span {
	display: inline-block
}

body.tech a.fractured>span span {
	display: inline-block;
	font-family: "Rubik", sans-serif;
	line-height: 20px;
	text-transform: none
}

body.tech a:hover {
	color: #f9f8dd
}

body.tech .gradient {
	position: absolute;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
	opacity: 0.8
}

body.tech .gradient stop {
	transition: all 500ms cubic-bezier(0.47, 0, 0.745, 0.715);
	stop-color: #b74069
}

body.tech .gradient stop:last-of-type {
	stop-color: #ff896f
}

body.tech .circle-transition {
	position: absolute;
	height: 0;
	width: 0;
	border-radius: 50%;
	transform: translateX(-50%) translateY(-50%);
	left: 50%;
	top: 50%
}

body.tech .logo {
	width: 250px;
	position: fixed;
	opacity: 1;
	z-index: 2;
	left: 80px;
	top: 60px;
	color: #f3f1bb;
	cursor: pointer
}

body.tech .logo.revert {
	color: #fff
}

body.tech .logo.revert svg {
	fill: #fff
}

@media (max-width: 1250px) {
	body.tech .logo {
		left: 50px;
		top: 40px
	}
}

@media (max-width: 600px) {
	body.tech .logo {
		left: 20px;
		top: 20px
	}
}

body.tech .logo h2 {
	transition: color 500ms cubic-bezier(0.47, 0, 0.745, 0.715);
	font-size: 18px;
	font-weight: 400;
	line-height: normal;
	margin: 8px 0 0;
	display: block
}

body.tech .logo h3 {
	transition: color 500ms cubic-bezier(0.47, 0, 0.745, 0.715);
	font-size: 11px;
	text-transform: uppercase;
	font-weight: 700;
	margin: 0;
	letter-spacing: 0.45px;
	display: none
}

body.tech .logo svg {
	transition: all 500ms cubic-bezier(0.47, 0, 0.745, 0.715);
	fill: #f3f1bb;
	float: left;
	margin-right: 15px
}

@media (max-width: 600px) {
	body.tech .logo h2,
	body.tech .logo h3 {
		display: none
	}
}

@media (max-height: 500px) {
	body.tech .logo h2,
	body.tech .logo h3 {
		display: none
	}
}

body.tech .mobile-menu {
	transition: fill 500ms cubic-bezier(0.47, 0, 0.745, 0.715);
	position: absolute;
	bottom: 33px;
	fill: #f3f1bb;
	left: 20px;
	z-index: 2;
	cursor: pointer;
	opacity: 0;
	visibility: hidden;
	display: none
}

@media (max-width: 600px) {
	body.tech .mobile-menu {
		display: block
	}
}

body.tech .menu-top {
	position: fixed;
	right: 80px;
	z-index: 10;
	top: 70px
}

@media (max-width: 1250px) {
	body.tech .menu-top {
		right: 50px;
		top: 50px
	}
}

@media (max-width: 600px) {
	body.tech .menu-top {
		right: 20px;
		top: 30px
	}
}

body.tech .menu-top a {
	padding: 20px;
	padding-right: 0;
	margin-top: -20px;
	opacity: 0;
	visibility: hidden;
	transform: translateY(-10px)
}

body.tech .menu-top a span {
	display: inline-block
}

body.tech .mouse-track {
	pointer-events: none;
	position: absolute;
	z-index: 1000;
	opacity: 0
}

body.tech .mouse-track .outer-circle {
	stroke: #f3f1bb;
	transform: translateX(-50%) translateY(-50%) rotate(-90deg);
	stroke-width: 2px;
	fill: none;
	height: 18px;
	width: 18px;
	overflow: visible;
	position: absolute
}

body.tech .mouse-track .outer-circle .countdown {
	opacity: 0;
	stroke: #fff;
	position: absolute;
	stroke-dashoffset: 125px;
	stroke-dasharray: 125px;
	stroke-width: 4px
}

body.tech .mouse-track .inner-circle {
	stroke: #f3f1bb;
	transform: translateX(-50%) translateY(-50%);
	stroke-width: 2px;
	fill: none;
	height: 2px;
	width: 2px;
	opacity: 0.6;
	overflow: visible;
	position: absolute
}

body.tech .mouse-track .arrow-right {
	stroke: #fff;
	opacity: 0;
	visibility: hidden;
	stroke-width: 2px;
	transform: rotate(180deg);
	margin-left: 10px;
	margin-top: -7px;
	position: absolute
}

body.tech .mouse-track .arrow-left {
	stroke: #fff;
	opacity: 0;
	margin-left: -20px;
	margin-top: -6px;
	visibility: hidden;
	stroke-width: 2px;
	position: absolute
}

body.tech .mouse-track .play {
	fill: #f3f1bb;
	opacity: 1;
	margin-top: -6px;
	stroke-width: 2px;
	margin-top: -18px;
	margin-left: -14px;
	transform: scale(0);
	position: absolute
}

body.tech .mouse-track .stop {
	fill: #f3f1bb;
	height: 38px;
	width: 38px;
	margin-left: -19px;
	margin-top: -19px;
	transform: scale(0);
	position: absolute
}

@media (max-width: 600px) {
	body.tech .mouse-track {
		opacity: 0 !important;
		visibility: hidden !important
	}
}

body.tech .about-page {
	position: absolute;
	height: 100%;
	width: 100%;
	padding: 40px;
	left: 0;
	opacity: 1;
	top: 0;
	display: flex;
	flex-direction: row;
	visibility: hidden;
	align-items: stretch
}

@media (max-width: 1250px) {
	body.tech .about-page {
		padding: 20px
	}
}

@media (max-width: 600px) {
	body.tech .about-page {
		flex-direction: column;
		padding: 0
	}
}

body.tech .about-page.active .neon-sign {
	animation: flicker 10s infinite
}

body.tech .about-page.active .split-left::before {
	width: 100%;
	bottom: 0
}

body.tech .about-page.active .split-left.shaded::after {
	opacity: 1
}

body.tech .about-page .split-left {
	opacity: 0;
	visibility: hidden;
	overflow: hidden
}

body.tech .about-page .split-left.shaded::after {
	content: "Swipe or Scroll and click image to know more";
	padding-right: 20px;
	line-height: 100px;
	color: #a22d61;
	text-align: right;
	position: absolute;
	bottom: 0;
	width: 100%;
	opacity: 0;
	transition: all 500ms cubic-bezier(0.47, 0, 0.745, 0.715);
	transition-delay: 1;
	height: 100px;
	background-color: red;
	background: linear-gradient(transparent, #14141a 50%);
	pointer-events: none
}

body.tech .about-page .split-left::before {
	transition: all 500ms cubic-bezier(0.47, 0, 0.745, 0.715);
	content: "";
	position: absolute;
	width: 0%;
	height: 100%;
	left: 0;
	background-color: #14141a;
	z-index: -1;
	bottom: 0
}

body.tech .about-page>* {
	position: relative;
	z-index: 1;
	flex: 0 0 50%;
	display: flex;
	align-items: center
}

body.tech .about-page .gradient-about {
	background-color: red;
	position: absolute;
	width: 100%;
	height: 100%;
	z-index: 1;
	top: 0;
	left: 0;
	-webkit-mask-image: url("../smoke-sprite.png");
	-webkit-mask-size: 3000% 100%;
	-webkit-mask-position-x: 0%;
	animation-iteration-count: 1;
	animation-delay: 1s
}

body.tech .about-page .gradient-about.active {
	animation: mask 1.5s steps(29) forwards
}

body.tech .about-page .gradient-about stop {
	transition: all 500ms cubic-bezier(0.47, 0, 0.745, 0.715);
	stop-color: #292038
}

body.tech .about-page .gradient-about stop:last-of-type {
	stop-color: #18181d
}

@media (max-width: 600px) {
	body.tech .about-page .gradient-about stop {
		transition: all 500ms cubic-bezier(0.47, 0, 0.745, 0.715);
		stop-color: #18181d
	}
	body.tech .about-page .gradient-about stop:last-of-type {
		stop-color: #18181d
	}
}

body.tech .about-page .about-text {
	position: absolute;
	padding: 120px;
	padding-right: 240px
}

body.tech .about-page .about-text h1 {
	color: #fff;
	white-space: nowrap;
	font-weight: 500;
	display: block;
	font-family: "Teko", sans-serif;
	text-transform: uppercase;
	font-size: 40px;
	line-height: 40px;
	margin-top: 10px;
	margin-bottom: 40px
}

@media (max-width: 600px) {
	body.tech .about-page .about-text h1 {
		font-size: 28px;
		line-height: 28px;
		margin: 0 0 20px
	}
}

body.tech .about-page .about-text h1>span {
	display: block
}

body.tech .about-page .about-text h1>span span {
	display: inline-block
}

body.tech .about-page .about-text p {
	opacity: 0;
	font-size: 16px;
	line-height: 32px
}

@media (max-width: 600px) {
	body.tech .about-page .about-text p {
		line-height: 24px
	}
}

@media (max-width: 1250px) {
	body.tech .about-page .about-text {
		padding-left: 40px;
		padding-right: 40px
	}
}

@media (max-width: 600px) {
	body.tech .about-page .about-text {
		padding-left: 20px;
		padding-right: 20px
	}
}

body.tech .about-page .about-render {
	position: absolute;
	visibility: hidden;
	top: 0%;
	opacity: 0;
	right: 0;
	width: 140%;
	height: 100%;
	transform: translateY(0) scale(1);
	z-index: 1;
	pointer-events: none
}

@media (max-width: 1250px) {
	body.tech .about-page .about-render {
		width: 100%
	}
}

@media (max-width: 600px) {
	body.tech .about-page .about-render {
		width: 100%
	}
}

body.tech .about-page .about-render canvas {
	position: absolute;
	transform: translateY(-50%);
	top: 50%
}

body.tech .about-page .neon-sign {
	opacity: 0;
	height: 570px;
	width: 140%;
	position: absolute;
	text-transform: uppercase;
	font-size: 46px;
	color: #ff0054;
	right: 260px;
	top: -30px;
	transform: scale(0.5) perspective(900px) translateZ(-300px) rotateY(-10deg) rotateX(0deg) rotateZ(0deg) skewY(9deg);
	filter: blur(2px) brightness(2)
}

body.tech .about-page .neon-sign::before {
	content: "";
	width: 410px;
	height: 100%;
	position: absolute;
	left: 100%
}

@media (max-width: 1250px) {
	body.tech .about-page .neon-sign {
		display: none
	}
}

@media (max-width: 600px) {
	body.tech .about-page .neon-sign {
		display: none
	}
}

body.tech .about-page .neon-sign::after {
	content: "";
	border: 6px solid #ff0054;
	width: 210px;
	height: 100%;
	position: absolute;
	right: 0
}

body.tech .about-page .neon-sign.var-1 {
	transform: scale(0.7) perspective(900px) rotateY(-8deg) rotateX(0deg) rotateZ(0deg) skewY(9deg) translateX(150px)
}

body.tech .about-page .neon-sign.var-2 {
	transform: scale(0.7) perspective(900px) rotateY(-6deg) rotateX(0deg) rotateZ(0deg) skewY(6deg) translateY(6px) translateX(140px)
}

body.tech .about-page .neon-sign>* {
	position: absolute
}

body.tech .about-page .neon-sign .code {
	top: 40px;
	right: 42px;
	animation: flicker 5s infinite
}

body.tech .about-page .neon-sign .and {
	top: 94px;
	color: #00e4ff;
	font-size: 80px;
	right: 70px
}

body.tech .about-page .neon-sign .design {
	top: 145px;
	right: 19px
}

body.tech .about-page .neon-sign .key {
	animation: fade 2s steps(1) infinite;
	animation-direction: reverse;
	bottom: 45px;
	right: 53px
}

body.tech .about-page .neon-sign .key-pressed {
	animation: fade 2s steps(1) infinite;
	animation-direction: normal;
	bottom: 40px;
	right: 19px
}

body.tech .about-page .neon-sign .hand {
	animation: hand 2s steps(1) infinite;
	right: 30px;
	bottom: 100px
}

body.tech .about-page .neon-sign .key-base {
	bottom: 20px;
	right: 45px
}

body.tech .introduction {
	position: absolute;
	background-color: #b74069;
	height: 100%;
	width: 100%;
	top: 0;
	left: 0;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center
}

body.tech .introduction .skip {
	padding: 30px;
	position: absolute;
	bottom: 50px;
	font-size: 16px;
	color: #8d1959;
	cursor: pointer
}

body.tech .intro-text {
	transition: color 500ms cubic-bezier(0.47, 0, 0.745, 0.715);
	position: absolute;
	bottom: 50%;
	z-index: 1;
	width: 100%;
	padding: 0 10px;
	text-align: center;
	font-size: 24px;
	color: #f3f1bb
}

body.tech .intro-text.tutorial {
	font-size: 16px;
	bottom: 70px
}

body.tech .intro-text span {
	display: inline-block
}

@media (max-width: 1250px) {
	body.tech .intro-text.tutorial {
		bottom: 40px
	}
}

@media (max-width: 600px) {
	body.tech .intro-text {
		font-size: 16px
	}
	body.tech .intro-text.tutorial {
		bottom: auto;
		top: 140px
	}
}

body.tech .discover {
	opacity: 0;
	visibility: hidden;
	color: #fff;
	position: absolute;
	bottom: 0;
	right: 0;
	height: 160px;
	width: 240px;
	z-index: 100;
	cursor: pointer
}

body.tech .discover .open>span {
	position: absolute;
	height: 14px;
	width: 7px;
	bottom: 65px;
	right: 80px;
	transform: translateX(-80px)
}

body.tech .discover .open>span::before {
	transition: all 300ms cubic-bezier(0.47, 0, 0.745, 0.715);
	transition-property: background-color, transform, opacity;
	transition-delay: 0s, 0.8s, 0.8s;
	content: "";
	position: absolute;
	border-radius: 10px 10px 20px 0;
	height: 8px;
	transform-origin: top left;
	width: 1.5px;
	background-color: #fff;
	transform: rotate(-45deg) scaleY(4);
	opacity: 0
}

body.tech .discover .open>span::after {
	transition: all 300ms cubic-bezier(0.47, 0, 0.745, 0.715);
	transition-property: background-color, transform, opacity;
	transition-delay: 0s, 1.1s, 1.1s;
	content: "";
	position: absolute;
	border-radius: 0 20px 10px 10px;
	height: 8px;
	transform-origin: bottom left;
	margin-top: 1px;
	width: 1.5px;
	background-color: #fff;
	transform: rotate(45deg) scaleY(4);
	opacity: 0
}

body.tech .discover .open.active>span::before {
	transform: rotate(-45deg) scaleY(1);
	opacity: 1;
	transition-delay: 0
}

body.tech .discover .open.active>span::after {
	transform: rotate(45deg) scaleY(1);
	opacity: 1;
	transition-delay: 0
}

body.tech .discover .close>span {
	position: absolute;
	height: 17px;
	width: 7px;
	bottom: 65px;
	right: 80px;
	transform: translateX(-57px)
}

body.tech .discover .close>span::before {
	transition: all 300ms cubic-bezier(0.47, 0, 0.745, 0.715);
	transition-delay: 1.1s;
	content: "";
	position: absolute;
	border-radius: 5px;
	height: 15px;
	width: 2px;
	margin-left: -5px;
	margin-top: 1px;
	background-color: #fff;
	transform-origin: top;
	transform: rotate(-45deg) scaleY(0)
}

body.tech .discover .close>span::after {
	transition: all 300ms cubic-bezier(0.47, 0, 0.745, 0.715);
	transition-delay: 0.8s;
	content: "";
	position: absolute;
	border-radius: 5px;
	height: 15px;
	width: 2px;
	background-color: #fff;
	transform-origin: bottom;
	margin-left: -5px;
	margin-top: -3px;
	transform: rotate(45deg) scaleY(0)
}

body.tech .discover .close.active>span::before {
	transform: rotate(-45deg) scaleY(1);
	transition-delay: 0
}

body.tech .discover .close.active>span::after {
	transform: rotate(45deg) scaleY(1);
	transition-delay: 0
}

body.tech .discover .open,
body.tech .discover .close {
	transition: all 300ms cubic-bezier(0.47, 0, 0.745, 0.715);
	height: 100%;
	position: absolute;
	width: 100%;
	left: 0;
	top: 0;
	opacity: 0
}

body.tech .discover .open.active,
body.tech .discover .close.active {
	opacity: 1
}

body.tech .discover .open a span,
body.tech .discover .close a span {
	transform: translateX(5px) translateY(5px);
	opacity: 0
}

body.tech .discover .open.active a span,
body.tech .discover .close.active a span {
	transform: translateX(0px) translateY(0px);
	opacity: 1
}

body.tech .discover:hover {
	height: 200px;
	width: 300px
}

body.tech .discover:hover a {
	color: #f3f1bb
}

body.tech .discover:hover svg {
	stroke: #8d1959
}

body.tech .discover>div>a {
	position: absolute;
	right: 80px;
	bottom: 65px
}

body.tech .discover a span {
	position: relative;
	display: inline-block
}

@media (max-width: 1250px) {
	body.tech .discover {
		height: 100px;
		width: 170px
	}
}

@media (max-width: 600px) {
	body.tech .discover {
		height: 70px;
		width: 120px;
		z-index: 2
	}
	body.tech .discover:hover {
		width: 100%;
		height: 90px
	}
}

body.tech .line-aux {
	width: 45px;
	position: fixed;
	opacity: 1;
	height: 100px;
	left: 82px;
	bottom: 110px;
	z-index: 3;
	opacity: 0;
	visibility: hidden
}

@media (max-width: 1250px) {
	body.tech .line-aux {
		left: 50px;
		bottom: 90px
	}
}

@media (max-width: 600px) {
	body.tech .line-aux {
		left: 20px;
		bottom: 73px;
		visibility: hidden !important;
		opacity: 0 !important
	}
}

body.tech .line-aux::after {
	transition: background-color 500ms cubic-bezier(0.47, 0, 0.745, 0.715);
	content: "";
	background-color: #e28288;
	width: 2px;
	height: 10px;
	margin-left: -1px;
	left: 50%;
	bottom: -65px;
	position: absolute
}

body.tech .line-aux .line {
	transition: background-color 500ms cubic-bezier(0.47, 0, 0.745, 0.715);
	width: 2px;
	background-color: #e28288;
	height: 0;
	margin-left: -1px;
	left: 50%;
	margin-bottom: 10px;
	position: relative
}

@media (max-width: 600px) {
	body.tech .line-aux .line {
		display: none
	}
}

@media (max-height: 500px) {
	body.tech .line-aux .line {
		display: none
	}
}

body.tech .line-aux .counter {
	transition: all 500ms cubic-bezier(0.47, 0, 0.745, 0.715);
	text-transform: uppercase;
	font-family: "Teko", sans-serif;
	font-weight: 500;
	font-size: 18px;
	color: #f3f1bb;
	height: 50px;
	width: 100px;
	overflow: hidden;
	text-align: center;
	position: absolute;
	bottom: -50px;
	left: -27px
}

body.tech .line-aux .counter .page {
	transition: color 500ms cubic-bezier(0.47, 0, 0.745, 0.715);
	position: absolute;
	right: 50%;
	margin-right: 7px;
	bottom: 20px;
	margin-bottom: 45px;
	text-align: right
}

body.tech .line-aux .counter .divider {
	transition: color 500ms cubic-bezier(0.47, 0, 0.745, 0.715);
	position: absolute;
	left: 50%;
	color: #fff;
	bottom: 12px;
	transform: translateX(-50%);
	margin-bottom: 45px
}

body.tech .line-aux .counter .total {
	transition: color 500ms cubic-bezier(0.47, 0, 0.745, 0.715);
	left: 50%;
	margin-left: 7px;
	position: absolute;
	bottom: 5px;
	margin-bottom: 45px
}

body.tech .scroll-position {
	width: 100%;
	position: absolute;
	bottom: 0;
	height: 2px;
	opacity: 0;
	z-index: 2;
	visibility: hidden
}

body.tech .scroll-position span {
	position: relative;
	display: block;
	width: 50%;
	background-color: #fff;
	height: 100%
}

body.tech .line-scroll {
	position: absolute;
	z-index: 2;
	opacity: 0;
	visibility: hidden;
	height: 45px;
	width: 140px;
	left: 500px;
	bottom: 40px;
	overflow: hidden
}

body.tech .line-scroll>span {
	position: absolute;
	content: "";
	background-color: #fff;
	width: 50%;
	bottom: 0px;
	top: auto !important;
	height: 2px !important;
	z-index: 1;
	animation-name: example;
	animation-duration: 4s;
	animation-iteration-count: infinite
}

body.tech .line-scroll::after {
	content: "->";
	position: absolute;
	color: #fff;
	margin-left: 15px
}

@media (max-width: 1250px) {
	body.tech .line-scroll {
		left: 480px;
		bottom: 20px
	}
}

@media (max-width: 600px) {
	body.tech .line-scroll {
		left: 20px;
		bottom: 20px;
		height: 35px
	}
}

body.tech .fireworks-plane {
	width: 600px;
	height: 600px;
	left: 340px;
	position: absolute;
	opacity: 0;
	top: 50%;
	transform: translateX(-50%) translateY(-50%) rotateY(180deg);
	perspective: 500px;
	z-index: 1
}

@media (max-width: 1250px) {
	body.tech .fireworks-plane {
		transform: translateX(-50%) translateY(-50%) rotateY(180deg) scale(0.6)
	}
}

@media (max-width: 600px) {
	body.tech .fireworks-plane {
		transform: translateX(-50%) translateY(-50%) rotateY(180deg) scale(0.4);
		left: 50%
	}
}

body.tech .firework-1 {
	position: absolute;
	top: 280px;
	left: 50px;
	overflow: visible;
	stroke: #fff;
	stroke-width: 10px;
	stroke-dashoffset: -358;
	transform: rotateX(40deg);
	stroke-dasharray: 0, 10000;
	stroke-linecap: round
}

body.tech .firework-1:nth-of-type(2) {
	top: 230px;
	transform: rotateZ(20deg) rotateX(40deg)
}

body.tech .firework-2>span {
	height: 100px;
	width: 4px;
	position: absolute;
	left: 190px;
	transform-origin: bottom;
	top: 145px
}

body.tech .firework-2>span span {
	content: "";
	height: 0;
	background-color: #fff;
	bottom: 0;
	width: 100%;
	position: absolute;
	border-radius: 2px
}

body.tech .firework-2>span:nth-of-type(1) {
	transform: rotate(60deg)
}

body.tech .firework-2>span:nth-of-type(2) {
	transform: rotate(120deg)
}

body.tech .firework-2>span:nth-of-type(3) {
	transform: rotate(180deg)
}

body.tech .firework-2>span:nth-of-type(4) {
	transform: rotate(240deg)
}

body.tech .firework-2>span:nth-of-type(5) {
	transform: rotate(300deg)
}

body.tech .firework-2>span:nth-of-type(6) {
	transform: rotate(360deg)
}

body.tech .models {
	height: 100%;
	width: 100%;
	position: absolute;
	overflow: hidden;
	left: 0;
	top: 0;
	z-index: 1
}

body.tech .models .project-link>* {
	position: absolute
}

body.tech .models .project-link {
	position: absolute;
	height: 100%;
	opacity: 0;
	visibility: hidden;
	width: 100%;
	transform: perspective(1400px)
}

body.tech .models .project-link.tech span {
	color: #5bf46d
}

body.tech .models .project-link.tech span {
	color: #ff9273
}

body.tech .models .project-link.non-tech span {
	color: #a07f5e
}

body.tech .models .project-link.simon-cuchillerias span {
	color: #f7ce3c
}

body.tech .models .project-link.guild-storm span {
	color: #f76565
}

@media (max-width: 600px) {
	body.tech .models .project-link {
		transform: scale(0.5)
	}
}

body.tech .models canvas {
	top: 0;
	z-index: 1
}

body.tech .models .frame {
	stroke: rgba(141, 25, 89, 0.03);
	stroke-width: 85px;
	height: 600px;
	width: 600px;
	margin: 0;
	padding: 25px;
	border-radius: 50%
}

body.tech .models h2 {
	top: 50%;
	left: 400px;
	opacity: 0;
	margin-top: -62px;
	font-size: 24px;
	font-weight: 400;
	white-space: nowrap;
	height: 24px
}

body.tech .models small {
	top: 50%;
	left: 400px;
	margin-top: 25px;
	opacity: 0;
	text-transform: uppercase;
	white-space: nowrap
}

body.tech .models span {
	top: 50%;
	font-family: "Teko", sans-serif;
	font-size: 18px;
	position: absolute;
	height: 0;
	overflow: hidden;
	margin-top: -45px;
	left: 400px
}

body.tech .projects {
	position: absolute;
	width: 100%;
	height: 100%;
	z-index: 1
}

body.tech .project-content {
	position: relative;
	z-index: 1
}

body.tech .project-content .studio-wrap {
	height: 100%
}

body.tech .project-content .studio-wrap .scene {
	height: 100%;
	width: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	position: absolute;
	transform: translateX(100%);
	top: 50%
}

body.tech .project-content .studio-wrap .scene .image {
	padding: 40px;
	display: flex;
	align-items: center;
	align-self: stretch;
	justify-content: center
}

body.tech .project-content .studio-wrap .scene .video {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 40px;
	position: relative
}

body.tech .project-content .studio-wrap .scene .video .video-wrap {
	position: absolute;
	width: 100%;
	height: 100%;
	padding: 40px;
	pointer-events: none;
	z-index: 1
}

@media (max-width: 600px) {
	body.tech .project-content .studio-wrap .scene .video::before {
		content: "";
		position: absolute;
		width: 30%;
		padding-top: 30%;
		border-radius: 50%;
		border: 2px solid #fff
	}
	body.tech .project-content .studio-wrap .scene .video::after {
		content: "";
		position: absolute;
		left: 50%;
		margin-left: -15px;
		border-left: 33px solid #f3f1bb;
		border-top: 20px solid transparent;
		border-right: 20px solid transparent;
		border-bottom: 20px solid transparent
	}
}

body.tech .project-content .studio-wrap .scene img {
	max-height: 100%;
	max-width: 100%
}

body.tech .project-content .studio-wrap .scene .fractured {
	padding: 0
}

body.tech .project-content .studio-wrap .scene h2 {
	font-weight: 500;
	display: block;
	font-family: "Teko", sans-serif;
	text-transform: uppercase;
	font-size: 40px;
	line-height: 40px;
	margin-top: 10px;
	margin-bottom: 40px
}

body.tech .project-content .studio-wrap .scene h2 span {
	display: inline-block
}

body.tech .project-content .studio-wrap .scene .text-title {
	color: #fff
}

body.tech .project-content .studio-wrap .scene .text-title small {
	color: #8d1959;
	text-transform: uppercase;
	font-weight: bold
}

body.tech .project-content .studio-wrap .scene .text-content {
	line-height: 36px;
	color: #f3f1bb;
	font-size: 14px
}

@media (max-width: 600px) {
	body.tech .project-content .studio-wrap .scene .text-content {
		line-height: 24px;
		font-size: 14px
	}
}

@media (max-height: 500px) {
	body.tech .project-content .studio-wrap .scene .text-content {
		line-height: 24px
	}
}

body.tech .project-content .studio-wrap .scene.split {
	flex-direction: row;
	align-items: stretch;
	padding: 40px
}

body.tech .project-content .studio-wrap .scene.split>div {
	position: relative;
	padding: 20px 10%;
	display: flex;
	flex: 0 0 50%;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	overflow: hidden
}

@media (max-width: 600px) {
	body.tech .project-content .studio-wrap .scene.split h2 {
		font-size: 28px;
		line-height: 28px;
		margin: 0 0 10px
	}
}

@media (max-height: 500px) {
	body.tech .project-content .studio-wrap .scene.split h2 {
		font-size: 28px;
		line-height: 28px;
		margin: 0 0 10px
	}
}

body.tech .project-content .studio-wrap .scene.split.variant {
	position: relative;
	overflow: hidden
}

body.tech .project-content .studio-wrap .scene.split.variant .split-right {
	align-items: stretch;
	padding: 20px 0;
	flex-wrap: nowrap;
	overflow: visible
}

body.tech .project-content .studio-wrap .scene.split.variant .split-right>div {
	position: absolute;
	top: 40px;
	bottom: 40px
}

body.tech .project-content .studio-wrap .scene.split.variant .split-right>div img {
	max-width: none;
	max-height: 100%
}

@media (max-width: 1250px) {
	body.tech .project-content .studio-wrap .scene.split {
		padding: 20px
	}
	body.tech .project-content .studio-wrap .scene.split>div {
		padding: 20px
	}
}

@media (max-width: 600px) {
	body.tech .project-content .studio-wrap .scene.split {
		flex-direction: column;
		padding: 0
	}
	body.tech .project-content .studio-wrap .scene.split>div {
		padding: 20px;
		flex: auto
	}
	body.tech .project-content .studio-wrap .scene.split.variant .split-right {
		padding: 0 20px
	}
	body.tech .project-content .studio-wrap .scene.split.variant .split-right>div {
		left: 20px;
		right: 20px;
		top: 0;
		bottom: 0
	}
	body.tech .project-content .studio-wrap .scene.split.variant .split-right>div img {
		max-width: 100%;
		max-height: none
	}
}

@media (max-height: 500px) {
	body.tech .project-content .studio-wrap .scene.split {
		flex-direction: column;
		padding: 0
	}
	body.tech .project-content .studio-wrap .scene.split>div {
		padding: 20px;
		flex: auto
	}
	body.tech .project-content .studio-wrap .scene.split.variant .split-right {
		padding: 0 20px
	}
	body.tech .project-content .studio-wrap .scene.split.variant .split-right>div {
		left: 20px;
		right: 20px;
		top: 0;
		bottom: 0
	}
	body.tech .project-content .studio-wrap .scene.split.variant .split-right>div img {
		max-width: 100%;
		max-height: none
	}
}

body.tech .project-content .studio-wrap .intro {
	align-items: flex-start;
	padding-left: 550px;
	width: calc(100% - 500px);
	padding-right: 20px
}

body.tech .project-content .studio-wrap .intro h1 {
	font-family: "Teko", sans-serif;
	font-weight: 500;
	font-size: 72px;
	line-height: 54px;
	text-transform: uppercase;
	padding-right: 100px;
	margin: 20px 0
}

body.tech .project-content .studio-wrap .intro h1>span {
	display: block
}

body.tech .project-content .studio-wrap .intro h1>span span {
	display: inline-block
}

body.tech .project-content .studio-wrap .intro h1 small {
	color: #fff;
	display: block;
	margin-left: -52px;
	text-align: right;
	font-size: 46px;
	font-weight: 400;
	line-height: 46px;
	width: 50px;
	margin-bottom: -46px;
	height: 46px
}

@media (max-width: 1250px) {
	body.tech .project-content .studio-wrap .intro {
		bottom: 20px;
		padding: 20px 0;
		max-width: 640px;
		width: 100%;
		align-items: stretch;
		justify-content: flex-end
	}
	body.tech .project-content .studio-wrap .intro>div {
		height: auto;
		padding: 0 20px 80px;
		text-align: center
	}
	body.tech .project-content .studio-wrap .intro h1 {
		display: inline-block;
		width: auto;
		font-size: 48px;
		text-align: center
	}
	body.tech .project-content .studio-wrap .intro h1>span {
		display: inline-block
	}
	body.tech .project-content .studio-wrap .intro h1 small {
		font-size: 18px;
		line-height: 36px
	}
}

@media (max-width: 600px) {
	body.tech .project-content .studio-wrap .intro>div {
		padding-bottom: 100px
	}
	body.tech .project-content .studio-wrap .intro>div h1 small {
		display: none
	}
}

@media (max-width: 1400px) {
	body.tech .project-content .studio-wrap .intro h1.fractured {
		font-size: 48px;
		line-height: 48px;
		padding-right: 20px
	}
	body.tech .project-content .studio-wrap .intro h1.fractured small {
		font-size: 24px;
		line-height: 32px
	}
}

@media (max-height: 500px) {
	body.tech .project-content .studio-wrap .intro>div {
		height: auto;
		padding: 0 20px 80px
	}
	body.tech .project-content .studio-wrap .intro h1 {
		font-size: 48px;
		line-height: 48px;
		margin-bottom: 0
	}
}

body.tech .project-content .studio-next {
	width: 600px;
	max-width: 100%;
	position: absolute;
	border-bottom: 1px solid #e28288;
	border-top: 1px solid #e28288;
	top: 50%;
	margin-top: -50px;
	left: 100%;
	z-index: 1;
	padding-left: 40px;
	overflow: hidden
}

body.tech .project-content .studio-next small {
	font-weight: bold;
	font-size: 11px;
	text-transform: uppercase;
	margin-bottom: -20px;
	margin-top: 10px;
	margin-left: 2px;
	display: block;
	color: #fff
}

body.tech .project-content .studio-next h4 {
	font-family: "Teko", sans-serif;
	text-transform: uppercase;
	font-size: 60px;
	font-weight: 500;
	margin: 30px 0
}

body.tech .project-content .studio-next .button {
	transition: all 500ms cubic-bezier(0.47, 0, 0.745, 0.715);
	width: 40px;
	height: 40px;
	position: absolute;
	right: 30px;
	border: 1px solid #e28288;
	top: 50%;
	transform: translateY(-50%)
}

body.tech .project-content .studio-next .button::after {
	content: "";
	border-left: solid 3px #f3f1bb;
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translateX(-50%) translateY(-50%);
	border-right: solid 3px transparent;
	border-top: solid 3px transparent;
	border-bottom: solid 3px transparent;
	height: 6px;
	width: 6px;
	display: block
}

body.tech .project-content .studio-next .progress {
	background-color: #fff;
	width: 0%;
	height: 1px;
	position: absolute;
	bottom: 0;
	left: 100%
}

body.tech .project-content .studio-next.complete .button {
	border: 1px solid #fff
}

@media (max-width: 600px) {
	body.tech .project-content .studio-next small {
		margin-bottom: -18px
	}
	body.tech .project-content .studio-next h4 {
		font-size: 40px;
		margin: 20px 0
	}
}

body.tech .project-details {
	list-style: none;
	display: flex;
	padding: 0;
	padding-left: 2px;
	margin: 0
}

body.tech .project-details li {
	opacity: 1;
	margin-bottom: 10px;
	position: relative;
	margin-right: 20px;
	font-family: "Teko", sans-serif;
	text-transform: uppercase;
	font-size: 18px;
	color: #f3f1bb
}

body.tech .project-details li:last-of-type {
	margin-right: 0
}

body.tech .project-details small {
	color: #fff;
	font-family: "Rubik", sans-serif;
	font-size: 10px;
	font-weight: 600;
	margin-bottom: -2px;
	display: block
}

@media (max-width: 1250px) {
	body.tech .project-details {
		text-align: center;
		justify-content: center
	}
}

body.tech .circles {
	position: absolute;
	z-index: 1;
	width: 100%;
	height: 100%
}

body.tech .circles .circle-trail {
	stroke: #f3f1bb;
	position: absolute;
	height: 550px;
	width: 550px;
	overflow: visible;
	border-radius: 50%;
	stroke-linecap: round;
	stroke-width: 1px;
	opacity: 0;
	stroke-dasharray: 0.2, 10.268;
	left: 50%;
	top: 50%;
	transform: translateY(-50%) translateX(-50%)
}

@media (max-width: 600px) {
	body.tech .circles .circle-trail {
		height: 280px;
		width: 280px
	}
}

body.tech .circles .circle-progress {
	stroke: #fff;
	position: absolute;
	height: 550px;
	width: 550px;
	border-radius: 50%;
	overflow: visible;
	transform-origin: center;
	stroke-width: 1.5px;
	stroke-linecap: round;
	stroke-dasharray: 629;
	stroke-dashoffset: 629;
	left: 50%;
	opacity: 0;
	top: 50%;
	transform: translateY(-50%) translateX(-50%) rotate(270deg)
}

@media (max-width: 600px) {
	body.tech .circles .circle-progress {
		height: 280px;
		width: 280px
	}
}

body.tech .circles .circle-progress-bullets {
	height: 550px;
	width: 550px;
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translateY(-50%) translateX(-50%)
}

@media (max-width: 600px) {
	body.tech .circles .circle-progress-bullets {
		height: 280px;
		width: 280px
	}
}

body.tech .circles .circle-progress-bullets .bullet {
	width: 12px;
	height: 100%;
	display: block;
	position: absolute;
	left: 50%;
	margin-left: -6px
}

body.tech .circles .circle-progress-bullets .bullet span {
	transition: border 500ms cubic-bezier(0.47, 0, 0.745, 0.715);
	border: 3px solid #fff;
	background-color: #ff896f;
	content: "";
	height: 12px;
	opacity: 0;
	width: 12px;
	display: block;
	border-radius: 50%;
	margin-top: -6px;
	transform: scale(0)
}

body.tech .circles .circle-progress-bullets .bullet-project {
	position: absolute;
	height: 100%;
	width: 20px;
	left: 50%;
	margin-left: -10px
}

body.tech .circles .circle-progress-bullets .bullet-project span {
	transition: background-color 500ms cubic-bezier(0.47, 0, 0.745, 0.715);
	border: 2px solid #e28288;
	background-color: #db656c;
	height: 20px;
	width: 20px;
	display: block;
	border-radius: 50%;
	margin-top: -10px;
	transform: scale(0)
}

body.tech .layout {
	position: absolute;
	width: 100%;
	height: 100%
}

body.tech .layout .gameboy {
	position: absolute;
	z-index: 100000;
	top: 20px;
	left: 50%
}

body.tech .transition {
	position: absolute;
	height: 100%;
	width: 100%;
	overflow: hidden;
	background-color: #f3f2ef;
	opacity: 0;
	visibility: hidden
}

body.tech .project {
	left: 50%;
	position: absolute;
	top: 50%;
	width: 50%;
	opacity: 0;
	visibility: hidden;
	padding-left: 120px;
	transform: translateY(-50%)
}

body.tech .project h1 {
	color: #f3f1bb;
	font-family: "Teko", sans-serif;
	font-size: 72px;
	line-height: 60px;
	font-weight: 400;
	margin: 0 0 30px;
	white-space: nowrap;
	perspective: 400px;
	text-transform: uppercase
}

body.tech .project h1>span {
	display: block
}

body.tech .project h1>span span {
	display: inline-block;
	position: relative;
	transform-origin: top left
}

@media (max-width: 1250px) {
	body.tech .project {
		left: 0;
		width: 100%;
		top: auto;
		bottom: 0;
		padding: 0 20px 100px;
		transform: none
	}
	body.tech .project h1 {
		font-size: 72px;
		text-align: center
	}
	body.tech .project h1 div {
		display: inline-block
	}
}

@media (max-width: 600px) {
	body.tech .project {
		top: auto;
		bottom: 0;
		padding: 0 20px 100px
	}
	body.tech .project h1 {
		font-size: 48px;
		line-height: 48px;
		margin-bottom: 0
	}
}

@media (max-height: 500px) {
	body.tech .project {
		padding-left: 150px;
		padding-right: 150px;
		padding-bottom: 0;
		bottom: 50%;
		transform: translateY(50%)
	}
	body.tech .project h1 {
		text-align: center;
		display: flex;
		justify-content: center;
		font-size: 36px;
		line-height: 36px;
		margin-bottom: 20px
	}
	body.tech .project h1>span {
		display: inline-block;
		margin-right: 7px
	}
	body.tech .project h1>span:last-of-type {
		margin-right: 0
	}
}

@media (max-width: 600px) {
	body.tech.studio .line-aux,
	body.tech.about .line-aux {
		opacity: 0 !important;
		visibility: hidden !important
	}
}

@media (max-width: 1250px) {
	body.tech.about .line {
		opacity: 0
	}
}

@media (max-width: 600px) {
	body.tech.menu .project-link {
		transform: scale(0.8)
	}
}

body.tech.studio {
	transition: all 500ms cubic-bezier(0.47, 0, 0.745, 0.715);
	background: #271c24;
	color: #6a565f;
	margin: 0;
	overflow: hidden;
	font-family: "Rubik", sans-serif;
	font-size: 14px;
	line-height: 20px
}

body.tech.studio a {
	transition: color 300ms cubic-bezier(0.47, 0, 0.745, 0.715);
	color: #bdaab5;
	text-decoration: none;
	display: inline-block
}

body.tech.studio a.fractured>span {
	display: inline-block
}

body.tech.studio a.fractured>span span {
	display: inline-block;
	font-family: "Rubik", sans-serif;
	line-height: 20px;
	text-transform: none
}

body.tech.studio a:hover {
	color: #de9e94
}

body.tech.studio .gradient {
	position: absolute;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
	opacity: 0.8
}

body.tech.studio .gradient stop {
	transition: all 500ms cubic-bezier(0.47, 0, 0.745, 0.715);
	stop-color: #271c24
}

body.tech.studio .gradient stop:last-of-type {
	stop-color: #271c24
}

body.tech.studio .circle-transition {
	position: absolute;
	height: 0;
	width: 0;
	border-radius: 50%;
	transform: translateX(-50%) translateY(-50%);
	left: 50%;
	top: 50%
}

body.tech.studio .logo {
	width: 250px;
	position: fixed;
	opacity: 1;
	z-index: 2;
	left: 80px;
	top: 60px;
	color: #bdaab5;
	cursor: pointer
}

body.tech.studio .logo.revert {
	color: #ff9273
}

body.tech.studio .logo.revert svg {
	fill: #ff9273
}

@media (max-width: 1250px) {
	body.tech.studio .logo {
		left: 50px;
		top: 40px
	}
}

@media (max-width: 600px) {
	body.tech.studio .logo {
		left: 20px;
		top: 20px
	}
}

body.tech.studio .logo h2 {
	transition: color 500ms cubic-bezier(0.47, 0, 0.745, 0.715);
	font-size: 18px;
	font-weight: 400;
	line-height: normal;
	margin: 8px 0 0;
	display: block
}

body.tech.studio .logo h3 {
	transition: color 500ms cubic-bezier(0.47, 0, 0.745, 0.715);
	font-size: 11px;
	text-transform: uppercase;
	font-weight: 700;
	margin: 0;
	letter-spacing: 0.45px;
	display: none
}

body.tech.studio .logo svg {
	transition: all 500ms cubic-bezier(0.47, 0, 0.745, 0.715);
	fill: #bdaab5;
	float: left;
	margin-right: 15px
}

@media (max-width: 600px) {
	body.tech.studio .logo h2,
	body.tech.studio .logo h3 {
		display: none
	}
}

@media (max-height: 500px) {
	body.tech.studio .logo h2,
	body.tech.studio .logo h3 {
		display: none
	}
}

body.tech.studio .mobile-menu {
	transition: fill 500ms cubic-bezier(0.47, 0, 0.745, 0.715);
	position: absolute;
	bottom: 33px;
	fill: #bdaab5;
	left: 20px;
	z-index: 2;
	cursor: pointer;
	opacity: 0;
	visibility: hidden;
	display: none
}

@media (max-width: 600px) {
	body.tech.studio .mobile-menu {
		display: block
	}
}

body.tech.studio .menu-top {
	position: fixed;
	right: 80px;
	z-index: 10;
	top: 70px
}

@media (max-width: 1250px) {
	body.tech.studio .menu-top {
		right: 50px;
		top: 50px
	}
}

@media (max-width: 600px) {
	body.tech.studio .menu-top {
		right: 20px;
		top: 30px
	}
}

body.tech.studio .menu-top a {
	padding: 20px;
	padding-right: 0;
	margin-top: -20px;
	opacity: 0;
	visibility: hidden;
	transform: translateY(-10px)
}

body.tech.studio .menu-top a span {
	display: inline-block
}

body.tech.studio .mouse-track {
	pointer-events: none;
	position: absolute;
	z-index: 1000;
	opacity: 0
}

body.tech.studio .mouse-track .outer-circle {
	stroke: #bdaab5;
	transform: translateX(-50%) translateY(-50%) rotate(-90deg);
	stroke-width: 2px;
	fill: none;
	height: 18px;
	width: 18px;
	overflow: visible;
	position: absolute
}

body.tech.studio .mouse-track .outer-circle .countdown {
	opacity: 0;
	stroke: #ff9273;
	position: absolute;
	stroke-dashoffset: 125px;
	stroke-dasharray: 125px;
	stroke-width: 4px
}

body.tech.studio .mouse-track .inner-circle {
	stroke: #bdaab5;
	transform: translateX(-50%) translateY(-50%);
	stroke-width: 2px;
	fill: none;
	height: 2px;
	width: 2px;
	opacity: 0.6;
	overflow: visible;
	position: absolute
}

body.tech.studio .mouse-track .arrow-right {
	stroke: #ff9273;
	opacity: 0;
	visibility: hidden;
	stroke-width: 2px;
	transform: rotate(180deg);
	margin-left: 10px;
	margin-top: -7px;
	position: absolute
}

body.tech.studio .mouse-track .arrow-left {
	stroke: #ff9273;
	opacity: 0;
	margin-left: -20px;
	margin-top: -6px;
	visibility: hidden;
	stroke-width: 2px;
	position: absolute
}

body.tech.studio .mouse-track .play {
	fill: #bdaab5;
	opacity: 1;
	margin-top: -6px;
	stroke-width: 2px;
	margin-top: -18px;
	margin-left: -14px;
	transform: scale(0);
	position: absolute
}

body.tech.studio .mouse-track .stop {
	fill: #bdaab5;
	height: 38px;
	width: 38px;
	margin-left: -19px;
	margin-top: -19px;
	transform: scale(0);
	position: absolute
}

@media (max-width: 600px) {
	body.tech.studio .mouse-track {
		opacity: 0 !important;
		visibility: hidden !important
	}
}

body.tech.studio .about-page {
	position: absolute;
	height: 100%;
	width: 100%;
	padding: 40px;
	left: 0;
	opacity: 1;
	top: 0;
	display: flex;
	flex-direction: row;
	visibility: hidden;
	align-items: stretch
}

@media (max-width: 1250px) {
	body.tech.studio .about-page {
		padding: 20px
	}
}

@media (max-width: 600px) {
	body.tech.studio .about-page {
		flex-direction: column;
		padding: 0
	}
}

body.tech.studio .about-page.active .neon-sign {
	animation: flicker 10s infinite
}

body.tech.studio .about-page.active .split-left::before {
	width: 100%;
	bottom: 0
}

body.tech.studio .about-page.active .split-left.shaded::after {
	opacity: 1
}

body.tech.studio .about-page .split-left {
	opacity: 0;
	visibility: hidden;
	overflow: hidden
}

body.tech.studio .about-page .split-left.shaded::after {
	content: "Swipe or Scroll and click image to know more";
	padding-right: 20px;
	line-height: 100px;
	color: #493942;
	text-align: right;
	position: absolute;
	bottom: 0;
	width: 100%;
	opacity: 0;
	transition: all 500ms cubic-bezier(0.47, 0, 0.745, 0.715);
	transition-delay: 1;
	height: 100px;
	background-color: red;
	background: linear-gradient(transparent, #14141a 50%);
	pointer-events: none
}

body.tech.studio .about-page .split-left::before {
	transition: all 500ms cubic-bezier(0.47, 0, 0.745, 0.715);
	content: "";
	position: absolute;
	width: 0%;
	height: 100%;
	left: 0;
	background-color: #14141a;
	z-index: -1;
	bottom: 0
}

body.tech.studio .about-page>* {
	position: relative;
	z-index: 1;
	flex: 0 0 50%;
	display: flex;
	align-items: center
}

body.tech.studio .about-page .gradient-about {
	background-color: red;
	position: absolute;
	width: 100%;
	height: 100%;
	z-index: 1;
	top: 0;
	left: 0;
	-webkit-mask-image: url("../smoke-sprite.png");
	-webkit-mask-size: 3000% 100%;
	-webkit-mask-position-x: 0%;
	animation-iteration-count: 1;
	animation-delay: 1s
}

body.tech.studio .about-page .gradient-about.active {
	animation: mask 1.5s steps(29) forwards
}

body.tech.studio .about-page .gradient-about stop {
	transition: all 500ms cubic-bezier(0.47, 0, 0.745, 0.715);
	stop-color: #292038
}

body.tech.studio .about-page .gradient-about stop:last-of-type {
	stop-color: #18181d
}

@media (max-width: 600px) {
	body.tech.studio .about-page .gradient-about stop {
		transition: all 500ms cubic-bezier(0.47, 0, 0.745, 0.715);
		stop-color: #18181d
	}
	body.tech.studio .about-page .gradient-about stop:last-of-type {
		stop-color: #18181d
	}
}

body.tech.studio .about-page .about-text {
	position: absolute;
	padding: 120px;
	padding-right: 240px
}

body.tech.studio .about-page .about-text h1 {
	color: #ff9273;
	white-space: nowrap;
	font-weight: 500;
	display: block;
	font-family: "Teko", sans-serif;
	text-transform: uppercase;
	font-size: 40px;
	line-height: 40px;
	margin-top: 10px;
	margin-bottom: 40px
}

@media (max-width: 600px) {
	body.tech.studio .about-page .about-text h1 {
		font-size: 28px;
		line-height: 28px;
		margin: 0 0 20px
	}
}

body.tech.studio .about-page .about-text h1>span {
	display: block
}

body.tech.studio .about-page .about-text h1>span span {
	display: inline-block
}

body.tech.studio .about-page .about-text p {
	opacity: 0;
	font-size: 16px;
	line-height: 32px
}

@media (max-width: 600px) {
	body.tech.studio .about-page .about-text p {
		line-height: 24px
	}
}

@media (max-width: 1250px) {
	body.tech.studio .about-page .about-text {
		padding-left: 40px;
		padding-right: 40px
	}
}

@media (max-width: 600px) {
	body.tech.studio .about-page .about-text {
		padding-left: 20px;
		padding-right: 20px
	}
}

body.tech.studio .about-page .about-render {
	position: absolute;
	visibility: hidden;
	top: 0%;
	opacity: 0;
	right: 0;
	width: 140%;
	height: 100%;
	transform: translateY(0) scale(1);
	z-index: 1;
	pointer-events: none
}

@media (max-width: 1250px) {
	body.tech.studio .about-page .about-render {
		width: 100%
	}
}

@media (max-width: 600px) {
	body.tech.studio .about-page .about-render {
		width: 100%
	}
}

body.tech.studio .about-page .about-render canvas {
	position: absolute;
	transform: translateY(-50%);
	top: 50%
}

body.tech.studio .about-page .neon-sign {
	opacity: 0;
	height: 570px;
	width: 140%;
	position: absolute;
	text-transform: uppercase;
	font-size: 46px;
	color: #ff0054;
	right: 260px;
	top: -30px;
	transform: scale(0.5) perspective(900px) translateZ(-300px) rotateY(-10deg) rotateX(0deg) rotateZ(0deg) skewY(9deg);
	filter: blur(2px) brightness(2)
}

body.tech.studio .about-page .neon-sign::before {
	content: "";
	width: 410px;
	height: 100%;
	position: absolute;
	left: 100%
}

@media (max-width: 1250px) {
	body.tech.studio .about-page .neon-sign {
		display: none
	}
}

@media (max-width: 600px) {
	body.tech.studio .about-page .neon-sign {
		display: none
	}
}

body.tech.studio .about-page .neon-sign::after {
	content: "";
	border: 6px solid #ff0054;
	width: 210px;
	height: 100%;
	position: absolute;
	right: 0
}

body.tech.studio .about-page .neon-sign.var-1 {
	transform: scale(0.7) perspective(900px) rotateY(-8deg) rotateX(0deg) rotateZ(0deg) skewY(9deg) translateX(150px)
}

body.tech.studio .about-page .neon-sign.var-2 {
	transform: scale(0.7) perspective(900px) rotateY(-6deg) rotateX(0deg) rotateZ(0deg) skewY(6deg) translateY(6px) translateX(140px)
}

body.tech.studio .about-page .neon-sign>* {
	position: absolute
}

body.tech.studio .about-page .neon-sign .code {
	top: 40px;
	right: 42px;
	animation: flicker 5s infinite
}

body.tech.studio .about-page .neon-sign .and {
	top: 94px;
	color: #00e4ff;
	font-size: 80px;
	right: 70px
}

body.tech.studio .about-page .neon-sign .design {
	top: 145px;
	right: 19px
}

body.tech.studio .about-page .neon-sign .key {
	animation: fade 2s steps(1) infinite;
	animation-direction: reverse;
	bottom: 45px;
	right: 53px
}

body.tech.studio .about-page .neon-sign .key-pressed {
	animation: fade 2s steps(1) infinite;
	animation-direction: normal;
	bottom: 40px;
	right: 19px
}

body.tech.studio .about-page .neon-sign .hand {
	animation: hand 2s steps(1) infinite;
	right: 30px;
	bottom: 100px
}

body.tech.studio .about-page .neon-sign .key-base {
	bottom: 20px;
	right: 45px
}

body.tech.studio .introduction {
	position: absolute;
	background-color: #271c24;
	height: 100%;
	width: 100%;
	top: 0;
	left: 0;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center
}

body.tech.studio .introduction .skip {
	padding: 30px;
	position: absolute;
	bottom: 50px;
	font-size: 16px;
	color: #6a565f;
	cursor: pointer
}

body.tech.studio .intro-text {
	transition: color 500ms cubic-bezier(0.47, 0, 0.745, 0.715);
	position: absolute;
	bottom: 50%;
	z-index: 1;
	width: 100%;
	padding: 0 10px;
	text-align: center;
	font-size: 24px;
	color: #bdaab5
}

body.tech.studio .intro-text.tutorial {
	font-size: 16px;
	bottom: 70px
}

body.tech.studio .intro-text span {
	display: inline-block
}

@media (max-width: 1250px) {
	body.tech.studio .intro-text.tutorial {
		bottom: 40px
	}
}

@media (max-width: 600px) {
	body.tech.studio .intro-text {
		font-size: 16px
	}
	body.tech.studio .intro-text.tutorial {
		bottom: auto;
		top: 140px
	}
}

body.tech.studio .discover {
	opacity: 0;
	visibility: hidden;
	color: #ff9273;
	position: absolute;
	bottom: 0;
	right: 0;
	height: 160px;
	width: 240px;
	z-index: 100;
	cursor: pointer
}

body.tech.studio .discover .open>span {
	position: absolute;
	height: 14px;
	width: 7px;
	bottom: 65px;
	right: 80px;
	transform: translateX(-80px)
}

body.tech.studio .discover .open>span::before {
	transition: all 300ms cubic-bezier(0.47, 0, 0.745, 0.715);
	transition-property: background-color, transform, opacity;
	transition-delay: 0s, 0.8s, 0.8s;
	content: "";
	position: absolute;
	border-radius: 10px 10px 20px 0;
	height: 8px;
	transform-origin: top left;
	width: 1.5px;
	background-color: #ff9273;
	transform: rotate(-45deg) scaleY(4);
	opacity: 0
}

body.tech.studio .discover .open>span::after {
	transition: all 300ms cubic-bezier(0.47, 0, 0.745, 0.715);
	transition-property: background-color, transform, opacity;
	transition-delay: 0s, 1.1s, 1.1s;
	content: "";
	position: absolute;
	border-radius: 0 20px 10px 10px;
	height: 8px;
	transform-origin: bottom left;
	margin-top: 1px;
	width: 1.5px;
	background-color: #ff9273;
	transform: rotate(45deg) scaleY(4);
	opacity: 0
}

body.tech.studio .discover .open.active>span::before {
	transform: rotate(-45deg) scaleY(1);
	opacity: 1;
	transition-delay: 0
}

body.tech.studio .discover .open.active>span::after {
	transform: rotate(45deg) scaleY(1);
	opacity: 1;
	transition-delay: 0
}

body.tech.studio .discover .close>span {
	position: absolute;
	height: 17px;
	width: 7px;
	bottom: 65px;
	right: 80px;
	transform: translateX(-57px)
}

body.tech.studio .discover .close>span::before {
	transition: all 300ms cubic-bezier(0.47, 0, 0.745, 0.715);
	transition-delay: 1.1s;
	content: "";
	position: absolute;
	border-radius: 5px;
	height: 15px;
	width: 2px;
	margin-left: -5px;
	margin-top: 1px;
	background-color: #ff9273;
	transform-origin: top;
	transform: rotate(-45deg) scaleY(0)
}

body.tech.studio .discover .close>span::after {
	transition: all 300ms cubic-bezier(0.47, 0, 0.745, 0.715);
	transition-delay: 0.8s;
	content: "";
	position: absolute;
	border-radius: 5px;
	height: 15px;
	width: 2px;
	background-color: #ff9273;
	transform-origin: bottom;
	margin-left: -5px;
	margin-top: -3px;
	transform: rotate(45deg) scaleY(0)
}

body.tech.studio .discover .close.active>span::before {
	transform: rotate(-45deg) scaleY(1);
	transition-delay: 0
}

body.tech.studio .discover .close.active>span::after {
	transform: rotate(45deg) scaleY(1);
	transition-delay: 0
}

body.tech.studio .discover .open,
body.tech.studio .discover .close {
	transition: all 300ms cubic-bezier(0.47, 0, 0.745, 0.715);
	height: 100%;
	position: absolute;
	width: 100%;
	left: 0;
	top: 0;
	opacity: 0
}

body.tech.studio .discover .open.active,
body.tech.studio .discover .close.active {
	opacity: 1
}

body.tech.studio .discover .open a span,
body.tech.studio .discover .close a span {
	transform: translateX(5px) translateY(5px);
	opacity: 0
}

body.tech.studio .discover .open.active a span,
body.tech.studio .discover .close.active a span {
	transform: translateX(0px) translateY(0px);
	opacity: 1
}

body.tech.studio .discover:hover {
	height: 200px;
	width: 300px
}

body.tech.studio .discover:hover a {
	color: #bdaab5
}

body.tech.studio .discover:hover svg {
	stroke: #6a565f
}

body.tech.studio .discover>div>a {
	position: absolute;
	right: 80px;
	bottom: 65px
}

body.tech.studio .discover a span {
	position: relative;
	display: inline-block
}

@media (max-width: 1250px) {
	body.tech.studio .discover {
		height: 100px;
		width: 170px
	}
}

@media (max-width: 600px) {
	body.tech.studio .discover {
		height: 70px;
		width: 120px;
		z-index: 2
	}
	body.tech.studio .discover:hover {
		width: 100%;
		height: 90px
	}
}

body.tech.studio .line-aux {
	width: 45px;
	position: fixed;
	opacity: 1;
	height: 100px;
	left: 82px;
	bottom: 110px;
	z-index: 3;
	opacity: 0;
	visibility: hidden
}

@media (max-width: 1250px) {
	body.tech.studio .line-aux {
		left: 50px;
		bottom: 90px
	}
}

@media (max-width: 600px) {
	body.tech.studio .line-aux {
		left: 20px;
		bottom: 73px;
		visibility: hidden !important;
		opacity: 0 !important
	}
}

body.tech.studio .line-aux::after {
	transition: background-color 500ms cubic-bezier(0.47, 0, 0.745, 0.715);
	content: "";
	background-color: #3c2b37;
	width: 2px;
	height: 10px;
	margin-left: -1px;
	left: 50%;
	bottom: -65px;
	position: absolute
}

body.tech.studio .line-aux .line {
	transition: background-color 500ms cubic-bezier(0.47, 0, 0.745, 0.715);
	width: 2px;
	background-color: #3c2b37;
	height: 0;
	margin-left: -1px;
	left: 50%;
	margin-bottom: 10px;
	position: relative
}

@media (max-width: 600px) {
	body.tech.studio .line-aux .line {
		display: none
	}
}

@media (max-height: 500px) {
	body.tech.studio .line-aux .line {
		display: none
	}
}

body.tech.studio .line-aux .counter {
	transition: all 500ms cubic-bezier(0.47, 0, 0.745, 0.715);
	text-transform: uppercase;
	font-family: "Teko", sans-serif;
	font-weight: 500;
	font-size: 18px;
	color: #bdaab5;
	height: 50px;
	width: 100px;
	overflow: hidden;
	text-align: center;
	position: absolute;
	bottom: -50px;
	left: -27px
}

body.tech.studio .line-aux .counter .page {
	transition: color 500ms cubic-bezier(0.47, 0, 0.745, 0.715);
	position: absolute;
	right: 50%;
	margin-right: 7px;
	bottom: 20px;
	margin-bottom: 45px;
	text-align: right
}

body.tech.studio .line-aux .counter .divider {
	transition: color 500ms cubic-bezier(0.47, 0, 0.745, 0.715);
	position: absolute;
	left: 50%;
	color: #ff9273;
	bottom: 12px;
	transform: translateX(-50%);
	margin-bottom: 45px
}

body.tech.studio .line-aux .counter .total {
	transition: color 500ms cubic-bezier(0.47, 0, 0.745, 0.715);
	left: 50%;
	margin-left: 7px;
	position: absolute;
	bottom: 5px;
	margin-bottom: 45px
}

body.tech.studio .scroll-position {
	width: 100%;
	position: absolute;
	bottom: 0;
	height: 2px;
	opacity: 0;
	z-index: 2;
	visibility: hidden
}

body.tech.studio .scroll-position span {
	position: relative;
	display: block;
	width: 50%;
	background-color: #ff9273;
	height: 100%
}

body.tech.studio .line-scroll {
	position: absolute;
	z-index: 2;
	opacity: 0;
	visibility: hidden;
	height: 45px;
	width: 140px;
	left: 500px;
	bottom: 40px;
	overflow: hidden
}

body.tech.studio .line-scroll>span {
	position: absolute;
	content: "";
	background-color: #ff9273;
	width: 50%;
	bottom: 0px;
	top: auto !important;
	height: 2px !important;
	z-index: 1;
	animation-name: example;
	animation-duration: 4s;
	animation-iteration-count: infinite
}

body.tech.studio .line-scroll::after {
	content: "->";
	position: absolute;
	color: #ff9273;
	margin-left: 15px
}

@media (max-width: 1250px) {
	body.tech.studio .line-scroll {
		left: 480px;
		bottom: 20px
	}
}

@media (max-width: 600px) {
	body.tech.studio .line-scroll {
		left: 20px;
		bottom: 20px;
		height: 35px
	}
}

body.tech.studio .fireworks-plane {
	width: 600px;
	height: 600px;
	left: 340px;
	position: absolute;
	opacity: 0;
	top: 50%;
	transform: translateX(-50%) translateY(-50%) rotateY(180deg);
	perspective: 500px;
	z-index: 1
}

@media (max-width: 1250px) {
	body.tech.studio .fireworks-plane {
		transform: translateX(-50%) translateY(-50%) rotateY(180deg) scale(0.6)
	}
}

@media (max-width: 600px) {
	body.tech.studio .fireworks-plane {
		transform: translateX(-50%) translateY(-50%) rotateY(180deg) scale(0.4);
		left: 50%
	}
}

body.tech.studio .firework-1 {
	position: absolute;
	top: 280px;
	left: 50px;
	overflow: visible;
	stroke: #ff9273;
	stroke-width: 10px;
	stroke-dashoffset: -358;
	transform: rotateX(40deg);
	stroke-dasharray: 0, 10000;
	stroke-linecap: round
}

body.tech.studio .firework-1:nth-of-type(2) {
	top: 230px;
	transform: rotateZ(20deg) rotateX(40deg)
}

body.tech.studio .firework-2>span {
	height: 100px;
	width: 4px;
	position: absolute;
	left: 190px;
	transform-origin: bottom;
	top: 145px
}

body.tech.studio .firework-2>span span {
	content: "";
	height: 0;
	background-color: #ff9273;
	bottom: 0;
	width: 100%;
	position: absolute;
	border-radius: 2px
}

body.tech.studio .firework-2>span:nth-of-type(1) {
	transform: rotate(60deg)
}

body.tech.studio .firework-2>span:nth-of-type(2) {
	transform: rotate(120deg)
}

body.tech.studio .firework-2>span:nth-of-type(3) {
	transform: rotate(180deg)
}

body.tech.studio .firework-2>span:nth-of-type(4) {
	transform: rotate(240deg)
}

body.tech.studio .firework-2>span:nth-of-type(5) {
	transform: rotate(300deg)
}

body.tech.studio .firework-2>span:nth-of-type(6) {
	transform: rotate(360deg)
}

body.tech.studio .models {
	height: 100%;
	width: 100%;
	position: absolute;
	overflow: hidden;
	left: 0;
	top: 0;
	z-index: 1
}

body.tech.studio .models .project-link>* {
	position: absolute
}

body.tech.studio .models .project-link {
	position: absolute;
	height: 100%;
	opacity: 0;
	visibility: hidden;
	width: 100%;
	transform: perspective(1400px)
}

body.tech.studio .models .project-link.tech span {
	color: #5bf46d
}

body.tech.studio .models .project-link.tech span {
	color: #ff9273
}

body.tech.studio .models .project-link.non-tech span {
	color: #a07f5e
}

body.tech.studio .models .project-link.simon-cuchillerias span {
	color: #f7ce3c
}

body.tech.studio .models .project-link.guild-storm span {
	color: #f76565
}

@media (max-width: 600px) {
	body.tech.studio .models .project-link {
		transform: scale(0.5)
	}
}

body.tech.studio .models canvas {
	top: 0;
	z-index: 1
}

body.tech.studio .models .frame {
	stroke: rgba(106, 86, 95, 0.03);
	stroke-width: 85px;
	height: 600px;
	width: 600px;
	margin: 0;
	padding: 25px;
	border-radius: 50%
}

body.tech.studio .models h2 {
	top: 50%;
	left: 400px;
	opacity: 0;
	margin-top: -62px;
	font-size: 24px;
	font-weight: 400;
	white-space: nowrap;
	height: 24px
}

body.tech.studio .models small {
	top: 50%;
	left: 400px;
	margin-top: 25px;
	opacity: 0;
	text-transform: uppercase;
	white-space: nowrap
}

body.tech.studio .models span {
	top: 50%;
	font-family: "Teko", sans-serif;
	font-size: 18px;
	position: absolute;
	height: 0;
	overflow: hidden;
	margin-top: -45px;
	left: 400px
}

body.tech.studio .projects {
	position: absolute;
	width: 100%;
	height: 100%;
	z-index: 1
}

body.tech.studio .project-content {
	position: relative;
	z-index: 1
}

body.tech.studio .project-content .studio-wrap {
	height: 100%
}

body.tech.studio .project-content .studio-wrap .scene {
	height: 100%;
	width: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	position: absolute;
	transform: translateX(100%);
	top: 50%
}

body.tech.studio .project-content .studio-wrap .scene .image {
	padding: 40px;
	display: flex;
	align-items: center;
	align-self: stretch;
	justify-content: center
}

body.tech.studio .project-content .studio-wrap .scene .video {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 40px;
	position: relative
}

body.tech.studio .project-content .studio-wrap .scene .video .video-wrap {
	position: absolute;
	width: 100%;
	height: 100%;
	padding: 40px;
	pointer-events: none;
	z-index: 1
}

@media (max-width: 600px) {
	body.tech.studio .project-content .studio-wrap .scene .video::before {
		content: "";
		position: absolute;
		width: 30%;
		padding-top: 30%;
		border-radius: 50%;
		border: 2px solid #ff9273
	}
	body.tech.studio .project-content .studio-wrap .scene .video::after {
		content: "";
		position: absolute;
		left: 50%;
		margin-left: -15px;
		border-left: 33px solid #bdaab5;
		border-top: 20px solid transparent;
		border-right: 20px solid transparent;
		border-bottom: 20px solid transparent
	}
}

body.tech.studio .project-content .studio-wrap .scene img {
	max-height: 100%;
	max-width: 100%
}

body.tech.studio .project-content .studio-wrap .scene .fractured {
	padding: 0
}

body.tech.studio .project-content .studio-wrap .scene h2 {
	font-weight: 500;
	display: block;
	font-family: "Teko", sans-serif;
	text-transform: uppercase;
	font-size: 40px;
	line-height: 40px;
	margin-top: 10px;
	margin-bottom: 40px
}

body.tech.studio .project-content .studio-wrap .scene h2 span {
	display: inline-block
}

body.tech.studio .project-content .studio-wrap .scene .text-title {
	color: #ff9273
}

body.tech.studio .project-content .studio-wrap .scene .text-title small {
	color: #6a565f;
	text-transform: uppercase;
	font-weight: bold
}

body.tech.studio .project-content .studio-wrap .scene .text-content {
	line-height: 36px;
	color: #bdaab5;
	font-size: 14px
}

@media (max-width: 600px) {
	body.tech.studio .project-content .studio-wrap .scene .text-content {
		line-height: 24px;
		font-size: 14px
	}
}

@media (max-height: 500px) {
	body.tech.studio .project-content .studio-wrap .scene .text-content {
		line-height: 24px
	}
}

body.tech.studio .project-content .studio-wrap .scene.split {
	flex-direction: row;
	align-items: stretch;
	padding: 40px
}

body.tech.studio .project-content .studio-wrap .scene.split>div {
	position: relative;
	padding: 20px 10%;
	display: flex;
	flex: 0 0 50%;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	overflow: hidden
}

@media (max-width: 600px) {
	body.tech.studio .project-content .studio-wrap .scene.split h2 {
		font-size: 28px;
		line-height: 28px;
		margin: 0 0 10px
	}
}

@media (max-height: 500px) {
	body.tech.studio .project-content .studio-wrap .scene.split h2 {
		font-size: 28px;
		line-height: 28px;
		margin: 0 0 10px
	}
}

body.tech.studio .project-content .studio-wrap .scene.split.variant {
	position: relative;
	overflow: hidden
}

body.tech.studio .project-content .studio-wrap .scene.split.variant .split-right {
	align-items: stretch;
	padding: 20px 0;
	flex-wrap: nowrap;
	overflow: visible
}

body.tech.studio .project-content .studio-wrap .scene.split.variant .split-right>div {
	position: absolute;
	top: 40px;
	bottom: 40px
}

body.tech.studio .project-content .studio-wrap .scene.split.variant .split-right>div img {
	max-width: none;
	max-height: 100%
}

@media (max-width: 1250px) {
	body.tech.studio .project-content .studio-wrap .scene.split {
		padding: 20px
	}
	body.tech.studio .project-content .studio-wrap .scene.split>div {
		padding: 20px
	}
}

@media (max-width: 600px) {
	body.tech.studio .project-content .studio-wrap .scene.split {
		flex-direction: column;
		padding: 0
	}
	body.tech.studio .project-content .studio-wrap .scene.split>div {
		padding: 20px;
		flex: auto
	}
	body.tech.studio .project-content .studio-wrap .scene.split.variant .split-right {
		padding: 0 20px
	}
	body.tech.studio .project-content .studio-wrap .scene.split.variant .split-right>div {
		left: 20px;
		right: 20px;
		top: 0;
		bottom: 0
	}
	body.tech.studio .project-content .studio-wrap .scene.split.variant .split-right>div img {
		max-width: 100%;
		max-height: none
	}
}

@media (max-height: 500px) {
	body.tech.studio .project-content .studio-wrap .scene.split {
		flex-direction: column;
		padding: 0
	}
	body.tech.studio .project-content .studio-wrap .scene.split>div {
		padding: 20px;
		flex: auto
	}
	body.tech.studio .project-content .studio-wrap .scene.split.variant .split-right {
		padding: 0 20px
	}
	body.tech.studio .project-content .studio-wrap .scene.split.variant .split-right>div {
		left: 20px;
		right: 20px;
		top: 0;
		bottom: 0
	}
	body.tech.studio .project-content .studio-wrap .scene.split.variant .split-right>div img {
		max-width: 100%;
		max-height: none
	}
}

body.tech.studio .project-content .studio-wrap .intro {
	align-items: flex-start;
	padding-left: 550px;
	width: calc(100% - 500px);
	padding-right: 20px
}

body.tech.studio .project-content .studio-wrap .intro h1 {
	font-family: "Teko", sans-serif;
	font-weight: 500;
	font-size: 72px;
	line-height: 54px;
	text-transform: uppercase;
	padding-right: 100px;
	margin: 20px 0
}

body.tech.studio .project-content .studio-wrap .intro h1>span {
	display: block
}

body.tech.studio .project-content .studio-wrap .intro h1>span span {
	display: inline-block
}

body.tech.studio .project-content .studio-wrap .intro h1 small {
	color: #ff9273;
	display: block;
	margin-left: -52px;
	text-align: right;
	font-size: 46px;
	font-weight: 400;
	line-height: 46px;
	width: 50px;
	margin-bottom: -46px;
	height: 46px
}

@media (max-width: 1250px) {
	body.tech.studio .project-content .studio-wrap .intro {
		bottom: 20px;
		padding: 20px 0;
		max-width: 640px;
		width: 100%;
		align-items: stretch;
		justify-content: flex-end
	}
	body.tech.studio .project-content .studio-wrap .intro>div {
		height: auto;
		padding: 0 20px 80px;
		text-align: center
	}
	body.tech.studio .project-content .studio-wrap .intro h1 {
		display: inline-block;
		width: auto;
		font-size: 48px;
		text-align: center
	}
	body.tech.studio .project-content .studio-wrap .intro h1>span {
		display: inline-block
	}
	body.tech.studio .project-content .studio-wrap .intro h1 small {
		font-size: 18px;
		line-height: 36px
	}
}

@media (max-width: 600px) {
	body.tech.studio .project-content .studio-wrap .intro>div {
		padding-bottom: 100px
	}
	body.tech.studio .project-content .studio-wrap .intro>div h1 small {
		display: none
	}
}

@media (max-width: 1400px) {
	body.tech.studio .project-content .studio-wrap .intro h1.fractured {
		font-size: 48px;
		line-height: 48px;
		padding-right: 20px
	}
	body.tech.studio .project-content .studio-wrap .intro h1.fractured small {
		font-size: 24px;
		line-height: 32px
	}
}

@media (max-height: 500px) {
	body.tech.studio .project-content .studio-wrap .intro>div {
		height: auto;
		padding: 0 20px 80px
	}
	body.tech.studio .project-content .studio-wrap .intro h1 {
		font-size: 48px;
		line-height: 48px;
		margin-bottom: 0
	}
}

body.tech.studio .project-content .studio-next {
	width: 600px;
	max-width: 100%;
	position: absolute;
	border-bottom: 1px solid #3c2b37;
	border-top: 1px solid #3c2b37;
	top: 50%;
	margin-top: -50px;
	left: 100%;
	z-index: 1;
	padding-left: 40px;
	overflow: hidden
}

body.tech.studio .project-content .studio-next small {
	font-weight: bold;
	font-size: 11px;
	text-transform: uppercase;
	margin-bottom: -20px;
	margin-top: 10px;
	margin-left: 2px;
	display: block;
	color: #ff9273
}

body.tech.studio .project-content .studio-next h4 {
	font-family: "Teko", sans-serif;
	text-transform: uppercase;
	font-size: 60px;
	font-weight: 500;
	margin: 30px 0
}

body.tech.studio .project-content .studio-next .button {
	transition: all 500ms cubic-bezier(0.47, 0, 0.745, 0.715);
	width: 40px;
	height: 40px;
	position: absolute;
	right: 30px;
	border: 1px solid #3c2b37;
	top: 50%;
	transform: translateY(-50%)
}

body.tech.studio .project-content .studio-next .button::after {
	content: "";
	border-left: solid 3px #bdaab5;
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translateX(-50%) translateY(-50%);
	border-right: solid 3px transparent;
	border-top: solid 3px transparent;
	border-bottom: solid 3px transparent;
	height: 6px;
	width: 6px;
	display: block
}

body.tech.studio .project-content .studio-next .progress {
	background-color: #ff9273;
	width: 0%;
	height: 1px;
	position: absolute;
	bottom: 0;
	left: 100%
}

body.tech.studio .project-content .studio-next.complete .button {
	border: 1px solid #ff9273
}

@media (max-width: 600px) {
	body.tech.studio .project-content .studio-next small {
		margin-bottom: -18px
	}
	body.tech.studio .project-content .studio-next h4 {
		font-size: 40px;
		margin: 20px 0
	}
}

body.tech.studio .project-details {
	list-style: none;
	display: flex;
	padding: 0;
	padding-left: 2px;
	margin: 0
}

body.tech.studio .project-details li {
	opacity: 1;
	margin-bottom: 10px;
	position: relative;
	margin-right: 20px;
	font-family: "Teko", sans-serif;
	text-transform: uppercase;
	font-size: 18px;
	color: #bdaab5
}

body.tech.studio .project-details li:last-of-type {
	margin-right: 0
}

body.tech.studio .project-details small {
	color: #ff9273;
	font-family: "Rubik", sans-serif;
	font-size: 10px;
	font-weight: 600;
	margin-bottom: -2px;
	display: block
}

@media (max-width: 1250px) {
	body.tech.studio .project-details {
		text-align: center;
		justify-content: center
	}
}

body.tech.studio .circles {
	position: absolute;
	z-index: 1;
	width: 100%;
	height: 100%
}

body.tech.studio .circles .circle-trail {
	stroke: #bdaab5;
	position: absolute;
	height: 550px;
	width: 550px;
	overflow: visible;
	border-radius: 50%;
	stroke-linecap: round;
	stroke-width: 1px;
	opacity: 0;
	stroke-dasharray: 0.2, 10.268;
	left: 50%;
	top: 50%;
	transform: translateY(-50%) translateX(-50%)
}

@media (max-width: 600px) {
	body.tech.studio .circles .circle-trail {
		height: 280px;
		width: 280px
	}
}

body.tech.studio .circles .circle-progress {
	stroke: #ff9273;
	position: absolute;
	height: 550px;
	width: 550px;
	border-radius: 50%;
	overflow: visible;
	transform-origin: center;
	stroke-width: 1.5px;
	stroke-linecap: round;
	stroke-dasharray: 629;
	stroke-dashoffset: 629;
	left: 50%;
	opacity: 0;
	top: 50%;
	transform: translateY(-50%) translateX(-50%) rotate(270deg)
}

@media (max-width: 600px) {
	body.tech.studio .circles .circle-progress {
		height: 280px;
		width: 280px
	}
}

body.tech.studio .circles .circle-progress-bullets {
	height: 550px;
	width: 550px;
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translateY(-50%) translateX(-50%)
}

@media (max-width: 600px) {
	body.tech.studio .circles .circle-progress-bullets {
		height: 280px;
		width: 280px
	}
}

body.tech.studio .circles .circle-progress-bullets .bullet {
	width: 12px;
	height: 100%;
	display: block;
	position: absolute;
	left: 50%;
	margin-left: -6px
}

body.tech.studio .circles .circle-progress-bullets .bullet span {
	transition: border 500ms cubic-bezier(0.47, 0, 0.745, 0.715);
	border: 3px solid #ff9273;
	background-color: #271c24;
	content: "";
	height: 12px;
	opacity: 0;
	width: 12px;
	display: block;
	border-radius: 50%;
	margin-top: -6px;
	transform: scale(0)
}

body.tech.studio .circles .circle-progress-bullets .bullet-project {
	position: absolute;
	height: 100%;
	width: 20px;
	left: 50%;
	margin-left: -10px
}

body.tech.studio .circles .circle-progress-bullets .bullet-project span {
	transition: background-color 500ms cubic-bezier(0.47, 0, 0.745, 0.715);
	border: 2px solid #3c2b37;
	background-color: #271c24;
	height: 20px;
	width: 20px;
	display: block;
	border-radius: 50%;
	margin-top: -10px;
	transform: scale(0)
}

body.tech.studio .layout {
	position: absolute;
	width: 100%;
	height: 100%
}

body.tech.studio .layout .gameboy {
	position: absolute;
	z-index: 100000;
	top: 20px;
	left: 50%
}

body.tech.studio .transition {
	position: absolute;
	height: 100%;
	width: 100%;
	overflow: hidden;
	background-color: #f3f2ef;
	opacity: 0;
	visibility: hidden
}

body.tech.studio .project {
	left: 50%;
	position: absolute;
	top: 50%;
	width: 50%;
	opacity: 0;
	visibility: hidden;
	padding-left: 120px;
	transform: translateY(-50%)
}

body.tech.studio .project h1 {
	color: #bdaab5;
	font-family: "Teko", sans-serif;
	font-size: 72px;
	line-height: 60px;
	font-weight: 400;
	margin: 0 0 30px;
	white-space: nowrap;
	perspective: 400px;
	text-transform: uppercase
}

body.tech.studio .project h1>span {
	display: block
}

body.tech.studio .project h1>span span {
	display: inline-block;
	position: relative;
	transform-origin: top left
}

@media (max-width: 1250px) {
	body.tech.studio .project {
		left: 0;
		width: 100%;
		top: auto;
		bottom: 0;
		padding: 0 20px 100px;
		transform: none
	}
	body.tech.studio .project h1 {
		font-size: 72px;
		text-align: center
	}
	body.tech.studio .project h1 div {
		display: inline-block
	}
}

@media (max-width: 600px) {
	body.tech.studio .project {
		top: auto;
		bottom: 0;
		padding: 0 20px 100px
	}
	body.tech.studio .project h1 {
		font-size: 48px;
		line-height: 48px;
		margin-bottom: 0
	}
}

@media (max-height: 500px) {
	body.tech.studio .project {
		padding-left: 150px;
		padding-right: 150px;
		padding-bottom: 0;
		bottom: 50%;
		transform: translateY(50%)
	}
	body.tech.studio .project h1 {
		text-align: center;
		display: flex;
		justify-content: center;
		font-size: 36px;
		line-height: 36px;
		margin-bottom: 20px
	}
	body.tech.studio .project h1>span {
		display: inline-block;
		margin-right: 7px
	}
	body.tech.studio .project h1>span:last-of-type {
		margin-right: 0
	}
}

@media (max-width: 600px) {
	body.tech.studio.studio .line-aux,
	body.tech.studio.about .line-aux {
		opacity: 0 !important;
		visibility: hidden !important
	}
}

@media (max-width: 1250px) {
	body.tech.studio.about .line {
		opacity: 0
	}
}

@media (max-width: 600px) {
	body.tech.studio.menu .project-link {
		transform: scale(0.8)
	}
}

body.non-tech {
	transition: all 500ms cubic-bezier(0.47, 0, 0.745, 0.715);
	background: #1d1f21;
	color: #668aaf;
	margin: 0;
	overflow: hidden;
	font-family: "Rubik", sans-serif;
	font-size: 14px;
	line-height: 20px
}

body.non-tech a {
	transition: color 300ms cubic-bezier(0.47, 0, 0.745, 0.715);
	color: #e4e2ca;
	text-decoration: none;
	display: inline-block
}

body.non-tech a.fractured>span {
	display: inline-block
}

body.non-tech a.fractured>span span {
	display: inline-block;
	font-family: "Rubik", sans-serif;
	line-height: 20px;
	text-transform: none
}

body.non-tech a:hover {
	color: #dcc0a6
}

body.non-tech .gradient {
	position: absolute;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
	opacity: 0.8
}

body.non-tech .gradient stop {
	transition: all 500ms cubic-bezier(0.47, 0, 0.745, 0.715);
	stop-color: #2f1e2a
}

body.non-tech .gradient stop:last-of-type {
	stop-color: #1f2a42
}

body.non-tech .circle-transition {
	position: absolute;
	height: 0;
	width: 0;
	border-radius: 50%;
	transform: translateX(-50%) translateY(-50%);
	left: 50%;
	top: 50%
}

body.non-tech .logo {
	width: 250px;
	position: fixed;
	opacity: 1;
	z-index: 2;
	left: 80px;
	top: 60px;
	color: #e4e2ca;
	cursor: pointer
}

body.non-tech .logo.revert {
	color: #d49d81
}

body.non-tech .logo.revert svg {
	fill: #d49d81
}

@media (max-width: 1250px) {
	body.non-tech .logo {
		left: 50px;
		top: 40px
	}
}

@media (max-width: 600px) {
	body.non-tech .logo {
		left: 20px;
		top: 20px
	}
}

body.non-tech .logo h2 {
	transition: color 500ms cubic-bezier(0.47, 0, 0.745, 0.715);
	font-size: 18px;
	font-weight: 400;
	line-height: normal;
	margin: 8px 0 0;
	display: block
}

body.non-tech .logo h3 {
	transition: color 500ms cubic-bezier(0.47, 0, 0.745, 0.715);
	font-size: 11px;
	text-transform: uppercase;
	font-weight: 700;
	margin: 0;
	letter-spacing: 0.45px;
	display: none
}

body.non-tech .logo svg {
	transition: all 500ms cubic-bezier(0.47, 0, 0.745, 0.715);
	fill: #e4e2ca;
	float: left;
	margin-right: 15px
}

@media (max-width: 600px) {
	body.non-tech .logo h2,
	body.non-tech .logo h3 {
		display: none
	}
}

@media (max-height: 500px) {
	body.non-tech .logo h2,
	body.non-tech .logo h3 {
		display: none
	}
}

body.non-tech .mobile-menu {
	transition: fill 500ms cubic-bezier(0.47, 0, 0.745, 0.715);
	position: absolute;
	bottom: 33px;
	fill: #e4e2ca;
	left: 20px;
	z-index: 2;
	cursor: pointer;
	opacity: 0;
	visibility: hidden;
	display: none
}

@media (max-width: 600px) {
	body.non-tech .mobile-menu {
		display: block
	}
}

body.non-tech .menu-top {
	position: fixed;
	right: 80px;
	z-index: 10;
	top: 70px
}

@media (max-width: 1250px) {
	body.non-tech .menu-top {
		right: 50px;
		top: 50px
	}
}

@media (max-width: 600px) {
	body.non-tech .menu-top {
		right: 20px;
		top: 30px
	}
}

body.non-tech .menu-top a {
	padding: 20px;
	padding-right: 0;
	margin-top: -20px;
	opacity: 0;
	visibility: hidden;
	transform: translateY(-10px)
}

body.non-tech .menu-top a span {
	display: inline-block
}

body.non-tech .mouse-track {
	pointer-events: none;
	position: absolute;
	z-index: 1000;
	opacity: 0
}

body.non-tech .mouse-track .outer-circle {
	stroke: #e4e2ca;
	transform: translateX(-50%) translateY(-50%) rotate(-90deg);
	stroke-width: 2px;
	fill: none;
	height: 18px;
	width: 18px;
	overflow: visible;
	position: absolute
}

body.non-tech .mouse-track .outer-circle .countdown {
	opacity: 0;
	stroke: #d49d81;
	position: absolute;
	stroke-dashoffset: 125px;
	stroke-dasharray: 125px;
	stroke-width: 4px
}

body.non-tech .mouse-track .inner-circle {
	stroke: #e4e2ca;
	transform: translateX(-50%) translateY(-50%);
	stroke-width: 2px;
	fill: none;
	height: 2px;
	width: 2px;
	opacity: 0.6;
	overflow: visible;
	position: absolute
}

body.non-tech .mouse-track .arrow-right {
	stroke: #d49d81;
	opacity: 0;
	visibility: hidden;
	stroke-width: 2px;
	transform: rotate(180deg);
	margin-left: 10px;
	margin-top: -7px;
	position: absolute
}

body.non-tech .mouse-track .arrow-left {
	stroke: #d49d81;
	opacity: 0;
	margin-left: -20px;
	margin-top: -6px;
	visibility: hidden;
	stroke-width: 2px;
	position: absolute
}

body.non-tech .mouse-track .play {
	fill: #e4e2ca;
	opacity: 1;
	margin-top: -6px;
	stroke-width: 2px;
	margin-top: -18px;
	margin-left: -14px;
	transform: scale(0);
	position: absolute
}

body.non-tech .mouse-track .stop {
	fill: #e4e2ca;
	height: 38px;
	width: 38px;
	margin-left: -19px;
	margin-top: -19px;
	transform: scale(0);
	position: absolute
}

@media (max-width: 600px) {
	body.non-tech .mouse-track {
		opacity: 0 !important;
		visibility: hidden !important
	}
}

body.non-tech .about-page {
	position: absolute;
	height: 100%;
	width: 100%;
	padding: 40px;
	left: 0;
	opacity: 1;
	top: 0;
	display: flex;
	flex-direction: row;
	visibility: hidden;
	align-items: stretch
}

@media (max-width: 1250px) {
	body.non-tech .about-page {
		padding: 20px
	}
}

@media (max-width: 600px) {
	body.non-tech .about-page {
		flex-direction: column;
		padding: 0
	}
}

body.non-tech .about-page.active .neon-sign {
	animation: flicker 10s infinite
}

body.non-tech .about-page.active .split-left::before {
	width: 100%;
	bottom: 0
}

body.non-tech .about-page.active .split-left.shaded::after {
	opacity: 1
}

body.non-tech .about-page .split-left {
	opacity: 0;
	visibility: hidden;
	overflow: hidden
}

body.non-tech .about-page .split-left.shaded::after {
	content: "Swipe or Scroll and click image to know more";
	padding-right: 20px;
	line-height: 100px;
	color: #4b546d;
	text-align: right;
	position: absolute;
	bottom: 0;
	width: 100%;
	opacity: 0;
	transition: all 500ms cubic-bezier(0.47, 0, 0.745, 0.715);
	transition-delay: 1;
	height: 100px;
	background-color: red;
	background: linear-gradient(transparent, #14141a 50%);
	pointer-events: none
}

body.non-tech .about-page .split-left::before {
	transition: all 500ms cubic-bezier(0.47, 0, 0.745, 0.715);
	content: "";
	position: absolute;
	width: 0%;
	height: 100%;
	left: 0;
	background-color: #14141a;
	z-index: -1;
	bottom: 0
}

body.non-tech .about-page>* {
	position: relative;
	z-index: 1;
	flex: 0 0 50%;
	display: flex;
	align-items: center
}

body.non-tech .about-page .gradient-about {
	background-color: red;
	position: absolute;
	width: 100%;
	height: 100%;
	z-index: 1;
	top: 0;
	left: 0;
	-webkit-mask-image: url("../smoke-sprite.png");
	-webkit-mask-size: 3000% 100%;
	-webkit-mask-position-x: 0%;
	animation-iteration-count: 1;
	animation-delay: 1s
}

body.non-tech .about-page .gradient-about.active {
	animation: mask 1.5s steps(29) forwards
}

body.non-tech .about-page .gradient-about stop {
	transition: all 500ms cubic-bezier(0.47, 0, 0.745, 0.715);
	stop-color: #292038
}

body.non-tech .about-page .gradient-about stop:last-of-type {
	stop-color: #18181d
}

@media (max-width: 600px) {
	body.non-tech .about-page .gradient-about stop {
		transition: all 500ms cubic-bezier(0.47, 0, 0.745, 0.715);
		stop-color: #18181d
	}
	body.non-tech .about-page .gradient-about stop:last-of-type {
		stop-color: #18181d
	}
}

body.non-tech .about-page .about-text {
	position: absolute;
	padding: 120px;
	padding-right: 240px
}

body.non-tech .about-page .about-text h1 {
	color: #d49d81;
	white-space: nowrap;
	font-weight: 500;
	display: block;
	font-family: "Teko", sans-serif;
	text-transform: uppercase;
	font-size: 40px;
	line-height: 40px;
	margin-top: 10px;
	margin-bottom: 40px
}

@media (max-width: 600px) {
	body.non-tech .about-page .about-text h1 {
		font-size: 28px;
		line-height: 28px;
		margin: 0 0 20px
	}
}

body.non-tech .about-page .about-text h1>span {
	display: block
}

body.non-tech .about-page .about-text h1>span span {
	display: inline-block
}

body.non-tech .about-page .about-text p {
	opacity: 0;
	font-size: 16px;
	line-height: 32px
}

@media (max-width: 600px) {
	body.non-tech .about-page .about-text p {
		line-height: 24px
	}
}

@media (max-width: 1250px) {
	body.non-tech .about-page .about-text {
		padding-left: 40px;
		padding-right: 40px
	}
}

@media (max-width: 600px) {
	body.non-tech .about-page .about-text {
		padding-left: 20px;
		padding-right: 20px
	}
}

body.non-tech .about-page .about-render {
	position: absolute;
	visibility: hidden;
	top: 0%;
	opacity: 0;
	right: 0;
	width: 140%;
	height: 100%;
	transform: translateY(0) scale(1);
	z-index: 1;
	pointer-events: none
}

@media (max-width: 1250px) {
	body.non-tech .about-page .about-render {
		width: 100%
	}
}

@media (max-width: 600px) {
	body.non-tech .about-page .about-render {
		width: 100%
	}
}

body.non-tech .about-page .about-render canvas {
	position: absolute;
	transform: translateY(-50%);
	top: 50%
}

body.non-tech .about-page .neon-sign {
	opacity: 0;
	height: 570px;
	width: 140%;
	position: absolute;
	text-transform: uppercase;
	font-size: 46px;
	color: #ff0054;
	right: 260px;
	top: -30px;
	transform: scale(0.5) perspective(900px) translateZ(-300px) rotateY(-10deg) rotateX(0deg) rotateZ(0deg) skewY(9deg);
	filter: blur(2px) brightness(2)
}

body.non-tech .about-page .neon-sign::before {
	content: "";
	width: 410px;
	height: 100%;
	position: absolute;
	left: 100%
}

@media (max-width: 1250px) {
	body.non-tech .about-page .neon-sign {
		display: none
	}
}

@media (max-width: 600px) {
	body.non-tech .about-page .neon-sign {
		display: none
	}
}

body.non-tech .about-page .neon-sign::after {
	content: "";
	border: 6px solid #ff0054;
	width: 210px;
	height: 100%;
	position: absolute;
	right: 0
}

body.non-tech .about-page .neon-sign.var-1 {
	transform: scale(0.7) perspective(900px) rotateY(-8deg) rotateX(0deg) rotateZ(0deg) skewY(9deg) translateX(150px)
}

body.non-tech .about-page .neon-sign.var-2 {
	transform: scale(0.7) perspective(900px) rotateY(-6deg) rotateX(0deg) rotateZ(0deg) skewY(6deg) translateY(6px) translateX(140px)
}

body.non-tech .about-page .neon-sign>* {
	position: absolute
}

body.non-tech .about-page .neon-sign .code {
	top: 40px;
	right: 42px;
	animation: flicker 5s infinite
}

body.non-tech .about-page .neon-sign .and {
	top: 94px;
	color: #00e4ff;
	font-size: 80px;
	right: 70px
}

body.non-tech .about-page .neon-sign .design {
	top: 145px;
	right: 19px
}

body.non-tech .about-page .neon-sign .key {
	animation: fade 2s steps(1) infinite;
	animation-direction: reverse;
	bottom: 45px;
	right: 53px
}

body.non-tech .about-page .neon-sign .key-pressed {
	animation: fade 2s steps(1) infinite;
	animation-direction: normal;
	bottom: 40px;
	right: 19px
}

body.non-tech .about-page .neon-sign .hand {
	animation: hand 2s steps(1) infinite;
	right: 30px;
	bottom: 100px
}

body.non-tech .about-page .neon-sign .key-base {
	bottom: 20px;
	right: 45px
}

body.non-tech .introduction {
	position: absolute;
	background-color: #2f1e2a;
	height: 100%;
	width: 100%;
	top: 0;
	left: 0;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center
}

body.non-tech .introduction .skip {
	padding: 30px;
	position: absolute;
	bottom: 50px;
	font-size: 16px;
	color: #668aaf;
	cursor: pointer
}

body.non-tech .intro-text {
	transition: color 500ms cubic-bezier(0.47, 0, 0.745, 0.715);
	position: absolute;
	bottom: 50%;
	z-index: 1;
	width: 100%;
	padding: 0 10px;
	text-align: center;
	font-size: 24px;
	color: #e4e2ca
}

body.non-tech .intro-text.tutorial {
	font-size: 16px;
	bottom: 70px
}

body.non-tech .intro-text span {
	display: inline-block
}

@media (max-width: 1250px) {
	body.non-tech .intro-text.tutorial {
		bottom: 40px
	}
}

@media (max-width: 600px) {
	body.non-tech .intro-text {
		font-size: 16px
	}
	body.non-tech .intro-text.tutorial {
		bottom: auto;
		top: 140px
	}
}

body.non-tech .discover {
	opacity: 0;
	visibility: hidden;
	color: #d49d81;
	position: absolute;
	bottom: 0;
	right: 0;
	height: 160px;
	width: 240px;
	z-index: 100;
	cursor: pointer
}

body.non-tech .discover .open>span {
	position: absolute;
	height: 14px;
	width: 7px;
	bottom: 65px;
	right: 80px;
	transform: translateX(-80px)
}

body.non-tech .discover .open>span::before {
	transition: all 300ms cubic-bezier(0.47, 0, 0.745, 0.715);
	transition-property: background-color, transform, opacity;
	transition-delay: 0s, 0.8s, 0.8s;
	content: "";
	position: absolute;
	border-radius: 10px 10px 20px 0;
	height: 8px;
	transform-origin: top left;
	width: 1.5px;
	background-color: #d49d81;
	transform: rotate(-45deg) scaleY(4);
	opacity: 0
}

body.non-tech .discover .open>span::after {
	transition: all 300ms cubic-bezier(0.47, 0, 0.745, 0.715);
	transition-property: background-color, transform, opacity;
	transition-delay: 0s, 1.1s, 1.1s;
	content: "";
	position: absolute;
	border-radius: 0 20px 10px 10px;
	height: 8px;
	transform-origin: bottom left;
	margin-top: 1px;
	width: 1.5px;
	background-color: #d49d81;
	transform: rotate(45deg) scaleY(4);
	opacity: 0
}

body.non-tech .discover .open.active>span::before {
	transform: rotate(-45deg) scaleY(1);
	opacity: 1;
	transition-delay: 0
}

body.non-tech .discover .open.active>span::after {
	transform: rotate(45deg) scaleY(1);
	opacity: 1;
	transition-delay: 0
}

body.non-tech .discover .close>span {
	position: absolute;
	height: 17px;
	width: 7px;
	bottom: 65px;
	right: 80px;
	transform: translateX(-57px)
}

body.non-tech .discover .close>span::before {
	transition: all 300ms cubic-bezier(0.47, 0, 0.745, 0.715);
	transition-delay: 1.1s;
	content: "";
	position: absolute;
	border-radius: 5px;
	height: 15px;
	width: 2px;
	margin-left: -5px;
	margin-top: 1px;
	background-color: #d49d81;
	transform-origin: top;
	transform: rotate(-45deg) scaleY(0)
}

body.non-tech .discover .close>span::after {
	transition: all 300ms cubic-bezier(0.47, 0, 0.745, 0.715);
	transition-delay: 0.8s;
	content: "";
	position: absolute;
	border-radius: 5px;
	height: 15px;
	width: 2px;
	background-color: #d49d81;
	transform-origin: bottom;
	margin-left: -5px;
	margin-top: -3px;
	transform: rotate(45deg) scaleY(0)
}

body.non-tech .discover .close.active>span::before {
	transform: rotate(-45deg) scaleY(1);
	transition-delay: 0
}

body.non-tech .discover .close.active>span::after {
	transform: rotate(45deg) scaleY(1);
	transition-delay: 0
}

body.non-tech .discover .open,
body.non-tech .discover .close {
	transition: all 300ms cubic-bezier(0.47, 0, 0.745, 0.715);
	height: 100%;
	position: absolute;
	width: 100%;
	left: 0;
	top: 0;
	opacity: 0
}

body.non-tech .discover .open.active,
body.non-tech .discover .close.active {
	opacity: 1
}

body.non-tech .discover .open a span,
body.non-tech .discover .close a span {
	transform: translateX(5px) translateY(5px);
	opacity: 0
}

body.non-tech .discover .open.active a span,
body.non-tech .discover .close.active a span {
	transform: translateX(0px) translateY(0px);
	opacity: 1
}

body.non-tech .discover:hover {
	height: 200px;
	width: 300px
}

body.non-tech .discover:hover a {
	color: #e4e2ca
}

body.non-tech .discover:hover svg {
	stroke: #668aaf
}

body.non-tech .discover>div>a {
	position: absolute;
	right: 80px;
	bottom: 65px
}

body.non-tech .discover a span {
	position: relative;
	display: inline-block
}

@media (max-width: 1250px) {
	body.non-tech .discover {
		height: 100px;
		width: 170px
	}
}

@media (max-width: 600px) {
	body.non-tech .discover {
		height: 70px;
		width: 120px;
		z-index: 2
	}
	body.non-tech .discover:hover {
		width: 100%;
		height: 90px
	}
}

body.non-tech .line-aux {
	width: 45px;
	position: fixed;
	opacity: 1;
	height: 100px;
	left: 82px;
	bottom: 110px;
	z-index: 3;
	opacity: 0;
	visibility: hidden
}

@media (max-width: 1250px) {
	body.non-tech .line-aux {
		left: 50px;
		bottom: 90px
	}
}

@media (max-width: 600px) {
	body.non-tech .line-aux {
		left: 20px;
		bottom: 73px;
		visibility: hidden !important;
		opacity: 0 !important
	}
}

body.non-tech .line-aux::after {
	transition: background-color 500ms cubic-bezier(0.47, 0, 0.745, 0.715);
	content: "";
	background-color: #36324b;
	width: 2px;
	height: 10px;
	margin-left: -1px;
	left: 50%;
	bottom: -65px;
	position: absolute
}

body.non-tech .line-aux .line {
	transition: background-color 500ms cubic-bezier(0.47, 0, 0.745, 0.715);
	width: 2px;
	background-color: #36324b;
	height: 0;
	margin-left: -1px;
	left: 50%;
	margin-bottom: 10px;
	position: relative
}

@media (max-width: 600px) {
	body.non-tech .line-aux .line {
		display: none
	}
}

@media (max-height: 500px) {
	body.non-tech .line-aux .line {
		display: none
	}
}

body.non-tech .line-aux .counter {
	transition: all 500ms cubic-bezier(0.47, 0, 0.745, 0.715);
	text-transform: uppercase;
	font-family: "Teko", sans-serif;
	font-weight: 500;
	font-size: 18px;
	color: #e4e2ca;
	height: 50px;
	width: 100px;
	overflow: hidden;
	text-align: center;
	position: absolute;
	bottom: -50px;
	left: -27px
}

body.non-tech .line-aux .counter .page {
	transition: color 500ms cubic-bezier(0.47, 0, 0.745, 0.715);
	position: absolute;
	right: 50%;
	margin-right: 7px;
	bottom: 20px;
	margin-bottom: 45px;
	text-align: right
}

body.non-tech .line-aux .counter .divider {
	transition: color 500ms cubic-bezier(0.47, 0, 0.745, 0.715);
	position: absolute;
	left: 50%;
	color: #d49d81;
	bottom: 12px;
	transform: translateX(-50%);
	margin-bottom: 45px
}

body.non-tech .line-aux .counter .total {
	transition: color 500ms cubic-bezier(0.47, 0, 0.745, 0.715);
	left: 50%;
	margin-left: 7px;
	position: absolute;
	bottom: 5px;
	margin-bottom: 45px
}

body.non-tech .scroll-position {
	width: 100%;
	position: absolute;
	bottom: 0;
	height: 2px;
	opacity: 0;
	z-index: 2;
	visibility: hidden
}

body.non-tech .scroll-position span {
	position: relative;
	display: block;
	width: 50%;
	background-color: #d49d81;
	height: 100%
}

body.non-tech .line-scroll {
	position: absolute;
	z-index: 2;
	opacity: 0;
	visibility: hidden;
	height: 45px;
	width: 140px;
	left: 500px;
	bottom: 40px;
	overflow: hidden
}

body.non-tech .line-scroll>span {
	position: absolute;
	content: "";
	background-color: #d49d81;
	width: 50%;
	bottom: 0px;
	top: auto !important;
	height: 2px !important;
	z-index: 1;
	animation-name: example;
	animation-duration: 4s;
	animation-iteration-count: infinite
}

body.non-tech .line-scroll::after {
	content: "->";
	position: absolute;
	color: #d49d81;
	margin-left: 15px
}

@media (max-width: 1250px) {
	body.non-tech .line-scroll {
		left: 480px;
		bottom: 20px
	}
}

@media (max-width: 600px) {
	body.non-tech .line-scroll {
		left: 20px;
		bottom: 20px;
		height: 35px
	}
}

body.non-tech .fireworks-plane {
	width: 600px;
	height: 600px;
	left: 340px;
	position: absolute;
	opacity: 0;
	top: 50%;
	transform: translateX(-50%) translateY(-50%) rotateY(180deg);
	perspective: 500px;
	z-index: 1
}

@media (max-width: 1250px) {
	body.non-tech .fireworks-plane {
		transform: translateX(-50%) translateY(-50%) rotateY(180deg) scale(0.6)
	}
}

@media (max-width: 600px) {
	body.non-tech .fireworks-plane {
		transform: translateX(-50%) translateY(-50%) rotateY(180deg) scale(0.4);
		left: 50%
	}
}

body.non-tech .firework-1 {
	position: absolute;
	top: 280px;
	left: 50px;
	overflow: visible;
	stroke: #d49d81;
	stroke-width: 10px;
	stroke-dashoffset: -358;
	transform: rotateX(40deg);
	stroke-dasharray: 0, 10000;
	stroke-linecap: round
}

body.non-tech .firework-1:nth-of-type(2) {
	top: 230px;
	transform: rotateZ(20deg) rotateX(40deg)
}

body.non-tech .firework-2>span {
	height: 100px;
	width: 4px;
	position: absolute;
	left: 190px;
	transform-origin: bottom;
	top: 145px
}

body.non-tech .firework-2>span span {
	content: "";
	height: 0;
	background-color: #d49d81;
	bottom: 0;
	width: 100%;
	position: absolute;
	border-radius: 2px
}

body.non-tech .firework-2>span:nth-of-type(1) {
	transform: rotate(60deg)
}

body.non-tech .firework-2>span:nth-of-type(2) {
	transform: rotate(120deg)
}

body.non-tech .firework-2>span:nth-of-type(3) {
	transform: rotate(180deg)
}

body.non-tech .firework-2>span:nth-of-type(4) {
	transform: rotate(240deg)
}

body.non-tech .firework-2>span:nth-of-type(5) {
	transform: rotate(300deg)
}

body.non-tech .firework-2>span:nth-of-type(6) {
	transform: rotate(360deg)
}

body.non-tech .models {
	height: 100%;
	width: 100%;
	position: absolute;
	overflow: hidden;
	left: 0;
	top: 0;
	z-index: 1
}

body.non-tech .models .project-link>* {
	position: absolute
}

body.non-tech .models .project-link {
	position: absolute;
	height: 100%;
	opacity: 0;
	visibility: hidden;
	width: 100%;
	transform: perspective(1400px)
}

body.non-tech .models .project-link.tech span {
	color: #5bf46d
}

body.non-tech .models .project-link.tech span {
	color: #ff9273
}

body.non-tech .models .project-link.non-tech span {
	color: #a07f5e
}

body.non-tech .models .project-link.simon-cuchillerias span {
	color: #f7ce3c
}

body.non-tech .models .project-link.guild-storm span {
	color: #f76565
}

@media (max-width: 600px) {
	body.non-tech .models .project-link {
		transform: scale(0.5)
	}
}

body.non-tech .models canvas {
	top: 0;
	z-index: 1
}

body.non-tech .models .frame {
	stroke: rgba(102, 138, 175, 0.03);
	stroke-width: 85px;
	height: 600px;
	width: 600px;
	margin: 0;
	padding: 25px;
	border-radius: 50%
}

body.non-tech .models h2 {
	top: 50%;
	left: 400px;
	opacity: 0;
	margin-top: -62px;
	font-size: 24px;
	font-weight: 400;
	white-space: nowrap;
	height: 24px
}

body.non-tech .models small {
	top: 50%;
	left: 400px;
	margin-top: 25px;
	opacity: 0;
	text-transform: uppercase;
	white-space: nowrap
}

body.non-tech .models span {
	top: 50%;
	font-family: "Teko", sans-serif;
	font-size: 18px;
	position: absolute;
	height: 0;
	overflow: hidden;
	margin-top: -45px;
	left: 400px
}

body.non-tech .projects {
	position: absolute;
	width: 100%;
	height: 100%;
	z-index: 1
}

body.non-tech .project-content {
	position: relative;
	z-index: 1
}

body.non-tech .project-content .studio-wrap {
	height: 100%
}

body.non-tech .project-content .studio-wrap .scene {
	height: 100%;
	width: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	position: absolute;
	transform: translateX(100%);
	top: 50%
}

body.non-tech .project-content .studio-wrap .scene .image {
	padding: 40px;
	display: flex;
	align-items: center;
	align-self: stretch;
	justify-content: center
}

body.non-tech .project-content .studio-wrap .scene .video {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 40px;
	position: relative
}

body.non-tech .project-content .studio-wrap .scene .video .video-wrap {
	position: absolute;
	width: 100%;
	height: 100%;
	padding: 40px;
	pointer-events: none;
	z-index: 1
}

@media (max-width: 600px) {
	body.non-tech .project-content .studio-wrap .scene .video::before {
		content: "";
		position: absolute;
		width: 30%;
		padding-top: 30%;
		border-radius: 50%;
		border: 2px solid #d49d81
	}
	body.non-tech .project-content .studio-wrap .scene .video::after {
		content: "";
		position: absolute;
		left: 50%;
		margin-left: -15px;
		border-left: 33px solid #e4e2ca;
		border-top: 20px solid transparent;
		border-right: 20px solid transparent;
		border-bottom: 20px solid transparent
	}
}

body.non-tech .project-content .studio-wrap .scene img {
	max-height: 100%;
	max-width: 100%
}

body.non-tech .project-content .studio-wrap .scene .fractured {
	padding: 0
}

body.non-tech .project-content .studio-wrap .scene h2 {
	font-weight: 500;
	display: block;
	font-family: "Teko", sans-serif;
	text-transform: uppercase;
	font-size: 40px;
	line-height: 40px;
	margin-top: 10px;
	margin-bottom: 40px
}

body.non-tech .project-content .studio-wrap .scene h2 span {
	display: inline-block
}

body.non-tech .project-content .studio-wrap .scene .text-title {
	color: #d49d81
}

body.non-tech .project-content .studio-wrap .scene .text-title small {
	color: #668aaf;
	text-transform: uppercase;
	font-weight: bold
}

body.non-tech .project-content .studio-wrap .scene .text-content {
	line-height: 36px;
	color: #e4e2ca;
	font-size: 14px
}

@media (max-width: 600px) {
	body.non-tech .project-content .studio-wrap .scene .text-content {
		line-height: 24px;
		font-size: 14px
	}
}

@media (max-height: 500px) {
	body.non-tech .project-content .studio-wrap .scene .text-content {
		line-height: 24px
	}
}

body.non-tech .project-content .studio-wrap .scene.split {
	flex-direction: row;
	align-items: stretch;
	padding: 40px
}

body.non-tech .project-content .studio-wrap .scene.split>div {
	position: relative;
	padding: 20px 10%;
	display: flex;
	flex: 0 0 50%;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	overflow: hidden
}

@media (max-width: 600px) {
	body.non-tech .project-content .studio-wrap .scene.split h2 {
		font-size: 28px;
		line-height: 28px;
		margin: 0 0 10px
	}
}

@media (max-height: 500px) {
	body.non-tech .project-content .studio-wrap .scene.split h2 {
		font-size: 28px;
		line-height: 28px;
		margin: 0 0 10px
	}
}

body.non-tech .project-content .studio-wrap .scene.split.variant {
	position: relative;
	overflow: hidden
}

body.non-tech .project-content .studio-wrap .scene.split.variant .split-right {
	align-items: stretch;
	padding: 20px 0;
	flex-wrap: nowrap;
	overflow: visible
}

body.non-tech .project-content .studio-wrap .scene.split.variant .split-right>div {
	position: absolute;
	top: 40px;
	bottom: 40px
}

body.non-tech .project-content .studio-wrap .scene.split.variant .split-right>div img {
	max-width: none;
	max-height: 100%
}

@media (max-width: 1250px) {
	body.non-tech .project-content .studio-wrap .scene.split {
		padding: 20px
	}
	body.non-tech .project-content .studio-wrap .scene.split>div {
		padding: 20px
	}
}

@media (max-width: 600px) {
	body.non-tech .project-content .studio-wrap .scene.split {
		flex-direction: column;
		padding: 0
	}
	body.non-tech .project-content .studio-wrap .scene.split>div {
		padding: 20px;
		flex: auto
	}
	body.non-tech .project-content .studio-wrap .scene.split.variant .split-right {
		padding: 0 20px
	}
	body.non-tech .project-content .studio-wrap .scene.split.variant .split-right>div {
		left: 20px;
		right: 20px;
		top: 0;
		bottom: 0
	}
	body.non-tech .project-content .studio-wrap .scene.split.variant .split-right>div img {
		max-width: 100%;
		max-height: none
	}
}

@media (max-height: 500px) {
	body.non-tech .project-content .studio-wrap .scene.split {
		flex-direction: column;
		padding: 0
	}
	body.non-tech .project-content .studio-wrap .scene.split>div {
		padding: 20px;
		flex: auto
	}
	body.non-tech .project-content .studio-wrap .scene.split.variant .split-right {
		padding: 0 20px
	}
	body.non-tech .project-content .studio-wrap .scene.split.variant .split-right>div {
		left: 20px;
		right: 20px;
		top: 0;
		bottom: 0
	}
	body.non-tech .project-content .studio-wrap .scene.split.variant .split-right>div img {
		max-width: 100%;
		max-height: none
	}
}

body.non-tech .project-content .studio-wrap .intro {
	align-items: flex-start;
	padding-left: 550px;
	width: calc(100% - 500px);
	padding-right: 20px
}

body.non-tech .project-content .studio-wrap .intro h1 {
	font-family: "Teko", sans-serif;
	font-weight: 500;
	font-size: 72px;
	line-height: 54px;
	text-transform: uppercase;
	padding-right: 100px;
	margin: 20px 0
}

body.non-tech .project-content .studio-wrap .intro h1>span {
	display: block
}

body.non-tech .project-content .studio-wrap .intro h1>span span {
	display: inline-block
}

body.non-tech .project-content .studio-wrap .intro h1 small {
	color: #d49d81;
	display: block;
	margin-left: -52px;
	text-align: right;
	font-size: 46px;
	font-weight: 400;
	line-height: 46px;
	width: 50px;
	margin-bottom: -46px;
	height: 46px
}

@media (max-width: 1250px) {
	body.non-tech .project-content .studio-wrap .intro {
		bottom: 20px;
		padding: 20px 0;
		max-width: 640px;
		width: 100%;
		align-items: stretch;
		justify-content: flex-end
	}
	body.non-tech .project-content .studio-wrap .intro>div {
		height: auto;
		padding: 0 20px 80px;
		text-align: center
	}
	body.non-tech .project-content .studio-wrap .intro h1 {
		display: inline-block;
		width: auto;
		font-size: 48px;
		text-align: center
	}
	body.non-tech .project-content .studio-wrap .intro h1>span {
		display: inline-block
	}
	body.non-tech .project-content .studio-wrap .intro h1 small {
		font-size: 18px;
		line-height: 36px
	}
}

@media (max-width: 600px) {
	body.non-tech .project-content .studio-wrap .intro>div {
		padding-bottom: 100px
	}
	body.non-tech .project-content .studio-wrap .intro>div h1 small {
		display: none
	}
}

@media (max-width: 1400px) {
	body.non-tech .project-content .studio-wrap .intro h1.fractured {
		font-size: 48px;
		line-height: 48px;
		padding-right: 20px
	}
	body.non-tech .project-content .studio-wrap .intro h1.fractured small {
		font-size: 24px;
		line-height: 32px
	}
}

@media (max-height: 500px) {
	body.non-tech .project-content .studio-wrap .intro>div {
		height: auto;
		padding: 0 20px 80px
	}
	body.non-tech .project-content .studio-wrap .intro h1 {
		font-size: 48px;
		line-height: 48px;
		margin-bottom: 0
	}
}

body.non-tech .project-content .studio-next {
	width: 600px;
	max-width: 100%;
	position: absolute;
	border-bottom: 1px solid #36324b;
	border-top: 1px solid #36324b;
	top: 50%;
	margin-top: -50px;
	left: 100%;
	z-index: 1;
	padding-left: 40px;
	overflow: hidden
}

body.non-tech .project-content .studio-next small {
	font-weight: bold;
	font-size: 11px;
	text-transform: uppercase;
	margin-bottom: -20px;
	margin-top: 10px;
	margin-left: 2px;
	display: block;
	color: #d49d81
}

body.non-tech .project-content .studio-next h4 {
	font-family: "Teko", sans-serif;
	text-transform: uppercase;
	font-size: 60px;
	font-weight: 500;
	margin: 30px 0
}

body.non-tech .project-content .studio-next .button {
	transition: all 500ms cubic-bezier(0.47, 0, 0.745, 0.715);
	width: 40px;
	height: 40px;
	position: absolute;
	right: 30px;
	border: 1px solid #36324b;
	top: 50%;
	transform: translateY(-50%)
}

body.non-tech .project-content .studio-next .button::after {
	content: "";
	border-left: solid 3px #e4e2ca;
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translateX(-50%) translateY(-50%);
	border-right: solid 3px transparent;
	border-top: solid 3px transparent;
	border-bottom: solid 3px transparent;
	height: 6px;
	width: 6px;
	display: block
}

body.non-tech .project-content .studio-next .progress {
	background-color: #d49d81;
	width: 0%;
	height: 1px;
	position: absolute;
	bottom: 0;
	left: 100%
}

body.non-tech .project-content .studio-next.complete .button {
	border: 1px solid #d49d81
}

@media (max-width: 600px) {
	body.non-tech .project-content .studio-next small {
		margin-bottom: -18px
	}
	body.non-tech .project-content .studio-next h4 {
		font-size: 40px;
		margin: 20px 0
	}
}

body.non-tech .project-details {
	list-style: none;
	display: flex;
	padding: 0;
	padding-left: 2px;
	margin: 0
}

body.non-tech .project-details li {
	opacity: 1;
	margin-bottom: 10px;
	position: relative;
	margin-right: 20px;
	font-family: "Teko", sans-serif;
	text-transform: uppercase;
	font-size: 18px;
	color: #e4e2ca
}

body.non-tech .project-details li:last-of-type {
	margin-right: 0
}

body.non-tech .project-details small {
	color: #d49d81;
	font-family: "Rubik", sans-serif;
	font-size: 10px;
	font-weight: 600;
	margin-bottom: -2px;
	display: block
}

@media (max-width: 1250px) {
	body.non-tech .project-details {
		text-align: center;
		justify-content: center
	}
}

body.non-tech .circles {
	position: absolute;
	z-index: 1;
	width: 100%;
	height: 100%
}

body.non-tech .circles .circle-trail {
	stroke: #e4e2ca;
	position: absolute;
	height: 550px;
	width: 550px;
	overflow: visible;
	border-radius: 50%;
	stroke-linecap: round;
	stroke-width: 1px;
	opacity: 0;
	stroke-dasharray: 0.2, 10.268;
	left: 50%;
	top: 50%;
	transform: translateY(-50%) translateX(-50%)
}

@media (max-width: 600px) {
	body.non-tech .circles .circle-trail {
		height: 280px;
		width: 280px
	}
}

body.non-tech .circles .circle-progress {
	stroke: #d49d81;
	position: absolute;
	height: 550px;
	width: 550px;
	border-radius: 50%;
	overflow: visible;
	transform-origin: center;
	stroke-width: 1.5px;
	stroke-linecap: round;
	stroke-dasharray: 629;
	stroke-dashoffset: 629;
	left: 50%;
	opacity: 0;
	top: 50%;
	transform: translateY(-50%) translateX(-50%) rotate(270deg)
}

@media (max-width: 600px) {
	body.non-tech .circles .circle-progress {
		height: 280px;
		width: 280px
	}
}

body.non-tech .circles .circle-progress-bullets {
	height: 550px;
	width: 550px;
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translateY(-50%) translateX(-50%)
}

@media (max-width: 600px) {
	body.non-tech .circles .circle-progress-bullets {
		height: 280px;
		width: 280px
	}
}

body.non-tech .circles .circle-progress-bullets .bullet {
	width: 12px;
	height: 100%;
	display: block;
	position: absolute;
	left: 50%;
	margin-left: -6px
}

body.non-tech .circles .circle-progress-bullets .bullet span {
	transition: border 500ms cubic-bezier(0.47, 0, 0.745, 0.715);
	border: 3px solid #d49d81;
	background-color: #1f2a42;
	content: "";
	height: 12px;
	opacity: 0;
	width: 12px;
	display: block;
	border-radius: 50%;
	margin-top: -6px;
	transform: scale(0)
}

body.non-tech .circles .circle-progress-bullets .bullet-project {
	position: absolute;
	height: 100%;
	width: 20px;
	left: 50%;
	margin-left: -10px
}

body.non-tech .circles .circle-progress-bullets .bullet-project span {
	transition: background-color 500ms cubic-bezier(0.47, 0, 0.745, 0.715);
	border: 2px solid #36324b;
	background-color: #272436;
	height: 20px;
	width: 20px;
	display: block;
	border-radius: 50%;
	margin-top: -10px;
	transform: scale(0)
}

body.non-tech .layout {
	position: absolute;
	width: 100%;
	height: 100%
}

body.non-tech .layout .gameboy {
	position: absolute;
	z-index: 100000;
	top: 20px;
	left: 50%
}

body.non-tech .transition {
	position: absolute;
	height: 100%;
	width: 100%;
	overflow: hidden;
	background-color: #f3f2ef;
	opacity: 0;
	visibility: hidden
}

body.non-tech .project {
	left: 50%;
	position: absolute;
	top: 50%;
	width: 50%;
	opacity: 0;
	visibility: hidden;
	padding-left: 120px;
	transform: translateY(-50%)
}

body.non-tech .project h1 {
	color: #e4e2ca;
	font-family: "Teko", sans-serif;
	font-size: 72px;
	line-height: 60px;
	font-weight: 400;
	margin: 0 0 30px;
	white-space: nowrap;
	perspective: 400px;
	text-transform: uppercase
}

body.non-tech .project h1>span {
	display: block
}

body.non-tech .project h1>span span {
	display: inline-block;
	position: relative;
	transform-origin: top left
}

@media (max-width: 1250px) {
	body.non-tech .project {
		left: 0;
		width: 100%;
		top: auto;
		bottom: 0;
		padding: 0 20px 100px;
		transform: none
	}
	body.non-tech .project h1 {
		font-size: 72px;
		text-align: center
	}
	body.non-tech .project h1 div {
		display: inline-block
	}
}

@media (max-width: 600px) {
	body.non-tech .project {
		top: auto;
		bottom: 0;
		padding: 0 20px 100px
	}
	body.non-tech .project h1 {
		font-size: 48px;
		line-height: 48px;
		margin-bottom: 0
	}
}

@media (max-height: 500px) {
	body.non-tech .project {
		padding-left: 150px;
		padding-right: 150px;
		padding-bottom: 0;
		bottom: 50%;
		transform: translateY(50%)
	}
	body.non-tech .project h1 {
		text-align: center;
		display: flex;
		justify-content: center;
		font-size: 36px;
		line-height: 36px;
		margin-bottom: 20px
	}
	body.non-tech .project h1>span {
		display: inline-block;
		margin-right: 7px
	}
	body.non-tech .project h1>span:last-of-type {
		margin-right: 0
	}
}

@media (max-width: 600px) {
	body.non-tech.studio .line-aux,
	body.non-tech.about .line-aux {
		opacity: 0 !important;
		visibility: hidden !important
	}
}

@media (max-width: 1250px) {
	body.non-tech.about .line {
		opacity: 0
	}
}

@media (max-width: 600px) {
	body.non-tech.menu .project-link {
		transform: scale(0.8)
	}
}

body.non-tech.studio {
	transition: all 500ms cubic-bezier(0.47, 0, 0.745, 0.715);
	background: #1d1f21;
	color: #3d3b40;
	margin: 0;
	overflow: hidden;
	font-family: "Rubik", sans-serif;
	font-size: 14px;
	line-height: 20px
}

body.non-tech.studio a {
	transition: color 300ms cubic-bezier(0.47, 0, 0.745, 0.715);
	color: #dddae1;
	text-decoration: none;
	display: inline-block
}

body.non-tech.studio a.fractured>span {
	display: inline-block
}

body.non-tech.studio a.fractured>span span {
	display: inline-block;
	font-family: "Rubik", sans-serif;
	line-height: 20px;
	text-transform: none
}

body.non-tech.studio a:hover {
	color: #d9bcb1
}

body.non-tech.studio .gradient {
	position: absolute;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
	opacity: 0.8
}

body.non-tech.studio .gradient stop {
	transition: all 500ms cubic-bezier(0.47, 0, 0.745, 0.715);
	stop-color: #1d1f21
}

body.non-tech.studio .gradient stop:last-of-type {
	stop-color: #1d1f21
}

body.non-tech.studio .circle-transition {
	position: absolute;
	height: 0;
	width: 0;
	border-radius: 50%;
	transform: translateX(-50%) translateY(-50%);
	left: 50%;
	top: 50%
}

body.non-tech.studio .logo {
	width: 250px;
	position: fixed;
	opacity: 1;
	z-index: 2;
	left: 80px;
	top: 60px;
	color: #dddae1;
	cursor: pointer
}

body.non-tech.studio .logo.revert {
	color: #d49d81
}

body.non-tech.studio .logo.revert svg {
	fill: #d49d81
}

@media (max-width: 1250px) {
	body.non-tech.studio .logo {
		left: 50px;
		top: 40px
	}
}

@media (max-width: 600px) {
	body.non-tech.studio .logo {
		left: 20px;
		top: 20px
	}
}

body.non-tech.studio .logo h2 {
	transition: color 500ms cubic-bezier(0.47, 0, 0.745, 0.715);
	font-size: 18px;
	font-weight: 400;
	line-height: normal;
	margin: 8px 0 0;
	display: block
}

body.non-tech.studio .logo h3 {
	transition: color 500ms cubic-bezier(0.47, 0, 0.745, 0.715);
	font-size: 11px;
	text-transform: uppercase;
	font-weight: 700;
	margin: 0;
	letter-spacing: 0.45px;
	display: none
}

body.non-tech.studio .logo svg {
	transition: all 500ms cubic-bezier(0.47, 0, 0.745, 0.715);
	fill: #dddae1;
	float: left;
	margin-right: 15px
}

@media (max-width: 600px) {
	body.non-tech.studio .logo h2,
	body.non-tech.studio .logo h3 {
		display: none
	}
}

@media (max-height: 500px) {
	body.non-tech.studio .logo h2,
	body.non-tech.studio .logo h3 {
		display: none
	}
}

body.non-tech.studio .mobile-menu {
	transition: fill 500ms cubic-bezier(0.47, 0, 0.745, 0.715);
	position: absolute;
	bottom: 33px;
	fill: #dddae1;
	left: 20px;
	z-index: 2;
	cursor: pointer;
	opacity: 0;
	visibility: hidden;
	display: none
}

@media (max-width: 600px) {
	body.non-tech.studio .mobile-menu {
		display: block
	}
}

body.non-tech.studio .menu-top {
	position: fixed;
	right: 80px;
	z-index: 10;
	top: 70px
}

@media (max-width: 1250px) {
	body.non-tech.studio .menu-top {
		right: 50px;
		top: 50px
	}
}

@media (max-width: 600px) {
	body.non-tech.studio .menu-top {
		right: 20px;
		top: 30px
	}
}

body.non-tech.studio .menu-top a {
	padding: 20px;
	padding-right: 0;
	margin-top: -20px;
	opacity: 0;
	visibility: hidden;
	transform: translateY(-10px)
}

body.non-tech.studio .menu-top a span {
	display: inline-block
}

body.non-tech.studio .mouse-track {
	pointer-events: none;
	position: absolute;
	z-index: 1000;
	opacity: 0
}

body.non-tech.studio .mouse-track .outer-circle {
	stroke: #dddae1;
	transform: translateX(-50%) translateY(-50%) rotate(-90deg);
	stroke-width: 2px;
	fill: none;
	height: 18px;
	width: 18px;
	overflow: visible;
	position: absolute
}

body.non-tech.studio .mouse-track .outer-circle .countdown {
	opacity: 0;
	stroke: #d49d81;
	position: absolute;
	stroke-dashoffset: 125px;
	stroke-dasharray: 125px;
	stroke-width: 4px
}

body.non-tech.studio .mouse-track .inner-circle {
	stroke: #dddae1;
	transform: translateX(-50%) translateY(-50%);
	stroke-width: 2px;
	fill: none;
	height: 2px;
	width: 2px;
	opacity: 0.6;
	overflow: visible;
	position: absolute
}

body.non-tech.studio .mouse-track .arrow-right {
	stroke: #d49d81;
	opacity: 0;
	visibility: hidden;
	stroke-width: 2px;
	transform: rotate(180deg);
	margin-left: 10px;
	margin-top: -7px;
	position: absolute
}

body.non-tech.studio .mouse-track .arrow-left {
	stroke: #d49d81;
	opacity: 0;
	margin-left: -20px;
	margin-top: -6px;
	visibility: hidden;
	stroke-width: 2px;
	position: absolute
}

body.non-tech.studio .mouse-track .play {
	fill: #dddae1;
	opacity: 1;
	margin-top: -6px;
	stroke-width: 2px;
	margin-top: -18px;
	margin-left: -14px;
	transform: scale(0);
	position: absolute
}

body.non-tech.studio .mouse-track .stop {
	fill: #dddae1;
	height: 38px;
	width: 38px;
	margin-left: -19px;
	margin-top: -19px;
	transform: scale(0);
	position: absolute
}

@media (max-width: 600px) {
	body.non-tech.studio .mouse-track {
		opacity: 0 !important;
		visibility: hidden !important
	}
}

body.non-tech.studio .about-page {
	position: absolute;
	height: 100%;
	width: 100%;
	padding: 40px;
	left: 0;
	opacity: 1;
	top: 0;
	display: flex;
	flex-direction: row;
	visibility: hidden;
	align-items: stretch
}

@media (max-width: 1250px) {
	body.non-tech.studio .about-page {
		padding: 20px
	}
}

@media (max-width: 600px) {
	body.non-tech.studio .about-page {
		flex-direction: column;
		padding: 0
	}
}

body.non-tech.studio .about-page.active .neon-sign {
	animation: flicker 10s infinite
}

body.non-tech.studio .about-page.active .split-left::before {
	width: 100%;
	bottom: 0
}

body.non-tech.studio .about-page.active .split-left.shaded::after {
	opacity: 1
}

body.non-tech.studio .about-page .split-left {
	opacity: 0;
	visibility: hidden;
	overflow: hidden
}

body.non-tech.studio .about-page .split-left.shaded::after {
	content: "Swipe or Scroll and click image to know more";
	padding-right: 20px;
	line-height: 100px;
	color: #2d2d31;
	text-align: right;
	position: absolute;
	bottom: 0;
	width: 100%;
	opacity: 0;
	transition: all 500ms cubic-bezier(0.47, 0, 0.745, 0.715);
	transition-delay: 1;
	height: 100px;
	background-color: red;
	background: linear-gradient(transparent, #14141a 50%);
	pointer-events: none
}

body.non-tech.studio .about-page .split-left::before {
	transition: all 500ms cubic-bezier(0.47, 0, 0.745, 0.715);
	content: "";
	position: absolute;
	width: 0%;
	height: 100%;
	left: 0;
	background-color: #14141a;
	z-index: -1;
	bottom: 0
}

body.non-tech.studio .about-page>* {
	position: relative;
	z-index: 1;
	flex: 0 0 50%;
	display: flex;
	align-items: center
}

body.non-tech.studio .about-page .gradient-about {
	background-color: red;
	position: absolute;
	width: 100%;
	height: 100%;
	z-index: 1;
	top: 0;
	left: 0;
	-webkit-mask-image: url("../smoke-sprite.png");
	-webkit-mask-size: 3000% 100%;
	-webkit-mask-position-x: 0%;
	animation-iteration-count: 1;
	animation-delay: 1s
}

body.non-tech.studio .about-page .gradient-about.active {
	animation: mask 1.5s steps(29) forwards
}

body.non-tech.studio .about-page .gradient-about stop {
	transition: all 500ms cubic-bezier(0.47, 0, 0.745, 0.715);
	stop-color: #292038
}

body.non-tech.studio .about-page .gradient-about stop:last-of-type {
	stop-color: #18181d
}

@media (max-width: 600px) {
	body.non-tech.studio .about-page .gradient-about stop {
		transition: all 500ms cubic-bezier(0.47, 0, 0.745, 0.715);
		stop-color: #18181d
	}
	body.non-tech.studio .about-page .gradient-about stop:last-of-type {
		stop-color: #18181d
	}
}

body.non-tech.studio .about-page .about-text {
	position: absolute;
	padding: 120px;
	padding-right: 240px
}

body.non-tech.studio .about-page .about-text h1 {
	color: #d49d81;
	white-space: nowrap;
	font-weight: 500;
	display: block;
	font-family: "Teko", sans-serif;
	text-transform: uppercase;
	font-size: 40px;
	line-height: 40px;
	margin-top: 10px;
	margin-bottom: 40px
}

@media (max-width: 600px) {
	body.non-tech.studio .about-page .about-text h1 {
		font-size: 28px;
		line-height: 28px;
		margin: 0 0 20px
	}
}

body.non-tech.studio .about-page .about-text h1>span {
	display: block
}

body.non-tech.studio .about-page .about-text h1>span span {
	display: inline-block
}

body.non-tech.studio .about-page .about-text p {
	opacity: 0;
	font-size: 16px;
	line-height: 32px
}

@media (max-width: 600px) {
	body.non-tech.studio .about-page .about-text p {
		line-height: 24px
	}
}

@media (max-width: 1250px) {
	body.non-tech.studio .about-page .about-text {
		padding-left: 40px;
		padding-right: 40px
	}
}

@media (max-width: 600px) {
	body.non-tech.studio .about-page .about-text {
		padding-left: 20px;
		padding-right: 20px
	}
}

body.non-tech.studio .about-page .about-render {
	position: absolute;
	visibility: hidden;
	top: 0%;
	opacity: 0;
	right: 0;
	width: 140%;
	height: 100%;
	transform: translateY(0) scale(1);
	z-index: 1;
	pointer-events: none
}

@media (max-width: 1250px) {
	body.non-tech.studio .about-page .about-render {
		width: 100%
	}
}

@media (max-width: 600px) {
	body.non-tech.studio .about-page .about-render {
		width: 100%
	}
}

body.non-tech.studio .about-page .about-render canvas {
	position: absolute;
	transform: translateY(-50%);
	top: 50%
}

body.non-tech.studio .about-page .neon-sign {
	opacity: 0;
	height: 570px;
	width: 140%;
	position: absolute;
	text-transform: uppercase;
	font-size: 46px;
	color: #ff0054;
	right: 260px;
	top: -30px;
	transform: scale(0.5) perspective(900px) translateZ(-300px) rotateY(-10deg) rotateX(0deg) rotateZ(0deg) skewY(9deg);
	filter: blur(2px) brightness(2)
}

body.non-tech.studio .about-page .neon-sign::before {
	content: "";
	width: 410px;
	height: 100%;
	position: absolute;
	left: 100%
}

@media (max-width: 1250px) {
	body.non-tech.studio .about-page .neon-sign {
		display: none
	}
}

@media (max-width: 600px) {
	body.non-tech.studio .about-page .neon-sign {
		display: none
	}
}

body.non-tech.studio .about-page .neon-sign::after {
	content: "";
	border: 6px solid #ff0054;
	width: 210px;
	height: 100%;
	position: absolute;
	right: 0
}

body.non-tech.studio .about-page .neon-sign.var-1 {
	transform: scale(0.7) perspective(900px) rotateY(-8deg) rotateX(0deg) rotateZ(0deg) skewY(9deg) translateX(150px)
}

body.non-tech.studio .about-page .neon-sign.var-2 {
	transform: scale(0.7) perspective(900px) rotateY(-6deg) rotateX(0deg) rotateZ(0deg) skewY(6deg) translateY(6px) translateX(140px)
}

body.non-tech.studio .about-page .neon-sign>* {
	position: absolute
}

body.non-tech.studio .about-page .neon-sign .code {
	top: 40px;
	right: 42px;
	animation: flicker 5s infinite
}

body.non-tech.studio .about-page .neon-sign .and {
	top: 94px;
	color: #00e4ff;
	font-size: 80px;
	right: 70px
}

body.non-tech.studio .about-page .neon-sign .design {
	top: 145px;
	right: 19px
}

body.non-tech.studio .about-page .neon-sign .key {
	animation: fade 2s steps(1) infinite;
	animation-direction: reverse;
	bottom: 45px;
	right: 53px
}

body.non-tech.studio .about-page .neon-sign .key-pressed {
	animation: fade 2s steps(1) infinite;
	animation-direction: normal;
	bottom: 40px;
	right: 19px
}

body.non-tech.studio .about-page .neon-sign .hand {
	animation: hand 2s steps(1) infinite;
	right: 30px;
	bottom: 100px
}

body.non-tech.studio .about-page .neon-sign .key-base {
	bottom: 20px;
	right: 45px
}

body.non-tech.studio .introduction {
	position: absolute;
	background-color: #1d1f21;
	height: 100%;
	width: 100%;
	top: 0;
	left: 0;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center
}

body.non-tech.studio .introduction .skip {
	padding: 30px;
	position: absolute;
	bottom: 50px;
	font-size: 16px;
	color: #3d3b40;
	cursor: pointer
}

body.non-tech.studio .intro-text {
	transition: color 500ms cubic-bezier(0.47, 0, 0.745, 0.715);
	position: absolute;
	bottom: 50%;
	z-index: 1;
	width: 100%;
	padding: 0 10px;
	text-align: center;
	font-size: 24px;
	color: #dddae1
}

body.non-tech.studio .intro-text.tutorial {
	font-size: 16px;
	bottom: 70px
}

body.non-tech.studio .intro-text span {
	display: inline-block
}

@media (max-width: 1250px) {
	body.non-tech.studio .intro-text.tutorial {
		bottom: 40px
	}
}

@media (max-width: 600px) {
	body.non-tech.studio .intro-text {
		font-size: 16px
	}
	body.non-tech.studio .intro-text.tutorial {
		bottom: auto;
		top: 140px
	}
}

body.non-tech.studio .discover {
	opacity: 0;
	visibility: hidden;
	color: #d49d81;
	position: absolute;
	bottom: 0;
	right: 0;
	height: 160px;
	width: 240px;
	z-index: 100;
	cursor: pointer
}

body.non-tech.studio .discover .open>span {
	position: absolute;
	height: 14px;
	width: 7px;
	bottom: 65px;
	right: 80px;
	transform: translateX(-80px)
}

body.non-tech.studio .discover .open>span::before {
	transition: all 300ms cubic-bezier(0.47, 0, 0.745, 0.715);
	transition-property: background-color, transform, opacity;
	transition-delay: 0s, 0.8s, 0.8s;
	content: "";
	position: absolute;
	border-radius: 10px 10px 20px 0;
	height: 8px;
	transform-origin: top left;
	width: 1.5px;
	background-color: #d49d81;
	transform: rotate(-45deg) scaleY(4);
	opacity: 0
}

body.non-tech.studio .discover .open>span::after {
	transition: all 300ms cubic-bezier(0.47, 0, 0.745, 0.715);
	transition-property: background-color, transform, opacity;
	transition-delay: 0s, 1.1s, 1.1s;
	content: "";
	position: absolute;
	border-radius: 0 20px 10px 10px;
	height: 8px;
	transform-origin: bottom left;
	margin-top: 1px;
	width: 1.5px;
	background-color: #d49d81;
	transform: rotate(45deg) scaleY(4);
	opacity: 0
}

body.non-tech.studio .discover .open.active>span::before {
	transform: rotate(-45deg) scaleY(1);
	opacity: 1;
	transition-delay: 0
}

body.non-tech.studio .discover .open.active>span::after {
	transform: rotate(45deg) scaleY(1);
	opacity: 1;
	transition-delay: 0
}

body.non-tech.studio .discover .close>span {
	position: absolute;
	height: 17px;
	width: 7px;
	bottom: 65px;
	right: 80px;
	transform: translateX(-57px)
}

body.non-tech.studio .discover .close>span::before {
	transition: all 300ms cubic-bezier(0.47, 0, 0.745, 0.715);
	transition-delay: 1.1s;
	content: "";
	position: absolute;
	border-radius: 5px;
	height: 15px;
	width: 2px;
	margin-left: -5px;
	margin-top: 1px;
	background-color: #d49d81;
	transform-origin: top;
	transform: rotate(-45deg) scaleY(0)
}

body.non-tech.studio .discover .close>span::after {
	transition: all 300ms cubic-bezier(0.47, 0, 0.745, 0.715);
	transition-delay: 0.8s;
	content: "";
	position: absolute;
	border-radius: 5px;
	height: 15px;
	width: 2px;
	background-color: #d49d81;
	transform-origin: bottom;
	margin-left: -5px;
	margin-top: -3px;
	transform: rotate(45deg) scaleY(0)
}

body.non-tech.studio .discover .close.active>span::before {
	transform: rotate(-45deg) scaleY(1);
	transition-delay: 0
}

body.non-tech.studio .discover .close.active>span::after {
	transform: rotate(45deg) scaleY(1);
	transition-delay: 0
}

body.non-tech.studio .discover .open,
body.non-tech.studio .discover .close {
	transition: all 300ms cubic-bezier(0.47, 0, 0.745, 0.715);
	height: 100%;
	position: absolute;
	width: 100%;
	left: 0;
	top: 0;
	opacity: 0
}

body.non-tech.studio .discover .open.active,
body.non-tech.studio .discover .close.active {
	opacity: 1
}

body.non-tech.studio .discover .open a span,
body.non-tech.studio .discover .close a span {
	transform: translateX(5px) translateY(5px);
	opacity: 0
}

body.non-tech.studio .discover .open.active a span,
body.non-tech.studio .discover .close.active a span {
	transform: translateX(0px) translateY(0px);
	opacity: 1
}

body.non-tech.studio .discover:hover {
	height: 200px;
	width: 300px
}

body.non-tech.studio .discover:hover a {
	color: #dddae1
}

body.non-tech.studio .discover:hover svg {
	stroke: #3d3b40
}

body.non-tech.studio .discover>div>a {
	position: absolute;
	right: 80px;
	bottom: 65px
}

body.non-tech.studio .discover a span {
	position: relative;
	display: inline-block
}

@media (max-width: 1250px) {
	body.non-tech.studio .discover {
		height: 100px;
		width: 170px
	}
}

@media (max-width: 600px) {
	body.non-tech.studio .discover {
		height: 70px;
		width: 120px;
		z-index: 2
	}
	body.non-tech.studio .discover:hover {
		width: 100%;
		height: 90px
	}
}

body.non-tech.studio .line-aux {
	width: 45px;
	position: fixed;
	opacity: 1;
	height: 100px;
	left: 82px;
	bottom: 110px;
	z-index: 3;
	opacity: 0;
	visibility: hidden
}

@media (max-width: 1250px) {
	body.non-tech.studio .line-aux {
		left: 50px;
		bottom: 90px
	}
}

@media (max-width: 600px) {
	body.non-tech.studio .line-aux {
		left: 20px;
		bottom: 73px;
		visibility: hidden !important;
		opacity: 0 !important
	}
}

body.non-tech.studio .line-aux::after {
	transition: background-color 500ms cubic-bezier(0.47, 0, 0.745, 0.715);
	content: "";
	background-color: #2e3134;
	width: 2px;
	height: 10px;
	margin-left: -1px;
	left: 50%;
	bottom: -65px;
	position: absolute
}

body.non-tech.studio .line-aux .line {
	transition: background-color 500ms cubic-bezier(0.47, 0, 0.745, 0.715);
	width: 2px;
	background-color: #2e3134;
	height: 0;
	margin-left: -1px;
	left: 50%;
	margin-bottom: 10px;
	position: relative
}

@media (max-width: 600px) {
	body.non-tech.studio .line-aux .line {
		display: none
	}
}

@media (max-height: 500px) {
	body.non-tech.studio .line-aux .line {
		display: none
	}
}

body.non-tech.studio .line-aux .counter {
	transition: all 500ms cubic-bezier(0.47, 0, 0.745, 0.715);
	text-transform: uppercase;
	font-family: "Teko", sans-serif;
	font-weight: 500;
	font-size: 18px;
	color: #dddae1;
	height: 50px;
	width: 100px;
	overflow: hidden;
	text-align: center;
	position: absolute;
	bottom: -50px;
	left: -27px
}

body.non-tech.studio .line-aux .counter .page {
	transition: color 500ms cubic-bezier(0.47, 0, 0.745, 0.715);
	position: absolute;
	right: 50%;
	margin-right: 7px;
	bottom: 20px;
	margin-bottom: 45px;
	text-align: right
}

body.non-tech.studio .line-aux .counter .divider {
	transition: color 500ms cubic-bezier(0.47, 0, 0.745, 0.715);
	position: absolute;
	left: 50%;
	color: #d49d81;
	bottom: 12px;
	transform: translateX(-50%);
	margin-bottom: 45px
}

body.non-tech.studio .line-aux .counter .total {
	transition: color 500ms cubic-bezier(0.47, 0, 0.745, 0.715);
	left: 50%;
	margin-left: 7px;
	position: absolute;
	bottom: 5px;
	margin-bottom: 45px
}

body.non-tech.studio .scroll-position {
	width: 100%;
	position: absolute;
	bottom: 0;
	height: 2px;
	opacity: 0;
	z-index: 2;
	visibility: hidden
}

body.non-tech.studio .scroll-position span {
	position: relative;
	display: block;
	width: 50%;
	background-color: #d49d81;
	height: 100%
}

body.non-tech.studio .line-scroll {
	position: absolute;
	z-index: 2;
	opacity: 0;
	visibility: hidden;
	height: 45px;
	width: 140px;
	left: 500px;
	bottom: 40px;
	overflow: hidden
}

body.non-tech.studio .line-scroll>span {
	position: absolute;
	content: "";
	background-color: #d49d81;
	width: 50%;
	bottom: 0px;
	top: auto !important;
	height: 2px !important;
	z-index: 1;
	animation-name: example;
	animation-duration: 4s;
	animation-iteration-count: infinite
}

body.non-tech.studio .line-scroll::after {
	content: "->";
	position: absolute;
	color: #d49d81;
	margin-left: 15px
}

@media (max-width: 1250px) {
	body.non-tech.studio .line-scroll {
		left: 480px;
		bottom: 20px
	}
}

@media (max-width: 600px) {
	body.non-tech.studio .line-scroll {
		left: 20px;
		bottom: 20px;
		height: 35px
	}
}

body.non-tech.studio .fireworks-plane {
	width: 600px;
	height: 600px;
	left: 340px;
	position: absolute;
	opacity: 0;
	top: 50%;
	transform: translateX(-50%) translateY(-50%) rotateY(180deg);
	perspective: 500px;
	z-index: 1
}

@media (max-width: 1250px) {
	body.non-tech.studio .fireworks-plane {
		transform: translateX(-50%) translateY(-50%) rotateY(180deg) scale(0.6)
	}
}

@media (max-width: 600px) {
	body.non-tech.studio .fireworks-plane {
		transform: translateX(-50%) translateY(-50%) rotateY(180deg) scale(0.4);
		left: 50%
	}
}

body.non-tech.studio .firework-1 {
	position: absolute;
	top: 280px;
	left: 50px;
	overflow: visible;
	stroke: #d49d81;
	stroke-width: 10px;
	stroke-dashoffset: -358;
	transform: rotateX(40deg);
	stroke-dasharray: 0, 10000;
	stroke-linecap: round
}

body.non-tech.studio .firework-1:nth-of-type(2) {
	top: 230px;
	transform: rotateZ(20deg) rotateX(40deg)
}

body.non-tech.studio .firework-2>span {
	height: 100px;
	width: 4px;
	position: absolute;
	left: 190px;
	transform-origin: bottom;
	top: 145px
}

body.non-tech.studio .firework-2>span span {
	content: "";
	height: 0;
	background-color: #d49d81;
	bottom: 0;
	width: 100%;
	position: absolute;
	border-radius: 2px
}

body.non-tech.studio .firework-2>span:nth-of-type(1) {
	transform: rotate(60deg)
}

body.non-tech.studio .firework-2>span:nth-of-type(2) {
	transform: rotate(120deg)
}

body.non-tech.studio .firework-2>span:nth-of-type(3) {
	transform: rotate(180deg)
}

body.non-tech.studio .firework-2>span:nth-of-type(4) {
	transform: rotate(240deg)
}

body.non-tech.studio .firework-2>span:nth-of-type(5) {
	transform: rotate(300deg)
}

body.non-tech.studio .firework-2>span:nth-of-type(6) {
	transform: rotate(360deg)
}

body.non-tech.studio .models {
	height: 100%;
	width: 100%;
	position: absolute;
	overflow: hidden;
	left: 0;
	top: 0;
	z-index: 1
}

body.non-tech.studio .models .project-link>* {
	position: absolute
}

body.non-tech.studio .models .project-link {
	position: absolute;
	height: 100%;
	opacity: 0;
	visibility: hidden;
	width: 100%;
	transform: perspective(1400px)
}

body.non-tech.studio .models .project-link.tech span {
	color: #5bf46d
}

body.non-tech.studio .models .project-link.tech span {
	color: #ff9273
}

body.non-tech.studio .models .project-link.non-tech span {
	color: #a07f5e
}

body.non-tech.studio .models .project-link.simon-cuchillerias span {
	color: #f7ce3c
}

body.non-tech.studio .models .project-link.guild-storm span {
	color: #f76565
}

@media (max-width: 600px) {
	body.non-tech.studio .models .project-link {
		transform: scale(0.5)
	}
}

body.non-tech.studio .models canvas {
	top: 0;
	z-index: 1
}

body.non-tech.studio .models .frame {
	stroke: rgba(61, 59, 64, 0.03);
	stroke-width: 85px;
	height: 600px;
	width: 600px;
	margin: 0;
	padding: 25px;
	border-radius: 50%
}

body.non-tech.studio .models h2 {
	top: 50%;
	left: 400px;
	opacity: 0;
	margin-top: -62px;
	font-size: 24px;
	font-weight: 400;
	white-space: nowrap;
	height: 24px
}

body.non-tech.studio .models small {
	top: 50%;
	left: 400px;
	margin-top: 25px;
	opacity: 0;
	text-transform: uppercase;
	white-space: nowrap
}

body.non-tech.studio .models span {
	top: 50%;
	font-family: "Teko", sans-serif;
	font-size: 18px;
	position: absolute;
	height: 0;
	overflow: hidden;
	margin-top: -45px;
	left: 400px
}

body.non-tech.studio .projects {
	position: absolute;
	width: 100%;
	height: 100%;
	z-index: 1
}

body.non-tech.studio .project-content {
	position: relative;
	z-index: 1
}

body.non-tech.studio .project-content .studio-wrap {
	height: 100%
}

body.non-tech.studio .project-content .studio-wrap .scene {
	height: 100%;
	width: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	position: absolute;
	transform: translateX(100%);
	top: 50%
}

body.non-tech.studio .project-content .studio-wrap .scene .image {
	padding: 40px;
	display: flex;
	align-items: center;
	align-self: stretch;
	justify-content: center
}

body.non-tech.studio .project-content .studio-wrap .scene .video {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 40px;
	position: relative
}

body.non-tech.studio .project-content .studio-wrap .scene .video .video-wrap {
	position: absolute;
	width: 100%;
	height: 100%;
	padding: 40px;
	pointer-events: none;
	z-index: 1
}

@media (max-width: 600px) {
	body.non-tech.studio .project-content .studio-wrap .scene .video::before {
		content: "";
		position: absolute;
		width: 30%;
		padding-top: 30%;
		border-radius: 50%;
		border: 2px solid #d49d81
	}
	body.non-tech.studio .project-content .studio-wrap .scene .video::after {
		content: "";
		position: absolute;
		left: 50%;
		margin-left: -15px;
		border-left: 33px solid #dddae1;
		border-top: 20px solid transparent;
		border-right: 20px solid transparent;
		border-bottom: 20px solid transparent
	}
}

body.non-tech.studio .project-content .studio-wrap .scene img {
	max-height: 100%;
	max-width: 100%
}

body.non-tech.studio .project-content .studio-wrap .scene .fractured {
	padding: 0
}

body.non-tech.studio .project-content .studio-wrap .scene h2 {
	font-weight: 500;
	display: block;
	font-family: "Teko", sans-serif;
	text-transform: uppercase;
	font-size: 40px;
	line-height: 40px;
	margin-top: 10px;
	margin-bottom: 40px
}

body.non-tech.studio .project-content .studio-wrap .scene h2 span {
	display: inline-block
}

body.non-tech.studio .project-content .studio-wrap .scene .text-title {
	color: #d49d81
}

body.non-tech.studio .project-content .studio-wrap .scene .text-title small {
	color: #3d3b40;
	text-transform: uppercase;
	font-weight: bold
}

body.non-tech.studio .project-content .studio-wrap .scene .text-content {
	line-height: 36px;
	color: #dddae1;
	font-size: 14px
}

@media (max-width: 600px) {
	body.non-tech.studio .project-content .studio-wrap .scene .text-content {
		line-height: 24px;
		font-size: 14px
	}
}

@media (max-height: 500px) {
	body.non-tech.studio .project-content .studio-wrap .scene .text-content {
		line-height: 24px
	}
}

body.non-tech.studio .project-content .studio-wrap .scene.split {
	flex-direction: row;
	align-items: stretch;
	padding: 40px
}

body.non-tech.studio .project-content .studio-wrap .scene.split>div {
	position: relative;
	padding: 20px 10%;
	display: flex;
	flex: 0 0 50%;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	overflow: hidden
}

@media (max-width: 600px) {
	body.non-tech.studio .project-content .studio-wrap .scene.split h2 {
		font-size: 28px;
		line-height: 28px;
		margin: 0 0 10px
	}
}

@media (max-height: 500px) {
	body.non-tech.studio .project-content .studio-wrap .scene.split h2 {
		font-size: 28px;
		line-height: 28px;
		margin: 0 0 10px
	}
}

body.non-tech.studio .project-content .studio-wrap .scene.split.variant {
	position: relative;
	overflow: hidden
}

body.non-tech.studio .project-content .studio-wrap .scene.split.variant .split-right {
	align-items: stretch;
	padding: 20px 0;
	flex-wrap: nowrap;
	overflow: visible
}

body.non-tech.studio .project-content .studio-wrap .scene.split.variant .split-right>div {
	position: absolute;
	top: 40px;
	bottom: 40px
}

body.non-tech.studio .project-content .studio-wrap .scene.split.variant .split-right>div img {
	max-width: none;
	max-height: 100%
}

@media (max-width: 1250px) {
	body.non-tech.studio .project-content .studio-wrap .scene.split {
		padding: 20px
	}
	body.non-tech.studio .project-content .studio-wrap .scene.split>div {
		padding: 20px
	}
}

@media (max-width: 600px) {
	body.non-tech.studio .project-content .studio-wrap .scene.split {
		flex-direction: column;
		padding: 0
	}
	body.non-tech.studio .project-content .studio-wrap .scene.split>div {
		padding: 20px;
		flex: auto
	}
	body.non-tech.studio .project-content .studio-wrap .scene.split.variant .split-right {
		padding: 0 20px
	}
	body.non-tech.studio .project-content .studio-wrap .scene.split.variant .split-right>div {
		left: 20px;
		right: 20px;
		top: 0;
		bottom: 0
	}
	body.non-tech.studio .project-content .studio-wrap .scene.split.variant .split-right>div img {
		max-width: 100%;
		max-height: none
	}
}

@media (max-height: 500px) {
	body.non-tech.studio .project-content .studio-wrap .scene.split {
		flex-direction: column;
		padding: 0
	}
	body.non-tech.studio .project-content .studio-wrap .scene.split>div {
		padding: 20px;
		flex: auto
	}
	body.non-tech.studio .project-content .studio-wrap .scene.split.variant .split-right {
		padding: 0 20px
	}
	body.non-tech.studio .project-content .studio-wrap .scene.split.variant .split-right>div {
		left: 20px;
		right: 20px;
		top: 0;
		bottom: 0
	}
	body.non-tech.studio .project-content .studio-wrap .scene.split.variant .split-right>div img {
		max-width: 100%;
		max-height: none
	}
}

body.non-tech.studio .project-content .studio-wrap .intro {
	align-items: flex-start;
	padding-left: 550px;
	width: calc(100% - 500px);
	padding-right: 20px
}

body.non-tech.studio .project-content .studio-wrap .intro h1 {
	font-family: "Teko", sans-serif;
	font-weight: 500;
	font-size: 72px;
	line-height: 54px;
	text-transform: uppercase;
	padding-right: 100px;
	margin: 20px 0
}

body.non-tech.studio .project-content .studio-wrap .intro h1>span {
	display: block
}

body.non-tech.studio .project-content .studio-wrap .intro h1>span span {
	display: inline-block
}

body.non-tech.studio .project-content .studio-wrap .intro h1 small {
	color: #d49d81;
	display: block;
	margin-left: -52px;
	text-align: right;
	font-size: 46px;
	font-weight: 400;
	line-height: 46px;
	width: 50px;
	margin-bottom: -46px;
	height: 46px
}

@media (max-width: 1250px) {
	body.non-tech.studio .project-content .studio-wrap .intro {
		bottom: 20px;
		padding: 20px 0;
		max-width: 640px;
		width: 100%;
		align-items: stretch;
		justify-content: flex-end
	}
	body.non-tech.studio .project-content .studio-wrap .intro>div {
		height: auto;
		padding: 0 20px 80px;
		text-align: center
	}
	body.non-tech.studio .project-content .studio-wrap .intro h1 {
		display: inline-block;
		width: auto;
		font-size: 48px;
		text-align: center
	}
	body.non-tech.studio .project-content .studio-wrap .intro h1>span {
		display: inline-block
	}
	body.non-tech.studio .project-content .studio-wrap .intro h1 small {
		font-size: 18px;
		line-height: 36px
	}
}

@media (max-width: 600px) {
	body.non-tech.studio .project-content .studio-wrap .intro>div {
		padding-bottom: 100px
	}
	body.non-tech.studio .project-content .studio-wrap .intro>div h1 small {
		display: none
	}
}

@media (max-width: 1400px) {
	body.non-tech.studio .project-content .studio-wrap .intro h1.fractured {
		font-size: 48px;
		line-height: 48px;
		padding-right: 20px
	}
	body.non-tech.studio .project-content .studio-wrap .intro h1.fractured small {
		font-size: 24px;
		line-height: 32px
	}
}

@media (max-height: 500px) {
	body.non-tech.studio .project-content .studio-wrap .intro>div {
		height: auto;
		padding: 0 20px 80px
	}
	body.non-tech.studio .project-content .studio-wrap .intro h1 {
		font-size: 48px;
		line-height: 48px;
		margin-bottom: 0
	}
}

body.non-tech.studio .project-content .studio-next {
	width: 600px;
	max-width: 100%;
	position: absolute;
	border-bottom: 1px solid #2e3134;
	border-top: 1px solid #2e3134;
	top: 50%;
	margin-top: -50px;
	left: 100%;
	z-index: 1;
	padding-left: 40px;
	overflow: hidden
}

body.non-tech.studio .project-content .studio-next small {
	font-weight: bold;
	font-size: 11px;
	text-transform: uppercase;
	margin-bottom: -20px;
	margin-top: 10px;
	margin-left: 2px;
	display: block;
	color: #d49d81
}

body.non-tech.studio .project-content .studio-next h4 {
	font-family: "Teko", sans-serif;
	text-transform: uppercase;
	font-size: 60px;
	font-weight: 500;
	margin: 30px 0
}

body.non-tech.studio .project-content .studio-next .button {
	transition: all 500ms cubic-bezier(0.47, 0, 0.745, 0.715);
	width: 40px;
	height: 40px;
	position: absolute;
	right: 30px;
	border: 1px solid #2e3134;
	top: 50%;
	transform: translateY(-50%)
}

body.non-tech.studio .project-content .studio-next .button::after {
	content: "";
	border-left: solid 3px #dddae1;
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translateX(-50%) translateY(-50%);
	border-right: solid 3px transparent;
	border-top: solid 3px transparent;
	border-bottom: solid 3px transparent;
	height: 6px;
	width: 6px;
	display: block
}

body.non-tech.studio .project-content .studio-next .progress {
	background-color: #d49d81;
	width: 0%;
	height: 1px;
	position: absolute;
	bottom: 0;
	left: 100%
}

body.non-tech.studio .project-content .studio-next.complete .button {
	border: 1px solid #d49d81
}

@media (max-width: 600px) {
	body.non-tech.studio .project-content .studio-next small {
		margin-bottom: -18px
	}
	body.non-tech.studio .project-content .studio-next h4 {
		font-size: 40px;
		margin: 20px 0
	}
}

body.non-tech.studio .project-details {
	list-style: none;
	display: flex;
	padding: 0;
	padding-left: 2px;
	margin: 0
}

body.non-tech.studio .project-details li {
	opacity: 1;
	margin-bottom: 10px;
	position: relative;
	margin-right: 20px;
	font-family: "Teko", sans-serif;
	text-transform: uppercase;
	font-size: 18px;
	color: #dddae1
}

body.non-tech.studio .project-details li:last-of-type {
	margin-right: 0
}

body.non-tech.studio .project-details small {
	color: #d49d81;
	font-family: "Rubik", sans-serif;
	font-size: 10px;
	font-weight: 600;
	margin-bottom: -2px;
	display: block
}

@media (max-width: 1250px) {
	body.non-tech.studio .project-details {
		text-align: center;
		justify-content: center
	}
}

body.non-tech.studio .circles {
	position: absolute;
	z-index: 1;
	width: 100%;
	height: 100%
}

body.non-tech.studio .circles .circle-trail {
	stroke: #dddae1;
	position: absolute;
	height: 550px;
	width: 550px;
	overflow: visible;
	border-radius: 50%;
	stroke-linecap: round;
	stroke-width: 1px;
	opacity: 0;
	stroke-dasharray: 0.2, 10.268;
	left: 50%;
	top: 50%;
	transform: translateY(-50%) translateX(-50%)
}

@media (max-width: 600px) {
	body.non-tech.studio .circles .circle-trail {
		height: 280px;
		width: 280px
	}
}

body.non-tech.studio .circles .circle-progress {
	stroke: #d49d81;
	position: absolute;
	height: 550px;
	width: 550px;
	border-radius: 50%;
	overflow: visible;
	transform-origin: center;
	stroke-width: 1.5px;
	stroke-linecap: round;
	stroke-dasharray: 629;
	stroke-dashoffset: 629;
	left: 50%;
	opacity: 0;
	top: 50%;
	transform: translateY(-50%) translateX(-50%) rotate(270deg)
}

@media (max-width: 600px) {
	body.non-tech.studio .circles .circle-progress {
		height: 280px;
		width: 280px
	}
}

body.non-tech.studio .circles .circle-progress-bullets {
	height: 550px;
	width: 550px;
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translateY(-50%) translateX(-50%)
}

@media (max-width: 600px) {
	body.non-tech.studio .circles .circle-progress-bullets {
		height: 280px;
		width: 280px
	}
}

body.non-tech.studio .circles .circle-progress-bullets .bullet {
	width: 12px;
	height: 100%;
	display: block;
	position: absolute;
	left: 50%;
	margin-left: -6px
}

body.non-tech.studio .circles .circle-progress-bullets .bullet span {
	transition: border 500ms cubic-bezier(0.47, 0, 0.745, 0.715);
	border: 3px solid #d49d81;
	background-color: #1d1f21;
	content: "";
	height: 12px;
	opacity: 0;
	width: 12px;
	display: block;
	border-radius: 50%;
	margin-top: -6px;
	transform: scale(0)
}

body.non-tech.studio .circles .circle-progress-bullets .bullet-project {
	position: absolute;
	height: 100%;
	width: 20px;
	left: 50%;
	margin-left: -10px
}

body.non-tech.studio .circles .circle-progress-bullets .bullet-project span {
	transition: background-color 500ms cubic-bezier(0.47, 0, 0.745, 0.715);
	border: 2px solid #2e3134;
	background-color: #1d1f21;
	height: 20px;
	width: 20px;
	display: block;
	border-radius: 50%;
	margin-top: -10px;
	transform: scale(0)
}

body.non-tech.studio .layout {
	position: absolute;
	width: 100%;
	height: 100%
}

body.non-tech.studio .layout .gameboy {
	position: absolute;
	z-index: 100000;
	top: 20px;
	left: 50%
}

body.non-tech.studio .transition {
	position: absolute;
	height: 100%;
	width: 100%;
	overflow: hidden;
	background-color: #f3f2ef;
	opacity: 0;
	visibility: hidden
}

body.non-tech.studio .project {
	left: 50%;
	position: absolute;
	top: 50%;
	width: 50%;
	opacity: 0;
	visibility: hidden;
	padding-left: 120px;
	transform: translateY(-50%)
}

body.non-tech.studio .project h1 {
	color: #dddae1;
	font-family: "Teko", sans-serif;
	font-size: 72px;
	line-height: 60px;
	font-weight: 400;
	margin: 0 0 30px;
	white-space: nowrap;
	perspective: 400px;
	text-transform: uppercase
}

body.non-tech.studio .project h1>span {
	display: block
}

body.non-tech.studio .project h1>span span {
	display: inline-block;
	position: relative;
	transform-origin: top left
}

@media (max-width: 1250px) {
	body.non-tech.studio .project {
		left: 0;
		width: 100%;
		top: auto;
		bottom: 0;
		padding: 0 20px 100px;
		transform: none
	}
	body.non-tech.studio .project h1 {
		font-size: 72px;
		text-align: center
	}
	body.non-tech.studio .project h1 div {
		display: inline-block
	}
}

@media (max-width: 600px) {
	body.non-tech.studio .project {
		top: auto;
		bottom: 0;
		padding: 0 20px 100px
	}
	body.non-tech.studio .project h1 {
		font-size: 48px;
		line-height: 48px;
		margin-bottom: 0
	}
}

@media (max-height: 500px) {
	body.non-tech.studio .project {
		padding-left: 150px;
		padding-right: 150px;
		padding-bottom: 0;
		bottom: 50%;
		transform: translateY(50%)
	}
	body.non-tech.studio .project h1 {
		text-align: center;
		display: flex;
		justify-content: center;
		font-size: 36px;
		line-height: 36px;
		margin-bottom: 20px
	}
	body.non-tech.studio .project h1>span {
		display: inline-block;
		margin-right: 7px
	}
	body.non-tech.studio .project h1>span:last-of-type {
		margin-right: 0
	}
}

@media (max-width: 600px) {
	body.non-tech.studio.studio .line-aux,
	body.non-tech.studio.about .line-aux {
		opacity: 0 !important;
		visibility: hidden !important
	}
}

@media (max-width: 1250px) {
	body.non-tech.studio.about .line {
		opacity: 0
	}
}

@media (max-width: 600px) {
	body.non-tech.studio.menu .project-link {
		transform: scale(0.8)
	}
}

body.simon-cuchillerias {
	transition: all 500ms cubic-bezier(0.47, 0, 0.745, 0.715);
	background: #1f1e1b;
	color: #fdfdfd;
	margin: 0;
	overflow: hidden;
	font-family: "Rubik", sans-serif;
	font-size: 14px;
	line-height: 20px
}

body.simon-cuchillerias a {
	transition: color 300ms cubic-bezier(0.47, 0, 0.745, 0.715);
	color: #403833;
	text-decoration: none;
	display: inline-block
}

body.simon-cuchillerias a.fractured>span {
	display: inline-block
}

body.simon-cuchillerias a.fractured>span span {
	display: inline-block;
	font-family: "Rubik", sans-serif;
	line-height: 20px;
	text-transform: none
}

body.simon-cuchillerias a:hover {
	color: #745339
}

body.simon-cuchillerias .gradient {
	position: absolute;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
	opacity: 0.8
}

body.simon-cuchillerias .gradient stop {
	transition: all 500ms cubic-bezier(0.47, 0, 0.745, 0.715);
	stop-color: #8e7a55
}

body.simon-cuchillerias .gradient stop:last-of-type {
	stop-color: #e6aa61
}

body.simon-cuchillerias .circle-transition {
	position: absolute;
	height: 0;
	width: 0;
	border-radius: 50%;
	transform: translateX(-50%) translateY(-50%);
	left: 50%;
	top: 50%
}

body.simon-cuchillerias .logo {
	width: 250px;
	position: fixed;
	opacity: 1;
	z-index: 2;
	left: 80px;
	top: 60px;
	color: #403833;
	cursor: pointer
}

body.simon-cuchillerias .logo.revert {
	color: #a76d3f
}

body.simon-cuchillerias .logo.revert svg {
	fill: #a76d3f
}

@media (max-width: 1250px) {
	body.simon-cuchillerias .logo {
		left: 50px;
		top: 40px
	}
}

@media (max-width: 600px) {
	body.simon-cuchillerias .logo {
		left: 20px;
		top: 20px
	}
}

body.simon-cuchillerias .logo h2 {
	transition: color 500ms cubic-bezier(0.47, 0, 0.745, 0.715);
	font-size: 18px;
	font-weight: 400;
	line-height: normal;
	margin: 8px 0 0;
	display: block
}

body.simon-cuchillerias .logo h3 {
	transition: color 500ms cubic-bezier(0.47, 0, 0.745, 0.715);
	font-size: 11px;
	text-transform: uppercase;
	font-weight: 700;
	margin: 0;
	letter-spacing: 0.45px;
	display: none
}

body.simon-cuchillerias .logo svg {
	transition: all 500ms cubic-bezier(0.47, 0, 0.745, 0.715);
	fill: #403833;
	float: left;
	margin-right: 15px
}

@media (max-width: 600px) {
	body.simon-cuchillerias .logo h2,
	body.simon-cuchillerias .logo h3 {
		display: none
	}
}

@media (max-height: 500px) {
	body.simon-cuchillerias .logo h2,
	body.simon-cuchillerias .logo h3 {
		display: none
	}
}

body.simon-cuchillerias .mobile-menu {
	transition: fill 500ms cubic-bezier(0.47, 0, 0.745, 0.715);
	position: absolute;
	bottom: 33px;
	fill: #403833;
	left: 20px;
	z-index: 2;
	cursor: pointer;
	opacity: 0;
	visibility: hidden;
	display: none
}

@media (max-width: 600px) {
	body.simon-cuchillerias .mobile-menu {
		display: block
	}
}

body.simon-cuchillerias .menu-top {
	position: fixed;
	right: 80px;
	z-index: 10;
	top: 70px
}

@media (max-width: 1250px) {
	body.simon-cuchillerias .menu-top {
		right: 50px;
		top: 50px
	}
}

@media (max-width: 600px) {
	body.simon-cuchillerias .menu-top {
		right: 20px;
		top: 30px
	}
}

body.simon-cuchillerias .menu-top a {
	padding: 20px;
	padding-right: 0;
	margin-top: -20px;
	opacity: 0;
	visibility: hidden;
	transform: translateY(-10px)
}

body.simon-cuchillerias .menu-top a span {
	display: inline-block
}

body.simon-cuchillerias .mouse-track {
	pointer-events: none;
	position: absolute;
	z-index: 1000;
	opacity: 0
}

body.simon-cuchillerias .mouse-track .outer-circle {
	stroke: #403833;
	transform: translateX(-50%) translateY(-50%) rotate(-90deg);
	stroke-width: 2px;
	fill: none;
	height: 18px;
	width: 18px;
	overflow: visible;
	position: absolute
}

body.simon-cuchillerias .mouse-track .outer-circle .countdown {
	opacity: 0;
	stroke: #a76d3f;
	position: absolute;
	stroke-dashoffset: 125px;
	stroke-dasharray: 125px;
	stroke-width: 4px
}

body.simon-cuchillerias .mouse-track .inner-circle {
	stroke: #403833;
	transform: translateX(-50%) translateY(-50%);
	stroke-width: 2px;
	fill: none;
	height: 2px;
	width: 2px;
	opacity: 0.6;
	overflow: visible;
	position: absolute
}

body.simon-cuchillerias .mouse-track .arrow-right {
	stroke: #a76d3f;
	opacity: 0;
	visibility: hidden;
	stroke-width: 2px;
	transform: rotate(180deg);
	margin-left: 10px;
	margin-top: -7px;
	position: absolute
}

body.simon-cuchillerias .mouse-track .arrow-left {
	stroke: #a76d3f;
	opacity: 0;
	margin-left: -20px;
	margin-top: -6px;
	visibility: hidden;
	stroke-width: 2px;
	position: absolute
}

body.simon-cuchillerias .mouse-track .play {
	fill: #403833;
	opacity: 1;
	margin-top: -6px;
	stroke-width: 2px;
	margin-top: -18px;
	margin-left: -14px;
	transform: scale(0);
	position: absolute
}

body.simon-cuchillerias .mouse-track .stop {
	fill: #403833;
	height: 38px;
	width: 38px;
	margin-left: -19px;
	margin-top: -19px;
	transform: scale(0);
	position: absolute
}

@media (max-width: 600px) {
	body.simon-cuchillerias .mouse-track {
		opacity: 0 !important;
		visibility: hidden !important
	}
}

body.simon-cuchillerias .about-page {
	position: absolute;
	height: 100%;
	width: 100%;
	padding: 40px;
	left: 0;
	opacity: 1;
	top: 0;
	display: flex;
	flex-direction: row;
	visibility: hidden;
	align-items: stretch
}

@media (max-width: 1250px) {
	body.simon-cuchillerias .about-page {
		padding: 20px
	}
}

@media (max-width: 600px) {
	body.simon-cuchillerias .about-page {
		flex-direction: column;
		padding: 0
	}
}

body.simon-cuchillerias .about-page.active .neon-sign {
	animation: flicker 10s infinite
}

body.simon-cuchillerias .about-page.active .split-left::before {
	width: 100%;
	bottom: 0
}

body.simon-cuchillerias .about-page.active .split-left.shaded::after {
	opacity: 1
}

body.simon-cuchillerias .about-page .split-left {
	opacity: 0;
	visibility: hidden;
	overflow: hidden
}

body.simon-cuchillerias .about-page .split-left.shaded::after {
	content: "Swipe or Scroll and click image to know more";
	padding-right: 20px;
	line-height: 100px;
	color: #c6bca9;
	text-align: right;
	position: absolute;
	bottom: 0;
	width: 100%;
	opacity: 0;
	transition: all 500ms cubic-bezier(0.47, 0, 0.745, 0.715);
	transition-delay: 1;
	height: 100px;
	background-color: red;
	background: linear-gradient(transparent, #14141a 50%);
	pointer-events: none
}

body.simon-cuchillerias .about-page .split-left::before {
	transition: all 500ms cubic-bezier(0.47, 0, 0.745, 0.715);
	content: "";
	position: absolute;
	width: 0%;
	height: 100%;
	left: 0;
	background-color: #14141a;
	z-index: -1;
	bottom: 0
}

body.simon-cuchillerias .about-page>* {
	position: relative;
	z-index: 1;
	flex: 0 0 50%;
	display: flex;
	align-items: center
}

body.simon-cuchillerias .about-page .gradient-about {
	background-color: red;
	position: absolute;
	width: 100%;
	height: 100%;
	z-index: 1;
	top: 0;
	left: 0;
	-webkit-mask-image: url("../smoke-sprite.png");
	-webkit-mask-size: 3000% 100%;
	-webkit-mask-position-x: 0%;
	animation-iteration-count: 1;
	animation-delay: 1s
}

body.simon-cuchillerias .about-page .gradient-about.active {
	animation: mask 1.5s steps(29) forwards
}

body.simon-cuchillerias .about-page .gradient-about stop {
	transition: all 500ms cubic-bezier(0.47, 0, 0.745, 0.715);
	stop-color: #292038
}

body.simon-cuchillerias .about-page .gradient-about stop:last-of-type {
	stop-color: #18181d
}

@media (max-width: 600px) {
	body.simon-cuchillerias .about-page .gradient-about stop {
		transition: all 500ms cubic-bezier(0.47, 0, 0.745, 0.715);
		stop-color: #18181d
	}
	body.simon-cuchillerias .about-page .gradient-about stop:last-of-type {
		stop-color: #18181d
	}
}

body.simon-cuchillerias .about-page .about-text {
	position: absolute;
	padding: 120px;
	padding-right: 240px
}

body.simon-cuchillerias .about-page .about-text h1 {
	color: #a76d3f;
	white-space: nowrap;
	font-weight: 500;
	display: block;
	font-family: "Teko", sans-serif;
	text-transform: uppercase;
	font-size: 40px;
	line-height: 40px;
	margin-top: 10px;
	margin-bottom: 40px
}

@media (max-width: 600px) {
	body.simon-cuchillerias .about-page .about-text h1 {
		font-size: 28px;
		line-height: 28px;
		margin: 0 0 20px
	}
}

body.simon-cuchillerias .about-page .about-text h1>span {
	display: block
}

body.simon-cuchillerias .about-page .about-text h1>span span {
	display: inline-block
}

body.simon-cuchillerias .about-page .about-text p {
	opacity: 0;
	font-size: 16px;
	line-height: 32px
}

@media (max-width: 600px) {
	body.simon-cuchillerias .about-page .about-text p {
		line-height: 24px
	}
}

@media (max-width: 1250px) {
	body.simon-cuchillerias .about-page .about-text {
		padding-left: 40px;
		padding-right: 40px
	}
}

@media (max-width: 600px) {
	body.simon-cuchillerias .about-page .about-text {
		padding-left: 20px;
		padding-right: 20px
	}
}

body.simon-cuchillerias .about-page .about-render {
	position: absolute;
	visibility: hidden;
	top: 0%;
	opacity: 0;
	right: 0;
	width: 140%;
	height: 100%;
	transform: translateY(0) scale(1);
	z-index: 1;
	pointer-events: none
}

@media (max-width: 1250px) {
	body.simon-cuchillerias .about-page .about-render {
		width: 100%
	}
}

@media (max-width: 600px) {
	body.simon-cuchillerias .about-page .about-render {
		width: 100%
	}
}

body.simon-cuchillerias .about-page .about-render canvas {
	position: absolute;
	transform: translateY(-50%);
	top: 50%
}

body.simon-cuchillerias .about-page .neon-sign {
	opacity: 0;
	height: 570px;
	width: 140%;
	position: absolute;
	text-transform: uppercase;
	font-size: 46px;
	color: #ff0054;
	right: 260px;
	top: -30px;
	transform: scale(0.5) perspective(900px) translateZ(-300px) rotateY(-10deg) rotateX(0deg) rotateZ(0deg) skewY(9deg);
	filter: blur(2px) brightness(2)
}

body.simon-cuchillerias .about-page .neon-sign::before {
	content: "";
	width: 410px;
	height: 100%;
	position: absolute;
	left: 100%
}

@media (max-width: 1250px) {
	body.simon-cuchillerias .about-page .neon-sign {
		display: none
	}
}

@media (max-width: 600px) {
	body.simon-cuchillerias .about-page .neon-sign {
		display: none
	}
}

body.simon-cuchillerias .about-page .neon-sign::after {
	content: "";
	border: 6px solid #ff0054;
	width: 210px;
	height: 100%;
	position: absolute;
	right: 0
}

body.simon-cuchillerias .about-page .neon-sign.var-1 {
	transform: scale(0.7) perspective(900px) rotateY(-8deg) rotateX(0deg) rotateZ(0deg) skewY(9deg) translateX(150px)
}

body.simon-cuchillerias .about-page .neon-sign.var-2 {
	transform: scale(0.7) perspective(900px) rotateY(-6deg) rotateX(0deg) rotateZ(0deg) skewY(6deg) translateY(6px) translateX(140px)
}

body.simon-cuchillerias .about-page .neon-sign>* {
	position: absolute
}

body.simon-cuchillerias .about-page .neon-sign .code {
	top: 40px;
	right: 42px;
	animation: flicker 5s infinite
}

body.simon-cuchillerias .about-page .neon-sign .and {
	top: 94px;
	color: #00e4ff;
	font-size: 80px;
	right: 70px
}

body.simon-cuchillerias .about-page .neon-sign .design {
	top: 145px;
	right: 19px
}

body.simon-cuchillerias .about-page .neon-sign .key {
	animation: fade 2s steps(1) infinite;
	animation-direction: reverse;
	bottom: 45px;
	right: 53px
}

body.simon-cuchillerias .about-page .neon-sign .key-pressed {
	animation: fade 2s steps(1) infinite;
	animation-direction: normal;
	bottom: 40px;
	right: 19px
}

body.simon-cuchillerias .about-page .neon-sign .hand {
	animation: hand 2s steps(1) infinite;
	right: 30px;
	bottom: 100px
}

body.simon-cuchillerias .about-page .neon-sign .key-base {
	bottom: 20px;
	right: 45px
}

body.simon-cuchillerias .introduction {
	position: absolute;
	background-color: #8e7a55;
	height: 100%;
	width: 100%;
	top: 0;
	left: 0;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center
}

body.simon-cuchillerias .introduction .skip {
	padding: 30px;
	position: absolute;
	bottom: 50px;
	font-size: 16px;
	color: #fdfdfd;
	cursor: pointer
}

body.simon-cuchillerias .intro-text {
	transition: color 500ms cubic-bezier(0.47, 0, 0.745, 0.715);
	position: absolute;
	bottom: 50%;
	z-index: 1;
	width: 100%;
	padding: 0 10px;
	text-align: center;
	font-size: 24px;
	color: #403833
}

body.simon-cuchillerias .intro-text.tutorial {
	font-size: 16px;
	bottom: 70px
}

body.simon-cuchillerias .intro-text span {
	display: inline-block
}

@media (max-width: 1250px) {
	body.simon-cuchillerias .intro-text.tutorial {
		bottom: 40px
	}
}

@media (max-width: 600px) {
	body.simon-cuchillerias .intro-text {
		font-size: 16px
	}
	body.simon-cuchillerias .intro-text.tutorial {
		bottom: auto;
		top: 140px
	}
}

body.simon-cuchillerias .discover {
	opacity: 0;
	visibility: hidden;
	color: #a76d3f;
	position: absolute;
	bottom: 0;
	right: 0;
	height: 160px;
	width: 240px;
	z-index: 100;
	cursor: pointer
}

body.simon-cuchillerias .discover .open>span {
	position: absolute;
	height: 14px;
	width: 7px;
	bottom: 65px;
	right: 80px;
	transform: translateX(-80px)
}

body.simon-cuchillerias .discover .open>span::before {
	transition: all 300ms cubic-bezier(0.47, 0, 0.745, 0.715);
	transition-property: background-color, transform, opacity;
	transition-delay: 0s, 0.8s, 0.8s;
	content: "";
	position: absolute;
	border-radius: 10px 10px 20px 0;
	height: 8px;
	transform-origin: top left;
	width: 1.5px;
	background-color: #a76d3f;
	transform: rotate(-45deg) scaleY(4);
	opacity: 0
}

body.simon-cuchillerias .discover .open>span::after {
	transition: all 300ms cubic-bezier(0.47, 0, 0.745, 0.715);
	transition-property: background-color, transform, opacity;
	transition-delay: 0s, 1.1s, 1.1s;
	content: "";
	position: absolute;
	border-radius: 0 20px 10px 10px;
	height: 8px;
	transform-origin: bottom left;
	margin-top: 1px;
	width: 1.5px;
	background-color: #a76d3f;
	transform: rotate(45deg) scaleY(4);
	opacity: 0
}

body.simon-cuchillerias .discover .open.active>span::before {
	transform: rotate(-45deg) scaleY(1);
	opacity: 1;
	transition-delay: 0
}

body.simon-cuchillerias .discover .open.active>span::after {
	transform: rotate(45deg) scaleY(1);
	opacity: 1;
	transition-delay: 0
}

body.simon-cuchillerias .discover .close>span {
	position: absolute;
	height: 17px;
	width: 7px;
	bottom: 65px;
	right: 80px;
	transform: translateX(-57px)
}

body.simon-cuchillerias .discover .close>span::before {
	transition: all 300ms cubic-bezier(0.47, 0, 0.745, 0.715);
	transition-delay: 1.1s;
	content: "";
	position: absolute;
	border-radius: 5px;
	height: 15px;
	width: 2px;
	margin-left: -5px;
	margin-top: 1px;
	background-color: #a76d3f;
	transform-origin: top;
	transform: rotate(-45deg) scaleY(0)
}

body.simon-cuchillerias .discover .close>span::after {
	transition: all 300ms cubic-bezier(0.47, 0, 0.745, 0.715);
	transition-delay: 0.8s;
	content: "";
	position: absolute;
	border-radius: 5px;
	height: 15px;
	width: 2px;
	background-color: #a76d3f;
	transform-origin: bottom;
	margin-left: -5px;
	margin-top: -3px;
	transform: rotate(45deg) scaleY(0)
}

body.simon-cuchillerias .discover .close.active>span::before {
	transform: rotate(-45deg) scaleY(1);
	transition-delay: 0
}

body.simon-cuchillerias .discover .close.active>span::after {
	transform: rotate(45deg) scaleY(1);
	transition-delay: 0
}

body.simon-cuchillerias .discover .open,
body.simon-cuchillerias .discover .close {
	transition: all 300ms cubic-bezier(0.47, 0, 0.745, 0.715);
	height: 100%;
	position: absolute;
	width: 100%;
	left: 0;
	top: 0;
	opacity: 0
}

body.simon-cuchillerias .discover .open.active,
body.simon-cuchillerias .discover .close.active {
	opacity: 1
}

body.simon-cuchillerias .discover .open a span,
body.simon-cuchillerias .discover .close a span {
	transform: translateX(5px) translateY(5px);
	opacity: 0
}

body.simon-cuchillerias .discover .open.active a span,
body.simon-cuchillerias .discover .close.active a span {
	transform: translateX(0px) translateY(0px);
	opacity: 1
}

body.simon-cuchillerias .discover:hover {
	height: 200px;
	width: 300px
}

body.simon-cuchillerias .discover:hover a {
	color: #403833
}

body.simon-cuchillerias .discover:hover svg {
	stroke: #fdfdfd
}

body.simon-cuchillerias .discover>div>a {
	position: absolute;
	right: 80px;
	bottom: 65px
}

body.simon-cuchillerias .discover a span {
	position: relative;
	display: inline-block
}

@media (max-width: 1250px) {
	body.simon-cuchillerias .discover {
		height: 100px;
		width: 170px
	}
}

@media (max-width: 600px) {
	body.simon-cuchillerias .discover {
		height: 70px;
		width: 120px;
		z-index: 2
	}
	body.simon-cuchillerias .discover:hover {
		width: 100%;
		height: 90px
	}
}

body.simon-cuchillerias .line-aux {
	width: 45px;
	position: fixed;
	opacity: 1;
	height: 100px;
	left: 82px;
	bottom: 110px;
	z-index: 3;
	opacity: 0;
	visibility: hidden
}

@media (max-width: 1250px) {
	body.simon-cuchillerias .line-aux {
		left: 50px;
		bottom: 90px
	}
}

@media (max-width: 600px) {
	body.simon-cuchillerias .line-aux {
		left: 20px;
		bottom: 73px;
		visibility: hidden !important;
		opacity: 0 !important
	}
}

body.simon-cuchillerias .line-aux::after {
	transition: background-color 500ms cubic-bezier(0.47, 0, 0.745, 0.715);
	content: "";
	background-color: #c5a374;
	width: 2px;
	height: 10px;
	margin-left: -1px;
	left: 50%;
	bottom: -65px;
	position: absolute
}

body.simon-cuchillerias .line-aux .line {
	transition: background-color 500ms cubic-bezier(0.47, 0, 0.745, 0.715);
	width: 2px;
	background-color: #c5a374;
	height: 0;
	margin-left: -1px;
	left: 50%;
	margin-bottom: 10px;
	position: relative
}

@media (max-width: 600px) {
	body.simon-cuchillerias .line-aux .line {
		display: none
	}
}

@media (max-height: 500px) {
	body.simon-cuchillerias .line-aux .line {
		display: none
	}
}

body.simon-cuchillerias .line-aux .counter {
	transition: all 500ms cubic-bezier(0.47, 0, 0.745, 0.715);
	text-transform: uppercase;
	font-family: "Teko", sans-serif;
	font-weight: 500;
	font-size: 18px;
	color: #403833;
	height: 50px;
	width: 100px;
	overflow: hidden;
	text-align: center;
	position: absolute;
	bottom: -50px;
	left: -27px
}

body.simon-cuchillerias .line-aux .counter .page {
	transition: color 500ms cubic-bezier(0.47, 0, 0.745, 0.715);
	position: absolute;
	right: 50%;
	margin-right: 7px;
	bottom: 20px;
	margin-bottom: 45px;
	text-align: right
}

body.simon-cuchillerias .line-aux .counter .divider {
	transition: color 500ms cubic-bezier(0.47, 0, 0.745, 0.715);
	position: absolute;
	left: 50%;
	color: #a76d3f;
	bottom: 12px;
	transform: translateX(-50%);
	margin-bottom: 45px
}

body.simon-cuchillerias .line-aux .counter .total {
	transition: color 500ms cubic-bezier(0.47, 0, 0.745, 0.715);
	left: 50%;
	margin-left: 7px;
	position: absolute;
	bottom: 5px;
	margin-bottom: 45px
}

body.simon-cuchillerias .scroll-position {
	width: 100%;
	position: absolute;
	bottom: 0;
	height: 2px;
	opacity: 0;
	z-index: 2;
	visibility: hidden
}

body.simon-cuchillerias .scroll-position span {
	position: relative;
	display: block;
	width: 50%;
	background-color: #a76d3f;
	height: 100%
}

body.simon-cuchillerias .line-scroll {
	position: absolute;
	z-index: 2;
	opacity: 0;
	visibility: hidden;
	height: 45px;
	width: 140px;
	left: 500px;
	bottom: 40px;
	overflow: hidden
}

body.simon-cuchillerias .line-scroll>span {
	position: absolute;
	content: "";
	background-color: #a76d3f;
	width: 50%;
	bottom: 0px;
	top: auto !important;
	height: 2px !important;
	z-index: 1;
	animation-name: example;
	animation-duration: 4s;
	animation-iteration-count: infinite
}

body.simon-cuchillerias .line-scroll::after {
	content: "->";
	position: absolute;
	color: #a76d3f;
	margin-left: 15px
}

@media (max-width: 1250px) {
	body.simon-cuchillerias .line-scroll {
		left: 480px;
		bottom: 20px
	}
}

@media (max-width: 600px) {
	body.simon-cuchillerias .line-scroll {
		left: 20px;
		bottom: 20px;
		height: 35px
	}
}

body.simon-cuchillerias .fireworks-plane {
	width: 600px;
	height: 600px;
	left: 340px;
	position: absolute;
	opacity: 0;
	top: 50%;
	transform: translateX(-50%) translateY(-50%) rotateY(180deg);
	perspective: 500px;
	z-index: 1
}

@media (max-width: 1250px) {
	body.simon-cuchillerias .fireworks-plane {
		transform: translateX(-50%) translateY(-50%) rotateY(180deg) scale(0.6)
	}
}

@media (max-width: 600px) {
	body.simon-cuchillerias .fireworks-plane {
		transform: translateX(-50%) translateY(-50%) rotateY(180deg) scale(0.4);
		left: 50%
	}
}

body.simon-cuchillerias .firework-1 {
	position: absolute;
	top: 280px;
	left: 50px;
	overflow: visible;
	stroke: #a76d3f;
	stroke-width: 10px;
	stroke-dashoffset: -358;
	transform: rotateX(40deg);
	stroke-dasharray: 0, 10000;
	stroke-linecap: round
}

body.simon-cuchillerias .firework-1:nth-of-type(2) {
	top: 230px;
	transform: rotateZ(20deg) rotateX(40deg)
}

body.simon-cuchillerias .firework-2>span {
	height: 100px;
	width: 4px;
	position: absolute;
	left: 190px;
	transform-origin: bottom;
	top: 145px
}

body.simon-cuchillerias .firework-2>span span {
	content: "";
	height: 0;
	background-color: #a76d3f;
	bottom: 0;
	width: 100%;
	position: absolute;
	border-radius: 2px
}

body.simon-cuchillerias .firework-2>span:nth-of-type(1) {
	transform: rotate(60deg)
}

body.simon-cuchillerias .firework-2>span:nth-of-type(2) {
	transform: rotate(120deg)
}

body.simon-cuchillerias .firework-2>span:nth-of-type(3) {
	transform: rotate(180deg)
}

body.simon-cuchillerias .firework-2>span:nth-of-type(4) {
	transform: rotate(240deg)
}

body.simon-cuchillerias .firework-2>span:nth-of-type(5) {
	transform: rotate(300deg)
}

body.simon-cuchillerias .firework-2>span:nth-of-type(6) {
	transform: rotate(360deg)
}

body.simon-cuchillerias .models {
	height: 100%;
	width: 100%;
	position: absolute;
	overflow: hidden;
	left: 0;
	top: 0;
	z-index: 1
}

body.simon-cuchillerias .models .project-link>* {
	position: absolute
}

body.simon-cuchillerias .models .project-link {
	position: absolute;
	height: 100%;
	opacity: 0;
	visibility: hidden;
	width: 100%;
	transform: perspective(1400px)
}

body.simon-cuchillerias .models .project-link.tech span {
	color: #5bf46d
}

body.simon-cuchillerias .models .project-link.tech span {
	color: #ff9273
}

body.simon-cuchillerias .models .project-link.non-tech span {
	color: #a07f5e
}

body.simon-cuchillerias .models .project-link.simon-cuchillerias span {
	color: #f7ce3c
}

body.simon-cuchillerias .models .project-link.guild-storm span {
	color: #f76565
}

@media (max-width: 600px) {
	body.simon-cuchillerias .models .project-link {
		transform: scale(0.5)
	}
}

body.simon-cuchillerias .models canvas {
	top: 0;
	z-index: 1
}

body.simon-cuchillerias .models .frame {
	stroke: rgba(253, 253, 253, 0.03);
	stroke-width: 85px;
	height: 600px;
	width: 600px;
	margin: 0;
	padding: 25px;
	border-radius: 50%
}

body.simon-cuchillerias .models h2 {
	top: 50%;
	left: 400px;
	opacity: 0;
	margin-top: -62px;
	font-size: 24px;
	font-weight: 400;
	white-space: nowrap;
	height: 24px
}

body.simon-cuchillerias .models small {
	top: 50%;
	left: 400px;
	margin-top: 25px;
	opacity: 0;
	text-transform: uppercase;
	white-space: nowrap
}

body.simon-cuchillerias .models span {
	top: 50%;
	font-family: "Teko", sans-serif;
	font-size: 18px;
	position: absolute;
	height: 0;
	overflow: hidden;
	margin-top: -45px;
	left: 400px
}

body.simon-cuchillerias .projects {
	position: absolute;
	width: 100%;
	height: 100%;
	z-index: 1
}

body.simon-cuchillerias .project-content {
	position: relative;
	z-index: 1
}

body.simon-cuchillerias .project-content .studio-wrap {
	height: 100%
}

body.simon-cuchillerias .project-content .studio-wrap .scene {
	height: 100%;
	width: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	position: absolute;
	transform: translateX(100%);
	top: 50%
}

body.simon-cuchillerias .project-content .studio-wrap .scene .image {
	padding: 40px;
	display: flex;
	align-items: center;
	align-self: stretch;
	justify-content: center
}

body.simon-cuchillerias .project-content .studio-wrap .scene .video {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 40px;
	position: relative
}

body.simon-cuchillerias .project-content .studio-wrap .scene .video .video-wrap {
	position: absolute;
	width: 100%;
	height: 100%;
	padding: 40px;
	pointer-events: none;
	z-index: 1
}

@media (max-width: 600px) {
	body.simon-cuchillerias .project-content .studio-wrap .scene .video::before {
		content: "";
		position: absolute;
		width: 30%;
		padding-top: 30%;
		border-radius: 50%;
		border: 2px solid #a76d3f
	}
	body.simon-cuchillerias .project-content .studio-wrap .scene .video::after {
		content: "";
		position: absolute;
		left: 50%;
		margin-left: -15px;
		border-left: 33px solid #403833;
		border-top: 20px solid transparent;
		border-right: 20px solid transparent;
		border-bottom: 20px solid transparent
	}
}

body.simon-cuchillerias .project-content .studio-wrap .scene img {
	max-height: 100%;
	max-width: 100%
}

body.simon-cuchillerias .project-content .studio-wrap .scene .fractured {
	padding: 0
}

body.simon-cuchillerias .project-content .studio-wrap .scene h2 {
	font-weight: 500;
	display: block;
	font-family: "Teko", sans-serif;
	text-transform: uppercase;
	font-size: 40px;
	line-height: 40px;
	margin-top: 10px;
	margin-bottom: 40px
}

body.simon-cuchillerias .project-content .studio-wrap .scene h2 span {
	display: inline-block
}

body.simon-cuchillerias .project-content .studio-wrap .scene .text-title {
	color: #a76d3f
}

body.simon-cuchillerias .project-content .studio-wrap .scene .text-title small {
	color: #fdfdfd;
	text-transform: uppercase;
	font-weight: bold
}

body.simon-cuchillerias .project-content .studio-wrap .scene .text-content {
	line-height: 36px;
	color: #403833;
	font-size: 14px
}

@media (max-width: 600px) {
	body.simon-cuchillerias .project-content .studio-wrap .scene .text-content {
		line-height: 24px;
		font-size: 14px
	}
}

@media (max-height: 500px) {
	body.simon-cuchillerias .project-content .studio-wrap .scene .text-content {
		line-height: 24px
	}
}

body.simon-cuchillerias .project-content .studio-wrap .scene.split {
	flex-direction: row;
	align-items: stretch;
	padding: 40px
}

body.simon-cuchillerias .project-content .studio-wrap .scene.split>div {
	position: relative;
	padding: 20px 10%;
	display: flex;
	flex: 0 0 50%;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	overflow: hidden
}

@media (max-width: 600px) {
	body.simon-cuchillerias .project-content .studio-wrap .scene.split h2 {
		font-size: 28px;
		line-height: 28px;
		margin: 0 0 10px
	}
}

@media (max-height: 500px) {
	body.simon-cuchillerias .project-content .studio-wrap .scene.split h2 {
		font-size: 28px;
		line-height: 28px;
		margin: 0 0 10px
	}
}

body.simon-cuchillerias .project-content .studio-wrap .scene.split.variant {
	position: relative;
	overflow: hidden
}

body.simon-cuchillerias .project-content .studio-wrap .scene.split.variant .split-right {
	align-items: stretch;
	padding: 20px 0;
	flex-wrap: nowrap;
	overflow: visible
}

body.simon-cuchillerias .project-content .studio-wrap .scene.split.variant .split-right>div {
	position: absolute;
	top: 40px;
	bottom: 40px
}

body.simon-cuchillerias .project-content .studio-wrap .scene.split.variant .split-right>div img {
	max-width: none;
	max-height: 100%
}

@media (max-width: 1250px) {
	body.simon-cuchillerias .project-content .studio-wrap .scene.split {
		padding: 20px
	}
	body.simon-cuchillerias .project-content .studio-wrap .scene.split>div {
		padding: 20px
	}
}

@media (max-width: 600px) {
	body.simon-cuchillerias .project-content .studio-wrap .scene.split {
		flex-direction: column;
		padding: 0
	}
	body.simon-cuchillerias .project-content .studio-wrap .scene.split>div {
		padding: 20px;
		flex: auto
	}
	body.simon-cuchillerias .project-content .studio-wrap .scene.split.variant .split-right {
		padding: 0 20px
	}
	body.simon-cuchillerias .project-content .studio-wrap .scene.split.variant .split-right>div {
		left: 20px;
		right: 20px;
		top: 0;
		bottom: 0
	}
	body.simon-cuchillerias .project-content .studio-wrap .scene.split.variant .split-right>div img {
		max-width: 100%;
		max-height: none
	}
}

@media (max-height: 500px) {
	body.simon-cuchillerias .project-content .studio-wrap .scene.split {
		flex-direction: column;
		padding: 0
	}
	body.simon-cuchillerias .project-content .studio-wrap .scene.split>div {
		padding: 20px;
		flex: auto
	}
	body.simon-cuchillerias .project-content .studio-wrap .scene.split.variant .split-right {
		padding: 0 20px
	}
	body.simon-cuchillerias .project-content .studio-wrap .scene.split.variant .split-right>div {
		left: 20px;
		right: 20px;
		top: 0;
		bottom: 0
	}
	body.simon-cuchillerias .project-content .studio-wrap .scene.split.variant .split-right>div img {
		max-width: 100%;
		max-height: none
	}
}

body.simon-cuchillerias .project-content .studio-wrap .intro {
	align-items: flex-start;
	padding-left: 550px;
	width: calc(100% - 500px);
	padding-right: 20px
}

body.simon-cuchillerias .project-content .studio-wrap .intro h1 {
	font-family: "Teko", sans-serif;
	font-weight: 500;
	font-size: 72px;
	line-height: 54px;
	text-transform: uppercase;
	padding-right: 100px;
	margin: 20px 0
}

body.simon-cuchillerias .project-content .studio-wrap .intro h1>span {
	display: block
}

body.simon-cuchillerias .project-content .studio-wrap .intro h1>span span {
	display: inline-block
}

body.simon-cuchillerias .project-content .studio-wrap .intro h1 small {
	color: #a76d3f;
	display: block;
	margin-left: -52px;
	text-align: right;
	font-size: 46px;
	font-weight: 400;
	line-height: 46px;
	width: 50px;
	margin-bottom: -46px;
	height: 46px
}

@media (max-width: 1250px) {
	body.simon-cuchillerias .project-content .studio-wrap .intro {
		bottom: 20px;
		padding: 20px 0;
		max-width: 640px;
		width: 100%;
		align-items: stretch;
		justify-content: flex-end
	}
	body.simon-cuchillerias .project-content .studio-wrap .intro>div {
		height: auto;
		padding: 0 20px 80px;
		text-align: center
	}
	body.simon-cuchillerias .project-content .studio-wrap .intro h1 {
		display: inline-block;
		width: auto;
		font-size: 48px;
		text-align: center
	}
	body.simon-cuchillerias .project-content .studio-wrap .intro h1>span {
		display: inline-block
	}
	body.simon-cuchillerias .project-content .studio-wrap .intro h1 small {
		font-size: 18px;
		line-height: 36px
	}
}

@media (max-width: 600px) {
	body.simon-cuchillerias .project-content .studio-wrap .intro>div {
		padding-bottom: 100px
	}
	body.simon-cuchillerias .project-content .studio-wrap .intro>div h1 small {
		display: none
	}
}

@media (max-width: 1400px) {
	body.simon-cuchillerias .project-content .studio-wrap .intro h1.fractured {
		font-size: 48px;
		line-height: 48px;
		padding-right: 20px
	}
	body.simon-cuchillerias .project-content .studio-wrap .intro h1.fractured small {
		font-size: 24px;
		line-height: 32px
	}
}

@media (max-height: 500px) {
	body.simon-cuchillerias .project-content .studio-wrap .intro>div {
		height: auto;
		padding: 0 20px 80px
	}
	body.simon-cuchillerias .project-content .studio-wrap .intro h1 {
		font-size: 48px;
		line-height: 48px;
		margin-bottom: 0
	}
}

body.simon-cuchillerias .project-content .studio-next {
	width: 600px;
	max-width: 100%;
	position: absolute;
	border-bottom: 1px solid #c5a374;
	border-top: 1px solid #c5a374;
	top: 50%;
	margin-top: -50px;
	left: 100%;
	z-index: 1;
	padding-left: 40px;
	overflow: hidden
}

body.simon-cuchillerias .project-content .studio-next small {
	font-weight: bold;
	font-size: 11px;
	text-transform: uppercase;
	margin-bottom: -20px;
	margin-top: 10px;
	margin-left: 2px;
	display: block;
	color: #a76d3f
}

body.simon-cuchillerias .project-content .studio-next h4 {
	font-family: "Teko", sans-serif;
	text-transform: uppercase;
	font-size: 60px;
	font-weight: 500;
	margin: 30px 0
}

body.simon-cuchillerias .project-content .studio-next .button {
	transition: all 500ms cubic-bezier(0.47, 0, 0.745, 0.715);
	width: 40px;
	height: 40px;
	position: absolute;
	right: 30px;
	border: 1px solid #c5a374;
	top: 50%;
	transform: translateY(-50%)
}

body.simon-cuchillerias .project-content .studio-next .button::after {
	content: "";
	border-left: solid 3px #403833;
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translateX(-50%) translateY(-50%);
	border-right: solid 3px transparent;
	border-top: solid 3px transparent;
	border-bottom: solid 3px transparent;
	height: 6px;
	width: 6px;
	display: block
}

body.simon-cuchillerias .project-content .studio-next .progress {
	background-color: #a76d3f;
	width: 0%;
	height: 1px;
	position: absolute;
	bottom: 0;
	left: 100%
}

body.simon-cuchillerias .project-content .studio-next.complete .button {
	border: 1px solid #a76d3f
}

@media (max-width: 600px) {
	body.simon-cuchillerias .project-content .studio-next small {
		margin-bottom: -18px
	}
	body.simon-cuchillerias .project-content .studio-next h4 {
		font-size: 40px;
		margin: 20px 0
	}
}

body.simon-cuchillerias .project-details {
	list-style: none;
	display: flex;
	padding: 0;
	padding-left: 2px;
	margin: 0
}

body.simon-cuchillerias .project-details li {
	opacity: 1;
	margin-bottom: 10px;
	position: relative;
	margin-right: 20px;
	font-family: "Teko", sans-serif;
	text-transform: uppercase;
	font-size: 18px;
	color: #403833
}

body.simon-cuchillerias .project-details li:last-of-type {
	margin-right: 0
}

body.simon-cuchillerias .project-details small {
	color: #a76d3f;
	font-family: "Rubik", sans-serif;
	font-size: 10px;
	font-weight: 600;
	margin-bottom: -2px;
	display: block
}

@media (max-width: 1250px) {
	body.simon-cuchillerias .project-details {
		text-align: center;
		justify-content: center
	}
}

body.simon-cuchillerias .circles {
	position: absolute;
	z-index: 1;
	width: 100%;
	height: 100%
}

body.simon-cuchillerias .circles .circle-trail {
	stroke: #403833;
	position: absolute;
	height: 550px;
	width: 550px;
	overflow: visible;
	border-radius: 50%;
	stroke-linecap: round;
	stroke-width: 1px;
	opacity: 0;
	stroke-dasharray: 0.2, 10.268;
	left: 50%;
	top: 50%;
	transform: translateY(-50%) translateX(-50%)
}

@media (max-width: 600px) {
	body.simon-cuchillerias .circles .circle-trail {
		height: 280px;
		width: 280px
	}
}

body.simon-cuchillerias .circles .circle-progress {
	stroke: #a76d3f;
	position: absolute;
	height: 550px;
	width: 550px;
	border-radius: 50%;
	overflow: visible;
	transform-origin: center;
	stroke-width: 1.5px;
	stroke-linecap: round;
	stroke-dasharray: 629;
	stroke-dashoffset: 629;
	left: 50%;
	opacity: 0;
	top: 50%;
	transform: translateY(-50%) translateX(-50%) rotate(270deg)
}

@media (max-width: 600px) {
	body.simon-cuchillerias .circles .circle-progress {
		height: 280px;
		width: 280px
	}
}

body.simon-cuchillerias .circles .circle-progress-bullets {
	height: 550px;
	width: 550px;
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translateY(-50%) translateX(-50%)
}

@media (max-width: 600px) {
	body.simon-cuchillerias .circles .circle-progress-bullets {
		height: 280px;
		width: 280px
	}
}

body.simon-cuchillerias .circles .circle-progress-bullets .bullet {
	width: 12px;
	height: 100%;
	display: block;
	position: absolute;
	left: 50%;
	margin-left: -6px
}

body.simon-cuchillerias .circles .circle-progress-bullets .bullet span {
	transition: border 500ms cubic-bezier(0.47, 0, 0.745, 0.715);
	border: 3px solid #a76d3f;
	background-color: #e6aa61;
	content: "";
	height: 12px;
	opacity: 0;
	width: 12px;
	display: block;
	border-radius: 50%;
	margin-top: -6px;
	transform: scale(0)
}

body.simon-cuchillerias .circles .circle-progress-bullets .bullet-project {
	position: absolute;
	height: 100%;
	width: 20px;
	left: 50%;
	margin-left: -10px
}

body.simon-cuchillerias .circles .circle-progress-bullets .bullet-project span {
	transition: background-color 500ms cubic-bezier(0.47, 0, 0.745, 0.715);
	border: 2px solid #c5a374;
	background-color: #ba925b;
	height: 20px;
	width: 20px;
	display: block;
	border-radius: 50%;
	margin-top: -10px;
	transform: scale(0)
}

body.simon-cuchillerias .layout {
	position: absolute;
	width: 100%;
	height: 100%
}

body.simon-cuchillerias .layout .gameboy {
	position: absolute;
	z-index: 100000;
	top: 20px;
	left: 50%
}

body.simon-cuchillerias .transition {
	position: absolute;
	height: 100%;
	width: 100%;
	overflow: hidden;
	background-color: #f3f2ef;
	opacity: 0;
	visibility: hidden
}

body.simon-cuchillerias .project {
	left: 50%;
	position: absolute;
	top: 50%;
	width: 50%;
	opacity: 0;
	visibility: hidden;
	padding-left: 120px;
	transform: translateY(-50%)
}

body.simon-cuchillerias .project h1 {
	color: #403833;
	font-family: "Teko", sans-serif;
	font-size: 72px;
	line-height: 60px;
	font-weight: 400;
	margin: 0 0 30px;
	white-space: nowrap;
	perspective: 400px;
	text-transform: uppercase
}

body.simon-cuchillerias .project h1>span {
	display: block
}

body.simon-cuchillerias .project h1>span span {
	display: inline-block;
	position: relative;
	transform-origin: top left
}

@media (max-width: 1250px) {
	body.simon-cuchillerias .project {
		left: 0;
		width: 100%;
		top: auto;
		bottom: 0;
		padding: 0 20px 100px;
		transform: none
	}
	body.simon-cuchillerias .project h1 {
		font-size: 72px;
		text-align: center
	}
	body.simon-cuchillerias .project h1 div {
		display: inline-block
	}
}

@media (max-width: 600px) {
	body.simon-cuchillerias .project {
		top: auto;
		bottom: 0;
		padding: 0 20px 100px
	}
	body.simon-cuchillerias .project h1 {
		font-size: 48px;
		line-height: 48px;
		margin-bottom: 0
	}
}

@media (max-height: 500px) {
	body.simon-cuchillerias .project {
		padding-left: 150px;
		padding-right: 150px;
		padding-bottom: 0;
		bottom: 50%;
		transform: translateY(50%)
	}
	body.simon-cuchillerias .project h1 {
		text-align: center;
		display: flex;
		justify-content: center;
		font-size: 36px;
		line-height: 36px;
		margin-bottom: 20px
	}
	body.simon-cuchillerias .project h1>span {
		display: inline-block;
		margin-right: 7px
	}
	body.simon-cuchillerias .project h1>span:last-of-type {
		margin-right: 0
	}
}

@media (max-width: 600px) {
	body.simon-cuchillerias.studio .line-aux,
	body.simon-cuchillerias.about .line-aux {
		opacity: 0 !important;
		visibility: hidden !important
	}
}

@media (max-width: 1250px) {
	body.simon-cuchillerias.about .line {
		opacity: 0
	}
}

@media (max-width: 600px) {
	body.simon-cuchillerias.menu .project-link {
		transform: scale(0.8)
	}
}

body.simon-cuchillerias.studio {
	transition: all 500ms cubic-bezier(0.47, 0, 0.745, 0.715);
	background: #1f1e1b;
	color: #403f39;
	margin: 0;
	overflow: hidden;
	font-family: "Rubik", sans-serif;
	font-size: 14px;
	line-height: 20px
}

body.simon-cuchillerias.studio a {
	transition: color 300ms cubic-bezier(0.47, 0, 0.745, 0.715);
	color: #a99475;
	text-decoration: none;
	display: inline-block
}

body.simon-cuchillerias.studio a.fractured>span {
	display: inline-block
}

body.simon-cuchillerias.studio a.fractured>span span {
	display: inline-block;
	font-family: "Rubik", sans-serif;
	line-height: 20px;
	text-transform: none
}

body.simon-cuchillerias.studio a:hover {
	color: #c89f6b
}

body.simon-cuchillerias.studio .gradient {
	position: absolute;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
	opacity: 0.8
}

body.simon-cuchillerias.studio .gradient stop {
	transition: all 500ms cubic-bezier(0.47, 0, 0.745, 0.715);
	stop-color: #1f1e1b
}

body.simon-cuchillerias.studio .gradient stop:last-of-type {
	stop-color: #1f1e1b
}

body.simon-cuchillerias.studio .circle-transition {
	position: absolute;
	height: 0;
	width: 0;
	border-radius: 50%;
	transform: translateX(-50%) translateY(-50%);
	left: 50%;
	top: 50%
}

body.simon-cuchillerias.studio .logo {
	width: 250px;
	position: fixed;
	opacity: 1;
	z-index: 2;
	left: 80px;
	top: 60px;
	color: #a99475;
	cursor: pointer
}

body.simon-cuchillerias.studio .logo.revert {
	color: #e6aa61
}

body.simon-cuchillerias.studio .logo.revert svg {
	fill: #e6aa61
}

@media (max-width: 1250px) {
	body.simon-cuchillerias.studio .logo {
		left: 50px;
		top: 40px
	}
}

@media (max-width: 600px) {
	body.simon-cuchillerias.studio .logo {
		left: 20px;
		top: 20px
	}
}

body.simon-cuchillerias.studio .logo h2 {
	transition: color 500ms cubic-bezier(0.47, 0, 0.745, 0.715);
	font-size: 18px;
	font-weight: 400;
	line-height: normal;
	margin: 8px 0 0;
	display: block
}

body.simon-cuchillerias.studio .logo h3 {
	transition: color 500ms cubic-bezier(0.47, 0, 0.745, 0.715);
	font-size: 11px;
	text-transform: uppercase;
	font-weight: 700;
	margin: 0;
	letter-spacing: 0.45px;
	display: none
}

body.simon-cuchillerias.studio .logo svg {
	transition: all 500ms cubic-bezier(0.47, 0, 0.745, 0.715);
	fill: #a99475;
	float: left;
	margin-right: 15px
}

@media (max-width: 600px) {
	body.simon-cuchillerias.studio .logo h2,
	body.simon-cuchillerias.studio .logo h3 {
		display: none
	}
}

@media (max-height: 500px) {
	body.simon-cuchillerias.studio .logo h2,
	body.simon-cuchillerias.studio .logo h3 {
		display: none
	}
}

body.simon-cuchillerias.studio .mobile-menu {
	transition: fill 500ms cubic-bezier(0.47, 0, 0.745, 0.715);
	position: absolute;
	bottom: 33px;
	fill: #a99475;
	left: 20px;
	z-index: 2;
	cursor: pointer;
	opacity: 0;
	visibility: hidden;
	display: none
}

@media (max-width: 600px) {
	body.simon-cuchillerias.studio .mobile-menu {
		display: block
	}
}

body.simon-cuchillerias.studio .menu-top {
	position: fixed;
	right: 80px;
	z-index: 10;
	top: 70px
}

@media (max-width: 1250px) {
	body.simon-cuchillerias.studio .menu-top {
		right: 50px;
		top: 50px
	}
}

@media (max-width: 600px) {
	body.simon-cuchillerias.studio .menu-top {
		right: 20px;
		top: 30px
	}
}

body.simon-cuchillerias.studio .menu-top a {
	padding: 20px;
	padding-right: 0;
	margin-top: -20px;
	opacity: 0;
	visibility: hidden;
	transform: translateY(-10px)
}

body.simon-cuchillerias.studio .menu-top a span {
	display: inline-block
}

body.simon-cuchillerias.studio .mouse-track {
	pointer-events: none;
	position: absolute;
	z-index: 1000;
	opacity: 0
}

body.simon-cuchillerias.studio .mouse-track .outer-circle {
	stroke: #a99475;
	transform: translateX(-50%) translateY(-50%) rotate(-90deg);
	stroke-width: 2px;
	fill: none;
	height: 18px;
	width: 18px;
	overflow: visible;
	position: absolute
}

body.simon-cuchillerias.studio .mouse-track .outer-circle .countdown {
	opacity: 0;
	stroke: #e6aa61;
	position: absolute;
	stroke-dashoffset: 125px;
	stroke-dasharray: 125px;
	stroke-width: 4px
}

body.simon-cuchillerias.studio .mouse-track .inner-circle {
	stroke: #a99475;
	transform: translateX(-50%) translateY(-50%);
	stroke-width: 2px;
	fill: none;
	height: 2px;
	width: 2px;
	opacity: 0.6;
	overflow: visible;
	position: absolute
}

body.simon-cuchillerias.studio .mouse-track .arrow-right {
	stroke: #e6aa61;
	opacity: 0;
	visibility: hidden;
	stroke-width: 2px;
	transform: rotate(180deg);
	margin-left: 10px;
	margin-top: -7px;
	position: absolute
}

body.simon-cuchillerias.studio .mouse-track .arrow-left {
	stroke: #e6aa61;
	opacity: 0;
	margin-left: -20px;
	margin-top: -6px;
	visibility: hidden;
	stroke-width: 2px;
	position: absolute
}

body.simon-cuchillerias.studio .mouse-track .play {
	fill: #a99475;
	opacity: 1;
	margin-top: -6px;
	stroke-width: 2px;
	margin-top: -18px;
	margin-left: -14px;
	transform: scale(0);
	position: absolute
}

body.simon-cuchillerias.studio .mouse-track .stop {
	fill: #a99475;
	height: 38px;
	width: 38px;
	margin-left: -19px;
	margin-top: -19px;
	transform: scale(0);
	position: absolute
}

@media (max-width: 600px) {
	body.simon-cuchillerias.studio .mouse-track {
		opacity: 0 !important;
		visibility: hidden !important
	}
}

body.simon-cuchillerias.studio .about-page {
	position: absolute;
	height: 100%;
	width: 100%;
	padding: 40px;
	left: 0;
	opacity: 1;
	top: 0;
	display: flex;
	flex-direction: row;
	visibility: hidden;
	align-items: stretch
}

@media (max-width: 1250px) {
	body.simon-cuchillerias.studio .about-page {
		padding: 20px
	}
}

@media (max-width: 600px) {
	body.simon-cuchillerias.studio .about-page {
		flex-direction: column;
		padding: 0
	}
}

body.simon-cuchillerias.studio .about-page.active .neon-sign {
	animation: flicker 10s infinite
}

body.simon-cuchillerias.studio .about-page.active .split-left::before {
	width: 100%;
	bottom: 0
}

body.simon-cuchillerias.studio .about-page.active .split-left.shaded::after {
	opacity: 1
}

body.simon-cuchillerias.studio .about-page .split-left {
	opacity: 0;
	visibility: hidden;
	overflow: hidden
}

body.simon-cuchillerias.studio .about-page .split-left.shaded::after {
	content: "Swipe or Scroll and click image to know more";
	padding-right: 20px;
	line-height: 100px;
	color: #302f2a;
	text-align: right;
	position: absolute;
	bottom: 0;
	width: 100%;
	opacity: 0;
	transition: all 500ms cubic-bezier(0.47, 0, 0.745, 0.715);
	transition-delay: 1;
	height: 100px;
	background-color: red;
	background: linear-gradient(transparent, #14141a 50%);
	pointer-events: none
}

body.simon-cuchillerias.studio .about-page .split-left::before {
	transition: all 500ms cubic-bezier(0.47, 0, 0.745, 0.715);
	content: "";
	position: absolute;
	width: 0%;
	height: 100%;
	left: 0;
	background-color: #14141a;
	z-index: -1;
	bottom: 0
}

body.simon-cuchillerias.studio .about-page>* {
	position: relative;
	z-index: 1;
	flex: 0 0 50%;
	display: flex;
	align-items: center
}

body.simon-cuchillerias.studio .about-page .gradient-about {
	background-color: red;
	position: absolute;
	width: 100%;
	height: 100%;
	z-index: 1;
	top: 0;
	left: 0;
	-webkit-mask-image: url("../smoke-sprite.png");
	-webkit-mask-size: 3000% 100%;
	-webkit-mask-position-x: 0%;
	animation-iteration-count: 1;
	animation-delay: 1s
}

body.simon-cuchillerias.studio .about-page .gradient-about.active {
	animation: mask 1.5s steps(29) forwards
}

body.simon-cuchillerias.studio .about-page .gradient-about stop {
	transition: all 500ms cubic-bezier(0.47, 0, 0.745, 0.715);
	stop-color: #292038
}

body.simon-cuchillerias.studio .about-page .gradient-about stop:last-of-type {
	stop-color: #18181d
}

@media (max-width: 600px) {
	body.simon-cuchillerias.studio .about-page .gradient-about stop {
		transition: all 500ms cubic-bezier(0.47, 0, 0.745, 0.715);
		stop-color: #18181d
	}
	body.simon-cuchillerias.studio .about-page .gradient-about stop:last-of-type {
		stop-color: #18181d
	}
}

body.simon-cuchillerias.studio .about-page .about-text {
	position: absolute;
	padding: 120px;
	padding-right: 240px
}

body.simon-cuchillerias.studio .about-page .about-text h1 {
	color: #e6aa61;
	white-space: nowrap;
	font-weight: 500;
	display: block;
	font-family: "Teko", sans-serif;
	text-transform: uppercase;
	font-size: 40px;
	line-height: 40px;
	margin-top: 10px;
	margin-bottom: 40px
}

@media (max-width: 600px) {
	body.simon-cuchillerias.studio .about-page .about-text h1 {
		font-size: 28px;
		line-height: 28px;
		margin: 0 0 20px
	}
}

body.simon-cuchillerias.studio .about-page .about-text h1>span {
	display: block
}

body.simon-cuchillerias.studio .about-page .about-text h1>span span {
	display: inline-block
}

body.simon-cuchillerias.studio .about-page .about-text p {
	opacity: 0;
	font-size: 16px;
	line-height: 32px
}

@media (max-width: 600px) {
	body.simon-cuchillerias.studio .about-page .about-text p {
		line-height: 24px
	}
}

@media (max-width: 1250px) {
	body.simon-cuchillerias.studio .about-page .about-text {
		padding-left: 40px;
		padding-right: 40px
	}
}

@media (max-width: 600px) {
	body.simon-cuchillerias.studio .about-page .about-text {
		padding-left: 20px;
		padding-right: 20px
	}
}

body.simon-cuchillerias.studio .about-page .about-render {
	position: absolute;
	visibility: hidden;
	top: 0%;
	opacity: 0;
	right: 0;
	width: 140%;
	height: 100%;
	transform: translateY(0) scale(1);
	z-index: 1;
	pointer-events: none
}

@media (max-width: 1250px) {
	body.simon-cuchillerias.studio .about-page .about-render {
		width: 100%
	}
}

@media (max-width: 600px) {
	body.simon-cuchillerias.studio .about-page .about-render {
		width: 100%
	}
}

body.simon-cuchillerias.studio .about-page .about-render canvas {
	position: absolute;
	transform: translateY(-50%);
	top: 50%
}

body.simon-cuchillerias.studio .about-page .neon-sign {
	opacity: 0;
	height: 570px;
	width: 140%;
	position: absolute;
	text-transform: uppercase;
	font-size: 46px;
	color: #ff0054;
	right: 260px;
	top: -30px;
	transform: scale(0.5) perspective(900px) translateZ(-300px) rotateY(-10deg) rotateX(0deg) rotateZ(0deg) skewY(9deg);
	filter: blur(2px) brightness(2)
}

body.simon-cuchillerias.studio .about-page .neon-sign::before {
	content: "";
	width: 410px;
	height: 100%;
	position: absolute;
	left: 100%
}

@media (max-width: 1250px) {
	body.simon-cuchillerias.studio .about-page .neon-sign {
		display: none
	}
}

@media (max-width: 600px) {
	body.simon-cuchillerias.studio .about-page .neon-sign {
		display: none
	}
}

body.simon-cuchillerias.studio .about-page .neon-sign::after {
	content: "";
	border: 6px solid #ff0054;
	width: 210px;
	height: 100%;
	position: absolute;
	right: 0
}

body.simon-cuchillerias.studio .about-page .neon-sign.var-1 {
	transform: scale(0.7) perspective(900px) rotateY(-8deg) rotateX(0deg) rotateZ(0deg) skewY(9deg) translateX(150px)
}

body.simon-cuchillerias.studio .about-page .neon-sign.var-2 {
	transform: scale(0.7) perspective(900px) rotateY(-6deg) rotateX(0deg) rotateZ(0deg) skewY(6deg) translateY(6px) translateX(140px)
}

body.simon-cuchillerias.studio .about-page .neon-sign>* {
	position: absolute
}

body.simon-cuchillerias.studio .about-page .neon-sign .code {
	top: 40px;
	right: 42px;
	animation: flicker 5s infinite
}

body.simon-cuchillerias.studio .about-page .neon-sign .and {
	top: 94px;
	color: #00e4ff;
	font-size: 80px;
	right: 70px
}

body.simon-cuchillerias.studio .about-page .neon-sign .design {
	top: 145px;
	right: 19px
}

body.simon-cuchillerias.studio .about-page .neon-sign .key {
	animation: fade 2s steps(1) infinite;
	animation-direction: reverse;
	bottom: 45px;
	right: 53px
}

body.simon-cuchillerias.studio .about-page .neon-sign .key-pressed {
	animation: fade 2s steps(1) infinite;
	animation-direction: normal;
	bottom: 40px;
	right: 19px
}

body.simon-cuchillerias.studio .about-page .neon-sign .hand {
	animation: hand 2s steps(1) infinite;
	right: 30px;
	bottom: 100px
}

body.simon-cuchillerias.studio .about-page .neon-sign .key-base {
	bottom: 20px;
	right: 45px
}

body.simon-cuchillerias.studio .introduction {
	position: absolute;
	background-color: #1f1e1b;
	height: 100%;
	width: 100%;
	top: 0;
	left: 0;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center
}

body.simon-cuchillerias.studio .introduction .skip {
	padding: 30px;
	position: absolute;
	bottom: 50px;
	font-size: 16px;
	color: #403f39;
	cursor: pointer
}

body.simon-cuchillerias.studio .intro-text {
	transition: color 500ms cubic-bezier(0.47, 0, 0.745, 0.715);
	position: absolute;
	bottom: 50%;
	z-index: 1;
	width: 100%;
	padding: 0 10px;
	text-align: center;
	font-size: 24px;
	color: #a99475
}

body.simon-cuchillerias.studio .intro-text.tutorial {
	font-size: 16px;
	bottom: 70px
}

body.simon-cuchillerias.studio .intro-text span {
	display: inline-block
}

@media (max-width: 1250px) {
	body.simon-cuchillerias.studio .intro-text.tutorial {
		bottom: 40px
	}
}

@media (max-width: 600px) {
	body.simon-cuchillerias.studio .intro-text {
		font-size: 16px
	}
	body.simon-cuchillerias.studio .intro-text.tutorial {
		bottom: auto;
		top: 140px
	}
}

body.simon-cuchillerias.studio .discover {
	opacity: 0;
	visibility: hidden;
	color: #e6aa61;
	position: absolute;
	bottom: 0;
	right: 0;
	height: 160px;
	width: 240px;
	z-index: 100;
	cursor: pointer
}

body.simon-cuchillerias.studio .discover .open>span {
	position: absolute;
	height: 14px;
	width: 7px;
	bottom: 65px;
	right: 80px;
	transform: translateX(-80px)
}

body.simon-cuchillerias.studio .discover .open>span::before {
	transition: all 300ms cubic-bezier(0.47, 0, 0.745, 0.715);
	transition-property: background-color, transform, opacity;
	transition-delay: 0s, 0.8s, 0.8s;
	content: "";
	position: absolute;
	border-radius: 10px 10px 20px 0;
	height: 8px;
	transform-origin: top left;
	width: 1.5px;
	background-color: #e6aa61;
	transform: rotate(-45deg) scaleY(4);
	opacity: 0
}

body.simon-cuchillerias.studio .discover .open>span::after {
	transition: all 300ms cubic-bezier(0.47, 0, 0.745, 0.715);
	transition-property: background-color, transform, opacity;
	transition-delay: 0s, 1.1s, 1.1s;
	content: "";
	position: absolute;
	border-radius: 0 20px 10px 10px;
	height: 8px;
	transform-origin: bottom left;
	margin-top: 1px;
	width: 1.5px;
	background-color: #e6aa61;
	transform: rotate(45deg) scaleY(4);
	opacity: 0
}

body.simon-cuchillerias.studio .discover .open.active>span::before {
	transform: rotate(-45deg) scaleY(1);
	opacity: 1;
	transition-delay: 0
}

body.simon-cuchillerias.studio .discover .open.active>span::after {
	transform: rotate(45deg) scaleY(1);
	opacity: 1;
	transition-delay: 0
}

body.simon-cuchillerias.studio .discover .close>span {
	position: absolute;
	height: 17px;
	width: 7px;
	bottom: 65px;
	right: 80px;
	transform: translateX(-57px)
}

body.simon-cuchillerias.studio .discover .close>span::before {
	transition: all 300ms cubic-bezier(0.47, 0, 0.745, 0.715);
	transition-delay: 1.1s;
	content: "";
	position: absolute;
	border-radius: 5px;
	height: 15px;
	width: 2px;
	margin-left: -5px;
	margin-top: 1px;
	background-color: #e6aa61;
	transform-origin: top;
	transform: rotate(-45deg) scaleY(0)
}

body.simon-cuchillerias.studio .discover .close>span::after {
	transition: all 300ms cubic-bezier(0.47, 0, 0.745, 0.715);
	transition-delay: 0.8s;
	content: "";
	position: absolute;
	border-radius: 5px;
	height: 15px;
	width: 2px;
	background-color: #e6aa61;
	transform-origin: bottom;
	margin-left: -5px;
	margin-top: -3px;
	transform: rotate(45deg) scaleY(0)
}

body.simon-cuchillerias.studio .discover .close.active>span::before {
	transform: rotate(-45deg) scaleY(1);
	transition-delay: 0
}

body.simon-cuchillerias.studio .discover .close.active>span::after {
	transform: rotate(45deg) scaleY(1);
	transition-delay: 0
}

body.simon-cuchillerias.studio .discover .open,
body.simon-cuchillerias.studio .discover .close {
	transition: all 300ms cubic-bezier(0.47, 0, 0.745, 0.715);
	height: 100%;
	position: absolute;
	width: 100%;
	left: 0;
	top: 0;
	opacity: 0
}

body.simon-cuchillerias.studio .discover .open.active,
body.simon-cuchillerias.studio .discover .close.active {
	opacity: 1
}

body.simon-cuchillerias.studio .discover .open a span,
body.simon-cuchillerias.studio .discover .close a span {
	transform: translateX(5px) translateY(5px);
	opacity: 0
}

body.simon-cuchillerias.studio .discover .open.active a span,
body.simon-cuchillerias.studio .discover .close.active a span {
	transform: translateX(0px) translateY(0px);
	opacity: 1
}

body.simon-cuchillerias.studio .discover:hover {
	height: 200px;
	width: 300px
}

body.simon-cuchillerias.studio .discover:hover a {
	color: #a99475
}

body.simon-cuchillerias.studio .discover:hover svg {
	stroke: #403f39
}

body.simon-cuchillerias.studio .discover>div>a {
	position: absolute;
	right: 80px;
	bottom: 65px
}

body.simon-cuchillerias.studio .discover a span {
	position: relative;
	display: inline-block
}

@media (max-width: 1250px) {
	body.simon-cuchillerias.studio .discover {
		height: 100px;
		width: 170px
	}
}

@media (max-width: 600px) {
	body.simon-cuchillerias.studio .discover {
		height: 70px;
		width: 120px;
		z-index: 2
	}
	body.simon-cuchillerias.studio .discover:hover {
		width: 100%;
		height: 90px
	}
}

body.simon-cuchillerias.studio .line-aux {
	width: 45px;
	position: fixed;
	opacity: 1;
	height: 100px;
	left: 82px;
	bottom: 110px;
	z-index: 3;
	opacity: 0;
	visibility: hidden
}

@media (max-width: 1250px) {
	body.simon-cuchillerias.studio .line-aux {
		left: 50px;
		bottom: 90px
	}
}

@media (max-width: 600px) {
	body.simon-cuchillerias.studio .line-aux {
		left: 20px;
		bottom: 73px;
		visibility: hidden !important;
		opacity: 0 !important
	}
}

body.simon-cuchillerias.studio .line-aux::after {
	transition: background-color 500ms cubic-bezier(0.47, 0, 0.745, 0.715);
	content: "";
	background-color: #32302c;
	width: 2px;
	height: 10px;
	margin-left: -1px;
	left: 50%;
	bottom: -65px;
	position: absolute
}

body.simon-cuchillerias.studio .line-aux .line {
	transition: background-color 500ms cubic-bezier(0.47, 0, 0.745, 0.715);
	width: 2px;
	background-color: #32302c;
	height: 0;
	margin-left: -1px;
	left: 50%;
	margin-bottom: 10px;
	position: relative
}

@media (max-width: 600px) {
	body.simon-cuchillerias.studio .line-aux .line {
		display: none
	}
}

@media (max-height: 500px) {
	body.simon-cuchillerias.studio .line-aux .line {
		display: none
	}
}

body.simon-cuchillerias.studio .line-aux .counter {
	transition: all 500ms cubic-bezier(0.47, 0, 0.745, 0.715);
	text-transform: uppercase;
	font-family: "Teko", sans-serif;
	font-weight: 500;
	font-size: 18px;
	color: #a99475;
	height: 50px;
	width: 100px;
	overflow: hidden;
	text-align: center;
	position: absolute;
	bottom: -50px;
	left: -27px
}

body.simon-cuchillerias.studio .line-aux .counter .page {
	transition: color 500ms cubic-bezier(0.47, 0, 0.745, 0.715);
	position: absolute;
	right: 50%;
	margin-right: 7px;
	bottom: 20px;
	margin-bottom: 45px;
	text-align: right
}

body.simon-cuchillerias.studio .line-aux .counter .divider {
	transition: color 500ms cubic-bezier(0.47, 0, 0.745, 0.715);
	position: absolute;
	left: 50%;
	color: #e6aa61;
	bottom: 12px;
	transform: translateX(-50%);
	margin-bottom: 45px
}

body.simon-cuchillerias.studio .line-aux .counter .total {
	transition: color 500ms cubic-bezier(0.47, 0, 0.745, 0.715);
	left: 50%;
	margin-left: 7px;
	position: absolute;
	bottom: 5px;
	margin-bottom: 45px
}

body.simon-cuchillerias.studio .scroll-position {
	width: 100%;
	position: absolute;
	bottom: 0;
	height: 2px;
	opacity: 0;
	z-index: 2;
	visibility: hidden
}

body.simon-cuchillerias.studio .scroll-position span {
	position: relative;
	display: block;
	width: 50%;
	background-color: #e6aa61;
	height: 100%
}

body.simon-cuchillerias.studio .line-scroll {
	position: absolute;
	z-index: 2;
	opacity: 0;
	visibility: hidden;
	height: 45px;
	width: 140px;
	left: 500px;
	bottom: 40px;
	overflow: hidden
}

body.simon-cuchillerias.studio .line-scroll>span {
	position: absolute;
	content: "";
	background-color: #e6aa61;
	width: 50%;
	bottom: 0px;
	top: auto !important;
	height: 2px !important;
	z-index: 1;
	animation-name: example;
	animation-duration: 4s;
	animation-iteration-count: infinite
}

body.simon-cuchillerias.studio .line-scroll::after {
	content: "->";
	position: absolute;
	color: #e6aa61;
	margin-left: 15px
}

@media (max-width: 1250px) {
	body.simon-cuchillerias.studio .line-scroll {
		left: 480px;
		bottom: 20px
	}
}

@media (max-width: 600px) {
	body.simon-cuchillerias.studio .line-scroll {
		left: 20px;
		bottom: 20px;
		height: 35px
	}
}

body.simon-cuchillerias.studio .fireworks-plane {
	width: 600px;
	height: 600px;
	left: 340px;
	position: absolute;
	opacity: 0;
	top: 50%;
	transform: translateX(-50%) translateY(-50%) rotateY(180deg);
	perspective: 500px;
	z-index: 1
}

@media (max-width: 1250px) {
	body.simon-cuchillerias.studio .fireworks-plane {
		transform: translateX(-50%) translateY(-50%) rotateY(180deg) scale(0.6)
	}
}

@media (max-width: 600px) {
	body.simon-cuchillerias.studio .fireworks-plane {
		transform: translateX(-50%) translateY(-50%) rotateY(180deg) scale(0.4);
		left: 50%
	}
}

body.simon-cuchillerias.studio .firework-1 {
	position: absolute;
	top: 280px;
	left: 50px;
	overflow: visible;
	stroke: #e6aa61;
	stroke-width: 10px;
	stroke-dashoffset: -358;
	transform: rotateX(40deg);
	stroke-dasharray: 0, 10000;
	stroke-linecap: round
}

body.simon-cuchillerias.studio .firework-1:nth-of-type(2) {
	top: 230px;
	transform: rotateZ(20deg) rotateX(40deg)
}

body.simon-cuchillerias.studio .firework-2>span {
	height: 100px;
	width: 4px;
	position: absolute;
	left: 190px;
	transform-origin: bottom;
	top: 145px
}

body.simon-cuchillerias.studio .firework-2>span span {
	content: "";
	height: 0;
	background-color: #e6aa61;
	bottom: 0;
	width: 100%;
	position: absolute;
	border-radius: 2px
}

body.simon-cuchillerias.studio .firework-2>span:nth-of-type(1) {
	transform: rotate(60deg)
}

body.simon-cuchillerias.studio .firework-2>span:nth-of-type(2) {
	transform: rotate(120deg)
}

body.simon-cuchillerias.studio .firework-2>span:nth-of-type(3) {
	transform: rotate(180deg)
}

body.simon-cuchillerias.studio .firework-2>span:nth-of-type(4) {
	transform: rotate(240deg)
}

body.simon-cuchillerias.studio .firework-2>span:nth-of-type(5) {
	transform: rotate(300deg)
}

body.simon-cuchillerias.studio .firework-2>span:nth-of-type(6) {
	transform: rotate(360deg)
}

body.simon-cuchillerias.studio .models {
	height: 100%;
	width: 100%;
	position: absolute;
	overflow: hidden;
	left: 0;
	top: 0;
	z-index: 1
}

body.simon-cuchillerias.studio .models .project-link>* {
	position: absolute
}

body.simon-cuchillerias.studio .models .project-link {
	position: absolute;
	height: 100%;
	opacity: 0;
	visibility: hidden;
	width: 100%;
	transform: perspective(1400px)
}

body.simon-cuchillerias.studio .models .project-link.tech span {
	color: #5bf46d
}

body.simon-cuchillerias.studio .models .project-link.tech span {
	color: #ff9273
}

body.simon-cuchillerias.studio .models .project-link.non-tech span {
	color: #a07f5e
}

body.simon-cuchillerias.studio .models .project-link.simon-cuchillerias span {
	color: #f7ce3c
}

body.simon-cuchillerias.studio .models .project-link.guild-storm span {
	color: #f76565
}

@media (max-width: 600px) {
	body.simon-cuchillerias.studio .models .project-link {
		transform: scale(0.5)
	}
}

body.simon-cuchillerias.studio .models canvas {
	top: 0;
	z-index: 1
}

body.simon-cuchillerias.studio .models .frame {
	stroke: rgba(64, 63, 57, 0.03);
	stroke-width: 85px;
	height: 600px;
	width: 600px;
	margin: 0;
	padding: 25px;
	border-radius: 50%
}

body.simon-cuchillerias.studio .models h2 {
	top: 50%;
	left: 400px;
	opacity: 0;
	margin-top: -62px;
	font-size: 24px;
	font-weight: 400;
	white-space: nowrap;
	height: 24px
}

body.simon-cuchillerias.studio .models small {
	top: 50%;
	left: 400px;
	margin-top: 25px;
	opacity: 0;
	text-transform: uppercase;
	white-space: nowrap
}

body.simon-cuchillerias.studio .models span {
	top: 50%;
	font-family: "Teko", sans-serif;
	font-size: 18px;
	position: absolute;
	height: 0;
	overflow: hidden;
	margin-top: -45px;
	left: 400px
}

body.simon-cuchillerias.studio .projects {
	position: absolute;
	width: 100%;
	height: 100%;
	z-index: 1
}

body.simon-cuchillerias.studio .project-content {
	position: relative;
	z-index: 1
}

body.simon-cuchillerias.studio .project-content .studio-wrap {
	height: 100%
}

body.simon-cuchillerias.studio .project-content .studio-wrap .scene {
	height: 100%;
	width: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	position: absolute;
	transform: translateX(100%);
	top: 50%
}

body.simon-cuchillerias.studio .project-content .studio-wrap .scene .image {
	padding: 40px;
	display: flex;
	align-items: center;
	align-self: stretch;
	justify-content: center
}

body.simon-cuchillerias.studio .project-content .studio-wrap .scene .video {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 40px;
	position: relative
}

body.simon-cuchillerias.studio .project-content .studio-wrap .scene .video .video-wrap {
	position: absolute;
	width: 100%;
	height: 100%;
	padding: 40px;
	pointer-events: none;
	z-index: 1
}

@media (max-width: 600px) {
	body.simon-cuchillerias.studio .project-content .studio-wrap .scene .video::before {
		content: "";
		position: absolute;
		width: 30%;
		padding-top: 30%;
		border-radius: 50%;
		border: 2px solid #e6aa61
	}
	body.simon-cuchillerias.studio .project-content .studio-wrap .scene .video::after {
		content: "";
		position: absolute;
		left: 50%;
		margin-left: -15px;
		border-left: 33px solid #a99475;
		border-top: 20px solid transparent;
		border-right: 20px solid transparent;
		border-bottom: 20px solid transparent
	}
}

body.simon-cuchillerias.studio .project-content .studio-wrap .scene img {
	max-height: 100%;
	max-width: 100%
}

body.simon-cuchillerias.studio .project-content .studio-wrap .scene .fractured {
	padding: 0
}

body.simon-cuchillerias.studio .project-content .studio-wrap .scene h2 {
	font-weight: 500;
	display: block;
	font-family: "Teko", sans-serif;
	text-transform: uppercase;
	font-size: 40px;
	line-height: 40px;
	margin-top: 10px;
	margin-bottom: 40px
}

body.simon-cuchillerias.studio .project-content .studio-wrap .scene h2 span {
	display: inline-block
}

body.simon-cuchillerias.studio .project-content .studio-wrap .scene .text-title {
	color: #e6aa61
}

body.simon-cuchillerias.studio .project-content .studio-wrap .scene .text-title small {
	color: #403f39;
	text-transform: uppercase;
	font-weight: bold
}

body.simon-cuchillerias.studio .project-content .studio-wrap .scene .text-content {
	line-height: 36px;
	color: #a99475;
	font-size: 14px
}

@media (max-width: 600px) {
	body.simon-cuchillerias.studio .project-content .studio-wrap .scene .text-content {
		line-height: 24px;
		font-size: 14px
	}
}

@media (max-height: 500px) {
	body.simon-cuchillerias.studio .project-content .studio-wrap .scene .text-content {
		line-height: 24px
	}
}

body.simon-cuchillerias.studio .project-content .studio-wrap .scene.split {
	flex-direction: row;
	align-items: stretch;
	padding: 40px
}

body.simon-cuchillerias.studio .project-content .studio-wrap .scene.split>div {
	position: relative;
	padding: 20px 10%;
	display: flex;
	flex: 0 0 50%;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	overflow: hidden
}

@media (max-width: 600px) {
	body.simon-cuchillerias.studio .project-content .studio-wrap .scene.split h2 {
		font-size: 28px;
		line-height: 28px;
		margin: 0 0 10px
	}
}

@media (max-height: 500px) {
	body.simon-cuchillerias.studio .project-content .studio-wrap .scene.split h2 {
		font-size: 28px;
		line-height: 28px;
		margin: 0 0 10px
	}
}

body.simon-cuchillerias.studio .project-content .studio-wrap .scene.split.variant {
	position: relative;
	overflow: hidden
}

body.simon-cuchillerias.studio .project-content .studio-wrap .scene.split.variant .split-right {
	align-items: stretch;
	padding: 20px 0;
	flex-wrap: nowrap;
	overflow: visible
}

body.simon-cuchillerias.studio .project-content .studio-wrap .scene.split.variant .split-right>div {
	position: absolute;
	top: 40px;
	bottom: 40px
}

body.simon-cuchillerias.studio .project-content .studio-wrap .scene.split.variant .split-right>div img {
	max-width: none;
	max-height: 100%
}

@media (max-width: 1250px) {
	body.simon-cuchillerias.studio .project-content .studio-wrap .scene.split {
		padding: 20px
	}
	body.simon-cuchillerias.studio .project-content .studio-wrap .scene.split>div {
		padding: 20px
	}
}

@media (max-width: 600px) {
	body.simon-cuchillerias.studio .project-content .studio-wrap .scene.split {
		flex-direction: column;
		padding: 0
	}
	body.simon-cuchillerias.studio .project-content .studio-wrap .scene.split>div {
		padding: 20px;
		flex: auto
	}
	body.simon-cuchillerias.studio .project-content .studio-wrap .scene.split.variant .split-right {
		padding: 0 20px
	}
	body.simon-cuchillerias.studio .project-content .studio-wrap .scene.split.variant .split-right>div {
		left: 20px;
		right: 20px;
		top: 0;
		bottom: 0
	}
	body.simon-cuchillerias.studio .project-content .studio-wrap .scene.split.variant .split-right>div img {
		max-width: 100%;
		max-height: none
	}
}

@media (max-height: 500px) {
	body.simon-cuchillerias.studio .project-content .studio-wrap .scene.split {
		flex-direction: column;
		padding: 0
	}
	body.simon-cuchillerias.studio .project-content .studio-wrap .scene.split>div {
		padding: 20px;
		flex: auto
	}
	body.simon-cuchillerias.studio .project-content .studio-wrap .scene.split.variant .split-right {
		padding: 0 20px
	}
	body.simon-cuchillerias.studio .project-content .studio-wrap .scene.split.variant .split-right>div {
		left: 20px;
		right: 20px;
		top: 0;
		bottom: 0
	}
	body.simon-cuchillerias.studio .project-content .studio-wrap .scene.split.variant .split-right>div img {
		max-width: 100%;
		max-height: none
	}
}

body.simon-cuchillerias.studio .project-content .studio-wrap .intro {
	align-items: flex-start;
	padding-left: 550px;
	width: calc(100% - 500px);
	padding-right: 20px
}

body.simon-cuchillerias.studio .project-content .studio-wrap .intro h1 {
	font-family: "Teko", sans-serif;
	font-weight: 500;
	font-size: 72px;
	line-height: 54px;
	text-transform: uppercase;
	padding-right: 100px;
	margin: 20px 0
}

body.simon-cuchillerias.studio .project-content .studio-wrap .intro h1>span {
	display: block
}

body.simon-cuchillerias.studio .project-content .studio-wrap .intro h1>span span {
	display: inline-block
}

body.simon-cuchillerias.studio .project-content .studio-wrap .intro h1 small {
	color: #e6aa61;
	display: block;
	margin-left: -52px;
	text-align: right;
	font-size: 46px;
	font-weight: 400;
	line-height: 46px;
	width: 50px;
	margin-bottom: -46px;
	height: 46px
}

@media (max-width: 1250px) {
	body.simon-cuchillerias.studio .project-content .studio-wrap .intro {
		bottom: 20px;
		padding: 20px 0;
		max-width: 640px;
		width: 100%;
		align-items: stretch;
		justify-content: flex-end
	}
	body.simon-cuchillerias.studio .project-content .studio-wrap .intro>div {
		height: auto;
		padding: 0 20px 80px;
		text-align: center
	}
	body.simon-cuchillerias.studio .project-content .studio-wrap .intro h1 {
		display: inline-block;
		width: auto;
		font-size: 48px;
		text-align: center
	}
	body.simon-cuchillerias.studio .project-content .studio-wrap .intro h1>span {
		display: inline-block
	}
	body.simon-cuchillerias.studio .project-content .studio-wrap .intro h1 small {
		font-size: 18px;
		line-height: 36px
	}
}

@media (max-width: 600px) {
	body.simon-cuchillerias.studio .project-content .studio-wrap .intro>div {
		padding-bottom: 100px
	}
	body.simon-cuchillerias.studio .project-content .studio-wrap .intro>div h1 small {
		display: none
	}
}

@media (max-width: 1400px) {
	body.simon-cuchillerias.studio .project-content .studio-wrap .intro h1.fractured {
		font-size: 48px;
		line-height: 48px;
		padding-right: 20px
	}
	body.simon-cuchillerias.studio .project-content .studio-wrap .intro h1.fractured small {
		font-size: 24px;
		line-height: 32px
	}
}

@media (max-height: 500px) {
	body.simon-cuchillerias.studio .project-content .studio-wrap .intro>div {
		height: auto;
		padding: 0 20px 80px
	}
	body.simon-cuchillerias.studio .project-content .studio-wrap .intro h1 {
		font-size: 48px;
		line-height: 48px;
		margin-bottom: 0
	}
}

body.simon-cuchillerias.studio .project-content .studio-next {
	width: 600px;
	max-width: 100%;
	position: absolute;
	border-bottom: 1px solid #32302c;
	border-top: 1px solid #32302c;
	top: 50%;
	margin-top: -50px;
	left: 100%;
	z-index: 1;
	padding-left: 40px;
	overflow: hidden
}

body.simon-cuchillerias.studio .project-content .studio-next small {
	font-weight: bold;
	font-size: 11px;
	text-transform: uppercase;
	margin-bottom: -20px;
	margin-top: 10px;
	margin-left: 2px;
	display: block;
	color: #e6aa61
}

body.simon-cuchillerias.studio .project-content .studio-next h4 {
	font-family: "Teko", sans-serif;
	text-transform: uppercase;
	font-size: 60px;
	font-weight: 500;
	margin: 30px 0
}

body.simon-cuchillerias.studio .project-content .studio-next .button {
	transition: all 500ms cubic-bezier(0.47, 0, 0.745, 0.715);
	width: 40px;
	height: 40px;
	position: absolute;
	right: 30px;
	border: 1px solid #32302c;
	top: 50%;
	transform: translateY(-50%)
}

body.simon-cuchillerias.studio .project-content .studio-next .button::after {
	content: "";
	border-left: solid 3px #a99475;
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translateX(-50%) translateY(-50%);
	border-right: solid 3px transparent;
	border-top: solid 3px transparent;
	border-bottom: solid 3px transparent;
	height: 6px;
	width: 6px;
	display: block
}

body.simon-cuchillerias.studio .project-content .studio-next .progress {
	background-color: #e6aa61;
	width: 0%;
	height: 1px;
	position: absolute;
	bottom: 0;
	left: 100%
}

body.simon-cuchillerias.studio .project-content .studio-next.complete .button {
	border: 1px solid #e6aa61
}

@media (max-width: 600px) {
	body.simon-cuchillerias.studio .project-content .studio-next small {
		margin-bottom: -18px
	}
	body.simon-cuchillerias.studio .project-content .studio-next h4 {
		font-size: 40px;
		margin: 20px 0
	}
}

body.simon-cuchillerias.studio .project-details {
	list-style: none;
	display: flex;
	padding: 0;
	padding-left: 2px;
	margin: 0
}

body.simon-cuchillerias.studio .project-details li {
	opacity: 1;
	margin-bottom: 10px;
	position: relative;
	margin-right: 20px;
	font-family: "Teko", sans-serif;
	text-transform: uppercase;
	font-size: 18px;
	color: #a99475
}

body.simon-cuchillerias.studio .project-details li:last-of-type {
	margin-right: 0
}

body.simon-cuchillerias.studio .project-details small {
	color: #e6aa61;
	font-family: "Rubik", sans-serif;
	font-size: 10px;
	font-weight: 600;
	margin-bottom: -2px;
	display: block
}

@media (max-width: 1250px) {
	body.simon-cuchillerias.studio .project-details {
		text-align: center;
		justify-content: center
	}
}

body.simon-cuchillerias.studio .circles {
	position: absolute;
	z-index: 1;
	width: 100%;
	height: 100%
}

body.simon-cuchillerias.studio .circles .circle-trail {
	stroke: #a99475;
	position: absolute;
	height: 550px;
	width: 550px;
	overflow: visible;
	border-radius: 50%;
	stroke-linecap: round;
	stroke-width: 1px;
	opacity: 0;
	stroke-dasharray: 0.2, 10.268;
	left: 50%;
	top: 50%;
	transform: translateY(-50%) translateX(-50%)
}

@media (max-width: 600px) {
	body.simon-cuchillerias.studio .circles .circle-trail {
		height: 280px;
		width: 280px
	}
}

body.simon-cuchillerias.studio .circles .circle-progress {
	stroke: #e6aa61;
	position: absolute;
	height: 550px;
	width: 550px;
	border-radius: 50%;
	overflow: visible;
	transform-origin: center;
	stroke-width: 1.5px;
	stroke-linecap: round;
	stroke-dasharray: 629;
	stroke-dashoffset: 629;
	left: 50%;
	opacity: 0;
	top: 50%;
	transform: translateY(-50%) translateX(-50%) rotate(270deg)
}

@media (max-width: 600px) {
	body.simon-cuchillerias.studio .circles .circle-progress {
		height: 280px;
		width: 280px
	}
}

body.simon-cuchillerias.studio .circles .circle-progress-bullets {
	height: 550px;
	width: 550px;
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translateY(-50%) translateX(-50%)
}

@media (max-width: 600px) {
	body.simon-cuchillerias.studio .circles .circle-progress-bullets {
		height: 280px;
		width: 280px
	}
}

body.simon-cuchillerias.studio .circles .circle-progress-bullets .bullet {
	width: 12px;
	height: 100%;
	display: block;
	position: absolute;
	left: 50%;
	margin-left: -6px
}

body.simon-cuchillerias.studio .circles .circle-progress-bullets .bullet span {
	transition: border 500ms cubic-bezier(0.47, 0, 0.745, 0.715);
	border: 3px solid #e6aa61;
	background-color: #1f1e1b;
	content: "";
	height: 12px;
	opacity: 0;
	width: 12px;
	display: block;
	border-radius: 50%;
	margin-top: -6px;
	transform: scale(0)
}

body.simon-cuchillerias.studio .circles .circle-progress-bullets .bullet-project {
	position: absolute;
	height: 100%;
	width: 20px;
	left: 50%;
	margin-left: -10px
}

body.simon-cuchillerias.studio .circles .circle-progress-bullets .bullet-project span {
	transition: background-color 500ms cubic-bezier(0.47, 0, 0.745, 0.715);
	border: 2px solid #32302c;
	background-color: #1f1e1b;
	height: 20px;
	width: 20px;
	display: block;
	border-radius: 50%;
	margin-top: -10px;
	transform: scale(0)
}

body.simon-cuchillerias.studio .layout {
	position: absolute;
	width: 100%;
	height: 100%
}

body.simon-cuchillerias.studio .layout .gameboy {
	position: absolute;
	z-index: 100000;
	top: 20px;
	left: 50%
}

body.simon-cuchillerias.studio .transition {
	position: absolute;
	height: 100%;
	width: 100%;
	overflow: hidden;
	background-color: #f3f2ef;
	opacity: 0;
	visibility: hidden
}

body.simon-cuchillerias.studio .project {
	left: 50%;
	position: absolute;
	top: 50%;
	width: 50%;
	opacity: 0;
	visibility: hidden;
	padding-left: 120px;
	transform: translateY(-50%)
}

body.simon-cuchillerias.studio .project h1 {
	color: #a99475;
	font-family: "Teko", sans-serif;
	font-size: 72px;
	line-height: 60px;
	font-weight: 400;
	margin: 0 0 30px;
	white-space: nowrap;
	perspective: 400px;
	text-transform: uppercase
}

body.simon-cuchillerias.studio .project h1>span {
	display: block
}

body.simon-cuchillerias.studio .project h1>span span {
	display: inline-block;
	position: relative;
	transform-origin: top left
}

@media (max-width: 1250px) {
	body.simon-cuchillerias.studio .project {
		left: 0;
		width: 100%;
		top: auto;
		bottom: 0;
		padding: 0 20px 100px;
		transform: none
	}
	body.simon-cuchillerias.studio .project h1 {
		font-size: 72px;
		text-align: center
	}
	body.simon-cuchillerias.studio .project h1 div {
		display: inline-block
	}
}

@media (max-width: 600px) {
	body.simon-cuchillerias.studio .project {
		top: auto;
		bottom: 0;
		padding: 0 20px 100px
	}
	body.simon-cuchillerias.studio .project h1 {
		font-size: 48px;
		line-height: 48px;
		margin-bottom: 0
	}
}

@media (max-height: 500px) {
	body.simon-cuchillerias.studio .project {
		padding-left: 150px;
		padding-right: 150px;
		padding-bottom: 0;
		bottom: 50%;
		transform: translateY(50%)
	}
	body.simon-cuchillerias.studio .project h1 {
		text-align: center;
		display: flex;
		justify-content: center;
		font-size: 36px;
		line-height: 36px;
		margin-bottom: 20px
	}
	body.simon-cuchillerias.studio .project h1>span {
		display: inline-block;
		margin-right: 7px
	}
	body.simon-cuchillerias.studio .project h1>span:last-of-type {
		margin-right: 0
	}
}

@media (max-width: 600px) {
	body.simon-cuchillerias.studio.studio .line-aux,
	body.simon-cuchillerias.studio.about .line-aux {
		opacity: 0 !important;
		visibility: hidden !important
	}
}

@media (max-width: 1250px) {
	body.simon-cuchillerias.studio.about .line {
		opacity: 0
	}
}

@media (max-width: 600px) {
	body.simon-cuchillerias.studio.menu .project-link {
		transform: scale(0.8)
	}
}

body.guild-storm {
	transition: all 500ms cubic-bezier(0.47, 0, 0.745, 0.715);
	background: #190f10;
	color: #eee8fd;
	margin: 0;
	overflow: hidden;
	font-family: "Rubik", sans-serif;
	font-size: 14px;
	line-height: 20px
}

body.guild-storm a {
	transition: color 300ms cubic-bezier(0.47, 0, 0.745, 0.715);
	color: #93c1ef;
	text-decoration: none;
	display: inline-block
}

body.guild-storm a.fractured>span {
	display: inline-block
}

body.guild-storm a.fractured>span span {
	display: inline-block;
	font-family: "Rubik", sans-serif;
	line-height: 20px;
	text-transform: none
}

body.guild-storm a:hover {
	color: #c999cd
}

body.guild-storm .gradient {
	position: absolute;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
	opacity: 0.8
}

body.guild-storm .gradient stop {
	transition: all 500ms cubic-bezier(0.47, 0, 0.745, 0.715);
	stop-color: #774eca
}

body.guild-storm .gradient stop:last-of-type {
	stop-color: #475fce
}

body.guild-storm .circle-transition {
	position: absolute;
	height: 0;
	width: 0;
	border-radius: 50%;
	transform: translateX(-50%) translateY(-50%);
	left: 50%;
	top: 50%
}

body.guild-storm .logo {
	width: 250px;
	position: fixed;
	opacity: 1;
	z-index: 2;
	left: 80px;
	top: 60px;
	color: #93c1ef;
	cursor: pointer
}

body.guild-storm .logo.revert {
	color: #ff71aa
}

body.guild-storm .logo.revert svg {
	fill: #ff71aa
}

@media (max-width: 1250px) {
	body.guild-storm .logo {
		left: 50px;
		top: 40px
	}
}

@media (max-width: 600px) {
	body.guild-storm .logo {
		left: 20px;
		top: 20px
	}
}

body.guild-storm .logo h2 {
	transition: color 500ms cubic-bezier(0.47, 0, 0.745, 0.715);
	font-size: 18px;
	font-weight: 400;
	line-height: normal;
	margin: 8px 0 0;
	display: block
}

body.guild-storm .logo h3 {
	transition: color 500ms cubic-bezier(0.47, 0, 0.745, 0.715);
	font-size: 11px;
	text-transform: uppercase;
	font-weight: 700;
	margin: 0;
	letter-spacing: 0.45px;
	display: none
}

body.guild-storm .logo svg {
	transition: all 500ms cubic-bezier(0.47, 0, 0.745, 0.715);
	fill: #93c1ef;
	float: left;
	margin-right: 15px
}

@media (max-width: 600px) {
	body.guild-storm .logo h2,
	body.guild-storm .logo h3 {
		display: none
	}
}

@media (max-height: 500px) {
	body.guild-storm .logo h2,
	body.guild-storm .logo h3 {
		display: none
	}
}

body.guild-storm .mobile-menu {
	transition: fill 500ms cubic-bezier(0.47, 0, 0.745, 0.715);
	position: absolute;
	bottom: 33px;
	fill: #93c1ef;
	left: 20px;
	z-index: 2;
	cursor: pointer;
	opacity: 0;
	visibility: hidden;
	display: none
}

@media (max-width: 600px) {
	body.guild-storm .mobile-menu {
		display: block
	}
}

body.guild-storm .menu-top {
	position: fixed;
	right: 80px;
	z-index: 10;
	top: 70px
}

@media (max-width: 1250px) {
	body.guild-storm .menu-top {
		right: 50px;
		top: 50px
	}
}

@media (max-width: 600px) {
	body.guild-storm .menu-top {
		right: 20px;
		top: 30px
	}
}

body.guild-storm .menu-top a {
	padding: 20px;
	padding-right: 0;
	margin-top: -20px;
	opacity: 0;
	visibility: hidden;
	transform: translateY(-10px)
}

body.guild-storm .menu-top a span {
	display: inline-block
}

body.guild-storm .mouse-track {
	pointer-events: none;
	position: absolute;
	z-index: 1000;
	opacity: 0
}

body.guild-storm .mouse-track .outer-circle {
	stroke: #93c1ef;
	transform: translateX(-50%) translateY(-50%) rotate(-90deg);
	stroke-width: 2px;
	fill: none;
	height: 18px;
	width: 18px;
	overflow: visible;
	position: absolute
}

body.guild-storm .mouse-track .outer-circle .countdown {
	opacity: 0;
	stroke: #ff71aa;
	position: absolute;
	stroke-dashoffset: 125px;
	stroke-dasharray: 125px;
	stroke-width: 4px
}

body.guild-storm .mouse-track .inner-circle {
	stroke: #93c1ef;
	transform: translateX(-50%) translateY(-50%);
	stroke-width: 2px;
	fill: none;
	height: 2px;
	width: 2px;
	opacity: 0.6;
	overflow: visible;
	position: absolute
}

body.guild-storm .mouse-track .arrow-right {
	stroke: #ff71aa;
	opacity: 0;
	visibility: hidden;
	stroke-width: 2px;
	transform: rotate(180deg);
	margin-left: 10px;
	margin-top: -7px;
	position: absolute
}

body.guild-storm .mouse-track .arrow-left {
	stroke: #ff71aa;
	opacity: 0;
	margin-left: -20px;
	margin-top: -6px;
	visibility: hidden;
	stroke-width: 2px;
	position: absolute
}

body.guild-storm .mouse-track .play {
	fill: #93c1ef;
	opacity: 1;
	margin-top: -6px;
	stroke-width: 2px;
	margin-top: -18px;
	margin-left: -14px;
	transform: scale(0);
	position: absolute
}

body.guild-storm .mouse-track .stop {
	fill: #93c1ef;
	height: 38px;
	width: 38px;
	margin-left: -19px;
	margin-top: -19px;
	transform: scale(0);
	position: absolute
}

@media (max-width: 600px) {
	body.guild-storm .mouse-track {
		opacity: 0 !important;
		visibility: hidden !important
	}
}

body.guild-storm .about-page {
	position: absolute;
	height: 100%;
	width: 100%;
	padding: 40px;
	left: 0;
	opacity: 1;
	top: 0;
	display: flex;
	flex-direction: row;
	visibility: hidden;
	align-items: stretch
}

@media (max-width: 1250px) {
	body.guild-storm .about-page {
		padding: 20px
	}
}

@media (max-width: 600px) {
	body.guild-storm .about-page {
		flex-direction: column;
		padding: 0
	}
}

body.guild-storm .about-page.active .neon-sign {
	animation: flicker 10s infinite
}

body.guild-storm .about-page.active .split-left::before {
	width: 100%;
	bottom: 0
}

body.guild-storm .about-page.active .split-left.shaded::after {
	opacity: 1
}

body.guild-storm .about-page .split-left {
	opacity: 0;
	visibility: hidden;
	overflow: hidden
}

body.guild-storm .about-page .split-left.shaded::after {
	content: "Swipe or Scroll and click image to know more";
	padding-right: 20px;
	line-height: 100px;
	color: #b39be4;
	text-align: right;
	position: absolute;
	bottom: 0;
	width: 100%;
	opacity: 0;
	transition: all 500ms cubic-bezier(0.47, 0, 0.745, 0.715);
	transition-delay: 1;
	height: 100px;
	background-color: red;
	background: linear-gradient(transparent, #14141a 50%);
	pointer-events: none
}

body.guild-storm .about-page .split-left::before {
	transition: all 500ms cubic-bezier(0.47, 0, 0.745, 0.715);
	content: "";
	position: absolute;
	width: 0%;
	height: 100%;
	left: 0;
	background-color: #14141a;
	z-index: -1;
	bottom: 0
}

body.guild-storm .about-page>* {
	position: relative;
	z-index: 1;
	flex: 0 0 50%;
	display: flex;
	align-items: center
}

body.guild-storm .about-page .gradient-about {
	background-color: red;
	position: absolute;
	width: 100%;
	height: 100%;
	z-index: 1;
	top: 0;
	left: 0;
	-webkit-mask-image: url("../smoke-sprite.png");
	-webkit-mask-size: 3000% 100%;
	-webkit-mask-position-x: 0%;
	animation-iteration-count: 1;
	animation-delay: 1s
}

body.guild-storm .about-page .gradient-about.active {
	animation: mask 1.5s steps(29) forwards
}

body.guild-storm .about-page .gradient-about stop {
	transition: all 500ms cubic-bezier(0.47, 0, 0.745, 0.715);
	stop-color: #292038
}

body.guild-storm .about-page .gradient-about stop:last-of-type {
	stop-color: #18181d
}

@media (max-width: 600px) {
	body.guild-storm .about-page .gradient-about stop {
		transition: all 500ms cubic-bezier(0.47, 0, 0.745, 0.715);
		stop-color: #18181d
	}
	body.guild-storm .about-page .gradient-about stop:last-of-type {
		stop-color: #18181d
	}
}

body.guild-storm .about-page .about-text {
	position: absolute;
	padding: 120px;
	padding-right: 240px
}

body.guild-storm .about-page .about-text h1 {
	color: #ff71aa;
	white-space: nowrap;
	font-weight: 500;
	display: block;
	font-family: "Teko", sans-serif;
	text-transform: uppercase;
	font-size: 40px;
	line-height: 40px;
	margin-top: 10px;
	margin-bottom: 40px
}

@media (max-width: 600px) {
	body.guild-storm .about-page .about-text h1 {
		font-size: 28px;
		line-height: 28px;
		margin: 0 0 20px
	}
}

body.guild-storm .about-page .about-text h1>span {
	display: block
}

body.guild-storm .about-page .about-text h1>span span {
	display: inline-block
}

body.guild-storm .about-page .about-text p {
	opacity: 0;
	font-size: 16px;
	line-height: 32px
}

@media (max-width: 600px) {
	body.guild-storm .about-page .about-text p {
		line-height: 24px
	}
}

@media (max-width: 1250px) {
	body.guild-storm .about-page .about-text {
		padding-left: 40px;
		padding-right: 40px
	}
}

@media (max-width: 600px) {
	body.guild-storm .about-page .about-text {
		padding-left: 20px;
		padding-right: 20px
	}
}

body.guild-storm .about-page .about-render {
	position: absolute;
	visibility: hidden;
	top: 0%;
	opacity: 0;
	right: 0;
	width: 140%;
	height: 100%;
	transform: translateY(0) scale(1);
	z-index: 1;
	pointer-events: none
}

@media (max-width: 1250px) {
	body.guild-storm .about-page .about-render {
		width: 100%
	}
}

@media (max-width: 600px) {
	body.guild-storm .about-page .about-render {
		width: 100%
	}
}

body.guild-storm .about-page .about-render canvas {
	position: absolute;
	transform: translateY(-50%);
	top: 50%
}

body.guild-storm .about-page .neon-sign {
	opacity: 0;
	height: 570px;
	width: 140%;
	position: absolute;
	text-transform: uppercase;
	font-size: 46px;
	color: #ff0054;
	right: 260px;
	top: -30px;
	transform: scale(0.5) perspective(900px) translateZ(-300px) rotateY(-10deg) rotateX(0deg) rotateZ(0deg) skewY(9deg);
	filter: blur(2px) brightness(2)
}

body.guild-storm .about-page .neon-sign::before {
	content: "";
	width: 410px;
	height: 100%;
	position: absolute;
	left: 100%
}

@media (max-width: 1250px) {
	body.guild-storm .about-page .neon-sign {
		display: none
	}
}

@media (max-width: 600px) {
	body.guild-storm .about-page .neon-sign {
		display: none
	}
}

body.guild-storm .about-page .neon-sign::after {
	content: "";
	border: 6px solid #ff0054;
	width: 210px;
	height: 100%;
	position: absolute;
	right: 0
}

body.guild-storm .about-page .neon-sign.var-1 {
	transform: scale(0.7) perspective(900px) rotateY(-8deg) rotateX(0deg) rotateZ(0deg) skewY(9deg) translateX(150px)
}

body.guild-storm .about-page .neon-sign.var-2 {
	transform: scale(0.7) perspective(900px) rotateY(-6deg) rotateX(0deg) rotateZ(0deg) skewY(6deg) translateY(6px) translateX(140px)
}

body.guild-storm .about-page .neon-sign>* {
	position: absolute
}

body.guild-storm .about-page .neon-sign .code {
	top: 40px;
	right: 42px;
	animation: flicker 5s infinite
}

body.guild-storm .about-page .neon-sign .and {
	top: 94px;
	color: #00e4ff;
	font-size: 80px;
	right: 70px
}

body.guild-storm .about-page .neon-sign .design {
	top: 145px;
	right: 19px
}

body.guild-storm .about-page .neon-sign .key {
	animation: fade 2s steps(1) infinite;
	animation-direction: reverse;
	bottom: 45px;
	right: 53px
}

body.guild-storm .about-page .neon-sign .key-pressed {
	animation: fade 2s steps(1) infinite;
	animation-direction: normal;
	bottom: 40px;
	right: 19px
}

body.guild-storm .about-page .neon-sign .hand {
	animation: hand 2s steps(1) infinite;
	right: 30px;
	bottom: 100px
}

body.guild-storm .about-page .neon-sign .key-base {
	bottom: 20px;
	right: 45px
}

body.guild-storm .introduction {
	position: absolute;
	background-color: #774eca;
	height: 100%;
	width: 100%;
	top: 0;
	left: 0;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center
}

body.guild-storm .introduction .skip {
	padding: 30px;
	position: absolute;
	bottom: 50px;
	font-size: 16px;
	color: #eee8fd;
	cursor: pointer
}

body.guild-storm .intro-text {
	transition: color 500ms cubic-bezier(0.47, 0, 0.745, 0.715);
	position: absolute;
	bottom: 50%;
	z-index: 1;
	width: 100%;
	padding: 0 10px;
	text-align: center;
	font-size: 24px;
	color: #93c1ef
}

body.guild-storm .intro-text.tutorial {
	font-size: 16px;
	bottom: 70px
}

body.guild-storm .intro-text span {
	display: inline-block
}

@media (max-width: 1250px) {
	body.guild-storm .intro-text.tutorial {
		bottom: 40px
	}
}

@media (max-width: 600px) {
	body.guild-storm .intro-text {
		font-size: 16px
	}
	body.guild-storm .intro-text.tutorial {
		bottom: auto;
		top: 140px
	}
}

body.guild-storm .discover {
	opacity: 0;
	visibility: hidden;
	color: #ff71aa;
	position: absolute;
	bottom: 0;
	right: 0;
	height: 160px;
	width: 240px;
	z-index: 100;
	cursor: pointer
}

body.guild-storm .discover .open>span {
	position: absolute;
	height: 14px;
	width: 7px;
	bottom: 65px;
	right: 80px;
	transform: translateX(-80px)
}

body.guild-storm .discover .open>span::before {
	transition: all 300ms cubic-bezier(0.47, 0, 0.745, 0.715);
	transition-property: background-color, transform, opacity;
	transition-delay: 0s, 0.8s, 0.8s;
	content: "";
	position: absolute;
	border-radius: 10px 10px 20px 0;
	height: 8px;
	transform-origin: top left;
	width: 1.5px;
	background-color: #ff71aa;
	transform: rotate(-45deg) scaleY(4);
	opacity: 0
}

body.guild-storm .discover .open>span::after {
	transition: all 300ms cubic-bezier(0.47, 0, 0.745, 0.715);
	transition-property: background-color, transform, opacity;
	transition-delay: 0s, 1.1s, 1.1s;
	content: "";
	position: absolute;
	border-radius: 0 20px 10px 10px;
	height: 8px;
	transform-origin: bottom left;
	margin-top: 1px;
	width: 1.5px;
	background-color: #ff71aa;
	transform: rotate(45deg) scaleY(4);
	opacity: 0
}

body.guild-storm .discover .open.active>span::before {
	transform: rotate(-45deg) scaleY(1);
	opacity: 1;
	transition-delay: 0
}

body.guild-storm .discover .open.active>span::after {
	transform: rotate(45deg) scaleY(1);
	opacity: 1;
	transition-delay: 0
}

body.guild-storm .discover .close>span {
	position: absolute;
	height: 17px;
	width: 7px;
	bottom: 65px;
	right: 80px;
	transform: translateX(-57px)
}

body.guild-storm .discover .close>span::before {
	transition: all 300ms cubic-bezier(0.47, 0, 0.745, 0.715);
	transition-delay: 1.1s;
	content: "";
	position: absolute;
	border-radius: 5px;
	height: 15px;
	width: 2px;
	margin-left: -5px;
	margin-top: 1px;
	background-color: #ff71aa;
	transform-origin: top;
	transform: rotate(-45deg) scaleY(0)
}

body.guild-storm .discover .close>span::after {
	transition: all 300ms cubic-bezier(0.47, 0, 0.745, 0.715);
	transition-delay: 0.8s;
	content: "";
	position: absolute;
	border-radius: 5px;
	height: 15px;
	width: 2px;
	background-color: #ff71aa;
	transform-origin: bottom;
	margin-left: -5px;
	margin-top: -3px;
	transform: rotate(45deg) scaleY(0)
}

body.guild-storm .discover .close.active>span::before {
	transform: rotate(-45deg) scaleY(1);
	transition-delay: 0
}

body.guild-storm .discover .close.active>span::after {
	transform: rotate(45deg) scaleY(1);
	transition-delay: 0
}

body.guild-storm .discover .open,
body.guild-storm .discover .close {
	transition: all 300ms cubic-bezier(0.47, 0, 0.745, 0.715);
	height: 100%;
	position: absolute;
	width: 100%;
	left: 0;
	top: 0;
	opacity: 0
}

body.guild-storm .discover .open.active,
body.guild-storm .discover .close.active {
	opacity: 1
}

body.guild-storm .discover .open a span,
body.guild-storm .discover .close a span {
	transform: translateX(5px) translateY(5px);
	opacity: 0
}

body.guild-storm .discover .open.active a span,
body.guild-storm .discover .close.active a span {
	transform: translateX(0px) translateY(0px);
	opacity: 1
}

body.guild-storm .discover:hover {
	height: 200px;
	width: 300px
}

body.guild-storm .discover:hover a {
	color: #93c1ef
}

body.guild-storm .discover:hover svg {
	stroke: #eee8fd
}

body.guild-storm .discover>div>a {
	position: absolute;
	right: 80px;
	bottom: 65px
}

body.guild-storm .discover a span {
	position: relative;
	display: inline-block
}

@media (max-width: 1250px) {
	body.guild-storm .discover {
		height: 100px;
		width: 170px
	}
}

@media (max-width: 600px) {
	body.guild-storm .discover {
		height: 70px;
		width: 120px;
		z-index: 2
	}
	body.guild-storm .discover:hover {
		width: 100%;
		height: 90px
	}
}

body.guild-storm .line-aux {
	width: 45px;
	position: fixed;
	opacity: 1;
	height: 100px;
	left: 82px;
	bottom: 110px;
	z-index: 3;
	opacity: 0;
	visibility: hidden
}

@media (max-width: 1250px) {
	body.guild-storm .line-aux {
		left: 50px;
		bottom: 90px
	}
}

@media (max-width: 600px) {
	body.guild-storm .line-aux {
		left: 20px;
		bottom: 73px;
		visibility: hidden !important;
		opacity: 0 !important
	}
}

body.guild-storm .line-aux::after {
	transition: background-color 500ms cubic-bezier(0.47, 0, 0.745, 0.715);
	content: "";
	background-color: #7972d4;
	width: 2px;
	height: 10px;
	margin-left: -1px;
	left: 50%;
	bottom: -65px;
	position: absolute
}

body.guild-storm .line-aux .line {
	transition: background-color 500ms cubic-bezier(0.47, 0, 0.745, 0.715);
	width: 2px;
	background-color: #7972d4;
	height: 0;
	margin-left: -1px;
	left: 50%;
	margin-bottom: 10px;
	position: relative
}

@media (max-width: 600px) {
	body.guild-storm .line-aux .line {
		display: none
	}
}

@media (max-height: 500px) {
	body.guild-storm .line-aux .line {
		display: none
	}
}

body.guild-storm .line-aux .counter {
	transition: all 500ms cubic-bezier(0.47, 0, 0.745, 0.715);
	text-transform: uppercase;
	font-family: "Teko", sans-serif;
	font-weight: 500;
	font-size: 18px;
	color: #93c1ef;
	height: 50px;
	width: 100px;
	overflow: hidden;
	text-align: center;
	position: absolute;
	bottom: -50px;
	left: -27px
}

body.guild-storm .line-aux .counter .page {
	transition: color 500ms cubic-bezier(0.47, 0, 0.745, 0.715);
	position: absolute;
	right: 50%;
	margin-right: 7px;
	bottom: 20px;
	margin-bottom: 45px;
	text-align: right
}

body.guild-storm .line-aux .counter .divider {
	transition: color 500ms cubic-bezier(0.47, 0, 0.745, 0.715);
	position: absolute;
	left: 50%;
	color: #ff71aa;
	bottom: 12px;
	transform: translateX(-50%);
	margin-bottom: 45px
}

body.guild-storm .line-aux .counter .total {
	transition: color 500ms cubic-bezier(0.47, 0, 0.745, 0.715);
	left: 50%;
	margin-left: 7px;
	position: absolute;
	bottom: 5px;
	margin-bottom: 45px
}

body.guild-storm .scroll-position {
	width: 100%;
	position: absolute;
	bottom: 0;
	height: 2px;
	opacity: 0;
	z-index: 2;
	visibility: hidden
}

body.guild-storm .scroll-position span {
	position: relative;
	display: block;
	width: 50%;
	background-color: #ff71aa;
	height: 100%
}

body.guild-storm .line-scroll {
	position: absolute;
	z-index: 2;
	opacity: 0;
	visibility: hidden;
	height: 45px;
	width: 140px;
	left: 500px;
	bottom: 40px;
	overflow: hidden
}

body.guild-storm .line-scroll>span {
	position: absolute;
	content: "";
	background-color: #ff71aa;
	width: 50%;
	bottom: 0px;
	top: auto !important;
	height: 2px !important;
	z-index: 1;
	animation-name: example;
	animation-duration: 4s;
	animation-iteration-count: infinite
}

body.guild-storm .line-scroll::after {
	content: "->";
	position: absolute;
	color: #ff71aa;
	margin-left: 15px
}

@media (max-width: 1250px) {
	body.guild-storm .line-scroll {
		left: 480px;
		bottom: 20px
	}
}

@media (max-width: 600px) {
	body.guild-storm .line-scroll {
		left: 20px;
		bottom: 20px;
		height: 35px
	}
}

body.guild-storm .fireworks-plane {
	width: 600px;
	height: 600px;
	left: 340px;
	position: absolute;
	opacity: 0;
	top: 50%;
	transform: translateX(-50%) translateY(-50%) rotateY(180deg);
	perspective: 500px;
	z-index: 1
}

@media (max-width: 1250px) {
	body.guild-storm .fireworks-plane {
		transform: translateX(-50%) translateY(-50%) rotateY(180deg) scale(0.6)
	}
}

@media (max-width: 600px) {
	body.guild-storm .fireworks-plane {
		transform: translateX(-50%) translateY(-50%) rotateY(180deg) scale(0.4);
		left: 50%
	}
}

body.guild-storm .firework-1 {
	position: absolute;
	top: 280px;
	left: 50px;
	overflow: visible;
	stroke: #ff71aa;
	stroke-width: 10px;
	stroke-dashoffset: -358;
	transform: rotateX(40deg);
	stroke-dasharray: 0, 10000;
	stroke-linecap: round
}

body.guild-storm .firework-1:nth-of-type(2) {
	top: 230px;
	transform: rotateZ(20deg) rotateX(40deg)
}

body.guild-storm .firework-2>span {
	height: 100px;
	width: 4px;
	position: absolute;
	left: 190px;
	transform-origin: bottom;
	top: 145px
}

body.guild-storm .firework-2>span span {
	content: "";
	height: 0;
	background-color: #ff71aa;
	bottom: 0;
	width: 100%;
	position: absolute;
	border-radius: 2px
}

body.guild-storm .firework-2>span:nth-of-type(1) {
	transform: rotate(60deg)
}

body.guild-storm .firework-2>span:nth-of-type(2) {
	transform: rotate(120deg)
}

body.guild-storm .firework-2>span:nth-of-type(3) {
	transform: rotate(180deg)
}

body.guild-storm .firework-2>span:nth-of-type(4) {
	transform: rotate(240deg)
}

body.guild-storm .firework-2>span:nth-of-type(5) {
	transform: rotate(300deg)
}

body.guild-storm .firework-2>span:nth-of-type(6) {
	transform: rotate(360deg)
}

body.guild-storm .models {
	height: 100%;
	width: 100%;
	position: absolute;
	overflow: hidden;
	left: 0;
	top: 0;
	z-index: 1
}

body.guild-storm .models .project-link>* {
	position: absolute
}

body.guild-storm .models .project-link {
	position: absolute;
	height: 100%;
	opacity: 0;
	visibility: hidden;
	width: 100%;
	transform: perspective(1400px)
}

body.guild-storm .models .project-link.tech span {
	color: #5bf46d
}

body.guild-storm .models .project-link.tech span {
	color: #ff9273
}

body.guild-storm .models .project-link.non-tech span {
	color: #a07f5e
}

body.guild-storm .models .project-link.simon-cuchillerias span {
	color: #f7ce3c
}

body.guild-storm .models .project-link.guild-storm span {
	color: #f76565
}

@media (max-width: 600px) {
	body.guild-storm .models .project-link {
		transform: scale(0.5)
	}
}

body.guild-storm .models canvas {
	top: 0;
	z-index: 1
}

body.guild-storm .models .frame {
	stroke: rgba(238, 232, 253, 0.03);
	stroke-width: 85px;
	height: 600px;
	width: 600px;
	margin: 0;
	padding: 25px;
	border-radius: 50%
}

body.guild-storm .models h2 {
	top: 50%;
	left: 400px;
	opacity: 0;
	margin-top: -62px;
	font-size: 24px;
	font-weight: 400;
	white-space: nowrap;
	height: 24px
}

body.guild-storm .models small {
	top: 50%;
	left: 400px;
	margin-top: 25px;
	opacity: 0;
	text-transform: uppercase;
	white-space: nowrap
}

body.guild-storm .models span {
	top: 50%;
	font-family: "Teko", sans-serif;
	font-size: 18px;
	position: absolute;
	height: 0;
	overflow: hidden;
	margin-top: -45px;
	left: 400px
}

body.guild-storm .projects {
	position: absolute;
	width: 100%;
	height: 100%;
	z-index: 1
}

body.guild-storm .project-content {
	position: relative;
	z-index: 1
}

body.guild-storm .project-content .studio-wrap {
	height: 100%
}

body.guild-storm .project-content .studio-wrap .scene {
	height: 100%;
	width: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	position: absolute;
	transform: translateX(100%);
	top: 50%
}

body.guild-storm .project-content .studio-wrap .scene .image {
	padding: 40px;
	display: flex;
	align-items: center;
	align-self: stretch;
	justify-content: center
}

body.guild-storm .project-content .studio-wrap .scene .video {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 40px;
	position: relative
}

body.guild-storm .project-content .studio-wrap .scene .video .video-wrap {
	position: absolute;
	width: 100%;
	height: 100%;
	padding: 40px;
	pointer-events: none;
	z-index: 1
}

@media (max-width: 600px) {
	body.guild-storm .project-content .studio-wrap .scene .video::before {
		content: "";
		position: absolute;
		width: 30%;
		padding-top: 30%;
		border-radius: 50%;
		border: 2px solid #ff71aa
	}
	body.guild-storm .project-content .studio-wrap .scene .video::after {
		content: "";
		position: absolute;
		left: 50%;
		margin-left: -15px;
		border-left: 33px solid #93c1ef;
		border-top: 20px solid transparent;
		border-right: 20px solid transparent;
		border-bottom: 20px solid transparent
	}
}

body.guild-storm .project-content .studio-wrap .scene img {
	max-height: 100%;
	max-width: 100%
}

body.guild-storm .project-content .studio-wrap .scene .fractured {
	padding: 0
}

body.guild-storm .project-content .studio-wrap .scene h2 {
	font-weight: 500;
	display: block;
	font-family: "Teko", sans-serif;
	text-transform: uppercase;
	font-size: 40px;
	line-height: 40px;
	margin-top: 10px;
	margin-bottom: 40px
}

body.guild-storm .project-content .studio-wrap .scene h2 span {
	display: inline-block
}

body.guild-storm .project-content .studio-wrap .scene .text-title {
	color: #ff71aa
}

body.guild-storm .project-content .studio-wrap .scene .text-title small {
	color: #eee8fd;
	text-transform: uppercase;
	font-weight: bold
}

body.guild-storm .project-content .studio-wrap .scene .text-content {
	line-height: 36px;
	color: #93c1ef;
	font-size: 14px
}

@media (max-width: 600px) {
	body.guild-storm .project-content .studio-wrap .scene .text-content {
		line-height: 24px;
		font-size: 14px
	}
}

@media (max-height: 500px) {
	body.guild-storm .project-content .studio-wrap .scene .text-content {
		line-height: 24px
	}
}

body.guild-storm .project-content .studio-wrap .scene.split {
	flex-direction: row;
	align-items: stretch;
	padding: 40px
}

body.guild-storm .project-content .studio-wrap .scene.split>div {
	position: relative;
	padding: 20px 10%;
	display: flex;
	flex: 0 0 50%;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	overflow: hidden
}

@media (max-width: 600px) {
	body.guild-storm .project-content .studio-wrap .scene.split h2 {
		font-size: 28px;
		line-height: 28px;
		margin: 0 0 10px
	}
}

@media (max-height: 500px) {
	body.guild-storm .project-content .studio-wrap .scene.split h2 {
		font-size: 28px;
		line-height: 28px;
		margin: 0 0 10px
	}
}

body.guild-storm .project-content .studio-wrap .scene.split.variant {
	position: relative;
	overflow: hidden
}

body.guild-storm .project-content .studio-wrap .scene.split.variant .split-right {
	align-items: stretch;
	padding: 20px 0;
	flex-wrap: nowrap;
	overflow: visible
}

body.guild-storm .project-content .studio-wrap .scene.split.variant .split-right>div {
	position: absolute;
	top: 40px;
	bottom: 40px
}

body.guild-storm .project-content .studio-wrap .scene.split.variant .split-right>div img {
	max-width: none;
	max-height: 100%
}

@media (max-width: 1250px) {
	body.guild-storm .project-content .studio-wrap .scene.split {
		padding: 20px
	}
	body.guild-storm .project-content .studio-wrap .scene.split>div {
		padding: 20px
	}
}

@media (max-width: 600px) {
	body.guild-storm .project-content .studio-wrap .scene.split {
		flex-direction: column;
		padding: 0
	}
	body.guild-storm .project-content .studio-wrap .scene.split>div {
		padding: 20px;
		flex: auto
	}
	body.guild-storm .project-content .studio-wrap .scene.split.variant .split-right {
		padding: 0 20px
	}
	body.guild-storm .project-content .studio-wrap .scene.split.variant .split-right>div {
		left: 20px;
		right: 20px;
		top: 0;
		bottom: 0
	}
	body.guild-storm .project-content .studio-wrap .scene.split.variant .split-right>div img {
		max-width: 100%;
		max-height: none
	}
}

@media (max-height: 500px) {
	body.guild-storm .project-content .studio-wrap .scene.split {
		flex-direction: column;
		padding: 0
	}
	body.guild-storm .project-content .studio-wrap .scene.split>div {
		padding: 20px;
		flex: auto
	}
	body.guild-storm .project-content .studio-wrap .scene.split.variant .split-right {
		padding: 0 20px
	}
	body.guild-storm .project-content .studio-wrap .scene.split.variant .split-right>div {
		left: 20px;
		right: 20px;
		top: 0;
		bottom: 0
	}
	body.guild-storm .project-content .studio-wrap .scene.split.variant .split-right>div img {
		max-width: 100%;
		max-height: none
	}
}

body.guild-storm .project-content .studio-wrap .intro {
	align-items: flex-start;
	padding-left: 550px;
	width: calc(100% - 500px);
	padding-right: 20px
}

body.guild-storm .project-content .studio-wrap .intro h1 {
	font-family: "Teko", sans-serif;
	font-weight: 500;
	font-size: 72px;
	line-height: 54px;
	text-transform: uppercase;
	padding-right: 100px;
	margin: 20px 0
}

body.guild-storm .project-content .studio-wrap .intro h1>span {
	display: block
}

body.guild-storm .project-content .studio-wrap .intro h1>span span {
	display: inline-block
}

body.guild-storm .project-content .studio-wrap .intro h1 small {
	color: #ff71aa;
	display: block;
	margin-left: -52px;
	text-align: right;
	font-size: 46px;
	font-weight: 400;
	line-height: 46px;
	width: 50px;
	margin-bottom: -46px;
	height: 46px
}

@media (max-width: 1250px) {
	body.guild-storm .project-content .studio-wrap .intro {
		bottom: 20px;
		padding: 20px 0;
		max-width: 640px;
		width: 100%;
		align-items: stretch;
		justify-content: flex-end
	}
	body.guild-storm .project-content .studio-wrap .intro>div {
		height: auto;
		padding: 0 20px 80px;
		text-align: center
	}
	body.guild-storm .project-content .studio-wrap .intro h1 {
		display: inline-block;
		width: auto;
		font-size: 48px;
		text-align: center
	}
	body.guild-storm .project-content .studio-wrap .intro h1>span {
		display: inline-block
	}
	body.guild-storm .project-content .studio-wrap .intro h1 small {
		font-size: 18px;
		line-height: 36px
	}
}

@media (max-width: 600px) {
	body.guild-storm .project-content .studio-wrap .intro>div {
		padding-bottom: 100px
	}
	body.guild-storm .project-content .studio-wrap .intro>div h1 small {
		display: none
	}
}

@media (max-width: 1400px) {
	body.guild-storm .project-content .studio-wrap .intro h1.fractured {
		font-size: 48px;
		line-height: 48px;
		padding-right: 20px
	}
	body.guild-storm .project-content .studio-wrap .intro h1.fractured small {
		font-size: 24px;
		line-height: 32px
	}
}

@media (max-height: 500px) {
	body.guild-storm .project-content .studio-wrap .intro>div {
		height: auto;
		padding: 0 20px 80px
	}
	body.guild-storm .project-content .studio-wrap .intro h1 {
		font-size: 48px;
		line-height: 48px;
		margin-bottom: 0
	}
}

body.guild-storm .project-content .studio-next {
	width: 600px;
	max-width: 100%;
	position: absolute;
	border-bottom: 1px solid #7972d4;
	border-top: 1px solid #7972d4;
	top: 50%;
	margin-top: -50px;
	left: 100%;
	z-index: 1;
	padding-left: 40px;
	overflow: hidden
}

body.guild-storm .project-content .studio-next small {
	font-weight: bold;
	font-size: 11px;
	text-transform: uppercase;
	margin-bottom: -20px;
	margin-top: 10px;
	margin-left: 2px;
	display: block;
	color: #ff71aa
}

body.guild-storm .project-content .studio-next h4 {
	font-family: "Teko", sans-serif;
	text-transform: uppercase;
	font-size: 60px;
	font-weight: 500;
	margin: 30px 0
}

body.guild-storm .project-content .studio-next .button {
	transition: all 500ms cubic-bezier(0.47, 0, 0.745, 0.715);
	width: 40px;
	height: 40px;
	position: absolute;
	right: 30px;
	border: 1px solid #7972d4;
	top: 50%;
	transform: translateY(-50%)
}

body.guild-storm .project-content .studio-next .button::after {
	content: "";
	border-left: solid 3px #93c1ef;
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translateX(-50%) translateY(-50%);
	border-right: solid 3px transparent;
	border-top: solid 3px transparent;
	border-bottom: solid 3px transparent;
	height: 6px;
	width: 6px;
	display: block
}

body.guild-storm .project-content .studio-next .progress {
	background-color: #ff71aa;
	width: 0%;
	height: 1px;
	position: absolute;
	bottom: 0;
	left: 100%
}

body.guild-storm .project-content .studio-next.complete .button {
	border: 1px solid #ff71aa
}

@media (max-width: 600px) {
	body.guild-storm .project-content .studio-next small {
		margin-bottom: -18px
	}
	body.guild-storm .project-content .studio-next h4 {
		font-size: 40px;
		margin: 20px 0
	}
}

body.guild-storm .project-details {
	list-style: none;
	display: flex;
	padding: 0;
	padding-left: 2px;
	margin: 0
}

body.guild-storm .project-details li {
	opacity: 1;
	margin-bottom: 10px;
	position: relative;
	margin-right: 20px;
	font-family: "Teko", sans-serif;
	text-transform: uppercase;
	font-size: 18px;
	color: #93c1ef
}

body.guild-storm .project-details li:last-of-type {
	margin-right: 0
}

body.guild-storm .project-details small {
	color: #ff71aa;
	font-family: "Rubik", sans-serif;
	font-size: 10px;
	font-weight: 600;
	margin-bottom: -2px;
	display: block
}

@media (max-width: 1250px) {
	body.guild-storm .project-details {
		text-align: center;
		justify-content: center
	}
}

body.guild-storm .circles {
	position: absolute;
	z-index: 1;
	width: 100%;
	height: 100%
}

body.guild-storm .circles .circle-trail {
	stroke: #93c1ef;
	position: absolute;
	height: 550px;
	width: 550px;
	overflow: visible;
	border-radius: 50%;
	stroke-linecap: round;
	stroke-width: 1px;
	opacity: 0;
	stroke-dasharray: 0.2, 10.268;
	left: 50%;
	top: 50%;
	transform: translateY(-50%) translateX(-50%)
}

@media (max-width: 600px) {
	body.guild-storm .circles .circle-trail {
		height: 280px;
		width: 280px
	}
}

body.guild-storm .circles .circle-progress {
	stroke: #ff71aa;
	position: absolute;
	height: 550px;
	width: 550px;
	border-radius: 50%;
	overflow: visible;
	transform-origin: center;
	stroke-width: 1.5px;
	stroke-linecap: round;
	stroke-dasharray: 629;
	stroke-dashoffset: 629;
	left: 50%;
	opacity: 0;
	top: 50%;
	transform: translateY(-50%) translateX(-50%) rotate(270deg)
}

@media (max-width: 600px) {
	body.guild-storm .circles .circle-progress {
		height: 280px;
		width: 280px
	}
}

body.guild-storm .circles .circle-progress-bullets {
	height: 550px;
	width: 550px;
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translateY(-50%) translateX(-50%)
}

@media (max-width: 600px) {
	body.guild-storm .circles .circle-progress-bullets {
		height: 280px;
		width: 280px
	}
}

body.guild-storm .circles .circle-progress-bullets .bullet {
	width: 12px;
	height: 100%;
	display: block;
	position: absolute;
	left: 50%;
	margin-left: -6px
}

body.guild-storm .circles .circle-progress-bullets .bullet span {
	transition: border 500ms cubic-bezier(0.47, 0, 0.745, 0.715);
	border: 3px solid #ff71aa;
	background-color: #475fce;
	content: "";
	height: 12px;
	opacity: 0;
	width: 12px;
	display: block;
	border-radius: 50%;
	margin-top: -6px;
	transform: scale(0)
}

body.guild-storm .circles .circle-progress-bullets .bullet-project {
	position: absolute;
	height: 100%;
	width: 20px;
	left: 50%;
	margin-left: -10px
}

body.guild-storm .circles .circle-progress-bullets .bullet-project span {
	transition: background-color 500ms cubic-bezier(0.47, 0, 0.745, 0.715);
	border: 2px solid #7972d4;
	background-color: #5f57cc;
	height: 20px;
	width: 20px;
	display: block;
	border-radius: 50%;
	margin-top: -10px;
	transform: scale(0)
}

body.guild-storm .layout {
	position: absolute;
	width: 100%;
	height: 100%
}

body.guild-storm .layout .gameboy {
	position: absolute;
	z-index: 100000;
	top: 20px;
	left: 50%
}

body.guild-storm .transition {
	position: absolute;
	height: 100%;
	width: 100%;
	overflow: hidden;
	background-color: #f3f2ef;
	opacity: 0;
	visibility: hidden
}

body.guild-storm .project {
	left: 50%;
	position: absolute;
	top: 50%;
	width: 50%;
	opacity: 0;
	visibility: hidden;
	padding-left: 120px;
	transform: translateY(-50%)
}

body.guild-storm .project h1 {
	color: #93c1ef;
	font-family: "Teko", sans-serif;
	font-size: 72px;
	line-height: 60px;
	font-weight: 400;
	margin: 0 0 30px;
	white-space: nowrap;
	perspective: 400px;
	text-transform: uppercase
}

body.guild-storm .project h1>span {
	display: block
}

body.guild-storm .project h1>span span {
	display: inline-block;
	position: relative;
	transform-origin: top left
}

@media (max-width: 1250px) {
	body.guild-storm .project {
		left: 0;
		width: 100%;
		top: auto;
		bottom: 0;
		padding: 0 20px 100px;
		transform: none
	}
	body.guild-storm .project h1 {
		font-size: 72px;
		text-align: center
	}
	body.guild-storm .project h1 div {
		display: inline-block
	}
}

@media (max-width: 600px) {
	body.guild-storm .project {
		top: auto;
		bottom: 0;
		padding: 0 20px 100px
	}
	body.guild-storm .project h1 {
		font-size: 48px;
		line-height: 48px;
		margin-bottom: 0
	}
}

@media (max-height: 500px) {
	body.guild-storm .project {
		padding-left: 150px;
		padding-right: 150px;
		padding-bottom: 0;
		bottom: 50%;
		transform: translateY(50%)
	}
	body.guild-storm .project h1 {
		text-align: center;
		display: flex;
		justify-content: center;
		font-size: 36px;
		line-height: 36px;
		margin-bottom: 20px
	}
	body.guild-storm .project h1>span {
		display: inline-block;
		margin-right: 7px
	}
	body.guild-storm .project h1>span:last-of-type {
		margin-right: 0
	}
}

@media (max-width: 600px) {
	body.guild-storm.studio .line-aux,
	body.guild-storm.about .line-aux {
		opacity: 0 !important;
		visibility: hidden !important
	}
}

@media (max-width: 1250px) {
	body.guild-storm.about .line {
		opacity: 0
	}
}

@media (max-width: 600px) {
	body.guild-storm.menu .project-link {
		transform: scale(0.8)
	}
}

body.guild-storm.studio {
	transition: all 500ms cubic-bezier(0.47, 0, 0.745, 0.715);
	background: #190f10;
	color: #493234;
	margin: 0;
	overflow: hidden;
	font-family: "Rubik", sans-serif;
	font-size: 14px;
	line-height: 20px
}

body.guild-storm.studio a {
	transition: color 300ms cubic-bezier(0.47, 0, 0.745, 0.715);
	color: #d8c9d2;
	text-decoration: none;
	display: inline-block
}

body.guild-storm.studio a.fractured>span {
	display: inline-block
}

body.guild-storm.studio a.fractured>span span {
	display: inline-block;
	font-family: "Rubik", sans-serif;
	line-height: 20px;
	text-transform: none
}

body.guild-storm.studio a:hover {
	color: #98e0e7
}

body.guild-storm.studio .gradient {
	position: absolute;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
	opacity: 0.8
}

body.guild-storm.studio .gradient stop {
	transition: all 500ms cubic-bezier(0.47, 0, 0.745, 0.715);
	stop-color: #190f10
}

body.guild-storm.studio .gradient stop:last-of-type {
	stop-color: #190f10
}

body.guild-storm.studio .circle-transition {
	position: absolute;
	height: 0;
	width: 0;
	border-radius: 50%;
	transform: translateX(-50%) translateY(-50%);
	left: 50%;
	top: 50%
}

body.guild-storm.studio .logo {
	width: 250px;
	position: fixed;
	opacity: 1;
	z-index: 2;
	left: 80px;
	top: 60px;
	color: #d8c9d2;
	cursor: pointer
}

body.guild-storm.studio .logo.revert {
	color: #58f6fc
}

body.guild-storm.studio .logo.revert svg {
	fill: #58f6fc
}

@media (max-width: 1250px) {
	body.guild-storm.studio .logo {
		left: 50px;
		top: 40px
	}
}

@media (max-width: 600px) {
	body.guild-storm.studio .logo {
		left: 20px;
		top: 20px
	}
}

body.guild-storm.studio .logo h2 {
	transition: color 500ms cubic-bezier(0.47, 0, 0.745, 0.715);
	font-size: 18px;
	font-weight: 400;
	line-height: normal;
	margin: 8px 0 0;
	display: block
}

body.guild-storm.studio .logo h3 {
	transition: color 500ms cubic-bezier(0.47, 0, 0.745, 0.715);
	font-size: 11px;
	text-transform: uppercase;
	font-weight: 700;
	margin: 0;
	letter-spacing: 0.45px;
	display: none
}

body.guild-storm.studio .logo svg {
	transition: all 500ms cubic-bezier(0.47, 0, 0.745, 0.715);
	fill: #d8c9d2;
	float: left;
	margin-right: 15px
}

@media (max-width: 600px) {
	body.guild-storm.studio .logo h2,
	body.guild-storm.studio .logo h3 {
		display: none
	}
}

@media (max-height: 500px) {
	body.guild-storm.studio .logo h2,
	body.guild-storm.studio .logo h3 {
		display: none
	}
}

body.guild-storm.studio .mobile-menu {
	transition: fill 500ms cubic-bezier(0.47, 0, 0.745, 0.715);
	position: absolute;
	bottom: 33px;
	fill: #d8c9d2;
	left: 20px;
	z-index: 2;
	cursor: pointer;
	opacity: 0;
	visibility: hidden;
	display: none
}

@media (max-width: 600px) {
	body.guild-storm.studio .mobile-menu {
		display: block
	}
}

body.guild-storm.studio .menu-top {
	position: fixed;
	right: 80px;
	z-index: 10;
	top: 70px
}

@media (max-width: 1250px) {
	body.guild-storm.studio .menu-top {
		right: 50px;
		top: 50px
	}
}

@media (max-width: 600px) {
	body.guild-storm.studio .menu-top {
		right: 20px;
		top: 30px
	}
}

body.guild-storm.studio .menu-top a {
	padding: 20px;
	padding-right: 0;
	margin-top: -20px;
	opacity: 0;
	visibility: hidden;
	transform: translateY(-10px)
}

body.guild-storm.studio .menu-top a span {
	display: inline-block
}

body.guild-storm.studio .mouse-track {
	pointer-events: none;
	position: absolute;
	z-index: 1000;
	opacity: 0
}

body.guild-storm.studio .mouse-track .outer-circle {
	stroke: #d8c9d2;
	transform: translateX(-50%) translateY(-50%) rotate(-90deg);
	stroke-width: 2px;
	fill: none;
	height: 18px;
	width: 18px;
	overflow: visible;
	position: absolute
}

body.guild-storm.studio .mouse-track .outer-circle .countdown {
	opacity: 0;
	stroke: #58f6fc;
	position: absolute;
	stroke-dashoffset: 125px;
	stroke-dasharray: 125px;
	stroke-width: 4px
}

body.guild-storm.studio .mouse-track .inner-circle {
	stroke: #d8c9d2;
	transform: translateX(-50%) translateY(-50%);
	stroke-width: 2px;
	fill: none;
	height: 2px;
	width: 2px;
	opacity: 0.6;
	overflow: visible;
	position: absolute
}

body.guild-storm.studio .mouse-track .arrow-right {
	stroke: #58f6fc;
	opacity: 0;
	visibility: hidden;
	stroke-width: 2px;
	transform: rotate(180deg);
	margin-left: 10px;
	margin-top: -7px;
	position: absolute
}

body.guild-storm.studio .mouse-track .arrow-left {
	stroke: #58f6fc;
	opacity: 0;
	margin-left: -20px;
	margin-top: -6px;
	visibility: hidden;
	stroke-width: 2px;
	position: absolute
}

body.guild-storm.studio .mouse-track .play {
	fill: #d8c9d2;
	opacity: 1;
	margin-top: -6px;
	stroke-width: 2px;
	margin-top: -18px;
	margin-left: -14px;
	transform: scale(0);
	position: absolute
}

body.guild-storm.studio .mouse-track .stop {
	fill: #d8c9d2;
	height: 38px;
	width: 38px;
	margin-left: -19px;
	margin-top: -19px;
	transform: scale(0);
	position: absolute
}

@media (max-width: 600px) {
	body.guild-storm.studio .mouse-track {
		opacity: 0 !important;
		visibility: hidden !important
	}
}

body.guild-storm.studio .about-page {
	position: absolute;
	height: 100%;
	width: 100%;
	padding: 40px;
	left: 0;
	opacity: 1;
	top: 0;
	display: flex;
	flex-direction: row;
	visibility: hidden;
	align-items: stretch
}

@media (max-width: 1250px) {
	body.guild-storm.studio .about-page {
		padding: 20px
	}
}

@media (max-width: 600px) {
	body.guild-storm.studio .about-page {
		flex-direction: column;
		padding: 0
	}
}

body.guild-storm.studio .about-page.active .neon-sign {
	animation: flicker 10s infinite
}

body.guild-storm.studio .about-page.active .split-left::before {
	width: 100%;
	bottom: 0
}

body.guild-storm.studio .about-page.active .split-left.shaded::after {
	opacity: 1
}

body.guild-storm.studio .about-page .split-left {
	opacity: 0;
	visibility: hidden;
	overflow: hidden
}

body.guild-storm.studio .about-page .split-left.shaded::after {
	content: "Swipe or Scroll and click image to know more";
	padding-right: 20px;
	line-height: 100px;
	color: #312122;
	text-align: right;
	position: absolute;
	bottom: 0;
	width: 100%;
	opacity: 0;
	transition: all 500ms cubic-bezier(0.47, 0, 0.745, 0.715);
	transition-delay: 1;
	height: 100px;
	background-color: red;
	background: linear-gradient(transparent, #14141a 50%);
	pointer-events: none
}

body.guild-storm.studio .about-page .split-left::before {
	transition: all 500ms cubic-bezier(0.47, 0, 0.745, 0.715);
	content: "";
	position: absolute;
	width: 0%;
	height: 100%;
	left: 0;
	background-color: #14141a;
	z-index: -1;
	bottom: 0
}

body.guild-storm.studio .about-page>* {
	position: relative;
	z-index: 1;
	flex: 0 0 50%;
	display: flex;
	align-items: center
}

body.guild-storm.studio .about-page .gradient-about {
	background-color: red;
	position: absolute;
	width: 100%;
	height: 100%;
	z-index: 1;
	top: 0;
	left: 0;
	-webkit-mask-image: url("../smoke-sprite.png");
	-webkit-mask-size: 3000% 100%;
	-webkit-mask-position-x: 0%;
	animation-iteration-count: 1;
	animation-delay: 1s
}

body.guild-storm.studio .about-page .gradient-about.active {
	animation: mask 1.5s steps(29) forwards
}

body.guild-storm.studio .about-page .gradient-about stop {
	transition: all 500ms cubic-bezier(0.47, 0, 0.745, 0.715);
	stop-color: #292038
}

body.guild-storm.studio .about-page .gradient-about stop:last-of-type {
	stop-color: #18181d
}

@media (max-width: 600px) {
	body.guild-storm.studio .about-page .gradient-about stop {
		transition: all 500ms cubic-bezier(0.47, 0, 0.745, 0.715);
		stop-color: #18181d
	}
	body.guild-storm.studio .about-page .gradient-about stop:last-of-type {
		stop-color: #18181d
	}
}

body.guild-storm.studio .about-page .about-text {
	position: absolute;
	padding: 120px;
	padding-right: 240px
}

body.guild-storm.studio .about-page .about-text h1 {
	color: #58f6fc;
	white-space: nowrap;
	font-weight: 500;
	display: block;
	font-family: "Teko", sans-serif;
	text-transform: uppercase;
	font-size: 40px;
	line-height: 40px;
	margin-top: 10px;
	margin-bottom: 40px
}

@media (max-width: 600px) {
	body.guild-storm.studio .about-page .about-text h1 {
		font-size: 28px;
		line-height: 28px;
		margin: 0 0 20px
	}
}

body.guild-storm.studio .about-page .about-text h1>span {
	display: block
}

body.guild-storm.studio .about-page .about-text h1>span span {
	display: inline-block
}

body.guild-storm.studio .about-page .about-text p {
	opacity: 0;
	font-size: 16px;
	line-height: 32px
}

@media (max-width: 600px) {
	body.guild-storm.studio .about-page .about-text p {
		line-height: 24px
	}
}

@media (max-width: 1250px) {
	body.guild-storm.studio .about-page .about-text {
		padding-left: 40px;
		padding-right: 40px
	}
}

@media (max-width: 600px) {
	body.guild-storm.studio .about-page .about-text {
		padding-left: 20px;
		padding-right: 20px
	}
}

body.guild-storm.studio .about-page .about-render {
	position: absolute;
	visibility: hidden;
	top: 0%;
	opacity: 0;
	right: 0;
	width: 140%;
	height: 100%;
	transform: translateY(0) scale(1);
	z-index: 1;
	pointer-events: none
}

@media (max-width: 1250px) {
	body.guild-storm.studio .about-page .about-render {
		width: 100%
	}
}

@media (max-width: 600px) {
	body.guild-storm.studio .about-page .about-render {
		width: 100%
	}
}

body.guild-storm.studio .about-page .about-render canvas {
	position: absolute;
	transform: translateY(-50%);
	top: 50%
}

body.guild-storm.studio .about-page .neon-sign {
	opacity: 0;
	height: 570px;
	width: 140%;
	position: absolute;
	text-transform: uppercase;
	font-size: 46px;
	color: #ff0054;
	right: 260px;
	top: -30px;
	transform: scale(0.5) perspective(900px) translateZ(-300px) rotateY(-10deg) rotateX(0deg) rotateZ(0deg) skewY(9deg);
	filter: blur(2px) brightness(2)
}

body.guild-storm.studio .about-page .neon-sign::before {
	content: "";
	width: 410px;
	height: 100%;
	position: absolute;
	left: 100%
}

@media (max-width: 1250px) {
	body.guild-storm.studio .about-page .neon-sign {
		display: none
	}
}

@media (max-width: 600px) {
	body.guild-storm.studio .about-page .neon-sign {
		display: none
	}
}

body.guild-storm.studio .about-page .neon-sign::after {
	content: "";
	border: 6px solid #ff0054;
	width: 210px;
	height: 100%;
	position: absolute;
	right: 0
}

body.guild-storm.studio .about-page .neon-sign.var-1 {
	transform: scale(0.7) perspective(900px) rotateY(-8deg) rotateX(0deg) rotateZ(0deg) skewY(9deg) translateX(150px)
}

body.guild-storm.studio .about-page .neon-sign.var-2 {
	transform: scale(0.7) perspective(900px) rotateY(-6deg) rotateX(0deg) rotateZ(0deg) skewY(6deg) translateY(6px) translateX(140px)
}

body.guild-storm.studio .about-page .neon-sign>* {
	position: absolute
}

body.guild-storm.studio .about-page .neon-sign .code {
	top: 40px;
	right: 42px;
	animation: flicker 5s infinite
}

body.guild-storm.studio .about-page .neon-sign .and {
	top: 94px;
	color: #00e4ff;
	font-size: 80px;
	right: 70px
}

body.guild-storm.studio .about-page .neon-sign .design {
	top: 145px;
	right: 19px
}

body.guild-storm.studio .about-page .neon-sign .key {
	animation: fade 2s steps(1) infinite;
	animation-direction: reverse;
	bottom: 45px;
	right: 53px
}

body.guild-storm.studio .about-page .neon-sign .key-pressed {
	animation: fade 2s steps(1) infinite;
	animation-direction: normal;
	bottom: 40px;
	right: 19px
}

body.guild-storm.studio .about-page .neon-sign .hand {
	animation: hand 2s steps(1) infinite;
	right: 30px;
	bottom: 100px
}

body.guild-storm.studio .about-page .neon-sign .key-base {
	bottom: 20px;
	right: 45px
}

body.guild-storm.studio .introduction {
	position: absolute;
	background-color: #190f10;
	height: 100%;
	width: 100%;
	top: 0;
	left: 0;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center
}

body.guild-storm.studio .introduction .skip {
	padding: 30px;
	position: absolute;
	bottom: 50px;
	font-size: 16px;
	color: #493234;
	cursor: pointer
}

body.guild-storm.studio .intro-text {
	transition: color 500ms cubic-bezier(0.47, 0, 0.745, 0.715);
	position: absolute;
	bottom: 50%;
	z-index: 1;
	width: 100%;
	padding: 0 10px;
	text-align: center;
	font-size: 24px;
	color: #d8c9d2
}

body.guild-storm.studio .intro-text.tutorial {
	font-size: 16px;
	bottom: 70px
}

body.guild-storm.studio .intro-text span {
	display: inline-block
}

@media (max-width: 1250px) {
	body.guild-storm.studio .intro-text.tutorial {
		bottom: 40px
	}
}

@media (max-width: 600px) {
	body.guild-storm.studio .intro-text {
		font-size: 16px
	}
	body.guild-storm.studio .intro-text.tutorial {
		bottom: auto;
		top: 140px
	}
}

body.guild-storm.studio .discover {
	opacity: 0;
	visibility: hidden;
	color: #58f6fc;
	position: absolute;
	bottom: 0;
	right: 0;
	height: 160px;
	width: 240px;
	z-index: 100;
	cursor: pointer
}

body.guild-storm.studio .discover .open>span {
	position: absolute;
	height: 14px;
	width: 7px;
	bottom: 65px;
	right: 80px;
	transform: translateX(-80px)
}

body.guild-storm.studio .discover .open>span::before {
	transition: all 300ms cubic-bezier(0.47, 0, 0.745, 0.715);
	transition-property: background-color, transform, opacity;
	transition-delay: 0s, 0.8s, 0.8s;
	content: "";
	position: absolute;
	border-radius: 10px 10px 20px 0;
	height: 8px;
	transform-origin: top left;
	width: 1.5px;
	background-color: #58f6fc;
	transform: rotate(-45deg) scaleY(4);
	opacity: 0
}

body.guild-storm.studio .discover .open>span::after {
	transition: all 300ms cubic-bezier(0.47, 0, 0.745, 0.715);
	transition-property: background-color, transform, opacity;
	transition-delay: 0s, 1.1s, 1.1s;
	content: "";
	position: absolute;
	border-radius: 0 20px 10px 10px;
	height: 8px;
	transform-origin: bottom left;
	margin-top: 1px;
	width: 1.5px;
	background-color: #58f6fc;
	transform: rotate(45deg) scaleY(4);
	opacity: 0
}

body.guild-storm.studio .discover .open.active>span::before {
	transform: rotate(-45deg) scaleY(1);
	opacity: 1;
	transition-delay: 0
}

body.guild-storm.studio .discover .open.active>span::after {
	transform: rotate(45deg) scaleY(1);
	opacity: 1;
	transition-delay: 0
}

body.guild-storm.studio .discover .close>span {
	position: absolute;
	height: 17px;
	width: 7px;
	bottom: 65px;
	right: 80px;
	transform: translateX(-57px)
}

body.guild-storm.studio .discover .close>span::before {
	transition: all 300ms cubic-bezier(0.47, 0, 0.745, 0.715);
	transition-delay: 1.1s;
	content: "";
	position: absolute;
	border-radius: 5px;
	height: 15px;
	width: 2px;
	margin-left: -5px;
	margin-top: 1px;
	background-color: #58f6fc;
	transform-origin: top;
	transform: rotate(-45deg) scaleY(0)
}

body.guild-storm.studio .discover .close>span::after {
	transition: all 300ms cubic-bezier(0.47, 0, 0.745, 0.715);
	transition-delay: 0.8s;
	content: "";
	position: absolute;
	border-radius: 5px;
	height: 15px;
	width: 2px;
	background-color: #58f6fc;
	transform-origin: bottom;
	margin-left: -5px;
	margin-top: -3px;
	transform: rotate(45deg) scaleY(0)
}

body.guild-storm.studio .discover .close.active>span::before {
	transform: rotate(-45deg) scaleY(1);
	transition-delay: 0
}

body.guild-storm.studio .discover .close.active>span::after {
	transform: rotate(45deg) scaleY(1);
	transition-delay: 0
}

body.guild-storm.studio .discover .open,
body.guild-storm.studio .discover .close {
	transition: all 300ms cubic-bezier(0.47, 0, 0.745, 0.715);
	height: 100%;
	position: absolute;
	width: 100%;
	left: 0;
	top: 0;
	opacity: 0
}

body.guild-storm.studio .discover .open.active,
body.guild-storm.studio .discover .close.active {
	opacity: 1
}

body.guild-storm.studio .discover .open a span,
body.guild-storm.studio .discover .close a span {
	transform: translateX(5px) translateY(5px);
	opacity: 0
}

body.guild-storm.studio .discover .open.active a span,
body.guild-storm.studio .discover .close.active a span {
	transform: translateX(0px) translateY(0px);
	opacity: 1
}

body.guild-storm.studio .discover:hover {
	height: 200px;
	width: 300px
}

body.guild-storm.studio .discover:hover a {
	color: #d8c9d2
}

body.guild-storm.studio .discover:hover svg {
	stroke: #493234
}

body.guild-storm.studio .discover>div>a {
	position: absolute;
	right: 80px;
	bottom: 65px
}

body.guild-storm.studio .discover a span {
	position: relative;
	display: inline-block
}

@media (max-width: 1250px) {
	body.guild-storm.studio .discover {
		height: 100px;
		width: 170px
	}
}

@media (max-width: 600px) {
	body.guild-storm.studio .discover {
		height: 70px;
		width: 120px;
		z-index: 2
	}
	body.guild-storm.studio .discover:hover {
		width: 100%;
		height: 90px
	}
}

body.guild-storm.studio .line-aux {
	width: 45px;
	position: fixed;
	opacity: 1;
	height: 100px;
	left: 82px;
	bottom: 110px;
	z-index: 3;
	opacity: 0;
	visibility: hidden
}

@media (max-width: 1250px) {
	body.guild-storm.studio .line-aux {
		left: 50px;
		bottom: 90px
	}
}

@media (max-width: 600px) {
	body.guild-storm.studio .line-aux {
		left: 20px;
		bottom: 73px;
		visibility: hidden !important;
		opacity: 0 !important
	}
}

body.guild-storm.studio .line-aux::after {
	transition: background-color 500ms cubic-bezier(0.47, 0, 0.745, 0.715);
	content: "";
	background-color: #2f1c1e;
	width: 2px;
	height: 10px;
	margin-left: -1px;
	left: 50%;
	bottom: -65px;
	position: absolute
}

body.guild-storm.studio .line-aux .line {
	transition: background-color 500ms cubic-bezier(0.47, 0, 0.745, 0.715);
	width: 2px;
	background-color: #2f1c1e;
	height: 0;
	margin-left: -1px;
	left: 50%;
	margin-bottom: 10px;
	position: relative
}

@media (max-width: 600px) {
	body.guild-storm.studio .line-aux .line {
		display: none
	}
}

@media (max-height: 500px) {
	body.guild-storm.studio .line-aux .line {
		display: none
	}
}

body.guild-storm.studio .line-aux .counter {
	transition: all 500ms cubic-bezier(0.47, 0, 0.745, 0.715);
	text-transform: uppercase;
	font-family: "Teko", sans-serif;
	font-weight: 500;
	font-size: 18px;
	color: #d8c9d2;
	height: 50px;
	width: 100px;
	overflow: hidden;
	text-align: center;
	position: absolute;
	bottom: -50px;
	left: -27px
}

body.guild-storm.studio .line-aux .counter .page {
	transition: color 500ms cubic-bezier(0.47, 0, 0.745, 0.715);
	position: absolute;
	right: 50%;
	margin-right: 7px;
	bottom: 20px;
	margin-bottom: 45px;
	text-align: right
}

body.guild-storm.studio .line-aux .counter .divider {
	transition: color 500ms cubic-bezier(0.47, 0, 0.745, 0.715);
	position: absolute;
	left: 50%;
	color: #58f6fc;
	bottom: 12px;
	transform: translateX(-50%);
	margin-bottom: 45px
}

body.guild-storm.studio .line-aux .counter .total {
	transition: color 500ms cubic-bezier(0.47, 0, 0.745, 0.715);
	left: 50%;
	margin-left: 7px;
	position: absolute;
	bottom: 5px;
	margin-bottom: 45px
}

body.guild-storm.studio .scroll-position {
	width: 100%;
	position: absolute;
	bottom: 0;
	height: 2px;
	opacity: 0;
	z-index: 2;
	visibility: hidden
}

body.guild-storm.studio .scroll-position span {
	position: relative;
	display: block;
	width: 50%;
	background-color: #58f6fc;
	height: 100%
}

body.guild-storm.studio .line-scroll {
	position: absolute;
	z-index: 2;
	opacity: 0;
	visibility: hidden;
	height: 45px;
	width: 140px;
	left: 500px;
	bottom: 40px;
	overflow: hidden
}

body.guild-storm.studio .line-scroll>span {
	position: absolute;
	content: "";
	background-color: #58f6fc;
	width: 50%;
	bottom: 0px;
	top: auto !important;
	height: 2px !important;
	z-index: 1;
	animation-name: example;
	animation-duration: 4s;
	animation-iteration-count: infinite
}

body.guild-storm.studio .line-scroll::after {
	content: "->";
	position: absolute;
	color: #58f6fc;
	margin-left: 15px
}

@media (max-width: 1250px) {
	body.guild-storm.studio .line-scroll {
		left: 480px;
		bottom: 20px
	}
}

@media (max-width: 600px) {
	body.guild-storm.studio .line-scroll {
		left: 20px;
		bottom: 20px;
		height: 35px
	}
}

body.guild-storm.studio .fireworks-plane {
	width: 600px;
	height: 600px;
	left: 340px;
	position: absolute;
	opacity: 0;
	top: 50%;
	transform: translateX(-50%) translateY(-50%) rotateY(180deg);
	perspective: 500px;
	z-index: 1
}

@media (max-width: 1250px) {
	body.guild-storm.studio .fireworks-plane {
		transform: translateX(-50%) translateY(-50%) rotateY(180deg) scale(0.6)
	}
}

@media (max-width: 600px) {
	body.guild-storm.studio .fireworks-plane {
		transform: translateX(-50%) translateY(-50%) rotateY(180deg) scale(0.4);
		left: 50%
	}
}

body.guild-storm.studio .firework-1 {
	position: absolute;
	top: 280px;
	left: 50px;
	overflow: visible;
	stroke: #58f6fc;
	stroke-width: 10px;
	stroke-dashoffset: -358;
	transform: rotateX(40deg);
	stroke-dasharray: 0, 10000;
	stroke-linecap: round
}

body.guild-storm.studio .firework-1:nth-of-type(2) {
	top: 230px;
	transform: rotateZ(20deg) rotateX(40deg)
}

body.guild-storm.studio .firework-2>span {
	height: 100px;
	width: 4px;
	position: absolute;
	left: 190px;
	transform-origin: bottom;
	top: 145px
}

body.guild-storm.studio .firework-2>span span {
	content: "";
	height: 0;
	background-color: #58f6fc;
	bottom: 0;
	width: 100%;
	position: absolute;
	border-radius: 2px
}

body.guild-storm.studio .firework-2>span:nth-of-type(1) {
	transform: rotate(60deg)
}

body.guild-storm.studio .firework-2>span:nth-of-type(2) {
	transform: rotate(120deg)
}

body.guild-storm.studio .firework-2>span:nth-of-type(3) {
	transform: rotate(180deg)
}

body.guild-storm.studio .firework-2>span:nth-of-type(4) {
	transform: rotate(240deg)
}

body.guild-storm.studio .firework-2>span:nth-of-type(5) {
	transform: rotate(300deg)
}

body.guild-storm.studio .firework-2>span:nth-of-type(6) {
	transform: rotate(360deg)
}

body.guild-storm.studio .models {
	height: 100%;
	width: 100%;
	position: absolute;
	overflow: hidden;
	left: 0;
	top: 0;
	z-index: 1
}

body.guild-storm.studio .models .project-link>* {
	position: absolute
}

body.guild-storm.studio .models .project-link {
	position: absolute;
	height: 100%;
	opacity: 0;
	visibility: hidden;
	width: 100%;
	transform: perspective(1400px)
}

body.guild-storm.studio .models .project-link.tech span {
	color: #5bf46d
}

body.guild-storm.studio .models .project-link.tech span {
	color: #ff9273
}

body.guild-storm.studio .models .project-link.non-tech span {
	color: #a07f5e
}

body.guild-storm.studio .models .project-link.simon-cuchillerias span {
	color: #f7ce3c
}

body.guild-storm.studio .models .project-link.guild-storm span {
	color: #f76565
}

@media (max-width: 600px) {
	body.guild-storm.studio .models .project-link {
		transform: scale(0.5)
	}
}

body.guild-storm.studio .models canvas {
	top: 0;
	z-index: 1
}

body.guild-storm.studio .models .frame {
	stroke: rgba(73, 50, 52, 0.03);
	stroke-width: 85px;
	height: 600px;
	width: 600px;
	margin: 0;
	padding: 25px;
	border-radius: 50%
}

body.guild-storm.studio .models h2 {
	top: 50%;
	left: 400px;
	opacity: 0;
	margin-top: -62px;
	font-size: 24px;
	font-weight: 400;
	white-space: nowrap;
	height: 24px
}

body.guild-storm.studio .models small {
	top: 50%;
	left: 400px;
	margin-top: 25px;
	opacity: 0;
	text-transform: uppercase;
	white-space: nowrap
}

body.guild-storm.studio .models span {
	top: 50%;
	font-family: "Teko", sans-serif;
	font-size: 18px;
	position: absolute;
	height: 0;
	overflow: hidden;
	margin-top: -45px;
	left: 400px
}

body.guild-storm.studio .projects {
	position: absolute;
	width: 100%;
	height: 100%;
	z-index: 1
}

body.guild-storm.studio .project-content {
	position: relative;
	z-index: 1
}

body.guild-storm.studio .project-content .studio-wrap {
	height: 100%
}

body.guild-storm.studio .project-content .studio-wrap .scene {
	height: 100%;
	width: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	position: absolute;
	transform: translateX(100%);
	top: 50%
}

body.guild-storm.studio .project-content .studio-wrap .scene .image {
	padding: 40px;
	display: flex;
	align-items: center;
	align-self: stretch;
	justify-content: center
}

body.guild-storm.studio .project-content .studio-wrap .scene .video {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 40px;
	position: relative
}

body.guild-storm.studio .project-content .studio-wrap .scene .video .video-wrap {
	position: absolute;
	width: 100%;
	height: 100%;
	padding: 40px;
	pointer-events: none;
	z-index: 1
}

@media (max-width: 600px) {
	body.guild-storm.studio .project-content .studio-wrap .scene .video::before {
		content: "";
		position: absolute;
		width: 30%;
		padding-top: 30%;
		border-radius: 50%;
		border: 2px solid #58f6fc
	}
	body.guild-storm.studio .project-content .studio-wrap .scene .video::after {
		content: "";
		position: absolute;
		left: 50%;
		margin-left: -15px;
		border-left: 33px solid #d8c9d2;
		border-top: 20px solid transparent;
		border-right: 20px solid transparent;
		border-bottom: 20px solid transparent
	}
}

body.guild-storm.studio .project-content .studio-wrap .scene img {
	max-height: 100%;
	max-width: 100%
}

body.guild-storm.studio .project-content .studio-wrap .scene .fractured {
	padding: 0
}

body.guild-storm.studio .project-content .studio-wrap .scene h2 {
	font-weight: 500;
	display: block;
	font-family: "Teko", sans-serif;
	text-transform: uppercase;
	font-size: 40px;
	line-height: 40px;
	margin-top: 10px;
	margin-bottom: 40px
}

body.guild-storm.studio .project-content .studio-wrap .scene h2 span {
	display: inline-block
}

body.guild-storm.studio .project-content .studio-wrap .scene .text-title {
	color: #58f6fc
}

body.guild-storm.studio .project-content .studio-wrap .scene .text-title small {
	color: #493234;
	text-transform: uppercase;
	font-weight: bold
}

body.guild-storm.studio .project-content .studio-wrap .scene .text-content {
	line-height: 36px;
	color: #d8c9d2;
	font-size: 14px
}

@media (max-width: 600px) {
	body.guild-storm.studio .project-content .studio-wrap .scene .text-content {
		line-height: 24px;
		font-size: 14px
	}
}

@media (max-height: 500px) {
	body.guild-storm.studio .project-content .studio-wrap .scene .text-content {
		line-height: 24px
	}
}

body.guild-storm.studio .project-content .studio-wrap .scene.split {
	flex-direction: row;
	align-items: stretch;
	padding: 40px
}

body.guild-storm.studio .project-content .studio-wrap .scene.split>div {
	position: relative;
	padding: 20px 10%;
	display: flex;
	flex: 0 0 50%;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	overflow: hidden
}

@media (max-width: 600px) {
	body.guild-storm.studio .project-content .studio-wrap .scene.split h2 {
		font-size: 28px;
		line-height: 28px;
		margin: 0 0 10px
	}
}

@media (max-height: 500px) {
	body.guild-storm.studio .project-content .studio-wrap .scene.split h2 {
		font-size: 28px;
		line-height: 28px;
		margin: 0 0 10px
	}
}

body.guild-storm.studio .project-content .studio-wrap .scene.split.variant {
	position: relative;
	overflow: hidden
}

body.guild-storm.studio .project-content .studio-wrap .scene.split.variant .split-right {
	align-items: stretch;
	padding: 20px 0;
	flex-wrap: nowrap;
	overflow: visible
}

body.guild-storm.studio .project-content .studio-wrap .scene.split.variant .split-right>div {
	position: absolute;
	top: 40px;
	bottom: 40px
}

body.guild-storm.studio .project-content .studio-wrap .scene.split.variant .split-right>div img {
	max-width: none;
	max-height: 100%
}

@media (max-width: 1250px) {
	body.guild-storm.studio .project-content .studio-wrap .scene.split {
		padding: 20px
	}
	body.guild-storm.studio .project-content .studio-wrap .scene.split>div {
		padding: 20px
	}
}

@media (max-width: 600px) {
	body.guild-storm.studio .project-content .studio-wrap .scene.split {
		flex-direction: column;
		padding: 0
	}
	body.guild-storm.studio .project-content .studio-wrap .scene.split>div {
		padding: 20px;
		flex: auto
	}
	body.guild-storm.studio .project-content .studio-wrap .scene.split.variant .split-right {
		padding: 0 20px
	}
	body.guild-storm.studio .project-content .studio-wrap .scene.split.variant .split-right>div {
		left: 20px;
		right: 20px;
		top: 0;
		bottom: 0
	}
	body.guild-storm.studio .project-content .studio-wrap .scene.split.variant .split-right>div img {
		max-width: 100%;
		max-height: none
	}
}

@media (max-height: 500px) {
	body.guild-storm.studio .project-content .studio-wrap .scene.split {
		flex-direction: column;
		padding: 0
	}
	body.guild-storm.studio .project-content .studio-wrap .scene.split>div {
		padding: 20px;
		flex: auto
	}
	body.guild-storm.studio .project-content .studio-wrap .scene.split.variant .split-right {
		padding: 0 20px
	}
	body.guild-storm.studio .project-content .studio-wrap .scene.split.variant .split-right>div {
		left: 20px;
		right: 20px;
		top: 0;
		bottom: 0
	}
	body.guild-storm.studio .project-content .studio-wrap .scene.split.variant .split-right>div img {
		max-width: 100%;
		max-height: none
	}
}

body.guild-storm.studio .project-content .studio-wrap .intro {
	align-items: flex-start;
	padding-left: 550px;
	width: calc(100% - 500px);
	padding-right: 20px
}

body.guild-storm.studio .project-content .studio-wrap .intro h1 {
	font-family: "Teko", sans-serif;
	font-weight: 500;
	font-size: 72px;
	line-height: 54px;
	text-transform: uppercase;
	padding-right: 100px;
	margin: 20px 0
}

body.guild-storm.studio .project-content .studio-wrap .intro h1>span {
	display: block
}

body.guild-storm.studio .project-content .studio-wrap .intro h1>span span {
	display: inline-block
}

body.guild-storm.studio .project-content .studio-wrap .intro h1 small {
	color: #58f6fc;
	display: block;
	margin-left: -52px;
	text-align: right;
	font-size: 46px;
	font-weight: 400;
	line-height: 46px;
	width: 50px;
	margin-bottom: -46px;
	height: 46px
}

@media (max-width: 1250px) {
	body.guild-storm.studio .project-content .studio-wrap .intro {
		bottom: 20px;
		padding: 20px 0;
		max-width: 640px;
		width: 100%;
		align-items: stretch;
		justify-content: flex-end
	}
	body.guild-storm.studio .project-content .studio-wrap .intro>div {
		height: auto;
		padding: 0 20px 80px;
		text-align: center
	}
	body.guild-storm.studio .project-content .studio-wrap .intro h1 {
		display: inline-block;
		width: auto;
		font-size: 48px;
		text-align: center
	}
	body.guild-storm.studio .project-content .studio-wrap .intro h1>span {
		display: inline-block
	}
	body.guild-storm.studio .project-content .studio-wrap .intro h1 small {
		font-size: 18px;
		line-height: 36px
	}
}

@media (max-width: 600px) {
	body.guild-storm.studio .project-content .studio-wrap .intro>div {
		padding-bottom: 100px
	}
	body.guild-storm.studio .project-content .studio-wrap .intro>div h1 small {
		display: none
	}
}

@media (max-width: 1400px) {
	body.guild-storm.studio .project-content .studio-wrap .intro h1.fractured {
		font-size: 48px;
		line-height: 48px;
		padding-right: 20px
	}
	body.guild-storm.studio .project-content .studio-wrap .intro h1.fractured small {
		font-size: 24px;
		line-height: 32px
	}
}

@media (max-height: 500px) {
	body.guild-storm.studio .project-content .studio-wrap .intro>div {
		height: auto;
		padding: 0 20px 80px
	}
	body.guild-storm.studio .project-content .studio-wrap .intro h1 {
		font-size: 48px;
		line-height: 48px;
		margin-bottom: 0
	}
}

body.guild-storm.studio .project-content .studio-next {
	width: 600px;
	max-width: 100%;
	position: absolute;
	border-bottom: 1px solid #2f1c1e;
	border-top: 1px solid #2f1c1e;
	top: 50%;
	margin-top: -50px;
	left: 100%;
	z-index: 1;
	padding-left: 40px;
	overflow: hidden
}

body.guild-storm.studio .project-content .studio-next small {
	font-weight: bold;
	font-size: 11px;
	text-transform: uppercase;
	margin-bottom: -20px;
	margin-top: 10px;
	margin-left: 2px;
	display: block;
	color: #58f6fc
}

body.guild-storm.studio .project-content .studio-next h4 {
	font-family: "Teko", sans-serif;
	text-transform: uppercase;
	font-size: 60px;
	font-weight: 500;
	margin: 30px 0
}

body.guild-storm.studio .project-content .studio-next .button {
	transition: all 500ms cubic-bezier(0.47, 0, 0.745, 0.715);
	width: 40px;
	height: 40px;
	position: absolute;
	right: 30px;
	border: 1px solid #2f1c1e;
	top: 50%;
	transform: translateY(-50%)
}

body.guild-storm.studio .project-content .studio-next .button::after {
	content: "";
	border-left: solid 3px #d8c9d2;
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translateX(-50%) translateY(-50%);
	border-right: solid 3px transparent;
	border-top: solid 3px transparent;
	border-bottom: solid 3px transparent;
	height: 6px;
	width: 6px;
	display: block
}

body.guild-storm.studio .project-content .studio-next .progress {
	background-color: #58f6fc;
	width: 0%;
	height: 1px;
	position: absolute;
	bottom: 0;
	left: 100%
}

body.guild-storm.studio .project-content .studio-next.complete .button {
	border: 1px solid #58f6fc
}

@media (max-width: 600px) {
	body.guild-storm.studio .project-content .studio-next small {
		margin-bottom: -18px
	}
	body.guild-storm.studio .project-content .studio-next h4 {
		font-size: 40px;
		margin: 20px 0
	}
}

body.guild-storm.studio .project-details {
	list-style: none;
	display: flex;
	padding: 0;
	padding-left: 2px;
	margin: 0
}

body.guild-storm.studio .project-details li {
	opacity: 1;
	margin-bottom: 10px;
	position: relative;
	margin-right: 20px;
	font-family: "Teko", sans-serif;
	text-transform: uppercase;
	font-size: 18px;
	color: #d8c9d2
}

body.guild-storm.studio .project-details li:last-of-type {
	margin-right: 0
}

body.guild-storm.studio .project-details small {
	color: #58f6fc;
	font-family: "Rubik", sans-serif;
	font-size: 10px;
	font-weight: 600;
	margin-bottom: -2px;
	display: block
}

@media (max-width: 1250px) {
	body.guild-storm.studio .project-details {
		text-align: center;
		justify-content: center
	}
}

body.guild-storm.studio .circles {
	position: absolute;
	z-index: 1;
	width: 100%;
	height: 100%
}

body.guild-storm.studio .circles .circle-trail {
	stroke: #d8c9d2;
	position: absolute;
	height: 550px;
	width: 550px;
	overflow: visible;
	border-radius: 50%;
	stroke-linecap: round;
	stroke-width: 1px;
	opacity: 0;
	stroke-dasharray: 0.2, 10.268;
	left: 50%;
	top: 50%;
	transform: translateY(-50%) translateX(-50%)
}

@media (max-width: 600px) {
	body.guild-storm.studio .circles .circle-trail {
		height: 280px;
		width: 280px
	}
}

body.guild-storm.studio .circles .circle-progress {
	stroke: #58f6fc;
	position: absolute;
	height: 550px;
	width: 550px;
	border-radius: 50%;
	overflow: visible;
	transform-origin: center;
	stroke-width: 1.5px;
	stroke-linecap: round;
	stroke-dasharray: 629;
	stroke-dashoffset: 629;
	left: 50%;
	opacity: 0;
	top: 50%;
	transform: translateY(-50%) translateX(-50%) rotate(270deg)
}

@media (max-width: 600px) {
	body.guild-storm.studio .circles .circle-progress {
		height: 280px;
		width: 280px
	}
}

body.guild-storm.studio .circles .circle-progress-bullets {
	height: 550px;
	width: 550px;
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translateY(-50%) translateX(-50%)
}

@media (max-width: 600px) {
	body.guild-storm.studio .circles .circle-progress-bullets {
		height: 280px;
		width: 280px
	}
}

body.guild-storm.studio .circles .circle-progress-bullets .bullet {
	width: 12px;
	height: 100%;
	display: block;
	position: absolute;
	left: 50%;
	margin-left: -6px
}

body.guild-storm.studio .circles .circle-progress-bullets .bullet span {
	transition: border 500ms cubic-bezier(0.47, 0, 0.745, 0.715);
	border: 3px solid #58f6fc;
	background-color: #190f10;
	content: "";
	height: 12px;
	opacity: 0;
	width: 12px;
	display: block;
	border-radius: 50%;
	margin-top: -6px;
	transform: scale(0)
}

body.guild-storm.studio .circles .circle-progress-bullets .bullet-project {
	position: absolute;
	height: 100%;
	width: 20px;
	left: 50%;
	margin-left: -10px
}

body.guild-storm.studio .circles .circle-progress-bullets .bullet-project span {
	transition: background-color 500ms cubic-bezier(0.47, 0, 0.745, 0.715);
	border: 2px solid #2f1c1e;
	background-color: #190f10;
	height: 20px;
	width: 20px;
	display: block;
	border-radius: 50%;
	margin-top: -10px;
	transform: scale(0)
}

body.guild-storm.studio .layout {
	position: absolute;
	width: 100%;
	height: 100%
}

body.guild-storm.studio .layout .gameboy {
	position: absolute;
	z-index: 100000;
	top: 20px;
	left: 50%
}

body.guild-storm.studio .transition {
	position: absolute;
	height: 100%;
	width: 100%;
	overflow: hidden;
	background-color: #f3f2ef;
	opacity: 0;
	visibility: hidden
}

body.guild-storm.studio .project {
	left: 50%;
	position: absolute;
	top: 50%;
	width: 50%;
	opacity: 0;
	visibility: hidden;
	padding-left: 120px;
	transform: translateY(-50%)
}

body.guild-storm.studio .project h1 {
	color: #d8c9d2;
	font-family: "Teko", sans-serif;
	font-size: 72px;
	line-height: 60px;
	font-weight: 400;
	margin: 0 0 30px;
	white-space: nowrap;
	perspective: 400px;
	text-transform: uppercase
}

body.guild-storm.studio .project h1>span {
	display: block
}

body.guild-storm.studio .project h1>span span {
	display: inline-block;
	position: relative;
	transform-origin: top left
}

@media (max-width: 1250px) {
	body.guild-storm.studio .project {
		left: 0;
		width: 100%;
		top: auto;
		bottom: 0;
		padding: 0 20px 100px;
		transform: none
	}
	body.guild-storm.studio .project h1 {
		font-size: 72px;
		text-align: center
	}
	body.guild-storm.studio .project h1 div {
		display: inline-block
	}
}

@media (max-width: 600px) {
	body.guild-storm.studio .project {
		top: auto;
		bottom: 0;
		padding: 0 20px 100px
	}
	body.guild-storm.studio .project h1 {
		font-size: 48px;
		line-height: 48px;
		margin-bottom: 0
	}
}

@media (max-height: 500px) {
	body.guild-storm.studio .project {
		padding-left: 150px;
		padding-right: 150px;
		padding-bottom: 0;
		bottom: 50%;
		transform: translateY(50%)
	}
	body.guild-storm.studio .project h1 {
		text-align: center;
		display: flex;
		justify-content: center;
		font-size: 36px;
		line-height: 36px;
		margin-bottom: 20px
	}
	body.guild-storm.studio .project h1>span {
		display: inline-block;
		margin-right: 7px
	}
	body.guild-storm.studio .project h1>span:last-of-type {
		margin-right: 0
	}
}

@media (max-width: 600px) {
	body.guild-storm.studio.studio .line-aux,
	body.guild-storm.studio.about .line-aux {
		opacity: 0 !important;
		visibility: hidden !important
	}
}

@media (max-width: 1250px) {
	body.guild-storm.studio.about .line {
		opacity: 0
	}
}

@media (max-width: 600px) {
	body.guild-storm.studio.menu .project-link {
		transform: scale(0.8)
	}
}

*,
*::before,
*::after {
	box-sizing: border-box;
	touch-action: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none
}

input,
textarea {
	-webkit-user-select: auto !important;
	-khtml-user-select: auto !important;
	-moz-user-select: auto !important;
	-ms-user-select: auto !important;
	user-select: auto !important
}

.test {
	box-shadow: inset 0 0 0 1px cyan
}