/* #navigation p {
    font-family: 'PoppinsLight';
} */

/* desktop navigation */
#desktop-nav-container {
    padding-top: 10vw;
    padding-bottom: 4vw;
    display: flex;
    flex-direction: row;
    align-items: center;
}

    #desktop-nav-container > * {
        display: flex;
        justify-content: center;

        /* border: 1px solid grey; */
    }

    #desktop-nav-container #goback {
        flex: 2;
    }

        #desktop-nav-container #goback svg {
            fill: #194268;
            padding: 1vw 2vw;
            background-color: white;
            border-radius: 10vw;
            position: relative;
            animation: goback-intro 1s ease-in;
            width: 0.5vw;
        }

            #desktop-nav-container #goback svg:hover {
                background-color: #194268;
                cursor: pointer;
            }

        #desktop-nav-container #goback svg:hover {
            fill: white;
        }

        @keyframes goback-intro {
            0%   { left: 10vw; opacity: 0; }
            25%   { left: 10vw; opacity: 0; transform: rotate(360deg);}
            50%   { left: 10vw; opacity: 0; transform: rotate(540deg);}
            100%   { left: 0px; opacity: 1; transform: rotate(720deg);}
        }


    #desktop-nav-container #logo {
        flex: 3;
        justify-content: center;
        /* justify-content: flex-start; */
    }
    
        #desktop-nav-container #logo img {
            width: 15vw;
        }

    #desktop-nav-container #navigation {
        /* flex: 4; */
        flex: 3;
    }

        #desktop-nav-container #navigation ul {
            display: flex;
            flex-direction: row;
            align-items: center;
        }

        #desktop-nav-container #navigation li {
            list-style: none;
            font-family: 'PoppinsRegular';
            padding: 0 0.9vw;
            color: #194268;
        }

        #desktop-nav-container #navigation li.active {
            font-family: PoppinsBold;
        }

        #desktop-nav-container #navigation #contact {
            position: relative;
            display: flex;
            flex-direction: column;
            align-items: center;
            /*border: 1px solid grey;*/
            cursor: pointer;
        }

        #desktop-nav-container #navigation #contact img {
            position: absolute;
            width: 2vw;
            top: -1.5vw;
        }
        

        #desktop-nav-container #navigation #contact img:hover {
            animation: ringring 0.5s ease-in;
        }

        #desktop-nav-container #navigation #contact:hover > img {
            animation: ringring 0.5s ease-in;
        }

            @keyframes ringring {
                0%   { transform: rotate(0deg); }
                20%   { transform: rotate(3deg); top: -1.7vw; }
                40%   { transform: rotate(-3deg); }
                60%   { transform: rotate(3deg); }
                80%   { transform: rotate(-3deg); }
                100%   { transform: rotate(0deg); top: -1.5vw; }
            }

        #desktop-nav-container #navigation #contact > * {
            /*border: 1px solid blue;*/
        }

    #desktop-nav-container #spacer {
        /* flex: 1; */
        flex: 2;
    }


/* mobile navigation */
#mobile-nav-toggle {
    display: none;
    width: 7vw;
    margin-right: 2vw;
}

#mobile-nav-container {
    display: none;
    position: fixed;
    background-color: rgba(25,66,104,0.11);
    width: 86vw;
    height: calc(100% - 20vw);
    padding: 10vw 7vw;
    z-index: 10;
}

    #mobile-nav-container #background {
        opacity: 0;
        background-color: white;
        width: 100%;
        height: 25vw;
        border-radius: 6vw;
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    #mobile-nav-container ul {
        list-style: none;
        font-size: 1vw;
        color: #194268;
        font-size: 5vw;
        font-family: 'PoppinsLight';
        text-transform: capitalize;
        width: 50vw;
        margin-bottom: -35vw;
    }

    #mobile-nav-container li {
        opacity: 0;
        height: 5vw;
        display: flex;
        align-items: center;
        margin: 9vw 0px;
    }

        #mobile-nav-container li .page {
            flex: 3;
            display: flex;
            justify-content: center;
            margin: 0px 4vw;
            padding: 1vw 0px;
        }

            #mobile-nav-container li.active .page {
                background-color: #194268;
                color: white;
                border-radius: 10vw;
            }

        #mobile-nav-container .icon {
            flex: 1;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        #mobile-nav-container li img {
            width: 5vw;
        }

            #mobile-nav-container li:first-of-type img {
                width: 4vw;
            }
    
    #mobile-nav-container .close {
        opacity: 0;
        position: absolute;
        bottom: -15%;
    }

        #mobile-nav-container .close img {
            width: 4vw;
        }