﻿/*slider controls for 16:9 slideshow*/
.slide-control { position: absolute; top: 0; height: 100%; width: 40px; margin: 0; padding: 0; appearance: none; -webkit-appearance: none; cursor: pointer; color: #fff; z-index: 100; display: block; border: 0; border-radius: 0; background: transparent; box-shadow: none; font: inherit; line-height: 1; text-align: center; text-shadow: 1px 1px #4c4c4c; }
.slide-control.right { right: 0; }
.slide-control.left { left: 0; }
.slide-control .fa, .slide-control .glyphicon { font-size: 45px; line-height: 1; margin-top: -23px; position: absolute; top: 50%; left: 0; right: 0; text-align: center; }
.slide-control .fa, .slide-control .glyphicon { display: none; }
.slide-control:before { content: ""; position: absolute; top: 50%; width: 18px; height: 18px; border: solid currentColor; border-width: 3px 3px 0 0; filter: drop-shadow(1px 1px 0 #4c4c4c); }
.slide-control.left:before { left: 14px; transform: translateY(-50%) rotate(-135deg); }
.slide-control.right:before { right: 14px; transform: translateY(-50%) rotate(45deg); }
.slide-control:focus, .slide-control:focus-visible { outline: 3px solid ButtonText !important; outline-offset: -5px !important; box-shadow: inset 0 0 0 5px ButtonFace !important; }
/*Top Rotator*/
.top-rotator { background: #eee; 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; justify-content: flex-end; gap: 8px; padding: 0 0 6px 0; overflow: visible; }
.top-rotator .pagerControls .pagerContainer { display: flex; align-items: center; gap: 5px; }
.top-rotator .slideContainer > .pagerContainer { position: absolute; bottom: 18px; right: 20px; z-index: 101; }
.top-rotator .slideContainer > .pagerContainer .page { margin: 3px 0 0 5px; }
.top-rotator .page { width: 20px; height: 20px; margin: 0; padding: 0; display: inline-block; border: 0; text-decoration: none; background: #333; color: #fff; text-align: center; font-size: 11px; line-height: 20px; cursor: pointer; }
.top-rotator .page:hover { background: #123d64; transition: all 0.35s ease; }
.top-rotator .page.activeSlide { background: #123d64; }
.top-rotator .page:focus, .top-rotator .page:focus-visible { outline: 2px solid ButtonText; outline-offset: 1px; box-shadow: 0 0 0 2px ButtonFace; }
.top-rotator .slide { width: 100%; }
.top-rotator .top { overflow: hidden; height: 0; padding-top: 56.25%; background: #fff; position: relative; }
.top-rotator a.slide-inner, .top-rotator div.slide-inner { display: block; background-color: white; 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; background: #eee; }
.top-rotator .creator { position: absolute; left: 15px; bottom: 1px; color: #CFCCC5; }
.top-rotator .slideTitle { color: #123d64; 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 #45668E; 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: -35px; right: 15px; }
.top-rotator-2 .slideContainer > .pagerContainer { bottom: -35px; right: 15px; }
.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 { background-color: transparent; }
.top-rotator-2 .split-left a.slide-inner.slide-inner-portrait { }
.top-rotator-2 .split-right { display: block; position: relative; padding: 20px; background: #eee; font: 100% "Open Sans", Arial, sans-serif; }
.top-rotator-2 .slideLinks a.link { display: inline-block; margin: 2px 0px 0px 4px; color: #fff; background: #11375c; padding: 4px 8px !important; text-decoration: none; }
.top-rotator-2 .slideLinks a.link:hover { background: #222; }

.top-rotator.slideshow{}
.top-rotator.slideshow .bottom{background:transparent;position:absolute;bottom:0;max-height:100%;overflow:hidden;
  left:0; right:0;
  background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.85) 100%);
  background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.85) 100%); 
  background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0.85) 100%); 
}
.top-rotator.slideshow .slideText{max-width: 700px;margin:0 auto;}
.top-rotator.slideshow .slideTitle{font-size:30px;font-family: 'Orbitron', sans-serif;text-transform:uppercase;margin-bottom:0;}
.top-rotator.slideshow .slideTitle a, .top-rotator.slideshow .slideCaption{color:#fff;text-shadow: 3px 3px 2px rgba(0,0,0,.75)}
.top-rotator.slideshow .slideTitle a{}
.top-rotator.slideshow .slideCaption{font-size:18px;text-shadow:2px 2px 0px rgba(0,0,0,.75);}
.top-rotator.slideshow a.slide-inner.slide-inner-portrait{background-color:#222;}
.top-rotator.slideshow .DvidsVideo, .top-rotator.slideshow .YouTubeContainer{z-index:1;} /*puts the video above that caption when played and display block is applied to video container*/


.slideshowTemplate .slideLinks a.link { color: #fff; }
.slideshowTemplate .slideLinks a.link:hover { color: #eee; }

.top-rotator .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 .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 .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 .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 .slideshow-autoplay-control--noprogress .slideshow-autoplay-progress {
  display: none;
}

.top-rotator .slideshow-autoplay-progress-track,
.top-rotator .slideshow-autoplay-progress-value {
  fill: none;
  stroke-width: 2;
  stroke: var(--slideshow-autoplay-progress-track);
}

.top-rotator .slideshow-autoplay-progress-value {
  stroke: var(--slideshow-autoplay-progress-value);
  stroke-dasharray: 113;
  stroke-dashoffset: 113;
  stroke-linecap: round;
}

.top-rotator .slideshow-autoplay-button::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  box-sizing: border-box;
}

.top-rotator .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 .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 .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 .slideshow-autoplay-button:active {
  transform: scale(0.98);
}

.top-rotator .slideshow-autoplay-button:focus,
.top-rotator .slideshow-autoplay-button:focus-visible {
  outline: 3px solid ButtonText !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 5px ButtonFace !important;
}

/*Carousel*/
.carousel-4 { height: 200px; background: none; position: relative; overflow: hidden; padding: 0px 50px; z-index: 200; visibility: hidden; }
.carousel-4 .slideContainer { z-index: 202; }
.carousel-4 .caroufredsel_wrapper{height:200px !important;}
.carousel-4 .pagerContainer { z-index: 201; } /*not sizing properly in FF. Even with triggering resize*/
.carousel-4 .slideContainer ul { list-style: none; margin: 0px; padding: 0px; }
.carousel-4 .slideContainer .item {width:300px; list-style: none; float: left; margin: 0px 6px; display: block; cursor: pointer; overflow: hidden; position: relative; text-align:center;background:rgba(0,0,0,.05);}/*fred gets confused sometimes when images have different widths*/
.carousel-4 .slideContainer .item a{display:inline-block; text-align:center;position:relative;}
.carousel-4 .slideContainer .item img{height: 200px;  }
.carousel-4 .smallVideoOverlay { background: url(../images/dgovImageSprite.png) -48px -7px no-repeat; width: 70px; height: 70px; position: absolute; left: 50%; top: 50%; z-index: 2; margin: -35px 0 0 -35px; transform: scale(0.6);}
.carousel-4 .previousButton, .carousel-4 .nextButton { width: 40px; color: #fff; background: rgba(44,44,44,.2); cursor: pointer; transition: all .2s;}
.carousel-4 .previousButton:hover, .carousel-4 .nextButton:hover{ background: rgba(255,255,255,.9); }
.carousel-4:hover .carousel-control{opacity:7;}
.carousel-4 .carousel-control .fa { font-size: 45px !important; margin-top: -23px !important; transition:all .2s;text-shadow:none;}
.carousel-4 .carousel-control:hover .fa{color:#ccc;text-shadow:none;}
.carousel-4 .previousButton { left: 0; right:auto; }
.carousel-4 .nextButton { right: 0; left:auto;}
.carousel-4 a .slide-title{padding: 5px 5px 10px;font-weight:700;background:rgba(0,0,0,.4);color:#fff;position: absolute; bottom:0;right:0;left:0;max-height:100%;overflow:hidden;text-align:left;}


@media (max-width: 1199px) {
}

@media (max-width: 991px) {
}

@media (max-width: 767px) {
  .top-rotator div.pagerControls, .top-rotator div.pagerContainer { display: none; }
  .top-rotator.slideshow div.pagerControls { display: flex; bottom: 12px; right: 15px; padding-bottom: 0; }
  .top-rotator.slideshow .pagerControls div.pagerContainer { display: flex; }
  .top-rotator.slideshow .bottom { padding-bottom: 55px; }
  .top-rotator.slideshow .bottom .slideText { transform: translateY(8px); }
  .top-rotator-2 div.pagerControls { display: flex; }
  .top-rotator-2 .pagerControls div.pagerContainer { display: flex; }
  .top-rotator-2 .slideContainer { margin-bottom: 0; }
  .top-rotator-2 .pagerControls { top: auto; bottom: 12px; right: 15px; padding-bottom: 0; }
  .top-rotator-2 .split-right { height: 250px; max-height: 250px; overflow: hidden; box-sizing: border-box; }
  .top-rotator-2 .split-right .slideText { height: 170px; max-height: 170px; overflow-y: auto; }
  .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; }

  .top-rotator.slideshow .slideTitle{font-size:20px;}
}
@media (max-width: 600px) {
  .top-rotator.slideshow .slideCaption{display:none;}

}

@media (max-width: 500px) {
    .carousel-4 a .slide-title{ display:none }
}
