/*
Theme Name: Delaware State Police (DSP)
Theme URI: https://dsp.delaware.gov
Author: Delaware GIC - Matt Campbell & Julianne Solum
Author URI: https://gic.delaware.gov
Description: Custom WordPress theme designed for DSP
Version: CLF 4.0.1
Tags: Bootstrap, mobile first, State of Delaware
Text Domain: dosgic_DSP_theme
*/

/* ############################################################################################## */

/*  D E V E L O P E R   C U S T O M I Z A B L E   S T Y L E S  */
/*  State of Delaware - CLF4 2016  */
/*  Developed by the GIC (Matt Campbell & Julianne Solum)  */

/* ############################################################################################## */

/*==========  Bootstrap 3 Mobile First Method CSS  ==========*/

@font-face {
    font-family: 'CrilleeBT-Italic';
    font-weight: normal;
    font-style: normal;
    src: url('fonts/CrilleeBT-Italic.eot');
    src: url('fonts/CrilleeBT-Italic.eot?#iefix') format('embedded-opentype'), url('fonts/CrilleeBT-Italic.woff') format('woff'), url('fonts/CrilleeBT-Italic.ttf') format('truetype'), url('fonts/CrilleeBT-Italic.svg#CrilleeBT-Italic') format('svg');
}

/* Custom, iPhone Retina */
@media only screen and (min-width : 320px) {

    /* ============================= ELEMENTS ============================= */
    html {
        position: relative;

        min-height: 100%;

        -webkit-font-smoothing: antialiased !important;
    }

    body {
        font-family: 'Open Sans', sans-serif !important;
        font-size: 16px !important;
        font-weight: 400 !important;

        width: 100%;
        min-height: 100%;
        padding-bottom: 980px;

        word-break: break-word;

        -webkit-font-smoothing: antialiased !important;
    }

    /* ============================= ID's ============================= */

    /* BOOTSTRAP NAV-WALKER COMPENSATORY CSS  */
    /* ID OF BELOW SELECTOR WILL CHANGE BASED ON WEBSITE */
    #menu-dsp-main-navigation {
        z-index: 999;
    }

    .affix #menu-dsp-main-navigation {
        position: absolute !important;
    }

    #menu-line {
        position: absolute;
        top: 0;
        left: 0;

        height: 3px;

        -webkit-transition: all .25s ease-out;
        -moz-transition: all .25s ease-out;
        -ms-transition: all .25s ease-out;
        -o-transition: all .25s ease-out;
        transition: all .25s ease-out;

        background: #2762A0;
    }

    #main_header h1,
    #main_content h1 {
        font-family: 'Lato', sans-serif;
        font-size: 45px;
        margin-top: 10px;
        color: #121b4d !important;
        word-break: break-word;
    }

    #main_header h2,
    #main_content h2 {
        font-family: 'Lato', sans-serif !important;
        font-size: 32px;
        font-weight: 400;
        margin-top: 0;
        color: #2b6eb3;
    }

    #main_content h3 {
        font-family: 'Open Sans', sans-serif !important;
        font-size: 25px;
        margin-top: 0;
        color: #817259 !important;
    }

    #main_content h4 {
        font-family: 'Open Sans', sans-serif;
        font-size: 22px;
        margin-top: 0;
        font-weight: 700;
        color: #353f49;
    }

    #main_content h5 {
        font-family: 'Open Sans', sans-serif !important;
        font-size: 18px;
        margin-top: 0;
        font-weight: 800;
        color: #d7443a !important;
    }

    #main_content h6 {
        font-family: 'Open Sans', sans-serif !important;
        font-size: 18px;
        margin-top: 0;
        font-weight: 800;
        color: #ffb901 !important;
    }

    #main_content a,
    #main_content a:link,
    #main_content a:active,
    #main_content a:visited {
        text-decoration: none;
        color: #006eb9;
    }

    #main_content a:hover {
        color: #003a62;
    }

    #main_content ul,
    #main_content ol {
        font-size: .9em;
        line-height: 2.1em;

        margin-top: 1.0em;
        margin-bottom: 1.0em;
    }

    #loading1 {
        width: 100px;
        margin-right: auto;
        margin-left: auto;
    }

    #loading2 {
        width: 100px;
        margin-right: auto;
        margin-left: auto;
    }

    #headerImage {
        height: 225px;
        width: 100%;
        background-repeat: no-repeat;
        background-size: cover;
        background-position: 50%;
        position: relative;
        border-bottom: 3px solid #006eb9;
    }

    #headerImage a,
    #headerImage a:link,
    #headerImage a:active,
    #headerImage a:visited {
        color: #fff;
        text-decoration: none;
    }

    #headerImage a:hover {
        color: #fff;
        text-decoration: underline;
    }

    #agencyFooter {
        font-size: 15px;
        line-height: 1.5em;

        position: absolute;
        z-index: 1029;
        bottom: 0;

        width: 100%;
        height: 494px;
        padding-top: 30px;
        padding-bottom: 2.0em;

        color: #fff;
        border-bottom: 10px solid #245194;
        background-color: #1e3350;
    }

    @-moz-document url-prefix() {
        #agencyFooter {
            height: 495px;
        }
    }

    #agencyFooter a,
    #agencyFooter a:link,
    #agencyFooter a:active,
    #agencyFooter a:visited {
        text-decoration: none;

        color: #FFF;
    }

    #agencyFooter a:hover {
        text-decoration: underline;

        color: #f7b92d;
    }

    #agencyFooter ul {
        margin-left: -38px;

        list-style-type: none;
    }

    /* ============================= Classes ============================= */


    /* WordPress Core CSS */
    .alignnone {
        margin: 5px 20px 20px 0;
    }

    .aligncenter,
    div.aligncenter {
        display: block;

        margin: 5px auto 5px auto;
    }

    .alignright {
        float: right;

        margin: 5px 0 20px 20px;
    }

    .alignleft {
        float: left;

        margin: 5px 20px 20px 0;
    }

    a img.alignright {
        float: right;

        margin: 5px 0 20px 20px;
    }

    a img.alignnone {
        margin: 5px 20px 20px 0;
    }

    a img.alignleft {
        float: left;

        margin: 5px 20px 20px 0;
    }

    a img.aligncenter {
        display: block;

        margin-right: auto;
        margin-left: auto;
    }

    .wp-caption {
        max-width: 96%;
        /* Image does not overflow the content area */
        padding: 5px 3px 10px;

        text-align: center;

        border: 1px solid #f0f0f0;
        background: #fff;
    }

    .wp-caption.alignnone {
        margin: 5px 20px 20px 0;
    }

    .wp-caption.alignleft {
        margin: 5px 20px 20px 0;
    }

    .wp-caption.alignright {
        margin: 5px 0 20px 20px;
    }

    .wp-caption img {
        width: auto;
        max-width: 98.5%;
        height: auto;
        margin: 0;
        padding: 0;

        border: 0 none;
    }

    .wp-caption p.wp-caption-text {
        font-size: 11px;
        line-height: 17px;

        margin: 0;
        padding: 0 4px 5px;
    }

    .screen-reader-text {
        position: absolute !important;

        overflow: hidden;
        clip: rect(1px, 1px, 1px, 1px);

        width: 1px;
        height: 1px;
    }

    .screen-reader-text:focus {
        font-size: 14px;
        font-size: .875rem;
        font-weight: bold;
        line-height: normal;

        z-index: 100000;
        /* Above WP toolbar */
        top: 5px;
        left: 5px;

        display: block;
        clip: auto !important;

        width: auto;
        height: auto;
        padding: 15px 23px 14px;

        text-decoration: none;

        color: #21759b;
        border-radius: 3px;
        background-color: #f1f1f1;
        box-shadow: 0 0 2px 2px rgba(0, 0, 0, .6);
    }

    img.alignright {
        float: right;

        margin: 0 0 1em 1em;
    }

    img.alignleft {
        float: left;

        margin: 0 1em 1em 0;
    }

    img.aligncenter {
        display: block;

        margin-right: auto;
        margin-left: auto;
    }

    .alignright {
        float: right;
    }

    .alignleft {
        float: left;
    }

    .aligncenter {
        display: block;

        margin-right: auto;
        margin-left: auto;
    }

    /* End WP Core Classes */


    .agencyFooter_logo {
        width: 100px;
        height: 100px;

        text-align: center;

        border: none;
    }

    .anchors {
        margin-top: -100px;
        /* Size of fixed header */
        padding-bottom: 100px;
        display: block;
    }

    .noshow {
        display: none;
    }

    hr.clf {
        margin-top: 20px;
        margin-bottom: 20px;

        border: 1px solid #d1e5f2;
        border-image: none;

        -moz-border-bottom-colors: none;
        -moz-border-left-colors: none;
        -moz-border-right-colors: none;
        -moz-border-top-colors: none;
    }

    hr.gray {
        margin-top: 20px;
        margin-bottom: 20px;

        border: 1px solid #e9eae5;
        border-image: none;

        -moz-border-bottom-colors: none;
        -moz-border-left-colors: none;
        -moz-border-right-colors: none;
        -moz-border-top-colors: none;
    }

    .float-left {
        float: left;
        margin-right: 10px;
    }

    .border_none {
        border: none;
    }

    .dspTitle {
        background-color: #1e3350;
        padding-top: 30px !important;
        padding-bottom: 30px !important;
    }

    .dspTitle-interior {
        background-color: #1e3350;
        padding-top: 30px !important;
        padding-bottom: 30px !important;
        font-family: 'CrilleeBT-Italic', sans-serif !important;
    }

    .dspTitle h1 {
        color: #f7b92d;
        font-size: 54px;
        font-family: 'CrilleeBT-Italic', sans-serif !important;
        text-align: center;
    }

    .dspTitle-interior h1 {
        color: #f7b92d !important;
        font-size: 54px;
        font-family: 'CrilleeBT-Italic', sans-serif !important;
        text-align: center;
    }

    .agency-badge {
        width: 75px;
    }

    .interiorTitle {
        font-family: 'Open Sans', sans-serif;
        font-size: 25px;
        line-height: 1.1;

        padding-top: 15px !important;
        padding-bottom: 15px !important;

        color: #f5891f;
        background-color: #fff;
        border-bottom: 5px solid #f5891f;
    }

    .interior-title-wrapper {
        margin-top: 0;

        background-color: #fff;
    }

    .mission {
        border-bottom: 3px solid #006eb9;
        color: #1e3350;
    }

    .mission p {
        font-family: 'Lato', sans-serif;
        font-size: 32px;
        color: #1e3350;
    }


    .mission img {
        max-width: 150px;
        margin-top: 2em;
    }

    @media screen and (min-width: 768px) {
        .mission img {
            max-width: 200px;
            margin-top: 0;
        }
    }

    .uniform-blue {
        color: #006eb9;
    }

    .topic-cards {
        background-color: #f4f4f4;
        border-bottom: 3px solid #006eb9;
    }

    .topicBlock {
        width: 95%;
        margin-top: 15px;
        margin-left: 10px;
        margin-bottom: 15px;
        border: 3px solid #006eb9;
        background: #FFF;
        padding: 10px;
        overflow: hidden;
        box-shadow: 2px 2px 2px #939393;
    }

    a.topicTitle {
        color: #121950;
        font-family: 'Lato', sans-serif;
        font-size: 32px !important;
        text-align: center !important;
        cursor: pointer;
    }

    .topicBlock p {
        font-size: 18px;
        line-height: 2;
    }

    .topic-icon {
        height: 100px;
    }

    .btn-danger a {
        font-size: 18px !important;
        color: #FFF !important;
    }

    .btn-danger {
        font-size: 18px !important;
        color: #FFF !important;
    }

    .featured-services h2 {
        color: #FFF !important;
        background-color: #006eb9 !important;
        padding: 35px;
    }

    a.serviceTitle {
        color: #121950;
        font-family: 'Lato', sans-serif;
        font-size: 28px !important;
        text-align: center !important;
        cursor: pointer;
    }

    .news h2 {
        color: #FFF !important;
        background-color: #006eb9 !important;
        padding: 35px;
    }

    .professional-licensing {
        background-color: #f6f6f6;
        /*padding:55px;*/
        border-bottom: 3px solid #006eb9;
    }

    .call-out {
        background-color: #FFF;
        padding: 35px;
        border: 2px solid #006eb9;
        border-radius: 0;
    }

    .call-out h2 {
        color: #006eb9 !important;
    }

    .news .date {
        color: #866F5B;
        font-style: italic;
    }

    .news {
        border-bottom: 3px solid #006eb9;
    }

    .message {
        background-color: #006eb9 !important;
        padding: 25px;
    }

    .message a {
        color: #FFF !important;
    }

    .message a:hover {
        text-decoration: underline !important;
    }

    .message p {
        line-height: 2;
        color: #FFF;
    }

    .message h2 {
        color: #FFF !important;
    }

    .stats {
        background-color: #d7443a;
        color: #FFF;
        padding: 35px;
        padding-bottom: 95px;
    }

    .stats p {
        font-family: 'Lato', sans-serif;
        font-size: 53px !important;
    }

    .stats h4 {
        font-family: 'Lato', sans-serif !important;
        font-size: 26px !important;
        color: #FFF !important;
    }

    .tan-outline {
        border: 2px solid #817259;
        padding: 15px;
    }

    .interior-wrapper {
        padding-bottom: 85px;
    }

    /**************** NEWSROOM BLOG STYLES ****************/
    .newsroom .panel-title {
        font-size: 26px !important;
    }

    .newsroom .panel-default {
        /*border:2px solid #1e3350;*/
        border-radius: 0;
        margin-bottom: 40px;
        margin-right: 10px;
        margin-left: 10px;
    }

    .newsroom .panel-default>.panel-heading {
        border-radius: 0;
        background-color: #fbfeff;
    }

    .newsroom-contact {
        margin-top: 18px;
    }

    .sidebar-badge {
        width: 75px;
        padding-top: 10px;
    }

    .newsroom-contact h4 {
        font-size: 22px !important;
        text-align: center;
        line-height: 28px;
        color: #f7b92d !important;
        background-color: #1e3350;
        padding: 15px;
    }

    .newsroom-sidebar {
        margin-top: -30px;
        /*margin-left:-15px;*/
    }

    .newsroom-sidebar h4 {
        font-size: 22px !important;
        text-align: center;
        line-height: 28px;
        color: #f7b92d !important;
        background-color: #1e3350;
        padding: 15px;
    }

    select#archives-dropdown-3 {
        width: 100%;
    }

    .newsroom-sidebar button,
    .newsroom-sidebar input,
    .newsroom-sidebar select,
    .newsroom-sidebar textarea {
        /*width:100%;*/
        font-family: 'Lato', sans-serif;
        color: #1e3350;
        font-size: 18px;
        height: 45px;
    }

    .newsroom-sidebar ul {
        list-style: none;
        margin-top: -25px !important;
    }

    li.cat-item.cat-item-232 {
        margin-bottom: 55px;
    }

    .newsroom-sidebar ul li.cat-item :before {
        font-family: 'Font Awesome 5 Solid';
        content: '\f0da';
        display: none;
    }

    .newsroom-sidebar ul li.cat-item {
        font-size: 16px;
        padding-bottom: 10px;
        padding-top: 10px;
        border-bottom: 2px solid #ddeff6;
        margin-left: -35px;
    }

    .newsroom-sidebar ul li.cat-item .svg-inline--fa {
        color: #f9ba17;
        font-size: 16px;
        margin: 0 5px 0 0px;
    }

    .st_prepend {
        font-size: 22px !important;
        text-align: center;
        line-height: 28px;
        color: #f7b92d !important;
        background-color: #1e3350;
        padding: 15px;
        font-weight: bold;
    }

    form#st_subscribe_form {
        margin-top: 7px;
    }

    .wp-post-image {
        margin-bottom: 45px;
        margin-top: 15px;
    }

    .news-date {
        color: #1e3350;
    }

    /**************** /END OF NEWSROOM BLOG STYLES ****************/

    .modal {
        z-index: 3000;
    }

    .jumbo {
        font-size: 40px;
    }

    .noshow {
        display: none;
    }
}


/* Extra Small Devices, Phones */
@media only screen and (min-width : 480px) {
    /* ============================= ELEMENTS ============================= */

    /* ============================= ID's ============================= */

    /* ============================= Classes ============================= */

}

/* Small Devices, Tablets */
@media only screen and (min-width : 768px) {
    /* ============================= ELEMENTS ============================= */

    /* ============================= ID's ============================= */
    #headerImage {
        height: 450px;
        width: 100%;
        background-repeat: no-repeat;
        background-size: cover;
        background-position: 50%;
        position: relative;
    }

    #agencyFooter {
        height: 210px;
        padding-top: 2.0em;
        padding-bottom: 2.0em;
    }

    @-moz-document url-prefix() {
        #agencyFooter {
            height: 210px;
        }
    }

    /* ============================= Classes ============================= */
    .dspTitle {
        text-align: center;
    }

    .dspTitle-interior {
        text-align: center;
        font-family: 'CrilleeBT-Italic', sans-serif !important;
    }

    .dspTitle h1 {
        font-size: 54px;
        padding-top: 15px;
    }

    .dspTitle-interior h1 {
        font-size: 54px;
        padding-top: 15px;
        color: #f7b92d !important;
        font-family: 'CrilleeBT-Italic', sans-serif !important;
    }

    .agency-badge {
        width: 125px;
        margin-right: 0px;
        float: left;
    }

    .topicBlock {
        width: 32%;
        height: 675px !important;
    }

    .small-top {
        font-size: 22px;
        color: #fff;
        line-height: 30px;
    }

    .stats {
        margin-bottom: -105px;
        padding-bottom: 45px;
    }
}

/* Medium Devices, Desktops */
@media only screen and (min-width : 992px) {
    /* ============================= ELEMENTS ============================= */

    /* ============================= ID's ============================= */
    #headerImage {
        height: 450px;
        width: 100%;
        background-repeat: no-repeat;
        background-size: cover;
        background-position: 50%;
        position: relative;
    }

    #agencyFooter {
        font-size: 15px;
        line-height: 1.5em;

        position: absolute;
        z-index: 1029;
        bottom: 0;

        width: 100%;
        height: 192px;
        padding-top: 2.0em;
        padding-bottom: 2.0em;

        color: #fff;
        border-bottom: 10px solid #245194;
        background-color: #1e3350;
    }

    @-moz-document url-prefix() {
        #agencyFooter {
            height: 192px;
        }
    }

    /* ============================= Classes ============================= */
    .dspTitle {
        text-align: center;
    }

    .dspTitle h1 {
        color: #f7b92d;
        font-size: 72px;
        font-family: 'CrilleeBT-Italic', sans-serif !important;
        text-align: center;
        padding-top: 15px;
    }

    .dspTitle-interior {
        text-align: center;
        font-family: 'CrilleeBT-Italic', sans-serif !important;
    }

    .dspTitle-interior h1 {
        font-size: 72px;
        color: #f7b92d !important;
        font-family: 'CrilleeBT-Italic', sans-serif !important;
        text-align: center;
        padding-top: 15px;
    }

    .agency-badge {
        width: 135px;
        margin-right: 0px;
        float: left;
    }

    .topicBlock {
        width: 32%;
        height: 550px !important;
    }

    .small-top {
        font-size: 20px;
        color: #fff;
        line-height: 40px;
    }

    .stats {
        margin-bottom: -60px;
        padding-bottom: 45px;
    }
}

/* Large Devices, Wide Screens */
@media only screen and (min-width : 1200px) {
    /* ============================= ELEMENTS ============================= */

    /* ============================= ID's ============================= */
    #headerImage {
        height: 775px;
        width: 100%;
        background-repeat: no-repeat;
        background-size: cover;
        background-position: 50%;
        position: relative;
    }

    #agencyFooter {
        font-size: 15px;
        line-height: 1.5em;

        position: absolute;
        z-index: 1029;
        bottom: 0;

        width: 100%;
        height: 192px;
        padding-top: 2.0em;
        padding-bottom: 2.0em;

        color: #fff;
        border-bottom: 10px solid #245194;
        background-color: #1e3350;
    }

    @-moz-document url-prefix() {
        #agencyFooter {
            height: 192px;
        }
    }

    /* ============================= Classes ============================= */
    .dspTitle {
        font-family: 'CrilleeBT-Italic', sans-serif !important;
    }

    .dspTitle h1 {
        color: #f7b92d;
        font-size: 72px;
        font-family: 'CrilleeBT-Italic', sans-serif !important;
        text-align: center;
        padding-top: 15px;
    }

    .dspTitle-interior {
        font-family: 'CrilleeBT-Italic', sans-serif !important;
    }

    .dspTitle-interior h1 {
        color: #f7b92d !important;
        font-size: 72px;
        font-family: 'CrilleeBT-Italic', sans-serif !important;
        text-align: center;
        padding-top: 15px;
    }

    .agency-badge {
        width: 145px;
        margin-right: -175px;
        float: left;
    }

    .topicBlock {
        width: 32%;
        height: 500px !important;
    }

    .small-top {
        font-size: 25px;
        color: #fff;
        line-height: 40px;
    }

    .stats {
        margin-bottom: -58px;
        padding-bottom: 45px;
    }
}

.current-cat {
    background-color: #fffde8;
}

/* ============================= CUSTOM MEDIA QUERIES ============================= */
@media (max-width: 874px) {
    .menu_text {
        font-size: 20px;
        font-weight: bold;

        position: absolute;

        margin-top: -44px;
        margin-left: 60px;

        opacity: 1;
        color: #2762A0;
    }
}

@media (min-width: 875px) {
    .menu_text {
        font-size: 20px;
        font-weight: bold;

        position: absolute;

        margin-top: -44px;
        margin-left: 60px;

        opacity: 0;
        color: #2762A0;
    }
}

@media (min-width: 1100px) {
    .menu_text {
        font-size: 20px;
        font-weight: bold;

        position: absolute;

        margin-top: -100px;
        margin-left: 60px;

        opacity: 0;
        color: #2762A0;
    }
}

@media (min-width: 1300px) {
    .menu_text {
        font-size: 20px;
        font-weight: bold;

        position: absolute;

        margin-top: -100px;
        margin-left: 60px;

        opacity: 0;
        color: #2762A0;
    }
}

/* ============================= END CUSTOM MEDIA QUERIES ============================= */

/* Bootstrap overrides for color contrast accessibility */
.label-success {
    background-color: #477C41;
}

.btn-warning {
    background-color: #f7b92d;
    border-color: #f7b92d;
}

.message a.btn-warning {
    color: #1e3350 !important;
}

/* Newsroom custom footer for all posts */
#news-post-footer {
    border-top: 3px solid #D6E4EB;
    padding-top: 50px;
}

#news-post-footer a {
    font-weight: bold;
    text-decoration: underline !important;
}

#news-post-footer h2 {
    color: #121B4D;
    font-size: 24px;
}

#news-post-footer ul {
    list-style: none;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    line-height: 3.1em;
}

@media (min-width: 768px) {
    #news-post-footer ul {
        flex-direction: row;
    }
}

#news-post-footer li {
    padding: 20px;
}

#news-post-footer #social-links i {
    font-size: 47px;
}

#news-post-footer .fa-facebook-square {
    color: #4267B2;
}

#news-post-footer .fa-twitter-square {
    color: #26A7DE;
}

#news-post-footer .nextdoor-logo {
    height: 47px;
    width: 47px;
    margin-bottom: 7px;
}

#news-post-footer .fa-youtube-square {
    color: #E62117;
}

#news-post-footer .social-name {
    font-size: 22px;
}

#news-post-footer #cta-row {
    background: #FAFAFA;
    margin-bottom: 30px;
    padding: 35px;
}

@media (max-width: 991px) {
    #news-post-footer #cta-row .col-md-4 {
        margin-bottom: 30px;
        text-align: center;
    }
}

#news-post-footer #cta-row i {
    font-size: 57px;
    margin: 8px 0;
}

#news-post-footer #sponsors-row {
    margin-top: 20px;
}

/*** Flex utilities for automatically setting card row height based on the card with the longest content ***/
@media only screen and (min-width: 992px) {

    .flex-cards,
    .flex-card {
        display: flex;
    }

    .flex-card .panel {
        flex-grow: 1;
    }
}

/* Spacing Utilities */
.py-3 {
    padding-top: 3em;
    padding-bottom: 3em;
}