/* LatoLatin-Regular */
  @font-face {
    font-family: 'Lato';
    src: url('../fonts/LatoLatin-Regular.woff2') format('woff2');
    font-style: normal;
    font-weight: normal;
    text-rendering: optimizeLegibility;
  }

  :root {

    /* Accent color */
    --primary-color:                  #619fd7;
    --translucent-primary-color:      rgba(97, 159, 215, 0.15);
    --form-background-color:          rgba(97, 159, 215, 0.05);

    --white-color:                    #ffffff;
    --gray-color:                     #909090;
    --dark-color:                     #010101;

    --navbar-background-color:        #333333;
    --text-color:                     #454545;

    /* Fonts! */
    --base-font-family:               "Lato", -apple-system, BlinkMacSystemFont, sans-serif;
    --base-font-size:                 18px;
    --letter-spacing:                 0.2px;

    /* Font sizing */
    --h1-font-size:                   2.8rem;
    --h2-font-size:                   2.5rem;
    --h3-font-size:                   2.2rem;
    --navbar-brand-font-size:         2.2rem;
    --navbar-link-font-size:          1.10rem;
    --policies-button-font-size:      1.25rem;
    --testimonials-name-font-size:    1.4rem;
    --testimonials-topic-font-size:   .8rem;
    --faq-header-font-size:           1.5rem;
    --submit-button-font-size:        1.4rem;
    --copyright-font-size:            .8rem;

    /* Radii */
    --border-radius-hero-bar:         1.5rem;
    --border-radius-policy-button:    .75rem;
    --border-radius-about-image:      3rem;
    --border-radius-submit-button:    1.2rem;

    --hcheck-value: none;
  }

  html {
    font-size: var(--base-font-size);
    scroll-padding-top: 15vh;
  }


  body {
    font-family: var(--base-font-family);
    letter-spacing: var(--letter-spacing);

    background-image: url('../images/background.svg');
    background-size: auto 100%;
    background-position: bottom;
    background-attachment: local;
    background-repeat: no-repeat;
  }

  /*---------------------------------------
     TYPOGRAPHY
  -----------------------------------------*/

  p {
    color: var(--text-color);
    line-height: 2rem;
  }

  li {
    color: var(--text-color);
    line-height: 2rem;
  }

  h1 {
    font-size: var(--h1-font-size);
  }

  h2 {
    font-size: var(--h2-font-size);
  }

  h3 {
    font-size: var(--h3-font-size);
  }

  /*---------------------------------------
     GENERAL
  -----------------------------------------*/

  * {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
  }

  *::before,
  *::after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
  }

  a {
    color: var(--dark-color);
    text-decoration: none;
    transition: all 0.4s linear;
  }

  a:hover  {
    color: var(--primary-color);
    text-decoration: none;
  }

  .section-padding {
    padding-top: 3rem;
    padding-bottom: 1.5rem;
  }

  ::-webkit-scrollbar {
    display: none;
  }

  /*---------------------------------------
     Navigation Bar
  -----------------------------------------*/

  .navbar {
    display: none;
    background: var(--navbar-background-color);
  }

  .navbar.scroll {
    display: block;
    position: fixed;
  }

  .navbar-brand,
  .navbar-brand:focus {
    font-size: var(--navbar-brand-font-size);
    color: var(--white-color);
    transition: all 0.4s linear;
  }

  .navbar-brand.active,
  .navbar-brand:hover {
    color: var(--primary-color);
  }

  .contact-form #submit-button:hover,
  .navbar {
    background: var(--dark-color);
    color: var(--white-color);
  }

  .navbar-expand-lg .navbar-nav .navbar-link {
    margin: 0 .8rem;
    padding: 0rem;
  }

  .navbar-link,
  .navbar-link:focus {
    font-size: var(--navbar-link-font-size);
    color: var(--gray-color);
    border-bottom: 1px solid rgba(0,0,0,0);
    transition: all 0.4s linear;
  }

  .navbar-link.active,
  .navbar-link:hover {
    color: var(--primary-color);
    border-bottom-color: var(--primary-color);
  }

  .policy-button {
    background: var(--primary-color);
    border: none;
    border-radius: var(--border-radius-policy-button);
    color: var(--dark-color);
    margin: auto;
    padding: .5rem 1.25rem .5rem 1.25rem;
    font-size: var(--policies-button-font-size);
    white-space: nowrap;
  }

  .policy-button:hover,
  .policy-button:focus {
    color: var(--white-color);
    background: var(--dark-color);
  }

  .navbar-toggler {
    border: 0;
    padding: 0;
    cursor: pointer;
    margin: 0 10px 0 0;
    width: 30px;
    height: 35px;
    outline: none;
  }

  .navbar-toggler:focus {
    outline: none;
  }

  .navbar-toggler[aria-expanded="true"] .navbar-toggler-icon {
    background: transparent;
  }

  .navbar-toggler[aria-expanded="true"] .navbar-toggler-icon::before,
  .navbar-toggler[aria-expanded="true"] .navbar-toggler-icon::after {
    transition: top 300ms 50ms ease, -webkit-transform 300ms 350ms ease;
    transition: top 300ms 50ms ease, transform 300ms 350ms ease;
    transition: top 300ms 50ms ease, transform 300ms 350ms ease, -webkit-transform 300ms 350ms ease;
    top: 0;
  }

  .navbar-toggler[aria-expanded="true"] .navbar-toggler-icon::before {
    transform: rotate(45deg);
  }

  .navbar-toggler[aria-expanded="true"] .navbar-toggler-icon::after {
    transform: rotate(-45deg);
  }

  .navbar-toggler .navbar-toggler-icon {
    background: var(--white-color);
    transition: 10ms 300ms ease;
    display: block;
    width: 30px;
    height: 2px;
    position: relative;
  }

  .navbar-toggler .navbar-toggler-icon::before,
  .navbar-toggler .navbar-toggler-icon::after {
    transition: top 300ms 350ms ease, -webkit-transform 300ms 50ms ease;
    transition: top 300ms 350ms ease, transform 300ms 50ms ease;
    transition: top 300ms 350ms ease, transform 300ms 50ms ease, -webkit-transform 300ms 50ms ease;
    position: absolute;
    right: 0;
    left: 0;
    background: var(--white-color);
    width: 30px;
    height: 2px;
    content: '';
  }

  .navbar-toggler .navbar-toggler-icon::before {
    top: -8px;
  }

  .navbar-toggler .navbar-toggler-icon::after {
    top: 8px;
  }

  /*---------------------------------------
     Hero
  -----------------------------------------*/

  .hero {
    min-height: 100vh;
    background-image: radial-gradient(ellipse at top, var(--white-color), transparent)
  }

  .hero-text {
    text-align: center;
  }

  .hero-bar {
    border-radius: var(--border-radius-hero-bar);
    display: inline-block;
    margin: 0.5rem auto;
    padding: 1rem 1.5rem 1rem 1.5rem;
    min-height: 60px;
  }

  .email-bar {
    background: var(--primary-color);
    color: var(--dark-color);
  }

  .slogan-bar {
    background: var(--dark-color);
    color: var(--white-color);
  }

  .email-bar:hover {
    background: var(--dark-color);
    color: var(--white-color);
  }

  /*---------------------------------------
     Intro
  -----------------------------------------*/

  /*---------------------------------------
     About
  -----------------------------------------*/

  .about-image {
    border-radius: var(--border-radius-about-image);
  }

  /*---------------------------------------
     Testimonials
  -----------------------------------------*/

  .testimonials {
    background: var(--translucent-primary-color);
  }

  .carousel-inner {
    padding: 0 2rem 0 2rem;
  }

  .testimonials-name {
    font-size: var(--testimonials-name-font-size);
    font-weight: bold;
  }

  .testimonials-topic {
    font-size: var(--testimonials-topic-font-size);
  }

  .testimonials-info {
    padding: 0 1rem 0 1rem;
    height: 250px;
  }

  .carousel-control-prev,
  .carousel-control-next{
    filter: invert(100%);
      bottom: 47%;
      width: 3%;
  }

  /*---------------------------------------
     FAQ
  -----------------------------------------*/

  .faq .accordion-item {
    background: rgba(255, 255, 255, 0);
  }

  .faq .accordion-header {
    padding: 0;
    background: var(--translucent-primary-color)
  }

  .faq .button-link {
    color: var(--dark-color);
    font-size: var(--faq-header-font-size);
    letter-spacing: var(--letter-spacing);
    text-align: left;
    display: block;
    width: 100%;
    padding: 1rem 2rem;
  }

  .faq .button-link:focus,
  .faq .button-link:hover {
    box-shadow: none;
    color: var(--dark-color);
    text-decoration: none;
  }

  .faq .accordion-body {
    padding: 2rem;
    background: rgba(255, 255, 255, 0)
  }

  /*---------------------------------------
     Contact
  -----------------------------------------*/

  .contact-info-text {
    display: block;
    margin: 1.5rem 2rem 0 2rem;
  }

  .contact-form{
    border: 1px solid var(--gray-color);
    border-radius: .3rem;
    background: var(--form-background-color);
    padding: .5rem .5rem .5rem .5rem;
  }

  .contact-form .form-control {
    background: var(--translucent-primary-color);
    border: 1px solid var(--gray-color);
    box-shadow: none;
    border-radius: .3rem;
    -webkit-appearance: none;
    outline: none;
    color: var(--dark-color);
    padding-left: .5rem;
    cursor: text;
    margin: 0 0 1.5rem 0;
    font-size: 0.8rem;
  }

  .contact-form .form-control,
  .webform-label {
    touch-action: manipulation;
  }

  .contact-form .form-control:placeholder-shown + .webform-label {
    cursor: text;
    white-space: nowrap;
  }

  .webform-label {
    margin: 0 0 0 .75rem;
    font-size: .8rem;
  }

  .contact-form #submit-button {
    background: var(--primary-color);
    border: none;
    border-radius: var(--border-radius-submit-button);
    color: var(--dark-color);
    font-size: var(--submit-button-font-size);
    line-height: 0;
    white-space: nowrap;
    margin: auto;
    padding: 1.5rem .8rem 1.5rem .8rem;
    cursor: pointer;
    max-width: 190px;
    transition: all 0.4s linear;
  }

  .hcheck {
    display:var(--hcheck-value);
  }

  .copyright-text {
    font-size: var(--copyright-font-size);
    text-align: center;
  }

  /*---------------------------------------
     Responsive Styles
  -----------------------------------------*/

  @media (min-width: 768px) {

    .carousel-inner .carousel-item.active,
    .carousel-inner .carousel-item-next,
    .carousel-inner .carousel-item-prev {
      display: flex;
      transition-property: transform, opacity;
      transition-duration: .3s;
    }

    .carousel-inner .carousel-item-end.active,
    .carousel-inner .carousel-item-next {
      transform: translateX(33.334%);
      opacity: 0;
    }

    .carousel-inner .carousel-item-start.active,
    .carousel-inner .carousel-item-prev {
      transform: translateX(-33.334%);
      opacity: 0;
    }

    .carousel-inner .carousel-item-end,
    .carousel-inner .carousel-item-start {
      transform: translateX(0);
      opacity: 1;
    }

  }

  @media screen and (min-width: 992px) and (max-width: 1199px) {

    html{
      font-size: 15px;
    }

    h3 {
      font-size: 2rem;
    }

  }

  /* Mobile formatting */
  @media screen and (max-width: 991px) {

    .navbar-expand-lg .navbar-nav .navbar-link {
      display: inline-block;
      margin: 0.4rem 2.2rem;
    }

    .policy-button {
      margin: 0.4rem 1rem;
    }

  }

  @media screen and (min-width: 768px) and (max-width: 991px) {

    html{
      font-size: 11.5px;
    }

    h1 {
      font-size: 2.5rem;
    }

    h2 {
      font-size: 2.3rem;
    }

    h3 {
      font-size: 1.8rem;
    }

  }

  /* Mobile carousel */
  @media (max-width: 767px) {

    .carousel-inner .carousel-item > div {
        display: none;
    }

    .carousel-inner .carousel-item > div:first-child {
        display: block;
    }

  }

  @media screen and (min-width: 576px) and (max-width: 767px) {

    html{
      font-size: 17.5px;
    }

    h1 {
      font-size: 1.6rem;
    }

    h2 {
      font-size: 2rem;
    }

    h3 {
      font-size: 1.6rem;
    }

  }

  /* Mobile phone portrait formatting */

  @media screen and (max-width: 575px) {
    h1 {
      font-size: 2.5rem;
    }

    h2 {
      font-size: 2.2rem;
    }

    h3 {
      font-size: 1.6rem;
    }
  }

  @media screen and (min-width: 551px) and (max-width: 575px) {

    html{
      font-size: 17.5px;
    }

  }

  @media screen and (min-width: 526px) and (max-width: 550px) {

    html{
      font-size: 17px;
    }

  }

  @media screen and (min-width: 501px) and (max-width: 525px) {

    html{
      font-size: 16px;
    }

  }

  @media screen and (min-width: 476px) and (max-width: 500px) {

    html{
      font-size: 15px;
    }

  }

  @media screen and (min-width: 426px) and (max-width: 475px) {

    html{
      font-size: 13.5px;
    }

    .testimonials-info {
      height: 200px;
    }

  }

  @media screen and (min-width: 401px) and (max-width: 425px) {

    html{
      font-size: 12.5px;
    }

    .testimonials-info {
      height: 200px;
    }

  }

  @media screen and (min-width: 351px) and (max-width: 400px) {

    html{
      font-size: 11px;
    }

    .testimonials-info {
      height: 180px;
    }

  }

  @media screen and (max-width: 350px) {

    html{
      font-size: 10px;
    }

    .testimonials-info {
      height: 160px;
    }

  }