$purple: #960E76;
$gold: #FDB71A;
$green: #8A941E;

#glf2023Wrapper {

    .navigatorWrapper {
        z-index: 999;
        position: fixed;
        background: rgba(255, 255, 255, .95);
        top: 0;
        left: 0;
        right: 0;

        .navigator {


            .mainLogo {
                position: relative;
                display: block;
                overflow: hidden;

                .mainLogoOverlay {
                    position: absolute;
                    left: 0;
                    width: 160px;
                    top: 8px;
                    color: grey;
                    visibility: hidden;
                }
            }

            .navItem {
                height: 100%;
                display: block;
                min-width: 65px;
                height: 50px;
                background: #445664;
                color: white;
                border-left: 1px solid #eaeaea;

                &:hover {
                    text-decoration: none;
                    background: #27333B;
                }


                .fa-arrow-left, .fa-arrow-right {
                    transition: transform .2s ease-in-out;
                }

                &.left:hover {
                    .fa-arrow-left {
                        transform: translateX(-3px);
                    }
                }

                &.right:hover {
                    .fa-arrow-right {
                        transform: translateX(3px);
                    }
                }
            }

            .indexItem {
                //Universals
                padding: 0 10px;
                background: unset;
                color: #27333b;
                border-left: unset;

                &:hover {
                    background: #3A84B6;
                    color: white;

                    .fa-list-ul {
                        color: #ffffff;
                    }
                }

                .fa-list-ul {
                    color: #3A84B6;
                }
                //Themes
                &[data-color="blue"] {
                }

                &[data-theme="purple"] {
                    .fa-list-ul {
                        color: $purple;
                    }

                    &:hover {
                        background: $purple;

                        .fa-list-ul {
                            color: white;
                        }
                    }
                }

                &[data-theme="green"] {
                    .fa-list-ul {
                        color: $green;
                    }

                    &:hover {
                        background: $green;

                        .fa-list-ul {
                            color: white;
                        }
                    }
                }
            }


            #fixedNavCTA {
                background: #27333B;

                .fa-share-alt {
                    color: #3A84B6;
                }

                &:hover {
                    background: #3A84B6;


                    .fa-share-alt {
                        color: #ffffff;
                    }
                }
                //Themes
                &[data-theme="purple"] {
                    &:hover {
                        background: $purple;
                    }
                }
                //Themes
                &[data-theme="green"] {
                    &:hover {
                        background: $green;
                    }
                }
            }

            .arrowItem {
                .fa-arrow-alt-to-bottom {
                    color: #3a84b6;
                }

                &:hover {
                    .fa-arrow-alt-to-bottom {
                        color: white;
                    }
                }
                //Themes
                &[data-theme="purple"] {
                    .fa-arrow-alt-to-bottom {
                        color: $purple;
                    }

                    &:hover {
                        .fa-arrow-alt-to-bottom {
                            color: white;
                        }
                    }
                }

                &[data-theme="green"] {
                    .fa-arrow-alt-to-bottom {
                        color: $green;
                    }

                    &:hover {
                        .fa-arrow-alt-to-bottom {
                            color: white;
                        }
                    }
                }
            }
        }
    }

    #downloadReportCTA {
        position: fixed;
        display: block;
        left: 0;
        right: 0;
        bottom: 0;
        height: 62px;
        z-index: 5;
        text-align: center;
        font-size: 1.35rem;
        background: #27333B;
        color: white;
        line-height: 59px;
        visibility: hidden;
    }

    #fixedNavCTA {
        min-width: 215px;
    }

    #section1 {
        background-repeat: no-repeat !important;
        background-size: cover, cover !important;
        background-position: center center !important;

        .bouncingChevron {
            color: #3a84b6;

            &[data-theme="purple"] {
                color: $purple;
            }

            &[data-theme="green"] {
                color: $green;
            }
        }

        @media(min-width:998px) {
            background-size: cover !important;
            background-repeat: no-repeat !important;
            background-position: center center !important;

            .container {
                position: relative;
                height: 80vh;
                max-height: 600px;
                background: rgba(255, 255, 255, 0.95);

                .moreContentContainer {
                    visibility: hidden;
                    position: absolute;
                    bottom: 0;
                    left: 0;
                    right: 0;
                }

                #linkedInShare {
                    position: relative;
                    overflow: hidden;

                    .hiddenSocialShareText {
                        position: absolute;
                        top: 50%;
                        left: 51px;
                        transform: translateY(-50%);
                        visibility: hidden;
                    }
                }
            }
        }
    }

    #section2 {
        background-repeat: no-repeat !important;
        background-size: cover, cover !important;
        background-position: center center !important;

        @media(min-width:998px) {
            background-size: cover !important;
            background-repeat: no-repeat !important;
            background-position: center center !important;

            .container {
                position: relative;
                height: 80vh;
                max-height: 600px;
                background: rgba(255, 255, 255, 0.95);
            }
        }

        .tableOfContents-dividers {
            width: 100%;

            @media(min-width:998px) {
                width: 50%;
            }
        }

        .tableOfContents {
            padding-left: 0;

            .order-13 {
                order: 13;
            }

            li {
                list-style: none;
                position: relative;
                padding-left: 62px;
                margin-top: 5px;
                font-size: 18px;
                font-weight: 500;

                a {
                    color: inherit;

                    &:hover {
                        text-decoration: none;
                    }
                }

                .contentsIcon {
                    color: #3A84B6;
                    font-size: 1.45rem;
                    position: absolute;
                    font-weight: 700;
                    top: 5px;
                    left: 8px;

                    line-height: 28px;

                    &[data-theme="purple"] {
                        color: $purple;
                    }

                    &[data-theme="green"] {
                        color: $green;
                    }
                }

                .hoverArrow {
                    position: absolute;
                    right: 10px;
                    font-size: 2rem;
                    color: #3A84B6;
                    visibility: hidden;

                    &[data-theme="purple"] {
                        color: $purple;
                    }

                    &[data-theme="green"] {
                        color: $green;
                    }
                }
            }

            @media(min-width:998px) {
                li {
                    font-size: 24px;
                }
            }
        }
    }

    #section3 {
        background-repeat: no-repeat !important;
        background-size: cover, cover !important;
        background-position: center center !important;

        @media(min-width:998px) {
            background-size: cover !important;
            background-repeat: no-repeat !important;
            background-position: center center !important;

            .container {
                position: relative;
                height: 80vh;
                max-height: 600px;
                background: rgba(255, 255, 255, 0.95);
            }
        }
    }

    #section4 {
        background-repeat: no-repeat !important;
        background-size: cover cover !important;
        background-position: center center !important;

        @media(min-width:998px) {
            background-size: cover !important;
            background-repeat: no-repeat !important;
            background-position: center center !important;

            .container {
                position: relative;
                height: 80vh;
                max-height: 600px;
                background: rgba(255, 255, 255, 0.95);
            }
        }
    }

    #section5 {
        background-repeat: no-repeat !important;
        background-size: 94% calc(100% - 140px), cover !important;
        background-position: center 63px, center center !important;

        @media(min-width:998px) {
            background-size: cover !important;
            background-repeat: no-repeat !important;
            background-position: center center !important;

            .container {
                position: relative;
                height: 80vh;
                max-height: 600px;
                background: rgba(255, 255, 255, 0.95);
            }
        }
    }

    #section6 {
        background-repeat: no-repeat !important;
        background-size: 94% calc(100% - 140px), cover !important;
        background-position: center 63px, center center !important;

        @media(min-width:998px) {
            background-size: cover !important;
            background-repeat: no-repeat !important;
            background-position: center center !important;

            .container {
                position: relative;
                height: 80vh;
                max-height: 600px;
                background: rgba(255, 255, 255, 0.95);
            }
        }
    }

    #section7 {
        background-repeat: no-repeat !important;
        background-size: 94% calc(100% - 140px), cover !important;
        background-position: center 63px, center center !important;

        @media(min-width:998px) {
            background-size: cover !important;
            background-repeat: no-repeat !important;
            background-position: center center !important;

            .container {
                position: relative;
                height: 80vh;
                max-height: 600px;
                background: rgba(255, 255, 255, 0.95);
            }
        }
    }

    #section8 {
        background-repeat: no-repeat !important;
        background-size: 94% calc(100% - 140px), cover !important;
        background-position: center 63px, center center !important;

        @media(min-width:998px) {
            background-size: cover !important;
            background-repeat: no-repeat !important;
            background-position: center center !important;

            .container {
                position: relative;
                height: 80vh;
                max-height: 600px;
                background: rgba(255, 255, 255, 0.95);
            }
        }
    }

    #section9 {
        background-repeat: no-repeat !important;
        background-size: 94% calc(100% - 140px), cover !important;
        background-position: center 63px, center center !important;

        @media(min-width:998px) {
            background-size: cover !important;
            background-repeat: no-repeat !important;
            background-position: center center !important;

            .container {
                position: relative;
                height: 80vh;
                max-height: 600px;
                background: rgba(255, 255, 255, 0.95);
            }
        }
    }

    #section10 {
        background-repeat: no-repeat !important;
        background-size: 94% calc(100% - 140px), cover !important;
        background-position: center 63px, center center !important;

        @media(min-width:998px) {
            background-size: cover !important;
            background-repeat: no-repeat !important;
            background-position: center center !important;

            .container {
                position: relative;
                height: 80vh;
                max-height: 600px;
                background: rgba(255, 255, 255, 0.95);
            }
        }
    }

    #section11 {
        background-repeat: no-repeat !important;
        background-size: 94% calc(100% - 140px), cover !important;
        background-position: center 63px, center center !important;

        @media(min-width:998px) {
            background-size: cover !important;
            background-repeat: no-repeat !important;
            background-position: center center !important;

            .container {
                position: relative;
                height: 80vh;
                max-height: 600px;
                background: rgba(255, 255, 255, 0.95);
            }
        }
    }

    #section12 {
        background-repeat: no-repeat !important;
        background-size: 94% calc(100% - 140px), cover !important;
        background-position: center 63px, center center !important;

        @media(min-width:998px) {
            background-size: cover !important;
            background-repeat: no-repeat !important;
            background-position: center center !important;

            .container {
                position: relative;
                height: 80vh;
                max-height: 600px;
                background: rgba(255, 255, 255, 0.95);
            }
        }
    }

    #section13 {
        background-repeat: no-repeat !important;
        background-size: 94% calc(100% - 140px), cover !important;
        background-position: center 63px, center center !important;

        @media(min-width:998px) {
            background-size: cover !important;
            background-repeat: no-repeat !important;
            background-position: center center !important;

            .container {
                position: relative;
                height: 80vh;
                max-height: 600px;
                background: rgba(255, 255, 255, 0.95);
            }
        }
    }

    #section14 {
        background-repeat: no-repeat !important;
        background-size: 94% calc(100% - 140px), cover !important;
        background-position: center 63px, center center !important;

        @media(min-width:998px) {
            background-size: cover !important;
            background-repeat: no-repeat !important;
            background-position: center center !important;

            .container {
                position: relative;
                height: 80vh;
                max-height: 600px;
                background: rgba(255, 255, 255, 0.95);
            }
        }
    }

    #section15 {
        background-repeat: no-repeat !important;
        background-size: 94% calc(100% - 140px), cover !important;
        background-position: center 63px, center center !important;

        @media(min-width:998px) {
            background-size: cover !important;
            background-repeat: no-repeat !important;
            background-position: center center !important;

            .container {
                position: relative;
                height: 80vh;
                max-height: 600px;
                background: rgba(255, 255, 255, 0.95);
            }
        }
    }

    #section16 {
        background-repeat: no-repeat !important;
        background-size: cover, cover !important;
        background-position: center center !important;

        @media(min-width:998px) {
            background-size: cover !important;
            background-repeat: no-repeat !important;
            background-position: center center !important;

            .container {
                position: relative;
                height: 80vh;
                max-height: 600px;
                background: rgba(255, 255, 255, 0.95);
            }
        }
    }

    #section17 {
        background-repeat: no-repeat !important;
        background-size: cover, cover !important;
        background-position: center center !important;

        @media(min-width:998px) {
            background-size: cover !important;
            background-repeat: no-repeat !important;
            background-position: center center !important;

            .container {
                position: relative;
                height: 80vh;
                max-height: 600px;
                background: rgba(255, 255, 255, 0.95);
            }
        }
    }

    #section18 {
        background-repeat: no-repeat !important;
        background-size: cover, cover !important;
        background-position: center center !important;

        @media(min-width:998px) {
            background-size: cover !important;
            background-repeat: no-repeat !important;
            background-position: center center !important;

            .container {
                position: relative;
                height: 80vh;
                max-height: 600px;
                background: rgba(255, 255, 255, 0.95);
            }
        }
    }

    #footer {
        #mainFooter {
            display: none;

            @media(min-width:1300px) {
                display: block;
                height: 50vh;
            }
        }

        .finalSection {
            @media(min-width:1300px) {
                max-height: 50vh;
            }
        }
    }


    .iconHeader {
        color: #3A84B6;
        line-height: 1.1;

        &[data-theme="purple"] {
            color: $purple;
        }

        &[data-theme="green"] {
            color: $green;
        }
    }

    .blueAccent {
        color: #3A84B6;
    }

    .purpleAccent {
        color: $purple;
    }

    .greenAccent {
        color: $green;
    }

    #mainReportHeading {
        @media(min-width:998px) {
            font-size: 3.5rem;
        }
    }

    .section {
        .container.extraPadding {
            @media(min-width:1100px) {
                padding: 0 100px !important;
            }
        }

        .sectionNavigator {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 120px;
            background: rgba(39, 51, 59, .85);


            .sectionNavigatorList {
                list-style: none;
                padding-left: 0;

                li {
                    color: #EAEAEA;
                    width: 18%;
                    font-size: .83rem;
                    min-height: 40px;
                    line-height: 36px;
                    border-bottom: 1px solid #EAEAEA;
                    padding-left: 3px;
                    position: relative;
                    overflow: hidden;

                    .overlay {
                        position: absolute;
                        background: rgba(255, 255, 255, .2);
                        top: 0;
                        bottom: 0;
                        right: 0;
                        left: 0;
                        //transform: translateY(40px);
                        visibility: hidden;
                        z-index: 4;
                    }

                    &:hover {
                        //background:rgba(255, 255, 255, .2);
                        span {
                            color: white !important;
                        }

                        i {
                            color: white !important;
                        }
                    }

                    &.active {
                        background: rgba(255, 255, 255, .2) !important;

                        span {
                            color: white;
                        }

                        i {
                            color: white;
                        }
                    }

                    a {
                        color: inherit;
                        display: block;
                        z-index: 5;
                        position: relative;

                        &:hover {
                            text-decoration: none;
                        }
                    }

                    span {
                        margin-right: 15px;
                        color: #3A84B6;
                        font-weight: 600;

                        &[data-theme="gold"] {
                            color: $gold;
                        }

                        &[data-theme="green"] {
                            color: $green;
                        }
                    }

                    i {
                        color: #3A84B6;
                        margin-right: 15px;

                        &[data-theme="gold"] {
                            color: $gold;
                        }

                        &[data-theme="green"] {
                            color: $green;
                        }
                    }
                }
            }
        }

        .basePanelHeading {
            font-size: 3rem;
            line-height: 1;
        }
        //Title of contents needs to be smaller than all others on mobile because it's so long
        .tableOfContentsHeading {
            font-size: 2rem;
            line-height: 1;

            @media(min-width:998px) {
                font-size: 3rem;
            }
        }

        .main {
            .numberHeader {
                font-size: 3rem;
                font-weight: 700;
                color: #3A84B6;
                line-height: .8;

                &[data-theme="purple"] {
                    color: $purple;
                }

                &[data-theme="green"] {
                    color: $green;
                }
            }

            .mainHeader {
                font-size: 2rem;
                line-height: 1.3;
            }

            @media(min-width:998px) {
                width: 60%;
                padding-right: 65px;

                .mainHeader {
                    font-size: 3rem;
                }

                .numberHeader {
                }
            }
        }

        .sidebar {
            width: 40%;

            .sideBarContent {
                border-left: 8px solid #3A84B6;
                padding-left: 1.25rem;
                padding-top: 10px;
                padding-bottom: 10px;
                line-height: 31px;

                &[data-theme="purple"] {
                    border-left: 8px solid $purple;
                }

                &[data-theme="green"] {
                    border-left: 8px solid $green;
                }
            }
        }
        //authors
        .authorContainer {
            .authorBadge {
                @media(min-width:998px) {
                    width: 50%;
                    min-height: 80px;
                }
            }
        }
    }
}