@import url('blocks.css');
@import url('components.css');

/* Global */

:root {
  --cti-red: #C4767C;
  --cti-rgb-red: 196, 118, 124;
  --cti-dark-red: #a5474e;
  --cti-dark-blue: #0097AD;
  --cti-darker-blue: #006180;
  --cti-light-blue: #D9EEF2;
  --cti-grey: #4C5C63;
  --cti-text-dark-blue: #00627F;
  --cti-text-blue: #0097AD;
  --cti-text-light-blue: #9AD4DE;

  --cti-border-radius: 30px;

  --cti-p-font-size: 1.375rem;
  --cti-nav-font-size: 1.25rem;
  --cti-hero-font-size: 1.5rem;
  --cti-btn-font-size: 1.25rem;
  --cti-caption-font-size: 1.25rem;
  --cti-check-font-size: 1rem;
  --cti-h1-font-size: 3rem;
  --cti-h3-font-size: 2rem;
  --cti-bold-weight: 700;
}
@media (max-width: 767px) {
  :root {
    --cti-p-font-size: 1rem;
    --cti-btn-font-size: 1rem;
    --cti-caption-font-size: 0.875rem;
    --cti-check-font-size: 0.875rem;
    --cti-h1-font-size: 2rem;
    --cti-h3-font-size: 1.5rem;
  }
}

@font-face {
  font-family: 'Lato';
  src: url('../fonts/lato-bold-webfont.woff2') format('woff2'),
       url('../fonts/lato-bold-webfont.woff') format('woff'),
       url('../fonts/Lato-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
}
@font-face {
  font-family: 'Lato';
  src: url('../fonts/lato-italic-webfont.woff2') format('woff2'),
       url('../fonts/lato-italic-webfont.woff') format('woff'),
       url('../fonts/Lato-Italic.ttf') format('truetype');
  font-weight: 400;
  font-style: italic;
}
@font-face {
  font-family: 'Lato';
  src: url('../fonts/lato-light-webfont.woff2') format('woff2'),
       url('../fonts/lato-light-webfont.woff') format('woff'),
       url('../fonts/Lato-Light.ttf') format('truetype');
  font-weight: 300;
  font-style: normal;
}
@font-face {
  font-family: 'Lato';
  src: url('../fonts/lato-regular-webfont.woff2') format('woff2'),
       url('../fonts/lato-regular-webfont.woff') format('woff'),
       url('../fonts/Lato-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
}

*:focus-visible {
  box-shadow: 0 0 0 .25rem rgba(0, 151, 173, .25) !important;
}

body {
  font-family: 'Lato', sans-serif !important;
  font-weight: 400 !important;
  overflow-x: hidden;
}

p {
  font-size: var(--cti-p-font-size) !important;
  margin-bottom: 0 !important;
}
h1, h2 {
  font-weight: var(--cti-bold-weight) !important;
  font-size: var(--cti-h1-font-size) !important;
  color: var(--cti-text-dark-blue) !important;
}
h3 {
  font-size: var(--cti-h3-font-size) !important;
  font-weight: var(--cti-bold-weight) !important;
}

/* Navbar */

.top-divider {
  height: 8px;
  width: 100vw;
  background: var(--cti-dark-blue);
}
.bottom-divider {
  height: 8px !important;
  border-radius: 0 !important;
  width: 100vw;
  background: var(--cti-light-blue) !important;
}
.progress-bar {
  height: 8px !important;
  background-color: var(--cti-dark-blue) !important;
}

.navbar {
  padding: 1.5rem 0 1rem 0 !important;
}
.navbar-brand {
  width: 40%;
}
.nav-link {
  height: 38px !important;
  font-size: var(--cti-nav-font-size) !important;
  color: var(--cti-text-blue) !important;
  padding: 7px 15px !important;
  margin: 0 5px !important;
  border-radius: var(--cti-border-radius);
  display: inline-flex !important;
  align-items: center;
  transition: 0.5s;
}
.nav-link.active {
  border: 2px solid var(--cti-dark-blue);
}
.nav-link:hover {
  background-color: var(--cti-light-blue);
}
.login-button {
  margin: 0 20px !important;
}
@media (max-width: 991px) {
  .login-button {
    margin: 0 !important;
  }
}

html {
  scroll-padding-top: 108px;
}

/* Footer */

.footer {
  background-color: var(--cti-darker-blue);
  color: white;
}
.text-dark-highlight {
  color: var(--cti-text-light-blue);
}
.footer-column {
  margin: 0 !important;
  padding: 0 !important;
  > p {
    margin: 0.1em !important;
  }
}
a[href^="mailto:"], a[href^="tel:"] {
  color: white !important;
  text-decoration: none !important;
}
a[href^="mailto:"]:hover, a[href^="tel:"]:hover {
  text-decoration: underline !important;
}
.footer-element {
  margin: 2em 0;
}
@media (max-width: 991px) {
  .footer-element {
    margin: 1em 0 !important;
  }
}
.footer-image {
  margin-top: 2em;
}
.legal-buttons > .btn {
  margin: 0 1em !important;
}
@media (min-width: 382px) {
  .legal-buttons > .btn:first-child {
    margin-left: 0 !important;
  }
}
@media (max-width: 381px) {
  .legal-buttons > .btn {
    margin: .5em 1em !important;
  }
}