/*-------------colors-------------*/
//#000000; /*black*/
//#ffffff; /*white*/
//#ececec; /*lightest grey (usually for borders)*/
//#a8e0f9; /*light blue*/
//#4eb0d9; /*med blue*/
//#258486; /*blue-green*/
//#015a8d; /*dark blue*/
//#173258; /*darkest blue*/

:root {
--primary-dark: #173258; /*darkest blue*/
} /*primary color is set in theme settings, but primary dark is not specified*/


/*-------------fonts-------------*/
body, button, input, select, optgroup, textarea {
font-family: azo-sans-web, sans-serif;
font-style: normal;
font-weight: 400;
}

body, button, input, select, optgroup, textarea {
font-size: 1.1rem;
}

h1 {
font-family: rig-solid-bold-inline-solo, sans-serif;
font-style: normal;
font-weight: 700;
color: #015a8d; /*dark blue*/
}

h2, h3, h4, h5, h6 {
font-family: azo-sans-web, sans-serif;
font-style: normal;
font-weight: 600;
}

h2 {
color: #258486; /*blue-green*/
}

h3 {
color: #4eb0d9; /*med blue*/
}

pre {
font-family: azo-sans-web, sans-serif;
font-style: normal;
font-weight: 300; /*Azo Sans Light*/
color: //#173258; /*darkest blue*/
background: #a8e0f950; /*light blue 50%*/
}

code {
font-family: "Courier 10 Pitch", courier, monospace;
}


/*-------------header and navigation-------------*/
.main-header {
position: sticky;
top: -250px !important;
z-index: 999;
} /*Makes header sticky, to show the banner when scrolled up, but will let the banner scroll up to allow the main area get larger. Will stop at navigation buttons.*/

.main-header--center {
padding-top: 0 !important;
} /*keeps sticky header at top when scrolling up*/

body.page.site-page-home .main-header {
position: fixed;
top: 0px !important;
} /*makes home page header not sticky*/

body.page.site-page-About .main-header {
position: fixed;
top: 0px !important;
} /*makes About page header not sticky*/

body.page.site-page-home.main-header--center {
padding-top: 308px !important;
} /*lets main content on Home page start under the header instead of at the top of the screen*/

body.page.site-page-About.main-header--center {
padding-top: 308px !important;
} /*lets main content on About page start under the header instead of at the top of the screen*/
/*-------We want the header to be sticky in order to increase the viewing area for the item and media pages, but not for the Home and About pages. Since some of the media pages have been made as a separate page, it is more efficient to have the sticky header set for the whole site and specifically "unstick" it for the Home and About pages.-------*/

.main-header__top-bar.container {
display: none;
} /*takes off advanced search bar at top of page*/

.main-header__main-bar.container {
background-color: #173258; /*darkest blue*/
padding: 10px 0 0;
} /*lets header go all the way to the edge of the screen, but still separates from the top a little*/

@media (min-width: 768px)
.main-header__main-bar.container {
background-color: #173258; /*darkest blue*/
padding: 10px 0 0;
} /*lets header go all the way to the edge of the screen, but still separates from the top a little*/

.main-header__site-title a img {
background-color: #ffffff; /*white*/
max-height: 175px;
margin: 10px;
box-shadow: 0px 0px 6px 2px rgba(0,0,0,0.5); /*black 50%*/
} /*logo height, background color, shadow, margin*/

.main-navigation {
display: inline-flex;
justify-content: center;
background-color: #a8e0f9; /*light blue*/
width: 100%;
} /*adds color to navigation bar, stretches across screen, brings everything back to center*/

.main-navigation .navigation {
font-size: 1.7rem;
font-weight: bold;
} /*reduces size of navigation button font*/

.main-navigation .navigation>li.active>a {
font-weight: unset;
} /*should keep the font weight the same, even when active*/

.main-header--center .main-navigation .navigation>li>a {
margin: 5px 15px;
} /*margin around text part of navigation buttons that affects spacing between, as well as around*/

ul li {
margin-bottom: unset;
} /*reduces margin under nav buttons*/

//.banner__description {
//white-space: break-spaces;
//font-size: 1.5rem;
//max-width: unset;
//} /*theme banner is on every page, so I made a new banner class to enable different one on every page- banner100*/

//.banner__heading {
//font-size: unset;
//} /*theme banner is on every page, so I made a new banner class to enable different one on every page- banner100*/


/*-------------footer-------------*/
.main-footer__top {
background-color: #4eb0d9; /*med blue*/
padding: 10px 0;
}

@media (min-width: 1024px)
.main-footer__top {
padding: 10px 0;
}

.main-footer__top-container>div {
margin-bottom: 0;
}

.main-footer__bottom {
background-color: #173258; /*darkest blue*/
}

.main-footer__col1 {
text-align: center;
}

.main-footer__col1 img {
margin-bottom: 0;
}

@media (min-width: 1024px)
.main-footer__col1, .main-footer__col3 {
text-align: center;
}


/*-------------home page only-------------*/
.site-page-home #main-content {
//padding-top: unset;
padding-bottom: unset;
} /*want banner100 to be able to go from edge to edge*/

@media (min-width:1024px)
.site-page-home #main-content {
padding-top: unset;
padding-bottom: unset;
} /*want banner100 to be able to go from edge to edge*/

.site-page-home .container {
padding: 10px 0 0;
} /*want banner100 to be able to go from edge to edge*/

//.site-page-home .body-Block {
//padding: 0 30px;
//}

@media (min-width: 768px)
.site-page-home .container {
padding: unset;
} /*want banner100 to be able to go from edge to edge*/


/*-------------body-------------*/
.title {
padding-top: 1rem;
} /*makes padding-top the same as the padding-bottom*/

.body-Block, .col-container {
margin: 0 100px;
} /*had to take the padding out of the container for banner100, so this replaces it*/

.banner100 {
width: 100%;
} /*sets up a banner that is different on every page and stretches all the way from edge to edge*/

.assets {
margin-bottom: unset;
} /*unsets the bottom margin below an asset*/

.container {
max-width: unset;
} /*adjusts the max-width of the main container*/

#main-content {
padding: 20px 30px;
margin-top: 0;
margin-bottom: 0;
margin-left: auto;
margin-right: auto;
} /*adjusts margins and padding around the main content area*/


/*-------------Item Page-------------*/
.resource-tags {
display: none;
} /*takes out the resource tags at the top of the page*/

.regions-container .sidebar-region {
width: 47%;
} /*makes the sidebars share the width evenly*/

body.item.resource.show dl.media-list, .item #main-content > p {
display: none;
} /*takes out the "Part of" on item page*/

//body.media.resource.show dl.media-list, .item #main-content > p {
//display: none;
//} /*takes out the "Part of" on media page*/

/*-------------Light Gallery-------------*/
#lg-download-1.lg-download.lg-icon, .lg-toolbar .lg-icon, .lg-toolbar .lg-counter {
color:#173258; /*darkest blue*/
font-size: 30px;
height: 50px;
line-height: 30px;
}

.lg-outer .lg-img-rotate {
margin: 10px;
} /*makes room for the box-shadow to show*/

.lg-outer .lg-item.lg-complete.lg-zoomable .lg-dummy-img, .lg-outer .lg-item.lg-complete.lg-zoomable .lg-image {
box-shadow: 0px 4px 6px 2px rgba(0,0,0,.11);
} /*adds a shadow to the image in the light gallery*/

.lg-backdrop.in {
background-color: #ececec90; /*lightest grey 90%*/
opacity: 1;
} /*changes the background behind the media*/

#lg-toolbar-1.lg-toolbar.lg-group {
background-color: #b3b3b390; /*light warm grey 90%*/
} /*changes background color of toolbar*/

#lg-download-1.lg-download.lg-icon:hover, .lg-toolbar .lg-icon:hover {
color:#173258; /*darkest blue*/
text-shadow: 0 0 5px #f0d5bd;
background-color: unset;
} /*changes font color of toolbar buttons*/


/*-------------Historical Actors Page-------------*/
body.page.site-page-Actors .resource-list .resource {
display: inline-flex;
transform: unset;
width: 22% !important;
flex-wrap: wrap;
justify-content: center;
margin: 10px;
padding: 10px;
box-sizing: border-box;
flex-direction: column;
align-items: center;
height: 420px;
} /*adjusts the box around the resources on the page*/

body.page.site-page-Actors  .resource.item h4 {
text-align: center;
font-size: 22px;
font-weight: bold;
height: 60px;
margin: 0;
overflow: auto;
} /*adjusts the name/title of the resources on the page*/

body.page.site-page-Actors .resource.item .description {
text-align: center;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
margin-bottom: 10px;
height: 52px;
white-space: break-spaces;
} /*adjusts the description area for the resources on the page*/

body.page.site-page-Actors .resource.item .item-buttons {
display: inline-flex;
position: relative;
bottom: auto;
gap: 10px;
} /*tells the buttons how to line up*/

body.page.site-page-Actors .resource.item a img {
//object-fit: contain;
//object-position: bottom;
//border: 1px solid rgba(51,51,51,.25);
box-shadow: 0px 1px 6px rgba(51,51,51,.25);
} /*styles the thumbnail for the resources on the page*/

body.page.site-page-Actors .resource.item .item-thumbnail {
height: 220px;
width: 162px;
object-fit: cover;
object-position: top;
} /*sizes and fits the thumbnails for the resources on the page*/

body.page.site-page-Actors .resource-list .resource__thumbnail {
margin: auto 15px auto;
order: 0; /*moves thumbnail from left to right of content*/
} /*affects spacing around LIST thumbnails on Actors page, if using a grid/list toggle*/

body.page.site-page-Actors .resource-grid .resource__thumbnail {
text-align: center;
} /*affects spacing around GRID thumbnails on Actors page, if using a grid/list toggle*/

body.page.site-page-Actors .resource-grid .resource__thumbnail img {
padding: 15px 15px 0;
aspect-ratio: 1; /*makes thumbnails all the same size reguardless of orientation, therefore the resource boxes will all be the same size*/
} /*affects sizing of GRID thumbnails on Actors page, if using a grid/list toggle*/

//.description.ellipsis {
//display: none;
//display: inline-flex;
//flex-wrap: wrap;
//justify-content: space-evenly;
//} /*affects the description space if using a grid/list toggle*/


/*-------------Source Pages-------------*/
//.slick-slide.slick-current.slick-active div a {
//display: unset;
//}

.carousel-block {
margin: 1rem 100px;
padding-bottom: 10px;
}

#main-content > div > div > div > div > div > div.slick-slide.slick-current.slick-active > div > a > div > div.title {
border-bottom: 1px solid #ececec;
background-color: #ffffff50;
font-size: 1.5rem;
} /*adjusts the background color and size of the caption title*/

#main-content > div > div > div > div > div > div.slick-slide.slick-current.slick-active > div > a > div > div.caption {
font-size: 1.2rem;
} /*adjusts the size of the caption*/

slick-slide.slick-current.slick-active div a {
width: 100%;
display: inline-flex;
flex-direction: row;
align-items: center;
} /*brings caption up beside the media in the carousel*/


/*-------------Sandbox-------------*/
body.media.resource.show .regions-container:has(p.sampleMap-html):has(#lg-container-1) .sidebar-region {
display: none;
} /*hides the entire left sidebar if it has a media resource containing p.sampleMap-html and a light gallery*/

body.page.site-page-sandbox .htmlBlock-1 .item-buttons ~ a:has([alt~="Modal"]) {
display: none;
} /*removes the extraneous buttons on sandbox page*/

body.page.site-page-sandbox .htmlBlock-2 .item-buttons a:has([alt~="Go"]) {
display: none;
} /*removes the extraneous buttons on sandbox page*/




/*-------------sandbox modal-------------*/
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 9999; /* Sit on top */
  left: 10%;
  top: -12%;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color--Black w/ no opacity */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content/Box */
.modal-content {
  margin-top: 15%;
  margin-left: auto;
  margin-right: auto;
  padding: 20px;
  width: 80%; /* Could be more or less, depending on screen size */
  height: 75%; /* Could be more or less, depending on screen size */
  max-width: 1250px;
  background-color: #ffffff; /*white*/
  border: 1px solid #a8e0f9; /*light blue*/
  outline: 5px solid #a8e0f9; /*light blue*/ /*ridge instead of solid?*/
  outline-offset: 5px;
  box-shadow: 0px 0px 15px 15px #00000050; /*Black 50%*/
}

.modal.modal-content section.col-container {
display: flex;
}

.modal.modal-content .col-single:nth-child(odd) {
padding-right:10px;
}

.modal.modal-content .col-single:nth-child(even) {
padding-left: 10px;
}

/* The Close Button */
.close {
  float: right;
  font-size: 30px;
  font-weight: bold;
  padding: 0px 10px;
  color: #f2a03d; /*orange*/
  border: 2px solid #f2a03d; /*orange*/
  border-radius: 4px;
}

.close:hover,
.close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 0 5px 0px #f2a03d inset, 0px 0px 2px 2px #00000050; /*change the inset to white? change the black 50% to inset?*/
  //border: 2px solid #000000; /*Black*/
  //background-color: #00000025; /*Black 25%*/
}

/*.sampleMap-html {
height: -webkit-fill-available;
}*/