:root {
	--color1: #186345;		/* green */
	--color2: #17392B;		/* dark green */
	--color3: #6AB899;		/* light green */
	--color4: #632418;		/* red */
	--color5: #E4FFF4;		/* soft green */
	--color6: #6B6147;		/* semi dark gold */

	--colorA: #632418;		/* red */
	--colorA-over: #17392B;	/* dark green */

	--bg-color1: #EAB726;
	--bg-color2: #C09E3F;
	--bg-color3: #F0F4F5;
	--bg-color4: #0E0E0E;

	--bg-page: #FFF;
	--bg-menu: #FFF;
	--bg-menu-opt: #186345;
	--f-menu-opt: #186345;
	--f-menu-opt-over: #FFF;

	--bg-menu-subopt: rgba(32,32,32,0.8);
	--bg-menu-subopt-over: #6AB899;
	--f-menu-subopt: rgba(240,244,245,5);
	--f-menu-subopt-over: #FFF;

	--bg-top-line: #511A20;
	--f-top-line: #F0F4F5;

	--bg-footer: rgba(255,255,255,0.5);
	--bg-footer-top: rbga(255,255,255,0.2);
	--f-footer-top-title: #186345;
	--f-footer-top-content: #595959;
	--f-footer-bottom-content: #898989;
	
	--bg-body: rgba(255,255,255,0.95);
	--f-body-title: #17392B;
	--f-body-subtitle: #999;
}

/*-------------------------------------------------*/
/* =  Fonts
/*-------------------------------------------------*/

/* Headers */
/* H1	*/			@font-face {font-family: fHeader; src: url('fonts/ReadexPro-Bold.ttf');}
/* H2-6 */		@font-face {font-family: fHeaderL; src: url('fonts/ReadexPro-SemiBold.ttf');}
/* Caption */	@font-face {font-family: fHeaderC; src: url('fonts/ReadexPro-Regular.ttf');}

/* Content */
@font-face {font-family: fBody; src: url('fonts/Karla-VariableFont_wght.ttf');}

/* Menu & Buttons */
@font-face {font-family: fDefault; src: url('fonts/OpenSans-Regular.ttf');}
@font-face {font-family: fDefaultL; src: url('fonts/OpenSans-Light.ttf');}
@font-face {font-family: fDefaultB; src: url('fonts/OpenSans-Bold.ttf');}
@font-face {font-family: fDefaultXB; src: url('fonts/OpenSans-ExtraBold.ttf');}

/*-------------------------------------------------*/
/* =  Banners
/*-------------------------------------------------*/
.tp-banner-container, 
.tp-banner, 
.tp-banner-fullscreen-container {
	position: relative;
	width: 100%;
	margin: 0;
	padding: 0;
}

/*-------------------------------------------------*/
/* =  content
/*-------------------------------------------------*/

body {
	background: url(../../images/ksd-group-inc-bg.jpg) no-repeat fixed center center;
	margin: 0;
	padding: 0;
}

body .container-area {
	width: 90%;
	margin: 0 5%;
	padding: 0;	
}

h1 {font-family: fHeader, sans-serif;}
h2,h3,h4,h5,h6 {font-family: fHeaderL, sans-serif;}

a {
	color: var(--color1);
	text-decoration: none;
}

a:hover {
	color: #632418;
	text-decoration: underline;
}

.row, .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12 {margin: 0; padding: 0}

.Left {text-align: left;}
.Right {text-align: right;}
.Justify {text-align: justify;}
.Center {text-align: center;}

.divider {clear: both;}

/*-------------------------------------------------*/
/* =  Header
/*-------------------------------------------------*/
.navbar-default {
	background-color: var(--bg-menu);
	border: none;
	margin: 0 0 2% 0;
	padding: 0;
}

.navbar-default .container {
	width: 100%;
	border-top: 4px solid rgba(32,32,32,0.2);
	border-bottom: 1px solid rgba(32,32,32,0.2);
}

.top {
	margin: 0;
	padding: 0;
}

.top .container {
	width: 100%;
	margin: 0;
	padding: 0;
}

.top .container .top-line {
	background-color: var(--bg-top-line);
	padding: 5px 0;	
}

.top .container .top-line span {
	color: var(--f-top-line);
	font-size: 22px;
	line-height: 42px;
}

.top .container .top-branding {
	background: #FFF;
	padding: 3% 0;
}

.top .container .top-branding img.logo {
	width: 90%;
	height: 90%;
}

.header-content .container .home-video-area h2 {
	font-size: 40px;
	line-height: 50px;
	color: rgba(255,255,255,0.8);
	letter-spacing:0.02em;
}

.header-content .container .home-video-area h2 span {
	font-size: 80px;
	line-height: 90px;
	color: #FFF;
	letter-spacing:0.04em;
	text-shadow: 2px 2px 4px #222;
}

.header-content .container .home-video-area h3 {
	font-size: 30px;
	color: rgba(255,255,255,0.5);
}

.header-content .container .home-video-area .link {margin: 40px 0 0 0;}

.header-content .container .home-video-area a {
	font: 20px Open Sans, serif;
	color: #FFF;
	background-color: #6F9215;
	padding: 20px 40px;
	text-decoration: none;
	border-radius: 20px;
	-webkit-border-radius: 20px;
	-moz-border-radius: 20px;
	-o-border-radius: 20px;
}

.header-content .container .home-video-area a:hover {background-color: #495F0A;}

/*-------------------------------------------------*/
/* =  Footer
/*-------------------------------------------------*/

footer {
	margin: 0;
	padding: 0;
}

footer .container {
	width: 100%;
	margin: 0;
	padding: 0;
}

footer .upper {
	background-color: var(--bg-footer-top);
	padding: 3% 0;
	border-top: 4px solid rgba(32,32,32,0.2);
}

footer .upper h4 {
	font-family: fDefaultXB, sans-serif;
	font-size: 26px;
	line-height: 40px;
	color: var(--f-footer-top-title);
}

footer .upper p, footer .upper ul, footer .upper a {
	font-size: 18px;
	line-height: 26px;
	color: var(--f-footer-top-content);
	text-decoration: none;
}

footer .upper ul {color: var(--color1)}

footer .upper p span {font-weight: 700;}

footer .upper a:hover {text-decoration: underline;}

footer .upper ul {
  margin: 0;
  padding: 0 0 0 25px;
}

footer .upper img.logo {
	width: 80%;
	height: 80%;
	margin: 1% 0 0 0;
	padding-top: 2%;
	filter: grayscale(1);
	opacity: 0.5;
}

footer .bottom {
	padding: 1% 0;
	background-color: var(--bg-footer);
	border-top: 1px solid rgba(32,32,32,0.2);
}

footer .bottom p,
footer .bottom a {
	font-size: 14px;
	color: var(--f-footer-bottom-content);
	text-decoration: none;
}

footer .bottom p.copyright {text-align: right;}

footer .bottom a:hover {opacity: 0.75;}

/*-------------------------------------------------*/
/* =  PAGE CONTENT
/*-------------------------------------------------*/

.body {
	position: relative;
	margin: 0;
	padding: 0;
}

.body .container {
	background-color: var(--bg-body);
	width: 100%;
	margin: 0;
	padding: 0;
}

.body .container .title-area {
	background-color: rgba(255,255,255,0.6);
	width: 100%;
	margin: 0;
	padding: 2% 0;
}

.body .container .title-area h1.title {
	font-family: fHeader, sans-serif;
	font-size: 60px;
	font-weight: 600;
	line-height: 80px;
	margin: 0;
	padding: 0;
	color: var(--f-body-title);
	text-transform: none;
}

.body .container .title-area p.subtitle {
	font-family: fHeaderC, sans-serif;
	font-size: 30px;
	line-height: 40px;
	color: var(--f-body-subtitle);
	margin: 0;
	padding: 0;
}

.body .container .body-area {
	width: 100%;
	margin: 0;
	padding: 0;
}

h2.home {
	font-size: 60px;
	color: #FFF;
	text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

.section-title {font-family: fHeader, sans-serif;}

.section-title .font-size1 {
	font-size: 100px;
	line-height: 120px;
}

.section-content {font-family: fBody, sans-serif;}

.section-content h2 {
	font-size: 50px;
	line-height: 70px;
	text-transform: uppercase;
	color: var(--color1);
	border: none;
	background-color: transparent;
}

.section-content h2.light {color: var(--color3)}
.section-content h2.dark {color: var(--color1)}

.section-content h3 {
	font-size: 40px;
	line-height: 55px;
	color: var(--color3);
	border: none;
	background-color: transparent;
}

.section-content h3.light {color: var(--color1)}
.section-content h3.dark {color: var(--color3)}

.section-content .font-size1 p {
	font-size: 30px;
	line-height: 40px;
	padding: 0 0 15px 0;
	color: #292929; 
}

.section-content .font-size1 ol, 
.section-content .font-size1 ul {padding: 0 0 0 40px;}

.section-content .font-size1 li {
	font-size: 26px;
	line-height: 34px;
	padding: 0 0 16px 0;
	color: #292929; 
}

.section-content .font-size1 li::marker {color: var(--color1)}

.section-content .font-size1 p.Small {
	font-size: 16px;
	line-height: 24px;
}

.section-content .font-size1 p.Small span {
	font-size: 18px;
	line-height: 26px;
	font-weight: bold;
}

.section-content .font-size2 p,
.section-content .font-size2 li {
	font-size: 24px;
	line-height: 36px;
	padding: 0 0 12px 0;
	border: none;
	background-color: transparent;
}

.section-content .font-size2 p.light,
.section-content .font-size2 li.light {color: #292929;}

.section-content .font-size2 p.dark,
.section-content .font-size2 li.dark {color: #F0F0F0;}

.section-content .font-size2 li::marker {color: var(--color1)}

.projects-list-section {
	position: relative;
	margin: 0;
	padding: 0;
}

.projects-list-section .area {
	background-color: #FFF;
	border: 1px solid rgba(32,32,32,0.1);
	margin: 1%;
}

.projects-list-section .area .plContent {
	width: 100%;
	height: 100%;
	background-color: #080;
}

.projects-list-section .area .plContent:hover {background-color: #800}

.projects-list-section .area h3 {
	font-size: 40px;
	line-height: 48px;
	color: var(--color1);
}

.projects-list-section .area table {width: 100%;}
.projects-list-section .area table tr {padding: 4px 0;}

.projects-list-section .area table td {
	font-size: 20px;
	line-height: 28px;
	vertical-align: top;
	color: #292929;
	padding: 5px;
}

.project-details-section {
	position: relative;
	margin: 0;
	padding: 0;
}

.project-details-section .pdContent p {
	font-size: 24px;
	line-height: 36px;
}

/*-------------------------------------------------*/
/* =  MORE STYLES
/*-------------------------------------------------*/

.full-size {
	width: 100%; 
	height: 100%;
	margin: 0;
	padding: 0;
}

.size90 {width: 90%; height: 90%;}
.size80 {width: 80%; height: 80%;}
.size70 {width: 70%; height: 70%;}
.size60 {width: 60%; height: 60%;}
.size50 {width: 50%; height: 50%;}
.size40 {width: 40%; height: 40%;}
.size30 {width: 30%; height: 30%;}
.size20 {width: 20%; height: 20%;}

.p01 {padding: 1%}
.p02 {padding: 2%}
.p03 {padding: 3%}
.p04 {padding: 4%}
.p05 {padding: 5%}
.p06 {padding: 6%}
.p07 {padding: 7%}
.p08 {padding: 8%}
.p09 {padding: 9%}
.p10 {padding: 10%}

.pt01 {padding-top: 1%;}
.pt02 {padding-top: 2%;}
.pt03 {padding-top: 3%;}
.pt04 {padding-top: 4%;}
.pt05 {padding-top: 5%;}
.pt06 {padding-top: 6%;}
.pt07 {padding-top: 7%;}
.pt08 {padding-top: 8%;}
.pt09 {padding-top: 9%;}
.pt10 {padding-top: 10%;}

.ptb01 {padding-top: 1%; padding-bottom: 1%;}
.ptb02 {padding-top: 2%; padding-bottom: 2%;}
.ptb03 {padding-top: 3%; padding-bottom: 3%;}
.ptb04 {padding-top: 4%; padding-bottom: 4%;}
.ptb05 {padding-top: 5%; padding-bottom: 5%;}
.ptb06 {padding-top: 6%; padding-bottom: 6%;}
.ptb07 {padding-top: 7%; padding-bottom: 7%;}
.ptb08 {padding-top: 8%; padding-bottom: 8%;}
.ptb09 {padding-top: 9%; padding-bottom: 9%;}
.ptb10 {padding-top: 10%; padding-bottom: 10%;}

.plr01 {padding-left: 1%; padding-right: 1%;}
.plr02 {padding-left: 2%; padding-right: 2%;}
.plr03 {padding-left: 3%; padding-right: 3%;}
.plr04 {padding-left: 4%; padding-right: 4%;}
.plr05 {padding-left: 5%; padding-right: 5%;}
.plr06 {padding-left: 6%; padding-right: 6%;}
.plr07 {padding-left: 7%; padding-right: 7%;}
.plr08 {padding-left: 8%; padding-right: 8%;}
.plr09 {padding-left: 9%; padding-right: 9%;}
.plr10 {padding-left: 10%; padding-right: 10%;}

.shadow {
	box-shadow: 2px 10px 10px -10px #000;
	-moz-box-shadow: 2px 10px 10px -10px #000;
	-webkit-box-shadow: 2px 10px 10px -10px #000;
}

.frame {
	padding: 15px;
	background-color: #FFF;
}

.frameT {
	margin: 2% 0;
	padding: 1%;
	background-color: #FBFBFB;
	border: 1px solid rgba(32,32,32,0.1);
}

.image-L {
	float: left;
	margin: 0 20px 20px 0;
}

.image-R {
	float: right;
	margin: 0 0 20px 20px;
}

.image-L p.caption,
.image-R p.caption {
	font-size: 16px;
	font-style: italic;
	color: #111;
	text-align: center;
	margin-top: 15px;
}

.boxOption {
	width: 90%;
	display: table;
	margin: 6% 4%;
	padding: 0;
	box-shadow: 3px 3px 10px rgba(32,32,32,0.5);
	-moz-box-shadow: 3px 3px 10px rgba(32,32,32,0.5);
	-webkit-box-shadow: 3px 3px 10px rgba(32,32,32,0.5);	
}

.boxOption img {
	width: 100%;
	height: 100%;
	max-height: 300px;
	overflow-y: auto;	
	filter: grayscale(0);
	transition: transform 0.5s ease;
}

.boxOption img:hover {
	filter: grayscale(1);
/*	
	transform: scale(1.04);
	border-radius: 15px;
	-moz-border-radius: 15px;
	-webkit-border-radius: 15px;
*/	
}

.boxOption .boxContent {
	padding: 2% 3%;
	text-align: center;
	background-color: #FCFCFC;
}

.boxOption .boxContent:hover {background-color: #E9E9E9;}

.boxOption .boxContent h4 {
	font-size: 30px;
	line-height: 48px;
	color: var(--color1);
}

.boxOption .boxContent .bcDescription {
	min-height: 150px;
	max-height: 150px;
	overflow-y: auto;	
	font-size: 20px;
	line-height: 26px;
}

.boxOption .boxContent .bcButtom {
	width: 100%;
	margin: 3% 0;
	padding: 2% 0;
	background-color: var(--color1);
	border-radius: 20px;
	-moz-border-radius: 20px;
	-webkit-border-radius: 20px;
}

.boxOption .boxContent .bcButtom:hover {background-color: var(--colorA)}

.boxOption .boxContent .bcButtom a {
	font-size: 20px;
	line-height: 30px;
	color: #FFF;
	outline: none;
	border: none;
	text-decoration: none;
}

.page-link {
	font-family: fDefault, sans-serif;
	margin: 1% 0;
	padding: 0;	
}

.page-link span {
	font-size: 14px;
	line-height: 22px;
	color: #999;
}

.page-link span a {
	font-size: 16px;
	line-height: 24px;
	color: var(--colorA);
	text-decoration: none;
}

.page-link span a.page {color: #777}

.page-link span a:hover {
	color: var(--colorA-over);
	text-decoration: underline;
}

a.call-to-action {
	font: 600 30px Open Sans, sans-serif;
	color: #FFF;
	background-color: var(--colorA);
	padding: 20px 30px;
	margin: 0 5px 5px 0;
	line-height: 50px;
	outline: none;
	border: none;
	text-decoration: none;
	border-radius: 10px;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	box-shadow: 1px 3px 10px -5px #000;
	-moz-box-shadow: 1px 3px 10px -5px #000;
	-webkit-box-shadow: 1px 3px 10px -5px #000;
}

a.call-to-action:hover {
	background-color: var(--colorA-over);
	transition: all 0.5s ease-in-out;
	-moz-transition: all 0.5s ease-in-out;
	-webkit-transition: all 0.5s ease-in-out;
	-o-transition: all 0.5s ease-in-out;
}


/*-------------------------------------------------*/
/* =  tables page
/*-------------------------------------------------*/
.tables-section {margin-bottom: 40px;}

.tables-section h2 {
	font-size: 30px;
	line-height: 40px;
	color: #393939;
	padding: 0 0 10px 0;
}

.tables-section p {margin-bottom: 20px;}

.tables-section table {
	width: 100%;
	border: 1px solid rgba(0,0,0,0.2);
}

.tables-section table thead tr th {
	font-size: 16px;
	text-align: center;
	vertical-align: text-top;
	color: #FFF;
	background-color: #495F0A;
	padding: 15px 0;
	letter-spacing: 0.1em;
	border-bottom: 1px solid rgba(255,255,255,0.2);
	border-right: 1px solid rgba(255,255,255,0.2);
}

.tables-section table tbody tr.odd {background-color: #FFF;}
.tables-section table tbody tr.even {background-color: #F3F3F3;}

.tables-section table tbody tr td {
	font-size: 18px;
	color: #333;
	padding: 10px 15px;
	border-bottom: 1px solid rgba(0,0,0,0.1);
	border-right: 1px solid rgba(0,0,0,0.1);
}

/*-------------------------------------------------*/
/* FORMS
/*-------------------------------------------------*/

.form-section {
	width: 100%;
	margin: 0;
	padding: 0;
}

.form-section .row {padding-bottom: 12px;}

.form-section .col-md-1, 
.form-section .col-md-2, 
.form-section .col-md-3, 
.form-section .col-md-4, 
.form-section .col-md-5, 
.form-section .col-md-6, 
.form-section .col-md-7, 
.form-section .col-md-8, 
.form-section .col-md-9, 
.form-section .col-md-10, 
.form-section .col-md-11, 
.form-section .col-md-12 {
	padding-right: 8px;
}

.form-section h3 {
	font-size: 36px;
	line-height: 48px;
	color: var(--color1);
}

.form-section .caption {
	font-family: fDefault, sans-serif;
	font-size: 14px;
	line-height: 26px;
	color: rgba(0,0,0,0.5);
	padding-left: 4px;
} 

.form-section .Form1 input[type="text"],
.form-section .Form1 textarea,
.form-section .Form1 select {
	width: 100%;
	padding: 8px 12px;
	font: 18px fDefault, sans-serif;
	color: #292929;
	background-color: rgba(180,180,180,0.1);
	outline: none;
	border: none;
}

.form-section .Form1 textarea {height: 150px;}

.form-section .Form1 input[type="text"]:focus,
.form-section .Form1 textarea:focus,
.form-section .Form1 select:focus {
	color: #000;
	background-color: rgba(32,32,32,0.1);
	outline-color: #080;
	outline-style: solid;
	outline-width: thin;
}

.form-section .bottom-form {padding-top: 3%;}

.form-section .bottom-form p {
	font: 14px/22px fDefault, sans-serif;
	color: rgba(255,255,255,0.65);
}

.Form1 input[type="submit"],
.Form1 input[type="button"],
button,
a.default {
	font: 18px fDefault, sans-serif;
	line-height: 46px;
	color: #FFF;
	background-color: var(--colorA);
	padding: 10px 20px;
	margin: 1%;
	outline: none;
	border: none;
	text-decoration: none;
	border-radius: 3px;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	box-shadow: 1px 3px 10px -5px #000;
	-moz-box-shadow: 1px 3px 10px -5px #000;
	-webkit-box-shadow: 1px 3px 10px -5px #000;
}

a.default {padding: 12px 30px;}

.Form1 input[type="submit"]:hover,
.Form1 input[type="button"]:hover,
button:hover,
a.default:hover {
	background-color: var(--colorA-over);
	transition: all 0.5s ease-in-out;
	-moz-transition: all 0.5s ease-in-out;
	-webkit-transition: all 0.5s ease-in-out;
	-o-transition: all 0.5s ease-in-out;
}

/*-------------------------------------------------*/
/* =  Responsive Part
/*-------------------------------------------------*/
@media (max-width: 1500px) {
}

@media (max-width: 1199px) {
}

@media (max-width: 991px) {
}

@media (max-width: 767px) {
}

@media (max-width: 500px) {

	.Left, .Right, .Justify {text-align: Center;}

	body {background-image: none;}

	body .container-area {
		width: 100%;
		margin: 0;
		padding: 0;	
	}
	
	.top .container .top-line span {
		font-size: 16px;
		line-height: 26px;
	}

	.top .container .top-branding {padding: 4% 0;}

	.top .container .top-branding img.logo {
		width: 80%;
		height: 80%;
	}

	footer {text-align: center;}

	footer .bottom p.copyright {text-align: center;}

	footer .upper ul {
		list-style-type: none;
		padding:0;
	}

	footer .upper h4 {
		font-size: 22px;
		line-height: 30px;
		font-weight: 600;
		padding-top: 30px;
	}

	footer .upper img.logo {
		width: 70%;
		height: 70%;
	}

	.body .container .title-area h1.title {
		font-size: 30px;
		line-height: 38px;
		text-shadow: 2px 2px 2px rgba(64,64,64,0.4);
	}

	.body .container .title-area p.subtitle {
		font-size: 20px;
		line-height: 30px;
	}

	h2.home {
		font-size: 30px;
		text-shadow: 2px 2px 4px rgba(64, 64, 64, 0.3);
	}

	.section-content h2 {
		font-size: 26px;
		line-height: 34px;
	}

	.section-content h3 {
		font-size: 22px;
		line-height: 30px;
	}

	.section-title .font-size1 {
		font-size: 40px;
		line-height: 50px;
	}

	.section-content .font-size1 p,
	.section-content .font-size2 p {
		font-size: 18px;
		line-height: 24px;
		padding: 0 0 9px 0;
	}

	.projects-list-section .area h3 {
		font-size: 24px;
		line-height: 32px;
	}

	.projects-list-section .area table td {
		font-size: 16px;
		line-height: 24px;
	}
	
	.size90, .size80, .size70, .size60, .size50,	.size40, .size30,	.size20 {
		width: 100%; 
		height: 100%
	}

	.p01, .p02, .p03, .p04, .p05, .p06, .p07, .p08, .p09, .p10 {padding: 3%}
	.pt01, .pt02, .pt03, .pt04, .pt05, .pt06, .pt07, .pt08, .pt09, .pt10 {padding: 3%}
	.ptb01, .ptb02, .ptb03, .ptb04, .ptb05, .ptb06, .ptb07, .ptb08, .ptb09, .ptb10 {padding: 3%}
	.plr01, .plr02, .plr03, .plr04, .plr05, .plr06, .plr07, .plr08, .plr09, .plr10 {padding: 3%}
	
}