@import url('https://fonts.googleapis.com/css?family=Roboto:300,400,500,600');
@import url('https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@700&display=swap');

:root{
    --border-radius: 90px;
    /* ARUP primary colors */
    --arup-red: #AE132A;
    --red-rock: #6d0020;
    --figwort: #DA1A32;
    --coal: #414042;
    --granite: #77787B;
    --badlands: #DEDFE0;
    /* Secondary */
    --hoodoo: #D37E57;
    --glass: #83A8C5;
    --aspen: #C6B1A1;
    --aspen-40: rgba(198, 177, 161, .4);
    /* AHAS */
    --blazer: #1A4051;
    /* Web */
    --dark-sky: #171717;
    --salt: #F5F5F5;
    --lab-blue: #3063B5;
    /* Semantic colors */
    --error: #EF3E24;
    --success: #127341;
    --warning: rgba(211, 126, 87, .1);
}

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
    margin:0;
    padding:0;
    border:0;
    outline:0;
    font:inherit;
    vertical-align:baseline;
}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, main {
    display:block;
}
ol, ul {
    list-style:none;
}
body {
    background: var(--salt);
    color: var(--dark-sky);
    font:1.12em "Roboto", sans-serif;
}
html, body {
    max-width:100vw;
}

/* Links */

h1>a, h1>a:visited, h2>a, h2>a:visited, h3>a, h3>a:visited, h4>a, h4>a:visited, h5>a, h5 >a:visited, h6>a, h6>a:visited{
    color: var(--red-rock);
    text-decoration:none !important;
}
a  {
    color:var(--lab-blue);
    text-decoration:none;

    &:visited {
        color: var(--lab-blue);
        text-decoration: none;
    }
    &:hover,
    &:visited:hover {
        color:var(--arup-red);
        transition:all 0.3s;
    }
    &:hover img,
    &:hover svg {
        transition:all 0.3s;
    }
    &:focus-visible:not(.button) {
        border-bottom: 2px solid var(--arup-red);
    }
    &:focus-visible img {
        border: 2px solid var(--figwort);
    }
}

.views-row .views-field-title a {
    color: var(--red-rock);
}
.views-row .views-field-title a:hover {
    color: var(--figwort);
}
#main {
    min-height: 500px;
    padding-bottom: 50px;
}

a.external:after {
    display:inline-block;
    background:url(../images/icons/external-link.svg) 0 0 no-repeat;
    background-size:12px;
    content:'';
    margin:0 0 2px 5px;
    width:12px;
    height:12px;
}
::-webkit-scrollbar {
    height:15px;
    width:15px;
}
::-webkit-scrollbar-track {
    background:#eee;
}
::-webkit-scrollbar-thumb {
    background:#aaa;
}
::-webkit-scrollbar-thumb:hover {
    background:#5C5B5D;
}

.block-link{
    display: block;
    line-height: 1.6;
    text-decoration: none;
}.block-link>a, a.block-link {
    text-decoration: none;
}

.dark-gray.block-link:hover, a:hover .dark-gray.block-link {
    color: var(--dark-sky);
}

/* Typography */
b,
strong {
    font-weight:bold;
}
i,
em {
    font-style:italic;
}
h1 {
    clear:both;
}
h1 {
    font-size:2em;
    font-weight:300;
    line-height:1.2em;
    padding:20px 0 20px 0;
    color: var(--dark-sky);
}
h2 {
    color: var(--coal);
    font-size:1.7em;
    line-height:1.2em;
    padding:20px 0 20px 0;
}
h3 {
    font-size:1.45em;
    line-height:1.6em;
    padding:10px 0 10px 0;
}
h4 {
    font-size:1.2em;
    font-weight:400;
    line-height:1.6em;
    padding:10px 0 10px 0;
}
h5 {
    font-size:1.1em;
    font-weight:bold;
    line-height:1.6em;
    padding:10px 0 10px 0;
}
h2 strong,
h3 strong {
    font-weight:400;
}
h2 svg,
h3 svg {
    margin:0 20px 0 0;
}
p {
    line-height:1.6em;
    padding:0 0 20px 0;
}
blockquote {
    background:#f7f7f7;
    line-height:1.6em;
    padding:20px;
}
img {
    max-width:100%;
    height:auto;
}
img,
svg {
    vertical-align:middle;
}
small {
    font-size:.9em;
}
sub,
sup {
    font-size:75%;
    line-height:0;
    position:relative;
    vertical-align:baseline;
}
sup {
    top:-0.5em;
}
sub {
    bottom:-0.25em;
}
hr {
    border:0;
    clear:both;
    color:var(--badlands);
    background-color:var(--badlands);
    height:1px;
    margin:2% 0;
}
code, kbd, pre, samp {
    background:#f8f8f8;
    font-family:monospace, monospace;
    white-space:pre-wrap;
}
pre {
    clear:both;
    margin:2% 0;
}
abbr, acronym {
    border-bottom:1px dotted #aaa;
}
ins {
    padding:1px;
    background-color:var(--salt)adc;
    text-decoration:none;
}
figure p{
    padding: 0 !important;
}
.header-image {
    position: relative;
    margin: 0 auto;
}
.header-text {
    position:absolute;
    top: 50%;
    left: 75%;
    transform: translate(-50%, -50%);
    background: rgb(0, 0, 0);
    background: rgba(255,255, 255, 0.8);
    width: 50%;
    padding: 4%;
    font-size: 1.5vw;
    line-height: 1.4;
}
.mobile-only {
    display: none;
}

/* Social Media Icon Share Styles */
.field--type-social-media {
    margin:auto;
    max-width:1170px;
    text-align:right;
}
.social-media-sharing li {
    margin-right:0;
}
.social-media-sharing .share img {
    width:25px;
}
.social-media-sharing .share svg {
    width:25px;
    height:25px;
}

/* Google Custom Search Styles */
.gsib_a,
.cse .gsc-control-cse,
.gsc-control-cse {
    padding:0 !important;
}
.gsc-input,
.gsc-search-box tr,
.gsc-search-box td,
.gsc-control-cse {
    border:none !important;
    background:none !important;
}
.gsc-search-button-v2,
.gsc-search-button-v2:hover,
.gsc-search-button-v2:focus {
    border:none !important;
}
.gsc-input-box, .gsc-input-box-hover, .gsc-input-box-focus {
    text-indent:0 !important;
}
.gsib_b {
    padding:0 !important;
}
.gsc-completion-container {
    font-family:"Roboto", sans-serif !important;
}
a.gsst_a {
    margin:0 !important;
    padding:0 !important;
}
.gscb_a {
    padding:0 !important;
    vertical-align:middle !important;
    line-height:0;
}
.gsc-search-button {
    margin-left: -20px !important;
}
#top form.gsc-search-box {
    margin: 0 auto !important;
    width: 70% !important;
}
.gsc-search-button-v2, .gsc-search-button-v2:hover, .gsc-search-button-v2:focus {
    border-color: #fff !important;
    background-color: #fff !important;
    display: block;
    background-image: url(/themes/arup/images/icons/search.svg) !important;
    background-repeat: no-repeat;
    background-size: 20px 20px;
    background-position: center left;
    height: 50px;
    width: 50px;
}
.gsc-search-button svg {
    display: none;
}
.toggle-gcs {
    cursor: pointer;
    background-image: url("/themes/arup/images/icons/search.svg");
    display: block;
    background-position: center bottom;
    background-size: 20px;
    content: '';
    width: 20px;
    height: 20px;
    transition: all .3s;
}
.toggle-gcs:hover {
    background-image: url("/themes/arup/images/icons/search-red.svg");
}
.toggle-gcs.toggle-close {
    background-image: url("/themes/arup/images/icons/circle-x-red.svg");
}
.toggle-gcs-container{
    display: none;
}
.gsc-webResult.gsc-result {
    padding: 20px 5px !important;
}
table.gsc-above-wrapper-area-container, .gsc-above-wrapper-area  {
    border: none !important;
}
.gsc-webResult.gsc-result:hover {
    border-color: #eee !important;
    background-color: #eee !important;
}

.width100 {width:100%;} .width95 {width:95%;} .width90 {width:90%;} .width85 {width:85%;} .width80 {width:80%;} .width75 {width:75%;} .width70 {width:70%;} .width65 {width:65%;} .width60 {width:60%;} .width55 {width:55%;} .width50 {width:50%;} .width48 {width:48%;} .width45 {width:45%;} .width40 {width:40%;} .width35 {width:35%;} .width30 {width:30%;}  .width25 {width:25%;} .width22 {width:22%;} .width20 {width:20%;} .width18 {width:18%;} .width16 {width:16%;} .width15 {width:15%;} .width10 {width:10%;} .width5 {width:5%;} .width4 {width:4%;} .width3 {width:3%;} .width2 {width:2%;} .width1 {width:1%;}

:before,
:after {
    box-sizing:border-box;
}
#navigation .logo {
    float:left;
    padding:10px 20px 10px 0;
}
.feedback-modal .feedback-link {
    color:var(--salt) !important;
    font-weight:bold;
    background: var(--dark-sky);
    margin:0;
    overflow:hidden;
    position:fixed;
    border-top-left-radius:10px;
    border-top-right-radius:10px;
    bottom:0;
    right:10%;
    z-index:9999;
    padding:.3% 1%;
    text-decoration:none;
    cursor:pointer;
}

/* Footer */
#footer {
    clear: both;
    background: var(--dark-sky);
    color: var(--salt);
    padding: 50px 0 0 0;
}
#footer .logo {
    padding:0 0 10px 0;
}
#footer h5 {
    font-size: .98em;
    color: var(--salt);
    font-weight: normal;
}
#footer ul {
    min-height:100px;
}
#footer ul li {
    font-size:.9em;
    list-style:none !important;
    margin: 25px 0 !important;
}
#footer a {
    color:var(--salt);
    text-decoration: none;
}
#footer a:hover {
    /*color: var(--glass);*/
    color: #EA485B; /*lightened figwort*/
}
#footer .cookie-message {
    background:rgba(23, 23, 23, .8);
    color:var(--salt);
    position:fixed;
    bottom:0;
    right:0;
    left:0;
    display:none;
    padding:10px 0;
    z-index:1100;
}
#footer .cookie-message a {
    color:#94d6dc !important;
}
#footer .cookie-message.is-active {
    display:block;
}
#footer .cookie-message .button {
    color:var(--salt) !important;
    border:1px solid var(--salt);
    padding:5px 10px;
    width:auto;
}
#footer .cookie-message .button:hover {
    color:var(--dark-sky) !important;
}
#footer li a[target="_blank"]:after {
    cursor: pointer;
    background-image: url("/themes/arup/images/icons/external-link-rev.svg") ;
    background-repeat: no-repeat;
    position: relative;
    left: 5px;
    top: -5px;
    display: inline-block;
    background-position: center top;
    background-size: 10px;
    content: '';
    width: 10px;
    height: 10px;
}

#footer li a[target="_blank"]:hover:after {
    background-image: url("/themes/arup/images/icons/external-link-red.svg");
}
li .chat {
    cursor: pointer;
}
li .chat:hover {
    color: var(--arup-red);
}
#copyright {
    padding: 40px;
}
.footer-overlay {
    position: relative;
    margin-top: 60px;
    width: 100%;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: hidden;
}
.footer-top-bar {
    background-color: var(--red-rock);
    height: 100px;
    width: 50%;
    border-top-left-radius: 200px;
    position: absolute;
    top: 0;
    right: 0;
    z-index: 0;
}
.footer-middle-bar {
    background-color: var(--arup-red);
    height: 150px;
    width: 90%;
    justify-self: right;
    border-top-left-radius: 200px;
    position: relative;
    z-index: 10;
    top: 20px;
}
.footer-bottom-bar {
    background-color: var(--salt);
    height: 100px;
    width: 70%;
    justify-self: left;
    border-top-right-radius: 200px;
    opacity: .3;
    position: absolute;
    bottom: -60px;
    z-index: 20;
    overflow: hidden;
}


/* Basic */
.xsmall {font-size:.8em;}  small, .small {font-size:.9em;} .normal {font-size:1em; font-weight:normal;} .large {font-size:1.1em;} .xlarge {font-size:1.2em;} .xxlarge {font-size:1.5em;}
.clear {
    clear:both;
}
.no-float {
    float:none;
}
.left {
    float:left;
}
.right {
    float:right;
}
.middle {
    display:block;
    float:none;
    margin:auto;
}
.left-align {
    text-align:left;
}
.right-align {
    text-align:right;
}
.center {
    text-align:center;
}
.badge {
    display:inline-block;
    font-size:.8em;
    padding:2px 5px;
}
.highlight {
    background:#e8f5f6;
    font-weight:bold;
}
.indent {
    padding:0 0 0 75px;
}
.hide,
.visually-hidden {
    display:none;
}
.show {
    display:block !important;
}
.responsive {
    max-width:100%;
    height:auto;
}
#block-backtotop {
    height: 0;
}
#back-to-top {
    cursor:pointer;
    bottom: 110px;
    right: 43px;
    opacity:0;
    position:fixed;
    transition:all 0.3s;
    z-index:20;
}
#back-to-top.show {
    opacity:1;
}
.counter-text {
    font-size: 2.1em;
    margin-top: 10px;
    font-weight: 100;
    padding-bottom: 0;
}.counter {
     font-weight: 600;
 }

/* Top Search */
#top-search {
    padding:20px 0;
}
.search-box {
    padding:11px;
}
.search-box:hover {
    border-color:var(--arup-red);
}
.search-box:focus {
    border-color:var(--arup-red);
    outline:0;
}
.browse-tests {
    padding:10px 0;
}
.browse-menu {
    text-align:center;
}
.browse-menu a {
    display:block;
    float:left;
    padding:0 0 20px 0;
    width:20px;
}
.browse-menu .other {
    width:auto !important;
    margin:0 20px 0 0;
}

/*Search Filter*/
/* clears the ‘X’ from Internet Explorer */
input[type=search]::-ms-clear { display: none; width : 0; height: 0; }
input[type=search]::-ms-reveal { display: none; width : 0; height: 0; }
/* clears the ‘X’ from Chrome */
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration { display: none; }
.search-inset {
    position: relative;
    font-size: 12pt;
}
.search-inset {
    display: inline-block;
}
.search-inset input {
    width: 300px;
    height: 32px;
}
.search-inset .inset-search-icon {
    position: absolute;
    top: 10px;
    left: 10px;
}
.search-inset .inset-search-icon {
    left: auto;
    right: 10px;
}
p.search-item {
    display: inline-block;
    width: 31.5%;
    margin: 0;
    line-height: 1.2;
    color: var(--granite);
    border: solid 3px var(--salt);
    vertical-align: middle;
}
.search-items {
    color: #000;
    display: block;
    clear: both;
}
.search-items .header {
    width: 99%;
    padding-top: 15px;
}
.search-items .header p {
    padding: 5px;
    font-weight: bold;
}
p.search-item {
    padding: 0;
}
.search-item span {
    padding: 10px 5px;
    font-size: small;
    display:block;
}

/* Top Page navigation */
.top-nav-container {
    width: 90%;
    max-width: 1170px;
    position: relative;
    padding-top: 5px;
}
.top-nav-menu > div {
    display: inline-block;
    height: 60px;
}
.top-nav-list {
    position: absolute;
    right: 0;
}
.header-logo {
    padding-top: 5px;
}
.header-logo a{
    padding-bottom: 15px;

    &:focus-visible {
        border-bottom: none;
    }
}
.top-nav-menu {
    display: flex;
    column-gap: 30px;
    align-items: center;
    height: 50px;
}
.top-nav-link {
    font-size: 14px;
    color: var(--coal);
    text-decoration: none;
    position: relative;
}
a.top-nav-link, a.top-nav-link:visited {
    color: var(--coal);
}
.menu-no-link {
    text-wrap: nowrap;
}
.menu-no-link:focus-visible, .submenu-no-link:focus-visible {
    border-bottom: 2px solid var(--figwort);
}
.top-nav-link:hover {
    color: var(--arup-red);
}
li.megamenu-item.top-level-menu {
    margin-top: -2px;
}
li.megamenu-item.top-level-menu > p{
    padding:0;
}
.top-nav-link::after {
    content: "";
    width: 0;
    height: 2px;
    background: var(--arup-red);
    position: absolute;
    bottom: -5px;
    left: 0;
    transition: 0.3s ease;
}
.top-nav-link:hover::after {
    width: 100%;
    transition: 0.3s ease;
}
.top-nav-search {
    width: 20px;
    height: 20px;
}


/* Mega menu */
/* header mega menu */
.external:after, a.external:after {
    cursor: pointer;
    background-image: url("/themes/arup/images/icons/external-link-red.svg") ;
    background-repeat: no-repeat;
    position: relative;
    left: 5px;
    top: -5px;
    display: inline-block;
    background-position: center top;
    background-size: 10px;
    content: '';
    width: 10px;
    margin-right: -32px;
    height: 10px;
}
a.external:after {
    left: 0;
}
.external:hover:after, a:hover .external:after{
    background-image: url("/themes/arup/images/icons/external-link-red.svg") ;
}
.menu-header {
    background: var(--dark-sky);
    width: 100%;
    border-bottom: 3px solid var(--arup-red);
}
.menu-header a {
    text-decoration: none;
    color: var(--red-rock);
}.menu-header a:hover {
     color: var(--arup-red);
 }
.header-megamenu-nav {
    display: flex;
    width: 90%;
    height: 37px;
    max-width: 1170px;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-evenly;
    align-items: center;
    align-content: flex-end;
    margin: 0 auto;
    position: relative;
}
.header-megamenu-nav .megamenu-item .menu-no-link {
    color: var(--salt);
    padding: 6px 40px 8px 40px;
    cursor: pointer;
    font-weight: normal;
    font-size: 16px;
    background-size: 100% 200%;
    background-image: linear-gradient(to top, var(--salt) 50%, var(--dark-sky) 50%);
    -webkit-transition: background-position .1s;
    -moz-transition: background-position .1s;
    transition: background-position .1s;
}
.header-megamenu-nav .megamenu-item .menu-no-link:hover {
    background-image: linear-gradient(to top, var(--dark-sky) 50%, var(--coal) 50%);
}
.header-megamenu-nav .megamenu-item.active .menu-no-link:hover {
    background-image: linear-gradient(to top, var(--salt) 50%, var(--dark-sky) 50%);
}
.header-megamenu-nav .megamenu-item.active .menu-no-link {
    color: var(--coal);
    text-wrap: nowrap;
    background-position: 0 100%;
}
.header-megamenu-nav .megamenu-item .menu-link a {
    color: var(--salt);
    padding: 0;
    cursor: pointer;
    font-weight: normal;
    font-size: 12pt;
    background-size: 100% 200%;
    background-image: linear-gradient(to top, var(--salt) 50%, var(--dark-sky) 50%);
    -webkit-transition: background-position .2s;
    -moz-transition: background-position .2s;
    transition: background-position .2s;
}
.header-megamenu-nav .megamenu-item .menu-link a {
    color: var(--salt);
    padding: 5px;
    cursor: pointer;
    font-weight: normal;
    font-size: 12pt;
}
.header-megamenu-nav .megamenu-item.active .menu-link a {
    background-position: 0 10%;
    color: var(--salt);
}
.megamenu-item .megamenu-submenu {
    display: none;
    position: absolute;
    width: 100%;
    background: var(--salt);
    min-height: 500px;
    top: 35px;
    left: 0;
    z-index: 100;
    -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
    border-bottom: var(--arup-red) 3px solid;
}
.megamenu-item.active .megamenu-submenu {
    display: flex;
}
.dropdown-menu-left {
    width: 25%;
    background: var(--badlands);
    padding-top: 10px;
    font-size: 16px;
}
.dropdown-menu-right {
    width: 70%;
}

/* Submenu Navigation */
.megamenu-submenu .ltd-search-form input {
    width: 90px;
    padding: 12px 100px 12px 10px;
}
.megamenu-submenu .ltd-search-form button {
    border: none;
    height: 42px;
    padding: 0 25px !important;
    position: absolute;
    top: 5px;
    right: -5px;
}
.megamenu-submenu .ltd-search-form button {
    border: none;
}
form.ltd-search-form > p {
    position: relative;
}
.menu-header p {
    padding: 0 !important;
}
.mega-menu-first {
    margin-left: 5%;
}
.mega-menu-last {
    margin-right: 5%;
}
.submenu-no-link{
    padding: 15px 0 15px 10%;
    display: inline-block;
    color: var(--dark-sky);
    line-height: 1.3;
    cursor: pointer;
    position: relative;
    /*background: var(--badlands);*/
    background: linear-gradient(to right, var(--salt) 50%, var(--badlands) 50%);
    background-size: 200% 100%;
    background-position: right bottom;
    transition: all .1s ease;
    width: 90%;
}
.submenu-no-link span {
    padding-right: 40px;
    display: block;
    width: 80%;
}
.submenu-no-link:after{
    background-image: url("/themes/arup/images/icons/caret-right.svg") ;
    background-repeat: no-repeat;
    position: absolute;
    right: 15px;
    top: 0;
    bottom: 0;
    margin: auto;
    background-position: center top;
    background-size: 15px;
    content: '';
    width: 15px;
    height: 15px;
}
.submenu-no-link.active {
    background-position: left bottom;
    color: var(--red-rock);
}
.submenu-no-link.active:after{
    background-image: url("/themes/arup/images/icons/red-caret.svg") ;
    right: 10px;
    transition:right .4s linear;
    background-size: 20px;
    width: 20px;
    height: 20px;
}
.submenu-content {
    display: none;
}
.megamenu-item.active .submenu-content.active  {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: normal;
    align-items: stretch;
    align-content: normal;
    width: 100%;
    height: 80%;
    padding: 5% 0 1% 0;
}
.megamenu-item.active  .submenu-content-rt-pnl, .megamenu-item.active .submenu-content-lt-pnl {
    display: block;
    flex-grow: 0;
    flex-shrink: 1;
    width: 50%;
    flex-basis: auto;
    align-self: auto;
    padding: 2% 5%;
}
.submenu-content-rt-pnl a, .submenu-content-lt-pnl a {
    padding-bottom: 5px;
    margin-bottom: 15px;
    display: block;
}
.megamenu-item.active .submenu-content-rt-pnl a, .megamenu-item.active .submenu-content-rt-pnl .block-link, .megamenu-item.active .submenu-content-lt-pnl a, .megamenu-item.active .submenu-content-lt-pnl .block-link{
    font-size: 16px;
}
.megamenu-item.active .submenu-content-lt-pnl .small, .megamenu-item.active .submenu-content-rt-pnl .small {
    font-size: 14px;
}
.megamenu-item.active .submenu-content-lt-pnl .xsmall, .megamenu-item.active .submenu-content-rt-pnl .xsmall {
    font-size: 13px;
}
.submenu-content p {
    line-height: 1.5em;
    padding: 0 0 15px 0;
}
.submenu-content .padding-top {
    padding-top: 50px;
}.submenu-content .padding-top10 {
     padding-top: 10px;
 }.submenu-content .padding-top20 {
      padding-top: 20px !important; }

/* Secondary Sub Navigation (Tabs) */
.menu {
    margin:0;
    position:relative;
}
.menu li {
    list-style:none;
    margin:0;
    position:relative;
}
.menu li a {
    display:block;
    float:left;
    font-weight:normal;
    padding:15px 20px;
}
.menu li.menu-item--active-trail a,
.menu li.is-active a {
    color:var(--coal);
    font-weight:bold;
}
.menu li.menu-item--active-trail ul li a,
.menu li.is-active ul li a {
    background:#f7f7f7;
    color:var(--coal);
    font-weight:normal;
    margin:0;
    padding:7px 7px 7px 30px;
}
.menu li.menu-item--active-trail ul li a:hover,
.menu li.is-active ul li a:hover {
    background:#eee;
}
.menu li.menu-item--active-trail ul li a:active,
.menu li.is-active ul li a:active {
    background:#f7f7f7;
}
.menu li.menu-item--active-trail ul li.menu-item--active-trail a,
.menu li.is-active ul li.is-active a {
    background:#f7f7f7;
    color:var(--coal);
    font-weight:bold;
}
.menu li.menu-item--active-trail ul li.menu-item--active-trail ul li a,
.menu li.is-active ul li.is-active ul li a {
    background:#f7f7f7;
    color:var(--coal);
    font-weight:normal;
    margin:0;
    padding:5px 10px 5px 50px;
}
.menu li.menu-item--active-trail ul li.menu-item--active-trail ul li a:hover,
.menu li.is-active ul li.is-active ul li a:hover {
    background:#eee;
}
.menu li.menu-item--active-trail ul li.menu-item--active-trail ul li.menu-item--active-trail a,
.menu li.is-active ul li.is-active ul li.is-active a {
    color:var(--coal);
    font-weight:bold;
}
.menu li.menu-item--active-trail ul li.menu-item--active-trail ul li.menu-item--active-trail ul li a,
.menu li.is-active ul li.is-active ul li.is-active ul li a {
    background:#f7f7f7;
    color:var(--coal);
    font-weight:normal;
    margin:0;
    padding:5px 10px 5px 70px;
}
.menu li.menu-item--active-trail ul li.menu-item--active-trail ul li ul li a:hover,
.menu li.is-active ul li.is-active ul li.is-active ul li a:hover {
    background:#eee;
}

/*Magnify page svg animate */
.logo-bg {
    width: 100%;
    background: url("/files/images/magnify/2025/cover-image.jpg") no-repeat;
    background-position: center;
    background-size: cover;
    height: 580px;
    position: relative;
}
.logo-bg.summer2025 {
    background: url("/files/images/magnify/2025/cover-image.jpg") no-repeat;
}
.logo-bg .logo svg {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 819px;
    height: 248px;
    transform: translate(-50%, -50%);
}
@keyframes draw {
    to {
        stroke-dashoffset: 0;
    }
}
@keyframes undraw {
    0% {
        stroke-dashoffset: 0;
    }
    100% {
        stroke-dashoffset: 800;
    }
}
.logo-bg .logo path, .logo-bg .logo circle, .logo-bg .logo line {
    stroke-width: 4px;
    stroke: var(--salt);
    fill: none;
}
path.microscope, circle.microscope, line.microscope {
    stroke-dasharray: 800;
    stroke-dashoffset: 800;
    animation: draw 5s 1 forwards;
    animation-delay: .5s;
}
path.undraw, circle.undraw, line.undraw {
    stroke-dasharray: 800;
    stroke-dashoffset: 800;
    animation: undraw 1s 1 forwards;
}
line.underline {
    stroke-width: 3px;
    stroke-dasharray: 800;
    stroke-dashoffset: 800;
    animation: draw 3s 1 forwards;
    animation-delay: 2s;
}
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
    line.underline {
        stroke-dasharray: 0;
        stroke-dashoffset: 0;
        animation: none;
    }

    path.undraw, circle.undraw, line.undraw {
        display: none;
    }

    path.microscope, circle.microscope, line.microscope {
        stroke-dasharray: 0;
        stroke-dashoffset: 0;
        animation:none;
    }
}

/* Boxes */
.box {
    border:1px solid var(--badlands);
    padding:30px;
}
.col .box {
    margin:-5px 0 0 0;
    padding:30px;
}

/* Loading spinner*/
.load-spinner {
    width: 30px;
    height: 30px;
    position: relative;
    margin: 20px 10px 10px 10px;
    border: 5px solid #aaa;
    border-radius: 50%;
    border-top-color: var(--granite);
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Margin and Padding */
.margin {
    margin:50px;
}
.margin-top {
    margin-top:50px;
}
.margin-bottom {
    margin-bottom:50px;
}
.margin-left {
    margin-left:50px;
}
.margin-right {
    margin-right:50px;
}
.margin-right10 {
    margin-right: 10px;
}
.margin-none {
    margin:0 !important;
}
.overflow-hidden {
    overflow: hidden;
}
.table-display, .css-table{
    display: table;
    width: 100%;
}
.css-table-cell, .table-display-cell {
    display: table-cell;
    vertical-align: top;
    font-size: medium;
}
.css-table-cell .center p{
    height: 50px;
    display: inline-block;
    vertical-align: -15px;
    font-weight: bold;
}
.cell50 {
    display: table-cell;
    width: 50%;
    padding: 10px;
}

.calendar-entry {
    margin-bottom: 50px;
}
.calendar-entry p:first-of-type {
    border-bottom: 2px solid #efefef;
    background: #efefef;
    padding: 15px;
    margin-bottom: 20px;
    vertical-align: middle;
}
.calendar-entry ul {
    padding-left: 60px;
}

/* Padding */
.padding {padding:50px;}.padding10 {padding:10px;}.padding20 {padding:20px;}.padding25 {padding:25px;}.padding-right25 {padding-right: 25px;}.padding30 {padding:30px;}.padding-top {padding-top:50px;}.padding-bottom {padding-bottom:50px;}.padding-bottom10 {padding-bottom: 10px;}.padding-bottom20 {padding-bottom: 20px;}.padding-left {padding-left:50px;}.padding-left25 {padding-left:25px;}.padding-right {padding-right:50px;}.padding-none {padding:0 !important;}.no-padding {padding: 0 !important;}.padding-top5 {padding-top: 5px;}.padding-top10 {padding-top: 10px;}.padding-top15 {padding-top: 15px;}.padding-top20 {padding-top: 20px;}.padding-top25 {padding-top: 25px;}.padding-top50 {padding-top: 50px;}.padding-top65 {padding-top: 65px;}.padding-top75 {padding-top: 75px;}.padding-top80 {padding-top: 80px;}.padding-top100 {padding-top: 100px;}.padding-top150 {padding-top: 150px;}

/* Colors */
.red, a.red, .red > a {
    color:var(--arup-red);

}
.red path {
    fill:var(--arup-red);
}
a:hover .red {
    color:#6d0020;
}
a:hover .red path {
    fill:#6d0020;
}
a img:hover{
    opacity: 1;
}

.red-bg {
    background:var(--arup-red);
    border-color:var(--arup-red);
}
.dark-red {
    color:#6d0020;
}
.dark-red path {
    fill:#6d0020;
}
.dark-red-bg {
    background:#6d0020;
    border-color:#6d0020;
}
.red-gradient-bg {
    background-image:linear-gradient(to right, var(--arup-red), #6d0020);
    color:var(--salt);
}

/* Teal is no longer in the corporate color palette. Do not use */
.teal {
    color:#007d91;
}
a:hover .teal {
    fill:#006472;
}
.teal path {
    fill:#007d91;
}
a:hover .teal path {
    fill:#006472;
}
.teal-bg {
    background:#007d91;
    border-color:#007d91;
}
.dark-teal {
    color:#006472;
}
.dark-teal path {
    fill:#006472;
}
.dark-teal-bg {
    background:#006472;
    border-color:#006472;
}
.teal-gradient-bg {
    background-image:linear-gradient(to right, #007d91, #006472);
    color:var(--salt);
}

/* Grays */
.white {
    color: #fff;
}
.white a {
    color: #CEDCE7; /*glass at 40%*/
}
.white a:hover {
    color: var(--salt);
}
.white path {
    fill:#fff;
}
.white-bg {
    background:#fff;;
    border-color:#fff;;
}
.transparent-bg {
    background-color:rgba(255,255,255,0.9);
    border:none;
}
.light {
    color:#eee;
}
.light path {
    fill:#eee;
}
.light-bg {
    background:#eee;
    border-color:#eee;
}
.light-gray {
    color:var(--badlands);
}
.light-gray path {
    fill:var(--badlands);
}
.light-gray-bg {
    background:var(--badlands);
    border-color:var(--badlands);
}
.medium-gray {
    color:#aaa;
}
.medium-gray path {
    fill:#aaa;
}
.medium-gray-bg {
    background:#aaa;
    border-color:#aaa;
}
.gray {
    color: var(--granite);
}
.gray path {
    fill: var(--granite);
}
.gray-bg {
    background: var(--granite);
    border-color: var(--granite);
}
.dark-gray {
    color:var(--coal);
}
.dark-gray path {
    fill:var(--coal);
}
.dark-gray-bg {
    background:var(--coal);
    border-color:var(--coal);
}
.darker-gray {
    color:var(--dark-sky);
}
.darker-gray path {
    fill:var(--dark-sky);
}
.darker-gray-bg {
    background:var(--dark-sky);
    border-color:var(--dark-sky);
}
.black-bg {
    background: #000;
}
.shadow {
    box-shadow:0 3px 7px 0 rgba(0, 0, 0, 0.3);
    margin-bottom:10px;
}
.inner-shadow-lt {
    box-shadow: inset 0 0 25px var(--badlands);
    -moz-box-shadow: inset 0 0 25px var(--badlands);
    -webkit-box-shadow: inset 0 0 25px var(--badlands);
}
.inner-shadow {
    box-shadow: inset 0 0 25px var(--granite);
    -moz-box-shadow: inset 0 0 25px var(--granite);
    -webkit-box-shadow: inset 0 0 25px var(--granite);
}
.inner-shadow-dk {
    box-shadow: inset 0 0 25px var(--coal);
    -moz-box-shadow: inset 0 0 25px var(--coal);
    -webkit-box-shadow: inset 0 0 25px var(--coal);
}
.arup-red, .arup-red-hover:hover, a.arup-red-hover:hover, .arup-red-hover a:hover, .arup-red-hover:hover a, a.arup-red, .arup-red > a {
    color: var(--arup-red);
}
.arup-red path, path.arup-red, .arup-red rect, rect.arup-red {
    fill: var(--arup-red);
}
.arup-red-bg, .arup-red-bg-hover:hover, a.arup-red-bg-hover:hover, .arup-red-bg-hover a:hover  {
    background: var(--arup-red);
}
.red-rock, .red-rock-hover:hover, a.red-rock-hover:hover, .red-rock-hover a:hover, .red-rock-hover:hover a, a.red-rock, .red-rock > a {
    color: var(--red-rock);
}
.red-rock path, path.red-rock, .red-rock rect, rect.red-rock {
    fill: var(--red-rock);
}
.red-rock-bg, .red-rock-bg-hover:hover, a.red-rock-bg-hover:hover, .red-rock-bg-hover a:hover  {
    background: var(--red-rock);
}
.figwort, .figwort-hover:hover, a.figwort-hover:hover, .figwort-hover a:hover, .figwort-hover:hover a, a.figwort, .figwort > a  {
    color: var(--figwort);
}
.figwort path, path.figwort, .figwort-hover:hover path, path.figwort-hover:hover, .figwort rect, rect.figwort, .figwort-hover:hover rect, rect.figwort-hover:hover {
    fill: var(--figwort);
}
.figwort-bg, .figwort-bg-hover:hover, a.figwort-bg-hover:hover, .figwort-bg-hover a:hover  {
    background: var(--figwort);
}
.coal, .coal-hover:hover, a.coal-hover:hover, .coal-hover a:hover, .coal-hover:hover a, a.coal, .coal > a  {
    color: var(--coal);
}
.coal path, path.coal, .coal rect, rect.coal, .coal-hover:hover path, path.coal-hover:hover, .coal-hover:hover rect, rect.coal-hover:hover {
    fill: var(--coal);
}
.coal-bg, .coal-bg-hover:hover, a.coal-bg-hover:hover, .coal-bg-hover a:hover  {
    background: var(--coal);
}
.granite, .granite-hover:hover, a.granite-hover:hover, .granite-hover a:hover, .granite-hover:hover a, a.granite, .granite > a  {
    color: var(--granite);
}
.granite path, path.granite, .granite rect, rect.granite, .granite-hover:hover path, path.granite-hover:hover, .granite-hover:hover rect, rect.granite-hover:hover {
    fill: var(--granite);
}
.granite-bg, .granite-bg-hover:hover, a.granite-bg-hover:hover, .granite-bg-hover a:hover  {
    background: var(--granite);
}
.badlands, .badlands-hover:hover, a.badlands-hover:hover, .badlands-hover a:hover,  .badlands-hover:hover a, a.badlands, .badlands > a  {
    color: var(--badlands);
}
.badlands path, path.badlands, .badlands rect, rect.badlands, .badlands-hover:hover path, path.badlands-hover:hover, .badlands-hover:hover rect, rect.badlands-hover:hover {
    fill: var(--badlands);
}
.badlands-bg, .badlands-bg-hover:hover, a.badlands-bg-hover:hover, .badlands-bg-hover a:hover  {
    background: var(--badlands);
}

/* Secondary */
.hoodoo, .hoodoo-hover:hover, a.hoodoo-hover:hover, .hoodoo-hover a:hover, .hoodoo-hover:hover a, a.hoodoo, .hoodoo > a  {
    color: var(--hoodoo);
}
.hoodoo path, path.hoodoo, .hoodoo-hover:hover path, path.hoodoo-hover:hover, .hoodoo rect, rect.hoodoo, .hoodoo-hover:hover rect, rect.hoodoo-hover:hover {
    fill: var(--hoodoo);
}
.hoodoo-bg, .hoodoo-bg-hover:hover, a.hoodoo-bg-hover:hover, .hoodoo-bg-hover a:hover  {
    background: var(--hoodoo);
}
.glass, .glass-hover:hover, a.glass-hover:hover, .glass-hover a:hover, .glass-hover:hover a, a.glass, .glass > a  {
    color: var(--glass);
}
.glass path, path.glass, .glass rect, rect.glass, .glass-hover:hover path, path.glass-hover:hover, .glass-hover:hover rect, rect.glass-hover:hover {
    fill: var(--glass);
}
.glass-bg, .glass-bg-hover:hover, a.glass-bg-hover:hover, .glass-bg-hover a:hover  {
    background: var(--glass);
}
.aspen, .aspen-hover:hover, a.aspen-hover:hover, .aspen-hover a:hover, .aspen-hover:hover a, a.aspen, .aspen > a  {
    color: var(--aspen);
}
.aspen path, path.aspen, .aspen rect, rect.aspen, .aspen-hover:hover path, path.aspen-hover:hover, .aspen-hover:hover rect, rect.aspen-hover:hover {
    fill: var(--aspen);
}
.aspen-bg, .aspen-bg-hover:hover, a.aspen-bg-hover:hover, .aspen-bg-hover a:hover  {
    background: var(--aspen);
}
.aspen-40-bg, .aspen-40-bg-hover:hover, a.aspen-40-bg-hover:hover, .aspen-40-bg-hover a:hover  {
    background: var(--aspen-40);
}
.blazer, .blazer-hover:hover, a.blazer-hover:hover, .blazer-hover a:hover, .blazer-hover:hover a, a.blazer, .blazer > a  {
    color: var(--blazer);
}
.blazer path, path.blazer, .blazer rect, rect.blazer, .blazer-hover:hover path, path.blazer-hover:hover, .blazer-hover:hover rect, rect.blazer-hover:hover {
    fill: var(--blazer);
}
.blazer-bg, .blazer-bg-hover:hover, a.blazer-bg-hover:hover, .blazer-bg-hover a:hover  {
    background: var(--blazer);
}

/* Web */
.dark-sky, .dark-sky-hover:hover, a.dark-sky-hover:hover, .dark-sky-hover a:hover, .dark-sky-hover:hover a, a.dark-sky, .dark-sky > a  {
    color: var(--dark-sky);
}
.dark-sky path, path.dark-sky, .dark-sky rect, rect.dark-sky, .dark-sky-hover:hover path, path.dark-sky-hover:hover, .dark-sky-hover:hover rect, rect.dark-sky-hover:hover {
    fill: var(--dark-sky);
}
.dark-sky-bg, .dark-sky-bg-hover:hover, a.dark-sky-bg-hover:hover, .dark-sky-bg-hover a:hover  {
    background: var(--dark-sky);
}
.salt, .salt-hover:hover, a.salt-hover:hover, .salt-hover a:hover, .salt-hover:hover a, a.salt, .salt > a  {
    color: var(--salt);
}
.salt path, path.salt, .salt rect, rect.salt, .salt-hover:hover path, path.salt-hover:hover, .salt-hover:hover rect, rect.salt-hover:hover {
    fill: var(--salt);
}
.salt-bg, .salt-bg-hover:hover, a.salt-bg-hover:hover, .salt-bg-hover a:hover  {
    background: var(--salt);
}
.lab-blue, .lab-blue-hover:hover {
    color: var(--lab-blue) /*do not EVER use as a background!*/
}
.multiply {
    mix-blend-mode: multiply;
}

a:hover {
    transition: all .2s ease;
    opacity: .99;
}

/*rounded corners*/
.rounded-corner-top-left {
    border-top-left-radius: var(--border-radius);
}
.rounded-corner-top-right {
    border-top-right-radius: var(--border-radius);
}
.rounded-corner-bottom-left {
    border-bottom-left-radius: var(--border-radius);
}
.rounded-corner-bottom-right {
    border-bottom-right-radius: var(--border-radius);
}

/* Buttons */

.button {
    display: inline-block;
    border: 2px solid var(--arup-red);
    color: var(--arup-red) !important;
    cursor: pointer;
    background: transparent;
    font-family: "Roboto", sans-serif;
    font-weight: 500;
    line-height: 1.6em;
    font-size: 1em;
    padding: 7px 25px;
    position: relative;
    text-align: center;
    text-decoration: none !important;
    border-radius: 50vh;

    &:hover {
        border: 2px solid var(--red-rock);
        color: var(--red-rock);
        transition: all 0.3s;
        background: #fff;
        font-weight: 500;
    }

    &:focus,
    &:active,
    &:focus-visible{
        outline: 2px solid var(--figwort);
    }
}

.button-ltd {
    display: inline-block;
    background-color: rgba(198, 177, 161, 0.05);
    border: 2px solid var(--arup-red) !important;
    color: var(--arup-red) !important;

    &:hover {
        background-color: rgba(198, 177, 161, 0.15);
        border: 2px solid var(--red-rock) !important;
        color: var(--red-rock) !important;
    }
}
.button-secondary {
    display: inline-block;
    background: var(--red-rock);
    border: 2px solid var(--red-rock);
    color: var(--salt) !important;

    &:hover {
        background: var(--arup-red);
        border: 2px solid var(--arup-red);
        color: #fff !important;
        transition: all 0.3s;
    }
}
.button-reverse {
    display: inline-block;
    background: var(--salt);
    color: var(--arup-red) !important;
    border: 2px solid var(--arup-red);

    &:hover {
        background-color: var(--aspen);
        color: var(--red-rock) !important;
        border: 2px solid var(--red-rock);
    }
}

.button-transparent {
    display: inline-block;
    background-color: rgba(65, 64, 66, .6);
    color: var(--salt) !important;
    border: 2px solid var(--salt);

    &:hover {
        background: var(--salt);
        color: var(--arup-red) !important;
        border: 2px solid var(--salt);
        font-weight: 500;
    }
}

.button-tertiary {
    display: inline-block;
    background: var(--dark-sky);
    border: 2px solid var(--dark-sky);
    color: var(--salt) !important;

    &:hover {
        background: var(--coal);
        border: 2px solid var(--coal);
        color: var(--salt) !important;
    }
}

.button-red,
.button--danger {
    display:inline-block;
    background:var(--arup-red);
    color: var(--salt) !important;
    border:2px solid var(--arup-red);
}
.button-red:hover,
.button--danger:hover{
    background:var(--figwort);
    border:2px solid var(--figwort);
    color: var(--salt) !important;
}

.button:disabled,
.button:disabled:active,
.button.is-disabled,
.button.is-disabled:active {
    background:var(--badlands);
    border:1px solid #777;
    box-shadow:none;
    color:var(--coal) !important;
    cursor:default;
    font-weight:normal;
}
.button:disabled:focus,
.button.is-disabled:focus,
.button:disabled:active,
.button.is-disabled:active {
    outline:none;
}
.button.block {
    font-size:1.1em;
    font-weight:400;
    line-height:1.6em;
    margin:5px 0;
    padding:10px 15px;
    position:relative;
    text-align:center;
    text-decoration:none;
    text-shadow:none;
    width:100%;
}
.button.block:hover,
.button.block:focus,
.button.block:active {
    transition:all 0.3s;
}
.button img,
.button svg,
.button.block img,
.button.block svg {
    padding:0 10px 0 0;
}
button:focus {
    outline: 2px solid var(--figwort);
}

/* Forms */
input, optgroup, select, textarea {
    font-family:"Roboto", sans-serif;
    font-size:inherit;
    margin:0;
    padding:0;
    border-radius: 0;
    text-transform:none;
    background: var(--salt);
}
label {
    display:block;
    margin:5px 0 0 0;
}
label.option {
    display:inline-block;
}
label.form-required:after {
    content:" *";
    color:var(--arup-red);
}
input.error,
input.error:hover,
input.error:focus,
textarea.error,
textarea.error:hover,
textarea.error:focus,
select.error,
select.error:hover,
select.error:focus {
    border:1px solid var(--error);
    outline:2px solid #f9c9bf;
}
input.success,
input.success:hover,
input.success:focus,
textarea.success,
textarea.success:hover,
textarea.success:focus,
select.success,
select.success:hover,
select.success:focus {
    border:1px solid var(--success);
    outline:2px solid #f3faef;
}
select {
    border:1px solid var(--badlands);
    color:var(--coal);
    margin:5px 0;
    padding:10px;
    text-shadow:none;
}
select:hover {
    background-color:var(--salt);
    border:1px solid var(--lab-blue);
}
select:focus {
    background-color:var(--salt);
    border:1px solid var(--lab-blue);
    outline:2px solid #dcf0f0;
    outline-offset:0;
}
input,
textarea {
    border:1px solid var(--badlands);
    color:var(--coal);
    background: var(--salt);
    margin:5px 0;
    padding:10px;
}
form {
    mix-blend-mode: multiply;
}
input:hover,
textarea:hover {
    border:1px solid var(--lab-blue);
}
input:focus,
textarea:focus {
    border:1px solid var(--lab-blue);
    outline:2px solid #dcf0f0;
    outline-offset:0;
}
input[type=checkbox],
input[type=radio] {
    display:inline-block;
    position:relative;
    top:3px;
    margin-right:0.25em;
    padding:0;
    background:var(--salt);
    border:1px solid var(--granite);
    width:16px !important;
    height:16px !important;
    outline:none;
}
input[type=checkbox] {
    margin-bottom:0;
}
input[type=radio] {
    border-radius:50%;
    margin-bottom:0;
}
input[type=checkbox]:hover,
input[type=checkbox]:focus,
input[type=radio]:hover,
input[type=radio]:focus {
    border-color:var(--lab-blue);
    cursor:pointer;
    transition:all 0.3s;
}
input[type=radio]:checked,
input[type=radio]:disabled:checked,
input[type=radio].error:checked,
input[type=radio].error:focus:checked {
    background:var(--lab-blue);
    box-shadow:inset 0 0 0 3px var(--salt);
}
input[type=checkbox]:checked:after,
input[type=checkbox]:disabled:checked:after,
input[type=checkbox].error:checked:after,
input[type=checkbox].error:focus:checked:after {
    content:'';
    height:5px;
    width:10px;
    position:absolute;
    top:40%;
    left:50%;
    transform:translate3d(-50%, -50%, 0) rotate(-45deg);
    border-bottom:2px solid var(--coal);
    border-left:2px solid var(--coal);
}
input[type=checkbox]:disabled,
input[type=radio]:disabled {
    opacity:.5;
    background:var(--badlands);
}
input[type=checkbox]:disabled:hover {
    border-color:var(--badlands);
    cursor:default;
}
input[type=checkbox]:disabled:hover,
input[type=radio]:disabled:hover {
    border-color:var(--badlands);
    cursor:default;
}
input[type=submit] {
    display:inline-block;
    background:transparent;
    border:1px solid var(--arup-red);
    color:var(--arup-red) !important;
    cursor:pointer;
    font-family:"Roboto", sans-serif;
    font-weight:bold;
    line-height:1.6em;
    border-radius: 30px;
    padding:8px 25px;
    position:relative;
    text-align:center;
    text-decoration:none;
}
input[type=submit]:hover,
input[type=submit]:focus,
input[type=submit]:active {
    border:1px solid var(--red-rock);
    color:var(--red-rock) !important;
    cursor:pointer;
    outline:none;
    text-decoration:none;
    text-shadow:none;
    transition:all 0.3s;
}
input[type=submit]:focus,
input[type=submit]:active {
    border:1px solid var(--arup-red);
    color:var(--arup-red) !important;
    outline: 0;
    outline-offset:0;
}
input[type=image],
input[type=image]:hover,
input[type=image]:focus {
    border:0;
    box-shadow:none;
}
.no-border {
    border:0 !important;
    outline:none;
}
.form-submit {
    display:inline-block;
    background:var(--salt);
    border:1px solid var(--arup-red);
    color:var(--arup-red) !important;
    cursor:pointer;
    font-family:"Roboto", sans-serif;
    font-weight:bold;
    line-height:1.6em;
    padding:8px 15px;
    position:relative;
    text-align:center;
    text-decoration:none;
}
.form-submit:hover,
.form-submit:focus,
.form-submit:active {
    border:1px solid var(--red-rock);
    color:var(--red-rock) !important;
    cursor:pointer;
    outline:none;
    text-decoration:none;
    text-shadow:none;
    transition:all 0.3s;
}
.form-submit:focus,
.form-submit:active {
    border:1px solid var(--arup-red);
    color:var(--arup-red) !important;
    outline:0;
    outline-offset:0;
}
button[type="submit"] {
    margin-left: -20px;
}
/* in Chrome + Safari + Opera + Mozilla */
@supports (-webkit-appearance:none) {
    input,
    input[type="checkbox"],
    input[type="radio"] {
        -webkit-appearance:none;
    }
}
/* in Mozilla */
@supports (-moz-appearance:none) {
    input,
    input[type="checkbox"],
    input[type="radio"] {
        -moz-appearance:none;
    }
}

/* Lists */
nav li,
ul li {
    list-style:none;
}
.list li {
    list-style: disc;
    margin: 10px 0 10px 5%;
}
article ul,
article ol {
    margin:0 0 30px 0;
}
article ul ul,
article ul ul ul {
    margin:0;
}
article ul li,
article ol li {
    margin:0 0 0 30px;
}
article ul li {
    line-height:1.6em;
    list-style:disc;
}
article ul ul li {
    list-style:circle;
}
article ul ul ul li {
    list-style:square;
}
article ol li {
    line-height:1.6em;
    list-style-type:decimal;
}
article ol ol li {
    list-style:lower-alpha;
}
article ol ol ol li {
    list-style:lower-roman;
}
.icons li {
    list-style:none;
    margin:0 0 0 30px;
    text-indent:-30px;
}
.icons li:before {
    display:inline-block;
    background-position:left bottom !important;
    background-size:25px !important;
    content:'';
    width:30px;
    height:25px;
    position: relative;
    right: 3px;
    top: 5px;
}
.icons-normal li {
    list-style:none;
    margin:0 0 0 35px;
    text-indent:-35px;
}
.icons-normal li:before {
    display:inline-block;
    background-position:left bottom !important;
    background-size:30px !important;
    content:'';
    width:35px;
    height:30px;
    position: relative;
    right: 3px;
    top: 5px;
}
.icons-normal li {
    list-style:none;
    margin:0 0 0 35px;
    text-indent:-35px;
}
a.doc:before,
a.download:before,
a.email:before,
a.phone:before,
a.fax:before,
a.image:before,
a.microphone:before,
a.person:before,
a.pdf:before,
a.news:before,
a.test:before,
a.url:before,
a.video:before,
a.xls:before,
a.zip:before {
    display:block;
    background-position:left bottom !important;
    background-size:25px !important;
    content:'';
    float:left;
    width:30px;
    height:25px;
}
.doc:before {
    background:url(../images/icons/file-document-download.svg) no-repeat;
}
.download:before {
    background:url(../images/icons/downloads-folder.svg) no-repeat;
}
.email:before {
    background:url(../images/icons/email.svg) no-repeat;
}
.phone:before {
    background:url(../images/icons/phone.svg) no-repeat;
}
.fax:before {
    background:url(../images/icons/print.svg) no-repeat;
}
.image:before {
    background:url(../images/icons/image.svg) no-repeat;
}
.microphone:before {
    background:url(../images/icons/microphone.svg) no-repeat;
}
.person:before {
    background:url(../images/icons/person.svg) no-repeat;
}
.pdf:before {
    background:url(../images/icons/file-pdf.svg) no-repeat;
}
.news:before {
    background:url(../images/icons/news.svg) no-repeat;
}
.test:before {
    background:url(../images/icons/lab-tube.svg) no-repeat;
}
.url:before {
    background:url(../images/icons/hyperlink.svg) no-repeat;
}
.video:before {
    background:url(../images/icons/video-play.svg) no-repeat;
}
.xls:before {
    background:url(../images/icons/file-xls.svg) no-repeat;
}
.zip:before {
    background:url(../images/icons/file-zip.svg) no-repeat;
}
/* use above file classes without icons */
.no-icon:before {
    background: none;
    display: none !important;
}
main article p a.external:after {
    display:inline-block;
    background-position:center !important;
    background-size:12px !important;
    content:'';
    width:12px;
    height:12px;
}
main article p .external:after {
    background:url(../images/icons/external-link.svg) no-repeat;
}

/* Circles */
svg.xsmall,
.circle.xsmall {
    width:20px;
    height:20px;
}
svg.small,
.circle.small {
    width:30px;
    height:30px;
}
svg.normal,
.circle.normal {
    width:40px;
    height:40px;
}
svg.large,
.circle.large {
    width:50px;
    height:50px;
}
svg.xlarge,
.circle.xlarge {
    width:60px;
    height:60px;
}
.circle.normal,
.circle.large,
.circle.xlarge {
    padding:30px;
}
.circle {
    display:block;
    border:0;
    border-radius:50%;
    text-align:center;
    width:150px;
    height:150px;
}
a.circle {
    background:var(--salt);
    border:1px solid var(--badlands);
    text-align: center;
}
a:hover.circle {
    background: var(--badlands);
    border:1px solid var(--arup-red);
}
#main .avatar {
    display:inline-block;
    background:var(--arup-red);
    border:0;
    border-radius:50%;
    color:var(--salt);
    font-size:3em;
    margin:0;
    position:relative;
    width:150px;
    height:150px;
}
#main .avatar[data-text]:after {
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    content:attr(data-text);
}

/* Quotes */
.bio-name {
    font-size:1.5em;
    padding:10px 0 0 0;
    color: var(--arup-red);
}
.bio-title {
    font-size:1.1em;
    padding:0 0 20px 0;
    color: var(--granite);
}
.quote {
    line-height:1.6em;
    position:relative;
}
.quote blockquote {
    background:none;
    padding:0 3%;
    font-size:1.3em;
    font-weight:300;
    line-height:1.6em;
    position:relative;
    z-index:10;
}
.quote blockquote * {
    box-sizing:border-box;
}
.quote blockquote strong {
    font-weight:400;
}
.quote blockquote p:first-child:before {
    content:'\201C';
    color:rgba(198, 177, 161, .25);
    font-family:Georgia, Times, serif;
    font-size:7em;
    font-weight:bold;
    position:absolute;
    top:30px;
    left:0;
    z-index:-10;
}
blockquote .quote blockquote p:first-child:before {
    color:var(--salt);
}
.quote img {
    display:block;
    border-radius:50%;
    position:absolute;
    width:150px;
    height:150px;
    top:0;
    left:0;
}
.quote cite {
    display:block;
    font-size:.9em;
    font-style:normal;
    padding:0 3%;
}
.quote cite span, .cite {
    font-size:1em;
    font-style:normal;
}
.quote .quote-container {
    padding-left:160px;
}
.quote.right .quote-container {
    padding-left:0;
    padding-right:160px;
}
.quote.right img {
    left:auto;
    right:0;
}
.quote.right cite {
    text-align:right;
}
.pullquote {
    font-size:1.4em;
    font-weight:300;
    line-height:1.6em;
    max-width:30%;
    padding:3%;
    text-align:center;
}
.pullquote strong {
    font-weight:400;
}

/* Breadcrumbs */
.breadcrumb ol {
    margin:10px 0 !important;
}
.breadcrumb li {
    display:inline;
    font-size:.9em;
    list-style:none;
    margin:0 !important;
}
.breadcrumb li:before {
    content:' › ';
    font-size:1.2em;
}
.breadcrumb li:first-child:before {
    content:none;
}
nav.breadcrumb {
    padding-top: 10px;
}
.breadcrumb a {
    color: var(--red-rock);
    text-decoration: none;
}
.breadcrumb a:hover {
    color: var(--figwort);
}

/* Messages */
.status-messages {
    clear:both;
    padding:1% 3%;
}
.status-messages svg {
    float: left;
}
.status {
    color: var(--coal);
}
.status path {
    fill: var(--coal);
}

.success {
    color: var(--success);
}
.success path {
    fill: var(--success);
}
.error {
 color: var(--error);
    }
.error path {
    fill: var(--error);
}
.important {
    color: var(--arup-red);
}
.important path {
    fill: var(--arup-red);
}
.status-messages.status {
    background: color-mix(in srgb, var(--aspen), transparent 80%);
    border-left:5px solid var(--aspen);
}
.status-messages.success {
    background: color-mix(in srgb, var(--success), transparent 90%);
    border-left:5px solid var(--success);
}
.status-messages.error {
    background: var(--dark-sky);
    border-left:5px solid var(--error);
}
.status-messages.important {
    background: var(--warning);
    border-left: 5px solid var(--figwort);
}
.status-messages img,
.status-messages svg {
    width: 50px;
    padding:7px 10px 15px 0;
}
.status-messages h3 {
    clear:none;
    float:left;
    margin:0;
}
.status-messages p {
    padding:10px 0;
}

/* Tables */
.table {
    overflow-x:auto;
}
table {
    display:table;
    margin:1% 0;
    width:100%;
    border-collapse:separate;
    border-spacing:0;
    overflow-x:auto;
}
table caption {
    background:var(--granite);
    color:var(--salt);
    font-size:1.2em;
    font-weight:bold;
    padding:1%;
    text-align:left;
    vertical-align:top;
}
table td, table th  {
    padding: 10px 20px 10px 10px !important;
}
table th {
    background:var(--badlands);
    border:none;
    font-weight:bold;
    padding:1%;
    text-align:left;
}
table td {
    border-bottom:1px solid var(--badlands);
    padding:1%;
    text-align:left;
}
table tr:hover,
table tr:focus {
}
table .gray-alt-bg {
    background: rgba(222, 223, 224, .3) !important;
}
td, th {
    vertical-align:top;
}
.tests-table tr td:nth-child(4),
.tests-table th:nth-child(4),
.tests-table tr td:nth-child(5),
.tests-table th:nth-child(5) {
    display:none;
}

table.border tbody td, table.border thead th  {
    border: 1px solid var(--badlands);
}

table.border thead th  {
    border: 1px solid #eee;
}

thead.center th{
    text-align: center;
}

tbody.center td{
    text-align: center;
}

/* Calendar */
.calendar {
    display:inline;
    background:var(--salt);
    clear:both;
    float:left;
    margin:0 15px 15px 0;
    width:50px;
}
.calendar .month {
    background: var(--coal);
    color:var(--salt);
    font-size:.9em;
    padding:2px;
    text-align:center;
    text-transform:uppercase;
    line-height:1.2em;
}
.calendar .day {
    clear:left;
    color:var(--arup-red);
    border:1px solid var(--granite);
    border-top:0;
    font-size:1.2em;
    font-weight:bold;
    padding:5px 0;
    text-align:center;
}

/* Newsroom */
.newsroom-view .views-field-field-date {
    padding: 10px 0;
    font-size: 11pt;
}
.newsroom-view .views-field.views-field-title p, .newsroom-view .views-field-title {
    line-height: 1.4;
    margin: 10px 0;
    font-size: 1.3em;
}
.newsroom-view .views-view-grid .views-row{
    height: unset !important;
    min-height: 350px;
    margin: 10px 0 30px 0;
}
.newsroom-view  .views-col > span > p > a {
    line-height: 1.4;
    display: block;
    margin: 10px 0;
    font-size: 1.2em;
}
.newsroom-view  .views-col > span > p > br {
    display: none;
}
.newsroom-view .views-col span p,  .newsroom-view .views-field.views-field-body {
    line-height: 1.4;
}
.newsroom-view .views-field.views-field-field-category {
    margin: 10px 0;
    font-size: 10.5pt;
    text-transform: uppercase;
}
.newsroom-view #views-exposed-form-news-page-1 div {
    display: inline-block;
}
.newsroom-view input#edit-submit-news {
    padding: 6px 10px;
}
.newsroom-view .views-col img {
    border: 1px solid #eee;
}
.views-field.views-field-field-category a {
    color: var(--granite);
}
.views-field.views-field-field-category a:hover {
    color: var(--arup-red);
}

/* Accordion */
.accordion {
    display: block;
    background: var(--salt) !important;
    border-bottom: 1px solid var(--badlands);
    color: var(--coal);
    cursor: pointer;
    font-weight: normal;
    line-height: 1em;
}
.accordion .header {
    padding: 20px;
    font-size: 1.05em;
    overflow: hidden;
    line-height: 1.5;
}
.accordion:hover {
    background: rgba(131, 168, 197, 0.2) !important;
    color: var(--coal);
    transition:all 0.3s;
}
.accordion:before {
    display: block;
    background: url(/themes/arup/images/icons/caret-right-filled.svg) no-repeat;
    background-position: center bottom;
    background-size: 15px;
    content: '';
    float: left;
    width: 40px;
    height: 45px;
    transition: all .3s;
}
.accordion:active,
.accordion.is-active {
    background: rgba(131, 168, 197, 0.2) !important;
    transition: all 0.3s;
    border-bottom: 1px solid var(--salt);
}
.accordion.is-active ~ .accordion {
    border-top: 2px solid var(--badlands);
}
.accordion.is-active:before {
    display: block;
    background: url(/themes/arup/images/icons/caret-down-filled.svg) no-repeat;
    background-position: center bottom;
    background-size: 15px;
    content: '';
    float: left;
    width: 40px;
    height: 45px;
    transition: all .3s;
}
.accordion-container{
    display: none;
    margin: 15px 15px 30px 60px;
}
.accordion-expand,
.accordion-collapse {
    cursor:pointer;
}
.accordion .header p, .accordion-container p:last-of-type {
    padding: 0;
}

/* Tab-Container */
.tab-container {
    display:block;
    clear:both;
    position:relative;
}
.tab {
    display:block;
    clear:both;
    font-weight:bold;
    list-style:none;
}
.tab li:last-child {
    padding:10px 0 0 0;
}
.tab li a {
    display:block;
    background:var(--salt);
    border:1px solid var(--granite);
    color:var(--coal);
    padding:10px 15px;
    position:relative;
}
.tab li a:hover {
    background:var(--coal);
    border:1px solid var(--coal);
    color:var(--salt);
}
.tab li a:active {
    background:var(--granite) !important;
    border:1px solid var(--granite) !important;
}
.tab li a img,
.tab li a svg {
    fill:var(--coal);
}
.tab a:hover img,
.tab a:hover svg,
.tab a.is-active img,
.tab a.is-active svg {
    fill:var(--salt);
}

/* Tabs */
.tabs {
    display:block;
    clear:both;
    list-style:none;
    margin:0 0 20px 0;
}
.tabs li {
    display:block;
    border-bottom:3px solid var(--badlands);
    float:left;
    margin:0;
    padding:0 30px 0 0;
    position:relative;
}
.tabs li:last-child {
    padding:0;
}
.tabs li a {
    display:block;
    color:var(--granite);
    border-bottom:3px solid var(--badlands);
    font-weight:bold;
    margin-bottom:-3px;
    padding:5px 0;
    text-decoration: none !important;
    position:relative;
}  ul.tab > li a {
    text-decoration: none !important;
}
.tabs li.is-active a,
.tabs li.is-active a:hover {
    border-bottom:3px solid var(--arup-red);
    color:var(--coal);
    cursor:default;
}
.tabs li a:hover {
    border-bottom:3px solid var(--arup-red);
    color:var(--granite);
}
.tabs li a:active {
    border-bottom:3px solid var(--arup-red);
}
.tabs li a img,
.tabs li a svg {
    color:var(--arup-red);
}
.tabs li.is-active a img,
.tabs li.is-active a svg {
    fill:var(--arup-red);
}
/* Subnavigation */
.tablist {
    display:none;
}
.tab li {
    display:block;
    float:left;
    margin:0;
    padding:10px 10px 0 0;
    position:relative;
}
.tab a.is-active,
.tab a.is-active:hover {
    background:var(--granite);
    border:1px solid var(--granite);
    color:var(--salt);
    cursor:default;
    text-decoration: none !important;
}
.container, .news-container {
    margin:auto;
    width:90%;
}

/*menu*/
.megamenu-item .megamenu-submenu {
    font-size: 80%;
}
.top-nav-menu {
    column-gap: 17px;
}/*end menu */
#subnavigation {
    display:block;
    width:100%;
}
#subnavigation .menu {
    margin:0;
    display: flex;
}
#subnavigation .menu li {
    display:block;
    margin:0;
    padding:10px 45px 15px 0;
    position:relative;
}
#subnavigation .menu li a {
    display:block;
    color:var(--coal);
    padding:5px 0;
}
#subnavigation .menu li a:hover {
    border-bottom:3px solid var(--arup-red);
}
#subnavigation .menu li a:active {
    border-bottom:3px solid var(--arup-red);
}
#subnavigation .menu li.menu-item--active-trail a,
#subnavigation .menu li.is-active a {
    border-bottom:3px solid var(--arup-red);
    color:var(--arup-red);
    cursor:default;
}
#subnavigation .menu li.menu-item--active-trail ul li a:hover,
#subnavigation .menu li.is-active ul li a:hover {
    border-bottom:3px solid var(--arup-red);
    color:var(--arup-red);
    cursor:default;
}
#subnavigation .menu li.menu-item--active-trail ul li a:active,
#subnavigation .menu li.is-active ul li a:active {
    border-bottom:3px solid var(--arup-red);
    color:var(--arup-red);
    cursor:default;
}

/* Sticky Nav Tabs */
.sticky {
    display:block;
    background:var(--salt);
    position:fixed;
    padding:0;
    margin:auto;
    top:0;
    width:1170px;
    z-index:100;
}
.tab-select {
    float:left;
    padding:10px 100px;
    margin:0 10px;
}

/* Pager */
.pager {
    clear:both;
    padding:20px 0;
}
.pager ul {
    list-style:none;
    margin:0;
}
.pager ul li {
    display:inline-block;
    margin:0 5px 30px 0;
}
.pager ul li a {
    background:#eee;
    padding:10px 15px;
}
.pager ul li.is-active a {
    background:var(--granite);
    color:var(--salt);
    cursor:default;
    font-weight:bold;
}

/* Toggle */
.toggle {
    display: block;
    cursor: pointer;
}
.toggle-container {
    display: none;
}
.toggle-text {
    display: none;
}
.toggle-text-button {
    display: inline-block;
    cursor: pointer;
}

/* Modal */
.modal {
    position:absolute;
    top:0;
    left:0;
    visibility:hidden;
}
.modal.is-active {
    visibility:visible;
}
.modal-toggle {
    cursor:pointer;
}
.modal-overlay {
    background:rgba(0, 0, 0, 0.5);
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    opacity:0;
    transition:all 0.3s;
    visibility:hidden;
    z-index:100;
}
.modal.is-active .modal-overlay {
    opacity:1;
    visibility:visible;
}
.modal-container {
    background:var(--salt);
    box-shadow:0 15px 20px -15px rgba(0, 0, 0, 0.3), 0 35px 50px -25px rgba(0, 0, 0, 0.3), 0 85px 60px -25px rgba(0, 0, 0, 0.1);
    position:fixed;
    top:50%;
    left:50%;
    min-width:250px;
    max-width:700px;
    max-height:calc(100% - 100px);
    transform:translate(-50%, -50%);
    z-index:1000;
}
.modal-header {
    border-bottom:1px solid var(--badlands);
    padding:10px 20px;
}
.modal-content {
    padding:20px;
}
.modal-container .button {
    transition:none;
}
.modal-close {
    background:none;
    border:0;
    position:absolute;
    top:10px;
    right:10px;
    padding:10px;
}
.modal-close:hover {
    background: var(--granite);
}

/* Live Chat Styling */
.dockableContainer.show {
    display:flex !important;
}
.sidebarHeader h2 {
    color:var(--salt);
}

/* Flex grid same height */
.flex-row-grid {
    display: grid;
    grid-column-gap: 15px;
    grid-row-gap: 15px;
    justify-content: stretch;
}
.flex-grid-6 {
    grid-template-columns: repeat(6, minmax(0, 1fr));
}.flex-grid-5 {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}.flex-grid-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}.flex-grid-3 {
     grid-template-columns: repeat(3, minmax(0, 1fr));
 }.flex-grid-2 {
      grid-template-columns: repeat(2, minmax(0, 1fr));
  }
.flex-grid-col {
    display: flex;
    flex: 1;
}
.flex-row-grid .box, .flex-row-grid .box-content {  /*align the button to the bottom of the box */
    display: flex;
    flex-direction: column;
    width: 100%;
}.flex-row-grid .box > div, .flex-row-grid .box-content > div {
     flex-grow: 1;
     align-content: end;
 }

/* Icon Hover */
.icon-hover{
    cursor: pointer;
}
.icon-hover span{
    color: var(--coal);
    font-weight: bold;
}
.icon-hover:hover span{
    color: var(--red-rock);
}
.icon-hover svg {
    max-width: 50px;
}
.icon-hover path {
    stroke: var(--red-rock);
    fill: transparent;
}

.icon-hover:hover path, .icon-hover path:hover{
    animation: offset 10s linear forwards, fill-icon .5s .5s forwards;
    stroke-width: 1;
    stroke-dasharray: 3212;
    stroke-dashoffset: 3212;
}

@keyframes offset {
    to { stroke-dashoffset: 0; }
}
@keyframes fill-icon {
    to { fill: var(--arup-red); stroke: transparent; }
}
.icon-box img, .icon-box svg{
    border-top-left-radius: 20px;
    border-bottom-right-radius: 20px;
    padding: 15px;
}
.icon-box:hover img, .icon-box:hover svg{
    border: 1px solid var(--red-rock);
}

/* Expanding boxes */
.expand-box-frame {
    width: 100%;
    height: 500px;
    margin-top: 50px
}
.expand-boxes {
    display: flex;
    width: 100%;
    height: 100%;
}
.expand-box {
    position: relative;
    flex: 1 1 auto;
    width: 20%;
    background: grey;
    transition: all 0.8s ease-in-out;
    cursor: pointer;
    overflow: hidden;
}
.expand-box-1, .expand-box-2, .expand-box-3, .expand-box-4 {
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}
.expand-box-1:hover{
    width: 100%;
}
.expand-box-1:hover .text{
    opacity:1;
    transform:scale(1);
}
.expand-box-2:hover{
    width: 100%;
}
.expand-box-2:hover .text{
    opacity:1;
    transform:scale(1);
}
.expand-box-3:hover{
    width: 100%;
}
.expand-box-3:hover .text{
    opacity:1;
    transform:scale(1);
}
.expand-box-4:hover{
    width: 100%;
}
.expand-box-4:hover .text{
    opacity:1;
    transition: 0.5s all ease;
    transform:scale(1);
}
.expand-box-1{background-image: url("/files/images/careers/step1-seeking.png")}
.expand-box-2{background-image: url("/files/images/careers/step2-applying.png")}
.expand-box-3{background-image: url("/files/images/careers/step3-interviewing.png")}
.expand-box-4{background-image: url("/files/images/careers/step4-final.png")}

/* plus minus */
.plus-minus-toggle {
    cursor:pointer;
    height:12px;
    position:relative;
    width:12px;
    float:right;
    margin-left:3px;
    margin-top:8px;
}
.plus-minus-toggle:before,
.plus-minus-toggle:after {
    background: var(--coal);
    content:"";
    height:2px;
    right:2px;
    position:absolute;
    top:3px;
    width:12px;
    transition:transform 500ms ease;
}
.plus-minus-toggle:after {
    transform-origin:center;
}
.plus-minus-toggle.collapsed:after {
    transform:rotate(90deg);
}
.plus-minus-toggle.collapsed:before {
    transform:rotate(180deg);
}

@media only screen and (max-width:1150px) {
    .number-flex-content:before {
        content: none;
    }
    .number-flex-content {
        width: 60%;
        font-size: small;
        padding-top: 2.1%;
    }
    .number-flex-number {
        padding-top: 0;
        width: 35%;
    }
    .number-flex-content {
        font-size: x-large;
    }
    .research-innovation .container {
        padding: 15% 0;
    }
    .number-flex-content.number-flex-content-top {
        padding-top: 0;
    }
    .number-flex:first-of-type {
        margin: 0 auto 80px 0;
    }
    .number-flex-content {
        padding-top: 3%;
    }
}

@media (max-width:1020px) {
    .css-table-cell {
        display: block !important;
    }
}

@media (min-width:1020px) {
    .container, .news-container {
        width: 90%;
        margin:auto;
        max-width:1170px;
    }
    .tablist {
        display:block;
    }
    .tab li {
        display:block;
        float:left;
        margin:0 0 10px 0;
        padding:10px 10px 0 0;
        position:relative;
    }
    .tab a.is-active, .tab a.is-active:hover {
        background:var(--granite);
        border:1px solid var(--granite);
        color:var(--salt);
        cursor:default;
    }
    #subnavigation {
        display:block;
        background:var(--badlands);
        position:relative;
        width:100%;
        height: 52px;
    }
    .sidebar {
        width:150px;
        position:fixed;
        left:0;
        top:0;
    }
    .sidebar .menu a {
        display:block;
        background:none !important;
        border-left:3px solid var(--salt);
        clear:both;
        color:var(--coal) !important;
        margin:5px 0;
        padding:3px 10px;
    }
    .sidebar .menu a:hover {
        color:#006472 !important;
    }
    .sidebar .menu .menu-item .is-active {
        border-left:3px solid #007d91;
        font-weight:bold;
    }
    .sidebar .menu .menu .menu {
        display:none;
    }
    .sidebar .menu .menu-item--expanded .menu-item a {
        font-size:.9em;
        margin:5px 0 5px 20px;
        padding:3px 10px;
    }
    .menuhead {
        background-color:#5C5B5D;
        color:var(--salt);
        margin-bottom:5px;
        padding:10px;
    }
    input.width200 {
        max-width:200px;
    }
    .image {
        margin:10px auto 20px;
    }
    .image.left {
        margin:10px 20px 20px 0;
    }
    .image.right {
        margin:10px 0 20px 20px;
    }
    figcaption, .image-caption {
        font-size:.8em;
        margin:10px 0;
    }
    .gallery img {
        display:block;
        padding:20px 0;
        position:relative;
        z-index:10;
    }
    .gallery a:hover {
        position:relative;
        transition:all .3s ease;
    }
    .gallery a:hover img {
        opacity:1;
        position:relative;
        transform:scale(1.02);
        z-index:1000;
    }
    .hide-desktop, .hidden {
        display:none;
    }
    .col {
        float:left;
    }
    .col.right {
        float:right;
    }
    .mobile-accordion {
        background:var(--salt);
        color:var(--coal);
        font-size:1.6em;
        font-weight:400;
        line-height:1.6em;
        margin:20px 0;
    }
    .mobile-accordion-container {
        display:block;
        margin:0;
        padding-bottom: 20px;
        border-bottom: 1px solid;
        border-bottom-color: var(--badlands);
    }
}

@media (max-width:1019px) {
    form.ltd-search-form > p {
        position: unset;
    }
    .megamenu-submenu .ltd-search-form button  {
        position: unset;
        height: 50px;
        margin-left: 0;
    }
    .sidebar {
        display:none;
    }
    .image {
        margin:10px auto 20px;
    }
    figcaption, .image-caption {
        font-size:.8em;
        margin:10px 0;
    }
    .hide-mobile {
        display:none;
    }
    input, optgroup, select, textarea {
        width:90%;
    }
    .width90 {
        width:90%;
    }
    .width70 {
        width:100%;
    }
    .width22 {
        float:left;
        width:50%;
    }
    .width4 {
        display:none;
    }
    .flex-grid-4, .flex-grid-5, .flex-grid-6 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .flex-grid-3, .flex-grid-2 {
        grid-template-columns: repeat(1, minmax(0, 1fr));
    }
    .tablet-only {
        display: block !important;
    }
    /* Mobile Accordion */
    .mobile-accordion {
        display:block;
        color:var(--coal);
        cursor:pointer;
        font-weight:normal;
        line-height:1em;
        margin:15px 0;
        position:relative;
    }
    .mobile-accordion .header {
        padding:15px;
    }
    .mobile-accordion:hover {
        background: rgba(0, 125, 145, 0.1) !important;
        color:#006472 !important;
        transition:all 0.3s;
    }
    .mobile-accordion:before {
        display:block;
        background:url(../images/icons/caret-right-filled.svg) no-repeat;
        background-position:center bottom;
        background-size:15px;
        content:'';
        float:left;
        width:30px;
        height:30px;
        transition:all .3s;
    }
    .mobile-accordion.is-active:before {
        display:block;
        background:url(../images/icons/caret-down-filled.svg) no-repeat;
        background-position:center bottom;
        background-size:15px;
        content:'';
        float:left;
        width:30px;
        height:30px;
        transition:all .3s;
    }
    .mobile-accordion:active,
    .mobile-accordion.is-active {
        transition:all 0.3s;
        border-bottom: 1px solid var(--salt) !important;
    }
    .mobile-accordion-container {
        display:none;
        margin:15px 0 30px 0;
        padding-bottom: 20px;
        border-bottom: 1px solid;
        border-bottom-color: var(--badlands);
    }
    .overflow-mobile {
        overflow: unset !important;
    }
    .mobile-only {
        display:block;
    }
}

@media (max-width:700px) {
    .table-display {
        display: block;
        width: 100%;
    }
    .cell50 {
        display: block;
        width: 100%;
        padding: 0;
    }
}

@media only screen and (max-width: 667px) {
    p.search-item {
        width: 100%;
    }
    p.search-item {
        min-height: 25px;
    }
    h1 {
        font-size: 2em;
    }
    h2 {
        font-size: 1.8em;
    }
    h3 {
        font-size: 1.6em;
    }
    h4 {
        font-size: 1.3em;
    }
    h5 {
        font-size: 1.1em;
    }
    .logo-bg svg#Layer_1 {
        width: 80%;
    }
    .logo-bg {
        height: 300px;
    }
    .mobile-clear-float {
        float: none;
    }
    .button {
        display:block;
        width:80%;
        margin:0 0 10px 0;
    }
    .mobile-hide {
        display: none;
    }
    .mobile-black {
        color: var(--dark-sky);
    }
    .mobile-block {
        display:block;
    }
    #back-to-top {
        bottom: 150px;
    }

    /*mega menu*/
    .ltd-search-form .button {
        width: unset;
    }
    form.gsc-search-box {
        width: 100% !important;
    }
    .toggle-gcs {
        background-size: 25px;
        width: 25px;
        height: 25px;
    }
    .megamenu-submenu {
        background: var(--badlands);
    }
    .top-nav-menu {
        column-gap: 15px;
    }
    .menu-header {
        background: var(--salt);
        position: absolute;
        width: 100%;
        z-index: 100;
    }
    .header-megamenu-nav {
        display: block;
        width: 100%;
    }
    .mobile-menu {
        background: var(--coal);
        height: 50px;
        position: relative;
    }
    .menu-no-link {
        padding: 15px;
        text-transform: uppercase;
    }
    .header-megamenu-nav .megamenu-item .menu-no-link:hover,  .header-megamenu-nav .megamenu-item.active .menu-no-link:hover {
        color: var(--salt);
        background-image: linear-gradient(to top, var(--granite) 50%, var(--granite) 50%);
        width: auto;
    }
    .mobile-menu-button {
        background: none;
        border: none;
        display: inline-block;
        right: 20px;
        top: 8px;
        position: absolute;
        padding: 7px 7px 5px 7px;
        transition: opacity .25s ease;
    }
    .is-active .mobile-menu-middle {
        opacity: 0;
    }
    .is-active .mobile-menu-top {
        transform: rotate(45deg);
        transform-origin: left;
    }
    .is-active .mobile-menu-bottom {
        transform: rotate(-45deg);
        transform-origin: left;
        margin-top: 12px;
    }
    .mega-menu-first, .mega-menu-last {
        margin-right: 0;
        margin-left: 0;
    }
    .submenu-no-link.active {
        background-position: left bottom;
        color: var(--salt);
        background: var(--coal) !important;
    }
    .submenu-no-link{
        width: unset;
    }
    .submenu-no-link.active:after{
        background-image: url("/themes/arup/images/icons/white-caret-right.svg") ;
        right: 5px;
    }
    .mobile-menu-button span {
        background-color: var(--salt);
        display: block;
        height: 2px;
        margin: 1px auto 6px 5px;
        width: 30px;
    }
    .is-active .mobile-menu-button {
        right: 20px;
        padding: 5px 0 1px 9px;
    }
    .menu-header {
        position: relative;
    }
    .toggle-parent {
        cursor: pointer;
    }
    .megamenu-item, .megamenu-submenu,  .submenu-content {
        display: none;
    }
    li.megamenu-item.top-nav-mobile {
        text-align: center;
    }
    li.megamenu-item.top-nav-mobile ul li, li.megamenu-item.top-nav-mobile ul li a {
        display: inline !important;
        padding: 5px 10px !important;
    }
    .header-megamenu-nav .megamenu-item .menu-no-link, .header-megamenu-nav .megamenu-item .menu-link a{
        width: 100%;
        display: block;
        padding: 20px;
        cursor: pointer;
        color: var(--dark-sky);
        background-image: none;
    }
    .header-megamenu-nav .megamenu-item .menu-link a, li.megamenu-item.top-nav-mobile ul li a, li.megamenu-item.top-nav-mobile ul li.active a,  .top-nav-mobile.active {
        color: var(--red-rock) !important;
    }
    li.megamenu-item.top-nav-mobile ul li, li.megamenu-item.top-nav-mobile ul li a {
        display: inline;
        padding: 5px 10px;
    }
    li.megamenu-item.top-nav-mobile ul li {
        border-right: 1px solid var(--badlands);
    }
    li.megamenu-item.top-nav-mobile ul li:last-of-type {
        border-right: none;
    }
    .active.megamenu-submenu {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: normal;
        align-items: normal;
        align-content: normal;
        font-size: 12pt;
    }
    .active .dropdown-menu-left {
        padding: 0!important;
        width: 170px;
        background: var(--badlands);
    }
    .megamenu-item.active .submenu-content.active {
        display: block;
        width: 90%;
        padding: 10px 5px;
    }
    .active.dropdown-menu-right, .active.dropdown-menu-left {
        display: block;
        flex-grow: 0;
        flex-shrink: 1;
        flex-basis: auto;
        align-self: auto;
        order: 0;
        padding: 0 5px;
    }
    li.megamenu-item.top-level-menu {
        margin-top: 0;
        border: 1px solid var(--badlands);
    }
    li.megamenu-item.top-nav-mobile ul{
        padding-bottom: 20px;
        background: var(--salt);
    }
    .is-active .megamenu-item {
        display: block;
        background: var(--salt);
    }
    .header-megamenu-nav .megamenu-item .menu-no-link{
        width: 100%;
        display: block;
        padding: 15px;
        cursor: pointer;
    }
    .header-megamenu-nav .megamenu-item .menu-no-link {
        color: var(--dark-sky);;
        background-image: none;
    }
    .megamenu-item .menu-no-link:after {
        content: '';
        background: url(/themes/arup/images/icons/caret-right.svg) no-repeat;
        background-size: 15px !important;
        display: inline-block;
        margin-left: 5px;
        width: 15px;
        height: 15px;
    }
    .megamenu-item.active .menu-no-link:after {
        background: url(/themes/arup/images/icons/caret-down-rev.svg) no-repeat;
    }
    .megamenu-item.active .megamenu-submenu {
        display: flex;
        font-size: 12pt;
        background: var(--salt);
    }
    .megamenu-item .dropdown-menu-left, .megamenu-item .submenu-no-link {
        padding: 10px 44px 10px 9px;
        background: var(--badlands);
        margin: 0;
        display: block;
        border-bottom: 1px solid var(--salt);
    }
    .header-megamenu-nav .megamenu-item.active .menu-no-link {
        color: var(--salt);
        font-weight: bold;
        background: var(--red-rock);
        border-bottom: 1px solid var(--salt);
    }
    .megamenu-item .submenu-no-link {
        cursor: pointer;
        border-bottom: 1px solid var(--salt);
    }
    .submenu-no-link span {
        padding-right: 0;
        width: 100%;
    }
    .megamenu-item .submenu-no-link:last-of-type {
        border-bottom: none;
    }
    .submenu-content.active {
        display: block !important;
    }
    .megamenu-item .megamenu-submenu {
        position: unset;
    }
    div svg:hover path, .submenu-no-link.active svg polygon, div svg:hover path {
        fill: var(--salt);
    }
    .submenu-content-rt-pnl, .submenu-content-lt-pnl {
        width: 90%;
        padding: 0 5% 5%;
        border-right: none;
    }
    .megamenu-item.active .submenu-content-rt-pnl, .megamenu-item.active .submenu-content-lt-pnl {
        display: block;
        width: 90%;
        padding: 0 5% 0 5%;
    }
    .submenu-content-rt-pnl a, .submenu-content-lt-pnl a {
        padding: 10px 0;
        width: 100%;
        display: inline-block;
    }
    .submenu-content-rt-pnl p, .submenu-content-lt-pnl p {
        padding: 0;
    }
    .submenu-content-rt-pnl p, .submenu-content-lt-pnl p {
        padding: 0;
    }
    .megamenu-item .megamenu-submenu {
        border-bottom: none;
    }
    .submenu-no-link svg {
        width: 20px;
        height: auto;
        margin: auto;
        cursor: pointer;
        overflow: visible;
        position: absolute;
        right: 10px;
        top: 0;
        bottom: 0;
    }
    .megamenu-item.top-level-menu.mega-menu-about.mega-menu-last {
        -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
        box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
        border-bottom: var(--arup-red) 3px solid;
    }/*end mega menu*/

    #subnavigation .menu {
        display: block;
    }
    #subnavigation .menu li {
        margin: 10px 0 0 0;
        float: left;
        padding: 10px 20px 0 0;
    }
    #subnavigation .menu li a {
        padding: 5px 0;
        border-bottom: 3px solid #ddd;
    }
    .width85, .width80, .width75, .width70, .width65, .width60,  .width55, .width50, .width48, .width45, .width40, .width35, .width30, .width25, .width22, .width20 {width: 100%;}
    table {
        margin: 10px 10px 10px 2px;
    }
    table th, table td {
        font-size: 12pt;
    }
    .responsive-table [data-title]:hover:after {
        opacity: 0;
        visibility: hidden;
    }
    .responsive-table {
        margin-bottom: 1.5em;
    }
    thead th {
        font-size: 12px;
    }
    .responsive-table thead {
        position: absolute;
        clip: rect(1px 1px 1px 1px);
        /* IE6, IE7 */
        clip: rect(1px, 1px, 1px, 1px);
        padding: 0;
        border: 0;
        height: 1px;
        width: 1px;
        overflow: hidden;
    }
    .responsive-table thead th {
        font-weight: normal;
        text-align: center;
    }
    .responsive-table thead th:first-of-type {
        text-align: left;
    }
    .responsive-table tbody,
    .responsive-table tr,
    .responsive-table th,
    .responsive-table td {
        display: block;
        padding: 0;
        text-align: left;
        white-space: normal;
    }
    .responsive-table th,
    .responsive-table td {
        padding: .5em;
        vertical-align: middle;
    }
    .responsive-table caption {
        margin-bottom: .02em;
        font-size: 1em;
        font-weight: bold;
    }
    .responsive-table tfoot {
        font-size: .75em;
        color: var(--granite);
    }
    .responsive-table tbody tr {
        margin-bottom: .7em;
    }
    .responsive-table tbody tr:last-of-type {
        margin-bottom: 0;
    }
    .responsive-table tbody th[scope="row"], .responsive-table tbody th[scope="rowgroup"] {
        background-color: rgba(219, 224, 226, 0.78);;
        text-align: center;
    }
    .responsive-table tbody td {
        text-align: left;
        font-size: 15px;
    }
    .responsive-table tbody td[data-title]:before {
        content: attr(data-title);
        text-align: left;
        font-size: .8em;
        display: block;
        padding-bottom: 5px;
        color: rgba(94, 93, 82, 0.75);
    }
    table tfoot {
        font-size:.8em;
    }
    table tfoot tr td {
        border-top:2px solid var(--granite);
    }

    .mobile-width100 {
        width: 100% !important;
    }
    .mobile-width90{
        width: 90% !important;
    }

    /*  Research and Innovation */
    .vert-box {
        display: block;
        width: 75%;
    }
    .vert-box .black-bg {
        border: 1px solid var(--dark-sky);
    }
    .research-innovation .quote blockquote p:first-child:before {
        font-size: 5em;
    }
    .research-innovation-1 .research-innovation-container {
        margin-top: -61px;
    }
    .number-flex {
        height: unset;
        align-items: baseline;
    }
    .number-flex:first-of-type {
        margin: 0 auto 40px 0;
    }
    .number-flex-content {
        padding: 5px 0;
        font-size: x-large;
    }
    .number-flex-content:before {
        content: none;
    }
    .number-flex-content.number-flex-content-top {
        padding-top: unset;
    }
    .hide-desktop {
        display: none;
    }

    #copyright {
        padding: 25px;
        width: 60%;
        margin: 0 auto;
    }

}

@media screen and (max-width: 609px) {
    .expand-box-1, .expand-box-2, .expand-box-3, .expand-box-4 {
        position:relative;
        display:block;
        width:100%;}
}

@media only screen and (max-width:450px) {
    .megamenu-item.active .submenu-content.active {
        display: block;
        width: 95%;
    }
    .active.dropdown-menu-right, .active.dropdown-menu-left {
        padding: 0 10px;
    }
}

@media print {
    .logo-bg { height: 300px;}
}