/* Template Name: Kobe Author: HasTech Description: Multi Store Bootstrap 4 Theme Version: 1.0 */ /****************************** INDEX: 00 - Base - Global 01 - Base - Typography 02 - Base - Helpers 03 - Base - Colors 10 - Layout - Header 11 - Layout - Footer 12 - Layout - Sidebar 20 - Components - Navigation 21 - Components - form 22 - Components - slider 23 - Components - button 24 - Components - tabs 25 - Components - product 26 - Components - clients 27 - Components - modal 28 - Components - social 29 - Components - animation 30 - Components - blog 31 - Components - instagram 32 - Components - breadcumb 33 - Components - pagination 34 - Components - team 35 - Components - testimonial 36 - Components - comment 37 - Components - table 40 - Pages - home 42 - Pages - shop 43 - Pages - single-product 44 - Pages - my-account 45 - Pages - checkout 46 - Pages - cart 47 - Pages - stores 48 - Pages - about 49 - Pages - contact 50 - Pages - 404 ******************************/ /* Defult Primary Color: #333 Default Secondary Color: #c09f52 Default Border Color: #a6a6a6 Default Text Color: #333 Default Body Font: 'Libre Franklin',sans-serif */ @import url("https://fonts.googleapis.com/css?family=Libre+Franklin:300,400,500,600,700,800,900"); /***************************** 00. Global CSS *****************************/ /***************************** 01. Typography CSS *****************************/ html { font-size: 62.5%; max-width: 100%; /* overflow-x: hidden; */ } @font-face { font-family: 'PFFuturaNeu'; src: url('../fonts/pff/PFFuturaNeu-Book.woff2') format('woff2'), url('/assets/fonts/pff/PFFuturaNeu-Book.woff') format('woff'); font-weight: normal; font-style: normal; } @font-face { font-family: 'PFFuturaNeu'; src: url('../fonts/pff/PFFuturaNeu-Light.woff2') format('woff2'), url('/assets/fonts/pff/PFFuturaNeu-Light.woff') format('woff'); font-weight: 300; font-style: normal; } /*@font-face { font-family: 'PFFuturaNeu'; src: url('/assets/fonts/pff/PFFuturaNeu-Thin.woff2') format('woff2'), url('/assets/fonts/pff/PFFuturaNeu-Thin.woff') format('woff'); font-weight: 100; font-style: normal; }*/ @font-face { font-family: 'PFFuturaNeuCondensed'; src: url('../fonts/pff/PFFuturaNeuCondensed-Bold.woff2') format('woff2'), url('/assets/fonts/pff/PFFuturaNeuCondensed-Bold.woff') format('woff'); font-weight: bold; font-style: normal; } /*@font-face { font-family: 'PFFuturaNeuCondensed'; src: url('/assets/fonts/pff/PFFuturaNeuCondensed-Light.woff2') format('woff2'), url('/assets/fonts/pff/PFFuturaNeuCondensed-Light.woff') format('woff'); font-weight: 300; font-style: normal; }*/ @font-face { font-family: 'PFFuturaNeuCondensed'; src: url('../fonts/pff/PFFuturaNeuCondensed-Medium.woff2') format('woff2'), url('/assets/fonts/pff/PFFuturaNeuCondensed-Medium.woff') format('woff'); font-weight: 500; font-style: normal; } @font-face { font-family: 'PFFuturaNeu'; src: url('../fonts/pff/PFFuturaNeu-Bold.woff2') format('woff2'), url('/assets/fonts/pff/PFFuturaNeu-Bold.woff') format('woff'); font-weight: bold; font-style: normal; } /*@font-face { font-family: 'PFFuturaNeuCondensed'; src: url('/assets/fonts/pff/PFFuturaNeuCondensed-Thin.woff2') format('woff2'), url('/assets/fonts/pff/PFFuturaNeuCondensed-Thin.woff') format('woff'); font-weight: 100; font-style: normal; }*/ body { font-size: 1.3rem; font-family: "PFFuturaNeu"; /* color: #fff;*/ line-height: 1.4rem; font-weight: 400; max-width: 100%; overflow-x: hidden; } h1, h2, h3, h4, h5, h6 { font-weight: 700; } p { font-size: 1.5rem; color: #333; font-weight: 400; line-height: 1.6; } .heading-primary { font-size: 4.8rem; line-height: 1; display: block; color: #333; margin-bottom: 1rem; text-transform: uppercase; } .heading-primary span { color: #2874f0; } .heading-primary--2 { font-size: 3.8rem; } @media (max-width: 75em) { .heading-primary { font-size: 4.2rem; } } @media (max-width: 61.94em) { .heading-primary { font-size: 3.8rem; } } @media (max-width: 47.94em) { .heading-primary { font-size: 3rem; } } @media (max-width: 35.94em) { .heading-primary { font-size: 2.5rem; } } .heading-big { color: #333; font-size: 6rem; line-height: 1; margin-bottom: 1rem; text-transform: uppercase; } @media (max-width: 75em) { .heading-big { font-size: 5.5rem; } } @media (max-width: 61.94em) { .heading-big { font-size: 4.5rem; } } @media (max-width: 47.94em) { .heading-big { font-size: 3.5rem; } } @media (max-width: 35.94em) { .heading-big { font-size: 3rem; } } .section-title { position: relative; margin-bottom: 2rem; text-align: center; } .section-title h2 { position: relative; /* display: inline-block; */ text-transform: capitalize; line-height: 3rem; padding: 0 2.5rem 0 0; font-size: 4.4rem; color: #333; background: #fff; z-index: 9; margin-bottom: 0; } @media (max-width: 35.94em) { .section-title h2 { font-size: 2rem; } } @media (max-width: 35.94em) { .section-title:after { height: 2px; } } .section-title--2 h2 { background: #f5f5f5; } .section-title--3 { margin-bottom: 2rem; } .section-title--3 h2 { font-size: 2rem; } /***************************** 03. Helper CSS *****************************/ .color--light { color: #999999; } .color--black { color: #000000; } .color--white { color: #ffffff; } .color--dark { color: #333333; } .color--dark-1 { color: #435065; } .color--dark-2 { color: #323e52; } .color--dark-3 { color: #333; } .color--dark-4 { color: #435065; } .bg--white { background-color: #ffffff; } .bg--light { background-color: #999999; } .bg--dark { background-color: #333333; } .bg--black { background-color: #000000; } .bg--blue { background-color: #2874f0; } .bg--gray { background-color: #f5f5f5; } .bg--gray-2 { background-color: #b6becb; } .bg--gray-3 { background-color: #EFEFEF; } .bg--gray-4 { background-color: #F3F4F8; } @media (min-width: 75em) { .container-fluid { padding-left: 8rem; padding-right: 8rem; } } @media (min-width: 75em) { .container { max-width: 120rem; } } .logo-box { display: block; } .section-padding { padding: 4rem 0; padding-bottom: 0px; } .owl-carousel .owl-item img { width: auto; } .owl-item .product-box__image img { margin: 0 auto; } .line { border-color: rgba(255, 255, 255, 0.1); margin: 0; } .line-black { border-color: rgba(0, 0, 0, 0.1); } .text-block p:last-child { margin-bottom: 0; } .scroll-to-top { position: fixed; right: 25px; bottom: 25px; overflow: hidden; z-index: 999; background: #333333; color: #fff; width: 40px; height: 40px; line-height: 40px; display: block; text-align: center; font-size: 20px; -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -ms-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; } .scroll-to-top:hover { background: #c09f52; color: #fff; } .hide-in-default { display: none; } @media (max-width: 61.94em) { .hide-in-default-md { display: none; } } .ov-hidden { overflow: hidden; } .in-stock { color: #4cbb6c; } .out-stock { color: #ea4a30; } ul { margin: 0; padding: 0; list-style: none; } img { max-width: 100%; } a:hover { color: #111; text-decoration: none; } input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; } input[type=number] { -moz-appearance: textfield; } a, a:hover, a:focus, a:active, button, button:focus, input, select { outline: none; } /************************ Banner Box *************************/ .banner-box { position: relative; display: block; overflow: hidden; } .banner-box img { -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -ms-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; } .banner-box h4 { color: #fff; font-size: 3.6rem; line-height: 1.5; text-transform: capitalize; position: absolute; top: 30px; left: 30px; max-width: 180px; } @media (max-width: 47.94em) { .banner-box h4 { font-size: 3rem; } } .banner-box:hover h4 { -webkit-animation: fadeInRight 0.5s linear; -moz-animation: fadeInRight 0.5s linear; -ms-animation: fadeInRight 0.5s linear; -o-animation: fadeInRight 0.5s linear; animation: fadeInRight 0.5s linear; } .header-top__dropdown .dropdown-menu, .header-cart__dropdown-menu { border-radius: 0; padding: 1.5rem 0; margin: 0; border: none; -webkit-box-shadow: 0 0 7.2px 0.8px rgba(0, 0, 0, 0.1); -moz-box-shadow: 0 0 7.2px 0.8px rgba(0, 0, 0, 0.1); -ms-box-shadow: 0 0 7.2px 0.8px rgba(0, 0, 0, 0.1); -o-box-shadow: 0 0 7.2px 0.8px rgba(0, 0, 0, 0.1); box-shadow: 0 0 7.2px 0.8px rgba(0, 0, 0, 0.1); right: 0 !important; left: auto !important; min-width: 12rem; } .banner-box:hover img, .product-category__thumb img:hover { -webkit-transform: scale3d(1.05, 1.05, 1.05); -moz-transform: scale3d(1.05, 1.05, 1.05); -ms-transform: scale3d(1.05, 1.05, 1.05); -o-transform: scale3d(1.05, 1.05, 1.05); transform: scale3d(1.05, 1.05, 1.05); } a, button, .category-list li, .category-list li:before, .custom-checkbox__label:before, .custom-radio__label span:before, .form-btn, .produtct-combo-tab__link, .produtct-combo-tab .nav-link, .product-box__image img, .product-box__desc, .product-box .add-to-cart, .product-thumbnail .thumb-menu-item a, .single-blog__thumb:before, .team-member__thumb:before, .testimonial-carousel .owl-dots .owl-dot { -webkit-transition: all 0.3s ease-in; -moz-transition: all 0.3s ease-in; -ms-transition: all 0.3s ease-in; -o-transition: all 0.3s ease-in; transition: all 0.3s ease-in; } .section-title:after, .produtct-combo-tab__head:after { position: absolute; content: ""; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); left: 0; height: 4px; width: 100%; } .category-nav__submenu, .mainmenu__item.menu-item-has-children ul, .mainmenu__item.menu-item-has-children ul ul, .custom-radio__label span:before, .slider-wrapper .owl-prev, .slider-wrapper .owl-next, .product-tab__link.nav-link:before, .user-dashboard-tab__head .nav-link:after, .product-box__image .secondary_image, .product-box .quick-view, .product-box .wish-list, .product-box__links, .product-box:hover .product-box__desc, .product-box:hover.variable-product .primary_image, .product-box--horizontal .add-to-cart, .client-carousel .owl-prev, .client-carousel .owl-next, .modal, .single-blog__thumb:before, .instagram-feed__overlay, .instagram-feed__overlay i.fa, .team-member__thumb:before, .team-member__social, .team-member__social i, .single-product__img--popup { visibility: hidden; opacity: 0; } .mainmenu__item.menu-item-has-children ul li:hover ul, .mainmenu li:hover > ul, .custom-radio__input:checked + .custom-radio__label span:before, .slider-wrapper:hover .owl-prev, .slider-wrapper:hover .owl-next, .product-tab__link.nav-link.active:before, .product-tab__link.nav-link:hover:before, .user-dashboard-tab__head .nav-link.active:after, .product-box:hover.variable-product .secondary_image, .product-box:hover .product-box__links, .product-box:hover .quick-view, .product-box:hover .wish-list, .product-box--horizontal:hover .product-box__desc, .product-box--horizontal:hover .add-to-cart, .product-box--small:hover .product-box__desc, .product-box--list:hover .product-box__desc, .product-box--list .add-to-cart, .client-carousel:hover .owl-prev, .client-carousel:hover .owl-next, .modal.show, .single-blog__thumb:hover:before, .instagram-feed__single:hover .instagram-feed__overlay, .instagram-feed__single:hover i.fa, .team-member__thumb:hover:before, .team-member__thumb:hover .team-member__social, .team-member__thumb:hover .team-member__social i, .single-product__img:hover .single-product__img--popup { visibility: visible; opacity: 1; } .search-form__input, .search-form__group, .newsletter-form__input, .form-btn { height: 5rem; line-height: 5rem; } @media (max-width: 21.88em) { .search-form__input, .search-form__group, .newsletter-form__input, .form-btn { height: 4rem; line-height: 4rem; } } .search-form__input, .search-form__select { border: none; font-size: 1.4rem; } @media (max-width: 21.88em) { .search-form__input, .search-form__select { font-size: 1.1rem; } } .mainmenu--2 .mainmenu__item.active a, .mainmenu--2 .mainmenu__link:hover, .mainmenu--2 li.menu-item-has-children ul li a:hover { background: transparent; color: #c09f52; } .mainmenu--3 .mainmenu__item.active a, .mainmenu--3 .mainmenu__link:hover, .mainmenu--3 li.menu-item-has-children ul li a:hover, .mainmenu--4 .mainmenu__item.active a { background: transparent; color: rgba(255, 255, 255, 0.9); } .mainmenu--4 .mainmenu__link:hover, .mainmenu--4 li.menu-item-has-children ul li a:hover { background: transparent; color: #a63e78; } .product-tab__carousel .owl-nav, .product-category .owl-nav, .featured-produts .owl-nav, .best-seller-product__carousel .owl-nav, .best-seller-product__carousel--4 .owl-nav, .trending-product__carousel .owl-nav, .related-product .owl-nav, .blog-carousel .owl-nav { position: absolute; top: -55px; right: -1px; } .product-tab__carousel .owl-nav, .product-category .owl-nav, .featured-produts .owl-nav, .best-seller-product__carousel .owl-nav, .best-seller-product__carousel--4 .owl-nav, .trending-product__carousel .owl-nav, .related-product .owl-nav, .blog-carousel .owl-nav, .blog-carousel--4 .owl-nav { background: #fff; } .featured-produts--3 .owl-nav, .featured-produts--4 .owl-nav, .best-seller-product__carousel--3 .owl-nav, .trending-product__carousel--3 .owl-nav, .trending-product__carousel--4 .owl-nav, .blog-carousel--3 .owl-nav { background: #F3F4F8; } .slider-wrapper .owl-prev, .slider-wrapper .owl-next { display: block; width: 5rem; height: 5rem; line-height: 5rem; border-radius: 50%; color: #fff; background: rgba(51, 51, 51, 0.3); text-align: center; position: absolute; cursor: pointer; top: 50%; font-size: 2rem; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); -webkit-transition: all 0.4s; -moz-transition: all 0.4s; -ms-transition: all 0.4s; -o-transition: all 0.4s; transition: all 0.4s; } .product-box .quick-view, .product-box .wish-list, .product-box .add-to-cart { -webkit-transition: all 0.3s ease-in; -moz-transition: all 0.3s ease-in; -ms-transition: all 0.3s ease-in; -o-transition: all 0.3s ease-in; transition: all 0.3s ease-in; -webkit-transform: scale(0.2); -moz-transform: scale(0.2); -ms-transform: scale(0.2); -o-transform: scale(0.2); transform: scale(0.2); } .product-box:hover .add-to-cart, .product-box .wish-list, .product-box:hover .quick-view { -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); } .product-tab__carousel .owl-prev, .product-tab__carousel .owl-next, .product-category .owl-prev, .product-category .owl-next, .product-thumbnail .owl-prev, .product-thumbnail .owl-next, .featured-produts .owl-prev, .featured-produts .owl-next, .best-seller-product__carousel .owl-prev, .best-seller-product__carousel .owl-next, .best-seller-product__carousel--4 .owl-prev, .best-seller-product__carousel--4 .owl-next, .trending-product__carousel .owl-prev, .trending-product__carousel .owl-next, .related-product .owl-prev, .related-product .owl-next, .client-carousel .owl-prev, .client-carousel .owl-next, .blog-carousel .owl-prev, .blog-carousel .owl-next { display: inline-block; text-align: center; background: #fff; color: #838383; border: 1px solid #ededed; border-radius: 3px; z-index: 1; } .product-tab__carousel .owl-prev:hover, .product-tab__carousel .owl-next:hover, .product-category .owl-prev:hover, .product-category .owl-next:hover, .product-thumbnail .owl-prev:hover, .product-thumbnail .owl-next:hover, .featured-produts .owl-prev:hover, .featured-produts .owl-next:hover, .best-seller-product__carousel .owl-prev:hover, .best-seller-product__carousel .owl-next:hover, .best-seller-product__carousel--4 .owl-prev:hover, .best-seller-product__carousel--4 .owl-next:hover, .trending-product__carousel .owl-prev:hover, .trending-product__carousel .owl-next:hover, .related-product .owl-prev:hover, .related-product .owl-next:hover, .client-carousel .owl-prev:hover, .client-carousel .owl-next:hover, .blog-carousel .owl-prev:hover, .blog-carousel .owl-next:hover { background: #2874f0; border-color: #2874f0; color: #fff; } .featured-produts--2 .owl-prev:hover, .featured-produts--2 .owl-next:hover, .best-seller-product__carousel--2 .owl-prev:hover, .best-seller-product__carousel--2 .owl-next:hover, .trending-product__carousel--2 .owl-prev:hover, .trending-product__carousel--2 .owl-next:hover, .client-carousel--2 .owl-prev:hover, .client-carousel--2 .owl-next:hover, .blog-carousel--2 .owl-prev:hover, .blog-carousel--2 .owl-next:hover { background: #c09f52; border-color: #c09f52; color: #fff; } .featured-produts--3 .owl-prev:hover, .featured-produts--3 .owl-next:hover, .best-seller-product__carousel--3 .owl-prev:hover, .best-seller-product__carousel--3 .owl-next:hover, .trending-product__carousel--3 .owl-prev:hover, .trending-product__carousel--3 .owl-next:hover, .trending-product__carousel--4 .owl-prev:hover, .trending-product__carousel--4 .owl-next:hover, .client-carousel--3 .owl-prev:hover, .client-carousel--3 .owl-next:hover, .blog-carousel--3 .owl-prev:hover, .blog-carousel--3 .owl-next:hover { background: #51aa1b; border-color: #51aa1b; color: #fff; } .featured-produts--4 .owl-prev:hover, .featured-produts--4 .owl-next:hover, .best-seller-product__carousel--5 .owl-prev:hover, .best-seller-product__carousel--5 .owl-next:hover, .trending-product__carousel--5 .owl-prev:hover, .trending-product__carousel--5 .owl-next:hover, .client-carousel--4 .owl-prev:hover, .client-carousel--4 .owl-next:hover, .blog-carousel--4 .owl-prev:hover, .blog-carousel--4 .owl-next:hover { background: #BA4E8A; border-color: #BA4E8A; color: #fff; } .header-cart__item--content p, .header-cart--1 .header-cart__item---content p, .header-cart--2 .header-cart__item--content p, .header-cart--3 .header-cart__item--content p, .product-box .sale-price, .product-box--small-2 .sale-price, .product-box--2 .product-box__price .sale-price, .product-box--3 .product-box__price .sale-price, .product-box--4 .product-box__price .sale-price, .compare-table table td .price .sale-price { padding-right: .5rem; font-weight: 700; } .product-box--list .product-box__price .sale-price { padding-right: 1rem; font-weight: 700; font-size: 2rem; } .product-price .sale-price, .single-product__price .sale-price { font-weight: 700; font-size: 3.2rem; margin-right: 1.3rem; } .product-box--list .product-box__price .regular-price, .compare-table table td .price .regular-price, .single-product__price .regular-price { font-weight: 400; font-size: 2rem; text-decoration: line-through; } .header-cart__item--content p, .header-cart--1 .header-cart__item---content p, .product-box .sale-price, .product-price .sale-price, .compare-table table td .price .sale-price, .single-product__price .sale-price { color: #c09f52; } .header-cart--2 .header-cart__item--content p, .product-box--small-2 .sale-price, .product-box--2 .product-box__price .sale-price { color: #c09f52; } .header-cart--3 .header-cart__item--content p, .product-box--3 .product-box__price .sale-price { color: #51aa1b; } .header-cart--4 .header-cart__item--content p, .product-box--4 .product-box__price .sale-price { color: #BA4E8A; } .product-box .regular-price, .product-price .regular-price { text-decoration: line-through; } .btn, .add-to-cart { text-transform: uppercase; border-radius: 3px; text-decoration: none; display: inline-block; } .content-bg--gray .nav-link { background-color: #F3F4F8 !important; } .product-tab--2 .product-tab__head, .product-tab--3 .product-tab__head { border: none; -webkit-box-pack: end; -ms-flex-pack: end; -webkit-justify-content: flex-end; -moz-justify-content: flex-end; justify-content: flex-end; margin-top: -4.3rem; margin-right: 9rem; margin-bottom: 3rem; } @media (max-width: 75em) { .product-tab--2 .product-tab__head, .product-tab--3 .product-tab__head { margin-top: -4.8rem; margin-bottom: 2.5rem; } } @media (max-width: 47.94em) { .product-tab--2 .product-tab__head, .product-tab--3 .product-tab__head { margin-top: 0; -webkit-box-pack: start; -ms-flex-pack: start; -webkit-justify-content: flex-start; -moz-justify-content: flex-start; justify-content: flex-start; } } @media (max-width: 21.88em) { .product-tab--2 .product-tab__head, .product-tab--3 .product-tab__head { -webkit-box-direction: normal; -webkit-box-orient: vertical; -webkit-flex-direction: column; -moz-flex-direction: column; -ms-flex-direction: column; flex-direction: column; } } .product-tab--2 .product-tab__head .product-tab__link, .product-tab--3 .product-tab__head .product-tab__link { border: none; padding: 0 1.2rem; } .category-nav--4, .category-nav--4 .category-nav__menu, .form .pass-show-btn, .product-tab--2 .product-tab__content, .product-tab--3 .product-tab__content { border: none !important; } .product-details .product-reference label, .product-details .product-quantities label { font-weight: 700; color: #333; margin-bottom: 0; font-size: 1.6rem; line-height: 1.5; } .form-box a, a.forgot-pass { color: #333; font-size: 1.4rem; line-height: 1.8; display: block; } .cart-table table, .compare-table table { border-left: 1px solid #ededed; border-bottom: 1px solid #ededed; } .cart-table table td, .cart-table table th, .compare-table table td, .compare-table table th { border-right: 1px solid #ededed; border-top: 1px solid #ededed; } .mainmenu li.menu-item-has-children:after { position: absolute; top: 50%; margin-top: -7px; font-family: fontAwesome; } .mainmenu li.menu-item-has-children:after { color: #333; } .mainmenu--2 li.menu-item-has-children:after, .mainmenu--3 li.menu-item-has-children:after, .mainmenu--4 li.menu-item-has-children:after { color: #fff; } /*Padding Top and Bottom*/ .ptb--30 { padding: 3rem 0; } .ptb--40 { padding: 4rem 0; } .ptb--50 { padding: 5rem 0; } .ptb--60 { padding: 6rem 0; } .ptb--70 { padding: 7rem 0; } .ptb--80 { padding: 8rem 0; } .ptb--90 { padding: 9rem 0; } .ptb--100 { padding: 10rem 0; } .ptb--110 { padding: 11rem 0; } .ptb--120 { padding: 12rem 0; } .ptb--130 { padding: 13rem 0; } .ptb--140 { padding: 14rem 0; } .ptb--150 { padding: 15rem 0; } .ptb--160 { padding: 16rem 0; } .ptb--170 { padding: 17rem 0; } .pb--30 { padding-bottom: 6rem; } .pb--40 { padding-bottom: 4rem; } .pb--50 { padding-bottom: 5rem; } .pb--60 { padding-bottom: 6rem; } .pb--70 { padding-bottom: 7rem; } .pb--80 { padding-bottom: 8rem; } .pb--90 { padding-bottom: 9rem; } .pb--100 { padding-bottom: 10rem; } .pb--110 { padding-bottom: 11rem; } .pb--120 { padding-bottom: 12rem; } .pb--130 { padding-bottom: 13rem; } .pb--140 { padding-bottom: 14rem; } .pb--150 { padding-bottom: 15rem; } .pb--160 { padding-bottom: 16rem; } .pb--170 { padding-bottom: 17rem; } .pt--30 { padding-top: 3rem; } .pt--40 { padding-top: 4rem; } .pt--50 { padding-top: 5rem; } .pt--60 { padding-top: 6rem; } .pt--70 { padding-top: 7rem; } .pt--80 { padding-top: 8rem; } .pt--90 { padding-top: 9rem; } .pt--100 { padding-top: 10rem; } .pt--110 { padding-top: 11rem; } .pt--120 { padding-top: 12rem; } .pt--130 { padding-top: 13rem; } .pt--140 { padding-top: 14rem; } .pt--150 { padding-top: 15rem; } .pt--160 { padding-top: 16rem; } .pt--170 { padding-top: 17rem; } .mtb--20 { margin: 2rem 0; } .mtb--30 { margin: 3rem 0; } .mtb--40 { margin: 4rem 0; } .mtb--50 { margin: 5rem 0; } .mtb--60 { margin: 6rem 0; } .mtb--70 { margin: 7rem 0; } .mtb--80 { margin: 8rem 0; } .mtb--90 { margin: 9rem 0; } .mtb--100 { margin: 10rem 0; } .mtb--110 { margin: 11rem 0; } .mtb--120 { margin: 12rem 0; } .mtb--130 { margin: 13rem 0; } .mtb--140 { margin: 14rem 0; } .mtb--150 { margin: 15rem 0; } .mtb--160 { margin: 16rem 0; } .mtb--170 { margin: 17rem 0; } .mb--20 { margin-bottom: 2rem; } .mb--30 { margin-bottom: 3rem; } .mb--40 { margin-bottom: 4rem; } .mb--50 { margin-bottom: 5rem; } .mb--60 { margin-bottom: 6rem; } .mb--70 { margin-bottom: 7rem; } .mb--80 { margin-bottom: 8rem; } .mb--90 { margin-bottom: 9rem; } .mb--100 { margin-bottom: 10rem; } .mb--110 { margin-bottom: 11rem; } .mb--120 { margin-bottom: 12rem; } .mb--130 { margin-bottom: 13rem; } .mb--140 { margin-bottom: 14rem; } .mb--150 { margin-bottom: 15rem; } .mb--160 { margin-bottom: 16rem; } .mb--170 { margin-bottom: 17rem; } @media (min-width: 61.94em) { .mb-lgo--20 { margin-bottom: 2rem; } } @media (min-width: 61.94em) { .mb-lgo--30 { margin-bottom: 3rem; } } @media (min-width: 61.94em) { .mb-lgo--40 { margin-bottom: 4rem; } } @media (min-width: 61.94em) { .mb-lgo--50 { margin-bottom: 5rem; } } @media (min-width: 61.94em) { .mb-lgo--60 { margin-bottom: 6rem; } } @media (min-width: 61.94em) { .mb-lgo--70 { margin-bottom: 7rem; } } @media (min-width: 61.94em) { .mb-lgo--80 { margin-bottom: 8rem; } } @media (min-width: 61.94em) { .mb-lgo--90 { margin-bottom: 9rem; } } @media (min-width: 61.94em) { .mb-lgo--100 { margin-bottom: 10rem; } } @media (min-width: 61.94em) { .mb-lgo--110 { margin-bottom: 11rem; } } @media (min-width: 61.94em) { .mb-lgo--120 { margin-bottom: 12rem; } } @media (min-width: 61.94em) { .mb-lgo--130 { margin-bottom: 13rem; } } @media (min-width: 61.94em) { .mb-lgo--140 { margin-bottom: 14rem; } } @media (min-width: 61.94em) { .mb-lgo--150 { margin-bottom: 15rem; } } @media (min-width: 61.94em) { .mb-lgo--160 { margin-bottom: 16rem; } } @media (min-width: 61.94em) { .mb-lgo--170 { margin-bottom: 17rem; } } @media (max-width: 61.94em) { .mb-md--20 { margin-bottom: 2rem; } } @media (max-width: 61.94em) { .mb-md--30 { margin-bottom: 3rem; } } @media (max-width: 61.94em) { .mb-md--40 { margin-bottom: 4rem; } } @media (max-width: 61.94em) { .mb-md--50 { margin-bottom: 5rem; } } @media (max-width: 61.94em) { .mb-md--60 { margin-bottom: 6rem; } } @media (max-width: 61.94em) { .mb-md--70 { margin-bottom: 7rem; } } @media (max-width: 61.94em) { .mb-md--80 { margin-bottom: 8rem; } } @media (max-width: 61.94em) { .mb-md--90 { margin-bottom: 9rem; } } @media (max-width: 61.94em) { .mb-md--100 { margin-bottom: 10rem; } } @media (max-width: 61.94em) { .mb-md--110 { margin-bottom: 11rem; } } @media (max-width: 61.94em) { .mb-md--120 { margin-bottom: 12rem; } } @media (max-width: 61.94em) { .mb-md--130 { margin-bottom: 13rem; } } @media (max-width: 61.94em) { .mb-md--140 { margin-bottom: 14rem; } } @media (max-width: 61.94em) { .mb-md--150 { margin-bottom: 15rem; } } @media (max-width: 61.94em) { .mb-md--160 { margin-bottom: 16rem; } } @media (max-width: 61.94em) { .mb-md--170 { margin-bottom: 17rem; } } @media (max-width: 47.94em) { .mb-sm--20 { margin-bottom: 2rem; } } @media (max-width: 47.94em) { .mb-sm--30 { margin-bottom: 3rem; } } @media (max-width: 47.94em) { .mb-sm--40 { margin-bottom: 4rem; } } @media (max-width: 47.94em) { .mb-sm--50 { margin-bottom: 5rem; } } @media (max-width: 47.94em) { .mb-sm--60 { margin-bottom: 6rem; } } @media (max-width: 47.94em) { .mb-sm--70 { margin-bottom: 7rem; } } @media (max-width: 47.94em) { .mb-sm--80 { margin-bottom: 8rem; } } @media (max-width: 47.94em) { .mb-sm--90 { margin-bottom: 9rem; } } @media (max-width: 47.94em) { .mb-sm--100 { margin-bottom: 10rem; } } @media (max-width: 47.94em) { .mb-sm--110 { margin-bottom: 11rem; } } @media (max-width: 47.94em) { .mb-sm--120 { margin-bottom: 12rem; } } @media (max-width: 47.94em) { .mb-sm--130 { margin-bottom: 13rem; } } @media (max-width: 47.94em) { .mb-sm--140 { margin-bottom: 14rem; } } @media (max-width: 47.94em) { .mb-sm--150 { margin-bottom: 15rem; } } @media (max-width: 47.94em) { .mb-sm--160 { margin-bottom: 16rem; } } @media (max-width: 47.94em) { .mb-sm--170 { margin-bottom: 17rem; } } .mt--20 { margin-top: 2rem; } .mt--30 { margin-top: 3rem; } .mt--40 { margin-top: 4rem; } .mt--50 { margin-top: 5rem; } .mt--60 { margin-top: 6rem; } .mt--70 { margin-top: 7rem; } .mt--80 { margin-top: 8rem; } .mt--90 { margin-top: 9rem; } .mt--100 { margin-top: 10rem; } .mt--110 { margin-top: 11rem; } .mt--120 { margin-top: 12rem; } .mt--130 { margin-top: 13rem; } .mt--140 { margin-top: 14rem; } .mt--150 { margin-top: 15rem; } .mt--160 { margin-top: 16rem; } .mt--170 { margin-top: 17rem; } @media (max-width: 61.94em) { .mt-md--20 { margin-top: 2rem; } } @media (max-width: 61.94em) { .mt-md--30 { margin-top: 3rem; } } @media (max-width: 61.94em) { .mt-md--40 { margin-top: 4rem; } } @media (max-width: 61.94em) { .mt-md--50 { margin-top: 5rem; } } @media (max-width: 61.94em) { .mt-md--60 { margin-top: 6rem; } } @media (max-width: 61.94em) { .mt-md--70 { margin-top: 7rem; } } @media (max-width: 61.94em) { .mt-md--80 { margin-top: 8rem; } } @media (max-width: 61.94em) { .mt-md--90 { margin-top: 9rem; } } @media (max-width: 61.94em) { .mt-md--100 { margin-top: 10rem; } } @media (max-width: 61.94em) { .mt-md--110 { margin-top: 11rem; } } @media (max-width: 61.94em) { .mt-md--120 { margin-top: 12rem; } } @media (max-width: 61.94em) { .mt-md--130 { margin-top: 13rem; } } @media (max-width: 61.94em) { .mt-md--140 { margin-top: 14rem; } } @media (max-width: 61.94em) { .mt-md--150 { margin-top: 15rem; } } @media (max-width: 61.94em) { .mt-md--160 { margin-top: 16rem; } } @media (max-width: 61.94em) { .mt-md--170 { margin-top: 17rem; } } @media (max-width: 47.94em) { .mt-sm--20 { margin-top: 2rem; } } @media (max-width: 47.94em) { .mt-sm--30 { margin-top: 3rem; } } @media (max-width: 47.94em) { .mt-sm--40 { margin-top: 4rem; } } @media (max-width: 47.94em) { .mt-sm--50 { margin-top: 5rem; } } @media (max-width: 47.94em) { .mt-sm--60 { margin-top: 6rem; } } @media (max-width: 47.94em) { .mt-sm--70 { margin-top: 7rem; } } @media (max-width: 47.94em) { .mt-sm--80 { margin-top: 8rem; } } @media (max-width: 47.94em) { .mt-sm--90 { margin-top: 9rem; } } @media (max-width: 47.94em) { .mt-sm--100 { margin-top: 10rem; } } @media (max-width: 47.94em) { .mt-sm--110 { margin-top: 11rem; } } @media (max-width: 47.94em) { .mt-sm--120 { margin-top: 12rem; } } @media (max-width: 47.94em) { .mt-sm--130 { margin-top: 13rem; } } @media (max-width: 47.94em) { .mt-sm--140 { margin-top: 14rem; } } @media (max-width: 47.94em) { .mt-sm--150 { margin-top: 15rem; } } @media (max-width: 47.94em) { .mt-sm--160 { margin-top: 16rem; } } @media (max-width: 47.94em) { .mt-sm--170 { margin-top: 17rem; } } @media (max-width: 35.94em) { .mt-xs--20 { margin-top: 2rem; } } @media (max-width: 35.94em) { .mt-xs--30 { margin-top: 3rem; } } @media (max-width: 35.94em) { .mt-xs--40 { margin-top: 4rem; } } @media (max-width: 35.94em) { .mt-xs--50 { margin-top: 5rem; } } @media (max-width: 35.94em) { .mt-xs--60 { margin-top: 6rem; } } @media (max-width: 35.94em) { .mt-xs--70 { margin-top: 7rem; } } @media (max-width: 35.94em) { .mt-xs--80 { margin-top: 8rem; } } @media (max-width: 35.94em) { .mt-xs--90 { margin-top: 9rem; } } @media (max-width: 35.94em) { .mt-xs--100 { margin-top: 10rem; } } @media (max-width: 35.94em) { .mt-xs--110 { margin-top: 11rem; } } @media (max-width: 35.94em) { .mt-xs--120 { margin-top: 12rem; } } @media (max-width: 35.94em) { .mt-xs--130 { margin-top: 13rem; } } @media (max-width: 35.94em) { .mt-xs--140 { margin-top: 14rem; } } @media (max-width: 35.94em) { .mt-xs--150 { margin-top: 15rem; } } @media (max-width: 35.94em) { .mt-xs--160 { margin-top: 16rem; } } @media (max-width: 35.94em) { .mt-xs--170 { margin-top: 17rem; } } .ml--10 { margin-left: 1rem; } .ml--20 { margin-left: 2rem; } .ml--30 { margin-left: 3rem; } .ml--40 { margin-left: 4rem; } .ml--50 { margin-left: 5rem; } .ml--60 { margin-left: 6rem; } .ml--70 { margin-left: 7rem; } .ml--80 { margin-left: 8rem; } .ml--90 { margin-left: 9rem; } .ml--100 { margin-left: 10rem; } .ml--110 { margin-left: 11rem; } .ml--120 { margin-left: 12rem; } .ml--130 { margin-left: 13rem; } .ml--140 { margin-left: 14rem; } .ml--150 { margin-left: 15rem; } .ml--160 { margin-left: 16rem; } .ml--170 { margin-left: 17rem; } .mr--10 { margin-right: 1rem; } .mr--20 { margin-right: 2rem; } .mr--30 { margin-right: 3rem; } .mr--40 { margin-right: 4rem; } .mr--50 { margin-right: 5rem; } .mr--60 { margin-right: 6rem; } .mr--70 { margin-right: 7rem; } .mr--80 { margin-right: 8rem; } .mr--90 { margin-right: 9rem; } .mr--100 { margin-right: 10rem; } .mr--110 { margin-right: 11rem; } .mr--120 { margin-right: 12rem; } .mr--130 { margin-right: 13rem; } .mr--140 { margin-right: 14rem; } .mr--150 { margin-right: 15rem; } .mr--160 { margin-right: 16rem; } .mr--170 { margin-right: 17rem; } @media (max-width: 61.94em) { .mb-md--20 { margin-bottom: 2rem; } } @media (max-width: 61.94em) { .mb-md--30 { margin-bottom: 3rem; } } @media (max-width: 61.94em) { .mb-md--40 { margin-bottom: 4rem; } } @media (max-width: 61.94em) { .mb-md--50 { margin-bottom: 5rem; } } @media (max-width: 61.94em) { .mb-md--60 { margin-bottom: 6rem; } } @media (max-width: 61.94em) { .mb-md--70 { margin-bottom: 7rem; } } @media (max-width: 61.94em) { .mb-md--80 { margin-bottom: 8rem; } } @media (max-width: 61.94em) { .mb-md--90 { margin-bottom: 9rem; } } @media (max-width: 61.94em) { .mb-md--100 { margin-bottom: 10rem; } } @media (max-width: 61.94em) { .mb-md--110 { margin-bottom: 11rem; } } @media (max-width: 61.94em) { .mb-md--120 { margin-bottom: 12rem; } } @media (max-width: 61.94em) { .mb-md--130 { margin-bottom: 13rem; } } @media (max-width: 61.94em) { .mb-md--140 { margin-bottom: 14rem; } } @media (max-width: 61.94em) { .mb-md--150 { margin-bottom: 15rem; } } @media (max-width: 61.94em) { .mb-md--160 { margin-bottom: 16rem; } } @media (max-width: 61.94em) { .mb-md--170 { margin-bottom: 17rem; } } @media (max-width: 47.94em) { .mb-sm--20 { margin-bottom: 2rem; } } @media (max-width: 47.94em) { .mb-sm--30 { margin-bottom: 3rem; } } @media (max-width: 47.94em) { .mb-sm--40 { margin-bottom: 4rem; } } @media (max-width: 47.94em) { .mb-sm--50 { margin-bottom: 5rem; } } @media (max-width: 47.94em) { .mb-sm--60 { margin-bottom: 6rem; } } @media (max-width: 47.94em) { .mb-sm--70 { margin-bottom: 7rem; } } @media (max-width: 47.94em) { .mb-sm--80 { margin-bottom: 8rem; } } @media (max-width: 47.94em) { .mb-sm--90 { margin-bottom: 9rem; } } @media (max-width: 47.94em) { .mb-sm--100 { margin-bottom: 10rem; } } @media (max-width: 47.94em) { .mb-sm--110 { margin-bottom: 11rem; } } @media (max-width: 47.94em) { .mb-sm--120 { margin-bottom: 12rem; } } @media (max-width: 47.94em) { .mb-sm--130 { margin-bottom: 13rem; } } @media (max-width: 47.94em) { .mb-sm--140 { margin-bottom: 14rem; } } @media (max-width: 47.94em) { .mb-sm--150 { margin-bottom: 15rem; } } @media (max-width: 47.94em) { .mb-sm--160 { margin-bottom: 16rem; } } @media (max-width: 47.94em) { .mb-sm--170 { margin-bottom: 17rem; } } @media (max-width: 35.94em) { .mb-xsm--20 { margin-bottom: 2rem; } } @media (max-width: 35.94em) { .mb-xsm--30 { margin-bottom: 3rem; } } @media (max-width: 35.94em) { .mb-xsm--40 { margin-bottom: 4rem; } } @media (max-width: 35.94em) { .mb-xsm--50 { margin-bottom: 5rem; } } @media (max-width: 35.94em) { .mb-xsm--60 { margin-bottom: 6rem; } } @media (max-width: 35.94em) { .mb-xsm--70 { margin-bottom: 7rem; } } @media (max-width: 35.94em) { .mb-xsm--80 { margin-bottom: 8rem; } } @media (max-width: 35.94em) { .mb-xsm--90 { margin-bottom: 9rem; } } @media (max-width: 35.94em) { .mb-xsm--100 { margin-bottom: 10rem; } } @media (max-width: 35.94em) { .mb-xsm--110 { margin-bottom: 11rem; } } @media (max-width: 35.94em) { .mb-xsm--120 { margin-bottom: 12rem; } } @media (max-width: 35.94em) { .mb-xsm--130 { margin-bottom: 13rem; } } @media (max-width: 35.94em) { .mb-xsm--140 { margin-bottom: 14rem; } } @media (max-width: 35.94em) { .mb-xsm--150 { margin-bottom: 15rem; } } @media (max-width: 35.94em) { .mb-xsm--160 { margin-bottom: 16rem; } } @media (max-width: 35.94em) { .mb-xsm--170 { margin-bottom: 17rem; } } @media (max-width: 61.94em) { .mt-sm--20 { margin-top: 2rem; } } @media (max-width: 61.94em) { .mt-sm--30 { margin-top: 3rem; } } @media (max-width: 61.94em) { .mt-sm--40 { margin-top: 4rem; } } @media (max-width: 61.94em) { .mt-sm--50 { margin-top: 5rem; } } @media (max-width: 61.94em) { .mt-sm--60 { margin-top: 6rem; } } @media (max-width: 61.94em) { .mt-sm--70 { margin-top: 7rem; } } @media (max-width: 61.94em) { .mt-sm--80 { margin-top: 8rem; } } @media (max-width: 61.94em) { .mt-sm--90 { margin-top: 9rem; } } @media (max-width: 61.94em) { .mt-sm--100 { margin-top: 10rem; } } @media (max-width: 61.94em) { .mt-sm--110 { margin-top: 11rem; } } @media (max-width: 61.94em) { .mt-sm--120 { margin-top: 12rem; } } @media (max-width: 61.94em) { .mt-sm--130 { margin-top: 13rem; } } @media (max-width: 61.94em) { .mt-sm--140 { margin-top: 14rem; } } @media (max-width: 61.94em) { .mt-sm--150 { margin-top: 15rem; } } @media (max-width: 61.94em) { .mt-sm--160 { margin-top: 16rem; } } @media (max-width: 61.94em) { .mt-sm--170 { margin-top: 17rem; } } /***************************** 10. Header CSS *****************************/ .header-top { padding: 1.5rem 0; } @media (max-width: 21.88em) { .header-top__nav { -webkit-box-direction: normal; -webkit-box-orient: vertical; -webkit-flex-direction: column; -moz-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-box-align: center; -webkit-align-items: center; -moz-align-items: center; align-items: center; } } .header-top__nav--item { padding: 0 1.5rem; border-left: 1px solid #a6a6a6; line-height: 1.2; color: #333; } @media (max-width: 21.88em) { .header-top__nav--item { padding: .5rem 0; border-left: 0; } } .header-top__nav--item:first-child { border-left: 0; padding-left: 0; } .header-top__nav--item:last-child { padding-right: 0; } .header-top__nav--2 .header-top__nav--item { color: #fff; } .header-top__nav--2 .header-top__nav--item a:not([href]):hover, .header-top__nav--2 .header-top__nav--item a:hover { color: #c09f52; } .header-top__nav--3 .header-top__nav--item a:not([href]):hover, .header-top__nav--3 .header-top__nav--item a:hover { color: #51aa1b; } .header-top__nav--4 .header-top__nav--item { color: #c9c9c9; } .header-top__nav--4 .header-top__nav--item a:not([href]):hover, .header-top__nav--4 .header-top__nav--item a:hover { color: #BA4E8A; } @media (max-width: 47.94em) { .header-top__nav--4 { margin-bottom: 1rem; } } .header-top__dropdown .dropdown-toggle { cursor: pointer; margin-right: 2px; } .header-top__dropdown .dropdown-toggle:not([href]):hover { color: #2874f0; } .header-top__dropdown .dropdown-toggle:after { display: none; } .header-top__dropdown .dropdown-toggle i.fa { margin-left: 2px; } .header-top__dropdown .dropdown-menu { top: 1.5rem !important; } @media (max-width: 21.88em) { .header-top__dropdown .dropdown-menu { top: .5rem !important; } } .header-top__dropdown .dropdown-item { padding: 0 2rem; font-size: 1.3rem; line-height: 2.3; color: #333; } .header-top__dropdown .dropdown-item:hover { background-color: transparent; color: #2874f0; } .header-top .language-selector .dropdown-toggle { display: -webkit-box; display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: flex; -webkit-box-align: center; -ms-box-align: center; -webkit-align-items: center; -moz-align-items: center; align-items: center; } .header-top .language-selector .dropdown-toggle img { margin-right: 5px; } @media (max-width: 61.94em) { .header-middle { padding-bottom: 1.5rem; } } .header-middle__left { height: 8rem; display: -webkit-box; display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; -webkit-justify-content: space-between; -moz-justify-content: space-between; justify-content: space-between; -webkit-box-align: center; -ms-box-align: center; -webkit-align-items: center; -moz-align-items: center; align-items: center; } @media (max-width: 35.94em) { .header-middle__left { -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; -moz-justify-content: center; justify-content: center; margin-bottom: 1rem; } } .header-middle .logo-box { display: block; margin-right: 5px; } .header-cart { height: 100%; position: relative; text-align: right; } @media (max-width: 35.94em) { .header-cart { text-align: center; margin-bottom: 2rem; } } .header-cart__dropdown-toggle:not([href]):not([tabindex]) { color: #fff; cursor: pointer; position: relative; display: inline-block; } @media (max-width: 61.94em) { .header-cart__dropdown-toggle:not([href]):not([tabindex]) { margin-top: 2.5rem; } } @media (max-width: 35.94em) { .header-cart__dropdown-toggle:not([href]):not([tabindex]) { margin-top: .5rem; } } .header-cart__dropdown-toggle:not([href]):not([tabindex]):hover { color: #fff; } .header-cart__icon { font-size: 3.2rem; font-weight: 400; padding-right: 3rem; } .header-cart__count { position: absolute; top: -1.5rem; left: 3.5rem; width: 2rem; height: 2rem; line-height: 2rem; text-align: center; background: #ffe11b; color: #333; border-radius: 50%; font-weight: 600; font-size: 1rem; } .header-cart__ammount { font-size: 14px; font-weight: 600; } .header-cart__dropdown-menu { min-width: 30rem; width: 100%; top: 5.6rem !important; position: absolute; background-color: #fff; z-index: 9999999; overflow: hidden; display: none; } @media (max-width: 61.94em) { .header-cart__dropdown-menu { top: 6.5rem !important; } } @media (max-width: 35.94em) { .header-cart__dropdown-menu { top: 5.6rem !important; } } .header-cart__content { padding: 0 2rem; position: relative; text-align: left; } .header-cart__close-btn { position: absolute; right: .8rem; top: -1rem; font-size: 1.7rem; z-index: 99; cursor: pointer; color: rgba(44, 46, 61, 0.8); } .header-cart__item { display: -webkit-box; display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: flex; -webkit-box-align: center; -ms-box-align: center; -webkit-align-items: center; -moz-align-items: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; -webkit-justify-content: space-between; -moz-justify-content: space-between; justify-content: space-between; border-bottom: 1px solid #ededed; padding-bottom: 2rem; padding-top: 1rem; } @media (max-width: 21.88em) { .header-cart__item { -ms-flex-wrap: wrap; -webkit-flex-wrap: wrap; -mox-flex-wrap: wrap; flex-wrap: wrap; } } .header-cart__item--image { margin-right: 2rem; -webkit-flex: 0 0 7rem; -moz-flex: 0 0 7rem; -ms-flex: 0 0 7rem; flex: 0 0 7rem; position: relative; } @media (max-width: 61.94em) { .header-cart__item--image { -webkit-flex: 0 0 12rem; -moz-flex: 0 0 12rem; -ms-flex: 0 0 12rem; flex: 0 0 12rem; } } @media (max-width: 47.94em) { .header-cart__item--image { -webkit-flex: 0 0 10rem; -moz-flex: 0 0 10rem; -ms-flex: 0 0 10rem; flex: 0 0 10rem; } } .header-cart__item--quantity { position: absolute; top: 5px; left: 5px; width: 2.5rem; height: 2.5rem; line-height: 2.5rem; text-align: center; background: #2874f0; color: #fff; font-size: 1.6rem; border-radius: 50%; } .header-cart__item--content { -webkit-flex: 0 0 calc(100% - 9rem); -moz-flex: 0 0 calc(100% - 9rem); -ms-flex: 0 0 calc(100% - 9rem); flex: 0 0 calc(100% - 9rem); } @media (max-width: 61.94em) { .header-cart__item--content { -webkit-flex: 0 0 calc(100% - 14rem); -moz-flex: 0 0 calc(100% - 14rem); -ms-flex: 0 0 calc(100% - 14rem); flex: 0 0 calc(100% - 14rem); } } @media (max-width: 47.94em) { .header-cart__item--content { -webkit-flex: 0 0 calc(100% - 12rem); -moz-flex: 0 0 calc(100% - 12rem); -ms-flex: 0 0 calc(100% - 12rem); flex: 0 0 calc(100% - 12rem); } } .header-cart__item--content h4 a { word-wrap: break-word; text-overflow: ellipsis; white-space: normal; color: #666666; text-transform: capitalize; font-size: 1.6rem; font-weight: 400; } .header-cart__item--content h4 a:hover { color: #2874f0; } .header-cart__item--content span { display: block; font-size: 1.4rem; margin-bottom: 8px; } .header-cart__list { padding: 2rem 0; margin-bottom: 2rem; border-bottom: 1px solid #ededed; } .header-cart__single { display: -webkit-box; display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; -webkit-justify-content: space-between; -moz-justify-content: space-between; justify-content: space-between; -webkit-box-align: center; -ms-box-align: center; -webkit-align-items: center; -moz-align-items: center; align-items: center; padding: 4px 0; } .header-cart__single span { font-weight: 700; font-size: 1.6rem; } .header-cart__single--title { color: #333333; } .header-cart__single--ammount { color: #ea4a30; } .header-cart__btn { text-align: center; } .header-cart--1 .header-cart__count { background: #ffe11b; color: #333; } .header-cart--1 .header-cart__item--quantity { background: #2874f0; } .header-cart--1 .header-cart__single--ammount { color: #ea4a30; } .header-cart--1 .header-cart__item--content h4 a:hover { color: #2874f0; } .header-cart--1 a:hover { color: #2874f0; } @media (max-width: 35.94em) { .header-cart--2 .header-cart__dropdown-toggle:not([href]):not([tabindex]) { margin-top: 2rem; } } .header-cart--2 .header-cart__count { background: #c09f52; color: #fff; } .header-cart--2 .header-cart__item--quantity { background: #c09f52; } .header-cart--2 .header-cart__single--ammount { color: #c09f52; } .header-cart--2 a:hover { color: #c09f52; } .header-cart--2 .header-cart__item--content h4 a:hover { color: #c09f52; } .header-cart--3 .header-cart__dropdown-toggle:not([href]):not([tabindex]) { color: #333; } @media (max-width: 35.94em) { .header-cart--3 .header-cart__dropdown-toggle:not([href]):not([tabindex]) { margin-top: 2rem; } } .header-cart--3 .header-cart__count { background: #f5a623; color: #fff; } .header-cart--3 .header-cart__item--quantity { background: #51aa1b; } .header-cart--3 .header-cart__single--ammount { color: #51aa1b; } .header-cart--3 a:hover { color: #51aa1b; } .header-cart--3 .header-cart__item--content h4 a:hover { color: #51aa1b; } .header-cart--4 { -webkit-flex: 0 0 10rem; -moz-flex: 0 0 10rem; -ms-flex: 0 0 10rem; flex: 0 0 10rem; } @media (max-width: 61.94em) { .header-cart--4 { -webkit-flex: 0 0 100%; -moz-flex: 0 0 100%; -ms-flex: 0 0 100%; flex: 0 0 100%; } } @media (max-width: 35.94em) { .header-cart--4 { text-align: right; } } .header-cart--4 .header-cart__dropdown-toggle:not([href]):not([tabindex]) { position: relative; text-align: center; display: block; padding-top: 1.2rem; background-color: #292929; height: 100%; width: 100%; } @media (max-width: 61.94em) { .header-cart--4 .header-cart__dropdown-toggle:not([href]):not([tabindex]) { margin: 0; display: inline-block; width: 10rem; } } @media (max-width: 61.94em) { .header-cart--4 .header-cart__dropdown-toggle { margin-left: auto; width: 10rem; } } @media (max-width: 35.94em) { .header-cart--4 .header-cart__dropdown-toggle { margin: 0 auto; } } .header-cart--4 .header-cart__dropdown-menu { top: 7.3rem !important; min-width: 35rem; } @media (max-width: 21.88em) { .header-cart--4 .header-cart__dropdown-menu { min-width: 28rem; } } .header-cart--4 .header-cart__count { background: #BA4E8A; top: .7rem; left: auto; right: 2rem; color: #fff; margin-bottom: .5rem; } .header-cart--4 .header-cart__icon { color: #BA4E8A; padding-right: 0; } .header-cart--4 .header-cart__ammount { display: block; font-size: 1rem; font-weight: 300; } .header-cart--4 .header-cart__item--quantity { background: #BA4E8A; } .header-cart--4 .header-cart__item--content h4 a:hover { color: #BA4E8A; } .header-cart--4 .header-cart__single--ammount { color: #BA4E8A; } .header-cart--4 a:hover { color: #BA4E8A; } .header-1 { background-color: #fff; } .header-1--middle { background-color: #2874f0; } .header-1 .sticky-header { background: rgba(255, 255, 255, 0.8); } .header-1 .sticky-header:hover { background: white; } .header-2 { background-color: #333; } .header-2 > div { border-bottom: 1px solid rgba(255, 255, 255, 0.1); } .header-2--middle { padding: 2.5rem 0; } .header-2--middle .header-middle__left { height: auto; } @media (max-width: 61.94em) { .header-2--middle { padding: 1.5rem 0; } } .header-2--bottom { padding: 0; } .header-2--bottom.sticky-header { background: rgba(47, 47, 47, 0.8); } .header-2--bottom.sticky-header:hover { background: #323e52; } .header-3 { background-color: #fff; } .header-3 > div { border-bottom: 1px solid #e2e2e2; } .header-3--middle { padding: 2.5rem 0; } .header-3--middle .header-middle__left { height: auto; } .header-3--bottom { padding: 0; background-color: #51aa1b; } .header-3--bottom.sticky-header { background: rgba(81, 170, 27, 0.8); border-color: transparent; } .header-3--bottom.sticky-header:hover { background: #51aa1b; } .header-4 { position: absolute; left: 0; top: 0; width: 100%; z-index: 99; } @media (max-width: 61.94em) { .header-4 { background-color: #191919; position: relative; } } .header-4--top { border-bottom: 1px solid rgba(255, 255, 255, 0.1); padding: 0; } @media (max-width: 47.94em) { .header-4--top { padding-top: 2rem; } } @media (max-width: 61.94em) { .header-4--bottom { margin-top: 1rem; } } .header-4--bottom .logo-box { background-color: #BA4E8A; height: 100%; } @media (max-width: 61.94em) { .header-4--bottom .logo-box { background-color: transparent; } } .header-4--bottom .logo-box img { height: 100%; } .header-4--bottom.sticky-header { background: rgba(25, 25, 25, 0.8); padding: 0; } .header-4--bottom.sticky-header:hover { background: #191919; } .header-4--bottom-right { height: 100%; } @media (min-width: 61.94em) { .header-4--bottom-right { display: -webkit-box; display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; -webkit-justify-content: space-between; -moz-justify-content: space-between; justify-content: space-between; } } .sticky-header { position: fixed; top: 0; left: 0; width: 100%; z-index: 999999; margin: 0; -webkit-animation: fadeInDown 0.8s ease-in-out; -moz-animation: fadeInDown 0.8s ease-in-out; -ms-animation: fadeInDown 0.8s ease-in-out; -o-animation: fadeInDown 0.8s ease-in-out; animation: fadeInDown 0.8s ease-in-out; -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.14); -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.14); -ms-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.14); -o-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.14); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.14); } .contact-info__list { display: inline-block; padding: 0 1.5rem; border-left: 1px solid #a6a6a6; text-transform: capitalize; line-height: 1.2; font-size: 1.3rem; color: #606060; } @media (max-width: 61.94em) { .contact-info__list { margin-bottom: 10px; } } @media (max-width: 35.94em) { .contact-info__list:not(:first-child) { display: block; padding-left: 0; border-left: 0; } } @media (max-width: 47.94em) { .contact-info__list:nth-child(2) { padding-left: 0; border-left: 0; } } .contact-info__list:first-child { padding-left: 0; border-left: 0; } .contact-info__list a { color: #606060; } .contact-info__list a:hover { color: #2874f0; } .contact-info--1 .contact-info__list { color: #606060; } .contact-info--1 .contact-info__list a { color: #606060; } .contact-info--1 .contact-info__list a:hover { color: #2874f0; } .contact-info--2 .contact-info__list { color: #fff; } .contact-info--2 .contact-info__list a { color: #fff; } .contact-info--2 .contact-info__list a:hover { color: #c09f52; } .contact-info--3 .contact-info__list a:hover { color: #51aa1b; } /***************************** 11. Footer CSS *****************************/ .footer-top { background: #2d2d2d; padding-top: 3rem; } .footer-bottom { background: #2d2d2d; padding: 3rem 0; } .footer p { color: #fff; font-size: 1.4rem; } .footer-menu { text-align: center; } .footer-menu__item { display: inline-block; border-right: 1px solid #b6becb; padding: 0 5px; margin-bottom: 10px; } .footer-menu__link { font-size: 1.4rem; color: #b6becb; text-transform: capitalize; display: inline-block; } .footer--1 a:hover { color: #ffe11b; } .footer--2 a:hover { color: #c09f52; } .footer--3-top { background-color: #fff; } .footer--3-bottom { background-color: #51aa1b; } .footer--3 a:hover { color: #51aa1b; } .footer--4 a:hover { color: #BA4E8A; } @media (max-width: 61.94em) { .footer-widget-row > div[class^="col"]:first-child .footer-widget { margin-bottom: 3rem; } } @media (max-width: 47.94em) { .footer-widget-row > div[class^="col"]:not(:last-child) .footer-widget { margin-bottom: 3rem; } } @media (max-width: 47.94em) { .footer-method-box-row > div[class^="col"]:not(:last-child) .method-box { margin-bottom: 3rem; } } .method-box { /* background: #49576E; */ padding: 3.5rem; color: #2d2d2d; height: 100%; display: -webkit-box; display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: flex; -webkit-box-align: center; -ms-box-align: center; -webkit-align-items: center; -moz-align-items: center; align-items: center; } @media (max-width: 75em) { .method-box { padding: 3.5rem 1.5rem 3.5rem 1.5rem; } } @media (max-width: 61.94em) { .method-box { padding: 2.5rem .5rem 2.5rem .5rem; -webkit-box-direction: normal; -webkit-box-orient: vertical; -webkit-flex-direction: column; -moz-flex-direction: column; -ms-flex-direction: column; flex-direction: column; text-align: center; } } @media (max-width: 47.94em) { .method-box { height: auto; } } .method-box__icon { padding: 0 5px; margin-right: 10px; -webkit-flex: 0 0 4rem; -moz-flex: 0 0 4rem; -ms-flex: 0 0 4rem; flex: 0 0 4rem; } @media (max-width: 61.94em) { .method-box__icon { -webkit-flex: 0 0 auto; -moz-flex: 0 0 auto; -ms-flex: 0 0 auto; flex: 0 0 auto; margin-right: 0; margin-bottom: 5px; } } .method-box__icon i { font-size: 4.2rem; color: #2d2d2d; line-height: 1; -webkit-transition: all 0.3s ease-in; -moz-transition: all 0.3s ease-in; -ms-transition: all 0.3s ease-in; -o-transition: all 0.3s ease-in; transition: all 0.3s ease-in; } .method-box__content h4 { font-size: 1.6rem; text-transform: capitalize; font-weight: 600; line-height: 1; margin-bottom: 5px; } .method-box__content p { font-size: 1.4rem; text-transform: capitalize; line-height: 1; color: #2d2d2d; margin: 0; } .method-box:hover .method-box__icon i.fa-paper-plane-o { -webkit-animation: passing-reverse 1s linear 0s infinite; -moz-animation: passing-reverse 1s linear 0s infinite; -ms-animation: passing-reverse 1s linear 0s infinite; -o-animation: passing-reverse 1s linear 0s infinite; animation: passing-reverse 1s linear 0s infinite; } .method-box:hover .method-box__icon i.fa-credit-card { -webkit-animation: tada 1s linear 0s infinite; -moz-animation: tada 1s linear 0s infinite; -ms-animation: tada 1s linear 0s infinite; -o-animation: tada 1s linear 0s infinite; animation: tada 1s linear 0s infinite; } .method-box:hover .method-box__icon i.fa-gift { -webkit-animation: tada 1s linear 0s infinite; -moz-animation: tada 1s linear 0s infinite; -ms-animation: tada 1s linear 0s infinite; -o-animation: tada 1s linear 0s infinite; animation: tada 1s linear 0s infinite; } .method-box:hover .method-box__icon i.fa-support { -webkit-animation: spin 1s linear 0s infinite; -moz-animation: spin 1s linear 0s infinite; -ms-animation: spin 1s linear 0s infinite; -o-animation: spin 1s linear 0s infinite; animation: spin 1s linear 0s infinite; } .method-box--2 { background-color: #fff; border: 1px solid #ededed; color: #333; } .method-box--2 .method-box__icon i { color: #333; } .method-box--2 .method-box__content h4 { font-size: 1.6rem; text-transform: capitalize; font-weight: 600; line-height: 1; margin-bottom: 5px; } .method-box--2 .method-box__content p { color: #333; } .newsletter__desc { line-height: 1.5; } .newsletter--2 .newsletter__desc { color: #333; } .widget-title { font-size: 1.8rem; font-weight: 600; color: #fff; margin: 0 0 2rem 0; text-transform: capitalize; } .widget-title--2 { color: #333; } .address-widget p { color: #b6becb; font-size: 1.4rem; margin-bottom: 15px; line-height: 2; } .address-widget p i.fa { font-size: 1.6rem; margin-right: 10px; } .address-widget p a { color: #b6becb; } .address-widget--2 p { color: #333; } .address-widget--2 p a { color: #333; } .menu-widget ul li { line-height: 1.5; } .menu-widget ul li:not(:last-child) { margin-bottom: 1.4rem; } .menu-widget ul li a { font-size: 1.4rem; color: #b6becb; text-transform: capitalize; display: inline-block; font-weight: 400; } .menu-widget--2 ul li a { color: #333; } .payment { margin-top: 25px; } .copyright-text { margin-bottom: 0; color: #fff; } .copyright-text a { color: #ffe11b; } .copyright-text--2 a { color: #c09f52; } .copyright-text--3 a { color: #f5a623; } .copyright-text--3 a:hover { color: #f5a623; text-decoration: underline; } .copyright-text--4 a { color: #BA4E8A; } .copyright-text--4 a:hover { color: #BA4E8A; text-decoration: underline; } /***************************** 12. Sidebar CSS *****************************/ /********************* Shop Sidebar ********************/ @media (max-width: 61.94em) { .search-filter { display: -webkit-box; display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: flex; -ms-flex-wrap: wrap; -webkit-flex-wrap: wrap; -mox-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: justify; -ms-flex-pack: justify; -webkit-justify-content: space-between; -moz-justify-content: space-between; justify-content: space-between; } } @media (max-width: 61.94em) { .search-filter__single { -webkit-flex: 0 0 48%; -moz-flex: 0 0 48%; -ms-flex: 0 0 48%; flex: 0 0 48%; } } @media (max-width: 47.94em) { .search-filter__single { -webkit-flex: 0 0 100%; -moz-flex: 0 0 100%; -ms-flex: 0 0 100%; flex: 0 0 100%; } } .search-filter__list li { padding: .8rem 0; } .search-filter__list li:not(:last-child) { margin-bottom: .5rem; } .search-filter .best-seller-product { flex: 0 0 auto; width: 100%; } /********************* Shop Pages Sidebar ********************/ .category-block h3 { background-color: #2874f0; color: #fff; padding: 1.5rem 2rem; text-transform: capitalize; font-size: 2rem; margin-bottom: 0; } .category-block__menu { border: 1px solid #ededed; } .category-block__menu > li { padding: 1rem 1.5rem; } .category-block__menu > li:not(:last-child) { border-bottom: 1px solid #ededed; } .category-block__menu li a { color: #333; font-size: 1.5rem; display: block; } .category-block__menu li a:hover { color: #2874f0; } .category-block__menu li ul li { border-top: 1px solid #ededed; padding: 2rem 1rem; } .category-block__menu-item { display: -webkit-box; display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; -webkit-justify-content: space-between; -moz-justify-content: space-between; justify-content: space-between; -webkit-box-align: center; -ms-box-align: center; -webkit-align-items: center; -moz-align-items: center; align-items: center; } .category-block__menu-item a { padding: 1.5rem 0; } .category-block__menu-item .expand-navbar { cursor: pointer; position: relative; } .category-block__menu-item .expand-navbar:after { position: absolute; content: '\f067'; right: 0; top: -5px; font-family: fontAwesome; color: #333; } .category-block__menu-item .expand-navbar.open:after { content: '\f068'; } /********************* Blog Sidebar ********************/ .category-list li { padding: .8rem 0 .8rem 1.3rem; position: relative; } .category-list li:before { position: absolute; content: '\f105'; left: 0; top: .8rem; font-family: fontAwesome; font-size: 1.7rem; } .category-list li a { font-size: 1.4rem; color: #333; display: inline-block; line-height: 1.2; } .category-list li:hover { padding-left: 1.8rem; } .category-list li:hover:before { left: .5rem; color: #2874f0; } .category-list li:hover a { color: #2874f0; } .recent-post-widget { padding: 0 1rem; } .single-recent-post { display: -webkit-box; display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: flex; -webkit-box-align: center; -ms-box-align: center; -webkit-align-items: center; -moz-align-items: center; align-items: center; } .single-recent-post:not(:last-child) { border-bottom: 1px solid #ededed; padding-bottom: 1.5rem; margin-bottom: 1.5rem; } .single-recent-post__thumb { -webkit-flex: 0 0 8rem; -moz-flex: 0 0 8rem; -ms-flex: 0 0 8rem; flex: 0 0 8rem; margin-right: 1rem; } .single-recent-post__content { -webkit-flex: 0 0 calc(100% - 9rem); -moz-flex: 0 0 calc(100% - 9rem); -ms-flex: 0 0 calc(100% - 9rem); flex: 0 0 calc(100% - 9rem); } .single-recent-post__title { font-size: 1.4rem; color: #333; margin-bottom: 1rem; line-height: 1.4; display: block; } .single-recent-post__date { font-size: 1.2rem; color: #838383; } /***************************** 20. Navigation CSS *****************************/ /*********************** Category Navigation ************************/ .category-nav { -webkit-flex: 0 0 8rem; -moz-flex: 0 0 8rem; -ms-flex: 0 0 8rem; flex: 0 0 8rem; border-left: 1px solid rgba(255, 255, 255, 0.15); border-right: 1px solid rgba(255, 255, 255, 0.15); text-align: center; -ms-flex-item-align: stretch; align-self: stretch; -webkit-align-self: stretch; -moz-align-self: stretch; padding-top: 2rem; position: relative; } .category-nav__title { color: #ffffff; margin: 0; text-transform: capitalize; cursor: pointer; } .category-nav__title span { display: block; font-size: 1rem; font-weight: 700; } .category-nav__title:hover { color: #ffe11b; } .category-nav__menu { width: 280px; position: absolute; right: 0; background: #fff; top: 100%; z-index: 9; border: 1px solid #2874f0; border-top: none; text-align: left; } .category-nav__menu.hidden-in-default { display: none; } @media (max-width: 75em) { .category-nav__menu { width: 230px; } } .category-nav__menu__item { position: relative; } @media (max-width: 61.94em) { .category-nav__menu__item { margin: 0 1.5rem; } } .category-nav__menu__item:last-child a { border-bottom: none; } .category-nav__menu__item a { display: block; padding: 2rem 0; margin: 0 1.5rem; font-size: 1.4rem; color: #333; position: relative; } @media (max-width: 61.94em) { .category-nav__menu__item a { margin: 0; } } .category-nav__menu__item a.js-expand-hidden-menu { padding-left: 30px; } .category-nav__menu__item a.js-expand-hidden-menu:before { position: absolute; content: '\f067'; font-family: fontAwesome; left: 0; top: 50%; width: 2rem; height: 2rem; font-size: 1.4rem; border: 1px solid currentColor; border-radius: 50%; text-align: center; line-height: 2rem; margin-top: -1rem; } .category-nav__menu__item a.js-expand-hidden-menu.close:before { content: '\f068'; } .category-nav__menu__item > a { border-bottom: 1px solid #ededed; } .category-nav__menu__item.has-children:after { position: absolute; content: "\f105"; right: 2rem; top: 50%; color: #333; font-family: fontAwesome; font-size: 1.6rem; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); } @media (max-width: 61.94em) { .category-nav__menu__item.has-children:after { -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); top: 2rem; } } .category-nav__menu__item.has-children:hover .category-nav__submenu { visibility: visible; opacity: 1; height: auto; } .category-nav__submenu { position: absolute; left: 100%; top: 0; background: #fff; z-index: 99; padding: 2rem; -webkit-box-shadow: 0 0 6px 1px rgba(0, 0, 0, 0.1); -moz-box-shadow: 0 0 6px 1px rgba(0, 0, 0, 0.1); -ms-box-shadow: 0 0 6px 1px rgba(0, 0, 0, 0.1); -o-box-shadow: 0 0 6px 1px rgba(0, 0, 0, 0.1); box-shadow: 0 0 6px 1px rgba(0, 0, 0, 0.1); display: -webkit-box; display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: flex; -ms-flex-wrap: none; -webkit-flex-wrap: nowrap; -mox-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-box-pack: start; -ms-flex-pack: start; -webkit-justify-content: flex-start; -moz-justify-content: flex-start; justify-content: flex-start; white-space: -moz-nowrap; white-space: nowrap; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; height: 0; } @media (max-width: 61.94em) { .category-nav__submenu { visibility: visible; opacity: 1; height: auto; position: relative; left: 0; top: 0; width: 100%; -webkit-box-shadow: 0 0 6px 1px rgba(0, 0, 0, 0); -moz-box-shadow: 0 0 6px 1px rgba(0, 0, 0, 0); -ms-box-shadow: 0 0 6px 1px rgba(0, 0, 0, 0); -o-box-shadow: 0 0 6px 1px rgba(0, 0, 0, 0); box-shadow: 0 0 6px 1px rgba(0, 0, 0, 0); } } @media (max-width: 35.94em) { .category-nav__submenu { padding-left: 1rem; padding-right: 1rem; } } .category-nav__submenu--inner { padding: 0 1.5rem; } @media (max-width: 61.94em) { .category-nav__submenu--inner { margin-bottom: 1.5rem; padding: 0; } } @media (max-width: 21.88em) { .category-nav__submenu--inner { margin-bottom: 1.5rem; padding: 0; } } .category-nav__submenu__title { color: #2874f0; text-transform: capitalize; font-size: 1.4rem; margin-bottom: 1.5rem; } .category-nav__submenu ul li a { border-bottom: none; margin: 0; padding: 0; line-height: 2.5; } .category-nav__submenu--image { border: none; flex: 1 0 100%; } .category-nav--2 { -webkit-flex: 0 0 auto; -moz-flex: 0 0 auto; -ms-flex: 0 0 auto; flex: 0 0 auto; height: 100%; padding: 0 2rem; } .category-nav--2 .category-nav__title { text-align: left; padding-top: 1.5rem; } .category-nav--2 .category-nav__title span { display: inline-block; font-size: 1.6rem; font-weight: 600; padding-left: 1.5rem; } .category-nav--2 .category-nav__title:hover { color: #c09f52; } .category-nav--2 .category-nav__menu a:hover { color: #c09f52; } .category-nav--2 .category-nav__submenu__title { color: #c09f52; } .category-nav--3 { -webkit-flex: 0 0 auto; -moz-flex: 0 0 auto; -ms-flex: 0 0 auto; flex: 0 0 auto; height: 100%; padding: 0; } .category-nav--3 .category-nav__title { text-align: left; color: #333; border-bottom: 1px solid #51aa1b; padding-bottom: 1.5rem; } .category-nav--3 .category-nav__title span { display: inline-block; font-size: 1.6rem; font-weight: 600; padding-left: 1rem; } .category-nav--3 .category-nav__title:hover { color: #51aa1b; } .category-nav--3 .category-nav__menu { width: 100%; position: relative; right: 0; top: 0; border: none; } .category-nav--3 .category-nav__menu a:hover { color: #51aa1b; } .category-nav--3 .category-nav__menu__item a { margin: 0; } .category-nav--3 .category-nav__menu__item.has-children:hover .category-nav__submenu { -webkit-transform: scaleY(1); -moz-transform: scaleY(1); -ms-transform: scaleY(1); -o-transform: scaleY(1); transform: scaleY(1); } .category-nav--3 .category-nav__submenu__title { color: #51aa1b; } .category-nav--3 .category-nav__submenu { -webkit-transform: scaleY(0); -moz-transform: scaleY(0); -ms-transform: scaleY(0); -o-transform: scaleY(0); transform: scaleY(0); -webkit-transform-origin: top; -moz-transform-origin: top; -ms-transform-origin: top; -o-transform-origin: top; transform-origin: top; } @media (max-width: 61.94em) { .category-nav--3 .category-nav__submenu { position: relative; display: none; } } .category-nav--4 { -webkit-flex: 0 0 auto; -moz-flex: 0 0 auto; -ms-flex: 0 0 auto; flex: 0 0 auto; background-color: #191919; padding-top: 1.5rem; height: 100%; text-align: left; padding-left: 3.5rem; } .category-nav--4 .category-nav__menu { width: auto; background-color: #292929; position: relative; top: 0; display: inline-block; padding: 0 1.5rem; } .category-nav--4 .category-nav__menu__item { display: inline-block; } .category-nav--4 .category-nav__menu__item.has-children:after { position: absolute; content: '\f107'; right: 0; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); font-family: fontAwesome; color: #fff; } .category-nav--4 .category-nav__menu__item > a { color: #fff; border-bottom: none; padding: 1.4rem 1.5rem; margin: 0; } .category-nav--4 .category-nav__menu__item > a:hover { color: #BA4E8A; } .category-nav--4 .category-nav__menu__item:nth-last-of-type(-n+2) .category-nav__submenu { left: auto; right: 0; } .category-nav--4 .category-nav__submenu { left: 0; top: 100%; -ms-flex-wrap: none; -webkit-flex-wrap: nowrap; -mox-flex-wrap: nowrap; flex-wrap: nowrap; white-space: -moz-nowrap; white-space: nowrap; width: auto; } .category-nav--4 .category-nav__submenu__title { color: #BA4E8A; } .category-nav--4 .category-nav__submenu ul li a { color: #333; } .category-nav--4 .category-nav__submenu ul li a:hover { color: #BA4E8A; } /*********************** Main Navigation ************************/ .main-navigation { display: block; } @media (max-width: 61.94em) { .main-navigation { display: none; } } .main-navigation--2 { background-color: #191919; height: 100%; text-align: left; padding-left: 3.5rem; padding-right: 3.5rem; padding-top: 1.2rem; } @media (min-width: 61.94em) { .main-navigation--2 { -webkit-flex: 0 0 calc(100% - 10rem); -moz-flex: 0 0 calc(100% - 10rem); -ms-flex: 0 0 calc(100% - 10rem); flex: 0 0 calc(100% - 10rem); } } @media (max-width: 120em) { .main-navigation--2 { padding-top: 1rem; } } @media (max-width: 75em) { .main-navigation--2 { padding-top: 1.5rem; padding-bottom: 1.5rem; } } .mainmenu { text-align: center; } .mainmenu__item { display: inline-block; margin: 0 .5rem; padding: 1rem 0; /* position: relative; */ } .mainmenu__item:not(:last-child) { margin-right: 2.5rem; } .mainmenu__item.menu-item-has-children:after { content: '\f107'; right: 0; } .mainmenu__item.active > a { color: #f5a623; } @media (max-width: 61.94em) { .mainmenu__item.menu-item-has-children:after { display: none; } } .mainmenu__item.menu-item-has-children li a { font-weight: 400; } .mainmenu__item.menu-item-has-children ul { position: absolute; left: 0; top: 9rem; background-color: #fff; z-index: 9; text-align: left; -webkit-box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2); -moz-box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2); -ms-box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2); -o-box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2); box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2); -webkit-transition: all 0.4s ease; -moz-transition: all 0.4s ease; -ms-transition: all 0.4s ease; -o-transition: all 0.4s ease; transition: all 0.4s ease; z-index: -1; pointer-events: none; } @media (max-width: 61.94em) { .mainmenu__item.menu-item-has-children ul { position: relative; left: auto; top: auto; display: block; -webkit-box-shadow: 0px 0px 0px rgba(0, 0, 0, 0); -moz-box-shadow: 0px 0px 0px rgba(0, 0, 0, 0); -ms-box-shadow: 0px 0px 0px rgba(0, 0, 0, 0); -o-box-shadow: 0px 0px 0px rgba(0, 0, 0, 0); box-shadow: 0px 0px 0px rgba(0, 0, 0, 0); padding: 0; opacity: 1; visibility: visible; } } .mainmenu__item.menu-item-has-children ul.megamenu { display: -webkit-box; display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: flex; -ms-flex-wrap: none; -webkit-flex-wrap: wrap; -mox-flex-wrap: wrap; flex-wrap: wrap; width: 100%; /* left: 50%; */ /* margin-left: -20rem; */ /* padding: 2rem; */ } .mainmenu__item.menu-item-has-children ul.megamenu > li { /* -webkit-flex: 0 0 50%; */ -moz-flex: 0 0 50%; -ms-flex: 0 0 50%; /* flex: 0 0 50%; */ } .mainmenu__item.menu-item-has-children ul.megamenu li { padding-right: 2rem; } @media (max-width: 75em) { .mainmenu__item.menu-item-has-children ul.megamenu li { padding-right: 1rem; } } .mainmenu__item.menu-item-has-children ul.megamenu li ul { position: relative; visibility: visible; opacity: 1; top: auto !important; left: auto; background: transparent; box-shadow: 0 0 0 rgba(0, 0, 0, 0); display: block; padding: 0 !important; } .mainmenu__item.menu-item-has-children ul.megamenu > li > a { font-weight: 700; font-size: 17px!important; } .mainmenu__item.menu-item-has-children ul.megamenu > li > a:hover { color: #333; } .mainmenu__item.menu-item-has-children ul.megamenu.three-column { width: 1200px; left: 0%; padding: 20px; z-index: 9999999; } .mainmenu__item.menu-item-has-children ul.megamenu.three-column > li { -webkit-flex: 0 0 33.3333%; -moz-flex: 0 0 33.3333%; -ms-flex: 0 0 33.3333%; flex: 0 0 33.3333%; max-width: 20%; } .mainmenu__item.menu-item-has-children ul ul { left: 100%; top: 15rem !important; } .mainmenu__item.menu-item-has-children ul li:hover ul { top: 0 !important; pointer-events: visible; } @media (max-width: 61.94em) { .mainmenu li.menu-item-has-children:after { display: none; } } .mainmenu li:hover > ul { top: 5.8rem; z-index: 99; pointer-events: visible; } .mainmenu li a { display: block; padding: 1.2rem 1.5rem; font-size: 1.6rem; font-weight: 600; color: #333; text-transform: capitalize; } .mainmenu li a:hover { color: #f5a623; } .mainmenu .sub-menu { pointer-events: none; width: 24rem; padding: 1.5rem 0; white-space: -moz-nowrap; white-space: nowrap; } .mainmenu .sub-menu li { position: relative; } .mainmenu .sub-menu li.menu-item-has-children:after { content: '\f105'; right: 1.5rem; } .mainmenu .sub-menu a { color: #333; font-size: 1.3rem; padding: 1rem 3.5rem 1rem 2.5rem; display: block; } .mainmenu .sub-menu a:hover { color: #f5a623; } .mainmenu--2 { text-align: left; position: relative; } .mainmenu--2 .mainmenu__item { margin: 0; } .mainmenu--2 .mainmenu__item:not(:last-child) { } .mainmenu--2 .mainmenu__link { color: #fff; } .mainmenu--2 li.menu-item-has-children ul { background-color: rgba(47, 47, 47, 0.8); } .mainmenu--2 li.menu-item-has-children ul li a { color: #fff; } .mainmenu--2 li.menu-item-has-children ul.megamenu > li > a:hover { color: #fff; } .mainmenu--2 li:hover > ul { top: 5.8rem; } .mainmenu--3 .mainmenu__item { margin: 0; } .mainmenu--3 .mainmenu__item:not(:last-child) { margin-right: 5rem; } .mainmenu--3 .mainmenu__link { color: #fff; padding: 2rem; } .mainmenu--3 li.menu-item-has-children ul { background-color: #94c341; } .mainmenu--3 li.menu-item-has-children ul li a { color: #fff; } .mainmenu--3 li.menu-item-has-children ul.megamenu > li > a:hover { color: #fff; } .mainmenu--3 li:hover > ul { top: 7.4rem; } .mainmenu--4 { background-color: #292929; text-align: left; } .mainmenu--4 .mainmenu__item { margin: 0; } .mainmenu--4 .mainmenu__item:not(:last-child) { margin-right: 5rem; } .mainmenu--4 .mainmenu__link { color: #fff; padding: .8rem 1.5rem; } .mainmenu--4 li.menu-item-has-children ul { background-color: #666666; } .mainmenu--4 li.menu-item-has-children ul li a { color: #fff; } .mainmenu--4 li.menu-item-has-children ul.megamenu > li > a:hover { color: #fff; } .mainmenu--4 li:hover > ul { top: 5rem; } /*********************** Mobile Menu ************************/ .mobile-menu .mean-bar { position: relative; background-color: transparent; } .mobile-menu .mean-bar:before { position: absolute; content: "Menu"; left: 0; top: 15px; font-size: 2rem; font-weight: 500; } .mobile-menu .mean-bar .meanmenu-reveal { position: absolute; } .mobile-menu .mean-bar .meanmenu-reveal span { position: relative; } .mobile-menu .mean-bar .meanmenu-reveal span.menu-bar { height: 2px; width: 26px; background-color: #202020; display: block; margin: 8px 0; } .mobile-menu .mean-bar .meanmenu-reveal span:before, .mobile-menu .mean-bar .meanmenu-reveal span:after { content: ""; position: absolute; left: 0; width: 100%; height: 100%; background-color: #202020; } .mobile-menu .mean-bar .meanmenu-reveal span:before { top: -8px; } .mobile-menu .mean-bar .meanmenu-reveal span:after { bottom: -8px; } .mobile-menu .mean-bar .meanmenu-reveal span.menu-close { height: 2px; width: 26px; background-color: transparent; display: block; margin: 8px 0; } .mobile-menu .mean-bar .meanmenu-reveal span.menu-close:before { top: 0; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); } .mobile-menu .mean-bar .meanmenu-reveal span.menu-close:after { bottom: 0; -webkit-transform: rotate(-45deg); -ms-transform: rotate(-45deg); transform: rotate(-45deg); } .mobile-menu .mean-bar .mean-nav { background-color: #ffffff; } .mobile-menu .mean-bar .mean-nav > ul { margin-bottom: 30px; border: 1px solid #eeeeee; border-top: 0px solid transparent; overflow-x: hidden; } @media (max-width: 47.94em) { .mobile-menu .mean-bar .mean-nav > ul { max-height: auto; overflow-y: auto; } } .mobile-menu .mean-bar .mean-nav > ul li { position: relative; display: block; float: left; width: 100%; margin: 0; padding: 0; } .mobile-menu .mean-bar .mean-nav > ul li a { font-size: 13px; display: block; color: #444444; font-weight: 600; text-transform: uppercase; line-height: 44px; position: relative; border-top: 1px solid #eeeeee; padding: 0 40px 0 20px; width: 100%; } .mobile-menu .mean-bar .mean-nav > ul li ul { position: static; background-color: rgba(0, 0, 0, 0.03); margin: 0; padding: 0 !important; width: 100%; -webkit-box-shadow: none; box-shadow: none; margin: 0; display: none; float: left; width: 100%; opacity: 1; visibility: visible; z-index: 1; -webkit-transition: none; -o-transition: none; transition: none; } .mobile-menu .mean-bar .mean-nav ul li a.mean-expand { position: absolute; right: -1px; top: 0; font-size: 20px !important; color: #444444; line-height: 44px; height: 45px; width: 40px; text-align: center; padding: 0 !important; } .mobile-menu .mean-bar .mean-nav ul li a.mean-expand:hover { background: rgba(0, 0, 0, 0); } .mobile-menu--2 .mean-bar:before { color: #fff; } .mobile-menu--2 .mean-bar .meanmenu-reveal { position: absolute; } .mobile-menu--2 .mean-bar .meanmenu-reveal span.menu-bar { background-color: #fff; } .mobile-menu--2 .mean-bar .meanmenu-reveal span:before, .mobile-menu--2 .mean-bar .meanmenu-reveal span:after { background-color: #fff; } .mobile-menu--2 .mean-bar .meanmenu-reveal span:before { top: -8px; } .mobile-menu--2 .mean-bar .meanmenu-reveal span:after { bottom: -8px; } .mobile-menu--2 .mean-bar .mean-nav { background-color: transparent; } .mobile-menu--2 .mean-bar .mean-nav > ul { /* border: 1px solid #fff; */ } .mobile-menu--2 .mean-bar .mean-nav > ul li a { color: #fff; border-top: 1px solid #fff; } .mobile-menu--2 .mean-bar .mean-nav > ul li ul { background-color: rgba(50, 62, 82, 0.03); } .mobile-menu--2 .mean-bar .mean-nav ul li a.mean-expand { color: #fff; } .mobile-menu--3 .mean-bar:before { color: #fff; } .mobile-menu--3 .mean-bar .meanmenu-reveal { position: absolute; } .mobile-menu--3 .mean-bar .meanmenu-reveal span.menu-bar { background-color: #fff; } .mobile-menu--3 .mean-bar .meanmenu-reveal span:before, .mobile-menu--3 .mean-bar .meanmenu-reveal span:after { background-color: #fff; } .mobile-menu--3 .mean-bar .meanmenu-reveal span:before { top: -8px; } .mobile-menu--3 .mean-bar .meanmenu-reveal span:after { bottom: -8px; } .mobile-menu--3 .mean-bar .mean-nav { background-color: transparent; } .mobile-menu--3 .mean-bar .mean-nav > ul { border: 1px solid #fff; } .mobile-menu--3 .mean-bar .mean-nav > ul li a { color: #fff; border-top: 1px solid #fff; } .mobile-menu--3 .mean-bar .mean-nav > ul li ul { background-color: rgba(148, 195, 65, 0.03); } .mobile-menu--3 .mean-bar .mean-nav ul li a.mean-expand { color: #fff; } .mobile-menu--4 .mean-bar:before { display: none; } .mobile-menu--4 .mean-bar .meanmenu-reveal { top: -5.5rem; } @media (max-width: 35.94em) { .mobile-menu--4 .mean-bar .meanmenu-reveal { top: 0; margin-top: 10px; } } .mobile-menu--4 .mean-bar .meanmenu-reveal span.menu-bar { background-color: #fff; } .mobile-menu--4 .mean-bar .meanmenu-reveal span:before, .mobile-menu--4 .mean-bar .meanmenu-reveal span:after { background-color: #fff; } .mobile-menu--4 .mean-bar .meanmenu-reveal span:before { top: -8px; } .mobile-menu--4 .mean-bar .meanmenu-reveal span:after { bottom: -8px; } .mobile-menu--4 .mean-bar .mean-nav { background-color: transparent; } .mobile-menu--4 .mean-bar .mean-nav > ul { border: 1px solid #fff; } .mobile-menu--4 .mean-bar .mean-nav > ul li a { color: #fff; border-top: 1px solid #fff; } .mobile-menu--4 .mean-bar .mean-nav > ul li ul { background-color: rgba(25, 25, 25, 0.03); } .mobile-menu--4 .mean-bar .mean-nav ul li a.mean-expand { color: #fff; } /*********************** Category Mobile Menu ************************/ @media (max-width: 61.94em) { .category-moble-menu { margin-top: 20px; } .category-moble-menu .slicknav_btn { background: transparent; color: #000; width: 100%; display: flex; padding-left: 20px; justify-content: space-between; } .category-moble-menu .slicknav_menu { font-size: 16px; background: #fff; padding: 5px; } .category-moble-menu .slicknav_menu .slicknav_btn .slicknav_icon { width: 1.3rem; margin: 0; margin-top: 4px; position: relative; } .category-moble-menu .slicknav_menu .slicknav_btn .slicknav_icon-bar { -webkit-box-shadow: 0 1px 0 rgba(0, 0, 0, 0); -moz-box-shadow: 0 1px 0 rgba(0, 0, 0, 0); -ms-box-shadow: 0 1px 0 rgba(0, 0, 0, 0); -o-box-shadow: 0 1px 0 rgba(0, 0, 0, 0); box-shadow: 0 1px 0 rgba(0, 0, 0, 0); background: #333; margin-bottom: 6px; width: 100%; position: absolute; margin: 0; -webkit-transition: all 0.4s; -moz-transition: all 0.4s; -ms-transition: all 0.4s; -o-transition: all 0.4s; transition: all 0.4s; } .category-moble-menu .slicknav_menu .slicknav_btn .slicknav_icon-bar:nth-child(1) { top: 5px; -webkit-transform: rotate(55deg); -moz-transform: rotate(55deg); -ms-transform: rotate(55deg); -o-transform: rotate(55deg); transform: rotate(55deg); left: -7px; } .category-moble-menu .slicknav_menu .slicknav_btn .slicknav_icon-bar:nth-child(2) { top: 8px; display: none; } .category-moble-menu .slicknav_menu .slicknav_btn .slicknav_icon-bar:nth-child(3) { top: 5px; -webkit-transform: rotate(-55deg); -moz-transform: rotate(-55deg); -ms-transform: rotate(-55deg); -o-transform: rotate(-55deg); transform: rotate(-55deg); } .category-moble-menu .slicknav_menu .slicknav_btn .slicknav_menutxt { color: #333; text-shadow: 0 0 0 #fff; } .category-moble-menu .slicknav_menu .slicknav_btn.slicknav_open .slicknav_icon-bar:nth-child(1) { -webkit-transform: rotate(-55deg); -moz-transform: rotate(-55deg); -ms-transform: rotate(-55deg); -o-transform: rotate(-55deg); transform: rotate(-55deg); } .category-moble-menu .slicknav_menu .slicknav_btn.slicknav_open .slicknav_icon-bar:nth-child(3) { -webkit-transform: rotate(55deg); -moz-transform: rotate(55deg); -ms-transform: rotate(55deg); -o-transform: rotate(55deg); transform: rotate(55deg); } .category-moble-menu .slicknav_nav ul { margin: 0; } .category-moble-menu .slicknav_nav a:hover { border-radius: 0; background: transparent; } .category-moble-menu .category-nav__submenu { display: none; } .category-moble-menu--4 { margin-top: 20px; } .category-moble-menu--4 .slicknav_btn { color: #fff; } .category-moble-menu--4 .slicknav_menu { background: #292929; } .category-moble-menu--4 .slicknav_menu .slicknav_menutxt { color: #fff; text-shadow: 0 0 0 #fff; } .category-moble-menu--4 .slicknav_menu .slicknav_icon-bar { -webkit-box-shadow: 0 1px 0 rgba(0, 0, 0, 0); -moz-box-shadow: 0 1px 0 rgba(0, 0, 0, 0); -ms-box-shadow: 0 1px 0 rgba(0, 0, 0, 0); -o-box-shadow: 0 1px 0 rgba(0, 0, 0, 0); box-shadow: 0 1px 0 rgba(0, 0, 0, 0); background: #fff; } .category-moble-menu--4 .slicknav_nav ul { margin: 0; } .category-moble-menu--4 .slicknav_nav .category-nav__menu__item.has-children:after { color: #fff; } .category-moble-menu--4 .slicknav_nav .category-nav__submenu { background-color: transparent; } .category-moble-menu--4 .slicknav_nav .category-nav__submenu h3 { color: #BA4E8A; } .category-moble-menu--4 .slicknav_nav .category-nav__submenu li a { color: #fff; } .category-moble-menu--4 .slicknav_nav a { color: #fff; } .category-moble-menu--4 .slicknav_nav a:hover { border-radius: 0; background: transparent; } } @media (max-width: 21.88em) { .category-moble-menu .slicknav_menu { padding: 0; } .category-moble-menu .slicknav_btn { margin-bottom: 7px; } } /***************************** 21. Form CSS *****************************/ /********************** Search Form **********************/ .search-form { display: -webkit-box; display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: flex; -webkit-box-align: center; -ms-box-align: center; -webkit-align-items: center; -moz-align-items: center; align-items: center; border-radius: 3px; } .search-form__input { width: 100%; color: #999999; background: #fff; border-radius: 3px 0px 0px 3px; padding-left: 2rem; } .search-form__group { display: -webkit-box; display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: flex; -webkit-box-align: center; -ms-box-align: center; -webkit-align-items: center; -moz-align-items: center; align-items: center; background-color: #fff; } @media (max-width: 35.94em) { .search-form__group--select { display: none; } } .search-form__select { width: 18rem; height: 2.5rem; padding: 0 1.5rem; line-height: 1; color: #333; border-left: 1px solid #a6a6a6 !important; -webkit-appearance: none; -moz-appearance: none; -ms-appearance: none; -o-appearance: none; appearance: none; background: url(../img/angle-down.png) no-repeat 90% 50% white; position: relative; } @media (max-width: 21.88em) { .search-form__select { width: 11rem; } } @media (max-width: 61.94em) { .search-form--2 { margin-top: 1.5rem; } } @media (max-width: 35.94em) { .search-form--2 { margin-top: 0; } } .search-form--3 .search-form__input { border: 1px solid #e2e2e2; border-right: none; } .search-form--3 .search-form__group { border-top: 1px solid #e2e2e2; border-bottom: 1px solid #e2e2e2; } @media (max-width: 61.94em) { .search-form--3 { margin-top: 1.5rem; } } @media (max-width: 35.94em) { .search-form--3 { margin-top: 0; } } .search-form--4 { background-color: transparent; border-radius: 0; -webkit-box-align: stretch; -ms-box-align: stretch; -webkit-align-items: stretch; -moz-align-items: stretch; align-items: stretch; } @media (max-width: 47.94em) { .search-form--4 { border-top: 1px solid rgba(255, 255, 255, 0.1); } } .search-form--4 .search-form__input { background-color: transparent; padding-left: 1rem; min-height: 4.5rem; width: 100%; color: #fff; background: transparent; border: none; border-left: 1px solid rgba(255, 255, 255, 0.1); font-size: 1.3rem; border-radius: 0; } /********************** Newsletters Form **********************/ .newsletter-form { position: relative; } @media (max-width: 47.94em) { .newsletter-form { padding-top: 50px; } } .newsletter-form:before { position: absolute; content: ''; left: -120px; top: -10px; background-image: url(../img/envelope.png); background-repeat: no-repeat; background-attachment: scroll; background-position: center; width: 92px; height: 59px; z-index: 999; } @media (max-width: 47.94em) { .newsletter-form:before { left: 0; top: -18px; } } .newsletter-form__group { display: -webkit-box; display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: flex; -webkit-box-align: center; -ms-box-align: center; -webkit-align-items: center; -moz-align-items: center; align-items: center; -webkit-box-pack: start; -ms-flex-pack: start; -webkit-justify-content: flex-start; -moz-justify-content: flex-start; justify-content: flex-start; } .newsletter-form__input { width: 100%; background: #fff; padding: 10px; border: 0; color: #666; border: none; border-top-left-radius: 3px; border-bottom-left-radius: 3px; } .newsletter-form--2 .newsletter-form__input { border: 1px solid #ededed; } .newsletter-form--2:before { background-image: url(../img/envelope-2.png); } /********************** Custom Checkbox **********************/ .custom-checkbox__label { display: block; margin-bottom: 0; position: relative; padding-left: 2.5rem; font-size: 1.4rem; cursor: pointer; } .custom-checkbox__label:before { position: absolute; content: ""; left: 0; top: 0; width: 1.5rem; height: 1.5rem; border: 1px solid #606060; font-family: fontAwesome; color: #333; } .custom-checkbox__input { display: none; } .custom-checkbox__input:checked + .custom-checkbox__label:before { content: "\f00c"; } /********************** Search Radio **********************/ .custom-radio__label { display: block; margin-bottom: 0; font-size: 1.4rem; cursor: pointer; display: -webkit-box; display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: flex; -webkit-box-align: center; -ms-box-align: center; -webkit-align-items: center; -moz-align-items: center; align-items: center; } .custom-radio__label span { width: 2rem; height: 2rem; background: #fff; border: 1px solid #606060; display: inline-block; position: relative; border-radius: 50%; margin-right: 1.5rem; } .custom-radio__label span:before { position: absolute; content: ''; left: 50%; top: 50%; background: #333; width: 1.5rem; height: 1.5rem; border-radius: 50%; -webkit-transform: translate(-50%, -50%) scale(0, 0); -moz-transform: translate(-50%, -50%) scale(0, 0); -ms-transform: translate(-50%, -50%) scale(0, 0); -o-transform: translate(-50%, -50%) scale(0, 0); transform: translate(-50%, -50%) scale(0, 0); } .custom-radio__input { display: none; } .custom-radio__input:checked + .custom-radio__label span:before { -webkit-transform: translate(-50%, -50%) scale(1, 1); -moz-transform: translate(-50%, -50%) scale(1, 1); -ms-transform: translate(-50%, -50%) scale(1, 1); -o-transform: translate(-50%, -50%) scale(1, 1); transform: translate(-50%, -50%) scale(1, 1); } .custom-radio__color__label { display: block; margin-bottom: 0; font-size: 1.4rem; padding-left: 2.5rem; position: relative; cursor: pointer; } .custom-radio__color__label:before { position: absolute; content: ''; left: 0; top: 0; width: 1.5rem; height: 1.5rem; -webkit-box-shadow: 2px 2px 4px 0 rgba(0, 0, 0, 0.2); -moz-box-shadow: 2px 2px 4px 0 rgba(0, 0, 0, 0.2); -ms-box-shadow: 2px 2px 4px 0 rgba(0, 0, 0, 0.2); -o-box-shadow: 2px 2px 4px 0 rgba(0, 0, 0, 0.2); box-shadow: 2px 2px 4px 0 rgba(0, 0, 0, 0.2); border: 1px solid rgba(0, 0, 0, 0.05); cursor: pointer; border-radius: 3px; } .custom-radio__color__input[type="radio"] { display: none; } .custom-radio__color--black label:before { background-color: #435065; } .custom-radio__color--orange label:before { background-color: #F39C11; } .custom-radio__color--blue label:before { background-color: #2874f0; } .custom-radio__color--green label:before { background-color: #4cbb6c; } .custom-radio__color--yellow label:before { background-color: #ffe11b; } /********************** Nice Select **********************/ .short-select.nice-select { border-radius: 0; border: solid 1px #ededed; height: 3.5rem; line-height: 3.3rem; width: 25rem; } .nice-select { float: none; } .nice-select .list { width: 100%; } /********************** Review Form **********************/ .review-form__group { margin-top: 1.2rem; } .review-form__label { font-size: 1.2rem; text-align: right; margin-bottom: .4rem; color: #333; font-weight: 700; display: block; } .review-form__input { width: 100%; height: 2.8rem; padding: 0 .5rem; background-color: #fff; border: 1px solid #ededed; color: #333; } .review-form__input--textarea { height: 8rem; } .review-form__note { color: #555555; margin-top: 1.2rem; } .review-form__btn-group { text-align: right; margin-top: 1.5rem; } .review-form__btn-group span { display: inline-block; padding: 0 1rem; color: #a2a2a2; } /********************** Form **********************/ .form__group { margin-bottom: 2rem; } .form__flex-group { display: -webkit-box; display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: flex; -webkit-box-align: center; -ms-box-align: center; -webkit-align-items: center; -moz-align-items: center; align-items: center; } @media (max-width: 35.94em) { .form__flex-group { -webkit-box-direction: normal; -webkit-box-orient: vertical; -webkit-flex-direction: column; -moz-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: start; -ms-flex-align: start; -webkit-align-items: flex-start; -moz-align-items: flex-start; align-items: flex-start; } } .form__flex-group .form__input { -webkit-flex: 1 1 auto; -moz-flex: 1 1 auto; -ms-flex: 1 1 auto; flex: 1 1 auto; width: 1%; } .form__flex-group .form__input--file { -webkit-flex: 1 1 80%; -moz-flex: 1 1 80%; -ms-flex: 1 1 80%; flex: 1 1 80%; width: 80%; } @media (max-width: 35.94em) { .form__flex-group .form__input--file { width: 100%; } } .form__label { font-size: 1.4rem; font-weight: 500; } @media (max-width: 47.94em) { .form__label:not(.form__label--radio) { margin-bottom: 1rem; } } .form__input { width: 100%; height: 4rem; padding: 1rem; background-color: #f5f5f5; border: 1px solid rgba(182, 190, 203, 0.8); } .form__input:focus { background-color: #fff; border-color: rgba(182, 190, 203, 0.6); } .form__input--textarea { height: 10rem; } .form .pass-show-btn { padding: 0 1.5rem; height: 4rem; font-size: 1.3rem; line-height: 4rem; right: 1.5rem; top: 0; text-transform: capitalize; border-radius: 0; background: #b6becb; cursor: pointer; position: absolute; color: #fff; } .form .custom-checkbox__label { line-height: 1.6; padding-left: 3rem; } .form .custom-checkbox__label:before { width: 2rem; height: 2rem; font-size: 1.8rem; line-height: 1; } .form p { color: #333333; font-size: 1.4rem; line-height: 1.6; } .form--contact .form__label { margin-top: .5rem; } .form__output { font-size: 1.5rem; line-height: 1.6; text-align: right; } .form__output.error { color: #ea4a30; } .form__output.success { color: #4cbb6c; } .form--comment .form__input--textarea { height: 20rem; } .checkout-form .form-row .form__group { margin-bottom: 0; } @media (max-width: 47.94em) { .checkout-form .form-row .form__group:not(:last-child) { margin-bottom: 3rem; } } .checkout-form .form-row .form__label { margin-bottom: 1rem; } .form-box { -webkit-box-shadow: 2px 2px 8px 0 rgba(0, 0, 0, 0.2); -moz-box-shadow: 2px 2px 8px 0 rgba(0, 0, 0, 0.2); -ms-box-shadow: 2px 2px 8px 0 rgba(0, 0, 0, 0.2); -o-box-shadow: 2px 2px 8px 0 rgba(0, 0, 0, 0.2); box-shadow: 2px 2px 8px 0 rgba(0, 0, 0, 0.2); background: #fff; padding: 1.5rem; } .form-box span { display: inline-block; color: #999999; line-height: 1.6; } .form-box span a { display: inline-block; } a.forgot-pass { margin-bottom: 1rem; } a.create-account-link { border-top: 1px solid #ededed; padding-top: 1rem; text-align: center; } .country_select.nice-select { width: 100%; height: 4rem; line-height: 4rem; background-color: #f5f5f5; border: 1px solid rgba(182, 190, 203, 0.8); } .country_select.nice-select:focus { background-color: #fff; border-color: rgba(182, 190, 203, 0.6); } /***************************** 22. Slider CSS *****************************/ .slider-wrapper:hover .owl-prev { left: 3rem; } @media (max-width: 47.94em) { .slider-wrapper:hover .owl-prev { left: .5rem; } } .slider-wrapper:hover .owl-next { right: 3rem; } @media (max-width: 47.94em) { .slider-wrapper:hover .owl-next { right: .5rem; } } .slider-wrapper .owl-prev { left: 1.5rem; } @media (max-width: 47.94em) { .slider-wrapper .owl-prev { left: 0rem; } } .slider-wrapper .owl-next { right: 1.5rem; } @media (max-width: 47.94em) { .slider-wrapper .owl-next { right: 0rem; } } .slider-wrapper .owl-nav > div:hover { background: #333333; } .slider-wrapper .owl-dots { display: flex; justify-content: center; position: absolute; bottom: 15px; width: 100%; } .slider-wrapper .owl-dot { width: 1rem; height: 1rem; border-radius: 1rem; font-size: 0; margin: 0 4px; cursor: pointer; background: #fff; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; } .slider-wrapper .owl-dot:hover { background: #2874f0; } .slider-wrapper .owl-dot.active { width: 3.2rem; background: #2874f0; } .slider-wrapper .single-slider { height: 61rem; width: 100%; background-repeat: no-repeat; background-size: cover; background-attachment: scroll; background-position: center; display: -webkit-box; display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: flex; -webkit-box-align: center; -ms-box-align: center; -webkit-align-items: center; -moz-align-items: center; align-items: center; } @media (max-width: 75em) { .slider-wrapper .single-slider { height: 50rem; } } @media (max-width: 47.94em) { .slider-wrapper .single-slider { height: 40rem; } } @media (max-width: 35.94em) { .slider-wrapper .single-slider { height: 35rem; } } .slider-wrapper--2 .owl-dot:hover { background: #c09f52; } .slider-wrapper--2 .owl-dot.active { background: #c09f52; } .slider-wrapper--3 .owl-dot:hover { background: #51aa1b; } .slider-wrapper--3 .owl-dot.active { background: #51aa1b; } .slider-wrapper--3 .single-slider { height: 50rem; } @media (max-width: 47.94em) { .slider-wrapper--3 .single-slider { height: 40rem; } } @media (max-width: 35.94em) { .slider-wrapper--3 .single-slider { height: 35rem; } } .slider-wrapper--4 .single-slider { height: 89rem; } @media (max-width: 61.94em) { .slider-wrapper--4 .single-slider { height: 50rem; } } @media (max-width: 47.94em) { .slider-wrapper--4 .single-slider { height: 40rem; } } @media (max-width: 35.94em) { .slider-wrapper--4 .single-slider { height: 35rem; } } .slider-wrapper--4 .owl-dot:hover { background: #BA4E8A; } .slider-wrapper--4 .owl-dot.active { background: #BA4E8A; } @media (max-width: 75em) { .slider-content { padding-left: 5.5rem; } } .slider-content__text { color: #333; font-size: 2.4rem; text-transform: uppercase; font-weight: 600; line-height: 1.25; margin-bottom: 3rem; } @media (max-width: 75em) { .slider-content__text { font-size: 2rem; } } @media (max-width: 61.94em) { .slider-content__text { font-size: 1.8rem; } } @media (max-width: 47.94em) { .slider-content__text { font-size: 1.6rem; } } .slider-content--2 { padding-left: 8rem; } .slider-content--2 .slider-content__text { font-size: 2rem; } @media (max-width: 47.94em) { .slider-content--2 { padding-left: 5rem; } } @media (max-width: 35.94em) { .slider-content--2 { padding-left: 6rem; } } .slider-content--4 { color: #fff; padding-left: 0; } .slider-content--4 .slider-content__text { color: #fff; font-weight: 500; margin-top: 1rem; } /***************************** 23. Button CSS *****************************/ .btn { color: #fff; font-size: 1.6rem; padding: 1.7rem 2rem; background: #c09f52; border: none; } .btn:hover { color: #fff; } .btn:not([href]) { border: none; cursor: pointer; } .btn--small { padding: 1.3rem 2rem; font-size: 1.4rem; border-radius: 5px; } .btn--fullwidth { width: 100%; } .btn-checkout { padding: 1.3rem 2rem; font-size: 1.4rem; border-radius: 5px; } .btn-style-1:hover { background: #ffe11b; color: #333; } .btn-style-2:hover { background: #333; color: #fff !important; } .btn-style-3 { background: #333; } .btn-style-3:hover { background: #2874f0; color: #fff !important; } .btn-style-4 { background: #333; } .btn-style-4:hover { background: #c09f52; color: #fff !important; } .btn-style-5 { background: #c09f52; } .btn-style-5:hover { background: #333; color: #fff !important; } .btn-style-6 { background: #333; } .btn-style-6:hover { background: #51aa1b; color: #fff !important; } .btn-style-7 { background: #51aa1b; } .btn-style-7:hover { background: #333; color: #fff !important; } .btn-style-8 { background: #fff; color: #333; } .btn-style-8:hover { background: #BA4E8A; color: #fff !important; } .btn-style-9 { background: #BA4E8A; } .btn-style-9:hover { background: #333; color: #fff !important; } .add-to-cart { color: #fff; font-size: 1.2rem; padding: 1.5rem; font-weight: 600; } .form-btn { background: #ffe11b; -webkit-flex: 0 0 7rem; -moz-flex: 0 0 7rem; -ms-flex: 0 0 7rem; flex: 0 0 7rem; border: none; border-radius: 0px 3px 3px 0px; cursor: pointer; color: #333; } .form-btn i.fa { font-size: 2rem; } @media (max-width: 21.88em) { .form-btn i.fa { font-size: 1.6rem; } } .form-btn:hover { background: #ffe11b; } .form-btn:focus { color: #fff; } .form-btn--2 { background-color: #c09f52; } .form-btn--2 i.fa { color: #fff; } .form-btn--2:hover { background-color: #e66205; } .form-btn--3 { background-color: #f5a623; } .form-btn--3 i.fa { color: #fff; } .form-btn--3:hover { background-color: #e49615; } .form-btn--4 { background-color: transparent; border-right: 1px solid rgba(255, 255, 255, 0.1); border-radius: 0; } .form-btn--4 i.fa { color: #fff; } .form-btn--4:hover { background-color: transparent; } .form-btn--5 { background-color: #BA4E8A; } .form-btn--5 i.fa { color: #fff; } .form-btn--5:hover { background-color: #a63e78; } .clear-btn { background-color: #333333; color: #fff; font-size: 1.5rem; padding: .8rem; display: inline-block; } .clear-btn i { margin-right: .8rem; } .review-btn:not([href]):not([tabindex]) { background: #333333; color: #fff; text-transform: uppercase; font-weight: 400; padding: .8rem 2rem; font-size: 1.6rem; cursor: pointer; } .review-btn:not([href]):not([tabindex]):hover { background-color: #2874f0; color: #fff; } .review-btn:not([href]):not([tabindex]):active { background-color: #f5f5f5; } .review-form__btn { border: none; color: #fff; background-color: #333333; padding: 1.2rem 2.2rem; font-weight: 600; font-size: 1.6rem; border-radius: 0; } .review-form__btn:hover { background-color: #2874f0; color: #fff; } .review-form__btn:active { background-color: #f5f5f5; color: #333; } .comment-btn { color: #fff; background-color: #269abc; border-color: #269abc; border-radius: 0; padding: 1.2rem 2rem; } /***************************** 24. Tabs CSS *****************************/ /**************************** Product horizontal tab ****************************/ .product-tab__head { border-top: 1px solid #ecedf0; border-left: 1px solid #ecedf0; } .product-tab__link.nav-link { position: relative; display: block; padding: 3rem 2rem; cursor: pointer; color: #333; background: #fff; font-size: 1.4rem; text-transform: uppercase; cursor: pointer; border: none; border-bottom: 1px solid #ecedf0; border-right: 1px solid #ecedf0; border-radius: 0; -webkit-transition: all 0.3s ease-in; -moz-transition: all 0.3s ease-in; -ms-transition: all 0.3s ease-in; -o-transition: all 0.3s ease-in; transition: all 0.3s ease-in; } @media (max-width: 75em) { .product-tab__link.nav-link { padding: 2.7rem 2rem; } } @media (max-width: 75em) { .product-tab__link.nav-link { padding: 2.5rem 2rem; line-height: 1.8; } } .product-tab__link.nav-link:before { position: absolute; content: ''; left: 0; top: 0; width: 2px; height: 100%; background: #2874f0; } .product-tab__link.nav-link.active { color: #2874f0; background-color: transparent; border-right-color: transparent; border-radius: 0; } .product-tab__link.nav-link:hover { color: #2874f0; } .product-tab__content { height: 100%; border: 1px solid #ecedf0; border-left: none; } @media (max-width: 47.94em) { .product-tab__content { border-left: 1px solid #ecedf0; border-top: none; } } .product-tab__carousel { position: relative; padding: 1rem 2rem; } @media (max-width: 47.94em) { .product-tab__carousel .owl-nav { top: 50%; right: auto; transform: translateY(-50%); width: 100%; background: transparent; left: 0; } } .product-tab__carousel .owl-prev { margin: 0 5px 0 25px; width: 3rem; height: 3rem; line-height: 2.8rem; } @media (max-width: 35.94em) { .product-tab__carousel .owl-prev { position: absolute; left: -1.6rem; margin: 0; } } @media (max-width: 35.94em) { .product-tab__carousel .owl-prev { left: 0; } } .product-tab__carousel .owl-next { width: 3rem; height: 3rem; line-height: 2.8rem; } @media (max-width: 35.94em) { .product-tab__carousel .owl-next { position: absolute; right: -1.6rem; } } @media (max-width: 35.94em) { .product-tab__carousel .owl-next { right: 0; } } .product-tab--2 .product-tab__head .product-tab__link:before { display: none; } .product-tab--2 .product-tab__head .product-tab__link.active { color: #c09f52; background-color: #fff; } .product-tab--2 .product-tab__head .product-tab__link:hover { color: #c09f52; } @media (max-width: 47.94em) { .product-tab--2 .owl-nav { top: -104px; } } .product-tab--3 .product-tab__head .product-tab__link:before { display: none; } .product-tab--3 .product-tab__head .product-tab__link.active { color: #51aa1b; background-color: #fff; } .product-tab--3 .product-tab__head .product-tab__link:hover { color: #51aa1b; } @media (max-width: 47.94em) { .product-tab--3 .owl-nav { top: -104px; } } .tab-pane .product-box { -webkit-transition: all 0.8s ease-in; -moz-transition: all 0.8s ease-in; -ms-transition: all 0.8s ease-in; -o-transition: all 0.8s ease-in; transition: all 0.8s ease-in; } .tab-pane.active .product-box { animation: zoomIn .5s linear .1s; } /**************************** Combo Product tab ****************************/ .produtct-combo-tab__head { border: none; position: relative; margin-bottom: 2rem; } .produtct-combo-tab__link, .produtct-combo-tab .nav-link { border: none; border-radius: 0; color: #838383; font-size: 2.4rem; padding: 0; padding-right: 3.5rem; font-weight: 700; display: inline-block; line-height: 1.4; z-index: 9; background: #fff; } @media (max-width: 35.94em) { .produtct-combo-tab__link, .produtct-combo-tab .nav-link { font-size: 1.8rem; padding-right: 2rem; } } .produtct-combo-tab__link.active, .produtct-combo-tab__link:hover, .produtct-combo-tab .nav-link.active, .produtct-combo-tab .nav-link:hover { color: #333; } .produtct-combo-tab__pane { border: 1px solid #ededed; } @media (max-width: 35.94em) { .produtct-combo-tab .owl-nav { top: -50px; } } .produtct-combo-tab--2 .produtct-combo-tab__pane { border-color: #fff; } /**************************** Single Product Info tab ****************************/ .single-product-tab__head { background-color: #f2f2f2; padding: 2.8rem 0; text-align: center; -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; -moz-justify-content: center; justify-content: center; } @media (max-width: 35.94em) { .single-product-tab__head { -webkit-box-align: start; -ms-flex-align: start; -webkit-align-items: flex-start; -moz-align-items: flex-start; align-items: flex-start; -webkit-box-direction: normal; -webkit-box-orient: vertical; -webkit-flex-direction: column; -moz-flex-direction: column; -ms-flex-direction: column; flex-direction: column; padding: 1.5rem 0 0 2rem; } } .single-product-tab__head .nav-link { padding: 0 2rem; text-transform: uppercase; color: #333; font-size: 1.6rem; font-weight: 600; } @media (max-width: 47.94em) { .single-product-tab__head .nav-link { font-size: 1.5rem; } } @media (max-width: 35.94em) { .single-product-tab__head .nav-link { padding: 1rem 0; } } .single-product-tab__head .nav-link.active { color: #2874f0; } .single-product-tab__head .nav-link:hover { color: #2874f0; } .single-product-tab__content { padding: 3rem 0 0; } /**************************** User Dashboard tab ****************************/ .user-dashboard-tab__head { border-left: 1px solid #ededed; border-top: 1px solid #ededed; } .user-dashboard-tab__head .nav-link { border-bottom: 1px solid #ededed; border-right: 1px solid #ededed; padding: 1.5rem; font-size: 1.5rem; color: #333; position: relative; } .user-dashboard-tab__head .nav-link:after { position: absolute; content: ''; right: -2rem; top: 0; border-top: 2.2rem solid transparent; border-bottom: 2.2rem solid transparent; border-left: 2rem solid #ededed; } @media (max-width: 61.94em) { .user-dashboard-tab__head .nav-link:after { right: 0; top: 1.3rem; border-left: 2.2rem solid transparent; border-right: 2.2rem solid transparent; border-top: 2rem solid #ededed; } } .user-dashboard-tab__content { padding: 1.5rem 3.5rem; border: 1px solid #ededed; } @media (max-width: 75em) { .user-dashboard-tab__content { padding: 1.5rem; } } .user-dashboard-tab__content p { line-height: 1.6; font-size: 1.5rem; color: #333; } .user-dashboard-tab__content h3 { border-bottom: 1px solid #ededed; font-size: 2.4rem; margin-bottom: 2rem; padding-bottom: 1.5rem; text-transform: capitalize; } .user-dashboard-tab__content table { width: 100%; } .user-dashboard-tab__content table th { font-weight: 700; font-size: 1.4rem; border-bottom: 1px solid #ededed; padding: 1rem; } .user-dashboard-tab__content table td { padding: 1rem; vertical-align: middle; } .user-dashboard-tab__content h4 { font-size: 1.8rem; margin: 2rem 0; } /***************************** 25. Product CSS *****************************/ /********************** Product Box ***********************/ .product-box { padding: 1rem; margin: 5px; position: relative; -webkit-transition: all 0.3s ease-in; -moz-transition: all 0.3s ease-in; -ms-transition: all 0.3s ease-in; -o-transition: all 0.3s ease-in; transition: all 0.3s ease-in; background: #fff; } .product-box__meta { display: -webkit-box; display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; -webkit-justify-content: space-between; -moz-justify-content: space-between; justify-content: space-between; -webkit-box-align: center; -ms-box-align: center; -webkit-align-items: center; -moz-align-items: center; align-items: center; min-height: 4rem; } .product-box__category { font-size: 1.2rem; text-transform: capitalize; color: #2874f0; display: inline-block; } .product-box__sticker { width: 4rem; height: 4rem; line-height: 4rem; text-align: center; border-radius: 50%; color: #fff; } .product-box__sticker--discount { background: #ea4a30; } .product-box__sticker--new { background-color: #94c341; } .product-box__image { position: relative; text-align: center; margin: 1.5rem 0; } .product-box__image .secondary_image { position: absolute; top: 0; left: 50%; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); transform: translateX(-50%); } .product-box__footer { position: relative; } .product-box__desc { text-align: center; } .product-box__title { font-size: 1.4rem; color: #333; font-weight: 400; display: block; text-transform: capitalize; margin-bottom: 1.5rem; } .product-box .sale-price { font-size: 22px; } .product-box .regular-price { font-size: 1.2rem; color: #a2a2a2; } .product-box .quick-view { position: absolute; top: 5%; left: 90%; text-align: center; line-height: 3.6rem; height: 3.6rem; width: 3.6rem; margin-left: -1.8rem; margin-top: -1.8rem; font-size: 1.5rem; display: inline-block; color: #fff; background: rgba(51, 51, 51, 0.7); border-radius: 50%; } .product-box .quick-view:hover { background: #c09f52; } .product-box__links { position: absolute; left: 0; bottom: 0; width: 100%; text-align: center; } .product-box:hover { -webkit-box-shadow: 0 0 7.6px 0.4px rgba(0, 0, 0, 0.1); -moz-box-shadow: 0 0 7.6px 0.4px rgba(0, 0, 0, 0.1); -ms-box-shadow: 0 0 7.6px 0.4px rgba(0, 0, 0, 0.1); -o-box-shadow: 0 0 7.6px 0.4px rgba(0, 0, 0, 0.1); box-shadow: 0 0 7.6px 0.4px rgba(0, 0, 0, 0.1); } .product-box--horizontal { display: -webkit-box; display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: flex; } @media (max-width: 35.94em) { .product-box--horizontal { -webkit-box-direction: normal; -webkit-box-orient: vertical; -webkit-flex-direction: column; -moz-flex-direction: column; -ms-flex-direction: column; flex-direction: column; } } .product-box--horizontal .product-box__desc { text-align: left; padding: 20px 20px 0 10px; } @media (max-width: 75em) { .product-box--horizontal .product-box__desc { padding-top: 5px; padding-left: 5px; } } @media (max-width: 35.94em) { .product-box--horizontal .product-box__desc { padding: 1rem 0 0 0; text-align: center; } } @media (max-width: 75em) { .product-box--horizontal .add-to-cart { padding: 1.5rem; } } .product-box--horizontal .product-box__category { margin-bottom: 8px; } .product-box--horizontal .product-box__left { -webkit-flex: 0 0 15rem; -moz-flex: 0 0 15rem; -ms-flex: 0 0 15rem; flex: 0 0 15rem; margin-right: 3.5rem; } @media (max-width: 75em) { .product-box--horizontal .product-box__left { -webkit-flex: 0 0 13rem; -moz-flex: 0 0 13rem; -ms-flex: 0 0 13rem; flex: 0 0 13rem; margin-right: 1rem; } } .product-box--horizontal .product-box__right { -webkit-flex: 0 0 calc(100% - 18.5rem); -moz-flex: 0 0 calc(100% - 18.5rem); -ms-flex: 0 0 calc(100% - 18.5rem); flex: 0 0 calc(100% - 18.5rem); position: relative; } @media (max-width: 75em) { .product-box--horizontal .product-box__right { -webkit-flex: 0 0 calc(100% - 14rem); -moz-flex: 0 0 calc(100% - 14rem); -ms-flex: 0 0 calc(100% - 14rem); flex: 0 0 calc(100% - 14rem); } } .product-box--small { padding: 1rem 0; display: -webkit-box; display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: flex; overflow: hidden; } .product-box--small:not(:last-child) { border-bottom: 1px solid #ededed; } .product-box--small:hover { -webkit-box-shadow: 0 0 7.6px 0.4px rgba(0, 0, 0, 0); -moz-box-shadow: 0 0 7.6px 0.4px rgba(0, 0, 0, 0); -ms-box-shadow: 0 0 7.6px 0.4px rgba(0, 0, 0, 0); -o-box-shadow: 0 0 7.6px 0.4px rgba(0, 0, 0, 0); box-shadow: 0 0 7.6px 0.4px rgba(0, 0, 0, 0); } .product-box--small .product-box__desc { text-align: left; } .product-box--small .product-box__desc .product-box__price { margin-bottom: 0; } .product-box--small .product-box__title { line-height: 1.4; } .product-box--small .product-box__left { -webkit-flex: 0 0 8rem; -moz-flex: 0 0 8rem; -ms-flex: 0 0 8rem; flex: 0 0 8rem; margin-right: 1rem; } .product-box--small .product-box__right { display: -webkit-box; display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: flex; -webkit-box-align: center; -ms-box-align: center; -webkit-align-items: center; -moz-align-items: center; align-items: center; -webkit-flex: 0 0 calc(100% - 9rem); -moz-flex: 0 0 calc(100% - 9rem); -ms-flex: 0 0 calc(100% - 9rem); flex: 0 0 calc(100% - 9rem); } .product-box__right { -webkit-flex: 1 0 auto; -moz-flex: 1 0 auto; -ms-flex: 1 0 auto; flex: 1 0 auto; position: relative; } .product-box--2 .product-box__sticker--discount { background: #435065; } .product-box--2 .product-box__category { color: #838383; } .product-box--2 .quick-view { background-color: rgba(51, 51, 51, 0.7); } .product-box--2 .quick-view:hover { background-color: #c09f52; } .product-box--2 .product-box__title:hover { color: #c09f52; } .product-box--3 .product-box__sticker--discount { background: #f5a623; } .product-box--3 .product-box__category { color: #838383; } .product-box--3 .quick-view { background-color: rgba(81, 170, 27, 0.7); } .product-box--3 .quick-view:hover { background-color: #51aa1b; } .product-box--3 .product-box__title:hover { color: #51aa1b; } .product-box--4 .product-box__sticker--discount { background: #333; } .product-box--4 .product-box__category { color: #BA4E8A; } .product-box--4 .product-box__category:hover { color: #333; } .product-box--4 .quick-view { background-color: rgba(186, 78, 138, 0.7); } .product-box--4 .quick-view:hover { background-color: #ba4e8a; } .product-box--4 .product-box__title:hover { color: #BA4E8A; } .product-box--list .product-box__desc { text-align: left; } @media (max-width: 75em) { .product-box--list .product-box__desc { padding-top: 5px; padding-left: 5px; } } .product-box--list .product-box__title { font-size: 1.5rem; font-weight: 600; margin-bottom: 2rem; } .product-box--list .product-box__price { margin-bottom: 2rem; } .product-box--list .add-to-cart { -webkit-transform: scale(1, 1); -moz-transform: scale(1, 1); -ms-transform: scale(1, 1); -o-transform: scale(1, 1); transform: scale(1, 1); } @media (max-width: 75em) { .product-box--list .add-to-cart { padding: 1.5rem; } } .product-box--list .product-box__category { margin-bottom: 8px; } .product-box--list .product-box__short-desc { color: #333; font-size: 1.4rem; line-height: 1.5; margin-bottom: 2rem; } .product-box__countdown { margin: 1.5rem 0; } /********************** Product Category ***********************/ .product-category { text-align: center; } .product-category__single { position: relative; display: block; overflow: hidden; padding: 1rem 0; text-align: center; } .product-category__thumb { display: inline-block; } .product-category__thumb img { -webkit-transition: all 0.8s ease-in-out; -moz-transition: all 0.8s ease-in-out; -ms-transition: all 0.8s ease-in-out; -o-transition: all 0.8s ease-in-out; transition: all 0.8s ease-in-out; } .product-category__title { text-transform: capitalize; color: #333; font-size: 1.9rem; display: block; margin-top: 1.5rem; font-weight: 600; } .product-category .owl-prev { margin: 0 5px 0 25px; width: 3rem; height: 3rem; line-height: 2.8rem; } .product-category .owl-next { width: 3rem; height: 3rem; line-height: 2.8rem; } .product-category--2 .product-category__title:hover { color: #c09f52; } /********************** Product Title ***********************/ .product-title { color: #333; margin-bottom: 1.5rem; font-weight: 600; text-transform: capitalize; font-size: 2.4rem; } /********************** Product Price ***********************/ .product-price { display: -webkit-box; display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: flex; -webkit-box-align: center; -ms-box-align: center; -webkit-align-items: center; -moz-align-items: center; align-items: center; margin-bottom: 2.5rem; } @media (max-width: 35.94em) { .product-price { -webkit-box-direction: normal; -webkit-box-orient: vertical; -webkit-flex-direction: column; -moz-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: start; -ms-flex-align: start; -webkit-align-items: flex-start; -moz-align-items: flex-start; align-items: flex-start; margin-bottom: 0; } } @media (max-width: 35.94em) { .product-price span { margin-bottom: 1.5rem; } } .product-price .sale-price { color: #555555; } .product-price .regular-price { font-size: 2rem; margin-right: 8px; } .discount-badge { text-transform: uppercase; display: inline-block; background: #e75768; color: white; font-size: 1.3rem; padding: 0 1.5rem; text-align: center; height: 3rem; line-height: 3rem; } /********************** Product Varients ***********************/ .product-varients__label { color: #232323; } .product-varients__select { background-color: #fff; width: 5.5rem; height: 3.8rem; padding: 2px 1.5rem 0 4px; -webkit-box-shadow: 2px 2px 4px 0 rgba(0, 0, 0, 0.2); -moz-box-shadow: 2px 2px 4px 0 rgba(0, 0, 0, 0.2); -ms-box-shadow: 2px 2px 4px 0 rgba(0, 0, 0, 0.2); -o-box-shadow: 2px 2px 4px 0 rgba(0, 0, 0, 0.2); box-shadow: 2px 2px 4px 0 rgba(0, 0, 0, 0.2); color: #333; border: 1px solid #a6a6a6; -webkit-transition: all 0.3s ease-in; -moz-transition: all 0.3s ease-in; -ms-transition: all 0.3s ease-in; -o-transition: all 0.3s ease-in; transition: all 0.3s ease-in; } .product-varients__select:focus { -webkit-box-shadow: 2px 2px 4px 0 rgba(0, 0, 0, 0); -moz-box-shadow: 2px 2px 4px 0 rgba(0, 0, 0, 0); -ms-box-shadow: 2px 2px 4px 0 rgba(0, 0, 0, 0); -o-box-shadow: 2px 2px 4px 0 rgba(0, 0, 0, 0); box-shadow: 2px 2px 4px 0 rgba(0, 0, 0, 0); } .product-varients__color--group li { display: inline-block; } .product-varients__color--label { width: 2rem; height: 2rem; display: inline-block; margin-right: 5px; margin-top: 5px; -webkit-box-shadow: 2px 2px 4px 0 rgba(0, 0, 0, 0.2); -moz-box-shadow: 2px 2px 4px 0 rgba(0, 0, 0, 0.2); -ms-box-shadow: 2px 2px 4px 0 rgba(0, 0, 0, 0.2); -o-box-shadow: 2px 2px 4px 0 rgba(0, 0, 0, 0.2); box-shadow: 2px 2px 4px 0 rgba(0, 0, 0, 0.2); border: 1px solid rgba(0, 0, 0, 0.05); cursor: pointer; } .product-varients__color--label:hover { border: 2px solid #232323; } .product-varients__color--label.dark-color { background-color: #435065; } .product-varients__color--label.yellow-light-color { background-color: #F39C11; } .product-varients__color--label.blue-light-color { background-color: #5D9CEC; } .product-varients__color--label.yellow-color { background-color: #F1C40F; } .product-varients__color--input[type="radio"] { display: none; } .product-varients__color--input[type="radio"]:checked + label { border: 2px solid #232323; } /********************** Product Action ***********************/ .product-action-wrapper { display: -webkit-box; display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: flex; -webkit-box-align: center; -ms-box-align: center; -webkit-align-items: center; -moz-align-items: center; align-items: center; } /********************** Quantity ***********************/ .quantity { position: relative; width: 7.5rem; margin-right: 4rem; -webkit-box-shadow: 2px 2px 4px 0 rgba(0, 0, 0, 0.2); -moz-box-shadow: 2px 2px 4px 0 rgba(0, 0, 0, 0.2); -ms-box-shadow: 2px 2px 4px 0 rgba(0, 0, 0, 0.2); -o-box-shadow: 2px 2px 4px 0 rgba(0, 0, 0, 0.2); box-shadow: 2px 2px 4px 0 rgba(0, 0, 0, 0.2); } .quantity-input { width: 5rem; height: 4.6rem; padding: 4px 8px; color: #333; border: 1px solid #a6a6a6; border-right: none; -webkit-appearance: none; -moz-appearance: none; -ms-appearance: none; -o-appearance: none; appearance: none; font-size: 1.6rem; } .quantity .qtybutton { position: absolute; right: 0; width: 2.5rem; height: 2.3rem; border: 1px solid #a6a6a6; text-align: center; line-height: 2.3rem; cursor: pointer; -webkit-transition: all 0.3s ease-in; -moz-transition: all 0.3s ease-in; -ms-transition: all 0.3s ease-in; -o-transition: all 0.3s ease-in; transition: all 0.3s ease-in; } .quantity .qtybutton:hover, .quantity .qtybutton:focus { background-color: #f1f1f1; } .quantity .inc.qtybutton { top: 0; border-bottom: none; } .quantity .dec.qtybutton { bottom: 0; } /********************** Product Availability ***********************/ .product-availability { font-weight: 500; color: #555555; font-size: 14px; } .product-availability i.fa { color: #4cbb6c; font-size: 2rem; margin-right: 5px; } /********************** Product Large Thumb ***********************/ .product-thumb-large { margin-bottom: 1.5rem; } .product-thumb-large .tab-pane { text-align: center; } /********************** Product Thumbnail ***********************/ @media (max-width: 47.94em) { .product-thumbnail { margin-bottom: 3rem; } } .product-thumbnail .thumb-menu-item a { display: block; border: 1px solid #ededed; margin-bottom: 1rem; } .product-thumbnail .thumb-menu-item a.active, .product-thumbnail .thumb-menu-item a:hover { border-color: #2874f0; } .product-thumbnail .owl-prev, .product-thumbnail .owl-next { position: absolute; top: 50%; margin-top: -1rem; -webkit-transform: scale(0.1); -moz-transform: scale(0.1); -ms-transform: scale(0.1); -o-transform: scale(0.1); transform: scale(0.1); -webkit-transition: all 0.4s ease-in; -moz-transition: all 0.4s ease-in; -ms-transition: all 0.4s ease-in; -o-transition: all 0.4s ease-in; transition: all 0.4s ease-in; } .product-thumbnail .owl-prev { width: 2rem; height: 2rem; line-height: 1.8rem; left: 1rem; } .product-thumbnail .owl-next { width: 2rem; height: 2rem; line-height: 1.8rem; right: 1rem; } .product-thumbnail :hover .owl-prev, .product-thumbnail :hover .owl-next { -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); } /********************** Featured Product ***********************/ .featured-produts { padding: 2rem; border: 1px solid #ecedf0; } .featured-produts .product-box { margin-bottom: 1rem; } .featured-produts .owl-prev { margin: 0 5px 0 25px; width: 3rem; height: 3rem; line-height: 2.8rem; } .featured-produts .owl-next { width: 3rem; height: 3rem; line-height: 2.8rem; } .featured-produts--3 { border-color: #fff; background-color: #fff; } .featured-produts--4 .owl-nav { background-color: #fff; } /********************** Best Seller Product Group ***********************/ .best-seller-product__group .product-box { margin-bottom: 3rem; } /********************** Best Seller Product Carousel ***********************/ .best-seller-product__carousel { padding: 2rem; } .best-seller-product__carousel .owl-prev { margin: 0 5px 0 25px; width: 3rem; height: 3rem; line-height: 2.8rem; } .best-seller-product__carousel .owl-next { width: 3rem; height: 3rem; line-height: 2.8rem; } .best-seller-product__carousel--3 { background-color: #fff; } .best-seller-product__carousel--4 { border: 1px solid #ededed; padding: 1rem; } .best-seller-product__carousel--4 .owl-prev { margin: 0 5px 0 25px; width: 3rem; height: 3rem; line-height: 2.8rem; } .best-seller-product__carousel--4 .owl-next { width: 3rem; height: 3rem; line-height: 2.8rem; } .best-seller-product__carousel--5 { background-color: #fff; } /********************** Random Product ***********************/ .random-product__title { background-color: #2874f0; padding: 15px; margin: 0; color: #fff; font-size: 2rem; line-height: 1.5; } .random-product__carousel { padding: 2rem; border: 1px solid #ededed; } @media (max-width: 75em) { .random-product__carousel { padding: 1rem; } } .random-product__group > div:last-child { border-bottom: none; } .random-product--2 { background-color: #fff; border: 1px solid #51aa1b; } .random-product--2 .random-product__title { background-color: #51aa1b; } .random-product--3 .random-product__title { background-color: #BA4E8A; } /********************** Trending Product ***********************/ .trending-product__carousel { padding: 2rem; border: 1px solid #ededed; } .trending-product__carousel .owl-prev { margin: 0 5px 0 25px; width: 3rem; height: 3rem; line-height: 2.8rem; } .trending-product__carousel .owl-next { width: 3rem; height: 3rem; line-height: 2.8rem; } .trending-product__carousel--3 { border: none; padding: 0; } .trending-product__carousel--4 { border-color: #fff; background: #fff; } .trending-product__carousel--5 { border-color: #fff; background: #fff; } /********************** Product Countdown ***********************/ .product-countdown { display: -webkit-box; display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; -moz-justify-content: center; justify-content: center; -ms-flex-wrap: wrap; -webkit-flex-wrap: wrap; -mox-flex-wrap: wrap; flex-wrap: wrap; } .product-countdown .single-countdown { position: relative; margin: 0 1rem; } .product-countdown .single-countdown__time { display: block; width: 6.5rem; height: 6.5rem; line-height: 6.5rem; text-align: center; border-radius: 50%; color: #333; font-size: 1.8rem; font-weight: 600; background: #EFEFEF; text-align: center; } @media (max-width: 75em) { .product-countdown .single-countdown__time { width: 4.5rem; height: 4.5rem; line-height: 4.5rem; text-align: center; font-size: 1.4rem; } } @media (max-width: 21.88em) { .product-countdown .single-countdown__time { width: 4rem; height: 4rem; line-height: 4rem; text-align: center; font-size: 1.2rem; } } .product-countdown .single-countdown__text { display: block; color: #606060; font-size: 1.1rem; text-transform: uppercase; text-align: center; margin-top: 1rem; } .product-countdown .single-countdown:not(:last-child):after { position: absolute; content: ":"; right: -1.3rem; top: 2.1rem; font-size: 3.5rem; } @media (max-width: 21.88em) { .product-countdown .single-countdown:not(:last-child):after { font-size: 2.5rem; top: 1rem; } } @media (max-width: 75em) { .product-countdown .single-countdown:not(:last-child) { margin-bottom: 1rem; } } /********************** Related Product ***********************/ .related-product__carousel { padding: 2rem; border: 1px solid #ededed; } .related-product .owl-prev { margin: 0 5px 0 25px; width: 3rem; height: 3rem; line-height: 2.8rem; } .related-product .owl-next { width: 3rem; height: 3rem; line-height: 2.8rem; } /***************************** Clients CSS *****************************/ .client-carousel { border: 1px solid #ededed; position: relative; padding: 2rem; } .client-carousel .single-client img { margin: 0 auto; } .client-carousel .owl-prev, .client-carousel .owl-next { -webkit-transition: all 0.3s ease-in; -moz-transition: all 0.3s ease-in; -ms-transition: all 0.3s ease-in; -o-transition: all 0.3s ease-in; transition: all 0.3s ease-in; margin-top: -1.5rem; position: absolute; top: 50%; width: 3rem; height: 3rem; line-height: 2.8rem; -webkit-transform: scale(0.1); -moz-transform: scale(0.1); -ms-transform: scale(0.1); -o-transform: scale(0.1); transform: scale(0.1); } .client-carousel .owl-prev { left: 1rem; } .client-carousel .owl-next { right: 1rem; } .client-carousel:hover .owl-prev, .client-carousel:hover .owl-next { -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); } .client-carousel--3 { border-color: #fff; background-color: #fff; } /***************************** 27. Modal CSS *****************************/ /*************************** Quick View Modal ***************************/ .modal { display: block !important; z-index: -9; padding-right: 0 !important; } .modal.show { z-index: 1050; } #productModal .modal-dialog { max-width: 100rem; width: 96rem; margin: 5% auto; } @media (max-width: 61.94em) { #productModal .modal-dialog { max-width: 100%; width: 95%; } } #productModal .modal-content { border: 1px solid rgba(0, 0, 0, 0.2); border-radius: 4px; } #productModal .modal-header { border: none; } #productModal .modal-body { padding: 2rem 2rem 7rem 2rem; } #productModal .modal-footer { padding: 2rem 0; } .modal-header .close { padding: 0; color: #000; opacity: .2; text-shadow: 0 1px 0 #fff; font-size: 28px; background-color: transparent; border: none; margin: 5px 5px 5px auto; cursor: pointer; } .modal-header .close:hover { opacity: 1; } /*************************** Review View Modal ***************************/ .review-modal .modal-dialog { width: 70rem; max-width: 70rem; border-radius: 3px; margin: 7rem auto; background: #fff; } @media (max-width: 47.94em) { .review-modal .modal-dialog { width: 95%; } } .review-modal .modal-content { padding: 1.5rem; } .review-modal .modal-header { display: block; border-bottom: none; padding: 0; } .review-modal .modal-header h2 { background-color: #333333; color: #fff; font-size: 1.3rem; text-transform: uppercase; padding: 1rem; margin-bottom: 1rem; } .review-modal .product-img { border: 1px solid #ededed; margin-bottom: 1rem; } .review-modal .product-name { font-size: 1.3rem; margin-bottom: 1.5rem; } .review-modal .product-description { color: #555555; line-height: 1.5; } .review-modal .your-rating { padding-bottom: 1.5rem; margin-top: .8rem; border-bottom: 1px solid #ededed; } .review-modal .your-rating h5 { display: inline-block; font-size: 1.2rem; margin-right: 2.5rem; } .review-modal .your-rating .ratings { display: inline-block; } .review-modal .your-rating .ratings i { color: #ffe11b; } /***************************** 28. Social CSS *****************************/ .social-share { display: -webkit-box; display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: flex; -webkit-box-align: center; -ms-box-align: center; -webkit-align-items: center; -moz-align-items: center; align-items: center; width: 100%; padding-left: 3rem; } .social__item { display: inline-block; } .social__item:not(last-child) { margin-right: 2rem; } .social__link { color: #838383; font-size: 2.1rem; display: block; } .social__link--2:hover { color: #838383; } .social.borderd-social__item:not(last-child) { margin-right: 1rem; } .social.borderd-social .social__link { width: 3rem; height: 3rem; line-height: 2.8rem; font-size: 2.6rem; text-align: center; border-radius: 3px; } .social.borderd-social .social__link:hover { color: #fff; } .social.borderd-social .social__link--2:hover { color: rgba(131, 131, 131, 0.8); } /***************************** 26. Blog CSS *****************************/ /********************* Blog Carousel ********************/ .blog-carousel { position: relative; } .blog-carousel .owl-prev { margin: 0 5px 0 25px; width: 3rem; height: 3rem; line-height: 2.8rem; } .blog-carousel .owl-next { width: 3rem; height: 3rem; line-height: 2.8rem; } /********************* Blog ********************/ .single-blog__thumb { width: 100%; height: auto; margin-bottom: 1rem; background-size: cover; background-repeat: no-repeat; background-attachment: scroll; background-position: 0 0; position: relative; display: block; } .single-blog__thumb:before { position: absolute; content: ''; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%); width: 70%; height: 70%; background: rgba(0, 0, 0, 0.3); } .single-blog__thumb:hover:before { width: 100%; height: 100%; } .single-blog__entry-meta { display: -webkit-box; display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: flex; -webkit-box-align: center; -ms-box-align: center; -webkit-align-items: center; -moz-align-items: center; align-items: center; } .single-blog__date { padding: 1rem 0; text-align: center; width: 5rem; background-color: #2874f0; border-radius: 3px; color: #fff; margin-right: 1rem; -webkit-flex: 0 0 5rem; -moz-flex: 0 0 5rem; -ms-flex: 0 0 5rem; flex: 0 0 5rem; } .single-blog__date .date { display: block; font-size: 2rem; font-weight: 700; margin-bottom: 5px; } .single-blog__date .month { font-size: 1.2rem; font-weight: 500; text-transform: uppercase; } .single-blog__title { color: #333; font-size: 1.4rem; text-transform: capitalize; font-weight: 600; display: block; line-height: 1.4; } .single-blog__footer { margin-top: 1.5rem; } .single-blog--2 .single-blog__date { background-color: #c09f52; } .single-blog--3 .single-blog__date { background-color: #51aa1b; } .single-blog--4 .single-blog__date { background-color: #BA4E8A; } .blog__thumb { margin-bottom: 3rem; } .blog__title { font-size: 2.4rem; text-transform: uppercase; margin-bottom: 2rem; color: #000000; } @media (max-width: 47.94em) { .blog__title { font-size: 2rem; } } .blog__meta { margin-bottom: 2rem; } .blog__meta span { color: #999999; font-size: 1.6rem; margin-right: 2rem; padding-right: 2rem; border-right: 1px solid #999999; font-weight: 500; margin-bottom: .5rem; display: inline-block; line-height: 1.4; } @media (max-width: 35.94em) { .blog__meta span { display: block; margin-right: 0; padding-right: 0; border-right: 0; padding-bottom: .5rem; } } .blog__meta a { color: #000000; font-size: 1.6rem; } .blog__content p { color: #999999; } .blog-box { -webkit-box-shadow: 2px 2px 8px 0 rgba(0, 0, 0, 0.2); -moz-box-shadow: 2px 2px 8px 0 rgba(0, 0, 0, 0.2); -ms-box-shadow: 2px 2px 8px 0 rgba(0, 0, 0, 0.2); -o-box-shadow: 2px 2px 8px 0 rgba(0, 0, 0, 0.2); box-shadow: 2px 2px 8px 0 rgba(0, 0, 0, 0.2); padding: 2rem; } /***************************** 31. Instagram CSS *****************************/ .instagram-feed-area { overflow: hidden; } .instagram-feed { display: -webkit-box; display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: flex; -ms-flex-wrap: wrap; -webkit-flex-wrap: wrap; -mox-flex-wrap: wrap; flex-wrap: wrap; } .instagram-feed__single { -webkit-flex: 0 0 20%; -moz-flex: 0 0 20%; -ms-flex: 0 0 20%; flex: 0 0 20%; position: relative; } @media (max-width: 61.94em) { .instagram-feed__single { -webkit-flex: 0 0 25%; -moz-flex: 0 0 25%; -ms-flex: 0 0 25%; flex: 0 0 25%; } } @media (max-width: 47.94em) { .instagram-feed__single { -webkit-flex: 0 0 33.3333%; -moz-flex: 0 0 33.3333%; -ms-flex: 0 0 33.3333%; flex: 0 0 33.3333%; } } @media (max-width: 35.94em) { .instagram-feed__single { -webkit-flex: 0 0 50%; -moz-flex: 0 0 50%; -ms-flex: 0 0 50%; flex: 0 0 50%; } } @media (max-width: 21.88em) { .instagram-feed__single { -webkit-flex: 0 0 100%; -moz-flex: 0 0 100%; -ms-flex: 0 0 100%; flex: 0 0 100%; } } .instagram-feed__single:hover .instagram-feed__overlay { -webkit-transform: scale3d(1, 1, 1); -moz-transform: scale3d(1, 1, 1); -ms-transform: scale3d(1, 1, 1); -o-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } .instagram-feed__overlay { display: block; position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: -webkit-box; display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; -moz-justify-content: center; justify-content: center; -webkit-box-align: center; -ms-box-align: center; -webkit-align-items: center; -moz-align-items: center; align-items: center; background-color: rgba(0, 0, 0, 0.4); -webkit-transform: scale3d(1.2, 1.2, 1.2); -moz-transform: scale3d(1.2, 1.2, 1.2); -ms-transform: scale3d(1.2, 1.2, 1.2); -o-transform: scale3d(1.2, 1.2, 1.2); transform: scale3d(1.2, 1.2, 1.2); } .instagram-feed__overlay i.fa { color: #fff; font-size: 2rem; -webkit-transition: all 0.5s ease-in; -moz-transition: all 0.5s ease-in; -ms-transition: all 0.5s ease-in; -o-transition: all 0.5s ease-in; transition: all 0.5s ease-in; } /***************************** 32. Header CSS *****************************/ .page-header { background: url(../img/breadcrumb.jpg) no-repeat scroll center/cover; min-height: 27.6rem; margin-bottom: 4rem; display: -webkit-box; display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; -moz-justify-content: center; justify-content: center; -webkit-box-align: center; -ms-box-align: center; -webkit-align-items: center; -moz-align-items: center; align-items: center; } @media (max-width: 75em) { .page-header { min-height: 25rem; } } @media (max-width: 61.94em) { .page-header { min-height: 20rem; } } @media (max-width: 47.94em) { .page-header { min-height: 15rem; } } @media (max-width: 35.94em) { .page-header { min-height: 10rem; } } .page-title { text-transform: capitalize; font-size: 2.8rem; letter-spacing: 2px; margin: 0; } @media (max-width: 47.94em) { .page-title { font-size: 2rem; letter-spacing: 1px; } } .breadcumb__list { position: relative; display: inline-block; padding-right: 1.2rem; } .breadcumb__list:not(:last-child):after { position: absolute; content: ">"; right: 0; top: 0; color: #333; } .breadcumb__link { color: #333; font-size: 1.3rem; } .breadcumb__link.current { color: #2874f0; } /***************************** 33. Pagination CSS *****************************/ /********************* Product Pagination ********************/ .product-pagintaion { margin: 3rem 0 0; } @media (max-width: 47.94em) { .product-pagintaion { display: -webkit-box; display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; -moz-justify-content: center; justify-content: center; } } .product-pagintaion .showing-product { color: #333; text-transform: capitalize; font-size: 1.4rem; margin-bottom: 0; } @media (max-width: 47.94em) { .product-pagintaion .showing-product { margin-bottom: 2rem; } } .product-pagintaion .page-list { background: #fff; padding: .5rem 1rem; -webkit-box-shadow: 2px 2px 4px 0 rgba(0, 0, 0, 0.2); -moz-box-shadow: 2px 2px 4px 0 rgba(0, 0, 0, 0.2); -ms-box-shadow: 2px 2px 4px 0 rgba(0, 0, 0, 0.2); -o-box-shadow: 2px 2px 4px 0 rgba(0, 0, 0, 0.2); box-shadow: 2px 2px 4px 0 rgba(0, 0, 0, 0.2); } .product-pagintaion .page-list li { display: inline-block; padding: .8rem; } .product-pagintaion .page-list li a { color: #333; font-size: 1.4rem; } .product-pagintaion .page-list li.prev { margin-right: 8rem; } .product-pagintaion .page-list li.next { margin-left: 8rem; } .product-pagintaion .page-list li.current a { color: #2874f0; font-size: 1.8rem; } /********************* Blog Pagination ********************/ .pagination li { color: #333; display: inline-block; margin-right: 1rem; } .pagination li:first-child { margin-right: 2rem; } .pagination li:first-child a { border: none; width: auto; height: auto; } .pagination li:first-child a i { padding-right: .5rem; } .pagination li:last-child { margin-left: 2rem; } .pagination li:last-child a { border: none; width: auto; height: auto; } .pagination li:last-child a i { padding-left: .5rem; } .pagination li a { color: #333; font-size: 1.4rem; width: 3rem; height: 3rem; text-align: center; line-height: 3rem; border: 1px solid #ededed; font-weight: 500; display: block; border-radius: 2px; } .pagination li a:hover { color: #2874f0; border-color: rgba(237, 237, 237, 0.6); } /***************************** 34. Team CSS *****************************/ .team-member { background-color: #fff; padding: 1.5rem; } .team-member__thumb { position: relative; } .team-member__thumb img { width: 100%; } .team-member__thumb:before { position: absolute; content: ''; right: 0; bottom: 0; background-color: rgba(0, 0, 0, 0.3); width: 100%; height: 100%; -webkit-transform: scale(0.1, 0.1); -moz-transform: scale(0.1, 0.1); -ms-transform: scale(0.1, 0.1); -o-transform: scale(0.1, 0.1); transform: scale(0.1, 0.1); } .team-member__thumb:hover:before { -webkit-transform: scale(1, 1); -moz-transform: scale(1, 1); -ms-transform: scale(1, 1); -o-transform: scale(1, 1); transform: scale(1, 1); } .team-member__thumb:hover .team-member__social i { -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); } .team-member__social { position: absolute; top: 50%; left: 50%; width: 100%; text-align: center; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .team-member__social i { color: #fff; font-size: 2.2rem; display: inline-block; margin-right: .8rem; -webkit-transform: scale(5); -moz-transform: scale(5); -ms-transform: scale(5); -o-transform: scale(5); transform: scale(5); } .team-member__social a:nth-child(1) i { -webkit-transition: all 0.4s ease; -moz-transition: all 0.4s ease; -ms-transition: all 0.4s ease; -o-transition: all 0.4s ease; transition: all 0.4s ease; } .team-member__social a:nth-child(2) i { -webkit-transition: all 0.6s ease; -moz-transition: all 0.6s ease; -ms-transition: all 0.6s ease; -o-transition: all 0.6s ease; transition: all 0.6s ease; } .team-member__social a:nth-child(3) i { -webkit-transition: all 0.8s ease; -moz-transition: all 0.8s ease; -ms-transition: all 0.8s ease; -o-transition: all 0.8s ease; transition: all 0.8s ease; } .team-member__social a:nth-child(4) i { -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -ms-transition: all 1s ease; -o-transition: all 1s ease; transition: all 1s ease; } .team-member__name { font-weight: 500; margin-top: 1.5rem; font-size: 1.6rem; } /***************************** 35. Testimonial CSS *****************************/ .testimonial { -webkit-box-shadow: 0 0px 8px rgba(0, 0, 0, 0.3); -moz-box-shadow: 0 0px 8px rgba(0, 0, 0, 0.3); -ms-box-shadow: 0 0px 8px rgba(0, 0, 0, 0.3); -o-box-shadow: 0 0px 8px rgba(0, 0, 0, 0.3); box-shadow: 0 0px 8px rgba(0, 0, 0, 0.3); margin: 2rem; border: 1px solid #ededed; padding: 2.5rem 3.5rem; } .testimonial__desc p { color: #333; font-size: 1.5rem; } .testimonial__author { display: -webkit-box; display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: flex; -webkit-box-align: center; -ms-box-align: center; -webkit-align-items: center; -moz-align-items: center; align-items: center; margin-top: 1.5rem; } .testimonial__author-img { -webkit-flex: 0 0 6.5rem; -moz-flex: 0 0 6.5rem; -ms-flex: 0 0 6.5rem; flex: 0 0 6.5rem; margin-right: 3rem; } .testimonial__author-img img { height: 6.5rem; border-radius: 50%; width: 100%; } .testimonial-carousel .owl-dots { display: -webkit-box; display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; -moz-justify-content: center; justify-content: center; } .testimonial-carousel .owl-dots .owl-dot { width: 1.5rem; height: 1.5rem; background-color: #e2e2e2; border: 2px solid #e2e2e2; border-radius: 50%; margin-right: .8rem; } .testimonial-carousel .owl-dots .owl-dot.active { border-color: #4cbb6c; } .testimonial-carousel .owl-dots .owl-dot:hover { border-color: #4cbb6c; } /***************************** 36. comment CSS *****************************/ .blog-comments { margin-top: 2rem; } .blog-comments h4 { font-size: 1.8rem; line-height: 1.8; margin-bottom: 3.5rem; } .blog-comments .comment-list li .children { padding-left: 5rem; } .blog-comments .comment-list .single-comment { margin-bottom: 4rem; display: -webkit-box; display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: flex; } .blog-comments .comment-list .single-comment__thumb { -webkit-flex: 0 0 7rem; -moz-flex: 0 0 7rem; -ms-flex: 0 0 7rem; flex: 0 0 7rem; height: 7rem; margin-right: 3rem; } .blog-comments .comment-list .single-comment__thumb img { width: 100%; height: 100%; border-radius: 50%; } .blog-comments .comment-list .single-comment__content h5 { margin-bottom: 1rem; } .blog-comments .comment-list .single-comment__content h5 a { font-size: 1.6rem; font-weight: 600; margin-bottom: .6rem; line-height: 1.6; color: #000000; } .blog-comments .comment-list .single-comment__content h5 span { font-size: 1.4rem; font-weight: 300; color: #606060; } .blog-comments .comment-list .single-comment__content p { color: #333; font-size: 1.4rem; line-height: 1.6; } .blog-comments .comment-list .single-comment .reply { display: inline-block; font-size: 1.3rem; font-weight: 600; color: #606060; text-transform: capitalize; } .blog-comments .comment-list .single-comment .reply:hover { color: #333333; } /***************************** 37. Table CSS *****************************/ .order-table { width: 100%; } .order-table th, .order-table td { font-size: 1.4rem; padding: 1.5rem 0; border-bottom: 1px solid #fff; } .order-table tr.order-total td { font-weight: 700; border-bottom: none; } .cart-table table td, .cart-table table th { vertical-align: middle; text-align: center; padding: 1.5rem; } .cart-table table th { text-transform: capitalize; white-space: -moz-nowrap; white-space: nowrap; border-bottom: none; } .cart-table table td h3 a { color: #333; font-weight: 500; } .cart-table table td i { color: #333; } .cart-table table td img { width: 20rem; max-width: 20rem; } .cart-table table td .quantity { margin: 0 auto; -webkit-box-shadow: 0 0 0; -moz-box-shadow: 0 0 0; -ms-box-shadow: 0 0 0; -o-box-shadow: 0 0 0; box-shadow: 0 0 0; } .cart-table table td.cart-product-price a { font-size: 1.8rem; line-height: 1.6; } .compare-table table td, .compare-table table th { vertical-align: middle; text-align: center; padding: 2rem 1.5rem; font-weight: 700; font-size: 1.6rem; } .compare-table table th { text-transform: capitalize; border-bottom: none; } .compare-table table td { min-width: 14rem; } .compare-table table td.first-column { min-width: 20rem; } .compare-table table td img { width: 20rem; } .compare-table table td .price .sale-price { font-size: 1.8rem; } .compare-table table td .price .regular-price { font-size: 1.5rem; margin-right: .4rem; } .compare-table table td h3 a { font-weight: 700; font-size: 1.6rem; color: #333; } .compare-table table td .rating { text-align: center; } .compare-table table td .rating a { display: inline-block; } .compare-table table td .rating i.fa { color: #ffe11b; } .compare-table table td .rating i.disabled { color: #c9c9c9; } .compare-table table td .rating span { font-size: 1.4rem; font-weight: 300; margin-top: 1rem; display: block; } .compare-table table td .summary { min-width: 14rem; } .compare-table table td .delete { color: #333; } /***************************** 29. Animation CSS *****************************/ @keyframes passing-reverse { from { transform: translateX(0); } 50% { transform: translateX(7%); opacity: .6; } to { transform: translateX(30%); opacity: 0; } } @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } /***************************** 40. Home CSS *****************************/ .quick-links { text-align: center; font-size: 1.3rem; text-transform: capitalize; padding: 2rem 0; } .quick-links span { color: #333; position: relative; margin-right: 3rem; line-height: 1.8; } .quick-links span:after { position: absolute; content: '\f178'; right: -2.4rem; top: -4px; font-family: fontAwesome; font-size: 1.4rem; } .quick-links a { display: inline-block; color: #838383; } .quick-links a:hover { color: #51aa1b; } .banner-slide-wrapper { background: #fff; padding: 3rem; } /***************************** 41. Shop CSS *****************************/ .shop-toolbar { margin-bottom: 3rem; } .shop-toolbar__grid-list { display: -webkit-box; display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: flex; -webkit-box-align: center; -ms-box-align: center; -webkit-align-items: center; -moz-align-items: center; align-items: center; } @media (max-width: 47.94em) { .shop-toolbar__grid-list { margin-bottom: 2rem; } } .shop-toolbar__grid-list ul { margin-right: 1rem; } .shop-toolbar__grid-list ul li { display: inline-block; margin-right: .8rem; } .shop-toolbar__grid-list ul li a { height: 3rem; width: 3rem; line-height: 3rem; cursor: pointer; text-align: center; border: none; background: #333; border-radius: 4px; display: block; } .shop-toolbar__grid-list ul li a:hover { background-color: #c09f52; } .shop-toolbar__grid-list ul li a.active { background-color: #c09f52; } .shop-toolbar__grid-list ul li a i { font-size: 1.8rem; color: #fff; } .shop-toolbar__product-count { font-size: 1.4rem; color: #333; text-transform: capitalize; } .shop-toolbar__shorter { display: -webkit-box; display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: flex; -webkit-box-align: center; -ms-box-align: center; -webkit-align-items: center; -moz-align-items: center; align-items: center; } .shop-toolbar__shorter label { font-size: 1.4rem; margin-right: 2rem; margin-bottom: 0; color: #333; text-transform: capitalize; } .main-shop-wrapper { border: 1px solid #ededed; padding: 2rem; } /***************************** 42. Single Product CSS *****************************/ .single-product__img { position: relative; text-align: center; margin-bottom: 1.5rem; } .single-product__img--popup { position: absolute; content: ''; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .single-product__img--popup i { color: #fff3cd; font-size: 3.5rem; } .single-product .product-thumbnail { padding: 0 3rem; } @media (max-width: 61.94em) { .single-product .product-thumbnail { padding: 0; margin-bottom: 3rem; } } .single-product__name { color: #333; text-transform: capitalize; font-size: 2.4rem; line-height: 1; font-weight: 600; margin-bottom: 1.5rem; } .single-product__referance { color: #606060; margin-bottom: 1.5rem; } .single-product__review-btn { color: #606060; display: inline-block; margin-bottom: 2rem; cursor: pointer; } .single-product__review-btn i { margin-right: .6rem; } .single-product__price { margin-bottom: 2.5rem; display: -webkit-box; display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: flex; -webkit-box-align: center; -ms-box-align: center; -webkit-align-items: center; -moz-align-items: center; align-items: center; } .single-product__price span { display: inline-block; } .single-product__price .regular-price { margin-right: 1rem; } .single-product__short-desc { color: #333; margin-bottom: 1.5rem; line-height: 1.6; font-size: 1.4rem; } .single-product .product-varients__size { margin-bottom: 1rem; } .single-product .product-varients__label { font-weight: 700; } .single-product .product-action-wrapper .add-to-cart { padding: 1.5rem 2rem; } .single-product .product-availability { margin-bottom: 2rem; } .single-product .social-share { padding-left: 0; margin-bottom: 2rem; } .single-product .social-share span { font-size: 1.6rem; color: #555555; } .single-product .social__link i { color: #555555; } .single-product .block-reassurance-item { padding: 1.5rem 0; } .single-product .block-reassurance-item:last-child { padding-bottom: 0; } .single-product .block-reassurance-item span { font-weight: 400; font-size: 1.4rem; color: #333; } .single-product .block-reassurance-item img { margin-right: .8rem; } .product-description { color: #606060; line-height: 1.6; } .product-features { margin-top: 2rem; margin-left: .4rem; } .product-features h3 { font-size: 1.6rem; margin-bottom: 0; } .product-features .data-sheet { display: -webkit-box; display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: flex; -ms-flex-wrap: wrap; -webkit-flex-wrap: wrap; -mox-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: justify; -ms-flex-pack: justify; -webkit-justify-content: space-between; -moz-justify-content: space-between; justify-content: space-between; } .product-features .data-sheet li { -webkit-flex: 0 0 49.5%; -moz-flex: 0 0 49.5%; -ms-flex: 0 0 49.5%; flex: 0 0 49.5%; background: #f1f1f1; padding: 1rem; word-break: normal; margin-bottom: .8rem; } @media (max-width: 35.94em) { .product-features .data-sheet li { -webkit-flex: 0 0 100%; -moz-flex: 0 0 100%; -ms-flex: 0 0 100%; flex: 0 0 100%; } } .group-product-table { width: 100%; background: #f1f1f1; border-left: 1px solid #ededed; border-top: 1px solid #ededed; margin-bottom: 3rem; } .group-product-table tbody tr td { vertical-align: middle; text-align: center; border-right: 1px solid #ededed; border-bottom: 1px solid #ededed; height: 100%; padding: 1rem 0; } .group-product-table tbody tr td.product-quantity .quantity { float: left; -webkit-box-shadow: 0 0 0 rgba(0, 0, 0, 0); -moz-box-shadow: 0 0 0 rgba(0, 0, 0, 0); -ms-box-shadow: 0 0 0 rgba(0, 0, 0, 0); -o-box-shadow: 0 0 0 rgba(0, 0, 0, 0); box-shadow: 0 0 0 rgba(0, 0, 0, 0); } .group-product-table tbody tr td.product-quantity .quantity .qtybutton { background-color: #fff; } .group-product-table tbody tr td.product-quantity span { padding-left: 3rem; padding-top: 1.7rem; float: left; } @media (max-width: 35.94em) { .group-product-table tbody tr td.product-quantity span { padding-left: 1rem; padding-bottom: 1rem; } } .group-product-table tbody tr td.product-name { padding: 0; } .group-product-table tbody tr td.product-name a { color: #333; text-transform: capitalize; font-size: 1.8rem; line-height: 1.4; } .group-product-table tbody tr td.product-price { margin-bottom: 0; display: table-cell; width: 9rem; } .group-product-table tbody tr td.product-price .ammount { display: block; font-size: 1.5rem; font-weight: 500; } .user-information { border-bottom: 1px solid #ededed; border-top: 1px solid #ededed; } @media (max-width: 61.94em) { .user-information { border: 1px solid #ededed; border-bottom: none; } } .user-information [class*="col-"]:not(:last-child) .user-information__single { border-right: 1px solid #ededed; } @media (max-width: 47.94em) { .user-information [class*="col-"]:not(:last-child) .user-information__single { border-right: 0; } } @media (max-width: 61.94em) { .user-information [class*="col-"]:nth-child(2) .user-information__single { border-right: 0; } } .user-information__single { height: 100%; padding: 3.5rem 2rem; min-height: 11.8rem; } @media (max-width: 61.94em) { .user-information__single { min-height: 10.5rem; display: -webkit-box; display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: flex; -webkit-box-align: center; -ms-box-align: center; -webkit-align-items: center; -moz-align-items: center; align-items: center; border-bottom: 1px solid #ededed; padding: 0 2rem; } } .user-information p { color: #333; font-size: 1.4rem; } .user-information p a { color: #2874f0; } /***************************** 45. Checkout CSS *****************************/ .user-actions__single h3 { background-color: #f5f5f5; border-top: 3px solid #2874f0; padding: 1.5rem; font-weight: 400; color: #333; font-size: 1.5rem; margin-bottom: 2rem; } .user-actions__single h3 span { color: #2874f0; cursor: pointer; } .user-actions__single h3 i { padding-right: 1rem; } .user-actions__form { border: 1px solid #ededed; border-radius: 3px; padding: 1.5rem; margin-bottom: 2rem; } .checkout-login__text { font-size: 1.4rem; color: #333; line-height: 1.6; margin-bottom: 1.5rem; } .order-details { background-color: #f5f5f5; padding: 2rem; } .checkout-payment { border: 1px solid #ededed; padding: 2rem; } .checkout-payment__info { padding-left: 35px; padding-top: 10px; } /***************************** 46. Cart CSS *****************************/ .cart-page-total h2 { margin-bottom: 2rem; } .cart-page-total ul { border-left: 1px solid #ededed; border-top: 1px solid #ededed; margin-bottom: 2rem; } .cart-page-total ul li { border-right: 1px solid #ededed; border-bottom: 1px solid #ededed; padding: 1.5rem 2rem; display: -webkit-box; display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; -webkit-justify-content: space-between; -moz-justify-content: space-between; justify-content: space-between; } .cart-page-total ul li span { font-weight: 500; } /***************************** 47. Stores CSS *****************************/ .store { -webkit-box-shadow: 2px 2px 8px 0 rgba(0, 0, 0, 0.2); -moz-box-shadow: 2px 2px 8px 0 rgba(0, 0, 0, 0.2); -ms-box-shadow: 2px 2px 8px 0 rgba(0, 0, 0, 0.2); -o-box-shadow: 2px 2px 8px 0 rgba(0, 0, 0, 0.2); box-shadow: 2px 2px 8px 0 rgba(0, 0, 0, 0.2); border-bottom: 1px solid rgba(0, 0, 0, 0.125); padding: 2rem 2.5rem; } .store:not(:last-child) { margin-bottom: 3rem; } .store__description { padding-left: 2rem; } .store__title { margin-bottom: 1.5rem; text-transform: uppercase; } .store__address { font-size: 1.5rem; line-height: 1.6; } .store__timing { border-left: 1px solid #ededed; padding-left: 4rem; } @media (max-width: 35.94em) { .store__timing { padding-left: 0; border-left: none; padding-top: 1rem; } } .store__timing ul li:not(:last-child) { margin-bottom: 1rem; } .store__timing ul li strong { width: 5rem; display: inline-block; text-align: right; padding-right: .8rem; } @media (max-width: 35.94em) { .store__timing ul li strong { width: auto; text-align: left; } } /***************************** 48. About CSS *****************************/ .about h3 { font-weight: 600; text-transform: uppercase; margin-bottom: 2rem; } .about p { color: #333; font-size: 1.5rem; line-height: 1.6; } .about-list__item { margin-bottom: 2.3rem; color: #333; position: relative; font-size: 1.6rem; padding-left: 3.5rem; } .about-list__item:before { position: absolute; content: '\f05d'; left: 0; top: 0; font-family: fontAwesome; font-size: 3rem; color: #4cbb6c; } /***************************** 49. Contact CSS *****************************/ @media (max-width: 47.94em) { .store-info { margin-bottom: 3rem; } } .store-info__item { display: -webkit-box; display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: flex; border-bottom: 1px solid #ededed; padding-top: 1.5rem; padding-bottom: .5rem; } .store-info__item i { color: #555555; font-size: 3.5rem; margin-right: 2rem; } .store-info__data p, .store-info__data a { color: #333; line-height: 1.6; font-size: 1.4rem; } /***************************** 50. 404 CSS *****************************/ .error-text { text-align: center; } .error-text h1 { font-size: 20rem; color: #ea4a30; } @media (max-width: 47.94em) { .error-text h1 { font-size: 10rem; } } .error-text p { color: #333; font-size: 1.8rem; line-height: 1.6; margin-bottom: 3rem; } @media (min-width: 992px) { .header-top { background: #e5e5e5 !important; color: #111 !important; } .contact-info__list a, .contact-info__list .fa { color: #111 !important; } .dropdown .header-top__dropdown { color: #111 !important; } .header-top__dropdown a { color: #111 !important; } .header-bottom { background: #e5e5e5 !important; color: #111 !important; } .mainmenu--2 li.menu-item-has-children ul { background-color: rgb(51, 51, 51) !important; } .mainmenu__item.menu-item-has-children ul.megamenu > li > a { font-weight: 700 !important; font-size: 16px !important; } .mainmenu li a { display: block; padding: 1.1rem 0.9rem; font-size: 13px !important; font-weight: 600; color: #333 !important; text-transform: capitalize !important; } }