@font-face {
	font-family: 'CenturyGothicRegular';
	font-style: normal;
	font-weight: 900;
	src: url(CenturyGothicRegular.ttf) format('truetype');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: 'CenturyGothicBold';
	font-style: normal;
	font-weight: 900;
	src: url(CenturyGothicBold.ttf) format('truetype');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* latin-ext */
@font-face {
	font-family: 'Spartan';
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url(l7gAbjR61M69yt8Z8w6FZf9WoBxdBrG3uV6HABTdfw.woff2) format('woff2');
	unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
	font-family: 'Spartan';
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url(l7gAbjR61M69yt8Z8w6FZf9WoBxdBrG3uV6JABQ.woff2) format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
	font-family: 'Spartan';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url(l7gAbjR61M69yt8Z8w6FZf9WoBxdBrFivl6HABTdfw.woff2) format('woff2');
	unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
	font-family: 'Spartan';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url(l7gAbjR61M69yt8Z8w6FZf9WoBxdBrFivl6JABQ.woff2) format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* MAIN FONT */
@font-face {
	font-family: 'MainFont';
	font-display: swap;
	src: url(fonts/Exo/Exo-VariableFont_wght.ttf) format('truetype');
}

@font-face {
	font-family: 'MainFont';
	font-display: swap;
	font-weight: 300;
	src: url(fonts/Exo/static/Exo-Light.ttf) format('truetype');
}

@font-face {
	font-family: 'MainFont';
	font-display: swap;
	font-weight: 100;
	src: url(fonts/Exo/static/Exo-Thin.ttf) format('truetype');
}

html {
	overflow:           hidden;
	-ms-overflow-style: none;
	scrollbar-width:    none;
}

body {
	position: absolute !important;

	width: 100%;
	height: 100%;

	margin: 0;
	padding: 0;
	border: 0;

	font-family: 'MainFont';
	font-weight: 300;
	font-size: calc(0.5vw + 0.5vh);

	color: white;
	background-color: white;

	overflow:           hidden !important;
	-ms-overflow-style: none;
	scrollbar-width:    none;
}

div {
	display: inline;
}

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
	margin-top: 0;
	margin-bottom: 0;
}

img { /* REMOVE BLUE IMAGE HIGHLIGHT ON SELECTION */
    -khtml-user-select: none;
    -o-user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
    user-select: none;
}

.noSelect {
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
	-webkit-tap-highlight-color: transparent;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	 user-select: none;
}

.noScrollbar {
	overflow: scroll;
	-ms-overflow-style: none;  /* IE and Edge */
	scrollbar-width: none;  /* Firefox */
}

.noScrollbar::-webkit-scrollbar {
	display: none;
}

.hidden {
	visibility: hidden;
	opacity: 0;
}

.noDisplay {
	display: none;
}

.mainTitle {
	position: absolute;

	top:  0;
	left: 0;

	width:  100%;
	height: 100%;

	background-color: #000000;

	z-index: 5;
}

#mainTitleVideo {
	position: absolute;

	top:  0;
	left: 0;

	width:  100%;
	height: 100%;

	object-fit: cover;

	background-color: #000000;
}

.appWrapper {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.fullBackground {
	position: absolute;
	top:    0;
	left:   0;
	width:  100%;
	height: 100%;

	background-color: #000000;

	transition: 0.3s;
}

.exitButton {
	position: fixed;
	top: 6%;
	right: 3.2%;
	width: 1.5%;
	height: auto;
}

.exitButton > svg {
	width: auto;
	height: auto;
	position: relative;
	transition: 0.3s;
}

.exitButton > svg:hover {
	cursor: pointer;
}





#canvas2D {
	display: inline;
}

#glCanvas {
	display: none;
}

#detailCanvas {
	display: none;
}

#canvasGradientWrapper {
	width:  100%;
	height: 100%;
}

.canvasGradient {
	position: absolute;
	z-index: 1;
}

#canvasLoadProgressWrapper {
	position: absolute;

	top: 0;
	left: 0;

	width:  100%;
	height: 100%;

	z-index: 2;
}

#canvasLoadProgress {
	position: absolute;

	top: 50%;
	left: 50%;

	width: 70%;
	height: 5%;

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

	font-size: 3vw;
}

#object3DLoadSvgPathAnim {
	transition: 0.3s;
}

#canvasGradientLeft {
	top: 0;
	height: 100%;
	left: 0;
	width: 1%;
}

#canvasGradientRight {
	top: 0;
	height: 100%;
	right: 0;
	width: 1%;
}

#canvasGradientTop {
	top: 0;
	height: 1%;
	left: 0;
	width: 100%;
}

#canvasGradientBottom {
	bottom: 0;
	height: 1%;
	left: 0;
	width: 100%;
}

.canvasWrapper {
	position: absolute;

	top:    0;
	left:   0;
	width:  55%;
	height: 100%;

	transition: 0.3s;
}

.canvasWrapper canvas {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%
}

.configurationContainer {
	display: none;	
}

.sideBarWrapper {
	position: absolute;

	top:    0;
	right:  0;
	width:  45%;
	height: 100%;

	text-align: left;
	font-weight: bold;
	margin: 0px;
	padding: 0px;

	transition: 0.3s;
}

.sideBarBackground {
	position: absolute;

	top:    0;
	right:  0;
	width:  90%;
	height: 100%;

	transition: 0.3s;
}

.panelGradientInfo {
	position: absolute;

	top:    5%;
	left:   0;
	width:  100%;
	height: 90%;
}

.panel {
	position: absolute;

	top:    0;
	left:   60%;
	width:  45%;
	height: 100%;

	transition: 0.3s;

	box-shadow: 0.0vw 0.4vw 1.0vw 0px rgba(0.0, 0.0, 0.0, 0.2);

	overflow-y:         hidden;
	overflow-x:         hidden;
	-ms-overflow-style: none;
	scrollbar-width:    none;
}

.panel::-webkit-scrollbar {
	display: none;
}

.panel > img {
	position: absolute;

	top:  50%;
	left: 50%;

	height: 102%;
	width:  102%;

	object-fit: cover;

	transition: 0.3s;
}

.hoverPanel:hover {
	cursor:pointer;
}

.visiblePanel {
	opacity: 1;

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

.hiddenPanel {
	opacity: 0;

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

.zoomPanel {
	transform: translate(-50%, -50%) scale(0.98);
}

.gradient {
	position: absolute;
	top: 0;
	left: 45%;
	width: 17%;
	height: 100%;

	z-index: 0;
}

.info {
	position: absolute;
	top: 0;
	left: 60%;
	width: calc(40% - 1.0vw - 2.0vw);
	height: 100%;

	margin-left: 1.0vw;
	margin-right: 2.0vw;

	transition: 0.3s;
}

.titleMenu {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 15%;
}

.leftBottomMenu {
	position: absolute;
	width: 80%;
	height: 100%;
	top: 0;
	left: 0;
}

.rightTopMenu {
    position: absolute;
    top: 0;
    left: 80%;
    width: 20%;
    height: 100%;
}

.title {
	position: relative;
	display: block;
	left: 0;
	width: 80%;
	height: auto;

	font-family: 'MainFont';
	font-weight: 600;
	font-size: 1.5vw;
}

.projectNumber {
	position: relative;
	display: block;
	left: 0;
	width: 80%;
	height: auto;

	font-family: 'MainFont';
	font-weight: 100;
	font-size: 1.5vw;
}

.menu {
}

.menuDiv {
	position: relative;
	display: block;
	width: 100%;
	height: 2vw;
}

.menuDiv > svg {
	width: inherit;
	height: inherit;
	fill: white;
	top: 50%;
	position: relative;
	left: 50%;
	transform: translate(-50%, -50%);
}

.menuDiv > svg:hover {
	cursor: pointer;
}

#projectsButtonDiv > svg {
	width: 80%;
}

.description {
	position: absolute;
	top: 15%;
	left: 0;
	width: 100%;
	height: 70%;
}

.descriptionText {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;

	font-family: 'Spartan';
	font-weight: 500;

	line-height: calc((0.5vw + 0.5vh)*1.4);
	margin-bottom: 1.5vw;

	overflow: scroll;
	-ms-overflow-style: none;  /* IE and Edge */
	scrollbar-width: none;  /* Firefox */
}

.descriptionText::-webkit-scrollbar {
	display: none;
}

.descriptionText > p {
	line-height: calc((0.5vw + 0.5vh)*1.4);
	margin-bottom: 1.5vw;
}

.descriptionTopGradient {
	position: absolute;
	top: -1px;
	left: 0;
	height: 2vw;
	width: 100%;

	transition: 0.1s;
}

.descriptionBottomGradient {
	position: absolute;
	bottom: -1px;
	left: 0;
	height: 2vw;
	width: 100%;

	transition: 0.1s;
}

.credits {
	display: flex;
	align-items: flex-end;
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 15%;

	font-family: 'Spartan';
	font-size: calc(0.4vw + 0.4vh);
	font-weight: lighter;
}

/*CHANGE PROJECT ARROWS*/
.changeProjectArrowsDiv {
	font-weight: 300;
	transition: 0.3s;
}

.changeProjectArrows {
	position: absolute;
	left: 50%;
	width: 15%;
	fill: #2a446c;
	opacity: 50%;
	transform: translate(-50%, 0);
	font-size: 0;
	color: black;
	margin: 20px 0;
	transition: inherit;

	text-align: center;
	text-align: -webkit-center;
	text-align: -moz-center
}

.changeProjectArrowsText {
	filter: drop-shadow(0px 0px 2px white);
}

.changeProjectArrows > svg {
	display: block;
	width: 15%;
}

.changeProjectArrows:hover {
	opacity: 100%;
	cursor: pointer;
	font-size: larger;
}

#changeProjectArrowsBottom {
	bottom: 0;
}

#changeProjectArrowsTop {
	top: 0;
}


/* PROJECTS ARRAY */
.projectsArrayWrapper {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	transition: 0.3s;
}

.projectsArrayWrapper:hover {
	cursor: grab;
}

.projectsArrayDiv {
	position: absolute;
	opacity: 1;
	top: 50%;
	left: 50%;
	height: 80%;
	width: 20%;
	transform: translate(-50%, -50%);
	color: rgba(0.0, 0.0, 0.0, 0.0);
	transition: inherit;
}

.projectsArrayDiv:not(.no-hover):hover {
	cursor: pointer;
}

.projectsArrayDivTitle {
	display: inherit;
	position: relative;
	top: -5%;
	text-align: center;
	transition: inherit;
}

.projectsArrayDivNumber {
	display: inherit;
	position: relative;
	top: -5%;
	text-align: center;
	transition: inherit;
	margin-bottom: 10px;
}

.projectsArrayDivPanel {
	display: inherit;
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%) scale(1.0, 1.0);
	height: inherit;
	width: 80%;
	transition: inherit;
	overflow: hidden;
}

.projectsArrayDivPanel > img {
	position: absolute;
	top: 50%;
	left: 50%;
	width: auto;
	height: 100%;
	transform: translate(-50%, -50%) scale(1.15, 1.15);
	transition: inherit;
}

.projectsArrayDivReflection {
	position: absolute;
	display: inherit;
	top: 130%;
	left: 50%;
	width: 80%;
	height: inherit;
	transform: translate(-50%, -50%) scale(1.0, 1.0);
	transition: inherit;
	filter: blur(30px);
	overflow: hidden;
}

.projectsArrayDivReflection > img {
	position: absolute;
	top: 50%;
	left: 50%;
	width: auto;
	height: 100%;
	transform: translate(-50%, -50%) scale(1.0, -1.0);
	transition: inherit;
}

.projectsArrayDivReflectionMask {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 110%;
	height: 100%;
	transform: translate(-50%, -50%) scale(1.0, -1.0);
	transition: inherit;
	background-image: linear-gradient(to top, rgba(255, 255, 255, 0), white 50%);
}