/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}




/*big styles*/


html,
body {
  height: 100%;
  overflow-x:hidden;
}

body {
background-color:rgb(237,223,202,1);
}

/*normal styles*/
#hero{
	position: relative;
	margin-top:4vh;
	margin-left: 4.16667vw;
	padding-bottom: 2.3vw;
}
#hero h1{
font-size:7vw;
font-family:'DM Sans';
color:#116a60;
line-height:;
letter-spacing:;
font-weight:900;
}

#about{
	position:relative;
	width:100vw;
	overflow:visible;
}

#about h1{
	width:60vw;
	text-align: justify;
	margin-left: 4.5vw;
	font-size:2vw;
	font-family:'DM Sans';
	color:#2f4858;
	line-height:3vw;
	letter-spacing:;
	font-weight:400;
}

#crinoid{
	float:right;
	background-image: url(assets/crinoid.svg);
	position: absolute;
	background-size: fill;
	background-repeat:no-repeat;
	background-position:right;
	top: -5vw;
	bottom:-5vw;
	left: 10vw;
	right: -14vw;
	z-index:-1;
	overflow:visible;
}

#cicadaback{
	float:right;
	background-image: url(assets/cicada.svg);
	position: absolute;
	background-size: fill;
	background-repeat:no-repeat;
	background-position:right;
	top: -25vw;
	bottom:-3vw;
	left: 0;
	right: -30vw;
	z-index:-1;
}

#terrainback{
	float:right;
	background-image: url(assets/terrain.svg);
	position: absolute;
	background-size: fill;
	background-repeat:no-repeat;
	background-position:left bottom;
	top: 0;
	bottom:0;
	left: -50vw;
	right: 45vw;
	z-index:-1;
}

#fishback{
	float:right;
	background-image: url(assets/fish.svg);
	position: absolute;
	background-size: fill;
	background-repeat:no-repeat;
	background-position:bottom right;
	top:154vw;
	right:-20vw;
	height:40vw;
	width:100vw;
	z-index:-1;
}

#ammback{
	float:right;
	background-image: url(assets/ammonite.svg);
	position: absolute;
	background-size: fill;
	background-repeat:no-repeat;
	background-position:bottom right;
	top:25vw;
	right:5vw;
	height:40vw;
	width:100vw;
	z-index:-1;
}

#beetback{
	float:right;
	background-image: url(assets/beet.svg);
	position: absolute;
	background-size: fill;
	background-repeat:no-repeat;
	background-position:bottom right;
	top:75vw;
	right:10vw;
	height:50vw;
	width:100vw;
	z-index:-1;
}

#digitalspacer{
	background-image: url(../assets/spacer.svg);
	position: absolute;
	background-size: contain;
	background-repeat:no-repeat;
	background-position:top right;
	top:1vw;
	right:35vw;
	height:50vw;
	width:100vw;
	z-index:-1;
	float:right;
}

#physicalspacer{
	background-image: url(../assets/spacer.svg);
	position: absolute;
	background-size: contain;
	background-repeat:no-repeat;
	background-position:top right;
	top:1vw;
	right:39vw;
	height:50vw;
	width:100vw;
	z-index:-1;
	float:right;
}

#photographyspacer{
	background-image: url(../assets/spacer.svg);
	position: absolute;
	background-size: contain;
	background-repeat:no-repeat;
	background-position:top right;
	top:1vw;
	right:35vw;
	height:50vw;
	width:100vw;
	z-index:-1;
	float:right;
}

#about h2{
	text-align: justify;
	margin-left: 4.5vw;
	font-size:2vw;
	font-family:'DM Sans';
	color:#2f4858;
	line-height:3vw;
	font-weight:600;
	margin-bottom:4vw;
}

#thumbnailbox{
position:relative;
margin-left:4vw;
clear:both;
}

#thumbnailbox h1{
	text-align:right;
	margin-right:4vw;
	font-size:5vw;
	font-family:'DM Sans';
	color:#116a60;
	font-weight:700;
	padding-bottom: 3vw;
}

.thumbnail{
	transition:0.5s;
	position: relative;
	float: left;
	margin-right:4.16667vw;
	margin-bottom:4.16667vw;
	width:15vw;
	height:15vw;
	background-color: slategrey;
	outline-width:0.5vw;
	outline-style:solid;
	outline-color:#cac6aa;
}

.thumbnail:hover{
	outline-width:0.5vw;
	outline-style:solid;
	outline-color:#799879;

}

#description{
	transition:0.2s;
	opacity:0;
	pointer-events: none;
	position:fixed;
	z-index:2;
	left:17.5vw;
	top:10vh;
	width:65vw;
	height:80vh;
	background-color: rgba(237,223,202,1);
	outline-width:0.5vw;
	outline-style:solid;
	outline-color:#799879;
	overflow:hidden;
}
#descriptionback{
	opacity:0;
	position:fixed;
	pointer-events: none;
	z-index:2;
	left:17.5vw;
	top:10vh;
	width:65vw;
	height:80vh;
	background-color: rgba(237,223,202,1);
}
#xbutton{
	position:absolute;
	left:93.5%;
	font-size:5vw;
	font-family:'DM Sans';
	color:#702f00;
	font-weight:700;
}

#savebutton{
	position:absolute;
	width:5vw;
	height:5vw;
  right:1.6vw;
	top:6vw;
	font-weight:700;
	background-image: url(../assets/savebutton.svg);
	background-size: contain;
	background-repeat:no-repeat;
	background-position:top right;
	float:right;
	font-size:5vw;
	font-family:'DM Sans';
	text-align: right;
	color:rgba(0,0,0,0);
}

#click{
	display:inline-block;
	width:100%;
	height:100%;
	opacity:0;
}

#click:focus+#description{
	opacity:100%;
	pointer-events: all;
}

a {
  text-decoration: none;
  color: inherit;        
}

#description:active {
    opacity: 100%;
    pointer-events: all;
}

#descriptiontext{
	font-size:2vw;
	font-family:'DM Sans';
	color:#2f4858;
	margin-left:2vw;
	margin-top:1vw;
	line-height:2.2vw;
	font-weight:400;

}

#descriptiontitle{
	font-size:3vw;
	font-family:'DM Sans';
	margin-left:2vw;
	margin-top:3vw;
	color:#116a60;
	font-weight:600;
}

/*------------------------image setting-------------------------*/


#crowpitchthumb{
	background-image: url(assets/TheCrowAndThePitcher.png);
	background-size:cover;
}
#crowpitch{
	z-index:3;
	margin-right:50vw;
	position:relative;
	top:2vw;
	left:2vw;
	width:90%;
	height:70%;
	background-size:contain;
	background-repeat: no-repeat;
	background-image: url(assets/TheCrowAndThePitcher.png);
}

#bogbabethumb{
	background-image: url(assets/BogBabe.jpg);
	background-size:cover;
}
#bogbabe{
	z-index:3;
	margin-right:50vw;
	position:relative;
	top:2vw;
	left:2vw;
	width:90%;
	height:70%;
	background-size:contain;
	background-repeat: no-repeat;
	background-image: url(assets/BogBabe.jpg);
}
#flatwoodsthumb{
	background-image: url(assets/FlatwoodsMonster.jpg);
	background-size:cover;
}
#flatwoods{
	z-index:3;
	margin-right:50vw;
	position:relative;
	top:2vw;
	left:2vw;
	width:90%;
	height:70%;
	background-size:contain;
	background-repeat: no-repeat;
	background-image: url(assets/FlatwoodsMonster.jpg);
}

#fresnothumb{
	background-image: url(assets/FresnoNightcrawlers.jpg);
	background-size:cover;
}
#fresno{
	z-index:3;
	margin-right:50vw;
	position:relative;
	top:2vw;
	left:2vw;
	width:90%;
	height:70%;
	background-size:contain;
	background-repeat: no-repeat;
	background-image: url(assets/FresnoNightcrawlers.jpg);
}

#herringtonthumb{
	background-image: url(assets/LakeHerringtonMonster.jpg);
	background-size:cover;
}
#herrington{
	z-index:3;
	margin-right:50vw;
	position:relative;
	top:2vw;
	left:2vw;
	width:90%;
	height:70%;
	background-size:contain;
	background-repeat: no-repeat;
	background-image: url(assets/LakeHerringtonMonster.jpg);
}

#snallythumb{
	background-image: url(assets/Snallygaster.jpg);
	background-size:cover;
}
#snally{
	z-index:3;
	margin-right:50vw;
	position:relative;
	top:2vw;
	left:2vw;
	width:90%;
	height:70%;
	background-size:contain;
	background-repeat: no-repeat;
	background-image: url(assets/Snallygaster.jpg);
}

#writhethumb{
	background-image: url(assets/Writhe.jpg);
	background-size:cover;
}
#writhe{
	z-index:3;
	margin-right:50vw;
	position:relative;
	top:2vw;
	left:2vw;
	width:90%;
	height:70%;
	background-size:contain;
	background-repeat: no-repeat;
	background-image: url(assets/Writhe.jpg);
}

#vinegaroonthumb{
	background-image: url(assets/Vinegaroon.png);
	background-size:cover;
}
#vinegaroon{
	z-index:3;
	margin-right:50vw;
	position:relative;
	top:2vw;
	left:2vw;
	width:90%;
	height:70%;
	background-size:contain;
	background-repeat: no-repeat;
	background-image: url(assets/Vinegaroon.png);
}

#orbemthumb{
	background-image: url(assets/OrbemFamiliaris.png);
	background-size:cover;
}
#orbem{
	z-index:3;
	margin-right:50vw;
	position:relative;
	top:2vw;
	left:2vw;
	width:90%;
	height:70%;
	background-size:contain;
	background-repeat: no-repeat;
	background-image: url(assets/OrbemFamiliaris.png);
}

#reportthumb{
	background-image: url(assets/AnnualReportTitlePage.png);
	background-size:cover;
}
#report{
	z-index:3;
	margin-right:50vw;
	position:relative;
	top:2vw;
	left:2vw;
	width:90%;
	height:70%;
	background-size:contain;
	background-repeat: no-repeat;
	background-image: url(assets/AnnualReportTitlePage.png);
}

#beetlewrestlethumb{
	background-image: url(assets/BeetleWrestling.png);
	background-size:cover;
}
#beetlewrestle{
	z-index:3;
	margin-right:50vw;
	position:relative;
	top:2vw;
	left:2vw;
	width:90%;
	height:70%;
	background-size:contain;
	background-repeat: no-repeat;
	background-image: url(assets/BeetleWrestling.png);
}

#sizeandshapethumb{
	background-image: url(assets/OAPSASABUPromo.jpg);
	background-size:cover;
}
#sizeandshape{
	z-index:3;
	margin-right:50vw;
	position:relative;
	top:2vw;
	left:2vw;
	width:90%;
	height:70%;
	background-size:contain;
	background-repeat: no-repeat;
	background-image: url(assets/OAPSASABUPromo.jpg);
}

#cicadathumb{
	background-image: url(assets/CicadaDrawing.jpg);
	background-size:cover;
}
#cicada{
	z-index:3;
	margin-right:50vw;
	position:relative;
	top:2vw;
	left:2vw;
	width:90%;
	height:70%;
	background-size:contain;
	background-repeat: no-repeat;
	background-image: url(assets/CicadaDrawing.jpg);
}

#maternalthumb{
	background-image: url(assets/Maternal.jpg);
	background-size:cover;
}
#maternal{
	z-index:3;
	margin-right:50vw;
	position:relative;
	top:2vw;
	left:2vw;
	width:90%;
	height:70%;
	background-size:contain;
	background-repeat: no-repeat;
	background-image: url(assets/Maternal.jpg);
}

#cabinthumb{
	background-image: url(assets/Cabin.jpg);
	background-size:cover;
}
#cabin{
	z-index:3;
	margin-right:50vw;
	position:relative;
	top:2vw;
	left:2vw;
	width:90%;
	height:70%;
	background-size:contain;
	background-repeat: no-repeat;
	background-image: url(assets/Cabin.jpg);
}

#tattoothumb{
	background-image: url(assets/TattooBeast.jpg);
	background-size:cover;
}
#tattoo{
	z-index:3;
	margin-right:50vw;
	position:relative;
	top:2vw;
	left:2vw;
	width:90%;
	height:70%;
	background-size:contain;
	background-repeat: no-repeat;
	background-image: url(assets/TattooBeast.jpg);
}

#twistthumb{
	background-image: url(assets/Twist.jpg);
	background-size:cover;
}
#twist{
	z-index:3;
	margin-right:50vw;
	position:relative;
	top:2vw;
	left:2vw;
	width:90%;
	height:70%;
	background-size:contain;
	background-repeat: no-repeat;
	background-image: url(assets/Twist.jpg);
}

#releasethumb{
	background-image: url(assets/Release.jpg);
	background-size:cover;
}
#release{
	z-index:3;
	margin-right:50vw;
	position:relative;
	top:2vw;
	left:2vw;
	width:90%;
	height:70%;
	background-size:contain;
	background-repeat: no-repeat;
	background-image: url(assets/Release.jpg);
}

#toxicthumb{
	background-image: url(assets/ToxicPalette.jpg);
	background-size:cover;
}
#toxic{
	z-index:3;
	margin-right:50vw;
	position:relative;
	top:2vw;
	left:2vw;
	width:90%;
	height:70%;
	background-size:contain;
	background-repeat: no-repeat;
	background-image: url(assets/ToxicPalette.jpg);
}

#malletthumb{
	background-image: url(assets/MalletBeast.jpg);
	background-size:cover;
}
#mallet{
	z-index:3;
	margin-right:50vw;
	position:relative;
	top:2vw;
	left:2vw;
	width:90%;
	height:70%;
	background-size:contain;
	background-repeat: no-repeat;
	background-image: url(assets/MalletBeast.jpg);
}

#sunthumb{
	background-image: url(assets/SunVessel.jpg);
	background-size:cover;
}
#sun{
	z-index:3;
	margin-right:50vw;
	position:relative;
	top:2vw;
	left:2vw;
	width:90%;
	height:70%;
	background-size:contain;
	background-repeat: no-repeat;
	background-image: url(assets/SunVessel.jpg);
}

#nestthumb{
	background-image: url(assets/Nest.jpg);
	background-size:cover;
}
#nest{
	z-index:3;
	margin-right:50vw;
	position:relative;
	top:2vw;
	left:2vw;
	width:90%;
	height:70%;
	background-size:contain;
	background-repeat: no-repeat;
	background-image: url(assets/Nest.jpg);
}

#reliquarythumb{
	background-image: url(assets/Reliquary.jpg);
	background-size:cover;
}
#reliquary{
	z-index:3;
	margin-right:50vw;
	position:relative;
	top:2vw;
	left:2vw;
	width:90%;
	height:70%;
	background-size:contain;
	background-repeat: no-repeat;
	background-image: url(assets/Reliquary.jpg);
}

#itchthumb{
	background-image: url(assets/itchthumb.jpg);
	background-size:cover;
}
#itch{
	z-index:3;
	margin-right:50vw;
	position:relative;
	top:2vw;
	left:2vw;
	width:90%;
	height:70%;
	background-size:contain;
	background-repeat: no-repeat;
	background-image: url(assets/Itch.gif);
}

#ecdysisthumb{
	background-image: url(assets/Ecdysis.jpg);
	background-size:cover;
}
#ecdysis{
	z-index:3;
	margin-right:50vw;
	position:relative;
	top:2vw;
	left:2vw;
	width:90%;
	height:70%;
	background-size:contain;
	background-repeat: no-repeat;
	background-image: url(assets/Ecdysis.jpg);
}

#pestlethumb{
	background-image: url(assets/CrustaceanAndPestles.jpg);
	background-size:cover;
}
#pestle{
	z-index:3;
	margin-right:50vw;
	position:relative;
	top:2vw;
	left:2vw;
	width:90%;
	height:70%;
	background-size:contain;
	background-repeat: no-repeat;
	background-image: url(assets/CrustaceanAndPestles.jpg);
}

#nightfrogthumb{
	background-image: url(assets/BullfrogAtNight.jpg);
	background-size:cover;
}
#nightfrog{
	z-index:3;
	margin-right:50vw;
	position:relative;
	top:2vw;
	left:2vw;
	width:90%;
	height:83%;
	background-size:contain;
	background-repeat: no-repeat;
	background-image: url(assets/BullfrogAtNight.jpg);
}

#cruiserthumb{
	background-image: url(assets/SwiftRiverCruiser.png);
	background-size:cover;
}
#cruiser{
	z-index:3;
	margin-right:50vw;
	position:relative;
	top:2vw;
	left:2vw;
	width:90%;
	height:83%;
	background-size:contain;
	background-repeat: no-repeat;
	background-image: url(assets/SwiftRiverCruiser.png);
}

#tailedbluethumb{
	background-image: url(assets/EasternTailedBlue.jpg);
	background-size:cover;
}
#tailedblue{
	z-index:3;
	margin-right:50vw;
	position:relative;
	top:2vw;
	left:2vw;
	width:90%;
	height:83%;
	background-size:contain;
	background-repeat: no-repeat;
	background-image: url(assets/EasternTailedBlue.jpg);
}

#bluedasherthumb{
	background-image: url(assets/BlueDasher.png);
	background-size:cover;
}
#bluedasher{
	z-index:3;
	margin-right:50vw;
	position:relative;
	top:2vw;
	left:2vw;
	width:90%;
	height:83%;
	background-size:contain;
	background-repeat: no-repeat;
	background-image: url(assets/BlueDasher.png);
}

#copesthumb{
	background-image: url(assets/CopesGrey.png);
	background-size:cover;
}
#copes{
	z-index:3;
	margin-right:50vw;
	position:relative;
	top:2vw;
	left:2vw;
	width:90%;
	height:83%;
	background-size:contain;
	background-repeat: no-repeat;
	background-image: url(assets/CopesGrey.png);
}

#commonwhitethumb{
	background-image: url(assets/CommonWhiteTail.png);
	background-size:cover;
}
#commonwhite{
	z-index:3;
	margin-right:50vw;
	position:relative;
	top:2vw;
	left:2vw;
	width:90%;
	height:83%;
	background-size:contain;
	background-repeat: no-repeat;
	background-image: url(assets/CommonWhiteTail.png);
}

#hiddenbullthumb{
	background-image: url(assets/HiddenBullfrog.png);
	background-size:cover;
}
#hiddenbull{
	z-index:3;
	margin-right:50vw;
	position:relative;
	top:2vw;
	left:2vw;
	width:90%;
	height:83%;
	background-size:contain;
	background-repeat: no-repeat;
	background-image: url(assets/HiddenBullfrog.png);
}

#slatythumb{
	background-image: url(assets/SlatySkimmer.png);
	background-size:cover;
}
#slaty{
	z-index:3;
	margin-right:50vw;
	position:relative;
	top:2vw;
	left:2vw;
	width:90%;
	height:83%;
	background-size:contain;
	background-repeat: no-repeat;
	background-image: url(assets/SlatySkimmer.png);
}

#skipperthumb{
	background-image: url(assets/Skipper.png);
	background-size:cover;
}
#skipper{
	z-index:3;
	margin-right:50vw;
	position:relative;
	top:2vw;
	left:2vw;
	width:90%;
	height:83%;
	background-size:contain;
	background-repeat: no-repeat;
	background-image: url(assets/Skipper.png);
}

#spangledthumb{
	background-image: url(assets/SpangledSkimmer.png);
	background-size:cover;
}
#spangled{
	z-index:3;
	margin-right:50vw;
	position:relative;
	top:2vw;
	left:2vw;
	width:90%;
	height:83%;
	background-size:contain;
	background-repeat: no-repeat;
	background-image: url(assets/SpangledSkimmer.png);
}

#clearwingthumb{
	background-image: url(assets/SnowberryClearwing.png);
	background-size:cover;
}
#clearwing{
	z-index:3;
	margin-right:50vw;
	position:relative;
	top:2vw;
	left:2vw;
	width:90%;
	height:83%;
	background-size:contain;
	background-repeat: no-repeat;
	background-image: url(assets/SnowberryClearwing.png);
}

#twelvethumb{
	background-image: url(assets/TwelveSpottedSkimmer.png);
	background-size:cover;
}
#twelve{
	z-index:3;
	margin-right:50vw;
	position:relative;
	top:2vw;
	left:2vw;
	width:90%;
	height:83%;
	background-size:contain;
	background-repeat: no-repeat;
	background-image: url(assets/TwelveSpottedSkimmer.png);
}

#jumpingspiderthumb{
	background-image: url(assets/JumpingSpider.png);
	background-size:cover;
}
#jumpingspider{
	z-index:3;
	margin-right:50vw;
	position:relative;
	top:2vw;
	left:2vw;
	width:90%;
	height:83%;
	background-size:contain;
	background-repeat: no-repeat;
	background-image: url(assets/JumpingSpider.png);
}