@import "elements/variables";

@import "elements/newsletter";

.category-articles-dossiers{
  margin-top: 0;
  &-parent .content-page {margin-top: 0;}
  .filter-option{
    text-align: center;border-bottom: 2px solid @greyeb;margin-bottom: 25px;
    .filter{
      background-color: @greyeb;padding: 6px 20px;color: @black33;
      &:hover, &:focus, &:active{color:@black33}
      .icon{position: relative;right: 0;.position(left, -13px);}
      &.collapsed .icon {.position(left, top);}
    }
    #filter-item{
      overflow: hidden;border-top: 2px solid @greyeb;text-align: left;background-color: @greyeb;
      .col-sm-3{margin-top: 15px;margin-bottom: 15px}
      .bgWhite{
        padding: 10px;overflow: hidden;margin-bottom: 10px;
        .btn-formules{
          border-bottom: 1px solid @black1d;padding: 5px 0;height: 35px;cursor: pointer;margin-bottom: 0;
          @media(min-width: @screen-sm){pointer-events: none; cursor: text;}
          &.collapsed{
            border-bottom: 1px solid @white;
          }
        }
        form{
          &.collapse, &.collapsing, &.in{
            @media(min-width: @screen-sm){display: block; .transition(none); height: auto}
          }
          .CheckBox, .CheckRadio_t2{margin: 4px 0;}
          .label-title{background: none;width: 84%;white-space: normal;line-height: 1;position: inherit;display: inline-block;padding: 0px 10px;height: auto; vertical-align: middle}
        }

      }
    }
    .badge{background-color: @white;color:@black33;padding: 3px 6px;margin: 0 0 0 10px;font-size: 10px;}
  }
  .shuffle-content{
    position: relative;overflow: hidden;
    .shuffle-item{
      margin-top: 25px;display: block;position: relative;
      figure{display: block;width: 100%;height: auto;
        &.video-item{
          position:relative;
          .icon-play{width:100px;height:70px;background:url('@{img}/play.png') no-repeat top center transparent;display: block;position:absolute;top: 50%;left: 50%;}
        }
      }
      &.center-shuffle-item{right: 0;margin: 20px auto 0 auto;}
      .embed-responsive{
        position: relative;top: 15px;
        a div{position: absolute;width: 100%;height: 100%;display: block;}
      }
      &:hover .item-content, &:focus .item-content{background-color: @greyeb}
      &:hover .video-item .icon-play, &:focus .video-item .icon-play{background-position:bottom center;}

      .item-details{
        position: relative;top: -25px;
        @media(min-width: 445px){width: 445px; margin: 0 auto}
        @media(min-width: @screen-sm){width: auto;}
        .type{display: inline-block;background-color: @brand-primary;color: @white;padding: 0 5px;margin-bottom: 0;}
        .item-content{
          padding: 10px 10px 0;border: 1px solid @greycc;
          strong{font-family:'open_sanslight';}
          p{
            font-size: 16px;font-family: 'open_sansregular';line-height: 1.3;color: @black33;text-align:left;
            &.title2{font-family: 'open_sansbold';}
          }
        }
      }
      &.concealed{z-index: -1}
      &.filtered{z-index: 1}
    }
  }
  .moreResult{
    margin: 25px 0 0;
    .btn-primary{margin: 10px auto;}
    .loader{ background-image: url('@{img}/loader_24_eb.gif'); width: 24px; height: 24px; margin: 11px auto; display: none; position: relative; top: 2px; }
  }


  @media (min-width: 768px){
    &-parent .introduction h1{margin-bottom: 0}
    .filter-option #filter-item{
      .bgWhite .btn-formules{
        background: none;height: auto;
        &.collapsed{border-bottom: 1px solid @black1d;}
      }
      form .CheckBox span{top:4px;}
      div .bgWhite{
        height: 445px;margin-bottom: 0; overflow: auto;
        label{height: auto;}
        form{margin-top: 10px}
      }
    }
    .title2 a{text-transform: none; color: @link-color;
      &:hover{color: @link-hover-color}
    }
  }


  @media (min-width: 992px){
    .filter-option #filter-item div .bgWhite{height: 405px;}
  }

  @media (min-width: 1200px){
    .filter-option #filter-item div .bgWhite{height: 375px;}
  }
}