@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@300;500&display=swap");
* { margin: 0; padding: 0; }

*, *:before, *:after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }

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

body { background: #ffffff; color: #586a79; font-family: 'Montserrat', sans-serif; font-size: 16px; font-size: calc(14px + (16 - 14) * ((100vw - 320px) / (1920 - 320))); font-style: normal; font-weight: 400; line-height: 1.5; }

h1, h2, h3, h4, h5, h6 { display: block; font-family: inherit; font-weight: 400; font-style: normal; letter-spacing: 0; line-height: normal; margin: 0; padding: 0; }

h1 { color: #ffffff; font-size: 50px; font-size: calc(30px + (50 - 30) * ((100vw - 320px) / (1920 - 320))); font-weight: 500; line-height: 1.2; padding: 0 0 25px 0; }

h2 { color: #ffffff; font-size: 35px; font-size: calc(21px + (35 - 21) * ((100vw - 320px) / (1920 - 320))); font-weight: 500; line-height: 1.2; padding: 0 0 30px 0; }

h3 { color: #ffffff; font-size: 20px; font-size: calc(16px + (20 - 16) * ((100vw - 320px) / (1920 - 320))); font-weight: 500; line-height: 1.9; padding: 0; text-transform: uppercase; }

p, address { color: #ffffff; display: block; font-family: inherit; font-size: 20px; font-size: calc(16px + (20 - 16) * ((100vw - 320px) / (1920 - 320))); font-style: normal; font-weight: 300; letter-spacing: normal; line-height: 1.5; margin: 0; padding: 0 0 25px 0; }
p a, address a { color: inherit; font-weight: 500; text-decoration: none; }
p a:hover, address a:hover { text-decoration: none; opacity: 0.7; }

ul, ol { margin: 0 0 25px 20px; padding: 0; }
ul li, ol li { color: #ffffff; font-size: 20px; font-size: calc(16px + (20 - 16) * ((100vw - 320px) / (1920 - 320))); line-height: 1.9; font-weight: 300; }

strong, b { font-weight: 700; }

a, a[href^="tel"] { color: inherit; cursor: pointer; font-family: inherit; font-size: 100%; margin: 0; padding: 0; outline: 0; text-decoration: none; -webkit-transition: all .3s ease; -moz-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; }
a:hover, a[href^="tel"]:hover { text-decoration: underline; }

/* others
-----------------------------------------------*/
.rwdimg { display: block !important; position: relative; width: 100%; z-index: 1; }

.container { display: block; margin: 0; max-width: none; padding: 0 20px; position: relative; width: 100%; }
@media (min-width: 768px) { .container { margin: 0 auto; max-width: 1160px; width: auto; } }

#header { float: left; padding: 15px 0; position: relative; width: 100%; }
@media (min-width: 768px) { #header { padding: 30px 0; } }
#header .header__logo { background-image: url("../images/logos/acs-live-logo.png"); background-repeat: no-repeat; background-position: 0 0; background-size: 124px 40px; display: block; height: 40px; font-size: 0; line-height: 0; margin: 0 auto; overflow: hidden; text-indent: -9999em; width: 124px; }
@media (min-width: 768px) { #header .header__logo { background-size: 187px 60px; float: left; height: 60px; width: 187px; } }
#header .header__contact { display: none; margin: 0; padding: 4px 0 0 0; }
@media (min-width: 768px) { #header .header__contact { display: block; float: right; width: auto; } }
#header .header__contact li { clear: both; color: #112369; display: block; list-style: none; font-size: 18px; font-weight: 500; line-height: 1.5; overflow: hidden; text-align: right; }

.row { clear: both; display: block; margin: 0; }
@media (min-width: 768px) { .row { margin: 0; } }

.column { float: left; padding: 0; width: 100%; }
@media (min-width: 768px) { .column { padding: 0; width: 50%; } }
@media (min-width: 768px) { .column.column--rhs { float: right; } }
@media (min-width: 768px) { .column:last-child .main__section--content { padding-left: 100px; padding-right: 0; } }

.main { background: #ffffff; clear: both; display: block; margin: 0; overflow: hidden; position: relative; width: 100%; }

.main__section { clear: both; display: block; margin: 0; padding: 0; width: 100%; }
.main__section:first-child p { font-size: 25px; font-size: calc(19px + (25 - 19) * ((100vw - 320px) / (1920 - 320))); }
.main__section:last-child p:last-child { font-size: 12px; }
.main__section--content { background: #112369; float: left; height: auto; padding: 30px 20px 5px 20px; position: relative; width: 100%; z-index: 10; }
@media (min-width: 768px) { .main__section--content { background: none; height: 480px; padding: 80px 100px 0 0; } }
.main__section--content:before { background: #112369; content: ''; display: none; height: 100%; left: 0; max-width: 720px; overflow: hidden; position: absolute; right: auto; top: 0; width: 720px; z-index: -2; }
@media (min-width: 768px) { .main__section--content:before { display: block; } }
.main__section--img { float: left; position: relative; width: 100%; }
@media (min-width: 768px) { .main__section--img { height: 480px; } }
.main__section--img img { float: left; height: auto; position: relative; width: 100%; }
@media (min-width: 768px) { .main__section--img img { left: auto; height: 480px; position: absolute; right: 0; top: 0; width: auto; } }
@media (max-width: 767px) { .main__section .reverse { display: -webkit-flex; display: flex; -webkit-flex-direction: column; flex-direction: column; } }
.main__section .reverse .column:first-child { order: 2; }
.main__section .reverse .column:last-child { order: 1; }
@media (min-width: 768px) { .main__section .reverse .main__section--content:before { left: auto; padding-right: 100px; right: 0; } }
.main__section .reverse .main__section--img { order: 1; }
@media (min-width: 768px) { .main__section .reverse .main__section--img img { left: 0; right: auto; } }
.main__section.gray, .main__section.white { overflow: hidden; }
.main__section.gray .container, .main__section.white .container { background: none; position: relative; z-index: 10; }
@media (min-width: 768px) { .main__section.gray .container, .main__section.white .container { background: #f5f6f8; } }
.main__section.gray .container:before, .main__section.gray .container:after, .main__section.white .container:before, .main__section.white .container:after { background: #f5f6f8; content: ''; display: none; height: 600px; position: absolute; overflow: hidden; top: 0; z-index: -2; width: 720px; }
@media (min-width: 768px) { .main__section.gray .container:before, .main__section.gray .container:after, .main__section.white .container:before, .main__section.white .container:after { display: block; } }
.main__section.gray .container:before, .main__section.white .container:before { left: 50%; margin-left: -720px; }
.main__section.gray .container:after, .main__section.white .container:after { left: 50%; margin-left: 0; }
.main__section.gray .row, .main__section.white .row { background: #f5f6f8; overflow: hidden; }
@media (min-width: 768px) { .main__section.gray .row, .main__section.white .row { background: none; } }
.main__section.gray h1, .main__section.gray h2, .main__section.gray h3, .main__section.gray li, .main__section.gray p, .main__section.white h1, .main__section.white h2, .main__section.white h3, .main__section.white li, .main__section.white p { color: #112369; }
.main__section.gray h2, .main__section.white h2 { background: #f5f6f8; padding: 40px 20px 20px 20px; }
@media (min-width: 768px) { .main__section.gray h2, .main__section.white h2 { background: none; padding: 80px 0 30px 0; } }
.main__section.gray .main__section--content, .main__section.white .main__section--content { background: none; height: auto; padding-top: 0; padding-bottom: 0; }
@media (min-width: 768px) { .main__section.gray .main__section--content, .main__section.white .main__section--content { padding-top: 0; padding-bottom: 100px; } }
.main__section.gray .main__section--content:before, .main__section.white .main__section--content:before { display: none; }
.main__section.white .main__section--content { padding-bottom: 15px; }
.main__section.white .main__section--img { height: auto; padding: 20px 0; }
@media (min-width: 768px) { .main__section.white .main__section--img { padding: 20px 0 20px 100px; } }
.main__section.white .main__section--img img { display: block !important; float: left; left: auto; height: auto; right: auto; position: relative; width: 100%; }
.main__section.white h2 { padding: 40px 0 20px 0; }
@media (min-width: 768px) { .main__section.white h2 { padding: 80px 0 30px 0; } }
.main__section.light--blue .main__section--content { background: #0faae3; }
.main__section.light--blue .main__section--content:before { background: #0faae3; }

#footer { clear: both; display: block; overflow: hidden; padding: 30px 0; width: 100%; z-index: 0; }
#footer h6 { color: #2b333a; font-size: 15px; font-weight: 300; line-height: 40px; padding-top: 20px; text-align: center; }
@media (min-width: 768px) { #footer h6 { float: right; padding-top: 0; text-align: right; } }
#footer .footer__logo { background-image: url("../images/logos/acs-live-logo.png"); background-repeat: no-repeat; background-position: 0 0; background-size: 124px 40px; display: block; height: 40px; font-size: 0; line-height: 0; margin: 0 auto; overflow: hidden; text-indent: -9999em; width: 124px; }
@media (min-width: 768px) { #footer .footer__logo { float: left; } }