.our-brands #content { padding: 50px 60px 60px 60px; background: #4e6b85; margin-bottom: 50px; margin-top: -150px; position: relative; z-index: 1111} .our-brands #content .pagetitles, .our-brands #content p {text-align: center; padding: 10px 100px; color: #fff} .our-brands #breadcrumb{ display: none} .readMoreLink a{ border: 0px; padding: 5px 19px; border-radius: 99px; font-size: 12.1px; color: #fff; background: #111; font-weight: 500; } @media only screen and (min-width:1120px){ #telephoneNumber , .headerFixed #telephoneNumber{ border-left: 1px solid #eee; margin-top: -8px; height: 40px; line-height: 40px; padding-left: 70px; padding-right: 40px; background-image: url(../img/24_7_telephone.png?w); background-repeat: no-repeat; background-size: 32px auto; background-position: 35px 50%; transition: all 0.5s } .headerFixed #telephoneNumber { top: 10px;} @media only screen and (max-width:1350px){ #telephoneNumber{ display: none} .fullWidth #logo{ width: 120px; transition: all 0.8s} } .sectors #paraGrid.threeIcons li { } .sectors #paraGrid li .textWrap h2 { font-size: 14.5px; margin: 14px auto 3px auto} .sectors #paraGrid ul.cover .imgWrap span.bgImg {filter: brightness(0) invert(1);transition: all 0.3s} /*.sectors #paraGrid ul.cover .imgWrap span.bgImg:hover{filter: brightness(1) invert(0.5);}*/ #FAQTop { padding: 50px 60px 60px 60px; background: #4e6b85; margin-bottom: 50px; margin-top: 0px; position: relative; z-index: 3} #FAQTop * {text-align: center; padding: 10px 100px; color: #fff} #contactTop{ background: #e9e9e9; height: 290px; position: absolute; display: block; width: 100%;z-index: -1} #contactFormWrapper{ z-index: 999999; position: relative;} #contactForm{ background: #fff; border: 1px solid #e1e1e1; border-radius: 6px; padding: 20px; } .home #paraGrid.offset li .imgWrap, .home #paraGrid.offset .imgWrap span.bgImg{ height: 500px;} .home #paraGrid li .textWrap{ margin-top: -40px; padding-bottom: 30px; max-height: 420px;}/*width: 650px;*/ #googleMapOuter{ margin-top: -100px; padding-bottom: 0px; z-index: 1; position: relative; border: 0px solid red;} } /* scr */ #homeAccreditations{ width: 100%; max-width: 1140px; margin:20px auto;} #homeAccreditations ul{display: flex; flex-wrap: wrap; } #homeAccreditations li{ width: 12.0%; height: auto;border: 1px solid #e1e1e1; margin: 10px 0.25%; position: relative;padding: 3px;border-radius: 7px;transition:all 0.4s;} #homeAccreditations li .imgWrap span{height: 100px; width: 100%; background-position: 50% 50%; background-repeat: no-repeat;; background-size: contain; display: block;} #homeAccreditations li strong{ position: absolute; left: -20000px;} #homeAccreditations li:hover{ border-color: #999} #homeAccreditations a.viewAll { padding:8px 60px; font-style: normal; display: block; width: fit-content; clear: both; font-size: 12.2px; border: 1px solid #000; letter-spacing: 1px; text-shadow: 0px 0px; background: #fff;color: #333; border-radius: 99px; cursor: pointer; transition: all 0.2s; font-weight: 600; position: relative; margin: 0 auto; } #homeAccreditations a.viewAll:hover { background: #000; color: #fff} .our-brands .grid li{ border-bottom: 1px solid #e1e1e1} .our-brands .grid li:last-child{ border: none} .our-brands .readMoreButton a{ border-radius: 99px; border: 0px; background: #111; color: #fff; font-size: 12.9px} .homeHeadlines{ width: 1120px; max-width: 100%;margin: 35px auto 50px auto; font-family: "Playfair Display"; font-size:28px; text-align: center; height: 30px; line-height: 30px;position: relative; } @media only screen and (min-width:1121px) { /*horiz lines */ .homeHeadlines::before, .homeHeadlines::after{content: ''; border-top: 1px solid #aaa;height: 1px; width: 300px; position: absolute; top: 15px; } .homeHeadlines::before{ left: 0;} .homeHeadlines::after{ right: 0;} } @media only screen and (max-width:1120px) { .homeHeadlines{ margin-top: 25px;} } #homeIconGrid ul{ margin: 20px auto 50px auto;width: 1120px; max-width: 100%; clear: both; font-size: 16px; font-weight: 400; display: flex; justify-content: space-between; flex-basis: row; flex-wrap: wrap; } #homeIconGrid ul li{ display: block; padding: 50px 20px 0 0;border:0px dashed #333; background-image: url("../img/homepageBullet.png"); background-repeat: no-repeat; background-position: left 0%;position: relative } #homeIconGrid ul li p{font-size: 15px;} @media only screen and (min-width:1121px) { #homeIconGrid ul li{ width: 31.3%; background-size: 30px auto; margin:1% ; min-height:290px } } @media only screen and (max-width:1120px) { #homeIconGrid ul li{ background-size: 25px auto;background-position: left 0%; width: 100%; padding: 0px 0px 0 35px; margin: 10px 0; min-height: 30px; } } #homeIconGrid ul li p a, #homeIconGrid ul li p a:hover{ padding: 4px 40px; font-style: normal; width: max-content; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; display: inline-block; clear: both; font-size: 11.8px; letter-spacing: 1px; text-shadow: 0px 0px; background: #222;color: #fff; border-radius: 99px; cursor: pointer; transition: 0.1s; font-family: Poppins,Helvetica; font-weight: 600; position: absolute; bottom: 0px;; border:0px; } #bannerWrap li .readMore strong { padding: 10px 40px; font-style: normal; width: max-content; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; display: inline-block; clear: both; font-size: 11.8px; letter-spacing: 1px; text-shadow: 0px 0px; background: #222;color: #fff; border-radius: 99px; cursor: pointer; transition: 0.1s; font-family: Poppins,Helvetica; font-weight: 600; position: relative; border:0px; } #bannerWrap li .readMore strong:hover { background: #000} #FAQ{ width: 100%; max-width: 1160px; margin: 0 auto 30px auto;display: flex; flex-wrap: wrap;position: relative; overflow-y: hidden;} #FAQ ul#questionsList{ width: 38%;position: relative} #FAQ ul#questionsList li{cursor: pointer} #FAQ #questionsList li{border: 0px dashed green; margin: 0 0 35px 0; padding: 0px 20px 0px 0;clear: both; opacity: 0.25;} #FAQ #questionsList h3{ font-size: 30px; font-family: "Playfair Display"; color: #000; margin-left: 18px; line-height: 40px; font-weight: 400; } #FAQ #questionsList sup{ font-family: "Playfair Display"; display: block;float: left;width: 18px; text-align: left; font-size: 12.5px; color: #000; } #FAQ ul#answersList{ width: 61%; margin-left: 1%; transition: margin 1.2s;} #FAQ #answersList li{ border: 0px dashed orange; margin: 0 0 0px 0 ; padding:6px 0 0px 0; } #FAQ #answersList li hr{ border: 1px solid transparent; margin-bottom: 50px;} #FAQ #answersList p, #FAQ #answersList li{font-size: 14.5px; margin: 0 0 4px 0 ; padding: 0} #FAQ #answersList strong {font-family: "Playfair Display"; font-weight: 700; font-size: 17px;} #FAQ #questionsList li.active{opacity: 1;transition:all 0.6s} #FAQ #answersList li ul{ margin: 4px 0 10px 0 } #FAQ #answersList li ul li{ display: list-item; list-style: none; ;background-image: url("../img/bullet-hollow.png?v=2025"); background-position: left 6.5px; background-size: 11px ; margin: 0; padding: 0; margin-left: 8px; padding-left: 16.5px} @media only screen and (max-width: 1120px) { #FAQ ul#questionsList {padding-right: 10px; width: 40%;} #FAQ #questionsList li{ margin: 0 0 20px 0; padding: 4px} #FAQ #questionsList h3{font-size: 18px; line-height: 20px;} #FAQ #questionsList sup{ margin-top: -3px; } #FAQ ul#answersList{padding-right: 5px;width: 58%;} #FAQ #answersList li{ padding-top:3px; } } @media only screen and (min-width: 1121px) { #footer{width: 100%; max-width: 1220px; margin: 0 auto 30px auto;display: flex; flex-wrap: wrap; padding:40px 0 0 0;} #footer1 ,#footer2 , #footer3 , #footer4 { width: 17%; border: 0px solid #fff; margin: 0 4%} #footer1 li, #footer2 li, #footer3 li, #footer4 li{ margin: 8px 0} #footer ul li strong{ font-weight: 600; border-bottom: 1px solid #fff; display: block; line-height: 28px} } @media only screen and (max-width: 1120px) { #footer{width: 100%; padding:40px 0 0 0;} #footer1 a,#footer2 a, #footer3 a, #footer4 a { width: 100%; text-align: center; font-size: 13.2px; display: block; margin: 0 auto} #footer1,#footer2, #footer3, #footer4{ margin: 10px auto} #footer ul li strong{ font-weight: 600; display: block; line-height: 28px; text-align: center} } #footer ul li a:hover{text-decoration: underline} #footerSocial { width: 100%; text-align: center; margin: 30px auto 20px auto; display: block; float: none;clear: both; } #footer #footerSocial li { margin: 0 10px;} #footerSocial li a, #footerSocial li a span {height: 34px; width: 34px; } #footerSocial li a span {border: 1px solid #fff; opacity: 0.88} @media all and (min-width: 1121px) { #servicesBannerWrap{ width: 100%; height: 440px; background-repeat: no-repeat; background-position: 50% 50%; background-size: cover; position: relative} #servicesVideoBanner{width: 100%; height: 100%; overflow: hidden; position: absolute; left: 0px ; top: 0; z-index: 0} #servicesVideoBanner video{ object-fit: cover; z-index: 0; } #servicesTop{ width: 1120px; margin: 0 auto; padding-top: 50px;z-index: 111; position: relative} #servicesTopText{padding: 30px 50px 30px 50px;/* assess design etc */ float: left; width: 680px; height: 420px; overflow: hidden; background-color: #FFFFFF; } #servicesTopText, #servicesTopText p{ font-size: 16px; } #servicesTopText p{ margin: 5px 0} #servicesTopText br{ margin: 6px; padding: 0; height: 1px; display: block;} #servicesBluePanel{float:right; width: 380px;} #servicesBluePanel div{ width: 100%; max-width: 90%; background: #5793B3; padding: 30px;} #servicesBluePanel div p{ color: #000;text-align: center} #servicesBluePanel div a#servicesBluePanelTel{ text-align: center;display: block;margin: 10px auto; font-weight: bold; } #servicesBluePanel div a.CTAwhite{ margin: 24px auto 0px auto; width: 100%; text-align: center} #contentVideo2{ position:relative; margin: 50px auto 0 auto; width: 1120px; } #contentVideo2 video{ width:100%;height:100%;object-fit: contain} #vimeoContainer{ height: 630px; position:relative; margin: 50px auto 0 auto;} #vimeoIframe{position:absolute;top:0;left:0;width:100%;height:100%;} } @media all and (max-width: 1120px) { #servicesBannerWrap{ width: 100%; height: auto; background-repeat: no-repeat; background-position: 50% 50%; background-size: cover;padding: 30px 20px ;position: relative} #servicesVideoBanner{width: 100%; height: 100%; overflow: hidden; position: absolute; left: 0px ; top: 0; z-index: 0} #servicesVideoBanner video{ object-fit: cover; z-index: 0; } #servicesTop{ width: 100%;; margin: 0 auto;z-index: 111; position: relative } #servicesTopText{padding: 20px 50px 40px 50px;/* assess design etc */ width:100%; max-width: 650px;height: auto; margin:30px auto; overflow: hidden; background-color: #FFFFFF; } #servicesTopText, #servicesTopText p{ font-size: 16px;} #servicesTopText p{ margin: 5px 0} #servicesTopText br{ margin:3px; padding: 0; height: 1px; display: block;} #servicesBluePanel{ margin: 0 auto;width:100%; max-width: 650px;} #servicesBluePanel div{ width: 100%; background: #5793B3; padding: 60px 30px ;} #servicesBluePanel div p{ color: #000;text-align: center} #servicesBluePanel div a#servicesBluePanelTel{ text-align: center;display: block;margin: 10px auto; font-weight: bold; } #servicesBluePanel div a.CTAwhite{ margin: 24px auto ; width: 100%; text-align: center} #contentVideo2{ position:relative; margin: 10px auto 0 auto; width: 100%; border: 1px solid red} #contentVideo2 video{ width:100%;height:auto;object-fit: contain} } #servicesCopyWrap { background: #fff; border-top:70px solid #143f69} #servicesCopy *{ color: #000; font-size: 15.8px; font-weight: 300} #servicesCopy strong{ font-weight: bold; font-size: 20px; display: inline-block; padding-bottom: 8px} #servicesCopy p{ padding: 6px 0} @media all and (min-width: 1120px) { #servicesCopy{ width: 1120px; margin: 0px auto; padding-top: 25px;} #servicesCopy div{ width: 49%; display: block; float: left;padding-bottom: 25px;} #servicesCopy div#col1{ padding-right: 10px;float: left} #servicesCopy div#col2{ padding-right: 10px;float: right} } @media all and (max-width: 1120px) { #servicesCopy{ margin: 0px auto; width: 100%;} #servicesCopyWrap { padding: 50px 30px;} #servicesCopy div{ width: 100%; display: block; } } #servicesCopy p{ margin: 5px 0} #otherServices{ clear: both; background: #fff; min-height: 400px ;margin: 10px auto; width: 1120px;max-width: 100%; padding: 30px 0} #otherServices h5{ font-weight: bold; font-size: 20px; margin: 0 0 10px 0px} @media all and (max-width: 1120px) { #otherServices{ padding: 20px 30px; } #otherServices h5{ font-size: 20px; margin: 0 0 20px 0px} #vimeoContainer{height: 400px; position:relative; margin: 0px auto 0 auto; } #vimeoIframe{position:absolute;top:0;left:0;width:100%;height:100%;height: 100%; padding: 0 15px; } } .serviceTitle{font-weight: bold; font-size: 18px; margin: 0 0 0px 0; display:block} .serviceText { padding-right: 20px} .serviceText, .serviceText *{ font-size: 14.5px;} .serviceReadMore{ font-weight: bold;display: block; font-size: 14px; text-decoration: underline; margin: 20px 0 0 0 } a.serviceContactCTA , #content a.serviceContactCTA, #servicesCopy a.serviceContactCTA{ margin: 10px 0 0 0px; text-align: center; font-size: 13.2px; display: block; clear: both; height: 40x; line-height: 40px; border-radius: 100px; background: #5793B3; width:fit-content; color: #fff; padding: 0 36px;transition: all 0.3s} a.serviceContactCTA:hover , #content a.serviceContactCTA:hover , #servicesCopy a.serviceContactCTA:hover{ background-color: #333; color: #fff } #serviceTestimonialWrap { background: #f1f1f1; width: 100%; min-height:240px; padding: 40px 0 10px 0; } #serviceTestimonialWrap h4{ margin: 0 auto; text-align: center; } #serviceTestimonials{ width: 1120px;max-width: 100%; margin: 10px auto; text-align: center} @media all and (max-width: 1120px) { #serviceTestimonials{ padding: 30px 0px;} } #serviceTestimonials #testimonialList li .testimonialText {padding: 0 0px; text-align: center; margin: 0 auto; } @media all and (min-width: 1120px) { #serviceTestimonials #testimonialList li .testimonialText {padding: 0 110px; text-align: center; margin: 0 auto; } } #serviceTestimonials #testimonialList li .testimonialText p, #serviceTestimonials #testimonialList li * { font-size: 15.6px; text-align: center; color: #111 } #serviceTestimonials .testimonialsNav, #serviceTestimonials .tPrev, #serviceTestimonials .tCounter, #serviceTestimonials .tNext {text-indent: -1000000px; position: absolute; left: -100000px; visibility: hidden} #servicesSuccessWrap{ width: 1120px; margin: 30px auto; padding: 20px 0 ; max-width: 100%;} #servicesSuccessWrap .pagetitles{ font-size: 22px; margin: 0 0 20px 0} #content a.CTAblack, .CTAblack, a.CTAblack, * .CTAblack, #content a.CTAwhite, .CTAwhite, a.CTAwhite, * .CTAwhite , #content a.CTAblue, .CTAblue, a.CTAblue, * .CTAblue{ padding: 0px 25px; display: block;width: max-content; font-size: 12.9px; border-radius: 40px; border: none; line-height: 34px;transition:300ms; } #content a.CTAblack, .CTAblack, a.CTAblack, * .CTAblack { color:#fff; background: #000;} #content a.CTAwhite, .CTAwhite, a.CTAwhite, * .CTAwhite { background: #fff; background: #fff;} #content a.CTAblue, .CTAblue, a.CTAblue, * .CTAblue { background: #5793B3; color: #fff;} .CTAblack:hover, .CTAwhite:hover, .CTAblue:hover{ ;text-decoration: underline} .CTAcentered{ margin: 10px auto} #detailsCaseStudiesWrap{ margin: 30px auto 0 auto; background: #f1f1f1; padding: 30px 0 0 0} #detailsCaseStudiesWrap h4{ margin: 5px auto; text-align: center; }