@import url('https://fonts.googleapis.com/css?family=Lato:700,900');

/*
NOTE: I used the !important's because of time-constraints.
Later when we merge this to our core stylesheets we can get rid of them and cascade properly.

BG: #FFFFFF (white)
Primary Blue (MAIN): #2196F3
Dark Primary Blue (Footer): #1E88E5
Dark Gray-Blue Font: #172F59 (MEANT FOR NAVBAR ONLY)
Light Gray-Blue: #3E5274 (THIS IS USED FOR ALL NON-NAVBAR TEXT)
Red: #F44336 (CTAs/Attention-grabbers) - Use sparingly or else it gets washed out
 */

/**
Grid and margins/paddings
 */
.b2b-navbar {
    padding-top: 8px;
    padding-bottom: 16px;
}

.b2b-container-no-padding {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

.container-600  {
    max-width: 600px;
}

.container-750  {
    max-width: 750px;
}

.container-800 {
    max-width: 800px;
}

.container-900  {
    max-width: 900px;
}

.container-1000  {
    max-width: 1000px;
}

.container-1100  {
    max-width: 1100px;
}


/**
Typography / Colors
 */
.hero h1 {
    font-size: 50px !important;
}

.b2b-post-hero-triple img {
    max-width: 150px !important;
    max-height: 150px !important;
}

.b2b-post-hero-triple {
    color: #FFFFFF !important;
}

.b2b-post-hero-triple h3 {
    font-weight: 700;
}

.b2b-post-hero-triple h4 {
    line-height: 28px !important;
}

.b2b-9-grid img {
    max-width: 120px !important;
    max-height: 120px !important;
}

.b2b-9-grid {
    color: #3E5274 !important;
    padding-left: 36px;
    padding-right: 36px;
}

.b2b-9-grid h3 {
    color: #2196F3 !important;
    font-weight: 700;
}

.b2b-9-grid h4 {
    line-height: 24px !important;
}

.b2b-gray-blue {
    font-weight: 900 !important;
    color: #172F59 !important;
}

.b2b-4-grid img {
    max-width: 150px !important;
    max-height: 150px !important;
}

.b2b-4-grid {
    color: #3E5274 !important;
    padding-left: 64px;
    padding-right: 64px;
}

.b2b-4-grid h3 {
    color: #2196F3 !important;
    font-weight: 700;
}

.b2b-4-grid h4 {
    line-height: 24px !important;
}

.b2b-co-founders {
    color: #3E5274 !important;
    text-align: left;
}

.b2b-co-founders img {
    max-height: 180px;
    max-width: 180px;
}

.b2b-co-founders h3 {
    font-size: 20px !important;
    font-weight: 700;
}

.b2b-co-founders h3 + h3 {
    font-size: 20px !important;
    font-weight: 700;
}

.b2b-co-founders h4 {
    font-size: 20px !important;
    line-height: 28px !important;
}

.b2b-backstory-block p {
    text-indent: 48px;
    color: white !important;
    font-size: 20px !important;
    line-height: 28px !important;
    font-weight: 500 !important;
    text-align: left;
    margin-bottom: 24px !important;
}

.b2b-security-3 img {
    max-height: 180px;
    max-width: 180px;
}

.b2b-security-3 h3 {
    color: #2196F3 !important;
    font-weight: 700 !important;
    font-size: 28px !important;
    text-align: left !important;
}

.b2b-security-3 p {
    color: #3E5274 !important;
    font-weight: 500 !important;
    font-size: 18px !important;
    text-align: left !important;
}

.b2b-cta-nav {
    margin-left: 8px !important;
    margin-top: 8px !important;
    margin-bottom: 8px !important;
    padding-top: 8px !important;
    padding-bottom: 8px !important;
    padding-left: 24px !important;
    padding-right: 24px !important;
    background-color: #F44336 !important;
    color: #FFFFFF !important;
}

.b2b-red-button {
    padding-top: 8px !important;
    padding-bottom: 8px !important;
    padding-left: 24px !important;
    padding-right: 24px !important;
    background-color: #F44336 !important;
    color: #FFFFFF !important;
    border-radius: 0 !important;
    font-weight: 900;
}

.b2b-red-button--wide {
    padding-left: 64px !important;
    padding-right: 64px !important;
}

.b2b-red-button--hero {
    margin-bottom: 12px !important;
}

.b2b-blue-container {
    background-color: #2196F3;
}

.b2b-dark-blue-container {
    background-color: #1E88E5;
}

.b2b-blue-header {
    color: #2196F3 !important;
    font-size: 40px !important;
    font-weight: 700 !important;
}

.b2b-hero-sub-header {
    padding-left: 64px;
    padding-right: 64px;
}

.b2b-blue-header-group {
    color: #FFFFFF !important;
}

.b2b-blue-header-group h1 {
    font-size: 50px;
    font-weight: 700 !important;
}

.b2b-blue-header-group h3 {
    font-weight: 700 !important;
}

.b2b-white-header {
    color: #FFFFFF !important;
    font-weight: 700 !important;
    font-size: 40px !important;
    padding-left: 100px;
    padding-right: 100px;
}

.b2b-gray-blue-header {
    font-weight: 700 !important;
    color: #3E5274 !important;
    font-size: 24px !important;
}

.b2b-green-check {
    margin-top: 4px;
    margin-bottom: 4px;
    max-width: 28px;
}

.b2b-white-link {
    font-size: 20px;
    color: white;
}

.b2b-logo {
    margin-left: 16px !important;
    height: 50px !important;
    width: 170px !important;
}

.b2b-table td {
    color: #172F59;
    font-size: 20px;
}

.b2b-table th {
    background-color: #2196F3;
    font-size: 20px;
    color: white;
    text-align: center;
}

.b2b-footer {
    font-weight: 700;
    color: white !important;
    text-align: left !important;
}

.b2b-footer p {
    font-size: 16px;
}

.b2b-footer .follow-us {
    font-size: 20px !important;
}

.b2b-social-media-icon {
    max-width: 32px;
    margin-right: 4px;
    max-height: 32px;
}

.b2b-benefits-group {
    text-align: left !important;;
    color: white;
}

.b2b-benefits-group img {
    max-width: 120px !important;
    max-height: 120px !important;
}

.b2b-benefits-group h5 {
    padding-top: 32px;
    font-size: 24px !important;
    font-weight: 700;
}

.b2b-benefits-group p {
    padding-top: 4px;
    font-size: 20px !important;
}

.b2b-form label {
    color: white;
    font-size: 16px !important;
    font-weight: 700 !important;
    text-align: left !important;
}

.b2b-form p {
    font-size: 16px !important;
    color: white;
}

.b2b-form h3 {
    font-size: 20px !important;
    font-weight: 700;
    color: white;
    padding-bottom: 8px;
}

.b2b-btn {
    padding-top: 8px !important;
    padding-bottom: 8px !important;
    padding-left: 64px !important;
    padding-right: 64px !important;
    background-color: #F44336 !important;
    color: #FFFFFF !important;
    border-radius: 0 !important;
    font-weight: 900;
}

/* For blog */
.panel-heading {
    background-color: #42a5f5 !important;
    color: white !important;
}

/* For blog */
.panel-heading small {
    color: white !important;
}

.blog-main-wrapper h2 {
    margin-top: 32px !important;
    margin-bottom: 16px !important;
}

.blog-main-wrapper p {
    line-height: 28px;
    margin-bottom: 20px;
}

.blog-main-wrapper li {
    line-height: 28px;
}





/**
Random helpers
 */
.spacer-top-100 {
    margin-top: 100px;
}

.spacer-bottom-100 {
    margin-bottom: 100px;
}

.spacer-bottom-120 {
    margin-bottom: 120px;
}

.spacer-bottom-140 {
    margin-bottom: 140px;
}

.spacer-bottom-200 {
    margin-bottom: 200px;
}

.spacer-top-20 {
    margin-top: 20px;
}

.spacer-bottom-28 {
    margin-bottom: 28px;
}

.spacer-bottom-20 {
    margin-bottom: 20px;
}

.spacer-top-48 {
    margin-top: 48px;
}

.spacer-top-64 {
    margin-top: 64px;
}

.spacer-bottom-32 {
    margin-bottom: 32px;
}

.spacer-bottom-28 {
    margin-bottom: 28px !important;
}

.spacer-top-28 {
    margin-top: 28px !important;
}

.spacer-bottom-48 {
    margin-bottom: 48px;
}

.b2b-full-width {
    margin-left: -20px;
    margin-right: -20px;
}

/**
    TODO: We need to start using SASS/LESS/PostCSS to help us with this kind of stuff.
 */

/**
    Medium tablet display
 */
@media (max-width: 992px ) {
    .hero h1 {
        font-size: 42px !important;
    }

    .b2b-hero-sub-header {
        font-size: 20px !important;
    }

    .b2b-red-button--hero {
        margin-bottom: 32px !important;
    }

    .b2b-white-header {
        font-size: 36px !important;
    }

    .b2b-blue-header {
        font-size: 36px !important;
    }

    .b2b-gray-blue-header {
        font-size: 20px !important;
        padding-left: 80px;
        padding-right: 80px;
    }

    .b2b-benefits-group p {
        font-size: 18px !important;
    }

    .b2b-security-3 img {
        display: none;
    }

    .b2b-security-3 h3 {
        text-align: center !important;
        padding-left: 80px;
        padding-right: 80px;
    }

    .b2b-security-3 p {
        text-align: center !important;
        padding-left: 80px;
        padding-right: 80px;
    }

    .b2b-co-founders h3 {
        font-size: 20px !important;
    }

    .b2b-co-founders h3 + h3 {
        font-size: 20px !important;
        font-weight: 700;
    }

    .b2b-co-founders h4 {
        font-size: 18px !important;
    }
}

/**
    Small mobile display
 */
@media (max-width: 768px ) {
    .hero h1 {
        font-size: 36px !important;
    }

    .b2b-hero-sub-header {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    .b2b-red-button--wide {
        padding-left: 36px !important;
        padding-right: 36px !important;
    }

    .b2b-red-button--hero {
        margin-bottom: 48px !important;
    }

    .b2b-white-header {
        font-size: 32px !important;
        padding-left: 16px;
        padding-right: 16px;
    }

    .b2b-blue-header {
        font-size: 32px !important;
        padding-left: 16px;
        padding-right: 16px;
    }

    .b2b-gray-blue-header {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    .b2b-benefits-group {
        text-align: center !important;;
    }

    .b2b-benefits-group img {
        margin-bottom: 8px !important;
    }

    .b2b-benefits-group h5 {
        padding-top: 8px !important;
    }

    .b2b-benefits-group p {
        margin-bottom: 48px;
        padding-left: 32px;
        padding-right: 32px;
    }

    .b2b-9-grid h4 {
        font-size: 18px !important;
        padding-left: 32px;
        padding-right: 32px;
    }

    .b2b-security-3 h3 {
        font-size: 24px !important;
        text-align: center !important;
        padding-left: 24px;
        padding-right: 24px;
    }

    .b2b-security-3 p {
        font-size: 16px !important;
        text-align: center !important;
        padding-left: 24px;
        padding-right: 24px;
    }

    .b2b-co-founders {
        text-align: center !important;
    }

    .b2b-co-founders img {
        margin-bottom: 0px;
    }

    .b2b-co-founders h3 {
        font-size: 20px !important;
        font-weight: 700;
    }

    .b2b-co-founders h3 + h3 {
        font-size: 20px !important;
        font-weight: 700;
    }

    .b2b-co-founders h4 {
        font-size: 18px !important;
        line-height: 28px !important;
        padding-left: 24px;
        padding-right: 24px;
        margin-bottom: 32px !important;
    }

    .b2b-backstory-block p {
        font-size: 18px !important;
        line-height: 28px !important;
        margin-bottom: 24px !important;
    }
}