/* CSS Document */

:root {
        --white: #fff;
        --green: #00763e;
        --green-rgba: 0,118,62;
        --yellow: #ffb715;
        --blue: #2D7D95;
        --light-green: #66a785;
        --pba-pink-rgba: 237,33,124;
        --box-shadow: 0px 0px 10px 0px;
      }

/*///////////////////////////////////////
//  Home Page
//////////////////////////////////////*/

#introImgContainer {position: relative; width: 100%; margin: -100px auto;}
#introImgContainer img {width: 100%; display: block; aspect-ratio: auto 2047 / 850; object-fit: cover;}
#introImgContainer:before {content: ''; position: absolute;background: rgba(0, 0, 0, 0); top: 0; right: 0; bottom: 0; left: 0;}

#welcome {position: absolute; color: #fff; font-size: 72px; margin: -320px 0 0 0; left: 5%;}
.welcomeContainer {width: 1000px; float: right;}

.boxContainer {background-color: #fff;}
.servicesBox {background-color: #fff; margin: -50px 4% 0 4%; width: 92%; z-index: 10; padding: 0;}
.servicesBoxMessage {width: 100%; background-color: var(--green); line-height: 80px; color: #fff; padding: 0 30px; font-size: 20px;}
.servicesBoxMessage a {color: #fff; text-decoration: underline;}
.servicesBoxLinks {padding: 0px 30px;}
.servicesBoxLinksContainer {border-bottom: 1px solid #ccc; height: 100px; margin: 15px;}
.servicesBoxLinks a { font-size: 16px; font-weight: bold; text-decoration: none; color: #000; display: flex; align-items: center; justify-content: flex-start;}
.servicesBoxLinks a:hover {border-bottom: 1px solid var(--blue); color: var(--green);}
.servicesBoxIcon {height: 50px; margin: 25px 30px 25px 0px; aspect-ratio: auto 50 / 50;}
.servicesBoxArrow {height: 20px; margin: 40px 0; margin-left: auto; aspect-ratio: auto 20 / 20;}

.toDoTextContainer {margin: 50px 20% 0 9%; text-align: justify;}
.toDoTextContainer a {height: 50px; line-height: 50px; background-color: #fff; border:1px solid #000; display: block; color: #000; text-decoration: none; font-weight: bold; text-align: center;}
.toDoImage {height: auto; margin: 50px 9% 0 0; max-width: 91%; aspect-ratio: auto 1599 / 740;}
.toDoImageSquare {display: none; aspect-ratio: auto 500 / 500;}

.eventsHome {margin: 50px 4%; background: linear-gradient(to right, #66a785 40%, transparent 0);}
.eventsHomeTextContainer {margin: 120px 5vw; height: 400px; text-align: justify; text-justify: inter-word; color: #fff;}
.eventsHomeTextContainer h2 {margin-bottom: 20px;}
.eventsHomeTextContainer a {height: 50px; line-height: 50px; background-color: #fff; border:1px solid #000; display: block; color: #000; text-decoration: none; font-weight: bold; width: 85%; margin-top:50px; text-align: center;}
.eventsHomeEvent {width: 50%; height: 400px; margin: 50px 0;}
.eventsHome .event-title {font-size: 18px;}
.eventsHome .event-text span {font-size: 16px;}
.eventsHome .event-text {min-height: 150px; font-size: 14px;}
.eventsHome .event-box {margin: 50px 0;}
.event-location-text {display: table-cell; vertical-align: middle; height:60px;}

.newsHome {margin: 50px 4%; background: linear-gradient(to right, var(--blue) 40%, transparent 0);}
.newsHomeTextContainer {margin: 120px 5vw; height: 200px; text-align: justify; text-justify: inter-word; color: #fff;}
.newsHomeTextContainer a {height: 50px; line-height: 50px; background-color: #fff; border:1px solid #000; display: block; color: #000; text-decoration: none; font-weight: bold; width: 85%; margin-top:50px; text-align: center;}
.newsBox { min-height: 300px; background-color: #fff; border: 1px solid #ccc; padding: 30px 20px; margin: 50px 0;}
.newsBox h3 {font-size: 18px;}
.newsBox span {font-size: 16px; color: var(--blue); font-weight: bold;}

.homeBoxes {margin: 0 0 0px 0; padding: 0 50px; background-color: #fff;}
.homeBox {height: 100px; line-height: 100px; text-align: center; font-weight: bold;}
.homeBox {border:1px solid #ccc; background-color: #fff;}

.search_box {position: absolute; width: 50%; right: 0; z-index: 101;}
.search_bar {background-color:#fff; float:left; height:100px; width:100%; padding:0 30px 0 50px; margin:0; border: none; outline: none; line-height:80px; font-size: 36px;}
.search_bar:focus {outline:none;  border:1px solid #000; border-right:none; -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow:  none;}
.search_bar {-webkit-appearance: none;}
.search_button {width:40px; height:85px; border:none; color: transparent; background-color: transparent; padding:0; margin:0 0 0 -40px; position:relative; z-index:10;}
.search_icon {margin:0 0 0 -80px; font-size: 36px; cursor:pointer; position:relative; line-height: 100px; height: 100%;}

.love-always-banner {background-image: url(https://cdn.pompanobeachfl.gov/city/storage/images/love-always/lap-header.jpg); background-position: center; background-size: cover; position: relative; width: 92%; margin: 50px 4%; height: 257px;}
.love-always-banner a img {height: 185px; margin: 0 auto; display: block;}
.love-always-banner a {text-decoration: none;}
.love-always-banner p {text-align: center; color: #9ecdb9; font-size: 18px; text-decoration: none; height: 70px; line-height: 70px; margin-bottom: 0px; text-shadow: 0px 0px 5px black;}

.home-banner {width: 92%; margin: 50px 4%;}

@media (max-width: 1399px) {
    .toDoTextContainer {margin-top: 0px;}
    .toDoImage {display: none;}
    .toDoImageSquare {display: block; width: 100%;}
}

@media (max-width: 1199px) {
    .love-always-banner p {font-size: 16px;}
}

@media (min-width: 768px) and (max-width: 991px) {
    #introImgContainer {margin: auto;}
    #introVidContainer {margin: 0px auto;}
    .newsBox {min-height: 400px; margin: 20px 0;}
    .newsHome {margin: 50px 0; padding: 0 50px; background-color: var(--blue);}
    .newsHomeTextContainer {margin: 50px; height: auto;}
    .newsHomeTextContainer a {width: 100%;}
    .eventsHome {margin: 50px 0; padding: 0 50px; background-color: var(--light-green);}
    .eventsHomeTextContainer {margin: 50px; height: auto;}
    .eventsHomeTextContainer a {width: 100%;}
    .toDoImageSquare {display: block; width: 90%;}
    .love-always-banner p {font-size: 12px;}
}

@media (max-width: 767px) {
    #introImgContainer {margin: auto;}
    #introVidContainer {margin: 0px auto;}
    #welcome {font-size: 48px; margin: -220px 0 0 0;}
    .servicesBoxMessage {font-size: 18px; line-height: 36px; padding:10px 30px;}
    .toDoImage {display: block; max-width: 100%; margin:0;}
    .toDoImageSquare {display: none;}
    .toDoTextContainer {margin: 50px 10% 0 10%;}
    .toDoTextContainer a {width: 100%;}
    .search_box {width: 100%;}
    .newsBox {min-height: 350px; margin: 20px 0;}
    .newsHome {margin: 50px 0; padding: 0 50px 30px 50px; background-color: var(--blue);}
    .newsHomeTextContainer {margin: 50px; height: auto;}
    .newsHomeTextContainer a {width: 100%;}
    .eventsHome {margin: 50px 0; padding: 0 50px; background-color: var(--light-green);}
    .eventsHomeTextContainer {margin: 50px; height: auto;}
    .eventsHomeTextContainer a {width: 100%;}

    .love-always-banner {width: 100%; margin: 50px 0%;}
    .love-always-banner a img {height: 150px;}
    .love-always-banner p {line-height: 30px; margin-top: 20px;}
}

@media (max-width: 480px) {
    #welcome {font-size: 30px; margin: -100px 0 0 0;}
    .servicesBox {margin: 0px; width: 100%;}

    .eventsHome .event-box {margin: 0 0 20px 0;}

    .love-always-banner p {line-height: 20px; margin-top: 10px;}
}

/*///////////////////////////////////////
//  App Home Page
//////////////////////////////////////*/

#appHtml {background: url(/pompanobeachfl/assets/images/page_specific/app/main_images/pier_overhead.jpg) no-repeat center top fixed; overflow-y: scroll; background-size: cover; min-height: 100%;}
#appHtml body {background-color: transparent;}

.appBoxLinks {padding: 15px 30px;}
.appBoxLinksContainer {border-bottom: 1px solid #ccc; height: 100px; line-height: 100px; margin: 15px; background-color: #fff; display: block;}
.appBoxLinks a { font-size: 16px; font-weight: bold; text-decoration: none; color: #000; display: block;}
.appBoxLinks a:hover {border-bottom: 1px solid var(--blue); color: var(--green);}
.appBoxIcon {height: 50px; margin: 25px 30px 25px 20px;}
.appBoxArrow {height: 20px; margin: 40px 20px 40px 0; float: right;}

@media (min-width: 768px) and (max-width: 991px) {
    .appBoxArrow {display: none;}
}

@media (max-width: 480px) {
    .appBoxArrow {display: none;}
}
@media (max-width: 400px) {
    .appBoxIcon {height: 30px; margin: 35px 10px 35px 10px;}
}

/*///////////////////////////////////////
//  Events Page
//////////////////////////////////////*/

.program-container {margin: 50px 3% 20px 3%;}
.program-container-bc {margin: 0px 4%;}
.pba-shadow {box-shadow: 0px 0px 10px 0px rgba(204,204,204,0.5);}

.single-event-breadcrumb {width: 100%; margin-top: 150px}
.single-event-box {width: 100%; height: auto; background-color: #fff; margin-top:30px; margin-bottom: 30px; padding: 30px;}
.single-left-container {float:left; width:75%; margin:20px 0 0 0;}
.single-event-top {margin-bottom: 40px;}
.single-event-title {font-size:48px;}
.single-event-date {font-size:24px; margin:0 0 10px 0;}
.single-event-img {float:right; width:100%; height:auto;}
.single-event-location {font-size: 30px; margin:0 0 20px 0;}
.single-event-text {}

.single-event-date span {color: var(--pba-pink); font-size: 30px; line-height: 30px; margin: 0 10px;}

.ticket-button {width:auto; height:auto; font-size:24px; line-height:50px; float:left; text-align:center; background-color: var(--pba-grey); color:var(--white); padding: 0 20px; margin: 0 20px 20px 0; text-transform: uppercase;}
.ticket-button:hover {color:var(--white);}
.ticket-button i {margin: 0 20px 0 0;}

.calendar-button {width:auto; height:auto; font-size:24px; line-height:50px; float:left; text-align:center; background-color: var(--pba-grey); color:var(--white); padding: 0 20px; margin: 0 20px 20px 0; text-transform: uppercase; border:0px; border-radius: 0px;}
.calendar-button:hover {color:var(--white); text-decoration: underline;}
.calendar-button i {margin: 0 20px 0 0;}

.event-box {width:100%; height:auto; background-color: #fff; display:block; text-decoration:none; color: #384044; margin-bottom:40px;}
.event-box:hover {color:#384044; text-decoration:none;}
.event-img {background-color: #384044;}
.event-img img {width:100%; height:auto; display:block; aspect-ratio: auto 500 / 500;}

.event-head {display: table; width: 100%; padding: 10px;}
.event-title {height: 120px; display: table-cell; vertical-align: middle; font-size: 18px; font-weight: bold; text-align: center;}

.event-date {line-height:40px; font-size:22px; font-size: 16px; background-color: var(--light-green); text-align: center; color: var(--white); font-weight: bold;}

.event-text {font-size:16px; margin: 0 20px 20px 20px; min-height: 200px;}
.event-text-container {display: table;}
.event-text-inner {display: table-cell; text-align: center; height: 170px;}
.event-text-link {color: var(--blue); font-weight: bold; font-size: 22px; font-size: 18px; text-align: center; display: block; padding: 0 0 20px 0;}

.no-programs-text {border:1px solid #ccc; text-align: center; font-size: 24px; font-weight: bold; padding: 50px 20px;}

.sort-category {margin: 30px 1%; width: 30%; border: none; color: var(--white); background: var(--pba-pink); padding: 8px 5px; font-weight: bold;}

.event-display-text {line-height:60px; font-size:22px; font-size: 1vw; width: 100%; height: auto;}
.event-display-text p {margin: 15px 0 0 0;}
.event-display-text img {width: 50%; height: auto;}

/* Kiosk Events */
.kiosk-page-title {text-align: center; font-size:72px; font-weight: bold; padding: 50px; margin: 0;}
.kiosk-event-box {width:100%; height:auto; background-color: #fff; display:block; text-decoration:none; color: #384044; margin-bottom:40px;}
.kiosk-event-box:hover {color:#384044; text-decoration:none;}
.kiosk-event-img {float: right;}
.kiosk-event-img img {width:100%; float: right; height:auto; display:block;}

.kiosk-event-head {float:left; width: 100%;}
.kiosk-event-title {font-size: 36px; font-weight: bold; width: 100%; padding: 20px 20px 0 20px;}

.kiosk-event-date, .kiosk-event-location, .kiosk-event-time {float:left; width: 100%; line-height:40px; font-size:22px; font-size: 18px; font-weight: bold; padding: 0 20px;}

.kiosk-event-text {font-size:20px; font-size: 1.2vw; margin: 0 20px 20px 20px; min-height: 190px;}
.kiosk-event-text span {color: var(--blue); font-weight: bold; font-size: 22px; font-size: 1.3vw; text-align: center; display: block;}

@media (min-width: 1200px) and (max-width: 1599px) {
    .event-text-inner {height: 220px;}
}

@media (min-width: 992px) and (max-width: 1199px) {
    .event-title {height: 80px; font-size: 18px;}
    .event-text-inner {height: 200px;}
}

@media (min-width: 768px) and (max-width: 991px) {
    .event-title {height: 50px;}
}

@media (max-width: 767px) {
    .event-title {height: 50px;}
    .event-text {min-height: 130px;}
}

@media (max-width: 576px) {
    .event-title {height: 50px;}
    .event-text {min-height: auto;}
}

/*///////////////////////////////////////
//  Blog Pages
//////////////////////////////////////*/

.blog-posts {margin-top: 30px; margin-bottom: 30px;}
.blog-listing-first {background-color: #fff; width: 100%; margin-bottom: 30px;}
.b-1-text {padding: 30px;}
.b-1-text h1 {font-size: 36px;}
.b-1-text a {color: #000; text-decoration: none;}
.blog-listing-first img {width: 100%; max-height: 600px; object-fit: cover}

.b-2 a {text-decoration: none;}
.b-2 a img {width: 100%}
.b2-content {width: 100%; background-color: #fff; padding: 20px; color: #000; margin-bottom: 20px;}

.b-3 {padding-top: 30px;}

.blog-sidebar {border-bottom: 1px solid #ccc;}
.blog-sidebar h3 {font-size: 20px;}
.blog-sidebar .blog-date {font-weight: normal;}
.top-posts {background-color: #fff;}
.top-posts h2 {padding: 20px; background-color: var(--yellow);}
.top-posts .blog-date {margin:0;}

.blog-header {height: 300px; background-color: var(--yellow); width: 100%;}
.blog-header .row {display: table; width: 100%; height: 100%; margin: 0; text-align: center;}
.blog-header h1 {display: table-cell; vertical-align: middle; font-weight: bold;}

.blog-content {margin-top: 40px; margin-bottom: 40px; background-color: #fff; padding-top: 30px; padding-bottom: 30px;}
.blog-date {text-align: left; font-weight: bold; margin: 0 0 25px 0; display: block;}

.blog-featured-image {margin: 0 0 30px 0; width: 100%;}
.blog-block {text-align: justify;}

.blog-categories-container {width: 100%; margin: 0px 0 30px 0; background-color: #fff; float: left;}
.blog-categories-container p {float: left; line-height: 50px; font-size: 20px; line-height: 65px; margin: 0 20px;}
.blog-category {background-color: #000; color: #fff; padding: 10px 30px; border-radius: 10px; float: left; display: block; text-decoration: none; font-weight: bold; margin: 10px;}
.blog-category:hover {background-color: var(--blue); color: #fff;}
.blog-category i {margin:0 10px 0 -10px;}

.blog-share-fb {background-color: #1877f2; padding: 8px 30px; border-radius: 10px; float: left; display: block; text-decoration: none; font-weight: bold; margin: 10px;}

.tags-container {width: 100%; background-color: #fff; padding: 20px; float: left;}
.tags-container h5 {padding: 0 0 20px 0;}

.temp {height: 400px; width: 100%; display: block;}

@media (max-width: 767px) {
    .b-1-text {padding: 0px;}
}

/*///////////////////////////////////////
//  Press Release Entry
//////////////////////////////////////*/

.press-release-block {background-color: #fff; padding:50px 100px;}
.pr-title {margin: 50px 0; font-size: 22px;}
.pr-date {font-weight: bold;}
.pr-text {margin: 0 0 50px 0; font-size: 18px;}
.pr-footer {text-align: center; padding: 50px; color: #fff; background-color: var(--blue); font-size: 20px; font-weight: bold;}
.pr-footer p {margin: 0;}
.pr-footer a {color: #fff;}

@media (max-width: 767px) {
    .press-release-block {background-color: #fff; padding:50px 20px;}
}

/*///////////////////////////////////////
//  Fire
//////////////////////////////////////*/

.iso_bar {float: left; width: 100%; height: 50px; background-color: #bd1921; margin-bottom: 15px; text-align: center; color: #fff; line-height: 50px; font-weight: bold; font-size: 24px;}

.fire-button {width: 75%; margin: 20px 12.5%;}

/*///////////////////////////////////////
//  Planning and zoning
///////////////////////////////////////*/

.table_standard_text_legend {padding:0 15px !important; float:left;}
.legend_first {margin-left:10px;}

.black_box {height:10px; width:10px; margin-top:5px; border:2px solid #000; background-color:#fff; float:left; padding: 0px !important;}
.red_box {height:10px; width:10px; margin-top:5px; border:2px solid #ff0000; background-color:#fff; float:left; padding: 0px !important;}
.blue_box {height:10px; width:10px; margin-top:5px; border:2px solid #3f8396; background-color:#8ac0c9; float:left; padding: 0px !important;}
.green_box {height:10px; width:10px; margin-top:5px; border:2px solid #738c3d; background-color:#cfe899; float:left; padding: 0px !important;}
.constructed_box {height:10px; width:10px; margin-top:5px; border:2px solid #6db8d8; background-color:#63f1ff; float:left; padding: 0px !important;}
.under_construction_box {height:10px; width:10px; margin-top:5px; border:2px solid #e1af72; background-color:#ffbd67; float:left; padding: 0px !important;}
.intheworks_box {height:10px; width:10px; margin-top:5px; border:2px solid #d8d3b5; background-color:#fbfd54; float:left; padding: 0px !important;}
.active_box {height:10px; width:10px; margin-top:5px; border:2px solid #88c75c; background-color:#8ff561; float:left; padding: 0px !important;}
.inactive_box {height:10px; width:10px; margin-top:5px; border:2px solid #999999; background-color:#b7b7b7; float:left; padding: 0px !important;}
.overlays_box {height:10px; width:10px; margin-top:5px; border:2px solid #af52d7; background-color:#eee3f3; float:left; padding: 0px !important;}

.name_email {width:250px;}

.applications_header {width: 100%; height: 50px; line-height: 50px; color: #fff; background-color: #465b70; font-size: 24px; text-align: center; font-weight: bold; float: left;}

.applications_subheader {width: 100%; height: 50px; line-height: 50px; background-color: #f6f8f9; font-size: 22px; text-align: left; padding: 0 0 0 20px; float: left; font-weight: bold;}

.application_text_container {float: left;
    width: 100%;
    height: 100%;
    padding: 15px 15px 0 15px;
    background-color: #fff;}

.eplan_sub_button {width: 40%; display: block; margin:10px auto 25px auto; height: 60px; background-color: #76b413; color: #fff; line-height: 24px; font-size: 16px; text-align: center; font-weight: bold; padding: 6px 10px;}

.application_box {margin-bottom: 15px; float: left;}

.app_video {display: block; width: 560px; margin: 50px auto 30px auto;}

/*///////////////////////////////////////
//  Strategic Plan
//////////////////////////////////////*/

.chart {float:right; width: 40%; margin: 0 0 0 20px;}

.budget_button_link {float:left;}
.budget_button_link:hover  .button_text_two_lines_budget {color:#009DC2 !important;}
.button_text_two_lines_budget {padding-top: 20px; padding-bottom: 20px; font-weight: bold; height: 30px; float:left; text-align: center; color: #000000 !important; text-shadow:0 1px 0 rgba(255,255,255, 0.3);}
.budget_inbox_icon {float:left; margin:10px 15px;}

.budget_amendments {display:none;}


.more {display:none;}
.show {display:block;}
.tradwinds_container {width:570px;}

.tradewinds_column {width:150px; float:left;}
.tradewinds_margin {margin-right:70px;}

.pco_standard {height:253px;}
.pco_standard_two {height:712px;}

.pco_extended {height:985px;}
.pco_extended_two {height:637px;}

.download_pdf {height:30px; width:150px; background-color:#e6e6e6;}
.tradewinds_text {line-height:30px; text-align:center; width:150px; display:block;}

.events_image {float: left; margin: 0 0 30px 0;}
.events_thumbnail {width: 150px;}

.hover_bg {width: 150px;}
.hover_icon {padding: 89px 60px;}

.tradewinds_issue_container {float: left; margin: 0 20px 0 0;}
.tradewinds_issue_container .last {margin: 0;}

/*///////////////////////////////////////
//  Job Placement Center
//////////////////////////////////////*/

#jobsTable .jobsData td *{padding: 0px !important;}

/*///////////////////////////////////////
//  HR Page
//////////////////////////////////////*/

.hr-box {width: 100%;}
.hr-box img {width: 100%;}
.hr-info-container {text-align: center; padding-bottom: 10px; border: 1px solid var(--blue);}
.hr-info-container h4 {font-size: 16px; font-weight: bold; text-transform: uppercase; margin-top: 15px;}
.hr-info-container h5 {font-size: 14px; height: 50px; text-align: center;}
.hr-info-container a {height: 50px; display: block;}

/*///////////////////////////////////////
//  GO Bond
//////////////////////////////////////*/

.go_bond_title {font-size:20px !important; }
.go_bond_subtitle {font-weight: bold; font-size: 18px; text-align: center; text-transform: uppercase; color: #465b70;}
.total_green {background-color: #5cd18b !important; color: #39854e; font-weight: bold; border: 2px solid #39854e;}
.blue_bar {background-color: #7cdcea !important; color: #317e89; font-weight: bold;}

/*///////////////////////////////////////
//  Emergency Management
//////////////////////////////////////*/

.cert_image {float: right; margin-bottom: 15px; margin-left: 15px; margin-right:5px;}

.jl_table_col {min-width:200px;}

.chief {float:right; width:170px;}
.fire_chief {width:150px;}
.chief_text {float:right; width:150px; text-align:center; background-color:#eee; margin-top:-20px; padding:0 0 10px 0; font-weight:bold;}

.codered {width: 50%;}

.warning_flags {width:100%;}

.slider_height {height: 500px;}

.banner_img_disaster {margin: 0px; width: 100%; height: 350px; object-fit: cover;}
.banner_img_disaster_nologo {margin: 0px 0 30px 0; width: 100%; height: 350px; object-fit: cover;}

.disaster_prep_heading {margin: -290px 30px 0 350px; line-height: 120px; color: #fff; font-size: 100px; text-align: left; text-shadow: 0px 5px 20px rgba(0, 0, 0, 1); float: left;}
.disaster_prep_nologo_heading {margin: -280px 30px 0 30px; line-height: 120px; color: #fff; font-size: 100px; text-align: left; text-shadow: 0px 5px 20px rgba(0, 0, 0, 1); float: left;}

.fire_logo {float:left; margin: -260px 0 0 30px; height: 200px;}

.disaster_buttons {height: 85px; width: 100%; background-color: #009dc2; display: block; margin: 7px 0 8px 0;}
.disaster_buttons i {background-color: #00657d; height: 100%; width: 85px; color: #fff; float: left; line-height: 85px; text-align: center; font-size: 36px;}
.disaster_buttons i img {height: 80%; width: 80%; margin: 10%;}
.disaster_buttons span {float: left; font-size: 20px; color: #fff; vertical-align: middle; line-height: 32px; margin: 10px 25px;}
.disaster_buttons:hover span{text-decoration: underline;}
.disaster_buttons .one_line {line-height: 85px; margin: 0px 25px;}

.disaster-updates {float: left; width: 100%; height: auto;}
.disaster-updates-header {float: left; width: 100%; height: auto; font-size: 24px; line-height: 50px; text-align: center; background-color: #009dc2; color: #fff; margin: 0 0 20px 0;}
.disaster-updates-container {float: left; width: 100%; margin: 0 0 20px 0; background-color: #fff; border-bottom: 1px solid #ddd;}
.disaster-updates-container:nth-child(odd) {border-left: 3px solid #009dc2;}
.disaster-updates-container:nth-child(even) {border-left: 3px solid #76b413;}
.disaster-updates-container h3 {margin: 30px;}
.disaster-updates-container ul {margin: 30px 15px;}
.disaster-updates-container p {margin: 30px;}

.acc-button-covid {display: block;}
.acc-button-covid i {float: right;}

.locations .top {
    background: url(https://floridahealthcovid19.gov/wp-content/themes/wordpress-template/assets/images/map_banner.png);
    background-size: cover;
    background-position: center;
    border-radius: 10px;
    text-align: center;
    min-height: 230px;
    padding-top: 80px;
    padding-bottom: 40px;
    padding-left: 30px;
    padding-right: 30px;
    color: white !important;
    text-align: center;
}

.locations .top h2 {color: #fff;}
.locations .top p {text-align: center; margin: 0 0 30px 0;}

.button--orange {
    color: #fff;
    background: #e07800;
    border-radius: 3px;
    padding: .83333em 1.66667em;
    font-weight: 700;
    letter-spacing: .015em;
}

.logos_footer_container {background-color: #fff; height: auto; float: left; padding: 30px 0px; width: 100%;}
.logos_footer {max-height: 100px; display: block; margin: auto;}


@media (min-width: 992px) and (max-width: 1199px) {
    .disaster_buttons {height: 60px;}
    .disaster_buttons i {width: 60px; line-height: 60px; font-size: 30px;}
    .disaster_buttons span {font-size: 16px; line-height: 20px; margin: 10px 20px;}
    .disaster_buttons .one_line {line-height: 60px; margin: 0px 15px;}

    .fire_logo {float:left; margin: -300px 0 0 30px; height: 200px;}
    .disaster_prep_heading {margin: -300px 30px 0px 300px; font-size: 80px; line-height: 100px;}
	.banner_img_disaster_nologo {height: 200px;}
	.disaster_prep_nologo_heading {margin: -190px 30px 0px 30px; font-size: 80px; line-height: 100px;}

}

@media (min-width: 768px) and (max-width: 991px) {
    .banner_img_disaster {height: 200px;}
	.banner_img_disaster_nologo {height: 100px;}

    .fire_logo {float:left; margin: -200px 0 0 30px; height: 150px;}
    .disaster_prep_heading {margin: -190px 20px 40px 275px; font-size: 48px; line-height: 60px;}
	.disaster_prep_nologo_heading {margin: -110px 0px 40px 0px; font-size: 48px; line-height: 60px; text-align: center;}
}

@media (max-width: 767px) {
    .banner_img_disaster {height: 350px;}
	.banner_img_disaster_nologo {height: 150px;}

    .fire_logo {float:none; display: block; margin: -350px auto 30px auto; height: 140px;}
    .disaster_prep_heading {display: block; float: none; text-align: center; margin: -20px 0px 90px 0; font-size: 40px; line-height: 50px;}
	.disaster_prep_nologo_heading {display: block; float: none; text-align: center; margin: -140px 0px 90px 0; font-size: 40px; line-height: 50px;}
}

@media (max-width: 480px) {
    .banner_img_disaster {height: 350px;}
	.banner_img_disaster_nologo {height: 150px;}

    .fire_logo {float:none; display: block; margin: -350px auto 30px auto; height: 140px;}
    .disaster_prep_heading {display: block; float: none; text-align: center; margin: -20px 0px 90px 0; font-size: 40px; line-height: 50px;}
	.disaster_prep_nologo_heading {display: block; float: none; text-align: center; margin: -140px 0px 90px 0; font-size: 40px; line-height: 50px;}

    .disaster_buttons i {width: 50px; font-size: 30px;}
    .disaster_buttons span {font-size: 12px; overflow: hidden;}
}

/*///////////////////////////////////////
//  Parking
//////////////////////////////////////*/

.blue_circle {background-color: #54a4d7; height: 10px; width: 20px; float: left; margin: 5px 10px;}
.yellow_square {background-color: #f2e82f; height: 10px; width: 20px; float: left; margin: 5px 10px;}

.parking_box {background-color: #fff; height: 250px; text-align: center; width: 100%; display: block; margin: 0 0 30px 0; border: 3px solid #000;}
.parking_box h3 {line-height: 30px; text-align: center; padding: 10px 0; background-color: #000; color: #fff; margin: 0;}
.parking_box img {width: auto; height: 140px; margin: 20px auto;}

/*///////////////////////////////////////
//  CRA
//////////////////////////////////////*/

.table .show {display: table-row;}


/*///////////////////////////////////////
//  Tourism
//////////////////////////////////////*/


.video-container {position: relative; padding-bottom: 56.25%; padding-top: 35px; height: 0; overflow: hidden;}
.video-container iframe {position: absolute; top:0; left: 0; width: 100%; height: 100%;}


.iconBox {border-bottom: 2px solid #ccc; height: 100px; margin: 15px; font-size: 16px; font-weight: bold; text-decoration: none; color: #000; display: block;}
.iconBox p {float: left; width: 60%; margin: 25px 0;}
.iconBox p.long {margin: 10px 0;}
.iconBoxIcon {height: 50px; margin: 25px 30px 25px 0px; float: left; aspect-ratio: auto 50 / 50;}
.iconBoxArrow {height: 20px; margin: 40px 0; float: right; aspect-ratio: auto 20 / 20;}

.tourism_vc {padding: 100px; margin: 50px 0; text-align: center; color: #fff; background:linear-gradient(
  rgba(0, 0, 0, 0.5),
  rgba(0, 0, 0, 0.5)
),
url(https://cdn.pompanobeachfl.gov/city/storage/images/page_backgrounds/parking.jpg); background-size: cover; background-repeat: no-repeat;}
.tourism_vc h2 {font-size: 48px;}
.tourism_sfa h2 {font-size: 48px; text-align: center; font-weight: bold; margin: 0 0 50px 0;}
.tourism_wts h2 {font-size: 48px; text-align: center; font-weight: bold; margin: 50px 0}

.row-sfa {margin: 75px 0;}
.card-col {margin-bottom: 20px;}

.t-map #map {height: auto; margin: 50px auto;}
.t-map h2 {font-size: 48px; text-align: center; font-weight: bold; margin: 50px 0}

.flags {width: 250px; float: right; margin: 0 0 30px 15px;}
.rip {width: 250px; float: right; margin: 0 0 30px 50px;}

@media (max-width: 767px) {
    .t-map {display: none;}
}

@media (max-width: 480px) {
    .tourism_vc {padding: 30px 10px;}

}

/*///////////////////////////////////////
//  Notifications
//////////////////////////////////////*/

.mc_embed_signup {float: left;}
.mc-field-group {float: left;}
.mc-field-group input {border: 2px solid #ccc; padding: 5px; font-size: 12px; width: 300px;}
.subscribe_button {float: left; text-align: center; margin: 0 0 20px 10px; width: 175px; font-weight: bold; -webkit-appearance: none; border:none; background-color: var(--light-green); color: #fff; padding: 4px 0;}


/*///////////////////////////////////////
//  Search
//////////////////////////////////////*/

.addsearch {width: 100%; padding: 20px;}

/*///////////////////////////////////////
//  Report an Issue
//////////////////////////////////////*/

.report-box {background-color: #fff; width: 100%; padding: 20px; margin: 50px auto;}
.report-box a {text-decoration: none; color: #000; display: block; border-bottom: 2px solid #ccc; height: 100%; padding: 20px; text-align: center;}
.report-box a:hover {box-shadow: 0px 0px 10px 0px rgba(var(--green-rgba),0.5), inset 0px 0px 0px 1px rgba(var(--green-rgba),1);}
.reportBoxIcon {height: 50px; margin: 25px;}
.report-box h2 {text-align: center; line-height: 100px;}
.report-box h3 {font-size: 18px;}
#map {height: 500px;}

/*///////////////////////////////////////
//  Category Pages
//////////////////////////////////////*/

.category-page-header {padding: 190px 0; color: #fff; text-align: center;}
.category-page-header.business {
    background:linear-gradient(
      rgba(0, 0, 0, 0.5),
      rgba(0, 0, 0, 0.5)
    ),
    url(https://cdn.pompanobeachfl.gov/city/storage/images/page_backgrounds/beach_house.jpg); background-size: cover; background-repeat: no-repeat;
}
.category-page-header.residents {
    background:linear-gradient(
      rgba(0, 0, 0, 0.5),
      rgba(0, 0, 0, 0.5)
    ),
    url(https://cdn.pompanobeachfl.gov/city/storage/images/page_backgrounds/residents.jpg); background-size: cover; background-repeat: no-repeat;
}
.category-page-header.government {
    background:linear-gradient(
      rgba(0, 0, 0, 0.5),
      rgba(0, 0, 0, 0.5)
    ),
    url(https://cdn.pompanobeachfl.gov/city/storage/images/page_backgrounds/government.jpg); background-size: cover; background-repeat: no-repeat;
}
.category-page-header.events {
    background:linear-gradient(
      rgba(0, 0, 0, 0.5),
      rgba(0, 0, 0, 0.5)
    ),
    url(https://cdn.pompanobeachfl.gov/city/storage/images/page-headers/old-town.jpg); background-size: cover; background-repeat: no-repeat;
}


.category-page-header h1 {margin: 0; font-size: 5em;}
.category-page-header p {margin: 30px auto 0 auto; width: 70%; max-width: 1200px;}

.category-box {background-color: #fff; width: 100%; padding: 20px; margin-top:-100px; margin-bottom: 50px;}
.category-box a {text-decoration: none; color: #000; display: block; border-bottom: 2px solid #ccc; height: 100%; padding: 20px; text-align: center;}
.category-box a:hover {box-shadow: 0px 0px 10px 0px rgba(var(--green-rgba),0.5), inset 0px 0px 0px 1px rgba(var(--green-rgba),1);}
.category-box p {margin: 0 0 20px 0; text-align: justify;}
.categoryBoxIcon {height: 50px; margin: 25px;}

.news-box {margin-top: 50px;}

@media (min-width: 992px) and (max-width: 1199px) {

}

@media (min-width: 768px) and (max-width: 991px) {

}

@media (max-width: 767px) {
    .category-page-header {padding: 70px 0 150px 0;}
    .category-page-header h1 {font-size: 3em;}
}

@media (max-width: 480px) {

}

/*///////////////////////////////////////
//  Standard Pages
//////////////////////////////////////*/

.std-page-img-header {padding: 100px 0; color: #fff; text-align: center;}
.std-page-img-header.government {
    background:linear-gradient(
      rgba(0, 0, 0, 0.5),
      rgba(0, 0, 0, 0.5)
    ),
    url(https://cdn.pompanobeachfl.gov/city/storage/images/page_backgrounds/government.jpg); background-size: cover; background-repeat: no-repeat;
}
.std-page-img-header.city {
    background:linear-gradient(
      rgba(0, 0, 0, 0.5),
      rgba(0, 0, 0, 0.5)
    ),
    url(https://cdn.pompanobeachfl.gov/city/storage/images/page-headers/city-media-header_2022-03-24-154748.jpg); background-size: cover; background-repeat: no-repeat;
}
.std-page-img-header.fire {
    background:linear-gradient(
      rgba(0, 0, 0, 0.5),
      rgba(0, 0, 0, 0.5)
    ),
    url(https://cdn.pompanobeachfl.gov/city/storage/images/page-headers/fire-media-header_2022-03-24-154749.jpg); background-size: cover; background-repeat: no-repeat;
}

.Government, .Other {background-color: var(--blue); color: #fff;}
.Residents {background-color: var(--green); color: #fff;}
.Business {background-color: var(--light-green); color: #fff;}
.Visitors {background-color: var(--yellow); color: #000;}

.page-title {text-align: center; font-size:3em; padding: 100px 50px; margin: 0;}

.breadcrumb-container {background-color: #fff; height: 40px;}
.breadcrumb-container a {line-height: 40px; text-decoration: none; color: #666; padding: 0 10px;}
.breadcrumb-container a:hover {text-decoration: underline; color: var(--blue);}

#sidebar {background-color: #fff; margin: 30px 0; border-bottom: 1px solid #ccc;}
#sidebar h2 {font-size: 20px; font-weight: bold; padding: 20px; margin: 0;}
#sidebar section {padding:15px 20px; border-top: 1px solid #ccc;}
#sidebar section a {color: #666; text-decoration: none;}
#sidebar section a:hover {text-decoration: underline;}
#sidebar ul {margin-bottom: 0;}
#sidebar .child {border: none;}

.page_sidebar_social_four {display: block; margin: 20px auto; width: 135px; height: 35px}
.page_sidebar_social_four a {color: #fff !important;}
.sidebar-extra {border-top: 1px solid #ccc;}
.facebook_icon_box {float:right; height:35px; border:1px solid #000; background-color:#3b5998; margin:0 0 0 10px; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; border-radius: 2px; color:#fff; line-height:35px; text-align:center; width:35px; font-size:18px;}

.twitter_icon_box {float:right; height:35px; border:1px solid #000; background-color:#4099FF; margin:0 0 0 10px; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; border-radius: 2px; color:#fff; line-height:35px; text-align:center; width:35px; font-size:17px;}

.instagram_icon_box {float:right; height:35px; border:1px solid #000; background-color:#8841a7; margin:0 0 0 10px; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; border-radius: 2px; color:#fff; line-height:35px; text-align:center; width:35px; font-size:17px;}

.youtube_icon_box {float:right; height:35px; border:1px solid #000; background-color:#ce0202; margin:0 0 0 10px; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; border-radius: 2px; color:#fff; line-height:35px; text-align:center; width:35px; font-size:17px;}


.content {margin-top: 30px; margin-bottom: 30px;}
.entry-block {background-color: #fff; padding: 15px; margin: 0 0 15px 0;}

@media (min-width: 992px) and (max-width: 1199px) {

}

@media (min-width: 768px) and (max-width: 991px) {

}

@media (max-width: 767px) {
    .content {margin-top: 0px;}
    .breadcrumb-container {display: none;}
}

@media (max-width: 480px) {

}

/*///////////////////////////////////////
//  Rental Assistance
//////////////////////////////////////*/
.re_qual {text-align: center; font-size: 36px;}
.re_questions {margin: 50px 0 0 0;}
.re_questions fieldset {background-color: #fff !important; border: 1px solid #009dc2;}
.re_questions legend {background-color: var(--blue); width: 30%; margin: -45px 35% 0 35%; text-align: center; color: #fff; padding: 5px; font-weight: bold;}
.re_questions p {margin: 20px 0; font-size: 20px;}
.re_questions button {margin: 5px; font-weight: bold; padding: .375rem 1.75rem}

.re-dnq {background-color: ;}