@import url('https://fonts.googleapis.com/css?family=Bangers|Fira+Sans');

body {
  margin: 0;
  font-family: 'Fira Sans', sans-serif;
}

header h1, header h2 {
  font-family: 'Bangers', sans-serif;
  -webkit-font-smoothing: antialiased;
  background-color: #2CAFD9;
  color: white;
  padding: 0 30px 20px 30px;;
  display: inline-box;
  width: 60%;
  font-size: 8vw;
  margin: 0 auto;
  text-shadow: 4px 4px 0px black;
}

header h2 {
  font-size: 6vw;
  padding: 20px 30px 0 30px;
}

header {
  padding: 50px;
  text-align: center;
  background-image: url("halftone2.png");
  background-repeat: no-repeat;
  background-position: center;
}

nav, footer {
  text-align: center;
  background: black;
  color: white;
  padding: 20px;
}

#logo {
  position: absolute;
  left: 10px;
  top: 10px;
  height: 40px;;
}

nav a, footer a {
  display: inline-block;
  padding: 0 20px;
}

.center {
  text-align: center;
}

section {
  width: 80%;
  max-width: 60em;
  margin: 40px auto;
  border-bottom: 5px dotted black;
  padding-bottom: 40px;
}

section h2 {
  font-family: 'Bangers', sans-serif;
  -webkit-font-smoothing: antialiased;
  color: #2CAFD9;
  text-shadow: 2px 2px 0px black;
}

.organizer {
  display: inline-block;
  background: black;
  margin: 10px;
  text-align: center;
  padding: 20px 0;
}

.organizer img {
  width: 80%;
}

.organizer h3 {
  margin-bottom: 0;
  display:inline;
  vertical-align: middle;
}

.organizer h3, #projects h3, .partner h4, .quote h4 {
  font-size: 1.6em;
  color: white;
  font-family: 'Bangers', sans-serif;
  -webkit-font-smoothing: antialiased;
  text-shadow:
  -1px -1px 0 #000,
  1px -1px 0 #000,
  -1px 1px 0 #000,
  1px 1px 0 #000,
  2px 2px 0px #2CAFD9;  
}

#projects h3 span.location, #projects h3 span.project {
  font-size: 0.8em;
  padding-left: 1em;
  font-family: 'Bangers', sans-serif;
  -webkit-font-smoothing: antialiased;
  color: #2CAFD9;
  text-shadow:
  -1px -1px 0 #000,
  1px -1px 0 #000,
  -1px 1px 0 #000,
  1px 1px 0 #000;
}

.project, .testimonial {
  padding: 20px;
  background-color: black;
  color: white;
  position: relative;
  margin-bottom: 10px;
}

.description {
  text-align: left;
}

.description {
  display: inline-block;
  width: 65%;
}

.partner {
  vertical-align: top;
  display: inline-block;
  width: 30%;
  text-align: center;
  padding: 40px 0 0 20px;
}

.partner img {
  width: 80%;
}

.quote {
  vertical-align: top;
  display: inline-block;
}

.person {
  display: inline-block;
}

.person img {
  width: 100%;
}

blockquote {
  border-left: 10px solid #2CAFD9;
  margin: 1.5em 10px;
  padding: 0.5em 10px;
  quotes: "\201C""\201D";
}

blockquote:before {
  color: #2CAFD9;
  content: open-quote;
  font-size: 4em;
  line-height: 0.1em;
  margin-right: 0.25em;
  vertical-align: -0.4em;
}

.quote h4 {
  text-align: right;
}

#about li {
  line-height: 0.8em;
  margin-left: 20px;
}

.bold-highlight {
  font-weight: 700;
}

.button {
  font-size: 1.8em;
  padding: 10px 20px;
  height: auto;
  font-family: 'Bangers', sans-serif;
  -webkit-font-smoothing: antialiased;
  text-shadow:
  -1px -1px 0 #000,
  1px -1px 0 #000,
  -1px 1px 0 #000,
  1px 1px 0 #000,
  2px 2px 0px #000;  
  display: block;
  margin: 20px 0;
}

.button.button-primary {
  background-color: #2CAFD9;
}

#apply p {
  text-align: center;
}

.strike {
  text-decoration: line-through;
}

.location img, span.project img {
  height: 0.8em;
  padding-right: .25em;
}

.description {
  postiion:relative;
  margin-bottom: 30px;
}

.social {
  position: absolute;
  bottom: 20px;
}

.social img {
  padding: 0 10px;
  width: 2em;
}

#map {
  height: 300px;
}

.participant-marker {
  background-image: url(rust-logo-blue.png);
  background-size: cover;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  cursor: pointer;
}

.partner-marker {
  background-image: url(rust-logo-blk.png);
  background-size: cover;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  cursor: pointer;
}

button.mapboxgl-popup-close-button {
  height: auto;
  padding: 5px 5px;
  line-height: .5em;
}

div.mapboxgl-popup-content {
  font-family: 'Fira Sans', sans-serif;
  padding: 5px 15px 5px;
}

div.mapboxgl-popup-content h3 {
  font-size: 1.5em;
  margin: 10px 0;
}