h1
	{
	 width:100%;
	 height:auto;
	 margin-top:0;
	background-color:navy;	
	color:gold;
	text-align:center;
		}

.py-gap
	{
	background-color: rgb(38,52,71);
	background-size:100%;		
/*	height: calc(100% - 379px ); */	/* ATTENTION VALEUR A MODIFIER EN FONCTION DE LA HAUTEUR DE L'IMAGE */
	height:auto;
	}
/* $$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$ ANIMATION 1 POISSON $$$$$$$$$$$$$$$$$$ */

.py-poisson-d, .py-poisson-g
	{
	max-width:100%;
	perspective : 500px;
	}



.py-poisson-d
{
    animation-name: an-poisson-d;
	animation-iteration-count:2;
	animation-delay:0s;
	animation-timing-function:ease;
	animation-iteration-count:infinite;	
    animation-duration: 6s;
}

.py-poisson-g
{
    animation-name: an-poisson-g;
	animation-iteration-count:2;
	animation-delay:0s;
	animation-timing-function:ease;
	animation-iteration-count:infinite;	
    animation-duration: 6s;
}

/* entrée à droite */
@keyframes an-poisson-d {
	
   0%   {background-color:transparent; right:-70%; top:0%;}
   
    10%  {background-color:transparent; right:-40%; top:0%;
		transform: translateZ( 0px ) rotateX(   0deg ) rotateY( -70deg );	
		}
   20%  {background-color:transparent; right:-40%; top:0%;
		transform: translateZ( 0px ) rotateX(   0deg ) rotateY( 50deg );	
		}
		
	30%  {background-color:transparent; right:-20%; top:0%;
		transform: perspective(500px) translateZ( -100px ) rotateX(   0deg ) rotateY( -70deg );	
		}
		
    40%  {background-color:transparent; right:-10%; top:0%;
		transform: perspective(500px) translateZ( 50px ) rotateX( 0deg ) rotateY( 50deg );		
		}
		
	50%  {background-color:transparent; right:0%; top:0%;
		transform: perspective(500px) translateZ( -500px ) rotateX(   0deg ) rotateY( -70deg );	
		}
		
    60%  {background-color:transparent; right:10%; top:0%;
		transform: perspective(500px) translateZ( -500px )rotateX(   0deg ) rotateY(  360deg );	
		}
		
	70%  {background-color:transparent; right:40%; top:0%;
		transform: translateZ( 0px ) rotateX(   0deg ) rotateY( 360deg );	
		}
		
   80%  {background-color:transparent; right:50%; top:0%;
		transform: perspective(500px) translateZ( -550px ) rotateX(   0deg ) rotateY(  180deg );	
		}
		
	90%  {background-color:transparent; right:20%; top:0%;
		transform: perspective(500px) translateZ( -550px ) rotateX(   0deg ) rotateY(  540deg );	
		}
    100% {background-color:transparent; right:-30%; top:0%;
		transform:  perspective(500px) translateZ( -550px ) translateZ( 0px ) rotateX(   0deg ) rotateY(   540deg );	
		}
}
/* entrée à gauche */
@keyframes an-poisson-g {
	
   0%   {background-color:transparent; left:0%; top:0%;}
   
    10%  {background-color:transparent; left:10%; top:0%;
		transform: perspective(500px) translateZ( 0px ) rotateX(   0deg ) rotateY( -70deg );	
		}
	
	30%  {background-color:transparent; left:30%; top:0%;
		transform: perspective(100px) translateZ( -100px ) rotateX(   0deg ) rotateY( 70deg );	
		}
	
	50%  {background-color:transparent; left:50%; top:0%;
		transform: perspective(500px) translateZ( 100px ) rotateX(   0deg ) rotateY( -360deg );	
		}
	
	70%  {background-color:transparent; left:70%; top:0%;
		transform: perspective(100px) translateZ( -50px ) rotateX(   0deg ) rotateY( -360deg );	
		}
	
	90%  {background-color:transparent; left:90%; top:0%;
		transform: perspective(500px) translateZ( -50px ) rotateX(   0deg ) rotateY(  -360deg );	
		}
    100% {background-color:transparent; left:100%; top:0%;
		transform:  perspective(500px) translateZ( -550px ) translateZ( 0px ) rotateX(   0deg ) rotateY(   540deg );	
		}
}


/* $$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$ FIN ANIMATION 1 POISSON $$$$$$$$$$$$$$$$$$ */

/* $$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$ ANIMATION 2 POISSON $$$$$$$$$$$$$$$$$$ */

.py-poisson-2d, .py-poisson-2g
	{
	max-width:40%;
	margin-left:30%;
	margin-right:30%;
	perspective : 500px;
	}



.py-poisson-2d
{
    animation-name: an-poisson-2d;
	animation-iteration-count:2;
	animation-delay:0s;
	animation-timing-function:ease;
	animation-iteration-count:infinite;	
    animation-duration: 6s;
}

.py-poisson-2g
{
    animation-name: an-poisson-2g;
	animation-iteration-count:2;
	animation-delay:0s;
	animation-timing-function:ease;
	animation-iteration-count:infinite;	
    animation-duration: 6s;
}

/* entrée à droite animation 2 */
@keyframes an-poisson-2d {
	
   0%   {background-color:transparent; right:-70%; top:0%;}
   
    10%  {background-color:transparent; right:-40%; top:0%;
		transform: translateZ( 0px ) rotateX(   0deg ) rotateY( -70deg );	
		}
    20%  {background-color:transparent; right:-40%; top:0%;
		transform: translateZ( 0px ) rotateX(   0deg ) rotateY( 50deg );	
		}		
	30%  {background-color:transparent; right:-20%; top:0%;
		transform: perspective(500px) translateZ( -100px ) rotateX(   0deg ) rotateY( -70deg );	
		}		
    40%  {background-color:transparent; right:-10%; top:0%;
		transform: perspective(500px) translateZ( 50px ) rotateX( 0deg ) rotateY( 50deg );		
		}
	50%  {background-color:transparent; right:0%; top:0%;
		transform: perspective(500px) translateZ( -500px ) rotateX(   0deg ) rotateY( -70deg );	
		}
    60%  {background-color:transparent; right:10%; top:0%;
		transform: perspective(500px) translateZ( -500px )rotateX(   0deg ) rotateY(  60deg );	
		}			
	70%  {background-color:transparent; right:40%; top:0%;
		transform: translateZ( -500px ) rotateX(   0deg ) rotateY( 60deg );	
		}
   80%  {background-color:transparent; right:50%; top:0%;
		transform: perspective(500px) translateZ( -550px ) rotateX(   0deg ) rotateY(  180deg );	
		}			
	90%  {background-color:transparent; right:20%; top:0%;
		transform: perspective(300px) translateZ( -550px ) rotateX(   0deg ) rotateY(  180deg );	
		}
    100% {background-color:transparent; right:-30%; top:0%;
		transform:  perspective(500px) translateZ( -550px ) translateZ( 0px ) rotateX(   0deg ) rotateY(   540deg );	
		}
}
/* entrée à gauche animation 2 */
@keyframes an-poisson-2g {
	
   0%   {background-color:transparent; left:0%; top:0%;}
   
    10%  {background-color:transparent; left:10%; top:0%;
		transform: translateZ( 0px ) rotateX(   0deg ) rotateY( -70deg );	
		}
    20%  {background-color:transparent; left:20%; top:0%;
		transform: translateZ( 0px ) rotateX(   0deg ) rotateY( 50deg );	
		}		
	30%  {background-color:transparent; left:30%; top:0%;
		transform: perspective(500px) translateZ( -100px ) rotateX(   0deg ) rotateY( -70deg );	
		}		
    40%  {background-color:transparent; left:40%; top:0%;
		transform: perspective(500px) translateZ( 50px ) rotateX( 0deg ) rotateY( 50deg );		
		}
	50%  {background-color:transparent; left:50%; top:0%;
		transform: perspective(500px) translateZ( -500px ) rotateX(   0deg ) rotateY( -70deg );	
		}
    60%  {background-color:transparent; left:60%; top:0%;
		transform: perspective(500px) translateZ( -500px )rotateX(   0deg ) rotateY(  60deg );	
		}			
	70%  {background-color:transparent; left:70%; top:0%;
		transform:  perspective(500px) translateZ( -300px ) rotateX(   45deg ) rotateY( 60deg );	
		}
	80%  {background-color:transparent; left:80%; top:0%;
		transform: perspective(500px) translateZ( -350px ) rotateX(   -45deg ) rotateY(  0deg );	
		}			
	90%  {background-color:transparent; left:90%; top:0%;
		transform: perspective(500px) translateZ( 100px ) rotateX(   0deg ) rotateY(  0deg );	
		}
    100% {background-color:transparent; left:100%; top:0%;
		transform:  perspective(500px) translateZ( 150px )  rotateX(   0deg ) rotateY(   0deg );	
		}
}



/* $$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$  MEDIAS LIEUX MER PY $$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$ */
.py-600
	{
	color:black;
	}
.py-edit
	{
	margin-top:0;
	}