/* Welcome to the Combyne style file!!! */
@import url("https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css");
@import url("https://fonts.googleapis.com/css2?family=Heebo:wght@400;500;700&family=IBM+Plex+Serif:ital,wght@0,500;0,600;0,700;1,400;1,500&display=swap");
@import url("https://unpkg.com/swiper/swiper-bundle.min.css");

.wrapper {
  width: 100%;
}

header nav,
nav ul,
nav ul li,
header a.logo,
footer .upper,
footer .upper div.social ul li,
footer .upper div.social ul li a.social,
footer .inner,
footer .inner div,
section.calltoaction,
.col .inner,
.fold,
.btn,
.modal,
.modal-header,
.modal-body form div.footer-form,
header .logo,
header .nav,
header .nav--desktop ul,
header .nav--desktop ul li {
  display: flex;
  align-content: center;
  justify-content: center;
  align-items: center;
}

header .menu-dropdown:after,
header .menu-dropdown-mobile:after {
  content: '';
  position: absolute;
}

main section.hero div.inner div.hero-text,
main section.hero div.inner div.hero-cta,
section.reason,
section.testimonial-lp,
section {
  padding: 3.5rem 1.5rem;
}

@media all and (min-width: 650px) {

  main section.hero div.inner div.hero-text,
  main section.hero div.inner div.hero-cta,
  section.reason,
  section.testimonial-lp,
  section {
    padding: 6.5rem 1.5rem;
  }
}

@media all and (min-width: 980px) {

  main section.hero div.inner div.hero-text,
  main section.hero div.inner div.hero-cta,
  section.reason,
  section.testimonial-lp,
  section {
    padding: 6.5rem 0;
  }
}

@media all and (min-width: 600px) {

  header nav,
  footer .upper,
  footer .inner,
  main section div.inner,
  header .nav {
    width: 600px;
  }
}

@media all and (min-width: 650px) {

  header nav,
  footer .upper,
  footer .inner,
  main section div.inner,
  header .nav {
    width: 650px;
  }
}

@media all and (min-width: 980px) {

  header nav,
  footer .upper,
  footer .inner,
  main section div.inner,
  header .nav {
    max-width: 980px;
  }
}

@media all and (min-width: 1100px) {

  header nav,
  footer .upper,
  footer .inner,
  main section div.inner,
  header .nav {
    max-width: 1100px;
  }
}

.two-column .inner div img,
section.scrollslider div.slide img {
  margin: 0 auto;
  max-width: 100%;
}

@media all and (min-width: 600px) {

  .two-column .inner div img,
  section.scrollslider div.slide img {
    max-width: 100%;
  }
}

@media all and (min-width: 650px) {

  .two-column .inner div img,
  section.scrollslider div.slide img {
    max-width: 100%;
  }
}

@media all and (max-width: 980px) {
  .desktop-only {
    display: none;
  }
}

@media all and (max-width: 650px) {
  .tablet-only {
    display: none;
  }
}

@media all and (min-width: 650px) {
  .mobile-only {
    display: none;
  }
}

.hide-it {
  display: none !important;
  visibility: hidden !important;
}

.m0 {
  margin: 0 !important;
}

.m-bottom-1 {
  margin-bottom: 1.5rem !important;
}

.p0 {
  padding: 0 !important;
}

.pd-bottom-10 {
  padding-bottom: 3.5rem;
}

@media all and (max-width: 650px) {
  .pd-bottom-10 {
    padding-bottom: 0rem;
  }
}

.pd-bottom-0 {
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
  align-self: flex-end;
}

section div.m1 {
  margin-bottom: 3rem;
}

a.text-link,
a.text-link:hover,
a.text-link.green:hover,
.accordions div.accordion:hover,
.accordions input:checked~.accordion-content,
.accordions input:checked~.accordion-content p,
.accordions input:checked~.accordion-content ul,
.accordions .accordion-label::after,
.accordions .accordion-label::before,
.accordions .accordion-content,
.accordions .accordion-content p,
.accordions .accordion-content ul,
.accordions .accordion-content li,
.accordions-paragraph input:checked~.accordion-content,
.accordions-paragraph input:checked~.accordion-content p,
.accordions-paragraph input:checked~.accordion-content ul,
.accordions-paragraph label.accordion-label::after,
.accordions-paragraph .accordion-content,
.accordions-card input:checked~.accordion-content,
.accordions-card input:checked~.accordion-content p,
.accordions-card input:checked~.accordion-content ul,
.accordions-card label.accordion-label::after,
.accordions-card .accordion-content,
.accordions-card .accordion-content p,
.accordions-nav input:checked~.accordion-content,
.accordions-nav input:checked~.accordion-content p,
.accordions-nav input:checked~.accordion-content ul,
.accordions-nav .accordion-label::after,
.accordions-nav .accordion-content,
.accordions-nav .accordion-content p,
.accordions-nav .accordion-content ul,
.accordions-nav .accordion-content li {
  transition: all 0.35s;
}

strong {
  font-weight: 700;
}

.left {
  text-align: left;
}

.right {
  text-align: right;
}

.white {
  color: white;
}

.huge-number {
  display: none;
  font-size: 65px;
  font-family: "IBM Plex Serif", serif;
  color: #E3E2DA;
}

@media screen and (min-width: 650px) {
  .huge-number {
    display: block;
  }
}

h2.regular {
  font-size: 1.6rem;
  margin: 0;
}

h2.regular.bold {
  font-weight: 500;
}

h2.small~p.small {
  font-size: 1rem;
}

h1,
h2,
h4 {
  font-family: "IBM Plex Serif", serif;
  color: #403E3C;
}

h1 {
  font-size: 1.8576rem;
  color: white;
  line-height: 1.2;
  margin: 0 0 1rem 0;
  text-shadow: 0px 3px 10px #00000066;
}

@media all and (min-width: 980px) {
  h1 {
    font-size: 2.125rem;
  }
}

h1.title {
  font-size: 1.8576rem;
  text-shadow: none;
}

@media all and (min-width: 980px) {
  h1.title {
    font-size: 3rem;
  }
}

section.cream h1 {
  color: #403E3C;
}

h2 {
  font-size: 1.8576rem;
  text-align: center;
  font-weight: 500;
  line-height: 1.4;
  margin: 0 0 3.5rem 0;
  color: #403E3C;
}

h2 em {
  font-style: oblique;
}

@media all and (min-width: 980px) {
  h2 {
    font-size: 2.125rem;
  }
}

h3 {
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.4;
  color: #403E3C;
}

h4 {
  font-size: 1.125rem;
  line-height: 1.9;
  font-weight: 700;
  margin: 0;
}

p {
  color: #403E3C;
  font-size: 1.125rem;
  line-height: 1.6;
}

p em {
  font-style: oblique;
}

.col.compact p {
  margin: 1rem 0;
}

span~h1,
span~h2 {
  padding-top: 6px;
}

img~p {
  margin: 1.3rem 0 1.5rem;
}

p~p {
  margin: 1rem 0;
}

img.icon~p {
  text-align: center;
  padding: 0 1rem;
}

a.link {
  font-size: 16px;
  font-weight: 500;
  line-height: 1.4;
  margin: 1rem 0 0.5rem 0;
  padding-left: 2rem;
  display: block;
  text-decoration: none;
  transition: all 0.3s linear;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
}

@media all and (min-width: 980px) {
  a.link {
    font-size: 14px;
  }
}

a.link.li-blue {
  color: #528AD9;
}

a.link.li-blue:before {
  background-image: url("../../img/info-icon.svg");
  left: 0;
}

@media all and (min-width: 650px) {
  a.link.li-blue:before {
    left: 15px;
  }
}

a.link.li-blue.no-left {
  left: 0;
}

a.link.li-blue.no-left:before {
  left: 0;
}

a.link.li-gray {
  color: #403E3C;
  padding-top: 1.25rem;
}

a.link.li-gray:before {
  background-image: url("../../img/info-icon.svg");
  left: 0;
}

a.link:before {
  content: '';
  position: absolute;
  left: 16px;
  background-size: cover;
  height: 20px;
  width: 20px;
}

a.link:hover {
  text-decoration: underline;
  transition: all 0.5s;
}

span {
  color: #403E3C;
}

span.title {
  font-size: 1rem;
  font-weight: 700;
}

@media all and (min-width: 980px) {
  span.title {
    font-size: 1.125rem;
    width: 100%;
  }
}

h2.huge {
  font-size: 2.125rem;
}

@media all and (min-width: 980px) {
  h2.huge {
    font-size: 3rem;
  }
}

h2.small {
  font-size: 1.3622rem;
  margin: 0;
}

@media all and (min-width: 980px) {
  h2.small {
    font-size: 1.8576rem;
  }
}

h2.smaller {
  font-size: 1.125rem;
}

@media all and (min-width: 980px) {
  h2.smaller {
    font-size: 1.25rem;
  }
}

p.small {
  font-size: 1rem;
}

@media all and (min-width: 980px) {
  p.small {
    font-size: 1.125rem;
  }
}

p.bold {
  font-weight: 600;
}

h6.small {
  font-size: 1rem;
  margin-bottom: 1rem;
  line-height: 1.4;
}

@media all and (min-width: 980px) {
  h6.small {
    font-size: 0.875rem;
  }
}

header nav a.menu {
  font-size: 0.875rem;
  font-family: "IBM Plex Serif", serif;
  color: white;
  padding: 0.875rem;
  text-decoration: none;
  transition: all 0.5s ease;
}

@media all and (min-width: 1100px) {
  header nav a.menu {
    margin-right: 0.5rem;
  }
}

header nav a.menu:hover,
header nav a.menu.active {
  background-color: #536b64;
  border-radius: 5rem;
  transition: all 0.5s ease;
}

section.calltoaction h2 {
  margin: 0 0 0 0;
  font-size: 39px;
}

@media all and (min-width: 980px) {
  section.calltoaction h2 {
    font-size: 2.125rem;
  }
}

.hero-text p {
  color: rgba(255, 255, 255, 0.85);
  font-size: 1rem;
  line-height: 1.4;
  margin: 0 0 1.5rem;
}

nav p {
  font-family: "IBM Plex Serif", serif;
  color: #FFFEFB;
  font-weight: 500;
}

section li p {
  color: #403E3C;
  font-size: 1.125rem;
}

.testimonials p {
  margin: 0;
  font-size: 1rem;
}

section.testimonial-lp.dark div blockquote {
  line-height: 1.6;
  font-family: "Heebo", sans-serif;
  font-weight: 400;
  padding: 1rem 0 0 0;
}

section.testimonial-lp.dark div blockquote p {
  color: #283935;
  font-size: 20px;
}

@media all and (min-width: 980px) {
  section.testimonial-lp.dark div blockquote p {
    color: white;
  }
}

section.testimonial-lp.dark div blockquote footer {
  position: relative;
  margin: 2rem 0 0 0;
  padding: 1rem 0;
  display: block;
  text-align: left;
}

section.testimonial-lp.dark div blockquote footer::before {
  content: '';
  height: 1px;
  width: 50px;
  background: #E0D177;
  position: absolute;
  top: 0px;
}

section.testimonial-lp.dark div blockquote footer p {
  width: 100%;
  font-weight: 600;
  font-size: 1rem;
  color: #283935;
}

@media all and (min-width: 980px) {
  section.testimonial-lp.dark div blockquote footer p {
    color: white;
    font-size: 1rem;
    line-height: 1.6;
  }
}

section.testimonial-lp.dark div blockquote footer cite {
  color: #283935;
  font-weight: 400;
  font-size: 1rem;
}

@media all and (min-width: 980px) {
  section.testimonial-lp.dark div blockquote footer cite {
    color: #FFFEFB;
  }
}

@media all and (min-width: 650px) {
  section.testimonial-lp.dark div blockquote {
    font-size: 1.25rem;
  }
}

footer h4 {
  padding: 0 0 1rem;
  font-size: 1.75rem;
  font-weight: 500;
}

@media all and (min-width: 650px) {
  footer h4 {
    font-size: 1.25rem;
    padding: 0 0 0.8rem;
  }
}

footer li a {
  font-size: 1.125rem;
  text-decoration: none;
  color: #403E3C;
  cursor: pointer;
}

footer li a:hover {
  text-decoration: underline;
}

@media all and (min-width: 650px) {
  footer li a {
    font-size: 1rem;
  }
}

* {
  box-sizing: border-box;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
  font-family: "Heebo", sans-serif;
}

body {
  font-size: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img {
  display: block;
  max-width: 90%;
  margin: auto;
}

@media all and (min-width: 600px) {
  img {
    max-width: 320px;
  }
}

img.shadow {
  box-shadow: 0px 3px 16px #0000001A;
}

a {
  cursor: pointer;
}

a.text-link {
  color: #528AD9;
  text-decoration: none;
}

a.text-link:hover {
  text-decoration: underline;
  color: #406DAC;
}

a.text-link.green {
  color: #E0D177;
}

a.text-link.green:hover {
  color: #A89E5F;
}

.container {
  width: 100%;
  margin: 0 auto;
  background-color: #FFFEFB;
}

header {
  background-color: #31524F;
  width: 100%;
  padding: 0.75rem 1rem;
  position: fixed;
  z-index: 9;
  top: 0;
  box-shadow: 0px 5px 9px #0000001A;
}

@media all and (min-width: 980px) {
  header {
    padding: 1rem;
  }
}

header .logo img {
  max-height: 2.3rem;
}

@media all and (min-width: 600px) {
  header .logo img {
    max-height: 2.5rem;
  }
}

header nav {
  width: 100%;
  margin: 0 auto;
}

header nav,
nav ul,
nav ul li,
header a.logo {
  justify-content: space-between;
}

@media all and (min-width: 980px) {
  nav ul.menu li:first-child {
    margin-right: 1.6rem;
  }
}

@media all and (min-width: 980px) {
  nav ul.menu li:not(:first-child) {
    display: flex;
    margin-right: 0;
  }
}

@media all and (min-width: 650px) {
  nav ul:nth-child(2) li:not(:last-child) {
    display: flex;
  }
}

/* .hidden {
    display: flex;
  
    @media all and (min-width: $tablet) {
      display: none;
    }
  } */
footer {
  background-color: transparent;
  width: 100%;
  padding: 1.5rem;
  color: #403E3C;
  display: flex;
  margin: 0 auto;
  flex-direction: column;
  text-align: center;
}

@media all and (min-width: 650px) {
  footer {
    text-align: left;
  }
}

footer .upper {
  display: grid;
  grid-template-columns: 1fr;
  margin: 1rem auto;
  width: 100%;
  grid-gap: 2rem;
}

@media all and (min-width: 980px) {
  footer .upper {
    grid-template-columns: 20% 65% 15%;
    grid-gap: 0;
    margin: 1rem auto 3rem;
  }
}

footer .upper div.more {
  margin: 1rem 0;
  align-self: baseline;
  order: 2;
}

@media all and (min-width: 980px) {
  footer .upper div.more {
    order: 2;
  }
}

footer .upper div.more ul {
  display: grid;
  grid-template-columns: 1fr;
}

@media all and (min-width: 980px) {
  footer .upper div.more ul {
    grid-template-columns: 25% 25% 50%;
  }
}

footer .upper div.more li {
  padding: 0 0 2rem;
}

@media all and (min-width: 980px) {
  footer .upper div.more li {
    padding: 0.5rem 0;
  }
}

footer .upper div.social {
  align-self: baseline;
  order: 1;
}

@media all and (min-width: 980px) {
  footer .upper div.social {
    order: 2;
  }
}

footer .upper div.social ul {
  flex-direction: row;
  display: flex;
  justify-content: center;
}

footer .upper div.social ul li {
  background-color: #E0D177;
  border-radius: 50%;
  width: 54px;
  height: 54px;
  justify-self: center;
  align-content: center;
}

footer .upper div.social ul li:hover {
  background-color: #A89E5F;
}

@media all and (min-width: 980px) {
  footer .upper div.social ul li {
    width: 40px;
    height: 40px;
  }
}

footer .upper div.social ul li a.social {
  line-height: 0;
  height: 100%;
  justify-self: center;
  align-content: center;
}

footer .upper div.social ul li:nth-child(2) {
  margin: 0 1rem;
}

footer .upper div.social ul li img {
  width: 100%;
  height: 24px;
}

@media all and (min-width: 980px) {
  footer .upper div.social ul li img {
    height: 16px;
  }
}

footer .inner {
  flex-direction: column;
  justify-content: space-between;
  text-align: center;
  margin: 0 auto;
  width: 100%;
}

@media all and (min-width: 650px) {
  footer .inner {
    flex-direction: row;
    text-align: left;
  }
}

footer .inner div {
  align-items: center;
}

footer .inner div span {
  margin: 0 1rem 0 0;
  font-weight: 500;
  opacity: 60%;
}

footer .inner p {
  padding: 0 0 2rem 0;
  font-size: 0.875rem;
}

@media all and (min-width: 650px) {
  footer .inner p {
    padding: 0;
  }
}

footer img {
  max-height: 18px;
}

main {
  position: relative;
}

main section:first-child {
  margin-top: 64px;
}

main section:first-child.targets {
  margin-top: 96px;
}

@media all and (min-width: 980px) {
  main section:first-child.targets {
    margin-top: 73px;
  }
}

@media all and (min-width: 980px) {
  main section:first-child {
    margin-top: 73px;
  }
}

main section div.inner {
  width: 100%;
  margin: 0 auto;
}

main section.dark {
  background: #31524F;
}

main section.dark h2,
main section.dark p {
  color: #FFFEFB;
}

main section.light,
.light {
  background-color: #FFFEFB;
  color: #403E3C;
}

main section.cream,
.cream {
  background-color: #F5F4F0;
  color: #403E3C;
}

main section.producer {
  background-color: #FBF7E2;
}

main section.buyer {
  background-color: #ECF7FC;
}

main section.hero.forage-bg {
  background-image: url("../../img/52004865-0-hero-bg.jpg");
  background-size: 950px;
  background-position: left top;
  background-repeat: no-repeat;
}

@media all and (min-width: 980px) {
  main section.hero.forage-bg {
    background-size: cover;
    min-height: 91vh;
  }
}

main section.hero {
  min-height: 500px;
  display: flex;
  padding: 0;
}

main section.hero.targets {
  min-height: 360px;
  padding-bottom: 2rem;
}

@media all and (min-width: 980px) {
  main section.hero.targets {
    padding-bottom: 5.5rem;
  }
}

@media screen and (min-width: 650px) {
  main section.hero.targets div.inner.area {
    grid-template-columns: 35% 65%;
  }
}

main section.hero div.inner {
  display: flex;
  align-items: center;
  flex-direction: column;
}

main section.hero div.inner.area {
  display: grid;
  grid-template-areas: "text""image""cta";
}

@media all and (min-width: 650px) {
  main section.hero div.inner {
    display: grid;
    grid-template-columns: 40% 60%;
    flex-direction: row;
  }

  main section.hero div.inner.area {
    display: grid;
    grid-template-areas: "text image""cta image";
  }
}

@media all and (min-width: 980px) {
  main section.hero div.inner {
    display: grid;
    grid-template-columns: 40% 60%;
    grid-gap: 0;
    flex-direction: row;
    padding-bottom: 3.5rem;
    padding-top: 2rem;
  }

  main section.hero div.inner .pd-bottom {
    padding-bottom: 0rem;
  }
}

main section.hero div.inner.area>div.hero-text {
  grid-area: text;
}

main section.hero div.inner.area>div.hero-image {
  grid-area: image;
}

main section.hero div.inner.area>div.hero-cta {
  grid-area: cta;
}

main section.hero div.inner.area>div.hero-text,
main section.hero div.inner.area>div.hero-image,
main section.hero div.inner.area>div {
  padding-bottom: 0;
}

main section.hero div.inner div.hero-text {
  text-align: center;
  margin: auto;
  padding-bottom: 1rem;
}

@media all and (min-width: 650px) {
  main section.hero div.inner div.hero-text {
    text-align: left;
  }
}

@media all and (min-width: 980px) {
  main section.hero div.inner div.hero-text {
    padding: 3.5rem 0 0;
  }
}

main section.hero div.inner div.hero-text h1 {
  font-size: 2.4rem;
  color: #403E3C;
  text-shadow: none;
}

@media all and (min-width: 980px) {
  main section.hero div.inner div.hero-text h1 {
    font-size: 3rem;
  }
}

main section.hero div.inner div.hero-text p {
  color: #403E3C;
  font-size: 1.25rem;
}

main section.hero div.inner div.hero-text p.small {
  font-size: 1rem;
}

main section.hero div.inner div.hero-image {
  text-align: center;
  padding: 1rem 0;
}

@media all and (min-width: 650px) {
  main section.hero div.inner div.hero-image {
    display: block;
    position: relative;
    order: 2;
  }
}

main section.hero div.inner div.hero-image img {
  width: 100%;
}

@media all and (min-width: 650px) {
  main section.hero div.inner div.hero-image img {
    max-width: 100%;
  }
}

@media all and (min-width: 980px) {
  main section.hero div.inner div.hero-image img {
    max-width: 100%;
  }
}

main section.hero div.inner div.hero-image-mobile {
  display: block;
  text-align: center;
  width: 100%;
}

@media all and (min-width: 650px) {
  main section.hero div.inner div.hero-image-mobile {
    display: none;
  }
}

main section.hero div.inner div.hero-image-mobile img {
  width: 65%;
}

@media all and (min-width: 650px) {
  main section.hero div.inner div.hero-image-mobile img {
    max-width: 65%;
  }
}

@media all and (min-width: 980px) {
  main section.hero div.inner div.hero-image-mobile img {
    max-width: 65%;
  }
}

main section.hero div.inner div.hero-cta {
  text-align: center;
  padding-top: 0;
}

@media all and (min-width: 650px) {
  main section.hero div.inner div.hero-cta {
    text-align: left;
  }
}

section.reason h2 {
  text-align: center;
  margin: 0 0 1rem;
}

@media all and (min-width: 980px) {
  section.reason h2 {
    padding: 0 6rem;
  }
}

section.reason ul {
  display: grid;
  justify-content: center;
  text-align: center;
}

section.reason ul li {
  padding: 1rem;
}

@media all and (min-width: 980px) {
  section.reason ul li {
    padding: 2rem 1rem;
  }
}

section.reason ul h2 {
  font-size: 1.5rem;
  margin: 0;
  padding: 0.5rem 0 0 0;
}

section.reason ul img {
  max-width: 260px;
}

section.testimonial-lp {
  width: 100%;
  padding-right: 0;
  padding-left: 0;
  padding-bottom: 0;
}

section.testimonial-lp div.inner {
  display: flex;
  align-items: center;
  flex-direction: column;
}

@media all and (min-width: 650px) {
  section.testimonial-lp div.inner {
    display: grid;
    grid-template-columns: 1fr;
    grid-gap: 10%;
    flex-direction: row;
    padding-bottom: 6.5rem;
  }
}

section.testimonial-lp div.inner h2 {
  margin-bottom: 0.5rem;
  padding: 0 1rem;
}

@media all and (min-width: 650px) {
  section.testimonial-lp div.inner h2 {
    text-align: left;
    padding: 0;
  }
}

section.commodity {
  background: url("../../img/mobile-commodities-bg@3x.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100%;
}

@media all and (min-width: 980px) {
  section.commodity {
    background: url("../../img/commodities-bg-desktop@3x.jpg");
    background-repeat: no-repeat;
    background-position: top right;
    background-size: 40%;
    min-height: 90vh;
    display: flex;
    justify-items: center;
    align-items: center;
  }
}

section.commodity .inner {
  grid-template-columns: 1fr;
}

section.commodity h2 {
  margin: 0 0 1rem 0;
}

@media all and (min-width: 980px) {
  section.commodity h2 {
    text-align: left;
  }
}

section.commodity h3 {
  text-align: center;
}

@media all and (min-width: 980px) {
  section.commodity h3 {
    text-align: left;
  }
}

section.commodity ul.flex.block {
  grid-template-columns: 1fr;
  margin: 1rem 0;
}

@media all and (min-width: 980px) {
  section.commodity ul.flex.block {
    margin: 3rem 0;
    grid-gap: 2rem;
  }
}

section.commodity ul.flex.block li {
  display: block;
  text-align: center;
}

section.commodity ul.flex.block li ul.tag {
  grid-gap: 0;
}

section.commodity ul.flex.block li div li {
  margin: 0.5rem 0.5rem 0 0;
}

@media all and (min-width: 980px) {
  section.commodity ul.flex.block li {
    display: flex;
  }

  section.commodity ul.flex.block li img {
    margin: 0;
  }
}

section.calltoaction {
  background: linear-gradient(0deg, black 2%, rgba(0, 0, 0, 0.9) 10%, rgba(0, 0, 0, 0.1) 100%);
  background-size: cover;
  background-position: 100% 75%;
  background-repeat: no-repeat;
  text-align: center;
  min-height: 75vh;
  color: white;
}

section.calltoaction .inner div.grid {
  display: grid;
  grid-template-rows: 1fr;
  row-gap: 1.5rem;
}

@media all and (min-width: 980px) {
  section.calltoaction .inner div.grid {
    max-width: 720px;
    margin: 0 auto;
  }
}

.col {
  flex-direction: column;
}

.col .inner div {
  width: 100%;
}

.compact {
  max-width: 720px;
  margin: 0 auto;
}

.compact.left h2 {
  text-align: left;
}

.compact form {
  max-width: 480px;
  margin: 3rem auto 0;
}

@media all and (min-width: 650px) {
  .col-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 5%;
  }

  .col-2 .slim {
    grid-gap: 4%;
  }
}

.col-2.center div:first-child {
  margin-bottom: 4rem;
}

@media all and (min-width: 650px) {
  .col-2.center div:first-child {
    margin-bottom: 0rem;
  }
}

.col-2 div.left h2 {
  text-align: left;
}

.col-2 .fixed-image {
  margin: 0;
}

@media all and (min-width: 650px) {
  .col-2.unequal {
    grid-template-columns: 1fr 2fr;
  }
}

.two-column .inner {
  display: flex;
  align-items: center;
  flex-direction: column;
}

.two-column .inner div {
  text-align: center;
}

@media all and (min-width: 980px) {
  .two-column .inner div {
    text-align: left;
  }
}

.two-column .inner div a img {
  max-width: 180px;
  cursor: pointer;
}

@media all and (min-width: 980px) {
  .two-column .inner div a img {
    max-width: 140px;
  }
}

.two-column .inner h2,
.two-column .inner p {
  text-align: center;
  margin: 0rem 0 1rem 0;
}

@media all and (min-width: 650px) {
  .two-column .inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 10%;
  }

  .two-column .inner h2,
  .two-column .inner p {
    text-align: left;
  }

  .two-column .inner p {
    font-size: 1.125rem;
    line-height: 1.7;
  }
}

.two-column ul {
  margin: 2rem 0;
}

.two-column ul li.flex {
  display: inline-flex;
  align-items: center;
  padding: 0;
  margin: 0 0 0.5rem 0;
}

.two-column ul li.flex img {
  margin: 0 1rem 0 0;
}

.two-column ul li.flex p {
  margin-bottom: 0;
  font-weight: 500;
  text-align: left;
}

.two-column.calltoaction div {
  text-align: center;
  margin-bottom: 0;
}

@media all and (min-width: 980px) {
  .two-column.calltoaction div {
    text-align: left;
  }
}

@media all and (max-width: 650px) {
  section .inner div {
    margin-bottom: 2rem;
  }
}

section .inner div img.small.mobile {
  max-width: 180px;
}

@media all and (min-width: 650px) {
  section .inner div img.small.mobile {
    max-width: 90%;
  }
}

section.borderless {
  padding-top: 0;
}

@media all and (min-width: 980px) {
  section div.inner.unequal {
    display: grid;
    grid-template-columns: 35% 60%;
    grid-gap: 5%;
    flex-direction: row;
  }
}

section div.inner.unequal ul {
  display: flex;
  flex-direction: column;
}

.fold {
  height: 100vh;
  max-width: 560px;
}

.fold img {
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  margin-bottom: 2rem;
}

.fold h1 {
  color: #403E3C;
  text-shadow: none;
}

@media all and (min-width: 650px) {
  .inner.reverse {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 10%;
  }

  .inner.reverse.slim {
    grid-gap: 4%;
  }

  .inner.reverse.unequal {
    grid-template-columns: 2fr 3fr;
  }
}

@media all and (min-width: 650px) {
  .inner.reverse div:nth-child(1) {
    order: 2;
  }
}

@media all and (min-width: 650px) {
  .inner.reverse div:nth-child(2) {
    order: 1;
  }
}

.swiper-container {
  width: 100%;
  height: auto;
  bottom: 0;
}

.combyne-pagination {
  width: 70px;
  height: 10px;
}

.combyne-pagination span.swiper-pagination-bullet {
  width: 70px;
  height: 10px;
  border-radius: 6px;
  background: #667b75;
  opacity: 1;
}

.combyne-pagination span.swiper-pagination-bullet.swiper-pagination-bullet-active {
  background-color: #667b75;
  width: 70px;
  position: relative;
}

.combyne-pagination span.swiper-pagination-bullet.swiper-pagination-bullet-active::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 70px;
  height: 10px;
  border-radius: 6px;
  background-color: #E0D177;
  -webkit-animation: load 4.5s ease;
  animation: load 4.5s ease;
}

.swiper-slide.swiper-slide-next,
.swiper-slide.swiper-slide-prev {
  opacity: 0.5;
}

@media all and (min-width: 980px) {

  .swiper-slide.swiper-slide-next,
  .swiper-slide.swiper-slide-prev {
    opacity: 0;
  }
}

@-webkit-keyframes load {
  0% {
    max-width: 0;
    width: 70px;
  }

  100% {
    width: 70px;
    max-width: 70px;
  }
}

@keyframes load {
  0% {
    max-width: 0;
    width: 70px;
  }

  100% {
    width: 70px;
    max-width: 70px;
  }
}

.testimonial-col-2 {
  background: #FFFEFB;
  border-radius: 1rem;
  padding: 1rem;
  margin: 0;
  color: #403E3C;
}

@media all and (min-width: 980px) {
  .testimonial-col-2 {
    background: transparent;
    display: grid;
    grid-template-columns: 35% 60%;
    grid-gap: 7%;
  }
}

.testimonial-col-2 div.text {
  margin: 0;
  display: flex;
  flex-direction: column;
}

.flex-column {
  display: flex;
  flex-direction: column;
  text-align: center;
  margin: 0;
}

.flex-column h2 {
  text-align: center;
  margin: 0 0 1rem 0;
}

@media all and (min-width: 980px) {
  .flex-column h2 {
    text-align: left;
  }
}

.flex-column p {
  font-size: 1rem;
}

.flex-column div:nth-child(2) {
  padding: 0;
}

@media all and (min-width: 980px) {
  .flex-column div:nth-child(2) {
    padding: 0 1rem;
  }
}

@media all and (min-width: 980px) {
  .flex-column {
    flex-direction: row;
    width: 40vw;
    max-width: 600px;
    text-align: left;
  }
}

.rows {
  display: grid;
  grid-gap: 2rem;
}

@media all and (min-width: 980px) {
  .rows {
    grid-gap: 4rem;
  }
}

@media all and (min-width: 980px) {
  main section.final {
    background-image: url("../../img/all-devices@3x.png");
    background-size: 600px;
    background-position: 105% 50%;
    background-repeat: no-repeat;
  }

  main section.final h2.title {
    text-align: left;
    font-size: 3rem;
  }
}

img.full {
  max-width: 100%;
}

section ul li img.icon,
img.icon {
  max-width: 160px;
}

.center {
  text-align: center;
  margin: 0 auto;
}

.fade-in {
  animation: fadeIn ease 1s;
  -webkit-animation: fadeIn ease 1s;
  -moz-animation: fadeIn ease 1s;
  -o-animation: fadeIn ease 1s;
  -ms-animation: fadeIn ease 1s;
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@-webkit-keyframes fadeIn {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

.btn {
  cursor: pointer;
  white-space: normal;
  min-width: 150px;
  max-width: -webkit-fit-content;
  max-width: -moz-fit-content;
  max-width: fit-content;
  padding: 0 0.875rem;
  text-decoration: none;
  min-height: 2.5rem;
  border-radius: 1.3625rem;
  font-family: "IBM Plex Serif", serif;
  font-weight: 500;
  -webkit-appearance: none;
}

.btn.btn-link {
  display: block;
  padding: 1.2rem 0;
  font-size: 1.125rem;
  font-weight: 600;
  position: relative;
  color: #403E3C;
  min-width: -webkit-fit-content;
  min-width: -moz-fit-content;
  min-width: fit-content;
}

.btn.btn-link::after {
  content: "";
  background-image: url("../../img/right.svg");
  background-repeat: no-repeat;
  margin: 0rem 0.8rem;
  position: absolute;
  width: 20px;
  height: 20px;
  text-align: center;
}

.btn.btn-link.btn-external::after {
  content: "";
  background-image: url("../../img/external-link-symbol.svg");
  background-repeat: no-repeat;
  margin: 0rem 0.8rem;
  position: absolute;
  width: 20px;
  height: 20px;
}

.btn.btn-link::before {
  content: "";
  height: 4px;
  width: 0%;
  position: absolute;
  background: #403E3C;
  bottom: 5px;
  transition: width 420ms cubic-bezier(0.165, 0.84, 0.44, 1);
}

.btn.btn-link:hover {
  color: #403E3C;
  border-bottom-color: #403E3C;
  border-bottom-width: 2px;
}

.btn.btn-link:hover::before {
  content: "";
  width: 100%;
  transition: width 420ms cubic-bezier(0.165, 0.84, 0.44, 1);
}

.btn.margins {
  margin: 1rem 0;
}

.btn-sm {
  font-size: 1rem;
}

@media all and (min-width: 980px) {
  .btn-sm {
    font-size: 1rem;
  }
}

.btn-lg {
  font-size: 17px;
  padding: 1rem 2rem;
  border-radius: 2rem;
}

@media all and (min-width: 980px) {
  .btn-lg {
    font-size: 17px;
  }
}

.btn-primary {
  background-color: #E0D177;
  font-size: 16.5px;
  line-height: 26px;
  font-weight: 600;
  color: #403E3C;
  padding: 10px 22px;
  transition: 0.2s;
  border-radius: 100px !important;
  box-shadow: 0px 2px 0px 0px rgba(0, 0, 0, 0.3215686275);
}

@media (max-width: 767px) {
  .btn-primary {
    padding: 8px 16px;
    font-size: 15px;
    line-height: 24px;
    font-weight: 500;
    font-family: "Heebo";
  }
}


.btn-primary:hover {
  background-color: #CCBD60;
}

.btn-primary.btn-video {
  display: inline-flex;
  padding: 0 1rem 0 3rem;
  margin-top: 1rem;
  position: relative;
  color: #403E3C;
  background-color: transparent;
  border: none;
}

@media all and (min-width: 980px) {
  .btn-primary.btn-video {
    margin-left: 10px;
    margin-top: 0;
  }
}

.btn-primary.btn-video i,
.btn-primary.btn-video svg,
.btn-primary.btn-video img {
  margin: 0 10px 0 0;
  height: 24px;
  left: 1rem;
  position: absolute;
  font-weight: 600;
}

.btn-primary.btn-video.btn-producers:hover {
  background: #F3EBB4;
}

.btn-primary.btn-video:hover {
  background-color: #DAE5EA;
  transition: all .5s;
}

.btn-primary.outline {
  background-color: transparent;
  color: #403E3C;
  border: 2px solid #E0D177;
}

.btn-primary.outline:hover {
  background-color: #E0D177;
  color: white;
  transition: all .3s;
}

.btn-secondary {
  background-color: #63817A;
  color: white;
  transition: all .5s;
}

.btn-secondary:hover {
  background-color: #5C716C;
  transition: all .5s;
}

.btn-nav {
  margin: 0 0 0 1rem;
  font-size: 0.875rem;
}

@media all and (max-width: 280px) {
  .btn-nav {
    display: none;
  }
}

.btn-cta {
  height: 3rem;
  margin: auto;
  display: inline-flex;
}

@media all and (min-width: 600px) {
  .btn-cta {
    height: 3.125rem;
    max-width: -webkit-fit-content;
    max-width: -moz-fit-content;
    max-width: fit-content;
    padding: 0 2rem;
    border-radius: 1.5625rem;
  }
}

@media all and (min-width: 650px) {
  .btn-cta {
    margin: 0;
  }
}

.btn-inline {
  display: flex;
  justify-content: center;
  flex-flow: row wrap;
  align-items: center;
}

.btn-inline a {
  margin: 1.5rem 0 0;
}

@media all and (min-width: 600px) {
  .btn-inline a {
    margin: 0 1rem 0 0;
  }
}

@media all and (min-width: 600px) {
  .btn-inline {
    flex-direction: row;
  }
}

@media all and (min-width: 650px) {
  .btn-inline {
    display: flex;
  }

  .btn-inline.left-align {
    justify-content: flex-start;
  }

  .btn-inline.left-align .btn {
    margin-top: 1rem;
  }
}

.btn-store {
  display: flex;
  justify-content: center;
  flex-flow: row wrap;
  align-items: center;
  gap: 1rem;
  margin: 1.5rem 0 0;
}

@media all and (min-width: 600px) {
  .btn-store {
    flex-direction: row;
  }
}

@media all and (min-width: 980px) {
  .btn-store {
    display: flex;
  }

  .btn-store.left-align {
    justify-content: flex-start;
  }
}

.btn-store p {
  padding: 1rem;
}

.btn-store a {
  text-decoration: none;
  height: 100%;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
}

.btn-store a img {
  transition: all 0.2s ease-in;
}

.btn-store a img:hover {
  transform: translate(0, -5px);
  box-shadow: 0px 5px 20px rgba(0, 0, 0, 0.3);
}

@media all and (min-width: 980px) {
  .btn-store a:first-child {
    padding: 0 1rem 0 0;
  }
}

.btn-store img {
  max-width: 140px;
  cursor: pointer;
}

@media all and (min-width: 980px) {
  .btn-store img {
    max-width: 140px;
    width: 100%;
  }
}

section ul {
  display: grid;
  grid-gap: 1rem;
  grid-template-columns: 1fr;
}

@media all and (min-width: 650px) {
  section ul {
    grid-template-columns: 1fr 1fr;
  }
}

@media all and (min-width: 980px) {
  section ul {
    grid-template-columns: 1fr 1fr 1fr;
  }
}

section ul li {
  padding: 0.5rem 0;
  border-radius: 1rem;
}

ul.tags {
  display: grid;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  margin: 0 auto;
  justify-content: center;
  align-items: center;
}

@media all and (min-width: 650px) {
  ul.tags {
    margin: 0 3rem;
    grid-template-columns: 1fr 1fr;
    margin: 0 auto;
  }
}

@media all and (min-width: 980px) {
  ul.tags {
    width: 100%;
  }
}

ul.tags li {
  position: relative;
  padding: 1rem 0 1rem 4rem;
}

ul.tags li::after {
  content: " ";
  background-image: url("../../img/52004795-0-icons-forage2x.png");
  position: absolute;
  left: 0;
  top: 10px;
  height: 25px;
  width: 32px;
  background-size: 100% 100%;
}

.testimonials ul li {
  border: 1px solid #403E3C66;
  padding: 1.5rem;
  display: flex;
  justify-content: space-between;
  flex-direction: column;
  min-height: 320px;
}

.testimonial-photo {
  height: auto;
  border-radius: 1rem;
  background: rgba(0, 0, 0, 0.2);
  width: 100%;
  background-image: url("../../img/testimonial-001.jpg");
  background-size: cover;
  background-position: top;
  box-shadow: 0 0px 12px 5px rgba(0, 0, 0, 0.03);
}

.swiper-slide {
  padding: 0 1rem;
}

@media all and (min-width: 980px) {
  .swiper-slide {
    padding: 0;
  }
}

/* Tab Structure */
.tab-wrapper {
  max-width: 100%;
  padding: 5rem 0 0;
  margin: auto;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
}

.tab-wrapper h2 {
  margin-bottom: 2rem;
}

/* Tab logic */
.tabset>input[type="radio"] {
  position: absolute;
  left: -200vw;
}

.tabset .tab-panel {
  display: none;
}

.tabset>input:first-child:checked~.tab-panels>.tab-panel:first-child,
.tabset>input:nth-child(3):checked~.tab-panels>.tab-panel:nth-child(2),
.tabset>input:nth-child(5):checked~.tab-panels>.tab-panel:nth-child(3),
.tabset>input:nth-child(7):checked~.tab-panels>.tab-panel:nth-child(4),
.tabset>input:nth-child(9):checked~.tab-panels>.tab-panel:nth-child(5),
.tabset>input:nth-child(11):checked~.tab-panels>.tab-panel:nth-child(6) {
  display: block;
}

/* Tab Styling */
.tabset>label {
  font-family: 'Heebo', sans-serif;
  position: relative;
  display: inline-block;
  padding: 15px 20px 25px;
  border: 0;
  margin: 0 -2px;
  font-weight: 400;
  color: white;
  opacity: 0.6;
  cursor: pointer;
}

.tabset>label::after {
  content: "";
  position: absolute;
  left: 0px;
  bottom: 10px;
  width: 100%;
  height: 2px;
  background: #63817A;
}

.tabset>label:hover,
.tabset>input:focus+label {
  color: #E0D177;
  opacity: 1;
}

.tabset>label:hover::after {
  background: #E0D177;
  height: 3px;
}

.tabset>input:focus+label::after,
.tabset>input:checked+label::after {
  background: white;
  height: 3px;
}

.tabset>input:checked+label {
  color: white;
  opacity: 1;
  font-weight: 600;
}

.tab-panel {
  padding: 30px 0 0;
  -webkit-animation: fadein .8s;
  animation: fadein .8s;
}

.tab-panel .panel-wrapper {
  display: grid;
  grid-template-columns: 1fr;
}

.panel-wrapper .text p {
  padding-bottom: 2rem;
}

.panel-wrapper .image {
  display: block;
  margin: 0 auto;
  text-align: center;
  width: 100%;
}

@media all and (min-width: 960px) {
  .panel-wrapper .image {
    margin: 0;
    text-align: left;
  }
}

.panel-wrapper img {
  max-width: 260px;
}

@media all and (min-width: 960px) {
  .panel-wrapper img {
    max-width: 75%;
  }
}

.tab-wrapper ul li {
  text-align: left;
  color: white;
  font-size: 1rem;
  line-height: 1;
  -webkit-text-decoration: dotted;
  text-decoration: dotted;
  list-style: initial;
  margin-left: 1rem;
  padding: 0;
}

.widget.item-absolute {
  bottom: 0;
  width: 10.6875rem;
  z-index: 7;
  position: relative;
  margin: 3.5rem 0 0 0;
}

section.tabs-combyne ul {
  padding: 0 0 40px;
  grid-template-columns: 1fr;
}

@-webkit-keyframes fadein {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes fadein {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

/* Media query */
@media screen and (min-width: 968px) {
  .tab-wrapper {
    max-width: 980px;
    padding: 3.5rem 0 0 0;
    margin: auto;
    width: 100%;
  }

  .tab-panel .panel-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 10rem;
  }

  .panel-wrapper img {
    max-width: 300px;
    position: absolute;
    bottom: 0;
  }

  .tabs-combyne {
    background-color: #31524F;
    width: 100%;
    height: 100vh;
    max-height: 680px;
    position: relative;
    text-align: left;
  }
}

section ul li div.row {
  margin: 0.5rem 1rem;
}

section ul li div.row ul.tag {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  margin: 1rem 0 0 0;
  justify-content: center;
}

@media all and (min-width: 980px) {
  section ul li div.row ul.tag {
    justify-content: flex-start;
  }
}

section ul li div.row ul.tag li {
  border-radius: 1.5rem;
  border: 1px solid rgba(63, 68, 77, 0.2);
  padding: 0.875em;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  font-size: 0.875rem;
}

@media all and (min-width: 980px) {
  section ul li div.row ul.tag li {
    font-size: 1.125rem;
  }
}

blockquote img {
  margin: 0 0 1rem 0;
}

.footer-logo {
  background-image: url("../../img/nav-logo.svg");
  background-position: 0px 0;
  background-repeat: no-repeat;
  background-size: cover;
  width: 36px;
  height: 36px;
  display: none;
}

@media all and (min-width: 980px) {
  .footer-logo {
    width: 96px;
    height: 96px;
    display: block;
  }
}

/* The Modal (background) */
.modal {
  display: none;
  position: fixed;
  z-index: 99;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0, 0, 0, 0.7);
}

/* Modal Content/Box */
.modal-content {
  background-color: #FFFEFB;
  width: 100%;
  max-width: 520px;
  border-radius: 10px;
  margin: 1rem;
  -webkit-animation-name: fadeIn;
  -webkit-animation-duration: 0.4s;
  animation-name: fadeIn;
  animation-duration: 0.4s;
}

.modal-content iframe {
  width: 100%;
  min-height: 100%;
}

.modal-header {
  background-color: #F5F4F0;
  position: relative;
  display: flex;
  padding: 1rem;
  justify-content: center;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  border-bottom: 1px solid rgba(63, 68, 77, 0.2);
  width: 100%;
}

.modal-header h4 {
  line-height: 1.4;
  margin: 0;
  padding: 0;
  font-size: 1.125rem;
  font-weight: 500;
}

@media all and (min-width: 980px) {
  .modal-header h4 {
    font-size: 1.25rem;
  }
}

.modal-body {
  padding: 2rem;
}

/* The Close Button */
.close {
  color: #aaa;
  font-size: 28px;
  font-weight: bold;
  position: absolute;
  line-height: 0;
  right: 20px;
}

.close.video {
  top: 2rem;
  right: 2rem;
}

.close:hover,
.close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}

/*the container must be positioned relative:*/
.custom-select {
  position: relative;
  font-family: "Heebo", sans-serif;
  font-size: 1rem;
  border-radius: 10px;
  padding: 0 !important;
}

.custom-select select {
  display: none;
  /*hide original SELECT element:*/
}

.select-selected {
  background-color: rgba(227, 226, 218, 0.2);
}

/*style the arrow inside the select element:*/
.select-selected:after {
  position: absolute;
  content: "";
  background: url("../../img/accordion-down-arrow.svg");
  background-size: cover;
  background-repeat: no-repeat;
  top: 33%;
  right: 20px;
  width: 22px;
  height: 14px;
}

/*point the arrow upwards when the select box is open (active):*/
.select-selected.select-arrow-active:after {
  content: "";
  background: url("../../img/accordion-down-arrow.svg");
}

/*style the items (options), including the selected item:*/
form div .select-items div,
.select-selected {
  color: #403E3C;
  padding: 0.925rem !important;
  border: 1px solid transparent;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  background-color: rgba(227, 226, 218, 0);
  transition: all 0.3s ease-in;
}

/*style items (options):*/
.select-items {
  position: absolute;
  background-color: #FFFEFB;
  color: #E0D177;
  top: 120%;
  left: 0;
  right: 0;
  z-index: 99;
  overflow-y: scroll;
  max-height: 180px;
  font-size: 1rem;
  border-radius: 9px;
  border: 1px solid gray;
  box-shadow: 0px 3px 16px #0000001A;
}

.hover-form {
  background-color: rgba(227, 226, 218, 0.2);
  border: 1px solid #b2b4b8;
  border-radius: 10px;
  transition: all 0.3s ease-in;
}

.hover-form:hover {
  border: 1px solid #403E3C;
  background-color: rgba(227, 226, 218, 0.5);
  transition: all 0.3s ease-in;
}

.select-selected:hover {
  background-color: rgba(227, 226, 218, 0.5);
  transition: all 0.3s ease-in;
}

/*hide the items when the select box is closed:*/
.select-hide {
  display: none;
}

.select-items div:hover,
.same-as-selected {
  background-color: #dce8f3;
}

.modal-content.larger-w {
  max-width: 640px;
}

.modal-content.larger-w.video {
  background-color: transparent;
}

.modal-content {
  position: relative;
  border-radius: 10px;
}

.info-modal {
  padding: 2.2rem 2.2rem 2.2rem 2.2rem;
  max-width: 540px;
}

.info-modal .close {
  top: 0;
  right: 0;
}

.info-modal img {
  width: 56px;
  margin: 0;
}

.info-modal h2,
.info-modal p {
  padding: 0;
  padding-top: 1rem;
  margin: 0;
  text-align: center;
}

.info-modal p {
  font-size: 1rem;
}

.info-modal .modal-header {
  background: transparent;
  border: none;
  padding: 0;
}

.info-modal .modal-body {
  padding: 0;
}

.modal-body.overflow {
  overflow-y: scroll;
  max-height: 80vh;
  min-height: 200px;
  margin-bottom: 2.5rem;
}

@media screen and (min-width: 980px) {
  .modal-body.overflow {
    display: grid;
    grid-template-columns: 42% 50%;
    grid-gap: 8%;
  }
}

.modal-col-info img {
  max-width: 180px;
}

.modal-col-info h2 {
  font-size: 1.25rem;
  margin: 1rem 0 0.5rem;
}

.modal-col-info h3 {
  text-align: center;
  font-size: 1rem;
}

.modal-col-info p {
  text-align: center;
  font-size: 1rem;
  width: 100%;
  line-height: 1.4;
}

.modal-body form div.footer-form {
  background-color: #F5F4F0;
  position: absolute;
  display: flex;
  z-index: 9;
  padding: 1rem;
  bottom: 0;
  left: 0;
  justify-content: center;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  border-bottom: 1px solid rgba(63, 68, 77, 0.2);
  width: 100%;
  border-top: 1px solid rgba(63, 68, 77, 0.2);
}

/* Add Animation */
@-webkit-keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

form.contact {
  width: 100%;
  margin-bottom: 1rem;
}

form.contact div {
  padding: 0 0 0.5rem 0;
  margin-bottom: 0 !important;
}

form.contact label {
  width: 100%;
  line-height: 2.5;
  font-size: 0.75rem;
  font-weight: 600;
}

form.contact input,
form.contact textarea {
  width: 100%;
  padding: 0.7rem;
  border-radius: 10px;
  font-size: 1rem;
  color: #403E3C;
  background-color: rgba(227, 226, 218, 0.2);
  border: 1px solid #b2b4b8;
  font-family: "Heebo", sans-serif;
  transition: all 0.3s ease-in;
}

form.contact input:hover,
form.contact input:focus,
form.contact textarea:hover,
form.contact textarea:focus {
  border-radius: 10px;
  outline: none;
  background-color: rgba(227, 226, 218, 0.5);
  border: 1px solid #403E3C;
  transition: all 0.3s ease-in;
}

form.contact .error-msg {
  padding: 0.5rem 0;
  color: #D57F7F;
  font-size: 0.875rem;
}

form.contact textarea {
  height: 120px;
}

form.contact input[type="submit"] {
  background-color: #E0D177;
  font-family: "IBM Plex Serif", serif;
  margin: 0 auto;
  border-radius: 2rem;
  border: none;
  font-size: 16.5px !important;
  line-height: 26px;
  font-weight: 600;
  color: #403E3C !important;
  padding: 10px 22px !important;
}

form.contact input[type="submit"]:hover,
form.contact input[type="submit"]:focus {
  background-color: #CCBD60;
  border: none;
  outline: none;
}

.accordions {
  overflow: hidden;
  width: 100%;
}

@media all and (min-width: 980px) {
  .accordions {
    width: 60%;
  }
}

.accordions div.accordion {
  width: 100%;
  overflow: hidden;
  margin: 1rem 0;
  border: 1px solid #c5c7c9;
  border-radius: 10px;
  transition: all 0.35s;
}

.accordions div.accordion ul {
  display: block;
  font-size: 1rem;
  padding: 1rem 1.5rem;
  line-height: 1.7;
}

.accordions div.accordion li {
  position: relative;
  font-size: 1rem;
}

.accordions div.accordion li::before {
  content: "";
  position: absolute;
  left: -15px;
  top: 15px;
  width: 6px;
  height: 6px;
  border-radius: 100%;
  background: #403E3C;
}

.accordions div.accordion input {
  position: absolute;
  opacity: 0;
  z-index: -1;
}

.accordions div.accordion:hover {
  border: 1px solid #403E3C;
}

.accordions input:checked+.accordion-label::after {
  transform: rotate(90deg);
}

.accordions input:checked~.accordion-content {
  max-height: 150vh;
  padding: 0 1em 1em;
}

.accordions input:checked~.accordion-content p,
.accordions input:checked~.accordion-content ul {
  opacity: 100%;
}

.accordions .accordion-label {
  display: flex;
  justify-content: space-between;
  padding: 1em 3em 1em 1em;
  cursor: pointer;
  text-align: left;
  color: #403E3C;
  font-size: 18px;
  line-height: 1.4;
  font-weight: 500;
  position: relative;
}

.accordions .accordion-label::after {
  content: '';
  top: 15px;
  position: absolute;
  right: 25px;
  width: 1px;
  height: 26px;
  background: #403E3C;
  text-align: center;
}

.accordions .accordion-label::before {
  content: '';
  top: 15px;
  position: absolute;
  right: 25px;
  width: 1px;
  height: 26px;
  background: #403E3C;
  text-align: center;
  transform: rotate(90deg);
}

.accordions .accordion-content {
  max-height: 0;
  padding: 0 1em;
  color: #403E3C;
  margin: 0 !important;
  text-align: left;
}

.accordions .accordion-content p,
.accordions .accordion-content ul,
.accordions .accordion-content li {
  font-size: 1rem;
}

.accordions .accordion-content li {
  font-size: 1rem;
}

.accordions .accordion-close {
  display: flex;
  justify-content: flex-end;
  padding: 1em;
  font-size: 0.75em;
  background: #2c3e50;
  cursor: pointer;
}

.accordions .accordion-close:hover {
  background: #1a252f;
}

.accordions-paragraph {
  margin-bottom: 0 !important;
}

.accordions-paragraph div.accordion {
  width: 100%;
}

@media all and (min-width: 650px) {
  .accordions-paragraph div.accordion {
    overflow: hidden;
    transition: all 0.35s;
    border-top: 0;
  }

  .accordions-paragraph div.accordion label:hover {
    text-decoration: underline;
  }
}

.accordions-paragraph div.accordion input {
  display: none;
}

@media all and (min-width: 650px) {
  .accordions-paragraph div.accordion input {
    position: absolute;
    opacity: 0;
    z-index: -1;
  }
}

.accordions-paragraph input:checked+div+label.accordion-label::after {
  transform: rotate(180deg);
}

.accordions-paragraph input:checked~.accordion-content {
  max-height: 250vh;
  opacity: 1;
  padding: 1rem 0 0;
}

.accordions-paragraph input:checked~.accordion-content p,
.accordions-paragraph input:checked~.accordion-content ul {
  opacity: 100%;
}

.accordions-paragraph input:checked~.accordion-content h3 {
  margin: 1rem 0 0 0;
}

.accordions-paragraph label {
  font-size: 1rem;
  font-family: "IBM Plex Serif", serif;
  font-weight: 600;
  color: #403E3C;
  margin: 0.5rem 0;
}

@media all and (min-width: 650px) {
  .accordions-paragraph label {
    font-size: 1.125rem;
  }
}

@media all and (min-width: 980px) {
  .accordions-paragraph label {
    margin: 1rem 0;
  }
}

.accordions-paragraph label.accordion-label {
  padding: 0;
  display: flex;
  -webkit-box-pack: justify;
  cursor: pointer;
  position: relative;
}

.accordions-paragraph label.accordion-label::after {
  content: "";
  background-image: url("../../img/accordion-down-arrow.svg");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: 0 2px;
  margin: 0.1rem 0.4rem;
  width: 18px;
  height: 16px;
  text-align: center;
}

.accordions-paragraph h2 {
  margin: 1rem 0;
}

.accordions-paragraph .accordion-content {
  margin: 1rem 0;
  color: #403E3C;
  text-align: left;
  opacity: 0;
  max-height: 0;
}

@media all and (min-width: 650px) {
  .accordions-paragraph .accordion-content {
    margin: 0 !important;
    padding: 0;
  }
}

.accordions-card div.accordion-card {
  width: 100%;
  margin: 0 0 0.6rem;
}

@media all and (min-width: 650px) {
  .accordions-card div.accordion-card {
    overflow: hidden;
    transition: all 0.35s;
    border: 1px solid #403E3C40;
    border-top: 0;
    border-radius: 5px;
  }

  .accordions-card div.accordion-card:hover {
    background: #FFFEFB;
  }
}

.accordions-card div.accordion-card input {
  display: none;
}

@media all and (min-width: 650px) {
  .accordions-card div.accordion-card input {
    position: absolute;
    opacity: 0;
    z-index: -1;
  }
}

@media all and (min-width: 650px) {
  .accordions-card input:checked+.accordion-label {
    border-top: 4px solid #E0D177;
    background: #FFFEFB;
  }

  .accordions-card input:checked+.accordion-label::after {
    transform: rotate(180deg);
  }
}

.accordions-card input:checked~.accordion-content {
  max-height: 150vh;
}

@media all and (min-width: 650px) {
  .accordions-card input:checked~.accordion-content {
    background: #FFFEFB;
    padding: 0 1em 1em;
  }
}

.accordions-card input:checked~.accordion-content p,
.accordions-card input:checked~.accordion-content ul {
  opacity: 100%;
}

.accordions-card label {
  font-size: 1.25rem;
  font-family: "IBM Plex Serif", serif;
  font-weight: 600;
  color: #403E3C;
}

@media all and (min-width: 650px) {
  .accordions-card label {
    font-size: 1rem;
  }
}

.accordions-card label.accordion-label {
  padding: 0;
}

@media all and (min-width: 650px) {
  .accordions-card label.accordion-label {
    display: flex;
    justify-content: space-between;
    padding: 1em 4em 1em 1em;
    cursor: pointer;
    position: relative;
    border-top: 1px solid #403E3C40;
    border-radius: 5px;
  }
}

@media all and (min-width: 650px) {
  .accordions-card label.accordion-label::after {
    content: "";
    background-image: url("../../img/accordion-down-arrow.svg");
    background-repeat: no-repeat;
    top: 17px;
    position: absolute;
    right: 25px;
    width: 22px;
    height: 14px;
    text-align: center;
  }
}

.accordions-card .accordion-content {
  padding: 1rem 0;
  color: #403E3C;
  text-align: left;
  position: relative;
}

@media all and (min-width: 650px) {
  .accordions-card .accordion-content {
    max-height: 0;
    margin: 0 !important;
    padding: 0 1em;
  }
}

.accordions-card .accordion-content p {
  font-size: 1rem;
}

@media all and (min-width: 650px) {
  .accordions-card .accordion-content p {
    font-size: 0.875rem;
  }
}

img#accordion-image {
  border-radius: 1rem;
  -o-object-fit: cover;
  object-fit: cover;
}

.accordion-img {
  display: block;
}

.accordion-img img {
  max-width: 100%;
  -o-object-fit: cover;
  object-fit: cover;
  border-radius: 1rem;
  box-shadow: 0px 3px 16px #0000001A;
}

@media all and (min-width: 650px) {
  .accordion-img {
    display: none;
  }
}

div.mb-target {
  position: fixed;
  width: 100%;
  top: 64px;
  z-index: 9;
  box-shadow: 0px 5px 9px #0000001a;
}

@media all and (min-width: 980px) {
  div.mb-target {
    display: none;
  }
}

.accordions-nav {
  overflow: hidden;
  width: 100%;
  background-color: #FFFEFB;
}

@media all and (min-width: 980px) {
  .accordions-nav {
    width: 60%;
  }
}

.accordions-nav div.accordion {
  width: 100%;
  overflow: hidden;
  margin: 0;
  border-bottom: 1px solid #b2b4b8;
  transition: all 0.35s;
  color: #403E3C;
  font-size: 1rem;
  line-height: 1.4;
  font-weight: 500;
  font-family: "IBM Plex Serif", serif;
}

.accordions-nav div.accordion input {
  position: absolute;
  opacity: 0;
  z-index: -1;
}

.accordions-nav div.accordion a {
  padding: 1rem;
  text-decoration: none;
  font-size: 1rem;
  line-height: 1.4;
  font-weight: 500;
  font-family: "IBM Plex Serif", serif;
  color: #403E3C;
  width: 100%;
  display: block;
}

.accordions-nav input:checked+.accordion-label::after {
  transform: rotate(180deg);
}

.accordions-nav input:checked~.accordion-content {
  max-height: 150vh;
  padding: 0 0 1rem;
}

.accordions-nav input:checked~.accordion-content p,
.accordions-nav input:checked~.accordion-content ul {
  opacity: 100%;
}

.accordions-nav .accordion-label {
  display: flex;
  justify-content: space-between;
  padding: 1em 3em 1em 1em;
  cursor: pointer;
  text-align: left;
  position: relative;
}

.accordions-nav .accordion-label::after {
  content: '';
  top: 14px;
  position: absolute;
  right: 16px;
  width: 24px;
  height: 24px;
  background-image: url("../../img/mb-nav-dropdown-arrow.svg");
  text-align: center;
}

.accordions-nav .accordion-content {
  max-height: 0;
  padding: 0;
  margin: 0 !important;
  text-align: left;
}

.accordions-nav .accordion-content p,
.accordions-nav .accordion-content ul,
.accordions-nav .accordion-content li {
  font-size: 1rem;
}

.accordions-nav .accordion-content li {
  font-size: 1rem;
}

.accordions-nav .accordion-close {
  display: flex;
  justify-content: flex-end;
  padding: 1em;
  font-size: 0.75em;
  background: #2c3e50;
  cursor: pointer;
}

.accordions-nav .accordion-close:hover {
  background: #1a252f;
}

header {
  background-color: #31524F;
  width: 100%;
  position: fixed;
  z-index: 9;
  top: 0;
  box-shadow: 0px 3px 6px #00000029;
}

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

header .logo img {
  max-height: 2.3rem;
  max-width: none;
}

@media all and (min-width: 600px) {
  header .logo img {
    max-height: 2.5rem;
  }
}

header .menu-dropdown {
  position: relative;
  width: 140px;
}

header .menu-dropdown:after {
  border-style: solid;
  border-width: 0.15em 0.15em 0 0;
  display: inline-block;
  height: 0.45em;
  right: 15px;
  top: 15px;
  transform: rotate(135deg);
  vertical-align: top;
  width: 0.45em;
}

header .menu-dropdown--active:after {
  transform: rotate(-45deg);
  top: 19px;
}

header .menu-dropdown-mobile {
  position: relative;
}

header .menu-dropdown-mobile:after {
  border-style: solid;
  border-width: 0.15em 0.15em 0 0;
  display: inline-block;
  height: 0.45em;
  right: 15px;
  top: 15px;
  transform: rotate(135deg);
  vertical-align: top;
  width: 0.45em;
}

header .menu-dropdown-mobile--active:after {
  transform: rotate(-45deg);
  top: 19px;
}

header .sub-menu-mobile {
  display: none;
}

header .sub-menu-mobile li {
  padding: 0 !important;
  border: unset !important;
  margin-bottom: 0 !important;
}

header .sub-menu-mobile li:last-child a {
  padding-bottom: 0;
}

header .sub-menu-mobile li a {
  font-family: "Heebo", sans-serif;
  font-size: 16px !important;
  line-height: 26px;
  padding-left: 1em;
}

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

header .nav--desktop {
  display: none;
}

@media all and (min-width: 980px) {
  header .nav--desktop {
    display: flex;
    width: 100%;
    margin: 0 auto;
  }
}

header .nav--desktop ul {
  justify-content: space-between;
  padding: 0.75rem 1rem 0.75rem 0;
}

header .nav--desktop ul.sub-menu {
  display: none;
  position: absolute;
  bottom: -74px;
  background: #FFFEFB;
  z-index: 1;
  border-radius: 10px;
  padding: 8px 0;
  box-shadow: 0px 12px 14px #00000029;
  border: 1px solid #E3E2DA;
}

header .nav--desktop ul.sub-menu li {
  padding-left: 10px;
  margin-right: 10px !important;
}

header .nav--desktop ul.sub-menu li:first-child {
  margin-right: 10px !important;
}

header .nav--desktop ul.sub-menu li a {
  color: #403E3C;
  width: 160px;
  margin-right: 0;
  height: 28px;
  padding: 0;
  display: flex;
  align-items: center;
  padding-left: 5px;
}

header .nav--desktop ul.sub-menu li a:hover {
  background-color: #E3E2DA;
  border-radius: 5px;
}

header .nav--desktop ul li {
  justify-content: space-between;
}

header .nav--desktop ul.menu li:nth-child(-n+3) {
  border-bottom: none;
}

header .nav--desktop ul.menu li:first-child {
  border-top: none;
}

@media all and (min-width: 980px) {
  header .nav--desktop ul.menu li:first-child {
    margin-right: 1.6rem;
  }
}

header .nav--desktop ul.menu li:not(:first-child) {
  display: none;
}

@media all and (min-width: 980px) {
  header .nav--desktop ul.menu li:not(:first-child) {
    display: flex;
    margin-right: 0;
  }
}

header .nav--desktop ul:nth-child(2) li:not(:last-child) {
  display: none;
}

@media all and (min-width: 650px) {
  header .nav--desktop ul:nth-child(2) li:not(:last-child) {
    display: flex;
  }
}

header .nav--desktop .btn {
  padding: 12px 0;
  font-size: 14px;
}

header .nav--mobile {
  display: flex;
  flex-direction: column;
}

@media all and (min-width: 650px) {
  header .nav--mobile {
    margin: 0 auto;
  }
}

@media all and (min-width: 980px) {
  header .nav--mobile {
    display: none;
  }
}

header .nav--mobile .top-menu {
  width: 100%;
  padding: 1em 0;
}

header .nav--mobile .top-menu .wrapper {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
}

header .nav--mobile .top-menu .wrapper .hamburger {
  display: flex;
}

header .nav--mobile .top-menu .wrapper .hamburger p {
  font-size: 14px;
  line-height: 18px;
  text-align: left;
  margin-right: 10px;
  margin-top: -2px;
}

header .nav--mobile .top-menu .wrapper .hamburger__container {
  position: relative;
  width: 22px;
  height: 14px;
  cursor: pointer;
}

header .nav--mobile .top-menu .wrapper .hamburger__container:hover span {
  background: white;
}

header .nav--mobile .top-menu .wrapper .hamburger__container span {
  color: white;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 2px;
  transition: all 0.2s, background 0s;
  background: white;
}

header .nav--mobile .top-menu .wrapper .hamburger__container span:nth-child(2) {
  top: 6px;
}

header .nav--mobile .top-menu .wrapper .hamburger__container span:last-child {
  top: 12px;
}

header .nav--mobile .top-menu .wrapper .hamburger__container--open span:first-child,
header .nav--mobile .top-menu .wrapper .hamburger__container--open span:last-child {
  top: 8px;
}

header .nav--mobile .top-menu .wrapper .hamburger__container--open span:first-child {
  transform: rotate(45deg);
}

header .nav--mobile .top-menu .wrapper .hamburger__container--open span:last-child {
  transform: rotate(-45deg);
}

header .nav--mobile .top-menu .wrapper .hamburger__container--open span:nth-child(2) {
  opacity: 0;
  visibility: hidden;
}

header .nav--mobile .top-menu li:not(li.logo) {
  display: none;
}

header .nav--mobile .menu {
  display: none;
  flex-direction: column;
  width: 100%;
  font-size: 20px;
}

@media all and (min-width: 980px) {
  header .nav--mobile .menu {
    display: flex;
    flex-direction: row;
    padding-top: 0;
  }
}

header .nav--mobile .menu li {
  padding: 1.3em 0;
}

header .nav--mobile .menu li:nth-child(-n+3) {
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

header .nav--mobile .menu li:first-child {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

header .nav--mobile .menu li:nth-child(4) {
  margin-top: 2em;
}

header .nav--mobile .menu li:last-child {
  margin-bottom: 3em;
}

header .nav--mobile .menu li .btn {
  display: block;
  min-width: 257px;
  text-align: center;
  margin: 0 auto;
}

header .nav--mobile .menu--active {
  display: flex;
}

header .nav--mobile .menu--active .wrapper {
  height: 100vh;
  padding-top: 2em;
}

footer {
  background-color: transparent;
  width: 100%;
  padding: 1.5rem;
  color: #403E3C;
  display: flex;
  margin: 0 auto;
  flex-direction: column;
  text-align: center;
}

@media all and (min-width: 650px) {
  footer {
    text-align: left;
  }
}

footer .upper {
  display: grid;
  grid-template-columns: 1fr;
  margin: 1rem auto;
  width: 100%;
  grid-gap: 2rem;
}

@media all and (min-width: 980px) {
  footer .upper {
    grid-template-columns: 20% 65% 15%;
    grid-gap: 0;
    margin: 1rem auto 3rem;
  }
}

footer .upper div.more {
  margin: 1rem 0;
  align-self: baseline;
  order: 2;
}

footer .upper div.more h4 {
  padding-bottom: 1em;
}

@media all and (min-width: 980px) {
  footer .upper div.more h4 {
    padding-bottom: 0;
  }
}

@media all and (min-width: 980px) {
  footer .upper div.more {
    order: 2;
  }
}

footer .upper div.more ul {
  display: grid;
  grid-template-columns: 1fr;
}

@media all and (min-width: 980px) {
  footer .upper div.more ul {
    grid-template-columns: 25% 25% 50%;
  }
}

footer .upper div.more li {
  padding: 0 0 2rem;
}

@media all and (min-width: 980px) {
  footer .upper div.more li {
    padding: 0.5rem 0;
  }
}

footer .upper div.more li a {
  color: #403E3C;
  text-decoration: none;
}

footer .upper div.more li a:hover {
  text-decoration: underline;
}

footer .upper div.social {
  align-self: baseline;
  order: 1;
}

@media all and (min-width: 980px) {
  footer .upper div.social {
    order: 2;
  }
}

footer .upper div.social ul {
  flex-direction: row;
  display: flex;
  justify-content: center;
}

footer .upper div.social ul li {
  background-color: #E0D177;
  border-radius: 50%;
  width: 54px;
  height: 54px;
  justify-self: center;
  align-content: center;
}

footer .upper div.social ul li:hover {
  background-color: #A89E5F;
}

@media all and (min-width: 980px) {
  footer .upper div.social ul li {
    width: 40px;
    height: 40px;
  }
}

footer .upper div.social ul li a.social {
  line-height: 0;
  height: 100%;
  justify-self: center;
  align-content: center;
}

footer .upper div.social ul li:nth-child(2) {
  margin: 0 1rem;
}

footer .upper div.social ul li img {
  width: 100%;
  height: 24px;
}

@media all and (min-width: 980px) {
  footer .upper div.social ul li img {
    height: 16px;
  }
}

footer .inner {
  flex-direction: column;
  justify-content: space-between;
  text-align: center;
  margin: 0 auto;
  width: 100%;
}

@media all and (min-width: 650px) {
  footer .inner {
    flex-direction: row;
    text-align: left;
  }
}

footer .inner div {
  align-items: center;
}

footer .inner div span {
  margin: 0 1rem 0 0;
  font-weight: 500;
  opacity: 60%;
}

footer .inner p {
  padding: 0 0 2rem 0;
  font-size: 0.875rem;
}

@media all and (min-width: 650px) {
  footer .inner p {
    padding: 0;
  }
}

footer img {
  max-height: 18px;
}

section.scrollslider {
  display: grid;
}

@media screen and (min-width: 650px) {
  section.scrollslider {
    display: grid;
  }
}

section.scrollslider div.slide {
  display: grid;
}

@media screen and (min-width: 650px) {
  section.scrollslider div.slide {
    padding: 5rem 0;
    height: auto;
    justify-content: center;
    align-items: flex-start;
  }
}

section.scrollslider div.slide div {
  position: relative;
}

@media screen and (min-width: 650px) {
  section.scrollslider div.slide .reverse {
    order: 1 !important;
  }
}

section.scrollslider div.slide .fixed-image {
  order: 1;
}

section.scrollslider div.slide:first-child {
  padding: 0;
  justify-content: center;
  align-items: flex-start;
}

@media screen and (min-width: 650px) {
  section.scrollslider div.slide:first-child {
    padding: 0 0 5rem;
  }
}

section.scrollslider div.slide div.left {
  text-align: left;
  order: 2;
}

@media screen and (min-width: 650px) {
  section.scrollslider div.slide div.left {
    order: none;
  }
}

section.scrollslider div.slide div.left h2 {
  text-align: left;
  margin: 0rem 0 1.5rem;
}

.box-border {
  padding: 1.5rem;
  text-align: left;
  margin: 2rem auto;
  border: 1px solid #403E3C;
  border-radius: 1rem;
}

.box-border h3 {
  margin: 0 0 1rem;
}

.box-border p {
  margin: 1rem 0;
  font-size: 1rem;
}

.compact h2,
.compact p {
  margin: 0 0 1rem;
}

@media screen and (min-width: 980px) {
  main section div .sticky {
    position: sticky !important;
    top: 9rem;
  }
}

.divider {
  border-bottom: 1px solid #b2b4b8;
}

.card {
  border-radius: 20px;
  background-color: #FFFEFB;
  padding: 2rem 0;
  box-shadow: 0 5px 20px #0000001A;
  border: 2px solid #E3E2DA;
}

ul.cards {
  grid-gap: 2rem;
  top: -35px;
  position: relative;
  grid-template-columns: repeat(4, 1fr);
}

@media screen and (min-width: 980px) {
  ul.cards {
    grid-template-columns: repeat(3, 1fr);
  }
}

ul.cards li {
  background: white;
  box-shadow: 0 2px 24px 0 rgba(0, 0, 0, 0.2);
  width: 90%;
  margin: 0 auto;
  grid-column: span 4;
}

@media screen and (min-width: 650px) {
  ul.cards li {
    width: 100%;
    grid-auto-rows: 130px;
    grid-gap: 16px;
    display: grid;
    grid-column: span 2;
  }

  ul.cards li:nth-last-child(1):nth-child(odd) {
    grid-column: 2 / span 2;
  }
}

@media screen and (min-width: 980px) {
  ul.cards li {
    grid-column: span 1;
  }

  ul.cards li:nth-last-child(1):nth-child(odd) {
    grid-column: 3;
  }
}

ul.cards li h2 {
  margin: 1rem 0;
  flex-grow: 0;
}

ul.cards li .div {
  align-self: flex-start;
  justify-self: flex-start;
}

ul.cards li a {
  margin-bottom: 1.5rem;
  align-self: flex-end;
  justify-self: flex-end;
}

@media screen and (min-width: 650px) {
  ul.cards li a {
    margin-bottom: 0;
  }
}

@media screen and (min-width: 650px) {
  ul.cards li {
    width: 100%;
  }
}

@media screen and (min-width: 650px) {
  ul.cards {
    position: relative;
    top: -50px;
    width: 100%;
  }
}

ul.cards p {
  font-size: 0.875rem;
  text-align: left;
  padding: 0 0rem 0 2rem;
}

ul.cards p:before {
  background-image: url("../../img/check-solid.svg");
  left: 0;
  content: '';
  position: absolute;
  left: 16px;
  background-size: cover;
  height: 20px;
  width: 20px;
}

@media all and (min-width: 650px) {
  ul.cards p:before {
    left: 15px;
  }
}