.ent {
	cursor:pointer;
  width: 384px;
  height: 159px;
  background: url('../pics/bt/ent.png');
  animation: ent .8s steps(4) infinite, entc .8s 1 forwards;
  position: relative;
}

.ent:hover {
	cursor:pointer;
  width: 384px;
  height: 159px;
  background: url('../pics/bt/entb.png');
  animation: ent .8s steps(4) infinite, entb .8s 1 forwards;
position: relative;
}

@keyframes ent {
	100% { background-position: -1536px;}
}
@keyframes entb {
	0% { transform: scale(0.7);}
	100% { transform: scale(1.0);}
}
@keyframes entc {
	0% { transform: scale(1.0);}
	100% { transform: scale(0.7);}
}


.ombn {
  filter: drop-shadow(5px 5px 5px #222222);
}

.ombb {
  filter: drop-shadow(5px 5px 5px #FFF);
}





.bt1 {
cursor:pointer;
   width: 250px;
  height: 80px;
  background: url('../pics/bt/spectacles.png');
  animation: play .8s 1 forwards;
  position: relative;
}

.bt1:hover {
cursor:pointer;
   width: 250px;
  height: 80px;
  background: url('../pics/bt/spectacles.png');
  animation: playb .8s 1 forwards;
position: relative;
}

@keyframes play {
	0% { transform: scale(1.0);}
	100% { transform: scale(0.7);}
}
@keyframes playb {
	0% { transform: scale(0.7);}
	100% { transform: scale(1.0);}
}



.bt2 {
cursor:pointer;
   width: 250px;
  height: 80px;
  background: url('../pics/bt/biographie.png');
  animation: play2 .8s 1 forwards;
  position: relative;
}

.bt2:hover {
cursor:pointer;
   width: 250px;
  height: 80px;
  background: url('../pics/bt/biographie.png');
  animation: play2b .8s 1 forwards;
position: relative;
}

@keyframes play2 {
	0% { transform: scale(1.0);}
	100% { transform: scale(0.7);}
}
@keyframes play2b {
	0% { transform: scale(0.7);}
	100% { transform: scale(1.0);}
}


.bt3 {
cursor:pointer;
   width: 250px;
  height: 80px;
  background: url('../pics/bt/references.png');
  animation: play3 .8s 1 forwards;
  position: relative;
}

.bt3:hover {
cursor:pointer;
   width: 250px;
  height: 80px;
  background: url('../pics/bt/references.png');
  animation: play3b .8s 1 forwards;
position: relative;
}

@keyframes play3 {
	0% { transform: scale(1.0);}
	100% { transform: scale(0.7);}
}
@keyframes play3b {
	0% { transform: scale(0.7);}
	100% { transform: scale(1.0);}
}



.bt4 {
cursor:pointer;
   width: 250px;
  height: 80px;
  background: url('../pics/bt/contact.png');
  animation: play4 .8s 1 forwards;
  position: relative;
}

.bt4:hover {
	cursor:pointer;
   width: 250px;
  height: 80px;
  background: url('../pics/bt/contact.png');
  animation: play4b .8s 1 forwards;
position: relative;
}

@keyframes play4 {
	0% { transform: scale(1.0);}
	100% { transform: scale(0.7);}
}
@keyframes play4b {
	0% { transform: scale(0.7);}
	100% { transform: scale(1.0);}
}





.perso1 {
	cursor:pointer;
	background: url('../pics/survol/1.png');
	  background-repeat:no-repeat;
	  background-position:center;
	  background-position:bottom;
	  background-size: 100%;
	  animation: persob .8s 1 forwards;
}

.perso1:hover {
	cursor:pointer;
	  background: url('../pics/survol/1.png');
	  background-repeat:no-repeat;
	  background-position:center;
	  background-position:bottom;
	  background-size: 100%;
	  animation: perso .8s 1;
 
}

.perso2 {
	cursor:pointer;
	background: url('../pics/survol/2.png');
	  background-repeat:no-repeat;
	  background-position:center;
	  background-position:bottom;
	  background-size: 100%;
	  animation: persob .8s 1 forwards;
}

.perso2:hover {
	cursor:pointer;
	  background: url('../pics/survol/2.png');
	  background-repeat:no-repeat;
	  background-position:center;
	  background-position:bottom;
	  background-size: 100%;
	  animation: perso .8s 1;
 
}

.perso3 {
	cursor:pointer;
	background: url('../pics/survol/3.png');
	  background-repeat:no-repeat;
	  background-position:center;
	  background-position:bottom;
	  background-size: 100%;
	  animation: persob .8s 1 forwards;
}

.perso3:hover {
	cursor:pointer;
	  background: url('../pics/survol/3.png');
	  background-repeat:no-repeat;
	  background-position:center;
	  background-position:bottom;
	  background-size: 100%;
	  animation: perso .8s 1;
 
}

.perso4 {
	cursor:pointer;
	background: url('../pics/survol/4.png');
	  background-repeat:no-repeat;
	  background-position:center;
	  background-position:bottom;
	  background-size: 100%;
	  animation: persob .8s 1 forwards;
}

.perso4:hover {
	cursor:pointer;
	  background: url('../pics/survol/4.png');
	  background-repeat:no-repeat;
	  background-position:center;
	  background-position:bottom;
	  background-size: 100%;
	  animation: perso .8s 1;
 
}

.perso5 {
	cursor:pointer;
	background: url('../pics/survol/5.png');
	  background-repeat:no-repeat;
	  background-position:center;
	  background-position:bottom;
	  background-size: 100%;
	  animation: persob .8s 1 forwards;
}

.perso5:hover {
	cursor:pointer;
	  background: url('../pics/survol/5.png');
	  background-repeat:no-repeat;
	  background-position:center;
	  background-position:bottom;
	  background-size: 100%;
	  animation: perso .8s 1;
 
}

.perso6 {
	cursor:pointer;
	background: url('../pics/survol/6.png');
	  background-repeat:no-repeat;
	  background-position:center;
	  background-position:bottom;
	  background-size: 100%;
	  animation: persob .8s 1 forwards;
}

.perso6:hover {
	cursor:pointer;
	  background: url('../pics/survol/6.png');
	  background-repeat:no-repeat;
	  background-position:center;
	  background-position:bottom;
	  background-size: 100%;
	  animation: perso .8s 1;
 
}

.perso7 {
	cursor:pointer;
	background: url('../pics/survol/7.png');
	  background-repeat:no-repeat;
	  background-position:center;
	  background-position:bottom;
	  background-size: 100%;
	  animation: persob .8s 1 forwards;
}

.perso7:hover {
	cursor:pointer;
	  background: url('../pics/survol/7.png');
	  background-repeat:no-repeat;
	  background-position:center;
	  background-position:bottom;
	  background-size: 100%;
	  animation: perso .8s 1;
 
}
@keyframes perso {
	0% { opacity:0; transform: scale(0.7);}
	100% {  opacity:10; transform: scale(1.0);}
}
@keyframes persob {
	0% { opacity:10; transform: scale(1.0);}
	100% {  opacity:0; transform: scale(0.7);}
}




 .thumb {
	 
border-radius: 15px 15px 15px 15px;
  filter: drop-shadow(5px 5px 5px #000);

}

.thumb img
{
	animation: pics .8s 1 forwards;



}
.thumb img:hover
{
	animation: picsb .8s 1 forwards;


    
}

@keyframes pics {
	0% { filter: brightness(170%);}
	100% {  filter: brightness(100%);}
}

@keyframes picsb {
	0% { filter: brightness(100%);}
	100% {  filter: brightness(170%);}
}







.partenaires {
width: 300px;
list-style-type: none;
    padding: 10px;
  display: flex;
 flex-wrap:wrap;
		 justify-content:center;
		 align-items: center;
		 align-content: flex-start;
}



.menu {
    list-style-type: none;
    margin: 10px;
    padding: 10px;
  display: flex;
 flex-wrap: wrap;
		 justify-content:center;
		 align-items: center;
		 align-content:center;

}	





 .thumb2 {

}

.thumb2 img
{
	animation: picstv .8s 1 forwards;


filter: type(value); 
}
.thumb2 img:hover
{
	animation: picsbtv .8s 1 forwards;


filter: type(value);     
}

@keyframes picstv {
	0% { filter: brightness(170%);}
	100% {  filter: brightness(100%);}
}

@keyframes picsbtv {
	0% { filter: brightness(100%);}
	100% {  filter: brightness(170%);}
}



 .logo-art {

	box-shadow: 8px 8px 9px #000;
	border-radius:15%;
	border: 5px solid #FFF;

}


 .lien-art {
	 	font-family: 'police1';
	font-weight:lighter;
	color: #000;
	font-size: 18px;
	text-shadow: 2px 2px 5px #FFF, 2px 2px 5px #FFF;
	text-align: center;
	animation: art .8s 1 forwards;
	text-decoration:none;

	
}


.lien-art:hover
{
	animation: artb .8s 1 forwards;


    
}

@keyframes art {
	0% { color: #F9C;}
	100% {  color: #000;}
}

@keyframes artb {
	0% { color: #000;}
	100% {  color: #F9C;}
}




.dp {
	cursor:pointer;
  width: 384px;
  height: 159px;
  background: url('../pics/bt/dp.png');
  animation: dpa .8s steps(4) infinite, dpc .8s 1 forwards;
  position: relative;
}

.dp:hover {
	cursor:pointer;
  width: 384px;
  height: 159px;
  background: url('../pics/bt/dpb.png');
  animation: dpa .8s steps(4) infinite, dpb .8s 1 forwards;
position: relative;
}

@keyframes dpa {
	100% { background-position: -1536px;}
}
@keyframes dpb {
	0% { transform: scale(0.7);}
	100% { transform: scale(1.0);}
}
@keyframes dpc {
	0% { transform: scale(1.0);}
	100% { transform: scale(0.7);}
}





.retour {
	cursor:pointer;
  width: 384px;
  height: 159px;
  background: url('../pics/bt/retour.png');
  animation: retoura .8s steps(4) infinite, retourc .8s 1 forwards;
  position: relative;
}

.retour:hover {
	cursor:pointer;
  width: 384px;
  height: 159px;
  background: url('../pics/bt/retourb.png');
  animation: retoura .8s steps(4) infinite, retourb .8s 1 forwards;
position: relative;
}

@keyframes retoura {
	100% { background-position: -1536px;}
}
@keyframes retourb {
	0% { transform: scale(0.7);}
	100% { transform: scale(1.0);}
}
@keyframes retourc {
	0% { transform: scale(1.0);}
	100% { transform: scale(0.7);}
}




.icvideo {
	cursor:pointer;
	height:300px;
	width:300px;
	background-image:url(../pics/bt/video.png);
	background-repeat:no-repeat;
	background-size:contain;
	  animation: videoc .8s 1 forwards;
}

.icvideo:hover {
    cursor:pointer;
	height:300px;
	width:300px;
	background-image:url(../pics/bt/videob.png);
	background-repeat:no-repeat;
	background-size:contain;
	  animation: videob .8s 1 forwards;
}

@keyframes videob {
	0% { transform: scale(0.7); opacity:0.5;}
	100% { transform: scale(1.0); opacity:0.9;}
}
@keyframes videoc {
	0% { transform: scale(1.0); opacity:0.9;}
	100% { transform: scale(0.7); opacity:0.5;}
}


.lecteur {
box-shadow: 8px 8px 12px #000; 
border-radius: 30px 30px 30px 30px;
}


.video {
	background-repeat:no-repeat;
	background-position:center;
	box-shadow: 8px 8px 12px #000; 
border-radius: 30px 30px 30px 30px;
}




.lueur
{
 
    position: relative;
}

  .lueur:before
{
content: '';
background-color:#000;
                filter: blur(60px);
    position: absolute;
    top: 0;
    bottom:0;
    left: 0;
    right: 0;    
    z-index: -1;
		opacity:0.5;

}

.lueurdalida
{
 
    position: relative;
}

  .lueurdalida:before
{
content: '';
background-color: #000;
                filter: blur(60px);
    position: absolute;
    top: 0;
    bottom:0;
    left: 0;
    right: 0;    
    z-index: -1;
	opacity:0.5;

}


.lueurblanche
{
 
    position: relative;
}

  .lueurblanche:before
{
content: '';
background-color:#FFF;
                filter: blur(60px);
    position: absolute;
    top: 0;
    bottom:0;
    left: 0;
    right: 0;    
    z-index: -1;
		opacity:0.5;

}



#caseart {
	float:left;
	margin:15;
	padding: 20;
	background-image:url(../pics/ref/fdart.jpg);
	border-radius: 7%;
  filter: drop-shadow(5px 5px 5px #000);
	
}

.tdalida {
  width: 597px;
  height: 315px;
  background: url('../pics/dalida/titrea.png');
  animation: tdalidaanim .8s steps(13) infinite;
  position: relative;
  background-repeat:no-repeat;
}



@keyframes tdalidaanim {
	100% { background-position: -7762px;}
}


.sdc {
	
	background-image:url("../pics/bt/etoile.png");
	background-repeat:no-repeat;
	background-size:contain;
	background-position: center;
  
}



.ref1 {
	cursor:pointer; 
	width: 300px;
  height: 229px;
animation-name: ref1a;
animation-fill-mode:forwards;
background-size: 100%;  
background-repeat: no-repeat;
animation-duration: 0.4s;
animation-iteration-count: 1;  
animation-timing-function: linear;
}

.ref1:hover {
	cursor:pointer; 
	width: 300px;
  height: 229px;
animation-name: ref1b;
animation-fill-mode:forwards;
background-size: 100%;  
background-repeat: no-repeat;
animation-duration: 0.4s;
animation-iteration-count: 1;  
animation-timing-function: linear;
}

@keyframes ref1a {  
0% {background-image: url("../pics/bt/ref1/6.png");}
20% {background-image: url("../pics/bt/ref1/5.png");}
40% {background-image: url("../pics/bt/ref1/4.png");}
60% {background-image: url("../pics/bt/ref1/3.png");}
80% {background-image: url("../pics/bt/ref1/2.png");}
100% {background-image: url("../pics/bt/ref1/1.png");}
}

@keyframes ref1b {  
0% {background-image: url("../pics/bt/ref1/1.png");}
20% {background-image: url("../pics/bt/ref1/2.png");}
40% {background-image: url("../pics/bt/ref1/3.png");}
60% {background-image: url("../pics/bt/ref1/4.png");}
80% {background-image: url("../pics/bt/ref1/5.png");}
100% {background-image: url("../pics/bt/ref1/6.png");}
}


.ref2 {
	cursor:pointer; 
	width: 300px;
  height: 229px;
animation-name: ref2a;
animation-fill-mode:forwards;
background-size: 100%;  
background-repeat: no-repeat;
animation-duration: 0.4s;
animation-iteration-count: 1;  
animation-timing-function: linear;
}

.ref2:hover {
	cursor:pointer; 
	width: 300px;
  height: 229px;
animation-name: ref2b;
animation-fill-mode:forwards;
background-size: 100%;  
background-repeat: no-repeat;
animation-duration: 0.4s;
animation-iteration-count: 1;  
animation-timing-function: linear;
}

@keyframes ref2a {  
0% {background-image: url("../pics/bt/ref2/6.png");}
20% {background-image: url("../pics/bt/ref2/5.png");}
40% {background-image: url("../pics/bt/ref2/4.png");}
60% {background-image: url("../pics/bt/ref2/3.png");}
80% {background-image: url("../pics/bt/ref2/2.png");}
100% {background-image: url("../pics/bt/ref2/1.png");}
}

@keyframes ref2b {  
0% {background-image: url("../pics/bt/ref2/1.png");}
20% {background-image: url("../pics/bt/ref2/2.png");}
40% {background-image: url("../pics/bt/ref2/3.png");}
60% {background-image: url("../pics/bt/ref2/4.png");}
80% {background-image: url("../pics/bt/ref2/5.png");}
100% {background-image: url("../pics/bt/ref2/6.png");}
}


.ref3 {
	cursor:pointer; 
	width: 300px;
  height: 229px;
animation-name: ref3a;
animation-fill-mode:forwards;
background-size: 100%;  
background-repeat: no-repeat;
animation-duration: 0.4s;
animation-iteration-count: 1;  
animation-timing-function: linear;
}

.ref3:hover {
	cursor:pointer; 
	width: 300px;
  height: 229px;
animation-name: ref3b;
animation-fill-mode:forwards;
background-size: 100%;  
background-repeat: no-repeat;
animation-duration: 0.4s;
animation-iteration-count: 1;  
animation-timing-function: linear;
}

@keyframes ref3a {  
0% {background-image: url("../pics/bt/ref3/6.png");}
20% {background-image: url("../pics/bt/ref3/5.png");}
40% {background-image: url("../pics/bt/ref3/4.png");}
60% {background-image: url("../pics/bt/ref3/3.png");}
80% {background-image: url("../pics/bt/ref3/2.png");}
100% {background-image: url("../pics/bt/ref3/1.png");}
}

@keyframes ref3b {  
0% {background-image: url("../pics/bt/ref3/1.png");}
20% {background-image: url("../pics/bt/ref3/2.png");}
40% {background-image: url("../pics/bt/ref3/3.png");}
60% {background-image: url("../pics/bt/ref3/4.png");}
80% {background-image: url("../pics/bt/ref3/5.png");}
100% {background-image: url("../pics/bt/ref3/6.png");}
}



.ref4 {
	cursor:pointer; 
	width: 300px;
  height: 229px;
animation-name: ref4a;
animation-fill-mode:forwards;
background-size: 100%;  
background-repeat: no-repeat;
animation-duration: 0.4s;
animation-iteration-count: 1;  
animation-timing-function: linear;
}

.ref4:hover {
	cursor:pointer; 
	width: 300px;
  height: 229px;
animation-name: ref4b;
animation-fill-mode:forwards;
background-size: 100%;  
background-repeat: no-repeat;
animation-duration: 0.4s;
animation-iteration-count: 1;  
animation-timing-function: linear;
}

@keyframes ref4a {  
0% {background-image: url("../pics/bt/ref4/6.png");}
20% {background-image: url("../pics/bt/ref4/5.png");}
40% {background-image: url("../pics/bt/ref4/4.png");}
60% {background-image: url("../pics/bt/ref4/3.png");}
80% {background-image: url("../pics/bt/ref4/2.png");}
100% {background-image: url("../pics/bt/ref4/1.png");}
}

@keyframes ref4b {  
0% {background-image: url("../pics/bt/ref4/1.png");}
20% {background-image: url("../pics/bt/ref4/2.png");}
40% {background-image: url("../pics/bt/ref4/3.png");}
60% {background-image: url("../pics/bt/ref4/4.png");}
80% {background-image: url("../pics/bt/ref4/5.png");}
100% {background-image: url("../pics/bt/ref4/6.png");}
}

