/*
==============================
General Styles
==============================
*/

html { scroll-behavior: auto !important; }

body {
  color: var(--black);
  background-color: var(--dark);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
    &.modal-open {
        bottom: 0;
        left: 0;
        position: fixed;
        right: 0;
        top: 0;
    }
}
body a,
body a:focus,
body a:active {
  text-decoration: none;
  color: inherit;
}
body a:hover {
  text-decoration: none;
  color: var(--siena);
  transition: color 300ms ease;
}
div,
input,
textarea,
button:active,
button:focus,
.btn,
button,
a[type="button"] {
    outline: 0;
}
.btn.focus,
.btn:focus {
    box-shadow: 0 0 0 0;
}
b, strong {
  font-weight: 700;
}
ul li,
ul {
    margin: 0;
    padding: 0;
}
.wrapper,
.m-layaout {
    padding-left: 20px;
    padding-right: 20px;
}
.wrapper-left {
    padding-left:0px;
}
.wrapper-mobile-left {
    padding-left:20px;
}
.wrapper-mobile-right {
    padding-right:20px;
}
.wrapper-right {
    padding-right:20px;
    padding-left:0px;
}
.wrapper-full-left {
  padding-left:33px;
}
.wrapper-full-right {
  padding-left:30px;
}
.wrapper-full-right.wrapper-mobile-right {
  padding-right:33px;
}
.relative {
    position: relative;
}
.grecaptcha-badge {
  right: -300px !important;
}
.z-index-11 {
    z-index: 11;
}
.z-index-21 {
    z-index: 21;
}
.bg-overlay {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    opacity: 0.3;
    z-index: 10;
}
.btn {
  background-image: none;
  text-align: center;
  width: auto;
  border-radius: 0;
  border-style: solid;
  font-size: 1em;
  font-family: 'Plus Jakarta Sans', sans-serif;
}
.bg-image-regular {
  background-size:cover;
  background-repeat:no-repeat;
  background-position:center center;
}
.mb-45 {
  margin-bottom:2rem;
}
.mt-45 {
  margin-top:2rem;
}

/*
==============================
General Styles - Media Queries
==============================
*/

@media (min-width: 992px) {
  .wrapper,
  .m-layaout {
      padding-left: 7%;
      padding-right: 7%;
  }
  .pl-regular {
      padding-left:7%;
  }
  .pr-regular {
      padding-right:7%;
      padding-left:25px;
  }
  .pl-25 {
    padding-left:25px;
  }
  .wrapper-full-right {
      padding-left:0;
      padding-right:7%;
  }
  .wrapper-full-left {
    padding-left:8%;
  }
  .wrapper-left {
    padding-left:14%;
  }
  .wrapper-mobile-left {
      padding-left:0;
  }
  .wrapper-mobile-right {
      padding-right:0;
  }
}
@media (min-width: 1200px) {
  .wrapper,
  .m-layaout {
    padding-left: 7%;
    padding-right: 7%;
  }
  .wrapper-left {
      padding-left:7%;
  }
  .wrapper-right {
      padding-right:7%;
  }
}
@media (min-width: 1400px) {
  .wrapper,
  .m-layaout {
    padding-left: 9%;
    padding-right: 9%;
  }
  .wrapper-left {
    padding-left:19%;
  }
  .wrapper-right {
    padding-right:9%;
  }
  .wrapper-full-left {
    padding-left:10%;
  }
  .wrapper-full-right {
    padding-right:19%;
    padding-left:0;
  }
}
@media (min-width: 1600px) {
  .wrapper,
  .m-layaout {
    padding-left: 17%;
    padding-right: 17%;
  }
  .wrapper-left {
      padding-left:19%;
  }
  .wrapper-right {
      padding-right:17%;
  }
  .wrapper-full-left {
    padding-left:17.75%;
  }
}
@media (min-width:1750px) {
  .wrapper-left {
    padding-left:34%;
  }
}

/*
==============================
General Styles - Custom margins
==============================
*/

.mb-5em {
  margin-bottom:5em;
}
.mb-10em {
  margin-bottom:10em;
}

/*
==============================
General Styles - Custom paddings
==============================
*/

.pl-regular {
  padding-left:20px;
}
.pr-regular {
  padding-right:20px;
}
.pl-25 {
  padding-left:25px;
}
.pl-30 {
  padding-left:30px;
}
.pr-25 {
  padding-right:25px;
}
.pr-30 {
  padding-right:30px;
}
.pr-2em {
  padding-right:2em;
}
.pr-3em {
  padding-right:3em;
}
.pr-5em {
  padding-right:5em;
}
.pr-6em {
  padding-right:6em;
}
.pl-10em {
  padding-left:10em;
}
.pl-3em {
  padding-left:3em;
}
.pl-5em {
  padding-left:5em;
}
.pl-6em {
  padding-left:6em;
}

/*
==============================
Custom paddings - Media Queries
==============================
*/

@media (max-width:768px) {
  .pr-no-mobile {
    padding-right:0;
  }
}

@media (min-width: 992px) {
  .pl-regular {
      padding-left:7%;
  }
  .pr-regular {
      padding-right:7%;
  }
  .pr-lg-5em {
    padding-right:5em;
  }
}
@media (min-width: 1200px) {
  .pl-regular {
      padding-left:7%;
  }
  .pr-regular {
      padding-right:7%;
  }
}
@media (min-width: 1400px) {
  .pl-regular {
      padding-left:20%;
  }
  .pr-regular {
      padding-right:20%;
  }
}
@media (min-width: 1600px) {
  .pl-regular {
      padding-left:20%;
  }
  .pr-regular {
      padding-right:20%;
  }
}
@media (min-width:1750px) {
  .pl-regular {
      padding-left:35%;
  }
  .pr-regular {
      padding-right:35%;
  }
}


/***
============================================
General Styles
Section: WPS Button System
============================================
***/

.button {
  background-image: none;
  text-align: center;
  width: auto;
  border-radius: 8px;
  border: 1.5px solid transparent;
  font-size: 0.95rem;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 600;
  padding: 0.7rem 1.4rem;
  display: inline-block;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 300ms ease, color 300ms ease, border-color 300ms ease;
}
.button-primary {
  background-color: var(--siena);
  color: var(--white) !important;
  border-color: var(--siena);
}
.button-primary:hover {
  background-color: var(--siena-light);
  border-color: var(--siena-light);
  color: var(--white) !important;
}
.button-ghost {
  background-color: transparent;
  color: var(--cream) !important;
  border-color: var(--siena);
}
.button-ghost:hover {
  background-color: var(--siena);
  color: var(--white) !important;
}
.small-button {
  background-image: none;
  text-align: center;
  width: 100%;
  border-radius: 8px;
  border: 0;
  font-size: 0.9rem;
  font-weight: 500;
  padding: 0.3rem 0.3rem 0.7rem 0.3rem;
  height: 30px;
  display: block;
}
@media (min-width: 1200px) {
  .button.bg-dark {
    width: 50%;
  }
}
.button:focus,
.button:active {
  color: var(--cream);
}

.page-title h1 {
  display: inline-block;
}
.title-above {
  width: 90%;
  border-top: 4px solid;
  border-color: var(--siena);
}