/* styles.css 
   Project: 
   Author: 
   Date: 
	
   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 {
   height: 100vh;
   padding: 30px 60px;
   background: linear-gradient(0deg, rgba(178,215,251,1) 0%, rgba(216,232,255,1) 19%, rgba(255,255,255,1) 100%);
}

.content {
   max-width: 600px;
   margin: auto;
}

.section {
   position: relative;
}

.sectiontitle h1 {
   text-align: center;
   border-bottom: 2px solid navy;
}

.sectiontitle p {
   text-align: center;
   font-size: 14px;
}


#custom-handle {
    width: 4em;
    height: 1.6em;
    top: 50%;
    margin-top: -.8em;
    text-align: center;
    line-height: 1.6em;
    border-radius: 2em;
  }

#dollar-custom-handle {
    width: 4em;
    height: 1.6em;
    top: 50%;
    margin-top: -.8em;
    text-align: center;
    line-height: 1.6em;
    border-radius: 2em;
  }  

#famamount {
   display: none;
}

#dollaramount {
   display: none;
}

.output {
   text-align: center;
/*   width: 70%;
   margin:auto;
   background-color: rgba(255,255,255,0.6);*/
}

.moneyoutput {
   text-align: left;
   position: relative;
}


.textoutput {
   margin-top: 20px;
}

   .textoutput p {
      margin: 0px;
   }

.label {
   font-size: 30px;
   color: navy;
   margin: 0px;
}
#deaths, #family, #dollardeaths, #money {
   color: navy;
   border: 0px;
   font-weight: bold;
   font-size: 4em;
} 

.backgroundphoto {
   position: absolute;
   z-index: -1;
   width: 100%;
   bottom: 0px;
   left:0px;
   opacity: 0.4;
}

   .innerbgphoto {
      max-width: 600px;
      /*padding: 50px;*/
      margin: auto;
   }

   .backgroundphoto img {
      width: 100%;
      margin: auto;
   }

.outerlegend {
   max-width: 40%;
   margin: 10px auto;
}

.legend {
   display: flex;
   margin: auto;
   width: 100%;
   align-items: center;
  /* border: 2px solid hotpink;*/
}

.smallstack {
   width: 50%;
} 

   .smallstack img {
      width: 100%;
   }

.legendlabel {
   width: 50%;
   font-size: 14px;

}   

.stack {
   width: 250px;
   position: absolute;
   bottom: -30px;
   left: 40%;
   z-index: -1;
   opacity: 0;
}

   .money0 {
      opacity: 1;
   }

   /*.money1 {
      bottom: -60px;
   }

   .money2 {
      bottom: -40px;
   }

   .money3 {
      bottom: -20px;
   }

   .money4 {
      bottom: 0px;
   }

   .money5 {
      bottom: 20px;
   }

   .money6 {
      bottom: 40px;
   }

   .money7 {
      bottom: 60px;
   }

   .money8 {
      bottom: 80px;
   }

   .money9 {
      bottom: 100px;
   }

   .money10 {
      bottom: 120px;
   }*/




   .stack img {
      width: 100%;
   }

.source {
   font-size: 11px;
   font-style: italic;
}

@media only screen and (max-width: 640px) {
   body {
      padding: 20px 20px;
   }

   .stack {
      left: 150px;
   }

   .backgroundphoto {
      bottom: 40px;
   }

   .slideyslide {
      margin: 0px 30px;
   }


}


@media only screen and (max-width: 460px) {
   .stack {
      left: 30%;
      width: 190px;
      bottom: 83px;
   }

   .backgroundphoto {
      bottom: 75px;
   }

   .slideyslide {
      margin: 0px 35px;
   }

   .textoutput p {
      text-shadow: 0px 0px 5px white;
   }
}