/*em based breakpoints*/
/*
@media (min-width: 34em) {}
@media (min-width: 48em) {}
@media (min-width: 62em) {}
@media (min-width: 75em) {}
*/
a  {
	color: rgb(0,86,179);
}
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;
}
span.float-img-left img{float:left; padding:.25em .5em;}
span.float-img-right img{float:right; padding:.25em .5em;}
.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);
}
/*Alert Boxes*/
.jumbotron.post-it {
    font-family: 'Indie Flower';
    padding: 2rem;
    background-color: rgb(230, 228, 119);
    background-image: radial-gradient(circle at center center, rgb(230, 228, 119)50%, rgb(181, 180, 109) 225%);
    color: #241354;
}
    .jumbotron.post-it h1, .jumbotron.post-it p, .jumbotron.post-it ul {
        font-weight: 800;
    }
    .jumbotron.post-it p, .jumbotron.post-it ul {
    font-size:1.75em;
    }
        .jumbotron.post-it .btn.btn-primary {
            background-color: #FFF;
            border-color: #3DA35D;
            color: #134611;
        }

.jumbotron.green-fields {
    font-family: 'Indie Flower';
    padding: 2rem;
    background-color: rgb(19, 70, 17);
    background-image: radial-gradient(circle at center center, rgb(19, 70, 17)0%, rgb(61, 163, 93) 225%);
    color: #E8FCCF;
}
    .jumbotron.green-fields h1, .jumbotron.green-fields p, .jumbotron.green-fields ul {
        font-weight: 500;
    }
    .jumbotron.green-fields p, .jumbotron.green-fields ul {
        font-size: 1.75em;
    }
    .jumbotron.green-fields .btn.btn-primary {
        background-color: #96E072;
        border-color: #3DA35D;
        color: #134611;
    }
.jumbotron.blue-waters {
    padding: 2rem;
    background-color: rgb(240, 243, 189);
    background-image: linear-gradient(181deg, rgba(247, 254, 255, 0) 94%, rgb(247, 254, 255) 95%, rgb(90, 249, 255) 96%),	
		linear-gradient(179deg, rgba(247, 254, 255, 0), 89%, rgb(247, 254, 255) 91%, rgb(90, 249, 255) 93%), 
		linear-gradient(177deg, rgba(247, 254, 255, 0), 81%, rgb(247, 254, 255) 84%, rgb(90, 249, 255) 87%);
}
    .jumbotron.blue-waters h1 {
        font-family: 'Chelsea Market';
        color: #02649B;
    }
        .jumbotron.blue-waters h1, .jumbotron.blue-waters p, .jumbotron.blue-waters ul {
            font-weight: 500;
        }
.jumbotron.blue-waters .btn.btn-primary {
    background-color: #028090;
    border-color: #00a896;
    color: #F0F3BD;
}
.jumbotron.roses {
    padding: 2rem;
    background-color: rgb(245, 195, 188); 
    background-image: linear-gradient(rgb(242, 132, 130) 0%, rgb(245, 195, 188) 15%, rgb(247, 237, 226) 80%);
}
    .jumbotron.roses h1 {
        font-family: 'Pacifico';
        color: #e6004c;
        margin-bottom:.3em;
    }
    .jumbotron.roses h1, .jumbotron.roses p, .jumbotron.roses ul {
        font-weight: 500;
    }
    .jumbotron.roses .btn.btn-primary {
        background-color: #e6004c;
        border-color: #84A59D;
        color: #F7EDE2;
    }

.jumbotron.urgent-alert {
    padding: 2rem;
    background-color: rgb(43, 45, 66);
    background-image: linear-gradient(  rgb(216, 0, 50) 0%, rgb(43, 45, 66) 10%, rgb(43, 45, 66) 90%,rgb(216, 0, 50) 100%);
    color: #FFF;
}
    .jumbotron.urgent-alert h1 {
        font-size:3em;
        line-height:1.25em;
        padding-bottom:.5em;
        color: #FFF;
    }
    .jumbotron.urgent-alert h1, .jumbotron.urgent-alert p, .jumbotron.urgent-alert ul {
        font-weight: 500;
    }
    .jumbotron.urgent-alert .btn.btn-primary {
        background-color: #EDF2F4;
        border-color: #84A59D;
        color: #2B2D42;
    }
.jumbotron.patriotic {
    padding: 2rem;
    background-color: rgba(0, 40, 104, 1);
    background-image: linear-gradient(rgb(191, 10, 48) 0%, rgb(255, 255, 255) 2%, rgb(191, 10, 48) 3%, rgb(255, 255, 255) 5%, rgba(0, 40, 104,0) 6%, rgba(0, 40, 104,0) 94%, rgb(255, 255, 255) 95%,rgb(191, 10, 48) 97%, rgb(255, 255, 255) 98%,rgb(191, 10, 48) 100%);
    color: #FFF;
}

    .jumbotron.patriotic h1 {
        font-family:'Times New Roman', Times, serif;
        font-size: 4em;
        line-height: 1.25em;
        padding-bottom: .5em;
        color: #FFF;
    }

    .jumbotron.patriotic h1, .jumbotron.patriotic p, .jumbotron.patriotic ul {
        font-weight: 500;
    }

    .jumbotron.patriotic .btn.btn-primary {
        background-color: #EDF2F4;
        border-color: #84A59D;
        color: #2B2D42;
    }

    @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;
        }
    }