/* comment: page formatting make a container to constrain width and center */
/* start media query:portrait view */
@media all and (max-width: 768px) and (orientation:portrait) {
.pagecontainer {
    margin-left: auto;
    margin-right: auto;
    max-width:100%;
}

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

}/* end media query portrait */



/* start media query:landscape  Note: max-width of 800px makes it so ipads show full screen instead of 75% (ensures better view) Note: smaller screens will still show at 75% to fit.*/
@media all and (min-width: 600px) and (max-width:1024px) and (orientation:landscape)  {
.pagecontainer {
    margin-left: auto;
    margin-right: auto;
    max-width:75%;
   
}

.ad{
  display:none;
}

}/* end media query landscape */

/* start media query:landscape for larger devices */
@media all and (min-width: 1025px) and (orientation:landscape)  {
.pagecontainer {
    margin-left: auto;
    margin-right: auto;
    max-width:800px;
   
}
.ad{
  width:100%;
  max-height: 90px; 
  background-color:black;
  position: relative;
 
  z-index:5;
  margin-top:20px;
  margin-left: auto;
    margin-right: auto;

}


}/* end media query landscape */





body {
margin-left: auto;
margin-right: auto;
background-color: #1a1a1a;
overflow: scroll;
/* 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;
  max-height: 100%;
  overflow: hidden;  
  /* to get padding-bottom divide the numbers of aspect ratio */
  padding-bottom: 60%;
  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%;
   
   
 }