body
{
	margin			: 0px;
	padding			: 0px;
	background		: #CCC url(/img/back.png);
}
h1
{
	width			: 100%;
	font-family		: "PT Sans", sans-serif;
	font-size		: 1.2em;
	font-weight		: 300!important;
	color			: #E60002;
	margin			: 30px auto;
}
h2
{
	width			: 100%;
	font-family		: "PT Sans", sans-serif;
	font-size		: .8em;
	font-weight		: 300;
	color			: #E60002;
	margin			: 30px auto;
	text-align		: center;
}
.img
{
	width			: 150px;
	height			: auto;
	position		: fixed;
	top				: 50px;
	left			: 50%;
	transform		: translateX(-50%);
}

.search-input
{
	display			: inline-block;
	font-family		: 'PT Sans', arial;
	font-size		: 1em;
	line-height		: 40px;
	color			: #4B4C4C;
	text-decoration	: none;
	font-weight		: 300;
	border			: 1px solid #EEE;
	padding			: 5px 10px;
	background-color: #FFF;
	width			: 80%;
	vertical-align	: top ;
	text-align		: center ;
}
.search-input:focus
{
	border			: 1px solid #ed1b24;
}

#lastprice
{
	font-family		: 'PT Sans', arial;
	border			: 1px solid #999;
	font-size		: 1em;
	line-height		: 30px;
}

.center
{
	width			: 100%;
	height			: 20vh;
	text-align		: center;
}

.Table
{
	width			: 100%;
	margin			: 10px auto;
	border-radius	: 20px;
	overflow		: hidden;
	background-color: #FFF;
}
.Table td
{
	background-color: #F3F3F3;
	line-height		: 20px;
	font-family		: 'Roboto', sans-serif;
	padding			: 10px 15px;
	font-size		: .75em;
	color			: #666;
	vertical-align	: top!important:
}
.Table td span
{
	display			: inline-block;
	width			: 150px;
	background-color: #F5F5F5;
	padding			: 5px 10px;
	margin-right	: 10px;
	color			: #333;
	border-right	: 1px dotted #E0E0E0;
	font-weight		: 500;
	vertical-align	: top;
}

.products
{
	max-width		: 80%;
	min-width		: 600px;
	margin			: 0px auto;
	display			: flex;
	flex-direction	: row;
	flex-wrap		: wrap;
	justify-content: space-around;
}

 

.product
{
	flex			: 0 0 50%;
	max-width		: 49%;
	margin			: 1%;
	min-height		: 420px;
	-moz-transition		: 0.3s;
	-o-transition		: 0.3s;
	-webkit-transition	: 0.3s;
	transition			: 0.3s;
	background-color	: #FFF;
	background-repeat	: no-repeat;
	background-size		: cover;
	background-position	: center top;
	text-align		: center ;
}
.product:hover
{
	box-shadow		: 0px 0px 30px rgba(0,0,0, .1);
}
.product:hover > .product-btn
{
	display			: block;
}

.product-media
{
	width			: 90%;
	padding-top		: 80%;
	overflow		: hidden;
	position		: relative;
	overflow		: hidden;
	background-color	: #FFF;
	background-repeat	: no-repeat;
	background-position	: center top;
	background-size		: cover;
}

.product-link
{
	font-family		: "PT Sans", arial;
	color			: #333;
	display			: block;
	font-size		: .8em;
	text-decoration	: none;
	text-align		: center;
	padding			: 10px 0 5px 0;
	font-weight		: 400;
	line-height		: 20px;
	max-width		: 90%;
	margin			: 0px auto;
	overflow		: hidden;
}
.product-price
{
	font-family		: "PT Sans", arial;
	color			: #333;
	display			: block;
	font-size		: 1.6em;
	text-decoration	: none;
	text-align		: center;
	font-weight		: 400;
	height			: 10px;
	padding			: 10px 20px;
}
.product-subs
{
	font-family		: "PT Sans", arial;
	color			: #000;
	display			: block;
	font-size		: .8em;
	text-align		: center;
	padding			: 10px 0;
	font-weight		: 200;
}
.product h1
{
	font-family		: "Muli Thin", arial;
	font-size		: 18px;
	font-weight		: 400;
	color			: #FF4;
	padding			: 30px;
}

.product span
{
	font-family		: "PT Sans", arial;
	color			: #FFF;
	display			: block;
	font-size		: .9em;
	text-align		: left;
	padding			: 20px 30px;
	font-weight		: 300;
}

.product-btn
{
	font-family		: "PT Sans", arial;
	color			: #FFF!important;
	display			: block;
	font-size		: 1em;
	text-decoration	: none;
	text-align		: center;
	line-height		: 40px;
	background-color: #ed1b24;
	font-weight		: 200;
	margin			: 10px auto;
	width			: 80%;
	border-radius	: 3px;
	transition		: all .3s ease;
}
.product-btn:hover
{
	box-shadow		: 0px 0px 10px rgba(0,0,0, .1);
	background-color: #E60002;
}
.product-btn span
{
	display			: inline-block;
	padding			: 0;
}
.product-media a
{
	display			: block;
	position		: absolute;
	top				: 0;
	left			: 0;
	right			: 0;
	bottom			: 0;
}
.product-btn-barcode
{
	font-family		: "PT Sans", arial;
	color			: #000!important;
	display			: block;
	font-size		: 1em;
	text-decoration	: none;
	text-align		: center;
	line-height		: 40px;
	font-weight		: 200;
	margin			: 10px auto;
	width			: 80%;
	border-radius	: 3px;
	transition		: all .3s ease;
}

#minus,
#plus
{
	width				: 30px;
	height				: 50px;
	line-height			: 50px;
	font-family			: "PT Sans", sans-serif;
	font-size			: 19px;
	font-weight			: 300;
	color				: #FFF;
	background-color	: #BBBBBB;
	border				: 1px solid #BBBBBB;
	transition			: all .2s ease;
}
.product input[type="number"]
{
	width				: 50px;
	line-height			: 48px;
	font-family			: "PT Sans", sans-serif;
	font-size			: 24px;
	font-weight			: 300;
	color				: #000;
	border				: none;
	text-align			: center;
}
.product input[type=number]::-webkit-inner-spin-button,
.product input[type=number]::-webkit-outer-spin-button
{
  	-webkit-appearance	: none;
	appearance			: none;
 	margin				: 0;
}


@media only screen and (max-width:540px)
{

	.search-input
	{
		display			: inline-block;
		font-family		: 'PT Sans', arial;
		font-size		: .9em;
		line-height		: 40px;
		color			: #4B4C4C;
		text-decoration	: none;
		font-weight		: 300;
		border			: 1px solid #EEE;
		padding			: 5px 10px;
		background-color: #FFF;
		width			: 80%;
	}
	.search-input:focus
	{
		border			: 1px solid #ed1b24;
	}
	
	.products
	{
		max-width		: 85%;
		min-width		: auto;
		margin			: 5% auto;
		display			: block;
	}

	.product
	{
		flex			: none;
		max-width		: 100%;
		margin			: 5vh 0 auto;
		min-height		: 60vh;
		display			: block;
		text-align		: center ;
	}

	.product:hover > .product-btn
	{
		display			: block;
	}
	.product-btn
	{
		display			: block;
	}
	.product-data
	{
		width				: 80%;
		margin				: 0px;
		padding				: 0px 10%;
		position			: relative;
	}
	*
	{
		outline				: none;
	}
	#minus,
	#plus
	{
		width				: 15vw;
		line-height			: 40px;
		border-radius		: 0 ;
	}
	.product input[type="number"]
	{
		width				: 35vw;
	}

	.product-media
	{
		width			: 80%;
		padding-top		: 80%;
		margin			: 0 10% auto;
		overflow		: hidden;
		position		: relative;
		overflow		: hidden;
		background-color	: #FFF;
		background-repeat	: no-repeat;
		background-position	: center top;
		background-size		: cover;
	}
	.product-image img
	{
		width				: 80%;
		height				: auto;
		max-height			: 30vh;
		max-width			: auto;
		object-fit			: cover;
	}
}