/* 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 { 
	float: left;
	text-align: center;
	padding: 0.75em 2em;
}

label.error { font-size: 0.75em; display: none;}

}

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

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

/* STRUCTURE */

p { font: 1em/1.5em 'Droid Sans', sans-serif; }

/* IMG */
.banner img.landing { margin-top: 2.75em; }

/* CONTENT */
h1 { text-align: center; }

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

.one-left, .two-left {
	width: 100%;
	float: none;
	margin: 0 auto;
	padding-bottom: 5%;
}

.three-right {
	width: 100%;
    float: none;
    margin: 0 auto;
}

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

aside, aside.right {
    width: 100%;
    float: left;
    padding: 0;
    margin: 0 auto;
}

/* IMG */
.banner img.landing { width: 20%; }

/* NAV */
nav#navmain {
	text-align: center;
	font: 1em 'Anton', sans-serif;
    background-color: #333e48;
    text-align: center;
    padding-top: 0;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	width: 100%;
	padding-bottom: 3em;
}
 
nav#navmain li { 
	float: left;
	text-align: center;
	padding: 1em;
}

nav#navmain ul {
	list-style: none;
	padding: 0;
	margin: 0;
	display: inline-block;
}

nav#navmain li a {
	text-decoration: none;
	color: #fff;
	background: #2bb673;
	border-radius: 0.5em;
	padding: 0.5em 2em;
	border-bottom: 0.2em solid #242c33;
	width: 100%;
}

nav#navmain li a.learn {
	color: #333e48;
	background: #e7e2e6;
} 

nav#navmain li a.download {letter-spacing: 0.20em; }

nav#navmain li a.download:hover{ background: #38c581; }

nav#navmain li a.learn:hover{ background: #fff; }

/* CONTACT FORM */
#name, #email, #comments {
	font: 1em/1em 'Droid Sans', sans-serif;
	display: block;
	width: 20%;
	height: 1em;
	margin-bottom: 1em;
	border: none;
	padding: 1em 0.5em;
	float: left;
	margin-right: 2%;
	border-radius: 2px;
	background: #80e0b2;
}

#comments{ width: 40%; }

#name:hover, #email:hover, #comments:hover { background: #fff; }

fieldset {
	-padding: 5% 10% 5% 4%;
	border: none;
}

label.error { font-size: 0.75em; display: none;}

button.form_button {
	font: 1em/1em 'Droid Sans', sans-serif;
	float: left;
	color: #fff;
	text-transform: lowercase;
	border: none;
	cursor: pointer;
	width: 5%;
	padding: 0.9em 1em;
	border-radius: 2px;
	display: block;
	background: #239860;
}

button.form_button:hover {
	background: #1d8251;
}

.statusMessage { display: none; }

}

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

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

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

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

}

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

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

}