.menu {
    overflow:hidden;
    max-width:1000px;
    margin-left:3rem;
}

.noclip {
    overflow:visible;
}

.menu .menubox {
    display:none;
}

.noclip .menubox {
    display:flex;
}

.menu .minilink {
    color:#17181b;
    font-size:3rem;
    display:none;
    cursor:pointer;
}

.menu .miniclose {
    color:#fff;
    font-size:3rem;
    position:fixed;
    top:30px;
    right:30px;
    z-index:10;
    display:none;
}

.menu .mainmenu {
    font-weight:600;
    transition:all .3s;
    text-align:center;
    text-transform:capitalize;
    height:100%;
    color:#17181b;
    position:relative;
    font-size:1rem;
}

.menu .mainmenu:first-of-type {
    margin-left:0;
}

.menu .mainmenu .top {
    cursor:default;
    transition:all .4s;
    height:100%;
    padding:1rem;
    border-top-left-radius:5px;
    border-top-right-radius:5px;
    font-size:1rem;
}

.menu .toplink {
    font-size:1rem;
    font-weight:600;
    transition:all .3s;
    text-align:center;
    text-transform:capitalize;
    color:#17181b;
    padding:1rem;
    border-radius:5px;
}

.menu .toplink:hover {
    background-color:#fff;
    border-color:#fff;
    color:#17181b;
    box-shadow:0 2px 4px rgba(0,0,0,0.25);
}

.menu .sublink {
    font-size:18px;
    font-weight:600;
    transition:all .3s;
    text-align:center;
    text-transform:uppercase;
    color:#fff;
    padding:10px 15px;
    border:2px solid #fff;
    cursor:pointer;
    white-space: nowrap;
}

.menu .sublink:hover {
    background-color:#ebb22c;
    border-color:#ebb22c;
    color:#fff;
    box-shadow:0 2px 4px rgba(0,0,0,0.25);
}

.menu .mainmenu:hover .top {
    background-color:#17181b;
    color:#fff;
}

.menu .mainmenu .lower {
    height:0px;
    position:absolute;
    left:0;
    top:0;
    opacity:0;
    transition:all .3s;
    pointer-events:none;
    width:300px;
    border-radius:5px;
    border-top-left-radius:0;
}

.menu .mainmenu:hover .lower {
    opacity:1;
    height:auto;
    top:100%;
}

.menu .mainmenu:hover .lower {
    pointer-events:all;
    opacity:1;
    background-color:#17181b;
}

.menu .mainmenu .lower .active {
    background-color:#17181b;
    border-bottom:0 !important;
    color:#ebb22c;
}

.menu .mainmenu .lower a {
    color:#fff;
    font-size:1rem;
    padding:10px 15px;
    font-weight:600;
    opacity:.33;
    display:block;
    text-align:left;
}

.menu .mainmenu .lower a:not(:last-of-type) {
    border-bottom:1px solid rgba(0,0,0,.15);
}

.menu .mainmenu .lower a:hover {
    opacity:1;
    border-bottom-color:rgba(0,0,0,.05);
    color:#fff;
}

.header .menu .contact {
    color:#0b0b0b;
    font-size:18px;
    font-weight:bold;
    padding:10px 15px;
    padding-top:15px;
    margin-left:60px;
    transition:all .4s;
}

.header .menu .contact:hover {
    box-shadow: 0px 3px 5px rgba(0,0,0,0.25);
    background-color:#fff;
    color:#d7b033;
    padding-top:10px;
}

.header .menu .contact div {
    height:0px;
    width:100%;
    background-color:#d7b033;
    opacity:0;
    margin-top:8px;
    transition:all .4s;
}

.header .menu .contact:hover div {
    height:5px;
    opacity:1;
}

.menu .smallclose {
    display:none;
}

.header .smalltoggle {
    display:none;
    width:50px;
    position:relative;
    opacity:.9;
}

.header .smalltoggle:hover {
    opacity:1;
}

.header .smalltoggle div {
    height:5px;
}

.header .smalltoggle .line-1 {
    width:100%;
    margin-bottom:10px;
    background-color:#fff;
    transition:.3s all;
}

.header .smalltoggle:hover .line-1 {
    width:85%;
    margin-right:15%;
    background-color:#697865;
}

.header .smalltoggle .line-2 {
    width:60%;
    margin-left:40%;
    margin-bottom:10px;
    background-color:#fff;
    transition:.3s all;
}

.header .smalltoggle:hover .line-2 {
    margin-right:40%;
    margin-left:0;
    background-color:#697865;
}

.header .smalltoggle .line-3 {
    width:85%;
    margin-left:15%;
    background-color:#fff;
    transition:.3s all;
}

.header .smalltoggle:hover .line-3 {
    width:100%;
    margin-left:0;
    background-color:#697865;
}

.header .navbar {
    width:100%;
    height:0;
}

.header .smallmenu {
    display:none;
    color:#fff;
    font-size:42px;
    font-weight:bold;
    cursor:pointer;
}

.header .smallopen {
    display:none;
}

/* #region 900 Breakpoint */

.m900 .mainmenu .top, .m900 .toplink, .m900 .sublink {
    font-size:1rem;
    margin-left:0;
}

.m900 .mainmenu .lower {
    top:36px;
}

.m900 .mainmenu:hover .lower {
    top:46px;
}

/* #endregion */

/* #region 600 Breakpoint */

.m700 {
    flex-grow:0;
}

.m700 .menubox {
    position:fixed;
    flex-direction:column;
    justify-content:center;
    top:0;
    bottom:0;
    left:0;
    right:0;
    background-color:rgba(39,51,83,0.98);
    z-index:9;
    opacity:0;
    pointer-events:none;
}

.m700 .menubox .mainmenu, .m700 .menubox .toplink, .m700 .menubox .sublink {
    width:95%;
    text-align:left;
    height:auto;
    font-size:1.5rem;
    line-height:1.5rem;
    display:block;
}

.m700 .menubox .mainmenu .top {
    display:block;
    height:auto;
    font-size:1.5rem;
    line-height:1.5rem;
}

.m700 .menubox .mainmenu .lower {
    position:static;
    width:100%;
    height:auto;
    top:0;
    opacity:1;
    display:none;
}

.m700 .menubox .mainmenu:hover .lower {
    opacity:1;
    height:auto;
    top:0;
}

.m700 .minilink {
    display:block;
}

/* #endregion */

.popped .menubox {
    opacity:1;
    pointer-events:all;
    transition:all .5s;
}

.popped .menubox .lower {
    transition:none;
}

.popped .menupop {
    background-color:#5993f7;
    border-radius:0.5rem;
}

.popped .menupop .top {
    border-top-left-radius:0.5rem;
    border-top-right-radius:0.5rem;
}

.popped .miniclose {
    display:block;
}