/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/*
    Created on : Feb 5, 2019, 3:52:07 PM
    Author     : KPetty
*/

/* DEFINE VARIABLENS BELOW */


html, body {
    margin: 0;
    padding: 0;
    /*position: absolute;*/
    font-family: var(--theme-content-font);
    /*width: 100vw;*/
}

html {
    width: 100vw;
    /*background-color: black;*/
}


body {
    /*overscroll-behavior-x: none;*/
    overflow-y: scroll;
    overflow-x: hidden;
    width: 100%;
    height: 100%;
    /*width: 100vw;*/
    box-sizing: border-box;
    background-color: white;
}
body>br {
    display: none;
}

.xdebug-error {
    display: none;
}

#ruler {
    display: flex;
    flex-direction: column;
    position: fixed;
    height: 100vh;
    width: 100vw;
    z-index: 100;
    background-color: rgba(0,100,255,.5);
    align-content: center;
    align-items: center;
    text-align: center;
}

.clear {
    clear: both;
}

* {
    color: var(--theme-text);
    -webkit-tap-highlight-color: transparent;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    box-sizing: border-box;
}

a, a:visited {
    color: var(--theme-hilite);
    text-decoration: none;
}

em {
    font-family: var(--theme-content-font);
}

/*button, input[type=submit], input[type=button], input[type=cancel] {
    background: none;
    color: var(--theme-hilite);
    border: none;
    padding: 0;
    cursor: pointer;
    outline: inherit;
    display: block;
    position: relative;
    font-family: var(--theme-heavy-font);
    font-size: medium;
    transition-property: color, background-color;
    transition-duration: .25s;
    transition-timing-function: easeInCubic;
}

button:hover, input[type=submit]:hover, input[type=button]:hover, input[type=cancel]:hover, button:active, input[type=submit]:active, input[type=button]:active, input[type=cancel]:active {
    color: white;
    background-color: var(--theme-hilite);
}*/

.sButtonR, .sButton, .sButtonSmall, a.sButtonR, a.sButton, a.sButtonSmall, a:visited.sButtonR, a:visited.sButton, a:visited.sButtonSmall {
    -webkit-appearance: none;
    color: white;
    background-color: var(--theme-hilite);
    font-family: var(--theme-heavy-font);
    text-decoration: none;
    display: inline-block;
    display: inline-flex;
    flex-direction: column;
    border: none;
    padding: .5em 1em;
    box-sizing: border-box;
    border-radius: .25em;
    font-size: 1.25em;
    cursor: pointer;
    box-shadow: 2px 2px 6px var(--theme-black);
    transition: all .05s ease-in;
    text-align: center;
    align-content: center;
    vertical-align: middle;
    align-self: center;
    align-items: center;
    justify-content: center;
    outline: none;
    white-space: normal;
}

.sButton, .sButtonSmall, a.sButton, a.sButtonSmall {
    font-size: 1em;
}

.sButtonSmall, a.sButtonSmall {
    padding: .25em .5em;
    font-size: .75em;
    font-family: var(--theme-content-font);
}

.sButtonR:focus:not([type=button][disabled]),
.sButton:focus:not([type=button][disabled]),
.sButtonSmall:focus:not([type=button][disabled]),
.sButtonR:hover:not([type=button][disabled]),
.sButton:hover:not([type=button][disabled]),
.sButtonSmall:hover:not([type=button][disabled]) {
    background-color: var(--theme-alt-hilite) !important;
}

.sButtonR[type=button][disabled],
.sButton[type=button][disabled],
.sButtonSmall[type=button][disabled] {
    filter: brightness(75%);
    cursor: not-allowed;
}

/*.sButtonR:hover, .sButton:hover, .sButtonSmall:hover {
    transform: scale(1.01);
    border-style: inset;
    background-color: var(--theme-alt-hilite);
    box-shadow: 3px 3px 7px var(--theme-black);
}*/

.sButtonR:active, .sButton:active, .sButtonSmall:active {
    transform: scale(.99);
    /*border-style: inset;*/
    box-shadow: 1px 1px 3px var(--theme-black);
}

.sButtonR[disabled], .sButton[disabled], .sButtonSmall[disabled] {
    background-color: var(--theme-alt-hilite);
    cursor: not-allowed;
}

.red {
    background-color: #800 !important;
}

.red:hover, .red:focus {
    background-color: red !important;
}

.orange {
    background-color: orangered !important;
}

.orange:hover, .red:focus {
    background-color: orange !important;
}

#emails {
    position: absolute;
    right: 25%;
    top: 1em;
    font-family: var(--theme-heavy-font);
    max-width: 15em;
}

#header a, #header a:visited {
    text-decoration: none;
}

#header a:hover, a:hover {
    /*    text-decoration: underline;
        text-decoration-color: var(--theme-hilite);*/
}

.teamlyders {
    font-family: var(--theme-content-font);
    color: white;
    background:  var(--theme-gradient);
}

.arbys-us, a.arbys-us {
    /*font-family: var(--rb-font);*/
    color: var(--rb-us);
}

.arbys-us *, a.arbys-us * {
    color: var(--rb-us);
}

/*.tb-us, .tb-ca, a.tb-us, a.tb-ca {
    font-variant-caps: small-caps;
    font-family: var(--tb-font);
        color: var(--tb-us);
        border-color: var(--tb-us);
}*/

.tb-us, a.tb-us, .tb-us *, a.tb-us * {
    color: var(--tb-us);
}

.tb-ca, .tb-ca *, a.tb-ca, a.tb-ca * {
    color: var(--tb-ca);
}



.tr_logo {
    height: 1em;
}

#logo {
    position: absolute;
    left: 2.5em;
    top: 1em;
    /*width: 65vw;*/
    height: 3.63em;
    cursor: pointer;
    width: fit-content;
}

#logo img {
    height: 100%;
}


.logo {
    /*font-family: var(--theme-content-font);*/
    color: var(--theme-hilite);
    font-variant-caps: small-caps;
    /*    text-decoration: underline;
        text-decoration-color: var(--theme-black);*/

    display:inline;
    /*white-space:nowrap;*/
}

.brand-block .logo {
    font-size: larger;
}

#logo h1.full {
    opacity: 1;
}
#logo h1.condensed {
    height: 0px;
    opacity: 0;
    font-size: 0px;
    line-height: 0px;
}

#header, #content, #footer {
    width: 100%;
    /*min-width: 1024px;*/
    position: relative;
    margin: 0;
    padding: 0;
    /*overflow-x: hidden;*/
}

#float-links {
    position: absolute;
    right: 2.5em;
    top: 1em;
    text-align: right;
    height: 3em;
    line-height: 1em;
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: auto;
    grid-template-columns: auto;
    -ms-grid-rows: 1em 1em;
    grid-template-rows: 1em 1em;
}

#float-links a {
    height: 1em;
    line-height: 1em;
    color: #979795;
    text-transform: uppercase;
    display: block;
}

#float-links a:hover {
    color: var(--theme-hilite);
}

#site-navigation {
    display: none;
    position: absolute;
    right: 1em;
    top: 5px;
    text-align: right;
    height: var(--header-hgt);
    line-height: 1em;
}

#float-links-mobile {
    display: none;
}

#header {
    width: 100vw;
    background-color: var(--theme-black);
    top: 0;
    left: 0;
    position: sticky;
    z-index: 200;
    height: var(--header-hgt);
    box-shadow: 0px 0px 23px 0px rgba(0,0,0,.5);
    overflow: hidden;
    /*    padding: 1.5em;*/
    box-sizing: border-box;
    /*display: none;*/
}

#header.opened {
    overflow: visible;
}

#header-gap {
    width: 100%;
    height: var(--header-hgt);
    display: none;
    position: relative;
    clear: both;
}

#header-wrap {
    position: absolute;
    -js-display: flex;
    display: flex;
    align-items: flex-end;
    width: 56em;
    right: 2.5em;
    bottom: 0;
    padding-bottom: 1em;
}

#header, #header * {
    transition: all .25s linear;
}

#navContainer {
    position: relative;
    width: 100%;
    /*background: var(--theme-gradient);*/
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 1fr auto auto auto auto auto auto auto auto;
    grid-template-columns: auto auto auto auto auto auto auto auto;
    -ms-grid-rows: 100%;
    grid-template-rows: 100%;
    flex-direction: row;
    /*height: 2em;*/
    align-items: flex-end;
    /*justify-content: space-between;*/
    align-content: flex-end;
    bottom: 0;
    float: right;
    box-shadow: none;
}

#navContainer a {
    background-color: var(--theme-black);
    background-clip: padding-box;
    width: 100%;
    /*display: inline-block;*/
    text-align: right;
    color: white;
    font-family: var(--theme-heavy-font);
    font-size: 1em;
    text-transform: uppercase;
}

#navContainer a:hover {
    color: var(--theme-hilite);
}


.block {
    content: '.';
    display: block;
    /*    position: sticky;*/
    width: 100%;
    min-height: var(--scr-hgt);
    /*top: var(--header-hgt);*/
    /*background-color: white;*/
    margin-top: var(--header-hgt);
}

#home-block {
    margin-top: 0;
}

.nav-a {
    position: absolute;
    left: 0;
    top: var(--header-hgt-offset);
    scroll-snap-align: start;
}

div.fixed {
    position: fixed;
    width: 100%;
    top: 0;
    padding-top: 20vh;
    height: 80vh;
}

div, section, article {
    display: block;
    position: relative;
    z-index: 1;
    outline: none;
}

div:focus , section:focus , article:focus  {
    outline: none;
}

section {
    max-width: 100vw;
}

#footer {
    background-color: white;
    z-index: 15;
}

#foot-wrap.content-space {
    height: 100%;
    margin-top: 0;
}

.content-space {
    display: block;
    position: relative;
    /*    min-width: 666px;*/
    margin-left: auto;
    margin-right: auto;
    backface-visibility: hidden;
    perspective: 1000;
    transform: translate3d(0,0,0);
    transform: translateZ(0);
    width: 100%;
    border-radius: 0px !important;
    box-sizing: border-box;
    box-shadow: 0px -10px 10px -10px #7b7a79;
}

.center {
    text-align: center;
    vertical-align: middle;
    align-self: center;
    width: 100%;
    display: block;
}

.bold {
    font-weight: bold;
}

#header .content-space, #apply-now-block {
    margin-top: unset;
}

h1, h2, h3, h4, h5, h6 {
    position: relative;
    color: var(--theme-text);
    font-variant: full-width;
    font-family: var(--theme-heavy-font);
    font-weight: 400;
    margin-top: 0;
    margin-bottom: .5em;
    /*    text-decoration: underline;
        text-decoration-color: var(--theme-black);    */
    /*filter: drop-shadow(2px 2px 2px rgba(0,0,0,.5));*/
}

h1 { font-size: 2.5em; }
h2 { font-size: 2em; }
h3 { font-size: 1.75em; }
h4 { font-size: 1.5em; }
h5 { font-size: 1.25em; }
h6 { font-size: 1em; }

hgroup {
    display: block;
    text-align: center;
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 1em;
}

hgroup h1, hgroup h2, hgroup h3, hgroup h4, hgroup h5, hgroup h6 {
    padding-bottom: 0;
    padding-top: 0;
    margin-top: 0;
    margin-bottom: 0;
}

hgroup .logo {
    text-decoration: none;
}

img.pop {
    border-radius: 5px;
    box-shadow: 3px 3px 0px var(--theme-black);
}

.container {
    display: block;
    cursor: pointer;
    width: 58px;
    /*height: 58px;*/
    padding-top: 23px;
}

.bar1, .bar2, .bar3 {
    width: 58px;
    height: 8px;
    background: var(--theme-hilite); /*#979795;*/
    margin: 9px 0;
    transition: 0.4s;
    border-radius: 10px;
}

div.backdrop {
    position: absolute;
    width: 100%;
    height: 100%;
}

.change .bar1 {
    -webkit-transform: rotate(-45deg) translate(-11px, 14px);
    transform: rotate(-45deg) translate(-11px, 14px);
}

.change .bar2 {
    opacity: 0;
}

.change .bar3 {
    -webkit-transform: rotate(45deg) translate(-12px, -16px);
    transform: rotate(45deg) translate(-12px, -16px);
}

.element:not(.block):not(.brand-block) {
    opacity: 0;
    /*transform: scale(.5);*/
    transition: opacity 1s ease;
}

.element.block {
    opacity: 0;
    transition: opacity 1s ease;
}

.ghost {
    color: #7b7a79;
    margin: 0;
    padding: 0;
    padding-top: .5em;
    padding-left: var(--theme-lr-pad);
    padding-right: var(--theme-lr-pad);
    line-height: .74em;
    text-transform: uppercase;
    /*filter: drop-shadow(0px 0px 7px rgba(0,0,0,.5));*/
    z-index: 1;
}



.come-in {
    transform: scale(1) !important;
    opacity: 1  !important;
    /*animation: come-in 1s ease forwards;*/
}

.element.block.come-in {
    /*box-shadow: -2px -2px 2px rgba(0,0,0,.5);*/
}

.come-in:nth-child(odd) {
    animation-duration: 0.6s; /* So they look staggered */
}

.rhombus {
    transform-origin: center center;
    transform: skew(-20deg);
}

.box {
    transition: all .25s ease;
    padding: 0;
    margin: 0;
    width: 100%;
    background-repeat: no-repeat;
    background-clip: padding-box;
    background-position-x: right;
    background-position-y: 0;
    background-size: 50% auto;
    display: -ms-grid;
    display: grid;
    box-sizing: border-box;
    -ms-grid-columns: 50% 50%;
    grid-template-columns: 50% 50%;
    -ms-grid-rows: auto;
    grid-template-rows: auto;
}

.box-content {
    padding: var(--theme-edge-pad) var(--theme-lr-pad);
    box-sizing: border-box;
    direction: ltr;
}

.split-width .box:nth-child(odd){
    background-position-x: right;
    direction: ltr;
    text-align: right;
}

.split-width .box:nth-child(even){
    background-position-x: left;
    direction: rtl;
    text-align: left;
}

.split-width .box:nth-child(odd) .box-content {
    padding-left: 40%;
    text-align: right;
}

.split-width .box:nth-child(even) .box-content {
    padding-right: 40%;
    text-align: left;
}


.box p, .box ul {
    /*    margin-left: 10px;
        margin-right: 10px;*/
    /*text-align: left;*/
}

.box ul {
    list-style: none;
    /*    padding-left: .5em;
        padding-top: .5em;*/
}

.box li {
    /*margin-bottom: .5em;*/
    font-family: var(--theme-content-font);
}

.box strong {
    font-family: var(--theme-content-font);
    /*text-decoration: underline;*/
}

.box-img {
    background-position: center;
    background-size: cover;
}

.box-img picture {
    height: 100%;
    width: 100%;
    -js-display: flex;
    display: flex;
    flex-direction: column;
    align-items: center;
    align-content: center;
    text-align: center;
    justify-content: center;
}

.box-img img {
    padding: 10%;
    width: 100%;
    box-sizing: border-box;
    filter: drop-shadow(0px 0px 5px rgba(0,0,0,.5));
}

.box h1, .box h2, .box h3, .box h4, .box h5, .box h6 {
    display: inline;
}

/*.box:hover, .box:active  {
    background-color: rgba(0,0,0,.5);
    box-shadow: 5px 5px 5px rgba(0,0,0,.5);
    transform: scale(1.01) !important;
}*/

@keyframes come-in {
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.col-2 {
    position: relative;
    display: -ms-grid;
    display: grid;
    width: 100%;
    -ms-grid-columns:  50fr 50fr;
    grid-template-columns: 50fr 50fr;
    -ms-grid-rows: auto;
    grid-template-rows: auto;
}

.four {
    position: relative;
    display: -ms-grid;
    display: grid;
    width: 100%;
    -ms-grid-columns: 50% 50%;
    grid-template-columns: 50% 50%;
    -ms-grid-rows: minmax(504px, max-content) minmax(504px, max-content);
    grid-template-rows: minmax(504px, max-content) minmax(504px, max-content);
    /*grid-gap: 1em;*/
}

.split-width {
    width: 100%;
    position: relative;
    display: block;
}

.col-3 {
    position: relative;
    display: -ms-grid;
    display: grid;
    width: 100%;
    -ms-grid-columns: 1fr 1fr 1fr;
    grid-template-columns: 1fr 1fr 1fr;
    -ms-grid-rows: auto;
    grid-template-rows: auto;
    align-content: center;
    align-items: center
}

.col-4 {
    position: relative;
    display: -ms-grid;
    display: grid;
    width: 100%;
    -ms-grid-columns: 1fr 1fr 1fr 1fr;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    -ms-grid-rows: auto;
    grid-template-rows: auto;
    align-content: center;
    align-items: center
}

.flex-row {
    position: relative;
    -js-display: flex;
    display: flex;
    width: 100%;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-around;
}

/* ------------------------------ Flex Classes ------------------------------ */
.flex, .flex-na {
    display: flex !important;
    flex-wrap: wrap;
}

.flex::after {
    content: "";
    flex: auto;
}

.flex-25 {
    flex: 1 0 25%;
}

.flex-33 {
    flex: 1 0 33.3333333%;
}

.flex-38 {
    flex: 1 0 37.5%;
}

.flex-50 {
    flex: 1 0 50%;
}

.flex-75 {
    flex: 1 0 75%;
}

.flex-100 {
    flex: 1 0 100%;
}

.no-grow {
    flex-grow: 0;
}

.v-center {
    align-items: center;
}

.space-between {
    justify-content: space-between;
}

/* ------------------------- Padding/Margin Classes ------------------------- */

.py-0 {
    padding-top: 0;
    padding-bottom: 0;
}

.py-d25 {
    padding: .25em 0;
}

.py-d5 {
    padding: .5em 0;
}

.py-1 {
    padding: 1em 0;
}

.py-1d5 {
    padding: 1.5em 0;
}

.py-2 {
    padding: 2em 0;
}

.px-0 {
    padding-left: 0;
    padding-right: 0;
}

.px-d25 {
    padding: 0 .25em;
}

.px-d5 {
    padding: 0 .5em;
}

.px-1 {
    padding: 0 1em;
}

.px-1d5 {
    padding: 0 1.5em;
}

.px-2 {
    padding: 0 2em;
}

.pt-0 {
    padding-top: 0;
}

.pt-d25 {
    padding-top: .25em;
}

.pt-d5 {
    padding-top: .5em;
}

.pt-1 {
    padding-top: 1em;
}

.pt-1d5 {
    padding-top: 1.5em;
}

.pt-2 {
    padding-top: 2em;
}

.pr-0 {
    padding-right: 0;
}

.pr-d25 {
    padding-right: .25em;
}

.pr-d5 {
    padding-right: .5em;
}

.pr-1 {
    padding-right: 1em;
}

.pr-1d5 {
    padding-right: 1.5em;
}

.pr-2 {
    padding-right: 2em;
}

.pb-0 {
    padding-bottom: 0;
}

.pb-d25 {
    padding-bottom: .25em;
}

.pb-d5 {
    padding-bottom: .5em;
}

.pb-1 {
    padding-bottom: 1em;
}

.pb-1d5 {
    padding-bottom: 1.5em;
}

.pb-2 {
    padding-bottom: 2em;
}

.pl-0 {
    padding-left: 0;
}

.pl-d25 {
    padding-left: .25em;
}

.pl-d5 {
    padding-left: .5em;
}

.pl-1 {
    padding-left: 1em;
}

.pl-1d5 {
    padding-left: 1.5em;
}

.pl-2 {
    padding-left: 2em;
}

.my-0 {
    margin-top: 0;
    margin-bottom: 0;
}

.my-d25 {
    margin: .25em 0;
}

.my-d5 {
    margin: .5em 0;
}

.my-1 {
    margin: 1em 0;
}

.my-1d5 {
    margin: 1.5em 0;
}

.my-2 {
    margin: 2em 0;
}

.mx-0 {
    margin-left: 0;
    margin-right: 0;
}

.mx-d25 {
    margin: 0 .25em;
}

.mx-d5 {
    margin: 0 .5em;
}

.mx-1 {
    margin: 0 1em;
}

.mx-1d5 {
    margin: 0 1.5em;
}

.mx-2 {
    margin: 0 2em;
}

.mt-0 {
    margin-top: 0;
}

.mt-d25 {
    margin-top: .25em;
}

.mt-d5 {
    margin-top: .5em;
}

.mt-1 {
    margin-top: 1em;
}

.mt-1d5 {
    margin-top: 1.5em;
}

.mt-2 {
    margin-top: 2em;
}

.mr-0 {
    margin-right: 0;
}

.mr-d25 {
    margin-right: .25em;
}

.mr-d5 {
    margin-right: .5em;
}

.mr-1 {
    margin-right: 1em;
}

.mr-1d5 {
    margin-right: 1.5em;
}

.mr-2 {
    margin-right: 2em;
}

.mb-0 {
    margin-bottom: 0;
}

.mb-d25 {
    margin-bottom: .25em;
}

.mb-d5 {
    margin-bottom: .5em;
}

.mb-1 {
    margin-bottom: 1em;
}

.mb-1d5 {
    margin-bottom: 1.5em;
}

.mb-2 {
    margin-bottom: 2em;
}

.ml-0 {
    margin-left: 0;
}

.ml-d25 {
    margin-left: .25em;
}

.ml-d5 {
    margin-left: .5em;
}

.ml-1 {
    margin-left: 1em;
}

.ml-1d5 {
    margin-left: 1.5em;
}

.ml-2 {
    margin-left: 2em;
}

.ctoa {
    position: relative;
    left: 50%;
    top: 0;
    height: auto;
    width: 100%;
    opacity: 1;
    padding: 1em;
    transform: scale(1) translateX(-50%);
    transition: all .5s ease-in-out;
    background-color: white;
    border-radius: 1em !important;
    box-sizing: border-box;
    box-shadow: 0px 0px .5em var(--theme-text);
    overflow: hidden;
}

/* Begin Responsive Layout (simple menu)
====================================================================================== */
/* All size smaller than 1024
====================================================================================== */
@media only screen and (min-width: 1921px){
    :root {
        font-size: 22px;
        --font-size: 22px;
        font-size: var(--font-size);
    }

    .info-block {
        font-size: 1em !important;
    }
}


@media only screen and (max-width: 900px) {
    :root {
        font-size: 16px;
        --font-size: 16px;
        font-size: var(--font-size);
        --header-hgt: calc(58px + 1em);
        --header-hgt-offset: calc(var(--header-hgt) * -1);
        --scr-hgt: calc(100vh + var(--header-hgt-offset));
        --theme-edge-pad: 15px;
        --theme-lr-pad: 15px;
    }



    #emails {
        display: none;
    }

    #site-navigation {
        top: 0;
    }

    .container {
        top: 0.3em;
        padding-top: 0;
    }

    .bar1, .bar2, .bar3 {
        margin: 10px 0;
    }

    .change .bar1 {
        transform-origin: center;
        -webkit-transform: rotate(-45deg) translate(-8px, 16px);
        transform: rotate(-45deg) translate(-12px, 13px);
    }

    .change .bar3 {
        transform-origin: center;
        -webkit-transform: rotate(45deg) translate(-8px, -17px);
        transform: rotate(45deg) translate(-12px, -13px);
    }

    @media only screen and (max-width: 900px) and (orientation: portrait) {
        :root {
            /*            font-size: 16px;*/
            --rb-us-grad: linear-gradient(to bottom, #d91920 0%, #d91920 75%, #842976 100%);
            --tb-us-grad: linear-gradient(to bottom, #842976 0%, #61228c 10%, #4c3097 90%);
            --tb-ca-grad: linear-gradient(to bottom, #4c3097 0%, #005eb8 20%);
        }

        .box {
            height: fit-content;
            -ms-grid-columns: 100%;
            grid-template-columns: 100%;
            -ms-grid-rows: 16vh auto;
            grid-template-rows: 16vh auto;
        }

        .split-width .box:nth-child(odd){
            direction: ltr;
            text-align: left;
        }

        .split-width .box:nth-child(even){
            direction: ltr;
            text-align: left;
        }

        .split-width .box:nth-child(odd) .box-content{
            direction: ltr;
            text-align: left;
        }

        .split-width .box:nth-child(even) .box-content{
            direction: ltr;
            text-align: left;
        }

        .split-width .box .box-img {
            grid-row-start: 1;
            grid-row-end: 1;
        }

        .split-width .box .box-content {
            grid-row-start: 2;
            grid-row-end: 2;
        }


        /*        .box-img img {
                    height: unset;
                    width: 80%;
                    align-self: center;
                }*/
    }

    @media only screen and (max-width: 900px) {
        .box-img img {
            height: unset;
            width: 80%;
            padding: 0;
            align-self: center;
        }
    }
    #header {
        min-height: var(--header-hgt);
        /*line-height: var(--header-hgt);*/
        box-sizing: border-box;
        padding-top: 0px;
        top: 0;
        /*overflow: hidden;*/
    }

    #header-wrap {
        position: absolute;
        left: 0;
        width: 100%;
        color: white;
        height: fit-content;
        top: -1000px;
        display: block;
        visibility: hidden;
        transition: all .25s ease;
        z-index: -1;
        max-height: calc(var(--scr-hgt) - 8vh);
        overflow-y: auto;
        padding: 0;
        box-shadow: 0px 0px 12px 0px rgba(0,0,0,.75);
    }

    #header-wrap.opened {
        visibility: visible;
        top: var(--header-hgt);
    }

    #navContainer {
        width: 100%;
        position: relative;
        display: -ms-grid;
        display: grid;
        background: #7b7a79;
        -ms-grid-columns: auto;
        grid-template-columns: 50fr 50fr !important;
        -ms-grid-rows: auto auto auto auto auto auto auto auto auto;
        grid-template-rows: auto auto auto auto auto auto auto auto auto;
        height: fit-content;
        padding: 3px;
    }

    #navContainer a {
        background: var(--theme-text);
        color: white;
        -js-display: flex;
        display: flex;
        height: 3em;
        text-align: left;
        font-size: 1.2em;
        border-bottom: none;
        border: 3px solid transparent;
        background-clip: padding-box;
        padding-left: .5em;
        align-items: center;
        filter: drop-shadow(0 0 2px black);
    }

    #float-links a {
        font-size: 1.5em;
        height: auto;
        padding-left: 1em;
        padding-right: 1em;
        text-align: left;
        border-top: 1px dashed var(--theme-hilite);
    }

    #header a, #header a:visited {
        color: white;
        text-decoration: none;
    }

    a:hover, a:active {
        /*        text-decoration: underline;
                text-decoration-color: var(--theme-hilite);*/
    }

    .apply-pop-out button {
        /*margin-right: 2em;*/
    }

    #logo {
        left: 0;
        top: 0px;
        padding: var(--theme-edge-pad);
        background-color: var(--theme-black);
        width: 100%;
        height: 100%;
        box-sizing: border-box;
    }

    #logo img {
        /*        height: calc(100% - 1em);*/
    }



    #float-links {
        display: none;
    }

    #float-links-mobile {
        display: contents;
    }

    #site-navigation  {
        display: block;
    }

    .four {
        position: relative;
        -js-display: flex;
        display: flex;
        width: 100%;
        flex-direction: column;
        -ms-grid-columns: unset;
        grid-template-columns: unset;
        -ms-grid-rows: unset;
        grid-template-rows: unset;
    }

    .block {
        width: 100vw;
    }

    .flex-100-sm {
        flex: 1 0 100%;
    }

    .flex::after {
        content: none;
        flex: none;
    }

}

/*@media (scripting: none) {
    * {
        opacity: 1 !important;
        transform: scale(1) !important;
    }
}*/

@media only screen and (max-width: 900px) and (orientation: landscape) {

    .four {
        position: relative;
        display: -ms-grid;
        display: grid;
        width: 100%;
        -ms-grid-columns: 50% 50%;
        grid-template-columns: 50% 50%;
        -ms-grid-rows: auto auto;
        grid-template-rows: auto auto;
    }
}

@media only screen and (max-width: 900px) and (orientation: portrait) {
    #header {
        top: unset;
        bottom: 0;
    }

    #header-wrap {
        bottom: -1000px;
        top: unset;
    }

    #header-wrap.opened {
        top: unset;
        bottom: var(--header-hgt);
    }

    #site-navigation {
        right: unset;
        left: 50%;
        transform: translateX(-50%);
    }

    .brand-image img {
        top: 0;
    }

    .top-button-float {
        position: absolute !important;
        bottom: .3em !important;
        right:  calc(var(--theme-edge-pad) * 2) !important;

    }

    .top-button-float .top-button {
        background-color: transparent !important;
    }
}