.bannerpreview { width: 600px }
.banner .slide, .bannerpreview .slide { position: relative; }
.banner .slide img, .bannerpreview img { width: 100%; }

.banner .slick-prev { left: 0px; }
.banner .slick-next { right: 6px; }
.banner .slick-dots { bottom: -30px; }
.banner .slick-dots li button:before { font-size: 8px !important;  }

.overlay { display: flex; flex-direction: column; position: absolute; background-color: #000; background:rgba(0,0,0,0.6); padding: 9px; }
.overlay.nobg { background: none; }
.overlay .heading { overflow: hidden; }
.overlay .subtext { overflow: hidden; margin: 10px 0 0; }
.overlay p { display: inline; color: white; margin: 0 .3em 0 0; line-height: initial; box-decoration-break: clone; -webkit-box-decoration-break: clone; padding: .2em; }
.overlay .redbutton { display: block; color: white; font-size: 7pt; margin: auto 10px;  }
.overlay .bannerbutton .text { color: white; }
.overlay .bannerlink { text-align: right; display: table-cell; vertical-align: middle; } 
.bannerlink .redbutton a:after { box-sizing: none !important; display: inline-block;}

.overlay.TOP, .overlay.CENTER, .overlay.BOTTOM { text-align: center; }
.overlay.TOP, .overlay.BOTTOM { width: 100%; }
.overlay.TOP { top: 0; }
.overlay.BOTTOM { bottom: 0; }
.overlay.CENTER { top: 25%; left: 25%; width: 50%; height: 50%; }

.overlay.LEFT_TOP, .overlay.LEFT, .overlay.LEFT_BOTTOM, .overlay.RIGHT_TOP, .overlay.RIGHT, .overlay.RIGHT_BOTTOM { top: 0px; width: 25%; height: 100%; }
.overlay.LEFT_TOP.nobg, .overlay.LEFT.nobg, .overlay.LEFT_BOTTOM.nobg, .overlay.RIGHT_TOP.nobg, .overlay.RIGHT.nobg, .overlay.RIGHT_BOTTOM.nobg { width: 50%; }
.overlay.LEFT_TOP .redbutton, .overlay.LEFT .redbutton, .overlay.LEFT_BOTTOM .redbutton, .overlay.RIGHT_TOP .redbutton, .overlay.RIGHT .redbutton, .overlay.RIGHT_BOTTOM .redbutton { margin: 5px 0px; }
.overlay.LEFT_TOP, .overlay.LEFT, .overlay.LEFT_BOTTOM { left: 5%; }
.overlay.RIGHT_TOP, .overlay.RIGHT, .overlay.RIGHT_BOTTOM { right: 5%; text-align: right; }
.overlay.RIGHT_TOP p, .overlay.RIGHT p, .overlay.RIGHT_BOTTOM p { margin: 0 0 0 .3em; }
.overlay.LEFT, .overlay.RIGHT, .overlay.CENTER { justify-content: center; }
.overlay.LEFT_BOTTOM, .overlay.RIGHT_BOTTOM { justify-content: flex-end; }

.bannerpreview .overlay.LEFT_TOP, .bannerpreview .overlay.LEFT, .bannerpreview .overlay.LEFT_BOTTOM, .bannerpreview .overlay.RIGHT_TOP, .bannerpreview .overlay.RIGHT, .bannerpreview .overlay.RIGHT_BOTTOM { height: calc(100% - 2px) !important; }
.bannerpreview .overlay .redbutton { font-size: 8pt; } 

@media screen and (min-width: 300px)
{
	.overlay.RIGHT_TOP, .overlay.RIGHT, .overlay.RIGHT_BOTTOM { padding-right: 4px; }
	.overlay.LEFT_TOP, .overlay.LEFT, .overlay.LEFT_BOTTOM { padding-left: 4px; }
	.overlay .redbutton { font-size: 6pt;  } 
}

@media screen and (min-width: 400px)
{
  .overlay .redbutton { font-size: 8pt;  } 
}

@media screen and (min-width: 600px)
{
  .overlay .redbutton { font-size: 10pt; padding: 8px; } 
}