﻿/*Navigation*/
.ffa {
    --navbar-height: 80px;
    --navbar-scroll-indicator-height: 4px;
}
.ffa .navbar-ffa {
    width: 100%;
    height: 80px;
    position: fixed;
    height: var(--navbar-height);
    width: 100%;
    top:0;
    z-index: 1;
    background-color: #fff;
    border: none;
    border-radius:0;
    z-index:20;
}
.ffa .navbar-ffa .left {flex: 1; }
.ffa .navbar-ffa .hallmark-container {
    position: absolute;
    left: calc(50% - 36px / 2);
    top:0;
    text-align: center;          
    height: var(--navbar-height);
    font-size: 18px;
    line-height: 100%;
    display: block;
    vertical-align: middle;
    display: flex;
    justify-content: center;
    align-items: center;
    transform: translate(0, 20px);
}
.modal-open .ffa .navbar-ffa .hallmark-container {
    left: calc(50vw - 36px / 2);
}
.ffa .navbar-ffa .hallmark-img {
    width: 36px;
    height: auto;
}
.ffa .navbar-ffa .navbar-button {
    position: absolute;
    top: calc(50% - 13px);
    left: 18px;
    border: none;
    padding: 2px;  
    transform: translate(20px, 20px);
    text-decoration:none;
    background-color: transparent;
}
.ffa .navbar-ffa .navbar-button:hover, 
.ffa .navbar-ffa .navbar-button:focus {
    text-decoration:none;
}
.ffa .navbar-ffa .navbar-button .menu-hamburger:hover,
.ffa .navbar-ffa .navbar-button .menu-hamburger:focus {
    opacity: 0.7;
}
.ffa .navbar-ffa .navbar-button .menu-hamburger { width: 26px; }
.ffa .navbar-ffa .navbar-button .menu-hamburger .glyphicon {
    transform:none;
    display:none;
    font-size: 2.6rem;
    line-height: 2.6rem;
}
.ffa .navbar-ffa .navbar-button .menu-hamburger .bar {
    display: block;
    margin-bottom: 5px;
    height: 4px;
}
.ffa .navbar-ffa .navbar-button .menu-hamburger .bar:last-child {
    margin-bottom:0;
}
.ffa .navbar-ffa.open .navbar-button .menu-hamburger .bar {
    display: none;
}
.ffa .navbar-ffa.open .navbar-button .menu-hamburger .glyphicon {
    display:block;
}
.ffa .navbar-ffa .navbar-button:focus:not(:focus-visible),
.ffa .navbar-ffa .nav-modal .close-button:focus:not(:focus-visible) {
    outline: none;
}
                    
.ffa .navbar-ffa .nav-modal {
    top: var(--navbar-height);
    width: 100%;
    padding: 0 !important;
}
.ffa .navbar-ffa .nav-modal .modal-dialog { 
    width: auto;
    margin:0;
    min-height: 100%;
    background-color: #fff;
}
.ffa .navbar-ffa .nav-modal .close-button {                    
    position: absolute;
    right: 10px;
    top:10px;
    font-size: 4rem;
    line-height: 4rem;
    opacity:0.8;
    z-index: 5;
}
.ffa .navbar-ffa .nav-modal .close-button:hover,
.ffa .navbar-ffa .nav-modal .close-button:focus {
    opacity: 1; 
}
.ffa  .navbar-ffa .nav-modal .row {
    display:flex;
    flex-wrap: nowrap;
    height:100%;
}
.ffa  .navbar-ffa .nav-modal .col {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    min-height: calc(100vh - var(--navbar-height));
    padding: 25px 44px 65px;
}
.ffa .navbar-ffa .nav-modal .fade-container {
    display: none;
    height: 100%;
}
.ffa .navbar-ffa .nav-modal .nav-list {
    height: 100%;
    margin-bottom: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
}
.ffa .navbar-ffa .nav-modal .nav-list-item {
    padding-bottom:48px;
}
.ffa .navbar-ffa .nav-modal .nav-list .first {
    margin-top: auto;
}
.ffa .navbar-ffa .nav-modal .nav-list .last {
    margin-top: auto;
    padding: 0;
}
.ffa .navbar-ffa .nav-modal .nav-link {
    margin-bottom:0;
    font-size: 2.4rem;
    line-height: 3.0rem;
    color: #0066B2;
    text-align: left;
}


.ffa .navbar-ffa.start-at-story .nav-translate-animation {
    transform: none !important;
}
.ffa .navbar-ffa .horizontal-position-indicator {
    display:none;
}

@media (min-width: 992px) {
    .ffa .navbar-ffa .nav-modal {
        top: 0;
    }
    .ffa .navbar-ffa .hallmark-container {
        left: calc(50% - 45px / 2);
        transform: translate(0, 64px);
    }

    .ffa .navbar-ffa .hallmark-img {
        width: 45px;
    }

    .ffa .navbar-ffa .navbar-button {
        transform: translate(104px, 64px);
    }

    .ffa .navbar-ffa .nav-modal .col {
        align-items: center;
        min-height: 100vh;
        padding: 150px 80px;
    }

    .ffa .navbar-ffa .nav-modal .col-right {
        position: relative;
        max-width: 593px;
        /*min-width: 450px;*/
        margin-left: auto;
        align-items: flex-start;
        right: -100%;
    }

    .ffa .navbar-ffa .nav-modal .col-right.slide-in {
        right: 0;
    }

    .ffa .navbar-ffa .nav-modal .col-right .header {
        padding-top: 32px;
        margin-bottom: 16px;
    }

    .ffa .navbar-ffa .nav-modal .nav-list-item {
        padding-bottom: 80px;
    }

    .ffa .navbar-ffa .nav-modal .nav-link {
        font-size: 3.2rem;
        line-height: 4.0rem;
    }

    .modal-open .ffa .navbar-ffa .horizontal-position-indicator {
        display: none !important;
    }

    .ffa .navbar-ffa .horizontal-position-indicator {
        z-index: 12;
        position: fixed;
        top: 62px;
        width: 100%;
        display: none;
    }

    .ffa .navbar-ffa .horizontal-position-indicator .indicator-container,
    .ffa .navbar-ffa .horizontal-position-indicator .indicator-container .indicator-track {
        width: 100%;
    }

    .ffa .navbar-ffa .horizontal-position-indicator .indicator-container .indicator-active,
    .ffa .navbar-ffa .horizontal-position-indicator .indicator-container .indicator-track {
        height: var(--navbar-scroll-indicator-height);
    }

    .ffa .navbar-ffa .carousel .indicator-container .indicator-track-item {
        opacity: 0.25;
    }
}

@media (max-width: 991px) {
    .ffa .navbar-ffa .horizontal-position-indicator {
        display: none !important;
    }
}

