/* CSS Document */

/*-----------------------------------------------------------------*/
/*--- Font Face Including ---*/
/*-----------------------------------------------------------------*/
/*------------------------------------------------------*/
/*--- Font Family :: [Helvetica] :: Regular ---*/
/*------------------------------------------------------*/
/* @font-face {
  font-family: 'Helvetica';
  src: url('../fonts/Helvetica.eot');
  src: url('../fonts/Helvetica.eot?#iefix') format('embedded-opentype'),
       url('../fonts/Helvetica.woff2') format('woff2'),
       url('../fonts/Helvetica.woff') format('woff'),
       url('../fonts/Helvetica.ttf') format('truetype'),
       url('../fonts/Helvetica.svg#Helvetica-Regular') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
} */

/*-----------------------------------------------------------------*/
/*--- Custom Reset Styles ---*/
/*-----------------------------------------------------------------*/
body, html { margin: 0; padding: 0; outline: none; min-width: 320px; }
p, img { margin: 0; padding: 0; }
h1, h2, h3, h4 ,h5, h6 { font-weight: normal; padding: 0; margin: 0; }
button, a { outline: none; -webkit-outline: none; -moz-outline: none; }
a img { border: 0; display: block; outline: none; -webkit-outline: none; -moz-outline: none; }
a, button { transition: all 0.3s ease; }
a { color: #000; text-decoration: none; }
a:hover, a:focus { outline: none; }
button { border: 0; box-shadow: none; line-height: normal; outline: none; text-shadow: none; }
/*-----------------------------------------------------------------*/
/*--- Canvas Styles ---*/
/*-----------------------------------------------------------------*/
html { font-size: 10px; }
body { font: 1.6rem / 1.5 'Archivo', Helvetica, Arial, sans-serif; color: #000; }

html, body, .main { height: 100%; } 
/*-----------------------------------------------------------------*/
/*--- Wysiwyg Styles ---*/
/*-----------------------------------------------------------------*/
.wysiwyg strong { font-weight: 700; }
.wysiwyg em { font-style: italic; }

.wysiwyg p { padding: 10px 0; }

.wysiwyg p:first-child { padding-top: 0; }
.wysiwyg p:last-child { padding-bottom: 0; }

.wysiwyg h1, .wysiwyg h2, .wysiwyg h3, .wysiwyg h4, .wysiwyg h5, .wysiwyg h6 { font-family: 'Lora'; font-weight: 700; }

.wysiwyg a { color: currentColor; text-decoration: underline; }
.wysiwyg a:hover { text-decoration: none; }

/*-----------------------------------------------------------------*/
/*--- Main Styles ---*/
/*-----------------------------------------------------------------*/
.splash-page { background: #1c232d; height: 100%; }
.splash-page__logo { display: block; max-width: 1200px; margin: 0 auto; }
.splash-page__logo__img { display: block; width: 100%; height: auto; }

.confirm-popup { display: none; position: fixed; top: 0; left: 0; height: 100%; width: 100%; background: #1c232d; z-index: 100000; }
.confirm-popup__container { height: 100%; display: flex; flex-direction: column; padding: 20px; justify-content: center; text-align: center; align-items: center; color: #fff; }
.confirm-popup__btn { padding: 10px 20px; background: #fff; color: #000; border-radius: 5px; margin: 10px 0 0; }
/*-----------------------------------------------------------------*/
/*--- Language Switcher Styles ---*/
/*-----------------------------------------------------------------*/
.lang-switcher { font-size: 2.4rem; color: #fff; text-transform: uppercase; text-align: center; }
.lang-switcher__item { color: inherit; }
.lang-switcher__item.active, .lang-switcher__item:hover { text-decoration: underline; }
/*-----------------------------------------------------------------*/
/*--- Panorama Styles ---*/
/*-----------------------------------------------------------------*/
.pnlm-container { background: #1c232d; }
.pnlm-lmsg:empty { display: none; }
.pnlm-load-box { padding: 20px 20px 24px; min-height: 0; height: auto; margin: 0; transform: translate(-50%, -50%); }
.pnlm-load-box p { font-size: 1.6rem; margin: 0 0 10px; }
.pnlm-lbar { border-radius: 6px; height: 4px; }
.pnlm-lmsg { display: none; }
.pnlm-about-msg { display: none !important; }
.pnlm-hotspot.pnlm-info { height: 36px; width: 36px; background: url(../images/placeholder.png) no-repeat center / contain; }
.pnlm-compass { display: block !important; }
.pnlm-controls-container .pnlm-tutorial-controls { display: block; }
.pnlm-tutorial-controls { display: none; width: 26px; height: 26px; background-position: 0 -312px; background-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2226%22%20height%3D%22208%22%3E%0A%3Ccircle%20fill-opacity%3D%22.78%22%20cy%3D%22117%22%20cx%3D%2213%22%20r%3D%2211%22%20fill%3D%22%23fff%22%2F%3E%0A%3Ccircle%20fill-opacity%3D%22.78%22%20cy%3D%22143%22%20cx%3D%2213%22%20r%3D%2211%22%20fill%3D%22%23fff%22%2F%3E%0A%3Ccircle%20cy%3D%22169%22%20cx%3D%2213%22%20r%3D%227%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%2F%3E%0A%3Ccircle%20cy%3D%22195%22%20cx%3D%2213%22%20r%3D%227%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%2F%3E%0A%3Ccircle%20cx%3D%2213%22%20cy%3D%22195%22%20r%3D%222.5%22%2F%3E%0A%3Cpath%20d%3D%22m5%2083v6h2v-4h4v-2zm10%200v2h4v4h2v-6zm-5%205v6h6v-6zm-5%205v6h6v-2h-4v-4zm14%200v4h-4v2h6v-6z%22%2F%3E%0A%3Cpath%20d%3D%22m13%20110a7%207%200%200%200%20-7%207%207%207%200%200%200%207%207%207%207%200%200%200%207%20-7%207%207%200%200%200%20-7%20-7zm-1%203h2v2h-2zm0%203h2v5h-2z%22%2F%3E%0A%3Cpath%20d%3D%22m5%2057v6h2v-4h4v-2zm10%200v2h4v4h2v-6zm-10%2010v6h6v-2h-4v-4zm14%200v4h-4v2h6v-6z%22%2F%3E%0A%3Cpath%20d%3D%22m17%2038v2h-8v-2z%22%2F%3E%0A%3Cpath%20d%3D%22m12%209v3h-3v2h3v3h2v-3h3v-2h-3v-3z%22%2F%3E%0A%3Cpath%20d%3D%22m13%20136-6.125%206.125h4.375v7.875h3.5v-7.875h4.375z%22%2F%3E%0A%3Cpath%20d%3D%22m10.428%20173.33v-5.77l5-2.89v5.77zm1-1.73%203-1.73-3.001-1.74z%22%2F%3E%0A%3C%2Fsvg%3E%0A'); }
.pnlm-tutorial-controls__tooltip { font-size: 1.2rem; padding: 5px; display: none; transition: none; position: absolute; top: 50%; left: calc(100% + 10px); transform: translateY(-50%); width: 190px; background: #fff; border: 1px solid #fff; border-radius: 4px; }
.pnlm-tutorial-controls__tooltip::after { content: ''; position: absolute; top: 50%; left: -10px; transform: translateY(-50%) rotate(90deg); width: 0; height: 0; border-left: 6px solid transparent; border-right: 6px solid transparent; border-top: 6px solid #fff; }
.pnlm-tutorial-controls__tooltip__title { font-weight: 700; }

.panorama { height: 100%; width: 100%; }
.panorama__hotspot { cursor: pointer; }
.panorama__hotspot__popup { display: none; transition: none; position: absolute; bottom: calc(100% + 7px); left: 50%; transform: translateX(-50%); width: 200px; background: #fff; border: 1px solid #fff; border-radius: 4px; }
.panorama__hotspot__popup::after { content: ''; position: absolute; bottom: -6px; left: 50%; transform: translateX(-50%); width: 0; height: 0; border-left: 6px solid transparent; border-right: 6px solid transparent; border-top: 6px solid #fff; }
.panorama__hotspot__content { font-size: 1.2rem; padding: 10px; }
.panorama__hotspot__img { background: no-repeat center / cover; height: 100px; border-radius: 4px 4px 0 0; }
.panorama__hotspot__title { font-size: 1.4rem; font-family: 'Lora'; font-weight: 700; padding: 0 0 5px; }
/*-----------------------------------------------------------------*/
/*--- Inner Page Styles ---*/
/*-----------------------------------------------------------------*/
.page { padding: 50px 0; }
.page__container { position: relative; padding: 50px 0; overflow: hidden; }
.page__media { width: 100%; max-width: 340px; margin: 12px 30px 30px 0; float: left; }
.page__media__img { padding: 0 0 120%; width: 100%; background: no-repeat center / cover; }
.page__back { font-size: 0; text-align: center; height: 40px; width: 40px; text-decoration: none; border-radius: 5px; cursor: pointer; transition: background-color 0.3s ease; position: absolute; top: 0; right: 0; background: #333 no-repeat center / auto; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='6' y1='6' x2='18' y2='18' /%3E%3Cline x1='6' y1='18' x2='18' y2='6' /%3E%3C/svg%3E"); }
.page__back:hover { background-color: #555; }

@media (orientation: portrait) and (max-width: 641px) {
  .page__media { float: none; }
}

@media (orientation: landscape) and (max-width: 480px) {
  .page__media { float: none; }
}

@media screen and (max-width: 767px) {
  .page { padding: 20px 0; }
  .page__container { padding-bottom: 20px; }
}

@media (orientation: landscape) and (max-width: 767px) {
  .page__media { max-width: 200px; margin: 12px 24px 16px 0; }
}
