//.owl-theme {
.owl-carousel {
  &.owl-carousel-navOut {
    .owl-nav {
      [class*='owl-'] {
        background-color: $gray-400;
        margin-top:-15px;

        &:before,
        &:after {
          font-size: 15px;
        }
      }
    }
  }

  .owl-nav {
    [class*='owl-'] {
      position: absolute;
      top: 50%;

      display: inline-block;
      width: 30px;
      height: 30px;
      color: #fff;
      font-size: 0;
      line-height: 30px;
      text-align: center;
      opacity: 0.6;
      border-radius: 50px;

      font-family: '#{$wb-font-family}';
      font-style: normal;
      font-weight: normal;
      text-rendering: auto;
      speak: none;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      -webkit-transform: translate(0%, -50%);
              transform: translate(0%, -50%);

      &:before {
        font-size: 20px;
      }

      &:hover {
        opacity: 0.8;
      }

      > span {
        font-size: 0;
        visibility: hidden;
      }

    }

    .owl-prev {
      left: 10px;

      &:before {
        content: $wb-var-chevron-left;
      }
    }

    .owl-next {
      right: 10px;

      &:before {
        content: $wb-var-chevron-right;
      }
    }
  }

  .owl-dots {
    padding: 0;
    margin-top: 15px;
    line-height: 1;
    list-style: none;
    text-align: center;

    .owl-dot {
      position: relative;
      display: inline-block;
      width: 10px;
      height: 10px;
      margin: 0 10px;
      line-height: 10px;
      vertical-align: middle;
      list-style: none;

      > span {
        display: inline-block;
        width: 100%;
        height: 100%;
        border-radius: 50%;
        background-color: #000;
        cursor: pointer;
        opacity: 0.2;

        &:focus {
          outline: none;
        }
      }

      &:hover,
      &:focus,
      &.active {
        > span {
          opacity: 0.5;
        }
      }
    }

    &-stroke {
      .owl-dot {
        > span {
          border: 2px solid transparent;
          border: 2px solid transparent;
          -webkit-transition: border 0.3s ease 0s, background-color 0.3s ease 0s;
          -o-transition: border 0.3s ease 0s, background-color 0.3s ease 0s;
          transition: border 0.3s ease 0s, background-color 0.3s ease 0s;
        }

        &.active {
          > span {
            opacity: 0.3;
            border-color: #000;
            background-color: transparent;
            background-color: transparent;
            -webkit-transform: scale(1.3);
            -ms-transform: scale(1.3);
            -o-transform: scale(1.3);
            transform: scale(1.3);
          }
        }
      }
    }

    &-fillin {
      .owl-dot {
        > span {
          box-shadow: 0 0 0 2px #000 inset;
          background-color: transparent;
          -webkit-transition: box-shadow 0.3s ease 0s;
          -o-transition: box-shadow 0.3s ease 0s;
          transition: box-shadow 0.3s ease 0s;
        }

        &:hover,
        &:focus {
          > span {
            box-shadow: 0 0 0 2px #000 inset;
          }
        }

        &.active {
          > span {
            box-shadow: 0 0 0 8px #000 inset;
          }
        }
      }
    }

    &-fall {
      .owl-dot {
        &:after {
          position: absolute;
          top: 0;
          left: 0;
          content: '';
          width: 100%;
          height: 100%;
          background-color: #000;
          border-radius: 50%;
          visibility: hidden;
          opacity: 0;
          -webkit-transform: translate(0%, -200%);
          -ms-transform: translate(0%, -200%);
          -o-transform: translate(0%, -200%);
          transform: translate(0%, -200%);
          -webkit-transition: transform 0.3s ease 0s, opacity 0.3s ease 0s, visibility 0s ease 0.3s;
          -o-transition: transform 0.3s ease 0s, opacity 0.3s ease 0s, visibility 0s ease 0.3s;
          transition: transform 0.3s ease 0s, opacity 0.3s ease 0s, visibility 0s ease 0.3s;
        }

        > span {
          -webkit-transition: transform 0.3s ease 0s, opacity 0.3s ease 0s, background-color 0.3s ease 0s;
          -o-transition: transform 0.3s ease 0s, opacity 0.3s ease 0s, background-color 0.3s ease 0s;
          transition: transform 0.3s ease 0s, opacity 0.3s ease 0s, background-color 0.3s ease 0s;
        }

        &.active {
          &:after {
            opacity: 0.5;
            -webkit-transform: translate(0%, 0%);
            -ms-transform: translate(0%, 0%);
            -o-transform: translate(0%, 0%);
            transform: translate(0%, 0%);
            -webkit-transition: transform 0.3s ease 0s, opacity 0.3s ease 0s;
            -o-transition: transform 0.3s ease 0s, opacity 0.3s ease 0s;
            transition: transform 0.3s ease 0s, opacity 0.3s ease 0s;
            visibility: visible;
          }
          > span {
            opacity: 0;
            -webkit-transform: translate(0, 200%);
            -ms-transform: translate(0, 200%);
            -o-transform: translate(0, 200%);
            transform: translate(0, 200%);
          }
        }
      }
    }
  }
}