/*svg[data-display=no]{
  display: none;
}*/

.modal-content{
  background-image: url("./imgs/text-bg.jpg");
}

/*svg > image {
  width: 1572px;
  height: 642;
}*/

@keyframes glow {
  from {stroke-opacity: 0;}
  to {stroke-opacity: 1;}
}

rect.click-target {
	fill-opacity: 0;
  fill: white;
  stroke: white;
  stroke-width: 2px;
  stroke-opacity: 0;
  animation-name: glow;
  animation-duration: 1.5s;
  animation-direction: alternate;
  animation-iteration-count: 2;
  cursor: pointer;
}

rect.click-target:hover {
  stroke-opacity: 0.5;
  fill-opacity: 0.25;
  transition: fill-opacity 200ms ease-in;
  transition: stroke-opacity 200ms ease-in;
}

rect.click-target-outerborder {
  fill-opacity: 0;
  fill: white;
  stroke-opacity: 0;
  stroke: grey;
  stroke-width: 3px;
  animation-name: glow;
  animation-duration: 1.5s;
  animation-direction: alternate;
  animation-iteration-count: 2;
  animation-delay: 100ms;
}

@keyframes toTransparent{
  from {opacity: 1}
  to {opacity: 0}
}

@keyframes toOpaque{
  from {opacity: 0}
  to {opacity: 1}
}

.makeTransparent {
  animation-name: toTransparent;
  animation-duration: 1s;
	animation-fill-mode: both;
  animation-timing-function: ease-in;
}

.makeOpaque {
  animation-name: toOpaque;
  animation-duration: 1s;
	animation-fill-mode: both;
  animation-timing-function: ease-in;
}

.content {
  height: auto;
  width: 100%;
  position: relative;
}

.paginate {
  position: absolute;
  top: 700px;
  display: none;
  z-index: 99;
}

.paginate img {
  height: 50px;
  width:  50px;
  margin: 10px;
}

.paginate#previous {
  left: 2px;
}

.paginate#next {
  right: 2px;
  transform: rotate(180deg);
}

#text-frame {
  width: 100%;
  border: none;
  max-height: 700px;
}

.modal-dialog {
  width: 50%;
}

#texts-modal .modal-header {
  border-bottom: none;
}

#texts-modal .modal-footer {
  border-top: none;
}

#minibooks-modal {
  display: none;
  position: fixed;
  z-index: 2;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto; 
  -webkit-transform: translateZ(99);
}

.minibooks-content {
  margin: 5% auto; 
  width: 100%;
  position: relative;
}

#minibook-page-image {
  max-width: 100%;
	max-height: 800px;
  display: block;
  margin: auto;
}

.minibook-paginate img {
  position: absolute;
  bottom: 0px;
  height: 50px;
  width:  50px;
  margin: 5px;
}

#minibook-pg-next img {
  transform: rotate(180deg);
}

#minibook-pg-next {
  height: 50px;
  width:  50px;
  float: right;
}

#minibook-pg-previous {
  float: left;
}

#minibook-close {
  display: block;
  margin: auto;
  width: 50px;
}

#minibooks-pagination-area {
  display: block;
  position: relative;
  width: 30%;
  min-width: 200px;
  min-height: 60px;
  margin: auto;
}

svg#page, svg#drop-shadow-for-page {
  z-index: 1;
  position: absolute;
  top: 10px;
  height: auto;
  width: 95%;
  margin: 10px 2% 10px 2%;
}

svg#drop-shadow-for-page {
  z-index: -5;
}

.main-page-image:first-child {
  opacity: 1;
}

.main-page-image {
 z-index: -1;
 position: absolute;
 top: 10px;
 height: auto;
 width: 95%;
 margin: 10px 2% 10px 2%;
 opacity: 0;

}

#under-main-page {
  position: absolute;
  top: 700px;
  width: 100%;
  text-align: center;
}

#copyright-notice {
  font-size: 0.8em;
}

audio {
  position: fixed;
  display: none;
}