@charset "UTF-8";

/* Extras3.css */



/* ------------------------------  TITLE BAR ------------------------------ */



.title-bar {
    height: 50px;
    background-color: #111;
    border-bottom: 1px solid rgba(255,255,255,.1);
}

.title-search-button, .title-menu-button {
    position: absolute;
    height: 50px;
    min-width: 50px;
    text-transform: uppercase;
    padding: 0 1em;
    font-weight: 600;
}

.title-search-button .fi-magnifying-glass, .title-menu-button .fi-list {
    font-size: 1.6em;
}

.title-search-button span, .title-menu-button span {
    display: block;
    font-size: .6em;
}

.title-search-button {
    top: 0;
    left: 0;
}

.title-menu-button {
    top: 0;
    right: 0;
}

.title-bar .logo {
    position: absolute;
    width: 180px;
	left: 50%;
    right: 50%;
    top: 11px;
    margin-left: -90px;
}

.title-bar a, .title-bar a:link, .title-bar a:visited, .title-bar a:active {
    color: #eee;
    font-weight: bold;
}

.title-bar a:hover {
    color: #ccc;
}



/* ------------------------------  OFF-CANVAS MENU ------------------------------ */


.off-canvas-wrapper {
    background-color: #222;
}

.off-canvas {
    background-color: #222;
    color: #fff;
}

.off-canvas li.section-heading {
    text-transform: uppercase;
    font-size: .8em;
    font-weight: bold;
    color: #777;
    text-align: center;
    padding: 1em;
    background-color: #111;
    margin-bottom: 1em;
}

.off-canvas ul {
   /* border-bottom: 1px dashed rgba(255,255,255,0.5);*/
   padding: 0 0 1em;
}

.off-canvas a, .off-canvas a:link, .off-canvas a:visited, .off-canvas a:hover {
    color: #eee;
    text-decoration: none;
}

.off-canvas a:active {
    color: #F3CD00;
}

.off-canvas a:hover {
    text-decoration: underline;
    color: #fff;
}





/* ------------------------------  MODAL REVEAL WINDOWS ------------------------------ */

.reveal {
    padding: 2em;
}

.reveal h3{
    text-transform: uppercase;
}

.reveal p {
    font-family: 'Georgia', serif;
}


/* ------------------------------  SEARCH BOX ------------------------------ */
#searchBox {
    padding: 1em 1em 2em; 
}

#searchBox h5 {
    margin: 0 0 .25em;
    padding: 0;
    text-transform: uppercase;
    font-size: 1.8em;
    font-weight: bold;
}



/* ------------------------------  LISTINGS ------------------------------ */


body.index h1, body.utility h1 {
    padding: 1em 0;
}

.listing-wrapper {
    border-top: 1px dashed #ccc;
}

.article-listing {
    border-bottom: 1px dashed #ccc;
    padding: 1em 0;
}

.article-listing .date {
    color: #777;
    font-weight: 500;
    font-size: .8em;
    margin-top: 0;
}

.article-listing .title {
    color: #111;
    font-weight: bold;
    font-size: 1.3em;
    line-height: 1em;
    margin: .5em 0;
}

.article-listing .title a, .article-listing .title a:link, .article-listing .title a:visited {
    color: #111;
}

.article-listing .title a, .article-listing .title a:link, .article-listing .title a:visited {
    text-decoration: none;
}

.article-listing .title a:hover {
    color: #000;
    text-decoration: underline;
}

.article-listing .title a:active {
   color: #97252B;
}

.article-listing .description {
    color: #555;
    font-size: .9em;
    line-height: 1.2em;
}

.article-listing .article-meta-info {
    font-size: .8em;
    color: #777;
}

.article-listing .article-meta-info a, .article-listing .article-meta-info a:link {
    color: #777;
}

.article-listing .article-meta-info a:hover {
    color: #777;
    text-decoration: underline;
}

.article-listing .article-meta-info a:active {
    color: #97252B;
}

.article-listing .article-meta-info li {
    line-height: 1.1em;
    margin: .5em 0 .8em;
}

.article-listing i {
    display: inline-block;
    padding-right: .5em;
    text-align: right;
}


/* This makes profile feature images into landscape, on list pages */

.thumbnail-image {
  position: relative;
  overflow: hidden;
}
.thumbnail-image img {
  position: absolute;
  left: 50%;
  top: 120%;
  height: 260%;
  width: auto;
  -webkit-transform: translate(-50%,-50%);
  -ms-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
}
.thumbnail-image img.portrait {
  width: 100%;
  height: auto;
}





/* ------------------------------  TEXT and FONTS ------------------------------ */


/* Headings */

h1, h2, h3, h4, h5, h6, a, p, span, form, label, ul.no-bullet, li.section-heading {
    font-family: 'Gotham SSm A', 'Gotham SSm B', Gotham, Gotham-Book, 'Gotham-Book', sans-serif;
}
h1, h2, h3, h4, h5, h6 {
    font-weight: bold;
    line-height: 1.2em;
}

h1 {
    text-align: center;
}

h2 {
    text-transform: uppercase;
    color: rgba(0,0,0,.5);
    margin-top: 2em;
    margin-bottom: 1em;
}

/* Links */

a {
    color: #97252B;
    text-decoration: underline;
}
a:link {
	color: #97252B;
text-decoration: underline;
}
a:hover {
	color: #C2002F;
text-decoration: underline;
}
a:active {
	color: #F3CD00;
text-decoration: underline;
}

/* Lists */

ul {
    padding-left: 1.5em;
    font-family: 'Georgia', serif;
    }
    
ul.li {
    font-family: 'Georgia', serif;
    }

.ruled {
    border-top: 1px solid #ccc;
}
ul.ruled li {
	border-bottom: 1px solid #ccc;
	padding: 1em;
}


/* Buttons */

.button {
    text-transform: uppercase;
    text-decoration: none;
    font-weight: bold;
    font-size: .9em;
    box-shadow: 0 0 5px rgba(0,0,0,.2);
}


.button:hover {
    background-color: #2199e8;
    border-color: #2199e8;
    color: #fff;
}

.button.round {
    border-radius: 50px;
}

.standard header .button.hollow:hover {
    background-color: #2199e8;
    border-color: #2199e8;
    color: #fff;
    text-decoration: none;
}



/* ------------------------------  COLORS ------------------------------ */

.white-background {
    background-color: #fff;
    color: #333;
}

.light-gray-background {
    background-color: #eee;
    color: #333;
}

.dark-gray-background {
    background-color: #333;
    color: #fff;
}

.black-background {
    background-color: #000;
    color: #fff;
}

.green-background {
    background-color: #A2D683;
}

.blue-background {
    background-color: #71B1C8;
}

.maroon-background {
    background-color: #97252B;
    color: #fff;
}

.red-background {
    background-color: #C2002F;
    color: #fff;
}

.maroon-text {
    color: #97252B;
}

.yellow-background {
    background-color: #F3CD00;
    color: #333;
}

.yellow-text {
    color: #F3CD00;
}

.red-text {
    color: #C2002F;
}

.green-text {
    color: #A2D683;
}

.blue-text {
    color: #71B1C8;
}



/* ------------------------------  ARTICLE BODY ------------------------------ */

.article-body {
    margin-bottom: 5em;
}


.article-body p, .article-body p.lead {
    font-family: 'Georgia', serif;
}

.article-body a {
    font-family: inherit;
}

.article-body p {
    font-size: 1.1em;
}

.article-body h2, .article-body h3, .article-body h4, .article-body h5, .article-body h6 {
        text-transform: uppercase;
        max-width: 700px;
        margin: 2em auto .5em;
    }
 
.article-body hr {
    max-width: 700px;
    margin: 2em auto;
}

.article-body ul {
    max-width: 700px;
    margin: 1em auto;
}

.article-body ol {
    max-width: 660px;
    margin: 1em auto;
}



/* ------------------------------  FIGURES and FIGCAPTIONS ------------------------------ */

figure {
    width: 100%;
    margin: 2em 0;
    clear: both;
}

figure img {
    width: 100%;
    margin: 0;
    padding: 0;
}

.article-body figure.full h3.text-center {
    width: 100%;
    min-width: 100%;
}

figcaption {
	margin-top: .5em;
	line-height: 1.1em;
}
figcaption .caption, figcaption .attribution {
	font-family: 'Georgia', serif;
	line-height: 1.5em;
	margin-top: .5em;
}
figcaption .caption {
	color: #555;
	font-size: .8em;
}
figcaption .attribution {
	color: #777;
	font-size: .7em;
}
figcaption.text-right {
    margin-right: 1em;
}


.figure-wrapper {
    padding: 2em 1em 1em;
}

.figure-wrapper h3 {
    /*min-width: 100%;*/
    margin-top: 0;
}

/* ------------------------------  BLOCKQUOTES ------------------------------ */

blockquote {
    font-family: 'Gotham SSm A', 'Gotham SSm B', Gotham, Gotham-Book, 'Gotham-Book', sans-serif;
    font-weight: bold;
    color: #111;
    font-size: 1.1em;
    border-left: none;
    border-top: 1em solid #F3CD00;
    padding: 1em 0 0 0;
    margin: 2em 1em;
}

blockquote cite {
	margin-top: 2em;
	font-style: normal;
    font-weight: normal;
	font-size: .7em;
	text-transform: uppercase;
	color: #666;
}




/* ------------------------------  FORMS ------------------------------ */

legend {
    text-transform: uppercase;
    font-weight: bold;
}

legend.radio-label {
    text-transform: none;
    font-weight: normal;
    font-size: .9rem;
}



/* ------------------------------  ARTICLE HEADER AND BANNER  ------------------------------ */


article.feature header {
    position: relative;
    background: no-repeat center center;
    background-size: cover;
}

article.feature .headlines{
    padding-bottom: 2em;
}

article.standard header figure.right {
    margin-top: 2em;
}

article.standard header figure.center, article.standard header figure.full {
    margin-top: 1em;
    margin-bottom: 3em;
}

article.standard .headlines {
        margin: 1em;
    }
    
.headlines span {
    display: block;
}

.headlines {
     text-align: center;
     margin: 0;
     padding: 3em 0 1em;
}


.feature .headlines {
    width: 100%;
    padding: 10em 1em 3em;
}

.headlines.dark-background {
    color: #fff;
    text-shadow: 0px 0px 7px rgba(0,0,0,.6);
    background: -webkit-linear-gradient(bottom, rgba(0,0,0,0), rgba(0,0,0,.5));
    background: -o-linear-gradient(bottom, rgba(0,0,0,0), rgba(0,0,0,.5));
	background: -moz-linear-gradient(bottom, rgba(0,0,0,0), rgba(0,0,0,.5));
	background: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,.5));
}

.headlines.dark-background {
    color: #000; 
}

.headlines.dark-background h1 {
    color: #fff; 
}

.headlines.dark-background .subheader {
	color: #fff;
}

.headlines.light-background .subheader {
    color: #000;
}

.feature .headlines.dark-background .overline {
	color: rgba(255,255,255,.6);
}

.feature .headlines.light-background .overline {
    color: rgba(0,0,0,.6);
}


.dark-background a.button {
    border: 2px solid #fff;
	color: #fff;
	font-weight: 800;
	text-transform: uppercase;
	text-shadow: none;
    text-decoration: none;
}

.dark-background a.button:hover {
	color: #111;
	background-color: #fff;
	border-color: #fff;
	text-decoration: none;
}

.headlines .light-background {
    color: #000;
}

.headlines .overline {
    color: #777;
    display: block;
	font-family: 'Gotham SSm A', 'Gotham SSm B', Gotham, Gotham-Book, 'Gotham-Book', sans-serif;
	font-weight: 800;
	font-size: .8em;
	text-transform: uppercase;
    margin-bottom: 2em;
}

.headlines h1 {
	font-weight: bold;
    color: #000;
	font-family: 'Gotham SSm A', 'Gotham SSm B', Gotham, Gotham-Book, 'Gotham-Book', sans-serif;
	font-style: normal;
    margin-top: .5em;
}

.headlines .button {
    margin: 1em 0;
}

.headlines button {
    display: block;
}

.headlines .subheader {
	text-transform: uppercase;
	margin: 1em auto 2em;
    text-align: center;
    display: block;
    max-width: 930px;
}

.hero-caption {
    font-family: 'Georgia', serif;
    text-align: right;
    line-height: 1.1em;
    margin-top: .5em;
    margin-right: 1em;
}

.hero-caption .caption {
    font-family: 'Georgia', serif;
    color: #555;
    font-size: .8em;
}

.hero-caption .attribution {
    font-family: 'Georgia', serif;
	color: #777;
	font-size: .7em;
}

/* ------------------------------  BYLINE and DATELINE ------------------------------ */

.byline-dateline {
    color: #fff;
    margin: 3em 0 4em;
	font-size: .8em;
}
.byline-dateline .byline, .byline-dateline .dateline {
	text-transform: uppercase;
	font-weight: bold;
}

.byline-dateline span {
    display: inline-block;
}

/* ------------------------------  METADATA COLUMN ------------------------------ */


.metadata ul {
    margin: -2em 0 0;
    padding: 0 0 1em;
    border-bottom: 1px dashed #ccc;
    font-size: .9em;
}

.metadata ul li {
	margin-bottom: 1em;
}

.metadata a, .metadata a:link {
    text-decoration: none;
}

.metadata a:hover, .metadata a:active {
    text-decoration: underline;
}



/* Icons and Social Buttons*/

    ul.share-buttons {
        border: none;
        margin-top: 1em;
    }
    
    ul.share-buttons li {
        font-size: 1.8em;
        display: inline;
        margin: 0 .5em 0 0;
    }
    
    .fb-share-button {
        padding: 0;
        margin: 0;
        line-height: .8em; 
    }


/* ------------------------------  BIO ------------------------------ */

.bio {
    font-family: 'Gotham SSm A', 'Gotham SSm B', Gotham, Gotham-Book, 'Gotham-Book', sans-serif;
    max-width: 700px;
    margin: 3em auto 0;
    border-top: 1px dashed #ccc;
    padding: 1.5em;
    padding-left: 0;
    clear: both;
}

.bio ul {
    padding-left: 0;
}

.bio ul li {
    font-family: 'Gotham SSm A', 'Gotham SSm B', Gotham, Gotham-Book, 'Gotham-Book', sans-serif;
    line-height: 1.1em; 
    margin-bottom: 1em;
}



/* ------------------------------  RELATED STORIES ------------------------------ */

#related-stories {
    margin-top: 4em;
    padding-top: 4em;
    border-top: 1px solid #ccc;
    clear: both;
}




/* ------------------------------  COMMENTS ------------------------------ */

#comments {
    border-top: 1px solid #eee;
    margin-top: 6em;
    padding: 4em 0;
    background-color: #f7f7f7;
    clear: both;
}


/* ------------------------------  FOOTER ------------------------------ */


footer {
    clear: both;
}

footer h2 {
    color: #111;
	font-size: 1.3em;
}

footer h3 {
    font-size: 1.2em;
}

footer #upper {
    padding: 2em 1em;
	background-color: #eee;
}

footer #middle {
	background-color: #333;
	color: #ddd;
	padding: 3em 0;
	font-size: .9em;
}
footer #middle a, footer #middle a:link, footer #middle a:visited {
	color: #F3CD00;
	text-decoration: none;
}
footer #middle a:hover, footer #middle a:active {
	color: #F3CD00;
	text-decoration: underline;
}
footer #middle i {
	margin: 0 .5em 0 0;
}
footer #lower {
	background-color: #111;
	padding: 3em 0;
}
footer #lower .logo {
	margin: 0 0 1em;
}
footer #lower p {
	text-align: center;
	color: #bbb;
	font-size: .7em;
}
footer #lower a, footer #lower a:link, footer #lower a:visited, footer #lower a:hover, footer #lower a:active {
	color: #bbb;
}

footer #directors-desk p {
    font-family: 'Georgia', serif;
    font-size: 1.1em;
    color: #222;
}

footer #middle a.button {
    color: #fff;
}

footer #middle a.button:link, footer a.button:visited, footer a.button:hover, footer a.button:active {
    color: #fff;
}


/* ------------------ ISOTOPE ----------------------- */

.isotope:after {
    content: '';
	display: block;
	clear: both;
}
.element-item {
	position: relative;
	display: block;
	float: left;
	padding: 10px;
}

.element-item > * {
	margin: 0;
	padding: 0;
}
.element-item p {
	margin-bottom: 1em;
}
.filter_button {
	display: inline-block;
	color: #999;
	background-color: #fff;
	font-weight: 800;
	padding: .8em;
	border: 2px solid #999;
	margin: .5em .25em;
	border-radius: 25px;
}
.filter_button:hover {
	background-color: #999;
	color: #fff;
}
.filter_button:active, .filter_button.is-checked {
	background-color: #999;
}
.filter_button.is-checked {
	color: white;
}
.filter_button:active {
	background-color: #666;
}

.article-card {
    font-family: 'Gotham SSm A', 'Gotham SSm B', Gotham, Gotham-Book, 'Gotham-Book', sans-serif;
	text-align: center;
}
.article-card img {
	width: 100%;
}
.article-card p {
	font-size: .8em;
}
.article-card a, .article-card a:link, .article-card a:hover, .article-card a:active {
	text-decoration: none;
	display: block;
}
.article-card a h3 {
	font-family: 'Gotham SSm A', 'Gotham SSm B', Gotham, Gotham-Book, 'Gotham-Book', sans-serif;
	font-weight: bold;
	margin: 1em 0 .3em;
	color: #222;
	line-height: 1.2em;
}
.article-card a:hover h3 {
	color: #111;
	text-decoration: underline;
}
.article-card a:hover p {
	color: #444;
}
.article-card a p {
	font-family: 'Gotham SSm A', 'Gotham SSm B', Gotham, Gotham-Book, 'Gotham-Book', sans-serif;
	color: #777;
}




/* ------------------------------  MEDIA QUERIES ------------------------------ */

/* Small only */
@media screen and (max-width: 39.9375em) {

h1 {
    font-size: 200%;
}

    figure {
        margin-left: 0; /* resets an inherited style that pushes figures to the right, on small*/
    }
    
    figure .columns {
        margin-bottom: 1em;
    }
    
    figcaption.text-right {
        text-align: left;
        margin-left: 1em;
}
    

    .metadata {
    margin-left: -1em;
    margin-right: -1em;
    }
    
    .metadata ul {
    padding-top: 1em;
    }

}
     
     
     
/* Medium and up */
@media screen and (min-width: 40em) {
    
    blockquote {
        max-width: 20%;
        min-width: 300px;
    }
 
    blockquote.left, figure.left {
        float: left;
        margin-right: 2em;
    }
    
    blockquote.right, figure.right {
        float: right;
        margin-left: 2em;
    }
    
    figure.left, figure.right {
        margin-top: 0;
    }
    
    blockquote.justify {
        max-width: 600px;
        margin: 3em auto;
    }
    
    figure.justify, figure.center {
        max-width: 700px;
        margin: 3em auto;
    }
    
    figure h3 {
        font-size: 1.5em;
    }

    figure.justify figcaption {
        text-align: right;
    }
    
    figure.full figcaption {
        text-align: right;
    } 
    
    figure.full-width figcaption {
        text-align: right;
        margin-right: 1em;
    } 
    
    figure.portrait {
        min-width: 300px;
        max-width: 25%;
    }

    figure.landscape {
        min-width: 300px;
        max-width: 30%;   
    }  

   .article-card h3 {
      font-size: 1.1em;
  }
    
    article.feature .wrapper {
        margin-top: 5em;
    }
    
    article.standard .wrapper {
        margin-top: 2em;
    }
    
    header figure.portrait img,  header figure.landscape img {
        margin-top: -1.5em;
    }
    
    .standard header .full figcaption {
      text-align: right;
      margin-right: 1em;
}
    
    .figure-wrapper {
        padding: 2em 2em 1em;
    }
    
    .wrapper p {
        max-width: 700px;
        margin: 0 auto 1.5em;
    }
    
    .metadata ul {
        padding: 0;
        margin-left: -2em;
    }
    .wrapper h1 {
        max-width: 1200px;
        margin: 0 auto;
    }
 
    header .full {
        max-width: 1200px;
        margin: 0 auto ;
        /*
        margin-top: 0;
        margin-bottom: 0;
        padding-top: 0;
        padding-bottom: 0;*/
    }
    
    header .full figcaption {
        margin-right: 1em;
    }

    .metadata ul {
    border-left: 1px dashed #ccc;
    border-top: none;
    border-bottom: none;
    padding-left: 2em;
}

    ul.share-buttons {
        border: none;
    }
    
    
 
}
      
      
      
/* Medium only */
@media screen and (min-width: 40em) and (max-width: 63.9375em) {

}
      
      
      
/* Large and up */
@media screen and (min-width: 64em) {
  
  
  
   blockquote.left, figure.left {
        margin-left: 5%;
    }
    
    blockquote.right, figure.right {
        margin-right: 5%;
    }
    
    figure h3 {
        font-size: 1.8em;
    }

    figure.full figcaption {
        margin-right: 1em;
    }
    
    figure.full h3 {
    text-align: center;
}
  
  .article-card.feature h3 {
      font-size: 1.8em;
  }
  
  .element-item {
    min-height: 300px;  /* keeps isotope cards from collapsing */
}
  

  .article-card h3 {
      font-size: 1.3em;
  }

   .feature .wrapper, .standard .wrapper {
        margin-right: 0;
        margin-left: 0;
    }
  
  .feature .article-body p.lead {
    font-size: 1.5em;
    margin-bottom: 1.5em;
	color: #555;
}

    p.lead {
    color: #444;
    font-size: 1.5em;
}
    
    
.feature header {
    height: 75vh;
    min-height: 600px;
}

article.feature .headlines {
    position: absolute;
    bottom: 0;
}

footer #upper {
    padding-top: 3em;
}

footer h2 {
    margin-top: 0;
    padding-top: 0;
}

#directors-desk {
    padding-right: 2em;
}

#letters-to-the-editor {
    border-left: 1px solid #ccc;
	padding-left: 2em;
}



  
} 



  
/* Large only */
@media screen and (min-width: 64em) and (max-width: 74.9375em) {

}





/* X-Large and up */
@media screen and (min-width: 75em) {


    blockquote.left, figure.left {
        margin-left: 15%;
    }
    
    blockquote.right, figure.right {
        margin-right: 15%;
    }
    
    figure.portrait {
        max-width: 20%;
    }

    .feature h1 {
    font-size: 450%;
    }
 

    
}



/* ------------------------------  UTILITIES & FIXES ------------------------------ */
  
.large-text {
    font-size: 2em;
}  
  
.x-large-text {
    font-size: 3em;
}

.spaced {
    margin: 2em auto;
}

.spaced-more {
    margin: 3em auto;
}

.spaced-most {
    margin: 4em auto;
}

.off-canvas-content { /* Fixes a double-scroll bar issue that appeared at certain screen sizes*/
    overflow: hidden;
}

.wrapper {
    margin: 0 1em;
}

.secondary {
    background-color: #eee;
}

img.expand {
    width: 100%;
}

h2.first {
    margin-top: 1em;
}

.lowercase {
    text-transform: lowercase;
}