@font-face {
  font-family: 'Quicksand';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/Quicksand-Medium.woff2') format('woff2');
}

@font-face {
  font-family: 'Quicksand';
  font-style: normal;
  font-weight: 600;
  src: url('../fonts/Quicksand-Bold.woff2') format('woff2');
}

body {
  font-family: Quicksand,"Segoe UI",Roboto,"Helvetica Neue",-apple-system,BlinkMacSystemFont,Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
}

header, section.dark {
  background-color:#0c3a4a;
}

section {
  background-color:hsl(195, 72%, 95%);
}

header {
  padding: 100px 0px;
  background-image: url('../img/background.png');
  background-size: cover;
  background-repeat: no-repeat;
}

@media (min-width: 768px) {
  header {
    padding: 150px 0px 100px 0px;
  }
}

@media (min-width: 992px) {
  header {
    padding: 280px 0px;
  }
}

header h2 {
  font-size:1.7rem;
  color:#d9d9d9;
}

section {
  padding: 50px 0;
}

@media (min-width: 576px) {
  section {
    padding: 150px 0;
  }
}

.navbar, label, button, a, h1, h2, h3 {
  font-family: Quicksand,"Segoe UI",Roboto,"Helvetica Neue",-apple-system,BlinkMacSystemFont,Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
}

a {
  color:#00acc1;
  transition: color 0.3s ease-in-out;
}

a:hover {
  color:#76e1ee;
}

.navbar .nav-link {
  transition: color 0.3s ease-in-out;
}

.btn-outline-primary {
  /*border-color: #33c9dc;
  color:#33c9dc;*/
  /* border-color:#76e1ee;
  color:#76e1ee; */
  color:#00acc1;
  border-color:#00acc1;
  background-color:#fff;
  box-shadow: 1px 1px 16px rgb(0, 172, 193, 0.2);
}

.btn-outline-primary:hover {
  /* color:#80f9fe; */
  /*background-color:#00a5b9;
  border-color:#00a5b9;*/
  /*background-color:#0c3a4a;
  border-color:#0c3a4a;*/
  /* border-color:#77e1ee; */
  border-color:#76e1ee;
  color:#76e1ee;
  transform: translateY(-1px);
  /* background-color:rgb(118, 225, 238, 0.05); */
  background-color:hsl(187, 78%, 98%)

}

header .btn-outline-primary, section.dark .btn-outline-primary {
  border-color:#76e1ee;
  color:#76e1ee;
  background-color:rgba(255, 255, 255, 0.1);
  box-shadow: 1px 1px 16px rgba(118, 225, 238, 0.4);
}

header .btn-outline-primary:hover, section.dark .btn-outline-primary:hover {
  background-color:rgb(118, 225, 238, 0.25);
}

.btn-outline-secondary {
  color:#ddd;
  border-color:#ddd;
  background-color:rgba(255, 255, 255, 0.1);
  box-shadow: 1px 1px 16px rgba(255, 255, 255, 0.2);
}

.btn-outline-secondary:hover {
  color:#eee;
  border-color:#eee;
  background-color:rgba(255,255,255, 0.2);
  box-shadow: 1px 1px 16px rgba(255, 255, 255, 0.3);
  transform: translateY(-1px);
}

@media (max-width: 992px) {
  .navbar-collapse.collapsing, .navbar-collapse.show {
    background-color:rgba(255, 255, 255, 0.9);
  }

  .navbar-collapse.collapsing a, .navbar-collapse.show a {
    color: #666;
  }

  .navbar-collapse.collapsing a.active, .navbar-collapse.show a.active {
    color: #444;
  }

  .navbar-collapse.collapsing ul, .navbar-collapse.show ul {
    padding: 0.5rem 1rem;
  }
}

/*@media (min-width: 992px) {*/
  #mainNav {
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
    border: none;
    background-color: transparent;
    transition: padding-top 0.3s ease-in-out, padding-bottom 0.3s ease-in-out, background-color 0.3s ease-in-out;
  }
  #mainNav .navbar-brand {
    font-size: 1.5em;
    transition: font-size 0.3s ease-in-out;
    color:#f6f6f6;
  }
  #mainNav .navbar-brand img, #mainNav .navbar-brand svg {
    margin-top: -8px;
    transition: margin-top 0.3s ease-in-out;
  }
  #mainNav.navbar-shrink {
    padding-top: 1rem;
    padding-bottom: 1rem;
    background-color:#0c3a4a;
  }
  #mainNav.navbar-shrink .navbar-brand {
    color:var(--bs-gray-200);
    font-size: 1.25em;
  }
  #mainNav.navbar-shrink .navbar-brand svg,
  #mainNav.navbar-shrink .navbar-brand img {
    margin-top: -2px;
  }
  #mainNav .navbar-nav .nav-item {
    margin-right: 1rem;
  }
  #mainNav .navbar-nav .nav-item:last-child {
    margin-right: 0;
  }
/*}*/

#about {
  background-color:#0c3a4a;
  color:#ddd;
}

.pricing-header {
  background-color:#33c9dc;
  color:#fff;
  border-color:#33c9dc;
}

#pricing .list-group li {
  border-color:#cde9ec;
}

#pricing li.features {
  background-color:#33c9dc;
  text-align:left;
  padding:8px 0px 4px 16px;
  font-size:0.8em;
  text-transform: uppercase;
  color:#fff;
}

@media (min-width: 992px) {
  #pricing .col-lg-4:nth-child(2) {
    margin:-16px -32px;
    padding:0px;
    z-index: 10;
    box-shadow: 0px 0px 8px 1px rgba(0, 0, 0, 0.2);
  }

  #pricing .col-lg-4:nth-child(2) li {
    border-left-width: 0px;
    border-right-width: 0px;
    border-top-width: 0px;
    border-radius:0px;
  }

  #pricing .list-group .list-group-item:nth-child(2) {
    font-size:1.3em;
  }
}

header img {
  max-width: 100%;
}

@media (min-width: 992px) {
  header .col-md-4 {
    text-align: right;
  }
  header .col-md-8 {
    padding-top:48px;
  }
}

footer {
  /* background-color:#9daa62; */
  color:var(--bs-gray-200);
  background-color:#0c3a4a;
  border-top: 1px solid rgba(255,255,255,0.25);
  padding: 64px 0px 128px 0px;
}


footer h4 {
  font-size:1.25em;
}

footer .list-group-item {
  background: transparent;
  border: 0px;
  padding: 5px 0px;
}

footer .list-group-item a {
  text-decoration: none;
}

#contact label {
  color:#ccc;
}

h3 {
  color:#00a5b9;
}

@media (min-width: 992px) {
  #signin {
    border: 1px solid rgba(255,255,255,0.25);
    border-radius:4px;
    background-color:rgba(255, 255, 255, 0.1);
    margin-top:2px;
    padding-top:5px;
    padding-bottom:5px;
    transition: all 0.3s ease-in-out;
  }

  #signin:hover {
    border-color:#ccc;
    transform: translateY(-1px);
  }

  #sign-up-header {
    padding:220px 0px 150px 0px;
  }
}

.btn-primary {
  background-color:#00a5b9;
  border-color:#00a5b9;
  transition:  0.3s ease-in-out;
}

.btn-primary:hover {
  border-color:#33c9dc;
  background-color:#33c9dc;
  transform: translateY(-1px);
  box-shadow: 1px 1px 16px rgb(0, 165, 185, 0.3);
}

.btn-outline-primary:disabled {
  color:#ddd;
}

section.dark table th, section.dark table td {
  border-color:#00a6b950;
  color:#fff;
}

section.dark .text-muted {
  color:#bbb !important;
}

header .form-text {
  color:#ccc;
}

.animated {
  animation-duration: 1s;
  animation-fill-mode: both;
}

@keyframes fadeInDown {
  0% {
     opacity: 0;
     transform: translateY(-20px);
  }
  100% {
     opacity: 1;
     transform: translateY(0);
  }
}

.fadeInDown {
  -webkit-animation-name: fadeInDown;
  animation-name: fadeInDown;
}

@keyframes fadeInUp {
  0% {
     opacity: 0;
     transform: translateY(20px);
  }
  100% {
     opacity: 1;
     transform: translateY(0);
  }
}

.fadeInUp {
  -webkit-animation-name: fadeInUp;
  animation-name: fadeInUp;
}

#signin svg {
  fill: var(--bs-nav-link-color);
  vertical-align: top;
}

#signin:hover svg {
  fill: #eee;
}

button#sign-up-submit svg {
  fill:#fff;
  vertical-align: top;
}

div.marquee-container {
  display: inline-block;
  overflow: hidden;
  height: 1.5em;
  margin:0;
  padding:0;
  transform: translateY(0.4em);
}

ul.marquee {
  padding: 0;
  margin: 0;
  display: inline-block;
  transform: translateY(-0em);
}

ul.marquee > li {
  height:1em;
  margin:0px;
  padding:0px;
  margin-bottom: 1em;
}

.marquee {
  animation: marquee-animation 30s infinite;
}

@keyframes marquee-animation {
  0% {margin-top: 0;}
  5% {margin-top: 0;}
  10% {margin-top: 0em;}
  15% {margin-top: -2em;}
  20% {margin-top: -2em;}
  25% {margin-top: -2em;}
  30% {margin-top: -4em;}
  35% {margin-top: -4em;}
  40% {margin-top: -4em;}
  45% {margin-top: -6em;}
  50% {margin-top: -6em;}
  55% {margin-top: -6em;}
  60% {margin-top: -4em;}
  65% {margin-top: -4em;}
  70% {margin-top: -4em;}
  75% {margin-top: -2em;}
  80% {margin-top: -2em;}
  85% {margin-top: -2em;}
  90% {margin-top: 0;}
  95% {margin-top: 0;}
  100% {margin-top: 0;}
}

#connecting p, #connecting .mb-3 {
  color:#ccc;
}

#connecting strong, #connecting ul {
  color:#fff;
}