/* Technology section */

.technology-panels.panel-header {
  background-color: #4dadfe;
}

/* Brand Halo panel */

.technology-panels.brand-halo {
  height: 760px;
}

.brand-halo-text {
  max-width: 970px;
  margin: 220px auto 65px auto;
  text-align: center;
}

.brand-halo-icons {
  padding-left: 0;
  width: 100%;
  text-align: center;
}

.brand-halo-icon {
  display: inline-block;
  margin: 0 20px;
  background-size: 100%;
  width: 110px;
  height: 110px;
}

.chat-icon {
  background-image: url("/assets/icon-chat.png");
}

.paper-airplane-icon {
  background-image: url("/assets/icon-paper-airplane.png");
}

.magnifying-glass-icon {
  background-image: url("/assets/icon-magnifying-glass.png");
}

.brand-halo-icon:first-child {
  margin-left: initial;
}

.brand-halo-icon:last-child {
  margin-right: initial;
}

.brand-halo-left-image {
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: -1;
}

/* Computing power panel */

.technology-panels.computing-power {
  background-image: url("/assets/photo-servers.jpg");
}

.computing-power-text {
  vertical-align: middle;
  display: table-cell;
}

.computing-power-text-pane {
  background-color: #4dadfe ;
  color: #fff;
}

/* Hardware-software panel */
.hardware-software {
  display: table;
}

.hardware-software-text {
  background-color: #4dadfe;
  color: #fff;
}

/* Game-changing panel */
.technology-panels.game-changing {
  background-image: url("/assets/photo-cool-people-couch.jpg");
}

.game-changing-text-pane {
  width: 50%;
  left: 50%;
  position: relative;
}

.game-changing-text {
  padding-top: 10%;
}

/* phone portrait */
@media (max-width: 567px) {
  .game-changing-text {
    padding-top: 0;
  }

  .game-changing-text-pane {
    width: initial;
    padding-top: 10px;
    left: 40%;
  }
}

@media (max-width: 992px) {
  .technology-panels.brand-halo {
    height: 650px;
  }

  .brand-halo-text {
    margin: 40px 0;
  }

  .brand-halo-icon {
    width: 70px;
    height: 70px;
    margin: 0 10px;
  }

  .brand-halo-icons {
    width: 260px;
    margin: 0 auto;
  }
}

@media (min-width: 992px) and (max-width: 1024px) {
  .brand-halo-text {
    margin: 60px 0;
    max-width: initial;
  }
}