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

body{
	color:#eee;
	font-size:16px;
	background-image:url(../images/bg.jpg);
	background-repeat:no-repeat;
	background-size: cover;
	background-position:center;
	line-height:28px;
	font-family:Verdana, Geneva, sans-serif;
}
body, html{width:100%; height:100%;}
img{max-width:100%; height:auto;}
.row{margin:0;}
p{margin:10px 0;}

#warpper{height:100%;}

header{background:rgba(255,255,255,1); padding:10px; position:fixed; top:0; left:0; width:100%;}
header h1{float:right; font-size:24px; text-align:right; color:#495564;}
header h1 span{font-size:16px;}
footer{background:#333; position:fixed; bottom:0; left:0; color:#ddd; width:100%; text-align:center; padding:10px 15px; font-size:14px; max-height:68px;}

#content{height:100%; width:100%;}
#content .main-content{width:100%; max-width:769px; margin:0 auto; height:100%; display:table;}
#content .main-content .content{display:table-cell; vertical-align:middle;}
#content .main-content .content .row{background:rgba(0,0,0,0.8); padding:25px; text-align:center; border-radius:10px;}

#content .main-content h2{font-size:22px; color:#fff; font-weight:normal;}
#content .main-content h3{font-size:20px; margin:0; font-weight:normal;}

@media screen and (max-width: 768px){
	#content .main-content .content .row{border-radius:0;}
}

@media screen and (max-width: 420px){
	body{font-size:14px; padding-bottom:68px;}
	header{position:static;}
	#warpper, #content{height:auto;}
	header h1{text-align:center; float:none;}
	#content .main-content .content .row{margin:0;}
	footer{font-size:12px;}
}