/* ==========================================================================
   General
   ========================================================================== */

*,
*::before,
*::after {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.he {
  text-align: right;
  direction: rtl;
}

.app-content {
  background: #6ca2d7;
  background: -webkit-linear-gradient(top, #6ca2d7 0%,#316395 80%);
  background: -ms-linear-gradient(top, #6ca2d7 0%,#316395 80%);
  background: linear-gradient(to bottom, #6ca2d7 0%,#316395 80%);
}

/* ==========================================================================
   Structure
   ========================================================================== */

#col-1,
#col-2 {
  position: absolute;
  top: 0;
  overflow: hidden;
  height: 100%;
}

#col-1 {
  right: 0;
  padding: .6em .6em .6em 0;
  width: 66%;
}

#col-2 {
  left: 0;
  padding: .6em 0 .6em .6em;
  width: 33%;
}

#car-scene {
  position: relative;
  overflow: hidden;
  height: 30%;
  border: 1px solid #507192;
  background: #68b3f3; /* Old browsers */
  background: -webkit-linear-gradient(top, #68b3f3 0%,#81ccfe 67%,#6d943a 67%,#6d943a 84%,#484848 84%,#484848 100%); /* Chrome10+,Safari5.1+ */
  background: -ms-linear-gradient(top, #68b3f3 0%,#81ccfe 67%,#6d943a 67%,#6d943a 84%,#484848 84%,#484848 100%); /* IE10+ */
  background: linear-gradient(to bottom, #68b3f3 0%,#81ccfe 67%,#6d943a 67%,#6d943a 84%,#484848 84%,#484848 100%); /* W3C */
}

#energy-transfer {
  margin: 0 5%;
  height: 44%;
}

#control-panel {
  position: relative;
  height: 26%;
  background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNi4wLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IlNlbGVjdGVkX0l0ZW1zIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiDQoJIHk9IjBweCIgd2lkdGg9IjUxNHB4IiBoZWlnaHQ9IjkwcHgiIHZpZXdCb3g9IjAgMCA1MTQgOTAiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDUxNCA5MCIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+DQo8cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZmlsbD0iIzI4NTI3QiIgZD0iTTUxMy41LDUuMDA2YzAsMC4wMzMsMCwwLjA2NywwLDAuMWMwLjE2NywwLjQsMC4zLDAuODMzLDAuNCwxLjMNCgljMC4wNjYsMC40LDAuMSwwLjgsMC4xLDEuMlY3OC4yYy0wLjA2Niw3LjkzNC0zLjE2NywxMS44NjUtOS4zMDEsMTEuNzk5SDEwLjU4MkMzLjE0OCw4OS44OTktMC4zNjksODUuOTY3LDAuMDMxLDc4LjJWOC40MDYNCgljMC0xLjE2NywwLjMzMy0yLjIzMywxLTMuMmMxLjY2Ny0yLjksNC42NTEtNC41ODMsOC45NTEtNS4wNWMwLjEtMC4wMzMsMC4xODMtMC4wNSwwLjI1LTAuMDVzMC4xMzMsMCwwLjIsMA0KCWMwLjY2Ny0wLjA2NywxLjM2Ny0wLjEsMi4xLTAuMWg3Ny40MDNjMC4wMzMsMCwwLjA2NiwwLDAuMSwwYzAuMDY3LDAsMC4xMzMsMCwwLjIsMGMwLjAzMywwLDAuMDY3LDAsMC4xLDANCgljMS40NjctMC4wMzMsMi44NjcsMC4wNjcsNC4yLDAuM2gtMC4wNWMwLjMzMywwLjA2NywwLjY1LDAuMTUsMC45NSwwLjI1YzMuMDY2LDAuNyw1LjYzMywyLjE4NCw3LjcsNC40NXYwLjA1DQoJYzAuMDMzLDAsMC4wNjcsMC4wMzQsMC4xLDAuMWMwLjE2NywwLjE2NywwLjMzMywwLjMzMywwLjUsMC41bDEwLjA1LDE0LjI0OWMwLjAzNCwwLjA2NywwLjA2NywwLjExNywwLjEsMC4xNQ0KCWMwLDAuMDM0LDAuMDE3LDAuMDgzLDAuMDUsMC4xNWMwLjAzMywwLDAuMDgzLDAuMDE3LDAuMTUsMC4wNWMwLjAzMywwLDAuMDgzLDAuMDE3LDAuMTUsMC4wNWMwLjIzMywwLjEzMywwLjQ2NywwLjIsMC43LDAuMmg5OC4wNTQNCgljMC4xNjctMC4xNjcsMC4zMzMtMC4zMzMsMC41LTAuNWM3LjA2Ny03LDE1LjU4NC0xMC40OTksMjUuNTUxLTEwLjQ5OXMxOC40NjcsMy41LDI1LjUsMTAuNDk5YzAuMTY3LDAuMTY3LDAuMzM0LDAuMzMzLDAuNSwwLjUNCgloMTA0LjgwNGMwLjEzNCwwLDAuMjg0LDAsMC40NSwwYzAuMTM0LDAsMC4yNjcsMCwwLjQsMGMwLjA2Ni0wLjAzMywwLjE0OS0wLjA1LDAuMjUtMC4wNWMwLjA2Ni0wLjAzNCwwLjE2Ni0wLjA2NywwLjMtMC4xDQoJYzAtMC4wMzMsMC4wMzMtMC4wNSwwLjEtMC4wNWMwLjQtMC4yLDAuNzg0LTAuNDUsMS4xNS0wLjc1aDAuMDVsOC41NTEtNy4yOTljMC4xMDEtMC4xLDAuMi0wLjIsMC4zMDEtMC4zDQoJYzEuMTk5LTEuMDY3LDIuNDMzLTIuMTE2LDMuNjk5LTMuMTVjMS44MDEtMS41NjYsMy42MzQtMy4wODMsNS41LTQuNTQ5YzAuMDM0LTAuMDY3LDAuMDY3LTAuMSwwLjEwMS0wLjENCgljMC4wNjYtMC4wNjYsMC4xMzMtMC4xMTcsMC4yLTAuMTVjMC44MzMtMC43MzMsMS43MzMtMS4zMzMsMi42OTktMS44YzAuMTM0LTAuMDY3LDAuMjY3LTAuMTMzLDAuNC0wLjJoMC4wNQ0KCWMwLjk2Ny0wLjQ2NywyLTAuOCwzLjEwMS0xYy0wLjYwMSwwLjEzMy0xLjEzNCwwLjM1LTEuNjAxLDAuNjVjMC40NjctMC4wMzMsMC45NjcsMC4wMTcsMS41LDAuMTVjMC4xNjcsMC4wMzQsMC4zNTEsMC4xLDAuNTUsMC4yDQoJbC0wLjEtMS4xYzEuODMzLTAuNDMzLDMuNzg0LTAuNzE3LDUuODUxLTAuODVjMC4wMzQtMC4wMzMsMC4wODQtMC4wNSwwLjE1LTAuMDVjMC4xLDAsMC4xODQsMCwwLjI1LDBjMS4yNjcsMCwyLjU1LDAsMy44NSwwaDk4LjYwNA0KCWMwLjA2NiwwLDAuMTE2LDAsMC4xNDksMGMwLjQ2NywwLDAuOTM0LDAuMDUsMS40LDAuMTVjMC4wMzMsMCwwLjA2NiwwLjAxNywwLjEsMC4wNUM1MTAuNTUsMC45MDYsNTEyLjQzNCwyLjUwNiw1MTMuNSw1LjAwNnoiLz4NCjwvc3ZnPg0K');
  -moz-background-size: contain;
  -o-background-size: contain;
  -webkit-background-size: contain;
  background-size: contain;
  background-repeat: no-repeat;
  color: #fff;
}

/* ==========================================================================
   Car scene
   ========================================================================== */

.scene-cloud {
  position: absolute;
  top: 10%;
  left: 0;
  width: 15%;
  height: 14.55%;
  background: url(img/cloud.svg) center no-repeat;
  -moz-background-size: contain;
  -o-background-size: contain;
  -webkit-background-size: contain;
  background-size: contain;
}

.scene-trees {
  position: absolute;
  right: 0;
  bottom: 31%;
  left: 0;
  height: 55%;
}

.trees-page-1,
.trees-page-2 {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  z-index=0;
}

.trees-page-2 {
  -moz-transform: translateX(-100%);
  -ms-transform: translateX(-100%);
  -o-transform: translateX(-100%);
  -webkit-transform: translateX(-100%);
  transform: translateX(-100%);
 
}

.tree-large,
.tree-medium {
  position: absolute;
  bottom: 0;
  width: 10%;
  background: url(img/tree.svg) center no-repeat;
  -moz-background-size: contain;
  -o-background-size: contain;
  -webkit-background-size: contain;
  background-size: contain;
}

.trees-page-1 > .tree-large {
  right: 15%;
  width: 8.5%;
  height: 100%;
}

.trees-page-1 > .tree-medium {
  left: 14%;
  width: 6%;
  height: 70%;
}

.trees-page-2 > .tree-large {
  right: 15%;
  width: 8.5%;
  height: 100%;
}

.trees-page-2 > .tree-medium {
  left: 14%;
  width: 6%;
  height: 70%;
}

.scene-cityscape {
  position: absolute;
  top: 45%;
  right: 0;
  width: 200%;
  display: flex;
  height: 24%;
  z-index: 0;
}

  .scene-cityscape::before,
  .scene-cityscape::after {
    float: right;
    width: 50%;
    height: 100%;
    background-position: bottom right;
    -moz-background-size: 100% 100%;
    -o-background-size: 100% 100%;
    -webkit-background-size: 100% 100%;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    content: '';
  }

  .scene-cityscape::before {
    background-image: url(img/cityscape.svg);
  }

  .scene-cityscape::after {
    background-image: url(img/cityscape.svg);
  }


.scene-road {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 200%;
  height: 16%;
}

.road-lines {
  float: right;
  width: 50%;
  height: 100%;
  background: url(img/road-lines.svg) center no-repeat;
  -moz-background-size: contain;
  -o-background-size: contain;
  -webkit-background-size: contain;
  background-size: contain;
}

.scene-car {
  position: absolute;
  right: 8%;
  bottom: 10%;
  width: 32.592%;
  height: 43.53%;
  background: url(img/car.svg) center no-repeat;
  -moz-background-size: contain;
  -o-background-size: contain;
  -webkit-background-size: contain;
  background-size: contain;
}

.en .scene-car, .vi .scene-car {
  position: absolute;
  right: 8%;
  bottom: 10%;
  width: 32.592%;
  height: 43.53%;
  background: url(img/car.svg) center no-repeat;
  -moz-background-size: contain;
  -o-background-size: contain;
  -webkit-background-size: contain;
  background-size: contain;
  z-index:1;
  transform: translateZ(1px);
}

#scene-wheel-front,
#scene-wheel-back {
  position: absolute;
  bottom: -8%;
  padding-bottom: 15%;
  width: 15%;
  background: url(img/wheel.svg) center no-repeat;
}

  #scene-wheel-front.blur,
  #scene-wheel-back.blur {
    background-image: url(img/wheel-blur.svg);
    -moz-background-size: contain;
    -o-background-size: contain;
    -webkit-background-size: contain;
    background-size: contain;
    background-repeat: no-repeat;
  }

#scene-wheel-front {
  left: 16%;
}

#scene-wheel-back {
  right: 16%;
}

/* ==========================================================================
   Energy transfer
   ========================================================================== */

.flow-step {
  position: relative;
  float: right;
  margin: 8% 0 0 20%;
  padding-bottom: 20%;
  width: 20%;
  color: #fff;
  text-align: center;
}

  .flow-step:last-child {
    margin-left: 0;
  }

#step-engine .grad {
  background-color: #e46c0b;
}

#engine-container {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

#engine {
  width: 100%;
  height: 100%;
}

#step-engine > .name {
  right: 15%;
  text-align: right;
}

.vi #step-engine > .name {
  right: 13%;
  text-align: center;
}

#step-fuel-tank .grad {
  background-color: #76943f;
}

#fuel-tank {
  position: Absolute;
  top: 0;
  right: 0;
  bottom: 0;
  margin: auto 0;
  width: 100%;
  height: 75.5%;
}

.flow-step > .name {
  position: absolute;
  top: 100%;
  right: 0;
  left: 0;
  font-size: 1em;
}

.vi .flow-step > .name {
  right: -0.2em;
}

#wheel-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

  #wheel-container > img {
    position: absolute;
    top: 0;
    right: 0;
  }

  #wheel-container::after {
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    background-image: url(img/wheel-blur.svg);
    -moz-background-size: contain;
    -o-background-size: contain;
    -webkit-background-size: contain;
    background-size: contain;
    background-repeat: no-repeat;
    content: '';
    opacity: 0;
  }

  #wheel-container.blur::after {
    opacity: 1;
  }

  #wheel-container.blur > img {
    opacity: 0;
  }

  #wheel-container > img {
    width: 100%;
    height: 100%;
  }

.thermal-energy {
  position: absolute;
  top: -58%;
  width: 100%;
  font-size: 1em;
}

.arrows-container {
  position: relative;
  overflow: hidden;
  height: 2.4em;
}

.arrows {
  position: relative;
  top: 50%;
  height: 100%;
}

  .arrows::before,
  .arrows::after {
    display: block;
    height: 50%;
    background: url(img/red-arrows.svg) center no-repeat;
    background-size: contain;
    content: '';
    -moz-animation: slideup 1s linear infinite;
    -o-animation: slideup 1s linear infinite;
    -webkit-animation: slideup 1s linear infinite;
    -moz-background-size: contain;
    -o-background-size: contain;
    -webkit-background-size: contain;
    animation: slideup 1s linear infinite;
  }

  .arrows::before {
    -moz-animation: slideup-fade 1s linear infinite;
    -o-animation: slideup-fade 1s linear infinite;
    -webkit-animation: slideup-fade 1s linear infinite;
    animation: slideup-fade 1s linear infinite;
  }


@-webkit-keyframes slideup-fade {
  to {
    opacity: 0;
    -moz-transform: translateY(-100%);
    -ms-transform: translateY(-100%);
    -o-transform: translateY(-100%);
    -webkit-transform: translateY(-100%);
    transform: translateY(-100%);
  }
}

@keyframes slideup-fade {
  to {
    opacity: 0;
    -moz-transform: translateY(-100%);
    -ms-transform: translateY(-100%);
    -o-transform: translateY(-100%);
    -webkit-transform: translateY(-100%);
    transform: translateY(-100%);
  }
}

@-webkit-keyframes slideup {
  to {
    -moz-transform: translateY(-100%);
    -ms-transform: translateY(-100%);
    -o-transform: translateY(-100%);
    -webkit-transform: translateY(-100%);
    transform: translateY(-100%);
  }
}

@keyframes slideup {
  to {
    -moz-transform: translateY(-100%);
    -ms-transform: translateY(-100%);
    -o-transform: translateY(-100%);
    -webkit-transform: translateY(-100%);
    transform: translateY(-100%);
  }
}

.flow-arrow-canvas {
  position: absolute;
  right: 114%;
  width: 68%;
  height: 100%;
  background-image: url(img/arrow.svg);
  background-position: right center;
  -moz-background-size: contain;
  -o-background-size: contain;
  -webkit-background-size: contain;
  background-size: contain;
  background-repeat: no-repeat;
}

#arrow-green {
  position: absolute;
  right: 114%;
  width: 188%;
  height: 200%;
  top: -5%;
}

#arrow-orange {
  position: absolute;
  right: 114%;
  width: 189%;
  height: 200%;
  top: -5%;
}

.flow-arrow-text {
  position: absolute;
  top: 32%;
  right: 121%;
}

/* ==========================================================================
   Control panel
   ========================================================================== */

.control-accelerate,
.control-brake {
  position: absolute;
  top: 15%;
  width: 10%;
  height: 100%;
  text-align: center;
}

.control-accelerate {
  right: 7%;
}

.control-brake {
  left: 7%;
}

.control-ignition {
  position: absolute;
  top: 20%;
  right: 48.5%;
  width: 10%;
  height: 100%;
  text-align: center;
}

  .control-ignition .name {
    position: absolute;
    right: 0;
    bottom: 1.3em;
    left: 0;
  }

.control-accelerate .name,
.control-brake .name {
  position: absolute;
  right: 0;
  bottom: 0.85em;
  left: 0;
  white-space:nowrap;
}

.vi .control-accelerate .name,
.vi .control-brake .name {
  position: absolute;
  right: 0;
  bottom: 1em;
  left: 0;
  white-space:nowrap;
}

#btn-switch {
  display: block;
  margin: 0 auto;
  width: 3em;
  height: 3em;
  outline: 0;
  border: 0;
  border-radius: 50%;
  background: url(img/btn-ignition.svg) center no-repeat;
  -moz-background-size: contain;
  -o-background-size: contain;
  -webkit-background-size: contain;
  background-size: contain;
  background-repeat: no-repeat;
  
}
#btn-switch[data-state="off"]  {
  opacity: 0.7;
}
  #btn-switch:hover {
    background-image: url(img/btn-ignition-hover.svg);
  }

  #btn-switch:active {
    background-image: url(img/btn-ignition-active.svg);
  }

/* ==========================================================================
   Tabs
   ========================================================================== */

#tabs {
  height: 100%;
}

#tabs-container {
  position: relative;
  bottom: -1px;
  z-index: 1;
  overflow: hidden;
  font-size: .875em;
}

.tab {
  display: block;
  float: right;
  overflow: hidden;
  padding: 2% .5em;
  width: 31%;
  border: 1px solid #386590;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
  background: #9bbddf;
  color: #2e5f8d;
  text-align: center;
  text-decoration: none;
  -ms-text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 700;
}
.en .tab {
  float:left;
}

.vi .tab {
  float:left;
  width: 33.3%;
  font-size: 0.75em;
  padding-bottom: 1.9em;
  padding-top: 0.3em;
}

.vi .tab[href="#panel-2"],.vi .tab[href="#panel-1"]{
  float:left;
  padding-top: 1.05em;
  padding-bottom: 1.1em;
}

.vi .tab[href="#panel-3"]{
  float:left;
  padding-top: 0.5em;
  padding-bottom: 0.4em;
}

  .tab.active {
    padding-bottom: calc(2% + 1px);
    border-bottom: none;
    background: #cbd7e3;
    color: #000;
  }

.vi .tab[href="#panel-2"].active,.vi .tab[href="#panel-1"].active{
  padding-bottom: 1.2em;
  }

  .vi .tab[href="#panel-3"].active{
  padding-bottom: 0.5em;
  }


#panels-container {
  position: relative;
  height: 92.2%;
  border: 1px solid #386590;
  background: #cbd7e3;
}

.panel {
  position: relative;
  display: none;
  overflow: hidden;
  padding: 2.5% 13.7%;
  width: 100%;
  height: 100%;
}

  .panel.active {
    display: block;
  }

  .panel > h1 {
    margin: 0;
    text-align: center;
    font-size: 1em;
  }

.legend-list {
  position: absolute;
  right: 13.7%;
  bottom: 7%;
  left: 13.7%;
  overflow: hidden;
  margin-top: 10%;
  padding: 0;
  list-style: none;
  font-weight: 700;
  font-size: .75em;
  line-height: 1;
}

#panel-3 .scale-y{top: 3.5em;}

  .legend-list > li {
    display: inline-block;
    white-space: nowrap;
  }

    .legend-list > li::before {
      padding: 0 .3em;
      content: '■';
      font-size: 1.5em;
    }

.he .legend-chemical {
  margin-left: 1.5em;
}

.legend-chemical::before {
  color: #009614;
}

.legend-kinetic::before {
  color: #f2b962;
}

.legend-thermal::before {
  color: #ff0000;
}

#bar-chart {
  position: relative;
  overflow: hidden;
  margin-top: 5%;
  height: 64%;
  border: 1px solid;
  border-color: #a6b6c5 #a6b6c5 #000 #000;
  background: url(img/bar-chart-bg.svg) no-repeat;
  -moz-background-size: contain;
  -o-background-size: contain;
  -webkit-background-size: contain;
  background-size: contain;
}

.bar {
  position: relative;
  top: 100%;
  float: left;
  margin-top: 1px;
  margin-left: 12%;
  width: 11%;
  height: 100%;
  border: 1px solid #000;
}

.stack {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 1px solid;
}

#total-bar {
  margin-left: -1px;
  border: 0;
}

#kinetic-bar,
#kinetic-stack-bar {
  z-index: 1;
  background: #f2b962;
}

#chemical-bar,
#chemical-stack-bar {
  background: #009614;
  -moz-transform: translateY(-100%);
  -ms-transform: translateY(-100%);
  -o-transform: translateY(-100%);
  -webkit-transform: translateY(-100%);
  transform: translateY(-100%);
}

#heat-bar,
#heat-stack-bar {
  background: #ff0000;
}

#pie-chart-container {
  position: relative;
  margin-top: 5%;
  padding-bottom: 100%;
  width: 100%;
  border-radius: 50%;
  background: #222;
}

  #pie-chart-container > canvas {
    width: 100% !important;
    height: 100% !important;
    border: 2px solid #222;
    border-radius: 50%;
  }

#area-chart {
  position: relative;
  overflow: hidden;
  margin-top: 5%;
  height: 64%;
  border: 1px solid;
  border-color: #a6b6c5 #a6b6c5 #000 #000;
  /*background: url(img/area-chart-bg.svg) no-repeat;
  -moz-background-size: contain;
  -o-background-size: contain;
  -webkit-background-size: contain;
  background-size: contain;*/
  direction: ltr;
}

  #area-chart::after {
    display: block;
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100.2%;
    background: linear-gradient(to right,transparent 0, #a6b6c5 1%,#a6b6c5 2%,transparent 3%,transparent 50%, #a6b6c5 51%, #a6b6c5 52%,transparent 53% ), linear-gradient(to bottom,transparent 0, #a6b6c5 1%,#a6b6c5 2%,transparent 3% ,transparent 25%, #a6b6c5 26%,#a6b6c5 27%,transparent 28% ,transparent 50%, #a6b6c5 51%,#a6b6c5 52%,transparent 53%,transparent 75%, #a6b6c5 76%,#a6b6c5 77%,transparent 78% );
    background-size:  15% 20%;
    background-position:-1% -1px;
    z-index: 100;
    opacity:0.7;
  }
  #area-chart::before {
    display: block;
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 3%;
    background: linear-gradient(to right,transparent 0, #000 1%,#000 2%,transparent 4% );
    background-size:  15% 100%;
    background-position:-1% 0;
    z-index: 110;
    opacity:0.8;
  }

  #area-chart > canvas {
    position: absolute;
    bottom: 0;
    left: 0;
    display: inline-block;
    width: 100%;
    height: 100%;
    /*opacity: .8;*/
    -moz-transform-origin: left bottom;
    -ms-transform-origin: left bottom;
    -o-transform-origin: left bottom;
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
  }

  #area-chart ~ .text-x {
    text-align: center;
  }

.scale-y {
  position: absolute;
  top: 10%;
  left: 8%;
  width: 5%;
  height: 56%;
  background: url(img/chart-scale.svg) no-repeat;
  -moz-background-size: contain;
  -o-background-size: contain;
  -webkit-background-size: contain;
  background-size: contain;
}

.text-x,
.text-y {
  font-weight: 700;
  font-size: .75em;
  white-space: nowrap;
}

.text-x {
  text-align: left;
}

.text-y {
  width: 186px;
  position: absolute;
  top: 0;
  top: 67%;
  left: 0;
  left: 2%;
  text-align: center;
  -moz-transform: rotate(-90deg);
  -ms-transform: rotate(-90deg);
  -o-transform: rotate(-90deg);
  -webkit-transform: rotate(-90deg);
  transform: rotate(-90deg);
  -moz-transform-origin: top left;
  -ms-transform-origin: top left;
  -o-transform-origin: top left;
  -webkit-transform-origin: top left;
  transform-origin: top left;
}


/* ==========================================================================
   Slider
   ========================================================================== */

.slider {
  -webkit-touch-callout: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -webkit-user-select: none;
  user-select: none;
  position: relative;
  z-index: 1;
  display: block;
  margin: 0 auto;
  margin-bottom: 20%;
  width: 6px;
  height: 64px;
  background: #000;
  direction: ltr;
}

.slider-readonly {
  opacity: .5;
}

.slider-knob {
  position: absolute;
  right: -18px;
  display: inline-block;
  margin-top: -22px;
  width: 44px;
  height: 44px;
  background-position: center;
  background-repeat: no-repeat;
  cursor: pointer;
}

.slider-brake .slider-knob {
  background-image: url(img/slider-knob-brake.svg);
}

.slider-accelerate .slider-knob {
  background-image: url(img/slider-knob-accelerate.svg);
}

.slider-ruler,
.slider-ruler-selection {
  position: absolute;
  top: 0px;
  width: 100%;
  height: 7px;
}

.slider-accelerate::after,
.slider-brake::after {
  position: absolute;
  top: 0;
  width: 200%;
  height: 100%;
  -moz-background-size: contain;
  -o-background-size: contain;
  -webkit-background-size: contain;
  background-size: contain;
  background-repeat: no-repeat;
  content: '';
}

.slider-accelerate::after {
  left: 100%;
  margin-left: 300%;
  background-image: url(img/slider-right-ruler.svg);
}

.slider-brake::after {
  right: 100%;
  margin-right: 300%;
  background-image: url(img/slider-left-ruler.svg);
}

.hide {
  display: none;
}


/**english + vietnam*/

body.en #energy-transfer, body.vi #energy-transfer {
  margin: 0 5%;
  height: 44%;
  transform: scaleX(-1);
}

body.en .flow-step > .name, body.vi .flow-step > .name {
  transform: scaleX(-1);
}

body.en #car-scene, body.vi #car-scene {
   transform: scaleX(-1);
}

body.en .thermal-energy, body.vi .thermal-energy {
   transform: scaleX(-1);
}

body.en .flow-arrow-text, body.vi .flow-arrow-text {
  transform: scaleX(-1);
  direction:ltr;
}