body,html {width: 100%;height: 100%;}
h1,h2,h3,h4,h5,h6 {font-family: "Lato","Helvetica Neue",Helvetica,Arial,sans-serif;font-weight: 700;}
h1 em,h2 em,h3 em,h4 em,h5 em,h6 em {font-family: "Lato","Helvetica Neue",Helvetica,Arial,sans-serif;font-weight: 400; font-size:14px}

a.xs {
  color: #dddddd;
  text-decoration: none;
  padding: 4px 12px; /* padding constant pour éviter que ça bouge au hover */
  border-radius: 6px; /* coins arrondis */
  transition: background-color 0.3s ease, color 0.3s ease;
  border: 1px solid transparent;
 }

a.xs:hover {
  color: #ffffff;
  background-color: rgba(0, 0, 0, 1); /* fond noir semi-transparent */
  border: 1px solid #555555;
  text-decoration: none;
}

a.fluid {
width:100%; display:inline-block; 
}

a.inverse {
  color: #222;
  background-color: rgba(255, 255,255, 1); /* fond noir semi-transparent */
  border: 1px solid #222222;
  text-decoration: none;
}

table {
  background-color: rgba(0, 0, 0, 0.9);
  width:100%;
}

body { margin:0; padding:0;  -webkit-background-size: cover; background-size: cover; background-color:#eee;}
.cadre{ background-color:#DDD; border-radius:10px; -moz-border-radius:10px; -webkit-border-radius:10px;}

.progress {
    margin-bottom: 0px;
}

.navbar-default {
  background-image: url('');
background-color: transparent;
background-size: 0px;

  border-radius: 0px;
  -webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,.15),0 1px 5px rgba(0,0,0,.075);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.15),0 1px 5px rgba(0,0,0,.075);
}

.panel {
  background-color: transparent;
}

.panel-default {
  border-color: #222;
  background-color: rgba(0, 0, 0, 0.8); /* Fond noir à 50% de transparence */
}

.panel-default > .panel-heading {
  color: #fdfdff;
  background-color: rgba(0, 0, 0, 0.5); /* Fond noir à 50% pour le header aussi */
  border-color: #111;
  background-image: none; /* tu avais url(); => on le neutralise ici */
}

.panel-footer {
  background-color: rgba(0, 0, 0, 0.5); /* Fond noir transparent aussi */
  border-top: 1px solid #111;
  border-bottom-right-radius: 3px;
  border-bottom-left-radius: 3px;
}


.table-hover > tbody > tr > td.contact:hover,.table-hover > tbody > tr > th.contact:hover,.table-hover > tbody > tr.contact:hover > td {
	background-color: #ffdd67;  border-color: #ffdd67;}


.btn-contact {  color: #ffffff;  background-color: #698c00;  border-color: #a3d900;}

.btn-contact:hover,.btn-contact:focus,.btn-contact:active,.btn-contact.active,.open .dropdown-toggle.btn-contact {
	color: #ffffff;  background-color: #698c00;  border-color: #000000;}

.btn-contact:active,.btn-contact.active,.open .dropdown-toggle.btn-contact {  background-image: none;}

.btn-contact[disabled],
fieldset[disabled] .btn-contact,
.btn-contact.disabled:hover,
.btn-contact[disabled]:hover,
fieldset[disabled] .btn-contact:hover,
.btn-contact.disabled:focus,
.btn-contact[disabled]:focus,
fieldset[disabled] .btn-contact:focus,
.btn-contact.disabled:active,
.btn-contact[disabled]:active,
fieldset[disabled] .btn-contact:active,
.btn-contact.disabled.active,
.btn-contact[disabled].active,
fieldset[disabled] .btn-contact.active {  background-color: #f3ce01;  border-color: #f2b000;}

.btn-contact .caret{  border-top-color: #000000;}
.dropup .btn-contact .caret {  border-bottom-color: #000000;}
.label-contact {  background-color: #f3ce01;}
.label-contact[href]:hover,.label-contact[href]:focus {  background-color: #f4da00;}
.alert-contact {  color: #f4c800;  background-color: #ffdd67;  border-color: #ffdd67;}
.alert-contact hr {  border-top-color: #ffdd67;}
.alert-contact .alert-link {  color: #f2bb00;}
.progress-bar-contact {  background-color: #f3ce01;}

.progress-striped .progress-bar-contact {
  background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(255, 255, 255, 0.15)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.15)), color-stop(0.75, rgba(255, 255, 255, 0.15)), color-stop(0.75, transparent), to(transparent));
  background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
  background-image: -moz-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
  background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
}

.panel-contact {  border-color: #ffdd67;}
.panel-contact > .panel-heading {  color: #f4c800;  background-color: #ffdd67;  border-color: #ffdd67;}
.panel-contact > .panel-heading + .panel-collapse .panel-body {  border-top-color: #ffdd67;}
.panel-contact > .panel-footer + .panel-collapse .panel-body {  border-bottom-color: #ffdd67;}


.modal-content {
  color: #eeeeee;
  background-color: #000000;
  border: 1px solid #666;
  border: 1px solid rgba(200,200,200,.2);
  -webkit-box-shadow: 0 3px 9px rgba(255,255,255,.5);
  box-shadow: 0 3px 9px rgba(255,255,255,.5);
}

.panel.panel-warning {
  position: relative;
  overflow: hidden;
  border-color: #333; /* ou autre si tu veux une bordure plus nette */
}

.panel.panel-warning::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background-color: rgba(0, 0, 0, 0.8); /* noir à 70 % */
  z-index: 0;
}

.panel.panel-warning > * {
  position: relative;
  z-index: 1;
}

.text-orange {  color: #FF8A03;}
.table > thead > tr > td.orange,
.table > tbody > tr > td.orange,
.table > tfoot > tr > td.orange,
.table > thead > tr > th.orange,
.table > tbody > tr > th.orange,
.table > tfoot > tr > th.orange,
.table > thead > tr.orange > td,
.table > tbody > tr.orange > td,
.table > tfoot > tr.orange > td,
.table > thead > tr.orange > th,
.table > tbody > tr.orange > th,
.table > tfoot > tr.orange > th {
  background-color: #ffdd67;  border-color: #ffdd67;}

.table-hover > tbody > tr > td.orange:hover,.table-hover > tbody > tr > th.orange:hover,.table-hover > tbody > tr.orange:hover > td {
	background-color: #ffdd67;  border-color: #ffdd67;}


.btn-orange {  color: #ffffff;  background-color: #FF8A03;  border-color: #ffa64c;}

.btn-orange:hover,.btn-orange:focus,.btn-orange:active,.btn-orange.active,.open .dropdown-toggle.btn-orange {
	color: #ffffff;  background-color: #ffa64c;  border-color: #FF8A03;}

.btn-orange:active,.btn-orange.active,.open .dropdown-toggle.btn-orange {  background-image: none;}

.btn-orange.disabled,
.btn-orange[disabled],
fieldset[disabled] .btn-orange,
.btn-orange.disabled:hover,
.btn-orange[disabled]:hover,
fieldset[disabled] .btn-orange:hover,
.btn-orange.disabled:focus,
.btn-orange[disabled]:focus,
fieldset[disabled] .btn-orange:focus,
.btn-orange.disabled:active,
.btn-orange[disabled]:active,
fieldset[disabled] .btn-orange:active,
.btn-orange.disabled.active,
.btn-orange[disabled].active,
fieldset[disabled] .btn-orange.active {  background-color: #f3ce01;  border-color: #f2b000;}

.btn-orange .caret{  border-top-color: #000000;}
.dropup .btn-orange .caret {  border-bottom-color: #000000;}
.label-orange {  background-color: #f3ce01;}
.label-orange[href]:hover,.label-orange[href]:focus {  background-color: #f4da00;}
.alert-orange {  color: #f4c800;  background-color: #ffdd67;  border-color: #ffdd67;}
.alert-orange hr {  border-top-color: #ffdd67;}
.alert-orange .alert-link {  color: #f2bb00;}
.progress-bar-orange {  background-color: #f3ce01;}

.progress-striped .progress-bar-orange {
  background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(255, 255, 255, 0.15)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.15)), color-stop(0.75, rgba(255, 255, 255, 0.15)), color-stop(0.75, transparent), to(transparent));
  background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
  background-image: -moz-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
  background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
}

.panel-orange {  border-color: #ffdd67;}
.panel-orange > .panel-heading {  color: #f4c800;  background-color: #ffdd67;  border-color: #ffdd67;}
.panel-orange > .panel-heading + .panel-collapse .panel-body {  border-top-color: #ffdd67;}
.panel-orange > .panel-footer + .panel-collapse .panel-body {  border-bottom-color: #ffdd67;}



.text-marron {  color: #8c4600;}
.table > thead > tr > td.marron,
.table > tbody > tr > td.marron,
.table > tfoot > tr > td.marron,
.table > thead > tr > th.marron,
.table > tbody > tr > th.marron,
.table > tfoot > tr > th.marron,
.table > thead > tr.marron > td,
.table > tbody > tr.marron > td,
.table > tfoot > tr.marron > td,
.table > thead > tr.marron > th,
.table > tbody > tr.marron > th,
.table > tfoot > tr.marron > th {
  background-color: #ffdd67;  border-color: #ffdd67;}

.table-hover > tbody > tr > td.marron:hover,.table-hover > tbody > tr > th.marron:hover,.table-hover > tbody > tr.marron:hover > td {
	background-color: #ffdd67;  border-color: #ffdd67;}


.btn-marron {  color: #ffffff;  background-color: #8c4600;  border-color: #663300;}

.btn-marron:hover,.btn-marron:focus,.btn-marron:active,.btn-marron.active,.open .dropdown-toggle.btn-marron {
	color: #ffffff;  background-color: #a65300;  border-color: #331a00;}

.btn-marron:active,.btn-marron.active,.open .dropdown-toggle.btn-marron {  background-image: none;}

.btn-marron.disabled,
.btn-marron[disabled],
fieldset[disabled] .btn-marron,
.btn-marron.disabled:hover,
.btn-marron[disabled]:hover,
fieldset[disabled] .btn-marron:hover,
.btn-marron.disabled:focus,
.btn-marron[disabled]:focus,
fieldset[disabled] .btn-marron:focus,
.btn-marron.disabled:active,
.btn-marron[disabled]:active,
fieldset[disabled] .btn-marron:active,
.btn-marron.disabled.active,
.btn-marron[disabled].active,
fieldset[disabled] .btn-marron.active {  background-color: #8c4600;  border-color: #663300;}

.btn-marron .caret{  border-top-color: #000000;}
.dropup .btn-marron .caret {  border-bottom-color: #000000;}
.label-marron {  background-color: #f3ce01;}
.label-marron[href]:hover,.label-marron[href]:focus {  background-color: #f4da00;}
.alert-marron {  color: #f4c800;  background-color: #ffdd67;  border-color: #ffdd67;}
.alert-marron hr {  border-top-color: #ffdd67;}
.alert-marron .alert-link {  color: #f2bb00;}
.progress-bar-marron {  background-color: #f3ce01;}

.progress-striped .progress-bar-marron {
  background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(255, 255, 255, 0.15)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.15)), color-stop(0.75, rgba(255, 255, 255, 0.15)), color-stop(0.75, transparent), to(transparent));
  background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
  background-image: -moz-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
  background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
}

.panel-marron {  border-color: #ffdd67;}
.panel-marron > .panel-heading {  color: #f4c800;  background-color: #ffdd67;  border-color: #ffdd67;}
.panel-marron > .panel-heading + .panel-collapse .panel-body {  border-top-color: #ffdd67;}
.panel-marron > .panel-footer + .panel-collapse .panel-body {  border-bottom-color: #ffdd67;}


.panel-warning {
  border-color: #333;
}

.panel-warning > .panel-heading {
  background-image: linear-gradient(to bottom,#000000 0,#555555 100%);
background-repeat: repeat-x;
}
.panel-warning > .panel-heading {
  color: #fdfdff;
  border-color: #222;
}

#list_partenaires .table-striped,#list_contacts .table-striped, #list_domaines .table-striped, #list_entreprises .table-striped, #list_entreprises_old .table-striped {margin: 0 0 0 15px}

.dropdown-menu.overflow {height:200px; overflow:auto }
.dropdown-menu.overflow li {border-bottom:1px solid #eee}
.tooltip-inner { max-width: 80%; color: #000000; text-align: left; background-color: #ffff80; border:1px solid #222}

.ico-archives {font-size: 10em !important;}

.button-fixed-left { position: fixed; bottom: 10px; left: 0px; margin-left:15px; z-index:1019; box-shadow:-4px 4px 10px #000000; border:1px solid black}
.button-fixed-center { position: fixed; bottom: 10px; right: 50%;  z-index:1019; box-shadow:0px 4px 10px #000000; border:1px solid black}
.button-fixed-center2 { position: fixed; bottom: 10px; left: 50%;  z-index:1019; box-shadow:0px 4px 10px #000000; border:1px solid black}
.button-fixed-right { position: fixed; bottom: 10px; right: 0px;margin-right:15px; z-index:1019; box-shadow:4px 4px 10px #000000; border:1px solid black}

.navbar{margin-bottom: 0px;}
.topnav {font-size: 14px;}
.btn-integre{  margin-top:0px; margin-right:0px}

.grosbpfactizy{border:4px solid #ff2626 }

@media(max-width:767px) {
.grosbp h2{ font-size:15px }
.btn-integre{float:right; width:40px; margin-top:-30px; margin-right:20px}
  }
  

@media (min-width: 768px) and (max-width: 991px) {
.btn-integre{float:right; width:40px; margin-top:-30px; margin-right:20px}
	}


.bp_sort_asc,.bp_sort_desc {display:inline-block; }
.bp_sort_asc:hover,.bp_sort_desc:hover{cursor:pointer; color:#888888 }



@media(max-width:767px) {
.intro-message {padding-bottom: 15%;}
.intro-message > h1 {font-size: 3em;}
ul.intro-social-buttons > li {display: block;margin-bottom: 20px;padding: 0;}
ul.intro-social-buttons > li:last-child {margin-bottom: 0;}
.intro-divider {width: 100%;}
}

.network-name {text-transform: uppercase;font-size: 14px;font-weight: 400;letter-spacing: 2px;}
.content-section-a {padding: 50px 0;background-color: #f8f8f8;}
.content-section-b {padding: 50px 0;border-top: 1px solid #e7e7e7;border-bottom: 1px solid #e7e7e7;}
.section-heading {margin-bottom: 30px;}
.section-heading-spacer {float: left;width: 200px;border-top: 3px solid #e7e7e7;}

.banner {background: url(../images/follow-me.jpg) no-repeat center center;padding: 100px 0;color: #f8f8f8;background-size: cover;}
.banner h2 {margin: 0;text-shadow: 2px 2px 3px rgba(0,0,0,0.6);font-size: 3em;}
.banner ul {margin-bottom: 0;}
.banner-social-buttons {float: right;margin-top: 0;}

@media(max-width:1199px) {ul.banner-social-buttons {float: left;margin-top: 15px;}}
@media(max-width:767px) {.banner h2 {margin: 0;text-shadow: 2px 2px 3px rgba(0,0,0,0.6);font-size: 3em;}ul.banner-social-buttons > li {display: block;margin-bottom: 20px;padding: 0;}ul.banner-social-buttons > li:last-child {margin-bottom: 0;}}

footer {padding: 25px 0;}

 .folder-container {
      display: flex;
      flex-wrap: wrap;
      gap: 2rem;
      justify-content: center;
    }

    .folder {
      width: 180px; 
      height: 270px;
      background-color: #222;
      border-radius: 12px;
      overflow: visible;
      transform: skewY(5deg);
      position: relative;
      cursor: pointer;
      transition: all 0.3s ease-in-out;
      box-shadow: 0 8px 20px rgba(0,0,0,0.5);
	  background-size: cover;
	  opacity: 0.8;
	  margin-bottom: 15px;
    }
	
    .folder.dossier {
	  border-size: 2px;
	  border-style: solid;
      border-color: #ffffff;	
    }
	
	
	
	
	.folder.video {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  background-size: cover;
  background-position: center;
}

.content-wrapper {
  background: rgba(0,0,0,0.7);
  color: white;
  text-align: center;
  padding: 6px 4px 4px;
  box-sizing: border-box;
}

.content-wrapper .label2 {
  font-size: 15px;
  line-height: 1.3em;
  font-weight: bold;
  margin-bottom: 5px;
  max-height: 3.6em; /* 2 lignes max */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
}

.content-wrapper .etoiles {
  font-size: 16px;
} 


    .folder:hover {
      transform: skewY(0deg) scale(1.05);
      box-shadow: 0 12px 25px rgba(0,0,0,0.8);
	  opacity: 1;
	 background-color: #000000;

	  
    }

    .folder:hover .video  {
      width: 260px;
      transform: skewY(0deg) scale(1.55);
      box-shadow: 0 12px 25px rgba(0,0,0,0.8);
	  
    }



    .folder:active {
      transform: skewY(-2deg) scale(0.98);
    }

    .folder .label {
      writing-mode: vertical-rl;
      transform: rotate(215deg);
      position: absolute;
      left: 50%;
      top: 50%;
      translate: -50% -50%;
      font-size: 2.6rem;
      font-weight: bold;
      color: #fff;
      text-shadow: 1px 1px 3px #000;
    }

    .folder .label2 {
      writing-mode: vertical-rl;
     transform: rotate(270deg);
     position: absolute;
      left: 50%;
      top: 50%;
      translate: -50% -50%;
      font-size: 2rem;
      font-weight: bold;
      color: #fff;
text-shadow: #000000 1px 1px 0, 3px 3px 15px rgba(0,0,0,0.97);
	  
    }
	
    .folder .admin {
writing-mode: horizontal-tb;
     transform: rotate(0deg);
     position: absolute;
      left: 89%;
      top: 7%;
      translate: -50% -50%;
      font-size: 1rem;
      color: #d93600;
text-shadow: #000000 1px 1px 0, 3px 3px 15px rgba(0,0,0,0.97);
    }
	
	
.folder:hover .admin {
     color: #ff0000;

    }
	
	.spinner-overlay {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background-color: rgba(0, 0, 0, 0.4);
  z-index: 10;
  display: flex;
  justify-content: center;
  align-items: center;
}
.fiche-col {
  position: relative;
}
	
	
    .folder .lecture {
writing-mode: horizontal-tb;
     transform: rotate(240deg);
     position: absolute;
      left: 50%;
      top: 100%;
      translate: -50% -50%;
      font-size: 3rem;
      color: #fff;
text-shadow: #000000 1px 1px 0, 3px 3px 15px rgba(0,0,0,0.97);
    }
	
.folder {
  filter: brightness(0.9); /* image plus sombre */
  transition: filter 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}

.folder:hover {
  filter: brightness(1); /* image normale */
}	
.folder .label,
.folder .label2,
.folder .admin,
.folder .lecture {
  color: #fff;
  text-shadow: 1px 1px 3px #000; /* halo léger */
  transition: text-shadow 0.3s ease;
}
.folder:hover .label,
.folder:hover .label2,
.folder:hover .admin,
.folder:hover .lecture,
.folder:hover .num {
  text-shadow:
    2px 2px 0 #000,
    4px 4px 10px rgba(0, 0, 0, 1),
    0 0 15px rgba(0, 0, 0, 0.9);
}
.video .label2 {
      font-size: 2rem;
    }
	
	
	    .folder .num {
      writing-mode: vertical-rl;
      transform: rotate(270deg);
      position: absolute;
      left: 50%;
      top: 4%;
      translate: -50% -50%;
      font-size: 3.6rem;
      font-weight: bold;
      color: #dddddd;
text-shadow: #000000 1px 1px 0, 3px 3px 15px rgba(0,0,0,0.97);
    }
	
	

    .folder::before {
      content: '';
      position: absolute;
      inset: 0;
      background-size: cover;
      background-position: center;
      opacity: 0.25;
      z-index: 0;
    }

.folder .label,
.folder .label2,
.folder .num {
  z-index: 1;
}
	
	
	.quicksand {
  font-family: "Quicksand", sans-serif;
  font-optical-sizing: auto;
  font-weight: 500;
  font-style: normal;
}
	
	h1 { font-size:48px; text-shadow: #000000 1px 1px 0, 3px 3px 15px rgba(0,0,0,0.97); }
	h3 { font-size:24px; text-shadow: #000000 1px 1px 0, 3px 3px 15px rgba(0,0,0,0.97); }
	



.btn-danger:focus, .btn-danger:hover, .btn-success:focus, .btn-success:hover, .btn-info:focus, .btn-info:hover, .btn-defaut:focus, .btn-defaut:hover, .btn-warning:focus, .btn-warning:hover {  background-position: 0 0;}



 /* grille responsive */
.vid-cards { display:flex; flex-wrap:wrap; gap:12px; }

.vid-card {
  display:block;
  width:200px;
  border:1px solid transparent;
  border-radius:6px;
  text-decoration:none;
  color:inherit;
  overflow:hidden;
  transition:transform .08s ease-in-out, box-shadow .08s;
}
.vid-card:hover {
  transform:translateY(-2px);
  box-shadow:0 2px 8px rgba(0,0,0,.08);
}

.vid-card .thumb {
  position:relative;   /* important pour la barre */
  width:100%;
  height:300px;        /* fixe une hauteur uniforme */
  overflow:hidden;
}
.vid-card .thumb img {
  width:100%;
  height:100%;
  object-fit:cover;    /* recadre pour remplir */
}

/* barre de progression en overlay bas */
.vid-card .thumb .prog {
  position:absolute;
  left:0; right:0; bottom:0;
  height:8px;
  background:rgba(0,0,0,.15);
}
.vid-card .thumb .prog span {
  display:block;
  height:100%;
}
.vid-card .thumb .prog span.prog-bad { background:#d9534f; }  /* danger */
.vid-card .thumb .prog span.prog-mid { background:#f0ad4e; }  /* warning */
.vid-card .thumb .prog span.prog-ok  { background:#5cb85c; }  /* success */

.vid-card .meta {
  padding:8px 10px;
}
.vid-card .meta .title {
  font-size:13px;
  font-weight:600;
  line-height:1.25;
  max-height:2.6em;
  overflow:hidden;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
}
.vid-card .meta .date {
  margin-top:4px;
  font-size:11px;
  color:#777;
}

/* ajustements responsives */
@media (max-width: 1199px) { .vid-card{ width:190px; } }
@media (max-width: 991px)  { .vid-card{ width:180px; } }
@media (max-width: 767px)  { .vid-card{ width:48%; } }
@media (max-width: 480px)  { .vid-card{ width:100%; } }