@import "settings";
@import "foundation";


#tempGuiType {
	position:fixed;
	bottom:10px;
	left:10px;
	z-index:99;
}


/*	===============================
			Variables
		=============================== */
$box-radius:.5rem;
$gray: #5e5e5e;
$green: #58873e;
$orange: #f69443;
$tan: #a5a276;


/*	===============================
			Mixins
		=============================== */
@mixin fonts() { 
	font-family: 'theano_didotregular', "Myriad Pro", Myriad, "Liberation Sans", "Nimbus Sans L", "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-weight:100;
}

@mixin font-2() { 
	font-family: "Myriad Pro", Myriad, "Liberation Sans", "Nimbus Sans L", "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-weight:200;
}


/*	===============================
			SASS
		=============================== */
a, a:hover, a:focus, a:active {
	outline:0;
}
.bg-green { 
	background-color:$green;
	hr {}
	ul {
		text-align:center;
		li {
			float:none;
			display:inline-block;
			color:white;
			a {
				color:white;
			}
		}
	}
	p { color:white; }
}
.bg-white { background-color:#fff; }
body {
	background-color:$tan;
	@include fonts();
}
button, .button {
	outline:0;
}
.copy {
	font-size:.7rem;
}
.font-2 {
	@include font-2();
}
.gray { color:$gray; }
h1,h2,h3,h4,h5,h6 { 
	color:$gray;
	@include fonts();
}
h1 {
	font-size:2.2rem;
}
h2 {
	color:$green;
	font-size:2.5rem;
	@include font-2();
}
h3 { font-size:2rem; font-weight:100; }
h4 { font-size:1rem; font-weight:bold; @include font-2(); color:$green; }
.hidden, .hide {
	display:none;
	visibility:hidden;
}
hr.black { border-color:$gray; color:$gray; background:$gray; }
input::-moz-focus-inner {
	border:0;
}
.link-page {
	li {
		a { color:#a86e40; }
	}
}
.margin-0 { margin:0; }
.margin-bottom-2 { margin-bottom:2rem; }
.margin-top-1 { margin-top:1rem; }
.margin-top-2 { margin-top:2rem; }
.nav {
	margin-top:2rem;
	float:right;
	li {
		color:$gray;
		font-size:1.2rem;
		text-align:right;
		float:right;
		margin-right:.5rem;
		&.divider {
			margin:0;
		}
		a {
			color:$gray;
			text-transform:uppercase;
			&:hover {
				color:$orange;
			}
		}
	}
}
.padding-1 { padding:1rem; }
.padding-2 { padding:2rem; }
.padding-3 { padding:3rem; }
.padding-bottom-0 { padding-bottom:0; }
.padding-bottom-3 { padding-bottom:3rem; }
.padding-bottom-4 { padding-bottom:4rem; }
.relative { position:relative; }
.radius { border-radius:$box-radius; }
.radius-bottom { border-bottom-left-radius:$box-radius; border-bottom-right-radius:$box-radius; }
.radius-top { border-top-left-radius:$box-radius; border-top-right-radius:$box-radius; }
.row {
	.row {
		margin-bottom:1rem;
		margin-top:1rem;
	}
}
#slider {
	position:absolute;
	z-index:9;
	left:1rem;
	margin-left:5%;
	top:7%;
	width:84%;
	h3 { font-size:2.2rem; }
	hr {
		margin:.5rem;
	}
	p {
		width:55%;
	}
}
.stretch { width:100%; }
ul.medium-only-text-center { text-align:center; }

/*	===============================
			Media Queries
		=============================== */
// Small screens
@media only screen { } /* Define mobile styles */

// TINY screens
@media only screen and (max-width: 35em) { 
	ul.medium-only-text-center { text-align:left; }
	.nav {
		li {
			margin-right:.2rem;
			margin-left:.2rem;
			font-size:.9rem;
		}
	}

}


// Small Screens
@media only screen and (max-width: 40em) { 
	#slider {
		h3 { font-size:1rem; }
	}
	.nav {
			margin-top:1rem;
			text-align:center;
			width:100%;
		li {
			margin-right:.35rem;
			margin-left:.35rem;
			display:inline-block;
			float:none;
		}
	}
	
	#subNav {
		li {
			margin-left:.2rem;
			margin-right:.2rem;
		}
	}

} /* max-width 640px, mobile-only styles, use when QAing mobile issues */

// Medium screens
@media only screen and (min-width: 40.063em) {
	//#slider { h1 { font-size:1rem; } }
	ul.medium-only-text-center { text-align:center; }
} /* min-width 641px, medium screens */


@media only screen and (min-width: 40.063em) and (max-width: 64em) {
	#slider { h3 { font-size:1.5rem; } }
} /* min-width 641px and max-width 1024px, use when QAing tablet-only issues */



// Starts somewhere between MEDIUM and LARGE, and includes everything smaller!
@media only screen and (max-width:55em) {
	.touch {
		#slider {
			h3 { font-size:.5rem; }
		}
	}
	
	#slider {
		//h1 { font-size:1.2rem; }
		hr { display:none; }
		p {
			width:100%;
		}
	}
	
	.nav {
			margin-top:1rem;
		li {
			font-size:1rem;
			margin-right:.2rem;
			margin-left:.2rem;
			a {
				&:hover {}
			}
		}
	}
	
}


// Large screens
@media only screen and (min-width: 64.063em) { } /* min-width 1025px, large screens */

@media only screen and (min-width: 64.063em) and (max-width: 90em) { } /* min-width 1024px and max-width 1440px, use when QAing large screen-only issues */

// XLarge screens
@media only screen and (min-width: 90.063em) { } /* min-width 1441px, xlarge screens */

@media only screen and (min-width: 90.063em) and (max-width: 120em) { } /* min-width 1441px and max-width 1920px, use when QAing xlarge screen-only issues */

// XXLarge screens
@media only screen and (min-width: 120.063em) { } /* min-width 1921px, xlarge screens */