/* -GENERAL-------------------------------------------------- */

* {
    margin: 0;
    padding: 0;
    border: 0;
}

body {
    margin: 0;
    width: 100%;
    max-width: 100%;
    height: auto;
     background-color: #d9dbe0;
}
header {
    margin: 0;
    padding: 0;
    border: 0;
}

/* -------ALL LINKS STRIPPED------- */
a { color: inherit; text-decoration: none; } 

/* -NAV-------------------------------------------------- */
#header,.navbar,.logo,.wmstop,.list,.show-menu,.divider,#menu {
    z-index: 6;
}
.navbar {
    margin: 0;
    width: 100%;
    max-width: 100%;
    height: 5vw;
    display: flex;
    background: transparent;
    flex-direction: row;
    justify-content: space-around;
    position: fixed;
}

.list {
    height: 100%;
}

.divider {
    color: #fff;
    font-size: 1.1vw;
}

#wmstop {
    max-width: 6vw;
    height: auto !important;
}

.logo {
    margin: 0 0 0 10vw;
    height: 100%;
    width: auto;
    max-height: 3vw;
    padding: 1.2vw 0;
    float: left;
    color: #fff;

}
/*Strip the ul of padding and list styling*/
ul.listnav {
    text-align: right;
    list-style-type:none;
    margin-right: 5vw;
    height: auto;
}
/*Create a horizontal list with spacing*/
li.linav {
    display:inline-block;
    text-align: center;
    position: relative;
    padding: 2vw 1vw 0px;
}
/*Style for menu links*/
li.linav a {
    display:block;
    height: 4vw;
    text-align: center;
    font: 1vw Verdana;
    color: #fff;
    text-decoration: none;
    transition:color 0.5s ease;/*animation*/

}
/*Hover state for top level links*/

li.linav:hover a {
    color: #D52630;
}

li.linav:active a {
    color: #D52630;
}

/*Hide dropdown links until they are needed*/
li.linav ul.listnav {
    display: none;
}
/*Make dropdown links vertical*/
li.linav ul.listnav li.linav {
    display: block;
    float: none;
}
/*Prevent text wrapping*/
li.linav ul.listnav li.linav a {
    width: auto;
    min-width: 1px;
}
/*Style 'show menu' label button and hide it by default*/
.show-menu {
    font-family: Verdana;
    text-decoration: none;
    color:#fff;
    background: transparent;
    font-size: 3.3vw;
    text-align: center;
    padding: 1.5em 0;
    margin: 0px;
    display: none;
}
/*Hide checkbox*/
input[type=checkbox]{
    display: none;
}
/*Show menu when invisible checkbox is checked*/
input[type=checkbox]:checked ~ #menu{
    display: block;
}
/* ----------------------------------------------------- */
/* ------------------SCROLL TRANSITION------------------ */
/* ----------------------------------------------------- */
.navbar.scrolled {

    background-color: #222e40 !important;
    transition: background-color 500ms ease;
    border-bottom: solid 1px #fff;
}
#wmstop.navbar.scrolled {
    filter: brightness(5);
    transition: filter 0.5s ease;
}
/* -------------------------------------------------------- */
/* -----------MEDIA QUERY FOR RESPONSIVE SCREEN------------ */
/* -------------------------------------------------------- */
@media only screen and (max-width : 799px){
        /*Make dropdown links appear inline*/
        ul.listnav {
            position: relative;
            display: none;
        }
        /*Create vertical spacing*/
        li.linav {
            background-color: #222e40;
            position: relative;
        }
        /*Make all menu links full width*/
        ul.listnav li.linav, li.linav a {
            font-size: 2.5vw;
            text-align: center;
            border-bottom: solid 1px rgb(57, 65, 71);
            padding-top: 1vw;
            padding-left: 0;
            margin: 0;
        }
        /*Display 'show menu' link*/
        .show-menu {
            display:block;
        }
        .logo {
            display: none;
            position: relative;
        }
        .divider {
            display: none;
            position: relative;
        }
        .navbar {
            margin: 0;
            background-color: #222e40;
            height: 14vw;
        }
        .navbar.scrolled {
        background-color: transparent;
        color: transparent;
        }
        .list, #menu,.navbar, ul.listnav, li.linav,.show-menu {
            width: 100vw;
        }
}

@media only screen and (max-width : 799px) and (orientation: landscape) {
    .navbar {
        height: 7vw;
    }
    .show-menu {
        display: block;
        padding: 1.5vw 0 0 0;
    }
    ul.listnav li.linav, li.linav a {
        font-size: 2vw;
        padding-top: 0.5vw;
        padding-left: 0;
        margin: 0;
    }
}