Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <div class="wrapper">

    <div class="bus bus--full bus--top-green bus--bottom-green bus--first">
        <div class="bus-body">
            <div class="bus__body--top roof"></div>
            <div class="bus__body--top side-top"></div>
            <div class="bus__body--top side-top side-top--right"></div>
            <div class="bus__body--top gutter"></div>
            <div class="bus__body--top gutter gutter--right"></div>
            <div class="bus__body--top mid-top"></div>
            <div class="bus__body--top bump"></div>

            <div class="bus__body--bottom front"></div>
            <div class="bus__body--bottom front-middle"></div>
            <div class="bus__body--bottom front-middle--bottom"></div>
            <div class="bus__body--bottom grill">
                <div class="grill__hole"></div>
                <div class="grill__hole grill__hole--right"></div>
            </div>
        </div>

        <div class="campertop">
            <div class="poptop-2"></div>
            <div class="poptop-1"></div>
            <div class="poptop-seal"></div>
        </div>

        <div class="mirrors">
            <div class="mirror-l">
                <div class="mirror-glass"></div>
                <div class="mirror-arm"></div>
            </div>
            <div class="mirror-r">
                <div class="mirror-glass"></div>
                <div class="mirror-arm mirror-arm-r"></div>
            </div>
        </div>

        <div class="windshield">
            <div class="windshield-rubber"></div>
            <div class="windshield-rubber--bottom"></div>
            <div class="windshield-rubber--side"></div>
            <div class="windshield-rubber--side windshield-rubber--side--right"></div>
            <div class="windshield-top"></div>
            <div class="windshield-bottom"></div>
        </div>

        <div class="front-parts">
            <div class="wiper">
                <div class="wiper-blade"></div>
                <div class="wiper-arm"></div>
                <div class="wiper-attachment"></div>
            </div>
            <div class="wiper wiper-left">
                <div class="wiper-blade"></div>
                <div class="wiper-arm"></div>
                <div class="wiper-attachment"></div>
            </div>

            <div class="directional">
                <div class="directional--off"></div>
            </div>
            <div class="directional directional--right">
                <div class="directional--off"></div>
            </div>

            <div class="vw-logo vw-logo--shadow">
                <span class="vw-logo__v"></span>
                <span class="vw-logo__w">
                    <span class="vw-logo__w__leg-l"></span>
                    <span class="vw-logo__w__leg-r"></span>
                </span>
            </div>
            <div class="vw-logo">
                <span class="vw-logo__v"></span>
                <span class="vw-logo__w">
                    <span class="vw-logo__w__leg-l"></span>
                    <span class="vw-logo__w__leg-r"></span>
                </span>
            </div>

            <div class="headlight">
                <div class="headlight--off">
                    <div class="headlight--off__star"></div>
                </div>
            </div>
            <div class="headlight headlight--right">
                <div class="headlight--off headlight--on--right">
                    <div class="headlight--off__star"></div>
                </div>
            </div>

            <div class="bumper">
                <div class="bumper-top"></div>
                <div class="bumper-straight bs-middle"></div>
                <div class="bumper-curve bc-1"></div>
                <div class="bumper-straight bs-1"></div>
                <div class="bumper-curve bc-2"></div>
                <div class="bumper-curve bc-3"></div>
                <div class="bumper-straight bs-3"></div>
                <div class="bumper-curve bc-4"></div>
                <div class="bus__body--bottom above-bumper"></div>
            </div>
            <div class="spare-tire"></div>
        </div>

        <div class="underbody">
            <div class="tire"></div>
            <div class="tire tire--right"></div>
            <div class="mid-parts">
                <div class="mid-parts--left"></div>
                <div class="mid-parts--middle"></div>
                <div class="mid-parts--left mid-parts--right"></div>
            </div>
            <div class="under-part-1l"></div>
            <div class="under-part-1l under-part-1r"></div>
            <div class="under-part-2"></div>
            <div class="shock-l"></div>
            <div class="shock-l shock-r"></div>
            <div class="bar-l"></div>
            <div class="bar-l bar-r"></div>
        </div>
    </div><!-- .bus -->





    <div class="row">
        <div class="col--third">
            <div class="bus bus--third bus--top-white bus--bottom-blue">
                <div class="bus-body">
                    <div class="bus__body--top roof"></div>
                    <div class="bus__body--top side-top"></div>
                    <div class="bus__body--top side-top side-top--right"></div>
                    <div class="bus__body--top gutter"></div>
                    <div class="bus__body--top gutter gutter--right"></div>
                    <div class="bus__body--top mid-top"></div>
                    <div class="bus__body--top bump"></div>

                    <div class="bus__body--bottom front"></div>
                    <div class="bus__body--bottom front-middle"></div>
                    <div class="bus__body--bottom front-middle--bottom"></div>
                    <div class="bus__body--bottom grill">
                        <div class="grill__hole"></div>
                        <div class="grill__hole grill__hole--right"></div>
                    </div>
                </div>

                <div class="mirrors">
                    <div class="mirror-l">
                        <div class="mirror-glass"></div>
                        <div class="mirror-arm"></div>
                    </div>
                    <div class="mirror-r">
                        <div class="mirror-glass"></div>
                        <div class="mirror-arm mirror-arm-r"></div>
                    </div>
                </div>

                <div class="windshield">
                    <div class="windshield-rubber"></div>
                    <div class="windshield-rubber--bottom"></div>
                    <div class="windshield-rubber--side"></div>
                    <div class="windshield-rubber--side windshield-rubber--side--right"></div>
                    <div class="windshield-top"></div>
                    <div class="windshield-bottom"></div>
                </div>

                <div class="front-parts">
                    <div class="wiper">
                        <div class="wiper-blade"></div>
                        <div class="wiper-arm"></div>
                        <div class="wiper-attachment"></div>
                    </div>
                    <div class="wiper wiper-left">
                        <div class="wiper-blade"></div>
                        <div class="wiper-arm"></div>
                        <div class="wiper-attachment"></div>
                    </div>

                    <div class="directional"></div>
                    <div class="directional directional--right"></div>

                    <div class="vw-logo vw-logo--shadow">
                        <span class="vw-logo__v"></span>
                        <span class="vw-logo__w">
                            <span class="vw-logo__w__leg-l"></span>
                            <span class="vw-logo__w__leg-r"></span>
                        </span>
                    </div>
                    <div class="vw-logo">
                        <span class="vw-logo__v"></span>
                        <span class="vw-logo__w">
                            <span class="vw-logo__w__leg-l"></span>
                            <span class="vw-logo__w__leg-r"></span>
                        </span>
                    </div>

                    <div class="headlight"></div>
                    <div class="headlight headlight--right"></div>

                    <div class="bumper">
                        <div class="bumper-top"></div>
                        <div class="bumper-straight bs-middle"></div>
                        <div class="bumper-curve bc-1"></div>
                        <div class="bumper-straight bs-1"></div>
                        <div class="bumper-curve bc-2"></div>
                        <div class="bumper-curve bc-3"></div>
                        <div class="bumper-straight bs-3"></div>
                        <div class="bumper-curve bc-4"></div>
                        <div class="bus__body--bottom above-bumper"></div>
                    </div>
                </div>

                <div class="underbody">
                    <div class="tire"></div>
                    <div class="tire tire--right"></div>
                    <div class="mid-parts">
                        <div class="mid-parts--left"></div>
                        <div class="mid-parts--middle"></div>
                        <div class="mid-parts--left mid-parts--right"></div>
                    </div>
                    <div class="under-part-1l"></div>
                    <div class="under-part-1l under-part-1r"></div>
                    <div class="under-part-2"></div>
                    <div class="shock-l"></div>
                    <div class="shock-l shock-r"></div>
                    <div class="bar-l"></div>
                    <div class="bar-l bar-r"></div>
                </div>
            </div><!-- .bus -->
        </div><!-- .col--third -->

        <div class="col--third">
            <div class="bus bus--third bus--top-white bus--bottom-orange">
                <div class="bus-body">
                    <div class="bus__body--top roof"></div>
                    <div class="bus__body--top side-top"></div>
                    <div class="bus__body--top side-top side-top--right"></div>
                    <div class="bus__body--top gutter"></div>
                    <div class="bus__body--top gutter gutter--right"></div>
                    <div class="bus__body--top mid-top"></div>
                    <div class="bus__body--top bump"></div>

                    <div class="bus__body--bottom front"></div>
                    <div class="bus__body--bottom front-middle"></div>
                    <div class="bus__body--bottom front-middle--bottom"></div>
                    <div class="bus__body--bottom grill">
                        <div class="grill__hole"></div>
                        <div class="grill__hole grill__hole--right"></div>
                    </div>
                </div>

                <div class="mirrors">
                    <div class="mirror-l">
                        <div class="mirror-glass"></div>
                        <div class="mirror-arm"></div>
                    </div>
                    <div class="mirror-r">
                        <div class="mirror-glass"></div>
                        <div class="mirror-arm mirror-arm-r"></div>
                    </div>
                </div>

                <div class="windshield">
                    <div class="windshield-rubber"></div>
                    <div class="windshield-rubber--bottom"></div>
                    <div class="windshield-rubber--side"></div>
                    <div class="windshield-rubber--side windshield-rubber--side--right"></div>
                    <div class="windshield-top"></div>
                    <div class="windshield-bottom"></div>
                </div>

                <div class="front-parts">
                    <div class="wiper">
                        <div class="wiper-blade"></div>
                        <div class="wiper-arm"></div>
                        <div class="wiper-attachment"></div>
                    </div>
                    <div class="wiper wiper-left">
                        <div class="wiper-blade"></div>
                        <div class="wiper-arm"></div>
                        <div class="wiper-attachment"></div>
                    </div>

                    <div class="directional"></div>
                    <div class="directional directional--right"></div>

                    <div class="vw-logo vw-logo--shadow">
                        <span class="vw-logo__v"></span>
                        <span class="vw-logo__w">
                            <span class="vw-logo__w__leg-l"></span>
                            <span class="vw-logo__w__leg-r"></span>
                        </span>
                    </div>
                    <div class="vw-logo">
                        <span class="vw-logo__v"></span>
                        <span class="vw-logo__w">
                            <span class="vw-logo__w__leg-l"></span>
                            <span class="vw-logo__w__leg-r"></span>
                        </span>
                    </div>

                    <div class="headlight"></div>
                    <div class="headlight headlight--right"></div>

                    <div class="bumper">
                        <div class="bumper-top"></div>
                        <div class="bumper-straight bs-middle"></div>
                        <div class="bumper-curve bc-1"></div>
                        <div class="bumper-straight bs-1"></div>
                        <div class="bumper-curve bc-2"></div>
                        <div class="bumper-curve bc-3"></div>
                        <div class="bumper-straight bs-3"></div>
                        <div class="bumper-curve bc-4"></div>
                        <div class="bus__body--bottom above-bumper"></div>
                    </div>
                </div>

                <div class="underbody">
                    <div class="tire"></div>
                    <div class="tire tire--right"></div>
                    <div class="mid-parts">
                        <div class="mid-parts--left"></div>
                        <div class="mid-parts--middle"></div>
                        <div class="mid-parts--left mid-parts--right"></div>
                    </div>
                    <div class="under-part-1l"></div>
                    <div class="under-part-1l under-part-1r"></div>
                    <div class="under-part-2"></div>
                    <div class="shock-l"></div>
                    <div class="shock-l shock-r"></div>
                    <div class="bar-l"></div>
                    <div class="bar-l bar-r"></div>
                </div>
            </div><!-- .bus -->
        </div><!-- .col--third -->

        <div class="col--third">
            <div class="bus bus--third bus--top-white bus--bottom-red">
                <div class="bus-body">
                    <div class="bus__body--top roof"></div>
                    <div class="bus__body--top side-top"></div>
                    <div class="bus__body--top side-top side-top--right"></div>
                    <div class="bus__body--top gutter"></div>
                    <div class="bus__body--top gutter gutter--right"></div>
                    <div class="bus__body--top mid-top"></div>
                    <div class="bus__body--top bump"></div>

                    <div class="bus__body--bottom front"></div>
                    <div class="bus__body--bottom front-middle"></div>
                    <div class="bus__body--bottom front-middle--bottom"></div>
                    <div class="bus__body--bottom grill">
                        <div class="grill__hole"></div>
                        <div class="grill__hole grill__hole--right"></div>
                    </div>
                </div>

                <div class="mirrors">
                    <div class="mirror-l">
                        <div class="mirror-glass"></div>
                        <div class="mirror-arm"></div>
                    </div>
                    <div class="mirror-r">
                        <div class="mirror-glass"></div>
                        <div class="mirror-arm mirror-arm-r"></div>
                    </div>
                </div>

                <div class="windshield">
                    <div class="windshield-rubber"></div>
                    <div class="windshield-rubber--bottom"></div>
                    <div class="windshield-rubber--side"></div>
                    <div class="windshield-rubber--side windshield-rubber--side--right"></div>
                    <div class="windshield-top"></div>
                    <div class="windshield-bottom"></div>
                </div>

                <div class="front-parts">
                    <div class="wiper">
                        <div class="wiper-blade"></div>
                        <div class="wiper-arm"></div>
                        <div class="wiper-attachment"></div>
                    </div>
                    <div class="wiper wiper-left">
                        <div class="wiper-blade"></div>
                        <div class="wiper-arm"></div>
                        <div class="wiper-attachment"></div>
                    </div>

                    <div class="directional"></div>
                    <div class="directional directional--right"></div>

                    <div class="vw-logo vw-logo--shadow">
                        <span class="vw-logo__v"></span>
                        <span class="vw-logo__w">
                            <span class="vw-logo__w__leg-l"></span>
                            <span class="vw-logo__w__leg-r"></span>
                        </span>
                    </div>
                    <div class="vw-logo">
                        <span class="vw-logo__v"></span>
                        <span class="vw-logo__w">
                            <span class="vw-logo__w__leg-l"></span>
                            <span class="vw-logo__w__leg-r"></span>
                        </span>
                    </div>

                    <div class="headlight"></div>
                    <div class="headlight headlight--right"></div>

                    <div class="bumper">
                        <div class="bumper-top"></div>
                        <div class="bumper-straight bs-middle"></div>
                        <div class="bumper-curve bc-1"></div>
                        <div class="bumper-straight bs-1"></div>
                        <div class="bumper-curve bc-2"></div>
                        <div class="bumper-curve bc-3"></div>
                        <div class="bumper-straight bs-3"></div>
                        <div class="bumper-curve bc-4"></div>
                        <div class="bus__body--bottom above-bumper"></div>
                    </div>
                </div>

                <div class="underbody">
                    <div class="tire"></div>
                    <div class="tire tire--right"></div>
                    <div class="mid-parts">
                        <div class="mid-parts--left"></div>
                        <div class="mid-parts--middle"></div>
                        <div class="mid-parts--left mid-parts--right"></div>
                    </div>
                    <div class="under-part-1l"></div>
                    <div class="under-part-1l under-part-1r"></div>
                    <div class="under-part-2"></div>
                    <div class="shock-l"></div>
                    <div class="shock-l shock-r"></div>
                    <div class="bar-l"></div>
                    <div class="bar-l bar-r"></div>
                </div>
            </div><!-- .bus -->
        </div><!-- .col--third -->
    </div><!-- .row -->






    <div class="row">
        <div class="col--half">
            <div class="bus bus--half bus--top-yellow bus--bottom-yellow">
                <div class="bus-body">
                    <div class="bus__body--top roof"></div>
                    <div class="bus__body--top side-top"></div>
                    <div class="bus__body--top side-top side-top--right"></div>
                    <div class="bus__body--top gutter"></div>
                    <div class="bus__body--top gutter gutter--right"></div>
                    <div class="bus__body--top mid-top"></div>
                    <div class="bus__body--top bump"></div>

                    <div class="bus__body--bottom front"></div>
                    <div class="bus__body--bottom front-middle"></div>
                    <div class="bus__body--bottom front-middle--bottom"></div>
                    <div class="bus__body--bottom grill">
                        <div class="grill__hole"></div>
                        <div class="grill__hole grill__hole--right"></div>
                    </div>
                </div>

                <div class="campertop">
                    <div class="poptop-2"></div>
                    <div class="poptop-1"></div>
                    <div class="poptop-seal"></div>
                </div>

                <div class="mirrors">
                    <div class="mirror-l">
                        <div class="mirror-glass"></div>
                        <div class="mirror-arm"></div>
                    </div>
                    <div class="mirror-r">
                        <div class="mirror-glass"></div>
                        <div class="mirror-arm mirror-arm-r"></div>
                    </div>
                </div>

                <div class="windshield">
                    <div class="windshield-rubber"></div>
                    <div class="windshield-rubber--bottom"></div>
                    <div class="windshield-rubber--side"></div>
                    <div class="windshield-rubber--side windshield-rubber--side--right"></div>
                    <div class="windshield-top"></div>
                    <div class="windshield-bottom"></div>
                </div>

                <div class="front-parts">
                    <div class="wiper">
                        <div class="wiper-blade"></div>
                        <div class="wiper-arm"></div>
                        <div class="wiper-attachment"></div>
                    </div>
                    <div class="wiper wiper-left">
                        <div class="wiper-blade"></div>
                        <div class="wiper-arm"></div>
                        <div class="wiper-attachment"></div>
                    </div>

                    <div class="directional">
                        <div class="directional--on"></div>
                    </div>
                    <div class="directional directional--right">
                        <div class="directional--off"></div>
                    </div>

                    <div class="vw-logo vw-logo--shadow">
                        <span class="vw-logo__v"></span>
                        <span class="vw-logo__w">
                            <span class="vw-logo__w__leg-l"></span>
                            <span class="vw-logo__w__leg-r"></span>
                        </span>
                    </div>
                    <div class="vw-logo">
                        <span class="vw-logo__v"></span>
                        <span class="vw-logo__w">
                            <span class="vw-logo__w__leg-l"></span>
                            <span class="vw-logo__w__leg-r"></span>
                        </span>
                    </div>

                    <div class="headlight">
                        <div class="headlight--off">
                            <div class="headlight--off__star"></div>
                        </div>
                    </div>
                    <div class="headlight headlight--right">
                        <div class="headlight--off headlight--on--right">
                            <div class="headlight--off__star"></div>
                        </div>
                    </div>

                    <div class="bumper">
                        <div class="bumper-top"></div>
                        <div class="bumper-straight bs-middle"></div>
                        <div class="bumper-curve bc-1"></div>
                        <div class="bumper-straight bs-1"></div>
                        <div class="bumper-curve bc-2"></div>
                        <div class="bumper-curve bc-3"></div>
                        <div class="bumper-straight bs-3"></div>
                        <div class="bumper-curve bc-4"></div>
                        <div class="bus__body--bottom above-bumper"></div>
                    </div>
                    <div class="spare-tire"></div>
                </div>

                <div class="underbody">
                    <div class="tire"></div>
                    <div class="tire tire--right"></div>
                    <div class="mid-parts">
                        <div class="mid-parts--left"></div>
                        <div class="mid-parts--middle"></div>
                        <div class="mid-parts--left mid-parts--right"></div>
                    </div>
                    <div class="under-part-1l"></div>
                    <div class="under-part-1l under-part-1r"></div>
                    <div class="under-part-2"></div>
                    <div class="shock-l"></div>
                    <div class="shock-l shock-r"></div>
                    <div class="bar-l"></div>
                    <div class="bar-l bar-r"></div>
                </div>
            </div><!-- .bus -->
        </div><!-- .col--half -->
        <div class="col--half">
            <div class="bus bus--half bus--top-white bus--bottom-brown">
                <div class="bus-body">
                    <div class="bus__body--top roof"></div>
                    <div class="bus__body--top side-top"></div>
                    <div class="bus__body--top side-top side-top--right"></div>
                    <div class="bus__body--top gutter"></div>
                    <div class="bus__body--top gutter gutter--right"></div>
                    <div class="bus__body--top mid-top"></div>
                    <div class="bus__body--top bump"></div>

                    <div class="bus__body--bottom front"></div>
                    <div class="bus__body--bottom front-middle"></div>
                    <div class="bus__body--bottom front-middle--bottom"></div>
                    <div class="bus__body--bottom grill">
                        <div class="grill__hole"></div>
                        <div class="grill__hole grill__hole--right"></div>
                    </div>
                </div>

                <div class="campertop">
                    <div class="poptop-2"></div>
                    <div class="poptop-1"></div>
                    <div class="poptop-seal"></div>
                </div>

                <div class="mirrors">
                    <div class="mirror-l">
                        <div class="mirror-glass"></div>
                        <div class="mirror-arm"></div>
                    </div>
                    <div class="mirror-r">
                        <div class="mirror-glass"></div>
                        <div class="mirror-arm mirror-arm-r"></div>
                    </div>
                </div>

                <div class="windshield">
                    <div class="windshield-rubber"></div>
                    <div class="windshield-rubber--bottom"></div>
                    <div class="windshield-rubber--side"></div>
                    <div class="windshield-rubber--side windshield-rubber--side--right"></div>
                    <div class="windshield-top"></div>
                    <div class="windshield-bottom"></div>
                </div>

                <div class="front-parts">
                    <div class="wiper">
                        <div class="wiper-blade"></div>
                        <div class="wiper-arm"></div>
                        <div class="wiper-attachment"></div>
                    </div>
                    <div class="wiper wiper-left">
                        <div class="wiper-blade"></div>
                        <div class="wiper-arm"></div>
                        <div class="wiper-attachment"></div>
                    </div>

                    <div class="directional">
                        <div class="directional--off"></div>
                    </div>
                    <div class="directional directional--right">
                        <div class="directional--on"></div>
                    </div>

                    <div class="vw-logo vw-logo--shadow">
                        <span class="vw-logo__v"></span>
                        <span class="vw-logo__w">
                            <span class="vw-logo__w__leg-l"></span>
                            <span class="vw-logo__w__leg-r"></span>
                        </span>
                    </div>
                    <div class="vw-logo">
                        <span class="vw-logo__v"></span>
                        <span class="vw-logo__w">
                            <span class="vw-logo__w__leg-l"></span>
                            <span class="vw-logo__w__leg-r"></span>
                        </span>
                    </div>

                    <div class="headlight">
                        <div class="headlight--off">
                            <div class="headlight--off__star"></div>
                        </div>
                    </div>
                    <div class="headlight headlight--right">
                        <div class="headlight--off headlight--on--right">
                            <div class="headlight--off__star"></div>
                        </div>
                    </div>

                    <div class="bumper">
                        <div class="bumper-top"></div>
                        <div class="bumper-straight bs-middle"></div>
                        <div class="bumper-curve bc-1"></div>
                        <div class="bumper-straight bs-1"></div>
                        <div class="bumper-curve bc-2"></div>
                        <div class="bumper-curve bc-3"></div>
                        <div class="bumper-straight bs-3"></div>
                        <div class="bumper-curve bc-4"></div>
                        <div class="bus__body--bottom above-bumper"></div>
                    </div>
                    <div class="spare-tire"></div>
                </div>

                <div class="underbody">
                    <div class="tire"></div>
                    <div class="tire tire--right"></div>
                    <div class="mid-parts">
                        <div class="mid-parts--left"></div>
                        <div class="mid-parts--middle"></div>
                        <div class="mid-parts--left mid-parts--right"></div>
                    </div>
                    <div class="under-part-1l"></div>
                    <div class="under-part-1l under-part-1r"></div>
                    <div class="under-part-2"></div>
                    <div class="shock-l"></div>
                    <div class="shock-l shock-r"></div>
                    <div class="bar-l"></div>
                    <div class="bar-l bar-r"></div>
                </div>
            </div><!-- .bus -->
        </div><!-- .col--half -->
    </div><!-- .row -->






    <div class="row">
        <div class="col--half">
            <div class="bus bus--half bus--top-orange bus--bottom-orange">
                <div class="bus-body">
                    <div class="bus__body--top roof"></div>
                    <div class="bus__body--top side-top"></div>
                    <div class="bus__body--top side-top side-top--right"></div>
                    <div class="bus__body--top gutter"></div>
                    <div class="bus__body--top gutter gutter--right"></div>
                    <div class="bus__body--top mid-top"></div>
                    <div class="bus__body--top bump"></div>

                    <div class="bus__body--bottom front"></div>
                    <div class="bus__body--bottom front-middle"></div>
                    <div class="bus__body--bottom front-middle--bottom"></div>
                    <div class="bus__body--bottom grill">
                        <div class="grill__hole"></div>
                        <div class="grill__hole grill__hole--right"></div>
                    </div>
                </div>

                <div class="campertop">
                    <div class="poptop-2"></div>
                    <div class="poptop-1"></div>
                    <div class="poptop-seal"></div>
                </div>

                <div class="mirrors">
                    <div class="mirror-l">
                        <div class="mirror-glass"></div>
                        <div class="mirror-arm"></div>
                    </div>
                    <div class="mirror-r">
                        <div class="mirror-glass"></div>
                        <div class="mirror-arm mirror-arm-r"></div>
                    </div>
                </div>

                <div class="windshield">
                    <div class="windshield-rubber"></div>
                    <div class="windshield-rubber--bottom"></div>
                    <div class="windshield-rubber--side"></div>
                    <div class="windshield-rubber--side windshield-rubber--side--right"></div>
                    <div class="windshield-top"></div>
                    <div class="windshield-bottom"></div>
                </div>

                <div class="front-parts">
                    <div class="wiper wiper-right--on">
                        <div class="wiper-blade"></div>
                        <div class="wiper-arm"></div>
                        <div class="wiper-attachment"></div>
                    </div>
                    <div class="wiper wiper-left wiper-left--on">
                        <div class="wiper-blade"></div>
                        <div class="wiper-arm"></div>
                        <div class="wiper-attachment"></div>
                    </div>

                    <div class="directional">
                        <div class="directional--off"></div>
                    </div>
                    <div class="directional directional--right">
                        <div class="directional--off"></div>
                    </div>

                    <div class="vw-logo vw-logo--shadow">
                        <span class="vw-logo__v"></span>
                        <span class="vw-logo__w">
                            <span class="vw-logo__w__leg-l"></span>
                            <span class="vw-logo__w__leg-r"></span>
                        </span>
                    </div>
                    <div class="vw-logo">
                        <span class="vw-logo__v"></span>
                        <span class="vw-logo__w">
                            <span class="vw-logo__w__leg-l"></span>
                            <span class="vw-logo__w__leg-r"></span>
                        </span>
                    </div>

                    <div class="headlight">
                        <div class="headlight--on">
                            <div class="headlight--on__star"></div>
                        </div>
                    </div>
                    <div class="headlight headlight--right">
                        <div class="headlight--on headlight--on--right">
                            <div class="headlight--on__star"></div>
                        </div>
                    </div>

                    <div class="bumper">
                        <div class="bumper-top"></div>
                        <div class="bumper-straight bs-middle"></div>
                        <div class="bumper-curve bc-1"></div>
                        <div class="bumper-straight bs-1"></div>
                        <div class="bumper-curve bc-2"></div>
                        <div class="bumper-curve bc-3"></div>
                        <div class="bumper-straight bs-3"></div>
                        <div class="bumper-curve bc-4"></div>
                        <div class="bus__body--bottom above-bumper"></div>
                    </div>
                </div>

                <div class="underbody">
                    <div class="tire"></div>
                    <div class="tire tire--right"></div>
                    <div class="mid-parts">
                        <div class="mid-parts--left"></div>
                        <div class="mid-parts--middle"></div>
                        <div class="mid-parts--left mid-parts--right"></div>
                    </div>
                    <div class="under-part-1l"></div>
                    <div class="under-part-1l under-part-1r"></div>
                    <div class="under-part-2"></div>
                    <div class="shock-l"></div>
                    <div class="shock-l shock-r"></div>
                    <div class="bar-l"></div>
                    <div class="bar-l bar-r"></div>
                </div>
            </div><!-- .bus -->
        </div><!-- .col--half -->
        <div class="col--half">
            <div class="bus bus--half bus--top-tan bus--bottom-tan">
                <div class="bus-body">
                    <div class="bus__body--top roof"></div>
                    <div class="bus__body--top side-top"></div>
                    <div class="bus__body--top side-top side-top--right"></div>
                    <div class="bus__body--top gutter"></div>
                    <div class="bus__body--top gutter gutter--right"></div>
                    <div class="bus__body--top mid-top"></div>
                    <div class="bus__body--top bump"></div>

                    <div class="bus__body--bottom front"></div>
                    <div class="bus__body--bottom front-middle"></div>
                    <div class="bus__body--bottom front-middle--bottom"></div>
                    <div class="bus__body--bottom grill">
                        <div class="grill__hole"></div>
                        <div class="grill__hole grill__hole--right"></div>
                    </div>
                </div>

                <div class="campertop">
                    <div class="poptop-2"></div>
                    <div class="poptop-1"></div>
                    <div class="poptop-seal"></div>
                </div>

                <div class="mirrors">
                    <div class="mirror-l">
                        <div class="mirror-glass"></div>
                        <div class="mirror-arm"></div>
                    </div>
                    <div class="mirror-r">
                        <div class="mirror-glass"></div>
                        <div class="mirror-arm mirror-arm-r"></div>
                    </div>
                </div>

                <div class="windshield">
                    <div class="windshield-rubber"></div>
                    <div class="windshield-rubber--bottom"></div>
                    <div class="windshield-rubber--side"></div>
                    <div class="windshield-rubber--side windshield-rubber--side--right"></div>
                    <div class="windshield-top"></div>
                    <div class="windshield-bottom"></div>
                </div>

                <div class="front-parts">
                    <div class="wiper wiper-right--on">
                        <div class="wiper-blade"></div>
                        <div class="wiper-arm"></div>
                        <div class="wiper-attachment"></div>
                    </div>
                    <div class="wiper wiper-left wiper-left--on">
                        <div class="wiper-blade"></div>
                        <div class="wiper-arm"></div>
                        <div class="wiper-attachment"></div>
                    </div>

                    <div class="directional">
                        <div class="directional--off"></div>
                    </div>
                    <div class="directional directional--right">
                        <div class="directional--off"></div>
                    </div>

                    <div class="vw-logo vw-logo--shadow">
                        <span class="vw-logo__v"></span>
                        <span class="vw-logo__w">
                            <span class="vw-logo__w__leg-l"></span>
                            <span class="vw-logo__w__leg-r"></span>
                        </span>
                    </div>
                    <div class="vw-logo">
                        <span class="vw-logo__v"></span>
                        <span class="vw-logo__w">
                            <span class="vw-logo__w__leg-l"></span>
                            <span class="vw-logo__w__leg-r"></span>
                        </span>
                    </div>

                    <div class="headlight">
                        <div class="headlight--on">
                            <div class="headlight--on__star"></div>
                        </div>
                    </div>
                    <div class="headlight headlight--right">
                        <div class="headlight--on headlight--on--right">
                            <div class="headlight--on__star"></div>
                        </div>
                    </div>

                    <div class="bumper">
                        <div class="bumper-top"></div>
                        <div class="bumper-straight bs-middle"></div>
                        <div class="bumper-curve bc-1"></div>
                        <div class="bumper-straight bs-1"></div>
                        <div class="bumper-curve bc-2"></div>
                        <div class="bumper-curve bc-3"></div>
                        <div class="bumper-straight bs-3"></div>
                        <div class="bumper-curve bc-4"></div>
                        <div class="bus__body--bottom above-bumper"></div>
                    </div>
                </div>

                <div class="underbody">
                    <div class="tire"></div>
                    <div class="tire tire--right"></div>
                    <div class="mid-parts">
                        <div class="mid-parts--left"></div>
                        <div class="mid-parts--middle"></div>
                        <div class="mid-parts--left mid-parts--right"></div>
                    </div>
                    <div class="under-part-1l"></div>
                    <div class="under-part-1l under-part-1r"></div>
                    <div class="under-part-2"></div>
                    <div class="shock-l"></div>
                    <div class="shock-l shock-r"></div>
                    <div class="bar-l"></div>
                    <div class="bar-l bar-r"></div>
                </div>
            </div><!-- .bus -->
        </div><!-- .col--half -->
    </div><!-- .row -->





    <div class="bus bus--full bus--top-white bus--bottom-blue">
        <div class="bus-body">
            <div class="bus__body--top roof"></div>
            <div class="bus__body--top side-top"></div>
            <div class="bus__body--top side-top side-top--right"></div>
            <div class="bus__body--top gutter"></div>
            <div class="bus__body--top gutter gutter--right"></div>
            <div class="bus__body--top mid-top"></div>
            <div class="bus__body--top bump"></div>

            <div class="bus__body--bottom front"></div>
            <div class="bus__body--bottom front-middle"></div>
            <div class="bus__body--bottom front-middle--bottom"></div>
            <div class="bus__body--bottom grill">
                <div class="grill__hole"></div>
                <div class="grill__hole grill__hole--right"></div>
            </div>
        </div>

        <div class="mirrors">
            <div class="mirror-l">
                <div class="mirror-glass"></div>
                <div class="mirror-arm"></div>
            </div>
            <div class="mirror-r">
                <div class="mirror-glass"></div>
                <div class="mirror-arm mirror-arm-r"></div>
            </div>
        </div>

        <div class="windshield">
            <div class="windshield-rubber"></div>
            <div class="windshield-rubber--bottom"></div>
            <div class="windshield-rubber--side"></div>
            <div class="windshield-rubber--side windshield-rubber--side--right"></div>
            <div class="windshield-top"></div>
            <div class="windshield-bottom"></div>
        </div>

        <div class="front-parts">
            <div class="wiper wiper-right--on">
                <div class="wiper-blade"></div>
                <div class="wiper-arm"></div>
                <div class="wiper-attachment"></div>
            </div>
            <div class="wiper wiper-left wiper-left--on">
                <div class="wiper-blade"></div>
                <div class="wiper-arm"></div>
                <div class="wiper-attachment"></div>
            </div>

            <div class="directional">
                <div class="directional--on"></div>
            </div>
            <div class="directional directional--right">
                <div class="directional--on"></div>
            </div>

            <div class="vw-logo vw-logo--shadow">
                <span class="vw-logo__v"></span>
                <span class="vw-logo__w">
                    <span class="vw-logo__w__leg-l"></span>
                    <span class="vw-logo__w__leg-r"></span>
                </span>
            </div>
            <div class="vw-logo">
                <span class="vw-logo__v"></span>
                <span class="vw-logo__w">
                    <span class="vw-logo__w__leg-l"></span>
                    <span class="vw-logo__w__leg-r"></span>
                </span>
            </div>

            <div class="headlight">
                <div class="headlight--on">
                    <div class="headlight--on__star"></div>
                </div>
            </div>
            <div class="headlight headlight--right">
                <div class="headlight--on headlight--on--right">
                    <div class="headlight--on__star"></div>
                </div>
            </div>

            <div class="bumper">
                <div class="bumper-top"></div>
                <div class="bumper-straight bs-middle"></div>
                <div class="bumper-curve bc-1"></div>
                <div class="bumper-straight bs-1"></div>
                <div class="bumper-curve bc-2"></div>
                <div class="bumper-curve bc-3"></div>
                <div class="bumper-straight bs-3"></div>
                <div class="bumper-curve bc-4"></div>
                <div class="bus__body--bottom above-bumper"></div>
            </div>
        </div>

        <div class="underbody">
            <div class="tire"></div>
            <div class="tire tire--right"></div>
            <div class="mid-parts">
                <div class="mid-parts--left"></div>
                <div class="mid-parts--middle"></div>
                <div class="mid-parts--left mid-parts--right"></div>
            </div>
            <div class="under-part-1l"></div>
            <div class="under-part-1l under-part-1r"></div>
            <div class="under-part-2"></div>
            <div class="shock-l"></div>
            <div class="shock-l shock-r"></div>
            <div class="bar-l"></div>
            <div class="bar-l bar-r"></div>
        </div>
    </div><!-- .bus -->







    <div class="bus bus--full bus--top-white bus--bottom-love">
        <div class="bus-body">
            <div class="bus__body--top roof"></div>
            <div class="bus__body--top side-top"></div>
            <div class="bus__body--top side-top side-top--right"></div>
            <div class="bus__body--top gutter"></div>
            <div class="bus__body--top gutter gutter--right"></div>
            <div class="bus__body--top mid-top"></div>
            <div class="bus__body--top bump"></div>

            <div class="bus__body--bottom front"></div>

                <div class="bus-headlight-circle bus-headlight-circle--1"></div>
                <div class="bus-headlight-circle bus-headlight-circle--2"></div>

                <div class="bus-blinker-circle bus-blinker-circle--1"></div>
                <div class="bus-blinker-circle bus-blinker-circle--2"></div>

                <div class="bus-flower bus-flower--1"></div>
                <div class="bus-flower bus-flower--2"></div>
                <div class="bus-flower bus-flower--3"></div>
                <div class="bus-flower bus-flower--4"></div>
                <div class="bus-flower bus-flower--5"></div>
                <div class="bus-flower bus-flower--6"></div>

                <div class="bus-shape-a bus-shape-a--1"></div>
                <div class="bus-shape-a bus-shape-a--2"></div>
                <div class="bus-shape-a bus-shape-a--3"></div>
                <div class="bus-shape-a bus-shape-a--4"></div>
                <div class="bus-shape-a bus-shape-a--5"></div>
                <div class="bus-shape-a bus-shape-a--6"></div>
                <div class="bus-shape-a bus-shape-a--7"></div>
                <div class="bus-shape-a bus-shape-a--8"></div>
                <div class="bus-shape-a bus-shape-a--9"></div>
                <div class="bus-shape-a bus-shape-a--10"></div>
                <div class="bus-shape-a bus-shape-a--11"></div>

                <div class="bus-flower-big bus-flower-big--8"></div>
                <div class="bus-flower-big bus-flower-big--7"></div>
                <div class="bus-flower-big bus-flower-big--6"></div>
                <div class="bus-flower-big bus-flower-big--5"></div>
                <div class="bus-flower-big bus-flower-big--4"></div>
                <div class="bus-flower-big bus-flower-big--3"></div>
                <div class="bus-flower-big bus-flower-big--2"></div>
                <div class="bus-flower-big bus-flower-big--1"></div>

            <div class="bus__body--bottomx front-middle"></div>
            <div class="bus__body--bottomx front-middle--bottom"></div>
            <div class="bus__body--bottomx grill">
                <div class="grill__hole"></div>
                <div class="grill__hole grill__hole--right"></div>
            </div>
        </div>

        <div class="mirrors">
            <div class="mirror-l">
                <div class="mirror-glass"></div>
                <div class="mirror-arm"></div>
            </div>
            <div class="mirror-r">
                <div class="mirror-glass"></div>
                <div class="mirror-arm mirror-arm-r"></div>
            </div>
        </div>

        <div class="windshield">
            <div class="windshield-rubber"></div>
            <div class="windshield-rubber--bottom"></div>
            <div class="windshield-rubber--side"></div>
            <div class="windshield-rubber--side windshield-rubber--side--right"></div>
            <div class="windshield-top"></div>
            <div class="windshield-bottom"></div>
        </div>

        <div class="front-parts">
            <div class="wiper">
                <div class="wiper-blade"></div>
                <div class="wiper-arm"></div>
                <div class="wiper-attachment"></div>
            </div>
            <div class="wiper wiper-left">
                <div class="wiper-blade"></div>
                <div class="wiper-arm"></div>
                <div class="wiper-attachment"></div>
            </div>

            <div class="directional">
                <div class="directional--off"></div>
            </div>
            <div class="directional directional--right">
                <div class="directional--off"></div>
            </div>

            <div class="vw-logo vw-logo--shadow">
                <span class="vw-logo__v"></span>
                <span class="vw-logo__w">
                    <span class="vw-logo__w__leg-l"></span>
                    <span class="vw-logo__w__leg-r"></span>
                </span>
            </div>
            <div class="vw-logo">
                <span class="vw-logo__v"></span>
                <span class="vw-logo__w">
                    <span class="vw-logo__w__leg-l"></span>
                    <span class="vw-logo__w__leg-r"></span>
                </span>
            </div>

            <div class="headlight">
                <div class="headlight--off">
                    <div class="headlight--off__star"></div>
                </div>
            </div>
            <div class="headlight headlight--right">
                <div class="headlight--off headlight--on--right">
                    <div class="headlight--off__star"></div>
                </div>
            </div>

            <div class="bumper">
                <div class="bumper-top"></div>
                <div class="bumper-straight bs-middle"></div>
                <div class="bumper-curve bc-1"></div>
                <div class="bumper-straight bs-1"></div>
                <div class="bumper-curve bc-2"></div>
                <div class="bumper-curve bc-3"></div>
                <div class="bumper-straight bs-3"></div>
                <div class="bumper-curve bc-4"></div>
                <div class="bus__body--bottom above-bumper"></div>
            </div>
        </div>

        <div class="underbody">
            <div class="tire"></div>
            <div class="tire tire--right"></div>
            <div class="mid-parts">
                <div class="mid-parts--left"></div>
                <div class="mid-parts--middle"></div>
                <div class="mid-parts--left mid-parts--right"></div>
            </div>
            <div class="under-part-1l"></div>
            <div class="under-part-1l under-part-1r"></div>
            <div class="under-part-2"></div>
            <div class="shock-l"></div>
            <div class="shock-l shock-r"></div>
            <div class="bar-l"></div>
            <div class="bar-l bar-r"></div>
        </div>
    </div><!-- .bus -->

</div><!-- .wrapper -->
              
            
!

CSS

              
                
* {
    border: 0;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

.wrapper {
    background: #f4f2eb;
    background-color: #afc7c5;
    color: #555;
    font-size: 125%; /* 20px */
    padding-bottom: 6em;
}

.row:after {
    content: "";
    display: block;
    clear: both;
}

.col--half {
    float: left;
    vertical-align: top;
    width: 50%;
}

.col--third {
    float: left;
    vertical-align: top;
    width: 33.3%;
}




/* ==========================================
   Bus
   ========================================== */
.bus {
    background: transparent;
    /* Font size set to 5em so that 0.01em = 1px */
    font-size: 5em;
    height: 10em;
    margin:1em auto;
    position: relative;
    width: 10em;
}

.bus--first { margin-top: 0; }
.bus--full  { font-size: 7vw; }
.bus--half  { font-size: 4vw; }
.bus--third { font-size: 3vw; }

.bus * {
    position: absolute;
}




/* ==========================================
   Body
   ========================================== */
.bus-body {
    height: 100%;
    width: 100%;
    z-index: 20;
}

.bus__body--top {
    background: #a9a4a2;
    position: absolute;
}

.bus__body--bottom {
    background: #a9a4a2;
    position: absolute;
}

/* Colors */
.bus--top-green .bus__body--top,
.bus--bottom-green .bus__body--bottom    { background: #82a53d; }
.bus--top-orange .bus__body--top,
.bus--bottom-orange .bus__body--bottom   { background: #ee6615; }
.bus--top-yellow .bus__body--top,
.bus--bottom-yellow .bus__body--bottom   { background: #f7c125; }
.bus--top-red .bus__body--top,
.bus--bottom-red .bus__body--bottom      { background: #bb211a; }
.bus--top-blue .bus__body--top,
.bus--bottom-blue .bus__body--bottom     { background: #1f77b5; }
.bus--top-tan .bus__body--top,
.bus--bottom-tan .bus__body--bottom      { background: #c5b889; }
.bus--top-white .bus__body--top,
.bus--bottom-white .bus__body--bottom    { background: #e3e2d8; }
.bus--top-brown .bus__body--top,
.bus--bottom-brown .bus__body--bottom    { background: #684d43; }


.roof {
    border-radius: 50% 50% 0 0 / 60% 60% 0 0;
    height: 1.4em;
    left: 1.76em;
    width: 6.48em;
    top: 1em;
}

.side-top {
    border-radius: 46% 46% 0 0 / 60% 60% 0 0;
    height: 2.24em;
    left: 1.31em;
    top: 1.67em;
    transform: rotate(11deg);
    width: 0.8em;
}

.side-top--right {
    left: auto;
    right: 1.31em;
    transform: rotate(-11deg);
}

.gutter {
    border-top-left-radius: 0.06em;
    height: 0.12em;
    left: 1.72em;
    top: 1.63em;
    transform: rotate(-45deg);
    width: 0.08em;
}

.gutter--right {
    border-top-left-radius: 0;
    border-top-right-radius: 0.06em;
    left: auto;
    right: 1.72em;
    transform: rotate(45deg);
}

.mid-top {
    height: 2em;
    left: 1.7em;
    top: 2em;
    width: 6.6em;
}

.bump {
    border-radius: 1.5% 1.5% 1.5% 1.5% / 50% 50% 50% 50%;
    box-shadow: inset 0 -0.18em 0 0 rgba(0, 0, 0, 0.15),
                inset 0 0.18em 0 0 rgba(255, 255, 255, 0.2);
    height: 0.36em;
    left: 1.08em;
    top: 3.83em;
    width: 7.84em;
    z-index: 20;
}

.front {
    border-radius: 2.5% 2.5% 3.5% 3.5% / 70% 70% 30% 30%;
    height: 4em;
    left: 1em;
    top: 4.1em;
    width: 8em;
}

.front-middle {
    border-radius: 20% 20% 0 0 / 100% 100% 0 0;
    box-shadow: 0 -0.04em 0 0 rgba(255, 255, 255, 0.2);
    left: 1.6em;
    height: 0.24em;
    top: 4.33em;
    width: 6.8em;
}

.front-middle--bottom {
    border-radius: 0 0 0.9em 0.9em;
    box-shadow: 0 0.04em 0 0 rgba(0, 0, 0, 0.15);
    left: 1.5em;
    height: 1em;
    top: 6.1em;
    width: 7em;
}

.grill {
    border-radius: 0.06em;
    box-shadow: inset 0 -0.03em 0 0 rgba(0, 0, 0, 0.15),
                inset 0 0.03em 0 0 rgba(255, 255, 255, 0.2),
                0 -0.03em 0 0 rgba(0, 0, 0, 0.15),
                0 0.03em 0 0 rgba(255, 255, 255, 0.2);
    height: 0.6em;
    left: 2.61em;
    top: 4.51em;
    width: 4.78em;
}

.grill__hole {
    background: #333;
    border-radius: 0.02em;
    box-shadow: 0.08em 0 0 0 #333,
                0.16em 0 0 0 #333,
                0.24em 0 0 0 #333,
                0.32em 0 0 0 #333,
                0.4em 0 0 0 #333,
                0.48em 0 0 0 #333,
                0.56em 0 0 0 #333,
                0.64em 0 0 0 #333,
                0.72em 0 0 0 #333,
                0.8em 0 0 0 #333,
                0.88em 0 0 0 #333,
                0.96em 0 0 0 #333,
                1.04em 0 0 0 #333,
                1.12em 0 0 0 #333,
                1.2em 0 0 0 #333,
                1.28em 0 0 0 #333,
                1.36em 0 0 0 #333,
                1.44em 0 0 0 #333,
                1.52em 0 0 0 #333,
                1.6em 0 0 0 #333,
                1.68em 0 0 0 #333,
                1.76em 0 0 0 #333,
                1.84em 0 0 0 #333,
                1.92em 0 0 0 #333,
                2em 0 0 0 #333;
    height: 0.42em;
    left: 0.13em;
    position: absolute;
    top: 0.09em;
    width: 0.04em;
}

.grill__hole--right {
    left: 2.59em;
}




/* ==========================================
   Windshield
   ========================================== */
.windshield {
    height: 100%;
    width: 100%;
    z-index: 30;
}

.windshield-rubber {
    background: #8a97a2;
    border-radius: 50% 50% 0 0 / 34% 34% 0 0;
    border: 0.14em solid #333;
    height: 1.4em;
    left: 1.9em;
    width: 6.2em;
    top: 1.32em;
}

.windshield-rubber--bottom {
    background: #8a97a2;
    border-radius: 0.16em;
    border: 0.08em solid #333;
    height: 0.32em;
    left: 1.28em;
    width: 7.44em;
    top: 3.51em;
}

.windshield-rubber--side {
    background: #8a97a2;
    border-radius: 50% 50% 60% 13% / 60% 60% 20% 5%;
    border: 0.12em solid #333;
    height: 2.18em;
    left: 1.46em;
    top: 1.65em;
    transform: rotate(11deg);
    width: 0.8em;
}

.windshield-rubber--side--right {
    border-radius: 50% 50% 13% 60% / 60% 60% 5% 20%;
    left: auto;
    right: 1.46em;
    transform: rotate(-11deg);
}

.windshield-top {
    background: #8a97a2;
    border-radius: 0.4em;
    height: 2em;
    left: 1.86em;
    width: 6.28em;
    top: 1.68em;
}

.windshield-bottom {
    background: #8a97a2;
    border-radius: 0.4em;
    height: 0.2em;
    left: 1.4em;
    width: 7.2em;
    top: 3.55em;
}

.windshield-bottom:after {
    background: #8a97a2;
    content: '';
    height: 0.3em;
    left: 0.2em;
    position: absolute;
    width: 6.8em;
    top: -0.2em;
}




/* ==========================================
   Front Parts
   ========================================== */
.front-parts {
    height: 100%;
    width: 100%;
    z-index: 40;
}


/* Wipers
   ========================================== */
.wiper {
    height: 0.78em;
    left: 4.86em;
    top: 3.24em;
    transform-origin: 97% 100%;
    transition: transform 1s ease-in-out;
    width: 2.4em;
}

.wiper-arm {
    background: #333;
    bottom: 0.42em;
    height: 0.05em;
    right: 0em;
    transform: rotate(26deg);
    width: 1.3em;
}

.wiper-arm:after {
    background: #333;
    border-radius: 0.03em;
    content: '';
    height: 0.05em;
    position: absolute;
    top: -0.02em;
    transform: rotate(-2deg);
    width: 1.3em;
}

.wiper-arm:before {
    background: #333;
    border-radius: 0.04em;
    content: '';
    height: 0.08em;
    position: absolute;
    right: 0em;
    top: 0em;
    transform: rotate(6deg);
    width: 0.6em;
}

.wiper-attachment {
    background: #333;
    border-radius: 0.06em;
    bottom: 0.06em;
    height: 0.12em;
    right: 0em;
    transform: rotate(20deg);
    width: 0.14em;
}

.wiper-attachment:after {
    background: #333;
    border-radius: 0.04em;
    content: '';
    height: 0.12em;
    left: 0.02em;
    position: absolute;
    top: 0.06em;
    width: 0.10em;
}

.wiper-blade {
    background: #333;
    height: 0.04em;
    left: 0em;
    top: 0.12em;
    transform: rotate(2deg);
    width: 2.04em;
}

.wiper-blade:after {
    background: transparent;
    border-radius: 50% 50% 0 0 / 100% 100% 0 0;
    box-shadow: inset 0 0.03em 0 0 #333;
    content: '';
    height: 0.14em;
    left: 0.26em;
    position: absolute;
    top: -0.1em;
    width: 1.5em;
}

.wiper-blade:before {
    background: #333;
    border-radius: 50% 50% 0 0 / 100% 100% 0 0;
    box-shadow: 0.8em -0.08em 0 0 #333;
    content: '';
    height: 0.06em;
    left: 0.16em;
    position: absolute;
    top: -0.04em;
    width: 0.4em;
}


.wiper-left {
    left: 1.92em;
    transform: rotate(-6deg);
}

.wiper-right--on {
    animation-name: wiper-wiping-right;
    animation-duration: 2s;
    animation-iteration-count: infinite;
}

@keyframes wiper-wiping-right {
    0%   {
        transform: rotate(0deg);
    }
    50%  {
        transform: rotate(90deg);
    }
    100% {
        transform: rotate(0deg);
    }
}

.wiper-left--on {
    animation-name: wiper-wiping-left;
    animation-duration: 2s;
    animation-iteration-count: infinite;
    transform-origin: 98% 95%;
}

@keyframes wiper-wiping-left {
    0%   {
        transform: rotate(-6deg);
    }
    50%  {
        transform: rotate(84deg);
    }
    100% {
        transform: rotate(-6deg);
    }
}


/* Logo
   ========================================== */
.vw-logo {
    border: 0.08em solid #f3e5c0;
    border-radius: 50%;
    left: 4.52em;
    height: 0.96em;
    position: absolute;
    top: 5.68em;
    width: 0.96em;
}

.vw-logo__v {
    background: #f3e5c0;
    display: block;
    height: 0.10em;
    left: 0.35em;
    position: absolute;
    top: 0.29em;
    width: 0.10em;
}

.vw-logo__v:after,
.vw-logo__v:before {
    background: #f3e5c0;
    content: '';
    height: 0.4em;
    left: -0.08em;
    position: absolute;
    top: -0.3em;
    transform: rotate(-24deg);
    width: 0.08em;
}

.vw-logo__v:before {
    left: 0.1em;
    transform: rotate(24deg);
}

.vw-logo__w {
    background: #f3e5c0;
    display: block;
    height: 0.10em;
    left: 0.35em;
    position: absolute;
    top: 0.41em;
    width: 0.10em;
}

.vw-logo__w:after,
.vw-logo__w:before {
    background: #f3e5c0;
    content: '';
    height: 0.4em;
    left: -0.08em;
    position: absolute;
    top: 0;
    transform: rotate(24deg);
    width: 0.08em;
}

.vw-logo__w:before {
    left: 0.1em;
    transform: rotate(-24deg);
}

.vw-logo__w__leg-l,
.vw-logo__w__leg-r  {
    background: #f3e5c0;
    display: block;
    height: 0.6em;
    left: -0.26em;
    position: absolute;
    top: -0.24em;
    transform: rotate(-24deg);
    width: 0.08em;
}

.vw-logo__w__leg-r {
    left: 0.29em;
    transform: rotate(24deg);
}

.vw-logo--shadow {
    border-color: rgba(0, 0, 0, 0.15);
    top: 5.72em;
}

.vw-logo--shadow .vw-logo__v {
    background: rgba(0, 0, 0, 0.15);
}

.vw-logo--shadow .vw-logo__v:after,
.vw-logo--shadow .vw-logo__v:before {
    background: rgba(0, 0, 0, 0.15);
}

.vw-logo--shadow .vw-logo__w {
    background: rgba(0, 0, 0, 0.15);
}

.vw-logo--shadow .vw-logo__w:after,
.vw-logo--shadow .vw-logo__w:before {
    background: rgba(0, 0, 0, 0.15);
}

.vw-logo--shadow .vw-logo__w__leg-l,
.vw-logo--shadow .vw-logo__w__leg-r  {
    background: rgba(0, 0, 0, 0.15);
}




/* Lights
   ========================================== */
.directional {
    background: radial-gradient(at bottom right, #f46b0e 58%, #dd5900 59%);
    border: 0.06em solid #dd5900;
    border-top-color: #ec8c47;
    border-bottom-color: #bb4b00;
    border-radius: 0.06em;
    height: 0.56em;
    left: 1.89em;
    top: 4.55em;
    position: absolute;
    width: 0.68em;
}

.directional--right {
    left: auto;
    right: 1.89em;
}

.directional--on {
    animation-name: directional-blinking;
    animation-duration: 1s;
    animation-iteration-count: infinite;
    background: #ffbc00;
    background: radial-gradient(#ffe7a5, #ffbc00 65%, #ff9c00);
    border-radius: 0.06em;
    box-shadow: 0 0 1em #ffbc00;
    height: 0.56em;
    left: -0.06em;
    position: relative;
    top: -0.06em;
    width: 0.68em;
}

@keyframes directional-blinking {
    0%   { opacity: 1; }
    20%  { opacity: 0; }
    50%  { opacity: 0; }
    70%  { opacity: 1; }
}

.headlight {
    background: #eee;
    background: linear-gradient(to bottom, #eee 50% , #555 50%);
    border-radius: 50%;
    box-shadow: 0 -0.12em 0 0 rgba(0, 0, 0, 0.15),
                0 0.12em 0 0 rgba(255, 255, 255, 0.2);
    height: 1.14em;
    left: 1.64em;
    position: absolute;
    top: 5.66em;
    width: 1.14em;
}

.headlight:after {
    background: #eee;
    background: linear-gradient(to bottom, #aaa 50% , #eee 50%);
    border-radius: 50%;
    content: '';
    height: 0.94em;
    left: 0.12em;
    position: absolute;
    top: 0.1em;
    width: 0.94em;
    z-index: 2;
}

.headlight:before {
    border-radius: 50%;
    box-shadow: inset 0 0.08em 0 0 #ddd,
                0 0.08em 0 0 #ccc;
    content: '';
    height: 0.7em;
    left: 0.24em;
    position: absolute;
    top: 0.18em;
    width: 0.7em;
    z-index: 3;
}

.headlight--right {
    left: auto;
    right: 1.64em;
}

.headlight--right:after {
    left: 0.08em;
}

.headlight--right:before {
    left: 0.2em;
}

.headlight--on {
    animation-name: headlight-blinking;
    animation-duration: 6s;
    animation-iteration-count: infinite;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 0 1.5em 0.8em #fff;
    height: 0.94em;
    left: 0.12em;
    position: relative;
    top: 0.1em;
    width: 0.94em;
    z-index: 4;
}

.headlight--on:before {
    background: rgba(255, 255, 255, 0.15);
    border-radius: 50%;
    box-shadow: inset 0 0 0.1em 0.02em rgba(255, 255, 255, 0.3),
                0 0 0.1em 0.02em rgba(255, 255, 255, 0.3);
    content: '';
    height: 0.5em;
    left: -0.3em;
    position: absolute;
    top: -0.2em;
    width: 0.5em;
    z-index: 5;
}

.headlight--on:after {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    box-shadow: inset 0 0 0.1em 0.02em rgba(255, 255, 255, 0.3),
                0 0 0.1em 0.02em rgba(255, 255, 255, 0.3);
    content: '';
    height: 0.3em;
    left: 1em;
    position: absolute;
    top: 1em;
    width: 0.3em;
    z-index: 5;
}

.headlight--on--right {
    left: 0.08em;
}

.headlight--on__star {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 30%;
    height: 3em;
    left: 0.46em;
    position: absolute;
    top: -1.03em;
    width: 0.05em;
    z-index: 5;
}

.headlight--on__star:before {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 30%;
    content: '';
    height: 3em;
    position: absolute;
    transform: rotate(45deg);
    width: 0.05em;
    z-index: 5;
}

.headlight--on__star:after {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 30%;
    content: '';
    height: 3em;
    position: absolute;
    transform: rotate(-45deg);
    width: 0.05em;
    z-index: 5;
}

@keyframes headlight-blinking {
    0%   { opacity: 1; }
    45%  { opacity: 1; }
    55%  { opacity: 0; }
    95%  { opacity: 0; }
    100%  { opacity: 1; }
}


/* Bumper
   ========================================== */
.bumper {
    height: 0.8em;
    left: 0.98em;
    top: 7.73em;
    width: 8.04em;
}

.bumper-curve {
    background: #ded9d1;
    border-radius: 0 0 50% 50% / 0 0 100% 100%;
    height: 0.16em;
    left: 0;
    width: 8.04em;
}

.bc-1 {
    border-bottom: 0.04em solid rgba(0,0,0,0.3);
    top: 0.63em;
}

.bc-2 {
    box-shadow: inset 0 -0.04em 0 0 #fff;
    top: 0.47em;
}

.bc-3 {
    border-bottom: 0.04em solid rgba(0,0,0,0.3);
    top: 0.19em;
}

.bc-4 {
    background: #fff;
    top: 0.03em;
}

.bumper-straight {
    background: #ded9d1;
    height: 0.16em;
    left: 0;
    width: 8.04em;
}

.bs-1 {
    top: 0.47em;
}

.bs-middle {
    height: 0.32em;
    left: 0.04em;
    top: 0.19em;
    width: 7.96em;
}

.bs-3 {
    top: 0.03em;
}

.bumper-top {
    background: #fff;
    border-radius: 0.06em;
    height: 0.06em;
    width: 8.04em;
}

.above-bumper {
    border-radius: 0 0 50% 50% / 0 0 100% 100%;
    height: 0.1em;
    left: 0.22em;
    top: -0.02em;
    width: 7.6em;
}


/* Spare Tire
   ========================================== */
.spare-tire {
    background: #ded9d1;
    background: linear-gradient(to bottom, #fff 50% , #cac4bb 50%);
    border-radius: 50%;
    box-shadow: 0 0.16em 0 0 rgba(0, 0, 0, 0.15);
    height: 3.6em;
    left: 3.2em;
    top: 4.1em;
    width: 3.6em;
}

.spare-tire:after {
    background: #ded9d1;
    border-radius: 50%;
    content: '';
    height: 2.86em;
    left: 0.37em;
    position: absolute;
    top: 0.37em;
    width: 2.86em;
}




/* ==========================================
   Mirrors
   ========================================== */
.mirrors {
    height: 100%;
    width: 100%;
    z-index: 10;
}

.mirror-glass {
    background: #666;
    height: 0.62em;
    border-radius: 50% 50% 50% 50% / 10% 10% 10% 10%;
    left: 0.44em;
    top: 3.26em;
    width: 0.56em;
}

.mirror-glass:after {
    background: radial-gradient(at left, #bbb 59%, #666 60%);
    box-shadow: inset 0.04em 0 0 0 #666;
    box-sizing: border-box;
    content: '';
    height: 0.5em;
    left: -0.05em;
    border-radius: 10% 10% 10% 10% / 50% 50% 50% 50%;
    position: absolute;
    top: 10%;
    width: 0.66em;
}

.mirror-arm {
    background: transparent;
    box-shadow: 0.04em -0.04em 0 0 #666,
                0.08em -0.08em 0 0 #ddd;
    height: 0.2em;
    border-radius: 0 20% 0 0 / 0 50% 0 0;
    left: 0.52em;
    top: 3.7em;
    transform: rotate(35deg);
    width: 0.6em;
}

.mirror-arm:after,
.mirror-arm:before {
    background: linear-gradient(to bottom, #ddd 50% , #666 50%);
    border-radius: 50%;
    content: '';
    height: 0.14em;
    left: 0.02em;
    position: absolute;
    top: -0.1em;
    width: 0.14em;
}

.mirror-arm:before {
    background: #666;
    left: 0.58em;
    top: 0.03em;
}

.mirror-r {
    height: 100%;
    width: 100%;
    z-index: 10;
}

.mirror-r .mirror-glass {
    left: auto;
    right: 0.44em;
}

.mirror-r .mirror-glass:after {
    background: radial-gradient(at right, #bbb 59%, #666 60%);
    box-shadow: inset -0.04em 0 0 0 #666;
    left: -0.05em;
}

.mirror-arm-r {
    box-shadow: -0.04em -0.04em 0 0 #666,
                -0.08em -0.08em 0 0 #ddd;
    border-radius: 20% 0 0 0 / 50% 0 0 0;
    left: auto;
    right: 0.52em;
    transform: rotate(-35deg);
}

.mirror-arm-r:after,
.mirror-arm-r:before {
    background: linear-gradient(to bottom, #ddd 50% , #666 50%);
    border-radius: 50%;
    content: '';
    height: 0.14em;
    left: auto;
    right: 0.02em;
    position: absolute;
    top: -0.1em;
    width: 0.14em;
}

.mirror-arm-r:before {
    background: #666;
    left: auto;
    right: 0.58em;
    top: 0.03em;
}




/* ==========================================
   Camper Top
   ========================================== */
.campertop {
    height: 100%;
    width: 100%;
    z-index: 35;
}

.poptop-2 {
    background: transparent;
    border-radius: 50% 50% 0 0 / 50% 50% 0 0;
    box-shadow: 0 -0.36em 0 0 #ded9d1,
                0 -0.38em 0 0 #fff;
    height: 0.7em;
    left: 2.05em;
    top: 0.84em;
    width: 5.9em;
}

.poptop-2:after,
.poptop-2:before {
    background: #ded9d1;
    border-radius: 0.06em;
    content: '';
    height: 0.46em;
    left: -0.04em;
    position: absolute;
    top: -0.06em;
    transform: rotate(14deg);
    width: 0.2em;
}

.poptop-2:before {
    left: auto;
    right: -0.04em;
    transform: rotate(-14deg);
}

.poptop-1 {
    background: transparent;
    border-radius: 50% 50% 0 0 / 50% 50% 0 0;
    box-shadow: 0 -0.36em 0 0 #ded9d1,
                0 -0.4em 0 0 #fff;
    height: 0.7em;
    left: 1.95em;
    top: 1.1em;
    width: 6.1em;
}

.poptop-1:after,
.poptop-1:before {
    background: #ded9d1;
    border-radius: 0.06em;
    content: '';
    height: 0.46em;
    left: -0.02em;
    position: absolute;
    top: -0.08em;
    transform: rotate(10deg);
    width: 0.2em;
}

.poptop-1:before {
    left: auto;
    right: -0.02em;
    transform: rotate(-10deg);
}

.poptop-seal {
    background: transparent;
    border-radius: 50% 50% 0 0 / 68% 68% 0 0;
    box-shadow: 0 -0.1em 0 0 #333,
                0 -0.18em 0 0 #fff;
    height: 0.7em;
    left: 1.85em;
    top: 1.22em;
    width: 6.3em;
}




/* ==========================================
   Underbody
   ========================================== */
.underbody {
    height: 100%;
    width: 100%;
    z-index: 10;
}


/* Tires
   ========================================== */
.tire {
    background: #333;
    border-radius: 0 0 30% 30% / 0 0 50% 50%;
    bottom: 0.1em;
    height: 2em;
    left: 1.43em;
    width: 1em;
}

.tire--right {
    left: auto;
    right: 1.43em;
}

/* Other Parts
   ========================================== */
.mid-parts {
    height: 100%;
    width: 100%;
}

.mid-parts--left {
    background: #333;
    border-radius: 0 0 40% 40% / 0 0 20% 20%;
    height: 0.6em;
    left: 3.76em;
    top: 8.16em;
    transform: rotate(6deg);
    width: 0.8em;
}

.mid-parts--right {
    left: auto;
    right: 3.76em;
    transform: rotate(-6deg);
}

.mid-parts--middle {
    background: transparent;
    border-radius: 40% 40% 0 0 / 30% 30% 0 0;
    box-shadow: 0 -0.2em 0 0 #333;
    height: 0.4em;
    left: 4.5em;
    top: 8.62em;
    width: 1em;
}

.under-part-1l {
    background: #333;
    border-radius: 0 0 0 40% / 0 0 0 20%;
    height: 0.7em;
    left: 3.06em;
    top: 7.94em;
    transform: rotate(-10deg);
    width: 0.8em;
}

.under-part-1r {
    border-radius: 0 0 40% 0 / 0 0 20% 0;
    left: auto;
    right: 3.06em;
    transform: rotate(10deg);
}

.under-part-2 {
    background: #333;
    height: 0.4em;
    left: 2em;
    top: 8.18em;
    width: 6em;
}

.shock-l {
    background: #333;
    border-radius: 0 0 40% 40% / 0 0 20% 20%;
    height: 0.7em;
    left: 2.6em;
    top: 8.06em;
    transform: rotate(-10deg);
    width: 0.36em;
}

.shock-r {
    left: auto;
    right: 2.6em;
    transform: rotate(10deg);
}

.bar-l {
    background: #333;
    border-radius: 0 0 100% 0 / 0 0 100% 0;
    height: 0.1em;
    left: 2.3em;
    top: 8.66em;
    transform: rotate(-15deg);
    width: 0.5em;
}

.bar-r {
    border-radius: 0 0 0 100% / 0 0 0 100%;
    left: auto;
    right: 2.3em;
    transform: rotate(15deg);
}




/* ==========================================
   Love Bus
   ========================================== */

.bus--top-love .bus__body--top,
.bus--bottom-love .bus__body--bottom     {
    background: #008db0;
}

.bus-flower {
    background-color: #00394e;
    box-shadow: 0.32em -0.04em 0 0 #00394e,
                0.06em 0.28em 0 0 #00394e,
                -0.32em 0.17em 0 0 #00394e,
                -0.32em -0.24em 0 0 #00394e,
                0.06em -0.36em 0 0 #00394e;
    border-radius: 50%;
    height: 0.48em;
    width: 0.48em;
}

.bus-flower:before {
    background-color: #ff9d1e;
    box-shadow: 0.36em 0 0 0 #ffd322,
                0.1em 0.32em 0 0 #ffd322,
                -0.28em 0.21em 0 0 #ffd322,
                -0.28em -0.2em 0 0 #ffd322,
                0.10em -0.32em 0 0 #ffd322;
    box-sizing: border-box;
    border-radius: 50%;
    border: solid 0.04em #f74f31;
    content: '';
    height: 0.4em;
    width: 0.4em;
    position: absolute;
}

.bus-flower--1 { left: 1.38em; top: 6.55em; }
.bus-flower--2 { left: 2.9em; top: 5.5em; }
.bus-flower--3 { left: 3.1em; top: 6.45em; }
.bus-flower--4 { left: 6.4em; top: 5.1em; }
.bus-flower--5 { left: 6.7em; top: 6.2em; }
.bus-flower--6 { left: 8.1em; top: 6.5em; }



.bus-flower-big {
    background-color: #f74f31;
    border-radius: 10%;
    height: 1em;
    left: 4.5em;
    top: 5.67em;
    width: 1em;
}

.bus-flower-big:before,
.bus-flower-big:after {
    background-color: #f74f31;
    border-radius: 10%;
    content: '';
    height: 1em;
    position: absolute;
    transform: rotate(30deg);
    width: 1em;
}

.bus-flower-big:after {
    transform: rotate(60deg);
}

.bus-flower-big--2 {
    background-color: #00394e;
    height: 1.08em;
    left: 4.46em;
    top: 5.63em;
    width: 1.08em;
}

.bus-flower-big--2:before,
.bus-flower-big--2:after {
    background-color: #00394e;
    height: 1.08em;
    width: 1.08em;
}

.bus-flower-big--3 {
    background-color: #ff9d1e;
    height: 1.4em;
    left: 4.3em;
    top: 5.47em;
    width: 1.4em;
}

.bus-flower-big--3:before,
.bus-flower-big--3:after {
    background-color: #ff9d1e;
    height: 1.4em;
    width: 1.4em;
}

.bus-flower-big--4 {
    background-color: #00394e;
    height: 1.48em;
    left: 4.26em;
    top: 5.43em;
    width: 1.48em;
}

.bus-flower-big--4:before,
.bus-flower-big--4:after {
    background-color: #00394e;
    height: 1.48em;
    width: 1.48em;
}

.bus-flower-big--5 {
    background-color: #ffd322;
    height: 1.8em;
    left: 4.1em;
    top: 5.27em;
    width: 1.8em;
}

.bus-flower-big--5:before,
.bus-flower-big--5:after {
    background-color: #ffd322;
    height: 1.8em;
    width: 1.8em;
}

.bus-flower-big--6 {
    background-color: #00394e;
    height: 1.88em;
    left: 4.06em;
    top: 5.23em;
    width: 1.88em;
}

.bus-flower-big--6:before,
.bus-flower-big--6:after {
    background-color: #00394e;
    height: 1.88em;
    width: 1.88em;
}

.bus-flower-big--7 {
    background-color: #00c1d5;
    height: 2.2em;
    left: 3.9em;
    top: 5.07em;
    width: 2.2em;
}

.bus-flower-big--7:before,
.bus-flower-big--7:after {
    background-color: #00c1d5;
    height: 2.2em;
    width: 2.2em;
}

.bus-flower-big--8 {
    background-color: #00394e;
    height: 2.28em;
    left: 3.86em;
    top: 5.03em;
    width: 2.28em;
}

.bus-flower-big--8:before,
.bus-flower-big--8:after {
    background-color: #00394e;
    height: 2.28em;
    width: 2.28em;
}




.bus-shape-a {
    background-color: #00394e;
    border-radius: 50%;
    border: 0.05em solid #00c1d5;
    box-shadow: inset 0 0 0 0.16em #ffd322;
    height: 0.6em;
    left: 1.1em;
    overflow: hidden;
    top: 7.03em;
    width: 0.6em;
}

.bus-shape-a:before {
    background-color: #f74f31;
    border-radius: 50%;
    box-shadow: 0.28em -0.01em 0 0 #f74f31,
                0.43em 0.22em 0 0 #f74f31,
                0.30em 0.47em 0 0 #f74f31,
                0.03em 0.49em 0 0 #f74f31,
                -0.12em 0.25em 0 0 #f74f31;
    content: '';
    height: 0.26em;
    left: -0.03em;
    position: absolute;
    top: -0.11em;
    width: 0.26em;
}

.bus-shape-a:after {
    background-color: #ff9d1e;
    border-radius: 50%;
    content: '';
    height: 0.13em;
    left: 0.185em;
    position: absolute;
    top: 0.185em;
    width: 0.13em;
}

.bus-shape-a--2 { left: 1.8em; top: 7.07em; }
.bus-shape-a--3 { left: 2.5em; top: 7.09em; }
.bus-shape-a--4 { left: 3.2em; top: 7.1em; }
.bus-shape-a--5 { left: 3.9em; top: 7.1em; }
.bus-shape-a--6 { left: 4.7em; top: 7.1em; }
.bus-shape-a--7 { left: 5.5em; top: 7.1em; }
.bus-shape-a--8 { left: 6.2em; top: 7.1em; }
.bus-shape-a--9 { left: 6.9em; top: 7.09em; }
.bus-shape-a--10 { left: 7.6em; top: 7.07em; }
.bus-shape-a--11 { left: 8.3em; top: 7.03em; }




.bus-headlight-circle {
    background-color: #00c1d5;
    border-radius: 50%;
    height: 1.6em;
    left: 1.55em;
    top: 5.5em;
    width: 1.6em;
}

.bus-headlight-circle--2 {
    left: 6.85em;
    top: 5.5em;
}

.bus-blinker-circle {
    background-color: #ffd322;
    border: 0.15em solid #00c1d5;
    border-bottom-width: 0.06em;
    border-top-width: 0.06em;
    border-radius: 40% 0;
    height: 1.14em;
    left: 1.42em;
    top: 4.26em;
    transform: rotate(8deg);
    width: 1.6em;
}

.bus-blinker-circle:before {
    background-color: #ff9d1e;
    border-radius: 40% 0;
    content: '';
    height: 0.9em;
    left: 0.1em;
    position: absolute;
    top: 0.06em;
    width: 1.1em;
}

.bus-blinker-circle:after {
    background-color: #f74f31;
    border-radius: 40% 0;
    content: '';
    height: 0.78em;
    left: 0.2em;
    position: absolute;
    top: 0.12em;
    width: 0.9em;
}

.bus-blinker-circle--2 {
    border-radius: 0 40%;
    left: 6.98em;
    transform: rotate(-8deg);
}

.bus-blinker-circle--2:before {
    border-radius: 0 40%;
}

.bus-blinker-circle--2:after {
    border-radius: 0 40%;
}


              
            
!

JS

              
                
              
            
!
999px

Console