/*  Accent sur les bleus */
/*$primary-color        : hsl(211, 39%, 23%);
$secondary-color      : hsl(211, 39%, 23%)43;

$darkgray             : hsl(209, 61%, 16%);
$darkestgray             : hsl(209, 61%, 16%);
$mediumgray           : hsl(209, 28%, 39%);
$lightgray            : #BCCCDC;
$extralightgray       : hsl(210, 36%, 96%);
*/
/* Neutre et gris */
/* Status de couleurs : */
html {
  height: 100%;
}

html, body {
  margin: 0;
  padding: 0;
  min-height: 100%;
  position: relative;
  width: auto;
}

menu {
  margin: 0;
}

h1, h2, h3, h4, h5 {
  weight: normal;
  font-size: 1em;
  margin-top: 0px;
  margin-bottom: 0px;
}

.container {
  max-width: 1024px;
  margin: 0 auto 0 auto;
  width: 100%;
  position: relative;
}

.micro12, .tiny12, .small12, .medium12, .large12, .extralarge12 {
  width: 100%;
}

.micro11, .tiny11, .small11, .medium11, .large11, .extralarge11 {
  width: 100%;
}

.micro10, .tiny10, .small10, .medium10, .large10, .extralarge10 {
  width: 100%;
}

.micro9, .tiny9, .small9, .medium9, .large9, .extralarge9 {
  width: 100%;
}

.micro8, .tiny8, .small8, .medium8, .large8, .extralarge8 {
  width: 100%;
}

.micro7, .tiny7, .small7, .medium7, .large7, .extralarge7 {
  width: 100%;
}

.micro6, .tiny6, .small6, .medium6, .large6, .extralarge6 {
  width: 100%;
}

.micro5, .tiny5, .small5, .medium5, .large5, .extralarge5 {
  width: 100%;
}

.micro4, .tiny4, .small4, .medium4, .large4, .extralarge4 {
  width: 100%;
}

.micro3, .tiny3, .small3, .medium3, .large3, .extralarge3 {
  width: 100%;
}

.micro2, .tiny2, .small2, .medium2, .large2, .extralarge2 {
  width: 100%;
}

.micro1, .tiny1, .small1, .medium1, .large1, .extralarge1 {
  width: 100%;
}

/*
GENERATE COLUMNS CLASSES
*/
.micro12 {
  transition: width 0.3s;
  -moz-transition: width 0.3s;
  -webkit-transition: width 0.3s;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  padding-left: 0.5em;
  padding-right: 0.5em;
  position: relative;
  float: left;
}

@media only screen and (min-width: 320px) {
  .micro12 {
    width: 100%;
  }
}
@media only print and (min-width: 52mm) {
  .micro12 {
    width: 100%;
  }
}
.micro11 {
  transition: width 0.3s;
  -moz-transition: width 0.3s;
  -webkit-transition: width 0.3s;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  padding-left: 0.5em;
  padding-right: 0.5em;
  position: relative;
  float: left;
}

@media only screen and (min-width: 320px) {
  .micro11 {
    width: 91.66667%;
  }
}
@media only print and (min-width: 52mm) {
  .micro11 {
    width: 91.66667%;
  }
}
.micro10 {
  transition: width 0.3s;
  -moz-transition: width 0.3s;
  -webkit-transition: width 0.3s;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  padding-left: 0.5em;
  padding-right: 0.5em;
  position: relative;
  float: left;
}

@media only screen and (min-width: 320px) {
  .micro10 {
    width: 83.33333%;
  }
}
@media only print and (min-width: 52mm) {
  .micro10 {
    width: 83.33333%;
  }
}
.micro9 {
  transition: width 0.3s;
  -moz-transition: width 0.3s;
  -webkit-transition: width 0.3s;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  padding-left: 0.5em;
  padding-right: 0.5em;
  position: relative;
  float: left;
}

@media only screen and (min-width: 320px) {
  .micro9 {
    width: 75%;
  }
}
@media only print and (min-width: 52mm) {
  .micro9 {
    width: 75%;
  }
}
.micro8 {
  transition: width 0.3s;
  -moz-transition: width 0.3s;
  -webkit-transition: width 0.3s;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  padding-left: 0.5em;
  padding-right: 0.5em;
  position: relative;
  float: left;
}

@media only screen and (min-width: 320px) {
  .micro8 {
    width: 66.66667%;
  }
}
@media only print and (min-width: 52mm) {
  .micro8 {
    width: 66.66667%;
  }
}
.micro7 {
  transition: width 0.3s;
  -moz-transition: width 0.3s;
  -webkit-transition: width 0.3s;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  padding-left: 0.5em;
  padding-right: 0.5em;
  position: relative;
  float: left;
}

@media only screen and (min-width: 320px) {
  .micro7 {
    width: 58.33333%;
  }
}
@media only print and (min-width: 52mm) {
  .micro7 {
    width: 58.33333%;
  }
}
.micro6 {
  transition: width 0.3s;
  -moz-transition: width 0.3s;
  -webkit-transition: width 0.3s;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  padding-left: 0.5em;
  padding-right: 0.5em;
  position: relative;
  float: left;
}

@media only screen and (min-width: 320px) {
  .micro6 {
    width: 50%;
  }
}
@media only print and (min-width: 52mm) {
  .micro6 {
    width: 50%;
  }
}
.micro5 {
  transition: width 0.3s;
  -moz-transition: width 0.3s;
  -webkit-transition: width 0.3s;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  padding-left: 0.5em;
  padding-right: 0.5em;
  position: relative;
  float: left;
}

@media only screen and (min-width: 320px) {
  .micro5 {
    width: 41.66667%;
  }
}
@media only print and (min-width: 52mm) {
  .micro5 {
    width: 41.66667%;
  }
}
.micro4 {
  transition: width 0.3s;
  -moz-transition: width 0.3s;
  -webkit-transition: width 0.3s;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  padding-left: 0.5em;
  padding-right: 0.5em;
  position: relative;
  float: left;
}

@media only screen and (min-width: 320px) {
  .micro4 {
    width: 33.33333%;
  }
}
@media only print and (min-width: 52mm) {
  .micro4 {
    width: 33.33333%;
  }
}
.micro3 {
  transition: width 0.3s;
  -moz-transition: width 0.3s;
  -webkit-transition: width 0.3s;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  padding-left: 0.5em;
  padding-right: 0.5em;
  position: relative;
  float: left;
}

@media only screen and (min-width: 320px) {
  .micro3 {
    width: 25%;
  }
}
@media only print and (min-width: 52mm) {
  .micro3 {
    width: 25%;
  }
}
.micro2 {
  transition: width 0.3s;
  -moz-transition: width 0.3s;
  -webkit-transition: width 0.3s;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  padding-left: 0.5em;
  padding-right: 0.5em;
  position: relative;
  float: left;
}

@media only screen and (min-width: 320px) {
  .micro2 {
    width: 16.66667%;
  }
}
@media only print and (min-width: 52mm) {
  .micro2 {
    width: 16.66667%;
  }
}
.micro1 {
  transition: width 0.3s;
  -moz-transition: width 0.3s;
  -webkit-transition: width 0.3s;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  padding-left: 0.5em;
  padding-right: 0.5em;
  position: relative;
  float: left;
}

@media only screen and (min-width: 320px) {
  .micro1 {
    width: 8.33333%;
  }
}
@media only print and (min-width: 52mm) {
  .micro1 {
    width: 8.33333%;
  }
}
.tiny12 {
  transition: width 0.3s;
  -moz-transition: width 0.3s;
  -webkit-transition: width 0.3s;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  padding-left: 0.5em;
  padding-right: 0.5em;
  position: relative;
  float: left;
}

@media only screen and (min-width: 481px) {
  .tiny12 {
    width: 100%;
  }
}
@media only print and (min-width: 74mm) {
  .tiny12 {
    width: 100%;
  }
}
.tiny11 {
  transition: width 0.3s;
  -moz-transition: width 0.3s;
  -webkit-transition: width 0.3s;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  padding-left: 0.5em;
  padding-right: 0.5em;
  position: relative;
  float: left;
}

@media only screen and (min-width: 481px) {
  .tiny11 {
    width: 91.66667%;
  }
}
@media only print and (min-width: 74mm) {
  .tiny11 {
    width: 91.66667%;
  }
}
.tiny10 {
  transition: width 0.3s;
  -moz-transition: width 0.3s;
  -webkit-transition: width 0.3s;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  padding-left: 0.5em;
  padding-right: 0.5em;
  position: relative;
  float: left;
}

@media only screen and (min-width: 481px) {
  .tiny10 {
    width: 83.33333%;
  }
}
@media only print and (min-width: 74mm) {
  .tiny10 {
    width: 83.33333%;
  }
}
.tiny9 {
  transition: width 0.3s;
  -moz-transition: width 0.3s;
  -webkit-transition: width 0.3s;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  padding-left: 0.5em;
  padding-right: 0.5em;
  position: relative;
  float: left;
}

@media only screen and (min-width: 481px) {
  .tiny9 {
    width: 75%;
  }
}
@media only print and (min-width: 74mm) {
  .tiny9 {
    width: 75%;
  }
}
.tiny8 {
  transition: width 0.3s;
  -moz-transition: width 0.3s;
  -webkit-transition: width 0.3s;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  padding-left: 0.5em;
  padding-right: 0.5em;
  position: relative;
  float: left;
}

@media only screen and (min-width: 481px) {
  .tiny8 {
    width: 66.66667%;
  }
}
@media only print and (min-width: 74mm) {
  .tiny8 {
    width: 66.66667%;
  }
}
.tiny7 {
  transition: width 0.3s;
  -moz-transition: width 0.3s;
  -webkit-transition: width 0.3s;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  padding-left: 0.5em;
  padding-right: 0.5em;
  position: relative;
  float: left;
}

@media only screen and (min-width: 481px) {
  .tiny7 {
    width: 58.33333%;
  }
}
@media only print and (min-width: 74mm) {
  .tiny7 {
    width: 58.33333%;
  }
}
.tiny6 {
  transition: width 0.3s;
  -moz-transition: width 0.3s;
  -webkit-transition: width 0.3s;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  padding-left: 0.5em;
  padding-right: 0.5em;
  position: relative;
  float: left;
}

@media only screen and (min-width: 481px) {
  .tiny6 {
    width: 50%;
  }
}
@media only print and (min-width: 74mm) {
  .tiny6 {
    width: 50%;
  }
}
.tiny5 {
  transition: width 0.3s;
  -moz-transition: width 0.3s;
  -webkit-transition: width 0.3s;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  padding-left: 0.5em;
  padding-right: 0.5em;
  position: relative;
  float: left;
}

@media only screen and (min-width: 481px) {
  .tiny5 {
    width: 41.66667%;
  }
}
@media only print and (min-width: 74mm) {
  .tiny5 {
    width: 41.66667%;
  }
}
.tiny4 {
  transition: width 0.3s;
  -moz-transition: width 0.3s;
  -webkit-transition: width 0.3s;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  padding-left: 0.5em;
  padding-right: 0.5em;
  position: relative;
  float: left;
}

@media only screen and (min-width: 481px) {
  .tiny4 {
    width: 33.33333%;
  }
}
@media only print and (min-width: 74mm) {
  .tiny4 {
    width: 33.33333%;
  }
}
.tiny3 {
  transition: width 0.3s;
  -moz-transition: width 0.3s;
  -webkit-transition: width 0.3s;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  padding-left: 0.5em;
  padding-right: 0.5em;
  position: relative;
  float: left;
}

@media only screen and (min-width: 481px) {
  .tiny3 {
    width: 25%;
  }
}
@media only print and (min-width: 74mm) {
  .tiny3 {
    width: 25%;
  }
}
.tiny2 {
  transition: width 0.3s;
  -moz-transition: width 0.3s;
  -webkit-transition: width 0.3s;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  padding-left: 0.5em;
  padding-right: 0.5em;
  position: relative;
  float: left;
}

@media only screen and (min-width: 481px) {
  .tiny2 {
    width: 16.66667%;
  }
}
@media only print and (min-width: 74mm) {
  .tiny2 {
    width: 16.66667%;
  }
}
.tiny1 {
  transition: width 0.3s;
  -moz-transition: width 0.3s;
  -webkit-transition: width 0.3s;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  padding-left: 0.5em;
  padding-right: 0.5em;
  position: relative;
  float: left;
}

@media only screen and (min-width: 481px) {
  .tiny1 {
    width: 8.33333%;
  }
}
@media only print and (min-width: 74mm) {
  .tiny1 {
    width: 8.33333%;
  }
}
.small12 {
  transition: width 0.3s;
  -moz-transition: width 0.3s;
  -webkit-transition: width 0.3s;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  padding-left: 0.5em;
  padding-right: 0.5em;
  position: relative;
  float: left;
}

@media only screen and (min-width: 641px) {
  .small12 {
    width: 100%;
  }
}
@media only print and (min-width: 105mm) {
  .small12 {
    width: 100%;
  }
}
.small11 {
  transition: width 0.3s;
  -moz-transition: width 0.3s;
  -webkit-transition: width 0.3s;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  padding-left: 0.5em;
  padding-right: 0.5em;
  position: relative;
  float: left;
}

@media only screen and (min-width: 641px) {
  .small11 {
    width: 91.66667%;
  }
}
@media only print and (min-width: 105mm) {
  .small11 {
    width: 91.66667%;
  }
}
.small10 {
  transition: width 0.3s;
  -moz-transition: width 0.3s;
  -webkit-transition: width 0.3s;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  padding-left: 0.5em;
  padding-right: 0.5em;
  position: relative;
  float: left;
}

@media only screen and (min-width: 641px) {
  .small10 {
    width: 83.33333%;
  }
}
@media only print and (min-width: 105mm) {
  .small10 {
    width: 83.33333%;
  }
}
.small9 {
  transition: width 0.3s;
  -moz-transition: width 0.3s;
  -webkit-transition: width 0.3s;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  padding-left: 0.5em;
  padding-right: 0.5em;
  position: relative;
  float: left;
}

@media only screen and (min-width: 641px) {
  .small9 {
    width: 75%;
  }
}
@media only print and (min-width: 105mm) {
  .small9 {
    width: 75%;
  }
}
.small8 {
  transition: width 0.3s;
  -moz-transition: width 0.3s;
  -webkit-transition: width 0.3s;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  padding-left: 0.5em;
  padding-right: 0.5em;
  position: relative;
  float: left;
}

@media only screen and (min-width: 641px) {
  .small8 {
    width: 66.66667%;
  }
}
@media only print and (min-width: 105mm) {
  .small8 {
    width: 66.66667%;
  }
}
.small7 {
  transition: width 0.3s;
  -moz-transition: width 0.3s;
  -webkit-transition: width 0.3s;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  padding-left: 0.5em;
  padding-right: 0.5em;
  position: relative;
  float: left;
}

@media only screen and (min-width: 641px) {
  .small7 {
    width: 58.33333%;
  }
}
@media only print and (min-width: 105mm) {
  .small7 {
    width: 58.33333%;
  }
}
.small6 {
  transition: width 0.3s;
  -moz-transition: width 0.3s;
  -webkit-transition: width 0.3s;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  padding-left: 0.5em;
  padding-right: 0.5em;
  position: relative;
  float: left;
}

@media only screen and (min-width: 641px) {
  .small6 {
    width: 50%;
  }
}
@media only print and (min-width: 105mm) {
  .small6 {
    width: 50%;
  }
}
.small5 {
  transition: width 0.3s;
  -moz-transition: width 0.3s;
  -webkit-transition: width 0.3s;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  padding-left: 0.5em;
  padding-right: 0.5em;
  position: relative;
  float: left;
}

@media only screen and (min-width: 641px) {
  .small5 {
    width: 41.66667%;
  }
}
@media only print and (min-width: 105mm) {
  .small5 {
    width: 41.66667%;
  }
}
.small4 {
  transition: width 0.3s;
  -moz-transition: width 0.3s;
  -webkit-transition: width 0.3s;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  padding-left: 0.5em;
  padding-right: 0.5em;
  position: relative;
  float: left;
}

@media only screen and (min-width: 641px) {
  .small4 {
    width: 33.33333%;
  }
}
@media only print and (min-width: 105mm) {
  .small4 {
    width: 33.33333%;
  }
}
.small3 {
  transition: width 0.3s;
  -moz-transition: width 0.3s;
  -webkit-transition: width 0.3s;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  padding-left: 0.5em;
  padding-right: 0.5em;
  position: relative;
  float: left;
}

@media only screen and (min-width: 641px) {
  .small3 {
    width: 25%;
  }
}
@media only print and (min-width: 105mm) {
  .small3 {
    width: 25%;
  }
}
.small2 {
  transition: width 0.3s;
  -moz-transition: width 0.3s;
  -webkit-transition: width 0.3s;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  padding-left: 0.5em;
  padding-right: 0.5em;
  position: relative;
  float: left;
}

@media only screen and (min-width: 641px) {
  .small2 {
    width: 16.66667%;
  }
}
@media only print and (min-width: 105mm) {
  .small2 {
    width: 16.66667%;
  }
}
.small1 {
  transition: width 0.3s;
  -moz-transition: width 0.3s;
  -webkit-transition: width 0.3s;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  padding-left: 0.5em;
  padding-right: 0.5em;
  position: relative;
  float: left;
}

@media only screen and (min-width: 641px) {
  .small1 {
    width: 8.33333%;
  }
}
@media only print and (min-width: 105mm) {
  .small1 {
    width: 8.33333%;
  }
}
.medium12 {
  transition: width 0.3s;
  -moz-transition: width 0.3s;
  -webkit-transition: width 0.3s;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  padding-left: 0.5em;
  padding-right: 0.5em;
  position: relative;
  float: left;
}

@media only screen and (min-width: 961px) {
  .medium12 {
    width: 100%;
  }
}
@media only print and (min-width: 148mm) {
  .medium12 {
    width: 100%;
  }
}
.medium11 {
  transition: width 0.3s;
  -moz-transition: width 0.3s;
  -webkit-transition: width 0.3s;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  padding-left: 0.5em;
  padding-right: 0.5em;
  position: relative;
  float: left;
}

@media only screen and (min-width: 961px) {
  .medium11 {
    width: 91.66667%;
  }
}
@media only print and (min-width: 148mm) {
  .medium11 {
    width: 91.66667%;
  }
}
.medium10 {
  transition: width 0.3s;
  -moz-transition: width 0.3s;
  -webkit-transition: width 0.3s;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  padding-left: 0.5em;
  padding-right: 0.5em;
  position: relative;
  float: left;
}

@media only screen and (min-width: 961px) {
  .medium10 {
    width: 83.33333%;
  }
}
@media only print and (min-width: 148mm) {
  .medium10 {
    width: 83.33333%;
  }
}
.medium9 {
  transition: width 0.3s;
  -moz-transition: width 0.3s;
  -webkit-transition: width 0.3s;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  padding-left: 0.5em;
  padding-right: 0.5em;
  position: relative;
  float: left;
}

@media only screen and (min-width: 961px) {
  .medium9 {
    width: 75%;
  }
}
@media only print and (min-width: 148mm) {
  .medium9 {
    width: 75%;
  }
}
.medium8 {
  transition: width 0.3s;
  -moz-transition: width 0.3s;
  -webkit-transition: width 0.3s;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  padding-left: 0.5em;
  padding-right: 0.5em;
  position: relative;
  float: left;
}

@media only screen and (min-width: 961px) {
  .medium8 {
    width: 66.66667%;
  }
}
@media only print and (min-width: 148mm) {
  .medium8 {
    width: 66.66667%;
  }
}
.medium7 {
  transition: width 0.3s;
  -moz-transition: width 0.3s;
  -webkit-transition: width 0.3s;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  padding-left: 0.5em;
  padding-right: 0.5em;
  position: relative;
  float: left;
}

@media only screen and (min-width: 961px) {
  .medium7 {
    width: 58.33333%;
  }
}
@media only print and (min-width: 148mm) {
  .medium7 {
    width: 58.33333%;
  }
}
.medium6 {
  transition: width 0.3s;
  -moz-transition: width 0.3s;
  -webkit-transition: width 0.3s;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  padding-left: 0.5em;
  padding-right: 0.5em;
  position: relative;
  float: left;
}

@media only screen and (min-width: 961px) {
  .medium6 {
    width: 50%;
  }
}
@media only print and (min-width: 148mm) {
  .medium6 {
    width: 50%;
  }
}
.medium5 {
  transition: width 0.3s;
  -moz-transition: width 0.3s;
  -webkit-transition: width 0.3s;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  padding-left: 0.5em;
  padding-right: 0.5em;
  position: relative;
  float: left;
}

@media only screen and (min-width: 961px) {
  .medium5 {
    width: 41.66667%;
  }
}
@media only print and (min-width: 148mm) {
  .medium5 {
    width: 41.66667%;
  }
}
.medium4 {
  transition: width 0.3s;
  -moz-transition: width 0.3s;
  -webkit-transition: width 0.3s;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  padding-left: 0.5em;
  padding-right: 0.5em;
  position: relative;
  float: left;
}

@media only screen and (min-width: 961px) {
  .medium4 {
    width: 33.33333%;
  }
}
@media only print and (min-width: 148mm) {
  .medium4 {
    width: 33.33333%;
  }
}
.medium3 {
  transition: width 0.3s;
  -moz-transition: width 0.3s;
  -webkit-transition: width 0.3s;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  padding-left: 0.5em;
  padding-right: 0.5em;
  position: relative;
  float: left;
}

@media only screen and (min-width: 961px) {
  .medium3 {
    width: 25%;
  }
}
@media only print and (min-width: 148mm) {
  .medium3 {
    width: 25%;
  }
}
.medium2 {
  transition: width 0.3s;
  -moz-transition: width 0.3s;
  -webkit-transition: width 0.3s;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  padding-left: 0.5em;
  padding-right: 0.5em;
  position: relative;
  float: left;
}

@media only screen and (min-width: 961px) {
  .medium2 {
    width: 16.66667%;
  }
}
@media only print and (min-width: 148mm) {
  .medium2 {
    width: 16.66667%;
  }
}
.medium1 {
  transition: width 0.3s;
  -moz-transition: width 0.3s;
  -webkit-transition: width 0.3s;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  padding-left: 0.5em;
  padding-right: 0.5em;
  position: relative;
  float: left;
}

@media only screen and (min-width: 961px) {
  .medium1 {
    width: 8.33333%;
  }
}
@media only print and (min-width: 148mm) {
  .medium1 {
    width: 8.33333%;
  }
}
.large12 {
  transition: width 0.3s;
  -moz-transition: width 0.3s;
  -webkit-transition: width 0.3s;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  padding-left: 0.5em;
  padding-right: 0.5em;
  position: relative;
  float: left;
}

@media only screen and (min-width: 1025px) {
  .large12 {
    width: 100%;
  }
}
@media only print and (min-width: 210mm) {
  .large12 {
    width: 100%;
  }
}
.large11 {
  transition: width 0.3s;
  -moz-transition: width 0.3s;
  -webkit-transition: width 0.3s;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  padding-left: 0.5em;
  padding-right: 0.5em;
  position: relative;
  float: left;
}

@media only screen and (min-width: 1025px) {
  .large11 {
    width: 91.66667%;
  }
}
@media only print and (min-width: 210mm) {
  .large11 {
    width: 91.66667%;
  }
}
.large10 {
  transition: width 0.3s;
  -moz-transition: width 0.3s;
  -webkit-transition: width 0.3s;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  padding-left: 0.5em;
  padding-right: 0.5em;
  position: relative;
  float: left;
}

@media only screen and (min-width: 1025px) {
  .large10 {
    width: 83.33333%;
  }
}
@media only print and (min-width: 210mm) {
  .large10 {
    width: 83.33333%;
  }
}
.large9 {
  transition: width 0.3s;
  -moz-transition: width 0.3s;
  -webkit-transition: width 0.3s;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  padding-left: 0.5em;
  padding-right: 0.5em;
  position: relative;
  float: left;
}

@media only screen and (min-width: 1025px) {
  .large9 {
    width: 75%;
  }
}
@media only print and (min-width: 210mm) {
  .large9 {
    width: 75%;
  }
}
.large8 {
  transition: width 0.3s;
  -moz-transition: width 0.3s;
  -webkit-transition: width 0.3s;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  padding-left: 0.5em;
  padding-right: 0.5em;
  position: relative;
  float: left;
}

@media only screen and (min-width: 1025px) {
  .large8 {
    width: 66.66667%;
  }
}
@media only print and (min-width: 210mm) {
  .large8 {
    width: 66.66667%;
  }
}
.large7 {
  transition: width 0.3s;
  -moz-transition: width 0.3s;
  -webkit-transition: width 0.3s;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  padding-left: 0.5em;
  padding-right: 0.5em;
  position: relative;
  float: left;
}

@media only screen and (min-width: 1025px) {
  .large7 {
    width: 58.33333%;
  }
}
@media only print and (min-width: 210mm) {
  .large7 {
    width: 58.33333%;
  }
}
.large6 {
  transition: width 0.3s;
  -moz-transition: width 0.3s;
  -webkit-transition: width 0.3s;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  padding-left: 0.5em;
  padding-right: 0.5em;
  position: relative;
  float: left;
}

@media only screen and (min-width: 1025px) {
  .large6 {
    width: 50%;
  }
}
@media only print and (min-width: 210mm) {
  .large6 {
    width: 50%;
  }
}
.large5 {
  transition: width 0.3s;
  -moz-transition: width 0.3s;
  -webkit-transition: width 0.3s;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  padding-left: 0.5em;
  padding-right: 0.5em;
  position: relative;
  float: left;
}

@media only screen and (min-width: 1025px) {
  .large5 {
    width: 41.66667%;
  }
}
@media only print and (min-width: 210mm) {
  .large5 {
    width: 41.66667%;
  }
}
.large4 {
  transition: width 0.3s;
  -moz-transition: width 0.3s;
  -webkit-transition: width 0.3s;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  padding-left: 0.5em;
  padding-right: 0.5em;
  position: relative;
  float: left;
}

@media only screen and (min-width: 1025px) {
  .large4 {
    width: 33.33333%;
  }
}
@media only print and (min-width: 210mm) {
  .large4 {
    width: 33.33333%;
  }
}
.large3 {
  transition: width 0.3s;
  -moz-transition: width 0.3s;
  -webkit-transition: width 0.3s;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  padding-left: 0.5em;
  padding-right: 0.5em;
  position: relative;
  float: left;
}

@media only screen and (min-width: 1025px) {
  .large3 {
    width: 25%;
  }
}
@media only print and (min-width: 210mm) {
  .large3 {
    width: 25%;
  }
}
.large2 {
  transition: width 0.3s;
  -moz-transition: width 0.3s;
  -webkit-transition: width 0.3s;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  padding-left: 0.5em;
  padding-right: 0.5em;
  position: relative;
  float: left;
}

@media only screen and (min-width: 1025px) {
  .large2 {
    width: 16.66667%;
  }
}
@media only print and (min-width: 210mm) {
  .large2 {
    width: 16.66667%;
  }
}
.large1 {
  transition: width 0.3s;
  -moz-transition: width 0.3s;
  -webkit-transition: width 0.3s;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  padding-left: 0.5em;
  padding-right: 0.5em;
  position: relative;
  float: left;
}

@media only screen and (min-width: 1025px) {
  .large1 {
    width: 8.33333%;
  }
}
@media only print and (min-width: 210mm) {
  .large1 {
    width: 8.33333%;
  }
}
.extralarge12 {
  transition: width 0.3s;
  -moz-transition: width 0.3s;
  -webkit-transition: width 0.3s;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  padding-left: 0.5em;
  padding-right: 0.5em;
  position: relative;
  float: left;
}

@media only screen and (min-width: 1281px) {
  .extralarge12 {
    width: 100%;
  }
}
@media only print and (min-width: 297mm) {
  .extralarge12 {
    width: 100%;
  }
}
.extralarge11 {
  transition: width 0.3s;
  -moz-transition: width 0.3s;
  -webkit-transition: width 0.3s;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  padding-left: 0.5em;
  padding-right: 0.5em;
  position: relative;
  float: left;
}

@media only screen and (min-width: 1281px) {
  .extralarge11 {
    width: 91.66667%;
  }
}
@media only print and (min-width: 297mm) {
  .extralarge11 {
    width: 91.66667%;
  }
}
.extralarge10 {
  transition: width 0.3s;
  -moz-transition: width 0.3s;
  -webkit-transition: width 0.3s;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  padding-left: 0.5em;
  padding-right: 0.5em;
  position: relative;
  float: left;
}

@media only screen and (min-width: 1281px) {
  .extralarge10 {
    width: 83.33333%;
  }
}
@media only print and (min-width: 297mm) {
  .extralarge10 {
    width: 83.33333%;
  }
}
.extralarge9 {
  transition: width 0.3s;
  -moz-transition: width 0.3s;
  -webkit-transition: width 0.3s;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  padding-left: 0.5em;
  padding-right: 0.5em;
  position: relative;
  float: left;
}

@media only screen and (min-width: 1281px) {
  .extralarge9 {
    width: 75%;
  }
}
@media only print and (min-width: 297mm) {
  .extralarge9 {
    width: 75%;
  }
}
.extralarge8 {
  transition: width 0.3s;
  -moz-transition: width 0.3s;
  -webkit-transition: width 0.3s;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  padding-left: 0.5em;
  padding-right: 0.5em;
  position: relative;
  float: left;
}

@media only screen and (min-width: 1281px) {
  .extralarge8 {
    width: 66.66667%;
  }
}
@media only print and (min-width: 297mm) {
  .extralarge8 {
    width: 66.66667%;
  }
}
.extralarge7 {
  transition: width 0.3s;
  -moz-transition: width 0.3s;
  -webkit-transition: width 0.3s;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  padding-left: 0.5em;
  padding-right: 0.5em;
  position: relative;
  float: left;
}

@media only screen and (min-width: 1281px) {
  .extralarge7 {
    width: 58.33333%;
  }
}
@media only print and (min-width: 297mm) {
  .extralarge7 {
    width: 58.33333%;
  }
}
.extralarge6 {
  transition: width 0.3s;
  -moz-transition: width 0.3s;
  -webkit-transition: width 0.3s;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  padding-left: 0.5em;
  padding-right: 0.5em;
  position: relative;
  float: left;
}

@media only screen and (min-width: 1281px) {
  .extralarge6 {
    width: 50%;
  }
}
@media only print and (min-width: 297mm) {
  .extralarge6 {
    width: 50%;
  }
}
.extralarge5 {
  transition: width 0.3s;
  -moz-transition: width 0.3s;
  -webkit-transition: width 0.3s;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  padding-left: 0.5em;
  padding-right: 0.5em;
  position: relative;
  float: left;
}

@media only screen and (min-width: 1281px) {
  .extralarge5 {
    width: 41.66667%;
  }
}
@media only print and (min-width: 297mm) {
  .extralarge5 {
    width: 41.66667%;
  }
}
.extralarge4 {
  transition: width 0.3s;
  -moz-transition: width 0.3s;
  -webkit-transition: width 0.3s;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  padding-left: 0.5em;
  padding-right: 0.5em;
  position: relative;
  float: left;
}

@media only screen and (min-width: 1281px) {
  .extralarge4 {
    width: 33.33333%;
  }
}
@media only print and (min-width: 297mm) {
  .extralarge4 {
    width: 33.33333%;
  }
}
.extralarge3 {
  transition: width 0.3s;
  -moz-transition: width 0.3s;
  -webkit-transition: width 0.3s;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  padding-left: 0.5em;
  padding-right: 0.5em;
  position: relative;
  float: left;
}

@media only screen and (min-width: 1281px) {
  .extralarge3 {
    width: 25%;
  }
}
@media only print and (min-width: 297mm) {
  .extralarge3 {
    width: 25%;
  }
}
.extralarge2 {
  transition: width 0.3s;
  -moz-transition: width 0.3s;
  -webkit-transition: width 0.3s;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  padding-left: 0.5em;
  padding-right: 0.5em;
  position: relative;
  float: left;
}

@media only screen and (min-width: 1281px) {
  .extralarge2 {
    width: 16.66667%;
  }
}
@media only print and (min-width: 297mm) {
  .extralarge2 {
    width: 16.66667%;
  }
}
.extralarge1 {
  transition: width 0.3s;
  -moz-transition: width 0.3s;
  -webkit-transition: width 0.3s;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  padding-left: 0.5em;
  padding-right: 0.5em;
  position: relative;
  float: left;
}

@media only screen and (min-width: 1281px) {
  .extralarge1 {
    width: 8.33333%;
  }
}
@media only print and (min-width: 297mm) {
  .extralarge1 {
    width: 8.33333%;
  }
}
@media only screen and (min-width: 320px) {
  .microOffset1 {
    margin-left: 8.33333%;
  }
}
@media only screen and (min-width: 481px) {
  .tinyOffset1 {
    margin-left: 8.33333%;
  }
}
@media only screen and (min-width: 641px) {
  .smallOffset1 {
    margin-left: 8.33333%;
  }
}
@media only screen and (min-width: 961px) {
  .mediumOffset1 {
    margin-left: 8.33333%;
  }
}
@media only screen and (min-width: 1025px) {
  .largeOffset1 {
    margin-left: 8.33333%;
  }
}
@media only screen and (min-width: 1281px) {
  .extralargeOffset1 {
    margin-left: 8.33333%;
  }
}
@media only screen and (min-width: 320px) {
  .microOffset2 {
    margin-left: 16.66667%;
  }
}
@media only screen and (min-width: 481px) {
  .tinyOffset2 {
    margin-left: 16.66667%;
  }
}
@media only screen and (min-width: 641px) {
  .smallOffset2 {
    margin-left: 16.66667%;
  }
}
@media only screen and (min-width: 961px) {
  .mediumOffset2 {
    margin-left: 16.66667%;
  }
}
@media only screen and (min-width: 1025px) {
  .largeOffset2 {
    margin-left: 16.66667%;
  }
}
@media only screen and (min-width: 1281px) {
  .extralargeOffset2 {
    margin-left: 16.66667%;
  }
}
@media only screen and (min-width: 320px) {
  .microOffset3 {
    margin-left: 25%;
  }
}
@media only screen and (min-width: 481px) {
  .tinyOffset3 {
    margin-left: 25%;
  }
}
@media only screen and (min-width: 641px) {
  .smallOffset3 {
    margin-left: 25%;
  }
}
@media only screen and (min-width: 961px) {
  .mediumOffset3 {
    margin-left: 25%;
  }
}
@media only screen and (min-width: 1025px) {
  .largeOffset3 {
    margin-left: 25%;
  }
}
@media only screen and (min-width: 1281px) {
  .extralargeOffset3 {
    margin-left: 25%;
  }
}
@media only screen and (min-width: 320px) {
  .microOffset4 {
    margin-left: 33.33333%;
  }
}
@media only screen and (min-width: 481px) {
  .tinyOffset4 {
    margin-left: 33.33333%;
  }
}
@media only screen and (min-width: 641px) {
  .smallOffset4 {
    margin-left: 33.33333%;
  }
}
@media only screen and (min-width: 961px) {
  .mediumOffset4 {
    margin-left: 33.33333%;
  }
}
@media only screen and (min-width: 1025px) {
  .largeOffset4 {
    margin-left: 33.33333%;
  }
}
@media only screen and (min-width: 1281px) {
  .extralargeOffset4 {
    margin-left: 33.33333%;
  }
}
@media only screen and (min-width: 320px) {
  .microOffset5 {
    margin-left: 41.66667%;
  }
}
@media only screen and (min-width: 481px) {
  .tinyOffset5 {
    margin-left: 41.66667%;
  }
}
@media only screen and (min-width: 641px) {
  .smallOffset5 {
    margin-left: 41.66667%;
  }
}
@media only screen and (min-width: 961px) {
  .mediumOffset5 {
    margin-left: 41.66667%;
  }
}
@media only screen and (min-width: 1025px) {
  .largeOffset5 {
    margin-left: 41.66667%;
  }
}
@media only screen and (min-width: 1281px) {
  .extralargeOffset5 {
    margin-left: 41.66667%;
  }
}
@media only screen and (min-width: 320px) {
  .microOffset6 {
    margin-left: 50%;
  }
}
@media only screen and (min-width: 481px) {
  .tinyOffset6 {
    margin-left: 50%;
  }
}
@media only screen and (min-width: 641px) {
  .smallOffset6 {
    margin-left: 50%;
  }
}
@media only screen and (min-width: 961px) {
  .mediumOffset6 {
    margin-left: 50%;
  }
}
@media only screen and (min-width: 1025px) {
  .largeOffset6 {
    margin-left: 50%;
  }
}
@media only screen and (min-width: 1281px) {
  .extralargeOffset6 {
    margin-left: 50%;
  }
}
@media only screen and (min-width: 320px) {
  .microOffset7 {
    margin-left: 58.33333%;
  }
}
@media only screen and (min-width: 481px) {
  .tinyOffset7 {
    margin-left: 58.33333%;
  }
}
@media only screen and (min-width: 641px) {
  .smallOffset7 {
    margin-left: 58.33333%;
  }
}
@media only screen and (min-width: 961px) {
  .mediumOffset7 {
    margin-left: 58.33333%;
  }
}
@media only screen and (min-width: 1025px) {
  .largeOffset7 {
    margin-left: 58.33333%;
  }
}
@media only screen and (min-width: 1281px) {
  .extralargeOffset7 {
    margin-left: 58.33333%;
  }
}
@media only screen and (min-width: 320px) {
  .microOffset8 {
    margin-left: 66.66667%;
  }
}
@media only screen and (min-width: 481px) {
  .tinyOffset8 {
    margin-left: 66.66667%;
  }
}
@media only screen and (min-width: 641px) {
  .smallOffset8 {
    margin-left: 66.66667%;
  }
}
@media only screen and (min-width: 961px) {
  .mediumOffset8 {
    margin-left: 66.66667%;
  }
}
@media only screen and (min-width: 1025px) {
  .largeOffset8 {
    margin-left: 66.66667%;
  }
}
@media only screen and (min-width: 1281px) {
  .extralargeOffset8 {
    margin-left: 66.66667%;
  }
}
@media only screen and (min-width: 320px) {
  .microOffset9 {
    margin-left: 75%;
  }
}
@media only screen and (min-width: 481px) {
  .tinyOffset9 {
    margin-left: 75%;
  }
}
@media only screen and (min-width: 641px) {
  .smallOffset9 {
    margin-left: 75%;
  }
}
@media only screen and (min-width: 961px) {
  .mediumOffset9 {
    margin-left: 75%;
  }
}
@media only screen and (min-width: 1025px) {
  .largeOffset9 {
    margin-left: 75%;
  }
}
@media only screen and (min-width: 1281px) {
  .extralargeOffset9 {
    margin-left: 75%;
  }
}
@media only screen and (min-width: 320px) {
  .microOffset10 {
    margin-left: 83.33333%;
  }
}
@media only screen and (min-width: 481px) {
  .tinyOffset10 {
    margin-left: 83.33333%;
  }
}
@media only screen and (min-width: 641px) {
  .smallOffset10 {
    margin-left: 83.33333%;
  }
}
@media only screen and (min-width: 961px) {
  .mediumOffset10 {
    margin-left: 83.33333%;
  }
}
@media only screen and (min-width: 1025px) {
  .largeOffset10 {
    margin-left: 83.33333%;
  }
}
@media only screen and (min-width: 1281px) {
  .extralargeOffset10 {
    margin-left: 83.33333%;
  }
}
@media only screen and (min-width: 320px) {
  .microOffset11 {
    margin-left: 91.66667%;
  }
}
@media only screen and (min-width: 481px) {
  .tinyOffset11 {
    margin-left: 91.66667%;
  }
}
@media only screen and (min-width: 641px) {
  .smallOffset11 {
    margin-left: 91.66667%;
  }
}
@media only screen and (min-width: 961px) {
  .mediumOffset11 {
    margin-left: 91.66667%;
  }
}
@media only screen and (min-width: 1025px) {
  .largeOffset11 {
    margin-left: 91.66667%;
  }
}
@media only screen and (min-width: 1281px) {
  .extralargeOffset11 {
    margin-left: 91.66667%;
  }
}
.columns, .no_gutters {
  clear: both;
  margin: 0 -0.5em;
}

.columns:after, .no_gutters:after {
  content: " ";
  clear: both;
  display: table;
}

.no_gutters {
  margin: 0px 0px;
}

.no_gutters .micro1 {
  padding-left: 0;
  padding-right: 0;
}

.no_gutters .tiny1 {
  padding-left: 0;
  padding-right: 0;
}

.no_gutters .small1 {
  padding-left: 0;
  padding-right: 0;
}

.no_gutters .medium1 {
  padding-left: 0;
  padding-right: 0;
}

.no_gutters .large1 {
  padding-left: 0;
  padding-right: 0;
}

.no_gutters .extralarge1 {
  padding-left: 0;
  padding-right: 0;
}

.no_gutters .micro2 {
  padding-left: 0;
  padding-right: 0;
}

.no_gutters .tiny2 {
  padding-left: 0;
  padding-right: 0;
}

.no_gutters .small2 {
  padding-left: 0;
  padding-right: 0;
}

.no_gutters .medium2 {
  padding-left: 0;
  padding-right: 0;
}

.no_gutters .large2 {
  padding-left: 0;
  padding-right: 0;
}

.no_gutters .extralarge2 {
  padding-left: 0;
  padding-right: 0;
}

.no_gutters .micro3 {
  padding-left: 0;
  padding-right: 0;
}

.no_gutters .tiny3 {
  padding-left: 0;
  padding-right: 0;
}

.no_gutters .small3 {
  padding-left: 0;
  padding-right: 0;
}

.no_gutters .medium3 {
  padding-left: 0;
  padding-right: 0;
}

.no_gutters .large3 {
  padding-left: 0;
  padding-right: 0;
}

.no_gutters .extralarge3 {
  padding-left: 0;
  padding-right: 0;
}

.no_gutters .micro4 {
  padding-left: 0;
  padding-right: 0;
}

.no_gutters .tiny4 {
  padding-left: 0;
  padding-right: 0;
}

.no_gutters .small4 {
  padding-left: 0;
  padding-right: 0;
}

.no_gutters .medium4 {
  padding-left: 0;
  padding-right: 0;
}

.no_gutters .large4 {
  padding-left: 0;
  padding-right: 0;
}

.no_gutters .extralarge4 {
  padding-left: 0;
  padding-right: 0;
}

.no_gutters .micro5 {
  padding-left: 0;
  padding-right: 0;
}

.no_gutters .tiny5 {
  padding-left: 0;
  padding-right: 0;
}

.no_gutters .small5 {
  padding-left: 0;
  padding-right: 0;
}

.no_gutters .medium5 {
  padding-left: 0;
  padding-right: 0;
}

.no_gutters .large5 {
  padding-left: 0;
  padding-right: 0;
}

.no_gutters .extralarge5 {
  padding-left: 0;
  padding-right: 0;
}

.no_gutters .micro6 {
  padding-left: 0;
  padding-right: 0;
}

.no_gutters .tiny6 {
  padding-left: 0;
  padding-right: 0;
}

.no_gutters .small6 {
  padding-left: 0;
  padding-right: 0;
}

.no_gutters .medium6 {
  padding-left: 0;
  padding-right: 0;
}

.no_gutters .large6 {
  padding-left: 0;
  padding-right: 0;
}

.no_gutters .extralarge6 {
  padding-left: 0;
  padding-right: 0;
}

.no_gutters .micro7 {
  padding-left: 0;
  padding-right: 0;
}

.no_gutters .tiny7 {
  padding-left: 0;
  padding-right: 0;
}

.no_gutters .small7 {
  padding-left: 0;
  padding-right: 0;
}

.no_gutters .medium7 {
  padding-left: 0;
  padding-right: 0;
}

.no_gutters .large7 {
  padding-left: 0;
  padding-right: 0;
}

.no_gutters .extralarge7 {
  padding-left: 0;
  padding-right: 0;
}

.no_gutters .micro8 {
  padding-left: 0;
  padding-right: 0;
}

.no_gutters .tiny8 {
  padding-left: 0;
  padding-right: 0;
}

.no_gutters .small8 {
  padding-left: 0;
  padding-right: 0;
}

.no_gutters .medium8 {
  padding-left: 0;
  padding-right: 0;
}

.no_gutters .large8 {
  padding-left: 0;
  padding-right: 0;
}

.no_gutters .extralarge8 {
  padding-left: 0;
  padding-right: 0;
}

.no_gutters .micro9 {
  padding-left: 0;
  padding-right: 0;
}

.no_gutters .tiny9 {
  padding-left: 0;
  padding-right: 0;
}

.no_gutters .small9 {
  padding-left: 0;
  padding-right: 0;
}

.no_gutters .medium9 {
  padding-left: 0;
  padding-right: 0;
}

.no_gutters .large9 {
  padding-left: 0;
  padding-right: 0;
}

.no_gutters .extralarge9 {
  padding-left: 0;
  padding-right: 0;
}

.no_gutters .micro10 {
  padding-left: 0;
  padding-right: 0;
}

.no_gutters .tiny10 {
  padding-left: 0;
  padding-right: 0;
}

.no_gutters .small10 {
  padding-left: 0;
  padding-right: 0;
}

.no_gutters .medium10 {
  padding-left: 0;
  padding-right: 0;
}

.no_gutters .large10 {
  padding-left: 0;
  padding-right: 0;
}

.no_gutters .extralarge10 {
  padding-left: 0;
  padding-right: 0;
}

.no_gutters .micro11 {
  padding-left: 0;
  padding-right: 0;
}

.no_gutters .tiny11 {
  padding-left: 0;
  padding-right: 0;
}

.no_gutters .small11 {
  padding-left: 0;
  padding-right: 0;
}

.no_gutters .medium11 {
  padding-left: 0;
  padding-right: 0;
}

.no_gutters .large11 {
  padding-left: 0;
  padding-right: 0;
}

.no_gutters .extralarge11 {
  padding-left: 0;
  padding-right: 0;
}

.no_gutters .micro12 {
  padding-left: 0;
  padding-right: 0;
}

.no_gutters .tiny12 {
  padding-left: 0;
  padding-right: 0;
}

.no_gutters .small12 {
  padding-left: 0;
  padding-right: 0;
}

.no_gutters .medium12 {
  padding-left: 0;
  padding-right: 0;
}

.no_gutters .large12 {
  padding-left: 0;
  padding-right: 0;
}

.no_gutters .extralarge12 {
  padding-left: 0;
  padding-right: 0;
}

@media only print {
  .hiddenPrint {
    display: none;
  }
}

/*  Accent sur les bleus */
/*$primary-color        : hsl(211, 39%, 23%);
$secondary-color      : hsl(211, 39%, 23%)43;

$darkgray             : hsl(209, 61%, 16%);
$darkestgray             : hsl(209, 61%, 16%);
$mediumgray           : hsl(209, 28%, 39%);
$lightgray            : #BCCCDC;
$extralightgray       : hsl(210, 36%, 96%);
*/
/* Neutre et gris */
/* Status de couleurs : */
#tablecontent_items {
  margin-top: 20px;
}

.info-box {
  border: 1px solid hsl(214, 15%, 91%);
  padding: 16px;
  margin: 16px 0;
  background-color: hsl(216, 33%, 97%);
}
.info-box p {
  padding-bottom: 4px;
}

.info-box h3 {
  margin-top: 0;
}

.prevision .numbers {
  padding: 0.5em;
  margin: 0.5em;
  line-height: 1.7em;
  background: hsl(214, 15%, 91%);
  border-radius: 10px;
  box-shadow: 2px 1px 2px hsl(214, 15%, 91%);
}
.prevision .numbers input {
  width: 70px;
}
.prevision .numbers table th {
  font-weight: bold !important;
}
.prevision .numbers table td {
  padding: 0.3em;
}
.prevision #compositionContentErrorMandatory {
  padding: 1em;
  background-color: #e8e8e8;
  font-weight: bold;
  color: hsl(0, 79%, 32%);
}
.prevision .corner {
  background: hsl(209, 20%, 25%);
  color: white;
  width: 250px;
}
.prevision .sectiontitle {
  font-size: 2em;
  margin-bottom: 0.5em;
  margin-top: 0.5em;
  border-bottom: 1px solid hsl(211, 13%, 65%);
  padding-bottom: 0.2em;
  font-weight: bold;
}
.prevision .sectiontitle .alivrer {
  float: right;
  font-size: 0.8em;
}
.prevision .label {
  background: hsl(211, 13%, 65%);
  color: white;
  border-radius: 4px;
  padding: 0.2em 0.6em;
  line-height: 1.2em;
  font-weight: bold;
  display: inline-block;
}
.prevision .label.sold {
  background: #97BF0D;
}
.prevision .label.trash {
  background: hsl(0, 79%, 32%);
}
.prevision .label.progress {
  background: hsl(200, 59%, 43%);
}
.prevision .total {
  font-weight: bold;
  font-size: 1.5em;
  color: black;
  margin-top: 1em;
}
.prevision .previeworder > ul {
  list-style: none;
  padding: 0;
}
.prevision .previeworder > ul .order {
  background: hsl(214, 15%, 91%);
  margin-bottom: 0.5em;
  padding: 0.5em;
}
.prevision .previeworder > ul .order .date {
  font-size: 1.2em;
  margin-bottom: 1em;
  display: block;
}
.prevision .previeworder > ul .order table th {
  font-weight: bold;
}
.prevision .previeworder > ul .order table td {
  padding: 0.5em 0.3em;
}
.prevision .previeworder > ul .order table td input {
  width: 100px;
}
.prevision .key, .prevision .multiplier {
  display: inline-block;
  margin-right: 1.5em;
}

.previeworder_table {
  padding-top: 1em;
  margin-bottom: 1em;
  max-width: 100%;
  overflow: scroll;
}
.previeworder_table input {
  width: 3em !important;
}
.previeworder_table .grantotal {
  font-size: 1.3em;
  font-weight: bold;
}
.previeworder_table table tr:nth-child(even) {
  background: hsl(216, 33%, 97%);
}
.previeworder_table table tr th, .previeworder_table table tr td {
  vertical-align: top;
  white-space: nowrap;
  border-right: 1px solid #d0d0d0;
  border-bottom: 0;
}
.previeworder_table table tr th.title, .previeworder_table table tr td.title {
  border-right: 1px solid #b1b1b1;
}
.previeworder_table table tr th .info, .previeworder_table table tr td .info {
  padding: 0.5em 0.5em;
  background: rgb(155, 176, 212);
}
.previeworder_table table tr th .inner, .previeworder_table table tr td .inner {
  padding: 0.5em 0.5em;
}
.previeworder_table table tr .title {
  font-weight: bold;
  background: #d1d1d1;
}
.previeworder_table table tr .title .totalday {
  font-size: 0.8em;
}
.previeworder_table table tr .title .totalday .item {
  padding-top: 0.6em;
}
.previeworder_table table tr .title.titlecol {
  background: #c1c1c1 !important;
  border-bottom: 1px solid #b1b1b1;
  width: 200px;
}

.iteneraire_content h2 {
  margin-top: 20px;
}
.iteneraire_content input[type=checkbox] {
  transform: scale(1.5);
}
.iteneraire_content .iteneraire_tabs {
  overflow: auto;
}
.iteneraire_content tr.tarifLu td {
  background-color: #a6b6e1;
}

.column_chooser_container li {
  list-style-type: none;
  padding: 5px 10px;
}
.column_chooser_container li.valid {
  color: #97BF0D;
}
.column_chooser_container li.partial {
  color: hsl(43, 89%, 70%);
}

.note_customer {
  position: fixed;
  top: 7em;
  background: #ffd143;
  border: 1px solid #eaae49;
  right: 0;
  z-index: 10000000;
  transform: translateX(100%);
  outline: none;
  border-radius: 0em 0em 0em 0.5em;
  transition: 0.4s;
  opacity: 0;
}
.note_customer .title {
  font-weight: bold;
  padding: 0.5em;
}
.note_customer.active {
  transform: translateX(0%);
}
.note_customer.empty {
  background: #eeeeee;
  border: 1px solid #f0f0f0;
}
.note_customer.empty .icon {
  background: #eeeeee;
  border: 1px solid #f0f0f0;
}
.note_customer .icon {
  cursor: pointer;
  position: absolute;
  top: -1px;
  left: 1px;
  transform: translateX(-100%);
  background: #ffd143;
  padding: 0.5em;
  font-size: 1.5em;
  border-radius: 0.5em 0 0 0.5em;
  border: 1px solid #eaae49;
  border-right: 0;
}
.note_customer textarea {
  background: none;
  padding: 0.8em;
  border: 0;
  min-height: 15em;
  width: 90%;
}
.note_customer .button:hover {
  cursor: pointer;
  opacity: 0.7;
}

blockquote:before, blockquote:after, q:before, q:after {
  content: "";
}

blockquote, q {
  quotes: "" "";
}

a {
  color: hsl(227, 50%, 59%);
  text-decoration: none;
  outline: none;
  cursor: pointer;
}

#tabsinfos a {
  color: hsl(227, 50%, 59%);
}

#tabsinfos .datagrid th a {
  color: #fff;
}

a img {
  border: none;
}

img {
  vertical-align: middle;
}

h1, h2, h3, h4, h5, h6 {
  font-weight: normal;
  color: hsl(209, 20%, 25%);
}

h1 {
  font-size: 24px;
  font-weight: bold;
  line-height: 1;
  color: hsl(210, 24%, 16%);
  margin-bottom: 10px;
}

h2 {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 10px;
}

h3 {
  font-size: 14px;
  font-weight: bold;
  margin-bottom: 15px;
}

h4 {
  font-size: 13px;
  font-weight: bold;
  margin-bottom: 15px;
}

h5 {
  font-size: 12px;
  margin-bottom: 15px;
}

h6 {
  font-size: 11px;
  margin-bottom: 15px;
}

h1 img, h2 img, h3 img, h4 img, h5 img, h6 img {
  margin: 0;
}

blockquote {
  margin: 1.5em;
  color: #666;
  font-style: italic;
}

strong {
  font-weight: bold;
}

em, dfn {
  font-style: italic;
}

dfn {
  font-weight: bold;
}

sup, sub {
  line-height: 0;
}

abbr, acronym {
  border-bottom: 1px dotted #666;
}

address {
  margin: 0 0 1.5em;
  font-style: italic;
}

/* misc */
.cl {
  clear: both;
  display: block;
  height: 0;
  overflow: hidden;
  visibility: hidden;
  width: 0;
  line-height: 0;
}

.fl {
  float: left;
}

.fr {
  float: right;
}

.fn {
  float: none !important;
}

.tl {
  text-align: left;
}

.tr {
  text-align: right;
}

.tc {
  text-align: center;
}

.hd {
  display: none;
}

.pointer {
  cursor: pointer;
}

.clear {
  clear: both;
}

.clear20 {
  clear: both;
  height: 20px;
}

.clear40 {
  clear: both;
  height: 40px;
}

.strong {
  font-weight: bold !important;
}

/* Page Blocks */
.box {
  background: #fff;
  border: 1px solid #9d9d9d;
  margin-bottom: 15px;
  padding: 15px;
  border-top: 0;
  -moz-border-radius-bottomleft: 3px;
  -moz-border-radius-bottomright: 3px;
  -webkit-border-bottom-left-radius: 3px;
  -webkit-border-bottom-right-radius: 3px;
}

.box.stats {
  padding: 30px 15px;
}

.box.table {
  padding: 0;
}

.box-header {
  border: 1px solid #9d9d9d;
  font-weight: bold;
  font-size: 14px;
  background: #cdcdcd url("../img/boxheader.gif") repeat-x top;
  padding: 10px 15px;
  color: #333333;
  -moz-border-radius-topleft: 3px;
  -moz-border-radius-topright: 3px;
  -webkit-border-top-left-radius: 3px;
  -webkit-border-top-right-radius: 3px;
  text-shadow: 1px 1px 1px #fff;
}

.box-header .fr a {
  color: #333333;
  text-decoration: none;
  font-size: 12px;
  padding: 0 5px;
}

.box-header .fr a:hover {
  color: #1f92ff;
}

.box h2 {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 10px;
}

.box h3 {
  font-size: 14px;
  font-weight: bold;
  margin-bottom: 15px;
}

.box h4 {
  font-size: 13px;
  font-weight: bold;
  margin-bottom: 15px;
}

.box ul {
  padding-bottom: 15px;
  padding-left: 30px;
}

.box ul li {
  margin-bottom: 5px;
  padding-left: 5px;
}

.box ol {
  list-style-position: inside;
  padding-bottom: 15px;
  padding-left: 15px;
}

.box ol li {
  margin-bottom: 5px;
}

/* Forms */
form label {
  padding-top: 5px;
  margin-right: 8px;
  font-size: 13px;
  font-weight: bold;
  display: inline-block;
}

form p {
  margin-bottom: 10px;
  padding-bottom: 20px;
}

form div.row {
  clear: both;
  padding: 4px 0;
  margin-bottom: 10px;
  min-height: 25px;
}

form .row label {
  width: 165px;
  text-align: right;
  vertical-align: top;
}

form .row .checkbox, form .row .radio {
  width: auto;
}

form input, form textarea, form select {
  border-radius: 5px;
  border: 1px solid hsl(214, 15%, 91%);
  outline: medium none;
  margin: 0;
}

form .row input, form .row textarea {
  width: 300px;
}

form .row textarea {
  height: 75px;
}

form .row #cp {
  width: 50px;
}

form .row input.small {
  width: 150px;
}

form .row input[type=checkbox] {
  width: auto;
}

form input.error {
  border: 1px solid hsl(0, 100%, 97%);
  background-color: hsl(0, 100%, 97%);
  border: 1px solid hsl(0, 79%, 32%);
}

form input.error:focus {
  border: 1px solid hsl(0, 79%, 32%);
  box-shadow: 0 1px 2px hsl(0, 79%, 32%) inset;
}

form input[type=checkbox], form input[type=radio] {
  /*	float:left;*/
  border: none;
  background: none;
  margin: 0;
  padding: 0;
  margin-top: 3px;
}

form input[type=checkbox]:focus, form input[type=radio]:focus {
  border: none;
  background: none;
}

form label.checkbox, form label.radio {
  font-weight: normal;
  margin: 0;
  padding: 0 20px 0 6px;
  vertical-align: bottom;
}

form input:focus, form textarea:focus, form select:focus {
  box-shadow: 0px 0px 3px hsl(209, 20%, 25%);
  border: 1px solid hsl(209, 20%, 25%);
}

form optgroup {
  background: #f7f7f7;
}

fieldset {
  margin-bottom: 15px;
}

/* Tables */
table {
  border-collapse: separate;
  border-spacing: 0px;
}

caption, th, td {
  text-align: left;
  font-weight: normal;
}

table, td, th {
  vertical-align: middle;
}

table {
  width: 100%;
  border-collapse: collapse;
}

tr td {
  vertical-align: middle;
}

thead td, thead th {
  font-weight: bold;
  padding: 8px;
}

th, td {
  border-bottom: 1px solid hsl(214, 15%, 91%);
}

tbody th {
  padding: 0 8px;
  text-align: left;
}

/* Dialog Box */
.message {
  font-size: 12px;
  padding: 15px;
  margin-bottom: 10px;
  border: 1px solid hsl(214, 15%, 91%);
}

.message.new {
  background: #feeac9;
  border: 1px solid #d38e49;
}

.message h4 {
  border-bottom: 1px solid hsl(214, 15%, 91%);
  padding-bottom: 5px;
}

small {
  font-size: 10px;
}

/* Login Page */
#login-wrapper {
  margin: 0 auto;
  width: 400px;
  margin-top: 150px;
}

div#login-wrapper div.notification {
  padding: 15px 15px 15px 50px;
}

.box-header.login {
  font-size: 19px;
  padding: 10px 15px;
}

form.login label {
  width: 125px;
}

form.login input {
  width: 200px;
}

#password_dialog table, #password_dialog td {
  border: 0;
}

.hidden {
  position: absolute;
  top: -10000px;
  left: 0;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.right {
  float: right;
}

.left {
  float: left;
}

.justify {
  text-align: justify;
}

.clear {
  clear: both;
}

.clear10 {
  clear: both;
  height: 10px;
}

.clear20 {
  clear: both;
  height: 20px;
}

.clear40 {
  clear: both;
  height: 40px;
}

.pointer {
  cursor: pointer;
}

.center {
  text-align: center;
}

.searchhighlight {
  background-color: #89ff58;
  padding: 3px 0px;
}

div.feedback {
  z-index: 10000;
  text-align: center;
  position: fixed;
  bottom: 0px;
  right: 0px;
  display: none;
  width: 100%;
  margin: 0 auto;
  border-radius: 0;
}

.images_inventory {
  margin: 0 !important;
}

.images_inventory ul {
  padding-left: 0;
}

.images_inventory li {
  display: inline-block;
  padding: 5px;
}

.images_inventory img {
  max-height: 200px;
  width: auto;
  height: auto;
  margin-bottom: 5px;
  margin-right: 5px;
  border: 5px solid white;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.38);
  cursor: pointer;
}

.images_inventory.verysmall img {
  max-height: 100px;
}

/* notifications */
.notification.narrow.tick {
  background-color: #effeb9;
  border-color: #98c700;
  color: #333333;
}

.notification.narrow.lock {
  background-color: #ffeaa7;
  border-color: #f9b418;
}

.notification.success {
  background-color: #6ccb63;
  border-color: #98c700;
}

.notification.error {
  background-color: #d9534f;
  border-color: #ea5338;
}

.notification.warning {
  background-color: #f9b418;
  border-color: #f9b418;
}

.notification.info {
  background-color: #d1e4f3;
  border-color: #4d8fcc;
}

.notification.tip {
  background-color: #feeac9;
  border-color: #d38e49;
}

.notification {
  border-width: 0px;
  border-style: solid;
  padding: 25px;
  border-radius: 0px;
  color: #fff;
  font-size: 1.8em;
}

.notification.narrow {
  padding: 5px 5px 5px 35px;
}

.scoring {
  padding: 20px;
  margin-top: 15px;
  color: black;
  border: 1px solid #d2d2d2;
  border-radius: 10px;
  font-size: 1em;
  line-height: 1.5em;
}

tr.archived {
  opacity: 0.5;
}/*# sourceMappingURL=base.css.map */