#alpha_benefits::before,
#alpha_intro::before,
#alpha_savings::before {
  background-image: linear-gradient( 33deg, hsl(30, 95%, 40%), hsl(30, 96%, 74%));
}

#poseadon_benefits::before,
#poseadon_intro::before,
#poseadon_savings::before {
  background-image: linear-gradient( 33deg, hsl(200, 80%, 40%), hsl(155, 75%, 45%));
}

#tools_landing {
  position: relative;
  width: 100vw;
  height: 80vh;
  overflow-y: hidden;
  background: url(../img/truck_on_overpass.jpg);
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
  /* padding-left: 360px; */
}

#tools_landing::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 80vh;
  opacity: 0.72;
  background-image: linear-gradient( 33deg, hsl(30, 95%, 50%), hsl(200, 80%, 40%));
}

#tool_logos {
  z-index: 2;
  display: flex;
  position: absolute;
  top: 40vh;
  width: 60%;
  height: 25vh;
  flex-direction: row;
  justify-content: space-between;
  transform: translateY(-30%);
}

#tool_logos>div {
  position: relative;
  width: 100%;
  max-height: 300px;
  height: 100%;
}

#tools_landing svg {
  width: 100%;
  height: 100%;
  fill: #fff;
}

#tools_landing button {
  display: block;
  margin: 0 auto;
  margin-top: 24px;
}

#tools_landing h1,
#tools_landing h2 {
  z-index: 1;
  position: relative;
}

div.section.intro,
div.section.intro div.content {
  padding-top: 24px;
  padding-bottom: 0px;
}

#alpha_flowchart h3,
#alpha_intro h3,
#alpha_savings h3 {
  color: hsl(30, 95%, 50%);
}

#alpha_intro #alpha_slider,
#poseadon_intro #poseadon_slider {
  width: 816px;
  box-shadow: 0 0 48px hsla(360, 100%, 0%, 0.5);
}

#alpha_intro #alpha_slider .iis-caption {
  border-radius: 3px;
  background: hsla(30, 95%, 50%, 0.9);
  font-weight: bold;
}

#poseadon_intro #poseadon_slider .iis-caption {
  border-radius: 3px;
  background: hsla(200, 80%, 40%, 0.9);
  font-weight: bold;
}

#alpha_intro svg,
#poseadon_intro svg {
  width: 100%;
  height: 36px;
  margin-top: 48px;
  margin-bottom: 48px;
}

#alpha_intro svg {
  fill: hsl(30, 95%, 50%);
}

#alpha_intro figure,
#poseadon_intro figure {}

#alpha_intro figure img,
#poseadon_intro figure img {
  display: block;
  //margin: 0 auto;
}

#alpha_intro figure p,
#poseadon_intro figure p {
  //color: hsl(200, 80%, 40%);
  //line-height: 36px;
  //font-size: 18px;
  margin-top: 48px;
}

#alpha_benefits,
#alpha_flowchart,
#poseadon_benefits,
#poseadon_flowchart {
  overflow-x: hidden;
  background-image: linear-gradient( 33deg, hsl(200, 80%, 40%), hsl(155, 75%, 45%));
  background-attachment: fixed;
  background-size: 100vw 100vh;
}

#alpha_benefits,
#alpha_flowchart {
  background-image: linear-gradient( 33deg, hsl(30, 95%, 40%), hsl(30, 96%, 74%));
}

#alpha_flowchart h3,
#poseadon_flowchart h3 {
  padding-top: 72px;
  padding-left: 240px;
  color: hsl(360, 100%, 100%);
  text-align: center;
  text-transform: inherit;
  font-variant: normal;
}

#alpha_flowchart h3 {
  position: relative;
  top: 24px;
  padding: 0;
  padding-top: 24px;
}

#alpha_flowchart h4,
#poseadon_flowchart h4 {
  position: absolute;
  top: -48px;
}

#poseadon_flowchart ul {
  left: 0;
  width: 240px;
}

#poseadon_flowchart ul li {
  display: flex;
  position: relative;
  height: 144px;
  margin-left: 0;
  padding-top: 24px;
  padding-bottom: 24px;
  align-items: center;
  line-height: 24px;
}

#poseadon_flowchart ul li::before {
  display: none;
}

#poseadon_flowchart ul li:nth-child(even)::before {
  content: '';
  display: block;
  position: absolute;
  top: -12px;
  left: -100vw;
  width: 200vw;
  height: 100%;
  background-color: hsla(360, 100%, 100%, 0.1);
  transform: none;
}

#alpha_flowchart div.column {
  width: 100%;
}

#alpha_flowchart div.column>div {
  display: flex;
  width: 100%;
  align-items: stretch;
  flex-direction: row;
}

#alpha_flowchart div.column>div>svg {
  min-width: 72px;
  max-width: 72px;
  margin-right: 24px;
  align-self: flex-start;
}

.flowchart {
  display: flex;
  width: 72px;
  height: 672px;
  align-self: center;
  flex-direction: column;
  justify-content: space-between;
}

.flowchart>div>svg {
  width: 100%;
  height: 72px;
}

.flowchart>div::after {
  content: '';
  display: block;
  position: absolute;
  left: calc(50% - 6px);
  width: 12px;
  height: 90px;
  margin-top: -12px;
  background: hsl(360, 100%, 100%);
  transform: skewY(-33deg);
}

.flowchart>div:nth-of-type(1)::before {
  content: '';
  display: block;
  position: absolute;
  left: calc(50% - 6px);
  width: 12px;
  height: 90px;
  margin-top: -80px;
  background: hsl(360, 100%, 100%);
  transform: skewY(-33deg);
}

#alpha_flowchart .flowchart>div::after {
  left: 30px;
  height: 10%;
  margin-top: 64px;
}

#alpha_flowchart .flowchart>div:nth-of-type(1)::before {
  left: 30px;
  height: 60px;
  margin-top: -50px;
}

#poseadon_flowchart div.content:nth-of-type(2) p {
  padding-right: 12px;
  padding-left: 12px;
  text-align: center;
  font-size: 24px;
  font-style: italic;
  line-height: 36px;
}

#alpha_savings div.column,
#poseadon_savings div.column {
  position: relative;
  top: 96px;
  margin-bottom: 96px;
}

#alpha_savings h3,
#poseadon_savings h3 {
  position: absolute;
}

#alpha_savings ul,
#alpha_savings ul li,
#poseadon_savings ul,
#poseadon_savings ul li {
  color: hsl(0, 0%, 40%);
}

#alpha_savings ul li::before {
  background: hsl(30, 95%, 50%);
}

#poseadon_savings ul li::before {
  background: hsl(200, 80%, 40%);
}

#alpha_savings .demo_button svg,
#poseadon_savings .demo_button svg {
  position: relative;
  left: 18px;
  width: 204px;
  height: 205px;
}

#alpha_savings .demo_button button,
#poseadon_savings .demo_button button {
  width: 100%;
  padding-top: 12px;
  padding-bottom: 12px;
  background-image: linear-gradient( 33deg, hsl(200, 80%, 40%), hsl(155, 75%, 45%));
  box-shadow: none;
}

#alpha_savings .demo_button button {
  background-image: linear-gradient( 33deg, hsl(30, 95%, 40%), hsl(30, 96%, 74%));
}

#alpha_benefits svg,
#poseadon_benefits svg {
  width: 240px;
  margin-bottom: 24px;
}

#alpha_benefits div.column {
  width: 33%;
}

#poseadon_benefits div.column:first-of-type svg {
  position: relative;
  left: -24px;
}

#alpha_benefits h4,
#poseadon_benefits h4 {
  text-align: center;
  font-size: 24px;
}

#alpha_benefits p {
  text-align: center;
}

#alpha_benefits div.content:nth-of-type(2),
#poseadon_benefits div.content:nth-of-type(2) {
  padding-top: 24px;
  color: hsl(360, 100%, 100%);
  text-align: center;
  font-size: 24px;
  font-style: italic;
}