@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');

@font-face {
    font-family: 'Helvetica-LT-Std-Condensed';
    src: url(/fonts/Helvetica-LT-Std-Condensed.otf) format('opentype');
}


/*#region header*/


    .header-red-box > .logo-wrapper {
        padding: 0;
    }

        .header-red-box > .logo-wrapper > a {
            display: inline-block;
        }

            .header-red-box > .logo-wrapper > a img.logo-size {
                display: block;
                width: 100%;
            }


.logo-heading {
    margin-bottom: 0;
    font-size: small;
    max-width: 350px;
    max-height: 59px;
}

    .logo-heading img, .logo-heading a {
        display: inline-block;
        color: #fff;
        text-decoration: none;
    }

    .logo-heading a {
        vertical-align: middle;
    }

    .logo-heading img {
        height: 50px;
        margin-bottom: 4px;
    }

    .logo-heading a > span {
        display: inline-block;
    }

        .logo-heading a > span:nth-child(1) {
            padding-left: 3px;
            padding-right: 12px;
        }

    .logo-heading a span span:nth-child(1) {
        display: inline-block;
        letter-spacing: 0.7px;
        font-family: Helvetica-LT-Std-Condensed;
        font-size: 11px;
        font-weight: bold;
        border-bottom: 0.5px solid #fff;
    }

    .logo-heading a span > span:nth-child(3) {
        display: inline-block;
        font-family: Helvetica-LT-Std-Condensed;
        font-size: 10px;
        font-weight: bold;
        letter-spacing: 0.1px;
    }

    .logo-heading a span:nth-child(2) {
        padding: 10px 0 10px 15px;
        border-left: 1.5px solid #fff;
        font-family: Raleway;
        font-weight: 600;
        font-size: 11px;
    }

/*#region Main Nav*/

.open-nav-btn {
    color: #fff;
    font-size: 15px;
    border: 0px solid transparent;
}

    .open-nav-btn:active {
        border: 0px solid transparent;
    }

    .open-nav-btn:focus-visible {
        outline: -webkit-focus-ring-color auto 1px;
    }


#slide-nav {
    position: fixed;
    top: 0;
    right: 0;
    display: grid;
    grid-template-rows: 1fr 9fr;
    align-items: center;
    justify-items: flex-end;
    visibility: hidden;
    opacity: 0;
    width: 0;
    transition: width 0.2s cubic-bezier(0.25,0.1,0.25,1);
    transition: opacity 1s cubic-bezier(0.25,0.1,0.25,1);
    background-color: rgba(36,36,36,0.8);
    z-index: 9999;
    border-left: 2px solid white;
}

    #slide-nav #nav-header {
        display: grid;
        grid-template-columns: 1fr 1fr;
        align-items: center;
        justify-items: flex-end;
        width: 100vw;
        height: 100%;
        padding: 0 10px;
        background-color: #a90b1d;
        box-shadow: 0px 1px 0px 0px #C6C1C1;
        z-index: 9999;
    }

        #slide-nav #nav-header #cs-title {
            display: block;
            justify-self: flex-start;
            font-size: large;
        }

    #slide-nav.nav-active {
        width: 100vw;
        z-index: 9999;
        height: 100%
    }

    #slide-nav.nav-visible {
        visibility: visible;
        opacity: 100;
    }

    #slide-nav .close-btn {
        display: block;
        justify-self: flex-end;
        color: #fff;
        background-color: transparent;
        font-size: medium;
        padding: 5px;
        border: 2px solid #fff;
        border-radius: 3px;
    }

        #slide-nav .close-btn:active {
            background-color: #a90b1d;
        }


        #slide-nav .close-btn span {
        }

    #slide-nav #link-list {
        display: block;
        height: 100%;
        padding: 20px 10px 10px 10px;
        list-style-type: none;
        width: 100vw;
        background-color: #a90b1d;
        margin-bottom: 0;
        overflow-y: scroll;
    }

        #slide-nav #link-list li a {
            display: block;
            background-color: #a90b1d;
            color: #fff;
            padding: 10px 0;
            margin-bottom: 0;
            text-align: left;
            font-size: small;
            text-decoration: none;
            transition: background-color 0.3s linear, color 0.3s linear;
            -webkit-transition: background-color 0.3s linear, color 0.3s linear;
            -moz-transition: background-color 0.3s linear, color 0.3s linear;
            -o-transition: background-color 0.3s linear, color 0.3s linear;
        }

            #slide-nav #link-list li a:hover,
            #slide-nav #link-list li a:focus {
                background-color: #fff;
                color: #000;
            }

        #slide-nav #link-list li:not(:first-child) a {
            border-top: 2px solid #c6c1c1;
        }

        /*Nav Scroll*/
        #slide-nav #link-list::-webkit-scrollbar {
            width: 0.5em;
        }

        #slide-nav #link-list::-webkit-scrollbar-thumb {
            background-color: #fff;
            outline: 1px solid #fff;
        }

/*END Nav Scroll*/

@media (min-width: 320px) {
    #slide-nav #link-list li a {
        font-size: medium;
    }
}

@media (min-width: 576px) {
    #slide-nav #nav-header {
        padding: 0 30px;
    }

    #slide-nav #link-list {
        padding: 20px 30px;
    }

        #slide-nav #link-list li a {
            font-size: medium;
            padding: 10px 0;
        }
}

@media (min-width: 768px) {
    #slide-nav #nav-header {
        width: 100vw;
        padding: 0 40px;
    }

        #slide-nav #nav-header #cs-title {
            /*display: block;
                justify-self: flex-start;
                padding: 10px;*/
            font-size: x-large;
        }


    #slide-nav .close-btn {
        font-size: larger;
        padding: 10px;
    }

    #slide-nav #link-list {
        width: 100vw;
        padding: 30px 40px;
    }

        #slide-nav #link-list li a {
            display: block;
            padding: 10px 0;
            font-size: larger;
        }
}

@media (min-width: 992px) {
    #slide-nav #nav-header {
        width: 50vw;
    }

    #slide-nav #link-list {
        width: 50vw;
    }
}