/* ===================== Html5 declarations ===================== */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, dialog {display: block}

/* ===================== Resets ===================== */
body, a, p, h1, h2, h3, h4, h5, h6, ul, li, blockquote {
	margin: 0px;
	padding: 0px;
}
/* ===================== Main ===================== */
body {
	background-color: #fff;
	margin: 0 auto;
}
header, footer {
	color: #fff;
	margin: 0 auto;
	width: 92%;
}
.container, .main-container {
	width: 92%;
	margin: 0 auto;
}
.container {
	padding-top: 1em;
	padding-bottom: 1em;
}
.main-container {
	padding-top: 1.5em;
	padding-bottom: 1.5em;
}
body img {max-width: 100%;}
.test-hide .author {	
	padding: 0;
	padding-bottom: 0.3em;
}
.header-bg, .footer-bg {background-color: #2d2e2e;}

/* ===================== Grids ===================== */
.g1,.g2,.g3{display:block; position: relative; margin-left: 1%; margin-right: 1%}
.g1,.g2,.g3{width:98.0%}
.g1 {padding-bottom: 1em;}

/* ===================== Typography ===================== */
body {
	font-family: 'Open Sans', sans-serif;
	font-weight: lighter;
}
p {
	color: #666;
	font-size: 1.1em;
	padding-top: 0.6em;
	padding-bottom: 0.5em;
}
h2 {
	font-weight: 300;
	font-size: 1.95em;
	color: #282827;
	line-height: 1.2em;
	padding-bottom: 0.5em;
	padding-top: 0.2em;
	border-bottom: 1px solid #d9d9d8;
}
h3 {
	font-weight: 300;
	font-size: 1.7em;
	color: #454545;
	padding-bottom: 0.1em;
	border-bottom: 1px solid #e5e5e2;
}
h4 {
	font-size: 1.4em;
	color: #444545;
	font-weight: 400;
	padding-bottom: 0.2em;
	border-bottom: 1px solid #d5d5d5;
}
h5 {
	font-size: 1.6em;
	color: #404344;
	font-weight: 300;
}
h6 {
	font-size: 1.1em;
	color: #666666;
	font-weight: 600;
	padding-bottom: 0.2em;
	border-bottom: 1px solid #e5e5e2;
	margin-top: 0.8em;
}
blockquote {font-style: italic;}
.orange-text {color: #f09124;}


/* ===================== Links ===================== */
a {text-decoration: none;}
.main-container a {color: #ef9023;}
.main-container a:hover {text-decoration: underline;}
#kf-logo a {
	background-image: url('../images/kflogo.png');
	width: 300px;
	height: 41px;
	text-indent: -9999em;
	overflow: hidden;
	float: left;
}
.orange-link a {
	color: #ef9023;
	font-size: 0.9em;
	font-weight: normal;	
}
.orange-link {padding: 0;}

/* ===================== Fixes ===================== */
.clear-fix {clear: both;}

/* ===================== Lists ===================== */
li {
	list-style: none;
	color: #666;
}

/* ===================== Buttons ===================== */
.orange-button {
	font-size: 0.9em;
    font-weight: 600;
  	padding: 9px 17px;
    text-decoration: none;
    float: left;
  	color: #fff;
  	text-shadow: 1px 1px 1px #e6761b;
    border: 1px solid #db8522;
    background-color: #ef9023;
  	-webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    -o-border-radius: 3px;
    border-radius: 3px;
  	-webkit-box-shadow: 0px 2px 2px #c7c7c8, inset 0px 1px 1px #fbb62c;
    -moz-box-shadow: 0px 2px 2px #c7c7c8, inset 0px 1px 1px #fbb62c;
    -o-box-shadow: 0px 2px 2px #c7c7c8, inset 0px 1px 1px #fbb62c;
    box-shadow: 0px 2px 2px #c7c7c8, inset 0px 1px 1px #fbb62c;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}
.orange-button:hover {
  	background-color: #ee9d3f;
    -webkit-box-shadow: 0px 2px 2px #b6b6b6, inset 0px 1px 1px #edaf68;
    -moz-box-shadow: 0px 2px 2px #b6b6b6, inset 0px 1px 1px #edaf68;
    -o-box-shadow: 0px 2px 2px #b6b6b6, inset 0px 1px 1px #edaf68;
    box-shadow: 0px 2px 2px #b6b6b6, inset 0px 1px 1px #edaf68;
}
.orange-button:active {
    background-color: #ef9023;
    -webkit-box-shadow: inset 0px 1px 1px #db8522;
    -moz-box-shadow: inset 0px 1px 1px #db8522;
    -o-box-shadow: inset 0px 1px 1px #db8522;
    box-shadow: inset 0px 1px 1px #db8522;
}
.black-button {
	font-size: 1em;
    font-weight: 600;
  	padding: 9px 17px;
    text-decoration: none;
  	color: #fff;
  	text-shadow: 1px 1px 1px #262626;
    border: 1px solid #262626;
    background-color: #313232;
  	-webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    -o-border-radius: 3px;
    border-radius: 3px;
  	-webkit-box-shadow: 0px 2px 2px #ba6e17, inset 0px 1px 1px #6f7070;
    -moz-box-shadow: 0px 2px 2px #ba6e17, inset 0px 1px 1px #6f7070;
    -o-box-shadow: 0px 2px 2px #ba6e17, inset 0px 1px 1px #6f7070;
    box-shadow: 0px 2px 2px #ba6e17, inset 0px 1px 1px #6f7070;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}
.black-button:hover {
  	background-color: #454545;
    -webkit-box-shadow: 0px 2px 2px #a36116, inset 0px 1px 1px #868686;
    -moz-box-shadow: 0px 2px 2px #a36116, inset 0px 1px 1px #868686;
    -o-box-shadow: 0px 2px 2px #a36116, inset 0px 1px 1px #868686;
    box-shadow: 0px 2px 2px #a36116, inset 0px 1px 1px #868686;
}
.black-button:active {
    background-color: #313232;
    -webkit-box-shadow: inset 0px 1px 1px #272727;
    -moz-box-shadow: inset 0px 1px 1px #272727;
    -o-box-shadow: inset 0px 1px 1px #272727;
    box-shadow: inset 0px 1px 1px #272727;
}
.arrow {font-size: 0.8em;}
.vow {
	height: 2.5em;
	border-bottom: 1px solid #e5e5e2;
	margin-bottom: 1em;
}

/* ===================== Sidebar ===================== */
.sidebar {
	background-color: #f7f7f7;
	border: 1px solid #e2e2e1;
	float: left;
	display: inline;
	position: relative;
	padding: 1% 1.5%;
	margin: 1em 1%;
}
.sidebar p {font-size: 1em;}
.sidebar .author {font-size: 0.9em;}
.sidebar .orange-link {
	font-size: 1em;
	float: right;
}
.sidebar li {
	list-style-type: disc;
	list-style-position: inside;
}
.sidebar ul {margin-top: 0.5em;}
.sb-test {
	border-bottom: 1px solid #e5e5e2;
	padding-bottom: 0.5em;
}
.sb-test:last-child {border: none;}



/* =============================================================================
   Mobile Portrait
   ========================================================================== */
@media only screen and (min-width: 320px) {

	/* ===================== mHeader Content ===================== */
	header {height: 60px;}
	#kf-logo a {
		background-image: url('../images/kflogo-m.png');
		width: 37px;
		height: 37px;
		text-indent: -9999em;
		overflow: hidden;
		float: left;
		margin-right: 1%;
		margin-left: 1%;
		margin-top: 12px;
	}
	.nav {position: relative;}	
	.nav ul {
		width: 150px;
		position: absolute;
		margin-top: 0.5em;
		right: 0;
		background: #20201f url('../images/kf-menu.png') no-repeat;
		background-position: right;
		border-radius: 5px;
		z-index: 999;
	}
	.nav li {
		display: none; 
		margin: 0;
	}
	.nav .current {display: block;}
	.nav a {
		display: block;
		text-align: left;
		background-color: #20201f;
		padding: 0.7em;
		color: #fff;
		font-weight: 600;
	}
	.nav a:hover {background-color: #f69323;}
	.nav .current a {background: none; }
	.nav ul:hover {background-image: none;}
	.nav ul:hover li {display: block;}

	/* ===================== mBanner Content ===================== */
	.banner-bg img {
		display: none;
		max-width: 100%;
	}
	.banner-bg {
		background-color: #f0eeee;
		border-bottom: 1px solid #e2e2e1;
	}

	/* ===================== mHome Content ===================== */
	.second-block h3 {
		margin-bottom: 0.4em;
		margin-top: 0.5em;
	}
	.front-block {border-bottom: 1px solid #e5e5e2;}
	.second-block img {max-width: 100%;}
	.author {
		font-weight: normal;
		font-size: 0.9em;
	}
	.second-block .work-block {padding-bottom: 1em;}
	.main-block .g1 {margin-top: 0.9em;}
	/* ===================== mAbout Content ===================== */
	.main-banner-bg {
		background-color: #efefef;
		border-bottom: 1px solid #e2e2e1;
		text-align: center;
	}
	.main-container img {margin-top: 1em;}
	.sidebar {display: none;}

	/* ===================== mContact Content ===================== */
	.contact-mobile {padding-bottom: 0;}
	.contact-bg, .promo-bg {
		padding-top: 0.5em;
		background-color: #efeeee;
		float: left;
		width: 100%;
		border-top: 1px solid #d5d5d5;
		text-align: center;
	}
	.promo-bg {
		border-top: 1px solid #db8522;
		border-bottom: 1px solid #db8522;
		background-color: #f69324;
		-webkit-box-shadow: inset 0px 1px 5px #d27915;
    	-moz-box-shadow: inset 0px 1px 5px #d27915;
    	-o-box-shadow: inset 0px 1px 5px #d27915;
    	box-shadow: inset 0px 1px 5px #d27915;
	}
	.promo-text {
		color: #fff;
		margin-bottom: 0.5em;
		margin-top: 0.5em;
	}
	.promo-block h5 {
		text-align: center;
		margin-bottom: 1em;
		text-shadow: 0px 1px 1px #e6761b;
	}
	.promo-block {
		margin-left: 1%;
		margin-right: 1%;
		padding-bottom: 1em;
	}
	#contact-form {
		font-size: 1em;
		color: #666666;
	}
	#contact-form span {
		color: #ef9023;
		font-size: 0.9em;
	}
	.contact-info-divider {
		margin-top: 1em;
		float: left;
		width: 98%;
	}
	.contact-info-divider input {
		width: 96%;
		font-size: 1em;
		padding: 2%;
		color: #666666;
	}
	#message-field {
		margin-top: 1em;
		float: left;
	}
	#message-field textarea {
		width: 96%;
		padding: 2%;
		font-size: 1em;
		color: #666666;
	}
	#map {
		margin-top: 1em;
		width: 100%;
		height: 300px;
	}
	.sidebar .addthis_toolbox {margin-top: 0.6em;}
	.contact-info .g1 ul {padding-top: 0.5em;}
	#response-msg {
		color: #f69323;
		margin-bottom: 0.5em;
	}

	/* ===================== mFooter Content ===================== */
	footer nav {
		padding-top: 1.5em;
		text-align: center;
	}
	footer nav a {
		font-size: 1em;
		font-weight: 600;
		color: #fff;
		margin-bottom: 0.7em;
	}
	footer nav a:hover {
		text-decoration: underline;
		color: #ef9023;
	}
	footer nav .active {text-decoration: underline;}
	footer nav li {
		margin-bottom: 0.7em;
		padding-bottom: 0.7em;
		border-bottom: 1px solid #363636;
	}
	footer li {color: #fff;}
	.lower-footer-bg {background-color: #202020;}
	.footer-b-text p {
		font-size: 0.7em;
		color: #fff;
		padding-top: 1em;
		padding-bottom: 1em;
		padding-left: 1%;
		padding-right: 1%;

		}
	.footer-b-text {
		margin: 0 auto;
		width: 92%;
	}
	.footer-b-text a {color: #fff;}
	.footer-b-text a:hover {
		text-decoration: underline;
		color: #ee8f23;
	}
	.share-us {
		display: none;
		font-size: 0.9em;
		color: #fff;
	}
	.addthis_toolbox {display: none;}
	.f-social-media {
		border-bottom: 1px solid #363636;
		padding-bottom: 1.5em;
		padding-top: 1em;
		display: block;
	}
	.f-social-media img {
		margin-top: 1em;
	}
	.f-address {
		font-size: 1em;
		margin-top: 1em;
		padding-bottom: 1em;
		line-height: 1.4em;
	}
	.contact-bg .contact-mobile, .promo-bg .promo-mobile {display: block;}
	.contact-bg .contact-desktop, .promo-bg .promo-desktop {display: none;}
	.second-block .m-hide {display: none;}
	.contact-bg {color: #404344;}
	.drop-text{margin-top: 1.3em;}

	.banner-bg .video {
		width: 100% !important;
  		height: 320px !important;
  		margin-top: 15px;
  		margin-bottom: 10px;
	}

}


/* =============================================================================
   Tablet/Netbook
   ========================================================================== */
@media only screen and (min-width: 768px) { 

	/* ===================== tHeader Content ===================== */
	.clear-fix {clear: both;}
	.nav ul {
		width: 100%;
		margin-top: 1.2em;
		display: block;
		background: none !important;
	}
	.nav li {
		list-style: none;
		display: inline-block;
		float: left;
	}
	.nav a {
		float: left;
		text-decoration: none;
		color: #fff;
		-webkit-border-radius: 3px;
   		-moz-border-radius: 3px;
    	-o-border-radius: 3px;
    	border-radius: 3px;
    	font-weight: 600;
		background-color: #363636;
		margin: 0.3em;
		padding: 0.5em;
	}
	.nav a:hover, .nav .current a:hover {
		background-color: #f69323;
		text-shadow: 1px 1px 1px #e6761b;

	}
	.nav .current a {
		background-color: #20201f;
		float: left;
		display: block;
	}
	.clear-fix {clear: both;}
	header {height: 135px;}
	header .g2 {float: right;}
	#kf-logo a {
		background-image: url('../images/kflogo.png');
		width: 296px;
		height: 40px;
		margin-top: 1.4em;
		float: left;
	}

	/* ===================== tBanner Content ===================== */
	.banner-bg img {
		display: block;
		float: right;
	}

	/* ===================== tHome Content ===================== */

	.second-block .test-hide {display: none;}
	.second-block .m-hide {display: block;}
	.container .test-hide {display: none;}
	.container .t-hide {display: none;}

	.g1,.g2,.g3 {display:inline; float: left}
	.g1 {width:48.0%}
	.g2 {width:48.0%}
	.g3 {width:98.0%}

	.main-container .g2 {width: 62%;}
	.sidebar {
		display: block;
		width: 30%;
	}
	.second-block h3 {margin-top: 1em;}
	.f-social-media {display: block;}
	.promo-text {
		float: left;
		width: 50%;
		margin-top: 0px;
		margin-bottom: 0px;
	}
	.black-button {
		float: right;
		margin-top: 0.6em;
	}
	.promo-bg img {
		float: left;
		width: 25%;
	}

}


/* =============================================================================
   Landscape Tablet/Laptop/Desktop
   ========================================================================== */
@media only screen and (min-width: 1024px) { 
	.container, .main-container, header, footer, .footer-b-text, .contact-block, .promo-block {max-width: 1140px;}
	.g1 {width:31.333%}
	.g2 {width:64.667%;}
	.g3 {width:98.0%}
	.main-container .g2 {width: 64.667%;}
	.sidebar {
		display: block;
		width: 28%;
	}
	#kf-logo {
		float: left;
		margin-left: 1%;
	}
	header .g2 {float: right;}
	.nav a {
		padding: 0.8em;
		float: right;
		margin:0;
	}
	.nav li {margin-left: 1em;}
	.nav li:first-child {margin-left: 0;}
	.nav ul {
		margin-top: 2.6em;
		float: right;
	}

	/* ===================== dBanner Content ===================== */
	.second-block .m-hide, .banner-bg .m-hide {display: none;}
	.banner-bg .t-hide {display: block;}

	/* ===================== dFooter Content ===================== */
	footer nav {
		text-align: left;
		padding-top: 1.3em;
	}
	footer nav, .f-social-media, .f-address {
		width: 31.33%;
		margin-left: 1%;
		margin-right: 1%;
		float: left;
	}
	footer nav li {
		margin-bottom: 0.1em;
		margin-top: 0.4em;
		font-size: 0.9em;
		font-weight: 600;
	}
	footer nav li:last-child {border-bottom: none;}
	footer nav a {font-weight: bold;}
	footer {height: 250px;}
	.f-social-media .share-us {
		display: block;
		margin-bottom: 0.5em;
	}
	.f-social-media {
		border-bottom: none;
		text-align: left;
		display: block;
	}
	.f-address {
		font-size: 1em;
		padding-top: 0.7em;
	}
	.addthis_toolbox {display: block;}
	.contact-bg .contact-desktop, .promo-bg {display: block;}
	.contact-bg {
		background-color: #efeeee;
		float: left;
		width: 100%;
		border-top: 1px solid #d5d5d5;
	}
	.contact-bg .contact-mobile {display: none;}
	.container .test-hide {display: block;}
	.contact-info .g1 {
		width: 48.0%;
	}

	.promo-bg {
		padding-top: 0px;
	}
	.promo-bg h5 {
		margin-top: 0.3em;
	}
	.promo-text {
		float: left;
		width: 65%;
	}
	.black-button {
		float: right;
		margin-top: 0.5em;
	}
	.promo-block p {
		margin-bottom: 20px;
	}
	.promo-bg img {
		width: 150px;
		max-width: 100%;
	}
	.promo-block div {
		width: 16%;
		float: left;
	}

}