/* Customized Normalization */ article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block}audio,canvas,video{display:inline-block;*display:inline;*zoom:1}audio:not([controls]){display:none;height:0}[hidden]{display:none}html{font-size:100%;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}html,button,input,select,textarea{font-family:sans-serif}body{margin:0}a:focus,a:active,a:hover{outline:0}h1{font-size:2em;margin:.67em 0}h2{font-size:1.5em;margin:.83em 0}h3{font-size:1.17em;margin:1em 0}h4{font-size:1em;margin:1.33em 0}h5{font-size:.83em;margin:1.67em 0}h6{font-size:.67em;margin:2.33em 0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:bold}blockquote{margin:1em 40px}dfn,address{font-style:italic}hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0}mark{background:#ff0;color:#000}p,pre{margin:1em 0}code,kbd,pre,samp{font-family:monospace,serif;_font-family:'courier new',monospace;font-size:1em}pre{white-space:pre;white-space:pre-wrap;word-wrap:break-word}q{quotes:none}q:before,q:after{content:"";content:none}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-0.5em}sub{bottom:-0.25em}dl,menu,ol,ul{margin:0 0 0 1px}dd{margin:0 0 0 1em}menu,ol,ul{padding:1em 0;list-style-position:inside}nav ul,nav ol{list-style:none;list-style-image:none}img{border:0;-ms-interpolation-mode:bicubic}svg:not(:root){overflow:hidden}figure{margin:0}form{margin:0}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}legend{border:0;padding:0;white-space:normal;*margin-left:-7px}button,input,select,textarea{font-size:100%;margin:0;vertical-align:baseline;*vertical-align:middle}button,input{line-height:normal}button,select{text-transform:none}button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer;*overflow:visible}button[disabled],html input[disabled]{cursor:default}input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0;*height:13px;*width:13px}input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}textarea{overflow:auto;vertical-align:top}table{border-collapse:collapse;border-spacing:0}

html, body {height: 100%}

html,
button,
input,
select,
textarea {
    color: #4D5051;
    font-family: 'Roboto', 'Helvetica', sans-serif;
    font-size: 1em;
}

body {
    background-color:#fff;
    font-size: 1em;
    font-weight:400;
    line-height: 1.35em;
    margin: 0 auto;
    position: relative;
    word-wrap: break-word;
}

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

.chromeframe {
    margin: 0.2em 0;
    background: #ccc;
    color: #000;
    padding: 0.2em 0;
}

p, pre {
    margin: 0;
    padding: .5em 0;
}

ul {list-style-type: circle}

/* explicitly style nested, ordered lists to look like MS Word */
ol {
    list-style-type: decimal;
}

ol ol {
    list-style-type: lower-alpha;
}

ol ol ol {
    list-style-type: lower-roman;
}

ol ol ol ol {
    list-style-type: decimal;
}

ol ol ol ol ol {
    list-style-type: lower-alpha;
}

ol ol ol ol ol ol {
    list-style-type: lower-roman;
}

/* keeps first-level list items flush against the left margin */
ul li {
    list-style-position:outside;
    margin-left: 1.15em;
}

ol li:nth-child(1n+10),
ol ol ol ol li:nth-child(1n+10) {
    margin-left: 1.95em;
}

/* and someone will make a 100 item list */
ol li:nth-child(1n+100),
ol ol ol ol li:nth-child(1n+100) {
    margin-left: 2.45em;
}

/* undo the indents for nested lists 2 to 4 levels and after 4 levels */
ol ol li,
ol ol li:nth-child(1n+10),
ol ol li:nth-child(1n+100),
ol ol ol ol ol li:nth-child(1n+10),
ol ol ol ol ol li:nth-child(1n+100) {
    margin-left: 1.35em;
}

/*
indent a little more for 10+ items
note: this has to come after other list styles, else the minifier will mess it up
*/
ol li,
ol ul li:nth-child(1n+10) { /* make sure ol ul li doesn't indent */
    list-style-position:outside;
    margin-left: 1.35em;
}

nav li,
footer li,
.events li {
    margin: 0;
}

li {
    margin: 0;
    padding: .5em 0;
    line-height: 1.65em;
}

div > ol:first-child,
div > ul:first-child {
    padding-top: 0;
}

ol ul:last-child,
ul ol:last-child,
ol ol:last-child,
ul ul:last-child {
    padding-bottom: 0;
}

li:first-child {
    padding-top: 0;
}

li:last-child {
    padding-bottom: 0;
}

li p {
    padding: 0;
}

img {
    max-width: 100%;
    vertical-align: middle;
    height: auto;
}

b, strong {
    letter-spacing: .025em;
    font-weight:700;
}

mark {
    color: inherit;
    padding: 0 .125em;
}

.invert mark {
    color:#4D5051;
}

hr {
    clear:both;
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid rgba(0,0,0,.2);
    margin: 1em 0;
    padding: 0;
    max-width: 100% !important;
}

.invert hr {border-color: rgba(255,255,255,.5)}

table {
    border: 0;
    clear:both;
    display:block;
    font-size: 90%;
    max-width: 100%;
    margin: 1em 0;
    text-align:left;
    overflow: auto;
}

.sidebar table {
    font-size: 100%;
}

table.alternate tr:nth-child(even),
table.alt tr:nth-child(even),
tr.alternateRow {
    background-color: rgba(0,0,0,.1);
}

th, td {
    border: 1px solid #ccc;
    padding: .35em .5em;
    vertical-align: top;
}

th {
    color: #4D5051;
}

td {
    min-width:1em;
    min-height:1em;
}

nav ul,
nav ul ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

iframe {border: none}

.sr-only:not(:focus):not(:active) {
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 1px;
}

/* ==========
Typography!
============ */

h1, .h1, h2, .h2, h3, h4, h5, h6 {
    clear: both;
    color: #4D5051;
    font-size: 1em;
    font-weight: 700;
    line-height: 1.35em;
    margin: 0;
    padding: 1em 0;
    word-wrap: normal;  /* prevent weird breaks on huge text */
}

h1 strong,
h2 strong,
.h1 strong,
.h2 strong,
h3 strong,
h4 strong,
h5 strong,
h6 strong {
    font-weight:inherit;
    letter-spacing:inherit;
}

h1, .h1 {
    font-size: 2.35em;
    font-weight: 300;
}
.content .sidebar div h1,
.content .sidebar div .h1 {
    font-size: 2em;
}

h2, .h2,
.sidebar blockquote,
.sidebar .blockquote {
    font-size: 1.5em;
    font-weight: 300;
}

h1 b, b h1,
h1 strong, strong h1,
h2 b, b h2,
h2 strong, strong h2,
h1 b, b .h1,
h1 strong, strong .h1,
h2 b, b .h2,
h2 strong, strong .h2 {
    font-weight:300;
}


h3 {
    text-transform: none;
    font-weight: 700;
    font-size: 1.15em;
    line-height: 1.5em;
}

h4 { /* mimics .cta */
    font-size: 1em;
    letter-spacing: .025em;
    text-transform: uppercase;
}

h5, h6 {
    line-height: 1.65em;
}

h1+h2,
.h1+h2,
h1+.h2,
.h1+.h2,
h2+h3,
.h2+h3 {
    clear: none;
    letter-spacing: 0;
    margin-top: -.5em;
    text-transform: inherit;
}

h1+h2,
.h1+h2,
h1+.h2,
.h1+.h2 {
    margin-top: -1.35em;
    font-weight: 300;
}

h1+p,
.h1+p,
h2+p,
.h2+p {
    padding-top: .65em;
}

p+h1, ul+h1, ol+h1,
p+.h1, ul+.h1, ol+.h1,
p+h2, ul+h2, ol+h2,
p+.h2, ul+.h2, ol+.h2,
p+h3, ul+h3, ol+h3,
p+h4, ul+h4, ol+h4,
p+h5, ul+h5, ol+h5,
p+h6, ul+h6, ol+h6 {
    margin-top:1em;
}

p,
.rule-bottom + p,
pre,
address {
    line-height: 1.65em;
    padding:1em 0;
}

.content > :last-child,
.sidebar p:last-child,
.grid p:last-child,
address:last-child,
pre:last-child,
h1:last-child,
h2:last-child {
    padding-bottom:0;
}

/* it should look like h1 */
blockquote,
.blockquote {
    clear: both;
    color: #4D5051;
    border-left: 1px solid rgba(0,0,0,.15);
    display: block;
    font-weight: 300;
    margin: .5em 0;
    padding-left: 1em;
    position: relative;
    z-index: 5;
    font-size: 2.35em;
    line-height: 1.35em;
    word-wrap: normal;  /* prevent weird breaks on huge text */
}

blockquote + blockquote,
.blockquote + .blockquote,
blockquote + .blockquote,
.blockquote + blockquote {
    margin-top: -.5em;
}

.invert blockquote,
.invert .blockquote {
    border-left: 1px solid rgba(255,255,255,.5);
    color: rgba(255,255,255,.85);
}

table:last-child,
blockquote:last-child,
.blockquote:last-child {
    margin-bottom:0;
}

h1 + p,
h1:first-child,
h2:first-child,
.h1 + p,
.h1:first-child,
.h2:first-child,
h3:first-child,
h4:first-child,
h5:first-child,
h6:first-child,
p:first-child,
address:first-child,
h1 + address,
h2 + address,
.h1 + address,
.h2 + address,
h3 + address,
pre:first-child,
h1 + pre,
h2 + pre,
.h1 + pre,
.h2 + pre,
h3 + pre,
img.floatleft ~ h1,
img.floatleft ~ h2,
img.floatleft ~ .h1,
img.floatleft ~ .h2,
img.floatleft ~ h3,
img.floatleft ~ h4,
img.floatleft ~ h5,
img.floatleft ~ h6,
img.floatleft ~ p,
h1 + .floatleft + p,
h1 + .floatright + p,
h2 + .floatleft + p,
h2 + .floatright + p,
.h1 + .floatleft + p,
.h1 + .floatright + p,
.h2 + .floatleft + p,
.h2 + .floatright + p,
h3 + .floatleft + p,
h3 + .floatright + p {
    padding-top: 0;
}

h1 + ul,
h1 + ol,
h2 + ul,
h2 + ol,
.h1 + ul,
.h1 + ol,
.h2 + ul,
.h2 + ol,
h3 + ul,
h3 + ol {
    margin-top: -.35em;
}

h1 + ul,
h1 + ol,
.h1 + ul,
.h1 + ol {
    padding-top: 0;
}

small, div:not(.hero) .small {
    font-size:90%;
    letter-spacing:.025em;
    line-height: 1em;
}

.sitetitle {
    font-size: 2.35em;
    font-weight: 300;
    color: #4D5051;
    display: block;
    padding: 1em 0;
    margin: 0;
    word-wrap: normal;
}
#sitename .sitetitle {
    transition: font-size 0.3s ease,
    height 0.3s ease,
    opacity 0.3s ease,
    padding 0.3s ease;
    font-size: 3em;
    line-height: 1.15em;
    clear: none;
}

.sitetitle:first-child {
    padding-top: 0;
}

.sitetitle:last-child {
    padding-bottom: 0;
}

/* ==========================================================================
    Tingle Modal
   ========================================================================== */

button.tingle-modal__close {
    display: none;
}

button.tingle-modal--close-btn {
    border: 0;
    position: absolute;
    top: 8px;
    right: 8px;
    background-color: transparent;
    font-size: 2rem;
    height: 2.2rem;
    width: 2.2rem;
    padding: 0;
    color: #6D6E71;
}

button.tingle-modal--close-btn:hover,
button.tingle-modal--close-btn:focus-visible {
    color: #c41230;
    background-color: #ffffff;
}

.tingle-modal-box .tingle-modal-box__footer {
    display: inline;
    border: 0;
    background: 0;
    width: 0;
    height: 0;
    padding: 0;
}

/* =======================================================================
Page Width (optimized for Macbooks & standard desktop screen resolutions)
========================================================================== */

.roof,
header > div,
header nav,
.hero > .text,
.hero .caption,
.grid,
.breadcrumbs,
.content {
    padding: 2em 9%;
    width: auto;
}

.menu-on .roof,
.menu-on header > div,
.menu-on header nav,
.menu-on .hero > .text,
.menu-on .hero .caption,
.menu-on .grid,
.menu-on .breadcrumbs,
.menu-on .content {
    padding-left: 2%;
    padding-right: 2%;
}


/* ==============================
Header & Roof (wordmark, search, header nav)
=============================== */

#container > header.float {
    background-color: rgba(255,255,255,.9);
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 10;
}

.roof {
    border-bottom: 1px solid rgba(0,0,0,.2);
    font-size: 90%;
    line-height: 0;
    padding-top: 0;
    padding-bottom: 0;
    z-index: 20; /* for mobile nav */
}

.roof > div {
    /*    border-bottom: 1px solid rgba(0,0,0,.2);*/
    position: relative;
    display: flex;
    flex-flow: nowrap row;
    align-items:stretch;
    align-content:stretch;
    justify-content: flex-start;
}

.float .roof > div {
    border-bottom: 1px solid rgba(0,0,0,.2);
}

.roof.invert,
.float .roof,
.float .roof.invert > div {
    border-bottom: 0 none;
}

.roof.invert a,
.roof a,
.roof a:hover,
#container > header a,
#container > header a:hover {
    border-bottom-color: transparent;
}

.roof a.wordmark,
.roof form {
    display: inline-block;
    width: 25%;
    flex: 0 1 auto;
}


/* Wordmark Image for all browsers except IE */
body:not(.ie) .roof.invert a.wordmark:focus,
body:not(.ie) .roof a.wordmark {
    background: url(../images/cmu-wordmark.png) no-repeat left center scroll transparent;
    background-size: contain;
}

body:not(.ie) .roof a.wordmark:focus,
body:not(.ie) .roof.invert .wordmark {
    background: url(../images/cmu-wordmark-white.png) no-repeat left center scroll transparent;
    background-size: contain;
}


/* IE doesn't scale images well =( */
body.ie .roof a.wordmark {
    background: url(../images/cmu-wordmark-small.png) no-repeat left center scroll transparent;
    background-size: contain;
}

body.ie .roof.invert .wordmark {
    background: url(../images/cmu-wordmark-white-small.png) no-repeat left center scroll transparent;
    background-size: contain;
}

.roof a.wordmark {
    border-bottom: none 0;
    min-height: 2.15em;
    margin: 1em 0 .65em;
    text-indent: -9999px;
    width: 31.333%;
    min-width: 300px;
}

.roof.invert .wordmark {
    margin: 6px 0 2px;
    width:25%;
}

/* http://webaim.org/techniques/css/invisiblecontent/ */
#skipnav {
    position:absolute;
    left:-10000px;
    top:auto;
    width:1px;
    height:1px;
    overflow:hidden;
    transition: none;
}

#skipnav:focus {
    left: 0;
    top: 0;
    width: auto;
    height: auto;
    z-index: 9999;
    background-color: #000 !important;
    outline-color: #000 !important;
}

.roof form {
    position: absolute;
    right: 0;
    top: 0;
    display: flex;
    flex-flow: nowrap row;
    align-items:stretch;
    align-content:stretch;
    justify-content: flex-start;
    height: calc(100% - 1.6em);
    padding: .8em 0;
    max-width:  300px;
}

.roof.invert form {
    height: 100%;
    padding: 0;
}

.roof .menu-btn + form { right: 3em }

.search label {
    height: 100%; /* for Safari */
    width: 100%;
}
.search label.searchSite, .search label:not(.searchSite) span {display: none}

.roof label.searchSite {
    display: none;
    position: absolute;
    letter-spacing: .025em;
    left: -105%;
    text-align: right;
    top: 30%;
}
.roof.invert label.searchSite {top: 20%}

.roof input[type="checkbox"] {
    margin: 0;
    vertical-align: baseline;
}

.search label.searchSite span {
    font-size: 90%;
    margin: 1px 0 0 .5em;
    float: right;
}

.roof input[placeholder="Search"] {
    background-color: rgba(0,0,0,.2);
    border: 0 none;
    color: #fff;
    height: 100%;
    margin: 0;
    padding: 0 30px 0 8px;
    width: calc(100% - 38px);
    flex: 0 1 auto;
}

.roof input[placeholder="Search"]:focus {
    outline: 0 none;
    background-color: rgba(0,0,0,.5);
}

/* override webkit autocomplete ugly pastel yellow background color */
.roof input[placeholder="Search"]:-webkit-autofill {
    -webkit-box-shadow: 0 0 0px 1000px #999 inset;
    box-shadow: 0 0 0px 1000px #999 inset;
}

.roof input::-webkit-input-placeholder {color:#fff}
.roof input:-moz-placeholder {color:#fff; opacity: 1}
.roof input::-moz-placeholder {color:#fff; opacity: 1}
.roof input:-ms-input-placeholder {color:#fff}

.search button {
    background: url(../images/icon-magnify.png) scroll no-repeat transparent 50% 50%;
    background-size: 50%;
    height: calc(100% - 1.6em);
    margin: .8em 0;
    padding: 0 14px;
    text-indent: -9999px;
    width: auto;
    display: block;
    position: absolute;
    right: 0;
    top: 0;
    border: 0 none;
}

.roof.invert .search button {
    height: 100%;
    margin: 0;
}

.roof.invert .search button:focus {
    background-blend-mode: difference;
}

.search button:hover {
    border: 0 none;
    outline: 0 none;
}

.search button:hover { background-color: inherit }

body:not(.mobile) #sitename {display: block !important}

#sitename div,
#sitename a {
    display: inline-block;
    vertical-align: middle;
}

#sitename,
#sitename a {
    box-sizing: border-box;
    color: #333;
    border: 0;
    padding-top: 0;
    padding-bottom: 0;
}

#sitename {
    padding-top: .5em;
    padding-bottom: .5em;
}

#sitename a:hover {
    color: #c00;
}

#sitename > div {
    padding-right: 2%;
    width:66.666%;
}

#sitename > a {
    padding: .5em 0 0 0;
    max-width: 31.333%;
    width: 100%;
    text-align: right;
}

#sitename > a:focus {
    background-color: transparent !important;
}

#sitename img {max-height: 150px}

#sitename h1,
#sitename h2 {
    clear: none;
}

#sitename h1 {
    font-size: 3em;
    line-height: 1.15em;
}

#sitename h2 {
    color: inherit;
    font-style: normal;
    margin-top: -1.5em;
    padding-top:0;
}

#sitename h2 a {
    vertical-align:inherit;
}


/*  =======================
Primary, Header Navigation
=========================== */

header nav {
    position: relative;
    clear: both;
    padding-top: 0;
    padding-bottom: 0;
    overflow: hidden;
}

#sitename + nav {padding-top: .65em}

#sitename + nav ul li {
    padding-top: .15em;
}

header nav ul {
    clear:both;
    display: flex;
    flex-flow: nowrap row;
}

header li,
header li:first-child,
header li:last-child {
    border-color: rgba(0,0,0,.2); /* sets the color for all li borders */
    border-left: 1px solid rgba(0,0,0,.2);
    border-bottom: 1px solid rgba(0,0,0,.2);
    clear: both;
    text-align: center;
    padding: .5em .35em;
    display: flex;
    align-items: center;
    flex: 1 1 auto;

    /* Solution for header nav? https://css-tricks.com/flexbox-truncated-text/ */
}

/* The "b" class is the alternate style for pages with heroes */
nav.b li { border-bottom: none; }

header li a,
header li a:visited {
    color: rgba(0,0,0,.65);
    display: block;
    font-size: 80%;
    font-weight: 700;
    line-height: 1.35em;
    margin: .15em 0;
    text-align: center;
    width: 100%;
}

header li:first-child {
    border-left-color: transparent;
    padding-left: 0;
}
header li:last-child {
    padding-right: 0;
}

header li a:hover,
header li.active > a,
header li.ancestor > a {
    color:#c00;
}

header li.ancestor,
header li.active {
    border-bottom-color:transparent;
}


/* ======================================
Side Navigation
========================================= */

.menu-btn {
    color: #4D5051;
    display: block;
    font-size: 2.5em;
    line-height: .85em;
    float: right;
    right: 0;
    top: 0;
    margin: 13px 0 0 0;
    display: block;
    position: absolute;
    transition: right linear 0.2s;
    padding: 0 0 5px 0;
    background-color: transparent;
    border: none;
}

div.invert .menu-btn {margin-top:5px} /* the inverted roof's menu-btn */

.menu-on .menu-btn { /* the "X" */
    color: #ddd;
    right: 20px;
    position: fixed;
    font-size: 2em;
    z-index: 1;
}

.menu-on .roof .menu-btn, /* the hamburger in the header */
nav.tree form { /* the mobile menu search box */
    display: none;
}

.menu-btn:visited,
.menu-btn:hover {
    color: inherit;
}

.menu-btn:hover {
    color: #c00;
    transition-delay: -1s;
    background-color: transparent;
}

.menu-on .menu-btn:hover {
    color: #fff;
}

.menu-on .roof form {
    right: 0;
}

.menu-btn b {
    display: block;
    font-weight: normal;
    line-height: 7px;
    transition: none !important;
}

.invert .menu-btn,
.invert .menu-btn:hover {
    background-color: transparent;
    text-shadow: none !important;
}

.invert .menu-btn:focus b {
    color: #c41230;
}

#container {
    position: relative;
    transition: width 0.3s ease;
    width: 100%;
    z-index: 100;
}

#overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background-color: transparent;
    z-index: 99;
    transition: background-color ease 0.3s;
}

.overlay-warning {
    position: relative !important;
    color: #fff;
    background: #ea0b0b !important;
    padding: 0 !important;
    width: 50% !important;
    font-size: 12px;
}

.menu-on #container {
    width: calc(100% - 300px);
    z-index: 101;
}
.menu-on #campusAlert {
    width: calc(100% - 300px);
}

.menu-on footer {border-right:1px solid rgba(255,255,255,.15)}

nav.tree {
    position: fixed;
    top: 0;
    z-index: 99;
    right: -320px;
    width: 316px;
    height: 100%;
    background-color: #333 !important;
    box-sizing: border-box;
    opacity: 0;
    padding: 3.25em 0;
    transition: right 0.2s ease; /* for touch */
    overflow: auto;
}

.menu-on > nav.tree {
    right: -16px;
    opacity: 1;
    z-index: 101;
}

nav.tree h1 {
    padding: 0 1em .35em;
    font-size: 1.5em;
}

nav.tree li.active:not(.ancestor):not(.arrow) > a,
nav.tree li > a:hover:not(.arrow),
.no-js footer nav li.active > a,
.no-js footer nav li > a:hover,
.no-js footer nav li > a:focus {
    background-color: transparent;
}

nav div > ul > .ancestor,
nav div > ul > .active.parent {
    background-color:rgba(255,255,255,.1);
}

nav a {
    border: none !important;
    display: block;
    transition: background-color 0.1s ease;
}

.nav .nav-list li ul {display: none}
.no-js .nav .nav-list li ul {display: block}

.nav .nav-list li li a,
footer nav li a,
nav.tree li a {
    padding: .5em 2em;
    padding-bottom: .5em !important;
    line-height: 1.5em;
}

footer nav li a { margin-left: -1em }

.nav .nav-list li li li a,
footer nav li li a,
nav.tree li li a { padding-left: 3em }

.nav .nav-list li li li a,
footer nav li li li a,
nav.tree li li li a { padding-left: 4.5em }

.nav .nav-list li li li li a,
footer nav li li li li a,
nav.tree li li li li a { padding-left: 6em }

.nav .nav-list li li li li li a,
footer nav li li li li li a,
nav.tree li li li li li a { padding-left: 7.5em }

.nav .nav-list li li li li li li a,
footer nav li li li li li li a,
nav.tree li li li li li li a { padding-left: 9em }

footer nav li li li li li li li a,
nav.tree li li li li li li li a { padding-left: 10.5em }

nav.tree li a { padding-right: 40px }

nav.tree div > ul > li > a:not(.arrow),
footer nav > ul > li > a {
    font-weight: 700;
}

nav.tree li:not(.ancestor):not(.active) > ul {
    display: none;
}

nav.tree div {
    position: relative;
    overflow: hidden;
}

nav.tree div > ul {
    border-top: 1px solid rgba(255,255,255,.15);
    font-size: 85%;
    position: relative;
}

nav.tree ul {
    display: block;
}

nav.tree div > ul > li:last-child {margin-bottom: 2em}

nav.tree ul li,
nav.tree ul li ul li {
    padding: 0;
}

.grid.nav .nav-list h1 {
    font-size: 100%;
    text-transform: none;
}

nav.tree div > ul > li:not(.secondary) > a {letter-spacing: .05em}

nav.tree div > ul > li,
nav.tree div > ul > li.active {
    border-bottom: 1px solid rgba(255,255,255,.15);
}

nav.tree div > ul > li.secondary {
    border:none;
    transition: padding-top 0.3s ease;
}
nav.tree div > ul > li.secondary > a:not(.arrow) {font-weight:normal}

nav a {-webkit-tap-highlight-color: transparent}

nav.tree li.parent {
    overflow: hidden;
    position: relative;
}

nav.tree button.arrow {
    font-size: 200%;
    padding: 0;
    position: absolute;
    top: 0;
    right: 25px;
    display: block;
    transition:
            color 0.3s ease,
            transform 0.2s ease;
    width: 30px;
    height: 30px;
    box-sizing: border-box;
    text-indent: -9999px;
    background-color: transparent;
    border: none;
    margin: 0;
}

nav.tree button.arrow:after {
    content:'\203a' / '';
    display:block;
    text-indent: 0;
    line-height: 0;
    position: absolute;
    left: 12px;
    top: 12px;
    transition: left 0.2s ease;
}

nav.tree .expand > button.arrow { transform: rotate(90deg) }


/* ================
Main page #content
================== */

.breadcrumbs {
    font-size: 80%;
    letter-spacing: .025em;
    padding-bottom: 3em;
}

.breadcrumbs + div.boxes:not(.grey):not(.darkgrey):not(.red):not(.gold):not(.teal):not(.blue):not(.green):not(.darkgreen),
.breadcrumbs + div.content:not(.grey) {
    padding-top: 0;
}

#content > div,
form, table {line-height: 1.65em}

/*
Prevent floated content from running into next section …
In TinyMCE, when align right button is used on certain elements,
it adds float style instead of text align. :/
*/
#content > div:after {
    clear: both;
    content: " ";
    display: block;
}

.scrolltop.btn {
    position: fixed;
    bottom: 2vw;
    right: calc(-2vw - 40px);
    z-index: 100;
    font-size: 2em;
    padding: 0;
    width: 40px;
    height: 40px;
    text-align: center;
    border-bottom: 5px solid transparent;
    margin: 0;
}

.scrolltop.on {
    right: 2vw;
}

#content > div.content:first-child,
#content > div.grid:first-child:not(.invert) {padding-top:3em}

header.float + #content {height: 100vh}

/* CMS-2883 - Force Kaltura Embeds to not use inline height/width; Use aspect ratio instead. */
[id*="kaltura_player_"] {
    aspect-ratio: 16 / 9;
    width: auto !important;
    height: auto !important;
}

/* ========================
Rules for Hero Height

Fullscreen
- height: 100vh

Non-fullscreen video
- always 16:9

Float
- height: 75vh
- min-height: 500px

Non-float (always 2:1)
- height: 50vw

Non-float Mobile
- min-height: 400px
======================== */

#content .hero,
#content > .js-flickityCustom:first-child {
    background-color: #000;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    height: 49.5vw; /* .5 is to compensate for scroll bar */
    overflow: hidden;
    position: relative;
    z-index: 1;
}

header.float + #content .hero,
header.float + #content > .js-flickityCustom:first-child {
    background-position: center 0;
    height: 75vh;
    min-height: 500px;
}

.tall .flickity-viewport,
header.float + #content .tall .hero,
header.float + #content > .js-flickityCustom.tall:first-child,
header.float + #content .tall {
    height: 100vh;
    max-height: 1500px;
}
.hero {
    align-content: center;
}
#content .hero .text {
    background-color: rgba(0,0,0,.7);
    box-sizing: border-box;
    color: #fff;
    margin-inline: auto;
    padding-inline: 4%;
    text-align: center;
    width: fit-content;
}

header.float + #content .hero .text {bottom: 8%}

/*
Trick to tame Tubular YouTube iframe inspired by ...
https://www.smashingmagazine.com/2014/02/making-embedded-content-work-in-responsive-design/
*/

.tubular {
    /* This hides the YouTube title & related videos, as they can't be hidden via the API. */

    /* make iframe height extend far beyond parent container */
    --hero-iframe-height: 154%;
    /* center iframe vertically */
    --hero-youtube-hide-title-bottom: calc((100% - var(--hero-iframe-height)) * .5);

    /* width of side nav when collapsed */
    --sidenav-width: 0px;

    /* calculate 16:9 ratio as a decimal */
    --vid-height-ratio: calc(9 / 16);
}

.menu-on header + #content .tubular,
.menu-on header + #content #tubular-container {
    --sidenav-width: 300px;
}

header:not(.float) + #content .tubular,
header:not(.float) + #content #tubular-container {
    /* IE11 doesn't like CSS variables; just use 75vh instead */
    height: 75vh;

    --non-float-height: calc(100vw * var(--vid-height-ratio));
    height: calc(var(--non-float-height) - (var(--sidenav-width) * var(--vid-height-ratio)));

    /* makes hero videos 4px wider than the container so no black bars show up on the sides of the video */
    width: calc(((var(--non-float-height) / var(--vid-height-ratio)) - var(--sidenav-width)) + 4px);
}

header:not(.float) + #content .tubular,
.menu-on header:not(.float) + #content .tubular {
    width: 100%;
}

header:not(.float) + #content #tubular-player {
    height: var(--hero-iframe-height);
    bottom: var(--hero-youtube-hide-title-bottom);
    left: 0;
}

header.float + #content #tubular-container {
    --hero-height: 75vh;
    height: 100vh;
    width: calc(100vh / var(--vid-height-ratio));
    min-width: 100%;
}

header.float + #content .tall #tubular-container {
    --hero-height: 100vh;
}

#content .tubular {
    height: auto;
    height: var(--hero-height);
}

.ie #tubular-container {
    display: none !important;
}

#tubular-container {
    overflow: hidden;
    position: relative;
}

#tubular-player {
    position: absolute;
    width: 101%;
    max-width: none;
    transition: right .3s ease;

    --hero-container-width-overflow: calc(100% - 100vw);
    right: calc((var(--hero-container-width-overflow) + var(--sidenav-width)) * .5); /* center horizontally */
    height: var(--hero-iframe-height);

    --hero-container-height: 100%;
    --hero-iframe-height-overflow: calc(var(--hero-container-height) - var(--hero-iframe-height)); /* = a negative percentage */

    /* we have to calculate 2x the size so it frames correctly, etc. etc. */
    --convert-negative-percentage: calc(var(--hero-iframe-height-overflow) + (var(--hero-container-height) * 2));
    --hero-viewport-height-overflow: calc(var(--convert-negative-percentage) - 100vh);

    bottom: calc((var(--hero-viewport-height-overflow) - var(--hero-height)) * .5); /* center vertically */
    min-height: calc(100vw * var(--vid-height-ratio)); /* make sure min height is 16:9 */
}

@media only screen and (min-width: 1700px) {
    .menu-on header + #content .tubular,
    .menu-on header + #content #tubular-container {
        --sidenav-width: 450px;
    }
}

#tubular-shield {
    width: 100%;
    height: 100%;
    z-index: 2;
    position: absolute;
    left: 0;
    top: 0;
}

#pause-play-toggle-button {
    display: none;
}

@media screen and (min-width: 960px) {

    #pause-play-toggle-button {
        --pause-button-size: calc(1rem * 2.5);
        --container-padding: 8vw;
        background-color: red;
        position: absolute;
        left: calc(100vw - var(--container-padding) - var(--pause-button-size) - var(--sidenav-width));
        bottom: -16px;
        z-index: 11;
        height: var(--pause-button-size);
        width: var(--pause-button-size);
        padding: .75rem .65rem .65rem;
        border: 0;
        background-color: rgba(255, 255, 255, .95);
        line-height: 0;
        fill: #c41230;
        cursor: pointer;
    }

    iframe + #pause-play-toggle-button,
    #tubular-container + #pause-play-toggle-button {
        display: block;
    }

}

.tubular-pause path {
    transform: skew(-64deg, 27deg) scale(3) translateX(-67%);
}

.icon-pause {
    width: 100%;
    height: 100%;
    transition: margin-left .2s ease;
}

#content .hero > div.text h1,
#content .hero > div.text h2 {
    flex: 0 0 100%;
    color: #fff;
    padding:0;
}

#content .hero > div.text h1 {
    font-size:3em; /* Same size as #sitename h1 */
}

#content .hero > div.text h2 {
    padding-top: 1.5em;
}

#content .hero .box {
    background-color: rgba(255,255,255,.9);
    bottom: 3.5em;
    color: #4D5051;
    padding: .65em 1em;
    position: absolute;
    border-bottom-color: transparent;
    width: calc(41% - 2em);
    z-index: 10;
}

#content .hero .small {width:calc(33.333% - 2em)}
#content .hero .large {width:calc(66.666% - 2em)}

#content .tall .box {bottom: 20%}
#content .hero .box.right {right: 9%}
#content .hero .box.left {left: 9%}
.menu-on #content .hero .box.right {right: 2%}
.menu-on #content .hero .box.left {left: 2%}

#content .hero .box h1 {
    line-height: 1.25em;
    margin: 0;
    padding: 0;
    border-bottom-color: transparent;
}

#content .hero .box p {
    padding: .65em 0 0;
    margin: 0;
}

#content .hero a.box:hover {
    background-color: #fff;
}

#content .hero a.box:hover h1 {
    color: #c00;
}

.hero .caption,
#content .hero caption {
    background-color: rgba(255,255,255,.9);
    bottom: 8%;
    display: block;
    font-size: 80%;
    left: 0;
    padding: .5em 1em .35em 9%;
    position: absolute;
    font-style: italic;
    z-index: 50;
    width: 50%;
    box-sizing: border-box;
}


/* ==================
Grid Areas
===================== */

.grid {
    display: flex;
    flex-flow: wrap row;
    align-items:stretch;
    align-content:stretch;
    overflow: hidden;
}

.grid > h1 {
    flex: 0 0 100%;
    padding-bottom: .5em;
    z-index: 2;
}

.grid > div {
    display: inline-block;
    padding-top: 1.5em;
    padding-bottom: 1.5em;
    padding-right: 2%;
    position: relative;
    vertical-align: top;
}

.column2 > div {width:48%}
.column3 > div {width: 31.333%}
.column4 > div {width: 23%}

.breadcrumbs + .grid {
    padding-top: 0;
}

/* Photo Grid */

div.photo {
    background-color: transparent;
    margin: 1.5em 2% 1.5em 0;
    padding:0 !important;
    height: 100%;
    min-height: 100px;
    overflow: visible;
}

.photos div.photo {margin: 0}
.column2.photos div.photo {
    flex: 0 1 50%;
}
.column3.photos div.photo {
    flex: 0 1 33.333%;
}
.column4.photos div.photo {
    flex: 0 1 25%;
}


.grid > div.photo div,
.grid.photos > div div {
    background: linear-gradient(transparent, rgba(0,0,0,.65), #000);
    bottom: 0;
    padding: 1em 1em .65em;
    position: absolute;
    width: calc(100% - 2em + 1px);
    z-index: 1;
}

.grid > div.photo a:focus div,
.grid.photos > div a:focus div {
    background: transparent;
}

.photo a,
.invert .photo a,
.photo a:hover {
    border-color: transparent;
    border: 0 none !important;
    color: #fff;
}

.grid > div.photo > a:hover h2 {
    color: #fff;
}

.grid > div.photo > a:hover span {
    opacity: .5;
    z-index:0;
    position:relative;
}

.grid > div.photo > a:focus:hover span {
    opacity: 1;
}

.grid > div.photo div h2,
.grid > div.photo div p {
    color: #fff;
    padding: 0;
    border: 0 none;
    z-index:1;
    position:relative;
    line-height: 1.5em;
}

.grid div.photo img {
    max-width: 100%;
    width: 100%;
}

/*  =========
    Events
    ========= */

.events ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.events li {
    position: relative;
    padding: 0;
}

.events ul li a,
.events ul li i {
    border-bottom-color: transparent;
    display: block;
    font-size: 90%;
    font-style: normal;
    font-weight: 400;
    line-height: 1.5em;
    margin-bottom: 1em;
    min-height: 4.15em;
    padding: .25em .25em .25em 85px;
    text-transform: none;
    width: auto;
}

.events ul li a:hover {
    background-color: rgba(0,0,0,.1);
}

.invert .events ul li a:hover {
    background-color: rgba(0,0,0,.5);
}

.events ul li a:after {display: none}

.events ul li a > span,
.events ul li i > span {
    left: 0;
    position: absolute;
    top: .5em;
    text-shadow:none;
}

.events ul li a:hover > span {
    left: .5em;
    box-shadow: 0 0 5px rgba(0,0,0,.2);
}

.events li span {
    background-color: #fff;
    border: 1px solid #ccc;
    color: #c00;
    display: block;
    font-size: 90%;
    padding: 0 0 .5em;
    line-height: 1em;
    text-align: center;
    width: 70px;
}
.invert .events li span {border: none}

.events li span span {
    background-color: #eee;
    border:0 none;
    color: #4D5051;
    font-size: inherit;
    margin-bottom: .5em;
    padding-top: .5em;
    width: 100%;
}


/*  Boxes: Fixed-height Grids (Cards) */

.boxes {
    display: flex;
    flex-flow: wrap row;
    align-items:stretch;
    align-content:stretch;
    justify-content: flex-start;
    padding-bottom: .5em;
}

.boxes > div:nth-of-type(2n),
.boxes > div:nth-of-type(3n),
.boxes > div:nth-of-type(4n),
.boxes > div {
    background-color: #fff;
    border: 1px solid rgba(0,0,0,.2);
    box-sizing: border-box;
    margin: 0 1% 2em 0;
    padding: 1vw;
    font-size:90%;
    flex: 0 0 auto;
}

.column2.boxes > div,
.column3.boxes > div {
    margin-right: 2%;
}
.column4.boxes > div {
    width:24%;
}

@media only screen and (min-width: 768px) {
    /* formula for even gap between items: calc((100% - (n - 1) * g) / n) */
    /* n = number of columns */
    /* g = size of gap */

    .grid.column2:not(.photos),
    .grid.column3:not(.photos),
    .grid.column4:not(.photos) {
        gap: 1rem;
    }

    .grid.column2:not(.photos) > div {
        width: calc((100% - (2 - 1) * 1rem) / 2);
    }

    .grid.column3:not(.photos) > div {
        width: calc((100% - (3 - 1) * 1rem) / 3);
    }

    .grid.column4:not(.photos) > div {
        width: calc((100% - (4 - 1) * 1rem) / 4);
    }

    .grid.column2:not(.photos) > div,
    .grid.column3:not(.photos) > div,
    .grid.column4:not(.photos) > div {
        margin-right: 0;
    }

    .grid.column2:not(.photos):not(.boxes) > div,
    .grid.column3:not(.photos):not(.boxes) > div,
    .grid.column4:not(.photos):not(.boxes) > div {
        padding-right: 0;
    }
}

/* Footer Nav */

.grid.nav {font-size: 100%}

.grid.nav > div {
    padding-top:0;
    padding-bottom:0;
}

.grid.nav .nav-list h1 {
    font-size: 1em;
    letter-spacing: .025em;
    text-transform: uppercase;
    font-weight: 700;
    line-height: 1.65em;
}

.grid.nav .nav-list ul {
    margin-top: 0;
}

.grid.nav .nav-list li {
    margin-left: 0;
    list-style-type: none;
}

.grid.nav .nav-list ul a {
    display: inline;
    border-bottom: transparent;
}

.grid.nav .nav-list ul li:last-child {
    margin-bottom: 1px;
}


/* Grid & Sidebar Lists */

.content .sidebar .list {
    padding-bottom: .5em;
}

.list ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.list li {
    border-top: 1px solid rgba(0,0,0,.2);
    padding: 0;
    position: relative;
    margin: 0;
}

.sidebar .list > ul:first-child > li:first-child {
    border:0;
    margin-top: -1em;
}

.invert.list li,
.invert .list li {
    border-top: 1px solid rgba(255,255,255,.5);
}

.grid .list ul:last-child {border-bottom: 1px solid rgba(0,0,0,.2)}
.invert .list ul:last-child {border-bottom: 1px solid rgba(255,255,255,.5)}

.list li a,
.list li a:visited {
    border-bottom: 0 none;
    color: rgba(0,0,0,.6);
    display: block;
    letter-spacing: .025em;
    line-height: 1.35em;
    margin: 0;
    padding: 1.5em 0 !important;
}

.list li a:after {
    content: " \25BA" / "";
    font-size: .65em;
    position: absolute;
    right: 0;
    top: 39%;
}

.list li a:hover:after,
.list li a:hover {
    border-bottom: 0 none;
    color: #c00;
}

.invert .list li a,
.invert.list li a {
    color: rgba(255,255,255,.85);
    border-bottom:0 none;
}

.invert .list li a:hover:after,
.invert .list li a:hover,
.invert.list li a:hover:after,
.invert.list li a:hover {
    color: #fff;
    border-bottom:0 none;
}


/* News & Events Grids */

.news > div {
    flex: 0 0 auto;
    display: flex;
}

.news div.img {
    background: scroll center center no-repeat #bbb;
    background-size: cover;
    text-indent: -9999px;
    width: 100%;
}

.news.column2 div.img {height: 300px}
.news.column3 div.img {height: 225px}
.news.column4 div.img {height: 150px}

.news div a {
    display: block;
    border: 0 !important;
    padding-bottom: 0 !important;
    width: 100%;
}

.news div a small,
.news div a span {
    color: #4D5051;
    line-height: 1.65em;
}

.news div a small {padding-top: .5em}
.news:not(.boxes) a span {padding-bottom: .65em}

.news div a:hover {
    border-color: transparent;
}

.news div a:hover div.img {
    opacity: .65;
}

.news div a > :not(div) {display: block}

.news div a h2 {
    padding: .5em 0;
    color: inherit;
}

.news.globe div a,
.news.plaid div a,
.news.grey div a,
.news.darkgrey div a,
.news.red div a,
.news.teal div a,
.news.blue div a,
.news.green div a,
.news.darkgreen div a {
    background-color: #fff;
}

.news.globe:not(.boxes) a > :not(div),
.news.plaid:not(.boxes) a > :not(div),
.news.grey:not(.boxes) a > :not(div),
.news.darkgrey:not(.boxes) a > :not(div),
.news.red:not(.boxes) a > :not(div),
.news.gold:not(.boxes) a > :not(div),
.news.teal:not(.boxes) a > :not(div),
.news.blue:not(.boxes) a > :not(div),
.news.green:not(.boxes) a > :not(div),
.news.darkgreen:not(.boxes) a > :not(div) {
    padding-left: 4%;
    padding-right: 4%;
}

.boxes.news > h1 {padding-bottom: .65em}

.icon-cal:before {
    content: "\2b12" / "";
    font-size: 2.15em;
    padding-right: .35em;
    opacity: .5;
    position: relative;
    top: 3px;
}


/* ==================
Content Areas
===================== */

.content > div {
    display: inline-block;
    vertical-align: top;
}

.content > div:first-child {
    width: 60%;
}

.wide > div:first-child {
    width: 100%;
}

.content .sidebar {
    margin-left: 8.666%;
    width: 31.333%;
}

.content .sidebar div {
    font-size: 90%;
    margin-top: 2em;
    padding: 1.5em;
    width: auto;
}

.content .sidebar div:after { /* to prevent float issues */
    content:"";
    display:block;
    clear:both;
}

.content .sidebar div.simple {
    margin-top: 3em;
    padding: 0 0 1.5em 0;
}

.content .sidebar div:first-child {margin-top: 0}

.content .sidebar div.left-rule {
    border-left: 1px solid rgba(0,0,0,.2);
    padding: 0 0 0 1.5em;
}

.collapsed {
    clear: both;
    z-index: 1;
}
.collapsed a:before {
    color: #c00;
    content: "\203a" / "";
    display: block;
    float: left;
    font-size: 135%;
    margin-right: .35em;
    margin-top: -2px;
    transform: rotate(0);
    transform-origin: 60% 60%;
    position: relative;
    z-index: 0;
}

.collapsed.open a:before {
    transform: rotate(90deg);
}

.invert .collapsed a:before {color: rgba(255,255,255,.85)}

h2.collapsed {padding-bottom:0}
h2.collapsed + div {margin-top:1em !important}

.grey .collapsed > a,
.collapsed > a {
    border-color: transparent;
}

.collapsed:hover a {
    color: #f00;
    border-bottom: 1px solid;
}


/* ==================
News & Bio
===================== */

.indicia {display:inline-block}

.content > div > .floatleft + h1,
.content > div > .floatleft + h2 {
    clear: none;
    padding-top: 0;
}

.contact {
    clear: both;
    position: relative;
    margin: .65em 0;
    min-height: 2em;
    font-size: 90%;
}

h1+.contact {
    margin-top: -.5em;
}

.date + h1 {padding-top:0}

.contact > p {
    display: inline;
    font-style: italic;
    width: calc(100% - 10em);
    padding-top: 0;
    padding-bottom: .35em;
}

body .contact > p a {font-style: normal}
body:not(.no-js) .contact > p a {
    display: inline-block;
    text-indent: -9999px;
}

.contact address {
    display: inline-block;
    padding: 2em 2em 1em 0;
    font-style: normal;
    width: calc(50% - 2em);
    vertical-align: top;
}

p+a+.address > address {padding-top: 1em}

#contact ul,
.contact address ul {
    padding: 0;
    margin-top: 0;
    list-style-type: none;
}

.contact address li {
    margin-left: 0;
}

.contact .collapsed {
    margin-top: .25em;
}

.contact .collapsed a {
    font-size: 90%;
}

.inquiry.open:before {
    transform: rotate(90deg);
}

.no-js .inquiry { display: none }

/* Remove link border & padding for AddThis */
.atss a,
.addthis_toolbox a,
.addthis-smartlayers a,
#at3win a {
    border:0;
    padding:0;
}

.no-js .loadmore {display: none}

.loadmore {
    display: block;
    margin: 1.5em auto;
    padding: 0 25%;
    width: 50%;
    z-index: 2;
}

/* I know that this is ridiculous, and I'm sorry. */
.darkgrey .loadmore .btn,
.red .loadmore .btn,
.teal .loadmore .btn,
.blue .loadmore .btn,
.green .loadmore .btn,
.darkgreen .loadmore .btn {
    color: #fff;
    border-color: #fff;
}

.darkgrey .loadmore .btn:hover,
.red .loadmore .btn:hover,
.teal .loadmore .btn:focus,
.teal .loadmore .btn:hover,
.blue .loadmore .btn:hover,
.green .loadmore .btn:hover,
.darkgreen .loadmore .btn:hover {
    color: #fff;
    border-color: #fff;
    background-color: rgba(0,0,0,.35);
}

.boxes > h1.collapsed:not(.open) {padding-bottom:1.6em}
.boxes > h1.collapsed {padding-bottom:.65em}
.content > div > h1.collapsed:not(.open) {padding-bottom:.5em}

.tags {margin-top: 1.5em}
.tags .btn {margin-right: .5em}
.no-js .tags {display: none}

.stacked h2+h3 {
    padding-top: 0;
}

.stacked .collapsed {
    font-weight: 400;
}


/* ==========
Contact Icons
============== */

.icon {
    position: relative;
    margin-left: 40px;
    display: inline-block;
}


.icon:before {
    background: url(../images/sprites-icons-contact.png) 0 -5px no-repeat;
    background-size: auto 100%;
    content: "";
    display: block;
    height: 31px;
    width: 32px;
    position: absolute;
    left: -39px;
    bottom: -5px;
}

/* Adds padding to empty a.icon tags */
.icon:after {
    content: "";
    display: inline-block;
}
.icon.tel:before {background-position: -36px 0}
.icon.fax:before {background-position: -82px 0}
.icon.loc:before {background-position: -116px 0}

.icon-cal:before {
    content: "\2b12" / "";
    font-size: 2.15em;
    padding-right: .35em;
    opacity: .5;
    position: relative;
    top: 3px;
}

/* =======
    Links
    ======= */

a {
    color: #941120;
    border-bottom: 1px solid #941120;
    text-decoration: none;
}

#content a:not(.btn):not(.cta):not(.box):not(.scrolldown) {padding-bottom:1px}

a:hover {
    color: #f00;
    border-bottom-color: #f00;
}


/* ===================================
   Section Background Colors
   =================================== */

.grid {
    background-attachment: scroll;
    background-position: center center;
    background-repeat: no-repeat;
}

.invert h2,
.invert .h2,
.invert h3,
.invert h4,
.invert th {
    color:rgba(255,255,255,.95);
}

.invert thead,
.invert h1,
.invert .h1,
.invert h5,
.invert h6,
.invert b,
.invert strong {
    color: #fff
}

.invert a,
.invert h1 a:not(.btn):not(.cta),
.invert .h1 a:not(.btn):not(.cta),
.invert h2 a:not(.btn):not(.cta),
.invert .h2 a:not(.btn):not(.cta),
.invert h3 a:not(.btn):not(.cta),
.invert h4 a:not(.btn):not(.cta),
.invert h5 a:not(.btn):not(.cta),
.invert h6 a:not(.btn):not(.cta),
.invert p a:not(.btn):not(.cta),
.invert blockquote a:not(.btn):not(.cta),
.invert li a {
    color:#fff;
    border-bottom: 1px solid rgba(255,255,255,.75);
}

.invert a:hover {
    color: #fff !important;
    text-shadow:0 0 5px rgba(0,0,0,.5);
}

.invert {
    background-color:#4D5051;
    color:#fff;
}

.invert:not(footer) li {color:#fff}

.invert .rule-bottom {border-bottom: 1px solid rgba(255,255,255,.65)}

.invert .flickity-page-dots .dot {background-color: rgba(255,255,255,.75)}
.invert .flickity-page-dots .dot.is-selected {background-color: #fff}

/* the grey background doesn't need the invert class */
.grey:not(.plaid), .js-flickityCustom.grey .grid, .grey .flickity-viewport {background-color: #e0e0e0}

/* all other background colors NEED the invert class */
.darkgrey, .js-flickityCustom.darkgrey .grid, .darkgrey .flickity-viewport {background-color: #4D5051}
.red, .js-flickityCustom.red .grid, .red .flickity-viewport {background-color: #c41230}
.gold, .js-flickityCustom.gold .grid, .gold .flickity-viewport {background-color: #fdb515}
.teal, .js-flickityCustom.teal .grid, .teal .flickity-viewport {background-color: #008285}
.blue, .js-flickityCustom.blue .grid, .blue .flickity-viewport {background-color: #043673}
.green, .js-flickityCustom.green .grid, .green .flickity-viewport {background-color: #00853E}
.darkgreen, .js-flickityCustom.darkgreen .grid, .darkgreen .flickity-viewport {background-color: #1f4c4c}

/* override Christmas combinations ... maybe we should retire this rule? */
/* Commented out as part of CMS-2610
.red + .green, .red + .darkgreen {background-color: #008285}
.green + .red, .darkgreen + .red {background-color: #4D5051}
 */

/*  Don't forget to invert for first h1 in colored grids (for .news and .boxes).
    I know that I should have added a theme class to prevent this. Sorry. */
.darkgrey > h1, .red > h1, .teal > h1, .blue > h1, .green > h1, .darkgreen > h1,
.darkgrey > h1 a, .red > h1 a, .teal > h1 a, .blue > h1 a, .green > h1 a, .darkgreen > h1 a,
.darkgrey > h1 a:before, .red > h1 a:before, .teal > h1 a:before, .blue > h1 a:before, .green > h1 a:before, .darkgreen > h1 a:before {
    color:#fff;
    border-color: #fff;
}

.darkgrey > h1:hover a, .red > h1:hover a, .teal > h1:hover a, .blue > h1:hover a, .green > h1:hover a, .darkgreen > h1:hover a,
.darkgrey > h1 a:focus, .red > h1 a:focus, .teal > h1 a:focus, .blue > h1 a:focus, .green > h1 a:focus, .darkgreen > h1 a:focus {
    color:#fff;
    border-color: #fff;
    text-shadow:0 0 5px rgba(0,0,0,.5);
}


/*  =========
    Footer
    ========= */

footer.grid {
    background-color: #333;
    font-size: 90%;
    letter-spacing: .05em;
}

footer.grid h1,
footer.grid a,
footer.grid a:visited {
    border-bottom-color: transparent;
}

footer.grid a:hover {
    border-bottom: 1px solid;
}

footer ul {
    margin: 0;
    padding: 0;
}

footer div:first-child ul li {display: inline}

footer div:first-child ul li:after {
    content: " | " / "";
    padding: 0 .5em;
}

footer div:first-child ul li:last-child:after {
    content: none;
    padding: 0;
}

/* New Footer Social Icons */
.social-icons {
    margin: 0;
    padding: 0;
    font-size: 24px;
    transition: none;
}

.social-icons .icon {
    display: inline-block;
    width: 1em;
    height: 1em;
    stroke-width: 0;
    stroke: currentColor;
    fill: currentColor;
    margin-left: 0;
    transition: none !important;
}

.social-icons li {
    display: inline-block;
    padding: 0 0.25em;
}

.social-icons a {
    position: relative;
    padding: 0 !important;
    display: inline-block;
    height: 30px;
    transition: none !important;
}

.social-icons a:focus,
.social-icons a:focus-visible {
    background-color: #fff !important;
}
/*  =====================
    Social Icons (Three Sizes)
    Full Size
    1/2 Size
    1/3 Size
    ===================== */


ul.social {
    margin: 0;
    padding: 0;
}

.social a,
.social span {
    background:url(../images/sprites-social.png) 0 0 scroll transparent no-repeat;
    background-size:auto 100%;
    border-bottom: 0 none !important;
    display:inline-block;
    height:80px;
    margin: 0 6px 6px 0;
    padding-bottom: 0 !important;
    text-indent: -9999px;
    width:80px;
}

.social a:hover {
    opacity:.5;
    border-bottom: 0 none;
}

ul.social li {
    display:inline-block;
    padding:0;
    vertical-align: top;
    margin-left: 0;
}

.social .twitter {background-position: -86px 0}
.social .googleplus {background-position: -172px 0}
.social .linkedin {background-position: -258px 0}
.social .youtube {background-position: -344px 0}
.social .itunesu {background-position: -430px 0; border-radius: 50%}
.social .rss {background-position: -516px 0}
.social .tumblr {background-position: -602px 0}
.social .instagram {background-position: -688px 0}
.social .flickr {background-position: -774px 0}
.social .weibo {background-position: -860px 0}
.social .pinterest {background-position: -946px 0; width: 31px}
.social .vimeo {background-position: -1032px 0;}

.social .more {
    background-position: -1204px 0;
    position: relative;
    width: 43px;
}
.invert .social .more {background-position: -1118px 0;}

.social.half a,
.social.half span {
    height:40px;
    width:40px;
}

.social.half .twitter {background-position: -43px 0}
.social.half .googleplus {background-position: -86px 0}
.social.half .linkedin {background-position: -129px 0}
.social.half .youtube {background-position: -172px 0}
.social.half .itunesu {background-position: -215px 0}
.social.half .rss {background-position: -258px 0}
.social.half .tumblr {background-position: -301px 0}
.social.half .instagram {background-position: -344px 0}
.social.half .flickr {background-position: -387px 0}
.social.half .weibo {background-position: -430px 0}
.social.half .pinterest {background-position: -472px 0; width: 41px}
.social.half .vimeo {background-position: -516px 0}

.social.half .more {
    background-position: -602px 0;
    width: 22px;
}

.invert .social.half .more {background-position: -559px 0}

.social.third a,
.social.third span {
    height:30px;
    width:30px;
}

.social.third .twitter {background-position: -32px 0}
.social.third .googleplus {background-position: -65px 0}
.social.third .linkedin {background-position: -97px 0}
.social.third .youtube {background-position: -129px 0}
.social.third .itunesu {background-position: -161px 0}
.social.third .rss {background-position: -193px 0}
.social.third .tumblr {background-position: -226px 0}
.social.third .instagram {background-position: -258px 0}
.social.third .flickr {background-position: -290px 0}
.social.third .weibo {background-position: -322px 0}
.social.third .pinterest {background-position: -354px 0}
.social.third .vimeo {background-position: -387px 0}

.social.third .more {
    background-position: -451px 0;
    width: 17px;
}
.invert .social.third .more {background-position: -419px 0}


/*  ===============
    Form elements
    =============== */

input, textarea {
    background: #fff;
    border: 1px solid rgba(0,0,0,.35);
    font-size: 1em;
    margin: .25em 0;
    padding: .35em .5em;
    position:relative;
    display: inline-block;
    max-width: calc(100% - 6px - .5em);
}

input[type=submit] {margin: 0}

input[type="radio"],
input[type="checkbox"] {
    margin-left: 2px;
}

input:not([type="radio"]),
textarea,
select {
    border-radius:0;
}

select {
    background:#fff;
    border: 1px solid rgba(0,0,0,.35);
    color:#777;
    margin: .25em 0;
    padding: .25em;
    max-width: 100%;
}

textarea {
    max-height: 20em;
    min-height: 5em;
    min-width: 50%;
    max-width:calc(100% - 2px - .5em);
    overflow: auto;
    width: 100%;
}



/* ================
    Buttons & CTAs
    =============== */

a.btn,
a.btn:visited,
button,
input[type=submit] {
    background-color: rgba(0,0,0,.6);
    border: 0 none;
    border-top: 2px solid transparent; /* so regular .btn is as tall as ghost */
    border-bottom: 2px solid rgba(0,0,0,.35);
    border-radius:0; /* override browsers who round teh buttons */
    color: #fff;
    display: inline-block;
    line-height: 1.15em;
    margin-bottom:1em;
    padding:1em 1.35em;
    outline: none;
}

p > a.btn:first-child,
p > a.cta:first-child {
    margin-top: .35em;
}

a.btn.small,
a.btn.small:visited,
button.small,
input[type=submit].small {
    padding: .35em .5em;
}

a.btn:last-child,
button:last-child,
input[type=submit]:last-child {margin-bottom:0}

a.btn.wide {
    display: block;
    padding: 1.5em;
    text-align: center;
}

a.btn:hover,
button:hover,
input[type=submit]:hover {
    background-color: rgba(0,0,0,.8);
}

a.btn.ghost,
a.btn.ghost:visited,
button.ghost,
input[type=submit].ghost {
    background-color: transparent;
    border: 2px solid rgba(0,0,0,.5);
    color: rgba(0,0,0,.6);
}

a.btn.ghost:hover,
button.ghost:hover,
input[type=submit].ghost:hover {
    color: #c00;
    border-color: #c00;
}

.invert a.btn.ghost,
.invert a.btn.ghost:visited,
.invert button.ghost,
.invert input[type=submit].ghost {
    color: #fff;
    border-color: #fff;
}

.invert a.btn.ghost:hover,
.invert button.ghost:hover,
.invert input[type=submit].ghost:hover {
    color: #fff;
    border-color: #fff;
    background-color: rgba(0,0,0,.35);
}

.cta, a.cta {
    border-bottom-color: transparent;
    color: #4D5051;
    display: inline-block;
    font-size: 90%;
    font-weight: 700;
    margin-right: .15em;
    text-transform: uppercase;
}

.cta:after {
    content: " \25BA" / "";
    display: inline;
    position: relative;
    font-size: 75%;
    top: -1px;
    margin-left: .15em;
}

.cta:hover,
a.cta:hover,
a:hover .cta {
    color: #c00;
}

.invert .cta {
    border-bottom: none;
    color: #fff;
}



/* ================================
    Helper Classes
    =============================== */

.circle img,
img.circle {border-radius: 50%}

.pointer {
    cursor:pointer;
    display: block;
}

.hr {
    border-top: 1px solid rgba(0,0,0,.2);
    clear:both;
    display:block;
    margin: 1em 0;
    max-width: 100%;
}

.border {border: 1px solid rgba(0,0,0,.2)}
.noborder,
.noborder td,
.noborder th {
    border: none !important;
    padding-left: 0;
}

.noborder td:last-child,
.noborder th:last-child {
    padding-right: 0;
}

.rule-top {
    border-top: 1px solid rgba(0,0,0,.2);
}

.rule-bottom,
p.rule-bottom {
    border-bottom: 1px solid rgba(0,0,0,.2);
    padding-bottom: .35em;
    margin-bottom: .35em;
}

.invert .hr,
.invert .border,
.invert .rule-top,
.invert .rule-bottom {
    border-color: rgba(255,255,255,.5);
}

.invert noscript,
.invert div[role="alert"],
.invert .alert {
    background-color: #fff;
    padding: .5em .65em;
}

noscript,
noscript a,
noscript a:visited,
noscript a:hover,
div[role="alert"],
p[role="alert"],
p[role="alert"] a,
p[role="alert"] a:visited,
p[role="alert"] a:hover,
.alert,
.alert p,
.alert a,
.alert a:visited,
.alert a:hover {
    color:red !important;
    text-shadow: none;
}

noscript a,
p[role="alert"] a,
.alert a {border-bottom: 1px solid !important}

div:not(.hero) > .caption {
    max-width:36%;
    font-size:90%;
}

.caption img {width:100%}

.floatleft,
img.floatleft,
.floatleft img,
.floatleft.caption {
    float:left;
    margin:0 30px 15px 0;
    padding-bottom: 0;
    max-width: 100%;
}

.floatright,
img.floatright,
.floatright img,
.floatright.caption {
    float:right;
    margin:0 0 15px 30px;
    padding-bottom: 0;
    max-width: 100%;
}

.caption.thumb,
.thumb img {margin-bottom:0}

.aligncenter {text-align:center !important}
.alignright {text-align:right !important}

.clear {
    clear:both;
    display: block;
}

.hide {display: none !important}
.show {display: block !important}

.fixed {position: fixed}

.overflow-hidden { overflow: hidden !important }
.overflow-auto { overflow: auto !important }

.error,
.invert .error {
    background: #fdd;
    padding: 1em !important;
    display: block;
    border: 1px solid;
    color: #555;
}

a.external:after {
    content: url(../images/icon-leave-site.png);
    padding-left: 5px;
    display: inline;
    vertical-align: top;
    border: none;
    position: relative;
    top: 0;
    filter: grayscale(1);
    opacity: .85;
}

a.external:focus:after,
nav.tree a.external:hover:after,
nav.tree a.external:after {
    filter: invert(1) grayscale(1) brightness(2);
}

nav.tree a.external:focus:after,
a.external:hover:after {
    filter: none;
    opacity: 1;
}


/*! Flickity v3.0.0
https://flickity.metafizzy.co
---------------------------------------------- */

.flickity-enabled {
    position: relative;
}

.flickity-enabled:focus { outline: none; }

.flickity-viewport {
    overflow: hidden;
    position: relative;
    height: 100%;
    touch-action: pan-y;
}

.flickity-slider {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
}

.flickity-rtl .flickity-slider {
    left: unset;
    right: 0;
}

/* draggable */

.flickity-enabled.is-draggable {
    -webkit-tap-highlight-color: transparent;
    user-select: none;
}

.flickity-enabled.is-draggable .flickity-viewport {
    cursor: move;
    cursor: grab;
}

.flickity-enabled.is-draggable .flickity-viewport.is-pointer-down {
    cursor: grabbing;
}

/* ---- flickity-cell ---- */

.flickity-cell {
    position: absolute;
    left: 0;
}

.flickity-rtl .flickity-cell {
    left: unset;
    right: 0;
}

/* ---- flickity-button ---- */

.flickity-button {
    position: absolute;
    background: hsl(0 0% 100% / 75%);
    border: none;
    color: #333;
}

.flickity-button:hover {
    background: white;
    cursor: pointer;
}

.flickity-button:focus {
    outline: none;
    box-shadow: 0 0 0 5px #19F;
}

.flickity-button:active {
    opacity: 0.6;
}

.flickity-button:disabled {
    opacity: 0.3;
    cursor: auto;
    /* prevent disabled button from capturing pointer up event. #716 */
    pointer-events: none;
}

.flickity-button-icon {
    fill: currentColor;
}

/* ---- previous/next buttons ---- */

.flickity-prev-next-button {
    top: 50%;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    /* vertically center */
    transform: translateY(-50%);
}

.flickity-prev-next-button.previous { left: 10px; }
.flickity-prev-next-button.next { right: 10px; }
/* right to left */
.flickity-rtl .flickity-prev-next-button.previous {
    left: auto;
    right: 10px;
}

.flickity-rtl .flickity-prev-next-button.next {
    right: auto;
    left: 10px;
}

.flickity-prev-next-button .flickity-button-icon {
    position: absolute;
    left: 20%;
    top: 20%;
    width: 60%;
    height: 60%;
}

/* ---- page dots ---- */

.flickity-page-dots {
    position: absolute;
    width: 50%;
    bottom: 15px;
    text-align: center;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    left: calc(50%);
}

.flickity-rtl .flickity-page-dots { direction: rtl; }

.flickity-page-dot {
    display: block;
    width: 1rem;
    height: 1rem;
    padding: 0;
    margin: 0 1.25rem;
    background: hsl(0 0% 20% / 25%);
    border-radius: 50%;
    cursor: pointer;
    appearance: none;
    border: none;
    text-indent: -9999px;
    overflow: hidden;
}

.flickity-rtl .flickity-page-dot {
    text-indent: 9999px;
}

.flickity-page-dot:focus {
    outline: none;
    box-shadow: 0 0 0 5px #19F;
}

.flickity-page-dot.is-selected {
    background: hsl(0 0% 20% / 100%);
}
.flickity-cell {
    position: absolute !important;
    left: 0
}
.js-flickityCustom .flickity-viewport:after {
    content: " ";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
}

.js-flickityCustom {
    background-color:transparent;
    position: relative;
    width: 100%;
    -ms-touch-action: pan-y;
}

.no-js .js-flickityCustom {
    cursor: auto;
    display: block;
    width: auto;
    height: auto !important;
}

.js-flickityCustom .flickity-viewport {
    position: relative;
    -webkit-transform: translate3d(0px, 0px, 0px);
}

.js-flickityCustom  .flickity-viewport {
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility:    hidden;
    -ms-backface-visibility:     hidden;
    -webkit-transform: translate3d(0,0,0);
    -moz-transform: translate3d(0,0,0);
    -ms-transform: translate3d(0,0,0);
}

.js-flickityCustom {
    border-color: transparent;
    margin: 0 auto;
    padding:0;
    transition:none !important;
}

.js-flickityCustom .flickity-prev-next-button {
    border-radius: unset;
    padding: 0;
    width: 38px;
}

.js-flickityCustom .flickity-prev-next-button.previous {
    left: 4px;
}
.js-flickityCustom .flickity-prev-next-button.next {
    right: 4px;
}

.js-flickityCustom .flickity-prev-next-button:focus,
.js-flickityCustom .flickity-prev-next-button:focus-visible {
    box-shadow: unset;
    outline: 4px auto !important;
    outline-offset: 2px;
}

.js-flickityCustom .flickity-cell:not(.is-selected) a,
.js-flickityCustom .flickity-cell:not(.is-selected) button {
    visibility: hidden;
}

.js-flickityCustom:not(.invert) + div:not(.invert),
div:not(.invert):not(.breadcrumbs) + .js-flickityCustom:not(.invert) {
    border-top: 1px solid rgba(0,0,0,.2);
}
#content > div:first-child + div:not(.js-flickityCustom) {
    border-top: 0 none;
}

.js-flickityCustom .grid > div {
    padding-top:0;
    padding-bottom:0;
}

.js-flickityCustom .grid > div:first-child img {width:100%}

.js-flickityCustom .grid {
    padding: 0;
    width: 100%;
    max-width: none;
    margin: 0;
    font-size: 100%;
}

.js-flickityCustom .grid > div:nth-of-type(2n-1) {
    padding-right: 1.25%;
    width: 50%;
}
.js-flickityCustom .grid > div:nth-of-type(2n) {
    padding: 1em 0 5em;
    width: 39%;
}


.js-flickityCustom .flickity-page-dot {
    background-color: #4d506d;
    /*height: .75rem;*/
    /*width: .75rem;*/
    transition: transform .2s ease;
}

.js-flickityCustom .flickity-page-dot.is-selected {
    transform: scale(1.3);
    transform-origin: center;
}

.js-flickityCustom .flickity-page-dot:focus,
.js-flickityCustom .flickity-page-dot:focus-visible {
    background-color: #4d506d !important;
    box-shadow: unset;
    outline: 2px solid #4d506d !important;
    outline-offset: 1px !important;
}

#content > .js-flickityCustom.tall:first-child,
#content > .js-flickityCustom:first-child .flickity-viewport,
#content > .js-flickityCustom:first-child .hero {
    width: 100%;
}

#content > .js-flickityCustom:first-child .flickity-page-dots {
    padding: 0;
    left: auto;
    right: 9%;
    bottom: 0;
    background-color: rgba(255,255,255,.75);
    padding: 10px;
    cursor:default;
    position: absolute;
    line-height: 0;
    transition:
            background-color 0.3s ease,
            right 0.3s ease;
}
#content > .js-flickityCustom:first-child .flickity-page-dots:hover {background-color: #fff}

.menu-on #content > .js-flickityCustom:first-child .flickity-page-dots {right: 2%}

#content > .js-flickityCustom:first-child .flickity-page-dots .dot:last-child {margin-right: 0}

#content > .js-flickityCustom:first-child + div.boxes {padding-top: 3.65em}

.no-js #content > .js-flickityCustom.tall:first-child,
.no-js #content > .js-flickityCustom:first-child .flickity-viewport {
    height: auto;
    max-height: none;
}

.no-js #content > .js-flickityCustom:first-child .hero {
    height: auto;
    min-height: 700px;
}

/*
Carousels on larger touch devices ...
Be sure to update media query version also (around line 2430)!
*/
.touch .js-flickityCustom .grid > div:nth-of-type(2n) {padding-bottom: 2em}

.touch #content > .js-flickityCustom:first-child + div:not(.breadcrumbs) {padding-top: 1.5em}



/*  ==========================================
    Special CSS Effects (transitions)
    ========================================== */

iframe {
    transition: height 0.3s ease;
    max-width: 100%; /* prevent horizontal scrolling */
}

button.arrow,
.collapsed a:before,
.inquiry:before {
    transition: transform 0.3s ease;
}

body:not(.touch) h1, /* h1 color effects needed for hero text box */
body:not(.touch) header,
body:not(.touch) div,
body:not(.touch) nav,
body:not(.touch) span,
body:not(.touch) input,
body:not(.touch) button,
body:not(.touch) a,
body:not(.touch) img,
body:not(.touch) p,
body:not(.touch) strong,
body:not(.touch) b,
body:not(.touch) em,
body:not(.touch) i {
    transition:
            background-color 0.3s ease,
            border-color 0.3s ease,
            box-shadow 0.3s ease,
            color 0.3s ease,
            margin 0.3s ease,
            min-height 0.3s ease,
            max-width 0.3s ease,
            opacity 0.3s ease,
            padding-left 0.3s ease,
            padding-right 0.3s ease,
            left 0.3s ease,
            right 0.3s ease,
            text-shadow 0.3s ease,
            width 0.3s ease;
}

nav h1,
#sitename h1,
#sitename h2 {
    transition:
            font-size 0.3s ease,
            height 0.3s ease,
            opacity 0.3s ease,
            padding 0.3s ease;
}

body:not(.touch) a.external:after {transition: opacity 0.2s ease}

body:not(.touch) .events li a > span {
    transition:
            left 0.3s ease,
            box-shadow 0.3s ease;
}

body:not(.touch) .flickity-page-dots,
body:not(.touch) .icon:before {
    transition:
            ease background-color .3s,
            ease box-shadow .3s;
}

body:not(.touch) .flickity-prev-next-button .arrow {transition: fill .3s ease}


/* ==============
   Campus Alerts
   ============== */

.campusAlertRed {background-color: #c41230;}
.campusAlertGold {background-color: #fdb515;}
.campusAlertGreen {background-color: #00853E;}

#campusAlert {
    z-index: 200;
    position: relative;
    padding: 2em 2em 1em;
    transition: width .2s ease;
    width: 100%;
    box-sizing: border-box;
}

#campusAlert p {
    color: #fff;
    position: relative;
}

#campusAlert.campusAlertGold p {
    color: #333;
}

#campusAlert p:before {
    border: 3px solid #fff;
    color: #fff;
    font-weight: bold !important;
    height: 33px;
    width: 40px;
    padding: 7px 0 0;
    margin-right: .35em;
    position: relative;
    top: -10px;
    float: left;
}

#campusAlert.campusAlertGold:before {
    border-color: #333;
    color: #333;
}

.campusAlertOn p:before {
    background-color: #c41230;
    content:'!' / '';
    font-size: 200%;
    left: -.25em;
    text-align: center;
    top: -.5em;
}

.campusAlertRed p:before{
    background-color: #c41230;
}

.campusAlertGold p:before{
    /* keep old gold color here because homepage! */
    background-color: #fdb515;
}

.campusAlertGreen p:before {
    background-color: #00853E;
    content:"\2713" / "";
    font-size: 150%;
    left: -.35em;
    text-indent: .4em;
    top: -.65em;
}

#campusAlert a {
    color: #fff;
    border-bottom: 1px solid !important;
}
#campusAlert strong {
    letter-spacing: 1px;
    text-transform: uppercase;
}

#campusAlert.campusAlertGold a {
    color: #941120;
}
#campusAlert.campusAlertGold a:focus {
    color: #fff;
}

#campusAlert + #container .roof a.wordmark {
    display:block;
}
#campusAlert + #container .hero .text {
    position: absolute;
}



/* =============================
   Media Queries
   ============================= */


/* Only load fonts and background images for screens tablet-sized and larger */
@media only screen and (min-width: 768px) {
    html,
    button,
    input,
    select,
    textarea {font-family:'Open Sans', 'Helvetica', sans-serif}

    .globe {background-image:url(../images/bg-globe.png)}

    .plaid {
        position: relative;
        overflow: hidden;
        z-index: 1;
    }

    /* http://www.sitepoint.com/css3-transform-background-image/ */
    .plaid:before {
        content: "";
        position: absolute;
        width: 9999px; /* to make sure the plaid repeats over tall grids */
        height: 9999px; /* to make sure the plaid repeats over short, wide grids */
        z-index: -1;
        margin: 0 auto;
        left:0;
        top:0;
        background-image: url(../images/bg-plaid-big.png);
        background-repeat: repeat;
        background-position: center center;
        background-size: auto;
        transform: rotate(41.35deg) translateX(-50%);
    }

    /* text on light grey plaid is very difficult to read, so turn the opacity down */
    .plaid:not(.invert):not(.boxes):not(.news):before {opacity:.65}

    /* "visual enhancement overlay" makes low-res visuals look crisp (faux-chrispness) */
    #content .mask:before {
        content: "";
        background: url(../images/overlay.png) repeat 0 0 scroll transparent;
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        z-index: 5;
    }
}


/* For BIG screens */
@media only screen and (min-width: 1700px) {

    .roof,
    header > div,
    header nav,
    .hero > .text,
    .hero .caption,
    .grid,
    .breadcrumbs,
    .content {
        padding-left: 15%;
        padding-right: 15%;
    }

    .menu-on .roof,
    .menu-on header > div,
    .menu-on header nav,
    .menu-on .hero > .text,
    .menu-on .hero .caption,
    .menu-on .grid,
    .menu-on .breadcrumbs,
    .menu-on .content {
        padding-left: 10%;
        padding-right: 10%;
    }

    .menu-on #container {
        width: calc(100% - 450px);
    }
    .menu-on #campusAlert {
        width: calc(100% - 450px);
    }

    nav.tree {
        right: -450px;
        width: 466px;
    }

    nav.tree li a { padding-right: 70px }

    .roof.invert .wordmark {width:23%}

    header.float + #content .hero {background-position: center center}

    #content .hero .box {width:calc(35% - 2em)}
    #content > .js-flickityCustom:first-child .flickity-page-dots,
    #content .hero .box.right {right:15%}
    #content .hero .box.left {left:15%}

    .menu-on #content > .js-flickityCustom:first-child .flickity-page-dots,
    .menu-on #content .hero .box.right{right: 10%}
    .menu-on #content .hero .box.left {left: 10%}

    #content .hero .small {width:calc(27.222% - 2em)}
    #content .hero .large {width:calc(54.444% - 2em)}

    /* v5.2 nav doesn't play nice with Flickity.
    The easy fix was to comment out the max-width.
    This is why slideshows are huge on large screens. */
    /* #content > .js-flickityCustom {max-width: 70%}*/

    #content > .js-flickityCustom:not(:first-child):not(.invert):not(.grey) {
        border: 1px solid rgba(0,0,0,.2)
    }

    .invert + .js-flickityCustom {border: 0 none}

    .js-flickityCustom .grid > div:nth-of-type(2n) {width: 47.35%}
    .js-flickityCustom .grid > div:nth-of-type(2n-1) {padding-right: 1.5%}
    .js-flickityCustom:not(.invert) + div:not(.invert):not(.js-flickityCustom) {border-top: 0 none}

}


/* For smaller, desktop-sized screens */
@media only screen and (max-width: 1300px) {

    .roof,
    header > div,
    header nav,
    .hero > .text,
    .hero .caption,
    .grid,
    .breadcrumbs,
    .content {
        padding-left: 2%;
        padding-right: 2%;
    }

    .roof a.wordmark,
    .roof form {
        width: 25%;
    }

    .roof.invert .wordmark {width: 25%}
    .search label.searchSite span {font-size: 80%}

    /* nav.tree.b is the alternate style for sites with inverted roof */
    nav.tree.b { padding-top: 3.5em }

    #content .hero {min-height: 400px}

    #content .hero .box {
        font-size: 90%;
        width:calc(48% - 2em);
    }
    #content > .js-flickityCustom:first-child .flickity-page-dots,
    #content .hero .box.right {right:2%}
    #content .hero .box.left {left:2%}

    #content .hero .small {width:calc(37.222% - 2em)}
    #content .hero .large {width:calc(74.444% - 2em)}

    .js-flickityCustom .grid > div:nth-of-type(2n) {width: 46.5%}
    .js-flickityCustom .grid > div:nth-of-type(2n-1) {padding-right: 1.45%}

    #content .hero > div.text h1 {
        font-size: 2em;
    }
}


/* For tablet-sized screens */
@media only screen and (max-width: 960px) {

    #sitename h1 {font-size: 2.5em}
    #sitename h2 {margin-top: -1.35em;}

    nav.tree { padding-top: 4.65em }

    nav.tree form {
        display: block;
        position: absolute;
        width: calc(100% - 5.5em);
        padding: 13px 0 0 1.5em;
        margin: 0;
        top: 0;
    }

    nav.tree input[placeholder=Search] {
        margin: 0;
        border: none;
        width: 100%;
        padding-right: 10px;
        color: #fff;
        background-color: rgba(255,255,255,.15);
    }

    nav.tree input[placeholder=Search]:focus {
        color: #fff;
        background-color: #4D5051;
    }

    nav.tree label.siteSearch {
        display: none;
        position: relative;
        width: auto;
        left: 0;
        text-align: left;
        top: 2px !important;
    }

    nav.tree input[name=site] {
        float: left;
        padding: 0;
        margin: .45em 0 0 0;
    }

    nav.tree label.searchSite span {float: none}

    nav.tree button {
        height: auto;
        padding: 6px 14px;
    }

    nav.tree h1 {
        display: none;
        height: 0;
        line-height: 0;
        padding:0;
    }

    nav.tree.b .menu-btn {
        margin-top:9px;
        right: 0;
    }

    nav.tree li > a:hover:not(.arrow) { background-color: transparent}

    .menu-on #container {
        width: auto;
        position: fixed;
    }

    /* fixes odd page resize on mobile */
    .menu-on table { width: 80vw }

    .menu-btn,
    .menu-on nav.tree .menu-btn {
        right: 0;
    }

    .menu-on #overlay {
        display: block;
        background-color: rgba(255,255,255,.65);
        z-index: 101;
    }

    .menu-on > nav.tree {
        z-index: 102;
    }

    .roof a.wordmark {width: 40%}
    .roof.invert .wordmark {width: 33.333%}

    .grid, .breadcrumbs, .content {
        padding-top: 1.5em;
        padding-bottom: 1.5em;
    }

    #container > header .wordmark img {max-width: 33.333%}

    a.external:after {top: auto}

    .content > div:first-child {
        width: 64.666%;
    }
    .content .sidebar {margin-left: 4%}

    .wide > div:first-child {
        width: 100%;
    }

    a.btn.wide {padding: .65em}

    .ios .cta:after { /* prevent emoji on iOS */
        content: " \25B8" / "";
        font-size: 100%;
        margin-left: 0;
    }

    .column4 > div,
    .column4 > div:nth-of-type(4n) {
        padding-right: 3%;
        width: 31.333%;
    }

    .column4 > div:nth-of-type(3n) {padding-right: 0}

    .boxes {padding-bottom: 0}

    .boxes>div,
    .boxes>div:nth-of-type(2n),
    .boxes>div:nth-of-type(3n),
    .boxes>div:nth-of-type(4n) {
        margin-bottom: 1.5em;
    }

    .column4.boxes > div {
        margin-right: 2%;
        width: 31.333%;
        padding: 1vw;
    }

    .column4.photos div.photo {flex-basis: 50%}
    .column4 > div.photo:nth-of-type(3n) {margin-right: 0}

    .grid .floatleft,
    .grid .floatright {
        float: none;
        margin: 0 1em 1em 0;
        display: block;
    }

    .news.column2 div.img {height: 225px}
    .news.column3 div.img,
    .news.column4 div.img {height: 150px}

    .js-flickityCustom .grid {font-size: 90%}
    .js-flickityCustom .grid > div {padding: 1.5em 2%}
    .js-flickityCustom .grid > div:nth-of-type(2n) {
        padding-top: 1em;
        width: 42%; /* to make room for controls */
    }
    .js-flickityCustom .grid > div:nth-of-type(2n-1) {
        padding-right: 3%;
        width: 47%;
    }

    header:not(.float) + #content .hero > div.text,
    #content .js-flickityCustom .hero > div.text {
        padding: 0 2em;
        height: 100%;
    }

    #content .hero iframe {display: none}

    .grid.nav .nav-list ul li:first-child,
    .grid.nav .nav-list ul li:last-child {
        padding: .35em 0;
    }

    .contact > p {display: block}
}


/* For small, mobile-sized screens */
@media only screen and (max-width: 767px) {

    .menu-on #campusAlert {
        width: 100%;
        z-index: 1;
    }

    body, html {height: auto}
    body {background-image: none !important}

    h1 {font-size: 2em}

    .roof {
        position: relative;
    }


    .mobile header > div nav {
        display: none;
        z-index: 1;
    }

    .roof.fixed {
        box-shadow: 0 0 1em rgba(0,0,0,.2);
    }

    #sitename > div,
    #sitename.large > div {
        width: auto;
    }

    #sitename > a,
    #sitename.large > a {
        padding: 1em 0 .5em;
        display: block;
        max-width: 100%;
        width: auto;
        text-align: left;
    }

    #sitename img,
    #sitename.large img {
        max-width: 50%;
        width: auto;
    }

    #sitename h1 {
        line-height: 1.15em;
        padding-bottom: .125em;
    }

    #sitename h2 {
        margin-top: 0;
    }

    .roof.fixed + #sitename,
    header:not(.float) .roof.fixed + #sitename {
        padding-bottom: 0;
    }

    .roof.fixed + #sitename h2 {
        padding-bottom: 0;
    }

    #sitename,
    #content {
        padding-top: 1em;
        transition: none;
    }

    #content > .breadcrumbs:first-child {padding-top: 0}

    #content > .js-flickityCustom:first-child,
    header.float + #content > .js-flickityCustom:first-child,
    #content > .js-flickityCustom:first-child .flickity-viewport,
    #content > .js-flickityCustom:first-child .hero,
    #content > .js-flickityCustom.tall:first-child,
    #content .hero,
    #content > .tall,
    header.float + #content,
    header.float + #content .hero {
        background-position: center center;
        height: auto !important;
        min-height: 400px;
    }

    #content .hero .box h1 {font-size:1.5em}

    header nav {display: none}

    #container > header.float {position: initial}

    .roof:not(.invert) {background-color: #fff}

    .roof div {
        display: block;
        padding-bottom: .5em;
    }

    .roof.invert .wordmark,
    .roof a.wordmark {
        width: 85%;
        margin: 10px 0 6px;
        min-width: 0;
    }

    .roof form {
        position: relative;
        right: auto;
        display: block;
        padding-top: 0;
        top: auto;
        width: 100%;
        padding: 0;
        max-width: none;
    }

    .roof .menu-btn + form {right: 0}

    input[placeholder="Search"] {
        background-image: url(../images/icon-magnify.png);
        background-repeat: no-repeat;
        background-position: 98% center;
        background-size: auto 75%;
        font-size: 16px; /* prevents browser zoom on iOS */
    }

    .roof input[placeholder="Search"] {
        padding-bottom: .35em;
        padding-top: .35em;
        background-image: url(../images/icon-magnify.png);
        background-repeat: no-repeat;
        background-position: 98% center;
        background-size: auto 80%;
        font-size: 16px; /* prevents browser zoom on iOS */
    }

    .search button {
        height: 100%;
        margin: 0;
        display: none;
    }

    .search input[name=site] {
        float: left;
        margin-top: .65em;
    }
    .search label.searchSite span {float: none}

    a.external:after {
        opacity:1;
    }

    nav ul a {letter-spacing: .05em}
    nav.tree div > ul > li:not(.secondary) > a {letter-spacing: .075em}

    .float .roof.fixed:not(.invert) {
        border-bottom: 1px solid rgba(0,0,0,.2);
    }

    header:not(.float) #sitename {
        padding-left: 0;
        padding-right: 0;
        margin: 0 2%;
    }

    nav a {-webkit-tap-highlight-color: transparent}

    nav.tree {
        right: -85%;
        width: 85%;
    }

    nav.tree li a {padding-right: 3em}

    .roof label.searchSite {
        display: none;
        position: relative;
        width: auto;
        left: 0;
        text-align: left;
        top: 2px !important;
    }

    nav.tree div > ul {width: 100%}

    nav.tree.b .menu-btn,
    div.invert .menu-btn {
        margin-top:9px;
        right: 0;
    }

    #content .hero > div.text {
        bottom: auto !important; /* overrides JS */
        height: calc(100% - 1em);
        padding-top: .5em;
    }

    #content .hero .box.left,
    #content .hero .box.right {
        background-color: rgba(255,255,255,.85);
        bottom: 0;
        display: block;
        left: auto;
        right: auto;
        width: auto;
    }

    #content > .tall p.caption {
        bottom: 0;
        padding-right: 2%;
        width: 100%;
    }


    .grid,
    .grid > div,
    .content {
        display: block;
        padding-bottom: 2em;
        padding-top: 2em;
    }

    .column2 > div,
    .column3 > div,
    .column4 > div,
    .column2.boxes > div,
    .column3.boxes > div,
    .column4.boxes > div,
    .content .sidebar,
    .content > div:first-child,
    .js-flickityCustom .grid > div:nth-of-type(2n),
    .js-flickityCustom .grid > div:nth-of-type(2n-1) {
        display: block;
        flex: none;
        margin: 0;
        padding-right: 0;
        padding-left: 0;
        width: auto;
    }

    .column2 > div:nth-of-type(2n-1),
    .column4 > div:nth-of-type(2n-1),
    .column4 > div:nth-of-type(4n) {
        padding-right: 0;
        margin-right: 0;
        width: auto;
    }

    .grid .list {padding:0}
    .grid .list:not(:first-child) h2 {padding-top:1em}
    .grid div:not(.list) + .list ul,
    .grid .list:not(:last-child) ul {border-bottom: 0 none}

    .boxes {
        display: block;
        padding-top: 1em;
        padding-bottom: 0;
        overflow: hidden;
    }
    .boxes > div {
        margin-bottom: 1em !important;
        padding: 1em 4% !important;
        font-size: inherit;
    }

    .column4.boxes > div {margin-right: 0}

    .grid:not(.boxes) > div:first-child {padding-top: 0}
    .grid:not(.boxes) > div:last-child {padding-bottom: 0}

    .grid.photos {
        padding: 2em 0 0;
        width: auto;
    }

    .column2:not(.photos) div.photo,
    .column3:not(.photos) div.photo,
    .column4:not(.photos) div.photo {
        margin:1em 0 !important;
    }

    .grid.photos h1 {
        padding-left: 2%;
        padding-right: 2%;
    }

    .grid > div.photo > a div,
    .grid.photos > div > a div {
        padding: 1.15em 5%;
        width: 90%;
    }

    .grid.nav > div {padding-bottom: 2em}

    .js-flickityCustom {border: 0 none}

    .js-flickityCustom .grid > div:nth-of-type(2n) {
        padding: 0 2% 3em;
        font-size: 100%;
    }

    .js-flickityCustom .grid > div:nth-of-type(2n-1) {
        padding: 1em 2% !important;
    }

    #content > div.content:first-child,
    #content > div.grid:first-child:not(.invert) {padding-top:0}

    .content .sidebar {margin-top: 2em}
    .content .sidebar div {font-size:inherit}

    .content .sidebar div.left-rule {
        border-left: 0 none;
        padding: 0;
    }

    .content .sidebar div.simple {
        margin-top: 2em;
        padding: 0;
    }

    div:not(.hero) > .caption {
        max-width:100%;
        margin-left: 0;
        margin-right: 0;
        float: none;
    }

    div:not(.hero) > .caption img {
        margin-left: 0;
        margin-right: 0;
    }

    .collapsed a:hover {
        color:#c00;
    }

    .news.column2 div.img,
    .news.column3 div.img,
    .news.column4 div.img {
        height: 225px;
    }

    .news.grey a > :not(div),
    .news.darkgrey a > :not(div),
    .news.red a > :not(div),
    .news.gold a > :not(div),
    .news.teal a > :not(div),
    .news.blue a > :not(div),
    .news.green a > :not(div),
    .news.darkgreen a > :not(div) {
        padding-left: 3%;
        padding-right: 3%;
    }

    .news > div {
        padding-bottom: 0;
    }

    .loadmore {
        padding: 0;
        width: auto;
    }

    body:not(.no-js) .contact > p a {
        text-indent:0;
        margin-bottom: 1em;
    }

    .contact span {display: block}

    .contact address {
        display: block;
        padding: 1em 0 0;
        width: auto;
    }

    .thumb img {margin-bottom:15px}

    .flickity-page-dots {display:none}

}


/* ==========================================================================
   More Helper Classes (these need to go after the Media Queries)
   ========================================================================== */

.hidden {
    display: none !important;
    visibility: hidden !important;
}
.invisible {visibility: hidden !important}


/* =============================
   Hide print-specific elements
   ============================= */

#wordmarkPrint,
img[alt='print'] {
    display:none
}

/* =============================
   Loading CSS Animations
   ============================= */
/* Specific Selectors to combat exisitng CSS */
.spinner {
    width: 40px !important;
    height: 40px !important;
    position: relative;
    margin: 100px auto;
    border: none !important;
}

.double-bounce1, .double-bounce2 {
    width: 100% !important;
    height: 100% !important;
    border-radius: 50%;
    background-color: #D50017;
    position: absolute;
    top: 0;
    left: 0;

    animation: sk-bounce 2.0s infinite ease-in-out;
    animation: sk-bounce 2.0s infinite ease-in-out;
}

.double-bounce2 {
    animation-delay: -1.0s;
    animation-delay: -1.0s;
}

@-webkit-keyframes sk-bounce {
    0%, 100% { transform: scale(0.0) }
    50% { transform: scale(1.0) }
}

@keyframes sk-bounce {
    0%,
    100% {
        transform: scale(0.0);
        transform: scale(0.0);
    }
    50% {
        transform: scale(1.0);
        transform: scale(1.0);
    }
}

.no-results-message {
    flex: 0 0 100%;
}

/* Accessible focus states */
a:not(.icon):focus-visible:hover,
a:not(.icon):focus-visible,
a:not(.icon):active,
button:focus-visible:hover,
button:focus-visible,
button:active,
summary:focus-visible:hover,
summary:focus-visible,
summary:active {
    border-color: transparent !important;
    background-color: var(--focus-state-bg-color) !important;
    color: var(--focus-state-text-color) !important;
    fill: var(--focus-state-text-color) !important;
    outline: 3px solid var(--focus-state-bg-color) !important;
    outline-offset: 0;
    text-shadow: none;
    overflow: hidden;
}

.icon:focus-visible:hover,
.icon:focus-visible,
.icon:active {
    border-color: transparent !important;
    background-color: var(--focus-state-bg-color) !important;
    color: var(--focus-state-text-color) !important;
    fill: var(--focus-state-text-color) !important;
    outline: 3px solid var(--focus-state-bg-color) !important;
    outline-offset: 0;
    text-shadow: none;
}

.flickity-prev-next-button:focus-visible .arrow,
.collapsed a:not(.icon):focus-visible::before,
a:not(.icon):focus-visible:hover *,
a:not(.icon):focus-visible * {
    background-color: var(--focus-state-bg-color) !important;
    color: var(--focus-state-text-color) !important;
    fill: var(--focus-state-text-color) !important;
}

.icon:focus-visible:hover *,
.icon:focus-visible * {
    background-color: var(--focus-state-bg-color) !important;
    color: var(--focus-state-text-color) !important;
    fill: var(--focus-state-text-color) !important;
}

:root {
    --focus-state-text-color: #fff;
    --focus-state-bg-color: #c41230;
}

.invert,
.invert a:not(.icon):focus-visible:hover,
.invert a:not(.icon):focus-visible,
.invert a.btn.ghost:focus-visible:hover,
.invert a.btn.ghost:focus-visible,
.invert button.ghost:focus-visible:hover,
.invert button.ghost:focus-visible,
.invert input[type=submit].ghost:focus-visible:hover,
.invert input[type=submit].ghost:focus-visible {
    --focus-state-text-color: #c41230;
    --focus-state-bg-color: #fff;
}