@font-face {
  font-family: 'Inter';
  src: url("/assets/fonts/Inter.ttf") format("truetype");
  font-weight: 100 900;
  font-display: swap;
  font-style: normal; }
@font-face {
  font-family: 'Formula Condensed';
  src: url("/assets/fonts/PPFormulaCondensed-Variable.ttf") format("truetype");
  font-weight: 100 900;
  font-display: swap;
  font-style: normal; }
.p-2 {
  padding-top: 1rem;
  padding-bottom: 1rem;
  padding-left: 1rem;
  padding-right: 1rem; }

.py-2 {
  padding-top: 1rem;
  padding-bottom: 1rem; }

.flex {
  display: flex; }

.flex-col {
  flex-direction: column; }

.flex-row {
  flex-direction: row; }

.justify-between {
  justify-content: space-between; }

.items-center {
  align-items: center; }

* {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale; }

html, body {
  font-family: "Inter", -apple-system, system-ui, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  font-size: 1rem;
  line-height: 1.5;
  background-color: snow;
  scroll-behavior: smooth;
  color: #444; }

h1, h2, h3, h4, h5, b {
  font-weight: 700; }

input {
  border-radius: 0;
  -webkit-appearance: none; }

.container {
  max-width: 84rem;
  margin: 0 auto; }
  .container.fourohfour {
    text-align: center;
    padding: 2rem 0; }

a, a:visited {
  color: #821767;
  text-decoration: none; }

a:hover, a:active, a:focus {
  color: black; }

.btn {
  margin: 0.3rem;
  padding: 0.5rem 0.75rem 0.6rem;
  background-color: #821767;
  color: white;
  text-decoration: none;
  border-radius: 4px;
  border: none;
  font-weight: bold; }

.btn:hover, .btn:focus {
  background-color: #32267A;
  color: white; }

.btn:visited {
  color: white; }

.inline-flex {
  display: inline-flex; }

html {
  padding: 0;
  height: 100%; }

body {
  margin: 0;
  height: 100%;
  display: flex;
  flex-direction: column; }

.page-content {
  flex: 1;
  display: grid;
  grid-template-rows: auto auto 1fr auto auto; }

.form-page-content {
  height: 100vh;
  flex: 1;
  display: flex;
  flex-direction: column; }
  .form-page-content .form-holder {
    flex-grow: 1; }
    .form-page-content .form-holder .airtable-embed {
      height: 100%;
      margin-bottom: -10px; }

.container, .container-fluid {
  margin-right: auto;
  margin-left: auto; }

.container-fluid {
  padding-right: 2rem;
  padding-left: 2rem; }

.row {
  box-sizing: border-box;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-flex: 0;
  -ms-flex: 0 1 auto;
  flex: 0 1 auto;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  margin-right: -.5rem;
  margin-left: -.5rem; }

.row.reverse {
  -webkit-box-orient: horizontal;
  -webkit-box-direction: reverse;
  -ms-flex-direction: row-reverse;
  flex-direction: row-reverse; }

.col.reverse {
  -webkit-box-orient: vertical;
  -webkit-box-direction: reverse;
  -ms-flex-direction: column-reverse;
  flex-direction: column-reverse; }

.col-xs, .col-xs-1, .col-xs-10, .col-xs-11, .col-xs-12, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-offset-0, .col-xs-offset-1, .col-xs-offset-10, .col-xs-offset-11, .col-xs-offset-12, .col-xs-offset-2, .col-xs-offset-3, .col-xs-offset-4, .col-xs-offset-5, .col-xs-offset-6, .col-xs-offset-7, .col-xs-offset-8, .col-xs-offset-9 {
  box-sizing: border-box;
  -webkit-box-flex: 0;
  -ms-flex: 0 0 auto;
  flex: 0 0 auto;
  padding-right: .5rem;
  padding-left: .5rem; }

.col-xs {
  -webkit-box-flex: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
  -ms-flex-preferred-size: 0;
  flex-basis: 0;
  max-width: 100%; }

.col-xs-1 {
  -ms-flex-preferred-size: 8.33333333%;
  flex-basis: 8.33333333%;
  max-width: 8.33333333%; }

.col-xs-2 {
  -ms-flex-preferred-size: 16.66666667%;
  flex-basis: 16.66666667%;
  max-width: 16.66666667%; }

.col-xs-3 {
  -ms-flex-preferred-size: 25%;
  flex-basis: 25%;
  max-width: 25%; }

.col-xs-4 {
  -ms-flex-preferred-size: 33.33333333%;
  flex-basis: 33.33333333%;
  max-width: 33.33333333%; }

.col-xs-5 {
  -ms-flex-preferred-size: 41.66666667%;
  flex-basis: 41.66666667%;
  max-width: 41.66666667%; }

.col-xs-6 {
  -ms-flex-preferred-size: 50%;
  flex-basis: 50%;
  max-width: 50%; }

.col-xs-7 {
  -ms-flex-preferred-size: 58.33333333%;
  flex-basis: 58.33333333%;
  max-width: 58.33333333%; }

.col-xs-8 {
  -ms-flex-preferred-size: 66.66666667%;
  flex-basis: 66.66666667%;
  max-width: 66.66666667%; }

.col-xs-9 {
  -ms-flex-preferred-size: 75%;
  flex-basis: 75%;
  max-width: 75%; }

.col-xs-10 {
  -ms-flex-preferred-size: 83.33333333%;
  flex-basis: 83.33333333%;
  max-width: 83.33333333%; }

.col-xs-11 {
  -ms-flex-preferred-size: 91.66666667%;
  flex-basis: 91.66666667%;
  max-width: 91.66666667%; }

.col-xs-12 {
  -ms-flex-preferred-size: 100%;
  flex-basis: 100%;
  max-width: 100%; }

.col-xs-offset-0 {
  margin-left: 0; }

.col-xs-offset-1 {
  margin-left: 8.33333333%; }

.col-xs-offset-2 {
  margin-left: 16.66666667%; }

.col-xs-offset-3 {
  margin-left: 25%; }

.col-xs-offset-4 {
  margin-left: 33.33333333%; }

.col-xs-offset-5 {
  margin-left: 41.66666667%; }

.col-xs-offset-6 {
  margin-left: 50%; }

.col-xs-offset-7 {
  margin-left: 58.33333333%; }

.col-xs-offset-8 {
  margin-left: 66.66666667%; }

.col-xs-offset-9 {
  margin-left: 75%; }

.col-xs-offset-10 {
  margin-left: 83.33333333%; }

.col-xs-offset-11 {
  margin-left: 91.66666667%; }

.start-xs {
  -webkit-box-pack: start;
  -ms-flex-pack: start;
  justify-content: flex-start;
  text-align: start; }

.center-xs {
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  text-align: center; }

.end-xs {
  -webkit-box-pack: end;
  -ms-flex-pack: end;
  justify-content: flex-end;
  text-align: end; }

.top-xs {
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start; }

.middle-xs {
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center; }

.bottom-xs {
  -webkit-box-align: end;
  -ms-flex-align: end;
  align-items: flex-end; }

.around-xs {
  -ms-flex-pack: distribute;
  justify-content: space-around; }

.between-xs {
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between; }

.first-xs {
  -webkit-box-ordinal-group: 0;
  -ms-flex-order: -1;
  order: -1; }

.last-xs {
  -webkit-box-ordinal-group: 2;
  -ms-flex-order: 1;
  order: 1; }

@media only screen and (min-width: 48em) {
  .container {
    width: 49rem; }

  .col-sm, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-offset-0, .col-sm-offset-1, .col-sm-offset-10, .col-sm-offset-11, .col-sm-offset-12, .col-sm-offset-2, .col-sm-offset-3, .col-sm-offset-4, .col-sm-offset-5, .col-sm-offset-6, .col-sm-offset-7, .col-sm-offset-8, .col-sm-offset-9 {
    box-sizing: border-box;
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    padding-right: .5rem;
    padding-left: .5rem; }

  .col-sm {
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    -ms-flex-preferred-size: 0;
    flex-basis: 0;
    max-width: 100%; }

  .col-sm-1 {
    -ms-flex-preferred-size: 8.33333333%;
    flex-basis: 8.33333333%;
    max-width: 8.33333333%; }

  .col-sm-2 {
    -ms-flex-preferred-size: 16.66666667%;
    flex-basis: 16.66666667%;
    max-width: 16.66666667%; }

  .col-sm-3 {
    -ms-flex-preferred-size: 25%;
    flex-basis: 25%;
    max-width: 25%; }

  .col-sm-4 {
    -ms-flex-preferred-size: 33.33333333%;
    flex-basis: 33.33333333%;
    max-width: 33.33333333%; }

  .col-sm-5 {
    -ms-flex-preferred-size: 41.66666667%;
    flex-basis: 41.66666667%;
    max-width: 41.66666667%; }

  .col-sm-6 {
    -ms-flex-preferred-size: 50%;
    flex-basis: 50%;
    max-width: 50%; }

  .col-sm-7 {
    -ms-flex-preferred-size: 58.33333333%;
    flex-basis: 58.33333333%;
    max-width: 58.33333333%; }

  .col-sm-8 {
    -ms-flex-preferred-size: 66.66666667%;
    flex-basis: 66.66666667%;
    max-width: 66.66666667%; }

  .col-sm-9 {
    -ms-flex-preferred-size: 75%;
    flex-basis: 75%;
    max-width: 75%; }

  .col-sm-10 {
    -ms-flex-preferred-size: 83.33333333%;
    flex-basis: 83.33333333%;
    max-width: 83.33333333%; }

  .col-sm-11 {
    -ms-flex-preferred-size: 91.66666667%;
    flex-basis: 91.66666667%;
    max-width: 91.66666667%; }

  .col-sm-12 {
    -ms-flex-preferred-size: 100%;
    flex-basis: 100%;
    max-width: 100%; }

  .col-sm-offset-0 {
    margin-left: 0; }

  .col-sm-offset-1 {
    margin-left: 8.33333333%; }

  .col-sm-offset-2 {
    margin-left: 16.66666667%; }

  .col-sm-offset-3 {
    margin-left: 25%; }

  .col-sm-offset-4 {
    margin-left: 33.33333333%; }

  .col-sm-offset-5 {
    margin-left: 41.66666667%; }

  .col-sm-offset-6 {
    margin-left: 50%; }

  .col-sm-offset-7 {
    margin-left: 58.33333333%; }

  .col-sm-offset-8 {
    margin-left: 66.66666667%; }

  .col-sm-offset-9 {
    margin-left: 75%; }

  .col-sm-offset-10 {
    margin-left: 83.33333333%; }

  .col-sm-offset-11 {
    margin-left: 91.66666667%; }

  .start-sm {
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    text-align: start; }

  .center-sm {
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    text-align: center; }

  .end-sm {
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-end;
    text-align: end; }

  .top-sm {
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start; }

  .middle-sm {
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center; }

  .bottom-sm {
    -webkit-box-align: end;
    -ms-flex-align: end;
    align-items: flex-end; }

  .around-sm {
    -ms-flex-pack: distribute;
    justify-content: space-around; }

  .between-sm {
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between; }

  .first-sm {
    -webkit-box-ordinal-group: 0;
    -ms-flex-order: -1;
    order: -1; }

  .last-sm {
    -webkit-box-ordinal-group: 2;
    -ms-flex-order: 1;
    order: 1; } }
@media only screen and (min-width: 64em) {
  .container {
    width: 65rem; }

  .col-md, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-offset-0, .col-md-offset-1, .col-md-offset-10, .col-md-offset-11, .col-md-offset-12, .col-md-offset-2, .col-md-offset-3, .col-md-offset-4, .col-md-offset-5, .col-md-offset-6, .col-md-offset-7, .col-md-offset-8, .col-md-offset-9 {
    box-sizing: border-box;
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    padding-right: .5rem;
    padding-left: .5rem; }

  .col-md {
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    -ms-flex-preferred-size: 0;
    flex-basis: 0;
    max-width: 100%; }

  .col-md-1 {
    -ms-flex-preferred-size: 8.33333333%;
    flex-basis: 8.33333333%;
    max-width: 8.33333333%; }

  .col-md-2 {
    -ms-flex-preferred-size: 16.66666667%;
    flex-basis: 16.66666667%;
    max-width: 16.66666667%; }

  .col-md-3 {
    -ms-flex-preferred-size: 25%;
    flex-basis: 25%;
    max-width: 25%; }

  .col-md-4 {
    -ms-flex-preferred-size: 33.33333333%;
    flex-basis: 33.33333333%;
    max-width: 33.33333333%; }

  .col-md-5 {
    -ms-flex-preferred-size: 41.66666667%;
    flex-basis: 41.66666667%;
    max-width: 41.66666667%; }

  .col-md-6 {
    -ms-flex-preferred-size: 50%;
    flex-basis: 50%;
    max-width: 50%; }

  .col-md-7 {
    -ms-flex-preferred-size: 58.33333333%;
    flex-basis: 58.33333333%;
    max-width: 58.33333333%; }

  .col-md-8 {
    -ms-flex-preferred-size: 66.66666667%;
    flex-basis: 66.66666667%;
    max-width: 66.66666667%; }

  .col-md-9 {
    -ms-flex-preferred-size: 75%;
    flex-basis: 75%;
    max-width: 75%; }

  .col-md-10 {
    -ms-flex-preferred-size: 83.33333333%;
    flex-basis: 83.33333333%;
    max-width: 83.33333333%; }

  .col-md-11 {
    -ms-flex-preferred-size: 91.66666667%;
    flex-basis: 91.66666667%;
    max-width: 91.66666667%; }

  .col-md-12 {
    -ms-flex-preferred-size: 100%;
    flex-basis: 100%;
    max-width: 100%; }

  .col-md-offset-0 {
    margin-left: 0; }

  .col-md-offset-1 {
    margin-left: 8.33333333%; }

  .col-md-offset-2 {
    margin-left: 16.66666667%; }

  .col-md-offset-3 {
    margin-left: 25%; }

  .col-md-offset-4 {
    margin-left: 33.33333333%; }

  .col-md-offset-5 {
    margin-left: 41.66666667%; }

  .col-md-offset-6 {
    margin-left: 50%; }

  .col-md-offset-7 {
    margin-left: 58.33333333%; }

  .col-md-offset-8 {
    margin-left: 66.66666667%; }

  .col-md-offset-9 {
    margin-left: 75%; }

  .col-md-offset-10 {
    margin-left: 83.33333333%; }

  .col-md-offset-11 {
    margin-left: 91.66666667%; }

  .start-md {
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    text-align: start; }

  .center-md {
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    text-align: center; }

  .end-md {
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-end;
    text-align: end; }

  .top-md {
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start; }

  .middle-md {
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center; }

  .bottom-md {
    -webkit-box-align: end;
    -ms-flex-align: end;
    align-items: flex-end; }

  .around-md {
    -ms-flex-pack: distribute;
    justify-content: space-around; }

  .between-md {
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between; }

  .first-md {
    -webkit-box-ordinal-group: 0;
    -ms-flex-order: -1;
    order: -1; }

  .last-md {
    -webkit-box-ordinal-group: 2;
    -ms-flex-order: 1;
    order: 1; } }
@media only screen and (min-width: 75em) {
  .container {
    width: 76rem; }

  .col-lg, .col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-offset-0, .col-lg-offset-1, .col-lg-offset-10, .col-lg-offset-11, .col-lg-offset-12, .col-lg-offset-2, .col-lg-offset-3, .col-lg-offset-4, .col-lg-offset-5, .col-lg-offset-6, .col-lg-offset-7, .col-lg-offset-8, .col-lg-offset-9 {
    box-sizing: border-box;
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    padding-right: .5rem;
    padding-left: .5rem; }

  .col-lg {
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    -ms-flex-preferred-size: 0;
    flex-basis: 0;
    max-width: 100%; }

  .col-lg-1 {
    -ms-flex-preferred-size: 8.33333333%;
    flex-basis: 8.33333333%;
    max-width: 8.33333333%; }

  .col-lg-2 {
    -ms-flex-preferred-size: 16.66666667%;
    flex-basis: 16.66666667%;
    max-width: 16.66666667%; }

  .col-lg-3 {
    -ms-flex-preferred-size: 25%;
    flex-basis: 25%;
    max-width: 25%; }

  .col-lg-4 {
    -ms-flex-preferred-size: 33.33333333%;
    flex-basis: 33.33333333%;
    max-width: 33.33333333%; }

  .col-lg-5 {
    -ms-flex-preferred-size: 41.66666667%;
    flex-basis: 41.66666667%;
    max-width: 41.66666667%; }

  .col-lg-6 {
    -ms-flex-preferred-size: 50%;
    flex-basis: 50%;
    max-width: 50%; }

  .col-lg-7 {
    -ms-flex-preferred-size: 58.33333333%;
    flex-basis: 58.33333333%;
    max-width: 58.33333333%; }

  .col-lg-8 {
    -ms-flex-preferred-size: 66.66666667%;
    flex-basis: 66.66666667%;
    max-width: 66.66666667%; }

  .col-lg-9 {
    -ms-flex-preferred-size: 75%;
    flex-basis: 75%;
    max-width: 75%; }

  .col-lg-10 {
    -ms-flex-preferred-size: 83.33333333%;
    flex-basis: 83.33333333%;
    max-width: 83.33333333%; }

  .col-lg-11 {
    -ms-flex-preferred-size: 91.66666667%;
    flex-basis: 91.66666667%;
    max-width: 91.66666667%; }

  .col-lg-12 {
    -ms-flex-preferred-size: 100%;
    flex-basis: 100%;
    max-width: 100%; }

  .col-lg-offset-0 {
    margin-left: 0; }

  .col-lg-offset-1 {
    margin-left: 8.33333333%; }

  .col-lg-offset-2 {
    margin-left: 16.66666667%; }

  .col-lg-offset-3 {
    margin-left: 25%; }

  .col-lg-offset-4 {
    margin-left: 33.33333333%; }

  .col-lg-offset-5 {
    margin-left: 41.66666667%; }

  .col-lg-offset-6 {
    margin-left: 50%; }

  .col-lg-offset-7 {
    margin-left: 58.33333333%; }

  .col-lg-offset-8 {
    margin-left: 66.66666667%; }

  .col-lg-offset-9 {
    margin-left: 75%; }

  .col-lg-offset-10 {
    margin-left: 83.33333333%; }

  .col-lg-offset-11 {
    margin-left: 91.66666667%; }

  .start-lg {
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    text-align: start; }

  .center-lg {
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    text-align: center; }

  .end-lg {
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-end;
    text-align: end; }

  .top-lg {
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start; }

  .middle-lg {
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center; }

  .bottom-lg {
    -webkit-box-align: end;
    -ms-flex-align: end;
    align-items: flex-end; }

  .around-lg {
    -ms-flex-pack: distribute;
    justify-content: space-around; }

  .between-lg {
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between; }

  .first-lg {
    -webkit-box-ordinal-group: 0;
    -ms-flex-order: -1;
    order: -1; }

  .last-lg {
    -webkit-box-ordinal-group: 2;
    -ms-flex-order: 1;
    order: 1; } }
@media only screen and (min-width: 90em) {
  .container {
    width: 90rem; } }
.ad_section-holder {
  padding: 3rem 0; }

.ad_section {
  padding: 3rem 1rem; }
  .ad_section .row {
    display: flex; }
    .ad_section .row .card-holder {
      display: flex; }

.main {
  padding: 1rem; }
  .main h2 {
    margin-top: 1rem;
    line-height: 1.3;
    text-align: center;
    opacity: 0.8; }

/* Search */
section.searchOurCollection {
  padding-left: 0.25rem;
  padding-right: 0.25rem;
  margin-bottom: 0.5rem; }
  section.searchOurCollection .filters {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 1rem;
    padding: 1rem;
    background-color: snow;
    border-radius: 10px;
    margin-top: -2rem; }
    @media (min-width: 48rem) {
      section.searchOurCollection .filters {
        margin-top: -3rem;
        grid-template-columns: repeat(2, 1fr); } }
    @media (min-width: 66rem) {
      section.searchOurCollection .filters {
        grid-template-columns: repeat(3, 1fr); } }
    section.searchOurCollection .filters .after {
      position: absolute;
      right: 16px;
      display: block;
      background-size: contain;
      pointer-events: none; }
    section.searchOurCollection .filters .inputWrapper,
    section.searchOurCollection .filters .selectWrapper {
      display: flex;
      position: relative; }
    section.searchOurCollection .filters .inputWrapper .after {
      background-image: url("img/icons/search.svg");
      top: 17px;
      width: 16px;
      height: 16px; }
    section.searchOurCollection .filters .selectWrapper .after {
      background-image: url("img/icons/arrow-ios-down.svg");
      top: 24px;
      width: 10px;
      height: 5px; }
    section.searchOurCollection .filters input,
    section.searchOurCollection .filters select {
      -webkit-appearance: none;
      border: 1px solid #aaaaaa;
      border-radius: 4px;
      background: white;
      padding: 10px 38px 10px 16px;
      font-size: 1rem;
      line-height: 1.5;
      width: 100%; }
      section.searchOurCollection .filters input::placeholder,
      section.searchOurCollection .filters select::placeholder {
        color: #cecaca; }
  section.searchOurCollection .results {
    padding: 1rem 0 0; }
  section.searchOurCollection .reset {
    outline: none !important;
    background: none;
    color: #821767;
    border: none;
    padding: 0;
    margin: 0;
    cursor: pointer;
    font-size: 1rem; }
    section.searchOurCollection .reset:hover {
      text-decoration: underline; }

/* Table */
.table {
  display: flex;
  flex-direction: column;
  color: #666;
  font-size: 0.9375rem; }
  .table h3,
  .table p {
    margin-top: 0;
    margin-bottom: 0.5rem; }

.card {
  background-color: white;
  border-radius: 5px;
  overflow: hidden;
  box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.05);
  display: flex;
  flex-direction: column; }
  .card .logo {
    margin: 0 !important;
    width: 100%;
    padding-bottom: 40%;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    margin-bottom: 1rem; }
  .card div,
  .card ul {
    margin: 0 1rem; }
  .card .title h3 {
    margin: 1rem 0;
    font-size: 1.3rem;
    line-height: 1.2;
    color: #222; }
  .card .title a {
    color: #222; }
    .card .title a span {
      color: #821767; }
  .card .tags, .card .meta {
    list-style-type: none;
    display: flex;
    flex-wrap: wrap;
    padding-left: 0;
    padding-bottom: 1rem;
    gap: 0.25rem; }
    .card .tags li, .card .meta li {
      font-size: 0.75rem;
      line-height: 1.5;
      padding: 0.125rem 0.35rem;
      border-radius: 4px; }
    .card .tags li.link, .card .meta li.link {
      transition: all 300ms ease-in-out;
      padding-right: 0.5rem; }
      .card .tags li.link:hover, .card .meta li.link:hover {
        filter: brightness(0.9); }
      .card .tags li.link .caret, .card .meta li.link .caret {
        margin-left: 0.35rem;
        display: flex;
        align-items: center;
        width: 5px;
        height: 8.6px; }
  .card .tags li {
    background-color: #CCFFE1;
    color: #1F7A45; }
  .card .tags li.link {
    background-color: #CCE1FF; }
    .card .tags li.link a,
    .card .tags li.link a:visited {
      display: flex;
      align-items: center;
      color: #0D2D59; }
  .card .meta li {
    background-color: snow;
    color: #444; }
  .card .meta li a {
    color: #821767; }
  .card .description {
    padding: 0.5rem 0 1rem; }
  .card .components {
    list-style-type: none;
    display: flex;
    flex-direction: column;
    padding-left: 0;
    padding-bottom: 0.75rem;
    margin-bottom: auto; }
    .card .components li {
      border-top: 1px solid #eee;
      flex: 1;
      padding: 0.3rem 0;
      display: flex;
      align-content: center; }
    .card .components li a {
      padding: 0.5rem 0;
      line-height: 1.2;
      flex: 1;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      color: #333; }
    .card .components li a:hover,
    .card .components li a:focus {
      background-color: white;
      text-decoration: underline; }
    .card .components li a span.icon {
      margin-right: 0.3rem;
      height: 1.5rem;
      width: 1.5rem;
      min-width: 1.5rem;
      background-position: top center;
      background-size: contain;
      background-repeat: no-repeat; }
      .card .components li a span.icon.chevron {
        height: 0.75rem !important;
        width: 0.75rem !important;
        background-image: url("img/icons/chevron.svg");
        margin-left: auto; }
  .card .templates {
    padding-bottom: 1rem;
    display: flex; }
    .card .templates a {
      padding: 0.5rem 0.75rem;
      background-color: #39c674;
      flex: 1;
      color: white;
      border-radius: 4px;
      transition: all 300ms ease-in-out;
      display: flex;
      justify-content: space-between;
      align-items: center; }
      .card .templates a:hover {
        background-color: #57db8e; }
  .card.form-card {
    background-color: #821767;
    color: white;
    justify-content: center; }
    .card.form-card .content {
      padding: 2rem;
      text-align: center; }
    .card.form-card .title {
      margin: 0; }
    .card.form-card h3 {
      color: white;
      margin-top: 0; }
    .card.form-card p {
      padding-bottom: 1rem; }
    .card.form-card div {
      margin: 0; }
    .card.form-card .form {
      max-width: 400px;
      margin: 0 auto; }
      .card.form-card .form .email input {
        border-color: rgba(255, 255, 255, 0.7);
        background-color: rgba(0, 0, 0, 0.2);
        color: white;
        margin-bottom: 0.75rem; }
      .card.form-card .form .button input {
        background-color: white;
        color: #821767; }
      .card.form-card .form .email input::-webkit-input-placeholder {
        color: rgba(255, 255, 255, 0.5); }

.link .card {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start; }
.link .card span {
  margin: 1rem; }
.link .card span.icon {
  margin-right: 0.5rem;
  height: 1.5rem;
  width: 1.5rem;
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat; }
.link .card span.text {
  max-width: 70%;
  margin-left: 0; }

.card-holder {
  padding: 1rem; }

/* Desktop styling */
@media (min-width: 48rem) {
  .main h2 {
    text-align: center;
    margin-top: 3rem; }

  .table {
    border-radius: 5px; }

  .card-holder {
    display: flex;
    flex-direction: column; }

  .card {
    height: 100%; } }
.contribute {
  padding: 2rem 0; }
  .contribute .container {
    max-width: 40rem;
    opacity: 0.8; }
  .contribute p {
    margin-bottom: 2rem; }

.sell {
  border-radius: 5px;
  background-color: white;
  padding: 1rem;
  border: 2px solid #444; }

/* Desktop styling */
@media (min-width: 48rem) {
  .contribute .container {
    max-width: 64rem;
    display: flex;
    justify-content: space-between; }
  .contribute .container span {
    max-width: 48%; } }
.announcement {
  margin: 1rem;
  color: white;
  font-weight: bold;
  text-align: center;
  top: 80px;
  display: flex;
  justify-content: center; }
  .announcement .container {
    background-color: #39c674;
    border-radius: 6px;
    box-shadow: 0 15px 15px rgba(0, 0, 0, 0.1);
    padding: 1rem;
    display: flex;
    justify-content: center;
    gap: 0.25rem;
    flex-wrap: wrap; }
    .announcement .container p {
      margin: 0; }
      .announcement .container p a {
        text-decoration: underline;
        color: white; }

@media (min-width: 48rem) {
  .announcement .container {
    max-width: 48rem; } }
@media (min-width: 66rem) {
  .announcement .container {
    max-width: 60rem; } }
.footer {
  background-color: white;
  color: #222; }
  .footer .container {
    padding: 1rem;
    padding-bottom: 4rem;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    text-align: left; }
    .footer .container .col {
      margin-top: 2rem; }
      .footer .container .col.col4 {
        display: flex;
        flex-direction: column;
        justify-content: space-between; }
    .footer .container h5 {
      margin-bottom: 0.5rem;
      color: #999; }
    .footer .container ul {
      margin-top: 0;
      margin-bottom: 1rem;
      padding-left: 0;
      list-style-type: none; }
    .footer .container .btn-holder {
      padding-top: 2rem; }
  .footer .footnote {
    opacity: 0.5;
    font-size: 0.875rem; }
  .footer p {
    margin: 0; }
  .footer a {
    text-decoration: none; }
    .footer a.btn {
      background-color: white;
      color: #39c674;
      border: 2px solid #39c674;
      margin-top: 1rem; }
      .footer a.btn:hover {
        color: white;
        background-color: #39c674; }
  .footer form {
    width: 100%; }
  .footer form h3 {
    margin-bottom: 0.2rem; }
  .footer form p {
    margin-top: 0;
    padding-bottom: 1rem;
    max-width: 40rem;
    margin: 0 auto; }
  .footer .form {
    display: flex;
    flex-direction: column;
    width: 100%;
    padding-bottom: 2rem; }

.form .email {
  width: 100%;
  display: flex;
  margin-bottom: 0.3rem; }

.form .email input {
  border-radius: 5px;
  padding: 0.5rem 0.75rem 0.6rem;
  border: 2px solid #ddd;
  font-size: 1rem; }

.form .button {
  width: 100%;
  display: flex; }

.form .button input {
  border-radius: 5px;
  padding: 0.5rem 0.75rem 0.6rem;
  font-size: 1rem;
  margin: 0;
  flex: 1; }

@media only screen and (min-width: 480px) {
  .footer {
    padding-bottom: 3rem; }
    .footer .container {
      flex-direction: row;
      justify-content: space-between;
      margin: 0 auto;
      font-size: 0.875rem;
      padding: 0 1rem; }
      .footer .container .col {
        flex-grow: 0; }
        .footer .container .col.col1 {
          width: 40%;
          padding-right: 1rem; }
        .footer .container .col.col2 {
          width: 30%;
          padding-right: 1rem; }
        .footer .container .col.col4 {
          min-width: 40%;
          flex: 0 1; } }
/* Desktop styling */
@media (min-width: 48rem) {
  .footer .form {
    flex-direction: row;
    max-width: 30rem; }
  .footer .form .email {
    width: 90%;
    margin-bottom: 0; }
  .footer .form .button {
    width: 30%; } }
.icon.gdoc {
  background-image: url("img/icons/gdoc.png"); }
.icon.spreadsheet {
  background-image: url("img/icons/spreadsheet.png"); }
.icon.blog {
  background-image: url("img/icons/blog.png"); }
.icon.tool {
  background-image: url("img/icons/tool.png"); }
.icon.gslide {
  background-image: url("img/icons/gslide.png"); }
.icon.youtube {
  background-image: url("img/icons/youtube.png"); }
.icon.github {
  background-image: url("img/icons/github.png"); }
.icon.progression {
  background-image: url("img/icons/progression.svg"); }
.icon.levels {
  background-image: url("img/icons/levels.svg"); }

.intro {
  display: flex;
  flex-direction: column;
  text-align: center;
  align-items: center;
  justify-content: center;
  background-color: #821767;
  padding-bottom: 2rem;
  color: white; }
  .intro .container {
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    justify-content: center;
    align-items: center;
    padding: 1rem; }
  .intro h1 {
    max-width: 42rem;
    font-size: 1.8rem;
    line-height: 1;
    font-weight: 800;
    font-style: normal;
    margin: 0; }
  .intro p {
    font-size: 1.125rem;
    line-height: 1.3;
    max-width: 39rem;
    font-weight: 400;
    padding: 0 2rem;
    margin: 0; }
    .intro p a {
      color: white;
      border-bottom: 2px solid #57db8e; }
      .intro p a:hover {
        border-bottom: 2px solid #39c674; }
  .intro .banner {
    border-radius: 100px;
    padding: 0.5rem 1.5rem 0.5rem 1rem;
    background-color: #ffe6cc;
    color: #4a331a;
    text-decoration: none;
    transition: all;
    animation-duration: 300ms;
    display: flex;
    align-items: center;
    gap: 0.3rem; }
    .intro .banner ul.team {
      display: flex;
      list-style-type: none;
      margin: 0;
      padding: 0; }
      .intro .banner ul.team li {
        background-color: #4a331a;
        height: 1.5rem;
        width: 1.5rem;
        border-radius: 100px;
        background-size: cover;
        margin-left: -8px; }
    .intro .banner .hide-mob {
      display: none; }
      @media (min-width: 48rem) {
        .intro .banner .hide-mob {
          display: block; } }
    .intro .banner:hover {
      box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1); }
  .intro .arrow {
    display: none; }

/* Desktop styling */
@media (min-width: 48rem) {
  .intro .container {
    padding: 2rem; }
  .intro h1 {
    max-width: 60rem;
    font-size: 3.5rem; }
  .intro p {
    font-size: 1.1rem;
    padding: 0.5rem 0;
    margin: 0 auto; }
  .intro .arrow {
    display: block;
    font-size: 3rem;
    padding-top: 1rem; } }
.header {
  background-color: #821767; }
  .header .container {
    padding: 0.25rem 0;
    display: flex;
    flex-direction: column;
    justify-content: center; }
    .header .container a {
      display: flex;
      justify-content: center; }
      .header .container a .logo {
        color: white; }
        .header .container a .logo img {
          height: 3rem;
          padding-top: 0.5rem; }
    .header .container ul.nav {
      margin: 0.25rem 0;
      list-style-type: none;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-wrap: wrap;
      padding-left: 0; }
      .header .container ul.nav li {
        margin: 0;
        font-size: 0.75rem; }
        .header .container ul.nav li a {
          padding: 0.3rem;
          color: white;
          border-radius: 2px;
          background-color: #821767;
          transition: all; }
          .header .container ul.nav li a:hover {
            background-color: rgba(0, 0, 0, 0.1); }
        .header .container ul.nav li a.btn {
          background-color: #39c674;
          border-radius: 4px;
          color: white;
          padding: 0.4rem 0.6rem 0.4rem;
          text-decoration: none;
          align-self: flex-start;
          font-weight: normal; }

@media (min-width: 48rem) {
  .header .container {
    padding: 1rem 0;
    flex-direction: row;
    justify-content: space-between;
    align-items: center; }
    .header .container ul.nav {
      flex-direction: row; }
      .header .container ul.nav li {
        font-size: 1rem; }
        .header .container ul.nav li a {
          padding: 0.5rem 0.75rem; } }
.page {
  margin: 2rem 0 4rem;
  padding: 0 1rem; }
  .page h1 {
    margin-top: 2rem;
    font-size: 2rem; }
  .page h3 {
    margin-top: 2rem;
    margin-bottom: 0.5rem; }
  .page p, .page ul, .page ol {
    color: #666666; }
  .page p {
    font-size: 1.2rem; }
  .page ul {
    padding-left: 1.5rem;
    font-size: 1.2rem; }
    .page ul li {
      margin-bottom: 0.25rem; }

@media (min-width: 66rem) {
  .post, .page {
    display: flex;
    justify-content: center;
    margin: 2rem 0; }
    .post h1, .page h1 {
      font-size: 4rem; } }
.subhead {
  background-color: white; }
  .subhead .container {
    padding: 0.75rem; }

.post {
  display: flex;
  justify-content: center; }

@media (min-width: 66rem) {
  .post {
    margin: 2rem 0; } }
.pp-plug {
  border-radius: 6px;
  background-color: #0b132b;
  color: #f7f7f7;
  box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.1);
  overflow: hidden;
  flex-grow: 1;
  display: flex; }
  .pp-plug .row {
    flex-direction: column-reverse;
    flex-grow: 1; }
  .pp-plug .img-container {
    background-image: url("img/mockup.png");
    background-size: cover;
    background-repeat: no-repeat;
    min-height: 100px; }
  .pp-plug .text-container {
    padding: 2rem;
    display: flex;
    flex-direction: column;
    text-align: left; }
    .pp-plug .text-container h3 {
      margin: 0; }
    .pp-plug .text-container p {
      margin: 0;
      margin-bottom: .5rem; }
    .pp-plug .text-container a {
      text-decoration: underline;
      color: #39c674; }
    .pp-plug .text-container a.btn {
      margin: 0;
      margin-top: 0.5rem;
      background-color: #39c674;
      border-radius: 4px;
      color: white;
      padding: 0.4rem 0.6rem 0.4rem;
      text-decoration: none;
      align-self: flex-start; }
      .pp-plug .text-container a.btn div {
        font-weight: 700; }
    .pp-plug .text-container .img-container {
      display: none; }

@media (min-width: 48rem) {
  .pp-plug .row {
    flex-direction: row; }
  .pp-plug .text-container {
    padding: 2rem;
    align-content: baseline; }
    .pp-plug .text-container h3 {
      font-size: 1.4rem;
      line-height: 1.25;
      margin-bottom: 0.5rem; }
    .pp-plug .text-container p {
      font-size: 1rem; }
    .pp-plug .text-container a.btn {
      padding: 0.6rem 1rem 0.6rem; }
  .pp-plug .img-container {
    min-height: 100%;
    background-position: center right; } }
.search-container {
  display: flex;
  width: 100%;
  padding: 1rem;
  justify-content: center; }
  .search-container #search {
    width: 100%; }
    @media (min-width: 48rem) {
      .search-container #search {
        width: 50%; } }

.featured {
  display: flex;
  flex-direction: column; }
  .featured .card {
    height: auto;
    padding: 24px;
    display: flex;
    flex-direction: column; }
    .featured .card a {
      height: 100%;
      position: relative; }
    .featured .card .logo {
      height: 2rem;
      padding-bottom: 10px;
      width: 200px; }
      .featured .card .logo img {
        max-width: 100%;
        max-height: 100%; }
    .featured .card .badge {
      display: flex;
      flex-direction: row;
      align-items: center;
      padding: 2px 4px;
      margin-left: 0px;
      margin-bottom: 8px;
      gap: 4px;
      color: #FFFFFF;
      font-size: 12px;
      line-height: 20px;
      width: 154px;
      height: 24px;
      background: #2E9E5D;
      border-radius: 4px; }
    .featured .card h3 {
      font-family: "Formula Condensed", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
      font-size: 24px;
      font-style: bold;
      font-weight: 700;
      line-height: 1.1; }
    .featured .card p {
      bottom: 0;
      margin: 0;
      position: absolute; }

@media (min-width: 48rem) {
  .featured {
    margin-top: -180px; }
    .featured .card a .logo {
      height: 2rem; }
    .featured .card a h3 {
      font-size: 2rem; } }
.framework {
  text-align: left; }
  .framework .top-bar {
    background-color: #821767;
    min-height: 120px;
    width: 100%; }
  .framework .body {
    display: flex; }
    @media (min-width: 64rem) {
      .framework .body {
        padding-bottom: 4rem; } }
    .framework .body .container {
      display: flex;
      flex-direction: column; }
      @media (min-width: 64rem) {
        .framework .body .container {
          flex-direction: row;
          gap: 1rem; } }
      .framework .body .container .left-column {
        display: flex;
        flex-direction: column;
        flex-shrink: 1;
        transform: translate(0, -110px);
        margin-bottom: -110px;
        padding: 1rem;
        gap: 0.75rem; }
        .framework .body .container .left-column .back {
          color: white; }
        .framework .body .container .left-column .logo {
          margin: 0 !important;
          width: 100%;
          padding-bottom: 40%;
          background-position: center;
          background-size: cover;
          background-repeat: no-repeat;
          border-radius: 4px;
          border: 1px solid white; }
        .framework .body .container .left-column h1 {
          font-size: 2rem;
          line-height: 1.1;
          color: black;
          padding-bottom: 0.5rem;
          margin: 0; }
        .framework .body .container .left-column .tags, .framework .body .container .left-column .meta {
          list-style-type: none;
          display: flex;
          flex-wrap: wrap;
          padding-left: 0;
          padding-bottom: 1rem;
          gap: 0.25rem; }
          .framework .body .container .left-column .tags li, .framework .body .container .left-column .meta li {
            font-size: 0.75rem;
            line-height: 1.5;
            padding: 0.125rem 0.35rem;
            border-radius: 4px; }
          .framework .body .container .left-column .tags li.link, .framework .body .container .left-column .meta li.link {
            transition: all 300ms ease-in-out;
            padding-right: 0.5rem; }
            .framework .body .container .left-column .tags li.link:hover, .framework .body .container .left-column .meta li.link:hover {
              filter: brightness(0.9); }
            .framework .body .container .left-column .tags li.link .caret, .framework .body .container .left-column .meta li.link .caret {
              margin-left: 0.35rem;
              display: flex;
              align-items: center;
              width: 5px;
              height: 8.6px; }
        .framework .body .container .left-column .tags li {
          background-color: #CCFFE1;
          color: #1F7A45; }
        .framework .body .container .left-column .tags li.link {
          background-color: #CCE1FF; }
          .framework .body .container .left-column .tags li.link a,
          .framework .body .container .left-column .tags li.link a:visited {
            display: flex;
            align-items: center;
            color: #0D2D59; }
        .framework .body .container .left-column .meta li {
          background-color: white;
          color: #444; }
        .framework .body .container .left-column .meta li a {
          color: #821767; }
        .framework .body .container .left-column .description {
          padding: 0.5rem 0 1rem;
          flex: 1; }
        .framework .body .container .left-column .tags, .framework .body .container .left-column .meta, .framework .body .container .left-column .description {
          padding: 0;
          margin: 0; }
        .framework .body .container .left-column .description > * {
          margin: 0 0 0.5rem 0; }
      .framework .body .container .right-column {
        padding: 1rem; }
        .framework .body .container .right-column .content .components {
          list-style-type: none;
          padding-left: 0;
          display: grid;
          flex-wrap: wrap;
          grid-template-columns: 1fr;
          gap: 0.5rem; }
          @media (min-width: 64rem) {
            .framework .body .container .right-column .content .components {
              gap: 0.75rem;
              padding-bottom: 3rem;
              grid-template-columns: 1fr 1fr; } }
          .framework .body .container .right-column .content .components li {
            display: flex; }
            .framework .body .container .right-column .content .components li a {
              padding: 1rem;
              flex: 1;
              line-height: 1.4;
              display: flex;
              justify-content: space-between;
              gap: 0.5rem;
              background-color: white;
              border: 1px solid #ddd;
              border-radius: 4px;
              color: #333;
              transition: all 300ms ease-in-out; }
              .framework .body .container .right-column .content .components li a:hover {
                box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.1); }
              .framework .body .container .right-column .content .components li a .contents {
                display: flex;
                flex: 1;
                flex-direction: column;
                gap: 0.5rem; }
                .framework .body .container .right-column .content .components li a .contents > * {
                  margin: 0; }
                .framework .body .container .right-column .content .components li a .contents .view-template-button {
                  font-size: 0.75rem;
                  line-height: 1.5;
                  padding: 0.125rem 0.5rem;
                  border-radius: 4px;
                  background-color: #CCFFE1;
                  color: #1F7A45;
                  display: flex;
                  align-items: center; }
                  .framework .body .container .right-column .content .components li a .contents .view-template-button .caret {
                    margin-left: 0.35rem;
                    display: flex;
                    align-items: center;
                    width: 5px;
                    height: 8.6px; }
                .framework .body .container .right-column .content .components li a .contents span.icon {
                  height: 2rem;
                  width: 2rem;
                  min-width: 2rem;
                  background-position: top center;
                  background-size: contain;
                  background-repeat: no-repeat; }
                .framework .body .container .right-column .content .components li a .contents p {
                  color: #444; }
                  .framework .body .container .right-column .content .components li a .contents p.meta {
                    color: #999; }
  .framework .card .title h1 {
    margin: 1rem 0;
    font-size: 1.3rem;
    line-height: 1.2;
    color: #222; }
  .framework .btn {
    background-color: transparent;
    border: 1px solid #2E9E5D;
    color: #2E9E5D;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    letter-spacing: 0em;
    margin: 0;
    text-align: center;
    width: fit-content; }
  .framework .sign-up-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 32px 32px 33px;
    gap: 32px;
    height: auto; }
    .framework .sign-up-card .buttons {
      display: flex;
      flex-direction: column;
      align-self: stretch;
      align-items: center; }
      .framework .sign-up-card .buttons a {
        cursor: pointer;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        padding: 12px;
        gap: 8px;
        background: #2E9E5D;
        color: #FFFFFF; }
  .framework .template-card {
    border: 1px solid #DDDDDD;
    border-radius: 4px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0px; }
    .framework .template-card .template-footer {
      background-color: #FFFFFF;
      border-radius: 0px 0px 4px 4px;
      padding: 32px;
      width: -webkit-fill-available; }
      .framework .template-card .template-footer img[alt='Checkmark'] {
        margin-right: 0.5rem; }
      .framework .template-card .template-footer .btn {
        background-color: #2E9E5D;
        color: #FFFFFF;
        margin: 0; }
      .framework .template-card .template-footer .share-container {
        margin-top: 32px; }
      .framework .template-card .template-footer .template-details {
        display: flex;
        flex-direction: column-reverse; }
        .framework .template-card .template-footer .template-details p {
          margin: 0.5rem 0; }
        .framework .template-card .template-footer .template-details .built-with-progression {
          height: 36.25px;
          margin-bottom: 2rem;
          width: 111.67px; }
        .framework .template-card .template-footer .template-details .template-includes {
          margin-bottom: 2rem; }
    .framework .template-card .template-preview {
      border-radius: 4px 4px 0px 0px;
      width: 100%; }
  .framework .buttons-inline {
    display: flex; }
    .framework .buttons-inline .btn-email {
      margin-right: 10px !important; }
  @media (max-width: 600px) {
    .framework .buttons-inline {
      margin: 0;
      flex-direction: column;
      width: 100%; }
      .framework .buttons-inline .btn {
        width: 100%;
        margin-bottom: 10px !important;
        display: flex;
        justify-content: center;
        padding: 0.5rem 0 0.6rem; } }
  .framework .buttons-full-width {
    margin: 0;
    display: flex;
    flex-direction: column;
    width: 100%; }
    .framework .buttons-full-width h4 {
      margin: 0 0 20px 0; }
    .framework .buttons-full-width .btn {
      width: 100%;
      margin-bottom: 10px;
      display: flex;
      justify-content: center;
      padding: 0.5rem 0 0.6rem; }
  .framework .btn-green {
    background-color: #2E9E5D;
    color: #FFFFFF;
    margin: 0; }
  .framework .btn-gray {
    background-color: #F3F2F2 !important;
    color: #1B1818 !important;
    border: none; }
  .framework .border-none {
    border: none; }
  .framework .btn-email:hover, .framework .btn-email:focus {
    background-color: #15803d !important;
    color: white; }
  .framework .btn-image img {
    width: 18px;
    margin-right: 10px; }
  .framework .btn-gray:hover, .framework .btn:focus {
    background-color: #CECACA !important; }
  .framework .share-container {
    margin: 0; }
    .framework .share-container a {
      background-color: #FFF;
      margin-right: 20px;
      padding: 0; }
    .framework .share-container img {
      height: 20px;
      width: 20px; }
    .framework .share-container .copy-link {
      background-color: #FFF;
      border: none;
      cursor: pointer;
      display: flex;
      padding: 0;
      position: relative; }
    .framework .share-container .copy-link .copy-link-tooltip {
      background-color: #000;
      border-radius: 5px;
      color: #FFF;
      font-size: 12px;
      left: -26px;
      opacity: 0;
      padding: 5px 10px;
      position: absolute;
      text-align: center;
      top: 15px;
      transition: opacity 0.3s;
      visibility: hidden;
      width: max-content;
      z-index: 1; }
    .framework .share-container .copy-link .copy-link-tooltip::after {
      border-color: transparent transparent #000 transparent;
      border-style: solid;
      border-width: 5px;
      bottom: 100%;
      content: "";
      left: 50%;
      margin-left: -5px;
      position: absolute; }
    .framework .share-container .copy-link:hover .copy-link-tooltip {
      opacity: 1;
      visibility: visible; }
    .framework .share-container .share-icons {
      display: flex;
      margin: 20px 0 0 0; }

@media (min-width: 1200px) {
  .card-holder.back-to-frameworks, .card-holder.company {
    padding-left: 3.5rem;
    padding-right: 2rem; }
  .card-holder.template {
    padding-left: 2rem;
    padding-right: 3.5rem; }
  .card-holder .template-details {
    flex-direction: row !important;
    justify-content: space-between;
    position: relative; }
    .card-holder .template-details .built-with-progression {
      bottom: 0;
      margin-bottom: 0 !important;
      position: absolute;
      right: 0; } }
.modal-wrapper {
  display: none;
  position: fixed;
  top: 25%; }
  .modal-wrapper .modal {
    position: relative;
    box-sizing: border-box;
    background: #FFFFFF;
    border: 1px solid #CECACA;
    box-shadow: 0px 15px 10px rgba(0, 0, 0, 0.05);
    border-radius: 8px; }
    .modal-wrapper .modal .modal-header {
      display: flex;
      flex-direction: row;
      justify-content: flex-end;
      gap: 10px; }
      .modal-wrapper .modal .modal-header .close {
        cursor: pointer;
        padding-top: 24px;
        padding-right: 24px; }
        .modal-wrapper .modal .modal-header .close img {
          width: 24px;
          height: 24px; }
    .modal-wrapper .modal .modal-body {
      padding: 0px 48px 48px;
      gap: 20px; }
      .modal-wrapper .modal .modal-body .modal-title {
        padding: 0px;
        gap: 8px; }
        .modal-wrapper .modal .modal-body .modal-title h2 {
          font-weight: 700;
          font-size: 24px;
          line-height: 32px;
          text-align: center;
          color: #353131; }
        .modal-wrapper .modal .modal-body .modal-title p {
          font-weight: 400;
          font-size: 14px;
          line-height: 20px;
          text-align: center;
          color: #827D7D; }
      .modal-wrapper .modal .modal-body .modal-content {
        gap: 20px; }
        .modal-wrapper .modal .modal-body .modal-content .modal-buttons {
          display: flex;
          flex-direction: column;
          gap: 12px; }
          .modal-wrapper .modal .modal-body .modal-content .modal-buttons a {
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: center;
            color: #1B1818;
            padding: 10px 12px;
            gap: 8px;
            font-size: 14px;
            background: #F3F2F2;
            border-radius: 4px; }
            .modal-wrapper .modal .modal-body .modal-content .modal-buttons a img {
              width: 24px; }
        .modal-wrapper .modal .modal-body .modal-content .modal-footer {
          font-family: 'Inter';
          font-style: normal;
          font-weight: 400;
          font-size: 12px;
          line-height: 20px;
          color: #1B1818; }
          .modal-wrapper .modal .modal-body .modal-content .modal-footer a {
            color: #1F7A45; }

.modal-wrapper.active {
  display: block;
  z-index: 10; }

.modal-overlay {
  display: none; }

.modal-overlay.active {
  display: block;
  position: fixed;
  background: #1B1818;
  opacity: 80%;
  width: 100%;
  height: 100%;
  z-index: 9; }

.modal-banner {
  display: none;
  background: #CCE1FF;
  justify-content: center;
  align-items: center;
  margin-bottom: 20px;
  color: #174482;
  font-size: 14px;
  padding: 10px 16px;
  gap: 12px;
  border-radius: 4px; }