/* RESET */
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, font, 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{background: transparent; border: 0; margin: 0; padding: 0;} ol, ul{list-style: none;} img{max-width: 100%; height: auto; image-rendering: -webkit-optimize-contrast;}


/* FRAMEWORK */
*{box-sizing: border-box;}
html, body{font-family: 'Kanit', sans-serif; font-size: 16px; -webkit-text-size-adjust: none; margin: 0; padding: 0; height: 100%;} 
html {scroll-behavior: smooth;}
body {overflow-x: hidden; line-height: 1.6; letter-spacing: .02em;}
::-moz-selection{background: #ec1d23; color: #fff; text-shadow: none} ::selection{background: #ec1d23; color: #fff; text-shadow: none;}

button,
input,
optgroup,
select,
textarea {
  font-family: inherit; /* 1 */
  font-size: 100%; /* 1 */
  line-height: 1.15; /* 1 */
  /*margin: 0; /* 2 */
}
button,
input { /* 1 */
  overflow: visible;
}
button,
select { /* 1 */
  text-transform: none;
}
select,
button,
[type="button"],
[type="reset"],
[type="submit"],
[type="date"] {
  -webkit-appearance: button;
}

.content-width {margin: 0 auto; width: 80%; position: relative; z-index: 3;}
.flex-wrapper {display: flex; flex-wrap: wrap; align-items: center;}
.inv-width {margin: 0 auto; width: 97%; max-width: 1250px;}

.clear{clear: both;} 

a {text-decoration: none; color: inherit; transition: all .2s ease-in-out;} a:hover{color: inherit;}
a#cta-btn button {color: #fff!important; background: #ec1d23; padding: 8px; cursor: pointer; font-size: 15.5px; transition: 0.2s ease-in; text-align: center; border: none; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; border-radius: 4px;}
a#cta-btn button:hover {background: #b50a0f; color: #fff; transition: all .2s ease-in-out;}

/* HEADER */
.top-bar {width: 100%; display: flex; justify-content: center; padding: .75em 1em; color: #fff; background: #ec1d23; font-weight: 300; font-size: 17px; text-align: center; line-height: 1.2;}
.top-bar a:hover {text-decoration: underline;}
.header {width: 100%; margin: 0 auto; position: relative; z-index: 999; display: flex; align-items: center; flex-wrap: wrap; padding: .75em 2em; box-shadow: 0px 0px 4px 4px rgb(0 0 0 / 5%);}
a#main-logo {margin-bottom: -70px; padding-right: 1em;}
a#main-logo img {width: 100%; margin: 0; height: auto; display: block; max-width: 130px;}
.hdr-left {width: 75%; display: flex; align-items: center;}
.hdr-right {width: 25%; text-align: right;}
.desktop-contact {display: flex!important; align-items: center; justify-content: flex-end;}
.desktop-contact a, .mobile-contact a {font-weight: 600; letter-spacing: 1px; color: #ec1d23; margin-right: 1.25em; line-height: 1.1;}
.mobile-contact {display: none; width: 100%; align-items: center; justify-content: space-between; padding: .5em 0;} 
.hdr-right a#cta-btn {}
.mobile-display {display: none;}

/* LOGO SLIDER */
.logo-slider {width: 100%!important; display: flex!important; justify-content: center; padding: 1em 2em!important; align-items: center; background: #f9f9f9; margin-bottom: 0!important;}


/* FOOTER */
.footer {width: 100%; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; position: relative; z-index: 0; background: #d9d9d9; color: #000; padding: 2em; line-height: 1.5;}
.footer a {color: #000;}
.footer a:hover {color: #ec1d23; transition: .3s ease-in-out all;}
.footer p {font-weight: 500; font-size: 14px;}
.ftr-left {width: 15%; text-transform: uppercase; padding-right: 2em;}
.ftr-left img {width: 100%; max-width: 130px; height: auto; display: block; margin: 0 0 .5em;}
.ftr-middle {width: 55%;}
ul.ftr-nav {width: 100%; column-count: 3; column-gap: 10%; column-rule: 1px solid #ec1d23;}
ul.ftr-nav li {display: block;}
ul.ftr-nav li a {font-size: 14px; font-weight: 500;}
.ftr-socials {width: 100%; display: flex; align-items: center; margin-top: 1em;}
.ftr-socials a {margin-right: 10px; color: #ec1d23;} 
.ftr-socials a i {padding: 7px 6px 6px; border-radius: 50%; height: 36px; width: 36px; text-align: center; border: 1px solid #ec1d23; color: #ec1d23; font-size: 20px;} 
.ftr-socials a i:hover {background: #fff; transition: .3s ease-in-out all;}
.ftr-right {width: 30%; display: flex; flex-wrap: wrap; gap: 10px; align-items: center;}
.ftr-right img {width: 100%; max-width: 125px; height: auto; display: inline-block; padding: 3px;}

.site-host {width: 100%; padding: .75em 2em; background: #ec1d23; display: flex; justify-content: center;}
.site-host p {width: 80%; margin: 0 auto;  font-size: 15px; color: #fff; text-align: center; font-weight: 400;}
.site-host a {color: #fff;}
.site-host a:hover {color: #b50a0f; transition: .2s ease-in-out all;}


/* MEDIA QUERIES (RESPONSIVE) */
@media screen and (max-width: 1320px){	
}
@media screen and (max-width: 1160px){		
	.hdr-left {width: 35%; display: flex; align-items: center;}
	.hdr-right {width: 65%; text-align: right; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end;}
			
	a#cta-btn button {width: 100%; max-width: 350px;}
	
	.ftr-left {width: 25%;}
	.ftr-middle {width: 75%;}
	.ftr-right {width: 100%; margin-top: 1.5em;}
}

@media screen and (max-width: 705px) {
}

@media screen and (max-width: 640px) {
	.hdr-left {width: 65%!important;}
	.hdr-right {width: 35%!important;}
	
	.desktop-contact {display: none!important;}
	.mobile-contact {display: flex;}
	.mobile-contact a, a#cta-btn button {font-size: 15px;}
	.mobile-contact a {margin-right: 0;}
	
	.top-bar {font-size: 15px;}
	
	.ftr-left {width: 100%; display: flex; align-items: center; justify-content: space-between;}
	.ftr-middle {width: 100%; margin-top: 1em; padding-left: 0;}
	ul.ftr-nav {column-count: 2;}
	.ftr-socials {margin-top: 1.5em;}
	.ftr-socials a i {padding: 6px; height: 32px; width: 32px; font-size: 18px;} 
}

@media screen and (max-width: 480px) {
	.ftr-left {flex-wrap: wrap; justify-content: center; text-align: center; padding: 0; flex-direction: column;}
	.ftr-left img {margin: 0 auto 1em; display: block;}
	.ftr-right {text-align: center;}
	.ftr-socials {justify-content: center;}
	
	.top-bar {font-size: 13px;}
}
@media screen and (max-width: 350px) {
	ul.ftr-nav {column-count: 1;}
	ul.ftr-nav li {text-align: center;}
}