@import "elements/variables";

@import "../bootstrap_custum/panels.less";

@import "elements/introduction";
@import "elements/message-download";
@import "elements/contact-form";

@import "elements/owl-carousel";
.slider-salonMini(true);

@import "elements/accompagnement";
@import "elements/other-articles";


#slider_001.sliderF{height: auto}
.slider{
  &_t{
    &_1{
      .slider-enfant {margin: 0;height: 100%;
        @media (min-width: 768px){height: 100%;}
        &.owl-loaded{
          @media (min-width: 768px){width: 500px;}
          @media (min-width: 992px){width: 680px;}
          @media (min-width: 1200px){width: 772px;}
        }
        .owl{
          &-stage{
            @media (min-width: 768px){height: 100%;}
            &-outer{
              @media (min-width: 768px){height: 100%;}
            }
          }
          &-item{
            @media (min-width: 768px){display: inline-block;float: none;height: 100%;vertical-align: bottom;}
            @media (min-width: 1200px){vertical-align: middle;}
          }
          &-dots{
            @media (min-width: 768px){position: absolute;margin: 0 auto;display: block;bottom: 0;width: 100%}
          }
        }
        .slide{
          @media (min-width: 1200px){width: 772px;}
          .cel{margin: 15px 0;
            @media (min-width: 768px){vertical-align: middle;width: 50%;margin: 0;
              &:first-child{margin-top: 0px}
            }
          }
          .cel:last-child{margin-top: 0px}
          .content{
            &-text .content{padding: 25px;
              @media (min-width: 768px){margin-top: 0px;}
            }
            &-price .content{
              @media (min-width: 768px){margin-top: 15px;margin-bottom: 15px;}
            }
            &-picture{
              @media (min-width: 992px){max-width: inherit;}
              @media (min-width: 1200px){padding: 0 0 0 15px;
                figure{
                  margin-top: 0px;
                  img{margin: 0;padding: 0}
                }
              }
            }
          }
        }
        .num{position: absolute;right: 20px;bottom: 15px;}
      }
      .content{
        @media (min-width: 768px){padding: 0;}
        @media (min-width: 992px){padding: 25px;}
        p{
          @media (min-width: 768px){font-size: 16px}
          @media (min-width: 992px){font-size: 22px}
          @media (min-width: 1200px){font-size: 28px}
        }
        &-picture{
          @media (min-width: 768px){vertical-align: middle;max-width: 250px;}
          figure{
            @media (min-width: 768px){margin-top: 25px;}
          }
        }
        &-form{
          @media (min-width: 768px){float: none;vertical-align: middle; width: 250px;}
          @media (min-width: 992px){width: 290px;}
          @media (min-width: 1200px){width: 368px;}
          .contactForm{margin: 15px auto;
            @media (min-width: 768px){padding: 15px;}
            @media (min-width: 992px){padding: 15px 25px;}
            p.title{font-size: 24px;margin: 0 auto;}
          }
          .btn{
            @media (min-width: 768px){margin-top: 0px;}
          }
          .title{
            @media (min-width: 768px){font-size: 20px}
            @media (min-width: 992px){font-size: 24px}
          }
        }
      }
      .container{
        @media (min-width: 768px){overflow: hidden}
      }
      .tab{
        @media (min-width: 768px){display: table;float: none;width: 100%;height: 100%;}
        .cel{
          @media (min-width: 768px){display: table-cell;float: none;height: 100%;vertical-align: middle;}
          @media (min-width: 1200px){
            &.slider-enfant{
              margin: 0;padding: 0;width: 772px;//66% 1170
              .cel{width: 50%}
            }
            &.content-form{width: 398px;vertical-align: middle;} //34% 1170
          }
        }
      }
      .item{
        .content-form .contactForm{
          @media (min-width: 992px){margin-bottom: 15px;margin-top: 15px;}
        }
      }
    }
    &_2{
      .slider-enfant {margin: 0;
        @media (min-width: 1200px){height: 100%;}
        .slide{
          @media (min-width: 1200px){width: 780px}
          .cel{margin-top: 15px}
          .content{
            &-text .content{padding: 25px;
              @media (min-width: 768px){margin-top: 0px;}
            }
            &-price .content{
              @media (min-width: 768px){margin-top: 15px;margin-bottom: 15px;}
            }
          }
        }
        .owl{
          &-stage{
            @media (min-width: 768px){height: 100%;}
            &-outer{
              @media (min-width: 768px){height: 100%;}
            }
          }
          &-item{
            @media (min-width: 768px){display: inline-block;float: none;width: 100%;height: 100%;vertical-align: middle}
          }
          &-dots{
            @media (min-width: 768px){position: absolute;margin: 0 auto;display: block;bottom: 0px;width: 375px}
            @media (min-width: 992px){width: 647px}
            @media (min-width: 1200px){width: 780px}
          }
        }
        .num{position: absolute;right: 20px;bottom: 1px;}
      }
      .content-form .contactForm{
        margin: 15px auto;
        @media (min-width: 992px){margin-bottom: 15px;margin-top: 15px;}
        p.title{font-size: 24px;margin: 0 auto 10px;}
      }
      .container{
        @media (min-width: 768px){overflow: hidden}
      }
      .tab{
        @media (min-width: 768px){display: table;float: none;width: 100%;height: 100%;table-layout: fixed;}
        .cel{
          @media (min-width: 768px){display: table-cell;float: none;height: 100%;vertical-align: middle;width: 375px;}
          &.content-form{
            @media (min-width: 992px){width:323px}
            @media (min-width: 1200px){width:390px}
          }
          &.slider-enfant{
            @media (min-width: 992px){width:647px}
            @media (min-width: 1200px){width:780px}
          }
          .cel{
            @media (min-width: 768px){width: 100%}
          }
        }
      }
    }
    &_3{
      .slider-enfant {margin-bottom:0px;
        .owl{
          &-stage{
            @media (min-width: 768px){height: 100%;}
            &-outer{
              @media (min-width: 768px){height: 100%;}
            }
          }
          &-item{
            @media (min-width: 768px){display: inline-block;float: none;width: 100%;height: 100%;vertical-align: middle}
          }
          &-dots{
            @media (min-width: 768px){position: absolute;margin: 0 auto;display: block;bottom: 0px;width: 768px}
            @media (min-width: 992px){width: 992px}
            @media (min-width: 1200px){width: 1200px}
          }
        }
        .slide{
          .cel{
            margin: 15px 0;
            &:last-child{margin-top: 0}
          }
          .content{
            &-text .content{padding: 25px;
              @media (min-width: 768px){margin-top: 0px;}
            }
            &-picture{
              @media (min-width: 768px){vertical-align: bottom}
            }
            &-price .content{
              @media (min-width: 768px){margin-top: 15px;margin-bottom: 15px;}
            }
          }
        }
        .num{position: absolute;right: 20px;bottom: 15px;}
      }
      .container{
        @media (min-width: 768px){overflow: hidden}
      }
      .tab{
        @media (min-width: 768px){display: table;float: none;width: 100%;height: 100%;table-layout: fixed;}//table-layout: fixed;
        .cel{
          @media (min-width: 768px){display: table-cell;float: none;height: 100%;vertical-align: middle;width: 50%}
        }
      }
    }
  }
  &F{
    .owl-dots, .owl-nav{
      &.disabled, .disabled{display: none}
    }
    .content-text{text-align: center;
      p{display: inline-block; max-width: 96%;}
    }
    p{
      margin: 0 0 10px;font-size: 16px;
      @media (min-width: 768px){font-size: 20px;}
      @media (min-width: 992px){font-size: 28px;}
      &.title{
        text-align:center;text-transform: uppercase;font-family: 'open_sansbold';font-size: 26px;margin-bottom: 25px;
        @media (min-width: 768px){margin-top: 0px;font-size: 26px;}
        @media (min-width: 1200px){font-size: 30px;}
      }
      &.little{font-size: 21px;margin-bottom: 25px;text-align:center;}
      &.from{
        text-align:center;margin: 0;font-size: 16px;line-height: 45px;
        .price{line-height: 23px;font-size: 50px;}
      }
      &.inline-btn {display: block; margin-top: 15px;
        .call{
          .call{margin: 0;}
          .ico{
            @media (min-width: 768px){margin: 0;}
            @media (min-width: 992px){top:-2px;}
          }
        }
        .btn{
          border:none;
          @media (min-width: 992px){margin: 0}
        }
      }
      &.inline-btn-2 .btn{border:none;margin-top: 15px;
        @media (min-width: 992px){margin: 0}
      }
      .btn{
        @media (min-width: 768px){margin-top: 25px;font-size: 16px;}
      }
    }
    .call{
      display: inline-block;font-size: 28px;font-family: 'open_sansbold'; vertical-align: middle;
      .mention{display: block;margin: -6px auto;font-size: @font-size-small;font-family: 'open_sansitalic';font-family: 'open_sansregular';padding-left: 20%}
      a{color:@black00;}
    }
    .m_t_b_25{margin-top: 25px;margin-bottom: 25px}
    .m_t_25{margin-top: 25px}
    .m_b_25{margin-bottom: 25px}

    .modal-default {
      .modal-header p.title{margin: 0 auto;}
      .modal-body p.title{font-size: 14px;margin: 0 auto;font-family: 'open_sansregular';text-transform: none}
    }
  }
}

.tab-page-simple{
  ul.nav-tabs{
    margin-left: 10px;height: 50px;display: table;border: none;width: 100%;
    @media(min-width: @screen-md){width: 80%;}
    li{
      background: @white;height: 55px;bottom: -10px;.border-radius(10px 10px 0 0);.box-shadow(0px 7px 5px 1px, #444444);.filter-shadow(#444444, 100, 2); line-height: 55px;text-align: center; width: 20%;
      &.active h3, &:hover h3{font-family: 'open_sansbold';}
      a{
        .border-radius(0);text-transform: uppercase;white-space: inherit;padding: 10px;background: transparent; display: inline-block; vertical-align: middle;
        @media(min-width: 768px){border: none;text-align: center;}
      }
      h3{margin: 0;line-height: 1; font-size: @font-size-base}
      &:hover, &.active{
        height: 65px;bottom: 0; line-height: 65px;}
    }
  }

  .ezxmltext-field {
    ul, ol {margin: 0 0 10px 0;height: auto;display: block;text-align: left}
    li {
      background: none;width: auto;height: auto;bottom: initial;.border-radius(0px);.box-shadow(none);.filter-shadow(@white, 0, 0);list-style: inside none disc;
      a {text-transform: inherit;white-space: normal;padding: 0}
      &:hover, &.active {height: auto;bottom: inherit;color: inherit;
        a {height: auto;background: transparent}
      }
    }
  }
}

.help{
  background: @greyeb;padding: 10px 5px;clear: both;margin: 0 auto 25px auto;display: table;width: 100%;
  p{
    line-height:30px;margin: 0;text-align: center;font-family: 'open_sansbold';text-transform: uppercase;font-size: 16px;
    .btn-primary{margin: 0 0 0 20px;}
  }
}

#owl-avis{
  margin: 25px auto;
  .container-carousel{
    padding-bottom: 0;
    .content-carousel{
      background: @greyeb;display: block;padding: 10px;
      a{text-transform: none; color: @link-hover-color;font-size: 14px; font-family: 'open_sansregular'}
      figure {
        padding-bottom: 10px;max-width: 240px;margin:0 auto;
        img{width: auto;}
      }
      @media (min-width: 768px){
        figure{
          padding-bottom: 0px;max-width: 100%;
          img{width: 100%;}
        }
        figure, div {display: table-cell;float: none;vertical-align: middle;}
      }
      p{
        text-align: center;font-size: 14px;
        @media (min-width: 768px){text-align: left;}
      }
      .lt-ie9 & {display:table;width:100%}
    }
  }
  .shadow{bottom: inherit;}
  @media (min-width: 768px){
    .owl-prev, .owl-next{top: 50%; margin-top: -12px}
  }
}

.borderContentNav{margin: 25px auto 14px;position: relative;float: left;width: 100%;min-height: 1px;}

.other-link{
  margin: 25px auto;text-align: center;clear: both;overflow: hidden;
  ul{
    padding-left: 0;
    @media(min-width: 768px){display: inline-block;}
    li{list-style: none;text-align: center;margin-bottom: 10px;
      @media(min-width: 768px){list-style: disc;text-align: left;margin-bottom: 0;
      }
    }
  }
}

.salonsAndEvent{margin-top:50px}

.edit-content{
  .ezxmltext-field > .ezimage-field{margin-top: 25px;}
}

.other-articles ul {
  @media (min-width: @screen-sm) {
    .content-columns(2; @grid-gutter-width);
  }
}