.athom-header {
	position: fixed;
	z-index: 100;
	top: 0;
	left: 0;
	right: 0;
	height: 45px;
	
	background: #f6f6f6;
	border-bottom: 1px solid #E5E5E5;
	box-shadow: 0 2px 2px rgba(0,0,0,0.05);
}
	.athom-header .center {
		display: flex;
		flex-direction: row;
		align-items: center;
		height: 100%;
	}
	.athom-header .hamburger,
	.athom-header .mobile-title {
		display: none;
	}
	.athom-header .menu-wrap {
	}
	.athom-header .submenu-wrap {
		display: none;
	}
	.athom-header .push {
		flex-grow: 1;
		order: 2;
	}
	.athom-header .menu {
		order: 1;
		
		list-style: none;
		height: 45px;
		padding: 0;
		margin: 0;
	}
		.athom-header .menu > li {
			float: left;
			line-height: 45px;
			margin-right: 35px;
		}
		.athom-header .menu > li .text-wrap {
			position: relative;
		}
		.athom-header .menu li .text-wrap:before,
		.athom-header .menu li .text-wrap:after {
			content: "";
			display: block;
			width: 0;
			height: 0;
			position: absolute;
			z-index: 2;
			bottom: -1px;
			left: 50%;
			margin-left: -6px;

			border: 6px solid #f1f1f1;
			border-left-color: transparent;
			border-right-color: transparent;
			border-top: none;

			opacity: 0;
			visibility: hidden;
			transition: all 0.2s;
		}
		.athom-header .menu li .text-wrap:after {
			z-index: 1;
			border-width: 8px;
			margin-left: -8px;
			border-bottom-color: #E5E5E5;
		}
		.athom-header .menu li.submenu-visible .text-wrap:before,
		.athom-header .menu li.submenu-visible .text-wrap:after,
		.athom-header .menu li.active.has-submenu:hover .text-wrap:before,
		.athom-header .menu li.active.has-submenu:hover .text-wrap:after {
			visibility: visible;
			opacity: 1;
		}
			.athom-header .menu > li .text-wrap a {
				font-size: 15px;
				text-decoration: none;
				font-weight: 400;
			}
			.athom-header .menu > li.active .text-wrap a {
				font-weight: 500;
			}
			.athom-header .menu > li .text-wrap a:hover {
				color: #555;
			}
			.athom-header .menu > li .text-wrap a,
			.athom-header .menu > li .text-wrap a:active {
				color: #222;
			}
			.athom-header .menu > li .text-wrap.active a {
				font-weight: 500;
			}
			.athom-header .menu li.home a {
				display: block;
				margin-top: 7px;
				width: 32px;
				height: 32px;
				background: url(/img/parts/header/home.png) no-repeat;
				background: url(https://etc.athom.com/logo/transparent/64.png) no-repeat center center;
				background-size: contain;
				margin-right: -10px;
			}
			.athom-header .menu li.home span {
				display: none;
			}

			.athom-header .submenu-wrap {
				position: absolute;
				left: 0;
				right: 0;
				top: 46px;

				clear: both;
				display: block;
				background: #f1f1f1;
				border-bottom: 1px solid #E5E5E5;
				box-shadow: 0 1px 1px rgba(0,0,0,0.05);

				opacity: 0;
				visibility: hidden;
				transition: all 0.2s;
			}
			.athom-header .menu li.submenu-visible .submenu-wrap,
			.athom-header .menu li.active.has-submenu:hover .submenu-wrap {
				opacity: 1;
				visibility: visible;
			}
			.athom-header .submenu {
				clear: both;
				display: block;
				list-style: none;
				overflow: hidden;
			}
				.athom-header .submenu li {
					float: left;
					line-height: 14px;
					margin: 8px 0;
					margin-right: 15px;
					padding-right: 15px;
					border-right: 1px solid #ddd;
				}
				.athom-header .submenu li:last-child {
					border-right: none;
					padding-right: 0;
					margin-right: 0;
				}
					.athom-header .submenu li a {
						font-size: 13px;
						text-decoration: none;
						font-weight: 300;
					}
					.athom-header .submenu li a:hover {
						color: #666;
					}
					.athom-header .submenu li a,
					.athom-header .submenu li a:active {
						color: #333;
					}
					.athom-header .submenu li.active a {
						font-weight: 400;
					}
	.athom-header .button-order {
		order: 10;
		position: relative;
		padding: 1px 14px;
		line-height: 24px;
		height: 24px;
		white-space: nowrap;
	}
	.athom-header .language-selector {
		order: 3;
		flex-shrink: 0;
		width: 28px;
		height: 28px;
		position: relative;
		z-index: 99;
		margin-right: 5px;
		width: 28px;
	}
		.athom-header .language-selector .languages {
			position: absolute;
			width: 100%;
			max-height: 100%;

			border: 1px solid transparent;
			border-radius: 3px;
			
			transition: all 0s 0.3s;

			overflow: hidden;
		}
		.athom-header .language-selector:hover .languages,
		.athom-header .language-selector:focus .languages {
			width: 200px;
			max-height: 9999px;
			margin-left: -170px;
			background: white;
			border-color: rgba(0,0,0,0.15);
		}
			.athom-header .languages .language {
				display: block;
				text-decoration: none;
				transition: all 0.3s;
				white-space: nowrap;
			}
			.athom-header .languages .language:hover {
				background: rgba(0,0,0,0.05);
			}
			.athom-header .languages .language:first-child {
				border-bottom: 1px solid #eee;
			}
				.athom-header .languages .language .flag,
				.athom-header .languages .language .title {
					display: inline-block;
					vertical-align: middle;
				}
				.athom-header .languages .language .flag {
					margin: 6px;
					width: 16px;
					height: 16px;
				}
				.athom-header .languages .language .flag:not([src*="INT.png"]) {
					image-rendering: pixelated;					
				}
				.athom-header .languages .language .title {
					font-size: 14px;
					color: black;
				}

	.athom-header .cart {
		order: 4;
		position: relative;	
		display: inline-block;
		margin-right: 10px;
		height: 30px;
	}
		.athom-header .cart .preview {
			text-align: center;
			font-size: 0;
			transition: opacity 0.1s;
		}
		.athom-header .cart .preview:hover {
			cursor: pointer;
			opacity: 1.0;
		}
		.athom-header .cart .preview,
		.athom-header .cart .preview:active {
			opacity: 0.9;
		}
			.athom-header .cart .preview .icon {
				position: relative;
				display: inline-block;
				width: 22px;
				height: 22px;
				background: url(../img/parts/header/cart.png) no-repeat center center;
				background-size: 20px 20px;
				margin: 4px 4px;
			}
			.athom-header .cart .preview .icon:before {
				display: block;
				content: "";
				position: absolute;
				bottom: 6px;
				left: 50%;
				margin-left: -3px;
				width: 6px;
				height: 6px;
				background: #0078ff;
				border-radius: 4px;
				
				opacity: 0;
				transition: all 0.2s;
			}
			.athom-header .cart .preview:hover .icon:before {
				background: #499eff;
			}
			.athom-header .cart .preview:active .icon:before {
				background: #005bc0;
			}
			.athom-header .cart:not([data-count="0"]) .preview .icon:before {
				opacity: 1;
			}
			.athom-header .cart .preview .count {
				display: none;
				
				color: #333;
				font-size: 1em;
				font-weight: 300;
				position: absolute;
				right: 0;
				width: 24px;
				text-align: center;
				top: 10px;
				font-size: 9px;
			}
		.athom-header .cart .popup {
			position: absolute;
			right: 0;
			top: 2em;
			width: 400px;
			
			visibility: hidden;
			opacity: 0;
			transform: scale(0.9);
			transform-origin: right top;
			
			transition: all 0.2s;
		}
		.athom-header .cart.active .popup {
			opacity: 1;
			visibility: visible;
			transform: scale(1.0);
		}
		.athom-header .cart .popup:before {
			content: "";
			position: absolute;
			z-index: 2;
			right: 9px;
			top: -7px;
			border: 7px solid white;
			border-top: none;
			border-left-color: transparent;
			border-right-color: transparent;
		}
			.athom-header .cart .popup .popup-inner {
				position: relative;
				z-index: 1;
				background: white;
				padding: 0.75em;
				border-radius: 3px;
				box-shadow: 0 0 10px rgba(0,0,0,0.2);
				overflow: hidden;
				font-size: 1em;
			}
			.athom-header .cart .popup .popup-inner:after {
				content: "";
				display: block;
				position: absolute;
				z-index: 10;
				top: 0;
				left: 0;
				right: 0;
				bottom: 0;
				
				background: rgba(255,255,255,0.75) url(../img/pages/checkout/cart-loading.gif) no-repeat center center;
				
				opacity: 0;
				visibility: hidden;
				
				transition: all 0.2s;
			}
			.athom-header .cart.loading .popup .popup-inner:after {
				opacity: 1;
				visibility: visible;
			}
			.athom-header .cart .popup .user {
				position: absolute;
				top: 10px;
				right: 10px;
				align-items: center;
				text-decoration: none;
				display: flex;
			}
				.athom-header .cart .popup .user .name {
					font-size: 14px;
					font-weight: 300;
					color: #666;
				}
				.athom-header .cart:not(.has-user) .popup .user .name:before {
					content: "Login"
				}
				.athom-header .cart .popup .user:hover .name {
					text-decoration: underline;
				}
				.athom-header .cart .popup .user .avatar {
					width: 24px;
					height: 24px;
					margin-left: 8px;
					border-radius: 24px;
					background: url(https://avatars.athom.com/default/small.jpg) no-repeat center center;
					background-size: contain;
					box-shadow: 0 1px 1px rgba(0,0,0,0.1);
				}
			.athom-header .cart .popup h3 {
				font-size: 1em;
				font-weight: 400;
				text-align: left;
				border-bottom: 1px solid #eee;
				padding-bottom: 0.75em;
				margin-bottom: 1em;
			}
			.athom-header .cart .popup .list {
				list-style: none;
				margin-bottom: 1em;
				max-height: 50vh;
				overflow: auto;
			}
			.athom-header .cart[data-count="0"] .popup .list {
				margin-bottom: 0;
			}
				.athom-header .cart .popup .list li {
					position: relative;
					font-size: 0.9em;
					font-weight: 300;
					
					display: flex;
					align-items: center;
				}
				.athom-header .cart .popup .list li.error,
				.athom-header .cart .popup .list li.no_items {
					display: none;
				}
				.athom-header .cart.error .popup .list li.error {
					display: block;
					text-align: center;
					color: orangered;
					padding-bottom: 1em;
				}
				.athom-header .cart:not(.loading):not(.error)[data-count="0"] .popup .list li.no_items {
					display: block;
					text-align: center;
				}
				.athom-header .cart[data-count="0"] .popup .list + .button-buy {
					display: none;
				}
					.athom-header .cart .popup .list li.no_items p {
						margin-bottom: 1em;
					}
					.athom-header .cart .popup .list li.no_items p.error {
						color: red;
					}
					.athom-header .cart .popup .list li a {
						text-decoration: none;
						display: flex;
						align-items: center;
						flex-grow: 1;
						cursor: pointer;
					}
					.athom-header .cart .popup .list li .quantity {
						flex-shrink: 0;
						flex-grow: 0;
						width: 2em;
						height: 2em;
						font-size: 1em;
						text-align: right;
						font-family: inherit;
						font-weight: inherit;
						box-sizing: border-box;
						border-top: 1px solid transparent;
						border-bottom: 1px solid transparent;
						
						transition: all 0.3s;
						
						-moz-appearance: textfield;
					}
					.athom-header .cart .popup .list li .quantity::-webkit-inner-spin-button,
					.athom-header .cart .popup .list li .quantity::-webkit-outer-spin-button {
					    -webkit-appearance: none;
					    margin: 0;						
					}
					.athom-header .cart .popup .list li .quantity:hover {
						border-bottom-color: #ddd;
					}
					.athom-header .cart .popup .list li .quantity:focus {
						border-bottom-color: #4b9fff;
					}
					.athom-header .cart .popup .list li .title {
						flex-grow: 1;
						flex-basis: 0;
						min-width: 0;
						color: #000;
					}
					.athom-header .cart .popup .list li .title:hover {
						text-decoration: underline;
						cursor: pointer;
					}
						.athom-header .cart .popup .list li .title span {
							white-space: nowrap;
							text-overflow: ellipsis;
							overflow: hidden;							
						}
					.athom-header .cart .popup .list li .price {
						white-space: nowrap;
						flex-shrink: 0;
						margin-left: 1em;
					}
					.athom-header .cart .popup .list li .image-wrap {
						flex-shrink: 0;
						flex-grow: 0;
						width: 3em;
						height: 3em;
					}
					.athom-header .cart .popup .list li .image {
						width: 100%;
						height: 100%;
						background-repeat: no-repeat;
						background-position: center center;
						background-size: contain;
						cursor: pointer;
					}
					.athom-header .cart .popup .list li .remove {
						position: absolute;
						right: 0;
						top: 50%;
						margin-top: -1.2em;
						color: white;
						height: 2.4em;
						padding: 0 1em;
						box-sizing: border-box;			
						border-radius: 3px;	
						cursor: pointer;	
						
						opacity: 0;
						visibility: hidden;
						
						transition: all 0.2s;
					}
					.athom-header .cart .popup .list li:hover .remove {
						opacity: 1;
						visibility: visible;
					}
					.athom-header .cart .popup .list li .remove:hover {
						background: #ff1c51;
					}
					.athom-header .cart .popup .list li .remove,
					.athom-header .cart .popup .list li .remove:active {
						background: #ff003d;						
					}

@media (max-width: 959px) {
	.athom-header .hamburger {
		width: 28px;
		height: 28px;

		display: block;
		position: relative;
		order: 0;
		flex-shrink: 0;
		z-index: 9;
		left: 0;
		top: 0;
		margin: 9px;
		margin-left: 0;
		
		cursor: pointer;

		border-radius: 3px;
	}
		.athom-header .hamburger:before,
		.athom-header .hamburger:after {
			content: "";
			position: absolute;
			height: 1px;
			width: 70%;
			left: 15%;
			background: rgba(0,0,0,0.5);

			transition: all 0.3s;
		}
		.athom-header .hamburger:before {
			top: 33%;
		}
		.athom-header.hamburger-active .hamburger:before {
			transform: translateY(4px) translateX(-1px) rotate(-135deg) ;
		}
		.athom-header .hamburger:after {
			bottom: 33%;
		}
		.athom-header.hamburger-active .hamburger:after {
			transform: translateY(-5px) translateX(-1px) rotate(135deg) ;
		}
		.athom-header .menu li.home span {
			display: inline;
		}
		.athom-header .mobile-title {
			display: block;
			height: 28px;
			font-size: 1em;
			font-weight: 300;
			line-height: 28px;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
			
			-webkit-user-select: none;
			-moz-user-select: none;
			user-select: none;
		}
		.athom-header .center {
			width: auto;
			margin: 0 0.8em;
			box-sizing: border-box;
		}
	.athom-header .menu {
		float: none;
		position: absolute;
		z-index: 10;
		left: 10px;
		top: 38px;
		padding-left: 10px;

		background: white;
		border-radius: 3px;
		box-shadow: 0 0 10px rgba(0,0,0,0.2);
		height: auto;

		opacity: 0;
		visibility: hidden;
		transform: scale(0.85);
		transform-origin: left top;

		transition: all 0.3s;
	}
	.athom-header .menu:before {
		content: "";
		position: absolute;
		top: -7px;
		left: 7px;
		border: 7px solid transparent;
		border-bottom-color: white;
		border-top: none;
	}
	.athom-header.hamburger-active .menu {
		opacity: 1;
		visibility: visible;
		transform: scale(1);
	}
		.athom-header .menu li {
			float: none;
			margin-right: 0;
		}
		.athom-header .menu li .text-wrap:before,
		.athom-header .menu li .text-wrap:after {
			display: none;
		}
			.athom-header .menu li a {
				display: block;
				padding-right: 45px;
				margin-right: 10px;
			}
			.athom-header .menu li.home a {
				background: none;
				width: auto;
				height: auto;
				margin: 0;
			}
	.athom-header .menu .submenu-wrap {
		display: none;
	}

	.athom-header > .submenu-wrap {
		visibility: visible;
		opacity: 1;
	}

	.athom-header .submenu-wrap .submenu {
		text-align: center;
	}
	.athom-header .submenu-wrap .submenu li {
		float: none;
		display: inline-block;
		border-right: none;
		padding-right: 0;
	}
	
	.athom-header .cart {
		position: static;
	}
	.athom-header .cart .popup {
		position: absolute;
		right: 10px;
		left: 10px;
		top: 50px;
		width: auto;
		transform-origin: center top;
	}
	.athom-header .cart .popup:before {
		right: 50%;
		margin-right: -14px;
	}
}