/* Accessibility text */
.ah {
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  width: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
}

body {
  font-family: "Open Sans", sans-serif;
  color: #424752;
}

h1, h2, h3, h4 {
  font-family: "Poppins", sans-serif;
  font-weight: 800;
}

section img {
  max-width: 100%;
}

h1 {
  font-size: 3.75rem;
  font-weight: 700;
  line-height: 145%;
}

h2 {
  font-size: 2.5rem;
  font-weight: 700;
  line-height: 145%;
  color: #152C52;
}

h3 {
  font-size: 1.875rem;
  font-weight: 700;
  line-height: 145%;
  color: #152C52;
}

header {
  background: #fff;
  color: #000;
  display: flex;
  justify-content: space-between;
  padding: 20px 15px;
  position: fixed;
  width: 100%;
  z-index: 2;
}
header ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  align-content: center;
}
header ul li {
  list-style: none;
  margin: 0;
  padding: 10px;
  display: block;
}
header ul li a {
  text-decoration: none;
  text-transform: uppercase;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  color: #152C52;
  font-size: 0.93rem;
  font-weight: 600;
}
header ul li a:hover {
  color: #152C52;
  border-bottom-color: #EDAF1C;
}
header ul li.active a {
  border-bottom-color: #EDAF1C;
}

.ylw {
  color: #ECB035;
}

.btn-light {
  border: 2px solid #f8f9fa;
  transition: 0.25s background-color, 0.25s color;
}

.btn:hover {
  background: transparent;
  color: #fff;
}

/* Intro */
#intro {
  background: url(../images/bg-intro.jpg) no-repeat center bottom #152C52;
  background-size: cover;
  color: #fff;
}
#intro h1 {
  line-height: 120%;
  margin-bottom: 2.5rem;
}
#intro p {
  font-size: 1.1rem;
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  margin: 0.5rem 0;
}
#intro .row {
  height: 100vh;
}
#intro #scroll-more {
  display: inline-block;
  padding: 10px 10px 20px 10px;
  transition: 0.25s padding;
}
#intro #scroll-more:hover {
  padding: 20px 10px 10px 10px;
}

/* legacy */
#legacy {
  background: url("../images/bg-lines-03.png") center center no-repeat;
  background-attachment: fixed;
  background-size: cover;
  overflow: hidden;
}
#legacy .container {
  background: #fff;
}
#legacy #bio p {
  font-size: 0.75rem;
  font-weight: 400;
}

.btn {
  text-transform: uppercase;
  font-weight: 600;
  font-family: "Poppins", sans-serif;
}

/* Process */
@keyframes popIn {
  from {
    transform: translateY(20px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}
#case-studies,
#who-we-are,
#process {
  margin-top: -75px;
  padding-top: 75px;
}

.jsload .popIn {
  opacity: 0;
  transform: translateY(20px);
  animation-name: popIn;
  animation-duration: 0.5s;
  animation-direction: normal;
  animation-fill-mode: forwards;
  animation-play-state: paused;
}
.jsload .popIn[data-pop="1"] {
  animation-delay: 0.125s;
}
.jsload .popIn[data-pop="2"] {
  animation-delay: 0.25s;
}
.jsload .popIn[data-pop="3"] {
  animation-delay: 0.375s;
}
.jsload .popIn[data-pop="4"] {
  animation-delay: 0.5s;
}
.jsload .popIn[data-pop="5"] {
  animation-delay: 0.625s;
}
.jsload .popIn[data-pop="6"] {
  animation-delay: 0.75s;
}
.jsload .popIn[data-pop="7"] {
  animation-delay: 0.875s;
}
.jsload .popIn[data-pop="8"] {
  animation-delay: 1s;
}
.jsload .popIn[data-pop="9"] {
  animation-delay: 1.125s;
}
.jsload .popIn[data-pop="10"] {
  animation-delay: 1.25s;
}
.jsload .popIn[data-pop="11"] {
  animation-delay: 1.375s;
}
.jsload .popIn[data-pop="12"] {
  animation-delay: 1.5s;
}
.jsload .active .popIn {
  animation-play-state: running;
}

/* Case Studies */
#case-menu-wrap {
  display: none;
}
@media (min-width: 768px) {
  #case-menu-wrap {
    display: flex;
  }
}

#case-menu {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: space-between;
  align-content: center;
  align-items: center;
}
#case-menu li {
  flex-basis: 30%;
  list-style: none;
  margin: 0;
  padding: 0;
}
#case-menu li a {
  display: flex;
  justify-content: center;
  align-items: center;
  align-content: center;
  height: 200px;
  text-decoration: none;
  color: #fff;
  text-transform: uppercase;
  font-family: "Poppins", sans-serif;
  font-weight: 700;
  padding: 20px;
  font-size: 1.25rem;
  transition: 0.25s transform;
  transform: scale(0.8);
}
#case-menu li a span {
  display: block;
  border-bottom: 6px solid transparent;
}
#case-menu li a:hover span {
  border-color: #fff;
}
#case-menu li a img {
  display: block;
}
#case-menu li.active a {
  transform: scale(1);
}
#case-menu li.active a span {
  border-bottom-color: #fff;
}
#case-menu li#cs-01 a {
  background: url(../images/cs-01.jpg) center center no-repeat;
  background-size: cover;
}
#case-menu li#cs-02 a {
  background: url(../images/cs-02.jpg) center center no-repeat;
  background-size: cover;
}
#case-menu li#cs-03 a {
  background: url(../images/cs-03.jpg) center center no-repeat;
  background-size: cover;
}
#case-menu li#cs-04 a {
  background: url(../images/cs-04.jpg) center center no-repeat;
  background-size: cover;
}

@media (min-width: 768px) {
  .jsload .cs_info {
    display: none;
  }
  .jsload .cs_info.active {
    display: block;
  }
}

#case-study-wrap {
  background: url(../images/bg-lines-02.png) center center no-repeat;
  background-attachment: fixed;
  background-size: cover;
}
#case-study-wrap[data-col="1"] {
  background: url(../images/bg-lines-00.png) center center no-repeat;
  background-attachment: fixed;
  background-size: cover;
}
#case-study-wrap[data-col="2"] {
  background: url(../images/bg-lines-02.png) center center no-repeat;
  background-attachment: fixed;
  background-size: cover;
}
#case-study-wrap[data-col="3"] {
  background: url(../images/bg-lines-01.png) center center no-repeat;
  background-attachment: fixed;
  background-size: cover;
}
#case-study-wrap .col {
  background: #fff;
}
@media (min-width: 768px) {
  #case-study-wrap .col {
    padding: 3rem 6rem !important;
  }
}
#case-study-wrap .cs_info {
  padding: 2rem;
  border-top: 1px solid #ccc;
}
@media (min-width: 768px) {
  #case-study-wrap .cs_info {
    padding: 0;
    border-top: 0;
  }
}
#case-study-wrap .cs_info.color-1 strong,
#case-study-wrap .cs_info.color-1 h3 {
  color: #FE6043;
}
#case-study-wrap .cs_info.color-2 strong,
#case-study-wrap .cs_info.color-2 h3 {
  color: #43B5A5;
}
#case-study-wrap .cs_info.color-3 strong,
#case-study-wrap .cs_info.color-3 h3 {
  color: #ECB035;
}

/* Teal contact */
#contact_cta {
  background: #43B5A5;
  color: #fff;
}
#contact_cta h2, #contact_cta h3 {
  color: #fff;
}

/* Mapping the opportunities... */
#opportunities {
  background: #FE6043;
  color: #fff;
}
#opportunities h2, #opportunities h3 {
  color: #fff;
}

/* Brands */
.brands {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
}
.brands li {
  flex-basis: 25%;
  padding: 15px;
  list-style: none;
  margin: 0;
}

.brand-card {
  display: flex;
  justify-content: space-between;
  align-content: center;
  align-items: center;
  padding: 50px;
}
.brand-card img {
  max-width: 100%;
}
.brand-card h4 {
  color: #152C52;
}

/* Blue contact */
#contact {
  background: #152C52;
  color: #fff;
}
#contact h2, #contact h3 {
  color: #fff;
}

/* Footer */
footer a {
  color: #152C52;
}
footer a:hover {
  text-decoration: none;
  color: #FE6043;
}

.foot-nav {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  justify-content: space-between;
}
.foot-nav li {
  list-style: none;
  margin: 0;
  padding: 0;
}
.foot-nav li a {
  font-family: "Poppins", sans-serif;
  text-decoration: none;
  color: #152C52;
  text-transform: uppercase;
  font-weight: 600;
}
.foot-nav li a:hover {
  text-decoration: underline;
  color: #FE6043;
}