/** GENERAL **/
html, body {
	height: 100%;
}

.stopScroll {
	overflow: hidden;
}

@font-face {
      font-family: 'fontello';
      src: url('../font/fontello.eot?73624448');
      src: url('../font/fontello.eot?73624448#iefix') format('embedded-opentype'),
           url('../font/fontello.woff?73624448') format('woff'),
           url('../font/fontello.ttf?73624448') format('truetype'),
           url('../font/fontello.svg?73624448#fontello') format('svg');
      font-weight: normal;
      font-style: normal;
    }

* {
	border: 0px;
	padding: 0px;
	margin: 0px;
	box-sizing: border-box;
	-moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
	font-family: 'Roboto Condensed', sans-serif;
}

body {
	background-color: #000;
	border: 0px;
	padding: 0px;
	color: #fff;
}

header {
	padding-top: 140px;
	padding-bottom: 48px;
}

.alt-bg {
	background-color: #1a1a1a;
}

.div-hor {
	width: 100%;
	height: 3px;
	background-color: rgba(255,255,255,0.05);
	display: inline-block;
}

/** GRID **/
.container {
	width: 100%;
	max-width: 1140px;
	margin: auto;
	display: block;
	clear: both;
}

.content {
	width: 100%;
	/*text-align: center;*/
	display: table-cell;
	vertical-align: middle;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
}

.row { width: 100%; }

.col {
	margin-right: 24px;
	display: inline-block;
}

.row .col:last-child {
	margin-right: 0px;
}

.col-1 { width: 73px; }
.col-2 { width: 170px; }
.col-3 { width: 267px; }
.col-4 { width: 364px; }
.col-5 { width: 461px; }
.col-6 { width: 558px; }
.col-7 { width: 655px; }
.col-8 { width: 752px; }
.col-9 { width: 849px; }
.col-10 { width: 946px; }
.col-11 { width: 1043px; }
.col-12 { width: 1140px; }


/** HEADER TYPE **/
.accent { color: #32c0c4; }

h1, h2, h3, h4 {
	font-weight: 300;
	text-transform: uppercase;
}

h1 b, h2 b, h3 b, h4 b {
	font-weight: 700;
}

h1 {
	font-size: 72px;
	line-height: 72px;
	margin-bottom: 48px;
}


h2 {
	font-size: 48px;
	line-height: 54px;
	margin-bottom: 32px;
}

h3 {
	font-size: 24px;
	line-height: 30px;
	margin-bottom: 24px;
}

h4 {
	font-size: 20px;
	line-height: 26px;
	margin-bottom: 24px;
}

/** BODY TYPE **/
.b1, .b2 {
	color: #777;
	font-weight: 400;
}

.b1 {
	font-size: 24px;
	line-height: 32px;
	margin-bottom: 25px; /** -15px **/
}

.b2 {
	font-size: 16px;
	line-height: 24px;
	margin-bottom: 20px; /** -12px **/
}

/** LINKS **/
a, a:link, a:visited {
	color: #32c0c4;
	text-decoration: none;
	display: inline-block;
}

a:hover { color: #79eef2; }

/** CTAs **/
a.cta-primary {
	background-color: #32c0c4;
	color: #000;
	font-weight: 700;
	text-transform: uppercase;
	font-size: 16px;
	height: 60px;
	padding-left: 32px;
	padding-right: 32px;
	line-height: 60px;
	display: inline-block;
}

	a.cta-primary:hover {
		background-color: #79eef2;
	}


a.cta-secondary {
	color: #32c0c4;
	font-weight: 700;
	text-transform: uppercase;
	font-size: 16px;
	height: 60px;
	padding-left: 32px;
	padding-right: 32px;
	line-height: 60px;
    box-shadow: 0px 0px 0px 3px #32c0c4 inset;
    display: inline-block;
}
	
	a.cta-secondary:hover {
		color: #79eef2;
		box-shadow: 0px 0px 0px 3px #79eef2 inset;
	}

/** MARGINS **/
/*.mar-l {
	margin-bottom: 72px;
}

.mar-m {
	margin-bottom: 48px;
}

.mar-s {
	margin-bottom: 32px;
}

.mar-xs {
	margin-bottom: 24px;
}

.vmar-l {
	display: inline-block;
	width: 72px;
}

.vmar-m {
	display: inline-block;
	width: 48px;
}

.vmar-s {
	display: inline-block;
	width: 32px;
}

.vmar-xs {
	display: inline-block;
	width: 24px;
}

.vmar-xxs {
	display: inline-block;
	width: 16px;
}*/

/** STYLE GUIDE DOC **/
#headers, #bodytype {
	margin-top: 72px;
	margin-bottom: 72px;
}

#bodytype {
	padding-top: 72px;
	padding-bottom: 72px;
}

/* COMPONENT CONTAINERS */
#guide-h1 { width: 752px; }
#guide-h2 { width: 558px; }
#guide-h3 { width: 267px; } 
#guide-h4 { width: 267px; }
#guide-b1 { width: 558px; }
#guide-b2 { width: 354px; }

/** NAV **/
#mobile-nav {
	display: none;
}

	#mobile-nav-hamburger {
		position: absolute;
		top: 15px;
		right: 30px;
		display: none;
	}

	#mobile-nav-close {
		position: absolute;
		top: 15px;
		right: 33px;
		display: none;
	}

nav {
	width: 100%;
	height: 60px;
	background-color: rgba(0,0,0,0.8);
	/*background-color: #1f1f1f;*/
	position: fixed;
	top: 0px;
	left: 0px;
	z-index: 100000;
	line-height: 60px;
	/*overflow: hidden;*/
	/*text-align: center;*/
}

	nav #a3-emblem {
		width: 40px;
		margin-top: 10px;
		float: left;
	}

	nav .items {
		float: right;
	}
	nav a {
		text-transform: uppercase;
		font-weight: 700;
		margin-right: 24px;
		/*margin-top: -16px;*/
	}

	nav a:last-child {
		margin-right: 0px;
	}

	nav a.selected {
		color: #fff;
	}




/** BREAKPOINTS

TABLET <=1024
TABLET PORTRAIT >768
MOBILE <768

 **/

/**  TABLET LANDSCAPE BREAKPOINT  **/
@media (min-width: 1024px) and (max-width: 1279px) {

	/* GRID */
	.container {
		max-width: 760px;
		padding-left: 30px;
	}

	.col {
		margin-right: 20px;
	}

	.col-1 { width: 40px; }
	.col-2 { width: 100px; }
	.col-3 { width: 160px; }
	.col-4 { width: 220px; }
	.col-5 { width: 280px; }
	.col-6 { width: 340px; }
	.col-7 { width: 400px; }
	.col-8 { width: 460px; }
	.col-9 { width: 520px; }
	.col-10 { width: 580px; }
	.col-11 { width: 640px; }
	.col-12 { width: 700px; }

	/* HEADERS */
	h1 {
		font-size: 48px;
		line-height: 54px;
	}

	h2 {
		font-size: 36px;
		line-height: 40px;
	}

	/* BODY TYPE */
	.b1 {
		font-size: 20px;
		line-height: 28px;
	}

}

/** TABLET PORTRAIT BREAKPOINT **/
@media (min-width: 768px) and (max-width: 1023px) {

	/* GRID */
	.container {
		width: 90%;
		padding-left: 30px;
		padding-right: 30px;
	}

	/* HEADERS */
	h1 {
		font-size: 48px;
		line-height: 54px;
	}

	h2 {
		font-size: 36px;
		line-height: 40px;
	}

	/* BODY TYPE */
	.b1 {
		font-size: 20px;
		line-height: 28px;
	}

}

/** MOBILE BREAKPOINT **/
@media (min-width: 320px) and (max-width: 767px) {

	/* GRID */
	.container {
		max-width: auto;
		padding-left: 30px;
		padding-right: 30px;
	}

	#guide-h1, #guide-h2, #guide-h3, #guide-h4, #guide-b1, #guide-b2 {
		width: 100%;
	}

	/* HEADERS */
	h1 {
		font-size: 36px;
		line-height: 40px;
	}

	h2 {
		font-size: 24px;
		line-height: 30px;
	}

	h3 {
		font-size: 20px;
		line-height: 26px;
	}

	h4 {
		font-size: 16px;
		line-height: 20px;
	}

	/* BODY TYPE */
	.b1 {
		font-size: 16px;
		line-height: 24px;
	}

	.b2 {
		font-size: 14px;
		line-height: 20px;
	}

	/* CTAs */
	a.cta-primary, a.cta-secondary {
		width: 100%;
		text-align: center;
		font-size: 14px;
		height: 50px;
		line-height: 50px;
	}

	nav {
		background-color: #000;
	}

	nav .items {
		display: none;
	}

	nav #a3-emblem {
		text-align: center;
		float: none;
	}

	#mobile-nav {
		width: 100%;
		height: 100%;
  		display: table;
		position: fixed;
		top: 60px;
		/*padding-top: 60px;*/
		left: 0px;
		background-color: rgba(0,0,0,1);
		display: inline-block;
		z-index: 500;
	}

	#mobile-nav {
		display: none;
	}

	#mobile-nav-hamburger {
		display: block;
	}

	#mobile-nav .mobile-nav-items a {
		display: block;
		width: 100%;
		height: 60px;
		line-height: 60px;
		text-align: center;
		/*font-size: 20px;*/
		font-weight: bold;
		text-transform: uppercase;
		border-bottom: 1px solid rgba(255,255,255,0.1);
	}

	#mobile-nav a:first-child {
		border-top: 1px solid rgba(255,255,255,0.1);
	}

	/* COMPONENT CONTAINERS */

}