/* Base */
    /* Reset */
    html {
        font-size: 16px;
    }

    body {
        background-color: #fff;
    }

    *, html, body {
        font-family:'Roboto', 'Arial', sans-serif;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        text-rendering: optimizeLegibility;
    }
    
    ul {
        list-style-type: none;
    }

    textarea {
        resize: none;
    }
    
    caption {
        caption-side: top;
        text-align: center;
    }

    /* Typography */
    h1, h2, h3, h4, h5 {
        color: #5F433A;
    }

    h1, h2 {
        font-weight:300;
    }
    
    h1 {
        font-size: 3.052rem;
    }
    @media screen and (max-width: 400px) {
        h1.page-heading {
            font-size: 2.5rem;
        }
    }

    h2, h2.permit-title {
        font-size: 2rem;
        margin-bottom: .25rem;
    }

    h2 + .accordion-arrow {
        font-size: 1.2rem;
    }

    
    
    h3, .h3-icon {
        font-size: 1.55rem;
    }
    h3.faq-question, h3.job-title {
        font-size: 1rem;
        font-weight:700;
    }

    h4  {
        font-size: 1.35rem;}

    h5 {
        font-size: 1.25rem;
    }

    p, body {
        font-size: 1rem;
    }

    @media screen and (min-width:992px) {
        h1 {
            font-size: 3.8rem;
        }
        
        h2 {
            font-size: 2.441rem;
        }

        h2 + .accordion-arrow {
            font-size: 1.6rem;
        }    
        
        h3, .h3-icon {
            font-size: 1.753rem;
        }

        
        h4  {
            font-size: 1.563rem;
        }    
    }

    /* Styles */
    p, input, .form-control, label, small, body, th, td, dt, dd {
        color: #5b5b5b;
    }

    .txt-primary {
        color: #5b5b5b !important; 
    }

    label, dt {
        font-weight:700;
    }

    a {
        /* color:#7E8959; */
        color: #707B51;
        transition: color 250ms;
        text-decoration: underline;
    }

    a:hover {
        color: #505D3C;
    }

        

/* Layout */
    main {
        min-height: 200px;
        overflow-x: hidden;
    }
    @media screen and (min-width:768px) {
        main {
            min-height: 400px;
        }
    }
    @media screen and (min-width:992px) {
        main {
            min-height: 55vh;
        }
    }
   

    .main-padding {
        padding-bottom: 8rem;
    }

    @media only screen and (min-width: 1400px) {
        .col-xxl-2 {
            -webkit-box-flex: 0;
            -ms-flex: 0 0 16.666667%;
            flex: 0 0 16.666667%;
            max-width: 16.666667%;
        }

        .col-xxl-4 {
            -ms-flex: 0 0 33.333333%;
            flex: 0 0 33.333333%;
            max-width: 33.333333%;
        }

        .offset-xxl-1 {
            margin-left: 8.333333%;
        }
    }

    /* .container {
        padding:0;
    } */

    .form-row {
        margin-bottom: .5rem;
    }


    
/* Modules */
    .module-margin {
        margin: 4rem 0;
    }

    .module-padding {
        padding: 4rem 0;
    }

    @media screen and (min-width:768px) {
        .module-margin {
            margin: 6rem 0 7rem;
        }
    
        .module-padding {
            padding: 8rem 0;
        }
    }


    /* Accordion Dropdown */
    .accordion-item {
        padding: 1rem 0.5rem;
        border-bottom: 1px solid;
    }


    .accordion-item {
        padding-left: 2rem;
        padding-right: 2rem;
        border: 1px solid;
    }

    .accordion-title {
        display:flex;
        justify-content: space-between;
        cursor: pointer;
    }


    .accordion-details {
        max-height: 0;
        overflow: hidden; 
        transition: max-height .2s ease-in-out;
    }

    .accordion-arrow {
        display:flex;
        /* align-items: center; */
        
        /* QC Change: */
        align-items: flex-start;
        padding-top: 2px;
    }

    .faq.accordion-item {
        border: none;
        padding: 0;
        margin-bottom:1rem;
    }

    .faq .accordion-title {
        justify-content: space-between;
    }
    @media screen and (min-width:992px) {
        .faq .accordion-title {
            justify-content: flex-start;
        }
    }


    /* Borders */


    .border-gray {
        border-color: #ddd !important;
    }

    
    /* Branding */
    .branding-img {
        position:absolute; 
        right:15px; 
        top:-20px; 
        z-index:-1; 
        opacity: 0.15;
        width:500px;
    }
    @media screen and (min-width:1200px) {
        .branding-img {
            right:15px; 
            top:4rem; 
            width:auto;
            max-width:690px;
        }
    }

    /* Buttons */
    .btn-main {
        font-size:1.25rem;
        text-transform: uppercase;
        text-decoration: none;
        font-weight: bold;
        padding: .5rem 2rem;
        border-radius: 5px;
        border:none;
        cursor: pointer; 
        color:#fff;
        background-color: #7E8959;
        box-shadow: 0 2px 4px rgba(0,0,0,0.3); 
        transition: background-color 250ms;
    }

    .btn-header {
        /* display: none; */
        background-color: #eee;
        color: #404F59;
    }
    @media screen and (min-width:768px) {
        .btn-header {
            font-size: 1.1rem;
            display: block;
            margin-left: 14px;
            padding: .5rem;
            /* background-color: #404F59;      */
           
        }
    }

    .btn-cal-month {
        background: hsl(84, 22%, 40%);
    }

    .btn-fb {
        width: 42px;
        height: 42px;
        display: flex;
        justify-content: center;
        align-items:center;
    }

    .btn-submit {
        background-color: none;
        border: 1px solid #fff;
        color:#fff;
        font-weight: bold;
        width:100%;
    }

    .btn-close {
        background: none;
        border: none;
        width: 45px;
        height:45px;
        color: #dc3545;
        transition: color 250ms;
    }

    /* Calendar */
    .cal caption {
        caption-side: top;
        text-align: left;
    }
    

    .cal td {
        width: calc(100% / 7);
    }

    .cal .day {
        padding:0;
        position: relative;
    }

    .cal .day:after {
        content: '';
        display: block;
        padding-top:100%;
        width:100%;
    }

    .cal-num {
        position: absolute;
        top:5px;
        left:5px;
    }

    .btn-cal-month {
        font-size: 1rem;
        padding: .5rem 1rem;
        width: 200px;
    }

    .cal-event-btn {
        position: absolute;
        width:45px;
        height:45px; 
        padding:0;
        border-radius:50%;
        right: 10%;
        bottom: 10%;
    }

    .cal-modal {
        position: absolute;
        background: #fff;
        left: 0;
        top:-5px;
        z-index:5;
        width: 250px;
        opacity: 0;
        transition: opacity 249ms;
    }

    .cal-modal .btn-close {
        position: absolute;
        right: 0;
        top: 0;
    }

    

    /* Cards */
    .card {
        padding: 2rem .5rem;
        border-radius: 12px;
        border:none;
    }

    .card.form {
        max-width: 800px;
    }

    @media screen and (min-width:768px) {
        .card {
            padding: 2rem 1.5rem;
        }
    }

    .card.subpage {
            min-height: 250px;
            overflow: hidden;
            position: relative;
            background: #f3f2f2;
            transition: color 180ms, background 180ms;
            font-size: 1.25rem;
            word-break: break-word;
            overflow-wrap: break-word;
    }
    
    .card.supbage p, .card.subpage .txt-primary {
        font-size: 1rem;
    }

    .card.subpage > span {
        width: 100%;
    }

    .card.subpage time {
        color: #5b5b5b;
        transition: color 200ms;
    }

    @media (prefers-reduced-motion) {
        .card.subpage,  .card.subpage time {
            transition: all 0ms;
        }
    }

    .card.subpage a {
        font-size: 1rem;
    }

    a:hover > .card.subpage, 
    a:focus > .card.subpage, 
    a:hover > .card.subpage time, 
    a:focus > .card.subpage time {
        color: #fff;
    }

   
    a:hover > .card.subpage,
    a:focus > .card.subpage  {
        background: #505D3C;
    }

   
    @media screen and (min-width: 768px) {
        .card-heading {
            font-size: 1.75rem;
        }
    }
    @media screen and (min-width: 992px) {
        .card-heading {
            font-size: 1.5rem;
        }
    }
    @media screen and (min-width: 1200px) {
        .card-heading {
            font-size: 1.95rem;
        }
    }

    /* Contact Box */
    .contact-box {
        padding: 2rem 3rem 3rem;    
    }
   
    @media screen and (min-width:992px) {
        .contact-box {
            width: 500px; 
            position: absolute; 
            top: 8%; 
            right:25px;
            z-index:1;
        }

        .contact-img {
            display:block;
        }
    }   

    /* Document */
    .req-doc-title {
        font-size: 2rem;
    }
    
    .doc-read {
        float: right;
        margin-left: .5rem;
        color: #00a2a8;
    }

    .required-link {
        font-size: 1rem;
    }

    .required-video iframe {
        width:100%;
    }

    /* Error Box */
    .error-box {
        border-radius: 12px;
        padding: 2rem;
        box-shadow: 0 3px 12px rgba(0,0,0,0.3);
    }

    .error-box p, .error-box h3 {
        color: #fff;
    }

    /* FAQs */
    .faq-question {
        color: #707B51 !important;
    }

    .faq-question:hover {
        color: #505D3C !important;
    }

    /* Signup Page */
    .signup-page h2 {
        font-size: 1.753rem;
        font-weight: 500;
    }

    /* Multi Page Pdfs */
    .multi-page-pdfs span {
        color: #454C32;
    }

    /* Finance */
     .finance-page span {
        color: #454C32;
    }
    /* Planning Page */
     .planning-page span, .planning-page .card {
        color: #454C32;
    }
    /* Public Works Page */
    .dept-areas span {
        color: #454C32;
    }
    /* Public Works Page */
     .comp-plan-page a {
        color: #454C32;
    }
    /* Public Works Page */
     .reports-page span {
        color: #454C32;
    }
    /* Public Works Page */
    .business-page span {
        color: #454C32;
    }
    /* Public Works Page */
    .multi-text-page span {
        color: #454C32;
    }
    /* Aed Pdfs */
    .aed-pdfs span {
        color: #454C32;
    }

    /* Fees */
    .fee-item {
        padding: 2rem 0;
        margin: 0;
        border-bottom: 1px solid #ddd;
    }


   

    /* Footer */
    #ddmg-signature {
        background: #333;
    }
    
    footer h3 {
        font-size: 1rem;
        color:#cfe5f7;
    }
    
    footer .nav-list {
        padding:0;
        margin-bottom: 2rem;
        list-style-type: none;
    }

    footer  .nav-link {
        padding:0;
        font-size: 1rem;
        
    }
    
    footer p {
        color: #cfe5f7;
    }
    
    footer small {
        color: #bbb;
    }
    
    footer small a {
        color:#fff;
    }

    .footer-form {
        width:100%;
        max-width:400px;
    }
    

    /* Forms */
    @media screen and (min-width:768px) {
        .form-home {
            margin: 2rem auto .5rem;
            width:75%;
        }
    }

    /* Photo Gallery */
    .gallery-overlay {
        width: 100%;
        height:0;
        padding-top: 100%;
        position: relative;
        background-size: cover;
        background-position: center;
    }

    .gallery-img-filler {
        position: absolute; 
        top:0; 
        left: 0;
    }

    /* Headings */
    .home-h1 {
        margin-top: 0;
        border-left: 3px solid #B1553C;
        padding-left: 15px;
        transition: opacity 5s;
    }

    .home-h1 > .title-1 {
        font-size: 40%;
        text-align: left;
    }

    @media screen and (min-width:568px) {
        .home-h1 > .title-1 {
            padding-right: 20rem;
            text-align: center;
        }
    }
    @media screen and (min-width: 768px) {
        .home-h1 > .title-1 {
            padding: 0;
            text-align: left;
        }
    }
    @media screen and (min-width: 992px) {
        .home-h1 > .title-1 {
            font-size: 60%;
        }
    }

    .h2-service {
        border-bottom: 1px solid #B1553C;
    }

    /* Icons */
    .icon {
        display:flex;
        justify-content: center;
        align-items: center;
        border-radius:50%;
        color:#fff;
        cursor: pointer;
    }

    .file-icon {
        font-size: 3rem;
    }

    .nav-icon {
        font-size:24px;
        
        width:50px;
        height:50px;
        padding: 10px;
        margin-bottom: 5px;

        transform: scale(.8);
        background-color: #B1553C;
        border-radius: 50%;
        box-shadow: 0 3px 8px rgba(0,0,0,0.5);
    }
    
    @media screen and (min-width:1300px) {
        .nav-icon {
            margin-bottom: 10px; 
       } 
    }
    
    .service-icon {
        position: relative;
    
        font-size: 36px;
        height:76px;
        width:76px;
        margin-right: 10px;
        align-self: flex-start;
    
    
        transition: background-color 250ms;
        background-color:#7E8959;
    }

    .slide-icon {
        padding:3px; 
        width:55px; 
        height:55px; 
        position: absolute;
        top:115%;
        left:0;
        right:0;
        bottom:0;
        display:block;
        border: 2px solid white;
        border-radius: 50%;
    }
    

    .slide-icon.js-slide-scroll {
        font-size: 3rem;
        background-color:#B1553C; 
        box-shadow:0 3px 8px rgba(0,0,0,0.5);
        z-index: 2;
    }
    

    /* Links */
    a.h-link {
        text-decoration: none;
    } 

    a.h-link > * {
        color:#7E8959;
    }

    /* Lists */
    .list-collection {
        padding: 0;
    }
    
    .list-collection > .list-item {
        margin-bottom: 1.5rem;
    }

    /* Logos */
    .logo-wrapper {
        position: absolute;
        top:10%;
        left:0;
        right:0;
        z-index:2;
    }
    @media screen and (min-width: 768px) {
        .logo-wrapper {
            top:30%;
        }
    }

    .main-logo {
        max-width: 70%;
    }

    /* Map */
    .map-wrapper {
        height: 250px;
    }
    @media screen and (min-width: 768px) {
        .map-wrapper {
            min-height: 300px;
            height: 100%;
        }
    }

    .contact-map {
        min-height: 16rem;
        max-height: 20rem;
    }

    /* Navigation & Header */
    .header-notice, .header-notice:hover {
        text-decoration: none;
    }

    .header-notice > div {
        background: hsl(60, 100%, 50%);
        color: hsl(0, 0%, 16%);
        padding: .25rem 1rem;
    }


    .fa-bars {
        font-size: 1.5rem;
    }

    .nav-list {
        list-style-type: none;
    }

    nav a, nav a:hover {
        text-decoration: none;
        font-weight:bold;
    }

    .nav-item .fa-chevron-right {
        font-size: 12px;
    }
    
    header .nav-item, .main-return {
        text-transform: uppercase;
    }


    .dropdown-menu {
        background: none !important;
        transform: none !important;
        position: relative !important;
        border: none;
    }

    @media screen and (min-width:1200px) {
        .dropdown-menu {
            position: absolute !important;
            transform: translate3d(9px, 27px, 0px) !important;
            top: 0px;
            left: 0px;
            background-color: #404F59 !important;
        }
    }

    .dropdown-item {
        font-weight:bold;
        color:#fff;
    }


    .navbar-nav li {
        padding: 0 1rem;
    }

    @media screen and (min-width: 768px) {
        .navbar-nav li {
            padding: 0 .6rem;
        }

        .navbar-nav li, .dropdown-item {
            font-size: 18px;
        }
    }

    @media screen and (min-width: 992px) {
        .navbar-nav li {
            margin-bottom: 0rem;
        }

        .navbar-nav li, .dropdown-item {
            font-size: 14px;
        }
    }

    @media only screen and (min-width: 1200px) {
        .navbar-nav li {
            padding: 0 .3rem !important;
        }
    }

    @media only screen and (min-width: 1400px) {
        .navbar-nav li {
            padding: 0 .5rem !important;
        }
    }

    @media screen and (min-width: 1600px) {
        .navbar-nav li {
            padding: 0 1rem;
        }

        .navbar-nav li, .dropdown-item {
            font-size: 16px;
        }
    }

        /*Sidenav */
     .side-nav {
        position: fixed;
        top:65%;
        bottom:0;
        left: 5px;
        z-index: 5;
    }
    @media screen and (min-width: 1024px) {
        .side-nav {
            top:25%;
            left:0;
        }
    }
    @media screen and (min-width: 1300px) {
        .side-nav {
            top:33%;
            bottom:0;
            left: 15px;
        }
    }

    /* News & Events */
    .news-list-title {
        margin-bottom: 1.5rem;
    }

    /* Referendum Page */
    .referendum-gallery .gallery-overlay {
        padding-top: 70%;
    }
    .referendum-pdfs .card.subpage {
        min-height: 200px;
    }
    .referendum-pdfs .multi-page-pdfs:hover span {
        color: #fff;
    }

    /* Hometown Hereos */
    .hometown-heros img {
        float:none;
        display: block;
        width: 100%;
    }

    @media (min-width:768px) {
        .hometown-heros img {
            float:right;
            margin-bottom: 0px;
            margin-left: 10px;
            width: 40%;
        }
    }


    /* Parallax */
    .parallax {
        background-attachment: fixed;
        background-repeat: no-repeat;
        background-size: cover;
    }

    .parallax-overlay {
        background-color: rgba(0,0,0,0.15); 
        padding: 8rem 0;
    }

    .parallax-hours {
        background-image: url(../../images/TheCircle.png);
        background-position: center;

        padding: 4rem 0;
    }


    .parallax-contact {
        background-image: url(../../images/GT_Flower.jpg);
        background-position:top center;
    }

    /* Sections */
    .hours-container {
        display: flex;
        flex-direction: column;
    }

    @media screen and (min-width:768px) {
        .hours-container {
            flex-direction: row;
        }

        .hours-container .card {
            flex: 1;
        } 
    }

    @media screen and (min-width:992px) {
        .hours-container {
            flex-direction: column;
        }

        .hours-container .card {
            flex: none;
        }
    }

    /* Services */
    .service-item-content {
        display: flex;
        align-items: center;
        justify-content: center;
    }


    /* Shadows */
    .shadow {
        box-shadow: 0 3px 12px rgba(0,0,0,0.3);
    }

    .shadow-light {
        box-shadow: 0 2px 5px rgba(40,40,40,0.3);
    }

    /* Slideshow */
    .carousel-wrapper {
        overflow: hidden;
    }

    .carousel-overlay {
        top:0;
        left:0;
        right:0;
        bottom:0;
        background-color: rgba(0,0,0,0.2);
        z-index:1;
    }

    .carousel-img {
        background-size:cover; 
        background-position: center
    }

    .carousel-height {
        min-width:100%;
    }


    /* Staff Directory */
    .staff-table td {
        width: calc(100% / 3);
    }

    .mobile-title {
        font-size:1rem;
    }

    /* Titles */
    .title-bg {
        position:relative;
        z-index:-3;
    }

    .title-flair {
        bottom:0;
        display: none;
    }

    @media screen and (min-width: 992px) {
        .title-flair.far {
            display: block;
        }

        .title-flair:nth-of-type(1) {
            left: -16rem;
        }
        .title-flair:nth-of-type(2) {
            right: -16rem
        }
    }

    @media screen and (min-width: 1200px) {
        .title-flair.near {
            display: block;
        }

        .title-flair.near:nth-of-type(1) {
            left: -10rem;
        }
        .title-flair.near:nth-of-type(2) {
            right: -10rem
        }
        
        .title-flair.far:nth-of-type(1) {
            left: -19rem;
        }
        .title-flair.far:nth-of-type(2) {
            right: -19rem
        }
    }

    /* Video */
    .iframe-container {
        border-radius: 12px;
        overflow: hidden;
    }

    .play-icon-wrapper {
        z-index:99;
    }

    .play-icon-wrapper > .play-icon {
        font-size: 60px; 
        top:50%; 
        left:50%;
        color: #fff;
        transition: color 250ms;
        display: flex;
        justify-content: center;
        align-items: center;
        border: none;
        background: none;
    }   

    .play-icon-wrapper:hover > .play-icon {
        color:#aaa;
    }

    /* User Content */
    div.txt-primary ul {
        
        list-style-type: initial;
    }


/* States */
    /*Buttons */
    .btn-main:hover {
        text-decoration: none;
        color:#fff;
        background-color: #505D3C;
    }

    .btn-cal-month:hover {
        background: #434e32;
    }

    .btn-header:hover {
        background-color: #fff;   
        color: hsl(204, 16%, 20%);
    }

    .btn-submit:hover {
        background-color: #fff;
        color: #404F59;
    }

    .btn-main:active {
        transform: scale(0.99);
        box-shadow: none;
    }

    .btn-close:hover {
        color: hsl(354, 70%, 44%);
    }

    .is-transparent {
        opacity:0;
    }

    /* Icons */
    .slide-icon:hover, .nav-icon:hover {
        transition: background-color 250ms;
        background-color: #5F433A;
    }

    .slide-icon.is-animated {
        animation: grow 8s infinite ease-in; 
        z-index: 1;
        transform-origin: center center;
    }

    @keyframes grow {
        0% {transform: scale(1); opacity:1;}
        30% {opacity: 0.3;}
        60% {transform: scale(2); opacity:0;}
        100% {opacity:0;}
    }

    .service-icon:hover {
        text-decoration: none;
        background-color: #505D3C;
    }

    /* Links */
    .no-underline, .no-underline:hover {
        text-decoration: none;
    }

    .dropdown-item:hover {
        font-weight:bold;
        background: none !important;
        color: #D6D6D6;
    }

    footer .nav-link:hover {
        color:#aaa;
    }

    /* Chevron Rotation */
    .rotate {
        animation: rotation .2s ease-in-out forwards;
    }
    
    .rotate-rvrs {
        animation: rotation-rvrs .2s ease-in-out forwards;
    }

    @keyframes rotation {
        0% {transform: rotate(0);}
        70% {transform: rotate(105deg);}
        100% {transform: rotate(90deg);}
    }
    
    @keyframes rotation-rvrs {
        0% {transform: rotate(90deg);}
        70% {transform: rotate(-15deg);}
        100% {transform: rotate(0);}
    }

    /* Text */
    .hyphenated {
        hyphens: auto;
        -webkit-hyphens: auto;
        -ms-hyphens: auto;
    }

    .break-word {
        word-break: break-word;
        overflow-wrap: break-word;
    }


/* Themes */
    .bg-brand {
        background-color: rgb(128, 152, 172, 1); 
    }

    .header-overlay {
        background-color: rgba(0, 0, 0, 0.75);  
    }

    .bg-brand-dark {
        background-color: #404F59;
    }

    .bg-brand-dark.translucent {
        background-color: rgba(64, 79, 89, 0.9);
    }

    .bg-header {
        background-image: url(../../images/Header_BG05.jpg);
        background-size: cover;
        background-position: center;
    }

    .bg-offwhite {
        background-color: #f3f2f2;
    }

    .bg-white.translucent {
        background-color: rgba(255,255,255,0.95) !important;
    }

    .bg-offwhite a {
        color: #68724B;
    }

    .bg-green {
        background-color: #505D3C;
    }

  
    .b-radius {
        border-radius: 12px;
    }


    .fa-bars,
    .nav-item,
    .nav-link,
    .nav-link:hover{
    color:#fff;
}


@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    .card.subpage {
        height:1px;
    }

    .card.subpage.ie-req-vid {
        height: auto;
    }

    .cal {
        table-layout: fixed;
    }  
    
    div.txt-primary ul {
        
        list-style-type: disc;
    }
}


/* ADA Compliant Elements */
#adaContentSkip {
    position: fixed; 
    top:15px; 
    left: 25vw; 
    z-index: 9999; 
    color: #000
}
.category-link{
    font-size:15px;
    text-decoration:none;
    transition: background-color 250ms;
}
.category-link:hover{
    text-decoration:none;
    background-color:#b8bca8;
    color: #333333;
}
.note{
    background-color:#707b51;
    color:#fff;
    border-radius:100%;
    padding:15px 23px;
    
}