@charset "UTF-8";
/**
 * Author: Michael James Huss
 * Date: September 23, 2015
 * Purpose: Adds responsive styles to the two column HubSpot templates.
 * Notes: To calculate EM "M" and I used a PX to EM calculator located here http://pxtoem.com/ with a base of 16px
 * The Social Media overrides provided by HubSpot can be found at http://inbound.org/discussion/view/customizing-follow-me-and-social-sharing-module-icons-with-css
 * Validation: This has been successfully validated using http://jigsaw.w3.org/css-validator/#validate_by_uri
 *
 *
 *  [ Media query table of contents ]
 *
 *  01. Tablets
 *  02. Phones
 *
 *  [ Section table of contents ]
 *
 * 01. Hero
 * 02. Bottom Header
 * 03. Content
 * 04. HubSpot Form
 * 05. Social Media
 * 05. Footer
 *
 */

/*************************
 * 01. Tablets
 *************************/
@media screen and ( max-width: 62.000em ) {

    /* 01. Hero */

    /* 02. Bottom Header */

    /* 03. Content Styles */
    #content h1, h2, h3, h4, h5, h6 {
        display: block;
        text-align: left;
        padding: 0 0 0.313em 0!important;
    }

    #content p {
        text-align: left;
        line-height: 1.750em;
        padding: 0 1.250em 0.313em 0;
    }

    #content ul {
        padding-bottom: 0.313em;
    }

    #content .pull-left{
        float: left !important;
        display: block;
        margin: 0 auto;
        padding: 0.625em 0.625em 0.625em 0.625em;
    }

    .img-center {
        float: left !important;
        display: block;
        padding: 0.625em;
    }


    /* 04. HubSpot Form */
    .panel-default {
        margin: 1.563em auto 0 auto;
    }

    h3.form-title {
        color: #FFF;
        text-align: center !important;
        text-transform: none;

        font-size: 1.500em !important;
        font-weight: bold !important;

        margin-top: 0.750em !important;
        padding: 0 0 0.938em 0!important;
    }

    input.hs-input, select.hs-input {
        width: 100%;
        height: 2.857em !important;
        font-size: 1.000em !important;
        padding: 0.750em 2.250em 0.750em 0.938em !important;
        margin: 0 auto !important;#
        display: inline-block !important;
    }

    /* 05. Social Media */


    /* 06. Footer */
    .usf-logo {
        width: auto;
    }

    #footer .pull-left {
        float: none !important;
        display: block;
        margin: 0 auto;
        padding: 0.625em;
    }

    #footer .pull-right {
        float: none !important;
        display: block;
        margin: 0 auto;
        padding: 0.625em;
    }
}


/*************************
 * 02. Phones
 *************************/
@media screen and (max-width: 40.571em) {

    /* 01. Hero */
/*     #hero {
        display: none;
    } */

    /* 02. Bottom Header */
    #bottom-header article {
        padding-left: 0;
    }

    /* 03. Content */
    .img-center {
        float: left !important;
        display: block;
        padding: 0 0.313em 0 0;
    }

    #content h1, h2, h3, h4, h5, h6 {
        display: block;
        text-align: left;
        padding: 0.625em 0 0.625em 0 !important;
    }

    #content p {
        text-align: left;
        line-height: 1.750em;
        padding: 0.313em 0 0.313em 0;
    }

    /* 04. HubSpot Form */
    .panel-default {
        margin: 1.563em auto 0 auto;
    }

    h3.form-title {
        color: #FFF;
        text-align: center !important;
        text-transform: none;

        font-size: 1.500em !important;
        font-weight: bold !important;

        margin-top: 0.375em !important;
        padding-bottom: 0.938em !important;
    }

    input.hs-input, select.hs-input {
        width: 100%;
        height: 2.857em !important;
        font-size: 1.000em !important;
        padding: 0.750em 0.938em 0.750em 0.938em !important;
        margin: 0 auto !important;
        display: inline-block !important;
    }

    /* 05. Social Media */


    /* 05. Footer */
    #footer .pull-left {
        float: none !important;
        display: block;
        margin: 0 auto;
        padding: 0.625em;
    }

    #footer .pull-right {
        float: none !important;
        display: block;
        margin: 0 auto;
        padding: 0.625em;
    }
}