/*
CTC Separate Stylesheet
Updated: 2020-11-10 11:22:24
*/





/**************************
ELEMENTOR ADDONS
 */
:root{
    --distance-small: 60px;
}

.smallFadeSlideLeft{
    animation-name: smallFadeSlideLeft;
}
@keyframes smallFadeSlideLeft {
    0% {
        transform: translateX(calc(-1 * var(--distance-small))); /* -1 * is to work in FF */
        opacity: 0;
    }
    100% {
        transform: translateX(0);
        opacity: 1;
    }
}

.smallFadeSlideRight{
    animation-name: smallFadeSlideRight;
}
@keyframes smallFadeSlideRight {
    0% {
        transform: translateX(var(--distance-small));
        opacity: 0;
    }
    100% {
        transform: translateX(0);
        opacity: 1;
    }
}

.smallFadeSlideUp{
    animation-name: smallFadeSlideUp;
}
@keyframes smallFadeSlideUp {
    0% {
        transform: translateY(var(--distance-small));
        opacity: 0;
    }
    100% {
        transform: translateY(0);
        opacity: 1;
    }
}
.smallFadeSlideDown{
    animation-name: smallFadeSlideDown;
}
@keyframes smallFadeSlideDown {
    0% {
        transform: translateY(calc(-1 * var(--distance-small)));
        opacity: 0;
    }
    100% {
        transform: translateY(0);
        opacity: 1;
    }
}


/*------------------------------- */
/*
Add angled-columns class to a section.
Place content into an inner section for proper rotation
 */
@media (min-width: 1025px){
    .angled-columns { overflow: hidden }
    .angled-columns > .elementor-container .elementor-column{
        transform: skewX(-15deg)
    }
    .angled-columns  .elementor-inner-section{
        transform: skewX(30deg);
    }
}