/* FABRIC - R1 ; No12 ; FABRIC.CSS
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */

/* IMAGE RESIZER RESET
`````````````````````````````````````````````````````````````````````````` */
#resolution{
	display: none;
	font-size: 1px;
}

/* @ 1024px
`````````````````````````````````````````````````````````````````````````` */
@media screen and (max-width: 1024px) {

#resolution { font-size: 1024px; } /* Pass image append var*/

nav.navmain li {
	padding: 1.5em 2.5em;
}

.banner img.landing { margin-top: 0; }

}

/* @ 800px
`````````````````````````````````````````````````````````````````````````` */
@media screen and (max-width: 800px) {

nav.navmain li {
	padding: 1.5em 1.5em;
}

img.thumb {
	width: 30%;
	height: 30%;
	float: none;
}

}

/* @ 640px
`````````````````````````````````````````````````````````````````````````` */
@media screen and (max-width: 640px) {

#resolution { font-size: 640px; } /* Pass image append var*/

nav.navmain { display: none; }

/* CONTENT */
h1 { font-size: 20px; text-align: center; }

h3.note { font-size: 1em; text-align: center;}

.main, .about, .work, .contact, .services, .footer { 
	padding: 4% 0 4% 0; 
	max-width: 90%;
}

article {
	width: 100%;
	margin: 0;
	float: left;
}

aside {
    width: 100%;
    float: none;
    padding: 0;
    margin: 0 auto;
}

/* CONTACT FORM */
#name, #email, #comments{ float: none; }

button.form_button { float: none; }

fieldset {
	border: none;
	padding: 0;
	margin: 5% 5% 0 0;
}

}

/* @ 480px
`````````````````````````````````````````````````````````````````````````` */
@media screen and (max-width: 480px) {

#resolution { font-size: 480px; } /* Pass image append var*/

h1.gifts {
	font: 18px/24px 'PT Mono', serif;
}

p { width: 90%;}

/* CONTACT FORM */
#name, #email, #comments{
	padding: 1em 0.25em;
}

/* FOOTER */
button.top {
	float: left;
	margin-right: 5%;
}

img.thumb {
	width: 90%;
	height: 90%;
}

}

/* @ 320px
`````````````````````````````````````````````````````````````````````````` */
@media screen and (max-width: 320px) {

#resolution { font-size: 320px; } /* Pass image append var*/

.small { 
	display: inline-block;
	margin: 0 auto;
}

}