* {
   box-sizing: border-box;
   -webkit-tap-highlight-color: transparent;
   font-family: "kanit_r", sans-serif;
}
a {
   text-decoration: none !important;
}
a:hover {
   text-decoration: none !important;
   color: #d50032 !important;
   transition: color 0.2s ease-in-out;
}
.darkmode {
   color: #d4d4d4 !important;
}
@font-face {
   font-family: "digital-7";
   src: url("/fonts/digital-7.ttf");
}
@font-face {
   font-family: "kanit-light";
   src: url("/fonts/kanit-light-webfont.woff");
}
.contactText {
   width: 100%;
   text-align: center;
   padding-top: 15vh;
}

.contactText h1 {
   font-family: "kanit_m", sans-serif;
   font-size: 2.3rem;
   margin-bottom: 25vh;
}

.partners {
   width: 50%;
   margin: auto;
   margin-bottom: 25vh;
   padding-top: 4vh;
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   -webkit-box-pack: justify;
   -ms-flex-pack: justify;
   justify-content: space-between;
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
}

.partners div {
   width: 10%;
   -webkit-transition: 0.3s;
   transition: 0.3s;
}

.partners div:hover {
   -webkit-transform: scale(1.25);
   transform: scale(1.25);
}

.partners img {
   width: 100%;
}
.contactText > a {
   font-size: 2rem;
   color: black;
   line-height: 3;
   font-family: "kanit-light", sans-serif;
   font-weight: 100;
}
.clock {
   font-family: "digital-7";
   font-size: 4rem;
   color: #d50032;
}
.clock-container h2 {
   font-weight: 600;
   font-size: 1rem;
}
.places {
   justify-content: space-between;
   padding-top: 10rem;
}
.placesCard {
   text-align: left;
   margin-bottom: 2rem;
}
.placesCard h3 {
   font-size: 1.25rem;
   font-weight: 700;
   margin: 0;
}
.placesCard a {
   font-size: 1rem;
   color: black;
   font-family: "kanit-r", sans-serif;
   transition: color 0.2s ease-in-out;
}

@media (max-width: 1024px) {
   .contactText p {
      font-size: 1.5rem;
      margin-bottom: 4vh;
      width: 620px;
   }

   .contactText h1 {
      font-size: 2.5rem;
      margin-bottom: 29vh;
   }

   .partners {
      width: 80%;
   }
}

@media (max-width: 768px) {
   * {
      box-sizing: unset;
   }
   .clock {
      font-family: "digital-7";
      font-size: 2.5rem;
      color: #d50032;
   }
   .clock-container h2 {
      font-weight: 600;
      font-size: 1rem;
   }
   .placesCard a {
      font-size: 0.95rem;
   }
   .clock-container {
      margin-bottom: 1rem;
   }
   .contactText p {
      font-size: 1.3rem;
      width: 550px;
   }

   .contactText h1 {
      font-size: 2rem;
      margin-bottom: 16vh;
   }
   .contactText {
      padding-top: 5vh;
   }

   .partners {
      width: 80%;
   }
   .places {
      padding-top: 8rem;
   }
}

@media (max-width: 650px) {
   .content {
      height: 80%;
      height: 80vh;
      height: calc(var(--vh, 1vh) * 80);
      width: 90%;
   }
   .placesCard p {
      width: 100%;
   }
   .contactText p {
      font-size: 1.1rem;
   }

   .contactText h1 {
      font-size: 1.5rem;
      margin-bottom: 10vh;
   }
   .places h2 {
      padding: 1rem 0px 2rem 0 !important;
   }

   .partners {
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
      -ms-flex-direction: column;
      flex-direction: column;
      margin: 0;
      width: 100%;
   }

   .partners div {
      width: 100px;
      margin-bottom: 80px;
   }
   .places {
      padding-top: 4rem;
   }
   .contactText p {
      margin-bottom: 0;
   }
}