/* contenitore base */
.image-container {

 width:100%;
height: 267px;
    position: relative;
    cursor: pointer;
    overflow: hidden;
    display: inline-block;
	margin:0;
	padding:0;

}
 
/* immagine al interno del contenitore */
.image-container img {
    width: 100%;
	max-width:400px;
    height: 100%;
max-height: 267px;
    position: absolute;
}
 
/* contenitore con didascalia */
.image-container .image-caption {
    width: 100%;
    height: 100%;
    position: absolute;
    background: rgba(0, 0, 0, 0.6);
    font-family: 'Open Sans',sans-serif;
    text-align: center;
}
 
/* titolo */
.image-caption h2 {
    margin-top: 50px;
    color: #fffefe;
    font-weight: 300;
}
 
/* descrizione dell'immagine  */
.image-caption p {
    color: #fff;
}
 
/* Tipi di animazioni apparizione didascalie */
 
/* animazione da sinistra*/
 
.image-container .caption-1 {
    left: -260px;
    transition: all 0.5s;
}
.image-container:hover .caption-1 {
    left: 0;
    transition: all 0.5s;
}
 
/* animazione da sopra */
.image-container .caption-2 {
    top: -210px;
    transition: all 0.5s;
}
.image-container:hover .caption-2 {
    top: 0;
    transition: all 0.5s;
}
 
/* animazione da basso */
.image-container .caption-3 {
    bottom: -210px;
    transition: all 0.5s;
}
.image-container:hover .caption-3 {
    bottom: 0;
    transition: all 0.5s;
}
 
/* animazione da destra */
.image-container .caption-4 {
    right: -260px;
    transition: all 0.5s;
}
.image-container:hover .caption-4 {
    right: 0;
    transition: all 0.5s;
}
 
/* animazione dall'angolo in alto a sinistra  */
.image-container .caption-5 {
    left: -260px;
    top: -210px;
    transition: all 0.5s;
}
.image-container:hover .caption-5 {
    left: 0;
    top: 0;
    transition: all 0.5s;
}
 
/* animazione dall'angolo in alto a destra */
.image-container .caption-6 {
    right: -260px;
    top: -210px;
    transition: all 0.5s;
}
.image-container:hover .caption-6 {
    right: 0;
    top: 0;
    transition: all 0.5s;
}
 
/* animazione dall'angolo in basso a sinistra */
.image-container .caption-7 {
    left: -260px;
    bottom: -210px;
    transition: all 0.5s;
}
.image-container:hover .caption-7 {
    left: 0;
    bottom: 0;
    transition: all 0.5s;
}
 
/* animazione dall'angolo in basso a destra */
.image-container .caption-8 {
    right: -260px;
    bottom: -210px;
    transition: all 0.5s;
}
.image-container:hover .caption-8 {
    right: 0;
    bottom: 0;
    transition: all 0.5s;
}
.ftco-gallery {
  padding-top: 2.5em;
  background-color:#FFFFFF;
 
  
  }

.gallery {
  display: block;
  height: 300px;
  position: relative; }
  
  .gallery .icon {
    width: 150px;
    height: 150px;
    margin: 0 auto;
    z-index: 0;
    opacity: 0;
    position: relative;
    -moz-transition: all 0.6s ease;
    -o-transition: all 0.6s ease;
    -webkit-transition: all 0.6s ease;
    -ms-transition: all 0.6s ease;
    transition: all 0.6s ease; }
    .gallery .icon:after {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      width: 150px;
      height: 150px;
      content: '';
      background: #fcf7f7;
      z-index: -1;
      -moz-transition: all 0.6s ease;
      -o-transition: all 0.6s ease;
      -webkit-transition: all 0.6s ease;
      -ms-transition: all 0.6s ease;
      transition: all 0.6s ease; }
    .gallery .icon span {
	font-size:1.0em;
      color: #000;
	  font-weight:bold;
	  }
  .gallery:hover .icon, .gallery:focus .icon {
    opacity: 0.8; }
    .gallery:hover .icon:after, .gallery:focus .icon:after {
      -webkit-transform: rotate(135deg);
      -ms-transform: rotate(135deg);
      transform: rotate(135deg); }
	  
	 .d-flex {
  display: -webkit-box !important;
  display: -ms-flexbox !important;
  display: flex !important; }
  
  .no-gutters {
  margin-right: 0;
  margin-left: 0; }
  .no-gutters > .col,
  .no-gutters > [class*="col-"] {
    padding-right: 0;
    padding-left: 0; }
	
	.hero-wrap,
.img,
.blog-img,
.user-img {
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center; }
