/* 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, header, footer, section { margin: 0; padding: 0; border: 0; outline: 0; vertical-align: baseline; background: transparent; }

@font-face { font-family: 'Euclid Circular B Light'; src: url('../fonts/Euclid Circular B Light.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'Euclid Circular B Regular'; src: url('../fonts/Euclid Circular B Regular.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'Euclid Circular B Medium'; src: url('../fonts/Euclid Circular B Medium.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'Euclid Circular B Medium Italic'; src: url('../fonts/Euclid Circular B Medium Italic.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'Euclid Circular B SemiBold'; src: url('../fonts/Euclid Circular B SemiBold.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'Euclid Circular B SemiBold Italic'; src: url('../fonts/Euclid Circular B SemiBold Italic.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'Euclid Circular B Bold'; src: url('../fonts/Euclid Circular B Bold.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'Euclid Circular B Bold Italic'; src: url('../fonts/Euclid Circular B Bold Italic.ttf') format('truetype'); font-display: swap; }

* { box-sizing: border-box; }
body { font-size: 100%; font-family: 'Euclid Circular B Regular'; color: #000000; line-height: 1.5; margin: 0; padding: 0; background: #ffffff; }

p { margin-bottom: 20px; }

.pagewrap { font-size: 1.25em; }
.wrapcontent { max-width: 1200px; width: 95%; margin: 0 auto; }

.header { padding-top: 5px; padding-bottom: 52px; position: relative; background: url(../images/mbs_header_bg.webp) bottom center no-repeat; background-size: cover; }
.wrapheader { display: flex; flex-direction: row; align-items: center; gap: 5%; max-width: 1323px; width: 95%; padding-top: 5px; padding-bottom: 1px; margin: 0 auto;  }
.logo { flex-basis: 129px; }
.mbslogo { max-width: 129px; width: 100%; }

.menu { flex-basis: 820px; }
.nav { display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 20px 5%; flex-wrap: wrap; font-size: 0.9em; list-style: none; }
.nav li { color: #ffffff; text-transform: uppercase; text-shadow: 0px 4px 0px rgba(0, 0, 0, 0.16); }
.nav li a { color: inherit; text-decoration: none; }
.nav li a:active, .nav li a.active { color: #c66af4; }
.menu_icon { display: none; font-size: 2.5em; color: #ffffff; position: absolute; top: 0; right: 10px; cursor: pointer; }
.mbs_hddown { display: block; max-width: 49px; width: 5%; position: absolute; bottom: 10px; left: 0; right: 0; margin: 0 auto; }

.footer { color: #ffffff; text-align: center; padding: 20px 3% 10px; background: #0c4189; transition-property: all; transition-duration: 1s; transition-timing-function: ease-in-out; font-family: 'Raleway', sans-serif; }
.footer_info { max-width: 1140px; width: 100%; font-size: 0.65em; margin: 0 auto; }
.footer_info > div { display: inline-block; vertical-align: middle; margin: 0 2% 10px; }
.footer_info a, .links { color: #7ed5f7; text-decoration: none; font-weight: 500; }

.mbtm40 { margin-bottom: 40px; }

.pink_purple { color: #c66af4; }

.center { text-align: center; }
.elecenter { margin-left: auto; margin-right: auto; }
.clearsides { clear: both; }

@media screen and (max-width: 900px) {
    .header { padding-bottom: 80px; }
    .wrapheader { display: block; }
    .logo { max-width: 129px; width: 21%; margin: 0 auto 20px; }
    .nav { gap: 20px 3%; }
}
@media screen and (max-width: 700px) {
    body { font-size: 90%; }

    .header { padding-bottom: 30px; }
    .menu_icon { display: block; margin-bottom: 20px; }
    .nav { display: none; flex-direction: column; align-items: flex-start; gap: 10px; }
    .nav li { display: block; width: 100%; padding: 0; margin: 0; }
    .nav li a { display: block; width: 100%; padding: 10px 3%; margin: 0; }
}

@media screen and (max-width: 500px) {
    body { font-size: 80%; }
}