/**
 * @file
 * Grid styling for the HSL 3 column grid
 */
.icon-small-sprite, .icon-small-cross-blue, .icon-small-star-blue, .icon-small-star-pink, .icon-small-star-white {
  background: url('../../../img/icon-small-se8cae0c792.png') no-repeat;
}

.icon-small-cross-blue {
  background-position: 0 0;
}

.icon-small-star-blue {
  background-position: 0 -18px;
}

.icon-small-star-pink {
  background-position: 0 -48px;
}

.icon-small-star-white {
  background-position: 0 -33px;
}

/*
 * Medium breakpoint
 */
@media all and (min-width: 481px) and (max-width: 959px) {
  /*
   * Use 4 grid columns for smaller screens.
   */
  .hsl-2col {
    /*
     * Outer grid containers.
     */
  }
  .hsl-2col .panel-col-first {
    /* Span 3 columns, starting in 1st column from left. */
    float: left;
    width: 75%;
    margin-left: 0%;
    margin-right: -75%;
    padding-left: 5px;
    padding-right: 5px;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
    word-wrap: break-word;
    padding-left: 0;
    padding-right: 0;
  }
  .hsl-2col .panel-col-second {
    /* Span 1 column, starting in 4th column from left. */
    float: left;
    width: 25%;
    margin-left: 75%;
    margin-right: -100%;
    padding-left: 5px;
    padding-right: 5px;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
    word-wrap: break-word;
    padding-left: 0;
    padding-right: 0;
  }
}
/*
 * Large breakpoint
 */
@media all and (min-width: 960px) {
  /*
   * Use 4 grid columns for larger screens.
   */
  .hsl-2col {
    /*
     * Outer grid containers.
     */
  }
  .hsl-2col .panel-col-first {
    /* Span 3 columns, starting in 1st column from left. */
    float: left;
    width: 75%;
    margin-left: 0%;
    margin-right: -75%;
    padding-left: 5px;
    padding-right: 5px;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
    word-wrap: break-word;
    padding-left: 0;
    padding-right: 0;
  }
  .hsl-2col .panel-col-second {
    /* Span 1 column, starting in 4th column from left. */
    float: left;
    width: 25%;
    margin-left: 75%;
    margin-right: -100%;
    padding-left: 5px;
    padding-right: 5px;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
    word-wrap: break-word;
    padding-left: 0;
    padding-right: 0;
  }

  .multiple-panes:before, .multiple-panes:after {
    content: "";
    display: table;
  }
  .multiple-panes:after {
    clear: both;
  }
  .multiple-panes .hsl-pane-1 {
    clear: left;
    /* Span 1 column, starting in 1st column from left. */
    float: left;
    width: 50%;
    margin-left: 0%;
    margin-right: -50%;
    padding-left: 5px;
    padding-right: 5px;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
    word-wrap: break-word;
  }
  .multiple-panes .hsl-pane-2 {
    /* Span 1 column, starting in 2nd column from left. */
    float: left;
    width: 50%;
    margin-left: 50%;
    margin-right: -100%;
    padding-left: 5px;
    padding-right: 5px;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
    word-wrap: break-word;
  }
}
.hsl-2col-rows .hsl-picto-row-wrapper .hsl-pane-1 .picto {
  clear: left;
  /* Span 1 column, starting in 1st column from left. */
  float: left;
  width: 25%;
  margin-left: 0%;
  margin-right: -25%;
  padding-left: 5px;
  padding-right: 5px;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
  word-wrap: break-word;
}
.hsl-2col-rows .hsl-picto-row-wrapper .hsl-pane-2 .picto {
  /* Span 1 column, starting in 2nd column from left. */
  float: left;
  width: 25%;
  margin-left: 25%;
  margin-right: -50%;
  padding-left: 5px;
  padding-right: 5px;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
  word-wrap: break-word;
}
.hsl-2col-rows .hsl-picto-row-wrapper .hsl-pane-3 .picto {
  /* Span 1 column, starting in 3rd column from left. */
  float: left;
  width: 25%;
  margin-left: 50%;
  margin-right: -75%;
  padding-left: 5px;
  padding-right: 5px;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
  word-wrap: break-word;
}
.hsl-2col-rows .hsl-picto-row-wrapper .hsl-pane-4 .picto {
  /* Span 1 column, starting in 4th column from left. */
  float: left;
  width: 25%;
  margin-left: 75%;
  margin-right: -100%;
  padding-left: 5px;
  padding-right: 5px;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
  word-wrap: break-word;
}
@media all and (min-width: 768px) and (max-width: 959px) {
  .hsl-2col-rows .hsl-picto-row-wrapper .hsl-pane-1 .picto,
  .hsl-2col-rows .hsl-picto-row-wrapper .hsl-pane-3 .picto {
    clear: left;
    /* Span 1 column, starting in 1st column from left. */
    float: left;
    width: 50%;
    margin-left: 0%;
    margin-right: -50%;
    padding-left: 5px;
    padding-right: 5px;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
    word-wrap: break-word;
  }
  .hsl-2col-rows .hsl-picto-row-wrapper .hsl-pane-2 .picto,
  .hsl-2col-rows .hsl-picto-row-wrapper .hsl-pane-4 .picto {
    /* Span 1 column, starting in 2nd column from left. */
    float: left;
    width: 50%;
    margin-left: 50%;
    margin-right: -100%;
    padding-left: 5px;
    padding-right: 5px;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
    word-wrap: break-word;
  }
}
@media all and (max-width: 767px) {
  .hsl-2col-rows .hsl-picto-row-wrapper .hsl-pane-1 .picto,
  .hsl-2col-rows .hsl-picto-row-wrapper .hsl-pane-3 .picto {
    clear: left;
    /* Span 1 column, starting in 1st column from left. */
    float: left;
    width: 50%;
    margin-left: 0%;
    margin-right: -50%;
    padding-left: 5px;
    padding-right: 5px;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
    word-wrap: break-word;
  }
  .hsl-2col-rows .hsl-picto-row-wrapper .hsl-pane-2 .picto,
  .hsl-2col-rows .hsl-picto-row-wrapper .hsl-pane-4 .picto {
    /* Span 1 column, starting in 2nd column from left. */
    float: left;
    width: 50%;
    margin-left: 50%;
    margin-right: -100%;
    padding-left: 5px;
    padding-right: 5px;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
    word-wrap: break-word;
  }
}
.hsl-2col-rows .panel-panel.panel-col-bottom .hsl-picto-row-wrapper .hsl-pane-1 .picto {
  clear: left;
  /* Span 1 column, starting in 1st column from left. */
  float: left;
  width: 12.5%;
  margin-left: 0%;
  margin-right: -12.5%;
  padding-left: 5px;
  padding-right: 5px;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
  word-wrap: break-word;
}
.hsl-2col-rows .panel-panel.panel-col-bottom .hsl-picto-row-wrapper .hsl-pane-2 .picto {
  /* Span 1 column, starting in 2nd column from left. */
  float: left;
  width: 12.5%;
  margin-left: 12.5%;
  margin-right: -25%;
  padding-left: 5px;
  padding-right: 5px;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
  word-wrap: break-word;
}
.hsl-2col-rows .panel-panel.panel-col-bottom .hsl-picto-row-wrapper .hsl-pane-3 .picto {
  /* Span 1 column, starting in 3rd column from left. */
  float: left;
  width: 12.5%;
  margin-left: 25%;
  margin-right: -37.5%;
  padding-left: 5px;
  padding-right: 5px;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
  word-wrap: break-word;
}
.hsl-2col-rows .panel-panel.panel-col-bottom .hsl-picto-row-wrapper .hsl-pane-4 .picto {
  /* Span 1 column, starting in 4th column from left. */
  float: left;
  width: 12.5%;
  margin-left: 37.5%;
  margin-right: -50%;
  padding-left: 5px;
  padding-right: 5px;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
  word-wrap: break-word;
}
.hsl-2col-rows .panel-panel.panel-col-bottom .hsl-picto-row-wrapper .hsl-pane-5 .picto {
  /* Span 1 column, starting in 5th column from left. */
  float: left;
  width: 12.5%;
  margin-left: 50%;
  margin-right: -62.5%;
  padding-left: 5px;
  padding-right: 5px;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
  word-wrap: break-word;
}
.hsl-2col-rows .panel-panel.panel-col-bottom .hsl-picto-row-wrapper .hsl-pane-6 .picto {
  /* Span 1 column, starting in 6th column from left. */
  float: left;
  width: 12.5%;
  margin-left: 62.5%;
  margin-right: -75%;
  padding-left: 5px;
  padding-right: 5px;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
  word-wrap: break-word;
}
.hsl-2col-rows .panel-panel.panel-col-bottom .hsl-picto-row-wrapper .hsl-pane-7 .picto {
  /* Span 1 column, starting in 7th column from left. */
  float: left;
  width: 12.5%;
  margin-left: 75%;
  margin-right: -87.5%;
  padding-left: 5px;
  padding-right: 5px;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
  word-wrap: break-word;
}
.hsl-2col-rows .panel-panel.panel-col-bottom .hsl-picto-row-wrapper .hsl-pane-8 .picto {
  /* Span 1 column, starting in 8th column from left. */
  float: left;
  width: 12.5%;
  margin-left: 87.5%;
  margin-right: -100%;
  padding-left: 5px;
  padding-right: 5px;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
  word-wrap: break-word;
}
@media all and (min-width: 768px) and (max-width: 959px) {
  .hsl-2col-rows .panel-panel.panel-col-bottom .hsl-picto-row-wrapper .hsl-pane-1 .picto,
  .hsl-2col-rows .panel-panel.panel-col-bottom .hsl-picto-row-wrapper .hsl-pane-5 .picto {
    /* Span 1 column, starting in 1st column from left. */
    float: left;
    width: 25%;
    margin-left: 0%;
    margin-right: -25%;
    padding-left: 5px;
    padding-right: 5px;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
    word-wrap: break-word;
    clear: none;
  }
  .hsl-2col-rows .panel-panel.panel-col-bottom .hsl-picto-row-wrapper .hsl-pane-2 .picto,
  .hsl-2col-rows .panel-panel.panel-col-bottom .hsl-picto-row-wrapper .hsl-pane-6 .picto {
    /* Span 1 column, starting in 2nd column from left. */
    float: left;
    width: 25%;
    margin-left: 25%;
    margin-right: -50%;
    padding-left: 5px;
    padding-right: 5px;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
    word-wrap: break-word;
    clear: none;
  }
  .hsl-2col-rows .panel-panel.panel-col-bottom .hsl-picto-row-wrapper .hsl-pane-3 .picto,
  .hsl-2col-rows .panel-panel.panel-col-bottom .hsl-picto-row-wrapper .hsl-pane-7 .picto {
    /* Span 1 column, starting in 1st column from left. */
    float: left;
    width: 25%;
    margin-left: 50%;
    margin-right: -75%;
    padding-left: 5px;
    padding-right: 5px;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
    word-wrap: break-word;
    clear: none;
  }
  .hsl-2col-rows .panel-panel.panel-col-bottom .hsl-picto-row-wrapper .hsl-pane-4 .picto,
  .hsl-2col-rows .panel-panel.panel-col-bottom .hsl-picto-row-wrapper .hsl-pane-8 .picto {
    /* Span 1 column, starting in 2nd column from left. */
    float: left;
    width: 25%;
    margin-left: 75%;
    margin-right: -100%;
    padding-left: 5px;
    padding-right: 5px;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
    word-wrap: break-word;
    clear: none;
  }
  .hsl-2col-rows .panel-panel.panel-col-bottom .hsl-picto-row-wrapper .hsl-pane-1 .picto,
  .hsl-2col-rows .panel-panel.panel-col-bottom .hsl-picto-row-wrapper .hsl-pane-5 .picto {
    clear: left;
  }
}
@media all and (max-width: 767px) {
  .hsl-2col-rows .panel-panel.panel-col-bottom .hsl-picto-row-wrapper .hsl-pane-1 .picto,
  .hsl-2col-rows .panel-panel.panel-col-bottom .hsl-picto-row-wrapper .hsl-pane-3 .picto,
  .hsl-2col-rows .panel-panel.panel-col-bottom .hsl-picto-row-wrapper .hsl-pane-5 .picto,
  .hsl-2col-rows .panel-panel.panel-col-bottom .hsl-picto-row-wrapper .hsl-pane-7 .picto {
    clear: left;
    /* Span 1 column, starting in 1st column from left. */
    float: left;
    width: 50%;
    margin-left: 0%;
    margin-right: -50%;
    padding-left: 5px;
    padding-right: 5px;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
    word-wrap: break-word;
  }
  .hsl-2col-rows .panel-panel.panel-col-bottom .hsl-picto-row-wrapper .hsl-pane-2 .picto,
  .hsl-2col-rows .panel-panel.panel-col-bottom .hsl-picto-row-wrapper .hsl-pane-4 .picto,
  .hsl-2col-rows .panel-panel.panel-col-bottom .hsl-picto-row-wrapper .hsl-pane-6 .picto,
  .hsl-2col-rows .panel-panel.panel-col-bottom .hsl-picto-row-wrapper .hsl-pane-8 .picto {
    /* Span 1 column, starting in 2nd column from left. */
    float: left;
    width: 50%;
    margin-left: 50%;
    margin-right: -100%;
    padding-left: 5px;
    padding-right: 5px;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
    word-wrap: break-word;
  }
}