body {
  margin: 0;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #F1E7C1; }

.route {
  height: 500px;
  width: 500px;
  overflow: hidden;
  position: relative;
  transform-style: preserve-3d; }

.route .lignes {
  position: absolute;
  top: 15%;
  border: solid 250px #F1E7C1;
  left: 50%;
  transform: translateX(-50%);
  height: 300%;
  width: 300%;
  border-radius: 100%;
  background: #162346;
  perspective: 250px;
  box-shadow: inset 0 50px 50px rgba(73, 156, 220, 0.2); }

.route .lignes--anim {
  position: absolute;
  top: -22%;
  left: 50%;
  height: 51%;
  width: 50px;
  background: #fff;
  transform: translateX(-50%) rotateX(16deg);
  overflow: hidden; }

.route .lignes--anim::before {
  content: '';
  position: absolute;
  top: 25%;
  left: 0;
  height: 50%;
  width: 100%;
  border-top: solid 100px #162346;
  border-bottom: solid 100px #162346;
  -webkit-animation: lines linear 1s infinite;
  animation: lines linear 1s infinite; }

.route .voiture {
  overflow: visible;
  position: absolute;
  top: 17%;
  left: 25%;
  height: 50%;
  width: 50%;
  transform-origin: bottom center;
  -webkit-animation: bounce2 .75s ease-in-out alternate infinite;
  animation: bounce2 .75s ease-in-out alternate infinite; }

.route .voiture #wheels {
  -webkit-animation: bounce .25s ease-in-out alternate infinite;
  animation: bounce .25s ease-in-out alternate infinite; }

.route .voiture #gift-blue {
  -webkit-animation: bounce .35s ease-in-out alternate infinite;
  animation: bounce .35s ease-in-out alternate infinite; }

.route .voiture #gift-pink {
  -webkit-animation: bounce .45s ease-in-out alternate infinite;
  animation: bounce .45s ease-in-out alternate infinite; }

.route .voiture .parebrise {
  position: relative; }

.route .voiture .parebrise::before {
  content: '';
  position: absolute;
  top: 25%;
  left: 0;
  width: 100%;
  height: 50%;
  border-top: solid 25px rgba(255, 255, 255, 0.1);
  border-bottom: solid 25px rgba(255, 255, 255, 0.1); }

@-webkit-keyframes lines {
  to {
    top: -40%;
    /* transform: translatex(-50%) perspective(10px) rotateX(10deg); */ } }

@keyframes lines {
  to {
    top: -40%;
    /* transform: translatex(-50%) perspective(10px) rotateX(10deg); */ } }

@-webkit-keyframes bounce {
  100% {
    transform: translateY(-2px); } }

@keyframes bounce {
  100% {
    transform: translateY(-2px); } }

@-webkit-keyframes bounce2 {
  0% {
    transform: translateY(-2px) rotate(1deg); }
  100% {
    transform: translateY(-2px) rotate(-1deg); } }

@keyframes bounce2 {
  0% {
    transform: translateY(-2px) rotate(1deg); }
  100% {
    transform: translateY(-2px) rotate(-1deg); } }

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