/*------------------------------------------------------ [Table of contents ] 00. Typography Style Start 01. Background Colors 02. Start Header Area Wrapper 03. Start Search Box Area 04. Start Off Canvas Area Wrapper 05. Quick View Style Here 06. Start Page Header Area 07. Start Main Navigation Wrap 08. Start Welcome Area Wrapper 09. Start Fun Fact Area Wrapper 10. Start Portfolio Area Wrapper 11. Start Testimonial Area Wrapper 12. Start Team Area Wrapper 13. Start Latest Blog Area Wrapper 14. Start Brand Logo Area Wrapper 15. Start Banner Area Wrapper 16. Start Discover Area Wrapper 17. Start Product Slider Area 18. Start Category Banner Area 19. Start Feature Products Area 20. Start Products Wrapper 21. Start Newsletter Area Wrapper 22. Start Shop Creative Banner Area 23. Start Category Product Area 24. Start Post Slider Wrapper 25. Start About Me Area 26. Start Blog Content Area 27. Start Sidebar Content Wrapper 28. Start Call to Action Wrapper 29. Start Our Skills Area 30. Start Contact Area Wrapper 31. Start Agency About Wrapper 32. Start Showcase Description Area 33. Start Get App Now Area Wrapper 34. Start Architect Project Area 35. Start Revolution Slider Css 36. Start Video Background Content Area 37. Start Parallax Bg Content Wrapper 38. Start vCard Container Wrapper 39. Event Home Page Style 40. Creative Freelancer Home Page Style 41. Portfolio Metro Home Page Style 42. Restaurant Home Page Style 43. Business Home Page Style 44. Landing Home Page Style 45. Fashion Home Page Style 46. Blog Metro Home Page Style 47. Startup Home Page Style 48. Baber Home Page Style 49. Marketing Home Page Style 50. Help Home Page Style 51. Artist Home Page Style 52. About Us Pages Style 53. Service Pages Style 54. Team Pages Style 55. Contact Pages Style 56. Pricing Table Page Style 57. Faq Page Style 58. Partner Page Style 59. 404 Error Page Style 60. Coming Soon Page Style 61. Blog Details Page Style 62. Portfolio Page Style 63. Portfolio Details Page Style 64. Shop Page Style 65. Product Details Page Style 66. Cart Page Style 67. Checkout Page Style 68. Wishlist Page Style 69. Slider CSS Style 70. Timeline Style Css --------------------------- The End -------------------*/ /*=============================== 00. Typography Style Start ================================*/ body { font-size: 15px; line-height: 1.6; font-weight: 400; font-family: "Poppins", sans-serif; color: #666666; } a { -webkit-transition: 0.4s; -o-transition: 0.4s; transition: 0.4s; } a:hover, a:focus { color: #fdc657; outline: none; text-decoration: none; } p { margin-bottom: 15px; } h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 { font-weight: 700; color: #222222; line-height: 1.3; } h1, .h1 { font-size: 36px; margin-bottom: 14px; } @media only screen and (max-width: 767.98px) { h1, .h1 { font-size: 30px; } } h2, .h2 { font-size: 32px; margin-bottom: 15px; } @media only screen and (max-width: 767.98px) { h2, .h2 { font-size: 28px; } } h3, .h3 { font-size: 30px; font-weight: 600; margin-bottom: 15px; } @media only screen and (max-width: 767.98px) { h3, .h3 { font-size: 26px; } } h4, .h4 { font-size: 26px; font-weight: 600; margin-bottom: 15px; } h5, .h5 { font-size: 20px; font-weight: 600; margin-bottom: 13px; } h6, .h6 { font-size: 18px; font-weight: 600; margin-bottom: 9px; } ul { margin: 0; padding: 0; } ul li { list-style: none; } strong, b { font-weight: 700; } figure { margin: 0; } img { max-width: 100%; } button { background-color: transparent; border: none; cursor: pointer; outline: none; padding: 0; -webkit-box-shadow: none; box-shadow: none; -webkit-transition: 0.4s; -o-transition: 0.4s; transition: 0.4s; } button:active, button:focus { outline: none; -webkit-box-shadow: none; box-shadow: none; } fieldset { margin-top: 30px; } fieldset legend { border-bottom: 1px solid #e7e7e7; color: #000; font-size: 24px; padding-bottom: 10px; text-transform: capitalize; } blockquote, .blockquote { background-color: #000; color: #fff; font-size: 16px; line-height: 2; font-family: "Playfair Display", serif; padding: 30px 20px; margin-bottom: 0; position: relative; } blockquote:before, .blockquote:before { background-color: #fdc657; content: ''; position: absolute; left: 0; top: 0; height: 100%; width: 5px; } blockquote-right, .blockquote-right { text-align: right; } blockquote-right:before, .blockquote-right:before { left: auto; right: 0; } blockquote--2, .blockquote--2 { background-color: #f4f4f4; color: #222222; font-weight: 600; font-family: "Poppins", sans-serif; padding: 60px 35px 35px; } blockquote--2:after, .blockquote--2:after { content: "\f10e"; color: #dddddd; font-family: "FontAwesome"; font-size: 30px; position: absolute; top: 15px; right: 25px; } blockquote--2 .blockquote-footer, .blockquote--2 .blockquote-footer { color: #666666; font-size: 15px; line-height: 1; font-weight: 400; } blockquote--2.blockquote-right:after, .blockquote--2.blockquote-right:after { content: '\f10d'; left: 25px; right: auto; } ::-moz-selection { color: #fff; background: #fdc657; } ::selection { color: #fff; background: #fdc657; } /*=============================== Responsive Table Scrollbar ================================*/ body::-webkit-scrollbar-thumb, .table-responsive::-webkit-scrollbar-thumb, .list::-webkit-scrollbar-thumb { border-radius: 0; border: 0; background-color: #fdc657; } body::-webkit-scrollbar, .table-responsive::-webkit-scrollbar, .list::-webkit-scrollbar { -webkit-appearance: none; width: 10px; height: 5px; background-color: rgba(253, 198, 87, 0.3); } /*======================================= Product Quantity Increment & Decrement ==========================================*/ .pro-qty { background-color: #f4f4f4; display: inline-block; position: relative; width: 200px; } @media only screen and (max-width: 767.98px), only screen and (min-width: 768px) and (max-width: 991.98px) { .pro-qty { width: 120px; } } .pro-qty input { background-color: #f4f4f4; font-weight: 600; border: none; text-align: center; padding: 21px 0; outline: none; width: 100%; } @media only screen and (min-width: 768px) and (max-width: 991.98px) { .pro-qty input { padding: 15px 0; } } @media only screen and (max-width: 767.98px) { .pro-qty input { padding: 12px 0; } } .pro-qty a { background-color: #e0e0e0; color: #000; font-size: 22px; font-weight: 600; text-align: center; position: absolute; top: 0; line-height: 63px; height: 100%; width: 60px; } @media only screen and (min-width: 768px) and (max-width: 991.98px) { .pro-qty a { width: 35px; line-height: 54px; } } @media only screen and (max-width: 767.98px) { .pro-qty a { width: 35px; line-height: 48px; } } .pro-qty a:hover { background-color: #fdc657; color: #fff; } .pro-qty a.inc { right: 0; } .pro-qty a.dec { left: 0; } /*=============================== Nice Select Customization ================================*/ .nice-select { border-radius: 0; float: none; height: auto; text-transform: capitalize; line-height: inherit; padding: 8px 30px 8px 15px; width: 100%; } .nice-select span.current { font-weight: 600; font-size: 13px; } .nice-select .list { border-radius: 0; width: 100%; } .nice-select .list .option { line-height: 30px; min-height: 30px; } /*=============================== Custom Checkbox & Radio Button ================================*/ .custom-checkbox label, .custom-checkbox .custom-control-label, .custom-radio label, .custom-radio .custom-control-label { color: #222222; font-size: 13px; line-height: 1; padding-left: 10px; cursor: pointer; } .custom-checkbox label:before, .custom-checkbox .custom-control-label:before, .custom-radio label:before, .custom-radio .custom-control-label:before { background-color: #e7e7e7; border: 1px solid #e7e7e7; border-radius: 0; height: 15px; top: 0; width: 15px; } .custom-checkbox label:after, .custom-checkbox .custom-control-label:after, .custom-radio label:after, .custom-radio .custom-control-label:after { background-size: 10px 10px; height: 15px; top: 0; width: 15px; } .custom-checkbox label a, .custom-checkbox .custom-control-label a, .custom-radio label a, .custom-radio .custom-control-label a { color: #222222; font-weight: 500; } .custom-checkbox label a:hover, .custom-checkbox .custom-control-label a:hover, .custom-radio label a:hover, .custom-radio .custom-control-label a:hover { color: #fdc657; } .custom-checkbox input, .custom-checkbox .custom-control-input, .custom-radio input, .custom-radio .custom-control-input { outline: none; } .custom-checkbox input:focus~.custom-control-label:before, .custom-checkbox input:focus label:before, .custom-checkbox .custom-control-input:focus~.custom-control-label:before, .custom-checkbox .custom-control-input:focus label:before, .custom-radio input:focus~.custom-control-label:before, .custom-radio input:focus label:before, .custom-radio .custom-control-input:focus~.custom-control-label:before, .custom-radio .custom-control-input:focus label:before { -webkit-box-shadow: none; box-shadow: none; } .custom-checkbox input:checked~.custom-control-label:before, .custom-checkbox input:checked label:before, .custom-checkbox .custom-control-input:checked~.custom-control-label:before, .custom-checkbox .custom-control-input:checked label:before, .custom-radio input:checked~.custom-control-label:before, .custom-radio input:checked label:before, .custom-radio .custom-control-input:checked~.custom-control-label:before, .custom-radio .custom-control-input:checked label:before { background-color: #fdc657; border-color: #fdc657; } .custom-radio label:before, .custom-radio .custom-control-label:before { border-radius: 50%; height: 14px; width: 14px; } .custom-radio label:after, .custom-radio .custom-control-label:after { background-position: 1px 1px; background-size: 9px 8px; left: -13px; top: 2px; height: 10px; width: 10px; } /*=============================== Bootstrap Tooltip Customization ================================*/ .tooltip { z-index: 9999; } .tooltip .tooltip-inner { background-color: #fdc657; border-radius: 2px; font-size: 13px; line-height: 1; text-shadow: none; padding: 5px 10px 7px; } .tooltip .arrow:before { border-top-color: #fdc657 !important; } .tooltip.show { opacity: 1 !important; } /*=============================== Tippy Js Tooltip Customization ================================*/ .tippy-popper .tippy-tooltip { background-color: #fdc657; border-radius: 0; font-size: 12px; font-weight: 400; line-height: 1; padding: 8px; } .tippy-popper[x-placement^='top'] .tippy-arrow { border-top-color: #fdc657 !important; } .tippy-popper[x-placement^='bottom'] .tippy-arrow { border-bottom-color: #fdc657 !important; } .tippy-popper[x-placement^='left'] .tippy-arrow { border-left-color: #fdc657 !important; } .tippy-popper[x-placement^='right'] .tippy-arrow { border-right-color: #fdc657 !important; } /*======================= Buttons Style =========================*/ .btn-group .btn { margin-right: 20px; } .btn-group .btn:last-child { margin-right: 0; } .btn { border-radius: 0; border-width: 3px; font-size: 14px; font-weight: 600; color: #222222; text-transform: uppercase; outline: none; -webkit-box-shadow: none; box-shadow: none; -webkit-transition: 0.4s; -o-transition: 0.4s; transition: 0.4s; display: inline-block; padding: 20px 30px; } .btn i { margin-right: 5px; } @media only screen and (min-width: 768px) and (max-width: 991.98px), only screen and (max-width: 767.98px) { .btn { padding: 13px 25px; } } @media only screen and (max-width: 575.98px) { .btn { padding: 10px 15px; font-size: 13px; } } .btn:active, .btn:focus { -webkit-box-shadow: none; box-shadow: none; outline: none; } .btn-small { padding: 10px 15px; font-size: 11px; } .btn-brand { background-color: #fdc657; color: white; } .btn-brand:hover { background-color: #222222; color: #fdc657; } .btn-brand:active, .btn-brand:focus { color: #fff; } .btn-bordered, .btn-black, .single-banner-wrap:nth-child(2n) .btn-bordered:hover { border: 3px solid #222222; } .btn-bordered:hover, .btn-black:hover, .single-banner-wrap:nth-child(2n) .btn-bordered:hover { border-color: #fdc657; } .btn-black { background-color: #222222; color: #fff; } .btn-black:hover { background-color: #fdc657; border-color: #fdc657; color: #fff; } .btn-offWhite { background-color: #f2f2f2; color: #222222; } .btn-offWhite:hover { background-color: #fdc657; color: #fff; } .btn-event { border: 2px solid #222222; } .btn-event:hover { background-color: #222222; color: #fff; } .btn-transparent { border: 1px solid #fdc657; } .btn-transparent:hover { background-color: #fdc657; color: #fff; } .btn-append i { opacity: 0; visibility: hidden; -webkit-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; } .btn-append:hover i { opacity: 1; visibility: visible; padding-right: 10px; } .btn-wishlist { color: #666666; font-weight: 600; text-transform: uppercase; } .btn-wishlist:hover { color: #fdc657; } .btn-wishlist i { margin-right: 5px; } /*======================= Start Section title =========================*/ .section-title-wrap { font-size: 16px; font-weight: 600; line-height: 1.8; margin-bottom: 80px; padding-bottom: 50px; position: relative; } @media only screen and (min-width: 768px) and (max-width: 991.98px) { .section-title-wrap { margin-bottom: 60px; } } @media only screen and (max-width: 767.98px) { .section-title-wrap { font-size: 13px; font-weight: 500; margin-bottom: 50px; padding-bottom: 30px; } } .section-title-wrap:after { background-color: #fdc657; content: ''; position: absolute; bottom: 0; left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); height: 3px; width: 70px; } .section-title-wrap h2 { font-size: 26px; line-height: 1; font-weight: 600; text-transform: uppercase; margin-top: -4px; margin-bottom: 40px; } @media only screen and (max-width: 767.98px) { .section-title-wrap h2 { font-size: 22px; margin-bottom: 20px; } } .section-title-wrap.layout--2 { font-size: 15px; font-weight: 400; padding-bottom: 0; margin-bottom: 72px; } @media only screen and (min-width: 768px) and (max-width: 991.98px) { .section-title-wrap.layout--2 { margin-bottom: 53px; } } @media only screen and (max-width: 767.98px) { .section-title-wrap.layout--2 { font-size: 13px; font-weight: 500; margin-bottom: 45px; } } .section-title-wrap.layout--2 i.fa { color: #fdc657; font-size: 50px; line-height: 1; margin-bottom: 30px; } .section-title-wrap.layout--2 h2 { font-size: 40px; font-weight: 700; text-transform: capitalize; margin-bottom: 35px; } @media only screen and (max-width: 767.98px) { .section-title-wrap.layout--2 h2 { font-size: 30px; margin-bottom: 20px; } } .section-title-wrap.layout--2:after { display: none; } .section-title-wrap.layout--3 { padding-bottom: 20px; margin-bottom: 55px; } @media only screen and (min-width: 768px) and (max-width: 991.98px), only screen and (max-width: 767.98px) { .section-title-wrap.layout--3 { margin-bottom: 35px; } } .section-title-wrap.layout--3 h2 { margin-bottom: 0; } .section-title-wrap.left:after { left: 0; -webkit-transform: none; -ms-transform: none; transform: none; } .section-title-wrap p span { color: #fdc657; } .section-title-wrap.white { color: #fff; } .section-title-wrap.white h2 { color: #fff; } .section-title-wrap.white i.fa { color: #222222; } /*============================= Slick Slider Customization ===============================*/ .slick-slider { margin-bottom: 0; -webkit-transition: 0.4s; -o-transition: 0.4s; transition: 0.4s; } .slick-slider .slick-slide>div>div, .slick-slider .slick-slide>div>figure { vertical-align: middle; } .slick-slider .slick-dots { margin-top: 35px; text-align: center; line-height: 1; } .slick-slider .slick-dots li { border: 1px solid #D4D4D4; background-color: #D4D4D4; border-radius: 50%; cursor: pointer; display: inline-block; -webkit-transition: 0.4s; -o-transition: 0.4s; transition: 0.4s; margin-right: 10px; height: 10px; width: 10px; } .slick-slider .slick-dots li:hover, .slick-slider .slick-dots li.slick-active { background-color: #222222; border-color: #222222; } .slick-slider .slick-dots li button { display: none; } .slick-slider.dots-style-two .slick-dots li { border-color: rgba(255, 255, 255, 0.5); background-color: rgba(255, 255, 255, 0.5); margin-right: 20px; position: relative; } .slick-slider.dots-style-two .slick-dots li:before { background-color: rgba(255, 255, 255, 0.6); content: ""; position: absolute; left: 0; top: 0; height: 100%; width: 100%; border-radius: 50%; -webkit-transform: scale(2); -ms-transform: scale(2); transform: scale(2); opacity: 0; -webkit-transition: 0.4s; -o-transition: 0.4s; transition: 0.4s; } .slick-slider.dots-style-two .slick-dots li:hover, .slick-slider.dots-style-two .slick-dots li.slick-active { background-color: #fff; border-color: #fff; } .slick-slider.dots-style-two .slick-dots li:hover:before, .slick-slider.dots-style-two .slick-dots li.slick-active:before { display: block; opacity: 1; } .slick-slider.dots-style-three .slick-dots { bottom: 20px; position: absolute; margin: 0; width: 100%; } .slick-slider.slick-vertical .slick-arrow { top: 5px; left: 50%; -webkit-transform: translate(-50%, 0); -ms-transform: translate(-50%, 0); transform: translate(-50%, 0); } .slick-slider.slick-vertical .slick-arrow.slick-prev { top: auto; bottom: 10px; } .slick-slider img { width: 100%; } .slick-slider:hover .slick-arrow { opacity: 1; visibility: visible; pointer-events: visible; } .slick-slider.slick-row-3 .slick-list { margin: 0 -3px; } .slick-slider.slick-row-3 .slick-list .slick-slide { margin: 0 3px; } @media only screen and (max-width: 767.98px) { .slick-slider.slick-sm-row-3 .slick-list { margin: 0 -3px !important; } .slick-slider.slick-sm-row-3 .slick-list .slick-slide { margin: 0 3px !important; } } .slick-slider.slick-row-4 .slick-list { margin: 0 -4px; } .slick-slider.slick-row-4 .slick-list .slick-slide { margin: 0 4px; } @media only screen and (max-width: 767.98px) { .slick-slider.slick-sm-row-4 .slick-list { margin: 0 -4px !important; } .slick-slider.slick-sm-row-4 .slick-list .slick-slide { margin: 0 4px !important; } } .slick-slider.slick-row-5 .slick-list { margin: 0 -5px; } .slick-slider.slick-row-5 .slick-list .slick-slide { margin: 0 5px; } @media only screen and (max-width: 767.98px) { .slick-slider.slick-sm-row-5 .slick-list { margin: 0 -5px !important; } .slick-slider.slick-sm-row-5 .slick-list .slick-slide { margin: 0 5px !important; } } .slick-slider.slick-row-6 .slick-list { margin: 0 -6px; } .slick-slider.slick-row-6 .slick-list .slick-slide { margin: 0 6px; } @media only screen and (max-width: 767.98px) { .slick-slider.slick-sm-row-6 .slick-list { margin: 0 -6px !important; } .slick-slider.slick-sm-row-6 .slick-list .slick-slide { margin: 0 6px !important; } } .slick-slider.slick-row-7 .slick-list { margin: 0 -7px; } .slick-slider.slick-row-7 .slick-list .slick-slide { margin: 0 7px; } @media only screen and (max-width: 767.98px) { .slick-slider.slick-sm-row-7 .slick-list { margin: 0 -7px !important; } .slick-slider.slick-sm-row-7 .slick-list .slick-slide { margin: 0 7px !important; } } .slick-slider.slick-row-8 .slick-list { margin: 0 -8px; } .slick-slider.slick-row-8 .slick-list .slick-slide { margin: 0 8px; } @media only screen and (max-width: 767.98px) { .slick-slider.slick-sm-row-8 .slick-list { margin: 0 -8px !important; } .slick-slider.slick-sm-row-8 .slick-list .slick-slide { margin: 0 8px !important; } } .slick-slider.slick-row-9 .slick-list { margin: 0 -9px; } .slick-slider.slick-row-9 .slick-list .slick-slide { margin: 0 9px; } @media only screen and (max-width: 767.98px) { .slick-slider.slick-sm-row-9 .slick-list { margin: 0 -9px !important; } .slick-slider.slick-sm-row-9 .slick-list .slick-slide { margin: 0 9px !important; } } .slick-slider.slick-row-10 .slick-list { margin: 0 -10px; } .slick-slider.slick-row-10 .slick-list .slick-slide { margin: 0 10px; } @media only screen and (max-width: 767.98px) { .slick-slider.slick-sm-row-10 .slick-list { margin: 0 -10px !important; } .slick-slider.slick-sm-row-10 .slick-list .slick-slide { margin: 0 10px !important; } } .slick-slider.slick-row-11 .slick-list { margin: 0 -11px; } .slick-slider.slick-row-11 .slick-list .slick-slide { margin: 0 11px; } @media only screen and (max-width: 767.98px) { .slick-slider.slick-sm-row-11 .slick-list { margin: 0 -11px !important; } .slick-slider.slick-sm-row-11 .slick-list .slick-slide { margin: 0 11px !important; } } .slick-slider.slick-row-12 .slick-list { margin: 0 -12px; } .slick-slider.slick-row-12 .slick-list .slick-slide { margin: 0 12px; } @media only screen and (max-width: 767.98px) { .slick-slider.slick-sm-row-12 .slick-list { margin: 0 -12px !important; } .slick-slider.slick-sm-row-12 .slick-list .slick-slide { margin: 0 12px !important; } } .slick-slider.slick-row-13 .slick-list { margin: 0 -13px; } .slick-slider.slick-row-13 .slick-list .slick-slide { margin: 0 13px; } @media only screen and (max-width: 767.98px) { .slick-slider.slick-sm-row-13 .slick-list { margin: 0 -13px !important; } .slick-slider.slick-sm-row-13 .slick-list .slick-slide { margin: 0 13px !important; } } .slick-slider.slick-row-14 .slick-list { margin: 0 -14px; } .slick-slider.slick-row-14 .slick-list .slick-slide { margin: 0 14px; } @media only screen and (max-width: 767.98px) { .slick-slider.slick-sm-row-14 .slick-list { margin: 0 -14px !important; } .slick-slider.slick-sm-row-14 .slick-list .slick-slide { margin: 0 14px !important; } } .slick-slider.slick-row-15 .slick-list { margin: 0 -15px; } .slick-slider.slick-row-15 .slick-list .slick-slide { margin: 0 15px; } @media only screen and (max-width: 767.98px) { .slick-slider.slick-sm-row-15 .slick-list { margin: 0 -15px !important; } .slick-slider.slick-sm-row-15 .slick-list .slick-slide { margin: 0 15px !important; } } .ht-slick-nav button { color: rgba(34, 34, 34, 0.5); font-size: 40px; line-height: 1; position: absolute; left: -150px; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); -webkit-transition: 0.4s; -o-transition: 0.4s; transition: 0.4s; } @media only screen and (min-width: 1200px) and (max-width: 1599.98px), only screen and (min-width: 992px) and (max-width: 1199.98px) { .ht-slick-nav button { left: -100px; } } @media only screen and (min-width: 768px) and (max-width: 991.98px), only screen and (max-width: 767.98px) { .ht-slick-nav button { display: none !important; } } .ht-slick-nav button.next-arrow { left: auto; right: -150px; } @media only screen and (min-width: 1200px) and (max-width: 1599.98px), only screen and (min-width: 992px) and (max-width: 1199.98px) { .ht-slick-nav button.next-arrow { right: -100px; } } .ht-slick-nav button:hover { color: #222222; } .ht-slick-nav--two button { background-color: #f4f4f4; font-size: 30px; left: 0; height: 50px; width: 50px; } .ht-slick-nav--two button.gallery-next-arrow { left: auto; right: 0; } .ht-slick-nav--two button:hover { background-color: #fdc657; color: #fff; } .ht-slick-nav--three button { background-color: #fff; border-radius: 50px; color: #222222; font-size: 20px; line-height: 1; left: -50px; height: 100px; width: 100px; } .ht-slick-nav--three button:hover { background-color: #fdc657; color: #fff; } .ht-slick-nav--three button i { padding-left: 35px; } .ht-slick-nav--three button.next-arrow, .ht-slick-nav--three button.next-arrow-cat { left: auto; right: -50px; } .ht-slick-nav--three button.next-arrow i, .ht-slick-nav--three button.next-arrow-cat i { padding-left: 0; padding-right: 35px; } .ht-slick-nav--four button { color: #fff; } .ht-slick-nav--four button:hover { color: #fdc657; } .ht-slick-nav--five button { left: 100px; } .ht-slick-nav--five button.next-arrow { right: 100px; } .ht-slick-slider-wrapper { position: relative; } .ht-slick-slider-wrapper .slick-disabled { cursor: not-allowed; } .ht-slick-slider-wrapper:hover .ht-slick-nav button { opacity: 1; visibility: visible; } /*============================= Magnific Popup Customization ===============================*/ .mfp-wrap.imagesGallery .mfp-container .mfp-close { display: none; } .mfp-wrap.imagesGallery .mfp-arrow { opacity: 1; height: 65px; } .mfp-wrap.imagesGallery .mfp-arrow:before { color: #fff; border: 1px solid #fdc657; border-radius: 50%; font-family: "FontAwesome"; font-size: 20px; text-align: center; opacity: 1; -webkit-transition: 0.4s; -o-transition: 0.4s; transition: 0.4s; line-height: 48px; height: 50px; width: 50px; } .mfp-wrap.imagesGallery .mfp-arrow:after { display: none; } .mfp-wrap.imagesGallery .mfp-arrow-left:before { content: '\f104'; } .mfp-wrap.imagesGallery .mfp-arrow-right { margin-right: 20px; } .mfp-wrap.imagesGallery .mfp-arrow-right:before { content: '\f105'; } .mfp-wrap.imagesGallery .mfp-arrow:hover:before { background-color: #fdc657; } .mfp-wrap.imagesGallery .mfp-close { color: #fff; border: 1px solid #fdc657; border-radius: 50%; font-family: "FontAwesome"; font-size: 20px; text-align: center; opacity: 1; right: 30px; top: 30px; -webkit-transition: 0.4s; -o-transition: 0.4s; transition: 0.4s; line-height: 48px; height: 50px; width: 50px; } @media only screen and (max-width: 767.98px) { .mfp-wrap.imagesGallery .mfp-close { line-height: 33px; height: 35px; width: 35px; } } .mfp-wrap.imagesGallery .mfp-close:hover { background-color: #fdc657; } .mfp-wrap.imagesGallery .mfp-bottom-bar { background-color: #fdc657; height: 30px; padding: 0 20px; margin-top: -40px; } .mfp-wrap.imagesGallery .mfp-bottom-bar .mfp-counter { color: #222222; font-size: 16px; line-height: 2; padding: 0 10px; text-align: center; width: 100%; } .mfp-wrap.video-popup-wrap.mfp-ready .mfp-content { border: 10px solid #fdc657; -webkit-animation: fadeInDown 0.5s forwards; animation: fadeInDown 0.5s forwards; } .mfp-wrap.video-popup-wrap .mfp-close { background-color: #222222; height: 60px; width: 60px; opacity: 1; text-align: center; line-height: 60px; padding: 0; top: -70px; right: -10px; } @media only screen and (min-width: 1200px) { .mfp-wrap.video-popup-wrap .mfp-close { left: calc(100% + 10px); right: auto; top: -10px; } } .mfp-wrap.video-popup-wrap .mfp-close:hover { background-color: #fdc657; } .mfp-wrap.mfp-auto-cursor { cursor: url("../img/icons/cancel.png"), auto; } /*=========================== Start Page Breadcrumb ============================*/ .page-breadcrumb-wrapper { background-color: #fff9f9; padding: 80px 0 70px; } @media only screen and (max-width: 767.98px) { .page-breadcrumb-wrapper { padding: 53px 0; } } .page-breadcrumb-wrapper h1 { font-size: 32px; line-height: 1; font-weight: 500; letter-spacing: 1.2px; margin-top: -3px; margin-bottom: 23px; } @media only screen and (max-width: 767.98px) { .page-breadcrumb-wrapper h1 { margin-bottom: 13px; } } @media only screen and (max-width: 575.98px) { .page-breadcrumb-wrapper h1 { font-size: 26px; line-height: 1.5; } } .breadcrumb { background-color: transparent; border-radius: 0; margin: 0; padding: 0; } .breadcrumb li:first-child:before { display: none; } .breadcrumb li:before { content: '>'; color: #000; font-weight: 700; vertical-align: middle; padding-left: 10px; margin-right: 10px; } .breadcrumb a { color: #000; font-size: 14px; line-height: 1; font-weight: 500; } .breadcrumb a:hover { color: #fdc657; } .breadcrumb a.active { color: #8d8d8d; cursor: not-allowed; pointer-events: none; } /*================== Dropcaps Style ====================*/ .dropcap { color: #222222; display: block; float: left; font-size: 60px; height: 48px; line-height: 48px; margin-right: 10px; margin-top: 6px; text-transform: uppercase; } .dropcap-brand { color: #fdc657; } .dropcap-rounded { border-radius: 50%; color: #fff; font-size: 24px; text-align: center; line-height: 40px; height: 40px; width: 40px; } .dropcap-square { color: #fff; font-size: 24px; text-align: center; line-height: 40px; height: 40px; width: 40px; } /*============== List Style ================*/ .list { line-height: 2.5; } .list li i, .list li span { color: #222222; margin-right: 10px; font-weight: 600; } .list li ul { margin-left: 25px; font-size: 90%; } /*============================= Short Classes ===============================*/ .bg-img { background: #dddddd no-repeat center center; background-size: cover; } .off-white-bg { background-color: #f4f4f4; } .custom-width { max-width: 1360px; margin: auto; } @media screen and (min-width: 1600px) { .container-fluid { padding: 0 100px; } } .parallaxBg { background-attachment: fixed; } .fix { overflow: hidden; } .fix-x { overflow-x: hidden; } .fix-y { overflow-y: hidden; } .hv-100 { height: 100vh; } @media only screen and (min-width: 768px) and (max-width: 991.98px), only screen and (max-width: 767.98px) { .hv-100 { height: auto; } } .w-25 { width: 25%; } @media only screen and (max-width: 767.98px) { .w-sm-25 { width: 25% !important; } } @media only screen and (min-width: 768px) and (max-width: 991.98px) { .w-md-25 { width: 25% !important; } } .w-50 { width: 50%; } @media only screen and (max-width: 767.98px) { .w-sm-50 { width: 50% !important; } } @media only screen and (min-width: 768px) and (max-width: 991.98px) { .w-md-50 { width: 50% !important; } } .w-75 { width: 75%; } @media only screen and (max-width: 767.98px) { .w-sm-75 { width: 75% !important; } } @media only screen and (min-width: 768px) and (max-width: 991.98px) { .w-md-75 { width: 75% !important; } } .w-100 { width: 100%; } @media only screen and (max-width: 767.98px) { .w-sm-100 { width: 100% !important; } } @media only screen and (min-width: 768px) and (max-width: 991.98px) { .w-md-100 { width: 100% !important; } } mark, .mark { background-color: #222222; color: #fff; } .parallaxBg { position: relative; z-index: 0; } .parallaxBg>.jarallax-img { position: absolute; -o-object-fit: cover; object-fit: cover; /* support for plugin https://github.com/bfred-it/object-fit-images */ font-family: 'object-fit: cover;'; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; } /*======================= 01. Background Colors ==========================*/ .bg-egg-white { background-color: #FFEFBF; } .bg-offwhite { background-color: #f4f4f4; } .bg-ash { background-color: #f1f1f1; } .bg-soft-pink { background-color: #FFCFBF; } .bg-dodger-blue { background-color: #cde2ff; } .bg-magic-mint { background-color: #AFF1D3; } .bg-brand { background-color: #fdc657; } .bg-black { background-color: #000 !important; } .bg-soft-black { background-color: #222222; } .bg-blue { background-color: #0c2542; } .bg-soft-sweet { background-color: #FFDFBF; } .product-tab-wrapper .slick-list .slick-active:first-child, .product-tab-wrapper .slick-list .slick-active:last-child { opacity: 0.4; } /*============================= 02. Start Header Area Wrapper ===============================*/ .header-area-wrapper { padding: 70px 0; } @media only screen and (min-width: 768px) and (max-width: 991.98px) { .header-area-wrapper { padding: 40px 0; } } @media only screen and (max-width: 767.98px) { .header-area-wrapper { padding: 30px 0; } } @media only screen and (min-width: 768px) and (max-width: 991.98px), only screen and (max-width: 767.98px) { .header-area-wrapper button, .header-area-wrapper a { font-size: 20px; } } .header-area-wrapper .cart-button { position: relative; } .header-area-wrapper .cart-button .count { background-color: #222222; color: #fff; border-radius: 50%; display: block; font-weight: 700; font-size: 11px; text-align: center; position: absolute; top: -7px; right: -10px; line-height: 14px; height: 15px; width: 15px; } .header-area-wrapper .row { -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .logo-wrap img.sticky-logo { display: none; } .off-canvas-area-wrap { margin-left: 60px; } @media only screen and (min-width: 768px) and (max-width: 991.98px), only screen and (max-width: 767.98px) { .off-canvas-area-wrap { margin-left: 0; } } .off-canvas-area-wrap button, .off-canvas-area-wrap a { color: white; line-height: 1; -webkit-transition: 0.4s; -o-transition: 0.4s; transition: 0.4s; margin-right: 30px; } .off-canvas-area-wrap button:last-child, .off-canvas-area-wrap a:last-child { margin-right: 0; } .off-canvas-area-wrap button:hover, .off-canvas-area-wrap a:hover { color: #fdc657; } .off-canvas-area-wrap button .bar-txt, .off-canvas-area-wrap a .bar-txt { text-transform: uppercase; font-weight: 600; margin-right: 100px; } @media only screen and (min-width: 992px) and (max-width: 1199.98px) { .off-canvas-area-wrap.header-center { margin-left: 45px; } } .sticky-header { position: fixed; top: 0; right: 0; left: 0; -webkit-transition: padding 0.5s; -o-transition: padding 0.5s; transition: padding 0.5s; z-index: 1030; } .sticky-header.sticky { background-color: white; -webkit-box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05); box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05); padding: 25px 0; -webkit-animation: fadeInDown 1s forwards; animation: fadeInDown 1s forwards; } .sticky-header.sticky * { color: #222222; } .sticky-header.sticky *:hover { color: #fdc657; } .sticky-header.sticky .logo-wrap img { display: none; } .sticky-header.sticky .logo-wrap img.sticky-logo { display: inline-block; } .sticky-header.sticky .main-menu>.dropdown-navbar>.dropdown-nav { margin-top: 29px; } .sticky-header.sticky .main-menu>.dropdown-navbar>.dropdown-nav:before { height: 30px; } .sticky-header.sticky .header-left-wrapper:before, .sticky-header.sticky .off-canvas-area-wrap:before { height: 20px !important; } .black-header .sticky-logo { display: inline-block !important; } .black-header ul li a { color: #222222; } .black-header button, .black-header a { color: #222222; } .header-padding { padding: 41px 0; -webkit-box-shadow: none; box-shadow: none; } @media only screen and (max-width: 767.98px) { .header-padding { padding: 25px 0; } } .header-four { border-bottom: 1px solid rgba(255, 255, 255, 0.2); padding: 41px 0; } @media only screen and (min-width: 1200px) and (max-width: 1599.98px), only screen and (min-width: 992px) and (max-width: 1199.98px) { .header-four .container-fluid { padding: 0 15px; } } .header-four .header-left-wrapper { position: relative; padding-right: 60px; margin-right: 60px; } @media only screen and (min-width: 992px) and (max-width: 1199.98px) { .header-four .header-left-wrapper { padding-right: 20px; margin-right: 20px; } } @media only screen and (min-width: 768px) and (max-width: 991.98px), only screen and (max-width: 767.98px) { .header-four .header-left-wrapper { padding-right: 0; margin-right: 0; } } .header-four .header-left-wrapper:before { background-color: rgba(255, 255, 255, 0.2); content: ""; position: absolute; right: 0; top: -42px; -webkit-transition: 0.2s; -o-transition: 0.2s; transition: 0.2s; height: 107px; width: 1px; } @media only screen and (min-width: 768px) and (max-width: 991.98px), only screen and (max-width: 767.98px) { .header-four .header-left-wrapper:before { display: none; } } @media only screen and (min-width: 1200px), only screen and (min-width: 992px) and (max-width: 1199.98px) { .header-four .header-right-wrapper { width: 100%; } } .header-four .header-right-wrapper .off-canvas-area-wrap { position: relative; padding-left: 60px; } @media (max-width: 1599px) { .header-four .header-right-wrapper .off-canvas-area-wrap { padding-left: 15px; margin-left: 15px; } } .header-four .header-right-wrapper .off-canvas-area-wrap:before { background-color: rgba(255, 255, 255, 0.2); content: ""; position: absolute; left: 0; top: -47px; -webkit-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; height: 107px; width: 1px; display: none; } @media (min-width: 1600px) { .header-four .header-right-wrapper .off-canvas-area-wrap:before { display: block; } } @media only screen and (min-width: 1200px) and (max-width: 1599.98px), only screen and (min-width: 992px) and (max-width: 1199.98px) { .header-four .header-right-wrapper .off-canvas-area-wrap .off-canvas-btn { font-size: 20px; line-height: 1; color: #aaaaaa; } } @media only screen and (min-width: 1200px) and (max-width: 1599.98px), only screen and (min-width: 992px) and (max-width: 1199.98px) { .header-four .header-right-wrapper .off-canvas-area-wrap .off-canvas-btn .bar-txt { display: none; } } @media only screen and (min-width: 768px) and (max-width: 991.98px), only screen and (max-width: 767.98px) { .header-four .header-right-wrapper .footer-social-icons a { font-size: 20px; color: #fff; } } .header-fix-left { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; padding: 50px 15px 0; max-width: 1140px; margin: auto; z-index: 999; } @media only screen and (min-width: 992px) and (max-width: 1199.98px) { .header-fix-left { max-width: 960px; } } @media only screen and (min-width: 768px) and (max-width: 991.98px) { .header-fix-left { max-width: 720px; } } @media only screen and (max-width: 767.98px) { .header-fix-left { max-width: 540px; } } @media screen and (min-width: 991.99px) and (max-width: 1599.99px) { .header-fix-left { -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; } .header-fix-left .logo-area-wrap { margin-right: 100px; } } @media screen and (min-width: 1600px) { .header-fix-left { padding: 0; position: fixed; top: 0; left: 0; height: 100vh; display: block; max-width: 265px; width: 100%; } .header-fix-left .logo-area-wrap { margin-bottom: 60px; padding: 114px 80px 0; } .header-fix-left .main-menu.nav { display: block !important; width: 200px; } .header-fix-left .main-menu.nav>li { margin-bottom: 10px; margin-right: 0; } .header-fix-left .main-menu.nav>li:last-child { margin-bottom: 0; } .header-fix-left .main-menu.nav>li a { padding: 10px 80px; } .header-fix-left .main-menu.nav>li .dropdown-nav { left: 100%; top: 0; margin-top: -50px; } .header-fix-left .main-menu.nav>li .dropdown-nav.mega-menu-wrap { min-width: 1140px; } .header-fix-left .main-menu.nav .full-width { position: relative; } .header-fix-left .main-menu.nav>.arrow>a:after { content: '\f105'; } } .header-fix-left-two { padding: 41px 15px; } @media screen and (min-width: 1600px) { .header-fix-left-two { background-color: #fff; padding: 0; -webkit-box-shadow: 0 1px 10px rgba(0, 0, 0, 0.1); box-shadow: 0 1px 10px rgba(0, 0, 0, 0.1); } .header-fix-left-two .logo-area-wrap { padding: 0; margin: 100px 0 80px; text-align: center; } .header-fix-left-two .main-menu { text-align: center; } .header-fix-left-two .main-menu.nav { width: auto; } .header-fix-left-two .main-menu.nav>li { margin-bottom: 0; border-bottom: 1px solid rgba(0, 0, 0, 0.05); } .header-fix-left-two .main-menu.nav>li:last-child { border-bottom: 0; } .header-fix-left-two .main-menu.nav>li:hover>a { background-color: #fdc657; color: #fff; } .header-fix-left-two .main-menu.nav>li>a { padding: 25px 10px; display: block; } .header-fix-left-two .main-menu.nav>li ul { text-align: left; } } /*====================== Start Search Box Area ========================*/ .off-canvas-search-box.show .off-canvas-overlay { background-color: rgba(255, 255, 255, 0.8) !important; } .off-canvas-search-box.show .search-box-content { opacity: 1; visibility: visible; -webkit-animation: slideInUp 1s forwards; animation: slideInUp 1s forwards; } .search-box-wrapper { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); width: 100%; } .search-box-content { -webkit-transition: 0.5s; -o-transition: 0.5s; transition: 0.5s; opacity: 0; visibility: hidden; } .search-box-content form { -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.2); box-shadow: 0 0 5px rgba(0, 0, 0, 0.2); position: relative; width: 90%; margin: auto; } .search-box-content input { background-color: #fff; border: none; outline: none; padding: 15px 80px 15px 15px; display: block; width: 100%; } .search-box-content .btn-search { background-color: #fdc657; color: #fff; position: absolute; right: 0; top: 0; text-align: center; -webkit-transition: 0.5s; -o-transition: 0.5s; transition: 0.5s; height: 100%; width: 60px; } .search-box-content .btn-search:hover { background-color: #222222; } /*================================= Start Off Canvas Area Wrapper ==================================*/ .off-canvas-area-wrapper, .off-canvas-responsive-menu, .off-canvas-search-box { opacity: 0; visibility: hidden; pointer-events: none; position: fixed; top: 0; right: 0; -webkit-transition: 0.4s; -o-transition: 0.4s; transition: 0.4s; height: 100vh; width: 100vw; } .off-canvas-area-wrapper .off-canvas-content-wrap, .off-canvas-responsive-menu .off-canvas-content-wrap, .off-canvas-search-box .off-canvas-content-wrap { background-color: white; margin-left: auto; height: 100%; position: relative; -webkit-transform: translateX(calc(100% + 40px)); -ms-transform: translateX(calc(100% + 40px)); transform: translateX(calc(100% + 40px)); -webkit-transition: 0.4s; -o-transition: 0.4s; transition: 0.4s; max-width: 360px; width: 100%; } @media only screen and (max-width: 575.98px) { .off-canvas-area-wrapper .off-canvas-content-wrap, .off-canvas-responsive-menu .off-canvas-content-wrap, .off-canvas-search-box .off-canvas-content-wrap { max-width: 250px !important; } } .off-canvas-area-wrapper .off-canvas-content-wrap .off-canvas-content, .off-canvas-responsive-menu .off-canvas-content-wrap .off-canvas-content, .off-canvas-search-box .off-canvas-content-wrap .off-canvas-content { padding: 40px; height: 100%; overflow-y: auto; } @media only screen and (max-width: 575.98px) { .off-canvas-area-wrapper .off-canvas-content-wrap .off-canvas-content, .off-canvas-responsive-menu .off-canvas-content-wrap .off-canvas-content, .off-canvas-search-box .off-canvas-content-wrap .off-canvas-content { padding: 30px 15px; } } .off-canvas-area-wrapper .off-canvas-content-wrap .off-canvas-content .off-canvas-item, .off-canvas-responsive-menu .off-canvas-content-wrap .off-canvas-content .off-canvas-item, .off-canvas-search-box .off-canvas-content-wrap .off-canvas-content .off-canvas-item { margin-bottom: 60px; } .off-canvas-area-wrapper .off-canvas-content-wrap .off-canvas-content .off-canvas-item:last-child, .off-canvas-responsive-menu .off-canvas-content-wrap .off-canvas-content .off-canvas-item:last-child, .off-canvas-search-box .off-canvas-content-wrap .off-canvas-content .off-canvas-item:last-child { margin-bottom: 0; } .off-canvas-area-wrapper .off-canvas-content-wrap .off-canvas-content .off-canvas-item h2, .off-canvas-responsive-menu .off-canvas-content-wrap .off-canvas-content .off-canvas-item h2, .off-canvas-search-box .off-canvas-content-wrap .off-canvas-content .off-canvas-item h2 { font-size: 16px; line-height: 1; font-weight: 600; text-transform: uppercase; margin-bottom: 23px; margin-top: -2px; } .off-canvas-area-wrapper .off-canvas-content-wrap .btn-close, .off-canvas-responsive-menu .off-canvas-content-wrap .btn-close, .off-canvas-search-box .off-canvas-content-wrap .btn-close { background-color: white; position: absolute; right: 100%; top: 100px; line-height: 40px; height: 40px; width: 40px; } .off-canvas-area-wrapper .off-canvas-content-wrap .btn-close:hover, .off-canvas-responsive-menu .off-canvas-content-wrap .btn-close:hover, .off-canvas-search-box .off-canvas-content-wrap .btn-close:hover { background-color: #fdc657; color: white; } .off-canvas-area-wrapper.show, .off-canvas-responsive-menu.show, .off-canvas-search-box.show { opacity: 1; visibility: visible; pointer-events: visible; z-index: 9999; } .off-canvas-area-wrapper.show .off-canvas-overlay, .off-canvas-responsive-menu.show .off-canvas-overlay, .off-canvas-search-box.show .off-canvas-overlay { background-color: rgba(0, 0, 0, 0.5); content: ""; cursor: url("../img/icons/cancel.png"), auto; position: absolute; left: 0; top: 0; height: 100%; width: 100%; z-index: -1; } .off-canvas-area-wrapper.show .off-canvas-content-wrap, .off-canvas-responsive-menu.show .off-canvas-content-wrap, .off-canvas-search-box.show .off-canvas-content-wrap { -webkit-transform: none; -ms-transform: none; transform: none; } .search-box-wrap { background-color: #f4f4f4; margin: -40px -40px 0 -40px; padding: 35px 40px; } @media only screen and (max-width: 575.98px) { .search-box-wrap { margin: -30px -15px 0 -15px; } } .search-box-wrap form { position: relative; } .search-box-wrap form input { background-color: transparent; border: none; display: block; padding-right: 20px; outline: none; width: 100%; } .search-box-wrap form .btn-search { font-size: 13px; position: absolute; right: 0; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); } .useful-link-menu { margin-top: -20px; overflow: hidden; } .useful-link-menu li { float: left; margin-top: 20px; max-width: 50%; width: 100%; } .useful-link-menu li a { color: #666666; font-size: 14px; line-height: 1; font-weight: 700; text-transform: uppercase; } .useful-link-menu li a:hover { color: #fdc657; } .social-links { position: relative; } .social-links a { background-color: #f4f4f4; border-radius: 50%; color: #666666; display: inline-block; text-align: center; line-height: 40px; margin-right: 10px; height: 40px; width: 40px; } .social-links a:last-child { margin-right: 0; } .social-links a:hover { background-color: #fdc657; color: white; } /*======================= 05. Quick View Style Here =========================*/ #quick-view.modal { display: block !important; opacity: 0; visibility: hidden; pointer-events: none; -webkit-transition: 0.4s; -o-transition: 0.4s; transition: 0.4s; -webkit-animation: fadeOut 0.3s forwards; animation: fadeOut 0.3s forwards; } #quick-view.modal.show { opacity: 1; visibility: visible; pointer-events: visible; z-index: 9999; -webkit-animation: fadeIn 0.3s forwards; animation: fadeIn 0.3s forwards; } #quick-view.modal .modal-content { border: none; border-radius: 0; } @media only screen and (max-width: 767.98px) { #quick-view.modal .modal-content { max-height: 400px; overflow-x: hidden; overflow-y: auto; } } #quick-view.modal .modal-dialog { max-width: 920px; } @media only screen and (min-width: 768px) and (max-width: 991.98px) { #quick-view.modal .modal-dialog { max-width: 720px; } } @media only screen and (max-width: 767.98px) { #quick-view.modal .modal-dialog { max-width: 540px; } } #quick-view.modal .modal-dialog .modal-body { padding: 0; } #quick-view.modal .modal-dialog .close { background-color: #222222; font-weight: 400; color: #fff; opacity: 1; height: 60px; width: 60px; position: absolute; top: 0; left: 100%; z-index: 99; } #quick-view.modal .modal-dialog .close:hover { background-color: #fcac0b; } @media only screen and (max-width: 767.98px), only screen and (min-width: 768px) and (max-width: 991.98px), only screen and (min-width: 992px) and (max-width: 1199.98px), only screen and (min-width: 1200px) and (max-width: 1599.98px) { #quick-view.modal .modal-dialog .close { left: auto; right: 0; top: 0; height: 40px; width: 40px; } } @media only screen and (min-width: 992px) and (max-width: 1199.98px), only screen and (min-width: 1200px) and (max-width: 1599.98px) { #quick-view.modal .modal-dialog .close { top: auto; bottom: 100%; } } #quick-view .product-thumb-area { max-height: 450px; overflow: hidden; } @media only screen and (max-width: 767.98px) { #quick-view .product-thumb-area { max-height: 250px; } } #quick-view .product-details-info-content-wrap { padding: 0 30px 0 0; max-height: 450px; overflow-x: hidden; overflow-y: auto; position: relative; } @media only screen and (min-width: 768px) and (max-width: 991.98px) { #quick-view .product-details-info-content-wrap { max-height: 352px; } } @media only screen and (max-width: 767.98px) { #quick-view .product-details-info-content-wrap { max-height: inherit; height: 100%; padding: 0 30px; } } @media only screen and (max-width: 575.98px) { #quick-view .product-details-info-content-wrap { padding: 0 15px; } } #quick-view .product-details-info-content-wrap .prod-details-info-content { padding: 50px 0; } #quick-view .product-details-info-content-wrap .prod-details-info-content h2 { font-weight: 500; } @media only screen and (min-width: 768px) and (max-width: 991.98px) { #quick-view .product-details-info-content-wrap .prod-details-info-content h2 { font-size: 30px; } } /*========================= 06. Start Page Header Area ===========================*/ .page-header-wrapper .page-header-content { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; height: 350px; } @media only screen and (min-width: 768px) and (max-width: 991.98px) { .page-header-wrapper .page-header-content { height: 220px; } } @media only screen and (max-width: 767.98px) { .page-header-wrapper .page-header-content { height: 160px; } } .page-header-wrapper .page-header-content h1 { font-size: 60px; line-height: 1; font-weight: 500; text-transform: uppercase; margin-bottom: 0; } @media only screen and (min-width: 768px) and (max-width: 991.98px) { .page-header-wrapper .page-header-content h1 { font-size: 50px; } } @media only screen and (max-width: 767.98px) { .page-header-wrapper .page-header-content h1 { font-size: 35px; } } .page-header-wrapper .page-header-content.layout--2 { color: #fff; margin-top: 90px; height: 400px; } @media only screen and (min-width: 768px) and (max-width: 991.98px) { .page-header-wrapper .page-header-content.layout--2 { height: 220px; margin-top: 70px; } } @media only screen and (max-width: 767.98px) { .page-header-wrapper .page-header-content.layout--2 { height: 160px; margin-top: 70px; } } .page-header-wrapper .page-header-content.layout--2 h1 { color: #fff; } /*---------------------------- Start Main Navigation Wrap ------------------------------*/ .main-menu>li { margin-right: 60px; line-height: 1; } .main-menu>li:last-child { margin-right: 0; } @media only screen and (min-width: 1200px) and (max-width: 1599.98px) { .main-menu>li { margin-right: 40px; } } @media only screen and (min-width: 992px) and (max-width: 1199.98px) { .main-menu>li { margin-right: 35px; } } .main-menu>li:hover>a { color: #fdc657; } .main-menu>li.active>a { color: #fdc657; } .main-menu>li a { color: white; display: inline-block; font-size: 14px; font-weight: 600; text-transform: uppercase; } .dropdown-navbar { position: relative; } .dropdown-navbar.arrow>a:after { content: '\f107'; font-family: "FontAwesome"; font-size: 1rem; font-weight: 300; margin-left: 10px; } .dropdown-navbar .dropdown-nav { background-color: white; -webkit-box-shadow: 0 0 20px rgba(0, 0, 0, 0.1); box-shadow: 0 0 20px rgba(0, 0, 0, 0.1); padding: 25px 0; margin-top: 45px; position: absolute; left: -50px; -webkit-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; -webkit-transform: translateY(10px); -ms-transform: translateY(10px); transform: translateY(10px); opacity: 0; visibility: hidden; pointer-events: none; min-width: 320px; width: 100%; z-index: 99; } .dropdown-navbar .dropdown-nav:before { content: ""; bottom: 100%; left: 0; position: absolute; height: 45px; width: 100%; } .dropdown-navbar .dropdown-nav>li { margin-bottom: 5px; padding: 0 30px; } .dropdown-navbar .dropdown-nav>li:last-child { margin-bottom: 0; } .dropdown-navbar .dropdown-nav>li a:not(.mega-title) { color: #666666; font-weight: 400; text-transform: capitalize; padding: 10px 0; position: relative; } .dropdown-navbar .dropdown-nav>li a:not(.mega-title):before { background-color: #fdc657; content: ""; position: absolute; left: auto; right: 0; bottom: 5px; height: 2px; -webkit-transition: 0.4s; -o-transition: 0.4s; transition: 0.4s; width: 0; } .dropdown-navbar .dropdown-nav>li:hover>a { color: #000; } .dropdown-navbar .dropdown-nav>li:hover>a:before { left: 0; right: auto; width: 100%; } .dropdown-navbar .dropdown-nav .dropdown-navbar .dropdown-nav { left: 100%; top: 0; margin-top: -25px; } .dropdown-navbar .dropdown-nav .dropdown-navbar .dropdown-nav li a:before { display: none; } .dropdown-navbar .dropdown-nav .dropdown-navbar.arrow:after { background-color: #666666; content: ''; display: block; position: absolute; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); right: 30px; height: 6px; width: 6px; } .dropdown-navbar .dropdown-nav .dropdown-navbar.arrow:hover:after { background-color: black; } .dropdown-navbar .dropdown-nav .dropdown-navbar.arrow a:after { display: none; } .dropdown-navbar:hover>.dropdown-nav { -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); opacity: 1; visibility: visible; pointer-events: visible; } .dropdown-navbar .mega-menu-wrap { display: -webkit-box; display: -ms-flexbox; display: flex; padding: 0; white-space: nowrap; width: auto; } .dropdown-navbar .mega-menu-wrap .mega-menu-item { border-right: 1px solid #e7e7e7; padding: 25px 30px; min-width: 280px; width: 100%; } @media only screen and (min-width: 992px) and (max-width: 1199.98px), only screen and (min-width: 1200px) and (max-width: 1599.98px) { .dropdown-navbar .mega-menu-wrap .mega-menu-item { min-width: 245px; } } .dropdown-navbar .mega-menu-wrap .mega-menu-item ul li { margin-bottom: 5px; } .dropdown-navbar .mega-menu-wrap .mega-menu-item ul li:last-child { margin-bottom: 0; } .dropdown-navbar .mega-menu-wrap .mega-menu-item ul li a:hover { color: black; } .dropdown-navbar .mega-menu-wrap .mega-menu-item .mega-title { color: #222222; font-weight: 600; margin-bottom: 7px; padding: 10px 0; text-transform: uppercase; } .dropdown-navbar.full-width { position: static; } .dropdown-navbar.full-width .dropdown-nav { right: 15px; left: auto; max-width: 1140px; width: 100%; } @media only screen and (min-width: 992px) and (max-width: 1199.98px) { .dropdown-navbar.full-width .dropdown-nav { right: 0; } } @media only screen and (min-width: 992px) and (max-width: 1199.98px) { .dropdown-navbar.full-width .dropdown-nav li a { white-space: normal; font-size: 13px; line-height: 1.3; } } .dropdown-navbar.bg-menu .mega-menu-wrap { background: #fff url("../img/extra/bg-menu.jpg") no-repeat bottom right; background-size: 50%; } .dropdown-navbar.bg-menu .mega-menu-wrap .mega-menu-item { border-right: 0; } @media (min-width: 1400px) { .header-area-wrapper .row { position: relative; } } .navigation-area-wrap.align-left .main-menu .dropdown-navbar.full-width .dropdown-nav { left: 15px; right: auto; } @media only screen and (min-width: 992px) and (max-width: 1199.98px) { .navigation-area-wrap.align-left .main-menu .dropdown-navbar.full-width .dropdown-nav { left: 0; } } .navigation-area-wrap.align-center .main-menu .dropdown-navbar.full-width .dropdown-nav { left: 50%; right: auto; -webkit-transform: translate(-50%, 10px); -ms-transform: translate(-50%, 10px); transform: translate(-50%, 10px); } .navigation-area-wrap.align-center .main-menu .dropdown-navbar.full-width:hover .dropdown-nav { -webkit-transform: translate(-50%, 0); -ms-transform: translate(-50%, 0); transform: translate(-50%, 0); } .off-canvas-responsive-menu { right: auto; left: 0; } .off-canvas-responsive-menu.show .off-canvas-content-wrap { -webkit-transform: none !important; -ms-transform: none !important; transform: none !important; } .off-canvas-responsive-menu .off-canvas-content-wrap { margin-left: inherit !important; -webkit-transform: translateX(-100%) !important; -ms-transform: translateX(-100%) !important; transform: translateX(-100%) !important; } .off-canvas-responsive-menu .off-canvas-content-wrap .off-canvas-content { padding: 0 !important; } .off-canvas-responsive-menu .off-canvas-content-wrap .btn-close { right: auto; left: 100%; top: 0 !important; } .off-canvas-responsive-menu .off-canvas-content-wrap .slicknav_menu { padding: 0; } .off-canvas-responsive-menu .off-canvas-content-wrap .slicknav_menu .slicknav_btn { display: none; } .off-canvas-responsive-menu .off-canvas-content-wrap .slicknav_menu .slicknav_nav { background-color: white; display: block !important; } .off-canvas-responsive-menu .off-canvas-content-wrap .slicknav_menu .slicknav_nav li { border-bottom: 1px solid #e7e7e7; position: relative; } .off-canvas-responsive-menu .off-canvas-content-wrap .slicknav_menu .slicknav_nav li a { color: #666666; font-size: 15px; padding: 10px; margin: 0; text-transform: capitalize; } .off-canvas-responsive-menu .off-canvas-content-wrap .slicknav_menu .slicknav_nav li a .slicknav_arrow { background-color: rgba(238, 238, 238, 0.5); color: #666666; font-size: 18px; display: block; text-align: center; margin: 0; height: 100%; position: absolute; right: 0; top: 0; line-height: 42px; width: 50px; } .off-canvas-responsive-menu .off-canvas-content-wrap .slicknav_menu .slicknav_nav li a a { padding: 0; } .off-canvas-responsive-menu .off-canvas-content-wrap .slicknav_menu .slicknav_nav li a:hover { background-color: transparent; } .off-canvas-responsive-menu .off-canvas-content-wrap .slicknav_menu .slicknav_nav li ul { background-color: #dddddd; margin: 0; } .off-canvas-responsive-menu .off-canvas-content-wrap .slicknav_menu .slicknav_nav li ul li a { font-size: 13px; } .off-canvas-responsive-menu .off-canvas-content-wrap .slicknav_menu .slicknav_nav li ul li ul { background-color: #eeeeee; } .off-canvas-responsive-menu .off-canvas-content-wrap .slicknav_menu .slicknav_nav .slicknav_open>.slicknav_item { position: relative; } .off-canvas-responsive-menu .off-canvas-content-wrap .slicknav_menu .slicknav_nav .slicknav_open>.slicknav_item .slicknav_arrow { background-color: #fdc657; color: #fff; } li.new a { position: relative; } li.new a:after { content: "New"; background-color: #FF0000; color: #fff; font-size: 11px; line-height: 1; padding: 3px 5px; border-radius: 2px; margin-left: 10px; display: inline-block; } /*============================= 08. Start Welcome Area Wrapper ================================*/ .welcome-thumbnail { margin-left: -405px; } @media only screen and (min-width: 992px) and (max-width: 1199.98px) { .welcome-thumbnail { margin-left: -450px; } } @media only screen and (min-width: 768px) and (max-width: 991.98px), only screen and (max-width: 767.98px) { .welcome-thumbnail { margin-left: 0; } } .welcome-thumbnail img { max-width: inherit; } @media only screen and (min-width: 768px) and (max-width: 991.98px), only screen and (max-width: 767.98px) { .welcome-thumbnail img { max-width: 100%; } } .single-welcome-feature { margin-top: 60px; } @media only screen and (min-width: 768px) and (max-width: 991.98px), only screen and (max-width: 767.98px) { .single-welcome-feature { margin-top: 13px; } } .single-welcome-feature .feature-icon { color: #222222; font-size: 36px; line-height: 1; margin-right: 50px; -webkit-box-flex: 0; -ms-flex: 0 0 40px; flex: 0 0 40px; max-width: 40px; } @media only screen and (max-width: 767.98px) { .single-welcome-feature .feature-icon { margin-right: 20px; } } .single-welcome-feature .feature-info h3 { font-size: 16px; font-weight: 600; line-height: 1.3; text-transform: uppercase; margin-bottom: 15px; margin-top: -3px; } /*============================= 09. Start Fun Fact Area Wrapper ==============================*/ .single-fun-fact-wrap { background-color: #161616; padding: 145px 0; border-right: 1px solid #222222; } @media only screen and (min-width: 768px) and (max-width: 991.98px) { .single-fun-fact-wrap { padding: 80px 0; border-bottom: 1px solid #222222; } } @media only screen and (max-width: 767.98px) { .single-fun-fact-wrap { padding: 60px 0; border-bottom: 1px solid #222222; } } .single-fun-fact-wrap .fun-fact-number { color: #fff; font-size: 50px; font-weight: 700; line-height: 1; letter-spacing: 1.4px; margin-bottom: 20px; } @media only screen and (max-width: 575.98px) { .single-fun-fact-wrap .fun-fact-number { font-size: 30px; } } .single-fun-fact-wrap h4 { color: #fdc657; font-size: 16px; font-weight: 600; line-height: 1.2; text-transform: uppercase; margin-bottom: 0; } @media only screen and (max-width: 575.98px) { .single-fun-fact-wrap h4 { font-size: 13px; } } .single-fun-fact-wrap.layout--2 { background-color: transparent; padding: 0; border: none; margin-top: 30px; } .single-fun-fact-wrap.layout--2 .fun-fact-number, .single-fun-fact-wrap.layout--2 h4 { color: #222222; } .single-fun-fact-wrap.layout--3 { background: transparent bottom center; border: 0; } .single-fun-fact-wrap.layout--3 .fun-fact-number { color: #222222; } @media only screen and (max-width: 767.98px) { .single-fun-fact-wrap.layout--3 h4 { color: #000; } } @media only screen and (max-width: 767.98px), only screen and (min-width: 768px) and (max-width: 991.98px) { [class*="col-6"]:nth-child(1n+3) .single-fun-fact-wrap.layout--3 { border-top: 1px solid #e7e7e7; } } @media only screen and (max-width: 767.98px), only screen and (min-width: 768px) and (max-width: 991.98px) { [class*="col-6"]:nth-child(2n+2) .single-fun-fact-wrap.layout--3 { border-left: 1px solid #e7e7e7; } } /*================================ 10. Start Portfolio Area Wrapper ===================================*/ .single-portfolio-wrap { margin-top: 30px; } .single-portfolio-wrap .portfolio-thumb { position: relative; } .single-portfolio-wrap .portfolio-thumb:before { background-color: rgba(0, 0, 0, 0.7); content: ""; position: absolute; left: 0; top: 0; height: 100%; width: 100%; opacity: 0; -webkit-transition: 0.5s; -o-transition: 0.5s; transition: 0.5s; visibility: hidden; } .single-portfolio-wrap .portfolio-thumb img { width: 100%; } .single-portfolio-wrap .portfolio-details .port-info { position: absolute; top: 40%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); left: 40px; -webkit-transition: 0.4s; -o-transition: 0.4s; transition: 0.4s; opacity: 0; visibility: hidden; } .single-portfolio-wrap .portfolio-details .port-info h3 { font-size: 26px; line-height: 1; } @media only screen and (max-width: 767.98px) { .single-portfolio-wrap .portfolio-details .port-info h3 { font-size: 18px; } } .single-portfolio-wrap .portfolio-details .port-info .portfolio-cate { margin-top: 10px; } .single-portfolio-wrap .portfolio-details .port-info .portfolio-cate a:after { content: '/'; font-size: 13px; line-height: 1; margin: 0 5px; } .single-portfolio-wrap .portfolio-details .port-info .portfolio-cate a:last-child:after { display: none; } .single-portfolio-wrap .portfolio-details a { color: white; } .single-portfolio-wrap .portfolio-details a:hover { color: #fdc657; } .single-portfolio-wrap .portfolio-details a.btn-view-work { text-transform: uppercase; color: #fdc657; font-weight: 600; font-size: 14px; line-height: 1; position: absolute; bottom: 20px; left: 40px; opacity: 0; visibility: hidden; } .single-portfolio-wrap .portfolio-details a.btn-view-work i.fa { -webkit-transition: 0.4s; -o-transition: 0.4s; transition: 0.4s; } .single-portfolio-wrap .portfolio-details a.btn-view-work:hover i.fa { padding-left: 5px; } .single-portfolio-wrap:hover .portfolio-thumb:before { opacity: 1; visibility: visible; } .single-portfolio-wrap:hover .port-info { top: 50%; opacity: 1; visibility: visible; } .single-portfolio-wrap:hover a.btn-view-work { bottom: 40px; opacity: 1; visibility: visible; } .portfolio-footer-area h2 { font-size: 24px; line-height: 1.3; } .portfolio-footer-area .portfolio-btns .btn { margin-left: 30px; } .portfolio-footer-area .portfolio-btns .btn:first-child { margin-left: 0; } @media only screen and (max-width: 575.98px), only screen and (min-width: 768px) and (max-width: 991.98px) { .portfolio-footer-area .portfolio-btns .btn { margin-left: 15px; } } .no-gutters .single-portfolio-wrap { margin-top: 0; } .single-portfolio-wrap.layout--2 { margin-top: 45px; } .single-portfolio-wrap.layout--2 .btn-view-work { border-radius: 50%; background-color: rgba(255, 255, 255, 0.15); color: #fff; display: block; position: absolute; top: 50%; left: 50%; -webkit-transform: scale(2); -ms-transform: scale(2); transform: scale(2); margin-left: -25px; margin-top: -25px; opacity: 0; visibility: hidden; line-height: 50px; text-align: center; height: 50px; width: 50px; } .single-portfolio-wrap.layout--2 .portfolio-details { margin-top: 28px; } .single-portfolio-wrap.layout--2 .portfolio-details .port-info { position: static; -webkit-transform: none; -ms-transform: none; transform: none; opacity: 1; visibility: visible; } .single-portfolio-wrap.layout--2 .portfolio-details .port-info h3 { font-size: 16px; line-height: 1; margin-bottom: 0; } .single-portfolio-wrap.layout--2 .portfolio-details .port-info h3 a { color: #222222; } .single-portfolio-wrap.layout--2 .portfolio-details .port-info .portfolio-cate { margin-top: 5px; } .single-portfolio-wrap.layout--2 .portfolio-details .port-info .portfolio-cate a { color: #aaaaaa; } .single-portfolio-wrap.layout--2 .portfolio-details .port-info a:hover { color: #fdc657; } .single-portfolio-wrap.layout--2:hover .btn-view-work { -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); opacity: 1; visibility: visible; } .portfolio-filter-menu-wrap { margin-bottom: 45px; } @media only screen and (max-width: 767.98px) { .portfolio-filter-menu-wrap { margin-bottom: 30px; } } .portfolio-filter-menu-wrap ul li { font-weight: 500; cursor: pointer; -webkit-transition: 0.4s; -o-transition: 0.4s; transition: 0.4s; margin-right: 30px; margin-bottom: 0; } .portfolio-filter-menu-wrap ul li:last-child { margin: 0; } .portfolio-filter-menu-wrap ul li:hover, .portfolio-filter-menu-wrap ul li.active { color: #222222; } @media screen and (min-width: 1600px) { .portfolio-filter-menu-wrap { position: absolute; left: 100%; top: 0; margin-left: 80px; margin-bottom: 0; } .portfolio-filter-menu-wrap ul { display: block !important; } .portfolio-filter-menu-wrap ul li { list-style-type: square; margin-right: 0 !important; margin-bottom: 20px; } } /*================================= 11. Start Testimonial Area Wrapper ===================================*/ .testimonial-area { padding: 120px 0; } @media only screen and (max-width: 767.98px) { .testimonial-area { padding: 60px 0; } } @media only screen and (min-width: 768px) and (max-width: 991.98px) { .testimonial-area { padding: 80px 0; } } .single-testimonial-wrap { font-family: "Playfair Display", serif; font-size: 30px; line-height: 1.6; color: white; } @media only screen and (max-width: 767.98px) { .single-testimonial-wrap { font-size: 20px; } } .single-testimonial-wrap .client-name { color: #fdc657; font-family: "Poppins", sans-serif; font-size: 16px; line-height: 1; font-weight: 600; text-transform: uppercase; margin-top: 37px; margin-bottom: 26px; } @media only screen and (max-width: 767.98px) { .single-testimonial-wrap .client-name { margin-top: 23px; margin-bottom: 10px; } } .single-testimonial-wrap .client-designation { color: #666666; font-weight: 500; font-size: 15px; font-family: "Poppins", sans-serif; margin-bottom: 0; } .single-testimonial-wrap .author-thumb { margin-bottom: 12px; } .single-testimonial-wrap .author-thumb img { border-radius: 50%; height: 80px; width: 80px; } .single-testimonial-wrap.layout--2 { font-family: "Poppins", sans-serif; font-weight: 700; padding: 0 20px; color: #222222; } @media only screen and (max-width: 767.98px) { .single-testimonial-wrap.layout--2 { font-weight: 500; font-size: 16px; } } .single-testimonial-wrap.layout--2 .quote-icon { font-size: 60px; line-height: 1; top: 25px; left: -10px; } @media only screen and (max-width: 767.98px) { .single-testimonial-wrap.layout--2 .quote-icon { font-size: 50px; } } .single-testimonial-wrap.layout--2 .client-name { color: #222222; margin-bottom: 0; position: relative; padding-top: 52px; margin-top: 37px; } @media only screen and (max-width: 767.98px) { .single-testimonial-wrap.layout--2 .client-name { padding-top: 30px; margin-top: 24px; } } .single-testimonial-wrap.layout--2 .client-name:before { background-color: #fdc657; content: ''; position: absolute; top: 0; left: 0; height: 3px; width: 80px; } .single-testimonial-wrap.layout--2 .client-name .client-designation { text-transform: capitalize; margin-left: 20px; font-weight: 400; } .single-testimonial-wrap.layout--2.white { color: #fff; } .single-testimonial-wrap.layout--2.white .client-name { color: #fff; } .single-testimonial-wrap.layout--2.white .client-designation { color: #cccccc; } .single-testimonial-wrap.layout--3 { color: #222222; font-family: "Poppins", sans-serif; font-size: 18px; font-weight: 600; text-align: center; padding: 0 50px; } @media only screen and (min-width: 768px) and (max-width: 991.98px) { .single-testimonial-wrap.layout--3 { font-size: 15px; padding: 0 15px; } } @media only screen and (max-width: 767.98px) { .single-testimonial-wrap.layout--3 { font-size: 16px; padding: 0; } } .single-testimonial-wrap.layout--3 .author-thumb img { margin: auto; } .single-testimonial-wrap.layout--3 .quote-icon { font-size: 60px; line-height: 1; top: 35px; left: -10px; } @media only screen and (max-width: 767.98px) { .single-testimonial-wrap.layout--3 .quote-icon { font-size: 50px; top: 27px; } } .single-testimonial-wrap.layout--3 .client-name { color: #222222; margin-bottom: 0; position: relative; padding-top: 52px; margin-top: 37px; } @media only screen and (max-width: 767.98px) { .single-testimonial-wrap.layout--3 .client-name { padding-top: 30px; margin-top: 24px; } } .single-testimonial-wrap.layout--3 .client-name:before { background-color: #fdc657; content: ''; position: absolute; top: 0; left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); height: 3px; width: 80px; } .single-testimonial-wrap.layout--3 .client-name .client-designation { font-weight: 400; display: block; margin-top: 15px; text-transform: capitalize; } .single-testimonial-wrap.layout--4 { color: #fff; font-family: "Poppins", sans-serif; font-size: 15px; font-weight: 600; text-align: center; } .single-testimonial-wrap.layout--4 .author-thumb img { margin: auto; border: 1px solid #fdc657; } .single-testimonial-wrap.layout--4 .client-name { color: #fdc657; margin-bottom: 0; position: relative; margin-top: 42px; } @media only screen and (max-width: 767.98px) { .single-testimonial-wrap.layout--4 .client-name { margin-top: 24px; } } .single-testimonial-wrap.layout--4 .client-name .client-designation { color: #ccc; font-weight: 400; font-size: 13px; display: block; margin-top: 15px; text-transform: capitalize; } .single-testimonial-wrap.layout--4.slick-slide { padding: 100px 15px; } @media only screen and (min-width: 992px) and (max-width: 1199.98px) { .single-testimonial-wrap.layout--4.slick-slide { padding: 50px 30px; } } @media only screen and (max-width: 767.98px) { .single-testimonial-wrap.layout--4.slick-slide { padding: 30px 15px; } } .single-testimonial-wrap.layout--4.slick-slide.slick-current { background-color: #fff; color: #222222; } .single-testimonial-wrap.layout--4.slick-slide.slick-current .client-designation { color: #666666; } .single-testimonial-wrap-black { color: #222222; } /*============================ 12. Start Team Area Wrapper ============================*/ .single-team-member-wrap { max-width: 20%; -ms-flex-preferred-size: 20%; flex-basis: 20%; margin-top: 30px; overflow: hidden; } @media only screen and (min-width: 768px) and (max-width: 991.98px), only screen and (max-width: 767.98px) { .single-team-member-wrap { max-width: 50%; -ms-flex-preferred-size: calc(50% - 30px); flex-basis: calc(50% - 30px); margin: 30px 15px 0; width: 100%; } } @media only screen and (max-width: 575.98px) { .single-team-member-wrap { max-width: 100%; -ms-flex-preferred-size: 100%; flex-basis: 100%; } } .single-team-member-wrap .team-member-pic { position: relative; } .single-team-member-wrap .team-member-pic:after { background-color: rgba(0, 0, 0, 0.7); content: ""; position: absolute; left: 0; top: 0; -webkit-transition: 0.6s; -o-transition: 0.6s; transition: 0.6s; opacity: 0; visibility: hidden; height: 100%; width: 100%; } .single-team-member-wrap .team-member-pic img { -webkit-transition: 0.6s; -o-transition: 0.6s; transition: 0.6s; width: 100%; } .single-team-member-wrap .team-member-pic .member-info { position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); -webkit-transition: 0.4s; -o-transition: 0.4s; transition: 0.4s; opacity: 0; visibility: hidden; width: 100%; z-index: 2; } .single-team-member-wrap .team-member-pic .member-info .team-member-name { color: white; font-size: 16px; line-height: 1; font-weight: 600; text-transform: uppercase; margin-bottom: 15px; } .single-team-member-wrap .team-member-pic .member-info .team-member-desi { color: #aaa; font-size: 15px; line-height: 1; font-weight: 500; margin-bottom: 0; } .single-team-member-wrap:hover .team-member-pic:after { opacity: 1; visibility: visible; } .single-team-member-wrap:hover .team-member-pic img { -webkit-transform: scale(1.07); -ms-transform: scale(1.07); transform: scale(1.07); } .single-team-member-wrap:hover .team-member-pic .member-info { opacity: 1; visibility: visible; } .single-team-member-wrap.layout--2 { max-width: 100%; margin: 0; text-align: left; } .single-team-member-wrap.layout--2 .member-info { padding: 0 30px; } .single-team-member-wrap.layout--2 .member-info .team-member-name { font-size: 40px; text-transform: capitalize; } @media only screen and (min-width: 1200px) and (max-width: 1599.98px), only screen and (min-width: 768px) and (max-width: 991.98px) { .single-team-member-wrap.layout--2 .member-info .team-member-name { font-size: 30px; } } @media only screen and (min-width: 992px) and (max-width: 1199.98px), only screen and (max-width: 767.98px) { .single-team-member-wrap.layout--2 .member-info .team-member-name { font-size: 24px; } } .single-team-member-wrap.layout--2 .member-info .team-member-desi { color: #fff; font-size: 16px; font-weight: 600; text-transform: uppercase; } .single-team-member-wrap.layout--2 .member-info .about-social-icons a { background-color: rgba(255, 255, 255, 0.15); color: #fff; } .single-team-member-wrap.layout--2 .member-info .about-social-icons a:hover { background-color: #fff; color: #222222; } /*================================== 13. Start Latest Blog Area Wrapper ===================================*/ .single-blog-post-wrap { background-color: white; padding: 80px; min-height: 385px; } @media only screen and (min-width: 992px) and (max-width: 1199.98px) { .single-blog-post-wrap { padding: 80px 40px; } } @media only screen and (max-width: 767.98px) { .single-blog-post-wrap { padding: 30px 15px; min-height: 300px; } } .single-blog-post-wrap h2 { font-size: 24px; line-height: 1.3; margin-bottom: 0; } @media only screen and (max-width: 767.98px) { .single-blog-post-wrap h2 { font-size: 20px; font-weight: 500; } } .single-blog-post-wrap h2 a { color: #222222; } .single-blog-post-wrap h2 a:hover { color: #fdc657; } .single-blog-post-wrap p { margin-bottom: 0; } .single-blog-post-wrap .post-type { background-color: #fdc657; border-radius: 50%; color: #fff; display: block; font-size: 30px; position: absolute; top: 20px; right: 20px; text-align: center; line-height: 60px; height: 60px; width: 60px; } .single-blog-post-wrap .post-meta { margin: 20px 0; } @media only screen and (max-width: 767.98px) { .single-blog-post-wrap .post-meta { margin: 10px 0; } } .single-blog-post-wrap .post-meta a { color: #222222; line-height: 1; margin-right: 10px; } .single-blog-post-wrap .post-meta a:last-child { margin-right: 0; } .single-blog-post-wrap .post-meta a i.fa { color: #fdc657; margin-right: 5px; } .single-blog-post-wrap .btn-view-more { color: #666666; display: inline-block; font-size: 14px; font-weight: 600; line-height: 1; text-transform: uppercase; text-align: right; margin-top: 31px; } .single-blog-post-wrap .btn-view-more i { color: #222222; font-size: 12px; font-weight: 400; margin-right: 3px; -webkit-transition: 0.4s; -o-transition: 0.4s; transition: 0.4s; } .single-blog-post-wrap .btn-view-more:hover { color: #fdc657; } .single-blog-post-wrap .btn-view-more:hover i { color: #fdc657; } .single-blog-post-wrap.slick-active { position: relative; } .single-blog-post-wrap.slick-active:before { background-color: #f4f4f4; content: ""; position: absolute; right: 0; top: 0; height: 100%; width: 1px; } .single-blog-post-wrap.slick-active:last-child:before { display: none; } .single-blog-post-wrap.layout--2 { padding: 0; margin-top: 30px; } .single-blog-post-wrap.layout--2 .blog-thumbnail { position: relative; z-index: 1; } .single-blog-post-wrap.layout--2 .blog-thumbnail:before { background-color: rgba(0, 0, 0, 0.3); content: ''; position: absolute; opacity: 0; visibility: hidden; left: 0; top: 0; -webkit-transform: scaleX(0); -ms-transform: scaleX(0); transform: scaleX(0); -webkit-transition: 0.4s; -o-transition: 0.4s; transition: 0.4s; height: 100%; width: 100%; z-index: 2; } .single-blog-post-wrap.layout--2 .blog-thumbnail .btn-plus { font-size: 20px; color: #fff; line-height: 1; font-weight: 300; position: absolute; left: 50%; top: 50%; -webkit-transition: 0.4s; -o-transition: 0.4s; transition: 0.4s; -webkit-transform: translate(-50%, -50%) scale(0); -ms-transform: translate(-50%, -50%) scale(0); transform: translate(-50%, -50%) scale(0); z-index: 2; } .single-blog-post-wrap.layout--2 .blog-thumbnail .btn-plus img { width: 50px; } .single-blog-post-wrap.layout--2 .blog-thumbnail .btn-plus:hover { color: #fdc657; } .single-blog-post-wrap.layout--2 .blog-post-details { margin-top: 45px; } @media only screen and (max-width: 767.98px), only screen and (min-width: 768px) and (max-width: 991.98px) { .single-blog-post-wrap.layout--2 .blog-post-details { margin-top: 25px; } } .single-blog-post-wrap.layout--2 .blog-post-details h2 { font-size: 18px; } .single-blog-post-wrap.layout--2 .blog-post-details h2 a { color: #333333; } .single-blog-post-wrap.layout--2 .blog-post-details h2 a:hover { color: #fdc657; } @media only screen and (min-width: 768px) and (max-width: 991.98px) { .single-blog-post-wrap.layout--2 .blog-post-details .post-meta { margin: 10px 0; } } .single-blog-post-wrap.layout--2 .blog-post-details a.btn-read-more { color: #222222; font-weight: 600; font-size: 14px; text-transform: uppercase; margin-top: 27px; display: inline-block; } @media only screen and (max-width: 767.98px), only screen and (min-width: 768px) and (max-width: 991.98px) { .single-blog-post-wrap.layout--2 .blog-post-details a.btn-read-more { margin-top: 15px; } } .single-blog-post-wrap.layout--2 .blog-post-details a.btn-read-more:hover { color: #fdc657; } .single-blog-post-wrap.layout--2:hover .blog-thumbnail:before { -webkit-transform: scaleX(1); -ms-transform: scaleX(1); transform: scaleX(1); opacity: 1; visibility: visible; } .single-blog-post-wrap.layout--2:hover .blog-thumbnail .btn-plus { -webkit-transform: translate(-50%, -50%) scale(1); -ms-transform: translate(-50%, -50%) scale(1); transform: translate(-50%, -50%) scale(1); } .single-blog-post-wrap.layout--3 { padding: 0; } .single-blog-post-wrap.layout--3 .blog-post-info { padding: 0 60px; } @media only screen and (min-width: 768px) and (max-width: 991.98px) { .single-blog-post-wrap.layout--3 .blog-post-info { padding: 15px 30px; } } @media only screen and (max-width: 767.98px) { .single-blog-post-wrap.layout--3 .blog-post-info { padding: 30px 15px; } } .single-blog-post-wrap.layout--3 .blog-post-thumb { max-height: 385px; overflow: hidden; } @media only screen and (max-width: 767.98px) { .single-blog-post-wrap.layout--3 .blog-post-thumb { max-height: 300px; } } .single-blog-post-wrap.layout--3.slick-active:before { display: none; } .single-blog-post-wrap.layout--3 .row { -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .single-blog-post-wrap.layout--4 { padding: 55px 50px 60px; } .single-blog-post-wrap.layout--4 h2 { font-size: 20px; } .single-blog-post-wrap.layout--2.layout-blog-page { min-height: inherit; margin-top: 43px; } .single-blog-post-wrap.layout--2.layout-blog-page .blog-thumbnail { overflow: hidden; } .single-blog-post-wrap.layout--2.layout-blog-page .blog-thumbnail .blog-hvr-btn img { width: 40px; } .single-blog-post-wrap.layout--2.layout-blog-page .blog-post-details { margin-top: 25px; } .single-blog-post-wrap.layout--2.layout-blog-page .blog-post-details h2 { font-size: 24px; font-weight: 600; } @media only screen and (min-width: 768px) and (max-width: 991.98px) { .single-blog-post-wrap.layout--2.layout-blog-page .blog-post-details h2 { font-size: 20px; } } @media only screen and (max-width: 767.98px) { .single-blog-post-wrap.layout--2.layout-blog-page .blog-post-details h2 { font-size: 18px; } } .single-blog-post-wrap.layout--2.layout-blog-page .blog-post-details .btn-read-more { color: #fdc657; } .single-blog-post-wrap.layout--2.layout-blog-page .blog-post-details .btn-read-more i { font-weight: 700; font-size: 16px; padding-left: 3px; -webkit-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; } .single-blog-post-wrap.layout--2.layout-blog-page .blog-post-details .btn-read-more:hover i { padding-left: 10px; } .single-blog-post-wrap.layout--2.layout-blog-page.list-view .blog-thumbnail .btn-plus, .single-blog-post-wrap.layout--2.layout-blog-page.list-view .blog-thumbnail:before { display: none; } @media only screen and (min-width: 768px) and (max-width: 991.98px), only screen and (min-width: 992px) and (max-width: 1199.98px), only screen and (min-width: 1200px) { .single-blog-post-wrap.layout--2.layout-blog-page.list-view .blog-post-details { margin-top: 0; } } .single-blog-post-wrap.layout--2.layout-blog-page.list-view .row { -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .single-blog-post-wrap.layout--2.layout-blog-page.masonry-view .blog-thumbnail { max-height: inherit; } @media only screen and (max-width: 767.98px) { .single-blog-post-wrap.layout--2.layout-blog-page.masonry-view .blog-thumbnail { max-height: 280px; } } .split-view .single-blog-post-wrap:nth-child(2n) [class*='col-']:first-child { -webkit-box-ordinal-group: 2; -ms-flex-order: 1; order: 1; } @media only screen and (max-width: 767.98px) { .split-view .single-blog-post-wrap:nth-child(2n) [class*='col-']:first-child { -webkit-box-ordinal-group: 1; -ms-flex-order: 0; order: 0; } } .split-view .single-blog-post-wrap:nth-child(2n) [class*='col-']:last-child { -webkit-box-ordinal-group: 1; -ms-flex-order: 0; order: 0; } @media only screen and (max-width: 767.98px) { .split-view .single-blog-post-wrap:nth-child(2n) [class*='col-']:last-child { -webkit-box-ordinal-group: 2; -ms-flex-order: 1; order: 1; } } .blog-classic-content .single-blog-post-wrap.layout--2.layout-blog-page .blog-thumbnail:before { display: none; } .blog-classic-content .single-blog-post-wrap.layout--2.layout-blog-page .blog-thumbnail img { width: 100%; } @media only screen and (max-width: 479.98px) { .blog-classic-content .single-blog-post-wrap.layout--2.layout-blog-page .post-meta a { font-size: 12px; } } .first-big-item>.single-blog-post-wrap.layout--2:first-child, .first-big-item>[class*='col-']:first-child { margin-bottom: 43px; max-width: 100%; -ms-flex-preferred-size: 100%; flex-basis: 100%; } .first-big-item>.single-blog-post-wrap.layout--2:first-child [class*='col'], .first-big-item>[class*='col-']:first-child [class*='col'] { max-width: 100%; -ms-flex-preferred-size: 100%; flex-basis: 100%; } .first-big-item>.single-blog-post-wrap.layout--2:first-child .blog-thumbnail, .first-big-item>[class*='col-']:first-child .blog-thumbnail { max-height: 600px; } @media only screen and (min-width: 768px) and (max-width: 991.98px) { .first-big-item>.single-blog-post-wrap.layout--2:first-child .blog-thumbnail, .first-big-item>[class*='col-']:first-child .blog-thumbnail { max-height: 400px; } } @media only screen and (max-width: 767.98px) { .first-big-item>.single-blog-post-wrap.layout--2:first-child .blog-thumbnail, .first-big-item>[class*='col-']:first-child .blog-thumbnail { max-height: 300px; } } .first-big-item>.single-blog-post-wrap.layout--2:first-child .blog-thumbnail img, .first-big-item>[class*='col-']:first-child .blog-thumbnail img { width: 100%; } .first-big-item>.single-blog-post-wrap.layout--2:first-child .blog-post-details, .first-big-item>[class*='col-']:first-child .blog-post-details { margin-top: 25px; } .first-big-item>[class*='col-']:first-child { margin-bottom: 0 !important; } /*================================ 14. Start Brand Logo Area Wrapper ==================================*/ .brand-logo-wrapper { padding: 55px 0; } .brand-logo-content .single-brand-logo { text-align: center; } .brand-logo-content .single-brand-logo img { width: auto; margin: auto; } .brand-logo-content .slick-track { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; margin: 0 -10px; } .brand-logo-content .slick-track .slick-slide { padding: 0 10px; } /*======================================== Start Architecture Clients Area =========================================*/ .our-client-area .single-client-item { margin-top: 80px; text-align: center; } /*============================= 15. Start Banner Area Wrapper ==============================*/ @media only screen and (min-width: 992px) and (max-width: 1199.98px), only screen and (min-width: 1200px) { .banner-thumb { margin-left: -250px; } .banner-thumb img { max-width: inherit; } } .banner-content-wrap { color: #222222; font-size: 16px; font-weight: 600; } @media only screen and (max-width: 767.98px) { .banner-content-wrap { font-weight: 400; font-size: 15px; } } .banner-content-wrap h2 { font-size: 60px; text-transform: uppercase; margin-top: -13px; margin-bottom: 60px; } @media only screen and (min-width: 992px) and (max-width: 1199.98px) { .banner-content-wrap h2 { font-size: 40px; } } @media only screen and (min-width: 768px) and (max-width: 991.98px) { .banner-content-wrap h2 { font-size: 40px; margin-bottom: 18px; } } @media only screen and (max-width: 767.98px) { .banner-content-wrap h2 { font-size: 25px; font-weight: 500; margin-top: -5px; margin-bottom: 18px; } } .banner-content-wrap .btn { margin-top: 68px; padding: 20px 50px; } @media only screen and (min-width: 768px) and (max-width: 991.98px) { .banner-content-wrap .btn { margin-top: 13px; } } @media only screen and (max-width: 767.98px) { .banner-content-wrap .btn { padding: 10px 20px; margin-top: 9px; } } /*=============================== 16. Start Discover Area Wrapper =================================*/ .single-discover-item-wrap { margin-top: 30px; } .single-discover-item-wrap .discover-chart { position: relative; } .single-discover-item-wrap .discover-chart .discover-amount { color: #222222; font-size: 34px; font-weight: 700; position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .single-discover-item-wrap h3 { font-size: 16px; font-weight: 600; text-transform: uppercase; margin: 40px 0 25px; } @media only screen and (min-width: 768px) and (max-width: 991.98px), only screen and (max-width: 767.98px) { .single-discover-item-wrap h3 { margin: 15px 0 10px; } } .single-discover-item-wrap p { margin-bottom: 0; } @media only screen and (min-width: 768px) and (max-width: 991.98px) { .single-discover-item-wrap canvas { height: 180px; width: 180px; } } @media only screen and (max-width: 767.98px) { .single-discover-item-wrap canvas { height: 140px; width: 140px; } } /*============================ 17. Start Product Slider Area ==============================*/ .single-product-slide .product-content { min-height: 600px; height: 100%; } @media only screen and (max-width: 767.98px) { .single-product-slide .product-content { min-height: 400px; } } .single-product-slide .product-content h2 { font-size: 40px; color: #202020; font-weight: 600; margin-top: -5px; } @media only screen and (max-width: 767.98px) { .single-product-slide .product-content h2 { font-size: 25px; } } .single-product-slide .product-content .price-group { font-size: 16px; font-weight: 600; } .single-product-slide .product-content .price-group .old-price { color: #c6c8ca; margin-right: 5px; } .single-product-slide .product-content .btn-shop { color: #fdc657; font-size: 14px; font-weight: 600; text-transform: uppercase; display: inline-block; margin-top: 33px; } .single-product-slide .product-content .btn-shop:hover { color: #222222; } @media only screen and (max-width: 767.98px) { .single-product-slide .product-content .btn-shop { margin-top: 13px; } } .product-slider-area .slick-dots { position: absolute; margin-top: 0 !important; left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); bottom: 50px; } @media only screen and (max-width: 575.98px) { .product-slider-area .slick-dots { bottom: 30px; } } @media only screen and (min-width: 1200px) and (max-width: 1599.98px) { .product-slider-area .ht-slick-nav button { left: -50px; } } @media only screen and (min-width: 1200px) and (max-width: 1599.98px) { .product-slider-area .ht-slick-nav button.next-arrow { left: auto; right: -50px; } } @media screen and (max-width: 1500px) { .product-slider-area .ht-slick-nav { display: none; } } /*============================== 18. Start Category Banner Area ================================*/ .single-cate-banner { margin-top: 30px; } .single-cate-banner .cate-banner-thumb { position: relative; overflow: hidden; } .single-cate-banner .cate-banner-thumb img { -webkit-transition: 0.6s; -o-transition: 0.6s; transition: 0.6s; width: 100%; } .single-cate-banner .cate-banner-thumb .cate-banner-info { position: absolute; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); } .single-cate-banner .cate-banner-thumb .cate-banner-info.left { left: 50px; } .single-cate-banner .cate-banner-thumb .cate-banner-info.right { right: 50px; } .single-cate-banner .cate-banner-thumb .cate-banner-info h4 { font-size: 18px; line-height: 1; font-weight: 600; -webkit-transition: 0.4s; -o-transition: 0.4s; transition: 0.4s; } .single-cate-banner .cate-banner-thumb .cate-banner-info .price { font-size: 16px; line-height: 1; font-weight: 600; } .single-cate-banner:hover img { -webkit-transform: scale(1.1); -ms-transform: scale(1.1); transform: scale(1.1); } .single-cate-banner:hover .cate-banner-info h4 { color: #fdc657; } .sale-badge { background-color: #fdc657; border-radius: 50%; color: #fff; display: block; font-size: 15px; font-weight: 500; text-align: center; position: absolute; top: 60px; right: 50px; line-height: 100px; height: 100px; width: 100px; } .sale-badge.small { font-size: 16px; line-height: 70px; height: 70px; width: 70px; } /*============================= 19. Start Feature Products Area ================================*/ .area-title h2 { font-size: 40px; line-height: 1; font-weight: 500; margin-bottom: 40px; margin-top: -6px; } @media only screen and (max-width: 767.98px) { .area-title h2 { font-size: 30px; margin-bottom: 20px; } } .area-title .btn { margin-top: 38px; } .feature-product-area { border: 1px solid #e7e7e7; padding: 100px 0; } @media only screen and (min-width: 768px) and (max-width: 991.98px) { .feature-product-area { padding: 80px 0; } } @media only screen and (max-width: 767.98px) { .feature-product-area { padding: 62px 0 60px; } } /*========================== 20. Start Products Wrapper ===========================*/ .single-product-wrap .product-thumb { position: relative; overflow: hidden; } .single-product-wrap .product-thumb img { width: 100%; -webkit-transition: 0.4s; -o-transition: 0.4s; transition: 0.4s; } .single-product-wrap .product-thumb .btn-quick-view { background-color: #fff; border-radius: 50%; display: block; position: absolute; top: 50%; left: 50%; -webkit-transition: 0.4s; -o-transition: 0.4s; transition: 0.4s; -webkit-transform: scale(1.5); -ms-transform: scale(1.5); transform: scale(1.5); margin: -25px 0 0 -25px; opacity: 0; visibility: hidden; line-height: 50px; height: 50px; width: 50px; } .single-product-wrap .product-thumb .btn-quick-view:hover { background-color: #fdc657; color: #fff; } .single-product-wrap .product-thumb .btn-add-cart { background-color: #fdc657; color: #fff; display: block; font-size: 13px; font-weight: 600; text-transform: uppercase; text-align: center; -webkit-transform: translateY(100%); -ms-transform: translateY(100%); transform: translateY(100%); padding: 15px 10px; opacity: 0; visibility: hidden; position: absolute; bottom: 0; left: 0; width: 100%; } .single-product-wrap .product-thumb .btn-add-cart:hover { background-color: #222222; } .single-product-wrap .product-details { margin-top: 22px; } @media only screen and (max-width: 767.98px) { .single-product-wrap .product-details { margin-top: 17px; } } .single-product-wrap .product-details .product-title { font-size: 16px; font-weight: 600; text-transform: capitalize; } .single-product-wrap .product-details .product-title a { color: #222222; } .single-product-wrap .product-details .product-title a:hover { color: #fdc657; } .single-product-wrap .product-details .price-group { font-size: 16px; line-height: 1; font-weight: 600; } .single-product-wrap .product-details .price-group .old-price { color: #c6c8ca; margin-right: 5px; } .single-product-wrap .product-details .btn-add-wishlist { color: #222222; padding-right: 2px; } .single-product-wrap:hover .btn-quick-view { -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); opacity: 1; visibility: visible; } .single-product-wrap:hover .btn-add-cart { -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); opacity: 1; visibility: visible; } .single-product-wrap--2 .product-hvr-content [class*="btn-"] { right: 10px; left: auto; margin: 0; top: 25px; } .single-product-wrap--2 .product-hvr-content .btn-add-cart { border-radius: 50%; height: 50px; width: 50px; -webkit-transform: translateY(0) scale(1.5); -ms-transform: translateY(0) scale(1.5); transform: translateY(0) scale(1.5); top: 95px; } .single-product-wrap--2:hover .product-hvr-content .btn-add-cart { -webkit-transform: translateY(0) scale(1); -ms-transform: translateY(0) scale(1); transform: translateY(0) scale(1); } .products-wrapper.grid-layout { margin-top: -30px; } .products-wrapper.grid-layout .single-product-wrap { margin-top: 30px; } /*========================================== 21. Start Newsletter Area Wrapper ===========================================*/ .newsletter-content-wrap { background: #dddddd url("../img/extra/newsletter-bg.jpg") no-repeat center center; background-size: cover; padding: 80px 0; } @media only screen and (max-width: 767.98px) { .newsletter-content-wrap { padding: 60px 0; } } .newsletter-content-wrap .area-title h2 { margin-bottom: 25px; } .newsletter-area-wrapper.layout--2 { background-color: #222222; } .newsletter-area-wrapper.layout--2 .newsletter-content-wrap { background: transparent none; } .newsletter-area-wrapper.layout--2 .newsletter-content-wrap .area-title h2 { color: #fff; margin-right: 30px; } @media only screen and (min-width: 1200px), only screen and (min-width: 992px) and (max-width: 1199.98px) { .newsletter-area-wrapper.layout--2 .newsletter-content-wrap .area-title h2 { margin-bottom: 0; } } .newsletter-area-wrapper.layout--2 .newsletter-content-wrap .newsletter-form-wrap .btn-newsletter:hover { background-color: #fdc657; } .newsletter-area-wrapper.layout--3 { background-color: #111111; } .newsletter-area-wrapper.layout--3 .newsletter-content-wrap { background: transparent none; } .newsletter-form-wrap.layout--2 form input { background-color: #fff; padding: 20px; color: #222222; } .newsletter-form-wrap.layout--2 form .btn-newsletter { background-color: #fdc657; color: #fff; padding: 25px 40px; text-transform: uppercase; font-weight: 600; letter-spacing: 1px; position: static; -webkit-transform: none; -ms-transform: none; transform: none; } .newsletter-form-wrap.layout--2 form .btn-newsletter:hover { background-color: #222222; } @media only screen and (max-width: 767.98px) { .newsletter-form-wrap.layout--2 form .btn-newsletter { padding: 25px; } } @media only screen and (max-width: 575.98px) { .newsletter-form-wrap.layout--2 form .btn-newsletter { margin-top: 15px; padding: 15px 20px; width: 100%; } } .newsletter-form-wrap.layout--2 form .btn-newsletter.christmas { background-color: #FF0000; } .newsletter-form-wrap.layout--2 .mailchimp-alerts { position: absolute; margin-top: 5px; font-weight: 600; line-height: 1; } .newsletter-form-wrap.layout--2 .mailchimp-alerts .mailchimp-submitting { color: #222222; } .newsletter-form-wrap.layout--2 .mailchimp-alerts .mailchimp-success { color: #004d00; } .newsletter-form-wrap.layout--2 .mailchimp-alerts .mailchimp-error { color: #FF0000; } .newsletter-form-wrap.layout--2.black-input form input { background-color: #444444; color: #fff; } .newsletter-form-wrap.layout--transparent form input { background-color: transparent; border: 2px solid #222222; color: #222222; } .newsletter-form-wrap.layout--transparent form .btn-newsletter { background-color: #222222; color: #fff; padding: 25px 40px; text-transform: uppercase; font-weight: 600; letter-spacing: 1px; position: static; -webkit-transform: none; -ms-transform: none; transform: none; } @media only screen and (max-width: 767.98px) { .newsletter-form-wrap.layout--transparent form .btn-newsletter { padding: 25px; } } @media only screen and (max-width: 575.98px) { .newsletter-form-wrap.layout--transparent form .btn-newsletter { margin-top: 15px; padding: 15px 20px; width: 100%; } } .btn-newsletter.black { background-color: #222222 !important; } .btn-newsletter.black:hover { background-color: #f4f4f4 !important; color: #222222 !important; } .bg-brand .btn-black:hover { background-color: #f4f4f4; border-color: #f4f4f4; color: #000; } /*================================== 22. Start Shop Creative Banner Area ====================================*/ .single-creative-shop-banner { padding: 200px 0 350px; } @media only screen and (min-width: 768px) and (max-width: 991.98px), only screen and (min-width: 992px) and (max-width: 1199.98px) { .single-creative-shop-banner { padding: 150px 0; } } @media only screen and (max-width: 767.98px) { .single-creative-shop-banner { padding: 100px 0; } } @media only screen and (max-width: 575.98px) { .single-creative-shop-banner { padding: 60px 0; } } .single-creative-shop-banner .creative-shop-banner-content { color: white; font-size: 20px; font-weight: 700; } @media only screen and (max-width: 575.98px) { .single-creative-shop-banner .creative-shop-banner-content { font-size: 16px; } } .single-creative-shop-banner .creative-shop-banner-content h2 { color: white; font-size: 110px; line-height: 1; margin: 0 0 23px; position: relative; padding-bottom: 17px; } @media only screen and (min-width: 992px) and (max-width: 1199.98px) { .single-creative-shop-banner .creative-shop-banner-content h2 { font-size: 90px; padding-bottom: 20px; } } @media only screen and (min-width: 768px) and (max-width: 991.98px) { .single-creative-shop-banner .creative-shop-banner-content h2 { font-size: 60px; padding-bottom: 24px; } } @media only screen and (max-width: 767.98px) { .single-creative-shop-banner .creative-shop-banner-content h2 { font-size: 50px; padding-bottom: 30px; } } @media only screen and (max-width: 575.98px) { .single-creative-shop-banner .creative-shop-banner-content h2 { font-size: 30px; padding-bottom: 30px; } } .single-creative-shop-banner .creative-shop-banner-content h2:before { background-color: white; content: ''; position: absolute; left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); bottom: 0; height: 3px; width: 60%; } /*=============================== 23. Start Category Product Area =================================*/ .single-category-product { margin-bottom: 120px; } @media only screen and (min-width: 768px) and (max-width: 991.98px) { .single-category-product { margin-bottom: 85px; } } @media only screen and (max-width: 767.98px) { .single-category-product { margin-bottom: 65px; } } .single-category-product:last-child { margin-bottom: 0; } .single-category-product .cate-product-banner-area { position: relative; } @media only screen and (min-width: 768px) and (max-width: 991.98px), only screen and (max-width: 767.98px) { .single-category-product .cate-product-banner-area { margin-bottom: 45px; } } .single-category-product .cate-product-banner-area h2 { font-size: 60px; line-height: 1.1; font-weight: 600; position: relative; padding-bottom: 20px; margin-top: -15px; } .single-category-product .cate-product-banner-area h2:before { background-color: #222222; content: ""; position: absolute; left: 0; bottom: 0; height: 3px; width: 70px; } @media only screen and (min-width: 992px) and (max-width: 1199.98px), only screen and (min-width: 768px) and (max-width: 991.98px) { .single-category-product .cate-product-banner-area h2 { font-size: 40px; } } @media only screen and (max-width: 767.98px) { .single-category-product .cate-product-banner-area h2 { font-size: 25px; } } .single-category-product .cate-product-banner-area .cate-thumb { margin-left: 100px; margin-top: -75px; display: inline-block; } @media only screen and (min-width: 992px) and (max-width: 1199.98px), only screen and (min-width: 768px) and (max-width: 991.98px), only screen and (max-width: 767.98px) { .single-category-product .cate-product-banner-area .cate-thumb { margin: 15px 0 0; } } .single-category-product .cate-product-banner-area .cate-thumb img { width: 100%; } .single-category-product .cate-product-banner-area .cate-thumb .banner-offer-text { font-size: 20px; line-height: 1.2; font-family: "Playfair Display", serif; font-style: italic; margin-top: 50px; } @media only screen and (min-width: 768px) and (max-width: 991.98px), only screen and (max-width: 767.98px) { .single-category-product .cate-product-banner-area .cate-thumb .banner-offer-text { margin-top: 25px; } } .single-category-product .cate-product-banner-area .banner-rotate-text { color: #222; font-size: 14px; font-weight: 600; line-height: 1; text-transform: uppercase; text-decoration: underline; -webkit-transform: rotate(-270deg); -ms-transform: rotate(-270deg); transform: rotate(-270deg); display: inline-block; position: absolute; right: 30px; top: 50%; } @media only screen and (min-width: 992px) and (max-width: 1199.98px) { .single-category-product .cate-product-banner-area .banner-rotate-text { display: none; } } @media only screen and (min-width: 1200px) and (max-width: 1599.98px) { .single-category-product .cate-product-banner-area .banner-rotate-text { right: -25px; } } @media only screen and (max-width: 767.98px) { .single-category-product .cate-product-banner-area .banner-rotate-text { font-size: 12px; position: static; -webkit-transform: none; -ms-transform: none; transform: none; margin-top: 15px; } .single-category-product .cate-product-banner-area .banner-rotate-text:hover { color: #fdc657; } } .single-category-product:nth-child(2n) .cate-product-banner-area { margin-left: 80px; } @media only screen and (min-width: 768px) and (max-width: 991.98px), only screen and (max-width: 767.98px) { .single-category-product:nth-child(2n) .cate-product-banner-area { margin-left: 0; } } .single-category-product:nth-child(2n) .cate-product-banner-area .banner-rotate-text { right: -50px; } @media only screen and (min-width: 768px) and (max-width: 991.98px) { .single-category-product:nth-child(2n) .cate-product-banner-area .banner-rotate-text { right: 30px; } } @media only screen and (max-width: 767.98px), only screen and (min-width: 768px) and (max-width: 991.98px) { .single-category-product:nth-child(2n) [class*="col-"]:first-child { -webkit-box-ordinal-group: 2; -ms-flex-order: 1; order: 1; } } @media only screen and (max-width: 767.98px), only screen and (min-width: 768px) and (max-width: 991.98px) { .single-category-product:nth-child(2n) [class*="col-"]:last-child { -webkit-box-ordinal-group: 1; -ms-flex-order: 0; order: 0; } } /*============================== 24. Start Post Slider Wrapper =================================*/ .single-post-slide-wrap { position: relative; z-index: 1; height: 800px; } @media only screen and (min-width: 992px) and (max-width: 1199.98px), only screen and (min-width: 768px) and (max-width: 991.98px) { .single-post-slide-wrap { height: 600px; } } @media only screen and (max-width: 767.98px) { .single-post-slide-wrap { height: 400px; } } .single-post-slide-wrap:before { background-color: rgba(0, 0, 0, 0.4); content: ""; position: absolute; left: 0; top: 0; pointer-events: none; height: 100%; width: 100%; z-index: -1; } .single-post-slide-wrap .post-meta { padding: 40px 40px 0; } @media only screen and (max-width: 767.98px) { .single-post-slide-wrap .post-meta { padding: 30px 15px 0; } } .single-post-slide-wrap .post-meta a { color: #fff; font-weight: 600; font-size: 14px; line-height: 1; text-transform: uppercase; position: relative; } .single-post-slide-wrap .post-meta a:after { background-color: #fff; content: ''; position: absolute; height: 2px; width: 100%; left: 0; bottom: -3px; } .single-post-slide-wrap .post-details { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; height: 100%; } .single-post-slide-wrap .post-content { color: #fff; padding: 0 100px 100px; } @media only screen and (min-width: 992px) and (max-width: 1199.98px) { .single-post-slide-wrap .post-content { padding: 0 40px 100px; } } @media only screen and (max-width: 767.98px) { .single-post-slide-wrap .post-content { padding: 0 15px 30px; } } .single-post-slide-wrap .post-content a { color: #fff; } .single-post-slide-wrap .post-content a.post-date { font-weight: 600; font-size: 14px; line-height: 1; text-transform: uppercase; margin-bottom: 41px; display: inline-block; } @media only screen and (max-width: 767.98px) { .single-post-slide-wrap .post-content a.post-date { margin-bottom: 22px; } } .single-post-slide-wrap .post-content a.btn-bordered, .single-post-slide-wrap .post-content a.btn-black, .single-post-slide-wrap .post-content .single-banner-wrap:nth-child(2n) a.btn-bordered:hover, .single-banner-wrap:nth-child(2n) .single-post-slide-wrap .post-content a.btn-bordered:hover { border: 2px solid #fff; margin-top: 9px; } .single-post-slide-wrap .post-content a.btn-bordered:hover, .single-post-slide-wrap .post-content a.btn-black:hover { background-color: #fff; color: #222222; } .single-post-slide-wrap .post-content h2 { font-size: 30px; font-weight: 600; margin-bottom: 24px; } @media only screen and (max-width: 767.98px) { .single-post-slide-wrap .post-content h2 { font-size: 18px; } } /*======================= 25. Start About Me Area ==========================*/ .about-me-area { padding: 150px 0; } @media only screen and (min-width: 768px) and (max-width: 991.98px) { .about-me-area { padding: 80px 0; } } @media only screen and (max-width: 767.98px) { .about-me-area { padding: 60px 0; } } .about-me-content .about-author-thumb { border-radius: 50%; -ms-flex-preferred-size: 170px; flex-basis: 170px; height: 170px; width: 170px; overflow: hidden; margin: auto; } .about-me-content .about-author-thumb img { height: 100%; width: 100%; } .about-me-content .about-author-info { -ms-flex-preferred-size: calc(100% - 200px); flex-basis: calc(100% - 200px); margin-left: 30px; } @media only screen and (max-width: 575.98px) { .about-me-content .about-author-info { margin-left: 0; margin-top: 30px; } } .about-me-content .about-author-info h2 { font-size: 30px; font-weight: 600; line-height: 1; margin-bottom: 34px; margin-top: -3px; } @media only screen and (max-width: 767.98px) { .about-me-content .about-author-info h2 { margin-bottom: 20px; } } .about-me-content .about-author-info .author-sign { margin-top: 24px; } /*=============================================== Start About Area Wrapper [Index Creative Studio] =================================================*/ .about-area-wrapper { padding: 180px 0; } @media only screen and (min-width: 768px) and (max-width: 991.98px) { .about-area-wrapper { padding: 80px 0; } } @media only screen and (max-width: 767.98px) { .about-area-wrapper { padding: 60px 0; } } .about-area-wrapper .about-content { background-color: #fff; padding: 100px 60px; } @media only screen and (max-width: 767.98px) { .about-area-wrapper .about-content { padding: 50px 15px; } } .about-area-wrapper .about-content h2 { font-size: 40px; line-height: 1; margin-bottom: 40px; } @media only screen and (max-width: 767.98px) { .about-area-wrapper .about-content h2 { font-size: 25px; margin-bottom: 20px; } } .about-area-wrapper .about-content .btn { margin-top: 29px; } @media only screen and (max-width: 767.98px) { .about-area-wrapper .about-content .btn { margin-top: 10px; } } /*============================ 26. Start Blog Content Are ==============================*/ .blog-content-area-wrap .single-post-slide-wrap { height: auto; } .blog-content-area-wrap .single-post-slide-wrap:before { display: none; } .blog-content-area-wrap .single-post-slide-wrap .post-thumbnail { position: relative; } .blog-content-area-wrap .single-post-slide-wrap .post-thumbnail:before { background-color: rgba(0, 0, 0, 0.3); content: ""; position: absolute; left: 0; top: 0; pointer-events: none; height: 100%; width: 100%; } .blog-content-area-wrap .single-post-slide-wrap .post-thumbnail .post-meta { position: absolute; top: 0; padding: 20px 20px 0; height: 100%; width: 100%; } .blog-content-area-wrap .single-post-slide-wrap .post-thumbnail .post-meta .btn-hvr:not(.btn-play) { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); padding-top: 30px; opacity: 0; visibility: hidden; font-size: 30px; width: 40px; } .blog-content-area-wrap .single-post-slide-wrap .post-thumbnail .post-meta .btn-hvr:not(.btn-play):after { display: none; } .blog-content-area-wrap .single-post-slide-wrap .post-thumbnail .post-meta .btn-play { border: 2px solid #fff; border-radius: 50%; display: block; font-size: 20px; line-height: 60px; text-align: center; position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); height: 60px; width: 60px; } .blog-content-area-wrap .single-post-slide-wrap .post-thumbnail .post-meta .btn-play:after { display: none; } .blog-content-area-wrap .single-post-slide-wrap .post-thumbnail .post-meta .btn-play:hover { -webkit-box-shadow: 0 0 100px #000; box-shadow: 0 0 100px #000; } .blog-content-area-wrap .single-post-slide-wrap .post-content { color: #666666; padding: 0; margin-top: 44px; } @media only screen and (max-width: 767.98px) { .blog-content-area-wrap .single-post-slide-wrap .post-content { margin-top: 24px; } } .blog-content-area-wrap .single-post-slide-wrap .post-content a { color: #666666; } .blog-content-area-wrap .single-post-slide-wrap .post-content a.post-date { margin-bottom: 23px; } .blog-content-area-wrap .single-post-slide-wrap .post-content h2 { font-size: 24px; } @media only screen and (min-width: 768px) and (max-width: 991.98px), only screen and (max-width: 767.98px) { .blog-content-area-wrap .single-post-slide-wrap .post-content h2 { font-size: 18px; } } .blog-content-area-wrap .single-post-slide-wrap .post-content h2 a { color: #222222; } .blog-content-area-wrap .single-post-slide-wrap .post-content .btn { border: none; color: #222222; padding: 0; } .blog-content-area-wrap .single-post-slide-wrap .post-content .btn i { font-size: 20px; line-height: 1; vertical-align: text-bottom; -webkit-transition: 0.4s; -o-transition: 0.4s; transition: 0.4s; opacity: 0; visibility: hidden; } .blog-content-area-wrap .single-post-slide-wrap .post-content .btn:hover i { padding-left: 15px; opacity: 1; visibility: visible; } .blog-content-area-wrap .single-post-slide-wrap:hover .post-thumbnail .post-meta .btn-hvr { opacity: 1; visibility: visible; padding-top: 0; } .blog-content-area-wrap [class*="col-"]:nth-child(1n + 3) .single-post-slide-wrap { border-top: 1px solid #e7e7e7; padding-top: 50px; margin-top: 43px; } @media only screen and (max-width: 767.98px) { .blog-content-area-wrap [class*="col-"]:nth-child(1n+2) .single-post-slide-wrap { border-top: 1px solid #e7e7e7; padding-top: 30px; margin-top: 23px; } } .post-quote blockquote { background-color: #000; color: #fff; font-size: 20px; line-height: 2; font-family: "Playfair Display", serif; padding: 50px 40px; margin-bottom: 0; } .post-quote blockquote:before { display: none; } @media only screen and (max-width: 767.98px) { .post-quote blockquote { padding: 30px 15px; } } .post-quote blockquote .blockquote-footer { position: relative; padding-left: 25px; margin-top: 13px; } .post-quote blockquote .blockquote-footer a { color: #fdc657; font-size: 16px; text-transform: uppercase; font-family: "Poppins", sans-serif; font-weight: 600; } .post-quote blockquote .blockquote-footer:before { background-color: #fdc657; content: ''; position: absolute; left: 0; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); height: 2px; width: 15px; } .pagination-content { text-align: center; position: relative; padding: 80px 0; } @media only screen and (min-width: 768px) and (max-width: 991.98px), only screen and (max-width: 767.98px) { .pagination-content { padding: 50px 0; } } .pagination-content:before, .pagination-content:after { background-color: #f4f4f4; content: ''; position: absolute; top: 0; height: 100%; width: 100%; } .pagination-content:before { right: 100%; } .pagination-content:after { left: 100%; } .pagination-content ul li:not(.btn-arrow) { margin: 0 10px; } .pagination-content ul li a { border: 3px solid; border-radius: 50%; color: #999999; display: block; font-size: 18px; font-weight: 700; line-height: 45px; height: 50px; width: 50px; } @media only screen and (max-width: 767.98px) { .pagination-content ul li a { font-size: 16px; line-height: 35px; height: 40px; width: 40px; } } .pagination-content ul li a.active, .pagination-content ul li a:hover { border-color: #222222; color: #222222; } .pagination-content-2 { padding: 80px 100px; } @media only screen and (min-width: 768px) and (max-width: 991.98px), only screen and (max-width: 767.98px) { .pagination-content-2 { padding: 50px 15px; } } /*================================== 27. Start Sidebar Content Wrapper ====================================*/ .single-sidebar-item-wrap { margin-bottom: 50px; } .single-sidebar-item-wrap:last-child { margin-bottom: 0; } .single-sidebar-item-wrap .sidebar-title { font-size: 20px; line-height: 1; font-weight: 600; text-transform: uppercase; position: relative; padding-bottom: 30px; margin-bottom: 30px; margin-top: -3px; } .single-sidebar-item-wrap .sidebar-title:before { background-color: #fdc657; content: ""; position: absolute; left: 0; bottom: 0; height: 3px; width: 30px; } .sidebar-list li a { border: 1px solid #e7e7e7; border-bottom: 0; color: #222222; display: block; font-weight: 600; font-size: 14px; line-height: 1; text-transform: uppercase; padding: 20px; } .sidebar-list li a:hover { color: #fdc657; } .sidebar-list li:last-child a { border-bottom: 1px solid #e7e7e7; } .sidebar-body .latest-blog-widget .single-blog-item:after { background-color: #e7e7e7; } .sidebar-body .latest-blog-widget .single-blog-item .post-info a { color: #222222; } .sidebar-body .latest-blog-widget .single-blog-item .post-info a:hover { padding-left: 0; } .sidebar-body .latest-blog-widget .single-blog-item .post-info a:before { display: none; } .sidebar-body .latest-blog-widget .single-blog-item .post-thumb { max-width: 65px; -ms-flex-preferred-size: 65px; flex-basis: 65px; max-height: 65px; overflow: hidden; } .sidebar-newsletter { background-color: #000; padding: 56px 30px 60px; } @media only screen and (min-width: 992px) and (max-width: 1199.98px) { .sidebar-newsletter { padding: 56px 10px 60px; } } .sidebar-newsletter h3 { color: #fff; font-size: 30px; font-weight: 600; line-height: 1; margin-bottom: 26px; } .sidebar-newsletter form input { border: none; display: block; outline: none; padding: 15px; width: 100%; } @media only screen and (min-width: 992px) and (max-width: 1199.98px) { .sidebar-newsletter form input { padding: 15px 10px; } } .sidebar-newsletter form button { width: 100%; padding: 15px; margin-top: 15px; } .sidebar-body .instagram-feed .instagram-gallery { margin: -5px -2.5px 0; } .sidebar-body .instagram-feed .instagram-gallery .instagram-item { max-width: calc(33.333% - 5px); display: inline-block; margin: 5px 2.5px 0; } .sidebar-body .instagram-feed .instagram-gallery .instagram-item img { -webkit-filter: grayscale(70%); filter: grayscale(70%); -webkit-transition: 0.4s; -o-transition: 0.4s; transition: 0.4s; } .sidebar-body .instagram-feed .instagram-gallery .instagram-item img:hover { -webkit-filter: grayscale(0); filter: grayscale(0); } .sidebar-body .instagram-feed .insta-follow { color: #666666; font-size: 15px; font-weight: 400; line-height: 1; margin-top: 29px; margin-bottom: 0; } .sidebar-body .instagram-feed .insta-follow a { color: #000; font-weight: 600; } .sidebar-body .instagram-feed .insta-follow i { margin-right: 15px; } .price-range-wrap { padding-top: 2px; } .price-range-wrap .price-range.ui-widget-content { border: none; border-radius: 0; background: #eeeeee; height: 10px; } .price-range-wrap .price-range.ui-widget-content .ui-slider-range { background: #ababab; border-radius: 0; } .price-range-wrap .price-range.ui-widget-content .ui-slider-handle { border-radius: 50%; border: none; background: #222222; height: 16px; width: 16px; outline: none; top: -3px; cursor: ew-resize; margin-left: -.5em; } .price-range-wrap .range-slider { line-height: 1; margin-top: 22px; } .price-range-wrap .range-slider * { margin: 0; line-height: 1; } .price-range-wrap .range-slider input#amount { background-color: transparent; border: none; outline: none; line-height: 1; pointer-events: none; margin-left: 10px; } .price-range-wrap .range-slider .range-inner { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .src-from-content input { background-color: #f4f4f4; border: 1px solid #f4f4f4; display: block; padding: 15px 10px; outline: none; max-width: calc(100% - 60px); -ms-flex-preferred-size: calc(100% - 60px); flex-basis: calc(100% - 60px); } .src-from-content .btn-search { background-color: #fdc657; color: #fff; max-width: 60px; -ms-flex-preferred-size: 60px; flex-basis: 60px; } .single-recent-view-prod { -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .single-recent-view-prod:nth-child(1n + 2) { margin-top: 10px; } .single-recent-view-prod h3 { font-size: 16px; font-weight: 600; margin-bottom: 6px; margin-top: -3px; } .single-recent-view-prod h3 a { color: #222222; } .single-recent-view-prod h3 a:hover { color: #fdc657; } .single-recent-view-prod .rating { line-height: 1; font-size: 14px; margin-bottom: 5px; } .single-recent-view-prod .price-group { font-weight: 700; } .single-recent-view-prod .price-group .price-old { opacity: 0.8; margin-right: 5px; } .single-recent-view-prod .prod-thumb { max-width: 80px; -ms-flex-preferred-size: 80px; flex-basis: 80px; } /*================================ 28. Start Call to Action Wrapper =================================*/ .single-call-action-wrap { background-color: #222222; padding: 120px 130px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } @media only screen and (min-width: 1200px) and (max-width: 1599.98px) { .single-call-action-wrap { padding: 120px 30px; } } @media only screen and (min-width: 992px) and (max-width: 1199.98px) { .single-call-action-wrap { display: block; padding: 120px 30px; } } @media only screen and (min-width: 768px) and (max-width: 991.98px) { .single-call-action-wrap { display: block; padding: 80px 15px; } } @media only screen and (max-width: 767.98px) { .single-call-action-wrap { display: block; padding: 60px 15px; } } .single-call-action-wrap:nth-child(2n) { background-color: #181818; } .single-call-action-wrap .call-action-thumb { max-width: 200px; width: 100%; margin-right: 35px; } @media only screen and (min-width: 992px) and (max-width: 1199.98px) { .single-call-action-wrap .call-action-thumb { margin-bottom: 48px; max-width: 150px; } } @media only screen and (min-width: 768px) and (max-width: 991.98px), only screen and (max-width: 767.98px) { .single-call-action-wrap .call-action-thumb { margin: 0 auto 30px; max-width: 100px; } } .single-call-action-wrap .call-action-thumb img { width: 100%; } .single-call-action-wrap .call-action-info { color: #b8b8b8; line-height: 2; } .single-call-action-wrap .call-action-info h2 { color: #fff; font-size: 40px; line-height: 1.2; margin-top: -7px; margin-bottom: 35px; } @media only screen and (min-width: 768px) and (max-width: 991.98px) { .single-call-action-wrap .call-action-info h2 { font-size: 30px; font-weight: 600; margin-bottom: 18px; } } @media only screen and (max-width: 767.98px) { .single-call-action-wrap .call-action-info h2 { font-size: 30px; font-weight: 400; margin-bottom: 18px; } } .single-call-action-wrap .call-action-info .btn { border-color: #fff; color: #fdc657; margin-top: 28px; -webkit-transition: 0.5s; -o-transition: 0.5s; transition: 0.5s; } @media only screen and (min-width: 768px) and (max-width: 991.98px), only screen and (max-width: 767.98px) { .single-call-action-wrap .call-action-info .btn { margin-top: 18px; } } .single-call-action-wrap .call-action-info .btn:hover { background-color: #fdc657; border-color: #fdc657; color: #fff; } .single-call-action-wrap .call-action-icon { color: #fdc657; font-size: 100px; line-height: 1; margin-right: 100px; } @media only screen and (min-width: 1200px) and (max-width: 1599.98px) { .single-call-action-wrap .call-action-icon { margin-right: 50px; } } @media only screen and (min-width: 992px) and (max-width: 1199.98px) { .single-call-action-wrap .call-action-icon { margin-bottom: 48px; margin-right: 0; } } @media only screen and (min-width: 768px) and (max-width: 991.98px), only screen and (max-width: 767.98px) { .single-call-action-wrap .call-action-icon { margin-bottom: 25px; margin-right: 0; font-size: 60px; } } .call-action-content { color: #fff; line-height: 2; padding: 140px 0 150px; } @media only screen and (min-width: 768px) and (max-width: 991.98px) { .call-action-content { padding: 80px 0; } } @media only screen and (max-width: 767.98px) { .call-action-content { padding: 0 0 60px; margin-top: 30px; } } .call-action-content h2 { color: #fff; font-size: 40px; line-height: 1.3; margin-bottom: 35px; } @media only screen and (min-width: 768px) and (max-width: 991.98px) { .call-action-content h2 { font-size: 32px; } } @media only screen and (max-width: 767.98px) { .call-action-content h2 { font-size: 24px; margin-bottom: 15px; } } .call-action-content .btn-bordered, .call-action-content .btn-black, .call-action-content .single-banner-wrap:nth-child(2n) .btn-bordered:hover, .single-banner-wrap:nth-child(2n) .call-action-content .btn-bordered:hover { border-color: #fff; color: #fff; margin-top: 20px; } .call-action-content .btn-bordered:hover, .call-action-content .btn-black:hover, .call-action-content .single-banner-wrap:nth-child(2n) .btn-bordered:hover, .single-banner-wrap:nth-child(2n) .call-action-content .btn-bordered:hover { color: #fdc657; } .call-action-video-area { position: relative; height: 100%; -webkit-transition: 0.4s; -o-transition: 0.4s; transition: 0.4s; z-index: 1; } @media only screen and (max-width: 767.98px) { .call-action-video-area { margin-top: 60px; height: 300px; } } .call-action-video-area:before { background-color: rgba(0, 0, 0, 0.5); content: ""; position: absolute; left: 0; top: 0; height: 100%; width: 100%; z-index: 1; } .btn-video-popup { border-radius: 50%; border: 5px solid #fff; color: #fff; display: block; font-size: 30px; position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); text-align: center; line-height: 70px; height: 80px; width: 80px; z-index: 2; } .btn-video-popup i { padding-left: 3px; } .call-action-img img, .gallery-image img { width: 100%; } /*=========================== 29. Start Our Skills Area ==============================*/ .our-skills-content-wrapper .section-title-wrap { padding-bottom: 0; margin-bottom: 42px; } .our-skills-content-wrapper .section-title-wrap:after { display: none; } .single-skill-bar { margin-top: 50px; } @media only screen and (max-width: 767.98px) { .single-skill-bar { margin-top: 30px; } } .single-skill-bar .skills-info { margin-bottom: 20px; } .single-skill-bar .skills-info .skill-title, .single-skill-bar .skills-info .skill-percent { font-weight: 600; font-size: 15px; line-height: 1; text-transform: uppercase; margin: 0; } .single-skill-bar .skills-info .skill-percent { font-weight: 700; } .single-skill-bar .progress { background-color: #eee; border-radius: 0; height: 10px; } .single-skill-bar .progress .progress-bar { background-color: #222222; } /*================================ 30. Start Contact Area Wrapper ==================================*/ .contact-map-area-wrap { height: 650px; } @media only screen and (min-width: 768px) and (max-width: 991.98px), only screen and (max-width: 767.98px) { .contact-map-area-wrap { height: 400px; } } .contact-map-area-wrap #map_content { height: 100%; } .contact-map-area-wrap.home-baber { height: 480px; } @media only screen and (min-width: 768px) and (max-width: 991.98px), only screen and (max-width: 767.98px) { .contact-map-area-wrap.home-baber { height: 300px; } } .contact-info-area-wrapper .contact-info-content-wrap, .contact-info-area-wrapper .contact-info-content.layout--2 { margin-top: -120px; position: relative; z-index: 999; } .contact-info-area-wrapper .contact-info-thumb img { width: 100%; } .contact-info-area-wrapper.layout--2 { position: absolute; } @media only screen and (min-width: 768px) and (max-width: 991.98px), only screen and (max-width: 767.98px) { .contact-info-area-wrapper.layout--2 { position: static; } } .contact-info-content { background-color: #fff; padding: 60px; } @media only screen and (min-width: 992px) and (max-width: 1199.98px), only screen and (max-width: 767.98px) { .contact-info-content { padding: 50px 30px; } } .contact-info-content.layout--2 { -webkit-transform: translateY(-100%); -ms-transform: translateY(-100%); transform: translateY(-100%); } @media only screen and (min-width: 768px) and (max-width: 991.98px), only screen and (max-width: 767.98px) { .contact-info-content.layout--2 { -webkit-transform: none; -ms-transform: none; transform: none; } } .con-method-item { position: relative; line-height: 1.8; padding-left: 40px; margin-bottom: 30px; } .con-method-item:last-child { margin-bottom: 0; } .con-method-item p { margin-bottom: 0; } .con-method-item a { color: #666666; } .con-method-item i { color: #fdc657; font-size: 16px; line-height: 1; position: absolute; left: 0; top: 6px; text-align: center; width: 25px; } /*=============================== 31. Start Agency About Wrapper ================================*/ .agency-about-wrapper { position: fixed; left: 0; top: 0; height: 100vh; width: 50%; } @media only screen and (max-width: 767.98px) { .agency-about-wrapper { position: static; width: 100%; } } .agency-about-wrapper:before { background-color: rgba(255, 255, 255, 0.6); content: ""; position: absolute; left: 0; top: 0; height: 100%; width: 100%; } @media only screen and (min-width: 1200px) { .agency-about-wrapper:before { display: none; } } .agency-about-content-wrap h2 { font-size: 60px; font-weight: 600; line-height: 1.1; margin-bottom: 40px; } @media only screen and (max-width: 767.98px) { .agency-about-content-wrap h2 { font-size: 30px; } } @media only screen and (max-width: 767.98px) { .portfolio-area-wrapper.w-50 { width: 100% !important; } } @media screen and (min-width: 1600px) { .portfolio-area-wrapper .container { padding: 0 100px; } } /*================================= 32. Start Showcase Description Area ===================================*/ .single-desc-item-wrap { color: #222222; margin-top: 50px; } .single-desc-item-wrap .desc-number { border: 3px solid #222222; border-radius: 50%; color: #222222; display: block; font-weight: 700; font-size: 28px; text-align: center; line-height: 45px; height: 50px; width: 50px; } .single-desc-item-wrap .desc-number-white { color: #fff; border-color: #fff; } .single-desc-item-wrap h3 { font-size: 16px; font-weight: 600; line-height: 1; text-transform: uppercase; margin: 30px 0; } @media only screen and (max-width: 767.98px) { .single-desc-item-wrap h3 { margin: 20px 0; } } .single-desc-item-wrap .showcase-desc-list { line-height: 2; padding-left: 18px; } .single-desc-item-wrap .showcase-desc-list li { list-style-type: inherit; } /*================================== 33. Start Get App Now Area Wrapper ===================================*/ .get-app-now-wrapper { height: 80vh; position: relative; } @media only screen and (min-width: 768px) and (max-width: 991.98px) { .get-app-now-wrapper { height: 50vh; } } .get-app-now-wrapper:before { background-color: rgba(0, 0, 0, 0.3); content: ""; position: absolute; left: 0; top: 0; height: 100%; width: 100%; } .get-app-now-wrapper .get-app-now-content h2 { color: #fff; font-size: 70px; line-height: 1; text-transform: uppercase; letter-spacing: 15px; margin-top: -10px; margin-bottom: 89px; } @media only screen and (max-width: 767.98px) { .get-app-now-wrapper .get-app-now-content h2 { font-size: 30px; margin-bottom: 25px; letter-spacing: 5px; } } .get-app-now-wrapper .get-app-now-content .btn-group a { margin-right: 30px; } .get-app-now-wrapper .get-app-now-content .btn-group a:last-child { margin-right: 0; } @media only screen and (max-width: 767.98px) { .get-app-now-wrapper .get-app-now-content .btn-group a { margin-right: 10px; } } /*=============================== 34. Start Architect Project Area ================================*/ .architect-project-item { margin-top: 30px; } .architect-project-item .project-thumbnail img { width: 100%; } .architect-project-item .project-info h2 { font-size: 16px; font-weight: 600; text-transform: uppercase; margin: 32px 0 20px; } @media only screen and (min-width: 768px) and (max-width: 991.98px), only screen and (max-width: 767.98px) { .architect-project-item .project-info h2 { margin: 20px 0 10px; } } .architect-project-item .project-info p { margin-bottom: 0; } .architect-project-item .btn-read-more { color: #222222; display: inline-block; font-size: 14px; font-weight: 600; line-height: 1; text-transform: uppercase; margin-top: 15px; } .architect-project-item .btn-read-more:hover { color: #fdc657; } /*====================================== 35. Start Revolution Slider Css =======================================*/ #rev_slider_classic .metis.tparrows { background: white; padding: 10px; -o-transition: all 0.3s; transition: all 0.3s; -webkit-transition: all 0.3s; width: 60px; height: 60px; -webkit-box-sizing: border-box; box-sizing: border-box; } #rev_slider_classic .metis.tparrows:hover { background: rgba(255, 255, 255, 0.75); } #rev_slider_classic .metis.tparrows:before { color: black; -o-transition: all 0.3s; transition: all 0.3s; -webkit-transition: all 0.3s; } #rev_slider_classic .metis.tparrows:hover:before { -webkit-transform: scale(1.5); -ms-transform: scale(1.5); transform: scale(1.5); } #rev_slider_corporate .uranus.tparrows { width: 50px; height: 50px; background: rgba(255, 255, 255, 0); } #rev_slider_corporate .uranus.tparrows:before { width: 50px; height: 50px; line-height: 50px; font-size: 40px; -o-transition: all 0.3s; transition: all 0.3s; -webkit-transition: all 0.3s; } #rev_slider_corporate .uranus.tparrows:hover:before { opacity: 0.75; } #rev_slider_corporate .uranus .tp-bullet { border-radius: 50%; -webkit-box-shadow: 0 0 0 2px rgba(255, 255, 255, 0); box-shadow: 0 0 0 2px rgba(255, 255, 255, 0); -webkit-transition: box-shadow 0.3s ease; -webkit-transition: -webkit-box-shadow 0.3s ease; transition: -webkit-box-shadow 0.3s ease; -o-transition: box-shadow 0.3s ease; transition: box-shadow 0.3s ease; transition: box-shadow 0.3s ease, -webkit-box-shadow 0.3s ease; background: transparent; width: 15px; height: 15px; } #rev_slider_corporate .uranus .tp-bullet.selected, #rev_slider_corporate .uranus .tp-bullet:hover { -webkit-box-shadow: 0 0 0 2px white; box-shadow: 0 0 0 2px white; border: none; border-radius: 50%; background: transparent; } #rev_slider_corporate .uranus .tp-bullet-inner { -webkit-transition: background-color 0.3s ease, -webkit-transform 0.3s ease; transition: background-color 0.3s ease, -webkit-transform 0.3s ease; -o-transition: background-color 0.3s ease, transform 0.3s ease; transition: background-color 0.3s ease, transform 0.3s ease; transition: background-color 0.3s ease, transform 0.3s ease, -webkit-transform 0.3s ease; top: 0; left: 0; width: 100%; height: 100%; outline: none; border-radius: 50%; background-color: white; background-color: rgba(255, 255, 255, 0.3); text-indent: -999em; cursor: pointer; position: absolute; } #rev_slider_corporate .uranus .tp-bullet.selected .tp-bullet-inner, #rev_slider_corporate .uranus .tp-bullet:hover .tp-bullet-inner { -ms-transform: scale(0.4); transform: scale(0.4); -webkit-transform: scale(0.4); background-color: white; } .tp-caption.btn-2, .btn-2 { color: #ffffff; font-size: 14px; line-height: 14px; font-weight: 500; font-style: normal; text-decoration: none; background-color: #fdc657; border: 0 solid #000000; border-left-width: 0px; border-radius: 0; } .tp-caption.trio-button-03, .trio-button-03 { color: white; font-size: 14px; line-height: 14px; font-weight: 500; font-style: normal; text-decoration: none; background-color: transparent; border: 2px solid #e9b751; border-radius: 4px 4px 4px 4px; } .tp-caption.trio-button-03:hover, .trio-button-03:hover { color: #1f1f1f; text-decoration: none; background-color: white; border: 2px solid white; border-radius: 4px 4px 4px 4px; cursor: pointer; } .tp-caption.trio-button-06, .trio-button-06 { color: white; font-size: 14px; line-height: 14px; font-weight: 500; font-style: normal; text-decoration: none; background-color: rgba(255, 255, 255, 0); border: 2px solid white; border-radius: 0; } .tp-caption.trio-button-06:hover, .trio-button-06:hover { color: #1f1f1f; text-decoration: none; background-color: white; border: 2px solid white; border-radius: 0; } .tp-caption.trio-button-white, .trio-button-white { color: #1f1f1f; font-size: 14px; line-height: 14px; font-weight: 500; font-style: normal; text-decoration: none; background-color: #ffffff; border: 2px solid #ffffff; border-radius: 0 0 0 0; } .tp-caption.trio-button-white:hover, .trio-button-white:hover { color: #1f1f1f; text-decoration: none; background-color: #ffffff; border: 2px solid #ffffff; border-radius: 0; cursor: pointer; } .tp-caption.abrill-110-400, .abrill-110-400 { color: #ffffff; font-size: 110px; line-height: 90px; font-weight: 400; font-style: normal; text-decoration: none; background-color: transparent; border: 0 none transparent; border-left-width: 0px; border-radius: 0 0 0 0; letter-spacing: 0; } .tp-caption.poppins-16-400, .poppins-16-400 { color: #ffffff; font-size: 16px; line-height: 28px; font-weight: 400; font-style: normal; text-decoration: none; background-color: transparent; border: 0 none transparent; border-left-width: 0px; border-radius: 0 0 0 0; } .tp-caption.mon-40-700, .mon-40-700 { color: #ffffff; font-size: 40px; line-height: 40px; font-weight: 700; font-style: normal; text-decoration: none; background-color: transparent; border: 0 none transparent; border-left-width: 0px; border-radius: 0; } .tp-caption.btn-6, .btn-6 { color: #212121; font-size: 14px; line-height: 14px; font-weight: 600; font-style: normal; text-decoration: none; background-color: #fdc657; border: 0 solid #000000; border-radius: 0; } .tp-caption.mon-75-700, .mon-75-700 { color: #ffffff; font-size: 75px; line-height: 90px; font-weight: 700; font-style: normal; text-decoration: none; background-color: transparent; border: 0 none transparent; border-radius: 0 0 0 0; } #rev_slider_creative_agency .metis.tparrows { background: white; padding: 10px; -o-transition: all 0.3s; transition: all 0.3s; -webkit-transition: all 0.3s; width: 60px; height: 60px; -webkit-box-sizing: border-box; box-sizing: border-box; } #rev_slider_creative_agency .metis.tparrows:hover { background: rgba(255, 255, 255, 0.75); } #rev_slider_creative_agency .metis.tparrows:before { color: black; -o-transition: all 0.3s; transition: all 0.3s; -webkit-transition: all 0.3s; } #rev_slider_creative_agency .metis.tparrows:hover:before { -webkit-transform: scale(1.5); -ms-transform: scale(1.5); transform: scale(1.5); } .tp-caption.trio-button-06, .trio-button-06 { color: white; font-size: 14px; line-height: 14px; font-weight: 500; font-style: normal; text-decoration: none; background-color: rgba(255, 255, 255, 0); border: 2px solid white; border-radius: 0; } .tp-caption.trio-button-06:hover, .trio-button-06:hover { color: #1f1f1f; text-decoration: none; background-color: white; border: 2px solid white; border-radius: 0; } .tp-caption.trio-button-01, .trio-button-01 { color: #ffffff; font-size: 14px; line-height: 14px; font-weight: 500; font-style: normal; text-decoration: none; background-color: transparent; border: 2px solid #ffffff; border-radius: 0; } .tp-caption.trio-button-01:hover, .trio-button-01:hover { color: #1f1f1f; text-decoration: none; background-color: white; border: 2px solid white; border-radius: 0; cursor: pointer; } .tp-caption.poppins-40-700, .poppins-40-700 { color: #ffffff; font-size: 40px; line-height: 40px; font-weight: 700; font-style: normal; text-decoration: none; background-color: transparent; border: 0 none transparent; border-radius: 0; letter-spacing: 0; } .tp-caption.trio-button-06, .trio-button-06 { color: white; font-size: 14px; line-height: 14px; font-weight: 500; font-style: normal; text-decoration: none; background-color: rgba(255, 255, 255, 0); border: 2px solid white; border-radius: 0; } .tp-caption.trio-button-06:hover, .trio-button-06:hover { color: #1f1f1f; text-decoration: none; background-color: white; border: 2px solid white; border-radius: 0; } .tp-caption.poppins-40-700, .poppins-40-700 { color: #ffffff; font-size: 40px; line-height: 40px; font-weight: 700; font-style: normal; text-decoration: none; background-color: transparent; border: 0 none transparent; border-radius: 0; letter-spacing: 0; } @media only screen and (min-width: 768px) and (max-width: 991.98px) { .tp-caption.poppins-40-700, .poppins-40-700 { font-size: 30px; } } .tp-caption.play-18-400-i, .play-18-400-i { color: #ffffff; font-size: 28px; line-height: 1.8; font-weight: 400; font-style: italic; font-family: "Playfair Display", serif; text-decoration: none; background-color: transparent; border: 0 none transparent; border-radius: 0; } @media only screen and (min-width: 768px) and (max-width: 991.98px) { .tp-caption.play-18-400-i, .play-18-400-i { font-size: 20px; } } @media only screen and (max-width: 767.98px) { .tp-caption.play-18-400-i, .play-18-400-i { display: none; } } .tp-caption.poppins-14-600, .poppins-14-600 { color: #1f1f1f; font-size: 14px; line-height: 14px; font-weight: 600; font-style: normal; text-decoration: none; background-color: transparent; border: 0 none transparent; border-radius: 0; } #rev_slider_21_1 .zeus .tp-bullet { box-sizing: content-box; -webkit-box-sizing: content-box; border-radius: 50%; background-color: rgba(0, 0, 0, 0); -webkit-transition: opacity 0.3s ease; -o-transition: opacity 0.3s ease; transition: opacity 0.3s ease; width: 13px; height: 13px; border: 2px solid white; } #rev_slider_21_1 .zeus .tp-bullet:after { content: ""; position: absolute; width: 100%; height: 100%; left: 0; border-radius: 50%; background-color: white; -webkit-transform: scale(0); -ms-transform: scale(0); transform: scale(0); -webkit-transform-origin: 50% 50%; -ms-transform-origin: 50% 50%; transform-origin: 50% 50%; -webkit-transition: -webkit-transform 0.3s ease; transition: -webkit-transform 0.3s ease; -o-transition: transform 0.3s ease; transition: transform 0.3s ease; transition: transform 0.3s ease, -webkit-transform 0.3s ease; } #rev_slider_21_1 .zeus .tp-bullet:hover:after, #rev_slider_21_1 .zeus .tp-bullet.selected:after { -webkit-transform: scale(1.2); -ms-transform: scale(1.2); transform: scale(1.2); } #rev_slider_21_1 .zeus .tp-bullet-image, #rev_slider_21_1 .zeus .tp-bullet-imageoverlay { width: 135px; height: 60px; position: absolute; background: #000; background: rgba(0, 0, 0, 0.5); bottom: 13px; margin-bottom: 10px; -ms-transform: translateX(-50%); transform: translateX(-50%); -webkit-transform: translateX(-50%); -webkit-box-sizing: border-box; box-sizing: border-box; background-size: cover; background-position: center center; visibility: hidden; opacity: 0; -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-transform-origin: 50% 50%; -ms-transform-origin: 50% 50%; transform-origin: 50% 50%; -webkit-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; border-radius: 4px; } #rev_slider_21_1 .zeus .tp-bullet-title, #rev_slider_21_1 .zeus .tp-bullet-imageoverlay { z-index: 2; -webkit-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; -ms-transform: translateX(-50%); transform: translateX(-50%); -webkit-transform: translateX(-50%); } #rev_slider_21_1 .zeus .tp-bullet-title { color: white; text-align: center; line-height: 15px; font-size: 13px; font-weight: 600; z-index: 3; visibility: hidden; opacity: 0; -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-transform-origin: 50% 50%; -ms-transform-origin: 50% 50%; transform-origin: 50% 50%; -webkit-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; position: absolute; bottom: 45px; width: 135px; vertical-align: middle; } #rev_slider_21_1 .zeus .tp-bullet:hover .tp-bullet-title, #rev_slider_21_1 .zeus .tp-bullet:hover .tp-bullet-image, #rev_slider_21_1 .zeus .tp-bullet:hover .tp-bullet-imageoverlay { opacity: 1; visibility: visible; -webkit-transform: translateY(0px) translateX(-50%); -ms-transform: translateY(0px) translateX(-50%); transform: translateY(0px) translateX(-50%); } #rev_slider_21_1 .zeus.nav-dir-vertical .tp-bullet-image, #rev_slider_21_1 .zeus.nav-dir-vertical .tp-bullet-imageoverlay { bottom: auto; margin-right: 10px; margin-bottom: 0px; right: 13px; -ms-transform: translateX(0px) translateY(-50%); transform: translateX(0px) translateY(-50%); -webkit-transform: translateX(0px) translateY(-50%); } #rev_slider_21_1 .zeus.nav-dir-vertical .tp-bullet:hover .tp-bullet-image { -ms-transform: translateX(0px) translateY(-50%); transform: translateX(0px) translateY(-50%); -webkit-transform: translateX(0px) translateY(-50%); } #rev_slider_21_1 .zeus.nav-dir-vertical .tp-bullet-title, #rev_slider_21_1 .zeus.nav-dir-vertical .tp-bullet-imageoverlay { z-index: 2; -webkit-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; -ms-transform: translateX(0px) translateY(-50%); transform: translateX(0px) translateY(-50%); -webkit-transform: translateX(0px) translateY(-50%); } #rev_slider_21_1 .zeus.nav-dir-vertical .tp-bullet-title { bottom: auto; right: 100%; margin-right: 10px; } #rev_slider_21_1 .zeus.nav-dir-vertical .tp-bullet:hover .tp-bullet-title, #rev_slider_21_1 .zeus.nav-dir-vertical .tp-bullet:hover .tp-bullet-image, #rev_slider_21_1 .zeus.nav-dir-vertical .tp-bullet:hover .tp-bullet-imageoverlay { -ms-transform: translateX(0px) translateY(-50%); transform: translateX(0px) translateY(-50%); -webkit-transform: translateX(0px) translateY(-50%); } #rev_slider_21_1 .zeus.nav-dir-vertical.nav-pos-hor-left .tp-bullet-image, #rev_slider_21_1 .zeus.nav-dir-vertical.nav-pos-hor-left .tp-bullet-imageoverlay { bottom: auto; margin-left: 10px; margin-bottom: 0px; left: 13px; -ms-transform: translateX(0px) translateY(-50%); transform: translateX(0px) translateY(-50%); -webkit-transform: translateX(0px) translateY(-50%); } #rev_slider_21_1 .zeus.nav-dir-vertical.nav-pos-hor-left .tp-bullet:hover .tp-bullet-image { -ms-transform: translateX(0px) translateY(-50%); transform: translateX(0px) translateY(-50%); -webkit-transform: translateX(0px) translateY(-50%); } #rev_slider_21_1 .zeus.nav-dir-vertical.nav-pos-hor-left .tp-bullet-title, #rev_slider_21_1 .zeus.nav-dir-vertical.nav-pos-hor-left .tp-bullet-imageoverlay { z-index: 2; -webkit-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; -ms-transform: translateX(0px) translateY(-50%); transform: translateX(0px) translateY(-50%); -webkit-transform: translateX(0px) translateY(-50%); } #rev_slider_21_1 .zeus.nav-dir-vertical.nav-pos-hor-left .tp-bullet-title { bottom: auto; left: 100%; margin-left: 10px; } #rev_slider_21_1 .zeus.nav-dir-horizontal.nav-pos-ver-top .tp-bullet-image, #rev_slider_21_1 .zeus.nav-dir-horizontal.nav-pos-ver-top .tp-bullet-imageoverlay { bottom: auto; top: 13px; margin-top: 10px; margin-bottom: 0px; left: 0px; -ms-transform: translateY(0px) translateX(-50%); transform: translateY(0px) translateX(-50%); -webkit-transform: translateX(0px) translateX(-50%); } #rev_slider_21_1 .zeus.nav-dir-horizontal.nav-pos-ver-top .tp-bullet:hover .tp-bullet-image { -ms-transform: scale(1) translateY(0px) translateX(-50%); transform: scale(1) translateY(0px) translateX(-50%); -webkit-transform: scale(1) translateY(0px) translateX(-50%); } #rev_slider_21_1 .zeus.nav-dir-horizontal.nav-pos-ver-top .tp-bullet-title, #rev_slider_21_1 .zeus.nav-dir-horizontal.nav-pos-ver-top .tp-bullet-imageoverlay { z-index: 2; -webkit-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; -ms-transform: translateY(0px) translateX(-50%); transform: translateY(0px) translateX(-50%); -webkit-transform: translateY(0px) translateX(-50%); } #rev_slider_21_1 .zeus.nav-dir-horizontal.nav-pos-ver-top .tp-bullet-title { bottom: auto; top: 13px; margin-top: 20px; } .tp-caption.poppins-40-700, .poppins-40-700 { color: #ffffff; font-size: 40px; line-height: 40px; font-weight: 700; font-style: normal; text-decoration: none; background-color: transparent; border: 0 none transparent; border-radius: 0 0 0 0; letter-spacing: 0; } .tp-caption.poppins-90-700, .poppins-90-700 { color: #ffffff; font-size: 90px; line-height: 90px; font-weight: 700; font-style: normal; text-decoration: none; background-color: transparent; border: 0 none transparent; border-radius: 0 0 0 0; letter-spacing: 0; } .tp-caption.poppins-16-600, .poppins-16-600 { color: #ffffff; font-size: 16px; line-height: 28px; font-weight: 600; font-style: normal; text-decoration: none; background-color: transparent; border: 0 none transparent; border-radius: 0; } .tp-caption.btn-3, .btn-3 { color: #ffffff; font-size: 14px; line-height: 14px; font-weight: 500; font-style: normal; text-decoration: none; border: 2px solid white; } .tp-caption.btn-3:hover, .btn-3:hover { color: white; text-decoration: none; background-color: #fdc657; border-color: #fdc657; border-radius: 0; } #rev_slider_23_1 .metis.tparrows { background: white; padding: 10px; -o-transition: all 0.3s; transition: all 0.3s; -webkit-transition: all 0.3s; width: 60px; height: 60px; -webkit-box-sizing: border-box; box-sizing: border-box; } #rev_slider_23_1 .metis.tparrows:hover { background: rgba(255, 255, 255, 0.75); } #rev_slider_23_1 .metis.tparrows:before { color: black; -o-transition: all 0.3s; transition: all 0.3s; -webkit-transition: all 0.3s; } #rev_slider_23_1 .metis.tparrows:hover:before { -webkit-transform: scale(1.5); -ms-transform: scale(1.5); transform: scale(1.5); } .tp-caption.trio-button-06, .trio-button-06 { color: white; font-size: 14px; line-height: 14px; font-weight: 500; font-style: normal; text-decoration: none; background-color: rgba(255, 255, 255, 0); border: 2px solid white; border-radius: 0; } .tp-caption.trio-button-06:hover, .trio-button-06:hover { color: #1f1f1f; text-decoration: none; background-color: white; border: 2px solid white; border-radius: 0; } #rev_slider_24_1 .metis.tparrows { background: white; padding: 10px; -o-transition: all 0.3s; transition: all 0.3s; -webkit-transition: all 0.3s; width: 60px; height: 60px; -webkit-box-sizing: border-box; box-sizing: border-box; } #rev_slider_24_1 .metis.tparrows:hover { background: rgba(255, 255, 255, 0.75); } #rev_slider_24_1 .metis.tparrows:before { color: black; -o-transition: all 0.3s; transition: all 0.3s; -webkit-transition: all 0.3s; } #rev_slider_24_1 .metis.tparrows:hover:before { -webkit-transform: scale(1.5); -ms-transform: scale(1.5); transform: scale(1.5); } .tp-caption.trio-button-04, .trio-button-04 { color: white; font-size: 14px; line-height: 14px; font-weight: 600; font-style: normal; text-decoration: none; background-color: #fdc657; border: 2px solid #fdc657; border-radius: 0; } .tp-caption.trio-button-04:hover, .trio-button-04:hover { color: #1f1f1f; text-decoration: none; background-color: white; border: 2px solid white; border-radius: 0; cursor: pointer; } .tp-caption.trio-button-05, .trio-button-05 { color: white; font-size: 14px; line-height: 14px; font-weight: 600; font-style: normal; text-decoration: none; background-color: #212121; border: 2px solid #212121; border-radius: 0; } .tp-caption.trio-button-05:hover, .trio-button-05:hover { color: #1f1f1f; text-decoration: none; background-color: white; border: 2px solid white; border-radius: 0; cursor: pointer; } .tp-caption.trio-button-06, .trio-button-06 { color: white; font-size: 14px; line-height: 14px; font-weight: 500; font-style: normal; text-decoration: none; background-color: rgba(255, 255, 255, 0); border: 2px solid white; border-radius: 0; } .tp-caption.trio-button-06:hover, .trio-button-06:hover { color: #1f1f1f; text-decoration: none; background-color: white; border: 2px solid white; border-radius: 0; } .tp-caption.trio-button-white, .trio-button-white { color: #1f1f1f; font-size: 14px; line-height: 14px; font-weight: 500; font-style: normal; text-decoration: none; background-color: #ffffff; border: 2px solid #ffffff; border-radius: 0; } .tp-caption.trio-button-white:hover, .trio-button-white:hover { color: #1f1f1f; text-decoration: none; background-color: #ffffff; border: 2px solid #ffffff; border-radius: 0; cursor: pointer; } #rev_slider_25_1 .metis.tparrows { background: white; padding: 10px; -o-transition: all 0.3s; transition: all 0.3s; -webkit-transition: all 0.3s; width: 60px; height: 60px; -webkit-box-sizing: border-box; box-sizing: border-box; } #rev_slider_25_1 .metis.tparrows:hover { background: rgba(255, 255, 255, 0.75); } #rev_slider_25_1 .metis.tparrows:before { color: black; -o-transition: all 0.3s; transition: all 0.3s; -webkit-transition: all 0.3s; } #rev_slider_25_1 .metis.tparrows:hover:before { -webkit-transform: scale(1.5); -ms-transform: scale(1.5); transform: scale(1.5); } #rev_slider_1_1 .metis.tparrows { background: white; padding: 10px; -o-transition: all 0.3s; transition: all 0.3s; -webkit-transition: all 0.3s; width: 60px; height: 60px; -webkit-box-sizing: border-box; box-sizing: border-box; } #rev_slider_1_1 .metis.tparrows:hover { background: rgba(255, 255, 255, 0.75); } #rev_slider_1_1 .metis.tparrows:before { color: black; -o-transition: all 0.3s; transition: all 0.3s; -webkit-transition: all 0.3s; } #rev_slider_1_1 .metis.tparrows:hover:before { -webkit-transform: scale(1.5); -ms-transform: scale(1.5); transform: scale(1.5); } .tp-caption.trio-button-01, .trio-button-01 { color: #ffffff; font-size: 14px; line-height: 14px; font-weight: 500; font-style: normal; text-decoration: none; background-color: transparent; border: 2px solid #ffffff; border-radius: 0; } .tp-caption.trio-button-01:hover, .trio-button-01:hover { color: #1f1f1f; text-decoration: none; background-color: white; border: 2px solid white; border-radius: 0; cursor: pointer; } .tp-caption.btn-3, .btn-3 { color: #ffffff; font-size: 14px; line-height: 14px; font-weight: 500; font-style: normal; text-decoration: none; background-color: #212121; border: 0 solid #000000; border-radius: 0; } .tp-caption.btn-3:hover, .btn-3:hover { color: white; text-decoration: none; background-color: #fdc657; border: 0 solid black; border-radius: 0; } .tp-caption.btn-2, .btn-2 { color: #ffffff; font-size: 14px; line-height: 14px; font-weight: 500; font-style: normal; text-decoration: none; background-color: #fdc657; border: 0 solid #000000; border-radius: 0; } /*============================= 69. Slider CSS Style ===============================*/ .slider-christmas .product-content { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin-top: -30px; } .slider-christmas .product-content-text { margin-top: -35px; } .slider-christmas .product-content h2, .slider-christmas .product-content h3, .slider-christmas .product-content h4 { line-height: 1.2; margin-bottom: 0; } .slider-christmas .product-content h4 { color: #FF0000; font-family: 'Dancing Script', cursive; font-style: italic; font-weight: 400; font-size: 60px; margin-bottom: 5px; } .slider-christmas .product-content h2 { font-size: 80px; } @media only screen and (max-width: 767.98px) { .slider-christmas .product-content h2 { font-size: 50px; margin-top: 10px; margin-bottom: 5px; } } .slider-christmas .product-content h3 { font-size: 42px; } @media only screen and (max-width: 767.98px) { .slider-christmas .product-content h3 { font-size: 32px; } } .slider-christmas .product-content .btn-shop { margin-top: 10px; } /*======================== 70. Timeline Style Css ===========================*/ .cd-timeline { margin: 0; padding: 0; } .cd-timeline:before { display: none; } .cd-timeline-block { margin: 0; padding-bottom: 40px; } .cd-timeline-block:last-child { padding-bottom: 0; } @media only screen and (min-width: 1200px) { .cd-timeline-block:last-child:before { display: none; } } .cd-timeline-block:nth-child(2n) .cd-timeline-content { text-align: right; float: left; } @media only screen and (min-width: 768px) and (max-width: 991.98px), only screen and (max-width: 767.98px) { .cd-timeline-block:nth-child(2n) .cd-timeline-content { text-align: left; } } .cd-timeline-block:before { background-color: #f4f4f4; content: ''; position: absolute; left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); top: 0; height: 100%; width: 4px; } @media only screen and (min-width: 768px) and (max-width: 991.98px), only screen and (max-width: 767.98px) { .cd-timeline-block:before { left: 4px; -webkit-transform: none; -ms-transform: none; transform: none; } } .cd-timeline-block .cd-timeline-dot { background-color: #fdc657; border-radius: 50%; display: block; height: 12px; left: 50%; position: absolute; top: 0; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); width: 12px; } @media only screen and (min-width: 768px) and (max-width: 991.98px), only screen and (max-width: 767.98px) { .cd-timeline-block .cd-timeline-dot { left: 0; -webkit-transform: none; -ms-transform: none; transform: none; } } .cd-timeline-content { background-color: transparent; -webkit-box-shadow: none; box-shadow: none; padding: 0; text-align: left; font-size: 16px; color: #666666; float: right; } @media only screen and (max-width: 767.98px) { .cd-timeline-content { margin-left: 30px; } } .cd-timeline-content:before { display: none; } @media only screen and (min-width: 768px) and (max-width: 991.98px), only screen and (max-width: 767.98px) { .cd-timeline-content { text-align: left; } } .cd-timeline-content h5 { font-weight: 700; font-size: 14px; line-height: 1; letter-spacing: 1.75px; margin-bottom: 10px; } .cd-timeline-content p { margin: 0; } .cd-timeline--aligned { background-color: #f4f4f4; } .cd-timeline--aligned .cd-timeline-block { border-bottom: 1px dotted #fdc657; padding: 30px; } .cd-timeline--aligned .cd-timeline-block:before { background-color: #fdc657; left: 0; -webkit-transform: none; -ms-transform: none; transform: none; display: block; } .cd-timeline--aligned .cd-timeline-block:first-child .cd-timeline-dot { display: none; } .cd-timeline--aligned .cd-timeline-block:last-child { border-bottom: 0; } .cd-timeline--aligned .cd-timeline-block .cd-timeline-content { width: 100%; } .cd-timeline--aligned .cd-timeline-block .cd-timeline-content:nth-child(2n) { float: inherit; text-align: inherit; } .cd-timeline--aligned .cd-timeline-block .cd-timeline-dot { left: -6px; top: -8px; -webkit-transform: none; -ms-transform: none; transform: none; height: 15px; width: 15px; } /*========================================== 36. Start Video Background Content Area ===========================================*/ .video-bg-content-wrap { background-image: url("../img/extra/home_video_01.jpg"); color: #fff; font-size: 18px; font-weight: 600; height: 100vh; } .video-bg-content-wrap .video-bg-txt { margin-top: 100px; } .video-bg-content-wrap .video-bg-txt h2 { color: #fff; font-size: 90px; line-height: 1; letter-spacing: 30px; text-transform: uppercase; margin-bottom: 0; } @media only screen and (min-width: 992px) and (max-width: 1199.98px) { .video-bg-content-wrap .video-bg-txt h2 { font-size: 80px; } } @media only screen and (min-width: 768px) and (max-width: 991.98px) { .video-bg-content-wrap .video-bg-txt h2 { font-size: 70px; letter-spacing: 20px; } } @media only screen and (max-width: 767.98px) { .video-bg-content-wrap .video-bg-txt h2 { font-size: 30px; letter-spacing: 5px; } } .video-bg-content-wrap .video-bg-txt p { max-width: 60%; margin: 25px auto 43px; } @media only screen and (min-width: 768px) and (max-width: 991.98px), only screen and (max-width: 767.98px) { .video-bg-content-wrap .video-bg-txt p { max-width: 100%; } } .video-bg-content-wrap .YTPOverlay { background-color: #000; opacity: 0.7; } /*==================================== 37. Start Parallax Bg Content Wrapper =====================================*/ .single-parallax-wrap .parallax-image-wrap { height: 100vh; } @media only screen and (min-width: 768px) and (max-width: 991.98px), only screen and (max-width: 767.98px) { .single-parallax-wrap .parallax-image-wrap { height: 50vh; } } .single-parallax-wrap .parallax-content-wrap { background-color: #fff; padding: 100px 0; } @media only screen and (min-width: 768px) and (max-width: 991.98px) { .single-parallax-wrap .parallax-content-wrap { padding: 80px 0; } } @media only screen and (max-width: 767.98px) { .single-parallax-wrap .parallax-content-wrap { padding: 60px 0; } } .single-parallax-wrap .parallax-content-wrap h2 { font-size: 40px; margin-bottom: 0; margin-top: 14px; } .single-parallax-wrap .parallax-content-wrap h2 a { color: #222222; } .single-parallax-wrap .parallax-content-wrap h2 a:hover { color: #fdc657; } @media only screen and (max-width: 767.98px) { .single-parallax-wrap .parallax-content-wrap h2 { font-size: 24px; } } .single-parallax-wrap .parallax-content-wrap .btn i.fa { -webkit-transition: -webkit-transform 0.4s; transition: -webkit-transform 0.4s; -o-transition: transform 0.4s; transition: transform 0.4s; transition: transform 0.4s, -webkit-transform 0.4s; } .single-parallax-wrap .parallax-content-wrap .btn:hover i.fa { -webkit-transform: translateX(5px); -ms-transform: translateX(5px); transform: translateX(5px); } .breadcrumb-wrap li { position: relative; } .breadcrumb-wrap li:after { content: "/"; margin: 0 8px 0 10px; font-size: 12px; line-height: 1; } .breadcrumb-wrap li:last-child:after { display: none; } .breadcrumb-wrap li a { color: #888888; font-size: 18px; line-height: 1; } @media only screen and (max-width: 767.98px) { .breadcrumb-wrap li a { font-size: 15px; } } .breadcrumb-wrap li a:hover { color: #fdc657; } /*================================ 38. Start vCard Container Wrapper ==================================*/ .vCard-container-wrapper { color: #fff; padding: 250px 0 200px; position: relative; } @media only screen and (min-width: 992px) and (max-width: 1199.98px), only screen and (min-width: 1200px) and (max-width: 1599.98px) { .vCard-container-wrapper { padding: 250px 0 100px; } } .vCard-container-wrapper:before { background-color: rgba(0, 0, 0, 0.6); content: ""; position: absolute; left: 0; top: 0; height: 100%; width: 100%; } @media only screen and (min-width: 768px) and (max-width: 991.98px) { .vCard-container-wrapper { padding: 200px 0 80px; } } @media only screen and (max-width: 767.98px) { .vCard-container-wrapper { padding: 150px 0 60px; } } .vCard-content-item { margin-top: 100px; } @media only screen and (max-width: 767.98px) { .vCard-content-item { margin-top: 60px; } } .vCard-content-item:first-child { margin-top: 0; } .vCard-content-item h2 { color: #fff; font-size: 30px; line-height: 1; margin-bottom: 44px; margin-top: -4px; } @media only screen and (max-width: 767.98px) { .vCard-content-item h2 { font-size: 24px; margin-bottom: 30px; } } .vCard-profile-about-wrap h1 { color: #fff; font-size: 50px; font-weight: 600; line-height: 1; margin-bottom: 0; } @media only screen and (max-width: 767.98px) { .vCard-profile-about-wrap h1 { font-size: 30px; } } .vCard-profile-about-wrap h1 span { color: #fdc657; display: block; font-size: 80px; margin-top: 15px; } @media only screen and (max-width: 767.98px) { .vCard-profile-about-wrap h1 span { font-size: 40px; } } .vCard-profile-about-wrap h2 { color: #fff; font-size: 18px; font-weight: 400; margin: 31px 0 35px; } @media only screen and (max-width: 767.98px) { .vCard-profile-about-wrap h2 { margin: 15px 0 25px; } } .vCard-profile-about-wrap .author-sign img { max-width: 200px; } .work-experience-item { margin-bottom: 42px; } @media only screen and (max-width: 767.98px) { .work-experience-item { margin-bottom: 35px; } } .work-experience-item:last-child { margin-bottom: 0; } .work-experience-item h3 { color: #fdc657; font-weight: 600; font-size: 16px; line-height: 1; text-transform: uppercase; margin-bottom: 17px; } .vCard-skills-area .single-skill-bar { margin-top: 0; margin-bottom: 40px; } .vCard-skills-area .single-skill-bar:last-child { margin-bottom: 0; } .vCard-skills-area .single-skill-bar .skill-title, .vCard-skills-area .single-skill-bar .skill-percent { color: #fdc657; font-weight: 600; } .vCard-skills-area .single-skill-bar .progress { background-color: #222222; } .vCard-skills-area .single-skill-bar .progress .progress-bar { background-color: #fff; } .vCard-contact-area span { display: block; margin-bottom: 15px; } .vCard-contact-area span:last-child { margin-bottom: 0; } .vCard-contact-area span a { color: #fff; } .vCard-social-links { margin-top: 50px; } @media only screen and (max-width: 767.98px) { .vCard-social-links { margin-top: 30px; } } .vCard-social-links a { color: #fff; margin-right: 20px; } .vCard-social-links a:last-child { margin-right: 0; } /*=============================== 39. Start Event Hero Banner Area =================================*/ .event-hero-area-banner { padding: 183px 0 120px; } @media only screen and (min-width: 768px) and (max-width: 991.98px) { .event-hero-area-banner { padding: 143px 0 80px; } } @media only screen and (max-width: 767.98px) { .event-hero-area-banner { padding: 156px 0 100px; } } @media screen and (min-width: 1600px) { .event-hero-area-banner { height: 100vh; } } .hero-content-wrap { color: #fff; font-size: 18px; } @media only screen and (min-width: 768px) and (max-width: 991.98px), only screen and (max-width: 767.98px) { .hero-content-wrap { font-size: 15px; } } .hero-content-wrap h2 { color: #fff; font-size: 65px; margin-bottom: 30px; } @media only screen and (min-width: 992px) and (max-width: 1199.98px) { .hero-content-wrap h2 { font-size: 50px; } } @media only screen and (min-width: 768px) and (max-width: 991.98px) { .hero-content-wrap h2 { font-size: 40px; } } @media only screen and (max-width: 767.98px) { .hero-content-wrap h2 { font-size: 30px; margin-bottom: 20px; } } .hero-content-wrap h2 span { color: #fdc657; } .hero-content-wrap .btn-bordered, .hero-content-wrap .btn-black, .hero-content-wrap .single-banner-wrap:nth-child(2n) .btn-bordered:hover, .single-banner-wrap:nth-child(2n) .hero-content-wrap .btn-bordered:hover { border-color: #fff; color: #fff; margin-top: 28px; } @media only screen and (max-width: 767.98px) { .hero-content-wrap .btn-bordered, .hero-content-wrap .btn-black, .hero-content-wrap .single-banner-wrap:nth-child(2n) .btn-bordered:hover, .single-banner-wrap:nth-child(2n) .hero-content-wrap .btn-bordered:hover { margin-top: 10px; } } .hero-content-wrap .btn-bordered:hover, .hero-content-wrap .btn-black:hover, .hero-content-wrap .single-banner-wrap:nth-child(2n) .btn-bordered:hover, .single-banner-wrap:nth-child(2n) .hero-content-wrap .btn-bordered:hover { background-color: #fdc657; border-color: #fdc657; } .event-registration-wrapper { background-color: #fff; padding: 80px 60px; } @media only screen and (min-width: 768px) and (max-width: 991.98px), only screen and (max-width: 767.98px) { .event-registration-wrapper { padding: 30px 15px; } } .event-registration-wrapper h3 { font-size: 26px; line-height: 1; text-align: center; margin-bottom: 37px; } .event-registration-wrapper .registration-form .single-input-item { margin-bottom: 30px; } .event-registration-wrapper .registration-form .single-input-item:last-child { margin-bottom: 0; } .event-reg-ticket-wrap .section-title-wrap i.fa { color: #fdc657; } .single-input-item input { border: 2px solid #e7e7e7; color: #666666; display: block; outline: none; padding: 20px; width: 100%; } .single-input-item .nice-select { border: 2px solid #e7e7e7; line-height: 23px; padding: 20px; } .single-input-item .nice-select .current { font-weight: 400; font-size: 15px; } /*========================== Start Event About Area ===========================*/ .event-about-accordion .card { border-radius: 0; margin-bottom: 15px; } .event-about-accordion .card:last-child { margin-bottom: 0; } .event-about-accordion .card .card-header { background-color: transparent; padding: 0; line-height: 1; } .event-about-accordion .card .card-header h3 { cursor: pointer; font-size: 15px; padding: 20px 20px 16px; margin-bottom: 0; text-transform: uppercase; } .event-about-accordion .card .card-header h3 span.icons { float: right; } .event-about-accordion .card .card-header h3 span.icons i.fa-minus { display: none; } .event-about-accordion .card .card-header h3[aria-expanded="true"] { color: #fdc657; } .event-about-accordion .card .card-header h3[aria-expanded="true"] span.icons i.fa.fa-plus { display: none; } .event-about-accordion .card .card-header h3[aria-expanded="true"] span.icons i.fa.fa-minus { display: block; } .event-about-accordion .card .card-body p { margin-bottom: 0; } /*=========================== Start Event Banner Wrapper =============================*/ .single-banner-wrap { text-align: center; position: relative; padding: 230px 200px; max-width: 50%; width: 100%; z-index: 1; } @media only screen and (min-width: 1200px) and (max-width: 1599.98px) { .single-banner-wrap { padding-left: 15px; padding-right: 15px; } } @media only screen and (min-width: 992px) and (max-width: 1199.98px) { .single-banner-wrap { padding: 180px 15px; } } @media only screen and (min-width: 768px) and (max-width: 991.98px) { .single-banner-wrap { padding: 80px 15px; } } @media only screen and (max-width: 767.98px) { .single-banner-wrap { padding: 60px 15px; max-width: 100%; } } .single-banner-wrap:before { background-color: rgba(253, 198, 87, 0.9); content: ""; position: absolute; left: 0; top: 0; height: 100%; width: 100%; z-index: -1; } .single-banner-wrap h2 { font-size: 60px; margin-top: -15px; margin-bottom: 35px; } @media only screen and (min-width: 768px) and (max-width: 991.98px) { .single-banner-wrap h2 { font-size: 45px; margin-top: -11px; } } @media only screen and (max-width: 767.98px) { .single-banner-wrap h2 { font-size: 30px; margin-top: -8px; margin-bottom: 22px; } } .single-banner-wrap h2 span { color: #fdc657; } .single-banner-wrap .btn-bordered:hover, .single-banner-wrap .btn-black:hover, .single-banner-wrap:nth-child(2n) .btn-bordered:hover { border-color: #fff; color: #fff; } .single-banner-wrap:nth-child(2n):before { background-color: rgba(0, 0, 0, 0.7); content: ""; position: absolute; left: 0; top: 0; height: 100%; width: 100%; } .single-banner-wrap:nth-child(2n) h2 { color: #fff; } .single-banner-wrap:nth-child(2n) .btn-bordered, .single-banner-wrap:nth-child(2n) .btn-black, .single-banner-wrap:nth-child(2n) .btn-bordered:hover { border-color: #fff; color: #fff; } .single-banner-wrap:nth-child(2n) .btn-black:hover, .single-banner-wrap:nth-child(2n) .btn-bordered:hover { color: #fdc657; } /*============================= Start Event Speaker Wrapper ==============================*/ .speaker-member-wrap { margin-top: 50px; } @media only screen and (max-width: 767.98px) { .speaker-member-wrap { margin-top: 30px; } } .speaker-member-wrap .speaker-thumbnail { overflow: hidden; } .speaker-member-wrap .speaker-thumbnail img { -webkit-transition: 0.5s; -o-transition: 0.5s; transition: 0.5s; width: 100%; } .speaker-member-wrap .speaker-info { margin-top: 30px; } .speaker-member-wrap .speaker-info h3 { font-size: 16px; line-height: 1; font-weight: 600; text-transform: uppercase; margin-bottom: 10px; } .speaker-member-wrap .speaker-info h6, .speaker-member-wrap .speaker-info .designation { color: #fdc657; font-weight: 500; font-size: 15px; line-height: 1; margin-bottom: 0; } .speaker-member-wrap:hover .speaker-thumbnail img { -webkit-transform: scale(1.1); -ms-transform: scale(1.1); transform: scale(1.1); } /*=============================== Start Event Call to Action Area =================================*/ .event-call-to-action-area { padding: 170px 0 160px; } @media only screen and (max-width: 767.98px) { .event-call-to-action-area { padding: 60px 0 54px; } } .event-call-to-action-content .btn-video-popup { border-width: 2px; position: static; margin: auto; -webkit-transform: none; -ms-transform: none; transform: none; line-height: 96px; height: 100px; width: 100px; } .event-call-to-action-content .btn-video-popup:hover { border-color: #fdc657; } .event-call-to-action-content h2 { color: #fff; font-size: 50px; margin-bottom: 0; margin-top: 40px; } @media only screen and (max-width: 767.98px) { .event-call-to-action-content h2 { font-size: 30px; margin-top: 20px; } } .event-call-to-action-content h2 span { color: #fdc657; display: block; } /*=============================== Start Event Schedule Wrapper =================================*/ .event-schedule-day-menu ul { border: 1px solid #e7e7e7; border-left: 0; } .event-schedule-day-menu ul li { border-right: 1px solid #e7e7e7; } .event-schedule-day-menu ul li:first-child { border-left: 1px solid #e7e7e7; } .event-schedule-day-menu ul li a { color: #bbbbbb; display: block; font-size: 18px; font-weight: 600; line-height: 1; text-transform: uppercase; padding: 20px 80px; } @media only screen and (min-width: 768px) and (max-width: 991.98px) { .event-schedule-day-menu ul li a { font-size: 15px; padding: 15px 20px; } } @media only screen and (max-width: 767.98px) { .event-schedule-day-menu ul li a { font-size: 12px; padding: 10px; } } .event-schedule-day-menu ul li a.active { background-color: #fdc657; color: #222222; } .event-schedule-item-content { background-color: #fff; border: 1px solid #e7e7e7; border-top: 0; padding: 60px 45px; } @media only screen and (max-width: 767.98px) { .event-schedule-item-content { padding: 30px 15px; } } .event-schedule-item-content .event-topic-time { color: #222222; line-height: 1; } @media only screen and (max-width: 767.98px) { .event-schedule-item-content .event-topic-time { margin-bottom: 15px; } } .event-schedule-item-content .event-topic-time i { color: #fdc657; margin-right: 10px; } .event-schedule-item-content .event-topic-time p { margin-bottom: 0; } .event-schedule-item-content .event-topic-details { color: #999999; } .event-schedule-item-content .event-topic-details h3 { font-size: 18px; font-weight: 600; text-transform: uppercase; margin-bottom: 20px; } @media only screen and (max-width: 767.98px) { .event-schedule-item-content .event-topic-details h3 { font-size: 15px; margin-bottom: 10px; } } .event-schedule-item-content .topic-speaker-member { margin-right: 10px; margin-top: 10px; } .event-schedule-item-content .topic-speaker-member:last-child { margin-right: 0; } .event-schedule-item-content .topic-speaker-member img { max-width: 80px; } /*====================================== Start Event Registration Ticket Area ========================================*/ .registration-ticket-price-item { background-color: #fff; padding: 80px 40px; position: relative; margin-top: 30px; text-align: center; } .registration-ticket-price-item .ticket-price { color: #222222; display: inline-block; font-size: 70px; font-weight: 700; line-height: 1; position: relative; margin-top: -7px; } .registration-ticket-price-item .ticket-price sup { font-size: 20px; left: 100%; top: 15px; position: absolute; } .registration-ticket-price-item .ticket-plane-name { border-top: 1px solid #e7e7e7; font-size: 18px; line-height: 1; text-transform: uppercase; margin-top: 20px; padding-top: 30px; margin-bottom: 40px; } .registration-ticket-price-item .btn-bordered, .registration-ticket-price-item .btn-black, .registration-ticket-price-item .single-banner-wrap:nth-child(2n) .btn-bordered:hover, .single-banner-wrap:nth-child(2n) .registration-ticket-price-item .btn-bordered:hover { border-color: #e7e7e7; color: #cecece; margin-top: 40px; } .registration-ticket-price-item:hover .btn-bordered, .registration-ticket-price-item:hover .btn-black, .registration-ticket-price-item:hover .single-banner-wrap:nth-child(2n) .btn-bordered:hover, .single-banner-wrap:nth-child(2n) .registration-ticket-price-item:hover .btn-bordered:hover { border-color: #222222; color: #222222; } .registration-ticket-price-item:hover .btn-bordered:hover, .registration-ticket-price-item:hover .btn-black:hover { border-color: #fdc657; color: #fdc657; } .registration-ticket-price-item.featured:before { border: 40px solid #fdc657; border-bottom-color: transparent; border-left-color: transparent; content: ''; position: absolute; top: 0; right: 0; } .registration-ticket-price-item.featured .ticket-feature-icon { color: #fff; position: absolute; line-height: 1; top: 20px; right: 14px; } /*============================== 40. Start Freelancer Hero Area ================================*/ .freelancer-hero-area-wrapper { height: 100vh; position: relative; } .freelancer-hero-area-wrapper:before { background-color: rgba(34, 34, 34, 0.4); content: ""; position: absolute; left: 0; top: 0; height: 100%; width: 100%; } .single-freelancer-name h2 { color: #fff; font-size: 70px; line-height: 1; } @media only screen and (max-width: 767.98px) { .single-freelancer-name h2 { font-size: 30px; } } .single-freelancer-name .freelance-title { color: #fdc657; font-size: 22px; font-weight: 600; font-family: "Playfair Display", serif; line-height: 1; } @media only screen and (max-width: 767.98px) { .single-freelancer-name .freelance-title { font-size: 16px; } } .name-divider { color: #fff; font-size: 88px; font-weight: 700; font-family: "Playfair Display", serif; line-height: 1; margin: -10px 15px 0; } @media only screen and (max-width: 767.98px) { .name-divider { font-size: 20px; margin: 10px 0; } } .freelancer-hero-content { color: #fff; font-weight: 500; } .freelancer-hero-content .hero-desc { max-width: 50%; margin: 40px auto auto; } @media only screen and (min-width: 768px) and (max-width: 991.98px) { .freelancer-hero-content .hero-desc { max-width: 80%; } } @media only screen and (max-width: 767.98px) { .freelancer-hero-content .hero-desc { max-width: 100%; margin: 15px auto auto; } } .mouse-wheel { border: 1px solid #fff; border-radius: 50px; display: block; height: 60px; width: 30px; position: absolute; bottom: 50px; left: 50%; margin-left: -15px; } @media only screen and (max-width: 767.98px) { .mouse-wheel { height: 40px; width: 20px; bottom: 15px; } } .mouse-wheel:before { background-color: #fff; border-radius: 50px; content: ''; position: absolute; left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); top: 5px; display: block; height: 10px; width: 4px; -webkit-animation: drop 1.5s infinite; animation: drop 1.5s infinite; } @-webkit-keyframes drop { 0% { top: 5px; opacity: 0; } 33.33% { top: 15px; opacity: 1; } 100% { top: 30px; opacity: 0; } } @keyframes drop { 0% { top: 5px; opacity: 0; } 33.33% { top: 15px; opacity: 1; } 100% { top: 30px; opacity: 0; } } /*================================== Start Freelancer Skills Area =====================================*/ .freelancer-skills-area { padding: 120px 0; } @media only screen and (min-width: 768px) and (max-width: 991.98px) { .freelancer-skills-area { padding: 80px 0; } } @media only screen and (max-width: 767.98px) { .freelancer-skills-area { padding: 60px 0; } } .freelancer-info h2 { font-size: 40px; line-height: 1; margin-bottom: 14px; text-transform: capitalize; } @media only screen and (max-width: 767.98px) { .freelancer-info h2 { font-size: 30px; } } .freelancer-info h5 { font-size: 16px; line-height: 1; font-weight: 600; margin-bottom: 20px; } /* Freelancer Home Page Style (index-freelancer.html) */ .freelancer-hero-area { padding: 150px 0 0; position: relative; } @media only screen and (min-width: 768px) and (max-width: 991.98px) { .freelancer-hero-area { padding: 80px 0 0; } } @media only screen and (max-width: 767.98px) { .freelancer-hero-area { padding: 60px 0 0; } } .freelancer-hero-area .mouse-wheel { border-color: #fdc657; bottom: 75px; } .freelancer-hero-area .mouse-wheel:before { background-color: #fdc657; } @media only screen and (min-width: 768px) and (max-width: 991.98px) { .freelancer-hero-area .mouse-wheel { bottom: 30px; } } .freelance-hero-content { margin-top: 150px; } @media only screen and (min-width: 768px) and (max-width: 991.98px) { .freelance-hero-content { margin-top: 90px; } } @media only screen and (max-width: 767.98px) { .freelance-hero-content { margin-top: 60px; } } .freelance-hero-content h2 { font-size: 50px; font-weight: 600; } @media only screen and (min-width: 768px) and (max-width: 991.98px) { .freelance-hero-content h2 { font-size: 35px; } } @media only screen and (max-width: 767.98px) { .freelance-hero-content h2 { font-size: 25px; } } .freelance-hero-content h4 { color: #fcb525; font-weight: 500; font-size: 22px; } @media only screen and (min-width: 768px) and (max-width: 991.98px) { .freelance-hero-content h4 { font-size: 20px; } } .freelance-hero-content .btn { padding: 15px 60px; margin-top: 20px; } .freelance-about-content { line-height: 2; } .mtn-30 { margin-top: -30px; } /*========================================== 41. Start Tracking Order Page Wrapper ===========================================*/ .portfolio-metro-hero-area { position: relative; padding: 230px 0; } @media only screen and (max-width: 767.98px) { .portfolio-metro-hero-area { padding: 100px 0 150px; } } .portfolio-metro-hero-area:before { background-color: rgba(0, 0, 0, 0.6); content: ""; position: absolute; left: 0; top: 0; height: 100%; width: 100%; } .port-metro-content-wrap { margin-top: 96px; } .port-metro-content-wrap h3 { color: #fff; font-size: 50px; font-weight: 500; margin-top: -15px; } @media only screen and (max-width: 767.98px) { .port-metro-content-wrap h3 { font-size: 30px; } } /*=============================== 42. Start Restaurant About Area =================================*/ .restaurant-about-content h2 { font-size: 40px; line-height: 1; margin-top: -5px; margin-bottom: 19px; } @media only screen and (max-width: 767.98px) { .restaurant-about-content h2 { font-size: 30px; font-weight: 500; } } .restaurant-about-content .btn { margin-top: 20px; } @media only screen and (max-width: 767.98px) { .restaurant-about-content .btn { margin-top: 15px; } } .restaurant-about-gallery img { width: 100%; } /*=============================== Start Restaurant Chefs Area =================================*/ .restaurant-chef-area { position: relative; padding: 120px 0; } @media only screen and (min-width: 768px) and (max-width: 991.98px) { .restaurant-chef-area { padding: 80px 0; } } @media only screen and (max-width: 767.98px) { .restaurant-chef-area { padding: 60px 0; } } .restaurant-chef-area:before { background-color: rgba(0, 0, 0, 0.6); content: ""; position: absolute; left: 0; top: 0; height: 100%; width: 100%; } .our-chefs-content { color: #fff; } .our-chefs-content h2 { color: #fff; font-size: 40px; line-height: 1; margin-top: -5px; margin-bottom: 21px; } .our-chefs-content .chefs-thumbnail { margin-top: 30px; } .our-chefs-content .chef-footer { margin-top: 30px; } .our-chefs-content .chef-footer h4 { color: #fdc657; font-size: 14px; font-weight: 600; line-height: 1; text-transform: uppercase; } /*============================ Start Why Us Area Wrapper ==============================*/ .why-us-left-area-content h2 { font-size: 40px; line-height: 1; margin-top: -5px; margin-bottom: 28px; } @media only screen and (max-width: 767.98px) { .why-us-left-area-content h2 { font-size: 30px; margin-bottom: 15px; } } .restaurant-why-us-accordion .card { border: 0; border-radius: 0; margin-bottom: 15px; } .restaurant-why-us-accordion .card:last-child { margin-bottom: 0; } .restaurant-why-us-accordion .card .card-header { border: 0; background-color: #f4f4f4; padding: 0; cursor: pointer; } .restaurant-why-us-accordion .card .card-header h3 { font-size: 15px; line-height: 1; text-transform: uppercase; padding: 25px 15px; margin-bottom: 0; } .restaurant-why-us-accordion .card .card-header h3 span { font-size: 25px; margin-right: 5px; } .restaurant-why-us-accordion .card .card-body { padding: 15px; border: 1px solid #f4f4f4; border-top: 0; } .restaurant-why-us-accordion .card .card-body p:first-child { margin-bottom: 0; } /*=============================== 43. Start Business Feature Area ================================*/ .business-feature-area { background-color: #111111; color: #fff; padding: 120px 0 115px; position: relative; } @media only screen and (min-width: 768px) and (max-width: 991.98px) { .business-feature-area { padding: 80px 0 75px; } } @media only screen and (max-width: 767.98px) { .business-feature-area { padding: 60px 0 55px; } } .business-feature-area:before { background: url("../img/home-business/business-b.png") no-repeat 150px center; content: ''; display: block; position: absolute; left: 0; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); height: 100%; width: 100%; } @media only screen and (min-width: 992px) and (max-width: 1199.98px), only screen and (min-width: 1200px) and (max-width: 1599.98px) { .business-feature-area:before { background-size: 200px 200px; background-position: 50px center; } } @media only screen and (min-width: 768px) and (max-width: 991.98px), only screen and (max-width: 767.98px) { .business-feature-area:before { display: none; } } .single-desc-item-wrap .desc-number { margin-right: 15px; -ms-flex-preferred-size: 50px; flex-basis: 50px; } .single-desc-item-wrap .busi-fea-info { color: #CCCCCC; -ms-flex-preferred-size: calc(100% - 50px); flex-basis: calc(100% - 50px); } .single-desc-item-wrap .busi-fea-info h3 { margin-top: 0; color: #fff; } .single-desc-item-wrap .busi-fea-info .btn-view { color: #fff; display: inline-block; font-size: 14px; font-weight: 600; line-height: 1; text-transform: uppercase; margin-top: 23px; } .single-desc-item-wrap .busi-fea-info .btn-view:hover { color: #fdc657; } .single-desc-item-wrap.layout--2 .desc-number { border-color: #222222; color: #222222; } .single-desc-item-wrap.layout--2 .busi-fea-info { color: #666666; } .single-desc-item-wrap.layout--2 .busi-fea-info h3 { margin-top: 0; color: #222222; } .single-desc-item-wrap.layout--2 .busi-fea-info .btn-view { color: #222222; display: inline-block; font-size: 14px; font-weight: 600; line-height: 1; text-transform: uppercase; margin-top: 23px; } .single-desc-item-wrap.layout--2 .busi-fea-info .btn-view:hover { color: #fdc657; } /*============================= Start Business Progress Area ===============================*/ .business-progress-area { position: relative; padding: 120px 0; } @media only screen and (min-width: 768px) and (max-width: 991.98px) { .business-progress-area { padding: 80px 0; } } @media only screen and (max-width: 767.98px) { .business-progress-area { padding: 60px 0; } } .business-progress-bg { position: absolute; right: 0; top: 0; height: 100%; width: 50%; } @media only screen and (max-width: 767.98px) { .business-progress-bg { min-height: 300px; width: 100%; } } .full-width-bg { position: static; } /*========================= 44. Start Who About Area ==========================*/ .team-content-wrap .single-team-member-wrap { max-width: 100%; -ms-flex-preferred-size: 100%; flex-basis: 100%; margin: 30px 0 0; } /*============================= Start Service Area Wrapper ==============================*/ #landing-service-area-wrapper { background-color: #111111; } .single-service-wrap { margin-top: 53px; } @media only screen and (max-width: 767.98px) { .single-service-wrap { margin-top: 38px; } } .single-service-wrap .service-icon { color: #fdc657; font-size: 40px; line-height: 1; margin-right: 30px; width: 50px; -ms-flex-preferred-size: 50px; flex-basis: 50px; } .single-service-wrap .service-info { color: #888888; -ms-flex-preferred-size: calc(100% - 50px); flex-basis: calc(100% - 50px); } .single-service-wrap .service-info h3 { color: #fff; font-size: 16px; font-weight: 600; line-height: 1; text-transform: uppercase; margin-bottom: 22px; } .single-service-wrap .service-info .btn-view { color: #fff; display: inline-block; font-size: 13px; line-height: 1; font-weight: 500; text-transform: uppercase; margin-top: 18px; } .single-service-wrap .service-info .btn-view:hover { color: #fdc657; } /*============================== Start Portfolio Area Wrapper ================================*/ .portfolio-filter-menu { margin-bottom: 100px; } @media only screen and (min-width: 768px) and (max-width: 991.98px), only screen and (max-width: 767.98px) { .portfolio-filter-menu { margin-bottom: 30px; } } .portfolio-filter-menu ul li { border: 1px solid #e7e7e7; color: #222222; cursor: pointer; font-size: 14px; font-weight: 600; line-height: 1; padding: 20px 30px; margin-right: 10px; text-transform: uppercase; position: relative; } @media only screen and (min-width: 768px) and (max-width: 991.98px) { .portfolio-filter-menu ul li { padding: 15px 20px; font-size: 13px; } } @media only screen and (max-width: 767.98px) { .portfolio-filter-menu ul li { padding: 10px; font-size: 11px; } } @media only screen and (max-width: 575.98px) { .portfolio-filter-menu ul li { margin-bottom: 5px; } } .portfolio-filter-menu ul li:before { background-color: #fdc657; content: ''; position: absolute; left: 0; bottom: 0; opacity: 0; visibility: hidden; -webkit-transition: 0.4s; -o-transition: 0.4s; transition: 0.4s; height: 3px; width: 100%; } .portfolio-filter-menu ul li.active:before { opacity: 1; visibility: visible; } .portfolio-filter-menu ul li:last-child { margin-right: 0; } /*================================== 45. Start Fashion Call to action Area ====================================*/ .fashion-call-to-action-area img { width: 100%; } .fashion-call-action-left h2 { font-size: 40px; margin-top: -10px; } @media only screen and (max-width: 767.98px) { .fashion-call-action-left h2 { font-size: 30px; font-weight: 500; } } .fashion-call-action-left h2 span { color: #fdc657; } /*========================== Start Fashion Banner Area ===========================*/ .fashion-banner-wrapper { height: 570px; position: relative; } @media only screen and (min-width: 768px) and (max-width: 991.98px) { .fashion-banner-wrapper { height: 400px; } } @media only screen and (max-width: 767.98px) { .fashion-banner-wrapper { height: 300px; } } .fashion-banner-wrapper:before { background-color: rgba(34, 34, 34, 0.2); content: ""; position: absolute; left: 0; top: 0; height: 100%; width: 100%; } .fashion-banner-wrapper h2 { color: #fff; font-size: 50px; line-height: 1.6; } @media only screen and (max-width: 767.98px) { .fashion-banner-wrapper h2 { font-size: 30px; font-weight: 500; } } /*============================= 46. Start Main Content Wrapper ==============================*/ .title-area-wrap { color: #fff; font-weight: 500; font-size: 18px; line-height: 1.8; margin: 160px 0 190px; } @media only screen and (min-width: 768px) and (max-width: 991.98px) { .title-area-wrap { margin: 100px 0; } } @media only screen and (max-width: 767.98px) { .title-area-wrap { margin: 60px 0; } } .title-area-wrap h2 { color: #fff; font-size: 60px; line-height: 1.3; margin-bottom: 43px; } .single-blog-metro-post { margin-top: 30px; } .single-blog-metro-post .blog-post-details { background-color: #fff; padding: 35px; } @media only screen and (max-width: 767.98px) { .single-blog-metro-post .blog-post-details { padding: 20px 15px; } } .single-blog-metro-post .blog-post-details .post-date { font-weight: 600; font-size: 14px; } .single-blog-metro-post .blog-post-details .post-date i.fa { color: #fdc657; margin-right: 3px; } .single-blog-metro-post .blog-post-details h2, .single-blog-metro-post .blog-post-details .blog-title { font-size: 18px; line-height: 1.3; margin-bottom: 0; margin-top: 13px; } .single-blog-metro-post .blog-post-details h2 a, .single-blog-metro-post .blog-post-details .blog-title a { color: #222222; } .single-blog-metro-post .blog-post-details h2 a:hover, .single-blog-metro-post .blog-post-details .blog-title a:hover { color: #fdc657; } .single-blog-metro-post .blog-metro-post-thumb { overflow: hidden; } .single-blog-metro-post .blog-metro-post-thumb img { height: 100%; -webkit-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; } @media only screen and (max-width: 767.98px) { .single-blog-metro-post .blog-metro-post-thumb img { width: 100%; } } .single-blog-metro-post:hover .blog-metro-post-thumb img { -webkit-transform: scale(1.05); -ms-transform: scale(1.05); transform: scale(1.05); } @media screen and (min-width: 1400px) { .blog-post-filter-menu { position: absolute; left: 100%; top: 0; } } @media screen and (min-width: 1600px) { .blog-post-filter-menu { margin-left: 100px; } } @media screen and (max-width: 1399.98px) { .blog-post-filter-menu ul { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .blog-post-filter-menu ul li { margin-right: 30px; } } .blog-post-filter-menu ul li { color: #fff; cursor: pointer; font-weight: 600; font-size: 14px; line-height: 1; margin-bottom: 50px; text-transform: uppercase; -webkit-transition: 0.4s; -o-transition: 0.4s; transition: 0.4s; } @media only screen and (max-width: 767.98px) { .blog-post-filter-menu ul li { margin-right: 10px; margin-bottom: 30px; } } .blog-post-filter-menu ul li:hover, .blog-post-filter-menu ul li.active { color: #fdc657; } .blog-metro-footer { padding: 120px 0; } @media only screen and (min-width: 768px) and (max-width: 991.98px), only screen and (max-width: 767.98px) { .blog-metro-footer { padding: 60px 0; } } .blog-metro-footer p { color: #aaaaaa; margin-bottom: 0; font-size: 14px; } /*=========================== 47. Start Our Expertise Area ============================*/ .video-area-wrap { border-radius: 50%; position: relative; overflow: hidden; max-width: 350px; margin: auto; } /*============================= Start Startup Banner Area ==============================*/ .startup-banner-content { font-size: 16px; font-weight: 600; } @media only screen and (min-width: 768px) and (max-width: 991.98px), only screen and (max-width: 767.98px) { .startup-banner-content { font-size: 15px; font-weight: 400; } } .startup-banner-content h2 { font-size: 60px; line-height: 1.3; margin-top: -17px; margin-bottom: 55px; } @media only screen and (min-width: 992px) and (max-width: 1199.98px) { .startup-banner-content h2 { font-size: 40px; } } @media only screen and (min-width: 768px) and (max-width: 991.98px), only screen and (max-width: 767.98px) { .startup-banner-content h2 { font-size: 24px; margin-top: -9px; margin-bottom: 18px; } } .startup-banner-content .btn-bordered, .startup-banner-content .btn-black, .startup-banner-content .single-banner-wrap:nth-child(2n) .btn-bordered:hover, .single-banner-wrap:nth-child(2n) .startup-banner-content .btn-bordered:hover { color: #222222; padding: 20px 50px; border-width: 2px; margin-top: 38px; } @media only screen and (min-width: 768px) and (max-width: 991.98px), only screen and (max-width: 767.98px) { .startup-banner-content .btn-bordered, .startup-banner-content .btn-black, .startup-banner-content .single-banner-wrap:nth-child(2n) .btn-bordered:hover, .single-banner-wrap:nth-child(2n) .startup-banner-content .btn-bordered:hover { margin-top: 10px; padding: 15px 30px; } } .startup-banner-content .btn-bordered:hover, .startup-banner-content .btn-black:hover, .startup-banner-content .single-banner-wrap:nth-child(2n) .btn-bordered:hover, .single-banner-wrap:nth-child(2n) .startup-banner-content .btn-bordered:hover { background-color: #222222; border-color: #222222; color: #fff; } @media only screen and (max-width: 767.98px) { .startup-banner-image { max-width: 300px; margin: auto; } } /*============================ Start Pricing Table Area ==============================*/ .pricing-table-item-wrap { color: #fff; max-width: 25%; -ms-flex-preferred-size: 25%; flex-basis: 25%; width: 100%; padding: 120px 30px; } .pricing-table-item-wrap:nth-child(1n) { border-right: 0; border-bottom: 0; } @media only screen and (min-width: 768px) and (max-width: 991.98px), only screen and (max-width: 767.98px) { .pricing-table-item-wrap { border: 1px solid rgba(255, 255, 255, 0.1); max-width: 50%; -ms-flex-preferred-size: 50%; flex-basis: 50%; padding: 60px 30px; } } @media only screen and (max-width: 575.98px) { .pricing-table-item-wrap { max-width: 100%; -ms-flex-preferred-size: 100%; flex-basis: 100%; } } .pricing-table-item-wrap.featured { background-color: rgba(0, 0, 0, 0.18); } .pricing-table-item-wrap.featured .btn-bordered, .pricing-table-item-wrap.featured .btn-black, .pricing-table-item-wrap.featured .single-banner-wrap:nth-child(2n) .btn-bordered:hover, .single-banner-wrap:nth-child(2n) .pricing-table-item-wrap.featured .btn-bordered:hover { background-color: #fff; color: #222222; } .pricing-table-item-wrap.featured .btn-bordered:hover, .pricing-table-item-wrap.featured .btn-black:hover { color: #fff; } .pricing-table-item-wrap .price { color: #fdc657; font-size: 70px; display: inline-block; line-height: 1; margin-bottom: 0; margin-top: -7px; position: relative; } .pricing-table-item-wrap .price sup { font-size: 20px; line-height: 1; position: absolute; top: 10px; left: 100%; } .pricing-table-item-wrap .plan-title { color: #fff; font-size: 22px; font-weight: 600; line-height: 1; text-transform: uppercase; margin: 47px 0 40px; } @media only screen and (min-width: 768px) and (max-width: 991.98px), only screen and (max-width: 767.98px) { .pricing-table-item-wrap .plan-title { margin: 17px 0 20px; } } .pricing-table-item-wrap .btn { padding: 15px 30px; margin-top: 29px; } @media only screen and (max-width: 767.98px) { .pricing-table-item-wrap .btn { margin-top: 9px; } } .pricing-table-item-wrap .btn-bordered, .pricing-table-item-wrap .btn-black, .pricing-table-item-wrap .single-banner-wrap:nth-child(2n) .btn-bordered:hover, .single-banner-wrap:nth-child(2n) .pricing-table-item-wrap .btn-bordered:hover { border-color: #fff; color: #fff; } .pricing-table-item-wrap .btn-bordered:hover, .pricing-table-item-wrap .btn-black:hover, .pricing-table-item-wrap .single-banner-wrap:nth-child(2n) .btn-bordered:hover, .single-banner-wrap:nth-child(2n) .pricing-table-item-wrap .btn-bordered:hover { background-color: #222222; border-color: #222222; } /*=============================== Start Startup Call to Action ================================*/ .startup-call-to-action { background-color: #fdc657; padding: 80px 0; } @media only screen and (min-width: 768px) and (max-width: 991.98px) { .startup-call-to-action { padding: 60px 0; } } @media only screen and (max-width: 767.98px) { .startup-call-to-action { padding: 40px 0; } } .startup-call-to-action h2 { font-size: 40px; margin-bottom: 0; margin-top: 38px; } @media only screen and (max-width: 767.98px) { .startup-call-to-action h2 { font-size: 30px; margin-top: 20px; } } /*=========================== 48. Start Site Content Wrapper ============================*/ @media screen and (min-width: 1600px) { .site-content-wrapper.home-baber { padding-left: 265px; } } /*======================= Start About Us Area ======================*/ .about-thumb-area img, .about-bottom-content img { width: 100%; } .about-bottom-thumb { position: relative; } .about-bottom-thumb-txt { position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); min-width: 290px; } .about-bottom-thumb-txt h2 { color: #fff; font-size: 70px; line-height: 1.2; text-transform: uppercase; text-align: center; } @media only screen and (max-width: 767.98px) { .about-bottom-thumb-txt h2 { font-size: 50px; } } @media only screen and (max-width: 575.98px) { .about-bottom-thumb-txt h2 { font-size: 30px; } } .about-bottom-thumb-txt h2 span { color: #000; } /*================================ Start Baber Service Area Wrapper ==================================*/ .baber-service-title-area { padding: 120px 0 195px; position: relative; } @media only screen and (min-width: 768px) and (max-width: 991.98px) { .baber-service-title-area { padding: 80px 0 175px; } } @media only screen and (max-width: 767.98px) { .baber-service-title-area { padding: 60px 0 166px; } } .baber-service-title-area:before { background-color: rgba(0, 0, 0, 0.3); content: ""; position: absolute; left: 0; top: 0; height: 100%; width: 100%; } .baber-service-content-inner { background-color: #fff; border: 15px solid #fdc657; padding: 56px 70px 85px; margin-top: -120px; position: relative; z-index: 1; } @media only screen and (min-width: 768px) and (max-width: 991.98px) { .baber-service-content-inner { padding: 31px 30px 60px; } } @media only screen and (min-width: 768px) and (max-width: 991.98px), only screen and (max-width: 767.98px) { .baber-service-content-inner { padding: 16px 15px 40px; border-width: 5px; } } .service-list-wrap { text-align: center; } .service-list-wrap .btn { padding: 15px 30px; margin-top: 60px; } @media only screen and (min-width: 768px) and (max-width: 991.98px), only screen and (max-width: 767.98px) { .service-list-wrap .btn { margin-top: 30px; } } .service-list-wrap .btn-bordered:hover, .service-list-wrap .btn-black:hover, .service-list-wrap .single-banner-wrap:nth-child(2n) .btn-bordered:hover, .single-banner-wrap:nth-child(2n) .service-list-wrap .btn-bordered:hover { background-color: #fdc657; color: #222222; } .service-list { overflow: hidden; margin: 0 -15px; text-align: left; } .service-list-item { border-bottom: 1px solid #e7e7e7; float: left; width: calc(50% - 30px); padding: 25px 0; margin: 0 15px; font-size: 18px; font-weight: 600; line-height: 1.2; text-transform: uppercase; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } @media only screen and (max-width: 767.98px) { .service-list-item { width: calc(100% - 30px); } } @media only screen and (min-width: 768px) and (max-width: 991.98px), only screen and (max-width: 767.98px) { .service-list-item { font-size: 14px; } } .service-list-item-title { color: #222222; } .service-list-item-price { color: #fdc657; margin-left: 10px; } /*============================== Start Contact Area Wrapper ===============================*/ .con-info-method { margin-bottom: 52px; } @media only screen and (max-width: 767.98px) { .con-info-method { margin-bottom: 32px; } } .con-info-method:last-child { margin-bottom: 0; } .con-info-method h5 { font-size: 14px; line-height: 1; font-weight: 600; text-transform: uppercase; margin-bottom: 23px; } @media only screen and (max-width: 767.98px) { .con-info-method h5 { margin-bottom: 15px; } } .con-info-method p:first-child, .con-info-method address:first-child { margin-bottom: 0; } .form-input-item { margin-bottom: 20px; } .form-input-item:last-child { margin-bottom: 0; } .form-input-item input, .form-input-item textarea { background-color: #f4f4f4; border: none; display: block; outline: none; padding: 20px 15px; width: 100%; } .form-input-item.white-layout input, .form-input-item.white-layout textarea { background-color: #fff; } .form-input-item.bordered-black input, .form-input-item.bordered-black textarea { background-color: transparent; border: 2px solid #222222; } /*========================== 49. Start Marketing Hero Area ============================*/ .single-hero-banner-item { height: 100vh; } .marketing-hero-content { font-size: 18px; color: #fff; } .marketing-hero-content h2 { color: #fff; font-size: 80px; line-height: 1.2; margin-bottom: 74px; } @media only screen and (max-width: 767.98px) { .marketing-hero-content h2 { font-size: 28px; margin-bottom: 30px; } } .marketing-hero-content .btn { margin-top: 42px; } .marketing-hero-content .btn-brand { color: #222222; } .marketing-hero-content .btn-brand:hover { background-color: #fff; } /*========================== Start Marketing Service Area ============================*/ .single-service-item { margin-top: 40px; } .single-service-item .service-serial-no { color: #f4f4f4; font-weight: 700; font-size: 120px; line-height: 1; margin-bottom: 0; display: block; margin-top: -13px; } .single-service-item h3 { font-size: 24px; line-height: 1.2; margin-top: -40px; margin-bottom: 18px; } .single-service-item .btn-read-more { color: #666666; font-size: 14px; font-weight: 600; text-transform: uppercase; line-height: 1; display: inline-block; margin-top: 17px; } .single-service-item .btn-read-more:hover { color: #fdc657; } /*========================== Start Marketing About Area ============================*/ .marketing-about-thumb { position: relative; } .marketing-about-thumb:before { background-color: rgba(0, 0, 0, 0.6); content: ""; position: absolute; left: 0; top: 0; height: 100%; width: 100%; } .marketing-about-thumb img { width: 100%; } /*========================== 50. Start Help Banner Area ==========================*/ .help-banner-content { color: #fff; font-size: 20px; height: 700px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } @media only screen and (max-width: 767.98px) { .help-banner-content { font-size: 16px; } } @media only screen and (max-width: 767.98px) { .help-banner-content { height: 100vh; } } .help-banner-content h2 { color: #fff; font-size: 80px; line-height: 1; margin: 10px 0 33px; } @media only screen and (max-width: 767.98px) { .help-banner-content h2 { font-size: 35px; margin: 0 0 33px; } } .help-banner-content h2 span { color: #fdc657; } /*============================ Start Custom Search Page Area =============================*/ .single-custom-search-item { background-color: #fff; padding: 80px 30px; } @media screen and (min-width: 1600px) { .single-custom-search-item { padding: 115px 130px; } } @media only screen and (min-width: 768px) and (max-width: 991.98px), only screen and (max-width: 767.98px) { .single-custom-search-item { border: 1px solid rgba(0, 0, 0, 0.03); } } @media only screen and (max-width: 767.98px) { .single-custom-search-item { padding: 50px 15px; } } .single-custom-search-item i { color: #fdc657; font-size: 60px; line-height: 1; } .single-custom-search-item h2 { font-size: 20px; font-weight: 600; line-height: 1; text-transform: uppercase; margin: 30px 0 22px; } .single-custom-search-item .btn-know-more { color: #222222; display: inline-block; font-weight: 600; font-size: 14px; line-height: 1; text-transform: uppercase; margin-top: 26px; } .single-custom-search-item .btn-know-more:hover { color: #fdc657; } @media only screen and (min-width: 992px) and (max-width: 1199.98px), only screen and (min-width: 1200px) { [class*='col-']:nth-child(odd) .single-custom-search-item { background-color: #f4f4f4; } } .extra-more-custom-search { background: url("../img/home-help/mark.jpg") no-repeat center center; background-size: cover; height: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; padding: 50px; } .extra-more-custom-search h2 { font-size: 40px; font-weight: 500; line-height: 1.3; text-transform: uppercase; } @media only screen and (min-width: 1200px) and (max-width: 1599.98px) { .extra-more-custom-search h2 { font-size: 32px; } } @media only screen and (min-width: 992px) and (max-width: 1199.98px) { .extra-more-custom-search h2 { font-size: 26px; } } @media only screen and (max-width: 767.98px) { .extra-more-custom-search h2 { font-size: 22px; } } .extra-more-custom-search .btn-offWhite { margin: 11px auto 0; } .extra-more-custom-search .btn-offWhite:hover { background-color: #222222; } /*================================= 51. Start Recent Singers Area Wrapper ==================================*/ .recent-singer { text-align: center; } .recent-singer-pic { border-radius: 50%; overflow: hidden; max-width: 250px; max-height: 250px; margin: 0 auto 46px; } @media only screen and (max-width: 767.98px) { .recent-singer-pic { margin: 0 auto 26px; max-width: 200px; max-height: 200px; } } .recent-singer-info h2 { font-size: 20px; font-weight: 600; line-height: 1.2; text-transform: uppercase; margin-bottom: 20px; } .recent-singer-info .btn-enjoy { color: #666666; display: inline-block; font-size: 14px; font-weight: 600; line-height: 1; text-transform: uppercase; margin-top: 32px; } @media only screen and (max-width: 767.98px) { .recent-singer-info .btn-enjoy { margin-top: 28px; } } .recent-singer-info .btn-enjoy i { color: #222222; margin-right: 5px; -webkit-transition: 0.4s; -o-transition: 0.4s; transition: 0.4s; font-weight: 300; font-size: 12px; } .recent-singer-info .btn-enjoy:hover { color: #fdc657; } .recent-singer-info .btn-enjoy:hover i { color: #fdc657; } /*================================= Start Spring Day Album Area ==================================*/ .song-table { color: #fff; white-space: nowrap; } .song-table a { color: #fff; } .song-table a:hover { color: #fdc657; } .song-table tr th, .song-table tr td { border-bottom: 1px solid rgba(255, 255, 255, 0.2); padding: 23px .7rem; vertical-align: middle; text-align: right; } .song-table tr th { padding-left: 0; text-align: left; } .song-table tr td:last-child { padding-right: 0; } .song-name { font-size: 18px; font-weight: 600; line-height: 1.3; } @media only screen and (max-width: 767.98px) { .song-name { font-size: 15px; } } /*================================= Start Upcoming Event Area ==================================*/ .event-item { border-bottom: 1px solid #e7e7e7; padding: 60px 0; } @media only screen and (min-width: 768px) and (max-width: 991.98px), only screen and (max-width: 767.98px) { .event-item { border: none; -webkit-box-shadow: 0 1px 10px rgba(0, 0, 0, 0.1); box-shadow: 0 1px 10px rgba(0, 0, 0, 0.1); text-align: center; padding-left: 15px; padding-right: 15px; } } .event-date { max-width: 20%; width: 100%; } @media only screen and (min-width: 768px) and (max-width: 991.98px), only screen and (max-width: 767.98px) { .event-date { margin-bottom: 25px; max-width: 100%; text-align: center; } } .event-date h3 { color: #212121; font-weight: 500; font-size: 16px; line-height: 1; margin-bottom: 0; } .event-date-day { color: #fdc657; display: block; font-size: 65px; font-weight: 700; margin-bottom: 5px; } .event-body { color: #999999; max-width: 60%; width: 100%; } @media only screen and (min-width: 768px) and (max-width: 991.98px), only screen and (max-width: 767.98px) { .event-body { max-width: 100%; } } .event-body a { color: #999999; } .event-body h2 { font-size: 18px; font-weight: 600; text-transform: uppercase; } .event-pricing { margin-left: 60px; } @media only screen and (min-width: 768px) and (max-width: 991.98px), only screen and (max-width: 767.98px) { .event-pricing { margin-left: 0; margin-top: 15px; } } .event-location i.fa { color: #fdc657; margin-right: 5px; } .event-action { max-width: 20%; width: 100%; } @media only screen and (min-width: 768px) and (max-width: 991.98px), only screen and (max-width: 767.98px) { .event-action { margin-top: 25px; max-width: 100%; } } .event-action .btn { padding: 20px 60px; display: block; } @media only screen and (min-width: 768px) and (max-width: 991.98px), only screen and (max-width: 767.98px) { .event-action .btn { padding: 15px 30px; display: inline-block; } } .event-action .btn.disabled { background-color: #ddd; border-color: #ddd; color: #999999; cursor: not-allowed; opacity: 1; pointer-events: visible; } @media only screen and (min-width: 768px) and (max-width: 991.98px) { .upcoming-event-wrapper [class*="col"]:nth-child(1n +3) .event-item { margin-top: 30px; } } @media only screen and (max-width: 767.98px) { .upcoming-event-wrapper [class*="col"]:nth-child(1n + 2) .event-item { margin-top: 30px; } } @media only screen and (min-width: 992px) and (max-width: 1199.98px), only screen and (min-width: 1200px) { .upcoming-event-wrapper [class*="col"]:first-child .event-item { padding-top: 0; } } @media only screen and (min-width: 992px) and (max-width: 1199.98px), only screen and (min-width: 1200px) { .upcoming-event-wrapper [class*="col"]:last-child .event-item { padding-bottom: 0; border-bottom: 0; } } .event-load-more-btn .btn-load-more { color: #222222; font-size: 14px; font-weight: 600; line-height: 1; text-transform: uppercase; } .event-load-more-btn .btn-load-more i { font-size: 12px; font-weight: 400; margin-right: 3px; } .event-load-more-btn .btn-load-more:hover { color: #fdc657; } /*================================= Start Latest Video Gallery Area ===================================*/ .video-content-wrapper { overflow: hidden; position: relative; } .video-content-wrapper:after { background-color: rgba(0, 0, 0, 0.4); content: ""; position: absolute; left: 0; top: 0; height: 100%; width: 100%; } .video-content-wrapper img { -webkit-transition: 0.5s; -o-transition: 0.5s; transition: 0.5s; -webkit-transform: scale(1.05); -ms-transform: scale(1.05); transform: scale(1.05); width: 100%; } .video-content-wrapper:hover img { -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); } /*================================= Start Social Button Action Area ===================================*/ .single-social-button { background-color: #f4f4f4; font-size: 30px; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; line-height: 100px; text-align: center; -webkit-transition: 0.4s; -o-transition: 0.4s; transition: 0.4s; } .single-social-button:nth-child(2n) { background-color: #e0e0e0; } .single-social-button:hover { background-color: #fdc657; } .single-social-button:hover a { color: #fff; } .single-social-button a { color: #999999; display: block; } @media only screen and (max-width: 767.98px) { .single-social-button { font-size: 20px; line-height: 50px; } } /*================================ 52. Start About Us Container Wrapper ==================================*/ .about-us-content { color: #222222; font-size: 16px; line-height: 2; font-weight: 600; padding: 30px; } @media only screen and (min-width: 768px) and (max-width: 991.98px), only screen and (max-width: 767.98px) { .about-us-content { font-size: 14px; padding: 100px 15px; } } .about-us-content h2 { font-size: 70px; line-height: 1; text-transform: uppercase; font-weight: 600; margin-bottom: 62px; } @media only screen and (min-width: 1200px) and (max-width: 1599.98px), only screen and (min-width: 992px) and (max-width: 1199.98px) { .about-us-content h2 { font-size: 50px; } } @media only screen and (min-width: 768px) and (max-width: 991.98px), only screen and (max-width: 767.98px) { .about-us-content h2 { font-size: 30px; margin-bottom: 19px; } } .about-us-content.white { color: #fff; } .about-us-content.white h2 { color: #fff; } .about-thumbnail-area { height: 100%; } @media only screen and (max-width: 767.98px) { .about-thumbnail-area { max-height: 350px; overflow: hidden; } } @media only screen and (min-width: 768px) and (max-width: 991.98px) { .about-thumbnail-area img { height: 100%; } } .paragraph-width { max-width: 65%; margin: auto; } @media only screen and (min-width: 768px) and (max-width: 991.98px), only screen and (max-width: 767.98px) { .paragraph-width { min-width: 100%; } } .video-popup-area { margin-top: -300px; } @media only screen and (min-width: 992px) and (max-width: 1199.98px) { .video-popup-area { margin-top: -200px; } } @media only screen and (min-width: 768px) and (max-width: 991.98px) { .video-popup-area { margin-top: 58px; } } @media only screen and (max-width: 767.98px) { .video-popup-area { margin-top: 50px; } } .video-popup-area .btn-video-popup { background-color: #fdc657; border-color: #fdc657; line-height: 115px; height: 120px; width: 120px; } @media only screen and (max-width: 767.98px) { .video-popup-area .btn-video-popup { line-height: 80px; height: 90px; width: 90px; } } .video-popup-area .btn-video-popup:hover, .video-popup-area .btn-video-popup:focus { background-color: #222222; border-color: #222222; color: #fff; } .a-m-3 h2 { font-weight: 600; } .a-m-3 .bold-paragraph { font-weight: 600; font-size: 20px; color: #222222; } /*=============================== Start About Hero Area Wrapper =================================*/ .fixed-height { height: 550px; } @media only screen and (max-width: 767.98px) { .fixed-height { height: 350px; } } /*======================================== Start Testimonial Area Wrapper About Page ==========================================*/ .about-page-testimonial .single-testimonial-wrap.layout--4 { background-color: #f4f4f4; color: #222222; text-align: left; padding: 40px 30px; } .about-page-testimonial .single-testimonial-wrap.layout--4 .author-thumb img { border: 0; margin: 0 0 23px; } .about-page-testimonial .single-testimonial-wrap.layout--4 h3.client-name { color: #000; margin-top: 32px; } .about-page-testimonial .single-testimonial-wrap.layout--4.slick-slide.slick-current { background-color: #f4f4f4; } /*========================= Start Team Area Wrapper ==========================*/ .about-team-content-wrap .speaker-member-wrap { text-align: left; } .about-team-content-wrap .speaker-member-wrap .designation { color: #666666; font-weight: 400; } .about-team-content-wrap .speaker-member-wrap img { width: 100%; } /*========================= Start Banner Area Wrapper ==========================*/ .about-banner-area { position: relative; } @media only screen and (min-width: 768px) and (max-width: 991.98px), only screen and (max-width: 767.98px) { .about-banner-area { height: 300px; } } .about-banner-area:before { background-color: rgba(0, 0, 0, 0.2); content: ""; position: absolute; left: 0; top: 0; height: 100%; width: 100%; } .bolder-heading { color: #fff; font-size: 90px; text-transform: uppercase; } @media only screen and (min-width: 768px) and (max-width: 991.98px) { .bolder-heading { font-size: 60px; } } @media only screen and (max-width: 767.98px) { .bolder-heading { font-size: 40px; } } .about-social-icons a { background-color: rgba(0, 0, 0, 0.1); border-radius: 500px; color: #222222; display: inline-block; font-size: 16px; line-height: 45px; height: 45px; width: 45px; margin-right: 10px; text-align: center; } .about-social-icons a:last-child { margin-right: 0; } .about-social-icons a:hover { background-color: #222222; color: #fff; } @media only screen and (min-width: 992px) and (max-width: 1199.98px), only screen and (max-width: 767.98px) { .about-social-icons a { font-size: 14px; line-height: 35px; height: 35px; width: 35px; } } /*======================================= Start About Description Content Area ========================================*/ .about-desc-item { margin-top: 30px; } .about-desc-item h3 { color: #fdc657; margin-bottom: 8px; margin-top: -9px; } .about-desc-item h5 { font-size: 16px; line-height: 1.2; text-transform: uppercase; margin-bottom: 25px; } /*================================ Start About Skill Area Wrapper ==================================*/ .about-skills-wrapper img { width: 100%; } @media only screen and (min-width: 768px) and (max-width: 991.98px) { .about-skills-wrapper .single-skill-bar { margin-top: 30px; } } .skills-wrapper-about { position: relative; } .skills-wrapper-about:before { background: url(../img/about/about-man.png) center center; background-size: cover; content: ''; position: absolute; right: 0; top: 0; height: 100%; width: 50%; } @media only screen and (min-width: 768px) and (max-width: 991.98px), only screen and (max-width: 767.98px) { .skills-wrapper-about:before { display: none; } } /*================================ Start About Call to Action ==================================*/ .call-to-action-left h3 { color: #fff; font-size: 24px; margin-bottom: 0; } /*============================ Start Funfact Countdown Area ==============================*/ .funfact-item-wrap { background-color: #fff; padding: 80px 15px; margin-top: 30px; } @media only screen and (min-width: 768px) and (max-width: 991.98px) { .funfact-item-wrap { padding: 50px 15px; } } .funfact-number { color: #222222; font-size: 80px; font-weight: 600; line-height: 1; margin-bottom: 20px; } @media only screen and (min-width: 768px) and (max-width: 991.98px) { .funfact-number { font-size: 50px; } } .funfact-title { font-size: 16px; font-weight: 600; line-height: 1; text-transform: uppercase; margin-bottom: 26px; } .funfact-icon { background-color: #fdc657; border-radius: 50%; color: #fff; display: block; font-size: 20px; text-align: center; line-height: 60px; margin: auto; height: 60px; width: 60px; } .funfact-offwhite { background-color: #f4f4f4; } @media only screen and (max-width: 767.98px) { .funfact-offwhite { padding: 60px 15px; } } @media only screen and (max-width: 767.98px) { .funfact-offwhite .funfact-number { font-size: 30px; } } @media only screen and (max-width: 767.98px) { .funfact-offwhite .funfact-title { font-size: 14px; } } .funfact-port-layout { background-color: transparent; color: #fff; padding: 0; } .funfact-port-layout .funfact-number { color: #fff; } @media only screen and (max-width: 767.98px) { .funfact-port-layout .funfact-number { font-size: 30px; } } .funfact-port-layout h4 { color: #fff; } /*================================ Start About Me Bottom Area ==================================*/ .about-me-bottom-area { position: relative; z-index: 1; } @media only screen and (min-width: 768px) and (max-width: 991.98px) { .agency-about-wrapper.about-me { position: static; width: 100%; height: 600px; } } /*============================ Start Author Content Wrap ============================*/ .author-con-wrapper { padding: 120px 0; margin-top: 70px; } @media only screen and (min-width: 768px) and (max-width: 991.98px) { .author-con-wrapper { padding: 65px 0 80px; margin-top: 0; } } @media only screen and (max-width: 767.98px) { .author-con-wrapper { padding: 52px 0 60px; margin-top: 0; } } @media only screen and (min-width: 768px) and (max-width: 991.98px), only screen and (max-width: 767.98px) { .author-profile-thumb { height: 600px; } } .author-con-inner { color: #222222; font-weight: 500; font-size: 18px; } .author-con-inner h2 { color: #fdc657; font-size: 48px; margin-top: -12px; } @media only screen and (max-width: 767.98px) { .author-con-inner h2 { font-size: 34px; } } .author-con-inner h3 { font-size: 40px; margin-bottom: 30px; } @media only screen and (max-width: 767.98px) { .author-con-inner h3 { font-size: 24px; margin-bottom: 30px; } } .author-con-inner h2, .author-con-inner h3 { font-weight: 600; } .white-overlay { position: relative; z-index: 1; } .white-overlay .single-welcome-feature { color: #222222; } .white-overlay:after { background-color: rgba(255, 255, 255, 0.8); content: ""; position: absolute; left: 0; top: 0; height: 100%; width: 100%; z-index: -1; display: none; } @media only screen and (min-width: 768px) and (max-width: 991.98px), only screen and (max-width: 767.98px) { .white-overlay:after { display: block; } } /*========================================== 53. Start Our Services Area // services.html ===========================================*/ .service-item-wrap { margin-top: 30px; } .service-thumb img { width: 100%; } @media only screen and (max-width: 767.98px) { .our-service-content-area [class*='col-']:nth-child(2n) .single-call-action-wrap { background-color: #181818 !important; } } .service-bg-img { position: fixed; height: 100vh; width: 50%; top: 0; right: 0; } @media only screen and (min-width: 768px) and (max-width: 991.98px), only screen and (max-width: 767.98px) { .service-bg-img { position: static; width: 100%; height: 350px; } } .service-item-2 { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; } .service-item-icon { color: #222222; font-size: 36px; line-height: 1; min-width: 60px; margin-right: 30px; } @media only screen and (max-width: 767.98px) { .service-item-icon { margin-right: 0; } } .service-item-desc h3 { font-size: 16px; line-height: 1; text-transform: uppercase; font-weight: 600; } .service-item-desc p:first-child { margin-bottom: 0; } .service-item-3 { background-color: #fff; -webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 0.1); box-shadow: 0 0 1px rgba(0, 0, 0, 0.1); border-radius: 5px; padding: 50px; } @media only screen and (max-width: 767.98px) { .service-item-3 { padding: 20px; } } .service-item-3 .service-item-icon { margin-right: 0; margin-bottom: 25px; font-size: 50px; line-height: 1; } .service-item-3 .service-item-desc h3 { font-size: 20px; } .service-left-con-inner h2 { font-size: 40px; font-weight: 600; } @media only screen and (min-width: 768px) and (max-width: 991.98px), only screen and (max-width: 767.98px) { .service-left-con-inner h2 { font-size: 24px; } } @media only screen and (min-width: 992px) and (max-width: 1199.98px) { .service-left-con-inner h2 { font-size: 30px; } } /*=============================== 54. Start Team Member Content Area ================================*/ .team-member-area-wrapper .speaker-member-wrap .designation { color: #666666; } .team-member-item { overflow: hidden; } @media only screen and (min-width: 992px) and (max-width: 1199.98px) { .team-member-pro-pic { max-height: 400px; overflow: hidden; } } .team-member-pro-pic img { width: 100%; } .team-member-info { padding: 30px 15px !important; } @media only screen and (min-width: 1200px) { .team-member-info { padding: 30px 60px !important; } } .team-member-info h2 { font-size: 40px; font-weight: 500; line-height: 1; } @media only screen and (min-width: 768px) and (max-width: 991.98px), only screen and (min-width: 992px) and (max-width: 1199.98px), only screen and (min-width: 1200px) and (max-width: 1599.98px) { .team-member-info h2 { font-size: 30px; } } @media only screen and (max-width: 767.98px) { .team-member-info h2 { font-size: 24px; } } .team-member-info h4 { font-size: 16px; line-height: 1; text-transform: uppercase; } @media only screen and (max-width: 767.98px) { .team-member-info h4 { font-size: 14px; } } /*================================== Start Team Member Content Area ===================================*/ .team-member-content-item { color: #222222; line-height: 2; margin-top: 100px; } @media only screen and (min-width: 768px) and (max-width: 991.98px) { .team-member-content-item { margin-top: 70px; } } @media only screen and (max-width: 767.98px) { .team-member-content-item { margin-top: 55px; } } .team-member-content-item h2 { font-size: 40px; line-height: 1; font-weight: 600; margin-bottom: 37px; } @media only screen and (max-width: 767.98px) { .team-member-content-item h2 { font-size: 30px; } } .team-member-content-item address { color: #222222; font-weight: 700; } .team-member-profile h2 { font-size: 70px; line-height: 1; font-weight: 600; margin-bottom: 5px; } @media only screen and (max-width: 767.98px) { .team-member-profile h2 { font-size: 34px; margin-bottom: 10px; } } .team-member-profile h3 { font-size: 18px; font-weight: 600; margin-bottom: 50px; } @media only screen and (max-width: 767.98px) { .team-member-profile h3 { font-weight: 500; margin-bottom: 25px; } } .awards-list { padding-left: 20px; } .awards-list li { list-style-type: inherit; } .team-member-item.row { -webkit-box-align: center; -ms-flex-align: center; align-items: center; } /*================================= 55. Start Contact Content Area ===================================*/ .contact-form-wrapper .form-input-item:last-child { margin-top: 30px; } @media only screen and (max-width: 767.98px) { .contact-form-wrapper .form-input-item input, .contact-form-wrapper .form-input-item textarea { padding: 10px 15px; } } .contact-form-wrapper .form-input-item input::-webkit-input-placeholder, .contact-form-wrapper .form-input-item textarea::-webkit-input-placeholder { color: #222222; } .contact-form-wrapper .form-input-item input::-moz-placeholder, .contact-form-wrapper .form-input-item textarea::-moz-placeholder { color: #222222; } .contact-form-wrapper .form-input-item input:-ms-input-placeholder, .contact-form-wrapper .form-input-item textarea:-ms-input-placeholder { color: #222222; } .contact-form-wrapper .form-input-item input::-ms-input-placeholder, .contact-form-wrapper .form-input-item textarea::-ms-input-placeholder { color: #222222; } .contact-form-wrapper .form-input-item input::placeholder, .contact-form-wrapper .form-input-item textarea::placeholder { color: #222222; } /*======================== Start Contact Info Area =========================*/ .contact-map-area { height: 370px; } .contact-info-wrap { color: #222222; } /*============================ Start Contact Hero Map Area ==============================*/ .contact-map-hero-area, .contact-map-creative { position: relative; } @media only screen and (min-width: 768px) and (max-width: 991.98px) { .contact-map-hero-area, .contact-map-creative { height: 600px; } } @media only screen and (max-width: 767.98px) { .contact-map-hero-area, .contact-map-creative { height: 100vh !important; } } .contact-map-hero-area:before, .contact-map-creative:before { background-color: rgba(255, 255, 255, 0.4); content: ""; position: absolute; left: 0; top: 0; height: 100%; width: 100%; pointer-events: none; z-index: 998; } .contact-map-hero-area .leaflet-control-container, .contact-map-creative .leaflet-control-container { display: none; } .about-social-icons.get-connected a { font-size: 30px; line-height: 80px; height: 80px; width: 80px; } @media only screen and (min-width: 768px) and (max-width: 991.98px), only screen and (max-width: 767.98px) { .about-social-icons.get-connected a { font-size: 20px; line-height: 50px; height: 50px; width: 50px; } } @media only screen and (max-width: 479.98px) { .about-social-icons.get-connected a { font-size: 14px; line-height: 45px; height: 45px; width: 45px; } } /*============================ Start Contact Left Content ==============================*/ .con-left-content-item h2 { font-size: 48px; line-height: 1.2; font-weight: 500; text-transform: uppercase; letter-spacing: 2px; } @media only screen and (min-width: 768px) and (max-width: 991.98px) { .con-left-content-item h2 { font-size: 32px; } } @media only screen and (max-width: 767.98px) { .con-left-content-item h2 { font-size: 24px; } } .con-left-content-item address { color: #222222; } .form-message.alert * { margin: 0; } /*============================= 56. Start Pricing Content Area ==============================*/ .pricing-title-area { color: #222222; font-size: 16px; font-weight: 700; } .pricing-title-area h2 { font-weight: 600; font-size: 40px; margin-top: -10px; } .pricing-item-wrap { background-color: #fff; padding: 70px 15px; margin-top: 30px; } .pricing-item-wrap .btn { padding: 15px 35px; margin-top: 40px; } .pricing-item-wrap--feature .pricing__info { background-color: #fdc657; } .pricing-item-wrap--feature .pricing__info__duration { color: #fff; } .pricing__title { font-size: 18px; font-weight: 600; line-height: 1.2; text-transform: uppercase; letter-spacing: 1.3px; } .pricing__info { border: 5px solid #fdc657; border-radius: 50%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; height: 200px; width: 200px; margin: 40px auto; } .pricing__info__amount { color: #222222; font-size: 34px; line-height: 1; font-weight: 700; display: block; margin-bottom: 10px; } .pricing__package-feature li { border-bottom: 1px solid #e7e7e7; padding: 20px 10px; } .pricing__package-feature li:first-child { border-top: 1px solid #e7e7e7; } .pricing__package-feature strong { color: #222222; } /*======================== 57. Start Faq Content Area =========================*/ .faq-title-area h2 { font-size: 70px; margin-bottom: 54px; margin-top: -20px; } @media only screen and (max-width: 767.98px) { .faq-title-area h2 { font-size: 50px; margin-bottom: 20px; } } .faq-item-wrap { margin-top: 50px; } .faq-item-wrap:first-child { margin-top: 0; } .faq-item-wrap h3 { font-size: 18px; } /*=========================== 58. Start Partner Single Item ===============================*/ .partner-item { border-bottom: 1px solid #e7e7e7; margin-bottom: 50px; padding-bottom: 48px; } .partner-item:last-child { border-bottom: 0; margin-bottom: 0; padding-bottom: 0; } .partner-item__logo { margin-bottom: 30px; } .partner-item__title { font-size: 18px; font-weight: 600; line-height: 1.2; } .partner-item p { margin-bottom: 0; } /*============================== 59. Start 404 Error Page Content ================================*/ .error-page-bg { height: 100%; } @media only screen and (min-width: 768px) and (max-width: 991.98px) { .error-page-bg { height: 600px; } } @media only screen and (max-width: 767.98px) { .error-page-bg { height: 300px; } } /*=============================== 60 .Start Coming Soon Page Content ================================*/ .coming-soon-page-wrapper { height: 100vh; } @media only screen and (max-width: 767.98px) { .coming-soon-page-wrapper { height: auto; } } .coming-soon-content { background-color: rgba(0, 0, 0, 0.9); color: #fff; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; font-size: 16px; font-weight: 700; padding: 200px; } @media only screen and (min-width: 1200px) and (max-width: 1599.98px), only screen and (min-width: 992px) and (max-width: 1199.98px) { .coming-soon-content { padding: 100px 30px; } } @media only screen and (min-width: 768px) and (max-width: 991.98px) { .coming-soon-content { padding: 200px 50px; } } @media only screen and (max-width: 767.98px) { .coming-soon-content { padding: 100px 15px; } } .coming-soon-content h2 { color: #fff; font-weight: 600; font-size: 70px; line-height: 1; text-transform: uppercase; margin-bottom: 25px; } @media only screen and (max-width: 767.98px) { .coming-soon-content h2 { font-size: 40px; } } @media only screen and (max-width: 479.98px) { .coming-soon-content h2 { font-size: 30px; } } .coming-soon-content .text-brand { color: #fdc657; } .coming-soon-content .about-social-icons a { background-color: #303030; color: #aaaaaa; } .coming-soon-content .about-social-icons a:hover { background-color: #fdc657; color: #fff; } /*========================================== 61. Start Blog Details Page Content ===========================================*/ .single-post-details { font-size: 16px; line-height: 2; } .single-post-details .blog-post-head { margin-top: 50px; } @media only screen and (max-width: 575.98px) { .single-post-details .blog-post-head { margin-top: 35px; } } .single-post-details .blog-post-head h2 { color: #333333; font-size: 30px; margin-top: -10px; } @media only screen and (max-width: 767.98px) { .single-post-details .blog-post-head h2 { font-size: 24px; font-weight: 600; } } @media only screen and (max-width: 575.98px) { .single-post-details .blog-post-head h2 { margin-bottom: 10px; } } .single-post-details .blog-post-thumb-gallery { max-height: 500px; overflow: hidden; } @media only screen and (max-width: 767.98px) { .single-post-details .blog-post-thumb-gallery { max-height: 350px; } } .single-post-details .post-meta { margin-bottom: 25px; } @media only screen and (max-width: 767.98px) { .single-post-details .post-meta { margin-bottom: 10px; } } .single-post-details .post-meta a { color: #212121; margin-right: 20px; font-size: 14px; } .single-post-details .post-meta a:last-child { margin-right: 0; } .single-post-details .post-meta a i { color: #fdc657; margin-right: 5px; } .single-post-details__footer { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; margin: 40px 0 47px; } @media only screen and (max-width: 767.98px) { .single-post-details__footer { margin: 25px 0; } } @media only screen and (max-width: 767.98px) { .single-post-details__footer { display: block; } } .single-post-details__footer__item { border-top: 1px solid #e7e7e7; max-width: 50%; -ms-flex-preferred-size: 50%; flex-basis: 50%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; padding: 12px 20px; } .single-post-details__footer__item:nth-child(1n + 3) { border-bottom: 1px solid #e7e7e7; } .single-post-details__footer__item:nth-child(2n + 1) { border-right: 1px solid #e7e7e7; padding-left: 0; } @media only screen and (max-width: 767.98px) { .single-post-details__footer__item:nth-child(2n + 1) { padding-left: 20px; } } .single-post-details__footer__item:nth-child(2n + 2) { padding-right: 0; } @media only screen and (max-width: 767.98px) { .single-post-details__footer__item:nth-child(2n + 2) { padding-right: 20px; } } .single-post-details__footer__item:first-child { border-top: 1px solid #e7e7e7; } @media only screen and (max-width: 767.98px) { .single-post-details__footer__item { min-width: 100%; border: 1px solid #e7e7e7; border-top: 0; } } @media only screen and (max-width: 575.98px) { .single-post-details__footer__item { padding: 10px 5px !important; font-size: 13px; } } .single-post-details__footer__item h5 { font-size: 15px; line-height: 1; font-weight: 600; text-transform: uppercase; margin-bottom: 0; } @media only screen and (max-width: 575.98px) { .single-post-details__footer__item h5 { font-size: 12px; } } .single-post-details__footer__item h5 i { color: #888888; margin-right: 10px; } @media only screen and (max-width: 575.98px) { .single-post-details__footer__item h5 i { margin-right: 3px; } } .single-post-details__footer__item .cate-list li { margin-right: 10px; } .single-post-details__footer__item .cate-list li:last-child { margin-right: 0; } .single-post-details__footer__item .cate-list li a { color: #666666; font-size: 15px; } .single-post-details__footer__item .cate-list li a:hover { color: #fdc657; } .single-post-details__footer__item .share-item a { color: #222222; margin-right: 15px; } .single-post-details__footer__item .share-item a:last-child { margin-right: 0; } .single-post-details__footer__item .share-item a:hover { color: #fdc657; } .single-post-details p, .single-post-details blockquote { margin-bottom: 20px; } .single-post-details p:last-child, .single-post-details blockquote:last-child { margin-bottom: 0; } /*============================ Start Comment Area Wrapper ============================*/ .comment-area-wrapper h3 { font-size: 16px; margin-bottom: 30px; } .single-comment-wrap { font-size: 14px; line-height: 1.6; margin-bottom: 35px; } .single-comment-wrap:last-child { margin-bottom: 0; } .single-comment-wrap.comment-reply { margin-left: 50px; } @media only screen and (max-width: 767.98px) { .single-comment-wrap.comment-reply { margin-left: 20px; } } .single-comment-wrap .author-thumb { border-radius: 3px; margin-right: 15px; height: 70px; max-width: 70px; -ms-flex-preferred-size: 70px; flex-basis: 70px; overflow: hidden; } .single-comment-wrap .comments-info { margin-top: -4px; -ms-flex-preferred-size: calc(100% - 70px); flex-basis: calc(100% - 70px); } .single-comment-wrap .comment-footer a { font-size: 12px; color: #666666; } .single-comment-wrap .comment-footer a strong { color: #222222; } .single-comment-wrap .comment-footer a.btn-reply:hover { color: #fdc657; } /*================================= 62. Start Portfolio Content Wrapper ===================================*/ .modern-masonry, .modern-basic { margin-top: -60px; } @media only screen and (min-width: 992px) and (max-width: 1199.98px), only screen and (min-width: 768px) and (max-width: 991.98px), only screen and (max-width: 767.98px) { .modern-masonry, .modern-basic { margin-top: -30px; } } .modern-masonry .single-portfolio-wrap, .modern-basic .single-portfolio-wrap { margin-top: 60px; } @media only screen and (min-width: 992px) and (max-width: 1199.98px), only screen and (min-width: 768px) and (max-width: 991.98px), only screen and (max-width: 767.98px) { .modern-masonry .single-portfolio-wrap, .modern-basic .single-portfolio-wrap { margin-top: 30px; } } .modern-basic .single-portfolio-wrap { position: relative; } .modern-basic .single-portfolio-wrap:after { background-color: #ddd; content: ''; position: absolute; bottom: -40px; right: -30px; height: 20px; width: 1px; } @media only screen and (min-width: 992px) and (max-width: 1199.98px), only screen and (min-width: 768px) and (max-width: 991.98px), only screen and (max-width: 767.98px) { .modern-basic .single-portfolio-wrap:after { bottom: -25px; right: -15px; } } .modern-basic .single-portfolio-wrap:before { background-color: #ddd; content: ''; position: absolute; bottom: -30px; right: -40px; height: 1px; width: 20px; } @media only screen and (min-width: 992px) and (max-width: 1199.98px), only screen and (min-width: 768px) and (max-width: 991.98px), only screen and (max-width: 767.98px) { .modern-basic .single-portfolio-wrap:before { bottom: -15px; right: -25px; } } @media only screen and (min-width: 992px) and (max-width: 1199.98px), only screen and (min-width: 1200px) { .modern-basic [class*='col-sm-6']:not(.col-lg-3):not(.col-lg-4):nth-child(2n + 2) .single-portfolio-wrap:before, .modern-basic [class*='col-sm-6']:not(.col-lg-3):not(.col-lg-4):nth-child(2n + 2) .single-portfolio-wrap:after { display: none; } } @media only screen and (min-width: 992px) and (max-width: 1199.98px), only screen and (min-width: 1200px) { .modern-basic [class*='col-sm-6 col-lg-3']:nth-child(4n + 4) .single-portfolio-wrap:before, .modern-basic [class*='col-sm-6 col-lg-3']:nth-child(4n + 4) .single-portfolio-wrap:after { display: none; } } @media only screen and (min-width: 992px) and (max-width: 1199.98px), only screen and (min-width: 1200px) { .modern-basic [class*='col-sm-6 col-lg-4']:nth-child(3n + 3) .single-portfolio-wrap:before, .modern-basic [class*='col-sm-6 col-lg-4']:nth-child(3n + 3) .single-portfolio-wrap:after { display: none; } } @media only screen and (max-width: 767.98px), only screen and (min-width: 768px) and (max-width: 991.98px) { .modern-basic [class*='col']:nth-child(2n + 2) .single-portfolio-wrap:before, .modern-basic [class*='col']:nth-child(2n + 2) .single-portfolio-wrap:after { display: none; } } @media only screen and (max-width: 575.98px) { .modern-basic [class*='col'] .single-portfolio-wrap:before, .modern-basic [class*='col'] .single-portfolio-wrap:after { display: none; } } @media only screen and (max-width: 767.98px) { .basic-title .single-portfolio-wrap.layout--2 { margin-top: 30px; } } @media only screen and (max-width: 767.98px) { .basic-title .single-portfolio-wrap.layout--2 .portfolio-details { margin-top: 25px; } } .basic-title .single-portfolio-wrap.layout--2 .portfolio-details .port-info h3 { font-size: 26px; } @media only screen and (min-width: 768px) and (max-width: 991.98px) { .basic-title .single-portfolio-wrap.layout--2 .portfolio-details .port-info h3 { font-size: 20px; } } @media only screen and (min-width: 992px) and (max-width: 1199.98px), only screen and (max-width: 767.98px) { .basic-title .single-portfolio-wrap.layout--2 .portfolio-details .port-info h3 { font-size: 18px; } } /*=================================== Start Portfolio Creative Hero Area ====================================*/ .port-creative-hero-content { color: #fff; font-size: 16px; font-weight: 600; } @media only screen and (min-width: 768px) and (max-width: 991.98px), only screen and (max-width: 767.98px) { .port-creative-hero-content { padding: 150px 0; } } .port-creative-hero-content h2 { color: #fff; font-size: 70px; font-weight: 600; text-transform: uppercase; margin-bottom: 33px; } @media only screen and (min-width: 768px) and (max-width: 991.98px) { .port-creative-hero-content h2 { font-size: 40px; margin-bottom: 15px; } } @media only screen and (max-width: 767.98px) { .port-creative-hero-content h2 { font-size: 28px; margin-bottom: 15px; } } /*============================== Start Single Portfolio Item ================================*/ @media only screen and (max-width: 767.98px) { .port-creative-item { margin-bottom: 60px; } } .port-creative-item-thumb { overflow: hidden; } @media only screen and (max-width: 767.98px) { .port-creative-item-thumb { max-height: 300px; margin-bottom: 45px; } } .port-creative-item-thumb img { -webkit-transition: 0.4s; -o-transition: 0.4s; transition: 0.4s; } .port-creative-item-thumb:hover img { -webkit-transform: scale(1.1); -ms-transform: scale(1.1); transform: scale(1.1); } .port-creative-item-info { padding: 0 15px; } .port-creative-item-info h2 { font-size: 70px; font-weight: 600; margin-bottom: 25px; } @media only screen and (min-width: 992px) and (max-width: 1199.98px) { .port-creative-item-info h2 { font-size: 40px; } } @media only screen and (min-width: 768px) and (max-width: 991.98px), only screen and (max-width: 767.98px) { .port-creative-item-info h2 { font-size: 28px; margin-bottom: 15px; } } @media only screen and (max-width: 575.98px) { .port-creative-item-info h2 { font-size: 20px; } } .port-creative-item-info .port-tags { margin-bottom: 50px; } @media only screen and (min-width: 768px) and (max-width: 991.98px), only screen and (max-width: 767.98px) { .port-creative-item-info .port-tags { margin-bottom: 33px; } } .port-creative-item-info .port-tags a { color: #666666; font-size: 18px; line-height: 1; } .port-creative-item-info .port-tags a:hover { color: #fdc657; } .port-creative-item-info .port-tags a:hover:after { color: #666666; } .port-creative-item-info .port-tags a:after { content: '/'; font-size: 13px; line-height: 1; margin: 0 5px; padding-left: 3px; } .port-creative-item-info .port-tags a:last-child:after { display: none; } .port-creative-item:nth-child(2n) [class*='col']:first-child { -webkit-box-ordinal-group: 2; -ms-flex-order: 1; order: 1; } @media only screen and (max-width: 767.98px) { .port-creative-item:nth-child(2n) [class*='col']:first-child { -webkit-box-ordinal-group: 1; -ms-flex-order: 0; order: 0; } } .port-creative-item .row { -webkit-box-align: center; -ms-flex-align: center; align-items: center; } @media only screen and (max-width: 767.98px) { .creative-two-column .port-creative-item { margin-bottom: 0; } } .creative-two-column .port-creative-item-info h2 { font-size: 40px; font-weight: 500; } @media only screen and (min-width: 768px) and (max-width: 991.98px), only screen and (max-width: 767.98px), only screen and (min-width: 1200px) and (max-width: 1599.98px) { .creative-two-column .port-creative-item-info h2 { font-size: 28px; margin-bottom: 15px; } } @media only screen and (max-width: 575.98px) { .creative-two-column .port-creative-item-info h2 { font-size: 20px; } } .creative-two-column .port-creative-item-info .port-tags { margin-bottom: 0; } @media only screen and (max-width: 767.98px) { .creative-two-column .port-creative-item-thumb { margin-bottom: 25px; } } @media only screen and (min-width: 1200px) { .creative-two-column [class*='col']:nth-child(4n + 3) .port-creative-item [class*='col']:first-child { -webkit-box-ordinal-group: 2; -ms-flex-order: 1; order: 1; } } @media only screen and (min-width: 1200px) and (max-width: 767.98px) { .creative-two-column [class*='col']:nth-child(4n + 3) .port-creative-item [class*='col']:first-child { -webkit-box-ordinal-group: 1; -ms-flex-order: 0; order: 0; } } @media only screen and (min-width: 1200px) { .creative-two-column [class*='col']:nth-child(4n +4) .port-creative-item [class*='col']:first-child { -webkit-box-ordinal-group: 2; -ms-flex-order: 1; order: 1; } } @media only screen and (min-width: 1200px) and (max-width: 767.98px) { .creative-two-column [class*='col']:nth-child(4n +4) .port-creative-item [class*='col']:first-child { -webkit-box-ordinal-group: 1; -ms-flex-order: 0; order: 0; } } @media only screen and (min-width: 992px) and (max-width: 1199.98px), only screen and (min-width: 768px) and (max-width: 991.98px) { .creative-two-column [class*='col']:nth-child(2n) .port-creative-item [class*='col']:first-child { -webkit-box-ordinal-group: 2; -ms-flex-order: 1; order: 1; } } @media only screen and (min-width: 992px) and (max-width: 1199.98px) and (max-width: 767.98px), only screen and (min-width: 768px) and (max-width: 991.98px) and (max-width: 767.98px) { .creative-two-column [class*='col']:nth-child(2n) .port-creative-item [class*='col']:first-child { -webkit-box-ordinal-group: 1; -ms-flex-order: 0; order: 0; } } @media only screen and (max-width: 767.98px) { .creative-two-column [class*='col']:nth-child(1n + 2) { margin-top: 48px; } } .creative--three .port-creative-item { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } @media only screen and (max-width: 767.98px) { .creative--three .port-creative-item { margin-bottom: 10px; } .creative--three .port-creative-item-thumb { margin-bottom: 0; } } .creative--three .port-creative-item-info { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding: 130px 100px; } @media only screen and (min-width: 992px) and (max-width: 1199.98px), only screen and (min-width: 768px) and (max-width: 991.98px), only screen and (max-width: 767.98px) { .creative--three .port-creative-item-info { display: block; } .creative--three .port-creative-item-info .port-info-right { margin-top: 20px; } } @media only screen and (min-width: 992px) and (max-width: 1199.98px), only screen and (min-width: 1200px) and (max-width: 1599.98px) { .creative--three .port-creative-item-info { padding: 100px 30px; } } @media only screen and (min-width: 768px) and (max-width: 991.98px), only screen and (max-width: 767.98px) { .creative--three .port-creative-item-info { padding: 46px 20px 50px; } } .creative--three .port-creative-item-info h2 { font-size: 40px; font-weight: 500; margin-bottom: 0; } @media only screen and (min-width: 768px) and (max-width: 991.98px), only screen and (max-width: 767.98px), only screen and (min-width: 1200px) and (max-width: 1599.98px) { .creative--three .port-creative-item-info h2 { font-size: 28px; } } @media only screen and (max-width: 575.98px) { .creative--three .port-creative-item-info h2 { font-size: 20px; } } .creative--three .port-creative-item-info .port-tags { margin-bottom: 12px; } .creative--three [class*='col']:nth-child(2n) .port-creative-item-info { -webkit-box-ordinal-group: 1; -ms-flex-order: 0; order: 0; } @media only screen and (max-width: 767.98px) { .creative--three [class*='col']:nth-child(2n) .port-creative-item-info { -webkit-box-ordinal-group: 2; -ms-flex-order: 1; order: 1; } } .creative--three [class*='col']:nth-child(2n) .port-creative-item-thumb { -webkit-box-ordinal-group: 2; -ms-flex-order: 1; order: 1; } @media only screen and (max-width: 767.98px) { .creative--three [class*='col']:nth-child(2n) .port-creative-item-thumb { -webkit-box-ordinal-group: 1; -ms-flex-order: 0; order: 0; } } .creative--four .port-creative-item { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } @media only screen and (max-width: 767.98px) { .creative--four .port-creative-item { margin-bottom: 10px; } .creative--four .port-creative-item-thumb { margin-bottom: 0; } } .creative--four .port-creative-item-info { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding: 65px 50px 58px; } @media only screen and (min-width: 992px) and (max-width: 1199.98px), only screen and (max-width: 767.98px) { .creative--four .port-creative-item-info { padding: 47px 20px 42px; } } @media only screen and (min-width: 992px) and (max-width: 1199.98px), only screen and (min-width: 768px) and (max-width: 991.98px), only screen and (max-width: 767.98px) { .creative--four .port-creative-item-info { display: block; } .creative--four .port-creative-item-info .port-info-right { margin-top: 20px; } } .creative--four .port-creative-item-info h2 { font-size: 40px; font-weight: 500; margin-bottom: 0; } @media only screen and (min-width: 1200px) and (max-width: 1599.98px), only screen and (min-width: 992px) and (max-width: 1199.98px), only screen and (min-width: 768px) and (max-width: 991.98px), only screen and (max-width: 767.98px) { .creative--four .port-creative-item-info h2 { font-size: 28px; } } @media only screen and (max-width: 575.98px) { .creative--four .port-creative-item-info h2 { font-size: 20px; } } .creative--four .port-creative-item-info .port-tags { margin-bottom: 12px; } @media only screen and (min-width: 992px) and (max-width: 1199.98px), only screen and (min-width: 1200px) { .creative--four [class*='col']:nth-child(3n + 2) .port-creative-item-info { -webkit-box-ordinal-group: 1; -ms-flex-order: 0; order: 0; } } @media only screen and (min-width: 992px) and (max-width: 1199.98px) and (max-width: 767.98px), only screen and (min-width: 1200px) and (max-width: 767.98px) { .creative--four [class*='col']:nth-child(3n + 2) .port-creative-item-info { -webkit-box-ordinal-group: 2; -ms-flex-order: 1; order: 1; } } @media only screen and (min-width: 992px) and (max-width: 1199.98px), only screen and (min-width: 1200px) { .creative--four [class*='col']:nth-child(3n + 2) .port-creative-item-thumb { -webkit-box-ordinal-group: 2; -ms-flex-order: 1; order: 1; } } @media only screen and (min-width: 992px) and (max-width: 1199.98px) and (max-width: 767.98px), only screen and (min-width: 1200px) and (max-width: 767.98px) { .creative--four [class*='col']:nth-child(3n + 2) .port-creative-item-thumb { -webkit-box-ordinal-group: 1; -ms-flex-order: 0; order: 0; } } @media only screen and (min-width: 768px) and (max-width: 991.98px) { .creative--four [class*='col']:nth-child(2n) .port-creative-item-info { -webkit-box-ordinal-group: 1; -ms-flex-order: 0; order: 0; } } @media only screen and (min-width: 768px) and (max-width: 991.98px) and (max-width: 767.98px) { .creative--four [class*='col']:nth-child(2n) .port-creative-item-info { -webkit-box-ordinal-group: 2; -ms-flex-order: 1; order: 1; } } @media only screen and (min-width: 768px) and (max-width: 991.98px) { .creative--four [class*='col']:nth-child(2n) .port-creative-item-thumb { -webkit-box-ordinal-group: 2; -ms-flex-order: 1; order: 1; } } @media only screen and (min-width: 768px) and (max-width: 991.98px) and (max-width: 767.98px) { .creative--four [class*='col']:nth-child(2n) .port-creative-item-thumb { -webkit-box-ordinal-group: 1; -ms-flex-order: 0; order: 0; } } /*================================ 63. Start Portfolio Details Content ===================================*/ .port-con-item h2 { color: #fdc657; font-weight: 600; margin-top: -10px; margin-bottom: 52px; } @media only screen and (min-width: 768px) and (max-width: 991.98px) { .port-con-item h2 { margin-bottom: 42px; } } @media only screen and (max-width: 767.98px) { .port-con-item h2 { margin-bottom: 22px; } } .port-feature-content-inner .single-welcome-feature { margin-top: 0; } .port-feature-content-inner .single-welcome-feature:nth-child(1n + 2) { margin-top: 54px; } @media only screen and (max-width: 767.98px) { .port-feature-content-inner .single-welcome-feature:nth-child(1n + 2) { margin-top: 35px; } } .port-feature-content-inner .single-welcome-feature p:last-child { margin-bottom: 0; } .port-details-con-inner .single-post-details__footer { display: block; margin-top: 0; } .port-details-con-inner .single-post-details__footer__item { max-width: 100%; border-left: 0; border-right: 0; border-top: 0; border-bottom: 1px solid #e7e7e7; padding: 20px 0; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; } .port-details-con-inner .single-post-details__footer__item:first-child { border-top: 1px solid #e7e7e7; } .port-details-con-inner .single-post-details__footer__item .footer-item-left { min-width: 25%; margin-right: 15px; } .port-details-pagination { padding: 100px; } @media only screen and (min-width: 768px) and (max-width: 991.98px) { .port-details-pagination { padding: 50px 30px; } } @media only screen and (max-width: 767.98px) { .port-details-pagination { padding: 50px 15px; } } .port-details-pagination a { color: #222222; font-size: 40px; line-height: 1; } @media only screen and (max-width: 767.98px) { .port-details-pagination a { font-size: 30px; } } .port-details-pagination a.middle-icon { font-size: 14px; border: 2px solid; text-align: center; line-height: 56px; width: 60px; height: 60px; } @media only screen and (max-width: 767.98px) { .port-details-pagination a.middle-icon { line-height: 36px; height: 40px; width: 40px; } } .port-details-pagination a:hover { color: #fdc657; } .full-width-section-title-con { color: #fff; height: 240px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } @media only screen and (max-width: 767.98px) { .full-width-section-title-con { height: 180px; } } .full-width-section-title-con h2 { color: #fff; font-size: 40px; margin-bottom: 0; } @media only screen and (max-width: 767.98px) { .full-width-section-title-con h2 { font-size: 30px; } } .work-process-content .single-desc-item-wrap { color: #666666; } .work-process-content .single-desc-item-wrap P:last-child { margin-bottom: 0; } .work-process-content .single-desc-item-wrap .desc-number { border-color: #fdc657; color: #fdc657; font-weight: 600; } .port.is-affixed .inner-wrapper-sticky { bottom: -20px !important; } /*=================== 64. Start Shop Page =====================*/ .product-filter-area { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } @media only screen and (max-width: 575.98px) { .product-filter-area { display: block; } } .product-sorting .nice-select { background-color: #f4f4f4; border: 0; padding: 15px 40px 15px 15px; min-width: 280px; } .product-sorting .nice-select:after { right: 20px; border-color: #222222; width: 8px; height: 8px; } .product-sorting .nice-select .list { right: 0; left: auto; } .product-sorting .nice-select .current { color: #222222; font-weight: 400; font-size: 15px; } /*=========================================== 65. Single Product Page (single-product.html) =============================================*/ .prod-details-info-content h2 { font-size: 40px; font-weight: 600; margin-top: -10px; margin-bottom: 7px; } @media only screen and (max-width: 767.98px), only screen and (min-width: 768px) and (max-width: 991.98px) { .prod-details-info-content h2 { font-size: 32px; font-weight: 500; } } .prod-details-info-content .price-group { font-size: 30px; font-weight: 500; margin-bottom: 10px; } @media only screen and (max-width: 767.98px), only screen and (min-width: 768px) and (max-width: 991.98px) { .prod-details-info-content .price-group { font-size: 22px; font-weight: 500; } } .prod-details-info-content .price-group del { margin-right: 10px; } .prod-details-info-content p:last-child { margin-bottom: 0; } .config-item { margin-bottom: 20px; } .config-item:last-child { margin-bottom: 0; } .config-item .config-name { font-weight: 700; text-transform: capitalize; font-size: 14px; line-height: 1; margin-bottom: 13px; } .config-item .config-name b { text-transform: capitalize; margin-left: 5px; font-size: 13px; line-height: 1; font-weight: 500; } .config-item .config-list li { border: 1px solid #D4D4D4; cursor: pointer; color: #8d8d8d; height: 40px; padding: 3px; font-size: 14px; line-height: 1; display: block; text-align: center; -webkit-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; margin-right: 5px; overflow: hidden; width: 40px; } .config-item .config-list li.active, .config-item .config-list li:hover { border-color: #fdc657; color: #222222; } .config-item .config-list li span { line-height: 30px; display: block; font-weight: 500; } .product-description-review #myTabContent { border: 1px solid #e7e7e7; padding: 33px 30px; } @media only screen and (max-width: 479.98px) { .product-description-review #myTabContent { padding: 30px 15px; } } .product-description-review .desc-review-tab-menu { border-bottom: 0; } .product-description-review .desc-review-tab-menu li a { background-color: #f4f4f4; color: #222222; display: inline-block; font-size: 16px; font-weight: 600; padding: 15px 30px; text-transform: uppercase; } @media only screen and (max-width: 479.98px) { .product-description-review .desc-review-tab-menu li a { font-size: 13px; padding: 10px 20px; } } .product-description-review .desc-review-tab-menu li a.active { background-color: #fdc657; color: #fff; } .product-ratting-wrap { /*-- Ratting Form Wrap --*/ /*-- Ratting Form --*/ } .product-ratting-wrap .pro-avg-ratting { margin-bottom: 20px; float: left; width: 100%; } .product-ratting-wrap .pro-avg-ratting h4 { font-size: 18px; margin: 0 0 7px; font-weight: 600; } .product-ratting-wrap .pro-avg-ratting h4 span { color: #000; font-size: 12px; } .product-ratting-wrap .pro-avg-ratting>span { display: block; } .product-ratting-wrap .ratting-list { margin-bottom: 30px; float: left; width: 100%; } .product-ratting-wrap .ratting-list .sin-list { margin-right: 30px; } .product-ratting-wrap .ratting-list .sin-list:last-child { margin-right: 0; } .product-ratting-wrap .ratting-list .sin-list i { color: #fbbf00; } .product-ratting-wrap .ratting-list .sin-list span { color: #666666; } .product-ratting-wrap .sin-rattings { margin-bottom: 25px; } .product-ratting-wrap .sin-rattings:last-child { margin-bottom: 0; } .product-ratting-wrap .sin-rattings .ratting-author { float: left; width: 100%; margin-bottom: 10px; } .product-ratting-wrap .sin-rattings .ratting-author h3 { float: left; font-size: 14px; font-weight: 600; margin: 0; line-height: 18px; margin-right: 15px; } .product-ratting-wrap .sin-rattings .ratting-author .ratting-star i, .product-ratting-wrap .sin-rattings .ratting-author .ratting-star span { color: #fbbf00; font-size: 13px; float: left; } .product-ratting-wrap .sin-rattings .ratting-author .ratting-star span { margin-left: 5px; color: #8d8d8d; } .product-ratting-wrap .sin-rattings p { color: #8d8d8d; font-size: 13px; line-height: 1.8; } .product-ratting-wrap .ratting-form-wrapper { margin-top: 30px; } .product-ratting-wrap .ratting-form-wrapper h3 { font-size: 18px; margin: 0 0 20px; text-transform: capitalize; } .product-ratting-wrap .ratting-form h5 { float: left; font-size: 14px; line-height: 1; margin-right: 10px; font-weight: 600; margin-bottom: 0; } .product-ratting-wrap .ratting-form .ratting-star i { color: #D4D4D4; font-size: 14px; float: left; line-height: 18px; display: block; margin-right: 3px; cursor: pointer; -webkit-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; } .product-ratting-wrap .ratting-form .ratting-star i:hover { color: #fbbf00; } .product-ratting-wrap .ratting-form .ratting-star i:last-child { margin: 0; } .product-ratting-wrap .ratting-form label { display: block; margin-bottom: 5px; font-weight: 500; color: #222222; } .product-ratting-wrap .ratting-form input { width: 100%; background-color: transparent; border: 1px solid #dddddd; font-size: 13px; line-height: 24px; padding: 8px 15px; color: #666666; outline: none; -webkit-transition: 0.1s; -o-transition: 0.1s; transition: 0.1s; } .product-ratting-wrap .ratting-form input:focus { border-color: #fdc657; } .product-ratting-wrap .ratting-form textarea { width: 100%; background-color: transparent; border: 1px solid #dddddd; font-size: 13px; line-height: 24px; padding: 8px 15px; color: #666666; height: 100px; outline: none; resize: none; -webkit-transition: 0.1s; -o-transition: 0.1s; transition: 0.1s; } .product-ratting-wrap .ratting-form textarea:focus { border-color: #fdc657; } .product-ratting-wrap .ratting-form .btn { padding: 15px 40px; } /*=============================== 66. Start Cart Page Wrapper ================================*/ .shopping-cart-table thead th { color: #222222; font-weight: 600; font-size: 15px; text-transform: uppercase; border-bottom: 0; } .shopping-cart-table tr td, .shopping-cart-table tr th { vertical-align: middle; width: 15%; padding: 10px; border-color: #e7e7e7; white-space: nowrap; } .shopping-cart-table tr td.product-list, .shopping-cart-table tr th.product-list { width: 55%; } .shopping-cart-table .product-list .remove-icon { margin-right: 15px; } .shopping-cart-table .product-list .remove-icon button { color: #666666; } .shopping-cart-table .product-list .remove-icon button:hover { color: #fdc657; } .shopping-cart-table .product-list .product-thumb { display: block; width: 70px; margin-right: 20px; } .shopping-cart-table .product-list .product-name { color: #222222; line-height: 1; } .shopping-cart-table .product-list .product-name:hover { color: #fdc657; } .shopping-cart-table .pro-qty { width: 120px; } .shopping-cart-table .pro-qty input { padding: 10px 0; font-weight: 400; } .shopping-cart-table .pro-qty a { width: 30px; line-height: 44px; font-weight: 400; font-size: 16px; } .cart-coupon-update-area { margin-top: 20px; } .cart-coupon-update-area button { font-size: 14px; font-weight: 600; } .cart-coupon-update-area button:hover { color: #fdc657; } .cart-coupon-update-area .coupon-form-wrap { width: 55%; } @media only screen and (max-width: 575.98px) { .cart-coupon-update-area .coupon-form-wrap { width: 100%; } } .cart-coupon-update-area .coupon-form-wrap form { position: relative; } .cart-coupon-update-area .coupon-form-wrap form input { border: none; border-bottom: 1px solid #e7e7e7; display: block; outline: none; padding: 5px 100px 5px 0; -webkit-transition: 0.2s; -o-transition: 0.2s; transition: 0.2s; width: 100%; } .cart-coupon-update-area .coupon-form-wrap form input:focus { border-color: #fdc657; } .cart-coupon-update-area .coupon-form-wrap form .btn-apply { position: absolute; right: 0; top: 50%; -webkit-transform: translate(0, -50%); -ms-transform: translate(0, -50%); transform: translate(0, -50%); } .cart-coupon-update-area .cart-update-buttons button:nth-child(1n + 2) { margin-left: 10px; } .cart-calculate-area { background-color: #f4f4f4; padding: 30px 30px 0; } .cart-calculate-area h5 { font-weight: 600; font-size: 18px; line-height: 1; margin-bottom: 20px; } .cart-calculate-area .cart-cal-table { white-space: nowrap; } .cart-calculate-area .cart-cal-table table { margin-bottom: 0; } .cart-calculate-area .cart-cal-table td, .cart-calculate-area .cart-cal-table th { font-size: 14px; font-weight: 400; padding: 5px 0 15px; } .cart-calculate-area .cart-cal-table .shipping-method li { margin-bottom: 15px; } .cart-calculate-area .cart-cal-table .shipping-method li:last-child { margin-bottom: 0; } .cart-calculate-area .cart-cal-table .shipping-method .custom-control-label:before { height: 16px; width: 16px; } .cart-calculate-area .cart-cal-table .shipping-method .custom-control-label:after { background-size: 8px 8px; left: -21px; top: 3px; } .cart-calculate-area .cart-cal-table .order-total { border-top: 1px solid #e7e7e7; } .cart-calculate-area .cart-cal-table .order-total th, .cart-calculate-area .cart-cal-table .order-total td { padding-top: 15px; } .cart-calculate-area .proceed-checkout-btn { margin: 15px -30px 0; } /*=============================== 67. Start Checkout Page Wrapper ================================*/ .checkout-page-coupon-area .card { border: none; padding: 0; } .checkout-page-coupon-area .card h3 { background-color: #eeeff2; font-size: 14px; line-height: 1.2; font-weight: 400; margin-bottom: 0; padding: 20px 30px; } .checkout-page-coupon-area .card h3 i { color: #008000; margin-right: 10px; } .checkout-page-coupon-area .card h3 span { cursor: pointer; -webkit-transition: 0.2s; -o-transition: 0.2s; transition: 0.2s; } .checkout-page-coupon-area .card h3 span:hover { color: #fdc657; } .checkout-page-coupon-area .card .card-body { padding: 0; margin-top: 30px; } .checkout-page-coupon-area .card .card-body .apply-coupon-wrapper input { border: 1px solid #e7e7e7; outline: none; padding: 17px 20px; max-width: 500px; width: 100%; } .checkout-page-coupon-area .card .card-body .apply-coupon-wrapper input:focus { border-color: #fdc657; } .checkout-page-coupon-area .card .card-body .apply-coupon-wrapper button.btn { padding: 16px 30px; margin-left: 20px; } @media only screen and (max-width: 767.98px) { .checkout-page-coupon-area .card .card-body .apply-coupon-wrapper button.btn { margin-left: 0; margin-top: 10px; } } .checkout-billing-details-wrap { margin-top: 50px; } @media only screen and (max-width: 767.98px) { .checkout-billing-details-wrap { margin-top: 30px; } } .checkout-billing-details-wrap h2 { font-weight: 600; font-size: 20px; line-height: 1; position: relative; padding-bottom: 15px; margin-bottom: 46px; } @media only screen and (max-width: 767.98px) { .checkout-billing-details-wrap h2 { margin-bottom: 26px; } } .checkout-billing-details-wrap h2:before { background-color: #222222; content: ''; position: absolute; left: 0; bottom: 0; height: 2px; width: 50px; } .single-input-item { font-size: 14px; margin-bottom: 21px; } .single-input-item label, .single-input-item .custom-control-label { font-size: 14px; color: #222222; display: block; margin-bottom: 10px; position: relative; } .single-input-item label.required:after, .single-input-item .custom-control-label.required:after { content: '*'; color: red; margin-left: 2px; } .single-input-item input, .single-input-item textarea { font-size: 14px; border: 1px solid #e7e7e7; display: block; outline: none; padding: 15px 20px; -webkit-transition: 0.2s; -o-transition: 0.2s; transition: 0.2s; width: 100%; } .single-input-item input:focus, .single-input-item textarea:focus { border-color: #fdc657; } .single-input-item .nice-select { border-width: 1px; line-height: 10px; height: 52px; width: 100%; } .single-input-item .nice-select .current { font-weight: 400; } .single-input-item .nice-select .list { font-size: 13px; max-height: 200px; overflow: auto; } .single-input-item .nice-select .list::-webkit-scrollbar { width: 4px; } .checkout-box-wrap { font-size: 13px; color: #8d8d8d; } .checkout-box-wrap .account-create, .checkout-box-wrap .ship-to-different { display: none; } .order-details-area-wrap { border: 2px solid #e7e7e7; padding: 50px; margin-top: 50px; color: #8d8d8d; font-size: 13px; } @media only screen and (max-width: 575.98px) { .order-details-area-wrap { padding: 30px 20px; } } @media only screen and (max-width: 767.98px), only screen and (min-width: 768px) and (max-width: 991.98px) { .order-details-area-wrap { margin-top: 30px; } } .order-details-area-wrap h2 { font-weight: 600; font-size: 20px; line-height: 1; position: relative; padding-bottom: 15px; margin-bottom: 35px; } @media only screen and (max-width: 767.98px) { .order-details-area-wrap h2 { margin-bottom: 26px; } } .order-details-area-wrap h2:before { background-color: #222222; content: ''; position: absolute; left: 0; bottom: 0; height: 2px; width: 50px; } .order-details-area-wrap .order-details-table { font-size: 13px; line-height: 1; white-space: nowrap; } .order-details-area-wrap .order-details-table .custom-control-label, .order-details-area-wrap .order-details-table th { font-size: 13px; font-weight: 400; } .order-details-area-wrap .order-details-table .table thead { border-bottom: 1px solid #e7e7e7; margin-bottom: 27px; } .order-details-area-wrap .order-details-table .table thead th { margin-bottom: 27px; } .order-details-area-wrap .order-details-table .table tbody { border-bottom: 1px solid #e7e7e7; } .order-details-area-wrap .order-details-table .table tbody .cart-item:first-child td { padding-top: 30px; } .order-details-area-wrap .order-details-table .table tbody .cart-item:last-child td { padding-bottom: 30px; } .order-details-area-wrap .order-details-table .table tfoot .shipping .shipping-method li { margin-bottom: 15px; } .order-details-area-wrap .order-details-table .table tfoot .shipping .shipping-method li:last-child { margin-bottom: 0; } .order-details-area-wrap .order-details-table .table tfoot .total-amount { font-size: 20px; } .order-details-area-wrap .order-details-table .table tfoot tr { border-bottom: 1px solid #e7e7e7; } .order-details-area-wrap .order-details-table .table tr td, .order-details-area-wrap .order-details-table .table tr th { padding: 15px 0; color: #000; } .order-details-area-wrap .order-details-table .table tr td:last-child, .order-details-area-wrap .order-details-table .table tr th:last-child { text-align: right; } .order-details-area-wrap .order-details-table .product-title .product-quantity { color: #8d8d8d; font-size: 14px; } .order-details-area-wrap .order-details-footer { margin-top: 16px; } .order-details-area-wrap .order-details-footer .custom-control .custom-control-label { font-size: 12px; } .order-details-area-wrap .order-details-footer .custom-control .custom-control-label:before { top: 4px; } .order-details-area-wrap .order-details-footer .custom-control .custom-control-label:after { top: 3px; } .shipping-method .custom-control .custom-control-label:after { left: -22px; } /*========================================== 68. Start Tracking Order Page Wrapper ===========================================*/ /*=============================== Start Preloader Wrap ================================*/ .preloader-active { position: fixed; top: 0; left: 0; overflow: hidden; height: 100vh; width: 100vw; z-index: 99999; } .preloader-active .preloader-area-wrap { background-color: #fff; position: absolute; left: 0; display: block; top: 0; height: 100%; width: 100%; z-index: 999999; } .preloader-active .preloader-area-wrap .spinner div { background-color: #222222; border-radius: 50%; width: 20px; height: 20px; -webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both; animation: sk-bouncedelay 1.4s infinite ease-in-out both; } .preloader-active .preloader-area-wrap .spinner div.bounce1 { -webkit-animation-delay: -0.32s; animation-delay: -0.32s; } .preloader-active .preloader-area-wrap .spinner div.bounce2 { -webkit-animation-delay: -0.16s; animation-delay: -0.16s; } @-webkit-keyframes sk-bouncedelay { 0%, 80%, 100% { -webkit-transform: scale(0); transform: scale(0); } 40% { -webkit-transform: scale(1); transform: scale(1); } } @keyframes sk-bouncedelay { 0%, 80%, 100% { -webkit-transform: scale(0); transform: scale(0); } 40% { -webkit-transform: scale(1); transform: scale(1); } } .preloader-area-wrap { display: none; } /*============================== Start Footer Area Wrapper ============================*/ .footer-widget-wrapper { background-color: #0c2542; color: #aaaaaa; } .bg-tech { background-color: #0c2542; } .footer-widget-wrapper a { color: #aaaaaa; } .single-widget-wrap { margin-top: 45px; } .single-widget-wrap .widget-title { color: #fff; font-size: 20px; line-height: 1; font-weight: 600; text-transform: uppercase; position: relative; padding-bottom: 30px; margin-bottom: 33px; margin-top: -3px; } .single-widget-wrap .widget-title:before { background-color: #fdc657; content: ""; position: absolute; left: 0; bottom: 0; -webkit-transition: 0.4s; -o-transition: 0.4s; transition: 0.4s; height: 3px; width: 35px; } .single-widget-wrap:hover .widget-title:before { width: 50px; } .widget-list li { margin-bottom: 15px; } .widget-list li:last-child { margin-bottom: 0; } .widget-list li a { position: relative; } .widget-list li a:before { background-color: #aaaaaa; content: ""; position: absolute; left: 0; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); -webkit-transition: 0.4s; -o-transition: 0.4s; transition: 0.4s; height: 1px; width: 10px; opacity: 0; visibility: hidden; } .widget-list li a:hover { padding-left: 15px; color: #fdc657; } .widget-list li a:hover:before { opacity: 1; visibility: visible; background-color: #fdc657; } .latest-blog-widget .single-blog-item { position: relative; padding-bottom: 30px; margin-bottom: 30px; } .latest-blog-widget .single-blog-item:after { background-color: #333333; content: ""; position: absolute; left: 0; bottom: 0; height: 3px; width: 35px; } .latest-blog-widget .single-blog-item:last-child { margin-bottom: 0; padding-bottom: 0; } .latest-blog-widget .single-blog-item:last-child:after { display: none; } .latest-blog-widget .single-blog-item h3 { font-size: 15px; line-height: 1.3; } .latest-blog-widget .single-blog-item h3 a { color: #cccccc; position: relative; -webkit-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; } .latest-blog-widget .single-blog-item h3 a:before { background-color: #aaaaaa; content: ""; position: absolute; left: 0; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); -webkit-transition: 0.4s; -o-transition: 0.4s; transition: 0.4s; height: 1px; width: 10px; opacity: 0; visibility: hidden; } .latest-blog-widget .single-blog-item h3 a:hover { padding-left: 15px; color: #fdc657; } .latest-blog-widget .single-blog-item h3 a:hover:before { opacity: 1; visibility: visible; background-color: #fdc657; } .latest-blog-widget .single-blog-item .post-date { color: #888888; } .latest-blog-widget .single-blog-item .post-date i.fa { color: #fdc657; margin-right: 10px; } .newsletter-form-wrap form { position: relative; } .newsletter-form-wrap form input { background-color: #444444; border: none; color: #cccccc; display: block; padding: 12px 40px 13px 15px; outline: none; width: 100%; } .newsletter-form-wrap form .btn-newsletter { color: #fdc657; font-size: 14px; line-height: 1; position: absolute; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); right: 10px; } /* Start Footer Bottom Area */ .footer-bottom-area { background-color: #333333; padding: 40px 0; } @media only screen and (max-width: 575.98px) { .footer-bottom-area { padding: 25px 0; } } .footer-copyright-area { font-size: 14px; color: #aaaaaa; } .footer-copyright-area p { margin-bottom: 0; } @media only screen and (max-width: 767.98px) { .footer-copyright-area p { font-size: 13px; } } .footer-social-icons a { color: #aaaaaa; font-size: 20px; line-height: 1; margin-left: 30px; } .footer-social-icons a:first-child { margin-left: 0; } @media only screen and (max-width: 767.98px) { .footer-social-icons a { font-size: 16px; } } .footer-social-icons a:hover { color: #fdc657; } .footer-wrapper.layout--2 { padding: 60px 0 50px; } @media only screen and (min-width: 768px) and (max-width: 991.98px) { .footer-wrapper.layout--2 { padding: 30px 0 23px; } } @media only screen and (max-width: 767.98px) { .footer-wrapper.layout--2 { padding: 20px 0; } } .footer-wrapper.layout--2 .footer-middle h3 { font-size: 26px; font-weight: 500; line-height: 1; } @media only screen and (min-width: 768px) and (max-width: 991.98px) { .footer-wrapper.layout--2 .footer-middle h3 { font-size: 20px; } } .footer-wrapper.layout--2 .footer-copyright-area { color: #222222; } .footer-wrapper.layout--2 .footer-social-icons a { color: #222222; } .footer-wrapper.layout--2 .footer-social-icons a:hover { color: #fdc657; } .footer-wrapper.footer-white { color: #878787; } .footer-wrapper.footer-white a { color: #878787; } .footer-wrapper.footer-white .footer-widget-wrapper { background-color: #fff; } .footer-wrapper.footer-white .footer-widget-wrapper .widget-title { color: #222222; } .footer-wrapper.footer-white .latest-blog-widget .single-blog-item:after { background-color: #eeeeee; } .footer-wrapper.footer-white .latest-blog-widget .single-blog-item a { color: #878787; } .footer-wrapper.footer-white .newsletter-form-wrap input { background-color: #eeeeee; color: #222222; } .footer-wrapper.footer-white .newsletter-form-wrap button { color: #222222; } .footer-wrapper.footer-white .footer-bottom-area { background-color: #fff; padding: 0; } .footer-wrapper.footer-white .footer-bottom-area .footer-bottom-content { border-top: 1px solid #eeeeee; padding: 40px 0; } @media only screen and (max-width: 575.98px) { .footer-wrapper.footer-white .footer-bottom-area .footer-bottom-content { padding: 25px 0; } } .footer-wrapper.layout--3 { background-color: #111111; height: 100vh; position: relative; z-index: 1; } @media only screen and (min-width: 768px) and (max-width: 991.98px) { .footer-wrapper.layout--3 { height: 50vh; } } @media only screen and (max-width: 767.98px) { .footer-wrapper.layout--3 { height: auto; } } .footer-wrapper.layout--3 .footer-three-content h2 { font-size: 80px; font-weight: 600; line-height: 1; } .footer-wrapper.layout--3 .footer-three-content h2 a { color: #fff; } @media only screen and (min-width: 768px) and (max-width: 991.98px) { .footer-wrapper.layout--3 .footer-three-content h2 { font-size: 60px; } } @media only screen and (max-width: 767.98px) { .footer-wrapper.layout--3 .footer-three-content h2 { font-size: 30px; } } @media only screen and (max-width: 479.98px) { .footer-wrapper.layout--3 .footer-three-content h2 { font-size: 20px; } } @media only screen and (min-width: 768px) and (max-width: 991.98px), only screen and (max-width: 767.98px) { .footer-wrapper.layout--3 .footer-three-content .newsletter-form-wrap.w-50 { width: 100% !important; } } .footer-wrapper.layout--3 .footer-three-content .newsletter-form-wrap input { background-color: #444444; color: #fff; } .footer-wrapper.layout--4 { background-color: #222222; color: #aaaaaa; padding: 100px 0; } @media only screen and (min-width: 768px) and (max-width: 991.98px) { .footer-wrapper.layout--4 { padding: 80px 0; } } @media only screen and (max-width: 767.98px) { .footer-wrapper.layout--4 { padding: 60px 0; } } .footer-wrapper.layout--4 a { color: #aaa; } .footer-wrapper.layout--4 a:hover { color: #fdc657; } .footer-wrapper.layout--4 .footer-contact-information [class*='col-']:first-child { border-right: 1px solid rgba(255, 255, 255, 0.1); } .single-footer-con-info { line-height: 2; margin-top: 30px; } .single-footer-con-info h2 { color: #fff; font-size: 40px; font-weight: 600; line-height: 1; margin-bottom: 26px; } @media only screen and (max-width: 767.98px) { .single-footer-con-info h2 { font-size: 30px; margin-bottom: 15px; } } .single-footer-con-info a { display: block; } .single-footer-con-info p { margin-bottom: 0; } .footer-bottom-left a { color: #fff !important; font-size: 26px; font-weight: 600; line-height: 1; } .footer-social-icons.icons-rounded a { background-color: #444444; border-radius: 50%; line-height: 45px; text-align: center; margin-left: 10px; font-size: 14px; height: 45px; width: 45px; } /*========================================== Start Demo Panel Style CSS ===========================================*/ .demo-panel-wrap { background-color: #fff; -webkit-box-shadow: -3px 0 50px -2px rgba(0, 0, 0, 0.14); box-shadow: -3px 0 50px -2px rgba(0, 0, 0, 0.14); position: fixed; top: 0; right: 0; height: 100vh; width: 350px; max-width: 80%; -webkit-transition: 0.4s; -o-transition: 0.4s; transition: 0.4s; -webkit-transform: translateX(100%); -ms-transform: translateX(100%); transform: translateX(100%); z-index: 99999; } .demo-panel-wrap.open { -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } .demo-panel-wrap.open .demo-panel-content:before { opacity: 0; visibility: hidden; } .demo-panel-inner { position: relative; overflow-x: auto; height: 100%; } .demo-panel-inner::-webkit-scrollbar-track { background-color: #f4f4f4; -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3); box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3); } .demo-panel-inner::-webkit-scrollbar { background-color: #f4f4f4; width: 5px; } .demo-panel-inner::-webkit-scrollbar-thumb { background-color: #fdc657; border: 1px solid #fdc657; } .demo-panel-content { padding: 60px 30px; position: relative; } .demo-panel-content:before { content: ""; background: transparent; position: absolute; left: 0; top: 0; -webkit-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; -webkit-transition-delay: 0.6s; -o-transition-delay: 0.6s; transition-delay: 0.6s; height: 100%; width: 100%; z-index: 1; } .demo-panel-toolbar { -webkit-box-shadow: -3px 0 10px -2px rgba(0, 0, 0, 0.1); box-shadow: -3px 0 10px -2px rgba(0, 0, 0, 0.1); background: #fff; position: absolute; border-radius: 5px 0 0 5px; border-right: 0; color: #000; display: block; font-size: 18px; padding: 20px 0; top: 250px; right: 100%; text-align: center; width: 40px; } .demo-panel-toolbar:before { content: 'All Demos'; color: #222222; position: absolute; -webkit-transform: rotate(90deg); -ms-transform: rotate(90deg); transform: rotate(90deg); width: 80px; top: -80px; left: -23px; font-size: 12px; text-transform: uppercase; font-weight: 700; letter-spacing: 0.08em; text-shadow: 0 0 5px rgba(0, 0, 0, 0.3); } .demo-panel-toolbar:after { content: '\f107'; font-family: "FontAwesome"; color: #fdc657; position: absolute; top: -40px; font-size: 28px; line-height: 1; left: 8px; -webkit-animation: updown 1s infinite; animation: updown 1s infinite; } .demo-panel-toolbar a { color: inherit; display: block; margin-bottom: 15px; } .demo-panel-toolbar a:last-child { margin-bottom: 0; } .demo-panel-head { font-size: 16px; } .demo-panel-head .btn-bordered, .demo-panel-head .btn-black, .demo-panel-head .single-banner-wrap:nth-child(2n) .btn-bordered:hover, .single-banner-wrap:nth-child(2n) .demo-panel-head .btn-bordered:hover { margin-bottom: 30px; padding: 15px 30px; } .demo-panel-demo .row { margin-left: -10px; margin-right: -10px; } .demo-panel-demo .row [class*="col"] { padding-left: 10px; padding-right: 10px; } .demo-panel-demo .demo-pic { border-radius: 5px; -webkit-box-shadow: 0 7px 20px rgba(0, 0, 0, 0.1); box-shadow: 0 7px 20px rgba(0, 0, 0, 0.1); overflow: hidden; -webkit-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; margin-top: 20px; max-width: 150px; margin-left: auto; margin-right: auto; } .demo-panel-demo .demo-pic:hover { -webkit-transform: translateY(-3px); -ms-transform: translateY(-3px); transform: translateY(-3px); -webkit-box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2); box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2); } .tippy-popper .tippy-tooltip.tomato-theme { background-color: #222222; color: #fff; } .tippy-popper[x-placement^='top'] .tippy-tooltip.tomato-theme .tippy-arrow { border-top-color: #222222 !important; } @-webkit-keyframes updown { 0% { top: -40px; } 50% { top: -35px; } 100% { top: -40px; } } @keyframes updown { 0% { top: -40px; } 50% { top: -35px; } 100% { top: -40px; } } .demo-overlay { position: fixed; left: 0; top: 0; height: 100%; width: 100%; background: rgba(0, 0, 0, 0.7); cursor: url(../img/icons/cancel.png), auto; z-index: 9999; display: none; } .demo-fix { overflow: hidden; } .demo-fix .demo-overlay { display: block; } @media (max-width: 767px) { .main-menu>li { margin-right: 0px; line-height: normal; } } /* christmas */ .header-area-wrapper .logo-wrap { position: relative; } .christmas_hat { position: absolute; top: -70%; left: 4%; width: 30%; } .happynewyear_hat { position: absolute; left: 2%; width: 25%; top: -80px; } .sticky-header.sticky .christmas_hat, .sticky-header.sticky .happynewyear_hat { display: block !important; } .modal { text-align: center; padding: 0!important; } .modal:before { content: ''; display: inline-block; height: 100%; vertical-align: middle; margin-right: -4px; /* Adjusts for spacing */ } .modal-dialog { display: inline-block; text-align: left; vertical-align: middle; }