/*
This CSS resource incorporates links to font software which is the valuable copyrighted
property of Monotype Imaging and/or its suppliers. You may not attempt to copy, install,
redistribute, convert, modify or reverse engineer this font software. Please contact Monotype
Imaging with any questions regarding Web Fonts:  http://www.monotype.com/
*/

/*Global*/
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font: 15px/1.5 'CachetW05-Medium', Verdana;
    background-color: #ffffff;
}

header{
    padding-top: 25px;
    min-height: 70px;
}

a {
    text-decoration: none;
    font-size: 16px;
}

details summary { 
    cursor: pointer;
}

details summary > * { 
    display: inline;
}

/*Media Queries*/
.rotate-notice {
    display: none;
    background-color: #ed1c24;
    color: white;
    padding: 10px;
    text-align: center;
    font-size: 3.25vw;
}

/*Global Classes*/
.container{
    width:80%;
    margin:auto;
    overflow: hidden;
}

.hamburger_menu{
    display: none;
}

.hamburger_wrapper{
    display: none;
}

.page_content_3{
    max-width: 85%;
    margin-left: auto;
    margin-right: auto;
    display: flex;                    
    justify-content: space-between;   
    align-items: flex-start;
    padding-top: 15px;
}

/*Breadcrumb classes*/
ul.breadcrumb {
    padding: 10px 16px;
    list-style: none;
  }
  
ul.breadcrumb li {
    display: inline;
    font-size: 18px;
}
  
  
ul.breadcrumb li+li:before {
    padding: 8px;
    color: #ffffff;
    content: "/\00a0";
}
  
  
ul.breadcrumb li a {
    color: #ffffff;
    text-decoration: none;
    text-shadow: 2px 2px 4px #000000;
}
  

ul.breadcrumb li a:hover {
    text-decoration: underline;
}

/* Adult/Youth Sports page classes*/
#youth_sports_links {
    text-align: center;
    padding-top: 5px;
}

#youth_sports_links p, #youth_sports_links a{
    font-size: 1.5vw;
    color: #dd5828;
}

#sports_list{
    width: 98%;
    text-align: center; 
    margin-left: auto;
    margin-right: auto;
    padding-top: 10px;
    padding-bottom: 15px;
}

#sports_list .sport_box {
    display: inline-block;
    vertical-align: bottom;
    max-width: 15%;
}

#sports_list .sport_box img{
    max-width: 95%;
}

#Sport_Info {
    max-width: 85%;
    margin-left: auto;
    margin-right: auto;
    display: flex;                    
    justify-content: space-between;   
    align-items: flex-start;
    padding-top: 15px;
}

.sport_faq {
    max-width: 85%;
    margin-left: auto;
    margin-right: auto;
    padding-top: 10px;
}

.sidebar {
    width: 20%;
}

.sport_content{
    width: 70%;
}

.sport_content h1 {
    font-size: 2vw;
} 

.sport_content p {
    padding-top: 10px;
    font-size: 1.40vw;
}

/*General Logo classes*/
.logo {
    max-width:50%;
    float: left;
}

.logo img {
    object-fit: contain;
    max-width: 25%;
    padding: 0 25px 0 0;
}

.logo #aoi {
    object-fit: contain;
    max-width: 25%;
    padding: 0 0 2px 0;
}

/*General Location Class*/
header .location {
    margin-top: 60px;
    font-family: "CachetW05-Medium";
}

header .location h2 {
    float: right;
    margin: 0;
}

/*General Navbar Classes*/
.menu {
    padding: 3px 0 3px 0;
    width:100%;
    margin:auto;
    overflow: hidden;
}

.menu nav {
    overflow: hidden;
    float: right;
    padding-right: 15px;
}

.menu nav a {
    float: left;
    font-size: 16px;
    text-align: center;
    padding: 14px 16px;
    transition: color 1.25s;
}

.menu nav .home_a {
    position: relative;
    top: -3px;
    transition: background-color 0.5s, color 1.5s;
    border-radius: 20px;
}

/*Dropdown nav classes*/
.dropdown {
    float: left;
    overflow: hidden;
}

.dropdown .button{
    font-size: 16px;
    border: none;
    outline: none;
    padding: 14px 16px;
    border-radius: 20px;
    transition: background-color 0.5s, color 0.6s;
    font-family: inherit; /* Important for vertical align on mobile phones */
    margin: 0;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #ffffff;
    min-width: 160px;
    border-radius: 20px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

.dropdown-content a {
    float: left;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
}

.dropdown:hover .dropdown-content {
    display: block;
}

.button:focus + .dropdown-content,
.button:focus-within + .dropdown-content {
    display: block;
}

/*Contact classes*/
.contact {
    width: 100%;
}

.contact .container ul{
    text-align: center;
    padding: 5px 0 5px 0;
    width: 100%;
}

.contact .container ul li{
    display: inline;
    color: #ffffff;
    padding-right: 15px;
    padding-left: 15px;
    font-size: 1.5vw;
    text-shadow: 2px 2px 4px #000000;
}

/*Footer Classes*/
footer #copyright{
    float: right;
}

footer #copyright p{
    color: #ffffff;
    text-shadow: 2px 2px 4px #000000;
}

/* Slideshow container */
.weather_warning {
    display: none;
    background-color: #a92b31;
    color: #ffffff;
    text-align: center;
    font-size: 1.15vw;
    padding-left:  15px;
    padding-right: 15px;
}

.slideshow-container {
    max-width: 85%;
    position: relative;
    margin: auto;
}
  
.mySlides {
    display: none;
}
  
.prev, .next {
    cursor: pointer;
    position: absolute;
    top: 50%;
    width: auto;
    margin-top: -22px;
    padding: 16px;
    color: #ffffff;
    font-weight: bold;
    font-size: 18px;
    transition: 0.6s ease;
    border-radius: 0 3px 3px 0;
    user-select: none;
    background-color: rgba(0,0,0,0.5);
}

.next {
    right: 0;
    border-radius: 3px 0 0 3px;
}

.prev:hover, .next:hover {
    background-color: rgba(0,0,0,0.8);
}
  
.slideshow-container .button_0B {
    background-color: #0089d0;
    padding: 5px 8px;
    position: absolute;
    bottom: 15%;
    left: 40%;
    width: 20%;
    text-align: center;
    transition: background-color 1s, border 1s;
}
  
.slideshow-container .button_0B a {
      color: #ffffff;
      font-size: 1.75vw;
      text-align: center;
      text-shadow: 2px 2px 4px #000000;
}
  
.slideshow-container .button_0B:hover {
      background-color: #0060af;
      border: #0060af 1px outset;
}

#fouth_hours {
    padding: 20px;
}
  
/* The dots/bullets/indicators */
.dot {
    position: relative;        
    cursor: pointer;
    height: 15px;
    width: 15px;
    margin: 0 2px;
    background-color: #0089d0;
    border-radius: 50%;
    display: inline-block;
    transition: background-color 0.6s ease;
}
  
.active, .dot:hover {
    background-color: #0060af;
}
  
/* Fading animation */
.fade {
    animation-name: fade;
    animation-duration: 2s;
}
  
@keyframes fade {
    from {opacity: .4}
    to {opacity: 1}
} 

/*Main Page Common Link Boxes*/
#common_links {
    padding-top: 20px;
    padding-bottom: 20px;
}

#common_links .container {
    width: 80%;
    text-align: center;
}

#common_links .box {
    display: inline-block;
    vertical-align: top;
    text-align: center;
    width: 30%;
}

#common_links .box img{
    max-width: 80%;
    border: #0089d0 1px ridge;
}

#common_links .button_0B{
    margin-left: auto;
    margin-right: auto;
    max-width: 55%;
    transition: background-color 0.5s, border 0.5s;
}

#common_links .box a{
    color: #ffffff;
    text-shadow: 2px 2px 4px #000000;
}

#common_links .box .button_0B:hover{
    background-color: #0060af;
    border: #0060af 1px outset;
}

/*Main Page Facebook Page Insert*/

#facebook_blurb {
    background-color: #0060af;
    font-family: "CachetW05-Medium";
    color: #ffffff;
    text-shadow: 2px 2px 4px #000000;
    padding: 15px, 0, 15px, 0;
    border-top: #0089d0 2px;
    border-bottom: #0089d0 2px outset;
    text-align: center;
}

#facebook_embed {
    width: 90%;
    margin: auto;
    text-align: right;
    background-image: url("../images/Photos/volleyball_horizontal.jpg");
    background-size: cover;
    background-position: center; 
    background-repeat: no-repeat;
}

#facebook_embed .fb-page {
    padding: 10px
}


/*BLUE THEME*/
/*Blue Hexcodes | Light Blue: #00aeef | Medium Blue: #0089d0 | Dark Blue: #0060af | Accent Purple Light: #92278f | Accent Purple Dark: #5c2e91
/*Header Blue*/
#header_bl{
    border-bottom: #0089d0 2px outset;
}

header #location_bl h2 {
    color: #0089d0;
}

#menu_bl, .menu_bl{
    background-color: #0060af;
    border-bottom: #0089d0 2px outset;
}

#menu_bl nav a, .menu_bl nav a{
    color: #0060af;
}

#menu_bl nav .home_a, .menu_bl nav .home_a{
    color: #ffffff;
    text-shadow: 2px 2px 4px #000000;
}

#menu_bl nav a:hover, .menu_bl nav a:hover, #menu_bl nav .home_a:hover, .menu_bl nav .home_a:hover  .dropdown:hover #button_1B, .dropdown:hover .button_1B{
    background-color: #ffffff;
    border-radius: 20px;
    color:#92278f;
    text-shadow: none;
}

.dropdown #button_1B, .dropdown .button_1B {
    color: white;
    background-color: inherit;
    text-shadow: 2px 2px 4px #000000;
}

#dropdown-content_bl, .dropdown-content_bl {
    color: #0060af;
}

/*Contact info_Blue*/
#contact_bl{
    background-color: #92278f;
    border-bottom: #5c2e91 2px outset;
}

/*Footer Blue*/
#footer_bl{
    background-color: #0060af;
}

/*Blue Buttons*/
.button_0B { /*Subsection buttons*/
    background-color: #0089d0;
    border-radius: 15px;
    border: #0089d0 1px outset;
}

.button_0B a {
    font-size: 1.5vw;
}

#button_1B, .button_1B { /*Navbar dropdown*/
    background-color: #ffffff;
}

/*Blue Breadcrumb*/
#breadcrumb_bl {
    background-color: #5c2e91;
}


/*PURPLE THEME*/
/*Purple Hexcodes | Light Purple: #c6168d | Medium Purple: #92278f | Dark Purple: #5c2e91 | Accent Red Light #ed1c24 | Accent Red Dark: #a92b31*/
/*Header Purple*/
#header_pur{
    border-bottom: #92278f 2px outset;
}

header #location_pur h2 {
    color: #92278f;
}

#menu_pur, .menu_pur {
    background-color: #5c2e91 !important; 
    border-bottom: #92278f 2px outset;
}

#menu_pur nav a, .menu_pur nav a {
    color: #5c2e91;
}

#menu_pur nav .home_a, .menu_pur nav .home_a {
    color: #ffffff;
    text-shadow: 2px 2px 4px #000000;
}

#menu_pur nav a:hover,.menu_pur nav a:hover, #menu_pur nav .home_a:hover, .menu_pur nav .home_a:hover, .dropdown:hover #button_1P, .dropdown:hover .button_1P{
    background-color: #ffffff;
    border-radius: 20px;
    color:#ed1c24;
    text-shadow: none;
}

.dropdown #button_1P, .dropdown .button_1P{
    color: white;
    background-color: inherit;
    text-shadow: 2px 2px 4px #000000;
}

#dropdown-content_pur, .dropdown-content_pur {
    color: #5c2e91;
}

/*Contact info_Purple*/
#contact_pur{
    background-color: #ed1c24;
    border-bottom: #a92b31 2px outset;
}

/*Footer Purple*/
#footer_pur{
    background-color: #5c2e91;
}

/*Purple Buttons*/
#button_1P, .button_1P { /*Navbar dropdown*/
    background-color: #ffffff;
}

/*Purple Breadcrumb*/
#breadcrumb_pur {
    background-color: #a92b31;
}


/*RED THEME*/
/*Red Hexcodes | Light Red: #f15922 | Medium Red: #ed1c24 | Dark Red: #a92b31 | Accent Orange Light: #f47920 | Accent Orange Dark: #dd5828*/
/*Header Red*/
#header_rd{
    border-bottom: #ed1c24 2px outset;
}

header #location_rd h2 {
    color: #ed1c24;
}

#menu_rd, .menu_rd {
    background-color: #a92b31 !important;
    border-bottom: #ed1c24 2px outset;
}

#menu_rd nav a, .menu_rd nav a {
    color: #a92b31;
}

#menu_rd nav .home_a, .menu_rd nav .home_a {
    color: #ffffff;
    text-shadow: 2px 2px 4px #000000;
}

#menu_rd nav a:hover, .menu_rd nav a:hover, #menu_rd nav .home_a:hover, .menu_rd nav .home_a:hover, .dropdown:hover #button_1R, .dropdown:hover .button_1R{
    background-color: #ffffff;
    border-radius: 20px;
    color:#f47920;
    text-shadow: none;
}

.dropdown #button_1R, .dropdown .button_1R {
    color: white;
    background-color: inherit;
    text-shadow: 2px 2px 4px #000000;
}

#dropdown-content_rd, .dropdown-content_rd {
    color: #a92b31;
}

/*Contact info_Red*/
#contact_rd{
    background-color: #f47920;
    border-bottom: #dd5828 2px outset;
}

/*Footer Red*/
#footer_rd{
    background-color: #a92b31;
}

/*Red Buttons*/
#button_1R, .button_1R { /*Navbar dropdown*/
    background-color: #ffffff;
}

/*Red Breadcrumb*/
#breadcrumb_rd {
    background-color: #dd5828;
}

/*ORANGE THEME*/
/*Orange Hexcodes | Light Orange: #fcaf17 | Medium Orange: #f47920 | Dark Orange: #dd5828 | Accent Green Light #01a490 | Accent Green Dark: #006b6b*/
/*Header Orange*/
#header_or{
    border-bottom: #f47920 2px outset;
}

header #location_or h2 {
    color: #f47920;
}

#menu_or, .menu_or {
    background-color: #dd5828 !important;
    border-bottom: #f47920 2px outset;
}

#menu_or nav a, .menu_or nav a {
    color: #dd5828;
}

#menu_or nav .home_a, .menu_or nav .home_a {
    color: #ffffff;
    text-shadow: 2px 2px 4px #000000;
}

#menu_or nav a:hover, .menu_or nav a:hover, #menu_or nav .home_a:hover, .menu_or nav .home_a:hover, .dropdown:hover #button_1O, .dropdown:hover .button_1O {
    background-color: #ffffff;
    border-radius: 20px;
    color:#01a490;
    text-shadow: none;
}

.dropdown #button_1O, .dropdown .button_1O {
    color: white;
    background-color: inherit;
    text-shadow: 2px 2px 4px #000000;
}

#dropdown-content_or, .dropdown-content_or {
    color: #dd5828;
}

/*Contact info_Orange*/
#contact_or{
    background-color: #01a490;
    border-bottom: #006b6b 2px outset;
}

/*Footer Orange*/
#footer_or{
    background-color: #dd5828;
}

/*Orange Buttons*/
#button_1O, .button_1O { /*Navbar dropdown*/
    background-color: #ffffff;
}

/*Orange Breadcrumb*/
#breadcrumb_or {
    background-color: #006b6b;
}

/*GREEN THEME*/
/*Teal Hexcodes | Light Green: #20bdbe | Medium Green: #01a490 | Dark Green: #006b6b | Accent Blue Light #0089d0 | Accent Blue Dark: #0060af*/
/*Header Green*/
#header_gr{
    border-bottom: #01a490 2px outset;
}

header #location_gr h2 {
    color: #01a490;
}

#menu_gr, .menu_gr {
    background-color: #006b6b;
    border-bottom: #01a490 2px outset;
}

#menu_gr nav a, .menu_gr nav a {
    color: #006b6b;
}

#menu_gr nav .home_a, .menu_gr nav .home_a {
    color: #ffffff;
    text-shadow: 2px 2px 4px #000000;
}

#menu_gr nav a:hover, .menu_gr nav a:hover, #menu_gr nav .home_a:hover, .menu_gr nav .home_a:hover, .dropdown:hover #button_1G, .dropdown:hover .button_1G{
    background-color: #ffffff;
    border-radius: 20px;
    color:#0089d0;
    text-shadow: none;
}

.dropdown #button_1G, .dropdown .button_1G {
    color: white;
    background-color: inherit;
    text-shadow: 2px 2px 4px #000000;
}

#dropdown-content_gr, .dropdown_content_gr {
    color: #006b6b;
}

/*Contact info_Green*/
#contact_gr{
    background-color: #0089d0;
    border-bottom: #0060af 2px outset;
}

/*Footer Green*/
#footer_gr{
    background-color: #006b6b;
}

/*Green Buttons*/
#button_1G, .button_1G { /*Navbar dropdown*/
    background-color: #ffffff;
}

/*Green Breadcrumb*/
#breadcrumb_gr {
    background-color: #0060af;
}

/*Page Specific classes*/

/*About*/
.page_content {
    font-size: 1.25vw;
    width: 80%;
    margin-left: 10%;
}

.page_content p{
    text-indent: 2%;
}

.page_content #mission_statement p{
    background-color: #92278f;
    border-radius: 15px;
    padding: 10px;
    color: #ffffff;
    text-shadow: 2px 2px 4px #000000;
}

.page_content #our_history{
    padding-top: 10px;
}

#our_history img{
    max-width: 40%;
}

.page_content #our_history h3{
    padding-top: 5px;
    padding-bottom: 3px;
    color: #a92b31;
}

.page_content #our_history #P1 {
    float: right;
    padding-left: 10px;
}

.page_content #our_history #P2 {
    float: left;
    padding-right: 10px;
}    

.page_content #our_history .helper{
    text-align: center;
    padding: 15px;
}

/*Team*/
.page_content_2 {
    width: 90%;
    margin-left: 5%;
    text-align: center;
    padding-top: 5px;
}

.page_content_2 .box {
    list-style-type: none;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    padding-top: 15px;
    padding-bottom: 15px;
}

.page_content_2 .box div {
    display: inline-block;
    vertical-align: top;
    width: 18%;
    padding: 5px, 5px, 5px, 5px;
}

.page_content_2 .box div img {
    max-width: 85%;
}

.page_content_2 .box .image_placeholder{
    width: 100%;
    height: 265px;
    background-color: #f0f0f0; /* or match your site’s background */
    color: #666;
    display: flex;
    justify-content: center;
    align-items: center;
    font-style: italic;
    border-radius: 5px;
}
/*FAQ's*/
.faqs .label_header{
    background-color: #01a490;
    border-bottom: #006b6b 2px outset;
    text-align: left;
}

.label_header h1{ 
    color: #ffffff;
    margin-left: 7%;
}

.faqs .faq_content{
    margin-left: 5%;
    padding-top: 5px;
}

.faqs .faq_content details{
    width: 95%;
    padding: 3px 0 3px 0; 
}

.faqs .faq_content summary {
    margin-left: 2%;
    list-style: none;
    color: #f47920;
    border-radius: 20px;
    padding-left: 5px;
    font-size: 1.5vw;
}

.faqs .faq_content summary img{
    padding: 0 10px 0 5px;
}
summary::-webkit-details-marker {
    display: none;
  }

.faq_content #O1, #O2, #O3, #O4, #O5, #O6 {
    color: #01a490;
}

.faqs .faq_content details div {
    margin-left: 4.75%;
    padding-top: 5px;
    width: 80%;
    font-size: 1.35vw;
    color: #f47920;
}

.faqs .faq_content details div a {
    font-size: 1.35vw;
    color: #006b6b;
}

/*Rules*/
#y_rules {
    width: 60%;
}
#y_rules details{
    padding: 0 1rem;
    width: 100%;
    padding-bottom: 35px;
}
#y_rules summary{
    padding: 10px;
    color: #ffffff;
    text-shadow: 2px 2px 4px #000000;
    border-radius: 15px;
}

#y_rules ul{
    margin-left: 3%;
}

#y_rules li {
    font-size: 1.25vw;
    padding-bottom: 5px;
}

#rules_sidebar{
    width: 35%;
}

/*Volunteer*/
.page_content_2 .volunteer_info {
    padding-bottom: 15px;
}
.page_content_2 .volunteer_info h2 {
    font-size: 2.5vw;
    padding-top: 5px;
    padding-bottom: 5px;
    color: #5c2e91;
}

.page_content_2 .volunteer_info p {
    background-color: #0060af;
    border-radius: 10px;
    padding: 5px;
    color: #ffffff;
    text-shadow: 2px 2px 4px #000000;
    font-size: 1.5vw;
}

/*Jobs*/
.page_content_2 .job_info {
    padding-bottom: 15px;
}
.page_content_2 .job_info h2 {
    font-size: 2.5vw;
    padding-top: 5px;
    padding-bottom: 5px;
    color: #a92b31;
}

.page_content_2 .job_info p {
    background-color: #5c2e91;
    border-radius: 10px;
    padding: 5px;
    color: #ffffff;
    text-shadow: 2px 2px 4px #000000;
    font-size: 1.5vw;
}

#jobs{
    background-color: #92278f;
    width: 90;
    text-align: center;
    color: #ffffff;
    text-shadow: 2px 2px 4px #000000;
    font-size: 1.5vw;
}
#jobs .list{
    width: 100%;
}

#jobs .list img{
    width: 30%;
    padding: 5px;
}

/*Donate*/
.page_content_2 .donate_info {
    padding-bottom: 15px;
}
.page_content_2 .donate_info h2 {
    font-size: 2.5vw;
    padding-top: 5px;
    padding-bottom: 5px;
    color: #a92b31;
}

.page_content_2 .donate_info p {
    background-color: #dd5828;
    border-radius: 10px;
    padding: 5px;
    color: #ffffff;
    text-shadow: 2px 2px 4px #000000;
    font-size: 1.5vw;
}

/*Youth Sports*/
.sub_hero{
    position: relative; 
    width: 100%;
}

.sub_hero img {
    width: 100%;        
    display: block;     
}

.sub_hero .overlap_header{
    font-size: 3vw;
    position: absolute; 
    bottom: 10px;
    left: 20px;
    color: white;       
    text-shadow: 2px 2px 4px #000000;
}

.sport_faq details summary, .sport_faq details div{
    font-size: 1.35vw;
}

.sport_faq details div{
    padding-left: 15px;
    padding-bottom: 10px;
}

/*Swim Lessons*/
.swim_lessons {
    vertical-align: top;
    max-width: 24% !important; 
    padding: 10px 3px 10px 3px;
    color: white;       
    text-shadow: 2px 2px 4px #000000;
    font-size: 1.25vw;
}
.swim_lessons a{
    color: #ffffff;
    font-size: 1.5vw;
}

.swim_lessons div{
    background-color: #006b6b;
    border-radius: 10px;
}

#swim_class_info {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}

#swim_class_info h2 {
    background-color: #0060af;
    padding: 3px;
    font-size: 2vw;
    color: white;       
    text-shadow: 2px 2px 4px #000000;
}

#swim_class_info img {
    width: 80%;
}

#swim_links, #swim_links a {
    text-align: center;
    color: #006b6b;
    font-size: 1.5vw;

}

#swim_links a{
    text-decoration: underline;
}

/*Daycare*/
.sub_heading{
    width: 100%;
    background-color: #92278f;
    color: #ffffff;
    text-shadow: 2px 2px 4px #000000;
}

.sub_heading h2 {
    margin-left: 3%;
    font-size: 1.75vw;
}

.page_content_3{
    padding-bottom: 10px;
}
.page_content_3 h3 {
    font-size: 1.70vw;
    padding-top: 5px;
}

.page_content_3 h4 {
    padding-top: 5px;
    font-size: 1.15vw;
}

.childcare_content {
    width: 75%;
}

.childcare_content p {
    font-size: 1.25vw;
}

#sidebar_dc {
    width: 20%;
    background-color: #0060af;
    border-radius: 10px;
    padding-bottom: 5px;
}

#sidebar_dc h3, #sidebar_dc h4, #sidebar_dc p{
    color: #ffffff;
    text-shadow: 2px 2px 4px #000000;
    padding-left: 12px;
    padding-right: 5px;
}

#classroom_faqs {
    width: 100%;
}

#classroom_faqs h3 {
    background-color: #5c2e91;
    color: #ffffff;
    text-shadow: 2px 2px 4px #000000;
    font-size: 1.7vw;
    padding: 0 3%;
}

#daycare_classrooms .page_content_2 .box div{
    background-color: #0060af;
    border-radius: 10px;
}

#daycare_classrooms .page_content_2 .box h4 {
    font-size: 1.25vw;
    color: #ffffff;
    text-shadow: 2px 2px 4px #000000;
}

#daycare_classrooms .page_content_2 .box p {
    font-size: 1.15vw;
    color: #ffffff;
    text-shadow: 2px 2px 4px #000000;
}

.non_discrimination {
    width: 100%;
}

.non_discrimination h2 {
    background-color: #5c2e91;
    color: #ffffff;
    text-shadow: 2px 2px 4px #000000;
    font-size: 1.7vw;
    padding: 0 3%;
}

.non_discrimination #non_discrimination {
    width: 90%;
    margin-left: 3%;
}

/*Preschool*/
#sidebar_summer, #sidebar_preschool {
    width: 35%;
    text-align: center;
}

#sidebar_preschool img{
    width: 60%;
}

#sidebar_summer img {
    width: 100%;
}

#sidebar_summer div, #sidebar_preschool div{
    border-radius: 15px;
    color: #ffffff;
    text-shadow: 2px 2px 4px #000000;
    font-size: 1.5vw;
}
/*Summer Safari*/


/*Restorative Yoga*/
.content {
    max-width: 95%;
    margin-left: auto;
    margin-right: auto;
    display: flex;                    
    justify-content: space-between;   
    align-items: flex-start;
    padding-top: 15px;
    padding-bottom: 15px;
}

.content .class_descript{
    width: 60%;
    font-size: 1.5vw;
    border-radius: 10px;
    padding: 5px 10px 5px 15px;
    color: #ffffff;
    text-shadow: 2px 2px 4px #000000;
}

.content .flyer{
    width: 35%;

}

.content .flyer img {
    max-width: 100%;
}

/*Personal Training*/

.trainer_header, .trainers {
    display: none;
}

.trainers img{
    max-width: 40%;
}


/*Application*/
.content_4 h2{
    background-color: #0089d0;
    text-align: center;
    color: #ffffff;
    text-shadow: 2px 2px 4px #000000;
    padding: 5px;
    font-size: 2.5vw;
}

.membership_content{
    max-width: 90%;
    margin-left: auto;
    margin-right: auto;
    display: flex;                    
    justify-content: space-between;   
    align-items: flex-start;
    padding-top: 15px;
    padding-bottom: 10px;
}

.Application_Process {
    width: 75%;
    text-align: center;
}

.Application_Process h3 {
    font-size: 1.6vw;
    background-color: #01a490;
    border-radius: 10px;
    color: #ffffff;
    text-shadow: 2px 2px 4px #000000;
    padding: 5px;
}

.membership_box{
    padding: 15px 0;
    color: #ffffff;
    text-shadow: 2px 2px 4px #000000;
    font-size: 1.10vw;
}

.membership_box h4{
    font-size: 1.25vw;
}

.membership_box a{
    color: #ffffff;
    text-decoration: underline;
    font-size: 1.35vw;
}

.membership_box div{
    display: inline-block;
    vertical-align: top;
    width: 24%;
    padding: 25px;
    background-color: #0060af;
    border-radius: 10px;
    padding: 3px;
}

#sidebar_mem{
    background-color: #006b6b;
    border-radius: 10px;
    padding: 15px;
    color: #ffffff;
    text-shadow: 2px 2px 4px #000000;
}

#sidebar_mem .need_bring, #sidebar_mem .what_expect, #sidebar_mem .policies{
    padding-bottom: 10px;
}

/*Prices*/
#prices {
    text-align: center;
}

.price_boxes div{
    display: inline-block;
    vertical-align: top;
    width: 19%;
    padding: 25px;
}

.price_box h2{
    font-size: 2vw;
    color: #ffffff;
    text-shadow: 2px 2px 4px #000000;
    padding: 5px;
}

.price_boxes div h4{
    font-size: 1.35vw;
    color: #ffffff;
    text-shadow: 2px 2px 4px #000000;
    padding: 5px 3px 5px 3px;
    border-radius: 10px;
}

.price_boxes div p{
    font-size: 2vw;
    padding: 25px 0 25px 0;
}

#base_membership_price h2{
    background-color: #5c2e91;
}

#base_membership_price h4{
    background-color: #ed1c24;
}

#member_addon_price h2{
    background-color: #a92b31;
}

#member_addon_price h4{
    background-color: #f47920;
}

#Daypass_price h2{
    background-color: #dd5828;
}

#Daypass_price h4{
    background-color: #01a490;
}

#Daycare_price h2{
    background-color: #006b6b;
}

#Daycare_price h4{
    background-color: #0089d0;
}

#pri_swim_lessons_price h2{
    background-color: #0060af;
}

#pri_swim_lessons_price h4{
    background-color: #92278f;
}

/*Benefits*/
.content_4#facility_amenities h2{
    background-color: #a92b31;
}

.amenities {
    max-width: 95%;
    margin-left: auto;
    margin-right: auto;
    display: flex;                    
    justify-content: space-between;   
    align-items: flex-start;
    padding-top: 15px;
    padding-bottom: 10px;  
}

.amenities_content{
    width: 30%;
}

.amenities_content h3{
    font-size: 3vw;
    color: #92278f;
    text-shadow: 2px 2px 8px #5c2e91;
}

.amenities_content ul{
    list-style-type: none;
    background-color: #92278f;
    color: #ffffff;
    text-shadow: 2px 2px 4px #000000;
    border-radius: 10px;
    padding: 20px;
}

.amenities_content ul li{
    font-size: 1.5vw;
    padding-bottom: 10px;
}

#sidebar_amenities {
    width: 65%;
    text-align: center;
}

#sidebar_amenities .row_1 img, #sidebar_amenities .row_3 img{
    width: 30%;
    padding: 15px 10px;
}

#sidebar_amenities .row_2 img {
    width: 90%;
}


/*Upcoming Events CSS*/

.skate_night{
    display: none;
}

/*
.sport_regis{
    display: none;
}
*/
.spanish_notice{
    display: none;
    text-align: center;
    background-color: #dd5828;
    max-width: 100%;
}

.spanish_notice h1{
    color: #ffffff;
    font-size: 2vw;
    padding: 5px 0;
}

.spanish_notice a{
    text-decoration: underline;
    color: #ffffff;
    font-size: 2vw;
}

#swim_grant {
   max-width: 85%;
   background-color: #006b6b;
   border-radius: 5px;
   flex-direction: column;
}

#swim_grant .documents{
    width: 100%;
    padding-left: 15px;
}

#swim_grant .documents h2, #swim_grant .documents li,  #swim_grant .documents a, #swim_grant .documents h3{
    color: #ffffff;
    text-shadow: 2px 2px 4px #000000;
    text-emphasis: none;
    padding: 5px;
    font-size: 1.3vw;
}

#swim_grant .documents ul{
    padding-left: 10px;
}

#swim_grant .documents h2{
    font-size: 1.8vw;
}

#swim_grant .documents h3 {
    font-size: 1.5vw;
}

#swim_grant .documents a{
    text-decoration: underline;
    cursor: pointer;
}
#swim_grant .flyer{
    width: 100%;
    display: flex;
    justify-content: center;
}

#swim_grant .flyer .flyer_helper {
    display: flex;
    flex-direction: row;
    gap: 20px;
    justify-content: center;
    align-items: center;
}

#swim_grant .flyer .flyer_helper img{
    max-width: 40%;
}

.upcoming .flyer, #movie_night .flyer, #summer_savings .flyer, #youth_fitness_class .flyer{
    width: 100%;
    display: flex;
    gap: 20px;
    justify-content: center;
    align-items: center;

}

.upcoming .flyer img,#movie_night .flyer img, #summer_savings .flyer img, #youth_fitness_class .flyer img{
    width: 35%;
}

#movie_night {
    display: none;
}

@media (max-width: 768px) {
    /*Mobile Warning when the screen's too small*/
    .rotate-notice {
        display: block;
    }
    /*Hidden elements*/
    #aoi, .location, .menu, #rules_sidebar{
        display: none;
        padding: 0;
    }
    /*Basic page layout changes*/
    header, .container, .logo, .logo img,
    #showcase, .slideshow-container, #common_links,
    #common_links .container, #copyright, .page_content,.page_content_2, .page_content_3, #y_rules, #Sport_Info, .content, .content_4,
    #prices, .upcoming,#summer_savings, #youth_fitness_class, #swim_grant, #swim_grant .documents, #swim_grant .flyer,
    .upcoming .flyer,#summer_savings .flyer, #youth_fitness_class .flyer, .weather_warning{
        width: 100%;
        max-width: 100%;
        padding: 0;
        text-align: center;
        margin: 0;
    }
    .page_content, .page_content_2, .page_content_3 {
        padding: 0 10px;

    }
    .logo img{ /*Logo*/
        max-width: 25%;
        padding: 10px;
    }
    .contact .container ul li{ /*contact info*/
        display: block;
        font-size: 4vw;
        padding-top: 2px;
    }
    /*Navbar changes*/
    .hamburger{
        display: block;
        width: 35px;
        height: 5px;
        background-color: #ffffff;
        margin: 6px 0;
        border-radius: 3px;
        cursor: pointer;
    }
    .hamburger_menu{
        display: block;
        position: relative;
        background-color: #0060af;
    }
    .home_a{
        color: #5c2e91;
        font-size: 5vw;
        text-decoration: none;
        padding: 10px;
    }
    .hamburger_wrapper {
        display: block;
        position: relative;
    }
    .hamburger_icon{
        padding: 10px;
        border: none;
        cursor: pointer;
    }
    .hamburger_button{
        color: #ffffff;
        padding: 10px;
        width: 100%;
        display: block;
        border-radius: 10px;
        outline: none;
        transition: 0.4s;
        font-family: inherit;
        font-size: 4vw;
    }
    #hamburger_icon_bl, #hamburger_dropdown_bl .hamburger_button{
        background-color: #0060af;
    }
    #hamburger_dropdown_bl a{
        color: #0060af;
    }
    #hamburger_icon_pur, #hamburger_dropdown_pur .hamburger_button{
        background-color: #5c2e91;
    }
    #hamburger_dropdown_pur a{
        color: #5c2e91;
    }
    #hamburger_icon_rd, #hamburger_dropdown_rd .hamburger_button{
        background-color: #a92b31;
    }
    #hamburger_dropdown_rd a{
        color: #a92b31;
    }
    #hamburger_icon_or, #hamburger_dropdown_or .hamburger_button{
        background-color: #dd5828;
    }
    #hamburger_dropdown_or a{
        color: #dd5828;
    }
    #hamburger_icon_gr, #hamburger_dropdown_gr .hamburger_button{
        background-color: #006b6b;
    }
    #hamburger_dropdown_gr a{
        color: #006b6b;
    }
    .hamburger_dropdown{
        display: none;
        position: absolute;
        top: 100%;
        right: 0;
        background-color: white;
        width: 100%;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
        z-index: 999;
    }
    .hamburger_wrapper:hover .hamburger_dropdown {
        display: block;
    }
    .hamburger_wrapper:focus + .hamburger_dropdown,
    .hamburger_wrapper:focus-within + .hamburger_dropdown {
        display: block;
    }
    .dropdown-content{
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
        align-items: center;
    }
    .panel {
        padding: 0 18px;
        overflow: auto;
    }
    /*font changes*/
    .page_content h2, .sub_hero .overlap_header{
        font-size: 5vw;
    }
    .page_content h3, .faqs .faq_content summary, .page_content_3 #y_rules summary h3,
    .page_content_2 .volunteer_info h2, .page_content_2 .job_info h2, .page_content_2 .donate_info h2,#youth_sports_links p, #youth_sports_links a,
    #Sport_Info .sport_content h1, #sports_list .swim_lessons h3, .sport_box.swim_lessons a, #swim_class_info h2, #daycare_info h3,
    #sidebar_dc h3, .content #sidebar_preschool h3, .content #sidebar_summer h3, .content_4 h2, #prices h2, #swim_links, #swim_links a{
        font-size: 4.5vw;
    }
    .sub_heading h2, #daycare_classrooms h3, .non_discrimination h2, #sidebar_dc p, #sidebar_dc h4, .content_4 h3, #prices h4, #swim_grant .documents h2, .weather_warning h2{
        font-size: 3.75vw;
    }
    .page_content p, .page_content i, .faqs .faq_content details div, .faqs .faq_content details div a,
    .page_content_3 #y_rules details div ul li, .page_content_2 .volunteer_info p, .page_content_2 .job_info p,
    .page_content_2 .donate_info p, #Sport_Info .sport_content p,.sport_faq details summary, .sport_faq details div,
    #sports_list .swim_lessons h4, #daycare_info p, #daycare_classrooms .page_content_2 .box div h4,.content .class_descript p,
    .content #sidebar_preschool p, .content #sidebar_summer p, .content_4 h4, .content_4 a, #prices p{
        font-size: 3.5vw;
    }
    #sports_list .swim_lessons p, #daycare_classrooms .page_content_2 .box div p, .content_4 p, #facility_amenities li, #swim_grant h3, #swim_grant ul li, #swim_grant ul li a, .weather_warning p{
        font-size: 3vw !important;
    }
    /*index slideshow changes*/
    .prev {
        left: 0;
    }
    .dot{
        height: 10px;
        width: 10px;
        
    }
    .slideshow-container .button_0B {
        left: 30%;
        width:40%;
        padding: 0;   
    }
    .slideshow-container .button_0B a, #common_links .container .box .button_0B a{
        padding: 0;
        font-size: 4vw;
    }
    /*index common links changes*/
    #common_links .container .box {
        display: block;
        margin-left: auto;
        margin-right: auto;
        width: 65%;
        padding: 5px;
    }
    #common_links .container .box img{
        max-width: 100%;
    }
    /*index facebook embed*/
    #facebook_embed {
        background-image: none;
        text-align: center;
        width: 100%;
    }
    /*About changes*/
    .page_content #our_history #P1, .page_content #our_history #P2{
        display: block;
        margin: auto;
        float: none;
        padding-left: 0;
        padding-right: 0;
        padding-bottom: 5px;
    }
    #our_history img{
        max-width: 90%;
    }
    /*Team Changes*/
    .page_content_2 .box div{
        display: block;
        width: 100%;
        padding: 0 5px;
    }
    .page_content_2 h2{
        padding-top: 10px;
    }
    /*Rules Changes*/
    #y_rules {
        padding-top: 5px;
        text-align: initial;
    }
    #y_rules summary{
        padding: 5px 10px;
    }

    #y_rules details{
        padding-bottom: 20px;
    }
    /*Youth Sports Changes*/
    #sports_list, .sport_box {
        max-width: 100% !important;
        padding: 0;
    }

    #sports_list .sport_box{
        display: block;
        padding: 10px 5px;
        max-width: 70%;
        margin-left: auto;
        margin-right: auto;
    }

    #sports_list .sport_box img{
        max-width: 65%;
    }
    /*Individual Sports Changes*/ 

    #Sport_Info{
        display: block;
        padding: 10px 5px;
        max-width: 95%;
        margin-left: auto;
        margin-right: auto;
    }

    #Sport_Info .sport_content{
        width: 100%;
    }

    #Sport_Info .sidebar{
        width: 100%;
    }

    #Sport_Info .sidebar h3, #Sport_Info .sidebar div h3{
        padding-top: 10px;
    }
    /*Swim Lesson Changes*/
    #sports_list .swim_lessons{
        max-width: 85%;
        margin: none;
    }
    #sports_list .swim_lessons img{
        max-width: 100%;
    }
    #swim_class_info img{
        width: 100%;
    }
    /*Daycare Changes*/
    .page_content_3{
        display: block;
    }
    .childcare_content{
        width: 100%;
    }
    #sidebar_dc{
        width: 100%;
    }
    #daycare_classrooms{
        padding-top: 10px;
    }
    #daycare_classrooms .page_content_2{
        width: 100% !important;
    }
    #daycare_classrooms .page_content_2 .box div{
        display: inline-block;
        width: 32% !important; 
    }
    /*preschool changes*/
    .content{
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
    .content .class_descript{
        width: 90%;
        margin-top: 3px;
        margin-bottom: 5px;
    }
    .content #sidebar_preschool, .content #sidebar_summer{
        width: 90%
    }

    .content .flyer{
        width: 85%;
    }
    /*Membership Info Changes*/
    .membership_content{
        display: block;
        width: 100%;
    }
    .Application_Process{
        width: 100%;
        margin-bottom: 10px;
    }
    #sidebar_mem{
        width: 100%;
        text-align:justify;
    }
    /*Prices Changes*/
    .price_boxes div {
        width: 32%;
        padding: 10px 5px 0 5px;
    }
    /*Amenities Changes*/
    #facility_amenities .amenities{
        display: block;
    }
    #facility_amenities ul{
        max-width: 100%;
        margin: 0;
        padding: 5px;
    }
    #facility_amenities li{
        display: inline-block;
        padding: 5px 10px;
    }
    #facility_amenities .amenities_content{
        width: 100%;
    }
    #facility_amenities #sidebar_amenities{
        width: 100%;
    }
    #facility_amenities #sidebar_amenities .row_1 img, #facility_amenities #sidebar_amenities .row_3 img {
        width: 32%;
        padding: 5px 2px;
    }

    /*upcoming changes*/
    #swim_grant ul li{
        text-emphasis: none;
        text-decoration: none;
        list-style: none;
        text-align: justify;
    }

    #swim_grant .flyer img {
        width: 90%;
        padding-bottom: 15px;
    }

    .upcoming .flyer, #summer_savings .flyer, #youth_fitness_class .flyer{
        flex-direction: column;
    }

    .upcoming .flyer, #summer_savings .flyer img, #youth_fitness_class .flyer img {
        width: 90%;
        gap: 0px;
    }


}