Horizontal gravity form for subscription.

horizontal-gravity.less

/*------------------------------------*\
    #SUBSCRIBE
\*------------------------------------*/

.module--subscribe {
	background: #222223; 
	padding: 15px 0 ;
	color: #fff; 

.gform_wrapper { // contains everything in the form 
	width: 100%;
	max-width: 100%;
	margin: 0px auto !important ;

		.gform_heading {  //heading + description of form
			text-align: center  ;
			margin: 0px;
			padding: 0px;
			margin: 0px; 
			width: 100%  !important ;
		}

		.gform_body { // contains inputs 
			@media (min-width: @M){
				width: 75%; 
				float: left;
			}
			@media (max-width: @M){
				width: 95% ;
				margin: 0 auto ;
			}
			.gfield  { //wraps each individual input 
				@media (min-width: @M){
					display: inline-block;
					float: left;
					clear: none;			
				}

				@media (max-width: @M){
					width: 100%;
					margin: 0 auto  !important ;
				}

				.gfield_label { // labels
					display: none;
				}

				@media (min-width: @M){
					width: 33.33%; 
				}
				.ginput_container { // input container 
					width: 100% !important ; 
					input {  //input or fields themselves
						width: 94%;
						box-sizing: border-box;
						@media (max-width: @M){
							width: 100%;		
							margin: 0 auto !important ;			
						}
					}
				}
			}
		}

		.gform_footer  { // contains button 

			@media (min-width: @M){
				width: 25%;
			}
			@media (max-width: @M){
				width: 95%;
				float: none !important ;
				margin: 8px auto  !important ;
				display: block;
			}
			display: inline-block;
			padding: 0px !important ;
			margin: 5px 0px 0px 0px  !important ;

			input { // the button 
			    width: 100%;
			    background: orange;
			    border: 0px;
			    color: #fff;
			    padding: 9px 0;
			    box-sizing: border-box; 
			    font-family: @montserrat ;
			    text-transform: uppercase;
			}
		}
	}
}