.factories {
  position: relative;
  overflow: hidden; }
  .factories figure {
    margin: 0;
    display: -webkit-box;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
            flex-flow: row nowrap;
    -webkit-box-pack: end;
            justify-content: flex-end; }
  .factories h2 {
    padding: 0 2em 0;
    margin-top: 0; }
  .factories figcaption {
    max-width: 33.3%;
    margin-left: calc(6 * var(--step-5)); }
  .factories img {
    display: block; }
  .factories .map {
    --mouse-x: 0;
    --mouse-y: 0;
    padding: 3em 6em;
    position: relative;
    height: calc(100vh - 12em);
    cursor: url(../images/zoom-icon.svg), auto; }
    .factories .map.zoomed {
      cursor: auto; }
      .factories .map.zoomed > svg {
        opacity: 0.3; }
    .factories .map svg {
      display: block;
      width: auto;
      height: 100%;
      margin: 0 auto; }
  .factories .zoom {
    position: absolute;
    width: 33.3vw;
    top: var(--mouse-y);
    left: var(--mouse-x);
    -webkit-transform: translate(-50%, -50%) scale(0.2);
            transform: translate(-50%, -50%) scale(0.2);
    opacity: 0; }
    .factories .zoom svg {
      width: 100%;
      height: auto; }
    .factories .zoom tspan {
      opacity: 0; }
    .factories .zoom .truck-lith, .factories .zoom .truck-bulg {
      opacity: 0; }
    .factories .zoom .line--lith, .factories .zoom .line--bulg {
      -webkit-clip-path: polygon(100% 0%, 100% 0%, 100% 100%, 100% 100%);
              clip-path: polygon(100% 0%, 100% 0%, 100% 100%, 100% 100%); }
  @media (orientation: portrait) {
    .factories .map svg {
      width: 100%;
      height: auto; } }
  @media screen and (max-width: 1024px) {
    .factories h2 {
      margin-top: 1em; } }
  @media screen and (max-width: 768px) {
    .factories .map {
      padding: 1em; } }