html,
body,
div,
span,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
a,
img,
b,
u,
i,
ol,
ul,
li,
form,
label,
article,
footer,
header,
section,
video {
  padding: 0;
  border: 0;
  font-size: 100%;
  font-family: Arial, Helvetica, sans-serif;
  vertical-align: baseline;
}

article,
footer,
header,
section {
  display: block;
}

body {
  line-height: 1;
  background-color: #fff;
  /* Google Translate pushes the page down to make room for its bar. */
  top: 0 !important;
}

ol,
ul {
  list-style: none;
}


/* custom */

/* Header: 3cm deep. URL on the left, rotating banner in the middle, date and
   language dropdown on the right. */
.site-header {
  border-bottom: 1px solid #199BD7;
  box-shadow: 0px 0px 10px #0000004d;
  min-height: 3cm;
  display: flex;
  align-items: center;
  padding: 8px;
}
.site-header .header-inner {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 20px;
}
.site-header .site-url {
  margin: 0;
  font-size: 22px;
  font-weight: 800;
  line-height: 1.2;
}
.site-header .site-url a {
  color: #000;
  text-decoration: none;
}
.site-header .header-banner {
  text-align: center;
  line-height: 0;
}
.site-header .header-banner img {
  max-width: 100%;
  max-height: calc(3cm - 20px);
  height: auto;
  width: auto;
}
.site-header .language-selector {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.site-header .header-date {
  font-size: 14px;
  margin: 0;
  white-space: nowrap;
}
.site-language-select {
  font: 14px Arial, Helvetica, sans-serif;
  color: #000;
  background-color: #fff;
  border: 1px solid #CED4DA;
  border-radius: 4px;
  height: 32px;
  width: 190px;
  max-width: 100%;
  padding: 2px 6px;
  cursor: pointer;
}

/* Google's own widget stays on the page but hidden: its dropdown is unreliable
   on phones and carries the "Powered by Google" branding. Visitors use
   .site-language-select instead. This also hides the Google bar that appears
   across the top of the page once a language is chosen. */
#google_translate_element,
body > .skiptranslate,
iframe.skiptranslate,
.goog-te-banner-frame,
.VIpgJd-ZVi9od-ORHb,
.VIpgJd-ZVi9od-ORHb-OEVmcd,
.VIpgJd-ZVi9od-aZ2wEe-wOHMyf,
.VIpgJd-ZVi9od-l4eHX-hSRGPd,
.goog-tooltip,
#goog-gt-tt {
  display: none !important;
}
.goog-text-highlight {
  background: none !important;
  box-shadow: none !important;
}

.login-page {
  font-size: 14px;
  color: #000;
}
.login-page .discription p {
  margin-bottom: 16px;
  line-height: 18px;
  text-align: justify;
}
.login-page .login-btn {
  background-color: #990400;
  color: #fff;
  border: 0px;
  padding: 12px;
  border-radius: 8px;
}
.login-page .notice-bar {
  font-size: 16px;
  font-weight: bold;
  line-height: 1.3;
  text-align: center;
  margin-top: 12px;
}

/* The 10 blue icons, spread evenly across the width of the iPhone. The right
   hand heading is given the same height so the first paragraph starts level
   with the top of the video iPhone. */
.social-list-header,
.right-heading {
  min-height: 44px;
}
.social-list-header {
  width: 312px;
  max-width: 100%;
  margin: 0 auto;
  padding: 0 4px 14px;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  font-size: 16px;
  color: #1da1f2;
}
.social-list-header * {
  font-style: normal !important;
}
.right-heading {
  font-weight: bold;
  font-size: 16px;
  line-height: 1.25;
  color: #000;
  margin: 0;
  padding-bottom: 8px;
  display: flex;
  align-items: flex-end;
}

/* iPhones: 5% larger than the 297px one on fanbombing.net. Everything inside
   is placed in % of the frame image (613 x 1255) so it stays lined up. */
.login-page .mobile-container {
  width: 312px;
  max-width: 100%;
  height: auto;
  isolation: isolate;
}
.login-page .mobile-container .mobile-fram {
  position: relative;
  z-index: 2;
  display: block;
  pointer-events: none;
}
.login-page .mobile-container .phone-screen {
  position: absolute;
  z-index: 1;
  left: 6.5%;
  width: 87%;
  top: 20%;
  height: 67.9%;
  background: #000;
  overflow: hidden;
}
.login-page .mobile-container .phone-screen img,
.login-page .mobile-container .phone-screen video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.login-page .mobile-container .phone-screen video {
  cursor: pointer;
}
.login-page .mobile-container .phone-empty {
  color: #fff;
  text-align: center;
  margin: 0;
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  transform: translateY(-50%);
}
/* Site address written over the address bar that is part of the frame image. */
.login-page .mobile-container .phone-url {
  position: absolute;
  z-index: 3;
  left: 24.6%;
  top: 15.55%;
  width: 49.5%;
  height: 2.5%;
  background: #f1f1f1;
  color: #000;
  font-size: 8px;
  font-weight: 600;
  line-height: 16px;
  display: flex;
  align-items: center;
  white-space: nowrap;
  overflow: hidden;
}
.login-page .play-button {
  position: absolute;
  z-index: 3;
  left: 50%;
  top: 53.95%;
  transform: translate(-50%, -50%);
  width: 72px;
  height: 72px;
  border-radius: 50%;
  border: 3px solid #fff;
  background: rgba(0, 0, 0, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.login-page .play-button span {
  width: 0;
  height: 0;
  margin-left: 6px;
  border-top: 15px solid transparent;
  border-bottom: 15px solid transparent;
  border-left: 26px solid #fff;
}
.login-page .video-phone.is-playing .play-button {
  display: none;
}

.login-page .notificatio {
  max-width: 150px;
  background-color: #fff;
  border-radius: 6px;
  box-shadow: 0px 0px 4px #0000004d;
  padding: 5px;
  position: absolute;
  z-index: 4;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.5s, visibility 0.5s;
}
.login-page .notificatio.is-visible {
  opacity: 1;
  visibility: visible;
}
.login-page .notificatio .image-border {
  padding: 2px;
  height: 39px;
  width: 39px;
  border-radius: 100%;
  overflow: hidden;
  background: linear-gradient(90deg,#f31463 0%,#ff9500 70.31%);
  margin-bottom: 5px;
}
.login-page .notificatio .image-border .noti_img {
  height: 100%;
  width: 100%;
  border-radius: 100%;
  object-fit: cover;
  border: 2px solid #fff;
}
.login-page .notificatio .noti_text {
  font-size: 10px;
  color: #000;
  margin: 0 18px;
  line-height: 11px;
}
.login-page .noti_1 {
  top: 19.4%;
  left: -55px;
}
.login-page .noti_2 {
  top: 30.6%;
  right: -48px;
}
.login-page .noti_3 {
  top: 69%;
  left: -55px;
}
.login-page .noti_4 {
  top: 60.5%;
  right: -48px;
}

/* The 7cm space between the two iPhones holds the small text and the H1. */
.between-phones {
  min-height: 7cm;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.under-phone-text {
  font-size: 9pt;
  line-height: 1.35;
  text-align: center;
  max-width: 420px;
  margin: 0 auto;
}
.mobile-title {
  font-size: 24px;
  line-height: 1.2;
  font-weight: 800;
  color: #000;
  margin: 20px 35px 0;
}

.preview-tour-button {
  background: black;
  border-radius: 10px;
  color: white;
  font-size: 22px;
  font-weight: bold;
  padding: 15px 10px;
  text-align: center;
  display: block;
  text-decoration: none;
  margin-top: 30px;
}
.preview-tour-button:hover {
  color: white;
}

/* Pink iPhone on its side under the button; it links to the preview tour and
   its address bar shows where the link goes. */
.landscap-mobile-container {
  display: block;
  position: relative;
  margin-top: 20px;
  container-type: inline-size;
  color: #000;
  text-decoration: none;
}
.landscap-mobile-container .phone-url {
  position: absolute;
  left: 37.5%;
  top: 13.6%;
  width: 24.2%;
  height: 5.2%;
  background: #f1f1f1;
  font-size: 1.2cqw;
  font-weight: 600;
  display: flex;
  align-items: center;
  white-space: nowrap;
  overflow: hidden;
}

/* Desktop screenshot: 1cm under the 3 paragraphs, thick black border on the
   left, right and bottom only so the top of the screenshot stays visible. */
.desktop-preview {
  --border: min(2cm, 9vw);
  margin-top: 1cm;
  margin-bottom: 24px;
  border: solid #000;
  border-width: 0 var(--border) var(--border);
  position: relative;
  overflow: hidden;
}
.desktop-preview img {
  display: block;
  width: 100%;
  height: auto;
}
/* Turned on its side: js/page.js sizes the box once the image has loaded. */
.desktop-preview.is-portrait img {
  position: absolute;
  top: 0;
  left: 0;
  max-width: none;
  transform-origin: top left;
  transform: rotate(90deg) translateY(-100%);
}

footer {
  background-color: #E5E5E5;
  padding: 30px;
}
footer ul {
  gap: 42px;
  font-size: 14px;
}
footer ul li a {
  color: #191919;
}
footer ul li a:hover {
  color: #000000;
}
.max-500{
  max-width: 494px;
}
.ml-55 {
  margin-left: 55px;
}

.overlay {
  position: fixed;
  left: 0;
  top:0;
  width: 100vw;
  height: 100vh;
  z-index: 999;
  display: flex;
  align-items: center;
  justify-content: center;
}
.loading-screen {
  background: #fff;
  text-align: center;
  transition: opacity 0.3s, visibility 0.3s;
}
.loading-screen.is-hidden {
  opacity: 0;
  visibility: hidden;
}
.loading-screen img {
  margin-bottom: 20px;
  width: 10vw;
  max-width: 160px;
}
.loading-screen p {
  font-weight: bold;
  font-size: 18px;
}

@media (max-width: 575.98px) {
  /* Keep the pop ups inside the screen on phones. */
  .login-page .noti_1,
  .login-page .noti_3 {
    left: 0px;
  }
  .login-page .noti_2,
  .login-page .noti_4 {
    right: 0px;
  }
  .login-page .notificatio {
    max-width: 130px;
  }
}

@media (max-width: 991.98px) {
  /* Tablets and phones: URL and date/language on the first row, the banner
     full width underneath. */
  .site-header .header-inner {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px 12px;
  }
  .site-header .header-banner {
    grid-column: 1 / -1;
    grid-row: 2;
  }
  .site-header .language-selector {
    align-items: flex-end;
    gap: 6px;
  }
}

@media (max-width: 767.98px) {
  .site-header .site-url {
    font-size: 17px;
    overflow-wrap: anywhere;
  }
  .site-header .header-date {
    font-size: 12px;
  }
  .site-language-select {
    /* 16px stops iPhones zooming the page when the dropdown is tapped. */
    font-size: 16px;
    height: 36px;
    width: 170px;
  }
  .mobile-title {
    font-size: 18px;
    margin: 20px 20px 0;
  }
  .right-heading {
    min-height: 0;
  }
  footer {
    background-color: #E5E5E5;
    padding: 10px;
  }
  footer ul {
    flex-direction: column;
    gap: 15px;
  }
}
@media (max-width: 1200px) {
  .ml-55{
    margin-left: 0px;
  }
  .max-500 {
    max-width: 100%;
  }
}