:root {
    --color-main-blue:#428bca;
    --color-main-yellow:#fec106;
    --color-dark-blue:#032b73;
    --yellow:#fba113;
    --blue:#14c3e5;
    --green:#27b999;
    --red:#f47c7c;
    --font-1:Roboto;
    --font-2:'Philosopher', sans-serif;
    --color1:#023362;
    --color2:#9C27B0;--color3:#f9d859;
    --font1:Arial;
    --font2:Impact;
    --navbar:#ec1c24;
  
  --icon:FontAwesome;
}

.brj-menu{z-index:10; font-weight:normal;}
.mainnav{display: inline-block; background-color:#fffae9; color:#333;}
.mainnav .menulogo{background-color:#fff; display:block; padding:20px; text-align:center;}
.mainnav .menulogo a,
.mainnav .menulogo:hover a{background-color:transparent; padding:0px;}
.mainnav, .mainnav li {padding: 0;margin: 0;list-style: none; font-family:var(--nav-font); line-height: 1;}

.mainnav li {border-bottom: 1px solid #0001;}

.mainnav a,
.brj-caret {color:#151515; display: block; text-decoration:none; font-size: 17px; padding: 15px 11px;}
.mainnav li a i{margin-right:5px;}
.mainnav li a small{padding:0px; margin-bottom:5px; display:block; color:#333;}
.mainnav li:hover a,
.mainnav li:hover .brj-caret{text-decoration: none; color: #151515;}
.brj-caret{position: relative;}
.nested{display: none;background-color:#ed6d49; border-radius: 0 0 3px 3px;border: 1px solid #0001;border-top: 0;margin: 0;padding: 0;z-index:99;}

.nested li {border-bottom: 0px solid #f3896c;display: block; float: none;}
.nested li a {font-size: 12px;white-space: nowrap;color: #000; font-weight:normal;}
.nested li a:hover {background-color: #fff;}
.brj-caret {cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;}

.brj-caret::after {content: "\25B6"; display: inline-block; margin-left: 6px; font-size: 15px;}
.caret-down::after{-ms-transform: rotate(90deg); -webkit-transform: rotate(90deg); transform: rotate(90deg);}

.active {display: block;}

.brj-menu hr{border-top:1px #0003 solid; border-bottom:1px #fff2 solid;}

@media(max-width:768px) {
    .fixed {position: fixed;top: 0;right: 0;padding:0px;background-color: #fff;z-index: 3;}
    .brj-menu {position: relative;border: 0;background: 0 0;}
    .mainnav {position: fixed;left: -1000px;top: 0;width: 280px;height: 100vh;border-right: 0px solid #000;box-shadow: 0 0 100px #0002;z-index: 9999; overflow-y:scroll; box-shadow:0 0 50px #0006;}
    .mainnav li{display: block; float: none;}
    .btn_mobile_menu {width: 45px;height: 44px;display: block; background-color: var(--navbar);cursor: pointer;cursor: pointer;z-index: 1;float: right; position:relative; top:0px; right: -1px;}
    .btn_mobile_menu span {cursor: pointer;height: 3px;width: 23px;background: #fff;display: block;position: relative;transition: all .5s ease-in-out;margin: 21px 11px;z-index: 2;}
    .btn_mobile_menu span:before {cursor: pointer;height: 3px;width: 23px;background: #fff;position: absolute;display: block;content: '';top: -7px;transition: all .5s ease-in-out;}
    .btn_mobile_menu span:after {cursor: pointer;height: 3px;width: 23px;background: #fff;position: absolute;display: block;content: '';bottom: -7px;transition: all .5s ease-in-out;}
    .mobilemenu_hide {-webkit-animation-name: hide;animation-name: hide;-webkit-animation-duration: 1s;animation-duration: 1s;}
    .mobilemenu_show {left: 0;-webkit-animation-name: show;animation-name: show;-webkit-animation-duration: 1s;animation-duration: 1s;}
    @-webkit-keyframes show {from {left: -1000px;} to {left: 0;}}
    @keyframes show {from {left: -1000px;} to {left: 0;}}
    @-webkit-keyframes hide {from {left: 0;} to {left: -1000px;}}
    @keyframes hide {from {left: 0;} to {left: -1000px;}}
    .mainnav a,.brj-caret {font-size: 12px;padding: 12px 10px 12px 30px;}
	.brj-caret+.nested a,.brj-caret:hover+.nested a{color:#fff;}
    .brj-caret::after{float: right;}
}

@media(min-width:769px) {
  .brj-menu{text-align:center;}
  .mainnav a,.brj-caret {font-size:16px;padding: 15px 13px;}
    .mainnav {display:inline-flex; position: relative;}
    .mainnav > li {border-left: 1px solid #000;border-right: 1px solid #fff4; float: left;}
    .mainnav > li:first-child {border-left: 0;}
    .mainnav > li.last-child, .nav > li:last-child {border-right: 0;}
	.nested li a {padding: 10px 20px;}
	.nested{position: absolute;}
	.mainnav li:hover{background-color:var(--navbar-hover);}
	.mainnav li:hover a,.nav li:hover .brj-caret{color: #000;}
	.mainnav li:hover .nested{display: block;}
	.mainnav li:hover .brj-caret::after {-ms-transform: rotate(90deg); -webkit-transform: rotate(90deg); transform: rotate(90deg);}
}