@charset "UTF-8";

html{
	font-size: 62.5%;
	letter-spacing: 1px;
}
body{
	width: 100%;
	margin: 0;
	background-color: #fff;
	color: #151515;
	font-size: 1.4rem;
	text-align:center;
	font-family: serif, Meiryo, san-serif;
}
*, *:before, *:after{
	box-sizing: border-box;
}
a{
	text-decoration: none;
	color: #151515;
}
a:hover{
	transition: 0.3s;
}
ul{
	padding-left: 0;
}
li{
	list-style-type: none;
}

.intro{
	font-size: 12px;
	text-align: center;
	margin-top: 160px;
	margin-bottom: 160px;
}
.big-photo img{ 
	width: 90%;
}
.sub-photos img{
	width: 50%;
	padding: 5px;
	float: left;
}
.sub-photos{
	margin-right: 5%;
	margin-left: 5%;
}
.sub-photos-wrappers:after{
	display: block;
	clear: both;
	content: "";
}
#header{
	padding: 550px 30px 0px;
	background-image: url(https://78.media.tumblr.com/b49c65f14408bd0a7533e1864ed65663/tumblr_parv24ktb51utr84eo1_1280.jpg);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;

}
#header:after{
	clear: both;
	display: block;
	content: "";
}
.site-title{
	font-weight: 50;
    font-style: normal;
	padding-left: 18px;
	font-size: 30px;
	text-align: left;
	float: left;
	width: 35%;
}
.site-title a {
	color: #fff
}
#menubtn{
	display:none;
}
nav{
	float: right;
	width: 65%;
	padding-top: 12px;
	padding-bottom: 0px;
}
nav li{
	float: right;
	width: 20%;
	font-size: 12px;
}
nav li a{
	display: inline-block;
	color: #C0C078
}
nav li a:hover{
	color: #fff;

}
.contact-wrapper{
	margin: auto;
	text-align: center;
}
.contact{
	padding: 80px 0;
	font-size: 12px;
}
.contact a:hover{
	color: rgba(210,180,140,0.9)
}
i{
	letter-spacing: 3px;
	padding-top: 10px;
}


.footer{
	padding: 12px 0;
	font-size: 13px;
}

@media(min-width: 768px){

}

@media(max-width: 767px){

nav{
	padding-top: 5px;
	float: none;
}
nav li{
	float: none;
}
#menu{
    margin: 0;
    display: none;
 }
.site-title{
	float: none;
	margin-top:12px;
	font-size: 20px;
	padding-left: 5px;
}
#header{
	padding-top: 200px;
	padding-left: 0;

}
.intro{
	margin:80px 20px;
}
.sub-photos img{
	float: none;
	width: 90%;
}
#menu ul{
    margin: 0;
  }
#menu li a{
    text-decoration: none;
    padding: 12px;
  }
#menu li a:hover{
          border-radius: 5px;
}
#menubtn{
	display: block;
    padding: 5px;
    border: none;
    border-radius: 5px;
    opacity: 0.5;
    background-color: initial;
   	position: absolute;
    top:12px;right:15px;
    cursor: pointer;
}
#menubtn:hover{opacity: 0.8;
				transition: 0.3s;
}
#menubtn:focus{outline: none;
}
#menubtn i{color: darkgray;
			font-size: 18px;
}
}
@media(max-width: 599px) {
	
}
@media(max-width: 359px){
	
}