.whizzie-wrap { opacity: 0; position: relative; border: none; } .whizzie-wrap.loaded { opacity: 1; max-width: 100% !important; text-align: center; margin:0 auto; background-color: #e2f2ff; padding: 20px !important; } .whizzie-menu .button-primary, .whizzie-menu .button-secondary, .whizzie-menu .button, .other_content .button{ padding: 7px 26px; font-size: 18px; font-weight: 700; } .whizzie-wrap.spinning .step-loading { position: absolute; top: 0; bottom: 0; left: 0; right: 0; z-index: 999; background: rgba(255,255,255,0.8); } .spinning .step-loading .spinner { float: none; position: absolute; top: 50%; left: 50%; visibility: visible; -webkit-transform: translate(-50%,-50%); transform: translate(-50%,-50%); } .spinning a.do-it { visibility: hidden; } .whizzie-menu li.step { visibility: hidden; } .whizzie-menu li.active-step { visibility: visible; } .loaded .whizzie-menu li.step { visibility: visible; display: none; } .loaded .whizzie-menu li.active-step { display: list-item; } .spinning .spinner { visibility: visible; float: none; text-align: center; } .button-wrap { display: inline-block; margin: 1em 0; } .detail { display: none; opacity: 0; transition: all 1s; } .show-detail .detail { display: block; opacity: 1; transform: scaleY(1); transform-origin: top; transition: all 0.5s; } .detail.scale-down { transform: scaleY(0); } .whizzie-menu .detail ul { margin: 1em 0; } a.more-info { text-decoration: none; text-transform: uppercase; font-weight: bold; color: #ccc; } a.more-info:after { font-family: Dashicons; content: "\f347"; padding-left: 0.25em; vertical-align: middle; } ul.whizzie-do-plugins li { padding: 0.5em 1em; } ul.whizzie-do-plugins li:nth-child(odd) { background: #f9f9f9; } ul.whizzie-do-plugins li span { float: right; } ul.whizzie-nav { list-style: none; display: webkit-flex; justify-content: space-evenly; margin: 45px 27px 45px 0; display: flex; } ul.whizzie-nav li { opacity: 1; transition: all 0.25s; } ul.whizzie-nav li.active-step .dashicons { color: #0073aa; background-color: white; } ul.whizzie-nav li.done-step { opacity: 0.5; } ul.whizzie-nav .dashicons { font-size: 20px; background: linear-gradient(to right,#024985,#0189f0); padding: 20px; border-radius: 50%; color: white !important; } .whizzie-wrap.loaded .summary p{ font-size: 16px; } .whizzie-menu h2 { font-size: 22px; font-weight: 700; } .step-done h2:before{ content: "\f529"; font-family: dashicons; font-weight: 400; display: inline-block; position: relative; top: 4px; padding-right: 10px; } /* ------- Setup Guid --------- */ #automotive-services-demo-setup-guid .automotive-services-setup-contact{ display: none; } #automotive-services-demo-setup-guid .automotive-services-setup-widget{ display: none; } #automotive-services-demo-setup-guid .automotive-services-setup-dots{ text-align: center; padding-top: 25px; } #automotive-services-demo-setup-guid .automotive-services-setup-finish{ text-align: center; padding-top: 20px; } #automotive-services-demo-setup-guid ol li{ list-style: decimal; font-size: 15px; font-weight: 600; } #automotive-services-demo-setup-guid h4{ font-size: 17px; } #automotive-services-demo-setup-guid h3{ font-weight: 900; font-size: 19px; } #automotive-services-demo-setup-guid h3:before{ content: "\f155"; font-family: dashicons; font-weight: 400; display: inline-block; position: relative; top: 2px; padding-right: 6px; } #automotive-services-demo-setup-guid p{ font-size: 15px; } .whizzie-menu .step-plugins{ height: 100% !important; } #automotive-services-demo-setup-guid .automotive-services-setup-social-icon{ display: none; } /*---------------Additional CSS----------------*/ .appearance_page_automotiveservices-wizard h1 { text-align: center; margin-bottom: 20px; color: #2271b1; font-weight: 700; font-size: 30px; } .demo_content { width: 49%; text-align: left; font-size: 12px; } .demo_image img { max-width: 100%; padding-top: 0; } .demo_image{ width: 49%; } .demo_content_image a.button.button-primary { padding: 7px 24px; font-size: 18px; font-weight: 700; } .demo_content_image a.button.button-primary.bundle { background-color: #d71800; border: none; } .demo_content_image p{ font-size: 16px; } .demo_content_image h2 { font-weight: 700; font-size: 20px; } ul.whizzie-menu { background-color: white; padding: 50px 30px; text-align: center; max-width: 100%; height: 300px; margin: 0 auto; margin-top: 20px; border: 1px; box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px; box-shadow: rgba(0, 0, 0, 0.25) 0px 25px 50px -12px; border-radius: 20px; } .customize_div { font-size: 20px; font-weight: 600; } a.customize_link { text-decoration: none; } /* ------- Bundle Button Flash --------- */ .bundle-getstart-lifetime-div a::before { content: 'SALE'; position: absolute; top: -15px; right: -20px; background-color: #000; color: yellow; padding: 8px 5px; font-size: 12px; font-weight: bold; border-radius: 50%; z-index: 10; animation: flash 0.7s linear infinite; transition: background-color 0.2s ease, color 0.2s ease; } .bundle-getstart-lifetime-div a { position: relative; } .bundle-getstart-lifetime-div a:hover::before { background-color: yellow; /* Changes color on hover */ color: red; /* Changes text color on hover */ } @keyframes flash { 0% { opacity: 1; } 100% { opacity: 0.5; } } .demo_content_image a.button.button-primary.bundle{ background: green !important; color: #ffffff !important; } .demo_content_image a.button.button-primary.bundle.pro{ background: red !important; color: #ffffff !important; } .demo_content_image a.button.button-primary.bundle:hover{ background: linear-gradient(to right,#024985,#0189f0) !important; } .demo_content_image h2:nth-child(01) { font-weight: 700; font-size: 24px; line-height: 30px; margin-bottom: 40px; text-align: center; } .demo_content_image h2:nth-child(01)::after { content: 'One Click Demo Import'; position: absolute; top: -60px; left: 50%; transform: translateX(-50%); background-color: #4CAF50; color: white; padding: 5px 15px; font-size: 14px; font-weight: bold; border-radius: 5px; z-index: 10; } .demo_content_image h2:nth-child(01) { position: relative; } .demo_image.buttons{ margin-bottom: 30px; width: 100%; } .demo_image.buttons a{ margin: 0; } /* ------- New CSS --------- */ .card.whizzie-wrap.loaded { display: flex; justify-content: space-between; } .demo_content_image { width: 74%; justify-content: space-between; display: flex; } .bundle-getstart-div { width: 23%; box-shadow: rgba(0, 0, 0, 0.25) 0px 25px 50px -12px; padding: 10px; border-radius: 10px; background: linear-gradient(360deg, rgba(2, 73, 133, 1) 4%, rgba(1, 137, 240, 1) 100%); } .bundle-imgs{ width: 100%; } .demo_image.buttons { margin-bottom: 30px; width: 100%; display: grid; grid-template-columns: 1fr 1fr; grid-gap: 15px; } .bundle-getstart-div h2 { text-align: center; margin-bottom: 20px; color: #fff; font-weight: 900; font-size: 28px; line-height: 36px; margin-top: 10px; } .bundle-getstart-lifetime-div h2 { font-size: 28px; line-height: 36px; } .bundle-getstart-img-div { border-bottom: 1px dashed #fff; padding-bottom: 15px; padding-top: 25px; } .automotive-services-bundle-button,.bundle-getstart-lifetime-div a,.automotive-services-buy-now { background: red !important; color: #ffffff !important; padding: 5px 25px !important; font-size: 16px !important; font-weight: 900; border: none !important; outline: none !important; } .automotive-services-buy-now { background: #4ca54c !important; margin-right: 10px !important; } .automotive-services-bundle-button,.automotive-services-buy-now { padding: 2px 15px !important; font-weight: 600; font-size: 14px !important; } .automotive-services-bundle-button:hover,.automotive-services-buy-now:hover { background: linear-gradient(to right,#024985,#0189f0) !important; } .about-wrappp{ display: flex; justify-content: space-between; background: #e2f2ff; opacity: 1; max-width: 100% !important; text-align: center; margin: 0 auto; background-color: #e2f2ff; padding: 20px !important; } .about-wrappp-boxes-div{ width: 59%; } .about-wrappp-free-pro-div{ width: 39%; } .feature-section.two-col { display: grid; grid-template-columns: 1fr 1fr; grid-gap: 20px; } span.usecode { color: red; font-weight: 600; } .feature-section.two-col .card p{ font-size: 16px; } .feature-section.two-col .card h2{ font-size: 22px; } .feature-section.two-col .card p a{ font-size: 14px; font-weight: 600; } /* FREE VS PRO */ .seo-theme-table table { border-collapse: collapse; } .seo-theme-table th { border: 1px solid #e0e0e0; padding: 11px; color: #fff; } p.about-description { color: #000; font-size: 16px; } .seo-theme-table td { border: 1px solid #e0e0e0; border-collapse: collapse; padding: 7px; text-align: center; color: #000; } .seo-theme-table .dashicons { font-size: 32px; font-size: 2rem; width: unset; height: unset; } .seo-theme-table .dashicons-saved { color: #4ca54c; } .seo-theme-table .dashicons-no-alt { color: #c83842; } .seo-theme-table tr:nth-child(odd) { background-color: #747474; } .seo-theme-table tr:nth-child(odd) td{ color: #fff; } .seo-theme-table tr:nth-child(even) { background-color: #fff; } .seo-theme-table table { width: 100%; } .seo-theme-table th:last-child, .seo-theme-table th:first-child { width: 33%; } a.button.button-primary.bundle { background: green; border: none; font-size: 16px; font-weight: 600; } /* NOTICE */ .automotive-services-notice { position: relative; display: flex; align-items: center; margin-top: 20px; margin-bottom: 20px; padding: 30px; border: 0 !important; background: #fff; box-shadow: 0 0 5px rgba(0, 0, 0, 0.1); } .automotive-services-notice h3 { font-size: 32px; margin-top: 0; margin-bottom: 20px; line-height: 30px; } .automotive-services-notice h3 span { display: inline-block; margin-bottom: 20px; font-size: 12px; color: #fff; background-color: #f51f3d; padding: 2px 12px 4px; border-radius: 3px; } .automotive-services-notice p { margin-top: 10px; margin-bottom: 30px; font-size: 14px; } .automotive-services-buy-now { text-decoration: none; background: #4CAF50; color: white; padding: 10px 20px; border: 1px solid #4CAF50; border-radius: 5px; cursor: pointer; font-weight: bold; transition: background 0.3s ease; } .automotive-services-buy-now:hover { background: #3b883d; color: #fff; } .automotive-services-image-wrap { margin-left: auto; } .automotive-services-image-wrap img { max-width: 290px; height: auto; } #automotive-services-notice-confetti { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; } @media screen and (max-width: 1100px) { .demo_content_image ,.card.whizzie-wrap.loaded,.about-wrappp { justify-content: center; flex-direction: column; } .bundle-getstart-div,.demo_content_image ,.about-wrappp-boxes-div,.about-wrappp-free-pro-div,.demo_content,.demo_image { width: 100%; } }