/* CSS Document */

:root {
        --pba-grey: #3d4548; --pba-pink: #ed207b; --pba-blue: #009cc2; --pba-green: #bbd631; --pba-orange: #f37230; --text-color: #262626;
        --pba-pink-rgba: 237,33,124; --pba-blue-rgba: 0,157,194; --pba-green-rgba: 188,214,49; --pba-orange-rgba: 243,114,48;
        --box-shadow: 0px 0px 10px 0px;
      }

* {transition: all 0.5s ease;}

/* Prevent Scrolling While Menu is Open */
html, body{
	font-family: 'Roboto', sans-serif;
}

/* Colors */
.pba-pink {color:var(--pba-pink);}
.pba-blue {color:var(--pba-blue);}
.pba-green {color:var(--pba-green);}
.pba-orange {color:var(--pba-orange);}

/* Header */

header {position: sticky; top: 0; width: 100%; padding: 0px 35px; background-color: #fff; z-index: 10; height: 120px;}
header img {height:50px; margin:35px 0 35px 0px;}
header i {font-size: 24px; float:right; line-height:40px; margin:6px 0;}

#nav-button {height: 60px; border:2px solid var(--pba-pink); color: var(--pba-pink); float:right; padding:10px 20px; cursor:pointer; margin: 35px 0 0 1vw;}
#nav-button:hover {color:var(--pba-pink);}
#nav-button span {margin: 0 20px 0 0; font-size:24px; line-height:36px; float:left;}
#nav-button.search-button {border: none; color: var(--pba-grey); padding: 10px 10px 10px 0;}

.nav-text {color: var(--pba-pink); float:right; line-height: 60px; margin: 35px 1vw 0 1vw; font-size: calc(10px + .5vw);}

.scroll-header {border-bottom: 1px solid #ccc;}

.error-header {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-header p {margin: 0;}

/* Slider */

.carousel-home {margin: 5px 50px 15px 50px;}

.slider-full {display: block;}
.slider-mobile {display: none;}

/* Nav */

.nav_logo {padding: 50px 100px 40px 30px; }

nav ul {list-style-type:none; padding-inline-start: 0px;}
nav ul li a {width:100%; float:left;}
nav ul li a span {color: var(--text-color); margin:10px 0; text-align:center; display:block;}
nav ul li a:hover .nav-text {color: var(--text-color);}
nav ul li a img {width:auto; height:85px; margin:8px auto; float:left;}

.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);}
.orange:hover ul li a:hover {color: var(--pba-orange);}
.blue:hover {box-shadow: 0px 0px 10px 0px rgba(var(--pba-blue-rgba),0.5), inset 0px 0px 0px 3px rgba(var(--pba-blue-rgba),1);}
.blue:hover ul li a:hover {color: var(--pba-blue);}
.green:hover {box-shadow: 0px 0px 10px 0px rgba(var(--pba-green-rgba),0.5), inset 0px 0px 0px 3px rgba(var(--pba-green-rgba),1);}
.green:hover ul li a:hover {color: var(--pba-green);}
.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);}
.pink:hover ul li a:hover {color: var(--pba-pink);}

nav ul li a .orange  {color: var(--pba-orange);}
nav ul li a .blue  {color: var(--pba-blue);}
nav ul li a .green  {color: var(--pba-green);}
nav ul li a .pink  {color: var(--pba-pink);}

nav ul li a i {font-size:40px; width:30%; float:left; margin:10px 0px; text-align:center; color:#000;}

nav ul li ul li a {margin: 0px; padding: 10px 50px; color: var(--text-color);}

.nav-text-large {font-size:1.5em; float:left; width: 70%;}

.btn-open i:nth-of-type(2) {display:none;}
.btn-close {border:none;}
.btn-close span, .btn-close i:first-of-type {display:none;}
.btn-close i:nth-of-type(2) {display:block;}

.nav-img-btn {padding: 50px 10% 0 10%; border-top: 1px solid #ccc;}



.nav-search {width:100%; height:100%; border-top:1px solid #ccc; float: left;}
.nav-search a {height: 35px; line-height: 70px; padding: 0 15px; color: var(--pba-blue); font-weight: 500;}
.nav-search span {padding: 0 20px; font-weight: bold; height: 70px; line-height: 70px; font-size: 18px;}
.nav-search input {border-bottom: 1px solid #ccc; border-top: none; border-left: none; border-right: none; /* width: 70%; */}
.nav-search .active {background-color: var(--pba-pink); color: #fff; padding: 4px 10px; border-radius: 5px;}
.nav-search form {height: 70px; float: left; width: 100%; margin: 10px 0; padding: 0 5%;}
.nav-search form input {margin: 20px 0; line-height: 30px; font-size: 16px; font-weight: bold; width: 70%;}
.nav-search button {margin: 0px 10px; border-radius: 5px; background-color: var(--pba-blue); color: var(--white); border: none; padding: 5px 10px; font-weight: 500; width: 20%;}

.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;}

/* Breadcrubms */

.breadcrumb-container {width: 100%; height: 40px; border: 1px solid #ccc; margin: 0 0 25px 0; line-height: 40px; font-size: 14px; color: #ccc; padding: 0 5px;}
.breadcrumb-container:hover {color: #ccc;}
.breadcrumb-container a {color: var(--pba-grey); margin: 0 10px; text-transform: capitalize;}

/* Main Content */

.pba-shadow {box-shadow: 0px 0px 10px 0px rgba(204,204,204,0.5);}

.std-section {margin:50px 35px;}
.std-section-two {margin:25px 35px 50px 35px;}
.std-section-three {margin:15px 35px 50px 35px;}
.std-section-four {margin:0px 35px 50px 35px;}
.std-section-five {margin:25px 35px;}
.std-section-six {margin:15px 35px;}
.std-section-seven {margin:0px 35px;}
.std-section-eight {margin:0px 50px;}

.center {display: block; margin: 0 auto;}

.home-boxes {padding: 35px; color: #505050;}
.home-boxes img {width: 100%; height: auto; margin: 0 0 20px 0;}
.home-boxes h3 {font-size: 18px; text-transform: uppercase; letter-spacing: .15em;}
.home-boxes p {text-align: justify;}

.img-full {width:100%;}
.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%; min-width: 200px;}
.img_center {margin: 0px auto; display: block; float: none;}
.img_200 {width: 200px;}
.img-half-m-full {width: 50%;}

.page-top-img {margin:0 0 30px 0;}

.clearfix {clear:both;}

p {margin: 0 0 30px 0;}

hr {width: 50%; clear: both; padding: 20px 0;}

.tagline {padding: 35px 35px 5px 35px; color: var(--pba-grey);}
.contact-home-section {padding: 35px; color: var(--pba-grey);}
.contact-section-icons {padding: 35px 0; font-size: 20px;}
.contact-section-icons i {line-height: 40px; margin: 0 20px 0 0;}

.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;}

/* Sidebar */

#sidebar {background-color: #fff; margin: 0; border: 1px solid rgba(0, 0, 0, 0.125);}
#sidebar h2 {font-size: 20px; font-weight: bold; padding: 20px; margin: 0; background-color: var(--pba-pink); color:#fff;}
#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;}

/* Widths */

.full_width {width: 100%;}
.twothird_width {width: 66%;}
.half_width {width: 50%;}
.third_width {width: 33%;}
.quarter_width {width: 25%;}

/* Buttons */

.button {padding: 15px 50px; border: 2px solid; margin: 10px 0; display: block; width: 250px; text-align: center;}
.button.green {color: var(--pba-green);}
.button.pink {color: var(--pba-pink);}
.button.blue {color: var(--pba-blue);}
.button.orange {color: var(--pba-orange);}
.button-bg.green {background-color: var(--pba-green);}
.button-bg.pink {background-color: var(--pba-pink);}
.button-bg.blue {background-color: var(--pba-blue); color: #fff;}
.button-bg.orange {background-color: var(--pba-orange);}

.button-right {padding: 15px 50px; margin: 10px 0 10px 30px; display: block; width: 250px; text-align: center; float: right;}

.sub-button {background-color: var(--pba-pink); color: #000; width: fit-content; padding: 10px; margin: 0 auto; display: block; text-align: center; border-radius: 3px;font-weight: bold;}
.sub-button:hover {background-color: #fff; color: var(--pba-pink);}

/* Forms */

*:focus {outline: none;}

fieldset {border:2px solid #ccc; background-color:#eee; margin-bottom:20px;}
legend {margin:0 0 20px 20px; font-size:18px; font-weight:bold; white-space: normal; display: table; width:auto;}
.element * { padding:5px; margin:3px; font-size:16px; font-weight: 300; border-radius:unset;}
.element label { float:left; font-size:inherit; font-weight: bold;}
.element input {border:2px solid #cccccc; font-size: 16px;}
.element input:focus {border:2px solid #cccccc;}
.element input.text {width:100%;}
.element input.text_full {float:left; width:730px;}
.element input.text_100 {float:left; width:100%; }
.element input.radio { width:13px; margin-right:10px;}
.element select {border:2px solid #cccccc; width:100%; padding: 6px;}
.element input.file_upload {padding: 4px 5px;}
.file_upload {background-color: #fff;}
.checkbox {padding:5px; margin:3px;}
.checkbox_container {float:left; padding:5px; margin:3px;}
.checkbox_text {margin-left:5px; font-weight:bold;}
.element .textarea { width:730px; border:2px solid #cccccc; margin-bottom:20px;}
.element .textarea_half { width:100%; border:2px solid #cccccc; margin-bottom:20px;}
.element .textarea_no_label { width:100%; border:2px solid #cccccc; height:100px; margin:8px 3px 5px 3px;}
.element .highlight { border:2px solid #ff0000;}
.element .highlight input:focus {border:2px solid #ff0000;}
.element #submit {text-align:center; margin-bottom:20px; width:175px; font-weight:bold; -webkit-appearance:none; border:2px solid #203040;}

#form-button {background-color: var(--pba-pink); color: white; font-weight: bold; padding: 10px 40px;}
#form-button:hover {color: white; text-decoration: underline;}

ul.errors li {color: #f00; font-weight: bold;}

/* Error Pages */

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

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


/* Footer */

footer {background-color: #222328; padding: 50px 0 0 0;}
footer h4 {color: #fff; text-align: center;}
footer input {width: 80%; display: block; margin: 15px auto; height: 45px; font-size: 14px; padding: 0 15px;}
footer .social-footer {display: block; width: 400px; margin: 0 auto;}
.social-footer a {color: #a4a2a2; font-size: 48px; margin: 0 5px;}
.social-footer a:first-of-type {margin: 0 2% 0 37%;}
.social-footer a:last-of-type {margin: 0 37% 0 2%;}
.social-footer a:hover {color: white;}
.footer-link {text-align: center; color: #a4a2a2; display: block; text-decoration: underline; line-height: 40px;}
.footer-city-logo {max-width: 200px; display: block; margin-left: auto; margin-right: auto;}

.logo-section {background-color: #fafafa; padding: 50px 100px;}
.logo-section img {width: 100px; margin: 0px auto; display: block;}
.logo-section a:hover img {filter: brightness(0.1);}

.email-list-container {width: auto; display: block; margin: 20px auto;}
.email-list-container input {margin: 15px auto; height: 45px; border: none; padding: 0 15px; font-size: 14px; font-weight: bold;}
.email-list-container input:focus {border: none;}

.home-submit-button {margin: -60px 0 0 0;}
.home-submit-button input {width: 100px; float: right; margin: 0; color: white; background-color: var(--pba-pink); margin: 0 10% 0 0;}
.home-submit-button input:hover {text-decoration: underline;}

.partners-footer {padding: 0px 35px;}
.partners-footer h3 {color: #fff; text-align: center;}
.partner-logos img {width: 25%; float: left;}
.partners-footer .col-md-4 {border-right: 1px solid #000;}
.partners-footer .col-md-4:last-of-type {border: none;}

.lower-footer {background-color: #494b52; margin: 20px 0 0px 0; padding: 50px 0;}
.lower-footer-link {text-align: center; color: #fff; display: block; text-decoration: underline; line-height: 40px;}
/* Breakpoints */

#mobile-show {display: none;}
.mobile-show {display: none;}
.desktop-hide {display: block;}

@media (max-width: 1200px) {
    .logo-section {padding: 50px 10px;}
    .logo-section img {width: 80px; margin: 0px auto; display: block;}
}

@media (max-width: 992px) {
    .partners-footer {margin: 20px 0 0 0;}

    .nav-text {display: none;}

}

@media (max-width: 768px) {

	#mobile-show {display: block;}
    .mobile-show {display: block;}
    .desktop-hide {display: none;}

    .slider-full {display: none;}
    .slider-mobile {display: block;}

    header i {font-size: 30px;}
    header nav a span {display: none;}
    header nav a {border: none;}

    .button {margin: 10px auto;}

    .logo-section {padding: 30px 50px; }
    .logo-section a img {padding: 30px 0px;}

    footer {padding: 30px 0;}
    .partners-footer .col-md-4 {margin: 0 0 30px 0; border-right: none;}

}

@media (max-width: 576px) {
    header i {font-size: 30px;}
    header img {width: 200px; height: auto; margin: 45px 0 35px 0; }
    header nav a {height: 50px; border:none; color: var(--pba-pink); float:right; padding:10px 0px 10px 20px; cursor:pointer; margin: 30px 0 0 0;}
    header nav a:hover {color:var(--pba-pink);}
    header nav a span {display: none;}

    .logo-section {padding: 20px;}
    .logo-section a img{padding: 20px 0; width: 50px;}

    .nav-search form input {width: 60%}
    .nav-search button {width: 30%}

    .img-half-m-full {width: 100%;}
}

@media (max-width: 400px) {

    .logo-section {padding: 20px;}
    .logo-section a img{padding: 20px 0; width: 30px;}
}
