/* CSS Document */

@font-face {
  font-display: swap;
  font-family: 'Apex New';
  src: url('../fonts/ApexNew-Book.woff2') format('woff2'), url('../fonts/ApexNew-Book.woff') format('woff');
  font-weight: 500;
  font-style: normal;
}
@font-face {
  font-display: swap;
  font-family: 'Apex New';
  src: url('../fonts/ApexNew-Bold.woff2') format('woff2'), url('../fonts/ApexNew-Bold.woff') format('woff');
  font-weight: 700;
  font-style: normal;
}

body {
	margin: 0;
	padding: 0;
	/* background: linear-gradient(to right, rgba(183,184,188,1.00), rgba(255,255,255,1.00), rgba(183,184,188,1.00));*/
	background: linear-gradient(to right, #b7b8bc, #ffffff, #b7b8bc);
	font-family: 'Apex New', Helvetica, sans-serif;
    font-weight: 500;
    font-size: 1.0em;
    line-height: 1;
    color: #000;
}

.image-container {
	text-align: center;
	position: relative;
	width: 100%;
	height: 100%;
}
.image-container img {
	width: 300px;
	height: auto;
	margin-top: 50px;
    cursor: grab;
}
.hotspot01,
.hotspot02,
.hotspot03,
.hotspot04,
.hotspot05,
.hotspot06,
.hotspot07,
.hotspot08,
.hotspot09,
.hotspot10,
.hotspot11,
.hotspot12,
.hotspot13,
.hotspot14,
.hotspot15,
.hotspot16,
.hotspot17,
.hotspot18,
.hotspot19,
.hotspot20 {
	position: absolute;
	width: 30px;
	height: 30px;
	cursor: pointer;
	opacity: 0.2;
}
.hotspot01 {
	top: 60px;
	/*top: calc(50% + 15px);*/
	background: url("../assets/bg-hotspot_01.png") center top no-repeat;
	background-size: 100% auto;
	margin-left: calc(50% - 40px);
}
.hotspot02 {
	top: 120px;
	/*top: calc(50% + 75px);*/
	background: url("../assets/bg-hotspot_02.png") center top no-repeat;
	background-size: 100% auto;
	margin-left: calc(50% - 130px);
}
.hotspot03 {
	top: 160px;
	background: url("../assets/bg-hotspot_03.png") center top no-repeat;
	background-size: 100% auto;
	margin-left: calc(50% - 140px);
}
.hotspot04 {
	top: 205px;
	background: url("../assets/bg-hotspot_04.png") center top no-repeat;
	background-size: 100% auto;
	margin-left: calc(50% - 115px);
}
.hotspot05 {
	top: 245px;
	background: url("../assets/bg-hotspot_05.png") center top no-repeat;
	background-size: 100% auto;
	margin-left: calc(50% - 55px);
}
.hotspot06 {
	top: 100px;
	background: url("../assets/bg-hotspot_06.png") center top no-repeat;
	background-size: 100% auto;
	margin-left: calc(50% - 60px);
}
.hotspot07 {
	top: 155px;
	background: url("../assets/bg-hotspot_07.png") center top no-repeat;
	background-size: 100% auto;
	margin-left: calc(50% - 80px);
}
.hotspot08 {
	top: 195px;
	background: url("../assets/bg-hotspot_08.png") center top no-repeat;
	background-size: 100% auto;
	margin-left: calc(50% - 50px);
}
.hotspot09 {
	top: 165px;
	background: url("../assets/bg-hotspot_09.png") center top no-repeat;
	background-size: 100% auto;
	margin-left: calc(50% - 45px);
}
.hotspot10 {
	top: 135px;
	background: url("../assets/bg-hotspot_10.png") center top no-repeat;
	background-size: 100% auto;
	margin-left: calc(50% - 15px);
}
.hotspot11 {
	top: 125px;
	background: url("../assets/bg-hotspot_11.png") center top no-repeat;
	background-size: 100% auto;
	margin-left: calc(50% + 20px);
}
.hotspot12 {
	top: 95px;
	background: url("../assets/bg-hotspot_12.png") center top no-repeat;
	background-size: 100% auto;
	margin-left: calc(50% + 10px);
}
.hotspot13 {
	top: 130px;
	background: url("../assets/bg-hotspot_13.png") center top no-repeat;
	background-size: 100% auto;
	margin-left: calc(50% + 55px);
}
.hotspot14 {
	top: 185px;
	background: url("../assets/bg-hotspot_14.png") center top no-repeat;
	background-size: 100% auto;
	margin-left: calc(50% + 45px);
}
.hotspot15 {
	top: 245px;
	background: url("../assets/bg-hotspot_15.png") center top no-repeat;
	background-size: 100% auto;
	margin-left: calc(50% + 15px);
}
.hotspot16 {
	top: 215px;
	background: url("../assets/bg-hotspot_16.png") center top no-repeat;
	background-size: 100% auto;
	margin-left: calc(50% + 80px);
}
.hotspot17 {
	top: 165px;
	background: url("../assets/bg-hotspot_17.png") center top no-repeat;
	background-size: 100% auto;
	margin-left: calc(50% + 105px);
}
.hotspot18 {
	top: 120px;
	background: url("../assets/bg-hotspot_18.png") center top no-repeat;
	background-size: 100% auto;
	margin-left: calc(50% + 105px);
}
.hotspot19 {
	top: 80px;
	background: url("../assets/bg-hotspot_19.png") center top no-repeat;
	background-size: 100% auto;
	margin-left: calc(50% + 75px);
}
.hotspot20 {
	top: 60px;
	background: url("../assets/bg-hotspot_20.png") center top no-repeat;
	background-size: 100% auto;
	margin-left: calc(50% + 10px);
}

@keyframes fadeImage {
  from { opacity: 0.2; }
  to { opacity: 1; }
}

.hotspot01:hover,
.hotspot02:hover,
.hotspot03:hover,
.hotspot04:hover,
.hotspot05:hover,
.hotspot06:hover,
.hotspot07:hover,
.hotspot08:hover,
.hotspot09:hover,
.hotspot10:hover,
.hotspot11:hover,
.hotspot12:hover,
.hotspot13:hover,
.hotspot14:hover,
.hotspot15:hover,
.hotspot16:hover,
.hotspot17:hover,
.hotspot18:hover,
.hotspot19:hover,
.hotspot20:hover {
    -webkit-animation: fadeImage 1s;
    -moz-animation: fadeImage 1s;
    -ms-animation: fadeImage 1s;
    -o-animation: fadeImage 1s;
	animation: fadeImage 1s;
	animation-fill-mode: forwards;
	opacity: 1;
}

/* Lightbox styling */
@keyframes fadeBackground {
  from { opacity: 0; }
  to { opacity: 1; }
}

.lightbox {
	display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    justify-content: center;
    align-items: center;
}
.lightbox-content {
	text-align: left;
    padding: 10px;
    border-radius: 8px;
	width: 100%;
	max-width: 400px;
	height: 100%;
	max-height: 320px;
	background-size: 100% auto;
	background-repeat: no-repeat;
	background-position: center bottom;	
    -webkit-animation: fadeBackground 2s;
    -moz-animation: fadeBackground 2s;
    -ms-animation: fadeBackground 2s;
    -o-animation: fadeBackground 2s;
	animation: fadeBackground 2s;
	animation-fill-mode: forwards;
}
.lightbox-content .lightbox-text {
	margin-top: 230px;
	margin-left: 0px;
	vertical-align: bottom;
}
.lightbox-content .lightbox-close {
	margin-top: 10px;
	margin-right: 0px;
	float: right;
}
.lightbox-content .lightbox-text .icon,
.lightbox-content .lightbox-close .icon {
	float: right;
}
.lightbox-content .lightbox-text a,
.lightbox-content .lightbox-close a {
	display: inline-block;
	font-family: 'Apex New', Helvetica, sans-serif;
    font-size: 1.0em;
    line-height: 1;
	text-decoration: none;
	color: #fff;
	background-color: #d60825;
	border: 2px solid #fff;
	border-radius: 1.6667em;
	width: 150px;
	padding: 5px 10px;
	margin-top: 10px;
}
.lightbox-content .lightbox-close a {
	background-color: #4f535b;
	width: 50px;
}
.lightbox-content a:hover {
	background-color: #333;
}

@media (min-width: 768px) {
	.lightbox-content {
		max-width: 600px;
		max-height: 480px;
	}
	.lightbox-content .lightbox-text {
		margin-top: 340px;
		margin-left: 10px;
	}
	.lightbox-content .lightbox-close {
		margin-top: 90px;
		margin-right: 10px;
	}
}

@media (min-width: 960px) {
	.image-container img {
		width: 600px;
		height: auto;
		margin-top: 50px;
	}
	.hotspot01,
	.hotspot02,
	.hotspot03,
	.hotspot04,
	.hotspot05,
	.hotspot06,
	.hotspot07,
	.hotspot08,
	.hotspot09,
	.hotspot10,
	.hotspot11,
	.hotspot12,
	.hotspot13,
	.hotspot14,
	.hotspot15,
	.hotspot16,
	.hotspot17,
	.hotspot18,
	.hotspot19,
	.hotspot20 {
		width: 50px;
		height: 50px;
	}
	.hotspot01 {
		top: 70px;
		margin-left: calc(50% - 70px);
	}
	.hotspot02 {
		top: 195px;
		margin-left: calc(50% - 255px);
	}
	.hotspot03 {
		top: 275px;
		margin-left: calc(50% - 275px);
	}
	.hotspot04 {
		top: 370px;
		margin-left: calc(50% - 230px);
	}
	.hotspot05 {
		top: 450px;
		margin-left: calc(50% - 110px);
	}
	.hotspot06 {
		top: 165px;
		margin-left: calc(50% - 110px);
	}
	.hotspot07 {
		top: 270px;
		margin-left: calc(50% - 160px);
	}
	.hotspot08 {
		top: 350px;
		margin-left: calc(50% - 105px);
	}
	.hotspot09 {
		top: 285px;
		margin-left: calc(50% - 85px);
	}
	.hotspot10 {
		top: 225px;
		margin-left: calc(50% - 25px);
	}
	.hotspot11 {
		top: 200px;
		margin-left: calc(50% + 50px);
	}
	.hotspot12 {
		top: 150px;
		margin-left: calc(50% + 20px);
	}
	.hotspot13 {
		top: 220px;
		margin-left: calc(50% + 120px);
	}
	.hotspot14 {
		top: 325px;
		margin-left: calc(50% + 95px);
	}
	.hotspot15 {
		top: 450px;
		margin-left: calc(50% + 35px);
	}
	.hotspot16 {
		top: 385px;
		margin-left: calc(50% + 160px);
	}
	.hotspot17 {
		top: 285px;
		margin-left: calc(50% + 210px);
	}
	.hotspot18 {
		top: 195px;
		margin-left: calc(50% + 210px);
	}
	.hotspot19 {
		top: 120px;
		margin-left: calc(50% + 160px);
	}
	.hotspot20 {
		top: 70px;
		margin-left: calc(50% + 30px);
	}
	.lightbox-content {
		max-width: 800px;
		max-height: 640px;
	}
	.lightbox-content .lightbox-text {
		margin-top: 450px;
		margin-left: 20px;
	}
	.lightbox-content .lightbox-close {
		margin-top: 130px;
		margin-right: 20px;
	}
	.lightbox-content .lightbox-text a,
	.lightbox-content .lightbox-close a {
		font-size: 1.250em;
		width: 180px;
		padding: 10px 20px;
	}
	.lightbox-content .lightbox-close a {
		width: 70px;
	}
}

@media (min-width: 1220px) {
	.image-container img {
		width: 900px;
	}
	.hotspot01,
	.hotspot02,
	.hotspot03,
	.hotspot04,
	.hotspot05,
	.hotspot06,
	.hotspot07,
	.hotspot08,
	.hotspot09,
	.hotspot10,
	.hotspot11,
	.hotspot12,
	.hotspot13,
	.hotspot14,
	.hotspot15,
	.hotspot16,
	.hotspot17,
	.hotspot18,
	.hotspot19,
	.hotspot20 {
		width: 70px;
		height: 70px;
	}
	.hotspot01 {
		top: 90px;
		margin-left: calc(50% - 105px);
	}
	.hotspot02 {
		top: 280px;
		margin-left: calc(50% - 380px);
	}
	.hotspot03 {
		top: 395px;
		margin-left: calc(50% - 410px);
	}
	.hotspot04 {
		top: 540px;
		margin-left: calc(50% - 345px);
	}
	.hotspot05 {
		top: 655px;
		margin-left: calc(50% - 170px);
	}
	.hotspot06 {
		top: 230px;
		margin-left: calc(50% - 170px);
	}
	.hotspot07 {
		top: 390px;
		margin-left: calc(50% - 230px);
	}
	.hotspot08 {
		top: 505px;
		margin-left: calc(50% - 150px);
	}
	.hotspot09 {
		top: 410px;
		margin-left: calc(50% - 130px);
	}
	.hotspot10 {
		top: 320px;
		margin-left: calc(50% - 40px);
	}
	.hotspot11 {
		top: 280px;
		margin-left: calc(50% + 70px);
	}
	.hotspot12 {
		top: 205px;
		margin-left: calc(50% + 30px);
	}
	.hotspot13 {
		top: 310px;
		margin-left: calc(50% + 170px);
	}
	.hotspot14 {
		top: 470px;
		margin-left: calc(50% + 140px);
	}
	.hotspot15 {
		top: 660px;
		margin-left: calc(50% + 50px);
	}
	.hotspot16 {
		top: 560px;
		margin-left: calc(50% + 235px);
	}
	.hotspot17 {
		top: 410px;
		margin-left: calc(50% + 320px);
	}
	.hotspot18 {
		top: 275px;
		margin-left: calc(50% + 310px);
	}
	.hotspot19 {
		top: 160px;
		margin-left: calc(50% + 230px);
	}
	.hotspot20 {
		top: 90px;
		margin-left: calc(50% + 35px);
	}
	.lightbox-content {
		max-width: 1000px;
		max-height: 800px;
	}
	.lightbox-content .lightbox-text {
		margin-top: 570px;
	}
	.lightbox-content .lightbox-close {
		margin-top: 170px;
	}
}

@media (min-width: 1620px) {
	.image-container img {
		width: 1200px;
	}
	.hotspot01,
	.hotspot02,
	.hotspot03,
	.hotspot04,
	.hotspot05,
	.hotspot06,
	.hotspot07,
	.hotspot08,
	.hotspot09,
	.hotspot10,
	.hotspot11,
	.hotspot12,
	.hotspot13,
	.hotspot14,
	.hotspot15,
	.hotspot16,
	.hotspot17,
	.hotspot18,
	.hotspot19,
	.hotspot20 {
		width: 100px;
		height: 100px;
	}
	.hotspot01 {
		top: 100px;
		margin-left: calc(50% - 140px);
	}
	.hotspot02 {
		top: 350px;
		margin-left: calc(50% - 510px);
	}
	.hotspot03 {
		top: 505px;
		margin-left: calc(50% - 550px);
	}
	.hotspot04 {
		top: 700px;
		margin-left: calc(50% - 460px);
	}
	.hotspot05 {
		top: 855px;
		margin-left: calc(50% - 220px);
	}
	.hotspot06 {
		top: 280px;
		margin-left: calc(50% - 230px);
	}
	.hotspot07 {
		top: 495px;
		margin-left: calc(50% - 310px);
	}
	.hotspot08 {
		top: 650px;
		margin-left: calc(50% - 200px);
	}
	.hotspot09 {
		top: 520px;
		margin-left: calc(50% - 170px);
	}
	.hotspot10 {
		top: 400px;
		margin-left: calc(50% - 50px);
	}
	.hotspot11 {
		top: 350px;
		margin-left: calc(50% + 100px);
	}
	.hotspot12 {
		top: 245px;
		margin-left: calc(50% + 50px);
	}
	.hotspot13 {
		top: 390px;
		margin-left: calc(50% + 240px);
	}
	.hotspot14 {
		top: 605px;
		margin-left: calc(50% + 190px);
	}
	.hotspot15 {
		top: 855px;
		margin-left: calc(50% + 70px);
	}
	.hotspot16 {
		top: 720px;
		margin-left: calc(50% + 310px);
	}
	.hotspot17 {
		top: 520px;
		margin-left: calc(50% + 420px);
	}
	.hotspot18 {
		top: 340px;
		margin-left: calc(50% + 410px);
	}
	.hotspot19 {
		top: 190px;
		margin-left: calc(50% + 310px);
	}
	.hotspot20 {
		top: 100px;
		margin-left: calc(50% + 50px);
	}
}

@media (orientation: portrait) and (max-width: 959px) {
	.image-inner {
		margin-top: calc(50% - 130px);
	}
}
@media (orientation: portrait) and (max-width: 479px) {
	.image-inner {
		margin-top: calc(50% - 30px);
	}
}