/* --- Section Fronts --- */
#id {
   line-height: 1;
   font-weight: 300;
   color: #fff;
   text-align: center;
   position: relative;
   height: 170px;
   z-index: 2;
   /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#38469d+12,2d388a+100 */
   background: #38469d; /* Old browsers */
   background: -moz-linear-gradient(top, #38469d 12%, #2d388a 100%); /* FF3.6-15 */
   background: -webkit-linear-gradient(top, #38469d 12%,#2d388a 100%); /* Chrome10-25,Safari5.1-6 */
   background: linear-gradient(to bottom, #38469d 12%,#2d388a 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
   filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#38469d', endColorstr='#2d388a',GradientType=0 ); /* IE6-9 */}
   
#id h1 { 
   font-family: 'Montserrat', sans-serif;
   font-size: 32px;
   line-height: 32px;
   letter-spacing: 0px;
   color: white;
   margin-top: 30px; 
   width: 100%;
   font-weight: 700; }
   
#id .star {
   background-image: url(/theme/img/back-star.png);
   height: 170px;
   background-repeat: no-repeat;
   position: absolute;
   width: 300px;
   top: 0;
   right: 20px;}



/* --- Meta Styles --- */
.meta time {
   text-transform: uppercase;
   font-weight: 700; }
   
.meta h1 { margin-bottom: .25em; }
.meta h3 { 
   font-weight: 300;
   color: #888;
   margin-bottom: 1em; }


/* --- Body Content Layout --- */
section#body { 
   position: relative;
   z-index: 100;
   width: 100%; 
   margin-top: -100px; }
   
#content {
   width: auto;
   display: block;
   margin: .5em auto 3em;
   background: white;
   padding: 2.5em;
   text-align: left;
   font-family: "Libre Baskerville", serif;
   } 
   
   #content a {  }
   
   #interior.media #content .left/*, #interior.coalition #content .left*/ {
      float: left;
      width: 70%;
      font-size: 150%; }
      
   #interior.media #content .right /*, #interior.coalition #content .right*/ {
      float: right;
      width: 25%;
      font-size: 100%; }
      
.summary { 
   font-size: 90%;
   font-style: italic; }

.button {
   background: #d7262a;
   width: auto;
   display: block;
   padding: .25em 0;    
   border: 0;
   cursor: pointer;
   font-family: 'Montserrat', sans-serif;
   font-weight: 700;
   font-size: 180%;
   text-align: center;
   color: #fff;
   position: relative;
   text-decoration: none !important;
   -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; }
  
.button:hover {  background: #004985; color: #fff; } 
.button:active { background: #2B93D1; } 

.button.more {
   display: inline-block;
   font-size: 110%;
   padding: .5em 2em; }

/* LISTS
------------------------------------ */
ul.folder-list {
   margin: 0 0 0 0;
   padding: 0;
   list-style: none; 
   clear: both; }
   
ul.folder-list.news {
   margin: 0; }

ul.folder-list li { margin: 2px auto; border-bottom: 1px #ddd solid; } 
ul.folder-list li:last-child { border-bottom: 0; }
ul.folder-list li a { 
  margin: 15px auto; 
  display: block;
  font-size: 22px; 
  -webkit-transition: all .2s ease-in-out;
  -moz-transition:    all .2s ease-in-out;
  -o-transition:      all .2s ease-in-out;
  -ms-transition:     all .2s ease-in-out;
  transition:         all .2s ease-in-out; }  
  
ul.folder-list li a:before { }
ul.folder-list.no-chevron li a:before { display: none;}

ul.folder-list li:hover a, ul.folder-list li:hover a:before { color: #98012e;  } 

ul.folder-list li a span.title { 
   font-size: 26px; 
   line-height: 1;
   margin: 5px 0;
   display: inline-block; }

ul.folder-list.news li a span.title { 
   text-transform: none;
   letter-spacing: -0.5px;
   font-size: 22px; }
   
   ul.folder-list li:hover a span.title:after { }

ul.folder-list li a time {
   display: block;
   font-size: .5em;
   text-transform: uppercase;
   color: #000;
   font-weight: 400; }
   
ul.folder-list li a p {
   color: #999;
   font-size: .75em;
   text-transform: none;
   margin: 0;
   -webkit-transition: all .2s ease-in-out;
   -moz-transition:    all .2s ease-in-out;
   -o-transition:      all .2s ease-in-out;
   -ms-transition:     all .2s ease-in-out;
   transition:         all .2s ease-in-out; }
   
   ul.folder-list li:hover a p { color: #222; }
   
ul.folder-list li a small {
   display: block;
   text-transform: uppercase;
   color: #000; }
   

.recipients {
   list-style: none;
    margin: 0;
    width: 100%;
    flex: 0 0 auto;
    padding: 0;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-content: flex-start;
}

.recipients .recipient {
   flex: 0 0 260px;
   display: flex;
   flex-wrap: nowrap;
   align-items: center;
   text-align: center;
   border: 1px solid #e1e1da;
   background: #f3f3ee;
   margin: 0 10px 20px;
   padding: 20px;
   flex-direction: column;
   justify-content: flex-start;
   box-sizing: border-box;
   -webkit-box-shadow:inset 0 0 0 6px rgba(255,255,255,1);
   box-shadow:inset 0 0 0 6px rgba(255,255,255,1);
   -webkit-transition: all .2s ease-in-out;
   -moz-transition:    all .2s ease-in-out;
   -o-transition:      all .2s ease-in-out;
   -ms-transition:     all .2s ease-in-out;
   transition:         all .2s ease-in-out; 
}

.recipients .recipient:hover {
   background: #e1e1da;
   border: 1px #bdbdb0 solid;}

.recipients .recipient picture {
   max-width: 160px;
   max-height: 160px;
   width: 160px;
   height: 160px;
   margin: 0 auto 1em;
   padding: 0;
   justify-self: flex-start;
   cursor: pointer;
   flex: 1 0 2rem;
   display: block;
   -webkit-border-radius: 50%;
   border-radius: 50%;
   background-size: contain;
   -webkit-transition: all .2s ease-in-out;
   -moz-transition:    all .2s ease-in-out;
   -o-transition:      all .2s ease-in-out;
   -ms-transition:     all .2s ease-in-out;
   transition:         all .2s ease-in-out; 
}

   .recipients .recipient:hover picture {
   -moz-transform: scale(1.05);
   -webkit-transform: scale(1.05);
   -o-transform: scale(1.05);
   -ms-transform: scale(1.05);
   transform: scale(1.05); }
   
.recipient .details {
    padding: 0;
    text-align: center;
    margin-bottom: 10px;
    line-height: 1;
    justify-self: flex-start;
    flex: 1 0 auto;
    cursor: pointer;
    display: flex;
    flex-direction: column;
}

.recipient .details .name {
    margin-bottom: .5em;
    line-height: 1.2;
    font-size: 150%;
    color: #d7262a;
    font-family: "Libre Baskerville", serif;
}

.recipient:hover .details .name {   
   color: #4354b1; }

.recipient .details .office {
    margin-bottom: .5em;
    font-size: 75%;
    line-height: 1.2;
    text-transform: uppercase;
    color: #17152c;
    font-family: 'Montserrat', sans-serif;
}

.recipient .details .bio {
    font-size: 65%;
    line-height: 1.5;
    color: #17152c;
    text-align: left;
    font-family: 'Montserrat', sans-serif;
}


.profile-head {
   position: relative;
   background: #f3f3ee;
   padding: 6px;
   border: 2px solid #e1e1da;
   -webkit-box-shadow: inset 0 0 0 6px rgba(255,255,255,1);
   box-shadow: inset 0 0 0 6px rgba(255,255,255,1);
}

.profile-head figure {
   background-position: center center;
   background-size: 100%;
   display: block;
   width: 210px;
    height: 210px;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    margin: 1em;
}

.profile-head .left {
   width: 290px;
   display: inline-block;
   vertical-align: middle;}

.profile-head .right {
   width: auto;
   vertical-align: middle;
   display: inline-block;
   margin: 0 0 0 30px;}

.profile-head h1 {
   font-size: 275%;
   color: #d7262a;
   margin-bottom: 0;
}

.profile-head .party {
   font-style: italic; }

.profile-head .office { 
   display: block;
   font-size: 130%;
   color: #17152c;
   font-family: 'Montserrat', sans-serif;
   text-transform: uppercase;
   line-height: 1.5;
   margin: 0.5em 0 0 0;
}

.profile-head .office-seeking { 
   display: block;
   font-size: 150%;
   color: #17152c;
   font-family: 'Montserrat', sans-serif;
   text-transform: uppercase;
   line-height: 1;
   margin-top: 0.5em;
   font-weight: 700;
}

.profile-head .year-elected  { 
   display: block;
   font-size: 130%;
   color: #8b8a95;
   font-family: 'Montserrat', sans-serif;
}

.profile-head .endorsed {
   position: absolute;
   top: -20px;
   right: -20px;
   background: #17152c;
   text-transform: uppercase;
   color: white;
   width: 150px;
   text-align: center;
   padding: 1em;
   font-family: 'Montserrat', sans-serif;
   }

.two-column {
   width: calc(100% - 4em);
   padding: 2em;
}

.two-column .left {
   width: 240px;
   display: inline-block;
   vertical-align: top;
}

.two-column .right {
   width: 750px;
   margin-left: 55px;
   display: inline-block;
   vertical-align: top;
}

li.event {
   border-bottom: 1px #ddd solid;
}

ul.folder-list li.event a time {
   font-size: 80%;
}

li.event .title {
   font-size: 150%;
}

li.event .more {
   font-weight: 400;
   clear: both;
   display: block;
   padding: 0;
   background: none;
   font-size: 60%;
   text-decoration: underline;
   text-transform: none;
   color: #999;
}

li.resource {
   display: block; }
   
   li.resource figure {
      display: inline-block;
      margin-right: 1em;
      vertical-align: middle; }
   
   li.resource figure img {
      width: 120px;
      border: 1px #93929c solid; }
      
   li.resource .details {
      display: inline-block;
      vertical-align: middle; }
   

/* Filter Elected Officials */
#filter {
   width: auto;
   padding: 1em;
   background: #f3f3ee;
   -webkit-box-shadow:inset 0 0 0 1px #93929c;
   box-shadow:inset 0 0 0 1px #93929c;
   margin: 1em 0 2em;
}

#filter h1 {
   text-transform: uppercase;
   color: #93929c;
   font-size: 130%;
   vertical-align: middle;
   display: inline-block;
   font-family: 'Montserrat', sans-serif;
   font-weight: 400;
   margin: 0 2em 0 0;
}

#filter select {
   display: inline-block;
   vertical-align: middle;
   width: 25%;
}

   
/* Responsive Video */
.video-container {
  position: relative;
   padding-bottom: 56.25%; /* 16:9 */
   padding-top: 25px;
	height: 0;
}
.video-container iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}