h2 {
    font-family: 'Raleway';
    font-size: 1.2rem;
    color: #293046;
    font-weight: 800;
}

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

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

.codrops-header {
	position: absolute;
	top: 0;
	left: 0;
	display: -webkit-flex;
	display: flex;
	-webkit-align-items: center;
	align-items: center;
	padding: 1.5em 1em;
	text-align: center;
}

.codrops-header h1 {
	font-size: 1.15em;
	font-weight: normal;
	line-height: 1;
	margin: 0 0 0 1em;
}

/* Top Navigation Style */

.codrops-links {
	position: relative;
	display: inline-block;
	text-align: center;
	white-space: nowrap;
}

.codrops-links::after {
	content: '';
	position: absolute;
	top: 0;
	left: 50%;
	width: 1px;
	height: 100%;
	-webkit-transform: rotate3d(0, 0, 1, 22.5deg);
	transform: rotate3d(0, 0, 1, 22.5deg);
}

.codrops-icon {
	display: inline-block;
	width: 1.5em;
	margin: 0.5em;
	padding: 0em 0;
	text-decoration: none;
}

.codrops-icon span {
	display: none;
}

.codrops-icon::before {
	font-family: 'codropsicons';
	font-weight: normal;
	font-style: normal;
	font-variant: normal;
	line-height: 1;
	margin: 0 5px;
	text-transform: none;
	speak: none;
	-webkit-font-smoothing: antialiased;
}

.codrops-icon--drop::before {
	content: '\e001';
	color: #09c;
}

.codrops-icon--prev::before {
	content: '\e004';
}

.main {
	position: relative;
	top: 0;
	left: 0;
	overflow: hidden!important;
	width: calc(100vw - 300px);
	height: 100vh;
}

.mall {
	position: relative;
	width: 100%;
	height: 100%;
	pointer-events: none;
	-webkit-perspective: 3500px;
	perspective: 2000px;
	-webkit-perspective-origin: 50% 0%;
	perspective-origin: 50% 0%;
	-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);
	    visibility: unset;
}

/* Höhen änderung - Einstellung */
.mall.mall--content-open {
	-webkit-transform: translate3d(0,-20%,0) scale3d(0.8,0.8,1);
	transform: translate3d(0,-20%,0) scale3d(0.8,0.8,1);
}

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

.surroundings {
	width: 192vmin;
	/* double of mall map */
	height: 128vmin;
	margin: -64vmin 0 0 -96vmin;
	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.3;
	max-width: 100%;
	display: block;
}

.surroundings--hidden {
	opacity: 0;
}

.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 {
	font-size: 2.5vmin;
	line-height: 0;
	position: absolute;
	top: -2em;
    left: 3.5em;
	white-space: nowrap;
	color: #7d7d86;
	-webkit-transform: rotateZ(45deg) rotateX(-70deg) translateZ(5vmin);
	transform: rotateZ(45deg) rotateX(-70deg) translateZ(5vmin);
	-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 {
	-webkit-transform: rotateZ(-20deg) rotateZ(45deg) rotateX(-70deg) translateZ(5vmin) translateX(5vmin) translateY(-10vmin);
	transform: rotateZ(-20deg) rotateZ(45deg) rotateX(-70deg) translateZ(5vmin) translateX(5vmin) translateY(-10vmin);
}

.level--1::after {
	content: 'L1';
}

.level--2::after {
	content: 'L2';
}

.level--3::after {
	content: 'L3';
}

.level--4::after {
	content: 'L4';
}

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

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

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

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


/* 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) {
	opacity: 0;
	/* fade out all others */
}

/* Other levels */

.level--current ~ .level {
	-webkit-transform: translateZ(90vmin);
	transform: translateZ(90vmin);
}

.levels--selected-2 .level--1,
.levels--selected-3 .level--1,
.levels--selected-4 .level--1,
.levels--selected-3 .level--2,
.levels--selected-4 .level--2,
.levels--selected-4 .level--3 {
	-webkit-transform: translateZ(-60vmin);
	transform: translateZ(-60vmin);
}

/* Delays */
/* 1 */

.levels--selected-1 .level--3,
.levels--selected-2 .level--3,
.levels--selected-3 .level--2,
.levels--selected-4 .level--2 {
	-webkit-transition-delay: 0.1s;
	transition-delay: 0.1s;
}

.levels--selected-1 .level--2,
.levels--selected-2 .level--current,
.levels--selected-2 .level--current::after,
.levels--selected-3 .level--current,
.levels--selected-3 .level--current::after,
.levels--selected-4 .level--3 {
	-webkit-transition-delay: 0.25s;
	transition-delay: 0.25s;
}

.levels--selected-1 .level--current,
.levels--selected-1 .level--current::after,
.levels--selected-4 .level--current,
.levels--selected-4 .level--current::after {
	-webkit-transition-delay: 0.45s;
	transition-delay: 0.45s;
}

/* Current level */

.level.level--current {
    -webkit-transform: translateZ(15vmin) rotate3d(0, 0, 1, 44deg);
    transform: translateZ(15vmin) rotate3d(0, 0, 1, 44deg);
}

/* 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 {
	position: absolute;
	top: 0;
	right: 0;
	text-align: center;
	opacity: 0;
}

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

/* Level map */
.level--current .map__space {
	fill-opacity: 1;
}

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

/* Content */
.content {
	position: absolute;
	top: 110%;
	width: 100%;
	height: 30%;
}
.th-8 img {
    /* display: inline-block; */
    /* max-width: 100%; */
   height: unset!important;
}
.content__item {
	/* änderung relative
	   padding: 3em;	*/
	top: 40px!important;
	position: relative;
	width: 98%!important;
	text-align: center;

}

a .basel:hover {color: #e94443!important}

.content__item--current {
	position: absolute;
    width: 100%;
    height: 100%;
    opacity: 1;
}

.content__item-title {
	font-size: 1.85em;
	font-weight: bolder;
	margin: 0;
	padding: 0 0 0.75em 0;
	pointer-events: none;
	font-weight: normal;
	opacity: 0;
}

.Item-Title15 {
	font-size: 1.5em;
	font-weight: 600;
	color: #ffffff
}

.content__item--current .content__item-title {
	opacity: 1;
	-webkit-transform: translate3d(0,0,0);
	transform: translate3d(0,0,0);
}

.content__item-details {
	opacity: 0;
	margin: 0 auto;
	max-width: 50vmax;
}

.content__item--current .content__item-details {
	opacity: 1;
}

.content__meta {
	margin: 0;
	font-size: 0.85em;
	line-height: 1.5;
}

.content__meta-item {
	display: inline-block;
	padding: 0 0.25em;
	color: ;
}

/* Spaces list (sidebar) */

.spaces-list {
	top: -20;
	right: 0;
	visibility: hidden;
}

/* Pins */
.icon--pin {
	width: 100%;
	height: 100%;
}

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

	.main {
		width: 100vw;
	}
	.mallnav {
		top: 4em;
	}
	
.icon-map {
	width: 60px
}

.pin {
    position: absolute;
    width: 9.25vmin;
    height: 9.25vmin;
    margin: -9.5vmin 0 0 0.25vmin;
    -webkit-transform: rotateZ(-20deg) rotateZ(21deg) rotateX(346deg);
    transform: rotateZ(-19.5deg) rotateZ(21deg) rotateX(346deg);
    -webkit-transform-origin: 50% 100%;
    transform-origin: 50% 100%;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
}

/* Karten grösse änderung - Einstellung */
.levels {
    width: 120vmin;
    height: 100vmin;
    margin: -10vmin 0 0 -30vmin;
    -webkit-transition: -webkit-transform 0.3s;
    transition: transform 0.3s;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
}

/* 3D änderung - Einstellung */
.surroundings, .levels {
    -webkit-transform: rotateX(10deg) rotateZ(318deg) translateZ(-17vmin);
    transform: rotateX(10deg) rotateZ(318deg) translateZ(-17vmin);
}

/* Pins for floor 4 POSITIONEN */
.pin--4-1 {top: 72vmin; left: 47vmin}
.pin--4-2 {top: 74vmin; left: 69vmin}
.pin--4-3 {top: 61vmin; left: 70vmin}
.pin--4-4 {top: 70vmin; left: 42vmin}
.pin--4-5 {top: 67.5vmin; left: 45.55vmin}
.pin--4-6 {top: 68vmin; left: 61vmin}
.pin--4-7 { top: 58vmin; left: 10vmin; }

#elementToHover {position: absolute}
#elementToPopup {display: none}
/* #Text-Red {color: #e42c3e!important} */
#ToPopup {position: fixed; font-weight: 800; font-size: 2em; width: 150vmin; top: -10vmin; left: -50vmin;-webkit-transform: rotateZ(-20deg) rotateZ(18deg) rotateX(346deg); transform: rotateZ(-20deg) rotateZ(16.5deg) rotateX(346deg)}

#elementToHoverzuerich {position: absolute}
#elementToPopupzuerich {display: none}
#ToPopupzuerich {position: fixed; font-weight: 800; font-size: 2em; width: 150vmin; top: -20vmin; left: -50vmin;-webkit-transform: rotateZ(-20deg) rotateZ(18deg) rotateX(346deg); transform: rotateZ(-20deg) rotateZ(17deg) rotateX(346deg)}

#elementToHoverzell {position: absolute}
#elementToPopupzell {display: none}
#ToPopupzell {position: fixed; font-weight: 800; font-size: 2em; width: 150vmin; top: -10vmin; left: -50vmin;-webkit-transform: rotateZ(-20deg) rotateZ(18deg) rotateX(346deg); transform: rotateZ(-20deg) rotateZ(16.5deg) rotateX(346deg)}

#elementToHoverBasel-Saint-Louis {position: absolute}
#elementToPopupBasel-Saint-Louis {display: none}
#ToPopupBasel-Saint-Louis {position: fixed; font-weight: 800; font-size: 2em; width: 150vmin; top: 10vmin; left: -50vmin;-webkit-transform: rotateZ(-20deg) rotateZ(18deg) rotateX(346deg); transform: rotateZ(-20deg) rotateZ(16.5deg) rotateX(346deg)}


/* ► ► ► MOB */
@media(max-width:998px){
.mall {perspective: none;width: 50%}.content__item {top: 50vmin!important}h2 {font-size: 1rem!important;line-height: 1.5em;}.content__item-details {margin-right: 35px}.bg-standorte .welcome-area-black {padding: 1.6rem 0}.mall.mall--content-open {-webkit-transform: none;transform: none;transform: scaleX(1)}}
/* SLIDER + BG  IMAGES DESKTOP END margin-top: -40px !important; */

@media(max-width:998px){.pin {position: absolute;width: 9.25vmin;height: 9.25vmin;margin: -11.5vmin 0 0 0.25vmin}.content__item-title {color: #000000 !important;font-weight: 800 !important}p {margin-top: 0;margin-bottom: .05rem!important}.map-mob {width:90%!important;height:100!important}}
@media screen and (min-width:999px) {.rwd-break {display:none !important}}
@media screen and (min-width:999px) {.only-mob {display:none !important}}