/**
 * All of the CSS for your public-facing functionality should be
 * included in this file.
 */

.collection {
	margin: 20px auto;
	text-align: center;
}

.collection-wrappers {
	display: table;
	width: 100%;
}

.tables-thumd,
.prev-content {
	display: table-cell;
	vertical-align: middle;
}

.thumb {
	display: table;
	-webkit-transition: all 0.4s ease 0s;
	-o-transition: all 0.4s ease 0s;
	transition: all 0.4s ease 0s;
	border: 1px solid #EEE;
	margin: 4px;
	width: 40px;
}

.thumb a:focus {
	outline: none;
}

.thumb a {
	cursor: pointer;
	display: inline-block;
	height: 100%;
	opacity: 0.5;
	-webkit-transition: all 0.4s ease 0s;
	-o-transition: all 0.4s ease 0s;
	transition: all 0.4s ease 0s;
	vertical-align: middle;
	line-height: normal;
}

.thumb a:hover {
	opacity: 1;
}

.thumb img {
	display: inline-block;
	vertical-align: middle;
	padding: 2px 0;
}

.prev img {
	display: inline-block;
}

.prev {
	background-color: #ffffff;
	height: 400px;
	margin: 0 auto;
	max-height: 100%;
	max-width: 550px;
	overflow: hidden;
	text-align: center;
	vertical-align: middle;
	width: 100%;
}

.prev>a {
	height: 100%;
	vertical-align: middle;
	width: 100%;
}

.prev-content {
	background-color: #FFF;
	max-height: 320px;
	margin: 0 auto;
	overflow: hidden;
	text-align: center;
	height: 100%;
	width: 100%;
}

.prev-content img {
	display: inline-block;
	height: auto;
	width: auto;
	max-height: 100%;
}

.prev-content>a {
	height: 100%;
	vertical-align: middle;
	width: 100%;
}

.prev-wrappers {
	width: 100%;
	height: 100%;
	display: table;
}

.prev-img {
	display: inline-block;
	position: relative;
}

.click-on-img-banner-box {
	position: absolute;
	right: 0;
	bottom: 0;
	width: 15%;
	min-width: 70px;
}

.click-on-img-banner-box:before {
	content: "";
	display: block;
	margin-top: 100%;
}

.click-on-img-banner-content {
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	padding: 1em;
	text-align: center;
	vertical-align: middle;
	color: black;
	background-color: rgba(255, 190, 0, 0.5);
	border-radius: 50%;
	font-size: .95em;
	font-weight: 400;
	line-height: 1.5em;
	-webkit-box-shadow: 0 0 2px rgba(255, 190, 0, 0.3);
	        box-shadow: 0 0 2px rgba(255, 190, 0, 0.3);
}

.dual-product-su-row .click-on-img-banner-content,
.shoe-list-item .click-on-img-banner-content {
	font-size: .7em;
	font-weight: 500;
	line-height: 1.3em;
}

.prev-img:hover .click-on-img-banner-content {
	background: rgba(255, 190, 0.1);
}

.prev-img img {
	display: block;
	border: none;
}

@media( min-width: 768px ){

    .column .collection-wrappers:not(.index-table) .prev-img img {
        width: 300px;
        height: 141px;
    }
    
    .collection-wrappers:not(.index-table) .prev-img img {
        width: 680px;
        height: 320px;
    }

}

@media( max-width: 767px ){
    .collection-wrappers:not(.index-table) .prev-img img {
        width: 260px;
        height: 123px;
    }
}

.collection-wrappers.index-table .prev-img img {
    width: 150px;
    height: 70px;
}

.prev-img .magnifying-glass {
	cursor: zoom-in;
	cursor: -webkit-zoom-in;
	cursor: -moz-zoom-in;
}

.prev-product-title {
	margin: 20px auto;
	text-align: center;
	width: 100%;
}

.prev-product-title-content {
	font-size: 20px;
	font-weight: bolder;
}


/* For mobile */

.tables-thumd-mobile {
	display: none;
	margin: 10px auto;
	text-align: center;
}

.tables-thumd-mobile .thumb {
	display: inline-block;
}

/* fixed product view h4 + space below  */
.column > div[itemprop="itemReviewed"] {
    display: grid;
}
.row > .column {
    display: block;
}

@media (max-width: 480px) {
	.tables-thumd-mobile {
		display: none;
	}
	.tables-thumd {
		display: none;
	}
}