/*===================================
 HTML
 Primary Color: #fc0;
 Secondary Color: #f08;
 Breakpoint: sm 768 md 992 lg 1200
===================================*/


@import url("sitemap.css");

html {
  font-size: 20px;
}

body {
  font-family: 'Kanit', sans-serif;
  font-weight: 200;
  color: #333;
}

hr {
  border-width: 3px;
  max-width: 50px;
  margin-top: 50px;
  margin-bottom: 50px;
  border-color: #fc0;
}

h1 {
  font-weight: 700;
}

h2 {
  font-weight: 400;
}

h3 {
  font-weight: 400;
}

h4 {
  font-weight: 400;
}

a,
a:visited,
a:active {
  color: inherit;
  text-decoration: none !important;
}

a:hover,
a:focus {
  color: #fc0 !important;
}

li {
  /*margin: 8px 0 0;*/
}

label.btn.active {
  color: rgba(255, 255, 255, 0.6) !important;
}

input[type='radio'] {
  color: #333 !important;
  opacity: .5 !important;
}


/*===========
 BOOTSTRAP
===========*/

.jumbotron {
  border-radius: 0;
  color: #fff;
  margin: 0;
  display: flex;
  align-items: center;
  min-height: 100vh;
}

.breadcrumb a:hover {
  color: #fc0 !important;
}

.btn-link {
  color: #333 !important;
}

.btn-primary {
  color: #333 !important;
  background-color: #fc0;
  border-color: rgba(0, 0, 0, 0);
  transition: .5s;
}

.btn-primary:hover,
.btn-primary:focus {
  color: #fff !important;
  background-color: #f08;
  border-color: rgba(0, 0, 0, 0);
}

.btn-sweet {
  color: #fff !important;
  background-color: #d37;
  border-color: rgba(0, 0, 0, 0);
  transition: .5s;
}

.btn-sweet:hover,
.btn-sweet:focus {
  color: #333 !important;
  background-color: #e8a;
  border-color: rgba(0, 0, 0, 0);
}

.btn.disabled {
  color: #fff !important;
  background-color: #555;
  border-color: #555;
}

.badge-primary {
  color: #333;
  background-color: #fc0;
}

.badge-navy {
  color: #fff;
  background-color: #08c;
}

.badge-green {
  color: #fff;
  background-color: #0b4;
}

.badge-red {
  color: #fff;
  background-color: #f00;
}

.text-muted {
  color: #ddd;
}

.text-primary {
  color: #fc0;
}

.text-success {
  color: #08c;
}

/*====
  IDs
====*/

#footer {
  padding: 20px;
}

#footer a {
  transition: .2s;
}

#footer a:hover {
  color: #fc0 !important;
}

/*====
 Components
 ====*/
#news {
  color: #fff;
  background-color: #08c;
}

#news a,
#news a:visited,
#news a:active {
  /* color: #fc0; */
  transition: .2s;
}

#news a:hover {
  color: #fc0 !important;
}

#promotion {
  color: #fff;
  background: linear-gradient(-45deg, #EE7752, #E73C7E, #23A6D5, #23D5AB);
  background-size: 400% 400%;
  -webkit-animation: Gradient 15s ease infinite;
  -moz-animation: Gradient 15s ease infinite;
  animation: Gradient 15s ease infinite;
}

#promotion a,
#promotion a:visited,
#promotion a:active {
  color: #fc0;
  transition: .2s;
}

#promotion a:hover {
  color: #fff !important;
}


@-webkit-keyframes Gradient {
  0% {
    background-position: 0% 50%
  }

  50% {
    background-position: 100% 50%
  }

  100% {
    background-position: 0% 50%
  }
}

@-moz-keyframes Gradient {
  0% {
    background-position: 0% 50%
  }

  50% {
    background-position: 100% 50%
  }

  100% {
    background-position: 0% 50%
  }
}

@keyframes Gradient {
  0% {
    background-position: 0% 50%
  }

  50% {
    background-position: 100% 50%
  }

  100% {
    background-position: 0% 50%
  }
}

#related {
  font-size: .7em;
  color: #666;
  background-color: #f8f8f8;
}

/*=======
Classes
=======*/

.content h2 {
  margin-top: 2rem;
  margin-bottom: 2rem;
  text-align: center;
}

.content h3 {
  margin-top: 2rem;
  margin-bottom: 2rem;
  text-align: center;
}

.content h4 {
  margin-bottom: 1.5rem;
}

.content p {
  margin-bottom: 2.5rem;
}

.content p,
.content li,
.content small {
  font-family: sans-serif;
}

.content a,
.content a:visited,
.content a:active {
  font-weight: 700;
  text-decoration: underline !important;
}

.content a:hover {
  color: #fc0 !important;
}

.content .btn {
  font-family: 'Kanit', sans-serif;
  ;
  text-decoration: none !important;
}

.indent {
  text-indent: 50px;
}

.bg-transparent {
  background-color: transparent;
}

.bg-grey {
  color: #fff;
  background-color: #333;
}

.bg-company-primary {
  color: #333;
  background-color: #fc0;
}

.text-company-secondary {
  color: #f08;
}

.bg-company-secondary {
  color: #fff;
  background-color: #f08;
}

.text-sky {
  color: #08c;
}

.bg-sky {
  color: #fff;
  background-color: #08c;
}

.bg-water {
  color: #fff;
  background-color: #8bd;
}

.bg-dark-green {
  color: #fff;
  background-color: #798;
}

.bg-brown {
  color: #fff;
  background-color: #a85;
}

.bg-red {
  color: #eff;
  background-color: #a22;
}

.txt-sweet {
  color: #e8a !important;
}

.bg-sweet {
  color: #fff;
  background-color: #d37;
}

.bg-sweet-gradient {
  color: #fff;
  background: linear-gradient(to bottom right, #e8a, #e58, #e8a);
}

.debug-green {
  border: 1px solid green !important;
}

.debug-red {
  border: 1px solid red !important;
}

.o8 {
  opacity: .8;
}

.o7 {
  opacity: .7;
}

.o6 {
  opacity: .6;
}

.o5 {
  opacity: .5;
}

.bg-black-o8 {
  background-color: rgba(0, 0, 0, 0.8);
}

.bg-white-o5 {
  background-color: rgba(255, 255, 255, 0.5);
}

.bg-white-o6 {
  background-color: rgba(255, 255, 255, 0.6);
}

.bg-white-o7 {
  background-color: rgba(255, 255, 255, 0.7);
}

.bg-white-o8 {
  background-color: rgba(255, 255, 255, 0.8);
}

.bg-white-o9 {
  background-color: rgba(255, 255, 255, 0.9);
}

img.drop-shadow {
  box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.1);
}