.inline-block {
    display: inline-block !important
}

.align-right {
    text-align: right
}

.justify-left {
    justify-content: left
}

.justify-right {
    justify-content: right
}

.hidden {
    display: none !important
}

.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
    white-space: nowrap
}

    .visuallyhidden.focusable:active,
    .visuallyhidden.focusable:focus {
        clip: auto;
        height: auto;
        margin: 0;
        overflow: visible;
        position: static;
        width: auto;
        white-space: inherit
    }

.invisible {
    visibility: hidden
}

.clearfix {
    overflow: auto;
}

.clearfix:before,
.clearfix:after {
    content: " ";
    display: table
}

.clearfix:after {
    clear: both
}

@media print {
    *,
    *:before,
    *:after {
        background: transparent !important;
        color: #000 !important;
        -webkit-box-shadow: none !important;
        box-shadow: none !important;
        text-shadow: none !important
    }

    a,
    a:visited {
        text-decoration: underline
    }
/*    a:focus{
        color:inherit;
    }*/

        a[href]:after {
            content: " (" attr(href) ")"
        }

    abbr[title]:after {
        content: " (" attr(title) ")"
    }

    a[href^="#"]:after,
    a[href^="javascript:"]:after {
        content: ""
    }

    pre {
        white-space: pre-wrap !important
    }

    pre,
    blockquote {
        border: 1px solid #999;
        page-break-inside: avoid
    }

    thead {
        display: table-header-group
    }

    tr,
    img {
        page-break-inside: avoid
    }

    p,
    h2,
    h3 {
        orphans: 3;
        widows: 3
    }

    h2,
    h3 {
        page-break-after: avoid
    }
}

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,
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;
    font-family: "Helvetica", "Arial", sans-serif
}

blockquote,
q {
    quotes: none
}

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

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


/*! normalize.css v8.0.0 | MIT License | github.com/necolas/normalize.css */

html {
    line-height: 1.15;
    -webkit-text-size-adjust: 100%
}

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

pre {
    font-family: monospace, monospace;
    font-size: 1em
}

a {
    background-color: transparent
}

abbr[title] {
    border-bottom: none;
    text-decoration: underline;
    text-decoration: underline dotted
}

b,
strong {
    font-weight: bolder
}

code,
kbd,
samp {
    font-family: monospace, monospace;
    font-size: 1em
}

sub,
sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline
}

sub {
    bottom: -0.25em
}

sup {
    top: -0.5em
}

img {
    border-style: none
}

button,
input,
optgroup,
select,
textarea {
    font-family: inherit;
    font-size: 100%;
    line-height: 1.15;
    margin: 0
}

button,
input {
    overflow: visible
}

button,
select {
    text-transform: none
}

button,
[type=button],
[type=reset],
[type=submit] {
    -webkit-appearance: button
}

    button::-moz-focus-inner,
    [type=button]::-moz-focus-inner,
    [type=reset]::-moz-focus-inner,
    [type=submit]::-moz-focus-inner {
        border-style: none;
        padding: 0
    }

    button:-moz-focusring,
    [type=button]:-moz-focusring,
    [type=reset]:-moz-focusring,
    [type=submit]:-moz-focusring {
        outline: 1px dotted ButtonText
    }

fieldset {
    padding: .35em .75em .625em
}

legend {
    box-sizing: border-box;
    color: inherit;
    display: table;
    max-width: 100%;
    padding: 0;
    white-space: normal
}

progress {
    vertical-align: baseline
}

textarea {
    overflow: auto
}

[type=checkbox],
[type=radio] {
    box-sizing: border-box;
    padding: 0
}

[type=number]::-webkit-inner-spin-button,
[type=number]::-webkit-outer-spin-button {
    height: auto
}

[type=search] {
    -webkit-appearance: textfield;
    outline-offset: -2px
}

    [type=search]::-webkit-search-decoration {
        -webkit-appearance: none
    }

::-webkit-file-upload-button {
    -webkit-appearance: button;
    font: inherit
}

details {
    display: block
}

summary {
    display: list-item
}

template {
    display: none
}

[hidden] {
    display: none
}


/*! HTML5 Boilerplate v6.1.0 | MIT License | https://html5boilerplate.com/ */

html {
    color: #222;
    font-size: 1em;
    line-height: 1.4
}

::-moz-selection {
    background: #daebfe;
    text-shadow: none
}

::selection {
    background: #daebfe;
    text-shadow: none
}

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #e5e5e5;
    margin: 1em 0;
    padding: 0
}

audio,
canvas,
iframe,
img,
svg,
video {
    vertical-align: middle
}

fieldset {
    border: 0;
    margin: 0;
    padding: 0
}

textarea {
    resize: vertical
}

.m-0 {
    margin: 0 !important
}

.mt-0,
.my-0 {
    margin-top: 0 !important
}

.mr-0,
.mx-0 {
    margin-right: 0 !important
}

.mb-0,
.my-0 {
    margin-bottom: 0 !important
}

.ml-0,
.mx-0 {
    margin-left: 0 !important
}

.m-2 {
    margin: .125rem !important
}

.mt-2,
.my-2 {
    margin-top: .125rem !important
}

.mr-2,
.mx-2 {
    margin-right: .125rem !important
}

.mb-2,
.my-2 {
    margin-bottom: .125rem !important
}

.ml-2,
.mx-2 {
    margin-left: .125rem !important
}

.m-4 {
    margin: .25rem !important
}

.mt-4,
.my-4 {
    margin-top: .25rem !important
}

.mr-4,
.mx-4 {
    margin-right: .25rem !important
}

.mb-4,
.my-4 {
    margin-bottom: .25rem !important
}

.ml-4,
.mx-4 {
    margin-left: .25rem !important
}

.m-8 {
    margin: .5rem !important
}

.mt-8,
.my-8 {
    margin-top: .5rem !important
}

.mr-8,
.mx-8 {
    margin-right: .5rem !important
}

.mb-8,
.my-8 {
    margin-bottom: .5rem !important
}

.ml-8,
.mx-8 {
    margin-left: .5rem !important
}

.m-12 {
    margin: .75rem !important
}

.mt-12,
.my-12 {
    margin-top: .75rem !important
}

.mr-12,
.mx-12 {
    margin-right: .75rem !important
}

.mb-12,
.my-12 {
    margin-bottom: .75rem !important
}

.ml-12,
.mx-12 {
    margin-left: .75rem !important
}

.m-16 {
    margin: 1rem !important
}

.mt-16,
.my-16 {
    margin-top: 1rem !important
}

.mr-16,
.mx-16 {
    margin-right: 1rem !important
}

.mb-16,
.my-16 {
    margin-bottom: 1rem !important
}

.ml-16,
.mx-16 {
    margin-left: 1rem !important
}

.m-24 {
    margin: 1.5rem !important
}

.mt-24,
.my-24 {
    margin-top: 1.5rem !important
}

.mr-24,
.mx-24 {
    margin-right: 1.5rem !important
}

.mb-24,
.my-24 {
    margin-bottom: 1.5rem !important
}

.ml-24,
.mx-24 {
    margin-left: 1.5rem !important
}

.m-32 {
    margin: 2rem !important
}

.mt-32,
.my-32 {
    margin-top: 2rem !important
}

.mr-32,
.mx-32 {
    margin-right: 2rem !important
}

.mb-32,
.my-32 {
    margin-bottom: 2rem !important
}

.ml-32,
.mx-32 {
    margin-left: 2rem !important
}

.m-64 {
    margin: 4rem !important
}

.mt-64,
.my-64 {
    margin-top: 4rem !important
}

.mr-64,
.mx-64 {
    margin-right: 4rem !important
}

.mb-64,
.my-64 {
    margin-bottom: 4rem !important
}

.ml-64,
.mx-64 {
    margin-left: 4rem !important
}

.m-80 {
    margin: 4.75rem !important
}

.mt-80,
.my-80 {
    margin-top: 4.75rem !important
}

.mr-80,
.mx-80 {
    margin-right: 4.75rem !important
}

.mb-80,
.my-80 {
    margin-bottom: 4.75rem !important
}

.ml-80,
.mx-80 {
    margin-left: 4.75rem !important
}

.p-0 {
    padding: 0 !important
}

.pt-0,
.py-0 {
    padding-top: 0 !important
}

.pr-0,
.px-0 {
    padding-right: 0 !important
}

.pb-0,
.py-0 {
    padding-bottom: 0 !important
}

.pl-0,
.px-0 {
    padding-left: 0 !important
}

.p-2 {
    padding: .125rem !important
}

.pt-2,
.py-2 {
    padding-top: .125rem !important
}

.pr-2,
.px-2 {
    padding-right: .125rem !important
}

.pb-2,
.py-2 {
    padding-bottom: .125rem !important
}

.pl-2,
.px-2 {
    padding-left: .125rem !important
}

.p-4 {
    padding: .25rem !important
}

.pt-4,
.py-4 {
    padding-top: .25rem !important
}

.pr-4,
.px-4 {
    padding-right: .25rem !important
}

.pb-4,
.py-4 {
    padding-bottom: .25rem !important
}

.pl-4,
.px-4 {
    padding-left: .25rem !important
}

.p-8 {
    padding: .5rem !important
}

.pt-8,
.py-8 {
    padding-top: .5rem !important
}

.pr-8,
.px-8 {
    padding-right: .5rem !important
}

.pb-8,
.py-8 {
    padding-bottom: .5rem !important
}

.pl-8,
.px-8 {
    padding-left: .5rem !important
}

.p-12 {
    padding: .75rem !important
}

.pt-12,
.py-12 {
    padding-top: .75rem !important
}

.pr-12,
.px-12 {
    padding-right: .75rem !important
}

.pb-12,
.py-12 {
    padding-bottom: .75rem !important
}

.pl-12,
.px-12 {
    padding-left: .75rem !important
}

.p-16 {
    padding: 1rem !important
}

.pt-16,
.py-16 {
    padding-top: 1rem !important
}

.pr-16,
.px-16 {
    padding-right: 1rem !important
}

.pb-16,
.py-16 {
    padding-bottom: 1rem !important
}

.pl-16,
.px-16 {
    padding-left: 1rem !important
}

.p-24 {
    padding: 1.5rem !important
}

.pt-24,
.py-24 {
    padding-top: 1.5rem !important
}

.pr-24,
.px-24 {
    padding-right: 1.5rem !important
}

.pb-24,
.py-24 {
    padding-bottom: 1.5rem !important
}

.pl-24,
.px-24 {
    padding-left: 1.5rem !important
}

.p-32 {
    padding: 2rem !important
}

.pt-32,
.py-32 {
    padding-top: 2rem !important
}

.pr-32,
.px-32 {
    padding-right: 2rem !important
}

.pb-32,
.py-32 {
    padding-bottom: 2rem !important
}

.pl-32,
.px-32 {
    padding-left: 2rem !important
}

.p-64 {
    padding: 4rem !important
}

.pt-64,
.py-64 {
    padding-top: 4rem !important
}

.pr-64,
.px-64 {
    padding-right: 4rem !important
}

.pb-64,
.py-64 {
    padding-bottom: 4rem !important
}

.pl-64,
.px-64 {
    padding-left: 4rem !important
}

.p-80 {
    padding: 4.75rem !important
}

.pt-80,
.py-80 {
    padding-top: 4.75rem !important
}

.pr-80,
.px-80 {
    padding-right: 4.75rem !important
}

.pb-80,
.py-80 {
    padding-bottom: 4.75rem !important
}

.pl-80,
.px-80 {
    padding-left: 4.75rem !important
}

@media(min-width: 0px) {
    .m-na-0 {
        margin: 0 !important
    }

    .mt-na-0,
    .my-na-0 {
        margin-top: 0 !important
    }

    .mr-na-0,
    .mx-na-0 {
        margin-right: 0 !important
    }

    .mb-na-0,
    .my-na-0 {
        margin-bottom: 0 !important
    }

    .ml-na-0,
    .mx-na-0 {
        margin-left: 0 !important
    }

    .m-na-2 {
        margin: .125rem !important
    }

    .mt-na-2,
    .my-na-2 {
        margin-top: .125rem !important
    }

    .mr-na-2,
    .mx-na-2 {
        margin-right: .125rem !important
    }

    .mb-na-2,
    .my-na-2 {
        margin-bottom: .125rem !important
    }

    .ml-na-2,
    .mx-na-2 {
        margin-left: .125rem !important
    }

    .m-na-4 {
        margin: .25rem !important
    }

    .mt-na-4,
    .my-na-4 {
        margin-top: .25rem !important
    }

    .mr-na-4,
    .mx-na-4 {
        margin-right: .25rem !important
    }

    .mb-na-4,
    .my-na-4 {
        margin-bottom: .25rem !important
    }

    .ml-na-4,
    .mx-na-4 {
        margin-left: .25rem !important
    }

    .m-na-8 {
        margin: .5rem !important
    }

    .mt-na-8,
    .my-na-8 {
        margin-top: .5rem !important
    }

    .mr-na-8,
    .mx-na-8 {
        margin-right: .5rem !important
    }

    .mb-na-8,
    .my-na-8 {
        margin-bottom: .5rem !important
    }

    .ml-na-8,
    .mx-na-8 {
        margin-left: .5rem !important
    }

    .m-na-12 {
        margin: .75rem !important
    }

    .mt-na-12,
    .my-na-12 {
        margin-top: .75rem !important
    }

    .mr-na-12,
    .mx-na-12 {
        margin-right: .75rem !important
    }

    .mb-na-12,
    .my-na-12 {
        margin-bottom: .75rem !important
    }

    .ml-na-12,
    .mx-na-12 {
        margin-left: .75rem !important
    }

    .m-na-16 {
        margin: 1rem !important
    }

    .mt-na-16,
    .my-na-16 {
        margin-top: 1rem !important
    }

    .mr-na-16,
    .mx-na-16 {
        margin-right: 1rem !important
    }

    .mb-na-16,
    .my-na-16 {
        margin-bottom: 1rem !important
    }

    .ml-na-16,
    .mx-na-16 {
        margin-left: 1rem !important
    }

    .m-na-24 {
        margin: 1.5rem !important
    }

    .mt-na-24,
    .my-na-24 {
        margin-top: 1.5rem !important
    }

    .mr-na-24,
    .mx-na-24 {
        margin-right: 1.5rem !important
    }

    .mb-na-24,
    .my-na-24 {
        margin-bottom: 1.5rem !important
    }

    .ml-na-24,
    .mx-na-24 {
        margin-left: 1.5rem !important
    }

    .m-na-32 {
        margin: 2rem !important
    }

    .mt-na-32,
    .my-na-32 {
        margin-top: 2rem !important
    }

    .mr-na-32,
    .mx-na-32 {
        margin-right: 2rem !important
    }

    .mb-na-32,
    .my-na-32 {
        margin-bottom: 2rem !important
    }

    .ml-na-32,
    .mx-na-32 {
        margin-left: 2rem !important
    }

    .m-na-64 {
        margin: 4rem !important
    }

    .mt-na-64,
    .my-na-64 {
        margin-top: 4rem !important
    }

    .mr-na-64,
    .mx-na-64 {
        margin-right: 4rem !important
    }

    .mb-na-64,
    .my-na-64 {
        margin-bottom: 4rem !important
    }

    .ml-na-64,
    .mx-na-64 {
        margin-left: 4rem !important
    }

    .m-na-80 {
        margin: 4.75rem !important
    }

    .mt-na-80,
    .my-na-80 {
        margin-top: 4.75rem !important
    }

    .mr-na-80,
    .mx-na-80 {
        margin-right: 4.75rem !important
    }

    .mb-na-80,
    .my-na-80 {
        margin-bottom: 4.75rem !important
    }

    .ml-na-80,
    .mx-na-80 {
        margin-left: 4.75rem !important
    }

    .p-na-0 {
        padding: 0 !important
    }

    .pt-na-0,
    .py-na-0 {
        padding-top: 0 !important
    }

    .pr-na-0,
    .px-na-0 {
        padding-right: 0 !important
    }

    .pb-na-0,
    .py-na-0 {
        padding-bottom: 0 !important
    }

    .pl-na-0,
    .px-na-0 {
        padding-left: 0 !important
    }

    .p-na-2 {
        padding: .125rem !important
    }

    .pt-na-2,
    .py-na-2 {
        padding-top: .125rem !important
    }

    .pr-na-2,
    .px-na-2 {
        padding-right: .125rem !important
    }

    .pb-na-2,
    .py-na-2 {
        padding-bottom: .125rem !important
    }

    .pl-na-2,
    .px-na-2 {
        padding-left: .125rem !important
    }

    .p-na-4 {
        padding: .25rem !important
    }

    .pt-na-4,
    .py-na-4 {
        padding-top: .25rem !important
    }

    .pr-na-4,
    .px-na-4 {
        padding-right: .25rem !important
    }

    .pb-na-4,
    .py-na-4 {
        padding-bottom: .25rem !important
    }

    .pl-na-4,
    .px-na-4 {
        padding-left: .25rem !important
    }

    .p-na-8 {
        padding: .5rem !important
    }

    .pt-na-8,
    .py-na-8 {
        padding-top: .5rem !important
    }

    .pr-na-8,
    .px-na-8 {
        padding-right: .5rem !important
    }

    .pb-na-8,
    .py-na-8 {
        padding-bottom: .5rem !important
    }

    .pl-na-8,
    .px-na-8 {
        padding-left: .5rem !important
    }

    .p-na-12 {
        padding: .75rem !important
    }

    .pt-na-12,
    .py-na-12 {
        padding-top: .75rem !important
    }

    .pr-na-12,
    .px-na-12 {
        padding-right: .75rem !important
    }

    .pb-na-12,
    .py-na-12 {
        padding-bottom: .75rem !important
    }

    .pl-na-12,
    .px-na-12 {
        padding-left: .75rem !important
    }

    .p-na-16 {
        padding: 1rem !important
    }

    .pt-na-16,
    .py-na-16 {
        padding-top: 1rem !important
    }

    .pr-na-16,
    .px-na-16 {
        padding-right: 1rem !important
    }

    .pb-na-16,
    .py-na-16 {
        padding-bottom: 1rem !important
    }

    .pl-na-16,
    .px-na-16 {
        padding-left: 1rem !important
    }

    .p-na-24 {
        padding: 1.5rem !important
    }

    .pt-na-24,
    .py-na-24 {
        padding-top: 1.5rem !important
    }

    .pr-na-24,
    .px-na-24 {
        padding-right: 1.5rem !important
    }

    .pb-na-24,
    .py-na-24 {
        padding-bottom: 1.5rem !important
    }

    .pl-na-24,
    .px-na-24 {
        padding-left: 1.5rem !important
    }

    .p-na-32 {
        padding: 2rem !important
    }

    .pt-na-32,
    .py-na-32 {
        padding-top: 2rem !important
    }

    .pr-na-32,
    .px-na-32 {
        padding-right: 2rem !important
    }

    .pb-na-32,
    .py-na-32 {
        padding-bottom: 2rem !important
    }

    .pl-na-32,
    .px-na-32 {
        padding-left: 2rem !important
    }

    .p-na-64 {
        padding: 4rem !important
    }

    .pt-na-64,
    .py-na-64 {
        padding-top: 4rem !important
    }

    .pr-na-64,
    .px-na-64 {
        padding-right: 4rem !important
    }

    .pb-na-64,
    .py-na-64 {
        padding-bottom: 4rem !important
    }

    .pl-na-64,
    .px-na-64 {
        padding-left: 4rem !important
    }

    .p-na-80 {
        padding: 4.75rem !important
    }

    .pt-na-80,
    .py-na-80 {
        padding-top: 4.75rem !important
    }

    .pr-na-80,
    .px-na-80 {
        padding-right: 4.75rem !important
    }

    .pb-na-80,
    .py-na-80 {
        padding-bottom: 4.75rem !important
    }

    .pl-na-80,
    .px-na-80 {
        padding-left: 4.75rem !important
    }

    .m-na-n2 {
        margin: -0.125rem !important
    }

    .mt-na-n2,
    .my-na-n2 {
        margin-top: -0.125rem !important
    }

    .mr-na-n2,
    .mx-na-n2 {
        margin-right: -0.125rem !important
    }

    .mb-na-n2,
    .my-na-n2 {
        margin-bottom: -0.125rem !important
    }

    .ml-na-n2,
    .mx-na-n2 {
        margin-left: -0.125rem !important
    }

    .m-na-n4 {
        margin: -0.25rem !important
    }

    .mt-na-n4,
    .my-na-n4 {
        margin-top: -0.25rem !important
    }

    .mr-na-n4,
    .mx-na-n4 {
        margin-right: -0.25rem !important
    }

    .mb-na-n4,
    .my-na-n4 {
        margin-bottom: -0.25rem !important
    }

    .ml-na-n4,
    .mx-na-n4 {
        margin-left: -0.25rem !important
    }

    .m-na-n8 {
        margin: -0.5rem !important
    }

    .mt-na-n8,
    .my-na-n8 {
        margin-top: -0.5rem !important
    }

    .mr-na-n8,
    .mx-na-n8 {
        margin-right: -0.5rem !important
    }

    .mb-na-n8,
    .my-na-n8 {
        margin-bottom: -0.5rem !important
    }

    .ml-na-n8,
    .mx-na-n8 {
        margin-left: -0.5rem !important
    }

    .m-na-n12 {
        margin: -0.75rem !important
    }

    .mt-na-n12,
    .my-na-n12 {
        margin-top: -0.75rem !important
    }

    .mr-na-n12,
    .mx-na-n12 {
        margin-right: -0.75rem !important
    }

    .mb-na-n12,
    .my-na-n12 {
        margin-bottom: -0.75rem !important
    }

    .ml-na-n12,
    .mx-na-n12 {
        margin-left: -0.75rem !important
    }

    .m-na-n16 {
        margin: -1rem !important
    }

    .mt-na-n16,
    .my-na-n16 {
        margin-top: -1rem !important
    }

    .mr-na-n16,
    .mx-na-n16 {
        margin-right: -1rem !important
    }

    .mb-na-n16,
    .my-na-n16 {
        margin-bottom: -1rem !important
    }

    .ml-na-n16,
    .mx-na-n16 {
        margin-left: -1rem !important
    }

    .m-na-n24 {
        margin: -1.5rem !important
    }

    .mt-na-n24,
    .my-na-n24 {
        margin-top: -1.5rem !important
    }

    .mr-na-n24,
    .mx-na-n24 {
        margin-right: -1.5rem !important
    }

    .mb-na-n24,
    .my-na-n24 {
        margin-bottom: -1.5rem !important
    }

    .ml-na-n24,
    .mx-na-n24 {
        margin-left: -1.5rem !important
    }

    .m-na-n32 {
        margin: -2rem !important
    }

    .mt-na-n32,
    .my-na-n32 {
        margin-top: -2rem !important
    }

    .mr-na-n32,
    .mx-na-n32 {
        margin-right: -2rem !important
    }

    .mb-na-n32,
    .my-na-n32 {
        margin-bottom: -2rem !important
    }

    .ml-na-n32,
    .mx-na-n32 {
        margin-left: -2rem !important
    }

    .m-na-n64 {
        margin: -4rem !important
    }

    .mt-na-n64,
    .my-na-n64 {
        margin-top: -4rem !important
    }

    .mr-na-n64,
    .mx-na-n64 {
        margin-right: -4rem !important
    }

    .mb-na-n64,
    .my-na-n64 {
        margin-bottom: -4rem !important
    }

    .ml-na-n64,
    .mx-na-n64 {
        margin-left: -4rem !important
    }

    .m-na-n80 {
        margin: -4.75rem !important
    }

    .mt-na-n80,
    .my-na-n80 {
        margin-top: -4.75rem !important
    }

    .mr-na-n80,
    .mx-na-n80 {
        margin-right: -4.75rem !important
    }

    .mb-na-n80,
    .my-na-n80 {
        margin-bottom: -4.75rem !important
    }

    .ml-na-n80,
    .mx-na-n80 {
        margin-left: -4.75rem !important
    }

    .m-na-auto {
        margin: auto !important
    }

    .mt-na-auto,
    .my-na-auto {
        margin-top: auto !important
    }

    .mr-na-auto,
    .mx-na-auto {
        margin-right: auto !important
    }

    .mb-na-auto,
    .my-na-auto {
        margin-bottom: auto !important
    }

    .ml-na-auto,
    .mx-na-auto {
        margin-left: auto !important
    }
}

@media(min-width: 480px) {
    .m-xs-0 {
        margin: 0 !important
    }

    .mt-xs-0,
    .my-xs-0 {
        margin-top: 0 !important
    }

    .mr-xs-0,
    .mx-xs-0 {
        margin-right: 0 !important
    }

    .mb-xs-0,
    .my-xs-0 {
        margin-bottom: 0 !important
    }

    .ml-xs-0,
    .mx-xs-0 {
        margin-left: 0 !important
    }

    .m-xs-2 {
        margin: .125rem !important
    }

    .mt-xs-2,
    .my-xs-2 {
        margin-top: .125rem !important
    }

    .mr-xs-2,
    .mx-xs-2 {
        margin-right: .125rem !important
    }

    .mb-xs-2,
    .my-xs-2 {
        margin-bottom: .125rem !important
    }

    .ml-xs-2,
    .mx-xs-2 {
        margin-left: .125rem !important
    }

    .m-xs-4 {
        margin: .25rem !important
    }

    .mt-xs-4,
    .my-xs-4 {
        margin-top: .25rem !important
    }

    .mr-xs-4,
    .mx-xs-4 {
        margin-right: .25rem !important
    }

    .mb-xs-4,
    .my-xs-4 {
        margin-bottom: .25rem !important
    }

    .ml-xs-4,
    .mx-xs-4 {
        margin-left: .25rem !important
    }

    .m-xs-8 {
        margin: .5rem !important
    }

    .mt-xs-8,
    .my-xs-8 {
        margin-top: .5rem !important
    }

    .mr-xs-8,
    .mx-xs-8 {
        margin-right: .5rem !important
    }

    .mb-xs-8,
    .my-xs-8 {
        margin-bottom: .5rem !important
    }

    .ml-xs-8,
    .mx-xs-8 {
        margin-left: .5rem !important
    }

    .m-xs-12 {
        margin: .75rem !important
    }

    .mt-xs-12,
    .my-xs-12 {
        margin-top: .75rem !important
    }

    .mr-xs-12,
    .mx-xs-12 {
        margin-right: .75rem !important
    }

    .mb-xs-12,
    .my-xs-12 {
        margin-bottom: .75rem !important
    }

    .ml-xs-12,
    .mx-xs-12 {
        margin-left: .75rem !important
    }

    .m-xs-16 {
        margin: 1rem !important
    }

    .mt-xs-16,
    .my-xs-16 {
        margin-top: 1rem !important
    }

    .mr-xs-16,
    .mx-xs-16 {
        margin-right: 1rem !important
    }

    .mb-xs-16,
    .my-xs-16 {
        margin-bottom: 1rem !important
    }

    .ml-xs-16,
    .mx-xs-16 {
        margin-left: 1rem !important
    }

    .m-xs-24 {
        margin: 1.5rem !important
    }

    .mt-xs-24,
    .my-xs-24 {
        margin-top: 1.5rem !important
    }

    .mr-xs-24,
    .mx-xs-24 {
        margin-right: 1.5rem !important
    }

    .mb-xs-24,
    .my-xs-24 {
        margin-bottom: 1.5rem !important
    }

    .ml-xs-24,
    .mx-xs-24 {
        margin-left: 1.5rem !important
    }

    .m-xs-32 {
        margin: 2rem !important
    }

    .mt-xs-32,
    .my-xs-32 {
        margin-top: 2rem !important
    }

    .mr-xs-32,
    .mx-xs-32 {
        margin-right: 2rem !important
    }

    .mb-xs-32,
    .my-xs-32 {
        margin-bottom: 2rem !important
    }

    .ml-xs-32,
    .mx-xs-32 {
        margin-left: 2rem !important
    }

    .m-xs-64 {
        margin: 4rem !important
    }

    .mt-xs-64,
    .my-xs-64 {
        margin-top: 4rem !important
    }

    .mr-xs-64,
    .mx-xs-64 {
        margin-right: 4rem !important
    }

    .mb-xs-64,
    .my-xs-64 {
        margin-bottom: 4rem !important
    }

    .ml-xs-64,
    .mx-xs-64 {
        margin-left: 4rem !important
    }

    .m-xs-80 {
        margin: 4.75rem !important
    }

    .mt-xs-80,
    .my-xs-80 {
        margin-top: 4.75rem !important
    }

    .mr-xs-80,
    .mx-xs-80 {
        margin-right: 4.75rem !important
    }

    .mb-xs-80,
    .my-xs-80 {
        margin-bottom: 4.75rem !important
    }

    .ml-xs-80,
    .mx-xs-80 {
        margin-left: 4.75rem !important
    }

    .p-xs-0 {
        padding: 0 !important
    }

    .pt-xs-0,
    .py-xs-0 {
        padding-top: 0 !important
    }

    .pr-xs-0,
    .px-xs-0 {
        padding-right: 0 !important
    }

    .pb-xs-0,
    .py-xs-0 {
        padding-bottom: 0 !important
    }

    .pl-xs-0,
    .px-xs-0 {
        padding-left: 0 !important
    }

    .p-xs-2 {
        padding: .125rem !important
    }

    .pt-xs-2,
    .py-xs-2 {
        padding-top: .125rem !important
    }

    .pr-xs-2,
    .px-xs-2 {
        padding-right: .125rem !important
    }

    .pb-xs-2,
    .py-xs-2 {
        padding-bottom: .125rem !important
    }

    .pl-xs-2,
    .px-xs-2 {
        padding-left: .125rem !important
    }

    .p-xs-4 {
        padding: .25rem !important
    }

    .pt-xs-4,
    .py-xs-4 {
        padding-top: .25rem !important
    }

    .pr-xs-4,
    .px-xs-4 {
        padding-right: .25rem !important
    }

    .pb-xs-4,
    .py-xs-4 {
        padding-bottom: .25rem !important
    }

    .pl-xs-4,
    .px-xs-4 {
        padding-left: .25rem !important
    }

    .p-xs-8 {
        padding: .5rem !important
    }

    .pt-xs-8,
    .py-xs-8 {
        padding-top: .5rem !important
    }

    .pr-xs-8,
    .px-xs-8 {
        padding-right: .5rem !important
    }

    .pb-xs-8,
    .py-xs-8 {
        padding-bottom: .5rem !important
    }

    .pl-xs-8,
    .px-xs-8 {
        padding-left: .5rem !important
    }

    .p-xs-12 {
        padding: .75rem !important
    }

    .pt-xs-12,
    .py-xs-12 {
        padding-top: .75rem !important
    }

    .pr-xs-12,
    .px-xs-12 {
        padding-right: .75rem !important
    }

    .pb-xs-12,
    .py-xs-12 {
        padding-bottom: .75rem !important
    }

    .pl-xs-12,
    .px-xs-12 {
        padding-left: .75rem !important
    }

    .p-xs-16 {
        padding: 1rem !important
    }

    .pt-xs-16,
    .py-xs-16 {
        padding-top: 1rem !important
    }

    .pr-xs-16,
    .px-xs-16 {
        padding-right: 1rem !important
    }

    .pb-xs-16,
    .py-xs-16 {
        padding-bottom: 1rem !important
    }

    .pl-xs-16,
    .px-xs-16 {
        padding-left: 1rem !important
    }

    .p-xs-24 {
        padding: 1.5rem !important
    }

    .pt-xs-24,
    .py-xs-24 {
        padding-top: 1.5rem !important
    }

    .pr-xs-24,
    .px-xs-24 {
        padding-right: 1.5rem !important
    }

    .pb-xs-24,
    .py-xs-24 {
        padding-bottom: 1.5rem !important
    }

    .pl-xs-24,
    .px-xs-24 {
        padding-left: 1.5rem !important
    }

    .p-xs-32 {
        padding: 2rem !important
    }

    .pt-xs-32,
    .py-xs-32 {
        padding-top: 2rem !important
    }

    .pr-xs-32,
    .px-xs-32 {
        padding-right: 2rem !important
    }

    .pb-xs-32,
    .py-xs-32 {
        padding-bottom: 2rem !important
    }

    .pl-xs-32,
    .px-xs-32 {
        padding-left: 2rem !important
    }

    .p-xs-64 {
        padding: 4rem !important
    }

    .pt-xs-64,
    .py-xs-64 {
        padding-top: 4rem !important
    }

    .pr-xs-64,
    .px-xs-64 {
        padding-right: 4rem !important
    }

    .pb-xs-64,
    .py-xs-64 {
        padding-bottom: 4rem !important
    }

    .pl-xs-64,
    .px-xs-64 {
        padding-left: 4rem !important
    }

    .p-xs-80 {
        padding: 4.75rem !important
    }

    .pt-xs-80,
    .py-xs-80 {
        padding-top: 4.75rem !important
    }

    .pr-xs-80,
    .px-xs-80 {
        padding-right: 4.75rem !important
    }

    .pb-xs-80,
    .py-xs-80 {
        padding-bottom: 4.75rem !important
    }

    .pl-xs-80,
    .px-xs-80 {
        padding-left: 4.75rem !important
    }

    .m-xs-n2 {
        margin: -0.125rem !important
    }

    .mt-xs-n2,
    .my-xs-n2 {
        margin-top: -0.125rem !important
    }

    .mr-xs-n2,
    .mx-xs-n2 {
        margin-right: -0.125rem !important
    }

    .mb-xs-n2,
    .my-xs-n2 {
        margin-bottom: -0.125rem !important
    }

    .ml-xs-n2,
    .mx-xs-n2 {
        margin-left: -0.125rem !important
    }

    .m-xs-n4 {
        margin: -0.25rem !important
    }

    .mt-xs-n4,
    .my-xs-n4 {
        margin-top: -0.25rem !important
    }

    .mr-xs-n4,
    .mx-xs-n4 {
        margin-right: -0.25rem !important
    }

    .mb-xs-n4,
    .my-xs-n4 {
        margin-bottom: -0.25rem !important
    }

    .ml-xs-n4,
    .mx-xs-n4 {
        margin-left: -0.25rem !important
    }

    .m-xs-n8 {
        margin: -0.5rem !important
    }

    .mt-xs-n8,
    .my-xs-n8 {
        margin-top: -0.5rem !important
    }

    .mr-xs-n8,
    .mx-xs-n8 {
        margin-right: -0.5rem !important
    }

    .mb-xs-n8,
    .my-xs-n8 {
        margin-bottom: -0.5rem !important
    }

    .ml-xs-n8,
    .mx-xs-n8 {
        margin-left: -0.5rem !important
    }

    .m-xs-n12 {
        margin: -0.75rem !important
    }

    .mt-xs-n12,
    .my-xs-n12 {
        margin-top: -0.75rem !important
    }

    .mr-xs-n12,
    .mx-xs-n12 {
        margin-right: -0.75rem !important
    }

    .mb-xs-n12,
    .my-xs-n12 {
        margin-bottom: -0.75rem !important
    }

    .ml-xs-n12,
    .mx-xs-n12 {
        margin-left: -0.75rem !important
    }

    .m-xs-n16 {
        margin: -1rem !important
    }

    .mt-xs-n16,
    .my-xs-n16 {
        margin-top: -1rem !important
    }

    .mr-xs-n16,
    .mx-xs-n16 {
        margin-right: -1rem !important
    }

    .mb-xs-n16,
    .my-xs-n16 {
        margin-bottom: -1rem !important
    }

    .ml-xs-n16,
    .mx-xs-n16 {
        margin-left: -1rem !important
    }

    .m-xs-n24 {
        margin: -1.5rem !important
    }

    .mt-xs-n24,
    .my-xs-n24 {
        margin-top: -1.5rem !important
    }

    .mr-xs-n24,
    .mx-xs-n24 {
        margin-right: -1.5rem !important
    }

    .mb-xs-n24,
    .my-xs-n24 {
        margin-bottom: -1.5rem !important
    }

    .ml-xs-n24,
    .mx-xs-n24 {
        margin-left: -1.5rem !important
    }

    .m-xs-n32 {
        margin: -2rem !important
    }

    .mt-xs-n32,
    .my-xs-n32 {
        margin-top: -2rem !important
    }

    .mr-xs-n32,
    .mx-xs-n32 {
        margin-right: -2rem !important
    }

    .mb-xs-n32,
    .my-xs-n32 {
        margin-bottom: -2rem !important
    }

    .ml-xs-n32,
    .mx-xs-n32 {
        margin-left: -2rem !important
    }

    .m-xs-n64 {
        margin: -4rem !important
    }

    .mt-xs-n64,
    .my-xs-n64 {
        margin-top: -4rem !important
    }

    .mr-xs-n64,
    .mx-xs-n64 {
        margin-right: -4rem !important
    }

    .mb-xs-n64,
    .my-xs-n64 {
        margin-bottom: -4rem !important
    }

    .ml-xs-n64,
    .mx-xs-n64 {
        margin-left: -4rem !important
    }

    .m-xs-n80 {
        margin: -4.75rem !important
    }

    .mt-xs-n80,
    .my-xs-n80 {
        margin-top: -4.75rem !important
    }

    .mr-xs-n80,
    .mx-xs-n80 {
        margin-right: -4.75rem !important
    }

    .mb-xs-n80,
    .my-xs-n80 {
        margin-bottom: -4.75rem !important
    }

    .ml-xs-n80,
    .mx-xs-n80 {
        margin-left: -4.75rem !important
    }

    .m-xs-auto {
        margin: auto !important
    }

    .mt-xs-auto,
    .my-xs-auto {
        margin-top: auto !important
    }

    .mr-xs-auto,
    .mx-xs-auto {
        margin-right: auto !important
    }

    .mb-xs-auto,
    .my-xs-auto {
        margin-bottom: auto !important
    }

    .ml-xs-auto,
    .mx-xs-auto {
        margin-left: auto !important
    }
}

@media(min-width: 600px) {
    .m-sm-0 {
        margin: 0 !important
    }

    .mt-sm-0,
    .my-sm-0 {
        margin-top: 0 !important
    }

    .mr-sm-0,
    .mx-sm-0 {
        margin-right: 0 !important
    }

    .mb-sm-0,
    .my-sm-0 {
        margin-bottom: 0 !important
    }

    .ml-sm-0,
    .mx-sm-0 {
        margin-left: 0 !important
    }

    .m-sm-2 {
        margin: .125rem !important
    }

    .mt-sm-2,
    .my-sm-2 {
        margin-top: .125rem !important
    }

    .mr-sm-2,
    .mx-sm-2 {
        margin-right: .125rem !important
    }

    .mb-sm-2,
    .my-sm-2 {
        margin-bottom: .125rem !important
    }

    .ml-sm-2,
    .mx-sm-2 {
        margin-left: .125rem !important
    }

    .m-sm-4 {
        margin: .25rem !important
    }

    .mt-sm-4,
    .my-sm-4 {
        margin-top: .25rem !important
    }

    .mr-sm-4,
    .mx-sm-4 {
        margin-right: .25rem !important
    }

    .mb-sm-4,
    .my-sm-4 {
        margin-bottom: .25rem !important
    }

    .ml-sm-4,
    .mx-sm-4 {
        margin-left: .25rem !important
    }

    .m-sm-8 {
        margin: .5rem !important
    }

    .mt-sm-8,
    .my-sm-8 {
        margin-top: .5rem !important
    }

    .mr-sm-8,
    .mx-sm-8 {
        margin-right: .5rem !important
    }

    .mb-sm-8,
    .my-sm-8 {
        margin-bottom: .5rem !important
    }

    .ml-sm-8,
    .mx-sm-8 {
        margin-left: .5rem !important
    }

    .m-sm-12 {
        margin: .75rem !important
    }

    .mt-sm-12,
    .my-sm-12 {
        margin-top: .75rem !important
    }

    .mr-sm-12,
    .mx-sm-12 {
        margin-right: .75rem !important
    }

    .mb-sm-12,
    .my-sm-12 {
        margin-bottom: .75rem !important
    }

    .ml-sm-12,
    .mx-sm-12 {
        margin-left: .75rem !important
    }

    .m-sm-16 {
        margin: 1rem !important
    }

    .mt-sm-16,
    .my-sm-16 {
        margin-top: 1rem !important
    }

    .mr-sm-16,
    .mx-sm-16 {
        margin-right: 1rem !important
    }

    .mb-sm-16,
    .my-sm-16 {
        margin-bottom: 1rem !important
    }

    .ml-sm-16,
    .mx-sm-16 {
        margin-left: 1rem !important
    }

    .m-sm-24 {
        margin: 1.5rem !important
    }

    .mt-sm-24,
    .my-sm-24 {
        margin-top: 1.5rem !important
    }

    .mr-sm-24,
    .mx-sm-24 {
        margin-right: 1.5rem !important
    }

    .mb-sm-24,
    .my-sm-24 {
        margin-bottom: 1.5rem !important
    }

    .ml-sm-24,
    .mx-sm-24 {
        margin-left: 1.5rem !important
    }

    .m-sm-32 {
        margin: 2rem !important
    }

    .mt-sm-32,
    .my-sm-32 {
        margin-top: 2rem !important
    }

    .mr-sm-32,
    .mx-sm-32 {
        margin-right: 2rem !important
    }

    .mb-sm-32,
    .my-sm-32 {
        margin-bottom: 2rem !important
    }

    .ml-sm-32,
    .mx-sm-32 {
        margin-left: 2rem !important
    }

    .m-sm-64 {
        margin: 4rem !important
    }

    .mt-sm-64,
    .my-sm-64 {
        margin-top: 4rem !important
    }

    .mr-sm-64,
    .mx-sm-64 {
        margin-right: 4rem !important
    }

    .mb-sm-64,
    .my-sm-64 {
        margin-bottom: 4rem !important
    }

    .ml-sm-64,
    .mx-sm-64 {
        margin-left: 4rem !important
    }

    .m-sm-80 {
        margin: 4.75rem !important
    }

    .mt-sm-80,
    .my-sm-80 {
        margin-top: 4.75rem !important
    }

    .mr-sm-80,
    .mx-sm-80 {
        margin-right: 4.75rem !important
    }

    .mb-sm-80,
    .my-sm-80 {
        margin-bottom: 4.75rem !important
    }

    .ml-sm-80,
    .mx-sm-80 {
        margin-left: 4.75rem !important
    }

    .p-sm-0 {
        padding: 0 !important
    }

    .pt-sm-0,
    .py-sm-0 {
        padding-top: 0 !important
    }

    .pr-sm-0,
    .px-sm-0 {
        padding-right: 0 !important
    }

    .pb-sm-0,
    .py-sm-0 {
        padding-bottom: 0 !important
    }

    .pl-sm-0,
    .px-sm-0 {
        padding-left: 0 !important
    }

    .p-sm-2 {
        padding: .125rem !important
    }

    .pt-sm-2,
    .py-sm-2 {
        padding-top: .125rem !important
    }

    .pr-sm-2,
    .px-sm-2 {
        padding-right: .125rem !important
    }

    .pb-sm-2,
    .py-sm-2 {
        padding-bottom: .125rem !important
    }

    .pl-sm-2,
    .px-sm-2 {
        padding-left: .125rem !important
    }

    .p-sm-4 {
        padding: .25rem !important
    }

    .pt-sm-4,
    .py-sm-4 {
        padding-top: .25rem !important
    }

    .pr-sm-4,
    .px-sm-4 {
        padding-right: .25rem !important
    }

    .pb-sm-4,
    .py-sm-4 {
        padding-bottom: .25rem !important
    }

    .pl-sm-4,
    .px-sm-4 {
        padding-left: .25rem !important
    }

    .p-sm-8 {
        padding: .5rem !important
    }

    .pt-sm-8,
    .py-sm-8 {
        padding-top: .5rem !important
    }

    .pr-sm-8,
    .px-sm-8 {
        padding-right: .5rem !important
    }

    .pb-sm-8,
    .py-sm-8 {
        padding-bottom: .5rem !important
    }

    .pl-sm-8,
    .px-sm-8 {
        padding-left: .5rem !important
    }

    .p-sm-12 {
        padding: .75rem !important
    }

    .pt-sm-12,
    .py-sm-12 {
        padding-top: .75rem !important
    }

    .pr-sm-12,
    .px-sm-12 {
        padding-right: .75rem !important
    }

    .pb-sm-12,
    .py-sm-12 {
        padding-bottom: .75rem !important
    }

    .pl-sm-12,
    .px-sm-12 {
        padding-left: .75rem !important
    }

    .p-sm-16 {
        padding: 1rem !important
    }

    .pt-sm-16,
    .py-sm-16 {
        padding-top: 1rem !important
    }

    .pr-sm-16,
    .px-sm-16 {
        padding-right: 1rem !important
    }

    .pb-sm-16,
    .py-sm-16 {
        padding-bottom: 1rem !important
    }

    .pl-sm-16,
    .px-sm-16 {
        padding-left: 1rem !important
    }

    .p-sm-24 {
        padding: 1.5rem !important
    }

    .pt-sm-24,
    .py-sm-24 {
        padding-top: 1.5rem !important
    }

    .pr-sm-24,
    .px-sm-24 {
        padding-right: 1.5rem !important
    }

    .pb-sm-24,
    .py-sm-24 {
        padding-bottom: 1.5rem !important
    }

    .pl-sm-24,
    .px-sm-24 {
        padding-left: 1.5rem !important
    }

    .p-sm-32 {
        padding: 2rem !important
    }

    .pt-sm-32,
    .py-sm-32 {
        padding-top: 2rem !important
    }

    .pr-sm-32,
    .px-sm-32 {
        padding-right: 2rem !important
    }

    .pb-sm-32,
    .py-sm-32 {
        padding-bottom: 2rem !important
    }

    .pl-sm-32,
    .px-sm-32 {
        padding-left: 2rem !important
    }

    .p-sm-64 {
        padding: 4rem !important
    }

    .pt-sm-64,
    .py-sm-64 {
        padding-top: 4rem !important
    }

    .pr-sm-64,
    .px-sm-64 {
        padding-right: 4rem !important
    }

    .pb-sm-64,
    .py-sm-64 {
        padding-bottom: 4rem !important
    }

    .pl-sm-64,
    .px-sm-64 {
        padding-left: 4rem !important
    }

    .p-sm-80 {
        padding: 4.75rem !important
    }

    .pt-sm-80,
    .py-sm-80 {
        padding-top: 4.75rem !important
    }

    .pr-sm-80,
    .px-sm-80 {
        padding-right: 4.75rem !important
    }

    .pb-sm-80,
    .py-sm-80 {
        padding-bottom: 4.75rem !important
    }

    .pl-sm-80,
    .px-sm-80 {
        padding-left: 4.75rem !important
    }

    .m-sm-n2 {
        margin: -0.125rem !important
    }

    .mt-sm-n2,
    .my-sm-n2 {
        margin-top: -0.125rem !important
    }

    .mr-sm-n2,
    .mx-sm-n2 {
        margin-right: -0.125rem !important
    }

    .mb-sm-n2,
    .my-sm-n2 {
        margin-bottom: -0.125rem !important
    }

    .ml-sm-n2,
    .mx-sm-n2 {
        margin-left: -0.125rem !important
    }

    .m-sm-n4 {
        margin: -0.25rem !important
    }

    .mt-sm-n4,
    .my-sm-n4 {
        margin-top: -0.25rem !important
    }

    .mr-sm-n4,
    .mx-sm-n4 {
        margin-right: -0.25rem !important
    }

    .mb-sm-n4,
    .my-sm-n4 {
        margin-bottom: -0.25rem !important
    }

    .ml-sm-n4,
    .mx-sm-n4 {
        margin-left: -0.25rem !important
    }

    .m-sm-n8 {
        margin: -0.5rem !important
    }

    .mt-sm-n8,
    .my-sm-n8 {
        margin-top: -0.5rem !important
    }

    .mr-sm-n8,
    .mx-sm-n8 {
        margin-right: -0.5rem !important
    }

    .mb-sm-n8,
    .my-sm-n8 {
        margin-bottom: -0.5rem !important
    }

    .ml-sm-n8,
    .mx-sm-n8 {
        margin-left: -0.5rem !important
    }

    .m-sm-n12 {
        margin: -0.75rem !important
    }

    .mt-sm-n12,
    .my-sm-n12 {
        margin-top: -0.75rem !important
    }

    .mr-sm-n12,
    .mx-sm-n12 {
        margin-right: -0.75rem !important
    }

    .mb-sm-n12,
    .my-sm-n12 {
        margin-bottom: -0.75rem !important
    }

    .ml-sm-n12,
    .mx-sm-n12 {
        margin-left: -0.75rem !important
    }

    .m-sm-n16 {
        margin: -1rem !important
    }

    .mt-sm-n16,
    .my-sm-n16 {
        margin-top: -1rem !important
    }

    .mr-sm-n16,
    .mx-sm-n16 {
        margin-right: -1rem !important
    }

    .mb-sm-n16,
    .my-sm-n16 {
        margin-bottom: -1rem !important
    }

    .ml-sm-n16,
    .mx-sm-n16 {
        margin-left: -1rem !important
    }

    .m-sm-n24 {
        margin: -1.5rem !important
    }

    .mt-sm-n24,
    .my-sm-n24 {
        margin-top: -1.5rem !important
    }

    .mr-sm-n24,
    .mx-sm-n24 {
        margin-right: -1.5rem !important
    }

    .mb-sm-n24,
    .my-sm-n24 {
        margin-bottom: -1.5rem !important
    }

    .ml-sm-n24,
    .mx-sm-n24 {
        margin-left: -1.5rem !important
    }

    .m-sm-n32 {
        margin: -2rem !important
    }

    .mt-sm-n32,
    .my-sm-n32 {
        margin-top: -2rem !important
    }

    .mr-sm-n32,
    .mx-sm-n32 {
        margin-right: -2rem !important
    }

    .mb-sm-n32,
    .my-sm-n32 {
        margin-bottom: -2rem !important
    }

    .ml-sm-n32,
    .mx-sm-n32 {
        margin-left: -2rem !important
    }

    .m-sm-n64 {
        margin: -4rem !important
    }

    .mt-sm-n64,
    .my-sm-n64 {
        margin-top: -4rem !important
    }

    .mr-sm-n64,
    .mx-sm-n64 {
        margin-right: -4rem !important
    }

    .mb-sm-n64,
    .my-sm-n64 {
        margin-bottom: -4rem !important
    }

    .ml-sm-n64,
    .mx-sm-n64 {
        margin-left: -4rem !important
    }

    .m-sm-n80 {
        margin: -4.75rem !important
    }

    .mt-sm-n80,
    .my-sm-n80 {
        margin-top: -4.75rem !important
    }

    .mr-sm-n80,
    .mx-sm-n80 {
        margin-right: -4.75rem !important
    }

    .mb-sm-n80,
    .my-sm-n80 {
        margin-bottom: -4.75rem !important
    }

    .ml-sm-n80,
    .mx-sm-n80 {
        margin-left: -4.75rem !important
    }

    .m-sm-auto {
        margin: auto !important
    }

    .mt-sm-auto,
    .my-sm-auto {
        margin-top: auto !important
    }

    .mr-sm-auto,
    .mx-sm-auto {
        margin-right: auto !important
    }

    .mb-sm-auto,
    .my-sm-auto {
        margin-bottom: auto !important
    }

    .ml-sm-auto,
    .mx-sm-auto {
        margin-left: auto !important
    }
}

@media(min-width: 768px) {
    .m-md-0 {
        margin: 0 !important
    }

    .mt-md-0,
    .my-md-0 {
        margin-top: 0 !important
    }

    .mr-md-0,
    .mx-md-0 {
        margin-right: 0 !important
    }

    .mb-md-0,
    .my-md-0 {
        margin-bottom: 0 !important
    }

    .ml-md-0,
    .mx-md-0 {
        margin-left: 0 !important
    }

    .m-md-2 {
        margin: .125rem !important
    }

    .mt-md-2,
    .my-md-2 {
        margin-top: .125rem !important
    }

    .mr-md-2,
    .mx-md-2 {
        margin-right: .125rem !important
    }

    .mb-md-2,
    .my-md-2 {
        margin-bottom: .125rem !important
    }

    .ml-md-2,
    .mx-md-2 {
        margin-left: .125rem !important
    }

    .m-md-4 {
        margin: .25rem !important
    }

    .mt-md-4,
    .my-md-4 {
        margin-top: .25rem !important
    }

    .mr-md-4,
    .mx-md-4 {
        margin-right: .25rem !important
    }

    .mb-md-4,
    .my-md-4 {
        margin-bottom: .25rem !important
    }

    .ml-md-4,
    .mx-md-4 {
        margin-left: .25rem !important
    }

    .m-md-8 {
        margin: .5rem !important
    }

    .mt-md-8,
    .my-md-8 {
        margin-top: .5rem !important
    }

    .mr-md-8,
    .mx-md-8 {
        margin-right: .5rem !important
    }

    .mb-md-8,
    .my-md-8 {
        margin-bottom: .5rem !important
    }

    .ml-md-8,
    .mx-md-8 {
        margin-left: .5rem !important
    }

    .m-md-12 {
        margin: .75rem !important
    }

    .mt-md-12,
    .my-md-12 {
        margin-top: .75rem !important
    }

    .mr-md-12,
    .mx-md-12 {
        margin-right: .75rem !important
    }

    .mb-md-12,
    .my-md-12 {
        margin-bottom: .75rem !important
    }

    .ml-md-12,
    .mx-md-12 {
        margin-left: .75rem !important
    }

    .m-md-16 {
        margin: 1rem !important
    }

    .mt-md-16,
    .my-md-16 {
        margin-top: 1rem !important
    }

    .mr-md-16,
    .mx-md-16 {
        margin-right: 1rem !important
    }

    .mb-md-16,
    .my-md-16 {
        margin-bottom: 1rem !important
    }

    .ml-md-16,
    .mx-md-16 {
        margin-left: 1rem !important
    }

    .m-md-24 {
        margin: 1.5rem !important
    }

    .mt-md-24,
    .my-md-24 {
        margin-top: 1.5rem !important
    }

    .mr-md-24,
    .mx-md-24 {
        margin-right: 1.5rem !important
    }

    .mb-md-24,
    .my-md-24 {
        margin-bottom: 1.5rem !important
    }

    .ml-md-24,
    .mx-md-24 {
        margin-left: 1.5rem !important
    }

    .m-md-32 {
        margin: 2rem !important
    }

    .mt-md-32,
    .my-md-32 {
        margin-top: 2rem !important
    }

    .mr-md-32,
    .mx-md-32 {
        margin-right: 2rem !important
    }

    .mb-md-32,
    .my-md-32 {
        margin-bottom: 2rem !important
    }

    .ml-md-32,
    .mx-md-32 {
        margin-left: 2rem !important
    }

    .m-md-64 {
        margin: 4rem !important
    }

    .mt-md-64,
    .my-md-64 {
        margin-top: 4rem !important
    }

    .mr-md-64,
    .mx-md-64 {
        margin-right: 4rem !important
    }

    .mb-md-64,
    .my-md-64 {
        margin-bottom: 4rem !important
    }

    .ml-md-64,
    .mx-md-64 {
        margin-left: 4rem !important
    }

    .m-md-80 {
        margin: 4.75rem !important
    }

    .mt-md-80,
    .my-md-80 {
        margin-top: 4.75rem !important
    }

    .mr-md-80,
    .mx-md-80 {
        margin-right: 4.75rem !important
    }

    .mb-md-80,
    .my-md-80 {
        margin-bottom: 4.75rem !important
    }

    .ml-md-80,
    .mx-md-80 {
        margin-left: 4.75rem !important
    }

    .p-md-0 {
        padding: 0 !important
    }

    .pt-md-0,
    .py-md-0 {
        padding-top: 0 !important
    }

    .pr-md-0,
    .px-md-0 {
        padding-right: 0 !important
    }

    .pb-md-0,
    .py-md-0 {
        padding-bottom: 0 !important
    }

    .pl-md-0,
    .px-md-0 {
        padding-left: 0 !important
    }

    .p-md-2 {
        padding: .125rem !important
    }

    .pt-md-2,
    .py-md-2 {
        padding-top: .125rem !important
    }

    .pr-md-2,
    .px-md-2 {
        padding-right: .125rem !important
    }

    .pb-md-2,
    .py-md-2 {
        padding-bottom: .125rem !important
    }

    .pl-md-2,
    .px-md-2 {
        padding-left: .125rem !important
    }

    .p-md-4 {
        padding: .25rem !important
    }

    .pt-md-4,
    .py-md-4 {
        padding-top: .25rem !important
    }

    .pr-md-4,
    .px-md-4 {
        padding-right: .25rem !important
    }

    .pb-md-4,
    .py-md-4 {
        padding-bottom: .25rem !important
    }

    .pl-md-4,
    .px-md-4 {
        padding-left: .25rem !important
    }

    .p-md-8 {
        padding: .5rem !important
    }

    .pt-md-8,
    .py-md-8 {
        padding-top: .5rem !important
    }

    .pr-md-8,
    .px-md-8 {
        padding-right: .5rem !important
    }

    .pb-md-8,
    .py-md-8 {
        padding-bottom: .5rem !important
    }

    .pl-md-8,
    .px-md-8 {
        padding-left: .5rem !important
    }

    .p-md-12 {
        padding: .75rem !important
    }

    .pt-md-12,
    .py-md-12 {
        padding-top: .75rem !important
    }

    .pr-md-12,
    .px-md-12 {
        padding-right: .75rem !important
    }

    .pb-md-12,
    .py-md-12 {
        padding-bottom: .75rem !important
    }

    .pl-md-12,
    .px-md-12 {
        padding-left: .75rem !important
    }

    .p-md-16 {
        padding: 1rem !important
    }

    .pt-md-16,
    .py-md-16 {
        padding-top: 1rem !important
    }

    .pr-md-16,
    .px-md-16 {
        padding-right: 1rem !important
    }

    .pb-md-16,
    .py-md-16 {
        padding-bottom: 1rem !important
    }

    .pl-md-16,
    .px-md-16 {
        padding-left: 1rem !important
    }

    .p-md-24 {
        padding: 1.5rem !important
    }

    .pt-md-24,
    .py-md-24 {
        padding-top: 1.5rem !important
    }

    .pr-md-24,
    .px-md-24 {
        padding-right: 1.5rem !important
    }

    .pb-md-24,
    .py-md-24 {
        padding-bottom: 1.5rem !important
    }

    .pl-md-24,
    .px-md-24 {
        padding-left: 1.5rem !important
    }

    .p-md-32 {
        padding: 2rem !important
    }

    .pt-md-32,
    .py-md-32 {
        padding-top: 2rem !important
    }

    .pr-md-32,
    .px-md-32 {
        padding-right: 2rem !important
    }

    .pb-md-32,
    .py-md-32 {
        padding-bottom: 2rem !important
    }

    .pl-md-32,
    .px-md-32 {
        padding-left: 2rem !important
    }

    .p-md-64 {
        padding: 4rem !important
    }

    .pt-md-64,
    .py-md-64 {
        padding-top: 4rem !important
    }

    .pr-md-64,
    .px-md-64 {
        padding-right: 4rem !important
    }

    .pb-md-64,
    .py-md-64 {
        padding-bottom: 4rem !important
    }

    .pl-md-64,
    .px-md-64 {
        padding-left: 4rem !important
    }

    .p-md-80 {
        padding: 4.75rem !important
    }

    .pt-md-80,
    .py-md-80 {
        padding-top: 4.75rem !important
    }

    .pr-md-80,
    .px-md-80 {
        padding-right: 4.75rem !important
    }

    .pb-md-80,
    .py-md-80 {
        padding-bottom: 4.75rem !important
    }

    .pl-md-80,
    .px-md-80 {
        padding-left: 4.75rem !important
    }

    .m-md-n2 {
        margin: -0.125rem !important
    }

    .mt-md-n2,
    .my-md-n2 {
        margin-top: -0.125rem !important
    }

    .mr-md-n2,
    .mx-md-n2 {
        margin-right: -0.125rem !important
    }

    .mb-md-n2,
    .my-md-n2 {
        margin-bottom: -0.125rem !important
    }

    .ml-md-n2,
    .mx-md-n2 {
        margin-left: -0.125rem !important
    }

    .m-md-n4 {
        margin: -0.25rem !important
    }

    .mt-md-n4,
    .my-md-n4 {
        margin-top: -0.25rem !important
    }

    .mr-md-n4,
    .mx-md-n4 {
        margin-right: -0.25rem !important
    }

    .mb-md-n4,
    .my-md-n4 {
        margin-bottom: -0.25rem !important
    }

    .ml-md-n4,
    .mx-md-n4 {
        margin-left: -0.25rem !important
    }

    .m-md-n8 {
        margin: -0.5rem !important
    }

    .mt-md-n8,
    .my-md-n8 {
        margin-top: -0.5rem !important
    }

    .mr-md-n8,
    .mx-md-n8 {
        margin-right: -0.5rem !important
    }

    .mb-md-n8,
    .my-md-n8 {
        margin-bottom: -0.5rem !important
    }

    .ml-md-n8,
    .mx-md-n8 {
        margin-left: -0.5rem !important
    }

    .m-md-n12 {
        margin: -0.75rem !important
    }

    .mt-md-n12,
    .my-md-n12 {
        margin-top: -0.75rem !important
    }

    .mr-md-n12,
    .mx-md-n12 {
        margin-right: -0.75rem !important
    }

    .mb-md-n12,
    .my-md-n12 {
        margin-bottom: -0.75rem !important
    }

    .ml-md-n12,
    .mx-md-n12 {
        margin-left: -0.75rem !important
    }

    .m-md-n16 {
        margin: -1rem !important
    }

    .mt-md-n16,
    .my-md-n16 {
        margin-top: -1rem !important
    }

    .mr-md-n16,
    .mx-md-n16 {
        margin-right: -1rem !important
    }

    .mb-md-n16,
    .my-md-n16 {
        margin-bottom: -1rem !important
    }

    .ml-md-n16,
    .mx-md-n16 {
        margin-left: -1rem !important
    }

    .m-md-n24 {
        margin: -1.5rem !important
    }

    .mt-md-n24,
    .my-md-n24 {
        margin-top: -1.5rem !important
    }

    .mr-md-n24,
    .mx-md-n24 {
        margin-right: -1.5rem !important
    }

    .mb-md-n24,
    .my-md-n24 {
        margin-bottom: -1.5rem !important
    }

    .ml-md-n24,
    .mx-md-n24 {
        margin-left: -1.5rem !important
    }

    .m-md-n32 {
        margin: -2rem !important
    }

    .mt-md-n32,
    .my-md-n32 {
        margin-top: -2rem !important
    }

    .mr-md-n32,
    .mx-md-n32 {
        margin-right: -2rem !important
    }

    .mb-md-n32,
    .my-md-n32 {
        margin-bottom: -2rem !important
    }

    .ml-md-n32,
    .mx-md-n32 {
        margin-left: -2rem !important
    }

    .m-md-n64 {
        margin: -4rem !important
    }

    .mt-md-n64,
    .my-md-n64 {
        margin-top: -4rem !important
    }

    .mr-md-n64,
    .mx-md-n64 {
        margin-right: -4rem !important
    }

    .mb-md-n64,
    .my-md-n64 {
        margin-bottom: -4rem !important
    }

    .ml-md-n64,
    .mx-md-n64 {
        margin-left: -4rem !important
    }

    .m-md-n80 {
        margin: -4.75rem !important
    }

    .mt-md-n80,
    .my-md-n80 {
        margin-top: -4.75rem !important
    }

    .mr-md-n80,
    .mx-md-n80 {
        margin-right: -4.75rem !important
    }

    .mb-md-n80,
    .my-md-n80 {
        margin-bottom: -4.75rem !important
    }

    .ml-md-n80,
    .mx-md-n80 {
        margin-left: -4.75rem !important
    }

    .m-md-auto {
        margin: auto !important
    }

    .mt-md-auto,
    .my-md-auto {
        margin-top: auto !important
    }

    .mr-md-auto,
    .mx-md-auto {
        margin-right: auto !important
    }

    .mb-md-auto,
    .my-md-auto {
        margin-bottom: auto !important
    }

    .ml-md-auto,
    .mx-md-auto {
        margin-left: auto !important
    }
}

@media(min-width: 1024px) {
    .m-lg-0 {
        margin: 0 !important
    }

    .mt-lg-0,
    .my-lg-0 {
        margin-top: 0 !important
    }

    .mr-lg-0,
    .mx-lg-0 {
        margin-right: 0 !important
    }

    .mb-lg-0,
    .my-lg-0 {
        margin-bottom: 0 !important
    }

    .ml-lg-0,
    .mx-lg-0 {
        margin-left: 0 !important
    }

    .m-lg-2 {
        margin: .125rem !important
    }

    .mt-lg-2,
    .my-lg-2 {
        margin-top: .125rem !important
    }

    .mr-lg-2,
    .mx-lg-2 {
        margin-right: .125rem !important
    }

    .mb-lg-2,
    .my-lg-2 {
        margin-bottom: .125rem !important
    }

    .ml-lg-2,
    .mx-lg-2 {
        margin-left: .125rem !important
    }

    .m-lg-4 {
        margin: .25rem !important
    }

    .mt-lg-4,
    .my-lg-4 {
        margin-top: .25rem !important
    }

    .mr-lg-4,
    .mx-lg-4 {
        margin-right: .25rem !important
    }

    .mb-lg-4,
    .my-lg-4 {
        margin-bottom: .25rem !important
    }

    .ml-lg-4,
    .mx-lg-4 {
        margin-left: .25rem !important
    }

    .m-lg-8 {
        margin: .5rem !important
    }

    .mt-lg-8,
    .my-lg-8 {
        margin-top: .5rem !important
    }

    .mr-lg-8,
    .mx-lg-8 {
        margin-right: .5rem !important
    }

    .mb-lg-8,
    .my-lg-8 {
        margin-bottom: .5rem !important
    }

    .ml-lg-8,
    .mx-lg-8 {
        margin-left: .5rem !important
    }

    .m-lg-12 {
        margin: .75rem !important
    }

    .mt-lg-12,
    .my-lg-12 {
        margin-top: .75rem !important
    }

    .mr-lg-12,
    .mx-lg-12 {
        margin-right: .75rem !important
    }

    .mb-lg-12,
    .my-lg-12 {
        margin-bottom: .75rem !important
    }

    .ml-lg-12,
    .mx-lg-12 {
        margin-left: .75rem !important
    }

    .m-lg-16 {
        margin: 1rem !important
    }

    .mt-lg-16,
    .my-lg-16 {
        margin-top: 1rem !important
    }

    .mr-lg-16,
    .mx-lg-16 {
        margin-right: 1rem !important
    }

    .mb-lg-16,
    .my-lg-16 {
        margin-bottom: 1rem !important
    }

    .ml-lg-16,
    .mx-lg-16 {
        margin-left: 1rem !important
    }

    .m-lg-24 {
        margin: 1.5rem !important
    }

    .mt-lg-24,
    .my-lg-24 {
        margin-top: 1.5rem !important
    }

    .mr-lg-24,
    .mx-lg-24 {
        margin-right: 1.5rem !important
    }

    .mb-lg-24,
    .my-lg-24 {
        margin-bottom: 1.5rem !important
    }

    .ml-lg-24,
    .mx-lg-24 {
        margin-left: 1.5rem !important
    }

    .m-lg-32 {
        margin: 2rem !important
    }

    .mt-lg-32,
    .my-lg-32 {
        margin-top: 2rem !important
    }

    .mr-lg-32,
    .mx-lg-32 {
        margin-right: 2rem !important
    }

    .mb-lg-32,
    .my-lg-32 {
        margin-bottom: 2rem !important
    }

    .ml-lg-32,
    .mx-lg-32 {
        margin-left: 2rem !important
    }

    .m-lg-64 {
        margin: 4rem !important
    }

    .mt-lg-64,
    .my-lg-64 {
        margin-top: 4rem !important
    }

    .mr-lg-64,
    .mx-lg-64 {
        margin-right: 4rem !important
    }

    .mb-lg-64,
    .my-lg-64 {
        margin-bottom: 4rem !important
    }

    .ml-lg-64,
    .mx-lg-64 {
        margin-left: 4rem !important
    }

    .m-lg-80 {
        margin: 4.75rem !important
    }

    .mt-lg-80,
    .my-lg-80 {
        margin-top: 4.75rem !important
    }

    .mr-lg-80,
    .mx-lg-80 {
        margin-right: 4.75rem !important
    }

    .mb-lg-80,
    .my-lg-80 {
        margin-bottom: 4.75rem !important
    }

    .ml-lg-80,
    .mx-lg-80 {
        margin-left: 4.75rem !important
    }

    .p-lg-0 {
        padding: 0 !important
    }

    .pt-lg-0,
    .py-lg-0 {
        padding-top: 0 !important
    }

    .pr-lg-0,
    .px-lg-0 {
        padding-right: 0 !important
    }

    .pb-lg-0,
    .py-lg-0 {
        padding-bottom: 0 !important
    }

    .pl-lg-0,
    .px-lg-0 {
        padding-left: 0 !important
    }

    .p-lg-2 {
        padding: .125rem !important
    }

    .pt-lg-2,
    .py-lg-2 {
        padding-top: .125rem !important
    }

    .pr-lg-2,
    .px-lg-2 {
        padding-right: .125rem !important
    }

    .pb-lg-2,
    .py-lg-2 {
        padding-bottom: .125rem !important
    }

    .pl-lg-2,
    .px-lg-2 {
        padding-left: .125rem !important
    }

    .p-lg-4 {
        padding: .25rem !important
    }

    .pt-lg-4,
    .py-lg-4 {
        padding-top: .25rem !important
    }

    .pr-lg-4,
    .px-lg-4 {
        padding-right: .25rem !important
    }

    .pb-lg-4,
    .py-lg-4 {
        padding-bottom: .25rem !important
    }

    .pl-lg-4,
    .px-lg-4 {
        padding-left: .25rem !important
    }

    .p-lg-8 {
        padding: .5rem !important
    }

    .pt-lg-8,
    .py-lg-8 {
        padding-top: .5rem !important
    }

    .pr-lg-8,
    .px-lg-8 {
        padding-right: .5rem !important
    }

    .pb-lg-8,
    .py-lg-8 {
        padding-bottom: .5rem !important
    }

    .pl-lg-8,
    .px-lg-8 {
        padding-left: .5rem !important
    }

    .p-lg-12 {
        padding: .75rem !important
    }

    .pt-lg-12,
    .py-lg-12 {
        padding-top: .75rem !important
    }

    .pr-lg-12,
    .px-lg-12 {
        padding-right: .75rem !important
    }

    .pb-lg-12,
    .py-lg-12 {
        padding-bottom: .75rem !important
    }

    .pl-lg-12,
    .px-lg-12 {
        padding-left: .75rem !important
    }

    .p-lg-16 {
        padding: 1rem !important
    }

    .pt-lg-16,
    .py-lg-16 {
        padding-top: 1rem !important
    }

    .pr-lg-16,
    .px-lg-16 {
        padding-right: 1rem !important
    }

    .pb-lg-16,
    .py-lg-16 {
        padding-bottom: 1rem !important
    }

    .pl-lg-16,
    .px-lg-16 {
        padding-left: 1rem !important
    }

    .p-lg-24 {
        padding: 1.5rem !important
    }

    .pt-lg-24,
    .py-lg-24 {
        padding-top: 1.5rem !important
    }

    .pr-lg-24,
    .px-lg-24 {
        padding-right: 1.5rem !important
    }

    .pb-lg-24,
    .py-lg-24 {
        padding-bottom: 1.5rem !important
    }

    .pl-lg-24,
    .px-lg-24 {
        padding-left: 1.5rem !important
    }

    .p-lg-32 {
        padding: 2rem !important
    }

    .pt-lg-32,
    .py-lg-32 {
        padding-top: 2rem !important
    }

    .pr-lg-32,
    .px-lg-32 {
        padding-right: 2rem !important
    }

    .pb-lg-32,
    .py-lg-32 {
        padding-bottom: 2rem !important
    }

    .pl-lg-32,
    .px-lg-32 {
        padding-left: 2rem !important
    }

    .p-lg-64 {
        padding: 4rem !important
    }

    .pt-lg-64,
    .py-lg-64 {
        padding-top: 4rem !important
    }

    .pr-lg-64,
    .px-lg-64 {
        padding-right: 4rem !important
    }

    .pb-lg-64,
    .py-lg-64 {
        padding-bottom: 4rem !important
    }

    .pl-lg-64,
    .px-lg-64 {
        padding-left: 4rem !important
    }

    .p-lg-80 {
        padding: 4.75rem !important
    }

    .pt-lg-80,
    .py-lg-80 {
        padding-top: 4.75rem !important
    }

    .pr-lg-80,
    .px-lg-80 {
        padding-right: 4.75rem !important
    }

    .pb-lg-80,
    .py-lg-80 {
        padding-bottom: 4.75rem !important
    }

    .pl-lg-80,
    .px-lg-80 {
        padding-left: 4.75rem !important
    }

    .m-lg-n2 {
        margin: -0.125rem !important
    }

    .mt-lg-n2,
    .my-lg-n2 {
        margin-top: -0.125rem !important
    }

    .mr-lg-n2,
    .mx-lg-n2 {
        margin-right: -0.125rem !important
    }

    .mb-lg-n2,
    .my-lg-n2 {
        margin-bottom: -0.125rem !important
    }

    .ml-lg-n2,
    .mx-lg-n2 {
        margin-left: -0.125rem !important
    }

    .m-lg-n4 {
        margin: -0.25rem !important
    }

    .mt-lg-n4,
    .my-lg-n4 {
        margin-top: -0.25rem !important
    }

    .mr-lg-n4,
    .mx-lg-n4 {
        margin-right: -0.25rem !important
    }

    .mb-lg-n4,
    .my-lg-n4 {
        margin-bottom: -0.25rem !important
    }

    .ml-lg-n4,
    .mx-lg-n4 {
        margin-left: -0.25rem !important
    }

    .m-lg-n8 {
        margin: -0.5rem !important
    }

    .mt-lg-n8,
    .my-lg-n8 {
        margin-top: -0.5rem !important
    }

    .mr-lg-n8,
    .mx-lg-n8 {
        margin-right: -0.5rem !important
    }

    .mb-lg-n8,
    .my-lg-n8 {
        margin-bottom: -0.5rem !important
    }

    .ml-lg-n8,
    .mx-lg-n8 {
        margin-left: -0.5rem !important
    }

    .m-lg-n12 {
        margin: -0.75rem !important
    }

    .mt-lg-n12,
    .my-lg-n12 {
        margin-top: -0.75rem !important
    }

    .mr-lg-n12,
    .mx-lg-n12 {
        margin-right: -0.75rem !important
    }

    .mb-lg-n12,
    .my-lg-n12 {
        margin-bottom: -0.75rem !important
    }

    .ml-lg-n12,
    .mx-lg-n12 {
        margin-left: -0.75rem !important
    }

    .m-lg-n16 {
        margin: -1rem !important
    }

    .mt-lg-n16,
    .my-lg-n16 {
        margin-top: -1rem !important
    }

    .mr-lg-n16,
    .mx-lg-n16 {
        margin-right: -1rem !important
    }

    .mb-lg-n16,
    .my-lg-n16 {
        margin-bottom: -1rem !important
    }

    .ml-lg-n16,
    .mx-lg-n16 {
        margin-left: -1rem !important
    }

    .m-lg-n24 {
        margin: -1.5rem !important
    }

    .mt-lg-n24,
    .my-lg-n24 {
        margin-top: -1.5rem !important
    }

    .mr-lg-n24,
    .mx-lg-n24 {
        margin-right: -1.5rem !important
    }

    .mb-lg-n24,
    .my-lg-n24 {
        margin-bottom: -1.5rem !important
    }

    .ml-lg-n24,
    .mx-lg-n24 {
        margin-left: -1.5rem !important
    }

    .m-lg-n32 {
        margin: -2rem !important
    }

    .mt-lg-n32,
    .my-lg-n32 {
        margin-top: -2rem !important
    }

    .mr-lg-n32,
    .mx-lg-n32 {
        margin-right: -2rem !important
    }

    .mb-lg-n32,
    .my-lg-n32 {
        margin-bottom: -2rem !important
    }

    .ml-lg-n32,
    .mx-lg-n32 {
        margin-left: -2rem !important
    }

    .m-lg-n64 {
        margin: -4rem !important
    }

    .mt-lg-n64,
    .my-lg-n64 {
        margin-top: -4rem !important
    }

    .mr-lg-n64,
    .mx-lg-n64 {
        margin-right: -4rem !important
    }

    .mb-lg-n64,
    .my-lg-n64 {
        margin-bottom: -4rem !important
    }

    .ml-lg-n64,
    .mx-lg-n64 {
        margin-left: -4rem !important
    }

    .m-lg-n80 {
        margin: -4.75rem !important
    }

    .mt-lg-n80,
    .my-lg-n80 {
        margin-top: -4.75rem !important
    }

    .mr-lg-n80,
    .mx-lg-n80 {
        margin-right: -4.75rem !important
    }

    .mb-lg-n80,
    .my-lg-n80 {
        margin-bottom: -4.75rem !important
    }

    .ml-lg-n80,
    .mx-lg-n80 {
        margin-left: -4.75rem !important
    }

    .m-lg-auto {
        margin: auto !important
    }

    .mt-lg-auto,
    .my-lg-auto {
        margin-top: auto !important
    }

    .mr-lg-auto,
    .mx-lg-auto {
        margin-right: auto !important
    }

    .mb-lg-auto,
    .my-lg-auto {
        margin-bottom: auto !important
    }

    .ml-lg-auto,
    .mx-lg-auto {
        margin-left: auto !important
    }
}

@media(min-width: 1280px) {
    .m-xl-0 {
        margin: 0 !important
    }

    .mt-xl-0,
    .my-xl-0 {
        margin-top: 0 !important
    }

    .mr-xl-0,
    .mx-xl-0 {
        margin-right: 0 !important
    }

    .mb-xl-0,
    .my-xl-0 {
        margin-bottom: 0 !important
    }

    .ml-xl-0,
    .mx-xl-0 {
        margin-left: 0 !important
    }

    .m-xl-2 {
        margin: .125rem !important
    }

    .mt-xl-2,
    .my-xl-2 {
        margin-top: .125rem !important
    }

    .mr-xl-2,
    .mx-xl-2 {
        margin-right: .125rem !important
    }

    .mb-xl-2,
    .my-xl-2 {
        margin-bottom: .125rem !important
    }

    .ml-xl-2,
    .mx-xl-2 {
        margin-left: .125rem !important
    }

    .m-xl-4 {
        margin: .25rem !important
    }

    .mt-xl-4,
    .my-xl-4 {
        margin-top: .25rem !important
    }

    .mr-xl-4,
    .mx-xl-4 {
        margin-right: .25rem !important
    }

    .mb-xl-4,
    .my-xl-4 {
        margin-bottom: .25rem !important
    }

    .ml-xl-4,
    .mx-xl-4 {
        margin-left: .25rem !important
    }

    .m-xl-8 {
        margin: .5rem !important
    }

    .mt-xl-8,
    .my-xl-8 {
        margin-top: .5rem !important
    }

    .mr-xl-8,
    .mx-xl-8 {
        margin-right: .5rem !important
    }

    .mb-xl-8,
    .my-xl-8 {
        margin-bottom: .5rem !important
    }

    .ml-xl-8,
    .mx-xl-8 {
        margin-left: .5rem !important
    }

    .m-xl-12 {
        margin: .75rem !important
    }

    .mt-xl-12,
    .my-xl-12 {
        margin-top: .75rem !important
    }

    .mr-xl-12,
    .mx-xl-12 {
        margin-right: .75rem !important
    }

    .mb-xl-12,
    .my-xl-12 {
        margin-bottom: .75rem !important
    }

    .ml-xl-12,
    .mx-xl-12 {
        margin-left: .75rem !important
    }

    .m-xl-16 {
        margin: 1rem !important
    }

    .mt-xl-16,
    .my-xl-16 {
        margin-top: 1rem !important
    }

    .mr-xl-16,
    .mx-xl-16 {
        margin-right: 1rem !important
    }

    .mb-xl-16,
    .my-xl-16 {
        margin-bottom: 1rem !important
    }

    .ml-xl-16,
    .mx-xl-16 {
        margin-left: 1rem !important
    }

    .m-xl-24 {
        margin: 1.5rem !important
    }

    .mt-xl-24,
    .my-xl-24 {
        margin-top: 1.5rem !important
    }

    .mr-xl-24,
    .mx-xl-24 {
        margin-right: 1.5rem !important
    }

    .mb-xl-24,
    .my-xl-24 {
        margin-bottom: 1.5rem !important
    }

    .ml-xl-24,
    .mx-xl-24 {
        margin-left: 1.5rem !important
    }

    .m-xl-32 {
        margin: 2rem !important
    }

    .mt-xl-32,
    .my-xl-32 {
        margin-top: 2rem !important
    }

    .mr-xl-32,
    .mx-xl-32 {
        margin-right: 2rem !important
    }

    .mb-xl-32,
    .my-xl-32 {
        margin-bottom: 2rem !important
    }

    .ml-xl-32,
    .mx-xl-32 {
        margin-left: 2rem !important
    }

    .m-xl-64 {
        margin: 4rem !important
    }

    .mt-xl-64,
    .my-xl-64 {
        margin-top: 4rem !important
    }

    .mr-xl-64,
    .mx-xl-64 {
        margin-right: 4rem !important
    }

    .mb-xl-64,
    .my-xl-64 {
        margin-bottom: 4rem !important
    }

    .ml-xl-64,
    .mx-xl-64 {
        margin-left: 4rem !important
    }

    .m-xl-80 {
        margin: 4.75rem !important
    }

    .mt-xl-80,
    .my-xl-80 {
        margin-top: 4.75rem !important
    }

    .mr-xl-80,
    .mx-xl-80 {
        margin-right: 4.75rem !important
    }

    .mb-xl-80,
    .my-xl-80 {
        margin-bottom: 4.75rem !important
    }

    .ml-xl-80,
    .mx-xl-80 {
        margin-left: 4.75rem !important
    }

    .p-xl-0 {
        padding: 0 !important
    }

    .pt-xl-0,
    .py-xl-0 {
        padding-top: 0 !important
    }

    .pr-xl-0,
    .px-xl-0 {
        padding-right: 0 !important
    }

    .pb-xl-0,
    .py-xl-0 {
        padding-bottom: 0 !important
    }

    .pl-xl-0,
    .px-xl-0 {
        padding-left: 0 !important
    }

    .p-xl-2 {
        padding: .125rem !important
    }

    .pt-xl-2,
    .py-xl-2 {
        padding-top: .125rem !important
    }

    .pr-xl-2,
    .px-xl-2 {
        padding-right: .125rem !important
    }

    .pb-xl-2,
    .py-xl-2 {
        padding-bottom: .125rem !important
    }

    .pl-xl-2,
    .px-xl-2 {
        padding-left: .125rem !important
    }

    .p-xl-4 {
        padding: .25rem !important
    }

    .pt-xl-4,
    .py-xl-4 {
        padding-top: .25rem !important
    }

    .pr-xl-4,
    .px-xl-4 {
        padding-right: .25rem !important
    }

    .pb-xl-4,
    .py-xl-4 {
        padding-bottom: .25rem !important
    }

    .pl-xl-4,
    .px-xl-4 {
        padding-left: .25rem !important
    }

    .p-xl-8 {
        padding: .5rem !important
    }

    .pt-xl-8,
    .py-xl-8 {
        padding-top: .5rem !important
    }

    .pr-xl-8,
    .px-xl-8 {
        padding-right: .5rem !important
    }

    .pb-xl-8,
    .py-xl-8 {
        padding-bottom: .5rem !important
    }

    .pl-xl-8,
    .px-xl-8 {
        padding-left: .5rem !important
    }

    .p-xl-12 {
        padding: .75rem !important
    }

    .pt-xl-12,
    .py-xl-12 {
        padding-top: .75rem !important
    }

    .pr-xl-12,
    .px-xl-12 {
        padding-right: .75rem !important
    }

    .pb-xl-12,
    .py-xl-12 {
        padding-bottom: .75rem !important
    }

    .pl-xl-12,
    .px-xl-12 {
        padding-left: .75rem !important
    }

    .p-xl-16 {
        padding: 1rem !important
    }

    .pt-xl-16,
    .py-xl-16 {
        padding-top: 1rem !important
    }

    .pr-xl-16,
    .px-xl-16 {
        padding-right: 1rem !important
    }

    .pb-xl-16,
    .py-xl-16 {
        padding-bottom: 1rem !important
    }

    .pl-xl-16,
    .px-xl-16 {
        padding-left: 1rem !important
    }

    .p-xl-24 {
        padding: 1.5rem !important
    }

    .pt-xl-24,
    .py-xl-24 {
        padding-top: 1.5rem !important
    }

    .pr-xl-24,
    .px-xl-24 {
        padding-right: 1.5rem !important
    }

    .pb-xl-24,
    .py-xl-24 {
        padding-bottom: 1.5rem !important
    }

    .pl-xl-24,
    .px-xl-24 {
        padding-left: 1.5rem !important
    }

    .p-xl-32 {
        padding: 2rem !important
    }

    .pt-xl-32,
    .py-xl-32 {
        padding-top: 2rem !important
    }

    .pr-xl-32,
    .px-xl-32 {
        padding-right: 2rem !important
    }

    .pb-xl-32,
    .py-xl-32 {
        padding-bottom: 2rem !important
    }

    .pl-xl-32,
    .px-xl-32 {
        padding-left: 2rem !important
    }

    .p-xl-64 {
        padding: 4rem !important
    }

    .pt-xl-64,
    .py-xl-64 {
        padding-top: 4rem !important
    }

    .pr-xl-64,
    .px-xl-64 {
        padding-right: 4rem !important
    }

    .pb-xl-64,
    .py-xl-64 {
        padding-bottom: 4rem !important
    }

    .pl-xl-64,
    .px-xl-64 {
        padding-left: 4rem !important
    }

    .p-xl-80 {
        padding: 4.75rem !important
    }

    .pt-xl-80,
    .py-xl-80 {
        padding-top: 4.75rem !important
    }

    .pr-xl-80,
    .px-xl-80 {
        padding-right: 4.75rem !important
    }

    .pb-xl-80,
    .py-xl-80 {
        padding-bottom: 4.75rem !important
    }

    .pl-xl-80,
    .px-xl-80 {
        padding-left: 4.75rem !important
    }

    .m-xl-n2 {
        margin: -0.125rem !important
    }

    .mt-xl-n2,
    .my-xl-n2 {
        margin-top: -0.125rem !important
    }

    .mr-xl-n2,
    .mx-xl-n2 {
        margin-right: -0.125rem !important
    }

    .mb-xl-n2,
    .my-xl-n2 {
        margin-bottom: -0.125rem !important
    }

    .ml-xl-n2,
    .mx-xl-n2 {
        margin-left: -0.125rem !important
    }

    .m-xl-n4 {
        margin: -0.25rem !important
    }

    .mt-xl-n4,
    .my-xl-n4 {
        margin-top: -0.25rem !important
    }

    .mr-xl-n4,
    .mx-xl-n4 {
        margin-right: -0.25rem !important
    }

    .mb-xl-n4,
    .my-xl-n4 {
        margin-bottom: -0.25rem !important
    }

    .ml-xl-n4,
    .mx-xl-n4 {
        margin-left: -0.25rem !important
    }

    .m-xl-n8 {
        margin: -0.5rem !important
    }

    .mt-xl-n8,
    .my-xl-n8 {
        margin-top: -0.5rem !important
    }

    .mr-xl-n8,
    .mx-xl-n8 {
        margin-right: -0.5rem !important
    }

    .mb-xl-n8,
    .my-xl-n8 {
        margin-bottom: -0.5rem !important
    }

    .ml-xl-n8,
    .mx-xl-n8 {
        margin-left: -0.5rem !important
    }

    .m-xl-n12 {
        margin: -0.75rem !important
    }

    .mt-xl-n12,
    .my-xl-n12 {
        margin-top: -0.75rem !important
    }

    .mr-xl-n12,
    .mx-xl-n12 {
        margin-right: -0.75rem !important
    }

    .mb-xl-n12,
    .my-xl-n12 {
        margin-bottom: -0.75rem !important
    }

    .ml-xl-n12,
    .mx-xl-n12 {
        margin-left: -0.75rem !important
    }

    .m-xl-n16 {
        margin: -1rem !important
    }

    .mt-xl-n16,
    .my-xl-n16 {
        margin-top: -1rem !important
    }

    .mr-xl-n16,
    .mx-xl-n16 {
        margin-right: -1rem !important
    }

    .mb-xl-n16,
    .my-xl-n16 {
        margin-bottom: -1rem !important
    }

    .ml-xl-n16,
    .mx-xl-n16 {
        margin-left: -1rem !important
    }

    .m-xl-n24 {
        margin: -1.5rem !important
    }

    .mt-xl-n24,
    .my-xl-n24 {
        margin-top: -1.5rem !important
    }

    .mr-xl-n24,
    .mx-xl-n24 {
        margin-right: -1.5rem !important
    }

    .mb-xl-n24,
    .my-xl-n24 {
        margin-bottom: -1.5rem !important
    }

    .ml-xl-n24,
    .mx-xl-n24 {
        margin-left: -1.5rem !important
    }

    .m-xl-n32 {
        margin: -2rem !important
    }

    .mt-xl-n32,
    .my-xl-n32 {
        margin-top: -2rem !important
    }

    .mr-xl-n32,
    .mx-xl-n32 {
        margin-right: -2rem !important
    }

    .mb-xl-n32,
    .my-xl-n32 {
        margin-bottom: -2rem !important
    }

    .ml-xl-n32,
    .mx-xl-n32 {
        margin-left: -2rem !important
    }

    .m-xl-n64 {
        margin: -4rem !important
    }

    .mt-xl-n64,
    .my-xl-n64 {
        margin-top: -4rem !important
    }

    .mr-xl-n64,
    .mx-xl-n64 {
        margin-right: -4rem !important
    }

    .mb-xl-n64,
    .my-xl-n64 {
        margin-bottom: -4rem !important
    }

    .ml-xl-n64,
    .mx-xl-n64 {
        margin-left: -4rem !important
    }

    .m-xl-n80 {
        margin: -4.75rem !important
    }

    .mt-xl-n80,
    .my-xl-n80 {
        margin-top: -4.75rem !important
    }

    .mr-xl-n80,
    .mx-xl-n80 {
        margin-right: -4.75rem !important
    }

    .mb-xl-n80,
    .my-xl-n80 {
        margin-bottom: -4.75rem !important
    }

    .ml-xl-n80,
    .mx-xl-n80 {
        margin-left: -4.75rem !important
    }

    .m-xl-auto {
        margin: auto !important
    }

    .mt-xl-auto,
    .my-xl-auto {
        margin-top: auto !important
    }

    .mr-xl-auto,
    .mx-xl-auto {
        margin-right: auto !important
    }

    .mb-xl-auto,
    .my-xl-auto {
        margin-bottom: auto !important
    }

    .ml-xl-auto,
    .mx-xl-auto {
        margin-left: auto !important
    }
}

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

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

    nav ul {
        list-style: none
    }

blockquote,
q {
    quotes: none
}

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

a {
    margin: 0;
    padding: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
    color:black;   
}

ins {
    background-color: #ff9;
    color: #000;
    text-decoration: none
}

mark {
    background-color: #ff9;
    color: #000;
    font-style: italic;
    font-weight: bold
}

abbr[title],
dfn[title] {
    border-bottom: 1px dotted;
    cursor: help
}

input,
select {
    vertical-align: middle
}

.ucla {
    clear: both;
    padding: 0px;
    margin: 0px
}

.campus::before,
.campus::after {
    content: "";
    display: table
}

.campus::after {
    clear: both
}

.campus {
    zoom: 1
}

.ucla.campus {
    display: block;
    position: relative;
    max-width: 1176px;
    margin: 0 auto;
    padding: 0 24px
}

@media(min-width: 1024px) {
    .ucla.campus {
        padding: 0 12px
    }
}

.col {
    display: block;
    float: left;
    margin: 0 0 0 1.6%
}

    .col:first-child {
        margin-left: 0
    }

@media only screen and (max-width: 768px) {
    .col {
        margin: 0
    }
}

.ucla.campus {
    display: block;
    position: relative;
    max-width: 1176px;
    margin: 0 auto;
    padding: 0 24px
}

@media(min-width: 1024px) {
    .ucla.campus {
        padding: 0 12px
    }
}

.ucla.campus .first-child.col {
    margin-left: 0
}

.ucla.campus .last-child.col {
    margin-left: 0
}

.span_2_of_2 {
    width: 100%
}

.span_1_of_2 {
    width: 49.2%
}

@media only screen and (max-width: 768px) {
    .span_2_of_2 {
        width: 100%
    }

    .span_1_of_2 {
        width: 100%
    }
}

.span_3_of_3 {
    width: 100%
}

.span_2_of_3 {
    width: 66.13%
}

.span_1_of_3 {
    width: 32.26%
}

@media only screen and (max-width: 768px) {
    .span_3_of_3 {
        width: 100%
    }

    .span_2_of_3 {
        width: 100%
    }

    .span_1_of_3 {
        width: 100%
    }
}

.span_4_of_4 {
    width: 100%
}

.span_3_of_4 {
    width: 74.6%
}

.span_2_of_4 {
    width: 49.2%
}

.span_1_of_4 {
    width: 23.8%
}

@media only screen and (max-width: 768px) {
    .span_4_of_4 {
        width: 100%
    }

    .span_3_of_4 {
        width: 100%
    }

    .span_2_of_4 {
        width: 100%
    }

    .span_1_of_4 {
        width: 100%
    }
}

.span_5_of_5 {
    width: 100%
}

.span_4_of_5 {
    width: 79.68%
}

.span_3_of_5 {
    width: 59.36%
}

.span_2_of_5 {
    width: 39.04%
}

.span_1_of_5 {
    width: 18.72%
}

@media only screen and (max-width: 768px) {
    .span_5_of_5 {
        width: 100%
    }

    .span_4_of_5 {
        width: 100%
    }

    .span_3_of_5 {
        width: 100%
    }

    .span_2_of_5 {
        width: 100%
    }

    .span_1_of_5 {
        width: 100%
    }
}

.span_6_of_6 {
    width: 100%
}

.span_5_of_6 {
    width: 83.06%
}

.span_4_of_6 {
    width: 66.13%
}

.span_3_of_6 {
    width: 49.2%
}

.span_2_of_6 {
    width: 32.26%
}

.span_1_of_6 {
    width: 15.33%
}

@media only screen and (max-width: 768px) {
    .span_6_of_6 {
        width: 100%
    }

    .span_5_of_6 {
        width: 100%
    }

    .span_4_of_6 {
        width: 100%
    }

    .span_3_of_6 {
        width: 100%
    }

    .span_2_of_6 {
        width: 100%
    }

    .span_1_of_6 {
        width: 100%
    }
}

.span_7_of_7 {
    width: 100%
}

.span_6_of_7 {
    width: 85.48%
}

.span_5_of_7 {
    width: 70.97%
}

.span_4_of_7 {
    width: 56.45%
}

.span_3_of_7 {
    width: 41.94%
}

.span_2_of_7 {
    width: 27.42%
}

.span_1_of_7 {
    width: 12.91%
}

@media only screen and (max-width: 768px) {
    .span_7_of_7 {
        width: 100%
    }

    .span_6_of_7 {
        width: 100%
    }

    .span_5_of_7 {
        width: 100%
    }

    .span_4_of_7 {
        width: 100%
    }

    .span_3_of_7 {
        width: 100%
    }

    .span_2_of_7 {
        width: 100%
    }

    .span_1_of_7 {
        width: 100%
    }
}

.span_8_of_8 {
    width: 100%
}

.span_7_of_8 {
    width: 87.3%
}

.span_6_of_8 {
    width: 74.6%
}

.span_5_of_8 {
    width: 61.9%
}

.span_4_of_8 {
    width: 49.2%
}

.span_3_of_8 {
    width: 36.5%
}

.span_2_of_8 {
    width: 23.8%
}

.span_1_of_8 {
    width: 11.1%
}

@media only screen and (max-width: 768px) {
    .span_8_of_8 {
        width: 100%
    }

    .span_7_of_8 {
        width: 100%
    }

    .span_6_of_8 {
        width: 100%
    }

    .span_5_of_8 {
        width: 100%
    }

    .span_4_of_8 {
        width: 100%
    }

    .span_3_of_8 {
        width: 100%
    }

    .span_2_of_8 {
        width: 100%
    }

    .span_1_of_8 {
        width: 100%
    }
}

.span_9_of_9 {
    width: 100%
}

.span_8_of_9 {
    width: 88.71%
}

.span_7_of_9 {
    width: 77.42%
}

.span_6_of_9 {
    width: 66.13%
}

.span_5_of_9 {
    width: 54.84%
}

.span_4_of_9 {
    width: 43.55%
}

.span_3_of_9 {
    width: 32.26%
}

.span_2_of_9 {
    width: 20.97%
}

.span_1_of_9 {
    width: 9.68%
}

@media only screen and (max-width: 768px) {
    .span_9_of_9 {
        width: 100%
    }

    .span_8_of_9 {
        width: 100%
    }

    .span_7_of_9 {
        width: 100%
    }

    .span_6_of_9 {
        width: 100%
    }

    .span_5_of_9 {
        width: 100%
    }

    .span_4_of_9 {
        width: 100%
    }

    .span_3_of_9 {
        width: 100%
    }

    .span_2_of_9 {
        width: 100%
    }

    .span_1_of_9 {
        width: 100%
    }
}

.span_10_of_10 {
    width: 100%
}

.span_9_of_10 {
    width: 89.84%
}

.span_8_of_10 {
    width: 79.68%
}

.span_7_of_10 {
    width: 69.52%
}

.span_6_of_10 {
    width: 59.36%
}

.span_5_of_10 {
    width: 49.2%
}

.span_4_of_10 {
    width: 39.04%
}

.span_3_of_10 {
    width: 28.88%
}

.span_2_of_10 {
    width: 18.72%
}

.span_1_of_10 {
    width: 8.56%
}

@media only screen and (max-width: 768px) {
    .span_10_of_10 {
        width: 100%
    }

    .span_9_of_10 {
        width: 100%
    }

    .span_8_of_10 {
        width: 100%
    }

    .span_7_of_10 {
        width: 100%
    }

    .span_6_of_10 {
        width: 100%
    }

    .span_5_of_10 {
        width: 100%
    }

    .span_4_of_10 {
        width: 100%
    }

    .span_3_of_10 {
        width: 100%
    }

    .span_2_of_10 {
        width: 100%
    }

    .span_1_of_10 {
        width: 100%
    }
}

.span_11_of_11 {
    width: 100%
}

.span_10_of_11 {
    width: 90.76%
}

.span_9_of_11 {
    width: 81.52%
}

.span_8_of_11 {
    width: 72.29%
}

.span_7_of_11 {
    width: 63.05%
}

.span_6_of_11 {
    width: 53.81%
}

.span_5_of_11 {
    width: 44.58%
}

.span_4_of_11 {
    width: 35.34%
}

.span_3_of_11 {
    width: 26.1%
}

.span_2_of_11 {
    width: 16.87%
}

.span_1_of_11 {
    width: 7.63%
}

@media only screen and (max-width: 768px) {
    .span_11_of_11 {
        width: 100%
    }

    .span_10_of_11 {
        width: 100%
    }

    .span_9_of_11 {
        width: 100%
    }

    .span_8_of_11 {
        width: 100%
    }

    .span_7_of_11 {
        width: 100%
    }

    .span_6_of_11 {
        width: 100%
    }

    .span_5_of_11 {
        width: 100%
    }

    .span_4_of_11 {
        width: 100%
    }

    .span_3_of_11 {
        width: 100%
    }

    .span_2_of_11 {
        width: 100%
    }

    .span_1_of_11 {
        width: 100%
    }
}

.span_12_of_12 {
    width: 100%
}

.span_11_of_12 {
    width: 91.53%
}

.span_10_of_12 {
    width: 83.06%
}

.span_9_of_12 {
    width: 74.6%
}

.span_8_of_12 {
    width: 66.13%
}

.span_7_of_12 {
    width: 57.66%
}

.span_6_of_12 {
    width: 49.2%
}

.span_5_of_12 {
    width: 40.73%
}

.span_4_of_12 {
    width: 32.26%
}

.span_3_of_12 {
    width: 23.8%
}

.span_2_of_12 {
    width: 15.33%
}

.span_1_of_12 {
    width: 6.86%
}

@media only screen and (max-width: 768px) {
    .span_12_of_12 {
        width: 100%
    }

    .span_11_of_12 {
        width: 100%
    }

    .span_10_of_12 {
        width: 100%
    }

    .span_9_of_12 {
        width: 100%
    }

    .span_8_of_12 {
        width: 100%
    }

    .span_7_of_12 {
        width: 100%
    }

    .span_6_of_12 {
        width: 100%
    }

    .span_5_of_12 {
        width: 100%
    }

    .span_4_of_12 {
        width: 100%
    }

    .span_3_of_12 {
        width: 100%
    }

    .span_2_of_12 {
        width: 100%
    }

    .span_1_of_12 {
        width: 100%
    }
}

h1,
h2,
h3,
h4,
h5,
h6 {
    color: #2774AE;
    font-weight: bold;
    font-family: "Helvetica", "Arial", sans-serif;
    padding-bottom: 16px
}

h1,
.h1 {
    font-size: 36px;
    line-height: 40.5px;
    font-weight: bold
}

@media(min-width: 768px) {
    h1,
    .h1 {
        font-size: 48px;
        line-height: 54px
    }
}

h2,
.h2 {
    font-size: 28px;
    line-height: 32px;
    font-weight: bold
}

@media(min-width: 768px) {
    h2,
    .h2 {
        font-size: 36px;
        line-height: 40.5px
    }
}

h3,
.h3 {
    font-size: 24px;
    line-height: 27px;
    font-weight: bold
}

h4,
.h4 {
    font-size: 20px;
    line-height: 22.5px;
    font-weight: bold
}

h5,
.h5 {
    font-size: 16px;
    line-height: 20px;
    font-weight: bold
}

h6,
.h6 {
    font-size: 12.8px;
    line-height: 16px;
    font-weight: bold
}

p {
    font-size: 16px;
    line-height: 24px;
    color: var(--greyeighty);
    padding-bottom: 16px
}

    p strong {
        font-size: bold
    }

    p small {
        font-size: 12.8px;
        line-height: 16px
    }

    p em {
        font-style: italic
    }

.lead {
    font-size: 1.5rem;
    line-height: 2rem
}

.body-copy-small {
    font-size: .75rem;
    line-height: 1.125rem;
    color: #333
}

.right-align {
    text-align: right
}

.left-align {
    text-align: left
}

.center-align {
    text-align: center
}

.mark-text {
    background: #fff0a5
}

.insert-text {
    background: #daebfe
}

.has-white-text {
    color: #fff
}

    .has-white-text > h1,
    .has-white-text h2,
    .has-white-text h3,
    .has-white-text h4,
    .has-white-text h5,
    .has-white-text h6,
    .has-white-text p,
    .has-white-text span,
    .has-white-text tr th,
    .has-white-text dt,
    .has-white-text li::before,
    .has-white-text .stat-tout__label,
    .has-white-text .stat-tout__number,
    .has-white-text .stat-tout__source {
        color: #fff
    }

    .has-white-text > div > h1,
    .has-white-text > div h2,
    .has-white-text > div h3,
    .has-white-text > div h4,
    .has-white-text > div h5,
    .has-white-text > div h6,
    .has-white-text > div p,
    .has-white-text > div span,
    .has-white-text > div tr th,
    .has-white-text > div dt,
    .has-white-text > div li::before,
    .has-white-text > div .stat-tout__label,
    .has-white-text > div .stat-tout__number,
    .has-white-text > div .stat-tout__source,
    .has-white-text > aside > h1,
    .has-white-text > aside h2,
    .has-white-text > aside h3,
    .has-white-text > aside h4,
    .has-white-text > aside h5,
    .has-white-text > aside h6,
    .has-white-text > aside p,
    .has-white-text > aside span,
    .has-white-text > aside tr th,
    .has-white-text > aside dt,
    .has-white-text > aside li::before,
    .has-white-text > aside .stat-tout__label,
    .has-white-text > aside .stat-tout__number,
    .has-white-text > aside .stat-tout__source {
        color: #fff
    }

.has-background-grey-40 {
    background: #999
}

.has-background-lightest-grey-2 {
    background: #ebebeb
}

.has-background-light-grey {
    background: #e7e7e8
}

.has-background-ucla-blue {
    background: #2774ae
}

.has-background-white {
    background: #fff
}

.alert {
    padding: 16px 16px 16px 16px;
    border-width: 4px;
    border-style: solid;
    line-height: 24px
}

    .alert img {
        float: left;
        width: 24px;
        height: 24px;
        margin-right: 8px
    }

    .alert figcaption {
        display: flex
    }

.alert--primary {
    border-color: #8bb8e8
}

.alert--secondary {
    border-color: #979797
}

.alert--success {
    border-color: #007339
}

.alert--error {
    border-color: #d60000
}

.alert--warning {
    border-color: #f57f17
}

.accordion {
    display: block;
    padding: 0px 22px 0px;
}

.accordion__title {
    border: 0;
    border-top: 1px solid #e5e5e5;
    width: 100%;
    text-align: left;
    color: #00598c;
    font-size: 1rem;
    line-height: 24px;
    font-weight: bold;
    position: relative;
    -moz-appearance: none;
    -webkit-appearance: none;
    background: rgba(0, 0, 0, 0);
    margin-top: 1px;
    padding: 8px 32px 8px 16px
}


    .accordion__title:hover,
    .accordion__title.active {
        background: #0079bf;
        color: #fff;
        cursor: pointer
    }

        .accordion__title:hover::after,
        .accordion__title.active::after {
            background: url("/img/icons/arrow-down-white.svg");
            background-position: center;
            background-size: contain;
            position: absolute;
            right: 16px;
            top: 8px;
            width: 24px;
            height: 24px
        }

@media(min-width: 768px) {
    .accordion__title:hover::after,
    .accordion__title.active::after {
        right: 16px;
        top: 16px;
        width: 32px;
        height: 32px
    }
}

.accordion__title.active::after {
    -moz-transform: scaleY(-1);
    -o-transform: scaleY(-1);
    -webkit-transform: scaleY(-1);
    transform: scaleY(-1)
}

.accordion__title::after {
    display: block;
    content: "";
    background: url("/img/icons/arrow-down-defaultblue.svg");
    background-position: center;
    background-size: contain;
    position: absolute;
    right: 16px;
    top: 8px;
    width: 24px;
    height: 24px
}

@media(min-width: 768px) {
    .accordion__title {
        font-size: 24px;
        padding: 22px 64px 18px 16px
    }

        .accordion__title::after {
            background-size: contain;
            right: 16px;
            top: 16px;
            width: 32px;
            height: 32px
        }
}

.accordion__title:last-of-type {
    border-bottom: none
}

.accordion__content {
    display: none;
    padding: 16px;
    padding-bottom: 32px
}

    .accordion__content.show-me {
        display: block
    }

.accordion.accordion-last::after {
    content: "";
    display: block;
    border-bottom: 1px solid #e5e5e5
}

.load-more.btn {
    border: 2px solid #00598c;
    background: #fff;
    padding: 12px 16px 8px;
    font-size: 1rem;
    line-height: 1.25rem;
    color: #00598c
}

    .load-more.btn:hover {
        background: #0079bf;
        border-color: #0079bf;
        color: #fff
    }

    .load-more.btn:focus {
        background: #0079bf;
        border-color: #0079bf;
        color: #fff;
        outline: 1px dotted #0079bf;
        outline-offset: 2px
    }

    .load-more.btn:active {
        background: #003b5c;
        border-color: #003b5c;
        color: #fff
    }

.blockquote-wrapper .blockquote {
    display: block;
    border-left: 4px solid #2774ae;
    padding: 0 0 0 32px;
    margin: 24px 24px 0
}

.blockquote-wrapper .blockquote__quote {
    font-size: 16px;
    line-height: 24px;
    display: block;
    margin-bottom: 16px;
    color: #333
}

.blockquote-wrapper .blockquote__citation {
    font-size: 16px;
    line-height: 24px;
    display: block;
    color: #666;
    max-width: 212px
}

@media(min-width: 768px) {
    .blockquote-wrapper .blockquote__citation {
        max-width: 312px
    }
}

@media only screen and (min-width: 768px) {
    .blockquote-wrapper .blockquote {
        width: calc((100%/2) - (24px/2));
        float: left;
        margin-right: 24px
    }

        .blockquote-wrapper .blockquote:nth-child(2n) {
            margin-right: 0
        }
}

@media only screen and (min-width: 1024px) {
    .blockquote-wrapper .blockquote {
        width: calc((100%/3) - (48px/3));
        float: left;
        margin-right: 24px
    }

        .blockquote-wrapper .blockquote:nth-child(2n) {
            margin-right: 24px
        }

        .blockquote-wrapper .blockquote:nth-child(3n) {
            margin-right: 0
        }
}

.btn {
    padding: 12px 16px 8px;
    font-size: 16px;
    font-weight: bold;
    border-radius: 2px;
    border: 2px solid transparent;
    line-height: 1.25;
    cursor: pointer;
    display: flex;
    text-decoration: none
}


    .btn:disabled {
        cursor: not-allowed
    }

    .btn.icon--play::before {
        flex-shrink: 0;
        content: "";
        width: 24px;
        height: 24px;
        vertical-align: middle;
        margin-right: 8px;
        margin-left: -8px;
        background: url("https://s3.us-west-1.amazonaws.com/webcomponents.ucla.edu/img/icons/denotive/play--white.svg");
        background-size: contain;
        background-position: 0 -1px
    }

    .btn.icon--link::after {
        flex-shrink: 0;
        content: "";
        width: 24px;
        height: 24px;
        vertical-align: middle;
        margin-left: 8px;
        margin-right: -8px;
        background: url("https://s3.us-west-1.amazonaws.com/webcomponents.ucla.edu/img/icons/denotive/external-link--white.svg");
        background-size: contain;
        background-position: 0 -1px
    }

.btn--lightbg {
    background: #00598c;
    color: #fff
}

    .btn--lightbg:visited {
        background: #00598c;
        color: #fff
    }

    .btn--lightbg:hover {
        background: #0079bf
    }

/*    .btn--lightbg:focus {
        background: #0079bf;
        outline: 1px dotted #0079bf;
        outline-offset: 2px
    }*/

/*    .btn--lightbg:active {
        background: #003b5c;
        outline: none
    }
*/
    .btn--lightbg:disabled {
        background: #757575;
        color: #fff
    }

.btn--darkbg {
    color: #000;
    background: #ffd100
}

    .btn--darkbg:visited {
        color: #000;
        background: #ffd100
    }

    .btn--darkbg:hover {
        background: #ffe500;
        color: #000
    }

    .btn--darkbg:focus {
        background: #ffe500;
        outline: 1px dotted #fff;
        outline-offset: 2px
    }

/*    .btn--darkbg:active {
        background: #ffbf0f;
        outline: none
    }*/

    .btn--darkbg:disabled {
        background: #e5e5e5
    }

    .btn--darkbg.icon--play::before {
        background: url("https://s3.us-west-1.amazonaws.com/webcomponents.ucla.edu/img/icons/denotive/play--black.svg");
        background-size: contain;
        background-position: 0 -1px
    }

    .btn--darkbg.icon--link::after {
        background: url("https://s3.us-west-1.amazonaws.com/webcomponents.ucla.edu/img/icons/denotive/external-link--black.svg");
        background-size: contain;
        background-position: 0 -1px
    }

.btn--secondary--lightbg {
    background: transparent;
    color: #00598c;
    border: 2px solid #00598c
}

    .btn--secondary--lightbg.icon--play:hover::before,
    .btn--secondary--lightbg.icon--play:focus::before {
        background: url("https://s3.us-west-1.amazonaws.com/webcomponents.ucla.edu/img/icons/denotive/play--white.svg");
        background-size: contain;
        background-position: 0 -1px
    }

    .btn--secondary--lightbg.icon--play::before {
        background: url("https://s3.us-west-1.amazonaws.com/webcomponents.ucla.edu/img/icons/denotive/play--blue.svg");
        background-size: contain;
        background-position: 0 -1px
    }

    .btn--secondary--lightbg.icon--link:hover::after,
    .btn--secondary--lightbg.icon--link:focus::after {
        background: url("https://s3.us-west-1.amazonaws.com/webcomponents.ucla.edu/img/icons/denotive/external-link--white.svg");
        background-size: contain;
        background-position: 0 -1px
    }

    .btn--secondary--lightbg.icon--link::after {
        background: url("https://s3.us-west-1.amazonaws.com/webcomponents.ucla.edu/img/icons/denotive/external-link--blue.svg");
        background-size: contain;
        background-position: 0 -1px
    }

    .btn--secondary--lightbg:visited {
        background: transparent;
        color: #00598c;
        border: 2px solid #00598c
    }

    .btn--secondary--lightbg:hover {
        background: #0079bf;
        border-color: #0079bf;
        color: #fff !important;
    }

    .btn--secondary--lightbg:hover a{
        color: #fff !important;
    }

/*    .btn--secondary--lightbg:focus {
        background: #0079bf;
        border-color: transparent;
        outline: 1px dotted #0079bf;
        outline-offset: 2px;
        color: #fff
    }*/

/*    .btn--secondary--lightbg:active {
        background: #003b5c;
        color: #fff
    }*/

    .btn--secondary--lightbg:disabled {
        border-color: #757575;
        color: #757575;
        background: #fff
    }

.btn--secondary--darkbg {
    background: transparent;
    color: #fff;
    border: 2px solid #fff
}

    .btn--secondary--darkbg.icon--play:hover::before,
    .btn--secondary--darkbg.icon--play:focus::before {
        background: url("https://s3.us-west-1.amazonaws.com/webcomponents.ucla.edu/img/icons/denotive/play--black.svg");
        background-size: contain;
        background-position: 0 -1px
    }

    .btn--secondary--darkbg.icon--play::before {
        background: url("https://s3.us-west-1.amazonaws.com/webcomponents.ucla.edu/img/icons/denotive/play--white.svg");
        background-size: contain;
        background-position: 0 -1px
    }

    .btn--secondary--darkbg.icon--link:hover::after,
    .btn--secondary--darkbg.icon--link:focus::after {
        background: url("https://s3.us-west-1.amazonaws.com/webcomponents.ucla.edu/img/icons/denotive/external-link--black.svg");
        background-size: contain;
        background-position: 0 -1px
    }

    .btn--secondary--darkbg.icon--link::after {
        background: url("https://s3.us-west-1.amazonaws.com/webcomponents.ucla.edu/img/icons/denotive/external-link--white.svg");
        background-size: contain;
        background-position: 0 -1px
    }

    .btn--secondary--darkbg:visited {
        background: transparent;
        color: #fff;
        border: 2px solid #fff
    }

    .btn--secondary--darkbg:hover {
        background: #ffe500;
        border-color: #ffe500;
        color: #000
    }

    .btn--secondary--darkbg:focus {
        background: #ffe500;
        border-color: transparent;
        outline: 1px dotted #fff;
        outline-offset: 2px;
        color: #000
    }

/*    .btn--secondary--darkbg:active {
        background: #ffbf0f;
        color: #000;
        border: 2px solid #ffbf0f
    }*/

    .btn--secondary--darkbg:disabled {
        color: #e5e5e5;
        background: transparent;
        border-color: #e5e5e5
    }

.btn--tertiary {
    background: transparent;
    color: #00598c
}

    .btn--tertiary.icon--play:hover::before,
    .btn--tertiary.icon--play:focus::before {
        background: url("https://s3.us-west-1.amazonaws.com/webcomponents.ucla.edu/img/icons/denotive/play--white.svg");
        background-size: contain;
        background-position: 0 -1px
    }

    .btn--tertiary.icon--play::before {
        background: url("https://s3.us-west-1.amazonaws.com/webcomponents.ucla.edu/img/icons/denotive/play--blue.svg");
        background-size: contain;
        background-position: 0 -1px
    }

    .btn--tertiary:visited {
        background: transparent;
        color: #00598c
    }

    .btn--tertiary:hover {
        background: #0079bf;
        color: #fff
    }

/*    .btn--tertiary:focus {
        background: #0079bf;
        outline: 1px dotted #0079bf;
        outline-offset: 2px;
        color: #fff
    }*/

/*    .btn--tertiary:active {
        background: #003b5c;
        color: #fff;
        outline: none
    }*/

    .btn--tertiary:disabled {
        color: #757575;
        background: transparent
    }

    .btn--tertiary.icon--play:hover::before,
    .btn--tertiary.icon--play:focus::before {
        background: url("https://s3.us-west-1.amazonaws.com/webcomponents.ucla.edu/img/icons/denotive/play--white.svg");
        background-size: contain;
        background-position: 0 -1px
    }

    .btn--tertiary.icon--play::before {
        background: url("https://s3.us-west-1.amazonaws.com/webcomponents.ucla.edu/img/icons/denotive/play--blue.svg");
        background-size: contain;
        background-position: 0 -1px
    }

    .btn--tertiary.icon--link:hover::after,
    .btn--tertiary.icon--link:focus::after {
        background: url("https://s3.us-west-1.amazonaws.com/webcomponents.ucla.edu/img/icons/denotive/external-link--white.svg");
        background-size: contain;
        background-position: 0 -1px
    }

    .btn--tertiary.icon--link::after {
        background: url("https://s3.us-west-1.amazonaws.com/webcomponents.ucla.edu/img/icons/denotive/external-link--blue.svg");
        background-size: contain;
        background-position: 0 -1px
    }

.btn--group {
    background: transparent;
    display: flex;
    justify-content: center;
    gap: 2px;
    margin-bottom: 2px
}

.btn--group-left,
.btn--group-center,
.btn--group-right {
    background: #fff;
    color: #00598c;
    border: 2px solid #00598c;
    border-radius: 0px
}

    .btn--group-left:visited,
    .btn--group-center:visited,
    .btn--group-right:visited {
        background: #fff;
        color: #00598c;
        border: 2px solid #00598c
    }

    .btn--group-left:hover,
    .btn--group-center:hover,
    .btn--group-right:hover {
        color: #fff;
        border-color: #0079bf;
        background: #0079bf
    }

    .btn--group-left:focus,
    .btn--group-center:focus,
    .btn--group-right:focus {
        color: #fff;
        border-color: #0079bf;
        background: #0079bf;
        outline: 1px dotted #0079bf;
        outline-offset: 2px
    }

/*    .btn--group-left:active,
    .btn--group-center:active,
    .btn--group-right:active {
        color: #fff;
        background: #003b5c;
        border-color: #003b5c;
        outline: none
    }
*/
    .btn--group-left:disabled,
    .btn--group-center:disabled,
    .btn--group-right:disabled {
        background: #757575;
        border-color: #757575;
        color: #fff
    }

.btn--group-left {
    border-top-left-radius: 2px;
    border-bottom-left-radius: 2px
}

.btn--group-right {
    border-top-right-radius: 2px;
    border-bottom-right-radius: 2px
}

.pagination,
.pagination--boxed {
    padding-inline-start: 0;
    display: flex;
    gap: 2px
}

    .pagination li::before,
    .pagination--boxed li::before {
        content: none
    }

    .pagination li,
    .pagination--boxed li {
        display: inline
    }

        .pagination li .page,
        .pagination--boxed li .page {
            text-decoration: none;
            padding: 7px 12px;
            border-width: 2px;
            border-style: solid;
            border-color: transparent;
            color: #00598c;
            background: #fff
        }

            .pagination li .page:visited,
            .pagination--boxed li .page:visited {
                color: #00598c;
                background: #fff
            }

            .pagination li .page:hover,
            .pagination--boxed li .page:hover {
                color: #fff;
                background: #0079bf;
                border-color: #0079bf
            }

            .pagination li .page:focus,
            .pagination--boxed li .page:focus {
                background: #0079bf;
                border-color: #0079bf;
                outline: 1px dotted #0079bf;
                outline-offset: 2px;
                color: #fff
            }

/*            .pagination li .page:active,
            .pagination--boxed li .page:active {
                background: #003b5c;
                border-color: #003b5c;
                color: #fff;
                outline: none
            }*/

        .pagination li .page--current,
        .pagination--boxed li .page--current {
            color: #757575
        }

            .pagination li .page--current:visited,
            .pagination--boxed li .page--current:visited {
                color: #757575;
                border-color: #757575
            }

            .pagination li .page--current:hover,
            .pagination--boxed li .page--current:hover {
                color: #fff;
                border-color: #0079bf
            }

/*            .pagination li .page--current:focus,
            .pagination--boxed li .page--current:focus {
                color: #fff
            }*/

            .pagination li .page--current:active,
            .pagination--boxed li .page--current:active {
                border-color: #003b5c
            }

        .pagination--boxed li .page {
            padding: 7px 12px;
            border-width: 2px;
            border-style: solid;
            border-color: #00598c
        }

.basic-card,
.basic-card-grey,
.basic-card-gray {
    display: inline-block;
    background: #fff;
    margin: 32px 2% 0 0;
    vertical-align: top
}

@media only screen and (min-width: 600px) {
    .basic-card,
    .basic-card-grey,
    .basic-card-gray {
        max-width: 376px;
        margin: 32px 2% 0 0
    }
}

.basic-card__image,
.basic-card-grey__image,
.basic-card-gray__image {
    display: block;
    width: 100%;
    height: auto
}

@media only screen and (min-width: 600px) {
    .basic-card__image,
    .basic-card-grey__image,
    .basic-card-gray__image {
        max-width: 376px;
        max-height: 250px
    }
}

.basic-card__title,
.basic-card-grey__title,
.basic-card-gray__title {
    font-size: 24px;
    font-weight: bold;
    line-height: 27px
}

.basic-card__info-wrapper,
.basic-card-grey__info-wrapper,
.basic-card-gray__info-wrapper {
    padding: 32px
}

.basic-card__description,
.basic-card-grey__description,
.basic-card-gray__description {
    font-size: 16px;
    line-height: 24px;
    color: #333;
    max-height: 300px
}

    .basic-card__description:last-child,
    .basic-card-grey__description:last-child,
    .basic-card-gray__description:last-child {
        margin-bottom: 0px
    }

.basic-card__buttons,
.basic-card-grey__buttons,
.basic-card-gray__buttons {
    margin: 0 auto;
    display: grid;
    grid-gap: 4px;
    justify-items: start;
    margin-left: -8px
}

.basic-card-grey > .basic-card__info-wrapper,
.basic-card-gray > .basic-card__info-wrapper {
    background: #f2f2f2
}

.event-card {
    width: 100%;
    height: auto;
    margin: 16px 0 0;
    display: inline-block;
    position: relative;
    background: #fff;
    vertical-align: top
}

@media only screen and (min-width: 600px) {
    .event-card {
        max-width: 276px;
        margin: 40px 2% 0 0
    }
}

.event-card:focus {
    outline: 1px dotted #0079bf
}

.event-card__image {
    width: 100%;
    height: auto
}

@media only screen and (min-width: 600px) {
    .event-card__image {
        max-width: 276px;
        max-height: 184px
    }
}

.event-card__link {
    text-decoration: none
}

    .event-card__link span:hover {
        background-color: #0079bf;
        color: #fff;
        text-decoration: none
    }

    .event-card__link:focus {
        outline: 1px dotted #0079bf
    }

    .event-card__link:hover {
        color: #00598c;
        background-color: transparent
    }

        .event-card__link:hover:visited {
            background-color: #5223b0;
            color: #5223b0;
            text-decoration: none
        }

    .event-card__link:focus span,
    .event-card__link:active span {
        color: #fff;
        outline: 1px dotted #0079bf;
        background-color: #003b5c
    }

.event-card__title {
    color: #00598c;
    margin: 24px 24px 0;
    font-size: 20px;
    font-weight: bold;
    line-height: 22.5px
}

.event-card-icon__time {
    display: inline-block;
    content: "";
    background: url(/img/icons/time-grey60.svg);
    background-size: contain;
    width: 16px;
    height: 16px;
    margin-bottom: -1.5px;
    margin-left: 1px;
    margin-right: 6px;
    vertical-align: bottom
}

.event-card-icon__play {
    display: inline-block;
    content: "";
    background: url(/img/icons/play-grey.svg);
    background-size: contain;
    width: 15px;
    height: 15px;
    margin-bottom: 0px;
    margin-left: 1.25px;
    margin-right: 6px;
    vertical-align: bottom
}

.event-card-info {
    display: block;
    padding: 8px 24px 24px 24px;
    background: #fff
}

.event-card-info__date {
    position: absolute;
    display: block;
    max-width: 100px;
    height: 44px;
    padding: 8px 12px;
    background: #ffd100;
    color: #333;
    font-weight: bold;
    top: 0;
    left: 0
}

    .event-card-info__date .small-block {
        margin-top: 9px;
        display: inline-block
    }

.event-card-info__day,
.event-card-info__month {
    display: block;
    font-size: .75rem;
    text-transform: uppercase
}

.event-card-info__month {
    padding-top: 4px
}

.event-card-info__number {
    display: inline-block;
    font-size: 2.25rem
}

.event-card-info__time,
.event-card-info__location {
    margin-bottom: 8px;
    font-size: 12.8px;
    font-weight: bold;
    color: #666
}

    .event-card-info__time img,
    .event-card-info__location img {
        display: inline;
        margin-bottom: 3px;
        margin-left: 2px;
        margin-right: 6px;
        vertical-align: middle
    }

.event-card-info__description {
    margin-bottom: 8px;
    font-size: 16px;
    line-height: 24px;
    color: #333;
    max-height: 300px
}

    .event-card-info__description:last-child {
        margin-bottom: 0px
    }

.event-card:first-child {
    margin-top: 0px
}

@media only screen and (min-width: 600px) {
    .event-card:first-child {
        margin-top: 40px
    }
}

.story {
    margin-bottom: 0;
    padding: 0 10px
}

@media(min-width: 1280px) {
    .story {
        width: 100%;
        max-width: 1200px;
        margin: 0 auto;
        padding: 0 10px
    }
}

.story__featured {
    float: left
}

@media(min-width: 1024px) {
    .story__featured {
        position: relative;
        width: 100%
    }
}

.story__featured-card {
    min-height: 540px
}

@media(min-width: 1280px) {
    .story__featured-card {
        width: 100%;
        margin-bottom: 0
    }
}

.story__featured-content {
    margin: 0 25px;
    padding: 32px;
    position: relative;
    top: -24px;
    background-color: #fff
}

@media(min-width: 1024px) {
    .story__featured-content {
        margin: 0;
        width: 576px;
        position: absolute
    }
}

@media(min-width: 1024px) {
    .story__featured-content {
        transform: translateY(100%)
    }
}

.story__featured-image {
    width: 100%;
    height: auto
}

@media(min-width: 1024px) {
    .story__featured-image {
        width: 776px;
        height: 517px;
        float: right
    }
}

.story__featured-title {
    font-size: 2.25rem;
    line-height: 1.125;
    margin-bottom: 16px
}

    .story__featured-title > .link {
        color: #00598c;
        text-decoration: none
    }

.story__featured-blurb {
    margin: 0 0 16px;
    line-height: 1.5
}

.story__featured-source {
    line-height: 1.25rem;
    font-weight: bold;
    line-height: 1.25
}

    .story__featured-source > .link {
        color: #00598c;
        text-decoration: none
    }

        .story__featured-source > .link:hover {
            background-color: #0079bf;
            color: #fff;
            text-decoration: none
        }

        .story__featured-source > .link:active {
            background-color: #003b5c;
            color: #fff;
            text-decoration: none
        }

        .story__featured-source > .link:focus {
            background-color: #0079bf;
            color: #fff;
            text-decoration: none
        }

.story__secondary {
    margin: 0 24px
}

@media(min-width: 768px) {
    .story__secondary {
        margin: 0 auto
    }
}

@media(min-width: 1024px) {
    .story__secondary {
        padding-top: 24px
    }
}

.story__secondary-card,
.story__secondary-card-grey {
    position: relative;
    margin: 0 24px 24px 0;
    padding-left: 0px;
    display: inline-block;
    vertical-align: top
}

@media(min-width: 768px) {
    .story__secondary-card,
    .story__secondary-card-grey {
        padding-left: 38px
    }
}

@media(min-width: 1024px) {
    .story__secondary-card,
    .story__secondary-card-grey {
        padding-left: 0px;
        min-height: 540px;
        width: calc((100% - 58px)/3)
    }
}

@media(max-width: 1023.98px) {
    .story__secondary-card,
    .story__secondary-card-grey {
        width: 100%;
        margin: 0;
        padding: 12px 24px
    }
}

@media(min-width: 1024px) {
    .story__secondary-card:nth-child(3n),
    .story__secondary-card-grey:nth-child(3n) {
        margin-right: 0
    }
}

.story__secondary-card a,
.story__secondary-card-grey a {
    outline: none
}

    .story__secondary-card a:focus .story__secondary-title-text,
    .story__secondary-card-grey a:focus .story__secondary-title-text {
        outline: auto;
        outline-style: dotted;
        outline-width: thin
    }

.story__secondary-card-grey,
.story__secondary-card-gray {
    background: #f2f2f2
}

    .story__secondary-card-grey > a > .story__secondary-title,
    .story__secondary-card-gray > a > .story__secondary-title {
        background: #f2f2f2
    }

.story__secondary-content {
    box-sizing: border-box;
    width: 100%
}

@media(max-width: 767.98px) {
    .story__secondary-content {
        float: left;
        width: 61%
    }
}

@media(min-width: 767.98px)and (max-width: 1023.98px) {
    .story__secondary-content {
        float: left;
        width: 65%
    }
}

@media(min-width: 1024px) {
    .story__secondary-content {
        padding: 0 32px 0
    }
}

.story__secondary a {
    text-decoration: none
}

.story__secondary-image {
    height: auto;
    width: 100%;
    max-width: 72px
}

@media(min-width: 768px) {
    .story__secondary-image {
        margin-bottom: 28px;
        max-width: 168px;
        margin-bottom: 29px
    }
}

@media(min-width: 1024px) {
    .story__secondary-image {
        max-width: 376px;
        max-height: 282px;
        min-width: 100%;
        margin-bottom: 0
    }
}

.story__secondary-image-wrapper {
    margin-right: 12px;
    max-width: 377px;
    float: left
}

@media(min-width: 768px) {
    .story__secondary-image-wrapper {
        display: block;
        margin-right: 40px
    }
}

@media(min-width: 1024px) {
    .story__secondary-image-wrapper {
        float: none;
        width: 100%;
        min-width: 100%
    }
}

.story__secondary-title {
    font-size: 1rem;
    line-height: 1.125rem;
    color: #00598c;
    margin: 0 16px;
    outline: none
}

@media(max-width: 767.98px) {
    .story__secondary-title {
        margin: 0;
        width: 100%
    }
}

@media(min-width: 768px) {
    .story__secondary-title {
        font-size: 1.5rem;
        line-height: 1.6875rem;
        padding-right: 24px
    }
}

@media(min-width: 1024px) {
    .story__secondary-title {
        padding: 16px;
        background: #fff;
        position: relative;
        bottom: 16px
    }
}

.story__secondary-title-text:link {
    color: #00598c
}

.story__secondary-title-text:focus {
    color: #0079bf;
    outline: 1px dotted #0079bf
}

.story__secondary-title-text:hover {
    background-color: #0079bf
}

.story__secondary-title-text:hover,
.story__secondary-title-text:active {
    color: #fff;
    text-decoration: none
}

.story__secondary-title-text:active {
    background-color: #003b5c;
    color: #fff;
    outline: none
}

.story__secondary-title-text:visited {
    color: #5223b0
}

    .story__secondary-title-text:visited:hover {
        color: #fff
    }

@media(min-width: 1024px) {
    .story__secondary-title-text {
        top: 24px
    }
}

.story__secondary-blurb {
    font-size: .8rem;
    line-height: 1rem;
    margin: 12px 0
}

@media(min-width: 768px) {
    .story__secondary-blurb {
        font-size: 1rem;
        line-height: 1.5rem;
        margin-top: 0;
        margin-bottom: 24px
    }
}

.story__secondary-source {
    font-size: .8rem;
    line-height: .875rem;
    font-weight: bold;
    margin: 12px 0
}

@media(min-width: 768px) {
    .story__secondary-source {
        position: relative;
        font-size: 1rem;
        line-height: 1.25rem
    }
}

@media(min-width: 1024px) {
    .story__secondary-source {
        position: absolute;
        bottom: 0
    }
}

.story__secondary-source > a.link {
    color: #00598c;
    text-decoration: none
}

    .story__secondary-source > a.link:hover {
        background-color: #0079bf;
        color: #fff;
        text-decoration: none
    }

    .story__secondary-source > a.link:active {
        background-color: #003b5c;
        color: #fff;
        text-decoration: none
    }

    .story__secondary-source > a.link:focus {
        background-color: #0079bf;
        color: #fff;
        text-decoration: none
    }

.person-card,
.person-card-grey,
.person-card-gray {
    height: auto;
    display: inline-block;
    position: relative;
    background: #fff;
    vertical-align: top
}

@media only screen and (min-width: 480px) {
    .person-card,
    .person-card-grey,
    .person-card-gray {
        max-width: 276px;
        margin: 0 16px 32px
    }
}

.person-card-grey > .person-card__info-wrapper,
.person-card-gray > .person-card__info-wrapper,
.person-card-grey > .person-card-grey__info-wrapper,
.person-card-gray > .person-card-grey__info-wrapper,
.person-card-grey > .person-card-gray__info-wrapper,
.person-card-gray > .person-card-gray__info-wrapper,
.person-card-grey-grey > .person-card__info-wrapper,
.person-card-grey-gray > .person-card__info-wrapper,
.person-card-grey-grey > .person-card-grey__info-wrapper,
.person-card-grey-gray > .person-card-grey__info-wrapper,
.person-card-grey-grey > .person-card-gray__info-wrapper,
.person-card-grey-gray > .person-card-gray__info-wrapper,
.person-card-gray-grey > .person-card__info-wrapper,
.person-card-gray-gray > .person-card__info-wrapper,
.person-card-gray-grey > .person-card-grey__info-wrapper,
.person-card-gray-gray > .person-card-grey__info-wrapper,
.person-card-gray-grey > .person-card-gray__info-wrapper,
.person-card-gray-gray > .person-card-gray__info-wrapper {
    background: #f2f2f2
}

.person-card-grey > .person-card__info-wrapper,
.person-card-gray > .person-card__info-wrapper,
.person-card-grey > .person-card-grey__info-wrapper,
.person-card-gray > .person-card-grey__info-wrapper,
.person-card-grey > .person-card-gray__info-wrapper,
.person-card-gray > .person-card-gray__info-wrapper,
.person-card-grey-grey > .person-card__info-wrapper,
.person-card-grey-gray > .person-card__info-wrapper,
.person-card-grey-grey > .person-card-grey__info-wrapper,
.person-card-grey-gray > .person-card-grey__info-wrapper,
.person-card-grey-grey > .person-card-gray__info-wrapper,
.person-card-grey-gray > .person-card-gray__info-wrapper,
.person-card-gray-grey > .person-card__info-wrapper,
.person-card-gray-gray > .person-card__info-wrapper,
.person-card-gray-grey > .person-card-grey__info-wrapper,
.person-card-gray-gray > .person-card-grey__info-wrapper,
.person-card-gray-grey > .person-card-gray__info-wrapper,
.person-card-gray-gray > .person-card-gray__info-wrapper {
    background: #f2f2f2
}

.person-card__image,
.person-card-grey__image,
.person-card-gray__image {
    height: auto;
    position: relative;
    z-index: 1
}

@media only screen and (max-width: 599.98px) {
    .person-card__image,
    .person-card-grey__image,
    .person-card-gray__image {
        width: 100%
    }
}

@media only screen and (min-width: 480px) {
    .person-card__image,
    .person-card-grey__image,
    .person-card-gray__image {
        width: 160px;
        height: 160px;
        padding-left: 32px
    }
}

.person-card__info-wrapper,
.person-card-grey__info-wrapper,
.person-card-gray__info-wrapper {
    position: relative;
    bottom: 32px;
    background: #fff;
    z-index: 0;
    padding: 64px 32px 32px
}

@media only screen and (min-width: 480px)and (max-width: 600px) {
    .person-card__info-wrapper,
    .person-card-grey__info-wrapper,
    .person-card-gray__info-wrapper {
        max-width: 192px
    }
}

.person-card__name,
.person-card-grey__name,
.person-card-gray__name {
    color: #00598c;
    font-size: 24px;
    line-height: 27px;
    margin-bottom: 8px
}

.person-card__department,
.person-card-grey__department,
.person-card-gray__department {
    color: #666;
    font-size: 18px;
    line-height: 22.5px;
    margin-bottom: 12px
}

.person-card__description,
.person-card-grey__description,
.person-card-gray__description {
    margin-bottom: 8px;
    font-size: 16px;
    line-height: 24px;
    color: #333;
    max-height: 300px
}

    .person-card__description:last-child,
    .person-card-grey__description:last-child,
    .person-card-gray__description:last-child {
        margin-bottom: 0px
    }

.person-card:first-child,
.person-card-grey:first-child,
.person-card-gray:first-child {
    margin-top: 0px
}

@media only screen and (min-width: 600px) {
    .person-card:first-child,
    .person-card-grey:first-child,
    .person-card-gray:first-child {
        margin-top: 40px
    }
}

.footer__dept,
.footer__global {
    padding: 32px 24px
}

@media only screen and (min-width: 768px) {
    .footer__dept,
    .footer__global {
        padding: 40px
    }
}

.footer__dept {
    background: #2774ae;
    color: #fff;
    font-weight: bold
}

.footer__dept--logo {
    display: block;
    height: auto;
    margin-bottom: 32px
}

@media only screen and (min-width: 480px) {
    .footer__dept--logo {
        max-width: 50%
    }
}

@media only screen and (min-width: 768px) {
    .footer__dept--logo {
        max-width: 25%
    }
}

@media only screen and (min-width: 1280px) {
    .footer__dept--logo {
        max-width: 18%
    }
}

.footer__dept--info,
.footer__dept--links {
    display: block
}

@media only screen and (min-width: 1064px) {
    .footer__dept--info,
    .footer__dept--links {
        display: inline-block
    }
}

.footer__dept--links {
    vertical-align: top
}

@media only screen and (min-width: 768px) {
    .footer__dept--links-wrapper {
        display: inline-block
    }
}

.footer__dept--links ul {
    margin-top: 0;
    margin-right: 24px;
    padding-left: 0;
    vertical-align: top;
    width: auto;
    display: inline-block
}

    .footer__dept--links ul li {
        margin-bottom: 2px;
        font-size: 1rem
    }

        .footer__dept--links ul li a {
            color: #fff;
            text-decoration: none
        }

            .footer__dept--links ul li a:hover {
                background: #ffe500;
                color: #000
            }

/*            .footer__dept--links ul li a:focus {
                outline: 1px dotted #fff
            }
*/
/*            .footer__dept--links ul li a:active {
                background: #ffbf0f
            }*/

        .footer__dept--links ul li:not(:first-child) {
            font-size: .75rem
        }

        .footer__dept--links ul li::before {
            content: none
        }

.footer__dept--info {
    margin-right: 24px
}

@media only screen and (min-width:) {
    .footer__dept--info {
        max-width: 25%
    }
}

.footer__dept--contact {
    margin-bottom: 12px
}

    .footer__dept--contact p {
        color: #fff;
        font-size: 14px;
        line-height:12px;
    }

    .footer__dept--contact a {
        color: #fff;
        text-decoration: none
    }

        .footer__dept--contact a:hover {
            background: #ffe500;
            color: #000
        }

/*        .footer__dept--contact a:focus {
            outline: 1px dotted #fff
        }*/

        .footer__dept--contact a:active {
            background: #ffbf0f
        }

    .footer__dept--contact p:nth-child(2) {
        margin-bottom: 14px
    }

@media only screen and (min-width: breakpoint-mid(md)) {
    .footer__dept--contact {
        margin-bottom: 12px
    }
}

.footer__dept--social {
    height: 48px;
    max-height: 100%;
    margin-bottom: 14px
}

@media only screen and (min-width: 768px) {
    .footer__dept--social {
        margin-bottom: 14px;
        height: 48px
    }
}

.footer__dept--social-facebook:hover,
.footer__dept--social-facebook:active {
    content: url("/img/icons/social/facebook--black.svg")
}

.footer__dept--social-twitter:hover,
.footer__dept--social-twitter:active {
    content: url("/img/icons/social/twitter--black.svg")
}

.footer__dept--social-instagram:hover,
.footer__dept--social-instagram:active {
    content: url("/img/icons/social/instagram--black.svg")
}

.footer__dept--social-snapchat:hover,
.footer__dept--social-snapchat:active {
    content: url("/img/icons/social/snapchat--black.svg")
}

.footer__dept--social-linkedin:hover,
.footer__dept--social-linkedin:active {
    content: url("/img/icons/social/linkedin--black.svg")
}

.footer__dept--social-youtube:hover,
.footer__dept--social-youtube:active {
    content: url("/img/icons/social/youtube--black.svg")
}

.footer__dept--social-tiktok:hover,
.footer__dept--social-tiktok:active {
    content: url("/img/icons/social/tiktok--black.svg")
}

.footer__dept--social-facebook,
.footer__dept--social-twitter,
.footer__dept--social-instagram,
.footer__dept--social-snapchat,
.footer__dept--social-linkedin,
.footer__dept--social-youtube,
.footer__dept--social-tiktok {
    max-height: 100%;
    width: 48px;
    background-size: 48px;
    background-repeat: no-repeat;
    border-radius: 2px;
    display: inline-block;
    position: relative
}

    .footer__dept--social-facebook span,
    .footer__dept--social-twitter span,
    .footer__dept--social-instagram span,
    .footer__dept--social-snapchat span,
    .footer__dept--social-linkedin span,
    .footer__dept--social-youtube span,
    .footer__dept--social-tiktok span {
        position: relative
    }

/*    .footer__dept--social-facebook:focus,
    .footer__dept--social-twitter:focus,
    .footer__dept--social-instagram:focus,
    .footer__dept--social-snapchat:focus,
    .footer__dept--social-linkedin:focus,
    .footer__dept--social-youtube:focus,
    .footer__dept--social-tiktok:focus {
        outline: 1px dotted #fff;
        border-radius: 2px
    }
*/
    .footer__dept--social-facebook:hover,
    .footer__dept--social-twitter:hover,
    .footer__dept--social-instagram:hover,
    .footer__dept--social-snapchat:hover,
    .footer__dept--social-linkedin:hover,
    .footer__dept--social-youtube:hover,
    .footer__dept--social-tiktok:hover {
        background-size: 48px;
        background: #ffe500
    }

    .footer__dept--social-facebook:active,
    .footer__dept--social-twitter:active,
    .footer__dept--social-instagram:active,
    .footer__dept--social-snapchat:active,
    .footer__dept--social-linkedin:active,
    .footer__dept--social-youtube:active,
    .footer__dept--social-tiktok:active {
        background: #ffbf0f
    }

@media only screen and (min-width: 768px) {
    .footer__dept--social-facebook,
    .footer__dept--social-twitter,
    .footer__dept--social-instagram,
    .footer__dept--social-snapchat,
    .footer__dept--social-linkedin,
    .footer__dept--social-youtube,
    .footer__dept--social-tiktok {
        width: 48px;
        background-size: 48px
    }

        .footer__dept--social-facebook:hover,
        .footer__dept--social-twitter:hover,
        .footer__dept--social-instagram:hover,
        .footer__dept--social-snapchat:hover,
        .footer__dept--social-linkedin:hover,
        .footer__dept--social-youtube:hover,
        .footer__dept--social-tiktok:hover {
            background-size: 48px
        }
}

.footer__global {
    display: flex;
    flex-direction: column
}

@media only screen and (min-width: 1157px) {
    .footer__global {
        display: block
    }
}

.footer__global--copyright,
.footer__global--links,
.footer__global--social {
    width: 100%;
    display: block;
    vertical-align: top;
    font-size: 12.8px;
    width: 100%
}

@media only screen and (min-width: 1175px) {
    .footer__global--copyright,
    .footer__global--links,
    .footer__global--social {
        width: 40%;
        display: inline-block
    }
}

.footer__global--copyright {
    order: 2;
    line-height: 24px
}

@media only screen and (max-width: 1175px) {
    .footer__global--copyright {
        margin-bottom: 24px;
        line-height: 18px
    }
}

.footer__global--links {
    order: 3
}

    .footer__global--links ul {
        margin-bottom: 0;
        margin-top: 0;
        padding-left: 0
    }

        .footer__global--links ul li {
            margin-bottom: 0;
            display: block
        }

            .footer__global--links ul li::before {
                content: none
            }

            .footer__global--links ul li:nth-child(2) {
                margin: 0
            }

@media only screen and (min-width: 1156px) {
    .footer__global--links ul li:nth-child(2) {
        margin-left: 32px;
        margin-right: 32px
    }
}

.footer__global--links ul li a {
    text-decoration: none;
    color: white;
}

    .footer__global--links ul li a:hover {
        text-decoration:underline;
        color: white;
    }

    .footer__global--links ul li a:active {
        background: #003b5c
    }

/*    .footer__global--links ul li a:focus {
        outline: 1px dotted #0079bf
    }*/

@media only screen and (min-width: 1156px) {
    .footer__global--links ul li {
        display: inline-block
    }
}

.footer__global--social {
    margin-top: -5px;
    text-align: left;
    order: 1
}

@media only screen and (min-width: 1175px) {
    .footer__global--social {
        float: right;
        text-align: right;
        margin-top:-15vh;
    }
}

@media only screen and (max-width: 1174px) {
    .footer__global--social {
        margin-top: 0;
        margin-bottom: 24px
    }
}

.footer__global--social a,
.footer__global--social div {
    vertical-align: top;
    max-height: 48px;
    display: inline-block
}

.footer__global--social-facebook:hover,
.footer__global--social-facebook:active {
    content: url("/masterpages/newflagship/img/icons/social/facebook-white.svg")
}

.footer__global--social-twitter:hover,
.footer__global--social-twitter:active {
    content: url("/masterpages/newflagship/img/icons/social/twitter-white.svg")
}

.footer__global--social-instagram:hover,
.footer__global--social-instagram:active {
    content: url("/masterpages/newflagship/img/icons/social/instagram-white.svg")
}

.footer__global--social-snapchat:hover,
.footer__global--social-snapchat:active {
    content: url("/masterpages/newflagship/img/icons/social/snapchat-white.svg")
}

.footer__global--social-linkedin:hover,
.footer__global--social-linkedin:active {
    content: url("/masterpages/newflagship/img/icons/social/linkedin-white.svg")
}

.footer__global--social-youtube:hover,
.footer__global--social-youtube:active {
    content: url("/masterpages/newflagship/img/icons/social/youtube-white.svg")
}

.footer__global--social-tiktok:hover,
.footer__global--social-tiktok:active {
    content: url("/masterpages/newflagship/img/icons/social/tiktok-white.svg")
}

.footer__global--social-facebook,
.footer__global--social-twitter,
.footer__global--social-instagram,
.footer__global--social-snapchat,
.footer__global--social-linkedin,
.footer__global--social-youtube,
.footer__global--social-tiktok {
    max-height: 100%;
    width: 48px;
    background-size: 48px;
    background-repeat: no-repeat;
    border-radius: 2px;
    position: relative;
    display: inline-block;
    text-decoration: none
}

    .footer__global--social-facebook:hover,
    .footer__global--social-twitter:hover,
    .footer__global--social-instagram:hover,
    .footer__global--social-snapchat:hover,
    .footer__global--social-linkedin:hover,
    .footer__global--social-youtube:hover,
    .footer__global--social-tiktok:hover {
        background-size: 48px;
        background-repeat: no-repeat;
        background: #0079bf
    }

    .footer__global--social-facebook:active,
    .footer__global--social-twitter:active,
    .footer__global--social-instagram:active,
    .footer__global--social-snapchat:active,
    .footer__global--social-linkedin:active,
    .footer__global--social-youtube:active,
    .footer__global--social-tiktok:active {
        background: #003b5c
    }

/*    .footer__global--social-facebook:focus,
    .footer__global--social-twitter:focus,
    .footer__global--social-instagram:focus,
    .footer__global--social-snapchat:focus,
    .footer__global--social-linkedin:focus,
    .footer__global--social-youtube:focus,
    .footer__global--social-tiktok:focus {
        outline: 1px dotted #0079bf
    }*/

.email {
    background: #005587;
    padding: 32px 24px
}

@media only screen and (min-width: 768px) {
    .email {
        padding: 10px
    }
}

.email__heading,
.email__description,
.email__form,
.email__legal-text,
.email__legal-link,
.email__legal-link:visited,
.email__legal-link:link {
    color: #fff
}

.email__heading {
    font-size: 16px;
    font-weight: bold;
    line-height: 20px;
    text-transform: uppercase;
    margin-bottom: 16px
}

.email__description {
    margin-bottom: 32px
}

.email__input {
    display: block;
    padding: 0px;
    margin-bottom: 22px;
    vertical-align: top
}

@media(min-width: 1024px) {
    .email__input {
        display: table-cell;
        padding: 0 12px;
        margin-bottom: 0
    }
}

.email__input-text {
    box-sizing: border-box;
    padding: 12px 30px 12px 12px;
    width: 100%;
    height: 48px;
    border: none;
    font-size: 1rem;
    background-color: #003b5c;
    opacity: 1;
    border-radius: 2px;
    color: #fff;
    margin-top: 6px
}

    .email__input-text::placeholder {
        color: #ccc
    }

    .email__input-text:focus {
        outline: 1px dotted #fff;
        outline-offset: -3px
    }

    .email__input-text.checked {
        background-image: url("/img/Success.svg") !important;
        background-repeat: no-repeat;
        background-size: auto !important;
        background-position: 96% 51%
    }

@media(min-width: 768px) {
    .email__input-text.checked {
        background-position: 98% 50%
    }
}

.email__input-text.error {
    background-image: url("/img/Error.svg") !important;
    background-repeat: no-repeat;
    background-size: auto !important;
    background-position: 98% 50%;
    border: 2px solid #ffd100
}

.email__input-submit {
    background-color: #ffd100;
    height: 48px;
    border: none;
    border-radius: 2px;
    color: #333;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    font-weight: bold;
    padding: 12px 24px;
    width: 100%;
    margin-top: 6px;
    position: relative;
    top: 0px;
    max-width: 120px
}

@media(min-width: 1024px) {
    .email__input-submit {
        margin-top: 0px;
        top: 23px;
        max-width: none
    }
}

.email__input-submit:active {
    background-color: #ffbf0f
}

.email__input-submit:focus {
    background-color: #ffe500;
    outline: 1px dotted #fff;
    outline-offset: 1px
}

.email__input-container {
    display: block;
    padding: 0;
    width: 100%;
    margin-bottom: 24px
}

@media(min-width: 1024px) {
    .email__input-container {
        display: table
    }
}

.email__input-label {
    font-weight: bold;
    display: block
}

.email__input-email {
    width: auto
}

@media(min-width: 1024px) {
    .email__input-email {
        width: 28.32%;
        padding-left: 0
    }
}

@media(min-width: 768px) {
    .email__input-email input[type=text] {
        max-width: 520px
    }
}

.email__input-firstname {
    width: auto
}

@media(min-width: 768px) {
    .email__input-firstname {
        width: 256px;
        display: inline-block;
        margin-right: 5px
    }
}

@media(min-width: 1024px) {
    .email__input-firstname {
        width: 23.89%;
        display: table-cell
    }
}

.email__input-lastname {
    width: auto
}

@media(min-width: 768px) {
    .email__input-lastname {
        width: 256px;
        display: inline-block
    }
}

@media(min-width: 1024px) {
    .email__input-lastname {
        width: 24.34%;
        display: table-cell
    }
}

.email__input-zipcode {
    width: auto
}

@media(min-width: 1024px) {
    .email__input-zipcode {
        width: 12.04%
    }
}

.email__input-zipcode input[name=Zip] {
    max-width: 120px;
    clear: both
}

.email__input-button {
    width: auto;
    padding-right: 0;
    position: relative;
    margin-bottom: 8px
}

@media(min-width: 1024px) {
    .email__input-button {
        width: 11.53%;
        margin-bottom: 0
    }
}

.email__legal-text {
    font-size: .8rem;
    line-height: 18px
}

.email__legal-link {
    text-decoration: underline
}

    .email__legal-link:hover {
        background: #ffe500;
        color: #000
    }

    .email__legal-link:focus {
        outline: 1px dotted #fff
    }

    .email__legal-link:active {
        background: #ffbf0f
    }

.text,
.radio,
.select,
.checkbox {
    margin-bottom: 8px
}

.text__label,
.text__input,
.text__help,
.text__error {
    display: block
}

.text__label {
    display: block;
    font-size: 16px;
    line-height: 24px;
    color: #333;
    margin-top: 8px;
    margin-bottom: 8px
}

.text__input {
    box-sizing: border-box;
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
    background: #ebebeb;
    background-size: 24px;
    font-size: 16px;
    line-height: 24px;
    padding: 8px 24px 8px 16px;
    border: 1px solid gray;
    border-radius: 2px;
    color: #666
}

    .text__input:focus {
        outline: 1px dotted #0079bf;
        outline-offset: 1px
    }

.text.full-width > .text__input {
    width: 100%;
    max-width: 100%
}

.text__help {
    display: block;
    color: #666;
    margin-top: 8px
}

.text__error {
    display: none
}

.text.hasError > .text__input {
    border: 1px solid red
}

.text.hasError > .text__error {
    display: block;
    color: #d60000;
    margin-top: 8px
}

.select__label {
    display: block;
    font-size: 16px;
    line-height: 24px;
    color: #333;
    margin-top: 8px;
    margin-bottom: 8px
}

.select.full-width > .select__menu {
    width: 100%
}

.select__menu {
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
    background: #ebebeb url("/img/icons/arrow-down-defaultblue.svg") no-repeat 98.5% 50%;
    background-size: 24px;
    font-size: 16px;
    line-height: 24px;
    padding: 8px 24px 8px 16px;
    border: 1px solid gray;
    border-radius: 2px;
    color: #666
}

    .select__menu::-ms-expand {
        display: none
    }

    .select__menu:focus {
        outline: 1px dotted #0079bf;
        outline-offset: 1px
    }

    .select__menu:active {
        color: #000
    }

.select__help {
    display: block;
    color: #666;
    margin-top: 8px
}

.select__error {
    display: none
}

.select.hasError > .select__menu {
    border: 1px solid red;
    background: #ebebeb url("/img/icons/error-red.svg") no-repeat 96.5% 50%;
    background-size: 24px 24px
}

.select.hasError > .select__error {
    display: block;
    color: #d60000;
    margin-top: 8px
}

.checkbox__input {
    appearance: none;
    -webkit-appearance: none;
    border: 1px solid #cacece;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .05), inset 0px -15px 10px -12px rgba(0, 0, 0, .05);
    padding: 9px;
    border-radius: 2px;
    display: inline-block;
    margin-right: 12px
}

    .checkbox__input:hover {
        background: #0079bf
    }

    .checkbox__input:focus {
        outline-style: dotted;
        outline-offset: 1px
    }

    .checkbox__input:active,
    .checkbox__input:checked:active {
        outline-offset: -1px
    }

    .checkbox__input:checked {
        background-color: #003b5c;
        border: 1px solid #adb8c0;
        box-shadow: 0 1px 2px rgba(0, 0, 0, .05), inset 0px -15px 10px -12px rgba(0, 0, 0, .05), inset 15px 10px -12px rgba(255, 255, 255, .1);
        padding: 0 4px
    }

        .checkbox__input:checked::after {
            background-image: url("/img/icons/checkmark-white.svg");
            background-size: 10px 10px;
            display: inline-block;
            width: 10px;
            height: 10px;
            content: ""
        }

    .checkbox__input:checked {
        background-color: #003b5c;
        border: 1px solid #adb8c0;
        box-shadow: 0 1px 2px rgba(0, 0, 0, .05), inset 0px -15px 10px -12px rgba(0, 0, 0, .05), inset 15px 10px -12px rgba(255, 255, 255, .1);
        padding: 0 4px
    }

.radio__input {
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
    display: inline-block;
    height: 24px;
    width: 24px;
    border-radius: 12px;
    border: 1px solid gray;
    background-clip: content-box;
    margin-right: 11px
}

    .radio__input:hover {
        background: #0079bf;
        border-color: #0079bf
    }

    .radio__input:checked {
        background: #003b5c;
        border-color: #003b5c
    }

        .radio__input:checked::after {
            background-image: url("/img/icons/radio-bullet-icon.svg");
            background-size: 25px 25px;
            background-repeat: none;
            background-position: 50%;
            display: inline-block;
            content: "";
            width: 22px;
            height: 22px
        }

    .radio__input:focus {
        outline-style: dotted;
        outline-offset: 1px
    }

.fieldset {
    border: 1px solid gray;
    padding: 32px
}

.fieldset__legend {
    font-size: 20px;
    font-weight: bold;
    line-height: 22.5px;
    color: #333;
    padding: 0 4px
}

.ucla a {
    color: var(--uclablue);
}


    .ucla a:hover {
        color: var(--uclablue);
        text-decoration:underline;
    }

    .ucla a:active {
        color: #fff;
        background: #003b5c
    }

/*    .ucla a:focus {
        outline: 1px dotted #00598c
    }
*/
.ucla .white-link {
    color: #fff
}

    .ucla .white-link:visited {
        color: #fff
    }

/*    .ucla .white-link:focus {
        outline: 1px dotted #fff;
        color: #fff
    }*/

    .ucla .white-link:hover {
        color: #333;
        background: #ffe500
    }

    .ucla .white-link:active {
        color: #333;
        background: #ffbf0f
    }

.ucla .related-links {
    border-bottom: 1px solid #e5e5e5;
    padding-inline-start: 0
}

    .ucla .related-links li {
        position: relative;
        border-top: 1px solid #e5e5e5;
        margin: 0
    }

        .ucla .related-links li::before {
            content: "";
            margin-left: 0;
            display: block
        }

        .ucla .related-links li a {
            line-height: 1.5rem;
            color: #00598c;
            text-decoration: none;
            display: block;
            padding: 12px 80px 12px 16px;
            font-weight: bold
        }

            .ucla .related-links li a:focus {
                background-color: #fff;
                color: #00598c;
                outline: 1px dotted #00598c;
                outline-offset: -3px
            }

            .ucla .related-links li a:hover,
            .ucla .related-links li a:active {
                color: #fff
            }

            .ucla .related-links li a:hover {
                background-color: #0079bf
            }

            .ucla .related-links li a:active {
                background-color: #003b5c
            }

            .ucla .related-links li a.related-links--external::after {
                content: "";
                background: url("/img/icons/external-link-defaultblue.svg");
                background-size: contain;
                width: 24px;
                height: 24px;
                display: block;
                position: absolute;
                right: 24px;
                top: calc(50% - 11px)
            }

            .ucla .related-links li a.related-links--external:hover::after {
                background: url("/img/icons/external-link-white.svg");
                background-size: contain
            }

            .ucla .related-links li a.related-links--download::after {
                content: "";
                background: url("/img/icons/download-defaultblue.svg");
                background-size: contain;
                width: 24px;
                height: 24px;
                display: block;
                position: absolute;
                right: 24px;
                top: calc(50% - 11px)
            }

            .ucla .related-links li a.related-links--download:hover::after {
                background: url("/img/icons/download-white.svg");
                background-size: contain
            }

.ucla-list--bulleted {
    list-style: none;
    line-height: 24px;
    padding-left: 28.5px
}

    .ucla-list--bulleted li {
        margin-bottom: 16px
    }

        .ucla-list--bulleted li::before {
            content: "▪";
            color: #2774ae;
            width: 3em;
            margin-left: -18px;
            padding-right: 13px
        }

li .ucla-list--bulleted li::before {
    content: "□"
}

.ucla-list--bulleted li .ucla-list--bulleted,
.ucla-list--bulleted li .ucla-list--numbered {
    margin-top: 16px;
    padding-left: 20px
}

    .ucla-list--bulleted li .ucla-list--bulleted li,
    .ucla-list--bulleted li .ucla-list--numbered li {
        padding-left: 0
    }

        .ucla-list--bulleted li .ucla-list--bulleted li::before,
        .ucla-list--bulleted li .ucla-list--numbered li::before {
            font-size: 9px
        }

.ucla-list--numbered {
    list-style: none;
    counter-reset: li;
    line-height: 24px;
    padding-left: 5px
}

    .ucla-list--numbered li {
        margin-bottom: 16px;
        counter-increment: li;
        padding-left: 24px
    }

        .ucla-list--numbered li::before {
            content: "." counter(li);
            color: #2774ae;
            display: inline-block;
            width: 1em;
            margin-left: -1.5em;
            margin-right: .5em;
            text-align: right;
            direction: rtl
        }

        .ucla-list--numbered li .ucla-list--bulleted,
        .ucla-list--numbered li .ucla-list--numbered {
            padding-left: 20px;
            margin-top: 16px
        }

            .ucla-list--numbered li .ucla-list--bulleted li,
            .ucla-list--numbered li .ucla-list--numbered li {
                padding-left: 0
            }

.ribbon span {
    font-size: 1.5rem;
    font-weight: bold;
    text-transform: uppercase;
    color: #fff;
    background: #2774ae;
    display: inline-block;
    padding: 8px 4px 6px 4px;
    margin-bottom: 2px;
    position: relative
}

    .ribbon span.first {
        padding-left: 8px
    }

    .ribbon span.last {
        padding-right: 8px
    }

@media(min-width: 768px) {
    .ribbon span {
        font-size: 3rem;
        padding: 8px 4px 4px 12px;
        margin-bottom: 2px
    }

        .ribbon span.first {
            padding-left: 14px
        }

        .ribbon span.last {
            padding-right: 14px
        }
}

.ribbon--highlight span {
    font-size: 1.5rem;
    font-weight: bold;
    text-transform: none;
    line-height: 1;
    color: #333;
    background: #ffd100;
    display: inline-block;
    padding: 12px 3px 6px 3px;
    margin-bottom: 2px
}

    .ribbon--highlight span.first {
        padding-left: 12px
    }

    .ribbon--highlight span.last {
        padding-right: 12px
    }

.social-links-container,
.social-links-container--blue {
    padding: 10px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center
}

    .social-links-container a,
    .social-links-container--blue a {
        height: 48px;
        width: 48px;
        margin: 2px;
        border-radius: 2px
    }

    .social-links-container svg,
    .social-links-container--blue svg {
        height: 48px;
        width: 48px
    }

.social-links-container--blue {
    background: #2774ae
}

.social-links-container a:hover {
    background: #0079bf
}

/*.social-links-container a:focus {
    outline: 1px dotted #0079bf
}*/

.social-links-container a:active {
    background: #003b5c
}

.social-links-container--blue {
    background: #2774ae
}

    .social-links-container--blue a:hover {
        background: #ffe500
    }

/*    .social-links-container--blue a:focus {
        outline: 1px dotted #fff
    }*/

/*    .social-links-container--blue a:active {
        background: #ffbf0f
    }*/

.social-links-container .social-icon--facebook {
    background: url(https://s3.us-west-1.amazonaws.com/webcomponents.ucla.edu/img/icons/social/facebook--brand.svg);
    width: 44px;
    height: 44px;
    display: block;
    content: ""
}

.social-links-container .social-icon--twitter {
    background: url(https://s3.us-west-1.amazonaws.com/webcomponents.ucla.edu/img/icons/social/twitter--brand.svg);
    width: 44px;
    height: 44px;
    display: block;
    content: ""
}

.social-links-container .social-icon--instagram {
    background: url(https://s3.us-west-1.amazonaws.com/webcomponents.ucla.edu/img/icons/social/instagram--brand.svg);
    width: 44px;
    height: 44px;
    display: block;
    content: ""
}

.social-links-container .social-icon--snapchat {
    background: url(https://s3.us-west-1.amazonaws.com/webcomponents.ucla.edu/img/icons/social/snapchat--brand.svg);
    width: 44px;
    height: 44px;
    display: block;
    content: ""
}

.social-links-container .social-icon--linkedin {
    background: url(https://s3.us-west-1.amazonaws.com/webcomponents.ucla.edu/img/icons/social/linkedin--brand.svg);
    width: 44px;
    height: 44px;
    display: block;
    content: ""
}

.social-links-container .social-icon--youtube {
    background: url(https://s3.us-west-1.amazonaws.com/webcomponents.ucla.edu/img/icons/social/youtube--brand.svg);
    width: 44px;
    height: 44px;
    display: block;
    content: ""
}

.social-links-container .social-icon--tiktok {
    background: url(https://s3.us-west-1.amazonaws.com/webcomponents.ucla.edu/img/icons/social/tiktok--brand.svg);
    width: 44px;
    height: 44px;
    display: block;
    content: ""
}

.social-links-container--blue .social-icon--facebook {
    background: url(https://s3.us-west-1.amazonaws.com/webcomponents.ucla.edu/img/icons/social/facebook--white.svg);
    width: 44px;
    height: 44px;
    display: block;
    content: ""
}

.social-links-container--blue .social-icon--twitter {
    background: url(https://s3.us-west-1.amazonaws.com/webcomponents.ucla.edu/img/icons/social/twitter--white.svg);
    width: 44px;
    height: 44px;
    display: block;
    content: ""
}

.social-links-container--blue .social-icon--instagram {
    background: url(https://s3.us-west-1.amazonaws.com/webcomponents.ucla.edu/img/icons/social/instagram--white.svg);
    width: 44px;
    height: 44px;
    display: block;
    content: ""
}

.social-links-container--blue .social-icon--snapchat {
    background: url(https://s3.us-west-1.amazonaws.com/webcomponents.ucla.edu/img/icons/social/snapchat--white.svg);
    width: 44px;
    height: 44px;
    display: block;
    content: ""
}

.social-links-container--blue .social-icon--linkedin {
    background: url(https://s3.us-west-1.amazonaws.com/webcomponents.ucla.edu/img/icons/social/linkedin--brand.svg);
    width: 44px;
    height: 44px;
    display: block;
    content: ""
}

.social-links-container--blue .social-icon--youtube {
    background: url(https://s3.us-west-1.amazonaws.com/webcomponents.ucla.edu/img/icons/social/youtube--white.svg);
    width: 44px;
    height: 44px;
    display: block;
    content: ""
}

.social-links-container--blue .social-icon--tiktok {
    background: url(https://s3.us-west-1.amazonaws.com/webcomponents.ucla.edu/img/icons/social/tiktok--white.svg);
    width: 44px;
    height: 44px;
    display: block;
    content: ""
}

.social-links-container--blue .social-icon--facebook,
.social-links-container a:hover .social-icon--facebook,
.social-links-container a:active .social-icon--facebook {
    background: url("https://s3.us-west-1.amazonaws.com/webcomponents.ucla.edu/img/icons/social/facebook--white.svg")
}

.social-links-container--blue .social-icon--twitter,
.social-links-container a:hover .social-icon--twitter,
.social-links-container a:active .social-icon--twitter {
    background: url("https://s3.us-west-1.amazonaws.com/webcomponents.ucla.edu/img/icons/social/twitter--white.svg")
}

.social-links-container--blue .social-icon--instagram,
.social-links-container a:hover .social-icon--instagram,
.social-links-container a:active .social-icon--instagram {
    background: url("https://s3.us-west-1.amazonaws.com/webcomponents.ucla.edu/img/icons/social/instagram--white.svg")
}

.social-links-container--blue .social-icon--snapchat,
.social-links-container a:hover .social-icon--snapchat,
.social-links-container a:active .social-icon--snapchat {
    background: url("https://s3.us-west-1.amazonaws.com/webcomponents.ucla.edu/img/icons/social/snapchat--white.svg")
}

.social-links-container--blue .social-icon--linkedin,
.social-links-container a:hover .social-icon--linkedin,
.social-links-container a:active .social-icon--linkedin {
    background: url("https://s3.us-west-1.amazonaws.com/webcomponents.ucla.edu/img/icons/social/linkedin--white.svg")
}

.social-links-container--blue .social-icon--youtube,
.social-links-container a:hover .social-icon--youtube,
.social-links-container a:active .social-icon--youtube {
    background: url("https://s3.us-west-1.amazonaws.com/webcomponents.ucla.edu/img/icons/social/youtube--white.svg")
}

.social-links-container--blue .social-icon--tiktok,
.social-links-container a:hover .social-icon--tiktok,
.social-links-container a:active .social-icon--tiktok {
    background: url("https://s3.us-west-1.amazonaws.com/webcomponents.ucla.edu/img/icons/social/tiktok--white.svg")
}

.social-links-container--blue a:hover .social-icon--facebook,
.social-links-container--blue a:active .social-icon--facebook {
    background: url("https://s3.us-west-1.amazonaws.com/webcomponents.ucla.edu/img/icons/social/facebook--black.svg")
}

.social-links-container--blue a:hover .social-icon--twitter,
.social-links-container--blue a:active .social-icon--twitter {
    background: url("https://s3.us-west-1.amazonaws.com/webcomponents.ucla.edu/img/icons/social/twitter--black.svg")
}

.social-links-container--blue a:hover .social-icon--instagram,
.social-links-container--blue a:active .social-icon--instagram {
    background: url("https://s3.us-west-1.amazonaws.com/webcomponents.ucla.edu/img/icons/social/instagram--black.svg")
}

.social-links-container--blue a:hover .social-icon--snapchat,
.social-links-container--blue a:active .social-icon--snapchat {
    background: url("https://s3.us-west-1.amazonaws.com/webcomponents.ucla.edu/img/icons/social/snapchat--black.svg")
}

.social-links-container--blue a:hover .social-icon--linkedin,
.social-links-container--blue a:active .social-icon--linkedin {
    background: url("https://s3.us-west-1.amazonaws.com/webcomponents.ucla.edu/img/icons/social/linkedin--black.svg")
}

.social-links-container--blue a:hover .social-icon--youtube,
.social-links-container--blue a:active .social-icon--youtube {
    background: url("https://s3.us-west-1.amazonaws.com/webcomponents.ucla.edu/img/icons/social/youtube--black.svg")
}

.social-links-container--blue a:hover .social-icon--tiktok,
.social-links-container--blue a:active .social-icon--tiktok {
    background: url("https://s3.us-west-1.amazonaws.com/webcomponents.ucla.edu/img/icons/social/tiktok--black.svg")
}

.social-tile {
    display: flex;
    max-width: 276px;
    width: 276px;
    max-height: 276px;
    height: 276px;
    background-color: #2774ae;
    overflow: hidden
}

    .social-tile a {
        display: block;
        position: relative;
        width: 228px;
        height: 252px;
        text-decoration: none;
        padding: 24px 24px 0
    }

        .social-tile a:hover {
            background: #0079bf
        }

        .social-tile a:focus {
            background: #0079bf;
            outline: 1px dotted #fff;
            outline-offset: -8px
        }

        .social-tile a:active {
            background: #003b5c
        }

.social-tile__media {
    position: absolute;
    top: 0;
    left: 0;
    height: 276px;
    width: 276px;
    object-fit: cover
}

.social-tile__text,
.social-tile__info {
    color: #fff;
    font-size: .8rem;
    line-height: 1rem
}

.social-tile__text {
    max-height: 152px
}

.social-tile__info {
    display: block;
    position: absolute;
    bottom: 24px;
    font-weight: bold;
    width: 228px
}

    .social-tile__info span {
        display: block
    }

.social-tile__logo {
    position: absolute;
    right: 16px;
    bottom: 16px
}

.social-tile__link.has-media .social-tile__text,
.social-tile__link.has-media .social-tile__info {
    visibility: hidden
}

.social-tile__link.has-media:hover .social-tile__text,
.social-tile__link.has-media:hover .social-tile__info,
.social-tile__link.has-media:focus .social-tile__text,
.social-tile__link.has-media:focus .social-tile__info,
.social-tile__link.has-media:active .social-tile__text,
.social-tile__link.has-media:active .social-tile__info {
    visibility: visible
}

.social-tile__link.has-media:hover .social-tile__media,
.social-tile__link.has-media:focus .social-tile__media,
.social-tile__link.has-media:active .social-tile__media {
    opacity: .2
}

@media(min-width: 768px) {
    .stat-set {
        display: flex
    }
}

.stat-wrapper .stat-tout {
    display: block;
    border-left: 4px solid #ffd100;
    padding: 16px 24px 16px 28px
}

@media(min-width: 768px) {
    .stat-wrapper .stat-tout {
        display: inline-block
    }
}

.stat-wrapper .stat-tout__number {
    font-size: 54px;
    line-height: 48px;
    color: #333;
    font-weight: bold;
    display: block;
    margin-bottom: 8px
}

    .stat-wrapper .stat-tout__number > span {
        font-size: 18px;
        vertical-align: middle;
        margin: 0 -5px
    }

.stat-wrapper .stat-tout__label {
    font-size: 20px;
    line-height: 24px;
    font-weight: bold;
    display: block;
    max-width: 212px;
    color: #333
}

@media(min-width: 768px) {
    .stat-wrapper .stat-tout__label {
        max-width: 312px
    }
}

.stat-wrapper .stat-tout__source {
    display: block;
    font-size: 12.8px;
    font-weight: bold;
    font-style: italic;
    color: #666;
    padding-top: 8px;
    line-height: 16px
}

@media(min-width: 1024px) {
    .stat-wrapper .stat-tout--inline {
        display: flex;
        align-items: stretch
    }

        .stat-wrapper .stat-tout--inline .stat-tout__number {
            margin-right: 16px;
            margin-bottom: 8px
        }
}

@media(min-width: 1024px)and (min-width: 1024px) {
    .stat-wrapper .stat-tout--inline .stat-tout__number {
        margin-bottom: 0
    }
}

@media(min-width: 1024px) {
    .stat-wrapper .stat-tout--inline .stat-tout__label {
        display: block;
        max-width: inherit
    }
}

.fixed-table {
    position: relative;
    width: 100%;
    overflow: hidden
}

.fixed-table__scroller {
    margin-left: calc(36% + 16px);
    overflow-x: auto;
    overflow-y: visible
}

@media(min-width: 768px) {
    .fixed-table__scroller {
        overflow-x: visible;
        margin-left: 0
    }
}

.fixed-table__wrapper {
    border: none;
    border-spacing: 0;
    width: 100%
}

    .fixed-table__wrapper thead th {
        font-size: .75rem;
        line-height: .75rem;
        font-weight: bold;
        text-transform: uppercase;
        color: #333;
        padding: 8px 16px;
        word-wrap: break-word;
        text-align: left
    }

        .fixed-table__wrapper thead th.align-right {
            text-align: right
        }

@-moz-document url-prefix() {
    .fixed-table__wrapper .fixed-table__sticky-col {
        margin-top: -24px
    }

    @media(min-width: 768px) {
        .fixed-table__wrapper .fixed-table__sticky-col {
            margin-top: 0
        }
    }
}

.fixed-table__wrapper tbody > tr:nth-child(odd),
.fixed-table__wrapper tbody > tr:nth-child(odd) td:nth-child(1) {
    background-color: #ebebeb
}

.fixed-table__wrapper tbody > tr:nth-child(even),
.fixed-table__wrapper tbody > tr:nth-child(even) td:nth-child(1) {
    background-color: #fff
}

.fixed-table__wrapper tbody > tr.blue-total,
.fixed-table__wrapper tbody > tr.blue-total td:nth-child(1) {
    background-color: #daebfe;
    font-weight: bold
}

.fixed-table__wrapper tbody > tr.yellow-total,
.fixed-table__wrapper tbody > tr.yellow-total td:nth-child(1) {
    background-color: #ffd100;
    font-weight: bold
}

    .fixed-table__wrapper tbody > tr.yellow-total > td,
    .fixed-table__wrapper tbody > tr.yellow-total td:nth-child(1) > td {
        border: none
    }

.fixed-table__wrapper tbody td {
    font-size: .8rem;
    line-height: 1rem;
    color: #333;
    padding: 8px 16px;
    word-wrap: break-word
}

.fixed-table__wrapper tfoot > tr.blue-total,
.fixed-table__wrapper tfoot > tr.blue-total td:nth-child(1) {
    background-color: #daebfe;
    font-weight: bold
}

.fixed-table__wrapper tfoot > tr.yellow-total,
.fixed-table__wrapper tfoot > tr.yellow-total td:nth-child(1) {
    background-color: #ffd100;
    font-weight: bold
}

    .fixed-table__wrapper tfoot > tr.yellow-total > td,
    .fixed-table__wrapper tfoot > tr.yellow-total td:nth-child(1) > td {
        border: none
    }

.fixed-table__wrapper tfoot td {
    font-size: .8rem;
    line-height: 1rem;
    color: #333;
    padding: 8px 16px;
    word-wrap: break-word
}

.fixed-table #sortTable {
    opacity: 0;
    filter: alpha(opacity=0)
}

    .fixed-table #sortTable tr th:nth-child(1) {
        position: absolute
    }

@media(min-width: 768px) {
    .fixed-table #sortTable tr th:nth-child(1) {
        position: relative
    }
}

.fixed-table #sortTable tr th:nth-child(1) {
    width: 34%
}

.fixed-table #sortTable th {
    position: relative;
    cursor: pointer;
    padding-left: 32px
}

    .fixed-table #sortTable th::before,
    .fixed-table #sortTable th::after {
        content: "◤";
        font-size: 6px;
        color: #333;
        display: block;
        position: absolute;
        left: 18px;
        top: 12px;
        width: 6px;
        height: 9px;
        -webkit-transform: rotate(45deg);
        -moz-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
        -o-transform: rotate(45deg);
        transform: rotate(45deg)
    }

    .fixed-table #sortTable th::after {
        left: 16px;
        top: 16px;
        -webkit-transform: rotate(225deg);
        -moz-transform: rotate(225deg);
        -ms-transform: rotate(225deg);
        -o-transform: rotate(225deg);
        transform: rotate(225deg)
    }

    .fixed-table #sortTable th.sorting-asc::after {
        color: #00598c
    }

    .fixed-table #sortTable th.sorting-desc::before {
        color: #00598c
    }

.fixed-table__sticky-col {
    left: 0;
    position: absolute;
    top: auto;
    width: 36%;
    overflow-y: scroll;
    font-weight: bold
}

@media(min-width: 768px) {
    .fixed-table__sticky-col {
        min-width: 300px;
        position: relative
    }
}

.fixed-table ::-webkit-scrollbar {
    width: 0;
    height: 8px
}

.fixed-table ::-webkit-scrollbar-track {
    box-shadow: inset 0 -1px 0 0 #e5e5e5, inset 0 1px 0 0 #e5e5e5;
    border-radius: 4px
}

.fixed-table ::-webkit-scrollbar-thumb {
    background: #00598c;
    border-radius: 4px
}

    .fixed-table ::-webkit-scrollbar-thumb:hover {
        background: #0079bf
    }

@media(min-width: 768px) {
    .tabs {
        max-width: 776px;
        margin: 0 auto;
        display: block;
        overflow: hidden;
        border-bottom: 1px solid #e5e5e5
    }
}

.tabs div[role=tablist] {
    white-space: nowrap;
    border-bottom: 1px solid #e5e5e5
}

@media(min-width: 1280px) {
    .tabs div[role=tablist] {
        overflow: hidden
    }
}

.tabs .tablinks {
    display: inline-block;
    position: relative;
    margin: 0;
    cursor: pointer;
    padding: 8px 16px 12px;
    color: #00598c;
    font-weight: bold;
    background: none;
    border-bottom: 4px solid transparent
}

    .tabs .tablinks[aria-selected=true] {
        color: #333;
        border-bottom: 4px solid #ffd100
    }

    .tabs .tablinks:hover {
        color: #0079bf;
        border-bottom: 4px solid #0079bf
    }

/*    .tabs .tablinks:focus {
        color: #0079bf;
        outline: 1px dotted #0079bf;
        outline-offset: -2px
    }*/

    .tabs .tablinks:active {
        color: #333;
        border-bottom: 4px solid #ffd100
    }

.tabs .tabcontent {
    position: relative;
    z-index: 2
}
/*
    .tabs .tabcontent:focus {
        outline: 1px dotted #0079bf;
        outline-offset: -2px
    }*/

    .tabs .tabcontent p {
        font-size: 16px;
        line-height: 24px
    }

        .tabs .tabcontent p a {
            text-decoration: underline;
            color: #00598c
        }

            .tabs .tabcontent p a:visited {
                color: #5223b0
            }

            .tabs .tabcontent p a:hover {
                color: #fff;
                background-color: #0079bf
            }

/*            .tabs .tabcontent p a:focus {
                color: #fff;
                background-color: #0079bf;
                outline: 1px dotted #0079bf;
                outline-offset: 2px
            }*/

            .tabs .tabcontent p a:active {
                color: #fff;
                background-color: #003b5c
            }

#header {
}

/*    #header a:focus {
        outline: 1px dotted #0079bf
    }*/

/*    #header .header-logo a:focus {
        outline: 1px dotted #fff
    }*/

.header-logo {
    padding: 15px;
    background: white;
    display: flex;
    justify-content: space-between;
}


.header-logo a {
    text-decoration: none
}

.header-logo__wrap {
    display: block;
    margin: 0
}

.header-logo__image {
    display: inline-block;
    height: 24px;
    margin-right: 13px
}

.header-logo .breadcrumb {
    position: relative;
    top: 5px;
    width: calc(100% - 100px)
}

.breadcrumb {
    margin: 0;
    padding: 0;
    list-style: none;
    white-space: nowrap;
    overflow-y: scroll;
    width: 100%;
    -ms-overflow-style: none;
    scrollbar-width: none;
    display: inline-block;
    width: calc(100% - 5px)
}

@media(min-width: 1024px) {
    .breadcrumb {
        width: 100%
    }
}

.breadcrumb::-webkit-scrollbar {
    display: none
}

.breadcrumb__item {
    display: inline-block;
    padding: 0;
    margin: 0;
    font-size: 1rem;
    line-height: 1.25rem;
    font-weight: bold;
    border-radius: 1px
}

    .breadcrumb__item a {
        text-decoration: none;
        color: #00598c
    }

        .breadcrumb__item a:hover {
            background-color: #0079bf;
            color: #fff
        }

        .breadcrumb__item a:focus {
            outline: 1px dotted #0079bf
        }

    .breadcrumb__item::before {
        content: "/";
        display: inline;
        padding: 0 8px;
        margin: 0;
        font-weight: normal;
        color: #949494
    }

.breadcrumb__item--first::before {
    content: none
}

.breadcrumb--white {
    color: #fff;
    position: relative
}

    .breadcrumb--white .breadcrumb__item a {
        color: #fff
    }

        .breadcrumb--white .breadcrumb__item a:hover {
            background-color: #ffe500;
            color: #333
        }

    .breadcrumb--white .breadcrumb__item::before {
        color: #fff
    }

.breadcrumb--fade {
    display: inline-block;
    position: relative;
    width: 0px;
    height: 25px
}

@media(min-width: 1024px) {
    .breadcrumb--fade {
        display: none
    }
}

.breadcrumb--fade::after {
    content: "";
    position: absolute;
    width: 5px;
    height: 24px;
    top: 0px;
    right: 0px;
    background: #fff;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, white 84%, white 100%)
}

.breadcrumb--fade.white::after {
    background: #2774ae;
    background: linear-gradient(90deg, rgba(39, 116, 174, 0) 0%, #2774ae 84%, #2774ae 100%)
}

.site-name {
    font-weight: bold;
    font-size: 1.75rem;
    line-height: 1.75rem;
    margin-bottom: 16px
}

    .site-name a {
        text-decoration: none;
        color: #333;
        display: block
    }

.header-wrap {
    display: block;
    max-width: 1176px;
    margin: 0 auto;
    padding: 16px 0px 0px;
    position: relative;
    top: 1px;
    min-height: 41px
}

@media(min-width: 1024px) {
    .header-wrap {
        padding: 24px 24px 0px;
        min-height: auto
    }
}

.header-wrap::after {
    content: "";
    display: block
}

.header-wrap .site-name {
    float: left;
    width: 75%;
    margin-left: 24px
}

@media(min-width: 1024px) {
    .header-wrap .site-name {
        width: 50%;
        margin-left: 0px;
        margin-bottom: 0px
    }
}

.header-wrap .site-name a {
    margin-bottom: 0px
}

@media(min-width: 1024px) {
    .header-wrap .site-name a {
        margin-bottom: 32px
    }
}

.header-wrap #menu-secondary {
    float: right;
    width: 50%;
    position: relative;
    display: none
}

@media(min-width: 1024px) {
    .header-wrap #menu-secondary {
        display: block
    }
}

.header-wrap #menu-secondary .nav-secondary {
    float: right;
    position: relative;
    top: -6px
}

#menu {
    display: block;
    position: relative;
    width: 100%
}

@media(min-width: 1024px) {
    #menu {
        width: auto
    }
}

#menu .nav-primary {
    right: -100%;
    top: 43px;
    position: relative;
    width: 100%;
    z-index: 100
}

@media(min-width: 1024px) {
    #menu .nav-primary {
        top: 0px;
        z-index: 100
    }
}

#menu .nav-primary__list {
    float: right;
    width: 100%;
    position: absolute;
    left: 0;
    top: 0
}

@media(min-width: 1024px) {
    #menu .nav-primary__list {
        width: auto;
        position: relative;
        left: auto;
        top: auto
    }
}

#menu .nav-primary--is-active {
    right: 0%
}

@media(min-width: 1024px) {
    #menu .nav-primary--is-active {
        right: 0
    }
}

#menu .hamburger {
    position: absolute;
    right: 0px;
    bottom: -31px;
    margin-right: 24px
}

@media(min-width: 1024px) {
    #menu .hamburger {
        display: none;
        margin-right: 0px
    }
}

.nav-secondary__list {
    margin: 0;
    padding: 0
}

.nav-secondary__item {
    margin: 0;
    padding: 0;
    display: inline-block
}

    .nav-secondary__item::before {
        display: none
    }

.nav-secondary__link {
    text-decoration: none;
    font-size: .875rem;
    line-height: 1.286;
    font-weight: bold;
    color: #00598c;
    display: block;
    padding: 8px 16px;
    margin-left: 2px;
    border-radius: 2px
}

    .nav-secondary__link:hover {
        color: #fff;
        background-color: #0079bf
    }

/*    .nav-secondary__link:active {
        color: #fff;
        background-color: #003b5c
    }
*/
/*    .nav-secondary__link:focus {
        outline: 1px dotted #0079bf
    }*/

/*.nav-secondary__link--active {
    color: #fff;
    background-color: #00598c
}
*/
.nav-primary {
    position: relative;
    border-top: 1px solid #ccc;
    transition: right .5s ease
}

@media(min-width: 1024px) {
    .nav-primary {
        float: left;
        left: 0%;
        border-top: none
    }
}

.nav-primary__list {
    margin: 0;
    padding: 0;
    list-style: none
}

    .nav-primary__list li {
        list-style: none;
        background: #fff
    }

@media(min-width: 1024px) {
    .nav-primary__list li {
        background: none
    }
}

.nav-primary__list li::before {
    content: "";
    margin: 0;
    padding: 0;
    display: none
}

@media(min-width: 1024px) {
    .nav-primary__list {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex
    }
}

.nav-primary__list li {
    margin: 0;
    min-width: 100%;
    border-bottom: 1px solid #ccc
}

@media(min-width: 1024px) {
    .nav-primary__list li {
        min-width: inherit;
        flex-basis: auto;
        align-self: flex-end;
        border: 1px solid none;
        border-bottom: 0
    }

        .nav-primary__list li:hover > .nav-primary__link {
            background: #0079bf;
            color: #fff
        }

            .nav-primary__list li:hover > .nav-primary__link::after {
                filter: brightness(0) invert(1)
            }

        .nav-primary__list li:hover > ul {
            display: block;
            margin-top: 0;
            z-index: 820
        }
}

.nav-primary__list li > ul {
    margin: 0;
    padding: 0;
    list-style: none
}

    .nav-primary__list li > ul li {
        list-style: none
    }

        .nav-primary__list li > ul li::before {
            content: "";
            margin: 0;
            padding: 0
        }

    .nav-primary__list li > ul a {
        display: block;
        background-color: #e5e5e5
    }

@media(min-width: 1024px) {
    .nav-primary__list li > ul a {
        background-color: #fff;
        padding-left: 1rem
    }
}

.nav-primary__item a.nav-primary__link--current-page {
    border-left: 4px solid #ffd100;
    padding-left: 20px
}

.nav-primary__item .nav-primary__sublist a.nav-primary__link--current-page {
    padding-left: 44px
}

@media(min-width: 1024px) {
    .nav-primary__item {
        padding-right: 10px
    }

        .nav-primary__item a.nav-primary__link--current-page {
            border-left: 0;
            position: relative
        }

            .nav-primary__item a.nav-primary__link--current-page::before {
                content: "";
                display: block;
                width: calc(100% - 32px);
                height: 4px;
                position: absolute;
                background: #ffd100;
                top: 35px;
                left: 16px
            }

        .nav-primary__item .nav-primary__sublist .nav-primary__item {
            padding-right: 0px
        }

            .nav-primary__item .nav-primary__sublist .nav-primary__item a.nav-primary__link--current-page {
                border-left: 4px solid #ffd100;
                padding-left: 12px
            }

                .nav-primary__item .nav-primary__sublist .nav-primary__item a.nav-primary__link--current-page::before {
                    display: none
                }
}

.nav-primary__toggle {
    background-color: #fff;
    border: 0;
    border-left: 1px solid #e5e5e5;
    width: 3.2em;
    margin-left: auto
}

    .nav-primary__toggle.is-open::after {
        transform: rotate(-90deg)
    }

    .nav-primary__toggle::after {
        transform: rotate(90deg)
    }

    .nav-primary__toggle:hover {
        background-color: #0079bf
    }

        .nav-primary__toggle:hover::after {
            filter: brightness(0) invert(1)
        }

/*    .nav-primary__toggle:focus {
        outline-offset: -0.25rem;
        outline: 1px dotted #0079bf
    }*/

    .nav-primary__toggle::after {
        content: "";
        display: block;
        width: 100%;
        height: 1em;
        background: url("/masterpages/newflagship/img/icons/arrow-right-defaultblue.svg") no-repeat center;
        background-size: 24px
    }

@media(min-width: 1024px) {
    .nav-primary__toggle {
        display: none
    }
}

.nav-primary__sublist {
    width: 100%
}

@media(min-width: 1024px) {
    .nav-primary__sublist {
        position: absolute;
        width: 20rem;
        top: 44px
    }
}

.nav-primary__sublist--open {
    display: block
}

@media(min-width: 1024px) {
    .nav-primary__sublist .nav-primary__item {
        border: 1px solid #e5e5e5;
        border-top: 0
    }

        .nav-primary__sublist .nav-primary__item a {
            padding: 14px 16px
        }
}

.nav-primary__sublist .nav-primary__item:first-child {
    border-top: 1px solid #ccc
}

@media(min-width: 1024px) {
    .nav-primary__sublist .nav-primary__item:first-child {
        border-top: 1px solid #e5e5e5
    }
}

.nav-primary__sublist .nav-primary__item:last-child {
    border-bottom: 0
}

@media(min-width: 1024px) {
    .nav-primary__sublist .nav-primary__item:last-child {
        border-bottom: 1px solid #e5e5e5
    }
}

.nav-primary__sublist .nav-primary__link {
    padding: 14px 24px 14px 48px;
    background-color: #ebebeb
}

@media(min-width: 1024px) {
    .nav-primary__sublist .nav-primary__link {
        background-color: #fff
    }
}

.nav-primary__link {
    display: block
}

    .nav-primary__link:hover {
        background: #0079bf;
        color: #fff
    }


  /*  .nav-primary__link:focus {
        outline-offset: -0.25rem;
        outline: 1px dotted #0079bf
    }

@media(min-width: 1024px) {
    .nav-primary__link:focus {
        outline-offset: -0.25rem
    }
}
*/
.nav-primary__link:active {
    background: #003b5c;
    color: #fff
}

.nav-primary__link--has-children {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    flex-wrap: wrap
}

    .nav-primary__link--has-children > *:nth-child(1) {
        flex: 1
    }

@media(min-width: 1024px) {
    .nav-primary__link--has-children {
        display: inline-block;
        position: relative;
        padding-right: 2px
    }

        .nav-primary__link--has-children .nav-primary__link:hover {
            border-bottom: 1px
        }

        .nav-primary__link--has-children > a {
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            align-items: center
        }

            .nav-primary__link--has-children > a::after {
                content: "";
                display: block;
                height: 1em;
                width: 1em;
                background: url("/masterpages/newflagship/img/icons/arrow-right-defaultblue.svg") no-repeat center;
                background-size: 24px;
                margin-left: 6px;
                transform: rotate(90deg)
            }
}

.nav-primary__sublist--hidden {
    display: none
}

.nav-primary a {
    color: #00598c;
    font-weight: bold;
    font-size: 1rem;
    line-height: 1.333rem;
    text-decoration: none;
    padding: 14px 24px
}

@media(min-width: 1024px) {
    .nav-primary a {
        padding: 8px 16px 16px;
        font-size: 1.125rem
    }
}

.nav-primary__search-mobile .nav-primary__search-form,
.nav-primary__search-desktop .nav-primary__search-form {
    display: block;
    position: relative
}

    .nav-primary__search-mobile .nav-primary__search-form::before,
    .nav-primary__search-desktop .nav-primary__search-form::before {
        display: block;
        content: " ";
        width: 18px;
        height: 18px;
        position: absolute;
        background-image: url(/img/icons/search-grey60.svg);
        background-position: center;
        background-size: contain;
        margin: 12px;
        background-size: cover;
        z-index: 2
    }

    .nav-primary__search-mobile .nav-primary__search-form label,
    .nav-primary__search-desktop .nav-primary__search-form label {
        width: 100%;
        display: block;
        position: inherit
    }

@media(min-width: 1024px) {
    .nav-primary__search-mobile .nav-primary__search-form label,
    .nav-primary__search-desktop .nav-primary__search-form label {
        display: inline-block;
        width: 91%;
        margin: 0;
        border: 1px solid #333
    }
}

.nav-primary__search-mobile .nav-primary__search-form label input,
.nav-primary__search-desktop .nav-primary__search-form label input {
    width: 100%;
    padding: 11px 12px 11px 38px;
    background: #ebebeb;
    border: 0;
    -webkit-appearance: none
}

    .nav-primary__search-mobile .nav-primary__search-form label input::-webkit-search-cancel-button,
    .nav-primary__search-desktop .nav-primary__search-form label input::-webkit-search-cancel-button {
        background-image: url(/img/icons/clear-grey60.svg);
        background-size: 23px;
        -webkit-appearance: none;
        width: 23px;
        height: 23px
    }

/*    .nav-primary__search-mobile .nav-primary__search-form label input:focus,
    .nav-primary__search-desktop .nav-primary__search-form label input:focus {
        outline-offset: -0.25rem;
        outline: 1px dotted #0079bf
    }
*/
.nav-primary__search-mobile .nav-primary__search-form .nav-primary__search-submit,
.nav-primary__search-desktop .nav-primary__search-form .nav-primary__search-submit {
    display: none
}

@media(min-width: 1024px) {
    .nav-primary__search-mobile .nav-primary__search-form .nav-primary__search-submit,
    .nav-primary__search-desktop .nav-primary__search-form .nav-primary__search-submit {
        display: inline-block;
        width: 8%;
        padding: 12px !important;
        -webkit-appearance: none;
        background: #00598c;
        color: #fff;
        border: 0px;
        border-radius: 0 2px 2px 0;
        margin-left: -5px
    }
}

@media(min-width: 1024px) {
    .nav-primary__search-mobile {
        display: none
    }
}

.nav-primary__search-desktop {
    display: none
}

@media(min-width: 1024px) {
    .nav-primary__search-desktop {
        display: inline-block;
        height: 44px;
        width: 56px;
        position: relative;
        top: -1px
    }
}

.nav-primary__search-desktop .nav-primary__search-desktop-button {
    display: none
}

    .nav-primary__search-desktop .nav-primary__search-desktop-button:hover {
        background: #0079bf;
        cursor: pointer
    }

        .nav-primary__search-desktop .nav-primary__search-desktop-button:hover svg {
            filter: brightness(0) invert(1)
        }

@media(min-width: 1024px) {
    .nav-primary__search-desktop .nav-primary__search-desktop-button {
        display: block;
        height: 44px;
        width: 56px;
        background: #fff;
        -webkit-appearance: none;
        border: 0
    }

    .nav-primary__search-desktop .nav-primary__search-desktop-button--is-active {
        background: #0079bf
    }

        .nav-primary__search-desktop .nav-primary__search-desktop-button--is-active svg {
            filter: brightness(0) invert(1)
        }
}

@media(min-width: 1024px) {
    .nav-primary__search-desktop .nav-primary__search-block-form {
        display: none;
        background: #fff;
        padding: 17px 32px 15px 32px;
        border: 1px solid #ccc
    }

    .nav-primary__search-desktop .nav-primary__search-block-form--is-active {
        display: block;
        position: absolute
    }
}

/*.nav-primary__search-desktop .nav-primary__search-desktop-button:focus {
    outline-offset: -0.25rem;
    outline: 1px dotted #0079bf
}*/

.hamburger {
    width: 40px;
    padding: 12px;
    border-radius: 2px;
    display: inline-block;
    cursor: pointer;
    transition-property: opacity, filter;
    transition-duration: .15s;
    transition-timing-function: linear;
    font: inherit;
    color: inherit;
    text-transform: none;
    background-color: transparent;
    border: 0;
    margin: 0;
    overflow: visible
}

/*    .hamburger:focus {
        outline-offset: -0.25rem;
        outline: 1px dotted #0079bf
    }
*/
    .hamburger:hover {
        opacity: 1;
        background: #2774ae;
        padding-right:40px;
    }

        .hamburger:hover .hamburger__inner {
            background-color: #fff
        }

            .hamburger:hover .hamburger__inner::before {
                background-color: #fff
            }

            .hamburger:hover .hamburger__inner::after {
                background-color: #fff
            }

    .hamburger:active {
        background-color: #003b5c
    }

.hamburger__box {
    width: 16px;
    height: 12px;
    display: inline-block;
    position: relative
}

.hamburger__inner {
    transition-duration: .075s;
    transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    transition-property: transform;
    width: 16px;
    height: 2px;
    background: #2774ae;
    border-radius: 0px;
    position: absolute;
    display: block;
    top: 50%;
    margin-top: -2px
}

    .hamburger__inner::before,
    .hamburger__inner::after {
        content: "";
        position: relative;
        display: block;
        width: 16px;
        height: 2px;
        background: #2774ae;
        border-radius: 0px
    }

    .hamburger__inner::before {
        transition: top .075s .12s ease, opacity .075s ease;
        top: -5px
    }

    .hamburger__inner::after {
        transition: bottom .075s .12s ease, transform .075s cubic-bezier(0.55, 0.055, 0.675, 0.19);
        bottom: -3px
    }

.hamburger--is-active .hamburger__inner {
    transform: rotate(45deg);
    transition-delay: .12s;
    transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1)
}

    .hamburger--is-active .hamburger__inner::before {
        top: 0;
        opacity: 0;
        transition: top .075s ease, opacity .075s .12s ease
    }

    .hamburger--is-active .hamburger__inner::after {
        bottom: 2px;
        transform: rotate(-90deg);
        transition: bottom .075s ease, transform .075s .12s cubic-bezier(0.215, 0.61, 0.355, 1)
    }

.ucla a.tile__link:link {
    background-color: rgba(0, 89, 140, .85);
    text-decoration: none
}

/*.ucla a.tile__link:hover,
.ucla a.tile__link:focus {
    background-color: rgba(0, 121, 191, .85)
}
*/
.ucla a.tile__link:active {
    background-color: rgba(0, 59, 92, .85)
}

.tile {
    display: flex;
    margin: 1% 0
}

.tile__section {
    display: flex;
    flex-direction: column;
    justify-content: flex-start
}

@media(min-width: 768px) {
    .tile__section {
        flex-direction: row;
        flex-wrap: wrap
    }
}

@media(min-width: 768px) {
    .tile__section--col-1 {
        max-width: calc((276px + 18px) * 1)
    }
}

@media(min-width: 768px) {
    .tile__section--col-2 {
        max-width: calc((276px + 18px) * 2)
    }
}

@media(min-width: 768px) {
    .tile__section--col-3 {
        max-width: calc((276px + 18px) * 3)
    }
}

@media(min-width: 768px) {
    .tile__section--col-4 {
        max-width: calc((276px + 18px) * 4)
    }
}

.tile__section--centered {
    margin: 0 auto;
    justify-content: center
}

@media(min-width: 768px) {
    .tile {
        margin: 1% calc(18px / 2)
    }
}

.tile * {
    color: #fff
}

.tile__background {
    background: #00598c;
    width: 100%
}

@media(min-width: 768px) {
    .tile__background {
        max-width: 276px
    }
}

.tile__background--royce {
    background: #00598c url("../img/examples/tile-example-1.jpg") no-repeat center/cover
}

.tile__background--students {
    background: #00598c url("../img/examples/tile-example-2.jpg") no-repeat center/cover
}

.tile__background--events {
    background: #00598c url("../img/examples/tile-example-3.jpg") no-repeat center/cover
}

.tile__link {
    display: block;
    height: calc(108px - 0 - 16px);
    overflow: hidden;
    padding: 0 32px 16px;
    width: 100%
}

@media(min-width: 768px) {
    .tile__link {
        height: calc(188px - 32px - 64px);
        padding: 32px 32px 64px
    }
}

.tile__link::before {
    background: #ffd100;
    content: "";
    display: block;
    height: 4px;
    margin: 16px 0 12px;
    width: 40px
}

@media(min-width: 768px) {
    .tile__link::before {
        margin: 0 0 28px
    }
}

.tile__title {
    line-height: 30px
}