/* Page setup */
body {
  margin: 0;
  padding: 0;
  overflow: auto;
}

a:link {
  color: #b98289;
  text-decoration: none;
}

a:visited {
  color: #b98289;
  text-decoration: none;
}

a:hover {
  color: #b98289;
  text-decoration: none;
}

p {
  font-size: 1.1vh;
  font-family: 'Roboto', sans-serif;
}

/*nav bar*/
.navbar {
  overflow: hidden;
  background-color: #000;
  align: left;
  position: fixed;
  /* Set the navbar to fixed position */
  top: 0;
  /* Position the navbar at the top of the page */
  width: 100%;
  /* Full width */
  z-index: 500;
  font-size: .9em;
  text-transform: uppercase;
  font-family: 'Roboto Slab', sans-serif;
  padding: 1.1em;
}

.video-container {
  position: relative;
  padding-bottom: 56.25%;
  padding-top: 30px;
  height: 0;
  overflow: hidden;
}

.video-container iframe, .video-container object, .video-container embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.video-container2 {
  position: relative;
  padding-bottom: 45%;
  overflow: hidden;
}

.video-container2 iframe, .video-container object, .video-container embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}


#map {
  width: 100%;
  height: 100%;
  position: fixed;
  z-index: 1;
}

#map2 {
  width: 100%;
  height: 100vh;
  position: relative;
  z-index: 200;
}

#everything-container {
  width: 100%;
  height: 100%;
  font-size: 0;
}

#first {
  background-size: cover;
  background-repeat: no-repeat;
  background-position: left center;
  background: linear-gradient(to bottom,
      rgba(0, 0, 0, 0),
      rgba(0, 0, 0, 0.5)),
    url("http://belizenyucapstone2020.github.io/resilient-belize-city/images/cover1.jpg");
  position: relative;
  width: 100%;
  min-height: 100vh;
  font-size: 1.1vw;
  font-family: 'Roboto', sans-serif;
  line-height: 1.8vw;
  z-index: 99;
  text-align: center;
}

#firstext {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  height: 40vh;
  color: #ffffff;
  text-transform: uppercase;
  text-shadow: 2px 3px 3px black;
}

#firstextbox {
  background-color: #133c60;
  text-transform: uppercase;
  text-shadow: 0 0px 0 black;
  font-size: .9vw;
  line-height:1.1vh;
  color: #ffffff;
  width: 50%;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  text-transform: none;
  padding: 1.4em;
}

#chapterone {
  background-color: #0c273e;
  position: relative;
  color: #ffffff;
  width: 100%;
  font-size: 1.1vh;
  font-family: 'Roboto', sans-serif;
  line-height: 1.9vw;
  z-index: 101;
  text-align: justify;
  display: inline-block;
}

#chapteronebox {
  background-color: #0c273e;
  text-transform: none;
  text-shadow: 0 1px 0 black;
  color: #ffffff;
  width: 55%;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  position: relative;
  margin: auto;
}

#flood-container {
  position: relative;
  width: 100%;
  min-height: 100vh;
  font-size: 1.1vw;
  font-family: 'Roboto', sans-serif;
  line-height: 1.8vw;
  z-index: 160;
}

#flood-label {
  background-color: #133c60;
  max-width: 30%;
  top: 5vh;
  left: 5vh;
  position: absolute;
  margin: auto;
  z-index: 190;
  padding: 1.4em;
  color: #fff;
  font-size: 1.1vw;
  font-family: 'Roboto', sans-serif;
}

.container {
  height: 100vh;
  position: relative;
  width: 100%;
}

.container .slide {
  background-position: bottom right;
  background-repeat: no-repeat;
  background-size: cover;
  height: 100%;
  left: 0;
  opacity: 0;
  position: absolute;
  top: 0;
  transition: transform 1s ease-in-out;
  width: 100%;
  z-index: 170;
}

.container .slide.show {
  opacity: 1;
}

.spacer-full {
  position: relative;
  width: 100%;
  min-height: 100vh;
  z-index: 172;
}

.spacer5 {
  position: relative;
  width: 100%;
  min-height: 5vh;
  z-index: 190;
}

.spacer10 {
  position: relative;
  width: 100%;
  min-height: 10vh;
  z-index: 190;
}

.spacer20 {
  position: relative;
  width: 100%;
  min-height: 20vh;
  z-index: 101;
}

.spacer30 {
  position: relative;
  width: 100%;
  min-height: 30vh;
  z-index: 101;
}

.spacer40 {
  position: relative;
  width: 100%;
  min-height: 40vh;
  z-index: 101;
}

.spacer60 {
  position: relative;
  width: 100%;
  min-height: 60vh;
  z-index: 101;
}

.spacer80 {
  position: relative;
  width: 100%;
  min-height: 80vh;
  z-index: 101;
}

#buildings-about {
  background-color: #ffffff;
  width: 55%;
  text-align: justify;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  position: relative;
  margin: auto;
  z-index: 180;
  padding-top: 2vh;
  padding-bottom: 2vh;
  padding-right: 3vh;
  padding-left: 3vh;
  color: #000;
}

#buildings-map {
  position: relative;
  width: 100%;
  min-height: 100vh;
  z-index: 101;
}

#buildings-map-about {
  background-color: #133c60;
  text-align: justify;
  width: 35%;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  position: relative;
  margin: auto;
  z-index: 171;
  padding: 1.4em;
  color: #fff;
  font-size: 1.1vw;
  font-family: 'Roboto', sans-serif;
}

.legend {
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
  font-size: .7em;
  line-height: 2em;
}

.legend div span {
  display: inline-block;
  height: 2vh;
  width: 2vh;
}

#buildings-full {
  background: linear-gradient(to bottom,
      rgba(0, 0, 0, 0.1),
      rgba(0, 0, 0, 0.2)),
    url("http://belizenyucapstone2020.github.io/resilient-belize-city/images/bchouses.jpg");
  background-position: bottom left;
  /* Center the image */
  background-repeat: no-repeat;
  /* Do not repeat the image */
  background-size: cover;
  /* Resize the background image to cover the entire container */
  position: relative;
  width: 100%;
  min-height: 100vh;
  font-size: 1.1vw;
  font-family: 'Roboto', sans-serif;
  line-height: 1.8vw;
  z-index: 160;
}

#informals-about {
  background-color: #ffffff;
  width: 55%;
  text-align: justify;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  position: relative;
  margin: auto;
  z-index: 180;
  padding-top: 2vh;
  padding-bottom: 2vh;
  padding-right: 3vh;
  padding-left: 3vh;
  color: #000;
}


#krooman-and-gungulung {
  background-color: #133c60;
  width: 35%;
  top: 0;
  bottom: 0;
  left: 20vh;
  right: 0;
  text-align: justify;
  position: relative;
  z-index: 101;
  padding: 1.4em;
  color: #fff;
  font-size: 1.1vw;
  font-family: 'Roboto', sans-serif;
}

#credit2 {
  font-size: 6px;
  font-family: 'Roboto', sans-serif;
}

#mangrove-banner {
  background-size: cover;
  background-repeat: no-repeat;
  background-position: top left;
  background: linear-gradient(to bottom,
      rgba(0, 0, 0, 0.3),
      rgba(0, 0, 0, 0.6)),
    url("http://belizenyucapstone2020.github.io/resilient-belize-city/images/mangroves.jpg");
  position: relative;
  width: 100%;
  font-size: 1.1vw;
  font-family: 'Roboto', sans-serif;
  line-height: 1.8vw;
  z-index: 180;
}

#mangrove {
  background-color: #061f33;
  text-transform: none;
  text-shadow: 0 1px 0 black;
  color: #ffffff;
  width: 55%;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  position: relative;
  margin: auto;
  padding: 1.4em;
  z-index: 170;
}

.featherlight .featherlight-content {
  border: 0;
  padding: 0;
}

.featherlight .featherlight-image {
  border: 1px solid #fff;
  max-width: 100%;
}

@media only screen and (max-width: 1024px) {
  .featherlight .featherlight-image {
    border: 10px solid #fff;
  }
}

#sprawl {
  background-color: #ffffff;
  width: 55%;
  text-align: justify;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  position: relative;
  margin: auto;
  z-index: 180;
  padding-top: 2vh;
  padding-bottom: 2vh;
  padding-right: 3vh;
  padding-left: 3vh;
  color: #000;
}

#ladyflood {
  background: linear-gradient(to bottom,
      rgba(0, 0, 0, 0.1),
      rgba(0, 0, 0, 0.2)),
    url("http://belizenyucapstone2020.github.io/resilient-belize-city/images/ladyville.jpg");
  background-position: bottom left;
  /* Center the image */
  background-repeat: no-repeat;
  /* Do not repeat the image */
  background-size: cover;
  /* Resize the background image to cover the entire container */
  position: relative;
  width: 100%;
  min-height: 100vh;
  font-size: 1.1vw;
  font-family: 'Roboto', sans-serif;
  line-height: 1.8vw;
  z-index: 160;
}

#ladyabout {
  background-color: #133c60;
  width: 36%;
  right: 22%;
  text-align: justify;
  position: relative;
  margin: auto;
  z-index: 101;
  padding: 1.4em;
  color: #fff;
  font-size: 1.1vw;
  font-family: 'Roboto', sans-serif;
}

#vibrancy {
  background-color: #ffffff;
  width: 55%;
  text-align: justify;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  position: relative;
  margin: auto;
  z-index: 180;
  padding-top: 2vh;
  padding-bottom: 2vh;
  padding-right: 3vh;
  padding-left: 3vh;
  color: #000;
}

#crimestory {
  background-color: #133c60;
  width: 35%;
  right: 20%;
  text-align: justify;
  position: relative;
  margin: auto;
  z-index: 101;
  padding: 1.4em;
  color: #fff;
  font-size: 1.1vw;
  font-family: 'Roboto', sans-serif;
}

#bap {
  background-color: #0c273e;
  position: relative;
  color: #ffffff;
  width: 100%;
  font-size: 1.1vw;
  font-family: 'Roboto', sans-serif;
  line-height: 1.8vw;
  z-index: 101;
  text-align: justify;
  display: inline-block;
}

#bapbox {
  background-color: #0c273e;
  text-transform: none;
  text-shadow: 0 1px 0 black;
  color: #ffffff;
  width: 55%;
  top: 0;
  left: 0;
  right: 0;
  position: relative;
  margin: auto;
}

#recs1 {
  background-size: cover;
  background-repeat: no-repeat;
  background-position: top left;
  background: linear-gradient(to bottom,
      rgba(0, 0, 0, 0),
      rgba(0, 0, 0, 0.4)),
    url("http://belizenyucapstone2020.github.io/resilient-belize-city/images/cover.jpg");
  position: relative;
  color: #ffffff;
  width: 100%;
  font-size: 1.1vw;
  font-family: 'Roboto', sans-serif;
  line-height: 1.8vw;
  z-index: 101;
  text-align: justify;
  display: inline-block;
}

#recs2 {
  background-color: #ffffff;
  padding-top: 2vh;
  padding-bottom: 2vh;
  padding-right: 3vh;
  padding-left: 3vh;
  color: #ffffff;
  width: 55%;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  position: relative;
  margin: auto;
  color: #000;
    z-index: 101;
}

#recs3 {
  background-size: cover;
  background-repeat: no-repeat;
  background-position: top left;
  background: linear-gradient(to bottom,
      rgba(0, 0, 0, 0.3),
      rgba(0, 0, 0, 0.4)),
    url("http://belizenyucapstone2020.github.io/resilient-belize-city/images/boardwalk.jpg");
  position: relative;
  color: #ffffff;
  width: 100%;
  font-size: 1.1vw;
  font-family: 'Roboto', sans-serif;
  line-height: 1.8vw;
  z-index: 101;
  display: inline-block;
}

#recs4 {
  color: #fff;
  background-color: #000;
  background: linear-gradient(to bottom,
      rgba(0, 0, 0, 0.7),
      rgba(0, 0, 0, 0.5));
  padding-top: 2vh;
  padding-bottom: 2vh;
  padding-right: 3.5vh;
  padding-left: 3.5vh;
  width: 55%;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  position: relative;
  margin: auto;
  z-index: 101;

}

#recs5 {
  background-color: #133c60;
  position: relative;
  color: #ffffff;
  width: 100%;
  font-size: 1.1vw;
  font-family: 'Roboto', sans-serif;
  line-height: 1.8vw;
  z-index: 101;
  text-align: justify;
  display:inline-block;

}

#recs6 {
  background-color: #133c60;
  color: #ffffff;
  width: 55%;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  position: relative;
  margin: auto;
}

#recs7 {
  background-color: #ffffff;
  width: 55%;
  text-align: justify;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  position: relative;
  margin: auto;
  z-index: 180;
  padding-top: 2vh;
  padding-bottom: 2vh;
  padding-right: 3vh;
  padding-left: 3vh;
  color: #000;
}

#recs8 {
  background-color: #133c60;
  width: 30%;
  top: 0;
  bottom: 0;
  left: 8vh;
  right: 0;
  text-align: justify;
  position: relative;
  z-index: 101;
  padding: 1.4em;
  color: #fff;
  font-size: 1.1vw;
  font-family: 'Roboto', sans-serif;
}

#conclusion {
  background-color: #0c273e;
  position: relative;
  color: #ffffff;
  width: 100%;
  font-size: 1.1vw;
  font-family: 'Roboto', sans-serif;
  line-height: 1.8vw;
  z-index: 101;
  text-align: justify;
  display: inline-block;
}

#conclusionbox {
  background-color: #0c273e;
  text-transform: none;
  text-shadow: 0 1px 0 black;
  color: #ffffff;
  width: 55%;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  position: relative;
  margin: auto;
  z-index:101;
}

h1 {
  font-size: 4.2vw;
  font-family: 'Roboto Slab', sans-serif;
}

h2 {
  font-size: 3.1vw;
  line-height: 3vw;
  font-family: 'Inter Bold', sans-serif;
}

h3 {
  font-size: 1.2vw;
  line-height: 1.4vw;
  font-family: 'Inter Bold', sans-serif;
  color: #d9785d;
}

p {
  font-size: calc(13px + (15 - 13) * ((100vw - 300px) / (1600 - 300)));
  line-height: calc(16px + (18 - 16) * ((100vw - 300px) / (1600 - 300)));
  font-family: 'Roboto', sans-serif;
}

img {
  max-width: 75%;
}

.flyto-button {
  background: #4ea1ea;
  border-radius: 3px;
  color: #ffffff;
  padding: 3px;
  margin-top:7px;
  font-size: 13px;
  width: 23%;
  border: 1px solid rgba(255, 255, 255, 0.9);
  font-family: 'Open Sans', sans-serif;
}

blockquote {
  background: #f9f9f9;
  border-left: 10px solid #ccc;
  margin: 1.5em 10px;
  padding: 0.5em 10px;
  quotes: "\201C""\201D""\2018""\2019";
}
blockquote:before {
  color: #ccc;
  content: open-quote;
  font-size: 4em;
  line-height: 0.1em;
  margin-right: 0.25em;
  vertical-align: -0.4em;
}
blockquote p {
  display: inline;
}