.splide video{
    width: 100%;
    
    
}
.splide video::-webkit-media-controls,.splide video::-moz-media-controls {
    display: none;
}
.videocontrols{
    display: none!important;
}
div.cookie-consent-replacement, div.cookie-consent-replacement div.container{
	position: absolute;
	inset: 0;
    width: 100%;
    /* height: 99%; */
}
div.cookie-consent-replacement div.container{
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: brown;
    z-index: 1000000000;
}
.carousel-container{
   	height: 100%;
}
 
#thumbnails-track{
    margin:0 10%;
}
#thumbnails ul{
    height: fit-content;
}
#splide-main {
    height: 100%;
    max-height: 550px;
    margin-bottom: 2rem;
  }
  #splide-main-list {
    max-height:530px!important ;
  }

 
  #splide-main #splide-main-track{
    max-height:550px;
    height: 100%;
  }
#thumbnails li {
    /* flex-basis: 200px; */
}
#thumbnails .splide__slide.is-active{
   opacity: 1;
}
#thumbnails .splide__slide{
    opacity: 0.3;
}
.slide__slide{
    position: relative;
}
.tile-container ul{
    list-style: none;
    display: flex;
    justify-content: flex-start;
    align-items: start;
    flex-wrap: wrap;
    gap: 3rem;
}
.tile-container{
    transition: opacity .5s linear, height .5s linear,width .5s linear;
}
.tile-container li.video-tile{
    flex-basis: 300px;
    position: relative;

}
.tile-container li.video-tile img:not(.svg-icon){
    width: 100%;
    height: 180px;
    object-fit: contain;

}
.image__container{
    position: relative;
}
.tile-container li.video-tile p{
    margin-top: 1rem;
    color: #112d66;
}
div.overlay{
    width: 100%;
    height: 100%;
    /* background-color: rgba(143, 140, 140,0.4); */
    background-color: transparent;
    position: absolute;
    top: 50%;
    left: 50%;
    font-size: 50px;
 
    transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 3px;
}

.svg-icon {
    top: 50%;
    position: absolute;
    left: 50%;
    transform: translate(-50%,-50%);
  }
div.overlay:hover:not(.svg-icon){
   background-color: transparent;
   transition: 0.2s ease-in-out opacity;
   cursor: pointer;
}
li.video-tile .svg-icon:hover{
    filter: drop-shadow(0 0 0.75rem #7d7476);
    opacity: 1;
}
li.video-tile  .svg-icon{
    width: 60px;
    height: 60px;
    z-index: 100;
    opacity: 0.6;
   
}

#splide-main .splide__slide {
	position: relative;
	padding-bottom: 56.25%;
	height: 0;
}

.splide__slide iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
div.close-event{
    position: relative;
}
div.close-event button.btn-close{
        position: absolute;
        top: 10px;
        right: 10px;
        z-index: 1024;
        background-color: red;
      
}
p.video-desc{
    position: absolute;
    top:10px;
    left:10px;
    background-color: #00AEC7;
    color: #fff;
    padding: .5rem;
    font-size: 1.7rem;
	transition: 300ms;
	border-radius: 10px;
}
p.video-desc.subtitle{
    top:65px;
}

.desc-hide {
	opacity: 0;
	transform: translateX(-100%);
}

.carousel-hide {
	visibility: hidden;
	opacity: 0;
	height: 0;
}

#thumbnails-list.splide__list {
    
	padding: 0;
	gap: 1rem;
}

#thumbnails-list.splide__list .splide__slide {
	flex: 0 0 ;
	flex-basis: calc(25% - 1rem);
	height: auto;
	background: none !important;
}

#thumbnails-list.splide__list .splide__slide img {
	display: block !important;
	width: 100%;
	height: auto;
}

.main-container {
	margin-bottom: 2rem;
}



@media (max-width: 1100px) {
    div.main-container{
       
        height: auto;
    }
    .tile-container li.video-tile {
        flex-basis: calc(50% - 1rem);
        position: relative;
      }
      .tile-container ul {
       
        justify-content: center;
        align-items: flex-start;
        flex-wrap: wrap;
        gap: 1rem;
    }
    .tile-container li.video-tile img:not(.svg-icon) {
       height: auto;
    }
}
@media (max-width: 900px) {
    div.main-container{
       
        height: auto;
    }
	#thumbnails-list.splide__list .splide__slide {
		flex-basis: calc(33.333%);
        border: 3px solid transparent;
        padding: .5rem;
	}
    #thumbnails-list.splide__list {
        padding: 0;
        gap: 0;
    }
}

@media (max-width: 600px) {

    div.main-container{
        
        height: auto;
    }
	#thumbnails-list.splide__list .splide__slide {
		flex-basis: calc(50%);
	}
    #thumbnails-list.splide__list {
        padding: 0;
        gap: 0;
    }
    

	#thumbnails-track {
        margin: 0 15%;
    }
    .tile-container li.video-tile {
        flex-basis: 100%;
    }
}

@media (max-width: 600px) {

    div.main-container{
        
        height: auto;
    }
}