/*
Theme Name: Whiteball Custom Theme
Theme URI: https://emphasisthemes.com/caramelx
Author: Thinktank
Author URI: https://emphasisthemes.com
Description: CaramelX - The Premium WooCommerce theme you need.
Tested up to: 5.9
Requires PHP: 5.6
License: GNU General Public License v3 or later
License URI: LICENSE
Text Domain: rkeytect
Tags: blog,news,custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.
*/

/*******************************************
* === CUSTOM CSS ===
** Use this file to add your custom styling.
********************************************/

.has-animation {
    position: relative;
}
.has-animation p, .has-animation img, .has-animation a{
    opacity: 0;
}
.has-animation.animate-in p, .has-animation.animate-in img, .has-animation.animate-in a {
    animation: textHidden 0.4s 0.8s forwards;
}
.has-animation.animate-in:before, .has-animation.animate-in:after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    z-index: 10;
}
.has-animation.animate-in:before {
    background-color: #000;
}
.has-animation.animate-in:after {
    background-color: #0c9fb0;
    animation-delay: 0.4s;
}
.has-animation.animation-ltr.animate-in:before {
    animation: revealLTR 0.7s ease;
}
.has-animation.animation-ltr.animate-in:after {
    animation: revealLTR  0.7s 0.9s ease;
}
.has-animation.animation-rtl.animate-in:before {
    animation: revealRTL 0.7s ease;
}
.has-animation.animation-rtl.animate-in:after {
    animation: revealRTL 1s 0.4s ease;
}

@keyframes revealRTL {
    0% {
        width: 0;
        right: 0;
    }
    65% {
        width: 100%;
        right: 0;
    }
    100% {
        width: 0;
        right: 100%;
    }
}
@keyframes revealLTR {
    0% {
        width: 0;
        left: 0;
    }
    65% {
        width: 100%;
        left: 0;
    }
    100% {
        width: 0;
        left: 100%;
    }
}
@keyframes textHidden {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}
.c9Sep{
    position: relative;
}
.c9Sep:after{
    content: '';
    position: absolute;
    top: 41%;
    display: inline-block;
    margin-left: 10px;
    height: 1px;
    border: 2px dotted #000;
    right: 15px;
    width: 45%;
}
.c9Sep:before{
    content: '';
    position: absolute;
    top: 41%;
    display: inline-block;
    margin-right: 10px;
    height: 1px;
    border: 2px dotted #000;
    left: 15px;
    width: 45%;
}
@media all and(max-width: 768px){
    .first-image{
        width: 100% !important;
    }
}

.clxSlider__Item{
    position: relative;
}
.clxSlider__Item a{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom : 0;
}