/*CSS specific to the activity goes here. Anything related to the template, the headers, the footers will be at a higher folder level*/
.question{

	padding: 2%;
	/*background-color: #B5E2FF;*/

}	

.question h5{
	color: #4E6E38;
	font-weight: bold;
	font-size: 1.1em;
	line-height: 1.6em;
  padding-top:  0.0em;
  padding-bottom: 1.5em;
}

.question  p{

font-size: 1.1em;
	line-height: 1.4em;
   width: 95%;

}

#contentwrap {

    width: 85%;

   height: 300px;
    margin: 0px auto; 

 
}

.answers{
	text-align: center;
}

.answers img{
	border: 2px solid #1D4E89; 
	padding: 20px;
	border-radius: 14px; 
	-moz-border-radius: 14px; 
	-webkit-border-radius: 14px; 

}

img.selected{
	border: 7px solid #0AD678;
	padding: 15px;
	border-radius: 14px; 
	-moz-border-radius: 14px; 
	-webkit-border-radius: 14px; 


}

.correct{
	
	background-image: url("../unit2/Activity03-Movements-along-a-demand-curve/images/correct.png");
	background-repeat: no-repeat;
	background-position: right top;
	background-size: 80px 60px;
	background-position: 90% 20%;
}

.incorrect{
	background-image: url("../unit2/Activity03-Movements-along-a-demand-curve/images/incorrect.png");
	background-repeat: no-repeat;
	background-position: right top;
	background-size: 60px 60px;
	background-position: 90% 20%;

}
.questions {

	
	width: 100%;
display: block;
position: relative;
float: left;
    background-color: #ffffff;

}

.backToResults {

display: none;

}

.buttons {

	
	width: 100%;
    margin: 0 auto;
    margin-top: 20px;
	text-align: center;
    background-color: #ffffff;

}

.summary {

	
	width: 80%;
    margin: 0 auto;
    /*padding: 20px;*/
    background-color: #ffffff;
	display:none;



}

.summarybox {

	
	width: 40%;
    margin: 0 auto;
    padding: 20px;
    background-color: #ffffff;
    border: 2px solid #1D4E89; 
    margin-bottom: 10px;
   	border-radius: 14px; 
	-moz-border-radius: 14px; 
	-webkit-border-radius: 14px; 
	border: 2px solid #1D4E89;

}


.summaryhead {

	
	width: 100%;
    margin: 0 auto;
    margin-top: 0px;
	text-align: left;
	color: #ffffff;
	padding: 8px 0px 10px 0px;
	padding-left: 8px;
    background-color: #1D4E89;

    border-radius: 14px; 
	-moz-border-radius: 14px; 
	-webkit-border-radius: 14px; 
	border: 2px solid #1D4E89;

}

.currentImageAnswer {
  margin: auto;
  display: block;
}

.correctImageAnswer {
  margin: auto;
  display: block;
}



.overlay {
  /*overflow: scroll;*/
  position: fixed;
  top: 0;
  bottom: 110%;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 10000;
  opacity: 0;
  display:none;




  transition: opacity 200ms linear, bottom 0s linear 200ms;
}
.overlay-open {
  bottom: 0;
  opacity: 1;
  display:block;
  transition: opacity 200ms linear, bottom 0s linear;
}
.overlay-view {
  overflow: hidden;
}
.overlay-form .overlay-inner {
  background: #FFF;
  margin: 5rem auto;
  padding: 4rem;
  max-width: 700px;
}
.admin-bar .overlay {
  top: 32px;
}
@media screen and (max-width: 782px) {
  .admin-bar .overlay {
    top: 46px;
  }
}
html {
 
  background-size: 60px 60px;
  background-position: center center;
}
/*body {
  padding-bottom: 80em;
}*/


.overlay-inner {
  max-width: 40rem;
  margin: 5rem;
  padding: 2rem;
  background: #FFF;
  border: 2px solid #1D4E89;
}
@media screen and (min-width: 52rem) {
  .overlay-inner {
    margin-left: auto;
    margin-right: auto;
  }
}
/*START of IMAGE figure Numbering*/




.article {
  width: 100%;
  max-width: 50em;
  margin: 0 auto; 
  padding: 1em;
  counter-reset: figures;
}

.article h2 {
  margin: 1em 0;
  font-size: 2em;
  border-bottom: 3px solid #f5bca8;
  padding-bottom: .3em;
  color: #f5bca8;
}

.article p {
  margin-bottom: 1em;
  font-size: 1.1em;
  line-height: 1.6;
  text-align: justify;
}

.article h2 + p,
.article h2 + figure + p {
  text-indent: 1em;
}

.article p:first-of-type:first-line {
  font-weight: 700;
}

.figure {
  padding: 0.4em;
  border: 1px solid #2357B3;
  background: #fff;
  margin: 0 auto 1em;
}

.figure img {
  margin: 0 auto;
  display: block;
  max-width: 100%;
}

.figure figcaption {
  font-weight: 200;
  /*text-transform: uppercase;*/
  letter-spacing: 2px;
  font-size: 0.8em;
  padding: .5em;
  text-align: center;
  color: #fff;
  background: #2357B3;
  counter-increment: figures;
}
.figure a:link{
  color: #fff;
}
.figure a:visited {
    color: #fff;

}
.figure a:hover {
    color: #0000FF;
}

.figure a:active {
    color: #fff;
}
.figure h5{
  padding-top: 0.5em;
font-size: 0.7em;
color: #fff;

}
/*.figure figcaption:before {
  content: 'Fig. ' counter(figures) ' - ';
}*/



.figure-left {
  float: left;
  margin: 0 1.5em .5em .5em;
  width: -webkit-min-content;
  width: -moz-min-content;
  width: min-content;
}

.figure-right {
  float: right;
  margin: 0 5.5em 0.5em 1.5em;
  width: -webkit-min-content;
  width: -moz-min-content;
  width: min-content;
}

.figure-right img,
.figure-left img {
  max-width: 300px;
}

@media (max-width: 767px) {
  .figure-left,
  .figure-right {
    float: none;
    margin: 0 0 1em 0;
    width: 100%;
  }

  .figure img {
    max-width: 100%;
  }
}

/*END OF IMAGE figure Numbering*/