/*
 Theme Name:  Hughes Theme
 Theme URI:    https://hugheshajoca.com
 Description:  Hughes Child Divi 
 Author:       Chris Jones
 Author URI:   https://ggaglobal.com
 Template:     Divi
 Version:      1.0.0
*/

/*****Add any custom CSS below this line*****/





    /*-----------------------------------------------*/ 
    /*-----Scrolling Module Carousel by Divi Soup----*/ 
    /*-----------------------------------------------*/
    /*Carousel settings, adjust these values only*/
    :root {
        --ds-module-number: 22; /*Your TOTAL number of modules, so if you have 8 modules duplicated, this number should be 16*/
        --ds-columns-desktop: 6; /*The number of modules you want displayed at any one time on desktop*/
        --ds-columns-tablet: 4; /*The number of modules you want displayed at any one time on tablet*/
        --ds-columns-mobile: 2; /*The number of modules you want displayed at any one time on mobile*/
        --ds-speed-desktop: 30s; /*The speed you want your carousel to move on desktop (increase value for slower, decrease for faster)*/
        --ds-speed-tablet: 30s; /*The speed you want your carousel to move on tablet (increase value for slower, decrease for faster)*/
        --ds-speed-mobile: 30s; /*The speed you want your carousel to move on mobile (increase value for slower, decrease for faster)*/
    }
    /**************************************************/
    /*You do not need to edit anything below this line*/
    /**************************************************/
    /*Variables for desktop*/
    @media all and (min-width: 981px) {
        :root {
            --ds-column-width: auto;
            --ds-module-width: calc(100vw / var(--ds-columns-desktop));
            --ds-column-animation: calc(var(--ds-module-width) - (var(--ds-module-width) * 2));
            --ds-scroll-speed: var(--ds-speed-desktop);
        }
    }
    /*Variables for tablets*/
    @media all and (max-width: 980px) {
        :root {
            --ds-column-width: auto;
            --ds-module-width: calc(100vw / var(--ds-columns-tablet));
            --ds-column-animation: calc(var(--ds-module-width) - (var(--ds-module-width) * 2));
            --ds-scroll-speed: var(--ds-speed-tablet);
        }
    }
    /*Variables for mobile*/
    @media all and (max-width: 479px) {
        :root {
            --ds-module-width: calc(100vw / var(--ds-columns-mobile));
            --ds-scroll-speed: var(--ds-speed-mobile);
        }
    }
    /*Hide the row overflow*/
    .ds-carousel {
        overflow: hidden;
    }
    /*Define the grid and apply animation*/
    .ds-carousel .et_pb_column {
        display: grid;
        grid-template-columns: repeat(var(--ds-module-number), var(--ds-module-width));
        width: var(--ds-column-width);
        -webkit-animation: scroll var(--ds-scroll-speed) linear infinite;
        animation: scroll var(--ds-scroll-speed) linear infinite;
    }
    /*Apply the module width*/
    .ds-carousel .et_pb_module {
        width: var(--ds-module-width) !important;
    }
    /*Define the animation*/
    @-webkit-keyframes scroll {
        0% {
            -webkit-transform: translateX(0);
            transform: translateX(0);
        }
        100% {
            -webkit-transform: translateX(calc(var(--ds-column-animation) * (var(--ds-module-number) / 2)));
            transform: translateX(calc(var(--ds-column-animation) * (var(--ds-module-number) / 2)));
        }
    }
    @keyframes scroll {
        0% {
            -webkit-transform: translateX(0);
            transform: translateX(0);
        }
        100% {
            -webkit-transform: translateX(calc(var(--ds-column-animation) * (var(--ds-module-number) / 2)));
            transform: translateX(calc(var(--ds-column-animation) * (var(--ds-module-number) / 2)));
        }
    }
    /*Pause animation on hover*/
    .ds-carousel .et_pb_column:hover {
        -webkit-animation-play-state: paused;
        animation-play-state: paused;
    }
    /*-----------------------------------------------*/ 
    /*---End Scrolling Module Carousel by Divi Soup--*/ 
    /*-----------------------------------------------*/



 /*-----------------------------------------------*/ 
    /*-----Scrolling Module Carousel by Divi Soup----*/ 
    /*-----------------------------------------------*/
    /*Carousel settings, adjust these values only*/
    :root {
        --ds2-module-number: 14; /*Your TOTAL number of modules, so if you have 8 modules duplicated, this number should be 16*/
        --ds2-columns-desktop: 4; /*The number of modules you want displayed at any one time on desktop*/
        --ds2-columns-tablet: 2; /*The number of modules you want displayed at any one time on tablet*/
        --ds2-columns-mobile: 1; /*The number of modules you want displayed at any one time on mobile*/
        --ds2-speed-desktop: 30s; /*The speed you want your carousel to move on desktop (increase value for slower, decrease for faster)*/
        --ds2-speed-tablet: 30s; /*The speed you want your carousel to move on tablet (increase value for slower, decrease for faster)*/
        --ds2-speed-mobile: 30s; /*The speed you want your carousel to move on mobile (increase value for slower, decrease for faster)*/
    }
    /**************************************************/
    /*You do not need to edit anything below this line*/
    /**************************************************/
    /*Variables for desktop*/
    @media all and (min-width: 981px) {
        :root {
            --ds2-column-width: auto;
            --ds2-module-width: calc(100vw / var(--ds2-columns-desktop));
            --ds2-column-animation: calc(var(--ds2-module-width) - (var(--ds2-module-width) * 2));
            --ds2-scroll-speed: var(--ds2-speed-desktop);
        }
    }
    /*Variables for tablets*/
    @media all and (max-width: 980px) {
        :root {
            --ds2-column-width: auto;
            --ds2-module-width: calc(100vw / var(--ds2-columns-tablet));
            --ds2-column-animation: calc(var(--ds2-module-width) - (var(--ds2-module-width) * 2));
            --ds2-scroll-speed: var(--ds2-speed-tablet);
        }
    }
    /*Variables for mobile*/
    @media all and (max-width: 479px) {
        :root {
            --ds2-module-width: calc(100vw / var(--ds2-columns-mobile));
            --ds2-scroll-speed: var(--ds2-speed-mobile);
        }
    }
    /*Hide the row overflow*/
    .ds2-carousel {
        overflow: hidden;
    }
    /*Define the grid and apply animation*/
    .ds2-carousel .et_pb_column {
        display: grid;
        grid-template-columns: repeat(var(--ds2-module-number), var(--ds2-module-width));
        width: var(--ds2-column-width);
        -webkit-animation: scroll var(--ds2-scroll-speed) linear infinite;
        animation: scroll var(--ds2-scroll-speed) linear infinite;
    }
    /*Apply the module width*/
    .ds2-carousel .et_pb_module {
        width: var(--ds2-module-width) !important;
    }
    /*Define the animation*/
    @-webkit-keyframes scroll {
        0% {
            -webkit-transform: translateX(0);
            transform: translateX(0);
        }
        100% {
            -webkit-transform: translateX(calc(var(--ds2-column-animation) * (var(--ds2-module-number) / 2)));
            transform: translateX(calc(var(--ds2-column-animation) * (var(--ds2-module-number) / 2)));
        }
    }
    @keyframes scroll {
        0% {
            -webkit-transform: translateX(0);
            transform: translateX(0);
        }
        100% {
            -webkit-transform: translateX(calc(var(--ds2-column-animation) * (var(--ds2-module-number) / 2)));
            transform: translateX(calc(var(--ds2-column-animation) * (var(--ds2-module-number) / 2)));
        }
    }
    /*Pause animation on hover*/
    .ds2-carousel .et_pb_column:hover {
        -webkit-animation-play-state: paused;
        animation-play-state: paused;
    }
    /*-----------------------------------------------*/ 
    /*---End Scrolling Module Carousel by Divi Soup--*/ 
    /*-----------------------------------------------*/