.categories
{
	display			: flex;
	flex-direction	: row;
	justify-content	: center;
	align-items		: flex-start;
	min-width		: 1080px;
	width			: 70%;
	height			: auto;
	margin			: 0px auto!important;
	margin-top		: 40px!important;
}
.category-list
{
	flex			: 1 2;
	max-width		: calc(25% - 40px);
	margin-right	: 40px;
	background-color: #FFF;
}
.category-list ul
{
	margin			: 0;
	padding			: 0;
	list-style		: none;
}
.category-list ul li
{
	margin			: 0;
	padding			: 0;
	border-bottom	: 1px solid #EEE;
}
.category-list ul li a
{
	display			: block;
	font-family		: "Roboto", arial;
	color			: #000;
	display			: block;
	font-size		: .8em;
	text-decoration	: none;
	font-weight		: 300;
	padding			: 10px;
	letter-spacing	: 0.05em;
}

.category-list ul li a
{
	--initialTextColor	: #444;
	--slideTextColor	: #222;
	--initialBgColor	: #FFF;
	--slideBgColor		: #EEE;

      color: var(--initialTextColor);

      background-image	: linear-gradient(90deg,
          var(--initialBgColor) 0%,
          var(--initialBgColor) 50%,
          var(--slideBgColor) 50%,
          var(--slideBgColor) 100%);
      background-size	: 200%;
      transition		: background-position .3s cubic-bezier(.47, .1, 1, .63), color .2s linear;
      transition-delay	: 0.0s, 0.15s;
}

.category-list ul li a:hover,
.category-list ul li a.selected
{
	color				: var(--slideTextColor);
	cursor				: pointer;
	background-position	: -100% 100%;
	font-weight			: 400;
}

.category-list ul li a span
{
	float			: right;
}

.category-list ul li ul
{
	margin			: 0;
	margin-left		: 20px;
	padding			: 0;
	border-bottom	: none;
	display			: none;
}
.category-list ul li:last-child
{
	border			: none;
}
.category-list ul li ul li,
.category-list ul li ul li:last-child
{
	border-top		: 1px solid #DDD;
	border-bottom	: none!important;
}

.product-list
{
	flex			: 2;
	max-width		: 75%;
	min-width		: 60px;
	display			: flex;
	flex-direction	: row;
	align-items		: flex-start;
	flex-wrap		: wrap;
}

.products
{
	flex			: 0 0 27%;
	max-width		: 30%;
	margin			: 0;
	margin-bottom	: 30px;
	-moz-transition		: 0.3s;
	-o-transition		: 0.3s;
	-webkit-transition	: 0.3s;
	transition			: 0.3s;
}

.products-media
{
	width			: 100%;
	padding-top		: 100%;
	overflow		: hidden;
	position		: relative;
	overflow		: hidden;
	background-color	: #FFF;
	background-repeat	: no-repeat;
	background-position	: center top;
	background-size		: cover;
	border			: 1px solid #999;
	-moz-transition		: 0.3s;
	-o-transition		: 0.3s;
	-webkit-transition	: 0.3s;
	transition			: 0.3s;
}

.products-media:hover
{
	border			: 1px solid rgb(233,34,47);
	background-size	: cover;
	box-shadow		: 0px 0px 10px rgba(233,34,47, .2);
}

.products-link
{
	font-family		: "Roboto", arial;
	color			: #000;
	display			: block;
	font-size		: 1em;
	text-decoration	: none;
	text-align		: center;
	padding			: 15px 0 5px 0;
	font-weight		: 400;
	line-height		: 25px;
}
.products-subs
{
	font-family		: "Roboto", arial;
	color			: #000;
	display			: block;
	font-size		: .8em;
	text-align		: center;
	padding			: 10px 0;
	font-weight		: 300;
}
.products-btn
{
	font-family		: "Roboto", arial;
	color			: #FFF;
	display			: block;
	font-size		: .8em;
	text-decoration	: none;
	text-align		: center;
	line-height		: 30px;
	background-color: rgb(233,34,47);
	font-weight		: 300;
	margin			: 10px auto;
	max-width		: 70%;
}

.products-media a
{
	display			: block;
	position		: absolute;
	top				: 0;
	left			: 0;
	right			: 0;
	bottom			: 0;
}

@media (max-width:540px)
{
	.categories
	{
		display			: flex;
		flex-direction	: row;
		justify-content	: center;
		align-items		: flex-start;
		min-width		: 1080px;
		width			: 70%;
		height			: auto;
		margin			: 0px auto!important;
		margin-top		: 40px!important;
	}
	.category-list
	{
		flex			: 1 2;
		max-width		: calc(25% - 40px);
		margin-right	: 40px;
		background-color: #FFF;
		position		: absolute;; 
	}
	.category-list ul
	{
		margin			: 0;
		padding			: 0;
		list-style		: none;
	}
	.category-list ul li
	{
		margin			: 0;
		padding			: 0;
		border-bottom	: 1px solid #EEE;
	}
	.category-list ul li a
	{
		display			: block;
		font-family		: "Roboto", arial;
		color			: #000;
		display			: block;
		font-size		: .8em;
		text-decoration	: none;
		font-weight		: 300;
		padding			: 10px;
		letter-spacing	: 0.05em;
	}

	.category-list ul li a
	{
		--initialTextColor	: #444;
		--slideTextColor	: #222;
		--initialBgColor	: #FFF;
		--slideBgColor		: #EEE;

	      color: var(--initialTextColor);

	      background-image	: linear-gradient(90deg,
	          var(--initialBgColor) 0%,
	          var(--initialBgColor) 50%,
	          var(--slideBgColor) 50%,
	          var(--slideBgColor) 100%);
	      background-size	: 200%;
	      transition		: background-position .3s cubic-bezier(.47, .1, 1, .63), color .2s linear;
	      transition-delay	: 0.0s, 0.15s;
	}

	.category-list ul li a:hover,
	.category-list ul li a.selected
	{
		color				: var(--slideTextColor);
		cursor				: pointer;
		background-position	: -100% 100%;
		font-weight			: 400;
	}

	.category-list ul li a span
	{
		float			: right;
	}

	.category-list ul li ul
	{
		margin			: 0;
		margin-left		: 20px;
		padding			: 0;
		border-bottom	: none;
		display			: none;
	}
	.category-list ul li:last-child
	{
		border			: none;
	}
	.category-list ul li ul li,
	.category-list ul li ul li:last-child
	{
		border-top		: 1px solid #DDD;
		border-bottom	: none!important;
	}

	.product-list
	{
		flex			: 2;
		max-width		: 75%;
		min-width		: 60px;
		display			: flex;
		flex-direction	: row;
		align-items		: flex-start;
		flex-wrap		: wrap;
	}

	.products
	{
		flex			: 0 0 27%;
		max-width		: 30%;
		margin			: 0;
		margin-bottom	: 30px;
		-moz-transition		: 0.3s;
		-o-transition		: 0.3s;
		-webkit-transition	: 0.3s;
		transition			: 0.3s;
	}

	.products-media
	{
		width			: 100%;
		padding-top		: 100%;
		overflow		: hidden;
		position		: relative;
		overflow		: hidden;
		background-color	: #FFF;
		background-repeat	: no-repeat;
		background-position	: center top;
		background-size		: cover;
		border			: 1px solid #999;
		-moz-transition		: 0.3s;
		-o-transition		: 0.3s;
		-webkit-transition	: 0.3s;
		transition			: 0.3s;
	}

	.products-media:hover
	{
		border			: 1px solid rgb(233,34,47);
		background-size	: cover;
		box-shadow		: 0px 0px 10px rgba(233,34,47, .2);
	}

	.products-link
	{
		font-family		: "Roboto", arial;
		color			: #000;
		display			: block;
		font-size		: 1em;
		text-decoration	: none;
		text-align		: center;
		padding			: 15px 0 5px 0;
		font-weight		: 400;
		line-height		: 25px;
	}
	.products-subs
	{
		font-family		: "Roboto", arial;
		color			: #000;
		display			: block;
		font-size		: .8em;
		text-align		: center;
		padding			: 10px 0;
		font-weight		: 300;
	}
	.products-btn
	{
		font-family		: "Roboto", arial;
		color			: #FFF;
		display			: block;
		font-size		: .8em;
		text-decoration	: none;
		text-align		: center;
		line-height		: 30px;
		background-color: rgb(233,34,47);
		font-weight		: 300;
		margin			: 10px auto;
		max-width		: 70%;
	}

	.products-media a
	{
		display			: block;
		position		: absolute;
		top				: 0;
		left			: 0;
		right			: 0;
		bottom			: 0;
	}

}