.DVIDSVideoPlayer {padding-top:40px; padding-bottom:400px; background-position: bottom; background-size: cover; background-repeat: no-repeat; background-image: url(/DesktopModules/DVIDSVideoPlayer/templates/MarinesHome3/images/HomeVideo-ImageBG2x.jpg); }
.DVIDSVideoPlayer h1 { font-size: 48px; margin-top: 100px; margin-bottom: 18px }

.DVIDSVideoPlayerItem { border: 10px solid #1c1c1c }
.DVIDSBottom { display: flex; margin-top: 1em; }

.DVIDSCarouselSection { display: flex; width: 100%; align-items: flex-start; position: relative; justify-content: space-between; margin-left: -2.5em; }
.DVIDSCarouselImgTitle { margin-top: 30px; flex: 0 0 30%; max-width: 30%; margin-right: -15px;  z-index: 999; cursor: pointer; padding-right: 1em; }
.DVIDSCarouselImgTitle div { display: inline-block; border-bottom: 2px solid #fff; width:100% }
.DVIDSCarouselImgTitle div:hover { border-color:#960000 }
.DVIDSCarouselImgTitle span { display: block;  font-size: 18px; color: #960000; text-transform: uppercase; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; font-family: 'Colossalis'; font-weight: 100; letter-spacing: .2em; }
.DVIDSCarousel { max-width: 200px }

.DVIDSCarouselImgWrapper { position: relative; width:100%; max-width:200px }
.DVIDSCarouselImgWrapper div { position: absolute; top: 0; bottom: 0; right: 0; left: 0; width: 100%; background-position: center; background-size: cover; background-repeat: no-repeat; }
.DVIDSCarouselImgWrapper:after { content: ' '; padding-top: 66.67%; display:block }

.DVIDSCarouselPager {}
.DVIDSCarouselPagerInner{padding:30px 15px; display:flex}
.DVIDSCarouselPager span { color: #fff !important; letter-spacing: .2em; font-family: 'Colossalis'; }
.DVIDSCarouselRightPager { cursor:pointer; position:relative;padding-right: 100px; background: transparent url(/portals/_default/skins/MarinesTheme/Resources/img/right-arrow-white@2x.png) 100% no-repeat; background-size: 24px; width: 24px; height: 24px }
.DVIDSCarouselRightPager:after { content: ''; position: absolute; bottom: -5px; left: 0px; width: 0%; border-bottom: 2px solid #ffffff; transition: all 0.4s; }
.DVIDSCarouselRightPager:hover:after { width: 50%; }
.DVIDSCarouselLeftPager { cursor: pointer; margin-right: 30px; background: transparent url(/portals/_default/skins/MarinesTheme/Resources/img/left-arrow-white@2x.png) 100% no-repeat; background-size: 24px; width: 24px; height: 24px }

.DVIDSVideoPlayerInner { display:flex; width:100%; }

.DVIDSVideoPlayerLeft {flex: 0 0 25%; padding-right:20px; max-width:25%}
.DVIDSVideoPlayerLeft p{ padding-right:75px}
.DVIDSVideoPlayerRight { flex: 0 0 76%; max-width:76% }

.DVPPlayerBackground { margin-bottom: 0; }
.DVIDSMoreButtonLarge{ display:flex}

.DVIDSMoreButton{ display:flex;justify-content:center}
.DVIDSMoreButton a{margin:0; color:#fff !important}
.DVIDSMoreButtonLarge a { color:#fff !important }

.mejs__overlay-button{     background-image: url(images/PlayButtons.png) !important; width:150px !important; height:72px !important; background-position:0 !important }
.mejs__overlay-button:hover { background-image: url(images/PlayButtons_Hover.png) !important }
.DVIDSVideoPlayer .video-overlay {background:linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,.4) 25%, rgba(0,0,0,.9) 100%); position: absolute; bottom: -1px; left: 0; width: 100% !important; height: auto !important; padding: 20px 0 20px 20px; color: #fff; line-height:16px }

@media( max-width:1200px)
{
    .DVIDSVideoPlayerLeft p { padding-right: 50px }
    .DVIDSVideoPlayer { padding-bottom: 0 }
    .DVIDSCarouselImgTitle{ flex:0 0 45%; max-width:45%}
    .DVIDSCarouselLeftPager { margin-right: 15px; }
    .DVIDSCarouselRightPager { padding-right: 80px; }
    .DVIDSBottom { padding-bottom: 1em; }
    .DVIDSCarouselSection { justify-content: space-around; margin: 0; }
}

@media( max-width:992px) {
    .DVIDSMoreButton { padding-top:30px}
    .DVIDSMoreButton a{ width:100%; text-align:center}
    .DVIDSVideoPlayerInner{ flex-direction:column}
    .DVIDSVideoPlayerLeft { flex: 1 0 auto; text-align:center; max-width: 100%; padding-right: 0 }
    .DVIDSVideoPlayerLeft h1 { margin: 0; padding-bottom: 15px }
    .DVIDSVideoPlayerLeft p { padding-right: 0 }
    .DVIDSVideoPlayerRight { flex: 1 0 auto ; max-width: 100%; position: relative; }
    .DVIDSVideoPlayerOuter { max-width: 90%; margin: 0 auto; }
    .DVIDSCarousel{ padding-top:0}
    .DVIDSCarouselImgWrapper{max-height:100px}
    .DVIDSCarouselImgTitle span{ color:#fff }
    .DVIDSCarouselSection{ justify-content:space-around; margin: 0;}
    .DVIDSCarouselImgTitle{ flex:0 0 50%}
    .DVIDSBottom { max-width: 98%; }
}
@media( max-width:767px) {
    .DVIDSCarouselSection { display: inline-block; margin: 15px 30px 15px 30px; justify-content: center; }
    .DVIDSCarouselPager{width:50%;}
    .DVIDSCarouselImgTitle { width: 100% }
    .DVIDSCarouselPagerInner{ padding:15px 0}
    .DVIDSCarousel { position:absolute !important; right:0; top:0; width: 40% !important }
    .DVIDSCarouselImgTitle span { white-space: normal; font-size: 12px; width: 20em; }
    .DVIDSVideoPlayer .video-overlay {font-size:12px; padding-bottom:10px}
    .DVIDSMoreButton { padding-top: 0 }
    .DVIDSBottom { max-width: 98%; margin: 0; }
    .DVIDSMoreButtonLarge { margin-top: -1em; }
}

.DVIDSVideoPlayer.no-videos .DVIDSVideoPlayerItem {
    border: 10px solid #1c1c1c;
    height: 300px;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items:center;
}