@charset "utf-8";
/* CSS Document */

/************************************************************************/
/****************** 2018 Missile Defense Review Styles ******************/
/************************************************************************/


/***************************************************
    STRUCTURE
***************************************************/

.missile-title-white {
	display: block;
    font-family: "Lato", Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
    text-transform: uppercase;
    font-weight: 700;
    color: #fff;
    text-align: center;
    font-size: 2.5rem;
    padding-bottom: 2rem;
}
.missile-title-blue {
	display: block;
    font-family: "Lato", Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
    text-transform: uppercase;
    font-weight: 700;
    color: #355e93;
    text-align: center;
    font-size: 2.5rem;
    padding: 0 1rem 2rem;
}


/***************************************************
    BANNER
***************************************************/
.banner {
	background: url("/Portals/1/Interactive/2018/11-2019-Missile-Defense-Review/4914435.jpg") no-repeat;
    clear: right;
	background-position: top;
	background-attachment: fixed;
	background-size: cover;
}

.banner-overlay { 
	background: rgba(0,0,0,0.5);
	padding: 75px 0px 0px;
}
.banner-content {
	padding: 4rem 0 5rem;
	text-align: center;
	animation: fadein 3s;
    -moz-animation: fadein 3s;
    -webkit-animation: fadein 3s;
    -o-animation: fadein 3s;
}

@keyframes fadein {
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}

.banner-content h1 {
	color: #fff;
	font-family: 'Oswald', sans-serif;
	font-style: normal;
	font-size: 4rem;
	padding: 0 15px;
}

.banner-content p {
	color: #fff;
	max-width: 1088px;
	margin: 0 auto;
	padding: 1rem 3rem 2rem 3rem;
}
.banner-content .title-half {
	display: inline-block;
}
.banner .logo {
	width: 140px;
	height: auto;
}


/***************************************************
 EXECUTIVE SUMMARY
***************************************************/

#dnn_ctr1015_ModuleContent .slideshow-single-side figure h1 sup {
	display:none;
}

.DnnModule .DnnModule-DNN_HTML .DnnModule-1017 {
	padding: 2rem 0 3rem;
}

.executive {
	text-align: center;
	padding: 5rem 2rem;
}

.executive .dgov-grid::after {
	content: '';
    width: 70%;
    height: 5px;
	margin: 40px auto 0;
    background-color: #355e93;
}

.summary-block-top {
	padding: 1rem 0 1rem;
}

.summary-block-bottom {
	margin-top: 3rem;
    padding: 0 40px;
}

.report {
	text-align: center;
	background: linear-gradient(#bebebe, white);
}

.right-video {
	background: linear-gradient(#bebebe, white);
}

.report img {
	padding-bottom: 1rem;
	max-width: 80%;
}

.hover-title {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black;
}

.hover-title .hover-title-text {
	visibility: hidden;
	width: 100%;
	background-color: #adadad;
	color: #355e93;
	font-size: 17px;
	font-weight: bold;
	text-align: center;
	border-radius: 6px;
	padding: 8px 10px;
	position: absolute;
	z-index: 1;
	transform: translate(-50%,0);
	top: 93%;
}

.hover-title:hover .hover-title-text {
  visibility: visible;
}

.right-video .smallVideoOverlay {
	bottom: 275px!important;
}

.modal-banner {
	background: url("/Portals/1/Interactive/2018/11-2019-Missile-Defense-Review/4914435.jpg") no-repeat;
	padding: 4rem 0;
	background-size: cover;
	background-position: top;
}

.key-takeaways h3 {
	text-align: center;
	padding: 2rem 1rem 1rem;
	color: #355e93;
}

.key-takeaways .takeaway-title {
	display: inline-block;
}

.takeaway-list ul {
    margin: 1rem 2rem;
}

.takeaway-list li {
    padding: 1rem 0;
}

.takeaway-list .list-title {
	text-align: center;
	font-size: 1.4rem;
}


/*********************************
 EXECUTIVE SUMMARY AFTER LAUNCH
**********************************/
.al-executive {
	text-align: center;
	padding: 5rem 2rem;
}

.al-executive h3 {
	font-size: 34px;
	padding: 25px 0;
}

.al-executive .dgov-grid::after {
	content: '';
    width: 70%;
    height: 5px;
	margin: 40px auto 0;
    background-color: #355e93;
}

.al-report {
	text-align: center;
	background: linear-gradient(#bebebe, white);
}

.al-report img {
	padding-bottom: 1rem;
	max-width: 80%;
}

.al-summary-block-top {
	padding: 3rem 0 2rem;
}

.al-summary-block-bottom {
	margin-top: 40px;
}

.al-right-video {
	background: linear-gradient(#bebebe, white);
	margin-left: 3rem;
	padding: 1rem 2rem;
}

.al-president-quote {
	margin-top: 30px;
	font-style: italic;
}

@media screen and (max-width: 991px) {
	.al-executive h3 {
		font-size: unset;
	}
	.al-right-video {
		margin-left: 0;
		margin-top: 40px;
		padding: 0 1rem;
	}
}


/***************************************************
    VIDEOS
***************************************************/
.videos {
	padding: 4rem 0 5rem;
}

.GenericSlideshow .slideWrapper .slideContainer .rsOverflow .GenericSlideshowItem .top a.slideLink {
	cursor: pointer!important;
}

.GenericSlideshow .slideWrapper .slideContainer .rsOverflow .GenericSlideshowItem .top a.slideLink::before {
	content: "";
	background: url("/Portals/1/Interactive/2018/11-2019-Missile-Defense-Review/play-button.svg") no-repeat;
	display: block;
	z-index: 999;
	position: absolute;
	top: 40%;
	left: 40%;
	height: 150px;
	width: 150px;
}

.GenericSlideshow .slideWrapper .slideContainer .rsOverflow .GenericSlideshowItem .top a.slideLink:hover {
	opacity: .5;
}


/***************************************************
    SLIDESHOW
***************************************************/
.slideshow-wrap {
	width: 60%;
	margin: 0 auto;
	max-width: 1200px;
}
.GenericSlideshow .rsOverflow {
	overflow: visible;
}
.GenericSlideshow .slideWrapper .slideContainer .rsOverflow .GenericSlideshowItem {
	position: relative;
}
.GenericSlideshow .slideWrapper .slideContainer .rsOverflow .GenericSlideshowItem .bottom {
	position: absolute;
	width: 100%;
	bottom: 0;
	background: rgba(0,0,0,.66);
	padding: 25px 30px;
	display: none;
}
.GenericSlideshow .slideWrapper .slideContainer .rsOverflow .GenericSlideshowItem .bottom .slideTitle {
	font-weight: bold;
	display: block;
	color: #fff;
	font-size: 1.3rem;
	line-height: 1.5rem
}
.GenericSlideshow .slideWrapper .slideContainer .rsOverflow .GenericSlideshowItem .bottom .slideCaptionDivider {
	display: none;
}
.GenericSlideshow .slideWrapper .slideContainer .rsOverflow .GenericSlideshowItem .bottom .slideCaption {
	font-size: 1.0rem;
	color: #fff;
	display: none;
}
.GenericSlideshow .slideWrapper .slideContainer .rsOverflow .GenericSlideshowItem .top a.slideLink {
	background: none;
	cursor: zoom-in;
}
.GenericSlideshow .slideWrapper .slideContainer .rsOverflow .GenericSlideshowItem img {
	width: 100%;
	height: 100%;
}
.GenericSlideshow .slideWrapper .rsNav {
	display: none;
}
.GenericSlideshow .slideWrapper .slideContainer .rsOverflow .arrowsContain {
	text-shadow: 2px 2px 2px rgba(0,0,0,0.66);
}
.GenericSlideshow .slideWrapper .slideContainer .rsArrow {
	font-size: 48px;
	color: #fff;
	text-shadow: 2px 2px 2px rgba(0,0,0,0.66);
}
.slideshow-wrap-wrap {
	overflow: hidden;
	position: relative;
}
.slideshow-wrap-wrap::before {
	content: "";
	height: 100%;
	width: 20%;
	left: 0;
	top: 0;
	background-color: #ebebeb;
	position: absolute;
	z-index: 9;
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+0,ffffff+100&1+0,0+100;White+to+Transparent */
	background: -moz-linear-gradient(left, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(left, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to right, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#00ffffff', GradientType=1 ); /* IE6-9 */
}
.slideshow-wrap-wrap::after {
	content: "";
	height: 100%;
	width: 20%;
	right: 0;
	top: 0;
	background-color: #fff;
	position: absolute;
	z-index: 9;
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+0,ffffff+100&1+0,0+100;White+to+Transparent */
	background: -moz-linear-gradient(right, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(right, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to left, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#00ffffff', GradientType=1 ); /* IE6-9 */
}
.GenericSlideshow .slideWrapper .slideContainer .rsArrowRight .rsArrowIcn:before {
	content: "\f054" !important;
	font-family: "Font Awesome 5 Free" !important;
	font-weight: 700;
}
.GenericSlideshow .slideWrapper .slideContainer .rsArrowLeft .rsArrowIcn:before {
	content: "\f053" !important;
	font-family: "Font Awesome 5 Free" !important;
	font-weight: 700;
}


/***************************************************
    STORIES
***************************************************/
#content-pane-wrap2 {
	background: #ebebeb;
	box-shadow: 0px 100px 50px -100px rgba(0,0,0,0.5) inset;
	
}
#genArticles {
	padding: 4rem 2rem 6rem;
}
#genArticles a.item {
	display: block;
	padding: 15px;
    width: 100%;
    background: #fff;
    border-radius: 4px;
    min-height: 200px;
    position: relative;
	box-shadow: 0 1px 3px rgba(0,0,0,0.02), 0 1px 2px rgba(0,0,0,0.14);
    transition: all 0.2s cubic-bezier(.25,.8,.25,1);
}
#genArticles a.item:hover {
	text-decoration: none;
	box-shadow: 0 14px 28px rgba(0,0,0,0.15), 0 10px 10px rgba(0,0,0,0.12);
}

.missile-title-blue span {
	display: inline-block;
}

#genArticles > div > a.item.item-1735014 {
	margin-bottom: 25px;
}


/***************************************************
    RESOURCES
***************************************************/

.resources {
	padding: 4rem 0 6rem;
	background: url(https://media.defense.gov/2018/Apr/05/2002039682/-1/-1/1/180328-N-IA905-2057C.JPG) no-repeat center;
   	background-size: cover;
	background-attachment: fixed;
	box-shadow: 0px 300px 200px -100px rgba(0,0,0,0.5) inset;
    clear: right;
}

.resources .missile-title-white {
	text-shadow: 1px 1px 3px rgba(0,0,0,0.5);
}

.resources .overlay {
	background: rgba(0, 0, 0, 0.6);
}

.resources .panel {
	background: rgba(0, 0, 0, 0.6);
}

.resources .panel-group {
	padding: 0 12rem;
}

.resources .panel-group .panel {
	border: none;
}

.resources .panel-heading {
	background: #355e93;
    text-align: center;
    color: #fff;
    text-decoration: none;
}

.resources .panel-heading:hover {
	text-decoration: none;
	color: #355e93;
}

.resources .panel-heading h4 {
	padding: 0 45px 0!important;
}

.resources .panel-group .panel-body {
	padding: 1rem!important;
}

.resources .panel-body li {
	padding: .5rem 2rem;
}

.resources a {
	color: #fff;
	font-weight: bold;
}

.resources a:hover {
	text-decoration: underline;
}

.resources a:focus {
	text-decoration: none;
}


/***************************************************
    REGIONAL ASSETS
***************************************************/
.regional {
	background: #ebebeb;
	box-shadow: 0px 100px 50px -100px rgba(0,0,0,0.5) inset;
	padding: 3rem 0 5rem;
}
.regional a.regional-each {
	display: block;
	text-align: center;
	padding: 15px;
    width: 100%;
    background: #fff;
    border-radius: 4px;
	height: 100%;
    min-height: 200px;
    position: relative;
	box-shadow: 0 1px 3px rgba(0,0,0,0.02), 0 1px 2px rgba(0,0,0,0.14);
    transition: all 0.2s cubic-bezier(.25,.8,.25,1);
}
.regional a.regional-each:hover {
	text-decoration: none;
	box-shadow: 0 14px 28px rgba(0,0,0,0.15), 0 10px 10px rgba(0,0,0,0.12);
	cursor: pointer;
}
.regional a.regional-each span {
	display: block;
	font-size: 1.2rem;
	padding:15px 0 5px;
}

.modal-backdrop.in {
	z-index:-1;
}

.modal-header {
	border: none;
	padding: unset;
	min-height: unset;
}


/***************************************************
    READINESS
***************************************************/
.readiness {
	padding: 2rem 0 5rem;
}

.readiness a {
	color: #fff;
}

.readiness .slide-title {
	font-size: 1.2rem;
    text-shadow: 2px 2px 8px rgba(0,0,0,0.5);
    position: absolute;
    bottom: -20px;
    left: 15px;
    right: 15px;
    padding: 1.7rem 0 1rem 1.2rem;
    color: #fff;
    font-weight: 700;
    background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0.85) 44%,rgba(0,0,0,0.95) 100%);
}
.readiness .video-duration {
	position: absolute;
    bottom: -10px;
    right: 30px;
    font-size: 1rem;
    background: rgba(0,0,0,.75);
    color: #fff;
    padding: 2px 5px;
    border-radius: 3px;
}


/***************************************************
    LINKS
***************************************************/
.links {
	background: #ebebeb;
	padding: 4rem 0;
}
.links .missile-title-white {
	color: #333;
}


/*****************************
INTERNET EXPLORER
******************************/
/*Fixed backgrounds*/
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    .banner,
	.resources {
         background-attachment: scroll;
    }
}



/***************************************************
    MEDIA QUERIES (POST LAUNCH UP ABOVE)
***************************************************/
@media screen and (max-width: 1181px) {
	.right-video .smallVideoOverlay {
		bottom: 330px!important;
	}
}

@media (min-width: 992px) {
	.GenericSlideshow .slideWrapper .slideContainer .rsOverflow .GenericSlideshowItem .bottom {
		display: block;
	}
}

@media screen and (max-width: 1000px) {
	.GenericSlideshow .slideWrapper .slideContainer .rsOverflow .GenericSlideshowItem .top a.slideLink::before {
		height: 100px;
		width: 100px;
}
}

@media screen and (max-width: 991px) {
	.commander-content {
		text-align: center;
	}	
	.resources .panel-group {
		padding: 0 15px!important;
	}
	.right-video {
		margin-top: 3rem;
		margin-left: 0;
	}
	.right-video .smallVideoOverlay {
		bottom: 15%!important;
	}
}

@media screen and (max-width: 704px) {
	.al-right-video .largeVideoOverlay {
		bottom: 100px!important;
	}
}

@media screen and (max-width: 600px) {
	.GenericSlideshow .slideWrapper .slideContainer .rsOverflow .GenericSlideshowItem .top a.slideLink::before {
		height: 75px;
		width: 75px;
	}
}

@media screen and (max-width: 578px) {
	.al-right-video .largeVideoOverlay {
		bottom: 160px!important;
	}
}

@media screen and (max-width: 450px) {
	.GenericSlideshow .slideWrapper .slideContainer .rsOverflow .GenericSlideshowItem .top a.slideLink::before {
		height: 50px;
		width: 50px;
}
	
@media screen and (max-width: 428px) {
		.right-video .smallVideoOverlay {
			bottom: 110px!important;
		}
	}
	
@media screen and (max-width: 408px) {
	.al-right-video .largeVideoOverlay {
		bottom: 215px!important;
	}
}	
}

