#byers-journey { margin: 30px 0; }

#byers-journey .bj-img-horizontal { display: none; }

#byers-journey .bj-img-vertical { display: none; }

/* === ARROW TITLE === */

#byers-journey .bj-arrow {
  cursor: pointer;
  margin-bottom: 10px;
  padding: 20px 0 20px 0;
  text-align: center;
  overflow: hidden;
}

#byers-journey .bj-arrow h3 {
  display: inline-block;
  margin: 0;
}

#byers-journey .bj-arrow h3:before,
#byers-journey .bj-arrow h3:after {
  background: #4c8930;
  content: "";
  position: absolute;
  height: 2px;
  margin-top: 2px;
  top: 50%;
  width: 600px;
}

#byers-journey .bj-arrow h3:before {
  right: 100%;
  margin-right: 20px;
}

#byers-journey .bj-arrow h3:after {
  left: 100%;
  margin-left: 20px;
}

#byers-journey .bj-arrow .arrow {
  display: inline-block;
  width: 100%;
  height: 2px;
  margin-top: 2px;
  top: 50%;
}

#byers-journey .bj-arrow .arrow.left { left: 0; }

#byers-journey .bj-arrow .arrow.right { right: 0; }

#byers-journey .bj-arrow .arrow:before {
  border-color: #4c8930;
  border-width: 2px 2px  0 0;
  border-style: solid;
  content: " ";
  width: 10px;
  height: 10px;
  width: 10px;
  top: -5px;
  position: absolute;
}

#byers-journey .bj-arrow .arrow.left:before { left: 2px; }

#byers-journey .bj-arrow .arrow.right:before { right: 2px; }

#byers-journey .bj-arrow .arrow:before {
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}

#byers-journey .bj-arrow .arrow.left:before { border-width: 0 0 2px 2px; }

/* === GRAPHS === */

#byers-journey .bj-bg {
  margin: 0 auto;
  display: block;
}

#byers-journey .bj-graph { margin: 40px 0; }

#byers-journey .bj-graph .step-titles {
  top: 50%;
  left: 0;
  right: 0;
  margin: -26px auto 0 auto;
}

#byers-journey .bj-graph .step-titles h3 {
  color: #fff;
  display: inline-block;
  width: 25%;
  margin: 0 -4px 0 0;
  line-height: 52px;
  text-align: center;
  text-transform: uppercase;
  text-shadow: 0 1px 0 rgba(0,0,0,0.4);
}

#byers-journey .bj-graph .journey-spots,
#byers-journey .bj-graph .journey-labels {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

/* === SPOTS === */

#byers-journey .journey-spots span {
  background: #ffffff;
  border-radius: 50%;
  cursor: pointer;
  display: inline-block;
  width: 12px;
  height: 12px;
  position: absolute;
  top: 0;
  left: 0;
  -webkit-transition: transform .2s ease;
  transition: transform .2s ease;
}

#byers-journey .journey-spots .spot1 { top: 88%; left: 5%; }
#byers-journey .journey-spots .spot2 { top: 82.5%; left: 8%; }
#byers-journey .journey-spots .spot3 { top: 76%; left: 10.5%; }
#byers-journey .journey-spots .spot4 { top: 68%; left: 13%; }
#byers-journey .journey-spots .spot5 { top: 28%; left: 21.5%; }
#byers-journey .journey-spots .spot6 { top: 19%; left: 24%; }
#byers-journey .journey-spots .spot7 { top: 10%; left: 27%; }
#byers-journey .journey-spots .spot8 { top: 5.5%; left: 30%; }
#byers-journey .journey-spots .spot9 { top: 3.7%; left: 33.5%; }
#byers-journey .journey-spots .spot10 { top: 5.5%; left: 37%; }
#byers-journey .journey-spots .spot11 { top: 10%; left: 40.3%; }
#byers-journey .journey-spots .spot12 { top: 19%; left: 43.5%; }
#byers-journey .journey-spots .spot13 { top: 28%; left: 46.2%; }
#byers-journey .journey-spots .spot14 { top: 68%; left: 54.7%; }
#byers-journey .journey-spots .spot15 { top: 80%; left: 58%; }
#byers-journey .journey-spots .spot16 { top: 88%; left: 61.8%; }
#byers-journey .journey-spots .spot17 { top: 90.5%; left: 66%; }
#byers-journey .journey-spots .spot18 { top: 88%; left: 70%; }
#byers-journey .journey-spots .spot19 { top: 80%; left: 73.5%; }
#byers-journey .journey-spots .spot20 { top: 68%; left: 77.2%; }
#byers-journey .journey-spots .spot21 { top: 28.5%; left: 86.3%; }
#byers-journey .journey-spots .spot22 { top: 21%; left: 88.7%; }
#byers-journey .journey-spots .spot23 { top: 14%; left: 91%; }
#byers-journey .journey-spots .spot24 { top: 9%; left: 93.3%; }

#byers-journey .journey-spots span:after {
  content: " ";
  border-radius: 50%;
  top: 50%;
  left: 50%;
  width: 6px;
  height: 6px;
  margin: -3px 0 0 -3px;
  position: absolute;
}

#byers-journey .journey-spots span.hover {
  -webkit-transform: scale(1.5);
  transform: scale(1.5);
  box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.1);
}

#byers-journey .journey-spots span.hover:after {
  background: #000;
  animation: color-ball .6s ease;
}

@-webkit-keyframes color-ball {
  from {
    display: block;
    -webkit-transform: scale(0);
    transform: scale(0);
  }
  to {
    display: block;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}

#byers-journey .journey-spots span.hover.epressi:after { background: #145087; }

#byers-journey .journey-spots span.hover.sv:after { background: #68B42F; }

#byers-journey .journey-spots span.hover.pv:after { background: #B80C03; }

#byers-journey .journey-spots span.hover.vcem:after { background: #1097CB; }

#byers-journey .journey-spots span.hover.vmonitor:after { background: #42bac9; }

#byers-journey .journey-spots span.hover.vs:after { background: #f2a410; }

#byers-journey .journey-spots label {
  background: #f2f2f2;
  cursor: pointer;
  display: inline-block;
  font-size: 80%;
  line-height: 1.7em;
  padding: 0px 6px;
  border-radius: 2px;
  position: absolute;
  top: 0%;
  left: 0%;
  text-shadow: 0 1px 0 rgba(255,255,255,1);
  -webkit-transition: background-color .2s ease, color .2s ease, text-shadow .2s ease;
  transition: background-color .2s ease, color .2s ease, text-shadow .2s ease;
}

#byers-journey .journey-spots .label1 { top: 99%; left: 7%; }
#byers-journey .journey-spots .label2 { top: 92%; left: 10.5%; }
#byers-journey .journey-spots .label3 { top: 82%; left: 14%; }
#byers-journey .journey-spots .label4 { top: 71%; left: 17%; }
#byers-journey .journey-spots .label5 { top: 23%; left: 11.5%; }
#byers-journey .journey-spots .label6 { top: 12%; left: 17%; }
#byers-journey .journey-spots .label7 { top: 2%; left: 13.5%; }
#byers-journey .journey-spots .label8 { top: -9%; left: 21%; }
#byers-journey .journey-spots .label9 { top: -13%; left: 28%; }
#byers-journey .journey-spots .label10 { top: -9%; left: 40.5%; }
#byers-journey .journey-spots .label11 { top: 1.5%; left: 45%; }
#byers-journey .journey-spots .label12 { top: 12%; left: 48%; }
#byers-journey .journey-spots .label13 { top: 23%; left: 51%; }
#byers-journey .journey-spots .label14 { top: 71%; left: 44%; }
#byers-journey .journey-spots .label15 { top: 83%; left: 44%; }
#byers-journey .journey-spots .label16 { top: 95%; left: 52%; }
#byers-journey .journey-spots .label17 { top: 106%; left: 63%; }
#byers-journey .journey-spots .label18 { top: 96%; left: 73%; }
#byers-journey .journey-spots .label19 { top: 83%; left: 78%; }
#byers-journey .journey-spots .label20 { top: 71%; left: 81%; }
#byers-journey .journey-spots .label21 { top: 24%; left: 78%; }
#byers-journey .journey-spots .label22 { top: 13%; left: 71%; }
#byers-journey .journey-spots .label23 { top: 2%; left: 79%; }
#byers-journey .journey-spots .label24 { top: -7%; left: 89%; }

#byers-journey .journey-spots label:after {
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
	border-color: rgba(255, 255, 255, 0);
  border-top-color: #f2f2f2;
	border-width: 5px;
	margin-left: -5px;
  -webkit-transition: border-color .2s ease;
  transition: border-color .2s ease;
}

#byers-journey .journey-spots .label8:after,
#byers-journey .journey-spots .label24:after {
  bottom: -4px;
  right: -5px;
  -webkit-transform: rotate(-135deg);
  transform: rotate(-135deg);
}

#byers-journey .journey-spots .label5:after,
#byers-journey .journey-spots .label6:after,
#byers-journey .journey-spots .label7:after,
#byers-journey .journey-spots .label8:after,
#byers-journey .journey-spots .label21:after,
#byers-journey .journey-spots .label22:after,
#byers-journey .journey-spots .label23:after {
  bottom: -5px;
  right: -4px;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}

#byers-journey .journey-spots .label10:after,
#byers-journey .journey-spots .label11:after,
#byers-journey .journey-spots .label12:after,
#byers-journey .journey-spots .label13:after {
  bottom: -5px;
  left: 1px;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

#byers-journey .journey-spots .label9:after {
  bottom: -4px;
  left: 50%;
  -webkit-transform: rotate(-135deg);
  transform: rotate(-135deg);
}

#byers-journey .journey-spots .label1:after,
#byers-journey .journey-spots .label2:after,
#byers-journey .journey-spots .label3:after,
#byers-journey .journey-spots .label4:after,
#byers-journey .journey-spots .label18:after,
#byers-journey .journey-spots .label19:after,
#byers-journey .journey-spots .label20:after {
  top: -5px;
  left: 1px;
  -webkit-transform: rotate(-135deg);
  transform: rotate(-135deg);
}

#byers-journey .journey-spots .label14:after,
#byers-journey .journey-spots .label15:after,
#byers-journey .journey-spots .label16:after {
  top: -5px;
  right: -4px;
  -webkit-transform: rotate(135deg);
  transform: rotate(135deg);
}

#byers-journey .journey-spots .label17:after {
  top: -5px;
  right: 50%;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}

#byers-journey .journey-spots label.hover {
  background: #000;
  color: #ffffff;
  text-shadow: 0 1px 0 rgba(0,0,0,0.4);
}

#byers-journey .journey-spots label.hover:after { border-top-color: #000; }

#byers-journey .journey-spots label.hover.epressi { background: #145087; }
#byers-journey .journey-spots label.hover.epressi:after { border-top-color: #145087; }

#byers-journey .journey-spots label.hover.sv { background: #68B42F; }
#byers-journey .journey-spots label.hover.sv:after { border-top-color:#68B42F; }

#byers-journey .journey-spots label.hover.pv { background: #B80C03; }
#byers-journey .journey-spots label.hover.pv:after { border-top-color: #B80C03; }

#byers-journey .journey-spots label.hover.vcem { background: #1097CB; }
#byers-journey .journey-spots label.hover.vcem:after { border-top-color: #1097CB; }

#byers-journey .journey-spots label.hover.vmonitor { background: #42bac9; }
#byers-journey .journey-spots label.hover.vmonitor:after { border-top-color: #42bac9; }

#byers-journey .journey-spots label.hover.vs { background: #f2a410; }
#byers-journey .journey-spots label.hover.vs:after { border-top-color: #f2a410; }

/* === Brands === */

#byers-journey .bj-brands {
  padding: 20px 0 30px 0;
  height: 40px;
  text-align: center;
  white-space: nowrap;
}

#byers-journey .bj-brands span {
  cursor: pointer;
  display: inline-block;
  margin: 0 10px;
  vertical-align: middle;
}

#byers-journey .bj-brands img {
  height: 35px;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-transform: translateZ(0) scale(1);
  transform: translateZ(0) scale(1);
  -webkit-transition: opacity .6s ease, transform .6s ease, margin .6s ease;
  transition: opacity .6s ease, transform .6s ease, margin .6s ease;
}

#byers-journey .bj-brands span.disabled img {
  zoom: 1;
  -o-opacity: 0.2;
  opacity: 0.2;
}

#byers-journey .bj-brands span.hover img {
  zoom: 1;
  opacity: 1;
  margin: 0 7px;
  -webkit-transform: scale(1.2);
  transform: scale(1.2);
}

@media (max-width: 1280px) {

  #byers-journey .bj-graph .step-titles h3 {
    font-size: 130%;
  }

  #byers-journey .journey-spots .spot1 { top: 88%; left: 4.5%; }
  #byers-journey .journey-spots .spot2 { top: 82.5%; left: 7.5%; }
  #byers-journey .journey-spots .spot3 { top: 76%; left: 10%; }
  #byers-journey .journey-spots .spot4 { top: 68%; left: 12.5%; }
  #byers-journey .journey-spots .spot5 { top: 28%; left: 21%; }
  #byers-journey .journey-spots .spot6 { top: 19%; left: 23.5%; }
  #byers-journey .journey-spots .spot7 { top: 10%; left: 26.5%; }
  #byers-journey .journey-spots .spot8 { top: 5.5%; left: 29.8%; }
  #byers-journey .journey-spots .spot9 { top: 3.7%; left: 33.3%; }
  #byers-journey .journey-spots .spot16 { top: 87.5%; left: 61.8%; }
  #byers-journey .journey-spots .spot17 { top: 89.5%; left: 66%; }
  #byers-journey .journey-spots .spot18 { top: 87.5%; left: 70%; }
  #byers-journey .journey-spots .spot19 { top: 80%; left: 73.5%; }
  #byers-journey .journey-spots .spot20 { top: 68%; left: 77%; }

  #byers-journey .journey-spots .label2 { top: 94%; left: 10.5%; }
  #byers-journey .journey-spots .label4 { top: 70%; left: 17%; }
  #byers-journey .journey-spots .label5 { top: 23%; left: 9.5%; }
  #byers-journey .journey-spots .label6 { top: 11%; left: 16%; }
  #byers-journey .journey-spots .label7 { top: -1%; left: 11.5%; }
  #byers-journey .journey-spots .label8 { top: -12%; left: 18.5%; }
  #byers-journey .journey-spots .label9 { top: -16%; left: 27%; }
  #byers-journey .journey-spots .label10 { top: -11%; left: 42%; }
  #byers-journey .journey-spots .label11 { top: 1.5%; left: 46%; }
  #byers-journey .journey-spots .label12 { top: 13%; left: 49%; }
  #byers-journey .journey-spots .label13 { top: 25%; left: 52%; }
  #byers-journey .journey-spots .label14 { top: 71%; left: 42%; }
  #byers-journey .journey-spots .label15 { top: 83%; left: 41%; }
  #byers-journey .journey-spots .label16 { top: 95%; left: 51%; }
  #byers-journey .journey-spots .label17 { top: 106%; left: 62%; }
  #byers-journey .journey-spots .label18 { top: 96%; left: 74%; }
  #byers-journey .journey-spots .label21 { top: 21%; left: 77%; }
  #byers-journey .journey-spots .label22 { top: 9%; left: 68%; }
  #byers-journey .journey-spots .label23 { top: -3%; left: 77%; }
  #byers-journey .journey-spots .label24 { top: -11%; left: 89%; }

}

@media (max-width: 1100px) {

  #byers-journey .bj-img-horizontal { display: block; }

  #byers-journey .bj-wrap { display: none; }

}

@media (max-width: 768px) {

  #byers-journey .bj-img-horizontal { display: none; }

  #byers-journey .bj-img-vertical { display: block; }

}