/*============== 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) {
	
	.GoohleMap{ padding:20px;}
	iframe{ width:100% !important; }
	.MianWrapper { margin: 0 auto; width: 758px; }
	.HeaderWrapper{ background:none #37A1D3; min-height:auto; }
	.Logo{ padding:30px; }
	.HeaderText{ display:block; }
	.TopGirl{ display:none; }
	div#form-wrapper{ position:relative; margin:auto; width:333px; top:0px; }
	
	#header{ background-size:100% auto }
	#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% auto; height:466px; }
	#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; }
	
	.FormWrapper { margin: 30px 0 0 20px; }
	.ImgRightWrap{ width:330px;}
	
	div#comprison-table{ width:auto;}
	div.left-side-header, div.right-side-header { float: none; margin: 0 auto 10px; }
	div.right-side-header { border-radius: 12px; overflow: hidden; }
	
	.KickboxingProgramWrapper{ background:none #28427D; min-height:auto; width:auto; border-radius:12px; margin:10px; padding:20px; }
	.KickboxingProgramDetail{ width:auto; float:none; }
	h1.ResponsiveH1{ display:block; }
	
	.GetStartedWrapper{ background:none #C52C2F; min-height:auto; width:auto; border-radius:12px; margin:10px; padding:20px; }
	.GetStartedDetail{ width:auto; float:none; }
	h1.ResponsiveH2{ display:block; }
	
	.FooterLinks{ width:auto; padding:0px 10px;}


	.SystemWrapper{ background:none #3DB04B; min-height:auto; width:auto; border-radius:12px; margin:10px; padding:20px; }
	.SystemDetail{ width:auto; float:none; }
	h1.ResponsiveH3{ display:block; }
	
	.btn-more{ width:280px; background-size:100% auto; }
	.btn-more a{ font-size:35px; }
	.Content01 p.first{padding-right: 0;}


	/*Sign Up CSS*/
	.description{width: 60%;font-size: 30px;}
	img#badge{top: 120px;}
	img#gloves{bottom: 0; right: -45px;}
	body{overflow-x: hidden;}
}

/*		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){
	
	.GoohleMap{ padding:20px;}
	iframe{ width:100% !important;}
	
	.MianWrapper{ width:auto;}
	.HeaderWrapper{ background:none #37A1D3; min-height:auto; }
	.Number{ position:inherit; text-align:center; padding:10px 0 0; }
	.Logo{ padding:30px; }
	.HeaderText{ display:block; }
	.TopGirl{ display:none; }
	div#form-wrapper{ position:relative; margin:auto; width:333px; top:0px; }
	
	
	.FormWrapper { margin:0 auto; padding:30px 0; float:none; }
	.ImgRightWrap{ display:none;}
	
	div.comprison-table{ width:auto;}
	div.left-side-header, div.right-side-header { float: none; margin: 0 auto 10px; }
	div.right-side-header { border-radius: 12px; overflow: hidden; width: 428px; }
	
	.KickboxingProgramWrapper{ background:none #28427D; min-height:auto; width:auto; border-radius:12px; margin:10px; padding:20px; }
	.KickboxingProgramDetail{ width:auto; float:none; }
	h1.ResponsiveH1{ display:block; }
	
	.GetStartedWrapper{ background:none #C52C2F; min-height:auto; width:auto; border-radius:12px; margin:10px; padding:20px; }
	.GetStartedDetail{ width:auto; float:none; }
	h1.ResponsiveH2{ display:block; }
	
	.FooterLinks{ width:auto; padding:0px 10px;}


	.SystemWrapper{ background:none #3DB04B; min-height:auto; width:auto; border-radius:12px; margin:10px; padding:20px; }
	.SystemDetail{ width:auto; float:none; }
	h1.ResponsiveH3{ display:block; }
	
	.FormContainerWrapper h3{ font-size:50px; }
	
	.Buton button{ width:220px; height:auto;  }
	.Buton button img{ height:auto;  }
	
	.BenefitsWrap{ border-bottom:1px solid #cacaca; padding-bottom:20px; }
	.BenefitsImgWrap{ float:none; text-align:center; }
	.BenefitsTextWrap{ padding:0; }
	.BenefitsTextWrap span { font-size: 20px; text-align: center; }
	
	.Content01 h1{ font-size:16px; margin-bottom:10px;  }
	.Content01 p{ margin-bottom:10px; }
	.Content01 p, .GetStartedDetail p, .text-white, .FormContainerWrapper p, .BenefitsTextWrap p, .text{ font-size:14px !important; }
	
	.para { padding: 10px 20px 20px; }
	.BottomLinks font{ font-size:10px !important; }
	.Content01 p.first{padding-right: 0;}

	/*Sign Up CSS*/
	.description{width: 100%;font-size: 30px; float: none; padding-top: 0;}
	img#badge{top: -95px;}
	img#gloves{bottom: 0; right: -45px;}
	body{overflow-x: hidden;}
	div.step div.school div.day{border: none;width: 50%;}
	img#gloves{position: static;}
	div#offer-container p.plus{font-size: 26px;}
	img#buy-now{padding-left: 60px;}
}



/*		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) {
	
	.GoohleMap{ padding:20px;}
	iframe{ width:100% !important;}
	
	.MianWrapper{ width:auto;}
	.MianWrapper{ width:auto;}
	.HeaderWrapper{ background:none #37A1D3; min-height:auto; }
	.Number{ position:inherit; text-align:center; padding:10px 0 0; }
	.Logo{ padding:30px; }
	.HeaderText{ display:block; margin-bottom:0; }
	.TopGirl{ display:none; }
	div#form-wrapper{ position:relative; margin:auto; width:auto; padding: 1px 0 20px; top:0px; left:0px; text-align:center; }
	div#right-form{ width:auto; padding-top:225px; height:auto; }
	div#right-form form{ display:block; left:0; margin:0; top:0; position:inherit; }
	.input-field{ width:auto; }
	.top-right-img{ display:none; }
	div#right-form h1, div#right-form h2{ float:none; margin:auto; text-align:center; }
	.free { margin-left: 12px !important; display:inline-block; float:none; }
	
	
	.FormMainWrapper{ border-bottom-right-radius:12px; border-bottom-left-radius:12px; margin: 0 10px 0; }
	.FormWrapper { margin:0 auto; padding:20px; float:none; margin:auto; width:auto;  }
	div.LableWrap, div.InputWrap{ float:none; text-align:left; width:auto; margin:10px 0; }
	div.InputLableWrap{ padding:0; }
	.ImgRightWrap{ display:none;}
	
	#carea p { font-size: 17px; margin-bottom: 20px; }
	div.comprison-table { width: auto; margin:0 20px; }
	div.left-side-header, div.right-side-header { background-size: 100% auto; float: none; margin: 0 auto 10px;
	padding-left: 10px; padding-right: 10px; padding-top: 24px; width: auto; }
	div.right-side-header { border-radius: 12px; overflow: hidden; width: auto	; }
	.KickboxingProgramWrapper{ background:none #28427D; min-height:auto; width:auto; border-radius:12px; margin:10px; padding:20px; }
	div.left-side-header h2 { font-size: 18px; margin-bottom: 24px; top: 0; }
	div.right-side-header h3 { font-size: 13px; margin-bottom: 0; top: -12px; }
	div.table-contentsWrap ul li p.leftside, div.table-contentsRaightWrap ul li p.rightside {
    background-size: 9% auto;padding: 0 5px 10px 30px; width:auto; }
	
	.BenefitsWrap{ border-bottom:1px solid #cacaca; padding-bottom:20px; }
	.BenefitsImgWrap{ float:none; text-align:center; }
	.BenefitsTextWrap{ padding:0; }
	
	.BenefitsTextWrap span{ font-size:20px; text-align:center; }
	.BenefitsTextWrap p{ font-size:14px; text-align:center; }
	
	
	.KickboxingProgramDetail{ width:auto; float:none; }
	h1.ResponsiveH1{ display:block; font-size:12px; }
	
	.GetStartedWrapper{ background:none #C52C2F; min-height:auto; width:auto; border-radius:12px; margin:10px; padding:20px; }
	.GetStartedDetail{ width:auto; float:none; }
	h1.ResponsiveH2{ display:block; }
	
	.FooterLinks{ width:auto; padding:0px 10px;}


	.SystemWrapper{ background:none #3DB04B; min-height:auto; width:auto; border-radius:12px; margin:10px; padding:20px; }
	.SystemDetail{ width:auto; float:none; }
	h1.ResponsiveH2, h1.ResponsiveH3{ display:block; font-size:18px; margin-bottom:15px;  }
	.FormContainerWrapper{ margin: 20px 10px 0; }
	.FormContainerWrapper h3{ font-size:36px;}

	.Buton button{ width:220px; height:auto;  }
	.Buton button img{ height:auto;  }
	
	.Content01 h1{ font-size:16px; margin-bottom:10px;  }
	.Content01 p{ margin-bottom:10px; }
	.Content01 p, .GetStartedDetail p, .text-white, .FormContainerWrapper p, .BenefitsTextWrap p, .text{ font-size:14px !important; }
	.para { padding: 10px 20px 20px; }
	.BottomLinks font{ font-size:10px !important; }

	.Content01 p.first{padding-right: 0;}
	div#right-form{background-size: 100% 100%;}
	form input.submit{margin-top: 150px; margin-left: 10px; width: 250px; background-size: 100%;}
	div#right-form form{padding-top: 258px;}
	form p.privacy{margin-left: 18px; padding-bottom: 30px;}
	.input-field input[type="text"]{width: 166px;}



	.description{padding-top: 0; width: 100%; font-size: 23px;}
	.description span{font-size: 16px;}
	div.step{padding: 50px 30px;}
	div.step div.school div.day{width: 50%; border: 0;}
	img#gloves{position: static;}
	img#buy-now{padding-left: 0;}
	img#badge{top: 0; width: 100px;}
}