/* CSS Document for KHS ACCOUNTING LTD. (khsaccounting.com) */

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain) */
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, 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%;
	vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers*/ 
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
	display: block;
	margin: 0;
	padding: 0;
}

#map_canvas{height:100%;margin:0;padding:0}

ul { list-style: none; }

blockquote {
	quotes: none;
	margin-left: 1.5em;
}

table {
	border-collapse: collapse;
	border-spacing: 0;
}

img, embed, object, video {
	max-width: 100%;
	height: auto;
}

:focus { outline: 0; }

/* ------ End Reset ------ */


*, *:after, *:before {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

body, html {
	font-size: 100%;
	padding: 0;
	margin: 0;
}

/* Clearfix hack by Nicolas Gallagher: http://nicolasgallagher.com/micro-clearfix-hack/ */
.clearfix:before, .clearfix:after {
	content: " ";
	display: table;
}

.clearfix:after { clear: both; }

body { font: normal 100% "Open Sans", sans-serif; }

a {
	color: #f0f0f0;
	text-decoration: none;
}

a:hover { color: #000;}

a.teal {color:#2C98A2;}

h1 {
	color:#2C98A2;
	font-size: 2.25em;
	margin: 0.5em 0;
	font-weight: 400;
}

h2 {
	color:#2C98A2;
	font-size: 1.9em;
	margin: 0.5em 0;
	font-weight: 400;
}

h3 {
	color:#666;
	font-size: 1.25em;
	margin: 0.5em 0;
	font-weight: 400;
}

.container { position: relative; }

.container > .main section > div {
	width: 100%;
	max-width: 1200px;
	margin: 0 auto;
	padding: 2.875em 6% 1.875em;
}

/* -------- */
#hero {
	width:100%;
	max-width: 1920px;
	margin: 0;
	padding: 0;
	overflow:hidden;
	text-align: center;
}

#hero img {
	display: block;
	text-align: center;
}

#hero-caption {
	width:100%;
	color: #fff;
	padding: 2em 3%;
	text-align: center;
	font-size: 100%;
	font-weight: 300;
	/* fallback */
 background: #2C98A2;
	/* Safari 5.1, Chrome 10+ */
  background: -webkit-linear-gradient(top, #247F84, #33A5AA);
	/* Firefox 3.6+ */
  background: -moz-linear-gradient(top, #247F84, #33A5AA);
	/* IE 10 */
  background: -ms-linear-gradient(top, #247F84, #33A5AA);
	/* Opera 11.10+ */
  background: -o-linear-gradient(top, #247F84, #33A5AA);
}

#hero-caption p {
	line-height: 1.2;
	margin: 0px;
	padding: 0px;
	font-size: 4em;
}

#hero-caption p.smalltext {
	font-size: 2em;
	text-transform: uppercase;
}

/* -------- */

.main > section:nth-child(even) {
	background: #2C98A2;
	color: #fff;
}

.main > section:nth-child(even) p, .main > section:nth-child(even) h2, .main > section:nth-child(even) li {
	color: #fff;
}

.main section p {
	margin: 0;
	padding: 1em 0;
	font-size: 1.5em;
	line-height: 1.5;
	color: #666;
}

.main section li {
	font-size: 1.25em;
	line-height: 1.33;
	list-style: square outside;
	color: #666;
	margin-left: 1.25em;
}

.main section ul {
	padding: 0 0 1em 0;
}


.main section > div > .home { text-align:center; }

.main section > div > .ServiceArea {
	float: left;
	width: 33%;
	padding-right: 2%;
	padding-left: 2%;
	border-right: 1px solid #ccc;
	text-align: center;
}

.main section > div > .ServiceArea:last-child {border:none;}



.btn {
	display:inline-block;
	color:#2C98A2;
	font-size:0.7em;
	font-weight:600;
	line-height:1em;
	margin:1em 0;
	padding: 0.75em 1.25em;
	border:1px solid #2C98A2;
	border-radius:3px;
	text-align:center;
	cursor:pointer;
	outline:none;
	transition:background .15s, border-color .15s, color .15s;
	-webkit-transition:background .15s, border-color .15s, color .15s;
	text-transform: uppercase;
	text-decoration: none;
}

.btn:hover, .btn:active {
	border-color:#2C98A2;
	background:#2C98A2;
	color:#fff
}

footer {
	height: auto;
	width: 100%;
	clear: both;
}

footer #footer-contact {
	background: #2C98A2;
	width: 100%;
	margin: 0 auto;
}

footer #footer-contact-inner {
	width: 100%;
	max-width: 1200px;
	margin: 0 auto;
	padding: 1em 5%;
	color: #fff;
	font-size: 1.33em;
	text-align: center;
}

footer #footer-content {
	background: #f1f1f1;
	width: 100%;
	margin: 0 auto;
}

footer #footer-content-inner {
	width: 100%;
	max-width: 1200px;
	margin: 0 auto;
	padding: 1.5em 6%;
	color: #666;
	min-height:150px;
}

footer #footer-logo {
	margin: 0 auto;
	text-align:center;
	padding: 0.25em 0;
}

footer #footer-logo img {
	width: 60%;
}

footer .footer-third {
	width:33.3%;
	float:left;
}

footer .footer-third h4 {
	font-size: 1.75em;
	font-weight: 400;
	margin-bottom: 0.75em;
}

footer #copyright {
	width: 94%;
	max-width: 1200px;
	margin: 0 auto;
	padding: 1em 3%;
	text-align: center;
	font-size: 0.75em;
}

footer #copyright a{
	color: #000;
	font-weight: 600;
	}

#contact-form {
	width: 60%;
	float:left;
}

#contact-details {
	width:30%;
	float:right;
	
}

#contact-details p {font-size: 0.9em; margin: .4em;}

/* Contact Form */
form.web-question {
	width: 100%;
	padding: 0.5em 0;
}

form.web-question label {
	font: 700 normal 1.1em 'Open Sans Condensed', sans-serif;
	color: #fff;
	text-transform: uppercase;
}


form.web-question input, form.web-question textarea {
	width: 96%;
	padding: 0.667em 2%;
	border: 1px solid #333;
	margin: 0.5em 0 1em;
	font-size: 1em;
}

form.web-question textarea {height: 15em;}

form.web-question input[type="submit"]{
	background: #666;
	font: 700 1.25em 'Open Sans Condensed', sans-serif;
	color: #fff;
	padding: 0.667em 0;
	text-transform: uppercase;
	cursor: pointer;
}

form.web-question input[type="submit"]:hover {
	background: #FA5A0B;
}

p.error,p.success {
			border: 1px solid;
			font-weight: bold;
			padding: 10px;
		}
p.error {
			background: #ffc0c0;
			color: #900;
		}
p.success {
			background: #b3ff69;
			color: #4fa000;
		}


/* ===== == = === 900px) === = == ===== */

@media only screen and (max-width : 900px) {

.container > header h1, .container > header nav { float: none; }

.container > header > span, .container > header h1 { text-align: center; }

.container > header nav { margin: 0 auto; }

.container > header > span { text-indent: 30px; }

#hero-caption { font-size: 60%; }

.main section p { font-size: 1em; }

h1 {
	font-size: 1.75em;
	margin: 0.5em auto;
}

.container > .main section > div { padding: 1.5em 3%; }

#hero-caption p { font-size: 3em; }

#hero-caption p.smalltext {
	font-size: 1.75em;
	text-transform: uppercase;
}

.main section > div > .ServiceArea {
	float: none;
	width: 97%;
	padding-right: 1.5%;
	padding-left: 1.5%;
	border-right: none;
	border-bottom: 1px solid #ccc;
}

.btn {
	margin:0.5em 0;
	padding: 0.75em 1.25em;
}


}

/* ===== == = === 480px) === = == ===== */

@media only screen and (max-width : 480px) {
	footer .footer-third {
	width:100%;
	float:none;
	padding: 1em 6%;
	text-align:center;
}
.addthis_default_style .at4-icon, .addthis_default_style .at300b, .addthis_default_style .at300bo, .addthis_default_style .at300bs, .addthis_default_style .at300m {
	float:none !important;}

footer #footer-content-inner {
	min-height:auto;
	padding: 1.5em 6% 1em;
}

footer #footer-logo img {
	width: 70%;
}

footer #copyright {
	padding: 0.5em 6%;

}

#hero {
    overflow: hidden;
	height: 200px;
}

#hero > img {
object-fit: cover;
height: 200px;
}

#contact-form {
	width: 100%;
	float:none;
}

#contact-details {
	width:100%;
	float:none;
	
}


}