@charset "utf-8";

/***************************************************
    FONTS
***************************************************/


/***************************************************
    GENERAL
***************************************************/
body {
	background-color: #dfdfdf;
}

/* MODAL STYLING */
.modal-backdrop {
	z-index: -1 !important;
}

.vertical-alignment-helper {
    display:table;
    height: 100%;
    width: 100%;
    pointer-events:none; /* This makes sure that we can still click outside of the modal to close it */
}
.vertical-align-center {
    /* To center vertically */
    display: table-cell;
    vertical-align: middle;
    pointer-events:none;
}
.modal-content {
    /* Bootstrap sets the size of the modal in the modal-dialog class, we need to inherit it */
    width:inherit;
    max-width:inherit; /* For Bootstrap 4 - to avoid the modal window stretching full width */
    height:inherit;
    /* To center horizontally */
    margin: 0 auto;
    pointer-events: all;
}

.modal-text-spacing {
	line-height:2.5rem;
}

.modal-body {
	padding: 25px;
}

.modal-header {
	padding: 25px;
}

.modal-medal {
	border: solid 2px #355E93;
}

.learn-more {
	text-align:center;
	background-color:#ffffff;
	box-shadow: -2px 2px 2px rgb(0,0,0,0.4);
	padding:1rem 4rem;
	width:90%;
	margin:0 auto;
	transform: skew(-15deg);
}

.learn-more-text {
	transform: skew(15deg);
}

.learn-more-text p {
	margin-bottom: 0;
}

.award-description {
	margin-top:40px;
	text-align:center;
	padding: 0 9rem;
}

.bg-arc-blue {
	position:absolute;
	top:-2px;
	left:0;
	width:100%;
	z-index:-100;
	opacity:1;
}

.alist-inner {
	background-color:#ffffff;
	padding: 1rem 0;
}

.medal-image-grid {
	padding: 0;
}

.video-background video {
	position:absolute;
	top:0;
	left:0;
	min-width:100%;
	min-height:50%;
	width:auto;
	height:auto;
	z-index:-100;
	display:inline-block;
	vertical-align:baseline;
	transform: translateX(0%) translateY(-40%);
	}

/***************************************************
    TOP BANNER
***************************************************/
.banner {
	
}
.video-wrap {
	width:100%;
	position:relative;
	overflow:hidden;
}
.video-background {
	width:100%;
	overflow:hidden;
}
.banner-content {
	padding: 2rem 0;
	text-align: center;
}

.banner-content h1 {
	color: #fff;
	font-family: 'Libre Baskerville', serif;;
	font-style: normal;
	font-size: 3rem;
	padding: 0 15px;
	margin-bottom:2rem;
}

.banner-content h1::after {
	content: '';
	width:200px;
	height:20px;
	border-bottom: solid 3px #920909;
	text-align:center;
	margin: 1rem auto;
	display:block;
}

.banner-content p {
	color: #fff;
	font-size:1.1rem;
	max-width: 1088px;
	margin: 0 auto;
	padding: 1rem 5rem;
}

.banner-content img {
	max-width:100%;
	width:35%;
	margin:4rem 0 2rem 0;
}

/***************************************************
    SECTION 1 ... NAVIGATION
***************************************************/
.page-links {
	position:relative;
	text-transform: uppercase;
	cursor: pointer;
	min-height:200px;
	height:199px;
	font-family: 'Oswald', sans-serif;
	text-align:center;
	font-size:1.5rem;
	color: #ffffff;
	opacity:1;
	display:flex;
	flex-direction: column;
	justify-content:center;
	border-style: solid;
	border-color:#FFF;
	border-width: 8px 4px;
	transition: .3s ease-in-out;
}

#moh-nav {
	background-image: url(/Portals/1/Interactive/2019/03-honors-for-valor/images/moh-nav-bg.jpg?ver=2019-03-06-121225-413);
	background-size: cover;
	background-position:bottom;
}

#moh-nav:hover .jump-overlay {
	opacity:.5;
}

#moh-nav:hover .page-links {
	text-shadow: -4px 4px 4px #222;
}

#sc-nav:hover .jump-overlay {
	opacity:.5;
}

#ss-nav:hover .jump-overlay {
	opacity:.5;
}

#sc-nav {
	background-image: url(/Portals/1/Interactive/2019/03-honors-for-valor/images/sc-nav-bg.jpg?ver=2019-03-18-144631-523);
	background-size: cover;
	background-position: 50% 50%;
}

#ss-nav {
	background-image: url(/Portals/1/Interactive/2019/03-honors-for-valor/images/ss-nav-bg.jpg?ver=2019-03-06-121228-333);
	background-size: cover;
	background-position:bottom;
}

#valor-navigation {
	padding:0 4px;
	background-color:#ffffff;
}

#valor-navigation a:hover {
	text-decoration:none;
}

#valor-navigation a:visited {
	text-decoration:none !important;
}

#valor-navigation a {
	padding:0;
}

.jump-overlay {
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	opacity:.8;
	transition: .5s ease-in-out;
	background: -moz-linear-gradient(top, rgba(0,0,0,1) 0%, rgba(0,0,0,0.3) 50%, rgba(0,0,0,1) 100%);
	background: -webkit-linear-gradient(top, rgba(0,0,0,1) 0%,rgba(0,0,0,0.3) 50%,rgba(0,0,0,1) 100%);
	background: linear-gradient(to bottom, rgba(0,0,0,1) 0%,rgba(0,0,0,0.3) 50%,rgba(0,0,0,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#000000',GradientType=0 );
}

.in-page-link {
	color:#fff;
}

.page-links i {
	position:absolute;
	bottom:55px;
	left:0;
	width:100%;
	text-align:center;
	opacity:0;
	transition: 350ms ease-in-out;
}

#moh-nav:hover .page-links i {
	opacity:1;
	bottom:35px;
}
#sc-nav:hover .page-links i {
	opacity:1;
	bottom:35px;
}
#ss-nav:hover .page-links i {
	opacity:1;
	bottom:35px;
}

.fa-chevron-down::before {
	content: "\f078";
	box-sizing:border-box;
}

/***************************************************
    SECTION 2 ... MEDAL OF HONOR
***************************************************/
.moh-container {
	padding-top:4rem;
	margin-bottom:0;
}

.medal-type-header {
	background: #bc852d;
	background: -moz-linear-gradient(top, #bc852d 1%, #906f1d 100%);
	background: -webkit-linear-gradient(top, #bc852d 1%,#906f1d 100%);
	background: linear-gradient(to bottom, #bc852d 1%,#906f1d 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#bc852d', endColorstr='#906f1d',GradientType=0 );
	padding: 18px 0;
	width:40%;
	margin-left:30%;
	transform: skew(-15deg);
	height:80px;
	margin-bottom:-40px;
	border-bottom: solid 5px #BB9208;
}

.medal-type-title {
	font-size:1.5rem;
	text-align:center;
	color:#fff;
	padding:0;
	text-shadow: -2px 2px 2px #333;
	transform: skew(15deg);
	letter-spacing: 1px;
	font-family: 'Libre Baskerville', serif;
}

.moh-content {
	background-color:#fff;
	margin: -2rem 15px 8px 15px;
	padding: 2rem;
	box-shadow: -4px 4px 4px rgb(0,0,0,0.5);
}

.moh-medal {
	position:relative;
	top:0;
	left:0;
	border-radius:0;
	max-width:96%;
	margin-left:2%;
}

.moh-medal:hover .overlay-icon {
	opacity: 1;
}

.moh-articles, .sc-articles, .ss-articles {
	padding:0;
}

.branch-label {
	font-weight:bolder;
	text-transform:uppercase;
	font-size:1.2em;
	text-align:center;
	margin-top:0;
	padding:1rem 0;
	background-color:transparent;
}

.stories-text {
	background: rgb(223,223,223);
	background: -moz-linear-gradient(top, rgba(223,223,223,1) 0%, rgba(255,255,255,1) 100%);
	background: -webkit-linear-gradient(top, rgba(223,223,223,1) 0%,rgba(255,255,255,1) 100%);
	background: linear-gradient(to bottom, rgba(223,223,223,1) 0%,rgba(255,255,255,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#dfdfdf', endColorstr='#ffffff',GradientType=0 );
	width:100%;
	text-align:center;
	padding: 2rem 15rem 1rem 15rem;
}

#dnn_ctr3148_HtmlModule_lblContent .stories-text {
	background-image: -webkit-linear-gradient(rgba(255,255,255,1) 0%, rgb(237, 237, 237) 50%, rgba(255,255,255,1) 100%);
	background-image: -moz-linear-gradient(rgba(255,255,255,1) 0%, rgb(237, 237, 237) 50%, rgba(255,255,255,1) 100%);
	background-image: linear-gradient(rgba(255,255,255,1) 0%, rgb(237, 237, 237) 50%, rgba(255,255,255,1) 100%); 
	padding: 3rem 15rem 5rem;
}

#dnn_ctr3148_HtmlModule_lblContent .stories-text .quiz-header .medal-type-title {
	margin-bottom: 0;
	padding: 5px 0;
}

.quiz-header {
	background-image: -webkit-linear-gradient(#355E93 1%, #20446b 100%);
	background-image: -moz-linear-gradient(#355E93 1%, #20446b 100%);
	background-image: linear-gradient(#355E93 1%, #20446b 100%);
	transform: skew(-15deg);
	width: 150px;
	margin: 0 auto;
	padding: 5px 0;
	position: relative;
	top: 13px;
	z-index: 1;
}

.read-more {
	position:absolute;
	left:0;
	bottom: 16px;
	text-align:center;
	background-color:#355E93;
	color:#ffffff;
	padding: 1rem 0;
	margin: 0;
	font-family: 'Oswald', sans-serif;
	text-transform: uppercase;
	letter-spacing: 2px;
	opacity:0.75;
	transition: .6s ease-in-out;
	text-decoration:none;
	display:block;
	width:40%;
}

.read-more:after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color:#355E93;
  -webkit-transform-origin: 0 100%;
  -ms-transform-origin: 0 100%;
  transform-origin: 0 100%;
  -webkit-transform: skew(-15deg);
  -ms-transform: skew(-15deg);
  transform: skew(-15deg);
  z-index: -1;
}

figure:hover .read-more {
	opacity:0.96;
	width:48%;
	color:#fff;
}

figure .image-wrap a:hover {
	text-decoration: none;
}

figure .image-wrap a:visited {
	color:#fff;
	text-decoration:none;
}

.video-duration {
	display:none;
}


/***************************************************
    HALL OF HEROES
***************************************************/
.hoh-wrapper {
	background-color:#fff;
	padding:0 5% 2rem 5%;
	border-bottom: solid 8px #999999;
}
.hoh-inner-wrapper {
	max-width:1400px;
	margin:0 auto;
	padding: 0 15px;
}
.hoh-slice {
	background-color:#fff;
	background-image:url(/Portals/1/Interactive/2019/03-honors-for-valor/images/hoh-photo-2.JPG?ver=2019-03-06-121228-130);
	background-size:130%;
	background-repeat:no-repeat;
	background-position: left 50%;
	padding:2rem 0;
}

.hoh-content {
	background-color:rgb(255,255,255);
	background-color:rgba(255,255,255, 1);
	padding:2rem 3rem;
	margin:2rem 3rem;
	text-align:center;
	box-shadow: -4px 4px 4px rgb(0,0,0,.4);
}
.hoh-slice {
	border-radius: 4px;
}



/***************************************************
    SECTION 3 ... SERVICE CROSS
***************************************************/
.sc-container {
	padding-top:4rem;
}

.sc-arc {
	position:absolute;
	top:-4rem;
	left:0;
	width:100%;
	z-index:-99;
}

.sc-content {
	background-color:#fff;
	margin: -2rem 15px 8px 15px;
	padding: 2rem;
	box-shadow: -4px 4px 4px rgb(0,0,0,0.5);
}

.sc-background {
	background: rgb(223,223,223);
	background: -moz-linear-gradient(top, rgba(223,223,223,1) 0%, rgba(255,255,255,1) 100%);
	background: -webkit-linear-gradient(top, rgba(223,223,223,1) 0%,rgba(255,255,255,1) 100%);
	background: linear-gradient(to bottom, rgba(223,223,223,1) 0%,rgba(255,255,255,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#dfdfdf', endColorstr='#ffffff',GradientType=0 );
}


/***************************************************
    SECTION 4 ... SILVER STAR
***************************************************/
.ss-container {
	padding-top:4rem;
}

.ss-text, .ss-image {
	padding-top:2rem;
}

.ss-image {
	max-width:400px;
	margin: 0 auto;
}

.ss-content {
	background-color:#fff;
	margin: -2rem 15px 8px 15px;
	padding: 2rem 2rem 0 2rem;
	box-shadow: -4px 4px 4px rgb(0,0,0,0.5);
}

.ss-text, .ss-image {
	padding-bottom:0px;
}

/***************************************************
    'DID YOU KNOW?' CAROUSEL
***************************************************/

.did-you-know-header {
	background: #355E93;
	background: -moz-linear-gradient(top, #355E93 1%, #20446b 100%);
	background: -webkit-linear-gradient(top, #355E93 1%,#20446b 100%);
	background: linear-gradient(to bottom, #355E93 1%,#20446b 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#355E93', endColorstr='#20446b',GradientType=0 );
	padding: 18px 0;
	width:40%;
	margin-left:30%;
	transform: skew(-15deg);
	height:80px;
	margin-bottom:-40px;
}
.did-you-know-slider {
	
}
.carousel-previous, .carousel-next {
	position:absolute;
	top:49%;
	color:#fff;
	font-size:2rem;
	opacity:.6;
	transition: .4s ease-in-out;
	z-index:99;
	cursor:pointer;
}
.carousel-previous {
	left:20px;
}
.carousel-next {
	right:20px;
}
.carousel-previous:hover {
	opacity:1;
}
.carousel-next:hover {
	opacity:1;
}
.slide-container {
	padding: 0 3rem;
}
.slick-dots li button:before {
	color:#ffffff !important;
}
.slick-dots {
	bottom: 25px !important;
}
.slick-slide img{
	max-height:100%;
	position:absolute;
	bottom:-32px;
	left:25%;
}
.did-you-know-text {
	text-align:center;
	padding:2rem;
	background-color:#fff;
	margin-bottom:6rem;
}
.slick-dotted.slick-slider {
	margin-bottom:0 !important;
}
.slick-track {
	padding-top:6rem;
}


/***************************************************
    RELATED LINKS
***************************************************/
.related-links {
	width:100%;
	background-color:#fff;
	padding: 3rem 0;
}
.valor-seal-img {
	transition: .3s ease-in-out;
	transform: scale(.5);
}

.seal-link:hover, .seal-link:visited {
	text-decoration:none;
}
.seal-link:hover .valor-seal-img {
	transform: scale(.6);
}


/***************************************************
    RESPONSIVE
***************************************************/
/* XLG */
@media only screen and (max-width: 1400px) {
	.award-description {
		padding: 0 6rem;
	}
	.hoh-content {
		background-color:rgb(255,255,255);
		background-color:rgba(255,255,255,.9);
	}
}
/* LG */
@media only screen and (max-width: 1200px) {
	.learn-more {
		width:100%;
		transform: none;
	}
	.learn-more-text {
		transform: none;
	}
	.hoh-slice {
		background-size:cover;
	}
	.hoh-content {
		background-color:rgb(255,255,255,1);
	}
}
/* MD */
@media only screen and (max-width: 992px) {
	.modal-dialog {
		width: 80%;
	}
	
	.banner-content img {
		width:70%;
		margin:3rem 0 0 0;
	}
	
	.medal-type-header {
		width:50%;
		margin-left:25%;
	}
	
	.did-you-know-header {
		width:50%;
		margin-left:25%;
	}
	.stories-text {
		padding: 2rem 6rem 1rem 6rem;
	}
	#dnn_ctr3148_HtmlModule_lblContent .stories-text {
		padding: 2rem 6rem 4rem;
	}
	.award-description {
		padding: 0 3rem;
	}
	.did-you-know-text {
		margin-bottom:3rem;
	}
	.branch-label {
		font-size:1em;
	}
	.moh-articles, .sc-articles, .ss-articles {
		padding:0 6rem;
	}
	.hoh-inner-wrapper {
		padding: 0;
	}
}
/* SM */
@media only screen and (max-width: 768px) {
	
	#moh-nav:hover .page-links i {
		opacity:1;
		bottom:10px;
}
	#sc-nav:hover .page-links i {
		opacity:1;
		bottom:10px;
	}
	#ss-nav:hover .page-links i {
		opacity:1;
		bottom:10px;
	}
	.bg-arc-blue {
		display:none;
	}
	.moh-container {
		padding-top: 1rem;
	}
	.page-links {
		min-height: 100px;
		border-width: 2px 4px;
	}
	#valor-navigation {
		padding:2px 0;
	}
	.medal-type-header {
		width:80%;
		margin-left:10%;
	}
	.did-you-know-header {
		width:80%;
		margin-left:10%;
	}
	.modal-dialog {
		width: 90%;
	}
	.award-description {
		padding: 0 5rem;
	}
	.learn-more {
		text-align:center;
		padding:1rem 2rem;
	}
	.learn-more-text {
		transform: none;
	}
	.ss-content {
		margin: -2rem 15px 0 15px;
	}
	.hoh-inner-wrapper {
		margin:0 auto;
		padding: 0;
	}
	.hoh-slice {
		border-radius:0px;
		box-shadow:none;
		background-image: none;
	}
	.sc-container {
		padding-top:3rem;
	}
	.sc-arc {
		display:none;
	}
	.ss-container {
		padding-top:4rem;
	}
	.moh-medal {
		max-width:100%;
		margin-left:0;
		border-radius: 4px 4px 0px 0px;
		overflow:hidden;
	}
	.moh-articles, .sc-articles, .ss-articles {
		padding:0 6rem;
	}
	.branch-label {
		background-color:#dfdfdf;
		border-radius: 0px 0px 4px 4px;
	}
	.medal-image-grid {
		padding: 0 4rem;
	}
}
/* XS */
@media only screen and (max-width: 576px) {
	.modal-dialog {
		width: 100%;
	}
	.banner-content img {
		width:90%;
		margin:3rem 0 1rem 0;
	}
	.banner-content p {
		padding: 1rem 2rem;
	}
	.stories-text {
		padding: 4rem 2rem 1rem 2rem;
	}
	#dnn_ctr3148_HtmlModule_lblContent .stories-text {
		padding: 2rem 2rem 4rem;
	}
	.award-description {
		padding: 0 1rem;
	}
	.medal-image-grid {
		padding: 0;
	}
	.moh-articles, .sc-articles, .ss-articles {
		padding:0 1rem;
	}
	.hoh-content {
		background-color:rgb(255,255,255,1);
		margin:0;
		padding: 1rem;
		box-shadow:none;
	}
	.hoh-slice {
		background-image: none;
	}
}
@media screen and (max-width: 414px) {
    .banner-content: padding: 5rem 0 2rem;
}
/* XXS */
@media only screen and (max-width: 400px) {
	.moh-articles, .sc-articles, .ss-articles {
		padding:0;
	}
	.medal-type-header {
		width:80%;
		margin-left:10%;
	}
}

/* Override Bootstrap default for modal */
@media (min-width: 768px) {
	.modal-dialog {
		width:70% !important;
	}
}


/***************************************************
    IE SPECIFIC ( IE10+ CSS styles go here )
***************************************************/
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
	
}

/***************************************************
    end.
***************************************************/


/* PAGE NAVIGATION */




/*SECTION ASSETS */





/* MEDAL OF HONOR SLICE */
.moh-description {
	background: #ffffff;
}



#moh-army-bw,  #moh-navy-bw,  #moh-af-bw, #sc-army-bw, #sc-navy-bw, #sc-af-bw {
	position:relative;
}

#moh-army, #moh-navy, #moh-airforce, #sc-army, #sc-navy, #sc-af {
	position:absolute;
	top:0;
	left:0;
	cursor:pointer;
}

.overlay-icon {
	opacity:0;
	transition: .7s ease;
}



/* MOH MONDAY STORIES */
.category a {
	display:none;
}

figcaption p.summary {
	display:none;
}

#genArticles figcaption {
		padding: 18px;
		background-color: #dfdfdf;
	    border-radius: 0 0 4px 4px;
		min-height:5rem;
	}

#genArticles figcaption h2.title {
		font-family: 'Lato', sans-serif;
		font-size: 1.1rem;
		margin-bottom: 10px;
	}

#genArticles figcaption h2.title a{
		 line-height:1.1rem;
}




/* UNIVERSAL CRITERIA */

.award-criteria {
	width:80%;
	margin-left:10%;
	background-color:#ffffff;
	padding: 2rem;
	line-height:1.6em;
}

.award-criteria ol {
  	list-style: none outside none;
  	counter-reset: custom-counter;
}
.award-criteria ol li {
	counter-increment: custom-counter;
	margin-top:1rem;
}
.award-criteria ol li::before {
	content: counter(custom-counter) ". ";
	font-weight:bold;
}

.number {
    font-size: 30px;
    font-family: "Crimson Text", sans-serif;
    width: 46px;
	height: 46px;
    line-height: 46px;
    background-color: #355E93;
    color: #fff;
    border-radius: 50%;
    text-align: center;
    text-align: center;
    display: block;
}