/*
Theme Name: click5 Interactive Theme
Theme URI: https://www.click5interactive.com/
Author: click5 Interactive
Author URI: https://www.click5interactive.com/
Description: click5 Interactive WordPress Theme
Version: 3.0.10.006
*/

:root{
    --secondary-color: rgb(217,17,54);
    --tertiary-color: rgb(13,18,115);
    --accent-color: rgb(5,175,242);
    --lightGray-color: rgb(242,241,240);
    --darkGray-color: rgb(33,33,33);
    --headline-font: "acumin-pro", sans-serif;
    --body-font: "acumin-pro", sans-serif;
}

/* HEADER */

#header {
    width: 100%;
    background-color: #FFF;
    transition: all .3s;
}
#header.sticky {
    box-shadow: 0 15px 25px rgba(0, 0, 0, .05);
}

#header .bg-blue {
    background-color: #0D1273;
}

#header .phone a,
#header .links a {
    display: inline-block;
    color: #FFF;
    font-size: 14px;
    font-weight: 400;
    line-height: 100%;
    letter-spacing: 0;
    text-transform: uppercase;
    padding: 15px 15px 16px 15px;
    margin: 0;
}
#header .phone a i {
    position: relative;
    font-size: 12px;
    top: -1px;
    transform: rotate(270deg);
}
#header .phone a:hover,
#header .links a:hover {
    text-decoration: none;
    background-color: #d91136;
}

#header .logo svg {
    width: 100%;
    max-width: 300px;
    transition: all .3s;
}

.cls-1, 
.cls-3 {
    fill: #0D1273;
}
.cls-1, 
.cls-2 {
    fill-rule: evenodd;
}
.cls-2 {
    fill: #d91136;
}
.cls-5 {
    fill: #0D1273;
}

/* HERO */

#hero {
    position: relative;
    height: 720px;
    padding-top: 100px;
    background-color: #05AFF2;
    z-index: 9;
}
#hero::before {
    content: "";
    display: block;
    width: 100%;
    height: 170px;
    background-color: #FFF;
    clip-path: polygon(100% 0%, 0% 100%, 100% 100%);
    position: absolute;
    bottom: -1px;
    left: 0;
    z-index: 4;
}

#hero h2 {
	font-weight: 700;
    padding: 0;
}
#hero p {
    color: #FFF;
    padding: 13px 0 42px 0;
    margin: 0;

}
#hero span {
    color: #FFF;
}

#hero .photo {
    position: relative;
}
#hero .photo > * {
    max-width: unset;
    position: absolute;
    top: 20%;
    z-index: 4;
}
#hero .photo svg {
    max-width: 350px;
    max-height: 350px;
}
#hero.program .photo img {
    top: 0;
    max-height: 640px;
}


/* BUTTON */

.button {
    display: inline-block;
    height: 51px;
    color: #FFF;
    font-size: 18px;
    font-weight: 500;
    line-height: 50px;
    letter-spacing: 0;
    text-transform: uppercase;
    text-decoration: none !important;
    padding: 0 20px;
    margin: 0;
    background-color: #d91136;
    border: 0;
    cursor: pointer;
}
.button:hover {
    color: #FFF;
    text-decoration: none;
    background-color: #0476D9 !important;
}

/* ABOUT */

#about .headline h1 {
    padding: 0 0 40px 0;
}

#about .content p {
    padding: 0 0 40px 0;
    margin: 0;
}

#about .video-box > div {
    display: block;
    width: 100%;
    height: 330px;
    background-size: cover;
    background-position: center;
}

/* REVIEWS */

.home #reviews,
.page-template-default #reviews {
    padding-top: 0;
}
#tab-content + #reviews {
    padding-top: 80px;
}

#reviews .container {
    position: relative;
}
#reviews .row {
    position: relative;
    z-index: 9;
}

#reviews .headline h3 {
    padding: 0 0 25px 0;
}

#reviews .quote {
    width: 170px;
    position: absolute;
    z-index: 1;
    left: 11%;
    top: 10%;
}
#reviews .quote svg * {
    fill: #bbe2f4;
}

#reviews .slick-list {
    width: 730px;
    margin: 0 auto;
}
#reviews .slick-track {
    display: flex !important;
}

#reviews .review {
    height: inherit !important;
    text-align: center;
}
#reviews .review p.content,
#reviews .review p.overview {
    margin: 0;
}
#reviews .review p.overview {
    font-weight: 700;
}

#reviews .stars {
    margin-top: 30px;
}
#reviews .stars svg {
    height: 25px;
}

/* SERVICES */

#services .headline h2 {
    padding: 0 0 30px 0;
}

#services .service {
    margin-top: 30px;
}
#services .service a {
    text-align: center;
}
#services .service a:hover {
    text-decoration: none;
}

#services .service svg {
    margin-bottom: 15px;
    height: 150px;
    margin-top: 2em;
    width: auto;
}
#services .service svg * {
    transition: all .3s;
}
#services .service a:hover svg g, 
#services .service a:hover svg g *:not([fill="#D91136"]):not([fill='#0FDBF2']):not([fill*="#FFF"]) {
    fill: #c9cad2;
}

#services .service h4 {
    padding: 0;
    transition: all .3s;
}
#services .service a:hover h4 {
    color: var(--accent-color);
    text-decoration: none;
}

/* CLUB */

#club {
    position: relative;
    background-color: #49abee;
	padding-top: 40px;
}
.page-template-program #club {
    padding-top: 160px;
}

#club::before {
    content: "";
    display: block;
    width: 100%;
    height: 170px;
    background-color: #FFF;
    clip-path: polygon(100% 0, 0 0, 100% 100%);
    position: absolute;
    top: -1px;
    left: 0;
}

#club .content h2 {
    color: #FFF;
    font-weight: 600;
    padding: 0 0 15px 0;
}
#club .content p {
    color: #FFF;
    padding: 0 0 40px 0;
    margin: 0;
}

/* BOXES */

#boxes .blog .box {
    padding: 45px;
    background-image: url('img/icons/icon-dot-pattern.jpg');
    background-repeat: repeat;
    background-size: 6%;
}
#boxes .blog .box h2 {
    padding: 0 0 20px 0;
    margin: 0 0 25px 0;
    border-bottom: 1px solid #e5e5e5;
}
#boxes .blog .box h4 {
    color: #0D1273;
    font-size: 33px;
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: 0;
    padding: 0 0 0px 0;
    margin: 0;
}
#boxes .blog .box span,
#blog .content span {
    display: block;
    color: #1b1b1b;
    font-size: 22px;
    font-weight: 400;
    font-style: italic;
    line-height: 100%;
    letter-spacing: 0;
    padding: 10px 0 20px 0;
    margin: 0;
}
#boxes .blog .box p {
    padding: 0 0 40px 0;
    margin: 0;
}

#boxes .newsletter {
    flex-grow: 1;
}
#boxes .newsletter .box {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    padding: 5% 10%;
    background-color: var(--tertiary-color);
}
#boxes .newsletter .box h2 {
    color: #FFF;
    padding: 0 0 15px 0;
}
#boxes .newsletter .box p {
    color: #FFF;
    padding: 0 0 40px 0;
    margin: 0;
}

/* LOCATIONS */

#locations {
    background-color: var(--tertiary-color);
}
.home #locations,
.page-template-program #locations {
    background-color: var(--secondary-color);
}
#red-box {
    background-color: var(--secondary-color);
}

#red-box .content h4 {
    color: #FFF;
    padding: 0;
}
#locations .content h2,
#red-box .content h3 {
    color: #FFF;
    padding: 0 0 15px 0;
}
#locations .content p,
#red-box .content p,
#red-box .content li {
    color: #FFF;
    padding: 0 0 40px 0;
    margin: 0;
}
#red-box .content li {
    padding-bottom: 0;
}
.home #locations .button,
.page-template-program #locations .button,
#red-box .button {
    background-color: var(--tertiary-color);
}

/* BLOG */

#blog {
    background-color: var(--secondary-color);
    background-position: right center;
    background-size: auto 100%;
    background-repeat: no-repeat;
}
#blog.blog {
    position: relative;
    padding-top: 200px;
    margin-top: -170px;
    z-index: 9;
}
#blog.blog::before {
    content: "";
    display: block;
    width: 100%;
    height: 170px;
    background-color: #05AFF2;
    clip-path: polygon(0 0, 0% 100%, 100% 0);
    position: absolute;
    top: -1px;
    left: 0;
    z-index: 4;
}

#blog .content a {
    display: block;
}
#blog .content a:hover {
    text-decoration: none;
}
#blog .content h3 {
    color: #FFF;
    font-size: 44px;
    font-weight: 600;
    padding: 0;
}
#blog .content span {
    color: #FFF;
}
#blog .content p {
    color: #FFF;
    margin-bottom: 40px;
}
#blog .content .button {
    background-color: var(--tertiary-color);
}

/* TABS */

#tabs .tab:first-of-type {
    padding-left: 15px;
}
#tabs .tab:last-of-type {
    padding-right: 15px;
}
#tabs .tab a {
    position: relative;
    display: inline-block;
    color: #0D1273;
    font-family: "acumin-pro-condensed",sans-serif;
    font-size: 19px;
    font-weight: 800;
    line-height: 100%;
    letter-spacing: 0;
    text-transform: uppercase;
    padding: 20px 40px;
    margin: 0;
    background-color: #efefef;
    border-right: 1px solid #868686;
}
#tabs .tab:last-of-type a {
    border-right: 0;
}
#tabs .tab a:hover {
    color: #1b1b1b;
    text-decoration: none;
}
#tabs .tab a.active {
    color: #1b1b1b;
    background-color: #dadada;
}
#tabs .tab a::before {
    content: "";    
    display: block;
    height: 50%;
    background-color: #efefef;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    transform: skewY(-5deg);
    transform-origin: 0 0;
    z-index: -1;
}
#tabs .tab a.active::before {
    background-color: #dadada;
}

#tab-content {
    background-color: #dadada;
}

/* CLUB BOXES */

#chart .box .value {
    padding: 15px 20px;
    background-color: var(--accent-color);
    border-left: solid 1px var(--accent-color);
    border-right: solid 1px var(--accent-color);
    border-top: solid 1px var(--accent-color);
    margin-top: -60px;
}
#chart .box .value p {
    color: #FFF;
    font-style: italic;
    margin: 0;
}

#chart .box .header {
    padding: 25px 20px;
    background-color: #f3f3f3;
}
#chart .box.best .header {
    background-color: #FFF;
    border-left: solid 1px var(--accent-color);
    border-right: solid 1px var(--accent-color);
}
#chart .box .header h4 {
    font-size: 22px;
    font-weight: 800;
    text-transform: uppercase;
    padding: 0;
}
#chart .box .header h2 {
    padding: 0;
}

#chart .box .content {
    padding: 30px 20px;
    background-color: #dadada;
}
#chart .box.best .content {
    background-color: rgba(43,133,219,0.12);
    border: solid 1px var(--accent-color);
}
#chart .box .content p,
#chart .box .content li {
    font-size: 14px;
}

/* PROMO */

.promo-box:nth-child(even) {
    background-color: var(--accent-color);
}

.promo-box .content h4 {
    color: #d91136;
    text-transform: uppercase;
    padding: 0;
}
.promo-box:nth-child(even) .content h4 {
    color: #FFF;
}
.promo-box .content h2 {
    padding-top: 0;
}
.promo-box .content p {
    margin-bottom: 40px;
}

/* GALLERY */

#page-gallery .box:nth-child(n+4) {
    margin-top: 40px;
}

#page-gallery .box a {
    display: block;
    height: 100%;
}
#page-gallery .box a:hover {
    text-decoration: none;
    background-color: #eee;
}

#page-gallery .box .photo {
    display: block;
    width: 100%;
    height: 160px;
    background-size: cover;
    background-position: center;
}

#page-gallery .box .content {
    height: calc(100% - 160px);
    padding: 25px 20px;
}
#page-gallery .box .content h3 {
    color: #0476D9;
    font-size: 22px;
    font-weight: 600;
    padding-top: 0;
}
#page-gallery .box .content .button {
    font-size: 14px;
}

/* ABOUT */

#about-history {
    background-color: var(--tertiary-color);
}
#about-history .content * {
    color: #FFF;
}
#about-history .content h2 {
    padding-top: 0;
}
#about-history .content p:last-of-type {
    margin-bottom: 0;
}

#about-club {
    background-color: var(--accent-color);
}

#about-timeline .timeline {
    display: flex;
    flex-direction: columnc;
}

#about-timeline .slick-list {
    max-width: 65%;
    margin: 0 auto;
    order: 2;
}

#about-timeline .timeline .photo img {
    max-width: 240px;
    padding-right: 30px;
}
#about-timeline .timeline .content h2 {
    font-weight: 700;
    line-height: 1;
    padding-top: 0;
}
#about-timeline .timeline .content p {
    margin-bottom: 0;
}

#about-timeline .slick-dots {
    position: relative;
    width: 100%;
    margin: 30px 0 40px 0;
    order: 1;
}
#about-timeline .slick-dots::before {
    content: "";
    display: block;
    width: 65%;
    height: 2px;
    margin: 0 auto;
    background: rgb(223,223,223);
    background: -moz-linear-gradient(90deg, rgba(223,223,223,0) 0%, rgba(223,223,223,1) 50%, rgba(223,223,223,0) 100%);
    background: -webkit-linear-gradient(90deg, rgba(223,223,223,0) 0%, rgba(223,223,223,1) 50%, rgba(223,223,223,0) 100%);
    background: linear-gradient(90deg, rgba(223,223,223,0) 0%, rgba(223,223,223,1) 50%, rgba(223,223,223,0) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#dfdfdf",endColorstr="#dfdfdf",GradientType=1);
    position: absolute;
    top: 45px; left: 0; right: 0;
}
#about-timeline .slick-dots li {
    margin: 0 20px;
}
#about-timeline .slick-dots button {
    width: auto;
    height: auto;
    text-align: center;
    border: 0;
    border-radius: 0;
}
#about-timeline .slick-dots button p {
    position: relative;
    color: #383838;
    font-size: 22px;
}
#about-timeline .slick-dots button p::after {
    content: "";
    display: block;
    width: 12px;
    height: 12px;
    margin: 5px auto 0;
    background-color: #FFF;
    border: 2px solid #0D1273;
    border-radius: 50%;
}
#about-timeline .slick-dots button:hover p::after {
    background-color: rgba(4,118,217,0.8);
    border-color: #0476D9;
}
#about-timeline .slick-dots .slick-active button p::after {
    background-color: #d91136;
    border-color: #d91136;
}

#about-timeline .slick-arrow {
    top: 60%;
}

/* PROGRAM */

#program-earn {
    background-color: #49abee;
}
#program-earn p {
    color: var(--tertiary-color);
    font-family: "acumin-pro-condensed",sans-serif;
    font-size: 24px;
    font-weight: 600;
    text-transform: uppercase;
}
#program-earn span {
    color: var(--tertiary-color);
    font-size: 18px;
    font-weight: 600;
    padding-top: 20px;
}

#program-videos .headline h2 {
    padding-top: 0;
}

#program-videos .video-box {
    margin-top: 30px;
}
#program-videos .video-box > div {
    display: block;
    width: 100%;
    height: 300px;
    background-size: cover;
    background-position: center;
}

/* CATEGORIES */

#index-wrapper .cats {
    padding-left: 30px;
}
#index-wrapper .cats ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
#index-wrapper .cats ul li {
    color: #1b1b1b;
    font-size: 16.5px;
    line-height: 1.6;
    margin-bottom: .5rem;
}
#index-wrapper .cats ul li a:hover {
    color: #0476D9;
    text-decoration: none;
}

/* GALLERY */

#gallery-content {
    background-color: var(--accent-color);
}
#gallery-content .content * {
    color: #FFF;
}

#gallery-photos .photo > div {
    display: block;
    width: 100%;
    height: 350px;
    margin-top: 20px;
    background-size: cover;
    background-position: center;
}

/* FOOTER */

#footer {
    background-color: #fcfcfc;
}

#footer .contact {
    position: relative;
    padding-top: 10px;
    padding-bottom: 10px;
}
#footer .contact::before,
#footer .menu::before {
    content: "";
    display: block;
    width: 1px;
    height: 100%;
    background-color: #05AFF2;
    position: absolute;
    top: 0; right: 0;
}
#footer .contact .box:not(:last-of-type) {
    margin-bottom: 10px;
}
#footer .contact .box a {
    color: #05AFF2;
    font-size: 18px;
    font-weight: 400;
    line-height: 1.6;
    letter-spacing: 0;
    padding: 0;
    margin: 0;
}
#footer .contact .box a:hover {
    color: var(--tertiary-color);
}
#footer .contact .box svg {
    height: 50px;
    padding-right: 25px;
    fill: #05AFF2;
}
#footer .contact .box:first-of-type svg {
    margin-top: 5px;
}

#footer .social-media {
    padding-top: 10px;
}
#footer .social-media svg {
    width: 50px;
    height: 50px;
    fill: #05AFF2;
}
#footer .social-media a:hover svg {
    fill: var(--tertiary-color);
}

/* SUBPAGES */

#hero.page {
    height: 550px;
    padding-top: 70px;
}
#hero.page.contact {
    height: 450px;
}

#hero.page h1 {
    font-size: 50px;
}

.entry-content > h1:first-child, 
.entry-content > h2:first-child, 
.entry-content > h3:first-child, 
.entry-content > h4:first-child, 
.entry-content > h5:first-child,
.entry-content > h6:first-child {
    padding-top: 0;
}

.entry-content p strong {
    font-weight: 700;
}
.entry-content p:last-of-type {
    margin-bottom: 0;
}

.entry-content img.aligncenter {
    display: block;
    height: auto;
    margin: 0 auto;
}
.entry-content img.alignright {
    float: right;
    margin-left: 30px;
    margin-bottom: 20px;
    margin-top: 20px;
}
.entry-content img.alignleft {
    float: left;
    margin-right: 30px;
    margin-bottom: 20px;
    margin-top: 20px;
}

.entry-content ul {
    list-style: none;
    padding-left: 20px;
}
.entry-content ul li {
    position: relative;
    line-height: 28px;
    padding-left: 25px;
    margin-top: 10px;
}
.entry-content ul li::before {
    content: "\f054";
    color: var(--main);
    font-family: "Font Awesome 5 Free";
    font-size: 10px;
    font-weight: 700;
    line-height: 32px;
    position: absolute;
    left: 0;
}

.entry-content ol {
    margin-left: 0;
}
.entry-content ol li {
    padding-left: 7px;
    margin-top: 5px;
}

.entry-content blockquote p {
    font-size: 20px;
    font-weight: 600;
    line-height: 36px;
    margin: 0;
}

hr {
    margin-top: 1rem;
    margin-bottom: 1rem;
    border-top: 2px solid rgb(227 93 104);
}

/* SITEMAP */

.sitemap_by_click5 h2::after {
    display: none;
}
.sitemap_by_click5 ul li a {
    text-decoration: none;
}
.sitemap_by_click5 ul li a:hover {
    text-decoration: underline;
}

/* WIDGETS */

#sidebar-area {
    position: relative;
    flex: 0 0 calc(33.333333% + 55px);
    max-width: calc(33.333333% + 55px);
    margin-right: -55px;
    margin-top: -65px;
    padding-left: 0;
    z-index: 4;
}
#sidebar-area::before {
    content: "";
    display: block;
    width: 60px;
    height: 100%;
    background-color: #FFF;
    position: absolute;
    top: 0; left: 0;
}
#sidebar-area > * {
    position: relative;
    z-index: 4;
}

#about .content p:first-child{
	padding-bottom: 0px;
}