@charset "UTF-8"; /****************************** Template Name: Gsore Template Description: Gsore - Grocery and Organic Food Shop HTML Template Template Author: Jaber Hossain Shovon Template URL: https://hasthemes.com/ ===================== Table Of Index: ===================== 01 - Base - Default 02 - Base - Color 03 - Base - Typhography 04 - Base - Animation 05 - Component - Button 06 - Component - Hero Slider 07 - Component - CMS 08 - Component - Banner 09 - Component - Product 10 - Component - Testimonial 11 - Component - Newsletter 12 - Component - Company Logo 13 - Component - Modal 14 - Component - Breadcrumb 15 - Component - Shop Sorting 16 - Component - Pagination 17 - Component - Sidebar Widget 18 - Component - Gallery 19 - Component - Tabstyle 20 - Component - Comment 21 - Component - Form 22 - Page - Shop 23 - Page - Product Single 24 - Page - Blog 25 - Page - Cart 26 - Page - Checkout 27 - Page - 404 28 - Page - My Account 29 - Page - Login 30 - Page - Contact 31 - Page - FAQ 32 - Page - About 33 - Layout - Header 34 - Layout - Mobile Menu 35 - Layout - Vertical Menu 36 - Layout - Footer 37 - Layout - Custom Layout 38 - Layout - Table 39 - Layout - Offcanvas 40 - Layout - Addcart Offcanvas 41 - Layout - Slider Customize 42 - Layout - Utilities ******************************/ /***************************** 01 - Base - Default *****************************/ @import url("https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&family=Rubik:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,400;1,500;1,600;1,700;1,800;1,900&display=swap"); * { margin: 0; padding: 0; list-style: none; word-wrap: break-word; outline: none; } *, *::after, *::before { box-sizing: border-box; } body { font-family: "Rubik", sans-serif; font-size: 16px; font-weight: 400; color: #323232; } a, button { color: inherit; line-height: inherit; text-decoration: none; cursor: pointer; color: #000; background: none; } a, button, img, input, span { transition: all 0.3s ease 0s; outline: none; border: none; } *:focus { outline: none !important; } a:focus { color: inherit; outline: none; text-decoration: none; } a:hover { text-decoration: none; } button, input[type=submit] { cursor: pointer; } dl, ol, ul { list-style: outside none none; margin: 0; padding: 0; } .no-gutters { margin-right: 0; margin-left: 0; } .img-responsive { overflow: hidden; } .img-responsive img { width: 100%; height: auto; } .border-around { border: 1px solid #ebebeb; border-radius: 3px; } .border-line--small { width: 20px; height: 1px; background: #fff; left: 0; top: 50%; } .list-space--small>li { margin-bottom: 10px; } .list-space--small>li:last-child { margin-bottom: 0; } .list-space--medium>li { margin-bottom: 20px; } .list-space--medium>li:last-child { margin-bottom: 0; } .list-space--large>li { margin-bottom: 30px; } .list-space--large>li:last-child { margin-bottom: 0; } .pos-relative { position: relative; } .pos-absolute { position: absolute; } .position-sticky { position: -webkit-sticky; position: sticky; top: 0; width: 100%; } .overflow-hidden { overflow: hidden; } .float-margin-auto--15 { margin-left: -15px; margin-right: -15px; } .float-left { float: left; } .float-right { float: right; } .float-grid-2 { width: 50%; } .float-grid-3 { width: 100%; } @media (min-width: 576px) { .float-grid-3 { width: 50%; } } @media (min-width: 768px) { .float-grid-3 { width: 50%; } } @media (min-width: 992px) { .float-grid-3 { width: 33.3333%; } } .float-grid-4 { width: 100%; } @media (min-width: 576px) { .float-grid-4 { width: 50%; } } @media (min-width: 768px) { .float-grid-4 { width: 33.333%; } } @media (min-width: 992px) { .float-grid-4 { width: 25%; } } .float-grid-5 { width: 100%; } @media (min-width: 360px) { .float-grid-5 { width: 50%; } } @media (min-width: 576px) { .float-grid-5 { width: 50%; } } @media (min-width: 768px) { .float-grid-5 { width: 33.333%; } } @media (min-width: 992px) { .float-grid-5 { width: 25%; } } @media (min-width: 1200px) { .float-grid-5 { width: 20%; } } .float-20-per { width: 20%; } .float-80-per { width: 80%; } .text-overflow-ellipsis { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .m-b-60-md { margin-bottom: 60px; } @media (min-width: 992px) { .m-b-60-md { margin-bottom: 0; } } .m-b-60-md .banner__box--single { text-align: center; } .m-t-60-md { margin-top: 60px; } @media (min-width: 992px) { .m-t-60-md { margin-top: 0; } } .m-t-60-md .banner__box--single { text-align: center; } .gray-bg.p-tb-100 { padding-top: 60px; padding-bottom: 60px; } @media (min-width: 768px) { .gray-bg.p-tb-100 { padding-top: 80px; padding-bottom: 80px; } } @media (min-width: 992px) { .gray-bg.p-tb-100 { padding-top: 100px; padding-bottom: 100px; } } .gray-bg.m-t-100 { margin-top: 50px; } @media (min-width: 768px) { .gray-bg.m-t-100 { margin-top: 70px; } } @media (min-width: 992px) { .gray-bg.m-t-100 { margin-top: 90px; } } .absolute-center { top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; } .absolute-center-vertical { top: 50%; transform: translateY(-50%); } .absolute-center-horizontal { left: 50%; transform: translateX(-50%); } .color-invert { filter: invert(100%); } .tr-vertical-middle { vertical-align: middle; } /***************************** 02 - Base - Color *****************************/ .color-green { color: #89c74a; } .gray-bg { background-color: #eef0f1; } /***************************** 03 - Base - Typhography *****************************/ /*...::: Font Weight :::... */ .font--light { font-weight: 300; } .font--regular { font-weight: 400; } .font--medium { font-weight: 500; } .font--semi-bold { font-weight: 600; } .font--bold { font-weight: 700; } .font--xbold { font-weight: 800; } .font--black { font-weight: 800; } /*...::: Title - Font Style :::...*/ .title { display: block; line-height: 1; } .title__hero--tiny { font-size: 16px; } .title__hero--small { font-size: 20px; } @media (min-width: 768px) { .title__hero--small { font-size: 24px; } } .title__hero--xlarge { font-size: 25px; line-height: 25px; } @media (min-width: 576px) { .title__hero--xlarge { font-size: 25px; line-height: 25px; } } @media (min-width: 768px) { .title__hero--xlarge { font-size: 63px; line-height: 63px; } } @media (min-width: 992px) { .title__hero--xlarge { font-size: 63px; line-height: 63px; } } @media (min-width: 1200px) { .title__hero--xlarge { font-size: 63px; line-height: 63px; } } @media (min-width: 1566px) { .title__hero--xlarge { font-size: 63px; line-height: 63px; } } .section-content { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .section-content__title { font-size: 25px; line-height: 35px; color: #222; font-weight: 400; text-transform: capitalize; } @media (min-width: 768px) { .section-content__title { font-size: 36px; line-height: 36px; } } .section-content__desc { margin-top: 5px; color: #888; font-size: 14px; transition: all 0.3s ease; text-decoration: none; display: inline-block; } .section-content--border { padding-bottom: 28px; border-bottom: 1px solid #ebebeb; } @media (min-width: 992px) { .section-content--border { padding-bottom: 20px; } } .section-content__inner { margin-bottom: 30px; } @media (min-width: 576px) { .section-content__inner { margin-bottom: 30px; } } @media (min-width: 768px) { .section-content__inner { margin-bottom: 50px; } } @media (min-width: 992px) { .section-content__inner { margin-bottom: 60px; } } .section-content__inner h2 { display: inline-block; margin-bottom: 0; text-transform: capitalize; position: relative; font-family: "Lora", serif; font-weight: 400; font-size: 19px; line-height: 20px; margin-bottom: 30px; } @media (min-width: 576px) { .section-content__inner h2 { font-size: 19px; line-height: 20px; } } @media (min-width: 768px) { .section-content__inner h2 { font-size: 33px; line-height: 37px; } } @media (min-width: 992px) { .section-content__inner h2 { font-size: 40px; line-height: 48px; } } .section-content__inner h2::after { position: absolute; content: ""; width: 80px; height: 2px; background: #222222; bottom: -35px; left: 50%; transform: translatex(-50%); } .block-quote { margin-left: 80px; color: #666; background: #eef0f1; border-left: 5px solid #79a206; padding: 15px 30px; margin: 30px 0 30px 40px; text-align: justify; font-weight: 400; font-style: italic; line-height: 1.8; } .para__text { font-size: 14px; margin: 20px 0 20px 0; } .para__text:last-child { margin: 20px 0 0 0; } .text--gray { color: #666; } .text-area { margin-bottom: 60px; } .text-area:last-child { margin-bottom: 0; } @media (min-width: 768px) { .text-area { margin-bottom: 80px; } } @media (min-width: 992px) { .text-area { margin-bottom: 100px; } } .text-area h5 { margin-bottom: 30px; } .text-underline { text-decoration: underline; } .letter-spacing--4 { letter-spacing: 4px; } /***************************** 04 - Base - Animation *****************************/ @keyframes animate-top { 0% { opacity: 0; transform: translateY(-50px); } 100% { opacity: 1; transform: translateY(0px); } } @keyframes animate-bottom { 0% { opacity: 0; transform: translateY(50px); } 100% { opacity: 1; transform: translateY(0px); } } @keyframes animate-left { 0% { opacity: 0; transform: translateX(-100%); } 100% { opacity: 1; transform: translateX(0px); } } @keyframes animate-right { 0% { opacity: 0; transform: translateX(50px); } 100% { opacity: 1; transform: translateX(0px); } } @keyframes animate-zoom { 0% { opacity: 0; transform: scale(0.3); } 100% { opacity: 1; transform: scale(1); } } @keyframes animate-zoom-blink { 0% { transform: scale(1.1); } 25% { transform: scale(0.9); } 50% { transform: scale(1.1); } 75% { transform: scale(0.9); } 100% { transform: scale(1.1); } } @keyframes slideInDown { from { transform: translate3d(0, -100%, 0); visibility: visible; } to { transform: translate3d(0, 0, 0); } } .glossy-flash-animate::before { background: rgba(255, 255, 255, 0.3); bottom: 0; content: ""; left: 50%; position: absolute; right: 50%; top: 0; opacity: 1; } .glossy-flash-animate::after { background: rgba(255, 255, 255, 0.6); bottom: 50%; content: ""; left: 0; position: absolute; right: 0; top: 50%; opacity: 1; } .glossy-flash-animate:hover::before { left: 0; right: 0; opacity: 0; transition: all 900ms linear; } .glossy-flash-animate:hover::after { top: 0; bottom: 0; opacity: 0; transition: all 900ms linear; } /***************************** 05 - Component - Button *****************************/ .btn { display: inline-block; font-size: 14px; line-height: 14px; outline: none; transition: all 0.3s ease; border-radius: 0; padding: 0; transition: all 0.3s ease; } .btn--icon-left i { padding-left: 10px; } .btn--icon-right i { padding-right: 10px; } .btn:focus { box-shadow: none; } .btn--box { display: inline-block; } .btn--block { display: block; } .btn--round { border-radius: 50%; } .btn--round-size-small { height: 45px; width: 45px; line-height: 45px; } .btn--radius { border-radius: 30px; } .btn--radius-tiny { border-radius: 3px; } .btn-transparent { background-color: transparent; } .btn--border-black { border: 1px solid #323232; } .btn--border-black-hover-green:hover { color: #fff; background: #89c74a; border-color: #89c74a; } .btn--border-gray { border: 1px solid #ebebeb; } .btn--border-gray-hover-green:hover { color: #fff; background: #89c74a; border-color: #89c74a; } .btn--border-green { color: #89c74a; border: 1px solid #89c74a; } .btn--border-green-hover-green:hover { color: #fff; background: #89c74a; border-color: #89c74a; } .btn--long { width: 240px; height: 42px; line-height: 42px; font-size: 16px; } @media (min-width: 992px) { .btn--long { width: 285px; } } .btn--large { padding: 15px 30px; } @media (min-width: 768px) { .btn--large { padding: 22px 45px; } } .btn--medium { padding: 8px 20px; } @media (min-width: 992px) { .btn--medium { padding: 15px 35px; } } .btn--small { padding: 14px 20px; } @media (min-width: 768px) { .btn--small { padding: 14px 20px; } } .btn--tiny { padding: 5px 15px; } .btn--gray { background: #ebebeb; } .btn--gray-hover-green { color: #fff; } .btn--gray-hover-green:hover { color: #fff; background: #89c74a; } .btn--black { background: #222; } .btn--black-hover-green { color: #fff; } .btn--black-hover-green:hover { color: #fff; background: #89c74a; } .btn--green { background: #89c74a; color: #fff; } .btn--green-hover-black { color: #fff; } .btn--green-hover-black:hover { color: #fff; background: #323232; } .btn.color-green { color: #89c74a; } .btn.color-green:hover { color: #89c74a; } button.btn--block { width: 100%; } button.close { font-weight: 300; font-size: 14px; width: 25px; height: 25px; line-height: 25px; text-align: center; border-radius: 50%; border: 1px solid #666; } .link--gray { color: #666; text-decoration: none !important; font-weight: 500; } .link--gray:hover { color: #89c74a; } .link--green { color: #79a206; text-decoration: none !important; font-weight: 500; } .link--green:hover { color: #79a206; } .link--icon-left { display: inline-flex; align-items: center; } .link--icon-left i { margin-right: 10px; } .link--icon-right { display: inline-flex; align-items: center; } .link--icon-right i { margin-left: 10px; } .nametag { display: flex; } .nametag span { font-weight: 700; margin-right: 15px; } .nametag__list li { display: inline-block; margin-right: 10px; } .nametag__list a { color: #888; text-decoration: none !important; transition: all 0.3s ease; } .nametag__list a:hover { color: #e81212; } .internal-link { color: #fff; margin-left: 30px; transition: all 0.3s ease; } .internal-link:hover { color: #f17b08; } /***************************** 06 - Component - Hero Slider *****************************/ .hero { position: relative; overflow: hidden; } .hero .hero-slider { position: relative; } .hero .hero-slider img { width: 100%; object-fit: cover; height: 300px; } @media (min-width: 768px) { .hero .hero-slider img { height: 390px; } } @media (min-width: 992px) { .hero .hero-slider img { height: 530px; } } @media (min-width: 1200px) { .hero .hero-slider img { height: 675px; } } @media (min-width: 1566px) { .hero .hero-slider img { height: 960px; } } .hero__content { position: absolute; top: 50%; left: 0; width: 100%; transform: translateY(-50%); padding-left: 0; padding-right: 0; } @media (min-width: 992px) { .hero__content { padding-left: 30px; padding-right: 30px; } } .hero__content .title__hero--tiny { margin-bottom: 25px; } .hero__content .title__hero--xlarge { margin-bottom: 10px; } .hero__content .title__hero--small { margin-bottom: 30px; } .hero .slick-active .hero__content--inner h6 { animation: animate-left 0.7s linear 0.1s backwards; } .hero .slick-active .hero__content--inner h1 { animation: animate-left 0.8s linear 0.15s backwards; } .hero .slick-active .hero__content--inner h4 { animation: animate-left 0.9s linear 0.2s backwards; } .hero .slick-active .hero__content--inner a { animation: animate-bottom 0.8s linear 0.25s backwards; } /***************************** 07 - Component - CMS *****************************/ .cms.m-t-100 { margin-top: 60px; } @media (min-width: 768px) { .cms.m-t-100 { margin-top: 80px; } } @media (min-width: 992px) { .cms.m-t-100 { margin-top: 100px; } } .cms__icon { font-size: 40px; margin-bottom: 13px; color: #666; } .cms__title { font-family: "Lora", serif; text-transform: capitalize; font-size: 18px; margin-bottom: 20px; } @media (min-width: 768px) { .cms__title { font-size: 16px; } } @media (min-width: 992px) { .cms__title { font-size: 22px; } } .cms .col-12 { margin-bottom: 40px; } .cms .col-12:last-child { margin-bottom: 0; } @media (min-width: 992px) { .cms .col-12 { margin-bottom: 0; } } /***************************** 08 - Component - Banner *****************************/ .banner.m-t-100 { margin-top: 60px; } @media (min-width: 768px) { .banner.m-t-100 { margin-top: 80px; } } @media (min-width: 992px) { .banner.m-t-100 { margin-top: 100px; } } .banner .col-12>.banner__box { margin-bottom: 30px; } @media (min-width: 768px) { .banner .col-12>.banner__box { margin-bottom: 0px; } } .banner .col-12:last-child>.banner__box { margin-bottom: 0; } .banner__box { max-width: 100%; overflow: hidden; } .banner__box--single { margin-left: auto; margin-right: auto; } .banner__link { display: block; } .banner__bg img { width: 100%; object-fit: cover; height: 280px; object-position: center; } @media (min-width: 576px) { .banner__bg img { height: 280px; } } @media (min-width: 768px) { .banner__bg img { height: 335px; } } @media (min-width: 992px) { .banner__bg img { height: 360px; } } @media (min-width: 1200px) { .banner__bg img { height: 380px; } } .banner__img { width: 100%; height: 180px; object-fit: cover; } @media (min-width: 576px) { .banner__img { height: auto; } } .banner__content { padding: 0 30px; } @media (min-width: 1200px) { .banner__content { padding: 0 60px; } } .banner__content--center { top: 50%; transform: translateY(-50%); } .banner__title--small { font-size: 19px; } @media (min-width: 768px) { .banner__title--small { font-size: 24px; } } .banner__title--large { font-size: 19px; line-height: 19px; } @media (min-width: 992px) { .banner__title--large { font-size: 27px; line-height: 27px; } } @media (min-width: 1200px) { .banner__title--large { font-size: 40px; line-height: 40px; } } @media (min-width: 1566px) { .banner__title--large { font-size: 40px; line-height: 40px; } } .banner__box--single-text-style-1 h6 { font-size: 16px; color: #89c74a; } .banner__box--single-text-style-2 h6 { font-size: 14px; color: #323232; } .banner__box--single-text-style-2 h1 { font-family: "Lora", serif; margin-bottom: 27px; font-size: 25px; line-height: 25px; } @media (min-width: 576px) { .banner__box--single-text-style-2 h1 { font-size: 25px; line-height: 25px; } } @media (min-width: 768px) { .banner__box--single-text-style-2 h1 { font-size: 42px; line-height: 42px; } } @media (min-width: 992px) { .banner__box--single-text-style-2 h1 { font-size: 50px; line-height: 50px; } } @media (min-width: 1200px) { .banner__box--single-text-style-2 h1 { font-size: 60px; line-height: 60px; } } /***************************** 09 - Component - Product *****************************/ .product.m-t-100 { margin-top: 57px; } @media (min-width: 768px) { .product.m-t-100 { margin-top: 80px; } } @media (min-width: 992px) { .product.m-t-100 { margin-top: 100px; } } .product__link { display: block; font-size: 14px; line-height: 18px; margin-bottom: 9px; } .product__link:hover { color: #89c74a; } .product__label { position: absolute; top: 10px; left: 10px; padding: 0 14px; font-size: 14px; color: #fff; border-radius: 30px; font-weight: 300; } .product__label--sale-dis { background: #333; } .product__label--sale-out { background: #79a206; } .product__counter-box { position: absolute; top: 50%; right: 7px; transform: translateY(-50%); text-align: center; transition: all 0.3s ease; opacity: 1; visibility: visible; } .product__items--text { display: block; font-size: 14px; } .product__review { font-size: 18px; } .product__review li { display: inline-block; margin-right: 4px; } .product__review li:last-child { margin-right: 0; } .product__review--fill { color: #FF9800; } .product__review--blank { color: #323232; } .product__price { font-weight: 600; color: #89c74a; } .product__price del { font-size: 12px; font-weight: 400; color: #666; } .product__price--large { font-size: 22px; } .product__price--large del { padding-left: 10px; font-size: 20px; font-weight: 400; color: #222; } .product__tag { display: inline-block; } .product__action--link { visibility: hidden; opacity: 0; transition: all 0.3s ease; width: 100%; bottom: 0px; } .product__action--link li { display: inline-block; margin-right: 6px; } .product__action--link li:last-child { margin-right: 0; } .product__action--link li a { line-height: 42px; width: 40px; text-align: center; font-size: 18px; display: inline-block; background: #89c74a; border-radius: 50%; height: 40px; color: #fff; } .product__action--link-list { transition: all 0.3s ease; width: 100%; bottom: 0px; } .product__action--link-list li { display: inline-block; margin-right: 20px; } .product__action--link-list li:last-child { margin-right: 0; } .product__action--link-list li:first-child a { text-align: center; font-size: 18px; width: 130px; height: 40px; line-height: 40px; display: inline-block; background: #222; border-radius: 30px; color: #fff; } @media (min-width: 576px) { .product__action--link-list li:first-child a { width: 200px; } } .product__action--link-list li a { line-height: 42px; width: 40px; text-align: center; font-size: 18px; display: inline-block; background: #89c74a; border-radius: 50%; height: 40px; color: #fff; } .product__img-box { overflow: hidden; } .product__catagory { overflow: hidden; border-left: 1px solid #ebebeb; border-top: 1px solid #ebebeb; } .product__catagory--single { display: flex; align-items: center; width: 100%; float: left; padding: 7px 10px; background: #fff; border-bottom: 1px solid #ebebeb; border-right: 1px solid #ebebeb; transition: 0.5s; position: relative; overflow: hidden; justify-content: space-between; min-height: 120px; } @media (min-width: 576px) { .product__catagory--single { width: 100%; } } @media (min-width: 768px) { .product__catagory--single { width: 50%; } } @media (min-width: 992px) { .product__catagory--single { width: 25%; } } @media (min-width: 1200px) { .product__catagory--single { width: 20%; } } @media (min-width: 1566px) { .product__catagory--single { width: 20%; } } .product__catagory--single:hover { z-index: 2; box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.15); } .product__catagory .product__link { font-weight: 500; margin-bottom: 10px; } .product__content--catagory { width: 60%; padding: 10px; } .product__img-box--catagory { width: 40%; } .product__box { border: 1px solid #E2E2E2; padding: 20px 0; padding-top: 0; } .product__box .product__link { margin-top: 8px; margin-bottom: 10px; } .product__box:hover .product__action--link { bottom: 10px; visibility: visible; opacity: 1; } .product__box:hover .product__counter-box { left: auto; right: -30px; visibility: hidden; opacity: 0; } .product__box--list { display: flex; flex-direction: column; } @media (min-width: 768px) { .product__box--list { flex-direction: row; } } .product__box--list .product__img-box { width: 100%; } @media (min-width: 768px) { .product__box--list .product__img-box { width: 33.333%; } } .product__box--list .product__content { width: 100%; padding: 25px; text-align: left; } @media (min-width: 768px) { .product__box--list .product__content { width: 66.666667%; } } .cdown { background: #89C74A; color: #fff; height: 50px; width: 50px; border-radius: 50%; font-size: 14px; font-weight: 500; margin-bottom: 5px; padding-top: 5px; } .cdown:last-child { margin-bottom: 0; } @media (min-width: 1200px) { .cdown { margin-bottom: 10px; } } .cdown p { font-size: 12px; font-weight: 300; } /***************************** 10 - Component - Testimonial *****************************/ .testimonial.m-t-100 { margin-top: 60px; } @media (min-width: 768px) { .testimonial.m-t-100 { margin-top: 80px; } } @media (min-width: 992px) { .testimonial.m-t-100 { margin-top: 100px; } } .testimonial__bg img { width: 100%; object-fit: cover; object-position: center; height: 505px; } @media (min-width: 576px) { .testimonial__bg img { height: 460px; } } @media (min-width: 768px) { .testimonial__bg img { height: 465px; } } @media (min-width: 992px) { .testimonial__bg img { height: 565px; } } @media (min-width: 1200px) { .testimonial__bg img { height: auto; } } .testimonial__desc { margin-bottom: 18px; font-size: 14px; line-height: 22px; font-style: italic; padding: 0 15px; } @media (min-width: 768px) { .testimonial__desc { font-size: 16px; line-height: 30px; padding: 0 95px; } } @media (min-width: 992px) { .testimonial__desc { font-size: 17px; line-height: 30px; padding: 0 145px; } } .testimonial__info--user { font-size: 14px; color: #0063d1; line-height: 25px; font-weight: 700; text-transform: capitalize; margin: 0 auto; } .testimonial__info--desig { font-size: 14px; line-height: 16px; text-transform: uppercase; font-weight: 500; } /***************************** 11 - Component - Testimonial *****************************/ .newsletter__bg img { width: 100%; object-fit: cover; object-position: center; height: 240px; } @media (min-width: 768px) { .newsletter__bg img { height: 255px; } } @media (min-width: 992px) { .newsletter__bg img { height: 360px; } } @media (min-width: 1200px) { .newsletter__bg img { height: auto; } } .newsletter__form-content label { top: 50%; transform: translateY(-50%); left: 0; color: #666; font-size: 26px; } .newsletter__form-content input { width: 100%; background: transparent; border-bottom: 1px solid; padding: 15px 83px 15px 30px; font-size: 13px; } @media (min-width: 768px) { .newsletter__form-content input { font-size: 16px; padding: 15px 115px 15px 45px; } } .newsletter__form-content button { top: 50%; transform: translateY(-50%); right: 0; background: transparent; font-size: 14px; font-weight: 500; color: #666; } .newsletter__form-content button:hover { color: #79a206; } /***************************** 12 - Component - Company Logo *****************************/ .company-logo.m-t-100 { margin-top: 57px; } @media (min-width: 768px) { .company-logo.m-t-100 { margin-top: 80px; } } @media (min-width: 992px) { .company-logo.m-t-100 { margin-top: 100px; } } .company-logo__area .slick-list { margin-left: -70px; } .company-logo__area .slick-slide { margin-left: 70px; } .company-logo__item { text-align: center; } .company-logo__link { display: block; } .company-logo__img { max-width: 100%; height: auto; transition: all 0.3s ease; opacity: 0.7; } .company-logo__img:hover { opacity: 1; } /***************************** 13 - Component - Modal *****************************/ .modal { z-index: 99999; background: rgba(34, 34, 34, 0.5); padding-right: 0 !important; } .modal-product-image--large { margin-bottom: 20px; } .modal-dialog { max-width: calc(100% - 20px) !important; margin: 0 auto !important; } @media (min-width: 768px) { .modal-dialog { max-width: 730px !important; } } @media (min-width: 992px) { .modal-dialog { max-width: 870px !important; } } @media (min-width: 1200px) { .modal-dialog { min-width: 825px !important; } } .modal-header { align-items: center; justify-content: space-between; padding: 15px; background: #546583; color: #fff; } @media (min-width: 992px) { .modal-header { padding: 0; } } .modal-header .close { margin: 0 !important; color: #fff; } .modal-title { text-align: center; margin: 0 auto; } .modal__border { border-left: none; } @media (min-width: 992px) { .modal__border { border-left: 1px solid #ddd; } } .modal__product-img { text-align: center; } .modal__product-title { margin-top: 25px; } @media (min-width: 768px) { .modal__product-title { margin-top: 0px; } } .modal__product-title, .modal__product-price { display: block; font-weight: 500; } .modal__product-info, .modal__product-shipping-info { font-weight: 500; } .modal__product-info li, .modal__product-shipping-info li { margin-bottom: 10px; } .modal__product-info li:last-child, .modal__product-shipping-info li:last-child { margin-bottom: 0; } .modal__product-info span, .modal__product-shipping-info span { font-weight: 300; padding-left: 5px; } .modal__product-cart-buttons { display: flex; flex-direction: column; } .modal__product-cart-buttons a { margin-bottom: 15px; } .modal__product-cart-buttons a:last-child { margin-bottom: 0; } @media (min-width: 768px) { .modal__product-cart-buttons { flex-direction: row; } .modal__product-cart-buttons a { margin-bottom: 0; margin-right: 30px; } .modal__product-cart-buttons a:last-child { margin-right: 0; } } /***************************** 14 - Component - Breadcrumb *****************************/ .page-breadcrumb { background: #ebebeb; text-align: center; padding: 75px 0 75px 0px; margin-bottom: 60px; } @media (min-width: 768px) { .page-breadcrumb { margin-bottom: 80px; } } @media (min-width: 992px) { .page-breadcrumb { margin-bottom: 100px; } } .page-breadcrumb__menu { font-size: 16px; color: #222; } .page-breadcrumb__nav { display: inline-block; margin-right: 10px; position: relative; color: #222; } .page-breadcrumb__nav::after { content: ""; padding-left: 10px; font-family: "Font Awesome 5 Free"; } .page-breadcrumb__nav:last-child::after { content: ""; } .page-breadcrumb__nav a { color: #222; text-decoration: none; } .page-breadcrumb__nav a:hover { color: #79a206; } .page-breadcrumb__nav.active { color: #222; } /***************************** 15 - Component - Shop Sorting *****************************/ .sort-box { display: flex; justify-content: space-between; align-items: center; font-size: 13px; flex-direction: column; border: 1px solid #ebebeb; padding: 15px 30px; } @media (min-width: 768px) { .sort-box { flex-direction: row; align-items: center; } } .sort-box>div { margin-bottom: 20px; } .sort-box>div:last-child { margin-bottom: 0; } @media (min-width: 768px) { .sort-box>div { margin-bottom: 0; } } .sort-box__tab-list li { margin-right: 15px; display: inline-block; } .sort-box__tab-list li:last-child { margin-right: 0; } .sort-nav-link { display: block; font-size: 18px; color: #ebebeb; background: transparent; border-radius: 50%; transition: all 0.3s ease; } .sort-nav-link:hover, .sort-nav-link.active { color: #222; } .sort-box__option { padding-left: 10px; } .select-sort { padding: 5px 30px 5px 15px; border-radius: 3px; -webkit-appearance: none; -moz-appearance: none; appearance: none; } .select-sort option { text-align: right; border: 1px solid #7e7e7e; padding: 5px 15px; margin: 5px 0; } .select-sort__arrow { position: relative; margin-bottom: 0; } .select-sort__arrow::after { content: ""; position: absolute; font-family: "Font Awesome 5 Free"; font-weight: 600; top: 50%; transform: translateY(-50%); right: 15px; } .shop-grid .product__box--default { transform: scale(0.3); transition: all 0.3s ease; } .shop-grid.active .product__box--default { transform: scale(1); } .shop-list>.product__box--list { transform: translateX(100px); transition: all 0.5s ease; } .shop-list.active>.product__box--list { transform: translateX(0); } .product__box--list .product__img { margin: 0 auto; text-align: center; display: block; } /***************************** 16 - Component - Pagination *****************************/ .page-pagination { display: flex; align-items: center; justify-content: center; flex-direction: column; margin-top: 30px; border: 1px solid #ebebeb; padding: 10px 30px; } @media (min-width: 768px) { .page-pagination { margin-top: 80px; flex-direction: row; align-items: center; } } @media (min-width: 992px) { .page-pagination { margin-top: 100px; } } .page-pagination__list { margin-top: 20px; } @media (min-width: 768px) { .page-pagination__list { margin-top: 0; } } .page-pagination__item { display: inline-block; margin-right: 5px; } .page-pagination__item:last-child { margin-right: 0; } .page-pagination__link { display: block; text-align: center; font-size: 16px; padding: 5px 12px; background: #ebebeb; color: #666; border-radius: 3px; } .page-pagination__link:hover, .page-pagination__link.active { background: #79a206; color: #fff; } /***************************** 17 - Component - Sidebar Widget *****************************/ .sidebar { margin-top: 60px; } @media (min-width: 768px) { .sidebar { margin-top: 80px; } } @media (min-width: 992px) { .sidebar { margin-top: 0px; } } .sidebar__widget { margin-bottom: 40px; } .sidebar__widget:last-child { margin-bottom: 0; } .sidebar__box { position: relative; } .sidebar__box::before { position: absolute; content: ""; width: 100%; height: 1px; background-color: #ebebeb; bottom: -20px; left: 0; } .sidebar__title { font-size: 16px; font-weight: 500; margin-bottom: 40px; text-transform: uppercase; } .sidebar__menu>li { margin-bottom: 10px; } .sidebar__menu>li:last-child { margin-bottom: 0; } .sidebar__menu>li a:hover { color: #89c74a; } .sidebar__menu-collapse-list:last-child .accordion__title { margin-bottom: 0; } .sidebar__size li, .sidebar__tag li { display: inline-block; margin-right: 2.5px; } .sidebar__size li:last-child, .sidebar__tag li:last-child { margin-right: 0; } .sidebar__menu-filter-list { margin-bottom: 10px; } .sidebar__menu-filter-list:last-child { margin-bottom: 0; } .sidebar__banner img { height: auto !important; } .accordion__title { display: flex; font-weight: 700; align-items: center; justify-content: space-between; margin-bottom: 20px; } .accordion__category-list { border-top: 1px solid #ebebeb; } .accordion__category-list li { padding-left: 5px; padding: 5px; display: block; } .accordion a { text-decoration: none !important; color: #222; } .accordion a:hover { color: #89c74a; } .sidebar__post-blog .sidebar__post-img { max-width: 30%; overflow: hidden; } .sidebar__post-blog .sidebar__post-content { margin-left: 10px; } .sidebar__post-blog .sidebar__post-content a { font-size: 14px; word-wrap: break-word; font-weight: 500; } .sidebar__post-blog .sidebar__post-content span { font-size: 13px; } .sidebar__post-product .sidebar__product-img { max-width: 30%; overflow: hidden; } .sidebar__post-product .product__content { margin-left: 10px; } .sidebar__post-product .product__content a { font-size: 14px; word-wrap: break-word; font-weight: 500; } /***************************** 18 - Component - Gallery *****************************/ .product-gallery-box { padding: 0 20px; } .product-gallery-box__vertical { display: flex; align-items: center; } .product-gallery-box__tab-left { flex-direction: row-reverse; } .product-gallery-box .swiper-slide { height: 100% !important; } .product-gallery-box--gallery { float: left; } .product-gallery-box--gallery img { width: 50%; } .gallery--right { width: 80%; } .gallery--left { width: 20%; } .product-image--large { border: 1px solid #ebebeb !important; } .product-image--large .img-fluid { max-width: 100% !important; } .product-image--gallery .img-responsive { margin: 10px; } .modal-product-image--thumb-horizontal, .product-image--thumb-horizontal { margin-top: 20px; } .modal-product-image--thumb-horizontal .slick-list, .product-image--thumb-horizontal .slick-list { margin-right: -10px; } .modal-product-image--thumb-horizontal .slick-slide, .product-image--thumb-horizontal .slick-slide { margin-right: 10px; } .modal-product-image--thumb-vertical .slick-list, .product-image--thumb-vertical .slick-list { margin-bottom: -10px; } .modal-product-image--thumb-vertical .slick-slide, .product-image--thumb-vertical .slick-slide { margin-bottom: 10px; } .modal-product-image--thumb img, .product-image--thumb img { cursor: pointer; border: 1px solid rgba(84, 101, 131, 0.2) !important; transition: all 0.3s ease; } .modal-product-image--thumb img:hover, .product-image--thumb img:hover { border-color: #89c74a !important; } .text-reference { font-size: 14px; color: #666; } .product__stock { font-weight: 700; color: #7e7e7e; } .product__stock i { color: #79a206; } .product-var { border-top: 1px solid #ebebeb; border-bottom: 1px solid #ebebeb; } .product-var__item { margin-bottom: 30px; } .product-var__text { display: block; font-weight: 500; } .payment-icon li { display: inline-block; margin-right: 5px; margin-bottom: 10px; } .payment-icon li:last-child { margin-right: 0; } @media (min-width: 576px) { .payment-icon li { margin-bottom: 0; } } .product-social li { display: inline-block; margin-right: 10px; } .product-social li:last-child { margin-right: 0; } .product-social a { color: #323232; width: 40px; height: 40px; display: block; border: 1px solid #ebebeb; text-align: center; line-height: 40px; transition: all 0.3s ease; border-radius: 50%; } .product-social a:hover { color: #fff; background: #79a206; border: 1px solid transparent; } /***************************** 19 - Component - Tabstyle *****************************/ .tablist li { position: relative; } .tablist--style-black .nav-link { color: #888; padding: 0 0 26px 0; margin-bottom: 20px; position: relative; } @media (min-width: 768px) { .tablist--style-black .nav-link { margin-bottom: 0px; } } .tablist--style-black .nav-link::after { position: absolute; content: ""; bottom: 10px; left: 50%; right: 50%; width: 0%; height: 2px; background: #79a206; transition: all 0.3s ease; } @media (min-width: 768px) { .tablist--style-black .nav-link::after { bottom: 0px; } } .tablist--style-black .nav-link.active, .tablist--style-black .nav-link:hover { color: #000; } .tablist--style-black .nav-link.active::after, .tablist--style-black .nav-link:hover::after { left: 0%; right: 0%; width: 100%; } .tablist--style-blue .nav-link { color: #888; } .tablist--style-blue .nav-link.active, .tablist--style-blue .nav-link:hover { color: #89c74a; } .tablist--style-title li>.nav-link { font-size: 20px; line-height: 22px; font-weight: 500; text-align: center; } .tablist--style-seperator li::after { position: absolute; content: ""; width: 1px; height: 15px; background: #7e7e7e; top: 50%; transform: translateY(-50%); left: calc(100% - 35px); } .tablist--style-seperator li:last-child::after { display: none; } .tablist--style-gap li:last-child>.nav-link { margin-right: 0; } .tablist--style-gap-20 li>.nav-link { margin-right: 20px; } .tablist--style-gap-30 li>.nav-link { margin-right: 30px; } .tablist--style-gap-70 li>.nav-link { margin-right: 70px; } .tab-content .tab-pane { display: block; height: 0; max-width: 100%; visibility: hidden; overflow: hidden; opacity: 0; } .tab-content .tab-pane.active { height: auto; visibility: visible; opacity: 1; overflow: visible; } .tab-animate-zoom .tab-pane .product__box { transform: translateY(-100px) scale(0.5); transition: all 0.5s ease; } .tab-animate-zoom .tab-pane.active .product__box { transform: translateY(0) scale(1); } /***************************** 20 - Component - Comment *****************************/ .comment { padding: 0; } @media (min-width: 768px) { .comment { padding: 0px 20px 20px 20px; } } .comment__list { border-bottom: 1px solid #ebebeb; padding-top: 20px; padding-bottom: 15px; } .comment__list:last-child { border-bottom: none; } .comment__list:first-child { padding-top: 0; } .comment__list>.comment__reply { margin-left: 0; } @media (min-width: 768px) { .comment__list>.comment__reply { margin-left: 100px; } } .comment__reply li { border-top: 1px solid #ebebeb; padding-top: 20px; margin-top: 15px; } .comment__wrapper { display: flex; align-items: flex-start; flex-direction: column; } @media (min-width: 576px) { .comment__wrapper { flex-direction: row; } } .comment__img { margin-right: 30px; margin-bottom: 20px; border-radius: 5px; } .comment__img img { width: 78px; height: 78px; border-radius: 5px; } .comment__name { font-weight: 600; margin-right: 10px; } .comment__content-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; flex-wrap: wrap; } /***************************** 21 - Component - Form *****************************/ .form-box__single-group { display: flex; flex-direction: column; margin-top: 25px; } .form-box__single-group label { margin-bottom: 15px; font-size: 14px; font-weight: 600; text-align: left; } .form-box__single-group input, .form-box__single-group textarea, .form-box__single-group select { border: 1px solid #ebebeb; border-radius: 3px; padding: 10px 20px; width: 100%; outline: none; font-size: 14px; } select { outline: none; border: 1px solid #7e7e7e; padding: 5px 15px; } label>span { display: inline-block; padding-left: 30px; font-weight: 400; } .product-color-select { position: relative; -webkit-appearance: none; -moz-appearance: none; appearance: none; } .product-color-select::after { position: absolute; content: ""; width: 20px; height: 20px; } .product-color-select:checked::after { content: "" !important; color: #fff; } .product-color-select[value=color-red]::after { background: #ed3c32 !important; } .product-color-select[value=color-green]::after { background: #79a206 !important; } .product-color-select[value=color-blue]::after { background: #89c74a !important; } input[type=checkbox] { -webkit-appearance: none; -moz-appearance: none; appearance: none; position: relative; } input[type=checkbox]::after { position: absolute; content: ""; width: 20px; height: 20px; border: 1px solid #ebebeb; top: -15px; line-height: 20px; background: #fff; text-align: center; transition: all 0.3s ease; } input[type=checkbox]:checked::after { content: ""; font-family: "Font Awesome 5 Light"; color: #fff; background: #79a206; } input[type=radio].shipping-select::after { position: absolute; content: ""; font-family: "Font Awesome 5 Free"; background: #fff; text-align: center; transition: all 0.3s ease; top: -20px; color: #79a206; font-size: 20px; } input[type=radio].shipping-select:checked::after { content: ""; } input[type=radio] { -webkit-appearance: none; -moz-appearance: none; appearance: none; position: relative; } input[type=radio]::after { position: absolute; content: ""; font-family: "Font Awesome 5 Free"; background: #fff; text-align: center; transition: all 0.3s ease; top: -17px; color: #fff; } input[type=radio]:checked::after { content: ""; } .from-box__buttons { flex-direction: column; align-items: flex-start !important; } @media (min-width: 576px) { .from-box__buttons { flex-direction: row; } } .form-box-right { margin-top: 25px; } @media (min-width: 576px) { .form-box-right { margin-top: 0; } } .password__toggle { display: flex; align-items: center; } .password__toggle--btn { margin-left: -25px; } input.round-input { border-radius: 30px; } .round-input-btn { right: 0; width: 45px; height: 100%; border-radius: 0px 25px 25px 0px; } .round-input-btn:hover { color: #79a206; } /***************************** 22 - Page - Shop *****************************/ .shop__list-link { display: flex; flex-direction: row; justify-content: space-around; align-items: center; flex-wrap: wrap; } @media (min-width: 768px) { .shop__list-link { flex-direction: column; align-items: flex-start; flex-wrap: nowrap; } } .shop__list-link li a { display: block; } .shop-grid .product__default--single { margin-top: 25px; } .shop-list .product__box--list { margin-top: 25px; } .border-right.pos-absolute { border-right: none !important; } @media (min-width: 768px) { .border-right.pos-absolute { border-right: 1px solid #dee2e6 !important; height: 100%; right: 0; } } /***************************** 23 - Page - Product Single *****************************/ .product-details-tab-box { border: 1px solid #ebebeb; padding: 30px 20px; } @media (min-width: 768px) { .product-details-tab-box { padding: 30px 40px; } } .product-modal-group { font-size: 12px; } .product-modal-group i { font-size: 18px; } .product-modal-group li { display: inline-block; margin-right: 15px; margin-bottom: 10px; } .product-modal-group li:last-child { margin-right: 0; } @media (min-width: 576px) { .product-modal-group li { margin-bottom: 0; } } .review-box { display: flex; align-items: center; flex-wrap: wrap; } .review-box>* { margin-right: 30px; } .review-box>*:last-child { margin-right: 0; } .product-dis__img { display: inline-block; border: 1px solid #7e7e7e; } .product-dis__title { font-weight: 500; } .product-dis__text { font-weight: 300; } /***************************** 24 - Page - Blog *****************************/ .blog.m-t-100 { margin-top: 57px; } @media (min-width: 768px) { .blog.m-t-100 { margin-top: 80px; } } @media (min-width: 992px) { .blog.m-t-100 { margin-top: 100px; } } .blog__title { font-size: 28px; font-weight: 500; color: #323232; transition: all 0.3s ease; } .blog__title:hover { color: #79a206; } .blog-feed__img-box { overflow: hidden; position: relative; } .blog-feed__img--link { display: block; transition: all 0.3s ease; transform: scale(1); } .blog-feed__img--link:hover { transform: scale(1.03); } .blog-feed__img { width: 100%; height: auto; } .blog-feed__content { background: #fff; } .blog-feed__link { font-size: 18px; line-height: 20px; color: #323232; text-transform: capitalize; display: block; margin-top: 30px; margin-bottom: 5px; text-decoration: none !important; transition: all 0.3s ease; } .blog-feed__link:hover { color: #79a206; } .blog-feed__post-meta { font-size: 13px; } .blog-feed__post-meta--link { color: #79a206; } .blog-feed__post-meta--link:hover { color: #79a206; } .blog-feed__excerpt { font-size: 14px; margin-top: 20px; } .blog.gray-bg .blog-feed__content { background: #fff; padding: 25px 20px 30px 20px; } .blog__img { overflow: hidden; } .blog__img a { display: block; } .blog__img img { object-fit: cover; width: 100%; height: 300px; } .blog__img iframe { width: 100%; height: 300px; } .blog__type-grid { margin-bottom: 40px; } .blog__type-list { margin-bottom: 30px; } @media (min-width: 768px) { .blog__type-list { margin-bottom: 40px; } } .blog__type-list .blog__img { margin-bottom: 35px; } @media (min-width: 768px) { .blog__type-list .blog__img { margin-bottom: 0px; } } .blog__type-single .img-responsive { margin-bottom: 35px; } .blog~.page-pagination { margin-top: 20px; } @media (min-width: 768px) { .blog~.page-pagination { margin-top: 40px; } } @media (min-width: 992px) { .blog~.page-pagination { margin-top: 60px; } } .blog--comment .comment { padding: 30px; } .popup-icon i { color: #fff; width: 50px; height: 50px; line-height: 50px; background: #79a206; text-align: center; border-radius: 50%; } .popup-icon { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.45); display: flex !important; align-items: center; justify-content: center; text-decoration: none !important; } .blog__tag-share { display: flex; align-items: flex-start; justify-content: space-between; flex-direction: column; padding: 10px 15px; } @media (min-width: 768px) { .blog__tag-share { flex-direction: row; align-items: center; } } /***************************** 25 - Page - Cart *****************************/ .cart-table-button { display: flex; justify-content: flex-start; flex-direction: column; } @media (min-width: 768px) { .cart-table-button { flex-direction: row; justify-content: space-between; } } .total-shipping { padding: 15px 0; border-top: 1px solid #7e7e7e; border-bottom: 1px solid #7e7e7e; margin-top: 20px; } .total-cost { display: flex; justify-content: space-between; font-weight: 300; } .total-cost span { font-weight: 500; } .shipping-cost li { display: flex; justify-content: space-between; margin-bottom: 15px; } .grand-total { color: #222; display: flex; justify-content: space-between; } /***************************** 26 - Page - Checkout *****************************/ .your-order-section { margin-top: 40px; } @media (min-width: 768px) { .your-order-section { margin-top: 55px; } } @media (min-width: 992px) { .your-order-section { margin-top: 0px; } } .your-order-box { padding: 40px; } .your-order-middle { color: #666; padding: 20px 0; border-top: 1px solid #7e7e7e; border-bottom: 1px solid #7e7e7e; margin: 20px 0; } .your-order-total { padding: 20px 0; border-top: 1px solid #7e7e7e; border-bottom: 1px solid #7e7e7e; margin: 20px 0; } .payment-accordion h4 a { color: #222; font-size: 16px; margin: 0; font-weight: 400; text-decoration: none; } .panel-body { color: #666; padding-left: 15px; font-size: 14px; } .open-create-account, .open-shipping-account { display: none; } /***************************** 27 - Page - 404 *****************************/ .inner-input-icon input, .page-not-found input { padding-right: 60px; } .error-section-top h1 { font-size: 100px; color: #79a206; font-weight: 700; } .error-section-top h4 { font-size: 32px; font-weight: 700; } /***************************** 28 - Page - My Account *****************************/ .account-wrapper { border: 2px solid #e5e5e5; padding: 40px 30px; } .my-account-menu .account-menu-list li a { display: inline-block; width: 100%; height: 50px; line-height: 50px; padding: 0 20px; font-size: 14px; color: #333; border: 1px solid #e5e5e5; margin-top: -1px; transition: all 0.3s linear; text-decoration: none; } .my-account-menu .account-menu-list li a:hover, .my-account-menu .account-menu-list li a.active { background-color: #333; color: #fff; border-color: #333; } .my-account-dashboard .welcome-dashboard p a:hover { color: #e52e06; } .my-account-tab .account-title { font-size: 24px; font-weight: 700; color: #333; } .my-account-details .account-details .title { font-size: 20px; font-weight: 700; color: #333; } .account-table .table thead tr th { border: 1px solid #e5e5e5; font-size: 16px; font-weight: 500; color: #333; padding: 8px 15px; } .account-table .table tbody tr td { font-size: 14px; color: #333; font-weight: 400; vertical-align: middle; border: 1px solid #e5e5e5; } .account-table .table thead tr th.name { min-width: 140px; } .account-table .table thead tr th.date { min-width: 130px; } .single-form select, .single-form textarea, .single-form input { width: 100%; font-size: 14px; height: 40px; color: #333; border: 1px solid #e5e5e5; padding: 0 15px; margin-top: 12px; outline: none; } /***************************** 29 - Page - Login *****************************/ .login-register-tab-list { display: flex; justify-content: center; margin-bottom: 40px; } .login-register-tab-list h4 { font-size: 25px; font-weight: 500; margin: 0 20px; text-transform: capitalize; transition: all 0.3s ease 0s; color: #222; } .login-register-tab-list .active h4 { color: #89c74a; } .login-register-tab-list a { position: relative; text-decoration: none !important; } .login-register-tab-list a::before { background-color: #333; bottom: 5px; content: ""; height: 18px; margin: 0 auto; position: absolute; right: -2px; transition: all 0.4s ease 0s; width: 1px; } .login-register-tab-list a:last-child::before { display: none; } .login-form-container { padding: 15px; text-align: left; } /***************************** 30 - Page - Contact *****************************/ #map { width: 100%; border: none; height: 500px; } .contact-info-wrap, .contact-form { padding: 25px 20px; } @media (min-width: 576px) { .contact-info-wrap, .contact-form { padding: 25px 30px; } } @media (min-width: 768px) { .contact-info-wrap, .contact-form { padding: 30px 40px; } } .single-contact-info { display: flex; align-items: center; margin-bottom: 20px; } .contact-icon i { margin-right: 20px; width: 35px; height: 35px; border: 1px solid #ddd; text-align: center; line-height: 35px; border-radius: 50%; } .contact-info-dec a, .contact-info-dec span { display: block; color: #222; text-decoration: none !important; } .social-link li { display: inline-block; margin-right: 15px; } .social-link a { color: #222; font-size: 22px; } /***************************** 32 - Page - FAQ *****************************/ .accordian { width: 100%; } .accordian-item { margin-bottom: 20px; transition: all 0.3s ease; } .accordian-item:last-child { margin-bottom: 0; } .accordian-item-header { padding: 15px 45px 15px 10px; display: flex; align-items: center; position: relative; cursor: pointer; background: #eef0f1; color: #222; } .accordian-item-header.active { background: #79a206; color: #fff; } .accordian-item-header.active::after { content: "−"; } .accordian-item-header h4 { margin-bottom: 0; font-size: 16px; font-weight: 400; } .accordian-item-header::after { content: "+"; font-size: 2rem; position: absolute; right: 1rem; } .accordian-item-body { max-height: 0; overflow: hidden; transition: max-height 0.2s ease-out; } .accordian-item-body-content { padding: 1rem; line-height: 1.5; border: 1px solid #ebebeb; } /***************************** 32 - Page - Contact *****************************/ .about-top .about-content { margin-top: 40px; } @media (min-width: 768px) { .about-top .about-content { margin-top: 0; } } .about-top .about-content h4 { font-family: "Lora", serif; } .skill-progressbar { margin-bottom: 35px; } .skill-progressbar:last-child { margin-bottom: 0; } .team-single { background: #fff; margin: 0 auto; text-align: center; padding: 20px 30px 45px 30px; } .team-img img { margin: 0 auto; } .team-social { width: 100%; background: #fff; bottom: -22px; transition: all 0.3s ease; opacity: 0; visibility: hidden; } .team-social li { display: inline-block; margin-right: 10px; } .team-social li:last-child { margin-right: 0; } .team-social a { color: #222; transition: all 0.3s ease; } .team-social a:hover { color: #e81212; } .team-single:hover .team-social { bottom: 0px; opacity: 1; visibility: visible; } /***************************** 33 - Layout - Header *****************************/ .header__top { background: #89c74a; color: #fff; padding: 10px 0; } .header__logo, .header__mobile-logo { width: 155px; overflow: hidden; } .header__logo-link, .header__mobile-logo-link { display: block; } .header__logo-img, .header__mobile-logo-img { width: 100%; height: auto; } .user-set-role li { display: inline-block; margin-right: 40px; } .user-set-role li:last-child { margin-right: 0; } .user-set-role li a { color: #fff; } .user-set-role li a i { padding-left: 10px; font-size: 10px; } .expand-dropdown-menu { position: absolute; z-index: 999; min-width: 150px; overflow: hidden; padding: 0 20px; background: #fff; border-bottom: 2px solid #89c74a; box-shadow: 0px 2px 13.95px 1.05px rgba(0, 0, 0, 0.05); } .expand-dropdown-menu li { display: block; border-bottom: 1px solid #e5e5e5; transition: all 0.3s ease; margin-right: 0; } .expand-dropdown-menu a { display: block; padding: 10px 0; color: #323232 !important; line-height: 25px; font-size: 13px; text-decoration: none; } .expand-dropdown-menu a img { margin-right: 5px; } .expand-dropdown-menu a:hover { color: #89c74a !important; } .expand-dropdown-menu.show { top: 12px !important; } .menu-label { position: absolute; top: 0; left: 0px; text-align: center; display: block; color: #fff; width: 45px; height: 17px; padding: 1.5px 10px; border-radius: 30px; font-size: 10px; line-height: 15px; } .menu-label::after { position: absolute; content: ""; width: 5px; height: 5px; transform: rotate(45deg); bottom: -2.5px; left: 12px; } .menu-label--red { background: #e81212; } .menu-label--red::after { background: #e81212; } .menu-label--blue { background: #43b5f4; } .menu-label--blue::after { background: #43b5f4; } .header__user-action-icon { font-size: 22px; color: #666; } .header__user-action-icon li { position: relative; display: inline-block; margin-right: 30px; } .header__user-action-icon li:last-child { margin-right: 0; } .header__user-action-icon li a { color: #666; } .header__user-action-icon li span { position: absolute; display: block; width: 20px; height: 20px; line-height: 20px; text-align: center; font-size: 12px; background: #89c74a; color: #fff; border-radius: 50%; bottom: -2.5px; left: 15px; } .sticky-header { width: 100%; z-index: 9999; background: #fff; } .sticky-header.is-sticky { position: fixed; width: 100%; top: 0; left: 0; box-shadow: 0 8px 6px -6px rgba(0, 0, 0, 0.4); animation-duration: 1s; animation-fill-mode: both; animation-name: slideInDown; animation-duration: 0.5s; margin-top: 0; z-index: 99999; transition: all 0.5s; background: rgba(255, 255, 255, 0.9); } .header__nav { display: flex; margin: 0; font-size: 13px; } .header__nav i { font-size: 10px; } .header__nav-item { padding-right: 20px; display: inline-block; } @media (min-width: 1566px) { .header__nav-item { padding-right: 30px; } } .header__nav-item:last-child { padding-right: 0; } .header__nav-link { display: block; height: 60px; line-height: 60px; text-decoration: none !important; text-transform: uppercase; font-weight: 600; display: flex; align-items: center; position: relative; color: #323232; } .header__nav-link i { margin-left: 5px; } .header__nav-link::after { position: absolute; content: ""; height: 2px; width: 0%; bottom: 15px; left: auto; right: 0; transition: all 0.3s ease; } .header__nav-item:hover .header__nav-link { color: #89c74a; } .header__nav-item:hover .header__nav-link::after { width: 100%; left: 0; right: auto; background-color: #89c74a; } .dropdown__menu, .dropdown__submenu { top: 100%; left: 0; width: 255px; background: #fff; z-index: 999; visibility: hidden; opacity: 0; border-bottom: 2px solid #89c74a; transform-origin: 0% 0%; transform-style: preserve-3d; transform: rotateX(-90deg); transition: all 0s linear; padding: 10px 0; text-transform: uppercase; font-size: 14px; box-shadow: -2px 2px 81px -27px rgba(0, 0, 0, 0.3); } .dropdown__submenu { top: 0; left: -100%; } @media (min-width: 1566px) { .dropdown__submenu { left: 100%; } } .dropdown__list, .dropdown__submenu-list { padding-left: 30px; padding-right: 30px; padding-top: 17px; display: block; position: relative; } .dropdown__list .menu-label, .dropdown__submenu-list .menu-label { left: 30px; } .dropdown__link, .dropdown__submenu-link { text-decoration: none !important; display: inline-block; width: 100%; color: #323232; transition: all 0.3s ease; position: relative; text-transform: capitalize; } .dropdown__link:hover, .dropdown__submenu-link:hover { color: #89c74a; transform: translateX(5px); } .mega-menu { top: 100%; left: 50%; margin: 0 auto; width: 850px; background: #fff; z-index: 999; visibility: hidden; opacity: 0; padding: 30px; text-transform: uppercase; transform-origin: 0% 0%; transform-style: preserve-3d; transform: translateX(-45%) rotateX(-90deg); transition: all 0s linear; border-bottom: 2px solid #89c74a; box-shadow: -2px 2px 81px -27px rgba(0, 0, 0, 0.3); } @media (min-width: 992px) { .mega-menu { transform: translateX(-35%) rotateX(-90deg); left: 0; right: 0; } } @media (min-width: 1566px) { .mega-menu { transform: translateX(0%) rotateX(-90deg); left: 0; right: 0; } } .mega-menu__box { display: flex; justify-content: space-between; } .mega-menu__item-box { margin-right: 20px; } .mega-menu__item-box:last-child { margin-right: 0; } .mega-menu__title { display: block; font-weight: 600; } .mega-menu__item { margin-top: 5px; } .mega-menu__item a { color: #323232; font-size: 14px; } .mega-menu__item p { color: #323232; font-size: 12px; line-height: 18px; } .mega-menu__list { padding-bottom: 0px; padding-top: 17px; } .mega-menu__list:last-child { margin-bottom: 0; } .mega-menu__link { text-decoration: none !important; display: inline-block; width: 100%; color: #323232; transition: all 0.3s ease; position: relative; text-transform: capitalize; } .mega-menu__link:hover { color: #89c74a; transform: translateX(5px); } .mega-menu__banner { overflow: hidden; width: 100%; } .mega-menu__banner:hover .mega-menu__banner-img { transform: scale(1.1); } .mega-menu__banner-link { display: block; } .mega-menu__banner-img { transform: scale(1); transition: all 0.5s ease; } .mega-menu__banner-img--vertical { width: auto; height: 290px; } .mega-menu__banner-img--horaizontal { width: 100%; height: auto; } .header__nav-item:hover .dropdown__menu, .dropdown__list:hover .dropdown__submenu { visibility: visible; opacity: 1; transform: rotateX(0deg); transition: all 0.3s linear; } .header__nav-item:hover .mega-menu { visibility: visible; opacity: 1; transition: all 0.3s linear; transform: translateX(-45%) rotateX(0deg); } @media (min-width: 992px) { .header__nav-item:hover .mega-menu { transform: translateX(-35%) rotateX(0deg); } } @media (min-width: 1566px) { .header__nav-item:hover .mega-menu { transform: translateX(0%) rotateX(0deg); } } .header-search__content input { width: 100%; border: 1px solid #ebebeb; padding: 10px 60px 10px 20px; } .header-search__content button { right: 0; top: 50%; transform: translateY(-50%); width: 45px; height: 45px; background: transparent; } .header-search__content button:hover { color: #89c74a; } .popup-expand-menu-button i { color: #fff; font-size: 40px; } .popup-expand-menu-button i:hover { color: #f17b08; } .popup-expand-menu { display: none; border-top: 1px solid #ebebeb; border-bottom: 1px solid #ebebeb; } /***************************** 32 - Layout - Mobile Menu *****************************/ .offside { overflow-y: hidden; } .offside-button { border: none; background: transparent; font-size: 32px; outline: none !important; } .offcanvas-mobile-menu { background: #fff; } .offcanvas-mobile-menu .user-set-role { font-size: 12px; } .offcanvas-mobile-menu .user-set-role li { display: block; margin-right: 20px; } .offcanvas-mobile-menu .user-set-role li:last-child { margin-right: 0; } .offcanvas-mobile-menu .user-set-role li a { display: block; color: #222; } .offcanvas-mobile-menu .user-set-role li a i { padding-left: 10px; font-size: 10px; } .offcanvas { padding: 40px 20px; } .offcanvas--open { border: none; background: transparent; font-size: 32px; outline: none !important; } .offcanvas-menu li { position: relative; padding: 5px 5px; } .offcanvas-menu>ul>li { border-bottom: 1px solid transparent; } .offcanvas-menu>ul>li:last-child { border-bottom: none; } .offcanvas-menu li a { display: block; color: #222; text-decoration: none; } .offcanvas-menu li a:hover { color: #89c74a; } .offcanvas-menu li .sub-menu { display: none; } .offcanvas__menu-expand::after { content: ""; position: absolute; font-family: "Font Awesome 5 Free"; right: 0; transition: all 0.3s ease; color: #222; } .offcanvas-menu .active>.offcanvas__menu-expand:last-child, .sub-menu>.active .offcanvas__menu-expand:last-child { border-bottom: none; } .offcanvas-menu .active>.offcanvas__menu-expand::after, .sub-menu>.active .offcanvas__menu-expand::after { color: #89c74a; content: ""; } .offcanvas-shop-link { display: flex; justify-content: center; } .offcanvas-shop-link a { color: #222; text-decoration: none; transition: all 0.3s ease; text-align: center; margin-right: 15px; } .offcanvas-shop-link a:last-child { margin-right: 0; } .offcanvas-shop-link a:hover { color: #89c74a; } .offcanvas__address { text-align: left; } @media (min-width: 992px) { .offcanvas__address { text-align: center; } } .offcanvas__address-item { margin-bottom: 6px; color: #666 !important; } .offcanvas__address-item:last-child { margin-bottom: 0px; } .offcanvas__address-item span { color: #89c74a; } .offcanvas__address-item a { color: #666; } .offcanvas__address-item a:hover { color: #89c74a; } .offcanvas .offcanvas__social-nav { display: flex; justify-content: center; margin-top: 15px; } .offcanvas .offcanvas__social-list { margin-right: 15px; } .offcanvas .offcanvas__social-list:last-child { margin-right: 0; } .offcanvas .offcanvas__social-link { display: inline-block; width: 35px; height: 35px; border-radius: 50%; line-height: 35px; text-align: center; transition: all 0.3s ease; color: #222; background: #ebebeb; } .offcanvas .offcanvas__social-link:hover { color: #89c74a; } /***************************** 35 - Layout - Vertical Menu *****************************/ .header-menu-vertical .menu-title { color: #fff; font-size: 15px; font-weight: 500; text-transform: uppercase; cursor: pointer; margin: 0; background: #89c74a; padding: 15px 20px; display: block; } .header-menu-vertical .menu-content { width: 100%; background: #fff; border: 1px solid #eaeaea; top: 100%; left: 0; display: none; z-index: 999; } .header-menu-vertical .menu-content li { display: block; position: relative; } .header-menu-vertical .menu-content li:hover .sub-menu { opacity: 1; visibility: visible; } .header-menu-vertical .menu-content li a { position: relative; display: block; overflow: hidden; line-height: 24px; text-transform: capitalize; word-wrap: break-word; background: #fff; color: #47494a; padding: 7px 20px; font-size: 14px; font-weight: 400; transition: all 0.3s linear; text-decoration: none; display: flex; align-items: center; justify-content: space-between; } .header-menu-vertical .menu-content li a:hover { color: #89c74a; } .header-menu-vertical .menu-content li.expand a i { padding-right: 15px; font-weight: 700; } .header-menu-vertical .menu-content li .sub-menu { position: absolute; z-index: 9; text-align: left; top: 0; left: 100%; background: #fff; padding: 15px 10px 15px 10px; display: inline-block; opacity: 0; visibility: hidden; transition: all 0.3s linear; border: 1px solid #eaeaea; width: 705px; } @media (min-width: 1200px) { .header-menu-vertical .menu-content li .sub-menu { width: 890px; } } .header-menu-vertical .menu-content li .sub-menu>li { width: 33.33%; float: left; } .header-menu-vertical .menu-content li .sub-menu li a { margin: 5px 0px 5px 0px; } .header-menu-vertical .menu-content li .sub-menu.sub-menu-2 { padding: 0; width: 240px; border: 1px solid #eaeaea; background: #fff; } .header-menu-vertical .menu-content li .sub-menu.sub-menu-2 li { width: 100%; padding: 0; line-height: 20px; border-bottom: 1px solid #eaeaea; position: relative; display: block; } /***************************** 36 - Layout - Footer *****************************/ .footer { background-color: #fff; font-size: 14px; } .footer.m-t-100 { margin-top: 60px; } @media (min-width: 768px) { .footer.m-t-100 { margin-top: 80px; } } @media (min-width: 992px) { .footer.m-t-100 { margin-top: 100px; } } .footer__top { border-top: 1px solid #ebebeb; padding-top: 60px; padding-bottom: 60px; } @media (min-width: 768px) { .footer__top { padding-top: 80px; padding-bottom: 80px; } } @media (min-width: 992px) { .footer__top { padding-top: 80px; padding-bottom: 80px; } } .footer__top [class^=col] { margin-bottom: 40px; } .footer__top [class^=col]:last-child { margin-bottom: 0; } @media (min-width: 576px) { .footer__top [class^=col] { margin-bottom: 40px; } .footer__top [class^=col]:nth-child(3), .footer__top [class^=col]:nth-child(4) { margin-bottom: 0; } } @media (min-width: 992px) { .footer__top [class^=col] { margin-bottom: 0; } } .footer__logo { margin-bottom: 30px; text-align: left; } .footer__logo-img { width: 150px; height: auto; } .footer__address { text-align: left; } .footer__address-item { margin-bottom: 16px; } .footer__address-item:last-child { margin-bottom: 0px; } .footer__address-item i { padding-right: 10px; } .footer .footer__social-nav { display: flex; justify-content: flex-start; margin-top: 15px; } .footer .footer__social-list { margin-right: 15px; } .footer .footer__social-list:last-child { margin-right: 0; } .footer .footer__social-link { display: block; width: 45px; height: 45px; border-radius: 50%; text-align: center; line-height: 45px; transition: all 0.3s ease; color: #666; background: #eef0f1; } .footer .footer__social-link:hover { color: #fff; background: #79a206; } .footer__menu { margin-top: 0px; } .footer__nav-title { font-size: 14px; margin-bottom: 20px; font-weight: 500; text-transform: uppercase; } .footer__list { margin-bottom: 12px; } .footer__list:last-child { margin-bottom: 0px; } .footer__link { color: #666; transition: all 0.3s ease; font-size: 14px; text-decoration: none !important; display: block; } .footer__link:hover { color: #79a206; padding-left: 10px; } .footer__form-box { font-size: 16px; margin-top: 50px; position: relative; } .footer__form-box input { width: 100%; padding: 12px 120px 12px 10px; outline: none; border: none; background: #333; border-right: none; color: #ebebeb; } .footer__form-box button { position: absolute; padding: 16px 10px; right: 0; } .footer__bottom { padding: 40px 0; border-top: 1px solid #ebebeb; } .footer__copyright-text { text-align: center; margin-bottom: 20px; } @media (min-width: 992px) { .footer__copyright-text { text-align: left; margin-bottom: 0; } } .footer__copyright-text p { margin: 0; } .footer__copyright-text a { color: #79a206; } .footer__copyright-text a:hover { text-decoration: underline; } .footer__payment { overflow: hidden; text-align: center; } @media (min-width: 992px) { .footer__payment { text-align: right; } } .footer__payment-link { display: block; } .footer__payment-img { max-width: 100%; } /***************************** 37 - Layout - Custom Layout *****************************/ .container { max-width: 100%; padding-right: 15px; padding-left: 15px; margin-right: auto; margin-left: auto; } @media (min-width: 576px) { .container { max-width: 540px; } } @media (min-width: 768px) { .container { max-width: 100%; } } @media (min-width: 992px) { .container { max-width: 100%; } } @media (min-width: 1200px) { .container { max-width: 1200px; } } .container-fluid { width: 100%; padding-left: 15px; padding-right: 15px; } /***************************** 38 - Layout - Table *****************************/ table { border: 1px solid #ebebeb; width: 100%; } table thead>tr { background-color: #f9f9f9; border: 1px solid #ebebeb; } table thead>tr>th { color: #1d1d1d; font-size: 14px; font-weight: 600; padding: 21px 45px 22px; text-align: center; text-transform: uppercase; vertical-align: middle; white-space: nowrap; } table tbody>tr { border-bottom: 1px solid #ebebeb; } table tbody>tr td { color: #222; font-size: 15px; padding: 30px 15px; text-align: center; } table tbody>tr td a { color: #222; text-decoration: none !important; display: inline-block; } table tbody>tr td a:hover { color: #e81212; } .product-thumbnail { width: 150px; } .product-name { width: 435px; } .product-price-cart { width: 435px; } .product-quantities { width: 435px; } .product-subtotal { width: 435px; } .product-remove { width: 100px; } .product-remove a { color: #666; font-size: 16px; margin: 0 10px; } .compare-table .table tbody tr td { text-align: center; border: none; padding: 25px 30px; vertical-align: middle; border-bottom: 1px solid #ebebeb; border-left: 1px solid #ebebeb; } .first-column { min-width: 160px; font-size: 18px; font-weight: 600; color: #222; margin: 0; line-height: 1; } .product-image-title { min-width: 300px; vertical-align: bottom; padding-top: 70px; } .image { clear: both; width: 100%; margin-bottom: 40px; display: block; } .category { float: left; clear: both; font-size: 13px; line-height: 15px; color: #222; text-transform: capitalize; letter-spacing: 0.5px; } .pro-stock { font-size: 16px; font-weight: 600; color: #222; } .pro-remove button:hover { color: #ed3c32; } /***************************** 39 - Layout - Offacnvas *****************************/ /* Body Style When OffCanvas Open */ .offcanvas-close { color: #666; background: transparent; font-size: 24px; } .offcanvas-close:hover { color: #e81212; } /* OffCanvas Overlay */ .offcanvas-overlay { position: fixed; z-index: 999; top: 0; right: 0; bottom: 0; left: 0; display: none; background-color: rgba(0, 0, 0, 0.5); } /* OffCanvas */ .offcanvas { font-size: 16px; font-weight: 400; z-index: 999999; position: fixed; top: 0; right: 0; display: block; overflow: auto; width: 300px; height: 100vh; padding: 20px; transition: all 0.5s ease 0s; transform: translateX(100%); box-shadow: none; } @media (min-width: 576px) { .offcanvas { width: 400px; } } .offcanvas.offcanvas-open { transform: translateX(0); } .offcanvas__top { display: flex; justify-content: space-between; align-items: center; color: #222; text-transform: capitalize !important; margin-top: 10px; margin-bottom: 30px; } .offcanvas__top-text { font-size: 20px; font-weight: 400; margin-bottom: 0; } .offcanvas__top-text i { font-size: 20px; color: #222; text-align: center; display: inline-block; margin-right: 10px; } .offcanvas.offcanvas-mobile-menu { left: 0; padding: 40px 40px; transform: translateX(-100%); } .offcanvas.offcanvas-mobile-menu.offcanvas-open { transform: translateX(0%); } /***************************** 40 - Layout - Addcart Offcanvas *****************************/ .offcanvas-add-cart { background: #fff; overflow-y: auto; } .offcanvas-add-cart__list { display: flex; font-size: 14px; padding: 20px 0; margin-bottom: 20px; border-bottom: 1px solid #ebebeb; border-top: 1px solid #ebebeb; } .offcanvas-add-cart__list:last-child { margin-bottom: 0; } .offcanvas-add-cart__img-box { margin-right: 15px; overflow: hidden; } .offcanvas-add-cart__img { width: 100%; } .offcanvas-add-cart__link { display: block; color: #323232; } .offcanvas-add-cart__link:hover { color: #89c74a; } .offcanvas-add-cart__detail span { display: block; } .offcanvas-add-cart__item-dismiss { font-size: 14px; color: #666; background: transparent; } .offcanvas-add-cart__item-dismiss:hover { color: #e81212; } .offcanvas-add-cart__item-count { left: 0; top: 0; color: #fff; background: #89c74a; width: 25px; height: 25px; line-height: 25px; text-align: center; border-radius: 50%; } .offcanvas-add-cart__price { color: #222; font-weight: 600; font-size: 16px; margin: 5px 0; } .offcanvas-add-cart__info { font-size: 12px; color: #777; } .offcanvas-add-cart__checkout-list { margin-top: 10px; display: flex; justify-content: space-between; font-size: 16px; font-weight: 500; } .offcanvas-add-cart__checkout-info { padding-top: 25px; } .offcanvas-add-cart__checkout-left-info { color: #777; } .offcanvas-add-cart__checkout-right-info { font-weight: 600; color: #546583; } .offcanvas-add-cart__btn-checkout { margin-top: 50px; } .offcanvas-add-cart__checkout-box-bottom { padding-bottom: 15px; } /***************************** 41 - Layout - Slider Customize *****************************/ .gap__col--30 .slick-list { margin-left: -15px; margin-right: -15px; } .gap__col--30 .slick-slide { margin-left: 15px; margin-right: 15px; } .gap__row--30 .slick-slide>div { margin-bottom: 30px; } .gap__row--30 .slick-slide>div:last-child { margin-bottom: 0; } .gap__row--40 .slick-slide>div { margin-bottom: 40px; } .gap__row--40 .slick-slide>div:last-child { margin-bottom: 0; } .slider-dot-fix .slick-dots li button { text-indent: -9999px; display: inline-block; } .dot-gap__X--5 .slick-dots li { margin-right: 5px; } .dot-gap__X--5 .slick-dots li:last-child { margin-right: 0; } .dot-gap__X--10 .slick-dots li { margin-right: 10px; } .dot-gap__X--10 .slick-dots li:last-child { margin-right: 0; } .dot-gap__Y--30 .slick-dots { margin-top: 30px; } .slider-dot .slick-dots { display: flex; } .slider-dot .slick-dots li { display: inline-block !important; } .slider-dot.slider-dot--start .slick-dots { justify-content: flex-start; } .slider-dot.slider-dot--center .slick-dots { justify-content: center; } .slider-dot-size--medium .slick-dots li button { width: 15px; height: 15px; } .slider-dot-size--small .slick-dots li button { width: 12px; height: 12px; } .slider-dot-circle .slick-dots li button { border-radius: 50%; } .slider-dot-style--border .slick-dots li button { border: 1px solid; } .slider-dot-style--border-black-active-red .slick-dots li button { border-color: #222; } .slider-dot-style--border-black-active-red .slick-dots li.slick-active button { border-color: #e81212; } .slider-dot-style--border-black-active-golden .slick-dots li button { border-color: #222; } .slider-dot-style--border-black-active-golden .slick-dots li.slick-active button { border-color: #b09e64; } .slider-dot-style--fill .slick-dots li button { background: #fff; } .slider-dot-style--fill-white-active-white .slick-dots li button { background: rgba(255, 255, 255, 0.3); } .slider-dot-style--fill-white-active-white .slick-dots li.slick-active button { background: #fff; } .slider-dot-style--fill-white-active-green .slick-dots li button { background: #fff; } .slider-dot-style--fill-white-active-green .slick-dots li.slick-active button { background: #79a206; } .hero-slider__arrow { width: 30px; height: 30px; text-align: center; line-height: 30px; border-radius: 50%; color: #323232; background: transparent; font-size: 20px; position: absolute; top: 50%; transform: translateY(-50%); z-index: 99; visibility: hidden; opacity: 0; transition: all 0.3s ease; font-size: 24px; } .hero-slider__arrow--left { left: 60px; } .hero-slider__arrow--right { right: 60px; } .hero-slider__arrow:hover { color: #89c74a; } .hero:hover .hero-slider__arrow { visibility: visible; opacity: 1; } .hero:hover .hero-slider__arrow--left { left: 20px; } @media (min-width: 1566px) { .hero:hover .hero-slider__arrow--left { left: 70px; } } .hero:hover .hero-slider__arrow--right { right: 20px; } @media (min-width: 1566px) { .hero:hover .hero-slider__arrow--right { right: 70px; } } .hero .slick-dots { position: absolute; bottom: 10px; width: 100%; } .default-slider__arrow { width: 30px; height: 30px; background: transparent; color: #222; font-size: 24px; line-height: 24px; position: absolute; top: 50%; transform: translateY(-50%); opacity: 0; visibility: hidden; transition: all 0.3s ease; z-index: 99; } .default-slider__arrow i { font-size: 24px; } .default-slider__arrow--left { left: calc(0% + 20px); } .default-slider__arrow--right { right: calc(0% + 20px); } .default-slider:hover .default-slider__arrow { opacity: 1; visibility: visible; } .default-slider:hover .default-slider__arrow--left { left: 0; } .default-slider:hover .default-slider__arrow--right { right: 0; } .default-slider:hover .default-slider__arrow:hover { color: #89c74a; } .default-slider:hover .default-slider__arrow.slick-disabled { color: rgba(34, 34, 34, 0.6); } .product-default-slider .slick-slide { transform: scale(0.75); transition: all 0.5s ease-out; } .product-default-slider .slick-slide.slick-active { transform: scale(1); } .gallery__nav { position: absolute; color: #7e7e7e; z-index: 99; } .gallery__nav-horizontal { top: 50%; transform: translateY(-50%); } .gallery__nav-horizontal--right { right: -15px; } .gallery__nav-horizontal--left { left: -15px; } .gallery__nav-vertical { left: 50%; transform: translateX(-50%); } .gallery__nav-vertical--up { top: -20px; } .gallery__nav-vertical--down { bottom: -20px; } .inner-slider__arrow { width: 30px; height: 30px; background: #fff; color: #222; font-size: 16px; position: absolute; top: 50%; transform: translateY(-50%); display: none; opacity: 0; visibility: hidden; border: 1px solid #222; transition: all 0.3s ease; z-index: 99; line-height: 18px; } .inner-slider__arrow i { font-size: 18px; } .inner-slider__arrow--left { left: calc(0% + 5px); } .inner-slider__arrow--right { right: calc(0% + 5px); } .inner-slider:hover .inner-slider__arrow { opacity: 1; visibility: visible; } .inner-slider:hover .inner-slider__arrow--left { left: calc(0% + 15px); } .inner-slider:hover .inner-slider__arrow--right { right: calc(0% + 15px); } .inner-slider-grid-4 .slick-list { margin-right: -20px; } .inner-slider-grid-4 .slick-slide { margin-right: 20px; } /***************************** 42 - Layout - Utilities *****************************/ /*:::::::::: Margin Top :::::::::: */ .m-t-0 { margin-top: 0px; } .m-t-5 { margin-top: 5px; } .m-t-10 { margin-top: 10px; } .m-t-15 { margin-top: 15px; } .m-t-20 { margin-top: 20px; } .m-t-25 { margin-top: 25px; } .m-t-30 { margin-top: 30px; } .m-t-35 { margin-top: 35px; } .m-t-40 { margin-top: 40px; } .m-t-45 { margin-top: 45px; } .m-t-50 { margin-top: 50px; } .m-t-55 { margin-top: 55px; } .m-t-60 { margin-top: 60px; } .m-t-65 { margin-top: 65px; } .m-t-70 { margin-top: 70px; } .m-t-75 { margin-top: 75px; } .m-t-80 { margin-top: 80px; } .m-t-85 { margin-top: 85px; } .m-t-90 { margin-top: 90px; } .m-t-95 { margin-top: 95px; } .m-t-100 { margin-top: 100px; } .m-t-105 { margin-top: 105px; } .m-t-110 { margin-top: 110px; } .m-t-115 { margin-top: 115px; } .m-t-120 { margin-top: 120px; } .m-t-125 { margin-top: 125px; } .m-t-130 { margin-top: 130px; } .m-t-135 { margin-top: 135px; } .m-t-140 { margin-top: 140px; } .m-t-145 { margin-top: 145px; } .m-t-150 { margin-top: 150px; } .m-t-155 { margin-top: 155px; } .m-t-160 { margin-top: 160px; } /*:::::::::: Margin bottom :::::::::: */ .m-b-0 { margin-bottom: 0px; } .m-b-5 { margin-bottom: 5px; } .m-b-10 { margin-bottom: 10px; } .m-b-15 { margin-bottom: 15px; } .m-b-20 { margin-bottom: 20px; } .m-b-25 { margin-bottom: 25px; } .m-b-30 { margin-bottom: 30px; } .m-b-35 { margin-bottom: 35px; } .m-b-40 { margin-bottom: 40px; } .m-b-45 { margin-bottom: 45px; } .m-b-50 { margin-bottom: 50px; } .m-b-55 { margin-bottom: 55px; } .m-b-60 { margin-bottom: 60px; } .m-b-65 { margin-bottom: 65px; } .m-b-70 { margin-bottom: 70px; } .m-b-75 { margin-bottom: 75px; } .m-b-80 { margin-bottom: 80px; } .m-b-85 { margin-bottom: 85px; } .m-b-90 { margin-bottom: 90px; } .m-b-95 { margin-bottom: 95px; } .m-b-100 { margin-bottom: 100px; } .m-b-105 { margin-bottom: 105px; } .m-b-110 { margin-bottom: 110px; } .m-b-115 { margin-bottom: 115px; } .m-b-120 { margin-bottom: 120px; } .m-b-125 { margin-bottom: 125px; } .m-b-130 { margin-bottom: 130px; } .m-b-135 { margin-bottom: 135px; } .m-b-140 { margin-bottom: 140px; } .m-b-145 { margin-bottom: 145px; } .m-b-150 { margin-bottom: 150px; } .m-b-155 { margin-bottom: 155px; } .m-b-160 { margin-bottom: 160px; } /*:::::::::: Margin Left :::::::::: */ .m-l-0 { margin-left: 0px; } .m-l-5 { margin-left: 5px; } .m-l-10 { margin-left: 10px; } .m-l-15 { margin-left: 15px; } .m-l-20 { margin-left: 20px; } .m-l-25 { margin-left: 25px; } .m-l-30 { margin-left: 30px; } .m-l-35 { margin-left: 35px; } .m-l-40 { margin-left: 40px; } .m-l-45 { margin-left: 45px; } .m-l-50 { margin-left: 50px; } .m-l-55 { margin-left: 55px; } .m-l-60 { margin-left: 60px; } .m-l-65 { margin-left: 65px; } .m-l-70 { margin-left: 70px; } .m-l-75 { margin-left: 75px; } .m-l-80 { margin-left: 80px; } .m-l-85 { margin-left: 85px; } .m-l-90 { margin-left: 90px; } .m-l-95 { margin-left: 95px; } .m-l-100 { margin-left: 100px; } .m-l-105 { margin-left: 105px; } .m-l-110 { margin-left: 110px; } .m-l-115 { margin-left: 115px; } .m-l-120 { margin-left: 120px; } .m-l-125 { margin-left: 125px; } .m-l-130 { margin-left: 130px; } .m-l-135 { margin-left: 135px; } .m-l-140 { margin-left: 140px; } .m-l-145 { margin-left: 145px; } .m-l-150 { margin-left: 150px; } .m-l-155 { margin-left: 155px; } .m-l-160 { margin-left: 160px; } /*:::::::::: Margin Right :::::::::: */ .m-r-0 { margin-right: 0px; } .m-r-5 { margin-right: 5px; } .m-r-10 { margin-right: 10px; } .m-r-15 { margin-right: 15px; } .m-r-20 { margin-right: 20px; } .m-r-25 { margin-right: 25px; } .m-r-30 { margin-right: 30px; } .m-r-35 { margin-right: 35px; } .m-r-40 { margin-right: 40px; } .m-r-45 { margin-right: 45px; } .m-r-50 { margin-right: 50px; } .m-r-55 { margin-right: 55px; } .m-r-60 { margin-right: 60px; } .m-r-65 { margin-right: 65px; } .m-r-70 { margin-right: 70px; } .m-r-75 { margin-right: 75px; } .m-r-80 { margin-right: 80px; } .m-r-85 { margin-right: 85px; } .m-r-90 { margin-right: 90px; } .m-r-95 { margin-right: 95px; } .m-r-100 { margin-right: 100px; } .m-r-105 { margin-right: 105px; } .m-r-110 { margin-right: 110px; } .m-r-115 { margin-right: 115px; } .m-r-120 { margin-right: 120px; } .m-r-125 { margin-right: 125px; } .m-r-130 { margin-right: 130px; } .m-r-135 { margin-right: 135px; } .m-r-140 { margin-right: 140px; } .m-r-145 { margin-right: 145px; } .m-r-150 { margin-right: 150px; } .m-r-155 { margin-right: 155px; } .m-r-160 { margin-right: 160px; } /*:::::::::: Margin Left Right :::::::::: */ .m-lr-0 { margin: 0 0px; } .m-lr-5 { margin: 0 5px; } .m-lr-10 { margin: 0 10px; } .m-lr-15 { margin: 0 15px; } .m-lr-20 { margin: 0 20px; } .m-lr-25 { margin: 0 25px; } .m-lr-30 { margin: 0 30px; } .m-lr-35 { margin: 0 35px; } .m-lr-40 { margin: 0 40px; } .m-lr-45 { margin: 0 45px; } .m-lr-50 { margin: 0 50px; } .m-lr-55 { margin: 0 55px; } .m-lr-60 { margin: 0 60px; } .m-lr-65 { margin: 0 65px; } .m-lr-70 { margin: 0 70px; } .m-lr-75 { margin: 0 75px; } .m-lr-80 { margin: 0 80px; } .m-lr-85 { margin: 0 85px; } .m-lr-90 { margin: 0 90px; } .m-lr-95 { margin: 0 95px; } .m-lr-100 { margin: 0 100px; } .m-lr-105 { margin: 0 105px; } .m-lr-110 { margin: 0 110px; } .m-lr-115 { margin: 0 115px; } .m-lr-120 { margin: 0 120px; } .m-lr-125 { margin: 0 125px; } .m-lr-130 { margin: 0 130px; } .m-lr-135 { margin: 0 135px; } .m-lr-140 { margin: 0 140px; } .m-lr-145 { margin: 0 145px; } .m-lr-150 { margin: 0 150px; } .m-lr-155 { margin: 0 155px; } .m-lr-160 { margin: 0 160px; } /*:::::::::: Margin Top Bottom :::::::::: */ .m-tb-0 { margin: 0px 0; } .m-tb-5 { margin: 5px 0; } .m-tb-10 { margin: 10px 0; } .m-tb-15 { margin: 15px 0; } .m-tb-20 { margin: 20px 0; } .m-tb-25 { margin: 25px 0; } .m-tb-30 { margin: 30px 0; } .m-tb-35 { margin: 35px 0; } .m-tb-40 { margin: 40px 0; } .m-tb-45 { margin: 45px 0; } .m-tb-50 { margin: 50px 0; } .m-tb-55 { margin: 55px 0; } .m-tb-60 { margin: 60px 0; } .m-tb-65 { margin: 65px 0; } .m-tb-70 { margin: 70px 0; } .m-tb-75 { margin: 75px 0; } .m-tb-80 { margin: 80px 0; } .m-tb-85 { margin: 85px 0; } .m-tb-90 { margin: 90px 0; } .m-tb-95 { margin: 95px 0; } .m-tb-100 { margin: 100px 0; } .m-tb-105 { margin: 105px 0; } .m-tb-110 { margin: 110px 0; } .m-tb-115 { margin: 115px 0; } .m-tb-120 { margin: 120px 0; } .m-tb-125 { margin: 125px 0; } .m-tb-130 { margin: 130px 0; } .m-tb-135 { margin: 135px 0; } .m-tb-140 { margin: 140px 0; } .m-tb-145 { margin: 145px 0; } .m-tb-150 { margin: 150px 0; } .m-tb-155 { margin: 155px 0; } .m-tb-160 { margin: 160px 0; } /*::::::::::::::::::::::::::::::::::::::::::::::::::::: ==================== Padding measurement=========== ::::::::::::::::::::::::::::::::::::::::::::::::::::::*/ /*:::::::::: Pargin Top :::::::::: */ .p-t-0 { padding-top: 0px; } .p-t-5 { padding-top: 5px; } .p-t-10 { padding-top: 10px; } .p-t-15 { padding-top: 15px; } .p-t-20 { padding-top: 20px; } .p-t-25 { padding-top: 25px; } .p-t-30 { padding-top: 30px; } .p-t-35 { padding-top: 35px; } .p-t-40 { padding-top: 40px; } .p-t-45 { padding-top: 45px; } .p-t-50 { padding-top: 50px; } .p-t-55 { padding-top: 55px; } .p-t-60 { padding-top: 60px; } .p-t-65 { padding-top: 65px; } .p-t-70 { padding-top: 70px; } .p-t-75 { padding-top: 75px; } .p-t-80 { padding-top: 80px; } .p-t-85 { padding-top: 85px; } .p-t-90 { padding-top: 90px; } .p-t-95 { padding-top: 95px; } .p-t-100 { padding-top: 100px; } .p-t-105 { padding-top: 105px; } .p-t-110 { padding-top: 110px; } .p-t-115 { padding-top: 115px; } .p-t-120 { padding-top: 120px; } .p-t-125 { padding-top: 125px; } .p-t-130 { padding-top: 130px; } .p-t-135 { padding-top: 135px; } .p-t-140 { padding-top: 140px; } .p-t-145 { padding-top: 145px; } .p-t-150 { padding-top: 150px; } .p-t-155 { padding-top: 155px; } .p-t-160 { padding-top: 160px; } /*:::::::::: Padding bottom :::::::::: */ .p-b-0 { padding-bottom: 0px; } .p-b-5 { padding-bottom: 5px; } .p-b-10 { padding-bottom: 10px; } .p-b-15 { padding-bottom: 15px; } .p-b-20 { padding-bottom: 20px; } .p-b-25 { padding-bottom: 25px; } .p-b-30 { padding-bottom: 30px; } .p-b-35 { padding-bottom: 35px; } .p-b-40 { padding-bottom: 40px; } .p-b-45 { padding-bottom: 45px; } .p-b-50 { padding-bottom: 50px; } .p-b-55 { padding-bottom: 55px; } .p-b-60 { padding-bottom: 60px; } .p-b-65 { padding-bottom: 65px; } .p-b-70 { padding-bottom: 70px; } .p-b-75 { padding-bottom: 75px; } .p-b-80 { padding-bottom: 80px; } .p-b-85 { padding-bottom: 85px; } .p-b-90 { padding-bottom: 90px; } .p-b-95 { padding-bottom: 95px; } .p-b-100 { padding-bottom: 100px; } .p-b-105 { padding-bottom: 105px; } .p-b-110 { padding-bottom: 110px; } .p-b-115 { padding-bottom: 115px; } .p-b-120 { padding-bottom: 120px; } .p-b-125 { padding-bottom: 125px; } .p-b-130 { padding-bottom: 130px; } .p-b-135 { padding-bottom: 135px; } .p-b-140 { padding-bottom: 140px; } .p-b-145 { padding-bottom: 145px; } .p-b-150 { padding-bottom: 150px; } .p-b-155 { padding-bottom: 155px; } .p-b-160 { padding-bottom: 160px; } /*:::::::::: Padding Left :::::::::: */ .p-l-0 { padding-left: 0px; } .p-l-5 { padding-left: 5px; } .p-l-10 { padding-left: 10px; } .p-l-15 { padding-left: 15px; } .p-l-20 { padding-left: 20px; } .p-l-25 { padding-left: 25px; } .p-l-30 { padding-left: 30px; } .p-l-35 { padding-left: 35px; } .p-l-40 { padding-left: 40px; } .p-l-45 { padding-left: 45px; } .p-l-50 { padding-left: 50px; } .p-l-55 { padding-left: 55px; } .p-l-60 { padding-left: 60px; } .p-l-65 { padding-left: 65px; } .p-l-70 { padding-left: 70px; } .p-l-75 { padding-left: 75px; } .p-l-80 { padding-left: 80px; } .p-l-85 { padding-left: 85px; } .p-l-90 { padding-left: 90px; } .p-l-95 { padding-left: 95px; } .p-l-100 { padding-left: 100px; } .p-l-105 { padding-left: 105px; } .p-l-110 { padding-left: 110px; } .p-l-115 { padding-left: 115px; } .p-l-120 { padding-left: 120px; } .p-l-125 { padding-left: 125px; } .p-l-130 { padding-left: 130px; } .p-l-135 { padding-left: 135px; } .p-l-140 { padding-left: 140px; } .p-l-145 { padding-left: 145px; } .p-l-150 { padding-left: 150px; } .p-l-155 { padding-left: 155px; } .p-l-160 { padding-left: 160px; } /*:::::::::: padding Right :::::::::: */ .p-r-0 { padding-right: 0px; } .p-r-5 { padding-right: 5px; } .p-r-10 { padding-right: 10px; } .p-r-15 { padding-right: 15px; } .p-r-20 { padding-right: 20px; } .p-r-25 { padding-right: 25px; } .p-r-30 { padding-right: 30px; } .p-r-35 { padding-right: 35px; } .p-r-40 { padding-right: 40px; } .p-r-45 { padding-right: 45px; } .p-r-50 { padding-right: 50px; } .p-r-55 { padding-right: 55px; } .p-r-60 { padding-right: 60px; } .p-r-65 { padding-right: 65px; } .p-r-70 { padding-right: 70px; } .p-r-75 { padding-right: 75px; } .p-r-80 { padding-right: 80px; } .p-r-85 { padding-right: 85px; } .p-r-90 { padding-right: 90px; } .p-r-95 { padding-right: 95px; } .p-r-100 { padding-right: 100px; } .p-r-105 { padding-right: 105px; } .p-r-110 { padding-right: 110px; } .p-r-115 { padding-right: 115px; } .p-r-120 { padding-right: 120px; } .p-r-125 { padding-right: 125px; } .p-r-130 { padding-right: 130px; } .p-r-135 { padding-right: 135px; } .p-r-140 { padding-right: 140px; } .p-r-145 { padding-right: 145px; } .p-r-150 { padding-right: 150px; } .p-r-155 { padding-right: 155px; } .p-r-160 { padding-right: 160px; } /*:::::::::: padding Left Right :::::::::: */ .p-lr-0 { padding: 0 0; } .p-lr-5 { padding: 0 5px; } .p-lr-10 { padding: 0 10px; } .p-lr-15 { padding: 0 15px; } .p-lr-20 { padding: 0 20px; } .p-lr-25 { padding: 0 25px; } .p-lr-30 { padding: 0 30px; } .p-lr-35 { padding: 0 35px; } .p-lr-40 { padding: 0 40px; } .p-lr-45 { padding: 0 45px; } .p-lr-50 { padding: 0 50px; } .p-lr-55 { padding: 0 55px; } .p-lr-60 { padding: 0 60px; } .p-lr-65 { padding: 0 65px; } .p-lr-70 { padding: 0 70px; } .p-lr-75 { padding: 0 75px; } .p-lr-80 { padding: 0 80px; } .p-lr-85 { padding: 0 85px; } .p-lr-90 { padding: 0 90px; } .p-lr-95 { padding: 0 95px; } .p-lr-100 { padding: 0 100px; } .p-lr-105 { padding: 0 105px; } .p-lr-110 { padding: 0 110px; } .p-lr-115 { padding: 0 115px; } .p-lr-120 { padding: 0 120px; } .p-lr-125 { padding: 0 125px; } .p-lr-130 { padding: 0 130px; } .p-lr-135 { padding: 0 135px; } .p-lr-140 { padding: 0 140px; } .p-lr-145 { padding: 0 145px; } .p-lr-150 { padding: 0 150px; } .p-lr-155 { padding: 0 155px; } .p-lr-160 { padding: 0 160px; } /*:::::::::: padding Top Bottom :::::::::: */ .p-tb-0 { padding: 0 0; } .p-tb-5 { padding: 5px 0; } .p-tb-10 { padding: 10px 0; } .p-tb-15 { padding: 15px 0; } .p-tb-20 { padding: 20px 0; } .p-tb-25 { padding: 25px 0; } .p-tb-30 { padding: 30px 0; } .p-tb-35 { padding: 35px 0; } .p-tb-40 { padding: 40px 0; } .p-tb-45 { padding: 45px 0; } .p-tb-50 { padding: 50px 0; } .p-tb-55 { padding: 55px 0; } .p-tb-60 { padding: 60px 0; } .p-tb-65 { padding: 65px 0; } .p-tb-70 { padding: 70px 0; } .p-tb-75 { padding: 75px 0; } .p-tb-80 { padding: 80px 0; } .p-tb-85 { padding: 85px 0; } .p-tb-90 { padding: 90px 0; } .p-tb-95 { padding: 95px 0; } .p-tb-100 { padding: 100px 0; } .p-tb-105 { padding: 105px 0; } .p-tb-110 { padding: 110px 0; } .p-tb-115 { padding: 115px 0; } .p-tb-120 { padding: 120px 0; } .p-tb-125 { padding: 125px 0; } .p-tb-130 { padding: 130px 0; } .p-tb-135 { padding: 135px 0; } .p-tb-140 { padding: 140px 0; } .p-tb-145 { padding: 145px 0; } .p-tb-150 { padding: 150px 0; } .p-tb-155 { padding: 155px 0; } .p-tb-160 { padding: 160px 0; } .border-top-1 { border-top: 1px solid #ddd; } /*-- uploader -- */ #drop-area { border: 2px dashed #ccc; border-radius: 20px; /*width: 100%; margin: 50px auto;*/ padding: 20px; } #drop-area.highlight { border-color: purple; } p { margin-top: 0; } .my-form { margin-bottom: 10px; } #gallery { margin-top: 10px; } #gallery img { width: 150px; margin-bottom: 10px; margin-right: 10px; vertical-align: middle; } .button { display: inline-block; padding: 10px; background: #ccc; cursor: pointer; border-radius: 5px; border: 1px solid #ccc; } .button:hover { background: #ddd; } #fileElem { display: none; } .am-wrapper { float: left; position: relative; overflow: hidden; } .am-wrapper img { position: absolute; outline: none; } button { cursor: pointer; }