@font-face {
  font-family: 'Chalkboard';
  font-weight: normal;
  src: url('../lib/fonts/Chalkboard.ttf')

}

@media only screen and (min-width: 0px) and (max-width: 479px){

*:focus {
    outline: none;
}

#canvas{
	width: 300px;
	height: 300px;
/*  margin-left: 20px;
  margin-top: 20px;*/
  margin: auto;
  display: block;
  /*top:50%;
  left:50%;*/
}

#controls{
  width: 360px;
  margin: auto;
}

div#controls{
  position: -webkit-sticky; /* Safari */
  position: sticky;
  background: white;
  top: 0;
  z-index: 999;
}


#book-zoom{
	-webkit-transition: -webkit-transform 1s;
	-moz-transition: -moz-transform 1s;
	-ms-transition: -ms-transform 1s;
	-o-transition: -o-transform 1s;
	transition: transform 1s;
}

body, ul, table, form{
	margin:0;
	padding:0;
}
.ph-book{
  width:300px;
  height:300px;
  /*top:50%;
  left:50%;
  margin: auto;*/
  background-color:white;
}

.ph-book .page {
  background-color:white;
}

.pg_text {
  background-color:white;
  cursor: pointer;
}

.pg_cover {
  width: 300px;
  height: 300px;
  margin: 0px;
}
/*page10*/
.pg_text{
	font-family: 'Chalkboard';
	font-weight: normal;
	font-size: 12pt;
  clear: left;
  text-align:center;
  position: absolute;
  top: 231px;
  width: 197px;
  margin-left: 51px;
  margin-right: 51px;
}

.pg_img{
  float:none;
  display:block;
  margin-left:auto;
  margin-right:auto;
  width: 300px;
  height: 300px;
}


.txt_noshow {
  display:none;
}


.btn {
  height: 85px;
  width: 85px;
  background-color: White; /* Blue background */
  border: none; /* Remove borders */
  color: white; /* White text */
  padding: 0px 0px; /* Some padding */
  cursor: pointer; /* Mouse pointer on hover */
}

.btn:active {
  transform: translateY(4px);
}

.ph-book .page{
	-webkit-box-shadow:0 0 10px rgba(0,0,0,0.2);
	-moz-box-shadow:0 0 10px rgba(0,0,0,0.2);
	-ms-box-shadow:0 0 10px rgba(0,0,0,0.2);
	-o-box-shadow:0 0 10px rgba(0,0,0,0.2);
	box-shadow:0 0 10px rgba(0,0,0,0.2);
}

.shadow{
	-webkit-transition: -webkit-box-shadow 0.5s;
	-moz-transition: -moz-box-shadow 0.5s;
	-o-transition: -webkit-box-shadow 0.5s;
	-ms-transition: -ms-box-shadow 0.5s;

	-webkit-box-shadow:0 0 10px #ccc;
	-moz-box-shadow:0 0 10px #ccc;
	-o-box-shadow:0 0 10px #ccc;
	-ms-box-shadow:0 0 10px #ccc;
	box-shadow:0 0 10px #ccc;
}


span[data-begin].speaking {
    /* background-color: yellow; */
    background-color: #f06c5d;
    color:white;
/*    box-shadow: 0px 0px 4px yellow; */
}

span.wbw {
    background-color: #98FB98;
}
}


@media only screen and (min-width: 480px) and (max-width: 699px) {
*:focus {
    outline: none;
}

#canvas{
	width: 450px;
	height: 450px;
/*  margin-left: 20px;
  margin-top: 20px;*/
  margin: auto;
  display: block;
  /*top:50%;
  left:50%;*/
}

#controls{
  width: 360px;
  margin: auto;
}

div#controls{
  position: -webkit-sticky; /* Safari */
  position: sticky;
  background: white;
  top: 0;
  z-index: 999;
}


#book-zoom{
	-webkit-transition: -webkit-transform 1s;
	-moz-transition: -moz-transform 1s;
	-ms-transition: -ms-transform 1s;
	-o-transition: -o-transform 1s;
	transition: transform 1s;
}

body, ul, table, form{
	margin:0;
	padding:0;
}
.ph-book{
  width:450px;
  height:450px;
  /*top:50%;
  left:50%;
  margin: auto;*/
  background-color:white;
}

.ph-book .page {
  background-color:white;
}

.pg_text {
  background-color:white;
  cursor: pointer;
}

.pg_cover {
  width: 450px;
  height: 450px;
  margin: 0px;
}
/*page10*/
.pg_text{
	font-family: 'Chalkboard';
	font-weight: normal;
	font-size: 18pt;
  clear: left;
  text-align:center;
  position: absolute;
  top: 346px;
  width: 296px;
  margin-left: 77px;
  margin-right: 77px;
}

.pg_img{
  float:none;
  display:block;
  margin-left:auto;
  margin-right:auto;
  width: 450px;
  height: 450px;
}


.txt_noshow {
  display:none;
}


.btn {
  height: 85px;
  width: 85px;
  background-color: White; /* Blue background */
  border: none; /* Remove borders */
  color: white; /* White text */
  cursor: pointer; /* Mouse pointer on hover */
}

.btn:active {
  transform: translateY(4px);
}

.ph-book .page{
	-webkit-box-shadow:0 0 15px rgba(0,0,0,0.2);
	-moz-box-shadow:0 0 15px rgba(0,0,0,0.2);
	-ms-box-shadow:0 0 15px rgba(0,0,0,0.2);
	-o-box-shadow:0 0 15px rgba(0,0,0,0.2);
	box-shadow:0 0 15px rgba(0,0,0,0.2);
}

.shadow{
	-webkit-transition: -webkit-box-shadow 0.5s;
	-moz-transition: -moz-box-shadow 0.5s;
	-o-transition: -webkit-box-shadow 0.5s;
	-ms-transition: -ms-box-shadow 0.5s;

	-webkit-box-shadow:0 0 15px #ccc;
	-moz-box-shadow:0 0 15px #ccc;
	-o-box-shadow:0 0 15px #ccc;
	-ms-box-shadow:0 0 15px #ccc;
	box-shadow:0 0 15px #ccc;
}


span[data-begin].speaking {
    /* background-color: yellow; */
    background-color: #f06c5d;
    color:white;
/*    box-shadow: 0px 0px 4px yellow; */
}

span.wbw {
    background-color: #98FB98;
}
}

@media only screen and (min-width: 700px) {
*:focus {
    outline: none;
}

#canvas{
	width: 585px;
	height: 585px;
/*  margin-left: 20px;
  margin-top: 20px;*/
  margin: auto;
  display: block;
  /*top:50%;
  left:50%;*/
}

#controls{
  width: 360px;
  margin: auto;
}

div#controls{
  position: -webkit-sticky; /* Safari */
  position: sticky;
  background: white;
  top: 0;
  z-index: 999;
}


#book-zoom{
	-webkit-transition: -webkit-transform 1s;
	-moz-transition: -moz-transform 1s;
	-ms-transition: -ms-transform 1s;
	-o-transition: -o-transform 1s;
	transition: transform 1s;
}

body, ul, table, form{
	margin:0;
	padding:0;
}
.ph-book{
  width:585px;
  height:585px;
  /*top:50%;
  left:50%;
  margin: auto;*/
  background-color:white;
}

.ph-book .page {
  background-color:white;
}

.pg_text {
  background-color:white;
  cursor: pointer;
}

.pg_cover {
  width: 585px;
  height: 585px;
  margin: 0px;
}
/*page10*/
.pg_text{
	font-family: 'Chalkboard';
	font-weight: normal;
	font-size: 24pt;
  clear: left;
  text-align:center;
  position: absolute;
  top: 450px;
  width: 385px;
  margin-left: 100px;
  margin-right: 100px;
}

.pg_img{
  float:none;
  display:block;
  margin-left:auto;
  margin-right:auto;
  width: 585px;
  height: 585px;
}


.txt_noshow {
  display:none;
}


.btn {
  height: 85px;
  width: 85px;
  background-color: White; /* Blue background */
  border: none; /* Remove borders */
  color: white; /* White text */
  cursor: pointer; /* Mouse pointer on hover */

}

.btn:active {
  transform: translateY(4px);
}

.ph-book .page{
	-webkit-box-shadow:0 0 20px rgba(0,0,0,0.2);
	-moz-box-shadow:0 0 20px rgba(0,0,0,0.2);
	-ms-box-shadow:0 0 20px rgba(0,0,0,0.2);
	-o-box-shadow:0 0 20px rgba(0,0,0,0.2);
	box-shadow:0 0 20px rgba(0,0,0,0.2);
}

.shadow{
	-webkit-transition: -webkit-box-shadow 0.5s;
	-moz-transition: -moz-box-shadow 0.5s;
	-o-transition: -webkit-box-shadow 0.5s;
	-ms-transition: -ms-box-shadow 0.5s;

	-webkit-box-shadow:0 0 20px #ccc;
	-moz-box-shadow:0 0 20px #ccc;
	-o-box-shadow:0 0 20px #ccc;
	-ms-box-shadow:0 0 20px #ccc;
	box-shadow:0 0 20px #ccc;
}


span[data-begin].speaking {
    /* background-color: yellow; */
    background-color: #f06c5d;
    color:white;
/*    box-shadow: 0px 0px 4px yellow; */
}

span.wbw {
    background-color: #98FB98;
}
}

@media print{
  body {
    display:none;
  }
}