:root { --main-color: #e5a812; } /*==== Common css start ====*/ html { background-color: #eaeaea; } body { position: relative; margin: 0 auto; padding: 0; font-family: "Helvetica LT Std"; background: #f1f1f1; color: #000; font-weight: 500; overflow-x: hidden; max-width: 1920px; } @media screen and (max-device-width: 1023px) { body { padding-top: 63px; -webkit-text-size-adjust: none; } } /*text styling start*/ a { color: #303030; -webkit-transition: all 600ms ease; -o-transition: all 600ms ease; transition: all 600ms ease; } a:hover, a:focus { outline: none; text-decoration: none; -webkit-transition: all 600ms ease; -o-transition: all 600ms ease; transition: all 600ms ease; } h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { margin-top: 0px; line-height: 1.3; } h1, .h1 { font-size: 36px; } h2, .h2 { font-size: 30px; } h3, .h3 { font-size: 26px; } h4, .h4 { font-size: 20px; } h5, .h5 { font-size: 18px; } h6, .h6 { font-size: 16px; } p { line-height: 1.5; font-size: 16px; margin-bottom: 10px; font-family: "Helvetica LT Std"; } label { font-size: 15px; } @media (min-width: 1024px) { h1, .h1 { font-size: 42px; } h2, .h2 { font-size: 36px; } h3, .h3 { font-size: 30px; } h4, .h4 { font-size: 24px; } h5, .h5 { font-size: 20px; } h6, .h6 { font-size: 18px; } } ul li, ol li { line-height: 1.5; } .btn { border-radius: 3px; } .btn, .btn:hover, .btn:focus, .btn:active { outline: none !important; text-decoration: none; /* Firefox */ /* WebKit */ /* Opera */ /* Standard */ -webkit-transition: all 600ms ease; -o-transition: all 600ms ease; transition: all 600ms ease; -webkit-box-shadow: none; box-shadow: none; } .btn-lg { border-radius: 3px; font-size: 16px; } .btn-lg.btn-block { font-size: 18px; } .btn-main { border: 1px solid #e5a812; background: rgba(255, 255, 255, 0.3); color: #e5a812 !important; position: relative; overflow: hidden; z-index: 1; display: inline-block; padding: 0.5rem 1rem; } .btn-main, .btn-main::after { -webkit-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; } .btn-main:hover { color: #fff !important; } .btn-main::before, .btn-main::after { background: #e5a812; content: ""; position: absolute; z-index: -1; } .btn-main::after { height: 100%; left: 0; top: 0; width: 0; } .btn-main:hover:after { width: 100%; } .btn-main-warning { border: 1px solid #e5a812; background: #e5a812; color: #fff; position: relative; overflow: hidden; z-index: 1; display: inline-block; padding: 0.5rem 1rem; } .btn-main-warning, .btn-main-warning::after { -webkit-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; } .btn-main-warning:hover { color: #e5a812; } .btn-main-warning::before, .btn-main-warning::after { background: #fff; content: ""; position: absolute; z-index: -1; } .btn-main-warning::after { height: 100%; left: 0; top: 0; width: 0; } .btn-main-warning:hover:after { width: 100%; } .btn-main-reverse { border: 1px solid #fff; /* background: rgba(229, 169, 18, 1); */ color: #fff !important; position: relative; overflow: hidden; z-index: 1; display: inline-block; padding: 0.5rem 1rem; } .btn-main-reverse, .btn-main-reverse::after { -webkit-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; } .btn-main-reverse:hover { color: #e5a812 !important; } .btn-main-reverse::before, .btn-main-reverse::after { background: #fff; content: ""; position: absolute; z-index: -1; } .btn-main-reverse::after { height: 100%; left: 0; top: 0; width: 0; } .btn-main-reverse:hover:after { width: 100%; } .bg-main-light { background: rgba(229, 169, 18, 0.5); } a:hover, a:focus { color: #e5a812; } /*text styling end*/ /*image styling start*/ img { max-width: 100%; height: auto; } .img-full { width: 100%; height: auto; } .center-block { display: block; margin: 0 auto; } .img-pos { background-position: center center; background-repeat: no-repeat; background-size: cover; } /*image styling end*/ /*form styling start*/ .form-control { border-color: #e6e6e6; -webkit-box-shadow: none !important; box-shadow: none !important; outline: none; height: calc(2em + 0.75rem + 2px); } .form-control:focus { border-color: #e5a812; -webkit-box-shadow: none; box-shadow: none; } select.form-control:not([size]):not([multiple]) { height: 44px; } .form-control:disabled, .form-control[readonly] { background-color: #f8f9fa; opacity: 1; } .custom-file-label { border: 1px solid #e6e6e6; height: auto; line-height: 2; } .custom-file-input { position: relative; z-index: 2; width: 100%; margin: 0; opacity: 0; } .custom-file-label::after { background-color: #e5a812; color: white; text-align: center; line-height: 2; height: auto; } /* *form styling end*/ /*==== Common css end ====*/ /*==== Navigation css start ====*/ .body-nav a { font-size: 15px; } .body-nav i { font-size: 18px; } .bottom-navbar { display: block; } .navbar-links, .top-navbar { display: none; } .navbar-links a { color: rgb(158 158 158); } .navbar-links a:hover { color: #e5a812; } .navbar-links .right a:first-child { border-right: 1px solid rgba(0, 0, 0, 0.2); } .bottom-navbar .right { width: 100%; padding: 15px 0; } ul.nav-drop-options { -webkit-box-shadow: 0px 0px 80px 0px rgba(138, 147, 157, 0.14); box-shadow: 0px 0px 80px 0px rgba(138, 147, 157, 0.14); z-index: 1; top: 46px; min-width: 170px; } ul.nav-drop-options li { -webkit-transition: all 0.25s ease; -o-transition: all 0.25s ease; transition: all 0.25s ease; } ul.nav-drop-options li a { font-size: 13px; text-decoration: none; color: #9a9da6 !important; font-weight: 400; background: #fff; } .wsmainwp { margin: 0 auto; max-width: 1140px; } @media (min-width: 920px) { .bottom-navbar a span::after { line-height: 1; top: 35%; right: -15px; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; border-color: rgba(136, 183, 213, 0); border-top-color: #000; border-width: 4px; -webkit-transition: all 600ms ease; -o-transition: all 600ms ease; transition: all 600ms ease; } .bottom-navbar a:hover span::after { border-top-color: #e5a812; -webkit-transform: rotate(-90deg); -ms-transform: rotate(-90deg); transform: rotate(-90deg); } } @media (max-width: 1023px) { header { width: 100%; right: -100%; height: 100%; position: fixed; top: 0; margin: 0; float: none; border-radius: 0px; z-index: 6; padding-top: 80px; -webkit-transition: all 0.4s ease-in-out; -o-transition: all 0.4s ease-in-out; transition: all 0.4s ease-in-out; border: none !important; background-color: #fff !important; } header.show { right: 0px; -webkit-transition: all 0.4s ease-in-out; -o-transition: all 0.4s ease-in-out; transition: all 0.4s ease-in-out; overflow: scroll; } } @media (min-width: 1024px) { .top-navbar { border-bottom: 3px solid #e5a812; height: 30px; } .navbar-links, .top-navbar { display: block; } .main-navbar-header { position: relative; } .bottom-navbar { display: -webkit-box; display: -ms-flexbox; display: flex; } .bottom-navbar .right a.border-top-main { border-top: 3px solid; } .bottom-navbar .right .border-top-right { padding-top: 17px; } .bottom-navbar .right { /* width: 360px; */ padding: 0; justify-content: flex-end; } } .bottom-navbar .right a.border-top-main img { height: 20px; margin-top: -8px; } /*==== Navigation css end ====*/ /* .search-modal .container { height: 100%; display: flex; align-items: center; } .search-form { display: flex; width: 100%; max-width: 900px; margin: 0 auto; border-bottom: 1px solid #ccc; } .search-form input { width: calc(100% - 50px); background-color: transparent; box-shadow: none; border: none; outline: none !important; padding: 10px 15px; font-size: 18px; color: #fff; font-weight: 300; } .search-form input::-webkit-input-placeholder { color: rgba(255, 255, 255, 0.8) !important; } .search-form input:-moz-placeholder { color: rgba(255, 255, 255, 0.8) !important; } .search-form input::-moz-placeholder { color: rgba(255, 255, 255, 0.8) !important; } .search-form input:-ms-input-placeholder { color: rgba(255, 255, 255, 0.8) !important; } */ /* .btn.pop-search-btn { width: 50px; height: 50px; background: transparent !important; outline: none !important; padding: 15px; } @media (min-width: 768px) { .search-form input { width: calc(100% - 90px); } .btn.pop-search-btn { width: 90px; height: 90px; } } */ /*footer css start*/ .bg-gray { background-color: #231f20; } .footer ul li a { color: white; } .footer .bg-warning li a:hover { color: #fff; } .footer ul li::before { display: none; } .bg-gray { background-color: #231f20; } .bg-gray-dark { background-color: #1d1c1a; } .footer ul li a { color: white; } .footer p { font-size: 15px; line-height: 1.7; } .social-icons a { font-size: 19px; } footer .social-icons a:hover { color: #e5a812 !important; } footer .footer-logo-wrapper a { margin-right: 1rem; } footer .footer-logo-wrapper a img { height: 70px; background: white; } /*footer css end*/ /*select 2 style start*/ .select2-container { width: 100% !important; } .select2-container--default .select2-selection--single { background-color: #fff !important; border-color: #e6e6e6 !important; border-radius: 0px; height: 46px !important; } .select2-container--default .select2-selection--single .select2-selection__rendered { color: #555 !important; line-height: 46px !important; } .select2-container--default .select2-selection--single .select2-selection__arrow { height: 46px !important; } .select2-container--default .select2-selection--single .select2-selection__arrow b { border-color: #555 transparent transparent transparent; } /*select 2 style end*/ /*common slick slide css start*/ .slick-initialized .slick-slide:focus { outline: none; } /*common slick slide css end*/ /*popup style start*/ .pop-open { overflow: hidden; } .pop-open .body-wrap { -webkit-filter: blur(5px); filter: blur(5px); } .search-modal { padding: 50px 0; background: rgba(0, 125, 156, 0.9); } .pop-modal { /* by default it's hidden - on top of the viewport */ position: fixed; left: 0; top: 0; height: 100%; width: 100%; z-index: 1000; -webkit-backface-visibility: hidden; backface-visibility: hidden; overflow: auto; /* this fixes the buggy scrolling on webkit browsers - mobile devices only - when overflow property is applied */ -webkit-overflow-scrolling: touch; -webkit-transform: translateY(-100%); -ms-transform: translateY(-100%); transform: translateY(-100%); -webkit-transition-property: -webkit-transform; transition-property: -webkit-transform; -o-transition-property: transform; transition-property: transform; transition-property: transform, -webkit-transform; -webkit-transition-duration: 0.4s; -o-transition-duration: 0.4s; transition-duration: 0.4s; } .pop-modal.active { -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } .pop-modal .container { position: relative; } .pop-close { height: 55px; width: 55px; background: transparent !important; outline: none !important; position: absolute; right: 0; top: 0; } .pop-modal .btn svg { width: 100%; height: 100%; } /*popup style end*/ /* Section Location */ .section-location h6 { letter-spacing: 2px; } .section-location .map-info { background: #f1f1f1; z-index: 0; -webkit-transition: all 300ms ease; -o-transition: all 300ms ease; transition: all 300ms ease; } @media all and (min-width: 992px) { .section-location .map-info a { margin-top: 30px !important; } } .section-location .map-info:hover { background-color: rgb(253, 253, 253); } .section-location .map-info a span { transition: all 0.2s linear; display: block; padding-left: 0px; display: block; position: relative; top: -6px; font-size: 20px; } .arrow:after { content: " "; position: absolute; height: 20px; width: 20px; background-color: #babbbc; top: 50%; transform: rotate(45deg) translateY(-65%); left: 2px; z-index: -1; } .section-location .map-info a:hover span { -webkit-transform: translateX(5px); -ms-transform: translateX(5px); transform: translateX(5px); } @media (min-width: 1024px) { .section-skew::before { content: ""; position: absolute; height: 25em; width: 100%; bottom: -20.5em; left: 0; background: #f1f1f1; -webkit-clip-path: polygon(0 0, 100% 1%, 100% 100%, 0 70%); clip-path: polygon(0 0, 100% 1%, 100% 100%, 0 70%); } } /*page loader style end*/ /* last visited start */ .last-visited { bottom: 30px; /* left: 1rem; */ left: 4rem; z-index: 1; } .last-visited.resp { left: -100%; -webkit-transition: all 0.2s linear; -o-transition: all 0.2s linear; transition: all 0.2s linear; } .last-visited.resp.active { left: 4rem; } .last-visited>div { border-radius: 0px; font-size: 10px; -webkit-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.2); box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.2); } .last-visited.remove { display: none; } .last-visited .btn { border-radius: 40px; top: -10px; right: -15px; height: 30px; width: 30px; } .moblastvisited { position: fixed; bottom: 2rem; left: 10px; z-index: 2; /* display: none; */ -webkit-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.2); box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.2); display: flex; padding: 1.5px 1px 1px 1px; border-radius: 50%; background: white; align-items: center; } .moblastvisited .fa-clock { font-size: 30px; color: #e5a812; } /* @media screen and (max-width: 426px) { .moblastvisited { display: block; } } */ /* last visited end */ /*Product Lead Popup */ .popupModal .modal-body { max-height: 640px; overflow-y: auto; } .popupModal.styled-modal:not(.fullscreen-modal) .modal-content { /* height: 90vh */ } .popupModal.styled-modal:not(.fullscreen-modal) .modal-body { /* text-align: center; */ max-height: fit-content; } .popupModal.styled-modal:not(.fullscreen-modal) .modal-body>* { /* text-align: center; */ /* position: relative; height: 100%; width: 100%; */ margin: 0; } .popupModal.styled-modal:not(.fullscreen-modal) .modal-body img { /* height: 600px; */ /* height: 100%; position: absolute; left: 0; top: 0; width: 100%; */ } .popupModal.styled-modal:not(.fullscreen-modal) .modal-dialog { max-width: initial; width: 40vw; min-width: 300px; margin: 55px auto; } @media screen and (max-width:1199px) { .popupModal.styled-modal:not(.fullscreen-modal) .modal-dialog { width: 90vw; } } .styled-modal .btn.position-absolute { top: -10px; right: -10px; z-index: 3; width: 40px; height: 40px; border-radius: 50%; } .fullscreen-modal .styled-modal .btn.position-absolute { top: -10px; right: -10px; z-index: 3; } .fullscreen-modal .modal-dialog { max-width: 100vw; margin: 0; margin-right: -17px; } .fullscreen-modal .modal-dialog .modal-body { height: 99.5vh; max-height: 99.5vh; padding: 0; } .fullscreen-modal .modal-content { border-radius: 0 !important; border: 0; } .fullscreen-modal .modal-dialog .btn.position-absolute { top: 10px; right: 10px; } .fullscreen-modal .modal-body img { width: 60%; height: auto; display: block; margin: 0 auto; } .lead-modal .uiform-main-form .rockfm-heading { font-weight: unset !important; color: #e5a812 !important; } .lead-modal .uiform-main-form { background: #f8f9fa !important; -webkit-box-shadow: none !important; box-shadow: none !important; padding: 0 !important; color: #000 !important; } .lead-modal .uiform-main-form .sfdc-btn { color: white !important; background: #e5a812 !important; } #rockfm_form_1 #rockfm_uidoqjbvroe .rockfm-input-container { text-align: center !important; } #rockfm_form_1 #rockfm_uip3cdujm1h .rockfm-label { font-family: inherit !important; } .sfdc-wrap .sfdc-form-control { border-radius: 3px !important; box-shadow: none !important; -webkit-box-shadow: none !important; } .sfdc-wrap .sfdc-form-control:focus { border-color: #ffd05d !important; outline: 0; box-shadow: none !important; -webkit-box-shadow: none !important; } .sfdc-wrap .glyphicon { font-family: "Font Awesome 5 Free" !important; font-size: 19px !important; padding-left: 3px !important; } #rockfm_uiwyuj7xiuo .rockfm-input-container { text-align: right !important; } /*Product Lead Popup End */ /* search style */ .search-box { position: absolute; top: 35px; right: 68%; z-index: 1; display: none; } .search-box:before { content: ""; border: 5px solid #e5a812; position: absolute; top: -10px; right: 15px; border-color: transparent; border-bottom-color: #e5a812; } .search-box input { border: 1px solid #e5a812; outline: none; -webkit-box-shadow: none; box-shadow: none; border-radius: 0px; text-indent: 5px; } .search-box input:focus { outline: #e5a812; } /* sticky icons */ .sticky-links { top: 200px; right: -230px; z-index: 99; background: rgba(0, 0, 0, 0.6); padding: 10px 15px; width: 222px; transition: all 0.5s ease; z-index: 5; } .sticky-links.active { right: 0; } .sticky-toggler { float: left; cursor: pointer; width: 60px; height: 42px; background-repeat: no-repeat; background-position: 9px center; margin: 0 0; position: absolute; left: -60px; top: 20px; border-radius: 20px 0 0 20px; background-color: rgba(0, 0, 0, 0.6); overflow: hidden; } .dot-floating { position: relative; width: 10px; height: 10px; border-radius: 5px; background-color: #e5a812; color: #e5a812; animation: dotFloating 3s infinite cubic-bezier(0.15, 0.6, 0.9, 0.1); } .dot-floating::before, .dot-floating::after { content: ""; display: inline-block; position: absolute; top: 0; } .dot-floating::before { left: -12px; width: 10px; height: 10px; border-radius: 5px; background-color: #e5a812; color: #e5a812; animation: dotFloatingBefore 3s infinite ease-in-out; } .dot-floating::after { left: -24px; width: 10px; height: 10px; border-radius: 5px; background-color: #e5a812; color: #e5a812; animation: dotFloatingAfter 3s infinite cubic-bezier(0.4, 0, 1, 1); } @keyframes dotFloating { 0% { left: calc(-50% - 5px); } 75% { left: calc(50% + 105px); } 100% { left: calc(50% + 105px); } } @keyframes dotFloatingBefore { 0% { left: -50px; } 50% { left: -12px; } 75% { left: -50px; } 100% { left: -50px; } } @keyframes dotFloatingAfter { 0% { left: -100px; } 50% { left: -24px; } 75% { left: -100px; } 100% { left: -100px; } } .sticky-contents>*:not(:last-child) { margin-bottom: 8px; } /* loader */ .splash-logo { position: absolute; left: 50%; top: 45%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); -webkit-animation: fade 2s linear; animation: fade 2s linear; } .loader_bg { position: fixed; z-index: 99999; width: 100vw; height: 100vh; overflow: hidden; background: #f5f5f5; top: 0; left: 0; } .progress-box { height: 0.2rem; overflow: hidden; font-size: 0.75rem; background-color: #f5f5f5; border-radius: 0.25rem; position: absolute; top: 0; left: 0; width: 100%; } .progress-box-bar { -webkit-animation-duration: 3s; animation-duration: 3s; -webkit-animation-name: width; animation-name: width; background-color: #e5a812; background-size: 24em 0.25em; height: 100%; position: relative; } @-webkit-keyframes width { 0%, 100% { -webkit-transition-timing-function: cubic-bezier(1, 0, 0.65, 0.85); transition-timing-function: cubic-bezier(1, 0, 0.65, 0.85); } 0% { width: 0; } 100% { width: 100%; } } @keyframes width { 0%, 100% { -webkit-transition-timing-function: cubic-bezier(1, 0, 0.65, 0.85); -o-transition-timing-function: cubic-bezier(1, 0, 0.65, 0.85); transition-timing-function: cubic-bezier(1, 0, 0.65, 0.85); } 0% { width: 0; } 100% { width: 100%; } } /* offer-card */ .offer-stickycard { bottom: 25%; left: 0; z-index: 1; } .offer-stickycard a:hover { color: initial; } .offer-stickycard button { right: 5px; top: 5px; height: 25px; width: 25px; } /* stock card */ .stock-wrap { position: fixed; right: 0; /* top: 30%; */ top: 29vh; -moz-transform: translateX(100%) translateX(-45px); -o-transform: translateX(100%) translateX(-45px); -webkit-transform: translateX(100%) translateX(-45px); -ms-transform: translateX(100%) translateX(-45px); transform: translateX(100%) translateX(-45px); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-transition: all 0.2s linear; -o-transition: all 0.2s linear; transition: all 0.2s linear; z-index: 5; } .stock-btn { width: 45px; height: 45px; font-size: 22px; -webkit-box-shadow: 0 2px 6px rgba(0, 0, 0, 0.16); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.16); color: #ffffff; border-radius: 5px; } .stock-wrap.activated { -webkit-transform: translateX(0%) translateX(0); -ms-transform: translateX(0%) translateX(0); transform: translateX(0%) translateX(0); right: 0; } .stock-wrap.activated .stock-btn { border-radius: 5px; } .stock-wrap.activated .stock-card { margin-left: 0; } .stock-card { background: #e5a812; padding: 0.5rem; -webkit-box-shadow: 0 2px 6px rgba(0, 0, 0, 0.16); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.16); /* margin-left: 10px; */ } .stock-card.activated { -webkit-transform: translate(0%, -50%); -ms-transform: translate(0%, -50%); transform: translate(0%, -50%); } .stock-card-top { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding: 5px; background: white; } .stock-card-label { font-size: 12px; } .stock-card-text { font-size: 14px; } .stock-card-date { font-size: 12px; } @media screen and (max-width: 500px) { .stock-card-top { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .stock-card-top>div { width: 100%; -webkit-box-orient: horizontal !important; -webkit-box-direction: normal !important; -ms-flex-direction: row !important; flex-direction: row !important; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .stock-card-top .border-left { border: none !important; padding-left: 0 !important; } } /* form-design */ .uiform-main-form { background: #ffffff; box-shadow: 3px 3px 10px #cccccc; padding: 20px 17px 20px 17px; } /* .uiform-main-form .sfdc-btn { color: #fff; background-color: #f0ad4e; border-color: #eea236; } */ .uiform-main-form .sfdc-btn { color: #fff; background-color: #e5a812; border-color: #e5a812; border-radius: 0 !important; } .uiform-main-form .uiform-step-list { margin-bottom: 100px; } /* form-builder progress step design*/ .uiform-main-form { z-index: 1 !important; } .uiform-steps { list-style: none !important; padding: 0 !important; margin: 0 !important; counter-reset: step !important; } .uiform-steps li { position: relative !important; list-style: none !important; float: left !important; width: 20% !important; text-align: center !important; } .uiform-steps li:before { content: counter(step) !important; counter-increment: step !important; width: 40px !important; height: 40px !important; display: block !important; text-align: center !important; margin: 0 auto 10px auto !important; border-radius: 50% !important; background-color: white !important; line-height: 39px !important; color: #e5a812 !important; transform: none !important; position: inherit !important; top: 0 !important; border: 3px solid #e5a812; } .uiform-steps li:after { content: "" !important; position: absolute !important; width: 78% !important; height: 2px !important; background: #e5a812 !important; top: 20px !important; left: -39% !important; z-index: -1 !important; } .uiform-steps li:first-child:after { content: none !important; } .uiform-steps li a { color: #3e484c !important; } .uiform-steps li a .uifm-number { display: none !important; } /* mobile search */ .mobsearchwrap { 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; width: 100%; border-radius: 2px; border: 2px solid #e5a812; font-size: 12px; height: 40px; } .mobsearchwrap input { width: 100%; height: 100%; font-size: 14px; outline: none; padding: 10px; border: none; background: white; } .mobsearchwrap i { font-size: 16px; } .wsmobileheader { position: fixed; top: 0; z-index: 7; } /* global custom styling */ .fixed-img-height { min-height: 180px; -o-object-fit: cover; object-fit: cover; } .styled-bulletin ul { padding: 0; list-style: none; } .styled-bulletin ul li { position: relative; padding-left: 20px; padding-bottom: 10px; } .styled-bulletin a { text-decoration: underline; color: #e5a812; } .styled-bulletin ul li:before { width: 9px; height: 9px; position: absolute; top: 6px; left: 0; content: ""; background-color: #e5a812; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); } .styled-bulletin ul>li ul { margin-top: 10px; } .styled-bulletin ul>li ul li { padding-bottom: 0; } .styled-bulletin ul>li ul li:after { content: ""; width: 7px; height: 7px; position: absolute; top: 7px; left: 6px; background-color: #000000; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); opacity: 0.7; } .unstyled-bulletin li a { text-decoration: none !important; color: initial !important; } .unstyled-bulletin li { padding-left: 0px !important; padding-bottom: 0px !important; } .unstyled-bulletin li:before, .unstyled-bulletin li:after { content: none !important; } .navbar-link-mobile { display: none !important; } .navbar-link-mobile a { color: #666666; padding: 13px 32px 13px 12px; font-size: 14px; line-height: 25px; } span.language-toggle { margin-right: 10px; letter-spacing: 1px; border-radius: 4px; background-color: rgba(0, 0, 0, 0.1); padding: 4px 6px; font-weight: 600; font-size: 14px; position: absolute; width: auto; top: 50%; right: 50px; transform: translateY(-50%); } .language-toggle .active { color: #e5a812; } @media screen and (max-width: 1023px) { .navbar-link-mobile { display: block !important; } } /* scroll top */ #scroll-top { position: fixed; right: 1rem; bottom: 2rem; width: 32px; height: 32px; background-color: #333; display: none; border-radius: 50%; -webkit-border-radius: 50%; -moz-border-radius: 50%; z-index: 9999; -webkit-transition: 0.5s; -o-transition: 0.5s; transition: 0.5s; -webkit-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.2); box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.2); 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; color: #ffffff; font-weight: 600; font-size: 23px; /* border: 2px solid white; */ z-index: 5; } #scroll-top:hover { background-color: #e5a812; opacity: 1; filter: "alpha(opacity=100)"; -ms-filter: "alpha(opacity=100)"; color: #fff; } /* button */ .btn-shadow { -webkit-box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12) !important; box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12) !important; } .btn-shadow:hover { -webkit-box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12) !important; box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12) !important; } /* faq tab design */ #faq_div .accordian>.card-header button[aria-expanded="true"]>i { -webkit-transform: rotate(180deg); transform: rotate(180deg); } #faq_div .accordian>.card-header button[aria-expanded="false"]>i { -webkit-transform: rotate(0deg); transform: rotate(0deg); } /* gallery */ .styled-checkbox { position: absolute; opacity: 0; } .styled-checkbox+label { position: relative; cursor: pointer; padding: 0; } .styled-checkbox+label:before { content: ""; margin-right: 10px; display: inline-block; vertical-align: text-top; width: 20px; height: 20px; background: white; border: 1px solid #ddd; } .styled-checkbox:hover+label:before { background: #e5a812; } .styled-checkbox:focus+label:before { box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.12); } .styled-checkbox:checked+label:before { background: #e5a812; } .styled-checkbox:disabled+label { color: #b8b8b8; cursor: auto; } .styled-checkbox:disabled+label:before { box-shadow: none; background: #ddd; } .styled-checkbox:checked+label:after { content: ""; position: absolute; left: 5px; top: 9px; background: white; width: 2px; height: 2px; box-shadow: 2px 0 0 white, 4px 0 0 white, 4px -2px 0 white, 4px -4px 0 white, 4px -6px 0 white, 4px -8px 0 white; -webkit-transform: rotate(45deg); transform: rotate(45deg); } /* profile card */ .profile-card { -webkit-transition: all 0.2s linear; -o-transition: all 0.2s linear; transition: all 0.2s linear; background-size: cover !important; position: relative; overflow: hidden; } .profile-card-overlay { height: 400px; width: 400px; background-size: cover !important; position: absolute; top: -220px; left: -20%; border-radius: 50%; border: 5px solid white; } .card.profile-card:after, .card.profile-card:before { content: ""; height: 100px; width: 100px; background-color: #e5a812; position: absolute; transform: rotate(-45deg); box-shadow: 0 0 7px 2px rgba(0, 0, 0, 0.251); } .card.profile-card:before { top: 131px; right: -50px; } .card.profile-card:after { top: 21px; left: -50px; } .profile-card-img-holder { height: 150px; width: 150px; margin: 0 auto; overflow: hidden; position: relative; border-radius: 50%; box-shadow: 0 0 7px 2px rgba(0, 0, 0, 0.251); } .profile-card-img-holder img { object-fit: cover; height: 100%; width: 100%; } .profile-card .card-text { letter-spacing: 1px; } .wsshoptabing .container { padding: 0; } .wstabitem { background-color: #f2f2f2; } .fit-image { /* max-height: 180px; */ height: 180px; object-fit: cover; } /* slick nav design */ .featured-product-slide .slick-prev, .featured-product-slide .slick-next { top: -10px; } .featured-product-slide .slick-prev, .featured-product-slide .slick-next { color: #e5a812; opacity: 1; height: 40px; width: 40px; margin-top: -20px; z-index: 1; } .featured-product-slide .slick-prev path, .featured-product-slide .slick-next path { fill: #e5a812; } .featured-product-slide .slick-prev { right: 30px; } .featured-product-slide .slick-next { right: 0; } .featured-product-slide .slick-prev:before, .featured-product-slide .slick-next:before { content: none; } /* custom class */ .card-body-custom { display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start; } .wsmenu-list.top-nav { font-size: 15px; } .top-nav>li>a { /* color: #fff; */ border-top: unset; border-bottom: unset; font-size: 14px; } .top-nav>li:hover>a { border-top: unset; } .top-submenu { top: 50px; } .wsmenu-list li>.wsmenu-submenu { display: none; } ul.wsmenu-list.top-nav>li:last-of-type { margin-right: 15px; } /* language-switcher-css */ .lang_wrapper { /* width: 55px; */ z-index: 9; } .current_lang { cursor: pointer; } .lang { font-size: 14px; color: #e5a812; } .lang.selected { display: none !important; } .lang img { width: 20px; } .lang span.fa { font-size: 9px; margin-left: 2px; } .more_lang { transform: translateY(-20px); opacity: 0; cursor: pointer; display: none; -webkit-transition: all 0.3s cubic-bezier(0.25, 1.15, 0.35, 1.15); -moz-transition: all 0.3s cubic-bezier(0.25, 1.15, 0.35, 1.15); -o-transition: all 0.3s cubic-bezier(0.25, 1.15, 0.35, 1.15); -ms-transition: all 0.3s cubic-bezier(0.25, 1.15, 0.35, 1.15); transition: all 0.3s cubic-bezier(0.25, 1.15, 0.35, 1.15); } .lang_wrapper.active .more_lang { display: block; } .more_lang.active { opacity: 1; transform: translateY(-0px); } .lang_wrapper.active .more_lang .lang { width: 35px; background-color: white; border: 1px solid gray; padding: 2px 3px; /* margin-top: 5px; */ } .lang_wrapper.active .more_lang .lang:hover { background-color: #e5a812; color: #fff; } @media only screen and (max-width: 1023px) { .main-top a { margin-right: 0px !important; } .mid-header { display: none !important; } } .wsmenu-click .fa { color: #e5a812; } @media all and (min-width: 1440px) { .container-xxl { max-width: 1140px; margin: 0 auto; } } .card-aside { overflow: hidden; } .card-aside:after { content: ""; height: 200px; width: 200px; position: absolute; background-color: #dadada; transform: translateY(-50%); right: -140px; top: 50%; border-radius: 50%; border: 3px solid #e5a812; } .section-right { width: 60px; z-index: 1; height: 60px; min-height: 60px; min-width: 60px; overflow: hidden; margin-right: 4px; clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); } .section-right img { width: 100%; height: 100%; object-fit: cover; } .location-marker .fa-map-marker-alt { font-size: 14px; position: absolute; right: 30px; color: white; text-align: center; line-height: 1.8; } .location-marker .fa-map-marker-alt:before { height: 25px; width: 25px; background: #e5a812; animation-play-state: paused; position: absolute; border-radius: 50%; right: -18px; top: -8px; } #main-search { width: auto; } .sticky-contents .fa-phone { transform: rotate(95deg); } /* call us tag */ .callus-tagmob { display: block !important; height: auto !important; padding: 10px !important; position: fixed !important; bottom: 220px; right: 1rem; background: transparent !important; } .callus-tagmob svg { width: 30px !important; } .callus-container { top: 21px; right: 15px; z-index: 10; } .callus-wrapper { position: relative; } .callus-tag { background: white; padding: 0 8px; height: 30px; border-radius: 3px; transition: all 0.2s linear; position: relative; z-index: 5; } .callus-tag:hover { background: #e5a812; } .callus-tag:hover span { color: #ffffff; } /* .callus-tag:hover svg path { fill: #ffffff; } */ .callus-tag svg { width: 20px; } .callus-tag svg path { fill: #e5a812; } .callus-tag span { color: #e5a812; margin-left: 5px; font-size: 15px; margin-top: 5px; font-weight: 400; } blockquote { position: relative; max-width: 992px; padding: 0 15px; border-left: 5px solid #e5a812; } .megamenu-banner { object-fit: cover; width: 100%; } .jssocials-share-link { background: #1c1c1c !important; margin-left: 1px; } @media screen and (min-width: 992px) { .custom-card-4 { width: 16rem !important; } .custom-card-4 .profile-card-overlay { left: -28% !important; } } .mapbanner img { max-height: 350px; object-fit: cover; } .mapbanner .section-inner { background-color: rgba(0, 0, 0, 0.2) !important; position: absolute; left: 115px; max-width: 305px; width: 100%; top: 75px; padding: 32px 40px; } @media all and (max-width: 1024px) { .mapbanner .section-inner { top: 55px !important; left: 75px !important; padding: 32px 40px !important; } } @media all and (max-width: 768px) { .mapbanner .section-inner { left: 50px !important; top: 50px !important; max-width: 225px !important; padding: 20px 25px !important; } } @media all and (max-width: 426px) { .mapbanner .section-inner { padding: 10px !important; left: 15px !important; top: 15px !important; max-width: 150px !important; } .mapbanner .section-inner h4 { font-size: 14px; } } @media all and (max-width: 376px) { .mapbanner .section-inner { left: 6px !important; top: 6px !important; max-width: 142px !important; } } @media all and (max-width: 320px) { .mapbanner .section-inner { left: 3px !important; top: 3px !important; max-width: 125px !important; padding: 7px !important; } .mapbanner .section-inner h4 { font-size: 12px !important; } } /* heading color */ .sub-heading { color: #b5840e; } .online-partner-slider img { height: 50px; width: auto; object-fit: cover; } @media all and (max-width: 992px) { .online-partner-slider a { width: auto !important; } } .online-partner-slider .slick-list { margin: 0 -5px; } .online-partner-slider .slick-slide { padding: 0 5px; } .cta-arrow-right { position: absolute; top: 50%; right: 20px; transform: translateY(-50%); } .cta-arrow-right:after { content: none !important; } .cta-bgcolor:before { content: ""; position: absolute; background: #e6e6e6; top: 0px; width: calc(100% + 4px); height: 100%; left: 0; } .wsshoptabing.wtsdepartmentmenu.clearfix { height: auto !important; } .banner-overlay::after { content: " "; position: absolute; top: 0; left: 0; height: 100%; width: 100%; background: url("../../../frontend/img/BannerOverlay.svg") no-repeat; background-position: -25px; background-size: cover; border-top: 3px solid #e5a812; } .LangSelect { width: auto; } .search-from { min-width: 220px; padding: 0; border-radius: 0px; background-color: #e5a812; } .search-from input { background-color: #e5a812; color: #fff; outline: none; border: none; width: calc(100% - 55px); height: 40px; padding: 6px 12px; font-size: 12px; font-weight: 300; } .search-btn { position: absolute; right: 0; top: 0; height: 40px; padding: 8px; font-size: 15px; border: none; background-color: #e5a812; width: 40px; color: #fff; } #main-search-submit { padding: 6px 12px; } #main-search-submit:active, #main-search-submit:focus { border: 1px solid #e5a812; } .LangSelectMobile { height: 26px; font-size: 14px; color: #e5a812; top: 50%; right: 65px; transform: translateY(-50%); } /*CSS For Main Banner Slick Dots*/ #main-slide .slick-dots li button:before, .section-slider .slick-dots li button:before { width: 35px; height: 2px; border-radius: 0px; } .section-slider .slick-dots li button:before { background: #fff; } #main-slide .slick-dots li, .section-slider .slick-dots li { height: 2px; width: 20px; } #main-slide .slick-dots li button, .section-slider .slick-dots li button { border-radius: 0px; width: 20px; height: 2px; padding: 0; } #main-slide .slick-dots li button { border: #fff; } .section-slider .slick-dots li button { border: #e5a812; } #main-slide .slick-dots li.slick-active button, .section-slider .slick-dots li.slick-active button { height: 2px; width: 35px; } #main-slide .slick-dots li.slick-active, .section-slider .slick-dots li.slick-active { width: 35px; } #main-slide .slick-dots li.slick-active:not(:last-child), .section-slider .slick-dots li.slick-active:not(:last-child) { margin-right: 5px; } /*CSS For Main Banner Slick Dots*/ @media all and (min-width: 1024px) { .header-bg-white { height: 20px; background-color: #000; } .mid-header { margin-top: -10px; } } @media (min-width: 920px) { .bottom-navbar a .no-carat::after { border: 0; } } .tooltip .arrow:after { background-color: transparent; } .object-cover { object-fit: cover; } .sticky-opener { font-size: 19px; color: #fff; transform: translateY(3%); } .sticky-links.active .sticky-opener { transform: translateY(3%) rotate(180deg); } .sticky-toggler:hover .sticky-opener { animation: slideOpen 1.2s ease-in-out infinite; } .sticky-links.active .sticky-toggler:hover .sticky-opener { animation: slideClose 1.2s ease-in-out infinite; } @keyframes slideOpen { 0%, 100% { transform: translate(0px, 3%); } 50% { transform: translate(-10px, 3%); } } @keyframes slideClose { 0%, 100% { transform: translate(0px, 3%) rotate(180deg); } 50% { transform: translate(10px, 3%) rotate(180deg); } } #main-search .dropdown-menu { transform: translate3d(-285px, -10px, 0px) !important; } #main-search .dropdown-menu .input-group { filter: drop-shadow(0px 2px 3px rgba(113, 113, 113, 0.3)); } #main-search .dropdown-menu .btn-warning { border-radius: 0 26px 26px 0; } #main-search-submit { width: 280px !important; border-radius: 26px 0 0 26px; } /* form builder styling */ #rockfm_form_10 .rockfm-wiztheme1 .uiform-steps li:first-child::before { left: 0 !important; } #rockfm_form_10 .rockfm-wiztheme1 .uiform-steps li.uifm-current::before, #rockfm_form_10 .rockfm-wiztheme1 .uiform-steps li.uifm-complete::before, #rockfm_form_10 .rockfm-wiztheme1 .uiform-steps li.uifm-current .uifm-number, #rockfm_form_10 .rockfm-wiztheme1 .uiform-steps li.uifm-complete .uifm-number { border-color: #e5a812 !important; background-color: #e5a812 !important; } #rockfm_form_10 .rockfm-wiztheme1 .uiform-steps li::before { border-top: 3px solid #e5a812 !important; } #rockfm_form_10 .rockfm-btn-wiznext, #rockfm_form_10 #rockfm_uil45zgvtzg .rockfm-txtbox-inp-val { background-image: -webkit-linear-gradient(top, #f3c553, #e5a812) !important; background-image: -moz-linear-gradient(top, #f3c553, #e5a812) !important; background-image: -ms-linear-gradient(top, #f3c553, #e5a812) !important; background-image: -o-linear-gradient(top, #f3c553, #e5a812) !important; background: linear-gradient(to bottom, #f3c553, #e5a812) !important; } #rockfm_form_10 #rockfm_uikx44f1shd .checkradios-checkbox, #rockfm_form_10 #rockfm_uikx44f1shd .checkradios-radio { border: 2px solid #e5a812 !important; color: #e5a812 !important; } .uiform-items-container .fa { font-family: "Font Awesome 5 Free" !important; font-weight: 900 !important; } .checkradios-checkbox.focus, .checkradios-radio.focus { webkit-box-shadow: 0px 0px 3px rgba(229, 169, 18, 0.9) !important; -moz-box-shadow: 0px 0px 3px rgba(229, 169, 18, 0.9) !important; box-shadow: 0px 0px 3px rgba(229, 169, 18, 0.9) !important; } .bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-primary, .bootstrap-switch.bootstrap-switch-on .bootstrap-switch-label { background: none repeat scroll 0 0 #e6aa16 !important; } .bootstrap-switch .bootstrap-switch-label:after { border: 3px solid #e6aa16 !important; } #rockfm_form_10 .rockfm-wiztheme1 .uiform-steps li .uifm-title { color: #e6aa16 !important; } #rockfm_form_10 .rockfm-wiztheme1 .uiform-steps li.uifm-complete .uifm-title, #rockfm_form_10 .rockfm-wiztheme1 .uiform-steps li.uifm-current .uifm-title { color: #e6aa16 !important; font-weight: 700 !important; } /* animation for phone icon */ .wave { animation: waveIn 1.2s infinite ease-out; transform-origin: 50% 50%; } .wave-sm { animation-delay: 0.3s; } .wave-md { animation-delay: 0.45s; } .wave-lg { animation-delay: 0.6s; } @keyframes waveIn { from { opacity: 0; transform: scale(0.3) translate(-20px, 10px); } 50% { transform: translate(0, 0); opacity: 1; } } a.callus-tag.callus-tagmob:after { content: ""; position: absolute; height: 40px; width: 40px; background-color: #333333; border-radius: 50%; left: 5px; z-index: -1; top: 6px; transition: 0.5s; } a.callus-tag.callus-tagmob:hover:after { background-color: #e5a812; } a.callus-tag:hover svg { filter: brightness(0) invert(1); transition: 0.5s; } .cursor-auto { cursor: auto; } .notice-image img { width: 50%; } .inner-tab .nav-pills .nav-link { font-size: 15px; text-align: center; padding: 10px; background-color: #dadada; } .inner-tab .nav-pills .nav-link:hover { background-color: rgba(0, 0, 0, 0.6); color: #fff; } .inner-tab .nav-pills .nav-link:not(:last-child) { margin-bottom: 15px; } .inner-tab .nav-pills .nav-link.active { background-color: rgba(0, 0, 0, 0.6); } .inner-tab-content { border: #e6e6e6 1px solid; } .beesender-widget-button-wrapper { z-index: 5 !important; } .main-navbar-header.show .callus-tag.callus-tagmob { display: none !important; } #faq_div .tab-pane .inner-tab { display: none; } #faq_div .tab-pane.show .inner-tab { display: flex; } .beesenderchat-avatar-img { max-width: 30px; max-height: 30px; } div#beesenderchat { cursor: pointer; } /* .beesender-widget-button-pulse-image { right: -44px !important; bottom: 37px !important; } */ .beesender-widget-button-position-bottom-right { right: 20px !important; bottom: 110px !important; } .beesender-widget-button-position-bottom-right:before { content: 'Hi! I am Sid. How can I help you? Click here to get started.'; position: absolute; top: -40px; left: -258px; background-color: #e5a812; width: 260px; display: none; color: #fff; padding: 15px; border-radius: 18px; } .beesender-widget-button-position-bottom-right:after { content: ''; left: -2px; top: 60px; border: solid transparent; content: ""; height: 0; width: 0; position: absolute; pointer-events: none; border-color: rgba(136, 183, 213, 0); border-left-color: #e5a812; border-width: 15px; display: none; margin-top: -73px; } .beesender-widget-button-position-bottom-right:hover:before, .beesender-widget-button-position-bottom-right:hover:after { display: block; } .datepicker table { border-spacing: revert !important; }