/*
Theme Name: Divi Child
Template: Divi
Version: 20240530
Author: Perspectives Marketing
Author URI: https://perspectives.marketing
*/


/*CAROUSEL LOGOS CLIENTS*/
:root {
--ds-module-number: 50; /*Your TOTAL number of modules, so if you have 8 modules duplicated, this number should be 16*/
--ds-columns-desktop: 8; /*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}*/