body {
  background-color:#1a237e;
  font-family:'Alegreya Sans', sans-serif;
  scroll-behavior:smooth;
}

.navbar-brand {
  font-size:24px;
  font-family:Alegreya, serif;
}

.navbar-brand p {
  font-size:16px;
  font-family:'Alegreya Sans', sans-serif;
  margin-top:-10px;
}

.navbar-brand img {
  margin:4px;
}

.nav-item .fa {
  color:white;
}

.footer-basic .copyright {
  text-align:center;
  font-size:14px;
  color:white;
  margin-top:8px;
  margin-bottom:8px;
}

.cc-zero {
  font-size:0.75em;
  vertical-align:-0.1em;
  padding:0 0.2em;
}

main {
  background-color:#B2EBF2;
  padding-bottom:30px;
  box-shadow:0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}

main .navbar {
  background-color:rgba(0,0,0,0.618);
  padding-top:0;
  padding-bottom:0;
}

#navcol-2 .nav-link.active {
  color:black;
  background-color:rgb(178,235,242);
}

#navcol-2 .nav-link {
  color:white;
  text-transform:uppercase;
  padding-top:16px;
  padding-bottom:16px;
}

main .navbar .navbar-brand, main .navbar .navbar-brand:hover {
  color:#E0E0E0;
  font-size:16px;
  font-family:'Alegreya Sans', sans-serif;
}

h1 {
  text-align:center;
  font-weight:bold;
  padding-top:30px;
}

.card[id] {
  text-align:center;
  background-color:#fffde7;
  box-shadow:0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
  margin:30px;
}

h2 {
  margin-bottom:20px;
}

.row .card {
  border:none;
}

.card-img-overlay {
  position:absolute;
  bottom:0;
  top:auto;
  background-color:rgba(255,255,255,0.75);
  padding:5px;
  max-height:66.667%;
  overflow:hidden;
}

.card-img-overlay h3 {
  font-weight:bold;
  hyphens:auto;
}

.card-img-overlay a {
  color:#0097a7;
}

@media (max-width: 575px) {
  .card-img-overlay h3 {
    font-size:12px;
  }
}

@media (min-width: 576px) {
  .card-img-overlay h3 {
    font-size:16px;
  }
}

@media (min-width: 768px) {
  .card-img-overlay h3 {
    font-size:18px;
  }
}

@media (min-width: 992px) {
  .card-img-overlay h3 {
    font-size:24px;
  }
}

@media (max-width: 575px) {
  .card [class^="col"] {
    padding:7.5px;
  }
}

.card [class^="col"] {
  margin-bottom:20px;
}

@media (max-width: 767px) {
  #img-desktop.card-img {
    display:none !important;
  }
}

@media (min-width: 768px) {
  #img-mobile {
    display:none !important;
  }
}

@media (max-width: 767px) {
  .card[id] {
    margin-left:0;
    margin-right:0;
  }
}

.navbar-collapse {
  text-align:center;
}