/*em based breakpoints*/
/*
@media (min-width: 34em) {}
@media (min-width: 48em) {}
@media (min-width: 62em) {}
@media (min-width: 75em) {}
*/
html {
   background-color: rgba(43,96,101,1);
}

blockquote {
    border-radius: 3px;
    position: relative; /*  <--- */
    font-style: italic;
    text-align: center;
    padding: 1rem 1.2rem;
    width: 80%; /* create space for the quotes */
    color: #484848;
    margin: 1rem auto 2rem;
    background: #EbEbEb;
}

.column .card, .subpage-nav {
    margin-bottom:1em;
}
.site-header {
    padding-top:.5em;
}
.site-header h2 {
    font-size: 3vw;
}
.site-header h3 {
    font-size: 2vw;
}

    .smaller-1 {
        font-size: 90%;
    }

    .smaller-2 {
        font-size: 80%;
    }

    .smaller-3 {
        font-size: 70%;
    }


.theme-dark {
    color: rgba(219,234,221,1);
    background-color: rgba(43,96,101,1);
}

    .container {
        background-color: rgba(219,234,221,1);
    }

    .service-buttons .p-2 svg {
        position: absolute;
        left: 1em;
    }

    .service-buttons .btn {
        white-space: normal;
    }

    .service-buttons .p-2 a {
        min-height: 3em;
    }

    .navbar-light .navbar-nav .nav-link:hover {
        background-color: #fcfcfc;
        color: #000;
    }

    .rings {
        position: relative;
        display: inline-block;
        font-size: 1.4em;
        font-weight: 500;
        padding: .05em .15em .05em .05em;
    }

        .rings span {
            position: absolute;
            top: .25em;
            left: .3em;
        }

    footer .row {
        display: flex;
        flex-wrap: wrap;
    }

        footer .row .card-deck-col {
            display: flex;
        }

            footer .row .card-deck-col .card {
                min-width: 100%;
                margin-bottom: 1em;
            }
.fee-list {
    margin-bottom:1em;
}
.faq:target, .fee-list:target, .card:target, .card-header:target, h4:target, .list-group-item:target {
    border: 1px solid #eab300;
    background-color: #fef3d0;
    animation: fadeIt .75s ease-in; 
}
.card-news-top{
min-height:90px; 
	max-height:150px; 
	overflow:hidden;
	color:fff;
	background-color: rgba(43,96,101,1);
}
.card-news-top > div, .card-news-top > path {
    color:rgb(255,255,255,1);
}
.card-news-top > div {
    color:fff;
}
@keyframes fadeIt {
        0% {
            background-color: #FFFFFF;
        }

        100% {
            background-color: #fef3d0;
        }
    }
.faq .faq-question {font-weight:bold;}
.faq .faq-answer { padding-left:1em;}

.site-header .site-logo,
.site-header .clerk-photo {
   padding:.25em;
    max-width: 24%;
}

.site-header .logo-image, .site-header .clerk-image {
    width: 100%;
    max-width: 150px;
}
.site-header .site-logo, 
.site-header .site-title {
    display:inline-block;
}
.site-header .site-logo {
        display: inline-block;
    }


.site-header .site-title { padding:1em 1.5em;
                           max-width:74%;
}
    .site-header .site-title .clerk-name {
        display:block;
        box-sizing:border-box;
    }

.site-header .clerk-photo {
    display:none; 

}
label.error {
color:red;
}
input.error{
    border-color:red;
    box-shadow:0px 0px 5px 5px rgba(255,0,0,.1);
}
    @media (max-width:33.99em){
        .site-header .clerk-name {
            font-size: 4vw;
        }

        .site-header .clerk-title, .site-header .clerk-county {
            font-size: 3vw;
        }
    }
    /*sm*/
    @media (min-width: 34em) {

        .very-narrow .card-columns {
            -webkit-column-count: 1;
            -moz-column-count: 1;
            column-count: 1;
        }

        .narrow .card-columns {
            -webkit-column-count: 1;
            -moz-column-count: 1;
            column-count: 1;
        } 

        .card-columns.buttons {
            -webkit-column-count: 1;
            -moz-column-count: 1;
            column-count: 1;
        }
        .site-header .clerk-name {
            font-size: 3.5vw;
        }

        .site-header .clerk-title, .site-header .clerk-county {
            font-size: 2.5vw;
        }
        
    }
    @media (min-width: 36em){
        .grid-buttons .card-columns .btn {
            position: relative;
            padding: 1em;
            min-height: 8em;
            text-align: left;
        }
    }
    /*md*/
@media (min-width: 48em) {

    .very-narrow .card-columns {
        -webkit-column-count: 1;
        -moz-column-count: 1;
        column-count: 1;
    }

    .narrow .card-columns {
        -webkit-column-count: 1;
        -moz-column-count: 1;
        column-count: 1;
    }

    .card-columns.buttons {
        -webkit-column-count: 3;
        -moz-column-count: 3;
        column-count: 3;
    }

    .site-header .clerk-name {
        font-size: 3.25vw;
    }

    .site-header .clerk-title, .site-header .clerk-county {
        font-size: 2.25vw;
    }

    .site-header .site-title {
        max-width: 50%;
    }

    
}

    /*lg*/
    @media (min-width: 62em) {

        .very-narrow .card-columns {
            -webkit-column-count: 1;
            -moz-column-count: 1;
            column-count: 1;
        }

        .narrow .card-columns {
            -webkit-column-count: 2;
            -moz-column-count: 2;
            column-count: 2;
        } 
        .card-columns.buttons {
            -webkit-column-count: 4;
            -moz-column-count: 4;
            column-count: 4;
        }
        .site-header .clerk-name {
            font-size: 3vw;
        }

        .site-header .clerk-title, .site-header .clerk-county {
            font-size: 2vw;
        }
        .site-header .clerk-photo {
            display: inline-block;
        }
        .site-header .site-title {
            max-width: 75%;
        }
    }

    /*xl*/
    @media (min-width: 75em) {

        .very-narrow .card-columns {
            -webkit-column-count: 1;
            -moz-column-count: 1;
            column-count: 1;
        }

        .narrow .card-columns {
            -webkit-column-count: 2;
            -moz-column-count: 2;
            column-count: 2;
        } 
        .card-columns.buttons {
            -webkit-column-count: 5;
            -moz-column-count: 5;
            column-count: 5;
        }

        .site-header .clerk-name {
            font-size: 2.75vw;
        }

        .site-header .clerk-title, .site-header .clerk-county {
            font-size: 1.75vw;
        }
    }