@charset "UTF-8";
/* CSS Document */

/* 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, sub, sup, 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%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after, q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}



/*PAGE CSS BEGINS HERE*/

:root {
    --kGreen: #0f2b24;
	--ltGreen: #cbd3d0;
}

html, body {
    font-family: "Montserrat", sans-serif;
    height: 100%;
	min-height: 100%;
    color: #3b3d3d;
    background-color: #fff;
	background: url("../_img/kmBackgroundBottomFade.webp");
	background-repeat: no-repeat;
	background-size: cover;

}
body {
    height: 100%;
    display: flex;
    flex-direction: column;
	box-sizing: border-box;
}

h1 {
	/*font-family: "Playfair Display", serif;*/
	font-family: "Montserrat", sans-serif;
	font-size: 50px;
	font-weight: 400;
}

h2 {
	font-family: "Montserrat", sans-serif;
	font-size: 24px;
	font-weight: 400;
}

h3 {
	font-family: "Montserrat", sans-serif;
	font-size: 18px;
	font-weight: 400;
}

h4 {
	font-size: 17px;
	font-weight: 400;
	line-height: 30px;
}

p {
	line-height: 24px;
	margin-bottom: 10px;
}

strong {
	font-weight: 700;
}

em {
	font-style: italic;
}

.light {
	font-weight: 400;
}

.medium {
	font-weight: 500;
}

.upper {
	text-transform: uppercase;
}

.play {
	font-family: "Playfair Display", serif;
}

.indent {
	margin: 0 7.5%;
}

.extra {
	font-size: 60px;
}

.center {
	text-align: center;
}

header {
    background: url("../_img/kmBackground.webp"), #0f2b24;
	background-blend-mode: multiply;
    padding: 10px;
    height: 190px;
	min-height: 190px;
	display: flex;
	align-items: center;
}

header img {
	width: 100%;
	max-width: 434px;
	height: auto;
	margin-left: 20px;

}

header a {
	width: 100%;
	max-width: 434px;
	height: auto;
	margin-left: 20px;
}

nav {
	
}

main {
    flex: 1 0 auto;
	height: auto;
    text-align: center;
    align-items: center;
	box-sizing: border-box;
	color: var(--kGreen);
}

.announcement {
	background-color: var(--ltGreen);
	padding: 10px;
}

.mainHeader {
	display: flex;
	flex-direction: column;
	flex-wrap: wrap;
	justify-content: flex-start;
	margin: 40px 0px;
	text-align: left;
	position: relative;
}

.mainHeader h1 {
	
}

.mainHeader h2 {
}

.mainHeader .sba {
	position: absolute;
	right: 40px;
}


.home .mainHeader h1 {
	font-size: 4.5vw;
	line-height: 4.75vw;
	margin-bottom: 40px;
}

.home .mainHeader h2 {
	font-size: 2.25vw;
	line-height: 2.75vw;
}

.headerLeft {

}

.headerRight {
}

blockquote {
    border-left: 3px solid var(--kGreen);
    font-style: italic;
    line-height: 24px;
    position: relative;
    width: 80%;
    margin: 20px auto;
    padding-left: 5%;
    text-align: left;
}

blockquote:before {
    content: "";
    position: absolute;
    top: 50%;
    left: -4px;
    height: 2em;
    background-color: white;
    width: 5px;
    margin-top: -1em;
}

blockquote:after {
    content: "\0022";
    font-weight: 700;
    font-size: 40px;
    position: absolute;
    top: 50%;
    left: -0.5em;
    color: var(--kGreen);
    line-height: 55px;
    text-align: center;
    text-indent: -2px;
    width: 1em;
    margin-top: -0.5em;
}

cite {
    display: block;
    font-size: 14px;
    margin: 10px;
}

.googleMap {
	border: 3px solid var(--ltGreen);
	width: 60%;
	margin: 20px 0;
}
    

/*.productList {
	text-align: left;
	margin: 80px 60px;
}

.productList h2 {
	margin-bottom: 20px;
}

.productList ul {
	margin-left: 20px;
	line-height: 24px;
}

.productList .container {
	display: flex;
	justify-content: space-between;
}

.productList .container div {
	width: 33%;
}*/

.container {
	display: flex;
	flex-direction: column;

	width: 90%;
	margin: auto;
}

.container .containerItem {

	background: rgb(207,216,213);
    background: linear-gradient(90deg, rgba(207,216,213,0) 0%, rgba(207,216,213,1) 13%, rgba(207,216,213,1) 87%, rgba(207,216,213,0) 100%);
	background-size: 100% 100px;
	background-repeat: no-repeat;
	background-position: 0px 40px;
	display: flex;
	flex-direction: row;
	margin-bottom: 20px;
}

.container .itemLeft {
	padding-left: 5%;
}

.container .itemRight {
	text-align: left;
	width: 100%;
}

.container .itemRightHeader h2 {
	font-family: "Playfair Display", serif;
	font-weight: 500;
	font-size: 42px;
}

.container .itemRightHeader {
	height: 96px;
	display: flex;
	justify-content: flex-start;
	align-items: center;
	padding: 0px 30px;
	margin-bottom: 20px;
	margin-top: 40px;
}

.itemRightContentContainer {
	display: flex;
	flex-direction: row;
}

.itemRightContentItem {
	margin-right: 40px;
	margin-left: 30px;
}

.itemRightContentItem li {
	line-height: 30px;
}

.container.twoCol {
	display: flex;
	flex-direction: row;
	text-align: left;
}

.twoCol .col1 {

	width: 50%;
}

.twoCol .col2 {
	width: 50%;
}

.twoCol .col2 iframe {
	width: 100%;
	height: 600px;
	margin-bottom: 30px;
	border: 2px solid #fff;
}

.button {
	background-color: var(--kGreen);
	color: var(--ltGreen);
	font-size: 16px;
	padding: 15px 20px;
	border-radius: 10px;
	display: inline-flex;
	justify-content: center;
	align-items: center;
	text-transform: uppercase;
	font-weight: 700;

}

.faq, .story, .work, .business, .individual {
	text-align: left;
}

.faq h2, .story h2, .work h2, .business h2, .individual h2 {
	font-weight: 700;
	text-transform: uppercase;
	margin-bottom: 30px;
}

.faq p, .story p, .work p, .business h2, .individual h2 {
	margin-bottom: 30px;
}



.twoColBusiness {
	margin: 60px auto;
	display: flex;
	flex-direction: column;
}

.twoColBusiness .greenHeader {
	background: rgb(207,216,213);
    background: linear-gradient(90deg, rgba(207,216,213,0) 0%, rgba(207,216,213,1) 10%, rgba(207,216,213,1) 90%, rgba(207,216,213,0) 100%);
	background-size: 100% 100px;
	background-repeat: no-repeat;
	display: flex;
	flex-direction: row;
	margin-bottom: 20px;
	padding: 13px 80px;
}

.twoColBusiness .greenHeader h3 {
	font-size: 22px;
	font-weight: 700;
	text-transform: uppercase;
}

.colContainer {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	padding: 0 10%;
}

.colContainer .leftCol {
}

.colContainer .leftCol li {
	line-height: 24px;
}

.colContainer .rightCol {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 400px;
	height: 300px;
}

.colContainer .rightCol img {
	max-width: 400px;
	height: auto;
}

form {
	max-width: 500px;
}

form p {
	margin-bottom: 24px;
}

form input {
	width: 100%;
	height: 60px;
	border: 1px solid var(--kGreen);
	border-radius: 15px;
	margin-bottom: 6px;
	padding: 10px;
}

form textarea {
	width: 100%;
	height: 300px;
	resize: none;
	border: 1px solid var(--kGreen);
	border-radius: 15px;
	scrollbar-color: var(--kGreen) var(--ltGreen);
	padding: 10px;
	
}

.workContact {
	width: 50%;
	margin: 40px auto;
	text-align: center;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

.workContact h3 {
	text-align: center;
	font-size: 24px;
	font-weight: 400;
	margin-bottom: 10px;
}

.workContact form {
	width: 100%;
}

/*.textarea {
	border: 1px solid var(--kGreen);
	border-radius: 15px;
	padding: 0;
	margin:0;
}*/
	
	form textarea::-webkit-scrollbar {
    background: var(--ltGreen);
  }
    form textara::-webkit-scrollbar-thumb {
    background: var(--kGreen);
}

form .submitButton {
	border: 2px solid var(--kGreen);
	font-size: 24px;
	text-transform: uppercase;
	background-color: #fff;
	font-weight: 700;
	color: var(--kGreen);
}


footer {
	background: url("../_img/kmBackground.webp"), #0f2b24;
	background-blend-mode: multiply;
	background-repeat: no-repeat;
	background-size: cover;
    width: 100%;
    height: auto;
    flex-shrink: 0;
    text-align: center;
	border-top-right-radius: 270px;
	box-sizing: border-box;
	padding: 30px;
	padding-right: 120px;
	display: flex;
	flex-direction: row;
	justify-content: space-around;
	color: var(--ltGreen);
	margin-top: 40px;
}

footer a {
	color: var(--ltGreen);
}

footer div {
	/*border: 1px solid yellow;*/
}

footer .col1 {
	width: 310px;
}

footer .col1 p {
	text-align: left;
	line-height: 20px;
}

footer .col1, .col2, .col3, .col4 {
	padding: 20px;
}

footer h3 {
	text-align: left;
}
footer ul {
	text-align: left;
	margin-top: 6px;
	line-height: 27px;
}

/* MOBILE CSS BEGINS HERE */

@media all and (max-width: 660px) {
	
	header {
		height: 140px;
		min-height: 140px;
	}
	
	header a {
	width: 60%;
	max-width: 434px;
	height: auto;
	margin-left: 20px;
}
	
	nav {
		top: 45px;
		right: 20px;
	}

	
	.home .mainHeader h1 {
	font-size: 30px;
	line-height: 40px;
	margin-bottom: 10px;
}

    .home .mainHeader h2 {
	font-size: 16px;
	line-height: 20px;
}
	
	.sba {
		visibility: hidden;
	}
	
	.itemLeft {
		visibility: hidden;
		position: absolute;
		left: -1000px;
	}
	
	.workContact {
	width: 100%;
}
	
	.container .itemRightHeader h2{

		margin: auto;
		text-align: center;
	}
	
	.itemRightContentContainer {
		flex-direction: column;
		text-align: center;
	}
	
	.itemRightContentItem li {
	line-height: 42px;
}

.contact .container {
	flex-direction: column;
}

.contact .container .col1 {
	width: 100%;
}

.contact .container .col2 {
	width: 100%;
}
	
	footer {
		flex-direction: column;
		justify-content: center;
	}
	
	footer ul {
		visibility: hidden;
		position: absolute;
		left: -1000px;
	}
	
	footer .col1 h3, .col2 h3, .col3 h3, .col4 h3 {
	padding-left: 20px;
}
}