<!-- =====================================================
         CSS
    ====================================================== -->

 

        /* =================================================
           RESET
        ================================================= */

        * {
            box-sizing: border-box;
        }

        html,
        body {
            margin: 0;
            padding: 0;
        }

        body {
            background: #183D61;
        }


        /* =================================================
           MAIN TIMELINE
        ================================================= */

        .nmcpl-timeline {

            position: relative;

            width: 100%;

            height: 600px;

            overflow-y: auto;

            overflow-x: hidden;

            padding: 10px 20px 10px 0;

            scrollbar-width: none;

            -ms-overflow-style: none;

            overscroll-behavior: contain;
        }


        /* Hide scrollbar - Chrome / Edge / Safari */

        .nmcpl-timeline::-webkit-scrollbar {

            display: none;

            width: 0;

            height: 0;
        }


        /* =================================================
           TIMELINE ITEM
        ================================================= */

        .nmcpl-item {

            position: relative;

            display: grid;

            grid-template-columns: 82px 1fr;

            align-items: start;

            min-height: 150px;

            z-index: 2;
        }


        /* =================================================
           DOT AREA
        ================================================= */

        .nmcpl-dot-area {

            position: relative;

            width: 82px;

            height: 100%;

            display: flex;

            justify-content: center;

            align-items: flex-start;

            z-index: 5;
        }


        /* =================================================
           CONNECTING VERTICAL LINE
           
           Each item connects to the next item.
           Last item has no line.
        ================================================= */

        .nmcpl-item:not(:last-child)
        .nmcpl-dot-area::after {

            content: "";

            position: absolute;

            top: 13px;

            bottom: -7px;

            left: 50%;

            width: 2px;

            transform: translateX(-50%);

            background: #F67F01;

            opacity: 0.8;

            z-index: -1;
        }


        /* =================================================
           ORANGE DOT
        ================================================= */

        .nmcpl-dot {

            position: relative;

            width: 13px;

            height: 13px;

            margin-top: 7px;

            flex-shrink: 0;

            border-radius: 50%;

            background: #F67F01;

            border: none;

            box-shadow: none;

            z-index: 5;
        }


        /* =================================================
           CONTENT
        ================================================= */

        .nmcpl-content {

            position: relative;

            min-width: 0;

            padding: 0 0 48px 4px;
        }


        /* =================================================
           HEADING
        ================================================= */

        .nmcpl-content h3 {

            margin: 0 0 8px 0;

            font-family:
                "Bricolage Grotesque",
                sans-serif;

            font-size: 22px;

            line-height: 1.25;

            font-weight: 600;

            color: #FFFFFF;
        }


        /* =================================================
           YEAR
        ================================================= */

        .nmcpl-year {

            margin: 0 0 8px 0;

            font-family:
                "Bricolage Grotesque",
                sans-serif;

            font-size: 14px;

            line-height: 1.2;

            font-weight: 600;

            color: #F67F01;
        }


        /* =================================================
           DESCRIPTION
        ================================================= */

        .nmcpl-content p {

            margin: 0;

            font-family:
                "Exo",
                sans-serif;

            font-size: 14px;

            line-height: 1.55;

            font-weight: 400;

            color: #FFFFFF;

            max-width: 100%;
        }


        /* =================================================
           TABLET
        ================================================= */

        @media (max-width: 991px) {

            .nmcpl-timeline {

                height: 570px;

                padding-right: 15px;
            }


            .nmcpl-item {

                grid-template-columns: 72px 1fr;

                min-height: 155px;
            }


            .nmcpl-dot-area {

                width: 72px;
            }


            .nmcpl-item:not(:last-child)
            .nmcpl-dot-area::after {

                top: 13px;

                bottom: -7px;
            }


            .nmcpl-content {

                padding-left: 4px;

                padding-bottom: 45px;
            }


            .nmcpl-content h3 {

                font-size: 21px;
            }


            .nmcpl-year {

                font-size: 14px;
            }


            .nmcpl-content p {

                font-size: 14px;
            }
        }


        /* =================================================
           MOBILE
        ================================================= */

        @media (max-width: 767px) {

            .nmcpl-timeline {

                height: 540px;

                padding-right: 10px;
            }


            .nmcpl-item {

                grid-template-columns: 50px 1fr;

                min-height: 165px;
            }


            .nmcpl-dot-area {

                width: 50px;
            }


            .nmcpl-dot {

                width: 12px;

                height: 12px;

                margin-top: 6px;
            }


            .nmcpl-item:not(:last-child)
            .nmcpl-dot-area::after {

                top: 12px;

                bottom: -7px;

                width: 2px;
            }


            .nmcpl-content {

                padding-left: 3px;

                padding-bottom: 45px;
            }


            .nmcpl-content h3 {

                font-size: 19px;

                line-height: 1.25;

                margin-bottom: 7px;
            }


            .nmcpl-year {

                font-size: 13px;

                margin-bottom: 7px;
            }


            .nmcpl-content p {

                font-size: 13px;

                line-height: 1.55;
            }
        }


        /* =================================================
           SMALL MOBILE
        ================================================= */

        @media (max-width: 480px) {

            .nmcpl-timeline {

                height: 520px;

                padding-right: 8px;
            }


            .nmcpl-item {

                grid-template-columns: 44px 1fr;

                min-height: 170px;
            }


            .nmcpl-dot-area {

                width: 44px;
            }


            .nmcpl-dot {

                width: 11px;

                height: 11px;

                margin-top: 6px;
            }


            .nmcpl-item:not(:last-child)
            .nmcpl-dot-area::after {

                top: 11px;

                bottom: -7px;
            }


            .nmcpl-content {

                padding-left: 3px;

                padding-bottom: 45px;
            }


            .nmcpl-content h3 {

                font-size: 18px;
            }


            .nmcpl-year {

                font-size: 12.5px;
            }


            .nmcpl-content p {

                font-size: 12.5px;

                line-height: 1.5;
            }
        }