/* Buttons */

/* Primary button --------------------------- */

a.primary-button,
a.secondary-button,
a.tertiary-button {
  width: auto;
  align-self: flex-start;
  font-family: "poppins", sans-serif;
  line-height: var(--lh-small);
  font-style: normal;
  font-weight: var(--fw-regular) !important;
  padding: var(--fs-mini) var(--fs-small) calc(var(--fs-mini) - 5px) var(--fs-small);
  border: 2px solid var(--black-00);
  border-radius: 9999px;
  display: inline-block;
  text-decoration: none;
  background-color: transparent;
  margin-top: var(--sp-small);

  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

a.primary-button {
  font-size: var(--fs-small);
  padding: var(--sp-medium) var(--sp-large) calc(var(--sp-medium) - 5px) var(--sp-large) !important;
  border: 2px solid;
}

a.secondary-button {
  font-size: var(--fs-x-mini);
  padding: var(--sp-medium) var(--sp-large) calc(var(--sp-medium) - 3px) var(--sp-large) !important;
  border: 2px solid;
}

a.tertiary-button {
  font-size: var(--fs-x-mini);
  padding: var(--sp-mini) var(--sp-small) calc(var(--sp-mini) - 3px) var(--sp-small) !important;
  border: 2px solid;
}
 
 /* Image */
.bg-image a.primary-button {
  color: var(--black-00);
  border-color: var(--black-00);
}
  .bg-image a.primary-button:hover,
  .bg-image a.primary-button:focus,
  .bg-image a.primary-button:active {
    background-color: var(--novo-green-100);
    color: var(--black-00);
    text-decoration: none;
  }

/* Video */
.bg-video a.primary-button {
  color: var(--black-00);
  border-color: var(--black-00);
}
  .bg-video a.primary-button:hover,
  .bg-video a.primary-button:focus,
  .bg-video a.primary-button:active {
    background-color: var(--novo-green-100);
    color: var(--black-00);
    text-decoration: none;
  }

/* White */
.bg-white a.primary-button,
.bg-white a.secondary-button {
  color: var(--black-100);
  border-color: var(--black-100);
}
  .bg-white a.primary-button:hover,
  .bg-white a.primary-button:focus,
  .bg-white a.primary-button:active {
    background-color: var(--black-10);
    color: var(--black-100);
    text-decoration: none;
  }
  .bg-white a.secondary-button:hover,
  .bg-white a.secondary-button:focus,
  .bg-white a.secondary-button:active {
    background-color: var(--black-10);
    color: var(--black-100);
    text-decoration: none;
  }

/* Green */
.bg-green a.primary-button,
.bg-green a.secondary-button {
  color: var(--black-00);
  border-color: var(--black-00);
}
  .bg-green a.primary-button:hover,
  .bg-green a.primary-button:focus,
  .bg-green a.primary-button:active {
    background-color: var(--novo-green-70);
    color: var(--black-00);
    text-decoration: none;
  }
  .bg-green a.secondary-button:hover,
  .bg-green a.secondary-button:focus,
  .bg-green a.secondary-button:active {
    background-color: var(--novo-green-70);
    color: var(--black-00);
    text-decoration: none;
  }

/* Beige */
.bg-beige a.primary-button,
.bg-beige a.secondary-button {
  color: var(--black-100);
  border-color: var(--black-100);
}
  .bg-beige a.primary-button:hover,
  .bg-beige a.primary-button:focus,
  .bg-beige a.primary-button:active {
    background-color: var(--novo-beige-70);
    color: var(--black-100);
    text-decoration: none;
  }
  .bg-beige a.secondary-button:hover,
  .bg-beige a.secondary-button:focus,
  .bg-beige a.secondary-button:active {
    background-color: var(--novo-beige-70);
    color: var(--black-100);
    text-decoration: none;
  }

/* Gray */
.bg-gray a.primary-button,
.bg-gray a.secondary-button {
  color: var(--black-100);
  border-color: var(--black-100);
}
  .bg-gray a.primary-button:hover,
  .bg-gray a.primary-button:focus,
  .bg-gray a.primary-button:active {
    background-color: var(--black-30);
    color: var(--black-100);
    text-decoration: none;
  }
  .bg-gray a.secondary-button:hover,
  .bg-gray a.secondary-button:focus,
  .bg-gray a.secondary-button:active {
    background-color: var(--black-30);
    color: var(--black-100);
    text-decoration: none;
  }

  /* List-content-column */
.bg-white .list-content-column a.tertiary-button {
  color: var(--black-100);
  border-color: var(--black-100);
}
  .bg-white .list-content-column a.tertiary-button:hover,
  .bg-white .list-content-column a.tertiary-button:focus,
  .bg-white .list-content-column a.tertiary-button:active {
    background-color: var(--black-40);
    color: var(--black-100);
    text-decoration: none;
  }

.bg-green .list-content-column a.tertiary-button {
  color: var(--black-100);
  border-color: var(--novo-green-100);
}
  .bg-green .list-content-column a.tertiary-button:hover,
  .bg-green .list-content-column a.tertiary-button:focus,
  .bg-green .list-content-column a.tertiary-button:active {
    background-color: var(--black-70);
    color: var(--black-100);
    text-decoration: none;
  }

.bg-beige .list-content-column a.tertiary-button {
  color: var(--black-100);
  border-color: var(--novo-beige-100);
}
  .bg-beige .list-content-column a.tertiary-button:hover,
  .bg-beige .list-content-column a.tertiary-button:focus,
  .bg-beige .list-content-column a.tertiary-button:active {
    background-color: var(--novo-beige-70);
    color: var(--black-100);
    text-decoration: none;
  }

.bg-gray .list-content-column a.tertiary-button {
  color: var(--black-100);
  border-color: var(--black-100);
}
  .bg-gray .list-content-column a.tertiary-button:hover,
  .bg-gray .list-content-column a.tertiary-button:focus,
  .bg-gray .list-content-column a.tertiary-button:active {
    background-color: var(--black-30);
    color: var(--black-100);
    text-decoration: none;
  }










/* Media Queries - Large 1025px -> ---------- */
@media screen and (min-width: 64.063em) {

}

/* Media Queries - Medium 640px -> 1024px --- */
@media screen and (max-width: 64em) {

}

/* Media Queries - Small -> 640px ----------- */
@media screen and (max-width: 40em) {



}