Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel is required to process package imports. If you need a different preprocessor remove all packages first.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML Settings

Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

HTML

              
                <section class="content-block">
  <div class="container-fluid">
    <div class="row">
      <div class="col-md-7 col-sm-7 col-xs-mb col-sm-mb split-main-col">
				<h2>Help Us Help You</h2>
				<p>Our enrollment coaches are here to help you assess your readiness and fit for a certificate program, prepare to apply and successfully enroll.</p><br />
				<p><strong>All fields required unless otherwise specified.</strong></p>
        
	<form id="rfi" role="form" data-toggle="validator">
        <div class="formheader"><h4>Area of Interest</h4></div>
        
        <div class="formcontainer">
          
				<div class="question form-group">	
        <label>Area of Study</label>
        <select class="selectpicker areas-of-study form-control" data-live-search="true" data-live-search-placeholder="Search areas of study..." data-none-selected-text="Choose an area of study" required>
					 <option value="" data-hidden="true"></option>
           <option value="7">Arts, Communication & Writing</option>
           <option value="13">Business</option>
           <option value="6">Computing & IT</option>
           <option value="12">Construction, Real Estate & Sustainability</option>
           <option value="15">Education</option>
           <option value="16">Engineering</option>
           <option value="18">Health Care, Biotechnology & Social Services</option>
           <option value="19">Humanities & Social Sciences</option>
           <option value="20">Public Administration, Nonprofit & Law</option>
           <option value="22">Science & Math</option>
        </select>
					</div>  
          <div class="question form-group">
						<label>Certificate</label>
          <select multiple="multiple" class="selectpicker certificate-name form-control" data-live-search="true" data-live-search-placeholder="Search certificates..." data-selected-text-format="count > 2" data-none-selected-text="Choose one or more certificates" required>
           <option value="105">Audio Production</option>
		<option value="727">Digital Marketing</option>
		<option value="39">Editing</option>
		<option value="529">Film &amp; Video Production</option>
		<option value="518">Game Design</option>
		<option value="165">Localization: Customizing Software for the World</option>
		<option value="25">Museum Studies </option>
		<option value="100">Natural Science Illustration</option>
		<option value="75">Photography</option>
		<option value="659">Professional Technical Writing</option>
		<option value="654">Storytelling &amp; Content Strategy</option>
		<option value="744">UX &amp; Visual Interface Design</option>
		<option value="728">Writing</option>
        </select>
					</div>
                
          <div class="question form-group">
          <label>Intended Start Date<span class="opt">optional</span></label>
          <div id="startquarter" role="radiogroup">

<!--             <label>Quarter</label> -->

            <span class="custom-checkbox">
              <input type="radio" name="quarter" value="winter" id="win" class="past"/>
							<label class="box">Winter</label>
            </span>

            <span class="custom-checkbox">
              <input type="radio" name="quarter" value="spring" id="spr" class=""/>
              <label class="box">Spring</label>
            </span>

            <span class="custom-checkbox">
              <input type="radio" name="quarter" value="summer" id="sum" class=""/>
              <label class="box">Summer</label>
            </span>

            <span class="custom-checkbox">
              <input type="radio" name="quarter" value="autumn" id="aut" />
              <label class="box">Autumn</label>
            </span>

          </div>
          <div id="startyear" role="radiogroup">

<!--             <label>Year</label> -->

            <span class="custom-checkbox">
              <input type="radio" name="year" value="2020" id="2020"/>
              <label class="box">2020</label>
            </span>

            <span class="custom-checkbox">
              <input type="radio" name="year" value="2021" id="2021"/>
              <label class="box">2021</label>
            </span>

            <span class="custom-checkbox">
              <input type="radio" name="year" value="2022" id="2022"/>
              <label class="box">2022</label>
            </span>

            <span class="custom-checkbox">
              <input type="radio" name="year" value="2023" id="2023"/>
              <label class="box">2023</label>
            </span>

          </div>

					</div>
        </div>
				
				
				<div class="formheader"><h4>Contact Info</h4></div>
        
        <div class="formcontainer">
       
        <div class="row">
					<div class="col-md-6 question form-group">
					<label>First Name</label>
					<input type="text" class="box form-control" data-required-error="What's your first name?" required></input>
					<div class="help-block with-errors"></div>
					</div>
					<div class="col-md-6 question form-group">
					<label>Last Name</label>
					<input type="text" class="box form-control" data-required-error="What's your last name?" required></input>
					<div class="help-block with-errors"></div>
					</div>

			</div>
				
				
				<div class="question form-group">
					<label>Daytime Phone<span class="helptext">&nbsp;&nbsp;&nbsp;<i tabindex="0" class="fa fa-question-circle" aria-hidden="true" data-toggle="tooltip" data-placement="right" title="An enrollment coach will reach out to chat about your program during regular business hours. We never share your number with third parties."></i></span></label>
					<input type="tel" class="box form-control" data-required-error="What's a good number to reach you at?" required></input>
					<div class="help-block with-errors"></div>
			</div>
			<div class="question form-group">
					<label>Email<span class="helptext">&nbsp;&nbsp;&nbsp;<i tabindex="0" class="fa fa-question-circle" aria-hidden="true" data-toggle="tooltip" data-placement="right" title="We only use this to follow up on your requested program. We don't send other emails without your opt-in and never share this info with third parties."></i></span></label>
					<input type="email" class="box form-control" data-required-error="Where should we send the requested info?" required></input>
					<div class="help-block with-errors"></div>
			</div>
				
			<div class="question form-group">
				<label>Newsletter Opt-In<span><br />Sign up to receive career tips, event invitations and program updates.</span></label>
				
				<div role="radiogroup">
					
            <span class="custom-checkbox">
              <input type="radio" name="optin" value="yes" id="yes"/>
              <label class="box">Yes!</label>
            </span>

            <span class="custom-checkbox">
              <input type="radio" name="optin" value="no" id="no" checked/>
              <label class="box">No</label>
            </span>
				</div>
			</div>
	</div>
	<div class="submit-group">
                        <div class="row">
                            <div class="col-md-7 col-sm-6 col-sm-mb col-xs-mb text-left">
                                 <div class="checkbox-item">
                                 <small>By submitting my information, I consent to be contacted via telephone (including cell phone, if provided), email and text message. <a href="http://www.washington.edu/online/privacy/">Privacy Policy</a></small>    
                                    </div>
                                 
                                              
                            </div>
                            <div class="col-md-5 col-sm-6 text-right form-group">
                                <button type="submit" id="btnSubmitRfi" class="btn btn-primary rfi-form-submit" href='javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions("ctl00$ctl00$MainContent$MainContent$ctl00$lt$MainZone$SplitLayout$SplitLayout_zone_LeftZone$RFIForm1$btnSubmitRfi", "", true, "RfiValidationGroup", "", false, true))'>Request Info ❯</button>
                           
                                <div id="Processing" style="text-align: center; display: none;">
                                    <p>
                                        Submitting...<br>
                                        <img src="https://pce.azureedge.net/img/cmsstorage/uwcontinuingeducation/media/pce/help center/ajax-loader.gif?width=&amp;height=">
                                    </p>
                                </div>
                            </div>
                        </div>
                    </div>
	</form>
      </div>
<div class="col-md-4 col-md-offset-1 col-sm-5 col-xs-mb split-aside-col">
                <h3><img alt="" src="https://www.pce.uw.edu/CMSPages/GetAzureFile.aspx?path=~\uwcontinuingeducation\media\pce\help%20center\request-information.jpg&hash=6a483a6570c0d19f8b35f83685334111f2c1146c79ed790bb7b2cf650ffbd5d2"><br>
GENERAL QUESTIONS</h3>

<p>Have a quick question? We're here to help!</p>

<p>Monday through Friday, 8 a.m. to 5 p.m.</p>

<p><strong>Phone:</strong> 800-506-1325</p>





            </div>
    </div>
  </div>
</section>

<footer class="main-footer content-block hide-print">

               
        <div class="content-block bg-lighter-gray social-footer">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-md-4 col-sm-12 social-icons-container col-md-mb col-sm-mb col-xs-mb" style="padding-top:0;">
                        <h4>Connect with us</h4>
                        <ul class="footer-social">
                            <li><a class="facebook" href="https://www.facebook.com/UWContinuingEd"><span class="sr-only">Facebook</span></a></li>
                            <li><a class="twitter" href="https://twitter.com/UWContinuingEd"><span class="sr-only">Twitter</span></a></li>
                            <li><a class="linkedin" href="https://www.linkedin.com/company/uw-professional-&amp;-continuing-education"><span class="sr-only">LinkedIn</span></a></li>
                            <li><a class="youtube" href="https://www.youtube.com/user/UWContinuingEd"><span class="sr-only">YouTube</span></a></li>
                        </ul>
                    </div>
                    <div class="col-md-4 col-sm-6 subscribe-container col-sm-mb">
                        <h4>Subscribe to our email list</h4>
                        <p>Be among the first to receive timely program and event info, career tips, industry trends and more.</p>


                     
                    </div>
                    <div class="col-md-4 col-sm-6 form-inline signup-container" id="footer-form">
     

                       <form id="ctl00_ctl00_FooterContent_updPnlFooterEmailSignup" data-toggle="validator">

       
       

        <div id="ctl00_ctl00_FooterContent_pnlForm" class="contact-form" onkeypress="javascript:return WebForm_FireDefaultButton(event, 'send_contact_form_footer')">
					
					<div class="row">
					<div id="first-name" class="col-md-6 form-group">
					<input placeholder="First Name" type="text" class="box form-control" data-required-error="required" required></input>
					</div>
					<div id="last-name" class="col-md-6 form-group">
					<input placeholder="Last Name" type="text" class="box form-control" data-required-error="required" required></input>
					</div>

			</div>
			<div class="form-group">
					<input placeholder="Email" type="email" class="box form-control" required></input>
			</div>
					<div class="row consent">
						<div class="col-xs-7">
                        <p class="footerConsent">
                        By submitting my information, I consent to be contacted and agree to the terms and conditions outlined in the <a href="http://www.washington.edu/online/privacy/">privacy policy</a>.</p>
						</div>
            <div style="display: inline-block;" class="contact-form-Input col-xs-5 text-right form-group">
                <input type="submit" name="ctl00$ctl00$FooterContent$send_contact_form_footer" value="Sign Up ❯" id="send_contact_form_footer" class="btn btn-primary">
            </div>
						
					</div>
        
</div>
        
        
           <div id="ctl00_ctl00_FooterContent_vFooterEmailSummary" class="contact-form" style="color:Red;display:none;">

</div>
    </form>
                    </div>
                </div>
            </div>
        </div>
              
        <div class="content-block bg-primary info-footer">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-md-12 text-center">
                        <a href="/"><span class=" sprite-image sprite-image-logo-footer">Professional &amp; Continuing Education | University of Washington</span></a>
                    </div>
                </div>
                <div class="row info-links">
                    <div class="col-md-12 text-center">
                        <ul class="breadcrumb simple-breadcrumb">
                            
                                   <li><a href="/about">About Us</a></li>
                               
                                   <li><a href="/about/leadership">Leadership</a></li>
                               
                                   <li><a href="/about/alumni">Certificate Alumni Community</a></li>
                               
                                   <li><a href="/about/partnering-with-us">Partnering With Us</a></li>
                               
                                   <li><a href="/about/becoming-an-instructor">Becoming an Instructor</a></li>
                               
                                   <li><a href="/about/locations">Locations</a></li>
                               
                                   <li><a href="/contact-us">Contact Us</a></li>
                               
                        </ul>
                    </div>
                </div>
                <div class="row separator contact-list">
                    <div class="col-md-12 text-center">
                        <p class="copyright">
                         Brought to you by <a href="https://www.continuum.uw.edu/">UW Continuum College</a><br>
                            © 2018 <a href="http://www.washington.edu/?utm_source=pce.uw.edu&amp;utm_medium=referral&amp;utm_campaign=(not%20set)">University of Washington</a> | Seattle, WA | <a href="http://www.washington.edu/online/privacy/" title="Privacy">Privacy</a> | <a href="http://www.washington.edu/online/terms/" title="Terms">Terms</a></p>
                    </div>
                </div>
            </div>
        </div>
    </footer>
              
            
!

CSS

              
                @import url(https://fonts.googleapis.com/css?family=Open+Sans:400,600,700|Encode+Sans+Condensed:300,400,600,700,800);

html, body {
   position:relative;
   height: 100%;
}

body { font-family:Open Sans; display:none; }

h2, h3, h4 {
	font-family:Encode Sans Condensed;
	font-weight:800;
}

h4 { font-size:calc(17px + 
.4vw); padding:4px 0; margin:0; color:#444;}

.btn-primary {
	font-family:'Encode Sans Condensed';
	font-weight:600;
	line-height:1.7em;
}

.formcontainer { 
	background:#f7f6f2;
	width:100%;
	display:inline-block;
	padding: 0 2em 3em;
	margin-bottom:2em;
	font-size:calc(12px + .2vw);
	color:#444;
}

.help-block {
	display:none;
}
.has-error .help-block {
	display:block;
}

.formcontainer > p {
	margin:2em 0;
	color:#444;
}

.formheader {
  background-color:#f0ede3; 
  padding:1.5em 2em;
}

.formcontainer div > label {
	font-size:calc(12px + .2vw);
	display: block;
	/*margin-bottom: 10px;*/
	font-weight:600;
	font-family:'Encode Sans Condensed', sans-serif;
}

div.question > label {
	font-size:calc(14px + .2vw);
  color:#4b2e83;
	font-weight:700;
	margin-bottom:10px;
	text-transform:none;
}
div.question label span {
	font-weight:400;
	color:#444;
	font-size:calc(12px + .2vw);
}
div.question label span.opt {
	margin-left:10px;
}
div.question {
	margin:2.5em 0 0;
}
.custom-checkbox {
  position: relative;
  display: inline-block;
  margin: 0 -3px;
  width:calc(25% + 2px);
}
.custom-checkbox:first-of-type {
  margin-left:0;
}

.custom-checkbox > input {
  position: absolute;
  outline: none;
  left: 0;
  top: 0;
  padding: 0;
  width: 16px;
  height: 16px;
  border: none;
  margin: 0;
  opacity: 0;
  z-index: -1;
}

/* DEFAULT STYLES */
.custom-checkbox > .box,
.box,
.formcontainer .form-group .form-control {
    background-color: #ffffff;
	  color:#444;
    box-sizing: border-box;
    display:inline-block;
		margin:0;
    padding:0;
    width: 100%;
		height:auto;
	  outline: 1px solid #ccc;
		border:1px solid #f7f6f2;
    cursor: pointer;
    position: relative;
	  font-weight: 500;
		font-size:calc(12px + .2vw);
		text-transform:none;
}

.formcontainer .form-group .form-control {
	height:auto;
	outline-offset:-2px;
}

.formcontainer .form-group p {
	font-family:'Open Sans', sans-serif;
	font-size:calc(12px + .2vw);
	color:#444;
}

.formcontainer .form-group input.form-control {
	cursor:text;
	padding:1em;
}

.custom-checkbox > .box {
	padding: 1em 0; 
  text-align: center;
	-webkit-transition: outline-color ease-in-out .15s;
    -o-transition: outline-color ease-in-out .15s;
    transition: outline-color ease-in-out .15s;
}

.box.form-control {
	cursor:text;
	box-shadow:none;
	-moz-box-shadow:none;
  -webkit-box-shadow:none;
	
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.box.form-control:focus,
.formcontainer .form-group input.form-control:focus {
	outline:1px solid #4b2e83;
	border:1px solid #4b2e83;
	box-shadow:none;
}

#startyear {
	margin-top:1em;
}

.custom-checkbox > .box > .tick {
  display: none;
}

/* CHECKED STYLES */
.custom-checkbox > input:checked ~ .box,
/*IE8*/.custom-checkbox.checked > .box {
	background: #85754d;
  outline-color:#85754d;
  border-color:#85754d;
	color: #fff;
	font-weight:600;
}
.custom-checkbox > input:checked ~ .box > .tick,
/*IE8*/.custom-checkbox.checked > .box > .tick {
  display: block;
}

.custom-checkbox > input:disabled ~ .box,
.custom-checkbox > input[disabled] ~ .box {
	color:#ccc;
	outline-color:#ccc;
	background-color:#f7f6f2;
}
.custom-checkbox > input:disabled,
.custom-checkbox > input[disabled] {
  cursor:pointer;
}

.custom-checkbox > input:focus ~ .box,
.custom-checkbox > input[focus] ~ .box {
  outline:1px solid #4b2e83;
	border:1px solid #4b2e83;
  z-index:100;
}

.custom-checkbox:hover > input ~ .box,
.custom-checkbox[hover] > input ~ .box {
  outline-color:#adadad;
}

.custom-checkbox:hover > input:disabled ~ .box,
.custom-checkbox[hover] > input[disabled] ~ .box {
  outline-color:#ccc;
}

.custom-checkbox:hover > input:checked ~ .box,
.custom-checkbox[hover] > input[checked] ~ .box {
  outline-color:#85754d;
}



/* always show scrollbar of selects on mac */
.dropdown-menu.open ::-webkit-scrollbar {
        -webkit-appearance: none;
        width: 7px;
				z-index:500;
    }
.dropdown-menu.open ::-webkit-scrollbar-thumb {
        border-radius: 4px;
        background-color: #999;
        -webkit-box-shadow: 0 0 1px rgba(255,255,255,.5);
    }



.formcontainer .btn-default {
	font-family:'Open Sans', sans-serif;
	padding: 1em;
  font-size: calc(12px + .2vw);
	text-transform:none;
}

.formcontainer .bootstrap-select .dropdown-toggle.bs-invalid,
.formcontainer .form-group.has-error input.form-control{
	outline:1px solid #b94a48;
	border:1px solid #b94a48;
}
.formcontainer .bootstrap-select .dropdown-toggle.bs-invalid:focus, 
.btn-default.bs-invalid:focus,
.formcontainer .form-group.has-error input.form-control:focus {
	outline:1px solid #4b2e83 !important;
	border:1px solid #4b2e83 !important;	
}

.formcontainer .form-group.has-error .bs-searchbox input.form-control:focus {
	outline:0 !important;
	border:0 !important;
	border-bottom:2px solid #ccc!important;
}

.help-block.with-errors {
	margin-bottom:0;
}

.formcontainer .bs-invalid.bs-placeholder,
.bootstrap-select>.dropdown-toggle.bs-invalid.bs-placeholder,
.formcontainer .bootstrap-select>.dropdown-toggle.bs-invalid.bs-placeholder:hover,
.help-block.with-errors ul li {
	color:#b94a48;
}

.help-block.with-errors ul li {
	font-size:1em !important;
}

.dropdown-menu {
	padding:0;
	margin:0;
}

.dropdown-menu.open {
	border:1px solid #ccc;
	outline:1px solid #ccc;
}

.dropdown-menu>li>a {
	font-family:'Open Sans', sans-serif;
  font-size: calc(12px + .2vw);
	padding:.8em 1em;
	position:relative;
	white-space:normal;
	height:100%;
}

.dropdown-menu>li>a:focus {
	outline:none;
}

.dropdown-menu>li:last-of-type>a {
	margin-bottom:1em;
}

.dropdown-menu>.active>a, .dropdown-menu>.active>a:focus, .dropdown-menu>.active>a:hover {
	font-family:'Open Sans', sans-serif;
  font-size: calc(12px + .2vw);
	padding:.8em 1em;
}

.bootstrap-select.btn-group .dropdown-menu li.no-results {
	font-family:'Open Sans', sans-serif;	
  font-size: calc(12px + .2vw);
	background-color:transparent;
	padding:.8em 1em;
}

.bootstrap-select.btn-group .dropdown-menu li:hover > a,
.dropdown-menu>.active>a{
	background-color:#eee;
	outline:none;
}

.bs-actionsbox, .bs-donebutton, .bs-searchbox {
	padding:0;
}

.dropup .dropdown-menu, .navbar-fixed-bottom .dropdown .dropdown-menu {
	margin-bottom:0;
}

.btn-group.open .dropdown-toggle {
	box-shadow:none;
}

.bootstrap-select.btn-group .dropdown-menu {
	max-width:100% !important;
	width:100% !important;
}

.bootstrap-select .dropdown-toggle:focus,.btn-default:focus, .btn-default.active.focus, .btn-default.active:focus, .btn-default:active.focus, .btn-default:active:focus, .open>.btn-default.dropdown-toggle.focus, .open>.btn-default.dropdown-toggle:focus, .btn-default.active, .btn-default:active, .open>.btn-default.dropdown-toggle {
	outline:1px solid #4b2e83 !important;
	outline-offset:0;
	border:1px solid #4b2e83 !important;
	box-shadow:none;
	background-color:white;
}

.btn-default:hover, .btn-default.active:hover, .btn-default:active:hover, .open>.btn-default.dropdown-toggle:hover {
	background-color:white;	
}

.bootstrap-select .dropdown-toggle, .btn-default {
	-webkit-transition: ease-out .15s;
    -o-transition: ease-in-out .15s;
    transition: ease-out .15s;
}

.formcontainer .form-group .bs-searchbox input.form-control {
	border:0 !important;
	color:#444;
	padding:1em;
	font-size:calc(12px + .2vw);
	border-bottom:2px solid #ccc !important;
	outline:none !important;
}

.formcontainer .form-group .bs-searchbox input.form-control:focus {
	outline:0;
}

.submit-group small {
	font-size:calc(10px + .25vw);
}

.submit-group {
    margin-bottom:3em;
}

@media (max-width: 767px) {
.col-sm-mb {
    margin-bottom: 20px;
}
}

.bootstrap-select.btn-group.show-tick .dropdown-menu li.selected a span.check-mark {
	right:1em;
	box-sizing:border-box;
	top: 50%;
  transform: translateY(-50%);
	margin-top:0;
}

.bootstrap-select.btn-group .dropdown-toggle .filter-option {
	white-space:normal;
}

.help-block.with-errors .list-unstyled {
	-webkit-transition: .15s;
    -o-transition: .15s;
    transition: .15s;	
}

@media only screen and (max-width : 767px) {
	#btnSubmitRfi {
		float:left;
	}
}

footer.main-footer .form-inline .contact-form input.form-control {
	width:100%;
	font-size:calc(10px + .2vw);
	border-color:#ccc;
    line-height:normal;
    height:46px;
}

footer.main-footer .form-inline .contact-form input.form-control::placeholder {color:#999;}
footer.main-footer .form-inline .contact-form input.form-control:-ms-input-placeholder {color:#999;}
footer.main-footer .form-inline .contact-form input.form-control::-ms-input-placeholder {color:#999;}

footer.main-footer .form-inline .contact-form input.form-control:focus {
	border-color:#4b2e83;
}

footer.main-footer .form-inline .contact-form .form-group.has-error input.form-control {
	outline: 1px solid #b94a48 !important;
  border: 1px solid #b94a48 !important;
}

footer.main-footer .form-inline .contact-form .form-group.has-error input.form-control::placeholder {color:#b94a48;}
footer.main-footer .form-inline .contact-form .form-group.has-error input.form-control:-ms-input-placeholder {color:#b94a48;}
footer.main-footer .form-inline .contact-form .form-group.has-error input.form-control::-ms-input-placeholder {color:#b94a48;}

#ctl00_ctl00_FooterContent_pnlForm .row {
	padding:0;
	margin:0;
}

footer.main-footer .form-inline p,
footer.main-footer .social-footer .signup-container a {
	font-size:calc(11px + .05vw);
	line-height:1.5em;
}

#footer-form .form-group,
.consent div {
	display:block;
	padding:0 .3em;
	margin-bottom:0;
}

#footer-form .help-block.with-errors ul li {
	font-size:calc(10px + .2vw) !important;
}

#footer-form .btn-primary {
	line-height:1.5;
}

.fa-input {
  font-family: 'FontAwesome', sans-serif;
}
.fa.fa-question-circle {
	-webkit-appearance:none;
}

footer.main-footer .social-footer h4 {
	margin-bottom:.5em;
	font-family:'Open Sans';
}

@media (max-width: 767px) {
	footer.main-footer .social-footer .signup-container .contact-form {
		text-align:left;
	}
}

.btn.disabled {
    opacity:1;
    cursor:pointer;
    background-color:#4b2e83;
}

section.content-block div.col-md-4 img {
    width:auto;
    max-width:100%;
}
              
            
!

JS

              
                $(document).ready(function () {
	
	
		$('[data-toggle="tooltip"]').tooltip({
			trigger: "hover focus"
		}); 

    $('.areas-of-study').selectpicker({
        size: 'auto',
				noneResultsText: "No results. Give us a call if instead!"
    });

    $('.certificate-name').selectpicker({
        size: 'auto',
        iconBase: 'fa',
        tickIcon: 'fal fa-check',
        countSelectedText: function (numSelected, numTotal) {
            return (numSelected == 1) ? "{0} certificate selected" : "{0} certificates selected";
        },
				noneResultsText: "No results. Give us a call if instead!"
    });

    //suppresses mobile keyboard when livesearch + multiple
    $('.selectpicker[multiple]').data('selectpicker').$menuInner.on('click', 'li a', function () {
        $('.selectpicker[multiple]').data('selectpicker').$button.focus();
    });
	

//turn off validation while user is typing
    $('#rfi').validator().off('input.bs.validator change.bs.validator');
$('#ctl00_ctl00_FooterContent_updPnlFooterEmailSignup').validator().off('input.bs.validator change.bs.validator');

    //validate selectpicker on focusout
    $('.selectpicker').on('hide.bs.select', function () {
        $(this).trigger('focusout');
    });

	
    //custom checkbox
    var selectdate = function () {
        // GET THE INPUT
        var activeInput = $(this).children('input');

        //if child input is disabled, disable parent div
        if (activeInput.is(':disabled')) {
            this.css('pointer-events', 'none');
        }

        if (activeInput.is(':checked')) {
            // DESELECT IF ALREADY CHECKED
            $(activeInput).prop('checked', false);
        } else {
            // SELECT IF NOT CHECKED
            $(activeInput).prop('checked', true);
        }

        // IF RADIO REMOVE SELECTION FROM OTHER OPTIONS
        //if(activeInput.is('[type=radio]')){
        //var nonActiveInput = $(this).siblings().children('input');
        //$(nonActiveInput).prop('checked', false);}

        // If current year selected, disable past quarters

        var currentYear = '#' + (new Date).getFullYear();

        if ($(currentYear).prop('checked')) {
            $('.past').attr('disabled', true);
            $('.past').prop('checked', false);
        } else {
            $('.past').attr('disabled', false);
        }


        if ($('.past:checked').prop('checked')) {
            $(currentYear).attr('disabled', true);
            $(currentYear).prop('checked', false);
        } else {
            $(currentYear).attr('disabled', false);
        }

    };

    $('.custom-checkbox').click(selectdate);

    //accessibility: trigger click on spacebar
    $('.custom-checkbox').keypress(function (e) {
        if (e.which === 32) {
            this.click(selectdate);
        }
    });

    $("body").fadeIn(100);
});




// IF IE <9 
// REPLACE :checked WITH .checked
if ($.browser.msie && parseInt($.browser.version) < 9) {
    var inputs = $('.custom-checkbox input');
    inputs.live('change', function () {
        var ref = $(this),
            wrapper = ref.parent();
        if (ref.is(':checked')) wrapper.addClass('checked');
        else wrapper.removeClass('checked');
    });
    inputs.trigger('change');
}
              
            
!
999px

Console