/* Styles for Content on /gyms */ .freepass-single-card { display: flex; justify-content: center; margin: 15px 0 35px; padding: 0 35px; } .freepass-single-card .club-card { background: var(--color-dark-gray); border-radius: 18px; flex: 0 0 calc(25% - 35px); margin: 0 17.5px; padding: 35px; } .freepass-single-card .club-card .headline { margin-bottom: 35px; } .freepass-single-card .club-card .headline { font-size: 18px; font-weight: 700; letter-spacing: .25em; position: relative; text-transform: uppercase; } .freepass-single-card .club-card .pass-description { margin-top: 10px; line-height:165%; } .all-clubs-by-state {background:#F7F7F7; padding:130px 0; text-align:center;} .all-clubs-by-state h1 {font-size:18px; font-weight:bold; line-height:24px; letter-spacing:0.2em; text-transform:uppercase; position:relative; padding:13px 0; margin-bottom:40px;} .all-clubs-by-state h1:before, .all-clubs-by-state h1:after { content:' '; background:url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI1NyIgaGVpZ2h0PSIyIiB2aWV3Qm94PSIwIDAgNTcgMiI+PGxpbmUgeDI9IjU3IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgwIDEpIiBmaWxsPSJub25lIiBzdHJva2U9IiNjOWM5YzkiIHN0cm9rZS13aWR0aD0iMiIvPjwvc3ZnPg==') no-repeat center top; position:absolute; left:0; width:100%; height:2px; } .all-clubs-by-state h1:before {top:0;} .all-clubs-by-state h1:after {bottom:0;} .all-clubs-by-state .club-accordion {text-align:left;} .all-clubs-by-state .club-accordion .state {border-top:1px solid #707070;} .all-clubs-by-state .club-accordion .state:last-child {border-bottom:1px solid #707070;} .all-clubs-by-state .club-accordion .state h2 {display:flex; cursor:pointer;} .all-clubs-by-state .club-accordion .state h2 span {display:inline-block;} .all-clubs-by-state .club-accordion .state h2 .label {font-size:30px; letter-spacing:0.4em; font-weight:normal; text-transform:uppercase; padding:37px 0; cursor:pointer;} .all-clubs-by-state .club-accordion .state h2 .icon {margin-left:auto; padding:44px 30px 44px 0;} .all-clubs-by-state .club-accordion .state h2 .icon.open {display:none;} .all-clubs-by-state .club-accordion .state .line {display:none;} .all-clubs-by-state .club-accordion .state.open h2 .icon.closed {display:none;} .all-clubs-by-state .club-accordion .state.open h2 .icon.open {display:block;} .all-clubs-by-state .club-accordion .state.open .line {display:block; margin-bottom:30px;} .all-clubs-by-state .club-accordion .state .clubs {display:none;} .all-clubs-by-state .club-accordion .state .clubs .clubs-inner {display:flex; flex-wrap:wrap; margin:0 -15px;} .all-clubs-by-state .club-accordion .state .clubs .clubs-inner .club {flex:0 0 33.33%; padding:15px;} .all-clubs-by-state .club-accordion .state .clubs .clubs-inner .club .club-inner {box-shadow:0 3px 6px rgba(0,0,0,0.16);} .all-clubs-by-state .club-accordion .state .clubs .clubs-inner .club .club-inner a.pic {display:block; height:245px; background:#1E8DC7 no-repeat center center; background-size:cover;} .all-clubs-by-state .club-accordion .state .clubs .clubs-inner .club .club-inner .content {position:relative; background:#fff;} .all-clubs-by-state .club-accordion .state .clubs .clubs-inner .club .club-inner .content svg.top-triangle {position:absolute; top:-60px; height:60px; width:100%;} .all-clubs-by-state .club-accordion .state .clubs .clubs-inner .club .club-inner .content svg.top-triangle.black {display:none;} .all-clubs-by-state .club-accordion .state .clubs .clubs-inner .club .club-inner .content .content-inner {padding:0 40px 40px; min-height:290px;} .all-clubs-by-state .club-accordion .state .clubs .clubs-inner .club .club-inner .content .content-inner h3 { font-size:18px; font-weight:bold; letter-spacing:0.2em; position:relative; padding:12px 0; text-transform:uppercase; margin-bottom:18px; } .all-clubs-by-state .club-accordion .state .clubs .clubs-inner .club .club-inner .content .content-inner h4.signature { font-size:14px; font-weight:bold; letter-spacing:.2em; text-transform:uppercase; color:#1e8dc7; margin-bottom:18px; } .all-clubs-by-state .club-accordion .state .clubs .clubs-inner .club .club-inner .content .content-inner h3:before, .all-clubs-by-state .club-accordion .state .clubs .clubs-inner .club .club-inner .content .content-inner h3:after { content:' '; position:absolute; left:0; width:100%; height:3px; background:url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI1NyIgaGVpZ2h0PSIyIiB2aWV3Qm94PSIwIDAgNTcgMiI+PGxpbmUgeDI9IjU3IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgwIDEpIiBmaWxsPSJub25lIiBzdHJva2U9IiNjOWM5YzkiIHN0cm9rZS13aWR0aD0iMiIvPjwvc3ZnPg==') no-repeat left top; } .all-clubs-by-state .club-accordion .state .clubs .clubs-inner .club .club-inner .content .content-inner h3:before {top:1px;} .all-clubs-by-state .club-accordion .state .clubs .clubs-inner .club .club-inner .content .content-inner h3:after {bottom:0;} .all-clubs-by-state .club-accordion .state .clubs .clubs-inner .club .club-inner .content .content-inner p { font-size:14px; font-weight:bold; letter-spacing:0.05em; line-height:19px; margin-bottom:18px; } .all-clubs-by-state .club-accordion .state .clubs .clubs-inner .club .club-inner .content .content-inner p a {text-decoration:none;} .all-clubs-by-state .club-accordion .state .clubs .clubs-inner .club .club-inner .content .content-inner p.email a {color:#1E8DC7; /*white-space:nowrap; overflow:hidden; text-overflow:ellipsis;*/} .all-clubs-by-state .club-accordion .state .clubs .clubs-inner .club .club-inner .content .content-inner a.button { font-size:14px; font-weight:bold; letter-spacing:0.1em; text-transform:uppercase; display:inline-block; padding:13px 35px; text-decoration:none; border:1px solid #000; border-radius:3px; } .all-clubs-by-state .club-accordion .state .clubs .clubs-inner .club:hover .club-inner .content svg.top-triangle {display:none;} .all-clubs-by-state .club-accordion .state .clubs .clubs-inner .club:hover .club-inner .content svg.top-triangle.black {display:block;} .all-clubs-by-state .club-accordion .state .clubs .clubs-inner .club:hover .club-inner .content {background:#000; color:#fff;} .all-clubs-by-state .club-accordion .state .clubs .clubs-inner .club:hover .club-inner .content .content-inner a.button {border-color:#fff;} @media (max-width:1200px) { .all-clubs-by-state .club-accordion .state .clubs .clubs-inner .club {flex:0 0 50%;} } @media (max-width:768px) { .all-clubs-by-state .club-accordion .state .clubs .clubs-inner {display:block;} .all-clubs-by-state .club-accordion .state .clubs .clubs-inner .club {} .all-clubs-by-state .club-accordion .state h2 .label {font-size:18px; padding:30px 15px;} .all-clubs-by-state .club-accordion .state h2 .icon {padding:30px;} } /* Styles for Content on /gyms/foo */ .club-hero {padding:260px 0 210px; text-align:center; background-color:#000; background:no-repeat center center; background-size:cover;} .club-hero h1 {font-size:50px; font-weight:normal; letter-spacing:0.4em; text-transform:uppercase; position:relative; padding:40px 0; color:#fff;} .club-hero h1:before, .club-hero h1:after { content:' '; background:url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMTYiIGhlaWdodD0iMiI+PGxpbmUgeDI9IjExNiIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjZmZmIiBzdHJva2Utd2lkdGg9IjIiLz48L3N2Zz4=') no-repeat center top; position:absolute; left:0; width:100%; height:2px; } .club-hero h1:before {top:0;} .club-hero h1:after {bottom:0;} @media (max-width:768px) { .club-hero {padding:35vh 0 15vh;} .club-hero h1 {font-size:22px; padding:17px 0;} } .club-hero-slideshow .slide {padding:260px 0 210px; text-align:center; background-color:#000; background:no-repeat center center; background-size:cover;} .club-hero-slideshow h1 {font-size:50px; font-weight:normal; letter-spacing:0.4em; text-transform:uppercase; position:relative; padding:40px 0; color:#fff;} .club-hero-slideshow h1:before, .club-hero-slideshow h1:after { content:' '; background:url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMTYiIGhlaWdodD0iMiI+PGxpbmUgeDI9IjExNiIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjZmZmIiBzdHJva2Utd2lkdGg9IjIiLz48L3N2Zz4=') no-repeat center top; position:absolute; left:0; width:100%; height:2px; } .club-hero-slideshow h1:before {top:0;} .club-hero-slideshow h1:after {bottom:0;} @media (max-width:768px) { .club-hero-slideshow .slide {padding:35vh 0 15vh;} .club-hero-slideshow h1 {font-size:22px; padding:17px 0;} } .club-hero-video {position:relative; background:#000 center center; background-size:cover; overflow:hidden;} .club-hero-video video {position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); width:100%; height:100%; object-fit:cover;} .club-hero-video .inner {padding:400px 0;} .club-hero-video h1 {font-size:50px; font-weight:normal; letter-spacing:0.4em; text-transform:uppercase; position:relative; padding:40px 0; color:#fff; text-align:center;} .club-hero-video h1:before, .club-hero-video h1:after { content:' '; background:url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMTYiIGhlaWdodD0iMiI+PGxpbmUgeDI9IjExNiIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjZmZmIiBzdHJva2Utd2lkdGg9IjIiLz48L3N2Zz4=') no-repeat center top; position:absolute; left:0; width:100%; height:2px; } .club-hero-video h1:before {top:0;} .club-hero-video h1:after {bottom:0;} .club-hero-video h1 #gym{font-size:24px; position:absolute; bottom:-50%; display:block;width:100%; letter-spacing:normal;text-transform:none;} #gym{font-size:24px; position:absolute; bottom:-50%; display:block;width:100%; letter-spacing:normal;text-transform:none;} @media (max-width:1024px) { .club-hero-video video {display:block!important;} .club-hero-video .inner {padding:35vh 0 15vh;} .club-hero-video h1 {font-size:22px; padding:17px 0;} } .club-nav {background:#424548; color:#fff; text-align:center;} .club-nav ul {list-style:none;} .club-nav ul li {display:inline-block;} .club-nav ul li a {display:block; font-size:14px; font-weight:bold; text-decoration:none; letter-spacing:0.1em; padding:25px;} @media (max-width:768px) { .club-nav {display:none;} } .club-membership-options { background:#000 url('https://cdn2.hubspot.net/hubfs/2094550/_p7_fall_2019/black-pattern.png') repeat-y; background-size:100% auto; color:#fff; padding:125px 0 150px; text-align:center; } .club-membership-options h2 {font-size:18px; font-weight:bold; letter-spacing:0.2em; position:relative; padding:13px 0; text-transform:uppercase; margin-bottom:80px;} .club-membership-options h2:before, .club-membership-options h2:after { content:' '; background:url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI1NyIgaGVpZ2h0PSIyIj48bGluZSB4Mj0iNTciIGZpbGw9Im5vbmUiIHN0cm9rZT0iI2M5YzljOSIgc3Ryb2tlLXdpZHRoPSIyIi8+PC9zdmc+') no-repeat center top; position:absolute; left:0; width:100%; height:2px; } .club-membership-options h2:before {top:0;} .club-membership-options h2:after {bottom:0;} .club-membership-options .options {display:flex; margin:0 -15px; justify-content:center; flex-wrap:wrap;} .club-membership-options .options .option {flex:0 0 33.33%; padding:0 15px; margin-bottom:15px;} .club-membership-options.p7-has-3-or-more .options .option {flex-basis:50%;} .club-membership-options .options .option .option-inner {border:1px solid #424548; background:#000; padding-bottom:40px; position:relative;} .club-membership-options .options .option .option-inner h5 {background:#424548; text-transform:uppercase; padding:17px; font-size:18px; letter-spacing:0.2em; font-weight:bold; margin-bottom:45px; text-align:left; padding-right:120px;} .club-membership-options .options .option .option-inner .badge {position:absolute; top:-33px; right:-33px;} .club-membership-options .options .option .accordion {cursor:pointer;} .club-membership-options .options .option .accordion h4 {font-size:18px; font-weight:600; padding:10px;} .club-membership-options .options .option .accordion h4 svg {margin-left:5px;} .club-membership-options .options .option .accordion .content {display:none;} .club-membership-options .options .option .accordion .content p, .club-membership-options .options .option .accordion .content li {font-size:18px; line-height:24px; font-weight:600; padding:10px 40px;} .club-membership-options .options .option .accordion .content li {padding:10px 0;} .club-membership-options .options .option .included {padding:30px 50px 0;} .club-membership-options .options .option .included h4 {font-size:16px; text-transform:uppercase; text-align:left; padding-left:35px;} .club-membership-options .options .option .included ul {list-style:none;} .club-membership-options .options .option .included ul li {color:#1E8DC7; font-weight:bold; display:flex; align-items:center;} .club-membership-options .options .option .included ul li svg {flex:0 0 30px; margin-right:5px;} .club-membership-options .options .option .included ul li span {text-align:left;} .club-membership-options .options .option button, .club-membership-options .options .option a.btn { display:inline-block; text-decoration:none; background:#000; padding:13px 38px; text-transform:uppercase; color:#fff; border:1px solid #fff; border-radius:3px; font-size:14px; letter-spacing:0.1em; margin-bottom:15px; } .club-membership-options .options .option.free-trial .option-inner h3 {font-size:70px; font-weight:200; text-transform:uppercase; margin-bottom:60px; padding-top:38px;} .club-membership-options .options .option.paid h3 {position:relative; margin-bottom:20px;} .club-membership-options .options .option.paid h3 .big-number {font-size:100px; font-weight:200;} .club-membership-options .options .option.paid h3 .dollar {font-size:100px; font-weight:200;} .club-membership-options .options .option.paid h3 .cents {font-size:33px; font-weight:400; letter-spacing:0.05em; position:absolute; top:10px;} .club-membership-options .options .option.paid h3 .month {font-size:40px; font-weight:400; letter-spacing:0.05em; text-transform:uppercase;} .club-membership-options .options .option.paid .fee {text-transform:uppercase; font-size:18px; font-weight:600; letter-spacing:0.05em; line-height:24px; margin-bottom:25px;} .club-membership-options .options .option.paid .fee .fee-was {text-decoration:line-through;} .club-membership-options .options .option.paid .fee .fee-is {color:#1E8DC7;} .club-membership-options .options .option:hover .option-inner {background:#fff; color:#000;} .club-membership-options .options .option:hover .option-inner h5 {color:#fff;} .club-membership-options .options .option:hover button, .club-membership-options .options .option:hover a.btn {background:#1E8DC7; border-color:transparent;} @media (max-width:1024px) { .club-membership-options {padding:40px 0;} .club-membership-options h2 {margin-bottom:40px;} .club-membership-options .options {display:block;} .club-membership-options .options .option {margin-bottom:15px;} .club-membership-options .options .option .option-inner {padding-bottom:20px;} .club-membership-options .options .option .option-inner h5 {margin-bottom:20px; font-size:14px;} .club-membership-options .options .option.free-trial .option-inner h3 {margin-bottom:36px;} .club-membership-options .options .option.paid h3 .dollar {font-size:63px;} .club-membership-options .options .option.paid h3 .cents {font-size:19px; top:2px;} .club-membership-options .options .option.paid h3 .month {font-size:30px;} .club-membership-options .options .option.paid .fee {font-size:14px;} .club-membership-options .options .option .accordion h4 {font-size:14px;} .club-membership-options .options .option .accordion .content p {font-size:14px; line-height:20px;} } .club-news {padding:60px 0; text-align:center; position:relative; margin:0 auto; max-width:800px;} .club-text-content {padding:60px 0; text-align:left; position:relative; margin:0 auto; max-width:800px;} .club-news h2 {font-size:32px; font-weight:bold; letter-spacing:0.2em; position:relative; padding:13px 0; text-transform:uppercase; margin-bottom:48px;} .club-news h2:before, .club-news h2:after { content:' '; background:url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI1NyIgaGVpZ2h0PSIyIj48bGluZSB4Mj0iNTciIGZpbGw9Im5vbmUiIHN0cm9rZT0iI2M5YzljOSIgc3Ryb2tlLXdpZHRoPSIyIi8+PC9zdmc+') no-repeat center top; position:absolute; left:0; width:100%; height:2px; } .club-text-content .inner .description p { line-height: 18px !important; } .club-text-content .inner .description p strong { line-height: 24px !important; } .club-news h2:before {top:0;} .club-news h2:after {bottom:0;} .club-news .description p {font-size:24px; line-height:36px; margin-bottom:15px;} @media (max-width:768px) { .club-news {padding:40px 0;} } .club-location {display:flex;} .club-location > div {flex:0 0 50%;} .club-location > div.map {background:#ccc;} .club-location > div.content {background:#F7F7F7; padding:46px;} .club-location > div.content .content-inner {padding:112px 60px;} .club-location > div.content .content-inner h1 {font-size:30px; line-height:41px; font-weight:normal; letter-spacing:0.4em; position:relative; padding:13px 0; text-transform:uppercase; margin-bottom:18px;} .club-location > div.content .content-inner h1:before, .club-location > div.content .content-inner h1:after { content:' '; background:url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI1NyIgaGVpZ2h0PSIyIj48bGluZSB4Mj0iNTciIGZpbGw9Im5vbmUiIHN0cm9rZT0iI2M5YzljOSIgc3Ryb2tlLXdpZHRoPSIyIi8+PC9zdmc+') no-repeat left top; position:absolute; left:0; width:100%; height:2px; } .club-location > div.content .content-inner h2.signature { font-size:14px; font-weight:bold; letter-spacing:.2em; text-transform:uppercase; color:#1e8dc7; margin-bottom:18px; } .club-location > div.content .content-inner h1:before {top:0;} .club-location > div.content .content-inner h1:after {bottom:0;} .club-location > div.content .content-inner .address {font-size:18px; font-weight:bold; letter-spacing:0.2em; line-height:28px; text-transform:uppercase; margin-bottom:30px;} .club-location > div.content .content-inner .address a.btn {display:inline-block; text-decoration:none; padding:13px 34px; background:#1E8DC7; border-radius:3px; font-size:14px; letter-spacing:0.1em; color:#fff; margin-top:10px;} .club-location > div.content .content-inner h3 {font-size:18px; font-weight:bold; letter-spacing:0.2em; text-transform:uppercase; margin-bottom:10px;} .club-location > div.content .content-inner .hours {margin-bottom:30px;} .club-location > div.content .content-inner .hours p {font-size:14px; font-weight:600; line-height:28px;} .club-location > div.content .content-inner a.email {display:block; text-decoration:none; font-size:18px; font-weight:bold; letter-spacing:0.2em; color:#1E8DC7; margin-bottom:30px;} .club-location > div.content .content-inner a.phone {display:block; text-decoration:none; font-size:18px; font-weight:bold; letter-spacing:0.2em;} @media (max-width:1024px) { .club-location {display:block;} .club-location > div.map {min-height:75vh;} .club-location > div.content {padding:15px;} .club-location > div.content .content-inner {padding:30px 15px; background:#fff;} .club-location > div.content .content-inner h1 {margin-bottom:40px;} .club-location > div.content .content-inner .address {font-size:14px;} .club-location > div.content .content-inner h3 {font-size:14px;} .club-location > div.content .content-inner .hours p {font-size:12px; line-height:24px;} .club-location > div.content .content-inner a.email {letter-spacing:0em;font-size:16px;} .club-location > div.content .content-inner a.phone {letter-spacing:0em;font-size:16px;} } .club-gallery {padding:120px 0;} .club-gallery .top-content {display:flex;} .club-gallery .top-content > div {flex:0 0 50%;} .club-gallery h2 {font-size:30px; line-height:41px; font-weight:normal; letter-spacing:0.4em; position:relative; padding:13px 0; text-transform:uppercase; margin-bottom:35px;} .club-gallery .gallery-images h2{ font-size:18px; } .club-gallery h2:before, .club-gallery h2:after { content:' '; background:url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI1NyIgaGVpZ2h0PSIyIj48bGluZSB4Mj0iNTciIGZpbGw9Im5vbmUiIHN0cm9rZT0iI2M5YzljOSIgc3Ryb2tlLXdpZHRoPSIyIi8+PC9zdmc+') no-repeat left top; position:absolute; left:0; width:100%; height:2px; } .club-gallery h2:before {top:0;} .club-gallery h2:after {bottom:0;} .club-gallery .top-content > div.content h3 {font-size:18px; font-weight:600; letter-spacing:0.1em; line-height:32px; margin-bottom:20px; text-transform:uppercase; padding-right:160px;} .club-gallery .top-content > div.content p {padding-right:160px; font-size:14px; line-height:28px; margin-bottom:20px;} /*.club-gallery .top-content > div.video iframe {width:100%; height:400px;}*/ .club-gallery .announcement-image {padding:50px 0 15px;} .club-gallery .announcement-image a {display:block; text-decoration:none;} .club-gallery .announcement-image a img {display:block; width:100%; height:auto;} .club-gallery .gallery-images{ padding-top:120px;} .club-gallery .pics {overflow:hidden; margin:-15px;} .club-gallery .pics a {display:block; text-decoration:none; background:no-repeat center center; background-size:cover; float:left; width:calc(25% - 30px); height:327px; margin:15px;} /* .club-gallery .pics a:nth-child(1), .club-gallery .pics a:nth-child(6) {width:calc(50% - 30px); height:684px;} */ @media (max-width:768px) { .club-gallery {padding:40px 25px;} .club-gallery .top-content {display:block; text-align:center;} .club-gallery h2 {font-size:14px; line-height:1;} .club-gallery h2:before, .club-gallery h2:after {background-position:center top;} .club-gallery .top-content > div.content h3 {font-size:12px; line-height:24px;} .club-gallery .top-content > div.content p {font-size:11px; line-height:22px;} .club-gallery .top-content > div.content h3, .club-gallery .top-content > div.content p {padding-right:0;} /*.club-gallery .top-content > div.video iframe {height:300px;}*/ .club-gallery .gallery-images{ padding-top:50px;} .club-gallery .pics {padding:50px 0 0;} .club-gallery .pics a {width:calc(50% - 30px); height:150px;} /* .club-gallery .pics a:nth-child(1), .club-gallery .pics a:nth-child(6) {width:calc(100% - 30px); height:300px;} */ } .club-features {padding:120px 0 150px; background:#EFEFEF; text-align:center;} .club-features .inner {background:#000; color:#fff;} .club-features .inner .headline {padding-top:120px;} .club-features .inner .headline h2 {font-size:18px; font-weight:bold; letter-spacing:0.2em; position:relative; padding:13px 0; text-transform:uppercase;} .club-features .inner .headline h2:before, .club-features .inner .headline h2:after { content:' '; background:url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI1NyIgaGVpZ2h0PSIyIj48bGluZSB4Mj0iNTciIGZpbGw9Im5vbmUiIHN0cm9rZT0iI2M5YzljOSIgc3Ryb2tlLXdpZHRoPSIyIi8+PC9zdmc+') no-repeat center top; position:absolute; left:0; width:100%; height:2px; } .club-features .inner .headline h2:before {top:0;} .club-features .inner .headline h2:after {bottom:0;} .club-features .inner .icons {display:flex; flex-wrap:wrap; padding:50px;} .club-features .inner .icons .icon {flex:1 0 33.33%; text-decoration:none; padding:50px;} .club-features .inner .icons .icon svg {fill:#fff; margin-bottom:30px;} .club-features .inner .icons .icon h3 {position:relative; text-transform:uppercase; padding:15px 0; font-size:18px; font-weight:bold; letter-spacing:0.2em; margin-bottom:30px;} .club-features .inner .icons .icon h3:before, .club-features .inner .icons .icon h3:after { content:' '; position:absolute; left:0; width:100%; height:3px; background:url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI1NyIgaGVpZ2h0PSIyIiB2aWV3Qm94PSIwIDAgNTcgMiI+PGxpbmUgeDI9IjU3IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgwIDEpIiBmaWxsPSJub25lIiBzdHJva2U9IiNjOWM5YzkiIHN0cm9rZS13aWR0aD0iMiIvPjwvc3ZnPg==') no-repeat top center; } .club-features .inner .icons .icon h3:before {top:1px;} .club-features .inner .icons .icon h3:after {bottom:0;} .club-features .inner .icons .icon p {font-size:14px; font-weight:600; line-height:24px;} .club-features .inner .icons .icon a.btn { display:inline-block; font-size:14px; font-weight:bold; letter-spacing:0.1em; padding:13px 20px; border:1px solid #fff; border-radius:3px; text-decoration:none; text-transform:uppercase; margin-top:10px; } .club-features .inner .icons .icon a.btn:empty {display:none;} @media (max-width:768px) { .club-features {padding:30px 0;} .club-features .inner .headline {padding-top:60px;} .club-features .inner .headline h2 {font-size:14px;} .club-features .inner .icons {display:block;} .club-features .inner .icons .icon {padding:50px 0;} } .club-schedule {background:#F7F7F7; padding-bottom:120px;} .club-schedule .inner .headline {text-align:center; padding:105px 0;} .club-schedule .inner .headline h2 {font-size:18px; font-weight:bold; letter-spacing:0.2em; position:relative; padding:13px 0; text-transform:uppercase;} .club-schedule .inner .headline h2:before, .club-schedule .inner .headline h2:after { content:' '; background:url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI1NyIgaGVpZ2h0PSIyIj48bGluZSB4Mj0iNTciIGZpbGw9Im5vbmUiIHN0cm9rZT0iI2M5YzljOSIgc3Ryb2tlLXdpZHRoPSIyIi8+PC9zdmc+') no-repeat center top; position:absolute; left:0; width:100%; height:2px; } .club-schedule .inner .headline h2:before {top:0;} .club-schedule .inner .headline h2:after {bottom:0;} .all-clubs-features {border:1px solid #424548; margin-bottom:30px; padding-bottom:30px;} .all-clubs-features h3 {background:#424548; text-transform:uppercase; padding:17px; font-size:18px; letter-spacing:.2em; font-weight:bold; margin-bottom:45px;} .all-clubs-features ul {list-style:none; display:flex; flex-wrap:wrap; justify-content:center;} .all-clubs-features ul li {display:flex; align-items:center; } .all-clubs-features ul li svg {flex:0 0 30px;} .all-clubs-features ul li span {text-align:left;} .clubs-popup { padding:50px; color:white; } .clubs-popup ul{ /* padding:50px 20px; */ background:black; } .clubs-popup ul li{ text-decoration:none; list-style-type:none; color:white; margin-bottom:5px; } .clubs-popup{ background:black; } .mfp-close-btn-in .clubs-popup .mfp-close{ color:white; } .black-cta { background:#000 url('https://cdn2.hubspot.net/hubfs/2094550/_p7_fall_2019/carbon%20fiber%20bg.png') center top; background-size:100%; padding:40px;} .black-cta h3 {font-size:18px; letter-spacing:0.2em; color:#fff; line-height:24px; text-align:center;} .black-cta h3 a { color:#1E8DC7; text-decoration:none; display:inline-block; padding-right:20px; background:url('https://cdn2.hubspot.net/hubfs/2094550/_p7_fall_2019/blue%20triangle.svg') no-repeat right center; } .smart-google-map { position: relative; height: 100vh; /* Full height to fit the screen */ width: 100%; /* Full width for the map and sidebar */ } .club-sidebar { position: absolute; top: 0; left: 0; width: 30%; /* Adjust width as needed */ height: 100%; background-color: rgba(255, 255, 255, 0.9); /* Semi-transparent background */ z-index: 100; /* Ensure the sidebar is on top */ overflow-y: auto; /* Enable scrolling */ padding: 20px; box-shadow: 2px 0px 10px rgba(0, 0, 0, 0.1); /* Shadow for depth */ } .the-google-map { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; /* Make sure it's behind the sidebar */ } .club-item { margin-bottom: 20px; background-color: white; padding: 15px; border-radius: 8px; box-shadow: 0 1px 5px rgba(0, 0, 0, 0.1); } .club-title { font-size: 1.25rem; font-weight: bold; } .club-address { font-size: 0.875rem; } * { margin: 0; padding: 0; line-height: 1; font-size: 100%; border: 0 none; box-sizing: border-box; min-height: 0; min-width: 0; font-weight: 400 } ::-moz-placeholder { color: inherit; opacity: .65 } ::placeholder { color: inherit; opacity: .65 } a { color: inherit } strong { font-weight: 700 } input, textarea, button { font-family: inherit } button { cursor: pointer; background: none; color: inherit } img { max-width: 100%; height: auto } html.p7-spinner-active { position: relative } html.p7-spinner-active .p7-spinner { position: fixed; top: 0; left: 0; width: 100%; height: 100vh; z-index: 100000; background: rgb(0 0 0 / .85) url(../assets/spinner.svg) no-repeat center; background-size: 50px; background-attachment: fixed } :root { --color-brand: #0F7DB7; --color-brand-light: #62C9FF; --color-offwhite: #959595; --color-gray: #707070; --color-dark-gray: #272727 } html { scroll-behavior: smooth } .app-header { margin: 30px } .app-header h1 { display: flex; justify-content: center; gap: 35px } .app-header h1 span { display: block; margin: 15px 0; font-size: 24px; letter-spacing: .3em; font-weight: 600; text-transform: uppercase } @media (max-width:700px) { .app-header h1 span { display: none } } .app-footer { padding: 50vh 0 200px; text-align: center } .button, .group-button { display: inline-block; padding: 12px 32px; border-radius: 12px; background: var(--color-brand); color: #fff; font-size: 16px; font-weight: 700; text-transform: uppercase; letter-spacing: .2em; text-decoration: none } .swal-button, .swal-button:hover { background: var(--color-brand) !important; border-radius: 12px } @media (max-width:810px) { .button, .group-button { padding: 15px 10px; font-size: 11px } } .location-input { padding: 6px; border-radius: 4px; color: black; border: 1.5px solid #000000; font-size: 16px; position: relative; background: white; outline: none; transition: box-shadow 0.3s ease-in-out; box-shadow: 0 0 0 0 rgba(15, 125, 183, 0); font-weight: 800; background: url('https://join.onelifefitness.com/assets/pin-map.svg') no-repeat 8px center / 16px 16px, white; padding: 10px 10px 10px 30px; } @keyframes breathing-effect { 0%, 100% { box-shadow: 0 0 3px 0 rgba(15, 125, 183, 0); } 50% { box-shadow: 0 0 3px 5px rgba(15, 125, 183, 0.3); } } .input:focus { animation: breathing-effect 2s infinite ease-in-out; } .headline { position: relative; font-size: 18px; letter-spacing: .25em; font-weight: 700; text-transform: uppercase } /* .headline:before { content: ' '; width: 80px; height: 1px; background: #fff; display: block; margin: 0 auto 15px } */ /* .headline:after { content: ' '; width: 80px; height: 1px; background: #fff; display: block; margin: 15px auto 0 } */ #welcome .module { position: relative } #welcome .module .background-image { position: absolute; top: 0; left: 0; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; z-index: 1 } #welcome .module .content { display: flex; justify-content: center; align-items: center; position: relative; z-index: 2; padding: 50px; min-height: 80vh } #welcome .module .content .welcome-content { flex: 0 0 30%; margin: 0 50px; background: rgb(0 0 0 / .5); padding: 30px; border-radius: 12px } #welcome .module .content .welcome-content>* { margin: 0 0 1em } #welcome .module .content .welcome-content>*:last-child { margin-bottom: 0 } #welcome .module .content .welcome-content h1 { font-size: 32px; font-weight: 700 } #welcome .module .content .welcome-content h2 { font-size: 24px; font-weight: 700 } #welcome .module .content .welcome-content p { font-size: 14px; line-height: 1.4em } #welcome .module .content form { flex: 0 0 30%; margin: 0 50px; padding: 30px; background: var(--color-dark-gray); border-radius: 12px; display: flex; flex-direction: column } #welcome .module .content form label { font-size: 14px; font-weight: 600; margin-bottom: 24px } #welcome .module .content form .input { margin-bottom: 16px } @media (max-width:810px) { #welcome .module .content { display: block; min-height: auto; padding: 35px } #welcome .module .content .welcome-content { margin: 0 0 30px } #welcome .module .content form { margin: 0 } #welcome .module .content form .input { background: #fff; color: #000; border-color: var(--color-brand-light); border-radius: 12px; padding: 8px 12px; } } #navbar .bars { display: flex; margin: 0; justify-content: space-between; padding: 0 35px 35px } #navbar .bars .bar { border-bottom: 3px solid var(--color-offwhite); flex: 0 0 calc(25% - 35px); margin: 0 17.5px; padding: 12px; font-size: 14px; text-transform: uppercase; letter-spacing: .1em; font-weight: 600; color: var(--color-offwhite); cursor: pointer } #navbar .bars .bar.completed { border-color: var(--color-brand-light); color: var(--color-brand-light) } #navbar .bars .bar.active { color: #fff } @media (max-width:810px) { #navbar .bars { padding: 0 10px 10px } #navbar .bars .bar { font-size: 10px; padding: 0 0 8px; margin: 0 5px; flex-basis: calc(25% - 10px) } } #select_club .form { display: flex; align-items: center; padding: 20px 47px 20px 35px } #select_club .form h2 { font-size: 24px; margin-right: 20px } #select_club .form input { margin-right: 15px; flex-basis: 25%; letter-spacing } #select_club .mobile-tabs { display: none } #select_club .clubs-map { display: flex; padding: 0 0 50px } #select_club .clubs-map .clubs { flex: 0 0 35%; padding: 0 35px; text-align: left; max-height: 60vh; overflow-y: scroll; overflow-x: hidden } #select_club .clubs-map .clubs .club { border-bottom: 1.4px solid #707070; padding: 20px 0; } .details-text { color: #0f7db7; font-weight: 700; margin-left: 5px; } .arrow-icon { transition: transform 0.3s ease; } .arrow-icon.rotate { transform: rotate(90deg); } #select_club .clubs-map .clubs .club .top { display: flex; align-items: center } #select_club .clubs-map .clubs .club .top .club-icon { margin-right: 20px } #select_club .clubs-map .clubs .club .top .name { margin-right: 20px; flex-basis: 45% } #select_club .clubs-map .clubs .club .top .name h3 { font-size: 18px; font-weight: 800; text-transform: uppercase; margin-bottom: 5px; letter-spacing: .1em } #select_club .clubs-map .clubs .club .top .name .signature { color: var(--color-brand-light); text-transform: uppercase; font-size: 14px; font-weight: 700 } #select_club .clubs-map .clubs .club .top .name p { font-size: 16px; line-height: 1.4em } #select_club .clubs-map .clubs .club .top .details-btn { margin: 0 20px 0 auto; display: flex } #select_club .clubs-map .clubs .club .top .details-btn .label { font-size: 12px; font-weight: 700; color: var(--color-brand-light); text-transform: uppercase; letter-spacing: .1em } #select_club .clubs-map .clubs .club .top .details-btn .icon-collapsed { content: url(../assets/triangle-right-blue.svg); display: block; margin-left: 10px } #select_club .clubs-map .clubs .club .top .details-btn .icon-expanded { content: url(../assets/triangle-down-blue.svg); display: block; margin-left: 10px } #select_club .clubs-map .clubs .club .top .button { padding: 12px } #select_club .clubs-map .clubs .club .bottom { display: flex } #select_club .clubs-map .clubs .club .bottom .info { flex: 0 0 60% } #select_club .clubs-map .clubs .club .bottom .info h3 { font-weight: 700; color: var(--color-brand-light); letter-spacing: .1em; margin-bottom: 5px; text-transform: uppercase } #select_club .clubs-map .clubs .club .bottom .info .hours, #select_club .clubs-map .clubs .club .bottom .info .phone { margin-bottom: 20px; text-transform: uppercase; letter-spacing: .1em; line-height: 1.6em } #select_club .clubs-map .clubs .club .bottom .info .hours p { line-height: 1.4em } #select_club .clubs-map .map { background: #ccc; flex: 0 0 65%; min-height: 60vh } #select_club .clubs-map .map .p7-pin { color: #000; padding: 5px } #select_club .clubs-map .map .p7-pin .name { font-size: 16px; margin-bottom: 5px; text-transform: uppercase } #select_club .clubs-map .map .p7-pin .signature { color: var(--color-brand-light); font-size: 14px; text-transform: uppercase; font-weight: 700; margin-bottom: 5px } #select_club .clubs-map .map .p7-pin .address { font-size: 12px; color: var(--color-gray) } #select_club .clubs-map .map .p7-pin .distance { font-size: 12px; color: var(--color-gray); font-weight: 600; text-transform: uppercase; margin-bottom: 10px } @media (max-width:1080px) { #select_club .clubs-map .clubs .club .top .details-btn { display: none } } @media (max-width:810px) { #select_club .module { margin: 13px; border-radius: 18px; border: 1px solid #646464 } #select_club .form { justify-content: center; padding: 20px 10px 0; display: block; text-align: center; } #select_club .form h2 { display: none } #select_club .form input { flex-basis: 50%; border-color: var(--color-brand-light); border-radius: 12px; padding: 8px; background: #fff; color: #000; padding-left: 30px; padding-right: 30px; } #select_club .mobile-tabs { display: flex; padding: 25px; justify-content: center } #select_club .mobile-tabs button { font-size: 17px; font-weight: 800; text-transform: uppercase; letter-spacing: .3em; margin-right: 20px; border-bottom: 3px solid #fff; padding: 8px 20px } #select_club .mobile-tabs button.active { color: var(--color-brand-light); border-color: var(--color-brand-light) } #select_club .clubs-map { display: block } #select_club .clubs-map .clubs { display: none } #select_club .clubs-map.show-clubs .clubs { display: block; max-height: 100%; padding: 0 20px } #select_club .clubs-map .clubs .club { border-bottom: 1.4px solid #707070; margin-bottom: 25px; padding: 15px } #select_club .clubs-map .clubs .club .top { align-items: flex-start; flex-wrap: wrap; display: block; } #select_club .clubs-map .clubs .club .top .club-icon { flex-basis: 23px; margin-right: 15px } #select_club .clubs-map .clubs .club .top .name { flex-basis: calc(100% - 23px - 15px); margin: 0 0 15px; text-align: center; } #select_club .clubs-map .clubs .club .top .name p .distance { display: block } #select_club .clubs-map .clubs .club .main-btn-wrapper { margin-left: 0px } #select_club .clubs-map.show-map .map { display: block; height: 70vh } } .form-fields { max-width: 800px; margin: 0 auto; text-align: left } .form-fields hr { height: 35px } .form-fields .field { margin-bottom: 15px } .form-fields .field label { display: block; font-size: 18px; font-weight: 300; text-align: left; letter-spacing: .02em; margin-bottom: 10px } .form-fields .field label.radio { display: inline-block; margin: 0 10px 10px 0 } .form-fields .field .input { width: 100% } .form-fields .fields-row { display: flex; margin: 0 -5px 15px } .form-fields .fields-row .field { flex: 0 0 calc(50% - 10px); margin: 0 5px } .form-fields .fields-row-address { display: flex; margin: 0 -5px 15px } .form-fields .fields-row-address .field { margin: 0 5px } .form-fields .fields-row-address .field.address_city { flex: 0 0 calc(50% - 10px) } .form-fields .fields-row-address .field.address_state { flex: 0 0 calc(20% - 10px) } .form-fields .fields-row-address .field.address_zipcode { flex: 0 0 calc(30% - 10px) } @media (max-width:700px) { .form-fields .field label { font-size: 16px } } #google_map { height: 400px; width: 100%; } @media (max-width: 767px) { #google_map { height: 400px; width: 97%; margin-left: 5px; border-radius: 10px; } } .p7-pin { text-align: center; padding: 15px; } .p7-pin .name { font-size: 18px; font-weight: bold; margin-bottom: 10px; } .p7-pin .address { font-size: 14px; color: #666; / margin-bottom: 15px; line-height: 1.5; } .p7-pin .main-btn-wrapper { margin-top: 15px; } .p7-pin .select-club-button { background-color: #0f7db7; color: white; padding: 10px 20px; text-decoration: none; border-radius: 5px; display: inline-block; font-size: 14px; } .p7-pin .select-club-button:hover { background-color: #f6841f; text-decoration: none; } .amenities-filter { margin-top: 10px; position: relative; max-width: 411px; margin-left: 33px; padding-bottom: 10px; margin: 19px; } .amenities-dropdown { background-color: #f8f9fa; padding: 10px 15px; border-radius: 5px; font-size: 16px; font-weight: bold; display: flex; justify-content: space-between; cursor: pointer; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); position: relative; z-index: 2; display: none; } .amenities-options { background-color: #f8f9fa; padding: 10px 15px; border-radius: 5px; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); margin-top: 10px; max-height: 300px; overflow-y: scroll; position: absolute; top: 100%; left: 0; width: 100%; z-index: 1000; display: block; /* Make it block-level by default */ } .hidden { display: none; } .amenities-options label { display: block; margin: 5px 0; } .amenities-options input[type="checkbox"] { margin-right: 10px; } .arrow-down { transform: rotate(0deg); transition: transform 0.3s ease; } .arrow-down.rotated { transform: rotate(180deg); } .hidden { display: none; } @media screen and (min-width: 768px) { /* Adjust the breakpoint as needed */ #clubs_list, #google_map { display: block !important; /* Force display regardless of JS manipulation */ } .mobile-tabs { display: none; /* Optionally hide the toggle buttons on larger screens */ } } .module { padding-top: 70px; } .bottom { display: none; overflow: hidden; transition: all 0.3s ease; } .hidden { display: none; } .info, .image { padding: 10px; } .club { display: grid; grid-template-rows: auto 1fr; grid-template-columns: 1fr; gap: 10px; } .content-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } @media (max-width: 600px) { .content-grid { display: block; text-align: center; } } .name { grid-column: 1 / -1; /* Span across all columns */ } .address { grid-column: 1; font-size: 14px; color: var(--color-gray) } .details { grid-column: 2; display: flex; flex-direction: column; align-items: flex-start; } @media (max-width: 600px) { .details { display: block; text-align: center; line-height: 25px; } } .main-btn-wrapper { margin-top: 10px; } .p7-pin { transform: scale(0.9); transition: opacity 0.5s ease, transform 0.5s ease; } .p7-pin.open { opacity: 1; transform: scale(1); } .is-signature { color: #f6841f; font-weight: 600; } .coming-soon { color: #0f7db7; font-weight: 600; } .location-heading { font-size: 25px; font-weight: bold; line-height: 24px; letter-spacing: .2em; text-transform: uppercase; position: relative; padding: 13px 0; text-align: center; padding-top: 40px; } .location-subheading { font-size: 16px; line-height: 24px; letter-spacing: .1em; text-transform: uppercase; position: relative; padding: 13px 0; margin-bottom: 40px; text-align: center; margin: 5px; } .state-search { font-size: 16px; line-height: 24px; letter-spacing: .2em; text-transform: uppercase; position: relative; padding: 13px 0; margin-bottom: 40px; text-align: center; color: #f6841f; text-decoration: underline; text-decoration-color: #f6841f; } .state-search:hover { color: #0f7db7; text-decoration: underline; text-decoration-color: #0f7db7; } .swal2-confirm { background-color: #f6841f; } /* Override the focus-visible shadow for SweetAlert confirmation button */ .swal2-container button.swal2-styled.swal2-confirm:focus-visible { box-shadow: none !important; } #autocomplete::placeholder { font-size: 13px; /* Optional: change the font size */ } /* Club Text Content */ .club-text-content .description h1 { font-size: 36px; font-weight: 700; color: #1a1a1a; margin: 1.2em 0 0.6em; } .club-text-content .description h2 { font-size: 30px; font-weight: 700; color: #1a1a1a; margin: 1.1em 0 0.5em; } .club-text-content .description h3 { font-size: 24px; font-weight: 600; color: #2a2a2a; margin: 1em 0 0.5em; } .club-text-content .description h4 { font-size: 20px; font-weight: 600; color: #333; margin: 0.9em 0 0.5em; } .club-text-content .description h5 { font-size: 18px; font-weight: 500; color: #444; margin: 0.8em 0 0.4em; } .club-text-content .description h6 { font-size: 16px; font-weight: 500; color: #555; margin: 0.7em 0 0.4em; } .club-text-content .description p { font-size: 16px; line-height: 1.6; color: #444; margin-bottom: 1em; } .club-text-content .description i { font-style: italic; color: #555; } .club-text-content .description u { text-decoration: underline; text-decoration-color: #999; } .club-text-content .description ul, .club-text-content .description ol { padding-left: 1.5em; margin-bottom: 1em; color: #444; font-size: 16px; line-height: 1.6; } .club-text-content .description ul li, .club-text-content .description ol li { margin-bottom: 0.5em; }