.blue { color: #2d5390; }
.blue-dark { color: #1e3f73; }
.white { color: #f5f5ff; }
.grey-light { color: #e7e7f0; }
.grey { color: #c8c8d0; }
.black { color: #121212; }

body { background-color: #f5f5ff; }
.footer { background-color: #2d5390; color: #e7e7f0; }
a { font-weight: bold; color: #2d5390; text-decoration: none; }
a:hover, a:active { color: #1e3f73; text-decoration: underline; }

.desktop-header { border-bottom: 1px solid #e7e7f0; text-align: center; background-color: #f5f5ff; }
.desktop-header p { margin: 0.25em; font-size: 1em; font-weight: 700; }
.desktop-header a { text-decoration: none; color: #121212; }
.desktop-header p.logo { max-height: 5em; text-align: left; }
.desktop-header p.logo a { display: inline-block; height: 5em; line-height: 5em; vertical-align: middle; }
.desktop-header p.logo img { margin-right: 1em; }
.desktop-header .material-icons { font-size: 2em; width: 1em; height: 1em; color: #2d5390 }

.desktop-menu { background-color: #2d5390; }
.desktop-menu .col-12-xs { margin: 0 2%}
.desktop-menu ul { text-align: left; list-style-type: none; margin: 0; padding: 0; }
.desktop-menu li { display: inline-block; border-bottom: 2px solid #2d5390; }
.desktop-menu li.active { border-bottom: 2px solid #e7e7f0; }
.desktop-menu li:hover { border-bottom: 2px solid #e7e7f0; }
.desktop-menu a { text-decoration: none; color: #e7e7f0; }
.desktop-menu a:hover, .desktop-menu a:active { text-decoration: none; color: #e7e7f0; }

.mobile-header { text-align: center; border-bottom: 3px solid #2d5390; position: fixed; top: 0; left: 0; right: 0; background-color: #f5f5ff; z-index: 998; }
.mobile-header .item-wrapper { display: block; margin: 0.5rem 0; width: 25%; float: left; }
.mobile-header .item-wrapper .item-inner { border-right: 1px solid #2d5390; }
.mobile-header .item-wrapper:nth-child(4) .item-inner { border-right: none; }
.mobile-header p { margin: 0.25em; font-size: 1em; font-weight: 700; }
.mobile-header a { text-decoration: none; color: #121212; }
.mobile-header .material-icons { font-size: 2em; width: 1em; height: 1em; color: #2d5390 }

.mobile-menu { text-align: left; position: fixed; top: 0; bottom: 0; left: -20em; width: 20em; background-color: #1e3f73; z-index: 999; transition: 0.4s; transition-timing-function: cubic-bezier(0, 0, .2, 1); }
.mobile-menu.open { left: 0; }
.mobile-menu ul { list-style-type: none; margin: 0; padding: 2.5em 1.5em 1.5em;}
.mobile-menu li { display: block; margin: 0; padding: 0; border-bottom: 1px solid #e7e7f0; }
.mobile-menu li.active::before { content: " "; }
.mobile-menu .menu-header { display: block; padding: 0 0 0.5em 1em; color: #e7e7f0; text-decoration: none; }
.mobile-menu .menu-header span { font-size: 1.2em; }
.mobile-menu a { display: block; padding: 0.5em 1em; color: #e7e7f0; text-decoration: none; }
.mobile-menu a:hover, .mobile-menu a:active { color: #e7e7f0; text-decoration: none; }
.mobile-menu .menu-close { display: block; float: right; border: 1px solid #e7e7f0; height: 2em; width: 2em; line-height: 2em; text-align: center; position: relative; top:-1em; }

.hero { color: #121212; background-color: #f5f5ff; background-position: center center; background-size: cover; min-height: 20em; margin: 0 auto; max-width: 90em;}
.hero .container { height: 20em; margin: 0 auto; padding: 2em 0; }
.hero .row { padding: 0 2em; }
.hero-content.col-6-md { margin: 7em 0 0 0; padding: 1em 3em; background-color: rgba(245,245,255,.7); }

.content { color: #121212; background-color: #f5f5ff; }
.content h1 { margin: 1em  0 0.5em 0; color: #1e3f73; }
.content-wrapper { padding: 2em 0;}
.content-row { display: block; }
.content-block { background-color: #e7e7f0; }
.content-block-inner { padding: 2em; }
.content-block h4 { margin-top: 0; }

.quote p { font-weight: 700; font-style: italic; font-size: 2em; color: #2d5390; }
.quote .quote-first { display: block; text-align: left; }
.quote .quote-second { display: block; text-align: right; }

.image-wrapper img { height: auto; width: 100%; }

.profile p { line-height: 1.3em; }
.profile img { height: 80px; width: 80px; border-radius: 40px; border: 2px solid #2d5390; }

/* RESPONSIVE LAYOUT */
/* XS */
body { padding-top: 4em; }
.desktop-menu li { padding: 0.8em 1em; margin-left: 1em; }
.desktop-menu li:first-child { margin-left: 0; }

/* SM */
@media only screen and (min-width: 33.75em) {  /* 540px */
    body { padding-top: 6em; }
}

/* MD */
@media only screen and (min-width: 45em) {  /* 720px */
    body { padding-top: 0; }
    .content-row { display: flex; }
}

/* LG */
@media only screen and (min-width: 60em) { /* 960px */
    .desktop-menu li { padding: 0.8em 2em; }
}

/* XL */
@media only screen and (min-width: 75em) { /* 1200px */
}