h2 {
  color: #844708;
  text-align: center;
  font-size: 24px;
  font-weight: bold;
}
h3 {
  color: #A5784A;
  text-align: left;
  font-size: 16px;
  line-height: 0em;
}
ol {
  color: #064152;
  text-align: left;
  list-style-type: decimal;
  list-style-position: inside;
}
.myarea {
  position: relative;
  width: 100%;
  padding: 0px;
  margin: 0px;
  display: inline-flex;
  display: -ms-inline-flexbox;
  display: -webkit-inline-flex;
  flex-flow: row wrap;
   -webkit-flex-flow: row wrap;
   -ms-flex-flow: row wrap;
  align-items: flex-start;
   -webkit-align-items: flex-start;
   -ms-flex-align: flex-start;
  align-content: flex-start;
   -webkit-align-content: flex-start;
   -ms-align-content: flex-start;
  justify-content: center;
   -webkit-justify-content: center;
   -ms-justify-content: center;
}
.big_graph {
  position: relative;
  color: #A6D6E4;
  width: 195px;
  height: 170px;
  padding: 0px;
  margin: 1px;
  border-style: none;
  border-width: 1px;
  border-color: grey;
  border-radius: 5px 5px 5px 5px;
  -moz-border-radius: 5px 5px 5px 5px;
  -webkit-border-radius: 5px 5px 5px 5px;
  flex: 0 0 295px;
   -webkit-flex: 0 0 295px;
   -moz-flex: 0 0 295px;
}
.big_graph img {
 display: block;
 width: 99%;
 margin: auto;
 border: 1px solid white;
}
.small_graph {
  position: relative;
  color: #A6D6E4;
  width: 195px;
  height: 180px;
  padding: 0px;
  margin: 1px;
  border-style: none;
  border-width: 1px;
  border-color: grey;
  border-radius: 5px 5px 5px 5px;
  -moz-border-radius: 5px 5px 5px 5px;
  -webkit-border-radius: 5px 5px 5px 5px;
  flex: 0 0 325px;
   -webkit-flex: 0 0 325px;
   -moz-flex: 0 0 325px;
}
.huge_graph {
  position: relative;
  color: #A6D6E4;
  width: 570px;
  height: 350px;
  padding: 0px;
  margin: 1px;
  border-style: none;
  border-width: 1px;
  border-color: grey;
  border-radius: 5px 5px 5px 5px;
  -moz-border-radius: 5px 5px 5px 5px;
  -webkit-border-radius: 5px 5px 5px 5px;
  flex: 0 0 570px;
   -webkit-flex: 0 0 570px;
   -moz-flex: 0 0 570px;
}
.mylink {
  position: absolute;
  bottom: 10px;
  left: 110px;
}
.mylink:link {
  color: #305B67;
  text-decoration: none;
}
.mylink:visited {
  color: #305B67;
  text-decoration: none;
}
.mylink:hover {
  color: #207F9A;
  text-decoration: underline;
}
.big_image {
  position: absolute;
  width: 285px;
  left: 0px;
}
.graph {
  position: absolute;
  width: 560px;
}
.mymaintop {
  position: absolute;
  padding: 5px;
  margin: 5px;
  left: 0px;
  top: 160px;
  width: 50%;
  color: grey;
}
.mysidetop {
  position: absolute;
  padding: 5px;
  margin: 5px;
  left: 150px;
  top: 160px;
  width: 50%;
  color: grey;
}
@media only screen 
and (min-device-width: 320px)
and (max-device-width: 568px) {
   .myarea {
   }
}
@media only screen 
and (min-device-width: 768px) 
and (max-device-width: 1024px) {
   .myarea {
   }
}