/* White Border on images */
img.img-border {
    outline: 3px solid #fff;
    outline-offset: -18px;
}

/* Fifty Fifty background colors */
.fifty-fifty.yellow article, .fifty-fifty.yellow figure {
    background-color: #ffc845;
}

.fifty-fifty.teal article, .fifty-fifty.teal figure {
    background-color: #9cdbd9;
}

.tile.gray .tile-content {
    color: #000;
    background-color: #d2d2d2;
}

/* Social Media */
main.main-content--landing .sidebar-social-media {
    margin-bottom: 65px;
    padding-left: 40px;
    padding-right: 40px;
}


/*limit Studio Site logo size in footer*/
site-footer .footer-link-list img {
   	max-height: 150px;
    height:150px;
}

/*Accordion Expand/Collapse button*/
.t4-expand-accordion {
  display: flex;
  justify-content: end;
}
.t4-expand-accordion-btn {
  margin: 0;
  margin-bottom: 1rem;
  padding: .5rem 1rem;
  margin-top: 0 !important;
}


/* components library styling */
.gen-content-column code {
  background-color: #e8e8e8;
  border-radius: 3px;
  padding: 0.1rem 0.2rem;
}

/* Related Blog Slider */
.slick-track:has(.card-auto) {
    display: flex !important;
}
.card-auto {
    height: auto !important;
    flex: 1;
}


/* form styling */
input, .form-control {
  border: 1px solid #888888;
}

input:focus, input:active {
  border-color: #0057b8;
}


/*move to master JL */
p.small {
   display: block;
   font-size:.8rem;
   color:#27251f;
   line-height: 1.2;
   margin-top: -.125rem;
   margin-bottom: .5rem;
}

.site-footer .to-top .page-top-link {
    padding: 0 40px;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -ms-flex-align: center;
    align-items: center;
    transition: background-color .34s ease-out;
    margin-bottom: 2rem;
    color: #fff;
}

.site-footer .to-top .page-top-link .top-text {
  	text-align: center;
}

.site-footer .to-top .page-top-link .svg-icon {
  	width: 1.125rem;
    height: 1.125rem;
    margin-bottom: .25rem;
    margin-left: .5rem;
}

.site-footer .to-top .page-top-link .svg-icon>svg {
   	fill: #fff;
  	height: 100%;
    width: 100%;
}

/*Move to master BB
button.slick-prev:not(.slick-disabled):focus-visible svg use,
button.slick-next:not(.slick-disabled):focus-visible svg use{
    fill: #0057b8 !important;
    color: #0057b8 !important;
}
a.mayo-lightbox__close:focus-visible, .mayo-lightbox .mayo-lightbox-slider__thumbs .mayo-lightbox-thumb>a:focus-visible {
    outline: 3px solid #0057b8 !important;
    outline-offset: 3px;
    border-radius: 4px;
    box-shadow: 0 0 0 3px #ffffff !important;
}
*/

/* Exploding tiles film strip fix contrast for text over images */
.film-strip .film-heading {
  background-image: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.90) 0%,
    rgba(0, 0, 0, 0.85) 60%,
    rgba(0, 0, 0, 0.78) 75%,
    rgba(0, 0, 0, 0.70) 90%,
    rgba(0, 0, 0, 0.60) 100%
  );
}


/* Video Hero Caption Statement */
.caption-statement {
  margin: 0;
  max-width: 66rem;
  text-align: left;
  text-shadow: 0 0 10px #000, 0 0 10px #000, 0 0 20px #000, 0 0 30px #000;
}

.hero-image .caption-container .caption p {
  font-size: 2.5rem;
  line-height: 1.1666;
  font-weight: 700;
  font-family: mayo-display, EB Garamond, serif;
}

/* Video/Picture Tile Heading Fix */

.tile p.video-tile__info__heading {
    display: inline-block;
    font-family: mayo-sans, Arial, sans-serif;
    margin-bottom: .25rem;
  	line-height: 1.2;
  	font-weight: 700;
}


@media only screen and (min-width: 1024px) {
    .picture-tile p.video-tile__info__heading  {
        font-size: 1.5rem;
    }
}

.picture-tile .sub-heading, .picture-tile p.video-tile__info__heading {
    text-shadow: 0 0 10px #000, 0 0 10px #000, 0 0 20px #000, 0 0 30px #000;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}


.tile p.tile-header {
    display: inline-block;
    font-family: mayo-sans, Arial, sans-serif;
    margin-bottom: .25rem;
  	line-height: 1.2;
  	font-weight: 700;
  	font-size: 1.5rem;
}

@media only screen and (min-width: 1024px) {
    .picture-tile p.tile-header {
        font-size: 1.5rem;
    }
}

.picture-tile .sub-heading, .picture-tile p.tile-header {
    text-shadow: 0 0 10px #000, 0 0 10px #000, 0 0 20px #000, 0 0 30px #000;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}




/*Move to master BB*/

.site-footer a.social-icon:focus-visible, .site-footer .footer-link-list a:focus-visible, .footer-links a:focus-visible, .footer-copyright a:focus-visible{
    outline: 3px solid #0057b8 !important;
    outline-offset: 3px;
    box-shadow: 0 0 0 3px #ffffff !important;
}

.hero-video__container {
  position: relative;
}

/* Button base */
.hero-video__toggle {
  position: absolute;
  right: 16px;
  bottom: 16px;
  width: 3rem;
  height: 3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #0057b8 !important;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  padding: 0;
}

/* SVG IMG sizing */
.hero-video__toggle img {
    width: 2rem;
    height: 2rem;
    pointer-events: none;
    aspect-ratio: 1 / 1 !important;
}

/* Toggle icons via aria-pressed */
.hero-video__toggle[aria-pressed="true"] .icon-play {
  display: none;
}

.hero-video__toggle[aria-pressed="false"] .icon-pause {
  display: none;
}

/* Hover */
.hero-video__toggle:hover {
  background-color: #00408a!important;
}

/* Keyboard focus ring */
.hero-video__toggle:focus-visible {
  outline: 3px solid #ffffff;
  outline-offset: 3px;
  box-shadow: 0 0 0 3px #ffffff !important;
}

/* remove default focus in mouse click */
.hero-video__toggle:focus:not(:focus-visible) {
  outline: none;
}

/*Sitewide notice*/
#sitewide-banner .sitewide-banner-inner {
    padding: 0.5rem 3rem;
}
#sitewide-banner .sitewide-banner-inner p {
    margin-bottom: 0.25rem;
}
#sitewide-banner .banner-title{
    font-weight: 700;
}
#sitewide-banner .sitewide-banner-inner.emergency {
    background: rgba(252, 177, 153, 1);
    border-left: 10px solid rgba(160, 0, 31, 1);
}
#sitewide-banner .sitewide-banner-inner.emergency a, #sitewide-banner .sitewide-banner-inner.warning a{
    color: #000000;
}
#sitewide-banner .sitewide-banner-inner.warning{
 	background: rgba(255, 233, 181, 1);
    border-left: 10px solid rgba(192, 136, 0, 1);
}
#sitewide-banner .sitewide-banner-inner.info{
   background: rgba(175, 215, 255, 1);
   border-left: 10px solid rgba(0, 65, 129, 1);
   color: rgba(0, 65, 129, 1);
}
#sitewide-banner .sitewide-banner-inner.info a{
    color: rgba(0, 65, 129, 1);     
}
#sitewide-banner a.banner-cta {
    text-decoration: underline;
}
#sitewide-banner .banner-message a{
  	text-decoration: underline;
}
#sitewide-banner a.banner-cta:hover,  #sitewide-banner a.banner-cta:focus, #sitewide-banner .banner-message a:hover, #sitewide-banner .banner-message a:focus{
    color: #333333;
}
/* Container banners can remain static/flow; each banner is its own positioning context */
.sitewide-banner-inner {
  position: relative;          /* anchor for the close button */
  padding-right: 48px;         /* room so text doesn't run under the X */
}

/* Close button pinned to the top-right */
.banner-close {
  position: absolute;
  bottom: 50%;                   /* adjust as desired */
  right: 16px;                 /* adjust as desired */
  width: 44px;
  height: 44px;
  line-height: 24px;
  font-weight: 300;
  text-align: center;
  font-size: 2rem;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
}
.banner-close:focus {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}
#sitewide-banner .sitewide-banner-inner.emergency .banner-close{
  color:rgba(160, 0, 31, 1);
}
#sitewide-banner .sitewide-banner-inner.emergency .banner-close:hover, #sitewide-banner .sitewide-banner-inner.emergency .banner-close:focus{
  background:rgba(160, 0, 31, 1);
  color: white;
}
#sitewide-banner .sitewide-banner-inner.warning .banner-close{
  color: #000000;
}
#sitewide-banner .sitewide-banner-inner.warning .banner-close:hover, #sitewide-banner .sitewide-banner-inner.warning .banner-close:focus{
  background:rgba(192, 136, 0, 1);
  color: #333333;
}
#sitewide-banner .sitewide-banner-inner.info .banner-close{
  color: rgba(0, 65, 129, 1);
}
#sitewide-banner .sitewide-banner-inner.info .banner-close:hover, #sitewide-banner .sitewide-banner-inner.info .banner-close:focus{
  background: rgba(0, 65, 129, 1);
  color:#ffffff;
}
#sitewide-banner p.banner-title {
    margin-bottom: 0 !important;
}
#sitewide-banner .sitewide-banner-inner {
    padding: 0.5rem 2rem;
    display: flex;
    align-items: flex-start;
}
#sitewide-banner .banner-icon {
    flex: 0 0 auto;
    margin-right: 2.5rem;
}
#sitewide-banner .banner-icon img {
    display: block;
    width: 30px;
    height: 30px;
    bottom: 35%;
    position: absolute;
}
@media only screen and (max-width: 919px) {
    #sitewide-banner .banner-icon img {
      width: 24px;
      height: 24px;
      bottom: 32%;
	}
}