/*
==============================================
uds-apparition
==============================================
*/

.bounce-in { animation: bounce-in 0.5s ease; }
@keyframes bounce-in {
  0%   { opacity: 0; transform: scale(.3); }
  50%  { opacity: 1; transform: scale(1.03); }
  70%  { transform: scale(.96); }
  100% { transform: scale(1); }
}

.bounce-out { animation: bounce-out 0.5s ease; }
@keyframes bounce-out {
  0%   { transform: scale(1); }
  25%  { transform: scale(.95); }
  50%  { opacity: 1; transform: scale(1.1); }
  100% { opacity: 0; transform: scale(.3); } 
}

.bounce-in-right { animation: bounce-in-right 0.5s ease; }
@keyframes bounce-in-right {
  0%   { opacity: 0; transform: translateX(1000px); }
  60%  { opacity: 1; transform: translateX(-30px) skew(20deg); }
  80%  { transform: translateX(10px) skew(-25deg); }
  100% { transform: translateX(0) skew(5deg); }
}

.bounce-out-right { animation: bounce-in-right 0.5s ease; }
@keyframes bounce-out-right {
  0%   { opacity: 1; transform: translateX(0) skew(5deg); }
  60%  { transform: translateX(10px) skew(-25deg); }
  80%  { opacity: 1; transform: translateX(-30px) skew(20deg); }
  100% { opacity: 0; transform: translateX(1000px); }
}

/* Animation du mot 'Basket' dans le titre du header du site */
.title-bounce-then-pulse {
	animation-name: title-bounce-in-right, pulse;
	-webkit-animation-name: title-bounce-in-right, pulse;	
	animation-duration: 0.5s, 1.2s;
	-webkit-animation-duration: 0.5s, 1.2s;
	animation-delay: 0s, 0.5s;
	-webkit-animation-delay: 0s, 0.5s;
	animation-iteration-count: 1, infinite;
	-webkit-animation-iteration-count: 1, infinite;
}
.title-bounce-then-pulse_construction {
	animation-name: title-bounce-in-right_construction, pulse_construction;
	-webkit-animation-name: title-bounce-in-right_construction, pulse_construction;	
	animation-duration: 0.5s, 1.2s;
	-webkit-animation-duration: 0.5s, 1.2s;
	animation-delay: 0s, 0.5s;
	-webkit-animation-delay: 0s, 0.5s;
	animation-iteration-count: 1, infinite;
	-webkit-animation-iteration-count: 1, infinite;
}
/* Animation du mot 'Basket' dans le titre du header du site */
.title-bounce-in-right {
	animation: title-bounce-in-right 0.5s ease;
	-webkit-animation: title-bounce-in-right 0.5s ease;
}

@keyframes title-bounce-in-right {
  0%   { opacity: 1; transform: translateX(1180px) rotate(-8deg); }
  60%  { opacity: 1; transform: translateX(-30px) rotate(-8deg) skew(25deg); }
  80%  { transform: translateX(10px)  rotate(-8deg) skew(-18deg); }
  95%  { transform: translateX(0)  rotate(-8deg) skew(5deg); }
  100% { transform: translateX(0)  rotate(-8deg) skew(0deg); }
}


.uds-fadein{
	animation-name: uds-fadein;
	-webkit-animation-name: uds-fadein;	
	
	
	animation-duration: 0.5s;	
	-webkit-animation-duration: 0.5s;

	animation-iteration-count: 1;
	-webkit-animation-iteration-count: 1;
}

@keyframes uds-fadein {
	0% {
		/* transform: translateX(1000px); */
		opacity: 0;		
	}
	100% {
		/* transform: translateX(0px); */
		opacity: 1;	
	}			
}

@-webkit-keyframes uds-fadein {
	0% {
		/* -webkit-transform: translate-x(100%); */
		opacity: 0;		
	}
	100% {
		/* -webkit-transform: translate-x(-100%); */
		opacity: 1;	
	}			
}


/*
======================================================================
pulse: utilisé pour la pulsation du mot 'basket' dans le titre du site
======================================================================
*/

/* Animation du mot 'Basket' dans le titre du header du site */
.pulse{
	animation-name: pulse; -webkit-animation-name: pulse;
	animation-duration: 1.2s; -webkit-animation-duration: 1.2s;
	animation-iteration-count: infinite; -webkit-animation-iteration-count: infinite;
	animation-delay: 0s; -webkit-animation-delay: 0s;
	animation-timing-function: ease-in;
}
.featured_link_pulse{
	animation-name: featured_pulse; -webkit-animation-name: featured_pulse;
	animation-duration: 0.7s; -webkit-animation-duration: 0.7s;
	animation-iteration-count: infinite; -webkit-animation-iteration-count: infinite;
	animation-delay: 0s; -webkit-animation-delay: 0s;
}
.pulse_construction{
	animation-name: pulse_construction; -webkit-animation-name: pulse_construction;
	animation-duration: 1.2s; -webkit-animation-duration: 1.2s;
	animation-iteration-count: infinite; -webkit-animation-iteration-count: infinite;
	animation-delay: 0s; -webkit-animation-delay: 0s;
	animation-timing-function: ease-in;
}
/* Animation du mot 'Basket' dans le titre du header du site */
.big-pulse{
	animation-name: big-pulse; -webkit-animation-name: big-pulse;
	animation-duration: 0.7s; -webkit-animation-duration: 0.7s;
	animation-iteration-count: infinite; -webkit-animation-iteration-count: infinite;
	animation-delay: 0s; -webkit-animation-delay: 0s;
/*	animation-timing-function: ease-in-out;*/
}
.big-pulse_construction{
	animation-name: big-pulse_construction; -webkit-animation-name: big-pulse_construction;
	animation-duration: 0.7s; -webkit-animation-duration: 0.7s;
	animation-iteration-count: infinite; -webkit-animation-iteration-count: infinite;
	animation-delay: 0s; -webkit-animation-delay: 0s;
/*	animation-timing-function: ease-in-out;*/
}

@keyframes pulse {
	0%   { opacity: 0.8; transform: scale(1, 1) translate(0px) rotate(-8deg); }
	50%  { opacity: 1.0; transform: scale(1.04, 1.04) translate(-2px) rotate(-8deg); }	
	100% { opacity: 0.8; transform: scale(1, 1) translate(0px) rotate(-8deg); }			
}

@keyframes pulse {
	0%   { opacity: 1.0; transform: scale(1, 1) translate(0px) rotate(-8deg); }
	30%  { opacity: 1.0; transform: scale(1, 1) translate(0px) rotate(-8deg); }
	50%  { opacity: 1.0; transform: scale(1.02, 1.02) translate(-1px) rotate(-8deg); }
	70%  { opacity: 1.0; transform: scale(1, 1) translate(0px) rotate(-8deg); }
	100% { opacity: 1.0; transform: scale(1, 1) translate(0px) rotate(-8deg); }
}
@keyframes featured_pulse {
	0%   { opacity: 0.8; filter: brightness(1) contrast(1); transform: scale(1, 1) translate(-0.9em) rotate(-0deg); }
	50%  { opacity: 1.0; filter: brightness(1.2) contrast(1.2); transform: scale(1.07, 1.07) translate(-1.0em) rotate(-0deg); }
	100% { opacity: 0.8; filter: brightness(1) contrast(1); transform: scale(1, 1) translate(-0.9em) rotate(-0deg); }			
}

@keyframes pulse_construction {
	0%   { opacity: 1.0; transform: scale(1, 1) translate(0px) rotate(-8deg); }
	30%  { opacity: 1.0; transform: scale(1, 1) translate(0px) rotate(-8deg); }
	50%  { opacity: 1.0; transform: scale(1.02, 1.02) translate(0px) rotate(-8deg); }
	70%  { opacity: 1.0; transform: scale(1, 1) translate(0px) rotate(-8deg); }
	100% { opacity: 1.0; transform: scale(1, 1) translate(0px) rotate(-8deg); }
}

@keyframes big-pulse {
	0%   { opacity: 0.8; filter: brightness(1) contrast(1); transform: scale(1, 1) translate(0px) rotate(-8deg); }
	50%  { opacity: 1.0; filter: brightness(1.2) contrast(1.2); transform: scale(1.1, 1.1) translate(-6px) rotate(-8deg); }
	100% { opacity: 0.8; filter: brightness(1) contrast(1); transform: scale(1, 1) translate(0px) rotate(-8deg); }			
}
@keyframes big-pulse {
	0%   { opacity: 0.8; filter: brightness(1) contrast(1); transform: scale(1, 1) translate(0px) rotate(-8deg); }
	50%  { opacity: 1.0; filter: brightness(1.2) contrast(1.2); transform: scale(1.1, 1.1) translate(-6px) rotate(-8deg); }
	100% { opacity: 0.8; filter: brightness(1) contrast(1); transform: scale(1, 1) translate(0px) rotate(-8deg); }			
}
@keyframes big-pulse_construction {
	0%   { opacity: 0.8; filter: drop-shadow(3px 3px 0px gainsboro) drop-shadow(10px 10px 15px #000) brightness(1) contrast(1); transform: scale(1, 1) translate(0px) rotate(-8deg); }
	50%  { opacity: 1.0; filter: drop-shadow(3px 3px 0px gainsboro) drop-shadow(10px 10px 15px #000) brightness(1.5) contrast(1.2); transform: scale(1.1, 1.1) translate(1px) rotate(-8deg); }
	100% { opacity: 0.8; filter: drop-shadow(3px 3px 0px gainsboro) drop-shadow(10px 10px 15px #000) brightness(1) contrast(1); transform: scale(1, 1) translate(0px) rotate(-8deg); }			
}


/*
==============================================
bounce
==============================================
*/

.bounce{
	animation-name: bounce;
	-webkit-animation-name: bounce;	

	animation-duration: 1.6s;	
	-webkit-animation-duration: 1.6s;

	animation-timing-function: ease;	
	-webkit-animation-timing-function: ease;	
	
	transform-origin: 50% 100%;
	-ms-transform-origin: 50% 100%;
	-webkit-transform-origin: 50% 100%; 	
}

@keyframes bounce {
	0%   { transform: translateY(0%) scaleY(0.6); }
	60%  { transform: translateY(-100%) scaleY(1.1); }
	70%  { transform: translateY(0%) scaleY(0.95) scaleX(1.05); }
	80%  { transform: translateY(0%) scaleY(1.05) scaleX(1); }	
	90%  { transform: translateY(0%) scaleY(0.95) scaleX(1); }				
	100% { transform: translateY(0%) scaleY(1) scaleX(1); }	
}

@-webkit-keyframes bounce {
	0%  { -webkit-transform: translateY(0%) scaleY(0.6); }
	60% { -webkit-transform: translateY(-100%) scaleY(1.1); }
	70% { -webkit-transform: translateY(0%) scaleY(0.95) scaleX(1.05); }
	80% { -webkit-transform: translateY(0%) scaleY(1.05) scaleX(1); }	
	90% { -webkit-transform: translateY(0%) scaleY(0.95) scaleX(1); }				
	100%{ -webkit-transform: translateY(0%) scaleY(1) scaleX(1); }		
}