*{
margin:0;
padding:0;
border:0;
outline:0;
font-weight:inherit;
font-style:inherit;
}
html{
height:100%;
}
body{
background-color:#dddddd;
font-family:'Nunito',sans-serif;
color:#404142;
text-align:center;
height:100%;
}
.bold{
font-weight:600;
}
.italic{
font-style:italic;
}
.green{
color:green;
}
.red{
color:red;
}
.mobShow{
display:none;
}
h1{
clear:both;
font-family:'Nixie One',serif;
font-size:40px;
line-height:42px;
padding:19px 20px;
background-color:#333333;
color:#ffffff;
}
h2{
font-size:22px;
line-height:26px;
margin-bottom:10px;
font-weight:300;
}
a{
color:#118888;
}
p{
font-size:14px;
line-height:16px;
margin-bottom:10px;
}
section{
position:relative;
padding:40px 20px;
display:inline-block;
width:calc(50% - 40px);
margin:auto;
border-top:1px dotted #aaaaaa;
vertical-align:top;
}
#nav{
position:fixed;
text-align:right;
right:0;
height:80px;
z-index:100;
}
.navList{
display:none;
position:absolute;
list-style:none;
text-align:right;
top:0;
right:0;
width:200px;
background:#97c942;
padding-top:80px;
}
.navList a{
display:block;
margin-right:20px;
height:40px;
line-height:40px;
color:#ffffff;
text-decoration:none;
font-size:16px;
}
.navList li:last-of-type a{
border-top:1px solid #ffffff;
margin-top:10px;
margin-left:20px;
padding-top:10px;
padding-bottom:20px;
}
.navList a:hover{
color:#404142;
}
.open, .close{
position:absolute;
top:23px;
right:22px;
width:40px;
height:33px;
cursor:pointer;
z-index:100;
}
.close{
display:none;
}
.h1lt{
font-size:20px;
font-weight:normal;
color:#aaaaaa;
}
.portrait{
width:160px;
height:160px;
margin-bottom:10px;
border:5px solid #ffffff;
}
.died{
display:inline-block;
}
.grave{
width:18px;
height:28px;
margin-left:10px;
}
.flag{
display:block;
margin:auto;
width:100px;
height:auto;
margin-bottom:10px;
}
.child{
display:inline-block;
text-align:right;
line-height:14px;
padding-right:10px;
border-right:1px solid #aaaaaa;
margin-right:10px;
vertical-align:middle;
}
.childList{
display:inline-block;
text-align:left;
vertical-align:middle;
}
.parents{
display:inline-block;
text-align:right;
line-height:28px;
padding-right:10px;
border-right:1px solid #aaaaaa;
margin-right:10px;
vertical-align:middle;
}
.parentsList{
display:inline-block;
text-align:left;
vertical-align:middle;
}
.thumbs{
margin:auto;
margin-top:6px;
width:50%;
}
.thumbs img{
display:inline;
vertical-align:bottom;
width:40px;
height:40px;
margin:2px;
cursor:pointer;
border:2px solid #ffffff;
}
.thumbs img:hover{
border:2px solid #97c942;
transform:translateY(-2px);
}
#loading{
position:fixed;
left:0;
right:0;
top:50%;
margin:auto;
margin-top:-80px;
border:10px solid rgba(130,130,130,0.6);
border-top:10px solid #97c942;
border-radius:50%;
width:60px;
height:60px;
animation:loading 2s linear infinite;
z-index:100;
}
@keyframes loading{
0%{transform:rotate(0deg);}
100%{transform:rotate(360deg);}
}
#modalBG{
position:fixed;
z-index:200;
top:0px;
left:0px;
height:100%;
width:100%;
background:rgba(1, 1, 1, 0.7);
display:none;
}
#closeModal{
position:absolute;
height:100%;
width:100%;
}
#gallery{
position:absolute;
top:0;
width:100%;
height:100%;
z-index:300;
pointer-events:none;
}
.mainImage{
position:absolute;
bottom:25vh;
left:50%;
transform:translateX(-50%);
max-height:75vh;
width:auto;
max-width:100vw;
}
.toggleFaces{
position:absolute;
bottom:calc(25vh - 19px);
right:calc(50% + 50px);
height:34px;
width:34px;
background:#aaaaaa;
border:2px solid #333333;
border-radius:19px;
cursor:pointer;
pointer-events:auto;
z-index:400;
}
.toggleFaces:hover{
background:#97c942;
}
.toggleFaces img{
position:absolute;
top:50%;
left:50%;
transform:translate(-50%, -50%);
height:20px;
width:auto;
}
.toggleFacesGrey{
background:#555555;
cursor:default;
}
.toggleFacesGrey:hover{
background:#555555;
}
.toggleFacesGrey img{
opacity:0.4;
}
.linkToImage{
position:absolute;
bottom:calc(25vh - 19px);
left:50%;
transform:translateX(-50%);
padding:7px;
background:#aaaaaa;
border:2px solid #333333;
border-radius:19px;
pointer-events:auto;
z-index:400;
}
.linkToImage:hover{
background:#97c942;
}
.linkToImage img{
display:block;
height:20px;
width:auto;
}
.closeImage{
position:absolute;
bottom:calc(25vh - 19px);
left:calc(50% + 50px);
height:34px;
width:34px;
background:#aaaaaa;
border:2px solid #333333;
border-radius:19px;
cursor:pointer;
pointer-events:auto;
z-index:400;
}
.closeImage:hover{
background:#97c942;
}
.closeImage img{
position:absolute;
top:50%;
left:50%;
transform:translate(-50%, -50%);
height:20px;
width:auto;
}
.desc{
position:absolute;
bottom:0;
width:calc(100% - 20px);
height:calc(25vh - 36px);
padding:26px 10px 10px 10px;
margin-bottom:0;
color:#ffffff;
background:#333333;
word-break:break-word;
overflow:scroll;
}
.subjects{
position:absolute;
bottom:25vh;
left:50%;
transform:translateX(-50%);
width:100%;
height:100%;
display:none;
pointer-events:none;
}
.subjects .subject{
position:absolute;
border:2px solid #97c942;
opacity:0;
}
.subjects .subject:hover{
opacity:1!important;
z-index:100;
}
.subjects .subject:hover p{
color:#333333;
background-color:rgba(152,200,76,1);
}
.subjects .subject a{
display:block;
width:100%;
height:100%;
text-decoration:none;
pointer-events:auto;
}
.subjects p.name{
position:absolute;
top:0;
left:0;
color:#ffffff;
background-color:rgba(152,200,76,0.8);
margin:0;
padding:6px;
word-break:normal;
}
.mar{
position:absolute;
width:31%;
top:151px;
left:-35%;
margin-left:17.25%;
padding:2%;
background:#cccccc;
transform:translateY(-50%);
}

/* events page */
.events h1{
margin-bottom:20px;
}
.events a{
position:fixed;
display:block;
top:22px;
right:22px;
padding:8px 20px;
color:#ffffff;
background-color:#97c942;
text-decoration:none;
font-weight:bold;
z-index:100;
}
.events a:hover{
color:#404142;
}
.events p:last-of-type{
padding-bottom:40px;
}
.eventLeft{
float:left;
text-align:right;
width:40%;
margin-right:10px;
clear:both;
}
.eventRight{
float:left;
width:50%;
text-align:left;
}

/* login form */
.loginform{
position:relative;
text-align:center;
width:100%;
height:100%;
background:#333333 url(images/login_bg.png);
background-size:contain;
background-repeat:no-repeat;
background-position:center;
}
.loginform div{
position:absolute;
left:0;
right:0;
top:50%;
transform:translateY(-50%);
}
.loginform input[type='text'], .loginform input[type='password']{
display:block;
box-sizing:border-box;
width:200px;
margin:auto;
margin-bottom:10px;
padding:0 14px;
text-align:center;
font-size:16px;
line-height:42px;
background:#ffffff;
border:1px solid #404142;
-webkit-appearance:none;
-webkit-border-radius:4px;
border-radius:4px;
}
.loginform input::placeholder{
color:#aaaaaa;
}
.loginform input[type='submit']{
box-sizing:border-box;
width:200px;
font-size:20px;
line-height:44px;
font-weight:600;
color:#404142;
background:#97c942;
border:1px solid #404142;
-webkit-appearance:none;
-webkit-border-radius:4px;
border-radius:4px;
cursor:pointer;
}

@media screen and (max-width: 700px) {
.thumbs{
width:80%;
}
section{
display:block;
width:calc(100% - 40px);
padding:80px 20px;
}
.mar{
width:80%;
top:0;
left:0;
right:0;
margin:auto;
padding:6px;
background:#dddddd;
border-left:1px dotted #aaaaaa;
border-right:1px dotted #aaaaaa;
transform:translateY(-50%);
}
.events .mobhide{
display:none;
}
.events .mobShow{
display:initial;
}
.eventLeft, .eventRight{
float:none;
text-align:left;
width:80%;
margin:auto;
}
.eventRight{
margin-bottom:20px;
padding-left:20px;
}
}

@media screen and (max-width: 470px) {
.mobHide{
display:none;
}
.mobShow{
display:initial;
}
}