@font-face {
  font-family: "Univers LT Std";
  src: url("../fonts/UniversLTStd.woff2") format("woff2"), url("../fonts/UniversLTStd.woff") format("woff"), url("../fonts/UniversLTStd.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Univers LT Std";
  src: url("../fonts/UniversLTStd-Bold.woff2") format("woff2"), url("../fonts/UniversLTStd-Bold.woff") format("woff"), url("../fonts/UniversLTStd-Bold.ttf") format("truetype");
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Univers LT Std";
  src: url("../fonts/UniversLTStd-Obl.woff2") format("woff2"), url("../fonts/UniversLTStd-Obl.woff") format("woff"), url("../fonts/UniversLTStd-Obl.ttf") format("truetype");
  font-weight: normal;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Effra";
  src: url("../fonts/Effra-Regular.woff2") format("woff2"), url("../fonts/Effra-Regular.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "Effra";
  src: url("../fonts/Effra-Bold.woff2") format("woff2"), url("../fonts/Effra-Bold.woff") format("woff");
  font-weight: bold;
  font-style: normal;
}
@font-face {
  font-family: "Effra";
  src: url("../fonts/Effra-Light.woff2") format("woff2"), url("../fonts/Effra-Light.woff") format("woff");
  font-weight: 300;
  font-style: normal;
}
html {
  height: 100%;
  /* overflow: hidden; */
  -ms-scroll-chaining: none;
      overscroll-behavior: none;
}

body {
  background-color: #fff;
  margin: 0;
  font-family: "Univers LT Std", "Helvetica", "Arial", sans-serif;
  font-size: 13px;
  font-weight: normal;
  color: #000;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a {
  color: #000;
  transition: color 0.2s ease-in-out;
  text-decoration: none;
}
a:hover {
  color: #000;
  text-decoration: none;
}
a:focus, a:visited {
  color: #000;
}

p {
  line-height: 130%;
}

h1 {
  font-size: 40px;
}

h2 {
  font-size: 30px;
}

h3 {
  font-size: 20px;
}

h4 {
  font-size: 14px;
}

h1, h2, h3, h4 {
  margin: 0.5em 0;
  line-height: 110%;
  text-transform: uppercase;
}

h4 {
  text-transform: none;
}

@media only screen and (max-width: 1024px) {
  h1 {
    font-size: 30px;
  }

  h2 {
    font-size: 22px;
  }

  h3 {
    font-size: 18px;
  }

  h4 {
    font-size: 14px;
  }
}
@media only screen and (max-width: 600px) {
  h1 {
    font-size: 17px;
  }

  h2 {
    font-size: 15px;
  }

  h3 {
    font-size: 14px;
  }

  h4, p {
    font-size: 12px;
    font-weight: normal;
  }

  h1, h2, h3 {
    line-height: 100%;
  }

  p {
    line-height: 110%;
  }
}
input, textarea, select {
  font-family: "Univers LT Std", "Helvetica", "Arial", sans-serif;
  font-size: 13px;
  font-weight: normal;
  color: #000;
}

.highlight {
  background-color: #03FF00;
}

.action-button {
  display: inline-block;
  padding: 0.9em 1em 0.7em 1em;
  text-transform: uppercase;
  border: 1px solid #000;
  color: #000;
  line-height: 100%;
  font-size: 20px;
  background-color: white;
}
.action-button:hover {
  color: white;
  background-color: black;
}
.action-button.reverse {
  color: white;
  background-color: transparent;
  border-color: white;
}
.action-button.reverse:hover {
  color: black;
  background-color: white;
}
@media only screen and (max-width: 1024px) {
  .action-button {
    font-size: 14px;
  }
}

header {
  position: relative;
  margin-top: -90px;
}
@media only screen and (max-width: 1024px) {
  header {
    margin-top: 0;
  }
}
header video {
  /* override other styles to make responsive */
  width: 100%;
  height: auto;
}
@media only screen and (max-width: 1024px) {
  header video {
    -o-object-fit: cover;
       object-fit: cover;
    max-height: 500px;
  }
}
@media only screen and (max-width: 600px) {
  header video {
    max-height: none;
  }
}
header nav {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}
header .message {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  text-align: center;
}
@media only screen and (max-width: 1024px) {
  header .message {
    bottom: 70px;
  }
}
@media only screen and (max-width: 600px) {
  header .message {
    bottom: 100px;
  }
}
header .message .inner {
  max-width: 800px;
  margin: 0 auto;
}
header .message .inner h1 {
  width: 90%;
  margin: 0 auto 1em auto;
  text-align: center;
}
header .message .down-arrow {
  font-size: 30px;
  margin-top: 20px;
}

.panel {
  background-color: white;
  text-align: center;
}
.panel .inner {
  max-width: 800px;
  margin: 100px auto;
}
@media only screen and (max-width: 1024px) {
  .panel .inner {
    padding: 20px;
    width: auto;
  }
}
.panel .inner .action-button {
  margin-top: 1em;
}
.panel.tight .inner {
  margin: 20px auto;
}

.what-we-do {
  background-color: #E5E5E5;
}
@media only screen and (max-width: 1024px) {
  .what-we-do.panel {
    padding: 0;
  }
}
.what-we-do .inner {
  padding: 100px;
  margin: 0 auto;
}
.what-we-do .inner h4 {
  text-transform: none;
}
@media only screen and (max-width: 1024px) {
  .what-we-do .inner {
    padding: 25px;
    width: auto;
  }
}
.what-we-do .columns {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  max-width: 800px;
  margin: 0 auto;
}
@media only screen and (max-width: 1024px) {
  .what-we-do .columns {
    display: block;
  }
}
.what-we-do .columns .column {
  flex: 1;
  margin: 20px;
}
.what-we-do .columns .column .block h3 {
  background-color: #03FF00;
  display: inline-block;
}
@media only screen and (max-width: 1024px) {
  .what-we-do .columns .column .block {
    border-top: 1px solid #000;
    margin-bottom: 20px;
    padding-top: 20px;
  }
  .what-we-do .columns .column .block p {
    font-size: 12px;
  }
}
@media only screen and (max-width: 1024px) {
  .what-we-do {
    padding: 50px;
  }
  .what-we-do .columns .column {
    margin: 20px 0;
  }
}
.what-we-do .action-button {
  background-color: transparent;
}
.what-we-do .action-button:hover {
  background-color: black;
}

.wide-image img {
  width: 100%;
  height: auto;
}

.diagnosis {
  margin-top: 50px;
  background-color: black;
  color: white;
  text-align: center;
  position: relative;
}
@media only screen and (max-width: 600px) {
  .diagnosis {
    margin-top: 0;
  }
}
.diagnosis video {
  /* override other styles to make responsive */
  width: 100% !important;
  height: auto !important;
}
@media only screen and (max-width: 1024px) {
  .diagnosis video {
    -o-object-fit: cover;
       object-fit: cover;
    max-height: 400px;
  }
}
.diagnosis .message {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  /*
  @media only screen and (max-width : $medium-screen-width) {
  	display: block;
  	.inner {
  		width: 70%;
  		height: 100%;
  		margin: 0 auto;
  		display: flex;
  		flex-direction: column;
  		justify-content: space-between;
  		align-items: center;
  		& > div {
  			padding: 50px 0;
  		}
  	}
  }
  */
}
.diagnosis .message .inner {
  max-width: 800px;
  margin: 0 auto;
}
.diagnosis .message .inner .action-button {
  margin-top: 1em;
}
@media only screen and (max-width: 1024px) {
  .diagnosis .message .inner {
    width: auto;
    padding: 25px;
  }
}
.diagnosis .down-arrow {
  font-size: 30px;
  margin-top: 20px;
}

@media only screen and (max-width: 1024px) {
  .five-step .inner {
    width: auto;
    padding: 25px;
    margin: 0 auto;
  }
}
.five-step img {
  max-width: 800px;
  height: auto;
  margin: 1em auto;
}
@media only screen and (max-width: 800px) {
  .five-step img {
    width: 100%;
  }
}
.five-step .down-arrow {
  font-size: 30px;
  margin-top: 20px;
}

.creative-landscape .inner {
  max-width: 800px;
  margin: 0 auto;
  padding: 50px;
}
.creative-landscape .inner h4 {
  text-transform: none;
  font-weight: bold;
  margin: 1em 0;
}
.creative-landscape .inner .action-button {
  margin-top: 1em;
}
.creative-landscape .inner p {
  font-size: 12px;
}
.creative-landscape .down-arrow {
  font-size: 30px;
  margin-top: 20px;
}

#nav_wrapper {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 200;
}

#mobile_nav_wrapper {
  z-index: 0;
  position: relative;
}

nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: white;
}
nav .logo {
  width: 100px;
}
nav .logo img {
  width: 100%;
  height: auto;
}
@media only screen and (max-width: 600px) {
  nav .logo {
    padding-left: 10px;
  }
  nav .logo img {
    width: 75%;
  }
}
nav ul {
  display: flex;
  justify-content: center;
}
nav ul li {
  text-transform: uppercase;
  list-style: none;
  font-size: 11px;
}
nav ul li a {
  display: block;
  padding: 5px 20px;
}
nav ul li a.selected {
  background-color: #03FF00;
  font-weight: bold;
}
nav ul li a:hover {
  background-color: #03FF00;
}
nav .times {
  display: flex;
}
nav .times div {
  padding: 5px 20px;
  font-size: 11px;
}
nav .toggle-menu-wrap {
  display: none;
}
nav .toggle-menu-wrap a {
  color: #03FF00;
  font-size: 25px;
  display: block;
  padding-right: 10px;
}
@media only screen and (max-width: 1024px) {
  nav .times {
    display: none;
  }
}
@media only screen and (max-width: 1024px) {
  nav {
    background-color: black;
    padding: 5px;
  }
  nav ul {
    display: none;
  }
  nav .times {
    display: flex;
    color: white;
  }
  nav .times div {
    font-size: 9px;
  }
  nav .toggle-menu-wrap {
    display: block;
  }
}

/*
body.mobile-menu-open {
	#nav_wrapper nav {
		background-color: #999;
	}
}
*/
footer {
  background-color: black;
  color: white;
}
footer a {
  color: white;
}
footer a:hover {
  color: #03FF00;
}
footer .details {
  padding: 50px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}
footer .details div {
  width: 300px;
}
@media only screen and (max-width: 1024px) {
  footer .details {
    display: block;
    text-align: center;
  }
  footer .details div {
    width: auto;
    margin-bottom: 2em;
  }
  footer .details .address p {
    margin-top: 0;
  }
}
footer .details .logo {
  width: 150px;
}
@media only screen and (max-width: 1024px) {
  footer .details .logo {
    margin: 0 auto 20px auto;
  }
}
footer .details .logo img {
  width: 100%;
  height: auto;
}
footer .details .bbn_logo {
  width: 100px;
}
@media only screen and (max-width: 1024px) {
  footer .details .bbn_logo {
    margin: 0 auto 20px auto;
  }
}
footer .details .bbn_logo img {
  width: 50%;
  height: auto;
}
footer .social {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
}
@media only screen and (max-width: 1024px) {
  footer .social {
    justify-content: center;
    align-items: center;
    margin-top: 50px;
  }
}
footer .social a {
  color: #03FF00;
  font-size: 20px;
  display: block;
  margin-right: 10px;
}
footer .social a:hover {
  color: white;
}
footer .copyright {
  text-align: center;
  padding: 0 0 50px 0;
}
footer .copyright p {
  margin: 1em;
}

.slideout-menu {
  position: fixed;
  top: 0;
  bottom: 0;
  width: 256px;
  min-height: 100vh;
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
  z-index: 0;
  display: none;
  background-color: black;
  color: white;
}
.slideout-menu .inner {
  padding: 15px;
  position: relative;
}
.slideout-menu .inner .close {
  color: #03FF00;
  font-size: 25px;
  display: block;
  position: absolute;
  top: 15px;
  right: 15px;
}
.slideout-menu ul {
  margin: 50px 0 30px 0;
  padding: 0;
  text-align: right;
  display: block;
}
.slideout-menu ul li {
  list-style: none;
  display: block;
  margin: 0;
  padding: 0.1em 0;
  font-size: 1.3em;
  font-family: "Sharp Sans", Helvetica, sans-serif;
}
.slideout-menu ul li a {
  color: white;
  text-transform: uppercase;
  padding: 0;
}
.slideout-menu ul li a:hover {
  text-decoration: none;
  color: black;
}
.slideout-menu ul li a.selected {
  color: #03FF00;
  background-color: transparent;
  font-weight: normal;
}
.slideout-menu ul li.current-menu-item a {
  text-decoration: none;
  color: #03FF00;
  font-weight: normal;
}
.slideout-menu a.toggle-menu {
  font-size: 30px;
}
.slideout-menu form {
  display: flex;
  margin-bottom: 25px;
}
.slideout-menu form input[type=text] {
  padding: 0.6em;
  text-transform: uppercase;
  font-size: 14px;
  font-family: "Sharp Sans", Helvetica, sans-serif;
  font-weight: 600;
}
.slideout-menu form button {
  font-size: 16px;
  padding: 0.6em 1em;
  background-color: black;
}
.slideout-menu form button:hover, .slideout-menu form button:focus {
  background-color: #666;
  color: white;
}

.slideout-menu-left {
  left: 0;
}

.slideout-menu-right {
  right: 0;
}

.slideout-panel {
  position: relative;
  z-index: 1;
  will-change: transform;
  background-color: #fff;
  /* A background-color is required */
  min-height: 100vh;
}

.bbn_page .slideout-panel {
  background-color: #000;
}

.slideout-open,
.slideout-open body,
.slideout-open .slideout-panel {
  overflow: hidden;
}

.slideout-open .slideout-menu {
  display: block;
}

body.logged_in .slideout-menu {
  margin-top: 0;
}

/*!
 * Hamburgers
 * @description Tasty CSS-animated hamburgers
 * @author Jonathan Suh @jonsuh
 * @site https://jonsuh.com/hamburgers
 * @link https://github.com/jonsuh/hamburgers
 */
.hamburger {
  padding: 10px 15px 5px 15px;
  display: inline-block;
  cursor: pointer;
  transition-property: opacity, filter;
  transition-duration: 0.15s;
  transition-timing-function: linear;
  font: inherit;
  color: inherit;
  text-transform: none;
  background-color: transparent;
  border: 0;
  margin: 0;
  overflow: visible;
  outline: none;
}

.hamburger.is-active .hamburger-inner,
.hamburger.is-active .hamburger-inner::before,
.hamburger.is-active .hamburger-inner::after {
  background-color: #03FF00;
}

.hamburger-box {
  width: 30px;
  height: 24px;
  display: inline-block;
  position: relative;
}

.hamburger-inner {
  display: block;
  top: 50%;
  margin-top: -2px;
}

.hamburger-inner, .hamburger-inner::before, .hamburger-inner::after {
  width: 30px;
  height: 2px;
  background-color: #03FF00;
  border-radius: 2px;
  position: absolute;
  transition-property: transform;
  transition-duration: 0.15s;
  transition-timing-function: ease;
}

.hamburger-inner::before, .hamburger-inner::after {
  content: "";
  display: block;
}

.hamburger-inner::before {
  top: -10px;
}

.hamburger-inner::after {
  bottom: -10px;
}

/*
   * 3DX
   */
.hamburger--3dx .hamburger-box {
  perspective: 80px;
}

.hamburger--3dx .hamburger-inner {
  transition: transform 0.15s cubic-bezier(0.645, 0.045, 0.355, 1), background-color 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1);
}

.hamburger--3dx .hamburger-inner::before, .hamburger--3dx .hamburger-inner::after {
  transition: transform 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1);
}

.hamburger--3dx.is-active .hamburger-inner {
  background-color: transparent !important;
  transform: rotateY(180deg);
}

.hamburger--3dx.is-active .hamburger-inner::before {
  transform: translate3d(0, 10px, 0) rotate(45deg);
}

.hamburger--3dx.is-active .hamburger-inner::after {
  transform: translate3d(0, -10px, 0) rotate(-45deg);
}

/*
   * 3DX Reverse
   */
.hamburger--3dx-r .hamburger-box {
  perspective: 80px;
}

.hamburger--3dx-r .hamburger-inner {
  transition: transform 0.15s cubic-bezier(0.645, 0.045, 0.355, 1), background-color 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1);
}

.hamburger--3dx-r .hamburger-inner::before, .hamburger--3dx-r .hamburger-inner::after {
  transition: transform 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1);
}

.hamburger--3dx-r.is-active .hamburger-inner {
  background-color: transparent !important;
  transform: rotateY(-180deg);
}

.hamburger--3dx-r.is-active .hamburger-inner::before {
  transform: translate3d(0, 10px, 0) rotate(45deg);
}

.hamburger--3dx-r.is-active .hamburger-inner::after {
  transform: translate3d(0, -10px, 0) rotate(-45deg);
}

/*
   * 3DY
   */
.hamburger--3dy .hamburger-box {
  perspective: 80px;
}

.hamburger--3dy .hamburger-inner {
  transition: transform 0.15s cubic-bezier(0.645, 0.045, 0.355, 1), background-color 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1);
}

.hamburger--3dy .hamburger-inner::before, .hamburger--3dy .hamburger-inner::after {
  transition: transform 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1);
}

.hamburger--3dy.is-active .hamburger-inner {
  background-color: transparent !important;
  transform: rotateX(-180deg);
}

.hamburger--3dy.is-active .hamburger-inner::before {
  transform: translate3d(0, 10px, 0) rotate(45deg);
}

.hamburger--3dy.is-active .hamburger-inner::after {
  transform: translate3d(0, -10px, 0) rotate(-45deg);
}

/*
   * 3DY Reverse
   */
.hamburger--3dy-r .hamburger-box {
  perspective: 80px;
}

.hamburger--3dy-r .hamburger-inner {
  transition: transform 0.15s cubic-bezier(0.645, 0.045, 0.355, 1), background-color 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1);
}

.hamburger--3dy-r .hamburger-inner::before, .hamburger--3dy-r .hamburger-inner::after {
  transition: transform 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1);
}

.hamburger--3dy-r.is-active .hamburger-inner {
  background-color: transparent !important;
  transform: rotateX(180deg);
}

.hamburger--3dy-r.is-active .hamburger-inner::before {
  transform: translate3d(0, 10px, 0) rotate(45deg);
}

.hamburger--3dy-r.is-active .hamburger-inner::after {
  transform: translate3d(0, -10px, 0) rotate(-45deg);
}

/*
   * 3DXY
   */
.hamburger--3dxy .hamburger-box {
  perspective: 80px;
}

.hamburger--3dxy .hamburger-inner {
  transition: transform 0.15s cubic-bezier(0.645, 0.045, 0.355, 1), background-color 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1);
}

.hamburger--3dxy .hamburger-inner::before, .hamburger--3dxy .hamburger-inner::after {
  transition: transform 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1);
}

.hamburger--3dxy.is-active .hamburger-inner {
  background-color: transparent !important;
  transform: rotateX(180deg) rotateY(180deg);
}

.hamburger--3dxy.is-active .hamburger-inner::before {
  transform: translate3d(0, 10px, 0) rotate(45deg);
}

.hamburger--3dxy.is-active .hamburger-inner::after {
  transform: translate3d(0, -10px, 0) rotate(-45deg);
}

/*
   * 3DXY Reverse
   */
.hamburger--3dxy-r .hamburger-box {
  perspective: 80px;
}

.hamburger--3dxy-r .hamburger-inner {
  transition: transform 0.15s cubic-bezier(0.645, 0.045, 0.355, 1), background-color 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1);
}

.hamburger--3dxy-r .hamburger-inner::before, .hamburger--3dxy-r .hamburger-inner::after {
  transition: transform 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1);
}

.hamburger--3dxy-r.is-active .hamburger-inner {
  background-color: transparent !important;
  transform: rotateX(180deg) rotateY(180deg) rotateZ(-180deg);
}

.hamburger--3dxy-r.is-active .hamburger-inner::before {
  transform: translate3d(0, 10px, 0) rotate(45deg);
}

.hamburger--3dxy-r.is-active .hamburger-inner::after {
  transform: translate3d(0, -10px, 0) rotate(-45deg);
}

/*
   * Arrow
   */
.hamburger--arrow.is-active .hamburger-inner::before {
  transform: translate3d(-8px, 0, 0) rotate(-45deg) scale(0.7, 1);
}

.hamburger--arrow.is-active .hamburger-inner::after {
  transform: translate3d(-8px, 0, 0) rotate(45deg) scale(0.7, 1);
}

/*
   * Arrow Right
   */
.hamburger--arrow-r.is-active .hamburger-inner::before {
  transform: translate3d(8px, 0, 0) rotate(45deg) scale(0.7, 1);
}

.hamburger--arrow-r.is-active .hamburger-inner::after {
  transform: translate3d(8px, 0, 0) rotate(-45deg) scale(0.7, 1);
}

/*
   * Arrow Alt
   */
.hamburger--arrowalt .hamburger-inner::before {
  transition: top 0.1s 0.1s ease, transform 0.1s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.hamburger--arrowalt .hamburger-inner::after {
  transition: bottom 0.1s 0.1s ease, transform 0.1s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.hamburger--arrowalt.is-active .hamburger-inner::before {
  top: 0;
  transform: translate3d(-8px, -10px, 0) rotate(-45deg) scale(0.7, 1);
  transition: top 0.1s ease, transform 0.1s 0.1s cubic-bezier(0.895, 0.03, 0.685, 0.22);
}

.hamburger--arrowalt.is-active .hamburger-inner::after {
  bottom: 0;
  transform: translate3d(-8px, 10px, 0) rotate(45deg) scale(0.7, 1);
  transition: bottom 0.1s ease, transform 0.1s 0.1s cubic-bezier(0.895, 0.03, 0.685, 0.22);
}

/*
   * Arrow Alt Right
   */
.hamburger--arrowalt-r .hamburger-inner::before {
  transition: top 0.1s 0.1s ease, transform 0.1s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.hamburger--arrowalt-r .hamburger-inner::after {
  transition: bottom 0.1s 0.1s ease, transform 0.1s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.hamburger--arrowalt-r.is-active .hamburger-inner::before {
  top: 0;
  transform: translate3d(8px, -10px, 0) rotate(45deg) scale(0.7, 1);
  transition: top 0.1s ease, transform 0.1s 0.1s cubic-bezier(0.895, 0.03, 0.685, 0.22);
}

.hamburger--arrowalt-r.is-active .hamburger-inner::after {
  bottom: 0;
  transform: translate3d(8px, 10px, 0) rotate(-45deg) scale(0.7, 1);
  transition: bottom 0.1s ease, transform 0.1s 0.1s cubic-bezier(0.895, 0.03, 0.685, 0.22);
}

/*
   * Arrow Turn
   */
.hamburger--arrowturn.is-active .hamburger-inner {
  transform: rotate(-180deg);
}

.hamburger--arrowturn.is-active .hamburger-inner::before {
  transform: translate3d(8px, 0, 0) rotate(45deg) scale(0.7, 1);
}

.hamburger--arrowturn.is-active .hamburger-inner::after {
  transform: translate3d(8px, 0, 0) rotate(-45deg) scale(0.7, 1);
}

/*
   * Arrow Turn Right
   */
.hamburger--arrowturn-r.is-active .hamburger-inner {
  transform: rotate(-180deg);
}

.hamburger--arrowturn-r.is-active .hamburger-inner::before {
  transform: translate3d(-8px, 0, 0) rotate(-45deg) scale(0.7, 1);
}

.hamburger--arrowturn-r.is-active .hamburger-inner::after {
  transform: translate3d(-8px, 0, 0) rotate(45deg) scale(0.7, 1);
}

/*
   * Boring
   */
.hamburger--boring .hamburger-inner, .hamburger--boring .hamburger-inner::before, .hamburger--boring .hamburger-inner::after {
  transition-property: none;
}

.hamburger--boring.is-active .hamburger-inner {
  transform: rotate(45deg);
}

.hamburger--boring.is-active .hamburger-inner::before {
  top: 0;
  opacity: 0;
}

.hamburger--boring.is-active .hamburger-inner::after {
  bottom: 0;
  transform: rotate(-90deg);
}

/*
   * Collapse
   */
.hamburger--collapse .hamburger-inner {
  top: auto;
  bottom: 0;
  transition-duration: 0.13s;
  transition-delay: 0.13s;
  transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
}

.hamburger--collapse .hamburger-inner::after {
  top: -20px;
  transition: top 0.2s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), opacity 0.1s linear;
}

.hamburger--collapse .hamburger-inner::before {
  transition: top 0.12s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19);
}

.hamburger--collapse.is-active .hamburger-inner {
  transform: translate3d(0, -10px, 0) rotate(-45deg);
  transition-delay: 0.22s;
  transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
}

.hamburger--collapse.is-active .hamburger-inner::after {
  top: 0;
  opacity: 0;
  transition: top 0.2s cubic-bezier(0.33333, 0, 0.66667, 0.33333), opacity 0.1s 0.22s linear;
}

.hamburger--collapse.is-active .hamburger-inner::before {
  top: 0;
  transform: rotate(-90deg);
  transition: top 0.1s 0.16s cubic-bezier(0.33333, 0, 0.66667, 0.33333), transform 0.13s 0.25s cubic-bezier(0.215, 0.61, 0.355, 1);
}

/*
   * Collapse Reverse
   */
.hamburger--collapse-r .hamburger-inner {
  top: auto;
  bottom: 0;
  transition-duration: 0.13s;
  transition-delay: 0.13s;
  transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
}

.hamburger--collapse-r .hamburger-inner::after {
  top: -20px;
  transition: top 0.2s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), opacity 0.1s linear;
}

.hamburger--collapse-r .hamburger-inner::before {
  transition: top 0.12s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19);
}

.hamburger--collapse-r.is-active .hamburger-inner {
  transform: translate3d(0, -10px, 0) rotate(45deg);
  transition-delay: 0.22s;
  transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
}

.hamburger--collapse-r.is-active .hamburger-inner::after {
  top: 0;
  opacity: 0;
  transition: top 0.2s cubic-bezier(0.33333, 0, 0.66667, 0.33333), opacity 0.1s 0.22s linear;
}

.hamburger--collapse-r.is-active .hamburger-inner::before {
  top: 0;
  transform: rotate(90deg);
  transition: top 0.1s 0.16s cubic-bezier(0.33333, 0, 0.66667, 0.33333), transform 0.13s 0.25s cubic-bezier(0.215, 0.61, 0.355, 1);
}

/*
   * Elastic
   */
.hamburger--elastic .hamburger-inner {
  top: 2px;
  transition-duration: 0.275s;
  transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.hamburger--elastic .hamburger-inner::before {
  top: 10px;
  transition: opacity 0.125s 0.275s ease;
}

.hamburger--elastic .hamburger-inner::after {
  top: 20px;
  transition: transform 0.275s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.hamburger--elastic.is-active .hamburger-inner {
  transform: translate3d(0, 10px, 0) rotate(135deg);
  transition-delay: 0.075s;
}

.hamburger--elastic.is-active .hamburger-inner::before {
  transition-delay: 0s;
  opacity: 0;
}

.hamburger--elastic.is-active .hamburger-inner::after {
  transform: translate3d(0, -20px, 0) rotate(-270deg);
  transition-delay: 0.075s;
}

/*
   * Elastic Reverse
   */
.hamburger--elastic-r .hamburger-inner {
  top: 2px;
  transition-duration: 0.275s;
  transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.hamburger--elastic-r .hamburger-inner::before {
  top: 10px;
  transition: opacity 0.125s 0.275s ease;
}

.hamburger--elastic-r .hamburger-inner::after {
  top: 20px;
  transition: transform 0.275s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.hamburger--elastic-r.is-active .hamburger-inner {
  transform: translate3d(0, 10px, 0) rotate(-135deg);
  transition-delay: 0.075s;
}

.hamburger--elastic-r.is-active .hamburger-inner::before {
  transition-delay: 0s;
  opacity: 0;
}

.hamburger--elastic-r.is-active .hamburger-inner::after {
  transform: translate3d(0, -20px, 0) rotate(270deg);
  transition-delay: 0.075s;
}

/*
   * Emphatic
   */
.hamburger--emphatic {
  overflow: hidden;
}

.hamburger--emphatic .hamburger-inner {
  transition: background-color 0.125s 0.175s ease-in;
}

.hamburger--emphatic .hamburger-inner::before {
  left: 0;
  transition: transform 0.125s cubic-bezier(0.6, 0.04, 0.98, 0.335), top 0.05s 0.125s linear, left 0.125s 0.175s ease-in;
}

.hamburger--emphatic .hamburger-inner::after {
  top: 10px;
  right: 0;
  transition: transform 0.125s cubic-bezier(0.6, 0.04, 0.98, 0.335), top 0.05s 0.125s linear, right 0.125s 0.175s ease-in;
}

.hamburger--emphatic.is-active .hamburger-inner {
  transition-delay: 0s;
  transition-timing-function: ease-out;
  background-color: transparent !important;
}

.hamburger--emphatic.is-active .hamburger-inner::before {
  left: -80px;
  top: -80px;
  transform: translate3d(80px, 80px, 0) rotate(45deg);
  transition: left 0.125s ease-out, top 0.05s 0.125s linear, transform 0.125s 0.175s cubic-bezier(0.075, 0.82, 0.165, 1);
}

.hamburger--emphatic.is-active .hamburger-inner::after {
  right: -80px;
  top: -80px;
  transform: translate3d(-80px, 80px, 0) rotate(-45deg);
  transition: right 0.125s ease-out, top 0.05s 0.125s linear, transform 0.125s 0.175s cubic-bezier(0.075, 0.82, 0.165, 1);
}

/*
   * Emphatic Reverse
   */
.hamburger--emphatic-r {
  overflow: hidden;
}

.hamburger--emphatic-r .hamburger-inner {
  transition: background-color 0.125s 0.175s ease-in;
}

.hamburger--emphatic-r .hamburger-inner::before {
  left: 0;
  transition: transform 0.125s cubic-bezier(0.6, 0.04, 0.98, 0.335), top 0.05s 0.125s linear, left 0.125s 0.175s ease-in;
}

.hamburger--emphatic-r .hamburger-inner::after {
  top: 10px;
  right: 0;
  transition: transform 0.125s cubic-bezier(0.6, 0.04, 0.98, 0.335), top 0.05s 0.125s linear, right 0.125s 0.175s ease-in;
}

.hamburger--emphatic-r.is-active .hamburger-inner {
  transition-delay: 0s;
  transition-timing-function: ease-out;
  background-color: transparent !important;
}

.hamburger--emphatic-r.is-active .hamburger-inner::before {
  left: -80px;
  top: 80px;
  transform: translate3d(80px, -80px, 0) rotate(-45deg);
  transition: left 0.125s ease-out, top 0.05s 0.125s linear, transform 0.125s 0.175s cubic-bezier(0.075, 0.82, 0.165, 1);
}

.hamburger--emphatic-r.is-active .hamburger-inner::after {
  right: -80px;
  top: 80px;
  transform: translate3d(-80px, -80px, 0) rotate(45deg);
  transition: right 0.125s ease-out, top 0.05s 0.125s linear, transform 0.125s 0.175s cubic-bezier(0.075, 0.82, 0.165, 1);
}

/*
   * Minus
   */
.hamburger--minus .hamburger-inner::before, .hamburger--minus .hamburger-inner::after {
  transition: bottom 0.08s 0s ease-out, top 0.08s 0s ease-out, opacity 0s linear;
}

.hamburger--minus.is-active .hamburger-inner::before, .hamburger--minus.is-active .hamburger-inner::after {
  opacity: 0;
  transition: bottom 0.08s ease-out, top 0.08s ease-out, opacity 0s 0.08s linear;
}

.hamburger--minus.is-active .hamburger-inner::before {
  top: 0;
}

.hamburger--minus.is-active .hamburger-inner::after {
  bottom: 0;
}

/*
   * Slider
   */
.hamburger--slider .hamburger-inner {
  top: 2px;
}

.hamburger--slider .hamburger-inner::before {
  top: 10px;
  transition-property: transform, opacity;
  transition-timing-function: ease;
  transition-duration: 0.15s;
}

.hamburger--slider .hamburger-inner::after {
  top: 20px;
}

.hamburger--slider.is-active .hamburger-inner {
  transform: translate3d(0, 10px, 0) rotate(45deg);
}

.hamburger--slider.is-active .hamburger-inner::before {
  transform: rotate(-45deg) translate3d(-5.71429px, -6px, 0);
  opacity: 0;
}

.hamburger--slider.is-active .hamburger-inner::after {
  transform: translate3d(0, -20px, 0) rotate(-90deg);
}

/*
   * Slider Reverse
   */
.hamburger--slider-r .hamburger-inner {
  top: 2px;
}

.hamburger--slider-r .hamburger-inner::before {
  top: 10px;
  transition-property: transform, opacity;
  transition-timing-function: ease;
  transition-duration: 0.15s;
}

.hamburger--slider-r .hamburger-inner::after {
  top: 20px;
}

.hamburger--slider-r.is-active .hamburger-inner {
  transform: translate3d(0, 10px, 0) rotate(-45deg);
}

.hamburger--slider-r.is-active .hamburger-inner::before {
  transform: rotate(45deg) translate3d(5.71429px, -6px, 0);
  opacity: 0;
}

.hamburger--slider-r.is-active .hamburger-inner::after {
  transform: translate3d(0, -20px, 0) rotate(90deg);
}

/*
   * Spin
   */
.hamburger--spin .hamburger-inner {
  transition-duration: 0.22s;
  transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
}

.hamburger--spin .hamburger-inner::before {
  transition: top 0.1s 0.25s ease-in, opacity 0.1s ease-in;
}

.hamburger--spin .hamburger-inner::after {
  transition: bottom 0.1s 0.25s ease-in, transform 0.22s cubic-bezier(0.55, 0.055, 0.675, 0.19);
}

.hamburger--spin.is-active .hamburger-inner {
  transform: rotate(225deg);
  transition-delay: 0.12s;
  transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
}

.hamburger--spin.is-active .hamburger-inner::before {
  top: 0;
  opacity: 0;
  transition: top 0.1s ease-out, opacity 0.1s 0.12s ease-out;
}

.hamburger--spin.is-active .hamburger-inner::after {
  bottom: 0;
  transform: rotate(-90deg);
  transition: bottom 0.1s ease-out, transform 0.22s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1);
}

/*
   * Spin Reverse
   */
.hamburger--spin-r .hamburger-inner {
  transition-duration: 0.22s;
  transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
}

.hamburger--spin-r .hamburger-inner::before {
  transition: top 0.1s 0.25s ease-in, opacity 0.1s ease-in;
}

.hamburger--spin-r .hamburger-inner::after {
  transition: bottom 0.1s 0.25s ease-in, transform 0.22s cubic-bezier(0.55, 0.055, 0.675, 0.19);
}

.hamburger--spin-r.is-active .hamburger-inner {
  transform: rotate(-225deg);
  transition-delay: 0.12s;
  transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
}

.hamburger--spin-r.is-active .hamburger-inner::before {
  top: 0;
  opacity: 0;
  transition: top 0.1s ease-out, opacity 0.1s 0.12s ease-out;
}

.hamburger--spin-r.is-active .hamburger-inner::after {
  bottom: 0;
  transform: rotate(90deg);
  transition: bottom 0.1s ease-out, transform 0.22s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1);
}

/*
   * Spring
   */
.hamburger--spring .hamburger-inner {
  top: 2px;
  transition: background-color 0s 0.13s linear;
}

.hamburger--spring .hamburger-inner::before {
  top: 10px;
  transition: top 0.1s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19);
}

.hamburger--spring .hamburger-inner::after {
  top: 20px;
  transition: top 0.2s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19);
}

.hamburger--spring.is-active .hamburger-inner {
  transition-delay: 0.22s;
  background-color: transparent !important;
}

.hamburger--spring.is-active .hamburger-inner::before {
  top: 0;
  transition: top 0.1s 0.15s cubic-bezier(0.33333, 0, 0.66667, 0.33333), transform 0.13s 0.22s cubic-bezier(0.215, 0.61, 0.355, 1);
  transform: translate3d(0, 10px, 0) rotate(45deg);
}

.hamburger--spring.is-active .hamburger-inner::after {
  top: 0;
  transition: top 0.2s cubic-bezier(0.33333, 0, 0.66667, 0.33333), transform 0.13s 0.22s cubic-bezier(0.215, 0.61, 0.355, 1);
  transform: translate3d(0, 10px, 0) rotate(-45deg);
}

/*
   * Spring Reverse
   */
.hamburger--spring-r .hamburger-inner {
  top: auto;
  bottom: 0;
  transition-duration: 0.13s;
  transition-delay: 0s;
  transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
}

.hamburger--spring-r .hamburger-inner::after {
  top: -20px;
  transition: top 0.2s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), opacity 0s linear;
}

.hamburger--spring-r .hamburger-inner::before {
  transition: top 0.1s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19);
}

.hamburger--spring-r.is-active .hamburger-inner {
  transform: translate3d(0, -10px, 0) rotate(-45deg);
  transition-delay: 0.22s;
  transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
}

.hamburger--spring-r.is-active .hamburger-inner::after {
  top: 0;
  opacity: 0;
  transition: top 0.2s cubic-bezier(0.33333, 0, 0.66667, 0.33333), opacity 0s 0.22s linear;
}

.hamburger--spring-r.is-active .hamburger-inner::before {
  top: 0;
  transform: rotate(90deg);
  transition: top 0.1s 0.15s cubic-bezier(0.33333, 0, 0.66667, 0.33333), transform 0.13s 0.22s cubic-bezier(0.215, 0.61, 0.355, 1);
}

/*
   * Stand
   */
.hamburger--stand .hamburger-inner {
  transition: transform 0.075s 0.15s cubic-bezier(0.55, 0.055, 0.675, 0.19), background-color 0s 0.075s linear;
}

.hamburger--stand .hamburger-inner::before {
  transition: top 0.075s 0.075s ease-in, transform 0.075s 0s cubic-bezier(0.55, 0.055, 0.675, 0.19);
}

.hamburger--stand .hamburger-inner::after {
  transition: bottom 0.075s 0.075s ease-in, transform 0.075s 0s cubic-bezier(0.55, 0.055, 0.675, 0.19);
}

.hamburger--stand.is-active .hamburger-inner {
  transform: rotate(90deg);
  background-color: transparent !important;
  transition: transform 0.075s 0s cubic-bezier(0.215, 0.61, 0.355, 1), background-color 0s 0.15s linear;
}

.hamburger--stand.is-active .hamburger-inner::before {
  top: 0;
  transform: rotate(-45deg);
  transition: top 0.075s 0.1s ease-out, transform 0.075s 0.15s cubic-bezier(0.215, 0.61, 0.355, 1);
}

.hamburger--stand.is-active .hamburger-inner::after {
  bottom: 0;
  transform: rotate(45deg);
  transition: bottom 0.075s 0.1s ease-out, transform 0.075s 0.15s cubic-bezier(0.215, 0.61, 0.355, 1);
}

/*
   * Stand Reverse
   */
.hamburger--stand-r .hamburger-inner {
  transition: transform 0.075s 0.15s cubic-bezier(0.55, 0.055, 0.675, 0.19), background-color 0s 0.075s linear;
}

.hamburger--stand-r .hamburger-inner::before {
  transition: top 0.075s 0.075s ease-in, transform 0.075s 0s cubic-bezier(0.55, 0.055, 0.675, 0.19);
}

.hamburger--stand-r .hamburger-inner::after {
  transition: bottom 0.075s 0.075s ease-in, transform 0.075s 0s cubic-bezier(0.55, 0.055, 0.675, 0.19);
}

.hamburger--stand-r.is-active .hamburger-inner {
  transform: rotate(-90deg);
  background-color: transparent !important;
  transition: transform 0.075s 0s cubic-bezier(0.215, 0.61, 0.355, 1), background-color 0s 0.15s linear;
}

.hamburger--stand-r.is-active .hamburger-inner::before {
  top: 0;
  transform: rotate(-45deg);
  transition: top 0.075s 0.1s ease-out, transform 0.075s 0.15s cubic-bezier(0.215, 0.61, 0.355, 1);
}

.hamburger--stand-r.is-active .hamburger-inner::after {
  bottom: 0;
  transform: rotate(45deg);
  transition: bottom 0.075s 0.1s ease-out, transform 0.075s 0.15s cubic-bezier(0.215, 0.61, 0.355, 1);
}

/*
   * Squeeze
   */
.hamburger--squeeze .hamburger-inner {
  transition-duration: 0.075s;
  transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
}

.hamburger--squeeze .hamburger-inner::before {
  transition: top 0.075s 0.12s ease, opacity 0.075s ease;
}

.hamburger--squeeze .hamburger-inner::after {
  transition: bottom 0.075s 0.12s ease, transform 0.075s cubic-bezier(0.55, 0.055, 0.675, 0.19);
}

.hamburger--squeeze.is-active .hamburger-inner {
  transform: rotate(45deg);
  transition-delay: 0.12s;
  transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
}

.hamburger--squeeze.is-active .hamburger-inner::before {
  top: 0;
  opacity: 0;
  transition: top 0.075s ease, opacity 0.075s 0.12s ease;
}

.hamburger--squeeze.is-active .hamburger-inner::after {
  bottom: 0;
  transform: rotate(-90deg);
  transition: bottom 0.075s ease, transform 0.075s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1);
}

/*
   * Vortex
   */
.hamburger--vortex .hamburger-inner {
  transition-duration: 0.2s;
  transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
}

.hamburger--vortex .hamburger-inner::before, .hamburger--vortex .hamburger-inner::after {
  transition-duration: 0s;
  transition-delay: 0.1s;
  transition-timing-function: linear;
}

.hamburger--vortex .hamburger-inner::before {
  transition-property: top, opacity;
}

.hamburger--vortex .hamburger-inner::after {
  transition-property: bottom, transform;
}

.hamburger--vortex.is-active .hamburger-inner {
  transform: rotate(765deg);
  transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
}

.hamburger--vortex.is-active .hamburger-inner::before, .hamburger--vortex.is-active .hamburger-inner::after {
  transition-delay: 0s;
}

.hamburger--vortex.is-active .hamburger-inner::before {
  top: 0;
  opacity: 0;
}

.hamburger--vortex.is-active .hamburger-inner::after {
  bottom: 0;
  transform: rotate(90deg);
}

/*
   * Vortex Reverse
   */
.hamburger--vortex-r .hamburger-inner {
  transition-duration: 0.2s;
  transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
}

.hamburger--vortex-r .hamburger-inner::before, .hamburger--vortex-r .hamburger-inner::after {
  transition-duration: 0s;
  transition-delay: 0.1s;
  transition-timing-function: linear;
}

.hamburger--vortex-r .hamburger-inner::before {
  transition-property: top, opacity;
}

.hamburger--vortex-r .hamburger-inner::after {
  transition-property: bottom, transform;
}

.hamburger--vortex-r.is-active .hamburger-inner {
  transform: rotate(-765deg);
  transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
}

.hamburger--vortex-r.is-active .hamburger-inner::before, .hamburger--vortex-r.is-active .hamburger-inner::after {
  transition-delay: 0s;
}

.hamburger--vortex-r.is-active .hamburger-inner::before {
  top: 0;
  opacity: 0;
}

.hamburger--vortex-r.is-active .hamburger-inner::after {
  bottom: 0;
  transform: rotate(-90deg);
}

#toast-container {
  font-weight: 400;
}
#toast-container > div {
  opacity: 1;
}
#toast-container > .toast-success {
  background-color: #03FF00;
  color: black;
  background-image: none;
}
#toast-container > .toast-info {
  background-color: #6cb2eb;
}
#toast-container > .toast-error {
  background-color: #e3342f;
}

.infographic .inner {
  max-width: 1000px;
  margin: 0 auto 0 auto;
  position: relative;
}
.infographic .inner .image-states {
  padding: 50px 0;
}
.infographic .inner .image-states img {
  display: none;
  width: 100%;
  height: auto;
}
.infographic .inner .image-states img.active {
  display: block;
}
.infographic .inner .hotspots {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
}
.infographic .inner .hotspots a {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}
.infographic .inner .hotspots a .hotspot-inner {
  display: none;
}
.infographic .inner .hotspots a:hover .hotspot-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: column;
  height: 100%;
  width: 100%;
  text-align: center;
}
.infographic .inner .hotspots a:hover .hotspot-inner .content-box {
  padding: 15px;
  border: 1px dashed black;
  font-size: 11px;
  line-height: 150%;
}
.infographic .inner .hotspots a:hover .hotspot-inner h4 {
  font-size: 20px;
  margin: 1em 0;
}
.infographic .carousel {
  max-width: 1000px;
  margin: 0 auto 0 auto;
}
.infographic .carousel .infographic-slide {
  position: relative;
}
.infographic .carousel .infographic-slide img {
  width: 100%;
  height: auto;
}
.infographic .carousel .infographic-slide .content {
  position: absolute;
  top: 20px;
  left: 0;
  width: 25%;
  display: flex;
}
.infographic .carousel .infographic-slide .content .number {
  margin-right: 10px;
}
.infographic .carousel .infographic-slide .content h4 {
  font-size: 25px;
}
.infographic .carousel .infographic-slide .content.align-right {
  right: 0;
  left: auto;
}

.infographic-mobile .content-boxes {
  width: 80%;
  margin: 0 auto;
}
.infographic-mobile .content-boxes .content-box {
  display: none;
  padding: 12.5px 0;
  border: 1px dashed black;
  line-height: 110%;
  text-align: center;
}
.infographic-mobile .content-boxes .content-box.active {
  display: block;
}
.infographic-mobile .content-boxes .content-box h4 {
  font-weight: bold;
  margin: 0;
}
.infographic-mobile .content-boxes .content-box p {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  font-size: 11px;
  margin: 0;
}
.infographic-mobile .content-boxes .content-box p span {
  display: inline-block;
  padding: 2.5px;
}
.infographic-mobile .inner {
  max-width: 1000px;
  margin: 0 auto 0 auto;
  position: relative;
}
.infographic-mobile .inner .image-states {
  padding: 10px 0;
}
.infographic-mobile .inner .image-states img {
  display: none;
  width: 100%;
  height: auto;
}
.infographic-mobile .inner .image-states img.active {
  display: block;
}
.infographic-mobile .inner .hotspots {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
}
.infographic-mobile .inner .hotspots a {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}
.infographic-mobile .inner .hotspots a .hotspot-inner {
  display: none;
}
.infographic-mobile .inner .hotspots a:focus {
  outline: none;
}

.process-page .panel.cta {
  padding-bottom: 20px;
}

.infographic-stages-mobile .stage {
  line-height: 1px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.infographic-stages-mobile .stage .image {
  width: 200px;
  flex: none;
}
.infographic-stages-mobile .stage .image img {
  width: 100%;
  height: auto;
  line-height: 1px;
}
.infographic-stages-mobile .stage .content {
  padding: 8px;
  border: 1px dashed #999;
  width: 140px;
  flex: none;
}
.infographic-stages-mobile .stage .content h4 {
  font-size: 12px;
}
.infographic-stages-mobile .stage .content p {
  margin: 0;
  font-size: 10px;
}

.infographic-carousel-mobile {
  width: 100%;
}
.infographic-carousel-mobile .infographic-slide {
  position: relative;
  padding-top: 150px;
}
.infographic-carousel-mobile .infographic-slide img {
  width: 100%;
  height: auto;
  margin-top: -75px;
}
.infographic-carousel-mobile .infographic-slide .content {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  padding: 0 20px 0 20px;
}
.infographic-carousel-mobile .infographic-slide .content .number {
  margin-right: 10px;
}
.infographic-carousel-mobile .infographic-slide .content h4 {
  font-size: 16px;
  font-weight: bold;
}
.infographic-carousel-mobile .infographic-slide .content p {
  margin: 0;
  font-size: 12px;
}

#app.casestudies h2 {
  font-size: 40px;
}
@media only screen and (max-width: 1024px) {
  #app.casestudies h2 {
    font-size: 22px;
  }
}
#app.casestudies .cta-button {
  text-align: center;
  margin-bottom: 50px;
}

.casestudies-wrap {
  display: flex;
  margin-bottom: 50px;
  justify-content: center;
  align-items: center;
  line-height: 1px;
}
@media only screen and (max-width: 1024px) {
  .casestudies-wrap {
    flex-wrap: wrap;
  }
}
.casestudies-wrap .casestudy {
  flex: 1;
}
@media only screen and (max-width: 1024px) {
  .casestudies-wrap .casestudy {
    width: 50%;
    flex: none;
  }
}
.casestudies-wrap .casestudy a {
  display: block;
  position: relative;
}
.casestudies-wrap .casestudy a img {
  width: 100%;
  height: auto;
}
.casestudies-wrap .casestudy a .overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: none;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: white;
}
.casestudies-wrap .casestudy a .overlay .cta {
  border: 1px solid white;
  display: inline-block;
  padding: 1em;
}
.casestudies-wrap .casestudy a .overlay h4 {
  font-size: 20px;
}
.casestudies-wrap .casestudy a:hover .overlay {
  display: flex;
}

@media only screen and (max-width: 600px) {
  .mfp-container {
    padding: 20px;
  }
}
.mfp_modal {
  background-color: transparent;
  max-width: 800px;
  margin: 0 auto;
}
.mfp_modal .casestudy_modal header {
  background-color: black;
  position: relative;
}
.mfp_modal .casestudy_modal header a {
  position: absolute;
  top: 20px;
  right: 20px;
  color: rgba(255, 255, 255, 0.75);
  font-size: 30px;
}
@media only screen and (max-width: 600px) {
  .mfp_modal .casestudy_modal header a {
    font-size: 20px;
  }
}
.mfp_modal .casestudy_modal header a:hover {
  color: white;
}
.mfp_modal .casestudy_modal header .inner {
  width: 80%;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: flex-start;
}
@media only screen and (max-width: 600px) {
  .mfp_modal .casestudy_modal header .inner {
    flex-direction: column;
    align-items: center;
    padding: 20px 0;
  }
}
.mfp_modal .casestudy_modal header .inner div {
  flex: 1;
  text-align: center;
  padding: 40px 0;
}
@media only screen and (max-width: 600px) {
  .mfp_modal .casestudy_modal header .inner div {
    padding: 0;
  }
}
.mfp_modal .casestudy_modal header .inner div h3 {
  text-transform: uppercase;
  color: #03FF00;
  position: relative;
  font-size: 30px;
}
.mfp_modal .casestudy_modal header .inner div h3::before {
  content: "";
  display: block;
  position: absolute;
  bottom: 0;
  width: 20%;
  left: 40%;
  border-top: 1px solid #03FF00;
}
@media only screen and (max-width: 1024px) {
  .mfp_modal .casestudy_modal header .inner div h3 {
    font-size: 20px;
  }
}
.mfp_modal .casestudy_modal header .inner div h4 {
  text-transform: uppercase;
  color: white;
  font-weight: normal;
}
.mfp_modal .casestudy_modal section {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  background-color: white;
}
@media only screen and (max-width: 600px) {
  .mfp_modal .casestudy_modal section {
    display: block;
    padding: 20px;
  }
}
.mfp_modal .casestudy_modal section div {
  flex: 1;
  padding: 20px;
  background-color: white;
}
.mfp_modal .casestudy_modal section div h4 {
  font-size: 16px;
}
.mfp_modal .casestudy_modal section div p {
  font-size: 12px;
  margin: 0.5em 0;
}
@media only screen and (max-width: 600px) {
  .mfp_modal .casestudy_modal section div {
    padding: 0 0 10px 0;
  }
  .mfp_modal .casestudy_modal section div h4 {
    font-size: 13px;
    font-weight: bold;
  }
}
.mfp_modal .casestudy_modal footer {
  line-height: 1px;
  margin: 0;
  background-color: #f2f2f2;
}
.mfp_modal .casestudy_modal footer img {
  width: 100%;
  height: auto;
}
.mfp_modal .casestudy_modal footer .images {
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 75%;
  margin: 0 auto;
}
.mfp_modal .casestudy_modal footer .images div {
  padding: 10px;
}
.mfp_modal .casestudy_modal.brands header {
  background: url(../../images/modal_bkgd_brands.jpg) center center transparent;
  background-size: cover;
}
.mfp_modal .casestudy_modal.nestle header {
  background: url(../../images/modal_bkgd_nestle.jpg) center center transparent;
  background-size: cover;
}
.mfp_modal .casestudy_modal.medtronic header {
  background: url(../../images/modal_bkgd_medtronic.jpg) center center transparent;
  background-size: cover;
}
.mfp_modal .casestudy_modal.dentsply header {
  background: url(../../images/modal_bkgd_dentsply2.jpg) center center transparent;
  background-size: cover;
}
.mfp_modal .casestudy_modal.itero header {
  background: url(../../images/modal_bkgd_itero.jpg) center center transparent;
  background-size: cover;
}
.mfp_modal .modal-carousel-container {
  display: block;
}
.mfp_modal .modal-carousel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 25px 0;
}
.mfp_modal .modal-carousel .arrow {
  font-size: 20px;
  padding: 20px;
}
.mfp_modal .modal-carousel .arrow a {
  color: #999;
}
.mfp_modal .modal-carousel .arrow a:hover {
  color: #000;
}
.mfp_modal .modal-carousel .slides {
  width: 70%;
}
.mfp_modal .modal-carousel .slides img {
  width: 100%;
  height: auto;
}

.modal-video-container .modal-video {
  position: relative;
  padding-bottom: 56.25%;
  width: 100%;
  height: 0;
  background-color: #000;
}
.modal-video-container .modal-video video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.mfp_modal .modal-video-container {
  display: none;
}

.video-modal {
  background-color: white;
  max-width: 800px;
  margin: 0 auto;
}

#app.clients .inner h2 {
  font-size: 40px;
}
@media only screen and (max-width: 1024px) {
  #app.clients .inner h2 {
    font-size: 22px;
  }
}
@media only screen and (max-width: 1024px) {
  #app.clients .panel .inner {
    margin: 0 auto;
  }
}
#app.clients .cta-button {
  text-align: center;
  margin-bottom: 100px;
}
@media only screen and (max-width: 1024px) {
  #app.clients .cta-button {
    margin-bottom: 25px;
  }
}
#app.clients .logos-wrap {
  max-width: 1000px;
  margin: 0 auto 0 auto;
}
#app.clients .logos-wrap .logos {
  margin-bottom: 100px;
}
@media only screen and (max-width: 1024px) {
  #app.clients .logos-wrap .logos {
    margin-bottom: 25px;
  }
}
#app.clients .logos-wrap .logos .row {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 10px auto;
}
@media only screen and (max-width: 1024px) {
  #app.clients .logos-wrap .logos .row {
    flex-wrap: wrap;
  }
}
#app.clients .logos-wrap .logos .row .logo {
  padding: 10px;
}
#app.clients .logos-wrap .logos .row .logo img {
  width: auto;
  height: 50px;
}

.contact-wrap .inner h2 {
  font-size: 40px;
}
@media only screen and (max-width: 1024px) {
  .contact-wrap .inner h2 {
    font-size: 22px;
  }
}
.contact-wrap .panel .inner {
  margin: 50px auto;
}
@media only screen and (max-width: 1024px) {
  .contact-wrap .panel .inner {
    margin: 0 auto;
  }
}
.contact-wrap .cta-button {
  text-align: center;
  margin-bottom: 100px;
}
@media only screen and (max-width: 1024px) {
  .contact-wrap .cta-button {
    margin-bottom: 25px;
  }
}
.contact-wrap .contact-form .inner {
  max-width: 1000px;
  margin-bottom: 100px;
}
.contact-wrap .contact-form form .row {
  display: flex;
}
@media only screen and (max-width: 600px) {
  .contact-wrap .contact-form form .row {
    flex-direction: column;
  }
}
.contact-wrap .contact-form form .row .field {
  flex: 1;
  margin: 10px;
  background-color: #ccc;
  padding: 10px;
  text-align: left;
  display: flex;
  align-items: center;
  justify-content: center;
}
@media only screen and (max-width: 600px) {
  .contact-wrap .contact-form form .row .field {
    flex-direction: column;
    align-items: flex-start;
  }
}
.contact-wrap .contact-form form .row .field label {
  white-space: nowrap;
  line-height: 100%;
  display: block;
  padding: 3px 2px;
  font-size: 12px;
}
.contact-wrap .contact-form form .row .field input[type=text], .contact-wrap .contact-form form .row .field textarea {
  border: none;
  background-color: transparent;
  color: #000;
  width: 100%;
  line-height: 100%;
  font-size: 12px;
  padding: 2px;
}
.contact-wrap .contact-form form .row .field input[type=text]::-webkit-input-placeholder, .contact-wrap .contact-form form .row .field textarea::-webkit-input-placeholder {
  /* Chrome/Opera/Safari */
  color: white;
}
.contact-wrap .contact-form form .row .field input[type=text]::-moz-placeholder, .contact-wrap .contact-form form .row .field textarea::-moz-placeholder {
  /* Firefox 19+ */
  color: white;
}
.contact-wrap .contact-form form .row .field input[type=text]:-ms-input-placeholder, .contact-wrap .contact-form form .row .field textarea:-ms-input-placeholder {
  /* IE 10+ */
  color: white;
}
.contact-wrap .contact-form form .row .field input[type=text]:-moz-placeholder, .contact-wrap .contact-form form .row .field textarea:-moz-placeholder {
  /* Firefox 18- */
  color: white;
}
.contact-wrap .contact-form form .row.textarea .field {
  align-items: flex-start;
}
.contact-wrap .contact-form form button[type=submit][disabled] {
  opacity: 0.3;
}

body.bbn_page {
  color: white;
  box-sizing: border-box;
  font-size: 100%;
}
body.bbn_page img {
  border: 0;
  max-width: 100%;
  height: auto;
}

.orange {
  color: #EC6529;
}

#bbn_wrap {
  text-align: center;
  font-family: "Effra";
  padding-top: 50px;
}

#bbn_wrap h1 {
  font-family: "Effra";
  font-size: 40px;
  line-height: 130%;
}

#bbn_wrap p {
  font-family: "Effra";
  font-size: 15px;
  line-height: 130%;
}

#bbn_wrap .map {
  border-bottom: 1px solid #4B4A4B;
  margin-top: 75px;
  margin-bottom: 50px;
}

#bbn_wrap .map img {
  width: 100%;
  height: auto;
}

#bbn_wrap .navigator_icon {
  width: 100px;
  margin: 0 auto;
}

#bbn_wrap .navigator_icon img {
  width: 100%;
  height: auto;
}

#bbn_wrap .circles {
  width: 80%;
  margin: 50px auto;
  max-width: 1200px;
}

#bbn_wrap .circles img {
  width: 100%;
  height: auto;
}

#bbn_wrap .clover {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 80%;
  margin: 25px auto 50px;
  max-width: 1200px;
}

#bbn_wrap .clover .left, #bbn_wrap .clover .right {
  margin: 25px;
  flex: 1;
}

#bbn_wrap .clover .image {
  max-width: 500px;
}

#bbn_wrap .circle-info {
  display: flex;
  width: 80%;
  margin: 25px auto 50px;
  max-width: 1200px;
}

#bbn_wrap .info {
  margin: 0 10px 10px 10px;
  flex: 1;
}

#bbn_wrap .clover .info:first-child {
  margin-bottom: 30px;
}

#bbn_wrap .info h3 {
  text-transform: uppercase;
  font-weight: normal;
  font-size: 14px;
  margin: 0;
  text-align: left;
}

#bbn_wrap .info p,
#bbn_wrap .info ul {
  margin: 0;
  padding: 0;
  text-align: left;
}

#bbn_wrap .info ul {
  margin-left: 1.2em;
}

#bbn_wrap .circle-info .seperator {
  /* border-left: 1px solid #4B4A4B; */
  display: none;
}

#bbn_wrap .cta {
  width: 200px;
  margin: 50px auto;
}

#bbn_wrap .cta a {
  display: block;
  border: 1px solid #EC6529;
  padding: 15px;
  color: white;
  text-transform: uppercase;
  line-height: 130%;
}

#bbn_wrap .cta a b {
  color: #EC6529;
}

#bbn_wrap .cta a:hover {
  border-color: white;
}

/* responsive rules */
@media only screen and (max-width: 800px) {
  #bbn_wrap .circle-info, #bbn_wrap .clover {
    flex-direction: column;
  }

  #bbn_wrap .circle-info .seperator {
    display: none;
  }

  #bbn_wrap .info {
    margin: 10px;
  }

  #bbn_wrap p.para {
    width: 80%;
    margin: 1em auto;
  }
}