.main-np {
    height: calc(100vh - 150px);
    /* border: 1px solid red; */
    background-image: url("/local/templates/aurora/static/images/np-map/world-map.jpg");
    background-size: contain;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    display: flex;
    justify-content: center;
    /*align-items: center;*/

    .content {
        height: calc(100vh - 150px);
        /*height: 60vh;*/
        /* border: 1px solid yellow; */
        display: flex;
        align-items: center;

        h1 {
            /* font-family: 'Akrobat-SemiBold', Arial, sans-serif; */
            font-family: 'GraphikLCG-Semibold', Arial, sans-serif;
            font-size: 2.8em;
            color: #002fff;
            text-shadow: #d4d3d5 2px 2px 2px;
        }
        h2 {
            /* font-family: 'Akrobat-SemiBold', Arial, sans-serif; */
            font-family: 'GraphikLCG-Semibold', Arial, sans-serif;
            font-size: 1.2em;
            padding-bottom: 50px;
            color: #414141;
            float: left!important;
        }

        .intro-title{
            font-size: 2.5em;
            margin-bottom: 100px;
            line-height: 45px;
        }

        .intro {
            font-size: 1.3em;
            line-height: 35px;
        }

        .intro-brand {
            font-family: 'GraphikLCG-Semibold', Arial, sans-serif;
            color: #002fff;
            font-size: 3em;
            pozition: relative;
            z-index: 50;
            font-weight: bold;
            line-height: 100px;
        }

    }


    .col1 {
        /* border: 1px solid red; */
    }
    .col2 {
        /* border: 1px solid red; */
        text-align: center;
    }
    .top-line {
        position: sticky;
        /* border: 1px solid red; */

        ul {
            /* display: flex; */
            /* flex-direction: column; */
            /* align-items: start; */
            list-style-type: none;
            margin-bottom: 0;

            li {
                display: inline;
                padding: 0 10px;

                a {
                    position: relative;
                    display: inline-block;
                    color: #5b5b5b;
                    /* font-size: 0.8em; */
                    /* font-weight: 800; */
                    text-decoration: none;
                    /* border-bottom: 1px solid red; */
                    overflow: hidden;

                    &::before {
                        content: attr(data-item);
                        position: absolute;
                        top: 0;
                        left: 0;
                        overflow: hidden;
                        color: rgb(82, 4, 4);
                        color: maroon;
                        transition: width 500ms ease;
                        width: 0;
                        white-space: nowrap;
                        text-decoration: none;
                        /* border-bottom: 1px solid green; */
                    }

                    &:hover::before {
                        width: 100%;
                    }
                }

                a.nav {
                    background-image: linear-gradient(to right, #2b263e, #e90b8b);
                    background-repeat: no-repeat;
                    background-size: 10px 1px;
                    /* background-size: 0 0; */
                    background-position: left bottom;
                    padding-bottom: 2px;
                    text-decoration: none;
                    transition: 0.5s;
                }
                a.nav:hover {
                    background-size: 100% 1px;
                }
            }
        }
    }
    .top-line .row {
        /* border: 1px solid black; */
        height: 150px;
        display: flex;
        /* justify-content: center; */
        align-items: center;
    }
    .top-line .logo {
        /* width: 50px; */
        height: 80px;
    }
    .top-line .brand {
        color: #424141;
        text-transform: uppercase;
        font-weight: bold;
        font-size: 1.1em;
    }
    .top-line .menu {
        height: 80px;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        padding-bottom: 5px;
    }

    .content {
        /* border: 1px solid red; */
    }
    .content .row {
        /* border: 1px solid red; */
        height: 100%;
        vertical-align: middle;
        display: flex;
        align-items: center;
    }
    .content .brand {
        /* color: #424141;
        text-transform: uppercase;
        font-weight: bold; */
        /* font-family: 'GraphikLCG-Semibold', Arial, sans-serif; */
        height: 100%;
        /* border: 1px solid blue; */
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;

    }
    .brand h1 {
        z-index: 10;
    }

    /* .content .brand::before {
        opacity: 0.2;
        content: "";
        background-image: url("../images/compas.png");
        background-position: center center;
        background-repeat: no-repeat;
        background-size: contain;
        /* border: 1px solid blueviolet; */
    /* position: absolute; */
    /* z-index: -1; */
    /* top: 0; left: 0; right: 0; bottom: 0; */
    /* width: 100%; */
    /* height: 100%; */
    /* } */

    .ln1, .ln2, .ln3 {
        z-index: 0;
        position: absolute;
        /* backdrop-filter: blur(1px); */
    }
    #ln1, #ln2, #ln3 {
        width: 550px;

    }

    #ln1 {
        animation: rotateClockwise1 15s linear infinite;
        /* filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.4)); */
    }

    #ln2 {
        animation: rotateClockwise2 10s linear infinite;
        /* filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.4)); */
    }

    #ln3 {
        animation: rotateClockwise3 15s linear infinite;
        /* filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.4)); */
    }

    @keyframes rotateClockwise1 {
        0% {
            transform: rotate(0deg);
        }
        100% {
            transform: rotate(360deg);
        }
    }

    @keyframes rotateClockwise3 {
        0% {
            transform: rotate(360deg);
        }
        100% {
            transform: rotate(0deg);
        }
    }


    @keyframes rotateClockwise2 {
        0% {
            transform: rotate(0deg);
        }
        100% {
            transform: rotate(360deg);
        }
    }

    .static-image {
        /* border: 1px solid green; */
        z-index: 1;
        position: absolute;
        /* width: 100%;
        height: 100%;
        width: 500px;
        height: 500px; */
        /* top: 0; */
        /* left: 0; */
        /* right: 0; */
        /* bottom: 0;     */
        /* padding: 10px 10px; */
        margin: 10px;
        /* opacity: 0.8; */
    }

    #static-image {
        transition: transform 5s ease;
        transform-origin: center;
        height: 300px;
        /* width: 100%; */
        /* border: #e90b8b 1px solid; */
        /* position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0; */
        z-index: 20;
        /* display: none; */
    }

    .rotating-image {
        /* border: #e90b8b 1px solid; */
        position: absolute;
        z-index: 1;
        /* top: 0; */
        /* left: 0; */
        /* right: 0; */
        /* bottom: 0; */
        /* z-index: 1; */
        /* width: 100%; */
        /* height: 100%; */
    }

    #rotating-image1, #rotating-image2 {
        transition: transform 10s ease;
        transform-origin: center;
        /* height: 100%; */
        /* width: 100%; */
        height: 400px;

        /* position: absolute; */
        /* top: 0; left: 0; right: 0; bottom: 0; */
        /* top: 0;
        left: 0;
        right: 0;
        bottom: 0; */
        z-index: 1;
        opacity: 0.2;
    }

    #rotating-image2 {
        z-index: 10!important;
    }

}

@media (max-width: 768px) {
    .main-np {
        height: auto;
        min-height: 800px;
        .content .brand {
            height: 400px;
        }
        & .content {
            .intro-title {
                margin-bottom: 20px;
            }
        }
    }
}