/* comment: page formatting make a container to constrain width and center */
.pagecontainer {
    margin-left: auto;
    margin-right: auto;
    max-width:640px;
    
}


body {
margin-left: auto;
margin-right: auto;
background-color: black;
overflow:hidden;
/* note overflow: hidden above makes it so the ad won't cause the question to disappear if students scroll from the ad.  this= important cause some students don't understand what they did and can't figure out how to see the question again*/
}


.intrinsic-container {
  position: relative;
  clear:both;
  height: 0;
  overflow: hidden;  
  /* to get padding-bottom divide the numbers of aspect ratio */
  padding-bottom: 150%;
  z-index: 3;
  margin-left: auto;
  margin-right: auto;
   width: 100%;

}

.intrinsic-container iframe {
  position: absolute;
  top:0;
  left:0;
  border:0px;
  margin:0px;
   width: 100%; 
   height:100%;
 }

.ad{
  width:100%;
  max-height: 90px; 
  background-color:black;
  position: fixed;
  bottom: 0;
  left: 0;
  z-index:5;
}

/* start media query: ad z index if screen short */
@media (max-height: 500px) {
.ad{
	background-color:white;
	z-index:-1;
	}
}/* end media query 2 */