@font-face {
font-family: Sequel-Sans-Heavy;
font-display: swap;
src: url(//whitebros.co.uk/wp-content/themes/sleeky-theme/fonts/Sequel%20Sans%20Heavy%20Body.otf);
font-weight: 400;
}
@font-face {
font-family: Sequel-Sans-Medium;
font-display: swap;
src: url(//whitebros.co.uk/wp-content/themes/sleeky-theme/fonts/Sequel%20Sans%20Medium%20Body.otf);
font-weight: 400;
}
* {
box-sizing: border-box;
}
main {
position: relative;
z-index: 1;
}
main.slide-in-menu-active {
filter: brightness(25%);
}
.column > a {
width: 226px;
}
body {
overflow-x: hidden;
}
body.slide-in-menu-active {
background-color: #000;
}
header {
position: absolute;
z-index: 2;
}
.hide-text {
position: absolute;
left: -14271px;
}
.restrict-hero-height {
max-height: 840px;
}
.btn--green,
#hero-text .buttons .button:last-child.btn--green {
background-color: #949300;
border: none;
}
#menu-primary-menu li a {
font-family: "Noto Sans", sans-serif;
font-weight: 700;
font-size: 16px;
letter-spacing: 0em;
color: #fff;
position: relative;
transition: 0.5s;
}
#menu-primary-menu li a:hover {
color: #939301;
}
#menu-primary-menu a[aria-current="page"]::after {
content: "";
position: absolute;
border-bottom: 4px solid #939301;
left: 25%;
bottom: -12px;
width: 50%;
}
.column > nav {
display: flex;
flex-direction: row;
align-items: center;
}
.side-nav:hover a div,
.side-nav:hover button div {
background-color: #939301;
}
.side-nav {
display: flex;
align-items: center;
}
.side-nav a,
.side-nav button {
transform: skew(-20deg);
cursor: pointer;
position: absolute;
right: 0 !important;
width: 80px;
height: 80px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.slide-close button,
.side-nav button {
background: #fff0;
border: none;
}
.side-nav a div,
.side-nav button div {
width: 30px;
height: 3px;
background-color: #fff;
margin: 4px 0;
transition: 0.5s;
}
.slide-close a,
.slide-close button {
font-family: "Noto Sans", sans-serif;
font-weight: 700;
font-size: 16px;
letter-spacing: 0em;
color: #fff;
position: relative;
transition: 0.5s;
}
.slide-close a:hover,
.slide-close button:hover {
color: #939301;
}
.outer {
background-repeat: no-repeat;
background-size: cover;
background-position: center;
}
.slide-in-menu .outer {
background-image: unset !important;
}
.slide-in-menu ul {
top: 200px;
position: relative;
}
.slide-in-menu .outer .inner {
vertical-align: top;
}
.slide-in-menu .outer .inner ul li {
margin-bottom: 10px;
text-align: left;
}
.slide-in-menu .outer .inner ul li a {
font-family: "Noto Sans", sans-serif;
font-weight: 700;
font-size: 24px;
letter-spacing: 0em;
color: #fff;
position: relative;
transition: 0.5s;
}
.slide-in-menu .outer .inner ul li a:hover {
color: #939301;
}
#hero {
position: relative;
width: 100%;
min-height: 800px;
height: 100vh;
filter: drop-shadow(0 0 10px rgb(0 0 0 / 0.2));
}
#hero-image {
width: 100%;
min-height: 800px;
height: 98vh;
background-image: var(--bg-img);
background-position: 100% 70%;
background-repeat: no-repeat;
background-size: cover;
-webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 90%);
-moz-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 90%);
-o-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 90%);
-ms-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 90%);
clip-path: polygon(0 0, 100% 0, 100% 100%, 0 90%);
-webkit-box-shadow: inset 0 200px 200px 0 rgb(0 0 0 / 0.5), inset 0 -200px 200px 0 rgb(0 0 0 / 0.5);
box-shadow: inset 0 200px 200px 0 rgb(0 0 0 / 0.5), inset 0 -200px 200px 0 rgb(0 0 0 / 0.5);
transition: 0.5s;
filter: brightness(75%);
}
#custom-hero-image {
width: 100%;
min-height: 800px;
height: 100%;
background-image: var(--custom-bg-img);
background-position: 100% 70%;
background-repeat: no-repeat;
background-size: cover;
-webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 90%);
-moz-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 90%);
-o-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 90%);
-ms-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 90%);
clip-path: polygon(0 0, 100% 0, 100% 100%, 0 90%);
-webkit-box-shadow: inset 0 200px 200px 0 rgb(0 0 0 / 0.5), inset 0 -200px 200px 0 rgb(0 0 0 / 0.5);
box-shadow: inset 0 200px 200px 0 rgb(0 0 0 / 0.5), inset 0 -200px 200px 0 rgb(0 0 0 / 0.5);
transition: 0.5s;
filter: brightness(75%);
}
#custom-hero-image.contact-hero {
background-position: 100% 0%;
}
#hero-text {
position: absolute;
width: 100%;
height: 100%;
top: 0;
margin-left: 15%;
display: flex;
flex-direction: column;
justify-content: center;
-webkit-transform: translateY(13%);
-moz-transform: translateY(13%);
-o-transform: translateY(13%);
transform: translateY(13%);
}
#hero-text h3 {
font-family: "Sequel-Sans-Medium";
letter-spacing: 0.2em;
font-size: 18px;
line-height: 27px;
color: #fff;
transition: 0.5s;
}
.page-id-571 #hero-text h3 {
font-weight: 700;
font-size: 22px;
}
#hero-text h1 {
font-family: "Sequel-Sans-Heavy";
letter-spacing: 0em;
font-size: 50px;
line-height: 70px;
color: #fff;
transition: 0.5s;
}
#hero-text p {
font-family: "Noto Sans", sans-serif;
font-size: 16px;
line-height: 24px;
letter-spacing: 0em;
color: #fff;
margin-bottom: 60px;
transition: 0.5s;
}
.buttons {
display: flex;
flex-direction: row;
}
.button {
width: 230px;
height: 56px;
-webkit-transform: skew(-20deg);
-moz-transform: skew(-20deg);
-o-transform: skew(-20deg);
transform: skew(-20deg);
transition: 0.5s;
}
.button a {
position: relative;
display: block;
font-family: "Noto Sans", sans-serif;
font-weight: 700;
font-size: 14px;
letter-spacing: 0.2em;
color: #fff;
-webkit-transform: skew(20deg);
-moz-transform: skew(20deg);
-o-transform: skew(20deg);
transform: skew(20deg);
text-align: center;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.button:hover a {
letter-spacing: 0.3em;
}
#hero-text .buttons {
margin-left: 12px;
}
#hero-text .buttons .button:first-child {
background-color: #949300;
margin-right: 50px;
box-shadow: 0 5px 20px 0 rgb(0 0 0 / 0.5);
-webkit-box-shadow: 0 5px 20px 0 rgb(0 0 0 / 0.5);
}
#hero-text .buttons .button:last-child {
background-color: #fff0;
border: 2px solid #fff;
}
#services {
background: linear-gradient(white 0%, #f0eff5 20%);
-webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 90%);
-moz-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 90%);
-o-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 90%);
-ms-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 90%);
clip-path: polygon(0 0, 100% 0, 100% 100%, 0 90%);
min-height: 800px;
height: auto;
width: 100%;
padding-top: 55px;
padding-bottom: 550px;
}
#services-header {
display: flex;
flex-direction: column;
align-items: center;
padding-top: 100px;
margin-bottom: 70px;
}
#services-header h3 {
font-family: "Sequel-Sans-Medium";
font-size: 18px;
letter-spacing: 0.2em;
line-height: 27px;
color: #959300;
padding-bottom: 15px;
}
#services-header h2 {
font-family: "Sequel-Sans-Heavy";
font-size: 38px;
letter-spacing: 0em;
line-height: 52px;
color: #494949;
padding-bottom: 20px;
text-align: center;
}
#services-header p {
font-family: "Noto Sans", sans-serif;
font-size: 16px;
font-weight: 400;
line-height: 24px;
letter-spacing: 0em;
color: #494949;
text-align: center;
margin-bottom: 60px;
word-break: break-word;
width: 49%;
}
#services-slideshow {
width: 70%;
height: 470px;
margin: 0 auto;
}
#custom-services {
background: linear-gradient(white 0%, #eff0f5 100%);
background: -o-linear-gradient(white 0%, #eff0f5 100%);
background: -webkit-linear-gradient(white 0%, #eff0f5 100%);
background: -moz-linear-gradient(white 0%, #eff0f5 100%);
-webkit-clip-path: polygon(0 0, 100% 0%, 100% 100%, 0 90%);
-moz-clip-path: polygon(0 0, 100% 0%, 100% 100%, 0 90%);
-o-clip-path: polygon(0 0, 100% 0%, 100% 100%, 0 90%);
-ms-clip-path: polygon(0 0, 100% 0%, 100% 100%, 0 90%);
clip-path: polygon(0 0, 100% 0%, 100% 100%, 0 90%);
padding-bottom: 160px;
}
#custom-services-slideshow {
height: 800px;
}
.services-slideshow-container {
position: relative;
height: 400px !important;
transition: 0.5s;
top: 60px;
}
.custom-services-slideshow-container {
position: relative;
height: 720px !important;
top: 10px;
}
#button-container {
position: relative;
width: 140px;
margin: 0 auto;
margin-top: 80px;
}
.services-slideshow-container::before {
content: "";
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
display: inline-block;
}
#services-slideshow .slick-list {
height: 470px;
}
#services-slideshow .slick-list .slick-track {
height: 470px;
}
#custom-services-slideshow .slick-list {
height: 800px !important;
}
#custom-services-slideshow .slick-list .slick-track {
height: 800px;
}
.services-slideshow-container img {
width: 100%;
height: 100%;
object-fit: cover;
-webkit-clip-path: polygon(15% 0%, 100% 0%, 85% 100%, 0% 100%);
-moz-clip-path: polygon(15% 0%, 100% 0%, 85% 100%, 0% 100%);
-o-clip-path: polygon(15% 0%, 100% 0%, 85% 100%, 0% 100%);
-ms-clip-path: polygon(15% 0%, 100% 0%, 85% 100%, 0% 100%);
clip-path: polygon(15% 0%, 100% 0%, 85% 100%, 0% 100%);
}
.custom-services-slideshow-container img {
width: 100%;
height: 100%;
object-fit: cover;
-webkit-clip-path: polygon(15% 0%, 100% 0%, 85% 100%, 0% 100%);
-moz-clip-path: polygon(15% 0%, 100% 0%, 85% 100%, 0% 100%);
-o-clip-path: polygon(15% 0%, 100% 0%, 85% 100%, 0% 100%);
-ms-clip-path: polygon(15% 0%, 100% 0%, 85% 100%, 0% 100%);
clip-path: polygon(15% 0%, 100% 0%, 85% 100%, 0% 100%);
}
.services-slideshow-container img::after {
content: "";
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
display: inline-block;
}
#services-slideshow .slick-list .slick-track .services-slideshow-container.slick-center {
transform: translate(7.5px, -50px);
filter: drop-shadow(0 0 5px rgb(0 0 0 / 0.5));
}
#custom-services-slideshow .slick-list .slick-track .custom-services-slideshow-container.slick-center {
filter: drop-shadow(0 0 5px rgb(0 0 0 / 0.5));
}
#services-slideshow .slick-list .slick-track {
overflow: hidden;
}
.slideshow-text {
position: absolute;
bottom: 60px;
display: flex;
flex-direction: column;
text-align: center;
width: 100%;
transform: translateX(-2%);
height: 50%;
top: 50%;
padding-top: 40px;
-webkit-clip-path: polygon(10% 0%, 95% 0%, 87% 100%, 2% 100%);
-moz-clip-path: polygon(10% 0%, 95% 0%, 87% 100%, 2% 100%);
-o-clip-path: polygon(10% 0%, 95% 0%, 87% 100%, 2% 100%);
-ms-clip-path: polygon(10% 0%, 95% 0%, 87% 100%, 2% 100%);
clip-path: polygon(10% 0%, 95% 0%, 87% 100%, 2% 100%);
background: linear-gradient(transparent 0%, black 100%);
background: -o-linear-gradient(transparent 0%, black 100%);
background: -webkit-linear-gradient(transparent 0%, black 100%);
background: -moz-linear-gradient(transparent 0%, black 100%);
}
.slideshow-text p {
font-family: "Sequel-Sans-Heavy";
font-size: 28px;
letter-spacing: 0em;
line-height: 42px;
color: #fff;
margin-bottom: 20px;
}
.slideshow-text a {
font-family: "Sequel-Sans-Medium";
font-size: 16px;
letter-spacing: 0.2em;
line-height: 24px;
color: #949300;
}
.slideshow-text a svg {
margin-left: 10px;
}
.services-next-arrow,
.services-prev-arrow {
width: 55px;
height: 55px;
cursor: pointer;
border-radius: 50%;
border: none;
background-color: #fff;
}
.custom-services-prev-arrow,
.custom-services-next-arrow {
width: 55px;
height: 55px;
cursor: pointer;
border-radius: 50%;
border: none;
background-color: #fff;
z-index: 99999;
}
.services-next-arrow svg,
.services-prev-arrow svg {
font-size: 22px;
color: #929500;
}
.custom-services-next-arrow svg,
.custom-services-prev-arrow svg {
font-size: 22px;
color: #929500;
}
.services-prev-arrow {
position: relative;
left: -55px;
top: calc(50% + 60px);
transform: translateY(-50%);
}
.custom-services-prev-arrow {
display: inline-block;
position: absolute;
bottom: 0;
left: 0;
}
.services-next-arrow {
position: relative;
left: 100%;
bottom: calc(50% + 50px);
transform: translateY(50%);
}
.custom-services-next-arrow {
display: inline-block;
position: absolute;
bottom: 0;
right: 0;
}
.services-prev-arrow:hover,
.services-next-arrow:hover {
background-color: #929500;
transition: 0.5s;
}
.custom-services-prev-arrow:hover,
.custom-services-next-arrow:hover {
background-color: #929500;
transition: 0.5s;
}
.services-prev-arrow:hover svg,
.services-next-arrow:hover svg {
color: #fff;
font-size: 40px;
transition: 0.5s;
}
.custom-services-prev-arrow:hover svg,
.custom-services-next-arrow:hover svg {
color: #fff;
font-size: 40px;
transition: 0.5s;
}
.services-slideshow-container:hover .slideshow-text a svg {
transform: translateX(10px);
transition: 0.5s;
}
#accreditations {
transform: translateY(-300px);
}
#accreditation-container {
width: 70%;
margin: 0 auto;
display: flex;
flex-direction: column;
align-items: center;
padding: 60px 0;
background-color: #fff;
justify-content: center;
}
#accreditation-container h3 {
font-family: "Sequel-Sans-Medium";
font-size: 18px;
line-height: 24px;
letter-spacing: 0.2em;
color: #949300;
}
#accreditation-container h2 {
font-family: "Sequel-Sans-Heavy";
font-size: 38px;
letter-spacing: 0em;
line-height: 76px;
color: #494949;
margin-bottom: 80px;
}
#accreditation-images {
display: flex;
width: 65%;
justify-content: space-between;
}
#accreditation-images > img {
margin: 0 20px;
height: auto;
width: 100%;
min-height: 64px;
min-width: 64px;
max-width: 115px;
max-height: 115px;
}
#track-record {
width: 100%;
min-height: 80vh;
max-height: 80vh;
}
#track-record-wrapper {
width: 100%;
height: 100%;
display: flex;
flex-direction: row;
}
#track-record-image {
width: 50%;
height: 100%;
}
#track-record-image img {
width: 100%;
min-height: 730px;
height: 100%;
object-fit: cover;
object-position: center;
}
#track-record-text {
width: 50%;
height: 100%;
padding: 0 120px;
display: flex;
flex-direction: column;
align-self: center;
padding-right: 300px;
}
#track-record-text h3 {
font-family: "Sequel-Sans-Medium";
font-size: 18px;
line-height: 27px;
letter-spacing: 0.2em;
color: #949300;
}
#track-record-text h2 {
font-family: "Sequel-Sans-Heavy";
font-size: 38px;
line-height: 76px;
letter-spacing: 0em;
color: #494949;
margin-bottom: 40px;
}
#track-record-text > p:first-of-type {
font-family: "Noto Sans", sans-serif;
font-weight: 700;
font-size: 16px;
line-height: 24px;
letter-spacing: 0em;
color: #494949;
}
#track-record-text > p:last-of-type {
font-family: "Noto Sans", sans-serif;
font-weight: 400;
font-size: 16px;
line-height: 24px;
letter-spacing: 0em;
color: #494949;
margin-bottom: 60px;
}
#track-record-text .buttons .button {
background-color: #949300;
box-shadow: 1px 5px 20px 0 rgb(148 147 0 / 0.4);
-webkit-box-shadow: 1px 5px 20px 0 rgb(148 147 0 / 0.4);
}
.page-id-345 #image-and-card {
margin: 0 auto 120px;
}
#image-and-card {
position: relative;
min-height: 800px;
height: 100vh;
width: 100%;
display: flex;
align-items: center;
}
#custom-image-and-card {
position: relative;
min-height: 800px;
height: 100vh;
width: 100%;
display: flex;
align-items: center;
}
#card a {
font-weight: 700;
color: #949300;
}
#card a:hover {
transition: 0.5s;
text-decoration: underline;
}
#custom-image-and-card > #image-and-card-wrapper > #card {
padding: 100px;
width: 60%;
}
#custom-image-and-card > #image-and-card-wrapper > #card > h2 {
line-height: 52px;
}
#image-and-card-wrapper {
width: 70%;
height: 800px;
margin: 0 auto;
display: flex;
flex-direction: row;
align-items: center;
position: relative;
}
#image-and-card-wrapper > #image {
width: 75%;
height: 800px;
}
#image-and-card-wrapper > #image > img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
#image-and-card-wrapper > #card {
position: absolute;
width: 50%;
height: auto;
right: 0;
padding: 100px;
background-color: #eff0f5;
}
#image-and-card-wrapper > #card > h3 {
font-family: "Sequel-Sans-Medium";
font-size: 18px;
letter-spacing: 0.2em;
line-height: 27px;
color: #949300;
}
#image-and-card-wrapper > #card > h2 {
font-family: "Sequel-Sans-Heavy";
font-size: 38px;
letter-spacing: 0em;
line-height: 52px;
color: #494949;
}
#image-and-card-wrapper > #card > p:first-of-type {
font-family: "Noto Sans", sans-serif;
font-weight: 700;
font-size: 16px;
line-height: 24px;
letter-spacing: 0em;
color: #494949;
}
#image-and-card-wrapper > #card > p:last-of-type {
font-family: "Noto Sans", sans-serif;
font-weight: 400;
font-size: 16px;
line-height: 24px;
letter-spacing: 0em;
color: #494949;
}
#systems-and-requirements {
position: relative;
min-height: 800px;
height: 100vh;
width: 100%;
margin-top: 50px;
filter: drop-shadow(0 0 10px rgb(0 0 0 / 0.2));
}
#systems-and-requirements-image {
position: relative;
height: 100vh;
min-height: 800px;
width: 100%;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
-webkit-clip-path: polygon(0 0, 100% 10%, 100% 100%, 0 90%);
-moz-clip-path: polygon(0 0, 100% 10%, 100% 100%, 0 90%);
-o-clip-path: polygon(0 0, 100% 10%, 100% 100%, 0 90%);
-ms-clip-path: polygon(0 0, 100% 10%, 100% 100%, 0 90%);
clip-path: polygon(0 0, 100% 10%, 100% 100%, 0 90%);
}
#systems-and-requirements-text {
position: absolute;
top: 50%;
transform: translateY(-50%);
left: 15%;
background-color: #fff;
width: 34%;
padding: 90px;
padding-right: 64px;
transition: 0.5s;
}
#systems-and-requirements-text h3 {
font-family: "Sequel-Sans-Medium";
font-size: 18px;
letter-spacing: 0.2em;
line-height: 27px;
color: #949300;
}
#systems-and-requirements-text h2 {
font-family: "Sequel-Sans-Heavy";
font-size: 36px;
letter-spacing: 0em;
line-height: 72px;
color: #494949;
margin-bottom: 20px;
}
#systems-and-requirements-text > p:first-of-type {
font-family: "Noto Sans", sans-serif;
font-weight: 700;
font-size: 16px;
line-height: 24px;
letter-spacing: 0em;
color: #494949;
}
#systems-and-requirements-text > p:last-of-type {
font-family: "Noto Sans", sans-serif;
font-weight: 400;
font-size: 16px;
line-height: 24px;
letter-spacing: 0em;
color: #494949;
margin-bottom: 60px;
}
#systems-and-requirements-text .buttons .button {
background-color: #949300;
margin-left: 12px;
box-shadow: 1px 5px 20px 0 rgb(148 147 0 / 0.4);
-webkit-box-shadow: 1px 5px 20px 0 rgb(148 147 0 / 0.4);
}
#text-and-image {
position: relative;
min-height: 800px;
height: 100vh;
width: 100%;
margin-top: 50px;
filter: drop-shadow(0 0 10px rgb(0 0 0 / 0.2));
}
#text-and-image-wrapper {
position: relative;
height: 100vh;
min-height: 800px;
width: 100%;
-webkit-clip-path: polygon(0 0, 100% 10%, 100% 100%, 0 90%);
-moz-clip-path: polygon(0 0, 100% 10%, 100% 100%, 0 90%);
-o-clip-path: polygon(0 0, 100% 10%, 100% 100%, 0 90%);
-ms-clip-path: polygon(0 0, 100% 10%, 100% 100%, 0 90%);
clip-path: polygon(0 0, 100% 10%, 100% 100%, 0 90%);
display: flex;
flex-direction: row;
}
#text-and-image-image {
width: 50%;
height: 100%;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}
#text-and-image-text {
width: 50%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
background-color: #25292c;
padding-left: 260px;
}
#text-and-image-text h3 {
font-family: "Sequel-Sans-Medium";
font-size: 18px;
letter-spacing: 0.2em;
line-height: 27px;
color: #949300;
}
#text-and-image-text h2 {
font-family: "Sequel-Sans-Heavy";
font-size: 36px;
letter-spacing: 0em;
line-height: 72px;
color: #fff;
margin-bottom: 20px;
}
#points {
margin-bottom: 40px;
padding: 40px;
width: 80%;
padding-left: 0;
}
.point {
display: flex;
flex-direction: row;
}
.list-point {
height: 4px;
width: 12px;
min-width: 12px;
background-color: #949300;
transform: skewX(-5deg);
margin-right: 20px;
position: relative;
top: 14px;
}
.point p {
font-family: "Noto Sans", sans-serif;
font-weight: 400;
font-size: 16px;
line-height: 30px;
letter-spacing: 0em;
color: #fff;
padding: 0;
}
#custom-points {
margin-top: 10px;
}
#custom-points > .point > p {
color: #494949;
}
#box-and-card {
background: linear-gradient(white 0%, #eff0f5 100%);
background: -o-linear-gradient(white 0%, #eff0f5 100%);
background: -webkit-linear-gradient(white 0%, #eff0f5 100%);
background: -moz-linear-gradient(white 0%, #eff0f5 100%);
}
#box-and-card-wrapper {
width: 70%;
margin: 0 auto;
}
.page-id-345 #box-and-card-box {
padding: 0 120px 120px;
}
#box-and-card-box {
padding: 120px;
background-color: #fff;
}
#box-and-card-box h3 {
font-family: "Sequel-Sans-Medium";
font-size: 18px;
letter-spacing: 0.2em;
line-height: 27px;
color: #949300;
text-align: center;
}
#box-and-card-box h2 {
font-family: "Sequel-Sans-Heavy";
font-size: 38px;
line-height: 76px;
letter-spacing: 0em;
color: #494949;
margin-bottom: 20px;
text-align: center;
}
#box-and-card-box > p:first-of-type {
font-family: "Noto Sans", sans-serif;
font-weight: 700;
font-size: 16px;
line-height: 24px;
letter-spacing: 0em;
color: #494949;
text-align: center;
}
#box-and-card-box > p:last-of-type {
font-family: "Noto Sans", sans-serif;
font-weight: 400;
font-size: 16px;
line-height: 24px;
letter-spacing: 0em;
color: #494949;
text-align: center;
}
#box-and-card-box p.box-and-card-box--pipework {
font-family: "Noto Sans", sans-serif;
font-size: 16px;
font-weight: 700;
letter-spacing: 0em;
line-height: 24px;
color: #494949;
}
#box-and-card-card {
width: max-content;
height: auto;
min-width: 900px;
min-height: 300px;
position: relative;
bottom: -200px;
z-index: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
margin: 0 auto;
background-color: #fff;
-webkit-clip-path: polygon(10% 0%, 100% 0%, 90% 100%, 0% 100%);
-moz-clip-path: polygon(10% 0%, 100% 0%, 90% 100%, 0% 100%);
-o-clip-path: polygon(10% 0%, 100% 0%, 90% 100%, 0% 100%);
-ms-clip-path: polygon(10% 0%, 100% 0%, 90% 100%, 0% 100%);
clip-path: polygon(10% 0%, 100% 0%, 90% 100%, 0% 100%);
}
#box-and-card-card.box-and-card-card--contact {
bottom: 175px;
}
#box-and-card-card > p:first-of-type {
font-family: "Sequel-Sans-Heavy";
font-size: 38px;
line-height: 76px;
letter-spacing: 0em;
color: #494949;
margin-bottom: 20px;
padding-top: 0;
}
#box-and-card-card > #telephone {
margin-bottom: 20px;
}
#box-and-card-card > #telephone > p {
font-family: "Sequel-Sans-Heavy";
color: #494949;
font-size: 22px;
font-weight: unset;
}
#box-and-card-card > #telephone > a {
font-family: "Sequel-Sans-Heavy";
color: #949300;
font-size: 22px;
letter-spacing: 0.2em;
transition: 0.5s;
font-weight: unset;
}
#box-and-card-card > #telephone > a:hover {
color: #494949;
}
#box-and-card-card > #email > p {
font-family: "Sequel-Sans-Heavy";
color: #494949;
font-size: 22px;
font-weight: unset;
}
#box-and-card-card > #email > a {
font-family: "Sequel-Sans-Heavy";
color: #949300;
font-size: 22px;
text-transform: uppercase;
letter-spacing: 0.15em;
transition: 0.5s;
font-weight: unset;
}
#box-and-card-card > #email > a:hover {
color: #494949;
}
#about {
min-height: 800px;
height: 100vh;
width: 100%;
background: linear-gradient(to bottom, white 0%, #f0eff5 15%);
}
#about-wrapper {
height: 70%;
width: calc(70% - (2 * 96px));
margin: 0 auto;
display: flex;
flex-direction: row;
position: relative;
top: 50%;
transform: translateY(-50%);
}
#about-image {
position: relative;
width: 60%;
}
#about-image img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
#brochure-container {
position: absolute;
min-width: 350px;
display: flex;
height: auto;
flex-direction: column;
justify-content: center;
align-items: center;
top: 80px;
background-color: #fff;
padding: 50px;
left: -100px;
-webkit-box-shadow: 0 0 30px -20px rgb(0 0 0 / 0.3);
box-shadow: 0 0 30px -20px rgb(0 0 0 / 0.3);
}
#brochure-container p {
font-family: "Sequel-Sans-Heavy";
font-size: 24px;
line-height: 36px;
letter-spacing: 0em;
color: #494949;
padding: 0;
margin-bottom: 20px;
}
#brochure-container a {
font-family: "Sequel-Sans-Medium";
font-size: 16px;
line-height: 24px;
letter-spacing: 0.2em;
color: #949300;
}
#brochure-container a svg {
margin-left: 10px;
}
#brochure-container:hover a svg {
transform: translateX(10px);
transition: 0.5s;
}
#about-text {
width: 40%;
display: flex;
flex-direction: column;
justify-content: center;
padding-left: 120px;
}
#about-text h3 {
font-family: "Sequel-Sans-Medium";
font-size: 18px;
letter-spacing: 0.2em;
line-height: 27px;
color: #949300;
}
#about-text h2 {
font-family: "Sequel-Sans-Heavy";
font-size: 38px;
line-height: 76px;
letter-spacing: 0em;
color: #494949;
margin-bottom: 20px;
}
#about-text p:first-of-type {
font-family: "Noto Sans", sans-serif;
font-size: 16px;
line-height: 24px;
letter-spacing: 0em;
font-weight: 700;
color: #494949;
}
#about-text p:last-of-type {
font-family: "Noto Sans", sans-serif;
font-size: 16px;
line-height: 24px;
letter-spacing: 0em;
font-weight: 400;
color: #494949;
margin-bottom: 60px;
}
#about-text .buttons .button {
background-color: #949300;
margin-left: 12px;
box-shadow: 1px 5px 20px 0 rgb(148 147 0 / 0.4);
-webkit-box-shadow: 1px 5px 20px 0 rgb(148 147 0 / 0.4);
}
footer {
background-color: #f0eff5;
display: flex;
flex-direction: column;
}
.footer-bg-unset {
background-color: unset;
}
.footer-bg-white {
background-color: #fff;
}
.contact-footer {
transform: translateY(-104px);
margin-bottom: -104px;
}
#footer-wrapper {
display: flex;
flex-direction: column;
align-items: center;
--clip-height: 72px;
-webkit-clip-path: polygon(0 0, 100% var(--clip-height), 100% 100%, 0 100%);
-moz-clip-path: polygon(0 0, 100% var(--clip-height), 100% 100%, 0 100%);
-o-clip-path: polygon(0 0, 100% var(--clip-height), 100% 100%, 0 100%);
-ms-clip-path: polygon(0 0, 100% var(--clip-height), 100% 100%, 0 100%);
clip-path: polygon(0 0, 100% var(--clip-height), 100% 100%, 0 100%);
background-color: #504d4d;
border: none;
}
#footer-wrapper > a {
margin-bottom: 80px;
margin-top: 160px;
}
#footer-wrapper .custom-logo-link.custom-logo-link--mt-320 {
margin-top: 320px;
}
#footer-wrapper .custom-logo-link.custom-logo-link--mt-20 {
margin-top: 20px;
}
#footer-wrapper .custom-logo-link.custom-logo-link--mt-160 {
margin-top: 1600px;
}
#footer-wrapper .custom-logo-link.custom-logo-link--mt-120 {
margin-top: 120px;
}
#footer-menus {
display: flex;
flex-direction: row;
width: 60%;
justify-content: space-evenly;
margin-bottom: 100px;
}
#footer-menus > div {
display: flex;
flex-direction: column;
}
#footer-links {
width: 20%;
}
#footer-services {
width: 20%;
}
#footer-other-links {
width: 30%;
}
#footer-contact-us {
width: 30%;
}
#footer-menus > div:last-child {
width: 25%;
}
#footer-links nav ul,
#footer-services nav ul,
#footer-other-links nav ul,
#footer-contact-us {
display: flex;
flex-direction: column;
float: unset;
}
#footer-links nav ul li,
#footer-services nav ul li,
#footer-other-links nav ul li {
padding: 0;
}
#footer-links nav ul li a,
#footer-services nav ul li a,
#footer-other-links nav ul li a {
font-family: "Noto Sans", sans-serif;
font-weight: 700;
font-size: 16px;
line-height: 36px;
letter-spacing: 0em;
color: #fff;
transition: 0.5s;
}
#footer-links nav ul li a:hover,
#footer-services nav ul li a:hover,
#footer-other-links nav ul li a:hover {
color: #939301;
}
#footer-links h3,
#footer-services h3,
#footer-other-links h3,
#footer-contact-us h3 {
font-family: "Sequel-Sans-Heavy";
font-size: 14px;
line-height: 21px;
letter-spacing: 0.2em;
color: #fff;
margin-bottom: 60px;
}
#address,
#telephone,
#email {
display: flex;
flex-direction: row;
}
#address p,
#address a,
#telephone p,
#telephone a,
#email p,
#email a {
padding: 0;
font-family: "Noto Sans", sans-serif;
font-weight: 700;
font-size: 16px;
line-height: 36px;
letter-spacing: 0em;
color: #fff;
}
#address > p:first-child,
#telephone > p:first-child,
#email > p:first-child {
margin-right: 20px;
}
#telephone a,
#email a,
#address a {
transition: 0.5s;
}
#telephone a:hover,
#email a:hover,
#address a:hover {
color: #939301;
}
#bottom-footer {
background-color: #2f2f2f;
min-height: 110px;
height: 110px;
width: 100%;
max-height: max-content;
border: none;
}
#bottom-footer-wrapper {
display: flex;
flex-direction: row;
width: 70%;
margin: 0 auto;
justify-content: space-between;
min-height: 110px;
height: auto;
max-height: max-content;
align-items: center;
}
#bottom-footer-wrapper p {
padding: 0;
color: #fff;
opacity: 0.3;
font-family: "Noto Sans", sans-serif;
font-size: 16px;
line-height: 36px;
font-weight: 700;
letter-spacing: 0em;
}
.slide-close {
top: 60px;
position: relative;
right: 10%;
}
#contact-map {
width: 100%;
background: linear-gradient(white 0%, #eff0f5 50%, white 100%);
background: -o-linear-gradient(white 0%, #eff0f5 50%, white 100%);
background: -webkit-linear-gradient(white 0%, #eff0f5 50%, white 100%);
background: -moz-linear-gradient(white 0%, #eff0f5 50%, white 100%);
display: flex;
align-items: center;
}
#contact-map-wrapper {
width: 100%;
height: 730px;
display: flex;
flex-direction: row;
margin-top: 85px;
margin-bottom: 130px;
}
#contact-map-map {
width: 50%;
height: 100%;
}
#contact-map-map iframe {
width: 100%;
height: 100%;
}
#contact-map-text {
width: 50%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
padding: 0 120px;
}
#contact-map-text h3 {
font-family: "Sequel-Sans-Medium";
font-size: 18px;
letter-spacing: 0.2em;
line-height: 27px;
color: #949300;
}
#contact-map-text h2 {
font-family: "Sequel-Sans-Heavy";
font-size: 38px;
line-height: 76px;
letter-spacing: 0em;
color: #494949;
margin-bottom: 20px;
}
#contact-map-text p {
font-family: "Noto Sans", sans-serif;
font-size: 16px;
line-height: 24px;
letter-spacing: 0em;
font-weight: 700;
color: #494949;
}
#contact-map-details {
background-color: #fff;
padding: 50px;
margin-top: 80px;
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
#contact-map-details #address,
#contact-map-details #email,
#contact-map-details #telephone {
align-items: center;
margin-right: 30px;
}
#contact-map-details #address p {
align-self: baseline;
margin-top: 5px;
}
#contact-map-details #address p,
#contact-map-details #email p,
#contact-map-details #telephone p {
color: #949300;
}
#contact-map-details #address a,
#contact-map-details #email a,
#contact-map-details #telephone a {
color: #494949;
}
#contact-map-details #address a:hover,
#contact-map-details #email a:hover,
#contact-map-details #telephone a:hover {
color: #949300;
}
#contact-section {
width: 100%;
height: 1030px;
}
#contact-section-image {
width: 100%;
height: 100%;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
--clip-height: 72px;
-webkit-clip-path: polygon(0 0, 100% var(--clip-height), 100% 100%, 0 calc(100% - var(--clip-height)));
-moz-clip-path: polygon(0 0, 100% var(--clip-height), 100% 100%, 0 calc(100% - var(--clip-height)));
-o-clip-path: polygon(0 0, 100% var(--clip-height), 100% 100%, 0 calc(100% - var(--clip-height)));
-ms-clip-path: polygon(0 0, 100% var(--clip-height), 100% 100%, 0 calc(100% - var(--clip-height)));
clip-path: polygon(0 0, 100% var(--clip-height), 100% 100%, 0 calc(100% - var(--clip-height)));
display: flex;
flex-direction: row;
}
#contact-section-form {
width: 50%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background: linear-gradient(rgb(0 0 0 / 0.8), rgb(0 0 0 / 0.8));
background: -o-linear-gradient(rgb(0 0 0 / 0.8), rgb(0 0 0 / 0.8));
background: -webkit-linear-gradient(rgb(0 0 0 / 0.8), rgb(0 0 0 / 0.8));
background: -moz-linear-gradient(rgb(0 0 0 / 0.8), rgb(0 0 0 / 0.8));
transition: 0.5s;
}
#contact-section-form h3 {
font-family: "Sequel-Sans-Medium";
font-size: 18px;
letter-spacing: 0.2em;
line-height: 27px;
color: #949300;
width: 70%;
}
#contact-section-form h2 {
font-family: "Sequel-Sans-Heavy";
font-size: 38px;
line-height: 76px;
letter-spacing: 0em;
color: #fff;
margin-bottom: 20px;
width: 70%;
}
#contact-section-blank {
width: 50%;
height: 100%;
transition: 0.5s;
}
#the-contact-form {
width: 70%;
right: 10%;
}
.wpcf7-form {
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
.wpcf7-form label {
font-family: "Noto Sans", sans-serif;
font-weight: 400;
font-size: 18px;
line-height: 30px;
letter-spacing: 0em;
background-color: #e9e9e9;
border: none;
height: 60px;
display: flex;
align-items: center;
}
.wpcf7-form p {
width: calc(50% - (33px / 2));
padding: 0;
margin-bottom: 33px;
}
.wpcf7-form > p:nth-child(6) {
height: 150px;
}
.wpcf7-form > p:nth-child(6) > label {
height: 150px;
}
.wpcf7-form p:nth-child(6),
.wpcf7-form p:nth-child(7) {
width: 100%;
}
.wpcf7-form p:nth-child(7) {
display: flex;
justify-content: center;
align-items: flex-start;
flex-direction: column;
}
.wpcf7-form div:nth-child(8) {
width: 100%;
}
.wpcf7-form p:nth-child(2),
.wpcf7-form p:nth-child(4) {
margin-right: 33px;
}
.wpcf7-form-control {
color: #949300;
border: none;
}
.wpcf7-form-control-wrap {
height: 100%;
width: 100%;
}
.wpcf7-form-control {
height: 100%;
padding-left: 25px;
}
.wpcf7-form-control:last-child {
width: 100%;
height: 100%;
font-size: 14px;
font-family: "Noto Sans", sans-serif;
}
.wpcf7-textarea {
height: 150px;
resize: none;
padding-top: 15px;
}
.wpcf7-submit {
background-color: #949300;
margin-top: 20px;
box-shadow: 0 5px 20px 0 rgb(0 0 0 / 0.5);
-webkit-box-shadow: 0 5px 20px 0 rgb(0 0 0 / 0.5);
font-family: "Sequel-Sans-Heavy";
font-size: 14px;
letter-spacing: 0.2em;
color: #fff;
cursor: pointer;
height: 56px;
text-indent: 0;
border: none;
}
.wpcf7-submit:hover > p {
letter-spacing: 0.3em;
}
.wpcf7-submit > p {
position: relative;
display: block;
font-family: "Noto Sans", sans-serif;
font-weight: 700;
font-size: 14px;
letter-spacing: 0.2em;
color: #fff;
-webkit-transform: skew(20deg);
-moz-transform: skew(20deg);
-o-transform: skew(20deg);
transform: skew(20deg);
text-align: center;
height: 100%;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
transition: 0.5s;
}
.wpcf7-form-control::-webkit-input-placeholder {
color: #949300;
}
.wpcf7-form-control::-moz-placeholder {
color: #949300;
}
.wpcf7-form-control::-ms-placeholder {
color: #949300;
}
.wpcf7-form-control::placeholder {
color: #949300;
}
.wpcf7-response-output {
color: red;
}
#box-and-card-box > form {
width: 100%;
}
#box-and-card-box > form > table {
width: 100%;
}
#box-and-card-box > form > table > tbody > tr > td {
font-family: "Noto Sans", sans-serif;
}
#box-and-card-box > form > table > tbody > tr > td > input {
width: 220px;
height: 30px;
font-family: "Noto Sans", sans-serif;
}
#box-and-card-box > form > table > tbody > tr:nth-child(odd) {
height: 40px;
}
#box-and-card-box > form > table > tbody > tr:nth-child(even) {
height: 70px;
}
@media only screen and (max-width: 1600px) {
.column > nav {
transform: translateX(-10%);
}
#track-record-text {
padding-right: 200px;
padding-left: 60px;
transition: 0.5s;
}
#text-and-image-text {
padding-left: 200px;
}
}
@media only screen and (max-width: 1400px) {
.column > nav {
display: none;
}
#systems-and-requirements-text {
width: 50%;
left: 10%;
}
#services-slideshow {
width: 80%;
}
#accreditation-container {
width: 80%;
}
#about-wrapper {
width: calc(80% - (2 * 96px));
}
#footer-menus {
width: 80%;
justify-content: space-between;
}
#bottom-footer-wrapper {
width: 80%;
}
#track-record-text {
padding-right: 100px;
padding-left: 30px;
transition: 0.5s;
}
#image-and-card-wrapper {
width: 80%;
}
#box-and-card-wrapper {
width: 80%;
}
#text-and-image-text {
padding-left: 120px;
}
}
@media only screen and (max-width: 1300px) {
#systems-and-requirements-text h3,
#text-and-image-text h3 {
font-size: 14px !important;
line-height: 21px !important;
}
#systems-and-requirements-text h2,
#text-and-image-text h2 {
font-size: 28px !important;
line-height: 42px !important;
}
#systems-and-requirements-text p,
#text-and-image-text p {
font-size: 14px !important;
line-height: 21px !important;
}
.list-point {
top: 9px;
}
}
@media only screen and (max-width: 1200px) {
#custom-image-and-card > #image-and-card-wrapper > #card {
padding: 60px;
}
#about-text {
padding-left: 60px;
}
.slideshow-text a {
letter-spacing: 0.1em;
}
.slide-in-menu {
width: 100% !important;
min-width: unset !important;
right: 0 !important;
top: -100%;
}
.slide-in-menu.active {
top: 0 !important;
}
.slide-in-menu .outer {
background-image: linear-gradient(rgb(0 0 0 / 0.6), rgb(0 0 0 / 0.6)), url(https://www.sleeky.uk/clients/whitebros/wp-content/uploads/2021/06/hero-image.jpg) !important;
}
.slide-in-menu ul {
top: unset;
padding-left: 0 !important;
}
.slide-in-menu .outer .inner {
vertical-align: middle;
}
.slide-in-menu .outer .inner ul li {
text-align: center;
}
#image-and-card-wrapper > #card {
padding: 50px;
}
#text-and-image-text {
align-items: flex-start;
padding-left: 40px;
}
#text-and-image-text #points {
width: 80%;
}
#contact-section-form {
width: 100%;
}
#contact-section-blank {
width: 0;
}
#contact-map-text {
padding: 0 60px;
}
#text-and-image-text {
padding-left: 60px;
}
}
@media only screen and (max-width: 1024px) {
#systems-and-requirements-text {
padding: 30px !important;
}
#about-wrapper {
width: calc(90% - (2 * 96px));
}
#footer-menus {
width: 90%;
justify-content: space-evenly;
}
#accreditation-container {
width: 90%;
}
#services-slideshow {
width: 90%;
}
.services-prev-arrow {
position: relative;
left: 0;
top: calc(100% + 120px);
transform: translateY(-50%);
}
.services-next-arrow {
position: relative;
left: calc(100% - 60px);
bottom: -10px;
transform: translateY(50%);
}
#accreditation-images {
width: 90%;
}
#bottom-footer-wrapper {
width: 90%;
}
#footer-menus {
flex-wrap: wrap;
}
#track-record-text {
padding-left: 30px;
padding-right: 30px;
}
#footer-menus > div {
width: calc(100% / 3);
flex-basis: calc(100% / 3);
margin-bottom: 40px;
text-align: center;
}
#footer-menus > div:last-child {
width: 100%;
flex-basis: 100%;
align-items: center;
}
#image-and-card-wrapper {
width: 90%;
}
#box-and-card-wrapper {
width: 90%;
}
#box-and-card-card {
width: 100%;
min-width: unset;
}
#contact-map {
height: auto;
}
#contact-map-details {
margin-bottom: 40px;
}
#contact-map-wrapper {
flex-direction: column-reverse;
height: 100vh;
}
#contact-map-map {
width: 100%;
height: 50%;
min-height: 300px;
}
#contact-map-text {
width: 100%;
height: auto;
min-height: max-content;
max-height: min-content;
padding: 0 40px;
}
#services-header p {
width: 75%;
}
}
@media only screen and (max-width: 900px) {
#brochure-container {
min-width: 100%;
top: calc(100% - 180px);
background-color: #fff;
padding: 50px;
left: 0;
height: 180px;
}
#about-wrapper {
width: 95%;
}
#systems-and-requirements-text {
width: 90%;
left: 5%;
}
#footer-menus {
width: 95%;
justify-content: space-evenly;
}
#accreditation-container {
width: 95%;
}
#services-slideshow {
width: 95%;
}
#bottom-footer-wrapper {
width: 95%;
}
#accreditation-images {
width: 95%;
}
#image-and-card-wrapper {
width: 95%;
}
#box-and-card-wrapper {
width: 95%;
}
#text-and-image-wrapper {
flex-direction: column;
}
#text-and-image-text {
width: 100%;
padding-left: 20px;
align-items: flex-start;
justify-content: flex-end;
padding-top: 60px;
}
#text-and-image-image {
width: 100%;
}
#text-and-image-text > #points {
width: 100%;
}
}
@media only screen and (max-width: 768px) {
#hero-text {
margin-left: 0;
align-items: center;
padding: 20px;
text-align: center;
transform: translateY(1%);
}
.outer {
background-position: right;
}
.services-prev-arrow {
display: none !important;
}
.services-next-arrow {
display: none !important;
}
#hero-image {
background-image: var(--mobile-bg-img); }
#custom-hero-image{
background-image: var(--custom-mobile-bg-img);
}
#services-slideshow {
transform: translateY(-100px);
}
#services {
padding-bottom: 0;
padding-top: 0;
}
#services-slideshow .slick-list .slick-track .services-slideshow-container.slick-center {
transform: unset;
filter: unset;
}
#footer-menus > div {
width: 50%;
flex-basis: 50%;
margin-bottom: 40px;
text-align: center;
}
#track-record {
width: 100%;
min-height: 800px;
height: 100vh;
max-height: max-content;
height: max-content;
}
#track-record-wrapper {
flex-direction: column;
height: auto;
}
#track-record-image {
width: 100%;
height: 50%;
overflow: hidden;
}
#track-record-image img {
min-height: auto;
}
#track-record-text {
width: 100%;
height: 50%;
padding-top: 30px;
}
#about-wrapper {
width: 100%;
flex-direction: column-reverse;
}
#about {
height: max-content;
}
#about-image {
width: 100%;
height: 50%;
display: flex;
flex-direction: column;
}
#brochure-container {
height: 100%;
top: 0;
position: relative;
}
#about-text {
width: 100%;
height: 50%;
padding: 30px;
}
#about-wrapper {
transform: unset;
top: 0;
}
#systems-and-requirements-text {
width: 90% !important;
}
#accreditations {
transform: unset;
}
#image-and-card {
height: auto;
}
#custom-image-and-card {
height: auto;
}
#image-and-card-wrapper {
flex-direction: column-reverse;
height: 100%;
}
#image-and-card-wrapper > #card {
position: relative;
width: 100%;
height: 50%;
}
#custom-image-and-card > #image-and-card-wrapper > #card {
position: relative;
width: 100%;
height: 50%;
}
#image-and-card-wrapper > #image {
width: 100%;
height: 50%;
}
#box-and-card-box {
padding: 60px;
}
#contact-section-form h3,
#contact-section-form h2,
#the-contact-form {
width: 95%;
}
.wpcf7-form {
flex-direction: column;
}
.wpcf7-form p {
width: 100%;
margin-right: 0;
}
.wpcf7-submit {
margin-bottom: 60px;
}
.wpcf7-form p:nth-child(7) {
align-items: center;
}
#services-header p {
width: 90%;
}
}
@media only screen and (max-width: 650px) {
#hero-text h3 {
font-size: 14px;
line-height: 21px;
}
#hero-text h1 {
font-size: 37.5px;
line-height: 75px;
}
#hero-text p {
font-size: 14px;
line-height: 21px;
}
#hero-text .buttons {
flex-direction: column;
flex-direction: column;
width: 100%;
justify-content: center;
align-items: center;
margin: 0;
}
#hero-text .buttons .button {
margin-right: 0;
}
#hero-text .buttons .button:first-child {
margin-bottom: 20px;
margin-right: 0;
}
.button a {
font-size: 11px;
}
#services-header h3,
#accreditation-container h3,
#track-record-text h3,
#systems-and-requirements-text h3,
#about-text h3,
#image-and-card-wrapper > #card h3,
#box-and-card-box h3,
#contact-map-text h3,
#contact-section-form h3 {
font-size: 14px !important;
line-height: 21px !important;
}
#services-header h2,
#accreditation-container h2,
#track-record-text h2,
#systems-and-requirements-text h2,
#about-text h2,
#image-and-card-wrapper > #card h2,
#box-and-card-box h2,
#box-and-card-card > p:nth-child(1),
#contact-map-text h2,
#contact-section-form h2 {
font-size: 28px !important;
line-height: 42px !important;
}
#services-header p,
#track-record p,
#systems-and-requirements-text p,
#about-text p,
#image-and-card-wrapper > #card p,
#box-and-card-box p,
#box-and-card-card > #telephone p,
#box-and-card-card > #telephone a,
#box-and-card-card > #email p,
#box-and-card-card > #email a,
#contact-map-text p {
font-size: 14px !important;
line-height: 21px !important;
}
#about-text {
padding-top: 60px;
}
.slideshow-text p {
font-size: 21px;
line-height: 32px;
}
.slideshow-text a {
font-size: 12px;
line-height: 18px;
}
#brochure-container p {
font-size: 18px;
line-height: 27px;
}
#brochure-container a {
font-size: 12px;
line-height: 18px;
}
#image-and-card {
height: auto !important;
min-height: unset !important;
}
#custom-image-and-card {
height: auto !important;
min-height: unset !important;
}
}
@media only screen and (max-width: 600px) {
#accreditation-images {
flex-wrap: wrap;
justify-content: space-evenly;
}
#accreditation-images > img {
width: 50%;
flex-basis: 50%;
margin-bottom: 20px;
}
#custom-services-slideshow,
#custom-services-slideshow > div,
#custom-services-slideshow > div > div {
height: 600px !important;
transition: 0.5s;
}
#custom-services-slideshow > div > div > div {
height: 520px !important;
transition: 0.5s;
}
}
@media only screen and (max-width: 480px) {
#hero-image,
#services,
#systems-and-requirements-image,
#footer-wrapper,
.custom-services-slideshow-container img,
#text-and-image-wrapper,
#custom-hero-image,
#box-and-card-card,
#custom-services,
#contact-section-image {
clip-path: unset !important;
-webkit-clip-path: unset !important;
-moz-clip-path: unset !important;
-o-clip-path: unset !important;
-ms-clip-path: unset !important;
}
#box-and-card-card {
bottom: -150px;
}
.column {
margin-top: 40px !important;
flex-direction: column !important;
align-items: center;
}
#footer-wrapper .custom-logo-link {
scale: 0.75;
}
.column .side-nav {
transform: translate(40px, 60px);
}
#systems-and-requirements {
margin-top: 0;
}
#systems-and-requirements-text {
padding: 40px !important;
text-align: center;
}
#about-text {
text-align: center;
}
.buttons {
justify-content: center;
}
#track-record-text {
text-align: center;
}
#footer-menus {
margin-bottom: 0;
}
#footer-menus > div {
width: 100%;
flex-basis: 100%;
margin-bottom: 40px;
text-align: center;
}
#footer-wrapper {
-webkit-clip-path: polygon(0 0, 100% 5%, 100% 100%, 0 100%);
-moz-clip-path: polygon(0 0, 100% 5%, 100% 100%, 0 100%);
-o-clip-path: polygon(0 0, 100% 5%, 100% 100%, 0 100%);
-ms-clip-path: polygon(0 0, 100% 5%, 100% 100%, 0 100%);
clip-path: polygon(0 0, 100% 5%, 100% 100%, 0 100%);
}
#services-slideshow {
transform: translateY(-20px);
}
.services-slideshow-container {
top: 0;
}
#services {
padding-bottom: 0;
min-height: 800px;
height: auto;
}
.services-slideshow-container img {
clip-path: unset;
transition: 0.5s;
}
.slideshow-text {
clip-path: unset;
transform: unset;
transition: 0.5s;
}
#track-record-text {
padding: 40px;
}
#systems-and-requirements-text {
padding: 40px;
}
#about-text {
padding: 40px;
justify-content: unset;
}
#accreditations {
transform: unset;
}
#accreditation-images {
flex-direction: column;
align-items: center;
}
#accreditation-images > img {
max-width: 120px;
max-height: 120px;
}
#bottom-footer-wrapper {
flex-direction: column;
}
#track-record {
margin-top: 0;
}
#hero-text h1 {
line-height: initial;
}
#bottom-footer-wrapper p:first-child {
margin-top: 20px;
}
#bottom-footer-wrapper p:last-child {
margin-bottom: 20px;
}
#footer-wrapper .custom-logo-link {
margin-top: 20px;
}
#footer-links h3,
#footer-services h3,
#footer-other-links h3,
#footer-contact-us h3 {
margin-bottom: 30px;
}
#footer-links nav ul li a,
#footer-services nav ul li a,
#footer-other-links nav ul li a {
line-height: 24px;
}
#address p,
#address a,
#telephone p,
#telephone a,
#email p,
#email a {
line-height: 24px;
}
#box-and-card-box {
padding: 20px !important;
}
#custom-services {
padding-bottom: 20px;
}
#button-container {
margin-top: 20px;
}
#image-and-card-wrapper > #card,
#box-and-card-box {
padding: 20px;
}
#box-and-card-card {
bottom: 0;
margin-top: 2.5%;
}
#contact-map-wrapper {
height: unset;
margin-top: 0;
margin-bottom: 20px;
}
#contact-map-text {
padding: 40px 20px;
}
#contact-map-details {
margin-bottom: 0;
padding: 20px;
margin-top: 20px;
}
#contact-section-form {
justify-content: flex-start;
padding-top: 40px;
}
#text-and-image-text {
justify-content: center;
}
#custom-image-and-card > #image-and-card-wrapper {
width: 100%;
}
#custom-image-and-card > #image-and-card-wrapper > #card {
padding: 20px;
}
#services-header {
padding-top: 40px;
margin-bottom: 40px;
}
}
@media only screen and (max-width: 400px) {
.column {
left: 5% !important;
width: 90% !important;
}
}
@media only screen and (max-width: 360px) {
.column > a {
scale: 0.8;
}
#accreditation-images > img {
max-width: 100px;
max-height: 100px;
}
#track-record-text,
#about-text {
padding: 20px;
}
#text-and-image-text {
padding-top: 40px;
}
#box-and-card-card > #email > a {
letter-spacing: 0em;
}
#contact-map-details #address p,
#contact-map-details #telephone p,
#contact-map-details #email p {
margin-right: 10px;
}
#contact-map-details #address p,
#contact-map-details #address a,
#contact-map-details #telephone p,
#contact-map-details #telephone a,
#contact-map-details #email p,
#contact-map-details #email a {
font-size: 14px;
}
}
@media only screen and (max-height: 900px) {
#track-record {
min-height: max-content;
max-height: min-content;
}
#systems-and-requirements-text {
left: 5%;
width: 45%;
padding: 40px;
}
#about-text {
padding: 40px;
}
}