section.showcase {

}

section.showcase header.showcase-header {
	color: #263238;
	font: bold 24px OpenSans;

	text-transform: uppercase;
	text-align: center;
	padding: 46px 0;
}

section.showcase .products {
	width: 1170px;

	margin: 0 auto;
	position: relative;

	overflow: hidden;
}

section.showcase .sorting {

}

section.showcase .sorting a {
	color: inherit;
	text-decoration: underline;
	margin-left: 10px;
}

/* .products {
	padding: 10px 0;
} */

section.showcase .product {
	width: 270px;
	float: left;
	height: 560px;

	border: 1px solid #ededed;
	
	background: white;
	padding: 14px;
	position: relative;

	margin-right: 30px;
	margin-bottom: 30px;
}

section.showcase .product:nth-child(4n) {
	margin-right: 0;
}

section.showcase .product a {
	color: inherit;
	text-decoration: none;
}

section.showcase .product .image {
	/* padding-top: 100%; */
	height: 240px;
}

section.showcase .product .name {
	font: 18px OpenSans;
	line-height: 18px;
    height: 44px;
}

section.showcase .product footer {
	position: absolute;
	bottom: 20px;
	left: 15px;
	right: 15px;
	height: 234px;
}

section.showcase .product .price {
	font: bold 18px OpenSans;
	color: black;
	position: absolute;
	right: 0;
	top: 8px;
}

section.showcase .product .price-value {
	/* color: #ec2327;
	font: 22px OpenSans; */
}

section.showcase .product .buttons {
	position: absolute;
	bottom: 0;
	width: 100%;
}

section.showcase .product .button-add-to-cart {
	margin-right: 113px;
	height: 40px;

	background: rgba(50,170,167,1);
	color: white;

	text-align: center;
	font: bold 16px OpenSans;
	cursor: pointer;

	padding: 8px 0 0 0;
	border-radius: 7px;
	user-select: none;
}

section.showcase .product .button-go {
	width: 100%;	
	height: 40px;

	background: #388e3c;
	border-radius: 4px;
	color: white;

	text-align: center;
	font: 18px OpenSans;
	cursor: pointer;

	padding: 7px 0 0 0;

	position: absolute;
    bottom: 0;
}

section.showcase .product .amount {
	width: 98px;
	height: 40px;

	border: 1px solid #b0bec5;
	border-radius: 7px;
	color: black;

	font: 18px OpenSans;
	text-align: center;

	position: absolute;
	right: 0;
	bottom: 0;
	user-select: none;
}

section.showcase .product .amount .btn-less {
	float: left;
	border-right: 1px solid #b0bec5;
	width: 29px;
	padding: 6px 0 0 0;
	height: 100%;
	cursor: pointer;
}

section.showcase .product .amount .amount-value {
	float: left;
	width: 38px;
	padding: 6px 0 0 0;
	height: 100%;
}

section.showcase .product .amount .btn-more {
	float: left;
	border-left: 1px solid #b0bec5;
	width: 29px;
	padding: 6px 0 0 0;
	height: 100%;
	cursor: pointer;
}

section.showcase .product .package {
	height: 40px;
	border: 1px solid #b0bec5;
	background: transparent url("/images/package-dropdown-01.png") no-repeat right 5px center;

	border-radius: 7px;
	-webkit-appearance: none;
	width: 160px;

	padding: 0 5px;
}

section.showcase .product .short {
	position: absolute;
	top: 55px;
	bottom: 55px;

	width: 100%;
	font: 14px OpenSans;
	line-height: 108%;
	overflow: hidden;
	overflow-y: auto;
}

@media (max-width: 1186px) {
	section.showcase .products {
		width: 870px;
	}

	section.showcase .product:nth-child(4n) {
		margin-right: 30px;
	}

	section.showcase .product:nth-child(3n) {
		margin-right: 0;
	}
}

@media (max-width: 886px) {
	section.showcase .products {
		width: 570px;
	}

	section.showcase .product:nth-child(3n) {
		margin-right: 30px;
	}

	section.showcase .product:nth-child(2n) {
		margin-right: 0;
	}
}

@media (max-width: 584px) {
	section.showcase .products {
		width: 100%;
	}

	section.showcase .product {
		float: none;
		margin: 0 auto 10px;
		width: 300px;
	}

	section.showcase .product:nth-child(3n) {
		margin-right: inherit;
	}

	section.showcase .product:nth-child(2n) {
		margin-right: inherit;
	}
}

@media (max-width: 528px) {
	section.showcase header.showcase-header {
		padding: 20px 0
	}

	section.showcase .product {
		height: auto;
	}

	section.showcase .product .name {
		font: 14px OpenSans;
		height: auto;
	}

	section.showcase .product .image {
		height: 120px;
		width: 120px;
	}

	section.showcase .product footer {
		position: relative;
		left: 0;
		margin: -30px 0 0 0;
		bottom: auto;
		height: auto;
	}

	section.showcase .product .package {
		position: absolute;
		right: 0;
		top: -45px;
	}

	section.showcase .product .price {
		position: relative;
		text-align: right;
		font-size: 20px;
	}

	section.showcase .product .short {
		position: relative;
		padding: 10px 0;
		overflow: visible;
		top: auto;
		bottom: auto;
		font-size: 12px;
	}

	section.showcase .product footer .buttons {
		position: relative;
	}
}