/*
Theme Name: 	Clubforce
Description: 	A Zesty Theme
Version: 		staging 31078a3436b11866f5231f140a667f31fbef9fe0
Author: 		Zesty
Author URI: 	https://www.simplyzesty.com
Font:  Red Hat Display
*/

/* @import url('https://fonts.googleapis.com/css2?family=Red+Hat+Display:ital,wght@0,300;0,400;0,600;0,700;0,900;1,400&display=swap'); */


/* IF admin-bar exists pad whole site by 32px  */
html body.admin-bar  {
    margin-top:32px
}
html body.admin-bar header .wrapper-header {
    top:32px
}
html body.admin-bar header .header-padder {
    padding-top:46px;
}


html body main {
    min-height: 70vh;
}


.hero-override-bg-image {
    width:100%;
    height: calc(100% - (2rem) );
    position: absolute;
    top:0; left:0;
    z-index: 0 ;
    background-position:50%  33% ;
}


/** No screen needs the positioning - but doesn't get the ::before or ::after rules that .screen gets **/
.screen-img .no-screen {
    position: relative;
    border-radius: 12px;
    box-shadow: 0px 10px 40px 0px rgba(0, 0, 0, 0.1);
    padding: 0.9rem;
    background-color: #fff;
}

/* screen-img with video block */
.screen-img .video-block {
    margin-top:0;
}

.screen-img .video-block .video-player:hover {
    opacity: 1;
}
.screen-img .video-block .video-player:hover img {
    box-shadow: 0px 10px 40px 0px rgba(0, 0, 0, 0.3);
}


    /*padder rules*/
.wrapper-section.no-padding--bottom,
.wrapper-section.no-padding-bottom,
.wrapper-section.no-padder--bottom,
.wrapper-section.no-padder-bottom {
    padding-bottom: 0!important;
}


/**
override dashicons sizing
 */
.cta svg.cta_external{
    max-width:18px;
    max-height:18px;
    display:inline-block;
    color: inherit;
    position: relative;
    top: 3px;
    fill: #191176
}

/**
 WordPress generic Blocks styles like the Designs Blocks
 */

.wp-block-image:not(.is-style-rounded) > a, .wp-block-image:not(.is-style-rounded) img {
    border-radius: 12px;
}

.clubforce-map {
    box-shadow: 0px 10px 40px 0px rgba(0, 0, 0, 0.1);
    margin-bottom: 45px
}

    /** MODAL **/
.modal {
    position: fixed;
    width: 100vw;
    height: 100vh;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 200
}

.modal.open {
    visibility: visible;
    opacity: 1;
    transition-delay: 0s
}

.modal-bg {
    position: absolute;
    background: rgba(0, 0, 0, 0.8);
    width: 100%;
    height: 100%
}

.modal-container {
    border-radius: 12px;
    background: #fff;
    position: relative;
    padding: 2.5rem 3.5rem;
    width: 90vw;
    max-width: 700px;
    max-height: 90vh;
    overflow-y: scroll
}

.modal-close {
    position: absolute;
    right: 1rem;
    top: 1rem;
    appearance: none;
    color: #2050CE;
    background: none;
    border: 0px;
    cursor: pointer;
    font-size: 2rem
}

.modal .modal-title {
    font-family: "Red Hat Display", sans-serif;
    font-size: 1.75rem;
    color: #2050CE;
    font-weight: 700;
    margin-bottom: 1.5rem
}
/** END MODAL **/


/* BLOCK QUOTE class is-style-plain e.g For Singel CLienT Story **/


blockquote.is-style-plain::after {
    background: none !important;
    position: inherit;
    padding: 0;
    border: 0;
    margin: 0;
    border-radius: inherit;
}
blockquote.is-style-plain {
    background: none!important;
    position: inherit;
    padding: 0;
    border: 0;
    margin: 0;
    border-radius: inherit;
}
main .wysiwyg blockquote.is-style-plain,
main blockquote.is-style-plain {
    color: #191176;
    padding: 0;
    margin: 0 0 .5rem;
}
main .wysiwyg blockquote.is-style-plain p,
main blockquote.is-style-plain p{
    color: #191176;
    font-family: "Red Hat Display",sans-serif;
    font-weight: 700;
    font-size: 2rem;
    line-height: 1.4;
}
main .wysiwyg blockquote.is-style-plain cite,
main blockquote.is-style-plain cite {
    color: #191176;
    font-size: 1.5rem;
    font-style: normal;
    margin-bottom: 3rem;
}


/* Query Loop Cards **/
.wp-block-query ul.is-flex-container.wp-block-post-template {
    margin-left: 0!important;
}

ul.wp-block-post-template {
    list-style:none;
    background: none !important;
    box-shadow: none;
}
ul.wp-block-post-template:hover {
    box-shadow: none;
}

ul.wp-block-post-template li {
    display: block;
    background-color: #fff;
    border-radius: 12px;
    margin-bottom: 2.5rem !important;
    box-shadow: 0px 10px 40px 0px rgba(0,0,0,0.1);
    transition: transform .3s ease-out, box-shadow .3s ease-out;
}

ul.wp-block-post-template li div.content{
    position: relative;
    min-height: 220px;
    padding: 1.5rem 1.5rem 4rem;
}

ul.wp-block-post-template li div.content h2{
    font-family: "Red Hat Display",sans-serif;
    font-weight: 700;
    font-size: 1.625rem;
    line-height: 1.2;
    margin-bottom: .3rem;
}

ul.wp-block-post-template li div.content  p.wp-block-post-excerpt__excerpt {
    color: #191176;
    line-height: 1.4;
    font-size: 1.125rem;
}

ul.wp-block-post-template li div.content .cta {
    display: inline-block;
    position: absolute;
    left: 1.5rem;
    bottom: 2.25rem;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1;
    color: #191176;
}



ul.wp-block-post-template li div.content .cta::before {
    content: "\e902";
    font-family: "icomoon";
    font-weight: normal;
    font-size: .68rem;
    color: #01BBEA;
    margin-right: .5rem;
    vertical-align: bottom;
}

ul.wp-block-post-template li div.content::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    height: 16px;
    width: 100%;
    border-radius: 0 0 12px 12px;
    background: #2050ce;
    background: linear-gradient(93deg, #2050ce 0%, #40ffd3 100%);
}


ul.wp-block-post-template li figure {

}
ul.wp-block-post-template li figure a{

}
ul.wp-block-post-template li figure a img {
    object-fit: cover;
    object-position: center;
    height: 250px;
    width: 100%;
    border-radius: 12px 12px 0 0;
}
ul.wp-block-post-template li h2.wp-block-post-title {

}
ul.wp-block-post-template li a.wp-block-read-more {

}
/* End Query Loop Cards **/


/* Query Loop Pagination **/
nav.wp-block-query-pagination {}


nav.wp-block-query-pagination a.wp-block-query-pagination-previous,
nav.wp-block-query-pagination a.wp-block-query-pagination-next {
    font-family: 'icomoon' !important;
    color: #2050CE !important;
    max-width: 30px;
    display: inline-block;
    visibility: hidden;
    font-size: 0px;
border:0;
}
nav.wp-block-query-pagination a.wp-block-query-pagination-previous:hover,
nav.wp-block-query-pagination a.wp-block-query-pagination-next:hover {
    font-family: 'icomoon' !important;
    color: #191176 !important;
}

nav.wp-block-query-pagination a.wp-block-query-pagination-next::after,
nav.wp-block-query-pagination a.wp-block-query-pagination-previous::before{
display: inline-block !important;
    visibility: visible;
    font-size:1.1rem;
    line-height: 1;
}

nav.wp-block-query-pagination a.wp-block-query-pagination-previous::before{
    content: "\e906";

}
nav.wp-block-query-pagination a.wp-block-query-pagination-next::after{
    content: "\e904";

}


nav.wp-block-query-pagination div.wp-block-query-pagination-numbers{}


nav.wp-block-query-pagination div.wp-block-query-pagination-numbers span,
nav.wp-block-query-pagination div.wp-block-query-pagination-numbers a {
    display: inline-block;
    border-radius: 50%;
    background-color: #fff;
    font-size: 1.1rem;
    min-width: 36px;
    border: 1px solid #191176;
    color: #191176;
    transition: background-color .3s;
    padding: 0.1rem 0.65rem 0.3rem 0.65rem;
    text-align: center;
}

nav.wp-block-query-pagination div.wp-block-query-pagination-numbers a:hover {
    background-color: #191176;
    color:#fff;
}

nav.wp-block-query-pagination div.wp-block-query-pagination-numbers span.current{
    background-color: #191176;
    color: #fff;
}

nav.wp-block-query-pagination div.wp-block-query-pagination-numbers a.page-numbers{

}
/* End Query Loop Pagination **/



/* Featue Card sBuilt with Gutenberg Standard Blocks*/

.wp-block-columns .feature-card.feature-card--simple .img figure.wp-block-image img {
    border-radius: 12px 12px 0 0;
}





/* WP Blocks alignnone, alignwide, alignfull */
.wp-site-blocks,
body > .is-root-container,
.edit-post-visual-editor__post-title-wrapper,
.wp-block-group.alignfull,
.wp-block-group.has-background,
.wp-block-cover.alignfull,
.is-root-container .wp-block[data-align="full"] > .wp-block-group,
.is-root-container .wp-block[data-align="full"] > .wp-block-cover {
    padding-left: var(--wp--custom--spacing--outer);
    padding-right: var(--wp--custom--spacing--outer);
}

.wp-site-blocks .alignfull,
.wp-site-blocks > .wp-block-group.has-background,
.wp-site-blocks > .wp-block-cover,
.wp-site-blocks > .wp-block-template-part > .wp-block-group.has-background,
.wp-site-blocks > .wp-block-template-part > .wp-block-cover,
body > .is-root-container > .wp-block-group.has-background,
body > .is-root-container > .wp-block-cover,
body > .is-root-container > .wp-block-template-part > .wp-block-group.has-background,
body > .is-root-container > .wp-block-template-part > .wp-block-cover,
.is-root-container .wp-block[data-align="full"] {
    margin-left: calc(-1 * var(--wp--custom--spacing--outer)) !important;
    margin-right: calc(-1 * var(--wp--custom--spacing--outer)) !important;
    width: unset;
}

/* Blocks inside columns don't have negative margins. */
.wp-site-blocks .wp-block-columns .wp-block-column .alignfull,
.is-root-container .wp-block-columns .wp-block-column .wp-block[data-align="full"],
    /* We also want to avoid stacking negative margins. */
.wp-site-blocks .alignfull:not(.wp-block-group) .alignfull,
.is-root-container .wp-block[data-align="full"] > *:not(.wp-block-group) .wp-block[data-align="full"] {
    margin-left: auto !important;
    margin-right: auto !important;
    width: inherit;
}


/* WP Text Alignment */

.wysiwyg .has-text-align-center {
    text-align:center;
}
.wysiwyg .has-text-align-right {
    text-align:right;
}

@media (min-width: 600px) {
    .wp-block-post-template.is-flex-container.is-flex-container.columns-3 > li,
    .wp-block-query-loop.is-flex-container.is-flex-container.columns-3 > li {
        width: calc((100% / 3) - 1.9rem + (1.9rem / 3));
        max-width: 370px;
    }
}




/* Gutenberg Container widths */
/*body.single-post main p,*/
/*body.single-post main h1,body.single-post main h2,body.single-post main h3,body.single-post main h4,body.single-post main h5,body.single-post main h6,*/
main  .alignnone,
main   [class^="wp-block-"]:where(:not(.alignleft):not(.alignright):not(.wp-block-button)) {
    max-width: 900px; /* 900px as standard Body size :: var(--wp--custom--layout--contentSize) ?? */
    margin-left: auto !important;
    margin-right: auto !important;
}
main  .alignwide,
/*main  .alignwide p,*/
/*body.single-post main .alignwide h1,body.single-post main .alignwide h2,body.single-post main .alignwide h3,body.single-post main .alignwide h4,body.single-post main .alignwide h5,body.single-post main .alignwide h6,*/
main > .alignwide {
    max-width:1170px;
    margin-left: auto !important;
    margin-right: auto !important;
}
/**main > .alignfull p,
body.single-post main .alignfull h1,body.single-post main .alignfull h2,body.single-post main .alignfull h3,body.single-post main .alignfull h4,body.single-post main .alignfull h5,body.single-post main .alignfull h6,*/
main  .alignfull {
    max-width:none !important;;
}


/* Fix feature-container  if inside .wysiwyg*/
.wysiwyg .feature-container .logo-img img {
    border-radius:0;
    margin-bottom: unset;
    width: auto;
}


/** Custom button-like link at client request **/
a.inline-arrow{
    padding-right: 1.75rem;
    position: relative;
}
a.inline-arrow:after {
    content: "\e903";
    font-family: "icomoon";
    font-weight: normal;
    font-size: .55rem;
    position: absolute;
    right: 0.55rem;
    top: 0.6rem;
    color: inherit;
}


/** WP Buttons **/
.wp-block-button.btn-outline,
.wp-block-button.btn-arrow {
  position:unset;
  border: unset;
    padding: unset;
    border-radius: 0px;
    transition: none;
}
.wp-block-button.btn-outline:focus,
.wp-block-button.btn-outline:hover,
.wp-block-button.btn-arrow:focus,
.wp-block-button.btn-arrow:hover{
    background-color: transparent;
}


.wp-block-button.btn-arrow:after {
   display:none;
}

.wp-block-button.btn-outline a,
.wp-block-button.btn-arrow a {
    position: relative;
    display: inline-block;
    color: #2050CE;
    font-size: 1.125rem;
    font-weight: 600;
    line-height: 1;
    border: 2px solid #2050CE;
    padding: 1rem 2.75rem 1.15rem 1.375rem;
    border-radius: 30px;
    transition: .3s ease-out;
}

.wp-block-button.btn-outline a {
    padding: 1.15rem 1.375rem;
}

.wp-block-button.btn-outline a:focus,
.wp-block-button.btn-outline a:hover,
.wp-block-button.btn-arrow a:focus,
.wp-block-button.btn-arrow a:hover{
    background-color: #2050CE;
    color: #fff !important;
}

.wp-block-button.btn-arrow a::after {
    content: "\e903";
    font-family: "icomoon";
    font-weight: normal;
    font-size: .55rem;
    position: absolute;
    right: 1.25rem;
    top: 1.45rem;
}

/** BTN-Main **/

.wp-block-button.btn-main {
    position:unset;
    border: 0;
    padding: 0;
    border-radius: 0px;
    transition: none;
    background-color: transparent;
}
.wp-block-button.btn-main:focus,
.wp-block-button.btn-main:hover{
    background-color: transparent;
}

.wp-block-button.btn-main:after {
    display:none;
}

.wp-block-button.btn-main a {
    position: relative;
    display: inline-block;
    color: #191176;
    background-color: #40ffd3;
    font-size: 1.125rem;
    font-weight: 600;
    line-height: 1;
    padding: 1.15rem 2.75rem;
    border-radius: 30px;
    transition: .3s ease-out;
}
.wp-block-button.btn-main a:focus,
.wp-block-button.btn-main a:hover{
    background-color: #2050CE !important;
    color: #fff;
}

/** Override WebToffee Link style **/
footer ul.base-menu li a.cli_settings_button {
   color: #fff !important;
    background: #2050ce !important;
   text-decoration: none;
}


/** Fix Logo Carousel image containment on mobile view **/
/** MS Logo get cropped at all views **/
.logo-set--small .cell img {
    width: auto !important;
    height: auto !important;
    max-height:36px;
}

@media screen and (min-width: 40em) and (max-width: 63.9375em){
    main .logo-set--small .cell img {
        max-height: 30px;
    }
}

@media screen and (max-width: 39.9375em) {
    main .logo-set--small .cell img {
        max-height: 25px;
        max-width: 140px;
    }
}