/* styles.css 
   Project: Road Rage
   Author: Grace Manthey
   Date: 1/21/2020
	
   Helpful links: 
   	Web colors: 
   		https://en.wikipedia.org/wiki/Web_colors#X11_color_names
	Color picker tool:
		https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Colors/Color_picker_tool
		http://colorpicker.com

*/


body {
   background-color: navy;
   color: white;
   padding: 10px;
   overflow-x: hidden;
}

h3 {
   font-size: 25px;
}

h4 {
   margin-top: 0px;
}


.photos {
   width: 100%;
   position: relative;
   margin-top: 15px;

}
   .photos img {
      width: 100%;
   }

   .viz {
      width: 100%;
   }


      .numbs {
         position: absolute;
         top: 0px;
         left: 0%;
      }

      .fatal {
         position: absolute;
         top: 0px;
         left: 200%;
      }

      .cali {
         position: absolute;
         top: 0px;
         left: 200%;
      }

       /*  .crashes img {
            width: 100%;
         }

         .time img {
            width: 100%;
         }

         .list img {
            width: 100%;
         }*/

.title {
   border-bottom: 2px solid #f3bc44;
}   

   .title h3 {
      margin-bottom: 10px;
   } 

   .titletwo{ display: none; }

   .titlethree{ display: none; }


.arrow {
   width: 65px;
   position: fixed;
   
}

   .arrow img {
      width: 100%;
   }

   .arrow p {
      font-size: 12px;
      text-align: center;
      padding: 5px;
      margin: 0px;
   }

.rightarrow {
   bottom: 0px;
   right: 0px;
}   

.leftarrow {
   bottom: 0px;
   left: 0px;
}   

   .leftarrow img {
      transform: rotate(180deg);
   }

.rightarrow {
   display: none;
}

.leftarrow {
   display: none;
}

.carabove {
   width: 7%;
   position: absolute;
   top: 45%;
   left: 90%;
   transform: rotate(270deg);
   display: none;

}
   .carabove img {
      width: 100%;
   }


.bluecar {
   width: 16%;
   position: absolute;
   top: 31%;
   left: 110%;
   display: none;

}
   .bluecar img {
      width: 100%;
   }   

   .driveonroad {
            animation-duration: 6s;
            animation-name: driveonroad;
            animation-timing-function: linear;
            animation-iteration-count: infinite;
         }

            @keyframes driveonroad {
               0% {
                  left: 110%;
               }

               50% {
                  left: 60%;
                  transform: rotate(270deg);
                  top: 45%;
               }


               55% {
                  top: 50%;
                  left:54%;
                  transform: rotate(230deg);
               }

               65% {
                  top: 63%;
                  left: 51%;
                  transform: rotate(180deg);

               }
               75% {
                  top: 77%;
                  left: 48%;
                  transform: rotate(230deg);
               }

               80% {
                  top: 79%;
                  left: 44%;
                  transform: rotate(270deg);
               }

               90% {
                  left: 33%;

               }

               95% {
                  top: 81%;
                  left: 27%;
                  transform: rotate(230deg);
               }

               100% {
                  top: 400%;
                  left: 24%;
                  transform: rotate(180deg);

               }
            }

 .congestionone {
      animation-duration: 4s;
      animation-name: congestionone;
      animation-timing-function: linear;
         }  

         @keyframes congestionone {
            0% {
               left: 110%;
            }

            30% {
               left: 45%;
            }

            60% {
               left: 40%;
            }

            100% {
              left: -10%;
            }
         } 


  .congestiontwo {
      animation-duration: 4s;
      animation-name: congestiontwo;
      animation-timing-function: linear;
         }  

         @keyframes congestiontwo {
            0% {
               left: 110%;
            }

            30% {
               left: 52%;
            }

            65% {
               left: 40%;
            }

            100% {
              left: -10%;
            }
         } 
         
    .congestionthree {
      animation-duration: 4s;
      animation-name: congestionthree;
      animation-timing-function: linear;
         }  

         @keyframes congestionthree {
            0% {
               left: 110%;
            }

            30% {
               left: 59%;
            }

            70% {
               left: 40%;
            }

            100% {
              left: -10%;
            }
         } 
         

    .congestionfour {
      animation-duration: 4s;
      animation-name: congestionfour;
      animation-timing-function: linear;
         }  

         @keyframes congestionfour {
            0% {
               left: 110%;
            }

            30% {
               left: 66%;
            }

            75% {
               left: 40%;
            }

            100% {
              left: -10%;
            }
         }

   .congestionfive {
      animation-duration: 4s;
      animation-name: congestionfive;
      animation-timing-function: linear;
         }  

         @keyframes congestionfive {
            0% {
               left: 110%;
            }

            30% {
               left: 73%;
            }

            80% {
               left: 40%;
            }

            100% {
              left: -10%;
            }
         }                              







@media only screen and (max-width: 500px) {
   h3 {
      font-size: 18px;
   }
}