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

.f-nav #header {position: fixed; top: -1px; background-color: hsla(0,0%,100%,.95); box-shadow: 0 2px 6px rgba(0,0,0,.2);}
.f-nav .site-logo a {max-width: 300px;}
.f-nav .site-nav {margin-top: .5em;}

}

@media only screen and (min-width: 1200px) {	
.site-logo {max-width: 480px;}
.site-nav {margin-top: 2em;}
.main-nav .nav > li > a {padding: 1em;}
}

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

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

#header {top: 6px;}
	#header .wrapper {padding: 0;}
		.site-logo {margin-left: 12px;}

#site .nav-collapse, .nav-collapse span {position: relative; z-index: 901; display: block; width: 60px; height: 60px; padding: 0;}
#site .nav-collapse {float: right; margin: -15px 0 0; text-decoration: none;}
#site.f-nav .nav-collapse {margin-top: -5px;}
.nav-collapse:before, .nav-collapse:after, .nav-collapse span:before {
	content: ""; position: absolute; right: 20px; display: block; height: 4px; border-radius: 2px;
	background-color: black; 
}
.nav-collapse:before {top: 12px; width: 14px;}
.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: 14px; right: 44px; width: 12px; transform: rotate(45deg);}
.nav-collapse span:before {top: 25px; width: 24px;}
.nav-on .nav-collapse span:before {right: 24px; width: 20px; transform: rotate(45deg);}
.nav-collapse:after {bottom: 18px; width: 36px;}
.nav-on .nav-collapse:after {bottom: 17px; transform: rotate(-45deg);}

	.nav-wrapper {
		min-height: 0; position: fixed; top: 96px; right: -100%; bottom: 0; width: 100%; max-width: 260px; z-index: 901; overflow-y: auto;
		text-align: center; background-color: #f0f4f7; transition-delay: 0.1s;
	}
	.nav-on .nav-collapse + .nav-wrapper {right: 0; padding-top: 1em;}
		.main-nav > .nav > li {width: 100%;}
			.main-nav .nav > li > a {padding: 1em;} 

}

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

.wrapper {padding-left: 24px; padding-right: 24px;}
.item-gallery-slide {margin: 0 -24px;}

.inside main {padding-top: 6em;}

.main-items section .col-50 {width: 100%;}

.body-cat-2 .content, .body-cat-3 .content {padding: 0 24px;}

.section-instagram .item-col-3 .item-content > section {width: 50%;}
.item-col-3 .item-content > section:nth-child(3n+1) {clear: none;}
.item-col-3 .item-content > section:nth-child(2n+1) {clear: none;}

#footer .col-50 {width: 100%; padding: 24px;}

}

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

.wrapper {padding-left: 20px; padding-right: 20px;}
.item-gallery-slide {margin: 0 -20px;}

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

}

@media only screen and (min-height: 480px) {
.header-graphic .scr-btn {
	position: absolute; left: 50%; bottom: 5em; z-index: 10;
	display: block; width: 36px; height: 36px; padding-top: 5px; text-align: center; text-decoration: none;
	border-radius: 50%; transform: translateX(-50%);
}
	.header-graphic .scr-btn span {display: inline-block;}

		.header-graphic .scr-btn path {fill: none; stroke: #fff; stroke-width: 2; stroke-miterlimit: 10;}
}