/* CSS Document */
#videos {
  display:flex;
  justify-content:space-between;
  width:100%;
}
#videos_liste {
  width:38%;
  height:40vh;
  /*overflow-y:auto;*/
}
#videos_items {
  overflow-y:auto;
  height: 40vh;
}
#videos_player {
  width:60%;
  height:auto;
}
.video_item {
  padding:5px;
  border-bottom:1px dotted #999;
  display:block;
  cursor:pointer;
  transition:0.5s ease-out;
}
.video_item:hover, .video_item_actif {
 background-color: #8C1D40;
 color:#fff;
 border-bottom:1px dotted #fff;
}

.video_icon_source {
  float:right;
  width:16px;
  height:16px;
  background-size:cover;
}
.video_icon_source[source=equidia] {
  background-image:url('../images/icon_equidia.png');
}
.video_icon_source[source=youtube] {
  background-image:url('../images/icon_youtube.png');
}


#categories_videos {
    margin-bottom:10px;
    display:flex;
    gap:5px;
}

.categorie_video {
    display:block;
    padding:4px 8px;
    color:#fff;
    background-color: #434343;
    text-decoration:none;
}
.categorie_video:hover, .categorie_video_active {
    background-color: #8C1D40;
}

@media screen and (max-width: 800px) {

    
    #videos {
        display: block;
    }
   #videos_liste {
     width:100%;
     height:200px;
   }
   #videos_player {
     width:100%;
     height:400px;
   }  
   
   #categories_videos {
    margin:20px auto;
    width:100%;
    justify-content: center;
    
   }  

}