.suscribir{
    background: url(imatges/bg.png);
    background-size: cover;
    background-position: center;
    height: 400px;
}
/* ========================================================================*/
/* ! VARIABLES */
/* ========================================================================*/

// BRICK DECLINAISON
$color-brick: #FF8357;

// BLUE DECLINAISON
$color-blue: #4398b7;

// YELLOW DECLINAISON
$color-yellow: #FFDD57;

// INDIGO DECLINAISON
$color-indigo: #83C7D4;

// ANTHRACITE DECLINAISON
$color-anthracite: #414A53;

// GREEN DECLINAISON
$color-green: #87C97F;


/* ========================================================================*/
/* ! TYPO */
/* ========================================================================*/


/* --------------------------------------------*/
/* ! COMPOSANTS */
/*---------------------------------------------*/
.bloc {
  color: #FFF;
}


/* ========================================================================*/
/* ! MIXINS & HELPER CLASS */
/* ========================================================================*/

/* --------------------------------------------*/
/* ! HELPER CLASSES */
/*---------------------------------------------*/
.brick {
  background-color: $color-brick;
}

.blue {
  background-color: $color-blue
}

.yellow {
  background-color: $color-yellow;
}

.indigo {
  background-color: $color-indigo;
}

.anthracite {
  background-color: $color-anthracite;
}

.green {
  background-color: $color-green;
}

.no-padding {
        padding: 0!important;
}

.no-padding-horizontal {
        padding-left: 0!important;
        padding-right: 0!important;
}


/* --------------------------------------------*/
/* ! DECORATION & EFFECTS */
/*---------------------------------------------*/
@mixin box-shadow-blur($blur-value) {
  box-shadow: 0px 0px $blur-value 0px rgba(0, 0, 0, 0.20);
}



/* ========================================================================*/
/* ! LAYOUT */
/* ========================================================================*/
.section-mosaic {
  margin-top: 35px;
}

.section-mosaic + .section-mosaic {
  margin-top: 0;
}

/* ========================================================================*/
/* ! COMPOSANTS */
/* ========================================================================*/


/* --------------------------------------------*/
/* ! MOSAIC */
/*---------------------------------------------*/
.col-small-high-bloc {
    .row .bloc-small {
      bottom: 0;
    }
    .bloc-small-parent + .bloc-small-parent {
      top:15px; bottom: 7.5px;
    }
    .row .bloc-small {
      top:21.5px; bottom: 0;
    }
}

/* --------------------------------------------*/
/* ! BLOCS MOSAIC */
/*---------------------------------------------*/
.bloc {
  @include box-shadow-blur(5px);
}
  .bloc-big-parent {
    .bloc-big {
      position: absolute;
      top: 15px; right: 15px; bottom: 15px; left: 15px;
    }
  &::before {
    content: "";
    display: block;
    height: 0;
    padding-bottom: 68.8%;/*DEFINI LA HAUTEUR DU BLOC*/
  }
  }
  .bloc-high-parent {
    .bloc-high {
      position: absolute;
      top: 15px; right: 15px; bottom: 15px; left: 15px;
    }
    &::before {
    content: "";
    display: block;
    height: 0;
    padding-bottom: 145.5%;/*DEFINI LA HAUTEUR DU BLOC*/
    }
  }
  .bloc-small-parent {
    .bloc-small {
      position: absolute;
      top: 15px; right: 15px; bottom: 0; left: 15px;
    }
    &::before {
    content: "";
    display: block;
    height: 0;
    padding-bottom: 67%;/*DEFINI LA HAUTEUR DU BLOC*/
    }
  }


  // SINGULARITES BLOCS RESPONSIVE LAPTOP
@media (min-width: 992px) and (max-width: 1199px) {
  .bloc-big-parent::before {
    padding-bottom: 69.15%;/*DEFINI LA HAUTEUR DU BLOC*/
  }
  .bloc-high-parent::before {
    padding-bottom: 148%;/*DEFINI LA HAUTEUR DU BLOC*/
    }
  .bloc-small-parent::before {
    padding-bottom: 67%;/*DEFINI LA HAUTEUR DU BLOC*/
  }
}

  // SINGULARITES BLOCS RESPONSIVE TABLETTE
@media (min-width: 768px) and (max-width: 991px) {
  .bloc-big-parent::before {
      padding-bottom: 66.05%;/*DEFINI LA HAUTEUR DU BLOC*/
  }

  .bloc-high-parent {
    .bloc-high {
      top: 45px;
    }
    &::before {
    padding-bottom: 93.6%/*DEFINI LA HAUTEUR DU BLOC*/
    }
  }
  .bloc-small-parent::before {
    padding-bottom: 64.92%;/*DEFINI LA HAUTEUR DU BLOC*/
  }
}

  // SINGULARITES BLOCS RESPONSIVE SMARTPHONE
@media (max-width: 767px) {
  .bloc-big-parent::before {
      padding-bottom: 66.05%;/*DEFINI LA HAUTEUR DU BLOC*/
    }
  .bloc-high-parent {
    .bloc-high {
      top: 45px;
    }
    &::before {
    padding-bottom: 73.796%/*DEFINI LA HAUTEUR DU BLOC*/
    }
  }

  .bloc-small-parent::before {
    padding-bottom: 64.92%;/*DEFINI LA HAUTEUR DU BLOC*/
  }
}