/* colors */
@purple: #4b2e83;
/*@gold: #b7a57a;*/
@gold: #85754d;
@metallicgold: #85754d;
@white: #fff;
@black: #222;
@neutral: #f0ede4;
@grey: #d0d0d0;
@darkgrey: #444;
/*previous link color @blue: #0074bb;*/
@blue: #00588e;
@youtubered: #880904;
@textcolor: #3d3d3d;
@buttontext: #5a5a5a;
@spiritgold: #ffc700;
@huskypurple: #32006e;

/* breakpoints */
@smallfrom: 0px;
@smallto: 530px;
@mediumfrom: 531px;
@mediumto: 1070px;
@largefrom: 1071px;
@largeto: 1920px;

/* new breakpoints */
@small: 36em;

/* fonts */
@font-face {
    font-family: 'encode_sans_normalblack';
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'encode_sans_compressedblack';
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'encodesanscompressed-400-regular';
    src: url('/uaa/hko/encodesanscompressed-400-regular-webfont.ttf');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'encodesanscompressed-800-extrabold';
    src: url('/uaa/hko/encodesanscompressed-800-extrabold-webfont.ttf');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'encodesanscompressed600';
    src: url('/uaa/hko/encodesanscompressed-600-semibold-webfont.ttf');
    font-weight: normal;
    font-style: normal;
}

@font-face {
  font-family: 'EncodeSansCompressed-Bold700';
  font-weight: normal;
  font-style: normal;
}


@body: 'Open Sans', sans-serif;
@display: 'encode_sans_compressedblack', sans-serif;
@displaynotcompressed: 'encode_sans_normalblack';
@feature: 'encodesanscompressed-400-regular', sans-serif;
@featurebold: 'encodesanscompressed600', sans-serif;
@nav: 'encodesanscompressed-800-extrabold', sans-serif;
@buttontext: 'EncodeSansCompressed-Bold700', sans-serif;
@roboto: 'Roboto Slab', serif;


.purplebg {
background: @purple;
}

.goldbg {
background: @gold;
}

.whitebg {
background: @white;
}

.metallicgoldbg {
background: @metallicgold;
}

.blackbg {
background: @black;
}

.neutralbg {
background: @neutral;
}

.greybg {
background: @grey;
}

.darkgreybg {
background: @darkgrey;
}

.spiritgoldbg {
background: @spiritgold;
}

.huskypurplebg {
background: @huskypurple;
}


/** universal **/

body {
background: @white;
margin: 0;
padding: 0;
}

h1, h2  {
line-height: 1.4em;
color: @purple;
font-weight: normal;
}

h3 {
font-size: 23px;
color: @textcolor;
margin-bottom: 0;
}

h1, h2 {
font-family: @displaynotcompressed;
}

h3, h4, h5, h6 {
font-family: @roboto;
font-weight: 600;
}

.body h2 {
font-size: 1.74em;
line-height: 1.4em;
font-family: @nav;
margin: 1.3em 0 .5em 0;
}

.body h3 {
margin: 1.2em 0 .5em 0;
font-weight: normal;
}

.body + h3 {
border: 1px solid red;
}

.body h3.dropdown-header {
margin: .5em 0 1em 0;
font-weight: normal;
}

.body.pageintro p {
font-family: @feature;
font-size: 1.5em;
margin: 1.2em 0 1em 0;
}

#pagebody > p:first-of-type {
font-family: @feature;
font-size: 1.5em;
margin: .2em 0 .8em 0;
}

#pagebody > p:first-of-type strong {
font-family: @featurebold;
}

#pagebody ol {
margin-bottom: 2em;
}

#staffpage #pagebody table td {
padding: 0;
border: 0;
}

.o-page #pagebody > p:first-of-type {
margin: 1.5em 0 .8em 0;
}

.body.pageintro h2 {
color: @purple;
font-family: @featurebold;
}

#aftereverything {
margin-bottom: 4em;
}

#aftereverything img {
width: 100%;
}

#pagebody figure {
float: right;
position: relative;
top: -1em;
font-family: @body;
margin-block-start: 0;
margin-block-end: 0;
margin-inline-start: 0;
margin-inline-end: 0;
width: 20em;
color: @textcolor;
font-style: oblique;
margin: 0 0 0 3em;
}

#pagebody figure img {
margin: 0 0 .4em 0;
width: 100%;
}

@media screen and (max-width: 780px) {
#pagebody figure {
float: none;
margin: 3em 0 0 0;
width: 90%;
}
}

#pagebody.pageintro {
margin-bottom: 0;
}

#pagebody img {
width: 100%;
}

#pagebody img.fixedwidth {
width: auto;
}

#pagebody table {
border-collapse: collapse;
}

#pagebody table h2 {
margin: 0;
}

#pagebody table td {
padding: .6em;
font-family: @body;
-webkit-font-smoothing: antialiased;
border: 1px solid @grey;
}

#pagebody table img {
box-shadow: 0 1px 3px rgba(34,25,25,0.4);
min-width: 10em;
}

@media screen and (max-width: 600px) {
#pagebody table img {
min-width: 7em;
position: relative;
top: 1em;
}
#pagebody table td {
display: block;
padding: 1em;
}
}

.dropdownsection blockquote h3 {
margin-bottom: 1em;
}

.dropdownsection blockquote h3:not(:first-of-type) {
margin-top: 2em;
}

#toast {
font-family: @body;
}

/** dropdowns/accordions as details elements **/

.dropdownsection details {
margin-bottom: 1em;
font-family: @body;
}

.dropdownsection details summary {
cursor: pointer;
background: #eaeaea;
padding: 1em;
font-size: 1.3em;
font-family: @nav;
color: @purple;
}

.dropdownsection details summary:hover {
box-shadow: 0.12857em 0.12857em 0.12857em #d0d0d0;
}

.dropdownsection details summary:active {
background: #d0d0d0;
}

.dropdownsection details p {
padding-left: 1em;
}

.dropdownsection details[open] summary ~ * {
  animation: sweep .5s ease-in-out;
}

@keyframes sweep {
  0%    {opacity: 0; margin-left: -10px}
  100%  {opacity: 1; margin-left: 0px}
}

.nosidebar h2 {
margin-top: 0;
}

p, li {
line-height: 1.72222;
font-weight: normal;
color: @textcolor;
font-family: @body;
-webkit-font-smoothing: antialiased;
}

p {
font-size: 1.06em;
}

li {
font-size: 1.06rem;
}

a {
transition: .2s;
-moz-transition: .2s;
-webkit-transition: .2s;
-o-transition: .2s;
text-decoration: underline;
}

a, p a, li a, .bodylink a {
color: @blue;
}

h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
color: @purple;
}

h2 {
font-family: @nav;
margin: 1.5em 0 .5em 0;
}

.lead h2 {
margin: .5em 0 .5em 0;
}

.body a:hover, .bodylink a:hover, .panel a:hover {
color: @metallicgold;
}

.body a:active {
color: lighten(@purple,10%);
}

h1 a:active, h2 a:active, h3 a:active, h4 a:active, h5 a:active, h6 a:active {
color: lighten(@purple,10%);
}

cite {
color: red;
}

.body ul {
margin-bottom: 1em;
}

.body ul.disc li, .body ol li  {
margin: 0 0 .5em 0;
}

.body ul.disc li ul {
margin: .3em 0 .3em 1em;
list-style-type: square;
}

.body ul.disc li ul li:marker {
color: @gold;
}

blockquote h3:first-child {
margin-top: .5em;
}

.body ul.disc.orient-agenda {
list-style: none;
}

#basic-page-grid h4 {
color: @textcolor;
font-size: 1.2em;
margin: 1.2em 0 .2em 0;
}

#basic-page-grid blockquote h4:first-child {
margin-top: .5em;
}

blockquote, blockquote p {
color: @textcolor;
}

a img { 
border:none; 
vertical-align:top; 
}

p.nolinkunderline a {
border-bottom: none;
}

video {
max-width: 100%;
height: auto;
background: @gold;
}

.align_center {
width: 95%;
box-shadow: 0 1px 3px rgba(34,25,25,0.4);
margin: 0 0 1em 0;
}

.align_right {
float: right;
margin: 0 0 2.2em 2.2em;
}

#pagebody p img.align_right.podcastintro {
width: 30%;
margin: 0 0 1em 1em;
}

#pagebody img.align_right {
width: auto;
}

@media screen and (max-width: 1120px) {
.align_right {
float: none;
margin: 1em 0 0 0;
}
}

*, *:before, *:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}

#videoarchivegrid h2 img {
position: relative;
margin-right: .2em;
top: .3em;
}

dl {
font-family: @body;
color: @textcolor;
}

dt {
font-weight: bold;
}

dd {
margin-bottom: 1.2em;
}

.emphasis {
font-weight: bold;
color: @purple;
font-family: @nav;
font-size: 1.2em;
}

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

/*                    Header & Search                  */

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


.purple {
background: @purple;
}

#headergrid {
display: grid;
grid-template-columns: 2.6fr 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: .2em;
margin-top: .3em;
}

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

#logo a img.logo-fyp {
width: 80%;
}

@media screen and (min-width: 2000px) {
#logo a img.logo-fyp {
width: 70%;
}
}

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

.uaamenuholder a {
font-family: @featurebold;
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: @gold;
text-decoration: underline;
}

#searchbutton {
text-align: right;
align-self: center;
font-size: 1.2em;
}

#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 #search_submit i {
font-size: 2.6em;
}

#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: 1px solid @grey;
font-size: 1.2em;
background: lighten(@grey,10%);
font-family: @body;
height: 3em;
margin: 0;
}

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

#search button {
background: darken(@grey,30%);
width: 5em;
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;
}
}

@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;
}
}

#searchresults {
padding: 0 0 4em 0;
}

#searchresults li {
margin-bottom: 1em;
}

#searchresults li div {
font-size: 1em;
}

#searchresults h3 {
margin: 0 0 1.6em 0;
}


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


#menu a {
text-decoration: none;
}

#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, 
#toggle-menu {
border: 0;
background: lighten(@grey,10%);
margin: 1px 0 0 0;
}

#menu .sub-menu li {
background: @white;
margin: 1px 0 0 0;
}

#menu li, 
#toggle-menu {
  border-width: 0 0 1px;
}

#menu .sub-menu {
  background-color: @white;
  border-width: 1px 1px 0;
  margin: 0;
}

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

#menu li, 
#toggle-menu, 
#menu a {
position: relative;
display: block;
text-transform: capitalize;
color: @purple;
font-family: @body;
line-height: .8em;
}

#menu .sub-menu li a {
color: darken(@grey,55%);
border-bottom: 1px solid lighten(@grey,10%);
}

#menu, 
#toggle-menu {
  background-color: @white;
}

#toggle-menu {
font-family: @nav;
text-transform: uppercase;
color: darken(@grey,20%);
}

#toggle-menu, 
#menu a {
  padding: 1em 1.4em;
}

#menu a {
  transition: all .125s ease-in-out;
  -webkit-transition: all .125s ease-in-out;
}

#menu a:hover {
  background-color: white;
  color: @gold;
}

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

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

#menu .sub-menu a:hover {
  color: @gold;
}

#toggle-menu .drop-icon {
  position: absolute;
  right: 2em;
  top: .6em;
}

#menu li label.drop-icon {
  position: absolute;
  right: 2em;
  top: .6em;
}

#menu label.drop-icon, #toggle-menu span.drop-icon {
  width: 1em;
  height: 1em;
  text-align: center;
}

#menu .drop-icon {
  line-height: 1;
}


@media only screen and (max-width: 64em) and (min-width: 52.01em) {
  #menu li {
    width: 33.333%;
  }
  #menu .sub-menu li {
    width: auto;
  }
}


@media only screen and (max-width: 1280px) {
.menuholder.default-page-width {
width: 100%;
}
}

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

.navarrow {
font-size: .9em;
position: relative;
top: .1em;
left: .4em;
}

#menu li, 
#toggle-menu {
background: @white;
}

#menu li, 
#toggle-menu, 
#menu a {
  position: relative;
  display: block;
  text-transform: uppercase;
  color: @purple;
  font-family: @nav;
  font-size: 1.1em;
}

#toggle-menu, #menu a {
  padding: 1.5em 1.5em;
}

  #menu .main-menu {
    display: block;
  }
  #toggle-menu, 
  #menu label.drop-icon {
    display: none;
  }
  #menu ul span.drop-icon {
    display: inline-block;
  }
  #menu li {
    display: inline-block;
    border-width: 0;
  }
    #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;
    }

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

  #menu .sub-menu li a {
  text-transform: capitalize;
  color: darken(@grey,40%);
  font-family: @featurebold;
  padding: 1em 1.5em;
  font-size: .93em;
  }
  #menu .sub-menu li a:hover {
    color: @purple;
    background: lighten(@grey,7%);
  }
  #menu .sub-menu {
    border-top: 4px solid @purple;
    margin: 0;
    position: absolute;
    top: 93%;
    left: 0;
    width: 19em;
    z-index: 3000;
    box-shadow: 1px 1px 8px rgba(0,0,0,0.5);
  }
  #menu .sub-menu, 
  #menu input[type="checkbox"]:checked + .sub-menu {
    display: none;
  }
  #menu .sub-menu li {
    border-width: 0 0 1px;
    display: block;
  }
  #menu .sub-menu .sub-menu {
    top: 0;
    left: 100%;
  }
  #menu li:hover > input[type="checkbox"] + .sub-menu {
    display: block;
  }
}

#menu a.menu_no_hover:hover {
color: @purple;
}

/** page headers **/

#pagebanner {
display: block;
background-repeat: no-repeat;
background-size: cover;
background-position: bottom center;
}

@media screen and (max-width: 600px) {
#pagebanner {
background-position: calc(100% + 3em) 0 !important;
position: relative;
}
#pagebanner:after {
display: block;
position: absolute;
background-image: linear-gradient(to top, rgba(0,0,0, 0) 0, rgba(0,0,0, .6) 100%);
top: 0;
left: 0;
height: 12em;
width: 100%;
content: '';
}
}

#pagebanner h1 {
font-family: @display;
font-size: 50px;
color: @white;
text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
padding: 1.3em 0 1.5em 0;
margin: 0;
position: relative;
z-index: 2;
}

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

#pagebanner.pagebannerlarger h1 {
padding: 2.1em 0 2.2em 0;
text-transform: uppercase;
}

@media screen and (max-width: 600px) {
#pagebanner.pagebannerlarger h1 {
padding: 1.6em 0 2em 0;
line-height: 1.2em;
font-size: 3.3em;
position: relative;
z-index: 2;
}
}

#pagebanner.pagebannerlarger h1::after {
content: "";
display: block;
height: 12px;
width: 190px;
margin-top: 10px;
margin-bottom: 20px;
background: @gold;
-webkit-clip-path: polygon(0 0, 100% 0, 98% 100%, 0% 100%);
clip-path: polygon(0 0, 100% 0, 98% 100%, 0% 100%);
}

h1.pagehead {
font-size: 2.3em;
font-family: @nav;
padding: 0;
line-height: 1.2em;
padding: .2em 0 .3em 0;
}

@media screen and (max-width: 600px) {
h1.pagehead {
font-size: 2em;
}
}

.pagebanner-imageonly {
height: 12em;
}

/** breadcrumb ***/

#breadcrumb {
padding: 2em;
background: @white;
display: inline-block;
margin-left: -1.8em;
font-family: @feature;
color: @metallicgold;
line-height: 1.4em;
}

#breadcrumb.condensed {
padding: 2em 2em 0 2em;
}

#breadcrumb a {
color: @textcolor;
display: inline-block;
text-decoration: none;
}

#breadcrumb a:hover {
color: @metallicgold;
text-decoration: underline; 
}

#breadcrumb a:after {
content: '';
display: inline-block;
background-image: url('/site/templates/styles/images/navarrowright.svg');
background-repeat: no-repeat;
background-position: center;
position: relative;
width: 1.6em;
height: .5em;
}

#breadcrumb img {
width: 1.1em;
display: inline;
}

@media screen and (max-width: 600px) {
#breadcrumb {
padding: 1.5em 1em 1em 2em;
margin-top: 0;
}
}


/*** buttons ***/

.button {
background: @neutral;
border: 0;
font-weight: 700;
color: @metallicgold;
font-size: 16px;
padding: 13px 30px 13px 30px;
}

.button:hover {
background: @metallicgold;
color: @white !important;
border-bottom: 0 !important;
}

.button:active {
background: @purple;
}


button.uw-btn {
cursor: pointer;
border: 0;
}

a.uw-btn, button.uw-btn, .orientation-sidebar a {
padding: 10px 26px 10px 20px;
text-transform: uppercase;
background-color: @neutral;
color: @darkgrey;
display: inline-block;
position: relative;
line-height: 24px;
text-decoration: none;
font-weight: normal;
font-size: 14px;
font-family: @nav;
margin-bottom: 1em;
}

a.uw-btn:hover, button.uw-btn:hover, .orientation-sidebar a:hover {
border: 0;
}

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

a.uw-btn:hover::before, button.uw-btn:hover::before, .orientation-sidebar a:hover::before {
background-color: lighten(@purple,10%);
}

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

a.uw-btn-p:before {
background-color: @purple;
}

a.uw-btn.uw-btn-emphasis, #remote-agenda a.uw-btn.uw-btn-emphasis {
background: @gold;
color: @white;
font-size: 16px;
margin: .4em 0 0 0;
}

a.uw-btn.reverse:before {
background-color: @gold;
}

a.uw-btn.reverse:hover::before {
background-color: @metallicgold;
}


/** scrolly tables **/


table.scrolly {
display: block;
max-width: -moz-fit-content;
max-width: fit-content;
margin: 1.6em auto 1.6em auto;
overflow-x: auto;
border: 1px solid @grey;
}

table.scrolly tbody tr:nth-child(even) {
background: @white;
}

table.scrolly p, table.scrolly li {
line-height: 22px;
font-size: 16px;
}

.body table.scrolly ul.disc li, .body ol li {
margin: 0 0 0 0;
}


table.scrolly ul {
padding: 0 0 0 1.1em;
}

table.scrolly li p {
margin: 0;
padding: 0;
}

@media screen and (max-width: 600px) {
#pagebody table.scrolly td {
display: table-cell;
width: 50px;
}
}


/** inline tables **/

.nowrap {
white-space: nowrap;
}

table.plain-table {
margin-top: 2em;
}

table.plain-table tbody tr:nth-child(even) {
background: @white;
}

table.plain-table p, table.plain-table li {
font-size: 16px;
}

#pagebody table.plain-table td {
padding: 1em;
}

table.plain-table h3 {
margin-top: .6em;
}

/** accordions **/

#accordionholder {
margin-top: 3em;
margin-bottom: 4em;
width: 95%;
}

#accordionholder.full-width-accordions {
width: 100%;
}

ul.accordion {
margin-top: 27px;
margin-bottom: 27px;  
}

.title h5 {
font-family: @nav;
font-size: 18px;
line-height: 22px;
padding: 0 14px 0 0;
}

ul.accordion > li.active {
border-top: 1px solid @grey;
}

ul.accordion  li div.title {
background: lighten(@grey,15%);
}

ul.accordion  li div.title:hover {
background: lighten(@grey,10%);
}

ul.accordion > li.active .title {
background: lighten(@grey,10%);
}



/* Online Resources and Videos */

#videoarchivegrid {
display: grid;
grid-template-columns: 1fr 1fr;
grid-column-gap: 1em;
grid-row-gap: .6em;
margin-top: 2em;
margin-bottom: 3.4em;
}

#videoarchivegrid h2 {
margin: 0 0 .6em 0;
}

#videoarchivegrid li span {
color: darken(@grey,30%);
}

#videoarchivegrid .material-icons {
color: @grey;
font-size: 2em;
position: relative;
top: .2em;
margin-right: .2em;
}

@media screen and (max-width: 900px) {
#videoarchivegrid {
display: block;
}
#videoarchivegrid > div {
margin-bottom: 3em;
}
}

/* FYP in the News */

#newsgrid {
display: grid;
grid-template-columns: auto 1fr;
grid-row-gap: 3.6em;
grid-column-gap: 2em;
padding: 1.2em 0 5em 0;
}

#newsgrid div:nth-of-type(even) {
align-self: center;
margin-bottom: 3em;
}

@media screen and (max-width: 1030px) {
#newsgrid {
display: block;
}
#newsgrid h4 {
margin-bottom: 0;
}
}

#newsgrid img {
width: 100%;
box-shadow: 0 1px 3px rgba(34,25,25,.4);
}

#newsgrid h3 {
font-size: 1.7em;
}

#newsgrid h3 a {
text-decoration: none;
}

/* accordions (newer) */

.dropdown-header, .hkodropdowns {
margin: 0;
cursor: pointer;
padding: 1em 2.4em 1em 1em;
background: lighten(@grey,10%);
margin-bottom: 1em;
transition:  .1s;
-moz-transition:  .1s;
-webkit-transition:  .1s;
-o-transition:  .1s;
font-family: @nav;
font-size: 1.3em;
color: @purple;
position: relative;
}

.hkodropdowns summary {
margin: 0;
cursor: pointer;
padding: .6em;
background: lighten(@grey,10%);
transition:  .1s;
-moz-transition:  .1s;
-webkit-transition:  .1s;
-o-transition:  .1s;
font-family: @nav;
font-size: 1em;
color: @purple;
position: relative;
}

.dropdown-header:active {
background: @grey;
}

.dropdown-header:hover {
box-shadow: 0.12857em 0.12857em 0.12857em @grey;
}

.accordion-closed {
display: none;
}

.tab_content blockquote {
border-left: 0;
}

.dropdown-header .material-icons {
font-size: 1.4em;
transition:  .3s;
-moz-transition:  .3s;
-webkit-transition:  .3s;
-o-transition:  .3s;
transform: rotate(0deg);
position: absolute;
right: .5em;
top: 20%;
}

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

.dropdownsection blockquote {
padding: 0 1em .5em 1em;
margin: 0 0 .8em 0;
border-left: 0;
}

.dropdownsection blockquote p, blockquote ul {
/* margin-top: 0; */
color: @textcolor;
}

.accordion-panel {
padding: 0 1em .5em 1em;
}


/ utilities ***/
.displaynone {
display: none;
}

.boxshadow {
-moz-box-shadow: 10px 10px 5px #888;
-webkit-box-shadow: 10px 10px 5px #888;
box-shadow: 10px 10px 5px #888;
}

.delayedenter {
filter: alpha(opacity=0);
opacity: 0;
}

.smallertext {
font-size: 14px;
}

.grey {
color: @grey;
}

.gold {
color: @metallicgold;
}



/ orientation  ***/


#orient-home-grid {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-column-gap: 2.2em;
grid-row-gap: 1.6em;
margin: 1em 0 2em 0;
}

#orient-home-grid.leadershipopps {
grid-template-columns: 1fr 1fr 1fr;
}

@media screen and (max-width: 1010px) {
#orient-home-grid, #orient-home-grid.leadershipopps {
grid-template-columns: 1fr 1fr;
}
}

@media screen and (max-width: 600px) {
#orient-home-grid, #orient-home-grid.leadershipopps {
grid-template-columns: 1fr;
}
}

#orient-home-grid div {
text-align: center;
background: @neutral;
padding: 0 0 2em 0;
}

@media screen and (max-width: 1060px) {
#orient-home-grid .uw-btn-inline {
background-size: 3%, 100%;
}
}

#orient-home-grid div img {
width: 100%;
margin-bottom: 2em;
}

#orient-tips {
background: @purple;
color: @white;
transform: skew(-15deg); 
display: grid;
grid-template-columns: 2fr 1fr;
margin: 0 0 5.5em 1em;
width: 95%;
}

#orient-tips div:nth-of-type(2) {
transform: skew(15deg);
margin: 2em 1em 2em 3.6em;
order: 1;
}

#orient-tips div:nth-of-type(1) {
transform: skew(15deg); 
clip-path: polygon(15% 0, 100% 0, 100% 100%, 0% 100%);
position: relative;
right: -2.5em;
width: 100%;
order: 2;
}

#orient-tips p {
color: @white;
}

@media screen and (max-width: 1375px) {
#orient-tips {
transform: skew(-15deg) scale(0.9);
}
}

@media screen and (max-width: 970px) {
#orient-tips {
transform: skew(0deg);
margin: 0 0 3em 0;
grid-template-columns: 1fr 1fr;
display: block;
width: 100%;
}
#orient-tips div:nth-of-type(1), #orient-tips div:nth-of-type(2) {
transform: skew(0deg);
}
#orient-tips div:nth-of-type(1) {
right: 0;
height: 20em;
clip-path: none;
}
#orient-tips div:nth-of-type(2) {
margin: 1em .5em 1em 1.8em;
padding: .4em .6em 1.6em 0;
}
}

#orient-tips div {
color: @white;
font-family: @featurebold;
font-size: 1.1em;
}

#orient-tips p {
margin-top: .1em;
line-height: 1.5em;
font-family: @feature;
font-size: 1.3em;
}

h2.orient-home-subhead {
font-family: @featurebold;
color: @purple;
font-size: 1.8em;
margin: 2.2em 0 .8em 0;
}

h2.orient-home-subhead:first-of-type {
margin: 1.4em 0 .8em 0;
}

.orientationintro {
margin: 1.9em 0 0 0;
}

#basic-page-grid {
display: grid;
grid-template-columns: 3fr 1.3fr;
grid-column-gap: 3.8em;
width: 1180px;
margin-left: auto;
margin-right: auto;
}

#basic-page-grid-flipped {
display: grid;
grid-template-columns: 1.3fr 3fr;
grid-column-gap: 3.8em;
width: 1180px;
margin: auto;
}

.default-page-width, #pagefootgrid {
width: 1180px;
margin: auto;
}

@media screen and (max-width: 1300px) {
.default-page-width, #pagefootgrid, #basic-page-grid, #basic-page-grid-flipped {
width: 90%;
}
}

@media screen and (max-width: 880px) {
#basic-page-grid {
display: block;
}
}

#orient-icon-grid {
display: grid;
grid-template-columns: repeat(auto-fill,minmax(12em, 1fr));
grid-column-gap: 3em;
grid-row-gap: 2em;
margin: 3em 0 0 0;
border-top: 1px solid @grey;
}

#orient-icon-grid > div {
width: 100%;
padding-bottom: 100%;
position: relative;
}

#orient-icon-grid div div {
position: absolute;
width: 100%;
text-align: center;
top: 48%;
transform: translateY(-48%);
}

#orient-icon-grid div i {
font-size: 5.6em;
display: inline-block;
margin-bottom: .2em;
}

#orient-icon-grid div div a:first-of-type {
color: @purple;
}

a.uw-btn-inline {
font-family: @nav;
text-decoration: none;
background-image: url(/site/templates/styles/images/uwbtnarrow.svg),linear-gradient(90deg, @purple 78%, @purple 78%, darken(@purple,10%) 78%, darken(@purple,15%) 81%, darken(@purple,10%) 81%, darken(@purple,10%) 82%);
background-repeat: no-repeat, no-repeat;
background-size: 5%, 100%;
background-position: 92% 50%;
color: @white;
font-size: 1em;
text-transform: uppercase;
display: inline-block;
line-height: 1.2em;
padding: .7em 1.2em .7em 1.2em;
width: 87%;
margin: auto;
}

a.uw-btn-inline:active {
color: @white;
}

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

a.uw-btn-inline span {
display: inline-block;
position: relative;
left: -1.2em;
}

@media screen and (max-width: 580px) {
#orient-icon-grid {
grid-template-columns: repeat(auto-fill,minmax(12em, 1fr));
}
#orient-icon-grid a.uw-btn-inline {
width: 100%;
}
}

#orient-home-grid a.uw-btn-inline span, #orient-icon-grid a.uw-btn-inline span {
height: 2.5em;
display: table-cell;
vertical-align: middle;
width: 100vw;
padding: 0 1em 0 1em;
}

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

.sidebar #orient-nav-tree {
margin-top: -13.2em;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

#orient-nav-tree > ul > li > a {
color: @white;
font-weight: bold;
background-color: @purple;
background-image: url(/site/templates/styles/images/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: .7em 0 .7em 1em;
}

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

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

.orient-sidebarelem .uw-btn {
margin-bottom: 0;
}

.orient-international, .orient-external-office {
background: @neutral;
padding: 1.4em 1.4em 1.4em 1em;
margin: 1em 1em 1em 0;
width: 47%;
display: inline-block;
vertical-align: top;
}

.orient-international {
width: 100%;
}

@media screen and (max-width: 700px) {
.orient-international, .orient-external-office {
width: 100%;
}
}

.orient-international::before, .orient-external-office::before {
font-family: 'Material Icons';
-webkit-font-feature-settings: 'liga';
font-size: 2.6em;
color: @gold;
float: left;
margin: -.1em .4em 2em 0;
}

.orient-international::before {
margin: -.1em .4em 1em 0;
}

.orient-international::before {
content: "language";
}

.orient-external-office::before {
content: "beenhere";
}

ul.disc.orient-agenda {
padding: 1em 3em 2em 2em;
margin-left: 0;
margin-top: 1em;
margin-right: 1em;
margin-bottom: 1em;
background: lighten(@grey,15%);
}

.orient-agenda > li {
font-family: @nav;
margin-top: .9em;
line-height: 1.5em;
}

.orient-agenda li ul.disc {
list-style: none;
}

.orient-agenda strong {
font-family: @nav;  
}

@media screen and (max-width: 780px) {
ul.disc.orient-agenda {
padding: .5em 1em 2em 1em;
margin: 0;
}
}

#orient-dates {
margin: 1em 0 0 0;
}

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

#orient-dates ol {
margin-left: 0;
}

#orient-dates .filters {
margin: 2em 0 .7em 0;
padding: 0;
}

#orient-dates .filters * {
display: inline-block;
}
 
#orient-dates .filters label {
padding: .5em 1em .5em 1em;
margin-right: .8em;
margin-bottom: .6em;
border-radius: 2em;
background: lighten(@grey,10%);
cursor: pointer;
min-width: 5em;
transition: all 0.1s;
text-align: center;
font-size: .95em;
}
 
#orient-dates .filters label:hover, #orient-dates .filters label.orient-date-selected {
background: @purple;
color: @white;
}

#orient-dates .posts {
display: flex;
flex-wrap: wrap;
list-style-type: none;
}

#orient-dates .posts .post {
margin: .2em;
padding: .4em;
font-size: 1.8em;
font-family: @nav;
background: @neutral;
transition: all 0.3s;
width: 4em;
text-align: center;
}

.orient-dates-legend div {
display: inline-block;
font-family: @body;
margin-bottom: 1em;
color: @textcolor;
}

.orient-dates-legend div:nth-of-type(1)::after {
content: "";
display: inline-block;
width: .5em;
height: 1em;
}

.orient-dates-legend div:nth-of-type(2)::before, .orient-dates-legend div:nth-of-type(3)::before {
content: "";
display: inline-block;
width: 1em;
height: 1em;
margin-right: .4em;
}

.orient-dates-legend div:nth-of-type(2), .orient-dates-legend div:nth-of-type(3) {
margin-right: .6em;
font-style: oblique;
}

.orient-dates-legend div:nth-of-type(3):before {
background: @neutral;
}

.orient-dates-legend div:nth-of-type(2):before {
background: @white;
border: 1px solid darken(@neutral,15%);
}

#orient-dates .posts .post.online {
background: @white;
border: 1px solid darken(@neutral,15%);
}

@media screen and (max-width: 980px) {
#orient-dates .posts .post {
font-size: 1.4em;
display: inline-block;
}
#orient-dates .posts {
display: block;
}
}

.initialpostclass {
opacity: .1 !important;
}

[value="All"]:checked ~ .posts [data-category] {
opacity: 1;
}
[value="group27666"]:checked ~ .posts .post:not([data-category~="group27666"]),
[value="group27665"]:checked ~ .posts .post:not([data-category~="group27665"]),
[value="group26183"]:checked ~ .posts .post:not([data-category~="group26183"]),
[value="group26184"]:checked ~ .posts .post:not([data-category~="group26184"]),
[value="group26186"]:checked ~ .posts .post:not([data-category~="group26186"]),
[value="group20021"]:checked ~ .posts .post:not([data-category~="group20021"]),
[value="group17284"]:checked ~ .posts .post:not([data-category~="group17284"]),
[value="group18309"]:checked ~ .posts .post:not([data-category~="group18309"]),
[value="group19829"]:checked ~ .posts .post:not([data-category~="group19829"]),
[value="group18314"]:checked ~ .posts .post:not([data-category~="group18314"]),
[value="group18304"]:checked ~ .posts .post:not([data-category~="group18304"]),
[value="group18305"]:checked ~ .posts .post:not([data-category~="group18305"]),
[value="group13007"]:checked ~ .posts .post:not([data-category~="group13007"]),
[value="group13006"]:checked ~ .posts .post:not([data-category~="group13006"]),
[value="group12926"]:checked ~ .posts .post:not([data-category~="group12926"]),
[value="group12925"]:checked ~ .posts .post:not([data-category~="group12925"]),
[value="group12694"]:checked ~ .posts .post:not([data-category~="group12694"]),
[value="group12533"]:checked ~ .posts .post:not([data-category~="group12533"]),
[value="group12534"]:checked ~ .posts .post:not([data-category~="group12534"]),
[value="group12535"]:checked ~ .posts .post:not([data-category~="group12535"]),
[value="group12501"]:checked ~ .posts .post:not([data-category~="group12501"]),
[value="group12502"]:checked ~ .posts .post:not([data-category~="group12502"]),
[value="group12511"]:checked ~ .posts .post:not([data-category~="group12511"]),
[value="group12281"]:checked ~ .posts .post:not([data-category~="group12281"]),
[value="group12283"]:checked ~ .posts .post:not([data-category~="group12283"]),
[value="group12279"]:checked ~ .posts .post:not([data-category~="group12279"]),
[value="group12280"]:checked ~ .posts .post:not([data-category~="group12280"]),
[value="group12282"]:checked ~ .posts .post:not([data-category~="group12282"]),
[value="group12414"]:checked ~ .posts .post:not([data-category~="group12414"]) {
opacity: .1;
}

.orient-dates-descriptions {
margin-top: 4em;
}

.orient-dates-descriptions h3 {
margin-top: 1.3em;
margin-bottom: 0;
padding: 0;
font-size: 1.3em;
}

.orient-dates-descriptions p {
margin-top: .2em;
}

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

.orient-sidebarelem p img {
margin-top: .3em;
width: 60%;
position: relative;
top: .3em;
}

@media screen and (max-width: 580px) {
.orient-sidebarelem {
margin: 1.3em 1.3em 1em 1.3em;
}
}

.orient-sidebarelem h2 {
text-transform: uppercase;
font-size: 1.5em;
font-family: @display;
margin-top: 0;
}

.orient-sidebarelem h2::after {
content: "";
display: block;
height: 8px;
width: 120px;
margin-top: 10px;
margin-bottom: 20px;
background: @gold;
-webkit-clip-path: polygon(0 0, 100% 0, 98% 100%, 0% 100%);
clip-path: polygon(0 0, 100% 0, 98% 100%, 0% 100%);
}

#downloadables {
display: grid;
grid-template-columns: 1fr 3.3fr;
grid-row-gap: 3em;
grid-column-gap: 2.2em;
margin: 2.6em 0 3em 0;
}

#downloadables div:nth-of-type(odd) img {
width: 100%;
}

#downloadables h2 {
margin-top: 0;
}

@media screen and (max-width: 580px) {
#downloadables {
display: block;
}
#downloadables div:nth-of-type(odd) img {
width: 50%;
margin: 0 0 1em 0;
}
#downloadables div:nth-of-type(even) {
margin: 0 0 3em 0;
}
}

/** remote agendas ****/


/** revised 2024 ****/

#nametag b, #nametag h1, #nametag h1+div {
font-family: @roboto;
}

#nametag h1 {
font-weight: 800;
}

.introcondensed p:first-of-type {
font-family: @roboto;
font-size: 1.2em;
line-height: 1.5em;
}

.introcondensed p {
font-size: 1em;
line-height: 1.4em;
}

.introcondensed li {
font-size: 1em;
line-height: 24px;
}

.agenda-universal h2, .pt3-agenda h2 {
font-family: @roboto;
font-weight: 800;
margin: 1em 0 .6em 0;
}

.agenda-table-universal {
font-family: @body;
}

.agenda-table-universal .agenda-item {
display: grid;
grid-template-columns: 1.4fr 5fr 3fr;
padding: .8em 0 1em 0;
}

.agenda-table-universal .agenda-item div:nth-of-type(1) {
order: 1;
}

.agenda-table-universal .agenda-item div:nth-of-type(2) {
order: 3;
}

.agenda-table-universal .agenda-item div:nth-of-type(3) {
order: 2;
}

.agenda-table-universal .agenda-item:nth-of-type(odd) {
background: darken(@neutral,5%);
}

.agenda-table-universal .agenda-item:nth-of-type(even) {
background: lighten(@neutral,5%);
}

.agenda-table-universal .agenda-item > div:first-of-type {
font-family: @roboto;
font-weight: 500;
text-align: right;
padding-right: 1.6em;
padding-top: .2em;
}


.agenda-table-universal.agenda-nolocation .agenda-item {
grid-template-columns: 1.4fr 5fr 1fr;
}

.agenda-item h4, .pt3-agenda h4 {
font-family: @roboto;
font-weight: 500;
font-size: 1.14em;
margin: 0;
padding: 0;
}

.agenda-item h4 a, .pt3-agenda h4 a {
text-decoration: none;
}

.agenda-table-universal .agenda-item h5 {
font-family: @roboto;
font-weight: 800;
font-size: 1em;
margin: .6em 0 0 0;
padding: 0;
}

.agenda-item img {
width: 1.2em;
position: relative;
top: .2em;
right: -.3em;
}

.agenda-universal #accordionholder {
margin: 0;
}

.agenda-universal .dropdownsection {
margin: 0;
}

.agenda-table-universal p, .agenda-table p {
margin-top: .6em;
margin-bottom: .6em;
font-size: 1em;
line-height: 22px;
padding-left: 0 !important;
}

.agenda-table-universal li, .agenda-table li {
font-size: 1em;
line-height: 22px;
}

.agenda-table-universal ul {
padding-left: .6em;
margin: 5px 0 0 5px;
}

.agenda-table-universal details {
cursor: pointer;
margin: .6em 0 0 0;
border-radius: .3em;
}

.agenda-table-universal summary {
font-family: @roboto;
font-weight: 400 !important;
font-size: 1em !important;
padding: 0;
border-radius: .3em;
}

.agenda-table-universal summary:hover {
background: darken(@neutral,10%);
}

.agenda-table-universal summary:active {
background: darken(@neutral,15%);
}

.agenda-table-universal details > div {
text-align: left;
padding: 0 1em .6em 1em;
}

.agenda-table-universal details p:first-of-type {
margin-top: .6em;
}

.agenda-table-universal .agenda-location .material-icons {
color: @purple;
position: relative;
top: .1em;
}

@media screen and (max-width: 780px) {
.agenda-table-universal .agenda-item {
display: block;
padding: 1em;
}
.agenda-table-universal .agenda-item > div:first-of-type {
text-align: left;
}
.agenda-location blockquote {
padding: 0;
margin: 0;
}
.agenda-item details {
margin: .6em 0 .6em 0;
}
.agenda-item h4, .pt3-agenda h4 {
margin: .6em 0 0 0;
}
}

#aftereverything.smallerheaders h3 {
font-size: 17px;
}

.agenda-item table {
border-collapse: collapse;
margin-top: 1em;
}

.agenda-item table th {
background: @purple;
color: @white;
font-weight: normal;
}

/** previous ****/

.agenda-table {
display: table;
font-family: @body;
width: 100%;
}

.agenda-table .table-row {
display: table-row;
}

.agenda-table .table-row:nth-of-type(odd) {
background: @neutral;
}

.agenda-table .table-row:nth-of-type(even) {
background: lighten(@neutral,5%);
}

.agenda-table .table-row div {
display: table-cell;
padding: .9em;
font-size: 1em;
color: @textcolor;
}

.agenda-table .table-row div:nth-of-type(1) {
width: 10%;
}

.agenda-table .table-row div:nth-of-type(2) {
width: 65%;
}

.agenda-table .table-row div:nth-of-type(3) {
width: 25%;
}

.agenda-table .table-row div:first-of-type {
white-space: nowrap;
text-align: right;
font-family: @nav;
}

.agenda-table h4 {
margin: 0 0 .3em 0;
font-size: 1.1em;
}

.agenda-table p {
margin: .6em 0 .6em 0;
font-size: 16px !important;
}

.agenda-table li {
font-size: 16px !important;
}

.agenda-table .material-icons {
color: @purple;
position: relative;
top: .2em;
}

.agenda-location p {
display: inline;
}

.agenda-location blockquote p {
margin-top: .4em;
}

.agenda-item .agenda-location {
color: @purple;
font-style: oblique;
padding: 1em 2em 0 2em;
}

@media screen and (max-width: 780px) {
.agenda-table {
display: block;
}
.agenda-table .table-row {
display: block;
}
.agenda-table .table-row div {
display: block;
padding: .5em 0 0 0.5em;
}
.agenda-table .table-row div:first-of-type {
text-align: left;
}
.agenda-table .table-row div.agenda-location {
padding: 0 0 0 0;
}
.agenda-table .table-row div:nth-of-type(1) {
width: 100%;
}
.agenda-table .table-row div:nth-of-type(2) {
width: 95%;
}
.agenda-table .table-row div:nth-of-type(3) {
width: 100%;
}
.agenda-item .agenda-location {
padding: .3em 0 0 0;
}
}

.agenda-camera-icon {
width: 30px;
position: relative;
top: .4em;
right: -.3em;
}

#nametaggrid {
display: grid;
grid-template-columns: 2fr 1.4fr;
grid-column-gap: 2em;
}

#nametag {
background: @neutral;
padding: 1.2em 1.6em 1.2em 1.6em;
margin: 3em 0 3em 0;
font-family: @body;
border-radius: .8em;
color: @purple;
line-height: 1.4em;
border: 12px solid @gold;
}

#nametag p {
line-height: 1.3em;
font-size: 1em;
}

@media screen and (max-width: 780px) {
#nametag {
margin: 2.4em 0 1.2em 0;
float: none;
max-width: 100%;
}
}

#nametag h1 {
font-size: 1.6em;
margin: 0 0 .3em 0;
padding: 0;
color: @metallicgold;
text-align: center;
}

#nametag div:first-of-type {
margin-bottom: 1em;
font-size: 1.3em;
text-align: center;
}

#nametag div {
margin-bottom: .8em;
}

#nametag li {
margin-left: 1em; 
color: #4b2e83; 
font-size: 1em;
}

#remote-agenda .dropdownsection {
margin: 0;
}

#agenda-banner {
background-image: url(/site/templates/styles/images/orientation2020winter.jpg);
background-repeat: no-repeat;
background-size: cover;
box-shadow: 0px 15px 13px -7px rgba(0,0,0,0.34);
}

.remote-agenda-pagetop h1 {
margin: 1.1em 0 0 0;
font-size: 2.3em;
line-height: 1.36em;
font-family: @nav;
}


@media screen and (max-width: 940px) {
#nametaggrid {
display: block;
}
#nametag {
max-width: 100%;
}
}

.agenda-table {
border: 1px solid @gold;
margin-top: 1em;
}

.remote-agenda-pagetop.parent-pagetop h1 {
margin: 0;
background: @white;
padding: .6em .8em 0 .8em;
position: relative;
top: -.4em;
left: -.8em;
display: inline-block;
}

@media screen and (max-width: 750px) {

.agenda-camera-icon {
width: 30px;
position: relative;
float: right;
}

.agenda-table .table-row p:last-of-type {
padding-bottom: .6em;
}

.remote-agenda-pagetop.parent-pagetop h1 {
top: 0;
padding: .6em 1em .4em .8em;
}
}

.remote-agenda-pagetop h2 {
margin: .4em 0 .4em 0;
}

.remote-agenda-pagetop.parent-pagetop h2 {
font-size: 2em;
margin: 0 0 .4em 0;
}

.remote-agenda-pagetop.parent-pagetop h3 {
font-size: 1.4em;
margin-bottom: 1em;
margin-top: 0;
}

.remote-agenda-pagetop h3 {
margin: 0 0 .3em 0;
color: @purple;
font-size: 1.2em;
font-weight: 600;
}

#remote-agenda {
clear: both;
margin-top: 1em;
margin-bottom: 4em;
}

#remote-agenda > h3 {
margin: 0 0 .8em 0;
}

#remote-agenda #accordionholder {
margin-top: .6em;
margin-bottom: .6em;
}

#remote-agenda .dropdown-header span, .dawgdazeevent .dropdown-header span {
display: inline-block;
margin-left: .5em;
font-family: @body;
color: @textcolor;
font-weight: normal;
font-size: .8em;
font-style: oblique;
}

#remote-agenda #after_everything {
margin: 0 0 3.8em 0;
}

.remote-agenda-pagetop #pagebody > p:first-of-type {
line-height: 1.5em;
font-size: 1.6em;
margin-bottom: 1em;
margin-top: 1em;
}

@media screen and (max-width: 780px) {
.remote-agenda-pagetop #pagebody > p:first-of-type {
margin-top: .5em;
}
#remote-agenda .dropdown-header span {
display: block;
margin-left: 0;
margin-top: .3em;
}
}

#remote-agenda a.uw-btn {
background-color: @white;
margin-right: 3.4em;
}

#wayfinding {
font-family: @body;
column-count: 3;
}

@media screen and (max-width: 800px) {
#wayfinding {
font-family: @body;
column-count: 2;
}
}

#wayfinding div {
background: lighten(@grey,15%);
padding: .4em;
margin: 0 0 .4em 0;
color: @textcolor;
break-inside: avoid;
}

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

@media screen and (max-width: 550px) {
#remote-agenda .dropdown-header span {
margin-left: 0;
}
}

.parent-table {
margin-top: .2em;
margin-bottom: 3em;
padding: 0;
}

.parent-table ul li ul {
margin-bottom: .4em;
}

#parent-pagebanner {
position: relative;
overflow: hidden;
}

.pseudo-background-img img {
width: 100%;
border-top: 10px solid lighten(@grey,10%);
}

#parent-videos {
display: grid;
grid-template-columns: 2fr auto 2fr auto;
grid-row-gap: .5em;
padding: .5em 0 1em 0;
}

#parent-videos a {
font-family: @body;
text-decoration: none;
background: lighten(@grey,15%);
display: inline-block;
padding: 1em;
font-style: oblique;
margin: 0 1em 0 0;
min-height: 3.8em;
}

#parent-videos a:hover {
color: @gold;
}

#parent-videos h4 {
margin: 0;
padding: 1em;
font-size: 1.1em;
font-family: @featurebold;
background: lighten(@grey,15%);
}

#parent-videos span {
color: @purple;
position: relative;
top: .25em;
}

@media screen and (max-width: 800px) {
#parent-videos {
grid-template-columns: 1fr auto;
}
#parent-videos h4 {
font-size: 1em;
}
#parent-videos a {
margin: 0;
}
}

#postsessionmessage p {
font-weight: bold;
}

/ new post-Virtual Name Tag ***/


#agendaintro > p:first-of-type {
font-family: @feature;
font-size: 22px;
line-height: 34px;
}

#agendaintro div:nth-of-type(1) {
color: @purple;
font-family: @buttontext;
font-size: 26px;
margin: .4em 0 0 0;
}

#agendaintro div:nth-of-type(2) {
color: @purple;
font-family: @feature;
font-size: 22px;
margin: .4em 0 .4em 0;
}

#agendaintro div:nth-of-type(3) {
color: @purple;
font-family: @feature;
font-size: 22px;
}

#agendaintro li {
margin: 0;
padding: 0;
}

.agenda-universal details summary {
cursor: pointer;
font-family: @roboto;
color: @purple;
font-size: 1.1em;
font-weight: 500;
padding: .6em;
}

.agenda-universal details summary:hover {
background: darken(@neutral, 20%);
}

.agenda-universal details summary:active {
background: @purple;
color: @white;
}

#zoomicons {
background: @neutral;
width: 30%;
float: right;
padding: 1em;
margin: 1em;
}

@media screen and (max-width: 900px) {
#zoomicons {
width: 100%;
float: none;
margin: 1em 1em 1em 0;
}
}

.location_header {
text-transform: uppercase;
display: block;
font-weight: bold;
color: darken(@grey,20%);
font-size: 14px;
margin-bottom: .1em;
}

@media screen and (max-width: 780px) {
.location_header {
display: none;
}
}


/* course filter */

#coursefiltergrid {
display: grid;
grid-template-columns: 16em auto;
grid-column-gap: .5em;
margin: 2em 0 3em 0;
}

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

.coursefilterlist li span {
cursor: pointer;
}

#coursefilterfacets, #coursefilter_sort_search {
background: @neutral;
position: sticky;
top: 0;
padding: 1em;
margin: 0 0 .5em 0;
z-index: 1;
}

@media only screen and (max-width: 980px) {
#coursefilterfacets {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-column-gap: 1em;
}
#coursefilter_sort_search {
position: relative;
}
}

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

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

#coursefilterfacets h3 {
margin: 1em 0 .3em 0;
font-size: 1em;
color: @purple;
}

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

#coursefiltergrid table td.courselist_offered_column, #coursefiltergrid table td.courselist_category_column {
font-size: .8em;
}

@media only screen and (max-width: 980px) {
#coursefilterfacets h3 {
margin: 0 0 .6em 0;
}
.courselist_category_column, .courselist_offered_column {
display: none;
}
}

.coursefilterlist li {
margin: 0;
font-size: .9em;
}

#coursefiltergrid table tr {
background: #eeeeee;
}

#item_list .material-icons {
color: @purple;
font-size: 1.2em;
position: relative;
top: .2em;
left: .2em;
}

@media only screen and (max-width: 980px) {
#item_list .material-icons {
display: none;
}
}

.courselist-tooltip {
text-decoration: none;
color: @textcolor;
}

#coursefiltergrid table {
width: 100%;
font-family: @body;
color: @textcolor;
-webkit-font-smoothing: antialiased;
}

#coursefiltergrid table td {
font-size: .9em;
padding: .4em;
color: black;
}

.coursetitle a {
text-decoration: none;
font-size: .9em;
}

a.courselist-tooltip {
position: relative;
}

a.courselist-tooltip:hover {
color: black;
}

a.courselist-tooltip:hover::after {
content: attr(data-tooltip) ;
position: absolute;
top: 1.1em;
left: 1em;
min-width: 10em;
padding: .6em;
background: #eeeeee;
z-index: 2;
border: 1px solid grey;
font-size: .9em;
}

@media only screen and (max-width: 980px) {
a.courselist-tooltip::after {
content: ": " attr(data-tooltip);
}
a.courselist-tooltip {
pointer-events: none;
color: black;
font-style: oblique;
}
.coursetitle span {
font-weight: 600;
}
#coursefilter_sort_search {
grid-template-columns: 1fr;
grid-row-gap: .7em;
}
}

#item_list th {
font-family: @nav;
color: @white;
font-weight: normal;
background: @purple;
}

@media only screen and (max-width: 980px) {
#item_list th {
display: none;
}
}

/*** Husky Guide ***/

#huskyguideembed {
height: 66em;
border: 1em solid rgba(0,0,0,.1);
}

#huskyguide {
margin-bottom: 4em;
}

@media screen and (max-width: 550px) {
#huskyguideembed {
height: 41em;
}
}

#huskyguidenav {
font-family: @body;
font-size: 1em;
margin-top: 1.6em;
background: lighten(@grey,10%);
padding: 1em;
display: inline-block;
}

#huskyguide_skiptonav, #huskyguidetopofpage {
font-family: @body;
font-size: 1em;
background: lighten(@grey,10%);
padding: 1em;
display: inline-block;
}

#huskyguide_skiptonav {
margin: 1em 0 1em 0;
}

#huskyguidetopofpage {
margin-top: 1em;
}

#huskyguidenav a {
margin-right: 1em;
}

#hgtable {
border: 0;
margin: 1em 0 0 0;
}

#hgtable tr {
vertical-align: top;
}

#hgtable img {
margin: 1em 0 0 0;
}

#pagebody table#hgtable td {
border: 0;
padding: 0;
}

#hgtable tr td:nth-of-type(2) {
width: 1.6em;
}

#pagebody figure.align_left {
margin: 0; 
}

#pagebody figure.align_left img {
margin: 1.8em 0 1em 0;
}

#hgtable h4 {
margin: 0;
padding: 0;
}

/*** end NEW ***/


.tabs_wrapper {
text-align: center;
margin: 0 auto;
background: transparent;
width: 100%;
}

ul.smarttabs {
display: inline-block;
vertical-align: top;
position: relative;
z-index: 20;
margin: 0;
padding: 0;
left: 1px;
width: 28%;
min-width: 175px;
list-style: none;
}

ul.smarttabs li {
margin: 0;
cursor: pointer;
padding: 1.2em 1em 1.2em 1em;
text-align: left;
color: @black;
font-size: 15px;
line-height: 20px;
background: lighten(@grey,8%);
border-left: 1px solid @grey;
}

ul.smarttabs li:first-child {
border-top: 1px solid @grey;
}

ul.smarttabs li {
border-bottom: 1px solid @grey;
}

ul.smarttabs li:hover {
background: lighten(@grey,15%);
}

ul.smarttabs li.active {
background: @white;
}

ul.smarttabs li span, .tab_drawer_heading span {
color: darken(@grey,25%);
}

.tab_container {
display: inline-block;
vertical-align: top;
position: relative;
z-index: 10;
left: 0;
width: 72%;
min-width: 10px;
text-align: left;
border: 1px solid @grey;
padding: 1.6em 2.6em 2.6em 2.6em;
}

.tab_content {
height: 100%;
display: none;
}

.tab_drawer_heading {
display: none;
}

.tab_content ul {
padding: 0 0 0 2em;
}

.tab_content h4 {
margin-top: 0;
padding-top: 0;
font-family: @nav;
}

.tab_content table {
width: 100%;
}

#pagebody table.minimaltable td  {
padding: .4em;
}

#pagebody table.minimaltable tr:nth-of-type(odd)  {
background: lighten(@grey,12%);
}

.minimaltable th {
background: lighten(@grey,6%);
text-align: center;
}

.minimaltable {
border: 0;
width: 100%;
border-collapse: collapse; 
border-spacing: 0;
font-family: @body;
}

.minimaltable p {
margin: 0;
padding: 0;
font-size: 1em;
}

@media screen and (max-width: 600px) {
#pagebody table.minimaltable td {
display: table-cell;
}
}

#orientgrid {
display: grid;
grid-template-columns: 75% 25%;
grid-column-gap: 2em;
margin-bottom: 3em;
}

.vimeovideowrapper {
min-height: 20em;
margin: 2.4em 0 1em 0 !important;
position: relative;
}

.vimeovideowrapper iframe {
position: absolute;
width: 100%;
height: 100%;
}

.orientation-sidebar .uw-btn {
background-color: @neutral !important;
}

.orientation-sidebar-title {
font-family: @display;
color: @purple;
text-transform: capitalize;
line-height: 1.4em; 
font-size: 1.4em;
margin-bottom: .2em;
display: inline-block;
}

.orientation-sidebar p {
font-size: 1em;
}

.orientation-sidebar div:first-child {
padding-top: 0;
}

.orientation-sidebar div {
padding-top: 1.6em;
}

.orientation-intro {
margin-bottom: .5em;
}

#sub {
background: @neutral;
position: relative;
z-index: 1;
padding-top: 15px;
}

#sub ul li {
display: inline;
}

#sub ul li a {
color: @purple;
font-family: @nav;
text-transform: uppercase;
padding: 0 1em 0 1em;
}

#sub ul li::after {
content: '/';
color: @white;
}

#sub ul li:last-child::after {
content: '';
}

.main-nav .active, #sub ul li a.active {
color: @gold;
}

.pagebannerinner {
height: 15em;
display: table-cell;
vertical-align: middle;
}

#pagebanner h2 {
text-transform: uppercase;
color: @white;
font-weight: 900;
font-size: 60px;
text-shadow: 1px 1px 2px rgba(0,0,0,.5);
margin-bottom: 0;
margin-top: 0;
font-family: @display;
position: relative;
z-index: 2;
}

#logoholder {
position: relative;
z-index: 1;
}

.inner {
width: 85%; 
margin: auto;
}

#extraseats .steppanel {
padding: 3em;
background: lighten(@grey,15%);
}

#extraseats {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-column-gap: 2em;
width: 80%;
margin: 2em auto 0 auto;
}

@media screen and (max-width: 1200px) {
#extraseats {
display: block;
width: 90%;
}
.steppanel {
margin-bottom: 1.8em;
}
}

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

.extraseats_request_button {
float: right;
}

.extraseatssort {
margin-bottom: 1.6em;
}

.extraseats_item {
min-height: 6em;
line-height: 1.8em;
}

.extraseats_item a {
font-size: 1.2em;
}

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

.extraseatssort span {
font-family: 'encodesanscompressed-800-extrabold', sans-serif;
}

#extra_seats_status span, .extraseats-filter-scrollbox span {
position: relative;
top: .2em;
}

.extraseats-filter-scrollbox {
height: 20em;
overflow-y: scroll;
overflow-x: hidden;
border: 1px solid @grey;
}

ul.extraseats-filter-scrollbox.disc, ul#extra_seats_status.disc {
margin-left: 0;
}

.extraseats-filter-scrollbox li {
margin-bottom: .3em;
}

/*
.extraseats_closed {
background: #eeeeee;
}

.extraseats_closed a {
color: darken(@grey,15%);
}

.extraseats_closed span {
color: darken(@grey,15%);
}
*/


#extraseats_list > div {
border: 1px solid darken(@grey,15%);
margin-bottom: 1em;
padding: 1em;
font-family: @body;
background: @white;
}

#extraseats_list > div a {
color: @textcolor;
}

#extraseats_filters li {
font-size: 1.16em !important;
}

#extraseats_filters li input {
position: relative;
top: .3em;
}

.extraseats_closed .figstatus, .extraseats_open .figstatus {
font-size: 1.1em;
position: relative;
top: .1em;
}

.extraseats_open .figstatus {
color: green;
}

.extraseats_open .figstatus:before {
color: green;
content: "done";
}

#extraseats_filters #credits_range_label {
font-size: 1.2em !important;
padding: .2em 0 .3em 0;
}

.udub-slant {
overflow: hidden;
display: block;
margin: 20px 0 25px 0;
position: relative;
z-index: 2;
}

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

.subnavelement {
opacity: 0;
}

#main-menu li:first-of-type .sub-arrow {
display: none;
}

#main-menu li:first-of-type a.has-submenu {
padding-right: 20px !important;
}

@media screen and (max-width: 781px) {
body {
overflow-x: hidden;
}
.uaamenuholder {
display: none;
}
#sub {
display: none;
}
.subnavelement {
opacity: 1;
}
#main-menu li:first-of-type .sub-arrow {
display: block;
}
#pagebanner h2 {
font-size: 45px;
}
#pagebanner h2:after {
background: none;
}
ul.smarttabs {
display: none;
}
.tab_content {
padding: 1em;
}
.tab_container {
display: block;
margin: 0 auto;
width: 100%;
border-top: none;
padding: 0;
}
.tab_drawer_heading {
background: lighten(@grey,8%);
color: @black;
font-weight: normal;
font-family: @nav;
margin: 0;
padding: 1em;
display: block;
cursor: pointer;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
text-align: center;
border-bottom: 1px solid @grey;
}
.tab_drawer_heading:last-of-type {
border-bottom: 0;
}
.tab_drawer_heading:hover {
background: lighten(@grey,5%);
}
.d_active {
background: @black;
color: @white;
}
.tab_drawer_heading.d_active:hover {
background: @black;
}
.tab_container {
min-height: auto !important;
}
.tab_content h4 {
display: none;
}
#orientgridtabs-sidebar {
margin: 2em 0 0 0;
}
#orientgrid {
display: block;
}
}

.dropdownsection {
margin: 2.2em 0 2.2em 0;
}

.dropdownsection ~ h2 {
margin-top: 1.9em;
}

/ video links ***/
.videoplay {
position: absolute;
margin-left: 35%;
margin-top: 20%;
box-shadow: black 0.1em 0.1em 0.5em, black 0.1em 0.1em 0.5em;
padding: .5em 1.5em .5em 1.5em;
-moz-border-radius: 12px;
border-radius: 5px;
transition: .5s;
-moz-transition: .5s;
-webkit-transition: .5s;
-o-transition: .5s;
z-index: 10;
opacity: .6;
}

.videoplay a {
color: @white;
}


/*** lozenges ***/

.ie .sub-nav {
.displaynone;
}

dl.sub-nav dd.active a {
background: @purple;
font-weight: normal;
}

dl.sub-nav dd a {
transition: none;
-moz-transition: none;
-webkit-transition: none;
-o-transition: none;
}


/*** sidebar /


.basic-page-sidebar-video {
margin: 1.6em 0 2em 0;
}

#sidebargrey {
margin: 1.6em 0 0 0;
}

.fypplaceholder {
padding: 20px 0 20px 0;
text-align: center;
margin-bottom: 22px;
background: @grey;
}

#quicklinkbox {
background: @neutral;
padding: 1.6em;
}

#quicklinkbox h5 {
text-transform: uppercase;
}

#quicklinkbox ul {
list-style: disc outside url(/site/templates/styles/images/bullet.gif); 
margin-left: 0; 
padding-left: 1em;
}

#quicklinkbox ul li {
padding-left: .2em;
margin-bottom: 8px;
}

/* PHONE */
@media only screen and (min-width: @smallfrom) and (max-width: @smallto) {
    .hidephone {
        display: none;
    }
}

/* TABLET */
@media only screen and (min-width: @mediumfrom) and (max-width: @mediumto) {
    .hidetablet {
        display: none;
    }
}

/** link blocks ***/


.pageblockcontainer {
display: grid;
grid-template-columns: 1fr 1fr;
grid-column-gap: 2.8em;
grid-row-gap: 2.8em;
margin: 2em 0 3em 0;
}

.pagelinkblock {
height: 20em;
transition: .1s;
-moz-transition: .1s;
-webkit-transition: .1s;
-o-transition: .1s;
cursor: hand;
cursor: pointer;
position: relative;
box-shadow: 0 1px 3px rgba(34,25,25,.4);
}

.pagelinkblock h3 {
position: absolute;
font-size: 1.3em;
bottom: 0;
background: rgba(255,255,255,.9);
pointer-events: none;
padding: 1em 0 1em 0;
margin: 0;
text-align: center;
display: block;
width: 100%;
line-height: 1.4em;
}

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

.pagelinkblock div {
position: absolute;
color: @white;
background: rgba(255,255,255,.8);
display: none;
pointer-events: none;
width: 100%;
height: 100%;
}

.pagelinkblock div p {
font-style: oblique;
padding: 1em;
}

@media only screen and (min-width: @smallfrom) and (max-width: @mediumto) {
.pageblockcontainer {
display: block;
}
.pagelinkblock {
margin-bottom: 1.8em;
}
}

/*** Page blocks with additional overlay on Leadership Opportunities */

.pageblockpositionactive {
background: rgba(255,255,255,.6);
color: @purple;
width: 100%;
height: 100%;
margin: 0;
padding: 0 0 3em 0;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
font-family: @displaynotcompressed;
font-size: 1.8em;
text-transform: uppercase;
line-height: 1.4em;
position: absolute;
}

/*** Page blocks with additional overlay on new Leadership Opportunities homepage */

.leadershippositionitemcontainer {
position: relative;
}

.newpageblockpositionactive {
background: rgba(255,255,255,.6);
color: @purple;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
font-family: @displaynotcompressed;
font-size: 1.7em;
text-transform: uppercase;
line-height: 1.4em;
position: absolute;
top: 0;
left: 0;

}

#orient-home-grid div.leadershippositionitemcontainer img {
margin-bottom: 0;
}

#orient-home-grid.leadershipopps div {
background: darken(@neutral,10%);
padding: 0;
}

.leadershipopps .uw-btn {
background: @white;
margin: 2em 3em 2em 0;
font-size: 1em;
}


/ Faculty & Staff (overview) /

#overviewblocks {
display: grid;
grid-template-columns: 1fr 1fr;
grid-column-gap: 3.8em;
grid-row-gap: 2.4em;
padding-top: 1.4em;
}

.overviewquicklinksbox ul {
padding-left: 2em;
padding-top: 1em;
min-height: 8em;
}

@media only screen and (min-width: @smallfrom) and (max-width: @mediumto) {
#overviewblocks {
display: block;
}
.pagelinkblock {
margin-bottom: 1.8em;
}
.overviewquicklinksbox ul {
padding-top: 0;
}
}


/ FYP Staff /

.programemails {
column-count: 2;
column-gap: 3em;
}

.programemails p {
margin: 0 0 .3em 0;
}

#staffpage {
margin-bottom: 5em;
}

#staffpage h3 {
color: @textcolor;
margin: 0;
font-size: 1.4em;
}

#staffpage table h3 {
margin: 0;
padding: 0;
}

#staffpage table {
margin-top: 2em;
margin-bottom: 2.6em;
}


#staffpage img {
/*box-shadow: 0 1px 3px rgba(34,25,25,.4);*/
}

.grid-50-50 {
display: grid;
grid-template-columns: 1fr 1fr;
grid-column-gap: 5em;
grid-row-gap: 2em;
}

.staffpod {
display: grid;
grid-template-columns: auto 1fr;
grid-column-gap: 1em;
}

@media only screen and (max-width: 1100px) {
.grid-50-50 {
display: block;
}
.programemails {
column-count: 1;
}
.staffpod {
margin: 0 0 3em 0;
display: block;
}
}

.staffpod {
font-family: @body;
}

.staffpod h4 {
color: @textcolor;
margin: 0;
padding: 0;
font-size: 1.1em;
}

.staffpodinfo {
margin: .7em 0 0 0;
}


/**


Fig & O Leaders 


***/


.figleader-pronoun {
font-family: @feature;
font-size: 1.2em;
margin: 16px 0 3px 0;
}

.figleader-major {
font-family: @body;
font-style: oblique;
line-height: 1.3em;
margin: 1em 0 1em 0;
}

.figleader-major span {
font-style: normal;
}

.figleader-story {
line-height: 1.5em;
font-size: 1em;
margin: 3px 0 0 0;
font-family: @body;
}

.figleader-story-freetext p {
color: @white;
line-height: 1.5em;
font-size: 1em;
}

.figleader-story-freetext h1 + p, .figleader-story-freetext h2 + p, .figleader-story-freetext h3 + p, .figleader-story-freetext h4 + p, .figleader-story-freetext h5 + p, .figleader-story-freetext h6 + p {
margin-top: 0;
}

.figleader-story-freetext h1, .figleader-story-freetext h2, .figleader-story-freetext h3, .figleader-story-freetext h4, .figleader-story-freetext h5, .figleader-story-freetext h6 {
color: @white;
padding: 0;
margin: 0;
}

.innerfig {
width: 93%;
margin: auto;
padding: 2em 0 3em 0;
}

.innerfig p {
margin-bottom: 0;
margin-top: 1em;
}

.neutral {
background: @neutral;
}

.figmission {
margin-bottom: 3em;
}

h4.olonly {
margin-top: .8em;
}



/** revised card flips 2024 ***/

#fyp-card-parent {
display: flex;
flex-wrap: wrap;
column-gap: 2em;
row-gap: 2em;
margin: 0 0 5em 0;
font-family: @body;
-webkit-font-smoothing: antialiased;
color: @textcolor;
}

#fyp-card-parent h4 {
margin: .6em 0 0 0;
padding: 0;
font-size: 1.1em;
}

#fyp-card-parent p {
font-size: 1em;
line-height: 1.33em;
padding: 0 .6em 0 .6em;
text-align: left;
}

.fyp-card {
background-color: transparent;
width: 300px;
height: 360px;
perspective: 1000px;
cursor: pointer;
flex-basis: 22.9%; 
}

@media only screen and (max-width: 1288px) {
.fyp-card {
flex-basis: 30%; 
}
}

@media only screen and (max-width: 770px) {
.fyp-card {
flex-basis: 47%; 
}
}

@media only screen and (max-width: 610px) {
#fyp-card-parent {
column-gap: 0;
row-gap: 3em;
}
.fyp-card {
flex-basis: 100%; 
}
}

.fyp-card-inner {
position: relative;
width: 100%;
height: 100%;
text-align: center;
transition: transform 0.6s;
transform-style: preserve-3d;
}

.fyp-card:hover .fyp-card-inner, 
.fyp-card:focus .fyp-card-inner  {
transform: rotateY(180deg);
}

.fyp-card-front, .fyp-card-back {
position: absolute;
width: 100%;
height: 100%;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}

.fyp-card-front {
background: @neutral;
}

.fyp-card-back {
background: @neutral;
transform: rotateY(180deg);
overflow: auto;
}

.fyp-card img {
object-fit: cover;
object-position: center top;
width: 100%;
height: 240px;
}


@media only screen and (max-width: 610px) {
.fyp-card {
background-color: transparent;
}
.fyp-card img {
object-fit: cover;
width: 100%;
height: 300px;
}
#fyp-card-parent p {
font-size: 1em;
line-height: 1.6em;
}
}


/**** modifications for student leaders (FIG and OLs) ****/

#studentleaders #pagebody {
margin-bottom: 4em;
}

.personblockdetails {
font-style: oblique;
margin-bottom: 1em;
padding: 0 .6em 0 .6em;
}

#studentleaders .fyp-card h5 {
text-align: left;
font-size: 1em;
padding: 0 .6em 0 .6em;
margin: 0;
}

#studentleaders .fyp-card h5 + p {
margin-top: 0;
}

#studentleaders .fyp-card {
height: 322px;
}

@media only screen and (max-width: 610px) {
#studentleaders .fyp-card {
height: 380px;
}
}

#studentleaders #fyp-card-parent h4 {
margin: 0.3em 0 0 0;
}


/* card flips embedded on Orientation section pages **/

#fyp-card-parent.embedded-fyp-card {
column-gap: 1em;
}

#fyp-card-parent.embedded-fyp-card .fyp-card {
min-width: 15.6em;
height: 326px;
}

@media only screen and (max-width: 610px) {
#fyp-card-parent.embedded-fyp-card .fyp-card {
height: 380px;
}
}

/**** Student staff listing on Meet the Staff Page ***/

.student_staff_listing {
display: flex;
flex-wrap: wrap;
column-gap: 2em;
row-gap: 2em;
margin: 0 0 7em 0;
font-family: @body;
-webkit-font-smoothing: antialiased;
color: @textcolor;
}

.student_staff_listing > div {
flex-basis: 17.3%;
}

.student_staff_listing h4 {
margin: .6em 0 0 0;
padding: 0;
font-size: 1.1em;
}

.student_staff_listing img {
object-fit: cover;
object-position: center top;
width: 100%;
height: 200px;
box-shadow: 0 1px 3px rgba(34,25,25,.4);
}


@media only screen and (max-width: 1288px) {
.student_staff_listing > div {
flex-basis: 30%; 
}
}

@media only screen and (max-width: 770px) {
.student_staff_listing > div {
flex-basis: 47%; 
}
}

@media only screen and (max-width: 610px) {
.student_staff_listing {
column-gap: 0;
row-gap: 3em;
}
.student_staff_listing > div {
flex-basis: 100%; 
}
.student_staff_listing img {
height: 300px;
}
}


/**** NEW 2022 ***/


/* The flip card container - set the width and height to whatever you want. We have added the border property to demonstrate that the flip itself goes out of the box on hover (remove perspective if you don't want the 3D effect */
.flip-card {
background-color: transparent;
width: 100%;
height: 500px;
perspective: 1000px; /* Remove this if you don't want the 3D effect */
cursor: hand;
cursor: pointer;
}

/* This container is needed to position the front and back side */
.flip-card-inner {
position: relative;
width: 100%;
height: 100%;
text-align: center;
transition: transform 0.8s;
transform-style: preserve-3d;
}

/* Do an horizontal flip when you move the mouse over the flip box container */
.flip-card:hover .flip-card-inner {
transform: rotateY(180deg);
}

/* Position the front and back side */
.flip-card-front, .flip-card-back {
position: absolute;
width: 100%;
height: 500px;
-webkit-backface-visibility: hidden; /* Safari */
backface-visibility: hidden;
}

/* Style the front side (fallback if image is missing) */
.flip-card-front {
border: 1px solid @grey;
overflow: hidden;
}

/* Style the back side */
.flip-card-back {
background: @purple;
color: @white;
transform: rotateY(180deg);
text-align: left;
padding: 1.6em 1.6em 1em 1.6em;
overflow: scroll;
}

.flip-card img {
height: 100%;
}

.flip-card h3, .flip-card h4, #basic-page-grid .flip-card h4 {
color: @white;
}

.flip-card h3 {
font-size: 1.7em;
text-align: left;
}

.flip-card-front h3 {
position: absolute;
top: 0;
margin: 0;
padding: .8em 1em .6em 1em;
text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.5);
background: rgba(51, 0, 111, .8);
border-radius: 0 0 .4em 0;
max-width: 70%;
}

.flip-card-back h3 {
padding: 0;
margin: 0;
text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.5);
}

.flip-card-front h3 span, .flip-card-back h3 span {
display: block;
font-size: .7em;
text-align: left;
}

.flip-card-back h4 {
margin: .9em 0 .3em 0;
padding: 0;
font-size: 1.1em;
}

.flip-card-header-grid {
display: grid;
grid-template-columns: 3fr auto;
}

.fignumber {
font-family:@body;
font-weight: bold;
padding: 2em 2em 0 0;
}

.flip-card a {
text-decoration: none;
color: @white;
}

.flip-card a:hover {
color: @gold;
}

#new-card-flip-grid {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-column-gap: 2em;
grid-row-gap: 2em;
margin: 2.2em auto 5.3em auto;
}

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

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

@media only screen and (max-width: 1360px) {
#new-card-flip-grid {
grid-template-columns: 1fr 1fr;
}
}

@media only screen and (max-width: 860px) {
#new-card-flip-grid {
grid-template-columns: 1fr;
}
}


/ Panels **/

#extraseats .panel {
background: lighten(@grey,10%);
width: 30% !important;
height: 350px !important;
margin-right: 15px !important;
margin-left: 15px !important;
}

.panel {
background: none;
border: 0;
padding: 0;
margin: 0;
}

.panel img {
max-width: 100% !important;
height: auto !important;
}

.panel h5 {
font-family: @display;
font-size: 1.24em;
margin: 0;
padding: 0;
}



/*** FIG 30th Anniversary ***/

#fig30 p {
font-family: @feature;
}

#fig30 b, #fig30 .smalltype {
font-family: @body;
}

#fig30 .smalltype {
font-size: 12px;
}

#fig30 img {
width: 100%;
}

#fig30 em {
font-family: @display;
font-style: normal;
}

#fig30 h3 {
font-size: 24px;
}

#fig30 .twocol {
display: grid;
grid-template-columns: 60% 40%;
grid-gap: 30px;
}

#fig30 .twocol2080 {
display: grid;
grid-template-columns: 25% 75%;
grid-gap: 20px;
padding: 30px;
}

#fig30 .twocolrev {
display: grid;
grid-template-columns: 40% 60%;
grid-gap: 30px;
}

#fig30 .threecol {
display: grid;
grid-template-columns: 33% 33% 33%;
grid-gap: 30px;
}

#fig30 h2.box {
background: lighten(@grey,10%);
padding: 30px;
}

#fig30 .figleadershirtbox {
background: lighten(@grey,10%); 
padding: 30px;
margin-bottom: 30px;
}


/** Contact Form **/

#contactformiframe {
margin: 0;
padding: 0;
border: none;
border: 0;
width: 100%;
height: 350px;
}

/** Extra Seats Form **/

#extraseatsformiframe {
margin: 0;
padding: 0;
border: none;
border: 0;
width: 100%;
height: 540px;
}


/* email archive */

/* Dropdown Button */
.dropbtn {
  background-color: @purple;
  color: white;
  padding: 12px;
  font-size: 16px;
  border: none;
}

/* The container <div> - needed to position the dropdown content */
.dropdown {
  position: relative;
  display: inline-block;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  min-width: 260px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 100;
}

/* Links inside the dropdown */
.dropdown-content a {
  color: black;
  padding: 8px 12px;
  text-decoration: none;
  display: block;
  border-bottom: 1px solid @grey;
}

/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #ddd;}

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {display: block;}

/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover .dropbtn {background-color: @gold;}

.emailgrid {
display: grid;
grid-template-columns: 1fr 1fr;
grid-column-gap: 3em;
grid-row-gap: 2em;
margin-bottom: 4em;
}

@media only screen and (max-width: 680px) {
.emailgrid {
display: block;
}
.emailgrid div {
margin-bottom: 1em;
}
}

.emailheader {
font-size: 1.5em;
font-family: @nav;
padding: 0;
margin: 0 0 .2em 0;
}



/** orbits **/

.orbitsidebarcontainer {
background: @neutral;
}

.orbitsidebarcontainer div {
border: 1px solid @grey;
padding: 4em 1.5em 0 1.5em;
}

.orbit-caption p {
font-family: @display;
font-style: oblique;
font-size: 22px;
line-height: 27px;
}

.orbitcontainer div {
background: @grey;
padding: 5em 5em 8em 5em;
}


/* hide arrows until mouse enter */
.orbit-wrapper .slider-nav span { filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0); opacity: 0; -webkit-transition: opacity 400ms; -moz-transition: opacity 400ms; -o-transition: opacity 400ms; transition: opacity 400ms; }
.orbit-wrapper:hover .slider-nav span { filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100); opacity: 1; }

.orbit-wrapper .orbit-caption {
background: transparent;
color: @black;
z-index: 30;
position: absolute;
right: 0;
bottom: 0;
width: 100%;
padding: 0 2em 2em 1em;
}

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

/*                     HOME PAGE                      */

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


/*** SLIDESHOW  ***/

.main-gallery * {
-webkit-box-sizing: border-box;
box-sizing: border-box;
}

.gallery-cell {
width: 100%;
height: 560px;
margin-right: 10px;
background-size: cover;
background-position: 50% 50%;
background-repeat: no-repeat no-repeat;
}

.gallery-cell p {
color: @white;
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.6);
font-family: @feature;
font-size: 1.6em;
line-height: 1.4em;
width: 52%;
margin-top: 0;
margin-bottom: 1.2em;
}

@media only screen and (max-width: 980px)  {
.gallery-cell {
height: 420px;
}
.gallery-cell p {
width: 100%;
}
.gallery-cell .inner {
padding: 0 2em 0 2em;
}
}

.gallery-cell::after {
position: absolute;
z-index: 1;
top: 0;
height: 100%;
width: 100%;
content: "";
background: rgb(0,0,0);
background: linear-gradient(90deg, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.7) 41%, rgba(0,0,0,0) 66%);
}

.gallery-cell .inner {
position: relative;
z-index: 2;
}

.gallery-cell h1  {
font-family: @display;
font-size: 3.8em;
font-weight: 900;
text-transform: uppercase;
color: @white;
pointer-events: none;
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);
margin: 1em 0 .6em 0;
}

@media only screen and (max-width: 830px)  {
.gallery-cell h1  {
font-size: 2.6em;
}
}

@media only screen and (max-width: 550px)  {
.gallery-cell h1  {
font-size: 2em;
}
.gallery-cell p {
font-size: 1.4em;
}
.gallery-cell::after {
background: linear-gradient(90deg, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0.6) 41%, rgba(0,0,0,0.6) 66%);
}
.gallery-cell {
height: 320px;
}
}

.gallery-cell h1::after {
content: "";
display: block;
height: .18em;
width: 4em;
margin-top: .2em;
background: @gold;
-webkit-clip-path: polygon(0 0, 100% 0, 98% 100%, 0% 100%);
clip-path: polygon(0 0, 100% 0, 98% 100%, 0% 100%);
}



/*** FAST FACTS ***/

.fastfacts {
text-align: center;
background: @neutral;
}

.fastfacts h2 {
background: @purple;
color: @white;
display: inline-block;
text-transform: uppercase;
font-family: @body;
font-size: 17px;
padding: 10px 50px;
margin: 0;
font-weight: 700;
}

#factcontainer {
display: grid;
grid-template-columns: 1fr 1fr;
padding: 5em 5em 7em 5em;
align-items: center;
grid-column-gap: 7em;
}

@media only screen and (max-width: 600px)  {
#factcontainer {
grid-template-columns: 100%;
grid-row-gap: 6em;
padding: 2em 2em 3em 2em;
}
}


/*** NEWS & EVENTS ***/

.features {
background: url(/site/templates/styles/images/chalkboard_lighter.jpg);
-webkit-background-size: cover; 
-moz-background-size: cover; 
-o-background-size: cover; 
background-size: cover;
background-attachment: fixed;
padding: 2em 0 1.4em 0;
}

.features h2 {
color: @white;
font-size: 1.7em;
font-family: @nav;
text-align: center;
position: relative;
z-index: 1;
overflow: hidden;
margin-top: 1em;
}

.features h3 a {
text-decoration: none;
}

.features h2::after {
margin-left: .8em;
}

.features h2::before, .features h2::after {
position: absolute;
top: 51%;
overflow: hidden;
width: 50%;
height: 1px;
content: '\a0';
background-color: rgba(255, 255, 255, 0.2);
}

.features h2::before {
margin-left: -52%;
text-align: right;
}

.homeitem h3 {
color: @purple;
margin: 1em 0 0 0;
}

#homecontainer {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-column-gap: 2em;
padding: 1em 0 3em 0;
}

.homeitem {
background: @neutral;
}

.homeitem p {
font-size: .98em;
margin: .8em 0 1em 0;
padding: 0;
}

.homeitem img {
width: 100%;
}

.homeitem div {
padding: 0 1.6em 2em 1.6em;
}

.homeitem .uw-btn {
background: @white;
}

@media only screen and (max-width: 1100px) {
#homecontainer {
display: block;
}
.homeitem {
margin-bottom: 2.2em;
}
}


/*** FYP in the News  /

.datestamp {
font-family: @feature;
font-size: 1.2em;
margin: 1em 0 1em 0;
}

.newsarchive h2 {
margin: 0;
}

.newsarchive .uw-btn {
background: @gold;
}

.newsarchive img {
box-shadow: 0 1px 3px rgba(34,25,25,.4);
margin: 0 0 6.5em 0;
}

.newsarchive .five {
position: relative;
left: -2em;
}

.newsstory img {
float: right;
margin: 0 0 2em 2em;
}

.newsstory {
margin-bottom: 4em;
}

@media only screen and (min-width: @smallfrom) and (max-width: @mediumto) {
.newsarchive .five {
left: 0;
}
.newsarchive img {
margin: 0 0 1em 0;
}
.newsarchive .uw-btn {
margin-bottom: 6em;
}
}


/**** sitemap ***/


.sitemap .expand-all a {
-moz-box-shadow:inset 0px 1px 0px 0px #ffffff;
-webkit-box-shadow:inset 0px 1px 0px 0px #ffffff;
box-shadow:inset 0px 1px 0px 0px #ffffff;
background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #ffffff), color-stop(1, #f6f6f6));
background:-moz-linear-gradient(top, #ffffff 5%, #f6f6f6 100%);
background:-webkit-linear-gradient(top, #ffffff 5%, #f6f6f6 100%);
background:-o-linear-gradient(top, #ffffff 5%, #f6f6f6 100%);
background:-ms-linear-gradient(top, #ffffff 5%, #f6f6f6 100%);
background:linear-gradient(to bottom, #ffffff 5%, #f6f6f6 100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#f6f6f6',GradientType=0);
background-color:#ffffff;
-moz-border-radius:6px;
-webkit-border-radius:6px;
border-radius:6px;
border:1px solid #dcdcdc;
display:inline-block;
cursor:pointer;
color:#666666;
font-family: @nav;
font-size:15px;
padding:6px 24px;
text-decoration:none;
text-shadow:0px 1px 0px #ffffff;
margin: 0 .5em 1.5em 0;
}

.sitemap .expand-all a:hover {
background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #f6f6f6), color-stop(1, #ffffff));
background:-moz-linear-gradient(top, #f6f6f6 5%, #ffffff 100%);
background:-webkit-linear-gradient(top, #f6f6f6 5%, #ffffff 100%);
background:-o-linear-gradient(top, #f6f6f6 5%, #ffffff 100%);
background:-ms-linear-gradient(top, #f6f6f6 5%, #ffffff 100%);
background:linear-gradient(to bottom, #f6f6f6 5%, #ffffff 100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f6f6f6', endColorstr='#ffffff',GradientType=0);
background-color:#f6f6f6;
}

.sitemap .expand-all a:active {
position:relative;
top:1px;
}

.sitemap {
padding: 0 0 4em 0;
}

/* FIG/TRIG search /

.exhibit-thumbnailView-group h1 {
font-size: 20px;
}
a.genstudies {
text-decoration: none;
font-weight: bold;
}
.genstudies:hover {
background: #c5c5c5;
}
.coursedesc {
text-decoration: none;
color: rgb(51, 51, 51);
font-weight: bold;
}
.coursedesc:hover {
color: rgb(51, 51, 51);
background: #c5c5c5;
}

.exhibit-collectionView-header-sortControls {
display: none !important;
}

.exhibit-collectionView-header {
text-align: center;
margin-bottom: 20px;
color: @purple;
}

#figresults .exhibit-collectionView-header {
color: @purple;
font-family: @body;
background: @neutral;
padding: 1em;
position: relative;
top: -1em;
}

.exhibit-collectionSummaryWidget-count {
font-weight: bold;
}

.exhibit-facet-header-title {
color: @purple;
font-family: @body;
display: inline-block;
margin-top: 1em;
}

.fig {
margin: 0 0 1.8em 0;
box-shadow: 5px 5px 12px #bababa;
padding: 10px 15px 10px 15px;
color: @textcolor;
background: @white;
font-family: @body;
}

#basic-page-grid-flipped.figsearch {
margin-top: 1.4em;
}

@media only screen and (max-width: 1279px) {
#basic-page-grid-flipped.figsearch {
display: block;
}
}

.oblique {
font-style: oblique;
}

.figsearchtable {
border-spacing: .2em;
border-collapse: separate;
width: 100%;
margin-top: 1em;
}

.figsearchtable td {
padding: .3em;
background: lighten(@grey,10%);
}

@media only screen and (max-width: 800px) {
.figsearchtable {
border-spacing: 0;
}
.figsearchtable tr, .figsearchtable td {
display: block;
}
.figsearchtable tr {
background: lighten(@grey,10%);
margin-bottom: .2em;
padding: .3em;
}
.figsearchtable td {
background: none;
padding: 0;
}
}

.engineeringfig {
background: lighten(@gold,25%);
}

.exhibit-thumbnailView-itemContainer {
width: 100%;
}

.exhibit-facet-value-link, .exhibit-facet-value-count {
font-family: @body;
}

.figclosed {
background: red;
color: @white;
font-weight: 700;
padding: 3px 3px 3px 8px;
text-transform: uppercase;
margin-top: 8px;
}

.figopen {
background: green;
color: @white;
padding: 3px 3px 3px 8px;
text-transform: uppercase;
font-weight: 700;
margin-top: 8px;
}

.fig p, .fig li {
font-size: 1em;
}

.fig ul {
list-style:outside circle;
margin: 0 0 0 20px; 
}

.fig p.figname {
font-family: @feature;
font-size: 1.3em;
color: @purple;
margin-top: .3em;
}

.fig p.figname > span:first-of-type {
font-family: @featurebold;
font-size: 1.5em;
display: block;
padding: .5em .2em .5em 0;
line-height: 1.2em;
}

div.exhibit-thumbnailView-itemContainer-IE {
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
background:#F0FFF0 none repeat scroll 0 0;
border:1px solid #BCB79E;
float:left;
margin:0.3em;
padding:0.9em;
text-align:left;
width:620px;
 }

.exhibit-slider-display input {
display: inline;
width: 50px;
}

.exhibit-text-facet {
margin-bottom: 1em;
}

.exhibit-text-facet input {
font-family: @body;
font-size: 1em;
margin-top: .3em;
padding: .4em;
}

.exhibit-facet-body-frame {
margin: .2em 0 0 0;
}

.figsearch td, .notify {
font-family: @body;
}

.notify {
text-align: right; 
margin-top: 5px;
}

.notify img {
display: inline; 
position: relative; 
top: 6px; 
left: -3px; 
width: 1.4em;
}

.figsearch-sidebar {
margin-top: 2em;
margin-bottom: 5em;
}

.figsearch-sidebar .uw-btn {
margin-top: 2em;
}

.notify-icon {
width: 2em;
}

.figsearch-myplan-icon {
width: 4.4em; 
position: relative; 
top: .1em;
}

/* SPONSORSHIP OPPORTUNITIES /

.sponsorshippage {
margin-bottom: 4em;
}

.sponsorshippage h2 {
font-size: 30px;
margin: .8em 0 0 0;
}

.sponsorshippage h2::after {
content: "";
background: url(/site/templates/styles/images/slash.svg) repeat-x;
background-size: .2em;
height: 1em;
width: 61%;
margin: auto;
display: block;
position: relative;
top: .3em;
}

#sponsorship {
display: grid;
grid-template-columns: 2fr 3fr;
grid-column-gap: 2.2em;
grid-row-gap: 1px;
margin: 3em 0 0 0;
}

#sponsorship > div:nth-of-type(1) {
background: @gold;
}

#sponsorship > div:nth-of-type(3) {
background: @purple;
}

#sponsorship > div:nth-of-type(5) {
background: @grey;
}

#sponsorship > div:nth-of-type(7) {
background: @spiritgold;
}


#sponsorship > div:nth-of-type(odd) {
clip-path: polygon(90% 0, 100% 50%, 90% 100%, 0 100%, 0 0);
padding: 2.6em;
}

#sponsorship > div:nth-of-type(even) {
padding: 2.6em;
}

#sponsorship h3, #sponsorship h4 {
color: @white;
}

#sponsorship h3 {
text-transform: uppercase;
font-size: 2em;
}

.sponsorshippage > h3 {
color: @purple;
margin: 1em 0 .2em .4em;
}

#sponsorship-addons {
display: flex;
margin-bottom: 4em;
}

#sponsorship-addons div {
background: lighten(@grey,15%);
margin: 0 1em 0 0;
padding: 1em;
flex-grow: 1;
flex-basis: 0;
}

#sponsorship-addons div h3 {
color: @purple;
}

@media only screen and (max-width: @small) {
#sponsorship {
display: block;
}
#sponsorship-addons {
display: block;
}
#sponsorship-addons div {
margin-bottom: 1em;
}
}



/* ISSC /

.issc-member {
width: 50%;
float: left;
padding-right: 10px;
margin-bottom: 20px;
min-height: 180px;
}

.issc-member h4 {
margin: 0;
}

.issc-member img {
float: left; 
width: 150px;
height: 150px;
margin-right: 10px;
}

.issc-service {
border: 1px solid @grey;
margin-bottom: 20px;
background: @white;
}

.issc-service img {
float: left; 
min-width: 350px;
margin-right: 20px;
}

#issc-committee, #issc-services {
margin-top: 40px;
}

#isscResourcesContainer {
padding: 10px 0 0 0;
margin: 10px 0 0 0;
}

#isscResourcesContainer .mix {
display: none;
background: @neutral;
background-size: cover !important;
padding: 0;
margin: 10px;
font-size: 18px;
cursor: pointer;
cursor: hand;
width: 23%;
height: 220px;
float: left;
position: relative;
box-shadow: 0 1px 3px rgba(34,25,25,.4);
}


@media only screen and (min-width: @smallfrom) and (max-width: @mediumto) {
#isscResourcesContainer .mix {
width: 100%;
}
}

#isscResourcesContainer .mix a {
color: @purple;
display: block;
background: rgba(255,255,255,.7);
font-family: @nav;
position: absolute;
bottom: 0;
padding: 5px;
width: 100%;
}

#isscResourcesContainer .mix:hover{
background: @grey;
}

#tabs-topic button {
border: 0;
margin: 3px;
padding: 6px 12px 6px 12px;
cursor: pointer;
font-size: 14px;
background: #eee;
border-radius: 15px;
color: @darkgrey;
transition: .1s;
-moz-transition: .1s;
-webkit-transition: .1s;
-o-transition: .1s;
}

#tabs-topic button:hover, #tabs-topic button.selected {
background: @gold;
color: @neutral;
}

#tabs-topic button:focus {
outline: none;
}

.subbuttons {
position: relative;
display: none;
border-top: 1px solid @grey;
padding: 10px 0 0 0;
margin: 10px 0 0 0;
}

.topbutton, .allselected {
font-weight: bold;
}

#isscResourcesContainer:before,
#isscResourcesContainer:after {
  content: " "; /* 1 */
  display: table; /* 2 */
}

#isscResourcesContainer:after {
  clear: both;
}

#isscsearch {
margin-top: 15px;
}



/ Live Events */

.liveeventsupcoming {
display: grid;
grid-template-columns: 1fr 1fr;
grid-column-gap: 2em;
grid-row-gap: 2em;
margin-bottom: 3.2em;
margin-top: 1.8em;
}

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

.liveevent {
background: @neutral;
padding: .5em 1.5em 1em 1.5em;
min-height: 9em;
}

@media only screen and (max-width: 450px) {
.liveevent {
margin-bottom: 1em;
}
}

.liveevent p {
text-transform: uppercase;
font-size: .9em;
font-weight: 700;
}

.liveevent h3 {
padding: 0;
color: @purple;
margin: 0 0 0 0;
font-size: 1.3em;
}

#basic-page-grid .liveevent h4 {
padding: 0;
margin: 1em 0 0 0;
font-size: 1em;
font-family: @body;
font-style: oblique;
}

.liveevent .uw-btn {
margin-top: 1.5em;
background: @white;
color: lighten(@textcolor,20%);
font-family: @buttontext;
}

.liveevent .liveeventdesc p {
text-transform: none;
}

.after_everything {
margin-top: 4em;
}

#basic-page-grid h4.bottom-margin {
margin-bottom: .9em;
}


/** DD events & Husky Kickoff */

#dawgdaze {
position: relative;
overflow: hidden;
margin-bottom: 1em;
}

#dawgdaze .default-page-width {
position: relative;
}

#dawgdaze img {
width: 20em;
height: 20em;
position: absolute;
z-index: 3;
right: -1em;
top: 0;
}

#dawgdaze:before {
content: '';
position: absolute;
width: 100%;
height: 100%;
background-color: @purple;
background-image: radial-gradient(#000000 25%, @purple 50%);
background-size: .2em .2em;
opacity: .4;
top: 0;
}

#dawgdaze #pagebanner:before {
position: absolute;
top: 0;
right: -10em;
content: '';
z-index: 1;
width: 45%;
height: 100%;
transform: skew(-15deg);
background: @white;
opacity: .7;
}

#dawgdaze #pagebanner:after {
position: absolute;
top: 0;
right: -10em;
content: '';
z-index: 1;
width: 50%;
height: 100%;
transform: skew(-15deg);
background: @white;
opacity: .5;
}

#dawgdaze #pagebanner h1 {
width: 62%;
line-height: 1.3em;
}

#dawgdaze #pagebanner.pagebannerlarger h1::after {
background: @gold;
margin-top: 16px;
}

@media only screen and (max-width: 1250px) {
#dawgdaze #pagebanner:before {
width: 48%;
}
#dawgdaze #pagebanner:after {
width: 53%;
}
}

@media only screen and (max-width: 1100px) {
#dawgdaze #pagebanner:before {
width: 55%;
}
#dawgdaze #pagebanner:after {
width: 60%;
}
#dawgdaze #pagebanner h1 {
width: 52%;
}
}

@media only screen and (max-width: 945px) {
#dawgdaze #pagebanner:before {
width: 65%;
}
#dawgdaze #pagebanner:after {
width: 70%;
}
}

@media only screen and (max-width: 800px) {
#dawgdaze img {
position: relative;
z-index: 3;
top: 1em;
}
#dawgdaze #pagebanner h1 {
width: 100%;
padding: 1em 0 0 0;
text-align: left;
}
#dawgdaze #pagebanner:before, #dawgdaze #pagebanner:after {
transform: skew(-15deg) rotate(75deg) scale(3);
right: 20em;
top: 50em;
}
#dawgdaze #pagebanner {
text-align: right;
}
}

@media only screen and (max-width: 745px) {
#dawgdaze #pagebanner:before, #dawgdaze #pagebanner:after {
top: 47em;
}
}

@media only screen and (max-width: 700px) {
#dawgdaze #pagebanner:before, #dawgdaze #pagebanner:after {
top: 45em;
}
}

@media only screen and (max-width: 670px) {
#dawgdaze #pagebanner:before, #dawgdaze #pagebanner:after {
top: 43em;
}
}

@media only screen and (max-width: 640px) {
#dawgdaze #pagebanner:after {
opacity: 0;
}
#dawgdaze #pagebanner:before {
top: 37em;
opacity: .8;
}
#dawgdaze #pagebanner h1 {
font-size: 2.6em;
}
#dawgdaze img {
width: 16em;
height: 16em;
}
#dawgdaze #pagebanner {
background-position: top center !important;
}
}

@media screen and (max-width: 600px) {
#dawgdaze #pagebanner {
position: static;
}
}

@media only screen and (max-width: 565px) {
#dawgdaze #pagebanner:before {
top: 34em;
}
#dawgdaze #pagebanner h1 {
padding: 1em 0 3em 0;
}
}

@media only screen and (max-width: 500px) {
#dawgdaze #pagebanner:before {
top: 31em;
}
}

.dawgdazeevent h1 {
font-family: @nav;
font-size: 2.26em;
margin: .7em 0 .5em 0;
}

.dawgdazeevent blockquote.inline-alert {
padding-bottom: .3em;
display: inline-block;
margin-top: 0;
margin-bottom: 0;
}

.dawgdazeevent blockquote.inline-alert p:before {
font-size: 2em;
}

#dd_event_grid {
display: grid;
grid-template-columns: 1fr 1.61fr;
grid-column-gap: 1.61em;
margin-top: 2.6em;
}

#dd_event_grid img {
width: 100%;
}

@media only screen and (max-width: 740px) {
#dd_event_grid {
display: block;
}
#dd_event_grid img {
margin-bottom: 1em;
}
.dawgdazeevent blockquote.inline-alert p:before {
position: relative;
top: .3em;
}
}

#dd_event_grid h1 {
margin: 0 0 .4em 0;
padding: 0;
}

.dd_date {
background-color: @neutral;
padding: 0.3em 0.6em 0.3em 0.6em;
border-radius: 0.8em;
color: @purple;
display: inline-block;
margin-top: 0;
}

.dd_location p {
display: inline-block;
margin: 0;
padding: 0;
}

.dd_location .material-icons {
color: lighten(@textcolor,10%);
position: relative;
top: .3em;
margin-right: .3em;
}


/*--------- Kick Off -------------- */

#agenda-banner.huskykickoff {
background-image: url(/uaa/hko/kickoff.webp);
overflow: hidden;
position: relative;
box-shadow: none;
}

.huskykickoff .default-page-width {
position: relative;
}

.huskykickoff .dot-screen:after {
content: '';
position: absolute;
width: 100%;
height: 100%;
opacity: .3;
/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#000000+0,000000+29&1+0,0+30 */
background: -moz-linear-gradient(top,  rgba(0,0,0,1) 0%, rgba(0,0,0,0.03) 29%, rgba(0,0,0,0) 30%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  rgba(0,0,0,1) 0%,rgba(0,0,0,0.03) 29%,rgba(0,0,0,0) 30%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  rgba(0,0,0,1) 0%,rgba(0,0,0,0.03) 29%,rgba(0,0,0,0) 30%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#00000000',GradientType=0 ); /* IE6-9 */
top: 0;
z-index: 4;
}

.huskykickoff .ddlogo {
width: 19em;
position: absolute;
z-index: 7;
right: -2em;
bottom: 0;
margin-top: 1em;
margin-bottom: 2.8em;
}

.huskykickoff:before {
position: absolute;
top: 0;
right: -10em;
content: '';
z-index: 5;
width: 40%;
height: 100%;
transform: skew(-15deg);
background: @white;
opacity: .7;
}

.huskykickoff:after {
position: absolute;
top: 0;
right: -10em;
content: '';
z-index: 6;
width: 48%;
height: 100%;
transform: skew(-15deg);
background: @white;
opacity: .5;
}

.huskykickoff #nametag {
z-index: 8;
position: relative;
margin: 6em 0 8em 0;
}

.huskykickoff #nametag-welcome {
max-width: 100%;
margin: 2em 0 2.2em 0;
}


@media only screen and (max-width: 1080px) {
.huskykickoff:before, .huskykickoff:after {
transform: skew(-15deg) rotate(75deg) scale(4);
top: 50em;
}
.huskykickoff .ddlogo {
position: relative;
float: right;
margin-left: 10em;
margin-bottom: 1em;
}
.huskykickoff #nametag {
margin: 6em 0 0 0;
}
.huskykickoff:after {
width: 45%;
}
}

@media only screen and (max-width: 880px) {
.huskykickoff .ddlogo {
width: 16em;
}
.huskykickoff #nametag {
margin: 2em 0 0 0;
}
.huskykickoff #nametag-welcome {
margin: 0 0 2.2em 0;
}
}

@media only screen and (max-width: 850px) {
.huskykickoff:before, .huskykickoff:after {
top: 46em;
}
}

@media only screen and (max-width: 780px) {
.huskykickoff:before, .huskykickoff:after {
top: 40em;
}
}

@media only screen and (max-width: 680px) {
.huskykickoff:before, .huskykickoff:after {
top: 36em;
}
.huskykickoff .ddlogo {
margin-right: 1em;
margin-top: 2em;
}
}

@media only screen and (max-width: 580px) {
.huskykickoff:before, .huskykickoff:after {
top: 28em;
}
}


/* Former Staff **/

#formerstaffgrid {
display: grid;
grid-template-columns: 1fr 1fr;
grid-column-gap: 1em;
grid-row-gap: 1em;
margin: 2em 0 3em 0;
justify-items: start;
}

#formerstaffgrid img {
box-shadow: 0 1px 3px rgba(34,25,25,.4);
}

#formerstaffgrid > div {
display: grid;
grid-template-columns: auto 1fr;
grid-column-gap: 1em;
background: @white;
padding: 2.6em 2.6em 0 2.6em;
border: 1px solid lighten(@grey,10%);
}

#formerstaffgrid > *:nth-child(2n-1) {
justify-self: center;
}

#formerstaffgrid > *:nth-child(2n) {
justify-self: end;
}


#formerstaffgrid h3 {
color: @textcolor;
margin: 0 0 .3em 0;
padding: 0;
}

#formerstaffgrid h4 {
font-family: @feature;
color: @textcolor;
font-size: 1.2em;
margin: 0;
padding: 0;
}

#formerstafflist {
margin-bottom: 5em;
}

@media only screen and (max-width: 1100px) {
#formerstaffgrid {
display: block;
background: @white;
}
#formerstaffgrid > div {
padding: 1em;
}
#formerstaffgrid > *:nth-child(2n-1):nth-last-of-type(1) p {
width: 100%;
}
}

/****  FIG Search **/


#figsearch-grid {
display: grid;
grid-template-columns: 1fr 3fr;
grid-column-gap: 2.6em;
border-radius: 1em;
box-shadow: 0 1px 3px rgba(34,25,25,.4);
margin: 2.1em 0 3em 0;
padding: 1.2em 2.1em 2em 2.1em;
background: lighten(@grey,16%);
}

#figsearch-filter-controls, #fig-toolbar { 
position: sticky;
top: 0;
}

#fig-toolbar {
z-index: 1000;
background: #f9f9f9;
padding: 1em;
}

@media only screen and (max-width: 580px) {
#figsearch-grid {
grid-template-columns: 1fr;
padding: .6em 1.1em 1em 1.1em;
}
#fig-results { 
order: 1;
}
#figsearch-filter-controls { 
order: 2;
}
#fig-count span:nth-of-type(1) {
display: block;
margin-bottom: .4em;
}
#fig-results-sort {
line-height: 2.3em;
}
}

#figsearch-grid > div:first-child {
margin-top: 1.6em;
align-self: start;
}

#figsearch-grid > div:first-child h3 {
margin: 0;
}

#figsearch-grid > div:first-child h4 {
margin: .7em 0 .2em 0;
color: @textcolor;
}

#figsearch-grid > div:first-child #search_box {
font-size: 1em;
font-family: @body;
margin: .8em 0 1.6em 0;
width: 94%;
}

#figsearch-grid > div:first-child ul {
list-style-type: none;
margin: 0;
padding: 0;
}

#figsearch-grid > div:first-child ul li {
font-size: 1em;
line-height: 1.4em;
}

#figsearch-grid #figlist h3.dropdown-header {
font-size: 1.14em;
line-height: 1.3em;
padding: .5em 2.5em .5em .8em;
margin-bottom: 0;
}

#figsearch-grid .dropdown-header div {
font-family: @body;
font-size: .8em;
font-weight: normal;
color: @textcolor;
margin: 0;
line-height: 1.4em;
}

#figsearch-grid .dropdown-header div span:before {
content: "\00a0\00a0•\00a0\00a0";
}

#figsearch-grid .dropdown-header div span:first-of-type:before {
content: "";
}

#figsearch-grid .dropdownsection {
margin: 0;
}

.dropdown-header em {
font-style: normal;
font-family: @nav;
color: @purple;
}

#figsearch-grid #figlist h3.dropdown-header {
border-top: 1px solid lighten(@grey,5%);
border-left: 1px solid lighten(@grey,5%);
border-right: 1px solid lighten(@grey,5%);
background: lighten(@grey,14%);
color: @textcolor;
}

#figsearch-grid #figlist h3.dropdown-header.activedropdown {
background: @white;
}

.fig-item-holder:last-of-type h3.dropdown-header {
border-bottom: 1px solid lighten(@grey,10%);
}

#figsearch-grid #figlist h3.dropdown-header:hover {
box-shadow: none;
background: @white;
}

#figsearch-grid #figlist h3.dropdown-header:active {
background: lighten(@textcolor,70%);
}

#figsearch-grid #figlist blockquote {
border-left: 1px solid lighten(@grey,10%);
border-right: 1px solid lighten(@grey,10%);
border-bottom: 1px solid lighten(@grey,10%);
padding: 0 .8em 1em .8em;
background: @white;
}

#figsearch-grid #figlist h3.fig-closed + blockquote td a.fig-myplan-link {
display: none;
}

#figsearch-grid #figlist h3.fig-closed + blockquote td a {
pointer-events: none;
}

.disabled {
pointer-events: none;
}

#figsearch-grid blockquote p {
margin: 0;
}

.figstatus {
font-family: @body;
font-weight: normal;
font-size: .8em;
}

#credits_range_label {
font-family: @body;
font-size: 1em;
color: @textcolor;
-webkit-font-smoothing: antialiased;
margin: 0 0 .4em 0;
display: block;
}

#credits_slider {
width: 90%;
margin-left: .4em;
margin-bottom: 1em;
}

#credits_slider .ui-widget-header {
background: @gold;
}

.figs-notifyme {
.default-text;
font-size: .9em;
margin-top: 1em;
display: inline-block;
}

.figs-notifyme:before {
content: url(/site/templates/styles/images/notify.svg);
display: inline-block;
width: 1.4em;
margin: 0 .4em 0 0;
position: relative;
top: .3em;
}

.fig-description-open .figs-notifyme {
display: none;
}

#fig-count {
text-align: center;
margin: 0;
padding: 0;
font-family: @body;
color: darken(@grey,40%);
font-weight: normal;
font-size: 1em;
}

#fig-count span:first-of-type {
font-family: @nav;
color: @textcolor;
font-size: 1.6em;
position: relative;
top: .16em;
left: -.2em;
}

#figsearch-grid > div:first-child ul.fig-filter-scrollbox {
height: 9em;
overflow-y: auto;
border: 1px solid @grey;
margin-bottom: 1.3em;
background: @white;
list-style-position: outside;
}

#figsearch-grid > div:first-child ul.fig-filter-scrollbox li {
display: grid;
grid-template-columns: auto 1fr;
grid-column-gap: .3em;
margin-bottom: .1em;
}

#figsearch-grid > div:first-child ul.fig-filter-scrollbox li input {
margin-top: .4em;
}

#figsearch-grid > div:first-child ul.fig-filter-scrollbox li span {
line-height: 1.3em;
}

#figsearch-filter-controls h4 {
position: relative;
}

#figsearch-filter-controls h4 a {
font-family: @body;
margin-left: .3em;
text-decoration: none;
color: darken(@grey,20%);
font-size: .9em;
border-radius: .3em;
padding: 0 .3em 0 .3em;
position: absolute;
top: 0;
right: 0;
display: none;
}

#figsearch-filter-controls h4 a:hover, #fig-count a:hover {
background: @neutral;
color: darken(@grey,40%);
}

#figsearch-filter-controls h4 a:after, #fig-count a:after {
font-family: 'Material Icons';
content: "backspace";
-webkit-font-feature-settings: 'liga';
position: relative;
top: .16em;
margin-left: .2em;
display: inline-block;
transform: rotate(180deg);
}

#figsearch-filter-controls ul li span {
cursor: pointer;
}

#figsearch-filter-controls h3 .material-icons {
position: relative;
top: .14em;
margin-right: .1em;
}

#fig-toolbar {
display: grid;
grid-template-columns: 1.6fr 1fr;
margin: 2em 0 1.6em 0;
font-size: .9em;
}

@media only screen and (max-width: 580px) {
#fig-toolbar {
margin-top: .6em;
}
}

#fig-toolbar > div:nth-of-type(2) {
text-align: right;
.default-text;
}

#fig-results-sort, #fig-results-sort button {
.default-text;
}

#fig-count a {
display: none;
font-family: @body;
margin-left: .3em;
text-decoration: none;
color: darken(@grey,40%);
font-size: .9em;
border-radius: .3em;
padding: 0 .3em 0 .3em;
}

#figs-per-page {
.default-text;
text-align: center;
}

.fig-notes {
.default-text;
font-size: .9em;
margin: .8em 0 0 0;
}

.default-text {
font-family: @body;
font-size: 1em;
color: @textcolor;
-webkit-font-smoothing: antialiased;
}

#figlist table {
margin: 0;
width: 100%;
border-collapse: collapse;
}

#figlist table td {
font-family: @body;
color: @textcolor;
-webkit-font-smoothing: antialiased;
font-size: .9em;
}

#figlist table tr td:last-of-type {
padding: 0 0 .3em 0;
}

#figlist table tr td:first-child {
color: @textcolor;
font-family: @featurebold;
padding: .3em 0 0 0;
width: 60%;
font-size: 1em;
}

#figlist table tr, #figlist table td {
display: block;
}

#figlist table tr {
display: table-row;
border-top: 1px solid lighten(@textcolor,70%);
}

#figlist table td {
display: table-cell;
padding: .5em;
}

#figlist blockquote {
margin: 0;
}

#figlist blockquote h4 {
margin: 0 0 .4em 0;
padding: 0;
color: @textcolor;
font-family: @featurebold;
}

#figlist blockquote h4:before, .figstatus:before {
font-family: 'Material Icons';
content: "portrait";
-webkit-font-feature-settings: 'liga';
position: relative;
top: .2em;
margin-right: .2em;
display: inline-block;
font-size: 1.4em;
}

.figstatus {
font-size: .8em;
position: relative;
left: .2em;
top: -.1em;
color: red;
font-weight: 700;
background: white;
border-radius: .3em;
padding: .2em;
}

.figstatus:before {
font-size: 1.2em;
content: "unpublished";
color: red;
}

.dropdown-header.fig-open .figstatus {
color: green;
}

.dropdown-header.fig-open .figstatus:before {
color: green;
font-size: 1.2em;
content: "done";
}

#figlist blockquote h4 a {
color: @blue;
}

#gen-ed-course-199 a {
text-decoration: none;
color: @textcolor;
}

.fig-myplan-icon {
width: 5em;
position: relative; 
top: 0;
}

.fig-sln-small:before {
content: '\00a0SLN\00a0';
}

.fig-sln-quiz:before {
content: '\00a0';
}

.fig-sln-small, .fig-sln-quiz {
color: darken(@grey,30%);
font-weight: normal;
font-family: @body;
font-size: .9em;
}

.fig-time:before, .fig-gened:before {
font-family: 'Material Icons';
-webkit-font-feature-settings: 'liga';
position: relative;
top: .2em;
margin-right: .2em;
display: inline-block;
font-size: 1.3em;
color: darken(@grey,30%);
}

.fig-time:before {
content: "schedule";
}

.fig-gened:before {
content: "task_alt";
}

#pagination-holder {
margin: 2.6em 0 1em 0;
text-align: center;
}

#pagination-holder ul {
padding: 0;
margin: 0;
}

#pagination-holder ul li {
display: inline;
list-style: none;
padding: 0;
margin: 0;
}

#pagination-holder ul li a {
text-decoration: none;
background: @neutral;
padding: .2em .6em .2em .6em;
font-size: .9em;
color: @textcolor;
border-radius: .3em;
}

#pagination-holder ul li.active a {
background: @gold;
color: @white;
}

#pagination-holder ul li a:hover {
background: @gold;
color: @white;
}

#pagination-holder ul li a:active {
background: darken(@gold,20%);
}

#no-results {
text-align: center;
font-size: 1.3em;
font-family: @nav;
margin: 1em 0 0 0;
background: #f4f4f4;
padding: 4em;
border: 1px solid lighten(@grey,10%);
}

#fig-results {
position: relative;
}

#figloading {
z-index: 1;
position: absolute;
width: 100%;
height: 92%;
background-image: url(/site/templates/js/figs/images/oval.svg);
background-repeat: no-repeat;
background-position: 50% 5%;
background-color: #f9f9f9;
}

#figedit {
font-family: @body;
margin-bottom: 3em;
padding: 1em;
border: 1px solid @grey;
border-radius: .3em;
}

#figedit > div {
display: grid;
grid-template-columns: auto 1fr;
grid-column-gap: 2em;
grid-row-gap: 1em;
.default-text;
margin: 1em 0 2em 0;
}

#figedit label {
font-style: oblique;
}

#figedit input {
font-family: @body;
}

#figedit > div:last-of-type {
display: block;
text-align: right;
}

#fig-editor-grid {
display: grid;
grid-template-columns: .8fr 3fr;
grid-column-gap: 2.2em;
margin-top: 1.6em;
}

#fig-editor-grid div {
font-family: @body;
}


#figexpandcollapse {
margin-left: 1em;
border: 0;
background: #eee;
cursor: pointer;
}

#figexpandcollapse:hover {
background: #fff;
}

#figexpandcollapse:after {
font-family: 'Material Icons';
content: "expand_more";
-webkit-font-feature-settings: 'liga';
position: relative;
top: 0.2em;
margin-left: 0.2em;
display: inline-block;
font-size: 1.2em;
}

#figexpandcollapse.figsearch_expand_collapse_collapsed:after {
content: "expand_less";
}



/**** Traditions **/


#traditions-top {
border-top: 1px solid lighten(@grey,10%);
position: relative;
}

#traditions-top .pagehead {
margin-top: .65em;
margin-bottom: .1em;
padding: 0;
}

.tradition-viewer {
background: @grey;
margin-top: .7em;
border-top: 1px solid lighten(@grey,10%);
border-bottom: 1px solid lighten(@grey,10%);
}

#trad-badge {
width: 12em;
position: absolute;
top: 2em;
right: 8em;
z-index: 1;
}

@media only screen and (max-width: 1345px) {
#trad-badge {
display: none;
}
}

div.tradition-slide {
width: 60%;
height: 29em;
opacity: .1;
transition: all .5s;
background-size: cover !important;
background-repeat: no-repeat !important;
background-position: center !important;
}

@media only screen and (max-width: 800px) {
div.tradition-slide {
width: 100%;
}
}

.tradition-viewer div.tradition-slide.is-selected {
opacity: 1;
}

.tradition-caption-header {
margin: 2.8em 0 .6em 0;
font-size: 1.14em;
text-transform: uppercase;
font-family: @display;
color: @purple;
}

.tradition-caption p {
font-size: 1em;
font-style: oblique;
margin: 0 0 .6em 0;
}

.flickity-page-dots {
bottom: -2.2em !important;
}

.tradition-viewer div blockquote, .tradition-viewer div h3 { display: none; }

#tradition-grid {
display: grid;
grid-template-columns: 1fr;
border-top: 1px solid @grey;
grid-column-gap: 4.1em;
margin-bottom: 4.4em;
margin-top: 1.8em;
}

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

.trad-thumb-grid {
display: grid;
grid-template-columns: auto 1fr;
grid-column-gap: 1.3em;
}

@media only screen and (max-width: 650px) {
.trad-thumb-grid {
display: block;
}
}

#tradition-grid h4 {
font-size: 1.46em;
margin: 2.6em 0 .3em 0;
font-family: @buttontext;
align-self: self-end;
grid-column: span 2;
}

#tradition-grid .trad-thumb-grid h4:first-of-type {
margin-top: 1.3em;
}

.trad-thumbnail {
border: 1px solid lighten(@grey,10%);
margin: .5em 0 0 0;
}

@media only screen and (max-width: 650px) {
.trad-thumbnail {
float: right;
margin: 0 0 1em 1em;
}
}

.trad-thumb-grid p:first-of-type {
margin: 0;
}

.trad-thumb-grid p:not(:first-of-type) {
margin: 1em 0 0 0;
}

#tradition-callouts blockquote {
margin: 0;
padding: 0;
}

#tradition-callouts blockquote p {
font-size: 1.1em;
border-left: .5em solid @neutral;
padding: 0 0 0 1em;
font-family: @feature;
margin: 0 0 1.4em 0;
}

#tradition-callouts h4 {
text-transform: uppercase;
color: @metallicgold;
margin: 1.7em 0 .8em 0;
font-family: @display;
}

#tradition-callouts .uw-btn {
margin-top: 3em;
}

.trad-after-everything {
margin-bottom: 5em;
border-top: 1px solid lighten(@grey,10%);
}


/ PODCAST */

.podcast_player_grid {
display: grid;
grid-template-columns: auto 3fr;
grid-column-gap: 1em;
}

#pagebody .podcast_player_grid img {
width: 5.2em;
}

.podcast_episode {
margin-top: 2.2em;
}

.podcast_episode div:first-of-type {
font-family: @body;
font-weight: 700;
}

.podcast_episode h2 {
margin-top: .6em; 
margin-bottom: .6em;
}

.podcast_episode audio {
align-self: center;
}


/ WEBINARS */

#webinar_grid {
display: grid;
grid-template-columns: 16em auto;
grid-column-gap: 2em;
margin-top: 2.6em;
margin-bottom: 3em;
}

#webinar_grid ul {
padding: 0 0 0 1em;
margin: 0;
}

#webinar_grid > div:first-of-type > div {
/* position: sticky;
top: 0; */
}

.body #webinar_grid ul li {
margin: .3em 0 .2em 0;
}

.body #webinar_grid section h3 {
margin-top: 1em;
margin-bottom: .2em;
font-size: 1.2em;
}

.body #webinar_grid > div > h3:first-of-type {
margin-top: 0;
}

.webinar-filter li span {
cursor: pointer;
}

.body .webinar-filter li {
line-height: 1.4em;
font-size: 1em;
display: flex;
flex-direction: row;
line-height: 1.3em;
padding-bottom: .3em;
}

.body .webinar-filter li input {
position: relative;
top: .2em;
margin-right: .6em;
}


#webinar_grid #search_box {
font-family: @body;
margin-bottom: .4em;
}

#event_list > div {
margin-bottom: 1.1em;
padding: 1em;
border: 1px solid @grey;
border-radius: .6em;
}

#event_list div, #event_list p, #event_list details {
.default-text;
}

#event_list div h4 {
margin: 0;
padding: 0;
}

#event_list h3 {
color: @purple;
margin: .4em 0 .2em 0;
padding: 0;
}

#event_list h4 {
color: @metallicgold;
}

.webinar-presenter {
font-style: oblique;
}

.event_info_grid {
display: inline-grid;
grid-template-columns: auto auto;
}

.event_info_grid > div:last-of-type {
padding: 1.6em 2.6em 0 1.6em;
}

#event_list p {
line-height: 1.4em;
margin: .4em 0 0 0;
}

.webinar_coming_soon {
margin-top: .8em;
font-weight: 700;
}

#event_list details summary, .webinar-disclosure summary {
font-weight: 700;
font-family: @nav;
padding: .3em;
margin: .8em 0 0 0;
background: @purple;
color: @white;
cursor: pointer;
transition: .2s;
}

#event_list details.goldbar summary {
background: @gold;
}

#event_list details summary:hover, .webinar-disclosure summary:hover {
background: lighten(@purple,8%);
}

#event_list details summary:active, .webinar-disclosure summary:active {
background: @purple;
}

#event_list iframe {
width: 100%;
}

#webinar-sidebar {
background: lighten(@grey,10%);
padding: 1em;
margin: 2.2em 0 0 0;
}

#webinar-sidebar p {
.default-text;
padding: 0;
margin: 0;
}

@media only screen and (max-width: 830px) {
#webinar_grid {
grid-column-gap: 2em;
}
#webinar_grid > div:first-of-type section#webinar-sidebar {
column-span: all;
margin: 1.4em 0 0 0;
}
}

@media only screen and (max-width: 700px) {
#webinar_grid {
display: block;
margin-top: 0;
}
#webinar_grid > div:first-of-type {
column-count: 3;
margin-bottom: 2em;
}
#webinar_grid > div:first-of-type section {
margin: 0;
-webkit-column-break-inside: avoid;
page-break-inside: avoid;
break-inside: avoid-column;
display: table;
}
#webinar_grid > div:first-of-type > div {
position: relative;
}
}

@media only screen and (max-width: 555px) {
#webinar_grid > div:first-of-type {
column-count: 2;
}
}

/*** FIG Home (new 2024) ***/


#universalhomeheader {
background: @purple;
color: @white;
width: 50%;
position: relative;
z-index: 1;
}

#universalhomeheader:after {
content: "";
position: absolute;
display: block;
width: 30em;
height: 100%;
top: 0;
right: 0;
z-index: -1;
background: @purple;
transform-origin: bottom left;
-ms-transform: skew(-15deg, 0deg);
-webkit-transform: skew(-15deg, 0deg);
transform: skew(-15deg, 0deg);
}

#universalhomeheader:before {
content: "";
position: absolute;
display: block;
width: 8em;
height: 100%;
top: 0;
right: -6em;
z-index: -1;
background: @purple;
opacity: .6;
transform-origin: bottom left;
-ms-transform: skew(-15deg, 0deg);
-webkit-transform: skew(-15deg, 0deg);
transform: skew(-15deg, 0deg);
}

#universalhomeheader a.uw-btn:before{
background-color: @metallicgold;
}

#universalhomeheader h1 {
color: @white;
font-size: 2.6em;
margin: .4em 0 0 0;
font-family: @nav;
}

#universalhomeheader p {
color: @white;
font-family: @feature;
font-size: 1.3em;
}

#universalhomeheader div {
padding: 3em 0 10% 6em;
}

#universalheadermobileonly {
display: none;
}

#universalhomeheader img {
display: none;
}

@media screen and (max-width: 960px) {
#universalhomeheader div {
padding: 2em;
}
}

@media screen and (max-width: 960px) {
#universalhomeheader {
width: 100%;
}
#universalhomeheader h1 {
margin: .6em 0 .6em 0;
}
#universalhomeheader img {
display: block;
width: 100%;
}
#universalhomeheader:before {
content: "";
width: 0;
height: 0;
}
#universalhomeheader:after {
content: "";
width: 0;
height: 0;
}
}

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

@media screen and (max-width: 895px) {
#fighome_card_holder {
grid-template-columns: 1fr;
grid-row-gap: 1em;
}
}

#fighome_card_holder img {
max-width: 7em;
margin-top: 1em;
}

#fighome_card_holder h3 {
text-transform: uppercase;
font-family: @displaynotcompressed;
font-size: 1.4em;
line-height: 1.2em;
}

#fighome_card_holder h3 span {
color: @purple;
}

#fighome_card_holder h4 {
color: @purple;
margin: 3em 1em 1em 1.6em;
padding: 0;
}

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

ul#fighome_card_holder > li {
text-align: center;
background: #fafafa;
border: 1px solid hsla(0, 0%, 44%, 0.2);
box-shadow: 0 1px 4px rgba(0,0,0,0.2);
padding: 0 3em 3em 3em;
}

ul#fighome_card_holder p,
#fighome_card_holder .back ul {
text-align: left;
}

#fighome_card_holder .back p, #fighome_card_holder .back li {
font-size: 16px;
margin-bottom: 16px;
}

#fighome_card_holder .front {
display: block;
}

#fighome_card_holder .back {
display: none;
position: relative;
}

#fighome_card_holder button {
border: 1px solid #eeeeee;
border-radius: 0;
padding: 1em;
cursor: pointer;
font-family: @body;
font-size: 1em;
transition: .2s;
background: @neutral;
}

#fighome_card_holder .front button:hover {
background-color: @purple;
color: @white;
}

#fighome_card_holder .front button:focus {
border: 1px solid @purple;
}

#fighome_card_holder .back button {
font-size: 1em;
font-weight: bold;
position: absolute;
top: -20px;
right: -20px;
background: @neutral;
padding: .6em 1em .6em 1em;
}

#fighome_card_holder .back button:hover {
background: @purple;
color: @white;
}

#fighome_card_holder .back button:active, #fighome_card_holder .front button:active  {
background: @gold;
}

#fighome_card_holder .back li {
list-style-type: disc;
padding: 0;
}

.angle_header {
background: @purple;
color: @white;
font-family: @displaynotcompressed;
font-size: 2.4em;
padding: 1em;
text-transform: uppercase;
height: 3em;
position: relative;
display: flex;
align-items: center;
margin: 1.2em 0 1em 0;
}

.angle_header span {
margin-left: 10%;
}

.angle_header span b {
color: @gold;
}

.angle_header:before {
content: "";
position: absolute;
display: block;
width: 100px;
height: 3.1em;
top: 0;
left: 0;
background: @white;
transform-origin: bottom left;
-ms-transform: skew(15deg, 0deg);
-webkit-transform: skew(15deg, 0deg);
transform: skew(15deg, 0deg);
}

.angle_header div {
font-size: 16px;
font-family: @featurebold;
padding: 0 0 0 1em;
}


.fighome_how_figs_work {
display: grid;
grid-template-columns: 1fr 2fr;
grid-column-gap: 3em;
margin-top: 1.6em;
}

.fighome_how_figs_work img {
width: 100%;
margin-top: 2.4em;
}

@media screen and (max-width: 780px) {
.fighome_how_figs_work {
grid-template-columns: 1fr;
}
.fighome_how_figs_work img {
max-width: 400px;
}
}

#fighomeleaderfeature {
background-color: lighten(@neutral,3%);
position: relative;
margin-top: 5em;
}

#fighomeleaderfeature p {
text-align: left !important;
}

#fighomeleaderfeature p strong {
font-weight: normal !important;
color: @purple;
font-family: @nav;
font-size: 1.2em;
}

#fighomeleaderfeature img {
clip-path: polygon(0 0, 100% 0%, 75% 100%, 0% 100%);
}

#fighomeleaderfeature > div {
position: absolute;
top: 0;
left: 0;
width: 90%;
margin: auto;
padding-left: 400px;
}

@media screen and (max-width: 895px) {
#fighomeleaderfeature img {
clip-path: polygon(0 0, 100% 0%, 100% 100%, 0% 100%);
display: block;
margin: auto;
}

#fighomeleaderfeature > div {
position: relative;
margin: auto;
padding-left: 0;
padding-bottom: 5em;
}

#fighomeleaderfeature {
padding: 3em 0 0 0;
}
}

#fighomeleaderfeature h2 {
font-size: 2em;
font-family: @displaynotcompressed;
text-transform: uppercase;
}

@media screen and (max-width: 895px) {
#fighomeleaderfeature .uw-btn {
position: relative;
margin-bottom: 0;
top: -.1em;
}
.fighome_how_figs_work img {
margin-top: 0;
}
.angle_header {
height: auto;
}
.angle_header div {
line-height: 26px;
}
}

#fighome_more {
display: inline-grid;
grid-template-columns: 1fr 1fr 1fr;
grid-column-gap: 6em;
}

@media screen and (max-width: 660px) {
#fighome_more {
grid-template-columns: auto;
grid-row-gap: 1.6em;
}
}

#fighome_more p, #fighome_more li {
text-align: left;
}

#fighome_more ul {
margin: 0;
padding: 0 0 0 1em;
}

#fighome_more h2 {
margin: 0 0 .6em 0;
padding: 0;
}


/ Generic Flip Cards adapted from FIG home page */

#fighome_card_holder.overview_flips {
display: grid;
margin: 2em 0 3em 0;
grid-template-columns: 1fr 1fr 1fr;
}

ul#fighome_card_holder.overview_flips > li {
padding: 0 1em 1em 1em;
}

#fighome_card_holder.overview_flips .back li {
font-size: 16px;
margin-bottom: 2px;
}

#fighome_card_holder.overview_flips .material-symbols-outlined {
display: block;
color: @purple;
font-size: 92px;
padding: 12px;
}

#fighome_card_holder.overview_flips button {
border: 1px solid #eeeeee;
border-radius: 0;
padding: 1em;
cursor: pointer;
text-transform: uppercase;
font-family: 'encode_sans_normalblack';
font-size: 20px;
color: @purple;
line-height: 1.2em;
transition: 0.2s;
background: #f0ede4;
}

#fighome_card_holder.overview_flips .back button {
padding: .6em 1em .6em 1em;
font-size: 18px;
}


#fighome_card_holder.overview_flips h4 {
margin: 1em 1em 1em 1.6em;
width: 80%;
}


@media only screen and (max-width: 985px) {
#fighome_card_holder.overview_flips {
grid-template-columns: 1fr 1fr;
}
}

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


/*** FIG Home ***/

#fighome_icon_blocks {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-column-gap: 2em;
margin: 2.2em 0 4em 4em;
}

#fighome_icon_blocks div {
display: grid;
grid-template-columns: 2fr 1.8fr;
}

@media only screen and (max-width: 950px) {
#fighome_icon_blocks div {
display: block;
}
}

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

#fighome_icon_blocks h2 {
margin: 0 1em 0 .6em;
line-height: 1.3em;
align-self: center;
font-family: @nav;
}

@media only screen and (max-width: 950px) {
#fighome_icon_blocks h2 {
text-align: center;
margin: .6em 0 0 0;
}
#fighome_icon_blocks {
margin: 2.2em 0 4em 0;
}
}

#fighome .body {
margin: 2em 0 3em 0;
}

#fighome_video {
display: grid;
grid-template-columns: 1fr 2fr;
grid-column-gap: 3em;
padding: 4em 0 4em 0;
}

#fighome_video .embed-container {
border: 1px solid @grey;
}

@media only screen and (max-width: 760px) {
#fighome_video {
display: block;
padding: 1em 0 3em 0;
}
#fighome_video p {
margin-bottom: 1.8em;
}
}

#fighome_featured_pages {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-column-gap: 3em;
margin: 1em 0 3em 0;
}

@media only screen and (max-width: 1100px) {
#fighome_featured_pages {
grid-template-columns: 1fr 1fr;
grid-row-gap: 2em;
}
}

@media only screen and (max-width: 550px) {
#fighome_featured_pages {
grid-template-columns: 1fr;
}
#fighome_icon_blocks {
grid-template-columns: 1fr;
}
#fighome_icon_blocks h2 {
margin-bottom: 2em;
}
#fighome_icon_blocks {
margin: 2.2em 0 0 0;
}
}

#fighome_featured_pages div {
background: @neutral;
text-align: center;
padding: 0 0 2em 0;
}

#fighome_featured_pages div img {
width: 100%;
margin-bottom: 1.8em;
}

#fighome_linksections {
display: inline-grid;
grid-auto-flow: column;
grid-column-gap: 1em;
grid-auto-columns: 20em;
margin: 0 0 3.6em 0;
}

@media only screen and (max-width: 950px) {
#fighome_linksections {
display: block;
}
#fighome_linksections ul {
margin-bottom: 2em;
}
}

.centeralign {
text-align: center;
}

#fighome_linksections ul {
text-align: left;
}

#fighome_linksections .material-icons {
color: @grey;
font-size: 2em;
position: relative;
top: 0.2em;
margin-right: 0.2em;
}

#fighome_linksections h3 {
color: @purple;
margin: 0 0 1em 0;
}

#orient-tips.fighomepage {
margin-top: 1.8em;
margin-bottom: 4em;
transform: none;
}

#orient-tips.fighomepage div:nth-of-type(2), #orient-tips.fighomepage div:nth-of-type(1) {
transform: none;
}

#orient-tips p {
text-align: left !important;
}

.fighome_leaderlink {
padding: 1.4em 0 0 0;
margin: 0;
}


/****  ALERT **/

#sitealert {
padding: .5em 2.5em 1em 2.5em; 
background: @neutral;
display: grid;
grid-template-columns: auto 1fr;
grid-column-gap: 1.6em;
}

#sitealert div {
align-self: center;
}

#sitealert span {
color: @gold; 
font-size: 4em;
}

@media only screen and (max-width: 750px) {
#sitealert {
display: block;
}
#sitealert span {
display: none;
}
#sitealert p:before {
font-family: 'Material Icons';
content: "warning";
-webkit-font-feature-settings: 'liga';
color: @gold;
font-size: 3em;
float: left;
margin-right: .4em;
}
}

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

blockquote.inline-alert p:before {
font-family: 'Material Icons';
content: "error";
-webkit-font-feature-settings: 'liga';
color: #ff0000;
font-size: 3em;
float: left;
margin-right: .4em;
margin-bottom: .5em;
line-height: 1em;
}

blockquote.normal-emphasis {
background: @neutral;
font-style: oblique;
padding: 1em 3em 1em 3em;
margin: 1em 0 1.4em 0;
}


/****  Orientation steps **/


#orientsteps {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 1.5rem;
  margin-top: 4em;
  margin-bottom: 4em;
}

/* base styling for each box */
.step {
  position: relative;
  padding: 1.5rem 1rem 1.5rem 1rem;
  border: 4px solid var(--border-color);
  background: white;
}

/* little header bar */
.step-label {
  position: absolute;
  top: -26px;
  left: 1rem;
  margin: 0;


  /* background + sizing */
  background: var(--border-color);
  padding: 0.4rem 1.8rem 0.6rem 1.8rem;

  /* slant the whole box −15° */
  transform: skewX(-15deg);
  z-index: 1;
}

.step-label span {
  /* un-skew the text +15° so it reads straight */
  display: inline-block;
  transform: skewX(15deg);

  /* typography */
  color: #fff;
  font-family: @displaynotcompressed;
  text-transform: uppercase;
  font-size: 1rem;
}

/* the arrow to the next box */
.step::after {
  content: '';
  position: absolute;
  top: 50%;
  right: -20px;              /* adjust to overlap grid gap */
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-top: 12px solid transparent;
  border-bottom: 12px solid transparent;
  border-left: 20px solid var(--border-color);
}

/* don’t draw an arrow on the last one */
.step.engage::after {
  /* display: none; */
}

/* color vars for each step */
.step.prepare { --border-color:#957d46; }
.step.attend  { --border-color:#421671; }
.step.engage  { --border-color:#666666; }

/* optional: style your inner headings and lists */
.step-body h3 {
  margin-top: 0;
  margin-bottom: 0.5rem;
  font-size: 1.1rem;
}
.step-body ul {
  margin: 0.5rem 0 0 1.2rem;
}


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

#orientsteps p, #orientsteps li {
font-size: .9rem;
line-height: 1.1rem;
}

#orientsteps li {
margin: 0 0 .6em .6em;
}

/* collapse to one column under 800px */
@media screen and (max-width: 800px) {
  #orientsteps {
    grid-template-columns: 1fr;
    grid-row-gap: 4em;
  }

  /* hide the right‑pointing arrows when stacked */
  .step::after {
    display: none;
  }
}



/* FOOTER /

.footerspace {
margin-bottom: 4em;
}

#pagefoot {
padding: 4em 0 3.4em 0;
background-color: @purple;
font-family: @feature;
color: @white;
}

#pagefoot a {
text-decoration: none;
}

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

#pagefoot h3 {
font-size: 1.2em;
margin: 0;
}

#pagefoot p {
font-family: @feature;
font-size: 16px;
color: @white;
margin: 0 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: 300px;
}

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

#footerconnect a {
font-size: 2em;
margin: 0 .2em 0 0;
}

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

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

#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: @small) {
#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;
}
}