#menubg {position: fixed; z-index: 5; top:0; bottom: 0; right: 0; left: 0; width:100%; height: 0; -webkit-transition: background .6s ease 0s, visibility 0s ease .6s, height 0s ease .6s; transition: background .6s ease 0s, visibility 0s ease .6s, height 0s ease .6s}
html.showmenu #menubg {background:rgba(0,0,0,0.5); visibility: visible; height:100%; -webkit-transition: background .6s ease 0s, visibility 0s ease 0s, height 0s ease 0s; transition: background .6s ease 0s, visibility 0s ease 0s, height 0s ease 0s;}
html.showsearch #menubg {background:rgba(0,0,0,0.5); visibility: visible; height:100%; -webkit-transition: background .6s ease 0s, visibility 0s ease 0s, height 0s ease 0s; transition: background .6s ease 0s, visibility 0s ease 0s, height 0s ease 0s;}

#mainmenu {position: fixed; z-index: 12; width:100vw;top:58px; height: calc(100vh - 58px); bottom: 0; left: -100%; margin: 0; display: -webkit-box;display: -webkit-flex;display: -ms-flexbox;display: flex; -ms-flex-direction: column; flex-direction: column; -webkit-transition: all .3s cubic-bezier(0.55, 0, 0.1, 1); transition: all .3s cubic-bezier(0.55, 0, 0.1, 1); visibility: hidden; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0);}
html.showmenu #mainmenu {left: 0; visibility: visible; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0);}

#mainmenu > ul {position: absolute; left: 0; top: 0; width: 80%; bottom: 0; background:#fff;}
#mainmenu > ul li {position: relative; margin: 0 2px;}
#mainmenu > ul li > a {position: relative; order: 0; display: -webkit-box;display: -webkit-flex;display: -ms-flexbox;display: flex; -webkit-box-pack: space-between; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; -webkit-align-items: center; -moz-align-items: center; -ms-align-items: center; align-items:center; padding: 1.25rem 2rem 1.25rem 1.6875rem; -webkit-transition: background .2s ease-in-out; transition: background .2s ease-in-out;box-shadow: 0 -1px 0 0 rgba(0,0,0,0.0625) inset; flex-grow: 0; color:#335d9b; font-size: 1.125rem; font-weight: 700;line-height: 1.2; white-space: normal;}
#mainmenu > ul li > a.active {background:rgba(0,0,0,.0625);}
#mainmenu > ul li > a i {font-size: 0.9rem; position: relative; margin-right: -1.25rem;}

#mainmenu .submenu {z-index: 13; position: fixed; top: 0; bottom: 0; left: -100%; width: 80%; height: 100%; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); -webkit-transition: all 0.5s; transition: all 0.5s; background:#fff; }
#mainmenu .submenu.subopen {left: 0; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0);}
.submenu a.mp-back {box-shadow: 0 -1px 0 0 rgba(0,0,0,0.0625) inset; padding: 1.15rem 1.6875rem 1.15rem 3.375rem; display: -webkit-box;display: -webkit-flex;display: -ms-flexbox;display: flex; -webkit-align-items: center; -moz-align-items: center; -ms-align-items: center; align-items:center; -webkit-box-pack: flex-start; -webkit-justify-content: flex-start; -ms-flex-pack: start; justify-content: flex-start; -webkit-transition: background .2s ease-in-out; transition: background .2s ease-in-out; background:#fff; color:#335d9b; font-weight: 900; font-size: 1.125rem; line-height: 1.2;}
.submenu a.mp-back i {font-size: 0.9rem; position: relative; margin-right: 12px;width:24px; height:auto; text-align: center;margin-left: -36px;}
#mainmenu .submenu ul {position: relative;}
#mainmenu .submenu ul li {position: relative;}
#mainmenu .submenu ul li.nothing {padding: .84375rem 3.375rem;  box-shadow: 0 -1px 0 0 rgba(0,0,0,0.0625) inset;}
#mainmenu .submenu ul li a {position: relative; display: -webkit-box;display: -webkit-flex;display: -ms-flexbox;display: flex;-webkit-align-items: center; -moz-align-items: center; -ms-align-items: center; align-items:center; -webkit-box-pack: flex-start; -webkit-justify-content: flex-start; -ms-flex-pack: start; justify-content: flex-start; padding: .84375rem 3.375rem; -webkit-transition: background .2s ease-in-out; transition: background .2s ease-in-out; font-size: 1rem; color: #335d9b; box-shadow: 0 -1px 0 0 rgba(0,0,0,0.0625) inset; background:#fff; line-height: 1.2; white-space: normal;}
#mainmenu .submenu ul li a.active {background:rgba(0,0,0,.0625);}

#searchmenu {position: fixed; z-index: 6; width:100%; height: 90px; top:-100%; left: 0; right: 0; margin: 0; -webkit-transition: all .3s cubic-bezier(0.55, 0, 0.1, 1); transition: all .3s cubic-bezier(0.55, 0, 0.1, 1); visibility: hidden; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); box-shadow: 0 1px 2px 0 rgba(0,0,0,.06),0 1px 3px 0 rgba(0,0,0,.1);}
html.showsearch #searchmenu {top:58px; visibility: visible; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0);}

#searchmenu > div {position: relative; width: 100%; height:100%; padding: 0 15px; background:#fff; display: -webkit-box;display: -webkit-flex;display: -ms-flexbox;display: flex; -ms-flex-direction: column; flex-direction: column; -webkit-align-items: center; -moz-align-items: center; -ms-align-items: center; align-items:center; -webkit-box-pack: center; -ms-flex-pack:center; justify-content: center;}
#searchmenu > div form {position: relative; width:100%;}
#searchmenu > div form button {position: absolute; right: 0;font-size: 1.35rem;z-index: 1; background: none; border: 0 none; padding: 0; -webkit-appearance: none; appearance: none;color:#335d9b; line-height: 50px; width:3rem; text-align: center;}
#searchmenu > div form input {position: relative; width:100%; height: 50px;border-color: #ced4da; border-radius: .25rem; padding:0.375rem 3rem 0.375rem 0.75rem; color:#495057; font-size: 1rem; line-height: 1.5; font-family: "Roboto Slab", serif; }
#searchmenu > div form input:focus {border-color: #729de8; box-shadow: inset 0 1px 2px transparent,0 .375rem .625rem -0.3125rem rgba(112, 180, 194,.25);}

@media (min-width: 576px) {
    #mainmenu > ul {width: 50%;}
    #mainmenu > ul li > a {padding: 1.6875rem 2rem 1.6875rem 1.6875rem;}
    #mainmenu .submenu {width: 50%;}
}

html.webapp #mainmenu > ul li.mobileapplink {display: none;}