input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, textarea:-webkit-autofill, textarea:-webkit-autofill:hover, textarea:-webkit-autofill:focus, select:-webkit-autofill, select:-webkit-autofill:hover, select:-webkit-autofill:focus { border: 0; -webkit-text-fill-color: black !important; transition: background-color 5000s ease-in-out 0s; } header { position:relative; } .parallax { height: 90vh; width:100%; background: transparent; } #bContent { width:50%; height:100%; display:flex; justify-content: center; align-items: center; color:#fff; } #bContentWrap { width:70%; } #bContentWrap h1 { font-size:3rem; } #bContentWrap h3 { font-size:2rem; font-weight: 400; } #button { background-color:#56AC2F; text-decoration: none; padding:2% 4% 2% 4%; margin-top:25px; cursor:pointer; display:inline-block; font-size:1.7rem; color:#fff; border:0; -webkit-background-clip: padding-box; position:relative; transition:background-color .2s ease; } #button:hover { background-color:#257500; } .button-arrow { font-size:1.5rem; padding-left:5px; } .service-container { width:100%; margin-top:70px; margin-bottom: 3rem; } .left-side { display:inline-block; width:50%; height:100%; vertical-align: top; } .right-side { display:inline-block; width:50%; padding-top:30%; box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.25); position:relative; } .container-padding { padding:2%; } .align-right { text-align: right; } .service-header-wrap { width:100%; margin-bottom:5%; } .service-header-wrap h2 { font-size:2.5rem; color:#003467; margin:0; } .left-side p { font-size:1.7rem; color:#003467; } .service-list { list-style: none; padding:0; margin:10px 0 0 0; font-size:1.7rem; color:#003467; overflow:hidden; } .service-list li { display:flex; align-items: baseline; margin:5px 0 5px 0; } .service-list li:before{ content: ''; height: 20px; width: 20px; background-image: url(../res/img/listStyle.png); background-position: center center; background-repeat: no-repeat; background-size: cover; margin-right:5px; } .service-li-text { width:100%; } .underline { display:block; width:65px; background-color:#56AC2F; height:4px; margin-top:10px; } .align-right-div { float:right; } .right-side img { width:auto; height:100%; } #our-benefits { width:100%; height:600px; background-color:#fff; color:#002a52; margin-top:50px; box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.25); position: relative; z-index: 10; } .left-b { display:inline-block; width:50%; height:100%; } .right-b { display:inline-block; width:50%; height:100%; vertical-align: top; } #benefitsWrap { display:flex; margin-top:10%; align-items: flex-end; flex-direction: column; width:100%; text-align: right; } #benefitsWrap h3 { font-size:3rem; width:60%; display:block; font-weight:400; } #benefitsWrap p { font-size:1.7rem; width:70%; } .answersWrap { margin-top:10%; display:flex; width:98%; flex-direction: column; margin-left:2%; } .QuestContainer { width:80%; padding:1%; cursor:pointer; } .answersPadding { height:100%; } .QuestWrap { width:80%; display:inline-block; height:50px; vertical-align: top; } .QuestWrap p { color:white; font-size:1.2rem; padding-left:2%; } .align-quest { display:flex; align-items: center; } .expandWrap { width:20%; display:inline-block; height:50px; } .keep-aspect { width:20%; padding-top:20%; position:relative; } .FAQExpand { position:absolute; top:0; left:0; bottom:0; right:0; border-radius:50%; overflow: hidden; background-color: #003467; } .cross { font-size:1rem; color:white; transform:rotate(-45deg); } .answerContainer { padding:25px 2% 25px 2%; color:#fff; } @keyframes showAnswer { 0% { max-height:0; } 100% { max-height:150px; } } @keyframes hideAnswer { 0% { max-height:150px; } 100% { max-height:0; } } .answer { font-size:1.1rem; overflow: hidden; max-height:0; } .answer-show { animation-name:showAnswer; animation-duration: 1s; animation-iteration-count: 1; max-height:150px; } .answer-hide { animation-name:hideAnswer; animation-duration: 1s; animation-iteration-count: 1; max-height:0px; } #contact { width:100%; background: url(../res/img/contactB.jpg); background-position: center; background-repeat: no-repeat; background-size: cover; } #contact h3 { font-size:3rem; padding-top:50px; padding-bottom:50px; color:#003467; text-align: center } #contact-wrapper { width:60%; margin: 0 auto; position:relative; } .center { width:100%; display:flex; align-items: center; flex-direction: column; } .contactWrap{ width:100%; display:flex; justify-content: center; align-items: center; margin-bottom:35px; } .contactI { font-size:1.7rem; color:#003467; background-color:#fff; border:1px solid #003467; outline:0px; padding:1.5% 2.5% 1.5% 2.5%; width:50%; display:inline-block; } .helpWrapper { display:inline-block; font-size:2rem; color:white; margin-left:5px; position:relative; cursor:pointer; z-index:99; } .helpWrapper:hover .helpMessage { display:block; } .helpMessage { position:absolute; left:100%; bottom:0; border:1px solid black; font-size:1.7rem; padding:5px; word-wrap: break-word; width:15vw; background-color:white; color:black; display:none; } .contactI::placeholder, #extra-details::placeholder{ color: #003467; opacity: 0.7; } #textarea-relative { position:relative; width:80%; height:200px; margin-bottom:35px; } #extra-details { width:100%; height:100%; font-size:1.3rem; resize: none; padding:1%; border:1px solid #003467; color: #003467; } #counter-wrap{ position:absolute; bottom:-5%; right:0; color:#140045; } .emailSub { margin-bottom:25px; display: block; position: relative; padding-left: 35px; cursor: pointer; font-size: 22px; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; font-size:1.8rem; color: #003467; font-weight:500; } .emailSub input { position: absolute; opacity: 0; cursor: pointer; height: 0; width: 0; } .checkmark { position: absolute; top: 0; left: 0; height: 25px; width: 25px; background-color: #eee; } .emailSub:hover input ~ .checkmark { background-color: #ccc; } .emailSub input:checked ~ .checkmark { background-color: #2196F3; } .checkmark:after { content: ""; position: absolute; display: none; } .emailSub input:checked ~ .checkmark:after { display: block; } .emailSub .checkmark:after { left: 9px; top: 5px; width: 5px; height: 10px; border: solid white; border-width: 0 3px 3px 0; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); } #submitC { width:60%; font-size:2rem; margin-top:15px; color:#fff; background-color:#336EA7; text-align: center; border:0; outline:0; padding:15px 0% 15px 0%; margin-bottom:50px; cursor:pointer; } #submitC:hover { background-color:#2d5780; } .SendingEmail-wrap { position:absolute; top:0; left:0; bottom:0; right:0; 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 { margin-bottom: 10rem; border: 5px solid rgba(0, 0, 0, 0.2); border-left-color: white; animation: loader-spin 1.2s infinite linear; position: relative; display: inline-block; vertical-align: top; border-radius: 50%; width: 20rem; height: 20rem; } .load-complete { -webkit-animation: none; animation: none; border-color: white; transition: border 500ms ease-out; } .circle-checkmark { display: none; } .circle-checkmark.draw:after { animation-duration: 800ms; animation-timing-function: ease; animation-name: checkmark; transform: scaleX(-1) rotate(135deg); } .circle-checkmark:after { opacity: 1; height: 10rem; width: 5rem; transform-origin: left top; border-right: 5px solid white; border-top: 5px solid white; content: ''; left: 5rem; top: 10rem; 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: 5rem; opacity: 1; } 40% { height: 10rem; width: 5rem; opacity: 1; } 100% { height: 10rem; width: 5rem; opacity: 1; } } #SendMessage h3 { font-size:2rem; font-weight:400; margin-top:25px; color:white; padding:0; margin:0; } .back-btn-wrapper { height:10%; width:100%; display:flex; justify-content: center; align-items: center; } #back-to-quote { font-size:2rem; color:white; width:60%; border:0; outline:0; padding:15px 0px; cursor:pointer; transition:all .3s ease; background-color:#336EA7; } #back-to-quote:hover { background-color:#2d5780; } @media only screen and (max-width: 1400px) { #bContentWrap h1 { font-size:4rem; } #bContentWrap h3 { font-size:2.5rem; } #button { font-size:2.3rem; } .button-arrow { font-size:1.9rem; } .service-header-wrap h2 { font-size:3.5rem; } .left-side p { font-size:2.3rem; } .service-list { font-size:2.3rem; } #benefitsWrap h3 { font-size:4rem; } #benefitsWrap p { font-size:2.3rem; } .QuestWrap p { font-size:1.7rem; } .answer { font-size:1.5rem; } .contactI { font-size:2rem; } #extra-details { font-size:1.5rem; } #textarea-relative { width:90%; } .checkmark { width:20px; height:20px; } .emailSub .checkmark:after { top:2px; left:5px; } } @media only screen and (max-width: 1200px) { .service-container { display:flex; flex-direction: column; } .service-container:nth-child(even) { flex-direction:column-reverse; } .align-right { text-align: left; } .align-right-div { float:left; } .left-side { display:block; width:100%; height:50%; } .right-side { display:block; width:100%; padding-top:60%; box-shadow:none; } .right-side img { width:auto; height:100%; } .left-b { width:95%; } .right-b { width:95%; } #bContent { width:70%; } #benefitsWrap h3 { font-size:3rem; } #benefitsWrap p { font-size:2rem; } .QuestContainer { width:90%; } .QuestWrap p { font-size:1.5rem; } .answer { font-size:1.3rem; } .keep-aspect { width:30%; padding-top:30%; } #contact h3 { padding-top:30px; padding-bottom:30px; } #textarea-relative { height:170px; } .excl-vat-right { text-align: left; margin-left: 0; right: 0; left: 1rem; } } @media only screen and (max-width: 1000px) { .right-side { padding-top:40%; } } @media only screen and (max-width: 900px) { #bContent { width:100%; } #contact-wrapper { width:80%; } } @media only screen and (max-width: 850px) { .left-b { display:block; width:70%; margin:0 auto; height:30%; } #benefitsWrap { width:100%; display:block; margin:0; padding-top:5%; height:auto; } #benefitsWrap h3 { width:100%; text-align: left; } #benefitsWrap p { width:100%; text-align: left; padding-top:5%; } #our-benefits { height:650px; } .right-b { display:block; width:70%; margin:0 auto; height:70%; } .answersWrap { margin:0; align-items: center; } .QuestContainer { width:100%; } .QuestWrap p { font-size:2rem; } .cross { font-size:1.3rem; } .answer { font-size:1.6rem; } } @media only screen and (max-width: 750px) { .left-b { width:80%; } .right-b { width:80%; } .helpMessage { left:auto; right:100%; width:20vw; } } @media only screen and (max-width: 650px) { #contact-wrapper { width:95%; } #submitC { padding:10px 0 10px 0; } .helpWrapper { width:25vw; } .service-list { font-size:2.2rem; } .service-list li:before { width:15px; height:15px; } .contactWrap { width:90%; } .contactI { width:90%; padding:2%; } } @media only screen and (max-width: 550px) { #our-benefits { height:700px; } .left-b { height:35%; } .right-b { height:65%; } .contactI { width:65%; } #textarea-relative { height:150px; } .emailSub { margin-bottom:15px; } .right-side { padding-top:50%; } .helpMessage { width:35vw; } } @media only screen and (max-width: 450px) { #our-benefits { height:800px; } #bContentWrap { width:80%; } .QuestWrap { height:60px; } .expandWrap { height:60px; } } @media only screen and (max-width: 400px) { #our-benefits { height:850px; } #button { padding:3% 4% 3% 4%; } .keep-aspect { width:35%; padding-top:35%; } .QuestContainer { padding:2%; } .clientLogo { width:20%; padding-top:20%; } .helpWrapper { width:30vw; } .contactI { width:100%; } .right-side { padding-top:70%; } }