body {
    font-family: 'Work Sans', 'Roboto', sans-serif;
    font-weight: 400;
    font-size: 16px;
    color: var(--body-color);
}

@import url('https://fonts.googleapis.com/css2?family=Marcellus&display=swap');
h1, h2, h3, h4, h5, h6 {
    font-weight: 500 !important;
}

/* --- Colors --- */

:root {
    --main: #00A1EA;
    --main-light: #d3d9d7;
    --main-dark: #7c7472;
    --accent: #fcf1ef;
    --body-color: #212529;
    --cta-green: #00DBC4;
    --cta-green-dark: #06AA98;
    --grey: #ced4da;
    --grey-dark: #333333;
    --grey-light: #fafafa;
    --footer-bg-color: ;
    --navbar-bg-color ;
}


.btn-principal {
  position: relative;
  overflow: hidden;
  color: var(--main-dark)!important;
  background: none;
  border-color: var(--main-dark)!important;
  -webkit-box-shadow: none;
  box-shadow: none;
  z-index: 1;
}
.btn-principal::before {
  content: ' ';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 0;
  background-color: var(--main)!important;
  z-index: -1;
  transition: all 0.3s cubic-bezier(0, 1, 1, 1);
}
@media (prefers-reduced-motion: reduce) {
  .btn-principal::before {
    transition: none;
  }
}
.btn-principal:hover {
  color: white!important;
  background: none;
  border-color: var(--main)!important;
}
.btn-principal:hover::before {
  height: 100%;
}
.btn-principal:focus, .btn-principal.focus {
  background: none;
  border-color: var(--main);
}
.btn-principal.disabled, .btn-principal:disabled {
  color: var(--main);
  background: none;
  border-color: var(--main);
}
.btn-principal.disabled::before, .btn-principal:disabled::before {
  width: 0;
}
.btn-principal:not(:disabled):not(.disabled):active, .btn-principal:not(:disabled):not(.disabled).active,
.show > .btn-principal.dropdown-toggle {
  background: none;
  border-color: var(--main);
}
.btn-second {
  position: relative;
  overflow: hidden;
  color: white!important;
  background: none;
  border-color: white!important;
  -webkit-box-shadow: none;
  box-shadow: none;
  z-index: 1;
}
.btn-second::before {
  content: ' ';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 0;
  background-color: white!important;
  z-index: -1;
  transition: all 0.3s cubic-bezier(0, 1, 1, 1);
}
@media (prefers-reduced-motion: reduce) {
  .btn-second::before {
    transition: none;
  }
}
.btn-second:hover {
  color: var(--main)!important;
  background: none;
  border-color: white!important;
}
.btn-second:hover::before {
  height: 100%;
}
.btn-second:focus, .btn-second.focus {
  background: none;
  border-color: var(--main);
}
.btn-second.disabled, .btn-second:disabled {
  color: var(--main);
  background: none;
  border-color: var(--main);
}
.btn-second.disabled::before, .btn-second:disabled::before {
  width: 0;
}
.btn-second:not(:disabled):not(.disabled):active, .btn-second:not(:disabled):not(.disabled).active,
.show > .btn-second.dropdown-toggle {
  background: none;
  border-color: var(--main);
}
.btn-third {
  position: relative;
  overflow: hidden;
  color: white!important;
  background: var(--main)!important;
  border-color: var(--main)!important;
  -webkit-box-shadow: none;
  box-shadow: none;
  z-index: 1;
}
.btn-third::before {
  content: ' ';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 0;
  background-color: white!important;
  z-index: -1;
  transition: all 0.3s cubic-bezier(0, 1, 1, 1);
}
@media (prefers-reduced-motion: reduce) {
  .btn-third::before {
    transition: none;
  }
}
.btn-third:hover {
  color: var(--main)!important;
  background: none;
  border-color: white!important;
}
.btn-third:hover::before {
  height: 100%;
}
.btn-third:focus, .btn-third.focus {
  background: none;
  border-color: var(--main);
}
.btn-third.disabled, .btn-third:disabled {
  color: var(--main);
  background: none;
  border-color: var(--main);
}
.btn-third.disabled::before, .btn-third:disabled::before {
  width: 0;
}
.btn-third:not(:disabled):not(.disabled):active, .btn-third:not(:disabled):not(.disabled).active,
.show > .btn-third.dropdown-toggle {
  background: none;
  border-color: var(--main);
}