.my-navbar-menu{
    display: flex; /* Is a Felexcontiner */
    flex-direction: row;
    justify-content: center;
    background-color: #2c5895;
}

.my-navbar-start{
    flex: 40%; /* As child of Flexcontiner us x% width */
    display:flex; /* Is a Felexcontiner */
    flex-direction: row; /* dirction in which inner elements will stack */
    justify-content: flex-start; /* elements start from left side */
    align-items: center; /* aligns the flex items in the middle of the container*/
    flex-wrap: wrap; /* Elements will warp. Meaning elements will start a new row if no spece is left, instead of squzing*/
}

.my-navbar-center{
    flex: 20%; /* As child of Flexcontiner us x% width */
    display: flex; /* Is a Felexcontiner */
    flex-direction: row; /* dirction in which inner elements will stack */
    justify-content: center; /* spacing of inner elements within this flexcontainer */
    align-items: flex-start; /* aligns the flex items in the top of the container*/
}

.my-navbar-end{
    flex: 40%; /* As child of Flexcontiner us x% width */
    display:flex; /* Is a Felexcontiner */
    flex-direction: row; /* dirction in which inner elements will stack */
    justify-content: flex-end; /* elements start from right side */
    align-items: center; /* aligns the flex items in the center of the container*/
}

.my-navbar-item{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items:center;
    color: #ffffff;
    padding-left: 1em;
    padding-right: 1em;
    padding-bottom: 0.5em;
}

/* color when hovering over navbar element */
.my-navbar-item:hover {
    color: rgb(104, 104, 104); 
}


/* Dropdown container */
.my-navbar-item-dropdown {
    position: relative;
}

/* Show the dropdown menu on hover */
.my-navbar-item-dropdown:hover .my-dropdown-content {
    display: block;
}

/* Dropdown content (hidden by default) */
.my-dropdown-content {
    display: none;
    position: absolute;
    right: 0;
    background-color: #f9f9f9;
    min-width: 250px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

/* Links inside the dropdown */
.my-dropdown-content a {
    float: none;
    color: rgb(56, 56, 56);
    text-decoration: none;
    display: block;
    text-align: left;
}

/* Mobile width */
@media screen and (max-width: 1024px) {
    .my-navbar-menu{
        flex-direction: column;
    }
    .my-navbar-center{
        order: 1;
        flex: 100%;
    }
    .my-navbar-start{
        display: none;
        order: 2;
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
    }
    .my-navbar-end{
        display: none;
        order: 3;
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
    }
    .my-navbar-item{
        flex-direction: row;
        justify-content: flex-start;
    }
    .my-dropdown-content {
        display: block;
        position: relative;
        background-color: inherit;
        box-shadow: none;
    }
    .my-dropdown-content a {
        color: white;
    }
    .only-mobile {
        display: flex;
    }
    .active{
        display: flex;
    }
}

@media screen and (min-width: 1024px) {
    .only-mobile {
        display: none;
    }
    
    #my-navbar-start{
        display: flex;
    }
    #my-navbar-end{
        display: flex;
    }
}