/* 
Title:		dpicc.com screen styles 2012 CSS3 etc
Author: 	gordon@slickfishstudios.com
*/
@charset "UTF-8";
/* CSS Document */


/*============================================================
SIMPLE RESET
============================================================*/
body, div, h1, h2, h3, h4, h5, h6, p, ul, ol, li, dl, dt, dd, img, form, fieldset, input, textarea, blockquote {
	margin: 0; padding: 0; border: 0;
}
* { margin:0; padding:0; }
a {
	outline: none;
}
/*============================================================
GLOBALS
============================================================*/
body {
	background: #333;
	font: 12px Verdana, Arial, Helvetica sans-serif; 
	color: #ccc;
}

#main {
	width: 90%; 
	max-width: 1200px;
	margin: 0 auto 24px auto;
	padding: 0;
}

#main-home {
	clear: both;
	width: 450px; 
	margin: 0 auto .5em auto;
	padding: 0;
}



/*============================================================
MISC STYLES
============================================================*/
.clear {
	clear: both;
}

.col {
	width: 48%;
	margin-right: 2%;
	float: left;
}
.col:last-child {
	margin-right: 0;
}
.col p {
	padding: 1em;
	display: block;
}
.righty {
	display: block; 
	text-align: right;
}
a.small {
	text-decoration: none !important;
	font-size: .85em;
}
a.small:hover {
	text-decoration: none;
}
.gray {
	color: #999;	
}
.light-gray {
	color: #ededed;
}
.block {
	display: block;
	padding-bottom: .5em;
}
.under {
	border-bottom: 1px solid #999;
}
.gray-txt {
	color: #676767;
	font-size: .85em;
	text-align: center;
	padding: 0;
	margin: 1em 0;	
	display: block;
}

h3 {
	font-weight: normal;
	text-transform: uppercase;
	color: #eb8802;
	letter-spacing: .3em;
	font-size: 1.3em;
	padding-bottom: .2em;
}
.big {
	font-size: 1.3em;
}
.group a.left_side:last-child,
.group a.norightmargin
{
	margin-right: 0;
}
.group a.left_side {
	margin-top: 7px;
}

.gold {
	color: #CFB52B;
}
.silver {
	color: #d7d2d2;
}

/*============================================================
HEADER
============================================================*/
#header {
	width: 100%;
	min-height: 210px;
	clear: both;

	background: #f89b1c;
	overflow: hidden;
}

#header img {
	border: 0;
	display: block;
	float: left;
	padding: 0;
	margin: 0;
}
#header img#banner-pic {
	width: 550px;
}




/* HEADER WITH BIG PIC STRETCH */
/* NEW LAYOUT */
#header .leftCol {
	float: left; 
	width: 28%;
	min-height: 210px;
	background: #f89b1c;
}
#header .leftCol img {
	float: right; 
	display: block;
}
#header .rightCol {
	padding: 0;
	float: left;
	width: 68%;
	min-height: 210px;
	background: #f89b1c;
}
/* END HEADER STRETCH */



#header img#logo {
	width: 230px;
}
#header a img#logo {
	display: block;
	border: 0;
	outline: none;
	padding: 0;
	margin: 0;
}



#header-home {
	width: 100%;
	clear: both;
	background: #f89b1c;
	overflow: hidden;
}
#bottom-home {
	width: 100%;
	height: 124px;
	clear: both;
	margin: 0 auto;
	background: #f89b1c;
	overflow: hidden;
}
#main-home img#logo {
	width: 100%;
	height: 133px;
	background: #f89b1c;
	padding: 0;
	margin: 0;
	border: 0;
}
#main-home a img#logo {
	display: block;
	border: 0;
	outline: none;
	padding: 0;
	margin: 0;
}

/*============================================================
HOMEPAGE NAV
============================================================*/

#home-nav {
	text-align: center;
	width: 100%;
	min-height: 280px;
	padding: 1em 0 0 0;
	margin: 0;
	background: #f89b1c;
	clear: both;
}

#home-nav .btn {
	text-decoration: none;
	border: 0;
	display: block;
	padding: 1em;
	margin: 0;
	
	font-size: 1em;
	letter-spacing: .4em;

	color: #fff;
	font-family: 'Futura Std', Futura, Helvetica, Arial, Verdana, sans-serif;
	text-transform: uppercase;
}
#home-nav .btn:hover {
	color: #333;
	text-decoration: none;
}
#home-nav .green-building {
	color: #187000;
}



.copyright {
	color: #7F7F7F;
	font-size: .85em;
	text-align: center;
	margin: 0;
	padding-bottom: 15px;
}
.copyright a {
	color: #7F7F7F;
	text-decoration: underline;
}
.copyright a:hover {
	color: #fff;
	text-decoration: underline;
}

/*============================================================
SUB-NAV
============================================================*/
.sub-nav { 
	padding: .5em 2%;
	color: #606060;
	font-size: .92em; /* 11px / 12px = .9166em */
	text-align: center;
	margin: 0;
	line-height: 2em;
	clear: both;
} 
#main .sub-nav .hidedot {
	display: none;
}
.footer { 
	padding: .5em 2%;
	font-size: .8em; 
	text-align: center;
	margin: 0;
	line-height: 2em;
	clear: both;
}
/*============================================================
CONTENTBOX
============================================================*/
.contentBox {
	padding: 1% 2%;
	background: #555861;
}
.content-headertxt {
	padding: 0;
	margin: 1em 0;	
}
.content {
	padding: 0;
	margin: 0;
}
.content h2,
#main .content h2 a,
#main .rightCol h2
{
	color: #fff;
	font-size: 1.2em;
	letter-spacing: .1em;
	font-weight: normal;
	margin: 1em 0;
}
#main .content h2 a {
	text-decoration: none;
	color: #ccc;
}
#main .content h2 a:hover {
	text-decoration: none;
	color: #eb8802;
}


.orangeCol a {
	color: #ccc;
	text-decoration: underline; 
}
.orangeCol a:hover {
	color: #fff;
	text-decoration: underline; 
}
/*============================================================
ORANGE COL - 2COL layout
============================================================*/
#main .orangeCol {
	padding: 0;
	width: 100%;
	min-height: 500px;
	background: #F89B1C url(/images/gray-bkg.gif) repeat-y right top; /* orange */

	overflow: auto;
	clear: both;
}
#main .orangeCol .leftCol {
	float: left; 
	width: 28%;
	min-height: 500px;
}


#main .orangeCol .rightCol {
	padding: 1% 2%;
	float: left;
	width: 68%;
	min-height: 500px;
	background: #555861; /* gray */	

	line-height: 150%;
}


#main .orangeCol .leftCol img {
	border: 0;
	border-bottom: 15px solid #67696F; /* light-gray */
	background: #555861; /* gray */	
	padding: 0 0 2px 0;
	display: block;
	width: 100%;

	border-bottom: 0;
	background: #67696F; /* light-gray */
	padding: 0 0 25px 0;

}
#main .orangeCol .leftCol a {
	text-decoration: underline;

}
#main .orangeCol .leftCol .sub-sidebar-nav a {
	text-decoration: none;	
}
#main .orangeCol .leftCol hr {
	margin: 1em 1.5em;
	height: 1px;
	color: #555861;
	background: #555861;
	border: 0;
}

#main .orangeCol .leftCol .sub-sidebar-examples {
	list-style-type: circle;
	margin: 0 1em;
	padding: 2em;
	color: #606060;
}
#main .orangeCol .leftCol p {
	margin: 0 1em;
	padding: .5em;
	color: #606060;
}
#main .orangeCol .leftCol a.grayLink {
	text-decoration: underline;	
	color: #606060;
}
#main .orangeCol .leftCol a.grayLink:hover {
	text-decoration: underline;	
	color: #fff;
}
#main .orangeCol .rightCol hr {
	margin: 1em 0;
	height: 1px;
	color: #ccc;
	background: #ccc;
	border: 0;
}
/*============================================================
FLEXSLIDER CONTAINER
============================================================*/
#container {
	width: 90%; 
	max-width: 850px; 
	margin: 0 auto 2em auto;
}
#container.gallery02,
#container.gallery03,
#container.gallery04
{
	max-width: 544px; 
}

#container .flexslider {
	margin-bottom: 35px;
}
#container .taller {
	margin-bottom: 50px;
}
#container .taller .flex-control-nav {
	bottom: -3rem;
}
/* change dots to numbers */
#container .flex-control-nav li {
	padding: 0.1rem 0.2rem;
}
#container .flex-control-nav li a {
	background: none;
	text-indent: 0;
	width: 100%;
	height: 100%;
	min-width: 1rem;
	text-decoration: none;
	padding: 0.1rem;
}

#container .flex-control-nav li a.active {
	color: #f89b1c;
	cursor: pointer;
	border: 1px solid #ccc;
	border-radius: 100%;
	background-color: #555861;	
}
#container .flex-control-nav li a:hover {
	color: #ffb24a;
	background-color: #222;		
}
#container .flex-control-nav {
	position: initial;
	bottom: auto;
}

#main .photo-credit {
	color: #333;
	text-align: right; 
	float: right;	

}
#main .photo-credit a {
	font-size: .8em;
	color: #333;
	text-decoration: none;	
}
#main .photo-credit a:hover {
	color: #999;
	text-decoration: none;	
}



/*============================================================
MEDIA CALLS
============================================================*/


/* &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& */
/* &&&&&&&&&&&&&&&&&&&&&&&&&&&       867       &&&&&&&&&&&&&&&&&&&&&&&&&&& */
/* &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& */
/* iphone vertical/ipod vertical */
@media (min-width: 867px) {
	#header .imageBox {
		width: 780px;
		margin: 0 auto;
	}

}

/* &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& */
/* &&&&&&&&&&&&&&&&&&&&&&&&&&&       866       &&&&&&&&&&&&&&&&&&&&&&&&&&& */
/* &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& */
/* iphone vertical/ipod vertical */
@media (max-width: 866px) {
	#header .imageBox {
		width: 100%;
		margin: 0;
	}
	#header img {
		float: none;
	}
	#header img#banner-pic {
		width: 100%;
		margin: 0 auto;
	}
	#header img#logo {
		width: 230px;
		margin: 0 auto;
	}
	#header a img#logo {
		margin: 0 auto;
		
	}
	#main .sub-nav .clear {
		display: none;
	}
	#main .sub-nav .hidedot {
		display: inline;
	}


	/* HEADER WITH BIG PIC STRETCH */
	/* NEW LAYOUT */
	#header .leftCol {
		width: 100%;
		min-height: 210px;
	}
	#header .leftCol img {
		width: 230px;
		float: none; 
		margin: 1em auto;
		padding: 0;
	}
	#header .rightCol {
		clear: both;
		width: 100%;
		min-height: 85px;
	}
	#header .rightCol img {
		width: 100%;
		margin: 0 auto;
	}
	
	/* END HEADER STRETCH */



}
/* &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& */
/* &&&&&&&&&&&&&&&&&&&&&&&&&&&       820       &&&&&&&&&&&&&&&&&&&&&&&&&&& */
/* &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& */
/* iphone vertical/ipod vertical */
@media (max-width: 820px) {

	#main {
		width: 90%; 
	}

	#container .taller { /* pushes description down */
		margin-bottom: 75px;
	}
	#container .taller .flex-control-nav {
		bottom: -70px;
	}


}
/* &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& */
/* &&&&&&&&&&&&&&&&&&&&&&&&&&&       680       &&&&&&&&&&&&&&&&&&&&&&&&&&& */
/* &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& */
/* iphone vertical/ipod vertical */
@media (max-width: 680px) {
	#main .orangeCol .leftCol {
		width: 100%;
		min-height: 200px;
		background: #F89B1C; /* orange */
	}
	#main .orangeCol .rightCol {
		clear: both;
		padding: 1% 2%;
		width: 96%;
		min-height: 300px;
	}
	#main .orangeCol .leftCol img {
		width: 230px;
		float: left;
		margin: 1em;
		padding: 0;
	}

}
/* &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& */
/* &&&&&&&&&&&&&&&&&&&&&&&&&&&       535       &&&&&&&&&&&&&&&&&&&&&&&&&&& */
/* &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& */
/* iphone vertical/ipod vertical */
@media (max-width: 535px) {

	#container .taller { /* pushes description down */
		margin-bottom: 1em;
	}
	#container .taller .flex-control-nav {
		display: none;
	}


}


/* &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& */
/* &&&&&&&&&&&&&&&&&&&&&&&&&&&       480       &&&&&&&&&&&&&&&&&&&&&&&&&&& */
/* &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& */
/* iphone vertical/ipod vertical */
@media (max-width : 480px) {


	#main-home,
	.gray-txt,
	.copyright
	{
		width: 96%; 
		padding: 0 2%;
	}
	#bottom-home {
		width: 100%;
		height: 124px;
		background: #f89b1c url(/images/home-bottom.gif) no-repeat center center;
	}	
	#bottom-home img {
		display: none;
	}	




	.content h2,
	#main .content h2 a
	{
		font-size: 1em;
		letter-spacing: 0;
	}

	.sub-nav,
	.footer
	{
		font-size: .7em;
	}
	
	
	.flex-caption {
		font-size: .85em; 
		line-height: normal;
	}


	.picnav {
		width: 220px;
		margin: 0 auto;
	}


}

/* &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& */
/* &&&&&&&&&&&&&&&&&&&&&&&&&&&       420       &&&&&&&&&&&&&&&&&&&&&&&&&&& */
/* &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& */
/* iphone vertical/ipod vertical */
@media (max-width : 420px) {


	#main .orangeCol .leftCol img {
		width: 80%;
		float: none;
		margin: 1em auto 0 auto;
		padding: 0;
	}



	#container .flexslider {
		margin-bottom: 1em;
	}
	.flex-control-nav {
		display: none;
	}





}






/* &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& */
/* &&&&&&&&&&&&&&&&&&&&&&&&&&&       320       &&&&&&&&&&&&&&&&&&&&&&&&&&& */
/* &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& */
/* iphone vertical/ipod vertical */
@media (max-width: 320px) {

	.sub-nav,
	.footer
	{
		font-size: .8em;
	}



	.flex-caption {
		font-size: .7em; 
		line-height: normal;
	}



}


/* FLEXSLIDER OVERRIDES */
#container .flexslider ul.slides li.alignMe {
	background-color: #73767f;
}
#container .flexslider ul.slides li.alignMe img {
	width: auto !important;
	margin-left: auto !important;
	margin-right: auto !important;
}
@media screen and (min-width: 1025px) {
	#container .flexslider ul.slides li.alignMe img {
		max-height: 636px !important;
	}
}
@media screen and (max-width: 1024px) {
	#container .flexslider ul.slides li.alignMe img {
		max-height: 596px !important;
	}
}
@media screen and (max-width: 834px) {
	#container .flexslider ul.slides li.alignMe img {
		max-height: 484px !important;
	}
}
@media screen and (max-width: 800px) {
	#container .flexslider ul.slides li.alignMe img {
		max-height: 464px !important;
	}
}
@media screen and (max-width: 768px) {
	#container .flexslider ul.slides li.alignMe img {
		max-height: 446px !important;
	}
}
@media screen and (max-width: 414px) {
	#container .flexslider ul.slides li.alignMe img {
		max-height: 240px !important;
	}
}




/* METHOD MATTERS BUTTON - 07.20.2022 */
.method_block {
	width: 100%;
	background: #f89b1c;
	display: flex;
}
.method_block a {
	text-decoration: none;
	font-size: 1.2em;
	letter-spacing: .4em;
	color: #ffd499;
	font-family: 'Futura Std', Futura, Helvetica, Arial, Verdana, sans-serif;
	text-transform: uppercase;
	border-radius: 2px;
	text-align: center;
	margin: 1rem auto;
	display: block;
	padding: 0.5rem 1rem;
	border: 2px solid #ffc16c;
	background-color: #c87300;	
	
	transition: all 0.5s ease-in-out;	
}
.method_block a:hover {
	letter-spacing: .5em;
	color: #ffebcf;
	border: 3px solid #ffd499;
	background-color: #a76000;
	cursor: pointer;	
}