/* DJ-MegaMenu general styles */ .dj-megamenu-default { padding : 0 !important; margin : 0 !important; list-style : none; height : auto; position : relative; z-index : 500; font-family: Arial, Helvetica, sans-serif; width : auto; background: rgb(56, 56, 56); /* Old browsers */ background: -moz-linear-gradient(top, rgba(69, 69, 69, 1) 0%, rgba(43, 43, 43, 1) 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(69, 69, 69, 1)), color-stop(100%, rgba(43, 43, 43, 1))); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, rgba(69, 69, 69, 1) 0%, rgba(43, 43, 43, 1) 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, rgba(69, 69, 69, 1) 0%, rgba(43, 43, 43, 1) 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, rgba(69, 69, 69, 1) 0%, rgba(43, 43, 43, 1) 100%); /* IE10+ */ background: linear-gradient(to bottom, rgba(69, 69, 69, 1) 0%, rgba(43, 43, 43, 1) 100%); /* W3C */ /*filter : progid:DXImageTransform.Microsoft.gradient( startColorstr='#454545', endColorstr='#2b2b2b',GradientType=0 ); /* IE6-9 */ } .dj-megamenu-default:after { content: ""; clear : both; display: table; } .dj-megamenu-default li.dj-up { position: relative; display : block; float : left; padding : 0 !important; margin : 0 !important; } .dj-megamenu-default li a.dj-up_a { display : block; float : left; height : 60px; font-size : 12px; font-weight : bold; color : #fff; text-transform : uppercase; text-decoration : none; padding : 0 20px; cursor : pointer; background : transparent; color : #fff; border-right : 1px solid #000; border-left : 1px solid #555; -webkit-transition: all 0.2s ease-out; transition : all 0.2s ease-out; } .dj-megamenu-default li.first a.dj-up_a { border-left: 0; } .dj-megamenu-default li:last-child a.dj-up_a { border-right: 0; } .dj-megamenu-default li a.dj-up_a > span { float : left; display : block; padding : 0; height : 60px; line-height: 60px; background : transparent; } .dj-megamenu-default li a.dj-up_a span.html-before, .dj-megamenu-default li a.dj-up_a span.html-after { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .dj-megamenu-default li a.dj-up_a span.html-before { margin-right: 10px; } .dj-megamenu-default li a.dj-up_a span.html-after { margin-left: 10px; } .dj-megamenu-default li a.dj-up_a.withsubtitle > span { line-height: 48px; } .dj-megamenu-default li a.dj-up_a span.dj-drop { padding: 0 20px 0 0; } .dj-megamenu-default li a.dj-up_a .arrow, .dj-megamenu-default li a.dj-up_a.withsubtitle .arrow { display : inline-block; font-family : 'FontAwesome'; position : absolute; right : 16px; top : calc(50% - 6px); font-size : 1em; line-height : 1; font-style : normal; font-weight : normal; -webkit-transition: all 0.2s ease-out; transition : all 0.2s ease-out; } .dj-megamenu-default.dj-fa-5 li a.dj-up_a .arrow { font-family: "Font Awesome 5 Free"; font-weight: 900; } .dj-megamenu-default li a.dj-up_a .arrow:before { content: "\f107"; } .dj-megamenu-default li:hover a.dj-up_a .arrow, .dj-megamenu-default li.hover a.dj-up_a .arrow, .dj-megamenu-default li.active a.dj-up_a .arrow { top: calc(50% - 4px); } .dj-megamenu-default li a.dj-up_a small.subtitle { display : block; font-size : 12px; font-weight : normal; line-height : 1; text-transform: none; color : #999999; margin-top : -12px; } .dj-megamenu-default li:hover a.dj-up_a, .dj-megamenu-default li.hover a.dj-up_a, .dj-megamenu-default li.active a.dj-up_a { color : #fff; border-left-color: #46a5df; background : rgb(56, 172, 231); /* Old browsers */ background : -moz-linear-gradient(top, rgba(56, 172, 231, 1) 0%, rgba(22, 129, 209, 1) 100%); /* FF3.6+ */ background : -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(56, 172, 231, 1)), color-stop(100%, rgba(22, 129, 209, 1))); /* Chrome,Safari4+ */ background : -webkit-linear-gradient(top, rgba(56, 172, 231, 1) 0%, rgba(22, 129, 209, 1) 100%); /* Chrome10+,Safari5.1+ */ background : -o-linear-gradient(top, rgba(56, 172, 231, 1) 0%, rgba(22, 129, 209, 1) 100%); /* Opera 11.10+ */ background : -ms-linear-gradient(top, rgba(56, 172, 231, 1) 0%, rgba(22, 129, 209, 1) 100%); /* IE10+ */ background : linear-gradient(to bottom, rgba(56, 172, 231, 1) 0%, rgba(22, 129, 209, 1) 100%); /* W3C */ filter : progid:DXImageTransform.Microsoft.gradient(startColorstr='#38ace7', endColorstr='#1681d1', GradientType=0); /* IE6-9 */ } .dj-megamenu-default li:hover a.dj-up_a small.subtitle, .dj-megamenu-default li.hover a.dj-up_a small.subtitle, .dj-megamenu-default li.active a.dj-up_a small.subtitle { color: #a4c4f5; } .dj-megamenu-default li.separator>a { cursor: default; } .dj-megamenu-default li a.dj-up_a span span.image-title { background: none; padding : 0; margin : 0 0 0 15px; display : inline-block; float : none; height : auto; } .dj-megamenu-default li a.dj-up_a img { border : 0; margin : 0; max-height : 32px; vertical-align: middle; } .dj-megamenu-default li a.dj-up_a.withsubtitle img { margin-top: -24px; } /* Default list styling */ .dj-megamenu-default li:hover, .dj-megamenu-default li.hover { position: relative; z-index : 200; } /* Hide submenus */ .dj-megamenu-default li div.dj-subwrap, .dj-megamenu-default li:hover div.dj-subwrap li div.dj-subwrap, .dj-megamenu-default li.hover div.dj-subwrap li div.dj-subwrap { position : absolute; left : -9999px; top : -9999px; margin : 0; padding : 0; list-style: none; } /* Show first level submenu */ .dj-megamenu-default li div.dj-subwrap .dj-subwrap-in:after { content: ""; display: table; clear: both; } .dj-megamenu-default li:hover div.dj-subwrap, .dj-megamenu-default li.hover div.dj-subwrap { left : 0; top : 100%; background : #303030; height : auto; z-index : 300; -webkit-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.2); box-shadow : 0px 0px 5px 0px rgba(0, 0, 0, 0.2); } /* Show higher level submenus */ .dj-megamenu-default li:hover div.dj-subwrap li:hover>div.dj-subwrap, .dj-megamenu-default li.hover div.dj-subwrap li.hover>div.dj-subwrap { left : 100%; top : 5px; margin : 0 0 0 10px; background : #303030; height : auto; z-index : 400; -webkit-box-shadow: 0px 0px 5px 0px rgba(255, 255, 255, 0.2); box-shadow : 0px 0px 5px 0px rgba(255, 255, 255, 0.2); } /* Submenu elements styles - drop down */ .dj-megamenu-default li div.dj-subcol { float: left; } .dj-megamenu-default li ul.dj-submenu { padding: 0px; margin : 0 10px; height : auto; width : auto; } .dj-megamenu-default li ul.dj-submenu>li { list-style: none outside; display : block; height : auto; position : relative; width : auto; border-top: 1px solid #3a3a3a; } .dj-megamenu-default li ul.dj-submenu>li.first { border: 0; } .dj-megamenu-default li ul.dj-submenu>li>a { display : block; font-size : 13px; font-weight : normal; line-height : 16px; color : #c3c3c3; background : transparent; text-decoration : none; padding : 12px 20px; margin : 0 -10px; -webkit-transition: all 0.2s ease-out; transition : all 0.2s ease-out; } .dj-megamenu-default li ul.dj-submenu>li>a span.image-title {} .dj-megamenu-default li ul.dj-submenu>li>a .dj-icon { float : left; border : 0; margin : 0 15px 8px 0; vertical-align: middle; max-height : 16px; } .dj-megamenu-default li ul.dj-submenu>li>a small.subtitle { color : #666; display : block; font-size : 10px; line-height: 1; } .dj-megamenu-default li ul.dj-submenu>li>a:hover, .dj-megamenu-default li ul.dj-submenu>li>a.active, .dj-megamenu-default li ul.dj-submenu>li.hover:not(.subtree)>a { background: #1681d1; color : #fff; } .dj-megamenu-default li ul.dj-submenu>li>a:hover small.subtitle, .dj-megamenu-default li ul.dj-submenu>li>a.active small.subtitle, .dj-megamenu-default li ul.dj-submenu>li.hover:not(.subtree)>a small.subtitle { color: #a4c4f5; } .dj-megamenu-default li ul.dj-submenu>li.parent>a .arrow { display : inline-block; font-family : 'FontAwesome'; position : absolute; right : 6px; top : 13px; font-size : 1em; line-height : 1; font-style : normal; font-weight : normal; -webkit-transition: all 0.2s ease-out; transition : all 0.2s ease-out; } .dj-megamenu-default.dj-fa-5 li ul.dj-submenu>li.parent>a .arrow { font-family: "Font Awesome 5 Free"; font-weight: 900; } .dj-megamenu-default li ul.dj-submenu>li.parent>a .arrow:before { content: "\f105"; } .dj-megamenu-default li ul.dj-submenu>li.parent:not(.subtree)>a:hover .arrow { right: 4px; } /* Submenu elements styles - tree */ .dj-megamenu-default li ul.dj-subtree { list-style: none outside; padding : 0 !important; margin : 5px 0 5px 25px !important; } .dj-megamenu-default li ul.dj-subtree>li { list-style: square outside; padding : 0; margin : 0; color : #666; } .dj-megamenu-default li ul.dj-subtree>li>a { display : block; font-size : 12px; font-weight : normal; line-height : 13px; color : #c3c3c3; text-decoration: none; padding : 5px 0; } .dj-megamenu-default li ul.dj-subtree>li>a:hover { background: transparent; color : #fff; } .dj-megamenu-default li ul.dj-subtree>li.active>a { text-decoration: underline; } .dj-megamenu-default li ul.dj-subtree>li>a small.subtitle { color : #666; display : block; font-size : 0.9em; line-height: 1; } /* modules loaded into menu */ .dj-megamenu-default .modules-wrap { padding: 0px 10px; color : #d2d2d2; } .dj-megamenu-default .modules-wrap p { display: block !important; padding: 0 !important; } /* sticky menu */ .dj-megamenu-default.dj-megamenu-fixed { position : fixed; -webkit-backface-visibility: hidden; -webkit-transform : translateZ(0) scale(1.0, 1.0); transform : translateZ(0); } .dj-megamenu-default.dj-megamenu-sticky { position: fixed; top : 0; left : 0; width : 100%; height : auto; } .dj-megamenu-default .dj-stickylogo { position: absolute; z-index : 550; } .dj-megamenu-default .dj-stickylogo img { max-height: 100%; width : auto; } .dj-megamenu-default .dj-stickylogo.dj-align-center { position : static; text-align: center; margin : 10px 0; } .dj-megamenu-default .dj-stickylogo.dj-align-left { left : 20px; max-height: 50px; margin : 5px 0; } .dj-megamenu-default .dj-stickylogo.dj-align-right { right : 20px; max-height: 50px; margin : 5px 0; } /* full width submenu */ .dj-megamenu-default li.dj-up.fullsub { position: static !important; } .dj-megamenu-default li.dj-up.fullsub a.dj-up_a { position: relative; } .dj-megamenu-default .djsubrow_separator { clear : both; border-bottom: 1px solid #3a3a3a; padding : 0 0 20px; margin : 0 0 20px; } /* vertical menu orientation */ .dj-megamenu-default.verticalMenu { height : auto; max-width: 360px; z-index : 400; } .dj-megamenu-default.verticalMenu li.dj-up { float: none; } .dj-megamenu-default.verticalMenu li a.dj-up_a { float : none; height : auto; padding-top : 15px; padding-bottom: 15px; border-left : 0px; border-right : 0px; border-bottom : 1px solid #000; border-top : 1px solid #555; } .dj-megamenu-default.verticalMenu li.first a.dj-up_a { border-top: 0; } .dj-megamenu-default.verticalMenu li:last-child a.dj-up_a { border-bottom: 0; } .dj-megamenu-default.verticalMenu li a.dj-up_a small.subtitle { margin-top: 0; } .dj-megamenu-default.verticalMenu li a.dj-up_a>span { display: flex; align-items: center; } .dj-megamenu-default.verticalMenu li a.dj-up_a span { float : none; height : auto; line-height: 20px; } .dj-megamenu-default.verticalMenu li a.dj-up_a span span.image-title { padding : 0 15px; margin : 0; } .dj-megamenu-default.verticalMenu li a.dj-up_a img, .dj-megamenu-default.verticalMenu li ul.dj-submenu>li>a .dj-icon { max-height: 100%; max-width: 32px; } .dj-megamenu-default.verticalMenu li a.dj-up_a .arrow:before { content: "\f105"; } .dj-megamenu-default.verticalMenu li:hover div.dj-subwrap, .dj-megamenu-default.verticalMenu li.hover div.dj-subwrap, .dj-megamenu-default.verticalMenu li:hover div.dj-subwrap.open-right, .dj-megamenu-default.verticalMenu li.hover div.dj-subwrap.open-right { right: auto !important; left : 100% !important; top : 0; } .dj-megamenu-default.verticalMenu li:hover div.dj-subwrap.open-left, .dj-megamenu-default.verticalMenu li.hover div.dj-subwrap.open-left { left : auto !important; right: 100% !important; } /*** overlay ***/ body.dj-megamenu-overlay { position: relative; } body.dj-megamenu-overlay ul.dj-megamenu { z-index : 1001; position: relative; } body.dj-megamenu-overlay .dj-megamenu-sticky { z-index : 1000; } body .dj-megamenu-overlay-box { background: rgba(0, 0, 0, 0.5); position : fixed; top : 0; left : 0; right : 0; bottom : 0; z-index : 999; pointer-events: none; display: none; } /* badge */ .dj-megamenu-default li a.dj-up_a span.dj-badge, .dj-megamenu-default li ul>li>a span.dj-badge { float: none; text-transform: uppercase; display: inline-block; padding: .35em .65em; font-size: .75em; font-weight: 700; height: auto; line-height: 1; text-align: center; white-space: nowrap; vertical-align: baseline; border-radius: .25em; margin-left: 10px; } /* show focus on keyboard navigation only */ .dj-megamenu-default.dj-megamenu-wcag *:focus, /* old browsers */ .dj-megamenu-default.dj-megamenu-wcag *:focus-visible { /* modern browsers */ outline: 2px solid currentColor; outline-offset: -2px; } .dj-megamenu-default.dj-megamenu-wcag *:focus:not(:focus-visible) { /* remove visible focus for modern */ outline: none; }