html, body {
	width: 100%;
}

* {
  border-radius: 0 !important;
}

a.button {
    -webkit-appearance: button;
    -moz-appearance: button;
    appearance: button;

    text-decoration: none;
    color: #fff;
}

#suiteBar *, #s4-ribbonrow *, #s4-titlerow, /* Suite Bar & Ribbon Row */
.ms-webpart-menuLink, /* web part drop down arrow */
.ms-bottompaging *, .ms-bottompagingline *, .ms-storefront-paging *, #Paging *, /* pager row arrows */
.ms-csrlistview-controldiv,  /* list view search box */ 
.ms-dlgCloseBtn *,  /* close button in dialogs */
.ms-designbuilder-cuicontainer *, .ms-designbuilder-main *, /* change the look controls & display */
#rtePasteFlyoutLink, /* paste text box in rte mode */
.js-callout-mainElement *, /* flyout close button */
div[class^='ms-InlineSearch'], div[class^='ms-InlineSearch'] *,  /* search boxes on new list/app pages */
div[id$='ListViewWebPartJSGrid'] *, /* list view web parts */
.ms-js-contextmenu *, /* flyout menus on lists ... */ {
	-moz-box-sizing: content-box;
	-webkit-box-sizing: content-box;
	box-sizing: content-box;
}
.ms-srch-group-content, .ms-srch-item, .ms-srch-item-summary, .ms-srch-ellipsis, .ms-srch-item-path, .ms-srch-item-preview-path  {
	min-width: 80%;
}
.ms-srch-hover-outerContainer {
	margin-left: -100px;
}

/* Remove min width on the collapse nav button */
button, button.navbar-toggle {
	min-width: 0;
}
/* Release #contentBox min-width */
body #contentBox {
	min-width: 0;
}

#s4-ribbon {
	display: block!important;
	z-index: 20000;
    background: #eee;
    border-style: none none outset none;
    position: relative;
    float: left;
    clear: both;
    width: 100%;
}

#DeltaWebPartAdderUpdatePanelContainer
{
    background: #eee;
    border-style: none;
    padding: 0px;
    margin-left: 50px!important;
    width: -webkit-calc(100% - 50px);
    width: -moz-calc(100% - 50px);
    width: calc(100% - 50px);
}


.ms-core-listMenu-verticalBox {
	border: 1px solid #999;
}

.ms-core-listMenu-verticalBox, .ms-core-listMenu-root,.ms-core-listMenu-root ul, .ms-core-listMenu-root ul > li, .ms-core-listMenu-root * {
	list-style-type: none!important;
	padding: 0px;
}

.ms-core-listMenu-verticalBox UL.root > LI > .menu-item {  
	font-weight:normal;  
	background-color:#ffffff;  
	color:#000000;  
	border-bottom: 1px solid #ddd;
	min-height:50px;  
	padding-top:14px;  
	padding-left:15px;  
	font-size:16px;
	width: 100%;
	min-width:200px;
} 
.ms-core-listMenu-verticalBox UL.root > LI:last-child > .menu-item {
	border-bottom: 0px none;
} 
.ms-core-listMenu-verticalBox > ul.root > li.static > ul.static > li.static > a:hover {  
   	color: #ffffff !important;  
 	background-color:#4e4e4e!important;  
 	text-decoration:none;  
}  
.ms-core-listMenu-verticalBox > ul.root > li.selected > a {  
    background-image:none;  
    background-color:#153683;  
    color:#fff !important;
    font-weight:bold;
}  
.ms-core-listMenu-verticalBox > ul.root > li > a:hover {  
    background-image:none;  
    background-color:#4e4e4e;  
 	color:#ffffff !important;  
}  
.ms-core-listMenu-verticalBox > ul.root > li.static > ul.static > li > a {  
  	font-size:16px;  
  	min-height:50px;  
	padding-top:14px;  
	padding-left:15px;
  	font-family:Arial, Helvetica, Sans-Serif !important;
  	background-color: #eeeeee;
  	color: #000;
}  
.ms-core-listMenu-verticalBox > ul.root > li.static > ul.static > li > a.selected { 
	background:none;  
	color: #fff !important;  
	background-color:#153683!important;  
	text-decoration: none;  
	border-bottom: 1px #000 solid;  
	font-weight:bold;  
}  
.ms-core-listMenu-verticalBox a.selected  
{  
  	border-bottom: 1px #000 solid !important;  
}  
.ms-core-listMenu-verticalBox UL.root UL  
{  
	margin:0px 0px 0px 0px !important;  
}

#pageStatusBar[class], .ms-notif-box, .pageStatusBar, .ms-status-msg {
	margin-bottom: 0px!important;
	padding-bottom: 0px!important;
}
 
.dynamic {
	font-size:16px;  
  	min-height:50px;  
	padding-top:14px;  
	padding-left:15px;
  	font-family:Arial, Helvetica, Sans-Serif !important;
  	background-color: #fff;
  	color: #000;
}

li.hover, li.hover > ul {
	background-image:none;  
    background-color:#4e4e4e!important;  
 	color:#ffffff !important;  
}


#navBarContainer > div {
	border: 1px solid #999;
}

#navBarContainer > div > div, ul.level1, li.menu-item {
	width: 100%!important;
	font-size: 18px;
}

a.level1.list-group-item {  
	font-weight:normal;  
	background-color:#ffffff;  
	color:#000000;  
	border-bottom: 1px solid #ddd!important;
	min-height:50px;  
	padding-top:14px;  
	padding-left:15px;  
	width: 100%;
	min-width:200px;
}

a.dropdown:after{
	content: '▼';
	display: inline-block;
	vertical-align: bottom;
}

a.level2.list-group-item {
	font-weight:normal;  
	background-color:rgba(255,255,255,0.7);  
	color:#000000;  
	border-bottom: 1px solid #ddd!important;
	min-height:50px;  
	padding-top:14px;  
	padding-left:30px!important;  
	width: 100%;
	min-width:200px;
}

a.level2.list-group-item:before {
	content: "↳";
	display: inline-block;
	vertical-align: bottom;
	padding-right: 20px;
	color: #888;
}

a.level1.list-group-item:hover, a.level2.list-group-item:hover  {
	color: #ffffff !important;  
 	background-color:#4e4e4e!important;  
 	text-decoration:none;
 	border-bottom-color:#000;
}

a.selected {
	background-color:#153683!important;
	color:#fff!important;
}


.dfwp-column {
	list-style-type: none;
	padding-bottom: 20px;
}

.groupheader.item.large {
	font-size: 16pt;
	font-weight: bold;
}


.ms-dlgContent {
	z-index: 40000!important;
}

.ms-dlgCloseBtn {
	margin-right: 20px;
}

h1 {
    font-family: Candara;
    font-size: 50pt;
}

/*.btn:visited {
	color: unset;
}*/

*/

#KHCLogo {
    max-width: 600px;
    width: 100%;
}

#mySidenav {
    height: 100%;
    width: 50px;
    position: fixed;
    z-index: 3000;
    top: 0;
    left: 0;
    background-color: #61bb46;
    overflow-x: hidden;
    transition: 0.5s;
    padding-top: 10px;
    text-align: left;
    margin-top: 0px;
    box-shadow: 2px 2px 4px rgba(0,0,0,0.3);
    overflow: visible;
}

.sidenav a {
    padding: 10px 10px 10px 15px;
    text-decoration: none;
    font-size: 22px;
    color: #fafafa;
    display: block;
    transition: 0.5s;
    overflow: hidden;
    width: 275px;
    margin-left: -225px;
}

a.sidenavbtn:hover {
	cursor: auto;
}

/*a.sidenavbtn:hover:after {
  content: attr(title);
  position: absolute;
  top: -100%;
  left: 10px;
  background-color: rgba(0,0,0,0.6);
  color: #fff;
  text-align: center;
  padding: 10px;
  border-radius: 6px;
  text-decoration: none;
  font-size: 1em;
}*/

.sidenavbtn {
    /*margin-left: -225px;*/
}

.sidenavline {
    border-bottom: #5daf44 2px solid;
}

.navicon-align {
    float: right;
    padding-top: 5px;
}

.sidenav a:hover {
    color: #fff;
    background-color: #4c9b33;
    text-decoration: none;
}

#closebtn {
    display: none;
    animation-duration: 0.25s;
    animation-timing-function: linear;
    transition: 0.5s;
    margin-left: -225px;
}

#openbtn {
    display: block;
    animation-duration: 0.25s;
    animation-timing-function: linear;
    transition: 1s;
    margin-left: -225px;
}

#MainTopNav > .row {
	padding: 12px;
}

#NavLinkSearch{
	position:relative;
	z-index: 0;
}

#mainContent, #ribbonBox, #NavBarContainer {
    transition: margin-left .5s;
    /* padding: 10px!important; */
    padding: 0px;
    margin-left: 50px!important;
    width: -webkit-calc(100% - 50px);
    width: -moz-calc(100% - 50px);
    width: calc(100% - 50px);
}

#FooterContainer {
	padding: 0px;
    margin: 0px;
}

#DeltaPlaceHolderMain, #DeltaPlaceHolderMain > div {
	z-index: 0;
	position:relative;
}

#DeltaPlaceHolderMain > div {
	margin: 20px!important;
}

.LandingPageHeaderStats, .welcome-content {
	padding: 20px!important;
}

.LandingPageHeaderStats {
	margin-top: -30px;
	color: white;
	font-size: 20pt;
}

.LandingPageHeaderStats > h2 {
	color: white;
}


.welcome {
	padding: 0px;
}

.article-content, .welcome-content {
	background-color: #ffffff;
	margin: 0px!important;
}

#ContentBody {
}

#TitleArea {
	color: #ffffff!important;
	min-height: 100px;
	
}

#TitleArea > h1 {
	color: #ffffff!important;
	text-shadow: 2px 2px 4px rgba(0,0,0,0.7);
	vertical-align: middle;
	padding-top: 10px;
	-ms-word-break: break-all;
    word-break: break-all;

    /* Non standard for WebKit */
	word-break: break-word;
	
	word-wrap: break-word;
  	overflow-wrap: break-word;

	-webkit-hyphens: auto;
  	-moz-hyphens: auto;
	hyphens: auto;
}

#LandingPageIcon {
	width: 50px;
	margin: 0px !important;
}

#LandingPageIconMobile {
	width: 100%;
	height: 100%;
	float: left;
	font-size: 18vw;
	position: relative;
	margin-bottom: -200px;
	margin-top: 10px;
	text-align: center;
	color: rgba(255,255,255,0.2);
}

#pageTitle {
	color: #ffffff!important;
	text-shadow: 2px 2px 4px rgba(0,0,0,0.7);
	overflow-wrap: anywhere;
	hyphens: auto;
}

#google_translate_element {
	padding: 15px;
}

#FrequentTools, #FrequentTools > * {
	min-width: 100%!important;
	word-wrap: break-word;
	white-space: normal;
}

#Search {
	z-index: 0;
	position: relative;
}

#AccessibilityMenu {
	margin-bottom: -25px;
}

/*#s4-bodyContainer {
	margin-left: 0px!important;
	padding: 0px!important;
	width: 100%
}*/

.jumbotron.override {
    border-radius: unset;
    padding: 0rem 0rem 0rem !important;
    background-color: none;
}

.NavBackgroundGradient {
	background: rgb(255,255,255)!important;
	background: rgba(255,255,255,0.9)!important;
	background: -moz-linear-gradient(180deg, rgba(255,255,255,0.9) 50%, rgba(255,255,255,0.5) 80%, rgba(255,255,255,0) 100%)!important;
	background: -webkit-linear-gradient(180deg, rgba(255,255,255,0.9) 50%, rgba(255,255,255,0.5) 80%, rgba(255,255,255,0) 100%)!important;
	background: linear-gradient(180deg, rgba(255,255,255,0.9) 50%, rgba(255,255,255,0.5) 80%, rgba(255,255,255,0) 100%)!important;
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ffffffff",endColorstr="#ffffff00",GradientType=1)!important;}

#MainHeader {
	z-index:20;
	position: relative;
}

#MainTopNav {
	position: relative;
    /* padding: 16px; */
    z-index: 100;
    /*background: rgb(255,255,255)!important;
	background: rgba(255,255,255,0.9)!important;
	background: -moz-linear-gradient(180deg, rgba(255,255,255,0.9) 70%, rgba(255,255,255,0) 100%)!important;
	background: -webkit-linear-gradient(180deg, rgba(255,255,255,0.9) 70%, rgba(255,255,255,0) 100%)!important;
	background: linear-gradient(180deg, rgba(255,255,255,0.9) 70%, rgba(255,255,255,0) 100%)!important;
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ffffff",endColorstr="#ffffff",GradientType=1)!important;*/
}

#HomepageContent {
	display: none!important;
}

#HeaderCarousel {
	position: relative;
    margin-top: -15px;
    z-index: 0;
    padding: 0px;
    width: 100%;
    top: 0px;
    min-height: 200px;
    height: 100%;
}

.ms-rte-embedholder > #HeaderCarousel {
	position:static;
}

#HeaderCarousel .carousel-caption {
	background-image:linear-gradient(to bottom, rgba(0,0,0,0.0), rgba(0,0,0,0.8));
	max-width: 100%;
    width:100%;
    max-height: 50%;
    min-height: 150px;
    left: 0;
    bottom: 0;
    color: white!important;
}

#HeaderCarousel .carousel-caption > *{
	color: #ffffff!important;
	text-shadow: 2px 2px 6px rgba(0,0,0,0.8);
}

#HeaderCarousel .carousel-indicators {}

#HeaderNews {
    width: 30%;
    margin-top: 30px;
    margin-left: -webkit-calc(70% - 50px);
    margin-left: -moz-calc(70% - 50px);
    margin-left: calc(70% - 50px);
}

#HeaderBackground > * {
	margin-top: -210px;
    z-index: 0;
    padding: 0px;
    float: right;
    width: 100%;
    min-height: 200px!important;
}

#ContentPageHeaderImage {
	/*width: 100%;
	max-height: 300px;*/
}

#btnCTA, #btnCTAMobile {
	width: 100%;
}


.CTA-Menu-btn-area > * {
	width: 100%;
}


#FooterContainer {
    height: 100px;
    padding: 20px!important;
}

#FooterContainer>.row {
    padding-top: 50px;
}

#FooterSocial .text-dark.btn-lg {
    width: 20px;
    margin-top: 5px;
    padding: 10px 5px 0px 5px;
    font-size: 24px;
}

#FooterLinks .card,
#FooterLinks>.col {
    width: 100px;
    height: 100px;
    margin-top: 30px;
    margin-bottom: 30px;
}

.btn-circle.btn-sm {
    width: 30px;
    height: 30px;
    padding: 6px 0px;
    border-radius: 15px!important;
    font-size: 8px;
    text-align: center;
}

.btn-circle.btn-md {
    width: 50px;
    height: 50px;
    padding: 7px 10px;
    border-radius: 25px!important;
    font-size: 10px;
    text-align: center;
}

.btn-circle.btn-xl {
    width: 70px;
    height: 70px;
    padding: 10px 16px;
    border-radius: 35px!important;
    font-size: 12px;
    text-align: center;
}

.btn-overlay. btn-overlay:visited {
	background-color: rgba(255,255,255,0.5);
}
.btn-overlay:active, .btn-overlay:hover {
	background-color: rgba(255,255,255,1.0);
}

.btn-overlay-color, .btn-overlay-color:visited {
	background-color: rgba(21,54,131,0.5)
}

.btn-overlay-color:active, .btn-overlay-color:hover {
	background-color: rgba(21,54,131,1.0)
}

.btnLandingPage {
	font-size: 18pt;
	width: 100%;
}

.btnLandingPageIcon {
	font-size: 30pt;
	padding: 20px;
}


/*Different Screen Size*/

@media screen and (max-width: 800px) {
    #KHCLogo {
        width: 100%;
        display: inline-block;
    }
    #DeltaPlaceHolderMain {
		max-width: -webkit-calc(100% - 50px);
	    max-width: -moz-calc(100% - 50px);
	    max-width: calc(100% - 50px);
	}
    .sidenav {
        padding-top: 15px;
    }
    .sidenav a {
        font-size: 18px;
    }
    #HeaderCarousel {
        visibility: hidden;
 	}
    #MainTopNav {
        z-index: 20;
    }
	#FrequentTools, #FrequentTools > * {
		max-width: -webkit-calc(100% - 50px);
	    max-width: -moz-calc(100% - 50px);
	    max-width: calc(100% - 50px);
		white-space: normal;
        margin-bottom: 10px;
    }
    #FrequentTools > .dropdown-menu, #FrequentTools > .dropdown-menu > * {
		white-space: normal;
		overflow: scroll;
	}
    #Search{
		z-index: 0!important;
	}
	h1 {
		font-size: 10vw;
		margin-top: 10px;
		text-align: center;
	}
	.CTA-Menu-fix {
		border-color:white!important;
		color: white!important;
		text-shadow: 1px 1px 3px rgba(0,0,0,0.5);
	}
	#CTA-Menu-btns-General {
		background-color: rgba(21,54,131,1.0);
		width: 100%;
	}
	#CTA-Menu-btns-Homeownership {
		background-color: rgba(248,156,38,1.0);
		width: 100%;
	}
	#CTA-Menu-btns-Partners {
		background-color: rgba(45,155,219,1.0);
		width: 100%;
	}
	#CTA-Menu-btns-Programs {
		background-color: rgba(176,143,194,1.0);
		width: 100%;
	}
	#CTA-Menu-btns-Rental {
		background-color: rgba(253,197,33,1.0);
		width: 100%;
	}
	#CTA-Menu-btns-Spanish {
		background-color: rgba(241,95,94,1.0);
		width: 100%;
	}
	#MobileMenuDropdown {
		width: 100%;
	}
	#MobileMenuDropdown > .dropdown-menu, #MobileMenuDropdown > .dropdown-menu > * {
		white-space: normal;
		overflow: scroll;
		display: none;
	}
	.LandingPageHeaderStats {
	}
	#header-stat-box {
		text-align: center;
		font-size: 12pt;
	}
	.ms-core-listMenu-verticalBox {
		display: none;
		min-width: 160px;
	  	z-index: 1;
  	}

	.show {display:block;}
	
	#HeaderCarousel .carousel-caption > *{
		font-size: 4vw;
	}
	
	#HeaderCarousel .carousel-caption > p{
		font-size: 2vw;
	}
	
	#Result, .ms-srch-result, .ms-srch-group-content, .ms-srch-item, .ms-srch-item-summary, .ms-srch-ellipsis, .ms-srch-item-path, .ms-srch-item-preview-path, .ms-srch-item-body, .ms-srch-item-summaryPreview, .ms-srch-result-groups, .ms-srch-result * {
		min-width: 100px;
		max-width: 400px;
    	width: -webkit-calc(100% - 70px)!important;
    	width: -moz-calc(100% - 70px)!important;
    	width: calc(100% - 70px)!important;
    	overflow: hidden;
    	text-overflow: ellipsis;
	}
	.ms-srch-item-preview, .ms-srch-item-previewContainer, .ms-srch-hover-outerContainer, .ms-srch-hover-outerContainer > * {
		visibility: collapse!important;
		content: none;
	}

}