/* Hero */

.hero { 
	background: #AF190E;
  position: relative;
  width: 100%;
  padding-top: 400px;
  overflow: hidden;
  }

@media only screen and (min-width: 420px) {
  .hero { 
    padding-top: 450px;
    }
  }

@media only screen and (min-width: 740px) {
  .hero { 
    min-height: 600px;
    padding-top: 500px;
    }
  }
  
@media only screen and (min-width: 900px) {
  .hero { 
    height: 100%;
    height: 80vh;
    min-height: 800px;
    padding-top: 200px;
    }
  }
   
.hero-image { 
  background-position: center 80px;
  background-repeat: no-repeat;  
  -webkit-background-size: 100%;
  -moz-background-size:    100%;
  -o-background-size:      100%;
  background-size:         100%;  
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  }
  
@media only screen and (min-width: 420px) {
  .hero-image { 
		background-position: center 70px;
    }
  }
  
@media only screen and (min-width: 1100px) {
  .hero-image { 
      background-position: center 100px;
      -webkit-background-size: cover;
      -moz-background-size:    cover;
      -o-background-size:      cover;
      background-size:         cover; 
      max-width: 50%;
    }
  }
  
.hero .angle {
	height: 100%;
   position:  absolute;
	} 
	
@media only screen and (min-width: 740px) {
	.hero .angle {

		}  
  }
  
@media only screen and (min-width: 1300px) {
	.hero .angle {
      top: 0;
      left: 0;
      width: 50%;
      /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#e93d33+0,e93d33+100&0+50,0.95+100 */
      background: -moz-linear-gradient(left,  rgba(175,25,14,0) 0%, rgba(175,25,14,0) 50%, rgba(175,25,14,0.90) 100%); /* FF3.6-15 */
      background: -webkit-linear-gradient(left,  rgba(175,25,14,0) 0%,rgba(175,25,14,0) 50%,rgba(175,25,14,0.90) 100%); /* Chrome10-25,Safari5.1-6 */
      background: linear-gradient(to right,  rgba(175,25,14,0) 0%,rgba(175,25,14,0) 50%,rgba(175,25,14,0.90) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
      filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00e93d33', endColorstr='#f2e93d33',GradientType=1 ); /* IE6-9 */

		}  
  }
  
@-webkit-keyframes pulse {
  from {
    bottom: 3em;
  }
  50% {
    bottom: 2.75em;
  }
  to { 
    bottom: 3em;
  }
}

@keyframes pulse {
  from {
    bottom: 3em;
  }
  50% {
    bottom: 2.75em;
  }
  to { 
    bottom: 3em;
  }
}

/* --- Endorse --- */
.signup { 
   display: block;
   position: relative;
   text-align: left;
   overflow: hidden;
   padding: 1.5em;
   color: white;
   width: 100%;
   right: initial;
   background: #AF190E;
   font-size: 70%
  }
  
@media only screen and (min-width: 420px) { 
   .signup { font-size: 80%;  }
}

@media only screen and (min-width: 640px) { 
   .signup { font-size: 90%;  }
}

@media only screen and (min-width: 820px) { 
  .signup { 
     display: block; 
     font-size: 100%;
     position: absolute;
     text-align: left;
     overflow: hidden;
     padding: 0;
     color: white; 
     width: 70%;
     right: 0;
     bottom: 0;
     }
  }

@media only screen and (min-width: 1100px) { 
  .signup { 
     display: block; 
     position: absolute;
     text-align: left;
     overflow: hidden;
     padding: 1.5em;
     color: white; 
     width: 50%;
     right: 0;
     bottom: 4rem;
     }
  }

.signup h1 { 
   color: white !important;
   font-size: 200% !important;
   text-transform: none !important;
	margin-bottom: .25em !important;
	}

.signup form, #subscribe-form { 
   padding: 1.5em; }
   
   #subscribe-form .at form { padding: 0 !important; }
   #subscribe-form .thankYou {
      color: white !important;
      line-height: 1;}
   
@media only screen and (min-width: 900px) { 
   .signup h1 { font-size: 250% !important; }
  .signup form, #subscribe-form { padding: 2em;}
  }
  
@media only screen and (min-width: 1100px) { 
   .signup h1 { font-size: 300% !important; }
  .signup form, #subscribe-form { padding: 4em;}
  }
@media only screen and (min-width: 1400px) { 
   .signup h1 { font-size: 350% !important; }
  .signup form, #subscribe-form { padding: 6em;}
  }  
@media only screen and (min-width: 1800px) { 
   .signup h1 { font-size: 400% !important; }
  .signup form, #subscribe-form { padding: 8em;}
  #subscribe-form { padding: 8em; }
  }

.signup.form.inline input { 
   font-size: 125%;
   -webkit-border-radius: 100px;
    border-radius: 100px;   
}
.signup.form .button {
    text-align: left;
}
.signup.form.inline button { 
	font-size: 180%;
   background: white;
	color: #263e74;
	padding: .75em 2em;
   font-weight: 800; 
   font-family: 'Barlow Condensed', sans-serif;
   text-transform: uppercase;
   line-height: 1.1;
	}
	
.signup.form.inline button:hover,
.signup.form.inline button:active{ 
  background: #2054A2;
  color: white;
  }


.grid {
   display: block;}
@media only screen and (min-width: 1100px) { 
   .grid {
      display: flex;
      flex-wrap: wrap;
      flex-direction: row;
      align-items: stretch;
      align-content: stretch;   }
  }
.grid .col {
   flex: 1; }

.why-block {
   background: #263e74;
   height: 100%;
   text-align: center;  
   position: relative;}

.why-image {
   opacity: .4;
   width: 100%;
   height: 100%;
   display: block;
   background-position: center center;
   background-repeat: no-repeat;
   background-size: cover;
   z-index: 99;
   position: absolute;
   top: 0;
   left: 0;
   -webkit-transition: all .35s ease-in-out;
   -moz-transition: all .35s ease-in-out;
   -ms-transition: all .35s ease-in-out;
   -o-transition: all .35s ease-in-out;
   transition: all .35s ease-in-out; 
}
.why-message-link {
   display: block;
   width: 100%;
   height: 100%;
   position: relative;
   z-index: 100;
}
.why-message {
   max-width: 500px;
   padding: 5em;
}
.why-message-link h2 {
    font-size: 3.5em;
    color: white;
    margin-bottom: .25em;
    text-transform: none;
}

.why-message-link span.description {
   color: white;
   display: block;
   font-size: 1.4em;
   margin-bottom: .25em;
}

.why-message-link button { 
   font-size: 150%;
   background: white;
   color: #27417e;
   padding: .75em 2em;
   font-weight: 800; 
   font-family: 'Barlow Condensed', sans-serif;
   text-transform: uppercase;
   line-height: 1.1;
   -webkit-border-radius: 100px;
   border-radius: 100px;
}
   
.why-message-link button:hover,
.why-message-link button:active{ 
   background: #AF190E;
   color: white;
}

@media only screen and (min-width: 1100px) {
   .why-message {
      max-width: 500px;
      padding: 4em 0;
   }
}

.promo {
   margin: 0 auto;
   max-width: 960px;
}

.promo-graphic {
   display: block;
   width: 100%;
}

.promo-graphic img {
   display: block;
   width: 100%;
}

@media only screen and (min-width: 1200px) { 
   .promo { margin: 0 auto 2rem; }   
}


/* --- Tweets --- */
.tweets-block {
   display: block;
   position: relative;
   background: none;
   padding: 1.5em;
   text-align: center;
}

.tweets-block .wrap {
    width: 100%;
    max-width: 1600px;
    margin: 0 auto;
}

.tweets-block h2 {
   font-size: 250%;
}

.tweets-block article {
   font: 12px/1.2 'Lato', sans-serif;
   width: calc(100% - 1em);
   max-width: 350px;
   padding: 0.5em;
   background: none;
   text-align: left;
   vertical-align: top;
   display: inline-block;
   overflow: hidden; }
      
   @media only screen and (min-width: 640px) { 
      .tweets-block article { width: calc(50% - 1em); }
   }

   @media only screen and (min-width: 1200px) { 
      .tweets-block article { width: calc(33% - 1em); }
      .tweets-block article.tweet-4 { display: none; }
   }

   @media only screen and (min-width: 1450px) { 
      .tweets-block article { width: calc(24% - 1em); }
      .tweets-block article.tweet-4 { display: inline-block; }
   }


.tweets-block article:last-child {
   margin-right: 0; }

.tweets-block article img {
   float: right;
   margin: 0 0 1em 1em; }
   
.tweets-block article iframe {
   width: 100% !important; }

.EmbeddedTweet {
   border: 0 !important;
   border-radius: 0 !important; }


@media only screen and (min-width: 1100px) { 
  .tweets-block { 
    position: relative;
    padding: 4em; }
}



/* --- News Feed --- */

.news { 
  display: block; 
  position: relative;
  background: #ececec;
  padding: 1.5em;
  text-align: center;
  }
  
.news .wrap {
    width: 100%;
    max-width: 1600px;
    margin: 0 auto;
}

.news-slider {
   display: block;
   margin-bottom: 2em;
}

.news .button {
   text-transform: uppercase;
   text-decoration: underline;
   font-size: 110%;
}

@media only screen and (min-width: 1100px) { 
  .news { 
    position: relative;
    padding: 3em; }
  
  }

.news h2 {
  text-align: center;
  font-size: 1.5em;
  text-transform:  uppercase;
  }
  
@media only screen and (min-width: 740px) { 
  .news h2 { 
      font-size: 2.5em; }
   .news-slider {
      display: flex;
   }
}
  

.news h2 a {
  display: inline-block;
  color: #263e74;
  font-size: 150%;
  }

.news h2 a:hover {
  color: #518efe;
  }
  
.news h2 a:active {
  color: #e93d33;
  }
  
@media only screen and (min-width: 740px) { 
    .news h2 a { font-size: 100%; }
}

.news article {
  padding: 1.5em; 
  text-align: left;
  -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;
  }
  
.news article:hover {
  background: rgba(0,0,0,.05);
  }
  
.news.reveal article  {
}  
  
.news article a * {
   color: #666;
	}  
	
.news article h3 {
   font-weight: 700;
	color: #263e74;
   margin-bottom: .7em; 
   text-transform: uppercase;
}  

.news article small { 
  opacity: .75;
  text-transform: uppercase; 
  display: block; 
  margin-bottom: .5em;
  font-weight: 400;
  }

.news .source  { 
  margin-top: 2.25em;
  opacity: .75;
  text-transform: uppercase; 
  position: relative;
  font-size: .9em;
  }
  
.news .source::before {
  background: rgba(0,0,0,.2);
  content: "";
  display: block;
  height: 1px;
  left: 0;
  position: absolute;
  bottom: 190%;
  width: 3em;
}
  
/* -------- News Slide Controls -------- */

.news-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;
	}  
	
.news-slider-controls:hover {
	opacity: 1;
	}

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




/* Issues */



.issues {
  position: relative;
  text-align: center;
  padding: 1.5em;
  overflow: hidden;
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#1e5799+1,00aeef+100 */
	background: rgb(30,87,153); /* Old browsers */
	background: -moz-linear-gradient(left, rgba(30,87,153,1) 1%, rgba(0,174,239,1) 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(left, rgba(30,87,153,1) 1%,rgba(0,174,239,1) 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to right, rgba(30,87,153,1) 1%,rgba(0,174,239,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#00aeef',GradientType=1 ); /* IE6-9 */
	}
.issues .more { color: #60d4ff; margin-top: 4em;}
.issues .more:hover { color: white; }

.ie8 .issues { width: 100%; display: block; }
	
@media only screen and (min-width: 1100px) { 
	.issues .wrap {
		max-width: 1400px;
		padding: 6em 0;
		}
}
	
.issues .background {
	position: absolute;
	top: 0;
	right: 0;
	opacity: .2;
	width: 100%;
	height: 100%;
	background: url('/theme/img/ca-capitol.jpg') no-repeat right top;
	background-size: cover;
	display: none;
	}
	
.issues .intro { 
	margin-bottom: 3em;
	position: relative
	}	

.issues .intro::after {
  background: rgba(255,255,255,.25);
  content: "";
  display: block;
  height: 2px;
  left: 50%;
  position: absolute;
  top: 125%;
  width: 4em;
  transform: translateX(-50%);
}

.issues a * { color: white; }
  
.issue a:hover {
  background: rgba(0,0,0,.1);
}
.issue a:hover .icons {
  color: #60d4ff;
}


/* Videos/Photos */

.videos-photos {
   padding: 2.5em 0;
   /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#263e74+0,518efe+100 */
   background: rgb(38,62,116); /* Old browsers */
   background: -moz-linear-gradient(left,  rgba(38,62,116,1) 0%, rgba(81,142,254,1) 100%); /* FF3.6-15 */
   background: -webkit-linear-gradient(left,  rgba(38,62,116,1) 0%,rgba(81,142,254,1) 100%); /* Chrome10-25,Safari5.1-6 */
   background: linear-gradient(to right,  rgba(38,62,116,1) 0%,rgba(81,142,254,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
   filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#263e74', endColorstr='#518efe',GradientType=1 ); /* IE6-9 */
   position: relative;
}

.videos-photos .wrap {
   width: 100%;
   max-width: 1600px;
   margin: 0 auto;
}

.latest-video { 
  padding: 1.5em;
}
  
.latest-photos { 
  padding: 1.5em;
  position: relative;
  overflow: hidden;
} 

@media only screen and (min-width: 1100px) { 
   .videos-photos {
      padding: 5em 0; }
  .latest-video,
  .latest-photos { 
    display: inline-block;
    }
  .latest-video { 
      width: 65%;
      padding: 0;
      position: relative;
    }
  .latest-photos { 
      padding: 0;
      width: 30%;
      right: 0;
      position: absolute;    
   }
}

.videos-photos h2 { 
	text-align: center; 
	position: relative;
   font-size: 250%;
	}

.videos-photos h2 a,
.videos-photos .tiles figcaption { 
   text-transform: uppercase;
   color: white; }

@media only screen and (min-width: 1100px) {
	figure.player { 
      width: 100%;    
      height: 0; 
      padding-bottom: 56.25%; 
      max-height: auto;
      max-width: auto;
  	} 
   .videos-photos figure.player {
      border: 20px white solid;
     }      
  .videos-photos .tiles { 
      padding: 20px;
      background: white;  	
   }
  .videos-photos .tiles .table {
    padding-bottom: 0;
    display: table;
    width: 100%;
		}
  .videos-photos .tiles .table article {
  	display: table-cell;
    width: 50%;
    overflow: hidden;
    padding: 0;
		}
  .videos-photos .tiles .table article a {
  	display: block;
  	position: relative;
  	padding: 0;
  	}
  .videos-photos .tiles figure { 
    margin: 1px;
  	} 
  .videos-photos .tiles article a .mask {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(9,65,106,0);
    -moz-box-shadow:    inset 0 0 0 0 #05a0e1;
    -webkit-box-shadow: inset 0 0 0 0 #05a0e1;;
    box-shadow:         inset 0 0 0 0 #05a0e1;;      
	  -moz-transition:    all .3s cubic-bezier(0.75, -0.25, 0.25, 0.75);
		-o-transition:      all .3s cubic-bezier(0.75, -0.25, 0.25, 0.75);
		-webkit-transition: all .3s cubic-bezier(0.75, -0.25, 0.25, 0.75);
		transition:         all .3s cubic-bezier(0.75, -0.25, 0.25, 0.75); 
		z-index: 10;
		}
  .videos-photos .tiles article:hover a .mask {
      background: rgba(9,65,106,.8);
      -moz-box-shadow:    inset 0 0 0 .6em #05a0e1;
      -webkit-box-shadow: inset 0 0 0 .6em #05a0e1;
      box-shadow:         inset 0 0 0 .6em #05a0e1; 
		}
  .videos-photos .tiles figcaption {
      width: 100%;
      position: absolute;
      font-family: 'Barlow Condensed', sans-serif;
      left: 0;    
      top: 50%;
      z-index: 20;    
      display: block;
      padding: 1.2em;
      font-weight: 800;
      opacity: 0;
      -moz-transition:    all .5s cubic-bezier(0.75, -0.25, 0.25, 0.75);
      -o-transition:      all .5s cubic-bezier(0.75, -0.25, 0.25, 0.75);
      -webkit-transition: all .5s cubic-bezier(0.75, -0.25, 0.25, 0.75);
      transition:         all .5s cubic-bezier(0.75, -0.25, 0.25, 0.75); 
      -moz-transform:    translateY(-35%);
      -ms-transform:     translateY(-35%);
      -webkit-transform: translateY(-35%);
		transform:         translateY(-35%);    
		}
  .videos-photos .tiles .table article:hover a figcaption {
      opacity: 1;
      -moz-transform:    translateY(-50%);
      -ms-transform:     translateY(-50%);
      -webkit-transform: translateY(-50%);
      transform:         translateY(-50%);
		}
}