/* ------------- 1.0 General */
@import "normalize.css";
@import "basicss.css";

@base: #4d88c2;
@base_border_bottom: #4174a6;
@gray : #efefef;
@white : #fff;
@text-color: #7c7c7c;
@border-color: #dbdbdb;
@btn1: #e47c44;
@btn2: #3da1bf;
@btn3: #af4037;

body{
  font-family: 'Open Sans', sans-serif;
  color: @text-color;
  .gray{
    background: @gray;
  }
}
.p20{
  padding: 20px;
}
.sprite{
  background: url("../img/bg/sprite.png")no-repeat;
}
.mt35{
  margin-top: 35px;
}
.btn-add-to-cart,.btn-default{
  background-color: @base;
  border-radius: 0;
  border: none;
  border-bottom: 2px solid @base_border_bottom;
  color: #fff;

  &:active,&:hover,&:focus{
    background: @base_border_bottom;
    color: #fff;
    border-color: @base;
  }
}

select.select{
  background: #f4f4f4;
  border: 1px solid #dbdbdb;
  padding: 5px;
  height:35px;
}

.btn-new,.btn-bargain,.btn-sale{
  font-family: 'Lobster', cursive;
  font-size: 20px;
  height:33px;
  padding: 0 5px;
  display: inline-block;
  color: @white;
  border-radius: 0;
}
.btn-new{
  background-color: @btn1;
}
.btn-bargain{
  background-color: @btn2;
}
.btn-sale{
  background-color: @btn3;
}
.mb20{
  margin-bottom: 20px;
}

.breadcrumb{
  background: transparent;
  border-top:1px solid #dbdbdb;
  border-bottom: 1px solid #dbdbdb;
  .btn{
    background: #a2a2a2;
    color: #fff;
    font-size: 16px;
    border-radius: 0;
    position: relative;
    margin-right: 5px;
    &:after{
      border-bottom: 4px solid #929292;
      content: '';
      display: block;
      position: absolute;
      width: 100%;
      left: 0;
      bottom: 0;
    }
  }
  a:not(.btn),span{
    color: #808080;
  }
  span{
    margin: 0 5px;
  }
}
.white{
  background-color: @white;
  padding: 20px;
  h1,h2,h3,h4{
    color: @base;
  }
}

/* ------------- 1.1 Navbar Header */

.navbar{
  margin-bottom: 0;
  &.navbar-inverse{
    background-color: transparent;
    border-color: transparent;
  }
  .navbar-form .form-group,.input-group{
    width:100%;
  }
  .gray{
    padding: 20px 0;
  }
  .form-control{
    box-shadow: none;
    border-radius: 0;
  }
  .btn-success{
    background-color: @base;
    border-color: @base;
    padding: 6px 20px;
    &:hover,&:active,&:focus{
      background-color: @base;
      border-color: @base;
    }
  }

  .basket{
    padding: 7px 0px;
    .btn-group.open .dropdown-toggle{
      -webkit-box-shadow: none;
      box-shadow: none;

    }
    i.fa{
      margin-left: 5px;
    }
    button:hover,button:focus,button:active{
      -webkit-box-shadow: none;
      box-shadow: none;

    }

    .open>.dropdown-menu{
      padding: 15px;
      a{
        display: block;
      }
    }

    .btn-group-vertical>.btn, .btn-group>.btn{
      float: none;
    }

    .btn-cart{
      background-color: @base;
      color: @white;
      border-radius:0;
      i{
        font-size: 18px;
      }
      .count{
        background-color: @base;
        position: absolute;
        top: -10px;
        right: -9px;
        border: 1px solid @white;
        border-radius: 50%;
        width: 20px;
        height: 20px;
      }
    }
  }

  #navbar{
    background: url("../img/bg/headbg.png");
    border-color: transparent;
    text-align: center;
    height: 50px !important;
    ul{
      border-color: transparent;
      float: none;
      display: inline-block;
      li:after{
        content: '/';
        position: absolute;
        top:15px;
        font-size: 16px;
        left: 0;
        color: #9d9d9d;
      }
      li{
        a{
          font-size: 16px;
          font-weight: 500;
        }
        &:first-child:after{
          display:none;
        }
      }
    }
  }

}
.navbar-inverse .navbar-nav>.active>a, .navbar-inverse .navbar-nav>.active>a:focus, .navbar-inverse .navbar-nav>.active>a:hover{
  color: #333;
  background-color: transparent;
}
.navbar-inverse .navbar-nav>li>a:focus, .navbar-inverse .navbar-nav>li>a:hover{
  color: #333;
}

/* ------------- 1.2 Teaser */
.teaser{
  .owl-nav{
    .owl-prev{
      position: absolute;
      left:0;
      top: 35%;
      font-size: 22px;
      background: #e3e3e3;
      color: @white;
      padding: 50px 20px;
    }
    .owl-next{
      position: absolute;
      right: 0;
      top: 35%;
      color: @white;
      font-size: 22px;
      background: #e3e3e3;
      padding: 50px 20px;
    }
  }
  .owl-dots{
    display: block;
    background: #e5e5e5;
    padding: 5px;
    text-align: center;
    border-bottom: 1px solid #dddddd;
    .owl-dot{
      margin-right: 10px;
      width:10px;
      height:10px;
      border-radius: 50%;
      display: inline-block;
      background: @white;
      &.active{
        background: #5c5c5c;
      }
    }
  }
}

/* ------------- 1.3 İndex */
.mainSection1{
  .tab{
    background: url("../img/bg/navBg.png");
    text-align: center;
    ul{
      display: inline-block;
      li{
        padding: 15px 15px 0;
        display: inline-block;
        a{
          font-size: 16px;
          color: @white;
          display: block;
          padding-bottom: 5px;
          margin-bottom: 5px;
          border-bottom: 2px solid transparent;
          &.active,&:hover{
            border-bottom-color: @white;
            text-decoration: none;
          }
        }
      }
    }
  }
}

.content{
  padding-top: 20px;
  .item{
    margin-bottom: 25px;
    >div{
      border: 1px solid @border-color;
      img{
        width:100%;
      }
      h4{
        text-align: center;
        padding: 10px;
        font-size: 14px;
        background: @white;
      }
      .img{position: relative}
      .img-hover{
        position: absolute;
        top: 0;
        width: 100%;
        height: 100%;
        vertical-align: middle;
        text-align: center;
        display: table-cell;
        font-size: 38px;
        background: rgba(0,0,0,.3);
        opacity: 0;
        transition: opacity 300ms ease;
        color: @white;
        &:hover{
          opacity: 1;
        }
      }
      .helper {
        display: inline-block;
        height: 100%;
        vertical-align: middle;
      }
    }
  }
}

.mainSection2 .title{
  text-align: center;
  &:After{
    border-top: 1px solid #b5b5b5;
    display: block;
    content: '';
    margin-top: -32px;
    margin-bottom: 30px;
  }
  h4{
    font-weight: 200;
    background: @gray;
    font-size: 24px;
    display: inline-block;
    padding: 0 40px;
    position: relative;
    color: #7c7c7c;
    span{
      font-size: 32px;
    }
    &:before{
      content: '';
      background: url("../img/bg/sprite.png")no-repeat;
      width: 24px;
      height: 23px;
      display: block;
      position: absolute;
      left: 5px;
      top: 16px;
    }
    &:after{
      content: '';
      background: url("../img/bg/sprite.png")no-repeat;
      width: 24px;
      height: 23px;
      display: block;
      position: absolute;
      right: 5px;
      top: 16px;
    }
  }
  &.normal{
    &:After{
      margin-top: -15px;
      margin-bottom: 15px;
    }

    h4:after,h4:before{
      background: none;
      display: none;
    }
  }


}


/* ------------- 1.4 Footer */
footer{
  background: @white;
  padding: 20px 0;
  .col-lg-10{
    float: none;
    margin: 0 auto;
  }

  .menu{
    list-style: disc;
  }
  .social{
    h4{
      color: @base;
      margin-bottom: 10px;
    }
    a{
      display: inline-block;
      margin-bottom: 5px;
    }
  }


}

.sprite.facebook{
  background-position: -1px -32px;
  width: 33px;
  height: 33px;
}
.sprite.twitter{
  background-position: -43px -32px;
  width: 33px;
  height: 33px;
}
.sprite.instagram{
  background-position: -85px -32px;
  width: 34px;
  height: 33px;
}
.sprite.thumblr{
  background-position: -127px -32px;
  width: 34px;
  height: 33px;
}
.sprite.pinterest{
  background-position: -169px -32px;
  width: 33px;
  height: 33px;
}
.sprite.payment1{
  background-position: 0 -67px;
  width: 32px;
  height: 33px;
}
.sprite.payment2{
  background-position: -43px -67px;
  width: 33px;
  height: 33px;
}
.sprite.payment3{
  background-position: -84px -67px;
  width: 33px;
  height: 33px;
}
.sprite.payment4{
  background-position: -127px -67px;
  width: 33px;
  height: 33px;
}
.sprite.payment5{
  background-position: -168px -67px;
  width: 33px;
  height: 33px;
}
/* ------------- 1.5 Product List */
.mainProductList{
  .leftBar{
    .white{
      padding: 0 20px;
    }
    .kalin{
      background-position: -27px 0;
      width: 34px;
      height: 25px;
      color:@white;
      display: inline-block;
      padding: 4px 10px;
      font-style: normal;
      font-size: 11px;
      margin-top: -3px;
      text-align: center;
      margin-right: 5px;
    }
    .accordion{
      border-bottom: 1px solid #e4e5e5;
      padding: 20px 0;
      &:last-child{
        border-bottom: none;
      }
      .accordionContent{
        padding-top: 10px;
      }
      a.blue{
        color: @base;
        font-size: 14px;
      }
      h4{
        color: @white;
        font-size: 18px;
        background: @base;
        padding: 15px;

        cursor: pointer;
        position: relative;
        &:after{
          content: '';
          position: absolute;
          width:100%;
          left: 0;
          bottom: 0;
          border-bottom: 2px solid @base_border_bottom;
        }
      }
      ul{
        padding-left: 10px;
        font-size: 12px;
        color: #7c7c7c;
        li{
          margin-bottom: 0.5em;

        }
      }
      .colorCat{
        li{
          display: inline-block;
        }
        .color{
          width:25px;
          height:25px;
          border:2px solid @white;
          display: inline-block;
          border-radius:50%;
          &.active{
            border-color: transparent;
          }
        }
      }

    }
    #kaldir{
      display: block;
      width: 100%;
      text-align: center;
      background: #7c7c7c;
      color: @white;
      padding: 10px;
      border-bottom: 2px solid #474747;
    }
  }

  .rightBar{
    .result{
      border-bottom: 1px solid #e4e5e5;
      padding-bottom: 10px;
      .pull-left{
        margin-top: 2px;
      }
      .pull-right{
        margin-top: -8px;
      }
      select{
        background: #f4f4f4;
        border: 1px solid #dbdbdb;
        padding: 5px;
        margin-left: 10px;
      }
    }
    .tags{
      border-bottom: 1px solid #e4e5e5;
      padding: 10px 0;
      li{
        padding: 10px 10px 10px 0;
        display: inline-block;
        text-align: center;
        a{
          color: @text-color;
          margin-left: 5px;
          margin-top: 2px;
          font-size: 18px;
          &:hover,&:focus{
            text-decoration: none;
          }
        }
      }
    }

    .foot{
      padding: 10px 0;
      border-top:1px solid @border-color;
      border-bottom:1px solid @border-color;
    }
  }
}

.productList{
  padding: 20px 0;
  .name{
    background: white;
    padding: 10px;
    text-align: center;
    border-bottom: 1px solid @border-color;
    h4{
      padding: 0 !important;
    }
    .price{
      color: @base;
      font-size: 18px;
      font-weight: 600;

    }
  }
  .select{
    border-bottom: 1px solid @border-color;
    select{
      background: #f4f4f4;
      width:100%;
      padding: 5px;
      text-align: center;
      border: 1px solid @white;
      outline: none;
    }
  }
  .buy{
    a{
      border: 1px solid @white;
      color: @white;
      text-align: center;
      background-color: @base;
      padding: 5px;
      display: block;
      width:100%;
      font-size: 24px;
    }
  }
}

.page {
  li{
    display: inline-block;
    a{
      background: #f4f4f4;
      padding: 10px 15px;
      text-align: center;
      display: block;
      &:hover,&:focus,&.active{
        background: #e5e5e5;
        text-decoration: none;
      }
    }
  }

}

/* ------------- 1.5 Product Detail */
.productDetail{
  .white{
    padding: 10px;
  }
  .left{
    .img{
      margin-bottom: 10px;

    }
    img{
      border: 1px solid transparent;
      width:100%;
      height:auto;
      &.active{
        border-color: @base;
      }
    }
    ul img{
      height:auto;
    }
  }

  .right{
    .name{
      margin-bottom: 10px;
      .title{
        border-bottom: 1px solid @border-color;
        padding-bottom: 5px;
        h1{
          font-size: 24px;
        }
        .indirim{
          span{
            &:first-child{
              font-size: 16px;
              color: @base;
              display: block;
              margin-bottom: -8px;
            }
            &:last-child{
              font-size: 10px;
            }
          }
        }
      }
    }



    .info{
      li{
        border-bottom: 1px dashed @border-color;
        line-height: 1.5;
        padding: 5px 0;
        font-size: 12px;
      }
    }

    .share{
      padding-top: 10px;
      .btn{
        width: 100px;
      }
      .socialShare{
        background: @white;
        height:33px;
        label{
          font-size: 12px;
          font-weight: normal;
          display: inline-block;
          padding:0 8px;
          position: relative;
          top: -11px;
        }
        a{
          display: inline-block;

        }
      }
    }
  }
}
.detailSection {
  .tab {
    background: url("../img/bg/headbg.png");
    ul li a {
      color: #333;
      &.active, &:hover {
        border-color: @base;
      }
    }
  }
  .img-hover .btn{
    width: 50%;
    float: left;
  }
  .page{
    text-align: center;
  }
}

.prices{
  padding-top: 10px;
  .price{
    margin-top: -10px;
    .discount-price{
      font-size: 14px;
      position: relative;
      top: -5px;
    }
    .regular-price{
      font-size: 30px;
      color: @base;
    }
    span.last{
      font-size: 11px;
      display: block;
    }
  }
  .btn-add-to-cart{
    margin-top: -3px;
    margin-left: 20px;
  }
}


html.magnifying > body {
  overflow-x: hidden !important;
}
.magnify {
  position: relative;
  display: inline-block;
  .magnify-lens {
    position: absolute;
    width: 200px;
    height: 200px;
    border-radius: 100%;
    -webkit-box-shadow: 0 0 0 7px rgba(255, 255, 255, 0.85),
    0 0 7px 7px rgba(0, 0, 0, 0.25),
    inset 0 0 40px 2px rgba(0, 0, 0, 0.25);
    box-shadow: 0 0 0 7px rgba(255, 255, 255, 0.85),
    0 0 7px 7px rgba(0, 0, 0, 0.25),
    inset 0 0 40px 2px rgba(0, 0, 0, 0.25);
    cursor: none;
    display: none;
    z-index: 100;
    &.loading {
      background: #333 !important;
      opacity: 0.75;
      &:after{
        position: absolute;
        top: 45%;
        left: 0;
        width: 100%;
        color: #fff;
        content: 'Loading...';
        font: italic normal 16px/1 Calibri, sans-serif;
        text-align: center;
        text-shadow: 0 0 2px rgba(51, 51, 51, 0.8);
        text-transform: none;
      }
    }
  }
}

/* Cart list */
.cartList{
  padding: 20px 0;
  li{
    position: relative;
    padding-bottom: 10px ;
    margin-bottom: 10px;
    border-bottom: 1px solid #dbdbdb;
    a.fa{
      position: absolute;
      right: 0;
      top: 10px;
      font-size: 20px;
      color: #c9c9c9;
      &:hover,&:focus{
        color: @text-color;
        text-decoration: none;
      }
    }
    .img img{
      border: 2px solid @border-color;
    }
    select{
      width:150px;
      margin-top:10px
    }
  }

}

.scroll-pane{
  height:400px;
  width: 100%;
  overflow: auto;
}
.mCSB_dragger_bar{
  background-color: @base !important;
}

.pt10{
  padding-top: 10px;
}
.form-control{
  border-radius: 0;
  box-shadow: none;
  border-color: @border-color;
  -webkit-box-shadow: none;
}
.wrapper select{
  display: block;
  width:100%;
  margin-top:10px;
}
.cartTotal{
  width:100%;
  tr {
    font-weight: 700;
    font-size: 15px;
    td{
      padding: 5px 0;
    }
    td:last-child{
      text-align: right;
    }
    &:last-child td{
      border-top:1px solid @border-color;
      &:last-child{
        color: @base;
      }
    }
  }
}
.expDate select{
  display: inline-block;
  width:100px;
}
.height600{
  min-height:600px;
}
.leftMenu{
  ul{
    padding-left: 0;

    li{
      border-bottom: 1px solid @border-color;
      padding: 5px 0;
      a{
        font-size: 14px;
        .fa-caret-right{
          float: right;
        }
        &:hover{
          color: @base;
        }
      }
    }
  }
}


/* ------------- End Slider And Responsive */

@import "bootstrap-slider.less";
@import "checkbox";