/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Sep 20 2024 | 17:08:32 */
/*************** Variables ***************/
:root {
    /*Padding References*/
    --pad-h:clamp(25px,7.5vw, 120px);
    --pad-v:clamp(50px,8.4vw, 135px);
}

/*************** Fluid REM sizing ***************/
html {
    overflow-x: hidden;
    font-size: clamp(10px, 1vw, 15px);
}

/*************** Default Padding ***************/

.pad, .padw, .pads {
    padding:var(--pad-v) var(--pad-h);
}
.padh {
    padding:0 var(--pad-h);
}
.pad .e-con-inner {
    max-width:max(1200px, 80rem);
}
.pads .e-con-inner {
    max-width:70ch;
    text-wrap:pretty;
}
.padw .e-con-inner {
	max-width:max(1440px, 90rem);
}

/************ Readable Sections **********/
.readable .elementor-widget-container {
    max-width:70ch;
    margin:auto;
	text-wrap:pretty;
}

/****************************************************************************************************/

/*************** Fixes ***************/

/*prevent orphans*/
p {
    text-wrap: pretty;
}

/*remove space below last paragraph*/
p:last-child {
    margin-bottom:0;
}

/****************************************************************************************************/

/*************** Useful Styles ***************/

/***balance text [ .balance ] */
.balance, .balance p {
    text-wrap:balance; 
}

/***remove icons from icon lists [.no-icons ] */
.no-icons .elementor-icon-list-icon
{
    display:none;
}
.no-icons .elementor-icon-list-text {
    padding-left:0;
}


/*** Media Carousel as Background Fill [ .carousel-fill ] *********************/

/*Make sure it's behind any overlays and text and the relevant interactions are switched off*/
.carousel-fill {
    z-index:0;
    position:absolute;
    left:0;
    top:0;
    width:100%;
    height:100% !important;
}
.carousel-fill .elementor-swiper,.carousel-fill .elementor-main-swiper {
    height:100% !important;
}

/****************************************************************************************************/

/*EVENT DATES AND TIMES*/

/*CSS Settings to make dates display as intended*/

/*Custom Field Requirements:
    Make 2 Date Time Picker fields for 'start_date' and 'end_date' (these need to be the Field Names and be required)
    Make a Radio Button field for 'duration' (set to required, using 'duration' as field name) with the options:
        onedayall : All Day
        onedaytime : Single Day with Time Range
        multdayall : Date Range
        multdaytime : Date Range with Time
        custom : Custom Time Entry
    */

/*For the container that will have the dates inside it, add a CSS Class with the dynamic tag set to 'Post Custom Field' and use the Custom Key 'duration' (NOTE: If you use 'ACF Field' it won't work, has to be Post Custom Field)
    You need to have five texts with dynamic content pulling the dates in (2 for start, 2 for end, and 1 for custom)
    
    Set one start with the classes: 'showdate start' and the other to 'showtime start'
    
    Set one end with the classes 'showdate end' 'showtime end'
    And the custom one with the class 'custom'
    
    Will also need two n-dashes and a pipe as separate heading elements with the classes 'dash date' , 'dash time' , & 'dash pipe'
    
    NOTE: Because using Paste Style will also copy the classes, It's suggested to do all the styling first, or set all the elementor heading elements with the same HTML tag and do the styling through custom code */
    
/*Remove custom unless custom*/
.onedayall .showcustom, .onedaytime .showcustom, .multdayall .showcustom, .multdaytime .showcustom {
    display:none;
}
/*Remove others if Custom*/
.custom .showdate, .custom .showtime, .custom .dash {
    display:none;
}

/*All Day Events (class = onedayall)*/
.onedayall .showtime, .onedayall .showdate.end, .onedayall .dash {
    display:none;
}
/*Single Day with Time Range (class = onedaytime)*/
.onedaytime .showdate.end, .onedaytime .dash.date, .onedaytime .dash.pipe {
    display:none;
}
/*Date Range (class = multdayall)*/
.multdayall .showtime, .multdayall .dash.date, .multdayall .dash.pipe {
    display:none;
}
/*Date Range with Time Range (class = multdaytime) Reordered so that times are at the end*/
.multdaytime .showdate.start {
    order:1;
}
.multdaytime .dash.date {
    order:2;
}
.multdaytime .showdate.end {
    order:3;
}
.multdaytime .dash.pipe {
    order:4;
}
.multdaytime .showtime.start {
    order:5;
}
.multdaytime .dash.time {
    order:6;
}
.multdaytime .showtime.end {
    order:7;
}


/****************************************************************************************************/

/*************** Animation Fixes ***************/

/*Tutorial for how to make changes: https://www.youtube.com/watch?v=ocpROIh3nQo */

/*Duration Changes*/
/*Normal*/
.animated {
    animation-duration:800ms;
}
/*Slow*/
.animated-slow {
    animation-duration:1400ms;
}
/*Fast*/
.animated-fast {
    animation-duration:400ms;
}
/*FadeInUp*/
@keyframes pdsFadeInUp {
    from {
        opacity:0;
        transform: translate3d(0, 2rem, 0);
    }
    to {
        opacity:1;
        transform: none;
    }
}
.elementor-element .animated.fadeInUp {
    animation-name: pdsFadeInUp !important;
}

/*FadeInLeft*/
@keyframes pdsFadeInLeft {
    from {
        opacity:0;
        transform: translate3d(-2rem, 0, 0);
    }
    to {
        opacity:1;
        transform: none;
    }
}
.elementor-element .animated.fadeInLeft {
    animation-name: pdsFadeInLeft !important;
}
/*FadeInRight*/
@keyframes pdsFadeInRight {
    from {
        opacity:0;
        transform: translate3d(2rem, 0, 0);
    }
    to {
        opacity:1;
        transform: none;
    }
}
.elementor-element .animated.fadeInRight {
    animation-name: pdsFadeInRight !important;
}
/*FadeInDown*/
@keyframes pdsFadeInDown {
    from {
        opacity:0;
        transform: translate3d(0, -2rem, 0);
    }
    to {
        opacity:1;
        transform: none;
    }
}
.elementor-element .animated.fadeInDown {
    animation-name: pdsFadeInDown !important;
}
/*SlideInUp*/
@keyframes pdsSlideInUp {
    from {
        opacity:1;
        transform: translate3d(0, 2rem, 0);
    }
    to {
        opacity:1;
        transform: none;
    }
}
.elementor-element .animated.slideInUp {
    animation-name: pdsSlideInUp !important;
}