@font-face{font-family:osw;font-style:normal;font-weight:normal;src:url('../fonts/oswald300.woff') format('woff');}
@font-face{font-family:fnt;font-style:normal;font-weight:normal;src:url('../fonts/openr.woff') format('woff');}
@font-face{font-family:fnt;font-style:normal;font-weight:bold;src:url('../fonts/openb.woff') format('woff');}
@font-face{font-family:fnt;font-style:italic;font-weight:normal;src:url('../fonts/openi.woff') format('woff');}
@font-face{font-family:fnt;font-style:italic;font-weight:bold;src:url('../fonts/openbi.woff') format('woff');}
*{margin:0;padding:0;}
*,*:before,*:after{box-sizing:border-box;}
body{font-family:fnt,sans-serif;font-size:100%;background-color:#fff;}

a{color:#000;}

summary{font-family:osw,sans-serif; font-size:1.3em; position:relative; display:block; padding:0 0 0 1em; color:#fff; line-height:2; cursor:pointer;margin-bottom:5px;}

#header {position:fixed;width:100%; height:3rem; background-color:#EE5736; margin-bottom:1em;text-align:center;}
#suburani-logo {width:12.5em; padding-left:1em;float:left;}
#signout{position:absolute;top:.5em;right:.5em;display:none;}

.story{background:#EE5736;}
.maps{background:#357BBF;}
.reference{background:#970E53;}

#openactive {width:100%;text-align:center;position:relative;}
#openactive img {width:100%;}

#paint {position:absolute;top:-1em;left:-3em;}

#chapter-title {font-family:osw; font-size: clamp(16px, 7vw, 100px);color:#fff;text-align:center;position:absolute;top: 0.3em;
left: 0.5em;}
#chapimg {margin-bottom:-2em;}
.opentxt {font-family:osw; font-size: clamp(16px, 4vw, 22px);color:#000;background-color:#eee;text-decoration: underline;padding:0.7em;cursor:pointer;margin-bottom:1em;border:2px solid #777;display:inline-block;}

#content{position:absolute;top:4.5rem;left:0;right:0;bottom:0;overflow-y:scroll;}
#activebook{max-width:45.9em;margin:0 auto;padding:.5em;position:relative;}

.chbox {width:9em;float:left;margin:0.9em;}
.chbox img {width:100%;}

.roma {background-color:#aa4016;}
.lond {background-color:#648e67;}
.lusi {background-color:#EE7800;}
.pomp {background-color:#970E27;}

.chap-grey {opacity: 0.5;}

.chtit {font-family:osw; font-size:1.3em;color:#fff;padding-left: 0.5em;}
.flex-container {display:flex;flex-wrap: wrap;}

.mapbox {width:20em;float:left;margin:0.9em;background-color:#C9A701;}
.mapbox img {width:100%;}
.maptit {font-family:osw; font-size:1.3em;color:#fff;padding-left: 0.5em;}

.restit {font-family:osw; font-size:1em;color:#000;padding-left: 0.5em;}
.resource {width: 11em;padding: 1em;text-align: center;}

.links {background-color: #2B1685;}
.gallery {background-color: #00AB8E;}
.activities {background-color: #C9A701;}
.dictionary {background-color: #017100;}
.teacher {background-color: #6642BD;}
.community {background-color: #4BA151;}

h2 {font-family:osw; font-size:1.3em;}

/*COMMUNITY RESOURCES*/
.chapter{background:#EE5736;}
.book{background:#49AFB8;}
.resource-title {background:#011E62;font-size:1em;}
.readme {
	float: right;
	border: solid black 1px;
	font-size: 0.8em;
	margin: 0.2em;
	padding: 0 0.5em;
	font-variant: small-caps;
	cursor:pointer;
}
.readme a {text-decoration:none;}

/*IMAGE GALLERY*/
#block0 {text-align:center; width: 100%; background-color:#eee; margin-bottom: 2em;}
* {box-sizing:border-box}

/* Slideshow container */
.slideshow-container {
  position: relative;
  margin: auto;
  height: 700px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* Hide the images by default */
.mySlides {
  display: none;
  padding-top:1em;
}

/*.slideitem{width:25em;}*/
.slideitem{max-width:100%;}

/* Next & previous buttons */
.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  color: black;
  font-weight: bold;
  font-size: 3em;
  transition: 0.6s ease;
  user-select: none;
}

.portrait {
	padding: 0 10em;
}

/* Position the "next button" to the right */
.next {
  right: 0.2em;
  filter: drop-shadow(2px 4px 6px white);
}
.prev {
  left: 0.2em;
  filter: drop-shadow(2px 4px 6px white);
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
  background-color: rgba(0,0,0,.2);
}

/* Caption text */
.text {
  color: black;
  background-color: white;
  font-size: 0.7em;
  padding: 0.7em 1em;
  width: 95%;
  text-align: center;
  font-family: fnt,sans-serif;
  display: inline-block;
}




/* The dots/bullets/indicators */
.dot {
  cursor: pointer;
  height: 1em;
  width: 1em;
  margin: 0 0.3em;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.dot-box {
	padding: 0.8em;
	text-align:center;
}

.active, .dot:hover {
  background-color: #717171;
}

/* Fading animation */
.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 1.5s;
  animation-name: fade;
  animation-duration: 1.5s;
}

@-webkit-keyframes fade {
  from {opacity: .4}
  to {opacity: 1}
}

@keyframes fade {
  from {opacity: .4}
  to {opacity: 1}
}


.dropbtn {
  background-color: #2B1685;
  color: white;
  padding: 0.5em;
  font-size: clamp(12px, 4vw, 22px);color:#fff;
  border: none;
  font-family:osw;
}

/* The container <div> - needed to position the dropdown content */
.dropdown {
  position: relative;
  display: inline-block;
  float:right;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
  display: none;
  position: absolute;
  right: 0;
  background-color: #f1f1f1;
  min-width: 100px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
  font-size: clamp(12px, 3vw, 16px);color:#fff;
}

/* Links inside the dropdown */
.dropdown-content a {
  color: black;
  padding: 0.5em;
  text-decoration: none;
  display: block;
}

/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #ddd;}

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {display: block;}

/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover .dropbtn {background-color: #1c0e5a;}

.link {
	color: #c40;
	}
.latin {
    color: #aa4016;
    font-weight: bold;
	}
.engdescr {
	margin: 0 0 .25em 0;
	}
	
	/* Audio in Teacher area */
	.audio-box {width:20em;margin:1em 1em 1em 3em;display:inline-block;}
	.audio-button {font-family:oswald; font-size:1.2em; background-color: #eee; padding:.5em; width:16.7em; display:inline-block; font-weight: 300; margin-top:-1em;}
	.audio-button:hover {background:#FFEB59;}
	.playback {margin-right:1em;}