@media only screen and (min-width: 1025px) {
.f-nav .site-nav {margin-top: .5em;}
	.f-nav .main-nav > ul > li > a {padding-top: .1em; padding-bottom: .1em;}
.f-nav .cart-bar {margin-top: .5em;}
}

@media only screen and (max-width: 1024px) {

.wrapper {padding-left: 20px; padding-right: 20px;}
#header > .wrapper {align-items: center;}

.nav-on {overflow: hidden;}
.nav-on #header:after {
	content: ""; position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 0; 
	background: radial-gradient(ellipse at center, rgba(0,0,0,.4) 0%,rgba(0,0,0,.4) 53%,rgba(0,0,0,.5) 66%,rgba(0,0,0,.6) 100%);
}

#site .nav-collapse, .nav-collapse span {position: relative; z-index: 901; display: block; width: 60px; height: 60px; padding: 0;}
#site .nav-collapse {text-decoration: none;}
.nav-collapse:before, .nav-collapse:after, .nav-collapse span:before {
	content: ""; position: absolute; right: 14px; display: block; width: 32px; height: 4px; border-radius: 2px;
	background-color: #12408e; 
}
.nav-collapse:before {top: 16px;}
.nav-on .nav-collapse:before, .nav-on .nav-collapse span:before, .nav-on .nav-collapse:after {transform-origin: left; background-color: white;}
.nav-on .nav-collapse:before {top: 16px; right: 9px; transform: rotate(45deg);}
.nav-collapse span:before {top: 28px;}
.nav-on .nav-collapse span:before {opacity: 0;}
.nav-collapse:after {bottom: 15px;}
.nav-on .nav-collapse:after {bottom: 17px; right: 9px; transform: rotate(-45deg);}

	.nav-wrapper {
		flex-direction: column; min-height: 0; position: fixed; top: 90px; right: -100%; bottom: 0; z-index: 901; width: 90%; max-width: 340px; overflow-y: auto;
		background-color: #eee;
		transition-delay: 0.1s; border-top-left-radius: .5em;
		box-shadow: 0 0 15px rgba(0,0,0,.4);
	}
	.nav-on .nav-collapse + .nav-wrapper {right: 0;}
	:root .f-nav .nav-wrapper {top: 60px;}
		
		.site-nav {order: 2; flex: 0; margin: 0; padding: 2em; padding-top: .5em;}		
			.site-nav .nav {display: block; text-align: left;}
			.site-nav .nav > li {width: 100%; margin: 0;}
				.main-nav .nav > li > a {width: 100%; padding: 1em; border-bottom: 1px solid rgba(0,0,0,.1);}
				.main-nav .nav > li:not(.current) > a {color: #333;}
				.main-nav .nav > li > a:before {display: none;}
				.main-nav .nav > .sub-menu > a {border-bottom: none;}
					.site-nav .sub-menu-wrapper {
						position: static; width: auto; visibility: visible; opacity: 1; box-shadow: none; 
						border-width: 0; transform: translateX(0) scale(1) !important;
					}
					.site-nav .sub-menu .sub-menu-wrapper:before {display: none;}
						.site-nav .sub-menu-wrapper li {width: 100%;}
							:root .site-nav .sub-menu-wrapper a {padding-left: 2.5em; border-width: 0 0 1px;}
							:root .site-nav .sub-menu-wrapper a:before {
								content: ""; position: absolute; top: 2em; left: 1.3em; 
								display: block; width: 4px; height: 4px; background-color: #12408e;
							}
							
		.cart-bar {margin: 1em auto 0; padding: 0;}
		.cart-bar:before {display: none;}
			.cart-bar a {padding: .4em 1.5em .2em; background-color: #12408e; color: white; border-radius: 1.5em;}
			.cart-bar a svg * {stroke: white;}

.item-description .price-bar {width: 100%; flex: auto;}

.item-col-5 .item-content > section {width: 25%;}

.item-col-6 .item-content > section,
.item-col-7 .item-content > section, 
.item-col-8 .item-content > section {width: 16.666%;}

.item-col-9 .item-content > section,
.item-col-10 .item-content > section,
.item-col-11 .item-content > section, 
.item-col-12 .item-content > section {width: 12.5%;}

}

@media only screen and (max-width: 960px) {
.item-col-4 .item-content > section {width: 50%;}
}

@media only screen and (max-width: 767px) {

.col-90, .col-85, .col-80, .col-75, .col-70, .col-66, .col-60, .col-55 {width: 100%;}
.col-45, .col-40, .col-33, .col-30, .col-25, .col-20, .col-15, .col-10, .col-8 {width: 50%;}

.breadcrumb {margin-top: -1.5em;}

.side-bar {display: none;}

.item-description .item-gallery {flex: auto; max-width: 600px; margin: 0 auto 1em; padding-right: 0; text-align: center;}
.item-description .item-overview {width: 100%;}

#footer .level-1 .wrapper:before {left: 50%; width: 8.5rem; transform: translateX(-50%);}
#footer .col {flex: auto; margin-bottom: 1em;}
	#footer .site-logo {display: none;}
#footer .col.contact {position: relative; width: 100%; margin-bottom: 0; padding-top: 1em; text-align: center;}
#footer .col.contact:before {
	content: ""; position: absolute; top: 0; left: -20px; right: -20px; display: block; border-top: 1px solid #ddd;
}

}

@media only screen and (max-width: 480px) {

.col-90, .col-85, .col-80, .col-75, .col-70, .col-66, .col-60, .col-55, 
.col-50, .col-45, .col-40, .col-33, .col-30, .col-25, .col-20, .col-15, .col-10, .col-8 {width: 100%;}

.main-items.item-col-4 section {width: 100%;}
	.main-items .img > a {line-height: inherit;}
		.main-items .img img {max-height: none;}

}

@media only screen and (max-width: 420px) {
.item-col-4 .item-content > section {width: 100%;}
}