/* ======================================= All common CSS of Hurst Theme ======================================== */ /* ----------------------------------------------------- Font-size ----------------------------------------------------- */ .font-16px {font-size: 16px;} /* ----------------------------------------------------- Text-Color ----------------------------------------------------- */ .text-gray { color: #999; } .text-dark-red { color: #c87065; } .text-black { color: #6a6a6a; } .text-light-black { color: #666; } .text-tan { color: #C8A165; } .cart-info h5 a, .slider-title2, .slider-title3 { color: #666; } .cart-info a:hover { color: #C8A165; } .single-cart p { color: #999; } .cart-delete a { color: #ccc; } .banner-3 .banner-title a { color: #6a6a6a; } .banner-3 .banner-title a:hover { color: #C8A165; } .banner-3 .banner-title span { color: #c8a165; } .sidebar-social ul > li:hover a, .sidebar-account ul > li:hover a { color: #C8A165; } .bg-white { background: #fff; } .bg-dark-white { background: #f6f6f6; } /* ----------------------------------------------------- Nested CSS ----------------------------------------------------- */ .banner-thumb , .product-img a { display: block; } .price, .banner-title, .banner-brief p { z-index: 9; } /* ----------------------------------------------------- Sticker / Product Label ----------------------------------------------------- */ .pro-label { left: 20px; position: absolute; top: 20px; z-index: 2; background: #c8a165 none repeat scroll 0 0; border-radius: 5px; color: #fff; height: 25px; line-height: 25px; padding: 0 10px; text-transform: capitalize; } .pro-label.new-label { background: #c8a165 none repeat scroll 0 0; } .pro-label.sale-label { background: #c87065 none repeat scroll 0 0; } .single-banner .pro-label { left: 30px; } .product-style-2 .pro-label { left: 15px; top: 15px; } /* ----------------------------------------------------- Button ----------------------------------------------------- */ .btn { border-radius: 0; } .button-one { background: #efefef none repeat scroll 0 0; display: inline-block; height: 30px; line-height: 30px; overflow: hidden; padding: 0 15px; position: relative; } .button-one::before { background: #c8a165 none repeat scroll 0 0; bottom: 0; color: #fff; content: attr(data-text); left: -100%; position: absolute; text-align: center; top: 0; width: 100%; visibility: hidden; z-index: 11; } .button-one::after { border: 2px solid #d3d3d3; bottom: 0; content: ""; left: 0; position: absolute; top: 0; width: 100%; z-index: 1; } .button-one:hover, .button-one:focus, .button-one:active { color: #fff; } .button-one:hover::before, .button-one:focus::before, .button-one:active::before { left: 0; visibility: visible; } .submit-button.btn-bg-2 { background: #C8A165 none repeat scroll 0 0; } .submit-button.btn-bg-2::before { background: #c87065 none repeat scroll 0 0; } .form-message{ margin-top: 15px; margin-bottom: 0; } .form-message.success{ color: green; } .form-message.error{ color: red; } /* Slider */ .button-one.style-2 { height: 45px; line-height: 45px; padding: 0 30px; } .button-one.style-3 { background: #c87065 none repeat scroll 0 0; color: #fff; font-weight: 700; padding: 0 30px; } .button-one.style-3::after { border: 2px solid #c87065; } .button-2 { font-weight: 700; } .submit-btn-4::after { border: medium none; } /* ----------------------------------------------------- Title ----------------------------------------------------- */ .title-1 { font-size: 16px; font-weight: 700; line-height: 28px; } .title-border { position: relative; } .title-border::before { background: #eee none repeat scroll 0 0; bottom: 0; content: ""; height: 2px; left: 0; position: absolute; width: 50px; } .section-title h2 { color: #444; font-size: 30px; font-weight: 900; line-height: 22px; margin-bottom: 25px; padding-bottom: 22px; } .section-title .title-border::before { background: #c87065 none repeat scroll 0 0; margin: 0 auto; right: 0; } /* ----------------------------------------------------- Input ----------------------------------------------------- */ input[type="text"], input[type="password"] { background: #f6f6f6 none repeat scroll 0 0; border: medium none; box-shadow: none; color: #999; height: 40px; margin-bottom: 15px; padding: 0 20px; transition: all 0.5s ease 0s; width: 100%; outline: none; } input::-webkit-input-placeholder { color: #999; opacity: 1; } input:-moz-placeholder { color: #999; /* Firefox 18- */ opacity: 1; } input::-moz-placeholder { color: #999; /* Firefox 19+ */ opacity: 1; } input:-ms-input-placeholder { color: #999; opacity: 1; } input[type="checkbox"] { margin: 4px 10px 0px 0; } input[type="checkbox"]:focus { outline: none; } button { border:none; background: transparent; transition: all 0.3s ease 0s; } .subscribe-area input[type="text"] { padding: 0 20px 0 0; } .submit-button { background: #c87065 none repeat scroll 0 0; color: #fff; height: 35px; line-height: 35px; padding: 0 30px; text-transform: uppercase; } .submit-button.button-one::after { border-color: transparent; } .submit-btn-2 { border-radius: 3px; font-size: 14px; font-weight: 700; padding: 0 40px; } .subscribe .submit-button { margin-left: 50px; } .custom-textarea { background: #f6f6f6 none repeat scroll 0 0; border: medium none; height: 100px; padding: 15px 20px; width: 100%; outline: none; } /* ----------------------------------------------------- Slick slider Next - Prev ----------------------------------------------------- */ /* Slick-Arrow */ .arrow-left-right .slick-arrow { background: #fff none repeat scroll 0 0; border: 2px solid #eeeeee; color: #a6a6a6; font-weight: 700; left: -30px; line-height: 20px; margin-top: -43px; position: absolute; top: 50%; width: 35px; z-index: 999; transition: all 0.5s ease 0s; } .arrow-left-right .slick-arrow:hover { background: #C8A165 none repeat scroll 0 0; border: 2px solid #C8A165; color: #fff; } .arrow-left-right .slick-next.slick-arrow { left: auto; right: -30px; } /* Slick-Dots */ .dots-bottom-right .slick-dots { bottom: 20px; position: absolute; right: 45px; } .dots-bottom-right .slick-dots li { background: #ccc none repeat scroll 0 0; border-radius: 50%; cursor: pointer; display: inline-block; font-size: 0; height: 8px; line-height: 0; margin-left: 10px; width: 8px; } .dots-bottom-right .slick-dots li.slick-active { background: #C8A165 none repeat scroll 0 0; } /* ----------------------------------------------------- Margin and Padding ----------------------------------------------------- */ /* Margin */ .m-0 { margin: 0; } .mt-5 { margin-top: 5px; } .mt-10 { margin-top: 10px; } .mt-15 { margin-top: 15px; } .mt-20 { margin-top: 20px; } .mt-25 { margin-top: 25px; } .mt-30 { margin-top: 30px; } .mt-40 { margin-top: 40px; } .mt-60 { margin-top: 60px; } .mb-0 { margin-bottom: 0; } .mb-10 { margin-bottom: 10px; } .mb-15 { margin-bottom: 15px; } .mb-20 { margin-bottom: 20px; } .mb-30 { margin-bottom: 30px; } .mb-35 { margin-bottom: 35px; } .mb-60 { margin-bottom: 60px; } .ml-10 { margin-left: 10px; } /* Padding */ .p-0 { padding: 0; } .pb-80 { padding-bottom: 80px; } .pb-15 { padding-bottom: 15px; } .pb-30 { padding-bottom: 30px; } .pb-35 { padding-bottom: 35px; } .pt-80 { padding-top: 80px; } .pt-50 { padding-top: 50px; } .pt-55 { padding-top: 55px; } .pr-20 { padding-right: 20px; } .pr-30 { padding-right: 30px; } .pl-20 { padding-left: 20px; } /* custom-row */ .cus-row-30 { margin-left: -30px; margin-right: -30px; } /* ************************ Margin top ************************ */ .mt-0 { margin-top: 0; } .mt-10 { margin-top: 10px; } .mt-15 { margin-top: 15px; } .mt-20 { margin-top: 20px; } .mt-30 { margin-top: 30px; } .mt-40 { margin-top: 40px; } .mt-50 { margin-top: 50px; } .mt-60 { margin-top: 60px; } .mt-70 { margin-top: 70px; } .mt-80 { margin-top: 80px; } .mt-90 { margin-top: 90px; } .mt-100 { margin-top: 100px; } .mt-110 { margin-top: 110px; } .mt-120 { margin-top: 120px; } .mt-130 { margin-top: 130px; } .mt-140 { margin-top: 140px; } .mt-150 { margin-top: 150px;} /* ************************ Margin right ************************ */ .mr-0 { margin-right: 0; } .mr-10 { margin-right: 10px; } .mr-15 { margin-right: 15px; } .mr-20 { margin-right: 20px; } .mr-30 { margin-right: 30px; } .mr-40 { margin-right: 40px; } .mr-50 { margin-right: 50px; } .mr-60 { margin-right: 60px; } .mr-70 { margin-right: 70px; } .mr-80 { margin-right: 80px; } .mr-90 { margin-right: 90px; } .mr-100 { margin-right: 100px; } .mr-110 { margin-right: 110px; } .mr-120 { margin-right: 120px; } .mr-130 { margin-right: 130px; } .mr-140 { margin-right: 140px; } .mr-150 { margin-right: 150px; } /* ************************ Margin bottom ************************ */ .mb-0 { margin-bottom: 0; } .mb-10 { margin-bottom: 10px; } .mb-15 { margin-bottom: 15px; } .mb-20 { margin-bottom: 20px; } .mb-30 { margin-bottom: 30px; } .mb-40 { margin-bottom: 40px; } .mb-50 { margin-bottom: 50px; } .mb-60 { margin-bottom: 60px; } .mb-70 { margin-bottom: 70px; } .mb-80 { margin-bottom: 80px; } .mb-90 { margin-bottom: 90px; } .mb-100 { margin-bottom: 100px; } .mb-110 { margin-bottom: 110px; } .mb-120 { margin-bottom: 120px; } .mb-130 { margin-bottom: 130px; } .mb-140 { margin-bottom: 140px; } .mb-150 { margin-bottom: 150px; } /* ************************ Margin left ************************ */ .ml-0 { margin-left: 0; } .ml-10 { margin-left: 10px; } .ml-15 { margin-left: 15px; } .ml-20 { margin-left: 20px; } .ml-30 { margin-left: 30px; } .ml-40 { margin-left: 40px; } .ml-50 { margin-left: 50px; } .ml-60 { margin-left: 60px; } .ml-70 { margin-left: 70px; } .ml-80 { margin-left: 80px; } .ml-90 { margin-left: 90px; } .ml-100 { margin-left: 100px; } .ml-110 { margin-left: 110px; } .ml-120 { margin-left: 120px; } .ml-130 { margin-left: 130px; } .ml-140 { margin-left: 140px; } .ml-150 { margin-left: 150px; } /* ************************ Padding top ************************ */ .pt-0 { padding-top: 0; } .pt-10 { padding-top: 10px; } .pt-15 { padding-top: 15px; } .pt-20 { padding-top: 20px; } .pt-30 { padding-top: 30px; } .pt-40 { padding-top: 40px; } .pt-50 { padding-top: 50px; } .pt-60 { padding-top: 60px; } .pt-70 { padding-top: 70px; } .pt-80 { padding-top: 80px; } .pt-90 { padding-top: 90px; } .pt-100 { padding-top: 100px; } .pt-110 { padding-top: 110px; } .pt-120 { padding-top: 120px; } .pt-130 { padding-top: 130px; } .pt-140 { padding-top: 140px; } .pt-150 { padding-top: 150px; } /* ************************ Padding right ************************ */ .pr-0 { padding-right: 0; } .pr-10 { padding-right: 10px; } .pr-15 { padding-right: 15px; } .pr-20 { padding-right: 20px; } .pr-30 { padding-right: 30px; } .pr-40 { padding-right: 40px; } .pr-50 { padding-right: 50px; } .pr-60 { padding-right: 60px; } .pr-70 { padding-right: 70px; } .pr-80 { padding-right: 80px; } .pr-90 { padding-right: 90px; } .pr-100 { padding-right: 100px; } .pr-110 { padding-right: 110px; } .pr-120 { padding-right: 120px; } .pr-130 { padding-right: 130px; } .pr-140 { padding-right: 140px; } /* ************************ Padding bottom ************************ */ .pb-0 { padding-bottom: 0; } .pb-10 { padding-bottom: 10px; } .pb-15 { padding-bottom: 15px; } .pb-20 { padding-bottom: 20px; } .pb-30 { padding-bottom: 30px; } .pb-40 { padding-bottom: 40px; } .pb-50 { padding-bottom: 50px; } .pb-60 { padding-bottom: 60px; } .pb-70 { padding-bottom: 70px; } .pb-80 { padding-bottom: 80px; } .pb-90 { padding-bottom: 90px; } .pb-100 { padding-bottom: 100px; } .pb-110 { padding-bottom: 110px; } .pb-120 { padding-bottom: 120px; } .pb-130 { padding-bottom: 130px; } .pb-140 { padding-bottom: 140px; } .pb-150 { padding-bottom: 150px; } /* ************************ Padding left ************************ */ .pl-0 { padding-left: 0; } .pl-10 { padding-left: 10px; } .pl-15 { padding-left: 15px; } .pl-20 { padding-left: 20px; } .pl-30 { padding-left: 30px; } .pl-40 { padding-left: 40px; } .pl-50 { padding-left: 50px; } .pl-60 { padding-left: 60px; } .pl-70 { padding-left: 70px; } .pl-80 { padding-left: 80px; } .pl-90 { padding-left: 90px; } .pl-100 { padding-left: 100px; } .pl-110 { padding-left: 110px; } .pl-120 { padding-left: 120px; } .pl-130 { padding-left: 130px; } .pl-140 { padding-left: 140px; } .pl-150 { padding-left: 150px; } /* ----------------------------------------------------- Main-Menu open and close button ----------------------------------------------------- */ .hamburger { padding: 15px 15px; display: inline-block; cursor: pointer; transition-property: opacity, -webkit-filter; transition-property: opacity, filter; transition-property: opacity, filter, -webkit-filter; transition-duration: 0.15s; transition-timing-function: linear; font: inherit; color: inherit; text-transform: none; background-color: transparent; border: 0; margin: 0; overflow: visible; } .hamburger:hover { opacity: 0.7; } .hamburger-box { display: inline-block; height: 15px; position: relative; width: 21px; } .hamburger-inner { display: block; top: 50%; margin-top: -2px; } .hamburger-inner, .hamburger-inner::before, .hamburger-inner::after { width: 21px; height: 3px; background-color: #333; border-radius: 0px; position: absolute; transition-property: -webkit-transform; transition-property: transform; transition-property: transform, -webkit-transform; transition-duration: 0.15s; transition-timing-function: ease; } .hamburger-inner::before, .hamburger-inner::after { content: ""; display: block; } .hamburger-inner::before {top: -6px; } .hamburger-inner::after { bottom: -10px; } /* * Emphatic */ .hamburger--emphatic {overflow: hidden; } .hamburger--emphatic .hamburger-inner {transition: background-color 0.2s 0.25s ease-in; } .hamburger--emphatic .hamburger-inner::before { left: 0; transition: top 0.05s 0.2s linear, left 0.2s 0.25s ease-in, -webkit-transform 0.2s cubic-bezier(0.6, 0.04, 0.98, 0.335); transition: transform 0.2s cubic-bezier(0.6, 0.04, 0.98, 0.335), top 0.05s 0.2s linear, left 0.2s 0.25s ease-in; transition: transform 0.2s cubic-bezier(0.6, 0.04, 0.98, 0.335), top 0.05s 0.2s linear, left 0.2s 0.25s ease-in, -webkit-transform 0.2s cubic-bezier(0.6, 0.04, 0.98, 0.335); } .hamburger--emphatic .hamburger-inner::after { top: 6px; right: 0; transition: top 0.05s 0.2s linear, right 0.2s 0.25s ease-in, -webkit-transform 0.2s cubic-bezier(0.6, 0.04, 0.98, 0.335); transition: transform 0.2s cubic-bezier(0.6, 0.04, 0.98, 0.335), top 0.05s 0.2s linear, right 0.2s 0.25s ease-in; transition: transform 0.2s cubic-bezier(0.6, 0.04, 0.98, 0.335), top 0.05s 0.2s linear, right 0.2s 0.25s ease-in, -webkit-transform 0.2s cubic-bezier(0.6, 0.04, 0.98, 0.335); } .hamburger--emphatic.active .hamburger-inner { transition-delay: 0s; transition-timing-function: ease-out; background-color: transparent; } .hamburger--emphatic.active .hamburger-inner::before { left: -80px; top: -80px; -webkit-transform: translate3d(80px, 80px, 0) rotate(45deg); transform: translate3d(80px, 80px, 0) rotate(45deg); transition: left 0.2s ease-out, top 0.05s 0.2s linear, -webkit-transform 0.2s 0.25s cubic-bezier(0.075, 0.82, 0.165, 1); transition: left 0.2s ease-out, top 0.05s 0.2s linear, transform 0.2s 0.25s cubic-bezier(0.075, 0.82, 0.165, 1); transition: left 0.2s ease-out, top 0.05s 0.2s linear, transform 0.2s 0.25s cubic-bezier(0.075, 0.82, 0.165, 1), -webkit-transform 0.2s 0.25s cubic-bezier(0.075, 0.82, 0.165, 1); } .hamburger--emphatic.active .hamburger-inner::after { right: -80px; top: -80px; -webkit-transform: translate3d(-80px, 80px, 0) rotate(-45deg); transform: translate3d(-80px, 80px, 0) rotate(-45deg); transition: right 0.2s ease-out, top 0.05s 0.2s linear, -webkit-transform 0.2s 0.25s cubic-bezier(0.075, 0.82, 0.165, 1); transition: right 0.2s ease-out, top 0.05s 0.2s linear, transform 0.2s 0.25s cubic-bezier(0.075, 0.82, 0.165, 1); transition: right 0.2s ease-out, top 0.05s 0.2s linear, transform 0.2s 0.25s cubic-bezier(0.075, 0.82, 0.165, 1), -webkit-transform 0.2s 0.25s cubic-bezier(0.075, 0.82, 0.165, 1); } /* ============= */ /* Tooltip */ .tooltip {opacity:1 !important;} .tooltip > .tooltip-inner { background: #C8A165 none repeat scroll 0 0; border-radius: 3px; color: #fff; display: inline-block; font-size: 11px; font-weight: 700; line-height: 25px; padding: 0 10px; text-transform: uppercase; width: auto; height: 25px; } .product-action a:first-child .tooltip > .tooltip-inner { margin-left: 20px; } .tooltip .tooltip-arrow { border-top-color:#C8A165 !important; } /* Quickview */ .modal { z-index: 13000;} #productModal .modal-dialog { margin: 5% auto; max-width: 96%; min-height: 300px; padding: 20px; width: 870px; } #productModal .modal-header { border: 0 none; min-height: auto; padding: 0; } #productModal button.close { opacity: 1; position: absolute; right: 10px; top: 10px; z-index: 2; } #productModal button.close span { border: 1px solid #909295; border-radius: 100%; color: #909295; display: block; height: 30px; line-height: 25px; padding-top: 1px; text-align: center; width: 30px; } #productModal button.close:hover span { opacity: 1; border: 1px solid #F6416C; color: #F6416C; } #quickview-wrapper .modal-content { border-radius: 0; } .modal-product { overflow: hidden; } .modal-product .product-images { float: left; width: 40%; } .modal-product .product-images .quick-thumbnails { float: left; width: 100%; } .modal-product .product-images .main-image { float: left; width: 100%; } .modal-product .product-images .main-image img { box-shadow: none; } .modal-product .product-info { float: left; padding-left: 30px; width: 60%; } .modal-product .product-info h1 { font-size: 22px; font-weight: normal; margin: 0 0 20px; } .s-price-box { font-family: "Roboto",sans-serif; font-size: 20px; } .s-price-box .old-price { margin-left: 15px; text-decoration: line-through; } .modal-product .product-info .price-box { float: left; margin: 0 0 12px; width: 100%; } .modal-product .product-info .price-box p { margin: 0; } .modal-product .product-info .price-box .special-price { color: #83cbdc; font-family: "Raleway",sans-serif; font-size: 24px; font-weight: 400; } .modal-product .product-info .see-all { color: #42414f; display: inline-block; margin-bottom: 35px; text-decoration: underline; } .numbers-row > input { border: 1px solid #ddd; float: left; height: 40px; padding: 0 10px 0 0; text-align: center; width: 60px; } .quick-add-to-cart .single_add_to_cart_button { background: #444 none repeat scroll 0 0; border: medium none; color: #fff; float: left; font-weight: 700; height: 40px; margin-left: 15px; padding: 0 70px; text-transform: uppercase; transition: all 0.3s ease 0s; } .quick-add-to-cart .single_add_to_cart_button:hover { background: #C8A165 none repeat scroll 0 0 !important; } .modal-product .product-info .see-all:hover { color: #ff8787; } h3.widget-title-modal { background: rgba(0, 0, 0, 0) none repeat scroll 0 0; color: #42414f; float: left; font-size: 16px; line-height: 30px; margin: 0 0 5px; text-align: left; text-transform: none; width: 100%; } .modal-product .product-info .quick-add-to-cart { border-bottom: 1px solid #e5e5e5; float: left; margin: 0 0 20px; padding: 0 0 15px; width: 100%; } .modal-product .product-info .quick-desc { border-bottom: 1px solid #e5e5e5; color: #909295; float: left; font-size: 14px; line-height: 21px; margin: 0 0 25px; padding: 0 0 15px; width: 100%; } .modal-product .widget { float: left; width: 100%; } .modal-product .widget .widget-title { background: rgba(0, 0, 0, 0) none repeat scroll 0 0; color: #909295; float: left; font-size: 16px; line-height: 30px; margin: 0 0 5px; text-align: left; text-transform: none; width: 100%; } .modal-product .widget .social-icons { float: left; margin: 0; padding: 0; } .modal-product .widget .social-icons li { float: left; line-height: 30px; list-style: outside none none; margin-right: 10px; } .modal-product .widget .social-icons li .social-icon { border: 1px solid #e5e5e5; color: #909295; display: inline-block; font-size: 18px; line-height: 28px; text-align: center; width: 40px; } .modal-product .widget .social-icons li .social-icon:hover { color: #fff; } .modal-product .widget .social-icons li .social-icon.facebook:hover { background: #3b579d none repeat scroll 0 0; border: 1px solid #3b579d; } .modal-product .widget .social-icons li .social-icon.twitter:hover { background: #3acaff none repeat scroll 0 0; border: 1px solid #3acaff; } .modal-product .widget .social-icons li .social-icon.pinterest:hover { background: #cb2027 none repeat scroll 0 0; border: 1px solid #cb2027; } .modal-product .widget .social-icons li .social-icon.tumblr:hover { background: #304e6c none repeat scroll 0 0; border: 1px solid #304e6c; } .modal-product .widget .social-icons li .social-icon.gplus:hover { background: #d11717 none repeat scroll 0 0; border: 1px solid #d11717; } .modal-product .widget .social-icons li .social-icon.linkedin:hover { background: #0097bd none repeat scroll 0 0; border: 1px solid #0097bd; } /* Scroll Up */ #scrollUp { background: #C8A165 none repeat scroll 0 0; bottom: 15px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.05); color: #fff; font-size: 20px; height: 45px; line-height: 45px; overflow: hidden; padding-top: 0px; position: fixed; right: 15px; text-align: center; transition: all 0.3s ease 0s; width: 45px; z-index: 200; } #scrollUp:hover { background: #c8a165 none repeat scroll 0 0; } @keyframes scroll-ani-to-top { 0% { bottom: 0; opacity: 0; } 50% { bottom: 50%; opacity: 1; } 100% { bottom: 10%; opacity: 0; } } @-webkit-keyframes scroll-ani-to-top { 0% { bottom: 0; opacity: 0; } 50% { bottom: 50%; opacity: 1; } 100% { bottom: 75%; opacity: 0; } } #scrollUp:hover i { animation: 800ms linear 0s normal none infinite running scroll-ani-to-top; bottom: 0; height: 100%; left: 0; margin-bottom: -25px; position: absolute; width: 100%; }