/**
    @author: Roberto Compassi
    @email: robertocompassi@outlook.com
    @date: 25 Feb 2020
*/
* {
  box-sizing: border-box;
}

html,
body {
  padding: 0px;
  margin: 0px;
  max-width: 100vw;
  max-height: 100vh;
  overflow: hidden;
}

.mao-invisivel-que-guia-o-onibus {
  position: absolute;
  bottom: 0;
  margin-bottom: 30vh;
  margin-left: 15vw;
  transform: rotate(-7deg);
  background-color: transparent;
  z-index: 9;
}

.onibus {
  position: relative;
  margin-left: 40px;
  animation: passouNoBuraco 1.5s linear infinite;
}
.onibus .retrovisor {
  position: relative;
  z-index: 9;
}
.onibus .retrovisor .espelho {
  margin-top: 30.4054054054px;
  position: absolute;
  display: block;
  background-color: #000;
  width: 24.3243243243px;
  height: 69.4980694981px;
  border-radius: 7px;
  left: -34.749034749px;
  box-shadow: 4px 5px 4px 2px #00000029;
}
.onibus .retrovisor .espelho:before {
  position: absolute;
  left: 0;
  z-index: 5;
  content: " ";
  width: 100%;
  height: 69.4980694981px;
  opacity: 1;
  background: linear-gradient(to bottom, #00000000, #ffffff54, #b4b5be00);
}
.onibus .retrovisor .cabo {
  margin-top: 22.113022113px;
  position: absolute;
  display: block;
  background-color: transparent;
  border: 6.0810810811px solid #000;
  width: 34.749034749px;
  height: 27.027027027px;
  border-radius: 7px;
  left: -27.027027027px;
  border-bottom: 0px;
  border-right: 0px;
  border-top-right-radius: 0px;
  z-index: 2;
}
.onibus .retrovisor .cabo:before {
  position: absolute;
  right: 0;
  z-index: 5;
  content: " ";
  width: 12.1621621622px;
  height: 12.1621621622px;
  margin-right: -9.3555093555px;
  margin-top: -9.3555093555px;
  border-radius: 50%;
  background: #000;
  z-index: -1;
}
.onibus .frente {
  content: " ";
  background-color: #b4b5be;
  width: 45px;
  height: 243.2432432432px;
  top: 0;
  left: 0;
  position: absolute;
  z-index: 9;
  margin-left: -30px;
  border-top-left-radius: 100%;
  border-bottom-left-radius: 30px;
  z-index: 2;
  overflow: hidden;
}
.onibus .frente .pintura-vermelha {
  display: block;
  background-color: #b4b5be;
  height: 45.8949515553px;
  width: 775.8620689655px;
  position: absolute;
  bottom: 40.5405405405px;
  left: 0;
  z-index: 3;
  background-color: #cf1415;
}
.onibus .frente .parabrisa {
  display: block;
  height: 121.6216216216px;
  width: 100px;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 3;
  background-color: #242a6e;
}
.onibus .frente .pintura-azul {
  display: block;
  background-color: #b4b5be;
  height: 30.4054054054px;
  width: 775.8620689655px;
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 3;
  background-color: #242a6e;
}
.onibus .frente:before {
  position: absolute;
  left: 0;
  z-index: 5;
  content: " ";
  top: 40%;
  width: 900px;
  height: 121.6216216216px;
  opacity: 1;
  background: linear-gradient(to bottom, #ffffff00, #ffffff36, #b4b5be00);
}
.onibus:before {
  position: absolute;
  left: 0;
  z-index: 5;
  content: " ";
  top: 40%;
  width: 900px;
  height: 121.6216216216px;
  opacity: 1;
  background: linear-gradient(to bottom, #ffffff00, #ffffff36, #b4b5be00);
}
.onibus .lataria {
  position: relative;
  width: 900px;
  height: 243.2432432432px;
  background: #242a6e;
  border-radius: 10px;
  border-bottom-left-radius: 0px;
  border-top-left-radius: 10px;
  border-bottom-right-radius: 30px;
  z-index: 5;
  display: block;
  overflow: hidden;
  border: 0px;
}
.onibus .lataria:before {
  position: absolute;
  left: 0;
  z-index: 5;
  content: " ";
  top: 40%;
  width: 900px;
  height: 121.6216216216px;
  opacity: 1;
  background: linear-gradient(to bottom, #ffffff00, #ffffff36, #b4b5be00);
}
.onibus .lataria .luz-laranja {
  position: absolute;
  left: 0;
  background-color: orange;
  width: 18px;
  height: 8.1081081081px;
  border-radius: 3px;
  z-index: 9;
  bottom: 48.6486486486px;
  margin-left: 40.9090909091px;
  animation: luzSeta 0.8s linear infinite;
}
.onibus .lataria .luz-laranja.luz-2 {
  margin-left: 257.1428571429px;
}
.onibus .lataria .luz-laranja.luz-3 {
  margin-left: 450px;
}
.onibus .lataria .luz-laranja.luz-4 {
  margin-left: 803.5714285714px;
}
.onibus .lataria .janela-do-mestre {
  position: absolute;
  left: 0;
  width: 48.6486486486px;
  z-index: 4;
  display: block;
  background-color: #fff;
  height: 121.6216216216px;
  margin: 12.1621621622px;
  border-radius: 10px;
  float: left;
  margin-right: 0px;
  margin-top: 18.711018711px;
  border: 5.4054054054px solid #292929c7;
  border-top-left-radius: 80%;
  border-bottom-left-radius: 10px;
  border-top-right-radius: 0px;
  border-bottom-right-radius: 2px;
  margin-left: 0px;
  border-right: 0px;
  z-index: 10;
}
.onibus .lataria .janela-do-mestre:before {
  content: " ";
  position: absolute;
  left: 0;
  margin-left: 42.6742532006px;
  width: 121.6216216216px;
  margin-top: -5.4054054054px;
  z-index: 4;
  display: block;
  background-color: #fff;
  height: 95.3895071542px;
  border-radius: 10px;
  border: 5.4054054054px solid #292929c7;
  border-left: 0px;
  border-bottom: 0px;
  border-radius: 0px;
  border-top-right-radius: 10px;
  border-bottom-right-radius: 19px;
}
.onibus .lataria .janela-do-mestre:after {
  position: absolute;
  background-color: #fff;
  content: " ";
  width: 130.0766006648px;
  height: 60.8108108108px;
  margin-left: 37.422037422px;
  bottom: 3.6855036855px;
  z-index: 2;
  left: 0;
  transform: rotate(-8deg);
  border: 5.4054054054px solid #292929c7;
  border-bottom-right-radius: 22px;
  border-bottom-left-radius: 3px;
  border-right: 0px;
  border-left: 0px;
  border-top: 0px;
  border-bottom-left-radius: 0px;
}
.onibus .lataria .grupo-janela-do-povo {
  position: absolute;
  right: 0;
  margin-right: 27.027027027px;
  z-index: 4;
}
.onibus .lataria .grupo-janela-do-povo .janela {
  position: relative;
  display: block;
  background-color: #fff;
  height: 105.7579318449px;
  width: 163.250498821px;
  margin: 12.1621621622px;
  border-radius: 10px;
  float: left;
  margin-right: 0px;
  margin-top: 16.2162162162px;
  border: 5.4054054054px solid #626262;
}
.onibus .lataria .grupo-janela-do-povo .janela:before {
  content: " ";
  position: absolute;
  width: 100%;
  border-radius: 0px;
  left: 0;
  right: 0;
  background-color: #626262;
  margin-top: 49.6414782129px;
  height: 3.0405405405px;
}
.onibus .lataria .pintura-vermelha {
  display: block;
  background-color: #b4b5be;
  height: 413.5135135135px;
  width: 775.8620689655px;
  position: absolute;
  bottom: 40.5405405405px;
  border-bottom-right-radius: 50%;
  border-top-right-radius: 50%;
  left: 0;
  z-index: 3;
  border: 45.8949515553px solid #cf1415;
  border-left: 0px;
}
.onibus .lataria .pintura-azul {
  display: block;
  background-color: #242a6e;
  width: 900px;
  position: absolute;
  bottom: 0;
  border-top-right-radius: 0;
  left: 0;
  display: block;
  background-color: #b4b5be;
  height: 486.4864864865px;
  width: 818.1818181818px;
  position: absolute;
  bottom: 0;
  border-bottom-right-radius: 50%;
  left: 0;
  border: 30.4054054054px solid #242a6e;
  border-left: 0px;
}
.onibus .lataria .codigo-onibus {
  position: absolute;
  margin-top: 143.0842607313px;
  margin-right: 30px;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 1.4rem;
  right: 0;
  font-weight: 900;
  color: #bbbcc5;
}
.onibus .roda {
  width: 113.9240506329px;
  height: 113.9240506329px;
  background-color: transparent;
  border-radius: 50%;
  display: block;
  position: absolute;
  bottom: 0;
  margin-bottom: -39.2841553907px;
  left: 100px;
  z-index: 5;
}
.onibus .roda:before {
  background-color: gray;
  z-index: 1;
  content: " ";
  width: 100%;
  height: 75.9493670886px;
  border-top-left-radius: 113.9240506329px;
  border-top-right-radius: 113.9240506329px;
  display: block;
  position: absolute;
  bottom: 39.9620253165px;
  border: 7.1202531646px solid #3c417d;
  border-bottom: 0px;
  margin-left: -7px;
}
.onibus .roda.traseira {
  margin-left: 514.2857142857px;
}
.onibus .roda .pneu-careca {
  z-index: 4;
  animation: rotate 0.5s linear infinite;
  width: 103.5673187572px;
  height: 103.5673187572px;
  background-color: #000;
  border-radius: 50%;
  display: block;
  margin-top: 5px;
  margin-left: 5px;
  position: relative;
}
.onibus .roda .pneu-careca:before {
  content: " ";
  position: absolute;
  width: 100%;
  height: 10px;
  top: 0;
}
.onibus .roda .pneu-careca .calota-feia {
  width: 58%;
  height: 58%;
  margin-left: 21%;
  margin-top: 21%;
  position: absolute;
  background-color: gray;
  border-radius: 50%;
  display: block;
  border: 5px solid #cfcfcf;
  background: linear-gradient(to bottom, #626262, #9e9e9e);
}
.onibus .roda .pneu-careca .calota-feia .eixo {
  width: 58%;
  height: 58%;
  margin-left: 21%;
  margin-top: 21%;
  border-radius: 50%;
  position: absolute;
  background-color: #d7d7d7;
  box-shadow: -1px 5px 7px 4px #0000007d;
}
.onibus .roda .pneu-careca .calota-feia .eixo .parafuso {
  position: absolute;
  width: 4px;
  height: 4px;
  background-color: #8d8d8d;
  border-radius: 50%;
  left: calc(50% - 2px);
  margin-top: 2px;
}
.onibus .roda .pneu-careca .calota-feia .eixo .parafuso:nth-child(2) {
  margin-top: calc(50% - 2px);
  left: 2px;
}
.onibus .roda .pneu-careca .calota-feia .eixo .parafuso:nth-child(3) {
  margin-top: calc(50% - 2px);
  left: auto;
  right: 2px;
}
.onibus .roda .pneu-careca .calota-feia .eixo .parafuso:nth-child(4) {
  margin-top: calc(100% - 6px);
  left: calc(50% - 2px);
}

@keyframes rotate {
  0% {
    transform: rotate(360deg);
    margin-top: 5px;
  }
  50% {
    margin-top: 8px;
  }
  100% {
    transform: rotate(0deg);
    margin-top: 5px;
  }
}
@keyframes passouNoBuraco {
  0% {
    transform: rotate(0deg);
  }
  20% {
    transform: rotate(1deg);
  }
  40% {
    transform: rotate(-1deg);
  }
  60% {
    transform: rotate(1deg);
  }
  100% {
    transform: rotate(0deg);
  }
}
@keyframes luzSeta {
  0% {
    box-shadow: none;
  }
  50% {
    box-shadow: 1px 1px 13px 13px #ffb100ad;
  }
  100% {
    box-shadow: none;
  }
}
.asfalto {
  background-color: #151515;
  width: 100vw;
  height: 100vh;
  left: 0;
  bottom: 0;
  margin-top: 60vh;
  transform: skew(0deg, -7deg);
  position: relative;
}
.asfalto .faixas-amarelas {
  width: 200vw;
  position: absolute;
  display: inline-block;
  top: 17vh;
  left: 0;
  animation: faixasAndando 5s linear infinite;
  transition: all 5s linear;
  overflow: hidden;
}
.asfalto .faixas-amarelas span {
  background-color: #bba547;
  width: 10rem;
  height: 0.8rem;
  display: inline-block;
  margin-right: 15rem;
}

@keyframes faixasAndando {
  0% {
    margin-left: 100vw;
  }
  100% {
    margin-left: -100vw;
  }
}

/*# sourceMappingURL=style.css.map */