/*============== Responsive CSS Document ============== */

/*		Tablet Layout: 768px.
		Gutters: 24px.
		Outer margins: 28px.
		Inherits styles from: Default Layout.
-----------------------------------------------------------------
cols    1     2      3      4      5      6      7      8
px      68    160    252    344    436    528    620    712    */

@media only screen and (min-width: 768px) and (max-width: 979px) {
	
	#container { margin: 0 auto; width: 758px;	}
	#header{ background-size:100% auto }
	#toptext h1{ padding:5px 0 0; }
	#header .hdrtext{width: 270px; left:160px; font-size:15px; }
	div#right-form{ top:15px; left:0px; }
	div#comprison-table{ width:auto;}
	.hd-form{ background-size:100% auto;font-size: 22px; height:42px;  }
	#form1, #form2, #form3, #form4{ background-size:100% 100%; height:527px; }
	#btn-program{ background-size:100% auto; width:auto; font-size:23px;  }
	#footer{ width:auto !important; padding:5px 5px; }
	.btn-more{ width:280px; background-size:100% auto; }
	.btn-more a{ font-size:35px; }
	div.right-side-header{ border-radius:12px; overflow:hidden;}
	div.left-side-header, div.right-side-header{ float:none; margin:0 auto 10px; }

	/*Signup CSS*/
	div#description{width: 57%;}
	div#offer-container p.plus{position: static;}
	img#gloves{right: 220px;}
}


/*		Wide Mobile Layout: 480px.
		Gutters: 24px.
		Outer margins: 22px.
		Inherits styles from: Default Layout, Mobile Layout.
------------------------------------------------------------
cols    1     2      3      4      5
px      68    160    252    344    436    */

@media only screen and (min-width: 480px) and (max-width: 767px){
	
	h3 span, h2{ font-size:18px !important;}	
	#container { margin: 0 auto; width: auto; padding:0 10px;	}
	#header{ background:none #3F6CA5; height:auto;  }
	div#right-form{ float:none; margin:auto; width:360px; padding-bottom:30px;  }
	#tagline{ display:none; }
	#toptext{ padding:0; margin-left:0px; background:none #F69C1B; padding:10px; }
	#toptext h1{ padding:5px 0 0; }
	#toptext h1 font{font-size: 15px !important;}
	#header .hdrtext{ float: none; font-size: 12px; left: 0; margin: 20px auto; position: inherit; top: 0; width: 290px; }
	div#right-form{ top:0px; left:0px; }
	div#comprison-table{ width:auto;}
	.hd-form{ background:none #F69C1B; height:auto; padding:10px; font-size:20px; position:relative; top:20px; }
	.FormWrapper{ padding-top:10px; }
	#form1, #form2, #form3, #form4{ background: none #42659A; height: auto; border-radius:12px; padding:20px 0 ; margin-bottom:20px; }
	#btn-program{ background-size:100% auto; width:auto; font-size:13px; padding:17px 0 0 70px; height:50px;    }
	#footer{ width:auto !important; padding:5px 5px; }
	.img-right { display: block; float: none; margin: auto; padding-right: 0px; }
	.img-left { padding-left: 0px; display: block; float: none; margin: auto; }
	ul.listing-style1, ul.listing-style{ margin:20px 0 0; display:inline-block; }
	ul.listing-style1 li{ padding-left:0px; }
	.btn-more{ background-size:100% auto; width:auto; }
	.btn-more a{ font-size:42px; }
	div.right-side-header{ border-radius:12px; overflow:hidden;}
	div.left-side-header, div.right-side-header{ float:none; margin:0 auto 10px; width:auto; background-size:100% auto; padding-left:10px;padding-right:10px; }
	div.table-contentsWrap ul li p.leftside, div.table-contentsRaightWrap ul li p.rightside{
	width:auto;
	}
	div.right-side-header h3{ font-size:20px; margin-bottom:20px; top:0px; }

	.input-field label{width: 85px;}
	div#right-form #form p.plus{padding: 0 10px;}
	.input-field input[type="text"]{width: 170px;}
	div#right-form form input.submit{width: 243px; background-size: 100%;}
	div#right-form form p.privacy{margin-top: 0;}


	/*SignUp CSS*/
	div.checkout{text-align: center;}
	div.checkout .fright{float: none;}
	div#description{padding: 0; width:100%; font-size: 25px;}
	div#description strong{font-size: 25px;}
	div#description span{font-size: 20px;}
	div.step{padding: 50px 30px;}
	div.step div.school div.day{width: 49.5%; border: none;}
	p.advantage{ font-size: 20px !important;  }
	div#offer-container{margin: 0;}
	img#gloves{right: 0;bottom: 175px;}
	img#fighter, div#offer-container p.plus{position: static; font-size: 22px;}
}



/*		Mobile Layout: 320px.
		Gutters: 24px.
		Outer margins: 34px.
		Inherits styles from: Default Layout.
---------------------------------------------
cols    1     2      3
px      68    160    252    */

@media only screen and (max-width: 479px) {
	
	h3 span, h2{ font-size:18px !important;}
	#container { margin: 0 auto; width: auto; padding:0 10px;	}
	#header{ background:none #3F6CA5; height:auto;  }
	div#right-form{ float:none; margin:auto; width:306px; padding-bottom:30px;  }
	#tagline{ display:none; }
	#toptext{ padding:0; margin-left:0px; background:none #F69C1B; padding:10px; }
	#toptext h1{ padding:5px 0 0; }
	#toptext h1 font{font-size: 15px !important;}
	#header .hdrtext{ float: none; font-size: 12px; left: 0; margin: 20px auto 15px; position: inherit; top: 0; width: 290px; }
	div#right-form{ top:0px; left:0px; background-size: 100% 95%; width:auto; margin:auto; }
	div#right-form h1{ font-size:62px; }
	.free2{ width:auto; }
	.free h3, .free2 h3{ font-size:18px; }
	.free span, .free2 span{ font-size:9px; }
	div#comprison-table{ width:auto;}
	.input-field{ width:245px; }
	.input-field label{ width:47px; }
	.submit-button1 button { width: 248px; }
	.submit-button1 button img { height: auto; }
	.hd-form{ background:none #F69C1B; height:auto; padding:10px; font-size:20px; }
	.hd-form{ background:none #F69C1B; height:auto; padding:10px; font-size:14px; position:relative; top:10px; }
	.FormWrapper{ padding-top:10px; }
	#form1, #form2, #form3, #form4{ background: none #42659A; height: auto; border-radius:12px; padding:10px ; margin-bottom:20px; }
	.FormWrapper{ width:auto; }
	div.LableWrap{ float:none; text-align:left; padding-bottom:5px; }
	div.InputWrap{ float:none; }
	.Buton button{ width:230px;}
	.Buton button img{ height:auto; }
	ul.listing-style1, ul.listing-style { margin-top: 20px; }
	#btn-program{ background-size:100% auto; width:auto; font-size:9px; padding:5px 0 0 40px; height:37px;    }
	#footer{ width:auto !important; padding:5px 5px; }
	.img-right { display: block; float: none; margin: auto; padding-right: 0px; }
	.img-left { padding-left: 0px; display: block; float: none; margin: auto; }
	ul.listing-style1{ margin:20px 0 0; display:inline-block; }
	ul.listing-style1 li{ padding-left:0px; }
	.btn-more{ background-size:100% auto; width:auto; height:41px; }
	.btn-more a{ font-size:21px; }
	div.right-side-header{ border-radius:12px; overflow:hidden;}
	div.left-side-header, div.right-side-header{ float:none; margin:0 auto 10px; width:auto; background-size:100% auto; padding-left:10px;padding-right:10px; padding-top: 24px; }
	div.table-contentsWrap ul li p.leftside, div.table-contentsRaightWrap ul li p.rightside{
	width:auto;
	}
	div.right-side-header h3{ font-size:13px; margin-bottom:0px; top:-12px; }
	div.left-side-header h2{ font-size:18px; top:0; margin-bottom: 22px; }
	div.table-contentsWrap ul li p.leftside, div.table-contentsRaightWrap ul li p.rightside{ background-size:9% auto;
	padding:0px 5px 10px 30px;
	}

	div#right-form #form{margin: 0 16px;}
	.input-field label{width: 85px;}
	div#right-form #form p.plus{padding: 0 10px;}
	.input-field input[type="text"]{width: 150px;}
	form input.submit{width: 243px; background-size: 100%;}
	div#right-form form p.privacy{margin-top: 0;}



	/*SignUp CSS*/
	#form p.plus{font-size: 23px;}
	div#description{padding: 0; width:100%; font-size: 25px;}
	div#description strong{font-size: 25px;}
	div#description span{font-size: 20px;}
	div.step{padding: 50px 30px;}
	div.step div.school div.day{width: 49.5%; border: none;}
	p.advantage{ font-size: 20px !important;  }
	div#offer-container{margin: 0}
	img#gloves, img#fighter, div#offer-container p.plus{position: static; font-size: 22px;}

}