@import url("../../../../../cdn.jsdelivr.net/npm/bootstrap-icons@1.9.1/font/bootstrap-icons.css");

/* HOME PAGE */ 
.home .site-inner,
.home .site-inner .content,
.front-page-demo .site-inner,
.front-page-demo .content {
    max-width:100%;
    width:100%;
    padding:0;
}

.home .site-header {
    background:#FBFCFE;
}

.scroll-hint{
    position:absolute;
    bottom:0;
    left:calc(50% - 1px);
    height:70px;
    white-space:nowrap;
    text-decoration:none;
    text-transform:uppercase;
    line-height:70px;
    color:#0071F2;
    letter-spacing:3px;
    z-index:5;
    transform:translateY(50%);
    transition:all .4s
}
@media (max-width:767px){
    .scroll-hint{
        display:none
    }
}
.scroll-hint.hidden{
    opacity:0;
    transform:translateY(0);
    pointer-events:none
}
.scroll-hint:before{
    content:"";
    position:absolute;
    left:-1px;
    top:0;
    display:block;
    width:2px;
    height:100%;
    background-color:#EBC307;
    transform:scale(1,0) translate3d(0,0,0);
    animation:scroller 3s infinite
}
.scroll-hint__label{
    font-size:12px;
    padding-left:20px
}
.scroll-hint{
    transform:translateY(0)
}
.homeSection{
    padding:95px 0;
    position:relative;
    /* background: linear-gradient(25deg, #ffffff08 40%, transparent 41%, transparent 59%, #ffffff08 60%) ,linear-gradient(90deg, transparent 45%, #00347103 45%, #00347103 55%, transparent 55%, transparent 20%, #00347103 20%, #00347103 30%,transparent 30%);
        background-size: 1em 1em;
        background-color: #ffffff08;
        opacity: 0.1 */
    background:url(../images/mirrored-squares.png);
}

.homeSection.homeSection--reit {
    background:url(../images/image5.jpg)
}

.homeSection.homeSection--fp {
    background:url(../images/whlr-home-a.jpg)
}

.homeSection.homeSection--accordion {
    background:url(../images/whlr-home-a.jpg);
}

.homeSection.homeSection--ii {
    background:url(../images/whlr-home-a.jpg)
}

.homeSection.metrics {
    background:url(../images/image4.jpg);
    padding:45px 0;
}

.homeSection.partners {
    background:url(../images/whlr-home-a.jpg)
}

.homeSection .colorBg {
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background: rgba(255,255,255,0.965);
}

@media (max-width:767px){
    .homeSection{
        padding:40px 20px;
        background: rgba(255,255,255,0.975);
    }
}

.homeSection.homeSection--first {
    padding-top:0;
    padding-bottom:85px;
}

@media (max-width:1440px){

    .homeSection.homeSection--first {
        padding-top:45px;
    }
}

@media (max-width:767px){

    .homeSection.homeSection--first {
        padding-bottom:0;
    }
}

.homeSection__icContent {
    max-width: 625px;
    width: 100%;
}

@media (max-width:1224px){
    .homeSection__icContent {
        max-width: 100%;
        width: 100%;
        padding:0 5px;
    }
}

.homeSection__isContentTitle {
    color:#003471;
    font-family:'Oswald',sans-serif;
    text-transform:uppercase;
    font-weight:700;
    font-size:60px;
    margin-bottom:12px;
    opacity:0;
    transform:translateY(15px);
    transition:all .4s ease-in-out .4s;
    width:100%;
    margin-bottom:15px;
    max-width:14ch;
}

@media (max-width:1360px){
    .homeSection__isContentTitle{
        font-size:50px;
        margin-bottom:35px
    }
}

@media (max-width:1024px){
    .homeSection__isContentTitle{
        margin-left:0;
        font-size:35px;
        line-height:30px
    }
}

@media (max-width:990px){
    .homeSection__isContentTitle{
        max-width:100%;
        margin-bottom:25px;
        line-height:125%;
    }
}

.is-inview .homeSection__isContentTitle{
    opacity:1;
    transform:translateY(0)
}

.homeSection__isContentText{
    font-size: 18px;
    line-height: 27px;
    opacity:0;
    transform:translateY(15px);
    transition:all .4s ease-in-out .6s;
    max-width:450px;
    margin-bottom:20px;
    font-family:'Roboto', sans-serif;
}

@media (max-width:1360px){
    .homeSection__isContentText{
        font-size:16px;
    }
}

.is-inview .homeSection__isContentText{
    opacity:1;
    transform:translateY(0)
}

.homeSection__isContentBtn{
    opacity:0;
    transform:translateY(15px);
    transition:all .4s ease-in-out .8s;
}

.is-inview .homeSection__isContentBtn{
    opacity:1;
    transform:translateY(0)
}

.homeSection__isContentSubTitle {
    font-size: 22px;
    color: #0071F2;
    letter-spacing: 8px;
    text-transform: uppercase;
    margin-bottom: 10px;
    line-height: 100%;
    opacity: 0;
    transform: translateY(15px);
    transition: all .4s ease-in-out .2s;
    display: grid;
    grid-template-columns: 1fr auto;
    text-align:right;
}

@media (max-width:1360px){
    .homeSection__isContentSubTitle{
        font-size:20px;
    }
}

@media (max-width:1024px){
    .homeSection__isContentSubTitle{
        font-size:18px;
        margin-bottom:20px;
        letter-spacing:4px;
    }
}

.homeSection__isContentSubTitle::before {
    content: "";
    display: block;
    width: 90%;
    height: 100%;
    background:linear-gradient(to bottom, transparent 0%, transparent 48%,#EBC307 48%, #EBC307 53%, transparent 52%, transparent 100%);
}

.is-inview .homeSection__isContentSubTitle {
    opacity:1;
    transform:translateY(0)
}

.homeSection__ic {
    position:relative;
    overflow:hidden
}

.is-inview .image {
    transform:scale(1)
}

.homeSection__icImg {
    width:40%;
    height:65vh;
    min-height:400px;
    position:relative;
    overflow:hidden;
    opacity:.9
}
@media (max-width:992px){
    .homeSection__icImg{
        height:45vh;
        width:50%
    }
}
@media (max-width:767px){
    .homeSection__icImg{
        width:calc(100% - 30px);
        margin:0 15px;
        min-height:300px
    }
}


/***** SLIDER ******/

.splide .homeSection__isContentSubTitle{
    transform:translate(-20px);
    transition:all .4s ease-in .2s;
    opacity:0;
}
.splide .homeSection__isContentTitle {
    position:relative;
    transform:translate(-20px);
    transition:all .4s ease-in .4s;
    opacity:0;
}
@media (max-width:1200px){
    .splide .homeSection__isContentTitle{
    }
}
@media (max-width:992px){
    .splide .homeSection__isContentTitle{
    }
}
@media (max-width:767px){
    .splide .homeSection__isContentTitle{
    }
}
.splide .homeSection__isContentText{
    position:relative;
    opacity:0;
    transition:all .4s ease-in 0.6s;
    transform:translate(-20px);
}
@media (max-width:1200px){
    .splide .homeSection__isContentText{
        margin:40px 0;
    }
}
@media (max-width:992px){
    .splide .homeSection__isContentText{
        margin:30px 0;
    }
}
@media (max-width:767px){
    .splide .homeSection__isContentText{
        width:100%;
        display:none;
    }
}

.splide .homeSection__isContentDetails {
    margin-bottom:20px;
    gap:30px;
    transform:translate(-20px);
    transition:all .4s ease-in .8s;
    opacity:0;
}

.splide .homeSection__isContentDetail {
    border-left:2px solid #EBC307;
    padding-left:10px;
}

.splide .homeSection__isContentDetailMain {
    color:#003471;
    font-family:'Oswald',sans-serif;
    text-transform:uppercase;
    font-weight:700;
    font-size:26px;
    margin-bottom:5px;
    line-height: 100%;
}

.splide .homeSection__isContentDetailSub {
    font-size: 16px;
    color: #0071F2;
    letter-spacing: 4px;
    text-transform: uppercase;
    line-height: 100%;
    margin:0;
}

.splide .homeSection__isContentBtn {
    position:relative;
    opacity:0;
    transform:translate(-20px);
    transition:all .4s ease-in 1s;
}

@media (max-width:765px) {

    .splide .homeSection__isContentBtn {
    display: flex;
    flex-direction: column;
    gap:20px;
    }
}

.splide .btn--whlrAlt {
    margin-left: 20px;
    color: #003471;
}

@media (max-width:765px) {

    .splide .btn--whlrAlt {
        margin-left: 0;
    }
}

.splide .btn--whlrAlt::after {
    background-color: #E5EAF0;
}


.splide .is-active .homeSection__isContentTitle,
.splide .is-active .homeSection__isContentSubTitle,
.splide .is-active .homeSection__isContentText,
.splide .is-active .homeSection__isContentDetails, 
.splide .is-active .homeSection__isContentBtn {
    opacity: 1;
    transform: translate(0);
  }

.splide .splide__slide--imgContainer {
    position:relative;
}

.splide .splide__arrow ,
.splide .splide__arrow:disabled {
    background:none;
}

.splide .splide__arrow--prev {
    left: 60%;
    top: 95%;
}

@media (max-width:1120px){

    .splide .splide__arrow--prev {
        left: 52%;
        top: 98%;
    }
}

@media (max-width:900px){

    .splide .splide__arrow--prev {
        left: 40%;
    }
}

.splide .splide__arrow--next {
    right: 36%;
    top: 95%;
}

@media (max-width:1120px){

    .splide .splide__arrow--next {
        right: 43%;
        top: 98%;
    }
}

@media (max-width:900px){

    .splide .splide__arrow--next {
        right: 40%;
    }
}

.homeSection .is-inview .homeSection__img{
}

@media (max-width:1440px) {
    .homeSection__contentWrapper {
        padding-left:25px;
    }
}

.homeSection__imgWrapper {
    position:relative;
}

@media (max-width:765px){

    .homeSection__imgWrapper {
        order:1;
    }
}

@media (max-width:765px){

    .homeSection__contentWrapper {
        order:2;
        padding:45px 0;
    }
}

.homeSection__imgWrapper .bg-el {
    position: absolute;
    bottom: -30px;
    right: 0;
    z-index:-1;
}

.homeSection__imgWrapper .bg-el-2 {
    position: absolute;
    bottom: -30px;
    left: 0;
    z-index:-1;
}


.homeSection__imgWrapper .bg-el-3{
    position: absolute;
    bottom: -30px;
    left: 50%;
    z-index:-1;
}

.homeSection__imgWrapper--lrg {
    height: 70vh;
    padding: 45px;
}

@media (max-width:1060px){

    .homeSection__imgWrapper--lrg {
        height: 50vh;
        padding: 45px 25px;
    }
}

.homeSection__imgWrapper--xlrg {
    height:80vh;
}

.homeSection__imgWrapper--map {
    display: flex;
    justify-content: center;
    align-items: center;
}

.homeSection__imgWrapper--map .hidden {
    display:none;
}

@media (max-width:765px){

    .homeSection__imgWrapper--lrg{
        height: 400px;
        width: 95%;
        margin: 0 auto;
        padding: 0;
    }
}

.homeSection__imgWrapper .jarallax {
    height:100%;
}

.homeSection .homeSection__imgContainer {
    overflow: hidden;
}

.homeSection__imgWrapper .imgPlaceholder {
    opacity:0;
    transform:translateY(15px);
    transition:all .4s ease-in .4s;
}

.homeSection__imgWrapper.is-inview .imgPlaceholder {
    opacity:1;
    transform:translateY(0);
}


.splide .imgPlaceholder
/* .homeSection__imgWrapper .imgPlaceholder */ { 
    position:absolute;
    top:0;
    right:0;
    width:100%;
    height:100%;
    background-color:#003471;
    transition:width .3s ease;
    transform: translateY(15px);
}

.homeSection .homeSection__img {
    background-position: center;
}


.splide .is-active .imgPlaceholder
/* .homeSection__imgWrapper.is-inview .imgPlaceholder */ {
    width: 0;
    transform: translateY(0);
}


/*********** FEATURED PROPERTIES *************/

@media (max-width:1060px) {
    .homeSection--fp .btn--whlr {
        padding: 15px 15px;
        font-size: 12px;
    }
}


@media (max-width:765px){

    .homeSection.homeSection--fp {
        padding: 0;
    }

    .homeSection.homeSection--fp .homeSection__imgWrapper--lrg {
        padding:0 20px;
    }
    .homeSection.homeSection--fp .homeSection__contentWrapper {
        padding:35px 20px;
    }
}

/*********** ANIMATIONS ****************/


@keyframes revealtitle{
    0%{
        transform:scaleX(0);
        transform-origin:0 50% 0
    }
    25%{
        transform:scaleX(1);
        transform-origin:0 50% 0
    }
    50%{
        transform:scaleX(1);
        transform-origin:100% 50% 0
    }
    100%{
        transform:scaleX(0);
        transform-origin:100% 50% 0
    }
}
@keyframes pulse{
    0%{
        opacity:.1
    }
    50%{
        opacity:.3
    }
    100%{
        opacity:.1
    }
}
@keyframes scroller{
    0%{
        transform-origin:top left;
        transform:scale(1,0);
        animation-timing-function:cubic-bezier(.48,.02,0,.99)
    }
    30%{
        transform-origin:top left;
        transform:scale(1,1)
    }
    41%{
        transform-origin:bottom left;
        transform:scale(1,1);
        animation-timing-function:cubic-bezier(.48,.02,0,.99)
    }
    100%{
        transform-origin:bottom left;
        transform:scale(1,0)
    }
}

/***** ACCORDION EXPLORE *******/

.whlrRegionMap {
    max-width: 100%;
    width: 100%;
    max-height: 80vh;
}

@media (max-width:1024px) {
    .whlrRegionMap {
        display:none;
    }
}

.whlrRegionMap .whlrRegionMap__state {
    fill:#003471;
    transition:all 0.3s ease;
    stroke:transparent;
    stroke-width: 2px;
}

.whlrRegionMap .whlrRegionMap__stateLabel {
    fill:#fff;
    transition:all 0.3s ease;
    /* transform:translateY(-15px);
    opacity:0; */
}

.whlrRegionMap .whlrRegionMap__pin {
    transition:all 0.3s ease;
    transform:translateX(-15px);
    opacity:0;
}

.whlrRegionMap a.regionSelect .whlrRegionMap__state {
    fill:#fff;
    stroke-width: 1px;
    stroke: #003471;
}

.whlrRegionMap a:hover .whlrRegionMap__state,
.whlrRegionMap a.active .whlrRegionMap__state {
    fill:rgba(0,119,255,1);
    stroke:#003471;
    stroke-width: 2px;
}

/* .whlrRegionMap a:hover .whlrRegionMap__stateLabel, */
/* .whlrRegionMap a.hovered .whlrRegionMap__stateLabel, */
.whlrRegionMap a:hover .whlrRegionMap__pin,
.whlrRegionMap a.active .whlrRegionMap__pin {
    transform:translateX(0);
    opacity:1;
} 

.homeSection .accordion-item {
    opacity:0;
    transform:translateY(15px);
}

.homeSection .is-inview .accordion-item1 {
transition:all .2s ease-in 0.4s;
}

.homeSection .is-inview .accordion-item2 {
transition:all .2s ease-in 0.6s;
}

.homeSection .is-inview .accordion-item3 {
transition:all .2s ease-in 0.8s;
}

.homeSection .is-inview .accordion-item4 {
transition:all .2s ease-in 1s;
}

.homeSection .is-inview .accordion-item {
    opacity:1;
    transform:translateY(0);
}

.homeSection .accordion-button {
    font-size: 50px;
    text-transform: uppercase;
    transition:all 0.3s ease;
    border-bottom:1px solid #C8CCD0;
}

@media (max-width:990px) {

    .homeSection .accordion-button {
        font-size: 38px;
    }
}

.home .accordion-button.collapsed {
    color:#939597;
    border-bottom:1px solid #C8CCD0;
}

.homeSection .accordion-button:hover,
.homeSection .accordion-button:not(.collapsed),
.homeSection .accordion-button:focus {
    border:none;
    box-shadow:none;
    background:none;
    color:#003471;
    border-bottom:1px solid #EBC307;
}
.homeSection .accordion-button:not(.collapsed) {
    border-bottom:1px solid transparent;
}

.homeSection .accordion-item {
    border-bottom:none;
    background:none;
}

.homeSection .accordion-flush .accordion-collapse {
    border-bottom:1px solid #C8CCD0;
    transition:all 0.3s ease;
}

.homeSection .accordion-flush .accordion-collapse.show {
    border-bottom:1px solid #EBC307;
}

.homeSection .explore-region-body .btn--whlr {
    width: auto;
    margin-bottom: 10px;
    padding:5px 15px
}

.homeSection .explore-region-body .bi-geo-alt-fill {
    color:#EBC307;
}

.homeSection .accordion-button,
.homeSection .accordion-button::after,
.homeSection .accordion-button:not(.collapsed)::after {
    background:none;
    background-color:transparent;
    background-image:none;
}


.homeSection .accordion-button::after,
.homeSection .accordion-button:not(.collapsed)::after {
    content:'\F229';
    font-family:'bootstrap-icons';
    font-size:16px;
    color:#939597;
}


.homeSection .accordion-button:hover::after {
    background:none;
    color:#003471;
}

.accordion .btn--whlrTransparent {
  text-align:left
}

.accordion .btn--whlrTransparent .bi-geo-alt-fill {
  transition:all 0.3s ease;
}

.accordion .btn--whlrTransparent:hover .bi-geo-alt-fill {
    padding-left:10px;
    opacity:0;
}

/***** METRICS*******/

.metrics {
    text-align: center;
}

.homeSection.metrics .colorBg {
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:rgba(229, 234, 240,0.9)
}

@media (max-width:767px){
    .homeSection.metrics .colorBg {
        padding:40px 0;
        background:rgba(229, 234, 240,0.975)
    }
}

.metrics .borders {
    border-left: 3px solid #EBC307;
    border-right: 3px solid #EBC307;
}

.bodyLrgCopy {
    font-family:'Oswald', sans-serif;
    color:#003471;
    font-size:60px;
    line-height:100%;
    margin-bottom:10px;
    text-transform: uppercase;
}

.bodyXLrgCopy {
    font-family:'Oswald', sans-serif;
    color:#003471;
    font-size:90px;
    line-height:100%;
    margin-bottom:10px;
    text-transform: uppercase;
}

@media (max-width:1360px){
    .bodyXLrgCopy{
        font-size:70px;
    }
}

@media (max-width:1024px){
    .bodyXLrgCopy{
        font-size:45px;
    }
}

.bodySubCopy {
    font-family:'Roboto', sans-serif;
    color:#0071F2;
    text-transform: uppercase;
    letter-spacing:8px;
    font-size:20px;
    line-height:100%;
    margin:0;
}

@media (max-width:1360px){
    .bodySubCopy{
        font-size:18px;
    }
}

@media (max-width:1024px){
    .bodySubCopy{
        font-size:16px;
    }
}

.metrics .firstStat,
.metrics .secondStat,
.metrics .thirdStat,
.metrics .statBtn {
    opacity: 0;
    transform: translateY(15px);
}

.metrics .firstStat {
    transition: all .4s ease-in-out .2s;
}
.metrics .secondStat {
    transition: all .4s ease-in-out .4s;
}
.metrics .thirdStat {
    transition: all .4s ease-in-out .6s;
}
.metrics .statBtn {
    transition: all .4s ease-in-out .4s;
}

.metrics .is-inview .firstStat,
.metrics .is-inview .secondStat,
.metrics .is-inview .thirdStat,
.metrics .is-inview .statBtn {
    opacity:1;
    transform:translateY(0)
}

@media (max-width:770px) {
    .metrics .stat{
        margin-bottom:20px;
        border:none;
        padding:0;
    }
    .metrics .stat::after {
        content:'';
        background:#EBC307;
        height:2px;
        width:75%;
        margin:20px auto 0;
        display:block;
    }
    .metrics .is-inview .thirdStat {
        margin-bottom:0;
        padding-bottom:0;
        border-bottom:none;
    }
    .metrics .is-inview .thirdStat::after{
        display: none;
    }
    .metrics .statBtn {
        transition: all .4s ease-in-out .0s;
    }
}

/**** PARTNERS *****/

.partners .bodyLrgCopy {
    opacity:0;
    transform:translateY(15px);
    transition:all .4s ease-in 0.4s;
}

@media (max-width:990px) {

    .partners .bodyLrgCopy {
        font-size:42px
    }
}

@media (max-width:700px) {

    .partners .bodyLrgCopy {
        font-size:34px
    }
}

.partners .bodyLrgCopy.is-inview {
    opacity:1;
    transform:translateY(0);
}

.partners .splide {
    opacity:0;
    transform:translateY(15px);
    transition:all .4s ease-in 0.2s;
}

.partners .splide.is-inview {
    opacity:1;
    transform:translateY(0);
}

/*** CURSOR ***/
.mf-cursor{
    position:fixed;
    top:0;
    left:0;
    z-index:250;
    direction:ltr;
    contain:layout style size;
    pointer-events:none;
    transition:opacity .3s,color .4s
}
.mf-cursor:before{
    content:"";
    position:absolute;
    top:-24px;
    left:-24px;
    display:block;
    width:48px;
    height:48px;
    transform:scale(0.2);
    background:#003471 !important;
    border-radius:50%;
    transition:transform .25s ease-in-out,opacity .1s;
    z-index:10;
}
/* .mf-cursor:after{
    content:"";
    position:absolute;
    top:-48px;
    left:-48px;
    display:block;
    width:96px;
    height:96px;
    transform:scale(0.2);
    background:rgba(0, 52, 113, 0.5) !important;
    border-radius:50%;
    transition:transform .25s ease-in-out 0.6, opacity .1s;
    z-index: 5;
} */
.mf-cursor.-inverse{
    color:#fff
}
@supports(mix-blend-mode: exclusion){
    .mf-cursor.-exclusion{
        mix-blend-mode:exclusion
    }
    .mf-cursor.-exclusion:before{
        background:#fff
    }
}
.mf-cursor.-pointer:before{
    transform:scale(0.15)
}
.mf-cursor.-text:before{
    opacity:.85;
    transform:scale(1.7)
}
.mf-cursor.-text.-active:before{
    transform:scale(1.6);
    transition-duration:.2s
}
.mf-cursor.-icon:before{
    transform:scale(1.5)
}
.mf-cursor.-icon.-active:before{
    transform:scale(1.4)
}
.mf-cursor.-hidden:before{
    transform:scale(0)
}
.mf-cursor-text{
    position:absolute;
    top:-18px;
    left:-18px;
    width:36px;
    height:36px;
    display:flex;
    align-items:center;
    justify-content:center;
    transform:scale(0) rotate(10deg);
    opacity:0;
    color:#fff;
    font-size:16px;
    line-height:20px;
    text-align:center;
    transition:opacity .4s,transform .3s
}
.mf-cursor.-text .mf-cursor-text,.mf-cursor.-icon .mf-cursor-text{
    opacity:1;
    transform:scale(1)
}
.mf-cursor-media{
    position:absolute;
    width:400px;
    height:400px;
    margin:-200px 0 0 -200px
}
.mf-cursor-media img,.mf-cursor-media video{
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%, -50%);
    border-radius:50%
}
@supports(object-fit: cover){
    .mf-cursor-media img,.mf-cursor-media video{
        position:static;
        width:100%;
        height:100%;
        object-fit:cover;
        transform:translateZ(0)
    }
}
.mf-cursor-media-box{
    position:relative;
    width:100%;
    height:100%;
    overflow:hidden;
    transform:scale(0) translateZ(0);
    padding:1px;
    opacity:0;
    border-radius:50%;
    transition:transform .35s,opacity .2s .2s
}
.mf-cursor.-media .mf-cursor-media-box{
    opacity:1;
    transform:scale(0.696);
    transition-duration:.4s,.4s;
    transition-delay:0s,0s
}
/*# sourceMappingURL=mouse-follower.min.css.map */


/***** LOCOMOTIVE SCROLL ****/
/*! locomotive-scroll v4.1.3 | MIT License | https://github.com/locomotivemtl/locomotive-scroll */
html.has-scroll-smooth {
    overflow: hidden; }
  
  html.has-scroll-dragging {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none; }
  
  .has-scroll-smooth body {
    overflow: hidden; }
  
  .has-scroll-smooth [data-scroll-container] {
    min-height: 100vh; }
  
  [data-scroll-direction="horizontal"] [data-scroll-container] {
    height: 100vh;
    display: inline-block;
    white-space: nowrap; }
  
  [data-scroll-direction="horizontal"] [data-scroll-section] {
    display: inline-block;
    vertical-align: top;
    white-space: nowrap;
    height: 100%; }
  
  .c-scrollbar {
    position: absolute;
    right: 0;
    top: 0;
    width: 11px;
    height: 100%;
    transform-origin: center right;
    transition: transform 0.3s, opacity 0.3s;
    opacity: 0; }
    .c-scrollbar:hover {
      transform: scaleX(1.45); }
    .c-scrollbar:hover, .has-scroll-scrolling .c-scrollbar, .has-scroll-dragging .c-scrollbar {
      opacity: 1; }
    [data-scroll-direction="horizontal"] .c-scrollbar {
      width: 100%;
      height: 10px;
      top: auto;
      bottom: 0;
      transform: scaleY(1); }
      [data-scroll-direction="horizontal"] .c-scrollbar:hover {
        transform: scaleY(1.3); }
  
  .c-scrollbar_thumb {
    position: absolute;
    top: 0;
    right: 0;
    background-color: black;
    opacity: 0.5;
    width: 7px;
    border-radius: 10px;
    margin: 2px;
    cursor: -webkit-grab;
    cursor: grab; }
    .has-scroll-dragging .c-scrollbar_thumb {
      cursor: -webkit-grabbing;
      cursor: grabbing; }
    [data-scroll-direction="horizontal"] .c-scrollbar_thumb {
      right: auto;
      bottom: 0; }