/* Styles for content pages */


/************************************************************
/************************************************************
HOME PAGE */

#home {
	/*background:#000 url('../images/site/bg-caps.jpg') repeat fixed center top;
	/*box-shadow:inset 250px 0 200px -200px #000, inset -250px 0 200px -200px #000;*/
	/*background:#000 none no-repeat fixed center top;*/
	/*border-bottom:40px solid #25292e;*/
	padding-bottom: 50px;
}
#home:after {
	content:' ';
	position:absolute;
	width:100%;
	height:40px;
	top:100%;
	left:0;
	/*background:#000 url('../images/site/texture-squares.png') repeat center top;*/
	/*box-shadow:inset 0 1em 1em -1em rgba(0,0,0,0.5), inset 0 -1em 1em -1em rgba(0,0,0,0.5);*/
}

#home.banner-01 { background-image:url('../images/backgrounds/lg-caps.jpg'); }
#home.banner-02 { background-image:url('../images/backgrounds/lg-rings.jpg'); }
#home.banner-03 { background-image:url('../images/backgrounds/lt-rings2.jpg'); }
#home.banner-04 { background-image:url('../images/backgrounds/hands.jpg'); }



/* Banners area */
#banners {
	position:relative;
	list-style:none;
	margin:0;
	padding:0 0 5em;
	font-size:12.5pt;
	height:200px;
}
#banners>li {
	position:absolute;
	visibility:hidden;
	opacity:0;
	width:100%;
	left:0;
	top:0;

	-webkit-transition:all 0.7s ease 0s;
	-o-transition:all 0.7s ease 0s;
	transition:all 0.7s ease 0s;
}
#banners>li.sel {
	visibility:visible;
	opacity:1;
}

#banners p {
	margin:1em 0 1.5em;
}
#banners:after {
	content:'//////////////////////////';
	font:italic normal 13.5pt/1 FjallaOne,Arial,Helvetica,sans-serif;
	letter-spacing:6px;
	position:absolute;
	width:100%;
	bottom:1em;
	left:0;
	color:#c8f622;
}


/* Banner navigation */
#home nav ol {
	list-style:none;
	margin:1em 0;
	padding:0;
}
#home nav li {
	display:inline;
}
#home nav a {
	display:inline-block;
	text-align:left;
	text-indent:-9999px;
	outline:none;
	width:1.2em;
	height:1.2em;
	margin:0.3em;
	background:#26292f;

	-webkit-transition:all 0.4s ease 0s;
	transition:all 0.4s ease 0s;
}
#home nav li.sel>a {
	background:#c8f622;
}


/* Callouts */
#home aside {
	display:inline-table;
	vertical-align:top;
	/*width:290px;*/
	width:310px;
	height:320px;
	margin:1em;
}
#home aside a {
	display:table-cell;
}
#home aside .arrow {
	position:absolute;
	bottom:3.3em;
}


/************************************************************
/************************************************************
SERVICES PAGE */

#services {
	/*width:50%;*/
	width:calc(50% + 205px);
	text-align:left;
	margin-right:auto;
	/*padding-right:210px;*/
	border-right:280px solid transparent;
	background:#3d4044 url('../images/site/texture-diamonds.png') repeat center bottom;
	background-clip:padding-box;
	box-shadow:inset -2.5em 0 2em -2em rgba(0,0,0,0.35), inset 0 800px 200px -200px #3d4044;
}


/* Main column */
#services .col.main {
	display:block;
	width:655px;
	/*margin:0 -175px 0 auto;*/
	margin:0 20px 0 auto;
}


/* Side column */
#services .col.side {
	position:absolute;
	top:2em;
	left:100%;
	width:240px;
	margin:0 0 0 25px;
}



/* Capabilities list */
#capabilities {
	list-style:none;
	margin:1em 0 2em -0.8em;
	padding:0;

	/* no idea
	-moz-column-count:2;
	-webkit-column-count:2;
	column-count:2;
	*/
}
#capabilities li {
	/* no idea
	display:table;
	*/
	display:inline-block;
	width:40%;
	vertical-align:top;
	margin:0 0 1em;
	padding:0.6em 0.8em 0.2em;
	
	-webkit-transition:all 0.3s ease 0s;
	transition:all 0.3s ease 0s;
}
#capabilities li:hover {
	background:#23262b;
	border-radius:2px;
}

#capabilities h3 {
	margin:0;
	color:#c8f622;
}
#capabilities p {
	margin:0.2em 0 0.4em;
	font-size:10pt;
}


/************************************************************
/************************************************************
PROCESS PAGE */

#process {
	border-top:40px solid #c8f622;
	padding-bottom:3em;
	background:#000 url('../images/backgrounds/lt-rings.jpg') no-repeat fixed center top;
}
#process:before {
	content:' ';
	position:absolute;
	width:100%;
	height:40px;
	bottom:100%;
	left:0;
	background:#c8f622 url('../images/site/texture-circles.png') repeat center top;
	box-shadow:inset 0 1em 1em -1em rgba(0,0,0,0.5), inset 0 -1em 1em -1em rgba(0,0,0,0.5);
}

#process hr:after {
	color:#c8f622;
}


/* Main column */
#process .col.main {
	display:block;
	/*width:650px;*/
	width:calc(50% + 150px);
	padding:1em 2.5em;
	margin:1em 0 0 auto;
	background:#191a1a url('../images/site/texture-grid.png') repeat center center;
	box-shadow:inset 0 800px 400px -400px rgba(33,37,42,0.5);
}
#process .col.main>* {
	width:620px;
}

/* Side column */
#process .col.side {
	position:absolute;
	top:1.2em;
	left:50%;
	width:240px;
	margin:0 0 0 -487px;
}



/* Process steps */
#process-steps {
	list-style:none;
	margin:2em 0;
	padding:0;
}
#process-steps li {
	position:relative;
	margin:0 0 2em;
	padding:0 0 0 65px;
	opacity:0.85;

	-webkit-transition:all 0.3s ease 0s;
	transition:all 0.2s ease 0s;
}
#process-steps li:before {
	content:' ';
	position:absolute;
	height:50px;
	width:60px;
	left:0;
	top:0;
	background:transparent url('../images/icons/process-steps.png') no-repeat left top;

	-webkit-transition:all 0.3s ease 0s;
	transition:all 0.2s ease 0s;
}
#process-steps h3 {
	font-style:normal;
}
#process-steps p {
	margin-top:0;
}

#process-steps li:first-child:before {
	background-position:left 0;
}
#process-steps li:first-child+li:before {
	background-position:left -54px;
}
#process-steps li:first-child+li+li:before {
	background-position:left -112px;
}
#process-steps li:first-child+li+li+li:before {
	background-position:left -170px;
}

#process-steps li:hover {
	opacity:1;
}
#process-steps li:hover:before {
	left:-5px;
}



/************************************************************
/************************************************************
QUOTE MODAL */

#quote {
	display:none;
	border-top:15px solid #c8f622;
	background:#000 url('../images/site/texture-squares.png') repeat center center;
	max-width:710px;
	padding:0.7em 75px;
	text-align:center;
}
#quote .simplemodal-close {
	background:#fff;
	color:#25282d;
	position:absolute;
	height:1.4em;
	width:1.4em;
	right:0.8em;
	top:1.2em;
	font:bold 18pt/1.3em Georgia,Times,'Times New Roman',serif;
	border-radius:100%;

	-webkit-transition:all 0.3s ease 0s;
	transition:all 0.3s ease 0s;
}
#quote .simplemodal-close:hover {
	background-color:#c8f622;
}

#quote form {
	text-align:left;
	padding:1em 0;
}
#quote form:before {
	content:'//////////////////////////';
	font:italic normal 13.5pt/1 FjallaOne,Arial,Helvetica,sans-serif;
	letter-spacing:6px;
	text-align:center;
	display:block;
	margin:0 0 0.7em;
	color:#c8f622;
}

#quote form p {
	display:inline-block;
	vertical-align:top;
	margin:0.5em 0.7em 0.5em 0;
}
#quote form label {
	display:block;
	line-height:1.5;
}

#quote form input[type="text"],
#quote form input[type="email"],
#quote form input[type="tel"],
#quote form select {
	font:11pt/1.3 Arial,Helvetica,sans-serif;
	background:#fff;
	border:2px solid #43474b;
	border-radius:1px;
	width:14.5em;
}

#quote form #quote-address {
	width:30em;
}

#quote form .datePicker {
	width:12.5em !important;
}
#quote form .datePickerLink {
	display:inline-block;
	vertical-align:top;
	text-indent:-9999px;
	outline:none;
	width:2em;
	height:1.8em;
	margin-left:0.2em;
	border:2px solid #43474b;
	background:#c8f622 url('../images/icons/calendar.png') no-repeat center center;
}

#quote form .buttons {
	display:block;
	text-align:center;
	margin:1.5em 0 0;
}




/************************************************************
/************************************************************
CONTACT PAGE */

#contact {
	position:relative;
	/*border-top:40px solid #25292e;*/
	background:#000 url('../images/backgrounds/sm-rings.jpg') no-repeat fixed center top;
}
#contact:before {
	content:' ';
	position:absolute;
	width:100%;
	height:40px;
	bottom:100%;
	left:0;
	/*background:#000 url('../images/site/texture-squares.png') repeat center top;
	box-shadow:inset 0 1em 1em -1em rgba(0,0,0,0.5), inset 0 -1em 1em -1em rgba(0,0,0,0.5);*/
}

#contact .col.main {
	width:645px;
	margin:2em 0;
	padding:1px 1.2em;
	/*background:rgba(0,0,0,0.8) url('../images/site/texture-squares.png') repeat center center;*/
}
#contact .col.side {
	width:240px;
	margin-left:45px;
}


/* Form */
#contact-form {
}
#contact-form p {
	color:#ccc;
	position:relative;
	background:rgba(255,255,255,0.15);
	margin:1.2em 0;
	padding:0.5em 1em 0.5em 20%;
	border-radius:3px;
}
#contact-form p.buttons {
	background:none;
	text-align:center;
	padding-left:0;
}
#contact-form input,
#contact-form img {
	vertical-align:middle;
}
#contact-form label {
	position:absolute;
	color:#fff;
	width:18%;
	left:2%;
	top:0.8em;
}
#contact abbr {
	font-size:18pt;
	color:#c8f622;
	border:none;
	text-decoration: none;
}
#contact-form abbr {
	position:absolute;
	left:520%;
	top:0;
	text-decoration: none;
}
#contact-form input[type="text"],
#contact-form input[type="email"],
#contact-form input[type="tel"],
#contact-form textarea,
#contact-form select {
	display:block;
	width:95%;
	font:11pt/1.3 Arial,Helvetica,sans-serif;
	color:#25292e;
	border:none;
	padding:0.2em 0.6em;
	background:rgba(255,255,255,0.9);
	box-shadow:inset 0.2em 0.2em 0.2em rgba(0,0,0,0.2);
	border-radius:3px;

	-moz-box-sizing:border-box;
	box-sizing:border-box;
}
#contact-form select {
	width:auto;
}
#contact-form #code {
	display:inline-block;
	margin-left:1em;
	width:10em;
}

/* Google Recaptcha */
.g-recaptcha {
	display: block;
	text-align: center;
}
.g-recaptcha > div {
	display: inline-block;
}



/************************************************************
/************************************************************
OTHER STUFF */


/************************************************************
Callouts */

aside {
	position:relative;
	text-align:left;
	margin:2em 0;
	background:rgba(0,0,0,0.75);
	color:#fff;
}
aside>a {
	display:block;
	padding:0.5em 1.7em 0.2em;
	border-bottom:60px solid #c8f622;
}
aside>a,
aside>a:before,
aside>a:after,
aside>a>*,
aside>a:hover .arrow:after {
	-webkit-transition:all 0.4s ease 0s;
	transition:all 0.4s ease 0s;
}
aside>a:before,
aside>a:after {
	content:' ';
	position:absolute;
	visibility:hidden;
	opacity:0;
}
aside>a:before {
	width:100%;
	height:60px;
	bottom:0;
	left:0;
	background:#000 url('../images/site/texture-squares.png') repeat center center;
}
aside>a:hover:after {
	content:url('../images/site/texture-squares-triangle.png');
	height:26px;
	bottom:60px;
	right:43px;
}
aside p,
aside ul {
	color:#fff;
}
aside ul {
	margin:1em 0;
	padding:0 0 0 1.2em;
	line-height:1.3;
}

aside>a:hover {
	background:rgba(205,255,34,0.8);
	border-bottom-color:#25292e;
	color:#26292f;
}
aside>a:hover:before,
aside>a:hover:after { 
	visibility:visible;
	opacity:1;
}
aside>a:hover>* {
	color:#26292f;
}
aside>a:hover .arrow:after {
	border-left-color:#26292f;
}



/* Box / info callouts */
.box {
	padding:0.5em 1.5em;
	border-top:8px solid #c8f622;
	background:rgba(0,0,0,0.8) url('../images/site/texture-squares.png') repeat center center;
	box-shadow:inset 0 0 0.5em rgba(0,0,0,0.5);
}
aside.box p,
aside.box address {
	margin:0.5em 0;
}



/************************************************************
Odds and Ends */


/* Google map */
#map-canvas {
	height:200px;
	border:8px solid rgba(0,0,0,0.7);
	border-radius:2px;
}