/* 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

*/

* {
   box-sizing: border-box;
}

img {
   width: 100%;
   display: block;
}

body {
/*   background-image:linear-gradient(to bottom right,#000001, #1C1D22, #25262D);
*/   font-family: 'Lato', sans-serif;
   background-color: #f8f8ff;
/*   color: white;*/
   /*font-family: 'Montserrat', sans-serif;*/
}

body {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;}

.bigimage {
/*   position: sticky;*/
   top: 0;
   z-index: -1;
   height: 600px;
   overflow: hidden;
}

.bigimage img {
   width: 100%;
   display: block;
}

.header {
/*   position: absolute;*/
/*   top: -200px;*/
   width: 45%;
   margin: auto;
   font-size: 1.5em;
}

.header h5 {
  margin-top: -20px;
}

.textbox {
/*   background-color: white;*/
/*   padding: 20px 200px;*/
   width: 45%;
   margin: auto;
/*   text-align: justify;*/
   font-size: 1.15em;
/*   font-family: "Georgia";*/
   line-height: 20pt;
   margin-bottom: 100px;
}

.textbox h2 {
  text-align: center;
}

.one {
  margin-top: 50px;
}
.two {
  margin-left: 100px;
/*  float: left;
  overflow: hidden;*/
}

.three {
  margin-left: 600px;
}

/*PIE CHART*/

.piechartbox {
  width: 50%;
  margin: auto;
  text-align: center;
  margin-top: -40px;
  margin-bottom: 100px;
  height: 400px;
/*  border: 1px solid black;*/
}

.piechartbox h2 {
  margin: auto;
  text-align: center;
  margin-bottom: 16px;
}

.button1985 {
/*  position: absolute;
  margin-top: 30px;
  left: 240px;*/
  border-radius: 10%;
  cursor: pointer;
  padding: 5px;
  background-color: lightgray;
}

.button2015 {
/*  position: absolute;
  margin-top: 30px;
  left: 300px;*/
  border-radius: 10%;
  cursor: pointer;
  padding: 5px;
  background-color: lightgray;
}

.colorbox1 {
  position: absolute;
  margin-top: 16px;
  left: 430px;
}

.collegeyes {
  width: 16px;
  height: 16px;
  margin-right: 10px;
  background-color: #7F636E;
  float: left;
}

.colorbox2 {
  position: absolute;
  margin-top: 16px;
  left: 630px;
}

.collegeno {
  width: 16px;
  height: 16px;
  margin-right: 10px;
  background-color: #55868C;
  float: left; 
}

.women {
        margin-top: 50px;
        display: block;
        position: absolute;
        left: 400px;
        width: 200px;
        height: 200px;
        border-radius: 50%;
        background-image: conic-gradient(
            #7F636E 57.6deg, 
            #55868C 0 302.4deg);
}

.men {
        margin-top: 50px;
        display: block;
        position: absolute;
        left: 670px;
        width: 200px;
        height: 200px;
        border-radius: 50%;
        background-image: conic-gradient(
            #7F636E 83.16deg, 
            #55868C 0 276.84deg);
}

.womenlabel {
  position: absolute;
  left: 470px;
  margin-top: 240px;
}

.menlabel {
  position: absolute;
  left: 755px;
  margin-top: 240px;
}

/*DYNAMIC GRAPH*/

.graph {
  width: 360px;
  height: 350px;
    border-left: 1px solid black;
  border-bottom: 1px solid black;
   margin: auto;
   margin-top: 250px;
   margin-bottom: 80px;
   margin-right: 120px;
   position: relative;
   float: right;


}

.graphtitle {
  position: absolute;
  text-align: center;
  top: -120px;
}

.lefttitle {
  position: absolute;
  text-align: center;
  width: 260px;
  bottom: 140px;
  left: -170px;
  transform: rotate(-90deg);
}

.bottomtitle {
  position: absolute;  
  left: 150px;
  bottom: -90px;
}

.bar {
   padding: 10px;
   position: absolute;
   border-bottom: 1px solid black;
   bottom: -1px;
   width: 30px;
   height: 0%;
/*   display: none;*/
}

.numbertop {
  position: absolute;
  top: -10px;
  left: -75px;
}

.bottomlabels {
  width: 100%;
  position: absolute;
  bottom: -50px;
  left: 8px;
}

.bottomlabels p {
  float: left;
  margin-right: 12px;
}

.column1 {
   background-color: #CACAAA;
   left: 30px;
}

.column2 {
   background-color: #EEC584;
   left: 100px;
}

.column3 {
   background-color: #C8AB83;
   left: 170px;
}

.column4 {
   background-color: #55868C;
   left: 240px;
}

.column5 {
  background-color: #7F636E;
  left: 310px;
}


/*AUDIOGRAMS*/

.audioelement {
  float: left;
  position: relative;

}

.keelybox {
  width: 300px;
  height: 300px;
  overflow: hidden;
  margin-left: 100px;
  margin-top: 240px;
   box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.54);
}

.keelybox video {
  width: 100%;

}

.hanbox {
  width: 300px;
  height: 300px;
  overflow: hidden;
  margin-left: 100px;
  margin-top: 100px;
  box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.54);
}

.hanbox video {
  width: 100%;

}

.endpage {
  width: 100%;
  border: 1px solid black;
  position: absolute;
  left: 0px;
  padding: 10px;
  text-align: center;
  overflow: hidden;
  background-color: #f8f8ff;
  line-height: 1.5em;
}

a {
  text-decoration: none;
  color: #EEC584;
}

a:hover {
  cursor: pointer;
  color: #C8AB83;
}


/*media query for responsive design */

@media only screen and (max-width: 640px) {

  .textbox {
    width: 90%;
  }
  


}