@import url("https://www.nerdfonts.com/assets/css/webfont.css");
@import url("https://fonts.googleapis.com/css2?family=Crimson+Pro:ital,wght@0,200..900;1,200..900&family=Source+Sans+3:ital,wght@0,200..900;1,200..900&display=swap");

:root {
  /* --primary-color: #aaa; */
  /* --secondary-color: #eee; */
  /* --tertiary-color: #333; */
  /* --default-grey: #222; */
  --default-animation: 0.25s all;
  --icon-font-family: "NerdFontsSymbols Nerd Font";
  --heading-font-family: "Crimson Pro", serif;
  --default-font-family: "Source Sans 3", sans-serif;
}

/* apply the selected fonts  */
*:not(.nf, h1, h2) {
  font-family: var(--default-font-family);
  font-optical-sizing: auto;
  font-style: normal;
}

h1,
h2 {
  font-family: var(--heading-font-family);
  font-optical-sizing: auto;
  font-style: normal;
}

/*
 * basic section 
 * for single components 
 */

/* this is the setup for the base elements and text */

/* the :root variables are used across the site to set widely used options */

/* default body characteristics */
body {
  display: block;
  float: left;
  height: auto;
  width: 100%;
  margin: 0;
  padding: 0;
}

/* text and header sizing */
h1,
h2,
h3,
h4,
h5,
h6 {
  color: #222;
}

h1:not([class]),
h1.entry-title,
.h1,
h1,
.entry-content h1 {
  font-size: 3.4375rem;
  line-height: 1.16;
  margin-bottom: 10px;
}

h1,
.entry-content h1 {
  font-size: 3.4375rem;
  line-height: 1.16;
}

.entry-title {
  font-size: 3.4375rem;
  line-height: 1.16;
}

h2:not([class]),
.h2 {
  font-size: 2.5rem;
  line-height: 1.25;
  margin-bottom: 10px;
}

h3:not([class]),
.h3 {
  font-size: 1.9rem;
  line-height: 1.3;
  margin-bottom: 10px;
}

h4:not([class]),
.h4 {
  font-size: 1.45rem;
  line-height: 1.5;
  margin-bottom: 5px;
}

h5:not([class]),
.h5 {
  font-size: 1.25rem;
  line-height: 1.5;
  margin-bottom: 5px;
}

h6:not([class]),
.h6 {
  line-height: 1.5;
  font-size: 1.1rem;
  margin-bottom: 5px;
}

.h1 {
  font-size: 3.4375rem;
  line-height: 1.16;
  margin-bottom: 10px;
}

.h2 {
  font-size: 2.5rem;
  line-height: 1.25;
  margin-bottom: 10px;
}

.h3 {
  font-size: 1.9rem;
  line-height: 1.67;
  margin-bottom: 10px;
}

.h4 {
  font-size: 1.45rem;
  line-height: 1.68;
  margin-bottom: 5px;
}

.h5 {
  font-size: 1.25rem;
  line-height: 1.5;
  margin-bottom: 5px;
}

.h6 {
  line-height: 1.85;
  font-size: 1.15rem;
  margin-bottom: 5px;
}

h2.homepageHeader {
  padding-bottom: 0.75rem;
  border-bottom: var(--tertiary-color) 3px solid;
}

.homepageHeader.lg-top-margin {
  margin-top: 4rem;
}

p,
strong,
td,
li {
  font-size: 1.1rem;
  line-height: 1.5;
  /* color: #222; */
}

td {
  color: #222;
}

img {
  -webkit-transform: translateZ(0);
  -moz-transform: translateZ(0);
  -ms-transform: translateZ(0);
  -o-transform: translateZ(0);
  transform: translateZ(0);

  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
}

td {
  min-width: 150px;
  padding: 1em;
}

blockquote {
  font-style: italic;
  border-style: solid;
  border-width: 1px;
  border-color: #adacac;
  border-left-color: #999;
  border-left-width: 10px;
  padding: 1.25rem;
}

/*
   *
   * Links  
   *
   */

a {
  /* color: var(--primary-color); */
  font-weight: bold;
  text-decoration: none;
  transition: var(--default-animation);
}

a:hover {
  font-weight: bold;
  transition: var(--default-animation);
}

:visited {
  color: var(--tertiary-color);
  text-decoration: none;
}

:focus,
:focus-visible {
  outline-color: #000;
  text-decoration: none;
}

.border-link {
  text-decoration: none !important;
  color: var(--body-font-color);
  border-bottom-style: solid;
  border-bottom-width: 3px;
  border-bottom-color: var(--primary-color);
  transition: var(--default-animation);
}

.border-link:hover {
  border-bottom-color: var(--tertiary-color);
  transition: var(--default-animation);
}

.border-link:visited {
  border-bottom-color: #000;
}

.arrow-link {
  transition: var(--default-animation);
  color: var(--tertiary-color);
}

.arrow-link::after {
  font-family: var(--icon-font-family);
  content: "\e602";
  margin: 0 0.15rem;
  font-size: 1rem;
  height: 1em;
  width: 1em;
  text-decoration: none !important;
}

.arrow-link:hover {
  transition: var(--default-animation);
  color: var(--primary-color);
}

.external-link {
  transition: var(--default-animation);
  color: var(--primary-color);
}

.external-link::after {
  font-family: var(--icon-font-family);
  content: "\f465";
  margin-left: 4.5px;
  margin-right: 4.5px;
  font-size: 1rem;
  height: 1em;
  width: 1em;
  position: relative;
  bottom: 2.5px;
}

.external-link:hover {
  color: var(--tertiary-color);
  transition: var(--default-animation);
}

.pdf-link {
  transition: var(--default-animation);
  color: var(--primary-color);
}

.pdf-link::after {
  font-family: var(--icon-font-family);
  content: "\f1c1";
  margin-left: 2.5px;
  margin-right: 4.5px;
  font-size: 1.1rem;
  height: 1em;
  width: 1em;
}

.pdf-link:hover {
  color: var(--tertiary-color);
}

/*
   *
   * Buttons 
   *
   */

/* .button, */
/* button { */
/*   padding: 1.5rem 2.5rem; */
/*   font-weight: bold; */
/*   margin: 1em 0; */
/*   border-style: none; */
/*   display: inline-block; */
/* } */
/**/
/* button:hover { */
/*   cursor: pointer; */
/* } */
/**/
/* .button { */
/*   max-width: 10rem; */
/*   text-align: center; */
/*   transition: var(--default-animation); */
/* } */
/**/
/* .button:after { */
/*   font-family: var(--icon-font-family); */
/*   content: "\e602"; */
/*   color: #fff; */
/*   font-size: 1rem; */
/*   transition: var(--default-animation); */
/*   position: relative; */
/*   bottom: 1px; */
/* } */
/**/
/* .button.primary, */
/* button.primary { */
/*   background: var(--tertiary-color); */
/*   color: #fff; */
/*   position: relative; */
/*   padding-right: 1.5rem; */
/*   border: var(--tertiary-color) 1px solid; */
/*   transition: var(--default-animation); */
/* } */
/**/
/* .button.primary:hover { */
/*   color: var(--tertiary-color); */
/*   background: #fff; */
/*   transition: var(--default-animation); */
/* } */
/**/
/* .button.primary:hover::after { */
/*   color: var(--tertiary-color); */
/*   /* margin-left: 1.2rem; */
*/
/* } */
/**/
/* /* .button.primary:after, */ */
/* /* button.primary:after { */ */
/* /*   font-family: var(--icon-font-family); */ */
/* /*   content: "\e602"; */ */
/* /*   font-size: 1.8rem; */ */
/* /*   margin-left: 15px; */ */
/* /*   margin-top: 1rem; */ */
/* /* } */ */
/**/
/* .button.secondary, */
/* button.secondary { */
/*   background: var(--primary-color); */
/*   color: var(--secondary-color); */
/*   border: var(--primary-color) 1px solid; */
/*   transition: var(--default-animation); */
/* } */
/**/
/* .button.secondary:hover, */
/* button.secondary:hover { */
/*   border: var(--primary-color) 1px solid; */
/*   color: var(--primary-color); */
/*   background: #fff; */
/*   transition: var(--default-animation); */
/* } */
/**/
/* .button.secondary:hover::after { */
/*   color: var(--primary-color); */
/*   /* margin-left: 1.2rem; */ */
/* } */
/**/
/* .button.secondary.whitebg { */
/*   background: #fff; */
/*   border: var(--primary-color) 1px solid; */
/*   color: var(--primary-color); */
/*   transition: var(--default-animation); */
/* } */
/**/
/* .button.secondary.whitebg:after { */
/*   color: var(--primary-color); */
/* } */
/**/
/* .button.secondary.whitebg:hover::after { */
/*   color: #fff; */
/* } */
/**/
/* .button.secondary.whitebg:hover { */
/*   background: var(--primary-color); */
/*   border: #fff 1px solid; */
/*   color: #fff; */
/*   transition: var(--default-animation); */
/* } */
/**/
/* .button.primary:after, */
/* .button.secondary:after { */
/*   padding: 0 0.5rem; */
/* } */
/* .button.primary:hover::after, */
/* .button.secondary:hover::after { */
/*   padding: 0 0 0 1rem; */
/* } */
/**/
/* .button.lg, */
/* button.lg { */
/*   padding: 2em 3em; */
/*   font-size: 1.5rem; */
/* } */
/**/
/* .button.md, */
/* button.md { */
/*   padding: 1.5rem 2.5rem; */
/*   font-size: 1.25rem; */
/* } */
/**/
/* .button.sm, */
/* button.sm { */
/*   padding: 1em 1.5em; */
/*   font-size: 1rem; */
/* } */
/**/
/* .button.rounded, */
/* button.rounded { */
/*   border-radius: var(--border-radius); */
/* } */

/*
 *
 * screen reader text 
 */

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

/*
 *
 * default box shadow 
 *
 */
.box-shadow {
  -webkit-box-shadow: 10px 10px 5px 0px rgba(240, 240, 240, 1);
  -moz-box-shadow: 10px 10px 5px 0px rgba(240, 240, 240, 1);
  box-shadow: 10px 10px 5px 0px rgba(240, 240, 240, 1);
  -moz-transition: all 0.5s;
  -webkit-transition: all 0.5s;
  -o-transition: all 0.5s;
  transition: all 0.5s;
}

.box-shadow-hover {
  -webkit-box-shadow: 10px 10px 5px 0px rgba(222, 222, 222, 1);
  -moz-box-shadow: 10px 10px 5px 0px rgba(222, 222, 222, 1);
  box-shadow: 10px 10px 5px 0px rgba(222, 222, 222, 1);
  -moz-transition: all 0.5s;
  -webkit-transition: all 0.5s;
  -o-transition: all 0.5s;
  transition: all 0.5s;
}

.box-shadow-hover:hover {
  -webkit-box-shadow: 12.5px 12.5px 7.5px 0px rgba(200, 200, 200, 1);
  -moz-box-shadow: 12.5px 12.5px 7.5px 0px rgba(200, 200, 200, 1);
  box-shadow: 12.5px 12.5px 7.5px 0px rgba(200, 200, 200, 1);
  -moz-transition: all 0.5s;
  -webkit-transition: all 0.5s;
  -o-transition: all 0.5s;
  transition: all 0.5s;
}

/* adding in a nav spacing div to make sure nothing  */
/* runs under the nav */
.nav-spacer {
  min-height: 7rem;
  max-height: 7rem;
}

/* color utility classes 
 */
.text-primary {
  color: var(--primary-color);
}

.text-tertiary {
  color: var(--tertiary-color);
}

.text-grey {
  color: var(--default-grey);
}

.text-white {
  color: white;
}

.children-text-white * {
  color: white;
}

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

.bg-tertiary {
  background-color: var(--tertiary-color);
}

.bg-grey {
  background-color: var(--default-grey);
}

.bg-white {
  background-color: #fff;
}

.bg-secondary {
  background-color: var(--secondary-color);
}

.border-primary {
  border-color: var(--primary-color);
}

.border-tertiary {
  border-color: var(--tertiary-color);
}

.border-grey {
  border-color: var(--default-grey);
}

/* container utility class and sizing */
/* the container class can be combined with a selection of padding/spacing styles */
.container {
  display: flex;
  flex-direction: column;
}

.container.no-padding {
  width: 100%;
}

.xs-padding {
  padding: 1rem;
}

.sm-padding {
  padding: 2rem;
}

.md-padding {
  padding: 3rem 5rem;
}

.lg-padding {
  padding: 5rem 8rem;
}

.xl-padding {
  padding: 3.5rem 10rem;
}

.xxl-padding {
  padding: 5rem 12.5rem;
}

.xxxl-padding {
  padding: 6rem 14rem;
}

@media only screen and (max-width: 1275px) {
  .container.xxl-padding,
  .container.xl-padding {
    padding: 5rem;
  }

  .container.xxxl-padding {
    padding: 5rem 7rem;
  }
}

@media only screen and (max-width: 768px) {
  .container.xxl-padding,
  .container.xl-padding,
  .container.lg-padding,
  .container.md-padding {
    overflow: hidden;
    padding: 3rem;
  }

  .container.xxxl-padding {
    padding: 5rem;
  }
}

@media only screen and (max-width: 500px) {
  .container.xxxl-padding,
  .container.xxl-padding,
  .container.xl-padding,
  .container.lg-padding,
  .container.md-padding {
    padding: 3rem 2rem;
  }
}

@media only screen and (max-width: 375px) {
  .container.xxxl-padding,
  .container.xxl-padding,
  .container.xl-padding,
  .container.lg-padding,
  .container.md-padding,
  .container.sm-padding {
    padding: 3rem 0.75rem;
  }
}

@media only screen and (min-width: 1856px) {
  .container.xxxl-padding,
  .container.xxl-padding,
  .container.xl-padding,
  .container.lg-padding,
  .container.md-padding,
  .container.sm-padding,
  .pageContainer {
    max-width: 106.25rem !important;
    width: auto !important;
    padding-left: calc((100% - 106.25rem) / 2) !important;
    padding-right: calc((100% - 106.25rem) / 2) !important;
  }
}
.pad-1r {
  padding: 1rem;
}
.pad-2r {
  padding: 2rem;
}
.pad-3r {
  padding: 3rem;
}
.pad-vert-1r {
  padding-top: 1rem;
  padding-bottom: 1rem;
}
.pad-horiz-1r {
  padding-left: 1rem;
  padding-right: 1rem;
}
.pad-vert-2r {
  padding-top: 2rem;
  padding-bottom: 2rem;
}
.pad-horiz-2r {
  padding-left: 2rem;
  padding-right: 2rem;
}
.pad-vert-3r {
  padding-top: 3rem;
  padding-bottom: 3rem;
}
.pad-horiz-3r {
  padding-left: 3rem;
  padding-right: 3rem;
}

@media only screen and (max-width: 500px) {
  .pad-3r {
    padding: 3rem 2rem;
  }

  .pad-horiz-3r {
    padding-left: 2rem;
    padding-right: 2rem;
  }
}
@media only screen and (max-width: 400px) {
  .pad-3r {
    padding: 3rem 1rem;
  }

  .pad-horiz-3r {
    padding-left: 1rem;
    padding-right: 1rem;
  }
  .pad-2r {
    padding: 2rem 1rem;
  }

  .pad-horiz-2r {
    padding-left: 1rem;
    padding-right: 1rem;
  }
}
@media only screen and (max-width: 340px) {
  .pad-3r {
    padding: 3rem 0.5rem;
  }

  .pad-horiz-3r {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }
  .pad-2r {
    padding: 2rem 0.5rem;
  }

  .pad-horiz-2r {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }
  .pad-1r {
    padding: 1rem 0.5rem;
  }

  .pad-horiz-1r {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }
}

/*
 * Grid utility classes 
 * defines different styles of 2col/3col/4col grids 
 */

.grid {
  display: grid;
  width: 100%;
  justify-content: center;
  align-items: top;
  justify-items: stretch;
}

.grid > div {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/*
 *
 * 50/50 grid enforced width
*/
.grid-50-50-enforced {
  grid-template-columns: 1fr 1fr;
}

@media only screen and (max-width: 1000px) {
  .grid-50-50-enforced {
    grid-template-columns: 1fr;
  }
}

/*
 *
 * 60/40 grid enforced width
*/
.grid-60-40-enforced {
  grid-template-columns: 6fr 4fr;
}

@media only screen and (max-width: 1000px) {
  .grid-60-40-enforced {
    grid-template-columns: 1fr;
  }
}

/*
 *
 * 40/60 grid enforced width
*/
.grid-40-60-enforced {
  grid-template-columns: 4fr 6fr;
}

@media only screen and (max-width: 1000px) {
  .grid-40-60-enforced {
    grid-template-columns: 1fr;
  }
}

/*
 * 50/50 grid auto width
 */

.grid-50-50-auto {
  grid-template-columns: auto auto;
}

@media only screen and (max-width: 1000px) {
  .grid-50-50-auto {
    grid-template-columns: 1fr;
  }
}

/*
 * 33/33/33 grid enforced width 
 */

.grid-33-33-33-enforced {
  grid-template-columns: 1fr 1fr 1fr;
}

@media only screen and (max-width: 1000px) {
  .grid-33-33-33-enforced {
    grid-template-columns: 1fr;
  }
}

/*
 * 33/33/33 grid auto width 
 */

.grid-33-33-33-auto {
  grid-template-columns: auto auto auto;
}

@media only screen and (max-width: 1000px) {
  .grid-33-33-33-auto {
    grid-template-columns: 1fr;
  }
}

/*
 * 50/25/25 grid enforced width 
 */

.grid-50-25-25-enforced {
  grid-template-columns: 2fr 1fr 1fr;
}

@media only screen and (max-width: 1000px) {
  .grid-50-25-25-enforced {
    grid-template-columns: 1fr;
  }
}

/*
 * 25-25-50 grid enforced width 
 */

.grid-25-25-50-enforced {
  grid-template-columns: 1fr 1fr 2fr;
}

@media only screen and (max-width: 1000px) {
  .grid-25-25-50-enforced {
    grid-template-columns: 1fr;
  }
}

/*
 * 25/25/25/25 grid enforced width 
 */

.grid-25-25-25-25-enforced {
  grid-template-columns: 1fr 1fr 1fr 1fr;
}

@media only screen and (max-width: 1200px) {
  .grid-25-25-25-25-enforced {
    grid-template-columns: 1fr 1fr;
  }
}

@media only screen and (max-width: 900px) {
  .grid-25-25-25-25-enforced {
    grid-template-columns: 1fr;
  }
}

/*
 * 25/25/25/25 grid auto width 
 */

.grid-25-25-25-25-auto {
  grid-template-columns: auto auto auto auto;
}

@media only screen and (max-width: 1200px) {
  .grid-25-25-25-25-auto {
    grid-template-columns: 1fr 1fr;
  }
}

@media only screen and (max-width: 900px) {
  .grid-25-25-25-25-auto {
    grid-template-columns: 1fr;
  }
}

/* 
 *
 * Flex styling 
 *
 */

.flex-col {
  display: flex;
  flex-direction: column;
}
.flex-row {
  display: flex;
  flex-direction: row;
}
.fl-wrap {
  flex-wrap: wrap;
}

/*
 * Flex and Grid
 * gap sizing 
 */

.no-gap {
  gap: 0;
}

.sm-gap {
  gap: 1em;
}

.md-gap {
  gap: 2.5em;
}

.lg-gap {
  gap: 4em;
}

.xl-gap {
  gap: 5.5em;
}

/*
 * alert styling;
 * based on https://tailwindui.com/components/application-ui/feedback/alerts 
 */

.alert {
  display: flex;
  flex-direction: row;
  padding: 1.5rem;
  gap: 1rem;
  margin: 1rem;
  background: #fff;
  align-items: stretch;
  justify-content: space-between;
  flex-wrap: nowrap;
  position: relative;
}

.alert .alert-content {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.alert .alert-icon i {
  font-size: 1.5rem;
}

.alert .alert-content h3,
.alert .alert-content p {
  font-size: 1rem;
  line-height: 1.25rem;
  margin: 0;
}

.alert .alert-content h3 {
  font-size: 1.15rem;
  padding-top: 2px;
}

.alert .alert-close button:hover {
  cursor: pointer;
}

.alert .alert-close button {
  font-weight: bold;
  margin: 0;
  background: transparent;
  border: none;
  position: absolute;
  top: -0.1rem;
  right: 0.1rem;
  padding: 1rem;
  font-size: 1rem;
}

.alert .alert-actions {
  display: flex;
  flex-direction: row;
  gap: 3rem;
}

.alert .alert-actions a {
  text-decoration: none;
  padding: 10px 0;
  max-width: max-content;
}

/*
 * options 
 */

.alert.alert-rounded {
  border-radius: 0.5rem;
}

.alert.alert-thin-border {
  border-style: solid;
  border-width: 1px;
}

.alert.alert-thick-border {
  border-style: solid;
  border-width: 3px;
}

.alert.alert-accent-border {
  border-left-style: solid;
  border-left-width: 0.5rem;
}

/*
 * colors
 */

.alert.alert-bg.alert-low {
  background: rgb(240 253 244);
}

.alert.alert-low {
  /* border-color: rgb(22 101 52); */
  border-color: rgb(74 222 128);
}

.alert.alert-low .alert-icon i {
  color: rgb(74 222 128);
}

.alert.alert-low .alert-content a,
.alert.alert-low .alert-close i,
.alert.alert-low .alert-content h3 {
  color: rgb(22 101 52);
}

.alert.alert-low .alert-content p {
  color: rgb(21 128 61);
}

.alert.alert-bg.alert-medium {
  background-color: rgb(254 252 232);
}

.alert.alert-medium {
  border-color: rgb(250 204 21);
}

.alert.alert-medium .alert-icon i {
  color: rgb(250 204 21);
}

.alert.alert-medium .alert-content p {
  color: rgb(161 98 7);
}

.alert.alert-medium .alert-content a,
.alert.alert-medium .alert-close i,
.alert.alert-medium .alert-content h3 {
  color: rgb(133 77 14);
}

.alert.alert-bg.alert-high {
  background-color: rgb(254 242 242);
}

.alert.alert-high {
  border-color: rgb(248 113 113);
}

.alert.alert-high .alert-icon i {
  color: rgb(248 113 113);
}

.alert.alert-high .alert-content p {
  color: rgb(185 28 28);
}

.alert.alert-high .alert-content a,
.alert.alert-high .alert-close i,
.alert.alert-high .alert-content h3 {
  color: rgb(153 27 27);
}

/* 
 * Basic card definition 
 */
.card {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin: 0.75rem;
}

@media only screen and (max-width: 450px) {
  .card {
    padding: 0.5rem;
    margin: 0.75rem 0;
  }
}

.card > * {
  margin: 0;
}

/*
 * card sizing 
 */

.card.card-sm {
  width: 20rem;
  max-width: 100%;
  min-width: 15rem;
}

.card.card-md {
  width: 25rem;
  max-width: 100%;
  min-width: 15rem;
}

.card.card-lg {
  width: 30rem;
  max-width: 100%;
  min-width: 15rem;
}

/*
 * Border position 
 */

.card.border-top {
  border-top-style: solid;
}

.card.border-left {
  border-left-style: solid;
}

.card.border-btm {
  border-bottom-style: solid;
}

.card.border-right {
  border-right-style: solid;
}

.card.border-full {
  border-style: solid;
}

/*
 * border colors 
 */
.card.border-red {
  border-color: var(--primary-color);
}

.card.border-grey {
  border-color: var(--default-grey);
}

.card.border-teal {
  border-color: var(--tertiary-color);
}

/*
 * border radius 
 */
.card.straight {
  border-radius: 0px;
}

.card.rounded-sm {
  border-radius: 0.3rem;
}

.card.rounded-lg {
  border-radius: 1.3rem;
}

/*
 * border sizing 
 */
.card.border-sm {
  border-width: 0.3rem;
}

.card.border-md {
  border-width: 0.6rem;
}

.card.border-lg {
  border-width: 1rem;
}

@media only screen and (max-width: 600px) {
  .card.card-lg {
    max-width: auto;
    min-width: auto;
    width: auto;
  }
}

@media only screen and (max-width: 525px) {
  .card.card-md {
    max-width: auto;
    min-width: auto;
    width: auto;
  }
}

@media only screen and (max-width: 450px) {
  .card.card-sm {
    max-width: auto;
    min-width: auto;
    width: auto;
  }
}