﻿/*slider controls for 16:9 slideshow*/
.slide-control { position: absolute; top: 0; height: 100%; padding-top: 0; width: 40px; cursor: pointer; color: #fff; z-index: 100; display: block; text-shadow: 1px 1px #4c4c4c; }
.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; }
/*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 .pagerContainer { position: absolute; bottom: 18px; right: 20px; z-index: 101; }
.top-rotator a.page { width: 20px; height: 20px; margin: 3px 0px 0px 5px; display: inline-block; text-decoration: none; background: #333; color: white; text-align: center; font-size: 11px; line-height: 20px; }
.top-rotator a.page:hover { background: #45668E; transition: all 0.35s ease; }
.top-rotator a.page.activeSlide { background: #45668E; }
.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 { 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 { 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 .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; }

/*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.pagerContainer { 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; }

  .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 }
}
