/* -------------------------------------------------- Table of Contents ----------------------------------------------------- :: Browser Resets :: Main Structure :: Sub Structure :: Universal Classes :: Universal Facebook Styles */ /* -------------------------------------------------- :: Browser Resets -------------------------------------------------- */ body { font-family: sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; /* Google Fonts - for example - will render proper sizes in all browsers with this fix (no matter what color - Firefox traditionally renders bolder for white color text) */ -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; transition: all 0.3s ease; } /*DEFINE FONTS*/ @font-face { font-family: 'Cachet Book'; src: url('graphics/extras/cachet/cachet-book-webfont.eot'); src: url('graphics/extras/cachet/cachet-book-webfont.eot?#iefix') format('embedded-opentype'), url('graphics/extras/cachet/cachet-book-webfont.woff') format('woff'), url('graphics/extras/cachet/cachet-book-webfont.ttf') format('truetype'), url('graphics/extras/cachet/cachet-book-webfont.svg#CachetBookRegular') format('svg'); font-weight: normal; font-style: normal; } @font-face { font-family: 'Cachet Bold'; src: url('graphics/extras/cachet/cachet-bold-webfont.eot'); src: url('graphics/extras/cachet/cachet-bold-webfont.eot?#iefix') format('embedded-opentype'), url('graphics/extras/cachet/cachet-bold-webfont.woff') format('woff'), url('graphics/extras/cachet/cachet-bold-webfont.ttf') format('truetype'), url('graphics/extras/cachet/cachet-bold-webfont.svg#CachetBoldRegular') format('svg'); font-weight: normal; font-style: normal; } @font-face { font-family: 'Cachet Medium'; src: url('graphics/extras/cachet/cachet-medium-webfont.eot'); src: url('graphics/extras/cachet/cachet-medium-webfont.eot?#iefix') format('embedded-opentype'), url('graphics/extras/cachet/cachet-medium-webfont.woff') format('woff'), url('graphics/extras/cachet/cachet-medium-webfont.ttf') format('truetype'), url('graphics/extras/cachet/cachet-medium-webfont.svg#CachetBoldRegular') format('svg'); font-weight: normal; font-style: normal; } /*END DEFINE FONTS*/ h1, h2, h3, h4, h5, h6 {font-family: 'Cachet Bold', Verdana, sans-serif; font-weight: normal; line-height: 1.1; margin-top: 0;} h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {color: inherit;} h1 {font-size: 36px; margin-bottom: 12px;} h2 {font-size: 32px; margin-bottom: 9px;} h3 {font-size: 26px; margin-bottom: 9px;} h4 {font-size: 21px; margin-bottom: 3px;} h5 {font-size: 16px; margin-bottom: 3px;} h6 {font-size: 14px; margin-bottom: 3px;} /* Text Colors (Benefit Statement) */ .primary.light {color: #20bdbe;} .primary.medium {color: #01a490;} .primary.dark {color: #006b6b;} .secondary.light {color: #00aeef;} .secondary.medium {color: #0089d0;} .secondary.dark {color: #0060af;} a.primary.light:hover {color: #006b6b;} a.primary.medium:hover {color: #20bdbe;} a.primary.dark:hover {color: #01a490;} a.secondary.light:hover {color: #0060af;} a.secondary.medium:hover {color: #00aeef;} a.secondary.dark:hover {color: #0089d0;} .primary-bg.light-bg {background: #20bdbe;} .primary-bg.medium-bg {background: #01a490;} .primary-bg.dark-bg {background: #006b6b;} .secondary-bg.light-bg {background: #00aeef;} .secondary-bg.medium-bg {background: #0089d0;} .secondary-bg.dark-bg {background: #0060af;} /* Tertiary Colors (more rarely used) */ .tertiary.light {color: #fcaf17;} .tertiary.medium {color: #f47920;} .tertiary.dark {color: #dd5828;} a.tertiary.light:hover {color: #dd5828;} a.tertiary.medium:hover {color: #fcaf17;} a.tertiary.dark:hover {color: #f47920;} .tertiary-bg.light-bg {background: #fcaf17;} .tertiary-bg.medium-bg {background: #f47920;} .tertiary-bg.dark-bg {background: #dd5828;} h2.section-title {font-size: 16px; color: #888; margin: 0 0 -3px;} /* Elements */ a {} a:hover {} a img {border: none;} em, i {font-style: italic; line-height: inherit;} hr {border: 0; border-bottom: 1px solid #ddd; clear: both; display:block; height: 0; margin: 15px 0;} li {line-height: 1.5;} dt {font-weight: bold;} dd {margin-left: 0; margin-bottom: 10px} p {margin: 0 0 18px; line-height: 1.5;} p a, p a:visited {line-height: inherit;} p, p a, ul, ol, ul a {font-family: inherit;} small {font-size: 60%; line-height: inherit;} strong, b {font-weight: 700; line-height: inherit;} :focus {outline: 0;} /* EditAnywhere Bar */ #editAnywhere {position: fixed; z-index:99999; border: 1px solid rgba(255,255,255,.2); bottom: 10px; height: 60px; width: 250px !important; text-align: left !important; background: url(graphics/images/Blue_Home/cms_logo_ysite_sm.png) right center rgba(0,0,0,.8) no-repeat !important; background-size: 100px auto !important; left: 50%; margin-left:-125px; border-radius: 10px; padding: 12px 0px !important;} #editAnywhere a {margin-left: 20px;} /* Layout Style */ body.boxed {background: #ccc;} body.boxed div, body.boxed > #header, body.boxed > #footer {max-width: 1100px; margin-left: auto; margin-right: auto;} body.boxed > div, body.boxed > #header, body.boxed > #footer {box-shadow: 0 0 20px #555; -webkit-box-shadow: 0 0 20px #555;} /* Forms */ /* Specified in foundation.css */ /* Scholarship Calculator Form */ .scholarship-calculator input[type=submit] {margin-top: 50px;} .readonly .formtext {text-align: right; padding-right: 10px;} .readonly input {border: none; background: #eee; padding-left: 10px;} .readonly.discount td {text-align: center;} .readonly.discount .formtext {text-align: center; font-size: 18px; font-weight: 700; margin: 20px 0 10px;} .scholarship-calculator .readonly.discount input {font-size: 24px; text-align: center; border: none; max-width: 50%; margin: auto; padding: 8px; height: auto;} .scholarship-calculator td {min-width: 200px; max-width: 100%; padding: 4px; line-height: 1; } .scholarship-calculator input, .scholarship-calculator select {margin-bottom: 0; padding: 2px 5px; height: 34px;} .scholarship-calculator .formtextRequired, .scholarship-calculator .formtext {font-size: 14px;} .scholarship-calculator .discount-wrapper .message {margin:25px 0 0; font-size:14px; text-align:center;} .scholarship-calculator .discount-wrapper .two-column {width:50%; float:left;} .scholarship-calculator .two-column .readonly.discount input {width:65%;} .shar-your-story-wrapper{position:relative;} .share-story-lister-item{height:250px; overflow:hidden;} .share-story-lister-item h2{margin-top:0; margin-bottom:0;} .share-story-lister-item hr{margin:26px 0 !important;} .share-story-member-year p{font-size:12px; font-style: italic; margin-top:0px; margin-bottom:0px;} .fade{background-image:url(graphics/images/read-on-fade.png); background-position: left top; background-repeat:repeat-x; position:relative; z-index:1; height: 110px; margin-top: -90px; width: 100%; text-align:center; padding-top:90px;} /*Donation Form */ .hidden {margin-bottom: 15px; padding:15px 15px 0; background:#f3f3f3; border-radius:6px; -webkit-border-radius:6px;} .button-wrapper {text-align:center; margin-bottom:20px;} .button-wrapper p{margin-bottom:0px;} div.button-container {display:inline-block; margin:15px 5px 0;} div.button-container .button {font-size:24px; border-radius:4px; padding:5px 15px; text-decoration:none; color:#5A5954; background:#fff; margin-bottom:5px;} div.button-container .button:hover{color: #5A5954;} div.button-container .button.selected {color:#fff;} select#IDFormField_expiration_0 {width:49%; margin-right:1%; float:left;} select#IDFormField_expiration_0_year {width:49%; margin-left:1%; float:left;} /* Job Application Form */ .employment-container {padding: 15px 20px 0px; background:#f0f0f0; margin-bottom:10px; border-radius:6px; border:1px solid #ccc;} /* Income rates Calculator */ .income-rates {max-width:350px; margin:0 auto; padding:15px; text-align:center; border:2px solid #ccc; border-radius:6px; background:#f9f9f9;} .income-rates label {margin-top:15px;} .income-rates .rate {width:135px; height:55px; padding:3px; margin:0 auto 15px; border:1px solid #ccc; border-radius:6px; background:#fff; font-size:30px; font-family:'Cachet Bold';} .income-rates select {background:#fff;} .income-rates .submit {margin:10px auto 10px;} .income-rates .disclaimer {font-size:12px; margin:0;} /* Tables */ table { width:100%;} caption, th, td {font-weight: normal;} @media only screen and (max-width: 100%) and (min-width: 768px) { table tbody tr td {padding:2% 0;} table tr td input {padding:2% 0;} } /* remember to define focus styles! */ /* ----------------------------------------- Define Main Structure ----------------------------------------- */ body {color:#555555; font-family: Verdana, Arial, Helvetica, sans-serif; margin:0; padding:0; position:relative; letter-spacing: -0.01em;} .page {clear: both; background: #fff;} /* Header */ .sticky-container {transition: all 0.4s ease;} .sticky-container.stuck {position:fixed; width:100%; z-index: 999; top:0;} .top-nav {border: none; height: auto; line-height: 1;} .top-nav p {margin:0; display:inline-block; line-height:1.2;} .top-nav .social-media {float: right;} .top-social-icon {display: inline-block; margin-right: 5px;} .top-social-icon img {width: 20px; height: auto;} .top-nav .search {float: right; margin-left:20px;} .top-nav .search input {width: auto; top: 0; border: none; line-height: 1; color: #b2b2b2; background: #565656; height: 24px; font-size: 13px; margin:0;} .top-nav .search input:focus {background: #fff; color: #636466;} .top-nav .search img {display:block; height: auto; width: 16px;} .top-nav .search-input {float: left;} .top-nav .search-submit {float: left;} .top-nav .search-link {background: #565656; display: block; padding: 4px 8px; height: 24px; border-left: 1px solid #000;} .top-nav .search-link:hover {background: #464646;} .top-nav nav {float: right; margin: 0;} .top-nav nav ul {margin: 0; padding: 0;} .top-nav nav li {display: inline-block;} .top-nav nav a {text-decoration: none; display: block; padding: 3px 8px; font-size: 13px; color:#fff;} .top-nav a:hover {text-decoration: underline;} /*main logo styles */ .logo-wrapper {text-align:left} .logo { display:inline-block; transition: all .3s linear; -webkit-transition: all .3s linear;} .logo .core-container {text-align:left; display:flex; align-items:flex-end; transition: all .3s linear; -webkit-transition: all .3s linear;} .logo img.main-y {max-width:100px; padding-bottom:4px; height: auto; transition: all .3s linear; -webkit-transition: all .3s linear;} .logo .values {line-height:0; padding-left:7px;} .logo .values div {width:116px; transition: all .3s linear; -webkit-transition: all .3s linear;} .logo .values img {width:100%; max-width:100%;} .stuck .logo img.main-y {max-width: 60px; height: auto; padding:0;} .stuck .logo .values {padding:0;} .stuck .logo .values div {width:0 !important;} .stuck .logo .values div img {width:100%; max-width:100%;} @media only screen and (max-width: 640px) { .logo .values {display:none !important;} } /* YMCA name styles */ h1.ymca-name { text-transform: uppercase; line-height: 1.1; font-size: 28px; text-align: right; margin: 20px 0 15px; overflow: hidden; transition: all .3s linear; -webkit-transition: all .3s linear; } h1.ymca-name a {text-decoration: none; margin: 0; transition: all .3s linear; -webkit-transition: all .3s linear;} .stuck h1.ymca-name {font-size: 22px; margin:-5px 0 0;} .stuck h1.ymca-name a {margin-right: -500px;} /* Navigation */ #mainnav { text-align: center; width: 100%; position: relative; transition: all .3s linear; -webkit-transition: all .3s linear; } #mainnav ul {display: block; list-style: none; margin: 0 auto; padding: 0; position: relative; text-align: center; z-index: 10;} .sub-nav .sub-nav-wrapper {-webkit-box-shadow: inset 0px 6px 9px -6px rgba(0,0,0,0.4); -moz-box-shadow: inset 0px 6px 9px -6px rgba(0,0,0,0.4); box-shadow: inset 0px 6px 9px -6px rgba(0,0,0,0.4);} .sub-nav ul {display: block; list-style: none; margin: 0 auto; padding: 0; position: relative; text-align: center;} #mainnav li, .sub-nav li {*display: inline; display: inline-block; padding: 0; margin: 0; line-height: 1; position: relative; zoom: 1;} #mainnav ul a, .sub-nav ul a { font-family: 'Cachet Bold', Verdana, sans-serif; display: block; font-size: 17px; padding: 10px 15px; text-decoration: none; transition: all .15s ease; -webkit-transition: all .15s ease; } #mainnav li ul, .sub-nav li ul { font-size: 14px; line-height: 1.2; padding: 0 0 10px 0; position: absolute; top: 100%; left: 0; text-align: left; width: 202px; z-index: 1001; height:auto; visibility:hidden; border-bottom-right-radius: 8px; -webkit-border-bottom-right-radius: 8px; border-bottom-left-radius: 8px; -webkit-border-bottom-left-radius: 8px; } #mainnav li li, .sub-nav li li {margin: 0; width: 100%;} #mainnav li ul a, .sub-nav li ul a {color: #fff; border-right: 0; display: block; line-height: 1.2; margin: 0!important; padding: 4% 5%!important; text-align: left; text-transform: none!important; font-family: 'Cachet Medium', Verdana, sans-serif;} #mainnav li.sfHover ul, .sub-nav li.sfHover ul {visibility: visible;} #mainnav li ul ul, .sub-nav li ul ul {top: 0; left: 202px; padding:0 0 10px 0;} #mainnav ul > li .caret:after, .sub-nav ul > li .caret:after {content: "\25bc"; font-size: 9px; color: #aaa; top: -1px; position: relative;} /* Dropdown Indicator */ #mainnav ul > li li .caret:after, .sub-nav ul > li li .caret:after {content: "\25b6"; font-size: 9px; color: #fff; top: -1px; position: relative;} /* 2nd level Dropdown Indicator */ .mobile-divider {height:4px;} .sub-nav ul {text-align:left;} .sub-nav ul a {color:#fff;} .sub-nav ul > li .caret::after {color:#fff; opacity:.5;} @media only screen and (max-width: 1100px) { #mainnav ul a, .sub-nav ul a {font-size:15px; padding:6px;} h1.ymca-name {font-size:24px;} } @media only screen and (max-width: 640px) { h1.ymca-name {margin:0; font-size:22px;} #header .mobile-buttons {margin:5px 0;} #header .mobile-buttons .mobile-icon {width:30px; margin-top:4px; margin-right:15px;} .logo img.main-y {max-width:75px;} .sub-nav {display:none;} } /* style 1 specific */ .style-1 #mainnav {background:#fff; box-shadow: 0 1px 3px 0 rgba(0,0,0,.45); -webkit-box-shadow: 0 1px 3px 0 rgba(0,0,0,.45); } .style-1 .logo .core-container {padding: 25px;} .style-1 .logo img.main-y {max-width:75px;} .style-1 .stuck .logo img.main-y {max-width:60px;} .style-1 .logo .values div {width:104px;} .style-1 .stuck .logo .core-container {padding: 12px;} .style-1 #mainnav ul {text-align:right;} .style-1 .top-nav {background: #000; height: auto; border-bottom: 1px solid #000;} .style-1 .sub-nav .row {max-width:96%;} @media only screen and (max-width: 1100px) { h1.ymca-name {margin-bottom:8px;} } @media only screen and (max-width: 640px) { h1.ymca-name {margin:10px 0 0;} .style-1 .logo .core-container {padding:15px;} .style-1 .logo img.main-y {max-width:65px;} } /* style 2 specific */ .style-2 .top-nav {background:#fff;} .style-2 .top-nav nav a {color:#333; font-size:11px; padding:3px 5px;} .style-2 #mainnav {box-shadow:none; background:#fff;} .style-2 .logo-wrapper, .style-2 .header-right {padding-top:5px; padding-bottom:5px;} .style-2 h1.ymca-name {margin:40px 0 0;} .style-2 .stuck h1.ymca-name {font-size: 22px; margin:25px 0 0;} .style-2 .stuck h1.ymca-name a {margin-right: 0px;} .style-2 #mainnav ul li > a {color:#fff; text-transform:uppercase; padding:15px;} .style-2 #mainnav ul > li .caret::after {color:#fff; opacity:.5;} @media only screen and (max-width: 1100px) { .style-2 #mainnav ul li > a {padding:12px;} } @media only screen and (max-width: 640px) { .style-2 h1.ymca-name {margin:0;} } /* style 3 specific */ .style-3 .top-nav .search input {background:#fff;} .style-3 #mainnav {box-shadow:none;} .style-3 .logo-wrapper, .style-3 .header-right {padding-top:10px; padding-bottom:10px;} .style-3 h1.ymca-name {margin:45px 0 0;} .style-3 .stuck h1.ymca-name {font-size: 22px; margin:20px 0 0;} .style-3 .stuck h1.ymca-name a {margin-right: 0px;} .style-3 #mainnav ul li > a {color:#fff; text-transform:uppercase; padding:15px;} .style-3 #mainnav ul > li .caret::after {color:#fff; opacity:.5;} @media only screen and (max-width: 1100px) { .style-3 #mainnav ul li > a {padding:12px;} } @media only screen and (max-width: 640px) { .style-3 h1.ymca-name {margin:0;} } /* style 4 specific */ .style-4 .top-nav {background:#e6e6e6;} .style-4 .top-nav .search {margin-top:2px;} .style-4 .top-nav .search input {background:#fff;} .style-4 .top-nav nav a {text-transform:uppercase; font-family:'Cachet Bold', Verdana, sans-serif; color:#757575; font-size:15px;} .style-4 .top-nav nav a:hover {text-decoration:none; color:#000;} .style-4 #mainnav {background:#fff;} .style-4 .logo-wrapper, .style-4 .header-right {padding-top:15px; padding-bottom:10px;} .style-4 h1.ymca-name {margin:0 0 10px; font-size:24px;} .style-4 .stuck .header-right h1.ymca-name {margin:0; padding:0; line-height:0;} .style-4 #mainnav ul li > a {color:#fff; text-transform:uppercase;} .style-4 #mainnav ul > li .caret::after {color:#fff; opacity:.5;} .style-4 .header-menu-buttons {text-align:right; margin-top:4px;} .style-4 .header-menu-buttons a {font-size: 15px; padding: 7px 14px; margin-left:5px;} .style-4 .logo-wrapper h1.ymca-name {display:inline-block; opacity:0; margin:0; font-size:0px; padding:0;} .style-4 .stuck .logo-wrapper h1.ymca-name {opacity:1; line-height:1; font-size:16px; border-left:1px solid #e6e6e6; padding:8px 0 8px 12px; margin-left:3px;} .style-4 .stuck .logo-wrapper h1.ymca-name a {margin:0;} @media only screen and (max-width: 1100px) { .style-4 #mainnav ul li > a {padding:10px 6px;} .style-4 .header-menu-buttons a {font-size:13px; padding: 5px 10px; margin-left: 2px;} } @media only screen and (max-width: 640px) { .style-4 #header .header-menu-buttons {display:none;} .style-4 h1.ymca-name {margin:0; font-size:22px;} .style-4 #mainnav {border-bottom:1px solid #ddd;} } /* branch style 2 header */ .branch-style-2 .top-nav {padding:2px 0; border:none;} .branch-style-2 #mainnav {box-shadow:none; background:#fff;} .branch-style-2 .highlight-bar {height:6px;width:100%;} .branch-style-2 .top-nav a, .branch-style-2 .top-nav nav a {font-size:11px; padding:3px 5px; color:#fff; font-family:Verdana, sans-serif; text-transform:initial; text-decoration:underline;} .branch-style-2 .branch-info {font-size:14px; text-align:right; clear:both; margin-top:7px; transition: all .3s linear; -webkit-transition: all .3s linear;} .branch-style-2 .branch-info img {width:20px; margin-left:5px;} .branch-style-2 .branch-info a {color:#555;} .branch-style-2 .ajax-button {font-size:12px; float:right; padding:7px 10px; margin:11px 0 7px 15px; transition: all .3s linear; -webkit-transition: all .3s linear;} .stuck .branch-style-2 .ajax-button {margin:0 0 2px 10px;} .branch-style-2 .logo-wrapper, .branch-style-2 .header-right {padding-top:15px; padding-bottom:10px; transition: all .3s linear; -webkit-transition: all .3s linear;} .stuck .branch-style-2 .header-right {padding-top:10px;} .branch-style-2 h1.ymca-name {font-size:28px; margin:10px 0 7px;} .stuck .branch-style-2 h1.ymca-name {line-height:1.2; font-size:22px; margin:2px 0 0;} .stuck .branch-style-2 h1.ymca-name a {margin:0;} .branch-style-2 .logo .core-container, .stuck .branch-style-2 .logo .core-container {padding:0;} .branch-style-2 .logo img.main-y {max-width:100px;} .stuck .branch-style-2 .logo img.main-y {max-width:70px;} .branch-style-2 .logo .values div {width:116px;} .branch-style-2 .sub-nav .row {max-width:1100px;} .branch-style-2 #mainnav .logo {background:transparent;} @media only screen and (max-width: 1100px) { .branch-style-2 h1.ymca-name {font-size:24px;} .branch-style-2 .ajax-button {margin-top:8px;} .branch-style-2 .branch-info {font-size:12px;} .branch-style-2 .branch-info img {width:15px;} } @media only screen and (max-width: 640px) { .branch-style-2 .branch-info {display:none;} .branch-style-2 h1.ymca-name {font-size:22px; margin:0;} .branch-style-2 .highlight-bar {height:4px;} } /* Custom mobile Menu */ .cbp-spmenu { position: fixed; right: -240px; width: 240px; height: 100%; top: 0; z-index: 1000; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; transition: all 0.3s ease; } .menuOpen .cbp-spmenu {right:0;} .cbp-spmenu-push { overflow-x: hidden; position: relative; right: 0; left:0; } .cbp-spmenu-push.menuOpen {right:240px; left:-240px; position:fixed;} /*END REPLACE SECTION */ /*Custom Menu styles */ .cbp-spmenu {background:#f3f3f3;} .cbp-spmenu .close-container {background:#f3f3f3; border-bottom:1px solid #dedede; padding:10px;} .cbp-spmenu .close-container img {width:70px;} .cbp-spmenu .menu-container {overflow-y:scroll; padding:0 15px;} .cbp-spmenu .menu-container nav {margin:10px 0 20px;} .cbp-spmenu h5 {text-transform:uppercase; margin:0;} .cbp-spmenu ul {margin:0; list-style-type:none; padding:0; border-radius:4px;} .cbp-spmenu ul a {text-decoration:none; display:block; width:100%; color:#555;} .cbp-spmenu nav > ul {margin: 0 0 25px 0;} .cbp-spmenu ul > li > a {font-size:16px; padding:7px 10px;} .cbp-spmenu ul ul a {font-size:14px; padding:7px;} .cbp-spmenu ul .top > a {display:inline-block; width:80%; padding-right:0;} .cbp-spmenu ul li {border-bottom:1px solid #dedede;} .cbp-spmenu ul.sub {display:none; background:#d5d5d5; border-radius:4px 0 4px 4px; padding:5px; margin-bottom:5px;} .cbp-spmenu ul.sub > li:last-child {border-bottom:none !important;} .cbp-spmenu ul a.toggleSub {width:20%; text-align:center; padding-left:0; padding-right:0; background:#e9e9e9;} .cbp-spmenu ul a.toggleSub.clicked {background:#d5d5d5;} .cbp-spmenu ul.sub li {border-bottom:1px solid #c5c5c5;} .cbp-spmenu ul.sub a.toggleSub {background:#dedede;} .cbp-spmenu ul.sub a.toggleSub.clicked {background:#c5c5c5;} .cbp-spmenu ul.sub ul.sub li {border-bottom:1px solid #b0b0b0;} .cbp-spmenu ul.sub ul.sub {background:#c5c5c5;} .cbp-spmenu ul.sub ul.sub a.toggleSub {background:#cfcfcf;} .cbp-spmenu ul.sub ul.sub a.toggleSub.clicked {background:#aeaeae;} .cbp-spmenu ul.sub ul.sub ul.sub {background:#aeaeae;} .cbp-spmenu ul.sub ul.sub ul.sub li {border-bottom:1px solid #999;} .cbp-spmenu .mobile-buttons {margin-bottom:30px;} .cbp-spmenu .header-menu-buttons {display:block;} .cbp-spmenu .header-menu-buttons a {display:block; margin-bottom:9px; padding:10px;} .cbp-spmenu ul .menuItemHighlight > ul.sub {display:block;} .cbp-spmenu-push.menuOpen #mobile-overlay-menu-open {position: absolute; width: 100%; height: 100%; top: 0; left: 0; background: rgba(0,0,0,.45); z-index: 1000;} /* overlay - but not over header or X close button */ /* Menu Hamburger styles */ .showMobile { position: relative; height: 27px; width: 35px; cursor: pointer; transition: opacity .25s ease; float:right; display:none; margin:7px 0 0 ; } .cbp-spmenu .showMobile {margin:10px 0 0;} .showMobile:hover {} .showMobile.active .top {transform: translateY(11px) translateX(0) rotate(45deg);} .showMobile.active .middle {opacity: 0;} .showMobile.active .bottom {transform: translateY(-11px) translateX(0) rotate(-45deg);} .showMobile span { background:#fff; border: none; height: 4px; width: 100%; position: absolute; top: 0; left: 0; transition: all .35s ease; cursor: pointer; } .showMobile span:nth-of-type(2) {top: 11px;} .showMobile span:nth-of-type(3) {top: 22px;} /* end Custom mobile Menu */ @media screen and (max-width: 767px) { .showMobile {display:block;} } .bg-stripe-bar {height: 8px} /* Breadcrumbs Nav */ #breadcrumbs-menu {font-size: 12px; color: #9a9a9a; padding-top: 15px; padding-left: 10px;} #breadcrumbs-menu a {color: #9a9a9a;} #breadcrumbs-menu a:hover {color: #555;} /* ******************* */ /* ----- Content ----- */ /* ******************* */ /* HOMEPAGE */ .home.section {text-align: center; position: relative; height: 0; padding-bottom: 55%; overflow: hidden; /* Demo purpose - not on Fairview Lake - border-bottom: 30px solid #000; */} .home.section:last-child {border: none;} .home.section .section-text {color: #fff; position: absolute; height: 100%; max-width: 80%; width: 450px; border-left: 5px solid #fff; border-right: 5px solid #fff;} .home.section img {position: absolute; top: 0; left; 0; right: 0;} .home.section h1 {text-transform: uppercase; font-size: 46px; line-height: 1; padding-bottom: 5px;} .home.section.framed h1 {color: #fff; border-bottom: 1px solid #fff; margin: 10px auto 20px; width: 80%;} .home.section p {padding: 0 20px;} .home.section a {color: #fff; text-decoration: none; font-size: 18px; line-height: 1.1;} .home.section .button {font-weight: 700; text-transform: uppercase; margin-top: 80px; border: 2px solid #fff;} .home.section.open .section-text {color: #777; border: none; width: 60%; background: url(graphics/images/bg_white_overlay.png) repeat-y;} .home.section.open .section-text.left-side {text-align: left; background-position: top right;} .home.section.open .section-text.right-side {text-align: right; background-position: top left;} .home.section.open h1 {border-bottom: 1px solid #bfbfbf;} .home.section.open p {padding: 0; font-size: 18px;} .home.section.open .button {margin-top: 20px;} .tiles ul {text-align:center;} .tiles a {text-decoration:none;} .tiles .item {border-radius: 8px; -webkit-border-radius: 8px; overflow: hidden; position: relative; width:100%; background:#f0f0f0;} .tiles .item:after {content:''; display:block; padding-bottom:100%;} .tiles .item img {position: absolute; width: 100%; top:0; left:0;} .tiles .item .info {text-align: center; position: absolute; bottom: 0; width: 100%; top:70%; transition: all .3s ease; -webkit-transition: all .3s ease;} .tiles .item:hover .info, .tiles .item.full-height .info {position: absolute; top: 0;} .tiles .item h2 {margin: 0; width:100%; transform:translateY(-50%); top:50%; position:absolute; padding:15px; text-align:center; transition: all .3s ease; -webkit-transition: all .3s ease;} .tiles .item.show-p h2 {top:40%;} .tiles .item:hover h2, .tiles .item.show-all h2 {top:4%; transform:translateY(0%);} .tiles .item p {position: absolute; top: 100%; bottom: -400px; padding: 0 20px; width:100%; transition: all .3s ease; -webkit-transition: all .3s ease;} .tiles .item.show-p p {bottom: 0; top: 53%;} .tiles .item:hover p, .tiles .item.show-all p {bottom: 0; top: 34%;} .tiles .item .tile-button {position: absolute; bottom: -700px; padding: 20px 0; display: block; width: 100%; text-align: center; font-size: 18px; font-weight: 600; transition: all .4s ease; -webkit-transition: all .4s ease;} .tiles .item:hover .tile-button, .tiles .item.show-all .tile-button {bottom: 0%;} .tiles .item .tile-button:hover {color: #fff;} /* POE specific styles */ .tiles.poe .item .info {display:flex; align-items:center;} .tiles.poe .item .info img {position:static; width:auto; max-height:100px; margin-bottom:15px;} .tiles.poe.tablet .item .info img {max-height:140px;} .tiles.poe .item .info .wrap {padding:10px; width:100%;} .tiles.poe.tablet .item .info .wrap {padding:20px;} .tiles.poe .item h2 {position:static; transform:translateY(0); top:auto; padding:0;} .tiles.poe.desktop .item h2 {font-size:26px;} .tiles.poe .item p {position: static; top: auto; bottom: auto; padding: 0; margin-top:10px; font-size:15px;} .poe-category-lister .button {width:100%;} .tiles.poe .detail-title {margin-bottom:15px;} .tiles.poe .warning {background:#f0f0f0; border:1px solid #ddd; text-align:center; font-style:italic; font-weight:700; padding:10px;} .tiles.poe .warning p {margin:0;} .tablet-header {background:#f0f0f0; padding:20px 0;} .float-row {display:flex; flex-flow:row; align-items:center;} .float-row h1 {margin:0;} .tablet-header h1 {font-size:20px; text-transform:uppercase; margin-left:10px;} .tablet-header h2 {text-transform:uppercase; margin-left:10px; margin-bottom:0;} .float-row .col {-ms-flex: 1 1 0%; flex: 1 1 0%;} .float-row .col.shrink {-ms-flex: 0 0 auto; flex: 0 0 auto; max-width: 100%;} .float-row .nav-buttons a {display:inline-block; text-align:center; background:#ddd; height:55px; width:55px; border-radius:6px; margin:0; padding:5px; font-size:12px; border:1px solid #c3c3c3; color:#727272; text-decoration:none;} .tablet-header .float-row .nav-buttons a {height:65px; width:65px; padding:7px;} .float-row .nav-buttons a:hover {background:#cecece;} .float-row .nav-buttons a img {width:auto; height:25px;} .tablet-header .float-row .nav-buttons a img {height:32px;} @media only screen and (max-width: 460px) { .tiles .item .info {top:0;} .tiles .item h2 {top:4% !important; transform:translateY(0%);} .tiles .item p {bottom: 0; top: 34% !important;} .tiles .item .tile-button {bottom: 0% !important;} } .section-separator {height: 30px; background: #000 !important;} .tiles.section {padding: 50px 0;} .custom.section {padding: 50px 0;} .home-hr-section {margin-bottom: -40px;} .home-hr-section .home-hr {margin-top: -15px;} /* Tubular Background Video */ #tubular-container {z-index: 0 !important; top: 0; position: absolute !important;} #tubular-player {width: 100% !important; height: 100% !important; left: 0 !important; top: 0 !important;} /* Overwriting the JS for the iframe - since I have #bg-video 16/9 ratio percentage */ #tubular-shield {background: #000; opacity: .3;} #bg-video {height: 0; padding-bottom: 56.25%; background: #000;} #bg-video .video-text {position: absolute; z-index: 3; bottom: 40%; left: 10%; right: 10%; text-transform: uppercase; text-align: center;} #bg-video .video-text h2 {color: #fff; line-height: 1; margin: 0; font-size: 52px; text-shadow: 0 0 5px #000;} #bg-video .video-text h4 {color: #fff; font-size: 32px; text-shadow: 0 0 5px #000;} a.homepage-btn.button {margin-top: 20px; text-shadow: none; font-weight: bold;} .bg-video-mobile.show-for-small {position: relative;} .bg-video-mobile.show-for-small img {width: 100%;} .half-size #bg-video {padding-bottom: 36.25%; overflow: hidden;} .half-size #tubular-container {height: 200% !important; margin-top: -15%;} /* Black Bar */ .black-bar {background: #000; color: #fff; padding: 20px 0;} .black-bar h3 {color: #fff; font-size: 32px; font-family: "Cachet Book",Verdana,sans-serif;} .black-bar .button {margin-top: 20px;} .enews-bar img {margin-top: 8px;} .enews-bar .callout-bar-text {border: none;} .enews-callout .enews-title {float: left; margin: 0 15px 0 0; text-transform: uppercase; font-family: "Cachet Bold", Verdana, sans-serif;} .enews-callout .enews-subtext {clear: both; font-size: 11px; margin: 0; color: #aaa; margin: 0;} .enews-callout #broadcastemail_signup_form {float: left; margin: 8px 0 0; width: 50%;} .enews-callout .enewsBoxEdit {width: 70%; float: left; height: 30px; padding: 3px;margin: 0;} .enews-callout input[type=submit] {width: 29%; float: left; margin: 0; height: 30px; margin-left: 1%; padding: 5px; font-size: 11px;} /* Countdown Timer */ #countdown-bar {display: none;} /* Cookies & Close panel now show/hide as needed via JS - this is CSS default to get that to function */ #countdown-wrapper {width: 440px; margin: auto; max-width: 100%;} .countdown-bar {color: #fff; background: #000; background: rgba(0,0,0,.85); z-index: 100; position: fixed; bottom: 0; width: 100%;} .countdown-timer h2 {font-family: 'Cachet Book', Verdana, sans-serif; line-height: 1; text-align: right; padding-right: 15px; padding-bottom: 10px; border-right: 1px solid #666; margin-top: 25px; color: #fff;} .countdown-box {border-radius: 6px; -webkit-border-radius: 6px; float: left; padding: 10px; text-align: center; width: 80px; color: #000; line-height: 1; margin: 25px 8px 20px 0; font-size: 12px;} .countdown-box span {display: block; color: #fff; font-size: 38px; font-weight: bold; margin-bottom: 3px;} .countdown-text {padding-top: 25px;} .countdown-text p {font-size: 14px; line-height: 1;} .countdown-text a {font-weight: 700;} #close-cd-bar {color: #fff; float: right; font-size: 12px; margin-bottom: -17px; position: relative; z-index: 100; text-decoration: none;} #close-cd-bar:hover {text-decoration: underline;} #close-cd-bar strong {font-size: 14px;} /* Alert Bar */ .alert-bar {width:100%; padding:15px 100px 15px 15px; background:#e4e4e4; position:relative; border:1px solid #666; border-radius:3px;} #alert-slider.full-width .alert-bar {border: none !important; border-radius: 0 !important;} .alert-bar.single {padding-right:43px;} .alert-bar.icon {padding-left:48px;} .alert-bar .icon-wrap { background:#666; height: 24px; width: 24px; padding: 2px; border-radius: 3px; text-align:center; position:absolute; left:15px; top:50%; transform:translateY(-50%);} .alert-bar .icon-wrap svg {height:17px; width:17px;} .alert-bar p {color:#484848; font-size:14px; margin-bottom:0;} .alert-bar a {color:#484848; text-decoration:underline;} .alert-bar.green {background:#ccf5f0; border:1px solid #01a490;} .alert-bar.green .icon-wrap {background:#01a490;} .alert-bar.blue {background: #c9e6f5; border:1px solid #0089d0;} .alert-bar.blue .icon-wrap {background:#0089d0;} .alert-bar.purple {background:#ecd4ec; border:1px solid #92278f;} .alert-bar.purple .icon-wrap {background:#92278f;} .alert-bar.red {background: #f2d9d9; border:1px solid #ed1c24;} .alert-bar.red .icon-wrap {background:#ed1c24;} .alert-bar.orange {background:#fbdac2; border:1px solid #f47920;} .alert-bar.orange .icon-wrap {background:#f47920;} .alert-bar.yellow {background: #f9edc0; border:1px solid #ffcc00;} .alert-bar.yellow .icon-wrap {background:#ffcc00;} .alert-bar.black {background: #e4e4e4; border:1px solid #666;} .alert-bar.black .icon-wrap {background:#666;} .alert-bar .close-alert {position:absolute; right:13px; top:13px; height: 25px; width: 25px; line-height: 19px; text-align: center; border-radius: 3px; border:1px solid #b5b5b5;} .alert-bar.green .close-alert {border:1px solid #9bd3cc;} .alert-bar.blue .close-alert {border:1px solid #84abbf;} .alert-bar.purple .close-alert {border:1px solid #cc97ca;} .alert-bar.red .close-alert {border:1px solid #dd9c9e;} .alert-bar.orange .close-alert {border:1px solid #ecbc9a;} .alert-bar.yellow .close-alert {border:1px solid #ffda47;} .alert-bar.black .close-alert {border:1px solid #b5b5b5;} .alert-bar .close-alert:hover {background:#fff; cursor:pointer;} .alert-bar .count {font-size:11px; position:absolute; right:51px; top:5px; width:46px; text-align:center;} #alert-slider {position:relative; background:#fff; padding:8px;} #alert-slider.full-width {padding: 0;} #alert-slider .prevnext {color:#484848; text-align:center; height:23px; width:23px; display:inline-block; line-height:20px; font-size:14px; border-radius:3px; text-decoration:none;} #alert-slider .prevnext:hover {background:#fff;} #alert-slider .pag {position:absolute; top:32px; right:60px; font-size:0;} #alert-slider.full-width .pag {top:24px; right:52px;} @media screen and (max-width: 640px) { .alert-bar p {font-size:12px;} } /* Info Center */ .info-center {padding: 15px; border-radius: 7px; -webkit-border-radius: 7px;} .info-center .info-center-title {color: #fff; margin: -15px -15px 0; padding: 5px 15px; border-radius: 7px 7px 0 0; -webkit-border-radius: 7px 7px 0 0;} .info-center .info-center-menu {list-style: none; padding: 0;} .info-center .info-center-link {line-height: 1.2; color: #fff; display: block; padding: 6px 15px; font-size: 15px; text-decoration: none; margin: 0 -15px;} /* SUB PAGES */ .main-content {padding: 50px 0;} .main-content img, .main-text img {-webkit-border-radius: 6px 6px; -moz-border-radius: 6px 6px ; border-radius: 6px 6px;} .main-content .left-content a[id], .no-sidebar .main-content a[id] {margin-top: -170px; position: absolute;} .main-content .gcal-merge a[id] {margin-top: 0; position: initial;} .sidebar {} .sidebar form td {display: block; width: 100%;} .sidebar form textarea {width: 100%} .sidebar .simpleAntiSpam {width: auto;} .sidebar-item {margin-bottom: 25px; font-size:14px;} .sidebar-inner {background: #f0f0f0;} .sidebar-box .sidebar-inner {border-radius: 6px; -webkit-border-radius: 6px; padding: 15px; margin-bottom: 20px; font-size:14px;} .sidebar.button {width: 100%; padding: 1rem 1rem 1rem; margin-bottom: 10px; font-size:16px;} .sidebar.button img {height: 23px; width: auto; margin-top: -5px;} .sidebar .digital-coupon{border:3px dashed #000; border-radius:6px;} .sidebar .digital-coupon .sidebar.button {margin-bottom:0;} /* Tile Buttons Branch Home page */ .branch-home-tiles h1.ymca-branch-title {margin-bottom: -40px; margin-top: 30px;} .branch-home-tiles dt {float: left; margin-right: 5px; width: 100px;} .branch-home-tiles .sidebar-btns h2 {line-height: 1;} .branch-home-tiles #slideshow img {border-radius: 0; -webkit-border-radius: 0;} /* Staff Pages / Lister */ .staff-category {font-size: 34px; text-align: center;} .staff-name {font-size: 30px; margin: 0;} .staff-position {margin: 0;} .staff-hr {margin: 4px 0;} .staff-email, .staff-phone {font-size: 14px; margin: 0;} .staff-bio {margin-top: 18px;} /* News */ #home-news .news-box {background: #f0f0f0; height: 100%; border-radius: 8px; padding: 20px; position: relative;} #home-news .news-box .news-thumb {width: 100%; height: auto;} #home-news .news-box .news-body {margin-bottom: 40px;} #home-news .news-box .news-publish-date {font-size: 12px; font-style: italic; margin-bottom: 10px;} #home-news .news-box .read-more {position: absolute; bottom: 20px; right: 20px;} #home-news .button {margin-top: 40px;} #home-news.news-titles-lister hr {margin: 8px 0;} #home-news.news-titles-lister .publish-date {margin: 0;} #home-news.news-titles-lister .news-titles-title {line-height: 1;} .publish-date {margin: 0 0 10px; font-size: 11px; font-style: italic;} .main-content .publish-date {margin: -15px 0 15px;} .news-item .publish-date {margin: 0px 0px 10px;} .author {margin: 0 0 10px; margin: -15px 0 15px; font-size: 11px; font-weight: 600;} .news-detail-body {padding-top: 40px; margin-top: 5px; border-top: 1px solid #eee} .links {font-size: 12px; margin-top: 50px; border-top: 1px solid #eee; padding-top: 15px;} .main-content .copyright {font-size: 12px; font-style: italic; margin-top: 5px;} .news-lister-title {margin-bottom: 0;} .news-lister-title a {text-decoration: none;} .news-lister-title a:hover {text-decoration: underline;} .more-link {} /* Events Detail Page */ .event-info {font-size: 14px;} .events-detail-body {padding-top: 40px; margin-top: 5px; border-top: 1px solid #eee;} .get-directions {font-size: 13px; font-style: italic;} tr.sectionHeader td {border-top: 5px solid #fff;} /* Schedules - Weekly Schedule */ .main-content .main-content.schedules {padding: 0;} .schedules-wrapper {border: 1px solid #ddd; border-bottom: none;} .schedules-wrapper.weekend {border: none;} .schedule-weekend {border-top: 1px solid #ddd; border-left: 1px solid #ddd;} .schedule-weekend-title {margin-top: 25px;} .schedule-day, .schedule-weekend {float: left; padding: 0 8px 8px; border-bottom: 1px solid #ddd;} .schedule-day:nth-child(2n), .schedule-weekend:nth-child(2n) {background: #f5f5f5; border-right: 1px solid #ddd; border-left: 1px solid #ddd;} .schedule-day-title {background: #eee; margin-left: -8px; margin-right: -8px; padding-left: 8px; border-bottom: 1px solid #ddd;} .schedule-item {min-height: 112px; position:relative;} .schedule-item .schedule-name {font-size: 18px;} .schedule-item .schedule-info {font-size: 15px; margin: 0;} .schedule-item .schedule-info span {display: block;} .schedule-item .schedule-instructor {font-size: 14px; font-style: italic;} .schedule-item hr {margin: 8px -8px;} #save-to-pdf-button, #schedules-list, #schedules-grid {margin-top: 0; position: relative;} /*print page */ .print-page .schedule-item {min-height:70px;} .print-page .schedule-day {padding: 0px; border-bottom: 1px solid #ddd;} .print-page .schedule-day-title {margin-left:0px; margin-right:0px;} .print-page .schedule-item .schedule-name {font-size:15px; margin:0;} .print-page .schedule-item .schedule-info {font-size:12px;} .print-page .schedule-item .schedule-instructor {font-size: 12px;} .print-page .schedule-item hr {margin:8px 0px;} .schedule-item.one-line {min-height: 0;} .schedules-list-wrapper h5 {margin: 0;} .schedules-list-wrapper .schedule-item.spacer {display: none;} .schedules-views {margin-bottom: 10px;} .schedules-views a {width: 40px; display: inline-block; padding: 3px; background: #e5e5e5; border: 1px solid #cfcfcf; border-radius: 8px; -webkit-border-radius: 8px;} .schedules-views a img {opacity: .7;} .schedules-views a:active {background: #ccc;} .schedule-item .tool-tip {background: #ddd; color: #8a8484; padding: 0px 6px; border-radius: 20px; -webkit-border-radius: 20px; font-size: 14px;} .schedule-item .tool-tip:hover {cursor:pointer;} .schedule-item .description {background:rgba(255,255,255,.9); border:1px solid #ddd; width:330px; padding:10px 10px 0; position:absolute; z-index:1; bottom:27px; left:15px; display:none; border-radius:6px; -moz-border-radius:6px; -webkit-border-radius:6px;} .schedules-grid .schedule-item .description {bottom:105px;} .schedule-item .description p {font-size:13px;} /* Responsive Calendar Styles */ .row .one-seven {width: 14.285%;} .row .one-seven.columns {margin: 0px; padding: 0.5% 1.5%;} /* Events Calendar */ #calendarDetail .calendarNav {margin-bottom:0; min-height:0;} #calendarDetail .calendarNav div {border:none; min-height:0; height:auto; vertical-align:baseline;} #calendarDetail div { font-family: Verdana, Helvetica, Arial, sans-serif; font-size:16px; min-height:125px;} .calendarDays {} .calendarDays div {border-left:1px solid #e1e1e1;} .calendarDays .one-seven.last {border-right:1px solid #e1e1e1;} #calendarDetail a {font-size:12px; line-height:1.1; margin-bottom:10px;} #calendarDetail a:hover {text-decoration:underline;} #calendarDetail .title {font-family: 'Cachet Bold', Verdana, Helvetica, Arial, sans-serif; text-align:center; text-transform:uppercase; color:#fff; font-size:28px; padding:30px 0;} #calendarDetail .weekdays {text-align:center; color:#fff; font-family: 'Cachet Bold', Verdana, Helvetica, Arial, sans-serif; padding-top:10px; padding-bottom:10px;} @media only screen and (max-width: 767px) { #calendarDetail div {font-size:12px;} #calendarDetail a {font-size:12px;} } .cal {font-family:"Cachet Book", Verdana, sans-serif; margin-bottom:25px; text-align:center; border-radius:7px; -webkit-border-radius:7px;} .cal table {background: #f0f0f0; margin-bottom: 0;} .cal .calPrev {float:left; padding: 10px 0; margin-left:3%; font-family: 'Cachet Bold', Verdana, Helvetica, Arial, sans-serif;} .cal .calNext {float:right; padding: 10px 0; margin-right:3%; font-family: 'Cachet Bold', Verdana, Helvetica, Arial, sans-serif;} .cal .calMonth {text-align:center; display:inline-block; font-size:20px; color:#fff; padding: 10px 0; font-family: 'Cachet Bold', Verdana, Helvetica, Arial, sans-serif;} .cal th {color: #fff; font-weight: bold;} .cal td {padding: 4px 0;} .cal .calNext a, .cal .calPrev a, .cal .calMonth a {color:#fff; text-decoration:none;} .cal .calDayOn a {text-decoration: underline;} .cal .calTodayOn a {color:#fff; font-weight:bold; text-decoration:underline;} .cal .calDayOn, .cal .calTodayOff {color:#fff;} .emptyDay {background:#eee !important;} .prevLink, .nextLink {text-align:center; padding-top:25px;} .prevLink a, .nextLink a {color:#fff !important; text-decoration:none; font-family: 'Cachet Bold', Verdana, Helvetica, Arial, sans-serif; font-size:24px !important;} .calMonthLink {padding:4px 0; font-size: 13px; display:block; color: #fff; font-family: 'Cachet Bold', Verdana, Helvetica, Arial, sans-serif; } /* .calGrid td {text-align:center; padding:5px 0;} */ @media only screen and (max-width: 840px) { .cal .calMonth {font-size:16px;} } @media only screen and (max-width: 640px) { .row .one-seven {width: 100%;} .cal .calMonth {font-size:20px;} #calendarDetail div {min-height:15px;} .cal-day {border-bottom:1px solid #e1e1e1;} .cal-day h4 {padding-left:10px; color:#333; margin-top:10px;} .cal-day a {padding-left:10px; display: block;} .cal-day .mobile-date {border:none !important;} #calendarDetail {background:none !important;} #calendarDetail div {background:none} #calendarDetail .calendarNav {background:#20BDBE;} #calendarDetail .calendarDays {border:none; background:none !important;} .calendarDays div {border:none;} .row .phone-two.prevLink, .row .phone-two.nextLink {margin:0 !important; padding:0 !important; width:49.8% !important;} #calendarDetail span.show-on-phones {display:inline !important;} } /* END RESPONSIVE CALENDAR STYLES */ /* google calendar schedules styles */ .gcal-merge .filter-box {background:#f7f7f7; border: 1px solid #ddd; border-radius: 8px; padding: 5px;} .gcal-merge .filter-box ul {margin:0; padding:0; list-style-type:none;} .gcal-merge .filter-box ul li {display:inline-block; margin:5px 12px 8px; line-height:1.2; font-size:14px;} .gcal-merge .filter-box ul li a {display:block; text-decoration:none; font-weight:700;} .gcal-merge .filter-box ul li a:after {content:'\25BE';font-size: 20px;padding-left: 5px;} .gcal-merge .filter-box .wrap {background:#fff; border-radius:6px; padding:15px; border:1px solid #afc3d3; display:none; position:absolute; width:225px; z-index:1;} .gcal-merge .filter-box .wrap a {display:inline-block; font-weight:400; text-decoration:underline;} .gcal-merge .filter-box .wrap a:after {content:none;} .gcal-merge .filter-box .clear-link {float:right; font-size: 12px; margin-right: 15px; margin-top: 11px;} .gcal-merge .filter-box .wrap input[type=checkbox] {margin:0;} .gcal-merge .filter-box .wrap label {font-size:14px; margin-bottom: 5px;} .gcal-merge .filter-box .wrap .util-links {font-size:14px; margin-top: 5px; display: inline-block;} .gcal-merge .filter-box .line-2 {margin-top:20px;} .gcal-merge .week-title {margin:20px 5px 8px; font-size:15px;} .gcal-merge .dateTog {font-size:15px; text-decoration:underline;} .gcal-merge .date-container {text-align:center; background:#f7f7f7; border: 1px solid #ddd; border-radius: 8px; margin-bottom:20px; padding:10px;} .gcal-merge .date-container p {margin:15px 0 5px;} .gcal-merge .date-container .close {float:right; font-weight: 700; font-size: 15px;} .gcal-merge .date-container .close:hover {cursor:pointer;} .cal-group {background:#f7f7f7; padding:15px; border:1px solid #ddd; border-radius:8px;} .gcal-merge .cal-group .dow h4 {margin:40px 0 10px;} .gcal-merge .cal-group .dow:first-child h4 {margin-top:10px;} .gcal-merge .cal-group .dow.Friday ~ .dow.Friday h4, .gcal-merge .cal-group .dow.Saturday ~ .dow.Saturday h4, .gcal-merge .cal-group .dow.Sunday ~ .dow.Sunday h4, .gcal-merge .cal-group .dow.Monday ~ .dow.Monday h4, .gcal-merge .cal-group .dow.Tuesday ~ .dow.Tuesday h4, .gcal-merge .cal-group .dow.Wednesday ~ .dow.Wednesday h4, .gcal-merge .cal-group .dow.Thursday ~ .dow.Thursday h4 {display:none;} .gcal-merge .cal-group ol {padding: 0;} .gcal-merge .item {font-size:13px; background:#fff; padding:10px 10px 1px;} .gcal-merge .item hr {margin:10px 0 0;} .gcal-merge .item p {margin:0; color:#2f2f2f;} .gcal-merge .item .loc {color:#6f6f6f;} .gcal-merge .item .cal-add {font-size:12px; font-family:Verdana,Helvetica,Arial,sans-serif;} .gcal-merge .item .more-link {text-decoration:underline;} .gcal-merge .item .more-link:before {content:'More';} .gcal-merge .item .more-link.active:before {content:'Less';} .gcal-merge .item .cal-name {color:#6f6f6f; font-style:italic;} .gcal-merge .item .details {background:#f7f7f7; padding:10px; margin-top:5px; border-radius:6px; font-size:13px; color:#2f2f2f; border:1px solid #ddd;} .gcal-merge .item .details p {color:#2f2f2f;} .gcal-merge .click-to-print {margin-top:-50px; margin-bottom:10px;} .gcal-merge .subscribe {display:inline-block; margin-top:15px; font-style:italic;} .gcal-merge .filter-btn .button {font-size:13px; text-transform:inherit; margin-top:15px; padding:10px 15px;} .toggleOverlay {position:absolute; top:0; bottom:0; left:0; right:0; background:rgba(0,0,0,.3);} @media only screen and (max-width: 1025px) { .gcal-merge .item .columns:first-child {border-right:0;} } @media only screen and (max-width: 640px) { .gcal-merge .item .columns {border-right:0;} .gcal-merge .filter-box {display:none; margin-top:8px;} .gcal-merge .filter-box ul li {display:block; font-size: 16px; margin-top: 15px; font-weight: 700;} .gcal-merge .filter-box .wrap {display:block !important; position:static; width:100%; margin:5px 0 20px;} .gcal-merge .filter-box .wrap label {font-size:15px; margin-bottom:10px; font-weight:400;} .gcal-merge .filter-box .clear-link {font-size:14px; margin-bottom:10px; margin-top:0;} .gcal-merge .week-title {margin-top:10px;} } /* date picker */ .well { min-height: 20px; padding: 15px; margin-bottom: 20px; background-color: #fff; border: 1px solid #e3e3e3; border-radius: 4px; -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.05); box-shadow: inset 0 1px 1px rgba(0,0,0,.05); margin:0 auto 10px; max-width:440px; } .well > table {background:#f7f7f7; padding:10px; border-radius:2px;} .well button {background:#fff; color:#333; margin:0; border:1px solid #ccc; padding:5px; font-weight:500; font-size:12px;} .well td {padding:0;} .well button:hover {background:#ccc; color:#333;} .well button .text-muted {color:#959595;} .well button.active {background:#cce7f5;} .well button i {font-style:normal;} .glyphicon-chevron-right::before {content: '\f002'; font-family:'flexslider-icon';} .glyphicon-chevron-left::before {content: '\f001'; font-family:'flexslider-icon';} /* end date picker */ /* pagination */ .active-page {text-align:center;} .active-page .pagination {display: inline-block; padding-left: 0; margin: 30px 0 0; border-radius: 4px;} .pagination-wrapper.top .pagination {display:none !important;} .pagination-wrapper.top .items {margin-bottom:-30px;} .active-page .items {display:block; font-size:14px;} .active-page .pagination > li {display: inline;} .active-page .pagination > li:first-child > a,.active-page .pagination > li:first-child > span {margin-left: 0; border-bottom-left-radius: 4px; border-top-left-radius: 4px;} .active-page .pagination > .disabled > span, .active-page .pagination > .disabled > span:hover, .active-page .pagination > .disabled > span:focus, .active-page .pagination > .disabled > a, .active-page .pagination > .disabled > a:hover, .active-page .pagination > .disabled > a:focus { color: #999; background-color: #f7f7f7; border-color: #ddd; cursor: not-allowed; } .active-page .pagination > li > a, .active-page .pagination > li > span { position: relative; font-size:12px; float: left; padding: 6px 12px; line-height: 1.42857143; text-decoration: none; background-color: #fff; border: 1px solid #ddd; margin-left: -1px; } .active-page .pagination > .active > a, .active-page .pagination > .active > span, .active-page .pagination > .active > a:hover, .active-page .pagination > .active > span:hover, .active-page .pagination > .active > a:focus, .active-page .pagination > .active > span:focus { z-index: 2; color: #fff; background-color: #0089d0; border-color: #0089d0; cursor: default; } /* end pagination */ /* Daxko integration */ #daxko-widget .branch-filters {padding: 15px; border: 1px solid #ddd; background: #fbfbfb; margin-top: 3px; margin-bottom: 15px;} #daxko-widget .active-program-lister .item {border:1px solid #ddd; margin:0 0 20px; font-size:14px; border-radius:8px; background:#fbfbfb; overflow:hidden;} #daxko-widget .active-program-lister .item .button {font-size:16px; padding:.5rem 1rem;} #daxko-widget .active-program-lister .item .button.disabled {border:2px solid #fff; background:#aaa;} #daxko-widget .active-program-lister .item .button.disabled:hover {background:#aaa; cursor:not-allowed;} #daxko-widget .active-program-lister .item .details {background:#fff; margin-top: 15px; padding: 10px; border-radius: 6px; border: 1px solid #f0f0f0;} #daxko-widget .active-program-lister .item .label {font-weight:700;} #daxko-widget .active-program-lister .item .reg-button {text-align:right;} #daxko-widget .active-program-lister .item .more {display:inline-block; position: relative; top: auto;} #daxko-widget .active-program-lister .item .more:after {content:'[+]';} #daxko-widget .active-program-lister .item .more.active:after {content:'[-]';} #daxko-widget .active-program-lister .item .program-label {margin-bottom: -5px; font-weight: 700; text-transform: uppercase; font-size: 12px;} #daxko-widget .active-program-lister .item .program-name {margin-bottom: 15px; margin-top: 2px; font-size: 24px;} #daxko-widget .active-program-lister .item .info {padding:15px;} #daxko-widget .active-program-lister .item .branch-label {line-height:1.2; margin:0 0 5px; font-size: 14px; color: #fff; padding: 8px 15px; font-family: "Cachet Medium", Verdana, sans-serif;} #daxko-widget .active-program-lister .item .align-bottom-group .row {display: -ms-flexbox; display: flex; -ms-flex-flow: row wrap; flex-flow: row wrap; align-items:flex-end;} #daxko-widget .active-program-lister .item .align-bottom-group .row .columns {} #daxko-widget .active-program-lister .item .reg-button .btn-wrap {display:inline-block; text-align:center; font-size:12px;} #daxko-widget .active-program-lister .curPage {display:block; text-align:center; font-size:13px;} #daxko-widget .active-program-lister .globalToggle {display:block; margin:5px 0 10px; font-size:14px;} #daxko-widget .active-program-lister .globalToggle:after {content:' [+]';} #daxko-widget .active-program-lister .globalToggle.open:after {content:' [-]';} #daxko-widget .active-search-group .branch-filters div label { font-size:14px; margin-left:10px;} #daxko-widget .active-search-group .branch-filters div label input {margin-bottom: 4px; margin-top: 10px;} #daxko-widget .active-search-group .branch-filters .branch-utility {font-size:14px; margin:8px 0 15px;} #daxko-widget .active-search-group .int-load {font-style:italic; font-size:15px;} @media only screen and (max-width: 640px) { #daxko-widget .active-program-lister .item .reg-button {text-align:center; padding-bottom:10px;} #daxko-widget .active-program-lister .item .reg-button .btn-wrap {display:block; width:100%;} #daxko-widget .active-program-lister .item .reg-button .button {width:100%;} #daxko-widget .active-search-group {border-bottom: 1px solid #ddd; padding-bottom: 15px; margin-bottom: 10px;} } /* Events Lister */ .click-to-print {float: right; margin-left: 20px; width: 50%;} .click-to-print .button {float: right;} #home-events .event-today {margin-bottom: 0; line-height: 1;} #home-events .event-title {float: left;} #home-events .event-title a {text-decoration: none;} #home-events .event-time {text-align: right; font-size: 14px;} #home-events .event-hr {margin: 2px 0;} .events-filter select, .events-filter input {width: auto; margin-top: 0;} .events-filter select {padding-right: 1.2rem;} .event-search {margin-left: 8px;} .events.left-content hr {margin: 5px 0; color:#EEEEEE;} .events.left-content hr.events-end-day {border-bottom: 1px solid #f0f0f0; margin: 25px 0;} .events.left-content h4 {margin: 30px 0 10px; text-transform: uppercase;} .event.list-event-title {font-family: 'Cachet Bold', Verdana, sans-serif;} .list-event-title a {color: #888; text-decoration: none;} .event-item p {margin: 0;} .event.time, .event.more-info {font-size: 14px;} .event.more-info {text-align: right;} #eventForm table, #eventForm table tr, #eventForm table tr td {border:0; margin:0; padding:0;} #search_box_form {line-height:14px;} .searchBoxInput {display:block; float:left;} /* Site Search */ .search-input-interior input {width: auto; vertical-align: bottom; margin-top:-10px} .search-input-interior img {width: 20px; height: auto;} .search-input-interior a {padding: 8px 12px 8px; display: inline;} /* Forms */ .formsTitle {display: none; /* This is automatically displayed via Page Title / Layout */} .survey-rating {display: inline-block; width: 9%; padding: 0; margin: 0; font-size: 13px;} .simpleAntiSpam {margin: 0 auto; width: 400px; max-width: 100%; } .simpleAntiSpam div { margin: 0 auto; max-width: 100%!important; text-align: center;} .simpleAntiSpam br, .simpleAntiSpam #nospamResponse {display: none; overflow: hidden; visibility: hidden;} #nospamA, #nospamB {background: #fff; border: 1px #cbced0 solid; color: #777; font-size: 11px; height: 18px; margin-bottom: 10px; padding: 1px 10px; width:80px;} #nospamLink {display: block; margin: auto; width: 100px;} #FreedomReCaptchaV2_0 div {margin: auto;} .datetimeField {float:left; width:100px; margin-right:5px;} /* Freedom 9.6.001 Date Picker Calendar Style Updates: */ #ui-datepicker-div { background: rgba(255, 255, 255, 0.95); /* this will give slightly opaque white bg */ border: 1px solid #ccc; box-shadow: 0 0 45px #ccc; -webkit-box-shadow: 0 0 45px #ccc; margin-left: -20px; padding: 20px; } .ui-datepicker-prev {float: left;} .ui-datepicker-next {float: right;} .ui-datepicker-prev, .ui-datepicker-next {font-size: 11px; margin-top: 4px;} .ui-datepicker-prev:hover, .ui-datepicker-next:hover {cursor: pointer;} .ui-datepicker-title {text-align: center; padding-bottom: 20px;} .ui-datepicker-calendar th {font-size: 12px; font-weight: bold;} #ui-datepicker-div table td {padding: 8px;} /* Logo Slider - Module - Start*/ /* Browser Resets */ .logo-slider a:active, .logo-slider a:focus {outline: none;} /* FlexSlider Necessary Styles */ .logo-slider { background: #fff; position:relative; left:0; width:100%; zoom: 1; /*overflow: hidden;*/} .logo-slider .slides { zoom: 1; margin: 0; padding: 0; list-style: none; overflow: hidden; } .logo-slider .slides > li { display: none; -webkit-backface-visibility: hidden;} /* Hide the slides before the JS is loaded. Avoids image jumping */ .logo-slider .slides img { left:0; display: inline-block; max-width: 100%; width: 100%; vertical-align: middle; padding: 15px;} .logo-slider .slides .slide-helper {vertical-align: middle; height: 100%; display: inline-block;} /* Direction Nav */ .logo-slider:hover .flex-prev { left: -50px; } .logo-slider:hover .flex-next { right: -50px; } .logo-slider:hover .flex-next:hover, .logo-slider:hover .flex-prev:hover { opacity: 0.8; } .logo-slider .flex-next, .logo-slider .flex-prev {opacity: 0.5;} /* Control Nav */ .logo-slider .flex-control-nav { position: absolute; bottom: -44px; margin: 0; text-align: center; width: 80%; z-index:100; } .logo-slider .flex-control-nav li {margin: 0 6px; display: inline-block; zoom: 1; *display: inline;} .logo-slider .flex-control-paging { width:100%; } .logo-slider .flex-control-paging li a {width: 11px; height: 11px; display: block; background: #fff; background: rgba(242, 242, 242,0.8); cursor: pointer; text-indent: -9999px; -webkit-border-radius: 20px; -moz-border-radius: 20px; -o-border-radius: 20px; border-radius: 20px; -webkit-box-shadow: inset 0 0 1px rgba(0,0,0,0.3); -moz-box-shadow: inset 0 0 1px rgba(0,0,0,0.3); -o-box-shadow: inset 0 0 1px rgba(0,0,0,0.3); box-shadow: inset 0 0 1px rgba(0,0,0,0.3); } .logo-slider .flex-control-paging li a:hover { background: #53524e; background: rgba(83,82,78,.50); } .logo-slider .flex-control-paging li a.flex-active { background: #53524e; background: rgba(83,82,78,.85); cursor: default; } /* Logo Slider Styles */ .logo-slider {max-width: 1070px; margin: 20px auto 70px auto;} .logo-slider .slides {height: 170px;} .logo-slider .slides li {margin-right: 10px; height: 100%;} .logo-slider .flex-direction-nav {margin: 0;} .logo-slider .flex-direction-nav a {color: #000; margin: 0;} .logo-slider h3 {font-size: 36px;} @media only screen and (max-width: 1200px) { .logo-slider .flex-direction-nav {display: none;} } @media only screen and (max-width: 1023px) { .logo-slider .slides {height: 340px;} } /* Video Library */ .video-library.lister .item {background: #f8f8f8; position: relative; min-height: 455px; margin: 0 auto 40px; border-radius: 6px;} .video-library.lister .item .video-graphic-container {position: relative;} .video-library.lister .item .video-graphic-container .overlay { position: absolute; left: 50%; top: 50%; text-align: center; z-index: 2; color: #fff; margin: 0; width: 100px; height: 100px; line-height: 1.1; padding: 20px; font-size: 28px; display: flex; justify-content: center; align-items: center; flex-flow: column wrap; transition: all 250ms ease-out; border-radius: 100%; margin-top: -50px; margin-left: -50px; } .video-library.lister .item .video-graphic-container a:hover .overlay, .video-library.lister .item .video-graphic-container a:active .overlay { left: 0; right: 0; top: 0; bottom: 0; width: 100%; height: 100%; border-radius: 0; margin-left: 0; margin-top: 0; } .video-library.lister .item .video-graphic-container .overlay:after { content: ""; background-image: url('graphics/images/play-button.png'); background-size: 55px auto; background-repeat: no-repeat; background-position: center center; display: inline-block; width: 100%; height: 55px; transition: all 400ms ease-out; } .video-library.lister .item .video-graphic-container a:hover .overlay:after, .video-library.lister .item .video-graphic-container a:active .overlay:after { background-size: 70px auto; height: 70px; } .video-library.lister .item .image {width: 100%; height: 200px; background: #145d67 url(graphics/images/logo-k-white.png) no-repeat center center; position: relative; text-align: center;} .video-library.lister .item .image img {max-width: 90px; margin-top: 55px;} .video-library.lister .item .text {padding: 12px 20px 40px;} .video-library.lister .item .text .item-category {color: #666666; font-family: Verdana, Arial, Helvetica, sans-serif; font-weight: normal; font-size: 13px;} .video-library.lister .item .text h3 {font-size: 25px;line-height: 1.2;} .video-library.lister .item .text h3 a {text-decoration: none;} .video-library.lister .item .text .link {position: absolute; bottom: 0; right: 20px;} .bg-stripe-bar-sidebar .bg-stripe-bar {background-size: contain;} .video-library-category-lister {padding: 10px 0px;} .video-library-category-lister h4 { margin-bottom: 10px;} .video-library-category-lister a {margin-left: 5px; margin-bottom: 0; color: #666666; padding: 0; display: block;} @media only screen and (max-width: 1024px) { .video-library-category-lister a { margin-left: 0; margin-bottom: 15px; line-height: 1.1; background: #808080; color: #fff; text-align: center; padding: 7px 4px; text-decoration: none; border-radius: 6px; font-size: 15px; } .video-library-category-lister a:hover, .video-library-category-lister a:active {color: #fff; background: #666666;} } /* Callout Bar - Donation Bar */ .footer-callout.bar {padding: 40px 0; color: #fff;} .footer-callout.bar h3 {font-size: 32px; font-family: 'Cachet Book', Verdana, sans-serif; color: #fff;} .callout-bar-text {border-left: 1px solid #fff; border-left: 1px solid rgba(255,255,255,0.4);} .callout-bar-text p {margin: 10px 0; font-size: 14px; line-height: 1.25;} .callout-bar-text a {color: #fff;} .footer-callout.bar .button {margin-top: 30px; border-width: 3px;} /* Social Media Landing Page */ .social-media-landing .social-icon img {max-width: 35px;} .social-media-landing hr {margin: 8px 0;} /* Footer */ #footer {padding-top: 50px; -webkit-box-shadow: 0 -1px 3px 0 rgba(0,0,0,.45); box-shadow: 0 -1px 3px 0 rgba(0,0,0,.45);} /* #footer .title {text-transform: uppercase; line-height: 1.1; font-size: 35px; margin: 0 0 30px;} */ #footer .footer-site-title {font-size: 30px; text-transform: uppercase; line-height: 1;} #footer h4 {color: #636466; font-family: Verdana,sans-serif; font-weight: 700; font-size: 18px;} #footer p {font-size: 14px;} #footer p.small {font-size: 10px;} #footer p.small-p {line-height: 1;} #footer .social-media {margin: 0 0 35px;} #footer .social-media a:hover img {opacity: .75;} #footer .email-sign-up {margin: 45px 0; clear: both;} #footer .email-sign-up form {margin: 0;} #footer .email-sign-up input[type="submit"] {margin-bottom: 0;} /* #footer hr {max-width: 1070px; margin: 40px auto;} */ #footer .row-1 p {margin-bottom: 20px;} .footer-nav a {font-size: 14px; text-decoration: none;} .footer-nav a:hover {text-decoration: underline;} #footer .mission-statement p {font-style: italic; font-size: 12px;} #footer .mission-statement hr {margin: 40px auto 20px;} .copyright-wrapper {background: #000; color: #fff; padding: 10px 0;} #footer .copyright-wrapper a, #footer .copyright-wrapper p {color: #fff; margin-bottom: 0; font-size: 12px;} .thrive-links {text-align: right;} /* STYLE 2 FOOTER */ .style-2 .footer-callout-2.bar {padding: 40px 0; color: #fff;} .style-2 .footer-callout-2.bar h3 {font-size: 32px; font-family: 'Cachet Book', Verdana, sans-serif; color: #fff;} .style-2 .footer-callout-2.bar .button {margin-top: 30px; border-width: 3px;} .style-2 .footer-2-separator {height: 45px;} .style-2 #footer {box-shadow: none; -webkit-box-shadow: none; background: #fff;} /* .style-2 #footer .footer-site-title {color: #fff;} .style-2 #footer h4, .style-2 #footer .footer-nav span {color: #fff;} .style-2 #footer a {color: #fff;} */ .style-2 #footer a.social-icon img {opacity: .5; transition: opacity .3s ease; -webkit-transition: opacity .3s ease;} .style-2 #footer a.social-icon:hover img {opacity: 1;} .style-2 .footer-logo {margin-top: 0;} .style-2 #footer .email-sign-up {margin: 0;} .style-2 #footer hr {margin: 20px auto;} /* END STYLE 2 FOOTER */ /* STYLE 3 FOOTER */ .style-3 .footer-callout-2.bar {padding: 40px 0; color: #fff;} .style-3 .footer-callout-2.bar h3 {font-size: 32px; font-family: 'Cachet Book', Verdana, sans-serif; color: #fff;} .style-3 .footer-callout-2.bar .button {margin-top: 30px; border-width: 3px;} .style-3 #footer {color: #fff; box-shadow: none; -webkit-box-shadow: none;} .style-3 #footer .footer-site-title {color: #fff; margin-top: 25px;} .style-3 #footer h4, .style-3 #footer .footer-nav span {color: #fff;} .style-3 #footer a {color: #fff;} .style-3 #footer a.social-icon img {opacity: .5; transition: opacity .3s ease; -webkit-transition: opacity .3s ease;} .style-3 #footer a.social-icon:hover img {opacity: 1;} .style-3 .footer-logo-img {display: block; width: 120px; margin-top: 0;} .style-3 #footer .email-sign-up {margin: 0;} .style-3 #footer hr {margin: 20px auto; border-color: #fff; opacity: .3;} .style-3 #footer .email-sign-up p.small-p {font-size: 17px;} #footer .y-story-spotlight {border-radius: 8px; -webkit-border-radius: 8px; padding: 15px;} #footer .y-story-spotlight .share-story-member-year p {font-size: 12px; margin-top: -4px;} #footer .y-story-spotlight .button-wrapper {margin: 0;} #footer .y-story-spotlight .button {margin: 15px 0 0;} #footer .y-story-spotlight .image-box {height: 140px; overflow: hidden; position: relative; background-size: cover !important; border-radius: 8px; -webkit-border-radius: 8px;} /* #footer .y-story-spotlight .image-box img {width: 100%; height: auto; min-height: 100%; position: absolute;} ---- IMG is now a Background Image instead */ #footer .y-story-spotlight .spotlight-view-all {font-size: 13px;} /* END STYLE 3 FOOTER */ /* STYLE 4 FOOTER */ .style-4 .footer-separator {padding: 15px 0;} .style-4 .footer-separator p {margin: 0;} .style-4 .footer-logo {background: none;} .style-4 .footer-logo .footer-logo-img {display: block;} .style-4 #footer {color: #fff; box-shadow: none; -webkit-box-shadow: none;} .style-4 #footer .footer-site-title {color: #fff; margin-top: 25px;} .style-4 #footer h4, .style-3 #footer .footer-nav span {color: #fff;} .style-4 #footer a {color: #fff;} .style-4 #footer a.social-icon img {opacity: .5; transition: opacity .3s ease; -webkit-transition: opacity .3s ease;} .style-4 #footer a.social-icon:hover img {opacity: 1;} .style-4 .footer-nav {padding-bottom: 40px;} /* END STYLE 4 FOOTER */ /* -------------------------------------------------- :: Universal Classes ---------------------------------------------------*/ /* Alignment Classes */ .text-center, .center {text-align: center;} .text-left {text-align: left;} .text-right {text-align: right;} .clear {clear: both;} .imgleft {float: left; margin: 0 20px 20px 0;} .imgright {float: right; margin: 0 0 20px 20px;} .imgcenter {display: inline-block; margin: auto;} .small {font-size: 10px;} .responsive-table, .responsive-table tr, .responsive-table td, .responsive-table table {width: initial !important; height: initial !important;} /* Miscellaneous Classes */ .white {color: #fff;} .white-bg {background: #fff;} .only {display: none;} /* accompany this with primary-secondary color scheme values to display for only that version of the color scheme, e.g. class="orange-green only" */ .formtextRequired {font-weight:bold;} .formtextRequired:before {content:"*";} p.stack-button, p.stack-button a, a.stack-button, span.stack-button, span.stack-button a {display: block !important; max-width: max-content !important;} iframe[name='google_conversion_frame'] { /* If the YMCA have google remarkting tags, this will remove the random 13px blank white space height at the bottom of the page */ height: 0 !important; width: 0 !important; line-height: 0 !important; font-size: 0 !important; margin-top: -13px; float: left; } button, a.button, p.button a, input.button, span.button a { border-style: solid; border-width: 0; cursor: pointer; font-family: Verdana, Helvetica, Roboto, Arial, sans-serif; font-weight: 600; line-height: normal; position: relative; text-decoration: none; text-align: center; margin: 0; -webkit-appearance: none; -moz-appearance: none; display: inline-block; padding-top: 0.7rem; padding-right: 1.5rem; padding-bottom: 0.7425rem; padding-left: 1.5rem; font-size: 1rem; color: #FFFFFF; transition: background-color 300ms ease-out; } /*button:hover, button:focus, a.button:hover, a.button:focus, p.button a:hover, p.button a:focus, input.button:hover, input.button:focus { background-color: #2285a2; }*/ /* This created a blue background on the hover state. Background colors get pulled in from the color style sheets */ button:hover, button:focus, a.button:hover, a.button:focus, p.button a:hover, p.button a:focus, input.button:hover, input.button:focus, span.button a:hover, span.button a:focus { color: #FFFFFF; } button, .button, input.button { margin: 0 0 1.25rem; border-radius: 6px; -webkit-border-radius: 6px; display: inline-block; } p.button, span.button {padding: 0px;} /* Remove padding on p tag of buttons from Foundation class */ a.button, p.button a, input.button, span.button a {border: none; font-size: 18px; text-transform: uppercase; font-weight: 700;} .center.button {display: block; margin: auto; max-width: 300px;} input.button {border: none; border-radius: 6px !important; -webkit-border-radius: 6px !important;} input.small.button {padding: .65em 1em .7em;} .small.button img {float: right; margin: -7px 0 -7px 5px;} p.button a, span.button a {background: none;} .hide { display: none; } .hideclear { clear:both; height:0; overflow:hidden; visibility:hidden; } .extra-opaque:hover {background: inherit !important;} /* Pagination Classes */ .pager {margin-top: 50px;} .pagination {text-align: center;} .pager .next {text-align: right;} .prevnextCurrent, .prevnextLink, .prevnextWindow {display:inline-block; line-height:0; padding:15px 8px; margin:0 4px; text-align:center;} .prevnextCurrent:hover, .prevnextLink:hover, .prevnextWindow:hover {} /* Infinite Scroll Styles */ .page .ias-trigger, .events .ias-spinner { margin: 20px auto; width: 60%; } .page .ias-trigger a { color: #616165; background: #D9D9DB; text-decoration: none; display: block; padding: 10px; transition: background 300ms ease 0s; clear: both; } .page .ias-trigger a:hover {background: #C9C9CB;} /* Google Maps & Locations Directory Classes */ #googlemap img, object, embed, .GMapEZ img, #map_canvas embed, #map_canvas img, #map_canvas object { max-width: none; } .locations-search input {width: auto; display: inline-block; vertical-align: bottom; margin: 0px 0px 1rem;} .locations-search select {width: auto; padding: 0.5rem 1.0rem 0.5rem 0.5rem;} .location-submit-button {margin-top: 37px !important;} #location-submit {border: none; padding: 0.5rem; height: 2.3125rem; color: #fff; font-size: 13px; font-weight: bold;} .locations-map {height:500px; overflow:hidden;} .locations-map .locations-map-thumbnail {max-width: 200px; display: block;} .locations-content {padding: 40px 0 80px;} #locations {display:flex; flex-flow:row; flex-wrap:wrap;} #locations .location {background:#f6f6f6; padding:15px; border-radius:6px; width:calc(50% - 10px); margin:0 20px 20px 0; } #locations .location:nth-child(even) {margin-right:0;} #locations .location .button {font-size:15px; padding-top: 0.5rem; padding-right: 1.5rem; padding-bottom: 0.5425rem; padding-left: 1.5rem;} #locations .location .aside {font-size:13px; color:#757575;} #locations .location .aside h3 {font-family:'Verdana', sans-serif; font-weight:700; font-size:13px;} @media only screen and (max-width: 641px) { .location-submit-button {margin-top: 0px !important;} #locations .location {width:100%; margin:0 0 20px 0;} } /* FAQ Module */ .faqs .faq-question {border-radius:6px; padding:5px 30px 5px 15px; color:#fff; margin:4px 0 0; position:relative;} .faqs .faq-question:after {content:'\f002'; font-family:'flexslider-icon'; position:absolute; right:10px; top:calc(50% - 15px);} .faqs .faq-question.clicked:after {content:'\f005';} .faqs .faq-question:hover {cursor:pointer;} .faqs .content {border:1px solid #ddd; background:#f8f8f8; padding:15px; border-radius:6px;} .faqs .all-click {font-size:12px; margin:5px 0 0;} /* ---------------------- Facebook Universal Static iFrame Styles ------------------------ */ body.facebook {font-family:'Open Sans', Helvetica, Arial, sans-serif; color: #777; font-size:14px; line-height:26px; margin:0; padding:0; text-align:center;} body.facebook a {color: #0060af; text-decoration:underline;} body.facebook a:hover {color: #0089d0; text-decoration:underline;} #fb-container {margin:0 auto; width:810px; text-align:left;} /* ---------------------- FLEXSLIDER CSS - Slideshow ------------------------ */ /* * jQuery FlexSlider v2.2.0 * http://www.woothemes.com/flexslider/ * * Copyright 2012 WooThemes * Free to use under the GPLv2 license. * http://www.gnu.org/licenses/gpl-2.0.html * * Contributing author: Tyler Smith (@mbmufffin) */ /* Browser Resets *********************************/ .flex-container a:active, .flexslider a:active, .flex-container a:focus, .flexslider a:focus {outline: none;} .slides, .flex-control-nav, .flex-direction-nav { list-style: none;} /* Icon Fonts *********************************/ /* Font-face Icons */ @font-face { font-family: 'flexslider-icon'; src:url('graphics/extras/flexslider/fonts/flexslider-icon.eot'); src:url('graphics/extras/flexslider/fonts/flexslider-icon.eot?#iefix') format('embedded-opentype'), url('graphics/extras/flexslider/fonts/flexslider-icon.woff') format('woff'), url('graphics/extras/flexslider/fonts/flexslider-icon.ttf') format('truetype'), url('graphics/extras/flexslider/fonts/flexslider-icon.svg#flexslider-icon') format('svg'); font-weight: normal; font-style: normal; } /* FlexSlider Necessary Styles *********************************/ .flexslider { background: #fff; position:relative; left:0; width:100%; zoom: 1; overflow: hidden;} .flexslider .slides { zoom: 1; margin: 0; padding: 0; list-style: none; overflow: hidden; } .flexslider .slides > li { display: none; -webkit-backface-visibility: hidden;} /* Hide the slides before the JS is loaded. Avoids image jumping */ .flexslider .slides > li:first-child {display: block !important; -webkit-backface-visibility: visible !important;} /* Allows the first image to load, so it doesn't appear as if it's loading slow */ .flexslider .slides img { left:0; display: block; max-width: 100%; width: 100%; } .flex-viewport { max-height: 2000px; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -o-transition: all 1s ease; transition: all 1s ease; } .loading .flex-viewport { max-height: 300px; } /* Clearfix for the .slides element */ .slides:after {content: "\0020"; display: block; clear: both; visibility: hidden; line-height: 0; height: 0;} html[xmlns] .slides {display: block;} * html .slides {height: 1%;} /* No JavaScript Fallback */ /* If you are not using another script, such as Modernizr, make sure you * include js that eliminates this class on page load */ .no-js .slides > li:first-child {display: block;} /* Direction Nav */ .flex-direction-nav {*height: 0;} .flex-direction-nav a { display: block; width: 32px; height: 32px; margin: -20px 0 0; position: absolute; top: 50%; z-index: 10; overflow: hidden; opacity: 0; cursor: pointer; color: rgba(255,255,255,0.8); -webkit-transition: all .3s ease; -moz-transition: all .3s ease; transition: all .3s ease; } .flex-direction-nav .flex-prev { left: -50px; opacity: 0.7; } .flex-direction-nav .flex-next { opacity: 0.7; right: -50px; text-align: right; } .flexslider:hover .flex-prev { left: 20px; } .flexslider:hover .flex-next { right: 20px; } .flexslider:hover .flex-next:hover, .flexslider:hover .flex-prev:hover { opacity: 1; } .flex-direction-nav .flex-disabled { opacity: 0!important; filter:alpha(opacity=0); cursor: default; } .flex-direction-nav a:before { font-family: "flexslider-icon"; font-size: 26px; display: inline-block; content: '\f001'; } .flex-direction-nav a.flex-next:before { content: '\f002'; } /* Control Nav */ .flex-control-nav { position: absolute; bottom: 0; margin: 0; text-align: center; width: 80%; z-index:100; } .flex-control-nav li {margin: 0 6px; display: inline-block; zoom: 1; *display: inline;} .flex-control-paging { width:100%; } .flex-control-paging li a {width: 11px; height: 11px; display: block; background: #fff; background: rgba(255,255,255,0.75); cursor: pointer; text-indent: -9999px; -webkit-border-radius: 20px; -moz-border-radius: 20px; -o-border-radius: 20px; border-radius: 20px; -webkit-box-shadow: inset 0 0 1px rgba(0,0,0,0.3); -moz-box-shadow: inset 0 0 1px rgba(0,0,0,0.3); -o-box-shadow: inset 0 0 1px rgba(0,0,0,0.3); box-shadow: inset 0 0 1px rgba(0,0,0,0.3); } .flex-control-paging li a:hover { background: #53524e; background: rgba(83,82,78,.50); } .flex-control-paging li a.flex-active { background: #53524e; background: rgba(83,82,78,.85); cursor: default; } /* YMCA Slideshow Specifics */ .slide-info {position: absolute; bottom: 0; left: 0; color: #fff; margin: 0; font-weight: bold; text-shadow: 0 0 5px #000; width: 100%; padding: 30px 0 30px 10%;} .slide-info h2 {font-size: 42px; text-transform: uppercase; color: #fff; margin: 0; line-height: 1;} .slide-info p, .slide-info a {font-size: 22px; color: #fff !important; margin: 0; font-weight: normal;} /*Branch page styles*/ .branch-home .slide-info a {text-shadow:none; font-weight:700; margin-top:30px;} .branch-home .slide-info p {font-weight:700;} @media screen and (min-width: 641px) { .slide-info {background: none !important;} } @media screen and (max-width: 860px) { .flex-direction-nav .flex-prev { opacity: 1; left: 20px;} .flex-direction-nav .flex-next { opacity: 1; right: 20px;} } @media screen and (max-width: 640px) { .flexslider {height: 100% !important;} .flex-direction-nav {margin: 0;} .flex-direction-nav a {top: 20%;} .slide-info {position: relative; background: #000; left: 0; bottom: 0; padding: 30px;} } /* ----------------------END FLEXSLIDER CSS------------------------ */ /* Popup Box */ body.lock {overflow:hidden;} .modal {overflow:scroll; padding-bottom:40px;} .modal-bg, .modal { z-index: 1001; opacity: 1; position: fixed; width: 100%; height: 100%; top: 0; left: 0; right: 0; bottom: 0; transition: opacity 250ms ease-in-out; } .modal-bg {background: rgba(0, 0, 0, .65); z-index:1002;} .modal.close .modal-bg, .modal.close {opacity:0;} .modal.slide, .modal.slide .modal-bg {top:auto; bottom:auto;} .modal .content { top: 30%; left: 50%; max-width: 750px; transform: translate(-50%,-30%); width:100%; background: white; position: relative; z-index:1003; transition: transform 250ms ease-in-out; -webkit-box-shadow: 0px 0px 14px 0px rgba(0,0,0,0.75); -moz-box-shadow: 0px 0px 14px 0px rgba(0,0,0,0.75); box-shadow: 0px 0px 14px 0px rgba(0,0,0,0.75); border-radius:10px; -webkit-border-radius:10px; } .modal .content .item {padding:30px; position:relative;} .modal.slim .content { max-width: 420px; } .modal.close .content {transform: translate(-50%,-30%) scale(.75);} .modal .close-modal {position:absolute; z-index:1; right:0; top:0; padding:3px 5px; line-height:1; text-align:center; font-size:22px; font-weight:700;} .modal .close-modal.white {color:#fff;} .modal .close-modal:hover {cursor:pointer;} .modal .bg-image {z-index:-1;} .has-bg.image-left .item {width:50%; margin-left:50%;} .has-bg.image-right .item {width:50%;} .has-bg.image-top .item {padding-top:140px;} .has-bg.image-left .bg-image {width:50%; position:absolute; top:0; bottom:0; left:0; border-radius:10px 0 0 10px; -webkit-border-radius:10px 0 0 10px;} .has-bg.image-right .bg-image {width:50%; position:absolute; top:0; bottom:0; right:0; border-radius:0 10px 10px 0; -webkit-border-radius:0 10px 10px 0;} .has-bg.image-bg .bg-image {position:absolute; top:0; bottom:0; right:0; left:0; opacity:.15; border-radius:10px; -webkit-border-radius:10px;} .has-bg.image-top .bg-image {width:100%; position:absolute; top:0; left:0; height:110px; border-radius:10px 10px 0 0; -webkit-border-radius:10px 10px 0 0;} .float-image {position:absolute; max-width:100px; max-height:100px; height:auto; width:auto; transform:translate(-50%,-50%);} .float-image.top {top:0;} .float-image.middle {top:50%;} .float-image.bottom {bottom:0;} .float-image.left {left:0;} .float-image.right {right:0;} .float-image.center {left:50%;} @media only screen and (max-width: 767px) { .modal .content {transform:translate(-50%,0%); top:40px;} .modal.wide .content {max-width:100%;} .modal.wide {padding:20px;} } @media only screen and (max-width: 460px) { .modal.slim .content {max-width:100%;} .modal.slim {padding:20px;} } /* Slick Carousel */ /* Slider */ .slick-slider { position: relative; display: block; box-sizing: border-box; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-touch-callout: none; -khtml-user-select: none; -ms-touch-action: pan-y; touch-action: pan-y; -webkit-tap-highlight-color: transparent; } .slick-list { position: relative; display: block; overflow: hidden; margin: 0; padding: 0; } .slick-list:focus { outline: none; } .slick-list.dragging { cursor: pointer; cursor: hand; } .slick-slider .slick-track, .slick-slider .slick-list { -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } .slick-track { position: relative; top: 0; left: 0; display: block; margin-left: auto; margin-right: auto; } .slick-track:before, .slick-track:after { display: table; content: ''; } .slick-track:after { clear: both; } .slick-loading .slick-track { visibility: hidden; } .slick-slide { display: none; float: left; height: 100%; min-height: 1px; } [dir='rtl'] .slick-slide { float: right; } .slick-slide img { display: block; } .slick-slide.slick-loading img { display: none; } .slick-slide.dragging img { pointer-events: none; } .slick-initialized .slick-slide { display: block; } .slick-loading .slick-slide { visibility: hidden; } .slick-vertical .slick-slide { display: block; height: auto; border: 1px solid transparent; } .slick-arrow.slick-hidden { display: none; } @charset 'UTF-8'; /* Slider */ .slick-loading .slick-list { background: #fff url('./ajax-loader.gif') center center no-repeat; } /* Arrows */ .slick-prev, .slick-next { font-size: 0; line-height: 0; position: absolute; top: 50%; display: block; width: 20px; height: 25px; padding: 0; -webkit-transform: translate(0, -50%); -ms-transform: translate(0, -50%); transform: translate(0, -50%); cursor: pointer; color: transparent; border: none; outline: none; background: transparent; border-radius:50%; opacity:.8; -webkit-transition: all .3s ease; -moz-transition: all .3s ease; transition: all .3s ease } .slick-prev {left:9px;} .slick-next {right:9px;} .slick-prev:hover, .slick-prev:focus, .slick-next:hover, .slick-next:focus { opacity:1; background:transparent; } .slick-prev:hover {left:5px;} .slick-next:hover {right:5px;} .slick-prev:before, .slick-next:before { font-size: 12px; line-height: 1; color: #747474; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .slick-prev:before { font-family: "flexslider-icon"; font-size: 26px; display: inline-block; content: '\f001'; } .slick-next:before { font-family: "flexslider-icon"; font-size: 26px; display: inline-block; content: '\f002'; } .gallery.slick-slider {background:#eaeaea; padding:15px 30px; border-radius:6px; border:1px solid #c5c5c5;} .gallery.slick-slider .slick-slide {padding:4px 4px 0; background:#fff; border-radius:4px;} .gallery .slick-list {padding-top:8px !important; padding-bottom:8px !important; border-radius:4px; background:#fff; border:1px solid #c5c5c5;} .gallery .slick-list .overlay {height:100%; width:30px; position:absolute; top:0; left:0; float:none !important;} .gallery .slick-list .overlay.left { /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#000000+0,141414+100&0.21+0,0+100 */ background: -moz-linear-gradient(left, rgba(0,0,0,0.21) 0%, rgba(20,20,20,0) 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(left, rgba(0,0,0,0.21) 0%,rgba(20,20,20,0) 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to right, rgba(0,0,0,0.21) 0%,rgba(20,20,20,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#36000000', endColorstr='#00141414',GradientType=1 ); /* IE6-9 */ } .gallery .slick-list .overlay.right { left:auto; right:0; /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#141414+0,000000+100&0+0,0.21+100 */ background: -moz-linear-gradient(left, rgba(20,20,20,0) 0%, rgba(0,0,0,0.21) 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(left, rgba(20,20,20,0) 0%,rgba(0,0,0,0.21) 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to right, rgba(20,20,20,0) 0%,rgba(0,0,0,0.21) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00141414', endColorstr='#36000000',GradientType=1 ); /* IE6-9 */ } /* small gallery */ .gallery.slick-slider .slick-slide img {max-height:200px; width:auto;} .gallery.slick-slider .slick-slide img:hover {cursor:pointer;} .gallery.slick-slider .slick-slide p {margin:0; font-size:12px; color:#5c5c5c;} .gallery.slick-slider .slick-slide .lightbox {display:none;} @media screen and (max-width:767px) { .gallery.slick-slider .slick-slide {padding:4px 15px 0;} .gallery.slick-slider .slick-slide img {max-height:none; margin:0 auto;} } /* Magnific Popup CSS */ .mfp-bg { top: 0; left: 0; width: 100%; height: 100%; z-index: 1042; overflow: hidden; position: absolute; background: #0b0b0b; opacity: 0.8; } .mfp-wrap { top: 0; left: 0; width: 100%; height: 100%; z-index: 1043; position: fixed; outline: none !important; -webkit-backface-visibility: hidden; } .mfp-container { text-align: center; position: relative; width: 100%; max-width:1100px; height: 100%; left: 0; top: 0; padding: 0 8px; box-sizing: border-box; margin:0 auto;} .mfp-container:before { content: ''; display: inline-block; height: 100%; vertical-align: middle; } .mfp-align-top .mfp-container:before { display: none; } .mfp-content { position: relative; display: inline-block; vertical-align: middle; margin: -100px auto 0; text-align: left; z-index: 1045; } .mfp-inline-holder .mfp-content, .mfp-ajax-holder .mfp-content { width: 100%; cursor: auto; } .mfp-ajax-cur { cursor: progress; } .mfp-zoom-out-cur, .mfp-zoom-out-cur .mfp-image-holder .mfp-close { cursor: -moz-zoom-out; cursor: -webkit-zoom-out; cursor: zoom-out; } .mfp-zoom { cursor: pointer; cursor: -webkit-zoom-in; cursor: -moz-zoom-in; cursor: zoom-in; } .mfp-auto-cursor .mfp-content { cursor: auto; } .mfp-close, .mfp-arrow, .mfp-preloader, .mfp-counter { -webkit-user-select: none; -moz-user-select: none; user-select: none; } .mfp-loading.mfp-figure { display: none; } .mfp-hide { display: none !important; } .mfp-preloader { color: #CCC; position: absolute; top: 50%; width: auto; text-align: center; margin-top: -0.8em; left: 8px; right: 8px; z-index: 1044; } .mfp-preloader a { color: #CCC; } .mfp-preloader a:hover { color: #FFF; } .mfp-s-ready .mfp-preloader { display: none; } .mfp-s-error .mfp-content { display: none; } button.mfp-close, button.mfp-arrow { overflow: visible; cursor: pointer; background: transparent; border: 0; -webkit-appearance: none; display: block; outline: none; padding: 0; z-index: 1046; box-shadow: none; touch-action: manipulation; } button::-moz-focus-inner { padding: 0; border: 0; } .mfp-close { width: 30px; height: 30px; line-height: 30px; position: absolute; right: 0; top: 0; text-decoration: none; text-align: center; opacity: 0.85; padding: 0 0 18px 10px; color: #FFF; font-style: normal; font-size: 28px; } .mfp-close:hover, .mfp-close:focus { opacity: 1; } .mfp-counter { position: absolute; top: 0; right: 0; color: #CCC; font-size: 12px; line-height: 18px; white-space: nowrap; } .mfp-arrow { font-size: 0; position: absolute; top: 47%; display: block; width: 20px; height: 35px; line-height:35px; padding: 0; -webkit-transform: translate(0, -50%); -ms-transform: translate(0, -50%); transform: translate(0, -50%); cursor: pointer; color: #fff; border: none; outline: none; background: transparent; border-radius:50%; opacity:.8; -webkit-transition: all .3s ease; -moz-transition: all .3s ease; transition: all .3s ease } .mfp-arrow:hover, .mfp-arrow:focus { opacity: 1; } .mfp-arrow:before {font-family: "flexslider-icon"; font-size: 35px; display: inline-block; content: '\f001'; } .mfp-arrow-left { left: 11px; } .mfp-arrow-right { right: 11px; } .mfp-arrow-right:before {font-family: "flexslider-icon"; font-size: 35px; display: inline-block; content: '\f002';} .mfp-iframe-holder { padding-top: 40px; padding-bottom: 40px; } .mfp-iframe-holder .mfp-content { line-height: 0; width: 100%; max-width: 900px; } .mfp-iframe-holder .mfp-close { top: -40px; } .mfp-iframe-scaler { width: 100%; height: 0; overflow: hidden; padding-top: 56.25%; } .mfp-iframe-scaler iframe { position: absolute; display: block; top: 0; left: 0; width: 100%; height: 100%; box-shadow: 0 0 8px rgba(0, 0, 0, 0.6); background: #000; } /* Main image in popup */ img.mfp-img { width: auto; max-width: 100%; height: auto; display: block; line-height: 0; box-sizing: border-box; padding: 40px 0 40px; margin: 0 auto; } /* The shadow behind the image */ .mfp-figure { line-height: 0; } .mfp-figure:after { content: ''; position: absolute; left: 0; top: 40px; bottom: 40px; display: block; right: 0; width: auto; height: auto; z-index: -1; box-shadow: 0 0 8px rgba(0, 0, 0, 0.6); background: #444; } .mfp-figure small { color: #BDBDBD; display: block; font-size: 12px; line-height: 14px; } .mfp-figure figure { margin: 0; } .mfp-bottom-bar { margin-top: -36px; position: absolute; top: 100%; left: 0; width: 100%; cursor: auto; } .mfp-title { text-align: left; line-height: 18px; color: #F3F3F3; word-wrap: break-word; padding-right: 36px; } .mfp-image-holder .mfp-content { max-width: 100%; } .mfp-gallery .mfp-image-holder .mfp-figure { cursor: pointer; } .mfp-fade.mfp-bg { opacity: 0; -webkit-transition: all 0.15s ease-out; -moz-transition: all 0.15s ease-out; transition: all 0.15s ease-out; } /* overlay animate in */ .mfp-fade.mfp-bg.mfp-ready { opacity: 0.9; } /* overlay animate out */ .mfp-fade.mfp-bg.mfp-removing { opacity: 0; } /* content at start */ .mfp-fade.mfp-wrap .mfp-content { opacity: 0; -webkit-transition: all 0.15s ease-out; -moz-transition: all 0.15s ease-out; transition: all 0.15s ease-out; } /* content animate it */ .mfp-fade.mfp-wrap.mfp-ready .mfp-content { opacity: 1; max-width:1150px; text-align:center; padding:0 35px; } /* content animate out */ .mfp-fade.mfp-wrap.mfp-removing .mfp-content { opacity: 0; } .mfp-content .lightbox img {border-radius:6px;} .mfp-content .lightbox p {color:#fff; margin:5px 0 0;} @media screen and (max-width: 800px) and (orientation: landscape), screen and (max-height: 300px) { /** * Remove all paddings around the image on small screen */ .mfp-img-mobile .mfp-image-holder { padding-left: 0; padding-right: 0; } .mfp-img-mobile img.mfp-img { padding: 0; } .mfp-img-mobile .mfp-figure:after { top: 0; bottom: 0; } .mfp-img-mobile .mfp-figure small { display: inline; margin-left: 5px; } .mfp-img-mobile .mfp-bottom-bar { background: rgba(0, 0, 0, 0.6); bottom: 0; margin: 0; top: auto; padding: 3px 5px; position: fixed; box-sizing: border-box; } .mfp-img-mobile .mfp-bottom-bar:empty { padding: 0; } .mfp-img-mobile .mfp-counter { right: 5px; top: 3px; } .mfp-img-mobile .mfp-close { top: 0; right: 0; width: 35px; height: 35px; line-height: 35px; background: rgba(0, 0, 0, 0.6); position: fixed; text-align: center; padding: 0; } } @media all and (max-width: 900px) { .mfp-arrow { -webkit-transform: scale(0.75); transform: scale(0.75); } .mfp-arrow-left { -webkit-transform-origin: 0; transform-origin: 0; } .mfp-arrow-right { -webkit-transform-origin: 100%; transform-origin: 100%; } .mfp-container { padding-left: 6px; padding-right: 6px; } } /* ModuleBegin::photo */ /* Photo Lister */ .photo-albums-container {padding: 40px 0 80px;} .album-container {width:225px; display:inline-block; margin:0 15px; text-align:left;} .album-container h5 {margin-top:10px; margin-bottom:0px;} .photo-album {position:relative; padding: 0;} .photo-album img {width:94%;} .album .blank-photo {display: block; width: 94%; height: 100%; border: 1px solid #bdbdbe; background: #fff; display: block; position: absolute; top: 0; z-index: -1; -webkit-transition: all 200ms ease; transition: all 200ms ease;} .album .blank-photo.one {left: 4px; top: 3px;} .album .blank-photo.two {left: 7px; top: 6px; z-index: -2;} .album:hover .blank-photo.one {left: 6px; top: 5px;} .album:hover .blank-photo.two {left: 11px; top: 9px;} .photo-frame {border: 1px solid #bdbdbe; margin: 1px 1px 0 1px; padding: 3px; background: #fff; display: block;} .album-container{padding-left:0px; padding-right:11px;} a.archive {margin-top:15px;} /* Photo Thumbnails */ .album-thumbs-lister {margin-bottom: 50px;} #album-thumbs-container {margin-bottom: 20px;} /* Photo Detail */ .photo-album.dark-bg {background:#3a3a3a; padding:50px 0;} .detail-image {position: relative; margin:0 auto; padding-top:10px;} .dark-bg .detail-image img {width: auto; height: auto; max-height: 650px; display: block; margin: auto; -webkit-box-shadow: 0 0 40px 0 rgba(0,0,0,.9); box-shadow: 0 0 40px 0 rgba(0,0,0,.9);} .photo-album-nav a {color: #fff;text-decoration: none;position: absolute; top: 49%;} .photo-album-nav a.prev {left: -65px;} .photo-album-nav a.next {right: -65px;} .detail-image .photo-album-nav img {width: auto; -webkit-box-shadow: none; box-shadow: none;} .dark-bg p.pages {font-size: 14px; font-weight: 700; margin-top: 20px; color:#fff;} .dark-bg h2{color:#fff; margin-top:10px;} .dark-bg p{color:#fff;} .album-thumb-wrapper{margin-bottom:40px;} #album-thumbnails {margin:40px 50px 20px;} .square.thumb {width: 74px; height: 74px; float: left; margin: 0 7px 7px 0; overflow: hidden; position: relative;} .thumb img { min-width: 100%; min-height: 100%; position: absolute; max-width: 160%; top: 50%; left: 50%; margin-left: -37px; margin-top: -37px;} .thumbnails h3.title span {font-weight:normal; font-size: 16px; font-family: Verdana, Arial, Helvetica, sans-serif;} p.center.album-photo-back a {color: white;font-size: 14px;} /* Photo Slide */ .photoSlideWrapper .photoDetail { padding: 10px 0px; text-align: center; } .photoSlide span { display: block; } .photoImage img {border:1px solid #ccc; padding:5px;} .photoSlideWrapper .photoRemote { width: 210px; margin: 0 auto; border: 0; clear: both; } /* ModuleEnd::photo */ /*! * Justified Gallery - v3.5.1 * http://miromannino.github.io/Justified-Gallery/ * Copyright (c) 2015 Miro Mannino * Licensed under the MIT license. */ @-webkit-keyframes justified-gallery-show-caption-animation{from{opacity:0}to{opacity:.7}}@-moz-keyframes justified-gallery-show-caption-animation{from{opacity:0}to{opacity:.7}}@-o-keyframes justified-gallery-show-caption-animation{from{opacity:0}to{opacity:.7}}@keyframes justified-gallery-show-caption-animation{from{opacity:0}to{opacity:.7}}@-webkit-keyframes justified-gallery-show-entry-animation{from{opacity:0}to{opacity:1}}@-moz-keyframes justified-gallery-show-entry-animation{from{opacity:0}to{opacity:1}}@-o-keyframes justified-gallery-show-entry-animation{from{opacity:0}to{opacity:1}}@keyframes justified-gallery-show-entry-animation{from{opacity:0}to{opacity:1}}.justified-gallery{width:100%;position:relative;overflow:hidden}.justified-gallery>a,.justified-gallery>div{position:absolute;display:inline-block;overflow:hidden;opacity:0;filter:alpha(opacity=0)}.justified-gallery>a>img,.justified-gallery>div>img,.justified-gallery>a>a>img,.justified-gallery>div>a>img{position:absolute;top:50%;left:50%;margin:0;padding:0;border:0}.justified-gallery>a>.caption,.justified-gallery>div>.caption{display:none;position:absolute;bottom:0;padding:5px;background-color:#000;left:0;right:0;margin:0;color:#fff;font-size:12px;font-weight:300;font-family:sans-serif}.justified-gallery>a>.caption.caption-visible,.justified-gallery>div>.caption.caption-visible{display:initial;opacity:.7;filter:"alpha(opacity=70)";-webkit-animation:justified-gallery-show-caption-animation 500ms 0 ease;-moz-animation:justified-gallery-show-caption-animation 500ms 0 ease;-ms-animation:justified-gallery-show-caption-animation 500ms 0 ease}.justified-gallery>.entry-visible{opacity:1;filter:alpha(opacity=100);-webkit-animation:justified-gallery-show-entry-animation 500ms 0 ease;-moz-animation:justified-gallery-show-entry-animation 500ms 0 ease;-ms-animation:justified-gallery-show-entry-animation 500ms 0 ease}.justified-gallery>.spinner{position:absolute;bottom:0;margin-left:-24px;padding:10px 0;left:50%;opacity:initial;filter:initial;overflow:initial}.justified-gallery>.spinner>span{display:inline-block;opacity:0;filter:alpha(opacity=0);width:8px;height:8px;margin:0 4px;background-color:#000;border-top-left-radius:6px;border-top-right-radius:6px;border-bottom-right-radius:6px;border-bottom-left-radius:6px} /* RunPDF Print Styles */ @media only screen and (min-width: 641px) { .print-page {margin-top: 20px;} .print-section-title {line-height:0.5;} .schedules-heading {width: 65%; float: left;} div.schedules-print {width: 35%; float: right; text-align: right; margin-top: 5px;} .print-day {width:14.28%;} .print-schedule-item {min-height:60px;} .print-page {padding: 20px 0px;} .print-page h1 {font-size: 25px; margin-bottom:5px; margin-top:-10px;} .print-page h2 {font-size: 35px; margin-bottom:5px; margin-top:0px; line-height:1;} .print-page img {margin-bottom:0px;} .print-page .no-height {line-height: 5px;} .print-page .schedule-day:nth-child(2n) {background:#fbfafc;} .print-page .schedule-day-title {background:#f2f0f3; font-size: 20px;} .print-page .schedule-name {font-size: 15px; margin-bottom:0px; line-height: 1;} .print-page .print-day p {line-height: 1.3; font-size: 13px;} .print-page .print-day .schedule-time {font-size: 12px;} } .waiting-message { display:none; padding: 10px 20px; border-radius: 7px 7px 7px 7px; -moz-border-radius: 7px 7px 7px 7px; -webkit-border-radius: 7px 7px 7px 7px; position: relative; } .waiting-message-text {color: #fff; text-align: right; width: 96%; float:left; margin-bottom: 0px;} .waiting-message p {color: #fff; text-align: right; width: 96%; float:left; font-size: 15px; margin-bottom: 3px;} .waiting-message a {font-size: 20px; text-decoration:none; color: #fff; text-align: right; position: absolute; top: 9px; right: 27px;} .waiting-message a:hover {color: #000;} @media only screen and (max-width: 641px) { div.schedules-print {margin-bottom: 15px;} .waiting-message-text {text-align:left; font-size: 19px;} .waiting-message p {text-align: left; font-size: 13px;} } /*Membership Rates */ .membership-box {position:relative; border-radius: 0px 0px 15px 15px ;} .membership-box .membership-header {border-radius:15px 15px 0px 0px; padding:15px 20px 1px;} .membership-box .membership-table {background: #ebecf0; border-radius: 0px 0px 15px 15px; padding:15px 25px 25px 25px;} .membership-box .membership-table a.button {font-size:13px; padding:10px; border:2px solid #fff;} .membership-box .membership-table th {line-height:1;} .membership-box .heading {position:absolute; bottom:125px; left:-55px; color:#000; font-weight:bold; font-size:14px;} .membership-box .cost {color:#000; font-weight:bold; text-align:center; font-size:14px; padding-bottom:15px; text-transform:uppercase;} .membership-box .tax {color:#000; font-style:italic; text-align:right; font-size:14px; padding-top:15px;} .membership-box .res{color:#000; font-size:12px; font-weight:normal;} .membership-box td {padding:5px;} .membership-box td.price-holder{width:15%; border-left:2px solid #fff; border-right:2px solid #fff;} .membership-box td.button-holder{width:18%; border-left:2px solid #fff; border-right:2px solid #fff;} .membership-box td.price-label{border-left:4px solid #fff; border-right:2px solid #fff;} .membership-box td.first {border-top:4px solid #fff; padding-top:13px;} .membership-box td.last {border-bottom:4px solid #fff; padding-bottom:13px;} .membership-box td.end {border-right:4px solid #fff;} .membership-box .income {text-transform:uppercase; font-weight:700; color:#000; background:#fff; padding:4px; line-height:1.2;} .membership-box .price {font-weight:700; color:#fff; padding:5px;} .membership-box .price.strike {text-decoration:line-through;} .membership-icon {} .membership-box.mobile{max-width:350px; margin:0 auto 40px;} .membership-box.mobile .membership-header p{font-weight:700; font-size:20px; line-height:1; color:#fff;} .membership-box.mobile .membership-header .res{color:#fff; font-size:14px;} .membership-box.mobile .membership-info {background: #ebecf0; border-radius: 0px 0px 15px 15px;} .membership-box.mobile .membership-table {padding-top: 0; padding-left:30px;} .membership-box.mobile td.price-holder {width:30%; border:none; background:#fff; border-top:3px solid #ebecf0; padding:0;} .membership-box.mobile td.price-label{border:none; background:#fff; border-top:3px solid #ebecf0; padding:0;} .membership-box.mobile td.button-holder {background:#fff;} .membership-box.mobile .price {background:#fff;} .membership-box.mobile .heading{color:#81898c; font-size:12px; bottom:72px; left:-50px;} .membership-box.mobile .cost{color:#81898c; font-size:12px; padding:5px 0; margin:0;} .membership-box.mobile .membership-table a.button {font-size:13px; margin-bottom:5px; padding:8px; display:block;} /*Silent Salesman Styles */ .corner-box {position:fixed; bottom:10px; right:15px; z-index:500; opacity:0; display:none;} .corner-box.box-left {right:auto; left:15px;} .corner-box .header {padding:10px 15px; transition: all .3s ease;} .corner-box .header img {width:20px; margin:-2px 3px 0 0;} .corner-box .header img.no-title {margin:-2px 0 0;} .corner-box .container {border:2px solid #fff; border-radius:25px; -webkit-border-radius:25px; transition: all .3s ease;} .corner-box .header:hover {cursor:pointer;} .corner-box .header p {margin:0; color:#fff; font-size:16px; font-family:'Cachet Bold', Arial, Helvetica, sans-serif; display:inline-block;} .corner-box .content {display:none; width:340px; max-height:445px; overflow-y:auto; } .corner-box .content p {color:#777;} .corner-box .wrapper {font-size:14px; background:#fff; margin:0 10px 10px; padding:10px; border-radius:6px; -webkit-border-radius:6px} .corner-box .wrapper p {font-size:14px; margin:0 auto 15px;} .corner-box .wrapper .button {margin:0 auto; display:block;} .corner-box.open .header {border-radius:15px 15px 0 0; -webkit-border-radius:15px 15px 0 0; } .corner-box.open .header:after {content:'\25bc'; position:absolute; right:10px; color:#fff;} .corner-box.open .content {border-radius:0 0 15px 15px; -webkit-border-radius:0 0 15px 15px;} .corner-box.open .container {border-radius:15px; -webkit-border-radius:15px;} @media only screen and (max-width: 370px) { .corner-box .content {width:100%;} .corner-box.open {right:15px; left:15px;} } @media only screen and (max-height: 660px) { .corner-box .content {max-height:320px;} } @media only screen and (max-height: 530px) { .corner-box .content {max-height:220px;} } @media only screen and (max-height: 430px) { .corner-box .content {max-height:180px;} } @media only screen and (max-height: 360px) { .corner-box .content {max-height:120px;} } /* ModuleBegin::membership */ #formLogin { margin:0 auto; border: 1px solid #ccc; padding: 20px; width:275px; } .memberLoginBox { margin: 0 auto; } .memberLoginBox td { padding: 2px; } .membershipModule .companyInfo { margin: 1em 0; } .membershipModule .address { margin: 1em 0; } .membershipModule .contactInfo { margin: 1em 0; } .membershipModule .thumbnail { float:left; margin-right: 20px;} /* ----- My Account ---- */ .membershipModule.myAccount:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } .membershipModule.myAccount .block { padding: 10px; float: left; width: 250px; height: 150px; } .membershipModule.myAccount .block.membership { float: none; width: auto; height: auto; background-color: #eee; } .membershipModule.myAccount .block.membership ul { list-style: none; padding: 0; } @media (min-width: 45em) { .membershipModule.myAccount .block.membership li { display: inline; margin: 0 .5em; } } /* ----- My Account - Dispatch ( System Forms ) ---- */ .myaccountHeading { font-size: 2em; font-weight: bold } .myaccountMessage {} .myaccountDetail table { color: #444;} .myaccountDetail .formtextRequired, .myaccountDetail .formtext { padding: 5px 0; } .myaccountDetail .formtextRequired label { font-weight: bold }; /* ModuleEnd::membership */ /* ModuleBegin::broadcastemail */ .enewsWrapper span { display: block; } /* ModuleEnd::broadcastemail */ /* ModuleBegin::leads */ .pcl-name { text-align:center; width:100%; font-weight:bold; } /* ModuleEnd::leads */ /* JOBS MODULE */ /* ModuleBegin::jobs */ .jobs-list {font-size:16px; list-style:none !important; margin-left:0 !important;} .jobs-list .ellipsis {max-height: 400px; overflow: hidden; position: relative;} .jobs-list .ellipsis:after { display: block; width: 100%; height: 100px; position: absolute; bottom: 0; content: ""; } .ellipsis-clear {height: 55px;} .jobs-item .fade {background-position: left top; height: 110px; margin-top: -95px; padding-top: 95px;} .jobs-detail-job-code {font-size: 12px; font-style: italic;} .apply-button {margin-top: 50px;} @media only screen and (min-width: 641px) { .jobs-detail-job-code {font-size: 12px; font-style: italic; float: right;} } /* ModuleEnd::jobs */ .lesson-selector .questions .item {display:none;} .lesson-selector .questions .item:first-child {display:block;} /* lesson selector */ .lesson-selector .header {padding:18px 15px; border-radius:6px 6px 0 0;} .lesson-selector .header h2 {color:#fff; margin:0; text-transform:uppercase;} .lesson-selector .age-groups-group {border:3px solid #ddd; border-radius:9px; margin-bottom:25px; background:#f6f6f6;} .lesson-selector .age-groups-group ul {margin:0; padding:0; list-style-type:none; font-size:0; display:flex; flex-flow:row; flex-wrap:wrap;} .lesson-selector .age-groups-group ul li {width:23%; font-size:16px; margin:1%; padding:10px; text-align:center;} .lesson-selector .age-groups-group ul li p {margin:0;} .lesson-selector .age-groups-group ul li h3 {margin:5px 0 0;} .lesson-selector .age-groups-group ul li img {max-width:80px; opacity:.8;} .lesson-selector .age-groups-group .desc {margin:20px; font-size:14px; font-style:italic;} .lesson-selector .question-group {border:3px solid #ddd; border-radius:9px; margin-bottom:25px; background:#f6f6f6;} .lesson-selector .question-group .item {margin:20px;} .lesson-selector .question-group .item .prompt {text-align:center; font-size:22px; margin-bottom:10px;} .lesson-selector .question-group .item .answers {text-align:center; margin-bottom:5px;} .lesson-selector .question-group .item .answers .button {min-width:140px;} .lesson-selector .question-group .item .back-link {text-align:center;} .lesson-selector .question-group .item .back-link a {color:#424242} .lesson-selector .question-group .item .lesson, .lesson-selector .lesson-final {background:#fff; padding:20px; margin:15px auto 0; max-width:750px; border-radius:6px;} .lesson-selector .question-group .reset-link {margin-left:20px; margin-right: 20px;} .lesson-selector .question-group .reset-link a {color:#424242} .lesson-selector .lesson-group-group {border:3px solid #ddd; border-radius:9px; margin-bottom:25px; background:#f6f6f6;} .lesson-selector .lesson-group {margin:0; padding:0; list-style-type:none;} .lesson-selector .lesson-lister {margin:20px 0; padding:0; list-style-type:none; font-size:0px; display:flex; flex-flow:row; flex-wrap:wrap;} .lesson-selector .stage {padding:20px;} .lesson-selector .lesson-lister li {width:31%; font-size:14px; padding:15px; background:#fff; border-radius:6px; margin:1%; position:relative;} .lesson-selector .lesson-lister li.has-links {padding-bottom:70px;} .lesson-selector .lesson-lister li img {max-width:150px; margin:0 auto 10px; display:block;} .lesson-selector .lesson-lister li h4 {text-align:center; margin-bottom:5px;} .lesson-selector .lesson-lister li .links {margin-top:20px; margin-bottom:0; position:absolute; bottom:15px; left:15px; right:15px;} .lesson-selector .lesson-lister li .links .button {width:100%; font-size:13px;} .lesson-selector .lesson-lister li .links.two-links .button {width:49%;} .lesson-selector .lesson-lister li .links.two-links .button:first-child {margin-right:1%;} .lesson-selector .lesson-lister li .links.two-links .button:last-child {margin-left:1%;} @media only screen and (max-width: 1024px) { .lesson-selector .age-groups-group ul li {width:48%;} .lesson-selector .lesson-lister li {width:48%;} } @media only screen and (max-width: 640px) { .lesson-selector .age-groups-group ul li {width:98%;} .lesson-selector .lesson-lister li {width:98%;} .lesson-selector .question-group .item .lesson img {display:block; margin:0 auto; max-width:200px;} .lesson-selector .question-group .item .lesson h3 {text-align:center;} } /* -------------------------------------------------- :: Media Query Fixes Foundation classes & their media query sizes: .small- max-width 640px .medium- min-width 641px .large- min-width 1025px .xlarge- min-width 1441px .xxlarge- min-width 1921px ---------------------------------------------------*/ /* Media Queries Large / Desktop & up */ @media only screen and (min-width: 1025px) { .home.section .section-text {padding-top: 15%;} .countdown-expiry {padding-top: 50px;} #footer .email-sign-up input {width: 70%; padding: 0 2%; height: 30px; display: inline-block; line-height: 1; margin: 0; border-width: 1px; border-style: solid; float: left;} #footer .email-sign-up input[name=email] {background: #efefef; border-color: #d6d6d6;} #footer .email-sign-up input[name=email]:focus {background: #fff;} #footer .email-sign-up input[type=submit] {width: 28%; font-size: 11px; padding: 0;} .schedule-weekend {width: 25%;} } /* Media Queries Medium-Large / Between Tablet & Desktop */ @media only screen and (min-width: 641px) and (max-width: 1024px) { .home.section .section-text {padding-top: 8%;} .home.section.open {padding-bottom: 55%;} .schedule-weekend {width: 50%;} } /* Media Queries Medium / Tablet & up */ @media only screen and (min-width: 641px) { .row.full-width {margin: 0 auto; max-width: 96%; padding: 0!important; width: 100%;} /*#mainnav .row, #mainnav .columns {height: 100%;}*/ .home.section .section-text.left-side {left: 20%;} .home.section .section-text.right-side {right: 20%;} .home.section.open .section-text.left-side {left: 0; padding-left: 10%; padding-right: 22%;} .home.section.open .section-text.right-side {right: 0; padding-right: 10%; padding-left: 22%;} p.button {display: inline-block; border-radius: 6px; -webkit-border-radius: 6px} /* This helps stylize the editor better for clients in Blue */ .schedules-list-wrapper .schedule-day-content {display: block !important; margin-bottom: 10px;} .schedules-list-wrapper h3 {border: 1px solid #ddd;} #schedules-ajax .schedule-day {width:20%;} .footer-logo-img {max-width: 280px; margin-top: 20px;} /*Style 4 */ .style-4 #footer .email-sign-up {margin: 0;} .style-4 .footer-logo, .style-4 .footer-logo-img {margin-top: 0;} } @media only screen and (max-width: 1180px) { .photo-album-nav a.next {right: 0;} .photo-album-nav a.prev {left: 0;} } @media only screen and (max-width: 1067px) { .home.section .button {margin-top: 25px;} .home.section.open .section-text.left-side {left: 0; padding-left: 5%; padding-right: 22%;} .home.section.open .section-text.right-side {right: 0; padding-right: 5%; padding-left: 22%;} } @media only screen and (max-width: 850px) { #bg-video .video-text {bottom: 30%;} } /* Media Queries Medium / Tablet 767px */ @media only screen and (max-width: 767px) { .stuck {position: relative; /*overflow: hidden;*/} /* This cuts off the dropdown menu of the micro-sites navigation, when the sticky class is active */ .slide-info h2 {font-size: 28px;} .slide-info p, .slide-info a {font-size: 18px;} .home.section.open {height: auto; padding-bottom: 50px;} .home.section.open img {position: relative; margin-bottom: 30px;} .home.section.open .section-text {background: none; max-width: 80%; margin: auto;} .home.section.open .section-text.left-side, .home.section.open .section-text.right-side {padding: 0 20px; position: relative; width: 100%; text-align: center; left: 0; right: 0;} .survey-rating {width: 18%;} .locations-map {max-height:400px;} .locations-map #map {max-height: 400px;} .style-2 .footer-logo-img, .style-3 .footer-logo-img {margin: auto;} #album-thumbnails { margin: 40px 0;} table {max-width: 100% !important;} } @media only screen and (max-width: 640px) { .top-bar .social-media {display: none; padding-bottom: 10px;} .mobile-icon {display: block; float: right; width: 40px; margin-right: 20px;} .home.section {padding-bottom: 85%;} .home.section img {max-width: none; max-height: 570px; left: 0;} .home.section .section-text {padding-top: 20%;} .home.section .section-text.left-side, .home.section .section-text.right-side {left: 10%; right: 10%;} .home.section .section-text h1 {font-size: 38px;} .home.section .section-text a {font-size: 16px;} .home.section.open .section-text {max-width: 100%;} .home.section.open .img-right {float: right; margin-right: -100px;} #home-news .news-box {margin-bottom: 25px;} .black-bar h3 {text-align: center;} .callout-bar-text {border: none; text-align: center;} .enews-callout #broadcastemail_signup_form {width: 100%;} form td {display: block;} .simpleAntiSpam {width: 100%;} .schedules-wrapper {border: none;} .schedule-day, .schedule-weekend {width:100%; margin-bottom: 30px; border: 1px solid #ddd;} .schedules-mobile {border-top: 1px solid #ddd;} .schedules-mobile .schedule-item.spacer {display: none;} .schedules-mobile h3 {margin: 0; border: 1px solid #ddd; border-top: none;} .schedules-mobile .schedule-day-content {background: #f5f5f5; padding: 0 8px; border: 1px solid #ddd; border-top: none;} .footer-callout.bar, .footer-callout.bar h3, .style-2 .footer-callout-2.bar h3, .countdown-timer h2, .countdown-text p {text-align: center !important;} #countdown-wrapper {text-align: center; width: 340px;} .countdown-box {display: inline-block; float: none; font-size: 11px; margin-top: 0;} .countdown-timer h2 {border: none;} .countdown-box {width: 60px;} .countdown-box span {font-size: 30px;} .countdown-text {padding-top: 5px;} .countdown-text p {font-size: 13px;} #footer {text-align: center;} .footer-nav {line-height: 3;} .footer-logo {background-position: center top !important; margin-bottom: 30px;} .thrive-links {float: none; text-align: center;} } /* Media Queries Small / Phone */ @media only screen and (max-width: 479px) { .home.section .section-text {padding-top: 10%;} .home.section {padding-bottom: 110%;} .home.section img {max-height: 530px;} .home.section.open .img-left {margin-left: -100px;} .home.section.open .img-right {margin-right: -150px;} .enews-bar .medium-1.small-2.columns.text-right {display: none;} .enews-bar .medium-10.small-10.medium-pull-1.columns.callout-bar-text {width: 100%;} .enews-bar h3.enews-title {font-size: 16pt;} .enews-callout #broadcastemail_signup_form {margin: 2px 0px 4px 0px;} } /* Media Queries Smaller / Phone */ @media only screen and (max-width: 319px) { } /* ------------------------ Height Based Media Queries ------------------------- */ @media only screen and (max-height: 550px) { .stuck {position: relative; overflow: hidden;} } /* begins: blog css copied from metroymcas.org */ .blog .filters select {display:inline-block; width:auto; min-width:180px; margin:0;} .blog .filters #filter-blog {color:#fff; text-decoration:none; font-weight:700; text-transform:uppercase; padding:8px; border-radius:6px; margin-top: 0px; position: relative;} .blog .item {background:#FAFAFA; border:1px solid #efefef; display:flex; flex-flow:row; margin:0 0 20px; border-radius:8px; overflow:hidden; min-height:185px;} .blog .item .image {width:20%; border-right:5px solid #ddd; position:relative;} .blog .item .image a {position:absolute; top:0; right:0; bottom:0; left:0;} .blog .item .content {width:80%; padding:20px;} .blog .item .content h3 {margin:0; line-height:1.2;} .blog .item .content h3 a {text-decoration:none;} .blog .item .content .category {margin:0; font-size:14px;} .blog .item .content .blurb {line-height:1.5rem; max-height:4.5rem; overflow:hidden; position:relative; padding-right:20px;} .blog .item .content .blurb:before {position:absolute; content:'...'; bottom:0; right:0;} .blog .item .content .blurb:after {position: absolute; content:''; right: 0; width: 1em; height: 1em; margin-top: 0.2em; background: #fafafa;} .blog .item .content .blurb p {line-height:1.5rem; margin:0;} .blog .item .content .author {margin:0;} .blog.detail .image {margin-bottom:20px;} .blog.detail .image .caption {margin:0; font-size:14px; font-style:italic;} .blog.detail .author {margin: 0 0 10px; margin: -10px 0 15px; font-size: 11px; font-weight: 600;} .blog.detail #addcomment_section {background:#fafafa; padding:30px; margin-bottom:25px;} .blog.detail #addcomment_section .formButtons {text-align:center; margin-top:25px} .blog.detail #addcomment_section .formButtons a { padding-top: 0.7rem; padding-right: 1.5rem; padding-bottom: 0.7425rem; padding-left: 1.5rem; background:#f47920; color:#fff; text-transform:uppercase; font-weight:700; text-decoration:none; border-radius:6px; } .blog.detail .comment {margin:20px 0;} .blog.detail .comment .info {font-style:italic; color:#818181;} .blog.detail .comment .info .author {font-size:inherit;} .blog.embedded {display:flex; flex-flow:row wrap;} .blog.embedded hr {width:100%;} .blog.embedded h2 {width:100%;} .blog.embedded .item {min-height:0; width:calc(50% - 20px); position:relative;} .blog.embedded .item:nth-child(odd) {margin-right:10px;} .blog.embedded .item:nth-child(even) {margin-left:10px;} .blog.embedded .item .image {width:30%;} .blog.embedded .item .content {width:70%; padding:15px;} .blog.embedded .item .content h3 {font-size:22px;} .blog.embedded .item:hover .content h3{color:#dd5828;} .blog.embedded .item .content .category {color:#f47920; text-decoration:underline;} .blog.embedded .item a {position:absolute; top:0; bottom:0; left:0; right:0;} @media only screen and (max-width: 640px) { .blog.embedded {margin-bottom:30px;} .blog.embedded .item {width:100%;} .blog.embedded .item:nth-child(odd) {margin-right:0;} .blog.embedded .item:nth-child(even) {margin-left:0;} } /* ends: blog css copied from metroymcas.org */ /* ModuleBegin::commerce */ .shoppingAlert { color: red; font-size: 8pt; } .shoppingBody { font-size: 8pt; } .shoppingCartEvenRow { background-color: #ffffff; color:#002d62; } .shoppingCartOddRow { background-color: #ebebeb; color:#002d62; } .shoppingCartTableHeader { background-color: #002d62; color: #ffffff; font-size: 8pt; font-weight: bold; } .shoppingForm { font-size: 8pt; color:#002d62; } .shoppingFormQuantity { background-color: #ffffff; font-size: 8pt; } .shoppingFormRequired { font-size: 8pt; font-weight: bold; color:#002d62; } .shoppingFormRequired input, .shoppingFormRequired select { font-weight: normal; color:#000; } .shoppingHeading { color:#002d62; } .shoppingInStock { } .shoppingItemHeading { } .shoppingOutOfStock { color: #dd0000; } .shoppingLowStock { } .shoppingTable { background-color: #e8e8e8; color:#002d62; } .shoppingTableBorder { background-color: #ffffff; } .shoppingFormRequired { width: 1%; } /* ModuleEnd::commerce */ /* ModuleBegin::documents */ .documentsModule.moduleLister { } .documentsModule.moduleLister table { border: 1px solid #ccc; padding: 3px; } .documentsModule .rowOdd { } .documentsModule .rowEven { background: #eee; } .documentsModule td, .documentsModule th { padding: 3px 10px; } .documentsModule th { border-bottom: 2px solid #ddd;} /* ModuleEnd::documents */ /* ModuleBegin::forum */ .frame{padding:10px;border:1px dashed #ccc;margin:10px 0px;} .frame table{width:100%;text-align:center;margin-bottom:0;} .frame th{font-family:Georgia,serif;font-style:italic;color:#000;font-size:11px;padding:0px 3px;font-weight:bold;background-color: #ccc;height:25px;border-right:1px solid white;} .frame td{border-top:1px solid #fff;border-right:1px solid #fff;background-color:#fff;} .frame tr{background-color:#f1f1f1;} .frame .category td{background-color:#fff;font-weight:bold;font-size:12px;text-align:left;} .frame .message{padding:10px 10px 20px 10px;font-size:12px;text-align:left;} .frame .messageLabel{width:150px;font-weight:bold;text-align:left;vertical-align:top;padding:10px;} .frame .topic{text-align:left;font-weight:bold;padding-left:10px;} .frame .rowUnread{background-color:#eee;} .frame .rowUnread td{background-color:#eee;} .frame .rowEven{background-color:#dedede;} .frame .rowEvenUnread{background-color:#FFF2CF;} .frame .rowOddUnread{background-color:#FFE9AF;} .seperator td{background-color:silver;height:6px;} .backtotop{text-align:left;} .title{font-weight:bold;text-align:left;padding-left:10px;} .blurb{font-size:11px;text-align:left;padding-left:10px;padding-bottom:5px;} .post .date{font-size:9px;} .messageHeader{border-bottom:1px solid #ccc;height:18px;width:99%;margin-bottom:10px;} .messageHeader .date{float:left;font-size:9px;} .messageHeader .subject{color:darkblue;float:left;padding-left:10px;font-size:9px;font-weight:bold;} .messageHeader .number{float:right;} .tagSearch{background-color:yellow;font-weight:bold;} .tagCode{background-color:black;color:white;font-family:monospace;border:1px inset white;padding:10px;margin:10px 30px;font-size:12px;} .tagQuote{background-color:white;color:black;border:1px inset black;padding:10px;margin:10px 30px;font-size:12px;} .tagCode a{color:white;font-weight:bold;} .buttonBar td{background-color:#eee;padding:10px;} #freedomForum .bar,.pagesFrame{height:20px;} #freedomForum .bar .button{float:right;margin-left:3px;} .button{font-weight:bold;} .breadcrumb{font-weight:bold;padding:5px 0px;float:left;} .header .pagesFrame{margin-top:10px;} .footer .pagesFrame{margin-bottom:10px;} #freedomForum .footer {margin-top:0;} .pagesFrame .prevnextCurrent, .pagesFrame .prevnextWindow { padding:3px 5px; border-left: 1px solid #cccccc; } .pagesFrame .prevnextCurrent{ font-weight:bold; } .pages{float:right;} .pages div{float:left;} .prevGroup,.prev,.next,.nextGroup{padding:3px 5px;} .prevGroup,.nextGroup{background-color:#F1F1F1;} /*.prev,.next{background-color:#dedede;}*/ .pagesLister{padding:3px 0px;} #freedomForum.layouterror .frame {border:0px solid #0F0;margin:20px;} /* ModuleEnd::forum */ /* ModuleBegin::newsfeed */ .newsfeedListWrapper { } .newsfeedNumber { } .newsfeedTitle { } .newsfeedSource { } .newsfeedDetailWrapper { } .newsfeedDetailWrapper .newsItem {border-bottom:1px solid #ccc; margin-bottom:10px;padding-bottom:10px;} .newsfeedDetailWrapper .newsItem img {margin:0 10px 0 0;} .newsfeedDetailWrapper .newsItem span {display:block;} .newsfeedDetailWrapper .newsItem .newsListHeadline {font-size:120%;} .newsfeedDetailWrapper .newsItem .newsListPublishline {font-size:90%;} /* ModuleEnd::newsfeed */