/* Design Elements for the OOH STIP Snapshots */ 
 /* Image Gallery Formatting */ 
.OOH-Gallery {
	margin: 5px;
	border: 1px solid #ccc;
	border-radius: 8px; 
	display: inline-block;
	cursor: pointer;
	width: 95%;
}

.OOH-Gallery:hover {
	border: 1px solid #1C355E;
	background-color: whitesmoke;
 }
 
 .OOH-Gallery img {
	 height: auto;
	 border-radius: 4px;
	 display: block;
	 width: 100%;
 }
 .OOH-Gallery img.block {
	 width: 100%;
	 height: auto;
	 display: block;
 }
 
 .OOH-Gallery-Desc {
	 padding: 1rem;
	 text-align: center;
	 color: #1c355e;
	 font-weight: bold;
 }
/* End Img Gallery Formatting */

/* Header Formatting */
.OOH-Head {
	border-radius: 8px;
	overflow: hidden; 
	border: 1px solid #ccc;
	background: white;
	display: flex;
	flex-direction: column;
	margin: 12px;
}

.OOH-Head-Title {
	background-color: #1C355E;
	color: white;
	border: 1px solid #ccc;
	padding: 5px 12px;
}

.OOH-Head-Sub {
	background-color: whitesmoke;
	padding: 0px 12px;
}
/* end Header Formatting */

 /* for a basic text content block with no borders or background colors */
.OOH-Basic-wrap {
	padding: 5px 12px;
	width: 100%; 
	overflow: hidden;
	background: white;
	display: flex;
	flex-direction: column;
}

/* Card Formatting */

/* primary wrap for all cards */
.OOH-Card {
	display: flex;
	flex-wrap: wrap;
	justify-content: left;
	max-width: 100%;
}
/* Dark blue header for all cards */
.OOH-Card-Head {
	background-color: #1C355E;
	color: white;
	padding: 1rem;
	display: flex;
	align-items: left;
}
.OOH-Card-Head h4 {
	margin: 0px;
	font-size: 2rem;
	margin: .5rem .5rem;
}
.OOH-Card-Head h3 {
	margin: 0px;
	font-size: 2.5rem;
	margin: .5rem .5rem;
}
.OOH-Card-Head h2 {
	margin: 0px;
	font-size: 3rem;
	margin: .5rem .5rem;
}

/* Use this for individual benefits card wrap within .ooh-card wrap */
.OOH-Card-Benefits {
	width: 98%;
	height: auto;
	border-radius: 8px;
	margin: 10px;
	overflow: hidden;
	border: 1px solid #ccc;
	background: white;
	display: flex;
	flex-direction: column;
}

.OOH-Card-Benefits img {
	height: 40px; 
	margin: .5rem .5rem;
}



.OOH-Benefits-Content {
	padding: 2rem;
	overflow-y: auto;
	flex-grow: 1;
	margin: 0px;
}

 /* Use this for individual details card wrap within .ooh-card wrap */
.OOH-Card-Details {
	width: 95%;
	min-height: 150px;
	border-radius: 8px;
	margin: 10px;
	overflow: hidden;
	border: 1px solid #ccc;
	background: white;
	display: flex;
	flex-direction: column;
}
.OOH-Card-Details img {
	width: 40px;
	height: 40px; 
	margin: 1rem 2rem;
}
.OOH-Card-Details h4 {
	margin: 0px;
	font-size: 2rem;
}

.OOH-Details-Content {
	padding: 2rem;
	overflow-y: auto;
	margin: 0px;
}
 /* lightbox using JavaScript */
 
 /* Thumbnail styling */
.lightbox-thumb img {
  width: 200px;
  height: auto;
  cursor: pointer;
  border-radius: 8px;
  border: 1px solid #ccc;
}

/* Lightbox overlay */
.lightbox {
  display: none;
  position: fixed;
  z-index: 9999;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: whitesmoke;
  text-align: center;
  padding-top: 5%;
}

/* Show lightbox when targeted */
.lightbox:target {
  display: block;
}

/* Lightbox image */
.lightbox img {
  max-width: 90%;
  max-height: 80%;
  border-radius: 8px;
  box-shadow: 0 0 20px #000;
}

/* Close button */
.lightbox-close {
  position: absolute;
  top: 20px;
  right: 30px;
  color: #fff;
  font-size: 40px;
  text-decoration: none;
}
.lightbox-close:hover {
  color: #ddd;
}

/* end lightbox */

/* Two-column container using existing OOH-Card style */
.OOH-TwoCol-Container {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;           /* responsive wrapping */
	max-width: 100%;
	margin: 12px;
	border: 1px solid #ccc;
	border-radius: 8px;
	overflow: hidden;
	background: white;
}

/* Left column (2/3 width) */
.OOH-TwoCol-Left {
	flex: 2;                   /* gives 2/3 width */
	min-width: 250px;          /* prevents collapsing on small screens */
	border-right: 1px solid #ccc;
	display: flex;
	flex-direction: column;
}

/* Right column (1/3 width) */
.OOH-TwoCol-Right {
	flex: 1;                   /* gives 1/3 width */
	min-width: 200px;
	display: flex;
	flex-direction: column;
}

/* R column (1/2 width) ?*/
.OOH-TwoCol-SplitR {
	flex: 1;                   /* gives 1/2 width */
	min-width: 200px;
	display: flex;
	flex-direction: column;
}
.OOH-TwoCol-SplitL {
	flex: 1;                   /* gives 1/2 width */
	min-width: 200px;
	border-right: 1px solid #ccc;
	display: flex;
	flex-direction: column;
}