@keyframes WelcomeAnim { 0% { margin-top:20%; } 100% { margin-top:0%; } } #welcome { position:absolute; top:34vh; left:6vw; color:#fff; overflow:hidden; } #welcome-h1 { font-size:3rem; font-weight:400; animation-name: WelcomeAnim; animation-duration: 1s; animation-iteration-count: 1; } #welcome-h2 { font-size:2.3rem; font-weight:300; animation-name: WelcomeAnim; animation-duration: 1s; animation-iteration-count: 1; } .quote-color { background-color:#336EA7; } #quote { top:5rem; right:6vw; position:absolute; background-color: #336EA7; box-shadow: 0px 0px 30px #3A2822; padding:15px 25px; } #quote-relative { position:relative; } .g-recaptcha { margin-top:5px; } .align-captcha { width:100%; display:flex; justify-content: center; align-items: center; } #quote-position { position:static; } #quote-wrapper { background-color:transparent; padding:0; } #quote-header { color:#fff; font-family:"Roboto", sans-serif; font-weight: 600; font-size:2.3rem; } #quote-desc { color:#fff; padding-top:1%; font-family:"Roboto", sans-serif; font-style:normal; font-weight: 300; font-size:1.5rem; } .quote-sub-wrap { margin-top:2%; width:20rem; font-size:1rem; color:#fff; } .quote-sub-wrap h2 { display:inline-block; font-family:"Roboto", sans-serif; font-weight:300; font-size:1.3rem; padding-top:0.5%; color:#fff; } .quote-icons { width:10%; height:auto; margin-right:5px; } .header-size { margin-top:3%; } .quote-header { color:#fff; font-weight:300; font-size:1.4rem; } .align-help-center { display:flex; align-items: center; justify-content: space-between; margin-top:10px; } .align-help-center:first-child { margin-top:0; } .help-label { display:inline-block; color:white; cursor:pointer; font-size:1.3rem; width:20%; } .help-label:hover .error-label { display:block; } .error-label { position:absolute; bottom:0; width:8vw; word-wrap: break-word; left:100%; background-color:white; border:1px solid black; z-index:500; color:black; font-size:1.2rem; padding:5px; display:none; } #phone-label { right:100%; left:auto; } .input-wrapper { font-size:1.4rem; width:80%; position:relative; height:50px; margin-top:2%; display:inline-block; } .hide-extra { overflow:hidden; width:100%; height:100%; position:relative; } .input-wrapper:nth-child(1) { margin-top:0; } .input-wrapper input { width:100%; height:100%; color:#595f6e; padding-top:10px; border:none; outline:none; background-color:#336EA7; color:#fff; font-size:1.2rem; } .input-wrapper label { position:absolute; bottom:0px; left:0px; width:100%; height:100%; pointer-events:none; border-bottom:1px solid white; color:#fff; } .input-wrapper label::after { content: ""; left:0px; bottom:-1px; position:absolute; height:100%; width:100%; border-bottom:3px solid #fff; transform: translateX(-100%); transition:transform 0.3s ease; } .content-name { position:absolute; bottom:5px; left:0px; transition: all 0.3s ease; } .input-wrapper input:focus + .label-name .content-name, .input-wrapper input:valid + .label-name .content-name { transform: translateY(-150%); font-size:1rem; } .input-wrapper input:focus + .label-name::after, .input-wrapper input:valid .label-name::after { transform: translateX(0%); } #email-or-phone { width:100%; display:flex; align-items: center; justify-content: space-between; margin-top:10px; } .email-or-phone-i { width:13rem; margin-top:0; display:flex; align-items: center; } .email-or-phone-wrapper { display:inline-block; width:80%; height:100%; } #extra-details-wrap { width:100%; margin-top:1vw; display: flex; justify-content: center; } #textarea-relative { position:relative; width:90%; } #extra-details { width:100%; font-size:1.2rem; resize: none; padding:5px; border:1px solid #003467; color:black; height:10vw; box-sizing: border-box; } #counter-wrap{ position:absolute; bottom:1rem; right:0.5rem; color:#140045; } #submit-form-wrap { width:100%; display:flex; justify-content: center; margin-top:10px; } #submit-form-wrap button { background-color:#56AC2F; color:white; border:0px; outline:0px; border-radius:25px; font-size:1.5rem; padding:10px 20px 10px 20px; cursor: pointer; transition: all .3s ease } #submit-form-btn:hover { background-color:#56AC2Fb0; } #hide-anim { position:absolute; top:0; left:0; height:100%; width:100%; opacity:0; pointer-events: none; } .tick-wrapper { height:90%; width:100%; display:flex; justify-content: center; flex-direction: column; align-items: center; color:white; } .contacts-wrapper { margin-bottom:50px; } .contacts-sub-wrap { display:flex; align-items: center; word-wrap: break-word; } .contact-icons { display:inline-block; width:8%; height:auto; } .contacts-sub-wrap h2 { font-weight:400; font-size:1.7rem; display:inline-block; margin-left:15px; } .circle-loader { border: 3px solid rgba(0, 0, 0, 0.2); border-left-color: #5cb85c; animation: loader-spin 1.2s infinite linear; position: relative; display: inline-block; vertical-align: top; border-radius: 50%; width: 15rem; height: 15rem; } .load-complete { -webkit-animation: none; animation: none; border-color: #5cb85c; transition: border 500ms ease-out; } .checkmark { display: none; } .checkmark.draw:after { animation-duration: 800ms; animation-timing-function: ease; animation-name: checkmark; transform: scaleX(-1) rotate(135deg); } .checkmark:after { opacity: 1; height: 7.5rem; width: 3.75rem; transform-origin: left top; border-right: 3px solid #5cb85c; border-top: 3px solid #5cb85c; content: ''; left: 3.75rem; top: 7.5rem; position: absolute; } @keyframes loader-spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } @keyframes checkmark { 0% { height: 0; width: 0; opacity: 1; } 20% { height: 0; width: 3.75rem; opacity: 1; } 40% { height: 7.5rem; width: 3.75rem; opacity: 1; } 100% { height: 7.5rem; width: 3.75rem; opacity: 1; } } #SendMessage h3 { font-size:1.3rem; font-weight:400; margin-top:25px; } .back-btn-wrapper { height:10%; width:100%; display:flex; justify-content: center; align-items: center; } #back-to-quote { font-size:1.5rem; color:white; border:0; outline:0; border-radius:25px; padding:10px 20px; cursor:pointer; transition:all .3s ease; background-color:#56AC2F; } #back-to-quote:hover { background-color:#56AC2Fb0; } main { background-color:white; } .main-container { width:100%; height:600px; background-color:#fff; } .main-container h1 { text-align: center; margin:0; padding-top:2%; font-size:3rem; color:#56AC2F; font-weight:500; } .services-container { width:90%; margin:0 auto; height:100%; } .align-services { width:100%; height:100%; display:flex; align-items: center; justify-content: space-between; } .align-services h2 { color:#56AC2F; text-align: center; font-size:2rem; padding:2% 0% 2% 0%; } @keyframes service_anim { 0% { transform: scale(1); } 50% { transform: scale(1.5); } 100% { transform: scale(1); } } .service { width:18%; height:80%; text-align: center; } .run-service-anim { animation-name: service_anim; animation-duration: .5s; animation-iteration-count: 1; } .service:hover { } .service-img-wrap { width:100%; height:30%; } .service-img { height:100%; width:auto; text-align: center; } .service-p-container { width:100%; height:45%; color:#003467; font-size:1.5rem; text-align: center; } .service-learn-more { border:0; outline:0; font-size:1.5rem; background-color:#336EA7; color:white; padding:3%; cursor:pointer; } .service-learn-more:hover { background-color:#4086ca; } .why-us-section { height:1200px; width:100%; background-color:#336EA7; margin-top:25px; } .why-us-section h1 { padding-top:25px; font-size:3rem; color:#fff; font-weight: 500; text-align:center; } .why-us-container { width:60%; height:100%; margin:2% auto 0% auto } @keyframes whyUsAnim { 0% { left:-140%; } 100% { left:0; } } @keyframes whyUsAnim_r { 0% { right:-140%; } 100% { right:0; } } .reason-container { display:block; width:80%; margin-right:auto; height:15%; position:relative; overflow: hidden; } .reason-anim-container { position:absolute; width:100%; height:100%; left:-140%; } .reason-anim-run { left:0%; animation-name: whyUsAnim; animation-duration: 1s; animation-iteration-count: 1; } .reason-container-r { display:block; width:80%; margin-left:auto; height:15%; text-align: right; position:relative; overflow: hidden; } .reason-anim-container-r { position:absolute; width:100%; height:100%; right:-140%; } .reason-anim-run-r { right:0%; animation-name: whyUsAnim_r; animation-duration: 1s; animation-iteration-count: 1; } .reason-img-container { width:20%; height:100%; display:inline-block; } .reason-img-container-r { float:right; } .reason-img-container img { height:60%; width:auto; } .reason-img-container div { width:100%; height:100%; } .reason-desc-container { display:inline-block; width:67%; color:#fff; height:100%; vertical-align: top; } .reason-desc-align { width:100%; height:100%; display:flex; flex-direction: column; justify-content: center; } .reason-desc-align h2 { font-size:2rem; } .reason-desc-align p { font-size:1.3rem; font-weight:400; } .reason-desc-r { text-align: right; } @keyframes testimonial_anim { 0% { opacity:0; margin-top:100%; } 100% { opacity:1; margin-top:0%; } } .testimonial-container { width:100%; height:700px; padding-top:25px; background-color: #336EA7; } .testimonial-container h1 { font-size:3rem; color:#fff; font-weight: 500; text-align:center; } .test-wrapper { display: block; width:90%; height:90%; margin:0 auto; } .test-align { width:100%; height:100%; display:flex; align-items: center; justify-content: space-between; overflow: hidden; } .test-card { background-color:#fff; width:350px; height:70%; padding:2%; text-align: center; opacity:0; box-shadow: 0px 0px 14px 3px #1f4971; margin-top:100%; } .test-card-anim { margin-top:0%; opacity:1; animation-name: testimonial_anim; animation-duration: 1s; animation-iteration-count: 1; } .test-card h2 { font-size:2rem; color:#003D78; width:100%; height:20%; } .test-card p { font-size:1.5rem; color:#003D78; width:100%; height:55%; } .star-wrapper { width:100%; height:15%; display:flex; align-items: center; justify-content: space-between; } .star-wrapper img { width:20%; height:auto; } .trustpilot-wrapper { height:20%; width:100%; text-align: center; } .trustpilot-wrapper img { width:70%; height:auto; cursor:pointer; } .location { width:100%; background-color:#336EA7; text-align: center; } .location h1 { font-size:3rem; color:#fff; font-weight: 500; margin-bottom:25px; } .location p { font-size:1.8rem; color:#fff; font-weight: 300; padding:5% 10% 5% 10%; } .location a { text-decoration: none; font-size:1.5rem; color:#73e83e; font-weight: 200; } .map-container { width:100%; height:50%; } .map { width:100%; height:100%; } @media only screen and (min-width: 2000px) { .input-wrapper { height:80px; } .main-container { height:1100px; } .testimonial-container { height:1000px; } .test-card { width:450px; } .why-us-section { height:1800px; } } @media only screen and (max-width: 1450px) { #quote { top:12rem; } } @media only screen and (max-width: 1400px) { .quote-sub-wrap h2 { font-size:1.6rem; } .quote-sub-wrap { width:22rem; } #quote-header { font-size:2.6rem; } .align-help-center { margin:0; } #email-or-phone { margin:0; } .content-name { font-size:1.7rem; } .email-or-phone-i { width:17rem; } .help-label { font-size:1.5rem; } .g-recaptcha { transform:scale(0.75); transform-origin:0 0; margin-top:5px; } #counter-wrap { font-size:1.3rem; } #submit-form-wrap { margin-top:0; } #quote-header { font-size:2.3rem; } #quote-desc { padding-top:1%; font-size:1.5rem; } .input-wrapper input { font-size:1.6rem; } .testimonial-container { height:550px; } .test-card { width:300px; } .test-card h2 { font-size:2.5rem; } .test-card p { font-size:1.8rem; } .star-wrapper img { width:15%; } } @media only screen and (max-width: 1200px) { .parallax { height:70vw; } #welcome { display:none; } #quote { position:static; } #quote-position { position:absolute; top:0; left:0; display:flex; justify-content: center; align-items: center; background-color:transparent; width:100%; height:70vw; padding:0; } #quote-header { font-size:2.3rem; } #quote-desc { padding-top:1%; font-size:1.5rem; } .why-us-section { height:1000px; } .testimonial-container { height:500px; } .test-card { width:250px; } .test-card h2 { font-size:2rem; } .test-card p { font-size:1.3rem; } .star-wrapper img { width:15%; } } @media only screen and (max-width: 1000px) { .parallax { height:80vw; } #quote-position { height:80vw; } .service-p-container { font-size:1.2rem; } .align-services h2 { font-size:1.7rem; } .why-us-section { height:1000px; } .reason-desc-align h2 { font-size:1.8rem; } .reason-desc-align p { font-size:1.2rem; } .testimonial-container { height:450px; } .test-card { width:200px; } } @media only screen and (max-width: 950px) { .error-label { width:15vw; } .quote-sub-wrap { width:25rem; } .align-help-center { margin-top:5px; } .align-help-center:first-child { margin-top:0px; } #email-or-phone { margin-top:5px; } #extra-details { height:15vw; } } @media only screen and (max-width: 850px) { .parallax { height:90vw; } #quote-position { height:90vw; } .why-us-container { width:80%; } .reason-desc-align h2 { font-size:2rem; } .reason-desc-align p { font-size:1.3rem; } .testimonial-container { height:350px; } .test-card { width:150px; } } @media only screen and (max-width: 850px) and (orientation: landscape) { .parallax { height:190vh !important; } #submit-form-wrap { margin-top: 3%; } #quote { margin-top:350px; } #quote-position { height:100vh; } } @media only screen and (max-width: 750px) { .parallax { height:100vw; } #quote-position { height:100vw; } .why-us-section { margin-top:100px; } .main-container { width:100%; height:1700px; display:block; } .services-container { width:90%; margin:0 auto; height:100%; } .align-services { width:100%; height:100%; display:flex; flex-direction: column; padding-top:25px; } .service { width:80%; height:20%; } .align-services h2 { font-size:3rem; } .service-img-wrap { width:100%; height:40%; } .service-p-container { width:100%; height:30%; font-size:1.7rem; } .reason-container { width:100%; } .reason-container-r { width:100%; } } @media only screen and (max-width: 650px) and (orientation: landscape) { .parallax { height:190vh !important; } #quote-position { height:100vh !important; } #submit-form-wrap { margin-top: 10%; } } @media only screen and (max-width: 650px) { .parallax { min-height:110vh; } #quote-position { position:absolute; top:0; left:0; display:flex; justify-content: center; background-color:transparent; width:100%; height:110vh; padding:0; } #extra-details-wrap { margin-top:4%; } #submit-form-wrap { margin-top:0%; } .help-label { font-size:1.8rem; } #extra-details { height:20vw; } .why-us-container { width:95%; } .reason-img-container img { height:40%; } .reason-desc-align h2 { font-size:1.6rem; } .testimonial-container { height:1300px; } .test-align { justify-content: center; flex-direction: column; } .test-card { margin-top:25px; width:270px; height:80%; } .test-card h2 { font-size:2.5rem; } .test-card p { font-size:1.7rem; } .error-label { left:auto; right:100%; } } @media only screen and (max-width:400px) { .email-or-phone-i { width:15rem; } #extra-details { height:25vw; } .align-captcha { width:80%; display:inline-block; } .error-label { width:25vw; } } @media only screen and (max-width:350px) { .parallax { height:120vh; } #quote-position { height:120vh; } #quote { margin-top:2rem } }