@font-face {
  font-family: 'Montserrat-Thin';
  src: url(./font/Montserrat/Montserrat-Thin.ttf);
}

@font-face {
  font-family: 'Montserrat';
  src: url(./font/Montserrat/Montserrat-Regular.ttf);
}
@font-face {
  font-family: 'Montserrat-Bold';
  src: url(./font/Montserrat/Montserrat-Bold.ttf);
}
@font-face {
  font-family: 'Montserrat-ExtraBold';
  src: url(./font/Montserrat/Montserrat-ExtraBold.ttf);
}

@font-face {
  font-family: 'Arch-Grotesque';
  src: url(./acherusgrotesque-regular.otf);
}

body {
  font-family: 'Arch-Grotesque';
  color: #0C078F;
  display: block;
  align-items: center;
  margin: 0px;
  box-sizing: border-box;
  background-color: #F7F8F8;
  letter-spacing: .9px;
}

.fullContainer {
  font-family: 'Arch-Grotesque';
  align-items: center;
  display: block;
  width: 100%;
}

header {
  display: flex;
  text-align: left;
  height: 80px;
  width: 100%;
  background-color: #06D0FF;
  float: left;
}

header h1 {
  font-size: 2.5em;
  color: white;
  text-shadow: 2px 2px #1100BF;
  margin: 0px 2% 0px 4%;
  line-height:80px;
  position: relative;
  top: 5px;
  float: left;
}

.navbar {
  width:100%;
}

nav {
  float: right;
  right: 0px;
  margin: 0px 4% 0px 0px;
  height: 100%;
}

header ul {
  display: flex;
  flex-direction: row;
  text-align: right;
  font-size: 1.35em;
  margin: auto;
  position: relative;
  top: 32px;
}

nav li {
  list-style-type: none;
  margin: 0px 10px 0px 10px;
  color: white;
  text-shadow: 1px 1px #1100BF;
}

svg {
  z-index: 100;
}

.imgContainer {
  width: 100%;
}

.topPageSection {
  width: 100%;
  padding: 3% 8% 3% 8%;
  clear: both;
  box-sizing: border-box;
  height: auto;
}

.introImg {
  height: 150px;
  margin: 0px auto;
}

.topPageSection h2 {
  width: 100%;
  font-size: 1.15em;
}

.topPageSection .borderDiv {
  height: 0px;
  width: 80%;
  border: 2px #FFA246 solid;
  margin: 10px auto;
}

.topPageSection p {
  margin: 0px auto;
  background-color: #4CDDFF;
  color: ;
  border-radius: 3px;
  padding: 5%;
  box-shadow: 0px 5px 6px rgba(0,0,0,0.25), 0 5px 20px rgba(0,0,0,0.23);
  height: 11%;
}

.sectionHeader {
  width: 100%;
  margin: 5% auto;
  text-align: center;
}

.sectionHeader h2 {
  width: 80%;
  margin: auto;
}

.flexContainer {
  display: flex;
  flex-direction: row;
  height: auto;
}

.flexContentBox {
  display: flex;
  flex-direction: column;
  width: 33%;
  margin: 0px auto;
  padding: 0px 2%;
  text-align: center;
  height: auto;
  clear: both;
}

.flexContentBox h2 {
  width: 100%;
  font-size: 1.25em;
  margin-top:0px;
}


.mainPageSection {
  width: 100%;
  padding: 3% 8% 3% 8%;
  clear: both;
  box-sizing: border-box;
  text-align: left;
  height: auto;
}

.mainPageSection h2 {
  text-align: center;
}

.contentBoxRight {
  width:100%;
}

.contentBoxLeft {
  width: 100%;
}

.pDescripLeft {
  color: #ffffff;
  float: left;
  margin-bottom: 5%;
  margin-left: 5%;
  background-color: #6e60ff;
  border-radius: 3px;
  padding: 2% 2% 2% 4%;
  box-shadow: 0px 5px 6px rgba(0,0,0,0.25), 0 5px 20px rgba(0,0,0,0.23);
  width: 45%;
  height: 45%;
  box-sizing: border-box;
}

.pDescripRight {
  color: #ffffff;
  float: right;
  margin-bottom: 5%;
  margin-right: 5%;
  background-color: #6e60ff;
  border-radius: 3px;
  padding: 2% 2% 2% 4%;
  box-shadow: 0px 5px 6px rgba(0,0,0,0.25), 0 5px 20px rgba(0,0,0,0.23);
  width: 45%;
  height: 52%;
  box-sizing: border-box;
}

#flexContent {
  width: 50%;
  text-align: left;
}

#dataCircles {
  margin-left: 5%;
  float:left;
  height:50%;
  position: relative;
}

#dashboard {
  height: 45%;
      margin-right: 5%;
      float: right;
      border-radius: 3px;
      box-shadow: 0px 5px 6px rgba(0,0,0,0.25), 0 5px 20px rgba(0,0,0,0.23);
}

#bottomPage {
  text-align: center;
  height: auto;
}

#imgFirst {
  width: auto;
}

#bottomPage h1 {
  font-size: 1.7em;
  margin: 2% auto;
  width: 80%;
}

#bottomPage h2 {
  font-size: 1.3em;
  margin: 5% auto;
  background-color: #4CDDFF;
  border-radius: 3px;
  padding: 4%;
  box-shadow: 0px 5px 6px rgba(0,0,0,0.25), 0 5px 20px rgba(0,0,0,0.23);
  width: 52%;
}

#bottomPage .borderDiv {
  height: 0px;
  width: 60%;
  border: 2px #FFA246 solid;
  margin: 10px auto;
}

footer {
  background-color: #06d0ff;
  height: 50px;
  font-size: .65em;
  letter-spacing: .75px;
  padding: 4px;
}

/*Top breaks at 946, all breaks at 990*/

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

.flexContainer {
  flex-direction: column;
}

.flexContentBox {
  width: 70%;
  margin: 5% auto;
}

.topPageSection p {
  height: auto;
  padding: 2%;
}

.pDescripRight, .pDescripLeft {
  float: none;
  width: 80%;
  margin: 5% auto;
  height: auto;
}

#dataCircles, #dashboard {
  float: none;
  height: 50%;
  margin: 5% auto;
  display: block;
}

#bottomPage h1 {
  font-size: 1.2em;
  margin: 5% auto;
}

#bottomPage h2 {
  margin: 13% auto;
  padding: 7%;
}

#bottomPage h3 {
  margin: 5% auto;
}


}

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

  #dataCircles, #dashboard {
    height: 30%;
  }

  .topPageSection img {
    margin-top: 15%;
  }

}

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

  #dataCircles, #dashboard {
    height: 30%;
  }

  .pDescripRight, .pDescripLeft {
    width: 90%;
  }

  .flexContentBox {
    width: 90%;
  }

  h2 {
    font-size: 1.15em;
  }




}