/*-------------------------------------------------- Template Name: Volga; Description: Responsive Html5 Ecommerce Template; Template URI:; Author Name:Hastech; Author URI:; Version: 1.0; ----------------------------------------------------- CSS INDEX ================ 1. Theme Default CSS 2. Header CSS 2.1 Header Top CSS 2.2 Header Middle CSS 2.3 Header Bottom CSS 2.4 Vertical Mobile Menu CSS 3. Categorie Menu & Slider Area CSS 3.1 Categorie Menu CSS 3.2 Slider CSS 3.3 All Banner CSS 4. Brand Banner Area CSS 5. Hot Deal Products CSS 6. Ranking Products CSS 7. New & Featured Products CSS 8. Support Area CSS 9. Newsletter CSS 10. Footer CSS 11. Home-2 CSS 12. Home-3 CSS 13. Home-4 CSS 14. Blog CSS 15. Breadcrumb CSS 16. Product Details CSS 17. Shop Page CSS 18. Quick View CSS 19. Login CSS 20. Register Account CSS 21. Forgot Password CSS 22. 404 Page CSS 23. Compare Page CSS 24. Checkout CSS 25. Cart & Wish List CSS 26. Terms & Conditions CSS 27. About Us CSS 28. Contact Us CSS 29. Popup Window CSS -----------------------------------------------------*/ /*----------------------------------------*/ /* 1. Theme Default CSS /*----------------------------------------*/ body { font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, "Meiryo UI", verdana, Arial, Helvetica, "MS Pゴシック", sans-serif; font-weight: 400; color: #232323; font-size: 14px; background: #f7f7f7; line-height: 1.25em; } a:hover { text-decoration: none; } a:active, a:hover, a:focus { outline: 0 none; text-decoration: none } h4 a:hover { color: #3498db; } ul { list-style: outside none none; margin: 0; padding: 0 } .clear { clear: both } .fix { overflow: hidden; } .tooltip-inner { padding: 0.1rem 0.7rem 0.25rem; } .post-content { background: #fff; padding: 20px; } .post-title h2::before, .second-hot-deal .post-title h2:before, .new-pro-two .post-title h2:before, .hot-deal-three .post-title h2:before { font-family: "Ionicons"; font-size: 24px; font-weight: 400; margin-right: 8px; } .hot-deal-products .post-title h2::before, .second-hot-deal .post-title h2:before, .new-pro-two .post-title h2:before, .hot-deal-three .post-title h2:before { content: ""; vertical-align: middle; } /* product sticker css start */ .sticker-new, .sticker-sale { background: #94c341 none repeat scroll 0 0; border-radius: 3px; color: #fff; display: inline-block; font-size: 12px; font-weight: 400; height: 25px; left: 0; line-height: 25px; min-width: 50px; overflow: hidden; padding: 0 10px; position: absolute; text-align: center; text-transform: capitalize; top: 0; z-index: 5; } .sticker-sale { background: #c62727 none repeat scroll 0 0; left: auto; right: 0; } /* post title bg color css start */ .post-title h2, .hot-deal-three .post-title h2, .second-featured-products.related-pro .post-title h2 { background: #ffffff; font-size: 18px; font-weight: 600; line-height: 20px; position: relative; text-transform: uppercase; z-index: 1; margin: 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align:center; -ms-flex-align:center; align-items:center; height: 55px; border-right: 1px solid #ededed; border-top: 2px solid #ea7954; border-bottom: 2px solid #ededed; color: #ea7954; } .second-featured-products.related-pro .post-title h2 { border-right: none; border-top: none; border-bottom: 2px solid #ea7954; } .ranking-product .post-title h2 { background: #ea7954; } .fashion .post-title h2 { background: #bb1860; } .second-ranking-product .post-title h2 { background: #1e9cb6; } .home-kitchen .post-title h2 { background: #49beb7; } .featured-products .post-title h2 { background: #b76355; } /* categorie product top border css start */ .ranking-product .main-product-tab-area { border-top: 2px solid #ea7954; } .tv-video .main-product-tab-area { border-top: 2px solid #3498db; } .fashion .main-product-tab-area { border-top: 2px solid #bb1860; } .second-ranking-product .main-product-tab-area { border-top: 2px solid #1e9cb6; } .home-kitchen .main-product-tab-area { border-top: 2px solid #49beb7; } /* post title icon css start */ .post-title h2 i { background: #EA7954; color: #fff; display: inline-block; font-size: 22px; margin-right: 15px; text-align: center; width: 55px; line-height: 55px; } /* categorie slider navigation css start */ .owl-nav div { background: #2c2c2c; color: #fff; height: 30px; width: 30px; line-height: 30px; text-align: center; font-size: 17px; border-radius: 5px; right: 55px; opacity: 1; top: -44px; position: absolute; -webkit-transition: all 300ms ease-in 0s; transition: all 300ms ease-in 0s; z-index: 55; } .owl-nav div.owl-next { left: auto; right: 20px; } .owl-nav div:hover { background: #f98903; } ::-moz-selection { background: #b3d4fc; text-shadow: none } /* categorie slider navigation css end */ ::-moz-selection { background: #b3d4fc; text-shadow: none } ::selection { background: #b3d4fc; text-shadow: none } ::-webkit-input-placeholder { opacity: 1 !important; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100) } :-moz-placeholder { opacity: 1 !important; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100) } ::-moz-placeholder { opacity: 1 !important; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100) } :-ms-input-placeholder { opacity: 1 !important; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100) } /*----------------------------------------*/ /* 2.1 Header Top CSS /*----------------------------------------*/ .header-top .row { border-bottom: 1px solid rgba(255, 255, 255, 0.2) } .header-top-left ul span { color: #a5d6f7; font-size: 13px; } .header-top-left ul li a img { margin-right: 5px; } .header-top-left ul li a i { font-size: 9px; margin-left: 5px; } .header-top-left > ul > li, .header-top-right ul > li { display: inline-block; padding: 12px 0; } .header-bottom-list li > a i { margin-left: 5px; } .header-top-left ul > li > a, .header-top-right ul > li > a { color: #fff; font-size: 13px; padding: 0 15px 0 5px; } .header-top-left > ul > li:not(:last-child) a { margin-right: 10px; } .header-top-left > ul > li:first-child > a::after { background: rgba(255, 255, 255, 0.4) none repeat scroll 0 0; content: ""; height: 13px; position: absolute; right: 10px; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); width: 1px; } .header-top-right ul > li > a { padding: 0 15px; border-right: 1px solid rgba(255, 255, 255, 0.4); color: #fff; display: inline-block; font-size: 13px; font-weight: 400; line-height: 1; padding: 0 15px; text-decoration: none; text-transform: capitalize; } .header-top-right ul > li:last-child > a { border-right: none; padding-right: 0; } .header-top-right > ul > li > a:hover { text-decoration: underline; } .header-top-left > ul > li { position: relative; } .header-top-left ul.ht-dropdown{ left: auto; right: 10px; } .ht-dropdown { background: #fff; left: 0; opacity: 0; padding: 10px; position: absolute; top: 100%; -webkiit-transform: scaleY(0); -webkit-transform: scaleY(0); transform: scaleY(0); -webkit-transform-origin: 0 0 0; transform-origin: 0 0 0; width: 120px; visibility: hidden; z-index: 999; -webkit-transition: 0.5s; transition: 0.5s; -webkit-box-shadow: 0 0 6px 1px rgba(0, 0, 0, 0.1); -ms-box-shadow: 0 0 6px 1px rgba(0, 0, 0, 0.1); box-shadow: 0 0 6px 1px rgba(0, 0, 0, 0.1); } .header-top-left > ul > li:hover ul.ht-dropdown, .cart-box ul li:hover ul.ht-dropdown, .vertical-menu-list > li:hover ul.ht-dropdown, .header-bottom-list li:hover ul.ht-dropdown { opacity: 1; visibility: visible; -webkiit-transform: scaleY(1); -webkit-transform: scaleY(1); transform: scaleY(1); } .header-top-left ul > li:hover ul.ht-dropdown li { padding: 0; } .header-top-left ul > li ul.ht-dropdown li a { color: #2c2c2c; font-size: 13px; line-height: 30px; } .header-top-left ul > li ul.ht-dropdown li a:hover { color: #3498db; } /*----------------------------------------*/ /* 2.2 Header Middle CSS /*----------------------------------------*/ .categorie-search-box form { color: #a9a9a9; height: 48px; padding: 0; position: relative; width: 100%; } .categorie-search-box input { background: white none repeat scroll 0 0; border: 1px solid #fff; border-radius: 36px; color: #a9a9a9; font-size: 13px; height: 48px; padding: 0 60px 0 25px; width: 100%; } .categorie-search-box button { background: #f98903 none repeat scroll 0 0; border: 0 none; border-radius: 100%; color: white; font-size: 21px; height: 36px; line-height: 36px; padding: 0; position: absolute; right: 6px; text-align: center; top: 6px; -webkit-transition: all 300ms ease-in 0s; transition: all 300ms ease-in 0s; width: 36px; } .categorie-search-box button:focus { border: none; } .categorie-search-box button:hover { background: #3498DB; cursor: pointer; } .categorie-search-box .form-group { background: transparent none repeat scroll 0 0; display: inline-block; left: 0; margin: 0; position: absolute; top: 12px; width: 150px; } .bootstrap-select option { font-size: 13px; } .nice-select::after { margin-top: -3px; } .nice-select .current{ display: block; overflow: hidden; width: 100%; } .categorie-search-box .nice-select .list { height: 350px; overflow-y: auto; } .bootstrap-select { border-radius: 15px 0 0 15px; border-style: none solid none none; border-width: 0 1px 0 0; color: #777777; font-size: 13px; height: 25px; line-height: 25px; margin: 0; width: 150px; } .cart-box > ul > li { position: relative; } .cart-box-width { left: auto; right: 0; background: white; -webkit-box-shadow: 0 3px 9.3px 0.7px rgba(0, 0, 0, 0.15); box-shadow: 0 3px 9.3px 0.7px rgba(0, 0, 0, 0.15); padding: 0; width: 290px; } .cart-box-width > li { padding: 20px; } .cart-box > ul > li > a { color: #fff; } .cart-text { display: block; } .cart-box > ul > li > a i { font-size: 32px; } .my-cart { color: #ffffff; display: inline-block; font-size: 13px; font-weight: 400; margin-left: 40px; text-transform: capitalize; vertical-align: top; } .single-cart-box { margin-bottom: 18px; overflow: hidden; position: relative; } .cart-img { float: left; padding-right: 10px; position: relative; width: 35%; } .cart-img img { max-width: 100%; } .cart-content { float: left; padding: 0 15px 15px 0; width: 65%; } .cart-content h6 a { color: #666; display: block; font-size: 16px; line-height: 20px; overflow: hidden; overflow-wrap: break-word; text-overflow: ellipsis; text-transform: capitalize; white-space: nowrap; } .cart-content span { display: block; color: #777; font-size: 14px; line-height: 20px; } .cart-price { margin: 5px 0; } .cart-actions a { background: #2c2c2c none repeat scroll 0 0; border-radius: 5px; -webkit-box-shadow: none; box-shadow: none; color: white; display: inline-block; font-size: 14px; font-weight: 400; padding: 10px 20px; } .cart-checkout { background: #f26667 none repeat scroll 0 0; color: #fff; } .cart-checkout:hover { background-color: #3498db; border-color: transparent; color: #fff; } .del-icone { color: #666; position: absolute; right: 0; top: 0; z-index: 45; } .del-icone:hover, .cart-content h6 a:hover { color: #3498db; } .total-price { display: block; font-size: 15px; font-weight: 600; margin-top: 2px; } .wish-list-item { position: relative; padding-right: 30px; margin-right: 30px; } .wish-list-item::after { background-color: #ffffff; content: ""; height: 29px; opacity: 0.5; position: absolute; right: 0; top: -10px; width: 1px; } .icon-mypage { position: relative; padding-right: 30px; margin-right: 30px; } .icon-mypage .fa { font-size: 30px; } .icon-mypage::after { background-color: #ffffff; content: ""; height: 29px; opacity: 0.5; position: absolute; right: 0; top: -10px; width: 1px; } .total-pro { background: #f6745b none repeat scroll 0 0; border-radius: 100%; font-size: 12px; height: 20px; left: 40px; line-height: 20px; position: absolute; text-align: center; top: 7px; width: 20px; } .single-cart-box, .price-content { border-bottom: 1px solid #ededed; margin-bottom: 20px; } .price-content { overflow: hidden; padding-bottom: 20px; } .price-content li { color: #333; font-size: 16px; font-weight: 500; line-height: 1.5; } .price-content li span, .cart-content span.cart-price { color: #3498db; float: right; font-size: 16px; font-weight: 500; } .cart-content span.cart-price { float: none; } .pro-quantity { background: #3498db none repeat scroll 0 0; border-radius: 100%; color: white; font-size: 16px; left: 5px; line-height: 23px; min-width: 25px; padding: 2px 0 0; position: absolute; text-align: center; top: 3px; } /*----------------------------------------*/ /* 2.3 Header Bottom CSS /*----------------------------------------*/ .header-sticky.sticky { -webkit-transition: all 300ms ease-in 0s; transition: all 300ms ease-in 0s; -webkit-box-shadow: 0 8px 6px -6px rgba(0, 0, 0, 0.4); box-shadow: 0 8px 6px -6px rgba(0, 0, 0, 0.4); left: 0; position: fixed; right: 0; top: 0; z-index: 1049; } .header-bottom-list > li { position: relative; } /* header bottom dropdown menu css start */ .header-bottom-list > li > a, .header-bottom-list > li > ul.ht-dropdown li a { color: #ffffff; display: block; font-size: 15px; font-weight: 500; padding: 20px; position: relative; text-transform: uppercase; } .header-bottom-list > li > ul.ht-dropdown li a { color: #666; padding: 10px; font-size: 14px; font-weight: 400; text-transform: capitalize; } .header-bottom-list > li > ul.ht-dropdown li:hover a { color: #3498db; } .header-bottom-list > li > ul.ht-dropdown { width: 200px; } /* header bottom dropdown menu css end */ .header-bottom-list > li.active > a, .header-bottom-list > li:hover > a { background: #3498db; } .header-right { color: #fff; font-weight: normal; } .header-right i { font-size: 23px; margin-right: 15px; vertical-align: middle; } .header-helpline { font-size: 15px; font-weight: 600; } /*----------------------------------------*/ /* 2.4 Vertical Mobile Menu CSS /*----------------------------------------*/ #cate-mobile-toggle { height: 265px; overflow-y: auto; } #cate-mobile-toggle > ul > li > a { font-size: 15px; } #cate-mobile-toggle .category-sub > li > a:after { content: "\f125"; font-family: "Ionicons"; font-size: 9px; position: absolute; left: 10px; color: #f98903; } #cate-mobile-toggle .category-sub li a { padding-left: 20px; } /*----------------------------------------*/ /* 3.1 Categorie Menu CSS /*----------------------------------------*/ .vertical-menu { position: relative; } .vertical-menu-list { background: #fff none repeat scroll 0 0; left: 0; padding: 10px 0; position: absolute; top: 100%; width: 100%; z-index: 99; border: 1px solid #ededed; border-top-width: 0; } .vertical-menu-list li { position: relative; } .vertical-menu-list > li a { background: #fff none repeat scroll 0 0; color: #2c2c2c; display: block; font-size: 14px; font-weight: 400; line-height: 28px; overflow: hidden; overflow-wrap: break-word; padding: 5px 20px; position: relative; text-transform: capitalize; cursor: pointer } .vertical-menu-list li:hover > a { color: #3498db; } .vertical-menu-list > li > a i { position: absolute; right: 14px; top: 15px; } .vertical-menu-list li.has-sub > a { padding-left: 60px; } .category-menu > ul > li > ul.category-sub { display: none; } .vertical-menu-list li span { display: inline-block; margin-right: 10px; width: 30px; } .vertical-menu > span { background: #f98903 none repeat scroll 0 0; color: white; cursor: pointer; display: block; font-size: 18px; font-weight: 600; height: 55px; line-height: 58px; overflow: hidden; padding-left: 45px; position: relative; text-transform: uppercase; } .vertical-menu > span::after { content: ""; font-family: "Ionicons"; font-size: 27px; font-weight: normal; left: 16px; position: absolute; } /* vertical mega menu css start */ .megamenu { background: #fff none repeat scroll 0 0; border: 1px solid #e5e5e3; -webkit-box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.2); box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.2); left: 100%; padding: 20px 35px; top: 0; } .vertical-menu-list > li ul.first-megamenu { width: 700px; } .vertical-menu-list > li ul.megamenu-two { width: 440px; } .vertical-menu-list > li ul.megamenu-two li.single-megamenu { width: 50%; } .vertical-menu-list .ht-dropdown:before { background-color: #fff; border-color: #f1f1f1 transparent transparent #f1f1f1; -o-border-image: none; border-image: none; border-style: solid; border-width: 1px; content: ""; display: block; height: 15px; left: -8px; position: absolute; top: 15px; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); width: 15px; } .vertical-menu-list .ht-dropdown { display: -moz-flex; display: -ms-flex; display: -o-flex; display: -webkit-box; display: -ms-flexbox; display: flex; } .first-megamenu li.single-megamenu > ul { padding-bottom: 25px; } .megamenu-img img { width: 100%; margin-top: 40px; } li.megamenu-img a { padding: 0; } .first-megamenu li.megamenu-img { -ms-flex-preferred-size: 40%; flex-basis: 40%; } .first-megamenu li.single-megamenu { -ms-flex-preferred-size: 30%; flex-basis: 30%; } .single-megamenu ul li a { color: #666; font-size: 14px; font-weight: 400; line-height: 30px; padding: 0; text-transform: capitalize; } .menu-tile { color: #2c2c2c; display: block; font-size: 16px; font-weight: 500; line-height: 20px; margin-bottom: 15px; text-transform: uppercase; } /*----------------------------------------*/ /* 3.2 Slider CSS /*----------------------------------------*/ .slider-wrapper.theme-default { position: relative; } .nivo-caption { background: transparent none repeat scroll 0 0; opacity: 1; overflow: visible; padding: 0; } .nivo-directionNav a { background: rgba(51, 51, 51, 0.3) none repeat scroll 0 0; border-radius: 100%; cursor: pointer; display: block; height: 40px; line-height: 40px; opacity: 0; position: absolute; text-align: center; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); -webkit-transition: none 0s ease 0s; transition: none 0s ease 0s; width: 40px; z-index: 8; -webkit-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } .nivo-directionNav a:hover { background: #333; } .nivo-directionNav a i { color: #fff; } .nivo-directionNav a.nivo-prevNav { left: 10px; } .nivo-directionNav a.nivo-nextNav { right: 10px; } .slider-wrapper:hover .nivo-directionNav a.nivo-prevNav { left: 20px; opacity: 1; } .slider-wrapper:hover .nivo-directionNav a.nivo-nextNav { opacity: 1; right: 20px; } .nivo-controlNav { bottom: 15px; padding: 0; position: absolute; width: 100%; z-index: 12; } .nivo-controlNav a { background: #fff none repeat scroll 0 0; border-radius: 10px; cursor: pointer; display: inline-block; height: 10px; font-size: 0; margin: 0 4px; position: relative; text-align: center; -webkit-transition: all 300ms ease-in 0s; transition: all 300ms ease-in 0s; width: 10px; z-index: 8; } .nivo-controlNav a.active { width: 32px; background: #3498db; } .slider-progress { -webkit-animation: 4300ms ease-in-out 0s normal none 1 running timebar; animation: 4300ms ease-in-out 0s normal none 1 running timebar; background: rgba(49, 56, 72, 0.298); height: 5px; left: 0; opacity: 0.8; position: absolute; top: 0; z-index: 4; } @-webkit-keyframes timebar { 0% { width: 0; } 100% { width: 100%; } } @keyframes timebar { 0% { width: 0; } 100% { width: 100%; } } @keyframes timebar { 0% { width: 0; } 100% { width: 100%; } } /*----------------------------------------*/ /* 3.3 All Banner CSS /*----------------------------------------*/ .single-banner img { width: 100%; } .single-banner img, .sidebar-banner img { width: 100%; } .right-sider-banner .single-banner:not(:last-child) { margin-bottom: 30px; } .single-banner, .sidebar-banner { position: relative; } .single-banner::before { -webkit-box-shadow: 0 0 0 10px rgba(255, 255, 255, 0.7) inset; box-shadow: 0 0 0 10px rgba(255, 255, 255, 0.7) inset; content: ""; left: 0; top: 0; right: 0; bottom: 0; opacity: 0; position: absolute; pointer-events: none; -webkit-transition: all 300ms ease-in 0s; transition: all 300ms ease-in 0s; } .single-banner:hover:before { opacity: 1; } /*----------------------------------------*/ /* 4. Brand Banner Area CSS /*----------------------------------------*/ .brand-banner .single-brand img { max-height: 56px; margin: 0 auto; width: auto; overflow: hidden; -webkit-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } .brand-banner .single-brand img:hover { -webkit-transform: scale(1.05); transform: scale(1.05); } .brand-banner { background: #fff none repeat scroll 0 0; border: 1px solid #ededed; padding: 20px; position: relative; } .brand-banner .owl-nav div, .thumb-menu .owl-nav div { -webkit-transform: scale(0) translateY(-50%); transform: scale(0) translateY(-50%); top: 50%; left: 15px; } .brand-banner:hover .owl-nav div, .thumb-menu:hover .owl-nav div { -webkit-transform: scale(1) translateY(-50%); transform: scale(1) translateY(-50%); } .brand-banner .owl-nav div.owl-next, .thumb-menu .owl-nav div.owl-next { left: auto; right: 15px; } .actress-banner { background: #fff none repeat scroll 0 0; border: 1px solid #ededed; padding: 20px 20px 0 20px; position: relative; } .actress-banner .single-actress { text-align: center; padding-bottom: 20px; } .actress-banner .single-actress img { max-height: 80px; margin: 0 auto; width: auto; overflow: hidden; -webkit-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } .actress-banner .single-actress img:hover { -webkit-transform: scale(1.05); transform: scale(1.05); } /*----------------------------------------*/ /* 5. Hot Deal Products CSS /*----------------------------------------*/ .hot-deal-active .owl-nav div, .second-hot-deal-active .owl-nav div, .new-pro-two-active .owl-nav div { right: 35px; } .hot-deal-active .owl-nav div.owl-next, .second-hot-deal-active .owl-nav div.owl-next, .new-pro-two-active .owl-nav div.owl-next { left: auto; right: 0; } .main-hot-deal { margin-left: -30px; } .hot-deal-products .post-title h2, .second-hot-deal .post-title h2, .new-pro-two .post-title h2 { background: transparent none repeat scroll 0 0; color: #2c2c2c; font-size: 24px; padding: 15px 0; } .hot-deal-active { -moz-border-bottom-colors: none; -moz-border-left-colors: none; -moz-border-right-colors: none; -moz-border-top-colors: none; background: #fff none repeat scroll 0 0; border-color: currentcolor #ededed #ededed; -o-border-image: none; border-image: none; border-style: none solid solid; border-width: 0 1px 1px; padding: 20px 20px 0; } .single-product { background: #fff none repeat scroll 0 0; position: relative; -webkit-transition: all 0.5s ease-in-out 0s; transition: all 0.5s ease-in-out 0s; } .product-summary { } .product-summary p { margin: 0px; padding: 10px; font-size: 14px; max-height: 8.2em !important; overflow-y: auto; border: 1px solid #ededed; } .pro-img { position: relative; } .pro-img img { -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-transition: all 0.5s ease-in-out 0s; transition: all 0.5s ease-in-out 0s; width: 100%; } .pro-img .secondary-img { left: 0; opacity: 0; position: absolute; top: 0; z-index: 3; } .single-product:hover .pro-img .secondary-img { opacity: 1; } .countdown { background: #f2f2f2 none repeat scroll 0 0; bottom: 0; display: flex; justify-content: space-around; left: 0; padding: 5px 0; position: absolute; text-align: center; width: 100%; z-index: 12; } .count { color: #333; font-weight: 700; text-align: center; } .count p { color: #333333; font-size: 13px; font-weight: 600; } .count span { color: #9997a0; display: block; font-size: 10px; font-weight: normal; line-height: 14px; text-transform: capitalize; } .pro-content { padding: 20px 5px; position: relative; } .pro-content h4 a { color: #666; display: block; font-size: 14px; font-weight: 400; line-height: 20px; margin-bottom: 9px; overflow: hidden; padding: 0; text-overflow: ellipsis; text-transform: capitalize; white-space: nowrap; } .pro-content h4 a:hover { color: #3498db; } .pro-content .product-rating { margin-bottom: 13px; } .product-rating i { color: #f9ba48; font-size: 12px; } .price { color: #c62727; font-size: 18px; font-weight: 600; padding-right: 8px; } .prev-price { color: #999; font-size: 14px; font-weight: 400; } .pro-actions { display: -moz-flex; display: -ms-flex; display: -o-flex; display: -webkit-box; display: -ms-flexbox; display: flex; width: 100%; } .single-product:hover .actions-secondary a { -webkit-transform: scale(1); transform: scale(1); opacity: 1; } .single-product .pro-info { -webkit-transition: all 300ms ease-in 0s; transition: all 300ms ease-in 0s; } .single-product:hover .pro-info { opacity: 0; } .actions-secondary { display: -moz-flex; display: -ms-flex; display: -o-flex; display: -webkit-box; display: -ms-flexbox; display: flex; } .actions-primary, .actions-secondary { margin-top: 10px; } .actions-primary a, .actions-secondary a { background: #3498db none repeat scroll 0 0; border-radius: 2px; color: #fff; display: block; font-size: 12px; height: 30px; line-height: 30px; position: relative; text-align: center; -webkit-transition: all 400ms ease-in 0s; -ms-transition: all 400ms ease-in 0s; -transition: all 400ms ease-in 0s; transition: all 400ms ease-in 0s; width: 100px; } .actions-primary a:hover, .actions-secondary a:hover { background: #f98903; color: #fff; border-color: #f98903; } .actions-secondary a { width: 30px; margin-left: 5px; background: transparent; border: 1px solid #3498db; color: #3498db; -webkit-transform: scale(0.6); transform: scale(0.6); } .actions-primary a::before, .add-cart:before { content: ""; font-family: "Ionicons"; font-size: 16px; line-height: 1; margin-right: 6px; } .actions-primary a.disabled { color: #fff; background-color: #6c757d; border-color: #6c757d; opacity: .5; cursor: not-allowed; } .actions-primary a.disabled:hover, .actions-secondary a.disabled:hover { background: #6c757d; border-color: #6c757d; } /*----------------------------------------*/ /* 6. Ranking Products CSS /*----------------------------------------*/ .main-product-tab-area { background: #fff none repeat scroll 0 0; border: 1px solid #ededed; margin-left: -30px; border-left: none; border-top: none; } .tabs-area { border-bottom: 1px solid #ededed; } .tabs-area li { display: inline-block; margin-left: 30px; vertical-align: top; } .tabs-area li a { color: #2c2c2c; display: block; font-size: 13px; line-height: 25px; padding: 15px 0; position: relative; text-transform: capitalize; z-index: 1; } .tabs-area li a.active { color: #ea7954; } .main-product-tab-area .owl-item, .second-hot-deal-active .owl-item { border-right: 1px solid #ededed; } .main-product-tab-area .owl-item.last, .second-hot-deal-active .owl-item.last { border-right: none; } .main-product-tab-area .double-product .single-product:first-child, .second-hot-deal-active .double-product .single-product:first-child { border-bottom: 1px solid #ededed; } .main-product-tab-area .single-product { padding: 20px; overflow: hidden; } .main-product-tab-area .single-product .pro-img { float: right; margin-left: 10px; max-width: 180px; width: 41%; overflow: hidden; position: relative; } .main-product-tab-area .single-product .pro-content { padding: 32px 0; } .actions-secondary a { opacity: 1; -webkit-transform: scale(1); transform: scale(1); } .main-product-tab-area .single-product .pro-actions { margin-top: 21px; position: static; } /*----------------------------------------*/ /* 7. New & Featured Products CSS /*----------------------------------------*/ .main-pro-wrapper { position: relative; } .new-products-active { -moz-border-bottom-colors: none; -moz-border-left-colors: none; -moz-border-right-colors: none; -moz-border-top-colors: none; background: #fff none repeat scroll 0 0; border-color: currentcolor #ededed #ededed; -o-border-image: none; border-image: none; border-style: none solid solid; border-width: medium 1px 1px; padding: 20px; padding-bottom: 0; } .main-pro-wrapper .owl-carousel, .owl-carousel .owl-item { position: static; } .new-products-active .owl-nav div { top: 13px; } /*----------------------------------------*/ /* 8. Support Area CSS /*----------------------------------------*/ .support-area .col-sm-12 { background: #fff none repeat scroll 0 0; border: 1px solid #ededed; } .support-area .single-support { padding: 35px 30px; } .support-icon { text-align: center; width: 60px; } .support-icon i { color: #f98903; font-size: 45px; line-height: 50px; margin-right: 15px; } .support-desc h6 { color: #3498db; font-size: 18px; font-weight: 600; } .support-desc span { color: #777; font-size: 14px; font-weight: 400; } /*----------------------------------------*/ /* 9. Newsletter CSS /*----------------------------------------*/ .newsletter { padding: 35px 0; } .news-desc h3 { color: #fff; font-size: 24px; font-weight: 600; line-height: 1; margin: 0 0 10px; text-transform: uppercase; } .news-desc p { color: #fff; font-size: 16px; font-weight: 300; line-height: 1; } .newsletter-box .subscribe { background: #fff none repeat scroll 0 0; border: 0 none; border-radius: 25px; color: #777; display: block; font-size: 13px; height: 50px; padding: 10px 140px 10px 20px; width: 100%; } .newsletter-box { position: relative; } .newsletter-box .submit { background: #f98903 none repeat scroll 0 0; border: 0 none; border-radius: 25px; -webkit-box-shadow: none; box-shadow: none; color: #fff; font-size: 14px; font-weight: 700; height: 50px; line-height: 50px; padding: 0 20px; position: absolute; right: 0; text-transform: uppercase; top: 0; -webkit-transition: all 300ms ease-in 0s; transition: all 300ms ease-in 0s; cursor: pointer; } .newsletter-box .submit:hover { background: #333333; } /*----------------------------------------*/ /* 10. Footer CSS /*----------------------------------------*/ /* footer top css */ .footer-top { padding-bottom: 20px; } .footer-title { color: #333; font-size: 16px; font-weight: 600; line-height: 34px; margin: 0 0 15px; position: relative; text-transform: uppercase; } .footer-list li a { color: #666; display: block; font-size: 13px; font-weight: 400; padding-left: 15px; position: relative; text-transform: capitalize; } .footer-list li { line-height: 31px; } .footer-list li a:before { content: "\f105"; font-family: FontAwesome; position: absolute; left: 0; top: 0; font-size: 14px; } .footer-list li a:hover { color: #3498db; padding: 0; } .footer-list li a:hover:before { opacity: 0; } .logo-footer { margin-bottom: 30px; } .footer-content p { font-size: 13px; line-height: 23px; } .footer-content h5 { color: #333; font-size: 16px; font-weight: 500; margin-top: 15px; } .social-footer-list a { color: #b2b2b1; display: inline-block; font-size: 22px; line-height: 30px; } .social-footer-list a:not(:last-child) { margin-right: 30px; } .social-footer-list a:hover { color: #3498db; } .single-footer.style-change { padding-left: 40px; } /* footer middle css */ .footer-middle-content { border-top: 1px solid #ededed; } .tag-content a { border-right: 1px solid #adadad; color: #666; display: inline-block; font-size: 13px; font-weight: 400; line-height: 1; margin-bottom: 10px; padding: 0 5px; } .tag-content a:last-child { border-right: none; } /* footer bottom css */ .footer-bottom-content p { color: #666; font-size: 14px; } .footer-bottom-content p a { color: #3498db; } .footer-bottom-content p a:hover, .tag-content a:hover { text-decoration: underline; } .footer-nav-list li { display: inline-block; } .footer-nav-list li a { color: #666; display: block; font-size: 14px; line-height: 1; margin: 0; padding-left: 30px; text-transform: uppercase; } .footer-nav-list li a:hover, .tag-content a:hover { color: #3498db; } .footer-nav-list li:first-child a { padding-left: 0; } #scrollUp { background: #333 none repeat scroll 0 0; bottom: 65px; color: #fff; cursor: pointer; font-weight: 600; height: 40px; position: fixed; right: 30px; text-align: center; text-transform: uppercase; width: 40px; z-index: 999; } #scrollUp:hover { background: #3498db; } #scrollUp i { font-size: 25px; line-height: 40px; } /*----------------------------------------*/ /* 11. Home-2 CSS /*----------------------------------------*/ .header-top-two .row { border-bottom: none; } .header-top-two { border-bottom: 1px solid #e8e8e8; } .header-bottom-two .header-bottom-list > li.active > a, .header-bottom-two .header-bottom-list > li:hover > a { background: transparent; color: #2c2c2c; } .vertical-menu-two > span { height: 60px; line-height: 60px; position: relative; } .vertical-menu > span > i { position: absolute; right: 15px; font-size: 20px; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); } /* hot deal product css */ .second-hot-deal-active .single-product { padding: 20px; overflow: hidden; } .second-hot-deal-active .single-product .pro-img { float: left; margin-right: 30px; max-width: 180px; width: 41%; } .second-hot-deal-active .single-product .pro-content { padding: 33px 0; } .second-hot-deal-active .single-product .countdown { background: rgba(0, 0, 0, 0) none repeat scroll 0 0; margin-top: 12px; position: static; transition: all 300ms ease-in 0s; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; } .second-hot-deal-active .single-product:hover .countdown { opacity: 0; } .second-hot-deal-active .single-product .countdown .count { display: -moz-flex; display: -ms-flex; display: -o-flex; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin-left: 0; } .second-hot-deal-active .single-product .countdown .count:not(:last-child){ margin-right: 10px; } .second-hot-deal-active .single-product .countdown .count p { background: #666666 none repeat scroll 0 0; color: #ffffff; height: 35px; line-height: 35px; padding: 0 5px; border-radius: 5px 0 0 5px; } .second-hot-deal-active .single-product .countdown .count span { background: #444444 none repeat scroll 0 0; border-radius: 0 5px 5px 0; height: 35px; line-height: 35px; padding: 0 5px; color: #fff; } .second-hot-deal-active .single-product .pro-actions { top: 87px; } .second-hot-deal-active, .new-pro-two-active, .featured-pro-active, .more-fearured-pro-active { border: 1px solid #ededed; background: #fff; } /* new-pro-active css */ .new-pro-two-active .single-product, .featured-pro-active .owl-item, .more-fearured-pro-active .single-product { padding: 20px; padding-bottom: 1px; } .border-one .post-title h2, .border-two .post-title h2, .border-three .post-title h2, .border-four .post-title h2 { background: transparent; border-right: 1px solid #ededed; border-top: 2px solid #3498db; color: #3498db; } .border-two .post-title h2 { border-top: 2px solid #3EBD81; color: #3EBD81; } .border-three .post-title h2 { border-top: 2px solid #A71053; color: #A71053; } .border-four .post-title h2 { border-top: 2px solid #118AA3; color: #118AA3; } .border-one .post-title h2 i { background: #EA7954; } .border-two .post-title h2 i { background: #3EBD81; } .border-three .post-title h2 i { background: #A71053; } .border-four .post-title h2 i { background: #118AA3; } /*----------------------------------------*/ /* 12. Home-3 CSS /*----------------------------------------*/ /* header css */ .header-bottom-three .header-bottom-list > li > a { color: #ffffff; display: block; font-size: 15px; font-weight: 500; padding: 20px; position: relative; text-transform: capitalize; } .header-bottom-three .header-bottom-list > li.active > a, .header-bottom-three .header-bottom-list > li:hover > a { background: #4c5374; } .home-style-theree-menu ul.ht-dropdown.megamenu { display: -moz-flex; display: -ms-flex; display: -o-flex; display: -webkit-box; display: -ms-flexbox; display: flex; } .home-style-theree-menu ul.ht-dropdown.big-megamneu { width: 800px; } .home-style-theree-menu ul.ht-dropdown.megamenu-two { width: 400px; } .home-style-theree-menu ul.ht-dropdown.big-megamneu > li { -ms-flex-preferred-size: 25%; flex-basis: 25%; } .home-style-theree-menu ul.ht-dropdown.megamenu-two > li { width: 50%; } .home-style-theree-menu ul.ht-dropdown { left: 0; top: 100%; } .header-bottom-list > li > ul.ht-dropdown.megamenu li a { color: #666666; font-size: 14px; font-weight: 400; line-height: 30px; padding: 0; text-transform: capitalize; } .header-bottom-list > li > ul.ht-dropdown.megamenu li a:hover { color: #fdda1b; } /* hot deal products */ .hot-deal-three .post-title h2 { background: #3a3f5a; color: #fff; padding: 15px; } .hot-deal-three-active .single-product { padding: 20px 20px 17px; } .hot-deal-three-active .single-product .pro-content { padding: 19px 0 12px 0; } .hot-deal-three-active .single-product .countdown { background: transparent; margin-top: 20px; padding: 0; position: static; text-align: left; width: 100%; } .hot-deal-three-active .single-product .countdown .count { margin: 0; background: #f2f2f2; } .hot-deal-three-active .single-product .countdown .count p { height: 30px; line-height: 30px; width: 57px; } .hot-deal-three-active .single-product .countdown .count span { background: #cdcdcd none repeat scroll 0 0; color: #555555; padding: 5px; } /* featured products */ .second-featured-products .post-title h2, .latest-blog .post-title h2 { background: #4c5374 none repeat scroll 0 0; display: block; max-width: 270px; } .second-featured-products .post-title { border-right: 1px solid #ededed; background: #fff; } .carousel-style-two .owl-nav div { width: 20px; right: 40px; background: transparent; } .carousel-style-two .owl-nav div.owl-next { left: auto; right: 20px; } .carousel-style-two .post-title h2 i, .second-featured-products .post-title h2 i, .latest-blog .post-title h2 i { background: none; margin-right: 0; } /* carousel style two */ .carousel-style-two .owl-nav div:hover { background: transparent; } /* categories product css */ .single-cat-pro-active, .single-cat-pro-two-active { border: 1px solid #ededed; } .categories-item .post-title h2 { background: #4c5374; } .single-cat-pro-active .pro-img { float: left; width: 100px; margin-right: 30px; } .single-cat-pro-active .owl-item, .single-cat-pro-two-active .owl-item { padding: 19px; padding-bottom: 0; background: #fff; } .single-cat-pro-active .single-product .pro-info { opacity: 1; } /*----------------------------------------*/ /* 13. Home-4 CSS /*----------------------------------------*/ .home-style-four { background: #fff; } /* categorie product css */ .categore-slider-active { background: #fff; border: 1px solid #ededed; padding: 20px; } .categore-slider-active .cat-img { margin-right: 30px; } .categore-slider-active .single-categorie { display: -moz-flex; display: -ms-flex; display: -o-flex; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .categore-slider-active .cat-content { overflow: hidden; } .cat-content h4 a { color: #2c2c2c; display: block; font-size: 16px; font-weight: 400; line-height: 20px; margin-bottom: 10px; text-transform: capitalize; -webkit-transition: all 300ms ease-in 0s; transition: all 300ms ease-in 0s; } .all-pro { color: #0b79bf; display: block; font-size: 12px; font-weight: 400; line-height: 20px; text-transform: capitalize; -webkit-transition: all 300ms ease-in 0s; transition: all 300ms ease-in 0s; } .all-pro:hover { text-decoration: underline; } /* our products css */ .main-pro-area { border: 1px solid #ededed; border-bottom: none; } .main-pro-area .post-title h2, .more-featured-pro .post-title h2, .latest-blog .post-title h2 { background: #ea7954; color: #ffffff; } .main-pro-area .post-title h2 i { background: none; margin-right: 0; } .out-products .tabs-area { background: #f3f3f3 none repeat scroll 0 0; border-bottom: medium none; margin-left: -35px; } .out-products .tabs-area li a { font-size: 14px; } .out-products .tabs-area li a.active { color: #0b79bf; } /* categoreis item two */ .categories-item-two .post-title h2 { background: #0b79bf; } .categories-item-two .single-cat-pro-active .pro-img { float: none; margin-right: 0; width: auto; } .categories-item-two .single-cat-pro-active .single-product:hover .pro-info { opacity: 0; } /* featured pro */ .more-featured-pro .post-title { border: 1px solid #ededed; border-bottom: none; background: #f3f3f3; } .more-fearured-pro-active .double-product .single-product:first-child { border-bottom: 1px solid #ededed; } /*----------------------------------------*/ /* 14. Blog CSS /*----------------------------------------*/ .latest-blog .post-title { background: #f3f3f3 none repeat scroll 0 0; border: 1px solid #ededed; border-bottom: none; } .latest-blog-active { background: #fff; padding: 20px; border: 1px solid #ededed; } .blog-desc h4 a { position: relative; } .blog-desc h4 a:before { background: #ededed none repeat scroll 0 0; bottom: 0; content: ""; height: 1px; left: 0; position: absolute; width: 55px; } .blog-desc h4 a { color: #2c2c2c; display: block; font-size: 16px; font-weight: 600; line-height: 30px; margin-bottom: 15px; padding: 10px 0; position: relative; text-transform: capitalize; } .blog-desc h4 a:hover, .blog-desc li a:hover { color: #3498db; } .blog-desc li a { color: #666666; display: inline-block; font-size: 13px; line-height: 25px; margin-right: 20px; text-transform: capitalize; } .blog-desc li { color: #666666; display: inline-block; font-size: 13px; line-height: 25px; margin-right: 20px; text-transform: capitalize; } .blog-desc li i { margin-right: 5px; } .blog-img { position: relative; } .blog-img img, .sidebar-img img { width: 100%; } .blog-img:before { content: ""; background-color: rgba(0, 0, 0, 0.4); height: 100%; left: 0; opacity: 0; position: absolute; top: 0; -webkit-transform: scale(0.8); transform: scale(0.8); -webkit-transition: all 0.4s ease 0s; transition: all 0.4s ease 0s; width: 100%; z-index: 15; pointer-events: none; } .blog-img:hover:before { opacity: 1; -webkit-transform: scale(1); transform: scale(1); } .main-blog, .single-sidebar-desc { background: #ffffff none repeat scroll 0 0; -webkit-box-shadow: 1px 1px 5px 0 #ececec; box-shadow: 1px 1px 5px 0 #ececec; padding: 20px; } .blog-pagination { text-align: center; } .blog-pagination li { display: inline-block; margin-right: 1px; } .blog-pagination li a { background: #ffffff none repeat scroll 0 0; border: 1px solid #e7e7e7; display: block; font-size: 16px; height: 38px; line-height: 38px; text-align: center; min-width: 38px; padding: 0 5px; color: #444; } .blog-pagination li.active a, .blog-pagination li a:hover { background: #f6745b none repeat scroll 0 0; color: #ffffff; } /*------------------------*/ /* Single Blog CSS /*-----------------------*/ .single-sidebar-desc { -webkit-box-shadow: 1px 1px 5px 5px #ececec; box-shadow: 1px 1px 5px 5px #ececec; } .single-sidebar .e-title { background: #f6745b; } .single-sidebar li a:hover { color: #f6745b; } .latest-pro .e-title { background: #f98903; } .latest-pro li a:hover { color: #f98903; } .sidebar-post-content { padding: 32px 0 25px; } .sidebar-lg-title { font-size: 38px; font-weight: 700; margin-bottom: 15px; text-transform: uppercase; } .post-meta li { border-right: 1px solid #999999; font-size: 20px; margin-right: 20px; padding-right: 20px; text-transform: uppercase; } .post-meta li span { color: #999999; } .sidebar-desc p { line-height: 26px; } .sidebar-desc blockquote { background: #f7f7f7 none repeat scroll 0 0; border-left: 3px solid #f6745b; padding: 30px; } .sidebar-desc blockquote p { color: #707070; font-size: 16px; line-height: 26px; margin-bottom: 10px; } .sidebar-desc blockquote span { color: #555555; font-size: 16px; font-weight: 500; } .leave-reply { font-size: 18px; font-weight: 700; } .submit-review label { font-size: 14px; text-transform: capitalize; color: #555; } .tag-list li { display: inline-block; } .tag-list { margin: 0 -5px; } .tag-list li a { background-color: #f6f6f6; border-radius: 5px; display: inline-block; font-size: 12px; letter-spacing: 1px; margin: 5px; padding: 7px 16px; text-transform: capitalize; color: #444; } .tag-list li a:hover { background: #f98903; color: #fff; } /*----------------------------------------*/ /* 15. Breadcrumb CSS /*----------------------------------------*/ .breadcrumb-area .breadcrumb { background-color: #f1f1f1; margin-bottom: 0; padding: 15px ; } .breadcrumb li + li::before { content: " > "; padding: 0 5px; vertical-align: middle; } .breadcrumb li a { color: #333333; font-size: 14px; line-height: 25px; margin-right: 5px; text-transform: capitalize; } .breadcrumb-area .breadcrumb li.active a, .breadcrumb li:hover a { color: #3498db; } .radio-button .radio-inline { margin-right: 10px; } .form-register .radio-inline input { margin-right: 5px; } .terms span { font-size: 14px; } /*----------------------------------------*/ /* 16. Product Details CSS /*----------------------------------------*/ .main-product-thumbnail .tab-content img, .product-thumbnail .thumb-menu div img { width: 100%; } .thumb-menu.owl-carousel .owl-item a { border: 1px solid #ededed; display: block; } .thumb-menu.owl-carousel .owl-item a.active { border-color: #f98903; } .product-thumbnail .thumb-menu .nav-link { padding: 0; } .thumb-bg { background: #fff; padding: 20px; border: 1px solid #ededed; } .thumb-bg .tabs-area { border-bottom: none; } .thumb-menu .owl-stage-outer { margin: 0 -1px; } .thumb-menu .owl-nav div { left: 0; width: 20px; height: 20px; line-height: 20px; } .thumb-menu .owl-nav div.owl-next { right: 0; } /*--------------------------------- thumb product css start -----------------------------------*/ .product-header { color: #666666; font-size: 24px; font-weight: 500; line-height: 1.5em; margin: 0 0 15px; text-transform: capitalize; } .rating i, .review-list i { color: #F39C11; font-size: 14px; } .rating-feedback a { color: #999999; display: inline-block; font-size: 12px; margin-top: 20px; text-transform: capitalize; } .rating-feedback a:hover { color: #5D9CEC; } .pro-desc-details { color: #666666; font-size: 14px; line-height: 25px; } .pro-price span:not(:last-child) { margin-right: 15px; } .pro-price .price { font-size: 30px; font-weight: 600; line-height: 30px; } .pro-price .prev-price { font-size: 20px; } .prev-price { color: #555555; display: inline-block; font-size: 16px; font-weight: 400; text-decoration: line-through; } .saving-price { background: #e75768 none repeat scroll 0 0; color: #ffffff; display: inline-block; font-size: 13px; font-weight: 400; height: 30px; line-height: 30px; padding: 0 15px; text-align: center; text-transform: uppercase; vertical-align: top; } .product-size .nice-select{ padding-right: 40px; } .product-size .nice-select .option{ padding-right: 36px; } .product-size label, .color label { color: #2c2c2c; margin-bottom: 5px; text-transform: capitalize; display: block; } .product-size select, .quantity { background-color: #ffffff; border: 1px solid rgba(0, 0, 0, 0.25); -webkit-box-shadow: 2px 2px 4px 0 rgba(0, 0, 0, 0.2); box-shadow: 2px 2px 4px 0 rgba(0, 0, 0, 0.2); color: #7a7a7a; width: 70px; } .quantity { padding: 11px; } .add-cart { background-color: #ff6d02; border-radius: 2px; color: #ffffff; display: inline-block; font-size: 14px; font-weight: 400; height: 46px; line-height: 46px; padding: 0 15px; text-transform: capitalize; } .add-cart:hover { background: #f98903; color: #fff; } .add-wishlist { margin-left: 10px; width: 46px; height: 46px; line-height: 46px; text-align: center; background: transparent; border: 1px solid #f6745b; color: #f6745b; font-size: 22px; } .add-wishlist:hover { background: #f98903; color: #fff; } .color-list li { display: inline-block; } .color-list li a { border: 2px solid transparent; height: 22px; margin: 0 8px 10px 0; -webkit-transition: all 0.3s ease 0s; transition: all 0.3s ease 0s; width: 22px; display: block; } .color-list li a.active, .color-list li a:hover { border-color: #333333; } .color-list li a.orange { background: #F39C11; } .color-list li a.paste { background: #5D9CEC; } .in-stock { color: #666666; font-size: 14px; font-weight: 500; text-transform: capitalize; } .in-stock i { font-size: 16px; margin-right: 5px; color: #4CBB76; } .socila-sharing li { color: #999999; line-height: 1; margin-right: 20px; white-space: normal; } .socila-sharing li a { color: #999999; } .socila-sharing li a:hover { color: #5D9CEC; } .product-policy p { padding: 15px 0; color: #999; } .product-policy p i { color: #333333; font-size: 20px; margin-right: 15px; vertical-align: middle; } /*--------------------------------- product description start -----------------------------------*/ .thumnail-desc .tabs-area { border-bottom: none; } .main-thumb-desc.tabs-area > li { margin-left: 0; } .main-thumb-desc.tabs-area > li > a { color: #666666; display: inline-block; font-size: 18px; font-weight: 600; line-height: 22px; padding: 15px; text-transform: uppercase; -webkit-transition: all 300ms ease-in 0s; transition: all 300ms ease-in 0s; } .main-thumb-desc li a.active { background: #f98903 none repeat scroll 0 0; color: #ffffff; } .thumnail-desc .tab-content { background: #ffffff none repeat scroll 0 0; border: 1px solid #ededed; overflow: hidden; padding: 30px 20px; } .thumnail-desc .tab-content p { line-height: 25px; } .border-default { border: 1px solid #ededed; border-radius: 3px; padding-bottom: 30px; } .universal-padding { padding-left: 15px; padding-right: 15px; } .group-title { -webkit-box-align: center; -ms-flex-align: center; align-items: center; border-bottom: 1px solid #ebebeb; color: #363f4d; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; margin-bottom: 20px; padding-bottom: 25px; padding-top: 25px; position: relative; } .group-title h2 { font-size: 14px; font-weight: 600; text-transform: uppercase; } .review-mini-title { font-size: 18px; font-weight: 500; margin: 30px 0; text-transform: capitalize; } .review-list li { text-align: left; } .review-list li > span { display: inline-block; font-size: 14px; font-weight: 500; width: 49px; } .review-list li label span { font-weight: 500; } .review-list li label { font-size: 13px; left: 120px; position: relative; } .review-list li label a { color: #f6745b; font-weight: 500; } .review-list li label a:hover { color: #f98903; } .review-title { border-bottom: 1px solid #ebebeb; font-size: 18px; font-weight: 400; padding-bottom: 20px; padding-top: 15px; } .review-title span { font-weight: 500; } .riview-field input, .riview-field textarea { border: 1px solid #ebebeb; -webkit-box-shadow: none; box-shadow: none; width: 60%; } .riview-field label { color: #333333; font-size: 13px; font-weight: 500; } .property-list li { text-align: left; } .property-list li > span { display: inline-block; font-size: 14px; font-weight: 500; width: 100px; } .property-list li label span { font-weight: 500; } .property-list li label { font-size: 13px; position: relative; } .property-list li label a { color: #f6745b; font-weight: 500; } .property-list li label a:hover { color: #f98903; } /*----------------------------------------*/ /* 17. Shop Page CSS /*----------------------------------------*/ /*-------------------------- sidebar css start ------------------------*/ .sidebar-title { color: #2c2c2c; display: block; font-size: 18px; font-weight: 600; line-height: 35px; margin-bottom: 10px; text-transform: uppercase; } .e-title { background: #f98903 none repeat scroll 0 0; color: #ffffff; display: block; font-size: 18px; font-weight: 600; line-height: 25px; margin-bottom: 0; padding: 15px; text-transform: uppercase; } .sidbar-style { border: 1px solid #ededed; padding: 15px; background: #fff; } /*---------------------------------- toggle menu plus minus css start ------------------------------------*/ .category-menu.sidebar-menu .has-sub.open a span.holder::after, .category-menu.sidebar-menu li.has-sub.open > a::after, .category-menu.v-cat-menu .has-sub.open > a::after { content: "\f209"; } .category-menu.sidebar-menu .has-sub a span.holder::after, .category-menu.sidebar-menu li.has-sub > a::after, .category-menu.v-cat-menu ul li.has-sub > a::after { content: "\f217"; font-family: "Ionicons"; font-size: 14px; position: absolute; right: 20px; } .category-menu.v-cat-menu ul li.has-sub > a::after { left: 30px; top: 6px; } .sidebar-menu ul li { position: relative; } .sidebar-menu li a, .color-option li a, .single-sidebar li a { color: #2c2c2c; display: block; font-size: 14px; font-weight: 400; line-height: 20px; padding: 10px 0; text-transform: capitalize; cursor: pointer; } .sidebar-menu li:hover > a, .sidebar-menu li.has-sub:hover > a, .sidebar-menu li.has-sub.open > a { color: #f98903; } .sidebar-menu .category-sub li a { padding-left: 10px; } /*--------------------------------- Fileter by search css start -----------------------------------*/ .ui-slider.ui-corner-all.ui-slider-horizontal.ui-widget.ui-widget-content { margin-top: 15px; } .ui-slider-handle.ui-state-default.ui-corner-all { background: #f98903 none repeat scroll 0 0; border: medium none; border-radius: 50%; height: 13px; top: 50%; width: 13px; margin-left: -1px; transform: translateY(-50%); -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); } .ui-slider-range.ui-widget-header.ui-corner-all { background: #363f4d none repeat scroll 0 0; border-radius: 0; height: 4px; } .ui-widget.ui-widget-content { background: #d7d7d7 none repeat scroll 0 0; border: medium none; height: 4px; } .ui-slider-horizontal .ui-slider-handle { margin-left: 0; } .ui-slider-handle.ui-corner-all.ui-state-default.ui-state-focus { outline: medium none; } .amount-range { background: rgba(0, 0, 0, 0) none repeat scroll 0 0; border: medium none; color: #2c2c2c; font-size: 15px; margin-top: 10px; padding: 5px 0; } .amount-range, .price-button { width: 100%; word-spacing: 15px; } .flter-option.mb-80 { padding-right: 15px; } /*--------------------------------- categorie,price & size css start -----------------------------------*/ .sidbar-style li { transition: all 300ms ease-in 0s; -webkit-transition: all 300ms ease-in 0s; -ms-transition: all 300ms ease-in 0s; -moz-transition: all 300ms ease-in 0s; } .sidbar-style .form-check label { font-size: 14px; cursor: pointer; } .sidebar li.form-check { margin-bottom: 12px; } .sidebar .form-check { padding-left: 0; } /*--------------------------------- Color css start -----------------------------------*/ .color-option li { -webkit-box-align: center; -ms-flex-align: center; align-items: center; display: -webkit-box; display: -ms-flexbox; display: flex; } .color-option li a { padding: 5px 0; } .color-option li a:hover, .sidbar-style li:hover { color: #3498db; } .color-option li span { -webkit-box-shadow: -1px 1px 8px 0 rgba(0, 0, 0, 0.2); box-shadow: -1px 1px 8px 0 rgba(0, 0, 0, 0.2); display: block; height: 12px; margin-right: 5px; width: 12px; } .color-option li span.white { background: #fff; } .color-option li span.orange { background: #F39C11; } .color-option li span.blue { background: #5D9CEC; } .color-option li span.yellow { background: #F1C40F; } /*--------------------------------- sidebar banner css start -----------------------------------*/ .sidebar-banner:before { background: rgba(255, 255, 255, 0.2) none repeat scroll 0 0; bottom: 0; content: ""; left: 50%; opacity: 1; position: absolute; right: 51%; top: 0; -webkit-transition: all 900ms ease-in 0s; transition: all 900ms ease-in 0s; } .sidebar-banner:after { background: rgba(255, 255, 255, 0.2) none repeat scroll 0 0; bottom: 50%; content: ""; left: 0; opacity: 1; position: absolute; right: 0; top: 50%; -webkit-transition: all 900ms ease-in 0s; transition: all 900ms ease-in 0s; } .sidebar-banner:hover:before { left: 0; right: 0; opacity: 0; } .sidebar-banner:hover:after { bottom: 0; top: 0; opacity: 0; } /*--------------------------------- grid list view css Start -----------------------------------*/ .main-categorie .border-default { padding-bottom: 0; padding: 20px; background: #fff; } .grid-list-view .tabs-area li a { background: #2c2c2c none repeat scroll 0 0; color: #ffffff; font-size: 18px; height: 23px; line-height: 25px; padding: 0; text-align: center; width: 25px; border-radius: 4px; } .grid-list-view .tabs-area li a.active { background: #3498DB; } .grid-list-top .tabs-area { border-bottom: none; } .grid-list-top .tabs-area > li { margin-left: 0; margin-right: 10px; } .grid-list-top .tabs-area > li:last-child { position: relative; left: 50px; } .grid-list-top.border-default { background: #ffffff none repeat scroll 0 0; padding: 15px; } .grid-list-top .tabs-area > li span, .toolbar-sorter label { color: #3e3e3e; font-size: 13px; } .toolbar-sorter label { font-weight: 500; margin-bottom: 0; margin-right: 15px; width: 125px; } .toolbar-sorter{ width: 355px; } .toolbar-sorter .nice-select { border: 1px solid #ededed; font-size: 14px; width: 100%; } .toolbar-sorter select.form-control:focus { -webkit-box-shadow: none; box-shadow: none; } .toolbar-sorter select option { font-size: 14px; line-height: 24px; padding: 3px 15px; } /*--------------------------------- grid list single product css -----------------------------------*/ .main-categorie .tab-content .single-product { margin-bottom: 30px; } #list-view .single-product .pro-content h4 a { color: #666666; font-size: 18px; } #list-view .single-product .pro-content p { color: #666666; line-height: 25px; margin: 15px 0 25px; } .product-pagination { border-bottom: 1px solid #ededed; font-size: 13px; font-weight: 400; } /*----------------------------------------*/ /* 18. Quick View CSS /*----------------------------------------*/ .quick-thumb-content .modal-header { border-bottom: medium none; padding: 10px; } .quick-thumb-content .modal-lg { max-width: 900px; margin: 60px auto; } .quick-thumb-content .modal-body { padding: 30px; padding-top: 0; } .quick-thumb-content .tabs-area { border-bottom: none; } .custom-footer { padding: 15px 30px; border-top: 1px solid #ededed; margin-top: 30px; } /*----------------------------------------*/ /* 19. Login CSS /*----------------------------------------*/ .custom-title { color: #333333; font-size: 25px; font-weight: 600; text-transform: capitalize; } .well { background-color: #fff; border: 1px solid #ededed; border-radius: 4px; padding: 20px; } .log-in p strong { color: #444444; font-weight: 500; } .customer-btn, .return-customer-btn { background: #f98903 none repeat scroll 0 0; border: medium none; color: #ffffff; display: inline-block; font-weight: 500; font-size: 15px; margin-top: 20px; padding: 10px 30px; text-align: center; text-transform: uppercase; -webkit-transition: all 300ms ease-in 0s; transition: all 300ms ease-in 0s; cursor: pointer; } .return-customer-btn { background: #f6745b; } .return-customer-btn:hover { background: #f6745b; color: #fff; } .customer-btn:hover { background: #f6745b; color: #fff; } .return-customer label { font-weight: 500; color: #444; font-size: 14px; } .return-customer input { font-size: 14px; } .lost-password a { color: #555; font-weight: 500; font-size: 13px; } .lost-password a:hover { color: #f6745b; } /*----------------------------------------*/ /* 20. Register Account CSS /*----------------------------------------*/ .register-title { margin-bottom: 30px; } .register-title h3 { font-size: 25px; line-height: 25px; } .form-register label { font-size: 14px; text-align: right; } .form-register .form-group { margin-bottom: 20px; } .form-register .form-group input { font-size: 14px; } .form-register legend { border-bottom: 1px solid #ededed; font-size: 16px; font-weight: 500; margin-bottom: 20px; padding: 7px 0; } .agree { color: #f6745b; font-size: 13px; } .terms input[type=checkbox] { vertical-align: middle; } /*----------------------------------------*/ /* 21. Forgot Password CSS /*----------------------------------------*/ .password-forgot legend { border-bottom: 1px solid #ededed; font-size: 16px; margin-bottom: 20px; padding: 7px 0; font-weight: 500; } .password-forgot label { font-size: 15px; } .password-forgot input { font-size: 14px; } .require { color: #cc0000; font-weight: 600; margin-right: 5px; } .password-forgot .form-group { margin-bottom: 0; } /*----------------------------------------*/ /* 22. 404 Page CSS /*----------------------------------------*/ .error-text h1 { color: #f6745b; font-size: 200px; font-weight: 700; letter-spacing: 10px; line-height: 155px; margin-bottom: 30px; } .error-text h2 { color: #4c4c4c; font-size: 35px; font-weight: 700; line-height: 35px; margin-bottom: 16px; text-transform: uppercase; } .error-text > p { color: #4c4c4c; font-size: 24px; font-weight: 300; line-height: 25px; margin-bottom: 30px; padding: 0 130px; } .search-form { display: inline-block; position: relative; text-align: center; width: 450px; } .search-form input { background: #fff; border: 1px solid #e9e9e9; border-radius: 30px; color: #666666; float: left; font-size: 14px; height: 45px; padding: 0 50px 0 20px; width: 100%; } .search-form button { background: rgba(0, 0, 0, 0) none repeat scroll 0 0; border: medium none; color: #4f4f4f; font-size: 18px; height: 100%; position: absolute; right: 0; top: 0; -webkit-transition: all 0.3s ease 0s; transition: all 0.3s ease 0s; width: 50px; } .search-form button:hover { color: #4380db; } .error-button a { background: #f6745b none repeat scroll 0 0; border-radius: 35px; color: #ffffff; display: inline-block; font-size: 12px; font-weight: bold; line-height: 40px; margin-top: 53px; padding: 0 30px; text-transform: uppercase; -webkit-transition: all 0.3s ease 0s; transition: all 0.3s ease 0s; } .error-button a:hover { background: #f98903; } /*----------------------------------------*/ /* 23. Compare Page CSS /*----------------------------------------*/ .table > tbody > tr > td, .table > tbody > tr > th, .table > tfoot > tr > td, .table > tfoot > tr > th, .table > thead > tr > td, .table > thead > tr > th { border: 1px solid #ebebeb; } .table-responsive > .table > tbody > tr > td, .table-responsive > .table > tbody > tr > th, .table-responsive > .table > tfoot > tr > td, .table-responsive > .table > tfoot > tr > th, .table-responsive > .table > thead > tr > td, .table-responsive > .table > thead > tr > th { white-space: normal; } .compare-content > tbody > tr > td { padding: 20px 15px; vertical-align: middle; } .product-title { font-size: 15px; font-weight: 600; width: 120px; } .product-description { font-weight: 500; width: 200px; font-size: 14px; } .product-description p { text-align: left; } .product-description i { color: #666; font-size: 16px; } .product-description .compare-cart { background: #f6745b none repeat scroll 0 0; border-radius: 20px; color: #ffffff; display: inline-block; font-size: 10px; padding: 6px 0 6px 16px; position: relative; width: 120px; } .product-description .compare-cart:hover { background: #3498db none repeat scroll 0 0; border-color: #4380db; color: #ffffff; } .product-description .compare-cart i { background: #ffffff none repeat scroll 0 0; border-radius: 50%; -webkit-box-shadow: 0 1px 1px #efefef; box-shadow: 0 1px 1px #efefef; color: #777777; font-size: 12px; height: 27px; left: 1px; line-height: 27px; position: absolute; text-align: center; top: 2px; width: 27px; } .product-description img { width: 100%; } .compare-details { text-align: left; } .product-description .product-rating i { font-size: 12px; } .compare-details span { color: #777777; display: inline-block; font-size: 12px; text-transform: capitalize; } .compare-details h4 { font-weight: 600; line-height: 10px; } .compare-details h4 a { font-size: 13px; text-transform: capitalize; color: #333; } .compare-details h4 a:hover, .product-description .fa-trash-o:hover { color: #4380db; cursor: pointer; } /*----------------------------------------*/ /* 24. Checkout CSS /*----------------------------------------*/ .coupon-area .coupon-info input { background: transparent; border: 1px solid #e5e5e5; } .coupon-area .coupon-info .checkout-coupon .code:focus { border: 1px solid #e5e5e5; } .checkbox-form input { color: #626262; } .coupon-area {} .coupon-accordion {} .coupon-accordion h3 { background-color: #f6f6f6; border-top: 3px solid #f6745b; color: #515151; font-size: 14px; font-weight: 400; list-style: outside none none; margin-bottom: 30px; padding: 1em 2em 1em 3.5em; position: relative; text-transform: capitalize; width: auto; } .coupon-accordion h3::before { color: #777; content: "\f0f6"; display: inline-block; font-family: 'FontAwesome'; left: 16px; position: absolute; top: 16px; } .coupon-accordion span { cursor: pointer; color: #6f6f6f; -webkit-transition: .3s; transition: .3s } .coupon-accordion span:hover, p.lost-password a:hover { color: #3498db; } .coupon-content { border: 1px solid #e5e5e5; display: none; margin-bottom: 20px; padding: 20px; } .coupon-info {} .coupon-info p.coupon-text { margin-bottom: 15px } .coupon-info p { margin-bottom: 0 } .coupon-info p.form-row-first {} .coupon-info p.form-row-first label, .coupon-info p.form-row-last label { display: block; color: inherit; } .coupon-info p.form-row-first label span.required, .coupon-info p.form-row-last label span.required { color: red; font-weight: 700; } .coupon-info p.form-row-first input, .coupon-info p.form-row-last input { border: 1px solid #ccc; height: 34px; margin: 0 0 14px; max-width: 100%; padding: 0 0 0 10px; width: 370px; -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075); box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075); } .coupon-info p.form-row input[type="submit"]:hover, p.checkout-coupon input[type="submit"]:hover { background: #f6745b none repeat scroll 0 0; } .coupon-info p.form-row input[type="checkbox"] { height: inherit; position: relative; top: 2px; width: inherit; } .form-row > label { margin-top: 7px; } p.lost-password { margin-top: 15px; } p.lost-password a { color: #6f6f6f; font-size: 12px; } p.checkout-coupon {} p.checkout-coupon input[type=text] { height: 36px; padding-left: 10px; width: 170px; } p.checkout-coupon input[type="submit"] { background: #333 none repeat scroll 0 0; border: medium none; border-radius: 0; color: #fff; height: 36px; margin-left: 6px; padding: 5px 10px; -webkit-transition: all 0.3s ease 0s; transition: all 0.3s ease 0s; width: inherit; } .coupon-checkout-content { margin-bottom: 30px; display: none; } .checkbox-form h3 { border-bottom: 1px solid #ebebeb; font-weight: 500; margin-bottom: 20px; padding-bottom: 10px; width: 100%; font-size: 28px; } .ship-different-title h3 label { display: inline-block; margin-right: 20px; font-size: 22px; font-weight: 500; } .country-select label, .country-select label, .checkout-form-list label { color: #333; font-family: Montserrat, Arial, Helvetica, sans-serif; margin: 0 0 5px; display: block; font-weight: 600; font-size: 15px; } .country-select label span.required, .checkout-form-list label span.required { color: red; } .country-select select { border: 1px solid #ddd; height: 32px; padding-left: 10px; width: 100%; -webkit-appearance: none; -moz-appearance: none; appearance: none; background: #fff; -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.075); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.075) } .checkout-form-list label { color: #333333; font-size: 15px; } .checkout-form-list label span.required {} .checkout-form-list input[type="text"], .checkout-form-list input[type="password"], .checkout-form-list input[type="email"] { background: #ffffff none repeat scroll 0 0; border: 1px solid #ebebeb; border-radius: 0; -webkit-box-shadow: 0 0px 2px rgba(0, 0, 0, 0.075); box-shadow: 0 0px 2px rgba(0, 0, 0, 0.075); height: 34px; padding: 0 0 0 10px; width: 100%; } .country-select .nice-select { height: 37px; line-height: 35px; } .checkout-form-list {} .checkout-form-list input[type="checkbox"] { display: inline-block; height: inherit; margin-right: 10px; position: relative; top: 0; width: inherit; } .create-acc label { color: #333; display: inline-block; } .checkout-form-list input[type=password] {} .create-accounts { display: none } .ship-different-title {} .ship-different-title h3 label { display: inline-block; margin-right: 20px; } .order-notes textarea { background: #ffffff none repeat scroll 0 0; border: 2px solid #eceff8; font-size: 14px; height: 90px; padding: 15px; width: 100%; } #ship-box-info { display: none } .your-order { background: #f2f2f2 none repeat scroll 0 0; padding: 30px 40px 45px; } .your-order h3 { border-bottom: 1px solid #ebebeb; font-size: 25px; margin: 0 0 20px; padding-bottom: 10px; text-transform: uppercase; width: 100%; font-weight: 500; } .your-order-table table { background: rgba(0, 0, 0, 0) none repeat scroll 0 0; border: medium none; width: 100%; } .your-order-table table th, .your-order-table table td { border-bottom: 1px solid #d8d8d8; border-right: medium none; font-size: 14px; padding: 15px 0; text-align: center; } .amount { color: #666; font-size: 15px; font-weight: 500; } .your-order-table table th { border-top: medium none; font-family: Montserrat, Arial, Helvetica, sans-serif; font-weight: normal; text-align: center; text-transform: uppercase; vertical-align: middle; white-space: nowrap; width: 250px; } .your-order-table table .shipping ul li input { position: relative; top: 2px; } .your-order-table table .shipping th { vertical-align: top; } .your-order-table table .order-total th { border-bottom: medium none; font-size: 18px; font-weight: 600; } .your-order-table table .order-total td { border-bottom: medium none; } .your-order-table table tr.cart_item:hover { background: #F9F9F9 } .your-order-table table tr.order-total td span { color: #f6745b; font-size: 22px; font-weight: 600; } .your-order-table table {} .payment-method { margin-top: 40px; } .payment-accordion {} .payment-accordion h3 { border-bottom: 0 none; margin-bottom: 10px; padding-bottom: 0; } .payment-accordion h3 a { color: #6f6f6f; font-size: 14px; padding-left: 25px; position: relative; text-transform: capitalize; text-decoration: none } .payment-accordion h3 a:before, .payment-accordion h3.open a:after { content: ""; display: inline-block; font-family: fontawesome; font-size: 20px; left: 0; position: absolute; top: -2px; } .payment-accordion h3.open a:after { content: "\f056"; } .payment-content {} .payment-content p { font-size: 13px; } .payment-accordion img { height: 60px; margin-left: 15px; } .order-button-payment input { background: #4380db; border: medium none; color: #fff; font-size: 17px; font-weight: 600; height: 50px; margin: 20px 0 0; padding: 0; text-transform: uppercase; -webkit-transition: all 0.3s ease 0s; transition: all 0.3s ease 0s; width: 100%; } .order-button-payment input:hover { background: #444 } .card-header { background-color: #f5f5f5; padding: 0; } .card { margin-top: 5px; } .card .btn-link { color: #232323; font-weight: 600; } /*----------------------------------------*/ /* 25. Cart & Wish List CSS /*----------------------------------------*/ .cart-main-area .section-title h2, .coupon-area .section-title h2 { text-transform: capitalize; color: #555; font-weight: 500; } .cart-main-area {} .shipping_method input { background: #eceff8 none repeat scroll 0 0; border: 2px solid #eceff8; -webkit-box-shadow: none; box-shadow: none; color: #626262; font-size: 14px; height: 45px; padding-left: 10px; width: inherit; } .cart-title-area { padding-top: 30px; } .car-header-title {} .car-header-title h2 { font-size: 20px; margin: 0; text-transform: uppercase; } .table-content table { background: #fff none repeat scroll 0 0; border-color: #e5e5e5; border-radius: 0; border-style: solid; border-width: 1px 0 0 1px; text-align: center; width: 100%; } .table-content table th { border-top: medium none; font-weight: 500; padding: 20px 10px; text-align: center; text-transform: capitalize; vertical-align: middle; white-space: nowrap; font-size: 15px; } .table-content table th, .table-content table td { border-bottom: 1px solid #e5e5e5; border-right: 1px solid #e5e5e5; } .table-content table td { border-top: medium none; padding: 20px 10px; vertical-align: middle; font-size: 13px; } .table-content table td input { background: #e5e5e5 none repeat scroll 0 0; border: medium none; border-radius: 3px; color: #6f6f6f; font-size: 15px; font-weight: normal; height: 40px; padding: 0 5px 0 10px; width: 60px; } .table-content table td.product-subtotal { font-size: 15px; font-weight: 600; width: 120px; } .table-content table td.product-name a, .product-stock-status span { font-size: 14px; font-weight: 500; margin-left: 10px; color: #6f6f6f; text-transform: capitalize; } .product-stock-status span { color: #f6745b; font-weight: 500; } .table-content table td.product-name { width: 270px; } .table-content table td.product-thumbnail { width: 100px; } .table-content table td.product-remove i { color: #919191; display: inline-block; font-size: 20px; height: 40px; line-height: 40px; text-align: center; width: 40px; } .table-content table .product-price .amount { font-size: 15px; font-weight: 600; } .table-content table td.product-remove i:hover { color: #f6745b; } .table-content table td.product-quantity { width: 180px; } .table-content table td.product-remove { width: 150px; } .table-content table td.product-price { width: 130px; } .table-content table td.product-name a:hover, .buttons-cart a:hover { color: #f6745b; } .product-thumbnail img { width: 100%; } .buttons-cart { margin-bottom: 30px; overflow: hidden; } .buttons-cart input, .coupon input[type="submit"], .buttons-cart a, .coupon-info p.form-row input[type="submit"] { background: #363f4d none repeat scroll 0 0; border: medium none; border-radius: 0; -webkit-box-shadow: none; box-shadow: none; color: #fff; display: inline-block; float: left; font-size: 12px; font-weight: 600; height: 40px; line-height: 40px; margin-right: 15px; padding: 0 20px; text-shadow: none; text-transform: uppercase; -webkit-transition: all 0.3s ease 0s; transition: all 0.3s ease 0s; white-space: nowrap; width: inherit; } .wc-proceed-to-checkout { clear: both; display: block; } .buttons-cart input:hover, .coupon input[type="submit"]:hover, .buttons-cart a:hover { background: #f6745b none repeat scroll 0 0; color: #fff; } .buttons-cart a { color: #fff; float: left; height: 40px; line-height: 40px; } .coupon input[type=submit] {} .cart_totals { width: 100%; } .cart_totals h2 { border-bottom: 2px solid #222; display: inline-block; font-size: 30px; margin: 0 0 35px; text-transform: uppercase; font-weight: 500; } .cart_totals table { border: medium none; margin: 0; text-align: right; } .cart_totals table th { border: medium none; font-size: 14px; font-weight: bold; padding: 0 20px 12px 0; text-align: right; text-transform: uppercase; vertical-align: top; } .cart_totals table td { border: medium none; padding: 0 0 12px; vertical-align: top; } .cart_totals table td .amount { color: #f6745b; font-size: 13px; font-weight: bold; margin-left: 5px; text-align: right; text-transform: uppercase; } .cart_totals table td ul#shipping_method { list-style: outside none none; margin: 0; padding: 0; } .cart_totals table td ul#shipping_method li { float: left; margin: 0 0 10px; padding: 0; text-indent: 0; width: 100%; } .cart_totals table td ul#shipping_method li input { margin: 0; position: relative; top: 2px; } .cart_totals table {} a.shipping-calculator-button { font-weight: bold; color: #6f6f6f; } a.shipping-calculator-button:hover { color: #83CBDC } .cart_totals table tr.order-total th, .cart_totals table tr.order-total .amount { font-size: 20px; text-transform: uppercase; white-space: nowrap; font-weight: 600; } .cart_totals table tr.order-total th { font-weight: 700; } .wc-proceed-to-checkout a { background: #f6745b; color: #fff; display: inline-block; font-size: 14px; font-weight: 700; height: 50px; line-height: 50px; margin-top: 20px; padding: 0 30px; text-transform: none; } .wc-proceed-to-checkout a:hover { background: #363f4d; } .amount del { font-size: 13px; margin-left: 5px; font-weight: 600; } .cart-main-area.wish-list .product-remove { width: 20px; } .cart-main-area.wish-list table td.product-thumbnail { width: 140px; } .cart-main-area.wish-list .product-add-to-cart a { background: #f6745b none repeat scroll 0 0; color: #ffffff; display: block; font-size: 14px; font-weight: 700; margin: 0 auto; padding: 10px 56px; text-transform: uppercase; width: 260px; } .cart-main-area.wish-list .product-add-to-cart a:hover { background: #1a1a1a; } .cart-main-area.wish-list td.product-add-to-cart { width: 240px; } /*----------------------------------------*/ /* 26. Terms & Conditions CSS /*----------------------------------------*/ .terms-content.sidbar-style { padding: 20px; } .tems-tile { font-size: 20px; font-weight: 600; margin-bottom: 15px; } .term-mini-title { display: inline-block; font-size: 16px; font-weight: 700; margin-bottom: 5px; text-transform: capitalize; } /*----------------------------------------*/ /* 27. About Us CSS /*----------------------------------------*/ .about-title { border-bottom: 2px dashed #dddddd; display: inline-block; font-size: 20px; padding-bottom: 5px; text-transform: capitalize; } .terms-conditions p, .about-desc p { padding: 10px 20px; line-height: 1.6em; } .return-customer-btn.read-more { padding: 10px 20px; } .ht-single-about > h5 { font-size: 12px; font-weight: 600; line-height: 20px; margin-bottom: 9px; } .ht-work-text > h5 a { color: #232323; font-size: 12px; font-weight: 600; } .ht-work-text > h5 a:hover { color: #f6745b; } .ht-about-work { margin-bottom: 20px; position: relative; } .ht-about-work:last-child { margin: 0; } .ht-about-work > span { background: #ebebeb none repeat scroll 0 0; border-radius: 50%; color: #7d7d7d; display: block; float: left; height: 42px; line-height: 43px; text-align: center; -webkit-transition: all 0.3s ease 0s; transition: all 0.3s ease 0s; width: 42px; margin-top: 10px; } .ht-about-work:hover > span { background: #f6745b none repeat scroll 0 0; color: #ffffff; } .ht-work-text { overflow: hidden; padding-left: 10px; } .team-img img { width: 100%; } .team-img { position: relative; } .team-img::before { background: #000; content: ""; height: 100%; left: 0; opacity: 0; position: absolute; top: 0; -webkit-transform: scale(0); transform: scale(0); -webkit-transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; width: 100%; z-index: 1; } .single-team:hover .team-img::before { opacity: 0.1; -webkit-transform: scale(1); transform: scale(1); } .single-team { background: #f1f1f1 none repeat scroll 0 0; } .team-info { padding: 15px; } .team-link { left: 0; opacity: 0; position: absolute; right: 0; text-align: center; top: 70%; -webkit-transform: translateY(-50%); transform: translateY(-50%); -webkit-transition: all 0.6s ease 0s; transition: all 0.6s ease 0s; width: 100%; z-index: 5; background: #fff; padding: 10px; } .team-link ul li { display: inline-block; margin: 0 10px; } .team-link ul li a { color: #3498db; font-size: 20px; -webkit-transition: all 0.3s ease 0s; transition: all 0.3s ease 0s; } .team-link ul li a:hover { color: #f6745b; } .single-team:hover .team-link { top: 50%; opacity: 1; } .team-info h4 { font-size: 20px; font-weight: 500; margin-bottom: 5px; } .team-info p { font-family: Yanone Kaffeesatz; font-size: 17px; font-style: italic; font-weight: 400; } .skill-progress { overflow: hidden; padding-top: 30px; } .progress { border-radius: 2px; height: 5px; margin-bottom: 40px; overflow: visible; position: relative; } .progress .skill-title { font-size: 13px; font-weight: 600; position: absolute; text-transform: uppercase; top: -28px; } .progress .progress-bar { background: #7b7b7b none repeat scroll 0 0; border-radius: 2px 0 0 2px; height: 5px; } .skill-progress .progress:last-child { margin-bottom: 0; } /*----------------------------------------*/ /* 28. Contact Us CSS /*----------------------------------------*/ .contact-area h3 { font-size: 25px; line-height: 25px; } .contact-area .form-control { background: #f1f1f1 none repeat scroll 0 0; font-size: 14px; margin-bottom: 30px; padding: 10px 15px; -webkit-transition: all 0.5s ease 0s; transition: all 0.5s ease 0s; } .contact-area .form-control:focus { background: #fff; } .contact-area textarea.form-control { min-height: 220px; margin-bottom: 0; } .contact-form p.error { color: #ff0000; } .contact-form p.success { color: green; } /*----------------------------------------*/ /* 29. Popup Window CSS /*----------------------------------------*/ .popup_wrapper { background: rgba(0, 0, 0, 0.7) none repeat scroll 0 0; height: 100%; opacity: 0; position: fixed; -webkit-transition: all 0.5s ease 0s; transition: all 0.5s ease 0s; visibility: hidden; width: 100%; z-index: 9999999; } .test { background: #ffffff none repeat scroll 0 0; bottom: 0; height: 390px; left: 0; margin: auto; max-width: 790px; padding: 25px 50px; position: absolute; right: 0; top: 0; } .popup_off { background: #666666 none repeat scroll 0 0; border: 1px solid #ffffff; color: #ffffff; cursor: pointer; display: block; font-size: 11px; font-weight: 500; height: 25px; line-height: 25px; position: absolute; right: 0; text-align: center; text-decoration: none; text-transform: uppercase; top: -26px; -webkit-transition: all 0.3s ease-in 0s; transition: all 0.3s ease-in 0s; width: 75px; } .popup_off:hover { background: #1a1a1a none repeat scroll 0 0; } .subscribe-form-group { margin-top: 15px; } .subscribe-form-group input { background: #eaeaea none repeat scroll 0 0; border: 0 none; color: #888; height: 41px; line-height: 20px; padding: 0 20px; width: 380px; } .subscribe-bottom label { font-size: 14px; margin: 0; vertical-align: middle; } .subscribe_area p { color: #555; font-size: 14px; } .subscribe-bottom input { vertical-align: middle; } .subscribe-form-group button { background: #f6745b none repeat scroll 0 0; border: 0 none; color: #fff; display: block; font-size: 12px; font-weight: 600; line-height: 38px; margin: 20px auto; padding: 2px 20px 0; text-transform: uppercase; -webkit-transition: all 0.3s ease-in-out 0s; transition: all 0.3s ease-in-out 0s; } .subscribe-form-group button:hover { background: #3498db none repeat scroll 0 0; color: #fff; } .subscribe_area h2 { font-size: 35px; font-weight: 500; margin-bottom: 10px; text-transform: uppercase; } /* Orange Color */ .header-top-left ul span { color: #666666; } .header-top-left ul > li > a, .header-top-right ul > li > a { color: #2c2c2c; } .header-top-left > ul > li:first-child > a::after { background: rgba(44, 44, 44, 0.4); } .header-top-right ul > li > a{ border-right: 1px solid rgba(44, 44, 44, 0.4); } .categorie-search-box input{ border: 1px solid #e8e8e8; } .categorie-search-box button { background: #2c2c2c none repeat scroll 0 0; } .categorie-search-box button:hover { background: #f6745b none repeat scroll 0 0; cursor: pointer; } .cart-box > ul > li > a { color: #2c2c2c; } .total-pro { background: #f6745b none repeat scroll 0 0; color: #fff; } .my-cart{ color: #2c2c2c; } .wish-list-item::after{ background: rgba(44, 44, 44, 0.4); } .icon-mypage::after{ background: rgba(44, 44, 44, 0.4); } .header-top-right ul > li > a:hover,.header-top-left ul > li ul.ht-dropdown li a:hover,.header-bottom-list > li > ul.ht-dropdown li:hover a,.vertical-menu-list li:hover > a,.del-icone:hover, .cart-content h6 a:hover,.price-content li span, .cart-content span.cart-price,.footer-list li a:hover,.social-footer-list a:hover,.footer-bottom-content p a,.footer-nav-list li a:hover { color: #f6745b; } .pro-quantity,.cart-actions a:hover { background: #f6745b; } .vertical-menu > span,.nivo-controlNav a.active { background: #a53b26 none repeat scroll 0 0; } .actions-primary a{ background: #f6745b; } .actions-primary a:hover{ background: #f98903; } .actions-secondary a { border: 1px solid #f6745b; color: #f6745b; } .support-desc h6 { color: #2c2c2c; } .newsletter-box .submit { background: #333333 none repeat scroll 0 0; } .newsletter-box .submit:hover{ opacity: .9; } .owl-nav div:hover { background: #f6745b none repeat scroll 0 0; } .alert-message { margin: 20px 0; padding: 20px; border-left: 3px solid #eee; } .alert-message h4 { margin-top: 0; margin-bottom: 5px; } .alert-message p:last-child { margin-bottom: 0; } .alert-message code { background-color: #fff; border-radius: 3px; } .alert-message-success { background-color: #F4FDF0; border-color: #3C763D; } .alert-message-success h4 { color: #3C763D; } .alert-message-danger { background-color: #fdf7f7; border-color: #d9534f; } .alert-message-danger h4 { color: #d9534f; } .alert-message-warning { background-color: #fcf8f2; border-color: #f0ad4e; } .alert-message-warning h4 { color: #f0ad4e; } .alert-message-info { background-color: #f4f8fa; border-color: #5bc0de; } .alert-message-info h4 { color: #5bc0de; } .alert-message-default { background-color: #EEE; border-color: #B4B4B4; } .alert-message-default h4 { color: #000; } .alert-message-notice { background-color: #FCFCDD; border-color: #BDBD89; } .alert-message-notice h4 { color: #444; } .promotion { line-height: 2em; } .promotion span.text-warning{ font-size: 1.5em; } .vertical-align { display: flex; flex-direction: row; } .vertical-align > [class^="col-"], .vertical-align > [class*=" col-"] { display: flex; align-items: center; justify-content: center; } .vertical-align > [class^="col-"] > div, .vertical-align > [class*=" col-"] > div { flex-grow: 1; } .dvd-sample { display: block; } .video-js { max-width: 100%; max-height: 100%; width: 100%; height: 350px!important; } .video-js .vjs-big-play-button { left: calc(50% - 45px)!important; top: calc(50% - 22px)!important; } @media (max-width: 767px) { .card-body { padding: 0px; } .card-text { padding: 5px; } .add-wishlist, .add-cart { display: block; } .add-wishlist { margin-top: 10px; margin-left: 0px; } } .dvd-sample { background: none repeat scroll 0 0 #FFFFE5; border: 1px solid #FFCC7F; clear: both; margin-bottom: 20px; padding: 10px; } .dvd-sample .sample-alert{ display: block; margin: 0 10px; border: 1px solid #FF7B33; background-color: #FFEEE5; padding: 10px; color: #404040; } .dvd-sample h5, .dvd-sample h6{ padding:10px 0; color: #FF009A; font-size: 14px; } .dvd-sample h6{ font-size: 12px; } .dvd-sample .make-sample-button{ width: 100%; display: block; margin: 10px 0; text-align: center; } .dvd-sample #loading, .dvd-sample #loading_mark_sample{ display: none; margin-top: 10px; border: 1px solid #FF7B33; background-color: #FFEEE5; padding: 5px 10px; color: #404040; } .comment_t { padding: 10px; border: 1px solid #CCCCCC; border-radius: 4px 4px 4px 4px; margin-top: 15px; } .comment_t_title { margin-bottom: 5px; padding-left: 20px; background: url("img/icon_msg_info.gif") no-repeat scroll 0 -0 transparent; } /* howto page */ .howto .col { float: left; position: relative; width: 50%; } .guide-mod { padding: 6px 0; line-height: 26px; overflow: hidden; } .guide-mod h3 { font-weight: 700; } ul.guide-list { list-style: disc inside none; } .guide-list span { margin: 0 10px; } .faq_wrap, .faq_wrap_last{ margin-top: 20px; padding-bottom: 10px; } .faq_wrap { } .faq_midashi { font-weight: bold; line-height: 26px; border-bottom: 2px solid #f6745b; border-left: 5px solid #f6745b; padding-left: 10px; color: #f6745b; } .faq_wrap dl { margin: 10px 10px; } .faq_wrap dl p{ margin: 10px 0; } dt.question { border-bottom: dotted 1px #D3DBE0; margin: 0 10px; padding: 5px; font-size: 12px; clear: both; } dt.question span { color: #004D99; font-weight: bold; margin-right: 10px; } dd.answer { margin: 10px 10px; padding: 5px; font-size: 12px; line-height: 1.7; overflow: hidden; position: relative; } dd.answer span { color: #F00; font-weight: bold; margin-right: 10px; float: left; } dd.answer ul { list-style-type: disc; padding-left: 25px; } dd.answer ul li{ line-height: 2em; } div.anser_left { position: absolute; left: 10px; top: 5px; } div.anser_right { padding-left: 35px; } div.anser_right img{ display: block; margin: 10px auto; } div.anser_right p{ padding: 0 10px; } .type-container { margin-top: 20px; margin-bottom: 10px; padding: 10px; } .type-container li a { width: 260px; height: 120px; display: block; font-size: 12px; padding: 20px 120px 5px 10px; } .type-container li a h6{ font-size: 22px; } .type-container li a p{ margin-top: 5px; } .type-container li a:hover { text-decoration: none; } .type-container li.type-wp { float: left; } .type-container li.type-classic { float: right; } .type-container li.type-wp a{ color: #dddddd; background: url(img/type-wp.jpg) no-repeat 95% center #464646; } .type-container li.type-classic a{ color: #333333; background: url(img/type-classic.jpg) no-repeat 95% center #ffffff; border: 1px #999999 solid; } a.download-button { background: none repeat scroll 0 0 #e6fdb9; border: 1px solid #7ab900; border-radius: 2px; color: #333; font-size: 12px; font-weight: 12px; padding: 3px 20px; line-height: 30px; } a.download-button:hover { text-decoration: none; }