html {
    font-size: 16px;
    scroll-behavior: smooth;
    --off-white:#fcfcfee8;
}

body {
    font-size: 1rem;
    background-color: var(--primary-color-2-opacity);
    font-family: var(--p-font-family);
}

wrapper, .wrapper {
   width: 100%;
   max-width: unset;
   margin:0;
   padding:0;
   position: relative;
   display: block;
   background: var(--off-white);
}

wrapper.tp-bg {
    background-color: transparent;
}

container, .container, hero, .hero {
   max-width: 76rem;
   width: 100%;
   margin: 0 auto;
   display: block;
   padding: var(--rem-6) var(--rem-1);
}

hero, .hero {
    color: var(--hero-text-color);
}

.text {
    max-width: 50rem;
    width: 100%;
    margin: 0 auto;
}

flexbox.justify-between flexbox.text {
    max-width: 36rem;
}

hero media, flexbox.justify-between media, 
flexbox.justify-between media video, 
card media, card video, .card media, .card media video {
    width: 100%;
    max-width: 40rem;
    margin: 0 auto;
}

.card > flexbox.column media {
    max-width: 100%;
}

flexbox.justify-between flexbox.text {
    max-width: 36rem;
}

flexbox.justify-center media {
    margin: 0 auto;
    width: 100%;
    margin: 0 auto;
    text-align: center;
}

hero flexbox.align-center media, 
hero flexbox.align-center video,
flexbox.justify-center video {
    max-width: 60rem;
    width: 100%;
}


flexbox.justify-center media.stacked {
    width: 100%;
}

.card video, card video, hero flexbox:not(.justify-center) video, flexbox.justify-between video, flexbox.justify-between media.stacked {
    max-width:40rem;
  }

video {
    height:auto;
    border-radius: var(--card-img-radius);
}

flexbox, .flexbox {
    display:flex;
    flex: 0 1 100%;
}

media.ultrawide {
    object-fit: fill;
}

media img {
    border-radius: var(--card-img-radius);
}

media.background {
    width: 100%;
    display: flex;
    height: auto;
    position: absolute;
    top:0;
    left:0;
    right:0;
    z-index: -1;
    overflow: auto;
    height: 100%;
    object-fit: cover;
}

media.background::after {
    content: "";
    display: block;
    height: 100%;
    width: 100%;
    background-color: var(--white);
    position: absolute;
    top:100%;
    z-index: 1;
}

media.background picture, media.background video {
    display: flex;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

media.background img {
    object-fit: cover;
    width: 100%;
    border-radius: 0;
}

.column {
    flex-direction: column;
}

.row {
    flex-direction: row;
}

.flex-wrap {
    flex-wrap: wrap;
}

.flex-nowrap {
    flex-wrap: nowrap;
}

.order-last {
    order: +1;
}

.order-first {
    order: -1;
}

.flip-order .order-first {
    order: +1;
}

.flip-order .order-last {
    order: -1;
}

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

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

.text-right {
    text-align: right;
}

strong, .font-bold {
    font-weight: var(--font-bold-weight);
}

.stacked {
    display: grid;
 }
 
 .stacked > * {
    grid-column: 1 / -1;
    grid-row: 1 / -1;
 }
 .stacked > media { 
    z-index: -1;
 }

 .stacked img {
    width: 100%;
    height: auto;
 }

 media.ultrawide img{
     width: 100%;
     transform: scale(1);
     position: relative;
 }


 grid {
    display: grid;
    width: 100%;
 }
 
 grid.grid-4 {
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
 }
 
 grid.grid-3 {
    grid-template-columns: repeat(auto-fit, minmax(20.5rem, 1fr));
 }
 
 grid.grid-2 {
    grid-template-columns: repeat(auto-fit, minmax(25rem, 1fr));
 }

 .col-xs {
    max-width: 19rem;
 }

 .col-s {
    max-width: 25.08rem;
 }

 .col-m {
    max-width: 34.2rem;
 }

 .col-half {
    max-width: 38rem;
 }

 .col-l {
    max-width: 50.16rem;
 }

 .col-xl {
    max-width: 57rem;
 }

 .col-xxl {
    max-width: 64.6rem;
 }

 .maxw-100 {
    max-width: 100%;
 }

 .w-100 {
    width: 100%;
 }

 .maxh-100 {
    max-height: 100%;
 }

 .h-100 {
    height: 100%;
 }

 .text-nowrap {
    white-space: nowrap;
 }

 .position-relative {
    position: relative;
 }

 .position-absolute {
    position:absolute;
 }

 .position-fixed {
    position:fixed;
 }

 .position-sticky {
    position: -webkit-sticky;
    position: sticky;
    top:0;
 }

 .error, .success {
    font-size: 1.2rem;
    font-family: var(--p-font-family);
    padding: var(--rem-1);
    border-radius: var(--border-radius);
    display: block;
    width: 100%;
    margin:0;
    position: relative;
    color: var(--accent-color);
 }

 .error::before, .success::before {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    border-radius: var(--border-radius);
    opacity: 0.15;
    background-color: var(--accent-color);
 }

 .error {
    --accent-color: var(--error-red);
 }

 .success {
    accent-color: var(--success-green);
 }

 .review .profile-pic{
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 50%;
    object-fit: cover;
 }
 .review .r-stars {
    height: .6rem;
    width: calc(.6rem * 5);
    margin-left: 0;
 }

 .review .time {
    text-wrap: nowrap;
 }

 .review p {
    margin-bottom: 0;
 }
/*RESPONSIVE STYLES FROM 991px */

@media (max-width: 991px) {
    .row, flexbox, .flexbox {
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

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

    container.mobile-fullscreen {
        margin: 0 0 0 -1rem;
        width: calc(100% + 1rem);
        padding:0;
    }

    media.ultrawide {
        overflow: hidden;
        width: 100%;
        display: block;
        height: 8rem;
    }

    media.ultrawide img{
        width: 100%;
        transform: scale(1.5);
        position: relative;
        top: 20%;
    }

    media img {
        width: 100%;
        height: auto;
    }

    .mobile-order-first {
        order: -1 !important;
    }

    .mobile-order-last {
        order: +1 !important;
    }

    .text-center.mobile-text-center, .text-left.mobile-text-center, .text-right.mobile-text-center {
        text-align: center;
    }

    .text-center.mobile-left, .text-left.mobile-left, .text-right.mobile-left{
        text-align: left;
    }

    .text-center.mobile-right, .text-left.mobile-right, .text-right.mobile-right {
        text-align: right;
    }

    .mobile-align-center, .align-start.mobile-align-center, .align-end.mobile-align-center {
        align-items: center;
    }

    .mobile-justify-center, .justify-start.mobile-justify-center, .justify-end.mobile-justify-center, .justify-between.mobile-justify-center {
        justify-content: center;
    }
    .mobile-hide {
        display: none;
      }
}

@media (min-width: 991px) {
    .desktop-hide {
      display: none;
    }
  }