body {
  margin:0;
  padding:0;
  font-family: 'Montserrat', sans-serif !important;
  background-color: rgba(29, 55, 55, 1);
}
@media (max-width: 3000px) {
    .scrollingTextBox{
      width: auto;
      max-width: 50%;
      left:1rem;
    }
}

@media (max-width: 900px) {
    html {
        font-size: 14px;
    }
    #definitionInfoBox{
      opacity: 0;
    }
}
@media (max-width: 800px) {
    .scrollingTextBox{
      width: auto;
      max-width: 50%;
      left:1rem;
    }
}
@media (max-width: 700px) {
    html {
        font-size: 13px;
    }
}
@media (max-width: 500px) {
    html {
        font-size: 12px;
    }
    .scrollingTextBox{
      width: auto;
      max-width: 90%;
      left:5%;
    }
}

@media (max-width: 400px) {
    html {
        font-size: 10px;
    }
}
.titleText{
  color: rgb(255, 248, 97);
  font-size: 2rem;
  font-family: 'Martel', serif;
  font-weight: 500;
}
.subTitleText{
  color: rgb(195, 195, 195);
  font-size: 1rem;
  text-align: left;
}
.subTitleTextLink{
  /* color: rgb(195, 195, 195); */
  color: rgb(223, 223, 220);
  font-size: 1rem;
  text-align: left;
}
#fsPhotoBlock{
  pointer-events: none;
  position:fixed;
  top:0;
  bottom:0;
  width:100%;
  height: 100vh;
  z-index: 8;
  /* background-image: linear-gradient(rgba(29, 55, 55, 0.25),rgba(29, 55, 55, 0.25)),url("../img/wyomingElk.jpg"); */
  background-image: url("../img/wyomingElk.jpg");
  background-size: cover;
  /* background-color: rgba(29, 55, 55, 0.9); */
  /* opacity: 0.75; */
  background-position: left;
  -webkit-transition: all .25s ease-in-out;
  -moz-transition: all .25s ease-in-out;
  transition: all .25s ease-in-out;
  /* display: none; */
}
#hoverInfoBox{
  user-select: none; /* Standard */
  position: absolute;
  z-index: 1000;
  padding: 1rem;
  background-color: rgba(29, 55, 55, 1);
  display: none;
  border-radius: 10px;
  line-height: 0.75rem;
  max-width: 50%;
  max-height: 75vh;
}
.hoverTitle{
  font-size:1rem;
  color: white;
}
.hoverHead{
  font-size: 0.75rem;
  color: rgb(222, 222, 222);
}
.hoverBody{
  font-style: italic;
  font-size: 0.65rem;
  color: rgb(222, 222, 222);
}

#imageCaptionBlock{
  position: fixed;
  z-index: 100;
  bottom:0.5rem;
  right:0.5rem;
  text-align: right;
  color:rgb(235, 235, 235) !important;
  text-decoration: none !important;
  background-color: rgba(0, 0, 0, 0.4);
  font-size: 1rem;
  padding: 0.5rem;
  border-radius: 0.25rem;
}
#scrollDownIcon{
  position: absolute;
  z-index: 1000;
  color: rgb(221, 221, 221);
  font-size: 4rem;
  bottom: 1rem;
  margin: 0px auto;
  left: 50%;
  transform: translateX(-50%);
}
@keyframes breath {
  0%   { transform:scale(1); }
  50% { transform:scale(1.1); }
  100% { transform:scale(1); }
}

#roadlessVideoHolder{
  width: 100%;
  height: auto;
}
.centeredButton{
  left: 50%;
  transform: translateX(-50%);
  margin-bottom: 0.25rem;
  background-color: rgb(36, 35, 66) !important;
}
#map {
  pointer-events: none;
  position:fixed;
  top:0;
  bottom:0;
  width:100%;
  height: 100vh;
  z-index: 5;
  opacity: 0;
  /* text-align: center; */
}
[type="checkbox"]:checked+span:not(.lever):before{
  border-right:2px solid #4f3c63 !important;
  border-bottom:2px solid #4f3c63 !important;
}
#mapControls{
  background-color: rgba(29, 55, 55, 1);
  position: absolute;
  z-index: 100;
  top: 10rem;
  left:2rem;
  border-radius: 0.5rem;
  padding: 1rem;
  display: none;
}
#definitionInfoBox{
  background-color: rgba(29, 55, 55, 1);
  position: absolute;
  z-index: 100;
  top: 23rem;
  left:2rem;
  padding: 1rem;
  display: none;
  width:auto;
  border-radius: 0.5rem;
  max-width: 20rem;
  color: rgb(209, 209, 209);
}
.purpleButton{
  background-color: rgb(79, 60, 99);
}
.purpleButton:hover{
  background-color: rgb(167, 139, 196);
}
#takeActionButton{
  position: fixed;
  z-index: 300;
  background-color: rgb(180, 38, 38) !important;
  top:3.5rem;
  font-weight: bold;
  margin:1rem;
  width:20rem !important;
  left:1rem;
  font-size: 1.75rem;
  display: none;
  padding: 2rem;
  line-height: 0rem;
  border-radius: 0.5rem;
}
#hashHolder{
  opacity: 0;
}
#shareButtons{
  position: fixed;
  z-index: 300;
  bottom:2rem;
  left:0.75rem;
  display: none;
}
.shareButton{
  margin: 0.25rem;
}
#rmwLogo{
  position: fixed;
  z-index: 300;
  top:1rem;
  left:1rem;
  height: auto;
  font-family: 'Arial', sans-serif;
  font-style: bold;
  font-size: 2rem;
  color:white;
  display: none;
  cursor: pointer;
}

#mapLegend{
  user-select: none; /* Standard */
  pointer-events: none;
  position: absolute;
  z-index: 20;
  bottom:1rem;
  width: auto;
  max-width: 95%;
  /* left: 50%; */
  right:1rem;
  /* transform: translate(-50%, 0); */
  height:auto;
  z-index: 10;
}
.legendItemBox{
  /* display: inline; */
  /* text-align: center; */
  /* margin-right: 0.75rem;
  width: auto;
  height: auto; */
  display: none;
}

.legendItemLabel{
  pointer-events: none;
  position: relative;
  font-size: 1rem;
  /* font-weight: bold; */
  /* margin-right: 0.75rem; */
  margin-left: 2.5rem;
  height: 2rem;
  bottom: 1.5rem;
  color: rgb(255, 255, 255);
  text-shadow: 0 0 0.5em #000000, 0 0 0.5em #000000, 0 0 0.5em #000000;
}
.mapLegendBox{
  width: 2rem;
  height: 2rem;
}
.scrollingTextBoxIntro{
  margin-top: 2rem !important;
}
.boldText{
  font-weight: bold;
}
.underlineText{
  text-decoration: underline;
}
.scrollingTextBox{
  user-select: none; /* Standard */
  border-top: 1px solid rgb(106, 106, 106);
  border-bottom: 1px solid rgb(106, 106, 106);
  position:relative;
  margin-top:125vh;
  z-index: 500;
  background-color: #191919;
  padding: 1rem;
  height: auto;
  /* width: auto; */
  /* max-width: 40%; */
}

.leftTextBox{
  left:3rem;
}
.centerTextBox{
  margin-left: auto;
  margin-right: auto;
}
.wow{
  /* visibility: hidden !important; */
}
.scrollingTitle{
  font-size: 1.25rem;
  font-weight: bold;
  color:black;
}
.scrollingImage{
  max-width: 100%;
  height: auto;
  border: 1px solid rgb(56, 56, 56);
}
.scrollingImageCaption{
  font-size: 0.75rem;
  color:rgb(235, 235, 235);
  text-decoration: underline;
}
.scrollingBody{
  font-size: 1.25rem;
  color:rgb(204, 204, 204);
}
.dateBox{
  font-size: 1.5rem;
  color:rgb(105, 105, 105);
  font-family: 'Martel', serif;
}