@charset "UTF-8";
* {
  margin: 0;
  padding: 0;
}

body {
  font-family: "Poppins", sans-serif !important;
  font-weight: 400;
  font-size: 16px !important;
  line-height: 24px;
  background-color: #ffffff;
  color: #323031;
  width: 100vw;
  overflow-x: hidden;
  min-height: 100vh;
}
@media only screen and (max-width: 767px) {
  body.no-scroll-mobile {
    overflow: hidden;
  }
}

p {
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
}
p strong {
  font-weight: 600;
}
p a {
  color: #323031;
  text-decoration: none;
}
p a:hover {
  text-decoration: underline;
}
.jumbo {
  font-weight: 600;
  font-size: 72px;
  line-height: 96px;
}
@media only screen and (max-width: 767px) {
  .jumbo {
    font-size: 40px;
    line-height: 56px;
  }
}

.h1 {
  font-weight: 600;
  font-size: 56px;
  line-height: 72px;
}

.h2 {
  font-weight: 500;
  font-size: 40px;
  line-height: 56px;
}
@media only screen and (max-width: 767px) {
  .h2 {
    font-size: 32px;
    letter-spacing: 0;
    line-height: 40px;
  }
}
.h2 .small {
  font-weight: 500;
  font-size: 24px;
  color: #323031;
  letter-spacing: 0;
  line-height: 32px;
}
@media only screen and (max-width: 767px) {
  .h2 .small {
    font-size: 20px;
    color: #26201f;
  }
}

.h3 {
  font-weight: 400;
  font-size: 24px;
  line-height: 32px;
}
@media only screen and (max-width: 767px) {
  .h3 {
    font-size: 20px;
  }
}

.h4 {
  font-weight: 600;
  font-size: 32px;
  line-height: 40px;
}

.h5 {
  font-weight: 500;
  font-size: 20px;
  line-height: 32px;
}

.menu,
a.menu {
  font-weight: 600;
  font-size: 14px;
  line-height: 24px;
  text-transform: uppercase;
  text-decoration: none;
  color: #323031;
}

.legal {
  font-weight: 400;
  font-size: 12px;
  line-height: 16px;
}
.legal a {
  text-decoration: none;
  color: #323031;
}

.cta {
  font-weight: 500;
  font-size: 20px;
  line-height: 32px;
  text-decoration: none;
  color: #323031;
}
.cta.white {
  color: #ffffff;
}
.cta.cta-arrow:after {
  content: "";
  width: 16px;
  height: 14px;
  margin-left: 3px;
  display: inline-block;
  background-image: url(../vector/arrow-orange.svg);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;
}
.cta.cta-white-arrow:after {
  content: "";
  width: 16px;
  height: 14px;
  margin-left: 3px;
  display: inline-block;
  background-image: url(../vector/arrow-white.svg);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;
}

.row {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
  flex-wrap: wrap;
  margin-left: -12px;
  margin-right: -12px;
}
.row .col {
  flex-basis: calc(50% - 24px);
  margin-left: 12px;
  margin-right: 12px;
}
@media only screen and (max-width: 767px) {
  .row .col {
    flex-basis: 100%;
  }
}

.form-field {
  margin-bottom: 32px;
}
.form-field .hide {
  display: none;
}
.form-field label {
  display: block;
}
.form-field input[type=text],
.form-field input[type=email] {
  font-family: "Poppins", sans-serif;
  outline: none;
  display: block;
  width: calc(100% - 30px);
  font-size: 16px;
  line-height: 24px;
  color: #323031;
  padding-top: 10px;
  padding-bottom: 12px;
  padding-left: 15px;
  padding-right: 15px;
  border: solid 3px #ffffff;
  background-color: #ffffff;
}
.form-field input[type=text]::-moz-placeholder, .form-field input[type=email]::-moz-placeholder {
  color: #323031;
  opacity: 1;
}
.form-field input[type=text]:-ms-input-placeholder, .form-field input[type=email]:-ms-input-placeholder {
  color: #323031;
  opacity: 1;
}
.form-field input[type=text]::placeholder,
.form-field input[type=email]::placeholder {
  color: #323031;
  opacity: 1;
}
.form-field textarea {
  font-family: "Poppins", sans-serif;
  outline: none;
  display: block;
  width: calc(100% - 30px);
  font-size: 16px;
  line-height: 24px;
  color: #323031;
  padding-top: 10px;
  padding-bottom: 12px;
  padding-left: 15px;
  padding-right: 15px;
  height: 240px;
  border: solid 3px #ffffff;
  background-color: #ffffff;
  resize: none;
  overflow: auto;
}
.form-field textarea::-moz-placeholder {
  color: #323031;
  opacity: 1;
}
.form-field textarea:-ms-input-placeholder {
  color: #323031;
  opacity: 1;
}
.form-field textarea::placeholder {
  color: #323031;
  opacity: 1;
}
.form-field input[type=submit] {
  font-family: "Poppins", sans-serif;
  outline: none;
  min-width: 137px;
  font-size: 16px;
  line-height: 24px;
  color: #ffffff;
  padding-top: 10px;
  padding-bottom: 12px;
  padding-left: 15px;
  padding-right: 15px;
  border: solid 3px #323031;
  background-color: #323031;
  cursor: pointer;
}
.form-field input[type=submit]:hover, .form-field input[type=submit]:active {
  background-color: #ff5100;
  border: solid 3px #ff5100;
}
.form-field.error input, .form-field.error textarea {
  border: solid 3px #ff5100;
}
.form-field div.error {
  display: none;
  font-weight: 600;
  color: #ff5100;
}
.form-field.error div.error {
  display: block;
}

@media only screen and (min-width: 768px) {
  .mobile-only {
    display: none;
  }
}

.inner {
  padding-left: 24px;
  padding-right: 24px;
  max-width: 1000px;
  margin-left: auto;
  margin-right: auto;
}

.logo {
  display: block;
  width: 146px;
  height: 32px;
  background-image: url(../vector/livewire-logo.svg);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;
}
@media only screen and (max-width: 767px) {
  .logo {
    width: 109.5px;
    height: 24px;
  }
}
.logo.white {
  background-image: url(../vector/livewire-logo-white.svg);
}
.logo .hide {
  display: none;
}

nav#top-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 2;
  background-color: rgba(255, 255, 255, 0.85);
  box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.5);
  transition: transform 0.5s;
}
nav#top-nav .inner {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-end;
  height: 98px;
  padding-bottom: 16px;
  transition: height 0.5s;
}
nav#top-nav .inner .reveal {
  margin-bottom: -6px;
}
nav#top-nav .inner .site-links a.menu {
  margin-left: 24px;
  border-bottom: solid transparent 4px;
}
nav#top-nav .inner .site-links a.menu.active {
  border-bottom: solid #ff5100 4px;
}
nav#top-nav.smaller .inner {
  height: 64px;
}
@media only screen and (max-width: 767px) {
  nav#top-nav .inner {
    min-height: 56px;
    height: auto;
    padding-bottom: 0;
    align-items: center;
    display: flex;
    flex-direction: column;
  }
  nav#top-nav.smaller .inner {
    height: auto;
  }
  nav#top-nav .logo {
    margin-top: 16px;
    margin-bottom: 16px;
  }
  nav#top-nav .openner,
nav#top-nav .close {
    display: block;
    width: 24px;
    height: 24px;
    background-image: url(../../src/vector/hamburger.svg);
    background-size: 24px 24px;
    background-repeat: no-repeat;
    background-position: center center;
    margin-top: 16px;
    margin-bottom: 16px;
  }
  nav#top-nav .openner .hide,
nav#top-nav .close .hide {
    display: none;
  }
  nav#top-nav .close {
    display: none;
    background-image: url(../../src/vector/close.svg);
  }
  nav#top-nav .reveal {
    overflow-y: auto;
    display: flex;
    height: 0;
    transition: height 0.5s;
    width: 100vw;
    margin-bottom: 0 !important;
    flex-direction: column;
    justify-content: space-between;
  }
  nav#top-nav .reveal .site-links {
    text-align: center;
    width: 100vw;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    flex-grow: 100;
  }
  nav#top-nav .reveal .site-links a {
    font-weight: 600;
    font-size: 24px;
    line-height: 32px;
    margin-bottom: 20px;
    margin-top: 20px;
    padding-left: 0;
    margin-left: 0 !important;
  }
  nav#top-nav .reveal .social {
    text-align: center;
    padding-bottom: 32px;
    font-size: 16px;
    line-height: 24px;
  }
  nav#top-nav .reveal .social a.linkedin,
nav#top-nav .reveal .social a.instagram {
    display: inline-block;
    width: 24px;
    height: 24px;
    background-image: url(../../src/vector/linkedin-black.svg);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
    margin-left: 8px;
    margin-right: 8px;
    margin-top: 8px;
  }
  nav#top-nav .reveal .social a.linkedin .hide,
nav#top-nav .reveal .social a.instagram .hide {
    display: none;
  }
  nav#top-nav .reveal .social a.instagram {
    background-image: url(../../src/vector/instagram-black.svg);
  }
  nav#top-nav .perm {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-end;
    width: 100%;
  }
  nav#top-nav.hide-mobile {
    transform: translate(0, -100%);
  }
  nav#top-nav.open {
    transform: translate(0, 0) !important;
    background-color: #fff;
  }
  nav#top-nav.open .inner {
    align-items: center;
  }
  nav#top-nav.open .inner .perm .close {
    display: block;
  }
  nav#top-nav.open .inner .perm .openner {
    display: none;
  }
  nav#top-nav.open .inner .reveal {
    height: calc(100vh - 56px);
  }
}

section.white,
header div.white {
  padding-top: 80px;
  padding-bottom: 80px;
}

section.grey,
section.medium-grey {
  background-color: #323031;
  color: #ffffff;
  padding-top: 24px;
  padding-bottom: 24px;
}
section.grey p,
section.medium-grey p {
  margin-bottom: 24px;
  margin-top: 24px;
}
section.grey a,
section.medium-grey a {
  color: #ffffff;
}

section.medium-grey {
  background-color: #565455;
}

.home header .orange {
  position: relative;
  min-height: 800px;
  padding-top: 98px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.home header .orange .graphic {
  z-index: -1;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  overflow: hidden;
}
.home header .orange .graphic object,
.home header .orange .graphic img {
  width: 100vw;
  height: 100%;
}
.home header .orange .graphic .only-desktop {
  display: none;
  width: 100%;
}
@media only screen and (min-width: 1024px) {
  .home header .orange .graphic .only-desktop {
    display: block;
  }
}
.home header .orange .graphic .only-tablet {
  display: none;
  width: 100%;
}
@media only screen and (max-width: 1023px) and (min-width: 768px) {
  .home header .orange .graphic .only-tablet {
    display: block;
  }
}
.home header .orange .graphic .only-mobile {
  display: none;
}
@media only screen and (max-width: 767px) {
  .home header .orange .graphic .only-mobile {
    display: block;
  }
}
@media only screen and (max-width: 767px) {
  .home header .orange {
    height: 100%;
    padding-top: 56px;
    /* min-height: 100vh; */
    min-height: -webkit-fill-available;
    box-sizing: border-box;
  }
}
.home header .orange h1.jumbo {
  color: #323031;
  padding-top: 20px;
  padding-bottom: 20px;
}
.home header .orange h1.jumbo span.white {
  color: #ffffff;
}
.home header .white {
  padding-top: 40px;
  padding-bottom: 40px;
}
.home header .white p.h2 {
  font-weight: 600;
}
@media only screen and (max-width: 767px) {
  .home header .white p.h2 {
    font-size: 24px;
    line-height: 32px;
  }
}
.home section.white {
  padding-top: 80px;
  padding-bottom: 80px;
}
.home section.white h2.h2 {
  margin-bottom: 80px;
  font-weight: 500;
}
@media only screen and (max-width: 767px) {
  .home section.white h2.h2 {
    font-size: 32px;
    line-height: 48px;
  }
}
.home section.white #crystallize {
  display: flex;
  flex-direction: column;
}
@media only screen and (min-width: 1024px) {
  .home section.white #crystallize {
    flex-direction: row;
  }
}
.home section.white #crystallize .done-it {
  font-size: 24px;
  line-height: 40px;
  font-weight: 500;
  margin-bottom: 48px;
}
@media only screen and (min-width: 1024px) {
  .home section.white #crystallize .done-it {
    flex-basis: 256px;
  }
}
.home section.white #crystallize .items > div.h4 {
  overflow: hidden;
  margin-bottom: 48px;
}
@media only screen and (max-width: 767px) {
  .home section.white #crystallize .items > div.h4 {
    font-size: 24px;
    line-height: 32px;
  }
}
.home section.white #crystallize .items > div.h4 div {
  transform: translate(0, 100%);
  transition: transform 0.5s;
}
@media only screen and (max-width: 374px) {
  .home section.white #crystallize .items > div.h4 div {
    font-size: 21px;
  }
}
.home section.white #crystallize .items > div.h4 div.delay-1 {
  transition-delay: 0.25s;
}
.home section.white #crystallize .items > div.h4 div.delay-2 {
  transition-delay: 0.5s;
}
.home section.white #crystallize .items > div.h4 div.delay-3 {
  transition-delay: 0.75s;
}
.home section.white #crystallize .items > div.h4 div.delay-4 {
  display: block;
  white-space: nowrap;
  transform: translate(0, 0);
  padding-right: 62px;
}
@media only screen and (max-width: 767px) {
  .home section.white #crystallize .items > div.h4 div.delay-4 {
    padding-right: 48px;
  }
}
.home section.white #crystallize .items > div.h4.box {
  margin-top: -10px;
  padding-top: 10px;
  transform: translate(0, 0);
  width: 62px;
  height: 62px;
  position: relative;
  transition: width 1.5s;
  transition-delay: 1s;
  max-width: 488px;
}
@media only screen and (max-width: 767px) {
  .home section.white #crystallize .items > div.h4.box {
    width: 48px;
    height: 48px;
  }
}
@media only screen and (max-width: 767px) {
  .home section.white #crystallize .items > div.h4.box {
    max-width: 343px;
  }
}
.home section.white #crystallize .items > div.h4.box:after {
  content: "";
  width: 62px;
  height: 62px;
  position: absolute;
  right: 0;
  top: 0;
  background-color: #ff5100;
}
@media only screen and (max-width: 767px) {
  .home section.white #crystallize .items > div.h4.box:after {
    width: 48px;
    height: 48px;
  }
}
.home section.white #crystallize.active .items > div.h4 div {
  transform: translate(0, 0);
}
.home section.white #crystallize.active .items > div.h4.box {
  width: 100%;
}

body.about a:hover{
  text-decoration:none;
}

body.about .site-links a:hover, body.about section.white a.cta-arrow:hover, body.about section.testimonial a:hover, body.privacy .site-links a:hover {
  color:#323031;
  
}

body.privacy .site-links a:hover {
  text-decoration:none;
  
}

body.fourohfour section.fourohfour {
  background-color: #efefef;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: calc(100vh - 292px);
  min-height: 350px;
  padding-top: 98px;
}
@media only screen and (max-width: 767px) {
  body.fourohfour section.fourohfour {
    height: calc(100vh - 274.5px);
    min-height: 350px;
    padding-top: 56px;
  }
}
body.fourohfour section.fourohfour > div {
  text-align: center;
  width: 430px;
  max-width: calc(100vw - 48px);
  padding-left: 24px;
  padding-right: 24px;
}
body.fourohfour section.fourohfour > div p.h3 {
  margin-bottom: 20px;
}
body.fourohfour section.fourohfour > div a {
  text-decoration: underline;
}

.about header .image .only-desktop,
.work header .image .only-desktop,
.perspective header .image .only-desktop,
.contact header .image .only-desktop {
  display: none;
  width: 100%;
}
@media only screen and (min-width: 1024px) {
  .about header .image .only-desktop,
.work header .image .only-desktop,
.perspective header .image .only-desktop,
.contact header .image .only-desktop {
    display: block;
  }
}
.about header .image .only-tablet,
.work header .image .only-tablet,
.perspective header .image .only-tablet,
.contact header .image .only-tablet {
  display: none;
}
@media only screen and (max-width: 1023px) and (min-width: 768px) {
  .about header .image .only-tablet,
.work header .image .only-tablet,
.perspective header .image .only-tablet,
.contact header .image .only-tablet {
    display: block;
  }
}
.about header .image .only-mobile,
.work header .image .only-mobile,
.perspective header .image .only-mobile,
.contact header .image .only-mobile {
  display: none;
}
@media only screen and (max-width: 767px) {
  .about header .image .only-mobile,
.work header .image .only-mobile,
.perspective header .image .only-mobile,
.contact header .image .only-mobile {
    display: block;
  }
}
.about section.white, .about section.grey.graphic,
.work section.white,
.work section.grey.graphic,
.perspective section.white,
.perspective section.grey.graphic,
.contact section.white,
.contact section.grey.graphic {
  padding-top: 40px;
  padding-bottom: 40px;
}
.about section.white p, .about section.grey.graphic p,
.work section.white p,
.work section.grey.graphic p,
.perspective section.white p,
.perspective section.grey.graphic p,
.contact section.white p,
.contact section.grey.graphic p {
  margin-top: 24px;
  margin-bottom: 24px;
}
.about section.white ul.orange-line, .about section.grey.graphic ul.orange-line,
.work section.white ul.orange-line,
.work section.grey.graphic ul.orange-line,
.perspective section.white ul.orange-line,
.perspective section.grey.graphic ul.orange-line,
.contact section.white ul.orange-line,
.contact section.grey.graphic ul.orange-line {
  list-style-type: none;
}
.about section.white ul.orange-line li, .about section.grey.graphic ul.orange-line li,
.work section.white ul.orange-line li,
.work section.grey.graphic ul.orange-line li,
.perspective section.white ul.orange-line li,
.perspective section.grey.graphic ul.orange-line li,
.contact section.white ul.orange-line li,
.contact section.grey.graphic ul.orange-line li {
  list-style-type: none;
  padding-left: 0;
  padding-top: 8px;
  padding-bottom: 8px;
  border-bottom: solid 1px #ff5100;
}
.about section.white .graphic-items, .about section.grey.graphic .graphic-items,
.work section.white .graphic-items,
.work section.grey.graphic .graphic-items,
.perspective section.white .graphic-items,
.perspective section.grey.graphic .graphic-items,
.contact section.white .graphic-items,
.contact section.grey.graphic .graphic-items {
  margin-top: -50px;
}
@media only screen and (max-width: 767px) {
  .about section.white .graphic-items, .about section.grey.graphic .graphic-items,
.work section.white .graphic-items,
.work section.grey.graphic .graphic-items,
.perspective section.white .graphic-items,
.perspective section.grey.graphic .graphic-items,
.contact section.white .graphic-items,
.contact section.grey.graphic .graphic-items {
    margin-top: 0;
  }
}
.about section.white .graphic-items .item, .about section.grey.graphic .graphic-items .item,
.work section.white .graphic-items .item,
.work section.grey.graphic .graphic-items .item,
.perspective section.white .graphic-items .item,
.perspective section.grey.graphic .graphic-items .item,
.contact section.white .graphic-items .item,
.contact section.grey.graphic .graphic-items .item {
  padding-top: 100px;
  padding-bottom: 10px;
  border-bottom: solid rgba(86, 84, 85, 0.3) 1px;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
}
.about section.white .graphic-items .item:last-child, .about section.grey.graphic .graphic-items .item:last-child,
.work section.white .graphic-items .item:last-child,
.work section.grey.graphic .graphic-items .item:last-child,
.perspective section.white .graphic-items .item:last-child,
.perspective section.grey.graphic .graphic-items .item:last-child,
.contact section.white .graphic-items .item:last-child,
.contact section.grey.graphic .graphic-items .item:last-child {
  border-bottom: none;
}
@media only screen and (max-width: 767px) {
  .about section.white .graphic-items .item, .about section.grey.graphic .graphic-items .item,
.work section.white .graphic-items .item,
.work section.grey.graphic .graphic-items .item,
.perspective section.white .graphic-items .item,
.perspective section.grey.graphic .graphic-items .item,
.contact section.white .graphic-items .item,
.contact section.grey.graphic .graphic-items .item {
    flex-direction: column;
    border-bottom: none;
    padding-top: 30px;
    padding-bottom: 30px;
  }
}
.about section.white .graphic-items .item .graphic, .about section.grey.graphic .graphic-items .item .graphic,
.work section.white .graphic-items .item .graphic,
.work section.grey.graphic .graphic-items .item .graphic,
.perspective section.white .graphic-items .item .graphic,
.perspective section.grey.graphic .graphic-items .item .graphic,
.contact section.white .graphic-items .item .graphic,
.contact section.grey.graphic .graphic-items .item .graphic {
  flex-basis: 150px;
  flex-grow: 0;
  flex-shrink: 0;
  margin-right: 20px;
}
@media only screen and (max-width: 767px) {
  .about section.white .graphic-items .item .graphic, .about section.grey.graphic .graphic-items .item .graphic,
.work section.white .graphic-items .item .graphic,
.work section.grey.graphic .graphic-items .item .graphic,
.perspective section.white .graphic-items .item .graphic,
.perspective section.grey.graphic .graphic-items .item .graphic,
.contact section.white .graphic-items .item .graphic,
.contact section.grey.graphic .graphic-items .item .graphic {
    max-width: 130px;
    flex-basis: auto;
  }
}
.about section.white .graphic-items .item .graphic img, .about section.grey.graphic .graphic-items .item .graphic img,
.work section.white .graphic-items .item .graphic img,
.work section.grey.graphic .graphic-items .item .graphic img,
.perspective section.white .graphic-items .item .graphic img,
.perspective section.grey.graphic .graphic-items .item .graphic img,
.contact section.white .graphic-items .item .graphic img,
.contact section.grey.graphic .graphic-items .item .graphic img {
  width: 100%;
  height: auto;
}
@media only screen and (max-width: 767px) {
  .about section.white .graphic-items .item .graphic img, .about section.grey.graphic .graphic-items .item .graphic img,
.work section.white .graphic-items .item .graphic img,
.work section.grey.graphic .graphic-items .item .graphic img,
.perspective section.white .graphic-items .item .graphic img,
.perspective section.grey.graphic .graphic-items .item .graphic img,
.contact section.white .graphic-items .item .graphic img,
.contact section.grey.graphic .graphic-items .item .graphic img {
    max-width: 130px;
    margin-bottom: 20px;
  }
}
.about section.white .graphic-items .item .copy, .about section.grey.graphic .graphic-items .item .copy,
.work section.white .graphic-items .item .copy,
.work section.grey.graphic .graphic-items .item .copy,
.perspective section.white .graphic-items .item .copy,
.perspective section.grey.graphic .graphic-items .item .copy,
.contact section.white .graphic-items .item .copy,
.contact section.grey.graphic .graphic-items .item .copy {
  flex-grow: 1;
}
.about section.white .graphic-items .item .copy p.h4, .about section.grey.graphic .graphic-items .item .copy p.h4,
.work section.white .graphic-items .item .copy p.h4,
.work section.grey.graphic .graphic-items .item .copy p.h4,
.perspective section.white .graphic-items .item .copy p.h4,
.perspective section.grey.graphic .graphic-items .item .copy p.h4,
.contact section.white .graphic-items .item .copy p.h4,
.contact section.grey.graphic .graphic-items .item .copy p.h4 {
  font-weight: 500;
  font-size: 24px;
  color: #323031;
  letter-spacing: 0;
  line-height: 32px;
  margin-top: 0;
}
@media only screen and (max-width: 767px) {
  .about section.white .graphic-items .item .copy p.h4, .about section.grey.graphic .graphic-items .item .copy p.h4,
.work section.white .graphic-items .item .copy p.h4,
.work section.grey.graphic .graphic-items .item .copy p.h4,
.perspective section.white .graphic-items .item .copy p.h4,
.perspective section.grey.graphic .graphic-items .item .copy p.h4,
.contact section.white .graphic-items .item .copy p.h4,
.contact section.grey.graphic .graphic-items .item .copy p.h4 {
    margin-bottom: 10px !important;
  }
}
.about section.white .graphic-items .item .copy ul li .title, .about section.grey.graphic .graphic-items .item .copy ul li .title,
.work section.white .graphic-items .item .copy ul li .title,
.work section.grey.graphic .graphic-items .item .copy ul li .title,
.perspective section.white .graphic-items .item .copy ul li .title,
.perspective section.grey.graphic .graphic-items .item .copy ul li .title,
.contact section.white .graphic-items .item .copy ul li .title,
.contact section.grey.graphic .graphic-items .item .copy ul li .title {
  cursor: pointer;
  position: relative;
  margin-top: 7px;
  padding-right: 40px;
}
.about section.white .graphic-items .item .copy ul li .title:after, .about section.grey.graphic .graphic-items .item .copy ul li .title:after,
.work section.white .graphic-items .item .copy ul li .title:after,
.work section.grey.graphic .graphic-items .item .copy ul li .title:after,
.perspective section.white .graphic-items .item .copy ul li .title:after,
.perspective section.grey.graphic .graphic-items .item .copy ul li .title:after,
.contact section.white .graphic-items .item .copy ul li .title:after,
.contact section.grey.graphic .graphic-items .item .copy ul li .title:after {
  content: "";
  position: absolute;
  right: 7.5px;
  top: 12px;
  width: 15.5px;
  height: 15.5px;
  transform: translate(-50%, -50%) rotate(0deg);
  background-image: url("../../src/vector/arrow_down.svg");
  background-size: contain;
  background-position: center center;
  background-repeat: no-repeat;
  transition: transform 0.5s;
}
.about section.white .graphic-items .item .copy ul li .body, .about section.grey.graphic .graphic-items .item .copy ul li .body,
.work section.white .graphic-items .item .copy ul li .body,
.work section.grey.graphic .graphic-items .item .copy ul li .body,
.perspective section.white .graphic-items .item .copy ul li .body,
.perspective section.grey.graphic .graphic-items .item .copy ul li .body,
.contact section.white .graphic-items .item .copy ul li .body,
.contact section.grey.graphic .graphic-items .item .copy ul li .body {
  max-height: 0;
  overflow: hidden;
  padding-right: 40px;
  transition: max-height 0.5s;
  margin-top: 7px;
}
.about section.white .graphic-items .item .copy ul li.active .title:after, .about section.grey.graphic .graphic-items .item .copy ul li.active .title:after,
.work section.white .graphic-items .item .copy ul li.active .title:after,
.work section.grey.graphic .graphic-items .item .copy ul li.active .title:after,
.perspective section.white .graphic-items .item .copy ul li.active .title:after,
.perspective section.grey.graphic .graphic-items .item .copy ul li.active .title:after,
.contact section.white .graphic-items .item .copy ul li.active .title:after,
.contact section.grey.graphic .graphic-items .item .copy ul li.active .title:after {
  transform: translate(-50%, -50%) rotate(180deg);
}
.about section.white .graphic-items .item .copy ul li.active .body, .about section.grey.graphic .graphic-items .item .copy ul li.active .body,
.work section.white .graphic-items .item .copy ul li.active .body,
.work section.grey.graphic .graphic-items .item .copy ul li.active .body,
.perspective section.white .graphic-items .item .copy ul li.active .body,
.perspective section.grey.graphic .graphic-items .item .copy ul li.active .body,
.contact section.white .graphic-items .item .copy ul li.active .body,
.contact section.grey.graphic .graphic-items .item .copy ul li.active .body {
  max-height: 600px;
}
.about section.white .logo-wall, .about section.grey.graphic .logo-wall,
.work section.white .logo-wall,
.work section.grey.graphic .logo-wall,
.perspective section.white .logo-wall,
.perspective section.grey.graphic .logo-wall,
.contact section.white .logo-wall,
.contact section.grey.graphic .logo-wall {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  margin-top: 20px;
  margin-bottom: 30px;
}
.about section.white .logo-wall > div, .about section.grey.graphic .logo-wall > div,
.work section.white .logo-wall > div,
.work section.grey.graphic .logo-wall > div,
.perspective section.white .logo-wall > div,
.perspective section.grey.graphic .logo-wall > div,
.contact section.white .logo-wall > div,
.contact section.grey.graphic .logo-wall > div {
  flex-grow: 100;
  margin-top: 32px;
  flex-basis: 25%;
}
.about section.white .logo-wall > div img, .about section.grey.graphic .logo-wall > div img,
.work section.white .logo-wall > div img,
.work section.grey.graphic .logo-wall > div img,
.perspective section.white .logo-wall > div img,
.perspective section.grey.graphic .logo-wall > div img,
.contact section.white .logo-wall > div img,
.contact section.grey.graphic .logo-wall > div img {
  max-width: 232px;
}
@media only screen and (max-width: 768px) {
  .about section.white .logo-wall > div, .about section.grey.graphic .logo-wall > div,
.work section.white .logo-wall > div,
.work section.grey.graphic .logo-wall > div,
.perspective section.white .logo-wall > div,
.perspective section.grey.graphic .logo-wall > div,
.contact section.white .logo-wall > div,
.contact section.grey.graphic .logo-wall > div {
    flex-basis: 50%;
  }
  .about section.white .logo-wall > div img, .about section.grey.graphic .logo-wall > div img,
.work section.white .logo-wall > div img,
.work section.grey.graphic .logo-wall > div img,
.perspective section.white .logo-wall > div img,
.perspective section.grey.graphic .logo-wall > div img,
.contact section.white .logo-wall > div img,
.contact section.grey.graphic .logo-wall > div img {
    max-width: 163px;
  }
}
.about section.white .logo-wall > div img, .about section.grey.graphic .logo-wall > div img,
.work section.white .logo-wall > div img,
.work section.grey.graphic .logo-wall > div img,
.perspective section.white .logo-wall > div img,
.perspective section.grey.graphic .logo-wall > div img,
.contact section.white .logo-wall > div img,
.contact section.grey.graphic .logo-wall > div img {
  width: 100%;
  display: block;
  margin-left: auto;
  margin-right: auto;
}
.about section.white .articles, .about section.grey.graphic .articles,
.work section.white .articles,
.work section.grey.graphic .articles,
.perspective section.white .articles,
.perspective section.grey.graphic .articles,
.contact section.white .articles,
.contact section.grey.graphic .articles {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: flex-start;
  margin-left: -12px;
  margin-right: -12px;
}
@media only screen and (min-width: 768px) {
  .about section.white .articles, .about section.grey.graphic .articles,
.work section.white .articles,
.work section.grey.graphic .articles,
.perspective section.white .articles,
.perspective section.grey.graphic .articles,
.contact section.white .articles,
.contact section.grey.graphic .articles {
    margin-left: -12px;
    margin-right: -12px;
  }
}
@media only screen and (min-width: 1050px) {
  .about section.white .articles, .about section.grey.graphic .articles,
.work section.white .articles,
.work section.grey.graphic .articles,
.perspective section.white .articles,
.perspective section.grey.graphic .articles,
.contact section.white .articles,
.contact section.grey.graphic .articles {
    margin-left: -12px;
    margin-right: -12px;
  }
}
.about section.white .articles a, .about section.grey.graphic .articles a,
.work section.white .articles a,
.work section.grey.graphic .articles a,
.perspective section.white .articles a,
.perspective section.grey.graphic .articles a,
.contact section.white .articles a,
.contact section.grey.graphic .articles a {
  display: block;
  cursor: pointer;
  margin: 12px;
  flex-basis: 100%;
  text-decoration: none;
  color: #323031;
}
@media only screen and (min-width: 768px) {
  .about section.white .articles a, .about section.grey.graphic .articles a,
.work section.white .articles a,
.work section.grey.graphic .articles a,
.perspective section.white .articles a,
.perspective section.grey.graphic .articles a,
.contact section.white .articles a,
.contact section.grey.graphic .articles a {
    flex-basis: calc(50% - 24px);
  }
}
@media only screen and (min-width: 1050px) {
  .about section.white .articles a, .about section.grey.graphic .articles a,
.work section.white .articles a,
.work section.grey.graphic .articles a,
.perspective section.white .articles a,
.perspective section.grey.graphic .articles a,
.contact section.white .articles a,
.contact section.grey.graphic .articles a {
    flex-basis: calc(33% - 24px);
  }
}
.about section.white .articles a div.imgwrapper, .about section.grey.graphic .articles a div.imgwrapper,
.work section.white .articles a div.imgwrapper,
.work section.grey.graphic .articles a div.imgwrapper,
.perspective section.white .articles a div.imgwrapper,
.perspective section.grey.graphic .articles a div.imgwrapper,
.contact section.white .articles a div.imgwrapper,
.contact section.grey.graphic .articles a div.imgwrapper {
  width: 100%;
  padding-top: 100%;
  position: relative;
}
.about section.white .articles a div.imgwrapper img, .about section.grey.graphic .articles a div.imgwrapper img,
.work section.white .articles a div.imgwrapper img,
.work section.grey.graphic .articles a div.imgwrapper img,
.perspective section.white .articles a div.imgwrapper img,
.perspective section.grey.graphic .articles a div.imgwrapper img,
.contact section.white .articles a div.imgwrapper img,
.contact section.grey.graphic .articles a div.imgwrapper img {
  display: block;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.about section.white .articles a p, .about section.grey.graphic .articles a p,
.work section.white .articles a p,
.work section.grey.graphic .articles a p,
.perspective section.white .articles a p,
.perspective section.grey.graphic .articles a p,
.contact section.white .articles a p,
.contact section.grey.graphic .articles a p {
  font-weight: 600;
}
.about section.white .articles a:hover, .about section.grey.graphic .articles a:hover,
.work section.white .articles a:hover,
.work section.grey.graphic .articles a:hover,
.perspective section.white .articles a:hover,
.perspective section.grey.graphic .articles a:hover,
.contact section.white .articles a:hover,
.contact section.grey.graphic .articles a:hover {
  text-decoration: underline;
}
.about section.white .articles a:after, .about section.grey.graphic .articles a:after,
.work section.white .articles a:after,
.work section.grey.graphic .articles a:after,
.perspective section.white .articles a:after,
.perspective section.grey.graphic .articles a:after,
.contact section.white .articles a:after,
.contact section.grey.graphic .articles a:after {
  content: "";
  display: block;
  width: 20px;
  height: 20px;
  margin-top: -15px;
  background-image: url(../../src/vector/arrow-orange.svg);
  background-size: 15.41px auto;
  background-repeat: no-repeat;
  background-position: center center;
}
.about section.grey ul.dash,
.about section.medium-grey ul.dash,
.work section.grey ul.dash,
.work section.medium-grey ul.dash,
.perspective section.grey ul.dash,
.perspective section.medium-grey ul.dash,
.contact section.grey ul.dash,
.contact section.medium-grey ul.dash {
  list-style-type: "–";
  padding-left: 12px;
  margin-top: -24px;
}
.about section.grey ul.dash li,
.about section.medium-grey ul.dash li,
.work section.grey ul.dash li,
.work section.medium-grey ul.dash li,
.perspective section.grey ul.dash li,
.perspective section.medium-grey ul.dash li,
.contact section.grey ul.dash li,
.contact section.medium-grey ul.dash li {
  padding-left: 10px;
}
.about section.grey .four-column,
.about section.medium-grey .four-column,
.work section.grey .four-column,
.work section.medium-grey .four-column,
.perspective section.grey .four-column,
.perspective section.medium-grey .four-column,
.contact section.grey .four-column,
.contact section.medium-grey .four-column {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
  flex-wrap: wrap;
  margin-left: -12.5px;
  margin-right: -12.5px;
}
@media only screen and (max-width: 767px) {
  .about section.grey .four-column,
.about section.medium-grey .four-column,
.work section.grey .four-column,
.work section.medium-grey .four-column,
.perspective section.grey .four-column,
.perspective section.medium-grey .four-column,
.contact section.grey .four-column,
.contact section.medium-grey .four-column {
    margin-left: -8px;
    margin-right: -8px;
  }
}
@media only screen and (max-width: 550px) {
  .about section.grey .four-column,
.about section.medium-grey .four-column,
.work section.grey .four-column,
.work section.medium-grey .four-column,
.perspective section.grey .four-column,
.perspective section.medium-grey .four-column,
.contact section.grey .four-column,
.contact section.medium-grey .four-column {
    margin-left: -16px;
    margin-right: -16px;
  }
}
.about section.grey .four-column .item,
.about section.medium-grey .four-column .item,
.work section.grey .four-column .item,
.work section.medium-grey .four-column .item,
.perspective section.grey .four-column .item,
.perspective section.medium-grey .four-column .item,
.contact section.grey .four-column .item,
.contact section.medium-grey .four-column .item {
  flex-basis: calc((100% - 100px) / 4);
  margin-left: 12.5px;
  margin-right: 12.5px;
}
@media only screen and (max-width: 767px) {
  .about section.grey .four-column .item,
.about section.medium-grey .four-column .item,
.work section.grey .four-column .item,
.work section.medium-grey .four-column .item,
.perspective section.grey .four-column .item,
.perspective section.medium-grey .four-column .item,
.contact section.grey .four-column .item,
.contact section.medium-grey .four-column .item {
    margin-left: 8px;
    margin-right: 8px;
    flex-basis: calc((100% - 48px) / 3);
  }
}
@media only screen and (max-width: 550px) {
  .about section.grey .four-column .item,
.about section.medium-grey .four-column .item,
.work section.grey .four-column .item,
.work section.medium-grey .four-column .item,
.perspective section.grey .four-column .item,
.perspective section.medium-grey .four-column .item,
.contact section.grey .four-column .item,
.contact section.medium-grey .four-column .item {
    flex-basis: calc((100% - 32px) / 2);
  }
}
@media only screen and (max-width: 374px) {
  .about section.grey .four-column .item,
.about section.medium-grey .four-column .item,
.work section.grey .four-column .item,
.work section.medium-grey .four-column .item,
.perspective section.grey .four-column .item,
.perspective section.medium-grey .four-column .item,
.contact section.grey .four-column .item,
.contact section.medium-grey .four-column .item {
    flex-basis: calc(100% - 16px);
  }
}
.about section.grey .four-column .item .graphic,
.about section.medium-grey .four-column .item .graphic,
.work section.grey .four-column .item .graphic,
.work section.medium-grey .four-column .item .graphic,
.perspective section.grey .four-column .item .graphic,
.perspective section.medium-grey .four-column .item .graphic,
.contact section.grey .four-column .item .graphic,
.contact section.medium-grey .four-column .item .graphic {
  background-color: rgba(86, 84, 85, 0.3);
}
.about section.grey .four-column .item .graphic img,
.about section.medium-grey .four-column .item .graphic img,
.work section.grey .four-column .item .graphic img,
.work section.medium-grey .four-column .item .graphic img,
.perspective section.grey .four-column .item .graphic img,
.perspective section.medium-grey .four-column .item .graphic img,
.contact section.grey .four-column .item .graphic img,
.contact section.medium-grey .four-column .item .graphic img {
  width: 100%;
  height: auto;
  display: block;
}
.about section.grey .four-column .item .copy,
.about section.medium-grey .four-column .item .copy,
.work section.grey .four-column .item .copy,
.work section.medium-grey .four-column .item .copy,
.perspective section.grey .four-column .item .copy,
.perspective section.medium-grey .four-column .item .copy,
.contact section.grey .four-column .item .copy,
.contact section.medium-grey .four-column .item .copy {
  padding-top: 25px;
  padding-bottom: 75px;
}
@media only screen and (max-width: 550px) {
  .about section.grey .four-column .item .copy,
.about section.medium-grey .four-column .item .copy,
.work section.grey .four-column .item .copy,
.work section.medium-grey .four-column .item .copy,
.perspective section.grey .four-column .item .copy,
.perspective section.medium-grey .four-column .item .copy,
.contact section.grey .four-column .item .copy,
.contact section.medium-grey .four-column .item .copy {
    padding-top: 12.5px;
    padding-bottom: 50px;
  }
}
.about section.medium-grey,
.work section.medium-grey,
.perspective section.medium-grey,
.contact section.medium-grey {
  background-color: #565455;
  color: #ffffff;
}
.about .light-grey,
.work .light-grey,
.perspective .light-grey,
.contact .light-grey {
  padding-top: 40px;
  padding-bottom: 40px;
  background-color: #efefef;
}
.about .light-grey p,
.work .light-grey p,
.perspective .light-grey p,
.contact .light-grey p {
  margin-top: 24px;
  margin-bottom: 24px;
}
.about .light-grey .leadership,
.work .light-grey .leadership,
.perspective .light-grey .leadership,
.contact .light-grey .leadership {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  margin-left: -24px;
  margin-right: -24px;
}
.about .light-grey .leadership .leader,
.work .light-grey .leadership .leader,
.perspective .light-grey .leadership .leader,
.contact .light-grey .leadership .leader {
  transform: scale(1);
  transition: transform 0.5s;
  margin: 8px;
  cursor: pointer;
  margin: 12px;
}
.about .light-grey .leadership .leader:hover,
.work .light-grey .leadership .leader:hover,
.perspective .light-grey .leadership .leader:hover,
.contact .light-grey .leadership .leader:hover {
  transform: scale(1.05);
}
@media only screen and (min-width: 768px) {
  .about .light-grey .leadership .leader,
.work .light-grey .leadership .leader,
.perspective .light-grey .leadership .leader,
.contact .light-grey .leadership .leader {
    margin: 8px;
  }
}
@media only screen and (min-width: 1050px) {
  .about .light-grey .leadership .leader,
.work .light-grey .leadership .leader,
.perspective .light-grey .leadership .leader,
.contact .light-grey .leadership .leader {
    margin: 12px;
  }
}
.about .light-grey .leadership .leader .photo,
.work .light-grey .leadership .leader .photo,
.perspective .light-grey .leadership .leader .photo,
.contact .light-grey .leadership .leader .photo {
  background-color: #ff5100;
}
.about .light-grey .leadership .leader .photo img,
.work .light-grey .leadership .leader .photo img,
.perspective .light-grey .leadership .leader .photo img,
.contact .light-grey .leadership .leader .photo img {
  display: block;
  width: calc(100vw - 48px);
}
@media only screen and (min-width: 768px) {
  .about .light-grey .leadership .leader .photo img,
.work .light-grey .leadership .leader .photo img,
.perspective .light-grey .leadership .leader .photo img,
.contact .light-grey .leadership .leader .photo img {
    width: calc((100vw - 80px) / 3);
  }
}
@media only screen and (min-width: 1050px) {
  .about .light-grey .leadership .leader .photo img,
.work .light-grey .leadership .leader .photo img,
.perspective .light-grey .leadership .leader .photo img,
.contact .light-grey .leadership .leader .photo img {
    width: 318px;
  }
}
.about .light-grey .leadership .leader .copy,
.work .light-grey .leadership .leader .copy,
.perspective .light-grey .leadership .leader .copy,
.contact .light-grey .leadership .leader .copy {
  display: none;
}
.about .logo-two-col,
.work .logo-two-col,
.perspective .logo-two-col,
.contact .logo-two-col {
  display: flex;
  flex-direction: row;
}
@media only screen and (max-width: 767px) {
  .about .logo-two-col,
.work .logo-two-col,
.perspective .logo-two-col,
.contact .logo-two-col {
    flex-direction: column;
  }
}
.about .logo-two-col div,
.work .logo-two-col div,
.perspective .logo-two-col div,
.contact .logo-two-col div {
  flex-basis: auto;
  flex-grow: 10;
}
.about .logo-two-col div.quote-symbol, .about .logo-two-col div.unity-logo, .about .logo-two-col div.roger-logo,
.work .logo-two-col div.quote-symbol,
.work .logo-two-col div.unity-logo,
.work .logo-two-col div.roger-logo,
.perspective .logo-two-col div.quote-symbol,
.perspective .logo-two-col div.unity-logo,
.perspective .logo-two-col div.roger-logo,
.contact .logo-two-col div.quote-symbol,
.contact .logo-two-col div.unity-logo,
.contact .logo-two-col div.roger-logo {
  flex-basis: 162px;
  flex-grow: 0;
  flex-shrink: 0;
  background-image: url(../../src/image/icon-testimonials.png);
  background-repeat: no-repeat;
  background-position: 0px 24px;
}
@media only screen and (max-width: 767px) {
  .about .logo-two-col div.quote-symbol, .about .logo-two-col div.unity-logo, .about .logo-two-col div.roger-logo,
.work .logo-two-col div.quote-symbol,
.work .logo-two-col div.unity-logo,
.work .logo-two-col div.roger-logo,
.perspective .logo-two-col div.quote-symbol,
.perspective .logo-two-col div.unity-logo,
.perspective .logo-two-col div.roger-logo,
.contact .logo-two-col div.quote-symbol,
.contact .logo-two-col div.unity-logo,
.contact .logo-two-col div.roger-logo {
    flex-basis: 88px;
    background-size: 74px 64px;
    background-position: 0px bottom;
  }
}
.about .logo-two-col div.unity-logo,
.work .logo-two-col div.unity-logo,
.perspective .logo-two-col div.unity-logo,
.contact .logo-two-col div.unity-logo {
  flex-basis: 129px;
  background-size: 163px 105px;
  background-image: url(../../src/vector/unity_logo.svg);
  background-repeat: no-repeat;
  background-position: 0px 24px;
}
@media only screen and (max-width: 1023px) and (min-width: 768px) {
  .about .logo-two-col div.unity-logo,
.work .logo-two-col div.unity-logo,
.perspective .logo-two-col div.unity-logo,
.contact .logo-two-col div.unity-logo {
    flex-basis: 184px;
    background-size: 161px 104px;
  }
}
@media only screen and (min-width: 1024px) {
  .about .logo-two-col div.unity-logo,
.work .logo-two-col div.unity-logo,
.perspective .logo-two-col div.unity-logo,
.contact .logo-two-col div.unity-logo {
    flex-basis: 258px;
    background-size: 230px 149px;
  }
}
.about .logo-two-col div.roger-logo,
.work .logo-two-col div.roger-logo,
.perspective .logo-two-col div.roger-logo,
.contact .logo-two-col div.roger-logo {
  flex-basis: 141px;
  background-size: 118px 141px;
  background-image: url(../../src/image/roger-logo-blue.jpg);
  background-repeat: no-repeat;
  background-position: 0px 0px;
}
@media only screen and (max-width: 1023px) and (min-width: 768px) {
  .about .logo-two-col div.roger-logo,
.work .logo-two-col div.roger-logo,
.perspective .logo-two-col div.roger-logo,
.contact .logo-two-col div.roger-logo {
    flex-basis: 186px;
    background-position: 0px 25px;
    background-size: 118px 141px;
  }
}
@media only screen and (min-width: 1024px) {
  .about .logo-two-col div.roger-logo,
.work .logo-two-col div.roger-logo,
.perspective .logo-two-col div.roger-logo,
.contact .logo-two-col div.roger-logo {
    flex-basis: 170px;
    background-position: 0px 25px;
    background-size: 118px 141px;
  }
}
.about .logo-two-col div hr,
.work .logo-two-col div hr,
.perspective .logo-two-col div hr,
.contact .logo-two-col div hr {
  border: none;
  max-width: 40px;
  height: 1px;
  background-color: #ff5100;
}
.about .contact-columns,
.work .contact-columns,
.perspective .contact-columns,
.contact .contact-columns {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
}
@media only screen and (min-width: 768px) {
  .about .contact-columns,
.work .contact-columns,
.perspective .contact-columns,
.contact .contact-columns {
    flex-direction: row;
  }
}
@media only screen and (min-width: 768px) {
  .about .contact-columns > div,
.work .contact-columns > div,
.perspective .contact-columns > div,
.contact .contact-columns > div {
    flex-basis: 348px;
  }
}
@media only screen and (min-width: 1024px) {
  .about .contact-columns > div,
.work .contact-columns > div,
.perspective .contact-columns > div,
.contact .contact-columns > div {
    flex-basis: 427px;
  }
}
.about .contact-columns.us-first,
.work .contact-columns.us-first,
.perspective .contact-columns.us-first,
.contact .contact-columns.us-first {
  flex-direction: column-reverse;
  justify-content: flex-end;
}
@media only screen and (min-width: 768px) {
  .about .contact-columns.us-first,
.work .contact-columns.us-first,
.perspective .contact-columns.us-first,
.contact .contact-columns.us-first {
    flex-direction: row-reverse;
  }
}
.about .full img,
.work .full img,
.perspective .full img,
.contact .full img {
  display: block;
}

.about header div.white .h2,
.about section.white .h2 {
  margin-bottom: 20px;
  font-weight: 600;
}
@media only screen and (max-width: 767px) {
  .about header div.white .h2,
.about section.white .h2 {
    font-size: 24px;
    line-height: 32px;
  }
}
.about header div.white .h3,
.about section.white .h3 {
  margin-bottom: 20px;
}
@media only screen and (max-width: 767px) {
  .about header div.white .h3,
.about section.white .h3 {
    font-size: 24px;
    line-height: 32px;
  }
}
.about section.grey .h2 {
  margin-bottom: 20px;
  font-weight: 600;
}
@media only screen and (max-width: 767px) {
  .about section.grey .h2 {
    font-size: 24px;
    line-height: 32px;
  }
}
.about section.grey .h3 {
  margin-bottom: 20px;
}
@media only screen and (max-width: 767px) {
  .about section.grey .h3 {
    font-size: 24px;
    line-height: 32px;
  }
}
.about section.light-grey .h2 {
  margin-bottom: 20px;
  font-weight: 600;
}
@media only screen and (max-width: 767px) {
  .about section.light-grey .h2 {
    font-size: 24px;
    line-height: 32px;
  }
}
.about section.light-grey.testimonial .h3 {
  font-weight: 500;
}
.about section.social {
  background-color: #323031;
  color: #ffffff;
  padding-top: 40px;
  padding-bottom: 60px;
  background-image: url(../../src/vector/pattern-d.svg);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
}
@media only screen and (max-width: 767px) {
  .about section.social {
    background-image: url(../../src/vector/pattern-m.svg);
  }
}
.about section.social p {
  margin-top: 16px;
  margin-bottom: 16px;
}
@media only screen and (max-width: 767px) {
  .about section.social p.h2 {
    font-size: 24px;
    line-height: 32px;
  }
}
.about section.social p a.linkedin,
.about section.social p a.instagram {
  display: inline-block;
  width: 65px;
  height: 65px;
  background-image: url(../vector/linkedin-white.svg);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;
  margin-right: 24px;
}
@media only screen and (max-width: 767px) {
  .about section.social p a.linkedin,
.about section.social p a.instagram {
    width: 44px;
    height: 44px;
  }
}
.about section.social p a.linkedin .hide,
.about section.social p a.instagram .hide {
  display: none;
}
.about section.social p a.instagram {
  background-image: url(../vector/instagram-white.svg);
}
.about section.social p.links {
  margin-top: 30px;
}

body.privacy header .orange {
  position: relative;
  background-color: #ff5100;
  min-height: 560px;
  padding-top: 98px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
@media only screen and (max-width: 767px) {
  body.privacy header .orange {
    min-height: 400px;
    padding-top: 56px;
  }
}
body.privacy header .orange h1.jumbo {
  color: #ffffff;
  font-size: 40px;
  line-height: 56px;
  text-align: center;
}
@media only screen and (max-width: 767px) {
  body.privacy header .orange h1.jumbo {
    font-size: 24px;
    line-height: 32px;
  }
}
body.privacy header .light-grey {
  background-color: #efefef;
  padding-top: 40px;
  padding-bottom: 40px;
}

footer .ttu {
  background-color: #565455;
  color: #ffffff;
  padding-top: 25px;
  padding-bottom: 25px;
}
footer nav {
  background-color: #323031;
  color: #ffffff;
  padding-top: 28px;
  padding-bottom: 28px;
}
footer nav .inner {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}
footer nav .inner a.linkedin,
footer nav .inner a.instagram {
  display: inline-block;
  width: 24px;
  height: 24px;
  background-image: url(../vector/linkedin-white.svg);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;
  margin-left: 11px;
}
footer nav .inner a.linkedin .hide,
footer nav .inner a.instagram .hide {
  display: none;
}
footer nav .inner a.instagram {
  background-image: url(../vector/instagram-white.svg);
}
footer .legal {
  background-color: #ff5100;
  line-height: 24px;
}
footer .legal .inner {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  color: #323031;
}
footer .legal .inner a {
  color: #323031;
}
@media only screen and (max-width: 767px) {
  footer .legal .inner {
    flex-direction: column-reverse;
    line-height: 20px;
    padding-top: 5px;
    padding-bottom: 5px;
  }
}

.content-wrapper {
  filter: blur(0px);
  transition: filter 0.5s;
}

div.page-overlay {
  display: none;
  opacity: 0;
  transition: opacity 0.5s;
}

body.blurring div.page-overlay {
  display: block;
}

body.blur .content-wrapper {
  filter: blur(10px);
}
body.blur div.page-overlay {
  display: block;
  opacity: 1;
  position: fixed;
  z-index: 50;
  left: 0;
  top: 0;
  right: 0;
  min-height: 150vh;
  background-color: rgba(50, 48, 49, 0.75);
}

div.modal {
  display: none;
  position: fixed;
  z-index: 100;
  top: 50%;
  left: 50%;
  transition: transform 0.5s linear, opacity 0.2s linear;
  background-color: #ff5100;
}
div.modal .holder {
  position: relative;
  max-width: calc(100vw - 48px);
  width: 360px;
  min-height: 360px;
  transition: width 0.5s linear, height 0.5s linear;
}
@media only screen and (max-width: 767px) {
  div.modal .holder {
    max-width: calc(100vw - 32px);
  }
}
@media only screen and (max-width: 767px) {
  div.modal .holder {
    width: calc(100vw - 36px);
    min-height: calc(100vw - 36px);
  }
}
@media only screen and (min-width: 1050px) {
  div.modal .holder {
    width: 402px;
    min-height: 402px;
  }
}
div.modal .holder .close {
  position: absolute;
  z-index: 5;
  background-image: url(../vector/close-white.svg);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  width: 18px;
  height: 18px;
  top: 27px;
  right: 27px;
  cursor: pointer;
  opacity: 0;
  transition-delay: 0.5s;
  transition: opacity 0.5s;
}
div.modal .holder div.leader {
  width: 100%;
  max-width: 1000px;
  display: flex;
  display: block;
  align-items: center;
  flex-direction: row;
  overflow: hidden;
  min-height: 360px;
}
@media only screen and (max-width: 767px) {
  div.modal .holder div.leader {
    min-height: calc(100vw - 36px);
    max-height: calc(100vh - 36px);
  }
}
@media only screen and (min-width: 1050px) {
  div.modal .holder div.leader {
    min-height: 402px;
  }
}
@media only screen and (max-width: 767px) {
  div.modal .holder div.leader {
    flex-direction: column;
  }
}
div.modal .holder div.leader .photo {
  flex-basis: 100%;
  flex-grow: 1;
  width: 100%;
}
@media only screen and (min-width: 768px) {
  div.modal .holder div.leader .photo {
    flex-shrink: 0;
    flex-grow: 0;
    flex-basis: auto;
  }
}
div.modal .holder div.leader .photo img {
  width: 100%;
  height: auto;
  display: block;
  transition: width 0.5s linear, max-width 0.5s linear;
}
@media only screen and (max-width: 767px) {
  div.modal .holder div.leader .photo img {
    margin-left: auto;
    margin-right: auto;
  }
}
div.modal .holder div.leader .copy {
  color: #ffffff;
  height: 0;
  display: none;
  opacity: 0;
  padding: 0;
  transition: opacity 0.5s linear;
  flex-basis: 0%;
  flex-shrink: 1;
}
@media only screen and (min-width: 768px) {
  div.modal .holder div.leader .copy {
    flex-basis: auto;
    flex-shrink: 0;
  }
}
div.modal .holder div.leader .copy p {
  margin-top: 20px;
  margin-bottom: 20px;
}
div.modal .holder div.leader .copy p a {
  font-weight: 500;
  color: #ffffff;
}
div.modal.show {
  display: block;
  opacity: 0;
}
div.modal.show2 {
  opacity: 1;
  transform: translate(-50%, -50%) !important;
}
div.modal.active .holder {
  width: 1000px;
  height: auto;
}
div.modal.active .holder .close {
  opacity: 1;
}
div.modal.active .holder .leader {
  height: auto;
  display: flex;
  overflow-y: auto;
}
@media only screen and (min-width: 768px) {
  div.modal.active .holder .leader {
    min-height: 402px;
  }
}
div.modal.active .holder .leader .photo {
  flex-basis: 402px;
}
@media only screen and (max-width: 767px) {
  div.modal.active .holder .leader .photo {
    flex-basis: 50%;
  }
}
div.modal.active .holder .leader .photo img {
  width: 360px;
  display: block;
}
@media only screen and (max-width: 767px) {
  div.modal.active .holder .leader .photo img {
    max-width: calc(100vw - 36px);
  }
}
@media only screen and (min-width: 1050px) {
  div.modal.active .holder .leader .photo img {
    width: 402px;
    height: 402px;
  }
}
div.modal.active .holder .leader .copy {
  display: none;
}
div.modal.active2 .holder .leader .copy {
  display: block;
  height: auto;
  padding: 16px;
  flex-basis: calc(100% - 402px - 110px);
  opacity: 0;
}
@media only screen and (max-width: 767px) {
  div.modal.active2 .holder .leader .copy {
    flex-basis: 50%;
    display: block;
  }
}
@media only screen and (min-width: 768px) {
  div.modal.active2 .holder .leader .copy {
    padding-left: 12px;
    padding-right: 24px;
  }
}
@media only screen and (min-width: 1050px) {
  div.modal.active2 .holder .leader .copy {
    padding: 25px;
    padding-right: 85px;
  }
}
div.modal.active3 .holder .leader .copy {
  opacity: 1;
}

.home .logo-two-col {
  display: flex;
  flex-direction: row;
}

.home .logo-two-col div.upArrow-symbol {
  flex-basis: 205px;
}

.home .logo-two-col div {
  flex-basis: auto;
  flex-grow: 10;
}

.home .upArrow-symbol {
  flex-basis: 246px;
  flex-grow: 0;
  flex-shrink: 0;
  background-size: 197px;
  background-image: url(../img/upArrow.png);
  background-repeat: no-repeat;
  background-position: 0px 13px;
}
@media only screen and (max-width: 767px) {
  .home .upArrow-symbol {
    flex-basis: 130px;
    background-size: contain;
    background-position: 0px bottom;
  }
}

@media only screen and (max-width: 767px) {
  .home .logo-two-col {
    flex-direction: column;
  }

  .home .logo-two-col div.upArrow-symbol {
    flex-basis: 130px;
    margin-bottom: 20px;
  }

  .about section.team .h2 {
    font-size: 24px;
    line-height: 32px;
  }
}
section.grey.graphic p.h3 {
  margin-top: 0px;
}

.about section.grey.graphic .graphic-items {
  margin-top: 0px !important;
}

.about section.grey.graphic .graphic-items .item {
  padding-top: 24px !important;
}

.h2 {
  font-weight: 600;
}