/* Hero */

.hero { 
  width: 100%;
  height: 600vh;
  position: relative;  
	/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#152448+0,34597b+68 */
	background: rgb(21,36,72); /* Old browsers */
	background: -moz-linear-gradient(top,  rgba(21,36,72,1) 0%, rgba(52,89,123,1) 68%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top,  rgba(21,36,72,1) 0%,rgba(52,89,123,1) 68%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom,  rgba(21,36,72,1) 0%,rgba(52,89,123,1) 68%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#152448', endColorstr='#34597b',GradientType=0 ); /* IE6-9 */
}

@media only screen and (min-width: 370px)  {  
  .hero { 
    height: 50vh;
  }
}

@media only screen and (min-width: 1000px) and (min-device-width: 480px) {  
  .hero { 
    height: 0;
    padding-bottom: 35%;
  }
}

@media only screen and (min-width: 1200px) and (min-device-width: 480px) {  
  .hero { 
    padding-bottom: 22.5%;
  }
}

.hero .image { 
  background-position: center bottom;
  background-repeat: no-repeat;  
  -webkit-background-size: cover;
  -moz-background-size:    cover;
  -o-background-size:      cover;
  background-size:         cover;
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;  
}

@media only screen and (min-width: 740px) and (min-device-width: 480px) {  
	.hero .image { 
	  height: 100%;
	}
}

.hero-decoration { 
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: absolute;  
  top: 0;
  left: 0;
}

.hero .main-message {
  width: 100%;
  color: white;
  line-height: 1.2;
  text-align: center;
  position: absolute;
	  left: 50%;
	  top: 55%;
	  -moz-transform:    translate(-50%,-50%);
	  -ms-transform:     translate(-50%,-50%);
	  -webkit-transform: translate(-50%,-50%);
	  transform:         translate(-50%,-50%);  
  z-index: 100;
}

@media only screen and (min-width: 740px) and (min-device-width: 480px) {  
	.hero .main-message {
	  max-width: 640px;
	  position: absolute;
	  left: 50%;
	  top: 55%;
	  -moz-transform:    translate(-50%,-50%);
	  -ms-transform:     translate(-50%,-50%);
	  -webkit-transform: translate(-50%,-50%);
	  transform:         translate(-50%,-50%);   
	  z-index: 100;
	}
}

.hero .logo {
	max-width: 300px;
	margin-bottom: 2.5em;
	width: auto;
}

@media only screen and (min-width: 740px) and (min-device-width: 480px) {  
	.hero .logo {
		max-width: 600px;
	}
}

.hero h1 {
	font-size: 1.2rem;
  font-weight: 300;
  line-height: 1.325;
  margin-bottom: 2.25em;
  color: var(--white);
  padding: 0 1.5em;
}

@media only screen and (min-width: 1000px) and (min-device-width: 480px) {  
	.hero h1 { 
	  font-size: 1.5rem;
	  padding: 0;
	}
}

.alert {
   width: 100%;
   margin: 0 auto;
   max-width: 1600px;
   text-align: center;
   position: fixed;
   z-index: 1000; }

.alert a { 
   display: block;
   padding: .75em 1em;
   font-size: 110%;
   font-weight: 700;
   text-transform: uppercase; 
  -webkit-transition: all .3s ease-in-out;
  -moz-transition:    all .3s ease-in-out;
  -o-transition:      all .3s ease-in-out;
  -ms-transition:     all .3s ease-in-out;
  transition:         all .3s ease-in-out; 
}

.alert a:hover {
   background-color: var(--lt-yellow) !important;
}

@media only screen and (min-width: 1200px) and (min-device-width: 480px) {
   .alert a {
      padding: .75em 1em;
      font-size: 140%;      
   }
}


/* ------------------ Bonus Featured items ------------------ */

.featured .bonus article {
	background-color: var(--orange);		
}

.featured .bonus article:nth-child(2n) {
	background-color: var(--gold);		
}

.featured .bonus .aspect-ratio {
	position: relative;
	display: block;
	height: 0;
	padding-bottom: calc(calc(100% / 4.35) * 5);
}

.featured .bonus figure {
	position: relative;
	overflow: hidden;
}

.featured .bonus figure .aspect-ratio {
	padding-bottom: calc(calc(100% / 7) * 5);
}

.featured .bonus .gradient {
	width: 100%;
	height: 12rem;
	position: absolute;
	left: 0;
	bottom: 0;
	z-index: 2;
	background: -moz-linear-gradient(top, rgba(var(--orange-rgb),0) 0%, rgba(var(--orange-rgb),1) 100%);
	background: -webkit-linear-gradient(top, rgba(var(--orange-rgb),0) 0%, rgba(var(--orange-rgb),1) 100%);
	background: linear-gradient(to bottom, rgba(var(--orange-rgb),0) 0%, rgba(var(--orange-rgb),1) 100%);	
}

.featured .bonus article:nth-child(2n) .gradient {
	background: -moz-linear-gradient(top, rgba(var(--gold-rgb),0) 0%, rgba(var(--gold-rgb),1) 100%);
	background: -webkit-linear-gradient(top, rgba(var(--gold-rgb),0) 0%, rgba(var(--gold-rgb),1) 100%);
	background: linear-gradient(to bottom, rgba(var(--gold-rgb),0) 0%, rgba(var(--gold-rgb),1) 100%);		
}

.featured .bonus .photo {
	background-repeat: no-repeat;  
	background-position: left top;
	-webkit-background-size: cover;
	-moz-background-size:    cover;
	-o-background-size:      cover;
	background-size:         cover;   	
	width: 100%;
	height: 100%;	
	position: absolute;
	left: 0;
	bottom: 0;
	z-index: 1;
	opacity: .75;
	-webkit-transition: all .5s ease-in-out;
	-moz-transition:    all .5s ease-in-out;
	-o-transition:      all .5s ease-in-out;
	-ms-transition:     all .5s ease-in-out;
	transition:         all .5s ease-in-out;	
}
.featured .bonus a:hover .photo {
  -moz-transform:    scale(1.1);
  -ms-transform:     scale(1.1);
  -webkit-transform: scale(1.1);
  transform:         scale(1.1);
}
.featured .bonus .text {
	width: 100%;
	position: absolute;
	left: 0;
	bottom: 0;
	z-index: 100;
	padding: 0 25px 15px;
}

@media only screen and (max-width: 740px) {
	.featured {
		padding: 0;
	}	
}

@media only screen and (min-width: 1200px) and (min-device-width: 480px) {
	.featured {
		padding: 4rem 0 2rem 0;	
	}	
	.featured.extra {
		padding: 0 0 4rem 0;	
	}		
	.featured .bonus.two-items {
		grid-template-columns: repeat(2, 1fr);
		max-width: 1400px;
	}	
	.featured .bonus .aspect-ratio,
	.featured .bonus figure .aspect-ratio {
		position: relative;
		padding-bottom: calc(calc(100% / 4.35) * 2.75);
		height: 0;
	}	
	.featured .bonus .gradient {
		width: 100%;
		height: 100%;
		position: absolute;
		left: 0;
		bottom: 0;
		z-index: 2;
		background: -moz-linear-gradient(left, rgba(var(--orange-rgb),0) 20%, rgba(var(--orange-rgb),1) 60%);
		background: -webkit-linear-gradient(left, rgba(var(--orange-rgb),0) 20%, rgba(var(--orange-rgb),1) 60%);
		background: linear-gradient(to right, rgba(var(--orange-rgb),0) 20%, rgba(var(--orange-rgb),1) 60%);	
	}
	
	.featured .bonus article:nth-child(2n) .gradient {
		background: -moz-linear-gradient(right, rgba(var(--gold-rgb),0) 20%, rgba(var(--gold-rgb),1) 60%);
		background: -webkit-linear-gradient(right, rgba(var(--gold-rgb),0) 20%, rgba(var(--gold-rgb),1) 60%);
		background: linear-gradient(to left, rgba(var(--gold-rgb),0) 20%, rgba(var(--gold-rgb),1) 60%);		
	}
	.featured .bonus .photo {
		width: 60%;
	}
	.featured .bonus article:nth-child(2n) .photo {
		left: 40%;
	}
	.featured .bonus .text {
		left: 40%;
		width: 60%;
	}	
	.featured .bonus article:nth-child(2n) .text {
		left: 0;
	}	
}
@media only screen and (min-width: 1400px) and (min-device-width: 480px) {
	.featured {
		padding: 4rem 0 50px 0;	
	}	
}





/* --- Storybank layer --- */

.storybank.layer  {
	background: var(--orange);
	margin-bottom: 2rem;
}

@media only screen and (min-width: 1200px) {
	.storybank.layer figure {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}
}

.storybank.layer figure .aspect-ratio {
	position: relative;
  height: 0;
  padding-bottom: 43.75%;
}

.storybank.layer figure .photo {
	background-size: cover;
}

.storybank.layer .aspect-ratio {
	height: auto;
}

@media only screen and (min-width: 1200px) {
	.storybank.layer .aspect-ratio {
		position: relative;
	  height: 0;
	  padding-bottom: 43.75%;
	}
}

.storybank.layer a * {
	color: var(--white);
}

.storybank.layer .text {
  background: var(--orange);
  padding: 1.5rem 1.75rem;
  text-align: left;
  -webkit-box-shadow: 0 1rem 1rem 0 rgba(0,0,0,.2);
	-moz-box-shadow:    0 1rem 1rem 0 rgba(0,0,0,.2);
	box-shadow:         0 1rem 1rem 0 rgba(0,0,0,.2);	
}

@media only screen and (min-width: 1200px) {
	.storybank.layer .text {
	  position: absolute;
	  top: 50%;
	  left: 50%;
	  width: 33.33%;
	  -moz-transform:    translateY(-50%);
	  -ms-transform:     translateY(-50%);
	  -webkit-transform: translateY(-50%);
	  transform:         translateY(-50%);
	}
}

.storybank.layer .text header {
  padding: .5em 0;
  display: block;
  text-transform: uppercase;
  font-weight: 700;
  line-height: 1;
  font-size: 112.5%;
}

.storybank.layer .text h2 {
  font-size: 2.25rem;
  margin-bottom: .5em;
  text-transform: none;
  padding: 0;
}

.storybank.layer .button {
	-webkit-transition: all .25s ease-in-out;
	-moz-transition:    all .25s ease-in-out;
	-o-transition:      all .25s ease-in-out;
	-ms-transition:     all .25s ease-in-out;
	transition:         all .25s ease-in-out;	
}



/* --- Our Work layer --- */

.work.layer .intro {
  max-width: 700px;
  margin-bottom: 0;
}

.work.layer .intro h2 {
  font-size: 2.25rem;
  display: table;
  margin-bottom: .5em;
  text-transform: none;
  padding: 0;
}

@media only screen and (min-width: 1200px) {
	.work.layer .hex-table {
	  margin-bottom: 6em;
	}
}


/* --- Donation layer --- */

section.donate {
  width: 100%;
  text-align: center;
	/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#152448+0,34597b+100 */
	background: rgb(21,36,72); /* Old browsers */
	background: -moz-linear-gradient(top,  rgba(21,36,72,1) 0%, rgba(52,89,123,1) 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top,  rgba(21,36,72,1) 0%,rgba(52,89,123,1) 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom,  rgba(21,36,72,1) 0%,rgba(52,89,123,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#152448', endColorstr='#34597b',GradientType=0 ); /* IE6-9 */
}  

section.donate h2 a {
  color: var(--white);
  font-size: 2rem;
}

section.donate span {
  display: block;
	text-transform: uppercase;
	font-weight: 300;
	font-size: 17px;
	letter-spacing: .1em;
	padding: 2em 0 1em;
	color: var(--white);
}
.donate-amounts a {
  display: block;
  width: 100%;
  font-size: 110%;  
  padding: .7em .7em;
  font-weight: 700;
  margin-top: 0;
  background: var(--yellow);
  color: var(--white);
  -webkit-transition: all .15s ease-in-out;
  -moz-transition:    all .15s ease-in-out;
  -o-transition:      all .15s ease-in-out;
  -ms-transition:     all .15s ease-in-out;
  transition:         all .15s ease-in-out; 
  -webkit-box-shadow: 0 1rem 1rem 0 rgba(0,0,0,.2);
	-moz-box-shadow:    0 1rem 1rem 0 rgba(0,0,0,.2);
	box-shadow:         0 1rem 1rem 0 rgba(0,0,0,.2);	
}
.donate-amounts a:hover {
  background: var(--gold);
  -moz-transform:    translateY(-3%);
  -ms-transform:     translateY(-3%);
  -webkit-transform: translateY(-3%);
  transform:         translateY(-3%); 
}
.donate-amounts a:after {
	background: transparent !important;
}

.donate-amounts .grid {
  display: table;
  display: grid;  
  grid-template-columns: repeat(2, 1fr) !important;
  grid-gap: .5em;
} 
section.donate .actblue-disclaimer {
  color: rgba(255,255,255,.7);
  display: inline-block;
  margin-top: 1.5em;
  max-width: 580px;
}
@media only screen and (min-width: 740px) and (min-device-width: 480px) { 
  section.donate .max  {
    max-width: 700px;
  }    
  .donate-amounts .grid {
    width: 80%;
    grid-template-columns: repeat(4, 1fr) !important;
    margin: 0 auto;
  }   
  .donate-amounts a {
    font-size: 150%;
  }
}
@media only screen and (min-width: 1000px) and (min-device-width: 480px) { 
  .donate-amounts a {
    display: block;
    width: 100%;
    font-weight: 700;
  }  
  .donate-amounts a {
    font-size: 180%;
  }
}

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
  .donate-amounts .grid {
    width: 80%;
    display: block;
  }   
  .donate-amounts .grid a {
    width: 23%;
    margin: 0 .1em;
    display: inline-block;
  }     
}


/* Tweets */

.tweets { 
  display: block; 
  position: relative;
  background: #488dcb;
  text-align: center;
  color: var(--white);
}

.tweets.layer .intro {
  margin-bottom: 0;
}

.tweets.layer .intro h2 {
  font-size: 1.5rem;
  font-weight: 500;
  margin-bottom: 0;
  text-transform: none;
  padding: 0;
}

.tweets.layer .intro h2 a {
  color: var(--white);
}

.tweets article {
	display: block;
  text-align: center;
  -webkit-transition: background .4s ease-in-out;
  -moz-transition:    background .4s ease-in-out;
  -o-transition:      background .4s ease-in-out;
  -ms-transition:     background .4s ease-in-out;
  transition:         background .4s ease-in-out;  
  position: relative;
  margin-bottom: 1.25em;
  overflow: hidden;
}

.tweets article .aspect-ratio {
  height: auto;
}

.tweets article .vert-center {
  width: 100%;
  display: block;
  z-index: 100;
  padding: 1.5em 0; 
}

.tweets article h3 {
  font-size: 1.2em;
  line-height: 1.25;
  font-weight: 300;
  margin-bottom: 0;
}

.tweets article h3 a {
  -webkit-transition: all .4s ease-in-out;
  -moz-transition:    all .4s ease-in-out;
  -o-transition:      all .4s ease-in-out;
  -ms-transition:     all .4s ease-in-out;
  transition:         all .4s ease-in-out;      
}

.tweets h3,
.tweets h3 a {
  color: var(--white);
}

.tweets article h3 a:hover {
  text-decoration: underline;
}

.tweets .twitter-icon,
.tweets .retweet-icon  {
  opacity: .3;
  z-index: 500;
  -webkit-transition: opacity .4s ease-in-out;
  -moz-transition:    opacity .4s ease-in-out;
  -o-transition:      opacity .4s ease-in-out;
  -ms-transition:     opacity .4s ease-in-out;
  transition:         opacity .4s ease-in-out;    
}

.tweets .twitter-icon:hover,
.tweets .retweet-icon:hover {
  opacity: .8;
}

.tweets .twitter-icon  {
  width: 2em;
  display: block;
}

.tweets .retweet-icon  {
	display: block;
	margin-top: 1em;
  width: 2em;
}

.tweets svg {
  width: 100%;
  max-height: 2em;
  fill: #fff;  
}

.tweets article small { 
  opacity: .75;
  text-transform: uppercase; 
  display: block; 
  margin-bottom: .5em;
  font-size: 1em;
}

@media only screen and (min-width: 740px) and (min-device-width: 480px) {  
  .tweets article {
    padding: 0 1.5em; 
    margin: 0;
  }   	
  .tweets .aspect-ratio {
    overflow: hidden; 
    max-width: 100%; 
    position: relative; 
    padding-bottom: 80%; 
    height: 0;     
  }   
  .tweets article .vert-center {
  	padding: 0;
    position: absolute;
    top: 50%;
    -moz-transform:    translateY(-50%);
    -ms-transform:     translateY(-50%);
    -webkit-transform: translateY(-50%);
    transform:         translateY(-50%);  
  }  
}
@media only screen and (min-width: 1000px) and (min-device-width: 480px) {  
  .tweets .aspect-ratio {
    padding-bottom: 50%;     
  }   
}

@media only screen and (min-width: 1200px) and (min-device-width: 480px) { 
	.tweets .aspect-ratio {
    padding-bottom: 90%; 
  }   
}

  

  
/* -------- News Slide Controls -------- */

.tweets-slider-controls {
  cursor: pointer;
	font-size: 1.2em;
	position: relative; 
	display: inline-block;
	z-index: 100;
	opacity: .5;
  -webkit-transition: color .3s ease-in-out;
  -moz-transition:    color .3s ease-in-out;
  -o-transition:      color .3s ease-in-out;
  -ms-transition:     color .3s ease-in-out;
  transition:         color .3s ease-in-out;
	}  
	
.tweets-slider-controls:hover {
	opacity: 1;
	}

@media only screen and (min-width: 1100px) {
	.tweets-slider-controls { font-size: 1.5em; }
	}




@media only screen and (min-width: 1400px) and (min-device-width: 480px) {
	.footer-signup .wrap { padding: 3em 0 !important; }
	}


/* hero */

.peer-hero { 
	height: 90vh;
	min-height: 450px;
	background-color: var(--peer-lt-blue);
	position: relative;
}

@media only screen and (min-width: 370px) and (max-width: 739px)  {  
  .peer-hero { 
    height: 60vh;
  }
}

@media only screen and (min-width: 740px) and (min-device-width: 480px) {  
  .peer-hero { 
    height: 0;
    padding-bottom: 40%;
  }
}

@media only screen and (min-width: 1200px) and (min-device-width: 480px) and (min-height: 780px) {  
  .peer-hero { 
    padding-bottom: 35%;
  }
}

@media only screen and (min-width: 1200px) and (min-device-width: 480px) and (max-height: 779px) {  
  .peer-hero { 
    padding-bottom: 30%;
  }
}

.peer-hero .hero-decoration { opacity: .35 }


.peer-hero .image {
    background-position: center top;
    background-repeat: no-repeat;
    background-size: cover;
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1;
}

.peer-hero .main-message {
	width: calc(100% - 3rem);
  position: absolute;
  left: 50%;
  transform: translateX(-50%); 
  bottom: 1.5rem;
  z-index: 100;
  color: var(--gray);
  background: white;
  line-height: 1.2;
  text-align: left;
  font-weight: bold;
  padding: 1.5rem;
  box-shadow: 0 1rem 1rem 0 rgba(0,0,0,.2);
}

@media only screen and (max-width: 739px) {
  .peer-hero .main-message {
  	min-width: 320px;
  	padding: 1.5rem;
  }
}  

@media only screen and (min-width: 740px) and (min-device-width: 480px) {
  .peer-hero .main-message {
    width: 90%;
    max-width: 600px;
  }
}

@media only screen and (min-width: 1200px) and (min-device-width: 480px) {
  .peer-hero .main-message {
  	 transform: translateX(-50%); 
  	 bottom: 4rem;
  }
}  

@media only screen and (min-width: 1600px) and (min-device-width: 480px) {
  .peer-hero .main-message {
  	bottom: 4rem;
  }
}  

.peer-hero h3 {
	font-size: 18px;
  font-weight: 700;
  line-height: 1;
  text-transform: none;
  margin-bottom: 4px;
  color: var(--gray);  
	background: transparent;	
	width: auto;
  padding: 0;
  text-align: inherit;
  box-shadow: 0 .5rem .5rem 0 rgba(0,0,0,0);
}

@media only screen and (min-width: 740px) and (min-device-width: 480px) {
  .peer-hero h3 {
    font-size: 24px;
    line-height: 1.2;
  }
}  

.peer-hero .button { 
	color: var(--gray); 
	}
	
.peer-hero .button:hover { 
	color: var(--gray); 
	}
	
.peer-hero	.button::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 6.7 12'%3E%3Cpath d='M.9 0L0 .9 5.1 6 0 11.1l.9.9 5.5-5.5c.3-.3.3-.7 0-.9L.9 0z' fill='%23000'/%3E%3C/svg%3E");
  content: ' ';
  position: absolute;
  top: 52.5%;
  right: 0;
  width: 7px;
  height: 12px;
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}

/* logo */

.project-logo { 
	max-width: 300px; 
	display: block;
	margin: 0 0 1rem 0;
	transition: all .5s ease-in-out;
	}
	
.peer-logo-lt-blue	{ fill:var(--peer-lt-blue);	}
.peer-logo-blue			{ fill:var(--peer-blue);	}
.peer-logo-dk-blue	{ fill:var(--peer-dk-blue);	}