:root {
--global-padding: 20px !important;
--primary-font-family: "HK Grotesk Medium";
--primary-font-colour: white;
--secondary-font-colour: #717167;
--tertiary-font-colour: #ff5252;
--primary-background-colour: #ff5252;
--secondary-background-colour: #f2f3f2;
--tertiary-background-colour: white;
}
@media (max-width: 768px) {
:root {
--global-padding: 10px !important;
}
}
@font-face {
font-family: "HK Grotesk Light";
src: url(//halton.ie/wp-content/themes/halton/fonts/hkgrotesk-light-webfont.woff) format("woff");
src: url(//halton.ie/wp-content/themes/halton/fonts/hkgrotesk-light-webfont.woff2) format("woff2");
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: "HK Grotesk Medium";
src: url(//halton.ie/wp-content/themes/halton/fonts/hkgrotesk-bold-webfont.woff) format("woff");
src: url(//halton.ie/wp-content/themes/halton/fonts/hkgrotesk-bold-webfont.woff2) format("woff2");
font-weight: normal;
font-style: normal;
} .global-padding {
padding: var(--global-padding);
}
.global-padding-inline {
padding-inline: var(--global-padding);
}
.global-padding-block {
padding-block: var(--global-padding);
}
.block {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.full-height {
height: 100vh;
}  .bg-halton-red {
background-color: var(--primary-background-colour);
}
.bg-cream {
background-color: var(--secondary-background-colour);
}
.bg-white {
background-color: var(--tertiary-background-colour);
}
.bg-pattern {
background-image: url(//halton.ie/wp-content/themes/halton/img/bg_pattern.svg); position: relative;
height: 100vh;
margin: 0;
padding: 0;
overflow: hidden;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
width: 100%;
background-attachment: fixed;
}  .font-halton-red {
color: var(--tertiary-font-colour) !important;
}
.font-grey {
color: var(--secondary-font-colour) !important;
}
.font-white {
color: var(--primary-font-colour) !important;
}
.font-red {
color: var(--tertiary-font-colour) !important;
}
.font-primary {
font-family: var(--primary-font-family);
}
.red-title {
color: var(--tertiary-font-colour);
margin-bottom: 1.5rem;
font-family: "HK Grotesk Medium" !important;
}
.regular-title {
color: inherit;
font-family: "HK Grotesk Medium" !important;
}   .featured-image-container {
position: relative;
width: 100%;
height: 100vh; overflow: hidden; }
.featured-image-container .featured-image {
position: absolute;
top: 50%;
left: 50%;
width: 100%;
height: 100%;
object-fit: cover; transform: translate(-50%, -50%);
}  .single-image-container {
margin-block: 2rem;
}  .personnel-text-content {
display: flex;
flex-direction: column;
justify-content: center;
margin-block-end: 4rem;
}
.personnel-image {
aspect-ratio: 1 / 1; width: 100%; display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
background-color: #f0f0f0; }
.personnel-image img {
width: 100%;
height: 100%;
object-fit: cover; object-position: center; }
.personnel-details {
margin-block-start: 0.5rem;
margin-block-end: 1.5rem;
font-size: calc(14px + (16 - 14) * (100vw - 400px) / (1700 - 400));
}  .gallery-layout__selected-project {
width: 100%;
}  .full-width-image-container {
position: relative;
height: 100vh;
margin: 0;
padding: 0;
overflow: hidden;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
width: 100%;
background-attachment: fixed;
}    .p-0 {
padding: 0 !important;
}
.p-1 {
padding: 5px !important;
}
.p-2 {
padding: 10px !important;
}
.p-3 {
padding: 15px !important;
}
.p-4 {
padding: 20px !important;
}
.p-5 {
padding: 30px !important;
} .m-0 {
margin: 0 !important;
}
.m-1 {
margin: 5px !important;
}
.m-2 {
margin: 10px !important;
}
.m-3 {
margin: 15px !important;
}
.m-4 {
margin: 20px !important;
}
.m-5 {
margin: 30px !important;
}  .pt-0 {
padding-top: 0 !important;
}
.pb-0 {
padding-bottom: 0 !important;
}
.pl-0 {
padding-left: 0 !important;
}
.pr-0 {
padding-right: 0 !important;
} .mt-0 {
margin-top: 0 !important;
}
.mb-0 {
margin-bottom: 0 !important;
}
.ml-0 {
margin-left: 0 !important;
}
.mr-0 {
margin-right: 0 !important;
}   *,
*::before,
*::after {
box-sizing: border-box;
} * {
margin: 0;
}
body { line-height: 1.5; -webkit-font-smoothing: antialiased;
} img,
picture,
video,
canvas,
svg {
display: block;
max-width: 100%;
} input,
button,
textarea,
select {
font: inherit;
} p,
h1,
h2,
h3,
h4,
h5,
h6 {
overflow-wrap: break-word;
} p {
text-wrap: pretty;
}
h1,
h2,
h3,
h4,
h5,
h6 {
text-wrap: balance;
} #root,
#__next {
isolation: isolate;
}
.container-fluid::before,
.row::before {
display: none !important;
content: none !important;
}
a {
text-decoration: none !important;
}  .header-block {
width: 100vw;
height: 100px;
position: fixed;
z-index: 9999;
}
.header-relative {
width: 100%;
height: 100%;
position: relative;
}
.logo-container {
position: absolute;
top: 50%;
left: 0;
transform: translate(0, -50%);
width: 100px;
height: auto;
z-index: 9999999;
}
.nav-menu-container {
position: fixed;
top: 0;
right: 0;
}
.navicon-container {
position: absolute;
top: 50%;
right: 0;
transform: translate(0, -50%);
cursor: pointer;
z-index: 1000;
}
.bar {
background: #71716f;
width: 30px;
height: 3px;
margin-top: 6px;
}
.red-bar {
background: var(--primary-background-colour) !important;
}
.off-screen-menu {
display: flex;
flex-direction: column;
}
.navigation {
width: 10vw;
background-color: var(--primary-background-colour);
color: var(--primary-font-colour);
}
.navigation-menu {
width: 7vw;
}
.menu-logo-soup-container {
display: flex;
justify-content: end;
gap: 1rem;
margin-top: auto;
}
.menu-logo-soup-container img {
max-height: 50px; object-fit: contain; margin: 0;
padding: 0;
}  footer {
height: fit-content;
position: relative;
z-index: 9998;
}
.footer-block {
height: fit-content;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.footer-block-start {
display: flex;
justify-content: start;
flex-direction: column;
}
@media (max-width: 768px) {
.footer-block-start {
flex-direction: row;
justify-content: space-between;
}
}
.footer-block-middle {
display: flex;
justify-content: center;
}
@media (max-width: 768px) {
.footer-block-middle {
margin-top: 1rem;
}
}
.footer-block-end {
display: flex;
justify-content: end;
align-items: end;
}
.footer-brand-logo {
font-family: var(--primary-font-family);
color: var(--primary-font-colour);
}
#contact-wrap {
width: 100%;
}
.footer-contact-mobile {
display: none;
}
@media (max-width: 768px) {
.footer-block-end {
justify-content: space-between;
width: 100vw;
margin: 0 auto;
}
.contact-desktop {
display: none;
}
.footer-contact-mobile {
display: block;
}
}
.footer-logo-soup {
display: flex;
}  .carousel-item {
position: absolute;
width: 100%;
height: 100%;
background-size: cover;
background-position: center;
opacity: 0; transition: opacity 0.5s ease-in-out; z-index: 1;
}
.carousel-item.active {
opacity: 1; z-index: 10;
}
.carousel-inner {
position: relative;
width: 100%;
overflow: hidden;
height: 100%; }
.tagline {
position: absolute;
bottom: 0;
right: 0;
z-index: 10;
}  .hero-block {
width: 100vw;
height: 100vh;
}
.hero-image {
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
height: 100%;
}
.hero-image img {
width: 100%; height: auto; object-fit: cover; }
.project-description-block {
width: 100vw;
height: fit-content;
background-color: var(--primary-background-colour);
padding: 5rem 10rem
}
@media (max-width: 1200px) {
.project-description-block {
height: fit-content;
padding: 5rem var(--global-padding);
}
}
.project-description-section {
display: flex;
justify-content: center;
align-items: center;
height: fit-content;
}
@media (max-width: 768px) {
.project-description-section {
height: fit-content;
}
}
.project-description {
font-size: calc(19px + (16 - 14) * (100vw - 400px) / (1700 - 400));
color: var(--primary-font-colour);
}
@media (max-width: 768px) {
.project-description {
padding: 0;
}
}
.project-stats {
color: white;
font-size: calc(14px + (16 - 14) * (100vw - 400px) / (1700 - 400));
width: 10rem;
}
@media (max-width: 1200px) {
.project-stats {
width: 100%;
margin-top: 5rem;
}
}
.large-image-block,
.project-gallery-block {
display: flex;
justify-content: center;
padding-top: 3rem;
}
.large-image-container {
width: 85%;
}
@media (max-width: 768px) {
.large-image-container {
width: 100%;
}
}
.project-further-description-block {
display: flex;
justify-content: center;
padding-block: 3rem;
}
@media (max-width: 768px) {
.project-further-description-block {
height: auto;
}
}
.project-further-description {
width: 45%;
color: var(--secondary-font-colour);
}
@media (max-width: 768px) {
.project-further-description {
width: 100%;
}
}  .home-portfolio-block {
display: flex;
flex-direction: row;
justify-content: center;
padding-block: 3rem;
}
@media (max-width: 768px) {
.home-portfolio-block {
flex-direction: column;
}
}
.home-portfolio-title {
font-family: var(--primary-font-family);
color: var(--tertiary-font-colour);
margin-bottom: 5px;
}
.home-about-block,
.about-block {
background-color: var(--primary-background-colour);
}
.staff-block,
.archive-intro-block {
background-color: var(--tertiary-background-colour);
}
.archive-intro-block {
}
.home-text-block,
.text-block {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
padding-block: 3rem;
}
@media (max-width: 768px) {
.home-text-block {
height: 50vh;
}
}
.home-about-text,
.about-text {
color: var(--primary-font-colour);
}
.staff-text {
color: var(--secondary-font-colour);
}
.archive-intro-text {
color: var(--secondary-font-colour);
}
.about-staff-block {
background-color: var(--tertiary-background-colour);
}
.home-values-background-image {
position: relative;
height: 100vh;
margin: 0;
padding: 0;
overflow: hidden;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
width: 100%;
background-attachment: fixed;
}
@media (max-width: 768px) {
.home-values-background-image {
height: 50vh;
}
}
.home-current-block {
background-color: var(--secondary-background-colour);
}
.home-current-stats {
color: #707270;
font-size: calc(14px + (16 - 14) * (100vw - 400px) / (1700 - 400));
} .container-fluid2 {
background-color: white;
}
.portintro4 {
margin: 0 auto;
}
html,
body {
font-family: "HK Grotesk Light";
font-weight: 300;
line-height: 1.35;
font-size: calc(
17.5px + (32 - 17.5) * (100vw - 320px) / (1700 - 320)
) !important;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
margin: 0;
background-color: white;
}
.row {
margin: 0;
overflow: hidden;
}
li a {
color: white;
}
a {
color: inherit !important;
}
a:link {
color: inherit;
text-decoration: none;
}
a:visited {
text-decoration: none;
}
.a-link {
display: inline-block;
transform-origin: left;
transition: transform 0.3s ease-in-out;
}
.a-link:hover {
transform: scaleX(1.02);
}
.a-link:active {
text-decoration: none;
}  .scrollfade {
opacity: 1;
}
.fade-content > * {
transition: ease-in-out opacity 1.5s, ease transform 1s;
}
.fade-content2 > * {
transition: ease-in-out opacity 2s, ease transform 1.5s;
} .fade-content > *:nth-child(3n + 2) {
transition-delay: 0.1s;
}
.fade-content > *:nth-child(3n + 3) {
transition-delay: 0.2s;
} svg .st0,
.navOpen svg .st0,
.navOpen .red_logo svg .st0 {
fill: #ffffff;
}
.red_logo svg .st0 {
fill: #ff5252;
}
svg {
-o-transition: fill 0.5s ease-in-out;
-moz-transition: fill 0.5s ease-in-out;
-webkit-transition: fill 0.5s ease-in-out;
transition: fill 0.5s ease-in-out;
}
.highlight-block-inner {
display: flex;
align-items: center;
height: 100%;
}
.overlayLandscape,
.overlayPortrait,
.off-screen-menu,
.aboutblock,
.approachlink:hover:after,
.portfoliolink:hover:after,
.highlight-block,
.highlightblock3,
.highlightblock2,
footer,
#contact-wrap,
.aboutblock {
background-color: #ff5252;
}
.personname,
.portfolio,
.title,
.title2,
.contact a:hover {
color: #ff5252;
}
.grecaptcha-badge {
z-index: -1 !important;
display: none !important;
}
div.wpforms-container-full .wpforms-form input[type="submit"],
div.wpforms-container-full .wpforms-form button[type="submit"],
div.wpforms-container-full .wpforms-form .wpforms-page-button {
background-color: transparent !important;
color: white !important;
font-size: 10px;
letter-spacing: 2px;
text-transform: uppercase;
width: 100px;
border-radius: 0;
padding: 5px 15px;
}
button#wpforms-submit-594:hover {
background-color: #71716f !important;
-webkit-transition: all 0.1s ease-in-out;
-o-transition: all 0.1s ease-in-out;
-ms-transition: all 0.1s ease-in-out;
transition: all 0.1s ease-in-out;
}
div.wpforms-container-full .wpforms-form .wpforms-field-label {
color: white !important;
font-family: "HK Grotesk Light";
font-weight: 500 !important;
font-size: 19px !important;
}
div.wpforms-container-full .wpforms-form .wpforms-required-label {
color: white !important;
}
div.wpforms-container-full .wpforms-form input.wpforms-field-medium,
div.wpforms-container-full .wpforms-form select.wpforms-field-medium,
div.wpforms-container-full
.wpforms-form
.wpforms-field-row.wpforms-field-medium {
max-width: 100% !important;
}
.navigation-container {
margin-top: 45%;
} @media screen and (min-width: 300px) {
.overlayLandscape h3,
.overlayPortrait h3 {
font-family: "HK Grotesk Light";
font-size: 23px;
font-weight: 300;
text-align: center;
}
.boxes {
width: 100%;
height: auto;
display: inline-block;
position: relative;
overflow: hidden;
margin-bottom: 1rem;
} .overlayLandscape {
position: absolute;
right: 4.5%;
bottom: 0px;
left: 4.5%;
color: white;
text-align: center;
height: 100%; top: 100%;
}
.boxes:hover .overlayLandscape {
top: 10%;
} .overlayLandscape h3 {
margin-top: 27.5%;
}
.overlay h3 {
padding-left: 10px;
padding-right: 10px;
}
.overlayLandscape {
-webkit-transition: top 0.5s ease-in-out;
transition: top 0.5s ease-in-out;
}
.sizeLandscape {
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
margin-top: 15px;
}
.sizeLandscape {
height: 35vh;
}
.feature {
-webkit-backface-visibility: hidden;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
height: 45vh;
margin-top: 15px;
} .over {
display: none !important;
}
.hero,
.heroPort .fillImg,
.carousel-item {
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
overflow: hidden;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
width: 100%;
background-attachment: fixed;
}
.hero,
.heroPort {
margin: 0;
padding: 0;
position: relative;
}
.hero,
.carousel-item,
.heroPort .fillImg {
height: 100vh;
}
#our_approach .hero {
min-height: 100vh;
height: initial;
}  .navicon-container .bar {
transition: transform cubic-bezier(0.89, 0, 0.08, 1) 0.5s,
width cubic-bezier(0.89, 0, 0.08, 1) 0.5s, background 0.3s;
}
.navicon-container:hover .bar,
.navicon-container.animate:hover .bar {
background: #71716f;
}
.navicon-container.animate .bar {
background: #71716f;
}
.navicon-container.animate .bar:nth-child(1) {
transform: translate(0, 9px) rotate(135deg);
}
.navicon-container.animate .bar:nth-child(2) {
transform: translate(15px, 0px) rotate(90deg);
width: 0;
}
.navicon-container.animate .bar:nth-child(3) {
transform: translate(0, -9px) rotate(225deg);
} .off-screen-menu {
margin: 0;
padding: 0;
top: 0;
right: 0;
position: fixed;
height: 100%;
width: 100vw;
z-index: 999;
transition: transform cubic-bezier(0.78, 0, 0.23, 1) 0.5s;
transform: scale(1, 0);
transform-origin: top;
-webkit-box-shadow: -10px 0px 10px rgba(0, 0, 0, 0.1);
-moz-box-shadow: -10px 0px 10px rgba(0, 0, 0, 0.1);
box-shadow: -10px 0px 10px rgba(0, 0, 0, 0.1);
}
.navigation-container {
width: 100%;
transition: opacity cubic-bezier(0.89, 0, 0.08, 1) 0.2s;
opacity: 0;
}
.navigation-item {
margin-top: -15px;
font-size: calc(27px + (32 - 27) * (100vw - 320px) / (1700 - 320));
line-height: 2;
transition: transform cubic-bezier(0.19, 0.18, 0.04, 1) 0.8s,
opacity cubic-bezier(0.47, 0, 0.94, 0.45) 0.5s;
transform: translate(0, -80px);
opacity: 0;
color: white;
list-style-type: none;
}
.navigation-container a:hover {
color: #71716f;
}
.navicon-container:hover,
.navicon-container:focus {
opacity: 0.5;
} .off-screen-menu.animate {
transform: scale(1, 1);
display: flex;
}
.off-screen-menu.animate .navigation-container {
opacity: 1;
margin-top: auto;
}
.background-container.animate {
opacity: 0.2;
transform: scale(0.95, 0.95);
}
.off-screen-menu.animate .navigation-container .navigation-item {
transform: translate(0, 0);
opacity: 1;
}
.off-screen-menu.animate .navigation-container .navigation-item:nth-child(1) {
transition-delay: 0.25s;
}
.off-screen-menu.animate .navigation-container .navigation-item:nth-child(2) {
transition-delay: 0.35s;
}
.off-screen-menu.animate .navigation-container .navigation-item:nth-child(3) {
transition-delay: 0.45s;
}
.off-screen-menu.animate .navigation-container .navigation-item:nth-child(4) {
transition-delay: 0.55s;
}
.contact {
font-size: calc(14px + (16 - 14) * (100vw - 400px) / (1700 - 400));
color: white;
margin-top: 15vw;
margin-bottom: 60px;
}
.contact2 {
font-size: calc(14px + (16 - 14) * (100vw - 400px) / (1700 - 400));
color: white;
margin-top: 15vw;
}  .logone {
position: relative;
overflow: hidden;
display: block;
}
.default,
.moveable {
z-index: 33333;
width: 17.5vw;
margin-left: 7.5vw;
margin-top: 3.5vw;
}
.default {
position: fixed;
}
.moveable {
position: absolute;
}  .tagline h1 {
color: white;
letter-spacing: -0.5px;
font-size: 23px;
font-weight: 300;
margin: 0 !important;
}  .aboutblock,
.approachblock {
width: 100%;
min-height: 100vh;
padding-top: 45vw;
padding-top: 25%;
}
.aboutblock p {
color: white;
letter-spacing: -0.5px;
}
.textBlock,
.current,
.portintro2 p,
.portintro p,
.portintro4 p,
.portteam,
.team .col-sm-6,
.hightlightbrief p,
.stats2,
.content {
font-weight: 300;
padding-left: 20px;
padding-right: 20px;
}
.textbox-link a,
.aboutlink2 a {
color: inherit;
}
.textbox-link,
.aboutlink2 {
font-size: calc(14px + (16 - 14) * (100vw - 400px) / (1700 - 400));
text-decoration: none;
color: inherit;
padding-top: 3vh;
display: inline-block; }
.aboutlink2 {
padding-left: 0vw;
}
.textbox-link:after,
.aboutlink2:after {
content: "";
display: block;
height: 1px;
width: 0;
background: transparent;
transition: width 0.5s ease, background-color 0.5s ease;
color: inherit;
}
.textbox-link:hover:after,
.aboutlink2:hover:after {
width: 100%;
background: var(--primary-background-colour);
}  .height {
margin-bottom: 25vw; -webkit-backface-visibility: hidden;
}
.aboutBG {
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
width: 100%;
height: 85vw;
display: inline-block;
}
.team p {
margin-top: 1vw;
margin-bottom: 10vh;
color: #717167;
}
.portteam {
color: #717167; }
.personname {
font-size: calc(14px + (16 - 14) * (100vw - 400px) / (1700 - 400));
font-family: "HK Grotesk Medium";
}   .portintro {
width: 100%; }
.portintro p,
.portintro4 p {
color: #717167; }
.portintro2 p {
color: white; position: relative; padding-top: 25%;
padding-bottom: 25%;
}
.approachblock p {
color: #717167;
}
.approachlink a {
color: #717167;
}
.approachlink {
font-size: calc(14px + (16 - 14) * (100vw - 400px) / (1700 - 400));
text-decoration: none;
padding-top: 3vh;
display: inline-block; }
.approachlink:after {
content: "";
display: block;
height: 1px;
width: 0;
background: transparent;
transition: width 0.5s ease, background-color 0.5s ease;
}
.approachlink:hover:after {
width: 100%;
}   .portposition2 {
position: relative;
width: 100%;
height: 85vh;
margin: 0 auto;
}
.portfolio {
margin-bottom: 2vw;
margin-bottom: 5px;
font-family: "HK Grotesk Medium";
width: 100%;
}
.portfolio p,
.portfoliolink,
.portintro p,
.portteam p {
margin: 0;
}
.masonry,
.project-gallery {
-webkit-column-gap: 20px; -moz-column-gap: 20px; column-gap: 20px;
-webkit-column-count: 1; -moz-column-count: 1; column-count: 1;
-webkit-backface-visibility: hidden;
}
.project-gallery img { width: 100%;
margin-bottom: 20px;
}
.portfoliolink {
font-size: calc(14px + (16 - 14) * (100vw - 400px) / (1700 - 400));
text-decoration: none;
display: inline-block;
}
.portfoliolink:after {
content: "";
display: block;
height: 1px;
width: 0;
background: transparent;
transition: width 0.5s ease, background-color 0.5s ease;
-webkit-transition: width 0.5s ease, background-color 0.5s ease;
}
.portfoliolink:hover:after {
width: 100%;
}
.portfoliolink a {
color: #717167;
}   .highlightblock3 { width: 100vw;
position: relative;
}
.hightlightbrief p { font-size: calc(19px + (16 - 14) * (100vw - 400px) / (1700 - 400)); }
.highlight-block-inner p { padding-top: 10%;
padding-bottom: 10%;
}  .highlightblock2 {
min-height: 100vh;
width: 100vw;
position: relative;
bottom: 0;
left: 0;
}  .sect { background-color: #f2f3f2;
}
.current,
.portintro,
.portteam,
.hightlightbrief,
.portintro4 { padding-top: 25%;
padding-bottom: 10%;
} .cur1 .fillImg,
.cur2 .fillImg {
height: 31vh;
min-height: 200px;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
overflow: hidden;
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
}
.cur2 { margin-top: 60px;
}
.title { }
.title,
.title2 {  font-family: "HK Grotesk Medium";
font-size: calc(17.5px + (23 - 17.5) * (100vw - 320px) / (1700 - 320));
}
.title { margin-top: 20px;
}
.stats { top: 5vh;
color: #707270;
font-size: calc(14px + (16 - 14) * (100vw - 400px) / (1700 - 400));
width: 85vw;
}
.stats2 {
color: white;
padding-bottom: 25%;
font-size: calc(14px + (16 - 14) * (100vw - 400px) / (1700 - 400));
}
.stats .line,
.project-stats .line,
.home-current-stats .line {
border-bottom: 1px solid #aaaaa9;
padding-bottom: 15px;
margin-bottom: 15px;
font-family: "HK Grotesk Light";
}
.project-stats .line {
border-bottom: 1px solid white;
}
.line span {
float: left;
width: 50%;
display: inline-block;
}
.line:after,
.line:before {
display: table;
content: " ";
}
.line:after {
clear: both;
}
span.survey {
font-family: "HK Grotesk Medium";
float: right;
text-align: right;
}
.white {
color: white;
} .contactfoot {
font-size: calc(14px + (16 - 14) * (100vw - 400px) / (1700 - 400));
color: white; margin-top: 60px; }
.end {
font-size: 12px;
text-transform: uppercase;
color: white; letter-spacing: 0.5px;
}
.hideMob {
display: none;
}
.end_right {
margin-bottom: 20px;
}
footer img,
.navigation-container img {
max-height: 45px;
margin-bottom: 15px;
margin-right: 10px;
}
.top {
font-size: 27px;
color: white;  line-height: 0.75;
font-family: "HK Grotesk Medium";
letter-spacing: -1px;
}
.small {
font-size: calc(19px + (19 - 12) * (100vw - 400px) / (1700 - 400));
font-family: "HK Grotesk Light";
letter-spacing: 0px;
}
*:focus {
outline: 0;
}
#contact-wrap {
font-size: calc(16px + (16 - 14) * (100vw - 400px) / (1700 - 400));
} #contact-area input,
#contact-area textarea {
padding: 5px;
width: 100%;
color: #fff;
background-color: transparent;
border-top: 1px solid transparent;
border-left: 1px solid transparent;
border-bottom: 1px solid #fff;
border-right: 1px solid transparent;
margin-bottom: 15px;
}
#contact-wrap p {
position: relative;
}
.screen-reader-response,
.wpcf7-validation-errors {
display: none;
}
span.wpcf7-not-valid-tip {
position: absolute;
bottom: -26px;
font-size: 14px;
color: white;
}
span.cf7sr-g-recaptcha-invalid span {
position: relative;
bottom: 0;
}
div.wpcf7-validation-errors,
div.wpcf7-mail-sent-ok {
border: none;
color: white;
padding: 0;
margin: 0;
}
div.wpcf7-validation-errors,
form.sent p,
form.sent .cf7sr-g-recaptcha {
display: none !important;
}
.cf7sr-g-recaptcha {
display: none;
}
#contact-area textarea {
height: 150px;
background-color: transparent;
border-top: 1px solid transparent;
border-left: 1px solid transparent;
border-bottom: 1px solid #fff;
border-right: 1px solid transparent;
}
#contact-area textarea:focus,
#contact-area input:focus {
border-top: 1px solid transparent;
border-left: 1px solid transparent;
border-bottom: 1px solid #fff;
border-right: 1px solid transparent;
}
#contact-area input.submit-button {
font-size: 10px;
letter-spacing: 2px;
text-transform: uppercase;
width: 100px;
border-radius: 0;
background-color: transparent;
border-top: 1px solid #fff;
border-left: 1px solid #fff;
border-bottom: 1px solid #fff;
border-right: 1px solid #fff;
-moz-transition: all 0.1s ease-in-out;
-webkit-transition: all 0.1s ease-in-out;
-o-transition: all 0.1s ease-in-out;
-ms-transition: all 0.1s ease-in-out;
transition: all 0.1s ease-in-out;
}
#contact-area input.submit-button:hover {
color: #fff;
background-color: #71716f;
}
::-webkit-input-placeholder {
color: #fff;
}
:-moz-placeholder { color: #fff;
}
::-moz-placeholder { color: #fff;
}
:-ms-input-placeholder {
color: #fff;
}
textarea {
resize: none;
}
.sitemap p { font-size: calc(14px + (14 - 12) * (100vw - 400px) / (1700 - 400));
font-family: "HK Grotesk Light";
line-height: calc(20px + (14 - 12) * (100vw - 400px) / (1700 - 400));
}
footer a:hover {
color: #707270 !important;
}  .suggest {
height: auto;
width: 100vw;
background-color: #f2f3f3;
}
.content {
position: relative;
top: 5vh;
margin-bottom: 15vh;
}
.relatedOne,
.relatedTwo {
height: 40vh;
min-height: 200px;
width: 100%;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
}
.relatedOne {
float: left;
}
.relatedTwo {
float: right;
} } @media screen and (min-width: 500px) { .relatedOne {
margin-bottom: 0vh;
}
} @media screen and (min-width: 768px) {
.cur1 .fillImg,
.cur2 .fillImg,
.relatedOne,
.relatedTwo {
min-height: 250px;
}
.navOpen .red_logo svg .st0 {
fill: #ff5252;
} .suggest {
min-height: 65vh;
}
.content {
width: 66vw;
margin-bottom: 0vw;
}
.suggest .boxes {
width: 50%;
float: left;
padding-right: 10px;
}
.suggest .boxesR {
padding-right: 0;
padding-left: 10px;
} .relatedOne {
margin-bottom: 0vh;
} .aboutBG {
width: 20vw;
height: 20vw;
}
.highlightblock3 {
min-height: 65vh;
}
.stats2 {
color: white;
font-size: calc(14px + (16 - 14) * (100vw - 400px) / (1700 - 400));
}
.height {
width: 65vw;
padding-bottom: 15vh;
}
.height.team .fade-content {
float: left;
padding-left: 10px;
padding-right: 10px;
}
.portteam {
width: 65vw;
} .sizeLandscape {
width: 32.5vw;
margin-top: 15px;
}
.sizeLandscape {
height: 20vw;
} .hightlightbrief {
margin-left: 10vw;
width: 40vw;
float: left;
}
.stats2 {
width: 30vw;
right: 10vw;
}
.contact {
margin-top: 2rem;
}
.heroPort {
height: 100vh;
}
.navigation-container { top: 13vh;
}
.portposition2 {
height: 45vh;
width: 85%; }
.portposition2,
.portFeat {
margin-top: 10vw;
}
.margB15 {
margin-bottom: 15vw;
}
.highlight-block-inner p {
margin-left: 4vw;
font-size: calc(19px + (16 - 14) * (100vw - 400px) / (1700 - 400));
float: left;
width: 35vw;
padding-bottom: 0;
padding-top: 0;
}
.highlight-block {
width: 45vw;
float: left;
height: 100vh;
}
.heroPort .fillImg {
float: right;
width: 55vw;
} .off-screen-menu {
width: 65vw;
}  .portposition {
width: 65%;
padding-right: 0;
padding-left: 0;
margin: 0 auto;
padding-top: 15vw;
padding-bottom: 15vw;
padding-top: 10%;
}
.masonry img {
margin-top: 15px;
display: block;
width: 32.5vw;
}
.project-gallery img {
display: block;
width: 32vw;
margin-bottom: 20px;
}
.masonry,
.project-gallery {
column-gap: 36px;
-webkit-column-count: 2; -moz-column-count: 2; column-count: 2;
} .over {
display: none !important;
}
.hero2 {
height: 100vh;
}
.tagline h1 {
color: white;
letter-spacing: -0.5px;
font-size: calc(16px + (32 - 16) * (100vw - 400px) / (1700 - 400));
font-weight: 300;
}
.aboutblock {
width: 100%;
min-height: 100vh;
padding-top: 25vh;
}
.textBlock,
.approachblock p,
.current,
.portintro2 p,
.portintro p,
.portintro4 p,
.portteam,
.height,
.content {
max-width: 65vw;
margin-left: auto;
margin-right: auto;
padding-left: 0;
padding-right: 0;
}
.current {
max-width: 85vw;
padding-top: 15vw;
} .approachblock {
width: 100%; padding-top: 25vh;
}
.sect {
min-height: 100vh;
}
.cur1,
.cur2 {
width: 40vw; }
.cur1 {
float: left;
}
.cur2 {
float: right;
margin-top: 0;
}
.title {
padding-bottom: 15px;
padding-top: 0vw;
}
.stats {
width: 40vw;
} .end_right {
left: initial;
right: 0;
margin-bottom: 50px;
}
.end {
display: flex;
}
.top {
line-height: 1;
}
.top,
.place,
.end {
float: left;
width: 50%;
}
#contact-area {
display: block;
} .contactfoot {
margin-top: 0vw;
}
.portintro2 p {
color: white;
max-width: 65vw; }
}  @media screen and (min-width: 992px) {
.portintro2 p {
padding-top: 160px;
}
}
@media screen and (min-width: 1200px) {
.stats2 {
width: 25vw;
right: 17.5vw;
}
.hightlightbrief p {
margin-left: 6.5vw; width: 25vw;
}
.feature {
width: 85vw;
height: 65vh;
}
.portposition2 {
height: 75vh;
width: 65%;
}
.sect {
min-height: 125vh;
}
.approachblock p {
max-width: 45vw;
}
.stats {
width: 25vw;
}
.height {
width: 45vw;
}
.portteam {
width: 45vw;
}
.aboutBG {
width: 14vw;
height: 14vw;
}
.highlight-block-inner p {
margin-left: 7.5vw;
width: 25vw;
}
.highlight-block {
width: 37.5%;
}
.heroPort .fillImg {
width: 62.5%;
}
.textBlock {
max-width: 45vw;
margin: 0 auto;
} .portintro p,
.portintro4 p {
max-width: 45vw;
}
.portintro2 p {
color: white;
max-width: 45vw;
} .aboutblock {
padding-top: 20vh;
}
.portintro2 p {
padding-top: 20vh;
}
.current,
.portintro,
.portteam,
.hightlightbrief,
.portintro4,
.stats2 {
padding-top: 15%;
}
.portposition2,
.portFeat {
margin-top: 0;
}
.top {
font-size: calc(16px + (32 - 16) * (100vw - 400px) / (1700 - 400));
left: 17vw;
}
footer form {
width: 20vw;
margin: 0 auto;
}
.end {
left: 17vw;
bottom: 1.5vw;
}
.end_right {
left: initial;
right: 12vw;
}
.single-portfolio .feature {
margin-top: 10vw;
}
.off-screen-menu {
width: 37vw;
}
.current {
width: 65vw;
}
.cur1,
.cur2 {
width: 25vw; }
.portposition {
padding-top: 5%;
} .hideMob {
display: block;
}
.hideDesk {
display: none;
}
footer img,
.navigation-container img {
max-height: 55px;
}
.top,
.place,
.end {
width: 33.333333333333333%;
}
.navigation-container .end {
width: auto;
}
.end {
clear: both;
}
.end.hideMob {
clear: none; margin-left: 66.666666666666666%;
}
.place,
.end_right {
padding-left: 15%;
}
} @media screen and (min-width: 1400px) {
.highlight-block-inner p {
width: 20vw;
}
}
@media screen and (min-width: 1500px) {
.contact { margin-top: 25vh; }
}
@media screen and (min-width: 1200px) and (max-height: 750px) {
.navigation-container {
top: 90px;
}
.portintro2 p {
padding-top: 160px;
}
.contact {
margin-top: 90px;
}
}
@media screen and (min-width: 1200px) and (max-height: 630px) {
.navigation-item {
font-size: 23px;
}
.navigation-container img {
max-height: 45px;
}
}
@media (hover: none) and (pointer: coarse) {
.hero,
.heroPort .fillImg,
.carousel-item {
background-attachment: initial;
}
}