@import url(https://fonts.googleapis.com/css?family=Ubuntu:400,700);
@import url(https://fonts.googleapis.com/css?family=Source+Sans+Pro:200,300,400,700);

body {
  font-family: "Ubuntu", sans-serif;
  margin: 0;
}

h1 {
  font-size: 2.5em;
  margin: 0;
}

h1 .subtitle {
  font-size: 0.8em;
  margin: 0.3em 0 0 0;
}

h2 {
  font-size: 1.5em;
  margin: 0.5em 0;
}

h3 {
	display: flex;
	font-weight: 700;
	color: #5A7931;
	padding: 0.7em 0;
	margin: 0;
	justify-content:center;
}
h4{
	display: flex;
	font-size: 1em;
	padding: 0;
	margin: 0;
	justify-content:center;
}
.visually-hidden {
  position: absolute;
  left:     -10000px;
  top:      auto;
  width:    1px;
  height:   1px;
  overflow: hidden;
}

.page-title {
  margin-top: 100px;
  display: flex;
  flex-direction: column;
  background-color: #0081C7;
  color: white;
  text-align: center;
  padding: 15px;
}

.picture-frame {
  display: flex;
  align-items: center;
}

.picture-frame .picture-adjacent {
  margin: 0 2em;
}

img {
  max-height: 50vh;
  align-self: center;
}

.body-text {
  display: flex;
  flex-direction: column;
  margin: 2em;
}

.page-content {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.button {
  padding: 0.5em 1em;
  border-radius: .5em;
  background-color: #0081C7;
  display: inline-block;
  font-size: 1.2em;
  font-weight: bold;
}

.button:hover {
  background-color: #5A7931;
}

.button a {
  color: white;
  text-decoration: none;
}

@media (max-width: 1000px) {
  /* image with captions */

  .picture-frame {
    flex-direction: column;
  }

  img {
    max-width: 100%;
  }

  /* header with menu */

  /* hide any elements that only belong to the wide view */
  .wide-menu {
    position: absolute;
    left:     -10000px;
    top:      auto;
    width:    1px;
    height:   1px;
    overflow: hidden;
  }

  .toggle-menu ~ .menu {
    height: 0px;
    overflow: hidden;
  }

  .toggle-menu:checked ~ .menu {
    height: auto;
    overflow: auto;
    background-color: white;
  }

  .button-toggle-menu {
    position: absolute;
    top: 0;
    right: 0;
    padding: 30px;
    font-size: 40px;
    color: #7A7776;
  }

  .header-left {
    padding-left: 30px;
    background-color: white;
  }

  .menu ul {
    padding-inline-start: 0px;
  }

  .menu li {
    padding: 1em 0;
  }

  /* generic elements */
  .columns {
    flex-direction: column;
  }
}

@media (min-width: 1000px) {
  /* image with captions */

  .picture-frame {
    margin: 2em;
  }

  img {
    max-width: 600px;
  }

  .picture-frame-left {
    flex-direction: row;
  }

  .picture-frame-right {
    flex-direction: row-reverse;
  }

  /* header with menu */

  /* hide any elements that only belong to the narrow view */
  .narrow-menu {
    position: absolute;
    left:     -10000px;
    top:      auto;
    width:    1px;
    height:   1px;
    overflow: hidden;
  }

  .page-header {
    height: 68px;
  }

  .page-header .header-inside {
    max-width: 1000px;
    height: 100%;
    margin: 0 auto;
    display: block;
  }

  .page-header .header-side {
    height: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    margin: 0;
  }

  .page-header .header-left {
    float: left;
  }

  .page-header .header-right {
    float: right;
  }

  .page-header .header-content {
    height: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
  }

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

  .menu li {
    padding: 1em;
  }

  /* generic elements */
  .columns {
    flex-direction: row;
    justify-content: center;
  }
}

.special-event {
  text-align: center;
  border-color: #5A7931;
  border-width: 3px;
  border-style: solid;
  margin: 2em;
}

.special-event h2 {
  color: #5A7931;
}

.call-to-action {
  background-color: #DAD9D5;
  padding: 0.2em 2em;
  text-align: center;
}

.fb-icon {
  font-size: 3em;
  padding: 5px, 10px, 0, 10px;
}

.inst-icon {
  font-size: 3em;
  padding: 5px, 10px, 0, 10px;
}

.page-content .section {
  max-width: 1000px;
}

.section-intro {
  padding: 0 2em;
}

.section h2 {
  color: #5A7931;
}

.section .picture-frame {
  background-color: #DAD9D5;
  margin: 2em;
  padding: 2em;
  box-shadow: .3em .3em .3em #7A7776;
}

.page-header {
  position: fixed;
  top: 0px;
  width: 100%;
  background-color: white;
  box-shadow: 0 3px 5px rgb(0, 0, 0, 10%);
  display: block;
  padding: 16px 0;
}

.page-header .header-content {
  padding: 0 2em;
}

.page-header img {
  max-height: 68px;
}

.menu li {
  list-style: none;
}

.menu li a {
  text-decoration: none;
  font-weight: bold;
  font-size: 1.3em;
  color: #7A7776;
}

.menu li a:hover {
  color: #0081C7;
}

.menu li a.current {
  color: #0081C7;
}

.page-main-election {
 margin:auto;
 max-width: 750px; 
 padding: 5%; 
}

.page-main-election h2 {
	color:#5A7931;
	padding: 1em 0 0 0 ;
}

#image-vote {
width: 30%;
height: auto;
float: left;
padding: 0 2em 0.5em 0;
}

.redistricting {
clear: both;  
}

.MOC-type {
justify-content: center;	
padding: 0;
}

.MOC-list {
 display: flex;
 flex-direction: row;
 justify-content: center;
 flex-wrap: wrap;
}

.shadow-box{
 background-color: #DAD9D5;
 margin: 2em;
 padding: 1em;
 box-shadow: .3em .3em .3em #7A7776; 
 }
 
.Moc-list ul {
display:flex;
flex-direction: column; 
margin: 0;
justify-content: center;
}

.sen, .cong {
padding: 0 3em 0 10%;
}

.dist-maps {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	flex-shrink;
	justify-content: space-between;
	padding: 0 4em 1em;
}

#image-map {
  display: flex; 
  max-width: auto;
  max-height: 23vh;
}

.click-on-map {
font-size: 0.4em;
margin: 0 1em;
padding:0
}

.page-main-events {
 margin:auto;
 max-width: 750px; 
 padding: 5%; 
}

.page-main-events  h2 {
	Text-align: center;
	padding: 0.7em 0 0;
}

.page-main-events  h3 {
  justify-content: left;
  padding: 0.7em 0 0;
}

#image-DC {
width: 40%;
height: auto;
float: right;
padding: 0 0 0.5em 2em;
}

.columns {
  display: flex;
}

.columns .col {
  margin: 0 2em;
}

.page-footer {
  background-color: #5A7931;
  color: white;
}

.page-footer a {
  color: white;
  text-decoration: none;
}

.page-footer a:hover {
  color: #cccccc;
}

.page-footer ul {
  padding: 0;
}

.page-footer li {
  list-style: none;
  padding: .25em 0;
}