html,
body {
	height: 100%;
}
body {
	background-color: #f6f6f6;
	background: #f6f6f6 url(../img/body-bg.svg) no-repeat right top;
	background-attachment: fixed;
	background-size: auto 200%;
	color: #111;
	font-family: 'Open Sans', Arial;
}
body.no-scroll {
	overflow-y: hidden
}
a {
	text-decoration: none;
}
a.transition {
	transition-duration: .3s;
	transition-property: all;
}
.no-transition {
	transition: none !important;
}
.preload * {
	transition: none !important;
}
.hidden {
	display: none;
}
.site-wrapper {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}
.content-wrapper {
	display: flex;
	flex-direction: column;
	flex-grow: 1;
	min-height: 500px;
}
.container {
	box-sizing: border-box;
	display: flex;
	flex-grow: 1;
	margin: 0 auto;
	max-width: 1280px;
	position: relative;
	width: 94%;
}
.container.login {
	display: block;
}
.container .left-panel-overlay {
	background-color: rgba(0,0,0,.5);
	display: none;
	height: 100%;
	left: 0;
	position: fixed;
	top: 0;
	width: 100%;
	z-index: 1000;
}
.container .left-panel {
	min-width: 300px;
	margin: 0 60px 60px 0;
}
.container .left-panel a.close {
	display: none;
	height: 20px;
	position: absolute;
	right: 12px;
	top: 12px;
	width: 20px;
	z-index: 99;
}
.container .left-panel a.close:before,
.container .left-panel a.close:after {
	background-color: #004070;
	border-radius: 2px;
	content: '';
	height: 20px;
	left: 10px;
	position: absolute;
	transition-duration: .3s;
	transition-property: all;
	width: 3px;
}
.container .left-panel a.close:before {
	transform: rotate(45deg);
}
.container .left-panel a.close:after {
	transform: rotate(-45deg);
}
.container h1 {
	font-size: 2.4rem;
	margin: 40px 0;
	text-transform: uppercase;
}
.container h1 span {
	display: block;
	font-size: 1.5rem;
}
.site-wrapper.login .container h2 {
	color: #004070;
	font-size: 2rem;
	margin: 45px 0 40px 0;
	text-transform: uppercase;
}
.container .right-panel {
	flex-grow: 1;
	margin-bottom: 60px;
}

/* Smaller than 1200px */
@media (max-width: 1200px) {
	body {
		background-image: none;
	}
	.content-wrapper {
		min-height: auto;
	}
	.container {
		padding: 0 20px;
	}
	.container .left-panel {
		background-color: #f6f6f6;
		height: 100%;
		max-width: 100%;
		overflow-x: hidden;
		padding: 20px;
		position: fixed;
		left: -100%;
		top: 0;
		transition-duration: .3s;
		transition-property: all;
		z-index: 1001;
	}
	.container .left-panel.active {
		left: 0;
	}
	.container .left-panel a.close {
		display: inline;
	}
	.container .right-panel {
		margin-bottom: 40px;
	}
}

/*************************************************************************************************/
/** header-top ***********************************************************************************/
/*************************************************************************************************/

.header-top {
	align-items: center;
	color: #666;
	display: flex;
	height: 45px;
	position: relative;
	z-index: 999;
}
.header-top .container {
	align-items: center;
	display: flex;
	justify-content: space-between;
}
.header-top .account {
	position: relative;
}
.header-top .account .menu {
	align-items: center;
	cursor: pointer;
	display: flex;
	height: 45px;
	position: relative;
	z-index: 999;
}
body.touch .header-top .account .menu {
	user-select: none;
}
.header-top .account .menu span:nth-child(1) {
	background: url(../img/user.png) no-repeat center left;
	background-size: 16px;
	margin-right: 15px;
	padding-left: 24px;
}
.header-top .account .menu span:nth-child(2) {
	font-weight: bold;
	text-transform: uppercase;
}
.header-top .account ul {
	box-shadow: 0 1px 8px rgba(0, 0, 0, 0.08);
	display: none;
	left: 0;
	position: absolute;
	top: 45px;
	width: 100%;
}
.header-top .account ul li a {
	background-color: #fcfcfc;
	display: block;
	width: 100%;
	padding: 10px 15px;
}
.header-top .account ul li a:hover {
	background-color: #f6f6f6;
	color: #004070;
}
.header-top .account:hover ul {
	display: block;
}

/* Smaller than 600px */
@media (max-width: 600px) {
	.header-top .account .menu span:nth-child(1) {
		display: none;
	}
	.header-top .account .menu span:nth-child(2) {
		text-align: right;
		min-width: 180px;
	}
}


/*************************************************************************************************/
/** header-center ********************************************************************************/
/*************************************************************************************************/

.header-center {
	align-items: center;
	background-color: #fff;
	display: flex;
	min-height: 180px;
}
.header-center .container {
	align-items: center;
	display: flex;
	justify-content: space-between;
}
.header-center a.logo {
	display: inline-block;
	height: 200px;
	position: absolute;
	text-align: center;
	margin-top: -30px;
	width: 300px;
	z-index: 998;
}
.site-wrapper.login a.logo {
	width: auto;
}
.header-center a.logo svg {
	background-color: #fff;
	border-radius: 999px;
	box-shadow: 0 -1px #e7e7e7;
	height: 200px;
	padding: 15px;
	width: auto;
	z-index: 999;
}
.header-center a.logo-mobile {
	display: none;
	height: 110px;
	position: absolute;
	text-align: center;
	left: 15px;
	margin-top: -40px;
	width: 110px;
	z-index: 998;
}
.header-center a.logo-mobile svg {
	background-color: #fff;
	border-radius: 999px;
	box-shadow: 0 -1px #e7e7e7;
	height: 110px;
	padding: 15px;
	width: auto;
	z-index: 999;
}
.header-center .client-quota {
	flex-grow: 1;
	font-size: 1.3rem;
}
.header-center .client-quota > strong,
.header-center .cart > strong {
	display: block;
	font-size: 1.6rem;
	margin-bottom: 20px;
	text-align: right;
	text-transform: uppercase;
}
.header-center .client-quota .quota {
	align-items: center;
	display: flex;
	justify-content: flex-end;
}
.header-center .client-quota .quota .type {
	align-items: center;
	color: #004070;
	display: flex;
}
.header-center .client-quota .quota strong:first-child {
	align-items: center;
	display: flex;
	color: #fff;
	height: 32px;
	justify-content: center;
	margin-right: 15px;
	width: 32px;
}
.header-center .client-quota .quota .W strong:first-child,
.header-center .client-quota .quota .WI strong:first-child {
	background-color: #ff689b;
}
.header-center .client-quota .quota .A strong:first-child,
.header-center .client-quota .quota .AL strong:first-child {
	background-color: #ffad0a;
}
.header-center .client-quota .quota .C strong:first-child,
.header-center .client-quota .quota .CI strong:first-child,
.header-center .client-quota .quota .CG strong:first-child,
.header-center .client-quota .quota .TO strong:first-child {
	background-color: #32cdcd;
}
.header-center .client-quota .quota .type + .type {
	margin-left: 30px;
}
.header-center .client-quota .quota span {
	color: #000;
	display: block;
	font-size: 1.6rem;
}
.header-center .cart {
	margin-left: 60px;
}
.header-center .cart a {
	align-items: center;
	background-color: #004070;
	color: #fff;
	display: flex;
	font-weight: bold;
	height: 48px;
	padding: 0 25px;
	width: auto;
}
.header-center .cart a:hover {
	background-color: #005392;
}
.header-center .cart a span {
	background-image: url(../img/add-cart.png);
	background-position: center left;
	background-repeat: no-repeat;
	background-size: 16px;
	display: block;
	padding-left: 26px;
	height: 16px;
	width: 16px;
}

/* Smaller than 1000px */
@media (max-width: 1200px) {
	.header-center a.logo {
		width: auto;
	}
}
/* Smaller than 1000px */
@media (max-width: 1000px) {
	.header-center .client-quota {
		display: none;
	}
	.header-center .cart {
		margin-left: auto;
	}
}
/* Smaller than 850px */
@media (max-width: 850px) {
	.site-wrapper.login h1 {
		display: none;
	}
}
/* Smaller than 600px */
@media (max-width: 600px) {
	.site-wrapper:not(.login) .header-center {
		min-height: auto;
	}
	.site-wrapper:not(.login) a.logo {
		display: none;
	}
	.header-center a.logo-mobile {
		display: inline-block;
	}
	.site-wrapper.login .header-center a.logo {
		margin-left: calc(50% - 121px);
	}
	.header-center .cart {
		align-items: center;
		display: flex;
		padding: 20px 0;
	}
	.header-center .cart > strong {
		margin: 0 15px 0 0;
	}
}


/*************************************************************************************************/
/** header-mobile ********************************************************************************/
/*************************************************************************************************/

.header-mobile {
	background-color: #fff;
	border-top: 1px solid #004070;
	display: none;
}
.header-mobile a {
	border-right: 1px solid #004070;
	display: block;
	font-size: 1.3rem;
	padding: 12px 15px;
	text-transform: uppercase;
}
.header-mobile a span {
	background: no-repeat center left;
	background-size: 16px;
	padding-left: 26px;
}
.header-mobile a.menu span {
	background-image: url(../img/menu.png);
}
.header-mobile a.filter span {
	background-image: url(../img/filter.png);
}

/* Smaller than 1200px */
@media (max-width: 1200px) {
	.header-mobile {
		display: flex;
	}
}


/*************************************************************************************************/
/** header-bottom ********************************************************************************/
/*************************************************************************************************/

.header-bottom {
	background: #004070;
	color: #fff;
	display: flex;
	height: 65px;
	position: relative;
}
.header-bottom .category-menu {
	color: #000;
	position: relative;
	text-transform: uppercase;
	width: 300px;
}
.header-bottom .category-menu span.nav-title {
	background: #fff;
	border : 1px solid #e7e7e7;
	bottom: 0;
	display: block;
	font-size: 1.6rem;
	font-weight: bold;
	padding: 13px 25px;
	position: absolute;
	width: 100%;
	z-index: 1000;
}
.header-bottom .category-menu span.nav-title.toggle {
	cursor: pointer;
}
.header-bottom .category-menu span.nav-title:after {
	background: #004070 url(../img/category-nav.png);
	position: absolute;
	content :'';
	height: 15px;
	right: 25px;
	top: 18px;
	width: 20px;
}
.header-bottom .nav-list-overlay {
	background-color: rgba(0,0,0,.5);
	display: none;
	height: 100%;
	left: 0;
	position: fixed;
	top: 0;
	width: 100%;
	z-index: 1000;
}
.header-bottom .nav-list {
	box-shadow: 0 1px 8px rgba(0, 0, 0, 0.08);
	display: none;
	position: absolute;
	top: 65px;
	width: 300px;
	z-index: 999;
}
.header-bottom .nav-list a.close {
	display: none;
	height: 20px;
	position: absolute;
	right: 12px;
	top: 12px;
	width: 20px;
	z-index: 99;
}
.header-bottom .nav-list a.close:before,
.header-bottom .nav-list a.close:after {
	background-color: #004070;
	border-radius: 2px;
	content: '';
	height: 20px;
	left: 10px;
	position: absolute;
	transition-duration: .3s;
	transition-property: all;
	width: 3px;
}
.header-bottom .nav-list a.close:before {
	transform: rotate(45deg);
}
.header-bottom .nav-list a.close:after {
	transform: rotate(-45deg);
}
.nav-list {
	position: relative;
}
.nav-list ul {
	background-color: #fff;
}
.nav-list ul li > a {
	border : 1px solid #e7e7e7;
	border-top : none;
	color: #666;
	display: block;
	padding: 10px 25px;
}
.nav-list ul li:hover > a {
	background-color: #f6f6f6;
	color: #004070;
}
.nav-list .sublist {
	background-color: #fff;
	border : 1px solid #e7e7e7;
	box-shadow: 0 1px 8px rgba(0, 0, 0, 0.08);
	display: none;
	left: 299px;
	min-height: calc(100% - 60px);
	padding: 15px;
	position: absolute;
	top: 0;
	width: calc(100% - 300px);
	z-index: 999;
}
.nav-list .sublist {
	min-height: 100%;
	width: 980px;
}
.nav-list .sublist > div {
	display: flex;
	flex-wrap: wrap;
}
.nav-list .sublist a {
	color: #666;
	margin: 10px;
	width: 200px;
}
.nav-list .sublist a span {
	display: table-cell;
	font-size: 1.3rem;
	font-weight: bold;
	line-height: 1.3;
	padding-bottom: 10px;
	height: 40px;
	vertical-align: bottom;
}
.nav-list .sublist a .image {
	background: #f6f6f6 url(../img/no-image.svg) no-repeat center;
	background-size: auto 80%;
	border: 2px solid #fff;
	height: 120px;
	overflow: hidden;
	position: relative;
	width: 100%;
}
.nav-list .sublist a img {
	object-fit: cover;
	object-position: center;
}
.nav-list .sublist a:hover {
	color: #004070;
}
.nav-list .sublist a:hover .image {
	border: 2px solid #004070;
	transition-duration: .3s;
	transition-property: all;
}
.nav-list ul li:hover .sublist {
	display: block;
}
.header-bottom .search {
	align-items: center;
	display: flex;
	flex-grow: 1;
	margin-left: 60px;
}
.header-bottom .search form {
	display: flex;
	width: 100%;
}
.header-bottom .search input {
	background-color: #002d4e;
	border: none;
	flex-grow: 1;
	font-size: 1.5rem;
	padding: 8px 15px;
	/* text-transform: capitalize; */
}
.header-bottom .search ::placeholder {
	color: #fff;
	opacity: .5;
}
.header-bottom .search :-ms-input-placeholder {
	color: #fff;
	opacity: .5;
}
.header-bottom .search ::-ms-input-placeholder {
	color: #fff;
	opacity: .5;
}
.header-bottom .search a {
	background: #fff url(../img/search.png) no-repeat center;
	background-size: 16px;
	display: block;
	margin-left: 12px;
	width: 40px;
}
.header-bottom .search a:hover {
	background-color: #f6f6f6;
}

/* Smaller than 1200px */
@media (max-width: 1200px) {
	.header-bottom .category-menu {
		display: none;
	}
	.header-bottom .search {
		margin-left: 0;
	}
	.header-bottom .nav-list {
		background-color: #fff; /* #f6f6f6; */
		display: block;
		height: 100%;
		max-width: 100%;
		overflow-x: hidden;
		position: fixed;
		left: -100%;
		top: 0;
		transition-duration: .3s;
		transition-property: all;
		width: 330px;
		z-index: 1000;
	}
	.header-bottom .nav-list.active {
		left: 0;
	}
	.header-bottom .nav-list a.close {
		display: inline;
	}
	.nav-list ul {
		border-top: 1px solid #e7e7e7;
		margin-top: 45px;
	}
	.nav-list ul li:hover .sublist {
		display: none;
	}
}

/*************************************************************************************************/
/** login-register *******************************************************************************/
/*************************************************************************************************/

.login-register {
	display: flex;
	margin: 40px 0;
	width: 100%;
}
.login-register > div {
	position: relative;
	width: 50%;
}
.login-register > .login {
	padding-right: 100px;
}
.login-register > .register {
	padding-left: 100px;
}
.login-register > .login:after {
	background-color: #e7e7e7;
	content: '';
	height: 100%;
	position: absolute;
	top: 20px;
	right: 0;
	width: 1px;
}
.login-register a.register {
	background-color: #004070;
	color: #fff;
	display: inline-block;
	font-size: 1.5rem;
	margin-top: 30px;
	padding: 10px 20px;
	text-align: center;
}
.login-register a.register span {
	background: url(../img/register.png) no-repeat center left;
	background-size: 16px;
	padding-left: 26px;
}
.login-register a.register:hover {
	background-color: #005392;
}
form#login .error {
	color: #f00;
	display: none;
	font-weight: bold;
	margin-bottom: 20px;
}
form#login .row + .row {
	margin-top: 10px;
}
form#login .row label {
	display: block;
	margin: 10px;
}
form#login .row input {
	border: 1px solid #e7e7e7;
	padding: 5px 15px;
	width: 100%;
}
form#login .button {
	align-items: center;
	display: flex;
	margin-top: 30px;
}
form#login a.login {
	background-color: #004070;
	color: #fff;
	display: inline-block;
	font-size: 1.5rem;
	margin-right: 20px;
	padding: 10px 20px;
	text-align: center;
}
form#login a.login span {
	background: url(../img/login.png) no-repeat center left;
	background-size: 16px;
	padding-left: 26px;
}
form#login a.login:hover {
	background-color: #005392;
}
form#login a.forgot-password:hover {
	color: #004070;
}

/* Smaller than 850px */
@media (max-width: 850px) {
	.login-register {
		flex-direction: column;
		margin: 0 0 40px 0;
	}
	.login-register > div {
		width: 100%;
	}
	.login-register > .login {
		padding-right: 0;
	}
	.login-register > .login:after {
		background-color: #e7e7e7;
		top: calc(100% + 45px);
		content: '';
		height: 1px;
		position: absolute;
		left: 0;
		width: 100%;
	}
	.login-register > .register {
		padding: 45px 0 0 0;
	}
	form#login .row input {
		max-width: 400px;
	}
}

/*************************************************************************************************/
/** forgot-password ******************************************************************************/
/*************************************************************************************************/

form#forgot-password {
	margin-top: 40px;
}
form#forgot-password .error {
	color: #f00;
	display: none;
	font-weight: bold;
	margin-bottom: 20px;
}
form#forgot-password .row label {
	display: block;
	margin: 10px;
}
form#forgot-password .row input {
	border: 1px solid #e7e7e7;
	padding: 5px 15px;
	width: 500px;
}
form#forgot-password .button {
	align-items: center;
	display: flex;
	margin-top: 30px;
}
form#forgot-password a.back {
	margin-right: 20px;
}
form#forgot-password a.back:hover {
	color: #004070;
}
form#forgot-password a.back span {
	background: url(../img/back.png) no-repeat center left;
	background-size: 16px;
	padding-left: 26px;
}
form#forgot-password a.send {
	background-color: #004070;
	color: #fff;
	display: inline-block;
	font-size: 1.5rem;
	margin-right: 0;
	padding: 10px 20px;
	text-align: center;
}
form#forgot-password a.send span {
	background: url(../img/send-password.png) no-repeat center left;
	background-size: 16px;
	padding-left: 26px;
}
form#forgot-password a.send:hover {
	background-color: #005392;
}

/* Smaller than 600px */
@media (max-width: 600px) {
	form#forgot-password .row input {
		width: 100%;
	}
}
/* Smaller than 400px */
@media (max-width: 400px) {
	form#forgot-password .button {
		align-items: normal;
		flex-direction: column;
	}
	form#forgot-password a.back {
		align-self: flex-start;
	}
	form#forgot-password .button a + a {
		margin: 15px 0 0 0;
	}
}

/*************************************************************************************************/
/** register *************************************************************************************/
/*************************************************************************************************/

form#register p {
	margin-bottom: 40px;
}
form#register p.error {
	color: #f00;
	display: none;
	font-weight: bold;
	margin-bottom: 20px;
}
form#register .row {
	display: flex;
}
form#register .row + .row {
	margin-top: 10px;
}
form#register .row .column {
	width: 50%;
}
form#register .row .column:nth-child(1) {
	padding-right: 10px;
}
form#register .row .column:nth-child(2) {
	padding-left: 10px;
}
form#register .row label {
	display: block;
	margin: 5px;
}
form#register .row input {
	border: 1px solid #e7e7e7;
	padding: 5px 15px;
	width: 100%;
}
form#register .row select {
	appearance: none;
	background: #fff url(../img/select-arrow.png) no-repeat center right 10px;
	border: 1px solid #e7e7e7;
	padding: 5px 10px;
	padding-right: 28px !important;
	width: 100%;
	-moz-appearance: none;
	-webkit-appearance: none;
}
form#register .row.country {
	flex-direction: column;
	margin-bottom: 20px;
}
form#register .row.country > div {
	display: flex;
}
form#register a.checkbox + a.checkbox {
	margin-left: 30px;
}
form#register a.checkbox {
	align-items: center;
	display: inline-flex;
	color: #000;
	font-size: 1.8rem;
	margin: 10px 0;
	padding-left: 35px;
	position: relative;
	text-decoration: none;
}
form#register a.checkbox:before {
	background: #004070;
	border-radius: 999px;
	content: '';
	display: block;
	height: 24px;
	left: 0;
	opacity: .25;
	position: absolute;
	top: 2px;
	width: 24px;
}
form#register a.checkbox.checked:before {
	opacity: 1;
}
form#register a.checkbox.checked:after {
	background: #fff;
	border-radius: 999px;
	content: '';
	display: block;
	height: 10px;
	margin-top: -6px;
	position: absolute;
	left: 7px;
	top: 50%;
	width: 10px;
}
form#register .button {
	align-items: center;
	display: flex;
	margin-top: 30px;
}
form#register a.back {
	margin-right: 20px;
}
form#register a.back:hover {
	color: #004070;
}
form#register a.back span {
	background: url(../img/back.png) no-repeat center left;
	background-size: 16px;
	padding-left: 26px;
}
form#register a.submit {
	background-color: #004070;
	color: #fff;
	display: inline-block;
	font-size: 1.5rem;
	margin-right: 20px;
	padding: 10px 20px;
	text-align: center;
}
form#register a.submit span {
	background: url(../img/validate.png) no-repeat center left;
	background-size: 16px;
	padding-left: 26px;
}
form#register a.submit:hover {
	background-color: #005392;
}
form#register .form-required:after {
	color: #004070;
	content: '*';
	font-weight: bold;
	margin-left: 5px;
}
form#register .form-required.mandatory:after {
	color: #f00;
	content: '* Required';
}
form#register .form-required.invalid:after {
	color: #f00;
	content: '* Invalid';
}
form#register .form-required.password-length:after {
	color: #f00;
	content: '* 6 characters long';
}
form#register .form-required.mandatory + input,
form#register .form-required.mandatory + select,
form#register .form-required.invalid + input,
form#register .form-required.invalid + select {
	border-color: #f00;
}
.recaptcha {
	margin-top: 40px !important;
	text-align: center;
}
.recaptcha-error {
	color: #f00;
	display: none;
	font-weight: bold;
	margin-bottom: 10px !important;
}
.g-recaptcha > div {
	margin: 0 auto;
}

/* Smaller than 600px */
@media (max-width: 600px) {
	form#register .row {
		flex-direction: column;
	}
	form#register .row .column {
		width: 100%;
	}
	form#register .row .column:nth-child(1) {
		padding-right: 0;
	}
	form#register .row .column:nth-child(2) {
		padding-left: 0;
	}
	form#register .row .column + .column {
		margin-top: 10px;
	}
	form#register .row.country > div {
		flex-direction: column;
	}
	form#register a.checkbox {
		align-self: flex-start;
	}
	form#register a.checkbox + a.checkbox {
		margin: 0;
	}
}
/* Smaller than 400px */
@media (max-width: 400px) {
	form#register .button {
		align-items: normal;
		flex-direction: column;
	}
	form#register a.back {
		align-self: flex-start;
	}
	form#register .button a + a {
		margin: 15px 0 0 0;
	}
}

/*************************************************************************************************/
/** products-filter ******************************************************************************/
/*************************************************************************************************/

form#products-filter a.reset {
	align-items: center;
	background-color: #004070;
	color: #fff;
	display: flex;
	font-size: 1.5rem;
	justify-content: center;
	margin: 30px 0;
	padding: 8px 20px;
	text-decoration: none;
}
form#products-filter a.reset:hover {
	background-color: #005392;
}
form#products-filter a.reset span {
	background: url(../img/reset.png) no-repeat center left;
	background-size: 16px;
	padding-left: 26px;
}
form#products-filter .special-offers {
	display: flex;
	justify-content: space-between;
	margin-top: -20px;
	padding: 20px;
}
form#products-filter .special-offers strong {
	text-transform: uppercase;
}
form#products-filter .switch {
	display: inline-block;
	height: 26px;
	position: relative;
	width: 50px;
}
form#products-filter .switch input {
	height: 0;
	opacity: 0;
	width: 0;
}
form#products-filter .slider {
	background-color: #d7d7d7;
	border-radius: 999px;
	bottom: 0;
	cursor: pointer;
	left: 0;
	position: absolute;
	right: 0;
	top: 0;
	transition: .4s;
	-webkit-transition: .4s;
}
form#products-filter .slider:before {
	background-color: #fff;
	border-radius: 50%;
	bottom: 3px;
	content: '';
	height: 20px;
	left: 3px;
	position: absolute;
	transition: .4s;
	width: 20px;
	-webkit-transition: .4s;
}
form#products-filter  input:checked + .slider {
	background-color: #005392;
}
form#products-filter input:checked + .slider:before {
	transform: translateX(24px);
	-webkit-transform: translateX(24px);
	-ms-transform: translateX(24px);
}
form#products-filter h2 {
	background-color: #fff;
	border: 1px solid #e7e7e7;
	border-bottom: none;
	padding: 15px 25px;
	text-transform: uppercase;
}
form#products-filter ul {
	background-color: #fff;
	border: 1px solid #e7e7e7;
	border-top: none;
	padding: 0 25px 25px 25px;
}
form#products-filter ul li span {
	color: #999;
	font-size: 1.3rem;
}
form#products-filter ul + h2,
form#products-filter a.more-less + h2 {
	margin-top: 30px;
}
form#products-filter a.more-less {
	align-items: center;
	background-color: #004070;
	color: #fff;
	display: flex;
	font-size: 1.5rem;
	justify-content: center;
	padding: 8px 12px;
	text-decoration: none;
}
form#products-filter a.more-less:hover {
	background-color: #005392;
}
form#products-filter a.more-less span {
	background-image: url(../img/filter-more.png);
	background-position: center left;
	background-repeat: no-repeat;
	background-size: 16px;
	padding-left: 26px;
}
form#products-filter a.more-less.less {
	display: none;
}
form#products-filter a.more-less.less span {
	background-image: url(../img/filter-less.png);
}

.right-panel .sorting {
	align-items: center;
	display: flex;
	justify-content: flex-end;
	margin: 30px 0;
}
.right-panel .sorting select {
	border: 1px solid #000;
	font-size: 1.3rem;
	height: 43px;
	padding: 5px 30px 5px 10px;
	-moz-appearance: none;
	-webkit-appearance: none;
}
.right-panel .sorting select {
	background: url(../img/select-arrow.png) no-repeat center right 10px;
	margin: 0 5px;
}
.right-panel .sorting select:first-child {
	margin-left: 20px;
}

/* Smaller than 1200px */
@media (max-width: 1200px) {
	form#products-filter ul + h2,
	form#products-filter a.more-less + h2 {
		margin-top: 20px;
	}
}


/*************************************************************************************************/
/** paging ***************************************************************************************/
/*************************************************************************************************/

.paging {
	align-items: center;
	display: flex;
	justify-content: space-between;
	margin: 30px 0;
}
.paging > div {
	align-items: center;
	display: flex;
}
.paging a {
	background-color: #004070;
	color: #fff;
	display: block;
	font-size: 1.3rem;
	height: 30px;
	line-height: 29px;
	margin-right: 5px;
	text-align: center;
	text-decoration: none;
	min-width: 34px;
}
.paging.top {
	margin-bottom: 29px;
}
.paging.bottom {
	margin-top: 10px;
}
.paging span {
	margin: 0 10px 0 5px;
}
.paging a:not(.active):not(.previous):not(.next):hover {
	background-color: #005392;
}
.paging a.active {
	background: transparent;
	border: 2px solid #004070;
	color: #004070;
	font-weight: bold;
	line-height: 24px;
}
.paging a.previous,
.paging a.next {
	background: transparent;
	color: #004070;
	font-size: 2.4rem;
	font-weight: bold;
	line-height: 1;
}
.paging a.previous:hover,
.paging a.next:hover {
	color: #005392;
}
.paging a.previous {
	margin-right: 10px;
}
.paging a.next {
	margin-left: 5px;
}

/* Smaller than 600px */
@media (max-width: 600px) {
	.paging.one-page {
		display: none;
	}
	.paging div:nth-child(1) {
		display: none;
	}
	.paging div:nth-child(2) {
		margin-left: auto;
	}
}

/*************************************************************************************************/
/** dws-catalog *****************************************************************************************/
/*************************************************************************************************/

a.dws-catalog {
	display: flex;
	flex-direction: column;
	width: 300px;
}
a.dws-catalog img {
	width: 100%;
}
a.dws-catalog span {
	align-items: center;
	background-color: #004070;
	color: #fff;
	display: inline-flex;
	font-weight: bold;
	height: 48px;
	padding: 0 25px;
	transition-duration: .3s;
	transition-property: all;
}
a.dws-catalog:hover span {
	background-color: #005392;
}

/*************************************************************************************************/
/** product **************************************************************************************/
/*************************************************************************************************/

.product-container {
	display: flex;
	flex-wrap: wrap;
	margin: -15px;
	position: relative;
}
.product-container .product {
	background-color: #fff;
	border: 1px solid #e7e7e7;
	display: flex;
	flex-direction: column;
	margin: 15px;
	padding: 15px 25px;
	position: relative;
	width: calc(33.33% - 30px);
}
.product-container .product h2 {
	flex-grow: 1;
	font-size: 1.5rem;
}
.product-container .product h2 span {
	background-color: #e7e7e7;
	color: #004070;
	display: block;
	margin: 10px 0;
	padding: 3px 0;
	text-align: center;
}
.product-container .product > div {
	width: 100%;
}
.product-container .product .badge-container {
	position: relative;
}
.product-container .product .badge {
	background-color: #000;
	border-radius: 999px;
	color: #fff;
	font-weight: bold;
	height: 65px;
	line-height: 1.3;
	padding-top: 14px;
	position: absolute;
	right: 0;
	text-align: center;
	bottom: -80px;
	width: 65px;
	z-index: 998;
}
.product-container .product .image {
	height: 150px;
	overflow: hidden;
	margin: 10px auto;
	position: relative;
	text-align: center;
	width: 150px;
}
.product-container .product .image:empty {
	background: url(../img/no-image.svg) no-repeat center;
	background-size: auto 70%;
}
.product-container .product .image img {
	max-width: 150px;
	max-height: 150px;
}
.product-container .product .reference {
	align-items: end;
	display: flex;
	font-size: 1.3rem;
	justify-content: space-between;
	position: relative;
}
.product-container .product .reference span {
	color: #999;
	font-size: 1.2rem;
	margin-right: 5px;
}
.product-container .product .reference strong {
	align-items: center;
	bottom: 0;
	color: #fff;
	display: flex;
	height: 32px;
	justify-content: center;
	position: absolute;
	right: 0;
	width: 32px;
}
.product-container .product .reference strong.W,
.product-container .product .reference strong.WI {
	background-color: #ff689b;
}
.product-container .product .reference strong.A,
.product-container .product .reference strong.AL {
	background-color: #ffad0a;
}
.product-container .product .reference strong.C,
.product-container .product .reference strong.CI,
.product-container .product .reference strong.CG,
.product-container .product .reference strong.TO {
	background-color: #32cdcd;
}
.product-container .product .price {
	background-color: #f8f8f8;
	font-size: 2rem;
	margin: 15px -25px 0 -25px;
	padding: 10px 25px;
	text-align: right;
	width: calc(100% + 50px);
}
.product-container .product .price em {
	color: #999;
	font-size: 1.5rem;
	font-style: normal;
	margin-right: 10px;
	text-decoration: line-through;
}
.product-container .product .quantity {
	align-items: center;
	display: flex;
	justify-content: space-between;
	margin-top: 15px;
}
.product-container .product .quantity input {
	border: 1px solid #000;
	height: 28px;
	margin: 0 10px;
	padding: 0 8px;
	text-align: center;
	width: 40px;
}
.product-container .product .quantity div > a {
	display: inline-block;
	height: 28px;
	line-height: 28px;
	text-decoration: none;
	width: 16px;
}
.product-container .product .quantity a.decrease {
	background: url(../img/decrease.png) no-repeat center;
	background-size: 16px;
}
.product-container .product .quantity a.increase {
	background: url(../img/increase.png) no-repeat center;
	background-size: 16px;
}
.product-container .product a.add-cart {
	align-items: center;
	background-color: #00b900;
	color: #fff;
	display: flex;
	font-size: 1.3rem;
	padding: 8px 15px;
	text-decoration: none;
}
.product-container .product a.add-cart:hover {
	background-color: #009600;
}
.product-container .product a.add-cart span {
	background-image: url(../img/add-cart.png);
	background-position: center left;
	background-repeat: no-repeat;
	background-size: 16px;
	padding-left: 26px;
}

/* Smaller than 900px */
@media (max-width: 900px) {
	.product-container .product {
		width: calc(50% - 30px);
	}
}
/* Smaller than 600px */
@media (max-width: 600px	) {
	.product-container .product {
		width: calc(100%);
	}
}

/*************************************************************************************************/
/** cart *****************************************************************************************/
/*************************************************************************************************/

.right-panel .order-date {
	border: solid 1px #f00;
	color: #f00;
	margin-bottom: 40px;
	padding: 10px 25px;
}
.right-panel .success p + p {
	margin-top: 20px;
}
.right-panel .success h3 {
	color: #004070;
	font-size: 1.6rem;
	margin-bottom: 20px;
}
.right-panel .success a {
	color: #004070;
	text-decoration: underline;
}
table.cart {
	border-collapse: separate;
	border-color: #f00;
	border-spacing: 0 15px;
	width: 100%;
}
table.cart thead td {
	text-align: center;
}
table.cart thead td h2 {
	color: #004070;
	font-size: 1.6rem;
}
table.cart thead td:first-child {
	text-align: left;
	width: 100%;
}
table.cart thead td:last-child {
	text-align: right;
	width: 100%;
}
table.cart thead td,
table.cart tbody td {
	padding: 0 25px;
	white-space: nowrap;
}
table.cart tbody tr {
	background-color: #fff;
	outline: thin solid rgba(231,231,231);
}
table.cart tbody td {
	padding: 15px 25px;
}
table.cart tbody td.item {
	align-items: center;
	display: flex;
	white-space: normal;
}
table.cart tbody td.item .image {
	height: 100px;
	overflow: hidden;
	position: relative;
	text-align: center;
	width: 100px;
}
table.cart tbody td.item .image:empty {
	background: url(../img/no-image.svg) no-repeat center;
	background-size: auto 70%;
}
table.cart tbody td.item .image img {
	max-width: 100px;
	max-height: 100px;
}
table.cart tbody td.item .description h3 {
	font-size: 1.5rem;
}
table.cart tbody td.item .description h3 span {
	background-color: #e7e7e7;
	color: #004070;
	display: block;
	margin: 10px 0;
	padding: 3px 10px;
	text-align: center;
}
table.cart tbody td.item .description .reference {
	font-size: 1.3rem;
}
table.cart tbody td.item .description .reference span {
	color: #999;
	font-size: 1.2rem;
	margin-right: 5px;
}
table.cart tbody td.item .description .reference strong {
	align-items: center;
	color: #fff;
	display: flex;
	height: 32px;
	justify-content: center;
	margin-top: 10px;
	width: 32px;
}
table.cart tbody td.item .description .reference strong.W,
table.cart tbody td.item .description .reference strong.WI {
	background-color: #ff689b;
}
table.cart tbody td.item .description .reference strong.A,
table.cart tbody td.item .description .reference strong.AL {
	background-color: #ffad0a;
}
table.cart tbody td.item .description .reference strong.C,
table.cart tbody td.item .description .reference strong.CI,
table.cart tbody td.item .description .reference strong.CG,
table.cart tbody td.item .description .reference strong.TO {
	background-color: #32cdcd;
}
table.cart tbody td.quantity {
	text-align: center;
}
table.cart tbody td.quantity input {
	border: 1px solid #000;
	height: 28px;
	margin: 0 5px;
	padding: 0 8px;
	text-align: center;
	width: 40px;
}
table.cart tbody td.quantity a:not(.delete) {
	display: inline-block;
	height: 28px;
	line-height: 28px;
	margin-bottom: 15px;
	text-decoration: none;
	width: 28px;
}
table.cart tbody td.quantity a.decrease {
	background: url(../img/decrease.png) no-repeat center;
	background-size: 16px;
}
table.cart tbody td.quantity a.increase {
	background: url(../img/increase.png) no-repeat center;
	background-size: 16px;
}
table.cart tbody td.quantity .free {
	color: #f00;
	font-weight: bold;
	margin: -8px 0 5px 0;
}
table.cart tbody td.quantity a.delete {
	align-items: center;
	background-color: #004070;
	color: #fff;
	display: inline-flex;
	font-size: 1.3rem;
	justify-content: center;
	padding: 8px 15px;
	text-decoration: none;
}
table.cart tbody td.quantity a.delete:hover {
	background-color: #005392;
}
table.cart tbody td.quantity a.delete span {
	background-image: url(../img/add-cart.png);
	background-position: center left;
	background-repeat: no-repeat;
	background-size: 16px;
	padding-left: 26px;
}
table.cart tbody td.price {
	font-size: 1.6rem;
}
.subtotal,
.total {
	align-items: center;
	display: flex;
	font-size: 1.8rem;
	justify-content: space-between;
	margin: 25px;
}
.subtotal {
	margin-top: 10px;
}
.total {
	border-top: 1px solid #e7e7e7;
	font-size: 2rem;
	padding-top: 20px;
}
.subtotal + table.cart {
	border-top: 1px solid #e7e7e7;
	padding-top: 10px;
}
form#cart {
	align-items: center;
	display: flex;
	justify-content: space-between;
}
form#cart button {
	background-color: #00b900;
	border: 0;
	color: #fff;
	cursor: pointer;
	display: block;
	font-size: 1.5rem;
	margin-left: auto;
	padding: 10px 20px;
	transition-duration: .3s;
	transition-property: all;
}
form#cart button span {
	background: url(../img/validate.png) no-repeat center left;
	background-size: 16px;
	padding-left: 26px;
}
form#cart button:hover {
	background-color: #009600;
}

/* Smaller than 600px */
@media (max-width: 600px) {
	table.cart thead td:not(.title) {
		display: none;
	}
	table.cart tbody tr {
		/* display: block; */
	}
	table.cart tbody td {
		display: block;
	}
	table.cart tbody td.item {
		flex-direction: column;
		text-align: center;
	}
	table.cart tbody td.quantity {
		padding: 0 25px;
	}
	table.cart tbody td.price {
		text-align: right;
	}
	table.cart tbody td.item .description .reference strong {
		margin-left: calc(50% - 16px);
	}
}
/* Smaller than 500px */
@media (max-width: 500px) {
	form#cart button {
		width: 100%;
	}
}

/*************************************************************************************************/
/** delivery *************************************************************************************/
/*************************************************************************************************/

form#delivery h2 {
	color: #004070;
	font-size: 1.6rem;
	margin: 0 0 15px 25px;
}
form#delivery a.checkbox {
	align-items: center;
	display: flex;
	color: #000;
	font-size: 1.8rem;
	padding-left: 40px;
	position: relative;
	text-decoration: none;
}
form#delivery  a.checkbox:before {
	background: #004070;
	border-radius: 999px;
	content: '';
	display: block;
	height: 24px;
	left: 0;
	opacity: .25;
	position: absolute;
	top: 2px;
	width: 24px;
}
form#delivery a.checkbox.checked:before {
	opacity: 1;
}
form#delivery a.checkbox.checked:after {
	background: #fff;
	border-radius: 999px;
	content: '';
	display: block;
	height: 10px;
	margin-top: -5px;
	position: absolute;
	left: 7px;
	top: 50%;
	width: 10px;
}
form#delivery a.checkbox + .text {
	font-size: 1.4rem;
	margin: 0 0 0 40px;
}
form#delivery .frame {
	background: #fff;
	border: 1px solid #e7e7e7;
	display: flex;
	margin-bottom: 30px;
	padding: 25px;
}
form#delivery .frame > div {
	width: 50%;
}
form#delivery .embassy {
	margin-top: 15px !important;
}
form#delivery .warning {
	color: #f00;
	margin: 15px 0;
}
form#delivery .row + .row {
	margin-top: 10px;
}
form#delivery .row select {
	appearance: none;
	background: #fff url(../img/select-arrow.png) no-repeat center right 10px;
	border: 1px solid #e7e7e7;
	padding: 5px 10px;
	padding-right: 28px !important;
	width: 100%;
	-moz-appearance: none;
	-webkit-appearance: none;
}
form#delivery .row input,
form#delivery .row select {
	border: 1px solid #e7e7e7;
	padding: 5px 15px;
	width: 100%;
}
form#delivery .row input:disabled,
form#delivery .row select:disabled {
	background: #fff;
	opacity: .5;
	Width: 100%;
}
form#delivery .mandatory input {
	border-color: #f00 !important;
}
form#delivery .mandatory span:before {
	color: #f00;
	content: '* Required field';
	display: block;
	font-size: 1.2rem;
	margin-bottom: 5px;
}
form#delivery .delivery-fee {
	display: none;
}
form#delivery button {
	background-color: #00b900;
	border: 0;
	color: #fff;
	cursor: pointer;
	display: block;
	font-size: 1.5rem;
	margin-left: auto;
	padding: 10px 20px;
	transition-duration: .3s;
	transition-property: all;
}
form#delivery button span {
	background: url(../img/validate.png) no-repeat center left;
	background-size: 16px;
	padding-left: 26px;
}
form#delivery button:hover {
	background-color: #009600;
}

/* Smaller than 800px */
@media (max-width: 800px) {
	form#delivery .frame {
		flex-direction: column;
	}
	form#delivery .frame > div {
		width: 100%;
	}
	form#delivery .frame > div + div {
		margin-top: 25px;
	}
}
/* Smaller than 500px */
@media (max-width: 500px) {
	form#delivery button {
		width: 100%;
	}
}

/*************************************************************************************************/
/** change-password ******************************************************************************/
/*************************************************************************************************/

form#change-password {
	max-width: 400px;
}
form#change-password .error {
	color: #f00;
	display: none;
	font-weight: bold;
	margin-bottom: 20px;
}
form#change-password .row + .row {
	margin-top: 10px;
}
form#change-password .row label {
	display: block;
	margin: 5px;
}
form#change-password .row input {
	border: 1px solid #e7e7e7;
	padding: 5px 15px;
	width: 100%;
}
form#change-password .form-required:after {
	color: #004070;
	content: '*';
	font-weight: bold;
	margin-left: 5px;
}
form#change-password .form-required.mandatory:after {
	color: #f00;
	content: '* Required';
}
form#change-password .form-required.invalid:after {
	color: #f00;
	content: '* Invalid';
}
form#change-password .form-required.password-length:after {
	color: #f00;
	content: '* 6 characters long';
}
form#change-password .form-required.mandatory + input,
form#change-password .form-required.invalid + input,
form#change-password .form-required.password-length + input {
	border-color: #f00;
}
form#change-password a.submit {
	background-color: #004070;
	color: #fff;
	display: block;
	font-size: 1.5rem;
	margin-top: 30px;
	padding: 10px 20px;
	text-align: center;
}
form#change-password a.submit:hover {
	background-color: #005392;
}

/*************************************************************************************************/
/** order ****************************************************************************************/
/*************************************************************************************************/

table.order {
	border-collapse: separate;
	border-color: #f00;
	border-spacing: 0 15px;
	width: 100%;
}
table.order thead td {
	text-align: center;
}
table.order thead td h2 {
	color: #004070;
	font-size: 1.6rem;
}
table.order thead td:first-child {
	text-align: left;
	width: 100%;
}
table.order thead td:nth-child(4) {
	text-align: right;
	width: 100%;
}
table.order thead td,
table.order tbody td {
	padding: 0 25px;
	white-space: nowrap;
}
table.order tbody tr {
	background-color: #fff;
	outline: thin solid rgba(231,231,231);
}
table.order tbody td {
	padding: 15px 25px;
}
/*
table.cart tbody td.item {
	align-items: center;
	display: flex;
	white-space: normal;
}
*/
table.order tbody td.date,
table.order tbody td.quantity {
	text-align: center;
}
table.order tbody td.button {
	text-align: right;
}
table.order tbody  a.download {
	align-items: center;
	background-color: #004070;
	color: #fff;
	display: inline-flex;
	font-size: 1.3rem;
	justify-content: end;
	padding: 8px 15px;
	text-decoration: none;
}
table.order tbody a.download:hover {
	background-color: #005392;
}
table.order tbody  a.download span {
	background-image: url(../img/download.png);
	background-position: center left;
	background-repeat: no-repeat;
	background-size: 16px;
	display: block;
	padding-left: 26px;
	height: 16px;
	width: 16px;
}

/* Smaller than 600px */
@media (max-width: 600px) {
	table.order thead {
		display: none;
	}
	table.order tbody tr {
		/* display: block; */
	}
	table.order tbody td {
		display: block;
		text-align: center;
	}
	table.order tbody td.id {
		font-weight: bold;
	}
	table.order tbody td.quantity {
		display: none;
	}
	table.order tbody td.date {
		/* margin: -10px 0; */
		padding: 0 25px;
	}
	table.order tbody td.price {
		padding: 0 25px;
	}
}

/*************************************************************************************************/
/** footer ***************************************************************************************/
/*************************************************************************************************/

.footer-top {
	background: #f2f2f2;
	color: #666;
	display: flex;
	min-height: 50px;
	padding: 30px 0;
}
.footer-top .container > div + div {
	margin-left: 120px;
}
.footer-top .container > div:last-child {
	align-items: center;
	display: flex;
	flex-grow: 1;
}
.footer-top strong.title {
	color: #004070;
	display: block;
	margin-bottom: 10px;
	text-transform: uppercase;
}
.footer-top a:hover {
	color: #004070;
}
.footer-top a.top-page {
	background: #e7e7e7 url(../img/top.png) no-repeat center;
	background-size: 16px;
	display: block;
	height: 50px;
	margin-left: auto;
	width: 50px;
}
.footer-top a.top-page:hover {
	background-color: #e0e0e0;
}
.footer-bottom {
	color: #999;
	font-size: 1.3rem;
	padding: 15px 0;
}
.footer-bottom .container {
	justify-content: center;
}

/* Smaller than 800px */
@media (max-width: 800px) {
	.footer-top .container {
		flex-direction: column;
	}
	.footer-top .container > div + div {
		margin-left: 0;
		margin-top: 30px;
	}
}

/*************************************************************************************************/
/** Modal ****************************************************************************************/
/*************************************************************************************************/

.modal-content {
	display: none;
}
#modal-container {
	background: rgba(0,0,0,.4);
	display: none;
	height: 100%;
	left: 0;
	position: fixed;
	top: 0;
	width: 100%;
	z-index: 2000;
}
#modal-container table {
	border: 0;
	height: 100%;
	margin: auto;
}
#modal {
	background: #fff;
	display: none;
}
#modal-content {
	padding: 30px;
}
#modal h3 {
	text-align: center;
}
#modal h3 span {
	color: #f00;
	display: block;
	font-size: 1.5rem;
}
#modal .quota {
	margin-top: 20px;
	text-align: center;
}
#modal .quota p {
	margin-bottom: 2px;
}
#modal .quota p strong {
	color: #f00;
	margin-left: 10px;
}
#modal .rgpd {
	margin-top: 20px;
	text-align: center;
	width: 500px;
}
#modal .button {
	align-items: center;
	display: flex;
	justify-content: center;
	margin-top: 30px;
}
#modal .button a {
	color: #fff;
	font-size: 1.5rem;
	margin: 0 5px;
	padding: 8px 20px;
	text-decoration: none;
}
#modal .button a.style1 {
	background: #004070;
}
#modal .button a.style1:hover {
	background: #005392;
}
#modal .button a.style2 {
	background: #00b900;
}
#modal .button a.style2:hover {
	background: #009600;
}
#modal .button a.shop span {
	background: url(../img/add-cart.png) no-repeat center left;
	background-size: 16px;
	padding-left: 26px;
}
#modal .button a.order span,
#modal .button a.accept-rgpd span {
	background: url(../img/validate.png) no-repeat center left;
	background-size: 16px;
	padding-left: 26px;
}

/* Smaller than 800px */
@media (max-width: 800px) {
	#modal .rgpd {
		max-width: 90%;
		width: auto;
	}
	#modal .button {
		flex-direction: column;
	}
	#modal .button a {
		text-align: center;
		width: 100%;
	}
	#modal .button a + a {
		margin-top: 10px;
	}		
}