/* Divider Styles */
/* Sample HTML: 
    <div class="divider divider-orange-fade"></div>
*/
.text-center .divider {
    margin-left: auto;
    margin-right: auto;
}

.divider {
    height: 7px; 
    border-radius: 4px;
    width: 100px;
    margin-top: 15px;
    margin-bottom: 25px;
}

.divider-orange-fade {
    background: rgb(255,172,18);
    background: linear-gradient(270deg, rgba(255,172,18,0) 0%, rgba(255,172,18,1) 100%);
}

.divider-blue {
    background: var(--blue);
}

/* Info Box */
/* Sample HTML: 
    <div class="info-box m-t-md">
        <i>i</i> Subscription Information
    </div>
*/
.info-box {
    vertical-align: middle;
    font-style: italic;
    padding-left: 40px;
    position: relative;
    margin-bottom: 15px;
}

.info-box i {
    background-color: var(--blue);
    width: 29px;
    height: 29px;
    line-height: 29px;
    vertical-align: middle;
    text-align: center;
    color: var(--white);
    display:inline-block;
    border-radius: 100%;
    font-weight: bold;
    margin-right: 5px;
    position: absolute;
    left: 0px;
    top: 1px;
}

/* Hero Section */
/* Sample HTML: 
    <section class="hero bg-darkgrey" style="background-image: url(./assets/image/hero-bg.jpg);">
        <div class="container">
            <div class="row center-vertically mobile-col-space-xl">
                <div class="col col-6 col-text">
                    ... Content ...
                </div>
                <div class="col col-6 col-img">
                    <div class="image-wrap">
                        <img class="radius-md" src="assets/image/tennis-player-down.png" alt="Hero Image"  />
                        <div class="hover-text">
                            <h3>... Content ...</h3>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
*/
.hero .col-img .image-wrap {
    position: relative;    
}
.hero .col-img .image-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.hero .col-img .image-wrap .hover-text {
    position: absolute;
    bottom: 15%;    
    width: 100%;
    padding:40px;
    background-color: rgba(0,0,0,.5);
}

/* Image Overflow */
/* Sample HTML: 
    <section class="image-overflow">
        <div class="container bg-darkgrey radius-md">
            <div class="row ">
                <div class="col col-7 col-text">
                    <div class="p-md m-lg radius-md bg-white">
                        ... Content ...
                    </div>
                </div>
                <div class="col col-5 col-img">
                    <img src="assets/image/cut-out-player.png" />
                </div>
            </div>
        </div>
    </section>
*/
.image-overflow {
    margin-top:140px;
}

.image-overflow .col-img {
    padding-bottom:0px;
    position: relative;
}

.image-overflow .col-img img {
    max-height: 130%;
    position: absolute;
    bottom:0px;
}


/* Image Overflow */
/* Sample HTML: 
    <section class="image-overflow">
        <div class="container bg-darkgrey radius-md">
            <div class="row ">
                <div class="col col-7 col-text">
                    <div class="p-md m-lg radius-md bg-white">
                        ... Content ...
                    </div>
                </div>
                <div class="col col-5 col-img">
                    <img src="assets/image/cut-out-player.png" />
                </div>
            </div>
        </div>
    </section>
*/
.two-col-right-bg-img .col-text .text{
    margin-right: -100px;
    position: relative;
    z-index: 1;
}
.two-col-right-bg-img .col-img {
    padding: 0px;
}
.two-col-right-bg-img .col-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}


/* Service Tables */
/* Sample HTML: 
    <section class="service-tables">
            <div class="container">
            ... Content ...
            </div>
    </section>            
*/
.service-tables {
    background: var(--darkgrey);
    background: linear-gradient(180deg, var(--darkgrey) 50%, var(--forest) 50%);
}

/* Feature Section */
/* Sample HTML: 
        <section class="two-col-callouts">
            <div class="container">
                <div class="row">
                    <div class="col col-6">
                        <ul>
                            <li>... Content ...</li>
                            <li>... Content ...</li>
                        </ul>
                    </div>
                    <div class="col col-6">
                        <ul>
                            <li>... Content ...</li>
                            <li>... Content ...</li>
                        </ul>
                    </div>
                </div>
            </div>
        </section>          
*/
.two-col-callouts ul {
    margin: 0px;
    padding: 0px;
    list-style: none;
}

.two-col-callouts ul li {
    margin: 0px;
    background-color: rgba(0,135,205,.15);
    padding: 15px 20px;
    color: var(--white);
    margin-bottom: 15px;
    border-radius: var(--radius-sm);
    display: flex;
}
.two-col-callouts ul li::before {
    content: "●"; 
    color: green; 
    display: inline-block;
    width: 1.1em; 
    margin-right: 5px;
    font-size: 1.4em;
}

/* Feature Callout */
/* Sample HTML: 
    <section class="feature-list">
        <div class="container">
            <div class="row">
                <div class="col col-6 m-b-md">
                    <div class="callout">
                        <h5>Match Scheduling</h5>
                        <ul>
                            <li>... Content ...</li>
                            <li>... Content ...</li>
                        </ul>
                    </div>
                </div>
                <div class="col col-6 m-b-md">
                    <div class="callout">
                        <h5>'League Wizard'</h5>
                        <ul>
                            <li>... Content ...</li>
                            <li>... Content ...</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </section>
*/
.callout {
    margin: 0px;
    background-color: rgba(0,135,205,.15);
    padding: 15px 20px;
    color: var(--white);
    margin-bottom: 15px;
    border-radius: var(--radius-sm);
}


/* Testimonials */
/* Sample HTML: 
    <section class="testimonials bg-white">
        <div class="container">
            <div class="testimonial-slider">
                <div class="testimonial">
                    <p>... Testimonial ...</p>
                    <h5>... Name ...</h5>
                    <p>... Company ...</p></div>
                <div class="testimonial">
                    <p>... Testimonial ...</p>
                    <h5>... Name ...</h5>
                    <p>... Company ...</p></div>
                </div>
               
            </div>
        </div>
    </section>
*/
.testimonials {
    border-top: 2px solid var(--lime);
    border-bottom: 2px solid var(--lime);
}

.testimonials .testimonial-slider {
    width: calc(100% - 50px);
    margin: auto;
}

.testimonials .testimonial-slider .testimonial {
    width: 50%;
    text-align: center;
    padding: 50px;
}
.testimonials .testimonial-slider .testimonial h5 {
    font-size: 22px;
    margin-bottom: 0px;
    font-weight: 600;
    margin-top: 45px;
}
.testimonials .testimonial-slider .testimonial p {
    margin-top: 0px;
}

.testimonials .testimonial-slider .slick-next::before, 
.testimonials .testimonial-slider .slick-prev::before {
    color: var(--darkgrey);
    font-size: 28px;
}

.testimonials .testimonial-slider .slick-next::after, 
.testimonials .testimonial-slider .slick-prev::after {
    display: none;
}

/* Loading Modal */
/* Sample HTML: 
    <div id="loading-modal">
        <div class="loading-modal-inner bg-white radius-md p-xl">
            <div class="text-center m-b-md">
                <h4>Please Wait</h4>
            </div>
            <div class="spinner"></div>
        </div>
    </div>
*/
#loading-modal {
    position: fixed;
    top:0px;
    bottom:0px;
    left:0px;
    right:0px;
    z-index: 50;
    display: flex;
    vertical-align: middle;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,.3) ;
}

/**************************** Mobile Styles *****************************/

@media (max-width: 900px) {

    .two-col-right-bg-img .col-text .text {
        margin: 20px;
    }

    .image-overflow {
        margin-top: 50px;
    }

    .image-overflow .col-img img {
        position: static;
        margin: auto;
        max-height: 40vh;
        margin: auto;
        display: none;
    }
    
}