@import url(https://fonts.googleapis.com/css?family=Lato:400,300,300italic,400italic,700,700italic);

/* REMOVE PHOTO BACKGROUND */
.mainSpan_wrapper {
    background-image: linear-gradient( to bottom, #38b6ff, #91c4ff, #c3d5ff, #e6e9ff, #ffffff ) !important;
}
.icon-175th {display: none !important;}
#event_scheduler .k-event {
    background-image: none;
    border-radius: 0;
    background-color: #f16b48 !important;
}

.scheduler_event_template {
    color: #ffffff !important;
}

#page_footer {
    display: none !important;
}

body.front_end_body,
.config_widget_template {
    background: #ffffff !important;
}

#sitebody {
    padding: 0 0 0px 0 !important;
    margin: 0 auto 0px auto !important;
}

/* UNIVERSAL */

html,
body {
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
    left: 0;
    top: 0;
    font-size: 100%;
}

/* ROOT FONT STYLES */

* {
    font-family: 'Lato', Helvetica, sans-serif;
    color: #333447;
    line-height: 1.5 !important;
}

/* TYPOGRAPHY */

h1 {
    font-size: 2rem;
}

h2 {
    font-size: 1.8rem;
}

h3 {
    font-size: 1.375rem;
}

h4 {
    font-size: 1.125rem;
}

h5 {
    font-size: 1rem;
}

h6 {
    font-size: 0.875rem;
}

p,
a,
li,
.question_content {
    font-size: 1.125rem !important;
    line-height: 1.5 !important;
}

    p a:hover,
    li a:hover {
        font-weight: bold !important;
    }

.font-light {
    font-weight: 300;
}

.font-regular {
    font-weight: 400;
}

.font-heavy {
    font-weight: 700;
}

/* POSITIONING */

.left {
    text-align: left;
}

.right {
    text-align: right;
}

.center {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}

.justify {
    text-align: justify;
}

/* COLORS */
.lightorange {
    background-color: #ffb145 !important;
}

.mediumorange {
    background-color: #ff944b !important;
}

.darkorange {
    background-color: #ff6b43 !important;
}

.lightteal {
    background-color: #85eddb !important;
}

.lightblue {
    background-color: #6ce1ea !important;
}

.mediumblue {
    background-color: #30c9e2 !important;
}

.purple {
    background-color: #211c3a !important;
}

.TealBlue {
    background-color: #3fc3da !important;
}

.MaternalDarkPink {
    background-color: #ff5757 !important;
}

/* ==== GRID SYSTEM ==== */

.container {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}

.row {
    position: relative;
    width: 100%;
}

    .row [class^='col'] {
        float: left;
        margin: 0.5rem 2%;
        min-height: 0.125rem;
    }

.col-1,
.col-2,
.col-3,
.col-4,
.col-5,
.col-6,
.col-7,
.col-8,
.col-9,
.col-10,
.col-11,
.col-12 {
    width: 96%;
}

.col-1-sm {
    width: 4.33%;
}

.col-2-sm {
    width: 12.66%;
}

.col-3-sm {
    width: 21%;
}

.col-4-sm {
    width: 29.33%;
}

.col-5-sm {
    width: 37.66%;
}

.col-6-sm {
    width: 46%;
}

.col-7-sm {
    width: 54.33%;
}

.col-8-sm {
    width: 62.66%;
}

.col-9-sm {
    width: 71%;
}

.col-10-sm {
    width: 79.33%;
}

.col-11-sm {
    width: 87.66%;
}

.col-12-sm {
    width: 96%;
}

.row::after {
    content: '';
    display: table;
    clear: both;
}

.hidden-sm {
    display: none;
}

@media only screen and (min-width: 33.75em) {
    /* 540px */
    .container {
        width: 100%;
    }
}

@media only screen and (min-width: 45em) {
    /* 720px */
    .col-1 {
        width: 4.33%;
    }

    .col-2 {
        width: 12.66%;
    }

    .col-3 {
        width: 21%;
    }

    .col-4 {
        width: 29.33%;
    }

    .col-5 {
        width: 37.66%;
    }

    .col-6 {
        width: 46%;
    }

    .col-7 {
        width: 54.33%;
    }

    .col-8 {
        width: 62.66%;
    }

    .col-9 {
        width: 71%;
    }

    .col-10 {
        width: 79.33%;
    }

    .col-11 {
        width: 87.66%;
    }

    .col-12 {
        width: 96%;
    }

    .hidden-sm {
        display: block;
    }
}

@media only screen and (min-width: 60em) {
    /* 960px */
    .container {
        width: 100%;
    }
}
/*CUSTOM STYLES*/

/*HOMEPAGE*/

.image_widget {
    margin: 0px !important;
    margin-bottom: 0px;
    overflow: hidden;
    position: relative;
    padding: 0px !important;
    box-shadow: none !important;
    margin-bottom: 20px !important;
}

.homepageintro {
    font-weight: bold !important;
    font-size: 1.5em;
    text-align: center;
}

.normal_content_area {
    padding-left: 0px !important;
    padding-right: 0px !important;
}

.vi-content-columns .vi-content-columns-column.vi-content-column-background {
    padding: 20px 10px 20px;
    background-color: #30c9e2 !important;
    font-size: 2em;
    min-height: 300px;
}

    .vi-content-columns
    .vi-content-columns-column.vi-content-column-background:hover {
        padding: 20px 10px 20px;
        background-color: #6ce1ea !important;
        font-size: 2em;
        min-height: 300px;
    }

a.hometilelink {
    text-decoration: none !important;
}

.BhQuicklLink {
    background-color: #ff6b43; /*Orange*/
    border: none;
    color: white;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    margin-top: 10px;
    text-transform: uppercase !important;
}

    .BhQuicklLink:hover {
        background-color: #211c3a; /*Dark Purple*/
    }

    .BhQuicklLink > a {
        color: #fff !important;
        display: inline-block;
        padding: 10px !important;
        text-decoration: none;
        text-transform: uppercase !important;
    }
/*.mainSpan_wrapper {
position: relative;
background-color:#201b39!important;
background-image: none!important;
}*/
/*FOOTER*/
.bhfooter {
    background-color: #201b39;
    color: #ffffff !important;
}

p.bhfootertitle {
    color: #ffffff !important;
    text-decoration: underline !important;
    text-underline-offset: 0.2em !important;
}

.bhfooter ul {
    list-style-type: none !important;
}

.bhfooter li {
    line-height: 1.5 !important;
    color: #ffffff !important;
}

    .bhfooter li a {
        text-decoration: none !important;
        color: #ffffff !important;
    }

        .bhfooter li a:hover {
            text-decoration: underline !important;
        }
/*SUBPAGES*/
subpagetitle.h1 {
    color: #211c3a !important;
}

    subpagetitle.h1:after {
        content: ' ';
        display: block;
        border-bottom: 3px solid #211c3a !important;
    }

.bh-accordian-wrapper {
}

/* Style the element that is used to open and close the accordion class */
p.accordion {
    background-color: #ffffff;
    color: #000000 !important;
    cursor: pointer;
    padding: 10px;
    font-size: 2em !important;
    font-weight: bold;
    font-family: 'Caveat', cursive;
    text-align: left;
    border: none;
    outline: none;
    transition: 0.4s;
    margin-bottom: 10px;
    line-height: 1.5 !important;
}
    /* Add a background color to the accordion if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
    p.accordion.active,
    p.accordion:hover {
        background-color: #ddd;
    }
    /* Unicode character for "plus" sign (+) */
    p.accordion:before {
        content: url('https://www.co.monterey.ca.us/home/showimage?id=34681');
        font-size: 13px;
        color: #00639e !important;
        float: left;
        margin-right: 5px;
        margin-top: 5px;
        vertical-align: middle;
    }
    /* Unicode character for "minus" sign (-) */
    p.accordion.active:before {
        content: url('https://www.co.monterey.ca.us/home/showimage?id=34679');
        vertical-align: middle;
    }
/* Style the element that is used for the panel class */
div.panel {
    padding: 0 18px;
    background-color: white;
    max-height: 0;
    overflow: hidden;
    transition: 0.4s ease-in-out;
    opacity: 0;
    margin-bottom: 0px;
}

    div.panel.show {
        opacity: 1;
        max-height: 900px; /* Whatever you like, as long as its more than the height of the content (on all screen sizes) */
    }

/* Custom accordion Style */
.bhAccordian .transition,
.bhAccordian ul li i:before,
.bhAccordian ul li i:after,
p {
    transition: all 0.25s ease-in-out;
}

.bhAccordian .flipIn,
.bhAccordian ul li,
.bhAccordian h1 {
    animation: flipdown 0.5s ease both;
}

.bhAccordian .no-select,
.bhAccordian h2 {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    -webkit-touch-callout: none;
    -webkit-user-select: none;
  
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.bhAccordian p {
    position: relative;
    overflow: hidden;
    max-height: 1800px;
    opacity: 1;
    transform: translate(0, 0);
    margin-top: 14px;
    z-index: 2;
}

.bhAccordian ul {
    list-style: none;
    perspective: 900;
    padding: 0;
    margin: 0;
}

    .bhAccordian ul li {
        position: relative;
        padding: 0;
        margin: 0;
        padding-bottom: 2px;
        padding-top: 2px;
        border-top: 1px dotted #dce7eb;
    }

        .bhAccordian ul li:nth-of-type(1) {
            animation-delay: 0.5s;
        }

        .bhAccordian ul li:nth-of-type(2) {
            animation-delay: 0.75s;
        }

        .bhAccordian ul li:nth-of-type(3) {
            animation-delay: 1s;
        }

        .bhAccordian ul li:last-of-type {
            padding-bottom: 0;
        }

        .bhAccordian ul li i {
            position: absolute;
            transform: translate(-6px, 0);
            margin-top: 16px;
            right: 0;
        }

            .bhAccordian ul li i:before,
            .bhAccordian ul li i:after {
                content: '';
                position: absolute;
                background-color: #ff6873;
                width: 3px;
                height: 9px;
            }

            .bhAccordian ul li i:before {
                transform: translate(-2px, 0) rotate(45deg);
            }

            .bhAccordian ul li i:after {
                transform: translate(2px, 0) rotate(-45deg);
            }

        .bhAccordian ul li input[type='checkbox'] {
            position: absolute;
            cursor: pointer;
            width: 100%;
            height: 100%;
            z-index: 1;
            opacity: 0;
        }

            .bhAccordian ul li input[type='checkbox']:checked ~ p {
                margin-top: 0;
                max-height: 0;
                opacity: 0;
                transform: translate(0, 50%);
            }

            .bhAccordian ul li input[type='checkbox']:checked ~ i:before {
                transform: translate(2px, 0) rotate(45deg);
            }

            .bhAccordian ul li input[type='checkbox']:checked ~ i:after {
                transform: translate(-2px, 0) rotate(-45deg);
            }

@keyframes flipdown {
    0% {
        opacity: 0;
        transform-origin: top center;
        transform: rotateX(-90deg);
    }

    5% {
        opacity: 1;
    }

    80% {
        transform: rotateX(8deg);
    }

    83% {
        transform: rotateX(6deg);
    }

    92% {
        transform: rotateX(-3deg);
    }

    100% {
        transform-origin: top center;
        transform: rotateX(0deg);
    }
}