/* Section ID
------------------------------------ */
#id { 
   background-color: rgba(27,31,35,1); 
   z-index: 10; 
   position: relative; }
   
body.folder.meet-ted #id, body.folder.issues #id, body.folder.gop-convention #id { background-color: rgba(27,31,35,0.8); }
     
#id a { 
  width: auto; 
  display: block;
  text-align: left;
  padding:0; }


#id h1 {
   margin: .75em auto .5em;
   font-size: 28px;
   line-height: 1;
   font-family: 'Merriweather', sans-serif;
   font-weight: 700;
   letter-spacing: 0;
   text-transform: none;
   text-align: left; }

#id a h1 { 
   color: white;
   text-decoration: none;
   -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; }

#id a h1:hover { color: #e84d3d; }


/* Content
------------------------------------ */
#body {
   margin: 0 auto;
   width: 100%;
   background: #fff;
   padding: 0;
   color: #222;
   text-align: left;
   position: relative; } 

#content, #options { float: left; } 

#content {
   width: 65%;
   margin: 2em 5% 2em 0;
   padding: 0;
   text-align: left;} 
   
   #content.wide, body.simple #content {
      width: 100%; 
      margin: 2em auto ;}

#options {
   width: 30%;
   padding: 0;
   background: none;
   text-align: center;
   position: relative;
   top: 2em;
   right: 0;} 

#options h2 {
   font-family: "Lato", san-serif;
   font-size: 13px;
   line-height: 1;
   font-weight: 700;
   text-transform: uppercase;
   letter-spacing: 1px;
   word-spacing: 0;}


/* Photo with INSET Shadow
----------------------------- */ 
#content figure.photo {
  width: 50%;
  position: relative;
  float: right;
  display: block;
  margin: 0 0 15px 15px;
  border: 2px #444 solid;
 }

#content figure.photo:before {
  -moz-box-shadow:    inset 2px 2px 5px rgba(0,0,0,.2);
  -webkit-box-shadow: inset 2px 2px 5px rgba(0,0,0,.2);
  box-shadow:         inset 2px 2px 5px rgba(0,0,0,.2);
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  top: 0;
 }

#content figure.photo img {
  width: 100%;
  float: left;
}     

figure.photo.folder {
   width: 100%;
   height: 400px;
   position: relative;
   margin: -65px 0 0 0;
   z-index: 1;
   background-repeat: no-repeat;
   background-size: cover;
   background-position: bottom center;
}

/* Signup Forms --*/
#signup {
   position: relative;
   padding: 30px;
   width: 240px;
   background: #e84d3d;
   -webkit-border-radius: 50% 50% 50% 50%;
   border-radius: 50% 50% 50% 50%;
   height: 240px;
   margin: 35px 0; }
   
   footer #signup {
      padding: 1em;
      width: 80%;
      height: auto;
      -webkit-border-radius: 2px 2px 2px 2px;
      border-radius: 2px 2px 2px 2px;
      margin: 0 auto; }
      
   body.simple footer #signup { display: none; }
      
   #home-signup #signup {
      width:280px;
      height: 280px;
      padding: 40px;
      position: absolute;
      top: 420px;
      left: -40px;
      -webkit-box-shadow: 2px 2px 2px 0 rgba(0,0,0,.2);
      box-shadow: 2px 2px 2px 0 rgba(0,0,0,.2); 
      margin: 0 auto; }

#signup h1 { 
   font-family: 'Lato', san-serif;
   color: #fff;
   font-size: 30px;
   font-weight: 700;
   line-height: 1;
   text-transform: uppercase;
   text-align: center; }
   
   footer #signup h1 {
      text-align: left;
      float: left;
      line-height: 50px;
      margin: 0 40px;}
   
   #home-signup #signup h1 {
      font-family: 'Lato', san-serif;
      color: #fff;
      font-size: 44px;
      font-weight: 700;
      line-height: 1;
      text-transform: uppercase;  }
   
#signup h1 span.ital { 
   font-family: 'Merriweather', serif;
   color: #e79f97;
   font-size: 30px;
   font-weight: 700;
   font-style: italic; 
   text-transform: none;
   display: block; } 
   
   footer #signup h1 span.ital {
      display: inline-block; }
      
   #home-signup #signup h1 span.ital {
      font-size: 36px; }
   
#signup form {
   display: block; }
   
   footer #signup form { display: block; }
   
   #home-signup #signup form { margin-top: 1em; }
   
#subscribe-response {
   font-size: 24px;
   margin-top: 5px;
   /* text-transform: uppercase; */
   color: #0073ac; }
   
#home-signup #subscribe-response h1 {
   font-size: 32px;
   margin: .5em 0;
   color: rgba(255,255,255,.5);
}

#home-signup #subscribe-response a.button {
   background: white;
   color: #e84d3d; }
   
#home-signup #subscribe-response a.button:hover {
   background:#364a5e;
   color: white; }
   
#home-signup #subscribe-response a.button.fb {
   display: none; }
   
#signup button {
   background-color: #344a5e; }

footer #signup button { margin: 0; }
   
#signup form li { float: none; }
   footer #signup form li { float: left; margin: 0 1px; }  
   
#signup form input.email, #signup form input.zip {
   width: 90%;
   padding: 5% 5% 3%;
   margin: 1px 0;
   border: 0; }

footer #signup form input.email, footer #signup form input.zip {
   padding: 0 10px;
   margin: 0;
   height: 50px;
   line-height: 50px; }
footer #signup form input.zip { width: 100px; }


/* LISTS
------------------------------------ */
ul.folder-list {
   margin: 0;
   padding: 0;
   list-style: none; 
   clear: both; }
body#home ul.folder-list { margin: 0; padding: 0; border: 0; }

ul.folder-list li { margin: 2px auto; border-bottom: 1px #eee solid; }  
ul.folder-list li a { 
  background: rgba(0,0,0,0);
  padding: 6px 5px 6px 0px; 
  margin: 10px auto; 
  display: block;
  font-size: 22px; 
  -webkit-transition: all .35s ease-in-out;
  -moz-transition:    all .35s ease-in-out;
  -o-transition:      all .35s ease-in-out;
  -ms-transition:     all .35s ease-in-out;
  transition:         all .35s ease-in-out; }  
body#home ul.folder-list li a { padding: 6px; }

ul.folder-list li:hover a { 
  background: rgba(0,0,0,.1);
  padding: 6px 5px 6px 15px;
  color: ##364a5e; }
body#home ul.folder-list li:hover a { padding: 6px; }

ul.folder-list li:active a { 
  background: rgba(0,0,0,.2);
  padding: 6px 5px 6px 5px;  }    
body#home ul.folder-list li:active a { padding: 6px; }


ul.folder-list li a span.title { display: block; }

ul.folder-list li a span.title:after { font-family: 'trilogyicons'; font-size: 14px; content: " )" }

ul.folder-list li a time {
   display: block;
   font-size: .5em;
   text-transform: uppercase;
   color: #000;
   font-weight: 700; }
   
ul.folder-list li a p {
   color: #646464;
   font-size: .75em;
   text-transform: none;
   margin: 0; }
   
ul.folder-list li a small {
   display: block;
   font-size: .6em;
   text-transform: uppercase;
   color: #000; }


/*-- Issues --*/
.issue a {
   background-color: #eee;
   width: 96%;
   height: 120px;
   overflow: hidden;
   margin: 0 0 1em 0;
   float: none;
   position: relative;
   display: block;
   -webkit-transition: all .35s ease-in-out;
   -moz-transition: all .35s ease-in-out;
   -o-transition: all .35s ease-in-out;
   -ms-transition: all .35s ease-in-out;
   transition: all .35s ease-in-out;
   padding: 2%; }

.issue a:hover { background-color: #ccc; }
.issue a:active { background-color: #eee;  }

.issue figure {
   width: 180px;
   height: 120px;
   position: absolute;
   opacity: 1;
   z-index: 1;
   background-repeat: no-repeat;
   background-position: center center;
   background-size:            cover !important;
      -webkit-background-size: cover !important;
      -moz-background-size:    cover !important;
      -o-background-size:      cover !important;
   -webkit-transition: all .35s ease-in-out;
      -moz-transition: all .35s ease-in-out;
      -o-transition:   all .35s ease-in-out;
		-ms-transition:  all .35s ease-in-out;
		transition:      all .35s ease-in-out;}
      
.issue figure img { width: 100%; height: auto; }

.issue .text { 
   background: none;
   height: auto;
   padding: 0;
   display: block;
   position: absolute;
   z-index: 10;
   left: 0;
   -webkit-transition: all .35s ease-in-out;
   -moz-transition: all .35s ease-in-out;
   -o-transition: all .35s ease-in-out;
   -ms-transition: all .35s ease-in-out;
   transition: all .35s ease-in-out;
   width: 100%;
   top: 50%;
   left: 50%;
   margin-right: -50%;
   transform: translate(-50%, -50%); }
.issue a:hover .text { 
   background: none; }

.issue a h2 { 
   color: #e64d3c;
   font-size: 26px;
   margin: 0;
   margin-left: 220px;
   -webkit-transition: color .35s ease-in-out;
      -moz-transition: color .35s ease-in-out;
      -o-transition:   color .35s ease-in-out;
		-ms-transition:  color .35s ease-in-out;
		transition:      color .35s ease-in-out; } 
.issue a h2:after { display: inline-block; font-family: 'trilogyicons'; content: ">"; font-size: 14px; color: #e64d3c; position: relative; padding: 0 0 0 .5em; }
.issue a:hover h2, .issue a:hover h2:after { color: #364a5e; } 


.issue a p {
   display: none;
   color: #fff;
   font-size: 16px;
   line-height: 1;
   margin: 0.5em 0 0 0;
   margin-left: 220px;}  
.issue a:hover p { display: block; } 


article.video {
   display: block;
   background: #f4f4f4;
   padding: 3%;
   border-radius: 3px;
   -webkit-border-radius: 3px;
   margin-bottom: 1em; }
   
article.video h2 { margin: 0; }
article small { display: block; margin-bottom: 5px; }


/* 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%;
}


/*-- Supporters Wall Form --*/
#supporters {
   width: 100%;   
}

#hes-for-me-message {
   font-size: 16px;
   font-style: italic;
   text-align: center;
   display: block;
   margin: 2em 0; }

#formtoggle {
   background-color: #e64d3c;
   text-align: center;
   color: #fff;
   font: 700 20px/1 "Merriweather", serif;
   text-transform: none !important;
   margin: 0;
   padding: 16px 2em;
   -webkit-border-radius: 2px 2px 2px 2px;
   border-radius: 2px 2px 2px 2px;
   vertical-align: middle;
   -webkit-transition: all .25s ease-in-out;
   -moz-transition: all .25s ease-in-out;
   -ms-transition: all .25s ease-in-out;
   -o-transition: all .25s ease-in-out;
   transition: all .25s ease-in-out;
}
#formtoggle:before { 
   content: '_';
   color: #fff; 
   font-family: 'trilogyicons'; 
   font-size: 20px; 
   font-weight: 300; 
   margin-right: .25em;
   vertical-align: bottom; }
   
#formtoggle:hover {
   background-color: #5d92cc; }
   
#hes-for-me-form {
   padding: 0.5em 1em;
   background: white;
}

#photo-upload {
   text-align: center;
   width: 700px;
}

#photo-upload h4 {
   font-size: 20px; }
   
#photo-upload div.row {
   clear: both;
   float: none;
   margin: 0 auto;
}
#photo-upload div.row .field {
   float: none;
   display: inline-block;
}
div.row.two .field {
   float: left;
   text-align: left;
   width: 48%;
   margin: .25em 0 !important; }
   
div.row.one .field { 
   float: none;
   width: 96%;
   text-align: left;
   margin: .25em 0 !important; }
   
div.row.one.image-field .field {
   text-align: center; }
   
#photo-upload textarea#quote {
   width: 100%;
   line-height: 1.1;
   height: 2.5em; }

#photo-upload input#Image {
   border: 0;
   background: none;
   padding: 0; }

#photo-upload div.row .field small {
   display: block; }
   
#photo-upload div.button {
   float: none;
   clear: both;
   margin: 0 auto;
   display: inline-block;
   font: 700 18px/1 "Merriweather", serif;
   -webkit-border-radius: 2px 2px 2px 2px;
   border-radius: 2px 2px 2px 2px;
}

#photo-upload #response {
   text-align: center;
   color: #2DAB2D;
}

/* -- Supporters Wall Photo Specific --*/
section#supporters {
   background-color: #1b1f23;
}
.userpic {
   display: block;
   float: left;
   position: relative;
   height: 0px;
   width: 25%;
   padding-bottom: 18%;
   background-color: #1b1f23;
   background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
   }

body#home .userpic:nth-child(n+9) { display: none; }

.userpic, .userpic::before, .userpic::after {
   -moz-box-sizing:    content-box; 
    -webkit-box-sizing: content-box;
    box-sizing:         content-box;  }

.userpic figure {
   background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%;
    opacity: 1.0;
   -webkit-transition: all .25s ease-in-out;
   -moz-transition: all .25s ease-in-out;
   -ms-transition: all .25s ease-in-out;
   -o-transition: all .25s ease-in-out;
   transition: all .25s ease-in-out; }

.userpic:hover, .userpic:focus, .userpic:active {}
   
.userpic:hover figure, .userpic:focus figure, .userpic:active figure  {
   opacity: 0.2;
   -webkit-box-shadow:inset 0 0 40px 0 rgba(27,31,35,1);
   box-shadow:inset 0 0 40px 0 rgba(27,31,35,1);}

.userpic div.text {
   font: 400 14px/19px "Lato",sans-serif;
   color: #fff;
   margin: 0;
   float: none;
   position: absolute;
   left: 0;
   opacity: 0;
   text-align: left;
   text-transform: none;
   width: 100%;
   height: 100%;
   background: none;
   transition: all 0.25s ease-in-out 0s; 
   text-shadow: 1px 1px 0 #1b1f23;
   background-color: rgba(27,31,35,.8);
   -webkit-box-shadow:inset 0 0 40px 0 rgba(27,31,35,1);
   box-shadow:inset 0 0 40px 0 rgba(27,31,35,1);}

.userpic:nth-child(8n+7) div.text, .userpic:nth-child(8n+8) div.text {  }
.userpic div.text:before {  } 
.userpic:nth-child(8n+7) div.text:before, .userpic:nth-child(8n+8) div.text:before  { }

.userpic:hover div.text, .userpic:focus div.text, .userpic:active div.text {
   bottom: 0;
   opacity: 1;
   display: block;
   z-index: 2;
}

.userpic div.text span.quote { 
   position: absolute;
   top: 8%;
   left: 5%;
   width: 90%; }

.userpic div.text span.source {
   clear: both;
   display: block;
   margin-top: 5px;
   font: 400 20px/20px "Meriweather",serif;
   color: #e84d3d;
   text-transform: none; 
   position: absolute;
   bottom: 8%;
   left: 5%; }

@media only screen and (max-width: 1170px){
   .userpic div.text span.quote { font-size: 12px; line-height: 15px; }
}

@media only screen and (max-width: 1040px){
   body.hes-for-me #content { padding: 1em 0; width: 100%; }
   .userpic div.text span.quote { font-size: 14px; line-height: 19px; width: 90%;   }
   .userpic div.text span.source { font-size: 13px; }
   .userpic { width: 33.33%; padding-bottom: 28%; }
   body#home .userpic:nth-child(n+7) { display: none; }
}

@media only screen and (max-width: 900px){
   .userpic div.text span.quote { font-size: 13px; line-height: 17px; }
}

@media only screen and (max-width: 780px){
   .userpic div.text span.quote { font-size: 12px; line-height: 15px; }
}

@media only screen and (max-width: 720px){
   #formtoggle { clear: both; display: inline-block; }
   #photo-upload { width: 100%; }
   #photo-upload div.row .field { float: none; display: block; width: 100%; }
   #photo-upload form input, #photo-upload form select, #photo-upload form textarea { width: 90% !important; padding: 3% 5% !important; }
   .field label { display: block; }
   #photo-upload textarea#quote { width: 96%; }
   .userpic div.text span.quote { font-size: 14px; line-height: 19px; width: 90%; }
   .userpic div.text span.source { font-size: 15px; }
   .userpic { width: 50%; padding-bottom: 40%; }
   body#home .userpic:nth-child(n+5) { display: none; }
}

@media only screen and (max-width: 600px){
   .userpic div.text span.quote { font-size: 13px; line-height: 17px; }
}

@media only screen and (max-width: 540px){
   .userpic div.text span.quote { font-size: 12px; line-height: 15px; }
}

@media only screen and (max-width: 500px){
   .userpic div.text span.quote { font-size: 11px; line-height: 14px; }
}

@media only screen and (max-width: 460px){
   .userpic div.text span.quote { font-size: 10px; line-height: 12px; }
}

@media only screen and (max-width: 425px){
   .userpic div.text span.quote { font-size: 9px; line-height: 12px; }
}

@media only screen and (max-width: 400px){
   .userpic div.text span.quote { font-size: 14px; line-height: 19px; }
   .userpic div.text span.source { font-size: 17px; }
   .userpic { width: 100%; padding-bottom: 60%; }
   body#home .userpic:nth-child(n+3) { display: none; }; }
}

@media only screen and (max-device-width: 2000px) { 
   .userpic div.text { opacity: 1.0; }
}