Ehe, o alta grafica care imi incanta retina intotdeauna. Mai mult imi place statia in sine decat autobuzul.
<div class="bus"> <div class="bus-layer"> <div class="bus-layer-sun"></div> </div> <div class="bus-layer"> <div class="bus-layer-half"> <div class="bus-layer-half-station-sign"> <div class="bus-layer-half-station"> <div class="bus-layer-half-station-area"> <div class="bus-layer-half-station-area-top"></div> <div class="bus-layer-half-station-area-body"> <div class="bus-layer-half-station-area-body-column"> <div class="bus-layer-half-station-area-body-column-pilon"></div> <div class="bus-layer-half-station-area-body-column-bottom"></div> </div> <div class="bus-layer-half-station-area-body-middle"> <div class="bus-layer-half-station-area-body-middle-layer"> <div class="bus-layer-half-station-area-body-middle-layer-glass"> <div class="bus-layer-half-station-area-body-middle-layer-glass-program"> <div class="bus-layer-half-station-area-body-middle-layer-glass-program-top"></div> <div class="bus-layer-half-station-area-body-middle-layer-glass-program-columns"> <div class="bus-layer-half-station-area-body-middle-layer-glass-program-column"> <div class="bus-layer-half-station-area-body-middle-layer-glass-program-column-line"></div> <div class="bus-layer-half-station-area-body-middle-layer-glass-program-column-line"></div> <div class="bus-layer-half-station-area-body-middle-layer-glass-program-column-line"></div> <div class="bus-layer-half-station-area-body-middle-layer-glass-program-column-line"></div> <div class="bus-layer-half-station-area-body-middle-layer-glass-program-column-line"></div> <div class="bus-layer-half-station-area-body-middle-layer-glass-program-column-line"></div> <div class="bus-layer-half-station-area-body-middle-layer-glass-program-column-line"></div> </div> <div class="bus-layer-half-station-area-body-middle-layer-glass-program-column"> <div class="bus-layer-half-station-area-body-middle-layer-glass-program-column-line"></div> <div class="bus-layer-half-station-area-body-middle-layer-glass-program-column-line"></div> <div class="bus-layer-half-station-area-body-middle-layer-glass-program-column-line"></div> <div class="bus-layer-half-station-area-body-middle-layer-glass-program-column-line"></div> <div class="bus-layer-half-station-area-body-middle-layer-glass-program-column-line"></div> <div class="bus-layer-half-station-area-body-middle-layer-glass-program-column-line"></div> <div class="bus-layer-half-station-area-body-middle-layer-glass-program-column-line"></div> </div> </div> </div> </div> </div> <div class="bus-layer-half-station-area-body-middle-layer"> <div class="bus-layer-half-station-area-body-middle-layer-column"> <div class="bus-layer-half-station-area-body-middle-layer-column-glasshandle"> <div class="bus-layer-half-station-area-body-middle-layer-column-glasshandle-row"> <div class="bus-layer-half-station-area-body-middle-layer-column-glasshandle-row-cell"> <div class="bus-layer-half-station-area-body-middle-layer-column-glasshandle-row-cell-dot"></div> </div> <div class="bus-layer-half-station-area-body-middle-layer-column-glasshandle-row-cell"> <div class="bus-layer-half-station-area-body-middle-layer-column-glasshandle-row-cell-dot"></div> </div> </div> <div class="bus-layer-half-station-area-body-middle-layer-column-glasshandle-row"> <div class="bus-layer-half-station-area-body-middle-layer-column-glasshandle-row-cell"> <div class="bus-layer-half-station-area-body-middle-layer-column-glasshandle-row-cell-dot"></div> </div> <div class="bus-layer-half-station-area-body-middle-layer-column-glasshandle-row-cell"> <div class="bus-layer-half-station-area-body-middle-layer-column-glasshandle-row-cell-dot"></div> </div> </div> </div> <div class="bus-layer-half-station-area-body-middle-layer-column-glasshandle"> <div class="bus-layer-half-station-area-body-middle-layer-column-glasshandle-row"> <div class="bus-layer-half-station-area-body-middle-layer-column-glasshandle-row-cell"> <div class="bus-layer-half-station-area-body-middle-layer-column-glasshandle-row-cell-dot"></div> </div> <div class="bus-layer-half-station-area-body-middle-layer-column-glasshandle-row-cell"> <div class="bus-layer-half-station-area-body-middle-layer-column-glasshandle-row-cell-dot"></div> </div> </div> <div class="bus-layer-half-station-area-body-middle-layer-column-glasshandle-row"> <div class="bus-layer-half-station-area-body-middle-layer-column-glasshandle-row-cell"> <div class="bus-layer-half-station-area-body-middle-layer-column-glasshandle-row-cell-dot"></div> </div> <div class="bus-layer-half-station-area-body-middle-layer-column-glasshandle-row-cell"> <div class="bus-layer-half-station-area-body-middle-layer-column-glasshandle-row-cell-dot"></div> </div> </div> </div> <div class="bus-layer-half-station-area-body-middle-layer-column-glasshandle"> <div class="bus-layer-half-station-area-body-middle-layer-column-glasshandle-row"> <div class="bus-layer-half-station-area-body-middle-layer-column-glasshandle-row-cell"> <div class="bus-layer-half-station-area-body-middle-layer-column-glasshandle-row-cell-dot"></div> </div> <div class="bus-layer-half-station-area-body-middle-layer-column-glasshandle-row-cell"> <div class="bus-layer-half-station-area-body-middle-layer-column-glasshandle-row-cell-dot"></div> </div> </div> <div class="bus-layer-half-station-area-body-middle-layer-column-glasshandle-row"> <div class="bus-layer-half-station-area-body-middle-layer-column-glasshandle-row-cell"> <div class="bus-layer-half-station-area-body-middle-layer-column-glasshandle-row-cell-dot"></div> </div> <div class="bus-layer-half-station-area-body-middle-layer-column-glasshandle-row-cell"> <div class="bus-layer-half-station-area-body-middle-layer-column-glasshandle-row-cell-dot"></div> </div> </div> </div> </div> <div class="bus-layer-half-station-area-body-middle-layer-column"> <div class="bus-layer-half-station-area-body-middle-layer-column-glasshandle"> <div class="bus-layer-half-station-area-body-middle-layer-column-glasshandle-row"> <div class="bus-layer-half-station-area-body-middle-layer-column-glasshandle-row-cell"> <div class="bus-layer-half-station-area-body-middle-layer-column-glasshandle-row-cell-dot"></div> </div> <div class="bus-layer-half-station-area-body-middle-layer-column-glasshandle-row-cell"> <div class="bus-layer-half-station-area-body-middle-layer-column-glasshandle-row-cell-dot"></div> </div> </div> <div class="bus-layer-half-station-area-body-middle-layer-column-glasshandle-row"> <div class="bus-layer-half-station-area-body-middle-layer-column-glasshandle-row-cell"> <div class="bus-layer-half-station-area-body-middle-layer-column-glasshandle-row-cell-dot"></div> </div> <div class="bus-layer-half-station-area-body-middle-layer-column-glasshandle-row-cell"> <div class="bus-layer-half-station-area-body-middle-layer-column-glasshandle-row-cell-dot"></div> </div> </div> </div> <div class="bus-layer-half-station-area-body-middle-layer-column-glasshandle"> <div class="bus-layer-half-station-area-body-middle-layer-column-glasshandle-row"> <div class="bus-layer-half-station-area-body-middle-layer-column-glasshandle-row-cell"> <div class="bus-layer-half-station-area-body-middle-layer-column-glasshandle-row-cell-dot"></div> </div> <div class="bus-layer-half-station-area-body-middle-layer-column-glasshandle-row-cell"> <div class="bus-layer-half-station-area-body-middle-layer-column-glasshandle-row-cell-dot"></div> </div> </div> <div class="bus-layer-half-station-area-body-middle-layer-column-glasshandle-row"> <div class="bus-layer-half-station-area-body-middle-layer-column-glasshandle-row-cell"> <div class="bus-layer-half-station-area-body-middle-layer-column-glasshandle-row-cell-dot"></div> </div> <div class="bus-layer-half-station-area-body-middle-layer-column-glasshandle-row-cell"> <div class="bus-layer-half-station-area-body-middle-layer-column-glasshandle-row-cell-dot"></div> </div> </div> </div> <div class="bus-layer-half-station-area-body-middle-layer-column-glasshandle"> <div class="bus-layer-half-station-area-body-middle-layer-column-glasshandle-row"> <div class="bus-layer-half-station-area-body-middle-layer-column-glasshandle-row-cell"> <div class="bus-layer-half-station-area-body-middle-layer-column-glasshandle-row-cell-dot"></div> </div> <div class="bus-layer-half-station-area-body-middle-layer-column-glasshandle-row-cell"> <div class="bus-layer-half-station-area-body-middle-layer-column-glasshandle-row-cell-dot"></div> </div> </div> <div class="bus-layer-half-station-area-body-middle-layer-column-glasshandle-row"> <div class="bus-layer-half-station-area-body-middle-layer-column-glasshandle-row-cell"> <div class="bus-layer-half-station-area-body-middle-layer-column-glasshandle-row-cell-dot"></div> </div> <div class="bus-layer-half-station-area-body-middle-layer-column-glasshandle-row-cell"> <div class="bus-layer-half-station-area-body-middle-layer-column-glasshandle-row-cell-dot"></div> </div> </div> </div> </div> </div> <div class="bus-layer-half-station-area-body-middle-layer"> <div class="bus-layer-half-station-area-body-middle-layer-bank"> <div class="bus-layer-half-station-area-body-middle-layer-bank-left"> <div class="bus-layer-half-station-area-body-middle-layer-bank-left-line"></div> <div class="bus-layer-half-station-area-body-middle-layer-bank-left-line"></div> </div> <div class="bus-layer-half-station-area-body-middle-layer-bank-bottom"> <div class="bus-layer-half-station-area-body-middle-layer-bank-bottom-line"></div> <div class="bus-layer-half-station-area-body-middle-layer-bank-bottom-line"></div> </div> </div> </div> </div> <div class="bus-layer-half-station-area-body-column"> <div class="bus-layer-half-station-area-body-column-pilon"></div> <div class="bus-layer-half-station-area-body-column-bottom"></div> </div> </div> </div> </div> <div class="bus-layer-half-sign"> <div class="bus-layer-half-sign-area"> <div class="bus-layer-half-sign-area-paneltop"> <div class="bus-layer-half-sign-area-paneltop-inside"> <div class="bus-layer-half-sign-area-paneltop-inside-top"> <div class="bus-layer-half-sign-area-paneltop-inside-top1">NU</div> <div class="bus-layer-half-sign-area-paneltop-inside-top2">PARCA</div> </div> <div class="bus-layer-half-sign-area-paneltop-inside-middle"> <div>STATIE DE</div> <div>AUTOBUZ</div> </div> </div> </div> <div class="bus-layer-half-sign-area-panelleg"></div> </div> </div> </div> <div class="bus-layer-half-ground-area"> <div class="bus-layer-half-ground"></div> <div class="bus-layer-half-ground"></div> </div> </div> <div class="bus-layer-half"> <div class="bus-layer-half-auto-area"> <div class="bus-layer-half-auto"> <div class="bus-layer-half-auto-body"> <div class="bus-layer-half-auto-body-mirror"> <div class="bus-layer-half-auto-body-mirror-line1"></div> <div class="bus-layer-half-auto-body-mirror-line2"></div> <div class="bus-layer-half-auto-body-mirror-area"></div> </div> <div class="bus-layer-half-auto-body-middle"> <div class="bus-layer-half-auto-body-middle-linetxt">783 - AEROPORT</div> <div class="bus-layer-half-auto-body-middle-glass"> <div class="bus-layer-half-auto-body-middle-glass-area"> <div class="bus-layer-half-auto-body-middle-glass-area-top"></div> <div class="bus-layer-half-auto-body-middle-glass-windshieldwiper"></div> </div> </div> <div class="bus-layer-half-auto-body-middle-light-radiator"> <div class="bus-layer-half-auto-body-middle-light"> <div class="bus-layer-half-auto-body-middle-light-small"></div> <div class="bus-layer-half-auto-body-middle-light-big"></div> </div> <div class="bus-layer-half-auto-body-middle-radiator"> <div class="bus-layer-half-auto-body-middle-radiator-line"></div> <div class="bus-layer-half-auto-body-middle-radiator-line"></div> <div class="bus-layer-half-auto-body-middle-radiator-line"></div> <div class="bus-layer-half-auto-body-middle-radiator-line"></div> <div class="bus-layer-half-auto-body-middle-radiator-line"></div> </div> <div class="bus-layer-half-auto-body-middle-light"> <div class="bus-layer-half-auto-body-middle-light-big"></div> <div class="bus-layer-half-auto-body-middle-light-small"></div> </div> </div> <div class="bus-layer-half-auto-body-middle-stop-busnr"> <div class="bus-layer-half-auto-body-middle-stop"></div> <div class="bus-layer-half-auto-body-middle-busnr"></div> <div class="bus-layer-half-auto-body-middle-stop"></div> </div> </div> <div class="bus-layer-half-auto-body-mirror"> <div class="bus-layer-half-auto-body-mirror-line1"></div> <div class="bus-layer-half-auto-body-mirror-line2"></div> <div class="bus-layer-half-auto-body-mirror-area"></div> </div> </div> <div class="bus-layer-half-auto-wheels"> <div class="bus-layer-half-auto-wheel"></div> <div class="bus-layer-half-auto-wheel-ax"> <div class="bus-layer-half-auto-wheel-ax-top"></div> <div class="bus-layer-half-auto-wheel-ax-middle"></div> </div> <div class="bus-layer-half-auto-wheel"></div> </div> </div> </div> <div class="bus-layer-half-ground-area"> <div class="bus-layer-half-ground"></div> </div> </div> </div> </div>
.bus-layer:nth-child(2),
.bus-layer-half-station-sign,
.bus-layer-half-station,
.bus-layer-half-station-area-body,
.bus-layer-half-station-area-body-middle,
.bus-layer-half-station-area-body-middle-layer,
.bus-layer-half-station-area-body-middle-layer-column,
.bus-layer-half-station-area-body-middle-layer-column-glasshandle-row,
.bus-layer-half-station-area-body-middle-layer-column-glasshandle-row-cell,
.bus-layer-half-station-area-body-middle-layer-glass-program-columns,
.bus-layer-half-station-area-body-middle-layer-glass-program-column,
.bus-layer-half-station-area-body-middle-layer-bank-bottom,
.bus-layer-half-sign,
.bus-layer-half-sign-area-paneltop,
.bus-layer-half-sign-area-paneltop-inside-top,
.bus-layer-half-sign-area-paneltop-inside-top1,
.bus-layer-half-sign-area-paneltop-inside-top2,
.bus-layer-half-sign-area-paneltop-inside-middle,
.bus-layer-half-auto-area,
.bus-layer-half-auto-body,
.bus-layer-half-auto-wheels,
.bus-layer-half-auto-body-mirror,
.bus-layer-half-auto-body-middle-light,
.bus-layer-half-auto-body-middle-light-radiator,
.bus-layer-half-auto-body-middle-stop-busnr{
display: flex;
}
.bus-layer-half-station,
.bus-layer-half-sign,
.bus-layer-half-auto-area,
.bus-layer-half-auto-body-middle-light-radiator{
align-items: flex-end;
}
.bus-layer-half-station-area-body-middle-layer-column-glasshandle-row-cell,
.bus-layer-half-sign-area-paneltop,
.bus-layer-half-sign-area-paneltop-inside-top1,
.bus-layer-half-sign-area-paneltop-inside-top2,
.bus-layer-half-sign-area-paneltop-inside-middle,
.bus-layer-half-auto-body-middle-light,
.bus-layer-half-auto-body-middle-stop-busnr{
align-items: center;
}
.bus-layer-half-auto-body-mirror:last-of-type .bus-layer-half-auto-body-mirror-line2,
.bus-layer-half-auto-body-mirror:last-of-type .bus-layer-half-auto-body-mirror-area{
align-self: flex-end;
}
.bus-layer-half-station-area-body-middle-layer:nth-child(2),
.bus-layer-half-station-area-body-middle-layer-column,
.bus-layer-half-station-area-body-middle-layer-glass-program-columns,
.bus-layer-half-station-area-body-middle-layer-glass-program-column,
.bus-layer-half-station-area-body-middle-layer-bank-bottom,
.bus-layer-half-auto-body-middle-light-radiator{
justify-content: space-between;
}
.bus-layer-half-auto-body-middle-light,
.bus-layer-half-auto-body-middle-stop-busnr{
justify-content: space-around;
}
.bus-layer-half-station-area-body-middle-layer-column-glasshandle-row-cell,
.bus-layer-half-sign-area-paneltop,
.bus-layer-half-sign-area-paneltop-inside-top1,
.bus-layer-half-sign-area-paneltop-inside-top2,
.bus-layer-half-sign-area-paneltop-inside-middle{
justify-content: center;
}
.bus-layer-half-auto-body-mirror{
justify-content: flex-end;
}
.bus-layer-half-station-area-body-middle-layer-column,
.bus-layer-half-station-area-body-middle-layer-glass-program-column,
.bus-layer-half-sign-area-paneltop-inside-middle,
.bus-layer-half-auto-body-mirror{
flex-direction: column;
}
.bus-layer,
.bus-layer-half-station-area-body-middle-layer,
.bus-layer-half-station-area-body-middle-layer-glass,
.bus-layer-half-station-area-body-middle-layer-column-glasshandle-row,
.bus-layer-half-station-area-body-middle-layer-glass-program-column-line,
.bus-layer-half-auto{
width: 100%;
}
.bus-layer,
.bus-layer-half-auto-wheel{
height: 100%;
}
.bus,
.bus-layer-half-station-area-body-middle,
.bus-layer-half-station-area-top,
.bus-layer-half-auto-body-middle-glass-area-top{
position: relative;
}
.bus-layer,
.bus-layer-half-station-area-body-middle-layer,
.bus-layer-half-station-area-top:before,
.bus-layer-half-station-area-top:after,
.bus-layer-half-auto-body-middle-glass-area-top:before,
.bus-layer-half-auto-body-middle-glass-area-top:after{
position: absolute;
}
.bus-layer-half-station-area-top:before,
.bus-layer-half-station-area-top:after,
.bus-layer-half-auto-body-middle-glass-area-top:before,
.bus-layer-half-auto-body-middle-glass-area-top:after{
content: "";
}
.bus-layer-half-sign-area-paneltop,
.bus-layer-half-sign-area-paneltop-inside{
border-radius: 10px;
}
.bus,
.bus-layer-half-station-area-body-column-pilon,
.bus-layer-half-sign-area-panelleg,
.bus-layer-half-auto-body-middle-glass,
.bus-layer-half-auto-wheels,
.bus-layer-half-auto-wheel-ax-middle,
.bus-layer-half-auto-body-middle-radiator-line{
margin: auto;
}
.bus-layer-half-auto-wheel,
.bus-layer-half-auto-wheel-ax-top,
.bus-layer-half-auto-wheel-ax-middle,
.bus-layer-half-auto-body-middle-radiator-line{
background: black;
}
.bus-layer-half-sign-area-panelleg,
.bus-layer-half-sign-area-paneltop-inside-top1,
.bus-layer-half-station-area-body-middle-layer-glass-program,
.bus-layer-half-auto-body-middle-light-small,
.bus-layer-half-auto-body-middle-light-big,
.bus-layer-half-auto-body-middle-busnr{
background: white;
}
.bus-layer-half-auto-body-middle-light-small,
.bus-layer-half-auto-body-middle-light-big{
border-radius: 50%;
}
.bus-layer-half-station-area-top,
.bus-layer-half-auto-body-middle-glass-area-top{
overflow: hidden;
}
.bus{
width: 100%;
min-width: 100px;
max-width: 1000px;
height: 500px;
background: #a4d5de;
overflow: auto;
}
.bus-layer{
top: 0;
left: 0;
}
.bus-layer:nth-child(1){}
.bus-layer-sun{
width: 100px;
height: 100px;
background: white;
border-radius: 50%;
box-shadow: 0 0 100px white;
filter: blur(5px);
position: sticky;
left: calc(50% - 50px);
top: 50px;
}
.bus-layer:nth-child(2){}
.bus-layer-half{
width: 50%;
min-width: 300px;
}
.bus-layer-half-station-sign{
height: calc(100% - 30px * 2);
}
.bus-layer-half-station{
min-width: 200px;
}
.bus-layer-half-station-area{
width: calc(100% - 10px);
height: 300px;
padding: 5px 5px 0 5px;
}
.bus-layer-half-station-area-top:before,
.bus-layer-half-station-area-top:after,
.bus-layer-half-auto-body-middle-glass-area-top:before,
.bus-layer-half-auto-body-middle-glass-area-top:after{
height: 250px;
background: rgba(255,255,255,0.3);
transform: rotate(45deg);
top: -50px;
left: 20px;
}
.bus-layer-half-station-area-top:before,
.bus-layer-half-auto-body-middle-glass-area-top:before{
width: 20px;
}
.bus-layer-half-station-area-top:after,
.bus-layer-half-auto-body-middle-glass-area-top:after{
width: 10px;
left: 60px;
}
.bus-layer-half-station-area-top{
width: calc(100% - 10px);
height: 40px;
border: 5px solid #213341;
background: #466a87;
border-top-left-radius: 50px;
border-top-right-radius: 50px;
}
.bus-layer-half-station-area-body{
height: calc(100% - 50px);
}
.bus-layer-half-station-area-body-column{
width: 20px;
height: 100%;
}
.bus-layer-half-station-area-body-column-pilon,
.bus-layer-half-station-area-body-column-bottom{
background: #213341;
}
.bus-layer-half-station-area-body-column-pilon{
width: 10px;
height: calc(100% - 3px);
}
.bus-layer-half-station-area-body-column-bottom{
height: 3px;
}
.bus-layer-half-station-area-body-middle{
width: calc(100% - 40px);
height: 100%;
}
.bus-layer-half-station-area-body-middle-layer{
height: 200px;
}
.bus-layer-half-station-area-body-middle-layer-glass{
height: calc(100% - 5px);
background: rgba(70,106,135,0.4);
margin-top: 5px;
}
.bus-layer-half-station-area-body-middle-layer-glass-program{
width: 60px;
height: 80px;
padding: 10px;
border: 2px solid #bf9271;
margin: 20px auto;
}
.bus-layer-half-station-area-body-middle-layer-glass-program-top{
height: 5px;
background: #bf9271;
margin-bottom: 10px;
}
.bus-layer-half-station-area-body-middle-layer-glass-program-columns{
height: calc(100% - 5px - 10px);
}
.bus-layer-half-station-area-body-middle-layer-glass-program-column{
width: calc(100% / 2 - 5px);
}
.bus-layer-half-station-area-body-middle-layer-glass-program-column-line{
height: 3px;
background: #bcbcbd;
}
.bus-layer-half-station-area-body-middle-layer-column{
width: 20px;
height: 180px;
margin-top: 10px;
}
.bus-layer-half-station-area-body-middle-layer-column:nth-child(1){
margin-left: -5px;
}
.bus-layer-half-station-area-body-middle-layer-column:nth-child(2){
margin-right: -5px;
}
.bus-layer-half-station-area-body-middle-layer-column-glasshandle{
height: 10px;
background: #adadac;
}
.bus-layer-half-station-area-body-middle-layer-column-glasshandle-row{
height: 50%;
}
.bus-layer-half-station-area-body-middle-layer-column-glasshandle-row-cell{
width: 50%;
}
.bus-layer-half-station-area-body-middle-layer-column-glasshandle-row-cell-dot{
width: 3px;
height: 3px;
background: #707173;
}
.bus-layer-half-station-area-body-middle-layer-bank{
width: 50px;
height: 55px;
border-left: 3px solid black;
border-bottom: 3px solid black;
margin-left: -5px;
margin-bottom: 25px;
align-self: flex-end;
}
.bus-layer-half-station-area-body-middle-layer-bank-left{
width: 5px;
height: calc(100% - 2px - 3px);
}
.bus-layer-half-station-area-body-middle-layer-bank-left-line,
.bus-layer-half-station-area-body-middle-layer-bank-bottom-line{
background: #b87c4f;
}
.bus-layer-half-station-area-body-middle-layer-bank-left-line{
height: 20px;
}
.bus-layer-half-station-area-body-middle-layer-bank-left-line:last-of-type{
margin-top: 5px;
}
.bus-layer-half-station-area-body-middle-layer-bank-bottom{}
.bus-layer-half-station-area-body-middle-layer-bank-bottom-line{
width: calc(100% / 2 - 2px);
height: 5px;
}
.bus-layer-half-sign{
min-width: 100px;
}
.bus-layer-half-sign-area{
width: calc(100% - 10px);
height: 250px;
padding: 5px 5px 0 5px;
}
.bus-layer-half-sign-area-paneltop{
height: 85px;
background: #3f8cb1;
font-weight: bold;
color: white;
}
.bus-layer-half-sign-area-paneltop-inside{
width: calc(100% - 15px);
height: calc(100% - 15px);
border: 2px solid white;
}
.bus-layer-half-sign-area-paneltop-inside-top{
height: 25px;
font-size: 10px;
border-bottom: 2px solid white;
}
.bus-layer-half-sign-area-paneltop-inside-top1{
width: 20px;
color: #3f8cb1;
border-top-left-radius: 5px;
}
.bus-layer-half-sign-area-paneltop-inside-top2{
width: calc(100% - 20px);
}
.bus-layer-half-sign-area-paneltop-inside-middle{
height: calc(100% - 27px);
font-size: 12px;
}
.bus-layer-half-sign-area-panelleg{
width: 10px;
height: calc(100% - 85px);
}
.bus-layer-half:nth-child(2){}
.bus-layer-half-auto-area{
height: calc(100% - 30px);
}
.bus-layer-half-auto{
width: 296px;
height: 300px;
padding: 2px 2px 0 2px;
}
.bus-layer-half-auto-body{
height: calc(100% - 30px);
}
.bus-layer-half-auto-body-mirror{
width: 25px;
height: 50px;
margin-top: 40px;
}
.bus-layer-half-auto-body-mirror-line1,
.bus-layer-half-auto-body-mirror-line2,
.bus-layer-half-auto-body-mirror-area{
background: #203340;
}
.bus-layer-half-auto-body-mirror:first-of-type .bus-layer-half-auto-body-mirror-line1{
transform: rotate(-10deg);
}
.bus-layer-half-auto-body-mirror:last-of-type .bus-layer-half-auto-body-mirror-line1{
transform: rotate(10deg);
}
.bus-layer-half-auto-body-mirror:first-of-type .bus-layer-half-auto-body-mirror-line2{
margin-left: 2px;
}
.bus-layer-half-auto-body-mirror:last-of-type .bus-layer-half-auto-body-mirror-line2{
margin-right: 2px;
}
.bus-layer-half-auto-body-mirror-line1{
height: 3px;
}
.bus-layer-half-auto-body-mirror-line2{
width: 3px;
height: 10px;
}
.bus-layer-half-auto-body-mirror-area{
width: calc(100% - 4px);
height: 30px;
border-radius: 3px;
margin-top: -5px;
}
.bus-layer-half-auto-body-middle{
width: calc(100% - 25px * 2);
height: calc(100% - 4px);
background: #eb9c20;
border-top: 4px solid #e8c225;
border-radius: 15px 15px 3px 3px;
}
.bus-layer-half-auto-body-middle-linetxt{
width: 100px;
padding: 5px 2px;
text-align: center;
color: #bbcd9f;
font-size: 12px;
background: #5c6972;
margin: 5px auto;
margin-bottom: 5px;
}
.bus-layer-half-auto-body-middle-glass,
.bus-layer-half-auto-body-middle-glass-area{
border-radius: 15px 15px 5px 5px;
}
.bus-layer-half-auto-body-middle-glass{
width: calc(100% - 4px);
border-top: 4px solid #e77f16;
}
.bus-layer-half-auto-body-middle-glass-area{
width: calc(100% - 4px);
border: 2px solid #203340;
}
.bus-layer-half-auto-body-middle-glass-area-top{
height: 127px;
background: #3b5a73;
border-bottom: 4px solid #2b4152;
border-top-left-radius: 13px;
border-top-right-radius: 13px;
}
.bus-layer-half-auto-body-middle-glass-windshieldwiper{
height: 20px;
background: #203340;
}
.bus-layer-half-auto-body-middle-light-radiator{
padding: 0 5px 8px 5px;
}
.bus-layer-half-auto-body-middle-light{
width: 30px;
height: 15px;
background: #bdbfbb;
}
.bus-layer-half-auto-body-middle-light-small{
width: 5px;
height: 5px;
}
.bus-layer-half-auto-body-middle-light-big{
width: 13px;
height: 10px;
filter: blur(1px);
}
.bus-layer-half-auto-body-middle-light:first-of-type{
border-radius: 0 5px;
}
.bus-layer-half-auto-body-middle-light:last-of-type{
border-radius: 5px 0;
}
.bus-layer-half-auto-body-middle-radiator{
width: calc(100% - 30px * 2 - 10px);
height: 40px;
border: 4px solid #e47f14;
border-top-width: 0;
border-bottom-left-radius: 30px;
border-bottom-right-radius: 30px;
}
.bus-layer-half-auto-body-middle-radiator-line{
height: 3px;
margin-bottom: 2px;
}
.bus-layer-half-auto-body-middle-radiator-line:nth-child(1){
width: calc(100% - 2px * 2);
border-radius: 0 0 1px 1px;
margin-top: 12px;
}
.bus-layer-half-auto-body-middle-radiator-line:nth-child(2){
width: calc(100% - 3px * 3);
border-radius: 0 0 2px 2px;
}
.bus-layer-half-auto-body-middle-radiator-line:nth-child(3){
width: calc(100% - 4px * 4);
border-radius: 0 0 3px 3px;
}
.bus-layer-half-auto-body-middle-radiator-line:nth-child(4){
width: calc(100% - 5px * 5);
border-radius: 0 0 4px 4px;
}
.bus-layer-half-auto-body-middle-radiator-line:nth-child(5){
width: calc(100% - 6px * 6);
border-radius: 0 0 5px 5px;
}
.bus-layer-half-auto-body-middle-stop-busnr{
height: 20px;
background: #e67f14;
border-radius: 0 0 3px 3px;
}
.bus-layer-half-auto-body-middle-stop{
width: 25px;
height: 10px;
background: #cfcece;
}
.bus-layer-half-auto-body-middle-busnr{
width: 70px;
height: 14px;
box-shadow: inset 2px 2px 0 #cfcece, inset -2px -2px 0 #cfcece;
}
.bus-layer-half-auto-wheels{
width: calc(100% - 70px);
height: 30px;
}
.bus-layer-half-auto-wheel{
width: 30px;
border-bottom-left-radius: 3px;
border-bottom-right-radius: 3px;
}
.bus-layer-half-auto-wheel-ax{
width: calc(100% - 30px * 2);
height: 5px;
}
.bus-layer-half-auto-wheel-ax-top{
height: 2px;
}
.bus-layer-half-auto-wheel-ax-middle{
width: calc(100% - 20px);
height: 3px;
border-bottom-left-radius: 2px;
border-bottom-right-radius: 2px;
}
.bus-layer-half-ground-area{}
.bus-layer-half-ground{
height: 30px;
background: #70828c;
}