/*
    Description: 	Form Framework Pro
    Author: 		InsideLab
    Version: 		1.0
*/

/*	--------------------------------------------------
	:: Note: Design for a width of 768px
	-------------------------------------------------- */

    @media only screen and (min-width: 10002px) and (max-width: 99999px) {
        
		.container,.wrapper{ width:420px; }  
		
	}

/*	--------------------------------------------------
	:: Note: Design for a width of 480px
	-------------------------------------------------- */

    @media only screen and (min-width: 10000px) and (max-width:  10001px) {
        
		.container,.wrapper{ width:420px; }
		.grid-container .column-one,
		.grid-container .column-two,
		.grid-container .column-three,
		.grid-container .column-four,
		.grid-container .column-five,
		.grid-container .column-six,
		.grid-container .column-seven,
		.grid-container .column-eight,
		.grid-container .column-nine,
		.grid-container .column-ten,
		.grid-container .column-eleven,
		.grid-container .column-twelve { width:98%; }
		
		.form .header { 
		    text-align:center; 
		}
		
		.form .header h4 { 
		    line-height:22px; 
		}
		
		.form .header a { 
		    float:none;
		}
		
		.form .sub-header-one,
		.form .sub-header-two,
		.form .sub-header-three,
		.form .sub-header-four,
		.form .sub-header-five{ 
			text-align:center;
		}
		
		.form .sub-header-one h4,
		.form .sub-header-two h4,
		.form .sub-header-three h4,
		.form .sub-header-four h4,
		.form .sub-header-five h4{ 
			line-height:22px;
			margin:10px 0 5px 0;
		}
		
		.form .sub-header-three img,
		.form .sub-header-five img{ 
			margin:5px 0;
		}
		
		.form .sub-header-one i,
		.form .sub-header-two i,
		.form .sub-header-three i,
		.form .sub-header-four i,
		.form .sub-header-five i{ 
		    display:block;
			float:none;
			margin-top:5px;
			padding-bottom:10px;
			text-align:center;
		}
		
		.form .checkbox-group label,
		.form .radio-group label { 
		    display:block;
			text-align:left;
			margin-top:10px;
			margin-bottom:10px;
		}
		
		.ui-datepicker { 
			width:361px;
		}
		
		.ui-datepicker .ui-datepicker-calendar a,
		.ui-datepicker .ui-datepicker-calendar span {
			width:43px;
		}
		
		.form .box .box-header h4{
			line-height:22px;
		}
		
		.wrapper .header,
		.wrapper .copyright{ 
			text-align:center;
		}
		
		.wrapper .header a,
		.wrapper .header a.logout{
		    text-align:center;
			margin-top:20px;
			float:none;
		}
		
		.wrapper .description,
		.wrapper .description a{
		    text-align:center;
			float:none;
		}
		
		.wrapper .description a{
		    margin-top:10px;
		}
		
		.wrapper .header a.logout{
		    display:block;
			margin-right:0;
		}
		
		#box-1,#box-2,#box-3{
		    margin-bottom:10px;
		}
		
		.stripe-message-container{ width:420px; padding:60px 100px; }
		
		#pricing-table-one,#pricing-table-two{ 
		    margin-bottom:10px;
		}

    }

/*	--------------------------------------------------
	:: Note: Design for a width of 320px
	-------------------------------------------------- */

    @media only screen and (max-width: 9999px) {
        
		.container,.wrapper { width:100%; }
		.grid-container .column-one,
		.grid-container .column-two,
		.grid-container .column-three,
		.grid-container .column-four,
		.grid-container .column-five,
		.grid-container .column-six,
		.grid-container .column-seven,
		.grid-container .column-eight,
		.grid-container .column-nine,
		.grid-container .column-ten,
		.grid-container .column-eleven,
		.grid-container .column-twelve { width:98%; }
		
		.form .header { 
		    text-align:center; 
		}
		
		.form .header h4 { 
		    line-height:22px; 
		}
		
		.form .header a { 
		    float:none;
		}
		
		.form .sub-header-one,
		.form .sub-header-two,
		.form .sub-header-three,
		.form .sub-header-four,
		.form .sub-header-five{ 
			text-align:center;
		}
		
		.form .sub-header-one h4,
		.form .sub-header-two h4,
		.form .sub-header-three h4,
		.form .sub-header-four h4,
		.form .sub-header-five h4{ 
			line-height:22px;
			margin:10px 0 5px 0;
		}
		
		.form .sub-header-three img,
		.form .sub-header-five img{ 
			margin:5px 0;
		}
		
		.form .sub-header-one i,
		.form .sub-header-two i,
		.form .sub-header-three i,
		.form .sub-header-four i,
		.form .sub-header-five i{ 
		    display:block;
			float:none;
			margin-top:5px;
			padding-bottom:10px;
			text-align:center;
		}
		
		.form .checkbox-group label,
		.form .radio-group label { 
		    display:block;
			text-align:left;
			margin-top:10px;
			margin-bottom:10px;
		}
		
		.ui-datepicker { 
			width:222px;
		}
		
		.ui-datepicker .ui-datepicker-calendar a,
		.ui-datepicker .ui-datepicker-calendar span {
			width:26px;
		}
		
		.form .box .box-header h4{
			line-height:22px;
		}
		
		.wrapper .header,
		.wrapper .copyright{ 
			text-align:center;
		}
		
		.wrapper .header a,
		.wrapper .header a.logout{
		    text-align:center;
			margin-top:20px;
			float:none;
		}
		
		.wrapper .description,
		.wrapper .description a{
		    text-align:center;
			float:none;
		}
		
		.wrapper .description a{
		    margin-top:10px;
		}
		
		.wrapper .header a.logout{
		    display:block;
			margin-right:0;
		}
		
		#box-1,#box-2,#box-3{
		    margin-bottom:10px;
		}
		
		.stripe-message-container{ width:200px; padding:30px 60px; margin-top:120px; }
		
		#pricing-table-one,#pricing-table-two{ 
		    margin-bottom:10px;
		}
	
    }