$border-radius: 8px;
$imagetitle-padding: 1.5rem;
.etl-imagegrid-bloc {
    *,  *:before,  *:after {
        @include box-sizing(border-box !important);
    }       
    .etl-imagegrid-wrapper {
        @include display(flex);
        @include flex-flow(row wrap);
    @include flex-wrap(wrap);
        margin: -0.25rem;
    }
    .etl-imagegrid-item-etl-bloc-image-style-1, .etl-imagegrid-item-etl-bloc-image-style-2, .etl-imagegrid-item-etl-bloc-image-style-3 {
        @include flex(0 0 auto);
        width: 100%;
        display: inline-block;
        vertical-align: top;
        &:hover {
            .etl-imagegrid-link:before {
                opacity: 1;
            }           
        }
    }   
    .etl-imagegrid-desc, .etl-imagegrid-footer {
        margin: 1.5rem 0;
    }       
    .etl-imagegrid-link {
        display: block;
        position: relative;
        background: $accent-color-1;
        border-radius: $border-radius;
        overflow: hidden;
        &:before {
            font-family: FontAwesome;
            content: "\f002";
            font-size: 1.25rem;
            color:#fff;
            position: absolute;
            top: 50%;
            left: 50%;      
            margin-left: -7px;
            margin-top: -13px;
            z-index: 1;      
            opacity: 0;     
        }
    }
    .etl-imagegrid-2cols {
        .etl-imagegrid-item-etl-bloc-image-style-1, .etl-imagegrid-item-etl-bloc-image-style-2, .etl-imagegrid-item-etl-bloc-image-style-3, .etl-imagegrid-item-etl-bloc-image-style-4 {
            width: 50%;

            @include breakpoint(mobile-only) {
                width: 100%;
            }
        }
    }   
    .etl-imagegrid-3cols {
        .etl-imagegrid-item-etl-bloc-image-style-1, .etl-imagegrid-item-etl-bloc-image-style-2, .etl-imagegrid-item-etl-bloc-image-style-3, .etl-imagegrid-item-etl-bloc-image-style-4 {
            width: 33.33333%;

            @include breakpoint(tablet-range) {
                width: 50%;
            }

            @include breakpoint(mobile-only) {
                width: 100%;
            }
        }
    }
    .etl-imagegrid-4cols {
        .etl-imagegrid-item-etl-bloc-image-style-1, .etl-imagegrid-item-etl-bloc-image-style-2, .etl-imagegrid-item-etl-bloc-image-style-3, .etl-imagegrid-item-etl-bloc-image-style-4 {
            width: 25%;
            @include breakpoint(tablet-range) {
                width: 50%;
            }
            @include breakpoint(mobile-only) {
                width: 100%;
            }
        }
    }           
    .etl-imagegrid-5cols {
        .etl-imagegrid-item-etl-bloc-image-style-1, .etl-imagegrid-item-etl-bloc-image-style-2, .etl-imagegrid-item-etl-bloc-image-style-3, .etl-imagegrid-item-etl-bloc-image-style-4 {
            width: 20%;
            @include breakpoint(tablet-range) {
                width: 33.33333%;
            }
            @include breakpoint(mobile-only) {
                width: 50%;
            }
        }
    }
    
    .etlradius-0 {
      .etl-imagegrid-item-etl-bloc-image-style-1 .etl-imagegrid-link, .etl-imagegrid-item-etl-bloc-image-style-2 .etl-imagegrid-link, .etl-imagegrid-item-etl-bloc-image-style-3 .etl-imagegrid-link {
          border-radius: 0px;
      }
    }
    .etlradius-8 {
      .etl-imagegrid-item-etl-bloc-image-style-1 .etl-imagegrid-link, .etl-imagegrid-item-etl-bloc-image-style-2 .etl-imagegrid-link, .etl-imagegrid-item-etl-bloc-image-style-3 .etl-imagegrid-link {
          border-radius: 8px;
      }
    }
    .etlradius-12 {
      .etl-imagegrid-item-etl-bloc-image-style-1 .etl-imagegrid-link, .etl-imagegrid-item-etl-bloc-image-style-2 .etl-imagegrid-link, .etl-imagegrid-item-etl-bloc-image-style-3 .etl-imagegrid-link {
          border-radius: 12px;
      }
    }
    
    .etlpadding-00 {
      .etl-imagegrid-item-etl-bloc-image-style-1,.etl-imagegrid-item-etl-bloc-image-style-2,.etl-imagegrid-item-etl-bloc-image-style-3, .etl-imagegrid-item-etl-bloc-image-style-4 {
          padding: 0px;
      }
    }
    .etlpadding-05 {
      .etl-imagegrid-item-etl-bloc-image-style-1,.etl-imagegrid-item-etl-bloc-image-style-2,.etl-imagegrid-item-etl-bloc-image-style-3, .etl-imagegrid-item-etl-bloc-image-style-4 {
          padding: 0.5px;
      }
    }
    .etlpadding-40 {
      .etl-imagegrid-item-etl-bloc-image-style-1,.etl-imagegrid-item-etl-bloc-image-style-2,.etl-imagegrid-item-etl-bloc-image-style-3, .etl-imagegrid-item-etl-bloc-image-style-4 {
          padding: 4px;
      }
    }        
    .etlpadding-80 {
      .etl-imagegrid-item-etl-bloc-image-style-1,.etl-imagegrid-item-etl-bloc-image-style-2,.etl-imagegrid-item-etl-bloc-image-style-3, .etl-imagegrid-item-etl-bloc-image-style-4 {
          padding: 8px;
      }
    }
    
    .etl-imagegrid-item-desc {
      @include display(flex);
      @include align-items(flex-start);
      @include flex-direction(column);
      @include justify-content(flex-end);
      color: $white;
      position: absolute;
      z-index: 1;
      top: 0;
      left: 0;
      bottom: 0;
      right: 0;

      span {
          @include flex(none);
      }
      .etl-imagegrid-item-desc-title {
          padding: 0 $content-padding + 0.2;
          font-size: $core-font-size + 0.2;
      }
      .etl-imagegrid-item-desc-subtitle {
          padding: $content-padding + 0.2;
          padding-top: 0;
          font-size: $core-font-size - 0.2;
      }
   }
 
   .etl-link {
     .etl-imagegrid-link {
        &:before {
            content: "\f0c1";
        }
      }
    }
}
.etl-imagegrid-bloc .etl-imagegrid-item-etl-bloc-image-style-1:hover img {
    opacity: 0.25;
    -webkit-transition: opacity 0.35s;
    -moz-transition: opacity 0.35s;
    transition: opacity 0.35s;
}
.etl-imagegrid-bloc .etl-imagegrid-item-etl-bloc-image-style-2:hover, .etl-imagegrid-bloc .etl-imagegrid-item-etl-bloc-image-style-2:hover img {
  z-index: 10;
    -webkit-transform: rotate(0deg) scale(1.2);
    -o-transform: rotate(0deg) scale(1.2);
    -moz-transform: rotate(0deg) scale(1.2);
    -ms-transform: rotate(0deg) scale(1.2);
    transform: rotate(0deg) scale(1.2);
}
.etl-imagegrid-bloc .etl-imagegrid-item-etl-bloc-image-style-3 a {
 background:none;
 border-radius: 0px;
}

.etl-imagegrid-bloc .etl-imagegrid-item-etl-bloc-image-style-3 img{
  padding: 10px;
  border: 1px solid #eee;
  background: #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  width:95%;
}

.etl-imagegrid-bloc .etl-imagegrid-item-etl-bloc-image-style-3:hover img {
  -webkit-transform: rotate(0deg) scale(1.5);
  -o-transform: rotate(0deg) scale(1.5);
  -moz-transform: rotate(0deg) scale(1.5);
  -ms-transform: rotate(0deg) scale(1.5);
  transform: rotate(0deg) scale(1.5);
  width:95%;
}

.etl-imagegrid-bloc {

    .etl-imagegrid-item-etl-bloc-image-style-4 {
        @include flex(0 0 auto);
        width: 100%;
        display: inline-block;
        vertical-align: middle;
        position: relative;

        img {
            @include transition(all 0.35s);
            width: 100%;
            height: 100%;
        }
        .etl-imagegrid-caption-v4 {
            @include display(flex);
            @include justify-content(center);
            font-size: $core-font-size + 0.1;
            color: $white;
            font-weight: $font-weight-bold;
            left: 0;
            right: 0;
            margin-left: auto;
            margin-right: auto;
            z-index: 1;
        }
        .etl-inside {
            @include display(flex);
            @include align-items(center);
            @include justify-content(center);
            color: $white;
            font-style: normal;
            position: absolute;
            z-index: 1;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
            div {
                font-size: $core-font-size + 0.5;
                flex: none;
                -webkit-flex: none;
                .dir-rtl & {
                    margin-right: 0;
                }
                opacity: 0;
                @include transform(scale(0));
                @include transition(all 0.35s);

                .fa {
                    font-size: $core-font-size + 3;
                }
            }
        }
        &:hover {
            z-index: 10;
            .etl-imagegrid-link-v4:before {
                opacity: 1;
                @include transform(scale(1));
            }
            .etl-inside div {
                opacity: 1;
                @include transform(scale(1));
            }
        }
    }
    .etl-imagegrid-link-v4 {
        @include display(flex);
        position: relative;
        width: 100%;
        height: 100%;
        @include transition(all 0.35s);
        &:before {
            color: $white;
            @include background-image(linear-gradient(top, transparentize($accent-color-1, .9) 0, $accent-color-1 1));
            content: "";
            position: absolute;
            z-index: 1;
            opacity: 0.5;
            width: 100%;
            height: 100%;
            text-align: center;
            @include transform(scale(0));
            @include transition(all 0.35s);
        }
    }
}

.etl-grid-caption {
  text-align: center;
  opacity: 0.75;
  margin: 0.6rem 0;
  @include breakpoint(desktop-range) {
    font-size: $core-font-size - 0.1;
  }   
  @include breakpoint(tablet-range) {
    font-size: $core-font-size - 0.2;
  }   
}

.imagegrid-firstlarge {
    .etl-imagegrid-wrapper {
        margin: 0;
        .etl-imagegrid-item:first-child {
            width: 100%;
        }
    }
}
.imagegrid-lastlarge {
    .etl-imagegrid-wrapper {
        margin: 0;
        .etl-imagegrid-item:last-child {
            width: 100%;
        }
    }
}