/*--------------------------------------------------------------

# Clientsmain

--------------------------------------------------------------*/

.clientsmain {

height: 30vh;

width: 100vw;

position: relative;

}

.d1 {

position: absolute;

background-image: url("../img/base/imagin-reflet-image-site-web-2.png");

/* background-size: 2700px 1500px; */

background-size: contain;

background-repeat: no-repeat;

height: 30vh;

width: 15vw;

background-position: 0 50%;

box-shadow: 0px 0px 25px rgba(0, 0, 0, 0.8);

top: 50%;

transform: translateY(-50%);

z-index: 2;

animation: dd1 10s ease-in-out infinite, dd12 10s ease-in-out infinite;

animation-delay: 4s, 14s;

}

.d2 {

position: absolute;

background-image: url();

background-size: 2700px 1500px;

height: 50vh;

width: 25vw;

background-position: -10vw 50%;

left: 10vw;

top: 50%;

transform: translateY(-50%);

z-index: 1;

animation: dd2 10s ease-in-out infinite;

animation-delay: 4s;

}

.d3 {

position: absolute;

background-image: url("../img/base/imagin-reflet-image-site-web-3.png");

/* background-size: 2700px 1500px; */

overflow: hidden;

height: 100vh;

width: 40vw;

left: 25vw;

box-shadow: 0px 0px 25px rgba(0, 0, 0, 0.8);

background-position: -35vw 50%;

top: 50%;

transform: translateY(-50%);

z-index: 3;

animation: dd3 10s ease-in-out infinite;

animation-delay: 4s;

}

.d4 {

position: absolute;

overflow: hidden;

background-image: url("../img/base/imagin-reflet-image-site-web-3.png");

/* background-size: 2700px 1500px; */

height: 80vh;

width: 25vw;

left: 60vw;

background-position: -70vw 50%;

top: 50%;

transform: translateY(-50%);

z-index: 1;

animation: dd4 10s ease-in-out infinite;

animation-delay: 4s;

}

@keyframes dd1 {

50% {

    width: 95vw;

}

}

@keyframes dd12 {

50% {

    background-position: Calc(-40vw) 50%;

}

}

@keyframes dd2 {

50% {

    background-position: Calc(-50vw) 50%;

}

}

@keyframes dd3 {

50% {

    background-position: Calc(-75vw) 50%;

}

}

@keyframes dd4 {

50% {

    background-position: Calc(-110vw) 50%;

}

}







/*--------------------------------------------------------------

# Clientsmain

---------------------------------------------------------------*/

.cssload-wrap {

display: flex;

display: -o-flex;

display: -ms-flex;

display: -webkit-flex;

display: -moz-flex;

box-pack: center;

-o-box-pack: center;

-ms-box-pack: center;

-webkit-box-pack: center;

-moz-box-pack: center;

justify-content: center;

-o-justify-content: center;

-ms-justify-content: center;

-webkit-justify-content: center;

-moz-justify-content: center;

box-align: center;

-o-box-align: center;

-ms-box-align: center;

-webkit-box-align: center;

-moz-box-align: center;

align-items: center;

-o-align-items: center;

-ms-align-items: center;

-webkit-align-items: center;

-moz-align-items: center;

perspective: 390px;

-o-perspective: 390px;

-ms-perspective: 390px;

-webkit-perspective: 390px;

-moz-perspective: 390px;

height: 50vh;

overflow: hidden;

}



.cssload-cssload-spinner {

position: relative;

transform-style: preserve-3d;

-o-transform-style: preserve-3d;

-ms-transform-style: preserve-3d;

-webkit-transform-style: preserve-3d;

-moz-transform-style: preserve-3d;

animation: cssload-wobble 4.59s ease-in-out infinite;

-o-animation: cssload-wobble 4.59s ease-in-out infinite;

-ms-animation: cssload-wobble 4.59s ease-in-out infinite;

-webkit-animation: cssload-wobble 4.59s ease-in-out infinite;

-moz-animation: cssload-wobble 4.59s ease-in-out infinite;

}



.cssload-cssload-spinner:before,

.cssload-cssload-spinner:after {

display: block;

content: ' ';

border-radius: 50%;

width: 288px;

height: 288px;

-webkit-clip-path: polygon(50% 0, 7% 26%, 7% 74%, 50% 100%, 93% 74%, 93% 26%, 83% 32%, 83% 69%, 50% 89%, 17% 69%, 17% 32%, 50% 12%, 83% 32%, 93% 26%);

clip-path: polygon(50% 0, 7% 26%, 7% 74%, 50% 100%, 93% 74%, 93% 26%, 83% 32%, 83% 69%, 50% 89%, 17% 69%, 17% 32%, 50% 12%, 83% 32%, 93% 26%);

animation: cssload-spin 1.73s ease-in-out infinite both reverse;

-o-animation: cssload-spin 1.73s ease-in-out infinite both reverse;

-ms-animation: cssload-spin 1.73s ease-in-out infinite both reverse;

-webkit-animation: cssload-spin 1.73s ease-in-out infinite both reverse;

-moz-animation: cssload-spin 1.73s ease-in-out infinite both reverse;

}



@media (max-width: 991px) {

    .cssload-wrap {

      height: 60vh;

    }

    .cssload-cssload-spinner:before,

    .cssload-cssload-spinner:after {

        width: 188px;

        height: 188px;

    }

}



.cssload-cssload-spinner:before {

background-color: #c00;

background: linear-gradient(to right, #ed3c0d, #c00);

position: absolute;

}



.cssload-cssload-spinner:after {

background-color: #000;

background: linear-gradient(to right, #768f9d, #000);

animation-delay: -0.86s;

-o-animation-delay: -0.86s;

-ms-animation-delay: -0.86s;

-webkit-animation-delay: -0.86s;

-moz-animation-delay: -0.86s;

}



@keyframes cssload-wobble {

0%,

100% {

    transform: rotateX(8.75deg) rotateY(35deg);

}

50% {

    transform: rotateX(35deg) rotateY(-35deg) rotate(180deg);

}

}



@-o-keyframes cssload-wobble {

0%,

100% {

    -o-transform: rotateX(8.75deg) rotateY(35deg);

}

50% {

    -o-transform: rotateX(35deg) rotateY(-35deg) rotate(180deg);

}

}



@-ms-keyframes cssload-wobble {

0%,

100% {

    -ms-transform: rotateX(8.75deg) rotateY(35deg);

}

50% {

    -ms-transform: rotateX(35deg) rotateY(-35deg) rotate(180deg);

}

}



@-webkit-keyframes cssload-wobble {

0%,

100% {

    -webkit-transform: rotateX(8.75deg) rotateY(35deg);

}

50% {

    -webkit-transform: rotateX(35deg) rotateY(-35deg) rotate(180deg);

}

}



@-moz-keyframes cssload-wobble {

0%,

100% {

    -moz-transform: rotateX(8.75deg) rotateY(35deg);

}

50% {

    -moz-transform: rotateX(35deg) rotateY(-35deg) rotate(180deg);

}

}



@keyframes cssload-spin {

0%,

100% {

    transform: translateZ(49px) rotateX(14deg);

}

33% {

    transform: translateZ(-49px) scale(0.4);

}

66% {

    transform: translateZ(-49px);

}

}



@-o-keyframes cssload-spin {

0%,

100% {

    -o-transform: translateZ(49px) rotateX(14deg);

}

33% {

    -o-transform: translateZ(-49px) scale(0.4);

}

66% {

    -o-transform: translateZ(-49px);

}

}



@-ms-keyframes cssload-spin {

0%,

100% {

    -ms-transform: translateZ(49px) rotateX(14deg);

}

33% {

    -ms-transform: translateZ(-49px) scale(0.4);

}

66% {

    -ms-transform: translateZ(-49px);

}

}



@-webkit-keyframes cssload-spin {

0%,

100% {

    -webkit-transform: translateZ(49px) rotateX(14deg);

}

33% {

    -webkit-transform: translateZ(-49px) scale(0.4);

}

66% {

    -webkit-transform: translateZ(-49px);

}

}



@-moz-keyframes cssload-spin {

0%,

100% {

    -moz-transform: translateZ(49px) rotateX(14deg);

}

33% {

    -moz-transform: translateZ(-49px) scale(0.4);

}

66% {

    -moz-transform: translateZ(-49px);

}

}