.header_top_bg { position: relative; z-index: auto; background-color: var(--light-color); } .error404 .header_top_bg.only_logo header { text-align: center; } .filter-overlay .header_top_bg { pointer-events: none; } .header_top_bg.transparent_menu { position: absolute; z-index: auto; background-color: transparent; width: 100% ; } .header_gradient { background-color: transparent !important; } .header_top_bg.fixed-header { position: fixed; top: 0; width: 100%; z-index: 100; } .header-gradient-item { position: absolute; left: 0; top: 0; width: 100%; height: calc(100% + 100px); transition: 0.35s; pointer-events: none; } .header-gradient-bg { position: absolute; left: 0; top: 0; opacity: 0; width: 100%; height: 100%; transition: 0.35s; } .bg-fixed-color .header-gradient-item { height: 100%; } .bg-fixed-color .header-gradient-bg { opacity: 1; } header { position: relative; width: 100%; z-index: 999; text-align: center; } header.absolute { position: absolute; margin-bottom: 0; } header a.logo { text-decoration: none; display: block; } header.zindex, footer.zindex { z-index: 1 !important; } .header_top_bg.enable_fixed.fixed { position: fixed; z-index: 1000; width: 100%; top: 0; } .header_trans-fixed.header_top_bg { background-color: transparent; position: fixed; z-index: 1000; top: 0; width: 100%; left: 0; } .header_trans-fixed.header_top_bg.open header .logo span { color: var(--dark-color); } .header_top_bg.only_logo .logo { display: inline-block; } .header_top_bg.only_logo.header-light .logo span { color: var(--light-color); } .header_top_bg.only_logo header { text-align: inherit; } #topmenu ul { list-style: none; margin: 0; padding: 0; display: inline-block; position: relative; } #topmenu ul li { display: inline-block; position: relative; } .header_top_bg .logo span { color: var(--dark-color); transition: 0.3s; font-size: 30px; font-weight: bold; text-transform: lowercase; } #topmenu ul ul { position: absolute; z-index: 999; left: 0; top: 50px; min-width: 250px; display: none; box-sizing: border-box; } #topmenu ul ul li::before { content: ''; display: table; clear: both; } #topmenu ul ul li a { padding: 3px 30px; display: block; width: 100%; position: relative; -webkit-font-smoothing: antialiased; } #topmenu > ul > li > ul > li:hover ul { display: block; } #topmenu > ul > li > ul > li > ul { left: 101%; top: -15px; } .mob-nav { display: none; width: 20px; height: 20px; margin: 0 auto 12px; font-size: 14px; color: var(--dark-color); opacity: 1; } .mob-nav:hover { opacity: 0.7; } .mob-nav-close { display: none; } .header_trans-fixed.header_top_bg { transition: background-color 300ms ease; } .header_trans-fixed.header_top_bg.bg-fixed-color { background-color: var(--light-color); } @media (min-width: 1025px) { header .logo img.logo-mobile { display: none !important; } header i.hide-drop { display: none; } } @media (max-width: 1024px) { .site-search { visibility: hidden; opacity: 0; } .sidebar-open .site-search { opacity: 1; visibility: visible; } } /*------------------------------------------------------*/ /*---------------------- MEGA MENU ----------------------*/ @media only screen and (min-width: 1025px) { header:not(.aside-menu):not(.full):not(.aside-animation).right-menu #topmenu ul .mega-menu > ul { width: 100%; display: flex; flex-wrap: wrap; left: auto; top: 75px; padding: 30px 0; min-width: 500px; right: -35px; } header:not(.aside-menu):not(.full):not(.aside-animation) #topmenu ul li.mega-menu > ul > li { width: calc(100% / 2); } header:not(.aside-menu):not(.full):not(.aside-animation) #topmenu ul li.mega-menu > ul > li:nth-child(1)::before { left: 25%; } header:not(.aside-menu):not(.full):not(.aside-animation) #topmenu ul li.mega-menu > ul > li:nth-child(2)::before { left: 50%; } header:not(.aside-menu):not(.full:not(.aside-animation)) #topmenu ul li.mega-menu > ul > li:nth-child(3)::before { left: 75%; } header:not(.aside-menu):not(.full):not(.aside-animation) #topmenu ul > li.mega-menu > ul.sub-menu > li > ul.sub-menu { display: block; position: static; text-align: left; min-width: 100%; box-shadow: none; padding: 0; padding-top: 19px; transition: all .2s ease; background-color: transparent; } header:not(.aside-menu):not(.full):not(.aside-animation) #topmenu ul > li.mega-menu > ul > li > ul.sub-menu > li { display: block; padding: 7px 0; } header:not(.aside-menu):not(.full):not(.aside-animation) #topmenu ul > li.mega-menu > ul > li > ul.sub-menu > li a { opacity: 0; -webkit-transform: matrix(1, 0, 0, 1, 0, 20); -ms-transform: matrix(1, 0, 0, 1, 0, 20); transform: matrix(1, 0, 0, 1, 0, 20); -webkit-transition: opacity .75s ease, -webkit-transform .75s ease; transition: opacity .75s ease, -webkit-transform .75s ease; -o-transition: opacity .75s ease, transform .75s ease; transition: opacity .75s ease, transform .75s ease; transition: opacity .75s ease, transform .75s ease, -webkit-transform .75s ease; font-size: 14px; font-weight: 600; } header:not(.aside-menu):not(.full):not(.aside-animation).right-menu #topmenu ul .mega-menu ul li { position: static; display: block; } header.top-menu #topmenu ul li.mega-menu > ul { top: calc(100% - 25px); } header.top-menu #topmenu ul li.mega-menu > ul > li::before { display: none; } header.top-menu #topmenu ul ul { left: 0; } header.top-menu #topmenu ul li.mega-menu > ul > li:nth-child(1)::before, header.top-menu #topmenu ul li.mega-menu > ul > li:nth-child(2)::before, header.top-menu #topmenu ul li.mega-menu > ul > li:nth-child(3)::before { left: 100%; display: block; top: 0; } } @media only screen and (min-width: 1025px) and (max-width: 1199px){ } /*------------------------------------------------------*/ /*---------------------- MOBILE MENU ----------------------*/ @media (max-width: 1024px) { .header_top_bg{ position: fixed; top: 0; width: 100%; z-index: 100; } .page-template-full-page-template .header_top_bg.fixed-header{ max-height: 90px; } header img.main-logo:not(.logo-mobile){ display: none!important; } header img.logo-mobile{ display: inline; padding: 10px 0; } .aside-menu.static #topmenu .f-right .copy { display: none; } .header_top_bg > .container { width: 100%; } #topmenu { overflow-x: hidden; } .header_trans-fixed.header_top_bg .mini-cart-wrapper .ono-shop-icon .cart-contents-count { color: var(--dark-color); } .header_trans-fixed.header_top_bg.white_bg_trans{ background-color: var(--light-color); } .header_trans-fixed.header_top_bg .aside-fix .logo.white_bg { padding: 0; } .main-wrapper { width: 100%; } .main-wrapper header .logo img { max-height: 75px; } header { padding: 20px 15px; } #topmenu ul li ul { box-shadow: none; font-style: normal; } #topmenu ul { box-shadow: none; font-style: normal; } .header_top_bg > .container > .row > .col-xs-12 { padding: 0; } .top-menu .logo { margin-bottom: 0; margin-top: 0; } .right-menu.aside-fix .mob-nav { display: flex; background-color: var(--light-color); width: 50px; height: 50px; border-radius: 50%; align-items: center; justify-content: center; } .no-padd-mob { padding: 0 !important; } .right-menu #topmenu .menu li.menu-item-has-children, #topmenu .menu li.menu-item-has-children { position: relative; text-align: left; } .right-menu #topmenu .menu li.menu-item-has-children i, #topmenu .menu li.menu-item-has-children i { position: absolute; top: 16px; right: 35px; color: var(--grey-color); } .right-menu #topmenu .menu li.menu-item-has-children > a, #topmenu .menu li.menu-item-has-children > a { position: relative; display: inline-block; width: auto!important; } .unit .mob-nav { left: 0; } .mob-nav { display: block; margin: 0; position: absolute; top: 50%; left: 0; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); } .mob-nav i::before { font-size: 24px; } .sidebar-open { height: 100vh; } .sidebar-open .canvas-wrap { left: 320px; } .sidebar-open .header_top_bg { position: fixed; } .main-wrapper { left: 0; transition: left .5s ease-in-out; } .filter-overlay .main-wrapper { z-index: 333; position: relative; background-color: var(--light-color); } .main-wrapper::before { content: ''; display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.75); z-index: 99; opacity: 0; visibility: hidden; -webkit-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; } .sidebar-open .main-wrapper { left: 320px; overflow: visible; } .sidebar-open .main-wrapper::before { opacity: 1; visibility: visible; } .mob-nav-close { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; text-decoration: none; border-bottom: 1px solid #f1f2f3; padding: 30px 0; color: var(--dark-color); } .mob-nav-close:hover { text-decoration: none; color: var(--dark-color); } .mob-nav-close span { font-size: 15px; font-weight: 600; letter-spacing: .2px; } .mob-nav-close .hamburger { padding: 0 35px; padding-left: 15px; } .mob-nav-close .line { display: block; width: 24px; height: 2px; background-color: var(--dark-color); } .mob-nav-close .line:first-of-type { -webkit-transform: rotate(45deg) translateY(2px); -moz-transform: rotate(45deg) translateY(2px); -ms-transform: rotate(45deg) translateY(2px); -o-transform: rotate(45deg) translateY(2px); transform: rotate(45deg) translateY(2px); } .mob-nav-close .line:last-of-type { -webkit-transform: rotate(-45deg) translateY(-1px); -moz-transform: rotate(-45deg) translateY(-1px); -ms-transform: rotate(-45deg) translateY(-1px); -o-transform: rotate(-45deg) translateY(-1px); transform: rotate(-45deg) translateY(-1px); } .header_trans-fixed.header_top_bg.header-split { background-color: var(--light-color); } #topmenu { display: inline-block; overflow-y: auto; position: fixed; text-align: left; padding-top: 0; padding-bottom: 100px; top: 0; bottom: 0; width: 320px; left: -320px; background-color: var(--light-color); height: 100vh; z-index: 100; transition: all .5s ease-in-out; background-image: none !important; } .sidebar-open #topmenu { position: fixed; left: 0; } #topmenu ul ul { display: none; position: static; } #topmenu ul.menu > li > ul > li > ul { display: none; } #topmenu ul.menu { width: 100%; display: inline-block; padding-bottom: 30px; background-color: var(--light-color); } #topmenu ul.menu li { display: block !important; float: none; text-align: left; margin-bottom: 0; } #topmenu ul.menu li a::before{ content: ''; position: absolute; bottom: 0; left: 0; width: 320px; height: 1px; display: block; background-color: #f1f2f3; } #topmenu ul.menu li a { font-size: 15px; font-weight: 500; letter-spacing: 0.2px; color: var(--grey-color); padding: 10px 35px; line-height: normal; display: inline-block; width: auto!important; float: none; transition: all 0.5s ease; text-decoration: none; } #topmenu ul.menu li li a { padding-left: 40px; } #topmenu ul.menu li li a { padding-left: 45px; } #topmenu ul.menu li li li a { padding-left: 50px; } #topmenu .menu li a:hover, #topmenu .menu .current-menu-parent > a, #topmenu .menu .current-menu-item > a, #topmenu .menu .current-menu-ancestor > a { color: var(--dark-color); } .right-menu #topmenu .social { display: block; } .right-menu #topmenu .social li { display: inline-block; } .right-menu #topmenu .social li a { padding: 5px; } .ono-top-social .social-icon { display: none; } .right-menu #topmenu .ono-top-social .social { position: static; visibility: visible; opacity: 1; } .header_trans-fixed.open .right-menu #topmenu .ono-top-social .social li a { color: var(--dark-color); } .mini-cart-wrapper { display: block; margin: 20px 10px 30px 10px; } .ono_mini_cart { opacity: 1; visibility: visible; position: relative; right: auto; left: 0; top: 10px; width: 100%; min-width: 0; } .aside-fix .logo.white_bg { background-color: var(--light-color); padding: 26px 77px; } .bg-fixed-color .aside-fix .logo.white_bg { background-color: var(--light-color); padding: 0 77px; } #topmenu ul li.mega-menu:hover > ul > li { width: 100%; } header a.logo { display: inline-block; padding-top: 5px; } #topmenu ul li.mega-menu:hover > ul > li { width: auto; } #topmenu.active-socials { left: 0; right: 0; overflow: visible; opacity: 1; width: 100%; } #topmenu .f-right { display: block; background: var(--light-color); padding: 15px; text-align: center; z-index: 9999; width: 100%; transition: all 350ms ease; } #topmenu .f-right.active-socials { opacity: 1; visibility: visible; } #topmenu .f-right.active-socials a { visibility: visible; } #topmenu .f-right .header_trans-fixed.open .right-menu #topmenu .ono-top-social .social li a { transition: none; } .socials-mob-but { display: block; margin: 0; position: absolute; top: calc(50% + -3px); right: 20px; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); } .socials-mob-but i::before { font-size: 24px; } #topmenu .social .fa, .mini-cart-wrapper .ono-shop-icon { font-size: 28px; transition: none; } .mini-cart-wrapper .ono-shop-icon { margin: 5px; } .mini-cart-wrapper { margin: 0; margin-top: -3px; } .header_trans-fixed.header_top_bg.open header .socials-mob-but i, .header_trans-fixed #topmenu .ono-top-social .social li a, .header_trans-fixed .mini-cart-wrapper .ono-shop-icon::before { color: var(--dark-color) !important; } .mini-cart-wrapper { display: inline-block; vertical-align: middle; display: none; } .ono_mini_cart { display: none; } .ono-top-social { vertical-align: middle; margin-bottom: 20px; font-size: 18px; } .aside-animation.static #topmenu .f-right .copy { text-transform: none; font-size: 15px; line-height: 1.57; color: var(--grey-color); margin-top: 35px; } .aside-animation.static .logo span i{ display: none; } .mini-cart-wrapper .ono-shop-icon:before { margin-top: -3px; font-size: 28px; } .header_trans-fixed.header_top_bg.open { background-color: var(--light-color); position: fixed; z-index: 1000; top: 0; width: 100%; } .header_trans-fixed.menu_light_text .right-menu.aside-fix .mob-nav { background-color: transparent; } .right-menu .mob-nav .line { width: 18px; height: 2px; background-color: var(--dark-color); display: block; float: left; margin: 3px auto; -webkit-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } .right-menu .mob-nav .hamburger { display: inline-block; width: 20px; } .right-menu .mob-nav .hamburger i { font-family: Poppins, sans-serif; font-style: normal; font-size: 15px; font-weight: 600; letter-spacing: .2px; } .header_trans-fixed.menu_light_text .right-menu .mob-nav .hamburger i { color: var(--light-color); } .header_trans-fixed .right-menu .mob-nav .hamburger i, .header_trans-fixed.bg-fixed-color .right-menu .mob-nav .hamburger i { color: var(--dark-color); } .header_trans-fixed.bg-fixed-dark .right-menu .mob-nav .hamburger i { color: var(--light-color); } .right-menu .mob-nav.active .line { margin: 0; background-color: var(--dark-color); } .right-menu .mob-nav.active .line:nth-of-type(2) { opacity: 0; } .right-menu .mob-nav.active .line:nth-of-type(1) { width: 24px; -webkit-transform: translateY(2px) rotate(45deg); -ms-transform: translateY(2px) rotate(45deg); -o-transform: translateY(2px) rotate(45deg); transform: translateY(2px) rotate(45deg); } .right-menu .mob-nav.active .line:nth-of-type(3) { width: 24px; -webkit-transform: translateY(-4px) rotate(-45deg); -ms-transform: translateY(-4px) rotate(-45deg); -o-transform: translateY(-4px) rotate(-45deg); transform: translateY(-4px) rotate(-45deg); } .right-menu .mob-nav .line:nth-of-type(2) { width: 24px; } } /*------------------------------------------------------*/ /*---------------------- STATIC ASIDE MENU ----------------------*/ .mCSB_container.mCS_no_scrollbar_y.mCS_y_hidden, .mCSB_inside > .mCSB_container { margin-right: 0; } @media only screen and (min-width: 1025px) { .aside-menu.static { position: fixed; top: 0; left: 0; } .aside-menu.static .topmenu { position: fixed; top: 0; height: 100%; width: 300px !important; padding: 50px 0; text-align: center; background-color: var(--light-color); box-sizing: border-box; outline: 0; z-index: 101; backface-visibility: hidden; transition: left 0.5s cubic-bezier(0.77, 0, 0.175, 1); } .aside-menu.static .logo { position: absolute; z-index: 9999; top: 20px; left: 31px; padding: 20px 0; } .aside-menu.static #topmenu .menu { display: inline-block; vertical-align: middle; overflow-y: auto; width: 100%; max-height: 100%; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 100; } .aside-menu.static #topmenu .menu li { padding: 7px 20px 7px 55px; position: static; text-align: left; display: block; } .aside-menu.static #topmenu .menu a { display: block; z-index: 9999; } .aside-menu.static #topmenu .f-right { float: none; position: absolute; left: 50%; width: calc(100% - 35px); transform: translateX(-50%); bottom: 40px; z-index: 2; } .aside-menu.static #topmenu .menu { overflow-y: visible; transform: translate(-50%, -50%); } .aside-menu.static #topmenu { box-shadow: 3px 1px 20px 0 rgba(0, 0, 0, 0.12); } .aside-menu.static #topmenu .sub-menu { padding: 20px 0; margin-left: 0; left: 100%; top: 50%; background-color: var(--light-color); width: 100% !important; transform: translateY(-50%); box-shadow: 3px 1px 20px 0 rgba(0, 0, 0, 0.12); } .aside-menu.static #topmenu .sub-menu li { padding-left: 20px; } .aside-menu.static #topmenu .sub-menu .sub-menu { left: 99%; } .aside-menu.static #topmenu li:hover > .sub-menu { display: none; } .aside-menu.static #topmenu li a { color: var(--dark-color); transition: color .35s ease; font-size: 18px; font-weight: 600; text-decoration: none; } .aside-menu.static #topmenu .current-menu-parent > a, .aside-menu.static #topmenu .current-menu-item > a, .aside-menu.static #topmenu li a:hover { color: #d82323; } .aside-menu.static .logo { left: 0; width: 100%; top: 0; padding-top: 40px; text-align: left; padding-left: 55px; } .aside-menu.static .logo span { color: var(--dark-color); font-size: 30px; line-height: 1; } .aside-menu.static .logo img { max-width: 100%; } .aside-menu.static #topmenu .social li:not(:last-of-type) { margin-right: 15px; } .aside-menu.static #topmenu .social li a { color: var(--dark-color); font-weight: normal; } .aside-menu.static #topmenu .social li a:hover { color: var(--grey-color); } .aside-menu.static #topmenu .f-right { text-align: left; left: 0; -webkit-transform: none; -moz-transform: none; -ms-transform: none; -o-transform: none; transform: none; width: 100%; padding-left: 55px; padding-right: 25px; } .aside-menu.static #topmenu .f-right .copy { text-transform: none; font-size: 15px; line-height: 1.57; color: var(--grey-color); margin-top: 35px; } .aside-menu.static #topmenu .f-right .copy a { text-decoration: none; color: var(--grey-color); } .aside-menu.static #topmenu .f-right .copy a:hover { color: var(--dark-color); } .aside-menu .filter{ margin-right: 20px; } .filter{ display: flex; align-items: center; justify-content: center; flex-direction: column; width: 50px; height: 50px; border-radius: 50%; background-color: var(--light-color); box-shadow: 0 10px 20px 0 rgba(0, 0, 0, 0.05); } .desc-filter { position: relative; } .desc-filter::before { background-color: rgba(0, 0, 0, 0.3); position: fixed; left: 0; top: 0; right: 0; bottom: 0; display: block; content: ''; opacity: 0; transition: 0.35s; z-index: 0; pointer-events: none; } .filter.opened { background-color: red; } .desc-filter.opened::before { opacity: 1; } .mob-filter{ display: none; pointer-events: visible; } } @media only screen and (min-width: 1025px) and (max-width: 1460px) { .static-menu .about-section { padding: 0 30px; overflow: hidden; } .static-menu .headings-wrap, .static-menu .ono-post-list-1, .static-menu .ono-post-list-2, .static-menu .ono-portfolio-2, .static-menu .ono-portfolio-3, .static-menu .ono-portfolio-urban { padding: 0 15px; } .static-menu .contacts-info-wrap { padding: 0 15px 15px; } .static-menu .vc_row.pad-fix { padding-right: 15px!important; padding-left: 15px!important; } } @media only screen and (min-width: 1025px) and (max-width: 1375px) { .static-menu .outer-album-swiper .album-text-block, .static-menu .outer-album-swiper .right-content { max-width: 260px; } } @media only screen and (min-width: 1025px) and (max-width: 1350px) { .static-menu .contacts-info-wrap.style3 .content { padding: 100px 20px; } .static-menu .swiper-container.carousel-albums .swiper-button-prev { left: 30px; } .static-menu .swiper-container.carousel-albums .swiper-button-prev:hover { left: 20px; } .static-menu .swiper-container.carousel-albums .swiper-button-next { right: 30px; } .static-menu .swiper-container.carousel-albums .swiper-button-next:hover { right: 20px; } } @media only screen and (min-width: 1025px) and (max-width: 1200px) { .static-menu.single-product .product .woocommerce-Reviews #comments, .static-menu.ono_product_detail .product .woocommerce-Reviews #comments { width: 60%; } .static-menu.single-product .product .woocommerce-Reviews #review_form_wrapper, .static-menu.ono_product_detail .product .woocommerce-Reviews #review_form_wrapper { width: 40%; } .static-menu .coming-soon .svg .count { font-size: 115px; } .static-menu .client-wrap { width: 50%; } .static-menu .info-block-parallax-wrap .content-wrap { padding: 70px 20px 70px; } } @media only screen and (min-width: 1025px) and (max-width: 1100px) { .static-menu .top-banner { height: 300px; } .static-menu .top-banner.center_content { min-height: 300px; } .static-menu .fragment-wrapper .fragment-block .fragment-text .wrap-frag-text .title { font-size: 50px; line-height: 55px; } .static-menu .swiper-container-vert-slider .swiper-slide .container .wrap-text { max-width: calc(100% - 40px); } .static-menu .swiper-container-vert-slider .swiper-slide .container .wrap-text .title { font-size: 60px; letter-spacing: 8px; } .static-menu .portfolio-slider-wrapper.slider_classic .content-wrap .portfolio-title { font-size: 50px; letter-spacing: 7px; } .static-menu .portfolio-single-content .gallery-single.infinite_full_gallery .item-single { width: 33.33%; } .static-menu .portfolio.grid .item { width: 50% !important; } .static-menu .flow-slider .flow-title { font-size: 60px; } } /*aside menu - spacing*/ @media only screen and (min-width: 1025px) { .static-menu, .static-menu-animation { position: relative; } .static-menu { padding-left: 300px; } .stat ic-menu-animation { padding-left: 320px; } .static-menu #footer { max-width: calc(100% - 300px); left: 300px; } .static-menu-animation #footer { max-width: calc(100% - 386px); left: 386px; } .static-menu .vc_row[data-vc-full-width] { padding-left: 300px; padding-right: 0; } .static-menu-animation .vc_row[data-vc-full-width] { padding-left: 386px; padding-right: 0; } .static-menu .header_top_bg, .static-menu-animation .header_top_bg { height: 0; } } @media only screen and (min-width: 1650px) { .static-menu-animation .vc_row:not([data-vc-stretch-content="true"]), .static-menu .vc_row:not([data-vc-stretch-content="true"]) { padding-left: 7% !important; padding-right: 7% !important; } } @media only screen and (min-width: 1199px) and (max-width: 1375px) { .static-menu-animation .pricing-item, .static-menu .pricing-item { padding: 60px 40px; } .static-menu-animation .pricing-item .mask-image, .static-menu .pricing-item .mask-image { min-width: 150px; width: 150px; } } @media only screen and (min-width: 1200px) and (max-width: 1275px) { .static-menu-animation .pricing-item .mask-image, .static-menu .pricing-item .mask-image { min-width: 130px; width: 130px; } } .aside-animation.static .topmenu { background-size: cover; } .aside-animation.static .images-wrap { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; z-index: 33; pointer-events: none; } .aside-animation.static .img-wrap { position: absolute; z-index: 20; } .aside-animation.static .img-wrap img { width: 100%; height: auto; } .aside-animation.static .img-wrap-1 { width: 100px; right: -77%; left: auto !important; top: 71% !important; } .aside-animation.static .img-wrap-1 img { animation: fragment_header_1 alternate 9s ease-in-out infinite; } .aside-animation.static .img-wrap-2 { width: 65px; left: -11% !important; top: auto !important; bottom: 72%; } .aside-animation.static .img-wrap-2 img { animation: fragment_header_2 alternate 9s ease-in-out infinite; } .aside-animation.static .img-wrap-3 { width: 115px; top: auto !important; bottom: 87%; left: 53% !important; } .aside-animation.static .img-wrap-3 img { animation: fragment_header_3 alternate 9s ease-in-out infinite; } @media (max-width: 1024px) { .aside-animation.static .images-wrap { display: none; } .mob-filter { display: flex; position: absolute; right: 0; top: 50%; transform: translateY(-50%); } .mob-filter .filter, .mob-filter .close{ display: flex; align-items: center; justify-content: center; flex-direction: column; width: 50px; height: 50px; border-radius: 50%; background-color: var(--light-color); box-shadow: 0 10px 20px 0 rgba(0, 0, 0, 0.05); cursor: pointer; } .mob-filter .close{ display: none; font-size: 20px; } } @-webkit-keyframes fragment_header_1 { 0% { transform: scale(1) translate(0, 0); -webkit-transform: scale(1) translate(0, 0); } 50% { transform: scale(1.1) translate(-1vw, 1vw); -webkit-transform: scale(1.1) translate(-1vw, 1vw); } 100% { transform: scale(1) translate(0, 0); -webkit-transform: scale(1) translate(0, 0); } } @keyframes fragment_header_1 { 0% { transform: scale(1) translate(0, 0); -webkit-transform: scale(1) translate(0, 0); } 50% { transform: scale(1.1) translate(-1vw, 1vw); -webkit-transform: scale(1.1) translate(-1vw, 1vw); } 100% { transform: scale(1) translate(0, 0); -webkit-transform: scale(1) translate(0, 0); } } @-webkit-keyframes fragment_header_2 { 0% { transform: rotate(0deg) scale(1) translate(0, 0); -webkit-transform: rotate(0deg) scale(1) translate(0, 0); } 50% { transform: rotate(40deg) scale(1.1) translate(7%, 7%); -webkit-transform: rotate(40deg) scale(1.1) translate(7%, 7%); } 100% { transform: rotate(0deg) scale(1) translate(0, 0); -webkit-transform: rotate(0deg) scale(1) translate(0, 0); } } @keyframes fragment_header_2 { 0% { transform: rotate(0deg) scale(1) translate(0, 0); -webkit-transform: rotate(0deg) scale(1) translate(0, 0); } 50% { transform: rotate(40deg) scale(1.1) translate(7%, 7%); -webkit-transform: rotate(40deg) scale(1.1) translate(7%, 7%); } 100% { transform: rotate(0deg) scale(1) translate(0, 0); -webkit-transform: rotate(0deg) scale(1) translate(0, 0); } } @-webkit-keyframes fragment_header_3 { 0% { transform: scale(1) translate(0, 0); -webkit-transform: scale(1) translate(0, 0); } 50% { transform: scale(1.1) translate(1vw, -1vw); -webkit-transform: scale(1.1) translate(1vw, -1vw); } 100% { transform: scale(1) translate(0, 0); -webkit-transform: scale(1) translate(0, 0); } } @keyframes fragment_header_3 { 0% { transform: scale(1) translate(0, 0); -webkit-transform: scale(1) translate(0, 0); } 50% { transform: scale(1.1) translate(1vw, -1vw); -webkit-transform: scale(1.1) translate(1vw, -1vw); } 100% { transform: scale(1) translate(0, 0); -webkit-transform: scale(1) translate(0, 0); } } @media only screen and (min-width: 1025px) { .aside-animation.static { position: fixed; top: 0; left: 0; } .aside-animation.static .topmenu { position: fixed; top: 0; height: 100%; width: 386px !important; padding: 100px 0 140px; text-align: center; background-color: var(--light-color); box-sizing: border-box; outline: 0; z-index: 101; backface-visibility: hidden; transition: left 0.5s cubic-bezier(0.77, 0, 0.175, 1); } .aside-animation.static .logo { position: absolute; z-index: 9999; top: 20px; left: 31px; padding: 20px 0; } .aside-animation.static #topmenu .menu { display: block; overflow-y: auto; width: 100%; max-height: 100%; position: relative; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 100; } .aside-animation.static #topmenu .menu li { padding: 15px 77px 15px 71px; position: relative; text-align: left; display: block; transition: 0.35s; } .aside-animation.static #topmenu .menu li.is-open > .fas{ transform: rotate(-180deg); } .aside-animation.static #topmenu .menu li.is-open > a::before { display: none; } .aside-animation.static #topmenu .menu li.is-open > .sub-menu { padding-top: 10px; } .aside-animation.static #topmenu li li a { padding-left: 8px !important; } .aside-animation.static #topmenu li > .fa, .aside-animation.static #topmenu li > .fas { font-size: 18px; position: absolute; right: 75px; top: 20px; cursor: pointer; transition: 0.35s; display: block; color: var(--dark-color); } .aside-animation.static #topmenu li > .fas:hover, .aside-animation.static #topmenu li > .fa:hover { color: var(--dark-color); } .aside-animation.static #topmenu li li > .fa, .aside-animation.static #topmenu li li> .fas{ right: 0; font-size: 12px; top: 8px; } .aside-animation.static #topmenu li li li a { padding-left: 20px !important; } .aside-animation.static #topmenu .menu a { display: block; padding: 0; position: relative; } .aside-animation.static #topmenu .menu > li > a::before { width: 100%; height: 1px; background-color: #e6e6e6; bottom: -14px; content: ''; position: absolute; } .aside-animation.static #topmenu .f-right { float: none; position: absolute; left: 50%; width: calc(100% - 35px); transform: translateX(-50%); bottom: 40px; z-index: 100; } .aside-animation.static #topmenu .menu { overflow: auto; transform: translate(-50%, -50%); max-height: calc(100vh - 560px); } .aside-animation.static #topmenu .menu::-webkit-scrollbar { width: 3px; background: #ccc; } .aside-animation.static #topmenu .menu::-webkit-scrollbar-thumb { background: var(--grey-color); } .aside-animation.static #topmenu { box-shadow: 3px 1px 20px 0 rgba(0, 0, 0, 0.12); } .aside-animation.static #topmenu .sub-menu { min-width: auto; position: static; padding: 22px 0 9px; } .aside-animation.static #topmenu .sub-menu ul{ padding: 9px 0; } .aside-animation.static #topmenu .sub-menu li { padding: 6px 0; } .aside-animation.static #topmenu li li:last-child, .aside-animation.static #topmenu li:last-child .sub-menu { padding-bottom: 0; } .aside-animation.static #topmenu li:hover > .sub-menu { display: none; } .aside-animation.static #topmenu li a { color: var(--dark-color); transition: color .35s ease; font-size: 16px; font-weight: 600; text-decoration: none; } .aside-animation.static #topmenu li li a { font-size: 12px; } .aside-animation.static #topmenu .current-menu-item > a, .aside-animation.static #topmenu li a:hover{ opacity: .4; } .aside-animation.static .logo { left: 0; width: 386px; top: 0; padding-top: 46px; text-align: left; padding-left: 113px; padding-right: 117px; } .aside-animation.static .logo span { text-transform: lowercase; font-size: 80px; color: var(--dark-color); display: flex; flex-direction: column; line-height: 1; text-align: center; white-space: nowrap; } .aside-animation.static .logo span i{ font-family: Roboto, sans-serif; font-size: 13px; font-weight: 500; font-style: normal; letter-spacing: 1.7px; color: #333333; opacity: .3; text-transform: uppercase; transition: all .35s ease; } .aside-animation.static .logo img { max-width: 100%; } .static-menu #footer { max-width: calc(100% - 254px); left: 254px; } .aside-animation.static #topmenu .social li:not(:last-of-type) { margin-right: 15px; } .aside-animation.static #topmenu .social li a { font-weight: normal; } .aside-animation.static #topmenu .f-right { text-align: center; left: 0; -webkit-transform: none; -moz-transform: none; -ms-transform: none; -o-transform: none; transform: none; width: 100%; padding: 0 77px 0 71px; display: flex; flex-direction: column; justify-content: space-between; } .aside-animation.static #topmenu .f-right .social a{ font-size: 20px; color: var(--dark-color); } .aside-animation.static #topmenu .f-right .desc-filter{ display: flex; justify-content: center; margin-bottom: 25px; } .aside-animation.static #topmenu .f-right .desc-filter .filter{ width: 116px; height: 40px; border-radius: 0; background-color: var(--dark-color); color: var(--light-color); flex-direction: row; border: 1px solid var(--dark-color); font-size: 13px; font-weight: 600; } .aside-animation.static #topmenu .f-right .desc-filter .filter i{ margin-right: 10px; font-size: 14px; } .aside-animation.static #topmenu .f-right .copy { text-transform: none; font-size: 15px; line-height: 1.57; color: var(--grey-color); margin-top: 35px; } .aside-animation.static #topmenu .f-right .copy a { text-decoration: none; color: var(--grey-color); } .aside-animation.static #topmenu .f-right .copy a:hover { color: var(--dark-color); } } @media only screen and (min-width: 1025px) and (max-width: 1400px) { .aside-animation.static .topmenu { width: 300px !important; } .static-menu-animation .vc_row[data-vc-full-width] { padding-left: 300px; padding-right: 0; } .aside-animation.static .logo { width: 300px; padding-left: 15px; padding-right: 15px; } .aside-animation.static #topmenu li > .fa, .aside-animation.static #topmenu li > .fas { font-size: 18px; position: absolute; right: 40px; } .aside-animation.static #topmenu .menu li { padding: 15px 40px 15px 40px; } .aside-animation.static #topmenu .sub-menu li { padding: 6px 0; } .aside-animation.static #topmenu .f-right { text-align: left; padding-left: 40px; } } /*------------------------------------------------------*/ /*---------------------- CLASSIC MENU ----------------------*/ @media only screen and (min-width: 1025px) { .container-fluid header.classic { padding: 0 40px; } header.classic { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .classic a.logo { flex: 0 0 10%; max-width: 10%; text-align: left; } .classic #topmenu { flex: 0 0 80%; max-width: 80%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding-left: 23px; } .classic #topmenu ul li a { font-size: 15px; font-weight: 600; line-height: normal; letter-spacing: normal; color: var(--grey-color); display: block; text-align: left; text-decoration: none; padding: 0 14px; transition: all .35s ease; -webkit-font-smoothing: antialiased; } .classic #topmenu ul li a:hover, .classic #topmenu ul .current-menu-parent > a, .classic #topmenu ul .current-menu-item > a, .classic #topmenu ul .current-menu-ancestor > a { color: var(--dark-color); } .unit header.classic { padding: 0 15px; } .classic .f-right { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .classic #topmenu .menu > li { padding: 30px 0; } .classic #topmenu .sub-menu { top: 75px; left: -35px; min-width: 270px; padding: 30px 0; background-color: var(--light-color); -webkit-box-shadow: 3px 1px 20px 0 rgba(0, 0, 0, 0.07); box-shadow: 3px 1px 20px 0 rgba(0, 0, 0, 0.07); opacity: 0; visibility: hidden; -webkit-transition: opacity .5s ease, visibility .5s ease; -o-transition: opacity .5s ease, visibility .5s ease; transition: opacity .5s ease, visibility .5s ease; display: block; } .classic #topmenu .menu li:hover > ul { opacity: 1; visibility: visible; } .classic #topmenu .menu > li ul a { opacity: 0; -webkit-transform: matrix(1, 0, 0, 1, 0, 20); -ms-transform: matrix(1, 0, 0, 1, 0, 20); transform: matrix(1, 0, 0, 1, 0, 20); -webkit-transition: opacity .75s ease, color .5s ease, -webkit-transform .75s ease; transition: opacity .75s ease, color .5s ease, -webkit-transform .75s ease; -o-transition: opacity .75s ease, transform .75s ease, color .5s ease; transition: opacity .75s ease, transform .75s ease, color .5s ease; transition: opacity .75s ease, transform .75s ease, color .5s ease, -webkit-transform .75s ease; } .classic #topmenu .menu > li:hover ul a, .classic #topmenu .menu > li.mega-menu:hover ul > li > ul.sub-menu > li a { opacity: 1; -webkit-transform: matrix(1, 0, 0, 1, 0, 0); -ms-transform: matrix(1, 0, 0, 1, 0, 0); transform: matrix(1, 0, 0, 1, 0, 0); } .classic #topmenu .sub-menu .sub-menu { top: 0; left: 100%; padding: 40px 15px; } .classic #topmenu .menu li:last-of-type .sub-menu .sub-menu, .classic #topmenu .menu li:nth-last-of-type(2) .sub-menu .sub-menu, .classic #topmenu .menu li:nth-last-of-type(3) .sub-menu .sub-menu { left: -100%; } .classic #topmenu .sub-menu li { width: 100%; padding: 8px 35px; text-align: left; } .classic #topmenu .sub-menu li a { width: auto; display: inline-block; padding: 0; font-weight: 600; } .classic #topmenu .current-menu-parent > a, .classic #topmenu .current-menu-item > a { position: relative; } .classic #topmenu .mini-cart-wrapper { margin-left: 30px; } /* mega menu classic*/ .classic #topmenu .menu .mega-menu:hover > ul > li > ul { opacity: 1; visibility: visible; } /* end of mega menu classic */ } /*------------------------------------------------------*/ /*---------------------- ASIDE MENU ----------------------*/ @media only screen and (min-width: 1025px) { /*------menu anchor------*/ .aside-fix.three-box .header-left .logo-with-desc { position: absolute; top: 0; left: -15px; width: 384px; height: 220px; background-color: var(--light-color); display: flex; justify-content: center; align-items: center; transition: all .35s ease; } .aside-fix.three-box .logo-with-desc span { font-size: 80px; text-transform: lowercase; font-weight: bold; line-height: 1; transition: all .35s ease; padding-bottom: 3px; } .aside-fix.three-box .logo-with-desc span i { display: block; font-size: 13px; font-weight: normal; letter-spacing: 2px; color: rgba(var(--dark-color-a)); text-transform: uppercase; opacity: .3; transition: all .35s ease; font-style: normal; } .aside-fix.three-box .header-left .header-box > .menu li a.fullpage-active{ color: var(--dark-color); } .fixed-header-scroll .aside-fix.three-box .header-left .logo-with-desc { height: 100px; width: 150px; } .logo-hover { display: none; } } @media (max-width: 1025px) and (min-width: 991px) { .aside-fix.three-box .header-left .logo-with-desc{ position: absolute; width: 150px; height: 50px; } .aside-fix.three-box .logo-with-desc span { text-transform: lowercase; font-weight: bold; line-height: 1; transition: all .35s ease; padding-bottom: 3px } .aside-fix.three-box .logo-with-desc span i { display: block; font-size: 10px; font-weight: normal; letter-spacing: 2px; color: rgba(var(--dark-color-a)); text-transform: uppercase; opacity: .3; transition: all .35s ease; font-style: normal; } } @media only screen and (min-width: 1025px) { .header_trans-fixed .aside-fix .logo span { color: var(--darck-color); } .header_trans-fixed .aside-fix .logo.white_bg span { font-size: 50px; } .aside-fix { padding: 25px 37px 25px 37px; display: grid; grid-template-columns: 1fr auto 1fr; justify-content: space-between; align-items: center; } .white_bg_trans .aside-fix { padding: 0px 57px; } .aside-fix.two-box { grid-template-columns: auto auto; } .aside-fix .logo { display: inline-block; } .aside-fix .logo span{ font-size: 30px; font-weight: bold; font-style: normal; font-stretch: normal; line-height: normal; letter-spacing: normal; color: var(--darck-color); } .aside-fix .logo.white_bg { background-color: var(--light-color); padding: 26px 77px; } .bg-fixed-color .aside-fix .logo.white_bg { background-color: var(--light-color); } .aside-fix > .header-left { justify-self: flex-start; display: flex; align-items: center; } .aside-fix > .header-right { justify-self: flex-end; display: flex; align-items: center; } .aside-fix > .header-center { justify-content: center; } .aside-fix > .header-center .logo:not(:last-child) { margin-bottom: 10px; } .aside-fix > .header-left .logo:not(:last-child) { margin-right: 85px; } .aside-fix .header-right .search-icon-wrapper.ico-style:not(:last-child) { margin-right: 20px; } .aside-fix .header-left .search-icon-wrapper.ico-style:not(:first-child) { margin-left: 20px; } .aside-fix .search-icon-wrapper.ico-style .close-search { width: 50px; height: 50px; line-height: 50px; color: var(--light-color); border-radius: 50%; cursor: pointer; font-size: 14px; position: absolute; right: 0; top: 0; } .aside-fix .search-icon-wrapper.ico-style .search-field { height: 50px; background-color: transparent; border: 0; padding: 0 40px 0 20px; min-width: 174px; font-weight: 500; max-width: 100%; font-size: 13px; border-radius: 25px; color: var(--dark-color); } .aside-fix .search-icon-wrapper.ico-style .search-field::-webkit-input-placeholder { color: var(--light-color); } .aside-fix .search-icon-wrapper.ico-style .search-field::-moz-placeholder { color: var(--light-color); } .aside-fix .search-icon-wrapper.ico-style .search-field:-ms-input-placeholder { color: var(--light-color); } .aside-fix .search-icon-wrapper.ico-style .search-field:-moz-placeholder { color: var(--light-color); } .aside-fix .search-icon-wrapper.ico-style .search-field:-webkit-autofill, .aside-fix .search-icon-wrapper.ico-style .search-field:-webkit-autofill:hover, .aside-fix .search-icon-wrapper.ico-style .search-field:-webkit-autofill:focus { -webkit-text-fill-color: var(--dark-color); -webkit-box-shadow: 0 0 0 1000px var(--dark-color) inset; color: var(--light-color); } .aside-fix .search-icon-wrapper.ico-style .site-search { display: flex; background-color: var(--light-color); border-radius: 25px; box-shadow: 0 10px 20px 0 rgba(0, 0, 0, 0.06); flex-direction: row-reverse; min-width: 50px; position: relative; height: 50px; } .aside-fix .search-icon-wrapper.ico-style .is-active .close-search { pointer-events: none; } .aside-fix .search-icon-wrapper.ico-style .close-search:before { content: '\f002'; color: var(--dark-color); } .aside-fix .search-icon-wrapper.ico-style .form-container { width: 0; opacity: 0; overflow: hidden; transition: 0.25s .15s width, 0.15s opacity; transition-timing-function: ease-out; } .aside-fix .search-icon-wrapper.ico-style .site-search.is-active .form-container { width: 217px; opacity: 1; transition: 0.25s width, 0.25s 0.15s opacity; transition-timing-function: ease-in; } .aside-fix .mini-cart-wrapper, .modern .mini-cart-wrapper, .simple .mini-cart-wrapper { position: relative; } .aside-fix .mini-cart-wrapper:not(:last-child), .modern .mini-cart-wrapper:not(:last-child), .simple .mini-cart-wrapper:not(:last-child) { margin-right: 20px; } .aside-fix .ono-shop-icon, .modern .ono-shop-icon, .simple .ono-shop-icon { width: 50px; height: 50px; box-shadow: 0 10px 20px 0 rgba(0, 0, 0, 0.05); background-color: var(--light-color); color: var(--dark-color) !important; border-radius: 50%; display: block; line-height: 50px; text-decoration: none; position: relative; } .aside-fix .ono-shop-icon:before, .modern .ono-shop-icon:before, .simple .ono-shop-icon:before { font-family: "Font Awesome 5 Free"; content: '\f07a'; font-weight: 900; font-size: 16px; } .aside-fix .ono_mini_cart, .modern .ono_mini_cart, .simple .ono_mini_cart{ position: absolute; right: 0; top: 60px; display: block; background-color: var(--light-color); opacity: 0; visibility: hidden; min-width: 360px; padding: 23px 30px; text-align: center; transition: opacity 0.5s ease, visibility 0.5s ease; box-shadow: 3px 1px 20px 0 rgba(0, 0, 0, 0.07); } .aside-fix .header-left .ono_mini_cart, .modern .header-left .ono_mini_cart, .simple .header-left .ono_mini_cart { right: auto; left: 0; } .aside-fix .ono_mini_cart .remove_from_cart_button, .modern .ono_mini_cart .remove_from_cart_button, .simple .ono_mini_cart .remove_from_cart_button { padding: 0; color: var(--dark-color); font-size: 30px; font-weight: 400; text-decoration: none; align-self: flex-start; line-height: 20px; margin-top: 6px; } .aside-fix .ono_mini_cart .ono-buttons, .modern .ono_mini_cart .ono-buttons, .simple .ono_mini_cart .ono-buttons { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .aside-fix .ono_mini_cart .ono-buttons:not(:last-child), .modern .ono_mini_cart .ono-buttons:not(:last-child), .simple .ono_mini_cart .ono-buttons:not(:last-child) { margin-bottom: 20px; } .aside-fix .ono_mini_cart .ono-buttons a, .modern .ono_mini_cart .ono-buttons a, .simple .ono_mini_cart .ono-buttons a { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; color: var(--dark-color); font-size: 15px; font-weight: 500; text-decoration: none; } .aside-fix .ono_mini_cart .ono-buttons a:hover i, .modern .ono_mini_cart .ono-buttons a:hover i, .simple .ono_mini_cart .ono-buttons a:hover i { margin-left: 10px; } .aside-fix .ono_mini_cart .ono-buttons a i, .modern .ono_mini_cart .ono-buttons a i, .simple .ono_mini_cart .ono-buttons a i { margin-left: 5px; color: var(--dark-color); font-size: 10px; -webkit-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; } .aside-fix .woocommerce-mini-cart__total { color: var(--grey-color); font-size: 15px; font-weight: 600; margin-bottom: 0; } .aside-fix .woocommerce-mini-cart__total span { margin-left: 5px; color: var(--dark-color); font-size: 15px; font-weight: 600; margin-bottom: 0; } .aside-fix .mini-cart-wrapper:hover .ono_mini_cart, .modern .mini-cart-wrapper:hover .ono_mini_cart, .simple .mini-cart-wrapper:hover .ono_mini_cart { opacity: 1; visibility: visible; } .simple .ono_mini_cart .product_list_widget, .modern .ono_mini_cart .product_list_widget, .aside-fix .ono_mini_cart .product_list_widget { display: block !important; list-style: none !important; } .aside-fix .ono_mini_cart .product_list_widget .empty, .modern .ono_mini_cart .product_list_widget .empty, .simple .ono_mini_cart .product_list_widget .empty { font-size: 15px; line-height: 28px; letter-spacing: 0.2px; font-weight: 400; text-align: left; } .aside-fix .ono_mini_cart .mini_cart_item, .modern .ono_mini_cart .mini_cart_item, .simple .ono_mini_cart .mini_cart_item { display: -webkit-flex !important; display: -ms-flexbox !important; display: flex !important; -webkit-flex-wrap: nowrap; -ms-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; padding: 0; padding-bottom: 20px; margin-bottom: 20px; border-bottom: 1px solid #ddd; } .aside-fix .ono_mini_cart .mini_cart_item_thumbnail, .modern .ono_mini_cart .mini_cart_item_thumbnail, .simple .ono_mini_cart .mini_cart_item_thumbnail { display: -webkit-flex; display: -ms-flexbox; display: flex; width: 40%; max-width: 70px; margin-top: 7px; } .aside-fix .ono_mini_cart, .modern .ono_mini_cart, .simple .ono_mini_cart { text-decoration: none; } .aside-fix .ono_mini_cart .mini_cart_item_thumbnail a, .modern .ono_mini_cart .mini_cart_item_thumbnail a, .simple .ono_mini_cart .mini_cart_item_thumbnail a { padding: 0; display: block; } .aside-fix .ono_mini_cart .mini_cart_item_thumbnail img, .modern .ono_mini_cart .mini_cart_item_thumbnail img, .simple .ono_mini_cart .mini_cart_item_thumbnail img { float: none; max-width: 70px; width: 100%; margin-left: 0; } .aside-fix .ono_mini_cart .mini-cart-data, .modern .ono_mini_cart .mini-cart-data, .simple .ono_mini_cart .mini-cart-data { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-align-items: flex-start; -ms-flex-align: start; align-items: flex-start; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; width: 60%; } .aside-fix .ono_mini_cart .mini_cart_item_name, .modern .ono_mini_cart .mini_cart_item_name, .simple .ono_mini_cart .mini_cart_item_name { font-size: 18px; line-height: 1.6; letter-spacing: 1.2px; font-weight: 600; color: var(--dark-color); text-align: left; padding: 0; text-decoration: none; } .aside-fix .ono_mini_cart .mini_cart_item_quantity, .modern .ono_mini_cart .mini_cart_item_quantity, .simple .ono_mini_cart .mini_cart_item_quantity { font-size: 14px; line-height: 20px; font-weight: 400; color: #b2b2b2; margin-bottom: 3px; } .aside-fix .ono_mini_cart a.button, .modern .ono_mini_cart a.button, .simple .ono_mini_cart a.button { margin-bottom: 0; line-height: 20px; position: relative; display: inline-block; font-weight: bold; box-sizing: border-box; padding: 15px; font-size: 15px; text-decoration: none; -webkit-font-smoothing: antialiased; background-color: var(--dark-color); color: var(--light-color) !important; width: 100%; border-radius: 0; -webkit-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; } .aside-fix .ono_mini_cart a.button:hover, .modern .ono_mini_cart a.button:hover, .simple .ono_mini_cart a.button:hover { background-color: var(--dark-color); color: var(--light-color); background-image: none; border-color: var(--dark-color); } .aside-fix .ono_mini_cart a.button:hover::after, .modern .ono_mini_cart a.button:hover::after, .simple .ono_mini_cart a.button:hover::after { right: 20px; } .aside-fix .ono_mini_cart .mini_cart_item_thumbnail img, .modern .ono_mini_cart .mini_cart_item_thumbnail img, .simple .ono_mini_cart .mini_cart_item_thumbnail img { height: auto; } .aside-fix .ono_mini_cart .mini_cart_item_price, .modern .ono_mini_cart .mini_cart_item_price, .simple .ono_mini_cart .mini_cart_item_price { font-size: 12px; font-weight: 500; } .aside-fix .cart-contents-count, .modern .cart-contents-count, .simple .cart-contents-count { position: absolute; right: 0; top: 0; background-color: var(--dark-color); width: 20px; height: 20px; border-radius: 50%; display: flex; line-height: 2px; box-shadow: 0 10px 20px 0 rgba(0, 0, 0, 0.05); font-weight: 600; font-size: 12px; color: var(--light-color); align-items: center; justify-content: center; } .aside-fix .ono_mini_cart, .modern .ono_mini_cart, .simple .ono_mini_cart { position: absolute; opacity: 0; } .aside-fix .ono-top-social.outside:first-child ul, .aside-fix .ono-top-social.outside:first-child li:first-child { margin-left: 0; } .aside-fix .ono-top-social.outside ul { list-style: none; margin: 0 10px; display: flex; } .aside-fix .ono-top-social.outside li { list-style: none; display: inline-block; margin: 0 10px; } .aside-fix .ono-top-social.outside li a { font-size: 18px; color: var(--dark-color); text-decoration: none; } .aside-fix .ono-top-social.outside li a:hover { color: var(--dark-color); } .additional-menu-wrapper .additional-nav { display: flex; align-items: center; justify-content: center; flex-direction: column; width: 50px; height: 50px; border-radius: 50%; background-color: var(--light-color); box-shadow: 0 10px 20px 0 rgba(0, 0, 0, 0.05); } .additional-menu-wrapper .additional-nav .line { display: block; width: 20px; height: 2px; background-color: var(--dark-color); } .additional-menu-wrapper .additional-nav .line:first-of-type { margin-bottom: 4px; } .additional-inner-wrap { display: flex; flex-direction: column; justify-content: space-between; position: fixed; top: 0; right: 0; transform: translateX(100%); bottom: 0; width: 550px; background-color: var(--light-color); padding: 50px 75px 25px; text-align: left; transition: all .5s ease-in-out; z-index: 100; } .additional-menu-wrapper.menu-open .additional-inner-wrap { transform: translateX(0); overflow: auto; } .additional-inner-wrap .additional-nav-close { position: absolute; top: 47px; right: 75px; cursor: pointer; width: 30px; height: 30px; } .additional-inner-wrap .additional-nav-close .line { width: 32px; height: 3px; background-color: var(--dark-color); display: block; position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; } .additional-inner-wrap .additional-nav-close .line:first-of-type { transform: rotate(45deg); } .additional-inner-wrap .additional-nav-close .line:last-of-type { transform: rotate(-45deg); } .additional-inner-wrap .ono-top-social { padding-bottom: 15px; } .additional-inner-wrap .ono-top-social .social { display: flex; align-items: center; } .additional-inner-wrap .ono-top-social li { list-style: none; } .additional-inner-wrap .ono-top-social li:not(:last-of-type) { margin-right: 25px; } .additional-inner-wrap .ono-top-social a { text-decoration: none; color: var(--dark-color); font-size: 20px; transition: opacity .35s ease; } .additional-inner-wrap .ono-top-social a:hover { opacity: .7; } #topmenu .additional-inner-wrap .menu { padding: 50px 0; } #topmenu .additional-inner-wrap .menu-mob { display: none; } #topmenu .additional-inner-wrap .menu li { display: block; list-style: none; text-align: left; } .additional-inner-wrap .menu li a { font-size: 30px; font-weight: bold; color: var(--grey-color); text-decoration: none; transition: color .35s ease; } #topmenu .additional-inner-wrap .menu ul { position: static; min-width: auto; padding-left: 15px; margin-top: 5px; margin-bottom: 5px; } #topmenu .additional-inner-wrap .menu ul li a { padding: 0; } .additional-inner-wrap .menu li a:hover, .additional-inner-wrap .menu .current-menu-parent > a, .additional-inner-wrap .menu .current-menu-item > a, .additional-inner-wrap .menu .current-menu-ancestor > a { color: var(--dark-color); } .additional-inner-wrap .sub-menu { margin-left: 20px; } .additional-inner-wrap .sub-menu li a { font-size: 24px; display: inline-block; } .additional-inner-wrap .sub-menu .sub-menu li a { font-size: 18px; } .additional-inner-wrap .search-title { color: var(--dark-color); font-family: Poppins, sans-serif; font-size: 18px; font-weight: 600; letter-spacing: .1px; } .additional-inner-wrap .search-icon-wrapper { padding: 10px 0; } .additional-inner-wrap .search-icon-wrapper.left, .additional-inner-wrap .search-icon-wrapper.right { display: none; } .additional-inner-wrap .search-icon-wrapper.inside { display: block; } .additional-inner-wrap .search-icon-wrapper .input-group { position: relative; } .additional-inner-wrap .search-icon-wrapper .input-group::before { content: ""; height: 3px; width: 50%; position: absolute; bottom: 0; left: 0; background-color: var(--dark-color); } .additional-inner-wrap .search-icon-wrapper .input-group::after { font-family: Ionicons, sans-serif; font-size: 24px; color: var(--dark-color); content:"\f375"; position: absolute; right: 0; top: 50%; transform: translateY(-50%); } .additional-inner-wrap .close-search { display: none; } .additional-inner-wrap .search-icon-wrapper input { width: 100%; border: 0; padding: 15px 0; border-bottom: 3px solid rgba(34, 34, 34, .2); } .additional-inner-wrap .copy { color: var(--grey-color); font-family: Poppins, sans-serif; font-size: 14px; } .additional-inner-wrap .copy:not(:first-child) { margin-top: 60px; } .additional-inner-wrap .copy a { text-decoration: none; color: var(--grey-color); font-family: Poppins, sans-serif; font-size: 14px; transition: color .35s ease; } .additional-inner-wrap .copy a:hover { color: var(--dark-color); } .aside-fix .header-box > .menu { display: flex; width: 100%; flex-wrap: wrap; margin: 0; list-style: none; padding: 0 15px; align-items: center; position: relative; } .aside-fix .header-box > .menu li { margin-right: 20px; margin-left: 20px; position: relative; } .aside-fix .header-box > .menu li a { font-size: 16px; font-weight: 600; color: rgba(var(--dark-color-a), 0.5); text-decoration: none; } .aside-fix .header-box > .menu li.active a, .aside-fix .header-box > .menu li a:hover, .aside-fix .header-box > .menu .current-menu-parent > a, .aside-fix .header-box > .menu .current-menu-item > a, .aside-fix .header-box > .menu .current-menu-ancestor > a { color: var(--dark-color); } .additional-menu-overlay { content: ""; position: fixed; top: 0; right: 0; bottom: 0; left: 0; background-color: rgba(0, 0, 0, .5); opacity: 0; visibility: hidden; transition: opacity .75s ease, visibility .75s ease; z-index: 99; } .additional-menu-wrapper.menu-open .additional-menu-overlay { opacity: 1; visibility: visible; } .header_trans-fixed.menu_light_text:not(.bg-fixed-color) .header-box > .menu > li > a { color: var(--light-color); } .header_trans-fixed.menu_light_text:not(.bg-fixed-color) .logo span{ color: var(--light-color); } .header_trans-fixed.menu_light_text .aside-fix{ padding: 25px 37px; } .header_trans-fixed.menu_light_text:not(.bg-fixed-color) .header-box > .menu > li.active > a, .header_trans-fixed.menu_light_text:not(.bg-fixed-color) .header-box > .menu > li > a:hover { opacity: 1; } .header_trans-fixed.menu_light_text:not(.bg-fixed-color) .aside-fix .header-box > .menu > .current-menu-parent > a, .header_trans-fixed.menu_light_text:not(.bg-fixed-color) .aside-fix .header-box > .menu > .current-menu-item > a { opacity: 1; } .aside-fix .header-box > .menu .sub-menu { top: 35px; left: -35px; min-width: 230px; padding: 20px 0; background-color: var(--light-color); -webkit-box-shadow: 3px 1px 20px 0 rgba(0, 0, 0, 0.07); box-shadow: 3px 1px 20px 0 rgba(0, 0, 0, 0.07); opacity: 0; visibility: hidden; -webkit-transition: opacity .5s ease, visibility .5s ease; -o-transition: opacity .5s ease, visibility .5s ease; transition: opacity .5s ease, visibility .5s ease; display: block; position: absolute; list-style: none; } .aside-fix .header-box > .menu li:hover > ul { opacity: 1; visibility: visible; } .aside-fix .header-box > .menu .sub-menu .sub-menu { top: 0; left: 100%; padding: 40px 15px; } .aside-fix .header-box > .menu li:last-of-type .sub-menu .sub-menu { left: auto; right: 100%; } .aside-fix .header-box > .menu .sub-menu li { width: 100%; padding: 8px 35px; text-align: left; margin: 0; } .aside-fix .header-box > .menu .sub-menu li a { width: auto; display: inline-block; padding: 0; font-weight: 600; } .aside-fix .header-box > .menu .current-menu-parent > a, .aside-fix .header-box > .menu .current-menu-item > a { color: var(--dark-color); } } /*------menu anchor------*/ @media only screen and (max-width: 1500px) { .page-template-full-page-template .right-menu.aside-menu.aside-fix{ padding-left: 260px; } } @media only screen and (max-width: 1300px) { .aside-fix .header-left .logo { height: 50px; width: 150px; position: relative; } .fixed-header-scroll .aside-fix .header-left .logo { height: 50px; width: 150px; } .fixed-header-scroll .aside-fix .header-left .logo span { font-size: 30px; } .aside-fix .header-left .logo span i { font-size: 10px; letter-spacing: 1px; } } @media only screen and (max-width: 1024px) { #menu-home-page-anchor{ display: none; } .page-template-full-page-template .right-menu.aside-menu.aside-fix{ padding-left: 0px; } } @media only screen and (max-width: 1100px) { .aside-fix .header-box > .menu li { margin-right: 10px; margin-left: 10px; } } @media only screen and (max-width: 991px) { .aside-fix .logo span i { display: none; } } @media only screen and (max-width: 1024px) { .additional-inner-wrap .ono-top-social { padding: 15px 35px; border-bottom: 1px solid #f1f2f3; margin-bottom: 0; } #topmenu .additional-inner-wrap .menu-desc { display: none; } #topmenu .additional-inner-wrap .menu-mob { display: block; } #topmenu .additional-inner-wrap .menu-mob:empty { display: none; } #topmenu .additional-inner-wrap .menu-mob:empty + .menu-desc { display: block; } .aside-menu.three-box #topmenu .additional-inner-wrap .menu-mob { display: none; } .aside-menu.three-box #topmenu .additional-inner-wrap .menu-desc { display: block; } .aside-fix .close-search, .aside-fix .header-right > *:not(.topmenu):not(.mob-nav), .aside-fix .search-title, .ono-top-social.outside, .header-box > .mini-cart-wrapper, .header-box > .search-icon-wrapper { display: none; } .aside-fix .header-box > .menu { display: none; } .aside-animation.static #topmenu .f-right .desc-filter{ display: none; } .additional-inner-wrap .ono-top-social .social { display: flex; align-items: center; } .additional-inner-wrap .ono-top-social li { list-style: none; } .additional-inner-wrap .ono-top-social li:not(:last-of-type) { margin-right: 20px; } .additional-inner-wrap .ono-top-social a { text-decoration: none; color: var(--dark-color); font-size: 15px; transition: color .35s ease; } .additional-inner-wrap .ono-top-social a:hover { color: var(--dark-color); } .additional-inner-wrap .search-title { color: var(--dark-color); font-family: Poppins, sans-serif; font-size: 16px; font-weight: 600; letter-spacing: .1px; } .additional-inner-wrap .search-icon-wrapper { padding: 10px 35px; } .additional-inner-wrap .search-icon-wrapper .input-group { position: relative; } .additional-inner-wrap .search-icon-wrapper .input-group::before { content: ""; height: 3px; width: 50%; position: absolute; bottom: 0; left: 0; background-color: var(--dark-color); } .additional-inner-wrap .search-icon-wrapper .input-group::after { font-family: Ionicons, sans-serif; font-size: 24px; color: var(--dark-color); content:"\f375"; position: absolute; right: 0; top: 50%; transform: translateY(-50%); } .additional-inner-wrap .search-icon-wrapper input { width: 100%; border: 0; padding: 10px 0; border-bottom: 3px solid rgba(34, 34, 34, .2); } .additional-inner-wrap .copy { margin-top: 20px; padding: 0 35px; color: var(--grey-color); font-family: Poppins, sans-serif; font-size: 14px; } .additional-inner-wrap .copy a { text-decoration: none; color: var(--grey-color); font-family: Poppins, sans-serif; font-size: 14px; transition: color .35s ease; } .additional-inner-wrap .copy a:hover { color: var(--dark-color); } } /*------------------------------------------------------*/ /*---------------------- MODERN MENU ----------------------*/ @media only screen and (min-width: 1200px) { .modern #topmenu { padding-right: 70px; } .header_trans-fixed .modern #topmenu { padding-left: 60px; } } @media only screen and (min-width: 1025px) { .modern .logo-mobile { display: none; } .modern #topmenu { display: flex; align-items: center; justify-content: flex-end; } .modern .menu-wrapper { display: flex; align-items: center; } .modern #topmenu .logo { position: absolute; background-color: var(--light-color); min-height: 219px; min-width: 384px; top: 0; left: -15px; display: flex; align-items: center; justify-content: center; padding-bottom: 0; border: 0; transition: all .35s ease; } .modern #topmenu .logo:hover { border: 0; } .modern #topmenu .logo img { max-width: 100px; } .modern .logo span { font-size: 80px; text-transform: lowercase; font-weight: bold; line-height: 1; transition: all .35s ease; display: flex; flex-direction: column; text-align: left; } .modern .logo span i { font-size: 13px; font-weight: normal; letter-spacing: 2px; color: var(--dark-color); text-transform: uppercase; opacity: .3; transition: all .35s ease; font-style: normal; } .header_trans-fixed .modern #topmenu { justify-content: space-between; } .header_trans-fixed .modern #topmenu .logo { background-color: transparent; position: relative; min-width: auto; min-height: auto; left: 0; } .header_trans-fixed .modern #topmenu .logo span { font-size: 30px; } .fixed-header-scroll #topmenu .logo { min-height: 100px; min-width: 200px; } .fixed-header-scroll .logo span, .fixed-header-scroll .aside-fix.three-box .logo span{ font-size: 30px; } .fixed-header-scroll .logo span i, .fixed-header-scroll .aside-fix.three-box .logo span i{ font-size: 10px; letter-spacing: 1px; } .modern .menu > li { margin: 0 15px; } .modern #topmenu a { padding-bottom: 5px; color: var(--grey-color); font-size: 15px; font-weight: 500; text-decoration: none; border-bottom: 2px solid transparent; } .modern #topmenu a:hover, .modern #topmenu li:not(.menu-item-has-children).active > a, .modern #topmenu .current-menu-parent > a, .modern #topmenu .current-menu-item > a, .modern #topmenu .current-menu-ancestor > a { color: #333; } .modern #topmenu .menu > li { padding: 43px 0; } .modern #topmenu .sub-menu { top: 75px; left: -400%; min-width: 270px; padding: 30px 0; background-color: var(--light-color); -webkit-box-shadow: 3px 1px 20px 0 rgba(0, 0, 0, 0.07); box-shadow: 3px 1px 20px 0 rgba(0, 0, 0, 0.07); opacity: 0; visibility: hidden; -webkit-transition: opacity .5s ease, visibility .5s ease; -o-transition: opacity .5s ease, visibility .5s ease; transition: opacity .5s ease, visibility .5s ease; display: block; } .modern #topmenu .menu li:hover > ul { opacity: 1; visibility: visible; } .modern #topmenu .menu > li ul a { opacity: 0; -webkit-transform: matrix(1, 0, 0, 1, 0, 20); -ms-transform: matrix(1, 0, 0, 1, 0, 20); transform: matrix(1, 0, 0, 1, 0, 20); -webkit-transition: opacity .75s ease, color .5s ease, -webkit-transform .75s ease; transition: opacity .75s ease, color .5s ease, -webkit-transform .75s ease; -o-transition: opacity .75s ease, transform .75s ease, color .5s ease; transition: opacity .75s ease, transform .75s ease, color .5s ease; transition: opacity .75s ease, transform .75s ease, color .5s ease, -webkit-transform .75s ease; } .modern #topmenu .menu > li:hover ul a, .modern #topmenu .menu > li.mega-menu:hover ul > li > ul.sub-menu > li a { opacity: 1; -webkit-transform: matrix(1, 0, 0, 1, 0, 0); -ms-transform: matrix(1, 0, 0, 1, 0, 0); transform: matrix(1, 0, 0, 1, 0, 0); } .modern #topmenu .sub-menu .sub-menu { top: 0; right: 100%; left: auto; padding: 40px 15px; } .modern #topmenu .sub-menu li { width: 100%; padding: 8px 35px; text-align: left; } .modern #topmenu .sub-menu li a { width: auto; display: inline-block; padding: 0; font-weight: 600; } .modern #topmenu .current-menu-parent > a, .modern #topmenu .current-menu-item > a { position: relative; } .modern #topmenu .menu .mega-menu:hover > ul > li > ul { opacity: 1; visibility: visible; } .modern .search-icon-wrapper{ display: flex; margin-left: 35px; } .modern .open-search { cursor: pointer; box-shadow: 0 10px 20px 0 rgba(0, 0, 0, 0.05); background-color: var(--light-color); height: 50px; width: 50px; display: flex; align-items: center; justify-content: center; border-radius: 50%; } .modern .site-search { position: fixed; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; z-index: 100; background-color: rgba(255, 255, 255, .99); overflow-x: hidden; overflow-y: auto; opacity: 0; visibility: hidden; -webkit-transition: opacity .7s ease, visibility .7s ease; -o-transition: opacity .7s ease, visibility .7s ease; transition: opacity .7s ease, visibility .7s ease; } .modern .site-search.open { opacity: 1; visibility: visible; } .modern .close-search { position: absolute; top: 100px; right: 100px; font-size: 18px; cursor: pointer; } .modern .form-container { position: relative; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); } .modern .input-group { max-width: 770px; margin: auto; } .modern .search-form input { width: 100%; border: 0; background-color: transparent; padding: 8px 0; border-bottom: 2px solid #ddd; color: var(--dark-color); font-size: 16px; transition: border .35s ease; } .modern .search-form input:focus { border-color: #333; } } @media (max-width: 1024px) { .modern #topmenu > .logo { display: none; } .modern .logo-mobile span i { display: none; } .modern .close-search, .modern .open-search { display: none; } .modern .site-search { padding: 0 35px; } .modern .search-form input { width: 100%; border: 0; background-color: transparent; padding: 8px 0; border-bottom: 2px solid #ddd; color: var(--dark-color); font-size: 16px; transition: border .35s ease; } .modern .search-form input:focus { border-color: #333; } } /*------------------------------------------------------*/ /*---------------------- SIMPLE MENU ----------------------*/ @media only screen and (min-width: 1025px) { .simple .logo-mobile { display: none; } .simple #topmenu { display: grid; grid-template-columns: auto 1fr auto; align-items: center; padding: 0 57px; } .simple .menu-wrapper { display: flex; align-items: center; } .simple #topmenu .logo { display: flex; align-items: center; justify-content: center; padding-bottom: 0; border: 0; transition: all .35s ease; } .simple #topmenu .logo:hover { border: 0; } .simple #topmenu .logo img { max-width: 100px; } .simple .logo span { font-size: 30px; font-weight: bold; transition: all .35s ease; display: flex; flex-direction: column; text-align: left; line-height: normal; letter-spacing: normal; padding: 23px 0; } .simple .menu > li { margin: 0 15px; } .simple #topmenu a { color: var(--grey-color); font-size: 15px; font-weight: 500; text-decoration: none; } .simple #topmenu a:hover, .simple #topmenu li:not(.menu-item-has-children).active > a, .simple #topmenu .current-menu-parent > a, .simple #topmenu .current-menu-item > a, .simple #topmenu .current-menu-ancestor > a { color: var(--dark-color); } .simple #topmenu li li a { color: var(--grey-color); } .simple #topmenu li li a:hover, .simple #topmenu li li:not(.menu-item-has-children).active > a, .simple #topmenu li .current-menu-parent > a, .simple #topmenu li .current-menu-item > a, .simple #topmenu li .current-menu-ancestor > a { color: var(--dark-color); } .simple #topmenu.align-right .menu{ text-align: right; margin-right: 40px; } .simple #topmenu.align-left .menu{ text-align: left; margin-left: 40px; } .simple #topmenu .menu > li { padding: 29px 0; } .simple #topmenu .sub-menu { top: 75px; left: -35px; min-width: 270px; padding: 30px 0; background-color: var(--light-color); -webkit-box-shadow: 3px 1px 20px 0 rgba(0, 0, 0, 0.07); box-shadow: 3px 1px 20px 0 rgba(0, 0, 0, 0.07); opacity: 0; visibility: hidden; -webkit-transition: opacity .5s ease, visibility .5s ease; -o-transition: opacity .5s ease, visibility .5s ease; transition: opacity .5s ease, visibility .5s ease; display: block; } .simple #topmenu .menu li:hover > ul { opacity: 1; visibility: visible; } .simple #topmenu .menu > li ul a { opacity: 0; -webkit-transform: matrix(1, 0, 0, 1, 0, 20); -ms-transform: matrix(1, 0, 0, 1, 0, 20); transform: matrix(1, 0, 0, 1, 0, 20); -webkit-transition: opacity .75s ease, color .5s ease, -webkit-transform .75s ease; transition: opacity .75s ease, color .5s ease, -webkit-transform .75s ease; -o-transition: opacity .75s ease, transform .75s ease, color .5s ease; transition: opacity .75s ease, transform .75s ease, color .5s ease; transition: opacity .75s ease, transform .75s ease, color .5s ease, -webkit-transform .75s ease; } .simple #topmenu .menu > li:hover ul a, .simple #topmenu .menu > li.mega-menu:hover ul > li > ul.sub-menu > li a { opacity: 1; -webkit-transform: matrix(1, 0, 0, 1, 0, 0); -ms-transform: matrix(1, 0, 0, 1, 0, 0); transform: matrix(1, 0, 0, 1, 0, 0); } .simple #topmenu .sub-menu .sub-menu { top: 0; left: 100%; padding: 40px 15px; } .simple #topmenu .menu li:last-of-type .sub-menu .sub-menu, .simple #topmenu .menu li:nth-last-of-type(2) .sub-menu .sub-menu, .simple #topmenu .menu li:nth-last-of-type(3) .sub-menu .sub-menu { left: auto; right: 100%; } .simple #topmenu .sub-menu li { width: 100%; padding: 8px 35px; text-align: left; } .simple #topmenu .sub-menu li a { width: auto; display: inline-block; padding: 0; } .simple #topmenu .current-menu-parent > a, .simple #topmenu .current-menu-item > a { position: relative; } .simple #topmenu .menu .mega-menu:hover > ul > li > ul { opacity: 1; visibility: visible; } .simple .open-search { box-shadow: 0 10px 20px 0 rgba(0, 0, 0, 0.05); cursor: pointer; width: 50px; height: 50px; line-height: 50px; color: var(--dark-color); border-radius: 50%; background-color: var(--light-color); } .simple .site-search { position: fixed; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; z-index: 100; background-color: rgba(255, 255, 255, .99); overflow-x: hidden; overflow-y: auto; opacity: 0; visibility: hidden; -webkit-transition: opacity .7s ease, visibility .7s ease; -o-transition: opacity .7s ease, visibility .7s ease; transition: opacity .7s ease, visibility .7s ease; } .simple .site-search.open { opacity: 1; visibility: visible; } .simple .close-search { position: absolute; top: 100px; right: 100px; font-size: 18px; cursor: pointer; } .simple .form-container { position: relative; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); } .simple .input-group { max-width: 770px; margin: auto; } .simple .search-form input { width: 100%; border: 0; background-color: transparent; padding: 8px 0; border-bottom: 2px solid #ddd; color: var(--dark-color); font-size: 16px; transition: border .35s ease; } .simple .search-form input:focus { border-color: #333; } .menu_light_text .simple .logo span { color: var(--light-color); } .menu_light_text .simple #topmenu .menu > li > a { color: var(--light-color); opacity: .9; } .menu_light_text .simple #topmenu .menu > li:hover > a, .menu_light_text .simple #topmenu .menu > li:not(.menu-item-has-children).active > a, .menu_light_text .simple #topmenu .menu > .current-menu-parent > a, .menu_light_text .simple #topmenu .menu > .current-menu-item > a, .menu_light_text .simple #topmenu .menu > .current-menu-ancestor > a{ color: var(--light-color); opacity: 1; } .simple .search-icon-wrapper{ display: flex; } .menu_light_text .simple .open-search { background-color: var(--light-color); } .bg-fixed-color.menu_light_text .simple #topmenu .menu > li > a { color: var(--grey-color); } .bg-fixed-color.menu_light_text .simple #topmenu .menu > li:hover > a, .bg-fixed-color.menu_light_text .simple #topmenu .menu > li:not(.menu-item-has-children).active > a, .bg-fixed-color.menu_light_text .simple #topmenu .menu > .current-menu-parent > a, .bg-fixed-color.menu_light_text .simple #topmenu .menu > .current-menu-item > a, .bg-fixed-color.menu_light_text .simple #topmenu .menu > .current-menu-ancestor > a, .bg-fixed-color.menu_light_text .simple .open-search, .bg-fixed-color.menu_light_text .simple .logo span { color: var(--dark-color); } } @media (min-width: 1440px) { .simple #topmenu.align-left .menu{ margin-left: 126px; } } @media (max-width: 1024px) { .simple #topmenu > .logo { display: none; } .simple .logo-mobile span i { display: none; } .simple .close-search, .simple .open-search { display: none; } .simple .site-search { padding: 0 35px; } .simple .search-form input { width: 100%; border: 0; background-color: transparent; padding: 8px 0; border-bottom: 2px solid #ddd; color: var(--dark-color); font-size: 16px; transition: border .35s ease; } .simple .search-form input:focus { border-color: #333; } .menu_light_text.header_top_bg .logo span { color: var(--light-color); } .menu_light_text .right-menu .mob-nav .line { background-color: var(--light-color); } .bg-fixed-color.menu_light_text.header_top_bg .logo span { color: var(--dark-color); } .bg-fixed-color.menu_light_text .right-menu .mob-nav .line { background-color: var(--dark-color); } } /*------------------------------------------------------*/ /*---------------------- CREATIVE MENU ----------------------*/ @media only screen and (min-width: 1025px) { .header-button--mobile { display: none; } .header-button { margin-left: 30px; } .header-button-scroll { display: none; } header.creative .logo-mobile { display: none; } header.creative #topmenu { display: flex; align-items: center; justify-content: space-between; margin-left: -15px; margin-right: -15px; padding-left: 15px; padding-right: 15px; } header.creative .menu-wrapper { display: flex; align-items: center; } header.creative .logo { display: flex; align-items: center; justify-content: center; transition: all .35s ease; } header.creative.logo img { max-width: 100px; } header.creative .logo span { font-size: 30px; font-weight: bold; line-height: 1; transition: all .35s ease; } header.creative .menu > li { margin: 0 15px; } header.creative .menu a { color: var(--dark-color); font-size: 15px; font-weight: 600; text-decoration: none; } header.creative .menu li:hover > a, header.creative .menu li:not(.menu-item-has-children).active > a, header.creative .menu .current-menu-parent > a, header.creative .menu .current-menu-item > a, header.creative .menu .current-menu-ancestor > a { color: var(--grey-color); } header.creative .menu > li { padding: 40px 0; } header.creative #topmenu .sub-menu { top: 100%; left: -30px; min-width: 270px; padding: 30px 0; background-color: var(--light-color); -webkit-box-shadow: 3px 1px 20px 0 rgba(0, 0, 0, 0.07); box-shadow: 3px 1px 20px 0 rgba(0, 0, 0, 0.07); opacity: 0; visibility: hidden; -webkit-transition: opacity .5s ease, visibility .5s ease; -o-transition: opacity .5s ease, visibility .5s ease; transition: opacity .5s ease, visibility .5s ease; display: block; } header.creative #topmenu li:hover > .sub-menu { opacity: 1; visibility: visible; } header.creative .menu > li ul a { opacity: 0; -webkit-transform: matrix(1, 0, 0, 1, 0, 20); -ms-transform: matrix(1, 0, 0, 1, 0, 20); transform: matrix(1, 0, 0, 1, 0, 20); -webkit-transition: opacity .75s ease, color .5s ease, -webkit-transform .75s ease; transition: opacity .75s ease, color .5s ease, -webkit-transform .75s ease; -o-transition: opacity .75s ease, transform .75s ease, color .5s ease; transition: opacity .75s ease, transform .75s ease, color .5s ease; transition: opacity .75s ease, transform .75s ease, color .5s ease, -webkit-transform .75s ease; } header.creative .menu > li:hover ul a, header.creative .menu > li.mega-menu:hover ul > li > ul.sub-menu > li a { opacity: 1; -webkit-transform: matrix(1, 0, 0, 1, 0, 0); -ms-transform: matrix(1, 0, 0, 1, 0, 0); transform: matrix(1, 0, 0, 1, 0, 0); } header.creative #topmenu .sub-menu .sub-menu { top: 0; left: 100%; } header.creative #topmenu li:last-of-type .sub-menu .sub-menu, header.creative #topmenu li:nth-last-of-type(2) .sub-menu .sub-menu, header.creative #topmenu li:nth-last-of-type(3) .sub-menu .sub-menu { right: 100%; left: auto; } header.creative .sub-menu li { width: 100%; text-align: left; } header.creative .sub-menu li a { width: auto; display: inline-block; padding: 0; font-weight: 600; } header.creative .current-menu-parent > a, header.creative .current-menu-item > a { position: relative; } header.creative .menu .mega-menu:hover > ul > li > ul { opacity: 1; visibility: visible; } .menu_light_text:not(.bg-fixed-color) header.creative .logo span { color: var(--light-color); } .menu_light_text:not(.bg-fixed-color) header.creative .menu > li:not(:hover) > a { color: var(--light-color); } .menu_light_text:not(.bg-fixed-color) header.creative .menu > li:hover > a, .menu_light_text:not(.bg-fixed-color) header.creative .menu > li:not(.menu-item-has-children).active > a, .menu_light_text:not(.bg-fixed-color) header.creative .menu > .current-menu-parent > a, .menu_light_text:not(.bg-fixed-color) header.creative .menu > .current-menu-item > a, .menu_light_text:not(.bg-fixed-color) header.creative .menu > .current-menu-ancestor > a { color: rgba(255, 255, 255, 0.5); } } @media only screen and (min-width: 1200px) { header.creative #topmenu { padding-right: 7vw; padding-left: 7vw; } } @media (min-width: 1025px) and (max-width: 1280px) { .page-template-full-page-template .aside-fix.three-box .header-left .logo-with-desc { position: absolute; width: 150px; height: 50px; padding-top: 50px; } .page-template-full-page-template .aside-fix.three-box .logo-with-desc span{ font-size: 30px; } .page-template-full-page-template .right-menu.aside-menu.aside-fix { padding-left: 60px; } .page-template-full-page-template .aside-fix .header-left .logo span i { font-size: 10px; letter-spacing: 1px; } } @media (max-width: 1024px) { header.creative #topmenu > .logo { display: none; } header.creative .logo-mobile span i { display: none; } .header-button { display: none; } .header-button--mobile { display: block; padding: 10px 35px 30px; } .header-button a { width: 100%; text-align: center; } } @media only screen and (min-width: 1025px) { /*---------------------- ASIDE MENU / MEGA MENU ----------------------*/ .aside-fix .header-box > .menu li.mega-menu > ul{ width: 100%; max-width: 800px; min-width: 500px; display: flex; flex-wrap: wrap; padding: 30px 0px; right: -140px; left: auto; } .aside-fix.right-menu .header-box ul .mega-menu ul li{ position: static; display: block; } .aside-fix .header-box ul li.mega-menu > ul > li{ width: calc(100% / 2) !important; } .aside-fix.right-menu .header-box ul > li.mega-menu > ul.sub-menu > li > ul.sub-menu{ display: block; position: static; text-align: left; min-width: 100%; box-shadow: none; padding: 0; padding-top: 19px; transition: all .2s ease; background-color: transparent; } .aside-fix.right-menu .header-box ul > li.mega-menu:hover > ul.sub-menu > li > ul.sub-menu{ opacity: 1; visibility: visible; } .aside-fix.right-menu .header-box ul > li.mega-menu > ul > li > ul.sub-menu > li { display: block; padding: 7px 0; } .aside-fix.right-menu .header-box ul > li.mega-menu > ul > li > ul.sub-menu > li a{ font-size: 14px; font-weight: 600; transition: add 0.3s ease; } } .logo img {max-width:60 !important;max-height:52 !important;} .a-btn-1, .a-btn-2, .a-btn-3, .a-btn-4, .a-btn-5, .a-btn-6, .a-btn-7, .a-btn-8, .a-btn-9, .comments input[type="submit"], .comments-form input[type="submit"], .form input[type="submit"] { } a { } /*FOOTER*/ #topmenu ul li a { } #topmenu ul ul li a { }