.so-widget-jwa-home-slider {
  /*display:none;*/
  display:block;
  width:100vw;
  margin-left:50%;
  transform:translateX(-50%) ;
  border-bottom:1px solid #565656;
  max-height:500px;
  min-height:280px;
  overflow:hidden;
	font-family: "Roboto Condensed", sans-serif;
}

/* {{{ Colours */
.so-widget-jwa-home-slider .home-slider-frame.bg-white { background-color:white;}
.so-widget-jwa-home-slider .home-slider-frame.bg-black { background-color:black;}
.so-widget-jwa-home-slider .home-slider-frame.bg-light-gray { background-color:#DDDDDD;}
.so-widget-jwa-home-slider .home-slider-frame.bg-dark-gray { background-color:#999999;}

.home-slider-frame.text-red .frame-text-content p,
.home-slider-frame.text-red .frame-text-content a { color:var(--red);}
.home-slider-frame.text-white .frame-text-content p,
.home-slider-frame.text-white .frame-text-content a { color:white;}
.home-slider-frame.text-black .frame-text-content p,
.home-slider-frame.text-black .frame-text-content a { color:black;}

.home-slider-frame.title-red .frame-text-content h2 { color:var(--red);}
.home-slider-frame.title-white .frame-text-content h2 { color:white;}
.home-slider-frame.title-black .frame-text-content h2 { color:black;}

.home-slider-frame.bg-light-gray div.overlay { background-color:#DDDDDD; }
.home-slider-frame.bg-dark-gray div.overlay { background-color:#999999; }
.home-slider-frame.bg-white div.overlay { background-color:white;}
.home-slider-frame.bg-black div.overlay { background-color:black;}
/* }}} Colours */

.home-slider-frame .overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  opacity: .8;
}

/* {{{ Frames */
.home-slider-frames { max-height:500px; overflow:hidden }
.home-slider-frame {
  width:100%;
  margin:0 auto;
  height:0;
  min-height:400px;
  padding-bottom: clamp(400px, 37.5%, 500px);
}
.home-slider-frames { position:relative; overflow:hidden; }
.home-slider-frame { position:absolute; }
.home-slider-frame:first-child { position:relative; }
/* }}} Frames */

/* {{{ content layout */
.home-slider-content {
  overflow: hidden;
  width:100%;
  max-width:var(--content-width);
  margin:0 auto;
  height: clamp(400px, 37.5vw, 500px);
  inset: 0;
  display: flex;
  flex-direction: row;
}

.frame-text-content {  width:100%; margin:0 auto;z-index: 3;}
.frame-text-content.align-top{ align-self: start;padding-top:30px;}
.frame-text-content.align-center{ align-self: center;}
.frame-text-content.align-bottom{ align-self: end;padding-bottom:30px;}

/* .frame-image-content {width:45%;} */
.home-slider-frame img.slide-img {
  display: block;
  width:100%;
  height: 100%;

}
.home-slider-content.img-cover img.slide-img {object-fit:cover;}
.home-slider-content.img-contain img.slide-img {object-fit:contain;}
.home-slider-content.img-full img.slide-img {object-fit: cover;position: absolute;inset: 0;z-index: 1;}
/* }}} content layout */

/* {{{ Text */
.frame-text-content h2 {
  font-size: 45px;
  line-height: 50px;
  margin: .5em auto;
  font-weight:700;
}
.frame-text-content.title-center { text-align: center; }
.frame-text-content.title-left { text-align: left; }
.frame-text-content.title-right { text-align: right; }

.frame-text-content p {
  font-size: 40px;
  font-weight:400;
  margin: 0 auto;
}
.frame-text-content .banner-link {
  font-size: 24px;
  margin: 1em 0 0;
  display: inline-block;
  font-weight: 700;
}
/* }}} Text */

/* {{{ Slider Controls */
#home-banner-nav {
    position: absolute;
    bottom: 0;
    right: 20px;
    z-index:9;
}
#home-banner-nav ul { list-style:none; margin:0; padding:0; text-align:center;}
#home-banner-nav li { display:inline-block; cursor: pointer; min-width:30px; font-size:60px; color:#fff; opacity:.3;}
#home-banner-nav li.active {opacity:1; }
#home-banner-nav ul:has(li:only-child) { display: none; } /* Hide nav if only 1 slide */

#home-banner-nav.bg-light-blue li,
#home-banner-nav.bg-dark-blue li,
#home-banner-nav.bg-logo-red li,
#home-banner-nav.bg-logo-blue li,
#home-banner-nav.bg-black li { }
#home-banner-nav.bg-white li { color:#000; }
/* }}} */

@media screen and (max-width: 1220px) {
  .frame-text-content h2 {
    font-size: 30px;
    line-height: 40px;
    font-weight:700;
  }
  .frame-text-content p { font-size: 18px;}
  .frame-text-content { margin:20px; width: calc(100% - 40px); padding:20px;  }
}

@media screen and (max-width: 880px) {
  .frame-image-content.hide-image-mobile { display:none }
  .frame-text-content h2 {
    font-size: 36px;
    line-height: 36px;
    margin: .2em auto;
    font-weight:700;
  }
  .frame-text-content p {
    font-size: 19px;
    font-weight:400;
    margin: 0 auto;
  }
  .frame-text-content .banner-link {
    font-size: 24px;
    margin: 0.5em 0 0;
    display: inline-block;
    font-weight: 700;
  }
}

/*
@media screen and (min-width: 781px) {
  .so-widget-jwa-home-slider {
    display:block;
  }
}
*/

@media screen and (max-width: 700px) {
  .frame-text-content h2 {font-size: 28px; line-height: 32px;}
  .frame-text-content p { line-height: 24px;}
  .frame-text-content .banner-link {font-size: 20px; margin: .75em 0 0;}
}

@media screen and (max-width: 400px) {
  .frame-text-content h2 {font-size: 24px; line-height: 26px; }
  .frame-text-content p { font-size: 16px;line-height: 22px;}
  .frame-text-content .banner-link {
    font-size: 20px;
    margin: .75em 0 0;
  }
}

/*
@media screen and (max-width: 1220px) { }
*/