@font-face {
  font-family: 'Bespoke';
  src: url('/vendor/font/Bespoke-KXww5er5Jg.eot?#iefix')             format('embedded-opentype'),
     url('/vendor/font/Bespoke-KXww5er5Jg.otf')                      format('opentype'),
     url('/vendor/font/Bespoke-KXww5er5Jg.woff')                     format('woff'),
     url('/vendor/font/Bespoke-KXww5er5Jg.ttf')                      format('truetype'),
     url('/vendor/font/Bespoke-KXww5er5Jg.svg#Bespoke-KXww5er5Jg')   format('svg');
  font-weight: normal;
  font-style: normal;
}


@font-face {
  font-family: 'Prestige';
  src: url('/vendor/font/PrestigeEliteStd-Bd.eot?#iefix')            format('embedded-opentype'),
     url('/vendor/font/PrestigeEliteStd-Bd.otf')                     format('opentype'),
     url('/vendor/font/PrestigeEliteStd-Bd.woff')                    format('woff'),
     url('/vendor/font/PrestigeEliteStd-Bd.ttf')                     format('truetype'),
     url('/vendor/font/PrestigeEliteStd-Bd.svg#PrestigeEliteStd-Bd') format('svg');
  font-weight: normal;
  font-style: normal;
}

:root{
  --bespoke: 'Bespoke', sans-serif;
  --prestige: 'Prestige', 'Courier New', Courier, monospace;
  --primary: #545b61;
  --transition: transform 0.6s cubic-bezier(.7, 0, .3, 1);
  --gray: #c5d3d6;
}

/**
 * CSS Reset
 */

html,
body {
  height: 100%;
  margin: 0;
}

html.js,
.js body {
  overflow: hidden;
  position: relative;
}

body {
  background: #2c3135;
  color: var(--gray);
  font-weight: 400;
  font-size: 1em;
  font-family: var(--prestige);
}

nav {
  display: flex;
  width: 100%;
  justify-content: center;
}

footer {
  padding: 3em 0 8em 0;
  font-size: 0.7em;
  line-height: 1.5em;
}

a {
  text-decoration: none;
  outline: none;
}

a:hover, a:focus {
  color: var(--gray);
}

button:not(:disabled) {
  cursor: pointer;
}

button {
  font-family: var(--prestige);
  border: 0 solid #fff;
  background: #fff;
  color: #222;
  font-weight: bold;
  font-size: 1.5em;
  padding: 0.5em 1em;
  letter-spacing: 1px;
  display: block;
  margin: 1em auto;
  opacity: 1;
  outline: none;
}

button:hover {
  opacity: 0.8;
}

section h4::after {
  content: "____";
  display: block;
  color:var(--gray);
}

small {
  font-family: var(--bespoke) !important;
  opacity: .5;
  display: block;
  margin-top: 15px;
  font-size: 0.8rem;
}


label {
  display: none;
}

input,
select,
textarea {
  padding: 15px;
  font-size: 0.8em;
  height: 50px;
  width: 80%;
  max-width: 300px;
  min-width: 280px;
  border: 2px solid #888;
  margin-bottom: 50px;
  font-family: var(--bespoke);
  color: #888;
  background-color: #f4f4f4;
}

select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6.093' height='3.825'%3E%3Cpath d='M.479 0l2.567 2.83L5.613 0l.479.491-3.045 3.334L0 .491.479 0z'/%3E%3C/svg%3E");
  background-repeat: no-repeat, repeat;
  background-position: right .7em top 50%, 0 0;
  background-size: .8em auto, 100%;
  line-height: 1.5em;
}

select > option {
  height: 30px;
}

dialog {
  overflow-y: auto;
  max-height: 100vh;
  box-sizing: border-box;
  /* scrollbar-width: none; */
}

dialog button {
  display: inline-block;
  margin: 0;
  border: 1px solid;
  padding: .25rem .5rem;
  font-size: .875rem;
  line-height: 1.5;
  border-radius: .2rem;
  margin-left: .5rem;
}

img {
  max-width: 100%;
  height: auto;
}

/**
 * Header / Top Navigation Style
 */
.fixed-top {
  position: fixed;
  z-index: 1000;
  margin: 0 auto;
  width: 100%;
  top: 2%;
  pointer-events: none;
  transition: opacity .3s;
}

.navbar {
  justify-content: left;
  width: 80%;
  align-items: center;
}

.navbar a {
  color: #fff;
  opacity: 0.75;
  flex-basis: 20%;
  text-align: center;
  pointer-events: auto;
}

.navbar a:first-of-type {
  flex-basis: 10%;
  text-align: center;
}

/* Slider switch button */
.content-switch {
  width: 70px;
  height: 70px;
  position: absolute;
  background-color: #000;
  outline: none;
  z-index: 1000;
  opacity: .7;
  transition: var(--transition), opacity .3s, color .3s, border-color .3s;
  font-family: var(--prestige);
  overflow: hidden;
  border-radius: 100%;
  cursor: pointer;
  pointer-events: auto;
  font-size: .85em;
  font-weight: 400;
  color: #fff;
  padding: 1em 2em;
  margin: 1em auto;
  border: 2px solid #fff;
  right: 0;
  top: 97%;
  transform: translate3d(-50%, -150%, 0);
}

.content-switch:hover {
  opacity: 1;
}

.content-switch::before {
  content: '↓';
  speak: none;
  position: absolute;
  width: 100%;
  height: 100%;
  text-indent: 0;
  font-size: 4em;
  bottom: 0;
  top: 0;
  left: 0;
  right: 0;
  line-height: 1.55em;
}

.current.pane:last-of-type + .content-switch {
  border-color: var(--gray);
  color: var(--gray);
  /* transform: translate3d(-50%,50%,0); */
  /* transform: translate3d(-2vw, -85vh, 0); */
  transform: translate3d(-2vw, -95vh, 0);
}

.current.pane:last-of-type + .content-switch::before {
  content: '↑';
}

/**
 * Slider pagination
 */
.slider-pagination {
  bottom: 0;
  left: 0;
  position: absolute;
  text-align: center;
  width: 100%;
}
.slider-pagination > * {
  border-radius: 50%;
  box-shadow: 0 0 1px rgba(255, 255, 255, 0.75);
  background-color: #000;
  display: inline-block;
  height: 7px;
  width: 7px;
  margin: 7px;
  transition: background-color .25s;
  cursor: pointer;
}
.slider-pagination > *.is-active {
  background-color: rgba(255, 255, 255, 0.75);
}

/**
 * Slider arrows
 */
.slider-prev,
.slider-next {
  position: absolute;
  top: 50%;
  color: #fff;
  opacity: 0.5;
  width: 3.6em;
  height: 3.6em;
  margin-top: -1.8em;
  cursor: pointer;
}

.slider-prev:before,
.slider-next:before { transform: translateX(0.5em) translateY(1.55em) rotate(45deg); }
.slider-prev:after,
.slider-next:after  { transform: translateX(0.5em) translateY(1.55em) rotate(-45deg); }

.slider-prev { left: 2%; }
.slider-next { right: 2%; transform: rotate(180deg); }

.slider-prev:after,
.slider-prev:before,
.slider-next:after,
.slider-next:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 2em;
  height: 0.5em;
  border-radius: 0.2em;
  background-color: currentColor;
  transition: all 0.15s ease, background-color 0.8s ease;
  transform-origin: 0.2em 50%;
  will-change: transform;
  box-shadow: 0 -1px 1px #000;
}

.slider-prev:hover,
.slider-prev:focus,
.slider-next:hover,
.slider-next:focus        { color: #fff; opacity: 0.9; }

.slider-prev:hover:before,
.slider-next:hover:before { transform: translateX(0.5em) translateY(1.55em) rotate(40deg); }
.slider-prev:hover:after,
.slider-next:hover:after  { transform: translateX(0.5em) translateY(1.55em) rotate(-40deg); }


/**
 * slider
 */
h2 {
  font-family: var(--prestige);
  font-size: 5em;
  font-weight: normal;
  margin: 0 auto;
  line-height: 1;
  position: relative;
}

.cover h2 {
  color: #fff;
  position: absolute;
  transition: opacity .3s;
  z-index: 1;
  width: 100%;
  text-align: left;
  bottom: 0;
  left: 2%;
  transform: translate3d(0, -30%, 0);
}

.cover .desc {
  display: block;
  font-size: 27%;
  font-family: var(--prestige);
  font-weight: 300;
  padding-top: .2em;
  line-height: 1.3em;
}

.pic-carousel img {
  height: 100%;
  width: 100%;
}

/**
 * Hammer Slider
 */
.slider {
  width: 100%;
  height: 100%;
  margin: 0;
  position: relative;
  max-height: 100%;
  max-width: 100%;
  top: 50%;
  left: 50%;
  transform: translate3d(-50%, -50%, 0);
  transform-origin: 0 0;
  overflow: hidden;
}

.pane {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  text-align: center;
}

.animate .pane {
  transition: var(--transition);
}

/**
 * Slider content
 */
.content {
  background: white;
  text-align: center;
  color: var(--primary);
  font-size: 1.5em;
}

.content > header {
  transform: translate3d(0, 200px, 0);
  transition: opacity .3s cubic-bezier(.7, 0, .3, 1), transform 1s;
}

.content.current > header {
  transform: translate3d(0, 0, 0);
}

.intro-img {
  width: 240px;
  display: block;
  margin: 1.5em auto 0.5em auto;
  clip-path: circle(40% at 50% 50%);
  box-shadow: 0 2px 6px rgba(0, 0, 0, .1);
}

.content h2 {
  font-size: 3em;
  max-width: 70%;
  color: var(--primary);
  padding: .25em 10px 1em;
}

.content > header span {
  color: #95a5a6;
  font-family: var(--bespoke);
  font-size: .7em;
  display: block;
  line-height: 1.5em;
  max-width: 720px;
  margin: 0 auto;
}

.content > section {
    max-width: 1080px;
    margin: 5em auto;
    background: transparent;
    position: relative;
    padding: .5em;
}

.content > section:last-of-type {
    margin-top: 2em;
}

.content > section p {
  margin: 0 auto;
  padding: .5em 2em;
  line-height: 1.5;
  text-align: left;
  font-family: var(--prestige);
}

.content p.related {
  padding: 5em 1em 6em;
  text-align: center;
  font-weight: bold;
}

.content p.related a {
  display: inline-block;
  border: 2px solid var(--gray);
  opacity: .7;
  padding: 1em 2em;
  line-height: 1em;
  margin: 1em;
  border-radius: 100px;
  transition: var(--transition), opacity .3s, color .3s, border-color .3s;
  background-color: #000;
  color: #fff;
}

.content p.related a:hover {
  opacity: 1;
}

.content a,
.content a:hover {
  color: var(--primary);
}

/**
 * APP
 */

.overlay {
  position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
  background-color: white;
  z-index: 10000;
}

.overlay.hide {
  transition: opacity .6s;
}

.info {
  text-align: center;
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  font-weight: 700;
  letter-spacing: 1px;
  font-size: 80%;
  width: 100%;
}

.info #social a {
  color: #333;
  display: inline-block;
  padding: 20px 10px;
  opacity: .5;

}

.info #social a:hover {
  color: var(--primary);
  opacity: 1;
}

.info #social a img {
  vertical-align: middle;
}

/* Caroselli Intro */

.pic-carousel {
  position: absolute;
  width: 100%;
  height: 100%;
  overflow:hidden;
  margin: 0;
  padding: 0;
}

.content .pic-carousel {
  position: relative;
  width: 100%;
  height: 250px;
  display: inline-block;
  overflow: hidden;
  padding: 0;
  flex-basis: 33.3%;
  margin: 0 20px;
  border-radius: 12px;
}

.pic-carousel > figure {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  margin: 0;
  padding: 0;
}

.pic-carousel     { transition: transform .75s cubic-bezier(.16, 1, .3, 1), opacity .6s cubic-bezier(.16, 1, .3, 1); }
.pic-carousel img { object-fit: cover; object-position: center center; }

.current .cover .pic-carousel figure,
.cover.current .pic-carousel figure    { animation: pic-carousel-4 24s linear infinite 0s; }
.content .cover .pic-carousel figure,
.content.current .pic-carousel figure  { animation: pic-carousel-2 24s linear infinite 0s; }

/* Caroselli */
.pane.current .pic-carousel figure.pic-1 { opacity: 1; }
.pane.current .pic-carousel figure.pic-2 { animation-delay: 6s; }
.pane.current .pic-carousel figure.pic-3 { animation-delay: 12s; }
.pane.current .pic-carousel figure.pic-4 { animation-delay: 18s; }

.content.current .pic-carousel figure.pic-1 { opacity: 1; }
.content.current .pic-carousel figure.pic-2 { animation-delay: 12s; }
.content.current .pic-carousel figure.pic-3 { animation-delay: 1s; }
.content.current .pic-carousel figure.pic-4 { animation-delay: 12s; }
.content.current .pic-carousel figure.pic-5 { animation-delay: 1s; }
.content.current .pic-carousel figure.pic-6 { animation-delay: 12s; }

.cover .pic-carousel::before {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: 1;
  opacity: 1;
  background: linear-gradient(0deg, rgba(0, 0, 0, .65) 0%, rgba(0, 0, 0, 0) 50%);
  content: '';
}

/*Pages*/

.content.current {
  /* display: flex; */
  /* justify-content: center; */
  /* align-items: center; */
  /* height: 100vh; */
}

/* Helper classes */

.flx-container {
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
}

.text-center {
  text-align: center;
}

.hide {
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Parallax */
.pax-container {
  /* position: relative; */
  width: 100%;
  height: 100%;
  overflow-x: hidden;
  overflow-y: scroll;
  perspective: 8px;
  perspective-origin: 0%;
  scrollbar-width: thin;
}

.pax-back,       .pax-front       { position: absolute; transform-origin: 0 50%; opacity: .07 !important; filter: grayscale(1); }
.pax-back:hover, .pax-front:hover { opacity: .14 !important; }

.pax-back   { transform: translateZ(5px) scale(.375); top: 150px; }
.pax-front  { transform: translateZ(2px) scale(.75);  top: 125px; }

.pax-container *      { pointer-events: none; }
.pax-container img,
.pax-container a,
.pax-container button,
.pax-container select,
.pax-container textarea,
.pax-container label,
.pax-container input,
.pax-container iframe,
.pax-container .leaflet-container,
.pax-container .leaflet-container * { pointer-events: auto; }

/* Leaflet */
.leaflet-map {
  position:relative;
  width:100%;
  height:100vh;
  max-height:100vh
}

.leaflet-map-container {
  height:auto;
  width:100vw;
  position:relative;
  left:50%;
  right:50%;
  margin-left:-50vw;
  margin-right:-50vw;
  border-top:2px solid #f5f5f5;
  border-bottom:2px solid #f5f5f5
}

.content nav .thumb {
  flex-basis: 33%;
}

.content nav .thumb img {
  max-width: 170px;
  margin-bottom: 0.7em;
  border-radius: 4px;
  clip-path: circle(40% at 50% 50%);
}

.show-content .navbar,
.show-content .slider-pagination,
.show-content .slider-next,
.show-content .slider-prev {
  display: none;
}

/* Lazy Loading */
img[loading="lazy"] {
  transition: opacity, .3s linear;
  opacity: 0;
}

img[loading="lazy"].lazyloaded {
  opacity: 1;
}

/* JS Scroll animations */
.js-animated {
  opacity: 0;
  transition: transform .75s cubic-bezier(.16, 1, .3, 1),
              opacity .6s cubic-bezier(.16, 1, .3, 1);
}

.js-animate-up {
    transform: scale(.96) translateY(24px);
}

.js-animate-up.is-visible {
    transform: scale(1) translateY(0);
}

.js-animate-rtl {
  transform: translateX(24px);
}

.js-animate-ltr {
  transform: translateX(-24px);
}

.js-animate-rtl.is-visible,
.js-animate-ltr.is-visible {
  transform: translateX(0);
}

.js-animated.is-visible {
  opacity: 1;
}

/* Rotate animations */
.rotate-plus1       { transform: rotate(1deg); }
.rotate-min1        { transform: rotate(-1deg); }
.rotate-plus1:hover { transform: rotate(2deg); }
.rotate-min1:hover  { transform: rotate(-2deg); }

/**
 * Animations
 */
@keyframes slideUpFade {
  from { opacity: 0; transform: translate3d(0, 20px, 0); }
  to   { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes pic-carousel-4 {
  0%   { opacity: 0; transform: scale(1); }
  4%   { opacity: 1  }
  24%  { opacity: 1; }
  28%  { opacity: 0; transform: scale(1.1); }
  100% { opacity: 0; transform: scale(1); }
}

@keyframes pic-carousel-2 {
  0%   { opacity: 0; transform: scale(1); }
  4%   { opacity: 1  }
  54%  { opacity: 1; }
  58%  { opacity: 0; transform: scale(1.6); }
  100% { opacity: 0; transform: scale(1); }
}

/**
 * Media queries
 */
@media (max-width: 1024px) {
  .content    { font-size: 1em; }
  .content h2 { font-size: 3em; }
  h2          { font-size: 4em; }
}

@media (max-width: 768px) {
  /* .current.pane:last-of-type + .content-switch { transform: translate3d(-2vw, -95vh, 0); } */

  .cover .desc                       { font-size: .35em;         width: 65%; }
  .flx-container                     { flex-wrap: wrap-reverse; }
  .navbar                            { flex-flow: wrap;          width: 100%; }
  .navbar a,
  .navbar a:first-of-type            { flex-basis: 33.33%;       margin: 2px 0; }
  .content .pic-carousel             { flex-basis: 85%;          margin: 30px 0; }
  .content nav                       { flex-direction: column; }
  .content nav .thumb                { flex-basis: 100%;         margin-bottom: 5em; }
  footer                             { padding: 3em 2em 8em 2em; font-size: 1em; }
  .rotate-plus1, .rotate-plus1:hover { transform: rotate(0deg); }
  .rotate-min1, .rotate-min1:hover   { transform: rotate(0deg); }
  h2                                 { font-size: 3em; }
}