/*-------------colors-------------*/
//#000000; /*black*/
//#ffffff; /*white*/
//#ececec; /*lightest grey (usually for borders)*/
//#b3b3b3; /*light warm grey*/
//#404041; /*charcoal*/
//#600d0e; /*red ochre*/
//#d99559; /*yellow ochre*/
//#f0d5bd; /*medium yellow ochre*/
//#f7eade; /*pale yellow ochre*/


/*-------------fonts-------------*/
body, button, input, select, optgroup, textarea {
//color: #000000; /*black*/
font-family: myriad-variable, Myriad, "Open Sans", sans-serif;
//font-variation-settings: "wght" 300, "wdth" 110;
font-style: normal;
}

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

h1 {
font-family: Balthazar, Copperplate, serif;
}


/*-------------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: #600d0e; /*red ochre*/
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: #600d0e; /*red ochre*/
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: #f0d5bd; /*medium yellow ochre*/
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: #d99559; /*yellow ochre*/
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: #404041; /*charcoal*/
}

.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 can be 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: 0 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:#600d0e; /*red ochre*/
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:#600d0e; /*red ochre*/
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-grid;
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;
align-content: center;
justify-items: center;
} /*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*/