/* Bespoke CSS for this blog article */


/* Begin CSS Overrides */

/* Use the i tag to style the "u" in "usecure" and un-bold it, matching the style of the usecure logo */
.call-to-action span.quote i {
    font-weight: 300;
    font-style: normal;
}

/* Remove top padding so that .blog-article-container-alt1 can be at the very top of the container */
.blog-article-container {
    padding-top: 0px;
    text-align: center;
}

/* Add top padding to H1s which are not in "-alt" containers */
.blog-article-container h1 {
    padding-top: 40px;
}

/* Colour the non-inverted fontawesome icons with usecure colours */
.fa-not-inverted {
    color: #1e7be4 !important;
}

/* Colour the buttons with usecure colours */
.btn-primary {
    border: 1px solid #00cc99;
    background-color: #00cc99;
    color: #ffffff;
}

    .btn-primary:active, .btn-primary:focus, .btn-primary:hover {
        color: #00cc99 !important;
    }

/* Re-align ULs left after general text has been aligned center */
.blog-article-container ul {
    text-align: left;
}

/* End CSS Overrides */


/* Begin page-specific CSS */

/* Alternative article block (at very top of container): Invert article colours (make it white on blue) */
.blog-article-container-alt1 {
    background-color: #1e7be4;
    color: white;
    margin-left: -20px;
    margin-right: -20px;
    padding-left: 20px;
    padding-right: 20px;
    padding-top: 40px;
    padding-bottom: 1rem;
    border-radius: 0px;
}

@media (min-width: 576px) {
    .blog-article-container-alt1 {
        margin-left: -40px;
        margin-right: -40px;
        padding-left: 40px;
        padding-right: 40px;
        border-radius: 16px 16px 0px 0px;
    }
}

    .blog-article-container-alt1 h1 {
        padding-top: 0px;
    }

/* Alternative article block: Invert article colours (make it white on blue) */
.blog-article-container-alt2 {
    background-color: #1e7be4;
    color: white;
    margin-left: -20px;
    margin-right: -20px;
    padding-left: 20px;
    padding-right: 20px;
    padding-top: 40px;
    padding-bottom: 1rem;
}

@media (min-width: 576px) {
    .blog-article-container-alt2 {
        margin-left: -40px;
        margin-right: -40px;
        padding-left: 40px;
        padding-right: 40px;
    }
}

    .blog-article-container-alt2 h1 {
        padding-top: 0px;
    }


.grid-container {
    padding-top: 1rem;
}

    .grid-container h3 {
        font-size: 1rem;
        font-weight: 600;
    }

    .grid-container p {
        font-size: 0.9rem;
    }

    .grid-container ul {
        display: inline-grid;
        font-weight: 600;
    }

    .grid-container li:not(:last-child) {
        margin-bottom: 0.3rem;
    }

.blog-hrr-cta-container p {
    font-size: 18px;
    line-height: 1.5;
}

.blog-demos-container div.col-md-6 {
    padding-left: 0px;
    padding-right: 0px;
    padding-bottom: 1rem;
}

.blog-demos-container h3 {
    font-style: italic;
    font-weight: 300;
}

.blog-hrr-example-report-container {
    border: #1e7be4 1px solid;
    margin-bottom: 32px !important;
}

    .blog-hrr-example-report-container p {
        font-size: 18px;
        line-height: 1.5;
    }

@media (min-width: 768px) {
    .blog-hrr-example-report-container {
        border: #00cc99 1px solid;
        padding: 32px;
    }
}

.usecure-logo-inverted {
    text-align: center;
    margin-bottom: 2rem;
}

    .usecure-logo-inverted img {
        height: 20px;
    }

.usecure-logo {
    text-align: center;
    margin-bottom: 2rem;
}

    .usecure-logo img {
        height: 20px;
    }

/* End page-specific CSS */