html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline; }

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block; }

body {
  line-height: 1; }

ol,
ul {
  list-style: none; }

blockquote,
q {
  quotes: none; }

blockquote:before,
blockquote:after,
q:before,
q:after {
  content: "";
  content: none; }

table {
  border-collapse: collapse;
  border-spacing: 0; }

body {
  -webkit-text-size-adjust: none; }

mark {
  background-color: transparent;
  color: inherit; }

input::-moz-focus-inner {
  border: 0;
  padding: 0; }

input[type="text"],
input[type="email"],
select,
textarea {
  -moz-appearance: none;
  -webkit-appearance: none;
  -ms-appearance: none;
  appearance: none; }

@font-face {
  font-family: 'Kanit';
  src: url("/assets/font/kanit.woff2") format("woff2");
  font-weight: normal;
  font-style: normal; }

@font-face {
  font-family: 'Permanent Marker';
  src: url("/assets/font/permanentmarker.woff2") format("woff2");
  font-weight: normal;
  font-style: normal; }

html {
  font-size: 13pt; }

body {
  font-family: "Kanit", Sans-Serif;
  letter-spacing: 0.02rem;
  line-height: 1.75rem; }

.light {
  background-color: white;
  color: #000000; }

.gloaming {
  background-color: #f1fff9; }

.gray {
  background-color: #f1f1f1; }

.dark {
  background-color: #000000;
  color: white; }

.black {
  background-color: black; }

section {
  padding-top: 3em;
  padding-bottom: 3em; }

.super-big {
  font-size: 5em; }

h1 {
  font-size: 1.875em;
  line-height: 1.25em;
  margin-top: 1.25em;
  margin-bottom: 1.25em;
  font-family: "Kanit", sans-serif;
  font-weight: normal;
  font-style: normal; }

h2 {
  font-size: 1.5em;
  font-family: "Kanit", sans-serif;
  font-weight: normal;
  font-style: normal;
  margin-bottom: 1.25em; }

h2 em {
  border-bottom: 3px solid #ffffff; }

h3 {
  font-size: 1.375em;
  margin-bottom: 1.25em;
  font-family: "Kanit", sans-serif;
  font-style: italic;
  font-weight: bold; }

h4 {
  font-size: 1.375em;
  margin-top: 1.25em;
  margin-bottom: 1.25em;
  font-family: "Kanit", sans-serif; }

section p {
  margin-top: 1.25em;
  margin-bottom: 1.25em; }

p em {
  font-style: italic;
  font-weight: bold; }

li em {
  font-weight: bold; }

img.avatar {
  width: 6em;
  height: 6em; }

p.review {
  font-style: italic; }

p a {
  color: #000000;
  text-decoration: underline; }

p a:hover {
  color: #444444;
  text-decoration: none; }

@media (min-width: 992px) {
  div.container img.img-fluid.pad {
    padding: 1.5em; } }

div.icon-container {
  min-height: 5.5em;
  display: flex; }

sup {
  font-size: 0.75em; }

.center-horizontal {
  margin-left: auto;
  margin-right: auto; }

div.vertical-center {
  display: flex;
  align-items: center; }

div.horizontal-center {
  display: flex;
  justify-content: center; }

div.thank-you-hero {
  height: 25rem; }

img.client-logo {
  padding: 0.2rem;
  max-width: 10rem; }

img.partner-logo {
  padding: 0.2rem;
  max-width: 26rem; }

.course-page-tagline h1 {
  margin-top: 0rem; }

img.mockup-brochure {
  max-height: 14rem; }

img.icon-mid {
  max-height: 6rem;
  margin-bottom: 1rem; }

p.bigger {
  font-size: 1.25rem; }

.certificate-details {
  background-color: #f1fff9;
  font-size: 0.75rem; }

.certificate-details li {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20x%3D%220px%22%20y%3D%220px%22%20viewBox%3D%220%200%2040%2040%22%3E%3Cpath%20d%3D%22M37.9%2C10.6l-3.2-3.2c-0.4-0.4-1-0.7-1.6-0.7c-0.6%2C0-1.2%2C0.2-1.6%2C0.7L15.9%2C23l-7-7c-0.4-0.4-1-0.7-1.6-0.7S6.1%2C15.6%2C5.6%2C16%20l-3.2%2C3.2c-0.4%2C0.4-0.7%2C1-0.7%2C1.6S2%2C22%2C2.4%2C22.5l8.6%2C8.6l3.2%2C3.2c0.4%2C0.4%2C1%2C0.7%2C1.6%2C0.7c0.6%2C0%2C1.2-0.2%2C1.6-0.7l3.2-3.2l17.2-17.2%20c0.4-0.4%2C0.7-1%2C0.7-1.6C38.6%2C11.6%2C38.4%2C11.1%2C37.9%2C10.6z%22%20fill%3D%22%2305E69B%22%20%2F%3E%3C%2Fsvg%3E");
  background-position-y: 0.3em;
  background-position-x: 0.75rem;
  background-repeat: no-repeat;
  background-size: 1rem;
  padding-left: 2.75rem; }

.hero {
  height: 10em;
  min-height: 500px; }

.hero-bg-img {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat; }

.hero-bg-img-mask {
  height: 100%; }

.hero {
  font-family: "Kanit", sans-serif; }

.hero h1 {
  color: white;
  font-size: 3rem;
  font-weight: normal;
  font-style: normal;
  line-height: 1em;
  margin-top: 1em;
  margin-bottom: 1em; }

.hero h2 {
  color: #e4e4e4;
  font-size: 1.5rem;
  margin-top: 1em;
  margin-bottom: 0px; }

.hero p.date {
  font-family: "Kanit", sans-serif;
  font-size: 1.25rem;
  color: #a0a0a0;
  margin-top: 0px;
  margin-bottom: 2rem; }

span.underline {
  border-bottom: 4px solid #ffffff; }

.hero p {
  margin-top: 1em;
  margin-bottom: 1em; }

.bg-mask {
  background: rgba(24, 41, 53, 0.5); }

.button {
  display: block;
  border-style: solid;
  border-color: #ffffff;
  color: #ffffff;
  border-width: 3px;
  font-family: "Kanit", sans-serif;
  text-decoration: none;
  width: fit-content;
  font-size: 1.3em;
  padding-top: 0.3em;
  padding-bottom: 0.3em;
  padding-left: 1.4em;
  padding-right: 1.4em;
  justify-content: center;
  align-items: center; }

.button.button-center {
  margin: auto; }

.button:after {
  float: right;
  margin-left: .75em;
  margin-top: 4px; }

.button.button-black {
  border-color: #000000;
  color: #000000; }

.button:hover {
  border-color: #ffffff;
  background-color: #ffffff;
  color: #000000; }

.button.button-black:hover {
  border-color: #000000;
  background-color: #000000;
  color: #ffffff; }

a:hover {
  text-decoration: none; }

footer {
  background-color: black;
  padding-top: 3em;
  padding-bottom: 3em; }

footer p {
  font-size: 0.8em; }
  @media (max-width: 768px) {
    footer p {
      display: flex;
      flex-direction: column;
      line-height: 1em; } }
footer a {
  color: #8d9199; }

footer a:hover {
  color: #d1d3d6;
  text-decoration: none; }

.social-icon {
  width: 50px; }
  .social-icon:hover {
    transform: scale(1.1); }