.w-layout-grid {
  display: -ms-grid;
  display: grid;
  grid-auto-columns: 1fr;
  -ms-grid-columns: 1fr 1fr;
  grid-template-columns: 1fr 1fr;
  -ms-grid-rows: auto auto;
  grid-template-rows: auto auto;
  grid-row-gap: 16px;
  grid-column-gap: 16px;
}

body {
  font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
  color: #333;
  font-size: 14px;
  line-height: 20px;
}

.navigation {
  width: 100%;
  margin-right: auto;
  margin-left: auto;
  background-color: #fff;
}

.body {
  display: block;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  background-color: #000;
}

.brand {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  padding-top: 30px;
  padding-bottom: 30px;
  padding-left: 0px;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
}

.brand.white {
  color: #fff;
}

.brand.white.w--current {
  color: #fff;
}

.div-block {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
}

.navlink {
  -webkit-transition: color 350ms ease;
  transition: color 350ms ease;
  font-family: neue-haas-grotesk-display, sans-serif;
  color: #fff;
  font-size: 20px;
  font-weight: 400;
}

.navlink:hover {
  color: #222;
}

.navlink.w--current {
  font-family: Lora, sans-serif;
}

.navlink.white {
  -webkit-transition-duration: 200ms;
  transition-duration: 200ms;
  -webkit-transition-timing-function: ease-in;
  transition-timing-function: ease-in;
  font-family: Lato, sans-serif;
  color: hsla(0, 0%, 100%, 0.7);
}

.navlink.white:hover {
  color: #fff;
}

.text-block {
  font-family: Lato, sans-serif;
  color: #fff;
  font-size: 20px;
  font-weight: 400;
  letter-spacing: 3px;
  text-transform: uppercase;
}

.navbar {
  background-color: transparent;
}

.menu-wrapper {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between;
}

.nevigation-menu {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  margin-left: 40px;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
}

.paragraph {
  font-family: Lato, sans-serif;
  color: #3d3d3d;
  font-size: 18px;
  line-height: 24px;
  font-weight: 300;
  letter-spacing: 0px;
  text-decoration: none;
  text-indent: 0px;
  text-transform: none;
  white-space: normal;
}

.paragraph.white {
  display: block;
  margin-bottom: 8px;
  -webkit-box-pack: start;
  -webkit-justify-content: flex-start;
  -ms-flex-pack: start;
  justify-content: flex-start;
  font-family: Lato, sans-serif;
  color: #fff;
  font-size: 18px;
  font-weight: 300;
}

.paragraph.white.center {
  color: #fff;
}

.paragraph.center {
  color: #065b58;
  line-height: 24px;
  text-align: center;
}

.paragraph.center.pink {
  color: #ac9647;
}

.paragraph.center.blue {
  color: #176db7;
}

.paragraph.center.white {
  text-align: left;
}

.paragraph.center.primary {
  color: #48ccdf;
}

.paragraph.center.blck {
  color: #222;
}

.paragraph.black {
  margin-bottom: 8px;
  color: #000;
}

.paragraph.black.narrow {
  width: 400px;
}

.stylegude_fontwrapper {
  padding: 32px 0px 8px;
}

.header4 {
  font-family: neue-haas-grotesk-display, sans-serif;
  color: #222;
  font-size: 20px;
  line-height: 24px;
  font-weight: 400;
}

.header4.white {
  margin-bottom: 4px;
  font-family: neue-haas-grotesk-display, sans-serif;
  color: #fff;
  font-weight: 400;
  text-align: left;
}

.header4.green {
  color: #065b58;
}

.header4.green.right {
  text-align: right;
}

.header4.right {
  text-align: right;
}

.header4.center {
  margin-bottom: 60px;
  text-align: center;
}

.header3 {
  margin-bottom: 24px;
  font-family: 'Playfair Display', sans-serif;
  color: #222;
  font-size: 32px;
  line-height: 40px;
  font-weight: 400;
  text-align: left;
}

.header3.white {
  font-family: Lato, sans-serif;
  color: #fff;
  font-size: 20px;
  line-height: 26.6px;
  font-weight: 300;
}

.header3.white.center {
  text-align: center;
}

.header3.grass {
  font-family: 'Playfair Display', sans-serif;
  color: #4da761;
}

.header3.blue {
  color: #176db7;
}

.header3.blue.bottom-padding {
  margin-bottom: 40px;
}

.header3.green {
  color: #065b58;
}

.header3.primary {
  color: #48ccdf;
}

.header3.center {
  text-align: center;
}

.header3.gold {
  font-family: 'Playfair Display', sans-serif;
  color: #ac9647;
}

.header3.dark {
  font-family: 'Playfair Display', sans-serif;
  color: #4a690c;
  font-weight: 400;
}

.header2 {
  margin-bottom: 16px;
  font-family: 'Playfair Display', sans-serif;
  color: #222;
  font-size: 32px;
  line-height: 36px;
  font-weight: 400;
}

.header2.white {
  color: #fff;
}

.header2.white.center {
  text-align: center;
}

.header2.center {
  text-align: center;
}

.header1 {
  margin-bottom: 16px;
  font-family: 'Playfair Display', sans-serif;
  color: #222;
  font-size: 40px;
  line-height: 40px;
  font-weight: 400;
  letter-spacing: -1px;
}

.header1.white {
  color: #fff;
  font-size: 36px;
  line-height: 40px;
}

.divider-line {
  width: 100%;
  height: 1px;
  margin-top: 8px;
  margin-bottom: 8px;
  padding-top: 0px;
  padding-bottom: 0px;
  background-color: #c7c7c7;
}

.caption {
  margin-bottom: 8px;
  font-family: neue-haas-grotesk-display, sans-serif;
  color: #9c9c9c;
  font-size: 16px;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.caption.green {
  margin-bottom: 16px;
  font-family: neue-haas-grotesk-text, sans-serif;
  color: #065b58;
  font-size: 16px;
  text-decoration: none;
}

.caption.green.center {
  text-align: center;
}

.caption.green.right {
  text-align: right;
}

.caption.white {
  font-family: Inconsolata, monospace;
  color: hsla(0, 0%, 100%, 0.5);
}

.caption.black {
  color: #000;
}

.caption.right {
  text-align: right;
}

.header5 {
  font-family: neue-haas-grotesk-display, sans-serif;
  color: #222;
  font-size: 18px;
  line-height: 24px;
  font-weight: 400;
}

.header5.center {
  text-align: center;
}

.header5.center.white {
  color: #fff;
  text-align: center;
}

.header5.blue {
  margin-bottom: 8px;
  color: #176db7;
}

.fonts-section {
  padding-top: 40px;
  padding-bottom: 80px;
  border-bottom: 4px solid #ef5b09;
}

.header_styleguide {
  padding-top: 100px;
  padding-bottom: 60px;
  border-bottom: 2px none #cc7803;
}

.body-2 {
  background-color: #f9f7e8;
}

.divider_fat {
  height: 4px;
  margin-top: 16px;
  margin-bottom: 0px;
  background-color: #065b58;
}

.headerjumbo {
  font-family: 'Playfair Display', sans-serif;
  color: #222;
  font-size: 56px;
  line-height: 56px;
  font-weight: 400;
}

.headerjumbo.white {
  color: #fff;
}

.cta-section {
  padding-top: 40px;
  padding-bottom: 80px;
  border-bottom: 4px solid #ef5b09;
  white-space: normal;
}

.stylegude_ctawrapper {
  padding: 32px 0px 8px;
}

.cta_bold {
  display: inline-block;
  padding: 8px 24px;
  -webkit-transition: color 400ms ease;
  transition: color 400ms ease;
  font-family: neue-haas-grotesk-display, sans-serif;
  color: #112378;
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;
  text-decoration: underline;
}

.cta_bold:hover {
  color: grey;
}

.cta {
  display: inline-block;
}

.container {
  padding-top: 100px;
  padding-bottom: 100px;
}

.section {
  background-color: #fff;
}

.container-2 {
  border-bottom: 1px solid #acacac;
}

.hero-block {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  height: 90vh;
  padding-bottom: 160px;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  background-color: #dce2db;
  -o-object-fit: cover;
  object-fit: cover;
}

.hero-block.dda {
  position: static;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  height: 80vh;
  -webkit-box-align: start;
  -webkit-align-items: flex-start;
  -ms-flex-align: start;
  align-items: flex-start;
  background-color: #000;
  background-image: url('../images/img.jpg');
  background-position: 100% 50%;
  background-size: cover;
  background-repeat: no-repeat;
}

.hero-block.the-others {
  height: 80vh;
  -webkit-box-pack: start;
  -webkit-justify-content: flex-start;
  -ms-flex-pack: start;
  justify-content: flex-start;
  -webkit-box-align: end;
  -webkit-align-items: flex-end;
  -ms-flex-align: end;
  align-items: flex-end;
  background-image: url('../images/Cover_1.jpg');
  background-position: 100% 50%;
  background-size: cover;
  background-repeat: no-repeat;
  background-clip: border-box;
  -webkit-text-fill-color: inherit;
}

.hero-block.designsystem {
  height: 80vh;
  -webkit-box-pack: start;
  -webkit-justify-content: flex-start;
  -ms-flex-pack: start;
  justify-content: flex-start;
  -webkit-box-align: end;
  -webkit-align-items: flex-end;
  -ms-flex-align: end;
  align-items: flex-end;
  background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.2)), to(rgba(0, 0, 0, 0.2))), url('../images/28283355558_262cdc6785_o1.jpg');
  background-image: linear-gradient(180deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)), url('../images/28283355558_262cdc6785_o1.jpg');
  background-position: 0px 0px, 50% 50%;
  background-size: auto, cover;
  background-repeat: repeat, no-repeat;
}

.hero-block.dda {
  -webkit-box-pack: start;
  -webkit-justify-content: flex-start;
  -ms-flex-pack: start;
  justify-content: flex-start;
  -webkit-box-align: end;
  -webkit-align-items: flex-end;
  -ms-flex-align: end;
  align-items: flex-end;
  background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.15)), to(rgba(0, 0, 0, 0.15))), url('../images/17C86_13-source.jpg');
  background-image: linear-gradient(180deg, rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.15)), url('../images/17C86_13-source.jpg');
  background-position: 0px 0px, 100% 50%;
  background-size: auto, cover;
  background-repeat: repeat, no-repeat;
}

.hero-block.primary {
  -webkit-box-pack: start;
  -webkit-justify-content: flex-start;
  -ms-flex-pack: start;
  justify-content: flex-start;
  -webkit-box-align: end;
  -webkit-align-items: flex-end;
  -ms-flex-align: end;
  align-items: flex-end;
  background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.09)), to(rgba(0, 0, 0, 0.09))), url('../images/Hero_Desktop_12003x.jpg');
  background-image: linear-gradient(180deg, rgba(0, 0, 0, 0.09), rgba(0, 0, 0, 0.09)), url('../images/Hero_Desktop_12003x.jpg');
  background-position: 0px 0px, 100% 50%;
  background-size: auto, cover;
  background-repeat: repeat, no-repeat;
}

.hero-block.metlife {
  background-image: url('../images/metlife-fortune-500.jpg');
  background-position: 100% 50%;
  background-size: cover;
}

.hero-block.metlif {
  height: 80vh;
  -webkit-box-pack: start;
  -webkit-justify-content: flex-start;
  -ms-flex-pack: start;
  justify-content: flex-start;
  -webkit-box-align: end;
  -webkit-align-items: flex-end;
  -ms-flex-align: end;
  align-items: flex-end;
  background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.15)), to(rgba(0, 0, 0, 0.15))), url('../images/metlife-fortune-500.jpg');
  background-image: linear-gradient(180deg, rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.15)), url('../images/metlife-fortune-500.jpg');
  background-position: 0px 0px, 100% 50%;
  background-size: auto, cover;
  background-repeat: repeat, no-repeat;
}

.hero-block.ecomm {
  height: 80vh;
  -webkit-box-pack: start;
  -webkit-justify-content: flex-start;
  -ms-flex-pack: start;
  justify-content: flex-start;
  -webkit-box-align: end;
  -webkit-align-items: flex-end;
  -ms-flex-align: end;
  align-items: flex-end;
  background-image: url('../images/Frame-390.png');
  background-position: 100% 50%;
  background-size: cover;
  background-repeat: no-repeat;
}

.hero-block.illustrative {
  height: 80vh;
  -webkit-box-pack: start;
  -webkit-justify-content: flex-start;
  -ms-flex-pack: start;
  justify-content: flex-start;
  -webkit-box-align: end;
  -webkit-align-items: flex-end;
  -ms-flex-align: end;
  align-items: flex-end;
  background-image: url('../images/screen1.png');
  background-position: 100% 50%;
  background-size: cover;
  background-repeat: no-repeat;
}

.content-block {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  margin-right: auto;
  margin-left: auto;
  padding-top: 72px;
  padding-bottom: 72px;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
}

.content-block.green {
  display: block;
  background-color: #48ccdf;
}

.content-block.screen {
  display: block;
  padding-top: 64px;
  padding-bottom: 0px;
}

.content-block.screen.two-col {
  display: -ms-grid;
  display: grid;
  grid-auto-columns: 1fr;
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  -ms-grid-columns: 1fr 1fr;
  grid-template-columns: 1fr 1fr;
  -ms-grid-rows: auto auto;
  grid-template-rows: auto auto;
}

.content-block.grey {
  border-top-width: 1px;
  border-top-color: #c7c7c7;
  background-color: #fafafa;
}

.content-block.grey.linetop {
  border-top-style: solid;
}

.content-block.blue {
  background-color: #176db7;
}

.content-block.video {
  display: block;
  height: 700px;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
}

.content-block.full {
  padding-top: 0px;
  padding-bottom: 56px;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
}

.content-block.black {
  background-color: #222;
}

.content-block.tools {
  padding-top: 0px;
  padding-bottom: 56px;
}

.content-block.no-top-padding {
  padding-top: 0px;
}

.section-wrapper {
  position: relative;
  z-index: 5;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  width: 80%;
  max-width: 1200px;
  margin-right: auto;
  margin-left: auto;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
}

.section-wrapper.navigation {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
}

.section-wrapper.grey {
  padding: 56px 50px;
  border-style: solid;
  border-width: 1px;
  border-color: #e9e9e9;
  background-color: #fafafa;
  background-image: linear-gradient(323deg, #fafafa, #fff);
}

.client-name {
  height: 60px;
  margin-bottom: 40px;
}

.my-role {
  height: 60px;
}

.summary {
  margin-bottom: 40px;
}

.cta_button {
  display: inline-block;
  padding: 8px 24px;
  border: 1px solid #000;
  -webkit-transition: background-color 200ms ease-in-out, color 200ms ease-in-out;
  transition: background-color 200ms ease-in-out, color 200ms ease-in-out;
  font-family: neue-haas-grotesk-display, sans-serif;
  color: #222;
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;
  text-decoration: none;
}

.cta_button:hover {
  border-color: #222;
  background-color: #222;
  color: #fff;
}

.cta_button.white {
  display: inline-block;
  border-color: #fff;
  -webkit-transition: border-color 200ms ease-in-out, background-color 200ms ease-in-out, color 200ms ease-in-out;
  transition: border-color 200ms ease-in-out, background-color 200ms ease-in-out, color 200ms ease-in-out;
  color: #fff;
  letter-spacing: 1px;
  text-transform: none;
}

.cta_button.white:hover {
  border-color: #fff;
  background-color: #fff;
  color: #222;
}

.cta_button.white.hero {
  display: inline;
}

.div-block-2 {
  display: block;
  width: 100%;
  height: 600px;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
}

.problem-statement {
  margin-bottom: 40px;
}

.caotion {
  font-family: Karla, sans-serif;
  font-size: 16px;
  line-height: 24px;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.caotion.white {
  margin-bottom: 8px;
  color: #fff;
}

.number {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  width: 32px;
  height: 32px;
  margin-bottom: 8px;
  padding-top: 0px;
  padding-bottom: 4px;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  border: 1px solid #48ccdf;
  border-radius: 100px;
}

.number.pink {
  border-color: #ac9647;
  color: #45b436;
}

.number.blue {
  border-color: #176db7;
}

.number.green {
  color: #065b58;
}

.text-block-2 {
  text-align: center;
}

.column {
  padding-left: 0px;
}

.div-block-3 {
  margin-bottom: 40px;
  padding-right: 0px;
  padding-left: 0px;
}

.div-block-4 {
  display: -ms-grid;
  display: grid;
  grid-auto-columns: 1fr;
  grid-column-gap: 24px;
  grid-row-gap: 24px;
  -ms-grid-columns: 1fr 1fr;
  grid-template-columns: 1fr 1fr;
  -ms-grid-rows: auto auto;
  grid-template-rows: auto auto;
}

.column-2 {
  padding-left: 0px;
}

.more-projects {
  background-color: #acacac;
}

.link-block {
  text-decoration: none;
}

.link-block-2 {
  text-decoration: none;
}

.div-block-5 {
  float: right;
}

.parimage {
  -webkit-align-self: auto;
  -ms-flex-item-align: auto;
  -ms-grid-row-align: auto;
  align-self: auto;
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 auto;
  -ms-flex: 0 0 auto;
  flex: 0 0 auto;
  -o-object-fit: contain;
  object-fit: contain;
}

.main-grid {
  display: -ms-grid;
  display: grid;
  grid-auto-flow: row;
  grid-auto-columns: 1fr;
  grid-column-gap: 47px;
  grid-row-gap: 32px;
  -ms-grid-columns: 1fr 1fr;
  grid-template-columns: 1fr 1fr;
  -ms-grid-rows: auto;
  grid-template-rows: auto;
}

.div-block-6 {
  height: 100%;
  background-image: url('../images/42479983265_849f3caeb7_k.jpg');
  background-position: 0px 0px;
  background-size: cover;
}

.image-2 {
  margin-top: 220px;
  margin-left: 140px;
}

.driverimag {
  width: 100%;
}

.navbar-wrapper {
  position: absolute;
  left: 0%;
  top: 0%;
  right: 0%;
  bottom: auto;
  z-index: 100;
  background-color: #fff;
}

.navvrapper {
  position: fixed;
  z-index: 50;
  width: 100%;
  box-shadow: none;
}

.navvrapper.white {
  position: absolute;
  background-color: transparent;
  background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.21)), color-stop(0%, rgba(41, 41, 41, 0.18)), to(hsla(0, 0%, 100%, 0)));
  background-image: linear-gradient(180deg, rgba(0, 0, 0, 0.21), rgba(41, 41, 41, 0.18) 0%, hsla(0, 0%, 100%, 0));
  box-shadow: none;
}

.text-span {
  color: #0266e2;
}

.column-19 {
  padding-top: 10px;
  padding-bottom: 10px;
}

.projectname {
  position: relative;
  z-index: 5;
  margin-bottom: 0px;
  color: #fff;
  font-size: 45px;
  line-height: 45px;
  font-weight: 700;
  text-align: left;
  letter-spacing: -1px;
}

.columns-4 {
  -webkit-transition: all 842ms ease;
  transition: all 842ms ease;
}

.grd {
  position: absolute;
  left: 0px;
  top: 0px;
  right: 0px;
  z-index: 4;
  overflow: hidden;
  height: 100%;
  -webkit-transition: background-color 500ms ease;
  transition: background-color 500ms ease;
}

.grd:hover {
  background-color: rgba(0, 0, 0, 0.21);
}

.container-3 {
  padding-top: 0px;
  padding-bottom: 40px;
}

.heading-2 {
  margin-top: 0px;
  margin-bottom: 8px;
  color: #272727;
  font-size: 37px;
  line-height: 41px;
  font-weight: 500;
  text-align: left;
  letter-spacing: -1px;
}

.mage {
  position: relative;
  z-index: 1;
  overflow: hidden;
  height: 100%;
  background-image: url('../images/cover.jpg');
  background-position: 50% 141%;
  background-size: 900px;
  -webkit-transform: scale(1.08);
  -ms-transform: scale(1.08);
  transform: scale(1.08);
  -webkit-transition: -webkit-transform 392ms ease;
  transition: -webkit-transform 392ms ease;
  transition: transform 392ms ease;
  transition: transform 392ms ease, -webkit-transform 392ms ease;
}

.mage:hover {
  -webkit-transform: none;
  -ms-transform: none;
  transform: none;
}

.mage.yoffi {
  background-image: url('../images/Artboard5.jpg');
  background-position: 0% 289%;
  background-size: 700px;
}

.mage.kipl {
  background-image: url('../images/kipling.jpg');
  background-position: 68% 35%;
  background-size: cover;
}

.mage.vibes {
  background-image: url('../images/vibs.jpg');
  background-position: 66% 96%;
  background-size: 800px;
}

.mage.chanel {
  background-image: url('../images/H2.jpg');
  background-position: -292% 60%;
  background-size: 700px;
}

.mage.checkidea {
  background-image: url('../images/Artboard.jpg');
  background-position: 1% 55%;
  background-size: 700px;
}

.mage.alliance {
  background-image: url('../images/Left-View---30°.jpg');
  background-position: -175% 47%;
  background-size: 500px;
}

.mage.newsela {
  background-position: 55% 142%;
  background-size: 800px;
}

.imim {
  position: absolute;
  left: 0px;
  top: 0px;
  right: 0px;
  z-index: 2;
  height: 100%;
  -webkit-transition: all 658ms ease;
  transition: all 658ms ease;
}

.imim:hover {
  background-image: none;
  -webkit-transform: scale(1);
  -ms-transform: scale(1);
  transform: scale(1);
}

.grid-2 {
  -ms-grid-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
  -ms-grid-rows: auto;
  grid-template-rows: auto;
}

.skills {
  color: #fff;
}

.div-block-24 {
  position: relative;
  left: 0px;
  right: 0px;
  bottom: 0px;
  overflow: hidden;
  height: 400px;
  padding: 0px;
  border-radius: 8px;
  -webkit-transition: all 592ms ease;
  transition: all 592ms ease;
}

.section-10 {
  padding-top: 40px;
  padding-bottom: 40px;
  -webkit-transition: opacity 200ms ease;
  transition: opacity 200ms ease;
}

.text-block-10 {
  display: block;
  padding-top: 0px;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  color: #242424;
  font-size: 16px;
  line-height: 26px;
  font-weight: 300;
  text-align: left;
}

.link-block-5 {
  position: absolute;
  left: 0px;
  top: 0px;
  right: 0px;
  z-index: 4;
  overflow: hidden;
  width: 100%;
  height: 100%;
  text-decoration: none;
}

.link-block-5:hover {
  position: absolute;
  left: 0px;
  top: 0px;
  right: 0px;
  overflow: hidden;
  background-image: none;
}

.projtext {
  position: absolute;
  left: 24px;
  right: 24px;
  bottom: 25px;
  z-index: 5;
  overflow: visible;
  padding-left: 1px;
  -webkit-transition: -webkit-transform 200ms ease;
  transition: -webkit-transform 200ms ease;
  transition: transform 200ms ease;
  transition: transform 200ms ease, -webkit-transform 200ms ease;
}

.agency-name {
  height: 60px;
  margin-bottom: 24px;
}

.div-block-25 {
  display: -ms-grid;
  display: grid;
  grid-auto-columns: 1fr;
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  -ms-grid-columns: 1fr 1fr;
  grid-template-columns: 1fr 1fr;
  -ms-grid-rows: auto auto;
  grid-template-rows: auto auto;
}

.aboutcontainer {
  padding-right: 40px;
  border-right: 1px solid #3f7eb4;
}

.aboutcontainer.chanel {
  border-right-color: #363636;
}

.aboutcontainer.dda {
  border-right-color: #3483c7;
}

.aboutcontainer.primary {
  border-right-color: #76e3f3;
}

.column-20 {
  padding-left: 40px;
}

.hero-content-block {
  position: relative;
  z-index: 5;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
  height: 100vh;
  padding-bottom: 100px;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: end;
  -webkit-align-items: flex-end;
  -ms-flex-align: end;
  align-items: flex-end;
  background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.25)), to(rgba(0, 0, 0, 0.25))), url('../images/adrian-infernus-GLf7bAwCdYg-unsplash.jpeg');
  background-image: linear-gradient(180deg, rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.25)), url('../images/adrian-infernus-GLf7bAwCdYg-unsplash.jpeg');
  background-position: 0px 0px, 0px 0px;
  background-size: auto, cover;
}

.hero-content-block.green {
  display: block;
  background-color: #000;
}

.hero-content-block.screen {
  padding-top: 96px;
  padding-bottom: 96px;
}

.hero-content-block.grey {
  border-top-width: 1px;
  border-top-color: #c7c7c7;
  background-color: #fafafa;
}

.hero-content-block.grey.linetop {
  border-top-style: solid;
}

.companies {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  grid-auto-columns: 1fr;
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  -ms-grid-columns: 1fr 1fr 1fr 1fr 1fr;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
  -ms-grid-rows: auto;
  grid-template-rows: auto;
  opacity: 0.4;
}

.where-i-worked {
  position: relative;
  top: 56px;
  display: none;
  overflow: visible;
  padding: 32px 32px 16px;
  border-top: 1px solid hsla(0, 0%, 100%, 0.11);
  background-color: transparent;
}

.dummy-images {
  display: -ms-grid;
  display: grid;
  grid-auto-columns: 1fr;
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  grid-template-areas: "Area Area";
  -ms-grid-columns: 1fr 16px 1fr;
  grid-template-columns: 1fr 1fr;
  -ms-grid-rows: auto 16px auto;
  grid-template-rows: auto auto;
}

.portfolio-links {
  padding-top: 80px;
  padding-bottom: 64px;
}

.image-3 {
  opacity: 0.5;
}

.callout {
  font-family: freight-text-pro, sans-serif;
  font-size: 23px;
  line-height: 26px;
  letter-spacing: 0px;
  text-indent: 0px;
  text-transform: none;
  white-space: normal;
}

.callout.white {
  margin-bottom: 8px;
  font-family: 'Playfair Display', sans-serif;
  color: #fff;
  font-size: 23px;
  font-weight: 400;
}

.callout.center {
  color: #065b58;
  text-align: center;
}

.div-block-26 {
  display: -ms-grid;
  display: grid;
  grid-auto-columns: 1fr;
  grid-column-gap: 16px;
  grid-row-gap: 23px;
  -ms-grid-columns: 1fr 1fr;
  grid-template-columns: 1fr 1fr;
  -ms-grid-rows: auto auto;
  grid-template-rows: auto auto;
}

.div-block-27 {
  padding-right: 40px;
}

.div-block-28 {
  padding-right: 40px;
}

.rolewrapper {
  margin-bottom: 40px;
  padding-right: 24px;
  padding-left: 0px;
  color: #ac9647;
}

.slider {
  position: absolute;
  left: 0%;
  top: 0%;
  right: 0%;
  bottom: 0%;
  z-index: 4;
  height: 100%;
}

.slide {
  background-image: url('../images/Artboard-Copy-15.jpg');
  background-position: 100% 50%;
  background-size: cover;
}

.slide-2 {
  background-image: url('../images/Artboard-Copy-13.jpg');
  background-position: 100% 50%;
  background-size: cover;
}

.slide-nav {
  display: none;
}

.left-arrow {
  display: none;
}

.right-arrow {
  display: none;
}

.div-block-29 {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  width: 80%;
  height: 100vh;
  margin-right: auto;
  margin-left: auto;
  padding-bottom: 200px;
  -webkit-box-pack: start;
  -webkit-justify-content: flex-start;
  -ms-flex-pack: start;
  justify-content: flex-start;
  -webkit-box-align: end;
  -webkit-align-items: flex-end;
  -ms-flex-align: end;
  align-items: flex-end;
}

.column-23 {
  padding-left: 0px;
}

.div-block-633-copy {
  height: 60vh;
  background-color: #2886d8;
}

.project_card {
  position: relative;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  overflow: hidden;
  height: 60vh;
  margin-bottom: 28px;
  padding-bottom: 50px;
  padding-left: 50px;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-flex-wrap: nowrap;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
  -webkit-box-align: end;
  -webkit-align-items: flex-end;
  -ms-flex-align: end;
  align-items: flex-end;
  border-style: solid;
  border-width: 1px;
  border-color: #e6e6e6;
  border-radius: 16px;
  color: #fff;
  text-decoration: none;
  mix-blend-mode: normal;
}

.project_card.no {
  display: none;
}

.div-block-63 {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  height: 60vh;
  -webkit-box-align: end;
  -webkit-align-items: flex-end;
  -ms-flex-align: end;
  align-items: flex-end;
  background-color: #b9dbf8;
}

.text-block-29 {
  width: 50%;
  font-size: 24px;
  line-height: 32px;
}

.div-block-65 {
  position: relative;
  width: 80%;
  margin-right: auto;
  margin-left: auto;
}

.text-block-30 {
  color: #000;
  font-size: 24px;
  line-height: 32px;
}

.div-block-62 {
  position: relative;
  top: -10vh;
  z-index: 8;
  width: 80%;
  margin-right: auto;
  margin-left: auto;
}

.div-block-64-text {
  position: absolute;
  left: 0%;
  top: 0%;
  right: 0%;
  bottom: 0%;
  z-index: 7;
  width: 80%;
  margin-right: auto;
  margin-left: auto;
  padding-top: 6vh;
}

.grid-3 {
  display: block;
  -webkit-box-pack: stretch;
  -webkit-justify-content: stretch;
  -ms-flex-pack: stretch;
  justify-content: stretch;
  -webkit-align-content: start;
  -ms-flex-line-pack: start;
  align-content: start;
  grid-template-areas: "Area Area";
  -ms-grid-columns: 1fr 1fr;
  grid-template-columns: 1fr 1fr;
}

.div-block-61 {
  position: relative;
  bottom: 5vh;
  z-index: 2;
  width: 80%;
  margin-right: auto;
  margin-left: auto;
  padding-top: 100px;
  padding-bottom: 100px;
}

.card_project_title {
  position: absolute;
  left: 0%;
  top: auto;
  right: 0%;
  bottom: 0%;
  z-index: 5;
  display: block;
}

.card_darkener {
  position: absolute;
  left: 0%;
  top: auto;
  right: 0%;
  bottom: 0%;
  z-index: 3;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  height: 70%;
  -webkit-box-align: end;
  -webkit-align-items: flex-end;
  -ms-flex-align: end;
  align-items: flex-end;
  background-image: -webkit-gradient(linear, left top, left bottom, from(hsla(0, 0%, 100%, 0)), to(#fff));
  background-image: linear-gradient(180deg, hsla(0, 0%, 100%, 0), #fff);
}

.text-block-31 {
  color: #000;
}

.div-block-66 {
  position: relative;
  overflow: visible;
}

.div-block-67 {
  position: relative;
  display: block;
  overflow: hidden;
}

.text-block-32 {
  font-size: 18px;
}

.card_link_wrapper {
  position: relative;
  z-index: 4;
  display: block;
  overflow: hidden;
  height: 30px;
}

.card_projecttitle_wrapper {
  position: relative;
  display: block;
  width: 80%;
  -webkit-box-align: end;
  -webkit-align-items: flex-end;
  -ms-flex-align: end;
  align-items: flex-end;
}

.card_projecttitle_wrapper.narrow {
  width: 50%;
}

.div-block-68 {
  display: block;
}

.read-more {
  position: relative;
  display: block;
  color: #222;
  font-size: 18px;
}

.card_bgimage {
  position: absolute;
  left: 0%;
  top: 0%;
  right: 0%;
  bottom: 0%;
  width: 100%;
  height: 100%;
  border-radius: 16px;
}

.card_bgimage._1 {
  background-image: url('../images/Artboard_1.jpg');
  background-position: 100% 50%;
  background-size: cover;
}

.card_bgimage._2 {
  border-radius: 0px;
  background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.04)), to(rgba(0, 0, 0, 0.04))), url('../images/Cover_1.jpg');
  background-image: linear-gradient(180deg, rgba(0, 0, 0, 0.04), rgba(0, 0, 0, 0.04)), url('../images/Cover_1.jpg');
  background-position: 0px 0px, 50% 50%;
  background-size: auto, cover;
}

.card_bgimage._4 {
  background-image: url('../images/49465798757_07882b9067_c.jpg');
  background-position: 50% 0%;
  background-size: cover;
}

.card_bgimage._3 {
  background-image: -webkit-gradient(linear, left top, left bottom, from(hsla(0, 0%, 100%, 0.09)), to(hsla(0, 0%, 100%, 0.09))), url('../images/Hero_Desktop_12003x.jpg');
  background-image: linear-gradient(180deg, hsla(0, 0%, 100%, 0.09), hsla(0, 0%, 100%, 0.09)), url('../images/Hero_Desktop_12003x.jpg');
  background-position: 0px 0px, 50% 50%;
  background-size: auto, cover;
}

.card_bgimage._4 {
  background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.04)), to(rgba(0, 0, 0, 0.04))), url('../images/screen2.png');
  background-image: linear-gradient(180deg, rgba(0, 0, 0, 0.04), rgba(0, 0, 0, 0.04)), url('../images/screen2.png');
  background-position: 0px 0px, 50% 50%;
  background-size: auto, cover;
}

.card_bgimage._3 {
  background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.04)), to(rgba(0, 0, 0, 0.04))), url('../images/screen1.png');
  background-image: linear-gradient(180deg, rgba(0, 0, 0, 0.04), rgba(0, 0, 0, 0.04)), url('../images/screen1.png');
  background-position: 0px 0px, 50% 50%;
  background-size: auto, cover;
}

.div-block-69 {
  position: relative;
  z-index: 3;
  width: 60%;
}

.subhero_sectionbg {
  position: absolute;
  left: 0%;
  top: 0%;
  right: auto;
  bottom: auto;
  z-index: 2;
  width: 80%;
  height: 100%;
  padding-top: 68px;
  padding-bottom: 0px;
  background-color: #192965;
}

.div-block-70 {
  position: relative;
}

.sibheader_promo {
  position: relative;
  top: -40px;
  z-index: 6;
  display: block;
  height: 500px;
  padding-top: 110px;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
}

.projects_grid {
  position: relative;
  top: -24px;
  z-index: 8;
  width: 80%;
  margin-right: auto;
  margin-left: auto;
}

.navvrapperbg {
  position: absolute;
  left: 0%;
  top: 0%;
  right: 0%;
  bottom: 0%;
  height: 80px;
  background-color: #fff;
}

.div-block-71 {
  position: static;
  left: 0%;
  top: 0%;
  right: 0%;
  bottom: auto;
  z-index: 10;
  height: 100px;
  background-color: #065b58;
}

.testimonials {
  display: none;
  padding-top: 60px;
  padding-bottom: 40px;
  background-color: #083ea7;
  background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.79)), to(rgba(0, 0, 0, 0.79))), url('../images/Bitmap.jpg');
  background-image: linear-gradient(180deg, rgba(0, 0, 0, 0.79), rgba(0, 0, 0, 0.79)), url('../images/Bitmap.jpg');
  background-position: 0px 0px, 0px 0px;
  background-size: auto, cover;
}

.div-block-72 {
  width: 80%;
  margin-right: auto;
  margin-left: auto;
}

.slide-nav-2 {
  background-color: transparent;
}

.slider-2 {
  height: 400px;
  background-color: transparent;
}

.div-block-73 {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  width: 80%;
  height: 320px;
  margin-right: auto;
  margin-left: auto;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: end;
  -webkit-justify-content: flex-end;
  -ms-flex-pack: end;
  justify-content: flex-end;
}

.div-block-73.narrow {
  width: 50%;
  height: 320px;
  -webkit-box-pack: end;
  -webkit-justify-content: flex-end;
  -ms-flex-pack: end;
  justify-content: flex-end;
}

.div-block-74 {
  width: 50px;
  height: 50px;
  border-radius: 60px;
  background-image: url('../images/0_10.jpg');
  background-position: 50% 50%;
  background-size: cover;
}

.div-block-75 {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  margin-top: 16px;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
}

.left-arrow-2 {
  display: block;
}

.right-arrow-2 {
  display: block;
}

.testava {
  width: 80px;
  height: 80px;
  margin-right: 24px;
  margin-bottom: 13px;
  border-radius: 60px;
  background-image: url('../images/0_10.jpg');
  background-position: 50% 50%;
  background-size: cover;
}

.testava._2 {
  background-image: url('../images/2_12.jpg');
}

.testava._3 {
  background-image: url('../images/3.jpg');
}

.testava._4 {
  background-image: url('../images/4.jpg');
}

.background-video {
  height: 750px;
}

.div-block-76 {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}

.slide-3 {
  background-image: url('../images/Artboard-Copy-14.jpg');
  background-position: 0px 0px;
  background-size: cover;
}

.slide-2-copy {
  background-image: url('../images/Artboard-Copy-13_1.jpg');
  background-position: 100% 50%;
  background-size: cover;
}

.div-block-77 {
  width: 80%;
}

.background-video-2 {
  width: 100%;
  height: 100vh;
  margin-right: auto;
  margin-left: auto;
}

.full-column {
  padding: 0px;
}

.columns-5 {
  width: 100%;
  margin-top: 40px;
}

.button-block {
  display: none;
  height: 60px;
  -webkit-box-pack: start;
  -webkit-justify-content: flex-start;
  -ms-flex-pack: start;
  justify-content: flex-start;
  -webkit-box-align: end;
  -webkit-align-items: flex-end;
  -ms-flex-align: end;
  align-items: flex-end;
}

.html-embed {
  width: 100%;
  height: 700px;
}

.explaner {
  width: 80%;
  margin: 24px auto 8px;
  font-family: Inconsolata, monospace;
  color: #222;
  font-size: 12px;
  font-weight: 400;
  text-align: center;
  letter-spacing: 0px;
  text-decoration: none;
  text-transform: none;
}

.explaner.green {
  margin-bottom: 16px;
  font-family: neue-haas-grotesk-text, sans-serif;
  color: #065b58;
  font-size: 16px;
  text-decoration: none;
}

.explaner.green.center {
  text-align: center;
}

.explaner.green.right {
  text-align: right;
}

.explaner.white {
  font-family: neue-haas-grotesk-text, sans-serif;
  color: hsla(0, 0%, 100%, 0.5);
}

.explaner.black {
  color: #000;
}

.explaner.right {
  text-align: right;
}

.lightbox-link {
  position: relative;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
}

.play-icon {
  position: relative;
  left: 0%;
  top: 0%;
  right: auto;
  bottom: auto;
  width: 50px;
  height: 50px;
  -webkit-align-self: auto;
  -ms-flex-item-align: auto;
  -ms-grid-row-align: auto;
  align-self: auto;
}

.image-4 {
  position: absolute;
}

.image-5 {
  opacity: 1;
}

.div-block-78 {
  position: relative;
  display: block;
  width: 100%;
  height: 550px;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
}

.image-6 {
  position: relative;
  z-index: 3;
}

.hoverblock {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
  height: 650px;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  background-image: url('../images/Zepplin.jpg');
  background-position: 50% 50%;
  background-size: contain;
}

.hoverblock._2 {
  background-image: url('../images/invScreen.jpg');
}

.hoverblock._3 {
  background-image: url('../images/Assets.jpg');
}

.hoverblock.styleguide {
  background-image: url('../images/MBUSAStyleguideCover.jpg');
  background-size: cover;
}

.hoverblock.dsm {
  background-image: url('../images/DSM-Usage.jpg');
}

.hoverblock.dda {
  background-image: url('../images/Untitled.00_00_04_29.Still002.jpg');
}

.hoverblock.pdp {
  background-image: url('../images/PDP-Prototype.jpg');
  background-size: cover;
}

.hoverblock.small {
  height: 300px;
  background-image: url('../images/PDP-Prototype.jpg');
  background-size: cover;
}

.hoverblock.small.pdp2 {
  background-image: url('../images/Two-images1.jpg');
}

.hoverblock.small.pdp3 {
  background-image: url('../images/Version2.jpg');
}

.hoverblock.dsm2 {
  background-image: url('../images/DSM-Working-Screen-0-00-01-56_1.png');
}

.hoverblock.dda-old-home {
  background-image: url('../images/Old-home.jpg');
  background-size: cover;
}

.hoverblock.dda-new-home {
  background-image: url('../images/New-home.jpg');
  background-position: 50% 0%;
  background-size: cover;
  background-repeat: no-repeat;
}

.hoverblock.dda-ticket-creation {
  background-image: url('../images/Vehicle-Search-3-Copy-1.jpg');
  background-position: 50% 0%;
  background-size: cover;
}

.hoverblock.activation {
  background-image: url('../images/Delivery-Review-Dark--8-Copy.jpg');
}

.play {
  -webkit-transition: -webkit-transform 200ms ease-in-out;
  transition: -webkit-transform 200ms ease-in-out;
  transition: transform 200ms ease-in-out;
  transition: transform 200ms ease-in-out, -webkit-transform 200ms ease-in-out;
}

.play:hover {
  -webkit-transform: scale(1.1);
  -ms-transform: scale(1.1);
  transform: scale(1.1);
}

.invis {
  -webkit-transition: -webkit-transform 200ms ease-in-out;
  transition: -webkit-transform 200ms ease-in-out;
  transition: transform 200ms ease-in-out;
  transition: transform 200ms ease-in-out, -webkit-transform 200ms ease-in-out;
}

.invis:hover {
  -webkit-transform: scale(1.1);
  -ms-transform: scale(1.1);
  transform: scale(1.1);
}

.fullwidth-image {
  height: 100vh;
  background-image: url('../images/Screens.jpg');
  background-position: 50% 50%;
  background-size: cover;
}

.image-7 {
  width: 100%;
}

.herowrapper {
  width: 70%;
}

.slider-3 {
  height: 100%;
  background-color: transparent;
}

.promowrapper {
  margin-top: 40px;
}

.promowrapper.margin-bottom {
  margin-bottom: 39px;
}

.promowrapper.no-top {
  margin-top: 0px;
}

.dropdowntoggle {
  position: relative;
}

.dropdownwrapper {
  position: absolute;
  width: 150px;
  background-color: #fff;
}

.dropdownlink {
  display: block;
  font-family: neue-haas-grotesk-display, sans-serif;
  color: #000;
  text-decoration: none;
}

.dropdownlinkwrapper {
  padding: 10px 20px;
  border-radius: 0px;
}

.icon {
  display: none;
}

.dropdown-toggle {
  padding-right: 20px;
  -webkit-transition: color 200ms ease-in;
  transition: color 200ms ease-in;
  color: hsla(0, 0%, 100%, 0.7);
}

.dropdown-toggle:hover {
  color: #fff;
}

.dropdown-link {
  padding: 16px 24px;
  -webkit-transition: color 150ms ease-in;
  transition: color 150ms ease-in;
  color: rgba(34, 34, 34, 0.7);
  font-size: 18px;
}

.dropdown-link:hover {
  color: #0266e2;
}

.dropdown-link.w--current {
  color: #0266e2;
}

.dropdown-link.chanel {
  display: block;
}

.dropdown-link.metlife {
  display: block;
}

.dropdown-list {
  -webkit-transition: opacity 200ms ease;
  transition: opacity 200ms ease;
}

.dropdown-list.w--open {
  background-color: #f2f8ff;
  box-shadow: 3px 3px 8px 0 rgba(0, 0, 0, 0.29);
  -webkit-transition: opacity 475ms ease;
  transition: opacity 475ms ease;
}

.div-block-79 {
  display: -ms-grid;
  display: grid;
  grid-auto-columns: 1fr;
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  -ms-grid-columns: 1fr 1fr;
  grid-template-columns: 1fr 1fr;
  -ms-grid-rows: auto;
  grid-template-rows: auto;
}

.color-section {
  height: 100vh;
  background-color: #48ccdf;
}

.color-section._2 {
  background-color: #ef5b09;
}

.color-section._3 {
  background-color: #065b58;
}

.toolwrapper {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-box-pack: start;
  -webkit-justify-content: flex-start;
  -ms-flex-pack: start;
  justify-content: flex-start;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
}

.toolimage {
  margin-right: 11px;
  margin-bottom: 0px;
}

.tools-grid {
  display: -ms-grid;
  display: grid;
  margin-top: 24px;
  grid-auto-flow: row;
  grid-auto-columns: 1fr;
  grid-column-gap: 40px;
  grid-row-gap: 24px;
  -ms-grid-columns: 1fr 1fr 1fr 1fr;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  -ms-grid-rows: auto;
  grid-template-rows: auto;
}

.text-brake {
  margin-top: 40px;
  margin-bottom: 20px;
}

.steps {
  display: -ms-grid;
  display: grid;
  grid-auto-columns: 1fr;
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  -ms-grid-columns: 1fr 0.3fr 1fr 0.3fr 1fr 0.3fr 1fr 0.3fr 1fr;
  grid-template-columns: 1fr 0.3fr 1fr 0.3fr 1fr 0.3fr 1fr 0.3fr 1fr;
  -ms-grid-rows: auto;
  grid-template-rows: auto;
}

.stepwrapper {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
}

.stepimage {
  margin-bottom: 16px;
}

.arrowwrapper {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  opacity: 0.08;
}

.image-9 {
  opacity: 1;
  color: #2583f8;
}

.stepswrapper {
  margin-top: 60px;
  margin-bottom: 72px;
  padding: 56px 32px;
  background-color: #fafafa;
}

.bold-text {
  text-decoration: none;
}

.mask {
  overflow: visible;
  height: 100%;
}

.slider-4 {
  height: 100%;
  -webkit-box-flex: 0;
  -webkit-flex: 0 auto;
  -ms-flex: 0 auto;
  flex: 0 auto;
  background-color: transparent;
}

.slide-5 {
  height: 480px;
}

.slide-nav-3 {
  position: absolute;
}

.right-arrow-3 {
  overflow: hidden;
}

.slidewrapper {
  height: auto;
}

.video-wrapper {
  margin-top: 72px;
}

.div-block-80 {
  margin-top: 24px;
}

.div-block-81 {
  margin-top: 40px;
}

.image-grid-3 {
  margin-top: 48px;
  margin-bottom: 31px;
  -ms-grid-columns: 1fr 1fr 1fr;
  grid-template-columns: 1fr 1fr 1fr;
  -ms-grid-rows: auto;
  grid-template-rows: auto;
}

.image-grid {
  box-shadow: 1px 1px 8px 0 rgba(0, 0, 0, 0.27);
}

.grid-4 {
  margin-top: 48px;
  -ms-grid-columns: 1fr 1fr 1fr;
  grid-template-columns: 1fr 1fr 1fr;
}

.gif {
  box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.15);
}

.header-jumbo {
  margin-bottom: 16px;
  font-family: neue-haas-grotesk-display, sans-serif;
  color: #222;
  font-size: 40px;
  line-height: 40px;
  font-weight: 400;
}

.header-jumbo.white {
  font-family: 'Playfair Display', sans-serif;
  color: #fff;
  font-size: 70px;
  line-height: 80px;
  font-weight: 400;
  letter-spacing: -2px;
}

.text-block-33 {
  font-family: Lato, sans-serif;
}

@media screen and (max-width: 991px) {
  .navigation {
    width: 100%;
  }

  .navbar {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-flex-wrap: nowrap;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
  }

  .menu-button {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-flex: 0;
    -webkit-flex: 0 auto;
    -ms-flex: 0 auto;
    flex: 0 auto;
  }

  .menu-wrapper {
    display: block;
    width: 100%;
  }

  .content-block.green {
    padding-bottom: 56px;
  }

  .content-block.blue {
    padding-bottom: 56px;
  }

  .main-grid {
    -ms-grid-columns: 1fr;
    grid-template-columns: 1fr;
  }

  .projectname {
    margin-top: 161px;
    font-size: 40px;
  }

  .aboutcontainer.chanel {
    margin-bottom: 40px;
    padding-bottom: 24px;
    border-bottom: 1px solid #363636;
    border-right-style: none;
  }

  .aboutcontainer.dda {
    margin-bottom: 40px;
    padding-bottom: 24px;
    border-bottom: 1px solid #3483c7;
    border-right-style: none;
  }

  .aboutcontainer.primary {
    margin-bottom: 40px;
    padding-bottom: 24px;
    border-bottom: 1px solid #3483c7;
    border-right-style: none;
  }

  .column-20 {
    padding-left: 0px;
  }

  .column-21 {
    padding-right: 0px;
    padding-left: 0px;
  }

  .column-22 {
    padding-right: 0px;
    padding-left: 0px;
  }

  .hoverblock {
    height: 450px;
  }

  .tools-grid {
    -ms-grid-columns: 1fr;
    grid-template-columns: 1fr;
  }

  .steps {
    -ms-grid-columns: 1fr 0.3fr 1fr 0.3fr 1fr 0.3fr;
    grid-template-columns: 1fr 0.3fr 1fr 0.3fr 1fr 0.3fr;
    -ms-grid-rows: auto auto;
    grid-template-rows: auto auto;
  }
}

@media screen and (max-width: 767px) {
  .paragraph.center.blck {
    text-align: left;
  }

  .header3.white.center {
    font-size: 18px;
    line-height: 23.94px;
  }

  .section-wrapper.grey {
    padding: 24px;
  }

  .div-block-4 {
    grid-row-gap: 0px;
    -ms-grid-columns: 1fr;
    grid-template-columns: 1fr;
  }

  .project_card {
    padding: 31px 24px;
  }

  .div-block-72 {
    width: 100%;
  }

  .slider-2 {
    height: 400px;
  }

  .div-block-73 {
    width: 75%;
    height: 350px;
    -webkit-justify-content: space-around;
    -ms-flex-pack: distribute;
    justify-content: space-around;
  }

  .div-block-73.narrow {
    width: 80%;
    -webkit-box-pack: end;
    -webkit-justify-content: flex-end;
    -ms-flex-pack: end;
    justify-content: flex-end;
  }

  .explaner {
    font-family: 'Roboto Mono', sans-serif;
  }

  .hoverblock.styleguide {
    height: 300px;
  }

  .hoverblock.dsm {
    height: 300px;
  }

  .tools-grid {
    -ms-grid-columns: 1fr 1fr;
    grid-template-columns: 1fr 1fr;
  }

  .icon-3 {
    font-size: 18px;
  }

  .icon-4 {
    font-size: 18px;
  }

  .steps {
    -ms-grid-columns: 1fr;
    grid-template-columns: 1fr;
  }

  .stepwrapper {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
  }

  .stepimage {
    margin-right: 24px;
  }

  .stepswrapper {
    padding-right: 57px;
    padding-left: 57px;
  }
}

@media screen and (max-width: 479px) {
  .menu-button.w--open {
    background-color: rgba(255, 222, 222, 0);
  }

  .nevigation-menu {
    background-color: rgba(0, 0, 0, 0.81);
  }

  .paragraph.center.blck {
    text-align: left;
  }

  .paragraph.black.narrow {
    width: 100%;
  }

  .header1 {
    font-size: 36px;
  }

  .header1.white {
    font-size: 26px;
    line-height: 26px;
  }

  .headerjumbo.white {
    font-size: 40px;
    line-height: 40px;
  }

  .hero-block.designsystem {
    padding-bottom: 60px;
  }

  .hero-block.dda {
    padding-bottom: 80px;
  }

  .hero-block.metlif {
    padding-bottom: 80px;
  }

  .section-wrapper {
    width: 90%;
  }

  .section-wrapper.grey {
    padding: 24px;
  }

  .client-name {
    margin-bottom: 0px;
  }

  .projectname {
    margin-top: 173px;
    font-size: 25px;
  }

  .grid-2 {
    -ms-grid-rows: auto;
    grid-template-rows: auto;
  }

  .agency-name {
    margin-bottom: 0px;
  }

  .aboutcontainer.dda {
    padding-right: 0px;
  }

  .hero-content-block {
    position: static;
    height: auto;
    padding-top: 140px;
    padding-bottom: 96px;
  }

  .companies {
    display: -ms-grid;
    display: grid;
    grid-auto-columns: 1fr;
    grid-column-gap: 24px;
    grid-row-gap: 24px;
    -ms-grid-columns: 1fr 1fr 1fr 1fr;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    -ms-grid-rows: auto;
    grid-template-rows: auto;
  }

  .complogo {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
  }

  .where-i-worked {
    padding: 24px 0px;
  }

  .div-block-26 {
    grid-row-gap: 21px;
  }

  .project_card {
    height: 50vh;
    padding-right: 24px;
    padding-bottom: 24px;
    padding-left: 24px;
  }

  .card_projecttitle_wrapper {
    width: 90%;
  }

  .card_projecttitle_wrapper.narrow {
    width: 100%;
  }

  .projects_grid {
    width: 90%;
  }

  .testimonials {
    height: auto;
  }

  .slider-2 {
    height: auto;
  }

  .div-block-73 {
    width: 80%;
    height: auto;
  }

  .div-block-73.narrow {
    width: 100%;
    height: auto;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-justify-content: space-around;
    -ms-flex-pack: distribute;
    justify-content: space-around;
  }

  .hoverblock.styleguide {
    height: 200px;
  }

  .hoverblock.dsm {
    height: 200px;
  }

  .column-24 {
    display: none;
  }

  .columns-6 {
    padding-top: 0px;
  }

  .tools-grid {
    -ms-grid-columns: 1fr 1fr;
    grid-template-columns: 1fr 1fr;
  }

  .icon-2 {
    color: #fff;
  }

  .icon-3 {
    display: none;
    font-size: 18px;
  }

  .icon-4 {
    display: none;
    font-size: 24px;
  }

  .stepwrapper {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
  }

  .stepimage {
    margin-right: 16px;
  }

  .stepswrapper {
    padding-right: 24px;
    padding-left: 24px;
  }

  .header-jumbo {
    font-size: 36px;
  }

  .header-jumbo.white {
    font-size: 26px;
    line-height: 26px;
  }
}

#w-node-b30aa0c3-7904-3504-7e84-fc57b2074b1b-9c4cf973 {
  -ms-grid-row: span 1;
  grid-row-start: span 1;
  -ms-grid-row-span: 1;
  grid-row-end: span 1;
  -ms-grid-column: span 1;
  grid-column-start: span 1;
  -ms-grid-column-span: 1;
  grid-column-end: span 1;
  -ms-grid-row-align: center;
  align-self: center;
  -ms-grid-column-align: center;
  justify-self: center;
}

#w-node-_81854d57-9bd1-35cc-24e8-da2ece7f0045-9c4cf973 {
  -ms-grid-row: span 1;
  grid-row-start: span 1;
  -ms-grid-row-span: 1;
  grid-row-end: span 1;
  -ms-grid-column: span 1;
  grid-column-start: span 1;
  -ms-grid-column-span: 1;
  grid-column-end: span 1;
  -ms-grid-row-align: center;
  align-self: center;
  -ms-grid-column-align: center;
  justify-self: center;
}

#w-node-_1b9bb804-9d97-7b04-9d2e-983a2dd25ce1-9c4cf973 {
  -ms-grid-row: span 1;
  grid-row-start: span 1;
  -ms-grid-row-span: 1;
  grid-row-end: span 1;
  -ms-grid-column: span 1;
  grid-column-start: span 1;
  -ms-grid-column-span: 1;
  grid-column-end: span 1;
  -ms-grid-row-align: center;
  align-self: center;
  -ms-grid-column-align: center;
  justify-self: center;
}

#w-node-_44ef5065-9a15-993f-6d34-b5a546254a7f-9c4cf973 {
  -ms-grid-row: span 1;
  grid-row-start: span 1;
  -ms-grid-row-span: 1;
  grid-row-end: span 1;
  -ms-grid-column: span 2;
  grid-column-start: span 2;
  -ms-grid-column-span: 2;
  grid-column-end: span 2;
}

#w-node-a13c20d6-2448-64d7-eccd-a9950d77ea88-9c4cf973 {
  -ms-grid-row: span 1;
  grid-row-start: span 1;
  -ms-grid-row-span: 1;
  grid-row-end: span 1;
  -ms-grid-column: span 1;
  grid-column-start: span 1;
  -ms-grid-column-span: 1;
  grid-column-end: span 1;
}

#w-node-_9450d22b-87b0-117c-4d55-da6f6d89258e-9c4cf973 {
  -ms-grid-row: span 1;
  grid-row-start: span 1;
  -ms-grid-row-span: 1;
  grid-row-end: span 1;
  -ms-grid-column: span 2;
  grid-column-start: span 2;
  -ms-grid-column-span: 2;
  grid-column-end: span 2;
}

#w-node-f61f3a91-bf76-3dd4-0cca-5561cdb88fb3-9c4cf973 {
  -ms-grid-row: span 2;
  grid-row-start: span 2;
  -ms-grid-row-span: 2;
  grid-row-end: span 2;
  -ms-grid-column: span 1;
  grid-column-start: span 1;
  -ms-grid-column-span: 1;
  grid-column-end: span 1;
}

#w-node-_190f9d2e-3ccc-9dd1-9f86-fab0eedced29-434cf976 {
  -ms-grid-row: span 1;
  grid-row-start: span 1;
  -ms-grid-row-span: 1;
  grid-row-end: span 1;
  -ms-grid-column: span 1;
  grid-column-start: span 1;
  -ms-grid-column-span: 1;
  grid-column-end: span 1;
}

#w-node-_2ed31262-665f-9068-ca54-bc91968f00ce-434cf976 {
  -ms-grid-row: span 1;
  grid-row-start: span 1;
  -ms-grid-row-span: 1;
  grid-row-end: span 1;
  -ms-grid-column: span 1;
  grid-column-start: span 1;
  -ms-grid-column-span: 1;
  grid-column-end: span 1;
}

#w-node-_190f9d2e-3ccc-9dd1-9f86-fab0eedced29-0101608b {
  -ms-grid-row: span 1;
  grid-row-start: span 1;
  -ms-grid-row-span: 1;
  grid-row-end: span 1;
  -ms-grid-column: span 1;
  grid-column-start: span 1;
  -ms-grid-column-span: 1;
  grid-column-end: span 1;
}

#w-node-_335d91c9-7a57-7a58-701f-f34967d3721c-0101608b {
  -webkit-align-self: start;
  -ms-flex-item-align: start;
  -ms-grid-row-align: start;
  align-self: start;
  -ms-grid-column-align: start;
  justify-self: start;
}

#w-node-_2ed31262-665f-9068-ca54-bc91968f00ce-0101608b {
  -ms-grid-row: span 1;
  grid-row-start: span 1;
  -ms-grid-row-span: 1;
  grid-row-end: span 1;
  -ms-grid-column: span 1;
  grid-column-start: span 1;
  -ms-grid-column-span: 1;
  grid-column-end: span 1;
}

#w-node-_190f9d2e-3ccc-9dd1-9f86-fab0eedced29-c2d76cd4 {
  -ms-grid-row: span 1;
  grid-row-start: span 1;
  -ms-grid-row-span: 1;
  grid-row-end: span 1;
  -ms-grid-column: span 1;
  grid-column-start: span 1;
  -ms-grid-column-span: 1;
  grid-column-end: span 1;
}

#w-node-_2ed31262-665f-9068-ca54-bc91968f00ce-c2d76cd4 {
  -ms-grid-row: span 1;
  grid-row-start: span 1;
  -ms-grid-row-span: 1;
  grid-row-end: span 1;
  -ms-grid-column: span 1;
  grid-column-start: span 1;
  -ms-grid-column-span: 1;
  grid-column-end: span 1;
}

@media screen and (max-width: 767px) {
  #w-node-f61f3a91-bf76-3dd4-0cca-5561cdb88fb3-9c4cf973 {
    -ms-grid-row: span 1;
    grid-row-start: span 1;
    -ms-grid-row-span: 1;
    grid-row-end: span 1;
    -ms-grid-column: span 2;
    grid-column-start: span 2;
    -ms-grid-column-span: 2;
    grid-column-end: span 2;
  }
}

@media screen and (max-width: 479px) {
  #w-node-_30277a79-10dc-a1a3-7a2f-8e422475e724-9c4cf973 {
    -ms-grid-column-align: center;
    justify-self: center;
  }

  #w-node-_44ef5065-9a15-993f-6d34-b5a546254a7f-9c4cf973 {
    -ms-grid-row: span 1;
    grid-row-start: span 1;
    -ms-grid-row-span: 1;
    grid-row-end: span 1;
    -ms-grid-column: span 2;
    grid-column-start: span 2;
    -ms-grid-column-span: 2;
    grid-column-end: span 2;
  }

  #w-node-a13c20d6-2448-64d7-eccd-a9950d77ea88-9c4cf973 {
    -ms-grid-row: span 1;
    grid-row-start: span 1;
    -ms-grid-row-span: 1;
    grid-row-end: span 1;
    -ms-grid-column: span 2;
    grid-column-start: span 2;
    -ms-grid-column-span: 2;
    grid-column-end: span 2;
  }

  #w-node-f61f3a91-bf76-3dd4-0cca-5561cdb88fb3-9c4cf973 {
    -ms-grid-row: span 1;
    grid-row-start: span 1;
    -ms-grid-row-span: 1;
    grid-row-end: span 1;
    -ms-grid-column: span 2;
    grid-column-start: span 2;
    -ms-grid-column-span: 2;
    grid-column-end: span 2;
  }
}