/* iframe */
iframe {
  border: none;
  width: 100%;
  height: 500px;
}
/* object */
object {
  width: 100%;
  height: 500px;
}

.color-default.footer-L,
.color-default.footer-R {
  background-color: transparent;
  border-top: 1px solid #eeeeee;
}
.color-default > .footer-text {
  color: rgba(0, 0, 0, 0.4);
}
.color-default > .footer-text span.direction {
  color: rgba(0, 0, 0, 0.2);
}
.moduleA1 h3,
.moduleA2 h3,
.moduleB1 h3,
.moduleC1 h3,
.moduleD1 h3,
.moduleE1 h3,
.moduleF1 h3,
.moduleG1 h3 {
  margin-bottom: 10px;
}

.center {
  position: absolute;
  top: -5px;
  left: -5px;
  width: calc(100% + 10px);
  height: calc(100% + 10px);
}
.center__circle {
  stroke: #999999;
  stroke-width: 0.7;
  fill: transparent;
  vector-effect: non-scaling-stroke;
}
.circle__arc {
  stroke: #999999;
  stroke-width: 0.7;
  fill: transparent;
  vector-effect: non-scaling-stroke;
}

#grid-cont {
  position: relative;
  background-color: transparent!important;
  padding-left: 0;
}
.header-wrapper {
  padding-left: 0;
}
.noninitial-chapter .header-wrapper .chapter-title .title-separator,
.header-wrapper.qp-ui-peekaboo.qp-ui-peekaboo-active .chapter-title .title-separator {
  margin: 0 0.75em 0 0.5em;
}
html body,
.moduleA1 .module-body p,
.moduleA2 .module-body p,
.moduleB1 .module-body p,
.moduleC1 .module-body p,
.moduleD1 .module-body p,
.moduleE1 .module-body p,
.moduleF1 .module-body p,
.moduleG1 .module-body p {
  color: #212121;
  font-size: 18px;
  line-height: 24px;
}
html body,
.moduleA1 .module-body li,
.moduleA2 .module-body li,
.moduleB1 .module-body li,
.moduleC1 .module-body li,
.moduleD1 .module-body li,
.moduleE1 .module-body li,
.moduleF1 .module-body li,
.moduleG1 .module-body li {
  color: #212121;
  font-size: 18px;
  line-height: 24px;
}
.moduleA1 h3,
.moduleA2 h3,
.moduleB1 h3,
.moduleC1 h3,
.moduleD1 h3,
.moduleE1 h3,
.moduleF1 h3,
.moduleG1 h3 {
  margin-bottom: 10px;
}
.moduleA1 h4,
.moduleA2 h4,
.moduleB1 h4,
.moduleC1 h4,
.moduleD1 h4,
.moduleE1 h4,
.moduleF1 h4,
.moduleG1 h4 {
  font-size: 13px;
  font-weight: 600;
  color: #212121;
}
.moduleA1 h5,
.moduleA2 h5,
.moduleB1 h5,
.moduleC1 h5,
.moduleD1 h5,
.moduleE1 h5,
.moduleF1 h5,
.moduleG1 h5 {
  margin-bottom: 0px;
}
.moduleA1 .figure-group .figure-row figcaption p,
.moduleA2 .figure-group .figure-row figcaption p,
.moduleB1 .figure-group .figure-row figcaption p,
.moduleC1 .figure-group .figure-row figcaption p,
.moduleD1 .figure-group .figure-row figcaption p,
.moduleE1 .figure-group .figure-row figcaption p,
.moduleF1 .figure-group .figure-row figcaption p,
.moduleG1 .figure-group .figure-row figcaption p {
  color: #757575;
}
.moduleA1 .figure-group .figure-row figcaption h3,
.moduleA2 .figure-group .figure-row figcaption h3,
.moduleB1 .figure-group .figure-row figcaption h3,
.moduleC1 .figure-group .figure-row figcaption h3,
.moduleD1 .figure-group .figure-row figcaption h3,
.moduleE1 .figure-group .figure-row figcaption h3,
.moduleF1 .figure-group .figure-row figcaption h3,
.moduleG1 .figure-group .figure-row figcaption h3 {
  color: #000000;
}
.moduleA1 .figure-group .figure-row,
.moduleA2 .figure-group .figure-row,
.moduleB1 .figure-group .figure-row,
.moduleC1 .figure-group .figure-row,
.moduleD1 .figure-group .figure-row,
.moduleE1 .figure-group .figure-row,
.moduleF1 .figure-group .figure-row,
.moduleG1 .figure-group .figure-row p {
  color: #757575;
}
.chapter .chapter-intro {
  font-size: 20px;
  color: #212121;
  width: 100%;
}
.article-title.qp-ui {
  padding-top: 50px!important;
  color: #E73C0E !important;
}
.article-content {
  padding-top: 35px;
}
.moduleTwoColumn figure .icon-header .article-title {
  padding-top: 24px;
}
.moduleTwoColumn figure .icon-header h3 {
  color: #000000 !important;
}
.moduleTwoColumn figure .icon-header img {
  width: initial !important;
}
.icon-header {
  margin-bottom: 32px;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  margin: 40px 0 24px;
  border-bottom: 1px solid #153B50;
}
.icon-header img {
  margin-right: 12px;
  height: 40px;
  margin-bottom: -30px;
}
.icon-header h3 {
  font-size: 24px;
  color: #000000;
}
#side-nav {
  visibility: hidden;
  -webkit-transform: translateX(-241px);
  -moz-transform: translateX(-241px);
  -ms-transform: translateX(-241px);
  -o-transform: translateX(-241px);
  transform: translateX(-241px);
}
#side-nav.qp-ui-side-nav-drawer-nogpu {
  -webkit-transform: translateX(0);
  -moz-transform: translateX(0);
  -ms-transform: translateX(0);
  -o-transform: translateX(0);
  transform: translateX(0);
  left: -241px;
}
footer .footer-L {
  -webkit-transform: translateX(0px);
  -moz-transform: translateX(0px);
  -ms-transform: translateX(0px);
  -o-transform: translateX(0px);
  transform: translateX(0px);
}
footer .footer-R {
  -webkit-transform: translateX(0px);
  -moz-transform: translateX(0px);
  -ms-transform: translateX(0px);
  -o-transform: translateX(0px);
  transform: translateX(0px);
}
@media screen and (min-width: 1480px) {
  .hamburger-button {
    display: block;
  }
}
footer {
  padding: 0 60px;
}
footer .footer-grid {
  margin: 0;
  width: 100%;
}
@media screen and (max-width: 1479px) {
  #grid-cont {
    padding-left: 0;
  }
}
.article-content {
  padding-top: 0px;
}
.article-content .module-list .compare__list {
  padding-left: 0 !important;
}
.article-content .module-list .compare__item {
  position: relative;
  padding-bottom: 40px;
  padding-left: 50px !important;
  margin-bottom: -4px;
}
.article-content .module-list .compare__item::before {
  position: absolute;
  top: 1;
  left: 15px;
  display: block;
  width: 1px;
  height: 100%;
  background: #57483A;
  content: '';
}
.article-content .module-list .compare__item:last-of-type::before {
  display: none;
}
.article-content .module-list .compare__item--number {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 30px;
  height: 30px;
  color: #57483A;
  font-weight: 700;
  text-align: center;
  line-height: 29px;
  background: #fff;
  border: 1px solid #57483A;
  border-radius: 20px;
  box-shadow: 2px 2px 7px 0 rgba(0, 0, 0, 0.2);
}
.article-content .module-list .compare__item--headline {
  color: #57483A !important;
  padding-top: 2px;
  margin-bottom: 10px;
  font-size: 1.5em !important;
  font-weight: 400 !important;
}
.article-content .module-list .compare__item--content {
  font-size: 15px;
  line-height: 24px;
}
.article-content .module-list .compare__item--list {
  padding-left: 20px;
  font-size: 16px;
  line-height: 24px;
}
.article-content .module-list .compare__item--list li {
  padding-bottom: 5px;
  margin-bottom: 0 !important;
}
.chapter .chapter-toc h1 {
  font-size: 15px;
  font-weight: 400;
  color: #757575;
}
.chapter-content .chapter-toc--2col ul {
  flex: 0;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}
.chapter-content .chapter-toc--2col ul li {
  flex-grow: 1;
  width: calc(50%);
}
.header-wrapper .header-title {
  color: #000000;
}
.hamburger-button .material-spec-icon {
  color: white;
}
.noninitial-chapter .header-wrapper,
.header-wrapper.qp-ui-peekaboo.qp-ui-peekaboo-active {
  padding-left: 0px;
}
.chapter .chapter-toc h1 {
  padding-bottom: 1px;
}
.hamburger-button .material-spec-icon:hover {
  color: white;
}
.hamburger-button {
  z-index: 3;
}
.noninitial-chapter header,
header.qp-ui-peekaboo.qp-ui-peekaboo-active {
  box-shadow: none;
}
#side-nav #logo {
  font-size: 26px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  background: linear-gradient(#456B80, #153B50) !important;
}
.splash-links {
  position: fixed;
  top: 50%;
  height: 50%;
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
.splash-links .splash-link__caption {
  color: #fffff7;
  text-shadow: 1px 1px rgba(0, 0, 0, 0.2);
  text-align: center;
  font-size: 24px;
}
.splash-links .splash-link__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: all cubic-bezier(0.215, 0.61, 0.355, 1) 0.3s;
}
.splash-links .splash-link__inner img {
  width: 100%;
  height: auto;
  margin-bottom: 10px;
}
.splash-links .splash-link__inner:hover {
  transform: scale(1.2);
  transition: all cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.3s;
}
.splash-links .splash-link__item {
  width: 7.2vw;
  transition: all cubic-bezier(0.215, 0.61, 0.355, 1) 0.6s;
  opacity: 1;
  transform: translateY(0);
}
.splash-links .splash-link__item:not(:first-child),
.splash-links .splash-link__item:not(:last-child) {
  margin: 0 6vw;
}
.splash-links .splash-link__item:nth-child(1) {
  transition-delay: 1.29s;
}
.splash-links .splash-link__item:nth-child(2) {
  transition-delay: 1.38s;
}
.splash-links .splash-link__item:nth-child(3) {
  transition-delay: 1.47s;
}
.splash-links--hidden .splash-link__item {
  transform: translateY(125px);
  opacity: 0;
}
/*colors*/
.color-master header {
  background-color: #E73C0E;
}
.color-master header.qp-ui-peekaboo.qp-ui-peekaboo-active {
  background-color: #E73C0E;
}
.color-master .header-wrapper .header-title {
  color: #FFFFFF;
}
.color-master .hamburger-button .material-spec-icon {
  color: black;
}
.color-master .chapter .chapter-toc {
  border-left-color: #E73C0E;
}
.color-master #side-nav nav a.nav_selected {
  color: white;
  text-decoration: underline;
}
.color-master .chapter .chapter-title {
  margin-top: 10px;
  margin-bottom: 65px;
  color: #E73C0E;
}
.color-master .chapter a {
  transition: 0.4s ease-out;
  cursor: pointer;
  border-bottom: 1px solid rgba(231, 60, 14, 0);
}
.color-master .chapter a {
  color: #E73C0E;
  transition: 0.4s ease-out;
  cursor: pointer;
  border-bottom: 0px solid rgba(231, 60, 14, 0);
}
.color-master .chapter a:hover {
  border-color: rgba(231, 60, 14, 0.3);
}
.color-master .chapter a:active {
  border-color: rgba(231, 60, 14, 0.6);
}
.color-master .article-title.qp-ui {
  color: #E73C0E !important;
}
#resources {
  color: white;
}
.color-yellow header {
  background-color: #fcb711;
}
.color-yellow header.qp-ui-peekaboo.qp-ui-peekaboo-active {
  background-color: #fcb711;
}
.color-yellow .header-wrapper .header-title {
  color: #FFFFFF;
}
.color-yellow .chapter .chapter-toc {
  border-left-color: #fcb711;
}
.color-yellow #side-nav nav a.nav_selected {
  color: white;
  text-decoration: underline;
}
.color-yellow .chapter .chapter-title {
  margin-top: 10px;
  margin-bottom: 65px;
  color: #fcb711;
}
.color-yellow .chapter a {
  transition: 0.4s ease-out;
  cursor: pointer;
  border-bottom: 1px solid rgba(231, 60, 14, 0);
}
.color-yellow .chapter a {
  color: #fcb711;
  transition: 0.4s ease-out;
  cursor: pointer;
  border-bottom: 0px solid rgba(252, 183, 17, 0);
}
.color-yellow .chapter a:hover {
  border-color: rgba(252, 183, 17, 0.3);
}
.color-yellow .chapter a:active {
  border-color: rgba(252, 183, 17, 0.6);
}
.color-yellow .article-title.qp-ui {
  color: #fcb711 !important;
}
.color-orange header {
  background-color: #f37021;
}
.color-orange header.qp-ui-peekaboo.qp-ui-peekaboo-active {
  background-color: #f37021;
}
.color-orange .header-wrapper .header-title {
  color: #FFFFFF;
}
.color-orange .chapter .chapter-toc {
  border-left-color: #f37021;
}
.color-orange #side-nav nav a.nav_selected {
  color: white;
  text-decoration: underline;
}
.color-orange .chapter .chapter-title {
  margin-top: 10px;
  margin-bottom: 65px;
  color: #f37021;
}
.color-orange .chapter a {
  transition: 0.4s ease-out;
  cursor: pointer;
  border-bottom: 1px solid rgba(231, 60, 14, 0);
}
.color-orange .chapter a {
  color: #f37021;
  transition: 0.4s ease-out;
  cursor: pointer;
  border-bottom: 0px solid rgba(243, 112, 33, 0);
}
.color-orange .chapter a:hover {
  border-color: rgba(243, 112, 33, 0.3);
}
.color-orange .chapter a:active {
  border-color: rgba(243, 112, 33, 0.6);
}
.color-orange .article-title.qp-ui {
  color: #f37021 !important;
}
.color-red header {
  background-color: #153B50;
}
.color-red header.qp-ui-peekaboo.qp-ui-peekaboo-active {
  background-color: #153B50;
}
.color-red .header-wrapper .header-title {
  color: #FFFFFF;
}
.color-red .chapter .chapter-toc {
  border-left-color: #153B50;
}
.color-red #side-nav nav a.nav_selected {
  color: white;
  text-decoration: none;
}
.color-red #side-nav nav a:hover,
.color-red #side-nav nav a:active,
.color-red #side-nav .menu__header:active {
  background-color: #286E90!important;
  color: white!important;
  text-decoration: none;
}
.color-red .menu__header:active {
  background-color: #286E90!important;
  color: white!important;
}
.color-red .chapter .chapter-title {
  margin-top: 10px;
  margin-bottom: 65px;
  color: #153B50;
}
.color-red .chapter a {
  transition: 0.4s ease-out;
  cursor: pointer;
  border-bottom: 1px solid rgba(231, 60, 14, 0);
}
.color-red .chapter a {
  color: #153B50;
  transition: 0.4s ease-out;
  cursor: pointer;
  border-bottom: 0px solid rgba(21, 59, 80, 0);
}
.color-red .chapter a:hover {
  border-color: rgba(21, 59, 80, 0.3);
}
.color-red .chapter a:active {
  border-color: rgba(21, 59, 80, 0.6);
}
.color-red .article-title.qp-ui {
  color: #153B50 !important;
}
.color-purple header {
  background-color: #6460aa;
}
.color-purple header.qp-ui-peekaboo.qp-ui-peekaboo-active {
  background-color: #6460aa;
}
.color-purple .header-wrapper .header-title {
  color: #FFFFFF;
}
.color-purple .chapter .chapter-toc {
  border-left-color: #6460aa;
}
.color-purple #side-nav nav a.nav_selected {
  color: white;
  text-decoration: underline;
}
.color-purple .chapter .chapter-title {
  margin-top: 10px;
  margin-bottom: 65px;
  color: #6460aa;
}
.color-purple .chapter a {
  transition: 0.4s ease-out;
  cursor: pointer;
  border-bottom: 1px solid rgba(231, 60, 14, 0);
}
.color-purple .chapter a {
  color: #6460aa;
  transition: 0.4s ease-out;
  cursor: pointer;
  border-bottom: 0px solid rgba(100, 96, 170, 0);
}
.color-purple .chapter a:hover {
  border-color: rgba(100, 96, 170, 0.3);
}
.color-purple .chapter a:active {
  border-color: rgba(100, 96, 170, 0.6);
}
.color-purple .article-title.qp-ui {
  color: #6460aa !important;
}
.color-blue header {
  background-color: #0089d0;
}
.color-blue header.qp-ui-peekaboo.qp-ui-peekaboo-active {
  background-color: #0089d0;
}
.color-blue .header-wrapper .header-title {
  color: #FFFFFF;
}
.color-blue .chapter .chapter-toc {
  border-left-color: #0089d0;
}
.color-blue #side-nav nav a.nav_selected {
  color: white;
  text-decoration: underline;
}
.color-blue .chapter .chapter-title {
  margin-top: 10px;
  margin-bottom: 65px;
  color: #0089d0;
}
.color-blue .chapter a {
  transition: 0.4s ease-out;
  cursor: pointer;
  border-bottom: 1px solid rgba(231, 60, 14, 0);
}
.color-blue .chapter a {
  color: #0089d0;
  transition: 0.4s ease-out;
  cursor: pointer;
  border-bottom: 0px solid rgba(0, 137, 208, 0);
}
.color-blue .chapter a:hover {
  border-color: rgba(0, 137, 208, 0.3);
}
.color-blue .chapter a:active {
  border-color: rgba(0, 137, 208, 0.6);
}
.color-blue .article-title.qp-ui {
  color: #0089d0 !important;
}
.color-green header {
  background-color: #0db14b;
}
.color-green header.qp-ui-peekaboo.qp-ui-peekaboo-active {
  background-color: #0db14b;
}
.color-green .header-wrapper .header-title {
  color: #FFFFFF;
}
.color-green .chapter .chapter-toc {
  border-left-color: #0db14b;
}
.color-green #side-nav nav a.nav_selected {
  color: white;
  text-decoration: underline;
}
.color-green .chapter .chapter-title {
  margin-top: 10px;
  margin-bottom: 65px;
  color: #0db14b;
}
.color-green .chapter a {
  transition: 0.4s ease-out;
  cursor: pointer;
  border-bottom: 1px solid rgba(231, 60, 14, 0);
}
.color-green .chapter a {
  color: #0db14b;
  transition: 0.4s ease-out;
  cursor: pointer;
  border-bottom: 0px solid rgba(13, 177, 75, 0);
}
.color-green .chapter a:hover {
  border-color: rgba(13, 177, 75, 0.3);
}
.color-green .chapter a:active {
  border-color: rgba(13, 177, 75, 0.6);
}
.color-green .article-title.qp-ui {
  color: #0db14b !important;
}
.color-chiller header {
  background-color: white;
}
.color-chiller header.qp-ui-peekaboo.qp-ui-peekaboo-active {
  background-color: #be1f36;
}
.color-chiller .header-wrapper .header-title {
  color: #FFFFFF;
}
.color-chiller .hamburger-button .material-spec-icon {
  color: black;
}
.color-chiller .chapter .chapter-toc {
  border-left-color: #be1f36;
}
.color-chiller #side-nav nav a.nav_selected {
  color: white;
  text-decoration: underline;
}
.color-chiller .chapter .chapter-title {
  margin-top: 10px;
  margin-bottom: 65px;
  color: #be1f36;
}
.color-chiller .chapter a {
  transition: 0.4s ease-out;
  cursor: pointer;
  border-bottom: 1px solid rgba(231, 60, 14, 0);
}
.color-chiller .chapter a {
  color: #be1f36;
  transition: 0.4s ease-out;
  cursor: pointer;
  border-bottom: 0px solid rgba(190, 31, 54, 0);
}
.color-chiller .chapter a:hover {
  border-color: rgba(190, 31, 54, 0.3);
}
.color-chiller .chapter a:active {
  border-color: rgba(190, 31, 54, 0.6);
}
.color-chiller .article-title.qp-ui {
  color: #be1f36 !important;
}
#side-nav .single {
  padding: 10px 24px 10px 22px;
  font-weight: 700;
}
.menu-main-header {
  float: right;
  font-size: 26px;
  color: white;
  font-weight: 800;
  text-align: center;
  width: 100%;
}
.menu-main-header h5 {
  font-weight: 400;
  font-size: 19px;
}
.menu-header-link {
  color: #333;
}
.menu-header-link:hover {
  color: #333;
}
.menu-header-img {
  height: 32px !important;
  float: left;
}
.chapter-nav {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
}
@media screen and (max-width: 1240px) {
  .chapter-nav {
    flex-direction: column;
    align-items: flex-start;
  }
}
.chapter-content a.tile {
  box-shadow: 2px 2px 4px 0 rgba(0, 0, 0, 0.2);
  transform: translate3d(0, 0, 0);
  transition: transform cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.2s, opacity ease-in-out 0.2s !important;
  border-radius: 0 !important;
  border: 1px solid #EDF0F4;
}
.chapter-content a.tile:hover {
  transform: translate3d(-2px, -2px, 0);
}
.chapter-content input:checked + .tile:after {
  border-bottom-color: #171717;
}
.chapter-content .tile {
  background: #242424;
}
.chapter-content .tile h3 {
  color: #000000;
}
.chapter-content .tile-grid .tile {
  background: #F3F3F3;
}
.chapter-content .tile-grid .tile h3 {
  color: #000000;
}
.chapter-content .tile-grid .tile h4 {
  color: #949494;
}
.chapter-content .tile-grid .tile--white {
  background: #2e2e2e;
}
.padding-body {
  padding: 5px !important;
}
.content_twocolumn {
  padding-right: 30px;
}
.content_twocolumn p {
  color: black!important;
  display: inline;
}
@media screen and (min-width: 1200px) {
  .content_twocolumn ol,
  .usertesting_column ol,
  .content_twocolumn ul,
  .usertesting_column ul {
    list-style-position: outside!important;
  }
  .content_twocolumn p,
  .usertesting_column p {
    display: inline;
  }
}
@media screen and (min-width: 1241px) {
  .content_twocolumn ol,
  .usertesting_column ol,
  .content_twocolumn ul,
  .usertesting_column ul {
    list-style-position: inside!important;
  }
  .content_twocolumn ol li,
  .usertesting_column ol li,
  .content_twocolumn ul li,
  .usertesting_column ul li {
    margin-bottom: 10px;
  }
  .content_twocolumn p,
  .usertesting_column p {
    display: inline;
  }
}
.module-body ol li {
  margin-bottom: 10px;
}
/*line drawing*/
.anim {
  position: absolute;
  top: 0px;
  width: 100%;
  height: 100%;
}
.anim svg {
  position: relative;
  width: 100%;
  height: 100%;
}
.anim path {
  stroke-width: 2;
}
.usertesting_column {
  font-family: "RobotoDraft", "Roboto", sans-serif;
}
.usertesting_column h2 {
  color: #153B50 !important;
  margin-top: 20px!important;
  font-size: 25px;
}
.usertesting_column ul li p {
  color: #212121;
  font-size: 18px;
  line-height: 24px;
  display: inline;
}
.usertesting_column h3 {
  margin-top: 20px;
}
.footer-text {
  transition: 0.5s;
}
.footer-text:hover {
  color: #153B50;
}
#persona h2 {
  margin-bottom: 15px;
}
/* SIDESHOW IDEATION  START*/
* {
  box-sizing: border-box;
}
/* Slideshow container */
.slideshow-container {
  max-width: 1000px;
  position: relative;
  margin: auto;
}
/* Hide the images by default */
.mySlides {
  display: none;
}
/* Next & previous buttons */
.prev,
.next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  margin-top: -22px;
  padding: 16px;
  color: white;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
}
/* Position the "next button" to the right */
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}
/* On hover, add a black background color with a little bit see-through */
.prev:hover,
.next:hover {
  background-color: rgba(0, 0, 0, 0.8);
}
/* Caption text */
.text {
  color: #f2f2f2;
  font-size: 15px;
  padding: 8px 12px;
  position: absolute;
  bottom: 8px;
  width: 100%;
  text-align: center;
}
/* Number text (1/3 etc) */
.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}
/* The dots/bullets/indicators */
.dot {
  cursor: pointer;
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}
.active,
.dot:hover {
  background-color: #717171;
}
/* Fading animation */
.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 1.5s;
  animation-name: fade;
  animation-duration: 1.5s;
}
@-webkit-keyframes fade {
  from {
    opacity: 0.4;
  }
  to {
    opacity: 1;
  }
}
@keyframes fade {
  from {
    opacity: 0.4;
  }
  to {
    opacity: 1;
  }
}
/* SIDESHOW IDEATION END */
.overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.15);
}
footer a:active {
  border-color: white!important;
}
.footer-text:focus {
  outline: none!important;
}
.chapter-content a:focus {
  border: none!important;
}
.sub-headline {
  position: fixed;
  top: 0;
  color: white;
  margin-top: 55vh;
  font-family: "RobotoDraft", "Roboto", sans-serif;
  font-size: 4vw;
  letter-spacing: 3px;
  display: block;
  text-align: center;
  width: 100vw;
  font-style: italic;
  -webkit-animation: fadein 4s;
  /* Safari, Chrome and Opera > 12.1 */
  -moz-animation: fadein 4s;
  /* Firefox < 16 */
  -ms-animation: fadein 4s;
  /* Internet Explorer */
  -o-animation: fadein 4s;
  /* Opera < 12.1 */
  animation: fadein 4s;
}
.sub-headline-zero {
  opacity: 0;
}
@keyframes fadein {
  0% {
    opacity: 0;
  }
  40% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
/* Firefox < 16 */
@-moz-keyframes fadein {
  0% {
    opacity: 0;
  }
  40% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadein {
  0% {
    opacity: 0;
  }
  40% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
/* Internet Explorer */
@-ms-keyframes fadein {
  0% {
    opacity: 0;
  }
  40% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
/* Opera < 12.1 */
@-o-keyframes fadein {
  0% {
    opacity: 0;
  }
  40% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@media screen and (min-width: 800px) {
  .sub-headline {
    margin-top: 60vh;
  }
}
@media screen and (min-width: 1200px) {
  .sub-headline {
    font-size: 3vw;
    margin-top: 63vh;
  }
}

.timeline {
  position: absolute;
  top: 0%;
  left: 0%;
  width: 100%;
  height: 100%;
  max-height: 100%;
  overflow-y: hidden;
  overflow-x: hidden;
  z-index: 100;
  font-size: 14px;
}
.timeline-inner {
  position: absolute;
  width: 100vw;
  height: 100vh;
  -webkit-transition: left 0.7s;
  -moz-transition: left 0.7s;
  transition: left 0.7s;
  z-index: 10;
}
.timeline-title {
  position: fixed;
  z-index: 0;
  top: 60px;
  left: 60px;
  font-size: 20px;
  z-index: 11;
  opacity: 0.5;
  text-transform: uppercase;
  -webkit-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
  color: #153B50 !important;
}
@media screen and (min-width: 1800px) {
  .timeline-title {
    top: 90px;
    font-size: 28px;
    line-height: 32px;
  }
}
.timeline-title p:first-child {
  font-weight: 600;
}
.timeline-title p:last-child {
  font-weight: 300;
}
.timeline-background {
  position: absolute;
  width: 100vw;
  height: 100vh;
  -webkit-transition: background-position 0.7s;
  -moz-transition: background-position 0.7s;
  transition: background-position 0.7s;
  background-image: url("../imgs/user-journeys/skyline-silouette3.svg");
  opacity: 0.08;
  background-repeat: repeat-x;
  background-size: auto 100%;
  background-attachment: fixed;
}
.timeline-controls {
  position: fixed;
  top: 36px;
  right: 0px;
  z-index: 50;
  display: -webkit-box;
  display: -moz-box;
  display: box;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -moz-box-align: center;
  box-align: center;
  -webkit-align-items: center;
  -moz-align-items: center;
  -ms-align-items: center;
  -o-align-items: center;
  align-items: center;
  -ms-flex-align: center;
  background: rgba(255, 255, 255, 0.9);
  padding: 10px;
  box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.1);
}
.timeline-controls__next,
.timeline-controls__back,
.timeline-controls__zoom-in,
.timeline-controls__zoom-out {
  font-size: 20px;
  -webkit-transition: color 0.4s;
  -moz-transition: color 0.4s;
  transition: color 0.4s;
  cursor: pointer;
  color: rgba(0, 0, 0, 0.4);
  margin: 0px 5px;
  position: relative;
  top: 0px;
}
.timeline-controls__next:hover,
.timeline-controls__back:hover,
.timeline-controls__zoom-in:hover,
.timeline-controls__zoom-out:hover {
  color: #f9b01d;
}
.timeline-controls__next:active,
.timeline-controls__back:active,
.timeline-controls__zoom-in:active,
.timeline-controls__zoom-out:active {
  top: 1px;
}
.timeline-controls__next.timeline-controls--hidden,
.timeline-controls__back.timeline-controls--hidden,
.timeline-controls__zoom-in.timeline-controls--hidden,
.timeline-controls__zoom-out.timeline-controls--hidden {
  color: rgba(0, 0, 0, 0.1);
  cursor: auto;
  top: 0px;
}
.timeline-controls__separator {
  width: 1px;
  margin: 0px 5px;
  height: 20px;
  background: #ddd;
}
.timeline-phases {
  position: absolute;
  top: 0%;
  left: 0%;
  height: 36px;
  background: #153B50;
  white-space: nowrap;
  z-index: 50;
  display: -webkit-box;
  display: -moz-box;
  display: box;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: start;
  -moz-box-pack: start;
  box-pack: start;
  -webkit-justify-content: flex-start;
  -moz-justify-content: flex-start;
  -ms-justify-content: flex-start;
  -o-justify-content: flex-start;
  justify-content: flex-start;
  -ms-flex-pack: start;
  -webkit-box-align: center;
  -moz-box-align: center;
  box-align: center;
  -webkit-align-items: center;
  -moz-align-items: center;
  -ms-align-items: center;
  -o-align-items: center;
  align-items: center;
  -ms-flex-align: center;
}
.timeline-phases__item {
  width: 20vw;
  padding: 0px 20px;
  height: 100%;
  position: relative;
  display: -webkit-box;
  display: -moz-box;
  display: box;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -moz-box-align: center;
  box-align: center;
  -webkit-align-items: center;
  -moz-align-items: center;
  -ms-align-items: center;
  -o-align-items: center;
  align-items: center;
  -ms-flex-align: center;
  -webkit-transition: width 0.4s;
  -moz-transition: width 0.4s;
  transition: width 0.4s;
}
.timeline-phases__item svg {
  position: absolute;
  left: -30px;
}
.timeline-phases__item path {
  stroke-width: 4px;
  stroke: white;
  fill: transparent;
}
.timeline-phase__end {
  position: absolute;
  right: 0px;
  top: 0px;
  height: 100%;
  display: -webkit-box;
  display: -moz-box;
  display: box;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -moz-box-align: center;
  box-align: center;
  -webkit-align-items: center;
  -moz-align-items: center;
  -ms-align-items: center;
  -o-align-items: center;
  align-items: center;
  -ms-flex-align: center;
  padding: 0px 20px;
}
.timeline-phase__title {
  font-weight: 700;
  text-transform: uppercase;
  color: #FFF;
}
.timeline-phases__item--floating .timeline-phase__title {
  position: fixed;
  top: 0px;
  height: 36px;
  line-height: 36px;
  left: 20px;
}
.timeline--big-view .timeline-phase__title-ext {
  display: none;
}
.timeline-graph {
  position: absolute;
  top: 60vh;
  left: 0%;
  height: 40vh;
  min-width: 100vw;
  opacity: 1;
}
.timeline-graph__key {
  position: fixed;
  top: 60vh;
  left: 0%;
  height: 40vh;
  border-left: 5px solid #f9b01d;
}
.timeline-graph__key-title {
  font-size: 30px;
  padding: 20px;
  position: absolute;
  bottom: 100%;
  color: #f9b01d;
  white-space: nowrap;
}
.timeline-graph__key-top,
.timeline-graph__key-bottom,
.timeline-graph__key-middle {
  position: absolute;
  left: 0px;
  padding: 7px;
  font-size: 12px;
  white-space: nowrap;
}
.timeline-graph__key-top:before,
.timeline-graph__key-bottom:before,
.timeline-graph__key-middle:before {
  content: "";
  width: 10px;
  height: 1px;
  background: #f9b01d;
  position: absolute;
  top: 0px;
  left: 0px;
}
.timeline-graph__key-middle {
  top: 50%;
  position: relative;
  line-height: 30px;
  margin-top: -15px;
  padding: 0px 0px 0px 20px;
}
.timeline-graph__key-middle:before {
  bottom: auto;
  top: 50%;
}
.timeline-graph__key-top {
  top: 0px;
}
.timeline-graph__key-bottom {
  bottom: 0px;
}
.timeline-graph__key-bottom:before {
  bottom: 0px;
  top: auto;
}
.timeline-graph__svg {
  overflow: visible;
  position: relative;
  top: 2px;
}
.timeline-graph__area {
  stroke: #000000;
  stroke-width: 1.5;
  stroke-dasharray: 5;
}
.timeline__empty-point {
  fill: #000000;
}
.timeline-graph__point circle {
  fill: purple;
  stroke: purple;
  stroke-width: 1;
  -webkit-transition: stroke-width 0.3s;
  -moz-transition: stroke-width 0.3s;
  transition: stroke-width 0.3s;
  cursor: pointer;
}
.timeline-graph__point text {
  width: 20px;
  height: 20px;
  text-align: center;
  opacity: 0;
  cursor: pointer;
  -webkit-transition: opacity 0.3s;
  -moz-transition: opacity 0.3s;
  transition: opacity 0.3s;
}
.timeline-graph__point:hover circle {
  stroke-width: 10;
}
.timeline-graph__point:hover text {
  opacity: 1;
}
.timeline-graph__point:nth-child(1) {
  -webkit-transform: translateY(0px);
  -moz-transform: translateY(0px);
  -ms-transform: translateY(0px);
  -o-transform: translateY(0px);
  transform: translateY(0px);
}
.timeline-graph__point:nth-child(2) {
  -webkit-transform: translateY(-25px);
  -moz-transform: translateY(-25px);
  -ms-transform: translateY(-25px);
  -o-transform: translateY(-25px);
  transform: translateY(-25px);
}
.timeline-graph__point:nth-child(3) {
  -webkit-transform: translateY(-50px);
  -moz-transform: translateY(-50px);
  -ms-transform: translateY(-50px);
  -o-transform: translateY(-50px);
  transform: translateY(-50px);
}
.timeline-graph__point:nth-child(4) {
  -webkit-transform: translateY(-75px);
  -moz-transform: translateY(-75px);
  -ms-transform: translateY(-75px);
  -o-transform: translateY(-75px);
  transform: translateY(-75px);
}
.timeline-graph__point:nth-child(5) {
  -webkit-transform: translateY(-100px);
  -moz-transform: translateY(-100px);
  -ms-transform: translateY(-100px);
  -o-transform: translateY(-100px);
  transform: translateY(-100px);
}
.timeline-graph__point:nth-child(6) {
  -webkit-transform: translateY(-125px);
  -moz-transform: translateY(-125px);
  -ms-transform: translateY(-125px);
  -o-transform: translateY(-125px);
  transform: translateY(-125px);
}
.timeline-graph__point:nth-child(7) {
  -webkit-transform: translateY(-150px);
  -moz-transform: translateY(-150px);
  -ms-transform: translateY(-150px);
  -o-transform: translateY(-150px);
  transform: translateY(-150px);
}
.timeline-graph__point:nth-child(8) {
  -webkit-transform: translateY(-175px);
  -moz-transform: translateY(-175px);
  -ms-transform: translateY(-175px);
  -o-transform: translateY(-175px);
  transform: translateY(-175px);
}
.timeline-graph__point:nth-child(9) {
  -webkit-transform: translateY(-200px);
  -moz-transform: translateY(-200px);
  -ms-transform: translateY(-200px);
  -o-transform: translateY(-200px);
  transform: translateY(-200px);
}
.timeline-graph__point:nth-child(10) {
  -webkit-transform: translateY(-225px);
  -moz-transform: translateY(-225px);
  -ms-transform: translateY(-225px);
  -o-transform: translateY(-225px);
  transform: translateY(-225px);
}
.timeline-graph__point:nth-child(11) {
  -webkit-transform: translateY(-250px);
  -moz-transform: translateY(-250px);
  -ms-transform: translateY(-250px);
  -o-transform: translateY(-250px);
  transform: translateY(-250px);
}
.timeline-graph__i {
  stroke: #FFF;
  fill: #FFF;
}
.timeline-info-wrapper {
  position: absolute;
  top: 36px;
  left: 0vw;
  height: calc(100vh - 36px);
  display: -webkit-box;
  display: -moz-box;
  display: box;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: start;
  -moz-box-pack: start;
  box-pack: start;
  -webkit-justify-content: flex-start;
  -moz-justify-content: flex-start;
  -ms-justify-content: flex-start;
  -o-justify-content: flex-start;
  justify-content: flex-start;
  -ms-flex-pack: start;
  -webkit-box-align: stretch;
  -moz-box-align: stretch;
  box-align: stretch;
  -webkit-align-items: stretch;
  -moz-align-items: stretch;
  -ms-align-items: stretch;
  -o-align-items: stretch;
  align-items: stretch;
  -ms-flex-align: stretch;
}
.timeline-step {
  text-align: center;
  position: relative;
  -webkit-transition: min-width 0.4s;
  -moz-transition: min-width 0.4s;
  transition: min-width 0.4s;
  max-height: 100vh;
}
.timeline-step:last-child .time-step__arrow {
  display: none;
}
.timeline-step:after {
  content: "";
  width: 1px;
  border-left: 1px dashed rgba(0, 0, 0, 0.5);
  height: 100vh;
  position: absolute;
  left: 50%;
  top: 0px;
  opacity: 0;
  -webkit-transition: opacity 0.4s;
  -moz-transition: opacity 0.4s;
  transition: opacity 0.4s;
}
.timeline-step--hover:after {
  opacity: 1;
}
.timeline-step__inner {
  top: 6vh;
  height: 40vh;
  display: -webkit-box;
  display: -moz-box;
  display: box;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -moz-box-pack: center;
  box-pack: center;
  -webkit-justify-content: center;
  -moz-justify-content: center;
  -ms-justify-content: center;
  -o-justify-content: center;
  justify-content: center;
  -ms-flex-pack: center;
  -webkit-box-align: center;
  -moz-box-align: center;
  box-align: center;
  -webkit-align-items: center;
  -moz-align-items: center;
  -ms-align-items: center;
  -o-align-items: center;
  align-items: center;
  -ms-flex-align: center;
  position: relative;
  color: #666;
}
.timeline-step__box {
  position: relative;
  z-index: 10;
  min-width: 100%;
}
.time-step__icon {
  z-index: 10;
  position: relative;
}
.time-step__icon img {
  width: 90px;
  height: 90px;
  display: block;
  margin: 0px auto 0px;
}
.time-step__number {
  color: #FFF;
  width: 25px;
  height: 25px;
  background: #f9b01d;
  border-radius: 50%;
  line-height: 25px;
  font-weight: 700;
  margin: 10px auto 20px;
  position: absolute;
  top: 120%;
  left: 50%;
  -webkit-transform: translateX(-50%);
  -moz-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  -o-transform: translateX(-50%);
  transform: translateX(-50%);
}
.time-step__content {
  position: absolute;
  width: 100%;
  text-align: center;
  top: 140%;
  margin-top: 40px;
  padding: 0px 20px;
}
@media screen and (min-width: 1800px) {
  .time-step__content {
    font-size: 18px;
    line-height: 28px;
  }
}
.timeline--big-view .time-step__content {
  display: none;
}
.time-step__content > * {
  max-width: 300px;
  margin: 0px auto;
}
.time-step__arrow {
  width: 100%;
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
  background: transparent !important;
  border: 4px double #48B1E5;
}
.time-step__arrow-border {
  border-style: dashed;
}
.timeline-step__key {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 40vh;
  opacity: 0;
}
.timeline-step--hover .timeline-step__key {
  opacity: 1;
}
.timeline-step__key-top {
  text-align: center;
  width: 160px;
  position: absolute;
  top: -30px;
  left: 50%;
  margin-left: -80px;
  height: 30px;
  padding-bottom: 10px;
  border-bottom: 1px solid #AAA;
  opacity: 0;
  display: none;
  -webkit-transition: opacity 0.4s;
  -moz-transition: opacity 0.4s;
  transition: opacity 0.4s;
  font-size: 20px;
  color: #333;
}
.timeline-step--hover .timeline-step__key-top {
  opacity: 1;
}
.timeline-step__key-inner {
  width: 20%;
  height: 100%;
  border-top: 4px solid #DDD;
  border-bottom: 4px solid #DDD;
  margin: 0px auto;
  display: none;
  opacity: 0;
  -webkit-transition: opacity 0.4s;
  -moz-transition: opacity 0.4s;
  transition: opacity 0.4s;
}
.timeline-step__key-inner:after {
  content: "";
  width: 4px;
  height: 100%;
  background: #DDD;
  left: 50%;
  margin-left: -2px;
  position: absolute;
  top: 0%;
}
.timeline-step--hover .timeline-step__key-inner {
  opacity: 1;
}
.timeline-step__key-bubble {
  position: absolute;
  right: 56%;
  -webkit-transform: translateY(-50%) scale(0.5);
  -moz-transform: translateY(-50%) scale(0.5);
  -ms-transform: translateY(-50%) scale(0.5);
  -o-transform: translateY(-50%) scale(0.5);
  transform: translateY(-50%) scale(0.5);
  -webkit-transform-origin: 100% 50%;
  -moz-transform-origin: 100% 50%;
  -ms-transform-origin: 100% 50%;
  -o-transform-origin: 100% 50%;
  transform-origin: 100% 50%;
  -webkit-transition: -webkit-transform 0.4s, opacity 0.4s;
  -moz-transition: -moz-transform 0.4s, opacity 0.4s;
  -webkit-transition: opacity 0.4s, -webkit-transform 0.4s;
  transition: opacity 0.4s, -webkit-transform 0.4s;
  transition: transform 0.4s, opacity 0.4s;
  transition: transform 0.4s, opacity 0.4s, -webkit-transform 0.4s;
  background: #FFF;
  padding: 10px;
  border-radius: 4px;
  opacity: 0;
  box-shadow: 0px 0px 6px 1px rgba(0, 0, 0, 0.1);
  z-index: 200;
}
.timeline-step--hover .timeline-step__key-bubble {
  -webkit-transform: translateY(-50%) scale(1);
  -moz-transform: translateY(-50%) scale(1);
  -ms-transform: translateY(-50%) scale(1);
  -o-transform: translateY(-50%) scale(1);
  transform: translateY(-50%) scale(1);
  opacity: 1;
}
.timeline-step--too-low .timeline-step__key-bubble {
  right: 50%;
  margin-top: -30px;
  -webkit-transform: translate(50%, 0%) scale(0.5);
  -moz-transform: translate(50%, 0%) scale(0.5);
  -ms-transform: translate(50%, 0%) scale(0.5);
  -o-transform: translate(50%, 0%) scale(0.5);
  transform: translate(50%, 0%) scale(0.5);
  -webkit-transform-origin: 50% 100%;
  -moz-transform-origin: 50% 100%;
  -ms-transform-origin: 50% 100%;
  -o-transform-origin: 50% 100%;
  transform-origin: 50% 100%;
}
.timeline-step--too-low.timeline-step--hover .timeline-step__key-bubble {
  -webkit-transform: translate(50%, 0%) scale(1);
  -moz-transform: translate(50%, 0%) scale(1);
  -ms-transform: translate(50%, 0%) scale(1);
  -o-transform: translate(50%, 0%) scale(1);
  transform: translate(50%, 0%) scale(1);
}
.empathy-title {
  font-weight: 400;
  font-size: 12px;
  letter-spacing: 1px;
  z-index: 12;
  margin: -10px 0 5px;
  line-height: 16px;
  color: #727680;
}
.timeline-step__key-percent {
  opacity: 0.8;
  font-weight: 400;
  font-size: 14px;
  margin-top: 0px;
  color: #131619;
  /*
  >div:first-child {
    font-size: 36px;
    margin-bottom: 5px;
  }
  >div:last-child {
    font-size: 12px;
  }
  */
}
.timeline-step__key-percent > div {
  display: inline;
}
.timeline-step__key-triangle {
  position: absolute;
  left: 100%;
  top: 50%;
  width: 10px;
  height: 20px;
  margin-top: -10px;
}
.timeline-step__key-triangle path {
  stroke-width: 8px;
  fill: #FFF;
}
.timeline-step--too-low .timeline-step__key-triangle {
  top: 100%;
  left: 50%;
  margin-left: -5px;
  margin-top: -7px;
  -webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  -o-transform: rotate(90deg);
  transform: rotate(90deg);
}
.timeline-step__key-emoji {
  width: 40px;
  height: 40px;
  display: block;
  margin: 0px auto;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  margin-top: 35px;
}
.timeline-step__key-emoji-1 .timeline-step__key-emoji {
  background-image: url("../imgs/user-journeys/emoji-1.svg");
}
.timeline-step__key-emoji:nth-child(2) {
  -webkit-transform: translateY(-25px);
  -moz-transform: translateY(-25px);
  -ms-transform: translateY(-25px);
  -o-transform: translateY(-25px);
  transform: translateY(-25px);
}
.timeline-step__key-emoji-2 .timeline-step__key-emoji {
  background-image: url("../imgs/user-journeys/emoji-2.svg");
}
.timeline-step__key-emoji:nth-child(3) {
  -webkit-transform: translateY(-50px);
  -moz-transform: translateY(-50px);
  -ms-transform: translateY(-50px);
  -o-transform: translateY(-50px);
  transform: translateY(-50px);
}
.timeline-step__key-emoji-3 .timeline-step__key-emoji {
  background-image: url("../imgs/user-journeys/emoji-3.svg");
}
.timeline-step__key-emoji:nth-child(4) {
  -webkit-transform: translateY(-75px);
  -moz-transform: translateY(-75px);
  -ms-transform: translateY(-75px);
  -o-transform: translateY(-75px);
  transform: translateY(-75px);
}
.timeline-step__key-emoji-4 .timeline-step__key-emoji {
  background-image: url("../imgs/user-journeys/emoji-4.svg");
}
.timeline-step__key-emoji:nth-child(5) {
  -webkit-transform: translateY(-100px);
  -moz-transform: translateY(-100px);
  -ms-transform: translateY(-100px);
  -o-transform: translateY(-100px);
  transform: translateY(-100px);
}
.timeline-step__key-emoji-5 .timeline-step__key-emoji {
  background-image: url("../imgs/user-journeys/emoji-5.svg");
}
.timeline-step__key-emoji:nth-child(6) {
  -webkit-transform: translateY(-125px);
  -moz-transform: translateY(-125px);
  -ms-transform: translateY(-125px);
  -o-transform: translateY(-125px);
  transform: translateY(-125px);
}
.timeline-step__key-emoji-6 .timeline-step__key-emoji {
  background-image: url("../imgs/user-journeys/emoji-6.svg");
}
.timeline-step__key-emoji:nth-child(7) {
  -webkit-transform: translateY(-150px);
  -moz-transform: translateY(-150px);
  -ms-transform: translateY(-150px);
  -o-transform: translateY(-150px);
  transform: translateY(-150px);
}
.timeline-step__key-emoji-7 .timeline-step__key-emoji {
  background-image: url("../imgs/user-journeys/emoji-7.svg");
}
.timeline-step__key-emoji:nth-child(8) {
  -webkit-transform: translateY(-175px);
  -moz-transform: translateY(-175px);
  -ms-transform: translateY(-175px);
  -o-transform: translateY(-175px);
  transform: translateY(-175px);
}
.timeline-boxes__wrapper {
  width: 600px;
  height: 600px;
  -webkit-perspective: 1000px;
  perspective: 1000px;
  z-index: 84;
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 81;
  margin-left: -300px;
  margin-top: -300px;
  -webkit-transform: scale(0.05);
  -moz-transform: scale(0.05);
  -ms-transform: scale(0.05);
  -o-transform: scale(0.05);
  transform: scale(0.05);
  -webkit-transform-origin: 50% 50%;
  -moz-transform-origin: 50% 50%;
  -ms-transform-origin: 50% 50%;
  -o-transform-origin: 50% 50%;
  transform-origin: 50% 50%;
  visibility: hidden;
}
.timeline-box--open-start .timeline-boxes__wrapper,
.timeline-box--opening .timeline-boxes__wrapper,
.timeline-box--close-start .timeline-boxes__wrapper,
.timeline-box--closing .timeline-boxes__wrapper {
  -webkit-transition: -webkit-transform 0.5s, top 0.5s, left 0.5s;
  -moz-transition: -moz-transform 0.5s, top 0.5s, left 0.5s;
  -webkit-transition: top 0.5s, left 0.5s, -webkit-transform 0.5s;
  transition: top 0.5s, left 0.5s, -webkit-transform 0.5s;
  transition: transform 0.5s, top 0.5s, left 0.5s;
  transition: transform 0.5s, top 0.5s, left 0.5s, -webkit-transform 0.5s;
}
.timeline-box--open-start .timeline-boxes__wrapper {
  -webkit-transform: scale(0.05);
  -moz-transform: scale(0.05);
  -ms-transform: scale(0.05);
  -o-transform: scale(0.05);
  transform: scale(0.05);
  visibility: visible;
}
.timeline-box--opening .timeline-boxes__wrapper,
.timeline-box--open-finish .timeline-boxes__wrapper {
  -webkit-transform: scale(1);
  -moz-transform: scale(1);
  -ms-transform: scale(1);
  -o-transform: scale(1);
  transform: scale(1);
  visibility: visible;
}
.timeline-box--close-start .timeline-boxes__wrapper,
.timeline-box--closing .timeline-boxes__wrapper {
  -webkit-transform: scale(0.05);
  -moz-transform: scale(0.05);
  -ms-transform: scale(0.05);
  -o-transform: scale(0.05);
  transform: scale(0.05);
  visibility: visible;
}
.timeline-box--close-finish .timeline-boxes__wrapper {
  visibility: hidden;
}
@media (max-width: 500px) {
  .timeline-boxes__wrapper {
    width: 100%;
    margin-left: -50%;
  }
}
.timeline-detail__close {
  position: absolute;
  top: 15px;
  right: 15px;
  z-index: 10;
  font-size: 25px;
  cursor: pointer;
}
.timeline-detail__close i {
  width: 30px;
  height: 30px;
  display: block;
  text-align: center;
  line-height: 30px;
  color: rgba(0, 0, 0, 0.4);
  -webkit-transition: color 0.3s;
  -moz-transition: color 0.3s;
  transition: color 0.3s;
}
.timeline-detail__close i:hover {
  color: #333;
}
.timeline-content {
  -webkit-transition: opacity 0.4s;
  -moz-transition: opacity 0.4s;
  transition: opacity 0.4s;
  opacity: 0;
  padding: 80px 40px;
  text-align: center;
}
.timeline-box--open-finish .timeline-content {
  opacity: 1;
}
.timeline-box--close-start .timeline-content {
  opacity: 0;
}
.timeline-content:after,
.timeline-content:before {
  content: "";
  display: block;
  position: absolute;
  bottom: 0px;
  left: 20px;
  right: 20px;
  height: 10px;
  z-index: 5;
  background-color: rgba(255, 255, 255, 0);
  background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0) 0%, white 80%, white 100%);
  background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, white 80%, white 100%);
}
.timeline-content:after {
  bottom: 110px;
}
.timeline-content:before {
  top: 0px;
  bottom: auto;
  height: 0;
  background-color: rgba(255, 255, 255, 0);
  background-image: -webkit-linear-gradient(bottom, rgba(255, 255, 255, 0) 0%, white 50%, white 100%);
  background-image: linear-gradient(to top, rgba(255, 255, 255, 0) 0%, white 50%, white 100%);
}
.timeline-content__scroll {
  padding: 30px 30px;
  max-height: 440px;
  overflow-y: auto;
}
.timeline-detail__description b {
  margin-bottom: 10px;
  font-weight: 500;
  font-size: 16px;
  color: #333;
}
.timeline-boxes__flipper {
  width: 100%;
  height: 100%;
  position: relative;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-transition: -webkit-transform 0.4s;
  -moz-transition: -moz-transform 0.4s;
  transition: -webkit-transform 0.4s;
  transition: transform 0.4s;
  transition: transform 0.4s, -webkit-transform 0.4s;
}
.timeline-box--show-category .timeline-boxes__flipper {
  -webkit-transform: rotateY(180deg);
  transform: rotateY(180deg);
}
.timeline-detail__box,
.timeline-category__box {
  background: #FFF;
  color: #333;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  position: absolute;
  top: 0px;
  left: 0px;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  display: -webkit-box;
  display: -moz-box;
  display: box;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -moz-box-pack: center;
  box-pack: center;
  -webkit-justify-content: center;
  -moz-justify-content: center;
  -ms-justify-content: center;
  -o-justify-content: center;
  justify-content: center;
  -ms-flex-pack: center;
  -webkit-box-align: center;
  -moz-box-align: center;
  box-align: center;
  -webkit-align-items: center;
  -moz-align-items: center;
  -ms-align-items: center;
  -o-align-items: center;
  align-items: center;
  -ms-flex-align: center;
  box-shadow: 0px 0px 17px rgba(0, 0, 0, 0.2);
}
.timeline-detail__box {
  z-index: 86;
  -webkit-transform: rotateY(0deg);
  transform: rotateY(0deg);
  border-radius: 4px;
}
.timeline-category__box {
  background: #FFFFFF;
  z-index: 85;
  -webkit-transform: rotateY(180deg);
  transform: rotateY(180deg);
  border-radius: 4px;
  display: block;
}
.timeline-box--show-category .timeline-category__box {
  z-index: 87;
}
.timeline-category__box:after,
.timeline-category__box:before {
  content: "";
  display: block;
  position: absolute;
  bottom: 0px;
  left: 20px;
  right: 20px;
  height: 150px;
  z-index: 5;
  background-color: rgba(255, 255, 255, 0);
  background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0) 0%, white 60%, white 100%);
  background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, white 60%, white 100%);
}
.timeline-category__box:before {
  top: 0px;
  bottom: auto;
  height: 80px;
  background-color: rgba(255, 255, 255, 0);
  background-image: -webkit-linear-gradient(bottom, rgba(255, 255, 255, 0) 0%, white 50%, white 100%);
  background-image: linear-gradient(to top, rgba(255, 255, 255, 0) 0%, white 50%, white 100%);
}
.timeline-category__content {
  margin: 0px 0px 0px 0px;
  position: absolute;
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;
  display: -webkit-box;
  display: -moz-box;
  display: box;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -moz-box-pack: center;
  box-pack: center;
  -webkit-justify-content: center;
  -moz-justify-content: center;
  -ms-justify-content: center;
  -o-justify-content: center;
  justify-content: center;
  -ms-flex-pack: center;
  -webkit-box-align: center;
  -moz-box-align: center;
  box-align: center;
  -webkit-align-items: center;
  -moz-align-items: center;
  -ms-align-items: center;
  -o-align-items: center;
  align-items: center;
  -ms-flex-align: center;
  overflow-y: auto;
  /* optional: show position indicator in red */
  -webkit-transition: opacity 0.4s;
  -moz-transition: opacity 0.4s;
  transition: opacity 0.4s;
}
.timeline-category__content::-webkit-scrollbar {
  width: 0px;
  /* remove scrollbar space */
  background: transparent;
  /* optional: just make scrollbar invisible */
}
.timeline-category__content::-webkit-scrollbar-thumb {
  background: #FF0000;
}
.timeline-box--open-finish .timeline-category__content {
  opacity: 1;
}
.timeline-box--close-start .timeline-category__content,
.timeline-box--closing .timeline-category__content {
  opacity: 0;
}
.timeline-category__back {
  margin-top: 10px;
  font-weight: 500;
  cursor: pointer;
  position: absolute;
  bottom: 20px;
  width: 100%;
  left: 0;
  text-align: center;
  z-index: 8;
  text-transform: lowercase;
}
.timeline-category__back .actions-rotate {
  font-size: 30px;
  margin-bottom: -5px;
}
.timeline-category__content-inner {
  padding: 70px 40px 120px;
}
.timeline-category__content-inner h3,
.timeline-category__content-inner p {
  text-align: center;
}
.timeline-mask {
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.3);
  position: fixed;
  top: 0px;
  left: 0px;
  visibility: hidden;
  opacity: 0;
  z-index: 80;
  -webkit-transition: opacity 0.4s;
  -moz-transition: opacity 0.4s;
  transition: opacity 0.4s;
}
.timeline-box--opening .timeline-mask,
.timeline-box--open-finish .timeline-mask {
  visibility: visible;
  opacity: 1;
}
.timeline-box--close-start .timeline-mask {
  visibility: visible;
  opacity: 1;
}
.timeline-box--closing .timeline-mask {
  opacity: 0;
  visibility: visible;
}
.timeline-box--close-finish .timeline-mask {
  opacity: 0;
  visibility: hidden;
}
.timeline-detail__cat,
.timeline-category__title {
  text-align: center;
  margin-bottom: 30px;
}
.timeline-detail__cat i,
.timeline-category__title i {
  display: block;
  margin-bottom: 5px;
}
.timeline-detail__cat span,
.timeline-category__title span {
  font-size: 20px;
  text-transform: uppercase;
  font-weight: 500;
}
.timeline-detail__img {
  display: block;
  margin: 0px auto 5px auto;
  width: 62px;
  height: auto;
  min-height: 32px;
}
.timeline-detail__title {
  font-weight: 500;
  margin-bottom: 10px;
  font-size: 16px;
  color: #333;
}
.timeline-detail__description {
  font-weight: 300;
}
.timeline-detail__cat-link {
  margin-top: 10px;
  font-weight: 500;
  cursor: pointer;
  position: absolute;
  bottom: 20px;
  width: 100%;
  left: 0;
  text-align: center;
  text-transform: lowercase;
}
.timeline-detail__cat-link .actions-rotate {
  font-size: 30px;
  margin-bottom: -5px;
}
.timeline-category__close {
  position: absolute;
  top: 30px;
  right: 30px;
  font-size: 30px;
  color: #AAA;
  cursor: pointer;
}
.timeline-scrubber {
  width: 400px;
  height: 5px;
  background: #EEE;
  border-radius: 3px;
  position: relative;
  margin-right: 6px;
  cursor: -webkit-grab;
  cursor: grab;
}
.timeline-scrubber__selected {
  height: 10px;
  top: -50%;
  position: absolute;
  background: #f9b01d;
  border: 1px solid #f9b01d;
  border-radius: 1px;
  -webkit-transition: width 0.5s, left 0.5s, background 0.2s;
  -moz-transition: width 0.5s, left 0.5s, background 0.2s;
  transition: width 0.5s, left 0.5s, background 0.2s;
}
.timeline-scrubber:hover .timeline-scrubber__selected {
  background: #ffc248;
}

#side-nav {
  background: #153B50 !important;
}
#side-nav nav .submenu dl dt {
  padding-left: 44px;
}
#side-nav nav .submenu a {
  padding-left: 68px;
}
#side-nav nav .submenu a.menu__item--upper {
  padding-left: 44px;
  font-weight: 700;
}
.is-plain {
  font-weight: 400!important;
  color: #999999!important;
}
.menu__header {
  border-left: 2px solid transparent;
  color: white;
  font-weight: 700;
  margin-top: 0;
  padding: 15px 0 15px 22px;
  cursor: pointer;
}
.menu__header.is-plain {
  font-weight: 400!important;
  color: #999999!important;
  cursor: default;
}
.menu__list .menu__header {
  padding-left: 44px;
}
.menu__header:active,
.menu__header:hover {
  background-color: #286E90!important;
  color: white!important;
}
.menu__list {
  overflow: hidden;
}
.menu__wrapper {
  position: relative;
}
.is-closed > .menu__wrapper {
  margin-top: -100%;
  max-height: 0;
  transition: 0.5s ease-out;
}
.is-open > .menu__wrapper {
  margin-top: 0;
  max-height: 100%;
}
.is-animatedOpen > .menu__wrapper {
  margin-top: 0;
  max-height: 100%;
  transition: 0.5s ease-out;
  transition-delay: 0;
}
.menu__item {
  border-left: 2px solid transparent;
  color: #333;
  display: block;
  font-weight: 400;
  letter-spacing: 0.1px;
  padding: 10px 24px 10px 46px;
  white-space: nowrap;
}
.menu__item:active,
.menu__item:focus {
  background-color: #286E90!important;
  color: white!important;
}
.menu__item.menu__item--upper {
  border-left: 2px solid transparent;
  color: #333;
  font-weight: 700;
  margin-top: 0;
  padding: 15px 0 15px 22px;
  cursor: pointer;
}
#side-nav nav a {
  color: white;
}
@keyframes collapse {
  0% {
    max-height: none;
  }
  100% {
    max-height: 0;
  }
}
#side-nav #logo.logo--bottom {
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: 100%;
  position: absolute;
  bottom: 0;
  border: none;
  text-align: center;
  background: #153B50!important;
}
#side-nav #logo.logo--bottom span {
  color: #456B80!important;
  font-weight: 600;
  font-size: 14px;
}
#side-nav #logo {
  padding: 30px 25px;
  font-size: 26px;
  height: auto;
  text-align: left;
  border-bottom: 1px solid #153B50;
}

.moduleD1 {
  position: relative;
}
.moduleD1 .module-body {
  position: relative;
  box-sizing: border-box;
  padding-right: 38px;
  width: 20%;
  max-width: 250px;
}
@media screen and (max-width: 1240px) {
  position: relative;
  .moduleD1 .module-body {
    box-sizing: border-box;
    padding-right: 20px;
    max-width: 240px;
    width: 20%;
  }
}
@media screen and (max-width: 760px) {
  .moduleD1 .module-body {
    position: relative;
    padding-right: 0;
    width: 100%;
    left: 50%;
    transform: translate(-50%, 0);
  }
}
@media screen and (max-width: 360px) {
  .moduleD1 .module-body {
    position: relative;
    width: 100%;
    left: 50%;
    transform: translate(-50%, 0);
  }
}
.centered {
  display: flex;
  flex-direction: row;
  justify-content: center;
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
nav,
section,
summary {
  display: block;
}
audio,
canvas,
video {
  display: inline-block;
}
audio:not([controls]) {
  display: none;
  height: 0;
}
[hidden] {
  display: none;
}
html {
  font-family: sans-serif;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}
body {
  margin: 0;
}
a:focus {
  outline: thin dotted;
}
a:active,
a:hover {
  outline: 0;
}
h1 {
  font-size: 2em;
  margin: 0.67em 0;
}
abbr[title] {
  border-bottom: 1px dotted;
}
b,
strong {
  font-weight: bold;
}
dfn {
  font-style: italic;
}
hr {
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  height: 0;
}
mark {
  background: #ff0;
  color: #000;
}
code,
kbd,
pre,
samp {
  font-family: monospace,serif;
  font-size: 1em;
}
pre {
  white-space: pre-wrap;
}
q {
  quotes: "\201C" "\201D" "\2018" "\2019";
}
small {
  font-size: 80%;
}
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}
sup {
  top: -0.5em;
}
sub {
  bottom: -0.25em;
}
img {
  border: 0;
}
svg:not(:root) {
  overflow: hidden;
}
figure {
  margin: 0;
}
fieldset {
  border: 1px solid #c0c0c0;
  margin: 0 2px;
  padding: 0.35em 0.625em 0.75em;
}
legend {
  border: 0;
  padding: 0;
}
button,
input,
select,
textarea {
  font-family: inherit;
  font-size: 100%;
  margin: 0;
}
button,
input {
  line-height: normal;
}
button,
select {
  text-transform: none;
}
button,
html input[type="button"],
input[type="reset"],
input[type="submit"] {
  -webkit-appearance: button;
  cursor: pointer;
}
button[disabled],
html input[disabled] {
  cursor: default;
}
input[type="checkbox"],
input[type="radio"] {
  box-sizing: border-box;
  padding: 0;
}
input[type="search"] {
  -webkit-appearance: textfield;
  -moz-box-sizing: content-box;
  -webkit-box-sizing: content-box;
  box-sizing: content-box;
}
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}
button::-moz-focus-inner,
input::-moz-focus-inner {
  border: 0;
  padding: 0;
}
textarea {
  overflow: auto;
  vertical-align: top;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}

.process {
  position: relative;
  width: 800px;
  height: 800px;
  flex-shrink: 0;
  left: 10%;
}
@media screen and (max-width: 1240px) {
  .process {
    left: 50%;
    transform: translate(-50%, 0);
  }
}
.process__list {
  position: absolute;
  top: 50%;
  left: 50%;
  height: 50%;
  width: 50%;
  transform: translate(-50%, -50%);
  list-style: none;
}
.title {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -55%);
  width: 200px;
  font-family: 'Raleway';
  text-transform: uppercase;
  font-weight: 200;
  font-size: 32px;
  line-height: 1.4;
  text-align: center;
  opacity: 0;
  color: #999999;
}
.center {
  position: absolute;
  top: -5px;
  left: -5px;
  width: calc(100% + 10px);
  height: calc(100% + 10px);
}
.center__circle {
  stroke: #999999;
  stroke-width: 0.7;
  fill: transparent;
  vector-effect: non-scaling-stroke;
}
.circle__arc {
  stroke: #999999;
  stroke-width: 0.7;
  fill: transparent;
  vector-effect: non-scaling-stroke;
}
.super-q {
  position: relative;
}
.q {
  position: absolute;
  width: 55%;
  height: 55%;
  background: #fafafa;
}
.q1 {
  top: 0;
  left: 0;
}
.q2 {
  top: 0;
  left: 50%;
}
.q3 {
  top: 50%;
  left: 0;
}
.q4 {
  top: 50%;
  left: 50%;
}
.step {
  position: absolute;
  transform: translate(-50%, -50%);
}
.step-1 {
  top: 0;
  left: 50%;
}
.step-2 {
  top: 14.64466094%;
  left: 85.35533906%;
}
.step-3 {
  top: 50%;
  left: 100%;
}
.step-4 {
  top: 85.35533906%;
  left: 85.35533906%;
}
.step-5 {
  top: 100%;
  left: 50%;
}
.step-6 {
  top: 85.35533906%;
  left: 14.64466094%;
}
.step-7 {
  top: 50%;
  left: 0;
}
.step-8 {
  top: 14.64466094%;
  left: 14.64466094%;
}
.step__spot-svg {
  width: 30px;
  height: 30px;
  cursor: pointer;
}
.step__spot-fill {
  fill: #ffffff;
}
.step__spot-circle {
  fill: #ffffff;
  stroke: #999999;
  vector-effect: non-scaling-stroke;
  stroke-width: 0.7;
}
.step-1 .is-checked .step__spot-circle {
  stroke: #FF6701;
  fill: #FF6701;
}
.step-2 .is-checked .step__spot-circle {
  stroke: #EA610C;
  fill: #EA610C;
}
.step-3 .is-checked .step__spot-circle {
  stroke: #D45B17;
  fill: #D45B17;
}
.step-4 .is-checked .step__spot-circle {
  stroke: #BF5522;
  fill: #BF5522;
}
.step-5 .is-checked .step__spot-circle {
  stroke: #A94F2E;
  fill: #A94F2E;
}
.step-6 .is-checked .step__spot-circle {
  stroke: #944939;
  fill: #944939;
}
.step-7 .is-checked .step__spot-circle {
  stroke: #7E4344;
  fill: #7E4344;
}
.step-8 .is-checked .step__spot-circle {
  stroke: #693D4F;
  fill: #693D4F;
}
.step__arc {
  stroke-width: 1.4;
  fill: transparent;
  vector-effect: non-scaling-stroke;
}
.step__arc.step__arc-1 {
  stroke: url(#grad-arc-1);
}
.step__arc.step__arc-2 {
  stroke: url(#grad-arc-2);
}
.step__arc.step__arc-3 {
  stroke: url(#grad-arc-3);
}
.step__arc.step__arc-4 {
  stroke: url(#grad-arc-4);
}
.step__arc.step__arc-5 {
  stroke: url(#grad-arc-5);
}
.step__arc.step__arc-6 {
  stroke: url(#grad-arc-6);
}
.step__arc.step__arc-7 {
  stroke: url(#grad-arc-7);
}
.step__arc.step__arc-8 {
  stroke: url(#grad-arc-8);
}
.step__number {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: 'Josefin Sans';
  font-size: 14px;
  color: #999999;
  line-height: 1.4;
  text-align: center;
  cursor: pointer;
  opacity: 0;
}
.is-checked .step__number {
  color: #ffffff;
  font-weight: 700;
}
.step__info {
  position: absolute;
  width: 200px;
  pointer-events: all;
}
.step__info.active:hover .step__text,
.step__info.active:hover .step__header {
  opacity: 0 !important;
  transition: opacity 0.2s ease-in-out;
}
.step__info.active:hover .step__role {
  opacity: 1;
  transition: opacity 0.2s ease-in-out;
}
.step-1 .step__info {
  bottom: 0;
  left: 60px;
  transform: translate(0, 0);
}
.step-2 .step__info {
  top: 0;
  left: 80px;
  transform: translate(0, 0);
}
.step-3 .step__info {
  top: 0;
  left: 60px;
  transform: translate(0, 0);
}
.step-4 .step__info {
  top: 100%;
  left: 20px;
  transform: translate(0, 20px);
}
.step-5 .step__info {
  top: calc(100% + 20px);
  left: 50%;
  transform: translate(-45%, 0);
}
.step-6 .step__info {
  top: 0;
  right: 30px;
  transform: translate(0, -15%);
}
.step-7 .step__info {
  top: 0;
  right: 30px;
  transform: translate(0, -65%);
}
.step-8 .step__info {
  top: -20px;
  right: 0px;
  transform: translate(0, -100%);
}
.step__role {
  position: absolute;
  opacity: 0;
  transition: opacity 0.2s ease-in-out;
  font-family: 'Raleway';
  text-transform: uppercase;
  text-align: center;
}
.step-1 .step__role {
  bottom: -10px;
  left: 0px;
}
.step-2 .step__role {
  top: 40px;
  left: -10px;
  width: 191px;
}
.step-3 .step__role {
  top: 0;
}
.step-4 .step__role {
  top: -40px;
  left: 30px;
}
.step-5 .step__role {
  top: 0;
  left: 0;
  width: 191px;
}
.step-6 .step__role {
  top: 30px;
  right: 30px;
  width: 191px;
}
.step-7 .step__role {
  top: 80px;
  right: 30px;
}
.step-8 .step__role {
  top: 110px;
  right: 50px;
  width: 191px;
}
.step-1 .step__role {
  color: #FF6701;
}
.step-2 .step__role {
  color: #EA610C;
}
.step-3 .step__role {
  color: #D45B17;
}
.step-4 .step__role {
  color: #BF5522;
}
.step-5 .step__role {
  color: #A94F2E;
}
.step-6 .step__role {
  color: #944939;
}
.step-7 .step__role {
  color: #7E4344;
}
.step-8 .step__role {
  color: #693D4F;
}
.iconize {
  position: relative;
  width: 35px;
}
.step__icon {
  position: relative;
  width: 60px;
  background-position: bottom left;
  background-repeat: no-repeat;
  opacity: 0;
  margin-bottom: 8px;
}
.step__icon.is-visible {
  opacity: 1;
}
.article-list .step__icon {
  width: auto;
}
.step__svg {
  position: relative;
  bottom: 0;
}
.step__header {
  position: relative;
  margin-bottom: 8px;
  transition: opacity 0.2s ease-in-out;
}
.step__header::before {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 1px;
  width: 80px;
  border: none;
  background-color: black;
}
.step__title {
  font-family: 'Raleway';
  text-transform: uppercase;
  font-weight: 300;
  font-size: 22px;
  line-height: 1.1;
  color: black;
  opacity: 0;
}
.step-1 .step__title {
  color: #FF6701;
}
.step-2 .step__title {
  color: #EA610C;
}
.step-3 .step__title {
  color: #D45B17;
}
.step-4 .step__title {
  color: #BF5522;
}
.step-5 .step__title {
  color: #A94F2E;
}
.step-6 .step__title {
  color: #944939;
}
.step-7 .step__title {
  color: #7E4344;
}
.step-8 .step__title {
  color: #693D4F;
}
.step__text {
  font-size: 13px;
  font-weight: 100;
  line-height: 1.25;
  letter-spacing: 0.03em;
  transition: opacity 0.2s ease-in-out;
  opacity: 0;
}
.step {
  position: absolute;
  transform: translate(-50%, -50%);
}
.step-1 {
  top: 0;
  left: 50%;
}
.step-2 {
  top: 14.64466094%;
  left: 85.35533906%;
}
.step-3 {
  top: 50%;
  left: 100%;
}
.step-4 {
  top: 85.35533906%;
  left: 85.35533906%;
}
.step-5 {
  top: 100%;
  left: 50%;
}
.step-6 {
  top: 85.35533906%;
  left: 14.64466094%;
}
.step-7 {
  top: 50%;
  left: 0;
}
.step-8 {
  top: 14.64466094%;
  left: 14.64466094%;
}
.step__spot-svg {
  width: 30px;
  height: 30px;
  cursor: pointer;
}
.step__spot-fill {
  fill: #FAFAFA;
}
.step__spot-circle {
  fill: #FAFAFA;
  stroke: #999999;
  vector-effect: non-scaling-stroke;
  stroke-width: 0.7;
}
.step-1 .is-checked .step__spot-circle {
  stroke: #FF6701;
  fill: #FF6701;
}
.step-2 .is-checked .step__spot-circle {
  stroke: #EA610C;
  fill: #EA610C;
}
.step-3 .is-checked .step__spot-circle {
  stroke: #D45B17;
  fill: #D45B17;
}
.step-4 .is-checked .step__spot-circle {
  stroke: #BF5522;
  fill: #BF5522;
}
.step-5 .is-checked .step__spot-circle {
  stroke: #A94F2E;
  fill: #A94F2E;
}
.step-6 .is-checked .step__spot-circle {
  stroke: #944939;
  fill: #944939;
}
.step-7 .is-checked .step__spot-circle {
  stroke: #7E4344;
  fill: #7E4344;
}
.step-8 .is-checked .step__spot-circle {
  stroke: #693D4F;
  fill: #693D4F;
}
.step__arc {
  stroke-width: 1.4;
  fill: transparent;
  vector-effect: non-scaling-stroke;
}
.step__arc.step__arc-1 {
  stroke: url(#grad-arc-1);
}
.step__arc.step__arc-2 {
  stroke: url(#grad-arc-2);
}
.step__arc.step__arc-3 {
  stroke: url(#grad-arc-3);
}
.step__arc.step__arc-4 {
  stroke: url(#grad-arc-4);
}
.step__arc.step__arc-5 {
  stroke: url(#grad-arc-5);
}
.step__arc.step__arc-6 {
  stroke: url(#grad-arc-6);
}
.step__arc.step__arc-7 {
  stroke: url(#grad-arc-7);
}
.step__arc.step__arc-8 {
  stroke: url(#grad-arc-8);
}
.step__number {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: 'Josefin Sans';
  font-size: 14px;
  color: #999999;
  line-height: 1.4;
  text-align: center;
  cursor: pointer;
  opacity: 0;
}
.is-checked .step__number {
  color: #ffffff;
  font-weight: 700;
}
.step__info {
  position: absolute;
  width: 200px;
}
.step-1 .step__info {
  bottom: calc(100% + 20px);
  left: 0px;
  transform: translate(0, 0);
}
.step-2 .step__info {
  top: 0;
  left: 80px;
  transform: translate(0, -40%);
}
.step-3 .step__info {
  top: 0;
  left: 60px;
  transform: translate(0, 0);
}
.step-4 .step__info {
  top: 100%;
  left: 20px;
  transform: translate(0, 20px);
}
.step-5 .step__info {
  top: calc(100% + 20px);
  left: 50%;
  transform: translate(-45%, 0);
}
.step-6 .step__info {
  top: 0;
  right: 30px;
  transform: translate(0, -15%);
}
.step-7 .step__info {
  top: 0;
  right: 30px;
  transform: translate(0, -65%);
}
.step-8 .step__info {
  top: -20px;
  right: 0px;
  transform: translate(0, -100%);
}
.step__icon {
  position: relative;
  width: 60px;
  background-position: bottom left;
  background-repeat: no-repeat;
  opacity: 0;
  margin-bottom: 8px;
}
.step__svg {
  position: relative;
  bottom: 0;
}
.step__header {
  position: relative;
  margin-bottom: 8px;
}
.step__header::before {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 1px;
  width: 80px;
  border: none;
  background-color: black;
  /*.step-1 & {background-color: @color-step-1;}
        .step-2 & {background-color: @color-step-2;}
        .step-3 & {background-color: @color-step-3;}
        .step-4 & {background-color: @color-step-4;}
        .step-5 & {background-color: @color-step-5;}
        .step-6 & {background-color: @color-step-6;}
        .step-7 & {background-color: @color-step-7;}
        .step-8 & {background-color: @color-step-8;}*/
}
.step__title {
  font-family: 'Raleway';
  text-transform: uppercase;
  font-weight: 300;
  font-size: 22px;
  line-height: 1.1;
  color: black;
  opacity: 0;
}
.step-1 .step__title {
  color: #FF6701;
}
.step-2 .step__title {
  color: #EA610C;
}
.step-3 .step__title {
  color: #D45B17;
}
.step-4 .step__title {
  color: #BF5522;
}
.step-5 .step__title {
  color: #A94F2E;
}
.step-6 .step__title {
  color: #944939;
}
.step-7 .step__title {
  color: #7E4344;
}
.step-8 .step__title {
  color: #693D4F;
}
.step__text {
  font-size: 13px;
  font-weight: 100;
  line-height: 1.25;
  letter-spacing: 0.03em;
  opacity: 0;
}

.segmenter {
  width: 100vw;
  height: 100vh;
  position: relative;
  overflow: hidden;
  -webkit-filter: contrast(155%) brightness(70%) saturate(200%) sepia(60%) hue-rotate(355deg);
  filter: contrast(155%) brightness(70%) saturate(200%) sepia(60%) hue-rotate(355deg);
}
.segmenter__image {
  width: 100%;
  display: block;
}
.segmenter__background,
.segmenter__pieces,
.segmenter__piece-wrap,
.segmenter__piece-parallax,
.segmenter__piece {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
}
.segmenter__piece-parallax {
  -webkit-transition: -webkit-transform 0.2s ease-out;
  transition: transform 0.2s ease-out;
}
.segmenter__pieces {
  -webkit-perspective: 400px;
  perspective: 400px;
}
.segmenter__background,
.segmenter__piece {
  background-size: cover;
  background-repeat: no-repeat;
  background-position: 50% 50%;
}
.trigger-headline {
  top: 0;
  left: 0;
  position: absolute;
  font-size: 6vw;
  text-transform: uppercase;
  pointer-events: none;
  line-height: 1;
  width: 100%;
  height: 100%;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  justify-content: center;
  margin: 0;
}
.trigger-headline span {
  display: inline-block;
  position: relative;
  padding: 0 2vw!important;
  -webkit-transition: opacity 2s, -webkit-transform 2s;
  transition: opacity 2s, transform 2s;
  -webkit-transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
  transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
  -webkit-transition-delay: 0.7s;
  transition-delay: 0.7s;
}
.js .trigger-headline--hidden span {
  pointer-events: none;
  opacity: 0;
}
.js .trigger-headline--hidden span:nth-child(1) {
  -webkit-transform: translate3d(-100px, 0, 0);
  transform: translate3d(-100px, 0, 0);
}
.js .trigger-headline--hidden span:nth-child(2) {
  -webkit-transform: translate3d(-50px, 0, 0);
  transform: translate3d(-50px, 0, 0);
}
.js .trigger-headline--hidden span:nth-child(3) {
  -webkit-transform: translate3d(-25px, 0, 0);
  transform: translate3d(-25px, 0, 0);
}
.js .trigger-headline--hidden span:nth-child(4) {
  -webkit-transform: translate3d(25px, 0, 0);
  transform: translate3d(25px, 0, 0);
}
.js .trigger-headline--hidden span:nth-child(5) {
  -webkit-transform: translate3d(50px, 0, 0);
  transform: translate3d(50px, 0, 0);
}
.js .trigger-headline--hidden span:nth-child(6) {
  -webkit-transform: translate3d(100px, 0, 0);
  transform: translate3d(100px, 0, 0);
}
/* Adjustments for some demos */
.demo-4 .trigger-headline span {
  -webkit-transition: opacity 2.3s, -webkit-transform 2.3s;
  transition: opacity 2.3s, transform 2.3s;
  -webkit-transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
  transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
  -webkit-transition-delay: 0.1s;
  transition-delay: 0.1s;
}
.js .demo-4 .trigger-headline--hidden span:nth-child(1) {
  -webkit-transform: translate3d(200px, 0, 0);
  transform: translate3d(200px, 0, 0);
}
.js .demo-4 .trigger-headline--hidden span:nth-child(2) {
  -webkit-transform: translate3d(100px, 0, 0);
  transform: translate3d(100px, 0, 0);
}
.js .demo-4 .trigger-headline--hidden span:nth-child(3) {
  -webkit-transform: translate3d(50px, 0, 0);
  transform: translate3d(50px, 0, 0);
}
.js .demo-4 .trigger-headline--hidden span:nth-child(4) {
  -webkit-transform: translate3d(-50px, 0, 0);
  transform: translate3d(-50px, 0, 0);
}
.js .demo-4 .trigger-headline--hidden span:nth-child(5) {
  -webkit-transform: translate3d(-100px, 0, 0);
  transform: translate3d(-100px, 0, 0);
}
.js .demo-4 .trigger-headline--hidden span:nth-child(6) {
  -webkit-transform: translate3d(-200px, 0, 0);
  transform: translate3d(-200px, 0, 0);
}
.demo-5 .trigger-headline span {
  -webkit-transition-delay: 0s;
  transition-delay: 0s;
}
.segmenter__shadow {
  position: absolute;
  opacity: 0;
  box-shadow: 0px 2px 15px rgba(0, 0, 0, 0.7);
}
/* Individual shadow styles */
.demo-1 .segmenter__shadow {
  box-shadow: 0px 20px 50px rgba(18, 20, 28, 0.61);
}
.demo-2 .segmenter__shadow {
  box-shadow: 10px 10px 30px rgba(43, 27, 19, 0.95);
}
.demo-3 .segmenter__shadow {
  border: 7px solid rgba(255, 255, 255, 0.7);
  box-shadow: none;
}
.demo-3 .segmenter__shadow::before {
  content: '';
  position: absolute;
  top: -20px;
  left: -20px;
  width: 100%;
  height: 100%;
  box-shadow: -5px -5px 30px rgba(0, 0, 0, 0.7);
}
.demo-4 .segmenter__shadow {
  box-shadow: 8px 8px 30px rgba(15, 32, 38, 0.6);
}
.demo-5 .segmenter__shadow {
  box-shadow: 0px 18px 29px rgba(4, 19, 22, 0.65);
}
.demo-6 .segmenter__shadow {
  box-shadow: 2px 20px 35px rgba(25, 23, 20, 0.75);
}
.trigger-headline {
  top: 0;
  left: 0;
  position: absolute;
  font-size: 6vw;
  text-transform: uppercase;
  pointer-events: none;
  line-height: 1;
  width: 100%;
  height: 100%;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  justify-content: center;
  margin: 0;
}
.trigger-headline span {
  color: #FFFFF7;
  text-shadow: 1px 1px rgba(0, 0, 0, 0.2);
  display: inline-block;
  position: relative;
  padding: 0 5vw;
  -webkit-transition: opacity 2s, -webkit-transform 2s;
  transition: opacity 2s, transform 2s;
  -webkit-transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
  transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
  -webkit-transition-delay: 0.7s;
  transition-delay: 0.7s;
}
.js .trigger-headline--hidden span {
  pointer-events: none;
  opacity: 0;
}
.js .trigger-headline--hidden span:nth-child(1) {
  -webkit-transform: translate3d(-100px, 0, 0);
  transform: translate3d(-100px, 0, 0);
}
.js .trigger-headline--hidden span:nth-child(2) {
  -webkit-transform: translate3d(-50px, 0, 0);
  transform: translate3d(-50px, 0, 0);
}
.js .trigger-headline--hidden span:nth-child(3) {
  -webkit-transform: translate3d(-25px, 0, 0);
  transform: translate3d(-25px, 0, 0);
}
.js .trigger-headline--hidden span:nth-child(4) {
  -webkit-transform: translate3d(25px, 0, 0);
  transform: translate3d(25px, 0, 0);
}
.js .trigger-headline--hidden span:nth-child(5) {
  -webkit-transform: translate3d(50px, 0, 0);
  transform: translate3d(50px, 0, 0);
}
.js .trigger-headline--hidden span:nth-child(6) {
  -webkit-transform: translate3d(100px, 0, 0);
  transform: translate3d(100px, 0, 0);
}
/* Adjustments for some demos */
.demo-4 .trigger-headline span {
  -webkit-transition: opacity 2.3s, -webkit-transform 2.3s;
  transition: opacity 2.3s, transform 2.3s;
  -webkit-transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
  transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
  -webkit-transition-delay: 0.1s;
  transition-delay: 0.1s;
}
.js .demo-4 .trigger-headline--hidden span:nth-child(1) {
  -webkit-transform: translate3d(-200px, 0, 0);
  transform: translate3d(-200px, 0, 0);
}
.js .demo-4 .trigger-headline--hidden span:nth-child(2) {
  -webkit-transform: translate3d(-100px, 0, 0);
  transform: translate3d(-100px, 0, 0);
}
.js .demo-4 .trigger-headline--hidden span:nth-child(3) {
  -webkit-transform: translate3d(-50px, 0, 0);
  transform: translate3d(-50px, 0, 0);
}
.js .demo-4 .trigger-headline--hidden span:nth-child(4) {
  -webkit-transform: translate3d(50px, 0, 0);
  transform: translate3d(50px, 0, 0);
}
.js .demo-4 .trigger-headline--hidden span:nth-child(5) {
  -webkit-transform: translate3d(100px, 0, 0);
  transform: translate3d(100px, 0, 0);
}
.js .demo-4 .trigger-headline--hidden span:nth-child(6) {
  -webkit-transform: translate3d(200px, 0, 0);
  transform: translate3d(200px, 0, 0);
}
.js .demo-4 .trigger-headline--hidden span:nth-child(7) {
  -webkit-transform: translate3d(250px, 0, 0);
  transform: translate3d(250px, 0, 0);
}
.js .demo-4 .trigger-headline--hidden span:nth-child(8) {
  -webkit-transform: translate3d(300px, 0, 0);
  transform: translate3d(300px, 0, 0);
}
.js .demo-4 .trigger-headline--hidden span:nth-child(9) {
  -webkit-transform: translate3d(350px, 0, 0);
  transform: translate3d(350px, 0, 0);
}
.js .demo-4 .trigger-headline--hidden span:nth-child(10) {
  -webkit-transform: translate3d(400px, 0, 0);
  transform: translate3d(400px, 0, 0);
}
.js .demo-4 .trigger-headline--hidden span:nth-child(11) {
  -webkit-transform: translate3d(450px, 0, 0);
  transform: translate3d(450px, 0, 0);
}
.demo-5 .trigger-headline span {
  -webkit-transition-delay: 0s;
  transition-delay: 0s;
}

.tile-grid {
  display: flex;
  flex-direction: row;
  width: 100%;
  flex-wrap: wrap;
  align-items: flex-start;
}
.tile-grid--3-column .tile {
  margin-right: 12px;
  min-width: calc(33% - 12px);
}
.tile-grid--3-column .tile:nth-child(n + 4) {
  margin-top: 12px;
}
.tile-grid--3-column .flip-container {
  flex: 1;
  margin-right: 12px;
  min-width: calc(33% - 12px);
  height: 245px;
}
.tile-grid--3-column .flip-container .back h3,
.tile-grid--3-column .flip-container .back h4 {
  white-space: normal;
}
.tile-grid--3-column .flip-container .tile {
  min-width: 100%;
  height: 233px;
  padding: 48px 18px;
}
.tile-grid--3-column .tile:nth-child(3n+3),
.tile-grid--3-column .flip-container:nth-child(3n+3) {
  margin-right: 0;
}
.tile-grid .tile {
  cursor: auto;
  margin-bottom: 0;
  flex: 1;
  display: flex;
  padding: 0 0 30px;
  flex-direction: column;
  align-items: center;
  border-radius: 3px;
}
.tile-grid .tile h3 {
  font-size: 21px;
  text-align: center;
  white-space: nowrap;
  font-weight: 300;
  margin-bottom: 6px;
}
.tile-grid .tile span {
  margin: 0 3px;
}
.tile-grid .tile h4 {
  font-size: 19px;
  text-align: center;
  white-space: nowrap;
  font-weight: 300;
  margin-bottom: 0;
}
.tile-grid .tile img {
  width: 100%;
  margin-bottom: 32px;
}
.tile-grid .tile img.tile-icon {
  width: auto;
  height: 72px;
}
.tile-grid--icons .tile {
  padding: 48px 12px;
}
.tile-grid--icons .tile img {
  width: auto;
  height: 72px;
}
@media screen and (max-width: 1224px) {
  .tile-grid .tile h4 {
    font-size: 16px;
  }
}
@media screen and (max-width: 760px) {
  .tile-grid--4-column label.tile {
    margin-top: 0px;
    margin-right: 12px;
    padding: 48px 12px;
    min-width: calc(38%);
  }
  .tile-grid--4-column label.tile:nth-of-type(2n+2) {
    margin-right: 0;
  }
  .tile-grid--4-column label.tile:nth-child(n + 4) {
    margin-top: 12px;
  }
  .tile-grid--4-column label.tile:after {
    display: none;
  }
  .tile-grid--4-column input:checked ~ .expand .column-outer,
  .tile-grid--4-column input:checked ~ .expand .column-inner {
    height: 648px;
  }
  .tile-grid--4-column .expand .column-inner .inner-content {
    flex-direction: column-reverse;
  }
  .tile-grid--4-column .expand .column-inner .inner-content .expand-tile {
    flex: intial;
    margin-right: 0;
    height: 40%;
  }
  .tile-grid--4-column .expand .column-inner .inner-content .close-expand {
    align-self: flex-end;
  }
}

@keyframes fadeIn {
  0% {
    -webkit-transform: rotateX(-85deg);
    -moz-transform: rotateX(-85deg);
    transform: rotateX(-85deg);
    -webkit-transform-origin: 0 0;
    -moz-transform-origin: 0 0;
    -o-transform-origin: 0 0;
    transform-origin: 0 0;
    opacity: .3;
  }
  40% {
    -webkit-transform: rotateX(25deg);
    -moz-transform: rotateX(25deg);
    transform: rotateX(25deg);
    -webkit-transform-origin: 0 0;
    -moz-transform-origin: 0 0;
    -o-transform-origin: 0 0;
    transform-origin: 0 0;
    opacity: .8;
  }
  60% {
    -webkit-transform: rotateX(-25deg);
    -moz-transform: rotateX(-25deg);
    transform: rotateX(-25deg);
    -webkit-transform-origin: 0 0;
    -moz-transform-origin: 0 0;
    -o-transform-origin: 0 0;
    transform-origin: 0 0;
    opacity: .9;
  }
  80% {
    -webkit-transform: rotateX(10deg);
    -moz-transform: rotateX(10deg);
    transform: rotateX(10deg);
    -webkit-transform-origin: 0 0;
    -moz-transform-origin: 0 0;
    -o-transform-origin: 0 0;
    transform-origin: 0 0;
    opacity: 1;
  }
  100% {
    -webkit-transform: rotateX(0);
    -moz-transform: rotateX(0);
    transform: rotateX(0);
    -webkit-transform-origin: 0 0;
    -moz-transform-origin: 0 0;
    -o-transform-origin: 0 0;
    transform-origin: 0 0;
    opacity: 1;
  }
}
@keyframes fromLeft {
  0% {
    -webkit-transform: rotateX(-85deg);
    -moz-transform: rotateX(-85deg);
    transform: rotateX(-85deg);
    -webkit-transform-origin: 0 0;
    -moz-transform-origin: 0 0;
    -o-transform-origin: 0 0;
    transform-origin: 0 0;
    opacity: .3;
    left: -300px;
  }
  100% {
    -webkit-transform: rotateX(0);
    -moz-transform: rotateX(0);
    transform: rotateX(0);
    -webkit-transform-origin: 0 0;
    -moz-transform-origin: 0 0;
    -o-transform-origin: 0 0;
    transform-origin: 0 0;
    opacity: 1;
    left: 0px;
  }
}
@keyframes fromRight {
  0% {
    -webkit-transform: rotateX(-85deg) translateX(300px);
    -moz-transform: rotateX(-85deg) translateX(300px);
    transform: rotateX(-85deg) translateX(300px);
    -webkit-transform-origin: 0 0;
    -moz-transform-origin: 0 0;
    -o-transform-origin: 0 0;
    transform-origin: 0 0;
    opacity: .3;
    left: 55%;
  }
  100% {
    -webkit-transform: rotateX(0) translateX(0);
    -moz-transform: rotateX(0) translateX(0);
    transform: rotateX(0) translateX(0);
    -webkit-transform-origin: 0 0;
    -moz-transform-origin: 0 0;
    -o-transform-origin: 0 0;
    transform-origin: 0 0;
    opacity: 1;
    left: 55%;
  }
}
/* The actual timeline (the vertical ruler) */
.timeline-vertical {
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
  z-index: 1;
  overflow: visible;
}
.timeline-vertical .article-title {
  padding-top: 0px !important;
}
/* The actual timeline (the vertical ruler) */
.timeline-vertical::after {
  content: '';
  position: absolute;
  width: 6px;
  background-color: #57483A;
  top: 22px;
  bottom: 70px;
  left: 50%;
  margin-left: -3px;
  z-index: -1;
}
/* Container around content */
.container {
  padding: 10px 40px !important;
  position: relative;
  background-color: inherit;
  width: 45%;
  opacity: 0;
}
.container.displayed {
  animation-name: fadeIn;
  animation-duration: 1.2s;
  opacity: 1;
}
/* The circles on the timeline */
.container::after {
  content: '';
  position: absolute;
  width: 50px;
  height: 50px;
  right: -80px;
  background-color: white;
  border: 2px solid #57483A;
  top: 2px;
  border-radius: 50%;
  z-index: 5;
  opacity: 1 !important;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}
.prod-booker.container::after {
  background-image: url('/imgs/icons/icon-user--editor_booker.svg');
}
.tpm-tpc.container::after {
  background-image: url('/imgs/icons/icon-user--tpc_tpm.svg');
}
.sat-ops::after {
  background-image: url('/imgs/icons/icon-user--satops-timeline.svg');
}
.cr-tds-audio.container::after {
  background-image: url('/imgs/icons/icon-user--TDs_audio.svg');
}
/* Place the container to the left */
.left.displayed {
  left: 0;
  animation-name: fromLeft;
  animation-duration: .5s;
  animation-timing-function: ease-out;
}
/* Place the container to the right */
.right.displayed {
  left: 55%;
  animation-name: fromRight;
  animation-duration: .5s;
  animation-timing-function: ease-out;
}
/* Add arrows to the left container (pointing right) */
.left::before {
  content: " ";
  height: 6px;
  position: absolute;
  top: 23px;
  width: 74px;
  z-index: 1;
  background: #57483A;
  right: -34px;
}
/* Add arrows to the right container (pointing left) */
.right::before {
  content: " ";
  height: 6px;
  position: absolute;
  top: 23px;
  width: 74px;
  z-index: 1;
  left: -33px;
  background: #57483A;
}
/* Fix the circle for containers on the right side */
.right::after {
  left: -80px;
}
/* The actual content */
.content {
  padding: 20px 30px;
  background-color: white;
  position: relative;
  border-radius: 6px;
  border: 2px solid #57483A;
}
.content > h2.article-title {
  margin-bottom: 10px;
  padding-top: 0px;
}
.timeline-center-node {
  position: relative;
  width: 260px;
  margin: 20px 0px;
  z-index: 5;
  padding: 10px 10px;
  text-align: center;
  background: #fff;
  left: calc(50% - 130px);
  border-radius: 6px;
  border: 2px solid #57483A;
}
/* Media queries - Responsive timeline on screens less than 600px wide */
@media screen and (max-width: 760px) {
  /* Place the timelime to the left */
  /* Full-width containers */
  .container {
    width: 100%;
    padding-left: 70px;
    padding-right: 25px;
  }
  /* Make sure that all arrows are pointing leftwards */
  .container::before {
    left: 60px;
    border: medium solid white;
    border-width: 10px 10px 10px 0;
    border-color: transparent white transparent transparent;
  }
  /* Make sure all circles are at the same spot */
  .left::after,
  .right::after {
    left: 15px;
  }
  /* Make all right containers behave like the left ones */
  .right {
    left: 0%;
  }
}
@media screen and (max-width: 1240px) {
  .container::after {
    right: -63px;
  }
  .right::after {
    left: -63px;
  }
}
@media screen and (max-width: 760px) {
  .timeline-item .article-title {
    padding-right: 0px;
    padding-left: 0px;
    border-top: none;
  }
  .container::before {
    display: none;
  }
  .right.displayed {
    left: 0%;
  }
  .container::after {
    display: none;
  }
}