/*
=============================
    GENERAL CSS RULES
=============================
*/

@font-face {
  font-family: "Kanit";
  src: url(/assets/css/font/Kanit/Kanit-Regular.ttf);
  font-weight: normal;
}  

*:not(.article_content *) {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

body {
  font-size: 16px;
  font-family: Oswald, Kanit, Helvetica, sans-serif;
}

.flex {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
}

a,
a:hover,
a:focus {
  text-decoration: none;
  cursor: pointer;
}

img:not(.article_content *) {
  display: block;
  max-width: 100%;
  margin: 0 auto;
}

/*
=============================
    HEADER
=============================
*/

/* Small logo */
.logo-sm {
  margin: 10px;
}

/* Large logo - Not displayed on small screens */
.logo-lg {
  display: none;
}

/* Contact & Menu */
.hotline,
.menu {
  font-size: 1.1em;
  color: rgb(121, 121, 121); /* Grey */
  font-weight: bold;
}

/* Contact group - left side */
.contact-group {
  margin-left: 10px;
  position: relative;
}

.contact-group .arrow {
  color: rgb(121, 121, 121); /* Grey */
}

.phone-group:hover {
  cursor: pointer;
}

.phone-icon {
  color: #df2590; /* Pink */
  margin-right: 10px;
}

.contact-group .phone-icon {
  font-size: 1.8em;
}

/* Branch numbers */
.numbers {
  display: none;
  position: absolute;
  background-color: rgba(255, 255, 255, 0.9);
  z-index: 2;
  padding: 5px;
  top: 25px;
}

.numbers-show {
  display: block;
}

.numbers li {
  list-style-type: none;
  font-size: 0.9em;
  color: #df2590; /* Pink */
  padding: 3px;
}

.numbers li span {
  font-weight: normal;
}

/* Telephone number */
.hotline {
  margin-left: 10px;
}

.hotline span {
  color: #df2590; /* Pink */
  padding-left: 5px;
  font-size: 0.85em;
  letter-spacing: 0.5px;
  font-weight: normal;
}

/* Menu group - right side */
.menu {
  margin-right: 10px;
}

.menu h3 {
  display: none;
  margin: 10px 15px;
}

/* Burger nav */
.menu a {
  font-size: 1.8em;
  color: #df2590; /* Pink */
  margin-bottom: 2px;
}

/*
=============================
    SIDE MENU
=============================
*/

/* Side-navigation area */
.side-nav {
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 3;
  top: 0;
  right: 0;
  background-color: #df2590; /* Pink */
  opacity: 0.9;
  overflow-x: hidden;
  padding-top: 70px;
  transition: 0.3s;
}

/* links */
.side-nav a {
  display: block;
  margin: 0px 10px;
  padding: 10px 10px 10px 20px;
  font-size: 1.5em;
  color: #fff;
  transition: 0.3s;
  border-bottom: 1px solid #fff;
}

.side-nav .arrow {
  padding-left: 15px;
  font-size: 1em;
}

.apply-color:link {
  color: #fff;
  text-decoration: none;
  text-shadow: #ffeb3b 0 0 5px;
}

/* Close button */
.side-nav .close-btn {
  position: absolute;
  top: 0;
  right: 22px;
  padding: 0;
  font-size: 60px;
  font-weight: bold;
  border-bottom: none;
}

/* Speed of menu transition */
#main {
  transition: margin-right 0.5s;
}

/*
=============================
    SIDE MENU - DROPDOWN
=============================
*/

.dropdown {
  display: none;
  position: relative;
  list-style: none;
}

.dropdown-show {
  display: block;
}

.dropdown li {
  height: 50px;
  padding: 5px 0 5px 20px;
}

.dropdown a {
  border-bottom: none;
  font-size: 1.35em;
}

/*
=============================
   SOCIAL MEDIA WIDGET
=============================
*/

.social {
  background-color: #fff;
  z-index: 1;
  position: fixed;
  width: 212px;
  height: 46px;
  left: -170px;
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
}

#facebook,
#pinterest,
#instagram,
#twitter,
#youtube,
#line {
  transition: margin-left 0.3s;
}

.social-fb {
  top: 120px;
}

.social-p {
  top: 166px;
}

.social-i {
  top: 212px;
}

.social-t {
  top: 258px;
}

.social-tb {
  top: 304px;
}

.social-l {
  top: 350px;
}

.follow p {
  color: #df2590;
  font-size: 1.1em;
  padding: 10px;
}

.sm-icon {
  width: 30px;
  font-size: 1.6em;
  color: #fff;
  margin-right: 8px;
  margin-bottom: 8px;
  text-align: center;
}

.sm-icon:last-of-type {
  padding-top: 7px;
}

/*
=============================
    SLIDER
=============================
*/

.carousel {
  padding: 0px;
  margin-bottom: 20px;
}

.slider-image {
  width: 100%;
}

/*
=============================
    MAIN TABS
=============================
*/

.main-tabs {
  margin: 0 auto;
  flex-direction: column;
  align-items: stretch;
  flex-wrap: nowrap;
}

.main-tabs a:nth-of-type(4) {
  order: -1;
}

.tabs {
  margin-bottom: 10px;
}

.tab-header {
  background-color: #df2590; /* Pink */
  color: white;
  text-align: center;
  position: relative;
}

.tab-header h1 {
  font-size: 1.6em;
  letter-spacing: 1px;
  padding: 8px;
  text-decoration: none;
  color: white;
  text-transform: uppercase;
}

.tab-icon {
  position: absolute;
  top: 10px;
  right: 10px;
}

.tab-header .tab-icon {
  font-size: 2.1em;
}

.tab-img {
  position: relative;
}

.tab-img img {
  width: 100%;
}

.tagline {
  background-color: rgba(253, 253, 253, 0.8); /* White */
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 40px;
}

.tagline p {
  font-size: 1.5em;
  text-align: center;
  color: #df2590; /* Pink */
  line-height: 40px;
}

.tagline span {
  text-transform: uppercase;
}

/*
=============================
    SUB-MENUS
=============================
*/

.sub-menu {
  flex-direction: column;
  width: 100%;
}

.submenu-1,
.submenu-2,
.submenu-3 {
  padding: 10px;
  display: flex;
  justify-content: center;
  width: 100%;
}

.submenu-1,
.submenu-2 {
  height: 330px;
  line-height: 2.8rem;
}

.submenu-1 {
  background-color: #ffbb42; /* Orange */
}

.submenu-1 ul {
  padding-left: 40px;
}

.submenu-2 {
  background-color: #72c9ff; /* Blue */
}

.submenu-1 li,
.submenu-2 li {
  font-size: 1.3em;
  padding: 5px;
  text-decoration: none;
  list-style-type: none;
  color: rgb(0, 0, 0);
}

.submenu-1 li:hover,
.submenu-2 li:hover,
.submenu-3 li:hover {
  color: #000;
  cursor: pointer;
}

.submenu-3 {
  background-color: #ffec5e; /* Yellow */
  flex-direction: column;
  align-items: center;
  width: 100%;
}

/* Register Button */
.register {
  padding: 10px;
}

.register button {
  width: 180px;
  font-size: 1.6em;
  background-color: #df2590; /* Pink */
  color: #fff;
  padding: 5px;
  border: 2px solid #fff; /* White */
}

.register button:hover {
  background-color: #dd429d; /* Pink */
}

.register span {
  display: block;
  color: #fff; /* White */
  font-size: 0.6em;
}

/* English to Skype advert */
.advert {
  padding: 10px;
}

.advert img {
  border-radius: 10px;
}

/*
=============================
    FOOTER
=============================
*/

footer {
  margin: 0 auto;
}

.footer {
  flex-direction: column;
}

.iapa {
  margin-left: 5px;
}

.copyright {
  /* width: 50%; */
  margin: 0 auto;
}

.footer h4 {
  margin-bottom: 10px;
}

.affiliates {
  padding: 10px 0px;
  justify-content: center;
  /* margin: 0 auto; */
}

.aff-1,
.aff-2 {
  position: relative;
  cursor: pointer;
  padding-bottom: 15px;
}

.aff-1:hover .aifs-login,
.aff-2:hover .apia-login {
  display: block;
}

/* First Affiliate */
.aff-1 {
  width: 150px;
  margin-right: 15px;
}

.aff-1 p {
  font-size: 1.3em;
  margin-right: 10px;
}

.aff-1 i:first-of-type {
  margin-right: 8px;
}

.aff-1 i:last-of-type {
  margin-left: 8px;
}

.aff-1 img {
  margin-left: 5px;
  margin-top: 5px;
  width: 50px;
}

/* Second Affiliate */
.aff-2 {
  width: 115px;
  font-size: 1.3em;
}

.aff-2 img {
  margin-right: 10px;
}

/* Affiliate Dropdowns */
.aifs-login,
.apia-login {
  background-color: rgba(231, 228, 228, 0.8); /* Light Grey */
  position: absolute;
}

.aifs-login {
  display: none;
  padding: 5px;
  bottom: 60px;
}

.apia-login {
  display: none;
  width: 130px;
  padding: 0px 0px 5px 5px;
  right: 0px;
  bottom: 50px;
  text-align: left;
}

.aifs-login p,
.apia-login p {
  letter-spacing: 0.5px;
  color: #333;
  margin-bottom: 0px;
}

.aifs-login p {
  margin-left: 10px;
  font-size: 0.85em;
  line-height: 1.7em;
}

.apia-login p {
  display: inline-block;
  font-size: 0.65em;
}

.flag {
  width: 20px;
  display: inline-block;
}

/*
=============================
    MEDIA QUERIES
=============================
*/

/* HEADER */

/* Large mobiles & smaller tablets */

@media screen and (min-width: 426px) {
  /* Increases outer margins */
  .contact-group {
    margin-left: 15px;
  }

  .menu {
    margin-right: 15px;
  }

  /* Adds word 'Menu' */
  .menu h3 {
    display: inline-block;
  }
}

/* Tablets and larger */

@media screen and (min-width: 768px) {
  .hotline span {
    font-weight: bold;
  }

  .menu a {
    font-size: 2.2em;
  }
}

/* Laptops and larger */

@media screen and (min-width: 1024px) {
  /* Large logo appears */
  .logo-sm {
    display: none;
  }

  .logo-lg {
    display: block;
    margin: 10px auto;
  }

  .contact-group {
    width: 25%;
    justify-content: flex-start;
  }

  .menu {
    width: 25%;
    justify-content: flex-end;
  }
}

/* Large laptops and larger */

@media screen and (min-width: 1440px) {
  /* Increase size menu group */
  .menu h3 {
    font-size: 1.1em;
  }

  .menu a {
    font-size: 2.6em;
  }
}

/* SOCIAL MEDIA WIDGET */

@media screen and (min-width: 375px) {
  .social-fb {
    top: 130px;
  }

  .social-p {
    top: 176px;
  }

  .social-i {
    top: 222px;
  }

  .social-t {
    top: 268px;
  }

  .social-tb {
    top: 314px;
  }

  .social-l {
    top: 360px;
  }
}

@media screen and (min-width: 425px) {
  .social-fb {
    top: 138px;
  }

  .social-p {
    top: 184px;
  }

  .social-i {
    top: 230px;
  }

  .social-t {
    top: 276px;
  }

  .social-tb {
    top: 322px;
  }

  .social-l {
    top: 368px;
  }
}

@media screen and (min-width: 768px) {
  .social-fb {
    top: 159px;
  }

  .social-p {
    top: 205px;
  }

  .social-i {
    top: 251px;
  }

  .social-t {
    top: 297px;
  }

  .social-tb {
    top: 343px;
  }

  .social-l {
    top: 389px;
  }
}

@media screen and (min-width: 1024px) {
  .social-fb {
    top: 185px;
  }

  .social-p {
    top: 231px;
  }

  .social-i {
    top: 277px;
  }

  .social-t {
    top: 323px;
  }

  .social-tb {
    top: 369px;
  }

  .social-l {
    top: 412px;
  }
}

/* TABS */

/* Large mobiles & smaller tablets */

@media screen and (min-width: 426px) {
  /* Adds rounded borders when tabs no longer full screen width */
  .tab-header {
    border-top-left-radius: 30px;
    border-top-right-radius: 30px;
  }

  .tab-img img {
    border-bottom-left-radius: 30px;
    border-bottom-right-radius: 30px;
  }
}

@media screen and (min-width: 426px) and (max-width: 1365px) {
  /* Adds space between tabs */
  .tabs {
    margin-bottom: 20px;
  }
}

/* Decreases width of main-tabs container */
@media screen and (min-width: 426px) and (max-width: 767px) {
  .main-tabs {
    width: 425px;
  }
}

/* Tablets and larger */

@media screen and (min-width: 768px) {
  .main-tabs {
    width: 700px;
  }

  .tabs {
    width: 340px;
  }

  /* Increases font-size of tab headers & makes hotline number bold */
  .tab-header h1 {
    font-size: 1.9em;
  }

  .tab-icon {
    top: 13px;
  }

  .main-tabs {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    flex-wrap: wrap;
  }
}

/* Positioning tabs on larger screens */

@media screen and (min-width: 1366px) {
  .main-tabs {
    width: 1400px;
    flex-wrap: nowrap;
    margin: 50px auto;
  }

  .tabs {
    width: 320px;
    margin-bottom: 0px;
  }
}

@media screen and (min-width: 1920px) {
  .main-tabs {
    width: 1500px;
  }
}

/* SUB MENU */
@media screen and (max-width: 650px) {
  .submenu-1,
  .submenu-2 {
    font-size: 1.2rem;
  }
}

@media screen and (min-width: 651px) {
  .sub-menu {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: stretch;
  }

  .submenu-1,
  .submenu-2,
  .submenu-3 {
    width: 33.3333%;
  }

  .submenu-1,
  .submenu-2 {
    align-items: center;
  }

  .submenu-1 ul {
    padding-left: 0;
  }
}

@media screen and (min-width: 768px) {
  .submenu-1 li,
  .submenu-2 li {
    font-size: 1.5em;
  }
}

/* FOOTER */

/* Large mobiles & smaller tablets */

/* Footer changes to horizontal layout */

@media screen and (min-width: 551px) {
  .footer {
    flex-direction: row;
    margin-top: 20px;
    margin-bottom: 10px;
  }

  .copyright {
    margin: 0;
  }

  .footer h4 {
    order: 0;
    margin-left: 15px;
    margin-bottom: 0;
    font-weight: normal;
  }

  .affiliates {
    order: 1;
    margin-right: 15px;
    padding: 0;
  }

  .aff-1,
  .aff-2 {
    padding-bottom: 0;
  }
}