* {
 box-sizing: border-box;
 }

.Col1 { grid-area: left; }
.Col2 { grid-area: right; }


.grid-container {
  display: grid;
  grid-template-areas: 'left right';
  grid-gap: 10px;
  background-color: #FEF9E7;
  grid-auto-columns: 50% 50%;
  padding: 0px;
}


.grid-container > div {
  background-color: #FEF9E7;
  text-align: left;
  padding: 0px;
  font-size: 30px;
  border: 2px solid black;
}

.image1 { grid-area: Limage; }
.image2 { grid-area: Cimage; }
.image3 { grid-area: Rimage; }



.Image_grid {
	display: inline-grid; 
	grid-template-areas: 'Limage Cimage Rimage'; 
	grid-gap: 0px; 
	grid-auto-columns: 33% 33% 33%; 
	padding: 0px;


}

.Image_grid > div {
  padding: 20px;
  font-size: 18px;
}

.header {
top: 0px;
left: 0px;
z-index: 1;
width: 100%;
background-color: red;
}

.header img {
	display: block;
	margin-left: auto;
	margin-right: auto; 
	margin-top: 0px;
}

.content {
	display: block; 
	margin: auto; 
	padding: 0px;
	max-width: 1000px;
}

/*
.AdsSmall {
	display: block; 
	position: relative; 
	/* float: right; 
	top: 62px; 
	width: 150px;
	height: 100%; 
	background-color: red; 
	padding: 0px;
	text-align: center;
	vertical-align: top;
}

.AdsSmall img {
	max-width: 10%;
	vertical-align: middle;
}
*/

.Ads {
	display: block; 
	position: fixed; 
	float: right; 
	top: 62px; 
	width: 150px;
	height: 100%; 
	background-color: red; 
	padding: 20px;
	text-align: center;
}

.Ads img {
	width: 100px;
}
	
.sticky {
  position: fixed;
  top: 0;
  width: 100%;
  height: 62px;
}


p {
	font-family: 'Lato', sans-serif;
	font-size: 20px;
	font-weight: 300;
	padding: 10px 10px 0px 20px;
	border-radius: 2px;
	color: black;
}

h2 {
	font-family: 'Lato', sans-serif;
	font-weight: 400;
	color: #85929E;
	padding: 10px 10px 0px 20px;
	text-decoration: underline;
}

h1 {
	font-family: 'Lato', sans-serif;
}

ul li {
	margin-left: 30px;
	font-family: 'Lato', sans-serif;
	font-weight: 400;
}

.problem {
	background-color: #eee;
}


.problem b {
	background-color: #eee;
	font-weight: 400;
	font-size: 32px;
}

.solution {
	background-color: #FEFCE9;
	font-weight: 400;
}

.solution b {
	font-weight: 400;
	font-size: 32px;
}

.caution {
	color: #000000;
	background-color: #FADBD8;
	font-weight: bold;
}

.warning {
	color: red;
	font-size: 20px;
}

.warning1 {
	border-radius: 50px;
	color: red;
	border: 3px dashed red;
	font-family: 'Lato', sans-serif;
	font-weight: 300;	
}

h2 a {
	text-decoration: 4px underline solid;
	border-radius: 3px;
	padding: 5px 40px;
	background-color: white;
	color: #240;
	/* border: 5px solid gray; */
	font-family: 'Lato', sans-serif;
	font-weight: 400;
	font-size: 20pt;
	margin: 0px 0px 0px 0px;	

}

h2:hover a {
	background-color: white;
	color: red;
	text-decoration: none;
}

.PageTitle {
	text-align: center;
	font-family: 'Lato', sans-serif;
	font-weight: 900;
	font-size: 28pt;
	background-color: #fff;
	border-radius: 5px;
}

.PageFooter {
	text-align: center;
	font-family: 'Lato', sans-serif;
	font-weight: 300;
	font-size: 18pt;
	background-color: #fff;
}

body {
	color: #404040;
	margin: 0;
}

ul {
	font-family: Arial;
	font-size: 14px;
	border-radius: 15px;
}

.thumbnail {
	border: 4px double black;
	border-radius: 3px;
    box-shadow: 7px 7px 5px #bbb;
}

#footer {
    position: absolute;
    bottom: 0;
    width: 100%;
}

/* used for the popup image based on the code at the bottom, puts the larger image 200 pixels from the upper left; */
/* with a shadow box to provide visual separation; */
.magImage {
	/* box-shadow: -5px -5px 0px 100px #eee; */
	position:fixed;
	left: 50px;
	top: 50px;
	border: 3px solid black;
}

img {
	margin: 5px;
}

#images {
	float: left; 
	width: 250px;
    text-align:left;
    margin:0px auto;
    padding: 20px 0px 0px 20px;

}
#images a {
    margin:0px 0px;
    display:inline-block;
    text-decoration:none;
    color:black;
}

/* image caption presentation; */
.caption {
font-size: 12pt;
color: #566573;
font-family: helvetica;
font-style: italic;
text-align: left;
}

.caption b { 
	font-weight: 300; 
	font-size: 12pt;
	padding: 0px 0px 0px 0px; 
	margin: 0px;
}

/* this section builds the presentation for popup images; */

.thumb {
	float:left; /* must be floated for same cross browser position of larger image */
	position: relative;
}
.thumb img { 
	vertical-align:top;
}
.thumb:hover {
	border:0; /* IE6 needs this to show large image */
	z-index:1;
}
.thumb span { 
	position:absolute;
	visibility:hidden;
}
.thumb:hover span { 
	visibility:visible;
	top:37px; left:37px; 
}

/* add code for popup images */

#myImg {

  border-radius: 5px;
  cursor: pointer;
  transition: 0.3s;
}

#myImg:hover {opacity: 0.7;}


#myImg2 {

  border-radius: 5px;
  cursor: pointer;
  transition: 0.3s;
}

#myImg2:hover {opacity: 0.7;}

/* The Modal (background) */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  padding-top: 50px; /* Location of the box */
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  max-width: 90%; /* Full width */ 
  max-height: 90%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  border: 1px solid black;
  border-radius: 20px;
  background-color: rgb(0,100,0); /* Fallback color */
  background-color: rgba(0,100,0,0.9); /* Black w/ opacity */
  box-shadow: 10px 10px 5px 0px #666;

}

/* Modal Content (image) */
.modal-content {
  margin: auto;
  display: block;
  max-height: 90%;
  max-width: 90%;
  border-radius: 10px;
  border: 5px solid darkgray;
  box-shadow: 15px 15px 10px 10px #030;

}

/* Caption of Modal Image */
#caption {
  margin: auto;
  display: block;
  width: 50%;
  max-width: 80%;
  text-align: center;
  color: #ccc;
  padding: 25px 0;
}

/* Add Animation */
.modal-content, #caption {    
    -webkit-animation-name: zoom;
    -webkit-animation-duration: 0.1s;
    animation-name: zoom;
    animation-duration: 0.1s;
}

@-webkit-keyframes zoom {
    from {-webkit-transform:scale(0.8))} 
    to {-webkit-transform:scale(1.0)}
}


@keyframes zoom {
  from {transform:scale(0.8)} 
  to {transform:scale(1.0)}
}

/* The Close Button */
.close {
  position: absolute;
  top: 5px;
  right: 15px;
  color: white;
  font-size: 20px;
  font-weight: bold;
  transition: 0.3s;
}

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

/* 100% Image Width on Smaller Screens */
@media only screen and (max-width: 700px){
  .modal-content {
    width: 100%;
  }
}