/*
Theme Name: Webe Communication
Template: hello-elementor
Author: Webe Communication
Tags: accessibility-ready,flexible-header,custom-colors,custom-menu,custom-logo,featured-images,rtl-language-support,threaded-comments,translation-ready
Version: 1.0.1715170314
Updated: 2024-05-08 12:11:54

*/

/* LANGUAGE SWITCHER CUSTOM */
.custom-switcher ul{ display: flex; flex-direction: row; gap:5px; }
.custom-switcher li{ list-style-type: "/"; color: #fff; padding: 0 7px; }
.custom-switcher li:first-child{ list-style-type: none; }
.custom-switcher span{ text-transform: capitalize; }
/* END LANGUAGE SWITCHER CUSTOM */

.square { position: relative; margin: 0 10px; width: 170px; height: 150px; display: flex; justify-content: center; align-items: center; margin:auto; }

.square .pulsante{color:#000; text-transform:uppercase; font-weight:500; font-family:"neue-haas-grotesk-display", Sans-serif; text-align: center; }
.square.white .pulsante{color:#fff; }
.square span:nth-child(1) { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: 32% 58% 69% 43% / 48% 32% 59% 55%; transition: 0.5s; }
.square span:nth-child(2) { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: 38% 62% 63% 37% / 41% 44% 56% 59%; transition: 0.5s; }
.square span:nth-child(3) { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: 30% 45% 74% 35% / 38% 56% 51% 87%; transition: 0.5s; }
.square span {border: 1px solid black;}
.square.white span {border: 1px solid #fff;}

.square span:nth-child(1){
    animation: animate1 20s linear infinite;
}
.square span:nth-child(2){
    animation: animate2 15s linear infinite;
}
.square span:nth-child(3){
    animation: animate 18s linear infinite;
}
.square:hover span:nth-child(1){
    animation: animate2 10s linear infinite;
}
.square:hover span:nth-child(2){
    animation: animate 3s linear infinite;
}
.square:hover span:nth-child(3){
    animation: animate2 6s linear infinite;
}

@keyframes animate {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

@keyframes animate2 {
    0% {
        transform: rotate(360deg);
    }
    100% {
        transform: rotate(0deg);
    }
}


@media (max-width:767px){
	.square.white {width:120px; height:100px;}
}