@charset "utf-8";
/* CSS Document */

/*font-family: "than", sans-serif;
font-weight: 400;
font-style: normal;

font-family: "than", sans-serif;
font-weight: 500;
font-style: normal;

font-family: "roboto", sans-serif;
font-weight: 300;
font-style: normal;

font-family: "roboto", sans-serif;
font-weight: 500;
font-style: normal;*/

/****************************************** 
Transitions
******************************************/
.hidden{opacity: 0;}
.visible{opacity: 1;}
.animated1{animation-duration:0.25s;animation-fill-mode:both}
.animated2{animation-duration:0.5s;animation-fill-mode:both}
.animated3{animation-duration:0.75s;animation-fill-mode:both}
.animated4{animation-duration:1s;animation-fill-mode:both}
.animated5{animation-duration:1.25s;animation-fill-mode:both}
.animated{-webkit-animation-duration:1.3s;-moz-animation-duration:1s;-o-animation-duration:1s;animation-duration:1s;-webkit-animation-fill-mode:both;-moz-animation-fill-mode:both;-o-animation-fill-mode:both;animation-fill-mode:both}
.animated.fadeInDown{-webkit-animation-name:fadeInDown;-moz-animation-name:fadeInDown;-o-animation-name:fadeInDown;animation-name:fadeInDown}
@-webkit-keyframes fadeInDown {
0%{opacity:0;-webkit-transform:translateY(-20px)}
100%{opacity:1;-webkit-transform:translateY(0)}
}
@-moz-keyframes fadeInDown {
0%{opacity:0;-moz-transform:translateY(-20px)}
100%{opacity:1;-moz-transform:translateY(0)}
}
@-o-keyframes fadeInDown {
0%{opacity:0;-o-transform:translateY(-20px)}
100%{opacity:1;-o-transform:translateY(0)}
}
@keyframes fadeInDown {
0%{opacity:0;transform:translateY(-20px)}
100%{opacity:1;transform:translateY(0)}
}
/****************************************** 
Reset
******************************************/
*, *:before, *:after {box-sizing: border-box;}
html {scroll-behavior: smooth;  -webkit-text-size-adjust: none; text-size-adjust: none;}
body{margin: 0}
h1,.h1{font-size:2.1rem}
h2,.h2{font-size:2.0rem}
h3,.h3{font-size:1.9rem}
h4,.h4{font-size:1.8rem}
h5,.h5{font-size:1.7rem}
h6,.h6{font-size:1.6rem}
a {text-decoration-skip-ink: auto;}
a:active,a:hover{outline:0}
img,picture {max-width: 100%;display: block;border:0;}
input,button,textarea,select {font: inherit;line-height:normal}
textarea{overflow:auto}
table{border-collapse:collapse;border-spacing:0}
td,th{padding:0}
td{vertical-align:top}
pre{max-width: 50%;overflow: hidden}
label {padding: 6px 6px 6px 0;display: inline-block;}
input[type="text"], input[type="password"], input[type="email"], select, textarea {width: 100%;padding: 8px; border: 1px solid #000;resize: vertical;background-color: #fff;}
input[type="button"], input[type="submit"], input[type="reset"] {background-color: #333;border: none;color: white;padding: 10px 32px;text-decoration: none;margin: 4px 2px;cursor: pointer;}
input[type="button"]:hover, input[type="submit"]:hover, input[type="reset"]:hover {background-color: #666;}
input[type="file"]::file-selector-button {border: 2px solid #000;color: #000;padding: 8px;background-color: #ffffff;}
input[type="file"]::file-selector-button:hover {background-color: #000;}
input[type="file"]::-webkit-file-upload-button {border: 2px solid #000;color: #666;padding: 8px;background-color: #ffffff;}
input[type="file"]::-webkit-file-upload-button:hover {background-color: #ccc;}
input[type="checkbox"] {position: relative;cursor: pointer;}
input[type="checkbox"]:before {content: "";display: block;position: absolute;width: 16px;height: 16px;top: 0;left: 0;border: 1px solid #000;background-color: white;}
input[type="checkbox"]:checked:after {content: "";display: block;width: 5px; height: 10px;border: solid black;border-width: 0 2px 2px 0;-webkit-transform: rotate(45deg);-ms-transform: rotate(45deg);transform: rotate(45deg);position: absolute;top: 2px;left: 6px;}
.r-section {;padding-left: 50px;}
.r-section input[type="radio"]{display: none;}
.r-container {margin-bottom: 10px;}
.r-container label {position: relative;}
.r-container span::before,
.r-container span::after {content: '';position: absolute;top: 0;bottom: 0;margin: auto;}
.r-container span.radio:hover {cursor: pointer;}
.r-container span.radio::before {left: -52px;width: 45px;height: 25px;background-color: #ccc;border-radius: 50px;}
.r-container span.radio::after {left: -49px;width: 17px;height: 17px;border-radius: 10px;background-color: #fff;transition: left .25s, background-color .25s;}
input[type="radio"]:checked + label span.radio::after {left: -27px;background-color: #EBFF43;}
/****************************************** 
Responsive framework
******************************************/
.container{width:100%;padding:0;margin:0 auto;}
.container .column{float:left;display:inline;-webkit-transition:all .2s ease;-moz-transition:all .2s ease;-ms-transition:all .2s ease;-o-transition:all .2s ease;transition:all .2s ease}
.row{width:90%;margin:0 auto;}
.row::after {content: "";display: block; clear: both;}
/* grid*/
.threeQuarters{width:75%}
.fullWidth{width:100%}
.oneHalf{width:50%;}
.oneThird{width:33.33%}
.twoThirds{width:66.66%}
.oneQuarter{width:25%}
.sixty{width:60%}
.forty{width:40%}
.columns img, .row img{max-width:100%;height:auto}
/* Utility classes*/
.defaultList{margin:0 0 30px 0;padding:0;width:90%}
.defaultList li{list-style-position:outside;margin:0 0 0 1em;padding:0 0 10px 0.8vw}
.centerMe{text-align:center;margin:auto;}
hr {border: 0;border-bottom: 1px solid #000;background: #fff;}
.hr-medium{margin:0 auto 0 auto; width: 60%;max-width: 700px}
.spacer{height: 50px}
.floatRight{float:right!important}
.floatLeft{float:left!important}
.clearAll{clear:both}
.largeText{font-size:120%}
.smallText{font-size:70%;}
.quoteText{font-style: italic;font-weight: 500!important}
a[href^="mailto:"] {color:#213342 ;}
.outer-box-shadow{-webkit-box-shadow: 10px 10px 12px -6px rgba(0,0,0,0.12);-moz-box-shadow: 10px 10px 12px -6px rgba(0,0,0,0.12);box-shadow: 10px 10px 12px -6px rgba(0,0,0,0.12);}
.inner-box-shadow{-webkit-box-shadow: 10px 10px 12px -6px rgba(0,0,0,0.12) inset;-moz-box-shadow: 10px 10px 12px -6px rgba(0,0,0,0.12) inset;box-shadow: 10px 10px 12px -6px rgba(0,0,0,0.12) inset;}
.boldText, b{font-weight:500}
.greenText{color: #004A3B}
.purpleText{color: #3E2E73}
.opacity{opacity: 0.5;}
.displayNone{display:none}
.iFrame{border:0}
.asTable{display:table}
.asCell{display:table-cell;vertical-align:middle;}
.breadCrumbs{margin: 0 0 20px 0;font-weight:400;font-size:80%}
.voidLink a{cursor:default}
.paddingTop{padding-top:20px}
.paddingBottom{padding-bottom:40px}
.marginTop{margin-top:30px}
.marginBottom{margin-bottom:60px}
.btnA{display: inline-block;font-size:22px;text-align:center;font-weight:300;background-color:#00ABE6;color:#fff;padding:20px 60px;margin: 10px 0;white-space: nowrap}
.btnA:hover{background-color:#4A6373; -o-transition:background 0.2s ease-in;-ms-transition:background 0.2s ease-in;-moz-transition:background 0.2s ease-in;-webkit-transition:background 0.2s ease-in;transition:background 0.2s ease-in;}
.btnB{border: 2px solid #fff;display: inline-block;font-size:22px;text-align:center;font-weight:300;background-color:#00ABE6;color:#fff;padding:20px 60px;margin: 10px 0;white-space: nowrap;width: 100%}
.btnB:hover{color:#000; border: 2px solid #00ABE6; background-color:#fff; -o-transition:background 0.2s ease-in;-ms-transition:background 0.2s ease-in;-moz-transition:background 0.2s ease-in;-webkit-transition:background 0.2s ease-in;transition:background 0.2s ease-in;}

.mobileHide{display: block }
.mobileShow{display: none }
@media(max-width:470px){
.mobileHide{display: none }
.mobileShow{display: inline-block}
}

/* responsive containers*/
.video-container{width:100%; margin:20px 0} 
.video-responsive{overflow:hidden;padding-bottom:56.25%;position:relative;height:0;}
.video-responsive iframe{left:0;top:0;height:100%;width:100%;position:absolute;}
.map-responsive{overflow:hidden;padding-bottom:56.25%;position:relative;height:0;margin-right:30px;}
.map-responsive iframe{left:0;top:0;height:100%;width:100%;position:absolute;}
@media(max-width:420px){table,thead,tbody,th,td,tr{display:block}table{margin:0;}th{display: none}} /* breakpoint for tables */
/****************************************** 
APPS styles
******************************************/
/*--- ScrollFade Specific ---*/
.scrollFade {opacity: 1;pointer-events: all;}
.scrollFade--hidden {opacity: 0;pointer-events: none;}
.scrollFade--visible {opacity: 1;pointer-events: all;}
.scrollFade--animate {transition: opacity 0.6s ease-in-out;}
/****************************************** 
Navigation
******************************************/
#toggleButton{background-image:url(../images/justify.svg);background-repeat:no-repeat;background-size: 2rem 2rem;background-position: 50% 50%;display:none;position:absolute;z-index:30;top:10px;right:10px;width:35px;height:35px}
#toggleButton.expanded{background-image:url(../images/x.svg)}
.active{color:#00ABE6!important;}

/* RESPONSIVE */
@media (min-width: 1400px) {
#sideNav{text-align: left; height:auto; width:100%;padding:0; position: relative;z-index: 25;top: 12px}
#main-menu{display: inline-block;width:auto;padding-left: 3vw;margin:auto;font-weight:300;text-align:left;}
.nav a{color:#fff;font-size:15px;font-weight:300;text-decoration: none;line-height: 50px}
.nav ul{padding:0;margin:0;list-style-type:none;background:rgba(255,255,255,1.0);-moz-box-shadow:0 12px 5px rgba(0,0,0,0.1);-webkit-box-shadow:0 12px 5px rgba(0,0,0,0.1);box-shadow:0 12px 5px rgba(0,0,0,0.1)}
.nav-list{text-align:left}
.nav-item{float:left;display:inline;position:relative}
.nav-item a,.nav-item a:visited{color:#fff;padding:10px 12px;text-decoration: none;}
.nav-item a,.nav-item a:visited{color:#fff;padding:10px 12px;text-decoration: none;}
.nav-item:hover .nav-submenu{display:block}
.nav-submenu{display:none;position:absolute;left:0;width:280px;list-style-type:none!important;padding:10px 0 15px 0!important;margin:0;z-index: 9;}
.nav-submenu li{padding:0;margin:0;list-style-position:outside;overflow:hidden;}
.nav-submenu-item a{display:block;padding:6px 15px;margin:0 10px 0 10px;border: none;color: #fff!important;line-height: normal}
.nav-submenu-item a:hover{background-color: #00ABE6;color: #fff!important}
.activeSub{background-color: aliceblue}
}
@media (max-width: 1400px) {
#toggleButton{display:inline-block;}
#sideNav{position:absolute;top:0;left:0;text-align:left;height:300px;width:50%;padding:0;z-index:25;display:none;background-color:#0C1E30;-webkit-box-shadow: 0px 9px 9px -4px rgba(0,0,0,0.23); box-shadow: 0px 9px 9px -4px rgba(0,0,0,0.23);overflow:hidden}
.nav{padding:0;margin:0;height:100%;width:100%;min-width: 320px; text-align: left;text-decoration: none;overflow: hidden}
.nav a{font-size:17px;line-height:2em; font-weight: 300}
.nav li{width:100%;display:block;padding:0;margin:0;max-width: 100%}
.nav-submenu{display:block;padding:0!important;}
.nav-submenu li{display:block;padding:5px 0 0 10px;}
.nav-list{padding: 0 0 0 20px;}
.nav-submenu-item a{display:block;line-height:25px;}
/*.nav-submenu-item li{line-height:20px}*/
.nav-item a,.nav-item a:visited{color:#fff;padding:0;}
.nav-submenu-item a:hover{background-color:#fff;}
/*.active{background-color: #fff;color: #00ABE6!important;background-image:none;}*/
#voidServices{display:none}
.activeSub{border-left: 1px solid #00ABE6}
}
@media (max-width: 400px) {
.nav{width: 100%; }
}
/****************************************** 
PAGE Styles
******************************************/
/* body */
html{width: 100%;height: 100%;}
body {animation: fadeInAnimation ease 1s;animation-iteration-count: 1;animation-fill-mode: forwards;}
@keyframes fadeInAnimation {0% {opacity: 0;}100% {opacity: 1;}}
body {font-family: "roboto", sans-serif;font-size: 1.0em;background-color: #0C1E30;font-weight: 300;color: #000}
/*text*/
a,a:visited{color:#213342;font-weight: 500;text-decoration: none}
p{margin:0 0 20px;font-size: min(max(1.0rem, 2.0vw), 1.2rem); line-height:normal;font-weight: 300;text-align: justify;}
p a{text-decoration: underline}
.heading{font-size: min(max(1.9rem, 2vw), 2.1rem); line-height:normal;color:#213342;font-family: "roboto", sans-serif;font-weight: 500;margin: 40px 0 10px}
.defaultList li, li {font-size: min(max(1.0rem, 2.0vw), 1.2rem); line-height:normal;font-weight: 300}
/*.defaultList li::marker {color:#213342;}*/
h1,.h1,h2,.h2,h3,.h3,h4,.h4,h5,.h5,h6,.h6{margin:0 0 20px 0;font-family: "roboto", sans-serif;font-weight: 500}
h1,.h1{font-size: min(max(2.6rem, 3vw), 2.8rem); line-height:min(max(3.8rem, 3vw), 3.0rem);color:#213342;}
h2,.h2{font-size: min(max(2.6rem, 3vw), 2.8rem); line-height:min(max(3.8rem, 3vw), 3.0rem);color:#213342;}
h3,.h3{font-size: min(max(1.8em, 3vw), 2.0em); line-height:normal;color:#213342;}
h4,.h4{font-size: min(max(1.5rem, 3vw), 2.7rem); line-height:normal;color:#213342;}
h5,.h5{font-size: min(max(1.4rem, 3vw), 1.7rem); line-height:normal;color:#213342;}
h6,.h6{font-size: min(max(1.5rem, 3vw), 1.6rem); line-height:normal;color:#213342;font-weight: 400}
#sticky {padding-top: 20px;bottom: 120px;right:0; width:40px;height:100px;display:none;position:fixed;background: #3AA3DC;box-shadow: 0 0 6px #000;text-align: center;vertical-align: middle;border-radius: 8px 0  0 8px;z-index: 20;}
#arrowDown{position: absolute;left: 0;right: 0;margin: auto;bottom: 30px;display: inline-block;width: 200px;text-align: center}
.chevron-compact-down svg{display:inline-block;width: 100px;height: 100px}
.chevron-compact-up svg{display:inline-block;width: 100%;height: auto}
.chevron-compact-up {will-change: transform;transition: transform 450ms;} 
.chevron-compact-up:hover {transition: transform 125ms;transform: translateY(-10px) }
.chevron-compact-down {will-change: transform;transition: transform 450ms;} 
.chevron-compact-down:hover {transition: transform 125ms;transform: translateY(10px) }
#container-1, #container-1 h1 {color: #fff}
#container-1 .hvr-ripple-out{color: #000}
.sectionTitle{margin-bottom: 10px}
.smallHeader{font-size: min(max(2.0rem, 3vw), 2.2rem); line-height:normal;margin-bottom: 10px;text-transform: uppercase}
/****************************************** 
page styles
******************************************/
#logo{width: 80%;height: auto;max-width: 150px;margin: 0;top: 30px;left: 4vw;position: absolute;z-index: 20;}
.header{background-color:#0C1E30;height: 180px;clear: both}
.spacerBlue{height: 20px; background-color: #3AA3DC;display: inline-block;width: 300px}
.spacerBlueSmall{height: 4px; background-color: #3AA3DC;display: inline-block;width: 100px;margin-bottom: 30px}
.twoColspacer{margin-left: 50%}
@media screen and (max-width:1400px) {
.twoColspacer{margin-left:0}
}
/****************************************** 
SPLASH VAGAS
******************************************/
.splash{background-color:#0C1E30 }
.slider{height: 100vh;min-height: 900px; background-color:#0C1E30;width: 60%;position: relative;z-index: 5;}
.splashTextBlock{height: 100vh;width: 40%; background-color:#0C1E30;}
.splashText{width: 85%; background-color:#0C1E30;padding-left: 4vw;padding-right: 1vw;padding-top: 200px}
.splashText p {margin: 0 0 20px;font-size: min(max(1.1rem, 3vw), 1.2rem);line-height: normal;padding-right: 2vw;color: #fff;text-align: left}
.splashText h1 {font-size: min(max(1.4rem, 2vw), 1.9rem);line-height: normal;color: #fff;background-color: #0c1e30;max-width: 600px;}
@media screen and (max-width:1847px) {
.splashText h1 {font-size: min(max(1.4rem, 1.9vw), 1.7rem);max-width: 900px}
}
@media screen and (max-width:1400px) {
.splashText h1 {font-size: min(max(1.4rem, 2vw), 1.9rem);max-width: 500px}
}
@media screen and (max-width:500px) {
.splashText h1 {font-size: min(max(1.3rem, 2vw), 1.3rem);max-width: 400px}
}
a .textLink {font-size: 1.5rem;font-weight: 400;margin-top: 5rem;border-bottom: 4px solid #3AA3DC;display: inline-block;padding-bottom: 10px;color: #fff}
.slider .slideText{position: absolute;bottom:2vw; z-index: 1000;width: 84%;margin: auto;left:0;right: 0}
.slider .h1 {font-size: min(max(1.6rem, 3vw), 2.4rem);line-height: normal;color: #fff;}
@media screen and (max-width:1400px) {
.slider{height: 70vh;min-height: 400px; background-color:#0C1E30;width: 100%}
.splashTextBlock{height: auto;width: 100%; background-color:#0C1E30;}
.splashText{width:100%;padding-left: 5vw;padding-top: 10vw;padding-right: 3vw;padding-bottom: 10vw}
a .textLink {display: none}
.slider .slideText{position: absolute;bottom:50px; z-index: 1000;width: 100%;margin: auto;padding-left:5vw;right: 0}
}
.slider2{height: 65vh;min-height: 400px;background-color:#0C1E30;width: 100%;position: relative;z-index: 5}
.slider2 .slideText{position: absolute;bottom:2vw; z-index: 1000;width: 90%;margin: auto;left:0;right: 0}
.slider2 .h1 {font-size: min(max(1.6rem, 3vw), 2.4rem);line-height: normal;color: #fff;}
@media screen and (max-width:1400px) {
.slider2{height: 70vh;min-height: 400px; background-color:#0C1E30;width: 100%}
.slider2 .slideText{position: absolute;bottom:50px; z-index: 1000;width: 100%;margin: auto;padding-left:5vw;right: 0}
}
/****************************************** 
Parallax styles
******************************************/
.parallax__container {clip: rect(0, auto, auto, 0);height: 100%;left: 0;overflow: hidden;position: absolute;top: 0;width: 100%;z-index: -100;background-color:#fff}
.parallax {background-position: center;background-repeat: no-repeat;background-size: cover;position: fixed;top: 0;-webkit-transform: translate3d(0, 0, 0);transform: translate3d(0, 0, 0);-webkit-transform-style: preserve-3d;transform-style: preserve-3d;width: 100%;}
.flex-block-container--fuller {height: 80vh;min-height: 1000px;}
/****************************************** 
Splash Parallax
******************************************/
.splash2{height: 65vh;min-height: 400px;/*max-height: 1000px;min-height:850px*/;position: relative;}
.parallax-splash-1{background-image: url("../images/splash-3.webp");background-position: 50% 50%}
.parallax-splash-2{background-image: url("../images/splash-4.webp");background-position: 50% 50%}
.splashFooter a{color: #fff;border-bottom: 3px solid #3AA3DC;display: inline-block;padding-bottom: 3px;} 
.splashFooter{position: absolute;bottom:50px; z-index: 1000;width: 100%;margin: auto;padding-left:5vw;right: 0;font-size: min(max(1.6rem, 3vw), 2.4rem);line-height: normal;color: #fff;}
@media screen and (max-width:1400px) {
.splash2{height: 50vh;position: relative;min-height: 400px}
}
.parallax-footer-1{background-image: url("../images/splash-footer-a.webp");background-position:50% 50%}
.parallax-footer-2{background-image: url("../images/splash-footer-1a.webp");background-position:50% 50%}
.parallax-footer-3{background-image: url("../images/splash-footer-2a.webp");background-position:50% 50%}
.aboutText{padding-top: min(max(60px, 3vw), 70px);padding-bottom: min(max(70px, 3vw), 80px);}
.container-2-text{text-align: left;padding: 6vw 15vw 6vw 4vw ;background-color: #fff;float: right}
@media screen and (max-width:1400px) {
.aboutText p{width: 85%}
.container-2-text{text-align: left;padding: 6vw 15vw 10vw 4vw ;background-color: #fff;float: right}
}
@media screen and (max-width:500px) {
.aboutText p{width: 95%}
.container-2-text{text-align: left;padding: 6vw 10vw 10vw 4vw ;background-color: #fff;float: right}
}
/****************************************** 
Fitout
******************************************/
.grid1 {display: grid;grid-template-columns: repeat(auto-fit, minmax(700px, 1fr)); background-color: #fff}
.grid1 .item {display: flex;min-height: 800px;}
.grid1 .content{text-align: left;padding: 6vw 0 2vw 4vw ;width: 70%}
@media screen and (max-width:1400px) {
.grid1 {grid-template-columns: 100%;}
.grid1 .content{text-align: left;padding: 6vw 0 10vw 4vw ;width: 85%}
.grid1 .item {display: flex;min-height:10px;height: auto}
}
@media screen and (max-width:500px) {
.grid1 .content{text-align: left;padding: 6vw 0 10vw 4vw ;width: 90%}
}
@media screen and (max-width:1400px) {
#fitoutImage1{padding-top: 100%}
#joineryImage1{padding-top: 100%}
}
#fitoutImage1{background-image: url("../images/grid/fitout/image-1a.webp");background-position: 50% 50%;background-size: cover}
#joineryImage1{background-image: url("../images/grid/joinery/image-1a.webp");background-position: 50% 50%;background-size: cover}
/****************************************** 
PROJECTS
******************************************/
.projectsBlock{padding-bottom: 40px}
.projectsBlock .headerText{text-align: center;padding-top: 80px;padding-bottom: 40px}
.headerText .textUnderline{display: inline;color: #0C1E30;font-size: 1.5rem;font-weight: 400;padding-top: 60px;border-bottom: 4px solid #3AA3DC;padding-bottom: 10px;}
.bgWhite{background-color: #F2F2F2}
.project {display: grid;grid-template-columns: repeat(auto-fit, minmax(430px, 1fr));grid-row-gap:2vw; grid-column-gap: 2vw;width: 90%;margin: auto;background-color: #F2F2F2}
@media screen and (max-width:1400px) {
.project {grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));grid-row-gap:4vw;}
}
.project__item {display: flex;color: #000;}
.project__content{text-align: left;width: 100%}
.project__image{height: 340px;background-repeat: no-repeat;background-size: cover;background-position: center;}
.project__content a:hover{opacity: 0.6}
.project h3 {font-size: 1.0rem; margin: 10px 0 0 0;text-transform: uppercase}
.project p  {font-size: 0.8rem;  margin: 0;}
/* project 1*/
.project__1 .image1{background-image: url("../images/projects/Ace-Tate/image-1.webp");background-repeat: no-repeat;}
.project__1 .image2{background-image: url("../images/projects/clarks/image-1.webp");background-repeat: no-repeat}
.project__1 .image3{background-image: url("../images/projects/EMBL/image-1.webp");background-repeat: no-repeat}
.project__1 .image4{background-image: url("../images/projects/science-museum/image-1.webp");background-repeat: no-repeat}
.project__1 .image5{background-image: url("../images/projects/SBT/image-1.webp");background-repeat: no-repeat}
.project__1 .image6{background-image: url("../images/projects/Newhaven-Fort/image-1.webp");background-repeat: no-repeat}
.project__1 .image7{background-image: url("../images/projects/Calvin-Klein/image-1.webp");background-repeat: no-repeat}
.project__1 .image8{background-image: url("../images/projects/GANT/image-1.webp");background-repeat: no-repeat}
.project__1 .image9{background-image: url("../images/projects/Lacoste/image-1.webp");background-repeat: no-repeat}
.project__1 .image10{background-image: url("../images/projects/Oliver-Bonus/image-1.webp");background-repeat: no-repeat}
.project__1 .image11{background-image: url("../images/projects/Watershead-Hotel/image-1.webp");background-repeat: no-repeat}
.project__1 .image12{background-image: url("../images/projects/Treasures-Exeter-Cathedral/image-1.webp");background-repeat: no-repeat}
.project__1 .image13{background-image: url("../images/projects/Cardhu/image-1.webp");background-repeat: no-repeat}
#tateImage{background-image: url("../images/projects/Ace-Tate/image-2.webp");background-position: 50% 50%;background-size: cover;background-repeat: no-repeat}
#clarksImage{background-image: url("../images/projects/clarks/image-2.webp");background-position: 50% 50%;background-size: cover;background-repeat: no-repeat}
#EMBLImage{background-image: url("../images/projects/EMBL/image-2.webp");background-position: 50% 50%;background-size: cover;background-repeat: no-repeat}
#LSMImage{background-image: url("../images/projects/science-museum/image-2.webp");background-position: 50% 50%;background-size: cover;background-repeat: no-repeat}
#SBTImage{background-image: url("../images/projects/SBT/image-2.webp");background-position: 50% 50%;background-size: cover;background-repeat: no-repeat}
#FortImage{background-image: url("../images/projects/Newhaven-Fort/image-2.webp");background-position: 50% 50%;background-size: cover;background-repeat: no-repeat}
#CKImage2{background-image: url("../images/projects/Calvin-Klein/image-3.webp");background-position: 50% 50%;background-size: cover;background-repeat: no-repeat}
#LacosteImage{background-image: url("../images/projects/Lacoste/image-2.webp");background-position: 50% 50%;background-size: cover;background-repeat: no-repeat}
#GANTImage{background-image: url("../images/projects/GANT/image-2.webp");background-position: 50% 50%;background-size: cover;background-repeat: no-repeat}
#OBImage{background-image: url("../images/projects/Oliver-Bonus/image-2.webp");background-position: 50% 50%;background-size: cover;background-repeat: no-repeat}
#waterheadImage{background-image: url("../images/projects/Watershead-Hotel/image-2.webp");background-position: 50% 50%;background-size: cover;background-repeat: no-repeat}
#ExeterImage{background-image: url("../images/projects/Treasures-Exeter-Cathedral/image-2.webp");background-position: 50% 50%;background-size: cover;background-repeat: no-repeat}
#Cardhu{background-image: url("../images/projects/Cardhu/image-2.webp");background-position: 50% 50%;background-size: cover;background-repeat: no-repeat}
@media screen and (max-width:1400px) {
#tateImage,#clarksImage, #EMBLImage, #LSMImage, #SBTImage, #FortImage, #CKImage2, #LacosteImage, #GANTImage, #OBImage, #waterheadImage, #ExeterImage, #Cardhu{padding-top: 100%}
}
/****************************************** 
MAIN
******************************************/
.main{padding:3vw 0;clear: both}
.bgGrey{background-color:#C9D0D6 }
/****************************************** 
ALT TEMPLATE
******************************************/
.header2{background-color:#C9D0D6;height: 180px;clear: both}
.secondaryPage .row{max-width:1000px;text-align: center }
.secondaryText{text-align: center;margin: auto;}
.secondaryText p{text-align: center;font-size:1.4em}
.secondaryText h1{font-size: min(max(2.6rem, 3vw), 2.8rem); line-height:min(max(3.8rem, 3vw), 3.0rem);color:#213342;}
.secondaryDetails{text-align-last: center;margin: 40px 0 400px}
.spacerBlueCenter{height: 20px; background-color: #3AA3DC;display: inline-block;width: 300px;}
.secondary-LinkedIn-icon{width: 40px;height: 40px;margin:30px auto 0 auto}
.divider{text-align: center;background-color: #0C1E30}
#secondaryPage .main{padding:80px 0 30px 0;clear: both}
#secondaryPage{background-color: #fff;}
@media (min-width: 1400px) {
#secondaryPage .nav a{color:#0C1E30;}
}
/****************************************** 
FOOTER
******************************************/
.footer{color: #fff;padding:60px 0 20px 0;background-color: #0C1E30;min-height:200px;clear: both}
.clientLogos{width: 90%;height: auto;max-width: 800px;}
.footer a{color: #fff}
.footerContacts{text-align: right}
.footerFooter{margin-top: 130px;font-size: 80%}
.LinkedIn-icon{width: 40px;height: 40px; float: right}
@media (max-width: 1400px) {
.footerContacts{text-align: left;margin-top: 80px}
.footerFooter{margin-top: 10px}
}
/****************************************** 
Media queries
******************************************/
/* RESPONSIVE */
@media (max-width: 1400px) {
.threeQuarters{width:100%}
.oneHalf{width:100%;}
.oneThird{width:100%}
.twoThirds{width:100%}
.oneQuarter{width:100%}
#logo{left: 5vw;}
}
@media (max-width: 400px) {
p{padding-right:0}
}