@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&display=swap'); @import url(https://fonts.googleapis.com/css?family=Lato); 
@import url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.css); 
@import url('https://fonts.googleapis.com/css2?family=Cabin:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&display=swap'); 

div.ruby-menu-demo-header { position: relative; left: 0; top: 0; width: 100%; height: auto; padding: 0; margin: 0; z-index: 99999}
/* theme */ 
ul.ruby-menu > li > a { color: #222; z-index:999999 !important; }
ul.ruby-menu > li > a:hover, ul.ruby-menu > li:hover > a, ul.ruby-menu > li.ruby-active-menu-item > a:hover, ul.ruby-menu > li.ruby-active-menu-item:hover > a { background: #222; color: #800027; }
ul.ruby-menu > li.ruby-active-menu-item > a { background: #efefef; color: #222}
ul.ruby-menu.ruby-menu-dividers > li > a, ul.ruby-menu.ruby-menu-dividers > li.ruby-menu-social > a { border-left: 1px solid #ddd; border-right: 1px solid #fff}
ul.ruby-menu.ruby-menu-dividers > li:first-child > a, ul.ruby-menu.ruby-menu-dividers > li.ruby-menu-social:last-child > a { border-left: none}
ul.ruby-menu.ruby-vertical.ruby-menu-dividers > li > a { border: none; border-top: 1px solid #ddd; border-bottom: 1px solid #fff}
ul.ruby-menu.ruby-vertical.ruby-menu-dividers > li:first-child > a { border-top: none}
ul.ruby-menu.ruby-menu-dividers > li > a:hover, ul.ruby-menu.ruby-menu-dividers > li:hover > a { border-left: 1px solid #222; border-right: 1px solid #222}
ul.ruby-menu.ruby-vertical.ruby-menu-dividers > li > a:hover, ul.ruby-menu.ruby-vertical.ruby-menu-dividers > li:hover > a { border-bottom: 1px solid #222}
ul.ruby-menu.ruby-menu-dividers > li.ruby-active-menu-item > a { border-left: 1px solid #efefef; border-right: 1px solid #fff}
ul.ruby-menu.ruby-vertical.ruby-menu-dividers > li.ruby-active-menu-item > a { border-bottom: 1px solid #fff; border-left: none; border-right: none}
ul.ruby-menu.ruby-vertical.ruby-menu-dividers > li > a { border-left: none; border-right: none}
ul.ruby-menu.ruby-vertical.ruby-menu-dividers > li.ruby-active-menu-item > a:hover, ul.ruby-menu.ruby-vertical.ruby-menu-dividers > li.ruby-active-menu-item:hover > a { border-bottom: 1px solid #222; border-left: none}
ul.ruby-menu > li > ul, ul.ruby-menu > li > ul > li > ul, ul.ruby-menu > li > ul > li > ul > li > ul { border-top: 4px solid #222}
ul.ruby-menu > li > ul > li > a, ul.ruby-menu > li > ul > li > ul > li > a, ul.ruby-menu > li > ul > li > ul > li > ul > li > a { background: #fff; color: #666}
ul.ruby-menu > li > ul > li:hover > a, ul.ruby-menu > li > ul > li > a:hover, ul.ruby-menu > li > ul > li > ul > li:hover > a, ul.ruby-menu > li > ul > li > ul > li > a:hover, ul.ruby-menu > li > ul > li > ul > li > ul > li:hover > a, ul.ruby-menu > li > ul > li > ul > li > ul > li > a:hover { background: #efefef}
ul.ruby-menu > li.ruby-menu-mega > div, ul.ruby-menu > li.ruby-menu-mega-blog > div, ul.ruby-menu > li.ruby-menu-mega-shop > div { background: #fff; border-top: 4px solid #222}
@media(min-width: 768px) {
ul.ruby-menu > li.ruby-menu-mega-shop > div > ul > li > a:before, ul.ruby-menu > li.ruby-menu-mega-shop > div > ul > li > a:after { background-color:#222}
ul.ruby-menu > li.ruby-menu-mega-shop > div > ul > li > a:hover { color: #333}
ul.ruby-menu > li.ruby-menu-mega-blog > div > ul.ruby-menu-mega-blog-nav > li.ruby-active-menu-item > a:after, ul.ruby-menu > li.ruby-menu-mega-blog > div > ul.ruby-menu-mega-blog-nav > li:hover > a:after { border-color: transparent #fff transparent transparent}
}

@media(min-width: 767px) { 
ul.ruby-menu > li > a:after { transition:all .3s ease}
ul.ruby-menu > li > ul > li > a:after, ul.ruby-menu > li > ul > li > ul > li > a:after, ul.ruby-menu > li > ul > li > ul > li > ul > li > a:after { transition: all .3s ease}
ul.ruby-menu > li > ul, ul.ruby-menu > li > div { transform: translateY(25px); transition: all .3s ease}
ul.ruby-menu > li:hover > ul, ul.ruby-menu > li:hover > div { transform: translateY(0)}
ul.ruby-menu.ruby-vertical > li > ul, ul.ruby-menu.ruby-vertical > li > div { transform: translateX(25px); transition: all .3s ease}
ul.ruby-menu.ruby-vertical > li:hover > ul, ul.ruby-menu.ruby-vertical > li:hover > div { transform: translateX(0)}
ul.ruby-menu > li > ul > li > ul, ul.ruby-menu > li > ul > li > ul > li > ul, ul.ruby-menu > li > ul > li > ul > li > ul > li > ul { transform: translateX(25px); transition: all .3s ease}
ul.ruby-menu > li > ul > li:hover > ul, ul.ruby-menu > li > ul > li > ul > li:hover > ul, ul.ruby-menu > li > ul > li > ul > li > ul > li:hover > ul { transform: translateX(0)}
ul.ruby-menu > li > ul > li.ruby-open-to-left > ul, ul.ruby-menu > li > ul > li > ul > li.ruby-open-to-left > ul, ul.ruby-menu > li > ul > li > ul > li > ul > li.ruby-open-to-left > ul { transform: translateX(-25px); transition: all .3s ease}
ul.ruby-menu > li > ul > li.ruby-open-to-left:hover > ul, ul.ruby-menu > li > ul > li > ul > li.ruby-open-to-left:hover > ul, ul.ruby-menu > li > ul > li > ul > li > ul > li.ruby-open-to-left:hover > ul { transform: translateX(0)}
}

/* main */

*, :before, :after { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box}
div.ruby-wrapper { position: relative; /*width: 780px;*/ border:1px solid #FF0000; height: 50px; margin: 0 auto; background: #333}
div.ruby-wrapper ul { margin: 0; padding: 0; list-style: none}
div.ruby-wrapper > ul { position: relative}
ul.ruby-menu > li { float: left; font-size: 13px}
ul.ruby-menu > li.ruby-menu-right { float: right}
ul.ruby-menu > li > a { display: block; line-height: 50px; padding: 0 18px 0 18px; color:#103b7a; text-decoration: none; font-size:16px; margin-left:25px; font-weight:600; }
::marker { color: #fff; font-size: 0.1px; }
ul.ruby-menu > li > a:only-child { padding: 0 8px}
ul.ruby-menu > li > a:hover, ul.ruby-menu > li:hover > a, ul.ruby-menu > li.ruby-active-menu-item > a:hover, ul.ruby-menu > li.ruby-active-menu-item:hover > a { color:#af0000; background-color:#fff; }
ul.ruby-menu > li > a:only-child:after, ul.ruby-menu > li:hover > a:only-child:after { content: ''}
ul.ruby-menu > li > ul, ul.ruby-menu > li > ul > li > ul, ul.ruby-menu > li > ul > li > ul > li > ul { position: absolute; -webkit-box-shadow: 0 8px 24px -5px #ccc; -moz-box-shadow: 0 8px 24px -5px #ccc; box-shadow: 0 8px 24px -5px #ccc; border-top: 4px solid #fff}
ul.ruby-menu > li > ul > li, ul.ruby-menu > li > ul > li > ul > li { position: relative}
ul.ruby-menu > li > ul > li > a, ul.ruby-menu > li > ul > li > ul > li > a, ul.ruby-menu > li > ul > li > ul > li > ul > li > a { display: block; line-height: 36px; padding: 0 40px 0 20px; background: #fff; font-weight:500; color: #080b0f; text-decoration: none; font-size: 13px; margin-left:-40px; }
ul.ruby-menu > li > ul > li:hover > a, ul.ruby-menu > li > ul > li > a:hover, ul.ruby-menu > li > ul > li > ul > li:hover > a, ul.ruby-menu > li > ul > li > ul > li > a:hover, ul.ruby-menu > li > ul > li > ul > li > ul > li:hover > a, ul.ruby-menu > li > ul > li > ul > li > ul > li > a:hover { color:#af0000; }
ul.ruby-menu > li > ul > li > a:only-child:after, ul.ruby-menu > li > ul > li > ul > li > a:only-child:after, ul.ruby-menu > li > ul > li > ul > li > ul > li > a:only-child:after { content: ""}
ul.ruby-menu > li > ul > li > a .fa, ul.ruby-menu > li > ul > li > ul > li > a .fa, ul.ruby-menu > li > ul > li > ul > li > ul > li > a .fa { position: relative; width: 24px}
ul.ruby-menu > li.ruby-menu-right > ul { right: 0}
ul.ruby-menu > li > ul > li > ul, ul.ruby-menu > li > ul > li > ul > li > ul { left: 160px; top: -4px; z-index: 100; min-width: 270px; }
ul.ruby-menu > li > ul > li.ruby-open-to-left > ul, ul.ruby-menu > li > ul > li > ul > li.ruby-open-to-left > ul { left: auto; right: 170px}

@media(min-width: 768px) {
div.ruby-wrapper.ruby-menu-transparent { background:none}
div.ruby-wrapper.ruby-menu-transparent > ul.ruby-menu > li.ruby-active-menu-item > a { background: none}
div.ruby-wrapper.ruby-menu-transparent > ul.ruby-menu > li.ruby-menu-social > a { border: none}
div.ruby-wrapper.ruby-menu-transparent > ul.ruby-menu.ruby-menu-dividers > li > a { border: none}
div.ruby-wrapper.ruby-menu-transparent > ul.ruby-menu > li:hover > a, div.ruby-wrapper.ruby-menu-transparent > ul.ruby-menu > li > a:hover, div.ruby-wrapper.ruby-menu-transparent > ul.ruby-menu.ruby-menu-dividers > li:hover > a, div.ruby-wrapper.ruby-menu-transparent > ul.ruby-menu.ruby-menu-dividers > li > a:hover { background: none; color: #e2e2e2}
div.ruby-wrapper.ruby-menu-transparent > ul.ruby-menu > li.ruby-menu-social.ruby-menu-search > a:hover, div.ruby-wrapper.ruby-menu-transparent > ul.ruby-menu > li.ruby-menu-social.ruby-menu-search:hover > a { background: none}
div.ruby-wrapper.ruby-menu-full-width { width: 100%}
div.ruby-wrapper.ruby-menu-full-width > ul.ruby-menu { width: 980px; margin: 0 auto}
ul.ruby-menu > li > ul, ul.ruby-menu > li > ul > li > ul, ul.ruby-menu > li > ul > li > ul > li > ul { visibility: hidden; opacity: 0}
ul.ruby-menu > li:hover > ul, ul.ruby-menu > li > ul > li:hover > ul, ul.ruby-menu > li > ul > li > ul > li:hover > ul { visibility: visible; opacity: 1}
ul.ruby-menu > li > a:after { font-family: "FontAwesome"; text-decoration: none; content: '\f107'; position: absolute; margin-left: 5px}
ul.ruby-menu > li:hover > a:after { -webkit-transform: rotate(-180deg); -moz-transform: rotate(-180deg); -o-transform: rotate(-180deg); -ms-transform: rotate(-180deg); transform: rotate(-180deg)}
ul.ruby-menu > li > ul > li > a:after, ul.ruby-menu > li > ul > li > ul > li > a:after, ul.ruby-menu > li > ul > li > ul > li > ul > li > a:after { font-family: "FontAwesome"; text-decoration: none; font-size: 16px; padding: 0; content: '\f105'; position: absolute; right: 15px}
ul.ruby-menu > li > ul > li:hover > a:after, ul.ruby-menu > li > ul > li > ul > li:hover > a:after, ul.ruby-menu > li > ul > li > ul > li > ul > li:hover > a:after { -webkit-transform: rotate(-180deg); -moz-transform: rotate(-180deg); -o-transform: rotate(-180deg); -ms-transform: rotate(-180deg); transform: rotate(-180deg)}
ul.ruby-menu > li > ul > li.ruby-open-to-left > a:after, ul.ruby-menu > li > ul > li > ul > li.ruby-open-to-left > a:after, ul.ruby-menu > li > ul > li > ul > li > ul > li.ruby-open-to-left > a:after { content: '\f104'; right: auto; left: 10px}
ul.ruby-menu > li > ul > li.ruby-open-to-left:hover > a:after, ul.ruby-menu > li > ul > li > ul > li.ruby-open-to-left:hover > a:after, ul.ruby-menu > li > ul > li > ul > li > ul > li.ruby-open-to-left:hover > a:after { -webkit-transform: rotate(-180deg); -moz-transform: rotate(-180deg); -o-transform: rotate(-180deg); -ms-transform: rotate(-180deg); transform: rotate(-180deg)}
}
/* responsive */ 
ul.ruby-menu > li.ruby-active-menu-item > a { color:#af0000 !important; background:#fff !important;}