.owl-carousel button:focus { outline: none; }
.owl-carousel .owl-nav .fas { pointer-events: auto;}
.owl-carousel .owl-nav {pointer-events: none;}
.owl-carousel .owl-nav button {pointer-events: auto;}



/* * * * * * * * * * * * * * * * * * * *
 -------------- OWL-NAV ---------------
* * * * * * * * * * * * * * * * * * * */

    /*------- POSITION CENTER OUTSIDE -------*/

.nav-co {position: relative;}

.nav-co .owl-nav { width: calc(100% + 76px); position: absolute; top: 50%; left: 50%;
                   transform: translate(-50%, -50%); pointer-events: none; }

.nav-co .owl-nav .owl-prev {float: left;}
.nav-co .owl-nav .owl-next {float: right;}


    /*------- POSITION CENTER INSIDE -------*/
.nav-ci .owl-nav{ max-width: 1180px; width: 100%;
                   position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}

.nav-ci .owl-nav .owl-prev {float: left;} 
.nav-ci .owl-nav .owl-next {float: right;}


    /*-------- POSITION RIGHT TOP ----------*/
.nav-rt {position: relative;}
.nav-rt .owl-nav { position: absolute; top: -85px; right: 0px; }
.owl-carousel.nav-rt .owl-nav button.owl-prev span {
  display: inline-block; width: 24px; height: 24px; border: 1px solid hsl(0, 0%, 87%);
  background: url('/images/icon/back.png') center center no-repeat, white; margin-right: 3px;
}

.owl-carousel.nav-rt .owl-nav button.owl-next span {
  display: inline-block; width: 24px; height: 24px; border: 1px solid hsl(0, 0%, 87%);
  background: url('/images/icon/forward.png') center center no-repeat, white;
}


    /*-------- POSITION CENTER TOP ----------*/
.nav-ct {position: relative;}
.nav-ct .owl-nav { position: absolute; top: -40px; left: 50%; transform: translateX(-50%); }
.nav-ct .owl-nav .owl-prev .fas { margin-right: 7px; }
.nav-ct .owl-prev .fas { margin-right: 7px; }




/* * * * * * * * * * * * * * * * * * * *
 -------------- OWL-NAV ---------------
* * * * * * * * * * * * * * * * * * * */

        /*-------- BUTTON 1: ----------*/
.arrow-white .owl-nav .owl-prev span {
  display: inline-block; width: 21px; height: 34px;
  background: url(/images/icon/arrow-white.png);
}

.arrow-white .owl-nav .owl-next span {
  display: inline-block; width: 21px; height: 34px;
  background: url(/images/icon/arrow-white.png);
  transform: scaleX(-1);
}

        /*------- BUTTON 2: ---------*/
.arrow-black .owl-nav .owl-prev span {
  display: inline-block; width: 14px; height: 25px;
  background: url(/images/icon/arrow-black.png);
}

.arrow-black .owl-nav .owl-next span {
  display: inline-block; width: 14px; height: 25px;
  background: url(/images/icon/arrow-black.png);
  transform: scaleX(-1);
}

        /*------- BUTTON 3: ---------*/
.bg-black .owl-nav .owl-prev span {
  display: inline-block; width: 28px; height: 73px;
  background: url(/images/icon/arrow-black.png) no-repeat center center, hsl(0, 0%, 97%);
  background-size: 11px 19px
}

.bg-black .owl-nav .owl-next span {
  display: inline-block; width: 28px; height: 73px;
  background: url(/images/icon/arrow-black.png) no-repeat center center, hsl(0, 0%, 97%);
  background-size: 11px 19px; transform: scaleX(-1);
}


        /*------- BUTTON 1: NO-BORDER WHITE --------*/













/* * * * * * * * * * * * * * * * * * * *
 -------------- OWL-DOTS --------------
* * * * * * * * * * * * * * * * * * * */

    /*------- POSITION CENTER BOTTOM -------*/
.dots-cb .owl-dots { line-height: 1; 
                     position: absolute; left: 50%; bottom: -12px; transform: translateX(-50%); }
    /*------- POSITION RIGHT BOTTOM -------*/
.dots-rb .owl-dots { line-height: 1; 
                     position: absolute; right: 10px; bottom: 10px;}

    /*------- POSITION LEFT TOP -------*/
.dots-lt .owl-dots { line-height: 1; 
                     position: absolute; right: -12px; top: -25px; transform: translateX(-50%); }

    /*------- POSITION CENTER BOTTOM INSIDE-------*/
.dots-cbi .owl-dots { line-height: 1; 
                     position: absolute; left: 50%; bottom: 45px; transform: translateX(-50%); }


        /*------------ DOT 1: ROUND RED ------------*/
.dot-rr .owl-dots .owl-dot span { display: block; margin: 0 3px; width: 16px; height: 16px;
                                   border: 2px solid #333; border-radius: 8px;
                                   transition: opacity 200ms ease;}

.dot-rr .owl-dots .owl-dot.active span, .drb-owl .owl-dots .owl-dot:hover span {
    background: rgb(211, 54, 33); border: 2px solid rgb(211, 54, 33);}



        /*------------ DOT 1: ROUND YELLOW ------------*/
.dot-ry .owl-dots .owl-dot span { display: block; margin: 0 2px;  border: 1px solid #ccb76d;
                                  width: 16px; height: 16px; background: none; border-radius: 8px;
                                  transition: opacity 200ms ease; }

.dot-ry .owl-dots .owl-dot.active span, .drb-owl .owl-dots .owl-dot:hover span {
    background: #ccb76d; width: 14px; height: 14px;
}