@charset "UTF-8";

/** fonts */
@font-face {
    font-family:"Choice Circular";
    src:url("fonts/ChoiceCircularA/choicecirculara-bold-webfont.woff2") format("woff2"), url("fonts/ChoiceCircularA/choicecirculara-bold-webfont.woff") format("woff");
    font-weight:400;
    font-style:bold
}
@font-face {
    font-family:"Euclid Circular A";
    src:url("fonts/EuclidCircularA/EuclidCircularA-Regular-WebS.woff2") format("woff2"), url("fonts/EuclidCircularA/EuclidCircularA-Regular-WebS.woff") format("woff");
    font-weight:400;
    font-style:normal
}
@font-face {
    font-family:"Euclid Circular A";
    src:url("fonts/EuclidCircularA/EuclidCircularA-RegularItalic-WebS.woff2") format("woff2"), url("fonts/EuclidCircularA/EuclidCircularA-RegularItalic-WebS.woff") format("woff");
    font-weight:400;
    font-style:italic
}
@font-face {
    font-family:"Euclid Circular A";
    src:url("fonts/EuclidCircularA/EuclidCircularA-Medium-WebS.woff2") format("woff2"), url("fonts/EuclidCircularA/EuclidCircularA-Medium-WebS.woff") format("woff");
    font-weight:500;
    font-style:normal
}
@font-face {
    font-family:"Euclid Circular A";
    src:url("fonts/EuclidCircularA/EuclidCircularA-MediumItalic-WebS.woff2") format("woff2"), url("fonts/EuclidCircularA/EuclidCircularA-MediumItalic-WebS.woff") format("woff");
    font-weight:500;
    font-style:italic
}
@font-face {
    font-family:"Euclid Circular A";
    src:url("fonts/EuclidCircularA/EuclidCircularA-Semibold-WebS.woff2") format("woff2"), url("fonts/EuclidCircularA/EuclidCircularA-Semibold-WebS.woff") format("woff");
    font-weight:600;
    font-style:normal
}
@font-face {
    font-family:"Euclid Circular A";
    src:url("fonts/EuclidCircularA/EuclidCircularA-SemiboldItalic-WebS.woff2") format("woff2"), url("fonts/EuclidCircularA/EuclidCircularA-SemiboldItalic-WebS.woff") format("woff");
    font-weight:600;
    font-style:italic
}
@font-face {
    font-family:"Euclid Circular A";
    src:url("fonts/EuclidCircularA/EuclidCircularA-Bold-WebS.woff2") format("woff2"), url("fonts/EuclidCircularA/EuclidCircularA-Bold-WebS.woff") format("woff");
    font-weight:700;
    font-style:normal
}
@font-face {
    font-family:"Euclid Circular A";
    src:url("fonts/EuclidCircularA/EuclidCircularA-BoldItalic-WebS.woff2") format("woff2"), url("fonts/EuclidCircularA/EuclidCircularA-BoldItalic-WebS.woff") format("woff");
    font-weight:700;
    font-style:italic
}
/** root */
:root {
    --gutter-x:36px;
    --gutter-y:36px;
    --gutter-h1:36px;
    --gutter-h3:28px;
    --gutter-p:16px;
    --max-width:calc( 1440px + ( var( --gutter-x ) * 2 ) );
    --gap:22px;
    --Primary-White:#FFFFFF;
    --Primary-Red:#E60F00;
    --Primary-Grey:#7A7D82;
    --Primary-Dark-Grey:#545659;
    --primary-tint-grey-7:#F6F6F6;
    --primary-tint-red-7:#FDEEED;
    --color-gray:#7B7D82;
    --color-light-gray:rgba( 213, 214, 214, 0.60 );
    --navText:1em;
    --duration:0.322s;
    --h2:2em;
    --h3:1.75em;
    --h4:1.25em;
    --h5:1em;
    --p-large:1.25em;
    --p:1em;
}
@media screen and ( min-width:992px ) {
    :root {
        --gutter-x:60px;
        --gutter-y:60px;
        --gutter-h1:61px;
        --gutter-h3:33px;
        --gutter-p:19px;
        --h2:2.7166875em;
        --h3:2.1083125em;
        --h4:1.6083125em;
        --h5:1.1433125em;
        --p-large:1.6083125em;
        --p:1.215em;
    }
}
@media screen and ( min-width:1200px ) {
    :root {
        --gutter-y:80px;
        --gutter-h1:80px;
        --gutter-h3:38px;
        --gutter-p:22px;
        --h2:3.25em;
        --h3:2.375em;
        --h4:1.875em;
        --h5:1.25em;
        --p-large:1.875em;
        --p:1.375em;
    }
}
/** padding */
[class*="padding-"] {
    --top:0;
    --left:0;
    --right:0;
    --bottom:0;
    padding:var( --top ) var( --right ) var( --bottom ) var( --left );
}
.padding-top-h1 { --top:var( --gutter-h1 ); }
.padding-bottom-h1 { --bottom:var( --gutter-h1 ); }
/** colors */
.color-primary-red { color:var( --Primary-Red ); }
.background-primary-tint-grey { background-color:var( --primary-tint-grey-7 ); }
.background-primary-tint-red { background-color:var( --primary-tint-red-7 ); }
/** body */
html { scroll-behavior:smooth; }
body {
    font-family:"Euclid Circular A", sans-serif;
    background-color:var( --Primary-White );
    color:var( --Primary-Dark-Grey );
    box-sizing:border-box;
    overflow-anchor:none;
}
body *,
body *:after,
body *:before { box-sizing:inherit; }
/** text */
h1, h2, h3, h4, h5, p {
    margin:0;
    padding:0;
}
h1 { font-family:"Choice Circular", sans-serif; }
h2, .h2 {
    font-style:normal;
    font-size:var( --h2 );
    font-weight:700;
    line-height:100%; /* 52px */
    letter-spacing:-2.08px;
}
h3, .h3 {
    font-size:var( --h3 );
    font-style:normal;
    font-weight:700;
    line-height:120%; /* 45.6px */
    letter-spacing:-0.76px;
}
h4, .h4 {
    font-size:var(--h4 );
    font-style:normal;
    font-weight:600;
    line-height:120%; /* 36px */
    letter-spacing:-0.6px;
}
h5, .h5 {
    font-size:var( --h5 );
    font-style:normal;
    font-weight:600;
    line-height:130%; /* 23.781px */
    letter-spacing:-0.366px;
}
p, .p {
    font-size:var( --p );
    font-style:normal;
    font-weight:500;
    line-height:140%; /* 22.4px */
}
p.large {
    font-size:var( --p-large );
    line-height:120%; /* 36px */
}
/** link */
a.link {
    color:var( --Primary-Red );
    text-decoration:underline;
    text-decoration-color:transparent;
    transition-property:text-decoration-color;
    transition-duration:var( --duration );
    transition-timing-function:ease-out;
}
a.link:hover,
a.link:active,
a.link:focus { text-decoration-color:var( --Primary-Red ); }
/** header#site-header */
header#site-header {
    position:sticky;
    top:0;
    background-color:var( --Primary-White );
    z-index:10;
}
header#site-header > .wrapper {
    margin:0 auto;
    padding:0 var( --gutter-x );
    width:100%;
    max-width:var( --max-width );
}
@media screen and ( min-width:992px ) {
    header#site-header > .wrapper {
        display:flex;
        justify-content:space-between;
        align-items:center;
    }
}
header#site-header > .wrapper > .site-banner {
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:var( --gap );
    margin:0;
    padding:0;
    border:0;
    width:100%;
    flex-shrink:1;
    flex-grow:0;
}
header#site-header > .wrapper > .site-banner > .site-branding { padding:var( --gap ) 0; }
@media screen and ( max-width:575px ) {
    header#site-header > .wrapper > .site-banner > .site-branding > a {
        display:block;
        width:auto;
        height:30px;
        aspect-ratio:251.00/30.51;
    }
    header#site-header > .wrapper > .site-banner > .site-branding > a > svg {
        width:100%;
        height:auto;
    }
}
@media screen and ( max-width:380px ) { header#site-header > .wrapper > .site-banner > .site-branding > a { height:25px; } }
header#site-header > .wrapper > .site-banner > #menu-toggle {
    --hamburger-color:var( --color-gray );
    --hamburger-width:25px;
    --hamburger-height:17px;
    margin:0 0 4px 0;
    padding:12px 18px 14px 18px;
    border:0;
    border-radius:9999px;
    order:0;
    display:block;
    cursor:pointer;
    background:var( --color-light-gray );
    display:block;
}
header#site-header > .wrapper > .site-banner > #menu-toggle > span {
    display:flex;
    align-items:center;
}
header#site-header > .wrapper > .site-banner > #menu-toggle > span span {
    transition-property:all;
    transition-duration:var( --duration );
    transition-timing-function:ease-out;
}
header#site-header > .wrapper > .site-banner > #menu-toggle > span > span.hamburger {
    display:block;
    width:var( --hamburger-width );
    height:var( --hamburger-height );
    position:relative;
    margin:0;
    transform:rotate( 0deg );
}
header#site-header > .wrapper > .site-banner > #menu-toggle > span > span.hamburger span {
    position:absolute;
    display:block;
    height:3px;
    width:100%;
    background:var( --hamburger-color );
    border-radius:9999px;
    opacity:1;
    left:0;
    transform:rotate( 0deg );
}
header#site-header > .wrapper > .site-banner > #menu-toggle > span > span.hamburger span:nth-child(1) { top:0px; }
header#site-header > .wrapper > .site-banner > #menu-toggle > span > span.hamburger span:nth-child(2),
header#site-header > .wrapper > .site-banner > #menu-toggle > span > span.hamburger span:nth-child(3) { top:8px; }
header#site-header > .wrapper > .site-banner > #menu-toggle > span > span.hamburger span:nth-child(4) { top:16px; }
header#site-header > .wrapper > .site-banner > #menu-toggle[aria-expanded="true"] > span > span.hamburger span:nth-child(1),
header#site-header > .wrapper > .site-banner > #menu-toggle[aria-expanded="true"] > span > span.hamburger span:nth-child(4) {
    top:8px;
    width:0%;
    left:50%;
}
header#site-header > .wrapper > .site-banner > #menu-toggle[aria-expanded="true"] > span > span.hamburger span:nth-child(2) { transform:rotate( 45deg ); }
header#site-header > .wrapper > .site-banner > #menu-toggle[aria-expanded="true"] > span > span.hamburger span:nth-child(3) { transform:rotate( -45deg ); }
@media screen and ( min-width:992px ) { header#site-header > .wrapper > .site-banner > #menu-toggle { display:none; } }
header#site-header #site-navigation {
    --opacity:1;
    position:relative;
    display:none;
    top:0;
    left:0;
    opacity:var( --opacity );
}
@media screen and ( min-width:992px ) {
    header#site-header #site-navigation {
        display:block;
        flex-shrink:0;
        flex-grow:1;
    }
}
/** nav ( header/footer ) */
nav > .menu-container > ul {
    position:relative;
    flex-wrap:wrap;
    margin:0;
    padding:0;
    display:flex;
    list-style:none;
    gap:var( --gap );
}
@media screen and ( max-width:991px ) { nav:not( .footer-links ) > .menu-container > ul { flex-direction:column; } }
nav > .menu-container > ul > li {
    margin:0;
    padding:0;
    display:block;
    list-style:none;
}
nav > .menu-container > ul > li > a {
    display:block;
    text-decoration:none;
    font-size:var( --navText );
    color:var( --Primary-Dark-Grey );
    font-style:normal;
    font-weight:500;
    line-height:150%;
    text-decoration:underline;
    text-decoration-color:transparent;
    transition-property:color, text-decoration-color;
    transition-duration:var( --duration );
    transition-timing-function:ease-out;
}
nav > .menu-container > ul > li > a:hover,
nav > .menu-container > ul > li > a:active,
nav > .menu-container > ul > li > a:focus,
nav > .menu-container > ul > li > a.active {
    color:var( --Primary-Red );
    text-decoration-color:var( --Primary-Red );
}
@media screen and ( min-width:992px ) { nav > .menu-container > ul { flex-direction:row; } }
/** mobile view */
body.menu-fade {
    height:100%;
    overflow:hidden;
}
@media screen and ( max-width:991px ) {
    header#site-header #site-navigation {
        --opacity:0.1;
        position:absolute;
        display:none;
        top:100%;
        width:100%;
        overflow-x:hidden;
        transition-property:opacity;
        transition-duration:var( --duration );
        transition-timing-function:ease-in;
        background-color:var( --Primary-White );
    }
    header#site-header #site-navigation > .menu-container {
        position:relative;
        left:200%;
        transition-property:left;
        transition-duration:var( --duration );
        transition-timing-function:ease-out;
        background-color:var( --Primary-White );
        height:100%;
    }
    header#site-header #site-navigation.menu-open { display:block; }
    header#site-header #site-navigation.menu-fade { --opacity:1; }
    header#site-header #site-navigation.menu-fade > .menu-container { left:0; }
    header#site-header #site-navigation > .menu-container > ul { padding:var( --gutter-x ); }
}
@media screen and ( orientation:landscape ) and ( max-width:991px ) { header#site-header #site-navigation { overflow:auto; } }
/** hero */
.hero {
    --hero-height:auto;
    --content-max-width:100%;
    --content-max-height:auto;
    --content-min-height:280px;
    --content-pad:var( --gutter-x );
    --content-h1:2em;
    --content-p:1em;
    background-image:url( 'img/hero.jpg' );
    background-repeat:no-repeat;
    background-size:cover;
    background-position:50% -140px;
    width:100%;
    height:auto;
    max-height:var( --hero-height );
    aspect-ratio:32 / 15;
}
@media screen and ( min-width:768px ) {
    .hero {
        --hero-height:600px;
        --content-max-width:337px;
        --content-max-height:337px;
        --content-pad:33px;
        --content-h1:2.6875em;
        --content-p:1.1875em;
        background-position:50% 100%;
    }
}
@media screen and ( min-width:992px ) {
    .hero { 
        --hero-height:900px;
        --content-max-width:380px;
        --content-max-height:380px;
        --content-pad:38px;
        --content-h1:3.25em;
        --content-p:1.375em;
    }
}
.hero .wrapper {
    margin:0 auto;
    padding:280px 0 0 0;
    width:100%;
    max-width:var( --max-width );
}
@media screen and ( min-width:768px ) { .hero .wrapper { padding:var( --gutter-y ) var( --gutter-x ); } }
.hero .wrapper .content {
    margin:0;
    padding:var( --content-pad );
    background-color:var( --Primary-Red );
    width:100%;
    height:var( --content-max-height );
    max-width:var( --content-max-width );
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    gap:var( --content-pad );
    color:var( --Primary-White );
}
.hero .wrapper .content > h1 {
    margin:0;
    padding:0;
    font-weight:700;
    line-height:100%; /* 52px */
    letter-spacing:-2.08px;
    font-size:var( --content-h1 );
}
.hero .wrapper .content > p {
    margin:0;
    padding:0;
    font-weight:500;
    line-height:140%; /* 30.8px */
    font-size:var( --content-p );
}
/** section(s) */
section {
    --scrollOffset:70px;
    scroll-margin-top:var( --scrollOffset );
    padding:var( --gutter-y ) 0;
}
/** footer */
footer#site-footer {
    padding:var( --gutter-h1 ) 0;
    background-color:var( --Primary-White );
}
footer#site-footer > .wrapper {
    margin:0 auto;
    padding:0 var( --gutter-x );
    width:100%;
    max-width:var( --max-width );
}
@media screen and ( min-width:1200px ) {
    footer#site-footer > .wrapper {

        display:flex;
        justify-content:space-between;
        align-items:center;
    }
}
footer#site-footer > .wrapper > .site-banner {
    display:flex;
    flex-direction:column;
    margin:0;
    padding:0;
    border:0;
}
footer#site-footer > .wrapper > .site-banner > .site-branding { padding:var( --gap ) 0; }
/** background(s) */
.primary-red-bg {
    background-color:var( --Primary-Red );
    color:var( --Primary-White );
}
/** container */
.container {
    margin:0 auto;
    padding:0 var( --gutter-x );
    width:100%;
    max-width:var( --max-width );
    display:block;
}
/** images */
.img {
    margin:0;
    padding:0;
    border:0;
    display:block;
    width:100%;
    max-width:100%;
    height:auto;
}
.img-cropped-sm {
    width:100%;
    max-width:100%;
    height:auto;
    border:0;
    display:block;
}
.img-square-md {
    width:100%;
    max-width:100%;
    height:auto;
}
@media screen and ( max-width:575px ) {
    .img-cropped-sm {
        width:auto;
        height:420px;
        object-fit:cover;
        object-position:25% 50%;
        aspect-ratio:16/9;
    }
}
@media screen and ( max-width:767px ) {
    .img-square-md {
        width:100%;
        max-width:767px;
        height:auto;
        object-fit:cover;
        object-position:50% 50%;
        aspect-ratio:10/10;
    }
}
/** columns(s) */
[class*="column-"] {
    --column-gap:24px;
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:var( --column-gap );
    align-self:stretch;
}
.column-h1 { --column-gap:36px; }
.column-h3 { --column-gap:28px; }
.column-p { --column-gap:16px; }
@media screen and ( min-width:768px ) {
    .column-h1 { --column-gap:61px; }
    .column-h3 { --column-gap:33px; }
    .column-p { --column-gap:19px; }
}
@media screen and ( min-width:992px ) {
    .column-h1 { --column-gap:80px; }
    .column-h3 { --column-gap:38px; }
    .column-p { --column-gap:22px; }
}
/** grid(s) */
[class*="grid-"] {
    --column-gap:38px;
    --row-gap:38px;
    display:grid;
    grid-template-rows:auto;
    column-gap:var( --column-gap );
    row-gap:var( --row-gap );
    align-items:start;
    width:100%;
}
.grid-2 { grid-template-columns:1fr 1fr; }
.grid-2-lg,
.grid-3-md,
.grid-3-lg,
.grid-4-lg { grid-template-columns:1fr; }
.grid-gap-h1 {
    --column-gap:36px;
    --row-gap:36px;
}
.grid-gap-h3 {
    --column-gap:28px;
    --row-gap:28px;
}
@media screen and ( max-width:575px ) {
    .order-sm-1 { order:1; }
    .order-sm-2 { order:2; }
    .order-sm-3 { order:3; }
    .order-sm-4 { order:4; }
    .order-sm-5 { order:5; }
}
@media screen and ( min-width:768px ) {
    .grid-2-lg,
    .grid-3-lg { grid-template-columns:repeat( 2, 1fr ); }
    .grid-3-md { grid-template-columns:repeat( 3, 1fr ); }
}
@media screen and ( min-width:992px ) {
    .grid-3-lg { grid-template-columns:repeat( 3, 1fr ); }
    .grid-4-lg { grid-template-columns:repeat( 2, 1fr ); }
    .grid-gap-h1 {
        --column-gap:61px;
        --row-gap:61px;
    }
    .grid-gap-h3 {
        --column-gap:33px;
        --row-gap:33px;
    }
}
@media screen and ( min-width:1200px ) {
    .grid-4-lg { grid-template-columns:repeat( 4, 1fr ); }
    .grid-gap-h1 {
        --column-gap:80px;
        --row-gap:80px;
    }
    .grid-gap-h3 {
        --column-gap:38px;
        --row-gap:38px;
    }
}
/** icons */
.icon-wrapper { min-height:60px; }
@media screen and ( min-width:576px ) {
    .icon-1 > img {
        width:63.999px;
        height:49.903px;
        aspect-ratio:64.00/49.90;
    }
    .icon-2 > img {
        width:44.394px;
        height:56.813px;
        aspect-ratio:44.39/56.81;
    }
    .icon-3 > img {
        width:51.831px;
        height:58.902px;
        aspect-ratio:51.83/58.90;
    }
    .icon-4 > img {
        width:65.052px;
        height:56.067px;
        aspect-ratio:65.05/56.07;
    }
}
@media screen and ( max-width:575px ) {
    .icon-1 > img {
        width: 48px;
        height: 37.427px;
        aspect-ratio: 48.00/37.43;
    }
    .icon-2 > img {
        width: 33.296px;
        height: 42.61px;
        aspect-ratio:44.39/56.81;
    }
    .icon-3 > img {
        width: 38.873px;
        height: 44.176px;
        aspect-ratio: 38.87/44.18;
    }
    .icon-4 > img {
        width: 48.789px;
        height: 42.05px;
        aspect-ratio: 48.79/42.05;
    }
}
/** timeline */
.timeline {
    --item-width:47.2vw;
    --chevron-width:50px;
    display:flex;
    width:100%;
    overflow-x:auto;
}
.timeline > .timeline-group {
    flex-shrink:0;
    flex-basis:100%;
    display:flex;
    align-items:center;
}
.timeline > .timeline-group > .item {
    --background-color:var( --Primary-Red );
    flex-basis:var( --item-width );
    flex-shrink:0;
    flex-grow:0;
    padding:var( --gutter-h3 );
    height:100%;
    border-top:2px solid var( --Primary-Red );
    background-color:var( --background-color );
}
.timeline > .timeline-group > .item:not( .current ) { color:var( --Primary-White ); }
.timeline > .timeline-group > .item.current { --background-color:var( --primary-tint-grey-7 ); }
.timeline > .timeline-group > .chevron {
    flex-grow:0;
    flex-shrink:0;
    flex-basis:var( --chevron-width );
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
}
@media screen and ( min-width:576px ) {
    .timeline {
        --item-width:47.2%;
        --chevron-width:5.5%;
    }
}
/** downloads */
ul.downloads {
    margin:0;
    padding:0;
    list-style:none;
}
ul.downloads > li > a {
    display:flex;
    align-items:center;
    gap:22px;
    text-decoration:none;
    transition-property:color;
    transition-duration:var( --duration );
    transition-timing-function:ease-out;
    font-size:var( --p );
    font-style:normal;
    font-weight:500;
    line-height:140%; /* 30.8px */
    color:var( --Primary-Dark-Grey );
}
ul.downloads > li > a:hover,
ul.downloads > li > a:active,
ul.downloads > li > a:focus { color:var( --Primary-Red ); }
/** details */
details {
    width:100%;
    display:flex;
    flex-direction:column;
    background-color:var( --Primary-White );
    border-top:2px solid var( --Primary-Red );
    padding:var( --gutter-h3 );
}
details > summary {
    position:relative;
    font-size:var( --h4 );
    font-style:normal;
    font-weight:600;
    line-height:120%; /* 30.88px */
    letter-spacing:-0.515px;
    color:var( --Primary-Dark-Grey );
    cursor:pointer;
    padding-right:var( --gutter-x );
}
details > summary::marker { content:""; }
details > summary::before {
    display:block;
    position:absolute;
    top:0;
    right:0;
    content:url( 'img/icons/faq-chevron.svg' );
    width:30px;
    height:30px;
    transform:rotate( 0deg );
    transform-origin:center center;
    transition-property:transform;
    transition-duration:var( --duration );
    transition-timing-function:ease-out;
}
details > *:not( summary ){
    opacity:0;
    transition-property:opacity;
    transition-duration:var( --duration );
    transition-timing-function:ease-out;
}
details[open] > *:not( summary ){ opacity:1; }
details[open] > summary::before { transform:rotate( 180deg ); }
details > p { padding-top:var( --gutter-h3 ); }
/** faq */
.faq {
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:var( --column-gap );
    width:100%;
    gap:var( --gutter-p );
}
.faq ul {
    margin:0;
    padding:0 0 0 24px;
}
.faq ul > li {
    padding:var( --gutter-p ) 0 0 0;
    font-size:var( --p );
    font-style:normal;
    font-weight:500;
    line-height:140%; /* 27.216px */
    color:var( --Primary-Dark-Grey );
}
/** The Team */
.team-group { padding-top:var( --gutter-h1 ); }
.team-group > .item {
    padding:var( --gutter-h3 );
    height:100%;
    border-top:2px solid var( --Primary-Red );
    background-color:var( --primary-tint-grey-7 );
}
/** Contact */
div[data-form="cp-form"] > div { min-height:1500px; }
/** helpers */
.align-center { margin:0 auto; }
.screen-reader-text {
    border:0;
    clip:rect( 0 0 0 0 );
    height:1px;
    margin:-1px;
    overflow:hidden;
    padding:0;
    position:absolute;
    width:1px;
}
/** skip */
a.skip {
    top:-1000px;
    left:-1000px;
    height:1px;
    width:1px;
    text-align:center;
    overflow:hidden;
    padding:0;
    display:inline-block;
    position:absolute;
    color:black;
    z-index:8888;
}
a.skip:active,
a.skip:focus {
    left:calc( 50% - 100px );
    top:0;
    padding:var( --gutter-p ) 0;
    font-weight:500;
    color:var( --Primary-Dark-Grey );
    width:200px;
    height:auto;
    overflow:visible;
}
/** animations */
@keyframes animateOpacity {
    0% { opacity:0; }
    1% { opacity:0.1; }
    100% { opacity:1; }
}
.ani {
    --opacity:0;
    --default-animation:animateOpacity var( --duration ) ease-out;
    opacity:var( --opacity );
}
.ani.is-animated {
    animation:var( --default-animation );
    opacity:1;
}