/* CSS Document Shared Across Pompano Beach Sites */

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

:root {
        --white: #fff;
        --green: #00763e;
        --green-rgba: 0,118,62;
        --yellow: #ffb715;
        --blue: #2D7D95;
        --city-blue: #009dc2;
        --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-grey: #3d4548;
        --parks-blue: #009cc2;
        --parks-green: #018b4f;
        --parks-green-border: #023e24;
        --parks-green-rgba: 1, 139, 79;
        --downtown-yellow: #ffb715;
        --downtown-blue: #229abf;
        --downtown-green:#00763e;
        --downtown-orange: #f37230;
        --downtown-pink: #ed207b;
        --downtown-teal: #66a785;
      }

* {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;}

.downtown-blue {color: var(--downtown-blue);}
.downtown-yellow {color: var(--downtown-yellow);}
.downtown-green {color: var(--downtown-green);}
.downtown-orange {color: var(--downtown-orange);}
.downtown-pink {color: var(--downtown-pink);}
.downtown-teal {color: var(--downtown-teal);}

.bg-downtown-blue {background-color: var(--downtown-blue);}
.bg-downtown-yellow {background-color: var(--downtown-yellow);}
.bg-downtown-green {background-color: var(--downtown-green);}
.bg-downtown-orange {background-color: var(--downtown-orange);}
.bg-downtown-pink {background-color: var(--downtown-pink);}
.bg-downtown-teal {background-color: var(--downtown-teal);}

/* Other colors */
.red {color: #f00;}
.white {color: #fff;}
.blue {color: var(--blue);}

/*///////////////////////////////////////
//  Misc Parts                         //
///////////////////////////////////////*/

.sectionBar-cityBlue {background-color: var(--city-blue); color: #fff; padding: 20px; margin: 0 0 20px 0;}
.sectionBar-cityLightGreen {background-color: var(--light-green); color: #fff; padding: 20px; margin: 0 0 20px 0;}
.sectionBar-cityDarkGreen {background-color: var(--parks-green); color: #fff; padding: 20px; margin: 0 0 20px 0;}

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

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

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

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

.btn-pba-pink {background-color: var(--pba-pink); 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); 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); 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); 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); 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); 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);}
.button-bg.blue-bg {background-color: var(--blue);}

/*///////////////////////////////////////
//  Matrix
//////////////////////////////////////*/

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

/*///////////////////////////////////////
//  Utility Classes                    //
///////////////////////////////////////*/

.callout {padding: 1.25rem; margin-top: 1.25rem; margin-bottom: 1.25rem; border: 1px solid #e9ecef; border-left-width: .25rem; border-radius: .25rem}
.callout-info {border-left-color: var(--city-blue);}
.callout-warning {border-left-color: var(--yellow)}
.callout-danger {border-left-color: #f00;}

.br-desktop {display: block;}
.br-mobile {display: none;}

@media (max-width: 768px)
{
    .br-desktop {display: none;}
    .br-mobile {display: block;}
}