@import url('https://fonts.googleapis.com/css2?family=Kanit:wght@300;600&display=swap');

* {
  box-sizing: border-box;
}
body {
  font-family: 'Kanit', sans-serif;
  margin: 0;
}

.container {
  align-items: end;
  background: rgb(34,12,12);
  background: linear-gradient(0deg, rgba(34,12,12,1) 0%, rgba(137,27,26,1) 35%, rgba(137,27,26,1) 100%);
  display: flex;
  flex-direction: row;
  height: 100%;
  position: relative;
}
.main-content {
  flex-basis: 45%;
}
.slider-container {
  flex-basis: 55%;
  padding: 1vmin 1vmin 1vmin 0;
}
.vegas-container {
  height: 100%;
}

.logo {
  text-align: center;
}
.logo .nc-logo {
  max-width: 1490px;
  width: 90%;
}

h1 {
  color: #e2ae41;
  font-size: 8vmin;
  font-weight: 300;
  line-height: 1em;
  margin: 2vmin 0 0;
  text-align: center;
}

.gold-price {
  background: url(/wp-content/uploads/gold-price/img/gold-bg.jpg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  color: #891b1a;
  margin: 3vmin 3vmin 0;
  padding: 2vmin 3vmin;
  position: relative;
  width: calc(100% - 6vmin);
}

.gold-price td {
  font-size: 9vmin;
  line-height: 1em;
  padding: 2vmin 0;
  width: 50%;
}
.gold-price tr:last-child td {
  font-size: 4vmin;
  vertical-align: top;
}

.gold-price tr td:last-child {
  font-size: 11vmin;
  text-align: right;
}

.footer {
  color: #e2ae41;
  font-size: 3vmin;
  line-height: 1em;
  padding: 4vmin 3vmin;
  position: relative;
}
.footer p {
  margin: 0;
}
.footer a {
  color: #e2ae41;
  text-decoration: none;
}
.footer .gt-logo {
  bottom: 4vmin;
  position: absolute;
  right: 3vmin;
  width: 7vmin;
}

@media (orientation: portrait) {
  .container {
    align-items: stretch;
    flex-direction: column-reverse;
    height: 100vh;
    justify-content: start;
  }
  .main-content {
    flex-basis: 40%;
  }
  .slider-container {
    flex-basis: 60%;
    padding: 0;
  }

  .logo {
    left: 50%;
    position: fixed;
    top: 4vmin;
    transform: translateX(-50%);
    width: 100%;
    z-index: 99;
  }
  .logo .nc-logo {
    width: 65%;
  }

  h1 {
    margin: 4vmin 0;
  }

  .gold-price {
    margin: 3vmin 5vmin 0;
    padding: 4vmin 7vmin;
    width: calc(100% - 10vmin);
  }
  .gold-price td {
    padding: 1vmin 0;
  }

  .footer {
    padding: 4vmin 5vmin;
  }
  .footer .gt-logo {
    right: 5vmin;
  }
}

@media (orientation: landscape) and (max-width: 991px) {
  .logo .nc-logo {
    width: 70%;
  }
  .gold-price td {
    padding: 0.5vmin 0;
  }
}