*{
margin:0;padding:0;border:0;outline:0;font-weight:inherit;font-style:inherit;
}
html{
height:100%;
}
body{
height:100%;
color:#010101;
font-family:Alegreya,georgia,serif;
background-color:#ffffff;
background:url(images/bg.jpg);
background-size:cover;
background-position:center top;
background-repeat:no-repeat;
}
a{
color:#ff5000;
}
.hide{
display:none;
}
.bold{
font-weight:bold;
}
.i{
font-style:italic;
}
.ul{
text-decoration:underline;
}
.fl{
float:left;
}
.fr{
float:right;
}
.cl{
clear:both;
}
.cen{
text-align:center;
}
.f80{
font-size:80%;
}
.op70{
opacity:0.7;
}
a.anchor{
display:block;
position:relative;
top:-50px;
visibility:hidden;
}
h1{
font-size:26px;
font-weight:bold;
line-height:32px;
color:#ff5000;
margin-bottom:20px;
}
h2{
font-size:20px;
font-weight:bold;
line-height:26px;
color:#ff5000;
margin-bottom:20px;
}
p{
font-size:18px;
line-height:24px;
margin-bottom:20px;
}
nav{
position:fixed;
width:100%;
height:50px;
background:#ffffff;
z-index:10;
}
nav:after{
content:"";
background:linear-gradient(90deg, #f47421, #a650b4, #0050bb);
height:2px;
width:100%;
display:block;
clear:both;
margin-top:50px;
}
nav img{
position:absolute;
display:block;
width:50px;
height:50px;
}
.sig{
width:122px;
height:45px;
left:0;
right:0;
top:2px;
margin:auto;
}
.hamOpen{
right:12px;
cursor:pointer;
}
.hamClose{
display:none;
right:12px;
cursor:pointer;
}
.hamList{
display:none;
min-width:20%;
position:fixed;
top:50px;
right:0;
background:#ffffff;
border-left:2px solid #ff5000;
border-bottom:2px solid #ff5000;
list-style:none;
font-size:20px;
line-height:60px;
text-align:right;
padding:0 20px;
z-index:20;
}
.hamList li{
border-bottom:1px solid #ff5000;
}
.hamList li:last-child{
border-bottom:none;
}
.hamList a{
display:block;
color:#010101;
text-decoration:none;
}
.albOpen{
right:62px;
cursor:pointer;
}
.albClose{
display:none;
right:62px;
cursor:pointer;
}
.albList{
display:none;
min-width:20%;
max-height:90%;
position:fixed;
top:50px;
right:62px;
background:#ffffff;
border-left:2px solid #ff5000;
border-right:2px solid #ff5000;
border-bottom:2px solid #ff5000;
padding:0 20px;
z-index:20;
overflow:scroll;
}
.albList ul{
list-style:none;
font-size:16px;
line-height:40px;
text-align:right;
font-style:italic;
}
.albList li{
border-bottom:1px solid #ff5000;
}
.albList li:last-child{
border-bottom:none;
}
.albList a{
display:block;
color:#010101;
text-decoration:none;
}
header{
position:absolute;
top:52px;
z-index:-10;
overflow:hidden;
}
header img{
width:100%;
height:auto;
}
section#home, div#about, div#honor{
text-align:center;
width:70%;
max-width:840px;
margin:auto;
padding-top:calc(17vw + 52px);
overflow:auto;
}
section#albums{
text-align:center;
width:96%;
max-width:900px;
margin:auto;
margin-bottom:40px;
}
section#albums img{
width:200px;
height:200px;
padding:10px;
}
footer{
width:100%;
background:#404040;
text-align:center;
padding:60px 0 40px 0;
}
footer img{
width:70%;
max-width:270px;
height:auto;
}
footer h2{
font-size:26px;
font-weight:bold;
line-height:32px;
color:#ff5000;
margin-bottom:20px;
}
footer p{
color:#ffffff;
width:70%;
max-width:840px;
margin-left:auto;
margin-right:auto;
}
footer p.legal{
margin-top:40px;
padding-top:40px;
border-top:1px solid #ffffff;
color:#dddddd;
font-size:16px;
line-height:22px;
}
footer a{
color:#ffffff;
text-decoration:underline;
}
div.info{
text-align:center;
width:70%;
max-width:840px;
margin:auto;
padding-top:102px;
}
div.info img{
vertical-align:middle;
width:20px;
height:auto;
padding:0 8px;
}
div.info img.art{
width:250px;
height:250px;
margin-bottom:20px;
}
div.song{
width:70%;
margin:auto;
margin-bottom:20px;
}
div.source{
width:70%;
margin:auto;
font-size:14px;
padding-left:20px;
}
div.source sup{
display:inline-block;
width:17px;
text-align:right;
margin-left:-20px;
margin-right:3px;
}
hr#sources{
margin-top:-62px;
padding-top:62px;
}
table{
padding:0;
margin:0;
width:100%;
border-collapse:collapse;
text-align:left;
}
table h2, table p{
margin-bottom:0;
}
table th, table td{
padding:8px;
}
tr th:first-of-type{
border-left:1px solid #666666;
text-align:right;
background:#666666;
font-style:italic;
font-weight:bold;
width:20%;
}
tr th:first-of-type p{
color:#ffffff;
font-size:20px;
line-height:26px;
}
tr th:nth-child(2){
border-right:1px solid #ff5000;
background:#ff5000;
}
tr th:nth-child(2) h2{
color:#ffffff;
}
tr td:first-of-type{
border-bottom:1px solid #aaaaaa;
border-left:1px solid #aaaaaa;
background:#e2e2e2;
text-align:right;
font-style:italic;
}
tr td:nth-child(2){
border-bottom:1px solid #aaaaaa;
border-right:1px solid #aaaaaa;
background:#f6f6f6;
}
#vid{
width:100%;
height:40vw;
margin-bottom:20px;
}
div.news{
clear:both;
}
div.news h3{
font-size:18px;
line-height:24px;
font-weight:bold;
float:left;
text-align:right;
width:14%;
}
div.news p{
float:left;
text-align:left;
width:76%;
padding-left:20px;
margin-left:20px;
border-left:1px solid #aaaaaa;
}
#honor ul{
list-style:none;
font-size:18px;
line-height:24px;
font-weight:bold;
margin-bottom:40px;
}
#honor ul span.note{
font-weight:normal;
font-size:80%;
}
#honor h2{
padding-top:40px;
margin-top:40px;
border-top:1px solid #aaaaaa;
}
#honor ul.notes{
line-height:18px;
}
#honor ul.notes li{
margin-bottom:10px;
}






/* 600 break */
@media (max-width:600px) {
h1{
font-size:22px;
line-height:26px;
}
p{
font-size:16px;
line-height:22px;
}
.hamList{
min-width:30%;
}
header img{
width:120%;
margin-left:-10%;
}
section#home, div#about, div#honor{
width:80%;
padding-top:calc(22vw + 52px);
}
section#albums img{
width:156px;
height:156px;
padding:8px;
}
footer h2{
font-size:22px;
line-height:26px;
}
footer p{
width:80%;
}
div.info{
width:80%;
}
div.info img{
width:18px;
padding:0 5px;
}
div.info img.art{
width:220px;
height:220px;
}
div.song, div.source{
width:80%;
}
#vid{
height:45vw;
}
div.news h3{
font-size:16px;
line-height:22px;
width:20%;
}
div.news p{
width:60%;
}
#honor ul{
font-size:16px;
line-height:22px;
}
}




/* 400 break */
@media (max-width:400px) {
header img{
width:150%;
margin-left:-25%;
}
.sig{
height:40px;
width:auto;
left:32%;
right:initial;
top:5px;
}
.hamList{
min-width:40%;
}
section#home, div#about, div#honor{
padding-top:calc(28vw + 52px);
}
section#albums{
width:100%;
}
section#albums img{
width:140px;
height:140px;
padding:3px;
}
footer p{
width:90%;
}
div.info{
width:90%;
padding-top:82px;
}
div.info img{
width:14px;
padding:0 3px;
}
div.info img.art{
width:200px;
height:200px;
}
div.song, div.source{
width:90%;
}
#vid{
height:51vw;
}
}