/* NASA Advanced Supercomputing Division */
/* NAS Web Refresh Stylesheet */ 
/* Partially built on html5 boilerplate defaults */
/* john.hardman@nasa.gov */
/* updated: 12-09-24 */


/*! HTML5 Boilerplate v8.0.0 | MIT License | https://html5boilerplate.com/ */
/* main.css 2.1.0 | MIT License | https://github.com/h5bp/main.css#readme */


/* ==========================================================================
   Base styles: opinionated defaults
   ========================================================================== */

html {
  font-size: 100%; /* 16px */
  line-height: normal;
}

/*
Image stuff for responsiveness and loading
*/

img {
  height: auto; 
  max-width: 100%;
}

main img {
  content-visibility: auto;
}

/*
 * Remove text-shadow in selection highlight:
 * https://twitter.com/miketaylr/status/12228805301
 *
 * Vendor-prefixed and regular ::selection selectors cannot be combined:
 * https://stackoverflow.com/a/16982510/7133471
 *
 * Customize the background color to match your design.
 */

::-moz-selection {
  background: #b3d4fc;
  text-shadow: none;
}

::selection {
  background: #b3d4fc;
  text-shadow: none;
}

/*
 * A better looking default horizontal rule
 */

hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid #ccc;
  margin: 1em 0;
  padding: 0;
}

/*
 * Remove the gap between audio, canvas, iframes,
 * images, videos and the bottom of their containers:
 * https://github.com/h5bp/html5-boilerplate/issues/440
 */

audio,
canvas,
iframe,
img,
svg,
video {
  vertical-align: middle;
}

/*
 * Remove default fieldset styles.
 */

fieldset {
  border: 0;
  margin: 0;
  padding: 0;
}

/*
 * Allow only vertical resizing of textareas.
 */

textarea {
  resize: vertical;
}

/* ==========================================================================
   NAS Base Styles
   ========================================================================== */

/* 
Page background: #d0d0d0 (fallback for honeycomb pattern)
Content area background: #fffffd

Footer background: #525252
Footer text: #fcfcfc
Footer link: #d2e4ff
Footer visited: #f6dbff
New NAS Blue: #08599a   
New NAS Green: #398000

Fonts and Weights:
Lato: normal and italic 300, 400, 700
(most body text)

Open Sans: normal and italic 300, 400, 600
(menus and image captions)

Roboto: normal and italic 500, 700
(most headlines)

Michroma: only one style/weight
(HECC logo)

 */

:root {
    
    
}

body {
  background: #d0d0d0 url("/assets/nas/images/template/honeycomb_background.png") repeat fixed;
  color: #222;
  font-family: 'Lato', sans-serif;
  font-weight: 400;
  line-height: 1.4;
  margin: 2.5rem;
  min-height: 100vh;
}

p {
  margin-bottom: 1rem;
}

h1, h2, h3, h4, h5 {
  color: #08599a;   
  font-family: 'Roboto', sans-serif;  
  font-weight: 500;
  line-height: 1.3;
  margin: 0;
}

h1 {
  margin-top: 1em;
  font-size: 1.3rem;
    /*font-size: clamp(1.3rem, 1.5rem, 2rem);*/
}

h2 {font-size: 1.296rem;}

h3 {font-size: 1.215rem;}

h4 {font-size: 1.138rem;}

h5 {font-size: 1.067rem;}

small, .text_small {font-size: 0.937rem;}

.text-xsmall {font-size: 0.675rem;} 


aside h2 {font-size: 1.296rem;}
aside h3 {font-size: 1.215rem;}

/* New bigger headlines for Piyush */   
    
    

    
    
    
    
    
/* ==========================================================================
   CSS Grid and FlexBox for Template Layout
   ========================================================================== 
*/


#container {
  display: flex;
  flex-direction: column;
  margin: 0 auto;
  max-width: 88rem;
  min-height: 100vh;
}


@media (min-width: 768px) {
    
body:not(.one-column) #container {
    display: grid;
        grid-gap: 0;
    grid-template-columns: 1fr minmax(11rem, 22rem);
        grid-template-columns: minmax(min(50vw, 30ch), 1fr) minmax(28ch, 38ch) ;
        grid-template-rows: 6.25rem 2.5rem auto 2.5rem auto;
        max-width: 88rem;   
  }
    
    #page-header {
      grid-column: span 2;
      }
    #site-nav { 
     grid-column: span 2;
      }
    #main { 
           
      }
    #sidebar { 
     
      }
    #secondary-nav { 
      grid-column: span 2;
      }   
    #page-footer {
      grid-column: span 2;
      } 
    #hecc {
            grid-column: span 2;
        }   
            
        
    
    
    
    
    
}

    

#page-header {
    
  display: grid;
  grid-template-areas: 
  "banner banner banner search";
  grid-template-rows: auto;  
  grid-template-columns: repeat( 4, minmax(150px, 1fr) );
  grid-row-gap: 0;
  grid-column-gap: 0; 
}
.bannerblock {
  grid-area: banner;
  
  align-self: center;
  justify-self: start;
}
.searchbox {
  grid-area: search;
  
  align-self: start;
  justify-self: end;
}

.searchbox .gsc-control-searchbox-only {
   /*  background: red; */
    margin-top: 1rem;
   /*  padding: 0.25rem; */
   border: none;
}

.searchbox .gsc-control-searchbox-only table,  .searchbox .gsc-control-searchbox-only table .gsib_a {
    /* background: blue; */
    margin: 0;
    padding: 0;

}

.searchbox .gsc-control-searchbox-only .gsc-input-box .gsc-input {
   /*  background: purple; */
    height: 1rem !important;
    margin-top: 0;
    padding: 0;

}

.searchbox .gsc-control-searchbox-only .gsc-input-box input.gsc-input:focus {
    /* background: green; */
    height: 1rem !important;
    margin-top: 2rem;
    padding: 0;

}

.searchbox .gsc-control-searchbox-only .gsc-input-box input[type="text"] {
    font-size: 14px;
    width: 300px;
}

.searchbox td.gsib_b {
    display: none !important;
}

.searchbox td.gsib_a {
    min-width: 100px;
    width: 150px;
}

button.gsc-search-button {
    background-color:  hsl(96.7 100% 28.2% / 0.8) !important;
    width: 25px !important;
}


/* 
.searchbox .gcse-searchbox-only {
    margin-top: 1rem;
}
 */

#page-footer {
  display: grid;
  grid-template-areas: 
  "legal . . peeps";
  grid-template-rows: auto;  
  grid-template-columns: repeat( 4, minmax(150px, 1fr) );
  grid-row-gap: 0;
  grid-column-gap: 0;
}  
  
  .credits {
    grid-area: peeps;
    justify-self: end;
    text-align: right;
  }



/* ==========================================================================
   Design for Template Elements
   ========================================================================== */
    
    
    

    h1, #sidebar h2 {
    margin-left: inherit;
    }
    

#container {
  background: #fffffd;
  border: 1px solid #333;  
  box-shadow: 0 0 20px rgba(115,115,115,0.65); 

}

#container > * {
  margin:0; 
  padding: 1.5rem 2.5rem;
}

#main {
    margin-bottom: 3rem;    
    margin-top: 1rem;

}

#sidebar {
    margin-top: 1rem;   
}

#page-header {
  background: #fffffd url("../assets/nas/images/template/nas_banner_fade.png") no-repeat;
    background-position: top;
    background-size: cover;
  border-bottom: 3px solid #398000;     
}

.nasalogo {
  float: left;
  padding-right: 20px;
  vertical-align: middle;
  width: 80px;   
}

.bannerhead {
  color: #398000;
  font-family: 'Roboto', sans-serif;
  font-size: 2.35em;  
  font-style: normal;
  font-weight: 600;
  padding-top: 40px;
  vertical-align: middle;
}


.mission {
    display: none;
}

.homepage .mission {
    color: #306b00;
    display: block;
    font-family: 'Lato', sans-serif;
    font-size: 1.2rem;
    font-weight: 400;
    margin-top: -5px;
    text-shadow: 1px 1px 0 rgba(0, 0, 0, .125);
}

#toplinks {
    
    /*width: 24em; */
    margin: 0px 10px 0px 0px;
    padding-left:0;
    padding-right: 45px;
    color: #999;
    font-size: 0.6875rem;
    list-style-type: none;
    float:right;

}

#toplinks li {
    float: left;
    padding: 0 3px 0 11px;
}

#toplinks li.squared {
    float: left;
    background: transparent url(../assets/nas/images/template/square_bullet.png) center left no-repeat;
    
}

#toplinks a {
    color: #666;
    text-decoration: none;
}

#toplinks a:hover {
    text-decoration: underline;
}

#toplinks li:first-child {
    padding-left:0;
}

#toplinks li:last-child {
    padding-right:0;
}







#site-nav { 
  background: #323232;
    height: 2.5rem;
  margin:0;
  padding:0; 
    z-index: 100;
} 

#site-nav ul {
    font-family: 'Open Sans', sans-serif;
  font-size: 0.878rem; 
  font-weight: 500;
  margin: 0;
  padding: 0;   
  text-transform: uppercase;
    letter-spacing: 0.02rem;
    word-spacing: 0.2rem;
}

#site-nav .main-menu {
    display: none;
}

#tm:checked + .main-menu {
    display: block;
}

#site-nav input[type="checkbox"], #site-nav ul span.drop-icon {
    display: none;
}

#site-nav li, #toggle-menu, #site-nav .sub-menu {
    border-style: solid;
    border-color: rgba(57, 128, 0, 1);
}


#site-nav li, #toggle-menu {
    border-width: 0 0 1px;
}

#site-nav .sub-menu {
    background-color: #323232;
    border-width: 1px 1px 0;
    margin: 0 1em;

}

#site-nav .sub-menu li:last-child {
    border-width: 0;
}

#site-nav li, #toggle-menu, #site-nav a {
    background: #323232;
    position: relative;
    display: block;
    color: white;
    text-shadow: 1px 1px 0 rgba(0, 0, 0, .125);
    text-decoration: none;
}





#toggle-menu {
    background: #323232;
}

#toggle-menu, #site-nav a {
   padding: 0.72em 1.5em;
}

#site-nav a {
    transition: all .125s ease-in-out;
    -webkit-transition: all .125s ease-in-out;
}

#site-nav a:hover {
    background: rgba(57, 128, 0, 1);
    color: #fcfcfc;
}

#site-nav .sub-menu {

    display: none;
}

#site-nav input[type="checkbox"]:checked + .sub-menu {
    display: block;
}

#site-nav .sub-menu li a {
    background: #727272;
}

#site-nav .sub-menu a:hover {
    background: rgba(57, 128, 0, 1);
    color: #fcfcfc;
}


#site-nav   li.hecc-home a {
    color: #E9C149;
    }
#site-nav   li.hecc-home a:hover {
    background-color: #525252;
    }


#toggle-menu {
    font-weight: 600;
    margin-left:0;
    padding-left: 1.2rem;
    text-transform: uppercase;
}

#toggle-menu .drop-icon, #site-nav li label.drop-icon {
    position: absolute;
    right: 0;
    top: 0;
}

#site-nav label.drop-icon, #toggle-menu span.drop-icon {
    padding: 0.75em;
    font-size: 1em;
    text-align: center;
    background-color: rgba(57, 128, 0, 1);
    text-shadow: 0 0 0 transparent;
    color: rgba(255, 255, 255, 1);
}



#sidebar {
background-image: linear-gradient(#398000, #398000);
background-size: 2px calc(100% - 4rem);
background-repeat: no-repeat;
background-position: left 2rem;
}

#sidebar section::after {
    content: url("../assets/nas/images/template/sidebox_divider.png");
    bottom: 0;
    left: 40%;
    position: relative;
    text-align: center;
}



#secondary-nav {
    margin:0;
    padding:0;
  background: #323232; 
 
}


html.no-js #secondary-nav ul li.jslink {display:none !important;}
html.js #secondary-nav ul li.noscript {display:none !important;}

#secondary-nav ul{
  background:#323232;   
  display: flex;
  flex-direction:row;
  height: 100%;
  justify-content: flex-start;      
  list-style-type: none;
  margin:0;
  padding:0;
}
#secondary-nav ul li {
  border-right: 1px solid #929292;  
  flex:initial;
    font-family: 'Open Sans', sans-serif;
  font-size: 0.878rem; 
  font-weight: 500;
  text-align: center;
  text-transform: uppercase;
}
#secondary-nav ul li a{
  color:#fcfcfc;
  display: block;
  padding: 0.8rem 2rem;
  text-decoration: none;
}
#secondary-nav ul li a:hover {
  background: rgba(57, 128, 0, 1);
}



#page-footer {
  background: #525252;  
  color: #fcfcfc;
  font-size: 0.675rem;
  line-height: 1.7;
}  
  
#page-footer a:link {
  color: #d2e4ff;
} 

#page-footer a:visited, #page-footer a:active {
  color: #f6dbff;
} 

#page-footer address {
    font-style: normal;
}
  
.legal img {
  float: left;  
  margin: 0 1rem 1rem 0;
} 



/* For home page only */

.hecc-banner {
    display: flex;
    flex-direction: row;
}

.hecc-banner {
  background-image: url("/assets/nas/images/template/nas_refresh_hecc_banner_background.jpg");      
  border: none; 
    color: #fcfcfc; 
    display: grid;
    font-size: 0.875rem;
  grid-gap-columns: 1rem;
    grid-gap-rows: 0;
    grid-template-columns: repeat(auto-fit, minmax(200px,1fr));
    grid-template-rows: 8rem;
    line-height: 1.4;
    margin: 0;
    padding: 0;
    }
    

.hecc-banner h2 {
  color: #e2b01c;   
  font-family: 'Michroma', sans-serif;
  font-size: 1.8em; 
  font-style: normal;
  letter-spacing: 0.1em;
  line-height: 1.3;
  padding-left: 10px;   
  text-transform: uppercase;
}

.hecc-banner h3 {
    margin-top: 0;
    margin-bottom: 0.25rem;
    color: #e2b01c;
}

.hecc-banner > div {
  align-self: start;    
  border: none;
  flex-grow: 1;     
  justify-self: start;
  margin-bottom: 1rem;
  padding-top:0;
}

.hecc-banner .hecc-title {
  align-self: center;
}

.hecc-banner .hecc-image {
    justify-self: center;
}

.hecc-banner .hecc-image img {
  border: 1px solid #e2b01c;    
  width: 60%;
}

.hecc-banner a {
  color: #D2E4FF;
} 




/* ==========================================================================
   Design for Other Elements
   ========================================================================== */

.npb-pages header {
  display: flex;
  flex-direction: column;
}
.npb-pages header .subtitle {
  color: #398000;
  order: -1;
}



ul.no-bullets {
  list-style-type: none;
  margin: 0;
  padding: 0;
}




/* Styles for  link markers */

a.readlink {
    text-decoration: underline;
}

#main a.nasalink, #sidebar a.nasalink {
    background: url(/assets/nas/images/template/nasa_site_icon.png) center right no-repeat;
    padding-right: 1rem;
}

#main a.externallink, #sidebar a.externallink {
    background: url(/assets/nas/images/template/external_site_icon.png) center right no-repeat;
    padding-right: 1rem;
}



/**** Data Table Styles ***/

table {
  border-collapse: collapse;
    border-spacing:0;
  font-size : 0.875rem;  
    /*min-width: 37rem;*/
    max-width: 100%;
}
  
td, th {
  border: 1px solid #ccc;
  padding: .5em 1.2em;
}

thead th {
    background-color: #323232;
    border-right: 1px solid #999;
    color: #fcfcfc;
    font-weight: normal;
    padding: 5px 0;  
        padding: .5em 1.2em;
    text-align: center;
}

tbody {
        font-size: 0.8125;  
}

table caption {
    font-size: 1rem;
    font-weight: 600;
    margin-top: 15px;           
    padding: 15px 0;
}



/* Horizontal scroll tables that won't chunkify well */

table.scrollify {
  display: block;
  max-width: -moz-fit-content;
  max-width: fit-content;
    max-width: 100%;
  margin: 0 auto;
  overflow-x: auto;
  white-space: nowrap;
}

table.scrollify caption {
    font-size: 0.875rem;
    font-weight: 600;
    margin-top: 1rem;           
    padding: 1rem 0;
}



/* Styling for specific tables */

#NPBversions tr td:nth-child(1) {
    width: 20%;
}

#NPBSize1, #NPBSize2  {
    font-size: 0.75rem;
    font-size: 0.6875rem;
    min-width: 400px;
    max-width: 1300px;
    margin-top: 2rem;
}

#NPBSize1 td, #NPBSize1 th {
padding: 0.25em 0.5em;
}
#NPBSize1 th td:nth-of-type(-n+1), #NPBSize1 tr td:nth-of-type(-n+1) {
    max-width: 5rem;

}


/* Chunkify table rows for small screens */

@media screen and (max-width: 600px) {
  table.chunkify {
    border: 0;
        width: 100%;
        min-width: 10rem;
  }

  table.chunkify caption {
    font-size: 0.8125rem;
  }
  
  table.chunkify thead {
    border: none;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
  }
  
  table.chunkify tr {
    border-bottom: 2px solid #525252;
    border-top: 1px solid #525252;
    display: block;
    margin-bottom: .8125em;
  }
  
  table.chunkify td {
    border-bottom: 1px solid #ddd;
    display: block;
    font-size: .8em;
    text-align: right;
  }
  
  table.chunkify td::before {
    content: attr(data-label);
    float: left;
    font-weight: bold;
    text-transform: uppercase;
  }
  
  table.chunkify td:last-child {
    border-bottom: 0;
  }
    
    #NPBversions tr td:nth-child(1) {
        width: inherit;
    }
    
}



#main article ul li::marker {
    color: #398000;
}

details+details {
    margin-top: 1rem;
}

details summary { 
  cursor: pointer;  
}

details p {
    margin: 0;
}

details summary[aria-level="2"] {
  color: #08599a;   
  font-family: 'Roboto', sans-serif; 
  font-size: 1.296rem; 
  font-weight: 500; 
  line-height: 1.3; 
  margin: 0;    
}

details summary[aria-level="3"] {
  color: #08599a;   
  font-family: 'Roboto', sans-serif; 
  font-size: 1.215rem; 
  font-weight: 500; 
  line-height: 1.2; 
  margin: 0;    
}



/* Staff Pages */

body.staff-pages #main article ul.no-bullets li+li  {
    margin-top: 0.2rem;
}


/* Papers and Reports Pages*/

.papers-reports header h2 {
    font-size: 1.215rem;
    margin-bottom: 0.25rem;
}

.papers-reports header .authors {
    margin-top: 0;
    font-style: italic;
}

.papers-reports cite {
    margin-top: 0.5rem;
}

#sidebar ul.list-cols {
    display:grid;  
    font-size: 0.937rem;
    grid-gap:10px;
  grid-template-columns:repeat(auto-fit, minmax(4rem , 1fr));
    margin-top:1.2rem;
    text-align: center;
}

#sidebar ul.list-cols li:first-of-type {
    

    margin-top: 17px;

}


/* Software Page */

body.software details:first-of-type {
    margin-top: 1rem;
}

body.software details + details {
    margin-top: 0.5rem;
}


/* Supercomputing pages sidebar */

.hecc-sidebar {
  display: flex;
  flex-direction: column;
/*  justify-content: center;
  align-items: center;*/
    background: inherit;
    border: 1px solid white;
    border-radius: 5px;
}

.hecc-sidebar header {
    background: #082b6a;
    background-image: url("/assets/nas/images/template/nas_refresh_hecc_banner_background.jpg");
    background-position: left -800px top 0 ;
    height: 140px;
    height: 100px; 
    background-size: ;
    border-radius: 5px;
    min-width:200px;
    max-width: 280px;
}

.hecc-sidebar h2 {
    font-family: 'Michroma', sans-serif;
    font-style: normal;
    text-align:center;
    text-transform: uppercase;
    font-size: 1.625rem;
    font-size: 1.25rem;
    line-height: 1.4;
    margin: 0;
    padding: 0.5rem 0;
    color: #e2b01c;
    color: gold;
}

.hecc-sidebar h3 {
    text-align:left;
    font-size: 1.375rem;
    margin-top: 1rem;
}


.hecc-sidebar ul li {
    text-align: left;
    padding: ;
    margin-left: 5px;
    font-size: 0.937rem;
    margin-top: 0;
}



/* SC Conferences page */

ul.sc-list {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  list-style-type: none;
}

ul.sc-list {
  display: grid;
  grid-gap: 0.7rem;
  grid-template-columns: repeat(auto-fill, minmax(275px, 1fr) ) ;
  margin: inherit 0;
  padding: 0;
}


ul.sc-list li {
  min-height: 18.75rem;
  margin: 1rem 1rem;
}

@supports (display: grid) {
  ul.sc-list li {
  margin: 0;
  }
}

.sc-card {
  background: #fff; 
    border: 1px solid silver;   
  box-shadow: 0 3px 7px -1px rgba(0, 0, 0, 0.1);    
  display: flex;
  flex-direction: column;
    font-size: 0.875rem;
  line-height: 1.4; 
  margin: 1rem auto;
  margin-bottom: 0;
  overflow: hidden;
  flex-grow: 0;
  flex-shrink: 0;
}


.sc-card a {
  border: 1px solid #669;
  margin: 2rem;
  padding: 0.5rem;
  background: #08599a;
  text-decoration: none;
  color: #fcfcfc;
}
.sc-card a:hover {
background: #398000;
  
}

.sc-card .card-block {
  height: 200px;    
  position: relative;
}

.sc-card .card-image {
    border-right: 1px solid silver;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-size: cover;
  background-position: center;
  transition: transform 0.2s;
}

.sc-card .card-text {
  padding: 1rem;
  background: #ccc;
  position: relative;
  text-align: center;
}

.sc-card .card-text h2 {
  font-size: 1rem;
    font-size: 1.625rem;
  font-weight: 500;
    line-height: 1;
  margin-top: 5px;
    margin-bottom:0;
}


.sc-card p {
  position: relative;
  margin: 0;
}
.sc-card p:nth-of-type(2) {
  margin-top: 1.25rem;
}




/* Story Listing pages */



.news-card {
  background: #fff; 
    border: 1px solid silver;   
  box-shadow: 0 3px 7px -1px rgba(0, 0, 0, 0.1);    
  display: flex;
  flex-direction: column;
    font-size: 0.878rem;
  line-height: 1.4; 
  margin: 1rem auto;
  margin-bottom: 2rem;
  overflow: hidden;
}

article.articles-list article:first-of-type {
    margin-top: 2rem;
}

.news-card {
  background: #fff; 
border: 1px solid silver; 
  box-shadow: 0 3px 7px -1px rgba(0, 0, 0, 0.1); 
  display: flex;
  flex-direction: column;
font-size: 0.875rem;
  line-height: 1.4; 
  margin: 1rem auto;
  margin-bottom: 2rem;
  overflow: hidden;
}

.eddy {
    font-style: italic;
}

.news-card a {
  color: inherit;
}
.news-card a:hover {
  color: #5ad67d;
}

.news-card .card-block {
  height: 150px; 
  position: relative;
}

.news-card .card-image {
border-right: 1px solid silver;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-size: cover;
  background-position: center;
  transition: transform 0.2s;
}

.news-card .card-text {
  padding: 1rem;
  background: #fff;
  position: relative;
}

.news-card .card-text h2 {
font-size: 1.215rem;
  font-weight: 500;
line-height: 1.2;
  margin-top: 5px;
margin-bottom:0;
}

.news-card time {
  color: #666;
  font-size: 0.75rem;
  margin:0;
  padding:0;
  text-transform: uppercase; 
}

.news-card .card-text .read-more, .news-card .card-text .watch-video, .news-card .card-text .visit-site, .news-card .card-text .listen-pod {
    font-size: 1rem;
  text-align: center;
}
.news-card .card-text .read-more a, .news-card .card-text .watch-video a, .news-card .card-text .visit-site a, .news-card .card-text .listen-pod a {
  display: inline-block;
  position: relative;
}

.news-card a > span { 
  position: absolute; left: -999em;
}

.news-card .read-more a:after {
  content: "Read More";
}

.news-card .watch-video a:after {
  content: "Play Video";
}

.news-card .card-text .visit-site a:after {
    content: "Visit Site";
}

.news-card .card-text .listen-pod a:after {
    content: "Listen to Podcast";
}

.news-card .card-text .read-more a:hover:after {
 /* margin-left: 5px;*/
  opacity: 1;
}
.news-card p {
  position: relative;
  margin: 1rem 0 0;
}
.news-card p:first-of-type {
  margin-top: 1.25rem;
}

.news-card:hover .details {
  left: 0%;
}

@media (min-width: 600px) {
    
  .news-card {
    flex-direction: row;
    max-width: 90%;
  }
  .news-card .card-block {
    flex-basis: 35%;
    height: auto;
  }
  .news-card .card-text {
    flex-basis: 65%;
  }
    
.news-card .card-text .read-more, .news-card .card-text .watch-video, .news-card .card-text .visit-site, .news-card .card-text .listen-pod {
  text-align: right;
}

  .articles-list article:nth-of-type(even) {
    flex-direction: row-reverse;
  }

}


/* News cards in archives with no pix */


  .news-card.old-news {
    flex-direction: column;
        margin-bottom: 1rem;
    max-width: 90%;
  }
  .news-card.old-news .card-block {
    flex-basis: 1%;
    height: auto;
  }
  .news-card.old-news .card-text {
    flex-basis: 99%;
  }
    
.news-card.old-news .card-text .read-more, .news-card.old-news .card-text .watch-video, .news-card.old-news .card-text .visit-site, .news-card.old-news .card-text .listen-pod {
  text-align: left;
}


@media (min-width: 600px) {
    
  .news-card.old-news {
    flex-direction: column;
    max-width: 90%;
  }
  .news-card.old-news .card-block {
    flex-basis: 1%;
    height: auto;
  }
  .news-card.old-news .card-text {
    flex-basis: 99%;
  }
    
.news-card.old-news .card-text .read-more, .news-card.old-news .card-text .watch-video, .news-card.old-news .card-text .visit-site, .news-card.old-news .card-text .listen-pod {
  text-align: left;
}

.news-card.old-news .card-text h2 {
font-size: 1.375rem;
  font-weight: 500;
line-height: 1.2;
  margin-top: 5px;
margin-bottom:0;
}
  .articles-list article.news-card.old-news {
    flex-direction: column;
  }

}


/* Story pull quote styles */

figure.pull-quote {
    border:none;
    margin-right: 2rem;
}

blockquote {
    font-family: Georgia, serif;
    font-size: 1.2em;
    font-style: normal;
    width: 100%;
    margin: 0;
    padding: 0 20px 0 50px;
    line-height: 1.4;
    position: relative;
    color: #0081CA;
}

blockquote p { margin: 1.2em 0; }

blockquote:before {
    display: block;
    content: "\201C";
    font-size: 90px;
    position: absolute;
    padding-left: 8px;
    left: -5px;
    top: -20px;
    color: #b4dd93;
}

figure.pull-quote figcaption {
    color: #848484;
    font-size: 14px;
    display: block;
    margin-top: 2px;
    float:right;
}

figure.pull-quote figcaption:before {
    content: "\2014 \2009";
}







/* Home Page */

body.homepage #container{
    background: #000;
}

.articles-home .news-card .card-text {
  background: #06105f;
  color: #e5e5e5;
}   
    
.articles-home .news-card h2 {
  color: #5dcc00;
  font-size: 1.375rem;
}



@supports (display: grid) {
 
.articles-home {
  display: grid;
  grid-gap: 2rem;
  grid-auto-flow: dense;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  height: 100%; 
  margin:0;
  padding: 0;
  width: 100%;
}

.articles-home .news-card.two-col {
   grid-column: span 2;
}

.articles-home .news-card {
  border: 1px solid #777;
    box-shadow: none;
  display:flex;
  flex-direction: column;
  flex: 1 1 100%;
  height: 100%; 
  margin: 0;
  max-width: 100%;
  padding: 0;

}

.articles-home .news-card .card-image {
  border: none;
}


.articles-home .news-card .card-block {
    background: #06105f;    
  flex-basis: 120px;
  height: 120px;
}

.articles-home .news-card.two-col .card-block  {
    background: #06105f;
  flex-basis: 240px;
  height: 240px;
}

.articles-home .news-card .card-text {
  background: #06105f;
  color: #e5e5e5;
  flex: 1 0 0;
  flex-basis:0;
  font-size: 0.875rem;
  font-weight: normal;
  height: auto;
  line-height: 1.5;
}

.articles-home .news-card h2 {
  color: #5dcc00;
  font-size: 1.375rem;
}

.articles-home .news-card .card-text time {
    max-height:min-content;
    margin:0;
    visibility:hidden;
    font-weight: 300;
    overflow: hidden;
  color: #fcfcfc;
  /*font-size: .5em;*/
  text-transform: uppercase;
  /*position: absolute;
  top: 5%; */
  padding: 0;
  -moz-transition: visibility 0.4s ease-in-out;
  -o-transition: visibility 0.4s ease-in-out;
  -webkit-transition: visibility 0.4s ease-in-out;
  transition: visibility 0.4s ease-in-out;
}

.articles-home .news-card:hover time, .articles-home .news-card:focus time {
  visibility: visible;
}

.articles-home .news-card .card-text p:first-of-type {
    margin-top: 0.25rem;
    background:; 
}

.articles-home .news-card .card-text p:nth-last-child(2) {
    margin-bottom:3rem;
}

.articles-home .news-card .card-text .read-more, .articles-home .news-card .card-text .watch-video, .articles-home .news-card .card-text .visit-site, .articles-home .news-card .card-text .listen-pod {
  background-color: transparent;
  border: 1px solid #91e5f6;
  border-radius: .25rem;
  bottom: 1rem; 
  color: #91e5f6;
  cursor: pointer;  
  left: 50%;    
  padding: 0.25rem 0.75rem;
  position: absolute;
  transform: translateX(-50%);
}

.articles-home .news-card .card-text .read-more a, .articles-home .news-card .card-text .watch-video a, .articles-home .news-card .card-text .visit-site a, .articles-home .news-card .card-text .listen-pod a {
  text-decoration: none;
}

.articles-home .news-card .card-text .read-more a:hover, 
.articles-home .news-card .card-text .read-more a:active,
.articles-home .news-card .card-text .watch-video a:hover, 
.articles-home .news-card .card-text .watch-video a:active,
.articles-home .news-card .card-text .visit-site a:hover,
.articles-home .news-card .card-text .visit-site a:active,
.articles-home .news-card .card-text .listen-pod a:hover,
.articles-home .news-card .card-text .listen-pod a:active {
  text-decoration: underline;
}



/* NAS Mission Card */

.articles-home .news-card .card-text.mission-text h2 {
  margin-bottom: 1rem;
  text-align: center;
}

.articles-home .news-card .card-text.mission-text p.mymission {
    font-family: 'Open Sans', sans-serif;
  font-size: 0.9375rem; 
    font-weight: 400;
    line-height:1.5;    
    padding: 1.5rem;
}

/* AMS Seminars Card */

.news-card .ams-text {
    /*background: #398000 !important;*/
}

.articles-home .news-card .ams-text h2 {
    color: gold;
}


.articles-home .news-card .ams-text header {
  display: flex;
  flex-direction: column;
}
.articles-home .news-card .ams-text header .subtitle {
  color: #5dcc00;
    font-weight: bold;
  order: -1;
}

.articles-home .news-card .ams-text header + p {
    margin-top: 0;
}



.articles-home .news-card .card-text.ams-text .ams-speaker {
    color: gold;
    font-family: 'Open Sans', sans-serif;
    font-size:  0.875rem;
    font-weight: 400;
    margin-top: 1rem;
}

.articles-home .news-card .card-text.ams-text .ams-time {
    margin-bottom: 1rem;
}

.news-card .card-text.ams-text .ams-time time {
    color: gold;
    font-family: 'Open Sans', sans-serif;
    font-size:  0.875rem;
    font-weight: 400;   
    text-transform: none;
    visibility: visible;
}


.articles-home .news-card .card-text.ams-text .ams-desc {
    margin-bottom: 40px;
    margin-top: 20px;
    padding-bottom: 10px;

}





}

@media (max-width: 600px) {
    .articles-home .news-card {
        max-width: 94%;
    }
    
    .articles-home .news-card.two-col {
       grid-column: span 1;
    }
  

}





/* Site-wide defaults for figures not in gallery */ 
/* Figure default width is 35% of article width */  

figure {
  border: thin silver solid;        
  float: right;
  margin: 0.5rem 0 0.5rem 0.5rem;
  min-width: 10rem; 
  padding: 0.5rem;
  width: 35%;
}

.fig-w-10 {
    width: 10%;
}

.fig-w-15 {
    width: 15%;
}

.fig-w-20 {
    width: 20%;
}

.fig-w-25 {
    width: 25%;
}

.fig-w-30 {
    width: 30%;
}

.fig-w-40 {
    width: 40%;
}

div:not(.gallery) figure.float-left {
    clear: left;    
    float: left;
  margin: 0.5rem 1rem 0.5rem 0 !important;
}

div:not(.gallery) figure a:focus,
div:not(.gallery) figure a:hover {
  cursor: zoom-in;
}

div:not(.gallery) figure img {
    object-fit: cover;
    width: 100%;    
}

div:not(.gallery) figcaption {
  font-family: 'Open Sans', sans-serif;
    font-size: 0.75rem;
  font-style: normal;
    padding-top: 0.5rem;
  text-indent: 0;
    text-align: left;
}

figure#orgchart {
    float: none;
    height: auto;
    margin: 0 auto;
    margin-bottom:4rem;
    margin-top: 2rem;
    padding: 1rem;
    width: 55%;
}

figure#orgchart img{
    object-fit: cover;
    width: 100%;    
}



/* scientific visualization gallery */

div.button-group {
    font-size: 0.875rem;
    font-weight: 500;
    letter-spacing: 0.1rem;
    margin-top: 2rem;
}


#filters button {
    background: #08599a;
  border: 1px solid #669;
    border-radius: 0.25rem;
    color: #fcfcfc;
  margin: 0.25rem;
  padding: 0.5rem 0.75rem;
  text-decoration: none;
}

#filters button.is-checked, #filters button:hover {
background: #398000;
}


#main .gallery figure {
    border: none;
    margin: 0;
    padding: 0;
}


.gallery{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  list-style-type: none;
}


.gallery {
    display:grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    grid-auto-rows: 160px;
    grid-gap: 5px;
    grid-auto-flow: dense;
    margin-bottom: 4rem;
    margin-top: 2rem;
    width: 100%;
    min-height: 90vh;
}

.gallery-item {
    width:100%;
    height:100%;
    position:relative;
        max-width: 20rem;
        margin: 1rem;
}

@supports (display: grid) {
  .gallery-item  {
  margin: 0;
    max-width: 100%;
  }
}


.gallery-item figure {
    width:100%;
    height:100%;
    overflow:hidden;
}

.gallery-item figure img{
    width:100%;
    height:100%;
    object-fit: cover;
    object-position:50% 50%;
    cursor:pointer;
    transition:.5s ease-in-out;
}
.gallery-item:hover figure img{
    transform:scale(1.5);
}

.image.gallery-item::after {
    content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 3.5rem;
  height: 2.5rem;
  transform: translate(-50%,-50%);
  display:flex;
  flex-direction:row;
  align-items: center;
  justify-content: center;
  transition-property: all;
  transition-duration: 0.3s;
    opacity: 0;
    
    pointer-events:none;
    z-index:4;
    padding: 1rem;
    color: black;
    display: block;
    white-space: pre;
    text-align: center;

  background-color: rgba(255, 255, 255, 0.5);
  border-radius: 10px;
  font-family: sans-serif;
  text-align: center;
  line-height: 1.5;
 -webkit-backdrop-filter: blur(10px)  ;
  backdrop-filter: blur(10px) ;

text-transform: uppercase;

}

 /*Add play button overlay for demo video thumbnails */
 


.video.gallery-item::after {
    content: "\25B6";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 3.5rem;
  height: 2.5rem;
  transform: translate(-50%,-50%);
  display:flex;
  flex-direction:row;
  align-items: center;
  justify-content: center;
  transition-property: all;
  transition-duration: 0.3s;
    opacity: 0.8;


    font-size: 2rem;
    pointer-events:none;
    z-index:4;

    background: rgba(0, 0, 0, 0.50);
    padding: 1rem;
    color: black;
    display: block;
    white-space: pre;
    text-align: center;

  background-color: rgba(255, 255, 255, 0.5);
/*  width: 50px;
    height: 50px;*/
  border-radius: 10px;
/*   font-family: sans-serif; */
  text-align: center;
  line-height: 1.5;
 -webkit-backdrop-filter: blur(10px)  ;
  backdrop-filter: blur(10px) ;
/*  max-width: 50%;
  max-height: 50%;
  padding: 20px 40px;*/
text-transform: uppercase;

}

.video.gallery-item:hover::after {
        content: "\25B6 \A Click to Play";
        font-size: 1rem;
        height: 3rem;               
        width: 7rem;
        padding-top: 1rem;
  opacity: 0.9;     
}

.image.gallery-item:hover::after {
    content: "\1F50D \A Click to Zoom"; 
    font-size: 1rem;
    height: 3rem;               
    width: 7.5rem;
    padding-top: 1rem;
  opacity: 0.9;   
}


.featured-image::before {
    background: rgba(0, 0, 0, 0.25);    
    content: "Featured Image"; 
        
        
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 12%;
    color: white;
    opacity: 0.9;
    z-index: 15;
    text-align: center;
    font-size: 1.5rem;
    line-height: 1.65;
    font-family: 'Roboto', sans-serif;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-weight: 500;


}



.featured-video::before {
    background: rgba(0, 0, 0, 0.25);    
    content: "Featured Video"; 
        
        
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 12%;
    color: white;
    opacity: 0.9;
    z-index: 15;
    text-align: center;
    font-size: 1.5rem;
    line-height: 1.65;
    font-family: 'Roboto', sans-serif;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-weight: 500;


}





.col-2{
    grid-column: span 2;
}
.col-3{
    grid-column: span 3;
}
.col-4{
    grid-column: span 4;
}



.row-2{
    grid-row: span 2;
}
.row-3{
    grid-row: span 3;
}
.row-4{
    grid-row: span 4;
}





@media screen and (max-width:500px){
.viz-gallery .container{
        grid-template-columns: repeat(1,1fr);
    }
    .col-2, .col-3, .col-4 {
        grid-column:span 1;
    }
    .row-2, .row-3, .row-4 {
        grid-rows:span 1;
    }
    
    
}


/** Embedding Responsive Vimeo Vids */

.vimeo-container {
  height: 0; 
  max-width: 100%; 
  overflow: hidden; 
  padding-bottom: 56.25%; 
  position: relative;      
 } 
 
.vimeo-container iframe, .vimeo-container object, .vimeo-container embed {
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;  
  width: 100%;
}

figure.feature-vid, figure.feature-img {
    border: none;

    float: left;
    margin:1em 0;
    margin-bottom: 2em;
    padding:0;
    width: 100% !important;
}

figure.feature-vid-inline {

    float:right;
    max-width: 50%;
    width: 50% !important;
}

figure.feature-vid-inline .vimeo-container iframe{
  height: 100%;
  right: 0;
  position: absolute;
  top: 0;  

}


figure.feature-img:hover {
    cursor:grab;
}


/* Click or touch message */
figure.feature-img .zoom span { 
position:absolute; 
top: 8px; right:35px; 
color:#ccc; 
font:bold 14px/1 sans-serif; 
}

/* magnifying glass icon in corner */
.zoom:after {
content:'';
display:block; 
width:33px; 
height:33px; 
position:absolute; 
top:0;
right:0;
background:url('/assets/nas/images/template/icon_zoom.png');
}


figure.feature-vid + p, figure.feature-img + p {
    color: #666;
    font-size: 0.75rem;
    text-transform: uppercase; 
}


/* AMS Seminar Home Page */

div#nextwebinar {
  background-color: inherit;
  border: 2px solid #398000;
  clear: both;
  margin: 0 auto;
  margin-top: 2rem;
  padding: 0.5rem 1.5rem 2rem 1.5rem;
  text-align: left;
  width: 90%;
}
    
div#nextwebinar h2 {
  font-size: 1.5rem;
  margin: 0.75rem 0 1rem 0;
  text-align: center;
}

div#nextwebinar > span {
  display: block;
}

div#nextwebinar .seminar {
  font-size: 1.125rem;
    font-weight: 700;
}

div#nextwebinar .speaker {
    font-style: italic;
    margin-bottom: 1rem;
}

div#nextwebinar .date {
    margin: 1rem 0;
}

div#nextwebinar .read-more a:after {
  content: "Read More";
}

div#nextwebinar ul {
    margin: 1rem 0;
}

.searchy-search h2 {
    font-size: 1.5625rem;
    line-height: 1.2;
    margin-bottom: 0;
}

.searchy-search h3 {
  font-size: 1.25rem;
  margin-bottom: 0;
  margin-left: 4.5rem;   
  margin-top: 0; 
  padding-bottom: 0;
}

.searchy-search h3 + p {
    font-size: 0.875rem;
    font-style: italic;
  margin-bottom: 0;
  margin-left: 4.5rem;  
  padding-bottom: 0.25rem;
}

.searchy-search p + form {
  margin-left: 4.5rem;
  margin-top: 0;
}


input.ams-search {
  border: 2px solid #08599A;
  border: 2px solid rgba(8,59,154,0.6);
  font-size:1rem;
    margin: 0 1rem 1rem 0;
    max-width: 80%;
    min-width: 15rem;
  padding: 0.5rem;
    width: 30rem;
}


#showAll {
    background: #08599a;
  border: 1px solid #669;
    border-radius: 0.25rem;
    color: #fcfcfc;
    font-size: 0.875rem;
    font-weight: 500;
    letter-spacing: 0.1rem;  margin: 0.25rem;
  padding: 0.5rem 0.75rem;
  text-decoration: none;
  visibility: hidden;
}

#showAll:active, #showAll:hover {
background: #398000;
}

.iso-container {
    line-height: 1.4;
    margin: 10px 0;
    padding: 0;
}

.iso-container .item {
  border-bottom: 1px solid #bbb;
  font-size: 0.8125rem;
  padding: 0.5rem 0 0 0;
  width: 100%;
  }


.iso-container li {
    display: flex;
    flex-direction: column;
    list-style-type: none; 
}


.iso-container a {  
    color: #525ffF;
    line-height: 1.3;
    text-decoration: none;
}

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

.iso-container .abstract {
    display: none;
}

.iso-container .seminar {
  font-size: 1rem;
    font-weight: bold;
}

.iso-container .speaker {
  font-size: 1rem;
    font-style: italic;
    padding-bottom: 0.5rem;
}

p.noamsjs {
    color: red;
    font-size: 1em;
    margin: 0 0 0 25px;
}

#noMatches {
    display: none;
    font-style: italic;
}





/* AMS Seminar Pages */



.ams-seminar header {
  display: flex;
  flex-direction: column;
}
.ams-seminar header .subtitle {
  color: #398000;
  order: -1;
}

.ams-seminar header + p {
    margin-top: 0;
}


/* End AMS */



#sidebar section {
    font-size: 0.878rem;
}

#sidebar section ul {
    margin: 1em;
    padding-left: 1em;
        padding-left: 0.25em;
}

#sidebar section h2+h3 {
  margin-top: 0.5em;
}

#sidebar section ul li+li {
  margin-top: 0.5em;
}


#sidebar section dt {
     margin-top: 0.5em;
}

#sidebar section dd {
    margin: 0;
    padding: 0 0 0.5rem 0;
}


#sidebar section ul li::marker {
    font-size: 0.823rem;
}

#sidebar section ul.no-bullets {
    margin-left: 0;
    padding-left: 0;
}

#sidebar section ul.no-bullets li+li {
  margin-top: 1em;
}

html.no-js #Search {display:none !important;}


html.no-js  iframe.jslink {display:none !important;}

html.no-js div.sidebox iframe, html.no-js div.sidebox form {display:none !important;}



.modal h2 {
    font-size: 1.424rem;
    text-align: center;
}

.modal h3 {font-size: 1.266rem;}

.modal .fancybox-close-small {
  top: 15px;
}

.modal .content-header {
  border-bottom: 1px solid #eee;
  padding: 20px;
  max-height: 90vh;
}

.modal .content-scroll {
  max-height: calc(90vh - 100px);
  overflow: auto;
  padding: 200px 20px 0 20px;
}




/* ==========================================================================
   Helper classes
   ========================================================================== */


a.skip-main {
   left:-999px;
   position:absolute;
   top:auto;
   width:1px;
   height:1px;
   overflow:hidden;
   z-index:-999;
}
a.skip-main:focus, a.skip-main:active {
   color: #fff;
   background-color:#000;
   left: auto;
   top: auto;
   width: 30%;
   height: auto;
   overflow:auto;
   margin: 10px 35%;
   padding:5px;
   border-radius: 15px;
   border:4px solid #398000;
   text-align:center;
   font-size:1.2em;
   z-index:999;
}









/*
 * Hide visually and from screen readers
 */

.hidden,
[hidden] {
  display: none !important;
}

/*
 * Hide only visually, but have it available for screen readers:
 * https://snook.ca/archives/html_and_css/hiding-content-for-accessibility
 *
 * 1. For long content, line feeds are not interpreted as spaces and small width
 *    causes content to wrap 1 word per line:
 *    https://medium.com/@jessebeach/beware-smushed-off-screen-accessible-text-5952a4c2cbfe
 */

.sr-only {
  border: 0;
  clip: rect(0, 0, 0, 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  white-space: nowrap;
  width: 1px;
  /* 1 */
}

/*
 * Extends the .sr-only class to allow the element
 * to be focusable when navigated to via the keyboard:
 * https://www.drupal.org/node/897638
 */

.sr-only.focusable:active,
.sr-only.focusable:focus {
  clip: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  position: static;
  white-space: inherit;
  width: auto;
}

/*
 * Hide visually and from screen readers, but maintain layout
 */

.invisible {
  visibility: hidden;
}

/*
 * Clearfix: contain floats
 *
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    `contenteditable` attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that receive the `clearfix` class.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */

.clearfix::before,
.clearfix::after {
  content: " ";
  display: table;
}

.clearfix::after {
  clear: both;
}






/* ==========================================================================
   Media Queries for Responsive Design and accessibility
   This isn't really a mobile-first site, so we are keyed to max-width
   instead of min-width in most cases.
   Screen followed by Print
   ========================================================================== */

/* stops animation for browsers that request reduced-motion */
@media screen and (prefers-reduced-motion: reduce) {  
  * {
    /* Very short durations means JavaScript that relies on events still works */
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}


@media only screen and (min-width: 577px) and (max-width: 1399px) {

    .bannerhead {
        font-size: 1.83em;
    }

.homepage .mission {
    font-size: 0.875rem;
    margin-top: 0;
}   
.bannerblock img {
 width: 60px !important;
 margin: 0;
 padding-bottom: 50px;
} 
    #main {
        margin-top: 1rem;
    }

    #sidebar {
        margin-top: 2.5rem; 
    }

}


/*@media only screen and (min-width: 992px) {*/
@media only screen and (min-width: 1060px) {    
    #site-nav .main-menu {
        display: block;
    }

    #toggle-menu, #site-nav label.drop-icon {
        display: none;
    }

    #site-nav ul span.drop-icon {
        display: inline-block;
    }

    #site-nav li {
        float: left;
        border-width: 0 1px 0 0;
    }

    #site-nav .sub-menu li {
        float: none;
    }

    #site-nav .sub-menu {
        border-width: 0;
        margin: 0;
        position: absolute;
        top: 100%;
        left: 0;
        width: 20em;    
        z-index: 3000;
    }

    #site-nav .sub-menu, #site-nav input[type="checkbox"]:checked + .sub-menu {
        display: none;
    }

    #site-nav .sub-menu li {
        border-width: 0 0 1px;
    }
    #site-nav .sub-menu li a {
        background: #323232;
    }

    #main {
        min-height: 70vh;
    }

    /*adds hecc home menu item on right side of menu bar*/
    #site-nav   li.hecc-home {
        float:right;
        }
    #site-nav   li.hecc-home a {
        color: #E9C149;
        }
    #site-nav   li.hecc-home a:hover {
        background-color: #525252;
        }





    #site-nav .sub-menu .sub-menu {
        top: 0;
        left: 100%;
    }

    #site-nav .sub-menu .drop-icon {
        position: absolute;
        top: 0;
        right: 0;
        padding: 1em;
    }

    #site-nav li:hover > input[type="checkbox"] + .sub-menu {
        display: block;
    }
        
    
    
}


// Medium devices (tablets, less than 992px)
@media all and (max-width: 991.98px) { 
    
    
    
    
    
    
    
}




/* Stack the layout on small devices/viewports. */
@media all and (max-width: 575.98px) {
    
  body {
    margin:0;
  }

 #page-header {
   display: grid;
     grid-template-areas: 
     "banner"
     "search";
   grid-template-rows: auto auto;  
   grid-template-columns: minmax(300px, 1fr);
   grid-row-gap: 1rem;
   grid-column-gap: 0;
   }
   
 
 
.bannerhead {
    font-size: 1.296rem;
    line-height: 1; 
    margin-top: 0;

         
   }  
   
    .homepage .mission {
        font-size: 0.875rem;
        margin-top: 1rem;
    } 
   
 .bannerblock img {
     width: 60px !important;
     margin: 0;
     padding-bottom: 30px;
 } 
 .credits {
   text-align: left;
   justify-self: start;
  }
 
body:not(.viz-gallery) #main figure {
        float: none;
        clear: both;
        width: 90%;
        margin:0 auto;
    }

    h2 {
        margin-top: 2em;
    }

 /* remove aside left border and add top line to separate from main in mobile */
#sidebar {
  background-image: none; 
 }
#sidebar::before {
  border-top: 1px solid #398000; 
  content: "";
  display: block; 
  margin: 0 auto; 
  padding-bottom: 2em; 
  width: 90%;     
}

#secondary-nav ul{
  justify-content: justify;     
}

#secondary-nav ul li{
    font-family: 'Open Sans', sans-serif;
  font-size: 0.75rem;

}

#secondary-nav ul li a{
  padding: 0.8rem 1rem;

}

/* stack footer links on left and move nasa logo to right */
#page-footer {
  display: grid;
    grid-template-areas: 
    "legal"
    "peeps";
  grid-template-rows: auto auto;  
  grid-template-columns: minmax(300px, 1fr);
  grid-row-gap: 1rem;
  grid-column-gap: 0;
  } 
.legal img {
  float: right;
} 
.credits {
  text-align: left;
  justify-self: start;
 }
 
 


}  
  
  // Small devices (landscape phones, 576px and up)
@media (min-width: 576px) { ... }

// Medium devices (tablets, 768px and up)
@media (min-width: 768px) { ... }

// Large devices (desktops, 992px and up)
@media (min-width: 992px) { ... }

// X-Large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }

// XX-Large devices (larger desktops, 1400px and up)
@media (min-width: 1400px) { ... }

  







/* Portrait and Landscape */
@media only screen and (max-width: 900px) { 
    

}
    
    
    



@media only screen and (min-width: 1400px) {
  /* @media only screen and (min-width: 35em) {
Style adjustments for larger screens */
  
    
    
      h1, h2, h3, h4, h5 {
        margin: 3rem 0 1.38rem;
        font-family: 'Roboto', sans-serif;
        font-weight: 500;
        line-height: 1.3;
        color: ;
      }

        h1 {
          margin-top: 0;
          font-size: 1.802rem;
            {font-size: 2.074rem;
        }

        h2 {font-size: 1.602rem;}

        h3 {font-size: 1.424rem;}

        h4 {font-size: 1.266rem;}

        h5 {font-size: 1.125rem;}

        small, .text_small {font-size: 0.889rem;}
        
            
        
        #main {
            margin-top: 1rem;
        }

        #sidebar section {
        
            margin-top: 0;  
        }
    

        
    
        
}

@media print,
  (-webkit-min-device-pixel-ratio: 1.25),
  (min-resolution: 1.25dppx),
  (min-resolution: 120dpi) {
  /* Style adjustments for high resolution devices */
}

/* ==========================================================================
   Print styles.
   Inlined to avoid the additional HTTP request:
   https://www.phpied.com/delay-loading-your-print-css/
   ========================================================================== */

@media print {
  *,
  *::before,
  *::after {
    background: #fff !important;
    color: #000 !important;
    /* Black prints faster */
    box-shadow: none !important;
    text-shadow: none !important;
  }

  a,
  a:visited {
    text-decoration: underline;
  }

  a[href]::after {
    content: " (" attr(href) ")";
  }

  abbr[title]::after {
    content: " (" attr(title) ")";
  }

  /*
   * Don't show links that are fragment identifiers,
   * or use the `javascript:` pseudo protocol
   */
  a[href^="#"]::after,
  a[href^="javascript:"]::after {
    content: "";
  }

  pre {
    white-space: pre-wrap !important;
  }

  pre,
  blockquote {
    border: 1px solid #999;
    page-break-inside: avoid;
  }
    
    
    
    

  /*
   * Printing Tables:
   * https://web.archive.org/web/20180815150934/http://css-discuss.incutio.com/wiki/Printing_Tables
   */
  thead {
    display: table-header-group;
  }

  tr,
  img {
    page-break-inside: avoid;
  }

  p,
  h2,
  h3 {
    orphans: 3;
    widows: 3;
  }

  h2,
  h3 {
    page-break-after: avoid;
  }
}