@keyframes scale {
   0% {
      opacity: 0;
      transform: scale(1);
   }
   100% {
      opacity: 1;
      transform: scale(1.1);
   }
}   

@keyframes scale-revert {
   0% {
      opacity: 1;
      transform: scale(1.1);
   }
   100% {
      opacity: 0;
      transform: scale(1);
   }
}  

@keyframes fadeInLeft {
   0% {
      opacity: 0;
      transform: translateX(-20px);
   }
   100% {
      opacity: 1;
      transform: translateX(0);
   }
}   

.slider-full-width .heroe-title{ 
   -webkit-animation-delay: 0s;
   animation-delay: 0s;
   -webkit-animation-name: fadeInLeft;
   animation-name: fadeInLeft;
   -webkit-animation-duration: 1.5s;
   animation-duration: 1.5s;
   -webkit-animation-fill-mode: both;
   animation-fill-mode: both; 
}

.slider-full-width .heroe-subtitle{
   animation-delay: 0.5s;
   -webkit-animation-name: fadeInLeft;
   animation-name: fadeInLeft;
   -webkit-animation-duration: 1.5s;
   animation-duration: 1.5s;
   -webkit-animation-fill-mode: both;
   animation-fill-mode: both; 
}

.slider-full-width{
   overflow: hidden;
   height: 100%;
   background-color: var(--color-F4F5F7);
   position: fixed;
   top: 0;
   left: 0;
   right: 0;
}

.slider-full-width img{
   opacity: 0;
   position: absolute;
   z-index: 0;
   height: 100%;
}

.slider-full-width img.scale{
   position: absolute;
   animation-delay: 0s;
   -webkit-animation-name: scale;
   animation-name: scale;
   -webkit-animation-duration: 5s;
   animation-duration: 5s;
   -webkit-animation-fill-mode: forwards;
   animation-fill-mode: forwards; 
}

.slider-full-width img.scale-revert{
   position: absolute;
   animation-delay: 0s;
   -webkit-animation-name:  scale-revert;
   animation-name: scale-revert;
   -webkit-animation-duration: 5s;
   animation-duration: 5s;
   -webkit-animation-fill-mode: forwards;
   animation-fill-mode: forwards; 
}

#Slider.slider{
   position: relative;
   overflow: hidden;
   max-width: 100%;
}

#Slider.slider,
#Slider.slider .slider-list {
   width: 1000px;
   max-width: 100%;
}

.slider-list .slider-item{
   width: 100%;
}

.slider-list .slider-item img{
   width: 100%;
   height: 100%;
   object-fit: cover;
}

@media screen and (max-width: 767px) {
   .slider-full-width img{
     object-fit: cover;
   }

   .slider-list .slider-item img{
      max-width: 500px;
      height: 375px;
   }

   #Slider.slider,
   #Slider.slider .slider-list {
      width: 500px;
      height: 375px;
      max-width: 100%;
   }
}

.slider-list{
   position: relative;
}

.slider-list .slider-item {
   position: absolute;
   height: 100%;
}

.control-slider{
   width: 100%;
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
}

.advancement-slider{
   width: 100%;
   position: absolute;
   bottom: 0;
   font-weight: bold;
   background-color: #ffffff91;
}

.previous-direction,
.next-direction  {
   cursor: pointer;
   background-color: var(--color-2E5580);
   padding: 10px 15px;
   color: white;
}

.thumbnail-slider{
  overflow-x: auto;
   white-space: nowrap;
}

.thumbnail-list{
   width: max-content;
}

/*.thumbnail-slider::-webkit-scrollbar {
   display: none;
}*/

.thumbnail-slider {
  scrollbar-width: none;     /* Firefox */
}

.thumbnail-slider::-webkit-scrollbar {
  display: none;             /* Chrome, Edge, Safari */
}

.thumbnail-item{
   width: 108px;
   height: 81px;
}
  
.thumbnail-slider img{
   width: 100%;
   height: 100%;
   object-fit: cover;
   cursor: pointer;
}

.thumbnail-slider .thumbnail-item:not(.active) img{
   border: none;
}

.thumbnail-slider .thumbnail-item:not(.active){
   opacity: 0.5;
}

.thumbnail-slider .thumbnail-item.active img{
   border: 1px solid black;
}

.thumbnail-slider .thumbnail-item.active{
   opacity: 1;
}