@charset "utf-8";
/* CSS Document */

/***************************************************
Veteran Memorial Museum

Blue = #00205C
Red = #A00013
Gold = #A08630

***************************************************/

/***************************************************
    STRUCTURE
***************************************************/
.construction {
	display: none;
}
.over-svg {
	z-index: 2;
}
.text-center {
	display: block;
	margin: auto;
	margin-top: 30px;
}
/***************************************************
    	TOP BANNER
***************************************************/
#banner {
	background: url(/Portals/1/Interactive/2018/11-Veteran-Memorial-Museum/john-bg.jpg) no-repeat bottom center;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	position: relative;
	width: 100%;
	height: 100vh;
	max-height: 900px;
	min-height: 400px;
}
#banner .overlay {
	background: rgba(0,0,0,0.3);
	width: 100%;
	height: 100%;
}
.svg-shape {
	position: absolute;
	bottom: -1px;
	left: 0px;
	width: 100%;
	height: auto;
}
#banner h1 {
	position: absolute;
	top: 45%;
	right: 52%;
	transform: translate(10%, -50%);
	color: #fff;
	text-align: left;
	display: block;
	font-family: "Lato", Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
	text-transform: uppercase;
	font-weight: 700;
	font-size: 3.2rem;
	text-shadow: 0 3px 6px rgba(0,0,0,0.06), 0 3px 6px rgba(0,0,0,0.13);
}
#banner h1 span {
	font-size: 2rem;
}
/***************************************************
    	INTRO
***************************************************/

#intro {
	margin-top: 4rem;
	margin-bottom: 4rem;
}
#intro h2 {
	color: #00205C;
	font-family: "Lato", Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
	text-transform: uppercase;
	font-weight: 700;
}
#intro img {
	border-radius: 3px;
	overflow: hidden;
}
/***************************************************
    	JOHN INTRO
***************************************************/
#john-bg {
	background: url(/Portals/1/Interactive/2018/11-Veteran-Memorial-Museum/bg.jpg) no-repeat bottom center;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	position: relative;
	width: 100%;
}
.svg-shape-flip {
	position: absolute;
	top: -1px;
	left: 0px;
	width: 100%;
	height: auto;
}
#john-bg .overlay {
	background: rgba(0,0,0,0.4);
	height: 100%;
	width: 100%;
}
#john-bg h2 {
	padding-top: 6rem;
	color: #fff;
	font-family: "Lato", Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
	text-transform: uppercase;
	font-weight: 700;
	margin-bottom: 30px;
}
#john-bg .spacing {
	padding-top: 16rem;
	color: #fff;
	position: relative;
}
#john-bg .spacing:before {
	content: "";
	width: 103px;
	height: 20px;
	border-bottom: 2px solid #fff;
	border-right: 2px solid #fff;
	bottom: -30px;
	left: -81px;
	position: absolute;
	border-bottom-right-radius: 3px;
}
#john-bg img {
	margin-bottom: 4rem;
	width: 100%;
	border-radius: 3px;
	overflow: hidden;
}
#john-bg .interviews-blurb {
	color: #fff;
	position: relative;
	margin-bottom: 4rem;
}
#john-bg .interviews-blurb:before {
	bottom: -128px;
	content: "";
	width: 20px;
	height: 118px;
	border-right: 2px solid #fff;
	position: absolute;
	z-index: 2;
}
/***************************************************
    	MASONRY
***************************************************/
.grid-wrap {
	padding: 20px;
	background-color: #0d0d0d;
}
.grid-layout {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(18%, calc(20% - 16px)));
	grid-gap: 20px;
	grid-auto-rows: auto;
	grid-auto-flow: dense;
	z-index: 9;
	position: relative;
}
.grid-item {
	font-size: 100%;
	color: #929796;
	background-color: #000;
	border-radius: 3px;
	overflow: hidden;
	position: relative;
}
.grid-item.image {
	min-height: 170px;
}
.span-2 {
	grid-column-end: span 2;
	grid-row-end: span 2;
	min-height: 400px;
}
.span-2-tall {
	grid-row-end: span 2;
}
.span-2-wide {
	grid-column-end: span 2;
	min-height: 150px;
}
.grid-quote {
	padding: 20px;
	color: #fff;
	background-color: #A08630;
}
#dnn_ctr939_HtmlModule_lblContent > div > div > div:nth-child(10) {
	background-color: #A00013;
}
#dnn_ctr939_HtmlModule_lblContent > div > div > div:nth-child(4), #dnn_ctr939_HtmlModule_lblContent > div > div > div:nth-child(16) {
	background-color: #00205C;
}
#mason-end {
	background-color: #0d0d0d;
	position: relative;
	width: 100%;
	height: 200px;
	max-height: 900px;
	min-height: 100px;
}
/***************************************************
    	FAST FACTS
***************************************************/
.card {
	border-radius: 3px;
	border: 1px solid #E3E3E3;
	overflow: hidden;
}
.card.card-1 .poster {
	background: url(/portals/1/Interactive/2018/11-Veteran-Memorial-Museum/makeup-1.JPG) no-repeat center center;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
}
.card.card-2 .poster {
	background: url(/portals/1/Interactive/2018/11-Veteran-Memorial-Museum/makeup-4.jpg) no-repeat center center;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
}
.card.card-3 .poster {
	background: url(/Portals/1/Interactive/2018/11-Veteran-Memorial-Museum/Galleries.jpg) no-repeat center center;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
}
.card.card-4 .poster {
	background: url(/portals/1/Interactive/2018/11-Veteran-Memorial-Museum/makeup-2.jpg) no-repeat center center;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
}
.card.card-5 .poster {
	background: url(/portals/1/Interactive/2018/11-Veteran-Memorial-Museum/makeup-3.jpg) no-repeat center center;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
}
.card.card-6 .poster {
	background: url(/portals/1/Interactive/2018/11-Veteran-Memorial-Museum/makeup-5.jpg) no-repeat center center;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
}
.card .poster {
	width: 100%;
	height: 200px;
}
.card.card-1 .poster {
	height: 500px;
}
.card.card-5 .poster, .card.card-6 .poster {
	height: 350px;
}
.card .text {
	padding: 30px;
	padding-bottom: 0px;
}
.disc {
	color: #909090;
	font-size: 16px;
	text-align: center;
	margin-top: 30px;
	margin-left: 20px;
	margin-right: 20px;
}

/***************************************************
    RESPONSIVE
***************************************************/
	/* XLG */
@media only screen and (max-width: 1400px) {
}

/* LG */
@media only screen and (max-width: 1200px) {
#john-bg .spacing {
	padding-top: 10.1rem;
}
#john-bg .spacing:before {
	bottom: 40px;
	left: -115px;
}
.grid-wrap {
	margin-top: -1px;
}
.card .poster {
	width: 100%;
	height: 300px !important;
}
#john-bg img {
	width: 100%;
	padding-bottom: 0px;
	margin-bottom: 0px;
}
.span-2 {
	grid-column-end: span 2;
	grid-row-end: unset;
	min-height: 200px;
}
}

/* MD */
@media only screen and (max-width: 991px) {
#intro img {
	width: 100%;
}
#banner h1 {
	right: 34%;
}
.grid-layout {
	grid-auto-rows: auto;
	grid-template-columns: repeat(auto-fill, minmax(18%, calc(50% - 16px)));
}
#john-bg .spacing {
	padding-top: 0px;
}
#john-bg .spacing:before {
	display: none;
}
#mason-end {
	min-height: 100px;
	height: 100px;
}
.card .poster {
	width: 100%;
	height: 300px !important;
}
}

/* SM */
@media only screen and (max-width: 768px) {
#banner {
	height: auto;
}
.card .poster {
	width: 100%;
	height: 200px !important;
}
#banner h1 {
	position: relative;
	top: 0;
	right: 0;
	transform: none;
	color: #fff;
	text-align: left;
	display: block;
	font-family: "Lato", Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
	text-transform: uppercase;
	font-weight: 700;
	font-size: 3.2rem;
	text-shadow: 0 3px 6px rgba(0,0,0,0.06), 0 3px 6px rgba(0,0,0,0.13);
	padding: 20px;
	padding-top: 80px;
	padding-bottom: 50px;
}
}

/* XS */
@media only screen and (max-width: 500px) {
.grid-layout {
	display: block;
}
.grid-wrap {
	margin-top: -1px;
	padding: 1px;
}
.grid-item {
	margin: 20px;
}
.grid-item.image {
	min-height: 170px;
}
.span-2 {
	grid-column-end: span 2;
	grid-row-end: span 2;
	min-height: 200px;
}
	.grid-item.span-2-tall {
		min-height:370px;
		background-position: center top !important;
	}
}

/***************************************************
    IE SPECIFIC
***************************************************/
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
svg {
	display: none !important;
}
.grid-item {
	width: 24%;
	display: inline-block;
}
}

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