body {
  background: white;
  color:black;
}

header, div {

  text-align:center;
}


body {
  background-color: #ffffff;
}
h1 {
  color: black;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 22px;
    margin: 10px;
}
h1.large {
  color: black;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 44px;
    margin: 10px;
}
h2 {
  color: black;
  font-family: Arial, Helvetica, sans-serif;
    font-size: 20px;
	  margin: 10px;
}
h3 {
  color: black;
  font-family: Arial, Helvetica, sans-serif;
    font-size: 18px;
	  margin: 10px;
}
p {
  color: black;
  font-family: Arial, Helvetica, sans-serif;
      font-size: 18px;
	  margin: 10px;
}

div {
background-color:white;
text-align: left;

  width: 100%;
  margin: 10px;

}

div.medium {
background-color:white;
text-align: left;

  width: 700px;
  margin: 10px;

}

div.mediumnobdr {
background-color:white;
text-align: left;

  width: 700px;
  margin: 10px;

}

div.wide {
background-color:white;

text-align: left;
  width: 90%;
  margin: 10px;

}
div.halfwide {
background-color:light grey;

text-align: left;
  width: 500px;
  margin: 10px;


}

div.clear {
background-color:transparent;

margin: auto;
  width: 50%;

  padding: 0px;

border: transparent;
}



footer {
background-color:white;
text-align: left;
color: black;
  font-family: Arial, Helvetica, sans-serif;
    font-size: 18px;

  width: 90%;
  margin: 10px;

}
iframe name="left"{
  display:block;
  margin-top: 20px;
  margin-left: 10px;
  width:400px;
  height:800px;
}

iframe  name="right"{
  display:block;
  margin-top: 20px;
  margin-left: 650px;
  width:400px;
  height:800px;
}



.container {
  position: relative;
  overflow: hidden;
  width: 100%;
  padding-top: 56.25%; /* 16:9 Aspect Ratio (divide 9 by 16 = 0.5625) */
}

/* Then style the iframe to fit in the container div with full height and width */
.responsive-iframe {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
}