@media only screen and (min-width: 768px) {
.main-items.item-col-1 section:nth-child(even) .info {order: 1;}
.main-items.item-col-1 section:nth-child(even) .img {order: 2;}
}

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

.f-nav #header {padding-top: 6px; box-shadow: 0 6px 10px rgba(0,0,0,.1);}
	:root .f-nav .site-logo {max-width: 70px;}
	
	.f-nav #header .meta {margin-top: .6em;}
	
	.f-nav .site-nav {padding-top: .8em;}
		.f-nav .main-nav a {font-size: .7em;}

}


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

.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%;}

.wrapper {padding-left: 24px; padding-right: 24px;}

.nav-on {overflow: hidden;}
.nav-on:after {
	content: ""; position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 190; background-color: rgba(0,0,0,.7);
}

#site .nav-collapse, .nav-collapse span {
	position: relative; z-index: 991; display: block; width: 42px; height: 42px; padding: 0;
}
#site .nav-collapse {float: right; margin: 0 12px 0 0; text-decoration: none; border-radius: 50%;}
.nav-on .nav-collapse {}
.nav-collapse:before, .nav-collapse:after, .nav-collapse span:before {
	content: ""; position: absolute; left: 6px; display: block; height: 2px; border-radius: 2px;
	background-color: black; 
}
.nav-collapse:before, .nav-collapse:after, .nav-collapse span:before {width: 30px;}
.nav-collapse:before {top: 8px;}
.nav-collapse span:before {top: 19px;}
.nav-collapse:after {top: 30px;}
.nav-on .nav-collapse:before, .nav-on .nav-collapse:after {
	top: 19px; transform-origin: center;
}
.nav-on .nav-collapse:before {transform: rotate(45deg);}
.nav-on .nav-collapse:after {transform: rotate(-45deg);}
.nav-on .nav-collapse span:before {opacity: 0;}

	.nav-wrapper {
		min-height: 0; top: 72px; right: -100%; bottom: 0; z-index: 901; overflow-y: auto;
		text-align: center; background-color: white; transition-delay: 0.1s;
	}
	.nav-wrapper, .nav-on .nav-wrapper:before {
		position: fixed; top: 107px; width: 95%; max-width: 250px;}
	.nav-on .nav-wrapper:before {
		content: ""; right: 0; z-index: 1; display: block; height: 1.2em; 
		background: linear-gradient(to bottom, rgba(0,0,0,.1) 0%,rgba(0,0,0,0) 100%);
		pointer-events: none;
	}
	.nav-on .nav-collapse + .nav-wrapper {right: 0;}
	
		#site .main-nav .nav {padding: 1.5em; text-align: left;}
			#site .main-nav .nav > li {display: block; margin-right: 0;}
			
	.site-nav .nav-x .sub-menu .sub-menu-wrapper {
		position: static; visibility: visible; opacity: 1; width: auto; margin-bottom: .7em; box-shadow: none;
	}

.item-list.gutter-xl .item-content {margin: 0 -12px;}
	.item-list.gutter-xl .item-content > section {margin-bottom: 24px;}
		.item-list.gutter-xl .item-content .item-cell {margin: 0 12px; font-size: .9em;}

.order-elements label {width: 100%; text-align: left !important;}
:root .order-elements fieldset {display: flex; flex-wrap: wrap; padding: 24px 12px;}
	.order-elements .form-group {width: 50%; padding: 0 12px;}

.order-elements + .col-33 {width: 100%; margin-bottom: 1em;}

#footer .col-25 {margin-bottom: 1em;}
#footer .col-25:nth-child(3) {clear: both; margin-bottom: 0;}

}

@media only screen and (max-width: 767px) {
.main-items.item-col-1 .img, .main-items.item-col-1 .info,
.item-description .item-gallery, .item-description .item-overview {width: 100%;}
.header-graphic {padding-top: 7.5em;}
}

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

.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%;}

.item-col-2 .item-content > section {width: 100%;}

.item-col-3 .item-content > section,
.item-col-4 .item-content > section,
.item-col-5 .item-content > section {width: 50%;}

.site-logo {max-width: 100px;}

.lang {margin-left: 12px;}

.section-features > div {width: 100%;}

.order-elements .form-group {width: 100%;}

.item-gallery .big-img {margin-left: 0;}
.item-gallery .thumbs {position: static; width: 100%;}
.item-gallery ul {display: flex; flex-wrap: wrap;}
	#site .item-gallery li {width: 25%; padding: 0;}

}