header.header { z-index:9; }

header.header .logo { position:absolute; top:0; }

header.header nav { position:fixed; z-index:2; top:0; height:100%; background-color:#333; transition:right 300ms ease-in-out; }
header.header.show nav { right:0; }
header.header .menu { position:absolute; z-index:1; top:0; left:0; width:100%; height:100%; }
header.header ul { margin:0; padding:0; list-style:none; }

header.header .menu .main-navigation:before { position:absolute; bottom:0; left:0; width:100%; height:1px; background-color:rgba(255,255,255,.8); content:""; }

header.header .menu [role=navigation] a { color:#fff; font-weight:200; }
header.header .menu [role=navigation] a:active { background-image:linear-gradient(#fff, #fff); }

header.header .menu [role=navigation] a .cart { position:absolute; top:-10px; right: calc(100% + 76px); min-width:24px; height:24px; border-radius:12px; font-size:12px; line-height:24px; text-align:center; background-color:#222; }
header.header .menu [role=navigation] a .cart:before { position:absolute; z-index:-1; top:5px; right:5px; width:48px; height:48px; border-radius:100%; background-color:#333; background-image:url(images/icons/checkout.svg); background-position:center; background-repeat:no-repeat; content:""; transition:background 100ms ease-in-out; }
header.header .menu [role=navigation] a:hover .cart:before { background-color:#222; }
header.header .menu [role=navigation] a .cart .plus { position:absolute; top:0; right:-10px; width:10px; height:24px; font-size:16px; line-height:24px; text-align:center; }

header.header .menu [role=navigation] li.checkout a { transition:opacity 150ms ease-in-out; }
header.header .menu [role=navigation] li.checkout a.disabled { opacity:.2; pointer-events:none; }


/**/
	
header.header .toggle { position:absolute; z-index:1; top:40px; left:-88px; width:48px; height:48px; border-radius:100%; cursor:pointer; -webkit-tap-highlight-color:transparent; }
header.header .toggle:before { position:absolute; z-index:-1; top:0; left:0; width:100%; height:100%; border-radius:100%; background-color:#333; content:""; transition:background 100ms ease-in-out; }
header.header .toggle:hover:before { background-color:#222; }

header.header .toggle div { position:absolute; top:50%; left:50%; height:1px; background-color:#fff; }

header.header .toggle.show div { width:16px; margin:-1px 0 0 -8px; }
header.header .toggle.show div:first-child { margin-top:-6px; }
header.header .toggle.show div:last-child { margin-top:4px; }

header.header .toggle.hide div { width:17px; transform-origin:0 0; }
header.header .toggle.hide div:nth-child(1) { transform:rotate(45deg); margin:-6px 0 0 -6px; }
header.header .toggle.hide div:nth-child(2) { opacity:0; }
header.header .toggle.hide div:nth-child(3) { transform:rotate(-45deg); margin:6px 0 0 -7px; }


/**/

header.header ul.social-networks { position:absolute; z-index:2; bottom:40px; left:-40px; transform:translateX(-100%); }


@media screen and (min-width:1000px) {
	
	header.header .logo { left:100px; }
	
	header.header nav { right:-330px; width:340px; }
	
	header.header .menu { padding:50px 40px 40px; }
	
	header.header .menu .main-navigation { padding-bottom:30px; margin-bottom:30px; }
	header.header .menu .main-navigation:before { left:-140px; width:calc(100% + 140px); }
	
	header.header .menu [role=navigation] a { font-size:30px; line-height:36px; }
	
	
}


@media screen and (min-width:1220px) {
	
	
	
}


@media screen and (min-width:1000px) and (max-width:1219px) {
	
	
	
}


@media screen and (min-width:750px) and (max-width:999px) {
	
	
	
}


@media screen and (max-width:749px) {
	
	
	
}


@media screen and (max-width:359px) {
	
	
	
}