/* 
Theme Name: Cartly
Version: 1.0
Author: Steadybuilt
Author URI: http://steadybuilt.com
*/

/* $Typography & Colors
------------------------------------------------

"proxima-nova"		Regular (400) / Bold (700)
"brandon-grotesque"	Bold (700)
	
black	#333333
gray	#888888
blue	#e7eff2
green	#6a7c39
orange	#d1532c
											  */

/* $Reset
--------------------------------------------- */
html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,b, u, i, center,
dl, dt, dd, ol, ul, li,fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary, time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

/* $Global
--------------------------------------------- */
body {	
	font-family: "proxima-nova", Helvetica, Arial, sans-serif;
	font-weight: 400;
	font-size: 62.5%;
	line-height: 100%;
	background: #FFF;
	color: #333;
	-webkit-text-size-adjust: none;
	text-rendering: optimizeLegibility;
}
em {
	font-style: italic;
}
strong {
	font-weight: 700;
}
img,
embed,
object,
video {
	max-width: 100%;
}
a {
	outline: none;
}
a:link,
a:visited {
	text-decoration: none;
	color: #d1532c;
}
a:hover {
	color: #d1532c;
	text-decoration: underline;
}
p {
	font-size: 1.6em;
	line-height: 1.33em;
	margin-bottom: 20px;
	color: #888;
}
ul,
ol {
	font-size: 1.6em;
	line-height: 1.33em;
	color: #888;
}
h1 {
	font-size: 4.8em;
	line-height: 1em;
}
h2 {
	font-size: 3.6em;
	line-height: 1em;
}
h3 {
	font-size: 3.2em;
	line-height: 1em;
}
h4 {
	font-size: 2.7em;
	line-height: 1em;
}
h5 {
	font-size: 2.4em;
	line-height: 1em;
}
h6 {
	font-size: 1.8em;
	line-height: 1em;
}
::selection {
	background: #333;
	color: #E5E5E5;
}
::-moz-selection {
	background: #333;
	color: #E5E5E5;
}
*:focus {
	outline: none
}
.clear:before,
.clear:after {
    content: "";
    display: table;
}
.clear:after {
    clear: both;
}
.clear {
    zoom:1;
}
::-webkit-input-placeholder {}
:-moz-placeholder {}
input[type=text],
input[type=submit] {
	-webkit-appearance: none;
	border-radius: 0;
}
.tame {
	max-width: 992px;
	margin: 0 auto;
	position: relative;
	z-index: 0;
	padding-left: 3%;
	padding-right: 3%;
}
.column {
	float: left;
}
.thirds .column {
	width: 31%;
	margin-right: 3.5%;
}
.fourths .column {
	width: 22.375%;
	margin-right: 3.5%;
}
.column.end {
	margin-right: 0;
}
.column h3 {
	font: 700 1.8em/1.3em "brandon-grotesque", Helvetica, Arial, sans-serif;
	text-transform: uppercase;
	letter-spacing: .1em;
	margin-bottom: 10px;
}
.column h4 {
	font: 700 1.4em/1.3em "brandon-grotesque", Helvetica, Arial, sans-serif;
	text-transform: uppercase;
	letter-spacing: .1em;
	margin-bottom: 10px;
}
a.button:link,
a.button:visited {
	font: 700 2.4em/1.3em "brandon-grotesque", Helvetica, Arial, sans-serif;
	text-transform: uppercase;
	letter-spacing: .1em;
	padding: 10px 10%;
	color: #fff;
	background: #6a7c39;
}
a.button:hover {
	background: #d1532c;
	text-decoration: none;
}

/* $Header
--------------------------------------------- */
.site-header {
	margin-bottom: 40px;
}
.site-header .tame {
	padding-top: 40px;
	padding-bottom: 20px;
}
.site-header h1 {
	display: inline-block;
}
.site-header h1 a:link,
.site-header h1 a:visited {
	display: inline-block;
	width: 170px;
	height: 54px;
	text-indent: -9999px;
	background: transparent url('-/img/icons.png') no-repeat -10px -10px;
}
.site-header .header-top {
	margin-bottom: 110px;
}
.site-header .site-navigation {
	float: right;
	font: 700 .9em/1.3em "brandon-grotesque", Helvetica, Arial, sans-serif;
	text-transform: uppercase;
	letter-spacing: .1em;
	margin-top: 15px;
}
.site-header .site-navigation a:link,
.site-header .site-navigation a:visited {
	color: #fff;
}
.site-header .header-copy {
	text-align: center;
	color: #fff;
}
.site-header .header-copy h2 {
	font: 700 8em/1em "brandon-grotesque", Helvetica, Arial, sans-serif;
	text-transform: uppercase;
	letter-spacing: .1em;
	margin-bottom: 100px;
}
.site-header .header-copy h3 {
	font: 700 4.6em/1.33em "brandon-grotesque", Helvetica, Arial, sans-serif;
	text-transform: uppercase;
	letter-spacing: .1em;
	margin-bottom: 40px;
}
.site-header .header-copy p {
	color: #fff;
	font-style: italic;
	margin-bottom: 40px;
}

/* $Footer
--------------------------------------------- */
* {
	margin: 0;
}
html,
body {
	height: 100%;
}
.wrap {
	min-height: 100%;
	height: auto !important;
	height: 100%;
	margin: 0 auto -60px;
}
.site-footer,
.push {
	height: 60px;
}
.site-footer {
	text-align: center;
}
.site-footer p {
	font-size: 1.3em;
	color: #bbb;
	line-height: 60px;
}
.site-footer a:link,
.site-footer a:visited {
	color: #bbb;
	margin-left: 5%;
}
.site-footer a.erik:link,
.site-footer a.erik:visited {
	margin-left: 0;
}
.site-footer a:hover {
	color: #d1532c;
	text-decoration: underline;
}

/* $Home
--------------------------------------------- */
.callout {
	background: #e7eff2;
	margin: 20px auto 40px;
	padding: 30px 0;	
	text-align: center;
}
.callout h3 {
	line-height: 1.33em;
	padding: 0 10%;
}
.details .button {
	display: inline-block;
	margin-top: 15%;
}
.details .column.end {
	text-align: right;
}

/* $Responsive Support
--------------------------------------------- */
@media only screen and (max-width: 769px) {
	
	.column h3 {
		font-size: 1.6em;
	}
	.callout h3 {
		font-size: 2.4em;
	}
	.site-header .header-copy h2 {
		font-size: 6em;
	}
	.site-header .header-copy h3 {
		font-size: 3.4em;
	}
	.site-header .header-top {
		margin-bottom: 80px;
	}
	.site-header .header-copy h2 {
		margin-bottom: 70px;
	}
	.fourths .column {
		width: 31%;
		margin-right: 3.5%;
	}
	.fourths .column.third {
		margin-right: 0;
	}
	.fourths .column.end {
		width: 100%;
		margin-right: 0;
		text-align: center;
	}
	.fourths .column.end .button {
		margin: 20px auto;
	}
}
@media only screen and (max-width: 481px) {
	
	.thirds .column,
	.fourths .column {
		width: 100%;
		margin-right: 0;
		float: none;
		margin-bottom: 20px;
	}
	.tame {
		padding-left: 5%;
		padding-right: 5%;
	}
	.callout h3 {
		font-size: 1.8em;
		padding: 0;
	}
	.site-header {
		text-align: center;
	}
	.site-header .site-navigation {
		float: none;
		width: 100%;
		margin: 0 auto 30px;
		text-align: center;
	}
	.site-header .header-top {
		margin-bottom: 40px;
	}
	.site-header .header-copy h2 {
		font-size: 4em;
		margin-bottom: 30px;
	}
	.site-header .header-copy h3 {
		font-size: 2.4em;
	}
	.site-header .header-copy h3 {
		margin-bottom: 20px;
	}
	.site-header .tame {
		padding-top: 30px;
		padding-bottom: 0;
	}
	.site-header {
		margin-bottom: 30px;
	}
	.site-footer span {
		display: none;
	}
	.site-footer a:link,
	.site-footer a:visited {
		margin: 0 5%;
	}
	.fourths .column.end .button {
		margin: 20px auto 0;
	}
}
	
/* $HD Support
--------------------------------------------- */
@media only screen and (-webkit-min-device-pixel-ratio: 2),
       only screen and (-moz-min-device-pixel-ratio: 2),
       only screen and (-o-min-device-pixel-ratio: 2/1),
       only screen and (min-device-pixel-ratio: 2) {
       
       .site-header h1 a:link,
	   .site-header h1 a:visited {
			background-image: url('-/img/icons@2x.png');
			background-size: 396px 252px;
		}
}