body{
	font-family: "Playpen Sans Thai";font-size: 18px;
	background-color: #F8F043;color: #000;
 background-image: url("img/bg-piano-yel2.jpg");
  background-attachment: fixed;
  background-position: center;

}
#fix-top{position: fixed; top:0px;margin: auto;z-index: 5;}
#content{margin-top: 5px;}
#top-phone{font: normal 1.8em Arial;text-align:center;padding-top: 20px;color:#282461;}
#txt-phone{background:#FCCF1C; border-radius: 50px; width: 300px;padding: 10px;float: right;}
#txt-phone a{text-decoration: none;color: #282461;}
#txt-phone a:hover{ color: #F2F2F2;font-size: 1.05em;}
#content1{padding-top: 8%;}
#content1 h1{font-size: 1.4em;color: #282461;}
#content1 h2{font: bold 1.5em "Playpen Sans Thai";color: #282461;}
#content1 strong{color: #282461;}
#content-img img{border-radius: 30px;}
#txt-img1{background-color: #FCCF1C;color: #000;font: bold 1.1em "Playpen Sans Thai";width: 130px; height: 40px; 
position: absolute;top: 14px; right: 25px;color: #282461;
border-radius: 50px;text-align:center;padding-top: 2px;}
#txt-img2{background-color: #FCCF1C;color: #000;font: bold 1.6em "Playpen Sans Thai";width: 100px; height: 100px; 
position: absolute;bottom: -20px; left: -25px;color: #282461;
border-radius: 50px;text-align:center;padding-top: 25px;}
#txt-img3{
position: absolute;top: -12px; left: 25px;
border-radius: 50px;text-align:center;padding-top: 25px;opacity: 0.8;}

#txt-short li{display: inline-block;width: 23%; width: 200px; height: 200px; background: #FFF;color: #26225F;text-align:center;border-radius: 50%;
font-size: 2em;padding-top: 2%;margin: 50px 20px;
}
#line-id{
	margin-top: 50px;
}
.i-line{width: 24px;}
input, #line-id .btn{border-radius: 50px;border: solid 1px #FFF;height: 50px;text-align:left;color: #282461;}
input{background-color: #FFF;width: 45%;font-size: 1.1em;padding: 8px 14px;}
#line-id .btn{background-color: #FCCF1C;width: 22%;text-align:center;color: #282461;font-size: 1.1em;
position: absolute;left: 35%;padding: 8px 0;
}
#txt-short p{text-align:center;font: normal 1.5em Athiti;}
#footer{text-align:center;font: normal 0.8em Arial;height: 100px;}
#footer hr{border: solid 0.1px #F8F043; background: #FFF;width: 100%;}
#footer-mobile{display: none;z-index: 5;}
#txt-short li:hover{background-color: #FCCF1C;}
#piano-gallery{text-align:center;}
#piano-gallery img{width: 19%; float: left; margin: 5px;opacity: 0.85;}
#piano-gallery img:hover{opacity: 1.0;}


@media only screen and (max-width: 900px) {
#top-logo{width: 140px;margin-top: 10px;}
#txt-phone{font-size: 0.6em;padding-top: 30px; width: 190px;padding: 10px;}
#content1{padding-top: 10%;text-align:center;}
#line-id{text-align:center;}
input{width: 80%;text-align:left;padding-left: 10px;font-size: 1em;}
#line-id .btn{left: 65%;width: 30%;font-size: 0.85em;}
#content-img img{margin-top: 30px;}
#txt-img2{left: 10px;}
#txt-short ul{padding:0;margin:0;width: 100%;display: block;}
	#txt-short li{float:left;width: 48%;width: 180px;height:180px;
	font-size: 1.6em;padding-top: 6%;margin: 50px 10px;}
	#footer-mobile{  display: block;text-align:center;background-color: #FCCF1C;position: fixed; font: normal 0.84em Arial;
		  bottom: 0;height: 60px; padding: 20px;opacity: 0.8;color: #FFF;width: 100%;margin: auto;
		  border-top: dotted 0.5px #FFFFFF; 
		  }
		  #footer-mobile a, #footer-mobile a:visited{color: #282461; text-decoration:none;}
		  #footer-mobile div{float: left;}
		  #piano-gallery img{width: 30%;}
}