body {
  font-family: 'Spectral', serif;
  background: #f3f3f307;
  line-height: 1.2em;
  margin: 0;
}
.master-header {
  background-image: url("../images/banner4.jpg");
  opacity: 0.9;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  background-attachment: scroll;
  width: 100%;
  height: 65vh;
}
/* first navbar with gradient, creating a theme from the blue color from Merril Lynch Bank of America

.navbar {
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  color: white;
  background-image: linear-gradient(to bottom right, @primary-color, @secondary-color);
  background-color: @primary-color;
  padding: auto;
}
*/
.navbartwo {
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  color: white;
  background-color: rgba(1, 32, 105, 0.63);
  padding: auto;
}
.logo {
  min-width: 0;
  margin: 5px;
}
.logoimg {
  width: 6em;
  max-width: 75%;
  max-height: 3.5em;
  margin-top: 1.75em;
  margin-left: 0.25em;
}
.devname {
  padding: 1%;
  color: #f3eded;
  margin-top: 2.5em;
  margin-right: 0.25em;
}
.header-title {
  display: flex;
  justify-content: center;
  letter-spacing: 0.12em;
  line-height: 1em;
  width: 45vw;
}
.header-title p {
  width: 60%;
  font-size: 0.6em;
  text-align: center;
  color: #f3eded;
  border-top: 4px double;
  border-bottom: 4px double;
  border-width: 4px, 0;
  padding: 1em 0em;
}
.header-title p span {
  letter-spacing: none;
  font-size: 2.85em;
  font-weight: bold;
  color: white;
  font-family: 'Oswald', sans-serif;
  line-height: 1.5em;
}
.slogan-statement {
  display: flex;
  align-items: center;
  justify-content: center;
}
.slogan-statement p {
  text-align: center;
  color: white;
  font-size: 3em;
  width: 100%;
  padding-top: 15%;
  font-family: 'Roboto', sans-serif;
  font-weight: 700;
  letter-spacing: 0.05em;
  display: none;
}
.slogan-statement p span {
  line-height: 4em;
  font-size: 0.4em;
  color: #f3eded;
  display: none;
}
.ginventory {
  border-style: solid;
  border-width: 0.1em;
  border-color: #012169;
  border-top: none;
  border-bottom: none;
  text-align: center;
  background-image: url(../images/titlebg.PNG);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}
.inventory-title {
  background-color: rgba(1, 32, 105, 0.171);
  font-family: 'Martel', serif;
  font-size: 2.4em;
  font-weight: bold;
  color: white;
  height: 4vh;
  padding-top: 2%;
}
.canvasjs-chart-container {
  opacity: 0.9;
}
.detailed-inventory {
  border-style: solid;
  border-width: 0.1em;
  border-color: #012169;
  background-image: url(../images/inventorybg.PNG);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}
.buttons-wrapper {
  display: flex;
  flex-flow: row nowrap;
  height: 6vh;
  background: rgba(1, 32, 105, 0.61);
  padding: 1%;
}
.buttons-wrapper button {
  margin-right: 1%;
  margin-left: 1%;
  width: 40%;
  height: 100%;
  border: solid;
  border-radius: 30%;
  display: flex;
  justify-content: center;
}
.buttons-wrapper img {
  height: 100%;
  width: 30%;
}
.buttons-wrapper p {
  font-size: 1.25em;
}
.btn {
  background-color: #d3e0ff;
  color: black;
}
.btn-active {
  background-color: #5287fd;
  color: white;
  font-weight: bold;
}
button:hover {
  background-color: #5287fd;
  color: white;
  font-weight: bold;
}
.cards-main {
  display: flex;
  justify-content: space-evenly;
  flex-wrap: wrap;
  height: 100%;
}
.card {
  width: 35%;
  height: 42vh;
  margin: 1%;
  padding-left: 0;
  display: flex;
  flex-direction: column;
  opacity: 0.8;
  background-color: #d3e0ff;
  opacity: 1;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  background-attachment: scroll;
  border: solid;
  border-color: #d3e0ff;
  box-shadow: 10px 10px 5px #161616;
}
.card-title {
  background-color: #d3e0ff;
  color: black;
  text-align: center;
  height: 7vh;
  display: flex;
  justify-content: flex-start;
}
.card-title img {
  height: 100%;
  width: 25%;
}
.card-image {
  text-align: center;
  height: 25vh;
}
.card-image img {
  height: 100%;
  width: 96%;
}
.card-info {
  display: flex;
  flex-direction: column;
}
.card-type,
.card-brand,
.card-qty {
  height: 100%;
  background-color: #d3e0ff;
  color: black;
  text-align: left;
  padding: 1%;
  padding-left: 3%;
  font-weight: bold;
}
@media (max-width: 720px) {
  .master-header {
    height: 50vh;
  }
  .logo {
    max-width: 5%;
    margin-right: 10%;
  }
  .logoimg {
    min-width: 3.5em;
    max-width: 100%;
    margin-top: 1.5em;
  }
  .devname {
    font-size: 0.6em;
    margin-top: 3em;
    color: #f3eded;
  }
  .header-title {
    width: 65vw;
    letter-spacing: 0.08em;
  }
  .header-title p {
    width: 73%;
    margin-top: 6%;
    margin-bottom: 6%;
    font-size: 0.2em;
  }
  .header-title p span {
    font-size: 5em;
  }
  .slogan-statement p {
    font-size: 1.3em;
    width: 100%;
    padding-top: 15%;
  }
  .slogan-statement p span {
    line-height: 2em;
    font-size: 0.45em;
  }
  .inventory-title {
    font-size: 1.8em;
    padding-top: 3%;
    height: 4vh;
  }
  .buttons-wrapper {
    display: flex;
    flex-flow: column wrap;
    height: 18vh;
  }
  .buttons-wrapper button {
    height: 40%;
    width: 30%;
    margin: 1%;
  }
  .buttons-wrapper button p {
    margin: 0;
    padding-top: 10%;
    font-size: 1.25em;
  }
  .card {
    width: 85%;
    height: 62vh;
    margin-top: 5%;
  }
  .card-title h2 {
    margin-top: 4%;
  }
  .card-title img {
    height: 100%;
    width: 25%;
  }
  .card-image {
    text-align: center;
    height: 40vh;
  }
}
@media (min-width: 1200px) {
  .logo {
    margin-top: 2%;
  }
  .logoimg {
    width: 10em;
    max-height: 6em;
    margin-top: 0.5em;
    margin-left: 0.5em;
  }
  .devname {
    padding: 1%;
    color: #f3eded;
    margin-top: 3%;
    font-size: 1.5em;
  }
  .header-title {
    line-height: 1.25em;
  }
  .header-title p {
    width: 45%;
    margin: 2%;
    font-size: 1em;
  }
  .header-title p span {
    font-size: 2.25em;
  }
  .inventory-title {
    font-size: 2.5em;
    height: 3vh;
    padding-top: 1%;
    padding-bottom: 1%;
  }
  .slogan-statement p {
    font-size: 4em;
    padding-top: 5%;
  }
  .slogan-statement p span {
    line-height: 3em;
    font-size: 0.45em;
  }
  .inventory-title {
    font-size: 3em;
    padding-top: 1.5%;
  }
  .buttons-wrapper {
    height: 6vh;
  }
  .buttons-wrapper button {
    height: 90%;
    width: 40%;
  }
  .buttons-wrapper button p {
    margin: 0;
    padding-top: 3%;
    font-size: 1.7em;
  }
  .card {
    width: 20%;
    height: 42vh;
  }
}