/***********************

	FABRIC - BETA 
	----------------
	"AUTHOR"
	----------------
	style.css

***********************/



/* ///////////////////////////////////////////////////////////////////////

   RESET

\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ */

html, body, nav, section, aside, div, h1, h3, h3, h4, h5, h6, ul, ol, dl, li, dt, dd, p, blockquote, pre, form, fieldset, table, th, td 
{ margin: 0; padding: 0; }

    /* ::::::::::::::::::::::::
    BASIC DEFINITIONS 
    :::::::::::::::::::::::: */

/* Edit First */
body { background: #111; color: #333; font: 14px/20px Helvetica, sans-serif;}

html, body {
    overflow-x: hidden;
}

/* Edit First */
h1 { font-size: 36px; line-height: 36px; margin-bottom: 18px; font-family: 'Sansita One', Helvetica;} 

/* Edit First */
a { text-decoration: none; color: #404040; 

	/*transition for smooth hover animation*/
	transition: all 0.15s;
	/* Browser specific tags, IE has to be IE 10 or up to work */
	-o-transition: 0.15s;
	-ms-transition: 0.15s;
	-moz-transition: 0.15s;
	-webkit-transition: 0.15s;

}

a:visited { }

/* Edit First */
a:hover { text-decoration: none; color: #8fd0ee; } 

img { border: none; }

p, ul, ol, dl, table { margin-bottom: 0px; }

ul, ol, dd { margin-left: 36px; }

/* Custom Classes */
.clearing { clear: both; }
.clearfix { overflow: hidden; }
.last { margin-bottom: 0; }
.screenReader { left: -9999px; position: absolute; top: -9999px; }



/* ///////////////////////////////////////////////////////////////////////

   PAGE STYLE

\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ */

    /* ::::::::::::::::::::::::
    STRUCTURE 
    :::::::::::::::::::::::: */

body {
	font: 100% Calibri,"Gill Sans","Gill Sans MT","Myriad Pro",Myriad,Frutiger,"Frutiger Linotype",Univers,"DejaVu Sans Condensed","Liberation Sans","Nimbus Sans L",Tahoma,Geneva,"Helvetica Neue",Helvetica,Arial,sans-serif; 
	background: #30353b; 
	margin: 0; 
	padding: 0;
}

	/* Sections */
	.header-wrap, .landing-wrap, .footer-wrap, .toolkit-wrap, .section-top, .projects-wrap, .contact-wrap, {
		width: 100%;
	}

	/* Section Colors */
	.header-wrap {
		background: #333;
	}

	.landing-wrap {
		background: #fff;
	}

	.toolkit-wrap {
	    background: #222;
	}

	.projects-wrap {
		background: #8fd0ee;
	}

	.contact-wrap {
		background: #fff;
	}

	.footer-wrap {
		background: #222;
	}

	/* Special Case Image(s) */
	.section-top {
		background: url(../img/bg-angle-small.gif) repeat-x #222;
		height: 5px;
	}

.main, .footer, #toolkit, #projects, .contact {
	margin: 0 auto; 
	width: 85em; 
	padding: 4% 0 2% 0; 
	overflow: auto; 
	max-width: 98%;
}


header {
	margin: 0 auto;
	padding: 3px 0;
	overflow: hidden;
}

.section-head {
	margin: 0 auto;
	width: 100%;
}

header, .footer {
	color: white;
}

.footer p {
	margin: 0; font-size: 0.85em;
}


h1, h2 {
	margin: 0; 
	padding: 0;
}

.content {
	float: left; 
	width: 69%; 
	padding: 0 5% 0 0;
}

.sidebar {
	width: 24%; 
	float: left;
}

.scroll-down-note {
	margin: 10% 0;
}

a.scrolldown {
	background: #D1D1D1;
	color: #999;
	border: none;
	border-radius: 1px;
	text-transform: uppercase;

	margin: 10% 0;
	width: 200px;
	padding: 2%;

	/*transition for smooth hover animation*/
	transition: all 0.30s;
	/* Browser specific tags, IE has to be IE 10 or up to work */
	-o-transition: 0.30s;
	-ms-transition: 0.30s;
	-moz-transition: 0.30s;
	-webkit-transition: 0.30s;
}

a.scrolldown:hover{
	background: #E3E3E3;
	color: #8fd0ee;
}


.arrow-down {
	width: 0; 
	height: 0; 
	border-left: 55px solid transparent;
	border-right: 55px solid transparent;
	
	border-top: 30px solid #E3E3E3;

	margin: 3% auto;
}

article {
	width: 60%;
	margin: 0 auto;
	text-align: center;
}

article.left, article.bottomleft {
	width: 49%;
	float: left;
	margin-right: 2%;
}

article.right, article.bottomright {
	width: 49%;
	float: left;
}

article.bottomleft, article.bottomright {
	margin-top: 10%;
}

article p {
	font-family: 'Vollkorn', serif;
	font-weight: 400;
	-font-style: italic;
	font-size: 1.5rem;
	line-height: 2.5rem;
	color: #888;
}

article h1 {
	color: #8fd0ee;
	font-family: 'Josefin Slab';
	font-weight: 700;
	font-size: 36px;
	line-height: 48px;
	text-transform: uppercase;
	margin-bottom: 10%;
}

#toolkit article h1 {
	margin-top: 5%;
}

h1.toolkit, h1.projects {
	margin: 5% 5%;
}

h1.projects {
	color: #444;
}

p.projects {
	color: #fff;
}

.project {
	margin: 0 auto;
	height: auto;
	overflow: hidden;
}

article.bottomleft-projects {
	width: 60%;
	float: right;
	margin-left: 5%;
	margin-top: 5%;
	border-left: 0.12em dashed #fff;
}

aside.bottomright {
	width: 34%;
	float: left;
	margin-top: 5%;
}

h2 {
	font-family: 'Vollkorn', serif;
	font-size: 2em;
}

	/* Blockquotes for Project Section */
blockquote {
	font-family: 'Vollkorn', serif;
	font-size: 1.5em;
	line-height: 2em;
	color: #444;
	text-align: left;
	margin: 1.5em 10px;
	padding: .5em 10px;
	quotes: "\201C""\201D""\2018""\2019";
}

blockquote:before {
	color: #fff;
	content: open-quote;
	font-size: 4em;
	line-height: .1em;
	margin-right: .25em;
	vertical-align: -.4em;
}

blockquote p {
	display: inline;
}

blockquote cite {
	color: #fff;
	font-size: 1em;
	display: block;
	margin-top: 0.5em;
	text-align: right;
}
 
blockquote cite:before {
	content: "\2014 \2009";
}

    /* ::::::::::::::::::::::::
    NAV 
    :::::::::::::::::::::::: */

nav {
	text-align: center;
}

.navmain {
    background-color: #0F0F0F;
    opacity: 0.5;
    text-align: center;
    font-family: 'Anton';
    font-size: 14px;
	letter-spacing: 1px;
	text-transform: uppercase;
	width: 100%;
	/*hide the sticky navigation*/
	position: fixed;
	z-index: 10;
	top:-100px;

	transition: top 0.2s ease-in-out;
	-webkit-transition: top 0.2s ease-in-out;
}

	/*show the sticky navigation*/
	.navmain.is-visible {
    top:0;
	}
 
.navmain li { 
	float: left;
	text-align: center;
	line-height: 25px;
	padding: 10px 50px;
}

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

.navmain li a{
	text-decoration: none;
	color: #fff;
} 

.navmain li a:hover{
	text-decoration: none;
	color: #8fd0ee;
} 

    /* ::::::::::::::::::::::::
    IMG 
    :::::::::::::::::::::::: */

img.toolkit {
	max-width: 400px;
	width: 100%;
}


/* ///////////////////////////////////////////////////////////////////////

   PAGE STYLE

\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ */

    /* ::::::::::::::::::::::::
    STRUCTURE 
    :::::::::::::::::::::::: */


#main {
    width: 60%;
    margin-right: 5%;
    float: left;
    margin-bottom: 20px;
}

#land1, #land2 {
	width: 30%;
	float: left;
	margin-right: 5%;
}

aside.landing {
    width: 30%;
    float: right;
}

aside.services {
    width: 35%;
    float: left;
    margin-right: 5%;
}

#services {
    width: 60%;
    float: right;
}

#landing {
	height: auto;
	margin: 0 auto;
	margin-top: 5%;
}

#landing, #about, #service, #location, #contact {
	float: left;
	max-width: 1200px;
	margin-top: 10%;
}

hr.endsection {
	float: left;
	width: 100%;
	border-bottom: 1px #999 dashed;
	border-top: none;
	border-left: none;
	border-right: none;
	margin-top: 50px;
	margin-bottom: 50px;
}

html {
	font-size: 14px;
}

p {
	font-size: 1rem;
}

    /* ::::::::::::::::::::::::
    FOOTER 
    :::::::::::::::::::::::: */

-footer {
	-height: 200px;
	float: left;
	text-align: center;
	width: 100%;
	background-color: #0F0F0F;
	margin-top: 50px;
	padding-top: 2%;
	padding-bottom: 2%;
}

#backup {
	background: #333;
	border: none;
	border-radius: 3px;
	text-transform: uppercase;

	margin: 2% 0;
	text-indent: -9999px;

	/*transition for smooth hover animation*/
	transition: all 0.30s;
	/* Browser specific tags, IE has to be IE 10 or up to work */
	-o-transition: 0.30s;
	-ms-transition: 0.30s;
	-moz-transition: 0.30s;
	-webkit-transition: 0.30s;
}

#backup:hover{
	background: #999;
}

.arrow-up {
	width: 0; 
	height: 0; 
	border-left: 10px solid transparent;
	border-right: 10px solid transparent;
	border-bottom: 10px solid #0F0F0F;
	margin: 20% 40%;
}

footer p {
	margin: 2% 0;
}

    /* ::::::::::::::::::::::::
    HEADER 
    :::::::::::::::::::::::: */

-header {
	width: 100%;
	height: auto;
	margin: 0;
}


  
    /* ::::::::::::::::::::::::
    BANNER 
    :::::::::::::::::::::::: */

#banner img.logo {
	width: 100%;
	margin: 0 auto;
	margin-bottom: 5%;
}
    
#banner {
    float: left;
    width: 100%;
}
   
#banner img {
    width: 100%;
	top: 0;
}

#banner img.landing {
	width: 100%;
	top: 0;
}

#banner img.section {
	width: 100%;
	top: 0;
	border-radius: 3px;
}

    /* ::::::::::::::::::::::::
    CONTACT FORM 
    :::::::::::::::::::::::: */

#name, #email, #comments{
	display: block;
	width: 100%;
	height: 20px;
	margin-bottom: 20px;
	font-size: 14px;
	border: none;
	padding: 2%;
	background: #CCC;
	float: right;
	font-family: 'PT Sans', sans-serif;
	border-radius: 3px;

	/*transition for smooth hover animation*/
	transition: all 0.15s;
	/* Browser specific tags, IE has to be IE 10 or up to work */
	-o-transition: 0.15s;
	-ms-transition: 0.15s;
	-moz-transition: 0.15s;
	-webkit-transition: 0.15s;
}

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

#comments{
	height: 100px;
}

fieldset {
	padding: 5% 10% 5% 4%;
	border: none;
	border-right: 1px #999 dashed;
}

button.form_button {
	float: right;
	color: #fff;
	font-family: 'Anton', sans-serif;
	text-transform: uppercase;
	background: #999;
	border: none;
	padding: 10px 100px;
	border-radius: 3px;
	letter-spacing: 1px;

	/*transition for smooth hover animation*/
	transition: all 0.15s;
	/* Browser specific tags, IE has to be IE 10 or up to work */
	-o-transition: 0.15s;
	-ms-transition: 0.15s;
	-moz-transition: 0.15s;
	-webkit-transition: 0.15s;
}

button.form_button:hover {
	background: #AAA;
}

.statusMessage{
	display: none;
}