/* styles.css 
   Project: New Year's Crashes
   Author: Grace Manthey
   Date: 12/31/19
	
   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;
}

h5 {
   margin-top: 0px;
}

.toggle {

   border-bottom: 2px solid #f3bc44;
   padding-bottom: 10px;
   text-align: right;
   font-size: 13px;

}


.toggle p {
   /*text-decoration: underline;*/
}


.contentcontainer {
   position: relative;
   border: 2px solid hotpink;
   width: 100%;
   height: 100%;
}


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

}
   .photos img {
      width: 100%;
   }

   .viz {
      width: 100%;
   }

      .viobox {
         width: 31%;
         height: 300px;
         margin-top: 160px;
         position: absolute;
         top: 76%;
         left: 18%;
         /*border: 2px solid purple;*/
         z-index: 4;
         display: none;
      }


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

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

      .homelessviolentvspropimage{
         position: absolute;
         padding-top: 60px;
         top: 0px;
         left: 0%;
         width: 100%;

      }

      .homelessviolentvspropimageshadow{
         position: absolute;
         padding-top: 60px;
         top: 0px;
         left: 0%;
         width: 100%;
         /*z-index: 3;*/
         opacity: 0;

      }

/*      .clickhere {
         width: 10%;
         position: absolute;
         bottom: 0;
         right: 0%;
         text-align: center;
         font-size: 10px;
      }*/



         .growpiechart {
            animation-duration: 2s;
            animation-name: growandfadeout;
         }

            @keyframes growandfadeout {
               0% {
                  width: 100%;
                  left: 0%;
                  top: 0%;
                  opacity: 1;
               }

               100% {
                  width: 300%;
                  left:-100%;
                  opacity: 0;
               }
            }


         .shrinkpiechart {
            animation-duration: 2s;
            animation-name: shrinkandfadeout;
         }

            @keyframes shrinkandfadeout {
               0% {
                  width: 300%;
                  left:-100%;
                  opacity: 0;

               }

               100% {
                  width: 100%;
                  left: 0%;
                  top: 0%;
                  opacity: 1;
               }
            }

      .increaseviolent {
         position: absolute;
         top: 0px;
         left: 0%;
         width: 100%;
         display: none;
      }

         .growviolent {
            animation-duration: 2s;
            animation-name: growvio;
         }

            @keyframes growvio {
               0% {
                  width: 50%;
                  left: 25%;
                  opacity: 0;
               }

               100% {
                  width: 100%;
                  left: 0%;
                  opacity: 1;
               }
            }

         .shrinkviolent {
            animation-duration: 2s;
            animation-name: shrinkvio;
         }

            @keyframes shrinkvio {
               0% {
                  width: 100%;
                  left: 0%;
                  opacity: 1;
               }

               100% {
                  width: 50%;
                  left: 25%;
                  opacity: 0;
               }
            }







       /*  .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;
}




/* ___________________MEDIA QUERIES!_________________________________*/

@media only screen and (max-width: 750px) {
   .viobox {
      height: 230px;
   }


}

@media only screen and (max-width: 600px) {
   .viobox {
      height: 170px;
   }


}



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

   .viobox {
      height: 130px;
   }

}