@import url('../css/style-acc.css');
* { margin: 0; padding: 0; outline: 0; }

body, html { height: 100%; }

body {
	font-size: 12px;
	line-height: 18px;
	font-family:Arial, Helvetica, sans-serif;
	color: #282828;
	min-width: 100%;
}

a { text-decoration: none; cursor: pointer; color:#666; }
a:hover { text-decoration: none; color:#C30; }
a img { border: 0; }
a.more { background: url(images/green-arr.png) no-repeat 0 5px; padding-left: 11px; color: #72ae13; text-decoration: underline; font-size: 12px; }
a.more:hover { text-decoration: none;  }

h1{ font-size:30px; font:"Trebuchet MS", Arial, Helvetica, sans-serif; font-weight:normal;}
h2{ font-size:20px; font:"Trebuchet MS", Arial, Helvetica, sans-serif; font-weight:normal; padding:7px 0;}
h3{ font-size:17px; font:"Trebuchet MS", Arial, Helvetica, sans-serif; font-weight:normal; padding:7px 0;}

/*font-family: 'Coda', cursive;*/
/*font-family: 'Jura', sans-serif;*/

article, aside, details, footer, header, menu, nav, section { display: block; }
input, textarea, select { font-size: 12px; font-family: arial, sans-serif; }
textarea { overflow: auto; }

.cl { display: block; height: 0; font-size: 0; line-height: 0; text-indent: -4000px; clear: both; }
.notext { font-size: 0; line-height: 0; text-indent: -4000px; }
.left, .alignleft { float: left;  display: inline; padding-right:10px; padding-bottom:10px;}
.right, .alignright { float: right; display: inline; }

.container{ width:80%; padding:0 10%; margin:0 auto;}

#header { float:left; background:url(../images/header-bg.jpg) left top repeat-x; margin:0 auto; width:100%; }
#logo{ float:left; position:absolute; top:0; background:#FFF; padding:15px 8px; z-index:10;}
#tp-rgt{float:right; margin:2% 0;}
#tp-rgt a{color:#fff; background:url(../images/btn.png) center top no-repeat; padding:10px 21px; -webkit-transition: all 100ms ease-in-out;
    -moz-transition: all 100ms ease-in-out;
    -o-transition: all 100ms ease-in-out;
    transition: all 100ms ease-in-out;}
#tp-rgt a:hover{ border:none; background-position:0 -34px;}


#navigation { float:left; width:100%; margin:0 0 0 0; padding:0 0px; background:#151111; top:0px; z-index:9999999;}
#navigation ul { list-style: none; float:right; font-size: 13px; margin-top:8px;}
#navigation ul li { float:left;  padding:0px 0 0 0;}
#navigation ul li a { color: #fff; padding:9px 15px; display:inline-block; border-right:1px solid #333;}
#navigation ul li a:hover{ color: #666; text-decoration: none; }
#navigation ul li a.active{ color: #666; text-decoration: none; }
#navigation .spl{background:#bb881e;}
#navigation a.child{ border-right:none; padding-right:0;}

#navigation ul ul {
	display: none;
}

	#navigation ul li:hover > ul {
		display: block;
	}
	
#navigation ul:after {content: ""; clear: both; display: block;}

#navigation ul ul {
	background:#c22820; z-index:9999;
	position:absolute; margin-top:0px; padding-top:0px;
}
	#navigation ul ul li {
		float: none; 
		padding:0px 0px;
		display:block;
		margin:0 auto;
		border-bottom:1px solid #ac2019;
		border-right:none;
			}
		#navigation ul ul li a {
			display:block;
			padding:10px 20px 10px 20px;
			color: #fff;
			width:210px;
			font-size:1em;
		}	
			#navigation ul ul li a:hover {
				background:#1d1d1d;
				color:#fff;
				0
				padding:10px 20px 10px 20px;
			}		

#main{ float:left; margin:30% 0 0 0; width:100%;}
#main-inner{ float:left; margin:0 auto; width:100%;}

.breadcrumb { 
			list-style: none; 
			overflow: hidden; 
			float:left;
			width:100%;
			margin-bottom:4%;
			font:bold 12px Arial, Helvetica, sans-serif;
		}
		.breadcrumb li { 
			float: left; 
		}
		.breadcrumb li a {
			color: white;
			text-decoration: none; 
			padding: 4px 0 4px 55px;
			background: brown;                   /* fallback color */
			background: hsla(34,85%,35%,1); 
			position: relative; 
			display: block;
			float: left;
		}
		.breadcrumb li a:after { 
			content: " "; 
			display: block; 
			width: 0; 
			height: 0;
			border-top: 50px solid transparent;           /* Go big on the size, and let overflow hide */
			border-bottom: 50px solid transparent;
			border-left: 30px solid hsla(34,85%,35%,1);
			position: absolute;
			top: 50%;
			margin-top: -50px; 
			left: 100%;
			z-index: 2; 
		}	
		.breadcrumb li a:before { 
			content: " "; 
			display: block; 
			width: 0; 
			height: 0;
			border-top: 50px solid transparent;           /* Go big on the size, and let overflow hide */
			border-bottom: 50px solid transparent;
			border-left: 30px solid white;
			position: absolute;
			top: 50%;
			margin-top: -50px; 
			margin-left: 1px;
			left: 100%;
			z-index: 1; 
		}	
		.breadcrumb li:first-child a {
			padding-left: 10px;
		}
		.breadcrumb li:nth-child(2) a       { background:        hsla(34,85%,45%,1); }
		.breadcrumb li:nth-child(2) a:after { border-left-color: hsla(34,85%,45%,1); }
		.breadcrumb li:nth-child(3) a       { background:        hsla(34,85%,55%,1); }
		.breadcrumb li:nth-child(3) a:after { border-left-color: hsla(34,85%,55%,1); }
		.breadcrumb li:nth-child(4) a       { background:        hsla(34,85%,65%,1); }
		.breadcrumb li:nth-child(4) a:after { border-left-color: hsla(34,85%,65%,1); }
		.breadcrumb li:nth-child(5) a       { background:        hsla(34,85%,75%,1); }
		.breadcrumb li:nth-child(5) a:after { border-left-color: hsla(34,85%,75%,1); }
		.breadcrumb li:last-child a {
			background: white !important;
			color: black;
			pointer-events: none;
 			cursor: default;
		}
		.breadcrumb li:last-child a:after { border: 0; }
		.breadcrumb li a:hover { background: hsla(34,85%,25%,1); }
		.breadcrumb li a:hover:after { border-left-color: hsla(34,85%,25%,1) !important; }
		

#main-banner{ float:left; width:100%; margin:1.5% 0;}
#main-banner img{ width:100%;}
.news-letter{ width:90%; margin:12% 0; float:left; padding:2% 5%; background:#eee; display:block;}
.news-letter h3{ padding:10px 0; border-bottom:1px solid #ccc; margin-bottom:3.5%;}
.news-letter label{ width:100%; float:left; margin:2% 0;}
.news-letter input{ width:75%; padding:5px 0; margin-left:5%;}
.news-letter button{ width:40%; margin:5% 20%; float:left; background:#C30; padding:5px 7px; border-radius:5px; -moz-border-radius:5px; -webkit-border-radius:5px; border:1px solid #900; cursor:pointer; color:#fff;}

.news-letter button:hover{ background:#900;}

.table{ width:100%; float:left; margin:2% 0;}
.table td{ width:45%; float:left; padding:5px; border:1px solid #ccc;}

p.pho-work{ float:left; margin-bottom:3%; display:block; width:100%;}
p.com-brd{ float:left; margin:1% 0; width:98%; background:#eee; border-radius:5px; -moz-border-radius:5px; -webkit-border-radius:5px; border:1px solid #ccc; padding:20px 15px !important;}
p.com-brd strong{ font-size:14px; display:block; padding:8px 0; }
p.phone{ float:left; width:80%; background:url(../images/people/Phone-icon.png) left top no-repeat; padding:1% 0 0 18% !important; min-height:150px; margin:3% 0;}
p.news{ font-size:12px; padding:0% 0 !important; width:75%; float:left; margin:0; }

.gallery-thumbs{width:99%; padding:0 0 0 1%; float:left;}
.gallery-thumbs ul{ text-decoration:none; list-style-type:none; float:left; padding:0; margin:0;}
.gallery-thumbs ul li{ float:left; width:23%; margin-right:2%; margin-top:2%;}
.gallery-thumbs ul li a{ display:block; float:left;}
.gallery-thumbs ul li img{width:100%;}



#wl-txt{ float:left; background:#FFF; padding:2.5% 1%; width:98%;}

.lft{ float:left; width:22%; margin:0 2%;}
.lft ul{ float:left; padding:3% 0 0 0; width:100%;}
.lft ul li{ background:url(../images/arrow.png) center left no-repeat; list-style-type:none; border-bottom:1px solid #ececec;}
.lft ul li a{ padding:6px 5px 6px 25px; display:block;}

.rgt{ float:left; width:72%; margin:0.5% 0 0 0;}
.rgt span{ color:#C30;}
.rgt p{ padding:3% 0;}

#logos{ float:left; width:96%; background:#FFF; margin:2% 0; padding:1% 2%;}


#footer{ float:left; width:100%; bottom:0; background:url(../images/header-bg.jpg) left top repeat-x; text-align:center;}
#footer p{ color:#fff; padding:1.5% 0;}
#footer p a{ color:#eec751;}
#footer p a:hover{ color:#000;}




.form{ width:100%; float:left;}
.form h1{ padding:2.2% 0; font-size:20px; border-bottom:1px solid #ccc; margin-bottom:1.5%;}
.form label{ width:100%; float:left; margin:8px 0;}
.form label span{ float:left; width:20%; color:#666;}
.form input{ width:50%; float:left; padding:5px 2px; border:1px solid #ccc; background:#f6f6f6;}
.form select{width:51%; float:left; padding:5px 2px; border:1px solid #ccc; background:#f6f6f6;}
.form button{ width:10%; margin:5% 1%; float:left; position:relative; left:20%; background:#C30; padding:5px 7px; border-radius:5px; -moz-border-radius:5px; -webkit-border-radius:5px; border:1px solid #900; cursor:pointer; color:#fff;}

.form button:hover{ background:#900;}

.form .short{ width:21.5% !important; float:left; margin-right:2%;}

 
.news{ width:100%; float:left; margin:2% 0;}
.news img{ float:left; margin-right:1%; width:20%;}

ul.pin{ width:100%; float:left; margin:4% 0;}
ul.pin li{ width:17.5%; margin:1%; border:1px solid #ccc; float:left; list-style-type:none;}
ul.pin img{ width:100%;}



/* #Media Queries
================================================== */

/* ipad portrait */
@media only screen and ( min-width: 1150px) and ( max-width: 1400px ) {
	
		body { min-width: 100%; }
		.container {width: 96%; padding:0 2%; }
		.stripViewer { /* This is the viewing window */
			position: relative;
			overflow: hidden; 
			margin: 0px auto;
			padding:0px;
			width: 900px !important; /* Also specified in  .stripViewer .panelContainer .panel  below */
			height:120px;
			clear: both;}
		
.stripViewer .panelContainer { /* This is the big long container used to house your end-to-end divs. Width is calculated and specified by the JS  */
			position: relative;
			top:0; left:0;
			width: 100%;
			list-style-type: none;
			/* -moz-user-select: none; // This breaks CSS validation but stops accidental (and intentional - beware) panel highlighting in Firefox. Some people might find this useful, crazy fools. */
}

.stripViewer .panelContainer .panel { /* Each panel is arranged end-to-end */
			float:left;
			height: 100%;
			position: relative;
			width: 900px !important; /* Also specified in  .stripViewer  above */}
		
#main{ float:left; margin:25% 0 0 0; width:100%;}
#footer{ float:left; width:100%; bottom:0; background:url(../images/header-bg.jpg) left top repeat-x; text-align:center;}
#logos{ float:none; width:96%; background:#FFF; margin:2% 0; padding:1% 2%;}    
#logos img{ width:100%;}

#navigation ul li a { color: #fff; padding:9px 14px; display:inline-block; border-right:1px solid #333;}


}





@media only screen and ( min-width: 768px) and ( max-width: 1149px ) {
	
		body { min-width: 100%; }
		.container {width: 94%; padding:0 3%; }
		
		.stripViewer { /* This is the viewing window */
			position: relative;
			overflow: hidden; 
			margin: 0px auto;
			padding:0px;
			width: 680px !important; /* Also specified in  .stripViewer .panelContainer .panel  below */
			height:120px;
			clear: both;}
		
.stripViewer .panelContainer { /* This is the big long container used to house your end-to-end divs. Width is calculated and specified by the JS  */
			position: relative;
			top:0; left:0;
			width: 100%;
			list-style-type: none;
			/* -moz-user-select: none; // This breaks CSS validation but stops accidental (and intentional - beware) panel highlighting in Firefox. Some people might find this useful, crazy fools. */
}

.stripViewer .panelContainer .panel { /* Each panel is arranged end-to-end */
			float:left;
			height: 100%;
			position: relative;
			width: 680px !important; /* Also specified in  .stripViewer  above */}
		
#main{ float:left; margin:30% 0 0 0; width:100%;}
#main-banner{ float:left; width:100%; margin:7.5% 0 2.5% 0;}
#footer{ float:left; width:100%; position:static; bottom:0; background:url(../images/header-bg.jpg) left top repeat-x; text-align:center;}
#logos img{ width:100%;}
#navigation ul li a { color: #fff; padding:9px 9px; font-size:12px; display:inline-block; border-right:1px solid #333;}

}

	
@media only screen and ( min-width: 640px) and ( max-width: 767px) { 
		body { min-width: 100%; }
			.container {width: 94%; padding:0 3%; }
.stripViewer { /* This is the viewing window */
			position: relative;
			overflow: hidden; 
			margin: 0px auto;
			padding:0px;
			width: 580px !important; /* Also specified in  .stripViewer .panelContainer .panel  below */
			height:120px;
			clear: both;}
		
.stripViewer .panelContainer { /* This is the big long container used to house your end-to-end divs. Width is calculated and specified by the JS  */
			position: relative;
			top:0; left:0;
			width: 100%;
			list-style-type: none;
			/* -moz-user-select: none; // This breaks CSS validation but stops accidental (and intentional - beware) panel highlighting in Firefox. Some people might find this useful, crazy fools. */
}

.stripViewer .panelContainer .panel { /* Each panel is arranged end-to-end */
			float:left;
			height: 100%;
			position: relative;
			width: 580px !important; /* Also specified in  .stripViewer  above */}
		
#main{ float:left; margin:45% 0 0 0;}
#footer{ float:left; width:100%; position:static; bottom:0; background:url(../images/header-bg.jpg) left top repeat-x; text-align:center;}
#logos img{ width:100%;}
#main-banner{ float:left; width:100%; margin:10% 0 2.5% 0;}
}

@media only screen and ( min-width: 300px) and ( max-width: 639px) { 
		body { min-width: 100%; }
			.container {width: 96%; padding:0 2%; }
.stripViewer { /* This is the viewing window */
			position: relative;
			overflow: hidden; 
			margin: 0px auto;
			padding:0px;
			width: 300px !important; /* Also specified in  .stripViewer .panelContainer .panel  below */
			height:120px;
			clear: both;}
		
.stripViewer .panelContainer { /* This is the big long container used to house your end-to-end divs. Width is calculated and specified by the JS  */
			position: relative;
			top:0; left:0;
			width: 100%;
			list-style-type: none;
			/* -moz-user-select: none; // This breaks CSS validation but stops accidental (and intentional - beware) panel highlighting in Firefox. Some people might find this useful, crazy fools. */
}

.stripViewer .panelContainer .panel { /* Each panel is arranged end-to-end */
			float:left;
			height: 100%;
			position: relative;
			width: 300px !important; /* Also specified in  .stripViewer  above */}
		
#main{ float:left; margin:80% 0 0 0;}

#main-banner{ float:left; width:100%; margin:15% 0 2.5% 0;}
#footer{ float:left; width:100%; position:static; bottom:0; background:url(../images/header-bg.jpg) left top repeat-x; text-align:center;}
#logo{ float:left; position:absolute; top:0; background:#FFF; padding:12px 8px; width:40%;}
#logo img{ width:100%;}

.mean-container .mean-bar {
	float: left;
	width: 100%;
	position:absolute;
/* 	background: #0c1923;*/
	background:#282828;
	padding: 0px 0;
	min-height: 40px;
	z-index: 0;
	top:32px !important;
}
#logos img{ width:100%;}

.lft{ float:left; width:94%; margin:2% 2%;}
.lft ul{ float:left; padding:3% 0 0 0; width:100%;}
.lft ul li{ background:url(../images/arrow.png) center left no-repeat; list-style-type:none; border-bottom:1px solid #ececec;}
.lft ul li a{ padding:6px 5px 6px 25px; display:block;}

.rgt{ float:left; width:96%; margin:2% 2% !important;}
.rgt span{ color:#C30;}
.rgt p{ padding:3% 0;}

p.com-brd{ float:left; margin:1% 0; width:auto; background:#eee; border-radius:5px; -moz-border-radius:5px; -webkit-border-radius:5px; border:1px solid #ccc; padding:20px 15px !important;}

h1{ font-size:24px; font:"Trebuchet MS", Arial, Helvetica, sans-serif; font-weight:normal;}
}












#ff{ width:80%; float:left;}
#ff label {
    cursor:pointer;
    margin:4% 0;
    color:#ed7700;
    display:block;
    font-weight:800;
	width:70%;
     
}
 
#ff input {
    display:block;
    width:90%;
    border-radius:4px;
    -webkit-border-radius:4px;
    -moz-border-radius:4px;
    background-color:#f4f4f4;
    color:#000;
    border:1px solid #5f5f5f;
    padding:10px;
    margin-bottom:25px;
}
 
#ff .sendButton {
    cursor:pointer;
    -moz-box-shadow:inset 0px 1px 0px 0px #fce2c1;
    -webkit-box-shadow:inset 0px 1px 0px 0px #fce2c1;
    box-shadow:inset 0px 1px 0px 0px #fce2c1;
    background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ffc477), color-stop(1, #fb9e25) );
    background:-moz-linear-gradient( center top, #ffc477 5%, #fb9e25 100% );
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffc477', endColorstr='#fb9e25');
    background-color:#ffc477;
    -webkit-border-radius:16px;
    -moz-border-radius:16px;
    border-radius:16px;
    border:1px solid #eeb44f;
    color:#ffffff;
    font-family:Arial;
    font-size:14px;
    width:25%;
    font-weight:bold;
    text-shadow:1px 1px 0px #cc9f52;
}
.sendButton:hover {
    background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #fb9e25), color-stop(1, #ffc477) );
    background:-moz-linear-gradient( center top, #fb9e25 5%, #ffc477 100% );
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#fb9e25', endColorstr='#ffc477');
    background-color:#fb9e25;
}