/* Fluid Type */
/* Mobile Mixins */
html {
  font-size: 16px; }
  @media screen and (min-width: 320px) {
    html {
      font-size: calc(16px + 4 * ((100vw - 320px) / 680)); } }
  @media screen and (min-width: 1000px) {
    html {
      font-size: 20px; } }

body {
  font: 100% proxima-nova, sans-serif;
  color: #00255b; }

li {
  display: flex; }
  @media (min-width: 0px) and (max-width: 767px) {
    li {
      display: block; } }

wrapper {
  font: 100% proxima-nova, sans-serif;
  position: relative;
  top: -20vh; }

.font-pn-b {
  font: 100% proxima-nova, sans-serif;
  font-weight: 700;
  font-style: normal; }

.font-pn {
  font: 100% proxima-nova, sans-serif;
  font-weight: 400;
  font-style: normal; }

.text-navy {
  color: #00255b; }

.text-blue {
  color: #3040c4; }

.text-green {
  color: #81b3a3; }

.text-dark-pink {
  color: #f36b7f; }

.text-red {
  color: #ca314e; }

.text-sm {
  font-size: small !important; }

.text-md {
  font-size: medium !important; }

.text-lgr {
  font-size: larger !important; }

.text-xl {
  font-size: x-large !important; }

.text-3xl {
  font-size: -webkit-xxx-large; }

.bg-pink {
  background-color: #f3c6bd; }

.bg-blue {
  background-color: #3040c4; }

.bg-green {
  background-color: #81b3a3; }

.bg-beige {
  background-color: #fcf0e3; }

.ml-15 {
  margin-left: 15px !important; }

.mr-15 {
  margin-right: 15px; }

.mt-15 {
  margin-top: 15px; }

.card {
  border-radius: 0px !important;
  border: 0px !important;
  background-color: #fcf0e3 !important; }

.card, .navbar {
  box-shadow: 0px 0px 0px gray !important; }

.div-shadow {
  box-shadow: 0px 18px 20px -7px lightgrey; }

.widget-card {
  box-shadow: -2px 4px 5px lightgrey;
  border-radius: 15px; }

.border-round {
  border-radius: 15px; }

.border-left-data {
  border-left: 1px solid lightgrey; }
  @media (min-width: 0px) and (max-width: 767px) {
    .border-left-data {
      border-left: 0px; } }

.tab-content {
  max-height: 22rem;
  min-height: 22rem; }

.top-bar {
  height: 12rem; }

.top-bar-text {
  font-size: 7vh;
  top: 1.5rem;
  color: white;
  font: 100% proxima-nova, sans-serif;
  font-weight: 700; }
  @media (min-width: 0px) and (max-width: 767px) {
    .top-bar-text {
      font-size: 4vh; } }

#top-heading {
  font-size: 7vh; }
  @media (min-width: 768px) and (max-width: 1023px) {
    #top-heading {
      font-size: 4vh; } }
  @media (min-width: 0px) and (max-width: 767px) {
    #top-heading {
      font-size: 4vh; } }

.welcome-msg {
  top: 1rem;
  left: 2rem;
  font-size: 3.5rem; }

.list-nav-options {
  border-right: 1px solid lightgray; }

/* graph toggle */
.box {
  height: 0px;
  width: 0px; }

.transform {
  -webkit-transition: all 2s ease;
  -moz-transition: all 2s ease;
  -o-transition: all 2s ease;
  -ms-transition: all 2s ease;
  transition: all 2s ease; }

.transform-active {
  position: absolute;
  width: 90%;
  height: 100%; }

#image {
  height: 50px;
  width: 50px;
  background-color: #f8cf61;
  position: absolute;
  bottom: -1rem;
  right: 2rem;
  border-radius: 3rem;
  text-align: center;
  padding-top: .75rem;
  padding-bottom: .75rem;
  cursor: pointer;
  z-index: 3000; }

#image:hover {
  background-color: #ecc048;
  box-shadow: 1px 1px 7px lightgrey; }

#menu {
  height: 100%;
  width: 92%;
  background-color: #fcf0e3;
  display: none;
  position: absolute;
  top: 0;
  position: absolute;
  left: 0rem;
  margin-right: 15px;
  margin-left: 15px;
  border-bottom: 1px solid lightgray;
  overflow: hidden; }

.compare-data {
  height: 25rem; }

.graph-container {
  padding-left: 15px; }

#chartContainer {
  height: 300px; }
  @media (min-width: 0px) and (max-width: 767px) {
    #chartContainer {
      height: 270px; } }

/* Nav */
.nav-pills .nav-link.active, .nav-pills .show > .nav-link {
  color: #002f63 !important;
  background-color: rgba(0, 0, 0, 0) !important; }

.link {
  color: #3040c4; }

.link:hover {
  color: #00255b; }

.nav-item {
  max-width: 33%; }

.nav-text {
  display: -webkit-inline-box; }
  @media (min-width: 0px) and (max-width: 767px) {
    .nav-text {
      display: none; } }

@media (min-width: 0px) and (max-width: 767px) {
  .fas {
    font-size: xx-large; } }

/* Slide Left */
.slide-left {
  width: 100%;
  overflow: hidden; }

.slide-left img {
  animation: slide-left 2s; }

@keyframes slide-left {
  from {
    margin-left: 100%;
    width: 300%; }
  to {
    margin-left: 0%;
    width: 100%; } }
/* Slide Left */
.slideLeft {
  animation-name: slideLeft;
  -webkit-animation-name: slideLeft;
  animation-duration: 1s;
  -webkit-animation-duration: 1s;
  animation-timing-function: ease-in-out;
  -webkit-animation-timing-function: ease-in-out;
  visibility: visible !important; }

@keyframes slideLeft {
  0% {
    transform: translateX(150%); }
  50% {
    transform: translateX(-8%); }
  65% {
    transform: translateX(4%); }
  80% {
    transform: translateX(-4%); }
  95% {
    transform: translateX(2%); }
  100% {
    transform: translateX(0%); } }
@-webkit-keyframes slideLeft {
  0% {
    -webkit-transform: translateX(150%); }
  50% {
    -webkit-transform: translateX(-8%); }
  65% {
    -webkit-transform: translateX(4%); }
  80% {
    -webkit-transform: translateX(-4%); }
  95% {
    -webkit-transform: translateX(2%); }
  100% {
    -webkit-transform: translateX(0%); } }
.slideUp {
  animation-name: slideUp;
  -webkit-animation-name: slideUp;
  animation-duration: 1s;
  -webkit-animation-duration: 1s;
  animation-timing-function: ease;
  -webkit-animation-timing-function: ease;
  visibility: visible !important; }

@keyframes slideUp {
  0% {
    transform: translateY(100%); }
  50% {
    transform: translateY(-8%); }
  65% {
    transform: translateY(4%); }
  80% {
    transform: translateY(-4%); }
  95% {
    transform: translateY(2%); }
  100% {
    transform: translateY(0%); } }
@-webkit-keyframes slideUp {
  0% {
    -webkit-transform: translateY(100%); }
  50% {
    -webkit-transform: translateY(-8%); }
  65% {
    -webkit-transform: translateY(4%); }
  80% {
    -webkit-transform: translateY(-4%); }
  95% {
    -webkit-transform: translateY(2%); }
  100% {
    -webkit-transform: translateY(0%); } }
.bigEntrance {
  animation-name: bigEntrance;
  -webkit-animation-name: bigEntrance;
  animation-duration: 1.6s;
  -webkit-animation-duration: 1.6s;
  animation-timing-function: ease-out;
  -webkit-animation-timing-function: ease-out;
  visibility: visible !important; }

@keyframes bigEntrance {
  0% {
    transform: scale(0.3) rotate(6deg) translateX(-30%) translateY(30%);
    opacity: 0.2; }
  30% {
    transform: scale(1.03) rotate(-2deg) translateX(2%) translateY(-2%);
    opacity: 1; }
  45% {
    transform: scale(0.98) rotate(1deg) translateX(0%) translateY(0%);
    opacity: 1; }
  60% {
    transform: scale(1.01) rotate(-1deg) translateX(0%) translateY(0%);
    opacity: 1; }
  75% {
    transform: scale(0.99) rotate(1deg) translateX(0%) translateY(0%);
    opacity: 1; }
  90% {
    transform: scale(1.01) rotate(0deg) translateX(0%) translateY(0%);
    opacity: 1; }
  100% {
    transform: scale(1) rotate(0deg) translateX(0%) translateY(0%);
    opacity: 1; } }
@-webkit-keyframes bigEntrance {
  0% {
    -webkit-transform: scale(0.3) rotate(6deg) translateX(-30%) translateY(30%);
    opacity: 0.2; }
  30% {
    -webkit-transform: scale(1.03) rotate(-2deg) translateX(2%) translateY(-2%);
    opacity: 1; }
  45% {
    -webkit-transform: scale(0.98) rotate(1deg) translateX(0%) translateY(0%);
    opacity: 1; }
  60% {
    -webkit-transform: scale(1.01) rotate(-1deg) translateX(0%) translateY(0%);
    opacity: 1; }
  75% {
    -webkit-transform: scale(0.99) rotate(1deg) translateX(0%) translateY(0%);
    opacity: 1; }
  90% {
    -webkit-transform: scale(1.01) rotate(0deg) translateX(0%) translateY(0%);
    opacity: 1; }
  100% {
    -webkit-transform: scale(1) rotate(0deg) translateX(0%) translateY(0%);
    opacity: 1; } }
@media only screen and (max-width: 800px) {
  .responsive {
    min-height: 42rem !important; } }
@media only screen and (max-width: 575px) {
  canvas.canvasjs-chart-canvas {
    width: 100%; }

  .graph-container {
    padding-left: 1rem;
    padding-right: 1rem; } }

/*# sourceMappingURL=style.css.map */
