@charset "utf-8";
html {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  width: 100%;
  height: 100%
}

* {
min-height: 0;
min-width: 0;
}

*, *:before, *:after {
  -webkit-box-sizing: inherit;
  -moz-box-sizing: inherit;
  box-sizing: inherit;
}
  
html, body {
	margin: 0px;
	padding: 0px;
}

body {
	display: flex;
	flex: 0 0 100%;
	flex-flow: column nowrap;
	justify-content: flex-start;
	background-color: #003471;
	border: none;
	min-height: 100%;
	min-width: 100%;
	text-decoration: none;
}

h1, h3 {
	font-family: 'Inter', sans-serif;	
}

h2 {
	font-family: 'Zilla Slab', serif;	
}

a:link {
	color: #000000;
	text-decoration: none;
}
a:visited {
	color: #000000;
}
a:hover {
	color: #003471;
}

.main-content {
	flex-grow: 1;
}

.home-grid {
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: auto;
}

.home-grid-banner-row-container {
	grid-column: 1;
	grid-row: 1;
	z-index: 2;
}

.home-banner-row-container {
	display: flex;
	/*flex: 0 0 100%;*/
	flex-flow: row nowrap;
	justify-content: space-between;
    align-items: center;
	height: 100%;
	width: 100%;
}

.home-column-container {
	/*display: flex;
	flex: 0 0 100%;
	flex-flow: column nowrap;
	justify-content: center;
	justify-content: flex-start;
	align-content: flex-start;*/
	width: 100%;
    align-items: center;
	height: 100%;
}

.banner-row-container {
	display: flex;
	/*flex: 0 0 100%;*/
	flex-flow: row nowrap;
	justify-content: space-between;
    align-items: center;
	height: 100vh;
	width: 100%;
	background-repeat: no-repeat;
	background-size: cover;
}

.column-container {
	/*display: flex;
	flex: 0 0 100%;
	flex-flow: column nowrap;
	justify-content: center;
	justify-content: flex-start;
	align-content: flex-start;*/
    align-items: center;
	height: 100vh;
}

.left-column-container {
	/*display: flex;*/
	justify-self: flex-start;
	align-self: flex-start;
	margin-top: .5%;
}

.right-column-container {
	display: flex;
	justify-self: flex-end;
	flex-direction: column;
	justify-self: flex-end;
	justify-content: space-between;
	align-self: flex-start;
	align-items: flex-start;
	margin-right: 2%;
	height: 100%;
}

.ynvLogo {
	align-self: flex-start;
}

.outer-menu-div {
	display: flex;
	flex: 0 0 100%;
	flex-flow: column nowrap;
}

.catMenu {
	display: flex;
	flex-flow: row wrap;
	justify-self: flex-start;
	align-self: flex-start;
	justify-content: space-evenly;
	justify-items: space-evenly;
	margin-top: 1%;
	background-color: rgba(255,194,14,.3);
	border-radius: 10px;
}

.catDiv {
	display: flex;
	justify-self: flex-start;
	justify-content: center;
	border-top-left-radius: 10px;
	border-top-right-radius: 10px;
	width: 140px;
	height: 140px;
}
.catDiv > a {
	display: flex;
	flex-flow: column nowrap;
	justify-content: flex-end;
	padding-bottom: 5%;
	font-family: 'Zilla Slab', serif;
	font-size: 1.25em;
	font-weight: 500;
	text-align: center;
	color: #FFFFFF;
}

.catDiv:hover, .catDiv:hover div  {
	background-color: #FFC20E;
}

.catDiv > a:hover {
	text-decoration: inherit;
}

.catDiv > a:active {
	text-decoration: inherit;
}

.menuImg {
	width: 100%;
	height: 100%;
}

#A0.initial {
	background-image: url('/images/cat_icons/people_icon_complete.png');	
}
a:hover#A0 {
	background: url('/images/cat_icons/people_selected.png') no-repeat;
	color: #003471;
}
a:active#A0 {
	background-color: #FFC20E;
}

#A1.initial {
	background-image: url('/images/cat_icons/econ_icon_complete.png');	
}
a:hover#A1 {
	background: #FFC20E url('/images/cat_icons/econ_selected.png') no-repeat;
	color: #003471;
}
a:active#A1 {
	background-color: #FFC20E;
}

#A2.initial {
	background-image: url('/images/cat_icons/edu_icon_complete.png');
}
a:hover#A2 {
	background: url('/images/cat_icons/edu_selected.png') no-repeat;
	color: #003471;
}
a:active#A2 {
	background-color: #FFC20E;
}

#A3.initial {
	background-image: url('/images/cat_icons/health_icon_complete.png');	
}
a:hover#A3 {
	background: url('/images/cat_icons/health_selected.png') no-repeat;
	color: #003471;
}
a:active#A3 {
	background-color: #FFC20E;
}

#A4.initial {
	background-image: url('/images/cat_icons/housing_icon_complete.png');	
}
a:hover#A4 {
	background: url('/images/cat_icons/housing_selected.png') no-repeat;
	color: #003471;
}
a:active#A4 {
	background-color: #FFC20E;
}

#A5.initial {
	background-image: url('/images/cat_icons/pub_safe_icon_complete.png');	
}
a:hover#A5 {
	background: url('/images/cat_icons/pub_safe_selected.png') no-repeat;
	color: #003471;
}
a:active#A5 {
	background-color: #FFC20E;
}

#A6.initial {
	background-image: url('/images/cat_icons/ham_icon_complete.png');	
}
#A6:hover {
	background-image: url('/images/cat_icons/ham_selected.png');
	color: #003471;
}
#A6:active {
	background-color: #FFC20E;
}

.indList {
	background-color: rgba(255,194,14,.85);
	background-image: url('/images/full_aztec_pattern.png');
	display: flex;
	justify-content: space-evenly;
	font-family: 'Zilla Slab', serif;
	font-weight: 500;
	font-size: 1em;
}

.sub-cat-title {
	margin-top: 2%;
}

.subCatTitle {
	display: flex;
	justify-self: center;
	font-size: 1.5em;
}

.specialArrows {	
	color: #003471;
}

a:visited.active{
	color:  #FFFFFF;
}
a:hover.active {
	font-weight: 700;
	color:  #003471;
}
a:visited.inActive {
	color:  #000000;
}
a:hover.inActive {
	font-weight: 700;
	color:  #003471;
}

.catTitle {
	display: flex;
	font-size: 6em;
	font-weight: 800;
	justify-self: flex-end;
	align-self: flex-end;
	color: #FFFFFF;
}

.blueBG {
	background-color: #003471;
}

.aztecBorder {
	background: url('/images/aztecBorder.png') repeat center center;
	width: 100%;
	/*height: 100%;*/
	margin-top: .5%;
	font-size: 2em;
}

.aboutUsTitle {
	display: flex;
	font-size: 4em;
	font-weight: 800;
	justify-self: center;
	color: #FFC20E;
}

.aboutUsTextFormat {
	justify-self: center;
	align-self: center;
	margin-bottom: 2%;
	width: 60%;
	font-family: 'Inter', sans-serif;
	font-weight: 200;
	font-size: 2em;
	color: #FFC20E;
}

.catTextFormat {
	align-items: center;
	margin-top: 2%;
	margin-left: 2.5%;
	width: 45%;
	font-family: 'Yadelvi', sans-serif;
	color: #FFFFFF;
}

.bottom-border {
	display: flex;
	justify-self: flex-end;
	align-self: center;
	width: 100%;
	background: #FFC20E;
	font-size: 2em;
}