:root {
	--main-heroHeight: 800px;
}

body {
	font-family: 'Source Sans Pro', Verdana, Geneva, sans-serif;
}
main {
	font-family: 'Source Sans Pro', Verdana, Geneva, sans-serif;
	background-color: white;
	padding: 20px 25% 50px 25%;
	text-align: left;
	font-size: 17px;
}

p, li {
	line-height: 1.6em;
	padding-bottom: 1em;
	padding-top: 0.4em;
}
dd {
	line-height: 1.8em;
	padding-bottom: 0.5em;
	padding-top: 0.25em;
	padding-left: 40px;
}
dt{
	padding-top: 1em;
	text-decoration: underline;
	font-weight: bold;
}
h2 {
  text-decoration: underline;
  font-size: 20px;
}
h1 {
  font-weight: bold;
  font-size: 24px;
  padding-top: 20px;
  line-height: 1em;
}
img {
	margin: 10px 20px 0px 20px;
}
a:hover{
	text-decoration: underline;
}
hr{
	border-top: 2px dashed #3881bb;
/*	border-radius: 1px;
	color: #3881bb;
	height: 1.5px;*/
	margin: 8% -20% 8% -20%;
}

/*For buttons on homepage*/
.wrapper {
    display: flex;
    padding: 4% 0 4% 0;
    line-height: 1em
}

.wrapper div {
    flex: 1;
    /*box-sizing: border-box;*/
	/*border-color: white;*/
	text-decoration: none;
	color: #3881bb;
	font-size: 20px;
	text-align: center;
}

.wrapper div:hover {
	text-decoration: underline;
}

.footer {
  position: relative;
  left: 0;
  bottom: 0;
  width: 100%;
  min-height: 110px;
  background-color: #3881bb;
  color: white;
  text-align: center;
  padding-top: 0px;
}

.footer p {
  font-size: 20px;
  /*padding-top: 10px;*/
}

.layer {
	background-position: bottom center;
	background-size: cover;
	background-repeat: no-repeat;
	width: 100%;
	height: 500px;
	position: fixed;
}

.container {
	width: 100%;
	background-image:linear-gradient(rgba(255,255,255, 1),rgba(255,255,255, 1));
	/* background-image:linear-gradient(#e8eed6, #e8eed6)); */
}


.plots img {
	padding: 0 7% 5% 7%;
	max-width: 100%;
	width: auto;
	height: auto;
	margin-left: auto;
	margin-right: auto;
}

.plots .pie {
	padding: 0 7% 5% 7%;
	width: 10%;
}

#slogans {
	margin-left: -100px;
	margin-right: -100px;
	margin-bottom: 5%;
	line-height: 1.8em;
	font-size: 24px;
	text-align: center;
	color: #3881bb;
	font-family: 'Archivo Narrow', sans-serif;
}

.example-link {
	color: white;
	font-size: 18px;
	text-decoration: underline;
	&:hover {
		color: $bronze;
	}
}

/*Navbar stuff*/
.topnav {
	overflow: hidden;
	position: fixed;
	background-color: #f2f2f2;
	top: 0px;
	width: 100%;
}

/* Style the links inside the navigation bar */
.topnav a {
	display: block;
	color: black;
	text-align: center;
	padding: 14px 16px;
	text-decoration: none;
	font-size: 16px;
	font-weight: bold;
}
.topnav .menu {float: left;}

/* Change the color of links on hover */
.topnav a:hover {
	background-color: white;
	color: black;
}

.topnav .icon {
	display: none;
}

.btn {
	float: right;
}
.btn:hover:not(.active) {
	background-image: url('./gradient_navbar_highlight.png');
	background-color:white;
	color: black;
	/*float: right;*/
}
.btn.active {
	background-color: #c4ca64;
	height: 50px;
	color: white;
}



/*Collapsible tenant stories*/
.collapsible {
  background-color: #f2f2f2;
  color: #black;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 17px;
  font-weight: bold;
}

.active, .collapsible:hover {
  background-color: #acd1bc;
  color: white;
}

.content {
  padding: 0 18px;
  display: none;
  overflow: hidden;
  background-color: white;
}


#stories img {
	margin:0;
	image-orientation: from-image;
}
#stories p {
	padding-bottom: 0.6em;
	padding-top: 0.4em;
}

/*Donate button*/
#donate_button {
  position: fixed;
  bottom: 30px;
  right: 0px;
  z-index: 2;
}

#register_to_vote_button {
  position: fixed;
  bottom: 30px;
  left: 0px;
  z-index: 2;
}

/*Coalition styling*/
#coalition p {
	padding-top: 2.5em;
}
#coalition img {
	margin: 5px 20px 5px 20px;
}

/*Hero ids*/
#hero-text {
	position: absolute;
	top: 16%;
	left: 50%;
	height: 400px;
	width: 60%;
	margin-left: -30%;
	margin-right: -30%;
}

#hero-text p {
	text-align: center;
	font-family: 'Archivo Narrow', 'Source Sans', sans-serif;
	color: #3881bb;
	font-weight: normal;
	font-size: 36px;
	line-height: 1em;
  	padding-top: 0;
  	padding-bottom: 1%;
}
#hero-text img {
	display: block;
	margin-left: auto;
	margin-right: auto;
	width: 50%;
}


#hero {
	min-height: 550px;
	overflow: hidden;
	position: relative;
	z-index: -2;
	/* min-width: 2000px; */
}

#hero .layer {
	min-height: 550px;
	background-size: contain;
	min-width: 1000px;
}

/*I think this might be some test code*/
.housing_data {
	background-image: url('./rent_burden.png');
	background-position: top center;
}

/*MEGA LAYER MODE*/
.layer-1 {
	background-image: url('./header/layer_2.png');
	background-position: bottom center;
		}
.layer-2 {
	background-image: url('./header/layer_3.png');
	background-position: bottom center;
}
.layer-3 {
	background-image: url('./header/layer_4.png');
		background-position: bottom center;
		}
.layer-4 {
	background-image: url('./header/layer_5.png');
	background-position: bottom center;
		}
.layer-5 {
	background-image: url('./header/layer_6_alternate.png');
	background-position: bottom center;
		}
.layer-6 {
	background-image: url('./header/layer_7.png');
	background-position: bottom center;
		}
.layer-7 {
	background-image: url('./header/layer_8.png');
	background-position: bottom center;
		}
.layer-8 {
	background-image: url('./header/layer_9.png');
	background-position: bottom center;
		}


/* style/images for a different hero, for the contact page */
#contact_hero {
	height: 550px;
	overflow: hidden;
	position: relative;
	z-index: -2;
}

#contact_hero .layer {
	min-height: 550px;
	background-size: contain;
	min-width: 1300px;
}

.layer-2000 {
	background-image: url('./alternate_header/layer_000.png');
	background-position: bottom center;
		}

.layer-200 {
	background-image: url('./alternate_header/layer_00.png');
	background-position: bottom center;
		}

.layer-20 {
	background-image: url('./alternate_header/layer_0.png');
	background-position: bottom center;
		}

.layer-21 {
	background-image: url('./alternate_header/layer_1.png');
	background-position: bottom center;
		}
.layer-22 {
	background-image: url('./alternate_header/layer_2.png');
	background-position: bottom center;
}
.layer-23 {
	background-image: url('./alternate_header/layer_3.png');
		background-position: bottom center;
		}
.layer-24 {
	background-image: url('./alternate_header/layer_4.png');
	background-position: bottom center;
		}
.layer-25 {
	background-image: url('./alternate_header/layer_5.png');
	background-position: bottom center;
		}
.layer-26 {
	background-image: url('./alternate_header/layer_6.png');
	background-position: bottom center;
		}
.layer-27 {
	background-image: url('./alternate_header/layer_7.png');
	background-position: bottom center;
		}
.layer-28 {
	background-image: url('./alternate_header/layer_8.png');
	background-position: bottom center;
		}
.layer-29 {
	background-image: url('./alternate_header/layer_9.png');
	background-position: bottom center;
		}
.layer-210 {
	background-image: url('./alternate_header/layer_10.png');
	background-position: bottom center;
		}
.layer-211 {
	background-image: url('./alternate_header/layer_11.png');
	background-position: bottom center;
		}
.layer-212 {
	background-image: url('./alternate_header/layer_12.png');
	background-position: bottom center;
		}
.layer-213 {
	background-image: url('./alternate_header/layer_13.png');
	background-position: bottom center;
		}
.layer-214 {
	background-image: url('./alternate_header/layer_14.png');
	background-position: bottom center;
		}
#pintoresca_hero {
	height: 550px;
	overflow: hidden;
	position: relative;
	z-index: -2;
}

#pintoresca_hero .layer {
	min-height: 550px;
	background-size: contain;
	min-width: 900px;
}
.layer-300 {
	background-image: url('./third_header/layer_1.png');
	background-position: bottom center;
		}
.layer-30 {
	background-image: url('./third_header/layer_2.png');
	background-position: bottom center;
		}
.layer-31 {
	background-image: url('./third_header/layer_3.png');
	background-position: bottom center;
		}
.layer-32 {
	background-image: url('./third_header/layer_4.png');
	background-position: bottom center;
}
.layer-33 {
	background-image: url('./third_header/layer_5.png');
		background-position: bottom center;
		}
.layer-34 {
	background-image: url('./third_header/layer_6.png');
	background-position: bottom center;
		}
.layer-35 {
	background-image: url('./third_header/layer_7.png');
	background-position: bottom center;
		}
.layer-36 {
	background-image: url('./third_header/layer_8.png');
	background-position: bottom center;
		}
.layer-37 {
	background-image: url('./third_header/layer_9.png');
	background-position: bottom center;
		}
.layer-38 {
	background-image: url('./third_header/layer_10.png');
	background-position: bottom center;
		}


#banner_hero {
	height: 550px;
	overflow: hidden;
	position: relative;
	z-index: -2;
}

#banner_hero .layer {
	min-height: 550px;
	background-size: contain;
	min-width: 770px;
}
.layer-41 {
	background-image: url('./banner_header/layer_1.png');
	background-position: bottom center;
		}
.layer-42 {
	background-image: url('./banner_header/layer_2.png');
	background-position: bottom center;
		}
.layer-43 {
	background-image: url('./banner_header/layer_3.png');
	background-position: bottom center;
		}
.layer-44 {
	background-image: url('./banner_header/layer_4.png');
	background-position: bottom center;
}
.layer-45 {
	background-image: url('./banner_header/layer_5.png');
		background-position: bottom center;
		}
.layer-46 {
	background-image: url('./banner_header/layer_6.png');
	background-position: bottom center;
		}
.layer-47 {
	background-image: url('./banner_header/layer_7.png');
	background-position: bottom center;
		}
.layer-48 {
	background-image: url('./banner_header/layer_8.png');
	background-position: bottom center;
		}
.layer-49 {
	background-image: url('./banner_header/layer_9.png');
	background-position: bottom center;
		}

#banner_hero_en {
	height: 550px;
	overflow: hidden;
	position: relative;
	z-index: -2;
}

#banner_hero_en .layer {
	min-height: 550px;
	background-size: contain;
	min-width: 770px;
}
.layer-51 {
	background-image: url('./banner_header_en/layer_1.png');
	background-position: bottom center;
		}
.layer-52 {
	background-image: url('./banner_header_en/layer_2.png');
	background-position: bottom center;
		}
.layer-53 {
	background-image: url('./banner_header_en/layer_3.png');
	background-position: bottom center;
		}
.layer-54 {
	background-image: url('./banner_header_en/layer_4.png');
	background-position: bottom center;
}
.layer-55 {
	background-image: url('./banner_header_en/layer_5.png');
	background-position: bottom center;
		}
.layer-56 {
	background-image: url('./banner_header_en/layer_6.png');
	background-position: bottom center;
		}
.layer-57 {
	background-image: url('./banner_header_en/layer_7.png');
	background-position: bottom center;
		}
.layer-58 {
	background-image: url('./banner_header_en/layer_8.png');
	background-position: bottom center;
		}
.layer-59 {
	background-image: url('./banner_header_en/layer_9.png');
	background-position: bottom center;
		}

#tenant_stories_hero {
	height: 550px;
	overflow: hidden;
	position: relative;
	z-index: -2;
}

#tenant_stories_hero .layer {
	min-height: 550px;
	background-size: contain;
	min-width: 900px;
}
.layer-61 {
	background-image: url('./tenant_stories_header/layer_1.png');
	background-position: bottom center;
		}
.layer-62 {
	background-image: url('./tenant_stories_header/layer_2.png');
	background-position: bottom center;
		}
.layer-63 {
	background-image: url('./tenant_stories_header/layer_3.png');
	background-position: bottom center;
		}
.layer-64 {
	background-image: url('./tenant_stories_header/layer_4.png');
	background-position: bottom center;
}
.layer-65 {
	background-image: url('./tenant_stories_header/layer_5.png');
		background-position: bottom center;
		}
.layer-66 {
	background-image: url('./tenant_stories_header/layer_6.png');
	background-position: bottom center;
		}
.layer-67 {
	background-image: url('./tenant_stories_header/layer_7.png');
	background-position: bottom center;
		}
.layer-68 {
	background-image: url('./tenant_stories_header/layer_8.png');
	background-position: bottom center;
		}

#donate_button_static_in_footer {
	display: none;
}

#register_to_vote_button_static_in_footer {
	display: none;
}

/*Mobile CSS*/

@media screen and (max-width: 1000px) {
  /* .topnav a:not(:first-child) {display: none;} */
	.topnav a:nth-child(2) {display: none;}
	.topnav a:nth-child(3) {display: none;}
	.topnav a:nth-child(4) {display: none;}
	.topnav a:nth-child(5) {display: none;}
	.topnav a:nth-child(6) {display: none;}
  .topnav a.icon {
    float: right;
    display: block;
  }
}

@media screen and (max-width: 1000px) {
	#slogans {
		margin-left: 1%;
		margin-right: 1%;
		line-height: 1.4em
	}
	main {
		padding: 20px 6% 50px 6%;
		font-size: 17px;
	}
	p, li {
		line-height: 1.6em;
		padding-bottom: 1em;
		padding-top: 0.4em;
	}
	#donate_button {
		display: none;
	}

	#donate_button_static_in_footer {
		display: inline;
	}

	#register_to_vote_button {
		display: none;
	}

	#register_to_vote_button_static_in_footer {
		display: inline;
	}

	hr {
		margin: 0 0 0 0;
	}
	#hero-text {
		left: 0%;
		width: 100%;
		margin-left: auto;
		margin-right: auto;
	}
	#calendar {
		width: 400px;
		overflow: hidden;
	}

	#coalition img {
		max-width: 35%;
	}

	/*Responsive navbar stuff*/
	.topnav.responsive {position: fixed;}
	.topnav.responsive a.icon {
		position: fixed;
		right: 0;
		top: 0;
	}
	.topnav.responsive a {
		float: none;
		display: block;
		text-align: left;
	}
}