/* RTD Landing - Molinari Ready To Drink (generated from RTD-LANDING.idml) */

@font-face {
  font-family: 'Gotham RTD';
  src: url('../fonts/gotham_bold.ttf') format('truetype');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Gotham RTD';
  src: url('../fonts/Gotham-Medium.otf') format('opentype');
  font-weight: 500; font-style: normal; font-display: swap;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; width: 100%; background: #fff; }
body { overflow-x: hidden; font-family: 'Gotham RTD', 'Gotham', sans-serif; }

.rtd-canvas { position: relative; width: 100vw; overflow: hidden; }

.rtd-canvas .it { position: absolute; }
.rtd-canvas .it img { width: 100%; height: auto; display: block; }

.circle {
  position: absolute;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
}
.circle.photo { overflow: hidden; }
.circle.photo img {
  position: absolute;
  height: 100%; width: auto;
  left: 50%; top: 0;
  transform: translateX(-50%);
  display: block;
}

.rect { position: absolute; }

.t {
  position: absolute;
  text-align: center;
  text-transform: uppercase;
  font-weight: 500;
  line-height: 1.12;
  color: #000;
  letter-spacing: 0.02em;
}
.t.h { font-weight: 700; line-height: 0.94; letter-spacing: 0.005em; }
.t.b { font-weight: 700; letter-spacing: 0.08em; }
.t.w { color: #fff; }
.t.h.w { font-weight: 500; letter-spacing: 0.06em; line-height: 1.05; }
.t.rtd-track { font-weight: 500; letter-spacing: 0.62em; text-indent: 0.62em; white-space: nowrap; }

.vline {
  position: absolute;
  width: 1.5px;
  background: #000;
  transform: translateX(-50%);
}

.bevi {
  position: absolute;
  writing-mode: vertical-rl;
  font-size: 0.68vw;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #000;
  white-space:nowrap;
}
.bevi.rtd-mobile { font-size: 1.9vw; }

.scroll {
  position:relative;
  z-index:5;
  animation: scrollAnim 1.5s ease-in-out infinite;
}

.rtd-mobile { display: none; }
.rtd-mobile .bevi { font-size: 1.7vw; }

@media (max-width: 767px) {
  .rtd-desktop { display: none; }
  .rtd-mobile { display: block; }
}

@keyframes scrollAnim {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}