/* MEGAMENU STYLE =================================*/ nav.main-menu .mega-menu-item.megamenu-fw { position: static; } nav.main-menu .megamenu-fw .mega-submenu, nav.main-menu .megamenu-content { width: auto !important; } nav.main-menu .megamenu-fw .mega-submenu .row{ margin: 0; } nav.main-menu .megamenu-content { width: 100%; } nav.main-menu .megamenu-content .title{ margin: 0; display: block; background: rgba(0, 0, 0, 0) none repeat scroll 0 0; font-weight: 500; font-size: 14px; text-transform: capitalize; padding: 6px 20px; color: inherit; border-right: 1px solid transparent; } nav.main-menu .mega-menu-item.megamenu-fw .mega-submenu { left: 0; right: 0; } nav.main-menu ul { padding: 0px; margin: 0px; list-style: none; } nav.main-menu ul li { position: relative; } nav.main-menu{ margin-bottom: 0; -moz-border-radius: 0px; -webkit-border-radius: 0px; -o-border-radius: 0px; border-radius: 0px; border: none; z-index: 2; } nav.main-menu li ul.mega-submenu { position: absolute; display: block; width: 250px; opacity: 0.5; z-index: 2; border: 0; top: 50px; -webkit-transform-origin: top; transform-origin: top; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; transition: all .5s ease; -webkit-transition: all .5s ease; -moz-transition: all 500ms ease; -o-transition: all 500ms ease; -ms-transition: all 500ms ease; background: #fff; border-radius: 0; box-shadow: 0 3px 25px 0px rgb(43 52 59 / 10%), 0 0 0 rgb(43 52 59 / 10%) inset; -webkit-box-shadow: 0 3px 25px 0px rgb(43 52 59 / 10%), 0 0 0 rgb(43 52 59 / 10%) inset; background-clip: padding-box; border-top: 3px solid #006836; -webkit-transition: all 0.2s ease-out; transition: all 0.5s ease-out; -moz-transition: all 0.5s ease-out; -ms-transition: all 0.5s ease-out; -webkit-box-shadow: 0px 4px 4px 1px rgb(0 0 0 / 20%); box-shadow: 0px 4px 4px 1px rgb(0 0 0 / 20%); -webkit-transform: rotateX(-90deg); transform: rotateX(-90deg); -webkit-transform-origin: 0 0; transform-origin: 0 0; } nav.main-menu ul.menu > li{ z-index: 11; display: inline-block; } nav.main-menu ul.menu li ul > li:not(:first-child) { border-top: 1px solid; border-color: var(--base-grey); } nav.main-menu ul.menu li ul.mega-submenu li a { font-size: 14px; line-height: 24px; font-weight: 400; display: block; padding: 10px 10px 10px 20px; text-align: left; color: var(--base-bodyfont-color); background-color: var(--base-white); font-family: var(--base-bodyfont); border-radius: 0; -webkit-transition: all .3s linear; transition: all .3s linear; } nav.main-menu ul.menu li ul.mega-submenu li a span { display: inline!important; padding: 4px 8px; background: #ff6f00; color: var(--base-white) !important; text-shadow: none; border-radius: 0; margin-left: 14px; position: relative; text-transform: uppercase; font-size: 11px!important; font-weight: 500!important; } nav.main-menu ul.menu li ul.mega-submenu li a span:before { right: 100%; top: 50%; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; border-color: var(--base-white); border-right-color: #ff6f00; border-width: 5px; margin-top: -5px; } ul.menu-col li a{ color: #6f6f6f; } ul.menu-col li a:hover, ul.menu-col li a:focus{ text-decoration: none; } /* Responsive =================================*/ @media (min-width: 1200px) { nav.main-menu li.mega-menu-item ul.mega-submenu li ul { left: 100%; top: 0; border-top: 0; } nav.main-menu li.mega-menu-item:last-child > ul { right: 0; left: auto; } nav.main-menu ul.menu > li > a{ display: block; font-weight: 600; text-transform: uppercase; font-size: 14px; line-height: 26px; font-family: var(--base-headingfont); } nav.main-menu li.mega-menu-item ul.mega-submenu li.mega-menu-item > a.mega-menu-link:before { font-family: 'FontAwesome'; float: right; content: "\f105"; margin-top: 0; } nav.main-menu ul.mega-submenu.megamenu-content .col-menu{ padding: 0; width: 240px; border-right: solid 1px #f0f0f0; } nav.main-menu ul.mega-submenu.megamenu-content .col-menu:first-child{ border-left: none; } nav.main-menu ul.mega-submenu.megamenu-content .col-menu:last-child{ border-right: none; } nav.main-menu ul.mega-submenu.megamenu-content .content ul.menu-col li:last-child a{ border-bottom: unset; } nav.main-menu li.mega-menu-item.on ul.mega-submenu.megamenu-content .content{ display: block !important; height: auto !important; } nav.main-menu li.mega-menu-item:hover > ul.mega-submenu { opacity: 1; display: block; visibility: visible; height: auto; filter: alpha(opacity=100); -webkit-transform: rotateX(0); transform: rotateX(0); } header.ttm-header-style-01 .site-navigation nav.main-menu li ul.mega-submenu { top: 82px; } header.ttm-header-style-02 .site-navigation nav.main-menu li ul.mega-submenu { top: 82px; } header.ttm-header-style-03 .site-navigation nav.main-menu li ul.mega-submenu { top: 100px; } } @media (max-width: 1199px) { .menubar{ position: absolute; right: 0; top: 0; bottom: 0; z-index: 9; } .menubar-box { display: block; width: 30px; height: 24px; } .menubar-inner, .menubar-inner:after, .menubar-inner:before { position: absolute; width: 30px; height: 3px; transition-timing-function: ease; transition-duration: .15s; transition-property: transform; border-radius: 4px; background-color: #2f2f2f; } .menubar--squeeze .menubar-inner { top: 50%; display: block; margin-top: -2px; transition-timing-function: cubic-bezier(.55,.055,.675,.19); transition-duration: .1s; } .menubar-inner:after, .menubar-inner:before { display: block; content: ''; } .menubar-inner:after { bottom: -8px; } .menubar-inner:before { top: -8px; } .menubar--squeeze.is-active .menubar-inner { transition-delay: .14s; transition-timing-function: cubic-bezier(.215,.61,.355,1); transform: rotate(45deg); } .menubar--squeeze.is-active .menubar-inner:before { top: 0; transition: top .1s ease,opacity .1s ease .14s; opacity: 0; } .menubar--squeeze.is-active .menubar-inner:after { bottom: 0; transition: bottom .1s ease,transform .1s cubic-bezier(.215,.61,.355,1) .14s; transform: rotate(-90deg); } nav.main-menu{ display: none ; max-height: 10000px; position: absolute; box-shadow: 0 0 10px 0 rgba(0, 43, 92, 0.08); z-index: 100; top: 100%; left: 0; right: 0; background-color: var(--base-white); border-top: 3px solid; overflow: visible; } nav.main-menu.show{ display: block; max-height: 10000px; } nav.main-menu ul.menu, nav.main-menu ul.menu > li{ display: block; position: relative; } nav.main-menu ul.menu > li > a{ display: block; font-weight: 600; font-size: 16px; padding: 15px 15px; line-height: 20px; text-align: left; background-color: var(--base-white); } nav.main-menu ul.menu > li { border-top: solid 1px; border-color: var(--base-grey); } nav.main-menu ul.menu > li:first-child{ border-top: none; } nav.main-menu ul.menu li > ul.mega-submenu li a:hover{ background-color: var(--base-white); } nav.main-menu li.mega-menu-item a.mega-menu-link:after{ font-family: 'FontAwesome'; content: "\f105"; float: right; font-size: 16px; } nav.main-menu li.mega-menu-item.on > a.mega-menu-link:after{ content: "\f107"; } nav.main-menu ul.menu-left > li:last-child > ul.mega-submenu{ border-bottom: solid 1px #e0e0e0; } nav.main-menu ul.menu li.mega-menu-item ul.mega-submenu{ width: 100%; background-color: var(--base-white); float: none; border: none; padding: 0 0 0 15px; -moz-box-shadow: 0px 0px 0px; -webkit-box-shadow: 0px 0px 0px; -o-box-shadow: 0px 0px 0px; box-shadow: 0px 0px 0px; -moz-border-radius: 0px 0px 0px; -webkit-border-radius: 0px 0px 0px; -o-border-radius: 0px 0px 0px; border-radius: 0px 0px 0px; } nav.main-menu ul.menu li ul.mega-submenu li a { padding: 10px 25px; } nav.main-menu ul.menu li ul.mega-submenu li.active > a { background-color: var(--base-white); } nav.main-menu ul.menu li.mega-menu-item ul.mega-submenu.active { position: relative; visibility: visible; top: 0; width: 100%; opacity: 1; z-index: 1; display: contents; background-color: inherit; box-shadow: unset; } nav.main-menu ul.menu ul.mega-submenu li.mega-menu-item.on > ul.mega-submenu{ display: inline-block; margin-top: -10px; } nav.main-menu .mega-menu-item .megamenu-content .col-menu .title{ padding: 10px 15px 10px 0; line-height: 24px; font-size: 14px; text-transform: none; font-weight: 500; letter-spacing: 0px; margin-bottom: 0; cursor: pointer; background-color: transparent; border-right: 0; border-bottom: solid 1px #e0e0e0; } nav.main-menu .mega-menu-item .megamenu-content .col-menu .title:before{ font-family: 'FontAwesome'; content: "\f105"; float: right; font-size: 16px; margin-left: 10px; position: relative; right: 0; } nav.main-menu .mega-menu-item .megamenu-content .col-menu:last-child .title{ border-bottom: none; } nav.main-menu .mega-menu-item .megamenu-content .col-menu.on:last-child .title{ border-bottom: solid 1px #e0e0e0; } nav.main-menu .mega-menu-item .megamenu-content .col-menu:last-child ul.menu-col li:last-child a{ border-bottom: none; } nav.main-menu .mega-menu-item .megamenu-content .col-menu.on .title:before{ content: "\f107"; } nav.main-menu .megamenu-content{ padding: 0; } nav.main-menu .megamenu-content .col-menu{ padding-bottom: 0; max-width: 100%; flex: 100%; } nav.main-menu .megamenu-content .title{ cursor: pointer; display: block; padding: 10px 15px; margin-bottom: 0; font-weight: normal; } nav.main-menu .megamenu-content .content{ display: none; } nav.main-menu .megamenu-content .content.active{ display: block; } }