
.toll_roads {
    margin: 0 auto;
}

.toll_roads .box_container {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 302px;
    margin: 2rem auto;
    border: 1px solid #aaa;
}

.toll_roads .box_container:first-of-type {
    margin-top: 5rem;
}

.toll_roads .car_box {
    height: 300px;
    width: 300px;
    overflow: hidden;
    display: flex;
    flex-direction: row;
}

.toll_roads .price_boxes {
    height: 30px;
    width: 300px;
    display: flex;
    flex-direction: row;
    align-items: center;
    background-color: #2b2d2c;
}

.toll_roads .price_boxes > div {
    width: 75px;
    color: white;
    font-size: 1.1rem;
    font-family: sans-serif;
    text-align: center;
}

.toll_roads .lane {
    height: 400px;
    width: 75px;
}

.toll_roads .lane_section,
.toll_roads .long_lane_section {
    height: 400px;
    width: 75px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
    border-right: 1px solid white;
    background-color: #4f5150;
}

.toll_roads .long_lane_section {
    height: 700px;
}

.toll_roads .lane_section img,
.toll_roads .long_lane_section img {
    width: 35px;
    margin: 5px 0;
}

.toll_roads .lane:nth-of-type(4) .long_lane_section {
    justify-content: flex-start;
}

.toll_roads .lane:nth-of-type(4) .long_lane_section,
.toll_roads .lane:nth-of-type(4) .lane_section {
    border-right: none;
}

@keyframes move-lane {
    100% {
        transform: translateY(-100%);
    }
}

@keyframes move-long-lane {
    100% {
        transform: translateY(-700px);
    }
}

.toll_roads .slow_speed {
    animation: move-lane linear 19s infinite;
}

.toll_roads .fast_speed {
    animation: move-long-lane linear 1.3s infinite;
}

.toll_roads .medium_speed {
    animation: move-lane linear 3.5s infinite;
}

.toll_roads .medium_speed:nth-of-type(2) {
    animation: move-lane linear 3.3s infinite;
}

.toll_roads .medium_speed:nth-of-type(3) {
    animation: move-lane linear 3.6s infinite;
}

.toll_roads .medium_speed:nth-of-type(4) {
    animation: move-lane linear 3.4s infinite;
}

.toll_roads .imageAttribution {
    font-family: sans-serif;
    text-align: center;
    font-size: .8rem;
}

.toll_roads .imageAttribution > p {
    margin-bottom: .3rem;
}

@media only screen and (min-width: 720px) {

    .toll_roads .road_boxes {
        display: flex;
        flex-direction: row;
    }

    .toll_roads .box_container {
        margin: 5rem auto;
    }
}

