.clr{
  clear: both;
}

[class*='hob-grid-width'] > * {
  box-sizing: border-box;
  width: 100%;
}
.hob-grid-width-1-2 > * {
  width: 50%;
}
.hob-grid-width-1-3 > * {
  width: 33.333%;
}
.hob-grid-width-1-4 > * {
  width: 25%;
}
.hob-grid-width-1-5 > * {
  width: 20%;
}
.hob-grid-width-1-6 > * {
  width: 16.666%;
}
.hob-grid-width-1-10 > * {
  width: 10%;
}
.hob-grid-width-auto > * {
  width: auto;
}
/* Phone landscape and bigger */
@media (min-width: 100px) {
  .hob-grid-width-small-1-1 > * {
    width: 100%;
  }
  .hob-grid-width-small-1-2 > * {
    width: 50%;
  }
  .hob-grid-width-small-1-3 > * {
    width: 33.333%;
  }
  .hob-grid-width-small-1-4 > * {
    width: 25%;
  }
  .hob-grid-width-small-1-5 > * {
    width: 20%;
  }
  .hob-grid-width-small-1-6 > * {
    width: 16.666%;
  }
  .hob-grid-width-small-1-10 > * {
    width: 10%;
  }
}
/* Tablet and bigger */
@media (min-width: 768px) {
  .hob-grid-width-medium-1-1 > * {
    width: 100%;
  }
  .hob-grid-width-medium-1-2 > * {
    width: 50%;
  }
  .hob-grid-width-medium-1-3 > * {
    width: 33.333%;
  }
  .hob-grid-width-medium-1-4 > * {
    width: 25%;
  }
  .hob-grid-width-medium-1-5 > * {
    width: 20%;
  }
  .hob-grid-width-medium-1-6 > * {
    width: 16.666%;
  }
  .hob-grid-width-medium-1-10 > * {
    width: 10%;
  }
}
/* Desktop and bigger */
@media (min-width: 960px) {
  .hob-grid-width-large-1-1 > * {
    width: 100%;
  }
  .hob-grid-width-large-1-2 > * {
    width: 50%;
  }
  .hob-grid-width-large-1-3 > * {
    width: 33.333%;
  }
  .hob-grid-width-large-1-4 > * {
    width: 25%;
  }
  .hob-grid-width-large-1-5 > * {
    width: 20%;
  }
  .hob-grid-width-large-1-6 > * {
    width: 16.666%;
  }
  .hob-grid-width-large-1-10 > * {
    width: 10%;
  }
}
/* Large screen and bigger */
@media (min-width: 1220px) {
  .hob-grid-width-xlarge-1-1 > * {
    width: 100%;
  }
  .hob-grid-width-xlarge-1-2 > * {
    width: 50%;
  }
  .hob-grid-width-xlarge-1-3 > * {
    width: 33.333%;
  }
  .hob-grid-width-xlarge-1-4 > * {
    width: 25%;
  }
  .hob-grid-width-xlarge-1-5 > * {
    width: 20%;
  }
  .hob-grid-width-xlarge-1-6 > * {
    width: 16.666%;
  }
  .hob-grid-width-xlarge-1-10 > * {
    width: 10%;
  }
}

.hob-block {
  position: relative;
  box-sizing: border-box;
  float: left;
  margin-bottom: 20px;
}

.hob-block a:hover{
  text-decoration: none;
}

.hob-block img{
  width: 100%;
}

.hob-grid > * {
  padding-left: 20px;
  padding-right: 20px;
}

.hob-block a{
  text-decoration: none;
}


/* EFFET D'IMAGE */

/* Zoom */
.mod_blocs img.zoom {
  -webkit-transform: scale(1);
  transform: scale(1);
  -webkit-transition: .3s ease-in-out;
  transition: .3s ease-in-out;
}

.mod_blocs img.zoom:hover {
  -webkit-transform: scale(1.2);
  transform: scale(1.2);
}

/* Zoom out */
.mod_blocs img.zoom-out {
  -webkit-transform: scale(1);
  transform: scale(1);
  -webkit-transition: .3s ease-in-out;
  transition: .3s ease-in-out;
}
.mod_blocs img.zoom-out:hover {
  -webkit-transform: scale(0.8);
  transform: scale(0.8);
}

/* Ronde */
.mod_blocs img.rounded {
  height: auto; /* hauteur de l'image */
  -webkit-transition: .3s ease-in-out !important; 
  transition: .3s ease-in-out !important; 
}
.mod_blocs img.rounded:hover {
  border-radius: 50%; 
}

/* Flou */
.mod_blocs img.blur {
  -webkit-filter: blur(3px);
  filter: blur(3px);
  -webkit-transition: .3s ease-in-out;
  transition: .3s ease-in-out;
}
.mod_blocs img.blur:hover{
  -webkit-filter: blur(0);
  filter: blur(0);
}

/* Flou inversé*/
.mod_blocs img.blur-0 {
  -webkit-filter: blur(0);
  filter: blur(0);
  -webkit-transition: .3s ease-in-out;
  transition: .3s ease-in-out;
}
.mod_blocs img.blur-0:hover{
  -webkit-filter: blur(3px);
  filter: blur(3px);
}

/* noir & blanc -> couleur */
.mod_blocs img.color {
  -webkit-filter: grayscale(100%);
  filter: grayscale(100%);
  -webkit-transition: .3s ease-in-out;
  transition: .3s ease-in-out;
}
.mod_blocs img.color:hover {
  -webkit-filter: grayscale(0);
  filter: grayscale(0);
}

/* couleur -> noir & blanc */
.mod_blocs img.color-0 {
  -webkit-filter: grayscale(0);
  filter: grayscale(0);
  -webkit-transition: .3s ease-in-out;
  transition: .3s ease-in-out;
}
.mod_blocs img.color-0:hover {
  -webkit-filter: grayscale(100%);
  filter: grayscale(100%);
}

/* Sepia */
.mod_blocs img.sepia {
  -webkit-filter: sepia(100%);
  filter: sepia(100%);
  -webkit-transition: .3s ease-in-out;
  transition: .3s ease-in-out;
}
.mod_blocs img.sepia:hover {
  -webkit-filter: sepia(0);
  filter: sepia(0);
}

/* Sepia inversé */
.mod_blocs img.sepia-0 {
  -webkit-filter: sepia(0);
  filter: sepia(0);
  -webkit-transition: .3s ease-in-out;
  transition: .3s ease-in-out;
}
.mod_blocs img.sepia-0:hover {
  -webkit-filter: sepia(100%);
  filter: sepia(100%);
}

/* Morph */
.mod_blocs img.morph {
  -webkit-transition: all 0.5s ease;
  transition: all 0.5s ease;
  border-radius: 50%;
}
 
.mod_blocs img.morph:hover {
  border-radius: 50%;  /* on arrondit l'image */
  -webkit-transform: rotate(360deg); /* rotation de l'image */
  transform: rotate(360deg);
}

/* Opacité */
.mod_blocs img.opacity {
  opacity: 1;
  -webkit-transition: .3s ease-in-out;
  transition: .3s ease-in-out;
}
.mod_blocs img.opacity:hover {
  opacity: .5;
}

/* Opacité inversée */
.mod_blocs img.opacity-0 {
  opacity: .5;
  -webkit-transition: .3s ease-in-out;
  transition: .3s ease-in-out;
}
.mod_blocs img.opacity-0:hover {
  opacity: 1;
}