/* THUMBNAILS */


/* ---------- Zoom container ---------- */
.image-zoom-container {
	list-style: none;
	font-size: 0px;
	
}
.zoom-container {
	position: relative;
	overflow: hidden;
	display: inline-block;
	width: 33.33%; /* this value + 2 should = 33% */
	font-size: 16px;
	font-size: 1rem;
	border: 2px solid transparent;
	vertical-align: top;
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
}

.zoom-container img {
	display: block;
	width: 100%;
	height: auto;
	-webkit-transition: all .5s ease; /* Safari and Chrome */
    -moz-transition: all .5s ease; /* Firefox */
    -ms-transition: all .5s ease; /* IE 9 */
    -o-transition: all .5s ease; /* Opera */
    transition: all .5s ease;
}




.zoom-container:hover img {
	-webkit-transform:translateY(-2%); /* Safari and Chrome */
    -moz-transform:translateY(-2%); /* Firefox */
    -ms-transform:translateY(-2%); /* IE 9 */
    -o-transform:translateY(-2%); /* Opera */
     transform:translateY(-2%);
}

/*
.zoom-container:hover .zoom-caption {
	background: none;
}
*/

.zoom-container .zoom-thumb{
	position: relative;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 10;
	background: rgba(0, 0, 0, .15);
	-webkit-transition: all .5s ease; /* Safari and Chrome */
    -moz-transition: all .5s ease; /* Firefox */
    -ms-transition: all .5s ease; /* IE 9 */
    -o-transition: all .5s ease; /* Opera */
    transition: all .5s ease;
}

.zoom-container .zoom-caption {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 10;
	background: rgba(0, 0, 0, .15);
	-webkit-transition: all .5s ease; /* Safari and Chrome */
    -moz-transition: all .5s ease; /* Firefox */
    -ms-transition: all .5s ease; /* IE 9 */
    -o-transition: all .5s ease; /* Opera */
    transition: all .5s ease;
}


.zoom-container .zoom-caption img {
	background: none;
	/* opacity: 0; */	
	/*
	-webkit-transform:translateY(5px); /* Safari and Chrome
    -moz-transform:translateY(10px); /* Firefox
    -ms-transform:translateY(10px); /* IE 9
    -o-transform:translateY(10px); /* Opera
     transform:translateY(5px);
     */
     
}

.zoom-container:hover .zoom-caption img {
	/* opacity: 100; */
	background: none;
	-webkit-transform:translateY(-3%); /* Safari and Chrome */
    -moz-transform:translateY(-3%); /* Firefox */
    -ms-transform:translateY(-3%); /* IE 9 */
    -o-transform:translateY(-3%); /* Opera */
     transform:translateY(-3%);
}

.zoom-container .zoom-thumb img {
	background: none;
	/* opacity: 0; */	
	/*
	-webkit-transform:translateY(5px); /* Safari and Chrome
    -moz-transform:translateY(10px); /* Firefox
    -ms-transform:translateY(10px); /* IE 9
    -o-transform:translateY(10px); /* Opera
     transform:translateY(5px);
     */
}

.zoom-container:hover .zoom-thumb img {
	background: none;
	/* filter: blur(3px); */
	-webkit-transform:translateY(-2%); /* Safari and Chrome */
    -moz-transform:translateY(-2%); /* Firefox */
    -ms-transform:translateY(-2%); /* IE 9 */
    -o-transform:translateY(-2%); /* Opera */
     transform:translateY(-2%);
}




/* 2-ROW IMAGES */


/* Parent Container [ workaround to avoid blurring both images ] */
.zoom-container2row {
	position: relative;
	overflow: hidden;
	display: inline-block;
	width: 50%; /* this value + 2 should = 33% */
	font-size: 16px;
	font-size: 1rem;
	border: 1.5px solid transparent;
	vertical-align: top;
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
}

.zoom-container2row img {
	display: block;
	width: 100%;
	height: auto;
	-webkit-transition: all .5s ease; /* Safari and Chrome */
    -moz-transition: all .5s ease; /* Firefox */
    -ms-transition: all .5s ease; /* IE 9 */
    -o-transition: all .5s ease; /* Opera */
    transition: all .5s ease;
}

.zoom-container2row:hover img {
	-webkit-transform:translateY(-2%); /* Safari and Chrome */
    -moz-transform:translateY(-2%); /* Firefox */
    -ms-transform:translateY(-2%); /* IE 9 */
    -o-transform:translateY(-2%); /* Opera */
     transform:translateY(-2%);
}

/*
.zoom-container2row:hover .zoom-caption {
	background: none;
}
*/

/* VIDEO IMAGE MAIN CHILD */
.zoom-container2row .zoom-thumb {
	position: relative; /* relative made it work? */
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	/* background: rgba(0, 0, 0, .15); */
	-webkit-transition: all .5s ease; /* Safari and Chrome */
    -moz-transition: all .5s ease; /* Firefox */
    -ms-transition: all .5s ease; /* IE 9 */
    -o-transition: all .5s ease; /* Opera */
    transition: all .5s ease;
}

.zoom-container2row .zoom-thumb img {
	background: none;
	/*
	-webkit-transform:translateY(5px); /* Safari and Chrome
    -moz-transform:translateY(10px); /* Firefox
    -ms-transform:translateY(10px); /* IE 9
    -o-transform:translateY(10px); /* Opera
     transform:translateY(5px);
     */
}

.zoom-container2row:hover .zoom-thumb img {
	background: none;
	/* filter: blur(3px); */
	-webkit-transform:translateY(-2%); /* Safari and Chrome */
    -moz-transform:translateY(-2%); /* Firefox */
    -ms-transform:translateY(-2%); /* IE 9 */
    -o-transform:translateY(-2%); /* Opera */
     transform:translateY(-2%);
}





/* VIDEO TITLE MAIN CHILD */
.zoom-container2row .zoom-caption {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 10;
	/* background: rgba(0, 0, 0, .15); */
	-webkit-transition: all .5s ease; /* Safari and Chrome */
    -moz-transition: all .5s ease; /* Firefox */
    -ms-transition: all .5s ease; /* IE 9 */
    -o-transition: all .5s ease; /* Opera */
    transition: all .5s ease;
}


.zoom-container2row .zoom-caption img {
	background: none;
	/* opacity: 0; */	
	/*
	-webkit-transform:translateY(5px); /* Safari and Chrome
    -moz-transform:translateY(10px); /* Firefox
    -ms-transform:translateY(10px); /* IE 9
    -o-transform:translateY(10px); /* Opera
     transform:translateY(5px);
     */
}

.zoom-container2row:hover .zoom-caption img {
	background: none;
	opacity: 100;
	-webkit-transform:translateY(-3%); /* Safari and Chrome */
    -moz-transform:translateY(-3%); /* Firefox */
    -ms-transform:translateY(-3%); /* IE 9 */
    -o-transform:translateY(-3%); /* Opera */
     transform:translateY(-3%);
}