main.css

@import url("https://fonts.googleapis.com/css?family=Roboto:300");
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box; }


div ul {
  list-style: none;
  padding-left: 1.2rem;
}
a:visited {
  color: grey;
}
a {
  color: #FF6C64
}
.intro {
  text-align: left;
}
#start-location, #end-location {
  border-bottom: solid 4px #FCECDD;
}
#map {
  height: 100%;
  width: 100%;
  max-width: 940px;
  opacity: 0;
  background-color: #413D37; }

html, body {
  font-family: 'Roboto', sans-serif;
  font-weight: 300;
  font-size: 16px;
  line-height: 20px;
  background-color: #413D37;
  color: #413D37;
  height: 100%; }

body {
  width: 100vw;
  overflow-x: hidden; }

h1 {
  font-family: "HelveticaNeue", Helvetica;
  font-size: 1.2em;
  font-weight: 300;
  text-align: center;
  margin-top: 20px;
  position: absolute;
  top: 20px;
  left: 36px;
  z-index: 100;
  color: #FCECDD;
  transition: color 0.7s; }
  h1 b {
    font-size: 1.5em;
    letter-spacing: 1px;
    font-weight: 400;
    color: #FF6C64; }

h2 {
  font-size: 2em;
  font-weight: 300;
  text-align: center;
  margin: 36px 0 20px;
  color: #413D37; }

.content {
  width: 100vw;
  height: 100%;
  text-align: center;
  overflow-x: hidden;
  display: flex;
  justify-content: space-between;
  align-items: stretch; }

.map-container {
  width: 45%; }

.results {
  width: 0;
  overflow-x: hidden;
  background-color: #FCECDD;
  color: #413D37;
  text-align: left; }
  .results .icon {
    width: auto;
    height: 144px;
    display: inline-block;
    margin: 0 36px; }
  .results p {
    display: inline-block;
    font-size: 1.2em;
    line-height: 1.5em; }

.flex-row {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 36px; }
  .flex-row p {
    transform: translateY(-50%); }

.results .flex-row {
  display: none; }

.results .fade-three .icon {
  width: 98px;
  height: 98px;
  margin-left: 45px;
  margin-top: 16px; }

.time-row {
  margin-left: 36px; }
  .time-row b {
    font-size: 1.5em; }
  .time-row .pop {
    font-size: 2em;
    color: #37e179;
    font-weight: 400;
    text-shadow: 1px 1px rgba(65, 61, 55, 0.3); }

.fade-two .icon {
  margin-left: 62px; }

.fade-four {
  margin: 64px 58px 36px; }

input[type="number"] {
  font-size: 2.5em;
  font-weight: 300;
  line-height: 1.5em;
  font-style: italic;
  border: none;
  background: none;
  color: #413D37;
  padding-left: 15px;
  margin-right: -10px;
  outline: none;
  color: #FF6C64; }

#red-lights {
  color: #FF6C64; }

#speed-traps {
  color: #FF6C64; }

.big-number {
  font-size: 2.5em;
  font-weight: 300;
  line-height: 1.5em;
  font-style: italic;
  margin-right: 10px;
  margin-left: 10px;
  text-shadow: 1px 1px rgba(65, 61, 55, 0.3);
  color: #FF6C64; }

.location-inputs {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0 36px;
  height: auto;
  width: 55%;
  background-color: #413D37;
  color: #FCECDD; }

form-group {
  width: 100%;
  margin-bottom: 48px; }

label {
  font-size: 18px;
  font-weight: bold;
  text-align: left;
  display: none; }

hr {
  margin: 18px 72px; }

input[type="text"] {
  position: relative;
  width: 100%;
  font-size: 36px;
  line-height: 1.75em;
  font-weight: 200;
  padding: 10px 0px;
  border: none;
  background: none;
  overflow: visible;
  color: #FCECDD; }

input[type="text"]:focus,
input[type="text"].focus {
  outline: none; }

::-webkit-input-placeholder {
  color: #FCECDD;
  font-size: 1.5;
  line-height: 1.75em;
  font-weight: 200;
  font-style: italic; }

b {
  font-weight: 700; }

.start {
  animation: pop 3s ease;
  animation-delay: 20s; }

@keyframes pop {
  0% {
    transform: scale(1, 1); }
  10% {
    transform: scale(1.5, 1.5); }
  20% {
    transform: scale(1, 1); }
  40% {
    transform: scale(1.2, 1.2); }
  60% {
    transform: scale(1, 1); }
  80% {
    transform: scale(1.2, 1.2); }
  100% {
    transform: scale(1, 1); } }
#myAnimation {
  position: absolute;
  bottom: -5px;
  left: -300px;
  cursor: pointer;
  width: 100vw;
  transition: left 2s ease; }
  #myAnimation svg {
    width: 288px;
    height: auto; }
    #myAnimation svg #car-outline {
      transition: stroke-color 0.3s ease; }
  #myAnimation:hover svg #car-outline {
    stroke: #FCECDD; }
  #myAnimation #BackWheel, #myAnimation #FrontWheel {
    transform: rotate(-720deg);
    transition: transform 1.5s ease;
    transform-origin: 50% 50%; }
  #myAnimation:before {
    opacity: 0; }
  #myAnimation.prepped {
    left: 36px; }
    #myAnimation.prepped:before {
      content: "Click me!";
      position: absolute;
      bottom: 120%;
      left: 0%;
      background-color: #FCECDD;
      font-size: 1.5em;
      font-weight: 400;
      padding: 16px 36px;
      border-radius: 5px;
      clip-path: polygon(0% 0%, 100% 0%, 100% 90%, 80% 90%, 83% 100%, 75% 90%, 0% 90%);
      animation: popupshow 0.2s linear;
      animation-delay: 3s;
      animation-fill-mode: both; }
    #myAnimation.prepped #BackWheel, #myAnimation.prepped #FrontWheel {
      transform: rotate(0deg);
      transition: transform 2s ease; }
  #myAnimation.clicked {
    left: 110%;
    transition: left 1s ease-in;
    animation: rearBack 1s linear;
    transform-origin: 0% 100%; }
    #myAnimation.clicked #BackWheel, #myAnimation.clicked #FrontWheel {
      transform: rotate(1440deg);
      transition: transform 3s ease; }
    #myAnimation.clicked:before {
      display: none; }

@keyframes popupshow {
  0% {
    transform: translateY(10%);
    opacity: 0; }
  100% {
    transform: translateY(0%);
    opacity: 1.0; } }
@keyframes rearBack {
  0% {
    transform: rotate(0deg); }
  15% {
    transform: rotate(-15deg); }
  45% {
    transform: rotate(0deg); } }
#back {
  position: absolute;
  width: 64px;
  height: 64px;
  bottom: 36px;
  left: -72px;
  border-radius: 100%;
  background-color: #FCECDD;
  cursor: pointer;
  opacity: 0.7;
  transition: opacity 0.3s; }
  #back:hover {
    opacity: 1; }
    #back:hover svg {
      transform: translate(-50%, -50%) scale(-1.25, 1.25); }
  #back svg {
    position: absolute;
    left: 45%;
    top: 50%;
    transform: translate(-50%, -50%) scale(-1, 1);
    transition: transform 0.3s; }

.more-info {
  position: relative; }
  .more-info .chevron {
    position: absolute;
    top: -22px;
    left: 50%;
    width: 16px;
    height: 16px;
    transform-origin: 50% 50%;
    transform: translateX(-100%) rotate(90deg) scale(0.5, 1);
    opacity: 0.7; }
    .more-info .chevron svg {
      width: 100%;
      height: auto; }
  .more-info p {
    margin-bottom: 36px; }
  .more-info h2 {
    margin-bottom: 36px; }

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