﻿body, div, img, a, h1, h2, p { padding:0; margin:0; border:0; }
.ProductItem {
	overflow: hidden;
	width: 100%;
	min-width: 280px;
	height: 300px;
	margin: 0 auto;
}
.ProductItem a {
    text-decoration: none; /* delete this after responsive page integration */
}
.ProductItemSmall .wrapper {
	width: 100%;
	height: 100%;
	height: 300px;
	object-fit: contain;
}
.ProductItemSmall .title {
	position: relative;
	background-color: #1D9AD6;
	height: 40px;
	padding: 0 10px;
	z-index: 2;
}
.ProductItemSmall .title-text-wrapper {
	float: left;
	line-height: 40px;
}
.ProductItemSmall .title-image-wrapper {
	float: right;
    margin-top: 10px;
	width: 20px;
	height: 20px;
}
.ProductItemSmall .description {
	position: relative;
	background-color: rgba(255, 255, 255, 0.8);
	padding: 10px;
	opacity: 0;
	z-index: 1;
	-webkit-transform: translateY(-100%);
	-moz-transform: translateY(-100%);
	-o-transform: translateY(-100%);
	transform: translateY(-100%);
	-webkit-transition: all 300ms ease-out;
	-moz-transition: all 300ms ease-out;
	-o-transition: all 300ms ease-out;
	transition: all 300ms ease-out;
}
.ProductItemSmall h1 {
	font-family: convergeFont-LatoMedium;
	font-weight: normal;
	font-size: 1.75em;
	color: white;
	letter-spacing: 1px;
}
.ProductItemSmall h2 {
	font-family: convergeFont-LatoBold;
	font-size: 1.5em;
	font-weight: normal;
	color: #616264;
	margin-top: 10px;
}
.ProductItemSmall p {
	font-family: convergeFont-LatoRegular;
	font-weight: normal;
	font-size: 1.5em;
	color: #616264;
}
.ProductItemSmall:hover .description,
.ProductItemSmall:active .description {
	-webkit-transform: translateY(0%);
	-moz-transform: translateY(0%);
	-o-transform: translateY(0%);
	transform: translateY(0%);
	opacity: 1;
}






.ProductItemWide {
    display: none;
    width: 100%;
    height: 100%;
}
.ProductItemWide img {
	width: 360px;
	height: 300px;
	float: left;
}
.ProductItemWide .wrapper {
	width: 100%;
	height: 100%;
	padding-left: 370px; /* Size of the image */
	padding-right: 10px;
}
.ProductItemWide h1 {
	font-family: convergeFont-LatoMedium;
	font-weight: normal; /* delete this after responsive page integration */
	font-size: 1.75em;
	color: white;
	letter-spacing: 1px;
}
.ProductItemWide h2 {
	font-family: convergeFont-LatoBold;
	font-size: 1.5em;
	font-weight: normal; /* delete this after responsive page integration */
	opacity: 0.5;
}
.ProductItemWide p {
	font-family: convergeFont-LatoRegular;
	font-weight: normal; /* delete this after responsive page integration */
	font-size: 1.5em;
	margin: 1em 0;
}
.ProductItemWide:hover h2 {
	opacity: 1;
}
.ProductItemWide {
	
}
.ProductItemWide {
	
}
.ProductItemWide {
	
}
.ProductItemWide {
	
}







.ProductItem[min-width~="500px"] .ProductItemSmall {
	display: none;
}
.ProductItem[min-width~="500px"] .ProductItemWide {
	display: block;
}
.ProductItem[max-width~="359px"] .ProductItemSmall .title {
	height: 80px;
}
.ProductItem[max-width~="359px"] .ProductItemSmall .title-text-wrapper {
    position:relative;
	width:90%;
	top:50%;
	transform:translateY(-50%);
}
.ProductItem[max-width~="359px"] .ProductItemSmall .title-image-wrapper {
    margin-top: 30px;
}

@media screen and (max-width: 400px) {
	.ProductItemSmall .description {
		-webkit-transform: translateY(0%);
		-moz-transform: translateY(0%);
		-o-transform: translateY(0%);
		transform: translateY(0%);
		opacity: 1;
	}
}
