.swiper-container {
    width: 100%;
    height: 216px;
}

.reference:nth-child(odd){
  background: #EDEDED;
  padding-top: 30px;
  padding-bottom: 30px;
}

.reference{
  margin-top: 30px;
  position: relative;
}

.custom-text-center{
  padding: 0 5%;
}

.image-red-parent{
  height: 320px;
  margin-top: 30px;
  overflow: hidden;
}
.image-red {
 height: 100%;
 transition: all .5s;
 background-size: auto 110%;
 background-position: center;
 background-repeat: no-repeat;


	color: white;
	font-size: 24px;
	display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
	display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
	display: -ms-flexbox;      /* TWEENER - IE 10 */
	display: -webkit-flex;     /* NEW - Chrome */
	display: flex;             /* NEW, Spec - Opera 12.1, Firefox 20+ */
	align-items: center;
	justify-content: center;
	font-size: 40px;
	font-style: uppercase;
}

.image-red:hover, .image-red:focus{
  background-size: auto 125%;
  /*transform: scale(1.2);
  transition: all .5s;
  width: 100%;*/

}

.image-red p {
	color: white !important;
}
.references-img {
	height: 216px;
	width: 100%;
	background-size: cover;
  transition: all .3s;
  background-repeat: no-repeat;
}
.references-description {
	width: 100%;
	height: 70px;
	position: absolute;
	bottom: 0px;
	background-color: rgba(180,1,48, 0.5);
	color: white;
	text-transform: uppercase;
	align-items: center;
	padding-left: 15px;
	display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
	display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
	display: -ms-flexbox;      /* TWEENER - IE 10 */
	display: -webkit-flex;     /* NEW - Chrome */
	display: flex;             /* NEW, Spec - Opera 12.1, Firefox 20+ */
	opacity: 0;
	-webkit-transition: opacity 0.3s;
    -moz-transition:  opacity 0.3s;
    -o-transition:  opacity 0.3s;
    transition:  opacity 0.3s;
}
@media screen and (max-width: 992px){
  	.references-description{
    	opacity: 1;
  	}
  	.image-red {
		background-size: auto 142% !important;
  	}
  	.image-red:hover, .image-red:focus{
		background-size: auto 150% !important;
		/*transform: scale(1.2);
		transition: all .5s;
		width: 100%;*/
	}
}
	.references-description h3 {
		font-size: 20px;
		margin: 0px;
		color: white;
	}
	.references-description p {
		margin: 0px;
		font-size: 14px;
		color: white;
	}
.references-img:hover .references-description, .team-img:hover .references-description {
	opacity: 1;

	-webkit-transition: opacity 0.3s;
    -moz-transition:  opacity 0.3s;
    -o-transition:  opacity 0.3s;
    transition:  opacity 0.3s;
}

@media screen and (min-width:992px) {
  .custom-text-center{
    padding: 0 25%;
  }
}