.testing {border: 10px solid green;}

@font-face {
    font-family: ps4;
    src: url(../fonts/ps4.ttf)
}

@font-face {
    font-family: ps7;
    src: url(../fonts/ps7.ttf)
}



:root {
    --site-font-family: "Montserrat", Roboto, sans-serif;

    --color-text-black: #101921;
    --color-goodrich-red: #CE1126;
    --color-gray-border: #D3D3D3;
    --color-light-gray: #ECECEC;
    --color-dark-gray: #363737;
    --responsive-base-font: 1rem;
}

/* bootstrap over-rides */

@media (min-width: 576px) {
    .container {
    }
}

@media (min-width: 768px) {
    .container {
        &.padLeft {
            padding-left: 128px;
        }
    }
}

@media (min-width: 992px) {
    .container {
        &.padLeft {
            padding-left: 143px;
        }
    }
}

@media (min-width: 1200px) {
    .container {
        &.padLeft {
            padding-left: 143px;
        }
    }
}

@media (min-width: 1400px) {
    .container {
        max-width:1300px;
        &.padLeft {
            padding-left: 143px;
        }
    }
}

@media (min-width: 1600px) {
    .container {
        max-width:1400px;
        &.padLeft {
            padding-left: 143px;
        }
    }
}


html {
    height: 100%;
}

html body {
    font-family: var(--site-font-family);
    height: 100%;
    overflow-x: hidden;
}

/* global utilities */
.fw-1 {font-weight: 100;}
.fw-2 {font-weight: 200;}
.fw-3 {font-weight: 300;}
.fw-4 {font-weight: 400;}
.fw-5 {font-weight: 500;}
.fw-6 {font-weight: 600;}
.fw-7 {font-weight: 700;}
.fw-8 {font-weight: 800;}
.fw-9 {font-weight: 900;}

/* .fs-12 {font-size: calc(var(--responsive-base-font) * .75)};
.fs-14 {font-size: calc(var(--responsive-base-font)) * .875};
.fs-16 {font-size: calc(var(--responsive-base-font)) * 1};
.fs-20 {font-size: calc(var(--responsive-base-font)) * 1.25};
.fs-24 {font-size: calc(var(--responsive-base-font)) * 1.5};
.fs-28 {font-size: calc(var(--responsive-base-font)) * 1.75};
.fs-32 {font-size: calc(var(--responsive-base-font)) * 2}; */

.fs-12 {font-size: max(.75rem, calc(var(--responsive-base-font) * .75))}
.fs-14 {font-size: max(.75rem, calc(var(--responsive-base-font) * .875))}
.fs-16 {font-size: max(.75rem, calc(var(--responsive-base-font) * 1))}
.fs-20 {font-size: max(.75rem, calc(var(--responsive-base-font) * 1.25))}
.fs-24 {font-size: max(.75rem, calc(var(--responsive-base-font) * 1.5))}
.fs-28 {font-size: max(.75rem, calc(var(--responsive-base-font) * 1.75))}
.fs-32 {font-size: max(.75rem, calc(var(--responsive-base-font) * 2))}

.lh-200 {line-height: 200%;}

.loader {
    position: absolute;
    top: 0px;
    right: 0px;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, .5);
    background-image: url('/lib/img/loading_spinner.gif');
    background-size: 50px;
    background-repeat: no-repeat;
    background-position: center;
    z-index: 10000000;
}

.navbar {
    img {
        width: 80px;
    }
   /* border-bottom: 1px solid var(--color-gray-border);*/
}

/* MARK: navbar */

.navbar-collapse {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}
.navbar-collapse.collapsing,
.navbar-collapse.show  {
    flex-direction: column;
}

.navbar {
    button.navbar-toggler {
        height: 80px;
    }
}

.navbar-expand-lg {
    margin: auto;
    max-width: 1600px;
}

.nav-links {
    margin-left: -12px; /* to align with header above */
    a {
        display: inline-block;
        border: none;
        color: var(--color-text-black);
        position: relative;
        padding: 10px;
        &.active {
            font-weight: bold;
            color: var(--color-goodrich-red);
        }
        &:hover {
            text-decoration: none;
            background: inherit;
            color: var(--color-goodrich-red);
        }
        &:active {
            font-weight: bold;
            background: inherit;
            color: var(--color-goodrich-red);
        }
        &::after {
            content: '';
            position: absolute;
            bottom: 9px;
            left: 10px; /* = padding-x */
            width: calc(100% - 20px); /* 100% - 2*padding-x */
            height: 2px;
            background-color: black;
            opacity: 1;
            transform: scale(0);
            transform-origin: center;
            transition: transform 150ms;
        }
        &:hover::after {
            transform: scale(1);
        }

    }
}

.pageContent-home {
    .heroContent {
        height: 300px;
        overflow: hidden;
        position: relative;
        /* border: 2px solid blue; */
        .heroContent-backgroundImage {
            width: 100%;
            height: 100%;
            /* border: 2px solid green; */
            position: absolute;
            top: 0;
            &:before {
                background: url('/lib/img/my-lima.png') center repeat-x;
                background-size: auto 300px;
                content: '';
                position: absolute;
                width: 100%;
                height: 100%;
                backdrop-filter: blur(40px);
              }
            &:after {
                content: '';
                position: absolute;
                width: 100%;
                height: 100%;
                backdrop-filter: blur(40px);
                -webkit-backdrop-filter: blur(10px);
            }
        }

        .heroContent-foregroundImage {
            /* border: 2px solid yellow; */
            width: 100%;
            height: 100%;
            position: absolute;
            background: url('/lib/img/my-lima.png') center no-repeat;
            background-size: auto 300px;
            top: 0;
        }

        .titleBackground {
            width: 100%;
            position: absolute;
            bottom: 0;
            background: rgba(255 255 255 /.5);
            backdrop-filter: blur(5px);
            -webkit-backdrop-filter: blur(5px);
            h1 {
                margin: 0;
                padding: 10px 0px;
                span {
                    display: block;
                }
            }
        }
        .hero-levelsDisclaimer {
            position: absolute;
            top: 0px;
            left: 30%;
            color: white;
            font-weight: bold;
            padding: 1rem;
            &.--green {
                background: #4D964E;
            }
            &.--orange {
                background: #E28800;
            }
        }
    }
}

.top-border {
    border-top: 1px solid var(--color-gray-border);
}
/* MARK: pg: Map */

#MicrosoftNav { 
    left: 0 !important; /* bing over-ride */
}
.bm_bottomRightOverlay { 
    right: 400px !important; /* bing over-ride */
}

.mapWrapper {
    position: relative;
}

.mapControls {
    background: rgba(255 255 255 /.75);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    padding: 10px;
    position: absolute;
    top: 0;
    right: 0;
    width: 400px;
    min-width: 400px;
    z-index: 100000;
    transition: right 1s ease-in-out;
    overflow-x: visible;
    .mapControls-innerWrapper {
        height: 100%;
        padding: 16px;
        overflow-y: auto;
    }
    &.closed {
        right: -390px;
        button.mapToggle {
            .toggleIcon {
                rotate: 135deg;
            }
        }
    }

    button.mapToggle {
        all: unset;
        background: rgba(255 255 255 /.75);
        border-radius: 5px 0 0 5px;
        width: 40px;
        height: 40px;
        position: absolute;
        top: 10px;
        left: -40px;
        text-align: center;
        padding-right: 6px;
        box-sizing: border-box;
        .toggleIcon {
            margin: auto;
            width: 14px;
            height: 14px;
            border: 4px solid #666;
            border-top: 0;
            border-left: 0;
            rotate: -45deg;
            transition: rotate 1s ease-in-out;
        }
    }
}

#containerBarChart {
    height: 300px;
}

/* MARK: site footer */

.footer {   
    background: var(--color-dark-gray);
    border-top: 5px solid var(--color-goodrich-red);
    color: white;
    padding: 50px 0;   
}

.footerColumn:nth-child(1) {
    flex-grow: 1;
}

.footerColumn:nth-child(2) {
    min-width: 150px;
    max-width: 300px;
}

.last__content {
    position: absolute;
    bottom: 0px;
}

@media (width <= 768px) {
    : root {
        --responsive-base-font: .8rem;
    }
    .navbar {
        img {
            width: 45px;
        }
        button.navbar-toggler {
            height: 45px;
        }
        .nav-links {
            margin-top: 20px;
            padding-right: 20px;
            border-right: 2px solid red;
            align-items: flex-end;
            a {
                font-size: 20px !important;
            }
            .languageOptions {
                padding-right: 10px;
                padding-top: 20px;
            }
        }
    }
    .navbar:not(.collapsed) {
        background: linear-gradient(0deg, rgba(209,209,209,1) 0%, rgba(240,240,240,1) 0%, rgba(255,255,255,1) 60%);
    }

    .pageContent-home {
        .heroContent {
            height: 200px;
            .heroContent-backgroundImage {
                &:before {
                    background-size: auto 200px;
                  }
            }
            .heroContent-foregroundImage {
                background-size: auto 200px;
            }
        }
    }
}