@font-face {
	font-family: 'codropsicons';
	font-weight: normal;
	font-style: normal;
	src: url('/3dmap/fonts/codropsicons/codropsicons.eot');
	src: url('/3dmap/fonts/codropsicons/codropsicons.eot?#iefix') format('embedded-opentype'), 
		url('/3dmap/fonts/codropsicons/codropsicons.woff') format('woff'), 
		url('/3dmap/fonts/codropsicons/codropsicons.ttf') format('truetype'), 
		url('/3dmap/fonts/codropsicons/codropsicons.svg') format('svg');
}

*,
*::after,
*::before {
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}

.invisible { /* Vlad: remove floor's text from the svg file*/
	display:none;
}

body {
	font-family: 'Avenir Next', Avenir, 'Helvetica Neue', Helvetica, Arial, sans-serif;
	color: #515158;
	background: #f0f0f0;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

a {
	text-decoration: none;
	color: #aaa;
	outline: none;
}

.c-margin-t-75 {
	margin-top: 75px; }

.c-layout-header-white {
		background: #ffffff;/*none*/
		border-bottom: 0; }

.c-container-l-margin {
    margin-right: 16px !important;
}

.c-quick-sidebar-margin {
    padding-top: 20px !important;
    padding-bottom: 20px !important;
}


a:hover,
button:hover {
	color: #515158;
	outline: none;
}

a:focus,
button:focus {
	outline: none;
}

.hidden {
	position: absolute;
	overflow: hidden;
	width: 0;
	height: 0;
	pointer-events: none;
}



/* Icons */
.icon {
	display: block;
	width: 2em;
	height: 2em;
	margin: 0 auto;
	fill: currentColor;
}

.container {
	position: relative;
	width: 0vw;
	height: 0vh;
}

.main {
	position: fixed;
	top: 0;
	left: 0;
	overflow: hidden;
	/*width: calc(100vw - 300px);*/
	width: calc(100vw);
	height: 105vh;
}

.mall {   /*initial transform for whole building*/
	position: relative;
	width: 100%;
	height: 100%;
	pointer-events: none;
/*	-webkit-perspective: 3840px;
	perspective: 2160px;*/
	-webkit-perspective: 2500px;
	perspective: 2500px;
	/*-webkit-perspective-origin: 0% 50%;*/
	/*perspective-origin: 0% 50%;*/
	-webkit-transition: -webkit-transform 0.8s;
	transition: transform 0.8s;
	-webkit-transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
	transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
	overflow: visible;
}

.surroundings,
.levels {
	position: absolute;
	top: 50%;
	left: 50%;
}

.surroundings {
	width: 195vmin;
	/* double of mall map */
	height: 128vmin;
	margin: -62vmin 0 0 -87vmin;
	pointer-events: none;
	-webkit-transition: opacity 0.8s;
	transition: opacity 0.8s;
	-webkit-transform-style: preserve-3d;
	transform-style: preserve-3d;
}

.surroundings__map {
	opacity: 0.2;
	max-width: 100%;
	display: block;
}

.surroundings--hidden {
	opacity: 0;
}

.levels {
	width: 96vmin;
	height: 64vmin;
	margin: -32vmin 0 0 -50vmin;
	-webkit-transition: -webkit-transform 0.3s;
	transition: transform 0.3s;
	-webkit-transform-style: preserve-3d;
	transform-style: preserve-3d;
}

/*Position for ground map*/
.surroundings,
.levels {   /*begining position for whole building*/
	-webkit-transform: rotateX(73deg) rotateY(0deg) rotateZ(-35deg) translateZ(-20vmin);
	transform: rotateX(73deg) rotateY(0deg) rotateZ(-35deg) translateZ(-20vmin);
}

.level {
	position: relative;
	width: 100%;
	height: 100%;
	cursor: pointer;
	pointer-events: auto;
	-webkit-transition: opacity 1s, -webkit-transform 1s;
	transition: opacity 1s, transform 1s;
	-webkit-transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
	transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
	-webkit-transform-style: preserve-3d;
	transform-style: preserve-3d;
}

.level::after {  /* Vlad: floor# text position for each floor */
	font-size: 3vmin;
	line-height: 1;
	position: absolute;
	z-index: 100;
	top: 2em;
    left: 0em;
	white-space: nowrap;
	/*color: #dc4b7c;*/
	color: #ffffff;
	font-weight: bold;
	-webkit-text-stroke-width: 1px;
	-webkit-text-stroke-color: black;

	-webkit-transform: rotateZ(0deg) rotateY(-0deg) rotateX(-90deg) translateX(30vmin) translateY(-3vmin) translateZ(60vmin);
	transform: rotateZ(0deg) rotateY(-0deg) rotateX(-90deg) translateX(30vmin) translateY(-3vmin) translateZ(60vmin);
	-webkit-transition: -webkit-transform 1s, color 0.3s;
	transition: transform 1s, color 0.3s;
	-webkit-transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
	transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
}

.level:hover::after,
.level--current::after {
	color: #515158;
}

.level--current::after {  /* Vlad: floor# text position for selected floor */
	-webkit-transform: rotateZ(0deg) rotateZ(0deg) rotateX(0deg) translateZ(0vmin) translateX(40vmin) translateY(-10vmin);
	transform: rotateZ(0deg) rotateZ(0deg) rotateX(0deg) translateZ(0vmin) translateX(40vmin) translateY(-10vmin);

}

.level--1::after {
	content: 'Ground Floor';
}

.level--2::after {
	content: 'Floor 1';
}

.level--3::after {
	content: 'Floor 2';
}

.level--4::after {
	content: 'Floor 3';
}

.level--5::after {
	content: 'Floor 4';
}

.level--6::after {
	content: 'Floor 5';
}

.level--7::after {
	content: 'Floor 6';
}

.level--8::after {
	content: 'Floor 7';
}

.level--9::after {
	content: 'Floor 8';
}

.level--10::after {
	content: 'Floor 9';
}

.level--11::after {
	content: 'Floor 10';
}

.level--12::after {
	content: 'Floor 11';
}

.level:not(:first-child) {
	position: absolute;
	top: 0;
	left: 0;
}

.level--2 {
	-webkit-transform: translateZ(6vmin);
	transform: translateZ(6vmin);
}

.level--3 {
	-webkit-transform: translateZ(12vmin);
	transform: translateZ(12vmin);
}

.level--4 {
	-webkit-transform: translateZ(18vmin);
	transform: translateZ(18vmin);
}

.level--5 {
	-webkit-transform: translateZ(24vmin);
	transform: translateZ(24vmin);
}

.level--6 {
	-webkit-transform: translateZ(30vmin);
	transform: translateZ(30vmin);
}

.level--7 {
	-webkit-transform: translateZ(36vmin);
	transform: translateZ(36vmin);
}

.level--8 {
	-webkit-transform: translateZ(42vmin);
	transform: translateZ(42vmin);
}

.level--9 {
	-webkit-transform: translateZ(48vmin);
	transform: translateZ(48vmin);
}

.level--10 {
	-webkit-transform: translateZ(54vmin);
	transform: translateZ(54vmin);
}

.level--11 {
	-webkit-transform: translateZ(60vmin);
	transform: translateZ(60vmin);
}

.level--12 {
	-webkit-transform: translateZ(66vmin);
	transform: translateZ(66vmin);
}

/* Selection transitions */

.levels--selected-1 .level:not(.level--1),
.levels--selected-2 .level:not(.level--2),
.levels--selected-3 .level:not(.level--3),
.levels--selected-4 .level:not(.level--4),
.levels--selected-5 .level:not(.level--5),
.levels--selected-6 .level:not(.level--6),
.levels--selected-7 .level:not(.level--7),
.levels--selected-8 .level:not(.level--8),
.levels--selected-9 .level:not(.level--9),
.levels--selected-10 .level:not(.level--10),
.levels--selected-11 .level:not(.level--11),
.levels--selected-12 .level:not(.level--12) {
	opacity: 0;
	/* fade out all others */
}

/* Current level */
.level.level--current {
	-webkit-transform: rotateX(-73deg) rotateY(-35deg) rotateZ(9.5deg) translateY(-26vmin) translateZ(50vmin);
	/* go to center */
		transform: rotateX(-73deg) rotateY(-35deg) rotateZ(9.5deg) translateY(-26vmin) translateZ(50vmin);
	 /*scale(1.25);*/
}

/* Navigation classes */
.levels--open .level,
.levels--open .level::after {
	-webkit-transition: -webkit-transform 1s, opacity 1s;
	transition: transform 1s, opacity 1s;
	-webkit-transition-delay: 0s;
	transition-delay: 0s;
}

.levels--open .level.level--current {
	opacity: 1;
}

.levels--open .level.level--moveOutUp,
.levels--open .level.level--moveOutDown {
	opacity: 0;
}

.levels--open .level.level--moveOutUp {
	-webkit-transform: translateZ(90vmin);
	transform: translateZ(90vmin);
}

.levels--open .level.level--moveOutDown {
	-webkit-transform: translateZ(-60vmin);
	transform: translateZ(-60vmin);
}


/* Level nav */
.mallnav {
	margin-top: 30px;
	position: absolute;
	top: 0;
	right: 0;
	text-align: center;
	-webkit-transition: opacity 0.8s;
	transition: opacity 0.8s;
}

.mallnav--hidden {
	pointer-events: none;
	opacity: 0;
}

/* Box button */
.boxbutton {
	font-size: 2em;
	display: block;
	width: 3em;
	height: 3em;
	margin: 0;
	padding: 0;
	color: #fff;
	border: 0;
	background: #214971;
}

.boxbutton--dark {
	background: #214971;
}

.boxbutton--darker {
	background: #2c2c2f;
}

.boxbutton--alt {
	background: #3d1975;
}

.boxbutton--disabled,
.boxbutton--disabled:focus,
.boxbutton--disabled:hover {
	cursor: default;
	pointer-events: none;
	opacity: 0.2;
}

/* Level map */

.map__ground {
	fill: #f0efed;
}

.map__outline {
	-webkit-transition: fill 0.3s;
	transition: fill 0.3s;
	fill: #bbb;
}

.level:hover .map__outline,
.level--current .map__outline {
	fill: #a6a3a8;
}

.map__tree {
	fill: #7bad7f;
}

.map__lake {
	fill: #a2bbdd;
}

.map__space {
	-webkit-transition: fill-opacity 0.8s;
	transition: fill-opacity 0.8s;
	fill: #dcdcdc;
	fill-opacity: 0.6;
}

.level--current .map__space {
	fill-opacity: 1;
}

 .map__space--selected {
 	fill: #A4A4A4;
 }


/* Spaces list (sidebar) */

.spaces-list {
	position: absolute;
	top: 0;
	right: 0;
	/*width: 300px;*/
	width: 0px;
	min-height: 100vh;
	padding: 5em 0 1em;
	background: #fff;
}

.search {
	position: fixed;
	z-index: 100;
	top: 0;
	right: 0;
	/*left: calc(100vw - 300px);*/
	left: calc(100vw - 00px);
}

.list__link {
	font-size: 0.85em;
	display: block;
	padding: 0.5em 0.5em 0.5em 0;
}

.list__item--active .list__link,
.list__link:hover {
	color: #515158;
}


/* Mobile compatability */
.open-search,
.close-search {
	display: none;
}

@media screen and (max-width: 65.625em), screen and (max-height: 40.625em) {
	.main {
		width: 100vw;
	}
	.spaces-list,
	.search {
		width: 100vw;
		right: 100%;
		left: auto;
	}
	.spaces-list--open,
	.spaces-list--open .search {
		right: 0;
	}
	.open-search,
	.close-search {
		position: absolute;
		display: block;
		top: 0;
		right: 0;
		z-index: 1000;
	}
	.mallnav {
		top: 4em;
	}
	.container {
		overflow: hidden;
	}
	.container--overflow {
		overflow: auto;
	}
	.content__item {
		overflow: auto;
	}
	.codrops-header {
		padding-right: 4em;
		text-align: left;
	}
}