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


/* Typography */

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

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

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

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

/* open sans */
@bodytext: 'Open Sans', sans-serif;

/* encode sans compressed */
@leadtextheavy: 'encodesanscompressed-600-semibold-webfont';
@nav: 'encodesanscompressed-800-extrabold-webfont', sans-serif;
@tenet: 'encodesanscompressed-900-black', sans-serif;
@featuretext: 'encode_sans_compressedregular', sans-serif;


/* global */

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

h2 {
font-family: @nav;
color: @purple;
font-weight: normal;
font-size: 2.4em;
margin: .8em 0 .6em 0;
}

h3 {
font-family: @nav;
color: @purple;
font-weight: normal;
font-size: 1.68em;
margin: 0;
}

h4 {
font-family: @tenet;
color: @purple;
text-transform: uppercase;
font-weight: normal;
}

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

a:hover {
color: @metallicgold;
}

p, li {
line-height: 1.7em;
font-size: 1.05em;
color: @textblack;
}

ul ul li {
font-size: unset;
}

blockquote ul ul {
margin: .2em 0 .4em 0;
}

blockquote h4 {
margin: 0 0 .4em 0;
}

blockquote h4:not(:first-child) {
margin: 2em 0 .4em 0;
}

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

svg {
margin: 1em 0 2em 0;
}

/* section rules — replaces the browser default groove.
The gold lead-in echoes the udub-slant accent used under headings. */
hr {
border: 0;
height: .15em;
margin: 2.8em 0 2em 0;
background: linear-gradient(to right, @gold 0, @gold 3.5em, lighten(@grey,4%) 3.5em, lighten(@grey,4%) 100%);
}

/* screen-reader-only text: visible to AT, removed from the visual layout */
.visually-hidden {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
clip: rect(0 0 0 0);
clip-path: inset(50%);
white-space: nowrap;
border: 0;
}

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


Page and sections

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

#nowiggle {
overflow-x: hidden;
width: 100%;
}

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

.menuinner {
width: 87%;
margin: auto;
}

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

@media screen and (max-width: 1000px) {
#pagegrid {
grid-template-columns: 2.5fr 1fr;
}
}

@media screen and (max-width: 780px) {
#pagegrid {
display: block;
}
}

.bodysection {
margin: 1.5em 0 1.6em 0;
}

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


Header

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

.purple {
background: @purple;
}

#headergrid {
display: grid;
grid-template-columns: 2fr 3fr .5fr;
padding: .6em 0 0 0;
}

#headergrid img {
width: 110%;
height: 110%;
position: relative;
top: 0;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


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


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

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

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

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

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

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

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

#menu li {
margin: 0;
}

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

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

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

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

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

.menu-no-children {
margin-right: .2em;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


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

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

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

    #menu li {
    float: left;
    }

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

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

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

    #menu .sub-menu li {
    }

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

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

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

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

/* page banner */

#pagebanner {
background-repeat: no-repeat;
background-size: cover;
background-position: bottom;
margin-bottom: 1em;
z-index: 0;
position: relative;
overflow: hidden;
}

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

#pagebanner h1 {
font-family: @tenet;
text-transform: uppercase;
color: @white;
font-weight: normal;
font-size: 3em;
text-shadow: .01em .01em .05em rgba(0,0,0,.5);
margin: 0;
}

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

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

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

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


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


Breadcrumb

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

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

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

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

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

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

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

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



/* blockquotes
(these predate the tab refactor and still apply to editor
content; the old accordion routine also leaned on them) */

blockquote {
padding: .4em 1em 1em 1em;
margin: 0;
}

blockquote p, blockquote ul {
margin-top: 0;
}


/* sidebar */

.sidebarcontactinfo {
background: darken(@neutral,3%);
margin: 3em 0 0 0;
padding: 2em;
}

.sidebarcontactinfo h3 {
text-transform: uppercase;
font-family: @tenet;
font-size: 22px;
margin: 0;
}

.sidebarcontactinfo .udub-slant span {
height: .4em;
width: 5em;
}


/* training area */

#transactiontable {
background: @purple;
}

#transactiontable td {
background: lighten(@grey,10%);
}

#transactiontable tbody tr:first-child td {
background: @purple;
text-align: center;
}

#transactiontable tbody tr:first-child td p {
color: @white;
}

#transactiontable tbody tr:nth-of-type(2) td {
padding: 0 1em 0 1em;
}

#training-grid {
display: grid;
grid-template-columns: 1fr 1fr;
grid-column-gap: 3em;
grid-row-gap: 1em;
padding-bottom: 2em;
align-items: center;
}

#training-content-blocks {
display: grid;
grid-template-columns: 1fr 1fr;
grid-column: span 2;
grid-column-gap: 5em;
grid-row-gap: 4.4em;
border-top: .01em solid @grey;
padding-top: 3em;
}

#training-grid img {
width: 100%;
}

#full-width-dropdown {
grid-column: span 2;   
}

#training-content-blocks div img {
width: 100%;
}

#training-content-blocks div h3 {
font-size: 1.4em;
margin: .6em 0 .4em 0;
}

#training-content-blocks div p {
margin: 0 0 1em 0;
}

@media only screen and (max-width: 730px) {
#training-grid {
display: block;
}
#training-content-blocks {
display: block;
margin-top: 3em;
}
#training-content-blocks div {
margin-bottom: 3em;
}
}




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


Tabs
APG tab pattern: markup from the tab template,
behavior in tabs.js. Replaces smarttabs.

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

.tabs {
display: grid;
grid-template-columns: 1fr 3fr;
margin-bottom: 2em;
margin-top: 1em;
}

.tabs [role="tablist"] {
position: relative;
left: .05em;
z-index: 2;
}

.tabs [role="tab"] {
display: block;
width: 100%;
margin: 0;
cursor: pointer;
padding: 1.5em 1em 1.5em 1em;
text-align: left;
color: @purple;
background: lighten(@grey,8%);
border: 0;
border-left: .01em solid @grey;
border-bottom: .01em solid @grey;
font-family: @nav;
font-size: 1.05em;
line-height: 1.7em;
}

.tabs [role="tab"]:first-child {
border-top: .01em solid @grey;
}

.tabs [role="tab"]:hover {
background: lighten(@grey,15%);
}

.tabs [role="tab"][aria-selected="true"] {
background: @white;
}

.tabs [role="tab"]:focus-visible {
outline: .2em solid @blue;
outline-offset: -.2em;
}

.tabpanels {
border: .01em solid @grey;
padding: 1.6em 2.6em 2.6em 2.6em;
}

.tabpanels [role="tabpanel"] ul {
padding: 0 0 0 2em;
}

.tabpanels [role="tabpanel"] h4 {
font-family: @nav;
}

/* the global h3 rule zeroes margins; panels always open with one,
so give it room before whatever follows */
.tabpanels [role="tabpanel"] > h3 {
margin-bottom: .8em;
}

/* fade-in only for users who haven't asked for reduced motion;
without this block panels are simply visible at full opacity */
@media (prefers-reduced-motion: no-preference) {
.tabpanels [role="tabpanel"] {
opacity: 0;
transition: opacity .3s ease;
}
.tabpanels [role="tabpanel"].is-active {
opacity: 1;
}
}

@media screen and (max-width: 781px) {
.tabs {
display: block;
}

.tabs [role="tablist"] {
left: 0;
}

.tabs [role="tab"] {
text-align: center;
border-right: .01em solid @grey;
}

.tabs [role="tab"][aria-selected="true"] {
background: @purple;
color: @white;
}

.tabpanels {
border-top: none;
padding: 1em;
}
}


/* disclosure sections — details/summary, site-wide
(tab panels, body copy, anywhere an editor drops one;
replaces dropdown-header/accordion-closed) */

.dropdown-holder {
margin: 1.3em 0 2.6em 0;
}

details {
margin-bottom: 1em;
}

summary {
cursor: pointer;
padding: 1em;
background: lighten(@lightgrey,10%);
color: @purple;
font-family: @nav;
font-size: 1.1em;
list-style: none;
}

summary::-webkit-details-marker {
display: none;
}

summary::after {
content: '';
float: right;
width: .45em;
height: .45em;
margin: .25em .3em 0 0;
border-right: .17em solid @purple;
border-bottom: .17em solid @purple;
transform: rotate(45deg);
}

details[open] > summary::after {
transform: rotate(225deg);
margin-top: .5em;
}

@media (prefers-reduced-motion: no-preference) {
summary::after {
transition: transform .3s;
}
}

summary:hover {
box-shadow: 0.12857em 0.12857em 0.12857em @lightgrey;
}

summary:active {
background: @lightgrey;
}

summary:focus-visible {
outline: .2em solid @blue;
outline-offset: -.2em;
}

details[open] {
padding: 0 1em 1em 1em;
}

details[open] > summary {
margin: 0 -1em .8em -1em;
}



/* buttons
The gold block and arrow hang off the right edge via absolute
positioning, so the element reserves room for them with
margin-right + max-width. Without that they overflow narrow
containers like the sidebar. @btn-overhang must stay in sync
with the :before / :after offsets below. */

@btn-overhang: 45px;

a.uw-btn, button.uw-btn {
padding: .7em 1.4em .7em 1.2em;
text-transform: uppercase;
background-color: @white;
font-family: @leadtextheavy;
color: @textblack;
display: inline-block;
position: relative;
line-height: 1.5em;
text-decoration: none;
font-size: .9em;
background: @neutral;
border: 0;
box-sizing: border-box;
margin-right: @btn-overhang;
max-width: calc(~"100% - @{btn-overhang}");
}

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

a.uw-btn:focus-visible, button.uw-btn:focus-visible {
outline: .2em solid @blue;
outline-offset: .15em;
}

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

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



/* footer */

.uw-footer {
background: url('/site/templates/img/footer.jpg') center bottom;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-color: @purple;
border-top: .5em solid @grey;
text-align: center;
color: @white;
margin-top: 3em;
}

.footer-wordmark img {
margin: 4em 0 3em 0;
width: 20em;
}

.uw-footer ul.footer-links {
margin: .3em 0 0 0;
}

.uw-footer ul.footer-links li {
list-style: none;
display: inline-block;
}

.uw-footer ul.footer-links li:last-child a:after {
display: none;
}

.uw-footer ul.footer-links li a {
font-family: @bodytext;
text-transform: capitalize;
color: @white;
text-decoration: none;
}

.uw-footer ul.footer-links li a:after {
content: "\00a0\00a0/\00a0\00a0";
opacity: .5;
}

.uw-footer ul.footer-links li a:focus {
color: @gold;
}

.uw-footer ul.footer-links li a:focus:after {
color: @white;
}

.uw-footer p {
color: @white;
}

p.contentinfo {
font-size: .9em;
padding-bottom: 3.4em;
padding-top: .8em;
}