

  #coverLink4.rotating {
    animation: rotateVideo 55s linear infinite forwards, fadeInM 3s ;
  }

  #coverLink.rotating {
    animation: rotateVideo 5s linear infinite forwards, fadeInM 3s;
  } 
  #coverLink.rotating55 {
    animation: rotateVideo 55s linear infinite forwards, fadeInM 3s;
  } 

  #SpanDiCoverLink.rotating {
    animation: rotateVideo 55s linear infinite forwards, fadeInM 3s;
  } 
  #centroDelCerchio.rotating {
    animation: rotateVideoReverse 55s linear infinite forwards, fadeInM 3s;
    /* transform-origin: center center;  */
  } 

  @keyframes rotateVideo {
    from {
      transform: rotate(0deg);
    }
    to {
      transform: rotate(360deg);
    }
  }

  @keyframes rotateVideoReverse {
    from {
      transform: rotate(360deg);
    }
    to {
      transform: rotate(0deg);
    }
  }

  @keyframes rotateFast {
    from {
      transform: rotate(0deg);
    }
    to {
      transform: rotate(360deg);
    }
  }

  .rotatingFast {
    animation: rotateFast 5s linear infinite forwards, fadeInM 4s;
  }

  #centroDelCerchio {
      width: 125px; 
      height: 125px;
      background-color: #222;
      border-radius: 50%;
      border-style: solid;
      border-width: 7px;
      border-color: #d52643 green white #e8bdc4;
      position: absolute;
      top: 36%;
      left: 21.5%;
      /* transform: translate(-50%, -50%) rotate(0deg); */
      transform: translate(-50%, -50%);
      opacity: 0.9;
      z-index: 3;
  }

  .grayscale-contrast {
    filter: grayscale(100%) contrast(175%);
  }


  .switch {
    position: relative;
    display: inline-block;
    width: 40px; /* Ridotto da 50px a 40px */
    height: 20px; /* Ridotto da 24px a 20px */
  }
  .switch input { 
    opacity: 0;
    width: 0;
    height: 0;
  }
  .switch input:checked + .slider {
    background-color: #198754; /* Colore verde "success" di Bootstrap */
  }


  .slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    -webkit-transition: .4s;
    transition: .4s;
  }

  
  .slider:before {
    position: absolute;
    content: "";
    height: 12px; /* Ridotto da 16px a 12px */
    width: 12px; /* Ridotto da 16px a 12px */
    left: 4px;
    bottom: 4px;
    background-color: white;
    border-radius: 50%; /* Arrotondato */
    -webkit-transition: .4s;
    transition: .4s;
  }

  /* .slider:before {
    position: absolute;
    content: "";
    height: 16px;
    width: 16px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    -webkit-transition: .4s;
    transition: .4s;
  } */

  input:checked + .slider {
    background-color: #2196F3; /* Modificato colore */
  }
  input:focus + .slider {
    box-shadow: 0 0 1px #2196F3; /* Modificato colore */
  }
  input:checked + .slider:before {
    -webkit-transform: translateX(20px); /* Ridotto da 26px a 20px */
    -ms-transform: translateX(20px); /* Ridotto da 26px a 20px */
    transform: translateX(20px); /* Ridotto da 26px a 20px */
  }

  /* Rounded sliders */
  .slider.round {
    border-radius: 34px;
  }
  .slider.round:before {
    border-radius: 50%;
  }

