/* CSS Document */

/*///////////////////////////////////////
//  Define Variables
//////////////////////////////////////*/

:root {
        --white: #fff;
        --green: #00763e;
        --green-rgba: 0,118,62;
        --yellow: #ffb715;
        --blue: #2D7D95;
        --light-green: #66a785;
        --box-shadow: 0px 0px 10px 0px;
        --pba-grey: #3d4548;
        --pba-pink: #ed207b;
        --pba-blue: #009cc2;
        --pba-green: #bbd631;
        --pba-orange: #f37230;
        --pba-pink-rgba: 237,33,124;
        --pba-blue-rgba: 0,157,194;
        --pba-green-rgba: 188,214,49;
        --pba-orange-rgba: 243,114,48;
        --cra-blue: #46afcd;
        --cra-pink: #f14d96;
        --cra-green: #bbd631;
        --cra-orange: #f37230;
        --cra-orange-rgba: 245,141,90;
        --cra-pink-rgba: 241,77,150;
        --cra-blue-rgba: 70,175,250;
        --cra-green-rgba: 199,221,90;
        --parks-green: #018b4f;
      }

* {transition: all 0.5s ease;}

/* Pompano Colors */
.green {color: #bbd631;}
.light-green {color: #66a785;}
.yellow {color: #ffb715;}
.pb-blue {color: #39a6c5;}

.bg-green {background-color: #bbd631;}
.bg-light-green {background-color: #66a785;}
.bg-yellow {background-color: #ffb715;}
.bg-blue {background-color: #39a6c5;}

/* PBA Colors */
.pba-grey {color:#3d4548;}
.pba-pink {color:#ed207b;}
.pba-blue {color:#009cc2;}}
.pba-green {color:#bbd631;}
.pba-orange {color:#f37230;}

.bg-pba-pink {background-color:#ed207b;}
.bg-pba-blue {background-color:#009cc2;}
.bg-pba-green {background-color:#bbd631;}
.bg-pba-orange {background-color:#f37230;}

/* CRA Colors */
.cra-orange {color:#f58d5a;}
.cra-pink {color:#f14d96;}
.cra-blue {color:#46afcd;}
.cra-green {color:#c7dd5a;}

.cra-bg-orange {background-color:#f58d5a;}
.cra-bg-pink {background-color:#f14d96;}
.cra-bg-blue {background-color:#46afcd;}
.cra-bg-green {background-color:#c7dd5a;}

/* Other colors */
.red {color: #f00;}
.white {color: #fff;}

a {color: var(--blue); font-weight: 500;}
a:hover {color: var(--blue);}

/*///////////////////////////////////////
//  Header
//////////////////////////////////////*/

header {height: 100px; background-color: var(--white); padding: 0 3%; position: relative; z-index: 100;}
header img {height: 150px; padding: 20px 2vw 0px 2vw; margin-bottom: 20px; float: left; background-color: #fff; aspect-ratio: auto 185 / 130;}
.header-img-container {position: relative;}
.logo-box {display: block; height: 100%; background-color: #fff; border-radius: 10px; float: left;}
.logo-box:hover {color: var(--blue);}
.logo-box .divider {height: 120px; margin: 30px 0 20px 0; background-color: var(--blue); width: 3px; float: left;}
.logo-box .welcome {line-height: 55px; font-size: min(2.5vw, 48px); margin: 30px 2vw 30px 2vw; float: left;}
.logo-box .light-text {font-weight: 400;}

@media (max-width: 1400px) {
    header img {height: 120px; margin-top: 15px;}
}

@media (min-width: 992px) and (max-width: 1199px) {
    header img {height: 100px; padding: 10px 2vw; margin: 10px 0 0 0;}
    .logo-box .divider {height: 70px; margin: 30px 0;}
    .logo-box .welcome {line-height: 40px; margin: 20px 2vw;}
}

@media (min-width: 768px) and (max-width: 991px) {
    header img {height: 100px; padding: 10px 2vw; margin: 10px 0 0 0;}
    .logo-box .divider {height: 70px; margin: 30px 0 20px 0;}
    .logo-box .welcome {line-height: 40px; margin: 25px 1vw 0 1vw;}
    .logo-box {height: auto;}
}

@media (max-width: 767px) {
    header img {height: 100px; padding: 10px 2vw; margin: 10px 0 0 0;}
    .logo-box .divider {height: 80px; margin: 30px 0 20px 0;}
    .logo-box .welcome {line-height: 30px; margin: 35px 1vw 0 1vw; font-size: 3.5vw;}
    .logo-box {height: auto;}
}

@media (max-width: 480px) {
    header img {height: 100px; padding: 10px 2vw; margin: 0;}
    .logo-box .divider {display: none;}
    .logo-box .welcome {display: none;}
}

.ext_link_overlay {position: fixed; top: 0; display: none; height: 100%; width: 100%; background-color: rgba(255,255,255,.6); z-index: 110;}
.ext_link_box {top: 100px; width: 50%; border: 2px solid #203040; background-color: #fff; position: fixed; left: 25%; right:25%;}
.ext_link_title {text-align: center; font-size: 22px; line-height: 40px; display: block; font-weight: bold; margin: 20px 0 0 0; padding: 0 20px;}
.ext_link_box p {margin: 20px 30px;}
.button_container {margin: 20px 30px 20px 30px; display: block; padding: 10px 0;}
.button_container a {background-color: #009dc2; padding: 10px; color: #fff; border: 2px solid #00657d; margin: 0 10px 0 0; font-weight: bold;}
.show_ext {display: block;}


@media (max-width: 480px) {
    .ext_link_box {width: 100%; left: 0; right: 0; top:50px;}
    .ext_link_title {font-size: 18px; line-height: 30px; text-align: center;}
    .ext_link_box {overflow-y: scroll; height: 500px;}
}

.show-on-focus {position: absolute; top: -10em; background: #ffffff; padding: 1em; margin: 1em; color: #203040; display: block; font-weight: 600; }
.show-on-focus:focus {position: inherit; top: auto; outline: 2px solid #fdb81e; }


/*///////////////////////////////////////
//  Navigation
//////////////////////////////////////*/

nav ul li a {line-height: 100px; padding: 0 .9rem !important; color: #000 !important; text-transform: uppercase; font-weight: bold; font-size: 1.1rem; letter-spacing: .1rem;}
nav ul li a:hover {color: var(--blue) !important;}

#hamburger {font-size: 30px; line-height: 90px;}
#navbarToggle {background-color: #fff; z-index: 110; justify-content: flex-end;}
.navbar {padding: 0px;}

/*///////////////////////////////////////
//  Slider or Video
//////////////////////////////////////*/

#slider {margin: 0 0 30px 0;}

@media (min-width: 992px) and (max-width: 1199px) {
    nav ul li a {font-size: .8rem; letter-spacing: auto;}
}

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

}

@media (max-width: 767px) {
    .nav-item {border-bottom: 1px solid #ccc;}

}

@media (max-width: 480px) {

}


/*///////////////////////////////////////
//  Body
//////////////////////////////////////*/

body {background-color: #f4f4f4;}

.clearfix {clear:both;}
.clearflex {display: flex;
flex-wrap:wrap;
align-items: center; width: 100%;}

#topButton {display: none; position: fixed; bottom: 20px; right: 30px; z-index: 99; border: none; outline: none; background-color: var(--blue); color: white; cursor: pointer; padding: 15px; font-size: 18px;}

#topButton:hover {background-color: var(--blue)}


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

}

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

}

@media (max-width: 767px) {

}

@media (max-width: 480px) {

}

.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {line-height: 1.5;}

.img_right {float:right; margin:0 0 20px 20px; border:8px solid #eee;}
.img_right_no_border {float:right; margin:0 0 20px 20px;}
.img_left {float:left; margin:0 20px 20px 0; border:8px solid #eee;}
.img_left_no_border {float:left; margin:0 20px 20px 0;}
.img_full {width:100%;}
.img_half {width:50%; float: left}
.img_half_right {width: 50%; float:right;}
.img_third {width:33%;}
.img_quarter {width: 25%;}
.img_center {margin: 0px auto; display: block; float: none;}
.img_200 {width: 200px;}

figure {margin: 0;}

.min_width_50 {min-width:50px;}
.min_width_75 {min-width:75px;}
.min_width_100 {min-width:100px;}
.min_width_150 {min-width:150px;}
.min_width_200 {min-width:200px;}


/*/// Page Sidebars ///*/

.sidebar-header-img {width: 100%; padding: 20px;}


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

}

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

}

@media (max-width: 767px) {

}

@media (max-width: 480px) {

}

/*/// Text ///*/

.email .show_name {display:inline;}
.email:hover  .show_name{display:none;}
.email .show_email {display:none;}
.email:hover .show_email {display:inline;}

.email .show_name {display:inline;}
.email:hover  .show_name{display:none;}
.email .show_email {display:none;}
.email:hover .show_email {display:inline;}

.hidden {display: none;}

.red, .text-red {color: #f00;}

.bold {font-weight: bold;}

.ex-archive {}

.sectionBar {background-color: var(--pba-blue); color: #fff; padding: 20px; margin: 0 0 20px 0;}


/* Overlay Centered Text */
.overlay-container {position: relative; display: inline-block;}
.overlay-center {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; z-index: 10;}

/*/// Warnings, Errors, Notices, Etc ///*/

.error {background-color:#d90000; color:#fff; padding:20px; margin-bottom:20px; border:1px solid #de5c5c; font-weight:600; text-align:center; font-size:16px; display: block;}

.success {background-color:#5cd18b; color:#fff; padding:20px; border:1px solid #48b977; font-weight:600; text-align:center; font-size:32px;background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAALElEQVQIW2MMPdL4n52XiwEZMMZc7P7/8/M3BmQJsCBIFbIEXBBZAkUQJgEAFt4Ze9005WQAAAAASUVORK5CYII=) repeat;}

.error_sidebar_header {margin: 0 0 20px 0 !important;}

.error_msg {text-align: center; background-color:#ff7979; color:#fff; padding:20px 80px; margin-bottom:0px; border:1px solid #de5c5c; font-weight:600; text-align:center; font-size:16px;background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAALElEQVQIW2N8nZ//X4SLiwEZMP6vrPz/5ts3BmQJsCBIFbIEXBBZAkUQJgEAXYUajn5Ks78AAAAASUVORK5CYII=) repeat;}
.error_msg a, .error_msg a:hover, .error_msg a:visited {color: #ffffff !important; text-decoration: underline;}

.info_message_box {color: #465b70; padding: 20px; font-weight: 600; text-align: center; font-size: 16px; background-color: #dde1e4; margin-bottom: 15px; border-bottom: 1px solid #b9bcc1; float: left;}
.info_icon {float: left; height: 100%; line-height: 100%;}

.yellow_message {background-color: #fff779 !important; color: #ad974a; font-weight: bold; display: block;}

.error-container {border: 1px solid #ccc; padding: 50px 0; text-align: center; background-color: #fff; margin: 50px;}
.error-container h1 {font-size: 7vw; line-height: 10vw;}
.error-container p {font-size: 2vw; line-height: 4vw;}


/*/// Page Headers - Full Width ///*/


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

}

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

}

@media (max-width: 767px) {

}

@media (max-width: 480px) {

}

/*/// Buttons ///*/
.btn-primary:hover {background-color: var(--blue) !important;}
.btn-secondary {background-color: var(--light-green)!important; border: 1px solid; border-color: var(--green);}
.btn-secondary:hover {background-color: var(--blue)!important; border: 1px solid; border-color: var(--green);}

.btn-city-light-green {background-color: var(--light-green)!important; border: 1px solid; border-color: var(--green); color: #fff;}
.btn-city-light-green:hover {background-color: var(--blue)!important; border: 1px solid; border-color: var(--green); color: #fff;}

.btn-city-blue {background-color: var(--blue)!important; border: 1px solid; border-color: var(--blue); color: #fff;}
.btn-city-blue:hover {background-color: var(--light-green)!important; border: 1px solid; border-color: var(--light-green); color: #fff;}

.btn-city-yellow {background-color: var(--yellow)!important; border: 1px solid; border-color: var(--yellow); color: #000;}
.btn-city-yellow:hover {background-color: var(--light-green)!important; border: 1px solid; border-color: var(--light-green); color: #fff;}

.btn-pba-pink {background-color: var(--pba-pink)!important; color: #fff;}
.btn-pba-pink:hover {box-shadow: 0px 0px 10px 0px rgba(var(--pba-pink-rgba),0.5), inset 0px 0px 0px 3px rgba(var(--pba-pink-rgba),1); color: #fff;}

.btn-pba-blue {background-color: var(--pba-blue)!important; color: #fff;}
.btn-pba-blue:hover {box-shadow: 0px 0px 10px 0px rgba(var(--pba-pink-blue),0.5), inset 0px 0px 0px 3px rgba(var(--pba-pink-blue),1); color: #fff;}

.btn-pba-orange {background-color: var(--pba-orange)!important; color: #fff;}
.btn-pba-orange:hover {box-shadow: 0px 0px 10px 0px rgba(var(--pba-orange-rgba),0.5), inset 0px 0px 0px 3px rgba(var(--pba-orange-rgba),1); color: #fff;}

.btn-pba-green {background-color: var(--pba-green)!important; color: #fff;}
.btn-pba-green:hover {box-shadow: 0px 0px 10px 0px rgba(var(--pba-pink-green),0.5), inset 0px 0px 0px 3px rgba(var(--pba-pink-green),1); color: #fff;}

.btn-cra-blue {background-color: var(--cra-blue)!important; color: #fff;}
.btn-cra-blue:hover {background-color: var(--cra-green); border:1px solid; border-color: var(--cra-blue); color: #fff;}

.btn-parks-green {background-color: var(--parks-green)!important; color: #fff;}
.btn-parks-green:hover {background-color: var(--parks-green); border:1px solid; border-color: var(--parks-green); color: #fff;}

.button-bg {padding: 15px 50px; text-align: center;}
.button-bg.green-bg {background-color: var(--green)!important;}
.button-bg.blue-bg {background-color: var(--blue)!important;}

/*/// Tables - Stand Alone ///*/

.table {background-color:#fff; vertical-align: middle;}
.table thead tr {background-color: #777; color: #fff; line-height: 36px;}
.table thead tr th {text-transform:uppercase; font-size:18px; letter-spacing:1px; height:24px;}
.table_header {color:#fff; font-size:18px; letter-spacing:1px; height:24px;}
.table_title_text {font-size:15px; font-weight:bold; text-transform:uppercase; letter-spacing:.5px; color:#000;}
.one_third_table {width:33%;}
.one_quarter_table {width: 25%;}
.one_fifth_table {width:20%;}
.one_sixth_table {width:16.66%;}

table * {padding: 1rem !important;}
table ul * {padding: 0 !important;}
table .nopadding {padding: 0 !important;}
table .clearpadding * {padding: 0 !important;}
table tr td a {padding: 0 !important;}
.table-button {padding: .5rem !important;}
.table-last-text-center tr td:last-child{text-align: center;}


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

}

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

}

@media (max-width: 767px) {

}

@media (max-width: 480px) {

}

/*/// Forms ///*/

.fui-group {border: 2px solid #ccc; background-color: #efefef;}
.fui-fieldset {background-color: #efefef !important;}
.fui-legend  {font-size: 22px !important; margin: 0 0 20px 0;}

fieldset {border: 2px solid #ccc; background-color: #efefef; margin-bottom: 20px; padding: 20px;}
.form-group {margin-bottom: 20px; }
.form-group input {border: 2px solid #ccc;}
.form-group textarea {border: 2px solid #ccc;}
.form-group select {border: 2px solid #ccc;}
.form-group label {font-weight: bold; margin: 0 0 5px 0;}

.form-submit {padding: 20px; font-size: 24px; font-weight: bold; background-color: var(--light-green); border-color:var(--green); border-radius: 0px;}

.form-control {border-radius: 0px;}
.ff-form-errors {color: #842029; background-color: #f8d7da; border-color: #f5c2c7;}
.ff-form-errors p {position: relative; padding: 1rem 1rem; margin-bottom: 1rem; border: 1px solid transparent; border-radius: .25rem;}
.ff-errors {color: #dc3545 !important;}
.ff-has-errors {border-color: #dc3545 !important;}
label.required:after {content: "*"; color: #d00; margin-left: 5px;}
.ff-form-success{color: #0f5132; background-color: #d1e7dd; border-color: #badbcc;}

.fui-fieldset {background-color: #fff;}

/*///////////////////////////////////////
//  Footer
//////////////////////////////////////*/

footer {background-color: #1a1819; color: #fff; padding: 50px 3%;}
.logo-footer {display: flex; align-items: center; margin-bottom: 30px;}
footer img {height: 100px; margin: 0px; aspect-ratio: auto 500 / 315;}
.copyright {margin: 50px 0px 0px 0px; display: block;}
footer a {color: #fff;}

.connect-footer {background-color: #fff; height: 150px; padding: 0 3%; line-height: 150px; font-size: 48px; font-weight: bold;}
.connect-footer i {margin: 0 15px;}
.connect-footer a {color: #000; text-decoration: none;}

.server {height: 1px; width: 1px; display: block;}
.server-one {background-color: #0f0;}
.server-two {background-color: #f00;}
.server-three {background: #ff0;}

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

}

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

}

@media (max-width: 767px) {
    .logo-footer {justify-content: center;}
    footer h3,footer h4,footer h5,footer p,footer a {text-align: center;}
    footer a {width: 100%; display: inline-block;}
}

@media (max-width: 480px) {
}

/*//////////////////////////////////
//  Colors
//////////////////////////////////*/

.white {color:#fff !important;}
.xl_lightblue {color:#7cdcea !important;}
.l_lightblue {color:#65d3e4 !important;}
.lightblue {color:#46b7c7 !important;}
.xxl_teal {color:#a4dcdb !important;}
.xl_teal {color:#82ceca !important;}
.l_teal {color:#6cb1ae !important;}
.xl_green {color:#78e0a3 !important;}
.l_green {color:#48b977 !important;}
.green {color:#48b977 !important;}
.xl_blue {color:#75b0ea !important;}
.l_blue {color:#58a1ed !important;}
.blue {color:#4b8bcb !important;}
.xl_yellow {color:#f4d382 !important;}
.l_yellow {color:#f2ca68 !important;}
.yellow {color:#d7b257 !important;}
.xl_orange {color:#ffa785 !important;}
.l_orange {color:#f18f68 !important;}
.orange {color:#d17d5b !important;}
.xl_red {color:#ff8b8b !important;}
.l_red {color:#ff7978 !important;}
.red {color:#de5c5c !important;}
.xl_purple {color:#ad8ede !important;}
.l_purple {color:#9675cc !important;}
.purple {color:#6f53a0 !important;}
.xl_gray {color:#dde1e4 !important;}
.l_gray {color:#d2d6d9 !important;}
.gray {color:#b9bcc1 !important;}
.xl_grayblue {color:#8e9aa6 !important;}
.l_grayblue {color:#7c8a97 !important;}
.grayblue {color:#5d6771 !important;}
.xl_darkblue {color:#465b70 !important;}
.l_darkblue {color:#34495e !important;}
.darkblue {color:#203040 !important;}
.brown {color:#333 !important;}
.darkbrown {color:#262626 !important;}
.black {color:#000 !important;}

.bg_white {background-color:#fff !important;}
.bg_xl_lightblue {background-color:#7cdcea !important;}
.bg_l_lightblue {background-color:#65d3e4 !important;}
.bg_lightblue {background-color:#46b7c7 !important;}
.bg_xxl_teal {background-color:#a4dcdb !important;}
.bg_xl_teal {background-color:#82ceca !important;}
.bg_l_teal {background-color:#6cb1ae !important;}
.bg_xl_green {background-color:#78e0a3 !important;}
.bg_l_green {background-color:#48b977 !important;}
.bg_green {background-color:#48b977 !important;}
.bg_xl_blue {background-color:#75b0ea !important;}
.bg_l_blue {background-color:#58a1ed !important;}
.bg_blue {background-color:#4b8bcb !important;}
.bg_xl_yellow {background-color:#f4d382 !important;}
.bg_l_yellow {background-color:#f2ca68 !important;}
.bg_yellow {background-color:#d7b257 !important;}
.bg_xl_orange {background-color:#ffa785 !important;}
.bg_l_orange {background-color:#f18f68 !important;}
.bg_orange {background-color:#d17d5b !important;}
.bg_xl_red {background-color:#ff8b8b !important;}
.bg_l_red {background-color:#ff7978 !important;}
.bg_red {background-color:#de5c5c !important;}
.bg_xl_purple {background-color:#ad8ede !important;}
.bg_l_purple {background-color:#9675cc !important;}
.bg_purple {background-color:#6f53a0 !important;}
.bg_xl_gray {background-color:#dde1e4 !important;}
.bg_l_gray {background-color:#d2d6d9 !important;}
.bg_gray {background-color:#b9bcc1 !important;}
.bg_xl_grayblue {background-color:#8e9aa6 !important;}
.bg_l_grayblue {background-color:#7c8a97 !important;}
.bg_grayblue {background-color:#5d6771 !important;}
.bg_xl_darkblue {background-color:#465b70 !important;}
.bg_l_darkblue {background-color:#34495e !important;}
.bg_darkblue {background-color:#203040 !important;}
.bg_brown {background-color:#333 !important;}
.bg_darkbrown {background-color:#262626 !important;}
.bg_black {background-color:#000 !important;}
.bg_footer_gray {background-color:#ebeef0 !important;}
.bg_red {background-color: #bd1921 !important;}
.bg_pompano_blue {background-color: #009dc2 !important;}
.bg_pompano_blue:hover {color: #fff; text-decoration: underline;}

.bg_light_green {background-color: #76b413 !important;}


/*//////////////////////////////////
//  Accessibility
//////////////////////////////////*/

.img_link_fix {color: transparent; position: absolute; font-size: 1px;}

.show-on-focus {position: absolute; top: -10em; background: #ffffff; padding: 1em; margin: 1em; color: #203040; display: block; font-weight: 600; }
.show-on-focus:focus {position: inherit; top: auto; outline: 2px solid #fdb81e; }


@media (max-width: 480px) {

}