﻿/*slider controls for 16:9 slideshow*/
.slide-control { appearance: none; -webkit-appearance: none; background: transparent; border: 0; color: inherit; position: absolute; top: 0; height: 0; padding: 56.25% 0 0; width: 40px; cursor: pointer; z-index: 100; display: none; }
.slide-control.right { right: 0; }
.slide-control.left { left: 0; }
.slide-control .fa { font-size: 45px; line-height: 1; margin-top: -23px; position: absolute; top: 50%; left: 0; right: 0; text-align: center; }
.slide-control:hover .fa { color: #222; }
.slide-control:focus,
.slide-control:focus-visible { outline: 2px solid ButtonText; outline-offset: -3px; box-shadow: inset 0 0 0 2px ButtonFace; }
/*Top Rotator*/
.top-rotator {visibility: hidden; }
.top-rotator .slideContainer { position: relative; z-index: 11; }
.top-rotator .slideContainer:after { content: ""; display: table; clear: both; }
.top-rotator a { transition: all 0.25s ease; }
.top-rotator .pagerControls { position: absolute; bottom: 18px; right: 20px; z-index: 101; display: flex; align-items: center; gap: 8px; }
.top-rotator .pagerContainer { display: flex; align-items: center; gap: 5px; }
.top-rotator .page { appearance: none; -webkit-appearance: none; border: 0; width: 20px; height: 20px; margin: 3px 0px 0px 5px; display: inline-block; text-decoration: none; text-align: center; font-size: 11px; line-height: 20px; padding: 0; cursor: pointer; }
.top-rotator .page:hover { transition: all 0.35s ease; }
.top-rotator .page:focus,
.top-rotator .page:focus-visible { outline: 2px solid ButtonText; outline-offset: 2px; box-shadow: 0 0 0 2px ButtonFace; }

.top-rotator .slide { width: 100%; }
.top-rotator .top { overflow: hidden; height: 0; padding-top: 56.25%; position: relative; }
.top-rotator a.slide-inner, .top-rotator div.slide-inner { display: block; background-repeat: no-repeat; text-decoration: none; position: absolute; top: 0; right: 0; left: 0; bottom: 0; background-size: cover; background-position: 50% 50%; }
.top-rotator a.slide-inner.slide-inner-portrait, .top-rotator div.slide-inner.slide-inner-portrait { background-size: auto 100%; background-position: 50% top; }
.top-rotator .slide img { position: absolute; left: -999em; }
.top-rotator .bottom { display: block; position: relative; padding: 20px; }
.top-rotator .creator { position: absolute; left: 15px; bottom: 1px; }
.top-rotator .slideTitle { font-size: 20px; font-weight: bold; padding: 0; margin: 0 0 10px; }
.top-rotator .slideCaption { display: block; font-size: 14px; margin-bottom: 10px; min-height: 40px; }
.top-rotator .slideLinks { font-size: 12px; max-width: 50%; min-height: 20px; }
.top-rotator .slideLinks a.link { display: inline-block; border-left: 1px solid; margin: 0 7px 0 0px; padding: 0 0 0 7px; line-height: 1em; font-size: 14px; }
.top-rotator .slideLinks a.link:first-child { border: none; padding: 0; }
.top-rotator-imagedistortion { width: 100%; height: 100%; top: 0px !important; left: 0px !important; }
.top-rotator .smallVideoOverlay { background: url('../images/dgovImageSprite.png') 0px -37px no-repeat no-repeat; width: 14px; height: 14px; position: absolute; left: 50%; top: 50%; margin-left: -7px; margin-top: -7px; z-index: 2; }
.top-rotator .videoOverlay { background: url('../images/dgovImageSprite.png') -44px 0px no-repeat no-repeat; width: 82px; height: 82px; position: absolute; left: 50%; top: 50%; margin-left: -41px; margin-top: -41px; z-index: 2; }
.top-rotator .YouTubeContainer, .top-rotator .DvidsVideo { position: absolute; top: 0; right: 0; bottom: 0; left: 0; }

.top-rotator-2 { }
.top-rotator-2 .slideContainer { margin-bottom: 40px; }
.top-rotator-2 .pagerControls { bottom: -39px; right: 15px; }
.top-rotator-2 .pagerContainer { min-height: 28px; position: relative; top: -4px; }
.top-rotator-2 .page { display: flex; align-items: center; justify-content: center; margin: 0; line-height: 1; }
.top-rotator-2 .split { width: 50%; float: left; }
.top-rotator-2 .slide .split-left { overflow: hidden; height: 0; padding-top: 56.25%; position: relative; }
.top-rotator-2 .split-left a.slide-inner { }
.top-rotator-2 .split-left a.slide-inner.slide-inner-portrait { }
.top-rotator-2 .split-right { display: block; position: relative; padding: 20px;font: 100% "Open Sans", Arial, sans-serif; }
.top-rotator-2 .slideLinks a.link { display: inline-block; margin: 2px 0px 0px 4px;padding: 4px 8px !important; text-decoration: none; }

/* Autoplay control */
.top-rotator-2 .slideshow-autoplay-control {
  --slideshow-autoplay-bg: linear-gradient(165deg, rgba(92, 92, 92, 0.86), rgba(58, 58, 58, 0.86));
  --slideshow-autoplay-bg-hover: linear-gradient(165deg, rgba(105, 105, 105, 0.92), rgba(64, 64, 64, 0.92));
  --slideshow-autoplay-border: rgba(255, 255, 255, 0.45);
  --slideshow-autoplay-border-hover: rgba(255, 255, 255, 0.62);
  --slideshow-autoplay-icon: #fff;
  --slideshow-autoplay-progress-track: rgba(255, 255, 255, 0.18);
  --slideshow-autoplay-progress-value: rgba(255, 255, 255, 0.72);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.top-rotator-2 .slideshow-autoplay-control--light {
  --slideshow-autoplay-bg: linear-gradient(165deg, rgba(255, 255, 255, 0.92), rgba(232, 232, 232, 0.92));
  --slideshow-autoplay-bg-hover: linear-gradient(165deg, rgba(255, 255, 255, 0.98), rgba(242, 242, 242, 0.98));
  --slideshow-autoplay-border: rgba(0, 0, 0, 0.18);
  --slideshow-autoplay-border-hover: rgba(0, 0, 0, 0.28);
  --slideshow-autoplay-icon: #222;
  --slideshow-autoplay-progress-track: rgba(0, 0, 0, 0.12);
  --slideshow-autoplay-progress-value: rgba(0, 0, 0, 0.5);
}

.top-rotator-2 .slideshow-autoplay-button {
  position: relative;
  display: block;
  width: 28px;
  height: 28px;
  margin: 0;
  padding: 0;
  appearance: none;
  -webkit-appearance: none;
  box-sizing: border-box;
  overflow: visible;
  border: 1px solid var(--slideshow-autoplay-border);
  border-radius: 50%;
  background: var(--slideshow-autoplay-bg);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.18);
  cursor: pointer;
  line-height: 1;
  transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.top-rotator-2 .slideshow-autoplay-progress {
  position: absolute;
  inset: 1px;
  width: auto;
  height: auto;
  transform: rotate(-90deg);
  transform-origin: center;
  transform-box: fill-box;
  pointer-events: none;
  overflow: visible;
}

.top-rotator-2 .slideshow-autoplay-control--noprogress .slideshow-autoplay-progress {
  display: none;
}

.top-rotator-2 .slideshow-autoplay-progress-track,
.top-rotator-2 .slideshow-autoplay-progress-value {
  fill: none;
  stroke-width: 2;
  stroke: var(--slideshow-autoplay-progress-track);
}

.top-rotator-2 .slideshow-autoplay-progress-value {
  stroke: var(--slideshow-autoplay-progress-value);
  stroke-dasharray: 113;
  stroke-dashoffset: 113;
  stroke-linecap: round;
}

.top-rotator-2 .slideshow-autoplay-button::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  box-sizing: border-box;
}

.top-rotator-2 .slideshow-autoplay-play::before {
  width: 0;
  height: 0;
  transform: translate(-35%, -50%);
  border-style: solid;
  border-color: transparent transparent transparent var(--slideshow-autoplay-icon);
  border-width: 6px 0 6px 8px;
}

.top-rotator-2 .slideshow-autoplay-pause::before {
  width: 10px;
  height: 11px;
  background: linear-gradient(var(--slideshow-autoplay-icon), var(--slideshow-autoplay-icon)), linear-gradient(var(--slideshow-autoplay-icon), var(--slideshow-autoplay-icon));
  background-size: 3px 11px, 3px 11px;
  background-position: 1px 0, 6px 0;
  background-repeat: no-repeat;
}

.top-rotator-2 .slideshow-autoplay-button:hover {
  background: var(--slideshow-autoplay-bg-hover);
  border-color: var(--slideshow-autoplay-border-hover);
  box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.24);
}

.top-rotator-2 .slideshow-autoplay-button:active {
  transform: scale(0.98);
}

.top-rotator-2 .slideshow-autoplay-button:focus,
.top-rotator-2 .slideshow-autoplay-button:focus-visible {
  outline: 3px solid ButtonText !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 5px ButtonFace !important;
}



@media (max-width: 767px) {
  .top-rotator div.pagerControls { display: none; }
  .top-rotator .slide-control { display: block; }
  .top-rotator div.slideContainer div.slide div.bottom div.slideLinks { min-height: 0; }
  .top-rotator-2 .split { width: auto; float: none; }

}

