html, body{
	margin: 0;
	padding: 0;
	width: 100%;
	height: 100%;
}

a {
	text-decoration: none;
	color: black;
}

@font-face{
	font-family: 'quicksand';
	src: url('fonts/quicksand.ttf');
}

@font-face{
	font-family: 'bebas-neue';
	src: url('fonts/bebas-neue.ttf');
}

@font-face{
	font-family: 'source-sans-pro';
	src: url('fonts/source-sans-pr.ttf');
}

@font-face{
	font-family: 'patrick-hand';
	src: url('fonts/patrick-hand.ttf');
}


:root {
	--poverty-homelessness-color: #CAC585;
	--poverty-homelessness-color-unselected: rgba(202, 192, 133, 0.5);
	--environment-color: #8cba80;
	--environment-color-unselected: rgba(140, 186, 128, 0.5);
	--voter-access-color: rgba(101, 142, 156, 1);
	--voter-access-color-unselected: rgba(101, 142, 156, 0.5);
	--human-trafficking-color: rgba(77, 83, 130, 1); 
	--human-trafficking-color-unselected: rgba(77, 83, 130, 0.5); 
	--racial-injustice-color: rgba(81, 70, 99, 1);
	--racial-injustice-color-unselected: rgba(81, 70, 99, 0.5);
	--logo-color: rgb(106, 70, 85);
	--logo-color-unselected: rgb(173, 127, 146);
}


/*========== BEGINNING OF DESKTOP INTERFACE ==========*/
@media (min-width: 811px)
{

/*------------------------*/
/*-------- HEADING--------*/
/*------------------------*/


	.heading{
		margin: 0;
		padding: 0;
		position: relative;
		height: 80px;
		/* border-bottom: 5px solid black; */
	}

	.site-heading{
		position: absolute;
		height: 60px;
		top: 12.5%;

		display: flex;
		flex-flow: row nowrap;
		justify-content: center;

		text-decoration: none;
		font-family: patrick-hand, bebas-neue, sans-serif, arial;
		font-size: 60px; 
		width: 100%;
		text-align: center;
		/* box-sizing: border-box; */
		cursor: default;
	}

	.site-name {
		position: relative;
		top: -15px;
		margin-right: 10px;
	color: var(--logo-color);
	}

	.site-name:hover { 
		color: var(--logo-color-unselected);
	}

	#site-logo {
		width: 60px;
	}

	.info {
		/* height: 30px; */
		top: 30%;
		right: 0;
		position: absolute;
		text-align: center;
		margin-right: 1.25vw;
		
		/* border: 1px solid black; */
	}

	.info > a {
		text-decoration: none;
		color: black;
		margin-left: 1.25vw;
		margin-right: 1.25vw;
		margin-top: 10px;
		font-family: patrick-hand, source-sans-pro, sans-serif, arial;
		font-size: 18pt;
		/* border: 1px solid black; */
	}

	.info > a:hover {
		text-decoration: underline;
	}

	/*------------------------*/
	/*-------- COLUMNS --------*/
	/*------------------------*/

	.cont{

		height: calc(100vh - 80px);
		margin: 0;
		padding: 0;
	}

	.cols-cont{
		display: flex;
		flex-flow: row nowrap;
		height: 100%;
	}

	.cat-inf {
		margin-left: auto;
		margin-right: auto;
		margin-top: 25vh;
		margin-bottom:0;
		text-align: center;
	}

	.cat-icon {
		width: 128px;
	}

	.col {
		display: block;
		width: 20vw;
		height: 100%;
		flex-flow: column nowrap;
		justify-content: center;
		align-content: center;

		font-size: 2.0vw;
		font-family: quicksand, sans-serif;
		text-align: center;
		text-decoration: none;
		transition-timing-function: ease;
		position: relative;
		
		overflow: hidden;

	}

	.cat-inf > p {
		z-index: 1;
	}

	.col:hover {
			z-index: 1;
			color: white; 
		}
	
	.cat-image {
		height: 100%;	
		display:none;
		z-index: -1;
	}


	.col:hover > .cat-image {
		position: absolute;
		display: block;
		transition: 0.3s;
	}
 
	#poverty-homelessness.col {
		color: black;
		background-color: #cacf85;
	}

	#poverty-homelessness.col:hover{
		color: white;
	}

	#environment.col{
		color: black;
		background-color: #8cba80;
	}

	#environment.col:hover{
		color: black;
		transition: 0.5s;
	}

	#voter-access.col{
		color: white;
		background-color: #658e9c;
	}

	#voter-access.col:hover{
		color: white;
	}

	#human-trafficking.col{
		color: white;
		background-color: #4d5382;
	}

	#human-trafficking.col:hover{
	}

	#racial-injustice.col{
		color: white;
		background-color: #514663;
	}

	#racial-injustice.col:hover{
		color: white;
	}

}

/*========== END OF DESKTOP INTERFACE ==========*/



/*========== BEGINNING OF MOBILE INTERFACE ==========*/

@media (max-width: 810px)
{

/*------------------------*/
/*-------- HEADING--------*/
/*------------------------*/


.heading{
	margin: 0;
	padding: 0;
	position: relative;
	height: 60px;
	/* border-bottom: 5px solid black; */
}

.site-heading{
	position: absolute;
	height: 40px;
	top: 16.6%;

	display: flex;
	flex-flow: row nowrap;
	justify-content: center;

	text-decoration: none;
	font-family: patrick-hand, bebas-neue, sans-serif, arial;
	font-size: 35pt; 
	width: 100%;
	text-align: center;
	/* box-sizing: border-box; */
	cursor: default;
}


.site-name {
	position: relative;
	top: -13px;
	margin-right: 10px;
	color: var(--logo-color);
}

.site-name:hover { 
	color: var(--logo-color-unselected);
}

#site-logo {
	height: 40px;
}

.info {
	/* height: 30px; */
	top: 30%;
	right: 0;
	position: absolute;
	text-align: center;
	margin-right: 1vw;
	
	/* border: 1px solid black; */
}

.info > a {
	text-decoration: none;
	color: black;
	margin-left: 1vw;
	margin-right: 1vw;
	margin-top: 10px;
	font-family: source-sans-pro;
	font-size: 20px;
	/* border: 1px solid black; */
	display: none;
}

.info > a:hover {
	text-decoration: underline;
	display: none;
}

/*------------------------*/
/*-------- COLUMNS --------*/
/*------------------------*/

.cont{

	height: calc(100vh - 80px);
	margin: 0;
	padding: 0;
}

.cols-cont{
	display: flex;
	flex-flow: column nowrap;
	width: 100%;
}

@media (max-height: 810px)
{
	.col {
		display: block;

		height: 150px;
		width: 100%;

		font-family: quicksand, sans-serif;

		text-decoration: none;
		transition: 0.4s;
		transition-timing-function: ease;
		position: relative;
		
		overflow: hidden;
	}

	.cat-inf {
	/* 
		display: flex;
		flex-flow: row-reverse nowrap;
		justify-content: space-between;
	*/
		position: relative;
		width: 100%;
		height: 100%;
		box-sizing: border-box;

	}

	.cat-icon {
		margin: 0;
		padding: 0;
		position: absolute;
		/* height: 130px; */
		height: 110px;
		right: 5vw;
		top: 20px;
		
	}


	.cat-inf > p {
		position: absolute;
		margin: 0;
		padding: 0;

		bottom: 5vw;
		left: 5vw;
		font-size: 24pt;

		width: 180px;

		/* border: 1px solid black; */
		z-index: 1;

		font-family: quicksand, sans-serif;
	}
}

.col {
display: block;

height: calc((100vh - 60px)/5);
width: 100%;

font-family: quicksand, sans-serif;

text-decoration: none;
transition: 0.4s;
transition-timing-function: ease;
position: relative;

overflow: hidden;
}

.cat-inf {
/* 
	display: flex;
	flex-flow: row-reverse nowrap;
	justify-content: space-between;
*/
	position: relative;
	width: 100%;
	height: 100%;
	box-sizing: border-box;

}

.cat-icon {
	margin: 0;
	padding: 0;
	position: absolute;
	/* height: 130px; */
	height: 110px;
	right: 5vw;
	top: 20px;
	
}


.cat-inf > p {
	position: absolute;
	margin: 0;
	padding: 0;

	bottom: 5vw;
	left: 5vw;
	font-size: 24pt;

	width: 180px;

	/* border: 1px solid black; */
	z-index: 1;

	font-family: quicksand, sans-serif;
}

.col:hover {
	/* text-decoration: underline; */
	z-index: 1;
	box-shadow: 0px 0px 20px black;
	color: white;
}
 
.cat-image {
	display:none;
	width: 100%;
	z-index: -1;
}


.col:hover > .cat-image {
	position: absolute;
	display: block;
	transition: 0.3s;
}



#poverty-homelessness.col {
	color: black;
	background-color: #cacf85;
}

#poverty-homelessness.col:hover{
	color: white;

	/* background-color: darkkhaki; */
}


#environment.col{
	color: black;
	background-color: #8cba80;
}

#environment.col:hover{
	color: black;
	transition: 0.5s;
	/* background-color: forestgreen; */
}

#voter-access.col{
	color: white;
	/* background-color: green; */
	background-color: #658e9c;
	/* //seagreen? */
}

#voter-access.col:hover{
	color: white;
	/* background-color: #00824b; */
}

#human-trafficking.col{
	color: white;
	/* background-color: indigo; */
	background-color: #4d5382;
}

#human-trafficking.col:hover{
	/* background-color: indigo; */
}

#racial-injustice.col{
	color: white;
	background-color: #514663;
}

#racial-injustice.col:hover{
	color: white;
}

}