@charset "UTF-8";
/* CSS Document */

* {margin:0;padding:0}
html, body {margin:0;padding:0;height:100%;width:100%;font-family: 'Caveat', sans-serif;position: relative;}
body {overflow-x:hidden;}
body.home {background:url(family.jpg) no-repeat;background-attachment:fixed;background-size: cover;}
h1 {position:absolute;font-size: 5vw;width:100%;top:4vh;text-align:center;line-height:1;margin:0;padding:0;color:#fff;text-shadow: 1px 1px 5px #444;}
h2 {position:absolute;font-size: 3vw;width:100%;bottom:4vh;text-align:center;line-height:1;margin:0;padding:0;color:#fff;text-shadow: 1px 1px 5px #444;}
h3 {position:relative;font-size: 22px;line-height:1;margin:0;padding:0 0 20px 0;color:#000;text-align:center;}
.modal {width:100vw;height:100vh;position: fixed;top:0;left:0;z-index: 2;display:none;}
.modal.showing {display:block;}
.photo-popup, .pw-popup {width:375px;height:auto;padding:30px;background:rgba(255,255,255,0.8);position:absolute;top:50%;left:50%;transform: translate(-50%, -50%);}
.photo-popup input, .pw-popup input {width:200px;font-size:18px;line-height: 30px;padding:10px;-moz-appearance: none;-webkit-appearance: none;appearance:none;border:none;display: block;margin:0 auto;}
.go-photo, .go-enter {position: relative;color:#FFF;background:#FF0000;width:150px;padding:10px 30px;font-size:18px;line-height: 1;border:2px solid #FF0000;margin:20px auto 10px auto;text-align: center;cursor:pointer;transition: all 0.5s;font-weight: bold;}
.go-photo:hover, .go-enter:hover {background: transparent;color:#FF0000;}
h3.cancel {text-align: center;color:rgb(150,150,150);cursor: pointer;}
h3.cancel:hover {text-decoration: underline;}@media only screen and (max-width:767px) {h1 {font-size:8vw;} h2 {font-size: 5vw;}}
.menu-contain {position: fixed;width:340px;height:100%;background: rgba(0,0,0,0.7);margin:0 auto;transition:all 0.5s;padding-top:90px;right:0;top:0;z-index: 10;box-sizing: border-box;transform: translateX(100%);overflow:scroll;}
.menu-contain.showing {transform:translateX(0);}
.menu-item {font-size: 34px;text-decoration: none;width:90%;display:block;color:#FFF;margin:0 auto;text-align: center;transition: all 0.5s;cursor:pointer;}
.menu-item:hover {color:#FF0000;}
.home .menu-item.gohome {display: none;}
.submenu {position: relative;display:none;}
.audio-player {position: relative;padding-top:20px;text-align: center;display:none;}
.audio-player audio {width:90%;margin:0 auto;}
.burger {position: fixed;top:2%;right:2%;cursor: pointer;z-index: 11;width:40px;height:40px;background: #FF0000;overflow:hidden;transition: all .5s ease;}
.home .burger.hiding {display:none;}
.home .burger {display: block;}
.burger.active {background:transparent;}
.burgerline {width:24px;height:4px;background:#FFF;position: absolute;left:8px; transition: all .5s ease;}
.burgerline.top {top:10px;}
.burgerline.mid {top:18px;opacity:1;}
.burgerline.btm {top:26px;}
.burgerline.top.active {-ms-transform: rotate(45deg) translate(0px,8px); -webkit-transform: rotate(45deg); transform: rotate(45deg);-ms-transform-origin: center center; -webkit-transform-origin: top left; transform-origin: top left;}
.burgerline.mid.active {opacity:0;}
.burgerline.btm.active {-ms-transform: rotate(-45deg) translate(0px,-8px); -webkit-transform: rotate(-45deg); transform: rotate(-45deg);-ms-transform-origin: center center; -webkit-transform-origin: bottom left; transform-origin: bottom left;}

@media only screen and (max-width:767px) {h1 {font-size:8vw;} h2 {font-size: 5vw;}}