body { color:#ffffff;font-family: 'Roboto', sans-serif; background:#ffffff;}
.section { min-height:1000px; position:relative;}
.sectionBox { margin:0 auto; height:100%;position:relative;}
.border-box { 
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

.wrap { background: url(../images/index.jpg) center 5% no-repeat; background-size: 100%; }

#scene {height:900px;background: url(../images/bg.jpg) center center no-repeat #000000; background-size: cover; color:#ffffff; text-align:center;}
#scene .sectionBoxInner { width:1200px; margin:0 auto; position:relative;}
#scene .paragraph { position:absolute; top:360px; left:540px;}

.paragraph h2 { font-size:50px; margin-bottom:20px; font-weight:100;}
.paragraph p { font-size:22px; line-height:36px; margin-bottom:20px; font-weight:100; text-align: center}
.paragraph p a { margin:0 10px; display:inline-block;}

.mobile {
	width:570px; 
	height:750px; 
	display:block; background:url(../images/mobile.png) top left no-repeat; 
	position:absolute; 
	top:80px; 
	left:0;
	}


.sectionInner { max-width: 840px; padding: 0 20px; margin: 0 auto; text-align: center; margin-bottom: 100px}
h2.contactus { font-size: 34px; color: #000; margin: 100px 0px 40px 0px;font-weight:lighter}

@media screen and (min-width: 980px) and (max-width: 1500px) {
	#scene .sectionBoxInner { width:100%; margin:0 auto; position:relative;}
	.wrap { background-size: 120%; background-position: center 10%;}
}
@media screen and (min-width: 768px) and (max-width: 979px) {
	html, body { height:inherit;}
	
	.wrap { background-size: 150%; background-position: center 5%;}
	.paragraph p{text-align: center}
	.paragraph p a { margin:10px 10px 10px 10px; display:inline-block;}  
	.paragraph p a img { width: 100%}
	
	#scene { height:100%;}
	#scene .sectionBoxInner { width:100%; padding-bottom: 20%}
	#scene .paragraph { position: inherit; top: 0; left: 0; width: 80%; padding-right: 0; padding-top:0%; margin:0 auto;}
	.mobile {
	  width: 330px;
	  height: 490px;
	  display: block;
	  margin: 0 auto;
	  background: url(../images/mobile.png) top left no-repeat;
	  position: inherit;
	  top:25px; left:0;
	  background-size: 330px;	  
	 }
}
@media screen and (max-width: 767px) {
	html, body { height:inherit;}
	.wrap { background-size: 100%;}
	
	.paragraph h2 { margin: 0 0 20px; font-size:20px; font-weight:400}
	.paragraph p { font-size:15px; line-height:1.6em; font-weight:100;}
	.paragraph p a { margin:10px 10px 10px 10px; display:inline-block;}  
	.paragraph p a img { width: 100%}

	#scene { height:100%;}
	#scene .sectionBoxInner { width:100%; padding-bottom: 20%;}
	#scene .paragraph { position: inherit; top: 0; left: 0; width: 80%; padding-right: 0; padding-top:5%; margin:0 auto;}
	.mobile {top:30px; 
	  width: 270px;
	  height: 380px;
	  display: block;
	  margin: 0 auto;
	  background: url(../images/mobile.png) top left no-repeat;
	  position: inherit;
	  background-size: 270px;
	  left:0;
	 }
		 }

	@media screen and (max-width: 480px) {
	.wrap { background-size: 150%;}
	.paragraph p a { margin:10px 10px 10px 20px; display:inline-block;}  
	.paragraph p a img { width: 80%}
	.sectionInner { max-width: 840px; padding: 0 20px; margin: 0 auto; text-align: center; margin-bottom: 50px}
	h2.contactus { font-size: 26px; color: #333333; margin: 50px 0px 40px 0px;font-weight:lighter}

	}


.copyright{text-align: center;font-size: 14px;background-color:#000;padding:20px;color:#f4f4f4}