.header {
    width: 100%;
    background: var(--myRed);
    display: flex;
    margin: 0;
}

body{
    margin: 0;
}

.curve {
    display: none;
    visibility: hidden;
    position: fixed;
    stroke: var(--myBlack);
    overflow: hidden;
    top: 1vh;
    transform: scaleY(-1);
}

/* -- text style ----------------------  */
header a {
    text-decoration: none;
}

.menu_links {
    font-size: 1.3vw;
    font-weight: lighter;
    text-decoration: none;
    padding-bottom: 1vh;
    margin: 0;
    padding-left: 1vw;
    padding-right: 0;
    float: left;
}

/* ------ flex boxes ---------------------------------*/
.container {
    width: 98%;
    height: 33vh;
    margin-left: 1vw;
    margin-right: 1vw;
    margin-top: 0;
}

.col1 {
    position: relative;
    width: 48vw;
    float: left;
    height: 33vh;
}

#titleCont {
    position: absolute;
    max-width: 30vw;
    display: inline;
    float: left;
}

a>.title {
    background-image: linear-gradient(to right, var(--myRed), var(--myRed), rgba(255, 0, 0, 0));
}

#logoIMG {
    position: absolute;
    max-height: 33vh;
    width: auto;
    top: 2vh;
    right: 0;
    float: right;
}

.title {
    font-family: var(--myHeaderFont), Futura, sans-serif;
    color: var(--myWhite);
    font-size: 7vh;
    line-height: 7vh;
    padding-left: 1vw;
    letter-spacing: .1rem;
}

.navLinks {
    display: block;
    position: relative;
}

#allLinks {
    padding-left: 1vw;
    padding-top: 2vw;
    display: flex;
    flex-flow: row nowrap;
    align-items: flex-start;
    list-style: none;
}

.navLinks li {
    margin: 0.1rem;
    position: relative;
}

/* -- sublinks link style HIDDEN BY DEFAULT. appear on hover/ focus--  */
.navLinks ul li ul {
    visibility: hidden;
    opacity: 0;
    display: none;
    position:absolute;
    transition-duration: 50ms;
    left: -2vw;
    justify-content: center;
    flex-flow: row nowrap;
    list-style: none;
    float: left;
}

.sublinks {
    font-family: var(--myDemiBoldFont), Futura, sans-serif;
    color: var(--myWhite);
    font-size: 2vh;
    text-decoration: none;
    line-height: 1.3;
}

.menu_links:hover {
    transform: scale(1.3);
    transition: scale 0.5s ease;
}

.navLinks ul li:hover>ul,
.navLinks ul li:focus-within>ul,
.navLinks ul li ul:hover {
    visibility: visible;
    opacity: 1;
    display: inline-block;
    transition-duration: 60ms;
    position: absolute;
    padding: 2vh;
    margin-top: 2vh;
    margin-left: 2vw;
    width: 40vw;
}
.navLinks ul li:hover>ul li,
.navLinks ul li:focus-within>ul li,
.navLinks ul li ul li:hover {
float: left;
}
.navLinks ul li:hover>ul.outputs.submenu,
.navLinks ul li:focus-within>ul.outputs.submenu,
.navLinks ul li ul.outputs.submenu:hover {    
    left: -15vw;
    
}

.navLinks ul li:hover>.curve,
.navLinks ul li:focus-within>.curve {
    display: block;
    visibility: visible;
    transition-duration: 50ms;
    overflow: hidden;
}

.navLinks ul li ul li {
    margin-left: 0;
    display: inline-block;
}

.material-symbols-outlined {
    visibility: hidden;
    display: none;
}

/* change style when width <700 -------------------------------------     */

@media screen and (max-width: 700px) {
    .navLinks {
        position: absolute;
        right: 0;
        left: auto;
    }

    .navLinks li {
        margin: 0rem;
        display: block;
    }

    #allLinks {
        padding-left: 1vw;
        padding-top: 2vw;
        display: flex;
        flex-flow: column nowrap;
        list-style: none;
        width: 20vw;
        background-color: rgba(211, 58, 34, 0.5);
    }

    .material-symbols-outlined {
        visibility: visible;
        display: block;
        padding-left: 2vw;
        position: absolute;
        left: -10vw;
        font-weight: bold;
        top: -0.5vh;
    }

    .material-symbols-outlined:focus,
    .toggle:focus-within {
        font-size: 34;
    }


    .navLinks ul li ul {
        display: none;
        opacity: 0;
        visibility: hidden;

        position: relative;
        margin-bottom: 1em;
        flex-flow: column nowrap;
    }


    .navLinks ul li:hover>ul,
    .navLinks ul li:focus-within>ul,
    .navLinks ul li ul:hover {
        display: inline-block;
        opacity: 1;
        visibility: visible;
        position: relative;

        flex-flow: column nowrap;
        left: 2vw;
    }

    .navLinks ul li:hover>ul.outputs.submenu,
    .navLinks ul li:focus-within>ul.outputs.submenu,
    .navLinks ul li ul.outputs.submenu:hover {
        left: -50vw;
    }

    .navLinks ul li ul li {
        text-align: start;
        display: block;
        margin-left: auto;
        visibility: inherit;
        line-height: 1.2;
    }

    .curve {
        display: none;
        visibility: hidden;
    }
}