/* -----------------------------------------
Colors
----------------------------------------- */
@black: #000000;
@white: #ffffff;
@purple: #4b2e83;
@gold: #b7a57a;
@lightgold: #b7a57a;
@neutral: #eeeae0;
@grey: #d9d9d9;
@blue: #08d;
@textblack: #3d3d3d;
@metallicgold: #85754d;
@lightgrey: #d1d1d1;


/* Typography */

@font-face {
    font-family: 'encodesanscompressed-600-semibold-webfont';
    src: url('/site/templates/styles/fonts/encodesanscompressed600/encodesanscompressed-600-semibold-webfont.eot');
    src: local('☺'), url('/site/templates/styles/fonts/encodesanscompressed600/encodesanscompressed-600-semibold-webfont.woff') format('woff'), url('/site/templates/styles/fonts/encodesanscompressed600/encodesanscompressed-600-semibold-webfont.ttf') format('truetype'), url('/site/templates/styles/fonts/encodesanscompressed600/encodesanscompressed-600-semibold-webfont.svg') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'encodesanscompressed-800-extrabold-webfont';
    src: url('/site/templates/styles/fonts/encodesanscompressed800/encodesanscompressed-800-extrabold-webfont.eot');
    src: local('☺'), url('/site/templates/styles/fonts/encodesanscompressed800/encodesanscompressed-800-extrabold-webfont.woff') format('woff'), url('/site/templates/styles/fonts/encodesanscompressed800/encodesanscompressed-800-extrabold-webfont.ttf') format('truetype'), url('/site/templates/styles/fonts/encodesanscompressed800/encodesanscompressed-800-extrabold-webfont.svg') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'encodesanscompressed-900-black';
    src: url('/site/templates/styles/fonts/encodesanscompressed900/encodesanscompressed-900-black-webfont.eot');
    src: local('☺'), url('/site/templates/styles/fonts/encodesanscompressed900/encodesanscompressed-900-black-webfont.woff') format('woff'), url('/site/templates/styles/fonts/encodesanscompressed900/encodesanscompressed-900-black-webfont.ttf') format('truetype'), url('/site/templates/styles/fonts/encodesanscompressed900/encodesanscompressed-900-black-webfont.svg') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'encode_sans_compressedregular';
    src: url('/site/templates/styles/fonts/encodesanscompressed400/encodesanscompressed-400-regular-webfont.eot');
    src: local('☺'), 
         url('/site/templates/styles/fonts/encodesanscompressed400/encodesanscompressed-400-regular-webfont.woff') format('woff'),
         url('/site/templates/styles/fonts/encodesanscompressed400/encodesanscompressed-400-regular-webfont.ttf') format('truetype'),
         url('/site/templates/styles/fonts/encodesanscompressed400/encodesanscompressed-400-regular-webfont.svg') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Uni Sans';
    src: url('/site/templates/styles/fonts/unisanslight/UniSansLight.eot');
    src: url('/site/templates/styles/fonts/unisanslight/UniSansLight.eot?#iefix') format('embedded-opentype'),
        url('/site/templates/styles/fonts/unisanslight/UniSansLight.woff2') format('woff2'),
        url('/site/templates/styles/fonts/unisanslight/UniSansLight.woff') format('woff'),
        url('/site/templates/styles/fonts/unisanslight/UniSansLight.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: 'Uni Sans Regular';
    src: url('/site/templates/styles/fonts/unisansregular/fontfabric_-_unisansregular-webfont.eot');
    src: url('/site/templates/styles/fonts/unisansregular/fontfabric_-_unisansregular-webfont.eot?#iefix') format('embedded-opentype'),
        url('/site/templates/styles/fonts/unisansregular/fontfabric_-_unisansregular-webfont.woff2') format('woff2'),
        url('/site/templates/styles/fonts/unisansregular/fontfabric_-_unisansregular-webfont.woff') format('woff'),
        url('/site/templates/styles/fonts/unisansregular/fontfabric_-_unisansregular-webfont.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
}

@bodytext: 'Open Sans', sans-serif;
@leadtextheavy: 'encodesanscompressed-600-semibold-webfont';
@nav: 'encodesanscompressed-800-extrabold-webfont', sans-serif;
@tenet: 'encodesanscompressed-900-black', sans-serif;
@featuretext: 'encode_sans_compressedregular', sans-serif;
@unilight: 'Uni Sans', sans-serif;
@uniregular: 'Uni Sans Regular', sans-serif;

/* global */

body {
background: @white;
color: @black;
font-family: @bodytext;
margin: 0;
padding: 0;
display: none;
}

h1 {
color: @purple;
font-family: @nav;
font-weight: normal;
font-size: 2.05em;
margin: 0;
padding: 0;
}

h2 {
font-family: @nav;
font-weight: normal;
color: @purple;
font-weight: normal;
font-size: 1.75em;
margin: 0;
padding: 0;
}

h3 {
font-family: @nav;
font-weight: normal;
color: @textblack;
font-size: 1.44em;
padding: 0;
margin: 1.2em 0 0 0;
}

h4 {
color: darken(@grey,55%);
font-weight: normal;
font-family: @nav;
font-size: 1.3em;
margin: 0;
padding: 0;
}

h5 {
font-family: @nav;
color: @textblack;
font-size: 1.1em;
line-height: 1.6em;
}


@media screen and (max-width: 800px) {
h1 {
font-size: 2em;
}
h2 {
font-size: 1.5em;
}
h3 {
font-size: 1.24em;
}
h4 {
font-size: 1em;
}
}

a {
color: @blue;
transition: all 0.3s ease;
}

a:hover {
color: @metallicgold;
}

p {
font-size: 1.05em;
}

li {
font-size: 1.05em;
margin-bottom: .5em;
}

#sidebar-area li {
margin-bottom: 0;
}

#sidebar-area p {
margin-top: .6em;
}

#sidebar-area img {
width: 100%;
border: 1px solid #eeeeee;
margin: 1em 0 0 0;
}

li li {
font-size: 1em;
margin-bottom: .25em;   
}

li ul li:first-of-type {
margin-top: .5em;
}

p, li {
line-height: 1.7em;
color: @textblack;
-webkit-font-smoothing: antialiased;
}

li blockquote {
margin: 1em 0 1em 0;
}

/*-----------------------------------

Utilities

--------------------------------------*/

.align-right {
text-align: right;
}

.align_right {
float: right;
margin: 1em;
border: 1px solid #eeeeee;
}

.align_left {
float: left;
margin: 1em;
border: 1px solid #eeeeee;
}


.text-with-icon-link {
text-decoration: none;
}

.text-with-icon-link span {
position: relative;
top: .25em;
left: -.1em;
}

hr {
margin: 2em 0 2em 0;
height: 9px;
border: 0;
box-shadow: inset 0 9px 9px -9px rgba(0, 0, 0, 0.1);
}

/* -----------------------------------------


Page and sections

----------------------------------------- */


.inner {
width: 85%;
max-width: 75em;
margin: auto;
}

#grid-sidebar1 {
display: grid;
grid-template-columns: 2.3fr 1fr;
grid-column-gap: 3.2em;
margin-bottom: 3em;
}

.grid-full {
margin-top: 2em;
margin-bottom: 3em;
}

@media screen and (max-width: 800px) {
#grid-sidebar1 {
display: block;
}
}

.bodytext h1+p {
font-family: @featuretext;
font-size: 1.56em;
margin: .8em 0 1em 0;
}

.bodytext .uw-btn {
margin-top: 1em;
}

.bodytext img {
max-width: 100%;
}

#after-everything h3 {
margin: 1.6em 0 0 0;
}

.basic-page-sidebar-thumbnail-image {
width: 88%;
margin: 1.6em 1.3em 1.3em 1.3em;
}

.program-page h1 {
display: none;
}

#pagebanner h1.programheader {
font-size: 3.2em;
}


/* -----------------------------------------


Header

----------------------------------------- */

.purple {
background: @purple;
}

#headergrid {
display: grid;
grid-template-columns: 2.5fr 3fr .5fr;
}

#logo {
display: grid;
grid-template-columns: 1fr 3fr;
grid-column-gap: 5%;
align-self: end;
}

#logo a img {
width: 100%;
}

#logo a svg { 
fill: @white;
transition:  .2s;
-moz-transition:  .2s;
-webkit-transition:  .2s;
-o-transition:  .2s;
}

#logo a svg:hover { 
fill: @gold;
}

#logo a:nth-child(1) {
position: relative;
top: .3em;
margin-top: .3em;
}

#logo a:nth-child(2) {
margin-top: .6em;
align-self: center;
}

.uaamenuholder {
text-align: right;
align-self: center;
}

.uaamenuholder a {
font-family: @leadtextheavy;
color: @white;
text-decoration: none;
}

.uaamenuholder a::before {
content: '\00a0\00a0\00a0/\00a0\00a0\00a0\00a0';
color: darken(@white,40%);
transform: scale(.3, 2.2) skew(-60deg);
display: inline-block;
}

.uaamenuholder a:first-child::before {
content: '';
}

.uaamenuholder a:hover {
color: @lightgold;
text-decoration: underline;
}

#searchbutton {
text-align: right;
align-self: center;
}

#searchbutton i, #search i {
color: @white;
font-size: 1.6em;
-moz-transform: scaleX(-1);
-o-transform: scaleX(-1);
-webkit-transform: scaleX(-1);
transform: scaleX(-1);
filter: FlipH;
-ms-filter: "FlipH";
}

#searchbutton i {
border: .06em solid @white;
border-radius: 50%;
padding: .3em;
transition: all 0.2s ease;
}

#searchbutton i:hover {
border: .06em solid @gold;
}

@media screen and (max-width: 430px) {
#searchbutton i {
position: relative;
top: .5em;
left: .5em;
}
}

#search {
padding: 3em 6em 3em 6em;
text-align: center;
display: none;
}

@media screen and (max-width: 480px) {
#search {
padding: 1em 2em 1em 2em;
}
}

#search form {
display:flex;
flex-direction:row;
}

#search form input {
flex-grow: 2;
border: none;
outline: none;
font-size: 1em;
padding: 1em;
background: lighten(@grey,10%);
}

#search i {
color: @white;
font-size: 2.2em;
}

#search button {
background: darken(@grey,30%);
padding: 1.5em 1em 1em 1em;
border: 0;
}

#search_query::-webkit-input-placeholder { /* Chrome/Opera/Safari */
font-style: oblique;
color: @grey;
}
#search_query::-moz-placeholder { /* Firefox 19+ */
font-style: oblique;
color: @grey;
}
#search_query:-ms-input-placeholder { /* IE 10+ */
font-style: oblique;
color: @grey;
}
#search_query:-moz-placeholder { /* Firefox 18- */
font-style: oblique;
color: @grey;
}

@media screen and (max-width: 930px) {
.uaamenuholder {
display: none;
}
#headergrid {
grid-template-columns: 3fr 3fr;
}
#search {
padding: 1em;
}
}

@media screen and (max-width: 730px) {
#headergrid {
grid-template-columns: 4fr 2fr;
}
}

@media screen and (max-width: 480px) {
#headergrid {
grid-template-columns: 5fr 1fr;
}
#searchbutton {
position: relative;
top: -.7em;
right: .2em;
}
}

.searchpage ul {
margin-top: 2em;
}

.searchpage ul li p {
margin: 0;
}

.searchpage ul li {
margin: 0 0 .5em 0;
}


/* -----------------------------------------


menu
https://w3bits.com/css-responsive-nav-menu/

----------------------------------------- */

.cf:after {
content: "";
display: table;
clear: both;
}

#menu .inner {
position: relative;
left: -1.6em;
}

#menu ul {
margin: 0;
padding: 0;
}

#menu .main-menu {
display: none;
}

#tm:checked + .main-menu {
display: block;
}

#menu input[type="checkbox"], 
#menu ul span.drop-icon {
display: none;
}

#menu li {
margin: 0;
}

.main-menu li a {
font-family: @nav;
font-size: 1.15em;
text-transform: uppercase;
color: @purple;
padding: 1.3em .8em 1.3em 1em;
background: @white;
}

.main-menu li:first-child a {
padding-left: 1em;
}

.main-menu li a:hover {
color: @gold;
}

.main-menu li a::before {
content: '\00a0/\00a0\00a0\00a0';
color: @grey;
transform: scale(.2, 1.5) skew(-60deg);
display: inline-block;
position: absolute;
left: -.5em;
}

.main-menu li:first-child a::before, #menu .sub-menu li a::before {
content: '';
}

#menu .sub-menu {
background: @white;
border-top: .22em solid @purple;
padding: .6em 1em .6em 1em;
box-shadow: .1em .1em .8em rgba(0,0,0,.5);
}

.sub-menu li {
border-bottom: .1em solid lighten(@grey,10%);
}

.sub-menu li a {
font-family: @leadtextheavy;
text-transform: capitalize;
color: darken(@grey,35%);
font-size: 1.1em;
padding: .2em 1em .2em 1em;
margin: .3em 0 .3em 0;
}

.main-menu .sub-menu li:first-child a {
padding: .2em 1em .2em 1em; 
}

.sub-menu li a:hover {
background: lighten(@grey,5%);
color: @purple;
}

.sub-menu li a:active {
color: @gold;
}

#menu .sub-menu li:last-child {
border-bottom: 0;
}

#menu li, 
#toggle-menu, 
#menu a {
position: relative;
display: block;
text-decoration: none;
}

#menu {
background-color: @white;
padding-left: 1.6em;
box-shadow: 0 .1em .3em rgba(34,25,25,.4);
position: relative;
z-index: 10;
}

#menu .sub-menu {
display: none;
}

#menu input[type="checkbox"]:checked + .sub-menu {
display: block;
}

@media only screen and (max-width: 1042px) {
#menu .inner {
left: 0;
}
nav .inner {
width: 100%;
}
#menu {
padding: 0;
background: @grey;
}
.main-menu li a::before {
content: '';
}
.main-menu li a {
padding: .3em .3em .3em 1em;
border-bottom: .02em solid darken(@grey,10%);
border-top: .02em solid darken(@grey,10%);
}
.sub-menu li {
border-bottom: 0;
}
.sub-menu li a {
border-bottom: 0;
border-top: 0;
background: lighten(@grey,10%);
}
.sub-menu li a {
padding: .2em 1em .2em 1em;
margin: 0;
}
#menu .sub-menu {
border-top: 0;
background: lighten(@grey,10%);
}
}

#toggle-menu {
background: @grey;
font-family: @nav;
font-size: 1.2em;
padding: 0 0 0 1em;
font-weight: bold;
height: 2em;
}

#toggle-menu i {
font-size: 1em;
}

#toggle-menu .drop-icon, 
#menu li label.drop-icon {
position: absolute;
right: 0;
top: 0;
}

#menu label.drop-icon, #toggle-menu span.drop-icon {
font-size: 1.2em;
color: @purple;
margin: .34em 1em 0 0;
}

.downarrow {
font-family: @bodytext;
display: inline-block;
transform: rotate(90deg) scale(.5,1);
color: darken(@grey,35%);
margin: 0 0 0 .5em;
width: .8em;
}

#menu .sub-menu .drop-icon.sidearrow {
font-family: @bodytext;
display: inline-block;
transform: rotate(0deg) scale(.5,1);
color: darken(@grey,35%);
margin: 0 0 0 .5em;
width: .8em;
top: -.8em;
}

.arrowbg {
background: url(/site/templates/styles/img/menuarrow.svg);
background-repeat: no-repeat;
background-size: 1.5em 1.5em;
background-position: center center;
transform: rotate(0deg) scale(1) !important;
}

.rightarrow {
font-family: @bodytext;
display: inline-block; 
color: darken(@grey,35%);
transform: scale(.5,1);
}


@media only screen and (min-width: 1042px) {
    #menu .main-menu {
    display: block;
    }

    #toggle-menu, 
    #menu label.drop-icon {
    display: none;
    }

    #menu ul span.drop-icon {
    display: inline-block;
    }

    #menu li {
    float: left;
    }

    #menu .sub-menu li {
    float: none;
    }

    #menu .sub-menu {
    margin: 0;
    position: absolute;
    top: 93%;
    left: 0;
    width: 14em;
    z-index: 3000;
    }

    #menu .sub-menu, 
    #menu input[type="checkbox"]:checked + .sub-menu {
    display: none;
    }

    #menu .sub-menu li {
    }

    #menu .sub-menu .sub-menu {
    top: 0;
    left: 100%;
    }

    #menu .sub-menu .drop-icon {
    position: absolute;
    top: 0;
    right: 0;
    padding: 1em;
    }

    #menu li:hover > input[type="checkbox"] + .sub-menu {
    display: block;
    }
}

.main-menu li a.navactive {
color: @gold;
}

/* page banner */

#pagebanner {
z-index: 0;
position: relative;
overflow: hidden;
}

.pseudo-background-img {
position: absolute;
z-index: 1;
top: 0;
left: 0;
width: 100%;
}

.pseudo-background-img img {
width: 100%;
}

.pagebannerinner {
height: 26em;
display: table-cell;
vertical-align: middle;
position: relative;
z-index: 3;
padding: 0 0 4em 0;
}

.pagebannersmaller .pagebannerinner {
height: 16em;
padding: 0;
}

.pagebannersmallest .pagebannerinner {
height: 12em;
padding: 0;
}

#pagebanner.pagebannersmaller, #pagebanner.pagebannersmallest {
background-position: 50% 20%;
}

#pagebanner h1 {
font-family: @tenet;
color: @white;
font-weight: normal;
font-size: 2.8em;
text-shadow: .01em .01em .05em rgba(0,0,0,.5);
line-height: 1.32em;
margin-bottom: 1.6em;
}


#pagebanner.pagebannersmallest h1 {
font-size: 2.1em;
}

#homepage #pagebanner h1 {
margin-bottom: .6em;
}

#pagebanner h1 a {
color: @white;
text-decoration: none;
}

@media screen and (max-width: 830px) {
#pagebanner h1 {
font-size: 2.1em;
width: 100%;
}
}

#pagebanner:after {
content: "";
display: block;
position: absolute;
z-index: 2;
top: 0;
height: 28em;
left: -10em;
opacity: .3;
width: 40em;
background: url(/site/templates/styles/img/slashes-light.svg) no-repeat 0 0;
pointer-events: none;
}

@media screen and (max-width: 560px) {
#pagebanner:after {
left: -20em;
}

.pseudo-background-img img {
width: 100%;
border: 1px solid red;
transform: scale(2);
}
}

.udub-slant {
overflow: hidden;
display: block;
margin: 1.2em 0 0 0;
}

.udub-slant span {
-webkit-transform: skewX(-25deg) skewY(0);
-o-transform: skewX(-25deg) skewY(0);
transform: skewX(-25deg) skewY(0);
display: block;
height: .6em;
width: 10em;
margin: 0 0 0 -5px;
background: @gold;
}

.udub-slant.program-slant span {
background: @white;
}

.udub-slant.program-slant {
position: relative;
top: -4em;
right: -.5em;
}

/* -----------------------------------------


Home

----------------------------------------- */

#home-grid {
display: block;
grid-template-columns: 3fr 2fr;
grid-column-gap: 6.2em;
grid-row-gap: 1em;
margin-top: 0;
}

#home-programs {
margin-bottom: 2em;
}

#home-programs, #home-quote, #home-featured {
grid-column: 1 / span 2;
}

@media screen and (max-width: 1200px) {
#home-grid {
display: block;
}
}

#home-programs > p {
font-family: @featuretext;
color: @purple;
font-size: 1.5em;
line-height: 1.5em;
margin: 1.6em 0 2em 0;
}

h2.home-opps {
display: table;
text-transform: uppercase;
font-weight: 700;
font-size: 1.2em;
padding: 1.9em 2.2em 0 2.2em;
margin: auto;
}

h2.home-opps a {
color: @purple;
text-decoration: none;
}

@media screen and (max-width: 800px) {
h2.home-opps {
margin: 1em auto 0 auto;
position: relative;
top: -1px;
}
}

.home-opps-header-with-image {
display: grid;
grid-template-columns: 1fr 4fr;
grid-column-gap: 1em;
margin: 1em 0 1.6em 0;
background: @neutral;
}


@media screen and (max-width: 600px) {
.home-opps-header-with-image {
margin: 2em 0 1.6em 0;
}
}

.home-opps-header-with-image img {
border: 1px solid @grey;
width: 100%;
}

.home-opps-header-with-image h3 {
align-self: center;
}

.home-header-one {
text-align: center;
border-bottom: .01em solid @grey;
text-transform: capitalize;
margin: 1em 0 2em 0;
}

.home-header-one span {
background: @white;
padding: 0 .5em 0 .5em;
position: relative;
top: .5em;
}

#home-pullquote {
background: @neutral;
font-family: @uniregular;
font-size: 1.3em;
display: grid;
grid-template-columns: 3fr 1.9fr;
grid-column-gap: 1em;
margin: 2em 0 2.2em 0;
min-height: 20em;
}

#home-pullquote h3 {
color: @purple;
}

#home-pullquote div {
padding: 1em 2em 2em 2em;
grid-column: 1;
}

#home-pullquote img {
width: 100%;
height: 100%;
object-fit: cover;
grid-column: 2;
grid-row: 1;
}

@media screen and (max-width: 950px) {
#home-pullquote {
display: block;
}
}

#home-community-service {
background: lighten(@grey,10%);
align-self: start;
}

#home-announcements {
grid-column: 1 / span 2;
}

#home-announcements h3 {
margin: 0;
font-size: 1.3em;
color: @textblack;
}

@media screen and (max-width: 1200px) {
#home-announcements {
margin-bottom: 5em;
}
}

#home-announcements h4 {
color: @purple;
font-size: 1.4em;
line-height: 1.5em;
}

.announce-single {
margin-bottom: 2.8em;
}

#home-featured h3 {
margin: 0;
}

#home-featured .uw-btn {
margin-top: .8em;
}

#home-featured .home-header-one {
margin-bottom: 1.6em;
}

.home-header-two {
text-transform: uppercase;
margin-bottom: 1em;
font-size: 1.2em;
border-bottom: .01em solid @grey;
text-align: center;
margin-bottom: 1.8em;
}

.home-header-two span {
background: @white;
position: relative;
top: .5em;
padding: 0 .5em;
}

.view-all-container {
text-align: right;
}

#home-community-service .view-all-container {
padding: 0 2em 2em 0;
}

.view-all {
background: @gold;
display: inline-block;
padding: 0 0 .4em .8em;
font-family: @leadtextheavy;
text-transform: uppercase;
transition: all 0.3s ease;
}

.view-all a {
color: @white;
}

.view-all:hover {
background: darken(@gold,10%);
}


/* -----------------------------------------


Breadcrumb

----------------------------------------- */

.breadcrumbinner {
background: @white;
display: inline;
padding: 1.6em 2em 0 1.4em;
position: relative;
top: -.25em;
left: -1.7em;
}

@media screen and (max-width: 800px) {
.breadcrumbinner {
display: inline-block;
padding: 1em 0 0 0;
line-height: 1.6em;
left: 0;
top: 0;
}
}

#uwhomelink {
background: url(/site/templates/styles/img/uw-sprite.svg) no-repeat -249px -6px;
text-indent: -99999px;
display: inline-block;
width: 1.8em;
}

.breadcrumb a {
border-bottom: none;
text-decoration: none;
color: lighten(@black, 35%);
font-family: @featuretext;
}

.breadcrumb a:hover {
text-decoration: underline;
}

.breadcrumb {
color: lighten(@black, 35%);
font-family: @featuretext;
}

.breadcrumb .material-icons {
font-size: 1em;
position: relative;
top: .1em;
color: lighten(@black, 55%);
margin: 0 .2em .4em .2em;
}


/*****************


Section Nav 

******************/


#nav-tree {
padding: 1.3em;
background: @white;
margin-top: -5.75em;
position: relative;
z-index: 1;
}

#nav-tree ul {
list-style-type: none;
margin: 0;
padding: 0;
}

#nav-tree li {
margin: 0;
}

#nav-tree ul li {
font-size: 1em;
line-height: 1.3em;
}

#nav-tree ul li a {
text-decoration: none;
display: block;
}

#nav-tree ul li ul li {
background: lighten(@grey,12%);
margin-bottom: 1px;
}

#nav-tree ul li ul li a {
color: @textblack;
border-left: .6em solid darken(@grey,7%);
padding: .6em .6em .6em 1em;
}

#nav-tree ul li ul li {
transition: .2s;
-moz-transition: .2s;
-webkit-transition: .2s;
-o-transition: .2s;
}

#nav-tree li.activenav.no-link span {
display: block;
}

#nav-tree li.activenav a, #nav-tree li.activenav.no-link span {
font-weight: bold;
background: lighten(@grey,4%);
border-left: .6em solid @gold;
padding: .9em 1em .9em 1em;
}

#nav-tree ul li ul li.activenav > a:hover {
color: @gold;
}

#nav-tree li.activenav li a {
font-weight: normal;
background: lighten(@grey,12%);
border-left: 0;
padding: .6em .6em .6em 2.4em;
}

#nav-tree li.activenav li a:before {
content: '';
width: .6em;
height: .5em;
display: inline-block;
position: absolute;
left: 1em;
margin-top: .35em;
}

#nav-tree li.activenav li.activenav {
color: @textblack;
padding: .6em .6em .6em 2.4em;
position: relative;
}

#nav-tree li.activenav li.activenav:before {
content: '';
background:url('/site/templates/styles/img/navarrowright.svg') no-repeat;
width: .6em;
height: .5em;
display: inline-block;
position: absolute;
left: 1.2em;
margin-top: .35em;
}

#nav-tree li.activenav li.activenav:hover {
background: lighten(@grey,12%);
}

#nav-tree ul li ul li ul li {
border-top: 1px solid @white;
}

#nav-tree ul li ul li ul li a:hover {
background: lighten(@grey,4%);
}

#nav-tree ul li ul li a:hover {
background: lighten(@grey,4%);
}

#nav-tree > ul > li > a {
color: @white;
font-weight: bold;
background-color: @purple;
background-image: url(/site/templates/styles/img/navtree-uparrow.svg),linear-gradient(to right,@purple 87%,@purple 87%,@gold 87%);
background-repeat: no-repeat, no-repeat;
background-size: 4%, 100%;
background-position: 95% 50%;
padding: .9em 0 .9em 1em;
}

#nav-tree > ul > li > a:hover {
color: @gold;
}

@media screen and (max-width: 980px) {
#nav-tree, .sidebar #nav-tree {
padding: 0;
margin-top: 3em;
margin-bottom: 1.2em;
}
#nav-tree > ul > li > a {
background-size: 2%, 100%;
}
}


/***************


sidebar elements


*****************/


@media screen and (max-width: 800px) {
.sidebar {
margin-top: 3em;
}
}

.sidebar > img {
border: 1px solid @grey;
box-shadow: 0 1px 2px rgba(0,0,0,0.2);
margin: 0 0 1.7em 0;
width: 100%;
}

.sidebarelem {
margin: 1.3em 1.3em 3em 1.3em;
}

.sidebarelem h3 {
color: @purple;
text-transform: uppercase;
font-size: 1.2em;
margin: 0;
}

.sidebarelem .udub-slant {
margin-top: .8em;
}

.sidebarelem .udub-slant span {
height: .4em;
width: 7em;
}

.sidebarelem img {
width: 90%;
box-shadow: 0 1px 2px rgba(0,0,0,0.2);
margin: .6em 0 0 0;
}

.sidebarelem-photo-header {
background-color: @neutral;
margin: 1.6em 0 3.6em 0;
}

.sidebarelem-photo-header img {
width: 100%;
display: block;
}

.sidebarelem-photo-header h3 {
font-size: 1.3em;
text-transform: uppercase;
margin: 0;
background-image: url('/site/templates/styles/img/stripes-dark-tile.svg');
background-repeat: repeat-x;
background-size: 2em;
font-family: @tenet;
padding: 1.4em 0 .8em 1.6em;
color: @purple;
}

.sidebarelem-photo-header h3 a {
color: @purple;
text-decoration: none;
}

.sidebarelem-photo-header p:first-of-type {
font-style: oblique;
margin-top: .2em;
padding: 0 1.9em 0 1.9em;
}

.sidebarelem-photo-header p:nth-of-type(2) {
font-size: .96em;
padding: 0 1.9em 0 1.9em;
}

.sidebarelem-photo-header .uw-btn, #profile-grid-multiple .uw-btn, .showcase-graduate .uw-btn {
background: @purple;
color: @white;
margin: 1em 0 2em 1.9em;
}

.sidebarelem-photo-header.basic-page-sidebar .uw-btn {
background: @purple;
color: @white;
margin: 1em 0 3em .2em;
}

.sidebarelem-photo-header .uw-btn:before, #profile-grid-multiple .uw-btn:before {
background-color: @purple;
border-left: 5px solid rgba(0,0,0,.3);
}

/*******************************************


More Opportunities Dropdown


*********************************************/

#opp-menu-btn-holder {
display: grid;
grid-template-columns: 1fr 3fr .6fr;
align-items: center;
grid-column-gap: 1em;
margin: .8em 0 .4em 0;
}

.view-all-container #opp-menu-btn-holder {
padding: 1.4em 0 1.4em 0;
}

@media screen and (max-width: 1400px) {
#opp-menu-btn-holder {
padding: 0;
}
}

#opp-menu-btn-holder label {
color: @purple;
text-transform: uppercase;
font-family: @nav;
display: inline-block;
}


.sidebar #opp-menu-btn-holder {
display: block;
width: 90%;
margin: 0 auto 3em auto;
}

.sidebar #opp-menu-btn-holder label {
margin: 2em 0 .5em 0;
}

#opp-menu-btn-holder button  {
background: @purple;
color: @white;
font-family: @leadtextheavy;
text-transform: uppercase;
line-height: 1.3em;
padding: .6em .8em .5em .8em;
font-size: 1em;
transition: all .3s;
cursor: pointer;
}

#opp-menu-btn-holder button:hover {
background: lighten(@purple,10%);
}

.select-css {
display: inline-block;
font-size: 1em;
font-family: @bodytext;
color: @textblack;
line-height: 1.3em;
padding: .6em 1.4em .5em .8em;
width: 100%;
box-sizing: border-box;
margin: 0;
border: 1px solid @textblack;
box-shadow: 0 1px 0 1px rgba(0,0,0,.04);
-moz-appearance: none;
-webkit-appearance: none;
appearance: none;
background-color: #fff;
background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23007CB2%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E'),
linear-gradient(to bottom, #ffffff 0%,#e5e5e5 100%);
background-repeat: no-repeat, repeat;
background-position: right .7em top 50%, 0 0;
background-size: .65em auto, 100%;
}
.select-css::-ms-expand {
display: none;
}
.select-css:hover {
border-color: @blue;
}
.select-css:focus {
border-color: #aaa;
box-shadow: 0 0 1px 3px rgba(59, 153, 252, .7);
box-shadow: 0 0 0 3px -moz-mac-focusring;
color: #222;
outline: none;
}
.select-css option {
font-weight: normal;
}

/* Support for rtl text, explicit support for Arabic and Hebrew */
*[dir="rtl"] .select-css, :root:lang(ar) .select-css, :root:lang(iw) .select-css {
background-position: left .7em top 50%, 0 0;
padding: .6em .8em .5em 1.4em;
}

/* Disabled styles */
.select-css:disabled, .select-css[aria-disabled=true] {
color: graytext;
background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22graytext%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E'),
linear-gradient(to bottom, #ffffff 0%,#e5e5e5 100%);
}
.select-css:disabled:hover, .select-css[aria-disabled=true] {
border-color: #aaa;
}

.sidebar #opp-menu-btn-holder .select-css {
width: 80%;
}


/* buttons */

a.uw-btn, button.uw-btn {
padding: .7em 1.4em .7em 1.2em;
text-transform: uppercase;
background-color: @white;
font-family: @leadtextheavy;
color: @textblack;
display: inline-block;
position: relative;
line-height: 1.5em;
text-decoration: none;
font-size: .9em;
background: @neutral;
}

a.uw-btn:hover {
color: @gold;
}

a.uw-btn:before {
content: "";
width: 38px;
right: -38px;
top: 0;
bottom: 0;
position: absolute;
background-color: @gold;
border-left: 5px solid rgba(0,0,0,.3);
}

a.uw-btn:after {
content: "";
position: absolute;
top: 0;
bottom: 0;
width: 55px;
height: 55px;
right: -45px;
top: 50%;
margin-top: -28px;
background: url(/site/templates/styles/img/uw-sprite.svg) no-repeat -36px -475px transparent;
}


/* body text formatting */

.bodytext h1, .inner h1 {
margin-top: .9em;
}

.bodytext h2 {
margin-top: 1.2em;
}

.bodytext h4 {
margin: 1.6em 0 0 0;
}

.bodytext .ucbi-intern-description h4 {
margin-top: 0;
}

#bodytextinner ul, .sidebarelem ul {
padding: 0 2em 0 1em;
list-style: none;
}

#bodytextinner ul li, .sidebarelem ul li {
display: block;
text-indent: -1em;
}

#bodytextinner ul li:before, .sidebarelem ul li:before {
content: '\2022';
margin-right: 1em;
float: left;
}


/*************** accordions ********************/

.dropdownsection {
padding: 0 0 1em 0;
}

h3.dropdown-header, .dropdown-header {
margin: 1em 0 0 0;
padding: 0;
cursor: pointer;
padding: 1em;
background: lighten(@lightgrey,10%);
transition:  .1s;
-moz-transition:  .1s; /* Firefox 4 */
-webkit-transition:  .1s; /* Safari and Chrome */
-o-transition:  .1s; /* Opera */
font-family: @nav;
font-size: 1.1em;
}

@media (hover: hover) {
.dropdown-header:active {
background: @lightgrey;
}
.dropdown-header:hover {
background: @lightgrey;
}
}

.dropdown-header:focus {
outline: #d3d3d3 solid 1px;
}

.accordion-closed {
display: none;
}

.dropdown-header .fas {
font-size: 1.4em;
float: right;
transition: all 0.3s;
-moz-transition: all 0.3s;
-ms-transition: all 0.3s;
-o-transition: all 0.3s;
-webkit-transition: all 0.3s;
transform: rotate(0deg);
}

.dropdown-header.activedropdown .fas {
transform: rotate(180deg);
}

@media screen and (max-width: 800px) {
.dropdown-header span {
padding-right: 1em;
display: inline-block;
width: 90%;
}
}

blockquote {
padding: .5em 1em .5em 1em;
margin: 0;
background: lighten(@lightgrey,15%);
}

blockquote h4 {
font-size: 1.1em;
font-family: @leadtextheavy;
padding: 0;
}

blockquote.ucbi-intern-description img {
float: right;
margin: 2em 1em 2em 2em;
}

@media screen and (max-width: 800px) {
blockquote.ucbi-intern-description img {
float: none;
width: 80%;
margin: 1em 0 0 0;
}
}

blockquote.ucbi-intern-description h4:first-of-type {
margin-top: 0;
margin-bottom: 0;
padding-top: 1em;
}

blockquote.ucbi-intern-description h4+p {
margin-top: .2em;
}

blockquote.ucbi-intern-description .uw-btn {
margin-bottom: 1.6em;
}

blockquote .align_right {
/* float: right;
margin: 1em; */
}

/* accessibility improvements 2022 */

.accordion-button {
font-family: @nav;
font-weight: normal;
color: @textblack;
font-size: 1em;
padding: 0;
margin: 0;
border: 0;
background: inherit;
}

.accordion-button:focus {
background: #bfbfbf;
outline: none;
}


/*  Pagination */

.MarkupPagerNav {
clear: both;
margin: 1em 0 3em 0;
text-align: center;
}

.MarkupPagerNav li {
display: inline;
list-style: none;
margin: 0;
}

.MarkupPagerNav li a,
.MarkupPagerNav li.MarkupPagerNavSeparator {
display: inline;
padding: 2px 9px;
color: @white;
background: @gold;
margin-right: 3px;
font-size: .9em;
font-weight: bold;
text-transform: uppercase;
text-decoration: none;
}

.MarkupPagerNav li.MarkupPagerNavOn a,
.MarkupPagerNav li a:hover {
color: @white;
background: @purple;
text-decoration: none;
}

.MarkupPagerNav li.MarkupPagerNavSeparator {
display: inline;
color: #777;
background: #d2e4ea;
padding-left: 3px;
padding-right: 3px;
}

/* Community Partners */

#blog-grid {
display: grid;
grid-template-columns: 1fr;
margin: 1em 0 1em 0;
}

#blog-grid > div {
background: lighten(@grey,10%);
padding: 1em 2em 1em 2em;
}

#blog-grid a {
text-decoration: none;
}

#blog-grid a h3 {
color: @purple;
}

#blog-grid h3 {
margin: 0 0 .5em 0;
}

.bodytext #blog-grid h4 {
font-size: 1.2em;
line-height: 1.6em;
margin-top: 0;
}

@media screen and (max-width: 800px) {
#blog-grid {
margin: 1.1em 0 2.6em 0;
}
}

.blog_location {
font-family: @nav;
color: @gold;
text-transform: uppercase;
margin: 0 0 .9em 0;
}

.blog_location > span:first-of-type {
position: relative;
top: .2em;
left: -.2em;
}

.blog_location > span:nth-of-type(2) {
position: relative;
left: -.2em;
}

#grid-sidebar1 .blog_location {
margin: 1em 0 1.4em 0;
}

.MarkupSocialShareButtons {
margin: 0;
padding: 0;
position: relative;
top: .6em;
left: -1em;
text-align: right;
}

@media screen and (max-width: 1400px) {
.MarkupSocialShareButtons {
text-align: left;
left: 0;
}
}

.MarkupSocialShareButtons li {
display: inline;
}

@icon-size: 1.2em;

li.mssb-item a {
visibility: hidden;
border: 1px solid red;
display: inline-block;
width: @icon-size;
line-height: .1em;
}

.mssb-item a:before {
display: inline-block;
content: ' ';
background-size: @icon-size @icon-size;
height: @icon-size;
width: @icon-size;
visibility: visible;
transition: all 0.2s ease;
}

.mssb-email a:before {
background-image: url('/site/templates/styles/img/iconmonstr-email-4.svg');
}

.mssb-twitter a:before {
background-image: url('/site/templates/styles/img/iconmonstr-twitter-1.svg');
}

.mssb-facebook a:before {
background-image: url('/site/templates/styles/img/iconmonstr-facebook-6.svg');
}

.mssb-linkedin a:before {
background-image: url('/site/templates/styles/img/iconmonstr-linkedin-3.svg');
}

.mssb-email a:hover:before {
background-image: url('/site/templates/styles/img/iconmonstr-email-4h.svg');
}

.mssb-twitter a:hover:before {
background-image: url('/site/templates/styles/img/iconmonstr-twitter-1h.svg');
}

.mssb-facebook a:hover:before {
background-image: url('/site/templates/styles/img/iconmonstr-facebook-6h.svg');
}

.mssb-linkedin a:hover:before {
background-image: url('/site/templates/styles/img/iconmonstr-linkedin-3h.svg');
}

.MarkupSocialShareButtons:before {
content: 'Share';
display: inline-block;
position: relative;
top: -.6em;
font-style: oblique;
padding-right: .3em;
color: #6c6c6c;
}

.socialgrid {
display: grid;
grid-template-columns: 1fr 1fr;
margin: 2em 0 1em 0;
}

@media screen and (max-width: 1400px) {
.socialgrid {
display: block;
margin: 1em 0 2em 0;
}
.MarkupSocialShareButtons {
top: 2em;
}
}

.communityvolunteer #blog-grid {
margin: 2.2em 0 2em 0;
grid-row-gap: 2em;
}


/*****************


Testimonials


******************/


.testimonial {
background: @neutral;
padding: 1em 2em 2em 2em;
margin: 3.2em 0 1.9em 0;
font-family: @uniregular;
font-size: 1.2em;
}

.testimonial p:last-of-type {
font-style: oblique;
}

/* Our Programs */

#opps-grid-uw {
display: grid;
grid-template-columns: repeat(auto-fill,minmax(14em, 1fr));
grid-column-gap: 2.2em;
grid-row-gap: 2.2em;
}

#home-grid #opps-grid-uw {
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-column-gap: 2em;
}

@media screen and (max-width: 1130px) {
#home-grid #opps-grid-uw {
grid-template-columns: 1fr 1fr; 
}
}

@media screen and (max-width: 680px) {
#home-grid #opps-grid-uw {
grid-template-columns: 1fr; 
}
}

#opps-grid-uw, .filters {
list-style-type: none;
margin: 0;
padding: 0;
}

#opps-grid-uw li {
box-shadow: 0 1px 2px rgba(0,0,0,0.2);
position: relative;
z-index: 1;
background: lighten(@neutral,5%);
}

#opps-grid-uw li img {
width: 100%;
}

#opps-grid-uw li div {
position: absolute;
top: 0;
left: 0;
z-index: 2;
opacity: 0;
width: 100%;
height: 100%;
transition: all 0.2s ease;
background: lighten(@neutral,5%);
font-family: @bodytext;
font-size: .9em;
}

#opps-grid-uw li div p {
line-height: 1.5em;
}

#opps-grid-uw li div p {
padding: .7em;
margin: 0;
}

#opps-grid-uw li div:hover {
opacity: .9;
}

#opps-grid-uw a {
text-decoration: none;
color: @purple;
}

#opps-grid-uw a:hover {
color: @gold;
}

#opps-grid-uw h2 {
font-size: 1.2em;
margin: 0;
padding: 0;
text-align: center;
font-family: @leadtextheavy;
}

#opps-grid-uw h2 span {
height: 3.1em;
display: table-cell;
vertical-align: middle;
width: 100vw;
padding: 0 1em 0 1em;
position: relative;
z-index: 10;
}

input[type="radio"] {
position: absolute;
left: -9999px;
}

[value="All"]:checked ~ .posts [data-category] {
display: block;
}

[value="tag1132"]:checked ~ .posts .post:not([data-category~="tag1132"]),
[value="tag1129"]:checked ~ .posts .post:not([data-category~="tag1129"]),
[value="tag1128"]:checked ~ .posts .post:not([data-category~="tag1128"]),
[value="tag1130"]:checked ~ .posts .post:not([data-category~="tag1130"]),
[value="tag1133"]:checked ~ .posts .post:not([data-category~="tag1133"]) {
display: none;
}

/* Mentoring Opportunities */

#mentoroppstable {
display: grid;
grid-template-columns: auto 1fr;
grid-column-gap: 1em;
margin: 2.8em 0 0 0;
}

.mentoppdesc {
grid-column: span 2;
margin-bottom: 4.4em;
}

#mentoroppstable h3 {
margin: 0 0 .2em 0;
color: @purple;
}

#mentoroppstable img {
border: .1em solid @grey;
}

#mentoroppstable p {
margin: 1em 0 .2em 0;
}

#mentoroppstable div h3+p {
font-family: @leadtextheavy;
line-height: 1.6em;
font-size: 1.1em;
margin: 0;
text-transform: lowercase;
}

#mentoroppstable div h3+p:first-letter {
text-transform: uppercase;
}

/* UCBI internships */

[value="All"]:checked ~ .ucbi-internship [data-category] {
display: block;
}

[value="sector1472"]:checked ~ .ucbi-internship:not([data-category~="sector1472"]),
[value="sector1490"]:checked ~ .ucbi-internship:not([data-category~="sector1490"]),
[value="sector1489"]:checked ~ .ucbi-internship:not([data-category~="sector1489"]),
[value="sector1491"]:checked ~ .ucbi-internship:not([data-category~="sector1491"]),
[value="sector1473"]:checked ~ .ucbi-internship:not([data-category~="sector1473"]),
[value="sector1474"]:checked ~ .ucbi-internship:not([data-category~="sector1474"]) {
display: none;
}

.filters {
margin: 3em 0 2.6em 0;
}

.filters.ucbi-filters {
margin: 2.4em 0 1.6em 0;
}

.filters:before {
content: 'Filter:';
font-family: @nav;
display: inline-block;
padding: 0 1em 0 0;
font-size: 1.2em;
color: @purple;
}

.filters * {
display: inline-block;
}

.filters label {
padding: .5em 1em;
margin: 0 .6em .6em 0em;
border-radius: 2em;
min-width: 50px;
line-height: normal;
cursor: pointer;
transition: all 0.1s;
background: @gold;
color: @white;
text-align: center;
font-family: @leadtextheavy;
}

.filters label:hover {
background: @purple;
color: @white;
}

.filters label.active-filter {
background: @purple;
color: @white;
}

.orginfo {
background: @neutral;
padding: 2em;
}

@media screen and (max-width: 800px) {
.orginfo {
margin-top: 3em;
}
}

.orginfo h3, #profile-grid-multiple h4, #profile-grid h4 {
margin: 0 0 1.3em 0;
color: @metallicgold;
font-size: 1em;
text-transform: uppercase;
}

.orginfo h4 {
margin: 1em 0 0 0;
line-height: 1.4em;
}

.orginfo p {
line-height: 1.6em;
}

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

.orginfo ul li {
overflow: visible;
padding-left: 17px;
position: relative;
}

.orginfo ul li:before {
content: '\2022';
left: 0;
position: absolute;
}

@media screen and (max-width: 800px) {
.orginfo {
margin: 3em 0 3em 0;
}
}

.orginfo .uw-btn {
background: darken(@neutral,10%);
}

/* meet the staff */

#program_list {
margin-top: 3.6em;
}

#program_list > div {
display: grid;
grid-template-columns: 3fr 1fr;
color: @textblack;
border-top: 2px dotted @grey;
margin-bottom: 1em;
margin-right: 2em;
}

#program_list h4 {
font-family: @leadtextheavy;
font-size: 1.4em;
color: @textblack;
}

#program_list div a {
display: block;
text-align: right;
text-decoration: none;
}

#program_list div a.program-email {
position: relative;
top: 1.4em;
}

.program-page .program-email {
font-style: oblique;
display: inline-block;
margin: 1em 0 0 0;
}

.program-page h3 {
margin: 1em 0 0 0;
}

#program_list div .program_list_innerdiv a {
text-align: left;
}

#program_list span {
background: @white;
position: relative;
top: -2.4em;
}

#program_list h4 span {
padding-right: .7em;
}

#program_list a span {
padding-left: 1em;
}

#program_list span.material-icons {
top: .3em;
padding-left: 0;
}

.program_list_innerdiv {
position: relative;
top: -2.6em;
}

@media screen and (max-width: 930px) {
#program_list {
margin-top: 1.7em;
}
#program_list > div {
display: block;
margin-bottom: 2.3em;
}
#program_list div a {
text-align: left;
}
#program_list span {
background: @white;
position: relative;
top: 0;
}
#program_list a span {
padding-left: 0;
}
#program_list h4 {
margin-top: 1em;
margin-bottom: .6em;
}
.program_list_innerdiv {
top: 0;
}
}

#staff_grid {
display: grid;
grid-template-columns: repeat(auto-fill,minmax(26em, 1fr));
grid-column-gap: 3.2em;
grid-row-gap: 3.4em;
margin: 2.4em 0 7em 0;
}

#staff_grid > div {
display: grid;
grid-template-columns: 1fr 1fr;
grid-column-gap: .8em;
line-height: 1.7em;
}

#staff_grid div .material-icons {
font-size: 1.1em;
color: @blue;
position: relative;
top: .2em;
}

#staff_grid h4 span {
color: @textblack;
font-family: @bodytext;
font-size: .7em;
}

@media screen and (max-width: 800px) {
#staff_grid > div {
display: block;
}
}

#staff_grid img {
box-shadow: 0 1px 3px rgba(34, 25, 25, 0.4);
}

#staff_grid h4 {
font-family: @leadtextheavy;
font-size: 1.4em;
color: @purple;
margin: 0 0 .4em 0;
}

#staff_grid h5 {
font-family: @unilight;
font-weight: normal; 
font-size: 1.1em;
color: @textblack;
margin: .2em 0 .4em 0;
line-height: 1.5em;
}

.staff_grid_text {
margin-top: 1em;
}

@media screen and (max-width: 800px) {
#staff_grid h3 {
font-size: 1.6em;
margin: .4em 0 .2em 0;
}
#staff_grid h4 {
margin: 0 0 .2em 0;
}
}

/* -----------------------------------------


Community-engaged course list

----------------------------------------- */

.courselist {
background: @grey;
border-spacing: .1em;
border-collapse: separate;
color: @textblack;
width: 100%;
}

.courselist th {
background: @neutral;
font-weight: 600;
padding: .8em;
}

.courselist td {
background: @white;
padding: .8em;
}

.courselist td:first-of-type {
white-space: nowrap;
}

.courselist td:nth-of-type(2) {
font-style: oblique;
}

@media only screen and (max-width: 700px) {
.courselist {
border-spacing: 0;
background: none;
}
.courselist th {
display: none;
}
.courselist tr {
display: block;
border-bottom: 1px solid @grey;
margin-bottom: 1em;
padding-bottom: 1em;
}
.courselist td {
display: block;
background: none;
padding: .1em;
}
.courselist tr:first-of-type {
margin-bottom: 0;
padding-bottom: 0;
border-bottom: 0;
}
}


/************************** Images with captions ********************/


.bodytext figure {
border: 0;
width: 40%;
padding: 1em;
}

.bodytext figure img {
width: 100%;
}

.bodytext figure figcaption {
color: darken(@grey,20%);
font-style: oblique;
}

/************************** News & Events ********************/


#postgrid {
display: grid;
grid-template-columns: 1fr 1fr;
grid-column-gap: 1em;
grid-row-gap: 1em;
}

#homepostflexbox {
display: grid;
gap: 2em;
grid-auto-flow: column;
margin: 1em 0 5em 0;
}

.postbox {
background: lighten(@grey,11%);
padding: 1em;
border: 1px solid @grey;
}

.postbox img {
margin: 1em 0 0 0;
border: 1px solid @grey;
width: 100%;
}

.postbox h5 {
margin: 0 0 .4em 0;
padding: 0;
text-transform: uppercase;
color: @gold;
}

.postbox h4 {
margin: 0;
padding: 0;
}

.postbox h4 a {
color: @purple;
text-decoration: none;
}

.postpagesectionhead {
margin-bottom: 1em;
}

#condensedposts details {
border: 1px solid @grey;
margin-top: 1em;
}

#condensedposts details img {
display: block;
border: 1px solid @grey;
float: left;
margin: 1.4em 2em 1em 1em;
}

#condensedposts summary {
font-family: @leadtextheavy;
color: @purple;
padding: .6em;
background: lighten(@grey,10%);
cursor: pointer;
border-radius: .3em;
font-size: 1.2em;
transition: all .2s;
}

#condensedposts summary:hover {
background: lighten(@grey,5%);
}

#condensedposts h3 {
color: @gold;
text-transform: uppercase;
font-size: 1.2em;
margin: 2.1em 0 0 0;
}

.eventdetails {
padding: .6em 1em 1.6em 1em;
}

#homenewsevents {
margin: 0 0 5em 0;
padding: 1em;
}

#homenewsevents h3:first-of-type {
margin-top: 1em;
}


/************************** Profile ********************/

#profile-grid {
display: grid;
grid-template-columns: 2fr 3fr;
margin: 1em 0 2.6em 0;
grid-column-gap: 3.6em;
border-top: 0.4em solid @neutral;
padding-top: .6em;
}

@media only screen and (max-width: 800px) {
#profile-grid {
display: block;
}
}

#profile-grid h2 {
font-size: 2em;
margin-bottom: .3em;
}

#profile-grid img {
width: 100%;
margin: .2em 0 .4em 0;
-webkit-box-shadow: 3px 3px 12px 0px rgba(0,0,0,0.25);
-moz-box-shadow: 3px 3px 12px 0px rgba(0,0,0,0.25);
box-shadow: 3px 3px 12px 0px rgba(0,0,0,0.25);
}

#profile-grid .bodytext p {
font-family: @uniregular;
font-size: 1.3em;
}

#profile-grid h4 {
margin: .6em 0 .6em 0;
}

#profile-grid h5 {
margin-bottom: 0;
}

#profile-grid > div > p:first-of-type {
font-style: oblique;
font-size: .96em;
}

#profile-grid blockquote {
background: @white;
padding: 0 0 0 1.2em;
border-left: .4em solid @neutral;
}

#profile-sections {
margin-top: 3.6em;
}

#profile-grid-multiple {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-column-gap: 1.6em;
grid-row-gap: 1.6em;
margin: 1.6em 0 5.8em 0;
}

#profile-grid-multiple div {
background: @neutral;
}

#profile-grid-multiple div h3 {
font-size: 1.3em;
text-transform: uppercase;
margin: 0;
background-image: url('/site/templates/styles/img/stripes-dark-tile.svg');
background-repeat: repeat-x;
background-size: 2em;
font-family: @tenet;
padding: 1.4em 0 .8em .8em;
}

#profile-grid-multiple img {
width: 100%;
}

#profile-grid-multiple div h3 a {
color: @purple;
text-decoration: none;
}

#profile-grid-multiple h4 {
margin: .8em 0 0 1em;
}

#profile-grid-multiple div div {
padding: 0 1.6em 0 1em;
}

#profile-grid-multiple div div p:nth-of-type(1) {
line-height: 1.3em;
font-style: oblique;
font-size: .95em;
}

#profile-grid-multiple .uw-btn {
margin-left: 1.2em;
}

@media only screen and (max-width: 1270px) {
#profile-grid-multiple {
grid-template-columns: 1fr 1fr 1fr;
}
}

@media only screen and (max-width: 780px) {
#profile-grid-multiple {
grid-template-columns: 1fr 1fr;
}
}

/************************ Overview ************************/

.overview-item {
background: lighten(@grey,10%);
padding: 1.6em 1.6em 2em 1.6em;
margin: 1.6em 2em 1.6em 0;
}

.overview-item h3 {
margin: 0;
}

.overview-item h3 a {
color: @purple;
text-decoration: none;
}



/************************* Virtual Showcase *********************/

#logo a img#logo_cele_header {
width: 30em;
margin: .9em 0 1em 0;
}

#virtualshowcase nav {
display: none;
}

#virtualshowcase #pagebanner h1 {
margin-bottom: 0;
font-size: 3.2em
}

#virtualshowcase .pagebannerinner {
height: 12em;
}

.featuretext {
font-family: @featuretext;
font-size: 1.26em;
margin-top: 0;
}

.showcase_intro {
padding: 4.6em 0 5.6em 0;
background: lighten(@neutral,3%);
}

.showcasegrid {
display: grid;
grid-template-columns: repeat(7, 1fr);
grid-column-gap: 3.6em;
grid-row-gap: 7em;
}

.showcasegrid_span2 {
grid-column: span 2;
}

.showcasegrid_span3 {
grid-column: span 3;
}

.showcasegrid_span4 {
grid-column: span 4;
}

.showcasegrid_span5 {
grid-column: span 5;
}

.showcasegrid_span6 {
grid-column: span 6;
}

.showcasegrid_span7 {
grid-column: span 7;
}

.main_showcase_grid {
padding-top: 5em;
}

.showcasegrid p {
margin: 0 0 .9em 0;
padding: 0;
line-height: 1.66em;
font-size: 1.3em;
font-family: @featuretext;
}

.showcasegrid h3 {
margin: .4em 4em .6em 0;
color: @purple;
font-size: 1.8em;
}

.showcasegrid details {
border: 1px solid @grey;
margin-top: 1em;
}

.showcasegrid details img {
display: block;
}

.showcasegrid summary {
font-family: @leadtextheavy;
color: @purple;
padding: .6em;
background: lighten(@grey,10%);
cursor: pointer;
border-radius: .3em;
font-size: 1.2em;
transition: all .2s;
}

.showcasegrid summary:hover {
background: lighten(@grey,5%);
}

.showcasegrid img {
border: 1px solid @grey;
width: 100%;
}

.showcase_item_caption {
padding: 1.4em 1em 1em 1em;
}

.showcase_item_caption p {
font-size: 1em;
font-family: @bodytext;
}

#showcase-pagenav {
padding: 1em 0 1.6em 0;
}

#showcase-pagenav-holder {
position: sticky;
top: 0;
background: @gold;
z-index: 100;
}

#showcase-pagenav-holder #opp-menu-btn-holder label {
color: @white;
font-family: @featuretext;
}

#showcase-pagenav-holder #opp-menu-btn-holder {
grid-template-columns: 1.4fr 3fr 0.6fr;
}

#showcase-pagenav-holder #opp-menu-btn-holder label em {
font-style: normal;
font-family: @nav;
display: inline-block;
margin-top: .3em;
}

@media only screen and (max-width: 990px) {
.showcasegrid {
grid-template-columns: repeat(1, 1fr);
grid-row-gap: 0;
grid-column-gap: 0;
}
#showcase-pagenav-holder #opp-menu-btn-holder {
grid-template-columns: 1fr;
grid-row-gap: 1em;
}
.main_showcase_grid {
padding-top: 0;
}
.showcasegrid p {
margin: 0 0 .6em 0;
}
.showcase_intro {
padding: 0 0 3em 0;
}
.showcasegrid h3 {
margin-top: 3em;
margin-right: 0;
}
.showcasegrid div:first-of-type h3 {
margin-top: 2em;
}
.padlet-embed {
margin-top: 5em;
}
.showcasegrid_span3.featuretext {
margin:  1.6em 0 1em 0;
}
}

@media only screen and (max-width: 640px) {
#logo a img#logo_cele_header {
width: 100%;
}
#logo {
/* display: block */;
}
#headergrid {
grid-template-columns: 4fr 1fr;
}
}

#home-pullquote.home-quote-showcase {
background: @purple;
margin-bottom: 3.4em;
}

#home-pullquote.home-quote-showcase p {
color: @white;
}

#home-pullquote.home-quote-showcase h3 {
color: @white;
}

#home-pullquote.home-quote-showcase .uw-btn {
margin-bottom: 2em;
}

#home-quote.showcase-graduate h4 {
margin-top: 1.6em;
}

#home-quote.showcase-graduate h3 {
margin-top: 1.3em;
}

#home-quote.showcase-graduate h5 {
margin: 1.2em 0 0 0;
padding: 0;
font-size: 1em;
}

#home-quote.showcase-graduate p:last-of-type {
font-style: oblique;
}

#home-quote.showcase-graduate {
margin: 7em 0 1em 0;
}

.showcase-graduate .uw-btn {
margin: 1em 0 0 0;
}

#staff_grid p {
font-family: @featuretext;
font-size: 1.2em;
}

#staff_grid h5:nth-of-type(1) {
font-family: @uniregular;
}

#staff_grid.graduate .staff_grid_text {
margin-top: .3em;
}

/************************** Portfolio ********************/


.portfolio_grid {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-row-gap: 1.6em;
grid-column-gap: 1.6em;
margin: 1.6em 0 2em 0;
}

.portfolio_grid div {
background: @neutral;
padding: 1.6em;
}

.portfolio_grid img {
width: 100%;
background: #F8F8F8; 
border: solid #BDBDBD 1px; 
box-shadow: 5px 5px 20px rgba(0, 0, 0, 0.3); 
-webkit-box-shadow: 5px 5px 20px rgba(0, 0, 0, 0.3); 
-moz-box-shadow: 5px 5px 20px rgba(0, 0, 0, 0.3); 
}

.portfolio_grid h4, .portfolio_grid p {
margin: 0;
}

.portfolio_grid h4 {
padding: .6em 0 .3em 0;
}

@media only screen and (max-width: 940px) {
.portfolio_grid {
display: grid;
grid-template-columns: 1fr 1fr;
}
}

@media only screen and (max-width: 500px) {
.portfolio_grid {
display: grid;
grid-template-columns: 1fr;
}
}

/************************* Gallery *********************/


#othellogallery {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
grid-column-gap: 1em;
grid-row-gap: 1em;
margin-top: 2em;
}

#othellogallery img {
width: 100%;
}

@media only screen and (max-width: 800px) {
#othellogallery {
grid-template-columns: 1fr 1fr 1fr;
}
}

@media only screen and (max-width: 500px) {
#othellogallery {
grid-template-columns: 1fr 1fr;
}
}

/************************* Work With Us *********************/

#item_list {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-column-gap: 1.6em;
grid-row-gap: 1.6em;
}

#item_list > div {
padding: 1em 1em 1.6em 1em;
background: #eeeeee;
border: 1px solid white;
}

#positionsgrid {
display: grid;
grid-template-columns: 1fr 4fr;
grid-column-gap: 2em;
margin-top: 1.6em;
}

#item_list img {
width: 100%;
border: 1px solid #eeeeee;
}

.positionslist, #item_list ul {
list-style-type: none;
margin: 0;
padding: 0;
}

.positionslist li {
margin: 0;
font-size: 1em;
line-height: 1.5em;
}

.positionslist li span {
cursor: pointer;
}

#positionsfacets h3 {
margin: 1.6em 0 .3em 0;
font-size: 1em;
}

#positionsfacets div:first-of-type h3 {
margin-top: 0;
}

#item_list h3 {
margin: .4em 0 .4em 0;
font-size: 1.4em;
}

#item_list h3 a {
color: @purple;
text-decoration: none;
}

#item_list p {
margin: .3em 0 .6em 0;
line-height: 1.4em;
}

#item_list > div.position_active {
background: white;
border: 1px solid #eeeeee;
}

.position_hiring_info {
font-family: @featuretext;
font-size: 1.3em;
margin: 0 0 1em 0;
}

.position_hiring_info em {
font-style: normal;
font-family: @leadtextheavy;
}

.searchbox {
font-size: 1em;
}

@media only screen and (max-width: 1200px) {
#item_list {
grid-template-columns: 1fr 1fr;
}
}

@media only screen and (max-width: 800px) {
#item_list {
grid-template-columns: 1fr;
}
}

@media only screen and (max-width: 640px) {
#coursefiltergrid {
grid-template-columns: 1fr;
}
#coursefilterfacets {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
margin-bottom: 1em;
grid-column-gap: 1em;
}
#coursefilterfacets h3 {
margin: 0 0 .3em 0;
}
}

#sidebar-area.position-description img {
margin: 3em 0 1em 0;
}

.position-description h3 {
margin: 0;
}

.position-description div {
font-family: @featuretext;
font-size: 1.2em;
color: @textblack;
-webkit-font-smoothing: antialiased;
}

.position-description div span {
font-family: @nav;
display: block;
margin: 1.2em 0 .2em 0;
color: @textblack;
}

.position-description ul {
margin: 0;
padding: 0;
}

.position-description ul li {
list-style-type: none;
}

.sidebarnomargin {
margin: 2.6em 2.6em 0 0;
}

.sidebarelem-photo-header.sidebarnomargin {
padding-bottom: 1.4em;
}


/************************** School & District Partners ********************/

#partnergrid {
display: grid;
grid-template-columns: 1fr 3fr;
grid-column-gap: .6em;
margin: 2.6em 0 3em 0;
}

@media only screen and (max-width: 980px) {
#partnergrid {
display: block;
}
}

.partnerfilterlist li span {
cursor: pointer;
}

#partnerfilter_sort_search {
color: @purple;
font-family: @nav;
display: grid;
grid-template-columns: auto 1fr;
grid-column-gap: 1em;
}

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

#partnerfilterfacets h3 {
font-size: 1em;
color: @purple;
padding: 0 0 .6em 0;
}

#partnerfilterfacets img {
border: 1px solid @grey;
width: 100%;
}

#partnerfilterfacets div:first-of-type h3 {
margin-top: 0;
}

.partnerfilterlist li {
display: inline-block;
margin: 0;
}

#partnergrid table tr {
background: #eeeeee;
}

#partnergrid table {
width: 100%;
margin-top: 1.8em;
}

#partnergrid table td {
font-size: .9em;
padding: .4em;
color: @textblack;
}

#partnerfilter_sort_search .searchbox, #partnerfilter_sort_search button {
font-size: 1em;
font-family: @bodytext;
}

@media only screen and (max-width: 980px) {
#partnerfilter_sort_search {
grid-template-columns: 1fr;
grid-row-gap: .7em;
}
}

#partnerstickyrow {
position: sticky;
top: 0;
}

#partner_list th {
font-family: @nav;
color: lighten(@textblack,10%);
font-weight: normal;
font-size: .9em;
background: darken(@grey,2%);
padding: .4em;
}

.partnerhidemobile {
text-align: center;
}

@media only screen and (max-width: 980px) {
#partner_list th, .partnerhidemobile {
display: none;
}
#partnerfilter_sort_search {
margin-top: 1em;
}
}



/************************** STORIES ********************/


#storygrid {
display: grid;
gap: 1em;
grid-auto-rows: 12em;
grid-template-columns: repeat(auto-fit, minmax(12em, 1fr));
grid-auto-flow: dense;
margin-top: 1em;
margin-bottom: 2em;
}

.storygridhome {
grid-column: 1 / span 2;
}

.storyhomeintro p {
font-family: 'Uni Sans Regular', sans-serif;
font-size: 1.3em;
margin: 0;
}

div.storyimage {
border-radius: 10px;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
transition: .6s;
cursor: pointer;
}

div.storyimage span {
height: 100%;
display: grid;
align-items: center;
color: @white;
text-align: center;
opacity: 0;
}

div.storyimage:hover {
background-image: none !important;
background-color: @purple;
}

div.storyimage a {
text-decoration: none;
}

div.storyimage:hover span {
opacity: 1;
}

div.storyimage:nth-child(6n) {
grid-column: span 2;
grid-row: span 2;
}

div.storyimage:nth-child(7n) {
grid-column: span 2;
}

div.storyimage:nth-child(8n) {
grid-row: span 2;
}


/************************** FOOTER ********************/

#pagefoot {
padding: 5em 0 3.4em 0;
background-color: @purple;
font-family: @featuretext;
color: @white;
border-top: .5em solid @grey;
margin-top: 3.8em;
}

#pagefoot a {
text-decoration: none;
}

#pagefoot h3, #pagefoot a {
color: @white;
}

#pagefoot h3 {
font-family: @leadtextheavy;
font-weight: normal;
margin: 0;
}

#pagefoot p {
font-family: @featuretext;
font-size: 16px;
color: @white;
margin: .4em 0 1em 0;
}

.footercaps {
text-transform: uppercase;
line-height: 1.4em;
}

#footerlinks {
order: 2;
text-align: right;
}

#footerlinks a {
margin-left: 1em;
}

#footerlogo {
grid-column: span 2;
width: 46%;
}

#pagefoot a:hover {
color: @gold;
}

#footerconnect {
margin-bottom: 2em;
}

#footerconnect a {
margin: 0 .9em 0 0;
}

#footerconnect h3 {
margin: 2em 0 .5em 0;
}

#footerconnect p {
font-size: 17px;
}

#footerconnect .material-icons {
font-size: 2.4em;
margin-right: .1em;
position: relative;
top: .3em;
}

#pagefootgrid {
display: grid;
grid-template-columns: 1fr 2fr;
grid-row-gap: 2.8em;
grid-column-gap: 3.6em;
margin: auto;
}

@media only screen and (max-width: 800px) {
#footerconnect {
margin: 2.6em 0 2em 0;
}
#pagefootgrid {
display: block;
}
#footerlinks {
margin: 1.3em 0 1em 0;
text-align: left;
}
#footerlinks a {
margin-left: 0;
margin-right: 1em;
}
#footerlogo {
margin-bottom: 1.8em;
}
#footerlogo {
width: 100%;
}
}