:root {
    --main-color:#ccc;
    --accnt-color:#2e86c1;
    --hover-color1:red;
}
@font-face {
    font-family:hark;
    src: url(fonts/PasseroOne-Regular.ttf);
}
@font-face {
    font-family:hark-nexa;
    src: url(fonts/NexaLight.otf);
}
@font-face {
    font-family:hark-myriad;
    src: url(fonts/MyriadPro-Regular.otf);
}
html,body {
  margin: 0px;
  padding: 0px;
  font-size: 14px;
  font-family: hark-myriad;
}
a {text-decoration: none; color: #fff}
#SectionOne {
  width: 100%;
  min-height: 100%;
  float: left;
  background: #253879;
}
#header {
  position: fixed;
  width: 100%;
  height: 60px;
  float: left;
  background: #000;
  /* opacity: 0.7; */
}
.logo {
  background-image: url(images/white.svg);
  background-repeat: no-repeat;
}
.headerlogo {
  margin-left: 5%;
  margin-top: 4px;
  float: left;
  height: 50px;
  color: #fff;
  font-family: hark-nexa;
  font-size: 30px;
  line-height: 50px;
}
.title {
  margin-left: 7px;
  float: left;
  line-height: 60px;
  color: #ccc;
  font-family: hark-nexa;
}
.sub {
  font-size: 20px;
}
.mini {
  font-size: 15px;
}
.content {
  margin-top: 60px;
  width: 100%;
  height: 350px;
  background: #131313;
}
.inputTable {
  float: right;
  margin-top: 15%;
  color: #fff;
}
.outputTable {
  float: left;
  margin-top: 15%;
  margin-left: 20px;
  font-size: 20px;
  font-family: Arial;
  color: #fff;
}
.content table button, input[type=submit] {
  width: 100%;
  padding: 10px;
  border: 0px;
  background: #fff;
  font-size: 18;
  font-family: hark-myriad;
}
.inputBoxes {
  float: left;
  margin-left: 5%;
  width: 45%;
  height: 100%;
  /* background: #aaa; */
}
.outputBoxes {
  float: right;
  margin-right: 5%;
  width: 45%;
  height: 100%;
  /* background: #999; */
}

input,select {
  padding: 10px;
  width: 100%;
}
.recordContainer {
  margin-top:40px;
  width: 100%;
  /* background: #fff; */
}
.showRecords {
  width: 80%;
  margin: 0px auto;
  /* background: #aaa; */
  color: #fff;
  font-size: 18px;
}
.showRecords table {
  width: 100%;
  margin: 0px auto;
  color:#fff;
  font-family:hark-myriad;
  text-align: center;
  padding: 10px;
  border: 1px solid #fff;
  border-collapse: collapse;
}
.showRecords p {
  font-size: 12px;
}
@media screen and (max-width: 600px){
  .content {height: auto;}
  .inputBoxes,.outputBoxes{float: left;width: 100%;height: auto;margin: 0px;padding: 0px 5px 0px 5px}
  .inputTable,.outputTable{float: left;width: 90%;margin: 20px 15px 10px 15px}
  .inputBoxes table {margin-top: 75px;}
  .outputBoxes table {width: 70%;margin-top: 20px;height: 100px;}
  .showRecords {width: 95%;margin: 0px auto;padding: 0px;}
}