@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;}

#header{position:fixed;width:100%; height:3rem; background-color:#EE5736; text-align:left;}
#suburani-logo {height:3rem;width:auto;padding-left:1rem;float:left;}
#hue-logo {height:2.4rem;width:auto;padding-left:1rem;float:left;padding-top:0.3rem;}
#land-logo {height:2.5rem;width:auto;padding-left:1rem;float:left;padding-top:0.5rem;}
#appttl{font-size:1.2rem;line-height:3rem;margin-left:1rem;display:inline-block;color:#eee;}
#signout{position:absolute;top:.6rem;right:.5rem;display:inline-block;}

#footer{position:fixed;width:100%; height:3rem; background-color:#EE5736; text-align:left;bottom:0;}
#privacy{display:inline-block;float:left;padding-left:1em;}
#privacy a{text-decoration:none;color:#fff;border-bottom:none;font-size:0.8em;}
#contact{display:inline-block;float:right;padding-right:1em;color:#fff;}
#contact a{text-decoration:none;color:#fff;border-bottom:none;font-size:0.8em;}

button {
	font-family:fnt;
	font-size: .85rem;
	-webkit-appearance: button;
	-webkit-writing-mode: horizontal-tb !important;
	text-rendering: auto;
	color: #000;
	letter-spacing: normal;
	word-spacing: normal;
	text-transform: none;
	text-indent: 0;
	text-shadow: none;
	display: inline-block;
	text-align: center;
	align-items: flex-start;
	cursor: default;
	background-color: rgb(239, 239, 239);
	box-sizing: border-box;
	margin: 0;
	padding: .35rem .3rem .25rem .3rem;
	border-width: 1px;
	border-style: outset;
	border-color: rgb(118, 118, 118);
	border-image: initial;
	border-radius:3px;
	text-transform:uppercase;
	min-width:4rem;
}

button:hover{
	background-color: rgb(220, 220, 220);
}

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;}

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

#content1{position:absolute;top:4.5rem;left:0;right:0;bottom:4rem;overflow-y:scroll;}
#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:#a80030;}
.carth {background-color:#00818E;}
.greece {background-color:#2932ae;}
.eph {background-color:#a3a71c;}


.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;}

.opaque {opacity: 0.5;}

#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;text-decoration: underline;padding:0.7em;cursor:pointer;margin-bottom:.1em;}
.lowres {font-family:fnt;font-size:1rem;color:#000;background-color:#ccc;text-decoration:underline;padding:0 1em;cursor:pointer;margin-bottom:.2em;text-transform:none;}

.smallcaps {font-variant: small-caps;}

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

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

/*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:#fff; 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;
	max-height:600px;
}

/* 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;
}

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


/* 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;}

/* Weblinks */
.link{color:#c40;}
.engdescr{margin:0 0 .25em 0;}
.latin{color:#aa4016;font-weight:bold;}

/* 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;}

.bold-red{color:#aa4016;font-weight:bold;}
.bold{font-weight:bold;}