@charset "utf-8";
.f-nav{z-index:9999;position:fixed!important;top:0;width:100%;max-width:none;background:#000000db;border-bottom:1px groove #999}
.exo-menu{width:100%;float:left;text-align:center;list-style:none;position:relative}
.exo-menu > li{display:inline-block;float:left;font-size:20px;text-align:left;text-transform:uppercase}
.exo-menu > li > a{color:#ccc;text-decoration:none;text-transform:uppercase}
.exo-menu > li > a.active,.exo-menu > li > a:hover,li.drop-down ul > li > a:hover{color:#009FE1;border-bottom:2px solid}
.exo-menu i{float:left;font-size:18px;margin-right:6px;line-height:20px!important}
li.drop-down,.flyout-right,.flyout-left{position:relative}
li.drop-down>ul{top:50px;left:0;min-width:170px;z-index:3}
.drop-down-ul{display:none}
.flyout-right>ul,.flyout-left>ul{top:0;min-width:165px;display:none;border-left:1px solid #365670}
li.drop-down>ul>li>a,.flyout-right ul>li>a,.flyout-left ul>li>a{color:#fff;display:block;font-size:17px;padding:10px 20px;text-decoration:none;background-color:#141414e3;border-bottom:1px dotted #333;-webkit-transition:color .2s linear,background .2s linear;-moz-transition:color .2s linear,background .2s linear;-o-transition:color .2s linear,background .2s linear;transition:color .2s linear,background .2s linear}
.flyout-mega-wrap{top:0;right:0;left:100%;width:100%;display:none;height:100%;padding:15px;min-width:742px}
h4.row.mega-title{color:#eee;margin-top:0;font-size:18px;padding-bottom:10px;margin-bottom:10px;border-bottom:1px solid #ccc}
.flyout-mega ul > li > a{font-size:90%;line-height:25px;color:#fff;font-family:inherit}
.flyout-mega ul > li > a:hover,.flyout-mega ul > li > a:active,.flyout-mega ul > li > a:focus{text-decoration:none;background-color:transparent!important;color:#ccc!important}
.mega-menu{left:0;right:0;top:50px;padding:15px;display:none;padding-top:0;min-height:100%;z-index:3}
.mega-menu ul li a{display:block;line-height:25px;font-size:17px}
.mega-menu ul li a:hover{color:#fff}
ul.stander li a{padding:4px 0}
ul.description li{padding-bottom:12px;line-height:8px}
ul.description li span{color:#ccc;font-size:85%;line-height:1}
a.view-more{border-radius:1px;margin-top:15px;background-color:#009FE1;padding:2px 10px!important;line-height:21px!important;display:inline-block!important}
a.view-more:hover{color:#fff;background:#0DADEF}
ul.icon-des li a i{color:#fff;width:35px;height:35px;border-radius:50%;text-align:center;background-color:#009FE1;line-height:35px!important}
ul.icon-des li{width:100%;display:table;margin-bottom:11px}
.Images{left:0;width:100%;display:none;color:#fefefe;padding-top:15px;background:#547787;padding-bottom:15px}
.Images h4{font-size:15px;margin-top:0;text-transform:uppercase}
.flyout-right ul>li>a,.flyout-left ul>li>a,.flyout-mega-wrap,.mega-menu{background-color:#141414e3}
.visible-xs-block{display:none}
.Blog:hover,.Images:hover,.mega-menu:hover,.drop-down-ul:hover,li.flyout-left>ul:hover,li.flyout-right>ul:hover,.flyout-mega-wrap:hover,li.flyout-left a:hover +ul,li.flyout-right a:hover +ul,.blog-drop-down >a:hover+.Blog,li.drop-down>a:hover +.drop-down-ul,.images-drop-down>a:hover +.Images,.mega-drop-down a:hover+.mega-menu,li.flyout-mega>a:hover +.flyout-mega-wrap{display:block}
.column-nav,.column-img{position:relative;min-height:1px;padding:20px 0 0}
.column-img span{display:block;font-size:16px;margin:10px 0;padding:10px;background:#40a4d4;color:#fff;clear:both}
.f-nav .exo-menu > li{float:none}
.f-nav .mega-menu{width:60%;left:50%;-webkit-transform:translateX(-50%);transform:translateX(-50%)}
a.toggle-menu{display:none;position:absolute;right:0;font-size:27px;color:#23364B;top:0}
.hamburger{padding:10px 10px 5px;display:inline-block;cursor:pointer;transition-property:opacity,filter;transition-duration:.15s;transition-timing-function:linear;font:inherit;color:inherit;text-transform:none;background-color:transparent;border:0;margin:0;overflow:visible}
.hamburger:hover{opacity:.7}
.hamburger-box{width:40px;height:24px;display:inline-block;position:relative}
.hamburger-inner{display:block;top:50%;margin-top:-2px}
.hamburger-inner,.hamburger-inner::before,.hamburger-inner::after{width:40px;height:4px;background-color:#eee;border-radius:4px;position:absolute;transition-property:transform;transition-duration:.15s;transition-timing-function:ease}
.hamburger-inner::before,.hamburger-inner::after{content:"";display:block}
.hamburger-inner::before{top:-10px}
.hamburger-inner::after{bottom:-10px}
.hamburger--3dxy .hamburger-box{perspective:80px}
.hamburger--3dxy .hamburger-inner{transition:transform .15s cubic-bezier(0.645,0.045,0.355,1),background-color 0 .1s cubic-bezier(0.645,0.045,0.355,1)}
.hamburger--3dxy .hamburger-inner::before,.hamburger--3dxy .hamburger-inner::after{transition:transform 0 .1s cubic-bezier(0.645,0.045,0.355,1)}
.hamburger--3dxy.is-active .hamburger-inner{background-color:transparent;transform:rotateX(180deg) rotateY(180deg)}
.hamburger--3dxy.is-active .hamburger-inner::before{transform:translate3d(0,10px,0) rotate(45deg)}
.hamburger--3dxy.is-active .hamburger-inner::after{transform:translate3d(0,-10px,0) rotate(-45deg)}
@media (min-width: 992px) {
.column-img{width:25%;margin-right:15px}
.column-nav{width:22%;margin:0 10px}
.column-nav,.column-img{float:left}
}
@media (min-width:800px) {
.exo-menu > li > a{display:block;padding:14px 28px}
.mega-menu,.flyout-mega-wrap,.Images,.Blog,.flyout-right>ul,.flyout-left>ul,li.drop-down>ul{position:absolute}
.flyout-right>ul{left:100%}
.flyout-left>ul{right:100%}
}
@media (max-width:1024px) {
.f-nav .mega-menu{width:100%}
.exo-menu > li > a {padding: 14px 17px;}
}
@media (max-width:800px) {
a.toggle-menu{display:block!important}
.f-nav .exo-menu{height:43px}
.f-nav .exo-menu.display{height:auto}
.exo-menu{min-height:43px;width:100%}
.exo-menu.display{background:none;background-color:#080808}
.column-nav{padding:10px;float:left;width:42%;margin-left:20px}
li.drop-down>ul,.mega-menu{top:0}
.drop-down li a{padding-left:40px !important}
.drop-down ul ul li a {padding-left: 50px !important}
.exo-menu > li > a{width:92%;display:none}
.exo-menu > li{width:100%}
.display.exo-menu > li > a{display:block;padding:12px 30px}
.mega-menu,.Images,.Blog,.flyout-right>ul,.flyout-left>ul,li.drop-down>ul{position:relative; border-left: none}
.column-img,.no-respon{display:none}
}
@media (max-width:640px) {
.column-nav{margin-left:10px}
}
@media (max-width:480px) {
.exo-menu{background:#080808 url(../images/logo-royal-ruby888-mobile.jpg) center no-repeat}
.column-nav{margin-left:0}
}