.top-nav-box{ float: right; display: inline-block; padding: 17px 28px 16px 27px; margin-left: 25px; transition: all 0.3s ease-out; -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; } .top-nav-box #top-menu { margin-left: 0; } header .full-width .widget_nav_menu li{ display: inline-block!important; width: 16%!important; padding-bottom: 10px !important; } .header.navbar-scrolling.navbar-fixed-top { position: fixed !important; } .header.navbar-scrolling.navbar-fixed-top { position: fixed !important } div[data-header="sticky"] .navbar-fixed-top { position: absolute !important } .navbar-fixed-top:not(.navbar-sticky-scroll) { position: absolute !important; top: auto; } .admin-bar .header.navbar-scrolling.navbar-fixed-top { top: 32px !important; } .yamm a, .yamm li { font-weight: 500; } .header-decore-bottom { position: absolute; bottom: -39px; left: 0; width: 100%; } html .yamm li ul li a { font-weight: 400 !important; } /*Full Width */ #nav > .container { position: relative; } .full-width { position: static !important; } .full-width ul{ padding-left: 0; margin-left: 0; } .submenu-width .dropdown-menu { width: 100%; } .dropdown-menu ul li { position: relative; } .dropdown-menu .widget_nav_menu li.hot a { border-bottom: 2px dotted #cc5dff; } .dropdown-menu .widget_nav_menu li { display: inline-block; width: auto; } .full-width .dropdown-menu { left: 0 !important; width: auto; width: 100%; } .full-width .dropdown-menu ul li { display: inline-block !important; float: none !important; text-transform: initial; border-bottom: 0; font-weight: 400; transition: color 0.3s ease-out; -webkit-transition: color 0.3s ease-out; -moz-transition: color 0.3s ease-out; width: 100%; } .full-width .dropdown-menu ul li a { transition: color 0.3s ease-out; -webkit-transition: color 0.3s ease-out; -moz-transition: color 0.3s ease-out; color: #333; font-weight: normal; font-size: 14px; } .full-width .dropdown-menu ul li:hover a { color: #2796de !important; } .dropdown-col-3, .dropdown-col-2 { position: relative !important; } .dropdown-col-3 .dropdown-menu, .dropdown-col-2 .dropdown-menu { min-width: 300px; } .dropdown-col-2.full-width .dropdown-menu li { width: 46% !important; margin: 0 1.5% 1.5% 1.5% !important; border-bottom: 1px dotted #ccc; padding-bottom: 1.5%; } .dropdown-col-2.full-width .dropdown-menu { min-width: 400px !important; padding: 3% 2% 3% 3% !important; } .dropdown-col-3.full-width .dropdown-menu li { max-width: 29% !important; margin: 0 1.5% 1.5% 1.5% !important; border-bottom: 1px dotted #ccc; padding-bottom: 1.5%; } .dropdown-col-3.full-width .dropdown-menu { min-width: 500px; padding: 3% 2% !Important; } .full-width .dropdown-menu li a { font-size: 12px; padding: 0; } .full-width .dropdown-menu { padding: 0; display: flex; } .full-width .dropdown-menu .widgettitle { font-size: 14px; margin-bottom: 10px; padding: 10px 0 !important; margin-top: 0; font-weight: 500; } .full-width .dropdown-menu .menu-item > .vc_row { margin-left: 0 !important; margin-right: 0 !important; padding: 20px !important; } .menu-width .dropdown-menu .menu-item > .vc_row { margin-left: 0 !important; margin-right: 0 !important; padding: 20px !important; } /*Full Width end */ .tmpl-plugins-not-activated .header .navbar-brand { margin-top: 0px; } .header .navbar-brand { float: left; position: relative; height: auto; padding: 0; font-size: 24px; line-height: 20px; margin-top: -10px; padding-right: 25px; max-width: 209px; font-weight: normal; text-transform: capitalize; } .header { position: relative; z-index: 992; } /*ABSOLUTE NAV */ .navbar-fixed-top.navbar-sticky-top { position: absolute !important; top: auto; left: 0; width: 100%; z-index: 77; } /*LOGO WHITE */ .header.header-logo-white .normal-logo { display: block !important; } .header.header-logo-white .scroll-logo { display: none !important; } .header-advanced.header.header-logo-white .normal-logo { display: none !important; } .header-advanced.header.header-logo-white .scroll-logo { display: block !important; } /*LOGO BLACK */ .header.header-logo-black .normal-logo { display: none !important; } .header.header-logo-black .scroll-logo { display: block !important; } /*BACKGROUND BLACK #000 */ .header.header-background-black, .header-boxed-width.header.header-background-black #nav { background: #484848; } .header.header-background-black .dropdown-menu { background: #484848; color: #fff; } .header.header-background-black .dropdown-menu a { color: #fff; } /*BACKGROUND WHITE #fff */ .header.header-background-white, .header-boxed-width.header.header-background-white #nav { background: #fff; } .header.header-background-white .top-bar { border-bottom: #eeeeee 1px solid; } .header.header-background-white.header-menu-middle .header-navibox-2 { display: inline-block; width: 100%; float: none; border-bottom: 1px solid #eeeeee; border-top: 1px solid #eeeeee; } .header.header-background-white.header-menu-middle .header-navibox-4 { border-right: 1px solid #eeeeee; border-left: 1px solid #eeeeee; } /*BACKGROUND WHITE #fff */ .header.header-background-trans-white-rgba09, .header-boxed-width.header.header-background-trans-white-rgba09 #nav { background-color: rgba(255, 255, 255, 0.9); } .header. header-background-trans-white-rgba08, .header-boxed-width.header.header-background-trans-white-rgba08 #nav { background-color: rgba(255, 255, 255, 0.8); } .header.header-background-trans-white-rgba07, .header-boxed-width.header.header-background-trans-white-rgba07 #nav { background-color: rgba(255, 255, 255, 0.7); } .header.header-background-trans-white-rgba06, , .header-boxed-width.header.header-background-trans-white-rgba06 #nav { background-color: rgba(255, 255, 255, 0.6) } .header.header-background-trans-white-rgba05, .header-boxed-width.header.header-background-trans-white-rgba05 #nav { background-color: rgba(255, 255, 255, 0.5); } .header.header-background-trans-white-rgba04, .header-boxed-width.header.header-background-trans-white-rgba04 #nav { background-color: rgba(255, 255, 255, 0.4); } .header.header-background-trans-white-rgba03, .header-boxed-width.header.header-background-trans-white-rgba03 #nav { background-color: rgba(255, 255, 255, 0.3); } .header.header-background-trans-white-rgba02, .header-boxed-width.header-background-trans-white-rgba02 #nav { background-color: rgba(255, 255, 255, 0.2); } .header.header-background-trans-white-rgba01, .header-boxed-width.header.header-background-trans-white-rgba01 #nav { background-color: rgba(255, 255, 255, 0.1); } .header.header-background-trans-white-rgba00, .header-boxed-width.header.header-background-trans-white-rgba00 #nav { background-color: transparent; } /*Submenu*/ html .header.header-background-trans-white-rgba09 .dropdown-menu { background-color: rgba(255, 255, 255, 0.9); } html .header.header-background-trans-white-rgba08 .dropdown-menu { background-color: rgba(255, 255, 255, 0.9); } html .header.header-background-trans-white-rgba07 .dropdown-menu { background-color: rgba(255, 255, 255, 0.9); } html .header.header-background-trans-white-rgba06 .dropdown-menu { background-color: rgba(255, 255, 255, 0.9) } html .header.header-background-trans-white-rgba05 .dropdown-menu { background-color: rgba(255, 255, 255, 0.9); } html .header.header-background-trans-white-rgba04 .dropdown-menu { background-color: rgba(255, 255, 255, 0.9); } html .header.header-background-trans-white-rgba03 .dropdown-menu { background-color: rgba(255, 255, 255, 0.9); } html .header.header-background-trans-white-rgba02 .dropdown-menu { background-color: rgba(255, 255, 255, 0.9); } html .header.header-background-trans-white-rgba01 .dropdown-menu { background-color: rgba(255, 255, 255, 0.9); } html .header.header-background-trans-white-rgba00 .dropdown-menu { background-color: rgba(255, 255, 255, 0.9); } /*BACKGROUND BLACK */ .header.header-background-trans-black-rgba09, .header-boxed-width.header.header-background-trans-black-rgba09 #nav { background-color: rgba(0, 0, 0, 0.9); } .header. header-background-trans-black-rgba08, .header-boxed-width.header.header-background-trans-black-rgba08 #nav { background-color: rgba(0, 0, 0, 0.8); } .header.header-background-trans-black-rgba07, .header-boxed-width.header.header-background-trans-black-rgba07 #nav { background-color: rgba(0, 0, 0, 0.7); } .header.header-background-trans-black-rgba06, .header-boxed-width.header.header-background-trans-black-rgba06 #nav { background-color: rgba(0, 0, 0, 0.6); } .header.header-background-trans-black-rgba05, .header-boxed-width.header.header-background-trans-black-rgba05 #nav { background-color: rgba(0, 0, 0, 0.5); } .header.header-background-trans-black-rgba04, .header-boxed-width.header.header-background-trans-black-rgba04 #nav { background-color: rgba(0, 0, 0, 0.4); } .header.header-background-trans-black-rgba03, .header-boxed-width.header.header-background-trans-black-rgba03 #nav { background-color: rgba(0, 0, 0, 0.3); } .header.header-background-trans-black-rgba02, .header-boxed-width.header.header-background-trans-black-rgba02 #nav { background-color: rgba(0, 0, 0, 0.2); } .header.header-background-trans-black-rgba01, .header-boxed-width.header.header-background-trans-black-rgba01 #nav { background-color: rgba(0, 0, 0, 0.1); } .header.header-background-trans-black-rgba00, .header-boxed-width.header.header-background-trans-black-rgba00 #nav { background-color: transparent; } /*Submenu*/ html .header.header-background-trans-black-rgba09 .dropdown-menu { background-color: rgba(0, 0, 0, 0.9); } html .header.header-background-trans-black-rgba8 .dropdown-menu { background-color: rgba(0, 0, 0, 0.8); } html .header.header-background-trans-black-rgba07 .dropdown-menu { background-color: rgba(0, 0, 0, 0.7); } html .header.header-background-trans-black-rgba06 .dropdown-menu { background-color: rgba(0, 0, 0, 0.6); } html .header.header-background-trans-black-rgba05 .dropdown-menu { background-color: rgba(0, 0, 0, 0.5); } html .header.header-background-trans-black-rgba04 .dropdown-menu { background-color: rgba(0, 0, 0, 0.5); } html .header.header-background-trans-black-rgba03 .dropdown-menu { background-color: rgba(0, 0, 0, 0.5); } html .header.header-background-trans-black-rgba02 .dropdown-menu { background-color: rgba(0, 0, 0, 0.5); } html .header.header-background-trans-black-rgba01 .dropdown-menu { background-color: rgba(0, 0, 0, 0.5); } html .header.header-background-trans-black-rgba00 .dropdown-menu { background-color: rgba(255, 255, 255, 1); } .header.header-background-trans-black-rgba01 .dropdown-menu li a, .header.header-background-trans-black-rgba02 .dropdown-menu li a, .header.header-background-trans-black-rgba03 .dropdown-menu li a, .header.header-background-trans-black-rgba04 .dropdown-menu li a, .header.header-background-trans-black-rgba05 .dropdown-menu li a, .header.header-background-trans-black-rgba06 .dropdown-menu li a, .header.header-background-trans-black-rgba07 .dropdown-menu li a, .header.header-background-trans-black-rgba08 .dropdown-menu li a, .header.header-background-trans-black-rgba09 .dropdown-menu li a, .header.header-background-trans-black-rgba00 .dropdown-menu li a { color: #fff; } .header.header-background-trans-black-rgba00 .dropdown-menu li a, .header.header-background-trans-black-rgba00 .dropdown-menu { color: #333 !important; } /*COLOR FONTS WHITE #fff */ .header-color-white *, .header.header-color-white .navbar .navbar-nav > li > a { color: #fff; } .header.header-color-white .toggle-menu-button .toggle-menu-button-icon span { background: #fff; } .header.header-color-white .navbar .navbar-nav > li > a:hover { color: #fff; } .header.header-color-white .toggle-menu-button.is-open .toggle-menu-button-icon span { background: #fff; } .header.header-color-white .header-cart-count { background: #000; color: #fff; } /*COLOR FONTS BLACK #333 */ .header-color-black *, .header.header-color-black .navbar .navbar-nav > li > a { color: #333; } .header.header-color-black .toggle-menu-button .toggle-menu-button-icon span { background: #333; } .header.header-color-black .header-cart-count { background: #333; color: #fff; } .header.header-advanced ..header-cart-count * { color: #fff !important; } /*NAV BAR SCROLLING */ .navbar-scrolling * { color: #333; } .header.navbar-scrolling .navbar .navbar-nav > li > a { color: #333; } .header.navbar-scrolling .navbar .navbar-nav > li:hover > a, .header.navbar-scrolling .navbar .navbar-nav > li a:hover { color: #333 !important; } .header.navbar-scrolling .navbar .toggle-menu-button .toggle-menu-button-icon span { background: #333; } .header.navbar-scrolling .header-cart-count { background: #333; color: #fff; } .header.navbar-scrolling { background-color: rgba(255, 255, 255, 1); } .header.header.navbar-scrolling .normal-logo { display: none !important; } .header.header.navbar-scrolling .scroll-logo { display: block !important; } .header.header.navbar-scrolling .navbar { border-bottom: 1px solid rgba(000, 000, 000, 0.15); } .header-menu-middle.header.header.navbar-scrolling .header-navibox-2 { border-bottom: 1px solid rgba(000, 000, 000, 0.15); } .header-topbarbox-border.navbar-scrolling .header-topbarbox-1, .header-topbarbox-border .header-topbarbox-2 { border-right: 1px solid rgba(000, 000, 000, 0.15); border-left: 1px solid rgba(000, 000, 000, 0.15); } .navbar-scrolling .navbar .toggle-menu-button.is-open .toggle-menu-button-icon span { background: #333 !important; } .navbar-scrolling .top-bar { border-bottom: 1px solid rgba(000, 000, 000, 0.15); display: none; } .navbar-scrolling .header-navibox-4 { border-right: 1px solid rgba(000, 000, 000, 0.15); border-left: 1px solid rgba(000, 000, 000, 0.15); } .header-navibox-4 { border-right: #eeeeee 1px solid; border-left: #eeeeee 1px solid; margin-left: 20px; } .header-follow-title { float: left; margin-top: 1px; margin-right: 2px; } .top-bar .header-topbarbox-2 > ul { display: inline-block; } /*NORMAL WIDTH */ .header-normal-width .yamm > li > a {} .header-normal-width .container-boxed-width { width: 100%; padding: 0; } /*FULL WIDTH */ .header-full-width .container { width: 100% !important; padding: 0; text-align: center; } .header-full-width .header-navibox-1 { padding-left: 40px !important; } .header-full-width.header-navibox-2-left #nav .header-navibox-1, .header-full-width.header-navibox-2-left #nav .header-navibox-2, .header-full-width.header-navibox-2-left #nav .header-navibox-3, .header-full-width.header-navibox-2-left #nav .header-navibox-4 { float: none !important; display: inline-table; } .header-full-width #nav .header-navibox-2 .navbar-nav > li { margin: 0 4px; } .header-full-width.header-navibox-2-left .header-navibox-1 { position: absolute; left: 35px; } .header-full-width.header-navibox-2-left .header-navibox-3 { position: absolute; right: 35px; } .header-full-width.header-navibox-2-left .header-navibox-4 { position: absolute; right: 0; } .header-full-width .header-topbarbox-1, .header-full-width .header-topbarbox-2 { margin: 0 35px; } /*BOXED WIDTH */ .header.header-boxed-width { background: none !important; position: absolute !important; width: 100%; padding-top: 20px; } .header .navbar-scrolling.header-boxed-width .header-navibox-4 { border-right: 0; border-left: 1px solid rgba(000, 000, 000, 0.15); } .header-boxed-width #nav { border-left: 1px solid rgba(255, 255, 255, 0.15) !important; border-right: 1px solid rgba(255, 255, 255, 0.15) !important; } .header-boxed-width .container-boxed-width .container { width: auto !important; } .header-boxed-width .header-navibox-4 { border-right: 0; border-left: 1px solid rgba(255, 255, 255, 0.15); padding-right: 0px !important; margin-left: 15px !important; padding-left: 7px !important; } .header-boxed-width .header-navibox-1 { margin-left: 15px; } .header-boxed-width .navbar-scrolling { background: none !important; } .header-boxed-width .navbar-scrolling #nav { background: #fff; margin-top: 15px; } .header-boxed-width .navbar-scrolling .top-bar { display: none; } .header-boxed-width .navbar-scrolling #nav { border: 1px solid rgba(000, 000, 000, 0.15) !important; } /*NAVI BOX FLOAT*/ .header-navibox-1-left .header-navibox-1, .header-navibox-2-left .header-navibox-2, .header-navibox-3-left .header-navibox-3, .header-navibox-4-left .header-navibox-4 { float: left !important; } .header-navibox-1-right .header-navibox-1, .header-navibox-2-right .header-navibox-2, .header-navibox-3-right .header-navibox-3, .header-navibox-4-right .header-navibox-4 { float: right !important; } .header-navibox-1-middle .header-navibox-1, .header-navibox-2-middle .header-navibox-2, .header-navibox-3-middle .header-navibox-3, .header-navibox-4-middle .header-navibox-4 { margin: 0 auto !important; } .header-navibox-4 #nav { border-right: 1px solid rgba(255, 255, 255, 0.15); border-left: 1px solid rgba(255, 255, 255, 0.15); padding-right: 15px !important; margin-left: 15px !important; } .header-navibox-4 { /* border-right: 1px solid rgba(255, 255, 255, 0.15); border-left: 1px solid rgba(255, 255, 255, 0.15); */ } /*TOP BAR BOX*/ .header-topbar-hidden .top-bar { display: none !important; } .top-bar { border-bottom: 1px solid rgba(255, 255, 255, 0.15); } .top-bar ul { margin: 0; padding: 0; } .top-bar li { display: inline-block; font-size: 14px; margin-left: 5px; } .top-bar li i { margin-right: 0px; font-size: 14px; position: relative; top: 3px; float: left; } .header-topbarbox-1-left .header-topbarbox-1, header-topbarbox-2-left .header-topbarbox-2 { float: left !important; } .header-topbarbox-1-right .header-topbarbox-1, .header-topbarbox-2-right .header-topbarbox-2 { float: right !important; } .header-topbarbox-1, .header-topbarbox-2 { padding: 15px 0; } .header-topbarbox-border .header-topbarbox-1, .header-topbarbox-border .header-topbarbox-2 { border-right: 1px solid rgba(255, 255, 255, 0.15); border-left: 1px solid rgba(255, 255, 255, 0.15); padding-left: 25px; padding-right: 25px; } /***** HEADER MENU MIDDLE ****/ .header-menu-middle .header-navibox-2 .main-menu > li > a { padding: 15px 25px 28px 0px !important; } .header-menu-middle .header-navibox-2 { display: inline-block; width: 100%; float: none; border-bottom: 1px solid rgba(255, 255, 255, 0.15); padding: 17px 0 !Important; border-top: 1px solid rgba(255, 255, 255, 0.15); } .header-menu-middle .header-navibox-2 li a { text-transform: uppercase; } .header-menu-middle.header. .center-logo a { display: inline !important; } .header-menu-middle.header.header-logo-white .normal-logo, .header-menu-middle.header .center-logo { display: inline-block; } .header-menu-middle .nav .header-cart { margin: 6px; } .header-menu-middle .header-cart { margin: 1px 21px 27px 18px; font-size: 20px; position: relative; float: right; } .header-menu-middle .navbar-collapse { text-align: center; } .header-menu-middle .wrap-inside-nav { top: 49px; } .header-menu-middle .header-navibox-2 .container { position: relative; } .header-menu-middle .phone-menu { position: absolute; right: 15px; top: 14px; font-weight: 500; font-size: 15px; text-transform: uppercase; } /***** HEADER MAIN ****/ .header-navibox-1, .header-navibox-2, .header-navibox-3, .header-navibox-4 { padding: 27px 0 !important; max-height: 80px; } .header-navibox-2 { padding: 0 !important; } .header-navibox-2 .main-menu > li > a { padding: 30px 0 !important; } .navbar -brand { padding: 21px 0 6px 15px; height: auto; } html .navbar>.container .navbar-brand, html .navbar>.container-fluid .navbar-brand { margin-left: 0; } .header.scrolling-header .navbar.navbar-default.navbar-scrolling, .header.scrolling-header .navbar.navbar-default.navbar-scrolling-fixing { background: rgba(255, 255, 255, 0.9); border-bottom: 1px solid #E4E4E4; padding-top: 5px; padding-bottom: 4px; } .header.scrolling-header .navbar.navbar-default.navbar-scrolling .navbar-nav li a, .header.scrolling-header .navbar.navbar-default.navbar-scrolling-fixing .navbar-nav li a { color: #333; } .header.scrolling-header .navbar.navbar-default.navbar-scrolling .normal-logo, .header.scrolling-header .navbar.navbar-default.navbar-scrolling-fixing .normal-logo { display: none; } .header.scrolling-header .navbar.navbar-default.navbar-scrolling .scroll-logo, .header.scrolling-header .navbar.navbar-default.navbar-scrolling-fixing .scroll-logo { display: inline-block; } .header.scrolling-header .navbar.navbar-default.navbar-scrolling .toggle-menu-button .toggle-menu-button-icon span, .header.scrolling-header .navbar.navbar-default.navbar-scrolling-fixing .toggle-menu-button .toggle-menu-button-icon span { background: #333 !important; } .header.scrolling-header .navbar.navbar-default.navbar-scrolling-fixing { background: #fff; } .header { transition: all 0.3s ease-out; -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; } .navbar { background: none; border: none; padding-top: 0; padding-bottom: 0; margin-bottom: 0; background: none; border: none; /* border-bottom: 1px solid rgba(255, 255, 255, 0.15); */ transition: all 0.3s ease-out; -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; } .navbar .toggle-button { line-height: 40px; cursor: pointer; color: #333; float: right; padding: 0 5px; } .navbar .toggle-button.collapsed { color: #999; } .navbar .toggle-button.collapsed:hover { color: #333; } .navbar .scroll-logo { display: none; } .navbar .navbar-nav.social-nav li a { padding: 0 5px; } .navbar .navbar-nav > li { padding-top: 0; padding-bottom: 0; } .navbar .navbar-nav > li.no-hover a { border: none !important; cursor: default; } .navbar .navbar-nav > li.active, .navbar .navbar-nav > li:hover { background: none; border: none; } .navbar .navbar-nav > li.active > a, .navbar .navbar-nav > li:hover > a { background: none !important; border: 0; } .navbar .navbar-nav > li > a { color: #fff; line-height: 1.62; border-radius: 0; border: 0; transition: color 0.3s ease-out; -webkit-transition: color 0.3s ease-out; -moz-transition: color 0.3s ease-out; padding: 0 10px; } .navbar .header-navibox-2 .navbar-nav > li > a { margin: 0 12px; font-size: 16px; } .header-navibox-3 a {} .header-phone { margin-left: 10px; } .navbar .navbar-nav > li > a .fa-bars { margin-right: 10px; } .navbar .main-menu > li.menu-width { position: static; } li.menu-width .dropdown-menu { width: 100%; left: 0 !important; } .navbar .main-menu > li { right: 0; -webkit-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } .navbar .main-menu > li > a{ max-height: 30px; } .navbar .main-menu > li.hidden-menu-item { right: -1500px; right: -100vw; } .toggle-menu-button.is-open .toggle-menu-button-icon span:nth-child(1), .toggle-menu-button.is-open .toggle-menu-button-icon span:nth-child(6) { -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); } .toggle-menu-button.is-open .toggle-menu-button-icon span:nth-child(2), .toggle-menu-button.is-open .toggle-menu-button-icon span:nth-child(5) { -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); } .toggle-menu-button.is-open .toggle-menu-button-icon span:nth-child(1) { left: 2px; top: 4px; } .toggle-menu-button.is-open .toggle-menu-button-icon span:nth-child(2) { left: calc(50% - 2px); top: 4px; } .toggle-menu-button.is-open .toggle-menu-button-icon span:nth-child(3) { left: -50%; opacity: 0; } .toggle-menu-button.is-open .toggle-menu-button-icon span:nth-child(4) { left: 100%; opacity: 0; } .toggle-menu-button.is-open .toggle-menu-button-icon span:nth-child(5) { left: 2px; top: 11px; } .toggle-menu-button.is-open .toggle-menu-button-icon span:nth-child(6) { left: calc(50% - 2px); top: 11px; } .toggle-menu-button .toggle-menu-button-icon { width: 22px; height: 17px; display: inline-block; vertical-align: middle; position: relative; -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); -webkit-transition: .5s ease-in-out; -moz-transition: .5s ease-in-out; -o-transition: .5s ease-in-out; transition: .5s ease-in-out; cursor: pointer; position: relative; top: -2px; } .toggle-menu-button .toggle-menu-button-icon span { display: block; position: absolute; height: 2px; width: 50%; background: #eee; opacity: 1; -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); -webkit-transition: .25s ease-in-out; -moz-transition: .25s ease-in-out; -o-transition: .25s ease-in-out; transition: .25s ease-in-out; } .toggle-menu-button .toggle-menu-button-icon span:nth-child(even) { left: 50%; border-radius: 0 9px 9px 0; } .toggle-menu-button .toggle-menu-button-icon span:nth-child(odd) { left: 0px; border-radius: 9px 0 0 9px; } .toggle-menu-button .toggle-menu-button-icon span:nth-child(1), .toggle-menu-button .toggle-menu-button-icon span:nth-child(2) { top: 0px; } .toggle-menu-button .toggle-menu-button-icon span:nth-child(3), .toggle-menu-button .toggle-menu-button-icon span:nth-child(4) { top: 6px; } .toggle-menu-button .toggle-menu-button-icon:hover span:nth-child(5), .toggle-menu-button .toggle-menu-button-icon:hover span:nth-child(6) { top: 11px; } .toggle-menu-button .toggle-menu-button-icon span:nth-child(5), .toggle-menu-button .toggle-menu-button-icon span:nth-child(6) { top: 12px; } .navbar-with-inside > li:hover .wrap-inside-nav { display: block; } .slidebar-panel .navbar-nav { margin-top: 25px !important; } /***** INSIDE NAV ****/ .wrap-inside-nav { position: absolute; left: 0; top: 60px; display: none; min-width: 220px; text-align: left; border-top: 2px solid #088cdc; background: #1a1a1a; -webkit-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } .wrap-inside-nav .inside-col { padding: 15px 0; } .wrap-inside-nav .inside-col .inside-nav:after, .wrap-inside-nav .inside-col .inside-nav:before { display: table; clear: both; height: 0; content: ''; } .wrap-inside-nav .inside-col .inside-nav li { line-height: 45px; min-height: 45px; } .wrap-inside-nav .inside-col .inside-nav li a { display: block; padding-left: 20px; color: #7e848e !important; font-size: 14px; text-decoration: none; font-weight: bold; } .wrap-inside-nav .inside-col .inside-nav li a:active, .wrap-inside-nav .inside-col .inside-nav li a:focus { display: block; padding-left: 20px; color: #088cdc !important; } .wrap-inside-nav .inside-col .inside-nav li a:hover, .wrap-inside-nav .inside-col .inside-nav li a:active:hover, .wrap-inside-nav .inside-col .inside-nav li a:visited:hover, .wrap-inside-nav .inside-col .inside-nav li a:focus:hover { color: #088cdc !important; background-color: #26282d; } .header-top-menu-support.wrap-fixed-menu { top: 141px; } .wrap-fixed-menu { display: none; position: fixed; background: rgba(34, 34, 34, 0.95); top: 0; left: 0; right: 0; bottom: 0; z-index: 10; overflow: auto; font-size: 0; z-index: 99999; } .wrap-fixed-menu .top-items { width: 100%; height: 50%; display: table; } .wrap-fixed-menu .top-items .menu-item { border-bottom: 1px solid #484848; } .header-cart { margin: 10px 10px 35px 20px; font-size: 20px; position: relative; text-align: center; display: inline-block; width: 25px; box-sizing: border-box; max-height: 23px; } .header-cart-count { position: absolute; top: -5px; right: -14px; padding: 4px; border-radius: 100px; background: #2796de !important; font-size: 10px; width: 16px; height: 16px; line-height: 7px; display: inline-block; text-align: center; color: #fff; font-weight: 500; } .toggle-menu-button { border: none; background: none; margin-top: 0px; margin-right: 12px; } .mobile-slidebar-menu .toggle-menu-button { margin-right: 0; display: none !important; } .header-section { padding: 180px 0 100px; text-align: center; border-bottom: 6px solid #088cdc; margin-bottom: 50px; position: relative; background-size: cover; } .header-section-fixed-image { background-attachment: fixed !important; } .header-section h2 { color: #fff; text-shadow: 1px 2px 5px rgba(0, 0, 0, 0.5); } .header-section p { color: #fff; } .header-section.elements-header { background: url(../../img/section-1-demo.jpg) top center no-repeat; background-size: cover; } .header-section.portfolio-single-header { background: url(../../img/section-1-demo.jpg) top center no-repeat; background-size: cover; } /*SEARCH*/ .header-search-icon { position: relative; top: 4px; } .header-search { position: fixed; top: 0; left: 0; display: block; visibility: hidden; width: 100%; height: 100vh; background-color: rgba(34, 34, 34, 0.95); opacity: 0; z-index: 9999; transition: all 0.3s ease 0s; } .header-search.open { visibility: visible; opacity: 1; } .header-search .close { position: absolute; top: 0; right: 0; width: 60px; height: 60px; font-size: 18px; border: none; background-color: #fff !important; opacity: 1 !important; z-index: 999; } .header-search .close * { color: #000 !important; } .header-search .search-open { float: right; height: 40px; padding-top: 6px; padding-left: 22px; font-size: 14px; color: #666; background-color: #fff; } .header-search.open { visibility: visible; opacity: 1; } .header-search .search-global { position: absolute; top: 50vh; margin-top: -120px; } .header-search .search-global__input { width: 100%; color: #fff; border: none; border-bottom: 1px solid #919191 !important; background-color: transparent; opacity: 1; height: auto !important; padding: 0 !important; padding-bottom: 15px !important; padding-right: 82px !important; font-size: 60px; font-weight: 600; line-height: 73px; } .header-search .search-global__input::-moz-placeholder { color: #fff; } .header-search .search-global__input:-ms-input-placeholder { color: #fff; } .header-search .search-global__input::-webkit-input-placeholder { color: #fff; } .header-search .search-global__input:focus { outline-style: none; } .header-search .search-global__btn { position: absolute; top: 0px; right: 5px; font-size: 42px; color: #fff; border: none; background-color: transparent; transition: all 0.3s; } .header-search .search-global__note { margin-top: 10px; font-size: 14pxm; color: #fff; } /*SIDEBARS*/ /** * Box Model, Html & Body */ .sidebar-nav-name { display: none; word-wrap: break-word; width: 20px; font-size: 20px; } .slidebar-panel .toggle-menu-button { border: none; background: none; margin-top: 0px; margin-right: 12px; padding-left: 4px; } .slidebar-panel.slidebar-nav-middle .sidebar-nav-name { display: none; } [data-canvas=container], [data-off-canvas] { margin: 0; padding: 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } [data-off-canvas*=reveal] { z-index: 0; padding: 25px 0; } /** * Canvas */ [data-off-canvas] li.full-width{ display: none !important; } [data-canvas] { z-index: 1; } [data-canvas=container] { width: 100%; height: 100%; background-color: white; /* Basic background color, overwrite this in your own css. */ -webkit-overflow-scrolling: touch; /* Enables momentum scrolling on iOS devices, may be removed by setting to 'auto' in your own CSS. */ } [data-canvas=container]:before, [data-canvas=container]:after { clear: both; content: ''; display: table; } /** * Off-Canavs */ [data-off-canvas] { display: none; position: fixed; overflow: hidden; background-color: #141517; /* Basic background color, overwrite this in your own css. */ color: white; /* Basic colors, overwrite this in your own css. */ -webkit-overflow-scrolling: touch; /* Enables momentum scrolling on iOS devices, may be removed by setting to 'auto' in your own CSS. */ } [data-off-canvas*=top] { width: 100%; height: auto; top: 0; padding: 30px; text-align: center; } [data-off-canvas*=top] ul { margin: 0 !important; float: none !important; } [data-off-canvas*=top] li { float: none !important; display: inline-block; width: auto !important; } [data-off-canvas*=right] { width: 255px; height: 100%; top: 0; right: 0; } [data-off-canvas*=bottom] { width: 100%; bottom: 0; } html [data-off-canvas*=bottom] { padding: 25px; } html [data-off-canvas*=bottom] li { float: none !important; width: auto; margin: 0; text-transform: uppercase; text-align: left; } html [data-off-canvas*=bottom] ul { margin: 0 auto !important; text-align: center; width: 100%; } [data-off-canvas*=left] { width: 256px; height: 100%; top: 0; left: 0; } [data-off-canvas*=left], [data-off-canvas*=right] { padding-top: 45px; overflow: inherit !important; } [data-off-canvas*=slidebar-panel-left] { width: 320px; height: 100%; top: 0; left: 0; padding-left: 70px; } html [data-off-canvas*=open] { margin-left: -256px; display: block; transition-duration: 300ms; transform: translate(256px, 0px); } [data-ff-canvas*=reveal] { z-index: 0; } [data-off-canvas*=push] { z-index: 1; } [data-off-canvas*=overlay] { z-index: 9999; } [data-off-canvas*=shift] { z-index: 0; } /** * Animation */ [data-canvas], [data-off-canvas] { -webkit-transition: -webkit-transform 300ms; transition: transform 300ms; -webkit-backface-visibility: hidden; /* Prevents flickering, may be removed if experiencing problems with fixed background images in Chrome. */ } [data-off-canvas*=shift][data-off-canvas*=top] { -webkit-transform: translate( 0px, 50%); transform: translate( 0px, 50%); } [data-off-canvas*=shift][data-off-canvas*=right] { -webkit-transform: translate( -50%, 0px); transform: translate( -50%, 0px); } [data-off-canvas*=shift][data-off-canvas*=bottom] { -webkit-transform: translate( 0px, -50%); transform: translate( 0px, -50%); } [data-off-canvas*=shift][data-off-canvas*=left] { -webkit-transform: translate( 50%, 0px); transform: translate( 50%, 0px); } .menu-mobile-button { position: absolute; right: 0; top: 20px; z-index: 777; display: none; } html .header-menu-middle .submenu-controll { right: 12px; top: 20px; } [data-off-canvas] ul { margin: 0 !important; } [data-off-canvas] li { float: none !important; display: inline-block; width: 100%; margin: 0; text-transform: uppercase; text-align: left; background: transparent !important; max-height: inherit !important; } [data-off-canvas] li.full-width:hover { position: relative !important; } .menu-parent-link { display: inline-block; position: relative; width: 100%; top: 20px; } html .submenu-controll { position: absolute; right: 0px; top: -57px; display: block; width: 12px; text-align: center; z-index: 99; cursor: pointer; height: 12px; } .tmpl-plugins-not-activated .submenu-controll { top: -57px; } html .menu-marker-dot .submenu-controll { position: absolute; right: 0px; top: -56px; } html ul li ul .submenu-controll { display: none !important; } [data-off-canvas*=top] .submenu-controll-inner, [data-off-canvas*=bottom] .submenu-controll-inner { display: none !important; } [data-off-canvas*=right] .submenu-controll-inner { position: absolute; right: auto; top: 12px; display: block; width: 21px; text-align: center; z-index: 999; left: 10px; height: 20px; -moz-transform: rotate(180deg); -o-transform: rotate(180deg); -webkit-transform: rotate(180deg); } [data-off-canvas*=left] .submenu-controll-inner { position: absolute; right: 10px; top: -2px; display: block; width: 20px; text-align: center; z-index: 999; height: 28px; font-size: 22px; } .submenu-controll-inner { position: absolute; right: 10px; top: 10px; display: block; width: 21px; text-align: center; z-index: 999; height: 20px; } .mobile-slidebar-menu li ul .submenu-controll-inner { position: absolute; top: 0px; } html .mobile-slidebar-menu .submenu-controll-inner { top: 6px; font-size: 20px; } html .mobile-slidebar-menu .submenu-controll-inner .theme-fonts-icon_close{ display: none; } .mobile-slidebar-menu .fa-angle-right{ display: none !important } html .mobile-slidebar-menu .open > .submenu-controll-inner .theme-fonts-icon_close{ display: block; } html .mobile-slidebar-menu .open > .submenu-controll-inner .theme-fonts-icon_plus{ display: none !important; } .mobile-slidebar-menu .mobile-menu-wrap{ padding: 0 15px; } .mobile-slidebar-menu .yamm > li{ border-bottom: 1px solid #535353; } .navbar-mobi-brand{ background: #fff; overflow: hidden; display: inline-block; width: 100%; margin-top: 60px; padding: 20px; } .mobile-slidebar-menu .yamm li.open , .mobile-slidebar-menu .yamm li.open .dropdown-menu { background: #535353 !important; padding-bottom: 7px; padding-top: 0px; } .mobile-slidebar-menu .yamm li .dropdown-menu .dropdown-menu { display: block !important; visibility: visible; padding-left: 5px !important; margin-left: 0 !important; } .mobile-slidebar-menu .yamm li .dropdown-menu [class^="theme-fonts-"]{ display: none !important; } .mobile-slidebar-menu .yamm li .dropdown-menu a , .mobile-slidebar-menu .yamm li .dropdown-menu a:hover{ color: #cbcbcb !important; } .mobile-slidebar-menu .yamm .dropdown-menu a { white-space: normal; } .mobile-slidebar-menu .navbar-nav .open .dropdown-menu .dropdown-header, .mobile-slidebar-menu .navbar-nav .open .dropdown-menu>li>a { padding:1px 10px 4px 25px; } .logged-in .header-mobile-search{ margin-top: 60px; } .header-mobile-search{ padding: 15px 0 25px 0; position: relative; } .header-mobile-search input[type=text]{ background: #fff; padding: 10px; } .header-mobile-search #searchsubmit{ position: absolute; top: 0; right: 0; height: 40px; line-height: 22px; padding: 0 15px; background: transparent; border: 0; font-size: 0; } .header-mobile-search:before { display: inline-block; font: normal normal normal 14px/1 FontAwesome; text-rendering: auto; content: "\f002"; position: absolute; right: 13px; top: 24px; color: #222; z-index: 99; font-size: 20px; } .submenu-controll-inner * { color: #ccc !important; } .submenu-controll { position: absolute; right: 18px; top: 7px; display: block; width: 21px; text-align: center; z-index: 99; cursor: pointer; height: 20px; } .slidebar-menu .submenu-controll { display: none !important; } .slidebar-menu .full-width .dropdown-menu, .slidebar-nav-middle .full-width .dropdown-menu { display: none !important; } html .cl-effect-13 .submenu-controll { right: -3px; } html .cl-effect-7 .submenu-controll:before { left: -3px !important; } html .menu-marker-arrow .submenu-controll:before { font-family: 'FontAwesome'; content: "\f107"; display: block; position: absolute; right: 0; font-size: 11px; } html .menu-marker-dot .submenu-controll:before { content: "."; top: -10px; right: inherit; left: 0px; font-size: 16px; position: relative; } #main-menu.cl-effect-1 > li { margin: 0 3px; } html .cl-effect-1 li:hover .submenu-controll:before { display: none } [data-off-canvas*=right] li.menu-item-has-children:after:hover, [data-off-canvas*=left] li.menu-item-has-children:after:hover { background-color: #fff !important; color: #000 !important; } [data-off-canvas] li a { font-size: 13px; float: none !important; display: inline-block; width: 100%; margin: 0; color: #fff; padding: 7px 15px; text-transform: initial; background: transparent !important; } [data-off-canvas] li a:hover { color: #088cdc; } [data-off-canvas*=left] .navbar-nav > li .dropdown-menu { border-top-right-radius: 0; border-top-left-radius: 0; margin-left: 0px !important; margin: 0px !important; padding: 5px 0; width: 100%; } [data-off-canvas*=left] .navbar-nav li:hover > .dropdown-menu, [data-off-canvas*=right] .navbar-nav li:hover > .dropdown-menu { visibility: visible; background-color: #141517; } /*SEARCH MODAL*/ .btn_header_search { position: relative; top: 1px; } .search-form-modal { background-color: #000; height: 0; left: 0; overflow: hidden; position: fixed; top: 0; width: 100%; z-index: 9999; -webkit-transition: all 300ms ease 0s; -moz-transition: all 300ms ease 0s; -o-transition: all 300ms ease 0s; transition: all 300ms ease 0s; } .search-form-modal.open { height: 100% } .search-form_close { color: #fff; cursor: pointer; font-size: 20px; position: absolute; right: 15px; top: -20px; } .header_search_form { bottom: 0; display: block; height: 80px; left: 0; margin: auto; max-width: 550px; padding: 15px; position: absolute; right: 0; top: 0; width: 100%; } .header_search_form .form-group { float: left; height: 100%; width: 68%; } .header_search_form .form-group .form-control { border-color: #fff; border-style: solid none solid solid; border-width: 2px 0 2px 2px; font-size: 16px; height: 100%; float: left; width: 100%; padding: 10px 15px; border-radius: 0; -moz-border-radius: 0; -webkit-border-radius: 0; box-shadow: none; -moz-box-shadow: none; -webkit-box-shadow: none; } .header_search_form .btn_search { border: 2px solid #337ab7; background: #337ab7; color: #fff; float: right; font-size: 16px; height: 100%; text-transform: uppercase; width: 32%; text-shadow: none; -moz-text-shadow: none; -webkit-text-shadow: none; border-radius: 0; -moz-border-radius: 0; -webkit-border-radius: 0; box-shadow: none; -moz-box-shadow: none; -webkit-box-shadow: none; } /*RESPONSIVE STYLES */ @media (min-width:768px) and (max-width:1200px) { .nav-custom-info-wrap .nav-custom-info:first-child { display: none !important; } } @media (min-width:768px) and (max-width:1100px) { .nav-custom-info-wrap { display: none !important; } .header-phone .no-tablet-phone { display: none !important; } .no-tablet-search .btn_header_search { display: none !important; } .no-tablet-minicart .header-navibox-4 { display: none !important; } .no-tablet-socials .header-social-link { display: none !important; } .no-tablet-phone .header-phone { display: none !important; } } @media (min-width:768px) and (max-width:1000px) { html body .main-menu { position: relative!important; } .top-bar { display: none !important; } .center-logo { padding-top: 20px; } .top-bar .header-topbarbox-1, .top-bar .header-topbarbox-2, .top-bar .header-topbarbox-3, .top-bar .header-topbarbox-4 { float: none !important; text-align: center; } .header-navibox-4, .header-navibox-3, .header-navibox-2 { display: none !important; } html .header-full-width .header-navibox-1 { left: auto; position: inherit; } .navbar-fixed-top, .navbar-fixed-bottom { left: 0; position: relative; right: 0; } } /* Mobile Menu*/ @media (max-width:768px) { html .slidebar-nav-panel { position: relative; left: 0; top: 0; height: 106px; border: 1px solid rgba(255, 255, 255, 0.15); bottom: 0; width: 100%; } html [data-off-canvas*=left], [data-off-canvas*=right] { padding-top: 0px; overflow: auto !important; } .admin-bar mobile-slidebar-menu { padding-top: 25px !important; } [data-off-canvas*=slidebar-panel-left] , [data-off-canvas*=slidebar-panel-right] { top: 0; left: 0; padding-left: 0; } .nav-custom-info-wrap { display: none !important; } html body .main-menu { position: relative!important; } html #main-menu li .dropdown-menu { background: #333 none repeat scroll 0 0; float: none; left: 0; right: auto; width: 95%; } html #main-menu li .dropdown-menu .dropdown-menu { padding-left: 10px; } .mobile-slidebar-menu li .dropdown-menu .dropdown-menu html .header .navbar { min-height: 75px; } .top-bar { display: none !important; } html .header-full-width.header-navibox-2-left .header-navibox-1 { left: auto; position: absolute; width: 100%; } html .mobile-no-sticky.navbar-fixed-top { position: absolute !important; } .no-mobile-topbar .top-bar { display: none !important; } .mobile-slidebar-menu { padding-top: 0px; } html .header-topbarbox-1, .header-topbarbox-2 { padding: 0; } html body .header-navibox-1-left .header-navibox-1, html body .header-navibox-2-left .header-navibox-2, html body .header-navibox-3-left .header-navibox-3, html body .header-navibox-4-left .header-navibox-4 { float: none !important; } html .navbar-brand { display: block; left: 10px; margin-left: auto; margin-right: auto; position: absolute; top: 9px; width: auto; } .center-logo { padding-top: 20px; } .top-bar .header-topbarbox-1, .top-bar .header-topbarbox-2, .top-bar .header-topbarbox-3, .top-bar .header-topbarbox-4 { float: none !important; text-align: center; } .header-navibox-4, .header-navibox-3, .header-navibox-2 { display: none !important; } html .header-full-width .header-navibox-1 { left: auto; position: inherit; } html .header-search .search-global__input { font-size: 18px; height: auto !important; line-height: 48px; padding: 0 14px 1px 0 !important; } html .header-search .search-global__btn { font-size: 17px; position: absolute; right: 0; top: 7px; } } /*Sidebar Menu*/ html yamm li a:hover { cursor: pointer; } .dropdown-menu li a::before, .dropdown-menu li a::after { display: none !important; } html body header nav li > a:hover { opacity: 0.8; cursor: pointer; background: transparent !Important; } .menu-all-pages-container { padding-top: 35px; } .wrap-left-open .home-section > .container, .wrap-left-open .wrap-gallery-item .container, .wrap-left-open .gallery-single-header .container { width: 100% !important; } .wrap-left-open .breadcrumb * { color: #2796de !important; } .wrap-left-open .gallery-single-2 { padding-bottom: 20px; padding-top: 0px; } .wrap-left-open .gallery-single-header { padding: 50px 0 30px 30px; position: relative; background: transparent !important; } .wrap-left-open .gallery-single-2 { padding-bottom: 20px; padding-left: 30px; } .wrap-left-open .home-section > .container, .wrap-left-open .home-section > .container > .vc_row, .wrap-left-open .home-section > .container > .vc_row > .wpb_column { padding-left: 0; padding-right: 0; margin-left: 0; margin-right: 0; } .box-sticky { position: fixed; } .side-logo { display: inline-block; width: 100%; padding: 10px; margin-bottom: 30px; } .side-logo a { display: inline-block; width: 100%; text-align: center; overflow: hidden; height: auto; padding: 0; margin: 0; } .side-logo img { display: block; margin: 0 auto; max-width: 100%; height: auto; } .side-cart { display: inline-block; width: 215px; border: 1px solid rgba(255, 255, 255, 0.15); margin-bottom: 10px; margin-left: 20px; padding-top: 34px; padding-left: 10px; height: 87px; } .side-cart a { color: #fff; } .side-search { display: inline-block; width: 100%; margin-bottom: 0; padding: 10px 20px; } .side-form-search { position: relative; background: #fff; } .side-form-search input[type=search] { border: none; background: none; padding: 10px; color: #000; width: 174px; } .side-form-search .button { border: none; background: none; position: absolute; top: 3px; right: 2px; } .side-form-search .button .fa { color: #000; } html [data-off-canvas].header-background-black { background-color: #141517; } html [data-off-canvas].header-background-white { background-color: #fff; } [data-off-canvas].header-color-black li a, [data-off-canvas].header-color-black li * { color: #000 !important; background: #fff !important; } [data-off-canvas].header-color-black .side-form-search { position: relative; background: #fff; border: 1px solid #ddd; } html .menu-sidebar-fixed .dropdown-menu { -webkit-box-shadow: 0; -moz-box-shadow: 0; box-shadow: 0; } html .layout-header2 .dropdown-menu, .header-topbar-view .dropdown-menu { top: 130%; } .header .open > .dropdown-menu { top: 100%; visibility: visible; -webkit-transition: all 150ms ease 0s; -moz-transition: all 150ms ease 0s; -o-transition: all 150ms ease 0s; transition: all 150ms ease 0s; } .open .dropdown-menu li:hover > .dropdown-menu { visibility: visible; } html .dropdown-menu { position: absolute; top: 150%; left: 0; z-index: 1000; display: block; visibility: hidden; float: left; min-width: 160px; padding: 10px 0; margin: 0; list-style: none; font-size: 14px; text-align: left; background-color: rgba(255, 255, 255, 1); border: 0; border-radius: 0; -webkit-box-shadow: 0; box-shadow: 0; z-index: 899; background-clip: padding-box; -webkit-transition: all 100ms ease 0s; -moz-transition: all 100ms ease 0s; -o-transition: all 100ms ease 0s; transition: all 100ms ease 0s; } .header-full-width .header-navibox-2 { position: relative; } .header-full-width .header-navibox-2 .yamm .full-width .dropdown-menu { margin-left: -15%; min-width: 1000px; } [data-off-canvas*=left] ul ul { -webkit-transition: left 100ms ease 0s; -moz-transition: left 100ms ease 0s; -o-transition: left 100ms ease 0s; transition: left 100ms ease 0s; top: 0px !important; left: 130%; z-index: 1000; padding: 0; margin: 0; list-style: none; font-size: 12px; text-align: left; background-color: transparent; border: 0; border: 0; border-radius: 0; -webkit-box-shadow: 0; box-shadow: 0; background-clip: padding-box; margin-left: 0px !important; border: 0 !important; } .mobile-slidebar-menu ul ul { left: 0 !important; position: relative !important; } .mobile-slidebar-menu .main-menu { top: 0px; position: relative; } .admin-bar .mobile-slidebar-menu .main-menu { top: 0px; } .mobile-slidebar-menu li .dropdown-menu, .mobile-slidebar-menu li .dropdown-menu .dropdown-menu { display: none; margin-top: 0 !important; position: relative !important; top: 0 !important; } .mobile-slidebar-menu li > .dropdown-menu { padding-top: 0 !important; padding-bottom: 0 !important; } .mobile-slidebar-menu .full-width .dropdown-menu { display: none !important; } .mobile-slidebar-menu .menu-parent-link { display: none; } [data-off-canvas*=left] ul ul ul { top: -5px !important; } [data-off-canvas*=right] ul ul { position: absolute !important; -webkit-transition: right 100ms ease 0s; -moz-transition: right 100ms ease 0s; -o-transition: right 100ms ease 0s; transition: right 100ms ease 0s; top: -6px; right: 130%; left: auto !important; z-index: 1000; padding: 5px 0 !important; margin: 0; list-style: none; font-size: 12px; text-align: left; background-color: transparent; border: 0; border: 0; border-radius: 0; -webkit-box-shadow: 0; box-shadow: 0; background-clip: padding-box; margin-left: 0px !important; border: 0 !important; } [data-off-canvas*=right] ul ul ul { top: -10px; } [data-off-canvas*=right] li { text-align: center !important; } [data-off-canvas*=left] ul li:hover > ul { left: 100%; } [data-off-canvas*=right] ul li:hover > ul { right: 100%; } [data-off-canvas] ul ul a { float: none !important; display: inline-block; width: 100%; margin: 0; color: #fff; padding: 5px 20px; } .fullmenu-close { position: absolute; top: 0; right: 0; width: 60px; height: 60px; font-size: 18px; border: none; background-color: #fff !important; opacity: 1 !important; z-index: 999; } #fixedMenu .fullmenu-close , #fixedMenuMobile .fullmenu-close { position: relative; top: 0; left: 0; border-radius: 100px; width: auto; background: transparent !important; color: #fff; margin-bottom: 10px; height: auto; font-size: 54px; border: none; opacity: 1 !important; z-index: 999; padding-top: 3px; -webkit-transition: color 300ms ease 0s; -moz-transition: color 300ms ease 0s; -o-transition: color 300ms ease 0s; transition: color 300ms ease 0s; /* background: none !important; */ } #fixedMenuMobile .fullmenu-close { top: 20px !important; font-size: 33px !important; } #fixedMenu .fullmenu-close * , #fixedMenuMobile .fullmenu-close * { color: #fff !important; } .fullmenu-close * { color: #000; } .slidebar-nav-panel { background-color: #141517; padding: 55px 20px 20px 20px; position: fixed; left: 0; top: 0; height: 100%; z-index: 99999; width: 75px; border-right: 1px solid rgba(255, 255, 255, 0.15); } .slidebar-panel.slidebar-nav-middle .toggle-menu-button { transform: rotate(90deg); position: absolute; top: 40%; left: -119px; outline: none; width: 300px; display: inline-block; padding: 21px; } .slidebar-panel.slidebar-nav-middle .toggle-menu-button .toggle-menu-button-icon { width: 60px; } .slidebar-panel.slidebar-nav-middle .toggle-menu-button.is-open .toggle-menu-button-icon span:nth-child(6) { left: calc(50% - 21px); } .slidebar-panel.slidebar-nav-middle .toggle-menu-button.is-open .toggle-menu-button-icon span:nth-child(2) { left: calc(50% - 21px); top: 4px; } /* Admin Bar */ .page-id-3524 .yp-demo-link { display: none !important; } #wpcf7-f5-o1 { max-width: 500px; margin: 0 auto; } #wpcf7-f5-o1 input, #wpcf7-f5-o1 button, #wpcf7-f5-o1 select, #wpcf7-f5-o1 textarea { width: 100%; padding: 10px; text-align: center; font-weight: 500; text-transform: uppercase; border: 0; } #wpcf7-f5-o1 input[type=text], #wpcf7-f5-o1 select, #wpcf7-f5-o1 textarea { color: #000 !important; } /* Link hover*/ html .dropdown-menu > li > a { padding: 7px 30px 7px 20px; font-size: 14px; text-transform: initial; -webkit-transition: color 300ms ease 0s; -moz-transition: color 300ms ease 0s; -o-transition: color 300ms ease 0s; transition: color 300ms ease 0s; } /* Effect 1: Brackets */ .cl-effect-1 a::before, .cl-effect-1 a::after { display: inline-block; opacity: 0; -webkit-transition: -webkit-transform 0.3s, opacity 0.2s; -moz-transition: -moz-transform 0.3s, opacity 0.2s; transition: transform 0.3s, opacity 0.2s; position: absolute; } .cl-effect-1 a::before { margin-left: -10px; content: '['; -webkit-transform: translateX(20px); -moz-transform: translateX(20px); transform: translateX(20px); } .cl-effect-1 a::after { margin-left: 5px; content: ']'; -webkit-transform: translateX(-20px); -moz-transform: translateX(-20px); transform: translateX(-20px); } .cl-effect-1 a:hover::before, .cl-effect-1 a:hover::after, .cl-effect-1 a:focus::before, .cl-effect-1 a:focus::after { opacity: 1; -webkit-transform: translateX(0px); -moz-transform: translateX(0px); transform: translateX(0px); } /* Effect 2: 3D rolling links, idea from http://hakim.se/thoughts/rolling-links */ .cl-effect-2 a { line-height: 44px; -webkit-perspective: 1000px; -moz-perspective: 1000px; perspective: 1000px; } .cl-effect-2 a span { position: relative; display: inline-block; padding: 0 14px; background: #2195de; -webkit-transition: -webkit-transform 0.3s; -moz-transition: -moz-transform 0.3s; transition: transform 0.3s; -webkit-transform-origin: 50% 0; -moz-transform-origin: 50% 0; transform-origin: 50% 0; -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; transform-style: preserve-3d; } .csstransforms3d .cl-effect-2 a span::before { position: absolute; top: 100%; left: 0; width: 100%; height: 100%; background: #0965a0; content: attr(data-hover); -webkit-transition: background 0.3s; -moz-transition: background 0.3s; transition: background 0.3s; -webkit-transform: rotateX(-90deg); -moz-transform: rotateX(-90deg); transform: rotateX(-90deg); -webkit-transform-origin: 50% 0; -moz-transform-origin: 50% 0; transform-origin: 50% 0; } .cl-effect-2 a:hover span, .cl-effect-2 a:focus span { -webkit-transform: rotateX(90deg) translateY(-22px); -moz-transform: rotateX(90deg) translateY(-22px); transform: rotateX(90deg) translateY(-22px); } .csstransforms3d .cl-effect-2 a:hover span::before, .csstransforms3d .cl-effect-2 a:focus span::before { background: #28a2ee; } /* Effect 3: bottom line slides/fades in */ .cl-effect-3 a { padding: 8px 0; } .cl-effect-3 a::after { position: absolute; top: 93%; left: 0; width: 100%; height: 4px; content: ''; opacity: 0; -webkit-transition: opacity 0.3s, -webkit-transform 0.3s; -moz-transition: opacity 0.3s, -moz-transform 0.3s; transition: opacity 0.3s, transform 0.3s; -webkit-transform: translateY(10px); -moz-transform: translateY(10px); transform: translateY(10px); } .cl-effect-3 a:hover::after, .cl-effect-3 a:focus::after { opacity: 1; -webkit-transform: translateY(0px); -moz-transform: translateY(0px); transform: translateY(0px); } /* Effect 4: bottom border enlarge */ .cl-effect-4 a { padding: 0 0 10px; } .cl-effect-4 a::after { position: absolute; top: 86%; left: 0; width: 100%; height: 1px; border-bottom: 2px dotted #fff; content: ''; opacity: 0; -webkit-transition: height 0.3s, opacity 0.3s, -webkit-transform 0.3s; -moz-transition: height 0.3s, opacity 0.3s, -moz-transform 0.3s; transition: height 0.3s, opacity 0.3s, transform 0.3s; -webkit-transform: translateY(-10px); -moz-transform: translateY(-10px); transform: translateY(-10px); } .cl-effect-4 a:hover::after, .cl-effect-4 a:focus::after { height: 2px; opacity: 1; -webkit-transform: translateY(0px); -moz-transform: translateY(0px); transform: translateY(0px); } /* Effect 5: same word slide in */ .cl-effect-5 a { overflow: hidden; padding: 0 4px; height: 1em; } .cl-effect-5 a span { position: relative; display: inline-block; -webkit-transition: -webkit-transform 0.3s; -moz-transition: -moz-transform 0.3s; transition: transform 0.3s; } .cl-effect-5 a span::before { position: absolute; top: 100%; content: attr(data-hover); font-weight: 500; -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } .cl-effect-5 a:hover span, .cl-effect-5 a:focus span { -webkit-transform: translateY(-100%); -moz-transform: translateY(-100%); transform: translateY(-100%); } /* Effect 5: same word slide in and border bottom */ .cl-effect-6 a { margin: 0 10px; padding: 10px 20px; } .cl-effect-6 a::before { position: absolute; top: 0; left: 0; width: 100%; height: 2px; background: #fff; content: ''; -webkit-transition: top 0.3s; -moz-transition: top 0.3s; transition: top 0.3s; } .cl-effect-6 a::after { position: absolute; top: 0; left: 0; width: 2px; height: 2px; background: #fff; content: ''; -webkit-transition: height 0.3s; -moz-transition: height 0.3s; transition: height 0.3s; } .cl-effect-6 a:hover::before { top: 100%; opacity: 1; } .cl-effect-6 a:hover::after { height: 100%; } /* Effect 7: second border slides up */ .cl-effect-7 a { padding: 12px 10px 10px; text-shadow: none; font-weight: normal; } .cl-effect-7 a::before, .cl-effect-7 a::after { position: absolute; top: 93%; left: 0; width: 100%; height: 4px; background: #222; content: ''; -webkit-transition: -webkit-transform 0.3s; -moz-transition: -moz-transform 0.3s; transition: transform 0.3s; -webkit-transform: scale(0.85); -moz-transform: scale(0.85); transform: scale(0.85); } .header-color-white .cl-effect-7 a::before, .header-color-white .cl-effect-7 a::after { background: #fff; } .cl-effect-7 a::after { opacity: 0; -webkit-transition: top 0.3s, opacity 0.3s, -webkit-transform 0.3s; -moz-transition: top 0.3s, opacity 0.3s, -moz-transform 0.3s; transition: top 0.3s, opacity 0.3s, transform 0.3s; } .cl-effect-7 a:hover::before, .cl-effect-7 a:hover::after, .cl-effect-7 a:focus::before, .cl-effect-7 a:focus::after { -webkit-transform: scale(1); -moz-transform: scale(1); transform: scale(1); } .cl-effect-7 a:hover::after, .cl-effect-7 a:focus::after { top: 0%; opacity: 1; } /* Effect 8: border slight translate */ .header-navibox-2 .main-menu.cl-effect-8 > li > a { padding-left: 20px !important; padding-right: 20px !important; padding-top: 10px !important; padding-bottom: 10px !important; margin-top: 17px !important; margin-left: 7px !important; margin-right: 7px !important; min-height: 40px; } .cl-effect-8 a { padding: 10px 20px; } .header-color-black .cl-effect-8 a::before, .header-color-black .cl-effect-8 a::after { border: 3px solid #f3f3f3; } .cl-effect-8 a::before, .cl-effect-8 a::after { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 3px solid #333; content: ''; -webkit-transition: -webkit-transform 0.3s, opacity 0.3s; -moz-transition: -moz-transform 0.3s, opacity 0.3s; transition: transform 0.3s, opacity 0.3s; } .cl-effect-8 a::after { border-color: #fff; opacity: 0; -webkit-transform: translateY(-7px) translateX(6px); -moz-transform: translateY(-7px) translateX(6px); transform: translateY(-7px) translateX(6px); } .header-color-black .cl-effect-8 a::after { border-color: #000; } .cl-effect-8 a:hover::before, .cl-effect-8 a:focus::before { opacity: 0; -webkit-transform: translateY(5px) translateX(-5px); -moz-transform: translateY(5px) translateX(-5px); transform: translateY(5px) translateX(-5px); } .cl-effect-8 a:hover::after, .cl-effect-8 a:focus::after { opacity: 1; -webkit-transform: translateY(0px) translateX(0px); -moz-transform: translateY(0px) translateX(0px); transform: translateY(0px) translateX(0px); } /* Effect 9: second text and borders */ .cl-effect-9 .current-menu-item:before { content: ''; display: inline-block; width: 100%; height: 81px; position: absolute; left: 1px; top: 0; background-color: #ec423c; transform: skewX(-20deg); } .header.navbar-scrolling .navbar .cl-effect-9 > li.current-menu-item > a { color: #fff !important; } .header .navbar .cl-effect-9 > li.current-menu-item { margin-right: 10px !important; } /* Effect 10: reveal, push out */ .cl-effect-10 { position: relative; z-index: 1; } .cl-effect-10 a { overflow: hidden; margin: 0 15px; } .cl-effect-10 a span { display: block; padding: 10px 20px; background: #0f7c67; -webkit-transition: -webkit-transform 0.3s; -moz-transition: -moz-transform 0.3s; transition: transform 0.3s; } .cl-effect-10 a::before { position: absolute; top: 0; left: 0; z-index: -1; padding: 10px 20px; width: 100%; height: 100%; background: #fff; color: #0f7c67; content: attr(data-hover); -webkit-transition: -webkit-transform 0.3s; -moz-transition: -moz-transform 0.3s; transition: transform 0.3s; -webkit-transform: translateX(-25%); } .cl-effect-10 a:hover span, .cl-effect-10 a:focus span { -webkit-transform: translateX(100%); -moz-transform: translateX(100%); transform: translateX(100%); } .cl-effect-10 a:hover::before, .cl-effect-10 a:focus::before { -webkit-transform: translateX(0%); -moz-transform: translateX(0%); transform: translateX(0%); } /* Effect 11: text fill based on Lea Verou's animation http://dabblet.com/gist/6046779 */ .cl-effect-11 a::before, .cl-effect-11 a::after { position: absolute; top: 50%; left: 50%; width: 69%; height: 39px; border: 2px solid rgba(0, 0, 0, 0.1); border-radius: 0%; content: ''; opacity: 0; -webkit-transition: -webkit-transform 0.3s, opacity 0.3s; -moz-transition: -moz-transform 0.3s, opacity 0.3s; transition: transform 0.3s, opacity 0.3s; -webkit-transform: translateX(-50%) translateY(-50%) scale(0.2); -moz-transform: translateX(-50%) translateY(-50%) scale(0.2); transform: translateX(-50%) translateY(-50%) scale(0.2); } #main-menu.cl-effect-11 > li > a { padding-left: 15px !important; padding-right: 15px !important; } .cl-effect-11 a::after { width: 76%; height: 45px; border-width: 2px; -webkit-transform: translateX(-50%) translateY(-50%) scale(0.8); -moz-transform: translateX(-50%) translateY(-50%) scale(0.8); transform: translateX(-50%) translateY(-50%) scale(0.8); } .cl-effect-11 a:hover::before, .cl-effect-11 a:hover::after, .cl-effect-11 a:focus::before, .cl-effect-11 a:focus::after { opacity: 1; -webkit-transform: translateX(-50%) translateY(-50%) scale(1); -moz-transform: translateX(-50%) translateY(-50%) scale(1); transform: translateX(-50%) translateY(-50%) scale(1); } /* Effect 12: circle */ .cl-effect-12 li > a { max-height: inherit !important; } .cl-effect-12 .menu-parent-link { top: 2px; } .cl-effect-12 a::before, .cl-effect-12 a::after { position: absolute; top: 50%; left: 50%; width: 55px; height: 55px; border: 2px solid rgba(0, 0, 0, 0.1); border-radius: 50%; content: ''; opacity: 0; -webkit-transition: -webkit-transform 0.3s, opacity 0.3s; -moz-transition: -moz-transform 0.3s, opacity 0.3s; transition: transform 0.3s, opacity 0.3s; -webkit-transform: translateX(-50%) translateY(-50%) scale(0.2); -moz-transform: translateX(-50%) translateY(-50%) scale(0.2); transform: translateX(-50%) translateY(-50%) scale(0.2); } .cl-effect-12 a::after { width: 65px; height: 65px; border-width: 6px; -webkit-transform: translateX(-50%) translateY(-50%) scale(0.8); -moz-transform: translateX(-50%) translateY(-50%) scale(0.8); transform: translateX(-50%) translateY(-50%) scale(0.8); } .cl-effect-12 a:hover::before, .cl-effect-12 a:hover::after, .cl-effect-12 a:focus::before, .cl-effect-12 a:focus::after { opacity: 1; -webkit-transform: translateX(-50%) translateY(-50%) scale(1); -moz-transform: translateX(-50%) translateY(-50%) scale(1); transform: translateX(-50%) translateY(-50%) scale(1); } /* Effect 13: three circles */ .cl-effect-13 a { -webkit-transition: color 0.3s; -moz-transition: color 0.3s; transition: color 0.3s; } .cl-effect-13 a::before { position: absolute; top: 50%; left: 50%; color: transparent; content: '•'; text-shadow: 0 0 transparent; font-size: 1.2em; -webkit-transition: text-shadow 0.3s, color 0.3s; -moz-transition: text-shadow 0.3s, color 0.3s; transition: text-shadow 0.3s, color 0.3s; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); transform: translateX(-50%); pointer-events: none; } .cl-effect-13 a:hover::before, .cl-effect-13 a:focus::before { color: #fff; text-shadow: 10px 0 #fff, -10px 0 #fff; } .cl-effect-13 a:hover, .cl-effect-13 a:focus { color: #ba7500; } .cl-effect-18.main-menu > li { margin: 0 10px !important; } /* Effect 14: border switch */ .cl-effect-14 .current-menu-item:before { content: ''; display: inline-block; width: 100%; height: 81px !important; position: absolute; left: 1px; top: 0; background-color: #ec423c; transform: skewX(-20deg); } .header.navbar-scrolling .navbar .cl-effect-14 > li.current-menu-item > a{ color: #fff !important; } .header .navbar .cl-effect-14 > li.current-menu-item { margin-right: 10px !important; } /* Effect 15: scale down, reveal */ .cl-effect-15 a { color: rgba(0, 0, 0, 0.2); font-weight: 500; text-shadow: none; } .cl-effect-15 a::before { color: #fff; content: attr(data-hover); position: absolute; -webkit-transition: -webkit-transform 0.3s, opacity 0.3s; -moz-transition: -moz-transform 0.3s, opacity 0.3s; transition: transform 0.3s, opacity 0.3s; } .cl-effect-15 a:hover::before, .cl-effect-15 a:focus::before { -webkit-transform: scale(0.9); -moz-transform: scale(0.9); transform: scale(0.9); opacity: 0; } /* Effect 16: fall down */ .cl-effect-16 a { color: #6f8686; text-shadow: 0 0 1px rgba(111, 134, 134, 0.3); } .cl-effect-16 a::before { color: #fff; content: attr(data-hover); position: absolute; opacity: 0; text-shadow: 0 0 1px rgba(255, 255, 255, 0.3); -webkit-transform: scale(1.1) translateX(10px) translateY(-10px) rotate(4deg); -moz-transform: scale(1.1) translateX(10px) translateY(-10px) rotate(4deg); transform: scale(1.1) translateX(10px) translateY(-10px) rotate(4deg); -webkit-transition: -webkit-transform 0.3s, opacity 0.3s; -moz-transition: -moz-transform 0.3s, opacity 0.3s; transition: transform 0.3s, opacity 0.3s; pointer-events: none; } .cl-effect-16 a:hover::before, .cl-effect-16 a:focus::before { -webkit-transform: scale(1) translateX(0px) translateY(0px) rotate(0deg); -moz-transform: scale(1) translateX(0px) translateY(0px) rotate(0deg); transform: scale(1) translateX(0px) translateY(0px) rotate(0deg); opacity: 1; } /* Effect 17: move up fade out, push border */ .cl-effect-17 a { color: #10649b; text-shadow: none; padding: 10px 0; } .cl-effect-17 a::before { color: #fff; text-shadow: 0 0 1px rgba(255, 255, 255, 0.3); content: attr(data-hover); position: absolute; -webkit-transition: -webkit-transform 0.3s, opacity 0.3s; -moz-transition: -moz-transform 0.3s, opacity 0.3s; transition: transform 0.3s, opacity 0.3s; pointer-events: none; } .cl-effect-17 a::after { content: ''; position: absolute; left: 0; bottom: 0; width: 100%; height: 2px; background: #fff; opacity: 0; -webkit-transform: translateY(5px); -moz-transform: translateY(5px); transform: translateY(5px); -webkit-transition: -webkit-transform 0.3s, opacity 0.3s; -moz-transition: -moz-transform 0.3s, opacity 0.3s; transition: transform 0.3s, opacity 0.3s; pointer-events: none; } .cl-effect-17 a:hover::before, .cl-effect-17 a:focus::before { opacity: 0; -webkit-transform: translateY(-2px); -moz-transform: translateY(-2px); transform: translateY(-2px); } .cl-effect-17 a:hover::after, .cl-effect-17 a:focus::after { opacity: 1; -webkit-transform: translateY(0px); -moz-transform: translateY(0px); transform: translateY(0px); } /* Effect 18: cross */ .cl-effect-18 .menu-parent-link { top: 2px; } .cl-effect-18 li > a { max-height: inherit !important; } .cl-effect-18 { position: relative; z-index: 1; } .cl-effect-18 a { padding: 0 5px; color: #b4770d; font-weight: 500; -webkit-transition: color 0.3s; -moz-transition: color 0.3s; transition: color 0.3s; } .cl-effect-18 a::before, .cl-effect-18 a::after { position: absolute; width: 100%; left: 0; top: 50%; height: 2px; margin-top: -1px; background: rgba(255, 255, 255, 0.15); content: ''; z-index: -1; -webkit-transition: -webkit-transform 0.3s, opacity 0.3s; -moz-transition: -moz-transform 0.3s, opacity 0.3s; transition: transform 0.3s, opacity 0.3s; pointer-events: none; } .header-color-black .cl-effect-18 a::before, .header-color-black .cl-effect-18 a::after { background: rgba(000, 000, 000, 0.15); } .cl-effect-18 a::before { -webkit-transform: translateY(-20px); -moz-transform: translateY(-20px); transform: translateY(-20px); } .cl-effect-18 a::after { -webkit-transform: translateY(20px); -moz-transform: translateY(20px); transform: translateY(20px); } .cl-effect-18 a:hover, .cl-effect-18 a:focus { color: #fff; } .cl-effect-18 a:hover::before, .cl-effect-18 a:hover::after, .cl-effect-18 a:focus::before, .cl-effect-18 a:focus::after { opacity: 0.7; } .cl-effect-18 a:hover::before, .cl-effect-18 a:focus::before { -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); transform: rotate(45deg); } .cl-effect-18 a:hover::after, .cl-effect-18 a:focus::after { -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); transform: rotate(-45deg); } /* Effect 19: 3D side */ .cl-effect-19 a { line-height: 2em; margin: 15px; -webkit-perspective: 800px; -moz-perspective: 800px; perspective: 800px; width: 200px; } .cl-effect-19 a span { position: relative; display: inline-block; width: 100%; padding: 0 14px; background: #e35041; -webkit-transition: -webkit-transform 0.4s, background 0.4s; -moz-transition: -moz-transform 0.4s, background 0.4s; transition: transform 0.4s, background 0.4s; -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-transform-origin: 50% 50% -100px; -moz-transform-origin: 50% 50% -100px; transform-origin: 50% 50% -100px; } .csstransforms3d .cl-effect-19 a span::before { position: absolute; top: 0; left: 100%; width: 100%; height: 100%; background: #b53a2d; content: attr(data-hover); -webkit-transition: background 0.4s; -moz-transition: background 0.4s; transition: background 0.4s; -webkit-transform: rotateY(90deg); -moz-transform: rotateY(90deg); transform: rotateY(90deg); -webkit-transform-origin: 0 50%; -moz-transform-origin: 0 50%; transform-origin: 0 50%; pointer-events: none; } .cl-effect-19 a:hover span, .cl-effect-19 a:focus span { background: #b53a2d; -webkit-transform: rotateY(-90deg); -moz-transform: rotateY(-90deg); transform: rotateY(-90deg); } .csstransforms3d .cl-effect-19 a:hover span::before, .csstransforms3d .cl-effect-19 a:focus span::before { background: #ef5e50; } /* Effect 20: 3D side */ .cl-effect-20 a { line-height: 2em; -webkit-perspective: 800px; -moz-perspective: 800px; perspective: 800px; } .cl-effect-20 a span { position: relative; display: inline-block; padding: 3px 15px 0; background: #587285; box-shadow: inset 0 3px #2f4351; -webkit-transition: background 0.6s; -moz-transition: background 0.6s; transition: background 0.6s; -webkit-transform-origin: 50% 0; -moz-transform-origin: 50% 0; transform-origin: 50% 0; -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-transform-origin: 0% 50%; -moz-transform-origin: 0% 50%; transform-origin: 0% 50%; } .cl-effect-20 a span::before { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #fff; color: #2f4351; content: attr(data-hover); -webkit-transform: rotateX(270deg); -moz-transform: rotateX(270deg); transform: rotateX(270deg); -webkit-transition: -webkit-transform 0.6s; -moz-transition: -moz-transform 0.6s; transition: transform 0.6s; -webkit-transform-origin: 0 0; -moz-transform-origin: 0 0; transform-origin: 0 0; pointer-events: none; } .cl-effect-20 a:hover span, .cl-effect-20 a:focus span { background: #2f4351; } .cl-effect-20 a:hover span::before, .cl-effect-20 a:focus span::before { -webkit-transform: rotateX(10deg); -moz-transform: rotateX(10deg); transform: rotateX(10deg); } /* Effect 21: borders slight translate */ .cl-effect-21 a { padding: 10px; color: #237546; font-weight: 500; text-shadow: none; -webkit-transition: color 0.3s; -moz-transition: color 0.3s; transition: color 0.3s; } .cl-effect-21 a::before, .cl-effect-21 a::after { position: absolute; left: 0; width: 100%; height: 2px; background: #fff; content: ''; opacity: 0; -webkit-transition: opacity 0.3s, -webkit-transform 0.3s; -moz-transition: opacity 0.3s, -moz-transform 0.3s; transition: opacity 0.3s, transform 0.3s; -webkit-transform: translateY(-10px); -moz-transform: translateY(-10px); transform: translateY(-10px); } .cl-effect-21 a::before { top: 0; -webkit-transform: translateY(-10px); -moz-transform: translateY(-10px); transform: translateY(-10px); } .cl-effect-21 a::after { bottom: 0; -webkit-transform: translateY(10px); -moz-transform: translateY(10px); transform: translateY(10px); } .cl-effect-21 a:hover, .cl-effect-21 a:focus { color: #fff; } .cl-effect-21 a:hover::before, .cl-effect-21 a:focus::before, .cl-effect-21 a:hover::after, .cl-effect-21 a:focus::after { opacity: 1; -webkit-transform: translateY(0px); -moz-transform: translateY(0px); transform: translateY(0px); } /*Subscriber*/ /*SEARCH*/ .header-subscribe { position: fixed; top: 0; left: 0; display: block; visibility: hidden; width: 100%; height: 100vh; background-color: rgba(34, 34, 34, 0.95); opacity: 0; z-index: 9999; transition: all 0.3s ease 0s; } .header-subscribe.open { visibility: visible; opacity: 1; } .header-subscribe .close { position: absolute; top: 0; right: 0; width: 60px; height: 60px; font-size: 18px; border: none; background-color: #fff !important; opacity: 1 !important; z-index: 999; } .admin-bar .header-subscribe .close { top: 35px; } .header-subscribe .close * { color: #000 !important; } .header-subscribe .search-open { float: right; height: 40px; padding-top: 6px; padding-left: 22px; font-size: 14px; color: #666; background-color: #fff; } .header-subscribe.open { visibility: visible; opacity: 1; } .header-subscribe .search-global { position: absolute; top: 50vh; margin-top: -120px; } .header-subscribe .search-global__input { width: 100%; color: #fff; border: none; border-bottom: 1px solid #919191 !important; background-color: transparent; opacity: 1; height: auto !important; padding: 0 !important; padding-bottom: 23px !important; padding-right: 40px !important; font-size: 70px; font-weight: bold; font-family: arial; line-height: 74px; } .header-subscribe .search-global__input::-moz-placeholder { color: #fff; } .header-subscribe .search-global__input:-ms-input-placeholder { color: #fff; } .header-subscribe .search-global__input::-webkit-input-placeholder { color: #fff; } .header-subscribe .search-global__input:focus { outline-style: none; } .header-subscribe .search-global__btn { position: absolute; top: 17px; right: 16px; font-size: 42px; color: #fff; border: none; background-color: transparent; transition: all 0.3s; } .header-subscribe .search-global__note { margin-top: 20px; font-family: sans-serif; font-size: 14pxm; color: #555; } .btn_header_subscribe { border: 1px solid #fff; padding: 5px 20px; cursor: pointer; color: #fff; font-weight: 500; text-transform: uppercase; margin-top: 20px; display: inline-block; -ms-transition: all .3s ease-out; -o-transition: all .3s ease-out; transition: all .3s ease-out; } .btn_header_subscribe:hover { color: #2796de; border-color: #2796de; } .countdown-vc h3 { font-size: 30px; color: #fff; line-height: 1.7; padding: 0 !important; margin: 0 !important; } #note { text-align: center; font-size: 20px; color: #fff; line-height: 1.7; } .countdown-wrap { display: inline-block; text-align: center; width: 100%; } .countdown-vc { padding: 50px; background: rgba( 0, 0, 0, 0.7); display: inline-block; margin: 0 auto; max-width: 1000px; } html #main-menu li .dropdown-menu { border-top: 0; } /* FW MENU*/ /* Fullscreen menu*/ .fullscreen-center-menu { display: inline-block; width: 100%; height: 100%; padding-top: 10%; text-align: center; } #fixedMenuMobile .fullscreen-center-menu { padding-top: 10px; } .fullscreen-center-menu nav, .fullscreen-center-menu ul { padding: 0; display: inline-block; margin: 0 auto; float: none; width: 100%; } .menu-top-container { display: inline-block; margin: 0 auto; } .fullscreen-center-menu li { width: 100%; text-align: center; font-size: 34px; position: relative; font-weight: 300; } @media (min-width:768px) { .fullscreen-center-menu li , .fullscreen-center-menu li a { display: inline-block; } } #fixedMenuMobile .fullscreen-center-menu li { font-size: 20px; font-weight: 300; } .fullscreen-center-menu li a { -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; transition: all 0.3s ease-out; color: #fff; position: relative; z-index: 88; margin-bottom: 0; } #fixedMenuMobile .fullscreen-center-menu li a { word-break: break-word; } .fullscreen-center-menu li.full-width { display: none !important; } .fw-close { position: absolute; top: 0; right: 0; width: 60px; height: 60px; font-size: 18px; border: none; background-color: #fff !important; opacity: 1 !important; z-index: 999; transition: all 0.3s; } .fw-close:hover, .fw-close:active, .fw-close:focus { color: inherit; } .fullscreen-center-menu .submenu-controll-inner, .fullscreen-center-menu .submenu-controll { display: none !important; } .fullscreen-center-menu .sub-menu {} .fullscreen-center-menu .menu-item-has-children:hover .sub-menu { position: relative; top: 0; visibility: visible; display: block; } .fullscreen-center-menu .sub-menu a { font-size: 18px; } .fullscreen-center-menu .sub-menu .sub-menu a { font-size: 14px; } .submenu-controll-fullscreen { display: inline-block; width: 100%; position: absolute; top: 32px; left: 0; color: #fff; } ul ul .submenu-controll-fullscreen { top: 22px; } /*Bootstrap Reset*/ .nav>li>a:focus, .nav>li>a:hover { text-decoration: none !important; background: none !important; } /*Other*/ .header-social-link { position: relative; top: -2px; } .header-social-link a { font-size: 16px !important; padding: 0 5px !important; } /* Promo set*/ .promo-set { position: fixed; bottom: 20px; right: 20px; padding: 0; z-index: 99999; transition: all 0.3s ease-out; -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; } .promo-set a { color: #fff !important; } .promo-set a:hover { box-shadow: 0px 0px 3px #000; text-decoration: none; } .envato-promo-link { background: #6f9a37; border-radius: 100px; padding: 10px; width: 70px; height: 70px; text-align: center; display: inline-block; line-height: 45px; color: #fff; font-weight: bold; font-size: 23px; opacity: 0.9; } .currency-promo { position: relative; font-size: 14px; top: -10px; left: -3px; margin-left: -4px; } .envato-logo-small { background: #6f9a37 url(images/envato-small.png) center center no-repeat; width: 50px; height: 50px; border-radius: 100px; padding: 10px; display: inline-block; position: relative; top: 30px; right: -20px; } .promo-set-icon { background: #393939; width: 50px; height: 50px; border-radius: 100px; padding: 13px; display: inline-block; text-align: center; font-size: 12px; top: 13px; position: relative; left: 10px; } .header-search-icon a, .header-cart a { border: 0 !important; text-decoration: none !important; } html .phone-num { position: relative; top: -1px; } html .header-phone { margin-left: 10px; margin-top: 3px !important; padding-right: 20px; } html .header .navbar .navbar-nav > li .toggle-menu-button { margin-top: 0 !important; margin-left: 5px; } html .woocommerce ul.products li.product h3 { font-weight: 700; } html .header-cart { margin: -2px 18px 35px 19px; font-size: 20px; position: relative; text-align: center; display: inline-block; width: 25px; box-sizing: border-box; max-height: 23px; } html .header-cart a { font-size: 20px; } html .header-cart-count { background: #ff9801 !important; } .pix-hidden-custom-link { display: none; } html .header-cart-count { position: absolute; top: -8px; right: -12px; padding: 4px 4px 4px 4px; border-radius: 100px; font-size: 9px; width: 16px; height: 16px; line-height: 8px; display: inline-block; text-align: center; color: #fff; font-weight: normal; } .is-open .toggle-menu-button-icon span:nth-child(2n), .is-open .toggle-menu-button-icon span:nth-child(4n), .is-open .toggle-menu-button-icon span:nth-child(6n), .slidebar-nav-panel .toggle-menu-button-icon span:nth-child(2n), .slidebar-nav-panel .toggle-menu-button-icon span:nth-child(4n), .slidebar-nav-panel .toggle-menu-button-icon span:nth-child(6n) { max-width: 50%; } .toggle-menu-button-icon span:nth-child(2n) { max-width: 35%; } .toggle-menu-button-icon span:nth-child(4n) { max-width: 45%; } .toggle-menu-button-icon span:nth-child(6n) { max-width: 50%; } /* Common styles of menus */ .fullscreen-center-menu, .fullscreen-center-menu .menu-main-menu-container, .slidebar-nav-menu, .fullscreen-center-menu nav { width: 100%; height: 100%; } .dl-menuwrapper .theme-fonts-arrow_carrot-right { position: relative; top: 3px; margin-right: -10px; } #fixedMenuMobile .dl-menuwrapper .dl-menu { padding-bottom: 50px; } .dl-menuwrapper .dl-menu { height: 100%; position: relative; } @media (min-width:768px) { width: auto !important; } .dl-menuwrapper { width: 100%; position: relative; -webkit-perspective: 1000px; perspective: 1000px; -webkit-perspective-origin: 50% 200%; perspective-origin: 50% 200%; min-height: 300px; } .dl-menuwrapper button { background: #ccc; border: none; width: 48px; height: 45px; text-indent: -900em; overflow: hidden; position: relative; cursor: pointer; outline: none; } .dl-menuwrapper button:hover, .dl-menuwrapper button.dl-active, .dl-menuwrapper ul { background: none !important; outline: none !important; } .dl-menuwrapper * { background: none !important; outline: none !important; } .dl-menuwrapper button:after { content: ''; position: absolute; width: 68%; height: 5px; background: #fff; top: 10px; left: 16%; box-shadow: 0 10px 0 #fff, 0 20px 0 #fff; } .dl-menuwrapper ul { padding: 0; list-style: none; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; justify-content: center; flex-direction: column; } .dl-menuwrapper li { position: relative; } .dl-back a { padding: 0px 7px !important; font-size: 20px; color: #fff; line-height: 30px; } .dl-back a::before { display: none !important; } .dl-back [class^="theme-fonts-"] { font-size: 40px !important; } .dl-menuwrapper li.dl-back:after { left: 10px; color: rgba(212, 204, 198, 0.3); -webkit-transform: rotate(180deg); transform: rotate(180deg); } .dl-menuwrapper li > a:after { right: 4px; top: 6px !important; color: #eeeeee; } .dl-menuwrapper .dl-menu.dl-menu-toggle { transition: all 0.3s ease; } .dl-menuwrapper .dl-menu.dl-menuopen { opacity: 1; pointer-events: auto; -webkit-transform: translateY(0px); transform: translateY(0px); } /* Hide the inner submenus */ .dl-menuwrapper li .dl-submenu { display: none; max-height: 500px; overflow: auto; } /* When a submenu is openend, we will hide all li siblings. For that we give a class to the parent menu called "dl-subview". We also hide the submenu link. The opened submenu will get the class "dl-subviewopen". All this is done for any sub-level being entered. */ .dl-menu.dl-subview li, .dl-menu.dl-subview li.dl-subviewopen > a, .dl-menu.dl-subview li.dl-subview > a { display: none; } .dl-menu.dl-subview li.dl-subview, .dl-menu.dl-subview li.dl-subview .dl-submenu, .dl-menu.dl-subview li.dl-subviewopen, .dl-menu.dl-subview li.dl-subviewopen > .dl-submenu, .dl-menu.dl-subview li.dl-subviewopen > .dl-submenu > li { display: block; } /* Dynamically added submenu outside of the menu context */ .dl-menuwrapper > .dl-submenu { position: absolute; width: 100%; top: 0px; left: 0; margin: 0; } /* Animation classes for moving out and in */ .dl-menu.dl-animate-out-1 { -webkit-animation: MenuAnimOut1 0.4s; animation: MenuAnimOut1 0.4s; } .dl-menu.dl-animate-out-2 { -webkit-animation: MenuAnimOut2 0.3s ease-in-out; animation: MenuAnimOut2 0.3s ease-in-out; } .dl-menu.dl-animate-out-3 { -webkit-animation: MenuAnimOut3 0.4s ease; animation: MenuAnimOut3 0.4s ease; } .dl-menu.dl-animate-out-4 { -webkit-animation: MenuAnimOut4 0.4s ease; animation: MenuAnimOut4 0.4s ease; } .dl-menu.dl-animate-out-5 { -webkit-animation: MenuAnimOut5 0.4s ease; animation: MenuAnimOut5 0.4s ease; } @-webkit-keyframes MenuAnimOut1 { 0% {} 50% { -webkit-transform: translateZ(-250px) rotateY(30deg); } 75% { -webkit-transform: translateZ(-372.5px) rotateY(15deg); opacity: .5; } 100% { -webkit-transform: translateZ(-500px) rotateY(0deg); opacity: 0; } } @-webkit-keyframes MenuAnimOut2 { 0% {} 100% { -webkit-transform: translateX(-100%); opacity: 0; } } @-webkit-keyframes MenuAnimOut3 { 0% {} 100% { -webkit-transform: translateZ(300px); opacity: 0; } } @-webkit-keyframes MenuAnimOut4 { 0% {} 100% { -webkit-transform: translateZ(-300px); opacity: 0; } } @-webkit-keyframes MenuAnimOut5 { 0% {} 100% { -webkit-transform: translateY(40%); opacity: 0; } } @keyframes MenuAnimOut1 { 0% {} 50% { -webkit-transform: translateZ(-250px) rotateY(30deg); transform: translateZ(-250px) rotateY(30deg); } 75% { -webkit-transform: translateZ(-372.5px) rotateY(15deg); transform: translateZ(-372.5px) rotateY(15deg); opacity: .5; } 100% { -webkit-transform: translateZ(-500px) rotateY(0deg); transform: translateZ(-500px) rotateY(0deg); opacity: 0; } } @keyframes MenuAnimOut2 { 0% {} 100% { -webkit-transform: translateX(-100%); transform: translateX(-100%); opacity: 0; } } @keyframes MenuAnimOut3 { 0% {} 100% { -webkit-transform: translateZ(300px); transform: translateZ(300px); opacity: 0; } } @keyframes MenuAnimOut4 { 0% {} 100% { -webkit-transform: translateZ(-300px); transform: translateZ(-300px); opacity: 0; } } @keyframes MenuAnimOut5 { 0% {} 100% { -webkit-transform: translateY(40%); transform: translateY(40%); opacity: 0; } } .dl-menu.dl-animate-in-1 { -webkit-animation: MenuAnimIn1 0.3s; animation: MenuAnimIn1 0.3s; } .dl-menu.dl-animate-in-2 { -webkit-animation: MenuAnimIn2 0.3s ease-in-out; animation: MenuAnimIn2 0.3s ease-in-out; } .dl-menu.dl-animate-in-3 { -webkit-animation: MenuAnimIn3 0.4s ease; animation: MenuAnimIn3 0.4s ease; } .dl-menu.dl-animate-in-4 { -webkit-animation: MenuAnimIn4 0.4s ease; animation: MenuAnimIn4 0.4s ease; } .dl-menu.dl-animate-in-5 { -webkit-animation: MenuAnimIn5 0.4s ease; animation: MenuAnimIn5 0.4s ease; } @-webkit-keyframes MenuAnimIn1 { 0% { -webkit-transform: translateZ(-500px) rotateY(0deg); opacity: 0; } 20% { -webkit-transform: translateZ(-250px) rotateY(30deg); opacity: 0.5; } 100% { -webkit-transform: translateZ(0px) rotateY(0deg); opacity: 1; } } @-webkit-keyframes MenuAnimIn2 { 0% { -webkit-transform: translateX(-100%); opacity: 0; } 100% { -webkit-transform: translateX(0px); opacity: 1; } } @-webkit-keyframes MenuAnimIn3 { 0% { -webkit-transform: translateZ(300px); opacity: 0; } 100% { -webkit-transform: translateZ(0px); opacity: 1; } } @-webkit-keyframes MenuAnimIn4 { 0% { -webkit-transform: translateZ(-300px); opacity: 0; } 100% { -webkit-transform: translateZ(0px); opacity: 1; } } @-webkit-keyframes MenuAnimIn5 { 0% { -webkit-transform: translateY(40%); opacity: 0; } 100% { -webkit-transform: translateY(0); opacity: 1; } } @keyframes MenuAnimIn1 { 0% { -webkit-transform: translateZ(-500px) rotateY(0deg); transform: translateZ(-500px) rotateY(0deg); opacity: 0; } 20% { -webkit-transform: translateZ(-250px) rotateY(30deg); transform: translateZ(-250px) rotateY(30deg); opacity: 0.5; } 100% { -webkit-transform: translateZ(0px) rotateY(0deg); transform: translateZ(0px) rotateY(0deg); opacity: 1; } } @keyframes MenuAnimIn2 { 0% { -webkit-transform: translateX(-100%); transform: translateX(-100%); opacity: 0; } 100% { -webkit-transform: translateX(0px); transform: translateX(0px); opacity: 1; } } @keyframes MenuAnimIn3 { 0% { -webkit-transform: translateZ(300px); transform: translateZ(300px); opacity: 0; } 100% { -webkit-transform: translateZ(0px); transform: translateZ(0px); opacity: 1; } } @keyframes MenuAnimIn4 { 0% { -webkit-transform: translateZ(-300px); transform: translateZ(-300px); opacity: 0; } 100% { -webkit-transform: translateZ(0px); transform: translateZ(0px); opacity: 1; } } @keyframes MenuAnimIn5 { 0% { -webkit-transform: translateY(40%); transform: translateY(40%); opacity: 0; } 100% { -webkit-transform: translateY(0); transform: translateY(0); opacity: 1; } } .dl-menuwrapper > .dl-submenu.dl-animate-in-1 { -webkit-animation: SubMenuAnimIn1 0.4s ease; animation: SubMenuAnimIn1 0.4s ease; } .dl-menuwrapper > .dl-submenu.dl-animate-in-2 { -webkit-animation: SubMenuAnimIn2 0.3s ease-in-out; animation: SubMenuAnimIn2 0.3s ease-in-out; } .dl-menuwrapper > .dl-submenu.dl-animate-in-3 { -webkit-animation: SubMenuAnimIn3 0.4s ease; animation: SubMenuAnimIn3 0.4s ease; } .dl-menuwrapper > .dl-submenu.dl-animate-in-4 { -webkit-animation: SubMenuAnimIn4 0.4s ease; animation: SubMenuAnimIn4 0.4s ease; } .dl-menuwrapper > .dl-submenu.dl-animate-in-5 { -webkit-animation: SubMenuAnimIn5 0.4s ease; animation: SubMenuAnimIn5 0.4s ease; } @-webkit-keyframes SubMenuAnimIn1 { 0% { -webkit-transform: translateX(50%); opacity: 0; } 100% { -webkit-transform: translateX(0px); opacity: 1; } } @-webkit-keyframes SubMenuAnimIn2 { 0% { -webkit-transform: translateX(100%); opacity: 0; } 100% { -webkit-transform: translateX(0px); opacity: 1; } } @-webkit-keyframes SubMenuAnimIn3 { 0% { -webkit-transform: translateZ(-300px); opacity: 0; } 100% { -webkit-transform: translateZ(0px); opacity: 1; } } @-webkit-keyframes SubMenuAnimIn4 { 0% { -webkit-transform: translateZ(300px); opacity: 0; } 100% { -webkit-transform: translateZ(0px); opacity: 1; } } @-webkit-keyframes SubMenuAnimIn5 { 0% { -webkit-transform: translateZ(-200px); opacity: 0; } 100% { -webkit-transform: translateZ(0); opacity: 1; } } @keyframes SubMenuAnimIn1 { 0% { -webkit-transform: translateX(50%); transform: translateX(50%); opacity: 0; } 100% { -webkit-transform: translateX(0px); transform: translateX(0px); opacity: 1; } } @keyframes SubMenuAnimIn2 { 0% { -webkit-transform: translateX(100%); transform: translateX(100%); opacity: 0; } 100% { -webkit-transform: translateX(0px); transform: translateX(0px); opacity: 1; } } @keyframes SubMenuAnimIn3 { 0% { -webkit-transform: translateZ(-300px); transform: translateZ(-300px); opacity: 0; } 100% { -webkit-transform: translateZ(0px); transform: translateZ(0px); opacity: 1; } } @keyframes SubMenuAnimIn4 { 0% { -webkit-transform: translateZ(300px); transform: translateZ(300px); opacity: 0; } 100% { -webkit-transform: translateZ(0px); transform: translateZ(0px); opacity: 1; } } @keyframes SubMenuAnimIn5 { 0% { -webkit-transform: translateZ(-200px); transform: translateZ(-200px); opacity: 0; } 100% { -webkit-transform: translateZ(0); transform: translateZ(0); opacity: 1; } } .dl-menuwrapper > .dl-submenu.dl-animate-out-1 { -webkit-animation: SubMenuAnimOut1 0.4s ease; animation: SubMenuAnimOut1 0.4s ease; } .dl-menuwrapper > .dl-submenu.dl-animate-out-2 { -webkit-animation: SubMenuAnimOut2 0.3s ease-in-out; animation: SubMenuAnimOut2 0.3s ease-in-out; } .dl-menuwrapper > .dl-submenu.dl-animate-out-3 { -webkit-animation: SubMenuAnimOut3 0.4s ease; animation: SubMenuAnimOut3 0.4s ease; } .dl-menuwrapper > .dl-submenu.dl-animate-out-4 { -webkit-animation: SubMenuAnimOut4 0.4s ease; animation: SubMenuAnimOut4 0.4s ease; } .dl-menuwrapper > .dl-submenu.dl-animate-out-5 { -webkit-animation: SubMenuAnimOut5 0.4s ease; animation: SubMenuAnimOut5 0.4s ease; } @-webkit-keyframes SubMenuAnimOut1 { 0% { -webkit-transform: translateX(0%); opacity: 1; } 100% { -webkit-transform: translateX(50%); opacity: 0; } } @-webkit-keyframes SubMenuAnimOut2 { 0% { -webkit-transform: translateX(0%); opacity: 1; } 100% { -webkit-transform: translateX(100%); opacity: 0; } } @-webkit-keyframes SubMenuAnimOut3 { 0% { -webkit-transform: translateZ(0px); opacity: 1; } 100% { -webkit-transform: translateZ(-300px); opacity: 0; } } @-webkit-keyframes SubMenuAnimOut4 { 0% { -webkit-transform: translateZ(0px); opacity: 1; } 100% { -webkit-transform: translateZ(300px); opacity: 0; } } @-webkit-keyframes SubMenuAnimOut5 { 0% { -webkit-transform: translateZ(0); opacity: 1; } 100% { -webkit-transform: translateZ(-200px); opacity: 0; } } @keyframes SubMenuAnimOut1 { 0% { -webkit-transform: translateX(0%); transform: translateX(0%); opacity: 1; } 100% { -webkit-transform: translateX(50%); transform: translateX(50%); opacity: 0; } } @keyframes SubMenuAnimOut2 { 0% { -webkit-transform: translateX(0%); transform: translateX(0%); opacity: 1; } 100% { -webkit-transform: translateX(100%); transform: translateX(100%); opacity: 0; } } @keyframes SubMenuAnimOut3 { 0% { -webkit-transform: translateZ(0px); transform: translateZ(0px); opacity: 1; } 100% { -webkit-transform: translateZ(-300px); transform: translateZ(-300px); opacity: 0; } } @keyframes SubMenuAnimOut4 { 0% { -webkit-transform: translateZ(0px); transform: translateZ(0px); opacity: 1; } 100% { -webkit-transform: translateZ(300px); transform: translateZ(300px); opacity: 0; } } @keyframes SubMenuAnimOut5 { 0% { -webkit-transform: translateZ(0); transform: translateZ(0); opacity: 1; } 100% { -webkit-transform: translateZ(-200px); transform: translateZ(-200px); opacity: 0; } } /* No JS Fallback */ .no-js .dl-menuwrapper .dl-menu { position: relative; opacity: 1; -webkit-transform: none; transform: none; } .no-js .dl-menuwrapper li .dl-submenu { display: block; } .no-js .dl-menuwrapper li.dl-back { display: none; } .no-js .dl-menuwrapper li > a:not(:only-child) { background: rgba(0, 0, 0, 0.1); } .no-js .dl-menuwrapper li > a:not(:only-child):after { content: ''; } #dl-menu .arrow_carrot-right, #dl-menu .arrow_carrot-left { font-size: 28px; } .dl-back { margin-bottom: -5px; } .menu-marker-arrow .menu-item-has-children { margin-right: 10px !important; } /* Header advanced */ .header.header-advanced .top-bar, .header.header-advanced .header-navibox-2 { border-bottom: 0 !important; background: #1e2126 !important; } .header.header-advanced .navbar .toggle-menu-button .toggle-menu-button-icon span { background: #222; } .header.header-advanced.navbar-fixed-top .top-bar *, .header.header-advanced .header-navibox-2 .yamm li > a { color: #fff !important; } .header.header-advanced.navbar-fixed-top { margin-bottom: -7px; width: 100%; display: inline-block; height: 247px; } .header.header-advanced.navbar-fixed-top, .header.header-advanced #nav { background: transparent; } .header.header-advanced.navbar-fixed-top .header-navibox-2 { background: rgba( 30, 33, 38, 0.9) !important; } .header.header-advanced.navbar-fixed-top .header-navibox-2 .container{ padding-left: 0 !important; padding-right: 0 !important; } .header.header-advanced.navbar-fixed-top .navbar { background: #fff !important; padding: 15px 0; } .header.header-advanced.navbar-fixed-top .header-navibox-2 { display: inline-block; width: 100%; float: none; border-bottom: 1px solid #eeeeee; border-top: 0; } .navbar-scrolling.header.header-advanced .navbar { display: none !important; } .header.header-advanced.navbar-fixed-top .header-navibox-2 { display: inline-block; width: 100%; float: none; border-bottom: 0; border-top: 0; } .header.header-advanced.navbar-fixed-to, .header.header-advanced #nav { background: transparent; position: relative; top: 0 !important; } .header.header-advanced .header-navibox-2 .main-menu > li > a { padding: 15px 15px 10px 15px !important; } .header.header-advanced .menu-parent-link { display: inline-block; position: relative; width: 100%; top: 0; left: 10px; color: #fff !important; } .header.header-advanced .header-navibox-2 .main-menu .dropdown-menu a { color: #000 !important; } .header.header-advanced .phone-menu li { background: #efb700 !important; padding: 15px 20px; color: #fff; margin-top: -18px; } html body .header.header-advanced .submenu-controll { right: 12px; top: -40px; color: #fff; } html body .header.header-advanced.navbar-fixed-top { position: relative !important; } html body .header.header-advanced.navbar-fixed-top.navbar-scrolling .header-navibox-2 { position: fixed !important; top: 0; left: 0; width: 100%; } html body .header.header-advanced.navbar-fixed-top.navbar-sticky-top { position: relative !important; } .nav-custom-info-wrap { float: right; padding: 9px 0 0 0; } .nav-custom-info { display: inline-block; vertical-align: top; padding-left: 20px; padding-right: 20px; } .nav-custom-info .striped-icon-nav { font-size: 24px; position: relative; z-index: 2; width: 60px; height: 60px; margin: auto; cursor: pointer; -webkit-transition: all .2s; -o-transition: all .2s; transition: all .2s; text-align: center; border-radius: 50%; line-height: 56px; background: none; border: 2px dotted #D0D0D2; float: left; margin-right: 20px; } .header_type5_block1_content { float: left; padding-top: 22px; } .header_type5_rblock_link a { color: #fff !important; } /* Half menu */ .tmplhalf-menu { display: inline-block; vertical-align: top; padding: 35px 0 0; } .header .navbar-brand .normal-logo { display: none; } .tmpl-half-menu-left { width: 33%; text-align: right; padding-right: 0; } .tmpl-half-menu-right { width: 33%; text-align: left; padding-left: 0; } .tmpl-half-menu-middle { width: 33%; text-align: center; max-height: 90px; margin-top: 0 !important; padding-top: 0 !important; position: relative; z-index: 99; } .tmpl-half-menu-right .header-navibox-2 { float: left !important; } .tmpl-half-menu-middle img { display: inline-block; margin: 0 auto; } .header.header-tmplhalf-menu .navbar-brand { float: none; position: relative; height: auto; padding: 0; font-size: 18px; line-height: 20px; margin-top: 0; padding-right: 0; max-width: 209px; display: inline-block; } .header.header-tmplhalf-menu .header-navibox-2 .main-menu > li > a { padding: 0 !important; } .header-decore-bottom { position: absolute; bottom: -24px; left: 0; width: 100%; } .header.header-tmplhalf-menu .navbar { border-bottom: 0 !important; } .header #path1488 { fill: #fff !important; }