.action-jack-panels.panel-header {
  align-items: center;
  background-color: #1663b2;
  background-image: url("/assets/images/action-jack-bar.png");
  background-repeat: no-repeat;
  display: flex;
  flex-direction: row;
  height: 42px;
  padding-left: 250px;
  position: relative;
  width: 100vw;
}

.action-jack-panels > .action-jack-caption {
  color: #fff;
  font-size: 22px;
  z-index: 1;
}

@media screen and (min-width: 1540px) {
  .action-jack-panels.panel-header {
    background-position: left;
  }
}

@media screen and (min-width: 1640px) {
  .action-jack-panels.panel-header {
    justify-content: center;
  }
  .action-jack-panels.panel-header > .action-jack-caption {
    transform: translateX(-200px);
  }
}

@media screen and (max-width: 1270px) {
  .action-jack-panels > .action-jack-caption {
    font-size: 18px;
  }
}

@media screen and (max-width: 1112px) {
  .action-jack-panels.panel-header {
    padding-left: 166px
  }
}

@media screen and (max-width: 1100px) {
  .action-jack-panels.panel-header {
    display: none;
  }
  .action-jack-panels-mobile.panel-header {
    display: flex;
  }
}

.action-jack-panels > .action {
  background-image: url("/assets/images/action.png");
  height: 58px;
  margin: -12px 8px 0px 8px;
  width: 242px;
}

/* Uniting Software and Hardware panel */
.uniting-main {
  /*background-image: url("/assets/images/uniting-software-and-hardware.png");*/
  background-size: cover;
  height: 1200px;
  margin-top: 360px;
  position: relative;
}

.uniting-main > h2 {
  color: #555;
  font-size: 52px;
  font-weight: 100;
  text-align: center;
}

@media screen and (max-width: 1100px) {
  .uniting-main > h2 {
    font-size: 38px;
    padding: 0 6px 0 6px;
    margin-top: -120px;
  }
}

.uniting-main > .upper-caption {
  font-weight: lighter;
  position: relative;
  top: -210px;
}

.uniting-main > .lower-caption {
  font-weight: lighter;
  position: relative;
  top: 430px;
}

.uniting-main > .lower-caption > colorize {
  transition: color .5s;
  transition-delay: 1s;
}

.uniting-main > .lower-caption > colorize.blue {
  color: #33ccff;
}

.uniting-animation > .uniting-arrow {
  position: absolute;
}

#arrow-1, #arrow-2, #arrow-3, #arrow-4, #arrow-5, #arrow-6 {
  width: 50%;
}

#arrow-1, #arrow-2, #arrow-3 {
  left: 0px;
}

#arrow-4, #arrow-5, #arrow-6 {
  right: 0px;
}

#arrow-1.retracted {
  left: -180%;
}

#arrow-6.retracted {
  right: -180%;
}

#arrow-2.retracted {
  left: -120%;
}

#arrow-5.retracted {
  right: -120%;
}

#arrow-3.retracted {
  left: -60%;
}

#arrow-4.retracted {
  right: -60%;
}

#arrow-4, #arrow-5, #arrow-6 {
  right: 0px;
}

#arrow-3, #arrow-4 {
  height: 417px;
  transition: 1s;
  top: 0px;
}

#arrow-2, #arrow-5 {
  height: 487px;
  transition: 1.1s;
  top: -30px;
}

#arrow-1, #arrow-6 {
  height: 569px;
  transition: 1.2s;
  top: -60px;
}

.software-label, .hardware-label {
  position: absolute;
  transition: color 1s;
  z-index: 100;
}

.software-label.retracted, .hardware-label.retracted {
  color: #19D1FF;
  position: absolute;
  z-index: 100;
}

.software-label, .hardware-label {
  color: #fff;
  font-size: 54px;
  font-weight: 700;
  position: absolute;
  top: 174px;
}

.software-label {
  left: 10%;
}

.hardware-label {
  right: 10%;
}

.and-container {
  display: flex;
  justify-content: center;
  height: 120px;
  position: absolute;
  top: 150px;
  width: 100%;
}

.and-label {
  background: #fff;
  border-radius: 50%;
  box-shadow: 0px 0px 60px rgba(0, 0, 0, .5);
  color: #19D1FF;
  font-size: 40px;
  font-weight: 700;
  height: 116px;
  left: 46%;
  line-height: 120px;
  text-align: center;
  width: 116px;
  z-index: 100;
}

.down-arrow {
  display: flex;
  flex-direction: column;
}

.down-arrow-stalk, .down-arrow-triangle {
  position: absolute;
}

.down-arrow-stalk {
  background: #19D1FF;
  height: 10px;
  left: 50%;
  transform: translateX(-6px);
  transition: height 2.5s;
  width: 12px;
}

.down-arrow-triangle {
  border-left: 30px solid transparent;
  border-right: 30px solid transparent;
  border-top: 40px solid #19D1FF;
  height: 0px;
  left: 50%;
  transform: translateX(-30px);
  width: 0px;
  transition: top 2.5s;
  top: 200px;
}

.extended > .down-arrow-stalk {
  height: 400px;
}

.extended > .down-arrow-triangle {
  top: 560px;
}

@media screen and (max-width: 1026px) {
  .uniting-main > .upper-caption {
    padding: 0 24px 0 24px;
  }
  .uniting-animation {
    transform: translateY(-200px);
  }
  .software-label, .hardware-label, .and-container {
    position: absolute;
  }
  .software-label {
    font-size: 42px;
    left: 0;
    text-align: center;
    text-shadow: 0px 0px 6px rgba(0, 0, 0, 0.5);
    top: 80px;
    width: 100%;
  }
  .down-arrow {
    display: none;
  }
  .hardware-label {
    font-size: 42px;
    left: 0;
    text-align: center;
    text-shadow: 0px 0px 6px rgba(0, 0, 0, 0.5);
    top: 280px;
    width: 100%;
  }
  .and-label {
    top: 240px;
  }
}

@media screen and (max-width: 1100px) {
  .down-arrow {
    display: none;
  }
}