@font-face {
	font-family: THSarabun2;
	src: url('../fonts/THSarabun.ttf');
}
@font-face {
	font-family: THSarabun-Bold2;
	src: url('../fonts/THSarabun-Bold.ttf');
	
}

/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {
	div.wrapper{
		width:auto;
		height:auto;
		border:0px solid blue;
		margin:0 auto;
		margin-top:0%;
	}
    body{ 
		width:440px; 
	}
	.form-2 {
		width: 430px;
		margin: 100px auto 30px;
		padding: 10px;
		position: relative;
		border-radius: 4px;
		background-color: #FFFFFF;
		border:1px solid #000000;
	}
	.form-3 {
		width: 330px;
		margin: 100px auto 30px;
		padding: 10px;
		position: relative;
		border-radius: 4px;
		background-color: #FFFFFF;
		border:1px solid #000000;
	}
	.re-map{
		position:absolute;
		margin-top:-340px;
		border:1px solid #f2f2f2;
		margin-left:5px;
		font-size:18px;
		font-family: tahoma;
		background-color:#ffffff;
		height:42px;
		width:215px;
		line-height:38px;
		color:#565656;
		-webkit-border-radius: 0px 2px 2px 0px;
		-moz-border-radius: 0px 2px 2px 0px;
		-ms-border-radius: 0px 2px 2px 0px;
		-o-border-radius: 0px 2px 2px 0px;
		  border-radius: 0px 2px 2px 0px;
		  -webkit-box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.1);
		  -moz-box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.1);
		  box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.1);
	}
	.div_position{
		margin-top:-5px;
	}
	.lost_data{
		line-height:35px;
	}
	.img_background{
		background-image: url("../images/court3.jpg");
		background-repeat: no-repeat;
		width:280px;
		height:280px;
		margin:0 auto;
		margin-top:15px;
	}
	  
} 

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {
	div.wrapper{
		width:auto;
		height:auto;
		border:0px solid red;
		margin:0 auto;
		margin-top:0%;
	}
	.form-2 {
		width: 440px;
		margin: 15px auto 30px;
		padding: 10px;
		position: relative;
		border-radius: 4px;
		background-color: #FFFFFF;
		border:1px solid #000000;
	}
	.re-map{
		position:absolute;
		margin-top:-340px;
		border:1px solid #f2f2f2;
		margin-left:5px;
		font-size:18px;
		font-family: tahoma;
		background-color:#ffffff;
		height:42px;
		width:215px;
		-webkit-border-radius: 0px 2px 2px 0px;
		-moz-border-radius: 0px 2px 2px 0px;
		-ms-border-radius: 0px 2px 2px 0px;
		-o-border-radius: 0px 2px 2px 0px;
		  border-radius: 0px 2px 2px 0px;
		  -webkit-box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.1);
		  -moz-box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.1);
		  box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.1);
	}
	.div_position{
		margin-top:-5px;
	}
	.lost_data{
		line-height:35px;
	}
	.img_background{
		background-image: url("../images/court3.jpg");
		background-repeat: no-repeat;
		width:280px;
		height:280px;
		margin:0 auto;
		margin-top:15px;
	}
} 

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {
	div.wrapper{
		width:auto;
		height:auto;
		border:0px solid yellow;
		margin:0 auto;
		margin-top:0%;
	}
	.form-2 {
		width: 440px;
		margin: 80px auto 30px;
		padding: 10px;
		position: relative;
		border-radius: 4px;
		background-color: #FFFFFF;
		border:1px solid #000000;
	}
	.re-map{
		position:absolute;
		margin-top:-339.5px;
		border:1px solid #f2f2f2;
		margin-left:5px;
		font-size:18px;
		font-family: tahoma;
		background-color:#ffffff;
		height:42px;
		width:215px;
		-webkit-border-radius: 0px 2px 2px 0px;
		-moz-border-radius: 0px 2px 2px 0px;
		-ms-border-radius: 0px 2px 2px 0px;
		-o-border-radius: 0px 2px 2px 0px;
		  border-radius: 0px 2px 2px 0px;
		  -webkit-box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.1);
		  -moz-box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.1);
		  box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.1);
	}
	.div_position{
		margin-top:-5px;
	}
	.lost_data{
		line-height:25px;
	}
	.img_background{
		background-image: url("../images/court4.jpg");
		background-repeat: no-repeat;
		width:400px;
		height:400px;
		margin:0 auto;
		margin-top:25px;
	}
} 

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {
	div.wrapper{
		width:auto;
		height:auto;
		border:0px solid black;
		margin:0 auto;
		margin-top:0%;
	}
	.form-2 {
		width: 440px;
		margin: 80px auto 30px;
		padding: 10px;
		position: relative;
		border-radius: 4px;
		background-color: #FFFFFF;
		border:1px solid #000000;
	}
	.re-map{
		position:absolute;
		margin-top:-339.5px;
		border:1px solid red;
		margin-left:5px;
		font-size:18px;
		font-family: tahoma;
		background-color:#ffffff;
		height:42px;
		width:215px;
		-webkit-border-radius: 0px 2px 2px 0px;
		-moz-border-radius: 0px 2px 2px 0px;
		-ms-border-radius: 0px 2px 2px 0px;
		-o-border-radius: 0px 2px 2px 0px;
		  border-radius: 0px 2px 2px 0px;
		  -webkit-box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.1);
		  -moz-box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.1);
		  box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.1);
	}
	.div_position{
		margin-top:-5px;
	}
	.lost_data{
		line-height:25px;
	}
	.img_background{
		background-image: url("../images/court4.jpg");
		background-repeat: no-repeat;
		width:400px;
		height:400px;
		margin:0 auto;
		margin-top:25px;
	}
} 

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {
	div.wrapper{
		width:auto;
		height:auto;
		border:0px solid green;
		margin:0 auto;
		margin-top:0%;
	}
	.form-2 {
		width: 440px;
		margin: 170px auto 30px;
		padding: 10px;
		position: relative;
		border-radius: 4px;
		background-color: #FFFFFF;
		border:1px solid #000000;
	}
	.re-map{
		position:absolute;
		margin-top:-339.5px;
		border:1px solid #f2f2f2;
		margin-left:5px;
		font-size:18px;
		font-family: tahoma;
		background-color:#ffffff;
		height:42px;
		width:215px;
		/*height:30.5px;*/
		-webkit-border-radius: 0px 2px 2px 0px;
		-moz-border-radius: 0px 2px 2px 0px;
		-ms-border-radius: 0px 2px 2px 0px;
		-o-border-radius: 0px 2px 2px 0px;
		  border-radius: 0px 2px 2px 0px;
		  -webkit-box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.1);
		  -moz-box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.1);
		  box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.1);
	}
	.div_position{
		margin-top:-5px;
	}
	.lost_data{
		line-height:25px;
	}
	.img_background{
		background-image: url("../images/court4.jpg");
		background-repeat: no-repeat;
		width:400px;
		height:400px;
		margin:0 auto;
		margin-top:25px;
	}
}