@charset "utf-8";
/* body {
	padding: 0;
	margin: 0;
	position: absolute;
} */

@keyframes fadeIn {
  0% { opacity: 0; pointer-events: none; }
	15% { opacity: 0; }
	100% { opacity: 1; pointer-events: auto;}
}

@-moz-keyframes fadeIn {
  0% { opacity: 0; pointer-events: none; }
	15% { opacity: 0; }
	100% { opacity: 1; pointer-events: auto;}
}

@-webkit-keyframes fadeIn {
  0% { opacity: 0; pointer-events: none; }
	15% { opacity: 0; }
	100% { opacity: 1; pointer-events: auto;}
}

@-o-keyframes fadeIn {
  0% { opacity: 0; pointer-events: none; }
	15% { opacity: 0; }
	100% { opacity: 1; pointer-events: auto;}
}

@-ms-keyframes fadeIn {
  0% { opacity: 0; pointer-events: none; }
	15% { opacity: 0; }
	100% { opacity: 1; pointer-events: auto;}
}

@keyframes fadeIn2 {
  0% { opacity: 0; }
	15% { opacity: 0; }
	100% { opacity: .5; }
}

@-moz-keyframes fadeIn2 {
  0% { opacity: 0; }
	15% { opacity: 0; }
	100% { opacity: .5; }
}

@-webkit-keyframes fadeIn2 {
  0% { opacity: 0; }
	15% { opacity: 0; }
	100% { opacity: .5; }
}

@-o-keyframes fadeIn2 {
  0% { opacity: 0; }
	15% { opacity: 0; }
	100% { opacity: .5; }
}

@-ms-keyframes fadeIn2 {
  0% { opacity: 0; }
	15% { opacity: 0; }
	100% { opacity: .5; }
}

@keyframes blueIn {
  0% { border: 0.5em solid #0000ff00; pointer-events: none; }
	35% { border: 0.5em solid #0000ff00; }
	100% { border: 0.5em solid #0000ffaa; pointer-events: auto;}
}

@-moz-keyframes blueIn {
  0% { border: 0.5em solid #0000ff00; pointer-events: none; }
	35% { border: 0.5em solid #0000ff00; }
	100% { border: 0.5em solid #0000ffaa; pointer-events: auto;}
}

@-webkit-keyframes blueIn {
  0% { border: 0.5em solid #0000ff00; pointer-events: none; }
	35% { border: 0.5em solid #0000ff00; }
	100% { border: 0.5em solid #0000ffaa; pointer-events: auto;}
}

@-o-keyframes blueIn {
  0% { border: 0.5em solid #0000ff00; pointer-events: none; }
	35% { border: 0.5em solid #0000ff00; }
	100% { border: 0.5em solid #0000ffaa; pointer-events: auto;}
}

@-ms-keyframes blueIn {
  0% { border: 0.5em solid #0000ff00; pointer-events: none; }
	35% { border: 0.5em solid #0000ff00; }
	100% { border: 0.5em solid #0000ffaa; pointer-events: auto;}
}

.sightings {
	position: fixed;
    width:50%;
    height: 10%;
	left: 25%;
	
	font-family: 'Shrikhand', cursive;
	font-size: 1em;
	color: black;
	background-color: rgba(255, 255, 255, 0.7);
	z-index: 2;
}

#top-sighting {top: 20%;}
#bottom-sighting {top: calc(90% - 15vw);}
#sighting3 {
	top:75%;
	width:40%;
	left:12%;
	height:10%
		
}
#sighting4 {
	top:45%;
	width:16%;
	left:52%;
	height:10%;
	background-color: rgba(255, 255, 255, 0);
}
#sighting5 {
	top:85%;
	width:40%;
	left:12%;
	height:10%;
}
#sighting6 {
	top:75%;
	width:25%;
	left:50%;
	height:10%;
}

#sighting7 {
	top:62%;
	width:48%;
	left:47%;
	height: 4%;
}
#sighting8 {
	top:42%;
	width:32%;
	left:7%;
	height:32%;
	font-size: 1em;
}

.site {
	opacity: 50%;
	z-index: -1;
  animation: fadeIn2 18s;
  -webkit-animation: fadeIn2 18s;
  -moz-animation: fadeIn2 18s;
  -o-animation: fadeIn2 18s;
  -ms-animation: fadeIn2 18s;
}
#site-1 {
	position: fixed;
	width: 80%;
	height: 80%;
	left: 10%;
	top: 10%
}

#site-2 {
	position: fixed;
	width: 40%;
	height: 50%;
	left: 2%;
	top: 30%
}

#big-pic {
	position: fixed;
	height: auto;
	left: 20%;
	top: 10%;
	max-width: 60%;
	max-height: 80%
  animation: blueIn 27s;
  -webkit-animation: blueIn 27s;
  -moz-animation: blueIn 27s;
  -o-animation: blueIn 27s;
  -ms-animation: blueIn 27s;
}

#med-pic-1 {
	position: fixed;
	height: auto%;
	left: 40%;
	top: 10%;
	max-width: 40%;
	max-height: 60%
  animation: fadeIn 18s;
  -webkit-animation: fadeIn 18s;
  -moz-animation: fadeIn 18s;
  -o-animation: fadeIn 18s;
  -ms-animation: fadeIn 18s;
}
#med-pic-2 {
	position: fixed;
	height: auto%;
	left: 24%;
	top: 20%;
	max-width: 52%;
	max-height: 70%
  animation: blueIn 27s;
  -webkit-animation: blueIn 27s;
  -moz-animation: blueIn 27s;
  -o-animation: blueIn 27s;
  -ms-animation: blueIn 27s;
}

.story {
	position: fixed;
    width:50%;
    height: 30%;
	top: 30%;
	left: 23%;

	background-color: rgba(255, 255, 255, 0.7);
	padding-left: 2%;
	padding-right: 2%;
	
	font-family: 'Anonymous Pro';
	font-size: 1em;
	line-height: 130%;
	color: black;
	z-index: 1;
}

#story-p8 {
	top: 10%;
	left: 45%;
}

#story-p80 {
	top: 10%;
	left: 45%;
	background-color: rgba(255, 255, 255, 0);
}

#story-p81 {
	top: 30%;
	left: 14%;
	background-color: rgba(255, 255, 255, 0);
}

#story-p82 {
	top: 65%;
	left: 60%;
	background-color: rgba(255, 255, 255, 0);
}
#story-p9 {
	top: 12%;
	left: 5%;
	background-color: rgba(255, 255, 255, 0);
}
#p10-story {
	background-color: rgba(255, 255, 255, 0);
}
#p10-story2 {
	top: 65%;
	left: 40%;
	width: 40%;

	font-family: 'Shrikhand', cursive;
	font-size: 3em;
	overflow: hidden;
}

#big-pic {
	position: fixed;
	width: 60%;
  animation: fadeIn 18s, blueIn 27s;
  -webkit-animation: fadeIn 18s, blueIn 27s;
  -moz-animation: fadeIn 18s, blueIn 27s;
  -o-animation: fadeIn 18s, blueIn 27s;
  -ms-animation: fadeIn 18s, blueIn 27s;
}

.collage-image {
	position: fixed;
	width: 20%;
	left: 60%;
	top: 10%;
}

#img1 {
  animation: blueIn 27s;
  -webkit-animation: blueIn 27s;
  -moz-animation: blueIn 27s;
  -o-animation: blueIn 27s;
  -ms-animation: blueIn 27s;
}

#img2 {
	left: 20%;
  animation: blueIn 27s;
  -webkit-animation: blueIn 27s;
  -moz-animation: blueIn 27s;
  -o-animation: blueIn 27s;
  -ms-animation: blueIn 27s;
}

#flower {
	left: 5%;
	top: 40%;
  animation: fadeIn 18s;
  -webkit-animation: fadeIn 18s;
  -moz-animation: fadeIn 18s;
  -o-animation: fadeIn 18s;
  -ms-animation: fadeIn 18s;
}

#flower2 {
	left: 77%;
	top: 13%;
	height: 70%;
	width: auto;
  animation: fadeIn 18s;
  -webkit-animation: fadeIn 18s;
  -moz-animation: fadeIn 18s;
  -o-animation: fadeIn 18s;
  -ms-animation: fadeIn 18s;
}

p {
	background-color: yellow;
}

#p10-body {
  animation: fadeIn 18s;
  -webkit-animation: fadeIn 18s;
  -moz-animation: fadeIn 18s;
  -o-animation: fadeIn 18s;
  -ms-animation: fadeIn 18s;
}