@import 'variable';

// Main Slider

.slider-content {
   height: 480px;
   position: relative;
   background-size: cover;
   margin-right: 3px;

   .content-wrapper {
      position: absolute;
      left: 60px;
      right: 60px;
      margin: auto;
      padding: 40px;
      top: 50%;
      background: rgba(255,255,255,.8);
      transform: translateY(-50%);

      h1 {
         color: #24272a;
         margin-bottom: 30px;
      }

      .btn-primary {
         margin-right: 30px;
      }
   }
}

// feature slider
.hero-slider{
   .features-slider {
      position: relative;
   
   
      .owl-nav {
         display: block;
         position: absolute;
         bottom: -10px;
         opacity: 0;
         visibility: hidden;
         transition: all ease 500ms;
         transform: scale(0);
         .owl-prev,
         .owl-next {
            font-size: 50px;
            position: relative;
            bottom: 0;
            transform: translateY(-50%);
            display: inline-block;
            color: #fff;
            line-height: 30px;
            padding: 20px;
   
            &:focus {
               outline: none;
            }
   
            &:hover {
               outline: none;
   
               i {
                  background: $color-primary;
               }
            }
         }
   
         .owl-next {
            left: 20px;
            padding-left: 0;
         }
   
         .owl-prev {
            left: 40px;
         }
   
         i {
            color: #fff;
            line-height: 22px;
            width: 36px;
            height: 34px;
            font-size: 16px !important;
            padding: 5px 6px;
            border-radius: 0;
            background: #24272a;
            display: block;
            text-align: center;
            &.icon-chevron-right{
               border-left: 1px solid #353535;
            }
         }
      }
      &:hover{
         .owl-nav{
            opacity: 1;
            visibility: visible;
            transform: scale(1);
         }
      }
      .owl-dots{
         display: none;
      }
   }

   
.features-slider-classic{
   position: relative;
   .owl-nav {
      .owl-prev,
      .owl-next {
         font-size: 50px;
         position: absolute;
         transform: translateY(-50%);
         display: inline-block;
         color: #fff;
         line-height: 30px;
         padding: 20px;
         opacity: 0;
         transition: all ease 500ms;

         &:focus {
            outline: none;
         }

         &:hover {
            outline: none;

            i {
               background: $color-primary;
            }
         }
      }

      .owl-next {
         right: 10px !important;
      }

      .owl-prev {
         left: 10px !important;
      }

      i {
         color: #fff;
         line-height: 28px;
         width: 35px;
         height: 35px;
         font-size: 13px !important;
         padding: 5px 6px;
         border-radius: 0;
         background: #24272a;
         display: block;
         text-align: center;
      }
   }
   .owl-dots{
      display: none;
   }
   .slider-content {
      .content-wrapper{
      background: transparent;
      text-align: center;
      .slider-title{
         color: #fff;
      }
      }
   }
   &:hover{
      .owl-nav {
         .owl-prev,
         .owl-next {
            opacity: 1;
         }
      }
   }
}

}


// feature box
.featured-box {
   padding: 30px 15px 30px 25px;
   margin: 3px;

   .icon {
      font-size: 60px;
      color: $white-color;
   }

   .ts-title {
      margin-top: 25px;
    font-size: 24px;
    line-height: 7px;

      a {
         color: $white-color;
         font-weight: 600;
      }
   }

   P {
      color: $white-color;
   }

   &:nth-child(2) {
      margin-right: 0px;
   }

   &:hover {

      .ts-title {
         a {
            color: #ffb923;
         }
      }
   }
}

.item-1,
.item-2 {
   margin-top: 5px;
}

.slider-feature {
   padding-top: 2px;
}

.owl-item.active {
   .slider-content {
      h1 {
         &.slider-title {
            -webkit-animation-name: animLeft;
            animation-name: animLeft;
            -webkit-animation: animLeft 1s ease 500ms both;
            animation: animLeft 1s ease 500ms both;
            -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
            -webkit-animation-delay: 700ms;
            animation-delay: 700ms;
         }
      }
      p{
         -webkit-animation-name: animLeft;
         animation-name: animLeft;
         -webkit-animation: animLeft 1s ease 500ms both;
         animation: animLeft 1s ease 500ms both;
         -webkit-backface-visibility: hidden;
         backface-visibility: hidden;
         -webkit-animation-delay: 900ms;
         animation-delay: 900ms;
      }

      .btn {
         -webkit-animation-name: animLeft;
         animation-name: animLeft;
         -webkit-animation: animLeft 1s ease 500ms both;
         animation: animLeft 1s ease 500ms both;
         -webkit-backface-visibility: hidden;
         backface-visibility: hidden;
         -webkit-animation-delay: 1000ms;
         animation-delay: 1000ms;
      }
   }
}



@-webkit-keyframes animLeft {
   from {
      opacity: 0;
      -webkit-transform: translate3d(50%, 0, 0);
      transform: translate3d(50%, 0, 0);
   }

   to {
      opacity: 1;
      -webkit-transform: none;
      transform: all .5s;
   }
}

.hero-slider {
   .owl-dots {
      position: absolute;
      right: 25px;
      top: 50%;
      transform: translateY(-50%);
      display: block;
      z-index: 1;
      .owl-dot {
         display: block;
         margin: 0;
         top: 0;
         line-height: 20px;
         span {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: #59616d;
            display: inline-block;
            opacity: 1;
            margin: 0 3px;
            opacity: .5;
            
          }
         &.active {
            span {
               border-radius: 50%;
               border: 2px solid #fff;
               background: transparent;
               position: relative;
               top: 2px;
               opacity: 1;
             }
         }
         &:focus{
            outline: none;
         }
      }
    }
}



 
//  .owl-dots 
 
//  .owl-dots .owl-dot
 
//  #more-news-slider .owl-dots .owl-dot span {
//    background: #fff;
//  }