html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,
acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,
strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,
table,caption,tbody,tfoot,thead,tr,th,td
{margin:0;padding:0;border:0;outline:0;vertical-align:baseline;background:transparent}
ol,ul{list-style:none}
blockquote,q{quotes:none}
blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}
:focus{outline:0}
ins{text-decoration:none}
del{text-decoration:line-through}
table{border-collapse:collapse;border-spacing:0}

*
{
	box-sizing: 		border-box;
}

html
{
	background-color:   white;
}

body
{
	font-family:		'Open Sans', Arial, sans-serif;
	font-size:          16px;
}

body,
nav > .content a,
#contestTag,
.content .backlink a
{
	color:              #2d3134;
}

a
{
	color:              inherit;
	text-decoration:    none;
}

a:hover
{
	color:              #ff6700;
}

h1, h2, h3, h4
{
	margin:				0;
}

h2
{
	margin-bottom: 			1ex;
}

p
{
	margin-top:				0.5em;
}

button:not(.plain),
a.button
{
	display:                inline-block;
	border-style:           none;
	cursor:                 pointer;
	font-family: 			'Roboto Condensed', 'Open Sans', Arial, sans-serif;
	color:					white;
	background-color: 		#e80303;
	border-radius: 			7px;
	padding:				18px 20px;
	font-size:				18px;
	font-weight: 			bold;
	text-transform: 		uppercase;
}

button:hover:not(.disabled):not(.plain):not(:disabled),
a.button:hover
{
	background-color: 		#f82323;
	box-shadow: 			0 3px 6px 4px rgba( .8, .8, .8, 0.25 );
}

button:not(.plain):disabled
{
	background-color:       #8e8e8e;
}

button.plain
{
	background-color: 		transparent;
	border: 				none;
	padding:				0;
	cursor: 				pointer;
}

button.try,
button.try:not(.disabled):not(.plain):hover
{
	background-color: 		white;
	color:              	#2d3134;
}

select,
input[type="text"],
input[type="email"],
input[type="password"],
textarea
{
	border:                 1px solid #ccc;
	border-radius: 			4px;
	padding:                4px 8px;
}

select,
input[type="checkbox"]
{
	-o-appearance:          none;
	-moz-appearance:        none;
	-webkit-appearance:     none;
	appearance:             none;
}

select
{
	background-image:       url( '../images/chevron-down.svg' );
	background-size:      	16px;
	background-repeat:      no-repeat;
	background-position:    right 4px center;
	background-color:       white;
	padding:                4px 28px 4px 8px;
}

input[type="checkbox"]
{
	border:                 1px solid #ccc;
	border-radius: 			4px;
	color:					#e80303;
	background-color: 		white;
	outline: 				none;
	cursor: 				pointer;
	display: 				inline-flex;
	width: 					18px;
	height:					18px;
	justify-content: 		center;
	align-content: 			flex-start;
	font-size: 				17px;
	font-weight: 			bold;
	line-height: 			11px;
	vertical-align: 		top;
	margin-left:			0;
	flex:					0 0 auto;
}

input[type="checkbox"]:checked::before
{
	content:    			'\2714';
	display:    			block;
}

select:focus,
input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
textarea:focus
{
	outline:                none;
	border-color:           #ff6700;
}

select::-ms-expand
{
	display:                none;
}

main
{
	width:          100%;
	padding:        0;
	margin-left:    auto;
	margin-right:   auto;
}

nav > .content,
nav.breadcrumbs,
header,
main > .content,
footer > .content,
#product > div,
#clock > div,
.content
{
	max-width:      960px;
	margin-left: 	auto;
	margin-right: 	auto;
}

@media( max-width: 980px )
{
	nav > .content,
	nav.breadcrumbs,
	header,
	main > .content,
	footer > .content
	{
		max-width:      calc( 100% - 20px );
	}
}

.narrow.content
{
	max-width: 		630px;
}

@media( max-width: 640px )
{
	.narrow.content
	{
		max-width:      calc( 100% - 20px );
	}
}

header
{
	min-height:             88px;
	grid-area:              content;
	display:                flex;
	flex-wrap:              wrap;
	align-items:            center;
	position:               relative;
	margin-top:             -10px;
	padding:                10px 0;
}

header > *
{
	margin-top:             10px;
}

#headerLogo img
{
	max-width: 				250px;
	max-height:				100px;
}

#headerLogo,
#headerActions
{
	flex:                   0 0 auto;
}

#headerSlogan
{
	flex:                   1 0 auto;
	font-size:              16px;
	line-height:            20px;
	padding-left:           30px;
}

#headerSlogan div:first-child
{
	font-weight:            bold;
}

#headerSlogan div + div
{
	font-style:             italic;
}

@media( max-width: 700px )
{
	#headerSlogan
	{
		display: 			none;
	}
}

#userIcon
{
	position: 				relative;
}

#userIcon img
{
	border-radius: 			50%;
	max-width: 				24px;
	max-height:				24px;
	position: 				absolute;
	top:					2px;
	left:					2px;
}

#userIcon > div
{
	display: 				none;
	position: 				absolute;
	left:					50%;
	top:					130%;
	transform: 				translateX( -50% );
	background-color: 		#f25022;
	color:					white;
	border-radius: 			12px;
	padding:				0 8px;
	white-space: 			nowrap;
	font-size: 				14px;
	font-weight:			bold;
}

#userIcon:hover > div
{
	display:				block;
}

#userIcon > div::before
{
	content: 				'';
	width:					10px;
	height:					10px;
	display: 				block;
	position: 				absolute;
	top:					-3px;
	left:					50%;
	z-index: 				-2;
	background-color: 		#f25022;
	transform: 				translateX( -50% ) rotate( 45deg );
}

#userIcon.loggedIn,
#userAvatar,
.comment .avatar
{
	border-radius: 			50%;
	color:					#c07325;
	border-color: 			#f5b376;
	width:					28px;
	height:					28px;
	padding-top:			4px;
	text-align: 			center;
}

#userIcon.loggedIn,
#userIcon.loggedIn > div,
#userIcon.loggedIn > div::before,
#userAvatar,
#pointsBalance > span:first-child,
.comment .avatar,
#accountPage #currentLevelMeter .progress,
#accountPage #currentLevelMeter .progress.level::before,
#accountPage #currentLevelMeter .progress.level::after
{
	background-color: 		#f5b376;
}

#currentUserLevel,
#accountPage #bonusPoints .level1 h4
{
	color:			 		#f5b376;
	font-weight: 			bold;
	text-transform: 		uppercase;
}

#userIcon.loggedIn.userLevel100,
#userAvatar.userLevel100,
.comment .avatar.userLevel100
{
	color:					#868490;
	border-color:	 		#b6b4c0;
}

#accountPage #currentLevelMeter .marker.level100
{
	border-color:			#868490;
}

#userIcon.loggedIn.userLevel200,
#userAvatar.userLevel200,
.comment .avatar.userLevel200
{
	color:					#f2a823;
	border-color:	 		#ffe26c;
}

#accountPage #currentLevelMeter .marker.level200
{
	border-color:			#f2a823;
}

#userIcon.loggedIn.userLevel100,
#userIcon.loggedIn.userLevel100 > div,
#userIcon.loggedIn.userLevel100 > div::before,
#userAvatar.userLevel100,
.userLevel100 #pointsBalance > span:first-child,
#pointsBalance.nextLevel100 > span:first-child,
.comment .avatar.userLevel100,
#accountPage #currentLevelMeter .progress.level100,
#accountPage #currentLevelMeter .progress.level100::before,
#accountPage #currentLevelMeter .progress.level100::after
{
	background-color: 		#b6b4c0;
}

.userLevel100 #currentUserLevel,
.nextLevel100,
#accountPage #bonusPoints .currentLevel .level100,
#accountPage #bonusPoints .currentLevelStrapline .level100,
#accountPage #bonusPoints .level100 h4
{
	color:			 		#b6b4c0;
}

#userIcon.loggedIn.userLevel200,
#userIcon.loggedIn.userLevel200 > div,
#userIcon.loggedIn.userLevel200 > div::before,
#userAvatar.userLevel200,
.userLevel200 #pointsBalance > span:first-child,
#pointsBalance.nextLevel200 > span:first-child,
.comment .avatar.userLevel200,
#accountPage #currentLevelMeter .progress.level200,
#accountPage #currentLevelMeter .progress.level200::before,
#accountPage #currentLevelMeter .progress.level200::after
{
	background-color: 		#ecd05e;
}

.userLevel200 #currentUserLevel,
.nextLevel200,
#accountPage #bonusPoints .currentLevel .level200,
#accountPage #bonusPoints .currentLevelStrapline .level200,
#accountPage #bonusPoints .level200 h4
{
	color:			 		#ecd05e;
}

#userIcon.loggedIn svg
{
	height:					17px;
}

.dropdownMenu
{
	font-size:				16px;
	font-weight: 			bold;
	position:               relative;
}

.dropdownMenu,
#headerActions > a
{
	display:				inline-flex;
	flex-direction: 		column;
	justify-content:		center;
}

.dropdownMenu div,
.dropdownMenu li
{
	display:                flex;
	justify-content:        center;
}

#switchLanguage img
{
	max-width: 				32px;
	margin: 				4px 0;
}

#switchLanguage > div > img
{
	height: 				20px;
}

#switchCurrency > div::after
{
	content:                '';
	background-image:       url( '../images/chevron-down.svg' );
	background-size:        16px 16px;
	background-position:    center;
	width:                  22px;
	height:                 22px;
	display:                inline-block;
}

.dropdownMenu ul
{
	text-align:             left;
	min-width:              60px;
	background:             white;
	border:                 1px solid #e0e0e0;
	border-radius:          5px;
	box-shadow:             1px 1px 5px 1px rgba(179,179,179,1);
	padding:                5px 0 4px;
	position:               absolute;
	top:                    22px;
	left:                  	50%;
	transform: 				translateX( -50% );
	opacity:                .97;
	z-index:                999;
}

.dropdownMenu li
{
	cursor:                 pointer;
}

.dropdownMenu li:hover
{
	background-color:       #eee;
}

nav,
#headerActions a
{
	color:                  #2d3134;
	text-decoration:        none;
}

#headerActions
{
	flex:					1;
	display:                flex;
	justify-content:        flex-end;
}

#headerActions > * + *
{
	margin-left: 			34px;
}

@media( max-width: 666px )
{
	#headerActions
	{
		flex:               1 0 auto;
		margin-bottom: 		20px;
	}
}

nav
{
	padding: 				18px 0;
	font-weight: 			bold;
}

nav,
.tabs,
#newsletterSection
{
	background-color: 		#f2f2f2;
}

nav > .content > div
{
	display:				flex;
	flex-wrap: 				wrap;
    margin: 				-10px -60px 0 0;
}

nav > .content > div > *
{
    margin: 				10px 60px 0 0;
}

nav.breadcrumbs
{
	color:					#8c8c8c;
	background-color: 		transparent;
	font-size: 				13px;
	font-weight: 			normal;
	padding-top: 			16px;
	display: 				flex;
	justify-items: 			center;
}

nav.breadcrumbs span
{
	margin:					0 .5em;
}

footer
{
	background-color:   #2d3134;
	width:              100%;
	padding: 			52px 20px 72px;
	margin-top:			60px;
}

footer,
footer a,
footer .content a
{
	color:              white;
	text-decoration:    none;
}

footer > .content
{
	display:            flex;
	flex-wrap:          wrap;
}

footer .logo
{
	flex:               0 0 auto;
}

footer .logo img
{
	max-width:			220px;
}

footer .links
{
	flex:               1 0 300px;
	font-size:          18px;
	font-weight:        300;
	margin:             0 38px;
}

footer .links > div a
{
	margin-left:        4ex;
}

footer .links > div:first-child > a:first-child
{
	margin-left:        0;
}

footer .credentials,
footer .credentials a,
footer .copyright,
footer .copyright a
{
	color:              #9f9e9e;
}

footer .copyright
{
	flex:               1 0 auto;
	align-self:         flex-end;
}

footer .credentials,
footer .copyright
{
	font-size:          15px;
	font-weight:        300;
}

footer .copyright,
footer .credentials
{
	margin-top:         2em;
}

footer .credentials
{
	display:            block !important;
}

#product,
#clock,
#clock + .tabs,
nav
{
	margin:					0 auto;
	max-width: 				1280px;
}

#product,
#clock,
#clock + .tabs
{
	background-repeat:		no-repeat;
	background-position:	center;
	background-size:		1280px auto;
	color:					white;
}

#product.font-black
{
	color:                  black;
}

#product
{
	height:					530px;
	padding:				75px 10px;
	position: 				relative;
}

#productLeftOverlay,
#productRightOverlay
{
	position: 				absolute;
	top:					0;
	max-height: 			100%;
}

#productLeftOverlay
{
	left:					0;
}

#productRightOverlay
{
	right:					0;
}

@media( max-width: 1150px )
{
	#productLeftOverlay,
	#productRightOverlay
	{
		display: 			none;
	}
}

#product > div
{
	display:				grid;
	grid-template-columns:	max-content minmax( 0, 500px );
	grid-column-gap: 		75px;
}

#product .box
{
	max-height: 			376px;
	max-width: 				280px;
	box-shadow: 			0 13px 28px -18px rgba( 0, 0, 0, 0.65 );
}

#product > div > div,
#todaysButtons
{
	display: 				flex;
	flex-direction: 		column;
}

#product h1
{
	font-size:				45px;
	line-height: 			1.2;
	margin-bottom: 			15px;
}

@media( max-width: 800px )
{
	#product h1
	{
		font-size:			40px;
	}
}

@media( max-width: 760px )
{
	#product h1
	{
		font-size:			30px;
	}
}

#product .todaysPrice
{
	margin-top:				20px;
	font-size:				25px;
	font-weight:			bold;
}

#product .rrpPrice
{
	font-weight: 			normal;
	text-decoration: 		line-through;
	margin-left: 			2ex;
}

#product .todaysPrice .points
{
	font-size:				16px;
	font-weight: 			normal;
	margin-top:				6px;
}

#product .todaysPrice .points b
{
	font-weight: 			bold;
}

#product .todaysPrice .points a
{
	text-decoration: 		underline;
}

#product .todaysPrice .points .help
{
	width:					1.5em;
	height:					1.5em;
	border-radius: 			50%;
	border: 				1px	solid #efefef;
	color:					#efefef;
	display: 				inline-flex;
	justify-content: 		center;
	align-items: 			center;
	font-size:				.7em;
	cursor: 				default;
}

#product.font-black .todaysPrice .points .help
{
	color:                  black;
	border-color:           black;
}

@media( max-width: 670px )
{
	#product > div
	{
		display:			block;
	}

	#product .box
	{
		display: 			none;
	}
}

@media( max-width: 350px )
{
	#product
	{
		background-color:	#444;
		background-image:	none !important;
		height:				auto;
	}
}

#contestTag
{
	background-color: 		#ffcd04;
	padding: 				8px 16px;
	margin-bottom: 			16px;
	font-size: 				34px;
	font-weight: 			bold;
	box-shadow: 			4px 4px 6px 0 rgba( 0, 0, 0, 0.3 );
	align-self: 			flex-start;
}

#todaysButtons
{
	flex: 					1;
	justify-content: 		flex-end;
	padding-top:			1ex;
}

#todaysButtons button span
{
	font-size: 				60%;
	font-weight: 			normal;
}

#todaysButtons button span:before
{
	content: 				'(';
}

#todaysButtons button span:after
{
	content: 				')';
}

#todaysButtons a + a
{
	margin-left:			2ex;
}

#todaysButtons .blacklisted
{
	font-weight: 			bold;
	margin-top: 			1.5em;
}

#clock
{
	background-image: 		url( '../images/clock_bg.jpg' );
	background-position: 	unset;
	background-size: 		cover;
	padding:				45px 0;
	font-family: 			'Roboto Condensed', 'Open Sans', sans-serif;
}

#clock > div
{
	display: 				grid;
	grid-template-columns: 	max-content 1fr;
	grid-column-gap: 		75px;
	justify-items: 			center;
}

@media( max-width: 1030px )
{
	#clock > div
	{
		grid-template-columns:	1fr;
		grid-row-gap:			1ex;
	}
}

#clock .offerLabel
{
	color:					#ffcd04;
	font-size: 				54px;
	margin-top: 			20px;
}

#clock .offerLabel,
#counter > div
{
	font-weight: 			bold;
	text-transform: 		uppercase;
}

#counter
{
	display: 				grid;
	grid-template-columns: 	repeat( 4, 126px );
	text-align: 			center;
}

#counter.ct_noDays
{
	grid-template-columns: 	repeat( 3, 126px );
}

#clock > div > div,
#counter > div
{
	font-size: 				16px;
	text-align: 			center;
}

#counter > span
{
	background-image: 		url( '../images/hours_bg.png' );
	background-repeat: 		no-repeat;
	background-size: 		cover;
	width:					126px;
	height:					119px;
}

#counter > span.ct_days
{
	background-image: 		url( '../images/day_bg.png' );
}

#counter .ct_days
{
	padding:				0;
}

#counter .ct_cell
{
	display:				flex;
	justify-content: 		center;
	line-height: 			104px;
	position:				relative;
}

#counter .ct_cell::after
{
	display:				block;
	content: 				'';
	position:				absolute;
	top:					54px;
	left:					15px;
	width:					94px;
	height:					1px;
	z-index:				10;
	background-color: 		black;
	opacity: 				.5;
}

#counter .ct_dig
{
	display:          		inline;
	width:            		auto;
	height:           		auto;
	float:            		unset;
	text-align:       		unset;
	margin-right:     		unset;
	color:            		white;
	background-image: 		none;
	font-family:      		'Roboto Condensed', 'Arial MT', Arial, sans-serif;
	font-size:        		68px;
	font-weight:      		bold;
}

@media( max-width: 500px )
{
	#counter
	{
		grid-template-columns: 	repeat( 4, 63px );
	}

	#counter.ct_noDays
	{
		grid-template-columns: 	repeat( 3, 63px );
	}

	#counter > span
	{
		width:					63px;
		height:					69px;
	}

	#counter .ct_cell
	{
		line-height: 			52px;
	}

	#counter .ct_cell::after
	{
		top:					27px;
		left:					7px;
		width:					47px;
	}

	#counter .ct_dig
	{
		font-size: 				34px;
	}
}

.tabs,
.tabs .content
{
	display:                flex;
	flex-wrap:              wrap;
	font-weight:      		bold;
}

.tabs,
.tabs .content,
.tabs a
{
	color:					#2d3134 !important;
}

.tabs .content a:hover,
.tabs a:hover
{
	text-decoration:		none !important;
}

.tabs
{
	margin:	 				30px 0;
}

.tabs .content
{
	width: 					100%;
}

.tabs,
#clock + .tabs
{
	margin-bottom: 			40px;
}

.tabs a
{
	flex:                   0 0 auto;
	display:                flex;
	align-items:            center;
	justify-content:        center;
	padding:                20px 20px;
	position:               relative;
}

.tabs.equal a
{
	flex:					1;
}

.tabs a.active
{
	color:                  white !important;
	background-color:       #e80303;
}

.tabs a.active::after
{
	content:                '';
	background-color:       #e80303;
	display:                block;
	transform:              rotate( 45deg );
	width:                  10px;
	height:                 10px;
	position:               absolute;
	left:                   calc( 50% - 5px );
	bottom:                 -5px;
	z-index:                1;
}

#specs
{
	display: 				grid;
	grid-template-columns: 	1fr 1fr;
	grid-column-gap: 		20px;
}

#specs .narrow
{
	display: 				none;
}

@media( max-width: 600px )
{
	#specs
	{
		grid-template-columns: 1fr;
	}

	#specs .large
	{
		display: 			none;
	}

	#specs .narrow
	{
		display: 			block;
	}
}

#specs > div
{
	display: 				grid;
	grid-template-columns:	max-content 1fr;
	grid-gap: 				1ex 1em;
}

#specs > div > *:nth-child( 2n + 1 )
{
	color:					#aaa;
}

#description ul
{
	list-style-type: 		disc;
	padding-left:			2em;
	margin:					.5em 0;
}

#description
{
	display: 				grid;
	grid-template-columns: 	1fr 300px;
	grid-row-gap: 			1em;
	grid-column-gap: 		30px;
}

#description img
{
	max-width: 				100%;
}

@media( max-width: 700px )
{
	#description
	{
		grid-template-columns: 	1fr;
	}
}

.tns-nav
{
	display:                flex;
	flex-wrap:              wrap;
	justify-content:        center;
	width:                  100%;
}

.tns-nav button
{
	background-color:   white;
	border:             2px solid #c2c2c2;
	border-radius:      50%;
	cursor:             pointer;
	height:             14px;
	width:              14px;
	box-sizing:         border-box;
	padding:            0;
	outline:            none;
	margin:             0 10px;
}

.tns-nav button.tns-nav-active
{
	cursor:             default;
	border-color:       #e30613;
	position:           relative;
}

.tns-nav button.tns-nav-active::after
{
	height:             6px;
	width:              6px;
	border-radius:      50%;
	background-color:   #e30613;
	content:            '';
	display:            block;
	position:           absolute;
	top:                2px;
	left:               2px;
}

.carousel-btn-prev
{
	justify-self: 		end;
}

.carousel-btn-next
{
	justify-self: 		start;
}

.carousel-btn-prev,
.carousel-btn-next
{
	display:                flex;
	flex-direction:         column;
	justify-content:        center;
	padding:                0;
}

.carousel-btn-prev img,
.pagination .prev img
{
	transform:              rotate( 90deg );
}

.carousel-btn-next img,
.pagination .next img
{
	transform:              rotate( 270deg );
}

.carousel-btn-prev img,
.carousel-btn-next img,
.pagination img
{
	height:                 22px;
}

#screenshots-carousel .controls
{
	margin-top:				20px;
	display: 				grid;
	grid-template-columns: 	1fr max-content 1fr;
	grid-column-gap: 		10px;
	align-items: 			center;
}

#nextPromo
{
	margin:					60px auto;
	padding:				40px 0;
	max-width: 				1280px;
	background-image: 		url( '../images/nextPromo_bg.jpg' );
	background-repeat:		no-repeat;
	background-position:	center;
	background-size:		cover;
	color:					black;
}

#nextPromo .content
{
	display: 				grid;
	grid-template-columns: 	1fr max-content;
	grid-column-gap: 		40px;
}

#nextPromo .box
{
	max-height: 			270px;
}

@media( max-width: 700px )
{
	#nextPromo .content
	{
		grid-template-columns: 	1fr;
	}

	#nextPromo .box
	{
		display: 				none;
	}
}

#nextPromo h4,
#similarSection h4
{
	font-size: 				30px;
	font-weight: 			normal;
	margin-top: 			20px;
}

#nextPromo h2
{
	font-size: 				45px;
}

#nextControls
{
	margin-top:				35px;
	display: 				grid;
	grid-template-columns:	max-content max-content;
	grid-column-gap: 		26px;
	align-items: 			center;
}

#nextStarts
{
	display: 				grid;
	grid-template-columns:	50px max-content;
	color:					white;
	font-family: 			'Roboto Condensed', sans-serif;
	font-weight: 			bold;
	text-transform: 		uppercase;
	line-height: 			17px;
}

#nextStarts svg
{
	grid-row-end: 			span 2;
}

#yourSerialCode,
.withSeparator,
.comment + .comment,
.comment + .pagination,
#mainPromo + #shareSection
{
	border-top:				1px solid #d8d8d8;
	margin-top:				40px;
	padding-top:			40px;
}

#yourSerialCode h2
{
	display: 				flex;
	align-items: 			center;
	font-size: 				30px;
}

#yourSerialCode h2 svg
{
	margin-right:			28px;
}

#previous,
#similar
{
	display: 				grid;
	grid-template-columns: 	repeat( auto-fit, minmax( 225px, 250px ));
	grid-gap:		 		40px 20px;
}

#similar
{
	grid-template-columns: 	repeat( auto-fit, 225px );
}

#similarSection
{
	border-top:				1px solid #eee;
	padding-top:			20px;
	padding-bottom:			40px;
	margin-top:				40px;
	margin-bottom:			40px;
}

#similarSection + #shareSection
{
	border-top:				1px solid #eee;
	padding-top:			60px;
	margin-top:				40px;
}

#similarSection > h1
{
	margin-bottom: 			1.5em;
}

.pastPromo > div:first-child
{
	position:				relative;
	text-align: 			center;
}

.pastPromoDate,
.pastPromoSavings
{
	position: 				absolute;
	left:					0;
	height:					40px;
	line-height: 			40px;
	text-align: 			center;
	color:					#2d3134;
	font-weight: 			bold;
}

.pastPromoDate
{
	top:					0;
	width:					125px;
	background-color: 		rgba( 255, 255, 255, .9 );
}

.pastPromo img
{
	margin-top: 			20px;
	max-width: 				200px;
	max-height:				228px;
}

.pastPromoSavings
{
	bottom:					-15px;
	width:					85px;
	background-color: 		#ffcb00;
	font-size: 				22px;
}

.pastPromo .price
{
	margin-top:				20px;
	font-size:				30px;
	display: 				flex;
	align-items: 			baseline;
}

.pastPromo .price > span:first-child
{
	padding-right:			20px;
}

.pastPromo .rrp
{
	font-size: 				18px;
	text-decoration: 		line-through;
}

.pastPromo .title
{
	font-size: 				18px;
	font-weight: 			bold;
	margin-top:				4px;
}

.pastPromo > a
{
	display: 				inline-block;
	margin-top:				18px;
}

.content a
{
	color:					#22a6d4;
}

.content a:hover
{
	text-decoration:		underline;
}

form
{
	display: 				grid;
	grid-template-columns: 	max-content 1fr;
	grid-gap: 				18px 22px;
}

form > label,
form > button,
form > .error,
form > .right,
.validation-advice
{
	grid-column: 			2;
}

.validation-advice
{
	margin:					2px 0;
	padding:				3px;
	background-color:		#ff3300;
	color:					white;
	font-weight:			bold;
	font-size:				12px;
}

label.small
{
	font-size:				85%;
}

form .error
{
	color:					#ff3300;
	font-weight: 			bold;
	text-align: 			center;
}

#remindForm,
#createForm
{
	margin-top:				1.5em;
}

#loginForm,
#remindForm
{
	grid-template-columns: 	minmax( 90px, max-content ) 1fr;
}

.borderBlock
{
	border:					1px solid #e80303;
	border-radius: 			4px;
	padding:				34px 30px;
}

.borderBlock.withMargin,
.dataTable
{
	margin:		 			20px 0;
}

.dataTable th,
.dataTable td
{
	padding:	 			18px;
	text-align: 			left;
}

.dataTable th
{
	background-color: 		#6d6d6d;
	color:					white;
}

.dataTable tr:nth-child( 2n + 1 )
{
	background-color: 		#f2f2f2;
}

.dataTable .date,
.dataTable .links
{
	color:					#b9b9b9;
}

.dataTable .product
{
	font-weight:			bold;
}

#accountPage > div:first-child
{
	display: 				grid;
	grid-template-columns: 	1fr max-content;
	grid-column-gap: 		1ex;
}

#accountPage .borderBlock
{
	margin-top:				2em;
}

#userAvatar
{
	width: 					120px;
	height: 				120px;
	padding:				0;
	display: 				flex;
	place-content: 			center;
	position: 				relative;
}

#userAvatar svg
{
	width: 					60px;
}

#userAvatar + div
{
	display: 				flex;
	flex-direction: 		column;
	justify-content:		center;
}

#userAvatar + div h2
{
	margin: 				0;
}

#userAvatar .filepond--root
{
	width: 					100%;
	height: 				100%;
	position: 				absolute;
	top:					0;
	left:					0;
}

#userAvatar .filepond--drop-label
{
	opacity: 				0 !important;
}

#userAvatar .filepond--panel-root
{
	background-color: 		transparent;
}

#userAvatar .filepond--file-wrapper
{
	display: 				none;
}

#actualAvatar
{
	display: 				flex;
}

#actualAvatar img
{
	max-width:	 			120px;
	max-height: 			120px;
	border-radius: 			50%;
}

#pointsBalance
{
	font-size:				.8em;
	margin-top: 			8px;
}

#pointsBalance > span:first-child
{
	border-radius: 			10px;
	padding:				1px 8px;
	margin-right: 			1ex;
	color:					white;
	font-weight: 			bold;
}

#pointsBalance .level
{
	font-weight: 			bold;
	text-transform: 		uppercase;
}

#userAvatar .spin
{
	display: 				none;
}

#userAvatar.loading .spin
{
	display: 				block;
	position: 				absolute;
	top:					30px;
	left:					30px;
	color:					white;
}

.spin
{
	-webkit-animation:	spin 2s infinite linear;
	animation: 			spin 2s infinite linear;
}

@-webkit-keyframes spin
{
 	0% {
    	-webkit-transform: 	rotate( 0deg );
		transform: 			rotate( 0deg );
	}
	100% {
    	-webkit-transform: 	rotate( 360deg );
		transform: 			rotate( 360deg );
 	}
}

@keyframes spin
{
	0% {
		-webkit-transform: 	rotate( 0deg );
		transform: 			rotate( 0deg );
	}
	100% {
		-webkit-transform: 	rotate( 360deg );
		transform: 			rotate( 360deg );
	}
}

#editAvatar
{
	position: 				absolute;
	bottom:					0;
	right:					0;
	border-radius: 			50%;
	width:					32px;
	height:					32px;
	color:					#2d3134;
	background-color: 		white;
	display:				flex;
	place-content: 			center;
	cursor: 				pointer;
}

#editAvatar svg
{
	width: 					18px;
}

#accountPage form .tabs
{
	grid-column: 			1 / -1;
	background-color: 		initial;
	text-transform: 		uppercase;
	border-bottom:			1px solid #d1d1d1;
	margin-bottom: 			20px;
}

#accountPage form .tabs a.active
{
	color:			 		inherit !important;
	background-color: 		initial;
}

#accountPage form .tabs a.active::after,
#accountPage form .tabs a:not( .active ):hover::after
{
	transform: 				none;
	height:					5px;
	width:					100%;
	left:					0;
	bottom:					-3px;
}

#accountPage form .tabs a:not( .active ):hover::after
{
	content:          		'';
	display:         		block;
	position:         		absolute;
	z-index:          		1;
	background-color: 		#e38b8b;
}

#accountPage #personalInfo,
#accountPage #bonusPoints
{
	display: 				contents;
}

#accountPage #personalInfo input,
#accountPage #personalInfo select
{
	width:	 				100%;
}

#accountPage #bonusPoints .level,
#accountPage #currentLevelMeter .marker h4
{
	text-transform: 		uppercase;
	font-weight: 			bold;
}

#accountPage #bonusPoints > *
{
	grid-column: 			1 / -1;
}

#accountPage #bonusPoints .currentLevelStrapline
{
	font-size: 				.8em;
}

#accountPage #bonusPoints .currentLevel + div,
#accountPage #bonusPoints .currentLevelStrapline
{
	margin-top: 			-1em;
}

#accountPage #currentLevelMeter
{
	border-radius: 			10px;
	background-color: 		#eee;
	margin: 				40px 0 60px;
}

#accountPage #currentLevelMeter > div
{
	position: 				relative;
	height:					20px;
	width:					95%;
}

#accountPage #currentLevelMeter .bg
{
	height: 				100%;
	position: 				absolute;
	border-radius: 			10px;
}

#accountPage #currentLevelMeter .bg.level1
{
	background: 			linear-gradient(90deg, #f0dbc8 0, #eeeeee 100%);
}

#accountPage #currentLevelMeter .bg.level100
{
	background: 			linear-gradient(90deg, #eeeeee 0, #efe4ba 100%);
}

#accountPage #currentLevelMeter .marker
{
	border:					4px solid #eee;
	border-radius: 			10px;
	background-color:		#eee;
	height:					20px;
	width:					20px;
	position: 				absolute;
}

@media( max-width: 500px )
{
	#accountPage #currentLevelMeter .marker.level1
	{
		display:			none;
	}
}

#accountPage #currentLevelMeter .marker div
{
	width: 					auto;
	white-space: 			nowrap;
	position: 				absolute;
	top: 					30px;
	font-size: 				.8em;
}

#accountPage #currentLevelMeter .marker + .marker:not( .last ) div
{
	text-align: 			center;
	transform: 				translateX( -50% ) translateX( 10px );
}

#accountPage #currentLevelMeter .last.marker div
{
	text-align: 			right;
	transform: 				translateX( -100% ) translateX( 10px );
}

#accountPage #currentLevelMeter .progress
{
	position: 				absolute;
	height:					100%;
	border-radius: 			10px;
}

#accountPage #currentLevelMeter .progress::before
{
	content: 				'';
	width:					10px;
	height:					10px;
	display: 				block;
	position: 				absolute;
	top:					-18px;
	right:					10px;
	z-index: 				1;
	transform: 				translateX( 100% ) translateX( -50% ) rotate( 45deg );
}

#accountPage #currentLevelMeter .progress::after
{
	content: 				attr( data-points );
	color: 					white;
	font-weight: 			bold;
	font-size:				12px;
	border-radius:			20px;
	padding:				6px 10px;
	display: 				block;
	position: 				absolute;
	top:					-41px;
	right:					10px;
	z-index: 				2;
	transform: 				translateX( 100% ) translateX( -50% );
}

#accountPage .link
{
	border-top: 			1px solid #d1d1d1;
	padding:				16px 0;
}

#accountPage .link + .link
{
	margin-top:				-14px;
}

#accountPage .link a
{
	color:					#2d3134;
}

#accountPage .link a::after
{
	content:				'›';
	font-weight:			bold;
	margin-left:			1em;
}

#faqPage h2
{
	margin-top:				1em;
}

#faqPage .showHide
{
	cursor: 				pointer;
}

#faqPage .detail + .detail
{
	margin-top:				1em;
}

.pagination
{
	border-top:             none;
	display:                grid;
	grid-template-columns:  1fr max-content 1fr;
	grid-column-gap:        4ex;
	align-items:            center;
	justify-items:          center;
	margin:					20px 0;
}

.pagination .prev,
.pagination .next
{
	display: 				flex;
	flex-direction:			column;
}

.pagination .prev
{
	justify-self: 			end;
}

.pagination .next
{
	justify-self: 			start;
}

.pagination a
{
	color:                  #879199;
}

.pagination strong
{
	color:                  black;
}

#commentsBox
{
	margin-bottom:			20px;
}

.comment .avatar
{
	width:					90px;
	height:					90px;
	padding-top: 			0;
	display: 				flex;
	place-content:			center;
	place-items:			center;
}

.comment .avatar img
{
	border-radius:			50%;
	max-width: 				78px;
	max-height:				78px;
}

.comment .avatar svg
{
	height:					52px;
}

.comment
{
	display: 				grid;
	grid-template-columns: 	125px 1fr;
}

@media( max-width: 400px )
{
	.comment
	{
		grid-template-columns: 	1fr;
	}

	.comment .avatar
	{
		display: 				none;
	}
}

.comment > div > div + div
{
	margin-top: 			4px;
}

.comment .author
{
	font-weight: 			bold;
	font-size: 				20px;
}

.comment .date
{
	color: 					#b9b9b9;
}

.comment .rating
{
	display: 				flex;
	color:					#ff6700;
}

.comment .rating svg
{
	width:					15px;
	height:					15px;
}

.comment .pros
{
	display: 				grid;
	grid-template-columns: 	max-content 1fr;
	grid-gap: 				4px 1ex;
}

.comment .pros > *:nth-child( 2n + 1 )
{
	font-weight: 			bold;
}

#serialForm.coupon
{
	display: 				grid;
	grid-template-columns: 	max-content 1fr 1fr;
	grid-gap:				1ex 1em;
	align-items: 			center;
	margin:					1em 0;
}

@media( max-width: 870px )
{
	#serialForm.coupon
	{
		grid-template-columns: 	1fr 1fr;
	}

	#serialForm.coupon > *:first-child,
	#serialForm.coupon .validation-advice
	{
		grid-column-end: 		span 2;
	}

	#serialForm.coupon .validation-advice
	{
		grid-column:			1;
	}
}

@media( max-width: 400px )
{
	#serialForm.coupon
	{
		grid-template-columns: 	1fr;
	}

	#serialForm.coupon > *:first-child,
	#serialForm.coupon .validation-advice
	{
		grid-column-end: 		span 1;
	}
}

#serialForm.coupon > input[type="text"],
#codeToCopy > input[type="text"]
{
	width: 					100%;
	height: 				100%;
}

#serialForm.coupon > input[type="text"],
#codeToCopy > input[type="text"],
#codeToCopy
{
	font-size: 				18px;
	font-family: 			'Roboto Condensed', sans-serif;
}

#serialForm.coupon > button,
#codeToCopy > button
{
	grid-column: 			auto;
}

#codeToCopy
{
	display: 				grid;
	grid-template-columns: 	max-content 1fr max-content;
	grid-gap:	 			1ex 0;
	align-items: 			center;
	margin:					2em 0 1em;
}

@media( max-width: 870px )
{
	#codeToCopy
	{
		grid-template-columns: 	1fr max-content;
	}

	#codeToCopy > *:first-child
	{
		grid-column-end: 		span 2;
	}
}

@media( max-width: 400px )
{
	#codeToCopy
	{
		grid-template-columns: 	1fr;
	}

	#codeToCopy > *:first-child
	{
		grid-column-end: 		span 1;
	}
}

#codeToCopy > *:first-child
{
	padding-right:			2ex;
	font-weight: 			bold;
	text-transform: 		uppercase;
}

#codeToCopy input[type="text"],
#linkToCopy input[type="text"]
{
	color:					#5e5e5e;
	background-color: 		#f2f2f2;
}

#newsletterSection,
#optinSection,
#yourSerialCode .error,
#yourSerialCode .redMessage,
#serialForm.question,
#yourCode > button:first-child
{
	margin:					1em 0;
}

#yourSerialCode .error,
#yourSerialCode .redMessage
{
	color:					#e80303;
}

#newsletterSection,
#optinSection
{
	display: 				flex;
	align-content: 			center;
}

#newsletterSection input,
#optinSection input
{
	margin-right: 			1ex;
}

#serialForm.question
{
	grid-template-columns:	1fr;
}

#serialForm.question .validation-advice
{
	grid-column:			1;
}

#shareSection
{
	display:				grid;
	grid-template-columns: 	1fr 1fr;
	grid-column-gap: 		40px;
	padding:				20px 0 30px;
}

#mainPromo + #shareSection
{
	padding-top: 			40px;
}

#shareSection h1
{
	display: 				flex;
	align-items: 			center;
	font-weight:			normal;
	line-height: 			1.2;
	margin-bottom: 			45px;
}

#shareSection h1 svg
{
	flex:					0 0 110px;
}

@media( max-width: 800px )
{
	#shareSection
	{
		grid-template-columns: 	1fr;
		grid-row-gap: 			1em;
	}
}

#linkToCopy
{
	display: 				flex;
	flex-wrap: 				wrap;
	align-items: 			stretch;
}

#linkToCopy input
{
	flex:					1 0 200px;
	font-size: 				16px;
	padding-left: 			20px;
}

#shareButtons
{
	display: 				grid;
	grid-template-columns: 	60px 1fr;
	grid-row-gap: 			13px;
	margin-top:				13px;
	position:				relative;
}

#shareButtons > *:hover::before
{
	display: 				block;
	content: 				'';
	width:					100%;
	height:					60px;
	position: 				absolute;
	left:					0;
	z-index: 				-1;
	border-radius: 			7px;
	box-shadow: 			0 3px 6px 4px rgba( .8, .8, .8, 0.25 );
}

#shareButtons > *
{
	border: 				1px solid #d1d1d1;
	min-height: 			60px;
	cursor: 				pointer;
}

#shareButtons > *:nth-child( 2n + 1 )
{
	border-top-left-radius: 	7px;
	border-bottom-left-radius: 	7px;
	border-right-style: 		none;
	position: 					relative;
	color:						white;
	display:					flex;
	align-items:				center;
	justify-content:			center;
}

#shareButtons > *:nth-child( 2n + 1 )::after
{
	content: 					'';
	display: 					block;
	width: 						16px;
	height:						16px;
	position: 					absolute;
	right:						-6px;
	top:						50%;
	transform: 					translateY( -50% ) rotate( 45deg );
	background-color: 			inherit;
	z-index: 					-1;
}

#shareButtons > *:nth-child( 2n + 1 ) svg
{
	width:						100%;
	height:						100%;
	max-width:					27px;
	max-height: 				28px;
}

#shareButtons > *:nth-child( 2n )
{
	border-top-right-radius: 	7px;
	border-bottom-right-radius: 7px;
	border-left-style: 			none;
	display: 					flex;
	flex-direction: 			column;
	justify-content:			center;
	padding-left: 				25px;
}

#shareButtons .facebook
{
	background-color: 			#155eee;
}

#shareButtons .twitter
{
	background-color: 			#1c8eee;
}

#shareButtons .whatsapp
{
	background-color: 			#28cd54;
}

#shareButtons .email
{
	background-color: 			#e12c29;
}

#shareButtons .shared
{
	filter:						saturate( 0.8 ) opacity( 0.5 );
}

#shareButtons .shared + div
{
	color:						#aaa;
}

#newsletterSection
{
	margin:						60px 0 -60px;
	padding-bottom: 			60px;
	text-align: 				center;
}

#newsletterSection > .content
{
	width: 						100%;
}

#newsletterSection h3
{
	margin:						40px 0;
	font-size: 					28px;
	font-weight:				normal;
}

#newsletterForm
{
	grid-template-columns: 		1fr;
	margin: 					0 auto;
	max-width: 					550px;
}

#newsletterForm input[type="text"],
#newsletterForm input[type="email"]
{
	font-size: 					16px;
	height: 					57px;
	padding:					0 20px;
}

#newsletterSection label.error
{
	transition: 				background-color .5s ease-in;
	background-color: 			#fec804;
	padding:					2px 1ex;
}

#newsletterSection label.error a
{
	color:						black
}

#newsletterForm svg
{
	max-width: 					48px;
	color:						green;
}

form .honey
{
	display: 					none;
}

button.workInProgress
{
	display: 			inline-flex;
	justify-content: 	center;
}

button.workInProgress::before
{
	content: 			'';
	display: 			block;
	width:				16px;
	height:				16px;
	background-image:	url("data:image/svg+xml,%3Csvg role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='currentColor' d='M304 48c0 26.51-21.49 48-48 48s-48-21.49-48-48 21.49-48 48-48 48 21.49 48 48zm-48 368c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48-21.49-48-48-48zm208-208c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48-21.49-48-48-48zM96 256c0-26.51-21.49-48-48-48S0 229.49 0 256s21.49 48 48 48 48-21.49 48-48zm12.922 99.078c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48c0-26.509-21.491-48-48-48zm294.156 0c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48c0-26.509-21.49-48-48-48zM108.922 60.922c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48-21.491-48-48-48z'%3E%3C/path%3E%3C/svg%3E ");
	margin-right: 		1ex;
	animation: 			rotate 2s linear infinite;
	filter:				invert(100%);
}

@-webkit-keyframes rotate
{
	0%
	{
		-webkit-transform: rotate(0deg);
		transform:         rotate(0deg);
	}
	to
	{
		-webkit-transform: rotate(1turn);
		transform:         rotate(1turn);
	}
}

@keyframes rotate
{
	0%
	{
		-webkit-transform: rotate(0deg);
		transform:         rotate(0deg);
	}
	to
	{
		-webkit-transform: rotate(1turn);
		transform:         rotate(1turn);
	}
}

.backlink
{
	padding-bottom:			1em;
	margin-bottom: 			1em;
	border-bottom: 			1px solid #d1d1d1;
}

.staticPage h2,
.staticPage h3,
.staticPage h4,
.staticPage h5
{
	margin:					1.5em 0;
}

#redeemPointsForm
{
	display: 				grid;
	grid-template-rows: 	minmax( 2.5em, max-content );
	grid-template-columns: 	minmax( min-content, max-content ) minmax( 80px, 2fr ) minmax( min-content, max-content ) minmax( max-content, 3fr );
	grid-column-gap: 		1ex;
	align-items: 			center;
	margin:					1em 0;
}

#redeemPointsForm > span
{
	text-align: 			right;
}

#redeemPointsForm input
{
	align-self: 			stretch;
	width:					100%;
	border:					1px solid #d1d1d1;
	border-radius: 			6px;
}

#redeemPointsForm input:invalid
{
	border:					2px solid red;
}

#redeemPointsForm #preview
{
	align-self: 			stretch;
	background-color: 		#f0cd3c;
	border:					1px solid black;
	border-radius: 			6px;
	display: 				flex;
	align-items: 			center;
	justify-content: 		center;
}

#yourCoupon
{
	margin-top: 			2em;
	display: 				grid;
	grid-template-columns: 	max-content 1fr max-content;
	grid-gap:		 		1ex 1em;
	align-items: 			center;
}

#yourCoupon span
{
	justify-self: 			end;
}

#yourCoupon input
{
	align-self: 			stretch;
	text-align: 			center;
}

#yourCoupon #couponExpiration
{
	border-style: 			none;
}

#popupOverlay
{
	position:				fixed;
	top:					30vh;
	left:					30vw;
	width:					40vw;
	min-height:				25px;
	z-index:				1000;
	border:                 5px solid rgba(212, 112, 112, 0.82);
	border-radius:          7px;
	box-shadow:             1px 1px 5px 1px rgba(179,179,179,1);
}

#popupOverlay .content
{
	overflow:				hidden;
	position:				relative;
	padding:				14px;
	background-color:		#f9fafc;
}

#popupOverlay .content button
{
	float:					right;
}

#popupOverlay .content h3
{
	font-family:			"Noticia Text", serif;
}

#popupFooter
{
	clear:					both;
	padding-top:			1.5em;
}

form input[name="from"][type="email"][required]
{
	display:                none;
}