/*Serpentine*/

body.energy .wrapper { max-width: 1615px; }
body.energy #site-background, body.energy footer.site {padding-left: 12px; padding-right: 12px;}

/* BG */
.Energy__bg {
  min-height: 1310px;
  margin: 0 0 24px;
  padding: 12px;
  background: #0d111d;
  position: relative;
}
/* Lights */
.Energy__bg:before, .Energy__bg:after {
  content: '';
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-position: 0 0;
  background-size: 100% auto;
  top: 12px;
  position: absolute;
  z-index: 1;
}
.Energy__bg:before {
  max-width: 761px;
  background-image: url('../img/energy/light-left.png');
  left: 12px;
}
.Energy__bg:after {
  max-width: 690px;
  background-image: url('../img/energy/light-right.png');
  right: 12px;
}

/* Titles */
.Energy__title {
  width: 100%;
  max-width: 443px;
  height: 47px;
  background: url('../img/energy/top-bar.png') 50% 50%/auto 100% no-repeat;
  color: #fff;
  font-weight: bold;
  font-size: 16px;
  line-height: 47px;
  position: absolute;
  top: 70px;
  z-index: 2;
}
.Energy__title--left {
  text-align: center;
  left: 12px;
}
.Energy__title--right {
  padding-right: 12px;
  text-align: right;
  right: 12px;
}

/* Shoes */
.Energy__shoes {
  position: absolute;
  z-index: 5;
}
.Energy__shoes--left {
  width: 100%;
  max-width: 282px;
  top: 75px;
  left: 18px;
}
.Energy__shoes--right {
  width: 136px;
  top: 117px;
  right: 28px;
}
.Energy__shoes--right .Energy__item {
  margin: 0 0 12px;
}
.Energy__shoes--left .Energy__item {
  width: 48%;
  position: absolute;
}
.Energy__shoes--left .Energy__item:nth-child(even) { right: 0 }
.Energy__shoes--left .Energy__item:nth-child(2) { top: 65px }
.Energy__shoes--left .Energy__item:nth-child(3) { top: 138px }
.Energy__shoes--left .Energy__item:nth-child(4) { top: 214px }
.Energy__shoes--left .Energy__item:nth-child(5) { top: 285px }
.Energy__shoes--left .Energy__item:nth-child(6) { top: 370px }
.Energy__shoes--left .Energy__item:nth-child(7) { top: 431px }
.Energy__shoes--right .Energy__item { left: 0 }
.Energy__shoe {
  width: 100%;
  height: auto;
  display: block
}
.Energy__label {
  margin: 0;
  color: #fff;
  font-size: 16px;
  text-align: center;
  font-weight: bold;
  white-space: nowrap
}

/* Main */
.Energy__main {
  left: 320px;
  top: 25px;
  right: 200px;
  position: absolute;
  z-index: 4;
  align-items: center;
  justify-content: space-between;
  display: flex;
}
.Energy__logo, .Energy__video { width: 49%; }
.Energy__video { height: 315px; }
.Energy__video--small { display: none; }
.Energy__logo img {
  width: 100%;
  max-width: 552px;
  float: left;
}

/* Info */
.Energy__info {
  width: 100%;
  left: 0;
  top: 680px;
  text-align: center;
  position: absolute;
  z-index: 6;
}

/* Bar */
.Energy__bar {
  padding: 12px;
  background: url('../img/energy/bot-bar.png') 50% 50%/auto 100% no-repeat;
  text-align: center;
  color: #fff;
  font-weight: bold;
  font-size: 17px;
  line-height: 27px;
}
.Energy__blip {
  width: 11px;
  height: 11px;
  margin: 0 12px 0;
  border-radius: 50%;
  display: inline-block;
}
.Energy__blip--green { background: #05a93c; }
.Energy__blip--red { background: #e82e34; }
.Energy__blip--blue { background: #00acd3; }
.Energy__blip--orange { background: #ee6532; }
.Energy__blip--purple { background: #b84290; }

.Energy__instructions {
  width: 100%;
  padding: 24px 0;
  align-items: center;
  justify-content: center;
  display: flex;
}
.Energy__content {
  color: #fff;
  font-size: 18px;
  font-weight: bold;
  text-align: center;
}
.Energy__content h2 {
  color: #fbb810;
  font-size: 20px;
  font-weight: bold;
}
.Energy__content ol {
  margin: 0 0 18px;
}
.Energy__content li {
  min-height: 50px;
  margin: 0 0 18px;
  padding: 0 0 0 50px;
  text-align: left;
  position: relative;
  counter-increment: idx;
}
.Energy__content li:after, .Energy__number {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  text-align: center;
  line-height: 36px;
  background: #fbb810;
  color: #0d111d;
  font-size: 20px;
  font-weight: bold;
  position: absolute;
}
.Energy__content li:after {
  content: counter(idx);
  left: 0;
  top: 0;
}
.Energy__number {
  border: solid 2px #fff;
  line-height: 33px;
}
.Energy__number--1 {
  left: -12px;
  top: 66px;
}
.Energy__number--2 {
  left: calc(50% - 16px);
  top: -18px;
}
.Energy__number--3 {
  right: 0;
  top: 150px;
}
.Energy__illu {
  width: 214px;
  margin: 0 auto;
  position: relative;
}
.Energy__content--left, .Energy__content--right {
  padding: 0 18px;
  flex-grow: 1;
  flex-shrink: 1;
}
.Energy__content--left {
  flex-basis: calc(55% - 240px);
  width: calc(55% - 240px);
}
.Energy__content--right {
  flex-basis: calc(45% - 240px);
  width: calc(45% - 240px);
}
.Energy__content--middle {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 240px;
  width: 240px;
}
.Energy__more {
  padding: 18px 24px;
  background: #fbb810;
  font-size: 18px;
  font-weight: bold;
  color: #0d111d !important;
  text-transform: uppercase;
  border-radius: 8px;
  text-decoration: none !important;
  display: inline-block;
}

/*
Responsive
*/

@media (max-width: 1470px) {
  .Energy__video { height: 258px; }
}
@media (max-width: 1350px) {
  .Energy__main { top: 130px; }
  .Energy__video { height: 222px; }
}
@media (max-width: 1250px) {
  .Energy__bg { min-height: 1450px; }
  .Energy__logo, .Energy__video { width: 60%; }
  .Energy__logo { margin: 0 0 34px; }
  .Energy__main {
    top: 25px;
    flex-direction: column;
  }
  .Energy__info { top: 750px; }
}
@media (max-width: 1080px) {
  .Energy__bg { min-height: 1550px; }
  .Energy__logo, .Energy__video { width: 90%; }
  .Energy__video { height: 250px; }
  .Energy__info { top: 800px; }
}

/* Tablet */
@media (max-width: 1023px) {
  body.energy .wrapper--pad { padding-left: 0; padding-right: 0; }
  .Energy__bg { min-height: 1950px }
  .Energy__title {
    width: 50% !important;
    top: 170px;
  }
  .Energy__title--left, .Energy__shoes--left { left: 0; }
  .Energy__title--right {
    right: 0;
  }
  .Energy__shoes--left { top: 175px }
  .Energy__shoes--right { right: 8px; top: 217px }
  .Energy__logo { width: 100%; }
  .Energy__main {
    left: 38%;
    right: 22%;
  }
  .Energy__video { height: 180px ; }
  .Energy__bar { background: #392556; }
  .Energy__instructions {
    flex-direction: column;
  }
  .Energy__content--left, .Energy__content--right, .Energy__content--middle {
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: auto;
    width: auto;
  }
  .Energy__content--left { order: 2; }
  .Energy__content--right { order: 3; }
  .Energy__content--middle { order: 1; }
}
/* Phone landscape */
@media (max-width: 767px) {
  .Energy__bg { min-height: 2350px }
  .Energy__shoes--left {
    max-width: 55%;
  }
  .Energy__shoes--right {
    width: 25%;
    
  }
  .Energy__main {
    left: 40%;
    right: 27%;
  }
  .Energy__video { display: none; }
  .Energy__video--small {
    width: 100%;
    height: 350px;
    display: block;
    top: 767px;
    left: 0;
    position: absolute;
  }
  .Energy__info { top: 1160px; }
}
/* Phone portrait */
@media (max-width: 479px) {
  .Energy__bg { min-height: 2500px }
  .Energy__label { font-size: 12px }
  .Energy__title { top: 200px; text-align: center !important; padding: 0 !important; }
  .Energy__shoes { top: 256px !important; }
  .Energy__shoes--left .Energy__item:nth-child(2) { top: 50px }
  .Energy__shoes--left .Energy__item:nth-child(3) { top: 96px }
  .Energy__shoes--left .Energy__item:nth-child(4) { top: 150px }
  .Energy__shoes--left .Energy__item:nth-child(5) { top: 201px }
  .Energy__shoes--left .Energy__item:nth-child(6) { top: 248px }
  .Energy__shoes--left .Energy__item:nth-child(7) { top: 298px }
  .Energy__main {
    left: 15%;
    right: 15%;
    top: 6px;
  }
  .Energy__video--small {
    height: 200px;
    top: 661px;
  }
  .Energy__info { top: 900px; }
  .Energy__more {
    width: 95%;
    padding-left: 12px;
    padding-right: 12px;
  }
}