*, html {
  box-sizing: border-box;
}

body {
  margin:0;
  padding:0;
  font-family: 'Poppins', sans-serif;
  min-height: 100vh;
}

.container {
  position: relative;
  transition: all .3s;
}

.container.open {
  overflow-x: hidden;
}

nav {
  background:#000f2d;
  width:300px;
  height: 100%;
  position: fixed;
  top:0;
  left: -300px;
  z-index:2000;
  transition: all .3s;
  padding: 1.25rem;
}

nav ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

nav ul li {
  color: #ccc;
  font-size: 1rem;
  padding: 5px 0;
}

nav ul li a {
  text-decoration: none;
  color: white;
}

.close-nav {
  position: absolute;
  top:30px;
  right:30px;
  cursor: pointer;
}

/**
  Edit this page link fixed positioning
*/
.edit-this-page {
  position: fixed; 
  bottom: 0; 
  left: 0; 
  padding: 1rem; 
  background-color: #FBBF24; 
  color: #ffffff;
} 

.section-landing {
  font-weight:600;
}

.language-switcher {
  color: white;
  margin-top: 1rem;
  margin-bottom: 1rem;
}

.language-switcher-link {
  color: white;
}

.section-landing-nolink {
  font-weight:600;
  color:#3958cc;
}

nav.open {
  left:0;
  overflow-y: scroll;
}

nav input[type=search] {
  width:100%;
}

/* menu button */

.menu-btn {
  width: 30px;
  height: 20px;
  position: relative;
  margin-top: 10px;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: .5s ease-in-out;
  -moz-transition: .5s ease-in-out;
  -o-transition: .5s ease-in-out;
  transition: .5s ease-in-out;
  cursor: pointer;
}

.menu-btn span {
  display: block;
  position: absolute;
  height: 2px;
  width: 100%;
  background: #fff;
  border-radius: 9px;
  opacity: 1;
  left: 0;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: .25s ease-in-out;
  -moz-transition: .25s ease-in-out;
  -o-transition: .25s ease-in-out;
  transition: .25s ease-in-out;
}

.menu-btn span:nth-child(1) {
  top: 0px;
}

.menu-btn span:nth-child(2),.menu-btn span:nth-child(3) {
  top: 8px;
}

.menu-btn span:nth-child(4) {
  top: 16px;
}

.menu-btn.open span:nth-child(1) {
  top: 18px;
  width: 0%;
  left: 50%;
}

.menu-btn.open span:nth-child(2) {
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
}

.menu-btn.open span:nth-child(3) {
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

.menu-btn.open span:nth-child(4) {
  top: 18px;
  width: 0%;
  left: 50%;
}

/* menu button */

/* type */

p, h1, h2, h3, h4 {
  margin-top: 0;
}

.float-right {
  float: right;
}

/* hero */

.hero {
  position: relative;
}

.hero img {
  max-height: 85vh;
  object-fit: cover;
}

.hero-headline {
  writing-mode: vertical-rl;
}

.hero-copy {
  position: absolute;
  width:100%;
  height: 100%;
  top:0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  text-align: center;
}

.cta-link {
  background: transparent;
  text-align: center;
  color: white;
  border:2px solid white;
  text-decoration: none;
  padding:1rem 2rem;
  display: inline-block;
  margin:10px auto;
  font-weight: 600;
  cursor: pointer;
}

.hero-video {
  width:100%;
  height:85vh;
  position:relative;
}

.hero-video:after {
  content:"";
  display:block;
  background:url("../static/img/tileo.svg");
  background-size:3px;
  filter:invert(100);
  mix-blend-mode:overlay;
  width:100%;
  height:100%;
  position:absolute;
  top:0;
  left:0;
  z-index:100;
  opacity:0.4;
}

.hero-video video {
  width:100%;
  height:85vh;
  object-fit:cover;
  position:relative;
  display:block;
}

.hero-copy {
  z-index:100;
}

/* homepage */

.difference {
  background: #FFA400 url('../static/img/ewp-bg-logo.svg') no-repeat;
  background-size: cover;
  position: relative;
}
.difference:after {
  content: "";
  width:100%;
  height: 100px;
  background: white;
  display: block;
}
.difference-copy {
  position: absolute;
  top:0;
  left: 0;
  width:100%;
  height: 100%;
  display: flex;
  align-items: center;
  color: white;
  font-size:2rem;
}

.filtered {
  mix-blend-mode: multiply;
  margin-bottom: -100px;
}

.heads {
  width:240px;
}

.heads img {
  display: inline-block;
  width:45%;
}

.white-triangles {
  background: url('../static/img/white-triangles.svg') no-repeat;
  background-position: bottom -100px right;
  background-size: 100%;
}

.section-heading {
  text-align: center;
}

.underline:after {
  content:"";
  display:block;
  width:80px;
  height:2px;
  background: #FFA400;
  margin:0 auto 2rem auto;
}

img {
  width:100%;
  height: auto;
}

/* links */

a {
  color:black;
  transition: all .3s;
}

a:hover {
  opacity: 0.7;
}

/* ctas */

.cta-light {
  color:white;
  text-decoration: none;
  padding:10px 15px;
  border:1px solid white;
  text-transform: uppercase;
  font-size: 0.8rem;
  font-weight: 600;
  text-align: center;
  display: inline-block;
  max-width: 160px;
}

.cta-primary {
  color:white;
  text-decoration: none;
  padding:10px 15px;
  border:2px solid white;
  font-weight: 600;
  text-align: center;
  display: inline-block;
}

.cta-secondary {

}

.menu-btn-container {
  text-align: left;
}

.menu-btn {
  width:30px;
  height: 23px;
  display: inline-block;
}

.menu-btn:hover {
  opacity: 0.7;
}

/* layout */

.outer {
  max-width: 1400px;
  margin: 0 auto;
}

/* generic single */

.feature {
width:100%;
display:flex;
margin:0 0 3rem 0;
}

.feature a {
  text-decoration: none;
  padding:0 0 6px 0;
  text-transform: uppercase;
  border-bottom: 2px solid #999;
  font-size: 14px;
}

.feature div {
flex: 0 0 50%;
padding:10px;
}

.feature div p {
  max-width: 400px;
}

.feature h2:after {
  display: block;
  content:"";
  width:90px;
  height: 4px;
  background: #FFA400;
  margin: 0.5rem 0;
}

.zigzag.feature:nth-child(even) div:nth-child(2) {
order: -1;
}

.feature-image {
  margin-bottom: 2rem;
}

.feature-image img {
  margin-bottom: 1rem;
}

/* generic single */


/* containers */

.cta-holder {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 2rem;
}

.cta-holder .language-switcher {
  display: none;
}

@media only screen and (min-width: 600px)  {
  .cta-holder .language-switcher {
    display: block;
  }
}

.masthead {
  display: grid;
  grid-template-columns: 1fr 100px 1fr;
  grid-gap: 10px;
  align-items: center;
  justify-content: space-between;
  padding: 10px 0;
}

header {
  position: sticky;
  position: -webkit-sticky;
  top:0;
  z-index: 1000;
}

.breadcrumb {
  padding: 1rem 0;
}

.pad {
  padding:5rem 0;
}

.pad-bottom {
  padding: 0 0 5rem 0;
}

.triangles {
  background: url('../static/img/triangles.svg') no-repeat;
  background-position: top right;
}

.abstract {
  background: url('../static/img/abstract.svg') no-repeat;
  background-position: top left;
  background-size: 100%;
  background-attachment: fixed;
}

.changeup {
  text-align: center;
  background: url('../static/img/changeup.jpg') no-repeat;
  background-position: center center;
  background-size: cover;
  color: white;
}

.changeup h2 {
  font-size: 3rem;
  font-weight: 600;
  margin: 1rem 0;
}

.changeup p {
  font-size: 1.5rem;
  max-width: 900px;
  margin: 0 auto;
}

.changeup img {
  width:40px;
  margin:20px auto;
}

.changeup .cta-primary {
  font-size:1.5rem;
  margin: 1rem auto;
}

/* case study */

.v-center {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.case-study {
  text-align: center;
  color: white;
  background-repeat: no-repeat, no-repeat;
  background-attachment: scroll, fixed;
  background-size: 100%, cover;
  min-height: 800px;
}

.video-play-action {
  width:100px;
  height: auto;
  cursor: pointer;
  margin: 20px 0;
}

.results-icon {
  width:24px;
  height: auto;
}

.case-study h2 {
  font-size: 3rem;
  font-weight: 600;
  margin: 1rem 0;
}

.case-study p {
  font-size: 1.5rem;
  max-width: 900px;
  margin: 0 auto;
}

.case-study a {
  text-decoration: none;
  color: white;
}

.case-study a:hover {
  text-decoration: underline;
}

.modal-container {
  position: fixed;
  background: rgba(0, 0, 0, 0.9);
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index:1000;
  display:none;
}

.modal-inner {
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  z-index:100;
}

.video-wrap {
  width:95%;
  max-width: 800px;
  margin:1rem auto;
}

.embed-container-home {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  max-width: 100%;
}
.embed-container-home iframe,
.embed-container-home object,
.embed-container-home embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.embed-container {
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  max-width: 100%;
}
.embed-container iframe,
.embed-container object,
.embed-container embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  padding:20px;
}

.modal-close-btn {
  position:absolute;
  top:20px;
  right:20px;
  z-index:120;
  cursor:pointer;
  width:20px;
  height: auto;
}

/* colours */

.brand-color {
  background: #003399;
}

/* content */

.headline {
  font-size: 1.5rem;
}

.headline h2 {
  writing-mode: vertical-rl;
  border-left: 4px solid #FFA400;
}

.large-copy {
  font-size: 5rem;
  line-height: 1.1;
}

.team-list {
  list-style-type: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-gap: 30px;
}

.team-list li {
  background: rgba(255,255,255,0.8);
  border:2px solid white;
}

.bio-container {
  position: static;
}

.bio-container h3 {
  margin: 10px 0 5px 0;
}

.bio-container h4 {
  font-weight: 200;
  margin: 0;
}

.bio-overlay {
  position:fixed;
  width:100%;
  height:100vh;
  top:0;
  left:0;
  display: none;
  background: rgba(0,0,0,0.9);
  z-index: 1000;
}

.bio-inner {
  position:absolute;
  width:100%;
  height:100%;
  top:0;
  left:0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.bio-inner span {
  display: block;
  width:800px;
  background: white;
  font-size: 0.9rem;
  padding:20px;
  border-radius: 3px;
}

.bio-card {
  display:grid;
  grid-gap: 20px;
  grid-template-columns: 160px 1fr;
}

.viewbio {
  display:block;
  text-decoration: none;
  margin: 10px 0;
}

.viewbio img {
  width: 12px;
  display: inline-block;
  vertical-align: middle;
  margin: -4px 8px 0 0;
}

.closebio {
  padding: 0 0 10px 0;
}

/* services */

.services {
  padding:3rem 0 5rem 0;
}

.services h2 {
  text-align: center;
  font-size: 3rem;
  margin-bottom: 0;
}

.services .menu {
  text-align: center;
  font-size: 1.25rem;
}

.service-list {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.service-pod-container {
  display:grid;
  grid-template-columns: 1fr 1fr;
  grid-gap:40px;
  padding: 20px;
}

.service-pod {
  display:grid;
  grid-template-columns: 100px 1fr;
  align-items: center;
}

.service-pod a {
  text-decoration: none;
}

.service-pod h3 {
  font-size: 2rem;
}

.service-pod h3, .service-pod p {
  margin: 0;
}

.service-pod-icon {
  margin-right: 20px;
}

.menu a {
  text-decoration: none;
  margin: 0 10px;
}

.menu a.active {
  font-weight: 600;
  border-bottom:1px solid #000;
}

/* sectors */

.sectors {
  background: #111A2E;
  color: white;
  padding: 5rem 0;
}

.sector-panels {
  margin: 0;
  padding: 0;
}

.sectors h2 {
  font-size: 3rem;
  text-align: center;
}

.sectors .hero-headline {
  margin: 0 0 10px 0;
  border-left: 4px solid #FFA400;
}

.sector-list {
  text-align: center;
  margin-bottom: 20px;
}

.sector-list a {
  text-decoration: none;
  color: white;
  margin: 0 5px;
}

.sector-list a.active {
  font-weight: 600;
  border-bottom:1px solid #fff;
}

.learn-more {
  color:white;
}

.slick-slide img {
  margin-bottom: 10px;
}

.message {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  font-weight: 400;
}

article {
  font-size:1.1rem;
}

blockquote {
  margin:20px 20px 20px -150px;
  padding:20px;
  font-size:1.25rem;
  max-width: 300px;
  float: left;
  text-align: right;
  position: relative;
  font-weight: 600;
}

blockquote:before {
  content: "";
  width:80px;
  height: 3px;
  background: black;
  display: block;
  margin: 10px 0;
  position: absolute;
  right: 20px;
  top:0;
}

/* findoutmore */

.findoutmore {
  background: #f8f8f8;
  padding: 5rem 0;
}

.findoutmore .triangles {
  background: url("../static/img/triangles.svg")
    no-repeat;
  background-position: top right;
}

.findoutmore .contact-bubble {
  position: relative;
}

.findoutmore .contact-bubble:before {
  content: "";
  display: block;
  width: 32px;
  height: 32px;
  background: url("../static/img/contact.svg")no-repeat;
  background-size: 100%;
  position: absolute;
  top: -20px;
  left: -42px;
}

.findoutmore .message {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  font-weight: 400;
  background: #f8f8f8;
}

.findoutmore h2 {
  writing-mode: vertical-rl;
  border-left: 4px solid #ffa400;
  font-family: "Poppins", sans-serif;
  font-weight: 600;
}

.findoutmore .contact-bubble a {
  color: black;
  border-bottom: 2px solid #888;
  text-decoration: none;
}

/* findoutmore */

/* landing pages */

.landing-list article {
  display:grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 30px;
}

/* landing pages */


/* case study pages */

.case-studies {
  display:grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-gap:30px;
}

footer {
  background: #222;
  color: white;
}

footer a {
  color: white;
}

.footer-logo {
  width:100%;
}

footer small {
  font-size:11px;
  opacity:0.7;
  text-transform: uppercase;
}

footer .companyinfo {
  margin-top: 2rem;
  padding: 1rem 0;
  border-top: 1px solid #333;
}

/* contact */

.contact-form {
  width:100%;
  max-width: 600px;
  border-radius: 0!important;
  margin:0 auto;
}

.contact-form h3 {
  margin-bottom: 5px;
}

.input-textbox {
  margin:0 0 10px 0;
  width:100%;
  -webkit-appearance:none;
  appearance:none;
  border:1px solid #333;
  padding: 10px;
}

.contact-btn {
  -webkit-appearance:none;
  appearance:none;
  background: #003399;
  border:0;
  color: white;
  display: block;
  text-align: center;
  padding: 15px;
  width:100%;
  cursor: pointer;
  transition: all .3s;
}

.contact-btn:hover {
  background: #002369;
}


/* media queries */

@media all and (max-width: 1440px)  {

  .breadcrumb {
    padding: 10px .9375rem 0 .9375rem;
  }

  .difference-copy {
    font-size:1.5rem;
  }

  .large-copy {
    font-size: 3rem;
  }

  .filtered {
    margin-bottom: -40px;
  }

  .difference:after {
    height: 40px;
  }

  .masthead {
    grid-template-columns: 1fr 60px 1fr;
    padding: 10px 16px;
  }

}


@media all and (max-width: 1000px)  {

  .pad {
    padding: 2.5rem 0;
  }

  .mob-hide {
    display:none;
  }

  .cta-light {
  padding: 5px 7px;
  font-size: 0.7rem;
 }

  .difference-copy {
    width: 60%;
    left:40%;
    padding: 1rem;
  }

  .difference-copy p {
    font-size:1.25rem;
  }

  .hero-headline {
    writing-mode:initial;
  }

  .headline h2 {
    font-size:2rem;
  }

  .large-copy {
    font-size: 3rem;
  }

  .filtered {
    margin-bottom: 0;
  }

  .difference:after {
    display: none;
  }

  .feature {
    width: 100%;
    display: block;
    margin: 0 0 1rem 0;
  }

  .feature-image  {
    margin-bottom: 0;
  }

  .headline {
    margin:0;
  }

  .headline h2 {
    writing-mode:initial;
    border-left:0;
    margin: 0;
    font-size: 1.5rem;
  }

  .white-triangles {
    background-position: top left;
    background-size: 30%;
  }

  .sectors h2 {
    font-size: 1.75rem;
    text-align: center;
    margin:0 0 10px 0;
  }

  .sector-list a.active {
    background: #003399;
    border-radius: 20px;
    border-bottom: 0;
  }

  .sector-list a {
    text-decoration: none;
    color: white;
    margin: 2px 0;
    padding: 5px 10px;
    white-space: nowrap;
  }

  .triangles {
    background-size: 100px;
  }

  .contact-form {
    max-width: 100%;
  }

  .findoutmore {
    padding: 3rem 0;
  }

  .findoutmore .message {
    justify-content: flex-start;
  }

  .findoutmore h2 {
    writing-mode: initial;
    border-left: 0;
    margin: 0 0 5px 20px;
    font-size: 1.25rem;
  }

  .findoutmore .triangles {
    background-size: 80px;
    background-position: top -40px right;
  }

  .findoutmore .contact-bubble {
    margin-left: 20px;
    border-left: 4px solid #ffa400;
    padding: 0 16px;
    font-size: 0.8rem;
  }

  .findoutmore .contact-bubble p {
    margin-bottom: 0;
    line-height: 1.6;
  }

  .findoutmore .contact-bubble:before {
    width: 18px;
    height: 18px;
    top: -50px;
    left: -25px;
  }

  .team-list {
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 20px;
  }

  .bio-inner {
    width: calc(100% - 20px);
    margin: 10px;
    font-size: 0.7rem;
  }

  .bio-image {
    display: none;
  }

  .bio-card {
    grid-template-columns: 1fr;
  }

  .bio-content {
    overflow-y: scroll;
  }

  .bio-content p {
    font-size: 0.75rem;
  }

  .footer-logo {
    margin:0 0 20px 0;
    width:60px;
  }

}

@media all and (max-width: 800px)  {

  nav ul li {
    font-size: 0.75rem;
    padding: 2px 0;
  }

  p, ul, li {
    font-size: 0.9rem;
  }

  h1 {
    font-size: 1.5rem;
  }

  h3 {
    font-size: 1rem;
  }

  .pad {
    padding: 1rem 0;
  }

  .hero {
    min-height: 300px;
  }

  .hero img {
    object-fit: cover;
    height: 320px;
  }

  .hero h1 {
    font-size: 1.2rem;
  }

  .cta-link {
   padding: 0.5rem 1rem;
   font-size: 0.8rem;
  }

  .difference {
    min-height: 240px;
  }

  .difference-copy p {
    font-size:0.75rem;
  }

  .filtered {
   opacity: 0;
  }

  .large-copy {
    font-size: 1.5rem;
    margin:10px 0 0 10px;
  }

  .services {
    padding: 1.5rem 0 2.5rem 0;
  }

  .services h2 {
    font-size: 1.5rem;
  }

  .services .menu {
    font-size: 0.9rem;
  }

  .service-pod-container {
    grid-template-columns: 1fr;
    grid-gap: 20px;
  }

  .service-pod {
    grid-template-columns: 60px 1fr;
    align-items: start;
  }

  .service-pod h3 {
    font-size: 1.2rem;
  }

  .service-pod p {
    font-size: 0.75rem;
  }

  .sectors {
    padding: 1.5rem 0;
  }

  .sectors h2 {
    font-size: 1.25rem;
    margin:0 0 10px 0;
  }

  .sectors .headline h2 {
    font-size: 1rem;
    border-left: 0;
  }

  .sector-list {
    font-size:0.9rem;
    padding: 0 1rem;
    line-height: 2;
  }

  .sector-panels h3 {
    font-size:0.8rem;
    font-weight: 400;
  }

  .learn-more {
    font-size:0.8rem;
  }

  .changeup {
    padding:3.5rem 1rem;
  }

  .changeup img {
    width: 20px;
    margin: 10px auto;
  }

  .changeup h2 {
    font-size: 1.25rem;
    margin: 0.5rem 0;
    line-height: 1.1;
  }

  .changeup p {
    font-size: 1rem;
  }

  .changeup .cta-primary {
    font-size: 1rem;
    margin: 0.75rem auto;
  }

  .case-study {
    min-height: 400px;
  }

  .case-study h2 {
    font-size: 1.5rem;
    margin:0;
  }

  .case-study p {
    font-size: 1rem;
  }

  .video-play-action {
    width:60px;
    height: auto;
    cursor: pointer;
    margin: 10px 0;
  }

  .case-studies {
    grid-template-columns: 1fr;
    grid-gap:20px;
  }

  .footer-block {
    margin: 0 0 20px 0;
    font-size:0.7rem;
  }

  .breadcrumb {
    font-size:0.9rem;
  }

  .triangles {
    background-image: none;
    background-size: 80px;
    background-position: top -10px right -20px;
  }

  .landing-list article {
    display: grid;
    grid-template-columns: 1fr;
    grid-gap: 10px;
  }

  .team-list {
    grid-template-columns: repeat(1, 1fr);
    grid-gap: 20px;
  }


}