trains.css

:root {
    --colour-blue: #0052a4;
    --colour-green: #156e46;
    --colour-grey: #777;
    --colour-ivory: #f5f5ce;
    --colour-lightblue: #4082f4;
    --colour-oldblue: #004294;
    --colour-oldyellow: #f7d117;
    --colour-white: white;
    --colour-yellow: #ffbc00;
}

@media only screen and (max-width: 40rem) {
    html {
        font-size: .8rem;
    }

    .icng,
    .sng,
    .flirt,
    .v250,
    .slt,
    .loc186,
    .ice3,
    .virm,
    .ddm,
    .loc1700,
    .icm,
    .sgm,
    .mat64,
    .mat54,
    .loc1300 {
        left: 1rem !important;
    }
}

body {
    background-color: /*cov*/#fefefe;
    font-family: Helvetica, Arial, sans-serif;
    margin: 0 0 5rem;
    padding: 0;
}

header {
    margin: -2rem 0 5rem;
    padding: .5rem 0 0;
}

main {
    margin: 1rem auto;
    max-width: 44rem;
}

h1 {
    font-size: 8rem;
    text-align: center;
}

h1 .css {
    background-color: var(--colour-yellow);
    box-shadow: 1rem 1rem #888;
    display: inline-block;
    padding: 0 1.5rem;
    transform: rotate(-5deg);
}

h2 {
    font-size: 1.6rem;
    letter-spacing: -.05rem;
    margin: 4rem 0 1rem;
    padding: 0 2rem;
}

p {
    font-size: 1.1rem;
    line-height: 1.5;
    margin: 1rem auto;
    max-width: 40rem;
    padding: 0 2rem;
}

a {
    color: var(--colour-blue);
}

h2 a {
    color: black;
    text-decoration: none;
}

h2 a:hover {
    color: var(--colour-blue);
}

h2 a:hover::after {
    content: '🔗';
    font-size: 1.4rem;
    margin-left: .5rem;
    position: absolute;
}

.ns-logo {
    background-color: #000463;
    clip-path: polygon(
        .37rem 0,
        0 .37rem,
        .37rem .74rem,
        .58rem .74rem,
        .28rem .45rem,
        .7rem .45rem,
        1rem .74rem,
        1.53rem .74rem,
        1.9rem .37rem,
        1.53rem 0,
        1.32rem 0,
        1.62rem .3rem,
        1.2rem .3rem,
        .9rem 0,
        .83rem 0,
        .83rem .15rem,
        1.14rem .45rem,
        1.62rem .45rem,
        1.47rem .6rem,
        1.09rem .6rem,
        .78rem .3rem,
        .28rem .3rem,
        .43rem .15rem,
        .83rem .15rem,
        .83rem 0
    );
    display: block;
    height: .74rem;
    width: 1.9rem;
}

.frame {
    background-color: skyblue;
    height: 15rem;
    margin: .5rem auto;
    max-width: 44rem;
    overflow: hidden;
    position: relative;
    user-select: none;
}

.grey.frame {
    background-color: #acd;
}

.dark.frame {
    background: linear-gradient(
        to bottom,
        #add2db 0%,
        #eab838 47%,
        #e5882b 80%,
        #d13729 100%
    );
}

.darker.frame {
    background: #8ab;
}

.overhead-line {
    background: #777;
    height: .05rem;
    position: absolute;
    top: 1.5rem;
    width: 100%;
}

.overhead-line::before {
    border: .05rem solid #777;
    border-radius: 50%;
    content: '';
    display: block;
    height: 2rem;
    left: -30rem;
    position: absolute;
    top: -3rem;
    width: 80rem;
}

.landscape {
    background: yellowgreen;
    bottom: 0;
    box-shadow: 0 -.2rem 0 .2rem #cbb,
                0 -.4rem 0 .2rem #aaa;
    display: block;
    height: 3.45rem;
    position: absolute;
    width: 100%;
    z-index: 120;
}

.road.landscape {
    background-color: #666;
    box-shadow: none;
}

.dark-grass.landscape {
    background-color: #6a4;
}

.winter.landscape {
    background: #f5f5f5;
}

.brown.landscape {
    background-color: #332200;
}

.sandy.landscape {
    background-color: #dc8;
}

.flower.landscape {
    letter-spacing: -.4rem;
    line-height: .5rem;
    margin-left: -.5rem;
    width: calc(100% + 1rem);
}




/**
 * -----------------------------------------------------------------------------
 * GENERIC
 * -----------------------------------------------------------------------------
 */

.wheels {
    background: #444;
    bottom: -1.3rem;
    display: block;
    height: 1rem;
    position: absolute;
    width: 3.5rem;
}

.long.wheels {
    height: 1.2rem;
    width: 5rem;
}

.wheels::before {
    background: #444;
    border-radius: 50%;
    content: '';
    display: block;
    height: 1.5rem;
    left: -1rem;
    position: absolute;
    width: 1.5rem;
}

.long.wheels::before {
    height: 1.7rem;
    width: 1.7rem;
}

.wheels::after {
    background: #444;
    border-radius: 50%;
    content: '';
    display: block;
    height: 1.5rem;
    position: absolute;
    right: -1rem;
    width: 1.5rem;
}

.long.wheels::after {
    height: 1.7rem;
    width: 1.7rem;
}




/**
 * -----------------------------------------------------------------------------
 * INTERCITY NIEUWE GENERATIE
 * -----------------------------------------------------------------------------
 */

.icng {
    left: 2rem;
    position: absolute;
    top: 3rem;
    display:  block;
    width: 100%;
    height: 50rem;
}

.icng * {
    display: block;
    position: absolute;
}

.icng .curvy-part {
    height: 8rem;
    width: 14rem;
}

.icng .curvy-part .main {
    background-color: var(--colour-yellow);
    clip-path: polygon(
        .1rem 5rem,
        .05rem 4.5rem,
        .2rem 4.2rem,
        .5rem 3.9rem,
        1rem 3.4rem,
        2rem 2.5rem,
        4rem .4rem,
        4.2rem .2rem,
        4.4rem .1rem,
        4.6rem .02rem,
        4.8rem 0,
        5.4rem .5rem,
        6rem 1rem,
        7rem 1.6rem,
        7.5rem 1.8rem,
        8rem 1.9rem,
        8rem 5.8rem,
        6rem 5.6rem,
        5rem 5.7rem,
        3rem 6.3rem,
        1rem 6.5rem,
        .5rem 6.6rem,
        0 6.8rem,
        .2rem 6.4rem,
        .4rem 6rem
    );
    height: 7rem;
    left: 1.2rem;
    top: .3rem;
    width: 8rem;
    z-index: 2;
}

.icng .curvy-part .main .ninja-mask {
    background: #222;
    clip-path: polygon(
        3.8rem 0,
        4.2rem .5rem,
        5rem 1.2rem,
        5.5rem 1.5rem,
        6rem 1.7rem,
        6.2rem 1.8rem,
        7rem 2.1rem,
        7.4rem 2.2rem,
        8rem 2.3rem,
        8rem 3.9rem,
        6rem 3.4rem,
        5rem 3rem,
        4rem 2.8rem,
        3.5rem 2.7rem,
        3rem 2.7rem,
        2rem 2.8rem,
        .5rem 3.2rem
    );
    height: 3.9rem;
    top: .5rem;
    width: 8rem;
}

.icng .curvy-part .main .ninja-mask .window {
    border-top: .5rem solid #333;
    border-left: .7rem solid transparent;
    border-right: .05rem solid transparent;
    height: 0;
    left: 1.6rem;
    top: 1.5rem;
    transform: rotate(-45deg);
    width: 2rem;
}

.icng .curvy-part .door {
    border-left: .1rem solid var(--colour-oldyellow);
    border-right: .1rem solid var(--colour-oldyellow);
    height: 3.6rem;
    left: 6.4rem;
    top: 2.1rem;
    width: 1.3rem;
    z-index: 10;
}

.icng .curvy-part .door::after {
    background-color: #333;
    border: .1rem solid #444;
    border-radius: .2rem;
    content: ' ';
    display: block;
    height: .8rem;
    left: .3rem;
    position: absolute;
    top: .5rem;
    width: .5rem;
}

.icng .curvy-part .main .headlight {
  border-bottom: .6rem solid #555;
  border-left: 1rem solid transparent;
  border-right: 1rem solid transparent;
  height: 0;
  left: -.5rem;
  top: 3.7rem;
  transform: rotate(-25deg);
  width: 0; 
}

.icng .curvy-part .main .ns-logo {
    left: 2.5rem;
    top: 4rem;
    transform: scale(.7);
}

.icng .curvy-part .yellow-overlay {
    background-color: var(--colour-yellow);
    clip-path: polygon(
        0 .3rem,
        1rem .6rem,
        2rem .9rem,
        6rem 1.7rem,
        7rem 1.9rem,
        8rem 2rem,
        8rem 2.1rem,
        0 2.1rem
    );
    left: 6rem;
    height: 2.1rem;
    top: 3.5rem;
    width: 9rem;
    z-index: 2;
}

.icng .curvy-part .chin {
    background-color: #555;
    height: 2rem;
    left: 1.6rem;
    top: 5.3rem;
    width: 4.4rem;
    z-index: 1;
}

.icng .boxy-part {
    background-color: var(--colour-yellow);
    height: 5.5rem;
    left: 6.5rem;
    top: .8rem;
    width: 40rem;
}

.icng .boxy-part .roof {
    background-color: var(--colour-grey);
    height: .7rem;
    width: 40rem;
}

.icng .boxy-part .roof .box-1 {
    background-color: #444;
    height: .5rem;
    left: .5rem;
    top: -.5rem;
    width: 1.6rem;
}

.icng .boxy-part .roof .box-2 {
    background-color: #666;
    height: .5rem;
    left: 3rem;
    top: -.5rem;
    width: 2.4rem;
}

.icng .boxy-part .roof .box-3 {
    background-color: #555;
    height: .5rem;
    left: 7.0rem;
    top: -.5rem;
    width: 6.6rem;
}

.icng .boxy-part .roof .box-4 {
    background-color: #888;
    height: .5rem;
    left: 14.6rem;
    top: -.5rem;
    width: 2rem;
}

.icng .boxy-part .roof .box-5 {
    background-color: #555;
    height: .5rem;
    left: 18rem;
    top: -.5rem;
    width: 6.6rem;
}

.icng .boxy-part .roof .box-6 {
    background-color: #bbb;
    height: .3rem;
    left: 31.3rem;
    top: -.3rem;
    width: 3rem;
}

.icng .boxy-part .blue-line {
    background-color: var(--colour-blue);
    width: 40rem;
}

.icng .boxy-part .top.blue-line {
    height: .7rem;
    top: .7rem;
}

.icng .boxy-part .display {
    background-color: var(--colour-grey);
    border: .1rem solid black;
    height: .3rem;
    left: 20.5rem;
    top: 1.6rem;
    width: 2.5rem;
}

.icng .boxy-part .window,
.icng .boxy-part .door::after {
    background: repeating-linear-gradient(
        45deg,
        #cbe1e7,
        #d5e7ec 1rem
    );
    border: .05rem solid #333;
    border-radius: .2rem;
}

.icng .boxy-part .small.window {
    height: 1.4rem;
    top:  2.4rem;
    width: 2.5rem;
}

.icng .boxy-part .first.small.window {
    left: 3.8rem;
}

.icng .boxy-part .first.small.window::after,
.icng .boxy-part .first.large.window::after,
.icng .boxy-part .fourth.large.window::after {
    color: white;
    content: '2';
    font-weight: bold;
    margin-left: 2.9rem;
    position: relative;
    top: -.2rem;
}

.icng .boxy-part .first.large.window::after {
    margin-left: 3.5rem;
}

.icng .boxy-part .fourth.large.window::after {
    margin-left: 4rem;
}

.icng .boxy-part .second.small.window {
    left: 7.6rem;
}

.icng .boxy-part .third.small.window {
    left: 34.2rem;
}

.icng .boxy-part .large.window {
    height: 2.1rem;
    top:  2.4rem;
    width: 3.2rem;
}

.icng .boxy-part .first.large.window {
    left: 15.8rem;
}

.icng .boxy-part .second.large.window {
    left: 20.2rem;
}

.icng .boxy-part .second.large.window::after {
    border: .05rem solid #333;
    border-radius: .1rem;
    content: ' ';
    display: block;
    height: .4rem;
    margin-left: -.1rem;
    width: 3.4rem;
}

.icng .boxy-part .third.large.window {
    left: 24.6rem;
}

.icng .boxy-part .fourth.large.window {
    left: 29rem;
}

.icng .boxy-part .main.blue-line {
    background: linear-gradient(
        90deg,
        #222 0,
        #222 3rem,
        var(--colour-blue) 4rem,
        var(--colour-blue) 100%
    );
    height: 2.4rem;
    top: 2.3rem;
}

.icng .boxy-part .door {
    background-color: var(--colour-yellow);
    border: .2rem solid var(--colour-blue);
    box-sizing: content-box;
    height: 3.9rem;
    left: 11.3rem;
    top: 1.4rem;
    width: 2.9rem;
}

.icng .boxy-part .door::after {
    content: ' ';
    display: block;
    height: 1.9rem;
    left: .7rem;
    position: absolute;
    top: .5rem;
    width: 1.4rem;
}

.icng .boxy-part .ns-logo {
    left: 25.8rem;
    top: 4.7rem;
    transform: scale(.7);
}

.icng .boxy-part .bottom {
    border-top: .8rem solid #555;
    border-left: 1.5rem solid transparent;
    border-right: 1.5rem solid transparent;
    height: 0;
    left: 8rem;
    top: 5.5rem;
    width: 30rem;
}

.icng .wheels {
    left: 9.2rem;
    top: 6.4rem;
    transform: scale(1.15);
}




/**
 * -----------------------------------------------------------------------------
 * SPRINTER NIEUWE GENERATIE
 * -----------------------------------------------------------------------------
 */

.sng {
    left: 2rem;
    position: absolute;
    top: 3.6rem;
}

.sng * {
    display: block;
    position: absolute;
}

.sng .boxes {
    background-color: var(--colour-grey);
    height: 1rem;
    left: 5rem;
    top: .3rem;
    width: 25rem;
}
.sng .first.car {
    background-color: var(--colour-white);
    box-shadow: inset 0 -.2rem 0 0rem var(--colour-yellow);
    clip-path: polygon(
        3.7rem 0,
        38.4rem 0,
        38.4rem 5.2rem,
        35.9rem 5.2rem,
        35.8rem 5.23rem,
        35.7rem 5.28rem,
        35.6rem 5.35rem,
        35.5rem 5.55rem,
        35.5rem 5.7rem,
        12.7rem 5.7rem,
        12.7rem 5.6rem,
        12.7rem 5.6rem,
        12.6rem 5.4rem,
        12.5rem 5.3rem,
        12.3rem 5.2rem,
        4rem 5.2rem,
        3.5rem 6rem,
        .2rem 5.7rem,
        .1rem 5.6rem,
        0 5.5rem,
        0 5rem,
        .2rem 4rem,
        .6rem 3rem,
        .9rem 2.5rem,
        1.2rem 2rem,
        2rem 1rem,
        2.5rem .6rem,
        3.1rem .2rem
    );
    height: 5.7rem;
    top: .6rem;
    width: 38.4rem;
    z-index: 5;
}

.sng .first.car::before,
.sng .first.car::after,
.sng .second.car::before {
    background-color: var(--colour-yellow);
    border-radius: .5rem;
    content: '';
    display: block;
    height: 1rem;
    position: absolute;
    top: 5.05rem;
    width: 12.8rem;
}

.sng .first.car::after {
    left: 35.4rem;
}

.sng .second.car::before {
    left: -10rem;
}

.sng .first.car .roof {
    background-color: var(--colour-blue);
    clip-path: polygon(
        40rem 0rem,
        40rem .7rem,
        3rem .7rem,
        2.6rem 1rem,
        2.2rem 1.4rem,
        1.6rem 2rem,
        .9rem 3rem,
        0rem 3rem,
        0 0
    );
    height: 3rem;
    width: 40rem;
}

.sng .second.car {
    background-color: var(--colour-yellow);
    box-shadow: inset 0 .7rem var(--colour-blue),
                inset 0 1rem var(--colour-white),
                inset 0 4.6rem var(--colour-blue),
                inset 0 5.45rem var(--colour-white);
    clip-path: polygon(
        0 0,
        5rem 0,
        5rem 5.7rem,

        2.7rem 5.6rem,
        2.6rem 5.4rem,
        2.5rem 5.3rem,
        2.3rem 5.2rem,

        1.7rem 5.2rem,
        0 5.2rem
    );
    height: 5.7rem;
    left: 39.2rem;
    padding-left: .6rem;
    top: .6rem;
    width: 5rem;
    z-index: 5;
}

.sng .first.car .blue-strip {
    background-color: var(--colour-blue);
    clip-path: polygon(
        4.6rem 0,
        39rem 0,
        39rem 3.6rem,
        1.8rem 3.6rem,
        0 2.3rem
    );
    height: 3.6rem;
    left: 2.1rem;
    top: 1rem;
    width: 39rem;
}

.sng .ns-logo {
    background-color: var(--colour-blue);
    left: 22.6rem;
    top: 4.7rem;
    transform: scale(.7);
}

.sng .side.window {
    background: none;
    background-color: #333;
    border: none;
    clip-path: polygon(
        1.5rem 0,
        4.3rem 0,
        4.4rem .1rem,
        .5rem 2.1rem,
        0rem 1.7rem,
        .8rem .6rem
    );
    left: 1.2rem;
    height: 2.1rem;
    position: absolute;
    top: 1rem;
    width: 4.4rem;
    z-index: 49;
}

.sng .side.window::after {
    background: none;
    background-color: #444;
    border: none;
    content: '';
    clip-path: polygon(
        1.6rem .1rem,
        4.1rem .1rem,
        .5rem 1.9rem,
        .2rem 1.7rem,
        .9rem .7rem
    );
    display: block;
    height: 2rem;
    position: absolute;
    width: 4.3rem;
    z-index: 50;
}

.sng .headlight {
    background-color: #aae;
    border-radius: 50%;
    clip-path: polygon(
        .1rem 1.3rem,
        1rem .2rem,
        1rem 3rem

    );
    height: 2rem;
    left: .3rem;
    transform: rotate(40deg);
    top: 2rem;
    width: .8rem;
}

.sng .nose {
    background-color: #444;
    clip-path: polygon(
        0 0,
        4rem 1.2rem,
        4rem 2rem,
        0 2rem
    );
    height: 2rem;
    top: 4rem;
    width: 4rem;
}

.sng .windows {
    display: flex;
    top: 1.5rem;
}

.sng .window {
    background: repeating-linear-gradient(
        45deg,
        #cbe1e7,
        #d5e7ec 1rem
    );
    border: .05rem solid #333;
    border-radius: .2rem;
    height: 2.1rem;
    margin: 0 .3rem;
    position: static;
    width: 1.9rem;
}

.sng .first.windows {
    left: 6.6rem;
    width: 40rem;
}

.sng .first.windows .window:nth-child(3n+1),
.sng .first.windows .window:nth-child(3n+2),
.sng .third.windows .window:nth-child(2n+2),
.sng .second.car .window:first-child {
    height: 1.7rem;
    width: 2.3rem;
}

.sng .first.windows .window:nth-child(3n+3),
.sng .third.windows .window:nth-child(2n+2) {
    margin-left: .5rem;
}

.sng .second.windows {
    left: 19.5rem;
}

.sng .third.windows {
    left: 31.8rem;
}

.sng .doors {
    display: flex;
    top: 1rem;
}

.sng .car .front.doors {
    left: 16.1rem;
}

.sng .car .middle.doors {
    left: 28.4rem;
}

.sng .door {
    background-color: var(--colour-yellow);
    border: .05rem solid #333;
    box-shadow: inset 0 -.4rem var(--colour-grey);
    height: 4.8rem;
    position: static;
    width: 1.3rem;
}

.sng .doors .door:first-child {
    margin-right: -.05rem;
    border-top-left-radius: .2rem;
}

.sng .doors .door:nth-child(2n+2) {
    border-top-right-radius: .2rem;
}

.sng .door .window {
    height: 2.3rem;
    margin: .3rem .3rem;
    position: static;
    width: .6rem;
}

.sng .gangway {
    background-color: #444;
    height: 4.6rem;
    left: 38.4rem;
    top: 1.1rem;
    width: .8rem;
}

.sng .wheels {
    top: 5.8rem;
    transform: scale(1.1);
}

.sng .first.wheels {
    left: 7.8rem;
}

.sng .second.wheels {
    left: 37rem;
}




/**
 * -----------------------------------------------------------------------------
 * FLIRT
 * -----------------------------------------------------------------------------
 */

.flirt {
    left: 2rem;
    position: absolute;
    top: 3.7rem;
}

.flirt * {
    display: block;
    position: absolute;
}

.flirt .first.car {
    background-color: var(--colour-white);
    box-shadow: inset 0 -.6rem var(--colour-yellow);
    clip-path: polygon(
        4.5rem 0,
        22.3rem 0,
        22.4rem .2rem,
        22.5rem .4rem,
        22.7rem .5rem,
        23rem .6rem,
        42rem .6rem,
        42rem 5.7rem,
        41.5rem 5.7rem,
        41rem 6.2rem,
        13.5rem 6.2rem,
        12.5rem 5.7rem,
        8rem 5.7rem,
        6rem 6.6rem,
        3rem 6.6rem,
        2.5rem 6.5rem,
        2rem 6.3rem,
        1.6rem 6.1rem,
        1.4rem 6rem,
        1.2rem 5.5rem,
        1.1rem 4.4rem,
        1.3rem 3.6rem,
        2rem 2rem,
        3rem .8rem,
        3.5rem .4rem,
        4rem .1rem
    );
    height: 6.6rem;
    width: 42rem;
    z-index: 5;
}

.flirt .second.car {
    background-color: var(--colour-blue);
    box-shadow: inset 0 -1.3rem var(--colour-white),
                inset 0 -4.8rem var(--colour-blue),
                inset 0 -5.2rem var(--colour-white),
                -3rem 0 0 -.5rem var(--colour-grey);
    height: 5.7rem;
    left: 43rem;
    top: .5rem;
    width: 4rem;
}

.flirt .first.car .roof {
    background-color: var(--colour-blue);
    clip-path: polygon(
        0 0,
        42rem 0,
        42rem 1rem,
        4.5rem 1rem,
        4rem 1.1rem,
        3.5rem 1.2rem,
        3.1rem 1.5rem,
        2.1rem 2.5rem,
        1.3rem 3.9rem,
        0 3.9rem
    );
    height: 4rem;
    width: 42rem;
}

.flirt .driver-window {
    background: #333;
    clip-path: polygon(
        1.3rem 0,
        2.2rem 0,
        1.6rem 1.7rem,
        .3rem 1.7rem,
        0 1.4rem,
        .2rem .9rem,
        .8rem .3rem,
        1.1rem .1rem
    );
    height: 1.7rem;
    left: 2.4rem;
    top: 1.6rem;
    width: 2.2rem;
}

.flirt .driver-window::after {
    background: #555;
    clip-path: polygon(
        1.4rem .1rem,
        2.1rem .1rem,
        1.5rem 1.6rem,
        .4rem 1.6rem,
        .1rem 1.4rem,
        .3rem 1rem,
        .9rem .4rem,
        1.2rem .2rem
    );
    content: '';
    display: block;
    height: 1.7rem;
    position: absolute;
    width: 2.2rem;
}

.flirt .driver-door {
    border-left: .1rem solid #333;
    border-right: .1rem solid #333;
    left: 4.8rem;
    height: 3rem;
    top: 2.5rem;
    width: 1.4rem;
}

.flirt .chin {
    background-color: #444;
    clip-path: polygon(
        0 .5rem,
        1.9rem 0,
        3rem 1rem,
        4rem 1.5rem,
        5rem 1.7rem,
        6rem 1.8rem,
        8rem 1.8rem,
        8rem 3rem,
        0 3rem
    );
    height: 3rem;
    top: 4rem;
    width: 8rem;
}

.flirt .banner {
    background-color: var(--colour-blue);
    clip-path: polygon(
        35rem 0,
        35rem 3.5rem,
        4rem 3.5rem,
        3rem 3.4rem,
        2rem 3.2rem,
        1rem 2.8rem,
        0 2.2rem,
        .5rem 1.4rem,
        1rem .9rem,
        1.5rem .5rem,
        2rem .2rem,
        3rem 0
    );
    height: 3.5rem;
    left: 7.2rem;
    top: 1.4rem;
    width: 35rem;
}

.flirt .driver-door .window {
    background: #555;
    height: 1rem;
    margin: 0 .3rem;
    position: absolute;
    top: -.6rem;
    width: .6rem;
}

.flirt .windows {
    display: flex;
    top: 2.4rem;
}

.flirt .first-class.windows {
    left: 11.6rem;
}

.flirt .first-class.windows::before {
    background-color: var(--colour-white);
    content: '';
    display: block;
    height: .2rem;
    left: 5%;
    position: absolute;
    top: -.6rem;
    width: 90%;
}

.flirt .middle.windows {
    left: 21.5rem;
}

.flirt .back.windows {
    left: 34.7rem;
}

.flirt .window {
    background: repeating-linear-gradient(
        45deg,
        #cbe1e7,
        #d5e7ec 1rem
    );
    border: .1rem solid #333;
    border-radius: .2rem;
    height: 2rem;
    margin: 0 .4rem;
    position: static;
    width: 2.25rem;
}

.flirt .small.window {
    height: 1.6rem;
}

.flirt .window.with.sign {
    box-shadow: inset 0 .6rem #333;
}

.flirt .window hr {
    border: 0;
    border-top: .1rem solid #333;
    position: static;
    z-index: 20;
}

.flirt .doors {
    display: flex;
    top: 1.6rem;
}

.flirt .car .front.doors {
    left: 18.3rem;
}

.flirt .car .middle.doors {
    left: 31.4rem;
}

.flirt .door {
    background-color: var(--colour-yellow);
    border: .1rem solid var(--colour-blue);
    box-shadow: inset 0 -.1rem var(--colour-grey);
    height: 4.8rem;
    position: static;
    width: 1.4rem;
}

.flirt .doors .door:first-child {
    margin-right: -.05rem;
    border-top-left-radius: .2rem;
    border-right: .05rem solid #333;
}

.flirt .doors .door:nth-child(2n+2) {
    border-top-right-radius: .2rem;
    border-left: .05rem solid #333;
}

.flirt .door .window {
    height: 2.2rem;
    margin: .6rem .3rem;
    position: static;
    width: .7rem;
}

.flirt .ns-logo {
    left: 25.3rem;
    top: 5rem;
    transform: scale(1.1);
}

.flirt .wheels {
    top: 5.8rem;
    transform: scale(1.1);
}

.flirt .first.wheels {
    left: 8.3rem;
}

.flirt .second.wheels {
    left: 40.7rem;
}




/**
 * -----------------------------------------------------------------------------
 * V250 - HELPE, IT IS ON FYRA
 * -----------------------------------------------------------------------------
 */

.v250 {
    left: 2rem;
    position: absolute;
    top: 3.5rem;
}

.v250 * {
    display: block;
    position: absolute;
}

.v250 .nose {
    background-color: var(--colour-white);
    border-top-left-radius: 90% 70%;
    height: 3.5rem;
    top: 2.8rem;
    width: 5rem;
}

.v250 .nose::before {
    border-bottom: .6rem solid #444;
    border-left: 2.5rem solid transparent;
    bottom: 0;
    content: '';
    display: block;
    height: 0;
    right: 0;
    position: absolute;
    width: 0;
}

.v250 .nose::after {
    background-color: #444;
    border-bottom-left-radius: 90% 70%;
    content: '';
    display: block;
    height: .5rem;
    position: absolute;
    top: 3.5rem;
    width: 5rem;
}

.v250 .drivers-cabin {
    background-color: var(--colour-white);
    left: 4.8rem;
    top: 2.8rem;
    height: 2.9rem;
    width: 4.5rem;
}

.v250 .drivers-cabin::before {
    border-bottom: 2.8rem solid var(--colour-white);
    border-left: 4.8rem solid transparent;
    content: '';
    display: block;
    height: 0;
    left: -.3rem;
    position: absolute;
    top: -2.8rem;
    width: 0;
}

.v250 .drivers-window {
    background-color: #333;
    border: .1rem solid #444;
    border-right-width: .5rem;
    height: 1.1rem;
    left: 3.8rem;
    top: -1.4rem;
    width: .7rem;
    z-index: 10;
}

.v250 .drivers-window::before,
.v250 .drivers-window::after {
    content: '';
    display: block;
    position: absolute;
    height: 0;
    width: 0;
}

.v250 .drivers-window::before {
    border-bottom: 1.35rem solid #444;
    border-left: 2rem solid transparent;
    left: -2.1rem;
    top: -.15rem;
}

.v250 .drivers-window::after {
    border-top: 1.35rem solid #444;
    border-right: 2.4rem solid transparent;
    left: 1.2rem;
    top: -.15rem;
}


.v250 .main {
    background-color: var(--colour-white);
    height: 5.7rem;
    left: 9.2rem;
    width: 40rem;
    z-index: 2;
}

.v250 .main::after {
    background-color: #444;
    bottom: -1rem;
    box-shadow: -8rem -.3rem 0 -.3rem #444,
                8rem -.3rem 0 -.3rem #444;
    content: '';
    display: block;
    height: 1rem;
    left: 3.5rem;
    position: absolute;
    width: 25.5rem;
    z-index: -1;
}

.v250 .fyra {
    border-bottom: 1rem solid black;
    border-left: 1rem solid transparent;
    bottom: 0;
    height: 0;
    left: 24.2rem;
    width: 0;
}

.v250 .fyra.red {
    border-bottom: 5.7rem solid #c11721;
    border-left-width: 34rem;
    border-right: 5rem solid #c11721;
    left: -4.2rem;
}

.v250 .fyra.purple {
    border-bottom: 2.6rem solid #ad1766;
    border-left-width: 12rem;
    left: 24.2rem;
}

.v250 .door {
    border: .1rem solid #333;
    border-radius: .2rem;
    height: 4.5rem;
    left: 4.2rem;
    top: 1.3rem;
    width: 2rem;
}

.v250 .window {
    background: repeating-linear-gradient(
        45deg,
        #cbe1e7,
        #d5e7ec 1rem
    );
    border: .1rem solid #333;
    height: 1.5rem;
}

.v250 .door .window {
    border-radius: .2rem;
    left: .6rem;
    top: .5rem;
    width: .9rem;
}

.v250 .windows {
    background-color: #333;
    display: flex;
    height: 1.7rem;
    left: 6.3rem;
    padding-left: .8rem;
    top: 1.8rem;
    width: 30rem;
}

.v250 .windows .window {
    margin: 0 .65rem;
    position: static;
    width: 2.3rem;
}

.v250 .wheels {
    top: 6rem;
    transform: scale(1.1);
}

.v250 .first.wheels {
    left: 7.2rem;
}

.v250 .second.wheels {
    left: 40rem;
}



/**
 * -----------------------------------------------------------------------------
 * SPRINTER LIGHTTRAIN
 * -----------------------------------------------------------------------------
 */

.slt {
    display: flex;
    justify-content: flex-start;
    left: 4rem;
    margin-left: 4.3rem;
    position: absolute;
    top: 3.5rem;
}

.slt .car {
    background: var(--colour-white);
    border-bottom: .25rem solid var(--colour-yellow);
    display: flex;
    height: 4.8rem;
    margin: 1rem .3rem;
}

.slt .car-1 {
    border-top: 1rem solid var(--colour-blue);
    position: relative;
    top: -1rem;
    width: 29.3rem;
    z-index: 10;
}

.slt .car-1::before {
    border-left: .5rem solid transparent;
    border-top: 2rem solid #888;
    content: '';
    display: block;
    height: 0;
    position: absolute;
    right: 10rem;
    top: -1.5rem;
    transform: scaleY(.5) scaleX(9);
    width: 2rem;
}

.slt .car-1::after {
    bottom: -1.65rem;
    content: '';
    border-left: .1rem solid transparent;
    border-right: .1rem solid transparent;
    border-top: 2rem solid var(--colour-grey);
    display: block;
    height: 0;
    left: 15rem;
    position: absolute;
    transform: scaleY(.4) scaleX(9);
    width: 2rem;
}

.slt .car-2 {
    border-top: .4rem solid #888;
    box-shadow: -1rem .1rem 0 -.1rem var(--colour-grey),
                 1rem .1rem 0 -.1rem var(--colour-grey);
    position: relative;
    top: -.4rem;
    width: 27.5rem;
}

.slt .car-2::before {
    content: '';
    border-left: .1rem solid transparent;
    border-right: .1rem solid transparent;
    border-top: 2rem solid #888;
    display: block;
    height: 0;
    left: 14rem;
    position: absolute;
    transform: rotate(180deg) scaleY(.4) scaleX(9);
    top: -1.8rem;
    width: 2rem;
}

.slt .drivers-cabin {
    background: var(--colour-white);
    border-radius: 80% 0% 0% 80% / 80% 0% 0% 20%;
    display: block;
    height: 4.8rem;
    position: absolute;
    left: -4.5rem;
    width: 5rem;
}

.slt .drivers-cabin::before {
    background: var(--colour-blue);
    border-radius: 80% 0% 0% 80% / 80% 0% 0% 20%;
    content: '';
    display: block;
    height: 6rem;
    position: absolute;
    top: -1rem;
    width: 5rem;
    z-index: -1;
}

.slt .drivers-cabin::after {
    background: var(--colour-yellow);
    border-radius: 80% 0% 0% 80% / 80% 0% 0% 20%;
    content: '';
    display: block;
    height: 4.8rem;
    position: absolute;
    top: .3rem;
    width: 5rem;
    z-index: -1;
}

.slt .coupler {
    background: var(--colour-grey);
    border-radius: 50% / 50%;
    bottom: -1.2rem;
    display: block;
    height: 4rem;
    position: absolute;
    width: 1rem;
    z-index: -1;
}

.slt .coupler::after {
    bottom: -1rem;
    border-left: .5rem solid transparent;
    border-right: .5rem solid transparent;
    border-top: 3.2rem solid var(--colour-grey);
    content: '';
    display: block;
    height: 0;
    left: 0rem;
    position: absolute;
    transform: scaleY(.4);
    width: 3.2rem;
}

.slt .first-class-section {
    box-shadow: inset 0 .3rem 0 var(--colour-blue),
                inset -.4rem .3rem 0 var(--colour-blue),
                inset .4rem .3rem 0 var(--colour-blue),
                inset 0 .5rem 0 var(--colour-white);
    display: flex;
}

.slt .windows {
    background: var(--colour-blue);
    display: flex;
    height: 2.8rem;
    margin-top: .9rem;
}

.slt .first-class.windows {
    border-bottom-right-radius: .4rem;
    border-top-right-radius: .4rem;
    box-shadow: -1rem 0 var(--colour-blue);
    box-sizing: border-box;
    flex-direction: row-reverse;
    padding-right: .5rem;
    position: relative;
    width: 11.8rem;
}

.slt .first-class.windows::after {
    background: var(--colour-blue);
    border-radius: .4rem;
    content: '';
    display: block;
    height: 2.2rem;
    left: -3rem;
    position: relative;
    top: .3rem;
    transform: scaleX(1.5) rotate(45deg);
    width: 2.2rem; 
}

.slt .car-1 > .second-class.windows {
    border-bottom-left-radius: .4rem;
    border-top-left-radius: .4rem;
    padding-left: .5rem;
    position: relative;
    width: calc(13.8rem - .5rem);
}

.slt .car-2 > .second-class.windows {
    padding-left: .5rem;
}

.slt .doors {
    display: flex;
    float: left;
    margin: .9rem .4rem 0;
}

.slt .door {
    background: var(--colour-yellow);
    display: block;
    height: 4.2rem;
    width: 1.45rem;
}

.slt .door:nth-child(2n+1) {
    border-right: .05rem solid var(--colour-grey);
    border-top-left-radius: .4rem;
}

.slt .door:nth-child(2n+2) {
    border-left: .05rem solid var(--colour-grey);
    border-top-right-radius: .4rem;
}

.slt .drivers-door {
    border-left: .1rem solid #aaa;
    border-right: .1rem solid #aaa;
    display: block;
    height: 2.4rem;
    left: 3.5rem;
    position: relative;
    top: .8rem;
    width: 1.3rem;
    z-index: 10;
}

.slt .window {
    background: repeating-linear-gradient(
        45deg,
        #cbe1e7,
        #d5e7ec 1rem
    );
    border: .1rem solid #333;
    border-radius: .3rem;
    display: block;
    height: 1.5rem;
    margin: .8rem .35rem 0;
}

.slt .driver-window {
    background: #444;
    height: 1rem;
    left: -.1rem;
    position: relative;
    top: -.7rem;
    width: .65rem;
}

.slt .large-window {
    width: 3.2rem;
}

.slt .door-window {
    width: .65rem;
}

.slt .small-window {
    width: 2.2rem;
}

.slt .ns-logo {
    background-color: var(--colour-blue);
    left: 6.3rem;
    position: absolute;
    top: 3.85rem;
}

.slt .wheels-1 {
    left: 1.2rem;
}

.slt .wheels-2 {
    left: 27.7rem;
}




/**
 * -----------------------------------------------------------------------------
 * BOMBARDIER TRAXX
 * -----------------------------------------------------------------------------
 */

.loc186 {
    left: 2rem;
    position: absolute;
    top: 3.8rem;
}

.loc186 * {
    display: block;
    position: absolute;
}

.loc186 .front {
    height: 7.2rem;
    width: 17rem;
}

.loc186 .pantograph {
    top: -2.3rem;
}

.loc186 .pantograph:nth-child(1) {
    left: 6rem;
}

.loc186 .pantograph:nth-child(2) {
    left: 8rem;
}

.loc186 .pantograph .collector {
    background-color: var(--colour-grey);
    height: .2rem;
    width: .8rem;
}

.loc186 .pantograph .control {
    background-color: var(--colour-grey);
    height: .8rem;
    width: 1.5rem;
}

.loc186 .pantograph .control {
    top: 1.8rem;
}

.loc186 .pantograph.down .collector {
    top: 1.5rem;
}

.loc186 .pantograph:nth-child(2) .collector {
    left: .6rem;
}

.loc186 .pantograph.down .arm {
    background-color: var(--colour-grey);
    height: .4rem;
    left: -2.8rem;
    top: 1.7rem;
    width: 3.5rem;
}

.loc186 .pantograph.down:nth-child(2) .arm {
    left: .7rem;
}

.loc186 .pantograph.up .arm,
.loc186 .pantograph.up .arm::after {
    background-color: var(--colour-grey);
    height: .2rem;
    left: .8rem;
    transform: rotate(20deg);
    top: .6rem;
    width: 3.5rem;
}

.loc186 .pantograph.up .arm::after {
    content: '';
    display: block;
    left: .4rem;
    position: absolute;
    top: 1.1rem;
    transform: rotate(-40deg);
}


.loc186 .front .roof {
    background-color: var(--colour-grey);
    height: 1rem;
    left: 5rem;
    top: .2rem;
    width: 12rem;
}

.loc186 .front .car {
    background-color: var(--colour-yellow);
    clip-path: polygon(
        17rem 1rem,
        17rem 5.5rem,
        2.6rem 5.5rem,
        2.2rem 5.6rem,
        .6rem 5.6rem,
        .6rem 4.5rem,
        0 4.5rem,
        0 4rem,
        .1rem 3rem,
        .5rem 2rem,
        1rem 1rem,
        1.5rem .3rem,
        2rem 0,
        5.5rem 0,
        5.5rem 1rem
    );
    height: 7.2rem;
    width: 17rem;
    z-index: 5;
}

.loc186 .front .driver-window {
    background-color: #333;
    clip-path: polygon(
        .4rem 0,
        .9rem 0,
        .9rem 1.1rem,
        0 1.1rem,
        0 .4rem
    );
    height: 1.1rem;
    left: 2.3rem;
    top: 1.2rem;
    width: .9rem;
    z-index: 10;
}

.loc186 .front .door {
    border-left: .1rem solid #aaa;
    border-right: .1rem solid #aaa;
    height: 3.5rem;
    left: 3.5rem;
    top: 1.2rem;
    width: 1.5rem;
    z-index: 10;
}

.loc186 .front .ns-logo {
    background-color: var(--colour-white);
    left: 5.9rem;
    top: 2.3rem;
    z-index: 10;
}

.loc186 .center {
    background-color: var(--colour-blue);
    clip-path: polygon(
        15.9rem 0,
        15.9rem 2.9rem,
        .4rem 2.9rem,
        .2rem 2.8rem,
        0 2.4rem,
        .5rem 1.1rem,
        .8rem .5rem,
        1rem .2rem,
        1.4rem 0
    );
    height: 2.9rem;
    left: 1.2rem;
    top: 1rem;
    width: 15.9rem;
}

.loc186 .front .coupler {
    background-color: #333;
    height: .5rem;
    left: -.5rem;
    top: 4.8rem;
    width: 2rem;
}

.loc186 .front .coupler::after {
    background-color: #333;
    clip-path: polygon(
        0 0,
        2rem 0,
        2rem 1.6rem,
        0 2rem
    );
    content: '';
    display: block;
    height: 2rem;
    left: .5rem;
    position: absolute;
    top: -.5rem;
    width: 2rem;
}

.loc186 .front .belly {
    background-color: #444;
    height: 1rem;
    left: 12rem;
    top: 5.5rem;
    width: 5rem;
}

.loc186 .front .wheels {
    left: 5.3rem;
    top: 5.5rem;
    transform: scale(1.3);
}

.loc186 .front.mirrored {
    left: 16.9rem;
    transform: scaleX(-1);
}

.loc186 .front.mirrored .ns-logo {
    transform: scaleX(-1);
}




/**
 * -----------------------------------------------------------------------------
 * VDL FUTURA / CHOO CHOO, I'M A TRAIN
 * -----------------------------------------------------------------------------
 */

.bus {
    display: block;
    height: 20rem;
    margin-left: 2rem;
    margin-top: 3.7rem;
    position: relative;
}

.bus * {
    display: block;
    position: absolute;
}

.bus .body {
    background-color: #fafafa;
    clip-path: polygon(
        0 .5rem,
        30.5rem .5rem,
        32rem 5rem,
        32rem 6rem,
        31.5rem 7.2rem,
        .2rem 7.2rem,
        .1rem 6rem,
        .3rem 4rem,
        .1rem 2.2rem,
        .3rem 1rem
    );
    height: 7.2rem;
    width: 31.7rem;
}

.bus .roof-top,
.bus .roof-top::before,
.bus .roof-top::after {
    background-color: #111;
    border-top-left-radius: 50% 20%;
    border-top-right-radius: 50% 20%;
    content: '';
    display: block;
    height: 1rem;
    left: 9rem;
    position: absolute;
    width: 10rem;
}

.bus .roof-top::before,
.bus .roof-top::after {
    left: -2.7rem;
    height: .5rem;
    top: .3rem;
    width: 2.5rem;
}

.bus .roof-top::after {
    left: 16.5rem;
}

.bus .roof {
    background-color: #111;
    clip-path: polygon(
        0 0,
        31.7rem 0,
        31.7rem 4.9rem,
        28.1rem 4rem,
        27.8rem 3.1rem,
        3rem 3.1rem,
        0 2.2rem
    );
    height: 4.9rem;
    width: 31.7rem;
}

.bus .windows {
    background-color: #333;
    clip-path: polygon(
        1.1rem .9rem,
        31.7rem .9rem,
        31.7rem 4.3rem,
        31rem 4.6rem,
        28.3rem 4rem,
        28.3rem 3.1rem,
        3rem 3.1rem,
        1.1rem 2.5rem
    );
    height: 4.9rem;
    text-orientation: mixed;
    width: 31.7rem;
    writing-mode: vertical-rl;
}

.bus .windows hr {
    background-color: black;
    border: none;
    margin-right: 4.2rem;
    position: static;
    width: 1px;
}

.bus .windows hr:nth-child(1) {
    margin-right: 3.4rem;
}

.bus .windows hr:nth-child(2) {
    margin-right: 2rem;
}

.bus .windows hr.door {
    height: 10rem;
    position: absolute;
    right: -3rem;
    transform: rotate(-10deg);
}

.bus .light {
    aspect-ratio: 3 / 1;
    background-color: #ddd;
    border-radius: 50%;
    transform: rotate(40deg);
}

.bus .lights.front {
    top: 5.2rem;
    left: 30.8rem;
}

.bus .lights.rear {
    left: -.1rem;
    top: 4.6rem;
    transform: scaleX(-1);
}

.bus .lights .light {
    position: static;
}

.bus .lights.rear .light {
    background-color: #900;
}

.bus .lights .light:nth-child(1) {
    width: 1rem;
}

.bus .lights .light:nth-child(2) {
    margin-top: .4rem;
    margin-left: .2rem;
    width: .7rem;
}

.bus .lights .light:nth-child(3) {
    margin-top: .4rem;
    margin-left: .3rem;
    width: .7rem;
}

.bus .box,
.bus .door {
    background-color: #fafafa;
    border: 1px solid black;
}

.bus .passenger.box {
    height: 4.8rem;
    left: 1.2rem;
    width: 28rem;
}

.bus .luggage.box {
    background-color: #fafafa;
    height: 2.4rem;
    left: 3.2rem;
    top: 4.8rem;
    width: 2.3rem;
}

.bus .luggage.box:nth-child(2) {
    left: 11.6rem;
    width: 3rem;
}

.bus .luggage.box:nth-child(3) {
    left: 18.5rem;
    width: 4rem;
}

.bus .luggage.box:nth-child(4) {
    left: 21.5rem;
    width: 3rem;
}

.bus .door {
    height: 100%;
}

.bus .door.front {
    left: 28.3rem;
    width: 2rem;
}

.bus .door.rear {
    left: 14.3rem;
    width: 1.8rem;
}

.bus .mirror {
    background-color: black;
    clip-path: polygon(
        0 0,
        1.4rem 0,
        2rem .5rem,
        2.2rem 2rem,
        2rem 2rem,
        1.6rem .7rem,
        1rem .4rem,
        0 .4rem
    );
    height: 2rem;
    left: 29.3rem;
    top: 1rem;
    width: 2.2rem;
}

.bus .ventilation {
    background: repeating-linear-gradient(
        0,
        #555,
        #aaa .2rem
    );
    height: .8rem;
    left: 1.4rem;
    top: 5.1rem;
    width: 1.1rem;
}

.bus .name {
    color: orangered;
    font-style: italic;
    font-weight: bold;
    left: 18rem;
    top: 3.4rem;
}

.bus .wheel {
    background-color: #444;
    border-radius: 50%;
    height: 2.2rem;
    top: 5.7rem;
    width: 2.2rem;
}

.bus .wheel::before {
    background-color: #aaa;
    border-radius: 50%;
    content: '';
    display: block;
    height: 1.4rem;
    margin: .4rem;
    width: 1.4rem;
}

.bus .first.wheel {
    left: 5.8rem;
}

.bus .second.wheel {
    left: 9rem;
}

.bus .third.wheel {
    left: 25rem;
}




/**
 * -----------------------------------------------------------------------------
 * ICE 3M / BAUREIHE 406 / ICE INTERNATIONAL / BEST-LOOKING TRAIN EVER
 * -----------------------------------------------------------------------------
 */

.ice3 {
    height: 100%;
    width: 100%;
    left: 2rem;
    position: absolute;
    top: 2.1rem;
}

.ice3 * {
    display: block;
    position: absolute;
}

.ice3 .side {
    background-color: #fafafa;
    height: 3.4rem;
    left: 4rem;
    top: 4rem;
    width: 10rem;
}

.ice3 .forehead {
    background-color: #fafafa;
    border-radius: 50% 50% 0 0;
    box-shadow: 0 0.4rem 0 0 #fafafa,
                0 0.8rem 0 0 #fafafa,
                0 1.2rem 0 0 #fafafa,
                0 1.6rem 0 0 #fafafa;
    height: .8rem;
    left: 6.5rem;
    position: absolute;
    top: 1.5rem;
    transform: rotate(-10deg);
    width: 6.3rem;
}

.ice3 .forehead::after {
    background-color: #fafafa;
    border-radius: 50% 50% 0 0;
    box-shadow: 0 0.15rem 0 0 #fafafa,
                0 0.30rem 0 0 #fafafa,
                0 0.45rem 0 0 #fafafa,
                0 0.60rem 0 0 #fafafa,
                0 0.75rem 0 0 #fafafa,
                0 0.90rem 0 0 #fafafa,
                0 1.05rem 0 0 #fafafa,
                0 1.20rem 0 0 #fafafa,
                0 1.35rem 0 0 #fafafa,
                0 1.50rem 0 0 #fafafa;
    content: '';
    display: block;
    height: .3rem;
    left: 4.9rem;
    position: absolute;
    top: .3rem;
    transform: rotate(10deg);
    width: 4rem;
}

.ice3 .nose .window {
    background-color: #333;
    border-radius: 50% 20% 60% 50%;
    height: .3rem;
    left: 2.8rem;
    top: -3rem;
    transform: rotate(-27deg);
    width: 4rem;
    z-index: 5;
}

.ice3 .nose {
    background-color: #fafafa;
    border-radius: 50%;
    box-shadow: 1.5rem 0 0 0 #fafafa;
    height: 1.5rem;
    left: .4rem;
    top: 6.1rem;
    width: 3rem;
}

.ice3 .nose::before {
    background-color: #fafafa;
    border-radius: 50% 50% 0 0;
    content: '';
    display: block;
    height: 1rem;
    left: -.6rem;
    position: absolute;
    top: -2.1rem;
    transform: rotate(-33deg);
    width: 8rem;
}

.ice3 .nose::after {
    background-color: #fafafa;
    border-radius: 50%;
    content: '';
    display: block;
    height: .3rem;
    left: .6rem;
    position: absolute;
    top: 1.4rem;
    transform: rotate(15deg);
    width: 2rem;
}

.ice3 .chin {
    border-bottom: .8rem solid #fafafa;
    border-left: .2rem solid transparent;
    box-shadow: 0.0rem -0.7rem 0 0 #fafafa,
                0.0rem -1.4rem 0 0 #fafafa,
                0.0rem -2.1rem 0 0 #fafafa,
                1.0rem -2.8rem 0 0 #fafafa,
                2.0rem -3.5rem 0 0 #fafafa,
                3.0rem -4.2rem 0 0 #fafafa,
                4.4rem -4.9rem 0 0 #fafafa;
    left: 2rem;
    top: 7.4rem;
    width: 2.2rem;
}

.ice3 .head .windows {
    background-color: #495159;
    clip-path: polygon(
         0.0rem 1.2rem,
         2.4rem 0.4rem,
         3.2rem 0.2rem,
         4.2rem 0.05rem,
         4.8rem 0.0rem,
        10.3rem 0.0rem,
        10.3rem 1.6rem,
         4.8rem 1.6rem, 
         2.4rem 1.8rem,
         0.4rem 2.0rem
    );
    height: 2rem;
    left: 3.9rem;
    top: 3.3rem;
    width: 10.3rem;
}

.ice3 .head .windows .window {
    background-color: #333;
}

.ice3 .head .windows .window:nth-child(1) {
    clip-path: polygon(
        .1rem 1.2rem,
        .7rem .95rem,
        1.5rem .7rem,
        1.9rem 1.65rem,
        .5rem 1.8rem
    );
    height: 1.8rem;
    left: 0rem;
    top: .1rem;
    width: 1.9rem;
}

.ice3 .head .windows .window:nth-child(2) {
    clip-path: polygon(
        .1rem .65rem,
        1rem .35rem,
        1.9rem .15rem,
        1.9rem 1.5rem,
        .5rem 1.65rem
    );
    height: 1.8rem;
    left: 1.6rem;
    top: .1rem;
    width: 1.9rem;
}

.ice3 .head .windows .window:nth-child(3) {
    height: 1.4rem;
    left: 4.4rem;
    top: .1rem;
    width: 2.6rem;
}

.ice3 .head .windows .window:nth-child(4) {
    height: 1.4rem;
    left: 8.3rem;
    top: .1rem;
    width: 1.9rem;
}

.ice3 .head .red-stripe {
    background-color: #d0250e;
    clip-path: polygon(
        0.0rem 1.7rem,
        2rem 1.1rem,
        2.4rem 1rem,
        3.3rem .8rem,
        4.5rem .6rem,
        5.4rem .5rem,
        7.0rem .4rem,
        6.9rem .85rem,
        6rem .9rem,
        4.5rem 1rem,
        3.2rem 1.2rem,
        1.8rem 1.5rem,
        0.0rem 1.9rem
    );
    display: block;
    height: 2rem;
    left: .4rem;
    top: 5rem;
    width: 7rem;
}

.ice3 .ice {
    color: #777;
    font-size: 1.5rem;
    font-style: italic;
    left: 7.5rem;
    top: 4.9rem;
}

.ice3 .main {
    background: #fafafa;
    height: 6.2rem;
    left: 13rem;
    top: 1.2rem;
    width: 40rem;
}

.ice3 .main::after {
    border-top: .8rem solid #56655f;
    border-left: .2rem solid transparent;
    border-right: .2rem solid transparent;
    bottom: -.8rem;
    content: '';
    display: block;
    height: 0;
    left: .6rem;
    position: absolute;
    width: 24.3rem;
}

.ice3 .main .red-stripe {
    background: #d0250e;
    height: .5rem;
    left: -2.6rem;
    top: 4.1rem;
    width: 40rem;
}

.ice3 .ns-logo-background {
    background-color: #fafafa;
    height: 1rem;
    left: 8rem;
    top: 3.8rem;
    width: 2.4rem;
}

.ice3 .ns-logo {
    left: 8.25rem;
    top: 4rem;
    transform: scale(.75);
}

.ice3 .door {
    border: .1rem solid #aaa;
    border-radius: .2rem;
    left: 2rem;
    height: 4.7rem;
    top: .8rem;
    width: 2rem;
}

.ice3 .door .window {
    background-color: #333;
    border-radius: .6rem;
    height: 2.1rem;
    left: .4rem;
    top: .7rem;
    width: 1.2rem;
}

.ice3 .main .windows {
    background-color: #495159;
    height: 1.6rem;
    left: 5.7rem;
    top: 2.1rem;
    width: 30rem;
}

.ice3 .main .windows .window {
    background-color: #333;
    display: inline-block;
    height: 1.4rem;
    left: .1rem;
    margin-right: .75rem;
    position: relative;
    top: .1rem;
    width: 2.9rem;
}

.ice3 .front.wheels {
    left: 7rem;
    top: 7.2rem;
    transform: scale(1.1);
}

.ice3 .back.wheels {
    left: 40rem;
    top: 7.2rem;
    transform: scale(1.1);
}





/**
 * -----------------------------------------------------------------------------
 * VERLENGD INTERREGIOMATERIEEL
 * -----------------------------------------------------------------------------
 */

.virm {
    left: 2rem;
    position: absolute;
    top: 2.1rem;
}

.virm * {
    display: block;
    position: absolute;
}

.virm .nose {
    top: 1.8rem;
}

.virm .nose::before {
    background: var(--colour-grey);
    clip-path: polygon(
        7.6rem 0,
        7.6rem 5.3rem,
        2.7rem 5.3rem,
        .2rem 4.5rem,
        .25em 3.5rem,
        1.4rem 1.3rem,
        1.9rem .7rem,
        2.1rem .5rem,
        2.5rem .2rem,
        2.7rem .1rem,
        3.2rem 0
    );
    content: '';
    display: block;
    height: 6.5rem;
    position: absolute;
    top: -.8rem;
    transform: scaleY(1.1);
    width: 7.6rem;
}

.virm.flow .nose::before {
    background: var(--colour-oldblue);
}

.virm .nose::after {
    background: var(--colour-oldyellow);
    clip-path: polygon(
        7.6rem 0,
        7.6rem 5.3rem,
        2.7rem 5.3rem,
        2.7rem 5.5rem,
        2.2rem 6rem,
        .2rem 7rem,
        .6rem 5.5rem,
        .6rem 5.3rem,
        .2rem 4.3rem,
        .2rem 3.6rem,
        1.6rem 1.3rem,
        2.1rem .7rem,
        2.3rem .5rem,
        2.7rem .2rem,
        2.9rem .1rem,
        3.4rem 0
    );
    content: '';
    display: block;
    height: 6.5rem;
    top: 1.8rem;
    width: 7.6rem;
}

.virm.modern .nose::after,
.virm.flow .nose::after {
    background-color: var(--colour-yellow);
}

.virm.flow .nose .job {
    background-color: var(--colour-yellow);
    clip-path: polygon(
        .2rem .5rem,
        2rem 0,
        2rem 1.5rem,
        .2rem 1.4rem
    );
    height: 1.5rem;
    top: 2.5rem;
    width: 2rem;
}

.virm .door {
    border: .05rem solid #333;
    border-bottom: .4rem solid #333;
    z-index: 5;
}

.virm .driver.door {
    border-top-left-radius: .2rem;
    border-top-right-radius: .2rem;
    height: 3.7rem;
    left: 2.6rem;
    top: 3rem;
    width: 1rem;
}

.virm .driver.door::after {
    background-color: #333;
    content: '';
    display: block;
    height: .3rem;
    position: absolute;
    top: 4rem;
    width: 5.4rem;
}

.virm .driver.door .window {
    margin: .3rem .2rem;
    width: .4rem;
}

.virm .doors {
    left: 4.8rem;
    top: 2.7rem;
}

.virm .doors::before {
    background-color: var(--colour-oldblue);
    border-bottom-left-radius: .2rem;
    border-top-left-radius: .2rem;
    content: '';
    display: block;
    height: 1.95rem;
    left: -.6rem;
    position: absolute;
    top: .6rem;
    width: 4.3rem;
    z-index: 8;
}

.virm.modern .front .doors::before,
.virm.flow .front .doors::before {
    background-color: var(--colour-blue);
    border-radius: .2rem;
    height: 1.9rem;
    left: 1.9rem;
    top: 1.4rem;
    transform: rotate(25deg);
    width: 4.5rem;
}

.virm.flow .front .doors::before {
    background-color: transparent;
}

.virm .doors .door {
    height: 4rem;
    width: 1.1rem;
    z-index: 9;
}

.virm.modern .doors .door,
.virm.flow .doors .door {
    background-color: var(--colour-yellow);
}

.virm.flow .back .doors .door {
    background-color: var(--colour-oldblue);
}

.virm .doors .door:nth-child(2n+1) {
    border-top-left-radius: .2rem;
}

.virm.modern .doors .door:nth-child(2n+1) {
    box-shadow: -.3rem -.05rem var(--colour-blue),
                -.3rem -.30rem var(--colour-blue),
                0      -.30rem var(--colour-blue);
}

.virm.flow .front .doors .door:nth-child(2n+1) {
    box-shadow: -.3rem -.05rem var(--colour-oldblue),
                -.3rem -.30rem var(--colour-oldblue),
                0      -.30rem var(--colour-oldblue);
}

.virm .doors .door:nth-child(2n+2) {
    border-top-right-radius: .2rem;
    left: 1.1rem;
}

.virm.modern .doors .door:nth-child(2n+2) {
    box-shadow: .3rem -.05rem var(--colour-blue),
                .3rem -.30rem var(--colour-blue),
                0     -.30rem var(--colour-blue);
}

.virm.flow .front .doors .door:nth-child(2n+2) {
    box-shadow: .3rem -.05rem var(--colour-oldblue),
                .3rem -.30rem var(--colour-oldblue),
                0     -.30rem var(--colour-oldblue);
}

.virm .doors .door .window {
    height: 1.5rem;
    margin: .6rem .2rem;
    width: .6rem;
}

.virm.flow .flow {
    background-color: var(--colour-oldblue);
    clip-path: polygon(
        3rem 1rem,
        6rem 1rem,
        15rem .5rem,
        15rem 1rem,
        14rem 1.1rem,
        13rem 1.3rem,
        12rem 1.5rem,
        11rem 2rem,
        10rem 2.5rem,
        9rem 3.2rem,
        8rem 3.6rem,
        7.5rem 3.7rem,
        3rem 3.9rem,
        .7rem 4rem
    );
    height: 4rem;
    width: 15rem;
    z-index: 2;
}

.virm.flow .flow2 {
    background-color: var(--colour-oldblue);
    clip-path: polygon(
        0 .9rem,
        1rem .8rem,
        2rem .5rem,
        3rem .1rem,
        3.5rem 0,
        17.1rem 0,
        15.8rem 1rem,
        0 1rem
    );
    height: 1rem;
    left: 12.5rem;
    top: 6.1rem;
    width: 17.1rem;
    z-index: 2;
}

.virm .decks {
    height: 6.9rem;
    left: 7.5rem;
    top: 1rem;
    width: 30.5rem;
}

.virm .decks::before {
    background-color: var(--colour-grey);
    clip-path: polygon(
        2.1rem 0,
        32.8rem 0,
        32.8rem 3rem,
        0 3rem,
        0 1.8rem
    );
    content: '';
    display: block;
    height: 1.8rem;
    left: -2.2rem;
    position: absolute;
    top: -1rem;
    width: 32.8rem;
}

.virm.flow .decks::before {
    background-color: var(--colour-oldblue);
}

.virm .decks::after {
    background-color: var(--colour-oldyellow);
    clip-path: polygon(
        1rem 0,
        30.5rem 0,
        30.5rem 6.1rem,
        29.5rem 6.1rem,
        28.6rem 6.9rem,
        1.6rem 6.9rem,
        .6rem 6.1rem,
        0 6.1rem,
        0 .8rem
    );
    content: '';
    display: block;
    height: 6.9rem;
    position: absolute;
    width: 30.5rem;
    z-index: 1;
}

.virm.modern .decks::after,
.virm.flow .decks::after {
    background-color: var(--colour-yellow);
}

.virm .upper-deck {
    background-color: var(--colour-oldblue);
    box-shadow: inset 2.4rem 0 var(--colour-oldyellow);
    display: flex;
    height: 1.4rem;
    left: .5rem;
    top: .4rem;
    width: 30rem;
    z-index: 5;
}

.virm.modern .upper-deck,
.virm.flow .upper-deck {
    background-color: var(--colour-blue);
    border-radius: .2rem;
    box-shadow: inset 3.4rem 0 var(--colour-yellow);
    width: 25.2rem;
}

.virm.flow .upper-deck {
    background-color: transparent;
    box-shadow: inset 3.4rem 0 transparent;
}

.virm.modern .upper-deck::after {
    background-color: var(--colour-blue);
    border-radius: .2rem;
    content: '';
    display: block;
    height: 1.4rem;
    left: 3.2rem;
    position: absolute;
    width: .5rem;
}

.virm .upper-deck::before {
    background-color: var(--colour-oldblue);
    content: '';
    display: block;
    height: 1.8rem;
    position: relative;
    left: 2.4rem;
    transform: translateY(1rem) translateX(-2.9rem) rotate(-39deg);
    width: 3.85rem;
    z-index: 5;
}

.virm.modern .upper-deck::before,
.virm.flow .upper-deck::before {
    background-color: transparent;
}

.virm .ns-logo {
    left: 9.9rem;
    top: 2.5rem;
    z-index: 20;
}

.virm.modern .ns-logo {
    background-color: var(--colour-blue);
}

.virm.flow .ns-logo {
    background-color: var(--colour-white);
    left: 5.8rem;
    top: 2.6rem;
    transform: scale(5.5);
    z-index: 3;
}

.virm .lower-deck {
    background-color: var(--colour-oldblue);
    border-radius: .3rem;
    display: flex;
    height: 1.8rem;
    left: 3.2rem;
    padding-left: 4rem;
    top: 4rem;
    width: calc(23rem - 4rem);
    z-index: 5;
}

.virm.modern .lower-deck,
.virm.flow .lower-deck {
    background-color: var(--colour-blue);
    height: 2rem;
    left: 2.9rem;
    padding-left: 4.3rem;
    top: 3.8rem;
    width: calc(24.5rem - 4rem);
}

.virm.flow .lower-deck {
    background-color: transparent;
}

.virm .lower-deck::after {
    background-color: var(--colour-grey);
    clip-path: polygon(
        0 0,
        27rem 0,
        26rem .8rem,
        1rem .8rem
    );
    content: '';
    display: block;
    height: .8rem;
    left: -1.6rem;
    position: absolute;
    top: 2.9rem;
    width: 27rem;
}

.virm.modern .lower-deck::after,
.virm.flow .lower-deck::after {
    left: -1.3rem;
    top: 3.1rem;
}

.virm .window,
.virm .vent {
    background: repeating-linear-gradient(
        45deg,
        #8ba1b7,
        #95a7bc 1rem
    );
    border: .05rem solid #222;
    border-radius: .2rem;
    margin: 0 .35rem;
    position: static;
    height: 1.2rem;
    width: 2.5rem;
}

.virm .vent {
    background: repeating-linear-gradient(
        #333,
        var(--colour-oldblue) .1rem
    );
    height: 1rem;
    left: 1.8rem;
    position: absolute;
    top: .15rem;
    width: 1.3rem;
    z-index: 10;
}

.virm.modern .vent,
.virm.flow .vent {
    left: 1.3rem;
    background: repeating-linear-gradient(
        #530,
        var(--colour-yellow) .1rem
    );
}

.virm.flow .vent {
    background: repeating-linear-gradient(
        #333,
        #222 .1rem
    );
}

.virm .small.window {
    margin-left: .4rem;
    width: .9rem;
}

.virm .upper-deck .small.window {
    margin-left: -.05rem;
}

.virm .lower-deck .window {
    height: 1.3rem;
    margin-top: .2rem;
}

.virm .back {
    background-color: var(--colour-oldyellow);
    box-shadow: 0 -1.4rem var(--colour-oldblue),
                0 -2.2rem var(--colour-grey),
                -.8rem .3rem #333;
    height: 4.3rem;
    left: 37.9rem;
    top: 2.8rem;
    width: 7rem;
}

.virm.modern .back {
    background-color: var(--colour-yellow);
    box-shadow: 0 -1rem var(--colour-yellow),
                0 -2.2rem var(--colour-grey),
                -.8rem .3rem #333;
}

.virm.flow .back {
    background-color: var(--colour-yellow);
    box-shadow: 0 -1rem var(--colour-yellow),
                0 -2.2rem var(--colour-oldblue),
                -.8rem .3rem #333;
}

.virm .back .doors {
    left: 0rem;
    top: 0rem;
}

.virm .back .doors::before {
    left: -1.3rem;
    width: 8rem;
}

.virm.modern .back .doors::before {
    background-color: var(--colour-blue);
    left: 0;
}

.virm.flow .back .doors::before {
    background-color: transparent;
}

.virm.modern .back .doors::after {
    background-color: var(--colour-blue);
    border-radius: .2rem;
    content: '';
    display: block;
    height: 1.9rem;
    left: -3.5rem;
    position: absolute;
    top: 1.2rem;
    transform: rotate(-25deg);
    width: 4.7rem;
    z-index: 6;
}

.virm.flow .back .doors::after {
    background-color: transparent;
}

.virm .back > .window {
    height: 1.5rem;
    left: 3.8rem;
    position: absolute;
    top: .8rem;
    z-index: 8;
}

.virm .wheels {
    transform: scale(1.1);
    top: 7.3rem;
}

.virm .wheels:nth-child(2n+1) {
    left: 4rem;
}

.virm .wheels:nth-child(2n+2) {
    left: 39rem;
}




/**
 * -----------------------------------------------------------------------------
 * DDM
 * -----------------------------------------------------------------------------
 */

.ddm {
    left: 2rem;
    position: absolute;
    top: 2.3rem;
}

.ddm * {
    display: block;
    position: absolute;
}

.ddm .car {
    background-color: var(--colour-grey);
    clip-path: polygon(
        6rem 0,
        41.5rem 0,
        43rem 1rem,
        45rem 1rem,
        45rem 6.9rem,
        40.5rem 6.9rem,
        39rem 8.2rem,
        10.6rem 8.2rem,
        9.5rem 7rem,
        2.4rem 7rem,
        2.2rem 7.2rem,
        .2rem 7.2rem,
        .2rem 6.6rem,
        .2rem 4.3rem,
        .4rem 4rem,
        .5rem 4rem,
        1rem 2rem,
        3rem 1rem
    );
    height: 8.2rem;
    width: 45rem;
}

.ddm.ddz .car {
    background-color: var(--colour-blue);
}

.ddm.ddz .car::after {
    background-color: #444;
    content: '';
    display: block;
    height: 20rem;
    left: 9rem;
    position: absolute;
    top: 7.5rem;
    width: 32rem;
}

.ddm .car::before {
    background-color: var(--colour-oldyellow);
    clip-path: polygon(
        0 2rem,
        8.5rem 2rem,
        10.8rem 1rem,
        39.3rem 1rem,
        41.3rem 2rem,
        45rem 2rem,
        45rem 8rem,
        0 8rem
    );
    content: '';
    display: block;
    height: 7.5rem;
    position: absolute;
    width: 45rem;
}

.ddm.ddz .car::before {
    background-color: var(--colour-yellow);
    clip-path: polygon(
        0 1rem,
        10.8rem 1rem,
        45rem 1rem,
        45rem 2rem,
        45rem 8rem,
        0 8rem
    );
}

.ddm .driver-windows {
    background-color: #333;
    clip-path: polygon(
        0 0,
        2.8rem .5rem,
        2.8rem 1.8rem,
        0 2rem
    );
    height: 2rem;
    top: 2rem;
    width: 2.8rem;
}

.ddm.ddz .driver-windows {
    display: none;
}

.ddm .front.driver-window {
    background-color: #555;
    border-radius: .2rem;
    height: 1.5rem;
    left: .1rem;
    top: .25rem;
    transform: rotate(15deg);
    width: 1rem;
}

.ddm .side.driver-window {
    background-color: #555;
    clip-path: polygon(
        .5rem .5rem,
        1.6rem .7rem,
        1.6rem 1.6rem,
        .1rem 1.8rem
    );
    height: 2rem;
    left: 1rem;
    width: 2rem;
}

.ddm .ns-logo {
    background-color: black;
    left: 12.9rem;
    top: 3.2rem;
}

.ddm.ddz .ns-logo {
    background-color: var(--colour-blue);
    left: 15.9rem;
    top: 3.1rem;
}

.ddm.ddz .blind {
    background-color: #444;
    border: .1rem solid #333;
    border-radius: .2rem;
    height: .4rem;
    left: 36.6rem;
    top: 2.9rem;
    width: 1.5rem;
}

.ddm .upper.deck {
    display: flex;
    left: 10rem;
    top: 1.5rem;
}

.ddm.ddz .upper.deck {
    background-color: var(--colour-blue);
    border-radius: .2rem;
    padding: .1rem 0;
    top: 1.4rem;
}

.ddm .lower.deck {
    display: flex;
    left: 10rem;
    top: 4.6rem;
}

.ddm.ddz .lower.deck {
    background-color: var(--colour-blue);
    padding: .3rem 0 .1rem;
    top: 4.3rem;
}

.ddm .window {
    background: repeating-linear-gradient(
        45deg,
        #8ba1b7,
        #95a7bc 1rem
    );
    border: .05rem solid #333;
    border-radius: .2rem;
    box-shadow: 0 -.8rem 0 -.5rem var(--colour-grey),
                0 -.7rem 0 -.5rem var(--colour-grey);
    height: 1rem;
    margin: 0 .3rem;
    position: static;
    width: 2.3rem;
}

.ddm.ddz .window {
    box-shadow: none;
}

.ddm .deck .window:first-child,
.ddm .deck .window:last-child {
    box-shadow: none;
    width: 1.6rem;
}

.ddm .lower.deck .window {
    box-shadow: none;
    height: 1.7rem;
}

.ddm .lower.deck .window:nth-child(4),
.ddm .lower.deck .window:nth-child(5) {
    visibility: hidden;
}

.ddm .vent {
    background: repeating-linear-gradient(
        90deg,
        #333,
        transparent .1rem
    );
    height: 1.3rem;
    left: 22.7rem;
    top: 5rem;
    width: 1.6rem;
    z-index: 10;
}

.ddm .stripes {
    position: absolute;
    left: 29rem;
    top: 2.8rem;
    width: 30rem;
}

.ddm .stripe {
    background: var(--colour-lightblue);
    display: block;
    float: left;
    height: 4.5rem;
    margin-right: .7rem;
    position: static;
    transform: skew(-25deg);
    width: 2.5rem;
}

.ddm .driver.door {
    background-color: transparent;
    border-top-left-radius: .2rem;
    border-top-right-radius: .2rem;
    left: 3.2rem;
    position: absolute;
    top: 2.5rem;
    width: 1rem;
}

.ddm .doors {
    display: flex;
    top: 2.5rem;
    z-index: 2;
}

.ddm.ddz .doors::before {
    background-color: var(--colour-blue);
    border-radius: .2rem;
    content: '';
    display: block;
    height: 2.2rem;
    left: -.8rem;
    position: absolute;
    top: .3rem;
    width: 3.5rem;
    z-index: -1;
}

.ddm.ddz .front.doors::after {
    background-color: var(--colour-blue);
    content: '';
    display: block;
    height: 2.2rem;
    left: 2.6rem;
    position: absolute;
    top: 1.1rem;
    transform: skewY(42deg);
    width: 1.6rem;
}

.ddm.ddz .back.doors::before {
    left: -1rem;
}

.ddm.ddz .back.doors::after {
    background-color: var(--colour-blue);
    content: '';
    display: block;
    height: 2.2rem;
    left: -3rem;
    position: absolute;
    top: 1.1rem;
    transform: skewY(-36deg);
    width: 2.1rem;
}

.ddm .front.doors {
    left: 5.8rem;
    width: 2.6rem;
}

.ddm .back.doors {
    left: 41.5rem;
    width: 4rem;
}

.ddm .door {
    background-color: var(--colour-grey);
    border: .05rem solid #333;
    height: 4.4rem;
    position: static;
    width: 50%;
}

.ddm.ddz .door {
    background-color: transparent;
}

.ddm .doors .door:nth-child(2n+1) {
    border-top-left-radius: .2rem;
    margin-right: -.025rem;
}

.ddm.ddz .doors .door:nth-child(2n+1)::after {
    background-color: white;
    content: '';
    display: block;
    height: .5rem;
    left: 1.03rem;
    position: absolute;
    top: 1.9rem;
    transform: rotate(45deg);
    width: .5rem;
    z-index: -1;
}

.ddm.ddz .back.doors .door:nth-child(2n+1)::after {
    left: 1.4rem;
}

.ddm .doors .door:nth-child(2n+2) {
    border-top-right-radius: .2rem;
    margin-left: -.025rem;
}

.ddm .door .window {
    height: 1.5rem;
    margin: .4rem 18%;
    width: 50%;
}

.ddm .wheels {
    top: 7rem;
    transform: scale(1.2);
}

.ddm .wheels:nth-child(2n+1) {
    left: 4.5rem;
}

.ddm .wheels:nth-child(2n+2) {
    left: 42rem;
}




/**
 * -----------------------------------------------------------------------------
 * 1700
 * -----------------------------------------------------------------------------
 */

.loc1700 {
    left: 2rem;
    position: absolute;
    top: 4rem;
    transform: scale(1.05);
}

.loc1700 * {
    display: block;
    position: absolute;
}

.loc1700 .roof {
    border-bottom: .5rem solid #555;
    border-left: .3rem solid transparent;
    height: 0;
    left: -.5rem;
    top: -.5rem;
    width: 14.5rem;
}

.loc1700 .roof::before {
    content: '';
    display: block;
    border-bottom: 1rem solid #aaa;
    border-left: .3rem solid transparent;
    height: 0;
    left: 10rem;
    position: absolute;
    top: -1rem;
    width: 8rem;
}

.loc1700 .roof::after {
    background-color: var(--colour-yellow);
    content: '';
    display: block;
    height: .2rem;
    left: -.3rem;
    position: relative;
    top: .5rem;
    width: 9.3rem;
}

.loc1700 .pantograph:nth-child(2n+1) {
    left: 6rem;
}

.loc1700 .pantograph .collector {
    background-color: var(--colour-grey);
    height: .4rem;
    width: .8rem;
}

.loc1700 .pantograph .arm,
.loc1700 .pantograph:nth-child(2n+1) .arm::after {
    background-color: var(--colour-grey);
    height: .2rem;
    width: 2.4rem;
}

.loc1700 .pantograph .control {
    background-color: var(--colour-grey);
    height: .5rem;
    top: -.5rem;
    width: 1.5rem;
}

.loc1700 .pantograph:nth-child(2n+1) .collector {
    left: .6rem;
    top: -2.4rem;
}

.loc1700 .pantograph:nth-child(2n+2) .collector {
    left: 25.2rem;
    top: -.9rem;
}

.loc1700 .pantograph:nth-child(2n+1) .arm {
    left: .8rem;
    top: -1.7rem;
    transform: rotate(25deg);
}

.loc1700 .pantograph:nth-child(2n+1) .arm::after {
    content: '';
    display: block;
    position: absolute;
    transform: rotate(-45deg) translateY(.8rem) translateX(-.3rem);
}

.loc1700 .pantograph:nth-child(2n+2) .arm {
    box-shadow: 0 -.2rem var(--colour-grey);
    left: 23.2rem;
    top: -.4rem;
}

.loc1700 .pantograph:nth-child(2n+2) .control {
    left: 25.2rem;
}

.loc1700 .front {
    background-color: var(--colour-yellow);
    border-bottom: .6rem solid #555;
    height: 3.5rem;
    left: 2.1rem;
    top: .5rem;
    width: 14.3rem;
    z-index: 5;
}

.loc1700 .front::before {
    background-color: #555;
    clip-path: polygon(
        0 0,
        0 1.2rem,
        1rem 1.2rem,
        4rem .6rem,
        4rem 0
    );
    content: '';
    display: block;
    height: 1.2rem;
    left: -.7em;
    position: absolute;
    top: 3.5rem;
    width: 4rem;
    z-index: 3;
}

.loc1700 .front::after {
    background-color: #333;
    content: '';
    display: block;
    height: 1.2rem;
    position: absolute;
    top: 4.1rem;
    width: 14.4rem;
    z-index: 0;
}

.loc1700 .front-window {
    border-top: 1.2rem solid #444;
    border-left: .5rem solid transparent;
    height: 0;
    left: -.5rem;
    top: .2rem;
    width: 1.8rem;
}

.loc1700 .coupler {
    background-color: #444;
    height: .5rem;
    left: -1.8rem;
    top: 4.1rem;
    width: 1.2rem;
    z-index: 0;
}

.loc1700 .coupler::before {
    background-color: #444;
    content: '';
    display: block;
    left: -.2rem;
    position: absolute;
    top: -.1rem;
    width: .2rem;
    height: .8rem;
}

.loc1700 .nose {
    background-color: var(--colour-yellow);
    clip-path: polygon(
        1.6rem 0,
        1.6rem 2rem,
        .5rem 2rem,
        .2rem .5rem
    );
    height: 2rem;
    left: -1.5rem;
    top: 1.5rem;
    width: 2rem;
}

.loc1700 .door {
    border: .05rem solid var(--colour-grey);
    border-top-left-radius: .2rem;
    border-top-right-radius: .2rem;
    height: 3.3rem;
    left: 2rem;
    top: .2rem;
    width: 1.1rem;
}

.loc1700 .door .window {
    background-color: gray;
    border: .05rem solid var(--colour-grey);
    border-radius: .2rem;
    height: 1.2rem;
    left: .15rem;
    top: .15rem;
    width: .7rem;
}

.loc1700 .ns-logo {
    background-color: black;
    left: 3.7rem;
    top: .5rem;
    transform: scale(1.5);
}

.loc1700 .number {
    font-family: Helvetica, Arial, sans-serif;
    font-size: 1.3rem;
    font-weight: bold;
    left: 6.1rem;
    top: 2.2rem;
}

.loc1700 .vents {
    background: repeating-linear-gradient(
        90deg,
        #333,
        #444 .2rem
    );
    height: 1.9rem;
    left: 6.2rem;
    top: .3rem;
    width: 8.3rem;
}

.loc1700 .wheels {
    left: 3rem;
    top: 4.5rem;
    z-index: 4;
}

.loc1700 .box {
    background-color: #333;
    left: 12.5rem;
    height: 1.5rem;
    top: 4.3rem;
    width: 1.8rem;
}

.loc1700 .mirrored {
    left: 16.3rem;
    transform: scaleX(-1);
}

.loc1700 .mirrored .ns-logo {
    transform: scaleX(-1) scale(1.5);
}




/**
 * -----------------------------------------------------------------------------
 * INTERCITYMATERIEEL
 * -----------------------------------------------------------------------------
 */

.icm {
    left: 3rem;
    position: absolute;
    top: 1.8rem;
}

.icm .car {
    background-color: var(--colour-oldyellow);
    border-bottom: .4rem solid var(--colour-grey);
    display: block;
    height: 5rem;
    position: absolute;
    top: 2.5rem;
    width: 50rem;
    z-index: 2;
}

.icm.klm .car {
    background-color: #1388dc;
    box-shadow:       .2rem -.1rem #1388dc,
                inset 0 -.5rem var(--colour-grey),
                inset 0 -1rem white,
                inset 0 -1.7rem #225580;
}

.icm.modern .car {
    background-color: var(--colour-yellow);
}

.icm .car::before {
    background-color: var(--colour-oldyellow);
    border-top-left-radius: 50%;
    border-bottom-left-radius: 50%;
    content: '';
    display: block;
    height: 4.5rem;
    left: -.1rem;
    position: relative;
    width: .2rem;
}

.icm.klm .car::before {
    background-color: #1388dc;
    box-shadow: inset 0 -.5rem white,
                inset 0 -1.2rem #225580;
    z-index: -1;
}

.icm.modern .car::before {
    background-color: var(--colour-yellow);
}

.icm .car::after {
    bottom: -1.5rem;
    content: '';
    border-left: .05rem solid transparent;
    border-right: .05rem solid transparent;
    border-top: 2rem solid var(--colour-grey);
    display: block;
    height: 0;
    left: 27rem;
    position: absolute;
    transform: scaleY(.4) scaleX(14);
    width: 2rem;
}

.icm .roof {
    background-color: var(--colour-grey);
    clip-path: polygon(
        3.8rem 0,
        8rem 0,
        17.5rem 1.2rem,
        45rem 1.2rem,
        45rem 2.2rem,
        0 2.2rem,
        2rem 1.5rem,
        2rem 1.2rem,
        2.8rem 1.2rem,
        3rem 1.2rem
    );
    display: block;
    height: 2.3rem;
    position: absolute;
    top: -2.2rem;
    width: 45rem;
}

.icm.klm .roof {
    background-color: #2398ec;
}

.icm .roof::after {
    background-color: #333;
    clip-path: polygon(
        3.9rem .2rem,
        6.5rem .2rem,
        6.2rem .9rem,
        3.3rem 1.1rem
    );
    content: '';
    display: block;
    height: 3rem;
    position: absolute;
    width: 7rem;
}

.icm .vent {
    background-color: var(--colour-grey);
    border-radius: .2rem;
    display: block;
    height: .6rem;
    left: .2rem;
    position: absolute;
    top: .8rem;
    width: .6rem;
}

.icm .headlight {
    background-color: var(--colour-grey);
    border-radius: .2rem;
    display: block;
    height: 1rem;
    left: .2rem;
    position: absolute;
    top: 3.6rem;
    width: .5rem;
}

.icm .blue-strip {
    background-color: var(--colour-oldblue);
    border-top-left-radius: .5rem;
    border-bottom-left-radius: .5rem;
    display: block;
    height: 2.9rem;
    left: 4rem;
    position: absolute;
    top: .6rem;
    width: 42rem;
}

.icm.klm .blue-strip {
    background-color: transparent;
}

.icm.modern .blue-strip {
    background-color: var(--colour-blue);
}

.icm.modern .blue-strip::before {
    background-color: var(--colour-blue);
    border-radius: 50% 50% 50% 50% / 50% 0% 0% 50%;
    content: '';
    display: block;
    height: 2.9rem;
    right: 2.9rem;
    position: relative;
    width: 3.4rem;
}

.icm .blind {
    background-color: white;
    border: .05rem solid #333;
    border-radius: .1rem;
    display: block;
    height: .5rem;
    left: .5rem;
    position: absolute;
    top: .2rem;
    width: 1rem;
}

.icm.modern .blind {
    background-color: #222;
    height: .6rem;
    left: 0;
    width: 2rem;
}

.icm .doors {
    box-shadow: 0 .5rem var(--colour-grey);
    display: flex;
    left: 6.1rem;
    position: absolute;
    top: 0;
}

.icm .door {
    border: .05rem solid #333;
    display: block;
    height: 4rem;
    width: 1.4rem;
}

.icm .door:nth-child(2n+1) {
    border-top-left-radius: .2rem;
    margin-right: -.05rem;
}

.icm .door:nth-child(2n+2) {
    border-top-right-radius: .2rem;
    margin-left: -.05rem;
}

.icm .door .window {
    margin: .4rem .3rem;
    width: .6rem;
}

.icm .windows {
    display: flex;
    position: absolute;
    left: 10.3rem;
    top: .5rem;
}

.icm .window {
    background: repeating-linear-gradient(
        45deg,
        #8ba1b7,
        #95a7bc 1rem
    );
    border: .05rem solid #333;
    border-radius: .2rem;
    display: block;
    height: 1.75rem;
}

.icm .small.window {
    left: 4.1rem;
    position: absolute;
    top: .5rem;
    width: 1rem;
}

.icm .normal.window {
    margin: 0 .45rem;
    width: 3.2rem;
}

.icm .chin {
    border-top: 1rem solid var(--colour-grey);
    border-right: 3rem solid transparent;
    height: 0;
    position: absolute;
    top: 7.6rem;
    width: 0;
}

.icm .chin::after {
    border-bottom: .5rem solid var(--colour-grey);
    border-right: 3rem solid transparent;
    content: '';
    display: block;
    height: 0;
    position: absolute;
    width: 0;
    top: -1.5rem;
    z-index: 10;
}

.icm .ns-logo {
    background-color: black;
    left: 15.5rem;
    position: absolute;
    top: 3.8rem;
}

.icm.klm .ns-logo {
    display: none;
}

.icm.modern .ns-logo {
    background-color: var(--colour-blue);
    left: 19.9rem;
    position: absolute;
    top: 3.9rem;
}

.icm .wheels {
    top: 7.6rem;
    left: 4.5rem;
    z-index: 1;
}




/**
 * -----------------------------------------------------------------------------
 * SPRINTER
 * -----------------------------------------------------------------------------
 */
 .sgm {
    position: absolute;
    left: 2rem;
    top: 3.5rem;
 }

.sgm * {
    display: block;
    position: absolute;
}

.sgm .car {
    background-color: var(--colour-oldyellow);
    box-shadow: inset 0 .8rem var(--colour-grey),
                1rem -.5rem var(--colour-grey);
    height: 5.5rem;
    left: 2.8rem;
    top: .3rem;
    width: 42rem;
}

.sgm.modern .car {
    background-color: var(--colour-yellow);
    box-shadow: inset 0 .8rem var(--colour-blue),
                1rem -.5rem var(--colour-blue),
                inset 0 4.6rem var(--colour-white);
}

.sgm .head {
    background-color: var(--colour-grey);
    clip-path: polygon(
        1.9rem 0,
        4.5rem 0,
        4.5rem 1.3rem,
        0 1.2rem,
        .1rem .5rem,
        .5rem .2rem,
        1rem .1rem
    );
    height: 1.3rem;
    left: -1.5rem;
    top: -.5rem;
    width: 4.5rem;
}

.sgm.modern .head {
    background-color: var(--colour-blue);
}

.sgm .nose {
    background-color: var(--colour-oldyellow);
    clip-path: polygon(
        1.6rem 0,
        3rem .8rem,
        3rem 5.5rem,
        .8rem 5.5rem,
        .3rem 4.5rem,
        .3rem 4rem
    );
    display: block;
    height: 5.5rem;
    left: -3rem;
    width: 3rem;
}

.sgm.modern .nose {
    background-color: var(--colour-yellow);
    box-shadow: inset 0 4.6rem var(--colour-white);
}

.sgm.modern .nose::before {
    background-color: var(--colour-blue);
    border-radius: 2rem;
    content: '';
    display: block;
    height: 10rem;
    position: absolute;
    transform: translateY(-6.5rem) translateX(0rem) rotate(45deg);
    width: 5rem;
}

.sgm .nose hr {
    border: 0;
    border-top: .15rem solid var(--colour-grey);
    position: absolute;
    top: 3.3rem;
    width: 2rem;
}

.sgm .nose hr:nth-child(2) {
    top: 4rem;
}

.sgm .driver-window {
    background-color: #333;
    clip-path: polygon(
        .6rem .2rem,
        2rem 1rem,
        1.6rem 2rem,
        0 2.3rem
    );
    height: 2.3rem;
    left: -2.2rem;
    transform: scale(.8);
    width: 2rem;
    z-index: 20;
}

.sgm .driver-window::after {
    background-color: #666;
    clip-path: polygon(
        .75rem .4rem,
        1.9rem 1.1rem,
        1.5rem 1.9rem,
        .2rem 2.2rem
    );
    content: '';
    display: block;
    height: 2.3rem;
    position: absolute;
    width: 2rem;
}

.sgm .chin {
    background-color: var(--colour-grey);
    border-bottom-left-radius: 1rem .5rem;
    border-bottom-right-radius: .5rem;
    height: 1rem;
    left: -2rem;
    top: 5.5rem;
    width: 2.5rem;
}

.sgm .ns-logo {
    background-color: black;
    left: 7.8rem;
    top: 4.15rem;
    transform: scale(1.2);
}

.sgm.modern .ns-logo {
    background-color: var(--colour-blue);
    left: 11rem;
    top: 3.7rem;
    transform: scale(.9);
}

.sgm .doors {
    display: flex;
}

.sgm .driver.door {
    background-color: var(--colour-grey);
    border: .05rem solid #333;
    border-top-left-radius: .2rem;
    border-top-right-radius: .2rem;
    box-shadow: inset 0 3.8rem var(--colour-oldyellow);
    display: block;
    height: 4.1rem;
    left: .5rem;
    top: 1.4rem;
    width: 1.1rem;
    z-index: 7;
}

.sgm.modern .driver.door {
    background-color: transparent;
    box-shadow: none;
}

.sgm.modern .driver.door::before {
    border-left: .1rem solid var(--colour-blue);
    border-right: 2.9rem solid transparent;
    border-top: 2.6rem solid var(--colour-blue);
    content: '';
    display: block;
    height: 0;
    left: -1.9rem;
    position: absolute;
    top: -1.4rem;
    width: 0;
}

.sgm .passenger.doors {
    top: 1.1rem;
    z-index: 6;
}

.sgm .driver.door .window {
    position: absolute;
    left: -.15rem;
}

.sgm .front.passenger.doors {
    left: 3.5rem;
}

.sgm .middle.passenger.doors {
    left: 23.9rem;
}

.sgm .passenger.doors > .door {
    background: var(--colour-grey);
    display: block;
    height: 4.1rem;
    margin-top: .3rem;
    position: static;
    width: 1.3rem;
}

.sgm.modern .passenger.doors > .door {
    background-color: var(--colour-yellow);
    border: .05rem solid #333;
}

.sgm .passenger.doors > .door:nth-child(1) {
    border-right: .05rem solid #333;
    border-top-left-radius: .2rem;
}

.sgm .passenger.doors > .door:nth-child(2) {
    border-left: .05rem solid #333;
    border-top-right-radius: .2rem;
}

.sgm .blind {
    background: white;
    border: .05rem solid #555;
    border-radius: .2rem;
    left: 10.55rem;
    height: .4rem;
    top: .9rem;
    width: 2rem;
}

.sgm.modern .blind {
    background-color: #333;
    border-width: .05rem;
    height: .4rem;
    left: 10.45rem;
    top: .9rem;
    width: 2.2rem;
}

.sgm .windows {
    display: flex;
    top: 1.45rem;
}

.sgm.modern .windows {
    background-color: var(--colour-blue);
    border-radius: .2rem;
    height: 2rem;
}

.sgm .car > .windows:nth-child(2n+1) {
    left: 7rem;
}

.sgm .car > .windows:nth-child(2n+2) {
    left: 27.3rem;
}

.sgm .window {
    background: repeating-linear-gradient(45deg, #8ba1b7, #95a7bc 1rem);
    border: .05rem solid #333;
    border-radius: .2rem;
    height: 1.7rem;
    margin: .05rem .4rem 0;
    position: static;
    width: 2.3rem;
    z-index: 10;
}

.sgm .windows .window:first-child {
    margin-left: .2rem;
}

.sgm .windows .window:last-child {
    margin-right: .2rem;
}

.sgm .door .window {
    height: 1.5rem;
    margin-top: .3rem;
    margin-left: .3rem;
    width: .55rem;
}

.sgm .window hr {
    border: 0;
    border-top: .1rem solid #333;
    position: static;
    z-index: 20;
}

.sgm .stripes {
    border-top: .2rem dashed var(--colour-lightblue);
    left: 25.6rem;
    padding-left: 4.4rem;
    padding-right: 1rem;
    top: .9rem;
}

.sgm.modern .stripes {
    display: none;
}

.sgm .stripe {
    background: var(--colour-lightblue);
    display: block;
    float: left;
    height: 4.5rem;
    margin-right: .8rem;
    position: static;
    transform: skew(-27deg);
    width: 2.8rem;
}

.sgm .wheels:nth-child(2n+1) {
    left: calc(5.8rem - 2.8rem);
    top: 5.5rem;
}

.sgm .wheels:nth-child(2n+2) {
    left: calc(41rem - 2.8rem);
    top: 5.5rem;
}

.sgm .boxes {
    background-color: #444;
    height: 1.3rem;
    left: 17rem;
    top: 5.5rem;
    width: 12rem;
}




/**
 * -----------------------------------------------------------------------------
 * MATERIEEL ’64
 * -----------------------------------------------------------------------------
 */

.mat64 {
    position: absolute;
    left: 2rem;
    top: 4.5rem;
    transform: scale(.95);
}

.mat64 .car {
    background-color: var(--colour-oldyellow);
    box-shadow: -1.9rem 0 var(--colour-oldyellow),
                -3rem -1rem 0 -1rem var(--colour-oldyellow),
                -3.6rem -.5rem 0 -1rem var(--colour-oldyellow),
                0 -1rem var(--colour-grey);
    display: block;
    height: 5.1rem;
    left: 6.5rem;
    position: absolute;
    width: 40rem;
    z-index: 50;
}

.mat64 .roof-front {
    background: var(--colour-grey);
    border-radius: 50%;
    height: 2.4rem;
    left: -2.2rem;
    position: absolute;
    top: -1rem;
    width: 4rem;
    z-index: 5;
}

.mat64 .roof-front::after {
    background: var(--colour-oldyellow);
    content: '';
    display: block;
    height: 1.4rem;
    position: absolute;
    top: 1rem;
    width: 4.4rem;
}

.mat64 .nose {
    background: var(--colour-oldyellow);
    border-radius: 80% 20% 20% 20% / 50% 50% 50% 50%;
    bottom: 0;
    display: block;
    height: 3.8rem;
    left: -5.5rem;
    position: absolute;
    width: 4rem;
}

.mat64 .nose::before {
    background: var(--colour-oldyellow);
    border-radius: 50%;
    content: '';
    display: block;
    height: .5rem;
    left: 1.8rem;
    position: absolute;
    top: -.9rem;
    transform: rotate(-58deg);
    width: 2.7rem;
    z-index: -1;
}

.mat64 .nose::after {
    background: var(--colour-oldyellow);
    bottom: 0;
    content: '';
    display: block;
    height: 2rem;
    position: absolute;
    width: 4rem;
}

.mat64 .nose .headlight {
    background: var(--colour-grey);
    border-bottom-right-radius: 40%;
    border-top-right-radius: 40%;
    display: block;
    position: absolute;
    height: .7rem;
    left: -.2rem;
    top: 2.2rem;
    width: 1rem;
    z-index: 5;
}


.mat64 .nose .headlight::after {
    background-color: var(--colour-oldyellow);
    border-radius: .2rem;
    content: '';
    display: block;
    height: 1rem;
    left: .4rem;
    opacity: .8;
    position: absolute;
    top: -1.5rem;
    width: 1rem;
}

.mat64 .chin {
    background: var(--colour-grey);
    border-radius: .7rem;
    bottom: -.9rem;
    display: block;
    height: 2rem;
    left: -5rem;
    position: absolute;
    transform: scaleX(1.2) rotate(45deg);
    width: 1.8rem;
    z-index: -2;
}

.mat64 .stripes {
    position: absolute;
    left: 18.9rem;
    top: .25rem;
}

.mat64 .stripe {
    background: var(--colour-lightblue);
    display: block;
    float: left;
    height: 4.7rem;
    margin-right: .8rem;
    transform: skew(-27deg);
    width: 2.5rem;
}

.mat64 .doors {
    display: flex;
}

.mat64 .mail.doors,
.mat64 .passenger.doors {
    position: absolute;
    top: .7rem;
    z-index: 6;
}

.mat64 .mail.doors {
    left: 2.1rem;
}

.mat64 .driver.door,
.mat64 .mail.doors > .door {
    background-color: var(--colour-grey);
    border: .05rem solid #333;
    box-shadow: inset 0 4rem var(--colour-oldyellow);
    display: block;
    height: 4.4rem;
    width: 1.5rem;
}

.mat64 .driver.door {
    border-top-left-radius: .2rem;
    border-top-right-radius: .2rem;
    left: -.9rem;
    position: absolute;
    top: .7rem;
    width: 1.1rem;
    z-index: 7;
}

.mat64 .driver.door .window {
    position: absolute;
    left: -.15rem;
}

.mat64 .mail.doors > .door:nth-child(2n+1) {
    border-right: .05rem solid #333;
    border-top-left-radius: .2rem;
}

.mat64 .mail.doors > .door:nth-child(2n+2) {
    border-left: .05rem solid #333;
    border-top-right-radius: .2rem;
}

.mat64 .first.passenger.doors {
    left: 7.5rem;
}

.mat64 .second.passenger.doors {
    left: 29.4rem;
}

.mat64 .passenger.doors > .door {
    background: var(--colour-grey);
    display: block;
    height: 4.4rem;
    width: 1.3rem;
}

.mat64 .window {
    border: .05rem solid #555;
    border-radius: .2rem;
    height: 2rem;
    margin: .8rem .35rem 0;
}

.mat64 .window,
.mat64 .front-window-1 {
    background: repeating-linear-gradient(45deg, #8ba1b7, #95a7bc 1rem);
    display: block;
}

.mat64 .front-windows {
    display: flex;
    left: -2.8rem;
    position: absolute;
    top: .6rem;
    transform: rotate(28deg);
    z-index: 11;
}

.mat64 .front-window-1 {
    border: .05rem solid #555;
    border-radius: 20%;
    height: 1.2rem;
    width: .3rem;
}

.mat64 .front-window-2 {
    border-bottom: .5rem solid transparent;
    border-left: .7rem solid var(--colour-oldyellow);
    border-top: .5rem solid transparent;
    height: 0;
    margin-left: .3rem;
    margin-top: .1rem;
    width: 0;
    z-index: 14;
}

.mat64 .front-window-2-border {
    border-bottom: .65rem solid transparent;
    border-left: .9rem solid #555;
    border-top: .65rem solid transparent;
    content: '';
    height: 0;
    left: -.8rem;
    position: relative;
    top: -.05rem;
    width: 0;
    z-index: 13;
}

.mat64 .driver.door .window,
.mat64 .mail.doors .window,
.mat64 .passenger.doors .window {
    height: 1.8rem;
    margin-top: .3rem;
    width: .55rem;
}

.mat64 .passenger.doors > .door:nth-child(2n+1) {
    border-right: .05rem solid #333;
    border-top-left-radius: .2rem;
}

.mat64 .passenger.doors > .door:nth-child(2n+2) {
    border-left: .05rem solid #333;
    border-top-right-radius: .2rem;
}

.mat64 .windows {
    display: flex;
    position: absolute;
}

.mat64 .windows .window hr {
    border: 0;
    border-top: .1rem solid #555;
}

.mat64 .first.windows {
    left: 10.7rem;
}

.mat64 .second.windows {
    left: 32.6rem;
}

.mat64 .windows .window {
    width: 2.3rem;
}

.mat64 .manager-cabin {
    position: absolute;
    left: 26.5rem;
    top: .3rem;
}

.mat64 .manager-cabin .blind {
    background: white;
    border: .05rem solid #555;
    border-radius: .2rem;
    display: block;
    height: .5rem;
    width: 2rem;
}

.mat64 .manager-cabin .window {
    height: 1.6rem;
    margin-top: .2rem;
}

.mat64 .ns-logo {
    background-color: black;
    left: 11.4rem;
    position: absolute;
    top: 3.7rem;
}

.mat64 .wheels {
    bottom: -1.3rem;
}

.mat64 .wheels-2 {
    position: absolute;
    left: 34rem;
}

.mat64 .mystery-box-1,
.mat64 .mystery-box-2,
.mat64 .mystery-box-3 {
    background: var(--colour-grey);
    bottom: -1.2rem;
    display: block;
    height: 1.2rem;
    position: absolute;
}

.mat64 .mystery-box-1 {
    left: 16rem;
    width: 1.5rem;
}

.mat64 .mystery-box-2 {
    left: 21rem;
    width: 4.4rem;
}

.mat64 .mystery-box-3 {
    left: 27.5rem;
    width: 1rem;
}




/**
 * -----------------------------------------------------------------------------
 * MATERIEEL ’54
 * -----------------------------------------------------------------------------
 * The version with the intercity livery is used as the base variant. Other
 * liveries are defined as deltas on top of this base variant.
 */

.mat54 {
    left: 2rem;
    position: absolute;
    top: 3.2rem;
}

.mat54 * {
    display: block;
    position: absolute;
}

.mat54 .car {
    background-color: var(--colour-oldyellow);
    box-shadow: inset 0 1.1rem 0 var(--colour-grey);
    display: flex;
    height: 5.8rem;
    left: 5rem;
    top: .1rem;
    width: 45rem;
}

.mat54.green .car {
    background-color: var(--colour-green);
    box-shadow: inset 0 1.1rem 0 var(--colour-grey),
                inset 0 -.2rem var(--colour-ivory);
}

.mat54 .car::after {
    bottom: -1.5rem;
    content: '';
    border-left: 1rem solid transparent;
    border-right: 1rem solid transparent;
    border-top: 1.5rem solid var(--colour-grey);
    display: block;
    height: 0;
    left: 8.3rem;
    position: absolute;
    width: 27rem;
}

.mat54 .pantograph {
    top: -1.7rem;
    left: 9rem;
}

.mat54 .pantograph .collector {
    background-color: var(--colour-grey);
    height: .2rem;
    width: .6rem;
}

.mat54 .pantograph .arms {
    border: .1rem solid var(--colour-grey);
    height: 1.2rem;
    left: -.4rem;
    transform: scaleX(3) rotate(45deg);
    top: .4rem;
    width: 1.2rem;
}

.mat54 .roof-front {
    background: var(--colour-grey);
    border-radius: 50%;
    height: 2.4rem;
    left: -1.2rem;
    position: absolute;
    width: 3.8rem;
    z-index: 0;
}

.mat54 .roof-front::after {
    background: var(--colour-oldyellow);
    clip-path: polygon(
        .7rem 0,
        1.8rem .3rem,
        1.8rem .3rem,
        4.5rem .3rem,
        4.5rem 5rem,
        0 5rem,
        0 1.2rem
    );
    content: '';
    display: block;
    height: 5rem;
    left: -.6rem;
    position: absolute;
    top: .8rem;
    width: 4.4rem;
}

.mat54.green .roof-front::after {
    background: var(--colour-green);
    box-shadow: inset 0 -.2rem var(--colour-ivory);
}

.mat54 .front-windows {
    display: flex;
    left: -1.6rem;
    top: 1.1rem;
    transform: rotate(29deg);
    z-index: 12;
}

.mat54 .front-windows .front-window {
    background-color: #95a7bc;
    border: .05rem solid #333;
    border-radius: .2rem;
    height: 1rem;
    margin: 0 .05rem;
    position: static;
    width: 1rem;
}

.mat54 .front-windows .front-window:nth-child(1) {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    width: .3rem;
}

.mat54 .front-windows .front-window:nth-child(2) {
    width: .6rem;
}

.mat54 .nose {
    background: var(--colour-oldyellow);
    border-radius: 80% 20% 20% 20% / 50% 50% 50% 50%;
    bottom: 0;
    display: block;
    height: 3.8rem;
    left: -4.7rem;
    position: absolute;
    width: 4rem;
    z-index: 4;
}

.mat54.green .nose {
    background: var(--colour-green);
}

.mat54 .nose::after {
    background: var(--colour-oldyellow);
    bottom: 0;
    content: '';
    display: block;
    height: 2rem;
    position: absolute;
    width: 4rem;
}

.mat54.green .nose::after {
    background: var(--colour-green);
    box-shadow: inset 0 -.2rem var(--colour-ivory);
}

.mat54 .nose .headlight {
    background: var(--colour-grey);
    border-radius: 40%;
    display: block;
    height: .7rem;
    left: -.3rem;
    top: 2.2rem;
    width: .8rem;
    z-index: 5;
}

.mat54.green .nose .headlight {
    background-color: var(--colour-ivory);
}

.mat54 .nose .headlight::before {
    background-color: var(--colour-oldyellow);
    border-radius: .2rem;
    content: '';
    display: block;
    height: 1rem;
    left: .5rem;
    opacity: .8;
    position: absolute;
    top: -1.5rem;
    width: 1rem;
}

.mat54.green .nose .headlight::after {
    border-right: 2.5rem solid transparent;
    border-top: .7rem solid var(--colour-ivory);
    content: '';
    display: block;
    height: 0;
    left: .6rem;
    position: absolute;
    width: 0;
}

.mat54.green .nose .headlight::before {
    background-color: var(--colour-green);
}

.mat54 .chin {
    background: var(--colour-grey);
    border-radius: .7rem;
    bottom: -.9rem;
    display: block;
    height: 2.2rem;
    left: -4rem;
    position: absolute;
    transform: scaleX(1.3) rotate(45deg);
    width: 2.2rem;
}

.mat54 .ns-logo {
    background-color: black;
    left: 2.8rem;
    top: 4.4rem;
    transform: scale(1.2);
}

.mat54.yellow .ns-logo {
    left: 15.5rem;
}

.mat54.green .ns-logo {
    display: none;
}

.mat54 .ns-logo:nth-child(2n+2) {
    left: 38.5rem;
}

.mat54 .door {
    border: .05rem solid #333;
}

.mat54 .driver.door {
    background-color: transparent;
    box-shadow: inset 0 -.3rem 0 var(--colour-grey);
    border-top-left-radius: .2rem;
    border-top-right-radius: .2rem;
    height: 4.2rem;
    left: .5rem;
    top: 1.5rem;
    width: 1.2rem;
}

.mat54 .intercity-line {
    background-color: var(--colour-oldblue);
    border-radius: .2rem;
    height: 2rem;
    left: 2.3rem;
    top: 1.7rem;
    width: 38rem;
}

.mat54.yellow .intercity-line,
.mat54.green .intercity-line  {
    display: none;
}

.mat54 .windows {
    display: flex;
    top: 1.9rem;
    z-index: 10;
}

.mat54 .car .windows:nth-child(2n) {
    left: 2.2rem;
}

.mat54 .car .windows:nth-child(2n+1) {
    left: 14.3rem;
}

.mat54 .window {
    background: repeating-linear-gradient(45deg, #8ba1b7, #95a7bc 1rem);
    border: .05rem solid #333;
    border-radius: .2rem;
    height: 1.5rem;
    margin: 0 .55rem;
    position: static;
    width: 2.3rem;
}

.mat54.green .window {
    border-color: var(--colour-ivory);
}

.mat54 .windows .window hr {
    border: 0;
    border-top: .1rem solid #555;
    position: static;
}

.mat54.green .windows .window hr {
    border-color: var(--colour-ivory);
}

.mat54 .normal.window {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

.mat54 .driver.door > .window {
    margin: .4rem .3rem;
    width: .6rem;
}

.mat54 .passenger.doors {
    display: flex;
    left: 10.1rem;
    top: 1.5rem;
}

.mat54 .passenger.doors .door {
    background-color: transparent;
    box-shadow: inset 0 -.6rem 0 var(--colour-grey);
    position: static;
    height: 4.2rem;
    width: 1.5rem;
}

.mat54.yellow .passenger.doors .door {
    background-color: var(--colour-grey);
}

.mat54 .passenger.doors .door:nth-child(2n+1) {
    border-top-left-radius: .2rem;
}

.mat54 .passenger.doors .door:nth-child(2n+2) {
    border-top-right-radius: .2rem;
    margin-left: -.05rem;
}

.mat54 .passenger.doors .window {
    margin: .3rem .2rem;
    width: 1rem;
}

.mat54 .small.window {
    width: 1.1rem;
}

.mat54.green .small.window {
    background: #ddd;
}

.mat54.green .small.window hr {
    display: none;
}

.mat54 .blind {
    background-color: white;
    border: .05rem solid #333;
    border-radius: .1rem;
    height: .3rem;
    left: 14.7rem;
    top: 1.3rem;
    width: 1.5rem;
}

.mat54.yellow .blind {
    display: none;
}

.mat54.green .blind {
    background-color: var(--colour-ivory);
    border: none;
    height: .6rem;
    left: 5.05rem;
    top: 3.8rem;
    width: 1.2rem;
}

.mat54 .stripes {
    position: absolute;
    left: 30.7rem;
    top: 1.3rem;
}

.mat54 .stripe {
    background: var(--colour-lightblue);
    display: block;
    float: left;
    height: 4.3rem;
    margin-right: .8rem;
    position: static;
    transform: skew(-27deg);
    width: 2.5rem;
}

.mat54 .wheels {
    top: 5.9rem;
    transform: scale(1.1);
    z-index: 0;
}

.mat54 .wheels:nth-child(2n+1) {
    left: 1rem;
}

.mat54 .wheels:nth-child(2n+2) {
    left: 39rem;
}

/**
 * -----------------------------------------------------------------------------
 * 1300
 * -----------------------------------------------------------------------------
 */

.loc1300 {
    display: block;
    height: 100%;
    left: 2rem;
    position: absolute;
    top: .15rem;
    width: 100%;
}

.loc1300 * {
    display: block;
    position: absolute;
}

.loc1300 .pantograph {
    top: 1.4rem;
    left: 9rem;
}

.loc1300 .pantograph .collector {
    background-color: #555;
    height: .4rem;
    left: -.1rem;
    width: 1rem;
}

.loc1300 .pantograph .arms {
    border: .15rem solid #555;
    height: 1.3rem;
    left: -.4rem;
    transform: scaleX(3) rotate(45deg);
    top: .7rem;
    width: 1.3rem;
}

.loc1300 .top {
    background-color: #555;
    height: .7rem;
    left: 13.5rem;
    top: 3.2rem;
    width: 4.5rem;
    z-index: 0;
}

.loc1300 .main {
    background-color: var(--colour-oldyellow);
    height: 4rem;
    left: 1.8rem;
    top: 4.5rem;
    width: 16rem;
    z-index: 1;
}

.loc1300 .main::before {
    background-color: #444;
    content: '';
    display: block;
    height: .6rem;
    position: absolute;
    right: 0;
    top: -.6rem;
    width: 13rem;
    z-index: -1;
}

.loc1300 .base {
    background-color: #444;
    height: 1rem;
    left: 1.4rem;
    top: 8.5rem;
    width: 16.4rem;
    z-index: 3;
}

.loc1300 .head {
    background: #444;
    border-radius: 50%;
    height: 1.2rem;
    left: 1.8rem;
    top: 3.9rem;
    width: 6rem;
}

.loc1300 .nose {
    border-bottom: 4rem solid var(--colour-oldyellow);
    border-left: .6rem solid transparent;
    height: 0;
    left: 1.2rem;
    top: 4.5rem;
    width: 0;
}

.loc1300 .light {
    background-color: #444;
    border-radius: 0% 100% 100% 0% / 100% 50% 50% 0%;
    height: .8rem;
    left: -.5rem;
    top: 3.1rem;
    transform: rotate(8.53deg);
    width: .4rem;
}

.loc1300 .top.light {
    background-color: var(--colour-oldyellow);
    border-radius: 0;
    border-top-left-radius: .2rem;
    border-bottom-left-radius: .2rem;
    height: .6rem;
    left: -.6rem;
    top: 1.9rem;
    width: .4rem;
}

.loc1300 .coupler {
    background-color: #444;
    height: .5rem;
    left: .5rem;
    top: 8.5rem;
    width: 1.2rem;
    z-index: 0;
}

.loc1300 .coupler::before {
    background-color: #444;
    content: '';
    display: block;
    left: -.2rem;
    position: absolute;
    top: -.1rem;
    width: .2rem;
    height: .8rem;
}

.loc1300 .main .grey-ribbon::before {
    border-bottom: 1.8rem solid #444;
    border-left: .3rem solid transparent;
    content: '';
    display: block;
    height: 0;
    left: -.35rem;
    position: absolute;
    top: 0rem;
    width: 0;
}


.loc1300 .main .grey-ribbon {
    background: #444;
    border-left: .1rem solid #444;
    border-top-right-radius: .2rem;
    border-bottom-right-radius: .2rem;
    height: 1.8rem;
    margin-left: -.1rem;
    top: .2rem;
    width: 3.25rem;
}

.loc1300 .big-window {
    background: repeating-linear-gradient(45deg, #8ba1b7, #95a7bc 1rem);
    border: .05rem solid #333;
    border-radius: .2rem;
    height: 1.2rem;
    left: 1.4rem;
    top: .4rem;
    width: 1.5rem;
}

.loc1300 .door,
.loc1300 .steps {
    background-color: var(--colour-oldyellow);
    border: .1rem solid #444;
    border-radius: .2rem;
    height: 2.9rem;
    left: 3.5rem;
    top: .2rem;
    width: .8rem;
    z-index: 8;
}

.loc1300 .steps {
    left: 3.3rem;
    top: 1rem;
    width: 1.2rem;
    z-index: 7;
}

.loc1300 .ns-logo {
    background-color: black;
    left: 8.1rem;
    top: 1.6rem;
    transform: scale(3.5);
}

.loc1300 .windows {
    left: 8.4rem;
}

.loc1300 .window {
    background-color: #8ba1b7;
    border: .2rem solid #444;
    border-radius: 50%;
    height: .8rem;
    top: .3rem;
    width: .8rem;
}

.loc1300 .window:nth-child(2) {
    left: 4.4rem;
}

.loc1300 .wheelset {
    border-top: 1rem solid #2a2a2a;
    border-left: .5rem solid transparent;
    border-right: .5rem solid transparent;
    height: 0;
    left: 2.3rem;
    top: 9.5rem;
    width: 12.5rem;
    z-index: 1;
}

.loc1300 .wheel {
    background: #383838;
    border-radius: 50%;
    display: inline-block;
    height: 1.6rem;
    margin-left: 2.6rem;
    position: relative;
    top: -1.2rem;
    width: 1.6rem;
}

.loc1300 .wheel:first-child {
    margin-left: .9rem;
}

.loc1300 .front.mirrored {
    left: 35rem;
    transform: scaleX(-1);
}

.loc1300 .number {
    font-size: 1.3rem;
    font-weight: bold;
    left: 5.7rem;
    letter-spacing: -.1rem;
    top: 2rem;
    transform: scaleX(-1);
}

.loc1300.dual .top,
.loc1300.dual .head,
.loc1300.dual .main,
.loc1300.dual .door,
.loc1300.dual .steps,
.loc1300.dual .base {
    background-color: #555;
}

.loc1300.dual .main::before {
    background-color: #555;
}

.loc1300.dual .nose {
    border-bottom-color: #555;
}

.loc1300.dual .top.light {
    display: none;
}

.loc1300.dual .nose::before {
    border-bottom: 2rem solid var(--colour-oldyellow);
    border-left: .3rem solid transparent;
    content: '';
    display: block;
    height: 0;
    left: -.6rem;
    position: absolute;
    top: 2rem;
    width: 0;
    z-index: 9;
}

.loc1300.dual .nose::after {
    background: var(--colour-oldyellow);
    border-top-right-radius: .2rem;
    border-bottom-right-radius: .2rem;
    content: '';
    display: block;
    height: 2rem;
    left: -.3rem;
    position: absolute;
    top: 2rem;
    width: 3.3rem;
    z-index: 9;
}

.loc1300.dual .steps {
    border-color: var(--colour-oldyellow);
}

.loc1300.dual .yellow-stripe {
    background-color: var(--colour-oldyellow);
    height: 1.8rem;
    left: 5rem;
    width: 11rem;
}

.loc1300.dual .ns-logo {
    left: 5.8rem;
    top: .55rem;
    transform: scale(1);
}

.loc1300.dual .mirrored .ns-logo {
    transform: scaleX(-1);
}

.loc1300.dual .number {
    color: white;
    font-size: 1.1rem;
    left: 16.3rem;
    letter-spacing: -.05rem;
    top: 7rem;
    transform: scaleX(1);
    z-index: 9;
}