@import url(/css/reset.css);
@import url(/css/text.css);
/*
* Skeleton V1.2
* Copyright 2011, Dave Gamache
* www.getskeleton.com
* Free to use under the MIT license.
* http://www.opensource.org/licenses/mit-license.php
* 6/20/2012
*/

/* Table of Content
==================================================
	#Site Styles
	#Page Styles
	#Media Queries
	#Font-Face */

/* #Site Styles
================================================== */
html {
  height: 100%;
}
body {
  font: 18px/24px "Roboto", Arial, sans-serif;
  color: #fffbeb;
  font-weight: 300;
  background: #06262d;
  height: 100%;
}

.animatein {
  visibility: hidden;
}
.resizeimg {
  max-width: 100%;
  height: auto;
}

/**** navigation ****/
.navholder {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9;
}
.navhide {
  overflow: hidden;
  width: 79px;
  height: 100vh;
  background: #06262d;
  border-right: 1px solid #315750;
}
.navholder .nav {
  list-style-type: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100vh;
}
.navholder .nav a {
  flex: 0 1;
  flex-basis: calc(100vh / 7);
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  color: #3fbb9a;
  text-transform: uppercase;
  font-size: 15px;
  font-weight: 500;
  writing-mode: tb-rl;
  transform: rotate(-180deg);
  letter-spacing: 0.02em;
  text-align: center;
  font-size: 15px;
  line-height: 1.2;
}
.navholder .nav a:hover {
  text-decoration: underline;
}
.navholder .nav a:nth-child(1),
.navholder .nav a:nth-child(2),
.navholder .nav a:nth-child(3),
.navholder .nav a:nth-child(4),
.navholder .nav a:nth-child(5),
.navholder .nav a:nth-child(6),
.navholder .nav a:nth-child(7) {
  border-top: 1px solid #315750;
}

.navholder .nav a.navlogo {
  display: none;
}

.wholepage {
  margin-left: 0px;
  width: 100%;
  position: relative;
}
.innerpageholder {
  margin-left: 80px;
  width: calc(100% - 80px);
  position: relative;
  background: #fff;
}

.breadcrumbs {
  display: flex;
  align-items: flex-end;
  font-size: 14px;
  padding: 30px 8px;
}
.breadcrumbs a {
  color: #06262d;
}
.breadcrumbs img {
  display: block;
}
.breadcrumbs .slash {
  margin: 0 16px;
}

.pageheader {
  margin: 0 8px;
  padding: 4vw 0;
  border-bottom: 1px solid #06262d;
  margin-bottom: 4vw;
}
.noborder {
  border: 0;
}
.pageheader h1 {
  margin: 0;
  width: 60%;
  min-width: 240px;
}
.pageheader p {
  margin: 2vw 0 0 0;
  font-size: 22px;
  line-height: 1.3em;
  font-weight: 400;
  width: 50%;
  min-width: 240px;
}

.bannerimg {
  height: 70vh;
  background: 50% 50% no-repeat;
  background-size: cover;
}

.twocolpage {
  position: relative;
  background: #fff;
  color: #06262d;
  padding: 0 calc(8vw - 8px);
  width: calc(100% - 16vw + 16px);
}
.twocols {
  display: flex;
}
.twocols .col {
  flex: 0 0;
  flex-basis: calc(50% - 16px);
  margin: 0 8px;
}
.twocols .col > h2,
.twocols .col > p {
  width: 65%;
  min-width: 280px;
}

/**** general page stuff ****/
b {
  font-weight: 500;
}

h1 {
  font-weight: 400;
  font-size: 4vw;
  line-height: 1em;
}
h2 {
  font-size: 28px;
  line-height: 1.3em;
  font-weight: 500;
}
h3 {
  font-size: 22px;
  line-height: 1.3em;
  font-weight: normal;
}
h4 {
  font-weight: 700;
  font-size: 18px;
  line-height: 1.3em;
}

.whitebutton {
  color: #06262d;
  display: inline-block;
  background: #fffbeb;
  padding: 10px 20px;
  border-radius: 20px;
  height: 20px;
  line-height: 20px;
  text-decoration: none;
  clear: both;
  font-weight: 400;
}
.study .whitebutton {
  color: #fff;
  background: #06262d;
}
.whitebutton2 {
  color: #fff;
  background: #06262d;
}
.whitebutton:hover {
  background: #3fbb9a;
}

/* #Page Styles
================================================== */

/**** home ****/
.slideholder {
  position: relative;
  margin-left: 80px;
  width: calc(100% - 80px);
  overflow: hidden;
}
.homebgs {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  position: absolute;
  top: 0;
  left: 0;
}
.slide1bg {
  position: absolute;
  top: 0;
  left: 0;
  height: 100vh;
  display: flex;
  z-index: 10;
  transition: left 1s;
  width: 75%;
}
.slide1bg .fillbg {
  flex: 1 1;
  height: 100%;
  background: #06262d;
}
.slide1bg .edgebg img {
  height: 100vh;
  width: auto;
}
.shadowtext {
  text-shadow: 2px 2px 9px rgba(0, 0, 0, 0.5);
}
.londonbg {
  height: 100vh;
  background: bottom right url(/img/content/home/london.png) no-repeat;
  background-size: cover;
  width: 100%;
  clip-path: polygon(0% 0%, 40vw 0%, 100% 100%, 0% 100%);
}
.londonbg .slide {
  width: 100%;
  height: 100%;
  background: 50% 50% no-repeat;
  background-size: cover;
}

.londonbg video {position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;object-position: 50% 50%;}


.patternbg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: url(/img/content/home/homebg.svg) 50% 50% no-repeat;
  background-size: auto 100%;
  opacity: 0.5;
  transition: left 1s;
  z-index: 0;
}

/*.patternbg {background:50% 50% no-repeat url(/img/content/home/london.jpg);background-size:cover}*/

.slide2bg {
  position: absolute;
  top: 0;
  left: 0;
  height: 100vh;
  display: flex;
  z-index: 10;
  transition: left 1s;
}
.slide2bg .fillbg {
  flex: 0 0 45vw;
  height: 100%;
  background: #3fbb9a;
}
.slide2bg .leftedgebg img {
  margin-right: -1px;
}
.slide2bg .leftedgebg img,
.slide2bg .rightedgebg img {
  height: 100vh;
  width: auto;
}

.featuredbg,
.featuredbg2,
.featuredbg3 {
  width: 100vw;
  height: 100vh;
  background: 50% 50% no-repeat;
  background-size: cover;
  position: absolute;
  top: 0;
  left: 0;
  transition: left 1s;
  z-index: 1;
}
.featuredbg:before,
.featuredbg2:before,
.featuredbg3:before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background-image: linear-gradient(
    217deg,
    rgba(6, 38, 45, 0.4) 31%,
    rgba(6, 38, 45, 0) 95%
  );
}

.slide4bg {
  position: absolute;
  top: 0;
  left: 0;
  height: 100vh;
  display: flex;
  z-index: 10;
  transition: left 1s;
}
.slide4bg .fillbg {
  flex: 0 0 90vw;
  height: 100%;
  background: #315750;
}
.slide4bg .leftedgebg img,
.slide4bg .rightedgebg img {
  height: 100vh;
  width: auto;
}
.slide4bg .pattern {
  height: 100vh;
  width: auto;
}

.halfpatternbg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: url(/img/content/home/homehalfbg.svg) 50% 50% no-repeat;
  background-size: auto 100%;
  opacity: 0.5;
  transition: left 1s;
  z-index: 0;
}

.homelogo {
  width: 180px;
  height: 60px;
  background: top left url(/img/content/logo.svg) no-repeat;
  background-size: contain;
  position: absolute;
  top: 10vh;
  left: 8vw;
}
/* .introcontent {position:absolute;bottom:10vh;left:8vw;width:45vw} */
/* .introcontent {position:absolute;bottom:37vh;left:56vw;width:27vw} */
.introcontent {
  position: absolute;
  bottom: 32vh;
  /*left: 53vw;*/
  left: 49vw;
  width: 33vw;
}

.homeslide h1 {
  margin-bottom: 3vw;
}
.linetext {
  padding-left: 8vw;
  margin: 0;
  font-weight: 300;
  font-size: 18px;
  line-height: 24px;
  position: relative;
}
.linetext p:last-child {
  margin: 0;
}
.linetext:before {
  content: "";
  display: block;
  width: 6vw;
  height: 2px;
  background: #fffbeb;
  position: absolute;
  top: 10px;
  left: 0;
}

.slidenumbers {
  font-size: 12px;
  display: flex;
  align-items: center;
  color: rgba(255, 251, 235, 0.4);
  transform: rotate(-90deg);
  transform-origin: 0 0;
  position: relative;
  left: -3vw;
  top: calc(36px + 3vw);
}
.slidenumbers .slideline {
  flex: 0 0 2vw;
  height: 1px;
  background: #fffbeb;
  opacity: 0.4;
  margin: 0 5px;
}
.slidenumbers span {
  color: #fffbeb;
}
.scroll {
  position: absolute;
  right: 0;
  top: 45vh;
  height: 10vh;
  display: flex;
  justify-content: right;
  align-items: center;
  opacity: 0;
  transition: opacity 0.5s;
}
.introslide .scroll {
  opacity: 1;
}
.scroll:before {
  content: "Scroll.";
}
.scroll:after {
  content: "";
  height: 2px;
  flex: 0 0 3vw;
  background: #fffbeb;
  margin-left: 10px;
}

.servicescontent {
  position: relative;
  width: calc(100% - 16vw);
  margin: 10vh 8vw;
  height: 80vh;
  display: flex;
}
.servicesgrid {
  flex: 0 0;
  flex-basis: calc(40vw + 32px);
}
.servicerow {
  display: flex;
  width: 100%;
}
.servicesgrid .servicerow:first-child {
  margin-bottom: 16px;
}
/*.servicesgrid .servicerow:last-child {position:relative;left:calc(20vw + 16px)}*/
.servicesgrid .service {
  height: calc(40vh - 8px);
  flex: 0 0 20vw;
  background: #fffbeb;
  margin-right: 16px;
  color: #315750;
  position: relative;
  transform-origin: 50% 50%;
  transform: scale(0%);
  transition: transform 0.5s;
}
.servicesgrid .servicerow:nth-child(1) .service:nth-child(1) {
  transition-delay: 0.2s;
}
.servicesgrid .servicerow:nth-child(1) .service:nth-child(2) {
  transition-delay: 0.4s;
}
.servicesgrid .servicerow:nth-child(2) .service:nth-child(1) {
  transition-delay: 0.6s;
}
.servicesgrid .servicerow:nth-child(2) .service:nth-child(2) {
  transition-delay: 0.8s;
}
.servicesslide .servicesgrid .service {
  transform: scale(100%);
}
.service h4 {
  padding-left: 24px;
  background: url(/img/content/home/services/servicedot.svg) top 5px left
    no-repeat;
  background-size: 16px auto;
  margin: 20px;
  position: relative;
  z-index: 200;
}
.service .icon {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: 50% 50% no-repeat;
  background-size: 50% auto;
}
.service .more {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 40px;
  height: 40px;
  background: #315750 url(/img/content/home/services/more.svg) 50% 50% no-repeat;
  background-size: 50% auto;
}
.service .info {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 100;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fffbeb;
  background: #315750;
  font-size: 16px;
  display: none;
}
.service .info .infocontent {
  margin: 0 20px;
  padding: 2vh 0;
  border-top: 1px solid rgba(255, 251, 235, 0.15);
  border-bottom: 1px solid rgba(255, 251, 235, 0.15);
}
.service .info .infocontent a {
  color: #3fbb9a;
}
.service .info .infocontent a.whitebutton {
  color: #315750;
  margin-top: 15px;
}

.service:hover .info {
  display: flex;
}
.service:hover h4 {
  color: #fffbeb;
  display: none;
}

.servicestext {
  margin-left: 80px;
  transition: opacity 0.5s 0.6s;
  opacity: 0;
}
.servicestext a {
  color: #fffbeb;
}
.servicesslide .servicestext {
  opacity: 1;
}
.carbonlogo {
  width: 8vw;
  height: 8vw;
  border: 10px solid #fff;
  border-radius: 50%;
  background: #fff left center url(/img/content/home/services/carbon.svg)
    no-repeat;
  background-size: contain;
}

.featuredtext {
  position: absolute;
  bottom: 10vh;
  left: 8vw;
  transition: opacity 0.5s 0.6s;
  opacity: 0;
}
.featuredslide .featuredtext {
  opacity: 1;
}
.glilogo {
  width: 230px;
  height: 100px;
  background: bottom left no-repeat url(/img/content/casestudies/gli/gli.svg);
  background-size: contain;
  margin-bottom: 20px;
}
.homesection .glilogo {
  width: 100%;
  height: 20vh;
  background: bottom left no-repeat
    url(/img/content/casestudies/gli/gli-blue.svg);
  background-size: contain;
  margin-bottom: 20px;
}
.homesection .ullogo {
  width: 186%;
  height: 22vh;
  background: bottom left no-repeat url(/img/content/home/logo_ul.svg);
  background-size: contain;
  margin-bottom: 20px;
}
.ullogo {
  width: 130%;
  height: 22vh;
  background: bottom left no-repeat url(/img/content/home/logo_ul2.svg);
  background-size: contain;
  margin-bottom: 20px;
}
.ullogo.glilogo {
  margin-bottom: 69px;
  margin-top: -35px;
  width: 470px;
  max-width: 100%;
}
@media (min-width: 1px) and (max-width: 767px) {
  .ullogo.glilogo {
    margin-top: 24px;
  }
}

.Urban_text {
  display: flex;
}
@media (min-width: 1px) and (max-width: 1023px) {
  .Urban_text {
    display: flex;
    flex-direction: column;
  }
  .Urban_text p {
    width: 100%;
    margin-bottom: 20px;
    font-size: 18px;
  }
}

.casetext {
  position: absolute;
  top: 10vh;
  right: 8vw;
  transition: opacity 0.5s 0.6s;
  opacity: 0;
  width: 30vw;
}
.caseslide .casetext {
  opacity: 1;
}

.casestudies {
  display: flex;
  flex-wrap: wrap-reverse;
  margin: 10vh 8vw 10vh 16vw;
}
.casestudies .study {
  flex: 0 0 30vw;
  height: calc(40vh - 8px);
  background: 50% 50% no-repeat;
  background-size: cover;
  margin: 0 16px 16px 0;
  opacity: 0;
  transition: opacity 0.5s;
}
.caseslide .casestudies .study {
  opacity: 1;
}
.casestudies .study:nth-child(3) {
  transition-delay: 0.2s;
}
.casestudies .study:nth-child(1) {
  transition-delay: 0.4s;
}
.casestudies .study:nth-child(2) {
  transition-delay: 0.6s;
}

.homecontactholder {
  height: 100vh;
  border-left: 16vw solid #315750;
  background: bottom left no-repeat url(/img/content/home/darkgreenright.svg);
  background-size: auto 100vh;
  position: relative;
}
.homecontact {
  display: flex;
  align-items: flex-start;
  position: absolute;
  bottom: 15.8vh;
  left: 12vh;
  font-size: 16px;
  opacity: 0;
  transition: opacity 0.5s 0.6s;
}
.contactslide .homecontact {
  opacity: 1;
}
.homecontact .logo {
  width: 30vw;
  position: relative;
  left: -0.4vw;
  flex: 0 0;
  flex-basis: 30vw;
}
.homecontact .logo img {
  width: 100%;
  height: auto;
}
.homecontact .member {
  margin-left: 6vw;
}
.homecontact a {
  color: #3fbb9a;
}

.homenews {
  margin: 0 40px;
  max-width: 600px;
  flex: 0 1 50%;
}

/* .introslide .slide1bg {left:0} */
.introslide .slide1bg {
  left: -3vw;
}
.introslide .patternbg {
  left: 0vw;
}
/* .introslide .slide2bg {left:calc(100vw - 50vh - 80px)} */
.introslide .slide2bg {
  left: 100vw;
}
.introslide .featuredbg {
  left: 100vw;
}
.introslide .featuredbg2 {
  left: 100vw;
}
.introslide .featuredbg3 {
  left: 100vw;
}
.introslide .slide4bg {
  left: 100vw;
}
.introslide .halfpatternbg {
  left: 100vw;
}

.servicesslide .slide1bg {
  left: -110vw;
}
.servicesslide .patternbg {
  left: -15vw;
}
.servicesslide .slide2bg {
  left: -5vw;
}
.servicesslide .featuredbg {
  left: 70vw;
}
.servicesslide .featuredbg2 {
  left: 100vw;
}
.servicesslide .featuredbg3 {
  left: 130vw;
}
.servicesslide .slide4bg {
  left: 100vw;
}
.servicesslide .halfpatternbg {
  left: 100vw;
}

.featuredslide .slide1bg {
  left: -110vw;
}
.featuredslide .patternbg {
  left: -110vw;
}
.featuredslide .slide2bg {
  left: calc(-119vh - 60vw - 80px);
}

.featuredslide .featuredbg {
  left: 0vw;
}
.featuredslide .featuredbg2 {
  left: 100vw;
}
.featuredslide .featuredbg3 {
  left: 200vw;
}

.featuredslide .slide4bg {
  left: 70vw;
}
.featuredslide .halfpatternbg {
  left: 100vw;
}

.featuredslide.featuredslide2 .featuredbg {
  left: -100vw;
}
.featuredslide.featuredslide2 .featuredbg2 {
  left: 00vw;
}
.featuredslide.featuredslide2 .featuredbg3 {
  left: 100vw;
}

.featuredslide.featuredslide3 .featuredbg {
  left: -200vw;
}
.featuredslide.featuredslide3 .featuredbg2 {
  left: -100vw;
}
.featuredslide.featuredslide3 .featuredbg3 {
  left: 00vw;
}

.caseslide .slide1bg {
  left: -110vw;
}
.caseslide .patternbg {
  left: -110vw;
}
.caseslide .slide2bg {
  left: -200vw;
}
.caseslide .featuredbg {
  left: -120vw;
}
.caseslide .featuredbg2 {
  left: -60vw;
}
.caseslide .featuredbg3 {
  left: 0vw;
}
.caseslide .slide4bg {
  left: -30vw;
}
.caseslide .halfpatternbg {
  left: 30vw;
}

.contactslide .slide1bg {
  left: -110vw;
}
.contactslide .patternbg {
  left: -110vw;
}
.contactslide .slide2bg {
  left: -200vw;
}
.contactslide .featuredbg {
  left: -120vw;
}
.contactslide .featuredbg2 {
  left: -120vw;
}
.contactslide .featuredbg3 {
  left: -120vw;
}
.contactslide .slide4bg {
  left: calc(-74.5vw - 76vh - 80px);
}
.contactslide .halfpatternbg {
  left: 0vw;
}

.homewrapper {
  position: relative;
  z-index: 50;
  height: 100vh;
  overflow-y: hidden;
}
.slick-slide.homesection,
.homesection {
  color: #fffbeb;
  width: calc(100vw - 80px);
  height: 100vh;
  position: relative;
}

.slick-arrow {
  width: 80px;
  height: 80px;
  border: 0;
  margin: 0;
  background: 50% 50% no-repeat #06262d;
  background-size: 9px auto;
  position: absolute;
  bottom: 0;
  z-index: 300;
  overflow: hidden;
  text-indent: -9999px;
  cursor: pointer;
  transition: opacity 0.5s;
}
.slick-arrow:hover {
  background-color: #3fbb9a;
}
.slick-prev {
  background-image: url(/img/ui/leftarrow.svg);
  right: 80px;
}
.slick-next {
  background-image: url(/img/ui/rightarrow.svg);
  right: 0px;
}
.introslide .slick-prev,
.contactslide .slick-next {
  opacity: 0.1;
  cursor: auto;
}
.slick-dots {
  width: 0;
  height: 0;
  overflow: hidden;
}

/**** case studies ****/
.featuredstudy {
  background: #06262d;
  color: #fffbeb;
  display: flex;
  position: relative;
  justify-content: space-between;
  min-height: 50vw;
  margin: 0 8px 8vw 8px;
}
.featuredstudy:before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background: url(/img/content/home/homebgtrans.svg) 50% 50% no-repeat;
  background-size: cover;
}
.featuredstudy .sideheading {
  color: #3fbb9a;
  position: absolute;
  bottom: 0vw;
  left: 2vw;
  margin: 0;
  transform: rotate(-90deg);
  transform-origin: 0 0;
}
.featuredstudy .text {
  padding: 4vw 20px 8vw 0;
  position: relative;
}
.featuredstudy .pic {
  flex: 0 0 60%;
  background: 50% 50% no-repeat;
  background-size: cover;
  position: relative;
}

.studiesgrid {
  display: flex;
  flex-wrap: wrap;
  background: #fff;
  color: #06262d;
  padding: 0 5vw;
}
.studiesgrid .study {
  margin: 0 3vw 5vw 3vw;
  flex: 0 0;
  flex-basis: calc((100% / 3) - 6vw);
  font-size: 14px;
}
.studiesgrid .study .pic {
  height: 16vw;
  background: 50% 50% no-repeat;
  background-size: cover;
  margin-bottom: 20px;
}
.studiesgrid .study h3 {
  font-weight: 500;
}
.studiesgrid .study table td {
  border-bottom: 1px solid rgba(6, 38, 45, 0.08);
  border-top: 1px solid rgba(6, 38, 45, 0.08);
  padding: 3px 0;
}
.studiesgrid .study table .discover td {
  border-bottom: none;
  padding-top: 10px;
}
.studiesgrid .study table tr td:first-child {
  border-right: 10px solid #fff;
}

/**** featured property ****/
.featuredbullets {
  background: url(/img/content/casestudies/whitecorner.svg) bottom right
    no-repeat #3fbb9a;
  background-size: 29px auto;
  margin: 0;
  list-style-type: none;
  padding: 20px;
  position: absolute;
  top: -5vw;
  right: 8vw;
  color: #fff;
  width: 20vw;
  font-size: 16px;
}
.featuredbutton {
  padding: 20px;
  position: absolute;
  top: 5vw;
  right: 8vw;
  color: #fff;
  width: 20vw;
  font-size: 16px;
}
.featuredbullets li {
  margin: 0;
  padding: 16px 0;
  border-bottom: 1px solid rgba(255, 251, 235, 0.4);
}
.featuredbullets li:last-child {
  border: 0;
}
.featuredbullets a {
  color: #fff;
}

.caption {
  font-size: 14px;
}
.linebreak {
  border-bottom: 1px solid #06262d;
  margin: 0 8px;
  height: 1px;
  margin-bottom: 5vw;
}
.featuredphotos {
  padding-bottom: 5vw;
}
.featuredphotos .pic {
  width: 100%;
  height: 28vw;
  background: 50% 50% no-repeat;
  background-size: cover;
  margin-bottom: 20px;
}

.quote h2 {
  color: #3fbb9a;
  font-size: 40px;
  line-height: 1.4em;
  font-weight: 400;
  margin-bottom: 3vw;
}
.quote p {
  display: flex;
  align-items: center;
}
.quote p:before {
  content: "";
  width: 5vw;
  height: 1px;
  background: #06262d;
  margin-right: 2vw;
}

.spec {
  padding-bottom: 10vw;
}
.twocols.spec .col:first-child {
  flex-basis: calc(30% - 16px);
}
.twocols.spec .col:last-child {
  flex-basis: calc(70% - 16px);
}
.spec ul {
  display: flex;
  flex-wrap: wrap;
  list-style-type: none;
  margin: 0;
  padding: 0;
}
.spec ul li {
  background: url(/img/ui/specbullet.svg) top 6px left no-repeat;
  background-size: 15px auto;
  padding-left: 25px;
  margin: 0 5% 2vw 0;
  flex: 0 0;
  flex-basis: calc(45% - 25px);
}

.featuredgallery {
  position: relative;
  background: #06262d;
  color: #fffbeb;
  padding: 5vw 0 5vw calc(8vw);
  width: calc(100% - 8vw);
  margin-bottom: 5vw;
  position: relative;
}
.featuredgallery:before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background: url(/img/content/home/homebgtrans.svg) 50% 50% no-repeat;
  background-size: cover;
}
.featuredgallery .galleryholder {
  position: relative;
  height: 70vh;
  position: relative;
}
.featuredgallery .galleryouter {
  width: 70vw;
  height: 70vh;
  position: absolute;
  right: 0;
  top: 0;
}
.featuredslick {
  width: 70vw;
  height: 70vh;
}
.featuredslick .slide {
  width: 60vw;
  height: 70vh;
  margin-right: 10px;
  background: 50% 50% no-repeat;
  background-size: cover;
}

.featuredslick .slick-arrow {
  border: 1px solid #1f4342;
}
.featuredslick .slick-prev {
  right: auto;
  left: -180px;
}
.featuredslick .slick-next {
  right: auto;
  left: -90px;
}

/**** team ****/
.aboutintro {
  margin: 0 0 6vw 0;
}

.members {
  flex-wrap: wrap;
  padding-bottom: 10vw;
}
.members .col {
  margin-bottom: 4vw;
}
.members .pic {
  width: 100%;
  height: 28vw;
  background: 50% 50% no-repeat;
  background-size: cover;
  margin-bottom: 20px;
}
.members .text {
  /*width:60%;min-width:240px;*/
  width: 100%;
}
.members .text p {
  margin-bottom: 1.3em;
}
.membername {
  font-size: 22px;
  line-height: 1.3em;
  font-weight: 400;
}
.membertitle {
  font-size: 18px;
  line-height: 1.3em;
}
.memberbio {
  font-size: 14px;
  line-height: 1.7em;
  overflow: hidden;
  max-height: 5.1em;
  margin-bottom: 30px;
  transition: max-height 0.5s;
}
.memberbio a {
  color: #3fbb9a;
  text-decoration: none;
}
.memberbio a:hover {
  text-decoration: underline;
}
.exposedmember .memberbio {
  max-height: 1000px;
}
.readmore {
  font-size: 14px;
  line-height: 14px;
  display: flex;
  align-items: center;
  padding-left: 20px;
  background: url(/img/content/team/more.svg) left center no-repeat;
  background-size: 12px auto;
  cursor: pointer;
}
.exposedmember .readmore {
  background-image: url(/img/content/team/less.svg);
}
.readmore:before {
  content: "Read more";
}
.exposedmember .readmore:before {
  content: "Read less";
}
.readmore:after {
  content: "";
  flex: 1 1;
  height: 1px;
  background: #06262d;
  margin-left: 10px;
}

/**** news ****/
.newshome {
  position: relative;
}
.newshome .members .text p {
  width: 90%;
}
.newshome .pageheader {
  position: relative;
}
.newshome:before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  width: 14vw;
  height: 20vw;
  background: top right no-repeat url(/img/content/news/newsbg1.svg);
  background-size: contain;
  z-index: 0;
}
.newshome .membername {
  font-size: 22px;
  line-height: 1.3em;
  font-weight: 400;
  display: block;
  margin-bottom: 20px;
  color: #06262d;
  text-decoration: none;
  width: 90%;
}
.newshome .memberbio {
  max-height: unset;
}
.newshome .membername:hover {
  color: #3fbb9a;
}
.newsreadmore {
  display: inline-block;
  color: #fff;
  background: #3fbb9a;
  text-decoration: none;
  border-radius: 20px;
  padding: 10px 30px;
  font-size: 16px;
  transition: background 0.2s;
}
.newsreadmore:hover {
  background: #06262d;
}

.newspage {
  padding-left: calc(8vw - 8px);
  color: #06262d;
}
.newsbanner {
  margin-left: calc((8vw - 8px) * -1);
  width: calc(100% + (8vw - 8px));
  height: 80vh;
  background: 50% 50% no-repeat;
  background-size: cover;
}
.newsheadline {
  padding: 4vw 35vw 4vw 4vw;
  background: #06262d top right no-repeat url(/img/content/news/newsbg2.svg);
  background-size: auto 100%;
  color: #ffffff;
  margin-top: -8vw;
}
.newsheadline a {
  color: #fff;
}
.newsheadline p:last-child {
  margin-bottom: 0;
}
.newsheadline h1 {
  margin-bottom: 1vw;
}

.newsstory {
  padding: 2vw 20vw 10vw 4vw;
}
.newsstory .newsreadmore {
  margin-top: 30px;
}

.newspic {
  margin-bottom: 20px;
  background: #f1f1f1;
}
.newspic img {
  display: block;
}
.newspic .caption {
  padding: 5px 10px;
}

/**** blog ****/
.bloghome:before {
  display: none;
}
.bloghome .pageheader {
  background: #06262d url(/img/content/zero30/zero30bg.svg) no-repeat left
    center;
  background-size: 100% auto;
  color: #fff;
  box-sizing: border-box;
  padding: 2.5vw 4vw;
  display: flex;
  align-items: center;
  justify-content: center;
}
.bloghome h1 {
  padding: 1.5vw 4vw 1.5vw 0;
  border-right: 1px solid #fff;
  display: inline-block;
  width: auto;
  font-weight: 700;
  font-size: 3.5vw;
  line-height: 1em;
  flex: 0 0 50%;
  box-sizing: border-box;
  text-align: right;
}
.bloghome .subhead {
  padding: 0 0 0 4vw;
  font-weight: 500;
  box-sizing: border-box;
  flex: 0 0 50%;
}
.bloghome .aboutintro h3 {
  font-weight: 500;
}
.bloghome .twocols .col > h2,
.twocols .col > p {
  width: 100%;
}

.diamondlist {
  list-style-type: none;
  padding: 20px 0 0 0;
}
.diamondlist li {
  background: url(/img/ui/specbullet.svg) top 6px left no-repeat;
  background-size: 15px auto;
  padding-left: 25px;
  margin: 0 5% 2vw 0;
  flex: 0 0;
  flex-basis: calc(45% - 25px);
}

.blogpage .newsheadline {
  background: right center no-repeat url(/img/content/zero30/headlinebg.svg)
    #06262d;
  background-size: auto 100%;
}

.author {
  display: flex;
  margin-bottom: 40px;
  align-items: center;
  font-size: 14px;
  line-height: 1.2em;
}

.newsheadline .author {
  margin-bottom: 0;
}

.author .pic {
  flex: 0 0 60px;
  height: 60px;
  border-radius: 50%;
  background: 50% 50% no-repeat;
  background-size: cover;
  margin-right: 20px;
}
.author .authorname {
  font-weight: 500;
  margin-bottom: 5px;
  font-size: 16px;
}

/**** contact ****/
.contactdetails {
  display: flex;
  justify-content: space-between;
  padding: 0 8px 4vw 24px;
}

.people {
  display: flex;
}
.person {
  margin-right: 5vw;
}
.person h3 {
  margin-bottom: 10px;
}
.contactdetails a,
.contactsmalltext a,
.teamcontacts a {
  color: #3fbb9a;
  text-decoration: none;
}
.contactdetails a:hover,
.contactsmalltext a:hover,
.teamcontacts a:hover {
  text-decoration: underline;
}
.contactsmalltext {
  font-size: 12px;
  line-height: 18px;
  padding-bottom: 40px;
}

.teamcontacts {
  display: flex;
  flex-wrap: wrap;
}
.teamcontacts .contactmember {
  margin-left: 24px;
  font-size: 12px;
  line-height: 18px;
  flex: 0 0 30%;
}
.teamcontacts .membername {
  font-size: 14px;
  line-height: 18px;
  margin-bottom: 3px;
  font-weight: 700;
}
.teamcontacts .membertitle {
  font-size: 14px;
  line-height: 18px;
  margin-bottom: 3px;
}

.address {
  font-size: 16px;
  line-height: 1.3em;
  margin-right: 5vw;
}

.mapholder {
  width: 100%;
  height: 50vh;
  min-height: 300px;
}
.map {
  width: 100%;
  height: 100%;
}

/****************************************************
* Misc
****************************/
/*hide social stuff and headings on prettyphoto*/
.ppt {
  display: none !important;
}
.pp_social {
  display: none !important;
}
.pp_description {
  display: none !important;
}

.smallText {
  font-size: 11px;
}
.smallprint {
  font-size: 11px;
  color: #bbbdc0;
}
.smallprint a {
  color: #bbbdc0;
}
.padTop {
  margin-top: 30px;
}
.largeText {
  font-size: 13px;
}

.superscript {
  vertical-align: baseline;
  font-size: 0.8em;
  position: relative;
  top: -0.4em;
}
.subscript {
  vertical-align: baseline;
  font-size: 0.8em;
  position: relative;
  top: 0.4em;
}

.vmiddle {
  position: relative;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

.caps {
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.num {
  text-align: right;
}

.mobileshow {
  display: none;
}

/* #Media Queries
================================================== */

/* biggerest desktop */
@media only screen and (max-width: 1620px) {
  /*.contactpage {flex-direction:column}
		.professional {display:flex;}
		.professionaltop {flex:0 0 45%}*/
}

/* biggest desktop */
@media only screen and (max-width: 1480px) {
  /**** home ****/
  .service .info .infocontent {
    font-size: 14px;
    line-height: 1.3em;
    padding: 8px 0;
  }
}

/* bigger desktop */
@media only screen and (max-width: 1229px) or (max-height: 700px) {
  /**** home ****/
  .service .info .infocontent {
    font-size: 12px;
    line-height: 1.3em;
    padding: 6px 0;
  }
  .homecontactholder {
    border-left: 0;
  }

  .servicestext .linetext {
    padding-left: 4vw;
    font-size: 14px;
    line-height: 20px;
  }
  .servicestext .linetext:before {
    width: 3vw;
  }

  /**** case studies ****/
  .studiesgrid .study {
    flex-basis: calc((100% / 2) - 6vw);
  }
  .studiesgrid .study .pic {
    height: 20vw;
  }
  .studiesgrid .study h3 {
    font-size: 18px;
    line-height: 1.3em;
  }
}

@media only screen and (max-height: 700px) {
  /**** home ****/
  .service .info .infocontent {
    font-size: 12px;
    line-height: 1.3em;
    padding: 6px 0;
  }
  .homecontactholder {
    border-left: 0;
  }

  .servicestext .linetext {
    padding-left: 4vw;
    font-size: 14px;
    line-height: 20px;
  }
  .servicestext .linetext:before {
    width: 3vw;
  }

  /**** case studies ****/
  .studiesgrid .study {
    flex-basis: calc((100% / 2) - 6vw);
  }
  .studiesgrid .study .pic {
    height: 20vw;
  }
  .studiesgrid .study h3 {
    font-size: 18px;
    line-height: 1.3em;
  }
}

/* Smaller than standard 960 (devices and browsers) */
@media only screen and (max-width: 1099px) {
}

/* Tablet Portrait size to standard 960 (devices and browsers) */
@media only screen and (max-width: 959px) {
  .servicestext .linetext {
    padding-left: 0;
  }
  .servicestext .linetext:before {
    display: none;
  }
  .servicescontent {
    flex-direction: column-reverse;
    height: auto;
    width: calc(100vw - 120px);
    padding: 72px 20px 20px 20px;
    margin: 0;
  }
  .servicestext {
    margin: 0 0 30px 20px;
  }
  .servicerow {
    flex-direction: column;
    margin: 0;
  }
  .servicesgrid .servicerow:first-child {
    margin: 0;
  }
  .servicesgrid .service {
    width: 100%;
    margin-bottom: 10px;
    background-position: center right 20px;
    background-size: auto 60%;
    flex: 0 0 120px;
    display: flex;
    align-items: center;
  }
  .service h4 {
    font-size: 16px;
    width: 60%;
  }
  .service .icon {
    left: auto;
    right: 20px;
    width: 35%;
  }

  /**** featured ****/
  .spec {
    flex-wrap: wrap;
  }
  .spec h2 {
    margin-bottom: 40px;
  }
  .twocols.spec .col:last-child {
    flex: 100%;
  }

  .featuredgallery .galleryouter {
    position: relative;
    width: 100%;
  }
  .featuredslick {
    height: 50vh;
    width: 100%;
  }
  .featuredslick .slide {
    width: 80vw;
    height: 50vh;
  }

  .featuredslick .slick-arrow {
    border: 1px solid #1f4342;
    bottom: -90px;
  }
  .featuredslick .slick-prev {
    right: auto;
    left: 0;
  }
  .featuredslick .slick-next {
    right: auto;
    left: 90px;
  }

  /**** contact ****/
  .twocols.aboutintro {
    flex-wrap: wrap;
  }
  .twocols.aboutintro .col {
    flex-basis: calc(100% - 20px);
  }
  .contactdetails {
    flex-wrap: wrap;
  }
  .people {
    margin-bottom: 40px;
    flex-basis: 100%;
    justify-content: space-between;
  }

  /**** news ****/
  .newsbanner {
    height: 70vh;
  }
}

/* All Mobile Sizes (devices and browser) */
@media only screen and (max-width: 767px) {
  body {
    font-size: 16px;
    line-height: 1.3em;
  }

  /**** nav ****/
  .navbutton {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    padding: 20px;
    width: 40px;
    height: 22px;
    z-index: 9000;
    cursor: pointer;
  }
  .navbutton .navicon {
    position: relative;
    height: 100%;
    width: 100%;
  }
  .navbutton .navicon span {
    display: block;
    position: absolute;
    width: 40px;
    height: 2px;
    left: 0px;
    background: #3fbb9a;
    transform-origin: 50% 50%;
    transition: top 0.5s 0.5s, transform 0.5s, opacity 0.5s, background 0.5s;
  }
  .navbutton.bluenav .navicon span {
    background-color: #315750;
  }
  .navbutton .navicon span:nth-child(1) {
    top: 0;
  }
  .navbutton .navicon span:nth-child(2) {
    top: 10px;
  }
  .navbutton .navicon span:nth-child(3) {
    top: 20px;
  }

  .navholder {
    width: 0;
    z-index: 8000;
  }
  .navhide {
    width: 0;
    transition: width 0.5s;
    border: 0;
  }
  .navholder .nav a {
    transform: rotate(0deg);
    writing-mode: horizontal-tb;
    width: 100vw;
    margin-left: -100px;
    transition: margin 0.5s;
    border-top: 1px solid #315750;
    flex-basis: calc((100vh - 62px) / 5);
  }
  .navholder .nav a.navlogo {
    flex-basis: 62px;
    background: right 20px center no-repeat url(/img/content/logo.svg);
    background-size: auto 20px;
    display: block;
  }

  .menuopen .navhide {
    width: 100vw;
  }
  .menuopen .navholder .nav a {
    margin: 0;
  }
  .menuopen .navbutton .navicon span {
    transition: top 0.5s, transform 0.5s 0.5s, opacity 0s 0.5s;
  }
  .menuopen .navbutton .navicon span:nth-child(1) {
    top: 10px;
    opacity: 0;
  }
  .menuopen .navbutton .navicon span:nth-child(2) {
    top: 10px;
    transform: rotate(-45deg);
  }
  .menuopen .navbutton .navicon span:nth-child(3) {
    top: 10px;
    transform: rotate(45deg);
  }
  .menuopen .navbutton.bluenav .navicon span {
    background-color: #3fbb9a;
  }

  /**** home ****/
  .slideholder {
    width: 100vw;
    margin: 0;
    overflow: visible;
  }
  .slick-slide.homesection,
  .homesection {
    width: 100vw;
    height: calc(100vh - 50px);
  }
  .homewrapper {
    height: calc(100vh - 50px);
    position: relative;
    border-bottom: 1px solid #1f4342;
    overflow: visible;
  }

  .londonbg {
    clip-path: none;
  }

  .homelogo {
    width: 100px;
    top: 72px;
    left: 20px;
  }
  .introcontent {
    width: calc(100vw - 60px);
    left: 40px;
    bottom: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .introcontent .linetext {
    font-size: 14px;
    line-height: 1.5em;
  }
  .introcontent h1 {
    font-size: 30px;
    line-height: 1em;
    margin-bottom: 20px;
  }
  .slidenumbers {
    left: -24px;
  }

  .patternbg {
    background-image: url(/img/content/home/homebgtrans.svg);
  }

  .servicesscroll {
    overflow-y: scroll;
    overflow-x: hidden;
    width: 100%;
    height: calc(100vh - 51px);
  }
  .servicescontent {
    width: calc(100vw - 40px);
  }

  .servicesgrid .service.serviceopen,
  .servicesgrid .service:hover {
    flex: 0 0 240px;
    align-items: flex-start;
  }
  .service.serviceopen .info {
    display: flex;
  }
  .service.serviceopen h4 {
    color: #fffbeb;
  }

  .featuredtext {
    margin: 0 0 30px 40px;
  }

  .casetext {
    position: relative;
    width: calc(100vw - 60px);
    margin: 72px 20px 20px 40px;
    top: auto;
    right: auto;
  }
  .casestudies {
    margin: 0 10px 0 20px;
  }
  .casestudies .study {
    height: calc((100vh - 360px) / 2);
    margin: 0 10px 10px 0;
    flex-basis: calc(50% - 10px);
  }

  .homecontactholder {
    height: calc(100vh - 50px);
    background-position: top left;
    background-size: auto 50vh;
  }
  .homecontact {
    flex-direction: column;
    bottom: 0;
    left: 40px;
    justify-content: flex-end;
  }
  .homecontact .logo {
    width: 185px;
    margin-bottom: 40px;
    flex-basis: 100px;
  }
  .homecontact .member {
    margin: 0 0 20px 0;
  }
  .homenews {
    margin: 0 20px 40px 0px;
  }
  .halfpatternbg {
    top: -25vh;
  }

  .homebgs {
    width: 100%;
    height: calc(100vh - 50px);
    overflow: hidden;
    position: absolute;
    top: 0;
    left: 0;
  }
  .slide1bg {
    width: 100%;
  }
  .slide1bg .fillbg {
    flex: 0 0 50vw;
  }
  .introslide .slide2bg {
    left: 100vw;
  }

  .servicesslide .slide1bg {
    left: -200vw;
  }
  .servicesslide .slide2bg {
    left: -45vh;
  }

  .featuredslide .slide1bg {
    left: -200vw;
  }
  .featuredslide .slide2bg {
    left: calc(-132vh - 40vw);
  }

  .caseslide .slide1bg {
    left: -350vw;
  }
  .caseslide .slide2bg {
    left: -350vw;
  }
  .caseslide .featuredbg {
    left: -20vw;
  }
  .caseslide .slide4bg {
    left: -76vw;
  }
  .caseslide .halfpatternbg {
    left: 100vw;
  }

  .contactslide .slide1bg {
    left: -350vw;
  }
  .contactslide .slide2bg {
    left: -350vw;
  }
  .contactslide .slide4bg {
    left: calc(-114vh - 90vw);
  }

  .slick-arrow {
    bottom: -51px;
    width: 50px;
    height: 50px;
  }
  .slick-prev {
    right: auto;
    left: 0;
  }
  .scroll {
    display: none;
  }
  .slick-dots {
    width: calc(100vw - 100px);
    height: auto;
    overflow: visible;
    position: absolute;
    bottom: -51px;
    left: 50px;
    display: flex;
    margin: 0;
    padding: 0;
    align-items: center;
    justify-content: center;
    list-style-type: none;
    height: 50px;
    background: #06262d;
  }
  .slick-dots li {
    margin: 0;
    padding: 0;
    flex: 0 0 4px;
    height: 4px;
    overflow: hidden;
    background: #fff;
    border-radius: 50%;
    margin: 0 10px;
    text-indent: -9999px;
    transition: all 0.2s;
  }
  .slick-dots li.slick-active {
    flex-basis: 12px;
    height: 12px;
    background: #3fbb9a;
    margin: 0 6px;
  }

  /**** case studies ****/
  h1 {
    font-size: 38px;
    line-height: 1.3em;
  }
  h2 {
    font-size: 22px;
    line-height: 1.3em;
  }
  .pageheader {
    padding-bottom: 50px;
    margin-bottom: 40px;
  }
  .pageheader h1 {
    width: 100%;
  }

  .breadcrumbs {
    padding: 72px 10px 30px 10px;
  }
  .breadcrumbs .slash {
    margin: 0 5px;
  }
  .innerpageholder {
    margin: 0;
    width: 100vw;
  }
  .twocolpage {
    width: calc(100vw - 20px);
    padding: 10px;
  }

  .featuredstudy {
    flex-direction: column-reverse;
    margin: 0 10px 40px 10px;
    position: relative;
  }
  .featuredstudy .pic {
    width: 100%;
    flex-basis: 240px;
  }
  .featuredstudy .text {
    padding: 40px 40px 40px 0;
  }
  .linetext {
    font-size: 16px;
    line-height: 1.3em;
    padding-left: 40px;
  }
  .linetext:before {
    width: 20px;
  }
  .featuredstudy .sideheading {
    left: auto;
    right: 10px;
    transform-origin: 100% 100%;
    width: 100px;
    bottom: 115px;
    font-size: 22px;
  }

  .studiesgrid .study {
    flex: 0 0 calc(100% - 20px);
    margin: 0 10px 40px 10px;
  }
  .studiesgrid .study .pic {
    height: 240px;
  }

  /**** featured ****/
  .featuredbullets {
    position: relative;
    right: auto;
    top: auto;
    margin: 40px 0 0px 0px;
    width: auto;
  }
  .featuredphotos {
    flex-direction: column;
  }
  .featuredphotos .pic {
    height: 240px;
  }
  .quote h2 {
    font-size: 28px;
    line-height: 1.3em;
  }

  .featuredslick .slick-arrow {
    border: 1px solid #1f4342;
    bottom: -50px;
  }
  .featuredslick .slick-prev {
    right: auto;
    left: 0;
  }
  .featuredslick .slick-next {
    right: auto;
    left: 50px;
  }

  .spec ul li {
    flex-basis: 80vw;
  }

  /**** team ****/
  .aboutintro {
    margin-bottom: 40px;
  }
  .twocols .col {
    margin: 0 10px;
    flex-basis: calc(100% - 20px);
  }
  .members .col {
    margin-bottom: 40px;
  }
  .members .pic {
    height: 240px;
  }

  /**** contact ****/
  .contactdetails {
    padding: 0 10px 40px 10px;
  }
  .people {
    flex-direction: column;
    margin-bottom: 0;
  }
  .person {
    margin: 0 0 40px 0;
  }
  .person h3,
  .address h3 {
    font-size: 18px;
  }

  .teamcontacts .contactmember {
    margin-left: 10px;
    flex-basis: calc(100% - 10px);
  }

  .mapholder {
    height: 400px;
  }

  /**** news ****/
  .newsbanner {
    height: 50vh;
  }
  .newsheadline {
    padding-right: 10vw;
    background-image: none;
  }
  .newsheadline h1 {
    font-size: 24px;
    line-height: 30px;
  }
  .newsstory {
    padding-right: 8vw;
  }

  /**** blog ****/
  .bloghome h1 {
    font-size: 24px;
    line-height: 1.2em;
    border-right: none;
    text-align: center;
    padding: 2vw;
  }
  .bloghome .pageheader {
    flex-direction: column;
  }
  .bloghome .subhead {
    text-align: center;
    padding: 2vw;
  }
}

/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
@media only screen and (min-width: 480px) and (max-width: 767px) {
  /**** nav ****/
}

/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
@media only screen and (max-width: 479px) {
}

/* #Font-Face
================================================== */
/* 	This is the proper syntax for an @font-face file
		Just create a "fonts" folder at the root,
		copy your FontName into code below and remove
		comment brackets */

/*	@font-face {
	    font-family: 'FontName';
	    src: url('../fonts/FontName.eot');
	    src: url('../fonts/FontName.eot?iefix') format('eot'),
	         url('../fonts/FontName.woff') format('woff'),
	         url('../fonts/FontName.ttf') format('truetype'),
	         url('../fonts/FontName.svg#webfontZam02nTh') format('svg');
	    font-weight: normal;
	    font-style: normal; }
*/

.slide1bg::after {
  content: "";
  position: absolute;
  left: 45vw;
  width: 50vw;
  transform-origin: 50% 50%;
  right: 0;
  background: #3fbb9a;
  /*transform: skew(53deg, 53deg);*/
  transform: skew(37deg, 0deg);
  top: 0;
  bottom: 0;
  z-index: 500;
  /* height: 260vw; */
  height: 100vh;
  transition: left 1s ease;
}

@media only screen and (max-width: 1023px) {
  .slide1bg::after {
    width:56vw
  }
}

@media only screen and (max-width: 767px) {
  .slide1bg::after {
    transform: skew(0deg, 0deg);
    left: -10vw;
    width: 120vw;
    height: 30vh;
    top: 35vh;
  }
}

.servicesslide .slide1bg::after {
  left: -300%;
}

.introcontent .slidenumbers {
  left: -9vw;
  color: #06262d;
}

.introcontent .slidenumbers span,
.introcontent .linetext,
.homeslide .introcontent h1 {
  color: #06262d;
}

.introcontent .slideline,
.introcontent .linetext:before {
  background: #06262d;
}

@media (min-width: 1880px) {
  .introcontent {
    left: 54vw;
  }
  .introcontent .slidenumbers {
    top: 2vh;
  }
}

.Transform {
  display: inline-block;
}
@media (min-width: 1024px) {
  .Transform {
    margin-left: -20%;
  }
}

.bg-video {
  position: relative;
  max-width: 100%;
  overflow-x: hidden;

  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  min-height: calc(100vw * 0.41);
  text-align: center;
  background-size: cover;

  min-height: 100vh;
  position: relative;
  overflow: hidden;
  width: 100%;
}

@media (min-width: 1px) and (max-width: 767px) {
  .bg-video {
    min-height: 40vh;
  }
}

.bg-video__media {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
  /* z-index: -1; */
}

@media (min-width: 768px) {
  .IframeWrap {
    padding-left: 79px;
  }
}

.separator {
  width: 100%;
  height: 1px;
  background: black;
  margin-bottom: 30px;
}

.members.hero {
  padding-bottom: 0;
}

.members.hero .title {
  font-size: 40px;
  line-height: 42px;
  font-weight: 300;
}

.members.hero h2 {
  font-size: 40px;
  line-height: 42px;
  font-weight: 600;
  margin-bottom: 5px;
}

.pageheader.blog-page {
  height: 11.5vw;
}

@media (min-width: 768px) {
  .separator {
    margin-bottom: 80px;
  }
}

/* HTML5 Video */

.html5-banner {
  position: relative;
  margin-bottom: 4vw;
}

.html5-banner img {
  position: absolute;
  left: 0;
  top: 0;
  max-width: 100%;
}

.html5-banner video {
  max-width: 100%;
}

/* Articles Page */

.post-article-archive .members .col {
  margin-bottom: 50px;
}

.post-article-archive .members .col p {
  margin-bottom: 0;
}

.post-article-archive .twocols.members.hero {
  margin-bottom: 4vw;
}

.post-article-archive .membername {
  min-height: 60px;
}

.post-article-archive .memberbio {
  max-height: unset !important;
}