deck-styles.css

/*NAV BAR*/
.nav-container ul.menu li.button a {
 background-color: #222222;
 color: #ffffff;
 border: none !important;
}

.nav-container ul.menu li.button a:hover {
 background-color: #000000;
}

ul.menu > li.button > a {
 background-color: none;
 border-radius: 32px !important;
}

/*CARDS*/

.listing-card.STYLE2 {
 height: 140px;
 border-radius: 8px;
 border: none;
 transition: all 0.3s !important;
}

.listing-card.STYLE2:hover {
 box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
}

.listing-card a:hover,
.MuiGrid-item a:hover {
 text-decoration: none !important;
 opacity: 1 !important;
}

.listing-card .listing-link {
 pointer-events: none;
}

.listing-content {
 padding: 16px !important;
 padding-top: 24px !important;
 height: 100% !important;
}

.listing-content .content {
 height: 100% !important;
}

.listing-content .content > div {
 height: 100% !important;
 transform: none !important;
}

.listing-card .description {
 font-size: 12px !important;
 line-height: 150% !important;
 color: #737373 !important;
 text-overflow: unset !important;
 white-space: unset !important;
 overflow: hidden !important;
}

.listing-card .name {
 font-weight: 600 !important;
}

.listing-card .description.multi1 {
 height: unset !important;
 max-height: 56px;
}

.listing-card:not(.STYLE2) .upcoming {
 display: none;
}

.listing-card:is(.STYLE2) .upcoming {
 background-color: #d9f2e1 !important;
 transform: unset !important;
 -webkit-transform: unset !important;
 font-weight: 400 !important;
 border-radius: 4px !important;

 padding: 1.5px 6px !important;
 color: #222222 !important;
 top: 8px !important;
 right: 8px !important;
}

.badges {
 display: none;
}

/*CTA Section*/
section.cta .button {
 border-radius: 32px !important;
}

/*CTA Cards*/

* {
 font-family: sans-serif;
}

section.ctas {
 display: flex;
 flex-direction: column;
 align-items: center;
 justify-content: center;
}

.cta-card-wrapper {
 display: flex;
 justify-content: space-around;
 padding: 80px 0;
 max-width: 1140px;
}

.cta-card {
 background-color: #ececec;
 padding: 24px 48px;
 border-radius: 8px;
 display: flex;
 align-items: flex-start;
 width: 45%;
}

.cta-card:not(:first-child) {
 margin-left: 40px;
}

.cta-card > svg {
 margin-right: 20px;
 margin-top: 16px;
}

.cta-card-content-wrapper {
 display: flex;
 flex-direction: column;
 justify-content: space-between;
 align-items: flex-start;
 height: 100%;
}

.cta-card-title {
 font-size: 18px;
 color: #222222;
 line-height: 160%;
}

.cta-card-text {
 color: #333333;
 font-size: 12px;
 margin-bottom: 24px;
 margin-top: 12px;
}

.cta-card-link {
 text-decoration: none;
 line-height: 170%;
 background-color: #222222;
 color: #ffffff;
 padding: 12px 32px;
 border-radius: 24px;
 transition: background-color 400ms ease;
 font-size: 14px;
}

.cta-card-link:hover {
 background-color: #000000;
 text-decoration: none;
 opacity: 1 !important;
}

/*RESPONSIVE*/
@media (max-width: 599px) {
 .masthead-image {
  display: none;
 }

 .cta-card-wrapper {
  flex-direction: column;
  padding: 80px 20px;
  align-items: center;
  text-align: center;
 }

 .cta-card {
  flex-direction: column;
  align-items: center;
  text-align: center;
  width: unset;
 }

 .cta-card svg {
  margin-top: 0;
  margin-right: 0;
 }

 .cta-card:not(:first-child) {
  margin-left: unset;
  margin-top: 20px;
 }

 .cta-card-content-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
 }

 .cta-card-title {
  margin-top: 24px;
 }
}

/*FOOTER*/
* {
 font-family: sans-serif;
}

footer {
 background-color: #ececec;
 display: grid;
 gap: 28px 8px;
 align-content: start;
 padding: 60px 24px !important;
}

footer > section {
 display: grid;
 gap: 28px 8px;
}

footer > section.details {
 grid-column: 1 / span 3;
 align-content: start;
}

footer > .details > img.pleo-logo {
 width: 90px;
}

footer > .details nav.social-media {
 display: grid;
 grid-auto-flow: column;
 align-items: center;
 justify-content: start;
 column-gap: 8px;
}

footer > .details nav.social-media a {
 color: inherit;
 text-decoration: none;
}

footer > .details nav.email-links {
 display: grid;
 grid-template-columns: auto;
 row-gap: 8px;
 align-content: start;
 justify-items: start;
}

footer > .details nav.email-links a {
 color: #000;
 margin: 0px;
 word-break: break-word;
 line-height: 1.6;
 font-size: 18px;
 transition: background 130ms ease-in 0s;
 text-decoration: underline;
}

footer > .details nav.email-links a:hover {
 color: rgb(255, 255, 255);
 background: rgb(0, 0, 0);
}

footer .address {
 letter-spacing: unset;
 word-spacing: unset;
 margin: 0px;
 color: #333333;
 word-break: break-word;
 font-weight: 400;
 line-height: 1.6;
 font-size: 18px;
 font-weight: 300;
}

footer > section.links {
 grid-template-columns: repeat(2, 1fr);
 grid-column: 4 / -1;
}

footer > .links nav {
 display: grid;
 grid-template-columns: auto;
 row-gap: 8px;
 align-content: start;
 justify-items: start;
}

footer > .links nav > .section-heading {
 margin-bottom: 4px;
 letter-spacing: 0.2em;
}

footer > .links nav > .section-heading > h3 {
 margin: 0px;
 color: rgb(51, 51, 51);
 word-break: break-word;
 text-transform: uppercase;
 font-family: "Neue Haas Grotesk Text", system-ui, "Helvetica Neue", Arial,
  sans-serif;
 font-weight: 400;
 line-height: 1.5;
 font-size: 13px;
}

footer > .links nav a {
 margin: 0px;
 word-break: break-word;
 line-height: 1.6;
 font-size: 18px;
 padding: 0px;
 font-weight: 300;
 color: rgb(0, 0, 0);
 text-align: inherit;
 text-decoration: none;
 cursor: pointer;
}

footer > .links .terms {
 grid-column: 1 / -1;
 margin-top: 40px;
 row-gap: 20px;
 display: grid;
 gap: 28px 8px;
 align-content: start;
}

footer > .links .terms > p {
 margin: 0px;
 color: rgb(51, 51, 51);
 word-break: break-word;
 font-family: "Neue Haas Grotesk Text", system-ui, "Helvetica Neue", Arial,
  sans-serif;
 line-height: 1.5;
 font-size: 13px;
}

@media (min-width: 768px) {
 footer {
  grid-template-columns: repeat(12, 1fr);
 }

 footer > section.links {
  grid-template-columns: repeat(4, 1fr);
 }

 footer > .links .terms {
  margin-top: 0;
 }

 footer .address,
 footer > .links .terms > p,
 footer > .links nav > .section-heading > h3 {
  font-size: calc(13px + 3 * ((100vw - 768px) / 432));
 }
}

@media (min-width: 992px) {
 footer {
  padding: 120px 40px !important;
 }
}

@media screen and (min-width: 1200px) {
 footer .address,
 footer > .links nav a {
  font-size: 23px;
 }

 footer > .links nav > .section-heading > h3 {
  font-size: 16px;
 }

 footer > .links .terms > p {
  font-size: 16px;
 }
}

@media (min-width: 1440px) {
 footer {
  padding-right: 100px !important;
  padding-left: 100px !important;
 }
}