/******** contenuti live *******/

.bg-live{
	background-image: url('../../img/bg-delta.png');
	background-position: 50%;
	background-repeat: no-repeat;
	background-size: cover;
}

.social .btn.rounded-circle {
    height: 60.6px;
    width: 60.6px;
    line-height: 32px;
    padding: .85rem;
    font-size: 1.5rem;
}

.bg-social{
	background-image: url('../../img/bg-social2.jpg');
	background-position: 50%;
	background-repeat: no-repeat;
	background-size: cover;
}

.bg-social > .container{
	padding-top: 2rem;
	padding-bottom: 2rem;
	
}

.text-shadow{
	text-shadow: 0px 3px 5px #000000;
}

.badge.text-bg-info {
  color: #06c !important;
  background-color: #F2F7FC !important;
  font-weight: 400 !important;
  font-size: 16px !important;
}

.video-container {
  border-radius: 40px;
  overflow: hidden;
}

.video-container iframe {
  width: 100%;
  height: 100%;
  aspect-ratio: 16 / 9;
}

.video-container-shorts {
  border-radius: 40px;
  overflow: hidden;
}

.video-container-shorts iframe {
  width: 100%;
  height: 100%;
  aspect-ratio: 9 / 16;
}

/****** GALLERY CAROUSEL ******/
.my-carousel {
  margin: 2rem auto;
  position: relative;
}

.my-carousel .mycarousel-wrapper {
  overflow: hidden;
}

.my-carousel .mycarousel-track {
  display: flex;
  transition: transform 0.5s ease;
  will-change: transform;
  position: relative;
}

.my-carousel .mycarousel-item {
  flex-shrink: 0;
  padding: 0 0.5rem;
  width: 100%; /* Usa il 100% per il carosello */
  cursor: pointer;
}

/* > 768px: 2 elementi */
@media (min-width: 992px) {
  .my-carousel .mycarousel-item {
    width: 50%; /* Aumenta la larghezza degli item a 50% per schermi più grandi */
  }
 
  
}

.my-carousel .card {
  margin: 0 0.5em;
  background: transparent !important;
  border: none;
}

/* Pulsanti */
.my-carousel .mycarousel-btn,
.foto-gallery-btn {
  background: transparent;
  border: none;
  font-size: 2em;
  cursor: pointer;
  z-index: 5;
  color: #fff;
}

.my-carousel .mycarousel-btn:hover,
.foto-gallery-btn:hover {
  opacity: 1;
}

.my-carousel .mycarousel-btn.prev,
.foto-gallery-btn.prev {
  left: 10px;
}

.my-carousel .mycarousel-btn.next,
.foto-gallery-btn.next {
  right: 10px;
}

/* Indicatori */
.my-carousel .mycarousel-indicators,
.foto-gallery-indicators,
.modal-indicators {
  display: flex;
  gap: 10px;
  z-index: 5;
  padding: 0 30px;
  margin-top: 13px;
}

.my-carousel .mycarousel-indicators button,
.foto-gallery-indicators button {
  border: none;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  cursor: pointer;
  background-color: #fff;
  user-select: none;
}

.modal-indicators button {
  border: none;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  cursor: pointer;
  background-color: #7e7d7d;
  user-select: none;
}

.my-carousel .mycarousel-indicators button.active,
.foto-gallery-indicators button.active,
.modal-indicators button.active {
  background-color: #B84BB4;
  opacity: 1;
}

.my-carousel.shorts-carousel .mycarousel-item {
  flex: 0 0 calc(100% / 6); /* verrà sovrascritto da media query se serve */
  max-width: calc(100% / 6);
  box-sizing: border-box;
}

@media (max-width: 1199px) and (min-width: 992px) {
  .my-carousel.shorts-carousel .mycarousel-item {
    flex: 0 0 calc(100% / 4);
    max-width: calc(100% / 4);
  }
}

@media (max-width: 991.98px) {
  .my-carousel.shorts-carousel .mycarousel-item {
   flex: 0 0 calc(100% / 2);
    max-width: calc(100% / 2);
  }
}

/*** foto gallery ***/
	.foto-gallery-wrapper {
      overflow: hidden;
    }

   .foto-gallery-track {
     display: flex;
     transition: transform 0.4s ease;
     will-change: transform;
   }

   .foto-gallery-item {
     flex-shrink: 0;
     padding: 0 0.5rem;
     width: 100%;
     cursor: pointer;
   }

   /* >=768px: 2 elementi */
    @media (min-width: 768px) {
    
     .card-foto {
	    height: 400px !important;
	}
   }
     
   @media (min-width: 992px) {
     .foto-gallery-item {
       width: 50%;
     }
   }

   /* >=1400px: 3 elementi */
   @media (min-width: 1400px) {
     .foto-gallery-item {
       width: 33.3333%;
     }
   }
   
   .mycarousel-btn:disabled,
   .foto-gallery-btn:disabled {
     opacity: 0.5 !important;
     cursor: not-allowed;
   }
   
   #galleryModal .btn-close {
    --bs-btn-close-color: #fff;
   }

.card-foto{
	height: 280px;	
	border-radius: 40px;
}

.card-foto .img-fit {
	width: 100%;
    height: 100%;
    object-fit: cover;
}

.card-foto .card-img-overlay {
    position: absolute;
    top: initial;
    right: 0;
    bottom: 28px;
    left: 0;
    background: #326897E5;
    overflow: hidden;
    border-radius: 0;
}

.card-foto .card-img-overlay .card-title{
	font-size: 1.2rem;
}

#galleryModal {
    z-index: 999999;
}

#galleryModal .foto-gallery-btn {
	color: #7e7d7d;
}

#galleryModal .foto-gallery-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}


#galleryModal .img-fit {
	width: 100%;
    height: 100%;
    object-fit: fill;
}

.img-sm{
	max-width: 200px;
	height: auto;
}