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

body, html, div, h1, h2, h3, h4, form, input, p, img, a, ul, li, ol, span, td, tr, table, type{
	padding:0;
	margin:0;
	border:none;
}
body{
	background: url(images/home-bg.jpg) no-repeat top #fff;
	font-family:Tahoma, Helvetica, Arial, sans-serif;
	font-size:16px;
	line-height:normal;
	color:#000;
}
body #container{
	margin:0 auto;
	width:100%;
}
.clear{
	clear:both;
}
a{
	text-decoration:none;
	color:#0099FF;
}
a:hover{
	text-decoration:underline;
}
h1, h2, h3{
	line-height:normal;
	font-weight:normal;
	color:#000;
}
li{
	list-style:none;
}
p{
	margin:0 0 20px 0;
}
#container .main{
	width:1270px;
	height:1080px;
	margin:0 auto;
	position:relative;
}
#logo{
	position:absolute;
	top:50px;
	left:0px;
	width:781px;
	height:341px;
	background:url(images/logo-home.png) no-repeat top left;
}
#frame-1{
	position:absolute;
	top:290px;
	left:400px;
	width:340px;
	height:343px;
	background:url(images/frame-1.png) no-repeat top left;
	z-index:-1;
}
#frame-2{
	position:absolute;
	top:350px;
	left:55px;
	width:342px;
	height:339px;
	background:url(images/frame-2.png) no-repeat top left;
	z-index:-2;
}
#frame-3{
	position:absolute;
	top:580px;
	left:55px;
	width:593px;
	height:438px;
	background:url(images/frame-3.png) no-repeat top left;
	z-index:1;
}
#stain{
	position:absolute;
	bottom:0;
	left:-50px;
	width:255px;
	height:287px;
	background:url(images/stain.png) no-repeat top left;
	z-index:-2;
}
#doodle{
	position:absolute;
	top:480px;
	left:80px;
	width:644px;
	height:422px;
	background:url(images/doodle.png) no-repeat top left;
	z-index:2;
}
#home-menu{
	position:absolute;
	bottom:100px;
	right:100px;
	text-transform:uppercase;
}
#home-menu li{
	margin:0 0 20px 0;
	text-align:center;
}
#home-menu li a{
	display:block;
	background:url(images/underline.png) repeat-x bottom left;
	font-size:18px;
	padding:10px 0;
	width:250px;
	color:#000;
}
#home-menu li .two{
	margin:0 0 0 30px;
}
#home-menu li .three{
	margin:0 0 0 60px;
}
#home-menu li .four{
	margin:0 0 0 90px;
}
#home-menu li a:hover{
	background-color:#fcfcfc;
	text-decoration:none;
}






@media only screen
and (max-width: 1200px) and (min-width: 769px) {
body{
	font-size:16px;
	background:url(images/home-bg-769.jpg) no-repeat top;
	background-size:140%;
}
#container .main{
	width:720px;
}
#logo{
	top:20px;
	left:0px;
	width:500px;
	height:240px;
	background-size:100%;
}
#frame-1{
	top:180px;
	left:240px;
	width:200px;
	height:200px;
	background-size:100%;
}
#frame-2{
	top:220px;
	left:0;
	width:280px;
	height:280px;
	background-size:100%;
}
#frame-3{
	top:450px;
	left:0;
	width:350px;
	height:350px;
	background-size:100%;
}
#stain{
	bottom:200px;
	left:-50px;
	width:200px;
	height:220px;
	background-size:100%;
}
#doodle{
	top:300px;
	left:0;
	width:450px;
	height:300px;
	background-size:100%;
}
#home-menu{
	bottom:350px;
	right:0;
}
#home-menu li{
	margin:0 0 20px 0;
}
#home-menu li a{
	font-size:16px;
	width:200px;
}
#home-menu li .two{
	margin:0 0 0 20px;
}
#home-menu li .three{
	margin:0 0 0 40px;
}
#home-menu li .four{
	margin:0 0 0 60px;
}



}
@media only screen
and (max-width: 768px) and (min-width: 525px) {
body{
	font-size:16px;
	background:url(images/home-bg-769.jpg) no-repeat top;
	background-size:200%;
}
#container .main{
	width:500px;
	margin:0 auto;
}
#logo{
	top:20px;
	left:0px;
	width:400px;
	height:200px;
	background-size:100%;
}
#frame-1{
	top:170px;
	left:100px;
	width:150px;
	height:150px;
	background-size:100%;
}
#frame-2{
	top:280px;
	left:0;
	width:200px;
	height:200px;
	background-size:100%;
}
#frame-3{
	top:450px;
	left:0;
	width:250px;
	height:250px;
	background-size:100%;
}
#stain{
	bottom:350px;
	left:-50px;
	width:150px;
	height:150px;
	background-size:100%;
}
#doodle{
	top:300px;
	left:0;
	width:300px;
	height:200px;
	background-size:100%;
}
#home-menu{
	bottom:450px;
	right:0;
}
#home-menu li{
	margin:0 0 20px 0;
}
#home-menu li a{
	font-size:16px;
	width:200px;
}
#home-menu li .two{
	margin:0 0 0 20px;
}
#home-menu li .three{
	margin:0 0 0 40px;
}
#home-menu li .four{
	margin:0 0 0 60px;
}


}
@media only screen
and (max-width: 524px) {
body{
	font-size:16px;
	background:url(images/home-bg-769.jpg) no-repeat top;
	background-size:200%;
}
#container .main{
	width:300px;
	margin:0 auto;
}
#logo{
	top:20px;
	left:0px;
	width:300px;
	height:200px;
	background-size:100%;
}
#frame-1{
	top:200px;
	left:150px;
	width:150px;
	height:150px;
	background-size:100%;
}
#frame-2{
	top:200px;
	left:0;
	width:200px;
	height:200px;
	background-size:100%;
}
#frame-3{
	top:350px;
	left:30px;
	width:250px;
	height:200px;
	background-size:100%;
}
#stain{
	bottom:450px;
	left:-50px;
	width:150px;
	height:150px;
	background-size:100%;
}
#doodle{
	top:300px;
	left:0;
	width:100%;
	height:200px;
	background-size:100%;
}
#home-menu{
	bottom:300px;
	right:0;
}
#home-menu li{
	margin:0 0 20px 0;
}
#home-menu li a{
	font-size:16px;
	width:200px;
}
#home-menu li .two{
	margin:0 0 0 20px;
}
#home-menu li .three{
	margin:0 0 0 40px;
}
#home-menu li .four{
	margin:0 0 0 60px;
}



}