.top-ten {
	--color-bg: #F2F2F2;
	--top-ten-color-accent: #7D97D1;
	background: var(--color-bg);
}

.top-ten .container {
	max-width: 960px !important;
	padding-bottom: 5rem;
}

.top-ten .headline {
	font-family: var(--font-sans);
	font-size: 5em;
	margin-bottom: 1em;
	text-transform: uppercase;
	letter-spacing: 1.25px;
	font-weight: 100
}

.top-ten .headline span {
	font-family: var(--font-sans);
	text-transform: uppercase;
	letter-spacing: 1.25px;
	display: block;
	font-size: 18px;
	font-weight: 100;
	letter-spacing: 3px;
	margin-top: 5px
}

.top-ten .products {
	display: flex;
	flex-wrap: wrap;
	margin: 0 -2em;
	position: relative
}

.top-ten .products:after {
	content: '';
	position: absolute;
	left: 28%;
	right: 28%;
	top: 6.5em;
	bottom: 6.5em;
	background: #eaeaea
}

.top-ten .product {
	flex: 1 100%;
	padding: 2em;
	max-width: 100%;
	position: relative;
	margin-bottom: 3em;
	z-index: 2
}

.top-ten .product .prod-link {
	display: flex;
	align-items: center
}

.top-ten .product .text {
	text-align: left
}

.top-ten .product-block {
	background: #fff;
	border-radius: 2px;
	padding: 3.5em 3.5em 3.5em 2em;
	position: relative;
	overflow: hidden;
	text-align: center;
	box-shadow: 0 0 40px rgba(0, 0, 0, 0);
	transition: .3s ease
}

.top-ten .product-block:hover {
	box-shadow: 0 0 40px rgba(0, 0, 0, 0.1)
}

.top-ten .product a:hover {
	text-decoration: none
}

.top-ten .products h2 {
	max-width: 380px;
	font-size: 28px;
	line-height: 1.3;
	margin-bottom: .25em
}

.top-ten .products h5 {
	max-width: 400px;
	margin-left: auto;
	margin-right: auto
}

.top-ten .price {
	margin-bottom: 2.5em;
	font-size: 16px
}

.top-ten .rating {
	text-transform: uppercase;
	letter-spacing: 1.25px;
	font-size: 12px;
	color: #aaa;
	margin-bottom: 3.25em
}

.top-ten .rating span {
	display: block
}

.top-ten .rating em {
	color: #333;
	font-style: normal
}

.top-ten .products .prod-img {
	width: 55%;
	max-width: 600px;
	margin-bottom: 1em;
	margin-left: -0.75em;
	margin-right: -0.25em
}

.top-ten .products .prod-img img {
	display: block;
	width: 100%;
	height: auto
}

.top-ten .product:nth-child(even) .prod-img {
	order: 2;
	right: -5em;
	position: relative
}

.top-ten .product:nth-child(even) .text {
	padding-left: 4em;
	z-index: 9
}

.top-ten .prod-quote {
	background: none;
	width: auto;
	margin: 0;
	padding: 0;
	max-width: 300px;
	text-align: left;
	text-indent: -5px;
	color: #555;
	font-size: 16px
}

.top-ten .prod-quote span {
	text-transform: uppercase;
	letter-spacing: 1.25px;
	display: block;
	font-size: 12px;
	text-indent: 0;
	margin-top: .75em;
	color: #aaa
}

.top-ten .lifestyle {
	display: block;
	text-align: center;
	margin: 4px auto 0;
	width: 100%;
	height: auto
}

.top-ten .num {
	position: absolute;
	top: 6em;
	left: 2em;
	background: #000;
	border: 4px solid #f2f2f2;
	color: #f2f2f2;
	font-weight: bold;
	display: block;
	width: 4em;
	height: 4em;
	line-height: 3.6em;
	text-align: center;
	border-radius: 50%;
	margin-left: -2em;
	margin-top: -2em;
	z-index: 9
}

.top-ten .btn-default {
	color: #fff;
	margin: 3em auto;
	transition: .1s
}

.top-ten .btn-default:hover {
	background: #333;
	color: #fff
}

.top-ten .btn-default-grey {
	color: #fff;
	margin: 3em auto;
	margin-left: 1em;
	transition: .1s
}

.top-ten .btn-default-grey:hover {
	background: #333;
	color: #fff
}

.top-ten .products--tc {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-gap: .5rem
}

.top-ten .products--tc .product {
	padding: 2em 1em;
	margin-bottom: 1rem
}

.top-ten .products--tc .product .prod-img,
.top-ten .products--tc .product:nth-child(even) .prod-img {
	order: 1;
	right: auto;
	position: relative
}

.top-ten .products--tc .product .text,
.top-ten .products--tc .product:nth-child(even) .text {
	order: 2;
	z-index: 9;
	padding: 4.5rem 5rem
}

.top-ten .products--tc .product h2,
.top-ten .products--tc .product:nth-child(even) h2 {
	margin-bottom: 1rem
}

.top-ten .products--tc .product .price,
.top-ten .products--tc .product:nth-child(even) .price {
	margin-bottom: 2rem;
	color: #757575
}

.top-ten .products--tc .product-block {
	height: 100%;
	padding: 0
}

.top-ten .products--tc .product .prod-link {
	flex-wrap: wrap
}

.top-ten .products--tc .prod-img {
	width: 100%;
	margin: 0 auto 1rem
}

.top-ten .products--tc .prod-quote {
	max-width: 100%;
	text-indent: 0
}

.top-ten .products--tc .num {
	top: 2em;
	left: 5.5em
}

@media (max-width:851px) {
	.top-ten {
		padding: 10px
	}

	.top-ten .headline {
		font-size: 4.5em;
		margin-bottom: .75em
	}

	.top-ten .headline span {
		font-size: 16px;
		margin-top: 5px
	}

	.top-ten .num {
		top: 2em;
		left: 50%
	}

	.top-ten .btn-default,
	.top-ten .btn-default-grey {
		margin: .25em;
		font-size: 12px
	}

	.top-ten .btn-default-grey {
		margin-bottom: 3em
	}

	.top-ten .product-block {
		padding: 3em 2em 3em 2em
	}

	.top-ten .product .prod-link {
		flex-wrap: wrap;
		text-align: center
	}

	.top-ten .products .prod-img {
		width: 100%;
		margin: 1.5em auto 2em;
		order: 1;
		position: relative;
		left: .5rem
	}

	.top-ten .products .prod-img .suggested_image div {
		overflow: visible !important;
		width: 100% !important;
		height: auto !important;
		position: relative !important;
		top: 0 !important
	}

	.top-ten .product:nth-child(even) .prod-img {
		order: 1;
		right: auto
	}

	.top-ten .product:nth-child(even) .text {
		padding-left: 0
	}

	.top-ten .products .text {
		order: 2;
		text-align: center;
		margin-left: auto;
		margin-right: auto
	}

	.top-ten .price {
		margin-bottom: 1.5em
	}

	.top-ten .products h2 {
		max-width: 80%;
		font-size: 24px;
		line-height: 1.2;
		margin-left: auto;
		margin-right: auto
	}

	.top-ten .prod-quote {
		text-align: center;
		padding: 0 15px;
		font-size: 14px
	}

	.top-ten .prod-quote span {
		font-size: 11px
	}

	.top-ten .products--tc {
		grid-template-columns: repeat(1, 1fr);
		grid-gap: 1rem;
		padding-right: 2.5rem;
		padding-left: 2.5rem
	}

	.top-ten .products--tc .product {
		padding: 2em 0;
		margin-bottom: 1rem
	}

	.top-ten .products--tc .product .prod-img,
	.top-ten .products--tc .product:nth-child(even) .prod-img {
		order: 1;
		right: auto;
		position: relative
	}

	.top-ten .products--tc .product .text,
	.top-ten .products--tc .product:nth-child(even) .text {
		order: 2;
		z-index: 9;
		padding: 3rem 1rem;
		text-align: left
	}

	.top-ten .products--tc .product p,
	.top-ten .products--tc .product:nth-child(even) p {
		text-align: left
	}

	.top-ten .products--tc .product h2,
	.top-ten .products--tc .product:nth-child(even) h2 {
		max-width: 100%;
		margin-left: 1.5rem;
		margin-bottom: 2rem
	}

	.top-ten .products--tc .product-block {
		height: 100%;
		padding: 0
	}

	.top-ten .products--tc .prod-img {
		width: 100%;
		margin: 0 auto 1rem;
		left: 0
	}

	.top-ten .products--tc .prod-quote {
		max-width: 100%;
		text-indent: 0;
		padding: 0;
		margin-left: 1.5rem
	}

	.top-ten .products--tc .num {
		left: 3em
	}
}