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

.color-default.footer-L {
  background-color: #3a3a3a;
  border-top: 1px solid #3a3a3a;
}
.color-default.footer-R {
  background-color: #979997;
  border-top: 1px solid #979997;
}
.color-default > .footer-text {
  color: rgba(255, 255, 255, 0.87);
}
.color-default > .footer-text span.direction {
  color: rgba(255, 255, 255, 0.87);
}
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: #333;
  font-size: 15px;
}
.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;
}

.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;
  }
}

@font-face {
  font-family: 'concerto';
  src: url('../fonts/concerto/concerto.eot?h0jnrj');
  src: url('../fonts/concerto/concerto.eot?h0jnrj#iefix') format('embedded-opentype'), url('../fonts/concerto/concerto.woff2?h0jnrj') format('woff2'), url('../fonts/concerto/concerto.ttf?h0jnrj') format('truetype'), url('../fonts/concerto/concerto.woff?h0jnrj') format('woff'), url('../fonts/concerto/concerto.svg?h0jnrj#concerto') format('svg');
  font-weight: normal;
  font-style: normal;
}
[class^="icon-"],
[class*=" icon-"] {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'concerto' !important;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  /* Enable Ligatures ================ */
  letter-spacing: 0;
  -webkit-font-feature-settings: "liga";
  -moz-font-feature-settings: "liga=1";
  -moz-font-feature-settings: "liga";
  -ms-font-feature-settings: "liga" 1;
  -o-font-feature-settings: "liga";
  font-feature-settings: "liga";
  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.icon-process:before {
  content: "\e905";
}
.icon-mvp-prototype:before {
  content: "\e904";
}
.icon-history:before {
  content: "\e900";
}
.icon-lab:before {
  content: "\e901";
}
.icon-prototype:before {
  content: "\e902";
}
.icon-style-guide:before {
  content: "\e903";
}
.intro-page {
  background-color: transparent;
  position: relative;
  margin: 0;
  padding: 0;
  height: 90vh;
  display: flex;
  align-items: center;
}
.intro__promo {
  position: relative;
}
.intro__image {
  position: relative;
  max-height: 65vh;
  left: 20%;
  box-shadow: 0 10px 50px 0 rgba(0, 0, 0, 0.2), 0 5px 20px 0 rgba(0, 0, 0, 0.05), 0 1px 4px 0 rgba(0, 0, 0, 0.05);
}
.intro__image::after {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 20;
  content: '';
  height: 10%;
  width: 10%;
  background: green;
  border-left: 1px solid rgba(0, 0, 0, 0.7);
  animation: cursor__blink 0.1s infinite;
}
@keyframes cursor__blink {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.intro__left {
  position: relative;
  box-sizing: border-box;
  top: 0;
  padding: 20px 0 20px 120px;
  min-width: 300px;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.intro__nav {
  position: relative;
}
.intro__logo {
  font-size: 36px;
  font-weight: 300;
  margin: 0 0 20px 0;
  letter-spacing: 0.1em;
}
.intro__nav-list {
  position: relative;
  list-style: none;
  padding: 0;
  margin: 20px 0;
}
.intro__nav-item {
  position: relative;
  font-weight: 300;
  font-size: 18;
  padding: 14px 4px;
}
/**
 *
 * New variables names
 *
 */
.intro__nav-item-link {
  text-decoration: none;
  color: #666666;
  transition: 0.3s ease-out;
}
.intro__nav-item-link:hover {
  color: #000000;
}
.intro__nav-item-text {
  position: relative;
  box-sizing: border-box;
  padding: 0;
  margin-left: 6px;
  letter-spacing: 0.05em;
}
.intro__nav-item-text::before,
.intro__nav-item-text::after {
  content: '';
  position: absolute;
  bottom: -3px;
  height: 1px;
  width: 0;
  opacity: 0.5;
  background-color: #000000;
  transition: 0.3s ease-out;
}
.intro__nav-item-text::before {
  left: 50%;
}
.intro__nav-item-text::after {
  right: 50%;
}
.intro__nav-item-link:hover .intro__nav-item-text::before,
.intro__nav-item-link:hover .intro__nav-item-text::after {
  width: 50%;
}
.nav {
  position: absolute;
  padding: 15px;
  top: 0;
  left: 0;
}
.nav__link {
  position: relative;
  color: #777777;
  font-weight: 300;
  text-decoration: none;
  transition: 0.3s ease-out;
}
.nav__link:hover {
  color: #000000;
}
.nav__text {
  position: relative;
}
.nav__text::before,
.nav__text::after {
  content: '';
  position: absolute;
  bottom: -3px;
  height: 1px;
  width: 0;
  opacity: 0.5;
  background-color: #000000;
  transition: 0.3s ease-out;
}
.nav__text::before {
  left: 50%;
}
.nav__text::after {
  right: 50%;
}
.nav__link:hover .nav__text::before,
.nav__link:hover .nav__text::after {
  width: 50%;
}
.iframe {
  position: relative;
  height: calc(20vh);
  width: calc(20vw);
  box-shadow: 0 2px 15px rgba(0, 0, 0, 0.2);
  top: 50px;
  left: 40px;
  border: none;
}

.ux-page {
  background: #fefefe;
  position: relative;
  margin: 0;
  padding: 0;
}
.bg {
  position: absolute;
  z-index: 0;
  font-family: 'Titillium Web', sans-serif;
  color: #ffffff;
  background-color: transparent;
  font-weight: 900;
  font-size: 50vh;
  white-space: nowrap;
  left: 50%;
  top: 0;
  line-height: 1.0;
  transform: translate(-50%, 0);
  text-align: center;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  text-shadow: 0 5vh 10vh rgba(0, 0, 0, 0.05), 0 0 20vh rgba(0, 0, 0, 0.03);
  animation: fadeIn 0.8s ease-in-out;
}
.ux-page--index .bg {
  position: fixed;
  z-index: 0;
  white-space: normal;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  text-align: center;
  font-size: 55vh;
  line-height: 0.75;
}
.content {
  background-color: transparent;
  position: relative;
  margin: 0;
  padding-top: 22vh;
}
.content.intro-page {
  padding: 0;
  display: flex;
  align-items: center;
}
.h1 {
  position: absolute;
  z-index: 1;
  text-align: left;
  box-sizing: border-box;
  top: 0;
  left: 0;
  padding: 19px 70px;
  line-height: 1;
  margin: 0;
  font-size: 24px;
  font-family: 'Titillium Web', sans-serif;
  font-weight: 200;
  animation: fadeIn 0.5s ease-in-out 0.3s;
  animation-fill-mode: backwards;
}
.links {
  position: relative;
  margin: 150px auto 0 auto;
  max-width: 800px;
  list-style: none;
  transform-origin: left top;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}
.link {
  position: relative;
  width: 33.333333%;
  min-width: 250px;
  padding: 0 50px 50px 0;
  box-sizing: border-box;
  animation: linkSlideIn 0.7s ease-in-out;
  animation-fill-mode: backwards;
}
.link:nth-child(1) {
  animation-delay: 0.5s;
}
.link:nth-child(2) {
  animation-delay: 0.6s;
}
.link:nth-child(3) {
  animation-delay: 0.7s;
}
.link:nth-child(4) {
  animation-delay: 0.8s;
}
.link:nth-child(5) {
  animation-delay: 0.9s;
}
.link:nth-child(6) {
  animation-delay: 1s;
}
.link-title {
  position: relative;
  text-decoration: none;
  color: #e73c0e;
  font-size: 14px;
  font-weight: 700;
}
.link-title::before,
.link-title::after {
  content: '';
  position: absolute;
  bottom: -2px;
  height: 2px;
  width: 0;
  background-color: #e73c0e;
  transition: 0.3s ease-out;
}
.link-title::before {
  left: 50%;
}
.link-title::after {
  right: 50%;
}
.link-title:hover::before,
.link-title:hover::after {
  width: 50%;
}
.link-title.link-title--inactive {
  color: #000000;
}
.link-info {
  margin-top: 10px;
  font-size: 12px;
  line-height: 1.4;
}
@keyframes linkSlideIn {
  0% {
    opacity: 0;
    transform: translate(0, 0) scale(0.9);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0) scale(1);
  }
}

#grid-cont {
  position: relative;
  background-color: #212121;
  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: 13px;
}
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: 13px;
  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;
}
.article-title.qp-ui {
  padding-top: 50px!important;
  color: #E73C0E !important;
}
.article-content {
  padding-top: 35px;
}
#side-nav {
  transition: 0.3s ease-out;
  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;
}
.chapter .chapter-toc h1 {
  font-size: 15px;
  font-weight: 400;
  color: #f4f6f7;
}
.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;
}
.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: #a04488 !important;
}
.color-master #side-nav nav a.nav_selected {
  color: #E73C0E;
}
.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: #a04488;
}
.color-yellow #side-nav nav a.nav_selected {
  color: #fcb711;
}
.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: #a04488;
}
.color-orange #side-nav nav a.nav_selected {
  color: #f37021;
}
.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: #000000;
}
.color-red header.qp-ui-peekaboo.qp-ui-peekaboo-active {
  background-color: #000000;
}
.color-red .header-wrapper .header-title {
  color: #FFFFFF;
}
.color-red .chapter .chapter-toc {
  border-left-color: #a04488;
}
.color-red #side-nav nav a.nav_selected {
  color: #000000;
}
.color-red .chapter .chapter-title {
  margin-top: 10px;
  margin-bottom: 65px;
  color: #a04488;
}
.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: #a04488;
  transition: 0.4s ease-out;
  cursor: pointer;
  border-bottom: 0px solid rgba(0, 0, 0, 0);
}
.color-red .chapter a:hover {
  border-color: rgba(0, 0, 0, 0.3);
}
.color-red .chapter a:active {
  border-color: rgba(0, 0, 0, 0.6);
}
.color-red .article-title.qp-ui {
  color: #a04488 !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: #a04488;
}
.color-purple #side-nav nav a.nav_selected {
  color: #6460aa;
}
.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: #a04488;
}
.color-blue #side-nav nav a.nav_selected {
  color: #0089d0;
}
.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: #a04488 !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: #0db14b;
}
.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: #be1f36;
}
.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;
}

/*.submenu {
  padding-left: 26px;
}*/
#side-nav nav a {
  font-weight: 700;
}
#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: #333;
  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 {
  background: none !important;
  background-color: none  !important;
}
.menu__list {
  overflow: hidden;
}
a:hover,
a:active,
a:focus {
  background: none !important;
  background-color: none  !important;
}
.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 {
  background: none !important;
  background-color: none  !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;
}
@keyframes collapse {
  0% {
    max-height: none;
  }
  100% {
    max-height: 0;
  }
}

.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;
}

.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%;
}

.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 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;
}
/* 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;
}
.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: 3vw;
  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 2vw;
  -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(-200px, 0, 0);
  transform: translate3d(-200px, 0, 0);
}
.js .trigger-headline--hidden span:nth-child(2) {
  -webkit-transform: translate3d(-175px, 0, 0);
  transform: translate3d(-175px, 0, 0);
}
.js .trigger-headline--hidden span:nth-child(3) {
  -webkit-transform: translate3d(-150px, 0, 0);
  transform: translate3d(-150px, 0, 0);
}
.js .trigger-headline--hidden span:nth-child(4) {
  -webkit-transform: translate3d(-125px, 0, 0);
  transform: translate3d(-125px, 0, 0);
}
.js .trigger-headline--hidden span:nth-child(5) {
  -webkit-transform: translate3d(-100px, 0, 0);
  transform: translate3d(-100px, 0, 0);
}
.js .trigger-headline--hidden span:nth-child(6) {
  -webkit-transform: translate3d(-75px, 0, 0);
  transform: translate3d(-75px, 0, 0);
}
.js .trigger-headline--hidden span:nth-child(7) {
  -webkit-transform: translate3d(-50px, 0, 0);
  transform: translate3d(-50px, 0, 0);
}
.js .trigger-headline--hidden span:nth-child(8) {
  -webkit-transform: translate3d(250px, 0, 0);
  transform: translate3d(250px, 0, 0);
}
.js .trigger-headline--hidden span:nth-child(9) {
  -webkit-transform: translate3d(225px, 0, 0);
  transform: translate3d(225px, 0, 0);
}
.js .trigger-headline--hidden span:nth-child(10) {
  -webkit-transform: translate3d(200px, 0, 0);
  transform: translate3d(200px, 0, 0);
}
.js .trigger-headline--hidden span:nth-child(11) {
  -webkit-transform: translate3d(175px, 0, 0);
  transform: translate3d(175px, 0, 0);
}
.js .trigger-headline--hidden span:nth-child(12) {
  -webkit-transform: translate3d(150px, 0, 0);
  transform: translate3d(150px, 0, 0);
}
.js .trigger-headline--hidden span:nth-child(13) {
  -webkit-transform: translate3d(125px, 0, 0);
  transform: translate3d(125px, 0, 0);
}
.js .trigger-headline--hidden span:nth-child(14) {
  -webkit-transform: translate3d(100px, 0, 0);
  transform: translate3d(100px, 0, 0);
}
.js .trigger-headline--hidden span:nth-child(15) {
  -webkit-transform: translate3d(75px, 0, 0);
  transform: translate3d(75px, 0, 0);
}
.js .trigger-headline--hidden span:nth-child(16) {
  -webkit-transform: translate3d(75px, 0, 0);
  transform: translate3d(75px, 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;
}

.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;
}

table thead tr {
  display: block;
  overflow-x: hidden;
}
table tbody {
  display: block;
  height: 650px;
  overflow: auto;
  overflow-x: scroll;
}
.item img:hover {
  transform: scale(2);
  cursor: pointer;
}
.item img {
  cursor: pointer;
  transition: all 0.5s ease-in-out;
}
.item1 img:hover {
  transform: scale(2);
  cursor: pointer;
  margin-top: 65px;
}
.item1 img {
  cursor: pointer;
  transition: all 0.5s ease-in-out;
}
.item2 img:hover {
  transform: scale(2);
  cursor: pointer;
  margin-top: -200px;
}
.item2 img {
  cursor: pointer;
  transition: all 0.5s ease-in-out;
}
.itemVideo img:hover {
  transform: scale(4);
  cursor: pointer;
  margin-top: -150px;
}
.itemVideo img {
  cursor: pointer;
  transition: all 0.5s ease-in-out;
}
.wysiwyg-content h3 {
  font-weight: bold;
}
.wysiwyg-content .heading-icon > * {
  display: inline-block;
  vertical-align: middle;
}
.wysiwyg-content .heading-icon > img {
  width: 30px;
  height: auto;
  margin-right: 10px;
}
.wysiwyg-content .reference-link {
  display: inline-block;
  font-size: 10px;
  vertical-align: top;
  margin-right: 3px;
}
.intro-text {
  font-size: 20px;
  margin-bottom: 40px;
}
.wysiwyg-content p {
  font-weight: 300;
  font-size: 14px;
}
.wysiwyg-content h3 {
  margin: 20px 0;
  font-weight: 500;
  font-size: 16px;
  color: #333;
}
.wysiwyg-content .scrolling-table {
  overflow-x: scroll;
  height: 500px;
  position: relative;
}
.wysiwyg-content .scrolling-table__body {
  max-height: 395px;
  overflow-y: scroll;
  position: absolute;
  top: 90px;
  left: 0px;
}
.wysiwyg-content th,
.wysiwyg-content td {
  border: 1px solid #a04488;
  vertical-align: middle;
  background-color: #f4f6f7;
}
.wysiwyg-content th {
  text-align: center;
  min-width: 138.3px;
  max-width: 138.3px;
}
.wysiwyg-content td {
  text-align: center;
  min-width: 138.018px;
  max-width: 138.018px;
}
.wysiwyg-content .check-table th,
.wysiwyg-content .check-table td {
  text-align: center;
  min-width: 150px;
  max-width: 150px;
}
.wysiwyg-content td:first-child,
.wysiwyg-content th:first-child {
  min-width: 200px;
  max-width: 200px;
  text-align: center;
}
@media (max-width: 600px) {
  .wysiwyg-content td:first-child,
  .wysiwyg-content th:first-child {
    min-width: 90px;
    max-width: 90px;
  }
}
.wysiwyg-content .check-table td:first-child,
.wysiwyg-content .check-table th:first-child {
  min-width: 160px;
  max-width: 160px;
}
.wysiwyg-content td:first-child {
  font-size: 12px;
}
.wysiwyg-content th {
  background: #212121;
  color: #fff;
  height: 90px;
  padding: 0px 20px;
}
.wysiwyg-content td {
  padding: 10px 10px;
}
.wysiwyg-content tr td:first-child,
.wysiwyg-content tr th {
  font-weight: 500;
  text-transform: uppercase;
}
.wysiwyg-content tr td:first-child {
  background: #212121;
  color: #fff;
}
/*.wysiwyg-content tr td:last-child {
  background: #ffc34a;
  color: #333; }

.wysiwyg-content tr th:last-child {
  background: #f9b01d;
  color: #333; }*/
.wysiwyg-content tr:nth-child(even) {
  background: #EAF3FA;
}
.wysiwyg-content tr:nth-child(odd) {
  background: #f9f9f9;
}
.wysiwyg-content .table-highlight-header {
  background: #ffcf6f;
  color: #333;
}
.wysiwyg-content .table-highlight {
  background: #ffe3aa;
  color: #333;
}
.wysiwyg-content tr td .fa {
  font-size: 21px;
}
.wysiwyg-content tr td .fa-check-circle {
  color: #28b141;
}
.wysiwyg-content tr td .fa-times-circle {
  color: #d62d2d;
}
.section-nav__item-list {
  height: auto;
  max-width: 300px;
  -webkit-column-width: 250px;
  -moz-column-width: 250px;
  column-width: 250px;
}
.section-nav__item-list--md {
  max-width: 600px;
}
.section-nav__item-list--lg {
  max-width: 100%;
}
.section-nav__item {
  padding-top: 16px;
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
  break-inside: avoid;
  width: 250px;
  -webkit-flex-basis: 250px;
  -moz-flex-basis: 250px;
  flex-basis: 250px;
  -ms-flex-preferred-size: 250px;
  margin-right: 20px;
}
.section-nav__item:last-child {
  padding-bottom: 0px;
}
.section-nav__item a {
  color: #3485cc;
  border-bottom: 1px solid rgba(52, 133, 204, 0);
  -webkit-transition: 0.4s ease-out;
  transition: 0.4s ease-out;
  cursor: pointer;
  font-size: 20px;
  line-height: 1;
}
.section-nav__item a:hover {
  border-color: rgba(52, 133, 204, 0.5);
}
.section-item__title {
  font-family: "RobotoDraft", sans-serif;
  font-size: 24px;
  font-weight: 400;
  line-height: 32px;
  margin-bottom: 10px;
  color: #f4f6f7;
}
.section-item__icon {
  height: 30px;
  width: 30px;
  display: inline-block;
  vertical-align: top;
  margin-right: 10px;
}
.section-item__icon img {
  height: 100%;
  width: 100%;
  display: block;
}
.section-item {
  margin-bottom: 60px;
}
.section-item__blocks {
  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-lines: multiple;
  -moz-box-lines: multiple;
  box-lines: multiple;
  -webkit-flex-wrap: wrap;
  -moz-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  margin: 0px -22px;
}
.section-item__block {
  -webkit-flex-grow: 1;
  -moz-flex-grow: 1;
  -webkit-box-flex: 1;
  flex-grow: 1;
  -ms-flex-positive: 1;
  padding: 0px 15px;
  margin-bottom: 15px;
}
.section-item__block img {
  display: block;
  width: 100%;
  height: auto;
}
.section-item__block h3 {
  font-weight: 700;
  margin-bottom: 10px;
}
.section-item__block ul,
.section-item__block ol {
  list-style: none;
  margin-bottom: 10px;
  position: relative;
  overflow: hidden;
}
.section-item__block li {
  position: relative;
  padding-left: 30px;
  font-size: 13px;
}
.section-item__block li:before {
  content: "";
  display: block;
  width: 3px;
  height: 3px;
  position: absolute;
  top: 10px;
  left: 10px;
  border-radius: 3px;
}
.section-item__block ul > li:before {
  background: #3485cc;
  border: 1px solid #3485cc;
}
.section-item__block ul > li > ul > li:before {
  background: transparent;
  border: 1px solid #3485cc;
}
.section-item__block ul > li > ul > li > ul > li:before {
  border-radius: 0;
  height: 1px;
  background: #3485cc;
}
.section-item__block p {
  margin-bottom: 15px;
}
.section-item__block p:last-child {
  margin-bottom: 0px;
}
.section-item__block strong {
  font-weight: 700;
}
.section-item__block em {
  font-style: italic;
}
.section-item__block a {
  color: #3485cc;
}
.section-item__block object {
  min-height: 500px;
}
.section-item__block iframe,
.section-item__block video,
.section-item__block audio,
.section-item__block object {
  width: 100%;
}
.section-item__block figcaption {
  color: #757575;
  font-size: 13px;
  line-height: 24px;
}
.section-item--1 .section-item__block {
  -webkit-box-flex: 100%;
  -moz-box-flex: 100%;
  box-flex: 100%;
  -webkit-flex: 100%;
  -moz-flex: 100%;
  -ms-flex: 100%;
  flex: 100%;
  max-width: 100%;
}
.section-item--1-2 .section-item__block:nth-child(2n+1) {
  -webkit-box-flex: 33.3%;
  -moz-box-flex: 33.3%;
  box-flex: 33.3%;
  -webkit-flex: 33.3%;
  -moz-flex: 33.3%;
  -ms-flex: 33.3%;
  flex: 33.3%;
  max-width: 33.3%;
}
.section-item--1-2 .section-item__block:nth-child(2n) {
  -webkit-box-flex: 66.6%;
  -moz-box-flex: 66.6%;
  box-flex: 66.6%;
  -webkit-flex: 66.6%;
  -moz-flex: 66.6%;
  -ms-flex: 66.6%;
  flex: 66.6%;
  max-width: 66.6%;
}
@media (max-width: 800px) {
  .section-item--1-2 .section-item__block:nth-child(2n+1) {
    -webkit-box-flex: 100%;
    -moz-box-flex: 100%;
    box-flex: 100%;
    -webkit-flex: 100%;
    -moz-flex: 100%;
    -ms-flex: 100%;
    flex: 100%;
    max-width: 100%;
    margin-bottom: 15px;
  }
  .section-item--1-2 .section-item__block:nth-child(2n) {
    -webkit-box-flex: 100%;
    -moz-box-flex: 100%;
    box-flex: 100%;
    -webkit-flex: 100%;
    -moz-flex: 100%;
    -ms-flex: 100%;
    flex: 100%;
    max-width: 100%;
  }
}
.section-item--1-1 .section-item__block {
  -webkit-box-flex: 50%;
  -moz-box-flex: 50%;
  box-flex: 50%;
  -webkit-flex: 50%;
  -moz-flex: 50%;
  -ms-flex: 50%;
  flex: 50%;
  max-width: 50%;
}
@media (max-width: 800px) {
  .section-item--1-1 .section-item__block {
    -webkit-box-flex: 100%;
    -moz-box-flex: 100%;
    box-flex: 100%;
    -webkit-flex: 100%;
    -moz-flex: 100%;
    -ms-flex: 100%;
    flex: 100%;
    margin-bottom: 15px;
    max-width: 100%;
  }
}
.section-item--1-1-1 .section-item__block {
  max-width: 33.33%;
  -webkit-box-flex: 33.3%;
  -moz-box-flex: 33.3%;
  box-flex: 33.3%;
  -webkit-flex: 33.3%;
  -moz-flex: 33.3%;
  -ms-flex: 33.3%;
  flex: 33.3%;
}
@media (max-width: 800px) {
  .section-item--1-1-1 .section-item__block {
    -webkit-box-flex: 100%;
    -moz-box-flex: 100%;
    box-flex: 100%;
    -webkit-flex: 100%;
    -moz-flex: 100%;
    -ms-flex: 100%;
    flex: 100%;
    max-width: 100%;
    margin-bottom: 15px;
  }
}
#container {
  display: flex;
  justify-content: space-between;
  overflow-x: scroll;
}
#container figure {
  width: 300px !important;
}
#container p {
  color: #f4f6f7 !important;
  font-size: 15px;
}
#container > figure {
  margin-left: 20px;
}
#border {
  border: 1px solid #a04488;
}
#summary tbody {
  height: auto !important;
  font-size: 12px !important;
}
#summary td {
  padding: 20px 10px !important;
}
#full {
  width: 100% !important;
  background-color: black !important;
  height: 20px !important;
  z-index: 100;
  overflow-x: hidden;
}
#full td {
  padding: 0px 0px;
}
video:hover {
  cursor: pointer;
}
@media (max-height: 1124px) {
  #landing-tbody {
    max-height: 500px !important;
  }
}
* {
  box-sizing: border-box;
  border-collapse: collapse;
}
tbody,
thead tr {
  display: table;
  width: 100%;
  table-layout: fixed;
}
.footer-text {
  outline: none !important;
}
#mainNavMenu {
  font-weight: 600 !important;
}
#mainNavMenu ul li a:hover {
  color: #a04488;
}
#mainNavMenu ul li a.changeColor {
  color: #a04488;
}
#mainNavMenu ul li {
  list-style-type: none;
}
#side-nav nav a {
  padding: 10px 24px 10px 20px !important;
}
.blue {
  color: #a04488 !important;
}

@font-face {
  font-family: 'codropsicons';
  font-weight: normal;
  font-style: normal;
  src: url('../fonts/codropsicons/codropsicons.eot');
  src: url('../fonts/codropsicons/codropsicons.eot?#iefix') format('embedded-opentype'), url('../fonts/codropsicons/codropsicons.woff') format('woff'), url('../fonts/codropsicons/codropsicons.ttf') format('truetype'), url('../fonts/codropsicons/codropsicons.svg#codropsicons') format('svg');
}
*,
*::after,
*::before {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
.clearfix::before,
.clearfix::after {
  content: '';
  display: table;
}
.clearfix::after {
  clear: both;
}
body.page-team {
  font-family: 'RobotoDraft', Avenir, 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-weight: 300;
  color: #515158;
  background: #f0f0f0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
a {
  text-decoration: none;
  color: #aaa;
  outline: none;
}
a:hover,
button:hover {
  color: #515158;
  outline: none;
}
a:focus,
button:focus {
  outline: none;
}
.hidden {
  position: absolute;
  overflow: hidden;
  width: 0;
  height: 0;
  pointer-events: none;
}
/* Icons */
.icon {
  display: block;
  width: 1em;
  height: 1em;
  margin: 0 auto;
  fill: currentColor;
}
.team-container {
  position: relative;
  width: 100vw;
  height: 100vh;
}
/* Header */
.codrops-header {
  position: absolute;
  z-index: 100;
  top: 0;
  left: 0;
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
  align-items: center;
  padding: 1.5em 1em;
  text-align: center;
}
.codrops-header h1 {
  font-size: 1.15em;
  font-weight: normal;
  line-height: 1;
  margin: 0 0 0 1em;
}
/* Top Navigation Style */
.codrops-links {
  position: relative;
  display: inline-block;
  text-align: center;
  white-space: nowrap;
}
.codrops-links::after {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  width: 1px;
  height: 100%;
  background: rgba(0, 0, 0, 0.1);
  -webkit-transform: rotate3d(0, 0, 1, 22.5deg);
  transform: rotate3d(0, 0, 1, 22.5deg);
  display: none;
}
.codrops-icon {
  display: inline-block;
  width: 1.5em;
  margin: 0.5em;
  padding: 0em 0;
  text-decoration: none;
}
.codrops-icon span {
  display: none;
}
.codrops-icon::before {
  font-family: 'codropsicons';
  font-weight: normal;
  font-style: normal;
  font-variant: normal;
  line-height: 1;
  margin: 0 5px;
  text-transform: none;
  speak: none;
  -webkit-font-smoothing: antialiased;
}
.codrops-icon--drop::before {
  content: '\e001';
  color: #09c;
}
.codrops-icon--prev::before {
  content: '\e004';
}
.team-main {
  position: fixed;
  top: 0;
  left: 0;
  overflow: hidden;
  width: calc(100vw - 300px);
  height: 100vh;
}
@media (max-width: 1900px) {
}
.mall {
  position: relative;
  width: 100%;
  height: 100%;
  pointer-events: none;
  -webkit-perspective: 3500px;
  perspective: 3500px;
  -webkit-perspective-origin: 0% 50%;
  perspective-origin: 0% 50%;
  -webkit-transition: -webkit-transform 0.8s;
  transition: transform 0.8s;
  -webkit-transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
  transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
}
@media (max-width: 1900px) and (min-height: 1000px) {
  .mall {
    transform: scale(0.8);
  }
}
@media (max-width: 1600px) and (min-height: 1000px) {
  .mall {
    transform: scale(0.7);
  }
}
@media (max-width: 1500px) and (min-height: 1000px) {
  .mall {
    transform: scale(0.6);
  }
}
@media (max-width: 1050px) and (min-height: 1000px) {
  .mall {
    transform: scale(0.8);
  }
}
.mall.mall--content-open {
  -webkit-transform: translate3d(0, -25%, 0) scale3d(0.7, 0.7, 1);
  transform: translate3d(0, -25%, 0) scale3d(0.7, 0.7, 1);
}
@media (max-width: 1500px) and (min-height: 1000px) {
  .mall.mall--content-open {
    transform: translate3d(0, -25%, 0) scale3d(0.5, 0.5, 1);
  }
}
@media (max-width: 1050px) and (min-height: 1000px) {
  .mall.mall--content-open {
    transform: translate3d(0, -25%, 0) scale3d(0.9, 0.9, 1);
  }
}
.surroundings,
.levels {
  position: absolute;
  top: 50%;
  left: 50%;
}
.surroundings {
  width: 192vmin;
  /* double of mall map */
  height: 128vmin;
  margin: -64vmin 0 0 -96vmin;
  pointer-events: none;
  -webkit-transition: opacity 0.8s;
  transition: opacity 0.8s;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
}
.surroundings__map {
  opacity: 0.3;
  max-width: 100%;
  display: block;
}
.surroundings--hidden {
  opacity: 0;
}
.levels {
  width: 96vmin;
  height: 64vmin;
  margin: -35vmin 0 0 -52vmin;
  -webkit-transition: -webkit-transform 0.3s;
  transition: transform 0.3s;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
}
.surroundings {
  margin-left: -68vmin;
}
.surroundings,
.levels {
  -webkit-transform: rotateX(70deg) rotateZ(-45deg) translateZ(-15vmin);
  transform: rotateX(70deg) rotateZ(-45deg) translateZ(-15vmin);
}
.level {
  position: relative;
  width: 100%;
  height: 100%;
  cursor: pointer;
  pointer-events: auto;
  -webkit-transition: opacity 1s, -webkit-transform 1s;
  transition: opacity 1s, transform 1s;
  -webkit-transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
  transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  opacity: 1;
}
.level__name {
  font-size: 2.5vmin;
  line-height: 0;
  position: absolute;
  z-index: 100;
  top: -2em;
  left: 3.5em;
  white-space: nowrap;
  color: #7d7d86;
  -webkit-transform: rotateZ(45deg) rotateX(-70deg) translateZ(5vmin);
  transform: rotateZ(45deg) rotateX(-70deg) translateZ(5vmin);
  -webkit-transition: -webkit-transform 1s, color 0.3s;
  transition: transform 1s, color 0.3s;
  -webkit-transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
  transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
  transform-origin: 0% 0%;
  -webkit-transform-origin: 0% 0%;
}
.level__name p {
  margin-top: 3vmin;
  font-size: 1.6vmin;
  max-width: 23vmin;
  white-space: normal;
  line-height: 1.5;
  opacity: 0;
  transition: opacity 0.3s;
  -webkit-transition: opacity 0.3s;
}
.mall--content-open .level--current .level__name p {
  opacity: 1;
}
.level__name h3 {
  font-size: 2.0vmin;
  color: #e73c0e;
  margin-bottom: 2.5vmin;
  font-family: 'Raleway';
  text-transform: uppercase;
  font-weight: 400;
}
.level__name h4 {
  font-weight: 400;
  font-size: 1.6vmin;
  color: #646464;
}
.level__name img {
  position: absolute;
  bottom: 8vmin;
  left: 0px;
  opacity: 0;
  transform: scale(0.5);
  width: 17vmin;
  height: auto;
  bottom: 126%;
}
@keyframes bounce {
  0% {
    opacity: 0;
    transform: scale(0.5);
  }
  50% {
    opacity: 1;
    transform: scale(1.1);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
.levels--open .level__name img {
  animation: bounce 0.5s 0.3s;
  animation-fill-mode: forwards;
}
.level:hover::after,
.level--current::after {
  color: #515158;
}
.level--current::after,
.level--current .level__name {
  -webkit-transform: rotateZ(-20deg) rotateZ(45deg) rotateX(-70deg) translateZ(5vmin) translateX(5vmin) translateY(-10vmin);
  transform: rotateZ(-20deg) rotateZ(45deg) rotateX(-70deg) translateZ(5vmin) translateX(5vmin) translateY(-10vmin);
}
.mall--content-open .level--current .level__name {
  transition-delay: 0s;
  -webkit-transition-delay: 0s;
  -webkit-transform: rotateZ(-20deg) rotateZ(45deg) rotateX(-70deg) translateZ(5vmin) translateX(5vmin) translateY(-10vmin);
  transform: rotateZ(-20deg) rotateZ(45deg) rotateX(-70deg) translateZ(0vmin) translateX(-8vmin) translateY(13vmin);
}
/*
.level--1::after {
	content: 'Mina';
}

.level--2::after {
	content: 'Amiel';
}

.level--3::after {
	content: 'Jo';
}

.level--4::after {
	content: 'Will';
}
*/
.level:not(:first-child) {
  position: absolute;
  top: 0;
  left: 0;
}
.level--2 {
  -webkit-transform: translateZ(10vmin);
  transform: translateZ(10vmin);
}
.level--3 {
  -webkit-transform: translateZ(20vmin);
  transform: translateZ(20vmin);
}
.level--4 {
  -webkit-transform: translateZ(30vmin);
  transform: translateZ(30vmin);
}
/* Selection transitions */
.levels--selected-1 .level:not(.level--1),
.levels--selected-2 .level:not(.level--2),
.levels--selected-3 .level:not(.level--3),
.levels--selected-4 .level:not(.level--4) {
  opacity: 0;
  /* fade out all others */
}
/* Other levels */
.level--current ~ .level {
  -webkit-transform: translateZ(90vmin);
  transform: translateZ(90vmin);
}
.levels--selected-2 .level--1,
.levels--selected-3 .level--1,
.levels--selected-4 .level--1,
.levels--selected-3 .level--2,
.levels--selected-4 .level--2,
.levels--selected-4 .level--3 {
  -webkit-transform: translateZ(-60vmin);
  transform: translateZ(-60vmin);
}
/* Delays */
/* 1 */
.levels--selected-1 .level--3,
.levels--selected-2 .level--3,
.levels--selected-3 .level--2,
.levels--selected-4 .level--2 {
  -webkit-transition-delay: 0.1s;
  transition-delay: 0.1s;
}
.levels--selected-1 .level--2,
.levels--selected-2 .level--current,
.levels--selected-2 .level--current::after,
.levels--selected-3 .level--current,
.levels--selected-3 .level--current::after,
.levels--selected-4 .level--3 {
  -webkit-transition-delay: 0.25s;
  transition-delay: 0.25s;
}
.levels--selected-1 .level--current,
.levels--selected-1 .level--current::after,
.levels--selected-4 .level--current,
.levels--selected-4 .level--current::after {
  -webkit-transition-delay: 0.45s;
  transition-delay: 0.45s;
}
/* Current level */
.level.level--current {
  -webkit-transform: translateZ(15vmin) rotate3d(0, 0, 1, 20deg);
  /* go to center */
  transform: translateZ(15vmin) rotate3d(0, 0, 1, 20deg);
}
/* Navigation classes */
.levels--open .level,
.levels--open .level__name {
  -webkit-transition: -webkit-transform 1s, opacity 1s;
  transition: transform 1s, opacity 1s;
  -webkit-transition-delay: 0s;
  transition-delay: 0s;
}
.levels--open .level.level--current {
  opacity: 1;
}
.levels--open .level.level--moveOutUp,
.levels--open .level.level--moveOutDown {
  opacity: 0;
}
.levels--open .level.level--moveOutUp {
  -webkit-transform: translateZ(90vmin);
  transform: translateZ(90vmin);
}
.levels--open .level.level--moveOutDown {
  -webkit-transform: translateZ(-60vmin);
  transform: translateZ(-60vmin);
}
/* Level nav */
.mallnav {
  position: absolute;
  top: 0;
  right: 0;
  text-align: center;
  -webkit-transition: opacity 0.8s;
  transition: opacity 0.8s;
}
.mallnav--hidden {
  pointer-events: none;
  opacity: 0;
}
/* Box button */
.boxbutton {
  font-size: 2em;
  display: block;
  width: 2em;
  height: 2em;
  margin: 0;
  padding: 0;
  color: #fff;
  border: 0;
  background: #d7d7dc;
}
.boxbutton--dark {
  background: #c4c4c7;
}
.boxbutton--darker {
  background: #2c2c2f;
}
.boxbutton--alt {
  background: #3d1975;
}
.boxbutton--disabled,
.boxbutton--disabled:focus,
.boxbutton--disabled:hover {
  cursor: default;
  pointer-events: none;
  opacity: 0.2;
}
/* Level map */
.map__ground {
  fill: #d7d7dc;
}
.map__outline {
  -webkit-transition: fill 0.3s;
  transition: fill 0.3s;
  fill: #bbb;
}
.level:hover .map__outline,
.level--current .map__outline {
  fill: #a6a3a8;
}
.map__tree {
  fill: #7bad7f;
}
.map__lake {
  fill: #a2bbdd;
}
.map__space {
  -webkit-transition: fill-opacity 0.8s;
  transition: fill-opacity 0.8s;
  fill: #bdbdbd;
  fill-opacity: 0.6;
}
.level--current .map__space {
  fill-opacity: 1;
}
.map__space--selected {
  fill: #A4A4A4;
}
/* Content */
.team-content {
  position: absolute;
  top: 100%;
  width: 100%;
  height: 50%;
}
.content__item {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  padding: 3em;
  text-align: center;
  background: #e4e4e4;
  -webkit-transition: -webkit-transform 0.8s;
  transition: transform 0.8s;
  -webkit-transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
  transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
}
.content__item .icon {
  margin-bottom: 2vmin;
  width: 2em;
  height: 2em;
  fill: #e73c0e;
}
.content--open .content__item {
  -webkit-transition: none;
  transition: none;
}
.content__item--current {
  -webkit-transform: translate3d(0, -100%, 0);
  transform: translate3d(0, -100%, 0);
}
.content__item-title {
  text-transform: uppercase;
  font-family: 'Raleway';
  font-size: 1.85em;
  margin: 0;
  padding: 0 0 0.75em 0;
  pointer-events: none;
  font-weight: normal;
  opacity: 0;
  -webkit-transform: translate3d(0, -3em, 0) translate3d(0, -100%, 0);
  transform: translate3d(0, -3em, 0) translate3d(0, -100%, 0);
  color: #e73c0e;
}
/*
.content__item[data-category='1'] .content__item-title {
	color: #7cbf7f;
}

.content__item[data-category='2'] .content__item-title {
	color: #6584c7;
}

.content__item[data-category='3'] .content__item-title {
	color: #dc4b7c;
}

.content__item[data-category='4'] .content__item-title {
	color: #8d65e0;
}
*/
.content__item--hover .content__item-title {
  opacity: 1;
  -webkit-transition: opacity 0.3s;
  transition: opacity 0.3s;
}
.content__item--current .content__item-title {
  opacity: 1;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}
.content__item-details {
  opacity: 0;
  margin: 0 auto;
  max-width: 50vmax;
}
.content__item--current .content__item-details {
  opacity: 1;
}
.content__meta {
  margin: 0;
  font-size: 0.85em;
  line-height: 1.5;
}
.content__meta-item {
  display: inline-block;
  padding: 0 0.25em;
}
.content__meta-item strong {
  font-weight: 400;
}
.content__meta .icon {
  display: inline-block;
  vertical-align: middle;
}
.content__desc {
  text-align: left;
  margin: 7vmin 0 0 0;
}
.content__desc ul {
  margin-left: 2vmin;
  margin-top: 2vmin;
}
.content__desc li {
  margin-bottom: 1vmin;
  line-height: 1.4;
}
.content__button {
  position: absolute;
  top: -100%;
  right: 0;
  -webkit-transition: opacity 0.3s 0.7s;
  transition: opacity 0.3s 0.7s;
}
.content__button--hidden {
  pointer-events: none;
  opacity: 0;
  -webkit-transition: none;
  transition: none;
}
/* Spaces list (sidebar) */
.spaces-list {
  position: absolute;
  top: 0;
  right: 0;
  width: 300px;
  min-height: 100vh;
  padding: 0em 0 1em;
  background: #fff;
  max-height: 100vh;
  overflow-y: auto;
}
.search {
  position: fixed;
  z-index: 100;
  top: 0;
  right: 0;
  left: calc(-200vw);
}
.search__input {
  width: 100%;
  padding: 1.315em 2em;
  color: #fff;
  border: 0;
  background: #515158;
  border-radius: 0;
}
.search__input:focus {
  outline: none;
}
.label {
  position: absolute;
  top: 4em;
  right: 0;
}
.label__text {
  font-size: 0.85em;
  line-height: 1;
  display: block;
  padding: 1em;
  color: #e4e4e4;
}
.label__checkbox {
  position: absolute;
  z-index: 10;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
  opacity: 0;
}
.label__checkbox:checked + .label__text {
  color: #515158;
}
.list {
  margin: 0 0 2em;
  padding: 0 1em 1em 2em;
  list-style: none;
}
.list__item {
  font-size: 1.05em;
  line-height: 1;
  position: relative;
  display: block;
}
.list__item:first-child {
  margin-top: 2em;
}
.grouped-by-category [data-category='1']:first-child,
.grouped-by-category :not([data-category='1']) + [data-category='1'],
.grouped-by-category [data-category='2']:first-child,
.grouped-by-category :not([data-category='2']) + [data-category='2'],
.grouped-by-category [data-category='3']:first-child,
.grouped-by-category :not([data-category='3']) + [data-category='3'],
.grouped-by-category [data-category='4']:first-child,
.grouped-by-category :not([data-category='4']) + [data-category='4'] {
  margin-top: 4em;
}
.grouped-by-category [data-category='1']:first-child::before,
.grouped-by-category :not([data-category='1']) + [data-category='1']::before,
.grouped-by-category [data-category='2']:first-child::before,
.grouped-by-category :not([data-category='2']) + [data-category='2']::before,
.grouped-by-category [data-category='3']:first-child::before,
.grouped-by-category :not([data-category='3']) + [data-category='3']::before,
.grouped-by-category [data-category='4']:first-child::before,
.grouped-by-category :not([data-category='4']) + [data-category='4']::before {
  font-size: 1.25em;
  font-family: 'Raleway';
  text-transform: uppercase;
  font-weight: 400;
  position: absolute;
  top: -1.75em;
  left: 0;
  color: #c7c7c9;
}
.grouped-by-category [data-category='1']:first-child::before,
.grouped-by-category :not([data-category='1']) + [data-category='1']::before {
  content: 'Amiel Zwier';
  color: #e73c0e;
}
.grouped-by-category [data-category='2']:first-child::before,
.grouped-by-category :not([data-category='2']) + [data-category='2']::before {
  content: 'William Rajwan';
  color: #e73c0e;
}
.grouped-by-category [data-category='3']:first-child::before,
.grouped-by-category :not([data-category='3']) + [data-category='3']::before {
  content: 'Joheun Lee';
  color: #e73c0e;
}
.list__item::after {
  content: 'L' attr(data-level) ' / ' attr(data-space);
  font-size: 0.65em;
  line-height: 3;
  position: absolute;
  top: 0;
  right: 0;
  padding: 0 0.5em;
  pointer-events: none;
  color: #c7c7c9;
  display: none;
}
.list__link {
  font-size: 0.85em;
  display: block;
  padding: 0.5em 0.5em 0.5em 0;
}
.list__item--active .list__link,
.list__link:hover {
  color: #515158;
}
/* Pins */
.level__pins {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
}
.level__pins--active {
  pointer-events: auto;
}
.pin {
  position: absolute;
  width: 5.5vmin;
  height: 8.25vmin;
  margin: -8.25vmin 0 0 -2.25vmin;
  /* let the bottom tip be the reference point for individual coordinates */
  -webkit-transform: rotateZ(-20deg) rotateZ(45deg) rotateX(-70deg);
  transform: rotateZ(-20deg) rotateZ(45deg) rotateX(-70deg);
  -webkit-transform-origin: 50% 100%;
  transform-origin: 50% 100%;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  transition: transform 0.3s;
}
.pin__icon {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  opacity: 0;
  -webkit-transform: translate3d(0, -100px, 0);
  transform: translate3d(0, -100px, 0);
  -webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
  transition: opacity 0.3s, transform 0.3s;
  -webkit-transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
  transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
}
@keyframes pop {
  0% {
    transform: rotateZ(-20deg) rotateZ(45deg) rotateX(-70deg) translateY(0px);
    -webkit-transform: rotateZ(-20deg) rotateZ(45deg) rotateX(-70deg) translateY(0px);
  }
  50% {
    transform: rotateZ(-20deg) rotateZ(45deg) rotateX(-70deg) translateY(-20px);
    -webkit-transform: rotateZ(-20deg) rotateZ(45deg) rotateX(-70deg) translateY(-20px);
  }
  100% {
    transform: rotateZ(-20deg) rotateZ(45deg) rotateX(-70deg) translateY(0px);
    -webkit-transform: rotateZ(-20deg) rotateZ(45deg) rotateX(-70deg) translateY(0px);
  }
}
.pin.pin--active {
  animation: pop 0.3s cubic-bezier(0.06, 0.275, 0.915, 0.68);
}
.level__pins--active .pin__icon {
  opacity: 1;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}
.pin:nth-child(2) .pin__icon {
  -webkit-transition-delay: 0.05s;
  transition-delay: 0.05s;
}
.pin:nth-child(3) .pin__icon {
  -webkit-transition-delay: 0.1s;
  transition-delay: 0.1s;
}
.pin:nth-child(4) .pin__icon {
  -webkit-transition-delay: 0.15s;
  transition-delay: 0.15s;
}
.pin:nth-child(5) .pin__icon {
  -webkit-transition-delay: 0.2s;
  transition-delay: 0.2s;
}
.pin:nth-child(6) .pin__icon {
  -webkit-transition-delay: 0.25s;
  transition-delay: 0.25s;
}
.pin:nth-child(7) .pin__icon {
  -webkit-transition-delay: 0.3s;
  transition-delay: 0.3s;
}
.pin:nth-child(8) .pin__icon {
  -webkit-transition-delay: 0.35s;
  transition-delay: 0.35s;
}
.pin:nth-child(9) .pin__icon {
  -webkit-transition-delay: 0.4s;
  transition-delay: 0.4s;
}
/*
.pin[data-category='1'] .icon--pin {
	fill: #7cbf7f;
}
.pin[data-category='2'] .icon--pin {
	fill: #6584c7;
}
.pin[data-category='3'] .icon--pin {
	fill: #dc4b7c;
}
.pin[data-category='4'] .icon--pin {
	fill: #8d65e0;
}
*/
.pin--1-1 .icon--pin,
.pin--2-1 .icon--pin,
.pin--3-1 .icon--pin,
.pin--4-1 .icon--pin {
  fill: #ff6701;
}
.pin--1-2 .icon--pin,
.pin--2-2 .icon--pin,
.pin--3-2 .icon--pin,
.pin--4-2 .icon--pin {
  fill: #ea610c;
}
.pin--1-3 .icon--pin,
.pin--2-3 .icon--pin,
.pin--3-3 .icon--pin,
.pin--4-3 .icon--pin {
  fill: #d45b17;
}
.pin--1-4 .icon--pin,
.pin--2-4 .icon--pin,
.pin--3-4 .icon--pin,
.pin--4-4 .icon--pin {
  fill: #bf5522;
}
.pin--1-5 .icon--pin,
.pin--2-5 .icon--pin,
.pin--3-5 .icon--pin,
.pin--4-5 .icon--pin {
  fill: #a94f2e;
}
.pin--1-6 .icon--pin,
.pin--2-6 .icon--pin,
.pin--3-6 .icon--pin,
.pin--4-6 .icon--pin {
  fill: #944939;
}
.pin--1-7 .icon--pin,
.pin--2-7 .icon--pin,
.pin--3-7 .icon--pin,
.pin--4-7 .icon--pin {
  fill: #7e4344;
}
.pin--1-8 .icon--pin,
.pin--2-8 .icon--pin,
.pin--3-8 .icon--pin,
.pin--4-8 .icon--pin {
  fill: #693d4f;
}
.pin__icon--disabled .icon--pin {
  fill: #666;
  opacity: 0.1 !important;
}
.pin__icon--disabled .icon--logo {
  opacity: 0.5 !important;
}
.icon--pin {
  width: 100%;
  height: 100%;
}
.icon--logo {
  position: absolute;
  top: 11%;
  left: 27%;
  width: 47%;
  height: 50%;
  fill: white;
  fill-opacity: 0.6;
  -webkit-transition: fill-opacity 0.3s;
  transition: fill-opacity 0.3s;
}
.pin--active .icon--logo,
.pin:hover .icon--logo {
  fill-opacity: 1;
}
/* Pins for floor 1 */
.pin--1-6 {
  top: 60vmin;
  left: 8vmin;
}
.pin--1-7 {
  top: 15vmin;
  left: 15vmin;
}
.pin--1-8 {
  top: 15vmin;
  left: 88vmin;
}
.pin--1-1 {
  top: 40vmin;
  left: 77vmin;
}
.pin--1-2 {
  top: 33vmin;
  left: 38vmin;
}
.pin--1-3 {
  top: 6vmin;
  left: 27vmin;
}
.pin--1-4 {
  top: 36vmin;
  left: 61vmin;
}
.pin--1-5 {
  top: 9vmin;
  left: 59vmin;
}
/* Pins for floor 2 */
.pin--2-1 {
  top: 7vmin;
  left: 22vmin;
}
.pin--2-2 {
  top: 39vmin;
  left: 5vmin;
}
.pin--2-3 {
  top: 21vmin;
  left: 84vmin;
}
.pin--2-4 {
  top: 39vmin;
  left: 53vmin;
}
.pin--2-5 {
  top: 14vmin;
  left: 50vmin;
}
.pin--2-6 {
  top: 60vmin;
  left: 15vmin;
}
.pin--2-7 {
  top: 34vmin;
  left: 37vmin;
}
.pin--2-8 {
  top: 52vmin;
  left: 74vmin;
}
/* Pins for floor 3 */
.pin--3-1 {
  top: 17vmin;
  left: 15vmin;
}
.pin--3-2 {
  top: 42vmin;
  left: 5vmin;
}
.pin--3-3 {
  top: 19vmin;
  left: 85vmin;
}
.pin--3-4 {
  top: 61vmin;
  left: 57vmin;
}
.pin--3-5 {
  top: 58vmin;
  left: 25vmin;
}
.pin--3-6 {
  top: 30vmin;
  left: 57vmin;
}
.pin--3-7 {
  top: 32vmin;
  left: 37vmin;
}
/* Pins for floor 4 */
.pin--4-6 {
  top: 78vmin;
  left: 18vmin;
}
.pin--4-7 {
  top: 49vmin;
  left: 6vmin;
}
.pin--4-8 {
  top: 19vmin;
  left: 18vmin;
}
.pin--4-1 {
  top: 8vmin;
  left: 46.7vmin;
}
.pin--4-2 {
  top: 20vmin;
  left: 76vmin;
}
.pin--4-3 {
  top: 48.5vmin;
  left: 88.5vmin;
}
.pin--4-4 {
  top: 79vmin;
  left: 75.3vmin;
}
.pin--4-5 {
  top: 90vmin;
  left: 47vmin;
}
/* Mobile compatability */
.open-search,
.close-search {
  display: none;
}
@media screen and (max-width: 65.625em), screen and (max-height: 40.625em) {
  .team-main {
    width: 100vw;
  }
  .spaces-list,
  .search {
    width: 100vw;
    right: 100%;
    left: auto;
  }
  .spaces-list--open,
  .spaces-list--open .search {
    right: 0;
  }
  .open-search,
  .close-search {
    position: absolute;
    display: block;
    top: 0;
    right: 0;
    z-index: 1000;
  }
  .mallnav {
    top: 4em;
  }
  .team-container {
    overflow: hidden;
  }
  .container--overflow {
    overflow: auto;
  }
  .content__item {
    overflow: auto;
  }
  .codrops-header {
    padding-right: 4em;
    text-align: left;
  }
}
/***** New code *****/
@keyframes pulsate {
  0% {
    opacity: 1;
    transform: scale(0.01);
  }
  50% {
    opacity: 1;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(1);
  }
}
.layer-circle {
  fill: #FaFaFa;
  fill-opacity: 0.6;
  stroke: #b6b6b7;
  stroke-width: 2;
  stroke-miterlimit: 10;
  transition: stroke 0.3s;
}
.level:hover .layer-circle {
  stroke: #a9a9a9;
}
.step-circle,
.step-pulse {
  fill: #FaFaFa;
  transition: all 0.3s;
  stroke-width: 2;
  stroke: #b6b6b7;
}
.step-pulse {
  transform: scale(0.5);
  transform-origin: 50% 50%;
  stroke: #ccc;
  opacity: 0;
}
.step-pulse--active {
  animation: pulsate 1.2s 0.2s infinite linear;
}
.level:hover .step-circle {
  stroke: #a9a9a9;
}
.step-arrow {
  fill: none;
  stroke-width: 2;
  stroke: #a9a9a9;
}
.circle-numbers {
  font-size: 5vmin;
  fill: #b6b6b7;
}
.circle-numbers text {
  font-family: "Josefin Sans", Avenir, "Helvetica Neue", Helvetica, Arial, sans-serif;
  fill: #CCC;
  font-weight: 300;
}
.circle-numbers text.circle-number--active {
  fill: #e73c0e;
}
.circle-arrows {
  fill: #E4E4E4;
}
.circle-numbers,
.circle-arrows {
  opacity: 0;
  transition: opacity 0.5s;
}
.level--current .circle-numbers,
.level--current .circle-arrows {
  opacity: 1;
}
/* Icons */
/*
#icon-backlog path,
#icon-refining path,
#icon-discovery path,
#icon-ideation path,
#icon-prototype path,
#icon-wireframe path,
#icon-testing path,
#icon-mapping path {
	//opacity: 0.7;
	fill: #FFF;
    stroke: #FFF;
    stroke-width: 2;
    stroke-miterlimit: 10;
}
*/
.icon--logo {
  fill: #FFF;
  stroke: #FFF;
  stroke-width: 3;
  stroke-miterlimit: 10;
  fill-opacity: 1;
}

.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;
}


.video-js {
  font-size: 10px;
  color: #fff;
}
.vjs-default-skin .vjs-big-play-button {
  font-size: 60px;
  line-height: 1.3;
  height: 80px;
  width: 80px;
  border: none;
  border-radius: 40px;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  transition: 0.3s ease-out;
  background-color: rgba(0, 0, 0, 0.5);
}
.video-js.vjs-default-skin:hover .vjs-big-play-button {
  background-color: rgba(51, 51, 51, 0.7);
  transition: 0.3s ease-out;
}
/* The default color of control backgrounds is mostly black but with a little
   bit of blue so it can still be seen on all-black video frames, which are common. */
.video-js .vjs-menu-button .vjs-menu-content {
  background-color: rgba(0, 0, 0, 0.7);
}
.video-js .vjs-control-bar {
  background: rgba(0, 0, 0, 0.5);
}
/* Slider - used for Volume bar and Progress bar */
.video-js .vjs-volume-level,
.video-js .vjs-slider {
  height: 2px;
  background-color: rgba(255, 255, 255, 0.2);
}
/* The slider bar color is used for the progress bar and the volume bar
   (the first two can be removed after a fix that's coming) */
.video-js .vjs-play-progress,
.video-js .vjs-slider-bar {
  height: 2px!important;
  background: rgba(255, 255, 255, 0.7);
}
.video-js .vjs-play-progress::before,
.video-js .vjs-slider-bar::before {
  content: '';
  width: 2px;
  height: 12px;
  top: 50%;
  right: 0;
  transform: translate(0, -50%);
  background-color: #ffffff;
  box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.3);
}
.video-js .vjs-volume-level {
  background-color: rgba(255, 255, 255, 0.7);
}
.video-js .vjs-volume-level::before {
  content: '';
  width: 2px;
  height: 12px;
  top: 50%;
  right: 0;
  transform: translate(0, -50%);
  background-color: #ffffff;
  box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.3);
}
.vjs-volume-bar.vjs-slider-bar.vjs-slider.vjs-slider-horizontal {
  background-color: rgba(255, 255, 255, 0.2);
}
/* The main progress bar also has a bar that shows how much has been loaded. */
.video-js .vjs-load-progress {
  height: 2px!important;
  background-color: rgba(255, 255, 255, 0.2);
}
/* The load progress bar also has internal divs that represent
   smaller disconnected loaded time ranges */
.video-js .vjs-load-progress div {
  background-color: rgba(255, 255, 255, 0.2);
}
.vjs-fullscreen-control.vjs-control.vjs-button {
  display: none!important;
}
.vjs-progress-holder.vjs-slider.vjs-slider-horizontal {
  height: 20px;
  background-color: transparent;
}
.vjs-progress-holder.vjs-slider.vjs-slider-horizontal::before {
  content: '';
  position: absolute;
  width: 100%;
  height: 2px;
  top: 50%;
  left: 0;
  transform: translate(0, -50%);
  background-color: rgba(255, 255, 255, 0.2);
}
.video-js .vjs-progress-holder .vjs-play-progress,
.video-js .vjs-progress-holder .vjs-load-progress {
  top: 50%;
  transform: translate(0, -50%);
}
.video-js .vjs-progress-control .vjs-mouse-display {
  height: 12px;
  top: 50%;
  transform: translate(0, -50%);
}