/* Section ID
------------------------------------ */

#id {   
  width: 100%;
  max-width: 1400px;
  height: auto;
  position: relative; 
  overflow: hidden;
  background: #323e5c; 
  margin: auto;
  }  
  
#id.video { text-align: right; }
  
#id figcaption {
  -webkit-transition: none;
  -moz-transition: none;
  -o-transition: none;
  -ms-transition: none;
  transition: none;
  padding-top: 32.5%;
  height: 0; 
  overflow: hidden; 
  height: auto;
  position: relative;
  width: 100%;
  margin: auto;
  text-align: center;
  background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEwMCAxMDAiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPjxsaW5lYXJHcmFkaWVudCBpZD0iaGF0MCIgZ3JhZGllbnRVbml0cz0ib2JqZWN0Qm91bmRpbmdCb3giIHgxPSI1MCUiIHkxPSIxMDAlIiB4Mj0iNTAlIiB5Mj0iLTEuNDIxMDg1NDcxNTIwMmUtMTQlIj4KPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAwMCIgc3RvcC1vcGFjaXR5PSIwLjEiLz4KPHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjMDYwNjA3IiBzdG9wLW9wYWNpdHk9IjAuOSIvPgogICA8L2xpbmVhckdyYWRpZW50PgoKPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCIgaGVpZ2h0PSIxMDAiIGZpbGw9InVybCgjaGF0MCkiIC8+Cjwvc3ZnPg==); /* gradient overlay */
  background-image: -moz-linear-gradient( rgba(0,0,0,0) 0%, rgba(0,0,0,.1) 60%, rgba(0,0,0,.6) 100%); /* gradient overlay */
  background-image: -o-linear-gradient(rgba(0,0,0,0) 0%, rgba(0,0,0,.1) 60%, rgba(0,0,0,.6) 100%); /* gradient overlay */
  background-image: -webkit-linear-gradient(rgba(0,0,0,0) 0%, rgba(0,0,0,.1) 60%, rgba(0,0,0,.6) 100%); /* gradient overlay */
  background-image: linear-gradient(rgba(0,0,0,0) 0%, rgba(0,0,0,.1) 60%, rgba(0,0,0,.6) 100%); /* gradient overlay */
  } 
  
#id.video figcaption {
  position: absolute;
  bottom: 0;
  left: 0;
  padding: 1em;
  }  

@media (min-width : 740px) { 
  #id figcaption  { padding-top: 18.5%; }
  #id.story-id figcaption  { padding-top: 30%; }
  }
  
@media (min-width : 1000px) { 
  #id figcaption  { padding-top: 12.5%; }
  #id.story-id figcaption  { padding-top: 25%; }
  }
  
@media (min-width : 1200px) { 
  #id figcaption  { padding-top: 12.5%; }
  #id.story-id figcaption  { padding-top: 25%; }
  #id .wrap { 
    max-width: 1200px; 
    position: relative;
    }
  }

#id, #id:before, #id:after {
  -moz-box-sizing:    content-box; 
  -webkit-box-sizing: content-box;
  box-sizing:         content-box; 
  }

#id .photo {
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  transition:         all .0s ease-in-out;    
  -webkit-transition: all .0s ease-in-out;  
  -moz-transition:    all .0s ease-in-out;  
  -o-transition:      all .0s ease-in-out;  
  -ms-transition:     all .0s ease-in-out; 
  }

@media (max-width : 960px)  { 
  #id .photo {
    width: auto;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    }
  #id.story-id .photo {
    width: 100%;
    height: auto;
    }
  }

#id * { color: white; }

#id h1 { 
  width: 100%; 
  display: block; 
  margin: .5em auto;
  font-size: 1.5em;
  text-align: left;
  padding: .5em 1em;
  text-transform: uppercase;
  }
  
#id span.full-hed { display: none; }
  
@media (min-width : 740px)  { #id h1 { font-size: 2em; } #id span.full-hed { display: inline; }}
@media (min-width : 1000px) { #id h1 { max-width: 1000px; padding-left: 0; font-size: 2.5em; }}
@media (min-width : 1200px) { #id h1 { max-width: 1200px; }}


/* special Headings for individual stories */

#id .story-heading {
  display: none;
  }

.story-h1 { margin: 0 0 .25em; } 
.story-h2 { font-style: italic; font-size: 1.3em; }

@media (min-width : 768px) { 
  .story-h1, .story-h2 { display: none; }
  .story-h1.video, .story-h2.video { display: block; }
  #id .story-heading {
    display: block;
    position: absolute;
    bottom: 1em;
    left: 1.5em;
    text-align: left;
    max-width: 30%;
    }
  #id.video .story-heading { display: none; }
  }

@media (min-width : 960px) { 
  #id .story-heading {
    left: 1em;
    }
  .story-h1.video, .story-h2.video { display: none; }
  #id.video .story-heading { display: block; }
  }

@media (min-width : 1200px) { 
  #id .story-heading {
    bottom: 1.5em;
    left: 0;
    }
  }
  
@media (min-width : 768px) { 
  #id .story-heading h1 {
    padding: 0;
    text-transform: none;
    margin: 0 0 .25em;
    font-weight: 800;
    text-transform: uppercase;
    }
  #id .story-heading h2 {
    text-transform: none;
    margin: 0;
    font-family: 'Lato', sans-serif;
    font-weight: 400;
    font-size: 1.4em;
    text-transform: uppercase;
    }
  #id .story-heading h3 {
    margin: 0 0 .5em;
    text-transform: uppercase;
    font-weight: bold;
    font-size: 1.2em;
    } 
  #id .story-heading h4 {
    margin: .5em 0 0 0;
    font-style: italic;
    font-size: 1.2em;
    text-transform: none;
    font-family: 'Lato', sans-serif;
    font-weight: 400;
    }
  #id .story-heading h2 span {
    white-space: nowrap;
    display: inline-block;
    }
  }  

#id .share {
  display: none;
  }  

@media (min-width : 500px) { 
#id .share {
  display: inline-block;
  font-size: 1em;
  margin-top: 1em;
  }    
}

#id .share.outside {
  position: absolute;
  right: 1em;
  bottom: 1em;
  font-size: 1em;
  }

@media (min-width : 960px) { 
  #id .share.outside {
    bottom: 1.5em;
    right: 1.5em;
    }
  }

@media (min-width : 1200px) { 
  #id .share {
    font-size: 1.25em;
    }
  #id .share.outside {
    right: 0;
    bottom: .75em;
    font-size: 1.5em;
    }
  }
  
@media (min-width : 1400px) { 
  #id .share.outside {
    bottom: 1em;
    }
  }

#id .share .icons {
  background: white;
  background: rgba(255,255,255,.7);
  padding: .5em;
  color: #323e5c;
  display: inline-block;
  }

#id .share .icons:hover {
  background: rgba(255,255,255,1);
  -moz-transform:    scale(1.05);
  -ms-transform:     scale(1.05);
  -webkit-transform: scale(1.05);
  transform:         scale(1.05); 
  } 




/* Page Structure  */

main {
 text-align: left;
 position: relative;
 }

@media (min-width : 960px) and (max-width : 1400px)  { 
  main { padding: 1.5em 1em; } 
  }  
  
@media (min-width : 1400px)  { 
  main { padding: 1.5em 0; } 
  }

@media (min-width : 1000px)  { #body { max-width: 1000px; }}  
  
@media (min-width : 1200px)  { 
  #body  { max-width: 1200px; } 
  #wide.stories #body,
  #wide.toolkit #body { max-width: 1400px; } 
  }
  

main article {
  padding: 1.5em;
  }

@media (min-width : 960px)  {
  #interior main article{ 
    width: 70%;
    float: left;
    padding: 0;
    }
  #wide main article{ 
    padding: 0;
    }
  } 
    
main aside {
  padding: 1.5em;
  background: #f5f5f5;
  }

@media (min-width : 960px)  { 
  main aside { 
    width: 25%;
    float: right;
    padding: 0;
    background: transparent;
    } 
  }    
    
    
/* main article list */

main article article { 
  padding: .75em 0;
  } 

@media (min-width : 960px)  { 
  main article article { 
    width: 100% !important;
    float: none !important;
    } 
  }    
    
main article article h3 { 
  margin: 0;
  } 






/* Aside Nav */


#section-navigation { 
  background: #f5f5f5;
  }
  
@media (min-width : 900px) { 
  #section-navigation { 
    padding: 1.5em;
    } 
  }
  
#section-navigation a { 
  color: #7d7d7d;
  } 
    
#section-navigation a:hover {
  color: black;
  }
                     
#section-navigation h3 {
  font-size: 2em;
  text-transform: uppercase;
  margin-bottom: .25em
  }
  
#section-navigation h3 a {
	color: #323e5c;
	}
	
#section-navigation h3 a:hover {
	color: #4c8051;
	}
    
#section-navigation ul { list-style: none; } 

#section-navigation li a { 
  padding: .2em 0; 
  display: block;
  } 
    
#section-navigation li:last-child a { padding: .25em 0 0 0; }  

#section-navigation li.active a { 
  opacity: 1; 
  font-weight: 600  
  }


/* Folder Table of Contents  */   

.toc { 
    list-style: none;
    margin: 0;
    } 

.toc a { 
    font-size: 1.4em;
    padding: .5em .5em .5em 2em;
    position: relative; 
    display: block;
    margin-bottom: 5px;
    background: #f7f7f7;
    color: #323e5c;
    } 

.toc a:before { 
    height: 0; 
    width: 0;    
    margin-left: 0;  
    content: "   ";    
    position: absolute;
    top: .9em;
    left: .9em; 
    bottom: 100%;   
    pointer-events: none;
    border-color: rgba(50, 62, 92, 1); 
    border: 7px solid transparent; 
    border-color: #4c8051;  
    } 
    
.toc a:hover { 
    background: #4c8051;
    color: white;
    }

.toc a:hover:before { 
    border-color: rgba(255, 255, 255, 1); 
    border-color: white;  
    } 




/* Signup Slider Shell */

#signup-slide { display: none; }

#signup-slide.reveal { display: block; }
  
#signup-slide {
  line-height: 17px;
  margin: 0 auto;
  width: 90%;
  background: #f2f2f2;
  padding: 1.5em;
  }

#signup-slide.slider,
#signup-slide.left.slider {
  bottom: 3em;
  box-shadow: 0 0 1em rgba(0, 0, 0, 0.3);
  display: block;
  left: 0;
  margin: 0 auto 0 -100%;
  position: fixed;
  transition: margin 0.3s ease-in-out 0s;
  width: 100%;
  z-index: 990;
  }
  
#signup-slide.right.slider {
  margin: 0 -100% 0 auto;
  left: auto;
  right: 0;
  }

#signup-slide.center.slider {
  margin: 0 auto -100% auto;
  left: auto;
  }
    
@media (min-width : 740px) { 
  #signup-slide.slider,
  #signup-slide.left.slider{ 
    margin: 0 auto 0 -60%;
    width: 50%;
    }
  #signup-slide.right.slider {
    margin: 0 -60% 0 auto;
    }
  #signup-slide.center.slider {
    left: 25%;
    margin: 0 auto -100% auto;
    }
  }
  
@media (min-width : 1200px) { 
  #signup-slide.slider,
  #signup-slide.left.slider{ 
    margin: 0 auto 0 -40%;
    width: 30%;
    }
  #signup-slide.right.slider {
    margin: 0 -40% 0 auto;
    }
  #signup-slide.center.slider {
    left: 35%;
    margin: 0 auto -100% auto;
    }
  } 

#signup-slide.slider.reveal,
#signup-slide.left.slider.reveal{ margin-left: 0; }
  
#signup-slide.right.slider.reveal {
  margin-left: auto;
  margin-right: 0;
  }
  
#signup-slide.center.slider.reveal {
  margin-left: auto;
  margin-bottom: 0;
  }
  
.slide-close {
  background: rgba(0, 0, 0, 0) url("/theme/img/close.png") no-repeat scroll center center;
  cursor: pointer;
  display: block;
  height: 33px;
  opacity: 0.6;
  position: absolute;
  right: 5px;
  text-indent: -99999px;
  top: 5px;
  width: 33px;
  z-index: 999;
  }

.slide-close:hover { opacity: 1; }
  

@media screen and (max-width: 1060px) {
  #signup-slide.reveal { bottom: 0; z-index: 1000; }
  .slide-close {
    opacity: 0.8;
    top: initial;
    }
  }
  
/* form elements */
    
#signup-slide form ol {  
    list-style: none;
    margin: 0;
    }
     
#signup-slide form li {  
    width: 49%;
    float: left;
    margin-bottom: .5em;
    position: relative;
    }

#signup-slide form li:nth-child(2n) { float: right; }
    
#signup-slide form li.name_member {  padding: .75em 0; } 
    
#signup-slide form input {
    display: block;
    float: left;
    color: #616161;
    font-size: 1.25em;
    line-height: 1;
    overflow: hidden;
    border: none;
    padding: .75em 1em;
    background: white;
    width: 100%;
    border-radius: 0;
    }
    
#signup-slide form input:focus,
#signup-slide form input:hover {  background: white; }

#signup-slide input#Membership_type { width: 20px !important; } 
 
#signup-slide form #First_Name,
#signup-slide form #Last_Name,
#signup-slide form #Email       { width: 145px; }   
    
#signup-slide form #name_member { width: 12px; } 
    
#signup-slide form #Email { margin-right: 0; } 
    
#signup-slide form fieldset { 
    border: 0;
    padding: 0;
    margin: 0 0 10px 0;
    }
    
#signup-slide form fieldset label { 
    display: block;
    width: 80px;
    float: left;
    font-weight: bold;
    } 

#signup-slide form fieldset textarea { 
    border: 0;
    width: 390px;
    height: 80px;
    float: left;
    } 

#signup-slide form button {
    background: #00a950;
    width: 100%;
    padding: .75em 1em;
    font-size: 1.25em;
    line-height: 1;
    font-weight: bold;
    text-transform: uppercase;
    cursor: pointer;
    outline: none;
    border: 0px;
    color: white;
    border: none;
    }
    
    #signup-slide form button:focus,
    #signup-slide form button:hover { background: #0082d5;}

#signup-slide form label.error {
    font-weight: normal;
    font-size: .8em;
    color: white;
    background: #e0454b;
    padding: .2em .3em;   
    display: block;
    white-space: nowrap;
    position: absolute; 
    left: 0;
    top: 90%;
    z-index: 9999;
    } 
  
#signup-slide form label.error:after { 
    height: 0; 
    width: 0;    
    margin-left: -6px;  
    content: " ";    
    position: absolute; 
    left: 15px; 
    bottom: 90%;
    border-color: rgba(224,69,75, 0);    
    border: solid transparent; 
    pointer-events: none;
    border-bottom-color: #e0454b; 
    border-width: 6px; 
    } 
    
    

/* --------------- Video --------------- */

#video,
section[id*='video'] {
  position: relative; 
  padding-bottom: 56.25%; 
  height: 0; 
  overflow: hidden; 
  max-width: 100%; 
  margin-bottom: .75em;
  } 

#id #video { 
  margin: 0;
  }  

@media (min-width : 960px) { 
  #id #video { 
    padding-bottom: 36.6%; 
    max-width: 65%; 
    margin: 2.0em 0 auto auto;
    z-index: 999;
    }
  section[id*='video'] { 
    padding-bottom: 56.25%; 
    max-width: 100%; 
    margin: auto 0 auto auto;
    z-index: 999;
    }  
  } 

@media (min-width : 1400px) { 
  #id #video { 
    padding-bottom: 36.6%; 
    max-width: 65%; 
    margin: 1.2em 0 auto auto;
    z-index: 999;
    }
  } 
  
#video iframe, 
#video object, 
#video embed,
section[id*='video'] iframe, 
section[id*='video'] object, 
section[id*='video'] embed { 
  position: absolute; 
  top: 0; 
  left: 0;
  width: 100%; 
  height: 100%; 
  }



/* Blog styles */

.post {
  padding: 3.5em 0;
  border-bottom: 1px solid #e2e2e2;
  }
  

  .blog .previous,
  .blog .next {
      width: 300px;
      font-size: .8em;
      display: block;
      }
  
  .blog .previous {
      float: left;
      }
  
  .blog .next {
      float: right;
      text-align: right;
      }
  
  #recent-posts {
      font-size: .8em;
      padding-top: 1.5em;
      border-top: 1px solid #b7d1e2;
      }

.photo-with-caption {    /* removed .post */
    font-size: .75em;
    color: #8e8e8e;
    line-height: 1.2em;
    }
    
.photo-with-caption.img-center {
    width: 600px;  
    margin-bottom: 15px;
    max-width: 100%;
    }
    
.photo-with-caption.img-center img {
    width: 100%;
    }
    
.photo-with-caption.img-left {
    margin: 0 0 15px 0; 
    max-width: 100%;
    }
    
.photo-with-caption.img-right {
    margin: 0 0 15px 0; 
    max-width: 100%;
    }
    
.photo-with-caption.img-left img,
.photo-with-caption.img-right img {
  width: 100%;
  }   
    
.photo-with-caption.img-left.small-float img,
.photo-with-caption.img-right.small-float img { width: 100%;}   

@media (min-width : 740px) { 
  .photo-with-caption.img-left { 
    float: left; 
    width: 340px; 
    margin: 0 15px 15px 0; 
    }
  .photo-with-caption.img-right {
    float: right; 
    width: 340px; 
    margin: 0 0 15px 15px; 
    } 
  .photo-with-caption.img-left.small-float,
  .photo-with-caption.img-right.small-float { width: 200px;}
  } 
     
    

    
/* Story Photo */
figure.photo { max-width: 100%; margin-bottom: 1em; }
@media (min-width : 740px) { 
figure.photo { 
  width: 20em;
  float: right;
  margin: 0 0 1em 1em; }

}  

figure.photo img { 
  width: 100%;
  display: block;
  margin-bottom: .5em; }

figure.photo figcaption { 
  font-size: .8em;
  line-height: 1.2; 
  color: #6a6a6a; 
  text-align: left; }

/* Must See Folder */

.mustsee.col { width: 100%; }
.mustsee.col a h3 { display: none; }




/* Mobile Share */

.mobile.share {
  display: none;
  display: block;
  font-size: 1em;
  margin: 2em auto;
  text-align: center;
  color: #404040;
  }  
.mobile.share strong { text-transform: uppercase; }

.mobile.share .icons {
  background: #0054a6 ;
  padding: .5em;
  color: #fff;
  display: inline-block;
  }

.mobile.share .icons:hover {
  background: #00ab4e ;
  -moz-transform:    scale(1.05);
  -ms-transform:     scale(1.05);
  -webkit-transform: scale(1.05);
  transform:         scale(1.05); 
  } 

@media (min-width : 500px) { 
.mobile.share { display: none; }    
}

/* Action Network thank you page */
#can_thank_you h1 { display:none !important; }
#can_thank_you { margin-bottom: 3em !important; }