/* The Modal (background) */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 2030; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
  
}

/* Modal Content Box */
.modal-content {
	overflow-y: auto;	
	background-color: #fefefe; 
	margin: 15% auto; /* 15% from the top and centered */
	padding: 10px;
	border: 1px solid black;
	width: 80%; /* Could be more or less, depending on screen size */
	
}

.myModalContent {
	margin-top: 50px;
}

/* The Close Button */
.close {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}

/* ###########################################*/
/* Below is for the content within the modal. */
/* ###########################################*/

.sitewwwwwwwwwwwwwwwwwwww {
	font-family: "Arial", sans-serif;
}

/* One column grid container. */
.content_grid_1 {
	/*background-color: pink;*/
	max-width: 50rem;
	/*border: 3px solid black;*/
	display: grid;
	grid-template-columns: 100%;
	grid-template-rows: auto;
}

/* Two column grid container. */
/* Used for the "Help" pages. */
.content_grid_2 {
	/*max-width: 50rem;*/
	display: grid;
	grid-template-columns: 6em auto;
	column-gap: 10px;
	row-gap: 10px;
	grid-template-rows: auto;
	grid-template-areas: 
		"help_icon help_text";
}

.content_data {
	/*background-color: #FBEEC1; *//* Tanish */
	/*background-color: #FEF9C7; *//* Tanish */
	background-color: #fffff0; /* Ivory */
	border-radius: 15px;
	max-width: none;
	border: 3px solid black;
	font-family: "Arial", sans-serif;
	font-size: 120%;
}
	
.content_title {
	text-align: center;
}
	
.content_text {
	padding: 10px;
}

.content_image_1 {
	display: block;
	border: 1px solid black;
	border-radius: 5px;
	max-width: 80%;
}

/* Image is centered on small screens.*/
.content_image_1b{
	display: block;
	border: 1px solid black;
	border-radius: 5px;
	max-width: 8rem;
	margin-left: auto;
	margin-right: auto;
}

.content_image_1c {
	display: block;
	width: 80%;
}

/* This	for images that usually are inside a container. */
.content_image_2 {
	/*border: 3px solid black;*/ /* DEBUG */
	width: 100%;  /* The image will fill the container 100%. */
}

/* This	for images that usually are inside a container. */
/* This is used the icons on the "Help" page. */
.content_image_2a {
	width: 30px;   /* Width of image. */
	padding-top: 15px;
}

/* This	for images that usually are inside a container. */
/* This is used the icons on the "Help" page. */
.content_image_2aa {
	width: 80%;   /* Width of image. */
	padding-top: 15px;
}


/* Container for an image. */
.content_image_3{
	display: block;
	border: 1px solid black;
	border-radius: 5px;
	/*padding: 10px;*/
	padding-bottom: 0;
	min-width: 10rem;
	max-width: 80%;
	margin-left: auto;
	margin-right: auto;
}

/* Container for an image. */
.content_image_3a{
	display: block;
	/*border: 2px solid pink; *//* DEBUG */
	border-radius: 5px;
	/*padding: 10px;*/
	padding-bottom: 0;
	/*min-width: 10%; */
	max-width: 100%;
	float: right;
	/*margin-left: auto;*/
	/*margin-right: auto;*/
}

/* Container for an image. */
.content_image_icon{
	display: block;
	border: 2px solid pink; /* DEBUG */
	border-radius: 5px;
	margin-right: 0;
	margin-left: 0;
	/*padding-top: 10px;*/
	/*padding-bottom: 0; */
	/*min-width: 10%; */
	/*max-width: 100%;*/
	float: right;
	/*margin-left: auto;*/
	/*margin-right: auto;*/
}

.content_image_4{
	display: block;
	border: 1px solid black;
	border-radius: 5px;
	/*padding: 10px;*/
	padding-bottom: 0;
	min-width: 10rem;
	max-width: 20%;
	margin-left: auto;
	margin-right: auto;
}

.content_help_icon{
	grid-area: help_icon;
	/*display: block;*/
	justify-content: end; /* does not work */
	/*margin-right: auto;*/
	/*max-width: 30px;*/
	
}

.content_help_text{
	grid-area: help_text;
}

.content_help_timeline{
	background-color: #3FB8AF; 
	color: black;
	font-weight: bold;
	font-size: 120%;
}

.content_help_yellow{
	background-color: yellow;
	color: black;
	font-weight: bold;
	font-size: 120%;
}

.content_help_blue{
	background-color: blue;
	color: white;
	font-weight: bold;
	font-size: 120%;
}

.content_help_red{
	background-color: red;
	color: white;
	font-weight: bold;
	font-size: 120%;
}


.content_image_bio {
	width: 65%;
	height: auto;
	margin-left: auto;
	margin-right: auto;
}

.indented_section {
	margin-left: 50px;
}
	
figcaption {
	margin: 5px;
	font-size: 80%;
	text-align: center;
}

.text_left {
	text-align: left;
}

.center {
	margin-left: auto;
	margin-right: auto;
}

/* ###################################### */
/* These settings are for larger screens. */
/*@media screen and (min-width: 50em) { */
@media screen and (min-width: 600px) {
	
	/* This is for the bio photo at top of screen. */
	.content_image_bio{
		float: left;
		min-width: 10rem;
		max-width: 12rem;
		padding: 10px;
	
	}
	
	/* Image is floated left of text on large screens.*/	
	.content_image_1b{
		display: block;
		border: 1px solid black;
		border-radius: 5px;
		min-width: 10rem;
		max-width: 5rem;
		float: left;
		margin-left: 1rem;
		margin-right: 1rem;
	}
	
	/* This is the container for the another photo. */
	.content_image_3{
		float: left;
		border: 1px solid black;
		border-radius: 5px;
		max-width: 40%;
		padding-bottom: 0;
		margin: 10px;
	}
	
	.content_image_4{
	display: block;
	border: 1px solid red;
	border-radius: 5px;
	/*padding: 10px;*/
	padding-bottom: 0;
	min-width: 10rem;
	max-width: 20%;
	margin-left: auto;
	margin-right: auto;
	}
}