@media (max-width: 450px){

    .highcontainer{
        background-color: transparent;
        display: block;
        height: 50px;
        box-sizing: border-box;
        padding: 0;
        margin: 0;
        font-size: 1vw;
    }

    .topdashholdr{
        display: block;
        position: absolute;
        height: 50px;
        width: 100%;
        top: 0;
        z-index: 1; 
        box-sizing: border-box;
    }

}

@media (min-width: 451px){

    .highcontainer{
        background-color: transparent;
        display: block;
        height: max(8vw, 100px);
        box-sizing: border-box;
        padding: 0;
        margin: 0;
        font-size: 1vw;
    }

    .topdashholdr{
        display: block;
        position: absolute;
        height: max(8vw, 100px);
        width: 100%;
        top: 0;
        z-index: 1; 
        box-sizing: border-box;
    }

}



.tdleftspacer{
    display: inline-block;
    height:100%;
    width: 5%;
    box-sizing: border-box;
}

.tdmidholdr{
    display: inline-block;
    height: 100%;
    width: 91%;
    box-sizing: border-box;
    background-color: transparent;
}

.halftopper{
    display: block;
    box-sizing: border-box;
    width: 100%;
    height: calc(50% - 2px);
    
}

.halfbottomer{
    display: block;
    box-sizing: border-box;
    width: 100%;
    height: calc(50% + 2px);
    border-top-width: 4px;
    border-top-style: dashed;
    border-top-color: ghostwhite;
}

.endholdr{
    display: inline-block;
    width: 2.5%;
    height: 100%;
    text-align: center;
    box-sizing: border-box;
    
}

.tdstack{
    display: block;
    width: 100%;
    height: calc(50% - 1vw);
    box-sizing: border-box;
}

.tdend{
    display: block;
    border-color: ghostwhite;
    border-radius: 20%;
    border-style: solid;
    border-width: 3px;
    width: 100%;
    height: 2vw;
    box-sizing: border-box;
}

.sweep{
    display: inline-block;
    background-color: transparent;
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
    box-sizing: border-box;
}

@media (max-width: 450px){
    .setTenth{
        width: 50px;
        z-index: 2;
        position: relative;
    }
}

@media (min-width: 451px){

    .setTenth{
        width: 10%;
        min-width: 100px;
        z-index: 2;
        position: relative;
    }

}

.logowrapper{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
}

.logo{
    max-width: 100%;
    max-height: 100%;
    padding: 0;
    margin: auto;
}

@media (max-width: 450px){

    .navflex:hover > *:not(:hover) > .navtop{
        border-color: rgba(190, 190, 190, 0.774);
        border-width: 3px;
        border-style: solid;
        margin: 0;
    }

    .setNineTenth{
        width: calc((100% - 50px) * .9);
        z-index: 2;
        position: relative;
    }
}

@media (min-width: 451px) and (max-width: 655px){

    .navflex:hover > *:not(:hover) > .navtop{
        background-color: ghostwhite;
        color: ghostwhite;
        border-color: ghostwhite;
    }

    .setNineTenth{
        width: calc((100% - 100px) * .9);
        z-index: 2;
        position: relative;
    }

}

@media (min-width: 656px){

    .setNineTenth{
        width: calc((100% - 100px) * .85);
        z-index: 2;
        position: relative;
    }

}

@media (max-width: 450px){

    .navcontainer{
        display: inline-flex;
        flex-direction: row;
        align-items: start;
        width: 25%;
        height: 100%;
        box-sizing: border-box;
        vertical-align: top;
        flex-wrap: nowrap;
        flex-grow: 1;
        flex-shrink: 1;
        min-width: 0;
    }

    .navcontainer:hover .navtop{
        color: ghostwhite;
        background-color: blue;
        border-color: ghostwhite;
        border-width: 3px;
        border-style: solid;
        border-bottom-width: 6px;
    }

}

@media (min-width: 451px){

    .navcontainer{
        display: inline-flex;
        flex-direction: row;
        align-items: start;
        width: 20%;
        height: 100%;
        transition-property: width;
        transition-duration: .33s;
        box-sizing: border-box;
        flex-grow: 0;
        flex-shrink: 0;
        vertical-align: top;
        flex-wrap: nowrap;
        flex-grow: 1;
        flex-shrink: 1;
        min-width: 0;
    
    }

    .navcontainer.hasthree:hover{
        width: max(40%, 318px);
        flex-shrink: 0;
        z-index: 5;
    }
    
    .navcontainer.hastwo:hover{
        width: max(26.66%, 212px);
        flex-shrink: 0;
        z-index: 5;
    }

    .navcontainer.hastwo:hover .navtop{
        width: 50%;
        color: ghostwhite;
        background-color: blue;
        border-color: ghostwhite;
        border-width: 3px;
        border-style: solid;
        border-bottom-width: 6px;
    }

    
    
    .navcontainer.hasthree:hover .navtop{
        width: 33%;
        color: ghostwhite;
        background-color: blue;
        border-color: ghostwhite;
        border-width: 3px;
        border-style: solid;
        border-bottom-width: 6px;
    }

    .navcontainer.hasthree:hover .invisalink{
        visibility: visible;
    }
    
    .navcontainer.hasthree:hover .navbot{
        visibility: visible;
        width: 33%;
    }

    .navcontainer.hastwo:hover .invisalink{
        visibility: visible;
    }
    
    .navcontainer.hastwo:hover .navbot{
        visibility: visible;
        width: 50%;
    }

}


.navbot:hover{
    background-color: cornflowerblue;
    border-width: 3px;
    border-style: solid;
    border-color: blue;
    border-bottom-width: 6px;
}

.menuwrappr{
    box-sizing: border-box;
    flex-grow: 1;
}

.textholdr{
    display: flex;
    justify-content: center;
    align-items: center;
    color: inherit;
    background-color: inherit;
    height: 100%;
    overflow: hidden;
}

/*.topmenu{
    color: black;
    background-color: ghostwhite;
    width: calc(100% - 6px);
    height: calc(100% - 6px);
    padding: 0;
    box-sizing: border-box;
    transition-property: width;
    transition-duration: .33s;
    text-align: center;
    min-width: 100px;
    font-size: max(1.5em, 12pt);
    overflow: hidden;
}

.botmenu{
    display: none;
    color: ghostwhite;
    background-color: black;
    width: calc(100% - 6px);
    height: calc(100% - 6px);
    padding: 0;
    box-sizing: border-box;
    transition-property: width;
    transition-duration: .33s;
    vertical-align: top;
    text-align: center;
    min-width: 100px;
    font-size: max(1.5em, 12pt);
    overflow: hidden;
}*/

.botmenu:hover{
    background-color: cornflowerblue;
}

.navflex{
    display: inline-flex;
    flex-direction: row;
    align-items: start;
    background-color: transparent;
    height: 100%;
    box-sizing: border-box;
    vertical-align: top;
    flex-wrap: nowrap;
    overflow: hidden;
}



@media (max-width: 450px){

    .navtop{
        display: flex;
        position: relative;
        background-color: ghostwhite;
        border-width: 3px;
        box-sizing: border-box;
        margin-top: 3px;
        margin-left: 3px;
        margin-right: 3px;
        width: 100%;
        height: 100%;
        text-align: center;
        align-content: center;
        justify-content: center;
        font-size: 3em;
    }
    
    .navbot{
        display: flex;
        visibility: collapse;
        color: ghostwhite;
        background-color: black;
        border-width: 3px;
        box-sizing: border-box;
        margin-top: 3px;
        margin-left: 3px;
        margin-right: 3px;
        width: 0%;
        height: 100%;
        text-align: center;
        align-content: center;
        justify-content: center;
        font-size: 3em;
        overflow: hidden;
        transition-property: width;
        transition-duration: 100ms;
    }
}

@media (min-width: 451px){

    .navtop{
        display: flex;
        position: relative;
        background-color: ghostwhite;
        border-width: 3px;
        box-sizing: border-box;
        margin-top: 3px;
        margin-left: 3px;
        margin-right: 3px;
        width: 100%;
        height: 100%;
        text-align: center;
        align-content: center;
        justify-content: center;
        font-size: max(1.5em, 12pt);
        overflow: hidden;
    }
    
    .navbot{
        display: flex;
        visibility: collapse;
        color: ghostwhite;
        background-color: black;
        border-width: 3px;
        box-sizing: border-box;
        margin-top: 3px;
        margin-left: 3px;
        margin-right: 3px;
        width: 0%;
        height: 100%;
        text-align: center;
        align-content: center;
        justify-content: center;
        font-size: max(1.5em, 12pt);
        overflow: hidden;
        transition-property: width;
        transition-duration: 100ms;
    }
}

.flexlink{
    display: flex;
    height: 100%;
    width: 100%;
    box-sizing: border-box;
}

.invisalink{
    transition-property: visibility;
    transition-duration: 50ms;
    transition-delay: 300ms;
    transition-timing-function: linear;
    visibility: hidden;
}

@media (max-width: 450px){
    
    .dummytext{
        display: none;
    }

    .dummywrappr{
        display: none;
    }

    .grayedout{
        box-sizing: border-box;
        background-color: rgb(51, 51, 51) !important;
        border-color: dimgrey !important;
        border-width: 2px 2px 5px 2px !important;
        border-style: solid;
        color: ghostwhite;
    }

    .grayed{
        background-color: rgb(51, 51, 51) !important;
        color: ghostwhite;
    }

}

@media (min-width: 451px){

    .dummytext{
        display: flex;
        background-color: ghostwhite;
        width: 100%;
        height: 100%;
        color: black;
        position: absolute;
        justify-content: center;
        transition-property: visibility, width, height;
        transition-delay: 300ms;
    }
    
    .dummywrappr{
        align-self: center;
    }
    
    .navcontainer:hover .dummytext{
        height: 0;
        width: 0;
        visibility: hidden;
    }

    .grayedout{
        box-sizing: border-box;
        background-color: rgb(51, 51, 51) !important;
        border-color: dimgrey !important;
        border-width: 3px;
        border-bottom-width: 6px;
        border-style: solid;
        color: ghostwhite;
    }

    .grayed{
        background-color: rgb(51, 51, 51) !important;
        color: ghostwhite;
    }

}

@media (min-width: 451px) and (max-width: 655px){
    .navflex:hover > *:not(:hover) .dummytext{
        background-color: ghostwhite;
        color: ghostwhite;
        border-color: ghostwhite;
    }

    .navflex:hover > *:not(:hover) .grayed{
        color: rgb(51, 51, 51);
    }
}