#s4-workspace, #s4-bodyContainer, .container, .container-fluid, section{
	-webkit-overflow-scrolling: touch;
}

.modal-backdrop {
    z-index: 200 !important;
}

/***WEBPART FORM FIX**/

#MSOTlPn_Parts [type="radio"]:checked,
#MSOTlPn_Parts [type="radio"]:not(:checked),
#MSOTlPn_Parts [type="checkbox"]:checked, 
#MSOTlPn_Parts [type="checkbox"]:not(:checked) {
    position: static;
    opacity: 1;
}

.breadcrumbRootNode:after,
.breadcrumbNode:after {
    padding: 0px 10px 0px 10px;
    margin-bottom: -5px;
    font-family: "Font Awesome 5 Pro";
    font-weight: 700;
    content: "\f104";
    font-size: 1rem;
}


.UserControlGroup select {
    display: block !important;
}

.container {
    max-width: 1200px;
}

.navbar.scrolling-navbar {
    z-index: 500 !important;
}

footer li {
    list-style: none;
}

.double-nav a,
.double-nav a:link,
.double-nav a:visited {
    color: white;
}

.ms-cui-cbx-input {
    position: relative !important;
    opacity: 1 !important;
    pointer-events: auto !important;
}

/** Styles to shrink ribbon**/

#ms-designer-ribbon {
    display: -webkit-inline-table;
    display: -ms-inline-table;
    display: inline-table;
    margin-left: 40%;
}

#ms-designer-ribbon .suiteBarRight {
    box-sizing: content-box;
}

.ms-belltown-authenticated #suiteBar {
    width: 100%;
}

/****Fonts****/

/*
  @font-face {
      font-family: 'Font Awesome 5 Pro';
      src: url('../../fonts/fontawesome-5.3.1/webfonts/fa-light-300.eot?v=5.3.1');
      src: url('../../fonts/fontawesome-5.3.1/webfonts/fa-light-300.eot?#iefix') format('embedded-opentype'), url('../../fonts/fontawesome-5.3.1/webfonts/fa-light-300.woff?v=5.3.1') format('woff'), url('../../fonts/fontawesome-5.3.1/webfonts/fa-light-300.ttf?v=5.3.1') format('truetype');
      font-weight: normal;
      font-style: normal;
  }
  
  @font-face {
      font-family: 'Font Awesome 5 Free';
      src: url('../../fonts/fontawesome-5.3.1/webfonts/fa-solid-900.eot?v=5.3.1');
      src: url('../../fonts/fontawesome-5.3.1/webfonts/fa-solid-900.eot?#iefix') format('embedded-opentype'), url('../../fonts/fontawesome-5.3.1/webfonts/fa-solid-900.woff?v=5.3.1') format('woff'), url('../../fonts/fontawesome-5.3.1/webfonts/fa-solid-900.ttf?v=5.3.1') format('truetype');
      font-weight: 900;
      font-style: normal;
  }*/

@font-face {
    font-family: "Arquette";
    src: url("../../../Haylee-Dev/fonts/font/ATC-Arquette/EOT/ATCArquette-Extralight.eot");
    /* IE9 Compat Modes */
    src: url("../../../Haylee-Dev/fonts/font/ATC-Arquette/EOT/ATCArquette-Extralight.eot?#iefix") format("embedded-opentype"),
        /* IE6-IE8 */
        url("../../../Haylee-Dev/fonts/font/ATC-Arquette/WOFF2/ATCArquette-Extralight.woff2") format("woff2"),
        /* Super Modern Browsers */
        url("../../../Haylee-Dev/fonts/font/ATC-Arquette/WOFF/ATCArquette-Extralight.woff") format("woff"),
        /* Pretty Modern Browsers */
        url("../../../Haylee-Dev/fonts/font/ATC-Arquette/TTF/ATCArquette-Extralight.ttf") format("truetype");
    /* Safari, Android, iOS */
    font-weight: 100;
    font-style: normal;
}

@font-face {
    font-family: "Arquette";
    src: url("../../../Haylee-Dev/fonts/font/ATC-Arquette/EOT/ATCArquette-Light.eot");
    /* IE9 Compat Modes */
    src: url("../../../Haylee-Dev/fonts/font/ATC-Arquette/EOT/ATCArquette-Light.eot?#iefix") format("embedded-opentype"),
        /* IE6-IE8 */
        url("../../../Haylee-Dev/fonts/font/ATC-Arquette/WOFF2/ATCArquette-Light.woff2") format("woff2"),
        /* Super Modern Browsers */
        url("../../../Haylee-Dev/fonts/font/ATC-Arquette/WOFF/ATCArquette-Light.woff") format("woff"),
        /* Pretty Modern Browsers */
        url("../../../Haylee-Dev/fonts/font/ATC-Arquette/TTF/ATCArquette-Light.ttf") format("truetype");
    /* Safari, Android, iOS */
    font-weight: 200;
    font-style: normal;
}

@font-face {
    font-family: "Arquette";
    src: url("../../../Haylee-Dev/fonts/font/ATC-Arquette/EOT/ATCArquette-Regular.eot");
    /* IE9 Compat Modes */
    src: url("../../../Haylee-Dev/fonts/font/ATC-Arquette/EOT/ATCArquette-Regular.eot?#iefix") format("embedded-opentype"),
        /* IE6-IE8 */
        url("../../../Haylee-Dev/fonts/font/ATC-Arquette/WOFF2/ATCArquette-Regular.woff2") format("woff2"),
        /* Super Modern Browsers */
        url("../../../Haylee-Dev/fonts/font/ATC-Arquette/WOFF/ATCArquette-Regular.woff") format("woff"),
        /* Pretty Modern Browsers */
        url("../../../Haylee-Dev/fonts/font/ATC-Arquette/TTF/ATCArquette-Regular.ttf") format("truetype");
    /* Safari, Android, iOS */
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: "Arquette";
    src: url("../../../Haylee-Dev/fonts/font/ATC-Arquette/EOT/ATCArquette-Medium.eot");
    /* IE9 Compat Modes */
    src: url("../../../Haylee-Dev/fonts/font/ATC-Arquette/EOT/ATCArquette-Medium.eot?#iefix") format("embedded-opentype"),
        /* IE6-IE8 */
        url("../../../Haylee-Dev/fonts/font/ATC-Arquette/WOFF2/ATCArquette-Medium.woff2") format("woff2"),
        /* Super Modern Browsers */
        url("../../../Haylee-Dev/fonts/font/ATC-Arquette/WOFF/ATCArquette-Medium.woff") format("woff"),
        /* Pretty Modern Browsers */
        url("../../../Haylee-Dev/fonts/font/ATC-Arquette/TTF/ATCArquette-Medium.ttf") format("truetype");
    /* Safari, Android, iOS */
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: "Arquette";
    src: url("../../../Haylee-Dev/fonts/font/ATC-Arquette/EOT/ATCArquette-Semibold.eot");
    /* IE9 Compat Modes */
    src: url("../../../Haylee-Dev/fonts/font/ATC-Arquette/EOT/ATCArquette-Semibold.eot?#iefix") format("embedded-opentype"),
        /* IE6-IE8 */
        url("../../../Haylee-Dev/fonts/font/ATC-Arquette/WOFF2/ATCArquette-Semibold.woff2") format("woff2"),
        /* Super Modern Browsers */
        url("../../../Haylee-Dev/fonts/font/ATC-Arquette/WOFF/ATCArquette-Semibold.woff") format("woff"),
        /* Pretty Modern Browsers */
        url("../../../Haylee-Dev/fonts/font/ATC-Arquette/TTF/ATCArquette-Semibold.ttf") format("truetype");
    /* Safari, Android, iOS */
    /* Safari, Android, iOS */
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: "Arquette";
    src: url("../../../Haylee-Dev/fonts/font/ATC-Arquette/EOT/ATCArquette-Bold.eot");
    /* IE9 Compat Modes */
    src: url("../../../Haylee-Dev/fonts/font/ATC-Arquette/EOT/ATCArquette-Bold.eot?#iefix") format("embedded-opentype"),
        /* IE6-IE8 */
        url("../../../Haylee-Dev/fonts/font/ATC-Arquette/WOFF2/ATCArquette-Bold.woff2") format("woff2"),
        /* Super Modern Browsers */
        url("../../../Haylee-Dev/fonts/font/ATC-Arquette/WOFF/ATCArquette-Bold.woff") format("woff"),
        /* Pretty Modern Browsers */
        url("../../../Haylee-Dev/fonts/font/ATC-Arquette/TTF/ATCArquette-Bold.ttf") format("truetype");
    /* Safari, Android, iOS */
    font-weight: 600;
    font-style: normal;
}

@font-face {
    font-family: "Arquette";
    src: url("../../../Haylee-Dev/fonts/font/ATC-Arquette/EOT/ATCArquette-Black.eot");
    /* IE9 Compat Modes */
    src: url("../../../Haylee-Dev/fonts/font/ATC-Arquette/EOT/ATCArquette-Black.eot?#iefix") format("embedded-opentype"),
        /* IE6-IE8 */
        url("../../../Haylee-Dev/fonts/font/ATC-Arquette/WOFF2/ATCArquette-Black.woff2") format("woff2"),
        /* Super Modern Browsers */
        url("../../../Haylee-Dev/fonts/font/ATC-Arquette/WOFF/ATCArquette-Black.woff") format("woff"),
        /* Pretty Modern Browsers */
        url("../../../Haylee-Dev/fonts/font/ATC-Arquette/TTF/ATCArquette-Black.ttf") format("truetype");
    /* Safari, Android, iOS */
    font-weight: 700;
    font-style: normal;
}

/**Custom Font Colors**/

.broward-color-lightblue {
    color: #4fc3f7 !important;
}

.broward-color-blue {
    color: #0277bd !important;
}

.broward-color-darkblue {
    color: #1c2a48 !important;
}

.broward-color-orange {
    color: #ff9802 !important;
}

.broward-color-yellow {
    color: #ffd600 !important;
}

.broward-color-lightgrey {
    color: #eeeeee !important;
}

.broward-color-grey {
    color: #bcbcbc !important;
}

.broward-color-white {
    color: #ffffff !important;
}

/**Custom BG Colors**/

.broward-BGcolor-lightblue {
    background-color: #4fc3f7 !important;
}

.broward-BGcolor-blue {
    background-color: #0277bd !important;
}

.broward-BGcolor-darkblue {
    background-color: #1c2a48 !important;
}

.broward-BGcolor-orange {
    background-color: #ff9802 !important;
}

.broward-BGcolor-yellow {
    background-color: #ffd600 !important;
}

.broward-BGcolor-lightgrey {
    background-color: #eeeeee !important;
}

.broward-BGcolor-grey {
    background-color: #bcbcbc !important;
}

/**End Custom Colors**/

/****Custom Font Family***/

html body {
    font-family: "Arquette", -apple-system, BlinkMacSystemFont, "Segoe UI",
        "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans",
        "Helvetica Neue", sans-serif;
}

/*** Global Styles ***/

a,
a:visited {
    color: black;
}

a:link,
a:visited {
    color: #0277bd;
}

a:focus,
a:hover {
    color: #039be5;
}

.section-title {
    text-align: left;
    padding: 1rem 0;
    text-transform: uppercase;
    font-weight: 700;
    font-size: 2rem;
}

.feature-title {
    text-transform: uppercase;
    color: #1c2a48 !important;
    font-size: 2rem;
    font-weight: 700 !important;
}

.feature-title a {
    color: #1c2a48 !important;
}

/*** Page content Wrapper**/

/**!important set on padding to override mdb style conflict ('.hidden-sn main')~~ <- used css specificity instead so alert banners don't break**/

.pagelayoutWrapper {
    padding-top: 68px;
    transition: padding-top 0.25s ease-in-out;
    -o-transition: padding-top 0.25s ease-in-out;
    -webkit-transition: padding-top 0.25s ease-in-out;
    -moz-transition: padding-top 0.25s ease-in-out;
    overflow: auto;
    position: relative;
    padding-bottom: 407px;
}

main.airportLayoutWrapper {
    padding-bottom: 407px;
}

main.libraryLayoutWrapper {
    padding-bottom: 192px;
}

/**** SharePoint Edit Ribbon Styles****/

#ms-designer-ribbon {
    position: fixed;
    z-index: 1000;
    min-height: 0 !important;
    height: auto !important;
    overflow-y: visible !important;
    font-weight: normal !important;
    line-height: 1.2;
}

#s4-ribbonrow {
    background: white;
}

#s4-bodyContainer {
    padding-bottom: 0px;
}

/**
  
  .ms-cui-topBar2 {border-bottom: 2px #ddd groove;}
  .ms-cui-menusection{position:fixed !important;}
  
  .ms-siteactionsmenuinner{
      border-color: transparent;
      background: transparent none no-repeat;
  }
  .ms-cui-cg-mg .ms-cui-cg-i {
      border-color: #aa0065;
      color: #fff;
      background-color: #c90077!important;
      background-image: none;
  }
  .ms-cui-cg-i {
      border: 1px solid transparent;
      border-top: 2px solid transparent;
      border-bottom: 0px;
  }
  #Ribbon\2e Image\2e Image-title > a{
      background:black !important;
      background-color:black !important;
  }
  #Ribbon\2e Image\2e Image-title > a > span.ms-cui-tt-span {
      color: #fff !important;
      }
  .ms-siteactionsmenuhover{
      border: thin solid #b6babf !important;
      background: transparent !important;
      background: url(/_layouts/images/bgximg.png) repeat-x -0 -489px !important;
  }
  
  .ms-long{
      width:100%;
  }
  /**Emergency Banner**/

#Ebanner {
    position: fixed;
    bottom: 0;
    left: 0px;
    width: 100%;
    height: auto;
    z-index: 99;
}

#Ebanner h3 {
    font-size: 1.2rem;
    text-align: center;
    color: #282828;
    padding: 20px;
    font-weight: 400;
}

/**End Emergency Banner**/

/**** Site Options ***/

/* Options Flyout */

#optionout {
    -webkit-transition: width 0.25s ease-in-out;
    -moz-transition: width 0.25s ease-in-out;
    -o-transition: width 0.25s ease-in-out;
    transition: width 0.25s ease-in-out;
    display: inline-block;
    overflow: hidden;
    white-space: nowrap;
    background: transparent;
    vertical-align: middle;
    line-height: 35px;
    width: 0px;
}

#optionout.in {
    width: 205px;
}

.menu-options {
    float: right;
    -webkit-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
    -o-transition: all 1s ease-in-out;
    -ms-transition: all 1s ease-in-out;
    transition: all 1s ease-in-out;
}

.options-list-item {
    list-style: none;
    display: inline;
}

/***Site Options Script Styles***/

.options-list a {
    color: #2626d9;
    padding-right: 10px;
}

.options-list a.active {
    color: #666;
}

body.contrast {
    background: #000;
    color: #fff;
}

body.contrast a {
    color: #fff;
}

body.contrast a.active {
    color: yellow;
}

.bcontrast {
    background: #000 !important;
    color: #fff;
}

.bcontrast a.active {
    color: yellow;
}

.bcontrast a {
    color: #fff;
}

/*** Hide Site Options on Mobile***/

@media screen and (min-width: 0px) and (max-width: 767px) {
    #options-menu {
        display: none;
        visibility: hidden;
    }

    .feature-title {
        font-size: 2rem;
    }
}

/**Search Overlay**/

#search {
    position: fixed;
    /* top: 60px; */
    left: 0px;
    width: 100%;
    /* height: 100%; */
    -webkit-transition: all 0.25s ease-in-out;
    -moz-transition: all 0.25s ease-in-out;
    -o-transition: all 0.25s ease-in-out;
    -ms-transition: all 0.25s ease-in-out;
    transition: all 0.25s ease-in-out;
    -webkit-transform: translate(0px, -100%) scale(1, 0);
    -moz-transform: translate(0px, -100%) scale(1, 0);
    -o-transform: translate(0px, -100%) scale(1, 0);
    -ms-transform: translate(0px, -100%) scale(1, 0);
    transform: translate(0px, -100%) scale(1, 0);
    opacity: 0;
    z-index: 99;
}

#search.open {
    -webkit-transform: translate(0px, 0px) scale(1, 1);
    -moz-transform: translate(0px, 0px) scale(1, 1);
    -o-transform: translate(0px, 0px) scale(1, 1);
    -ms-transform: translate(0px, 0px) scale(1, 1);
    transform: translate(0px, 0px) scale(1, 1);
    opacity: 1;
    -webkit-transition: all 0.25s ease-in-out;
    -moz-transition: all 0.25s ease-in-out;
    -o-transition: all 0.25s ease-in-out;
    -ms-transition: all 0.25s ease-in-out;
    transition: all 0.25s ease-in-out;
    top: 64px;
}

#search.open.has-alert {
    top: 104px;
}

#search input[type="search"] {
    /* position: absolute; */
    /* top: 50px; */
    width: 100%;
    color: rgb(14, 0, 0);
    background: #fff !important;
    font-size: calc(20px + 8 * ((100vw - 480px) / 960));
    font-weight: 300;
    text-align: center;
    border: 0px;
    margin: 0px auto;
    /* margin-top: -51px; */
    padding-right: 30px;
    outline: none;
    height: 145px
        /*5.0rem*/
    ;
    box-shadow: 0 0 6px 2px rgba(40, 40, 40, 0.3);
}

#search .btn {
    position: relative;
    bottom: -102px;
}

#search .close {
    position: fixed;
    top: 14px;
    right: 12px;
    color: #fff;
    background-color: #ca4242;
    border-color: #357ebd;
    opacity: 1;
    padding: 10px 17px;
    font-size: 27px;
    cursor: pointer;
    z-index: 101;
    border-radius: 100%;
}

#search .closed-icon:before {
    content: "test";
}

/**End Search Overlay**/

/**Side Nav width Override**/

#slide-out.side-nav {
    width: 265px;
}

/***Side Nav Background***/

.sn-bg-1 {
    background-image: url("../../../Haylee-Dev/img/palmbg3sm.jpg") !important;
}

/****County Logo ***/

.ms-siteicon-img {
    width: 100%;
    max-width: 170px;
    padding-top: 13px;
}

.ms-siteicon-a {
    margin-left: 30px;
}

/**Hamburger**/

#hamburger>a {
    font-size: 1rem;
}

/****Main Nav Overrides****/

.side-nav .collapsible a {
    font-size: 0.9rem !important;
}

/**Home Hero Image**/

.intro-2 {
    background-size: cover;
    height: 50vh;
}

/**End Home Hero Image**/

/****Quick Links Styles***/

.QL-item {
    border: none !important;
    background-color: #fff;
    border-radius: 0.2rem;
    box-shadow: 0 1px 2px 1px rgba(0, 0, 0, 0.1);
    cursor: pointer;
}

.QL-item p {
    text-align: center;
    margin-bottom: 0;
    margin-top: 17px;
    /*margin:0 auto;*/
    border: none !important;
    padding: 0 !important;
    line-height: 1.2;
    height: 50px;
}

.QL-item img {
    max-width: 100px;
    margin: 0 auto;
    border: none !important;
}

.QL-item a:visited {
    color: #0277bd !important;
    border: none !important;
}

.slider {
    width: 100%;
    margin: 0 auto;
}

.slick-slide {
    margin: 0px 10px;
}

.slick-slide img {
    width: 100%;
}

.slick-prev:before,
.slick-next:before {
    color: black;
}

.slick-slide {
    transition: all ease-in-out 0.3s;
}

/*** Services Links****/

.services {
    background-color: #1c2a48;
}

#browardServices .services-item {
    background-color: transparent;
    border-top: none;
    border-right: none;
    border-left: none;
    border-bottom: 2px solid #4fc3f7;
    text-align: left;
    color: #4fc3f7 !important;
    font-size: 1.1rem !important;
    font-family: Arquette !important;
    font-weight: 300 !important;
}

.services-group .services-item:after {
    content: "\f061";
    font-family: "Font Awesome 5 Pro";
    font-weight: 300;
    float: right;
}

.services-title {
    color: #ffffff;
}

.svc-icon {
    margin-right: 8px;
}

.view-all {
    text-align: right;
    color: #ffffff;
    margin-bottom: 16px;
    margin-top: 16px;
    text-transform: uppercase;
}

/* COMMISSION SECTION */

#commission .card .view {
    background-color: #fff !important;
    border-radius: 0.2rem !important;
}

#commission hr {
    border-top: 1px solid #ffd600;
}

#commission .btn-commissioners {
    color: #fff !important;
    background-color: #0277bd;
}

#commission .commissioners .card img {
    border: 3px #ffd600 solid;
}

#commission {
    background-color: #eeeeee;
}

#commission .section-title {
    color: #0277bd;
    font-weight: 600;
}

/**Back To Top**/

#backToTopBtn {
    display: none;
    position: fixed;
    bottom: 300px;
    right: 0;
    z-index: 99;
    border: none;
    outline: none;
    background-color: rgba(0, 0, 0, 0.32);
    color: white;
    cursor: pointer;
    padding: 10px 20px;
}

#backToTopBtn:hover,
#backToTopBtn:active,
#backToTopBtn:focus {
    background-color: rgba(0, 0, 0, 0.62);
}

@media (max-width: 550px) {
    #commission .card {
        flex-direction: row;
        min-width: 315px;
    }

    #commission .card-title {
        margin-bottom: 0px;
    }

    #commission .card-text {
        margin-bottom: 0.5rem;
    }

    #commission .text-center {
        white-space: nowrap !important;
    }

    #commission .commissioners .card img {
        border-radius: 0px !important;
        margin-top: auto;
        margin-bottom: auto;
        border: none;
        width: 100px !important;
        height: auto !important;
        margin: 0 0 0 10px !important;
        box-shadow: 0 0 0 0;
        margin-top: auto;
        margin-bottom: auto;
        border: 2px #ffd600 solid;
    }

    #commission .card .view {
        overflow: visible !important;
        padding-top: 0.5rem;
        padding-bottom: 0.5rem;
    }

    .carousel-thumbnails .carousel-indicators {
        margin-bottom: -65px !important;
    }

    #commission .card>div {
        margin: auto;
    }

    #commission .commissioners {
        margin-top: 0.5rem !important;
        margin-bottom: 0.5rem !important;
    }

    #commission .commissioners:last-child {
        margin-top: 0.5rem !important;
        margin-bottom: 0.5rem !important;
    }

    #commission .commissioners-prez {
        margin-bottom: 0 !important;
    }

    #commission .card-body h4 {
        font-size: 1.2rem;
    }

    #commission hr {
        display: none;
    }

    #commission .btn-commissioners {
        font-size: 0.5rem;
        padding: 0.5rem 1.4rem;
    }
}

/* Weather widget */

#weather {
    width: 100%;
    margin: 0px auto;
    text-align: center;
    /*text-transform: uppercase;*/
    position: absolute;
    bottom: 25px;
    font-size: 1.1rem;
}

#weatherWrapper {
    margin-bottom: -20px;
}

#weather img {
    display: inline-block;
    width: 90px;
    padding-bottom: 25px;
}

#weather h2 {
    margin: 0 0 8px;
    color: #fff
        /*#039BE5*/
    ;
    font-size: 55px;
    font-weight: 300;
    text-align: center;
    text-shadow: 0px 1px 3px rgba(0, 0, 0, 0.9);
    font-family: "Arquette";
    display: inline-block;
    border-bottom: #ff9802 solid 2px;
}

#weather span {
    display: block;
    position: relative;
    top: -30px;
    color: #fff;
    text-shadow: 0px 1px 3px rgba(0, 0, 0, 0.9);
}

/*** Weather Widget Styles ***/

/* Docs at http://http://simpleweatherjs.com */

@media screen and (min-width: 769px) {
    a.weatherLink {
        text-shadow: 0px 0px 3px #1c2a48;
    }
}

@media screen and (max-width: 768px) {
    .weather-card>p {
        display: none;
    }
}

/*** Resize Logo on Mobile***/

@media screen and (min-width: 0px) and (max-width: 767px) {
    #ctl00_onetidHeadbnnr2 {
        max-width: 150px;
        padding-left: 5px;
    }

    /***End Media Screen**/
    footer>div.container>div>div.col-md-4 {
        margin-top: 1rem;
        margin-bottom: 1rem;
    }

    footer>div.container>div>div.col-md-4>div {
        margin-top: 1rem;
    }
}

@media screen and (max-width: 767px) {
    .footer-copyright {
        margin-bottom: 2.8rem;
    }
}

/*** Resize for Mobile***/

@media screen and (min-width: 0px) and (max-width: 576px) {
    .slider {
        margin-top: 2rem !important;
    }

    .QL-item {
        width: 100%;
        margin-bottom: 10px;
        height: 80px !important;
        /*padding-top:10px;*/
    }

    .QL-item p {
        text-align: left;
        margin-left: 95px;
        position: relative;
        margin-top: 29px;
        /* margin-bottom: auto; */
        /* padding-top: 0; */
        left: -10px;
        height: 10px;
        /* top: 50%; */
    }

    .QL-item img {
        margin-right: auto !important;
        margin-top: auto !important;
        margin-bottom: auto !important;
        text-align: left !important;
        width: 70px !important;
        height: auto !important;
        display: inline-block !important;
        position: relative !important;
        bottom: 34px !important;
        left: 1px;
    }

    h1 {
        font-size: 2rem;
    }
}

/***End Media Screen**/

/***Hidden Points***/

/* xs */

@media only screen and (min-width: 100px) and (max-width: 767px) {
    .hide-xs {
        display: none !important;
    }
}

/* sm */

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .hide-sm {
        display: none !important;
    }

    .carousel-cellQL {
        width: 50%;
        /* full width */
        height: 40px;
    }

}

/* md */

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .hide-md {
        display: none !important;
    }
}

/* lg */

@media only screen and (min-width: 1200px) {
    .hide-lg {
        display: none !important;
    }
}

/* -----// Custom Ribbon Styles - Below are the two buttons that control styling text //----- */

/* -----// Styles Button //----- */

/*.ms-bcrteStyle-BulletList > ul > li{
      -ms-name:"Bullet List Item";
      margin-bottom:-15px;
      display: list-item;
      list-style-image:url('../../fonts/fontawesome-5.3.1/svgs/light/minus.svg');
      list-style-position:inside;
      padding-left: 1.5em;
      white-space:pre-wrap;
  }*/

.ms-bcrteStyle-Normal {
    -ms-name: Normal;
    font-weight: 300;
    color: #000;
    font-size: 1rem;
    line-height: 1.5em;
    font-style: normal;
}

.ms-bcrteStyle-Bold {
    -ms-name: "Bold";
    font-weight: 700;
}

.ms-bcrteStyle-Italic {
    -ms-name: "Italic";
    font-style: italic;
}

.ms-bcrteStyle-Caption {
    -ms-name: "Caption";
    font-size: 0.75rem;
    font-weight: normal;
    font-style: normal;
    line-height: 1rem;
}

/* -----// Markup Styles Button //----- */

.ms-rtestate-field h1,
h1.ms-rteElement-H1,
.ms-rtestate-field h2,
h2.ms-rteElement-H2 {
    color: #000 !important;
}

h2.ms-bcrteElement-h2 {
    -ms-name: H2 - Heading 2;
}

.ms-bcrteElement-h2,
.ms-rtestate-field h2 {
    color: #000 !important;
    font-size: 2rem !important;
    font-weight: 300 !important;
    margin-top: 1rem;
}

h3.ms-bcrteElement-h3 {
    -ms-name: H3 - Heading 3;
}

.ms-bcrteElement-h3,
.ms-rtestate-field h3 {
    color: #000 !important;
    font-size: 1.75rem !important;
    font-weight: 700 !important;
    margin-top: 1rem;
}

h4.ms-bcrteElement-h4 {
    -ms-name: H4 - Heading 4;
}

.ms-bcrteElement-h4,
.ms-rtestate-field h4 {
    color: #000 !important;
    font-size: 1.5rem !important;
    font-weight: 300 !important;
    padding-top: 0.25em;
}

h5.ms-bcrteElement-h5 {
    -ms-name: H5 - Heading 5;
}

.ms-bcrteElement-h5,
.ms-rtestate-field h5 {
    color: #000 !important;
    font-size: 1.25rem !important;
    font-weight: 700 !important;
}

p.ms-bcrteElement-P {
    -ms-name: Paragraph;
}

.ms-bcrteElement-P {
    font-family: Arquette, sans-serif;
    font-size: 1rem;
    line-height: 1.5em;
    color: #000;
}

p.ms-rteElement-P {
    -ms-name: Paragraph;
}

.ms-rteElement-P,
.ms-rtestate-field p {
    font-family: Arquette, sans-serif;
    font-size: 1rem;
    font-weight: 300;
    line-height: 1.25rem;
    color: #000;
}

DIV.ms-bcrteElement-blockquote-blue {
    -ms-name: Blockquote Blue;
}

.ms-bcrteElement-blockquote-blue {
    padding: 0.5rem 1rem;
    margin-bottom: 1rem;
    font-size: 1rem;
    border-left: 0.25rem solid #0277bd;
    margin-left: 3rem;
}

DIV.ms-bcrteElement-blockquote-yellow {
    -ms-name: Blockquote Yellow;
}

.ms-bcrteElement-blockquote-yellow {
    padding: 0.5rem 1rem;
    margin-bottom: 1rem;
    font-size: 1rem;
    border-left: 0.25rem solid #ffd600;
    margin-left: 3rem;
}

HR.ms-bcrteElement-hr {
    -ms-name: Separator - Horizontal Rule;
}

.ms-bcrteElement-hr {
    border-top: 2px dotted #ffb74d;
    margin-top: 0.5rem;
    width: 100%;
    display: block;
    margin-bottom: 0.5rem;
    height: 1px;
    width: 80%;
}

DIV.ms-bcrteElement-button {
    -ms-name: Button;
}

.ms-bcrteElement-button {
    display: inline-block;
    font-weight: 400;
    max-width: 200px;
    text-align: center;
    background-color: #616161;
    margin-left: 0px;
    font-size: 0.85rem;
    padding: 0.65rem 2rem;
    margin: 6px;
    border-radius: 2px;
    border: 0;
    word-wrap: break-word;
    text-transform: uppercase;
    transition: 0.2s ease-out;
    white-space: normal !important;
    touch-action: manipulation;
    cursor: pointer;
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
}

.ms-bcrteElement-button a {
    color: white;
    text-decoration: none !important;
    display: inline-block;
    position: relative;
    z-index: 1;
    padding: 2em;
    margin: -2em;
}

.ms-bcrteElement-button:hover,
.ms-bcrteElement-button:active {
    background-color: #737272;
    box-shadow: 0 5px 11px 0 rgba(0, 0, 0, 0.18), 0 4px 15px 0 rgba(0, 0, 0, 0.15);
}

/* -----// Table Styles Button //----- */

/* No Borders */

table.ms-bcrteTable-blue {
    -ms-name: "No Borders";
}

/* sets the name of the table style */

.ms-bcrteTable-blue {
    -ms-name: "No Borders";
    display: table;
    width: 100%;
    max-width: 100%;
    border-collapse: collapse;
    margin-bottom: 1rem;
    background-color: transparent;
    color: #212121;
    overflow-x: auto;
}

.ms-bcrteTable-blue th p {
    color: white !important;
}

@media (max-width: 991px) {
    .ms-bcrteTable-blue {
        display: block;
        width: 100%;
        overflow-x: auto;
        -ms-overflow-style: -ms-autohiding-scrollbar;
    }

    .table-responsive.table-bordered {
        border: 0;
    }

    .quickLinksNewTile>a:after {
        content: '\f105';
        font-family: 'Font Awesome 5 Pro';
        font-size: 2rem;
        color: #007ac2;
        float: right;
    }

    .quickLinksNewTile {
        background-color: white;
        border-color: #eaeaea;
        box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
        cursor: pointer;
        color: #007ac2 !important;
        text-transform: uppercase;
        font-size: 0.95rem;
    }

}

}

.ms-bcrteTable-blue td,
th.ms-bcrteTableFirstCol-blue,
th.ms-bcrteTableFooterFirstCol-blue {
    padding: 0.75rem;
    vertical-align: top;
    border: none;
}

.ms-bcrteTableHeaderRow-blue th {
    background: #1c2a48;
    color: #fff;
    padding: 0.75rem;
    vertical-align: top;
    font-weight: 400;
    text-align: left;
}

.ms-bcrteTableEvenRow-blue {
    background: #fff;
}

.ms-bcrteTableOddRow-blue {
    background: #eeeeee;
}

.ms-bcrteTableFooterRow-blue td,
.ms-bcrteTableFirstCol-blue,
.ms-bcrteTableLastCol-blue,
th.ms-bcrteTableFooterFirstCol-blue {
    padding: 0.75rem;
    vertical-align: top;
    border: none;
    background: #1c2a48;
    color: #fff;
    font-weight: 400;
}

/* Borders*/

table.ms-bcrteTable-border {
    -ms-name: "Borders";
}

/* sets the name of the table style */

.ms-bcrteTable-border {
    -ms-name: "Borders";
    display: table;
    width: 100%;
    max-width: 100%;
    border-collapse: collapse;
    margin-bottom: 1rem;
    background-color: transparent;
    color: #212121;
    overflow-x: auto;
}

@media (max-width: 991px) {
    .ms-bcrteTable-border {
        display: block;
        width: 100%;
        overflow-x: auto;
        -ms-overflow-style: -ms-autohiding-scrollbar;
    }

    .table-responsive.table-bordered {
        border: 0;
    }
}

.ms-bcrteTable-border td,
th.ms-bcrteTableFirstCol-border,
th.ms-bcrteTableFooterFirstCol-border {
    padding: 0.75rem;
    vertical-align: top;
    border-top: 1px solid #e9ecef;
    border-bottom: 1px solid #ccc;
    border: 1px solid #eeeeee;
}

.ms-bcrteTableHeaderRow-border th {
    background: #1c2a48;
    color: #fff;
    padding: 0.75rem;
    vertical-align: top;
    font-weight: 400;
    text-align: left;
    border: 1px solid #eeeeee;
}

.ms-bcrteTableEvenRow-border {
    background: #fff;
}

.ms-bcrteTableOddRow-border {
    background: #eeeeee;
}

.ms-bcrteTableOddRow-border td {
    border: 1px solid #fff;
}

.ms-bcrteTableFooterRow-border td,
.ms-bcrteTableFirstCol-border,
.ms-bcrteTableLastCol-border,
th.ms-bcrteTableFooterFirstCol-border {
    padding: 0.75rem;
    vertical-align: top;
    border-top: 1px solid #ccc;
    background: #1c2a48;
    color: #fff;
    font-weight: 400;
    border: 1px solid #fff;
}

/*--Accordion Styles--*/

#accordionEx a {
    font-family: "Arquette", -apple-system, BlinkMacSystemFont, "Segoe UI",
        "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans",
        "Helvetica Neue", sans-serif !important;
    font-size: 1rem !important;
    font-weight: 300 !important;
}

.accordion .card .card-body {
    font-family: "Arquette", -apple-system, BlinkMacSystemFont, "Segoe UI",
        "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans",
        "Helvetica Neue", sans-serif !important;
    font-size: 1rem !important;
    font-weight: 300 !important;
    line-height: 1.5rem !important;
}

.accordion .card h5 {
    font-size: 1.25rem !important;
    font-weight: 300 !important;
}

html {
    font-size: 100%;
}

body {
    -webkit-transition: background 1s ease, font-size 0.7s linear;
    transition: background 1s ease, font-size 0.7s linear;
}

input,
textarea,
keygen,
select,
button {
    -webkit-transition: all 0.6s linear;
    transition: all 0.6s linear;
}

.accessibility-font p,
.accessibility-font {
    /* First font-size fallback to older browsers*/
    font-size: 1.25em;
    font-size: 1.25rem;
    line-height: 1.5em;
}

.accessibility-font input,
.accessibility-font textarea,
.accessibility-font keygen,
.accessibility-font select,
.accessibility-font button {
    /* The default font-size of these elements is approximately 20% less than the body */
    font-size: 1.041625em;
    font-size: 1.04163rem;
}

.accessibility-contrast {
    color: #fff;
    background: #000;
    background-color: #000 !important;
}

#WidgetFloaterPanels {
    display: none !important;
}

#WidgetFloater {
    display: none !important;
}

#FloaterSharePanel {
    display: none !important;
}

#FloaterEmbed {
    display: none !important;
}

.no-hover:hover {
    color: #fff !important;
}

.tr-dd-link:link,
.tr-dd-link:visited {
    color: #fff;
}

.tr-dd--loaded .tr-dd-link {
    display: block;
}

.tr-dd-link {
    text-align: left;
    margin-left: 0;
    line-height: 1;
    padding: 1em 1.4em;
    color: #fff;
    display: none;
    font-size: 12px;
    font-size: 0.75rem;
    /* font-range: 480px 1440px; */
}

.tr-dd-link,
.tr-link {
    text-transform: uppercase;
    letter-spacing: 1.5px;
    display: block;
    min-width: 45px;
    text-align: center;
    margin-left: 1.4em;
    color: #288be4;
}

.tr-dd {
    display: none;
    position: absolute;
    margin: 70px 32px 0;
    list-style: none;
    padding: 0;
    background-color: #1d2b48;
    width: 208px;
    z-index: 0;
}

.tr-dd li {
    padding: 0;
    margin: 0;
}

.showtr {
    display: block !important;
}

/* scroll jank fix for webkit */

@supports (-webkit-overflow-scrolling: touch) {
    body {
        height: 100%;
        -webkit-overflow-scrolling: touch;
    }

    main.pagelayoutWrapper {
        overflow-y: scroll;
        -webkit-overflow-scrolling: touch;
    }

    div[data-name="ContentPlaceHolderMain"] {
        height: calc(100% + 1px);
    }

    #tableContainer {
        height: 100%;
        z-index: 98;
        overflow-y: scroll;
        -webkit-overflow-scrolling: touch;
    }

    #dirTable_wrapper {
        overflow-x: scroll;
        overflow-y: hidden;
        position: relative;
        transform: translateZ();
        -webkit-transform: translateZ(0);
        height: calc(100% + 1px);
    }

    #slide-out {
        z-index: 999999;
    }

    #sidenav-overlay {
        z-index: 500;
    }
}

/* bouncing arrow animation */

@-moz-keyframes bounce {

    0%,
    20%,
    50%,
    80%,
    100% {
        -moz-transform: translateX(0);
        transform: translateX(0);
    }

    40% {
        -moz-transform: translateX(-3px);
        transform: translateX(-3px);
    }

    60% {
        -moz-transform: translateX(0);
        transform: translateX(0);
    }
}

@-webkit-keyframes bounce {

    0%,
    20%,
    50%,
    80%,
    100% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }

    40% {
        -webkit-transform: translateX(-3px);
        transform: translateX(-3px);
    }

    60% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
}

@keyframes bounce {

    0%,
    20%,
    50%,
    80%,
    100% {
        -moz-transform: translateX(0);
        -ms-transform: translateX(0);
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }

    40% {
        -moz-transform: translateX(3px);
        -ms-transform: translateX(3px);
        -webkit-transform: translateX(3px);
        transform: translateX(3px);
    }

    60% {
        -moz-transform: translateX(0);
        -ms-transform: translateX(0);
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
}

.bounce {
    -moz-animation: bounce 2.5s infinite;
    -webkit-animation: bounce 2.5s infinite;
    animation: bounce 2.5s infinite;
}

/* Print styles */

@media print {
    .collapse {
        display: block !important;
        height: auto !important;
    }
}

/* Sticky Footer on desktop */

@media (min-width: 768px) {

    main.pagelayoutWrapper,
    main.airportLayoutWrapper {
        padding-bottom: 224px;
    }
}

#quickLinkTitles>a>button {
    color: #007ac2 !important;
    text-transform: uppercase;
    font-size: 1rem;
    /*padding-left:10px;
      padding-right:10px;*/
}

#quickLinkTitles>a>button>span {
    line-height: 1rem;
}

@media only screen and (max-width: 991px) {

    #leftArrow {
        padding: 15px;
        position: absolute;
        left: 0px;
        z-index: 1;
        cursor: pointer;
        opacity: 1;
    }

    #rightArrow {
        padding: 15px;
        position: absolute;
        right: 0px;
        z-index: 1;
        cursor: pointer;
        opacity: 1;
    }

    #commissionNew img {
        max-width: 140px;
    }

    .scrolling-wrapper {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        margin-right: 5px
    }

    .quickLinkCard.card {
        flex: 0 0 auto;
        box-shadow: none;
        padding: 5px 5px;
        margin: 5px 15px;
    }

    #videoMain #bc_video {
        padding: 5px;
        left: 0px;
    }

    .infoButton {
        font-size: 1.15rem;
        padding: 1.25rem;
    }

    #videoMainContainer {
        padding: 58% 0 0 0;
        position: relative;
    }

    .artsCalendar {
        background: rgba(3, 169, 244, 1);
    }

    .parksEvents {
        background: rgba(28, 42, 72, 1);
    }

    .econCal {
        background: rgba(28, 42, 72, 1);
    }

    .libraryCal {
        background: rgba(3, 169, 244, 1);
    }

    .commCal {
        background: rgba(3, 169, 244, 1);
    }

    .rabiesCal {
        background: rgba(28, 42, 72, 1);
    }
    #eventCalendars .fa-briefcase{
		--fa-primary-color: white; 
		--fa-secondary-color: #81d4fa;
	} 
    #eventCalendars .fa-syringe{
		--fa-primary-color: white; 
		--fa-secondary-color: #81d4fa;	
	}
    #eventCalendars h4 {
        font-size: 1.25rem;
    }

}

@media only screen and (min-width: 990px) {

    .scrolling-wrapper {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        left: 50%;
        margin-right: 50px
    }

    .quickLinkCard.card {
        flex: 0 0 auto;
        box-shadow: none;
        padding: 5px 10px;
        margin: 5px 20px;
    }

    .infoButton {
        font-size: 1.15rem;
        padding: 1.10rem;
    }

    #videoMain #bc_video {
        left: -40px;
    }

    #videoMainContainer {
        padding: 54% 0 0 0;
        position: relative;
    }

    .videoThumbnails {
        padding: 1.9rem;
    }
}

@media only screen and (min-width: 756px) {

    .artsCalendar {
        background: linear-gradient(0deg, rgba(3, 169, 244, 0.6), rgba(3, 169, 244, 0.6)), url('/Style%20Library/V7/img/HomeHero/hero11.jpg') center center no-repeat;
    }

    .parksEvents {
        background: linear-gradient(0deg, rgba(28, 42, 72, 0.6), rgba(28, 42, 72, 0.6)), url('/Style%20Library/V7/img/HomeHero/hero10.jpg') center center no-repeat;
    }

    .econCal {
        background: linear-gradient(0deg, rgba(3, 169, 244, 0.6), rgba(3, 169, 244, 0.6)), url('/Style%20Library/V7/img/HomeHero/hero3.jpg') center center no-repeat;
    }

    .libraryCal {
        background: linear-gradient(0deg, rgba(28, 42, 72, 0.6), rgba(28, 42, 72, 0.6)), url('/Style%20Library/V7/img/HomeHero/hero2.jpg') center center no-repeat;
    }

    .commCal {
        background: rgba(28, 42, 72, 1)
    }

    .rabiesCal {
        background: rgba(3, 169, 244, 1);
    }
    #eventCalendars .fa-briefcase{
		--fa-primary-color: #1c2a48; 
		--fa-secondary-color: #81d4fa;
	} 
    #eventCalendars .fa-syringe{
		--fa-primary-color: #1c2a48; 
		--fa-secondary-color: #81d4fa;	
	}
}

#searchMain {
    height: 70px;
    border-radius: 0;
    border: none;
    text-indent: 10px;
}

.scrolling-wrapper::-webkit-scrollbar {
    display: none;
}

#leftArrow {
    padding: 15px;
    position: absolute;
    left: 0px;
    z-index: 1;
    cursor: pointer;
    opacity: 1;
    font-size: 1.5rem;
    background: linear-gradient(90deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 50%, rgba(255, 255, 255, 0.5886729691876751) 100%);
}

#rightArrow {
    padding: 15px;
    position: absolute;
    right: 0px;
    z-index: 1;
    cursor: pointer;
    opacity: 1;
    font-size: 1.5rem;
    background: linear-gradient(270deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 50%, rgba(255, 255, 255, 0.5886729691876751) 100%);
}

#quickLinksTitles .quickLinkCard a {
    font-size: 1.10rem;
}

.g .list-group-item {
    background-color: transparent;
    border: 0px;
    border-radius: 0;
    color: white;
    font-size: 1.3rem;
}

.g .list-group-item:hover {
    background-color: #eeeeee;
    border: 0px;
    border-radius: 0;
    color: #1c2a48;
}

#commissionNew .card {
    border: 0px;
    border-radius: 0 !important;
    background-color: white;
    box-shadow: 0 2px 5px 0 rgb(0 0 0 / 16%), 0 2px 10px 0 rgb(0 0 0 / 12%);
}

a.commissionerLink {
    color: #1c2a48 !important;
}

#commissionNew .card:hover {
    background-color: #0277BD;
    color: white;
}


#commissionNew .mayor .card:hover {
    background-color: white;
    color: #0277BD;

}

#commissionNew .mayor .card {
    background-color: #1c2a48;
    color: white;
}

.badge .badge-light .mayoral {
    background-color: white !important;
    color: #0277BD !important;
}

#browardServices a,
#eventCalendars a {
    font-size: 1.15rem !important;
}

#eventCalendars .fad {
    font-size: 3rem;
}

/* QUICK LINK UPDATES */
#QLloader {
	display: flex;
	flex-wrap: nowrap;
	overflow-x: auto;
	padding-left: 15px;
}
#QLloader::-webkit-scrollbar {
	display: none;
}

@media (max-width: 576px){
	.QL-item p {
		margin-left: 84px;
		padding: 10px 0 10px;
		width: 139px;
		vertical-align: middle;
		text-align: center;
		margin-bottom: 0;
		display: table-cell;
		height: 55px;
		left: 0;
	}
	.QL-item img {
		width: 51px !important;
		height: auto !important;
		display: inline !important;
		position: relative !important;
		margin-left: 4px;
		vertical-align: top;
		padding-top: 4px;
		bottom: 0px !important;
	}
	.QL-item {
		width: 203px;
		height: 58px !important;
		margin: 10px;
		flex: 0 0 auto;
	}
}
@media (min-width: 577px) {
	.QL-item {
		text-align: center;
		width: 160px;
		margin: 10px;
		height: 160px;
		flex: 0 0 auto;
	}
	.QL-item p {
		padding: 10px 0 0;
		margin-top: 2px;
		width: 100%;
		height: 40px;
	}
	.QL-item img {
		display: block;
		margin: 0 auto;
		padding-top: 7px;
	}
	#lArrow {
		padding: 73px 15px;
	    position: absolute;
	    left: 0px;
	    z-index: 1;
	    cursor: pointer;
	    opacity: 1;
	    font-size: 1.5rem;
	    background: linear-gradient(90deg, rgb(234 234 234) 0%, rgb(234 234 234) 50%, rgb(234 234 234 / 0%) 100%);
	    top: 7px;	}
	
	#rArrow {
		padding: 73px 15px;
	    position: absolute;
	    right: 0px;
	    z-index: 1;
	    cursor: pointer;
	    opacity: 1;
	    font-size: 1.5rem;
	    background: linear-gradient(270deg, rgb(234 234 234) 0%, rgb(234 234 234) 50%, rgb(234 234 234 / 0%) 100%);
	    top: 7px;	
    }
}