body {font-family: "OpenSans"; background-color:#ffffff; margin: 0; padding: 0;}
a:link {color:#49b7de; text-decoration:none;} 
a:visited {color:#49b7de; text-decoration:none;} 
a:hover {color:#4c8dbf; text-decoration:none;} 
a:active {color:#4c8dbf; text-decoration:none;}

h1 {font-family: Arial, Helvetica, sans-serif; font-size: 24px; text-align: left; font-weight: bold; color:#ffffff; letter-spacing: 0.5px; margin-left:75px;}

p {font-family: Arial, Helvetica, sans-serif; font-size: 16px; text-align: left; line-height:24px; color:#000000;}
p.sound {font-family: Arial, Helvetica, sans-serif; font-size: 14px; text-align: left; line-height:20px;  color:#000000;}
p.caption {font-family: Arial, Helvetica, sans-serif; font-size: 10px; text-align: center; line-height:14px; color:#000000;}
p.slider {font-family: Arial, Helvetica, sans-serif; font-size: 14px; text-align: center; line-height:24px; font-weight:bold; color:#000000;}


#footer1 {padding:25px; background-color:#0d1630; text-align:center;}
.footer1_box {font-family: Arial, Helvetica, sans-serif; width: 230px; height: 50px; font-size:11px; background-color:#0d1630; color:#ffffff; display: inline-block; padding:5px 35px; vertical-align:middle; text-align:left;}
.social {height:28px; float:left; vertical-align:top; margin-left:10px;}
.left { float:left; width:47%;}
.right { float:left;  width:48%; margin-left:5%;}
img {
    max-width: 100%;
    height: auto;
    }

<!--google download icon-->
.material-symbols-outlined {
  font-variation-settings:
  'FILL' 0,
  'wght' 400,
  'GRAD' 0,
  'opsz' 48
}


	
.inside {background-color:#ffffff; 
       max-width:900px; 
	   margin-left:auto; 
	   margin-right:auto;
	   vertical-align:top;
	   text-align:left;
	   height: 100%;
	   padding-top:1%;
	   padding-bottom:2%;
}



.inblack {background-color:#0D1630; 
		width:90%; 
		padding:5%; 
		float:left;
}

.inwhite {background-color:#ffffff; 
		width:90%; 
		padding:5%; 
		float:left;
}

.introarea {background-color:#c6efef; 
		width:90%; 
	    margin-top:1%;
		padding:5%;
		float:left;
}

.introq {background-color:#c6efef; 
		font-size: 14px;
	    font-weight: bold;
		margin-right: 20%;
		margin-left: 20%;
}

.introa {margin-top:-1%;
	   font-size: 14px;
	   margin-right: 20%;
	   margin-left: 20%;
}

.blackthm {width:30%; 
		float:left; 
		padding-right:3.33%;
		text-align:center;
		/*color:#ffffff;*/
		font-size:14px;
		font-family: Arial, Helvetica, sans-serif;
		font-weight:bold;
}


.container {
  position: relative;
  width: 18%;
  background-color: #ffffff;
  float:left;
  margin-right:2%;
  text-align:center;
}

.image {
  opacity: 1;
  display: block;
  width: 100%;
  height: auto;
  transition: .5s ease;
  backface-visibility: hidden;
}

.middle {
  transition: .5s ease;
  opacity: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  text-align: center;
}

.container:hover .image {
  opacity: 0.5;
}

.container:hover .middle {
  opacity: 1;
}

.text {
  color: white;
		font-size:14px;
		font-family: Arial, Helvetica, sans-serif;
		font-weight:bold;

}

.line {width:100%; height:54px; background-color:#0D1630;}
#handout {width:100%; background-color:#0D1630; padding-top:10px;padding-bottom:10px;}

#soundpromo {width:100%; background-color:#5d3c11; padding-top:25px;}
	
audio {
	width:100%;
}