Fluid Marketo Forms CSS

@media screen and (min-width:1px) {
  /* Begin Fluid Marketo Forms CSS | paste this into the Custom CSS input */
  
  /* hide these elements */
  form.mktoForm .mktoOffset,
  form.mktoForm .mktoGutter {
    display:none !important;
  }
  
  /* form element */
  form.mktoForm {padding:20px; box-sizing:border-box;}
  
  /* all form child elements */
  form.mktoForm * {font-size: inherit !important; box-sizing:border-box;}

  /* make these elements fluid (override fixed widths) */
  form.mktoForm,
  form.mktoForm .mktoFormRow,
  form.mktoForm .mktoButtonRow,
  form.mktoForm .mktoFormCol,
  form.mktoForm .mktoFieldWrap,
  form.mktoForm label.mktoLabel,
  form.mktoForm input[type=url], 
  form.mktoForm input[type=text], 
  form.mktoForm input[type=date], 
  form.mktoForm input[type=tel],
  form.mktoForm input[type=email], 
  form.mktoForm input[type=number], 
  form.mktoForm textarea.mktoField, 
  form.mktoForm select.mktoField,
  form.mktoForm .mktoLogicalField {
    width: 100% !important;
  }
  
  /* labels */
  form.mktoForm label.mktoLabel {
    padding-bottom: .5em !important;
    font-weight: bold;
  }
  
  /* required asterix */
  form.mktoForm .mktoAsterix {
    float: left !important;
    margin-left: -1em !important;
  }

  /* inputs */
  form.mktoForm input[type=url], 
  form.mktoForm input[type=text], 
  form.mktoForm input[type=date], 
  form.mktoForm input[type=tel],
  form.mktoForm input[type=email], 
  form.mktoForm input[type=number], 
  form.mktoForm textarea.mktoField, 
  form.mktoForm select.mktoField {
    padding: .5em .75em !important;
    min-height: 2.5em; /* set input heights */
    height: auto !important; /* override */
  }

  /* checkbox & radio labels */
  form.mktoForm .mktoCheckboxList,
  form.mktoForm .mktoRadioList {
    box-sizing: border-box;
    width: 100% !important;
    padding: 0 !important;
  }
  form.mktoForm .mktoRadioList label[for],
  form.mktoForm .mktoCheckboxList label[for] {
    width:100% !important;
    margin: 0px !important;
    padding: 0 0 .5em 1.75em;
  }
  
  /* checkbox & radio inputs */
  form.mktoForm input[type=checkbox],
  form.mktoForm input[type=radio] {
    height:1.25em !important;
    width:1.25em !important;
  }

  /* button */
  form.mktoForm .mktoButtonWrap {
    margin-left: 0 !important; /* override */
    width: 100% !important;
    display: block !important;
    text-align: center !important; /* center button */
    padding-top: 10px; /* optional space above the button */
  }

  form.mktoForm button.mktoButton {
    display: inline-block !important;
    background: #1595a3 !important; /* button bg color */
    color: #fff !important; /* button text color */
    border:2px solid transparent !important; /* button border color */
    padding: .5em 2.75em;
    font-size:1.2em !important;
    line-height:1.2em !important;
  }
  form.mktoForm button.mktoButton:hover {
    background: #fff !important; /* button bg color on hover */
    color: #1595a3 !important; /* button text color on hover */
    border-color: #1595a3 !important; /* button border color on hover */
  }
  
} /* end 1px+ (mobile) styles */

/* RESPONSIVE STYLES */
@media screen and (min-width:480px) {
    
    form.mktoForm.mktoLayoutLeft label.mktoLabel {
        width:30% !important; /* set label width for labels-left setup */
    }
    
    form.mktoForm.mktoLayoutLeft input[type=url], 
    form.mktoForm.mktoLayoutLeft input[type=text], 
    form.mktoForm.mktoLayoutLeft input[type=date], 
    form.mktoForm.mktoLayoutLeft input[type=tel],
    form.mktoForm.mktoLayoutLeft input[type=email], 
    form.mktoForm.mktoLayoutLeft input[type=number], 
    form.mktoForm.mktoLayoutLeft textarea.mktoField, 
    form.mktoForm.mktoLayoutLeft select.mktoField,
    form.mktoForm.mktoLayoutLeft .mktoCheckboxList,
    form.mktoForm.mktoLayoutLeft .mktoRadioList {
        width: 70% !important; /* set input width for labels-left setup */
    }
} /* end @ 768+ */