html{
height:100%;
width:100%;
}

body{
position: relative;

padding:0px;
margin:0px;
height:100%;
width:100%;
font-size: 20px;
    overflow-x: hidden;
    font-family: 'Microsoft Yahei';
}

.small {
  font-size: 1rem; /* 75% of the baseline */
}

.large {
  font-size: 1.5rem; /* 125% of the baseline */
}
.superlarge{
font-size: 2.5rem; /* 125% of the baseline */

}

#wrapper{
min-height:100%;
margin-left:auto;
margin-right:auto;
width:100%;
position:relative;
}
#head{
width:100%;
text-align:center;
line-height:100px;
    height:100vw;
position:fixed;
    top:0px;
    left:0px;
z-index:-1;
    
    overflow: hidden;
    
}
#content{
width:100%;
    
padding-bottom:100px;
    margin-top: 100vw;
    
    background-color: transparent;
}
#footer{
width:100%;
background:rgba(255,255,255,1);
height:100px;
position:fixed;

	bottom:0;
	left:0;
	  z-index:98;
}
#albumpic{
position:absolute;
top:0px;
left:0px;
height:100px;
width:100px;
background-image:url(../resource/1.jpg);
background-size:cover;
z-index:100;
}
#wordup{
position:absolute;
top:20px;
left:110px;
height:30px;
line-height:30px;
z-index:101;
color:White;
}
#worddown{
position:absolute;
top:50px;
left:110px;
height:30px;
line-height:30px;
z-index:101;
color:White;
opacity:0.6;
}
#timeline{
position:absolute;
top:-4px;
left:0px;
width: 100%;    
height: 4px;
background-color: rgba(255,255,255,0.7);  z-index:101;  
}
#playhead{
position:absolute;
top:-4px;
left:0px;
width: 0%;    
height: 4px;
background-color: crimson; 
    z-index:102; 
}
#pButton{
position: absolute;
    top:20px;
right: 30px;    
z-index: 102;
color:White;
opacity:0.8;
}

#background{
width:100%;
height:120px;
    padding-top: -10px;
    padding-bottom: -10px;
    overflow: hidden;
position:absolute;
top:0px;
left:0px;
opacity:0.8;

background-image:url(../resource/1.jpg);
	background-size:100% auto;
	background-position:center center;
	 -webkit-filter: blur(10px);
  -moz-filter: blur(10px);
  -o-filter: blur(10px);
  overflow:hidden;
  z-index:99;
}
.transtitle{
    margin-top: -50px;
width:100%;
    padding-left: 3%;
position:relative;
 line-height: 2.5rem;
    background-color: transparent;
 font-family: 'Oswald', sans-serif;
    box-sizing: border-box;
    color:white;
    z-index: 20;
    text-shadow: 3px -2px 6px rgba(0, 0, 0, 0.52);
}
.imageblock{
width:100%;
position:relative;
padding:0px;
margin-top:-1px;
margin-bottom: -1px;
}
.imageblock img{
    display: block;
}
.imageinfo{
position:absolute;
right:1rem;
top:1rem;
height:3rem;
line-height:3rem;
font-size:2rem;
padding-left:5px;
padding-right:5px;
color:#FFF;
background:rgba(0,0,0,0.3);
    border-radius: 5px;
}

.infoinfo{
position:absolute;
right:2rem;
top:2rem;
height:1.25rem;
line-height:1.25rem;
font-size:1.25rem;
padding-left:5px;
padding-right:5px;
color:GREY;

}


.infoblock{
margin-top:-1px;
margin-bottom: -1px;
width:100%;
position:relative;
box-sizing: border-box;
padding-left:10%;
padding-right:10%;
padding-top:5%;
padding-bottom:5%;
background-color: white;
margin:0px;

}
.fakeback{
width:100%;
background:rgb(76,76,76);
min-height:3vw;
text-align: center;
color:white;
font-size: 1.5em;    
}
.roundpic{
margin-left:auto;
margin-right:auto;
width:50%;
padding-top:50%;
background-image:url(../resource/ava.jpg);
background-size:cover;
background-position:center center;
border-radius:50%;


}
.infotitle{
width:100%;
text-align:center;
margin-left:auto;
margin-right:auto;
}
@font-face {
  font-family: 'fontello';
  src: url('../font/fontello.eot?7114392');
  src: url('../font/fontello.eot?7114392#iefix') format('embedded-opentype'),
       url('../font/fontello.woff?7114392') format('woff'),
       url('../font/fontello.ttf?7114392') format('truetype'),
       url('../font/fontello.svg?7114392#fontello') format('svg');
  font-weight: normal;
  font-style: normal;
}

blockquote {
position: relative;
color: #383838;
font-size: 2rem;
}
blockquote:before {
display: block;
content: "\201C";
font-size: 4rem;
position: absolute;
left: -80px;
top: -50px;
color: #7a7a7a;
}
blockquote:after {
display: block;
content: "\201D";
font-size: 4rem;
position: absolute;
right: -80px;
color: #7a7a7a;
}
.divider{
width: 100%;
height: 500px;
}
