* {
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%;
}
!
