/* Elementor Horizontal Scroller Override
- add class slide-infinite to wrapper element for a horizontal slider
if more than 6 results have to be displayed */
/*
.slide-infinite .elementor-grid-6 .elementor-grid,
.slide-infinite .elementor-grid-5 .elementor-grid, .elementor-grid-5 .elementor-grid {
    grid-template-columns: unset!important; 
    display: flex;
}
*/

.horizontale .elementor-grid {
    grid-template-columns: unset!important; 
    display: flex;
}

.elementor-widget-wrap .elementor-element.elementor-widget__width-auto, .elementor-widget-wrap .elementor-element.elementor-widget__width-initial {
    max-width: unset!important;
}

/*Horizontal scroll styling*/

/*****************************/
/* "horizontale" class need to be added directly to column where "Posts" component is implemented*/
.horizontal-carousel-container .horizontale .elementor-posts-container {
    /*--grid-column-gap: 1rem;
    --grid-row-gap: 1.25rem;*/
}

.horizontal-carousel-container .horizontale article {
  /*max-width: calc(100vw - 2rem);*/
  max-width: calc(100vw - 2rem);
  width: 20rem;
}

.horizontal-carousel-container .horizontale > div > div > div {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
  width: -webkit-max-content;
  width: -moz-max-content;
  width: max-content;
}

.horizontal-carousel-container .horizontale > div > .elementor-section {
  min-width: -webkit-max-content;
  min-width: -moz-max-content;
  min-width: max-content;
}

.horizontal-carousel-container .elementor-element.elementor-widget__width-auto, .horizontal-carousel-container .elementor-element.elementor-widget__width-initial {
  max-width: unset;
}

/* Change to unset to have the normal cursor */
.horizontal-carousel-container .horizontale > div {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;
  overflow-x: scroll;
  -webkit-overflow-scrolling: touch;
  -ms-overflow-style: -ms-autohiding-scrollbar;
  cursor: -webkit-grab;
  cursor: grab; 
}

/* Change to 6px to make the scrollbar smaller, or to 0 to remove it */
.horizontal-carousel-container .horizontale > div::-webkit-scrollbar{
  height: 6px; 
}

/* Color of scrollbar track */
.horizontal-carousel-container .horizontale > div::-webkit-scrollbar-track{	
  background: rgba(255, 255, 255, .3);
	border-radius: 7px;
} 

.horizontal-carousel-container.dark .horizontale > div::-webkit-scrollbar-track{	
  background: rgba(152, 152, 152, .3)!important;
	border-radius: 7px;
} 


/* Color of scrollbar thumb */
.horizontal-carousel-container .horizontale > div::-webkit-scrollbar-thumb{
  background: rgba(255, 255, 255, 1);
	border-radius: 7px; width: 6px;
}

.horizontal-carousel-container.dark .horizontale > div::-webkit-scrollbar-thumb{
  background: rgba(152, 152, 152, 1)!important;
}

/*.horizontal-carousel-container .horizontale > div.active {*/
/* cursor: grabbing; /* Change to unset to have the normal cursor when mouse button is clicked down */
/*  cursor: -webkit-grabbing; *//* idem */
/*  -webkit-transform: scale(1);*/
/*      -ms-transform: scale(1);*/
/*          transform: scale(1); /* Size of elements when mouse button is clicked down */
/*}*/

/* Prevents clicking on links while navigating left or right */
.horizontal-carousel-container .noclick                                         {pointer-events: none;}

/* Media query */
@media (max-width:1024px){
.horizontal-carousel-container .horizontale > div > .elementor-section          {min-width: 100vw;}
}
@media (max-width:1200px){
.horizontal-carousel-container .elementor-grid-tablet-2 .elementor-grid         {-ms-grid-columns: (1fr)[6];
                                                                                grid-template-columns: repeat(6,1fr);}
}
@media (min-width:768px) and (max-width:1199px){
    .horizontal-carousel-container .horizontale .elementor-grid-item            {width: 16rem;}
}

/* MOBILE STYLES */

@media (max-width: 1260px)                                                      {.hide-mobile {display: none;}}

/* HOVER EFFECTS */
.hover-rotate                                                                   {transition: .2s ease;}
.hover-rotate:hover                                                             {transform: rotate(5deg);}