@font-face
{
    font-family: 'BallparkWeiner';
    src: url('polices/ballpark.eot');
    src: url('polices/ballpark.eot?#iefix') format('embedded-opentype'),
         url('polices/ballpark.woff') format('woff'),
         url('polices/ballpark.ttf') format('truetype'),
         url('polices/ballpark.svg#BallparkWeiner') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face
{
    font-family: 'Dayrom';
    src: url('polices/dayrom.eot');
    src: url('polices/dayrom.eot?#iefix') format('embedded-opentype'),
         url('polices/dayrom.woff') format('woff'),
         url('polices/dayrom.ttf') format('truetype'),
         url('polices/dayrom.svg#Dayrom') format('svg');
    font-weight: normal;
    font-style: normal;
}
body
{
    font-family:'Trebuchet MS', Arial, sans-serif;
    color: #181818;
    background: url(images/fond_jaune.png);
}
section h1, nav a, footer h1
{
    font-family: Dayrom, serif;
    font-weight: normal;
    text-transform: uppercase;
}
#bloc_page
{
    width: 1000px;
    margin: auto;
}
header
{
    background: url(images/separateur.png) repeat-x bottom;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}
#titre_principal
{
    display: flex;
    flex-direction: column;
}
#logo
{
    display: flex;
    flex-direction: row;
    align-items: baseline;  
}
#logo img
{
    width: 59px;
    height: 60px;
}
header h1
{
    font-size: 2.5em;
    font-family: 'BallparkWeiner', serif;
    margin: 0px 0px 0px 10px;
    font-weight: normal;
}
header h2
{
    font-size: 1.1em;
    font-family: Dayrom, serif;
    margin-top: 0px;
    font-weight: normal;
}
nav ul
{
    display: flex;
    list-style-type: none;
}
nav li
{
    margin-right: 15px;
}
nav a
{
    text-decoration: none;
    font-size: 1.3em;
    color: #181818;
    padding-bottom: : 3px;
}
nav a:hover
{
    border-bottom: 3px solid #760001;
    color: #760001;
}

.centre img
{
	width: 100%;
	margin: auto;
}
.espace
{
	text-align: justify;
	margin-bottom: 100px;
}
/*Simon*/

.card
{
    border-radius: 16px;
    margin: 0 left;
    width: 250px;
    max-width: 100%;
    min-height: 500px;
    box-shadow: 0px 3px 5px-1px rgba(0,0,0,0.2);
    overflow: hidden;
    background-image: url(monsite/Simon.jpg );
    background-size: cover;
}
.info
{
    position: relative;
    width: 100%;
    height: 500px;
    background-color: #DC8526;
    transform: translateY(100%) translateY(-88px) translateZ(0);
    transition: transform 0.3s ease-out;
}
.info:before
{
    z-index: -1;
    display: block;
    position: absolute;
    content: '';
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-image: url(monsite/Simon.jpg);
    filter: blur(10px);
    background-size: cover;
    opacity: 0;
    transform: translateY(-100%)  translateY(-88px)  translateZ(0);
    transition: transform 0.3s ease-out;
}
.title
{
    margin: 0;
    padding: 24px;
    font-size: 40px;
    line-height: 1;
    color: rgba(0,0,0,0.87);
}
.description
{
    margin: 0;
    padding: 0 24px 24px;
    font-size: 18px;
    line-height: 1.5;
}
.card:hover .info,
.card:hover .info:before

{
    transform: translateY(0) translateZ(0);
}
/*Julian*/
.cardJ
{
    border-radius: 16px;
    margin: 0 left;
    width: 250px;
    max-width: 100%;
    min-height: 500px;
    box-shadow: 0px 3px 5px-1px rgba(0,0,0,0.2);
    overflow: hidden;
    background-image: url(monsite/Julian.jpg );
    background-size: cover;
}
.infoJ
{
    position: relative;
    width: 100%;
    height: 500px;
    background-color: #8faa24 ;
    transform: translateY(100%) translateY(-88px) translateZ(0);
    transition: transform 0.3s ease-out;
}
.infoJ:before
{
    z-index: -1;
    display: block;
    position: absolute;
    content: '';
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-image: url(monsite/Julian.jpg);
    filter: blur(10px);
    background-size: cover;
    opacity: 0;
    transform: translateY(-100%)  translateY(-88px)  translateZ(0);
    transition: transform 0.3s ease-out;
}
.titleJ
{
    margin: 0;
    padding: 24px;
    font-size: 40px;
    line-height: 1;
    color: rgba(0,0,0,0.87);
}
.descriptionJ
{
    margin: 0;
    padding: 0 24px 24px;
    font-size: 18px;
    line-height: 1.5;
}
.cardJ:hover .infoJ,
.cardJ:hover .infoJ:before

{
    transform: translateY(0) translateZ(0);
}

/*Jaro*/

.cardJA
{
    border-radius: 16px;
    margin: 0 left;
    width: 250px;
    max-width: 100%;
    min-height: 500px;
    box-shadow: 0px 3px 5px-1px rgba(0,0,0,0.2);
    overflow: hidden;
    background-image: url(https://media.istockphoto.com/photos/anonymous-profile-young-man-silhouette-picture-id157681821?k=6&m=157681821&s=170667a&w=0&h=P5lsW6DPjNAGx8zKMR8U_WHEbkZIeK6VL-nD61k2XOM= );
    background-size: cover;
}
.infoJA
{
    position: relative;
    width: 100%;
    height: 500px;
    background-color: #1014F8 ;
    transform: translateY(100%) translateY(-88px) translateZ(0);
    transition: transform 0.3s ease-out;
}
.infoJA:before
{
    z-index: -1;
    display: block;
    position: absolute;
    content: '';
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-image: url(https://media.istockphoto.com/photos/anonymous-profile-young-man-silhouette-picture-id157681821?k=6&m=157681821&s=170667a&w=0&h=P5lsW6DPjNAGx8zKMR8U_WHEbkZIeK6VL-nD61k2XOM=);
    filter: blur(10px);
    background-size: cover;
    opacity: 0;
    transform: translateY(-100%)  translateY(-88px)  translateZ(0);
    transition: transform 0.3s ease-out;
}
.titleJA
{
    margin: 0;
    padding: 24px;
    font-size: 40px;
    line-height: 1;
    color: rgba(0,0,0,0.87);
}
.descriptionJA
{
    margin: 0;
    padding: 0 24px 24px;
    font-size: 18px;
    line-height: 1.5;
}
.cardJA:hover .infoJA,
.cardJA:hover .infoJA:before

{
    transform: translateY(0) translateZ(0);
}






/*test*/
.flex, .parti
{
	display: flex;
	justify-content: space-between;
}
 .espaces
 {
 	margin-bottom: 75px;
 }
  .parti3
  {
  	display: flex;
  	justify-content: space-around;
  }

 /*Rooney*/

 .cardR
{
    border-radius: 16px;
    margin: 0 left;
    width: 250px;
    max-width: 100%;
    min-height: 500px;
    box-shadow: 0px 3px 5px-1px rgba(0,0,0,0.2);
    overflow: hidden;
    background-image: url(monsite/Rooney.jpeg );
    background-size: cover;
}
.infoR
{
    position: relative;
    width: 100%;
    height: 500px;
    background-color: #E1162D;
    transform: translateY(100%) translateY(-88px) translateZ(0);
    transition: transform 0.3s ease-out;
}
.infoR:before
{
    z-index: -1;
    display: block;
    position: absolute;
    content: '';
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-image: url(monsite/Rooney.jpeg);
    filter: blur(10px);
    background-size: cover;
    opacity: 0;
    transform: translateY(-100%)  translateY(-88px)  translateZ(0);
    transition: transform 0.3s ease-out;
}
.titleR
{
    margin: 0;
    padding: 24px;
    font-size: 40px;
    line-height: 1;
    color: rgba(0,0,0,0.87);
}
.descriptionR
{
    margin: 0;
    padding: 0 24px 24px;
    font-size: 18px;
    line-height: 1.5;
}
.cardR:hover .infoR,
.cardR:hover .infoR:before

{
    transform: translateY(0) translateZ(0);
}


 /*Azis*/

 .cardA
{
    border-radius: 16px;
    margin: 0 left;
    width: 250px;
    max-width: 100%;
    min-height: 500px;
    box-shadow: 0px 3px 5px-1px rgba(0,0,0,0.2);
    overflow: hidden;
    background-image: url(monsite/Azis.jpg );
    background-size: cover;
}
.infoA
{
    position: relative;
    width: 100%;
    height: 500px;
    background-color: #2687DC;
    transform: translateY(100%) translateY(-88px) translateZ(0);
    transition: transform 0.3s ease-out;
}
.infoA:before
{
    z-index: -1;
    display: block;
    position: absolute;
    content: '';
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-image: url(monsite/Azis.jpg);
    filter: blur(10px);
    background-size: cover;
    opacity: 0;
    transform: translateY(-100%)  translateY(-88px)  translateZ(0);
    transition: transform 0.3s ease-out;
}
.titleA
{
    margin: 0;
    padding: 24px;
    font-size: 40px;
    line-height: 1;
    color: rgba(0,0,0,0.87);
}
.descriptionA
{
    margin: 0;
    padding: 0 24px 24px;
    font-size: 18px;
    line-height: 1.5;
}
.cardA:hover .infoA,
.cardA:hover .infoA:before

{
    transform: translateY(0) translateZ(0);
}

/*Eloi*/

.cardE
{
    border-radius: 16px;
    margin: 0 left;
    width: 250px;
    max-width: 100%;
    min-height: 500px;
    box-shadow: 0px 3px 5px-1px rgba(0,0,0,0.2);
    overflow: hidden;
    background-image: url(monsite/Eloi.jpg );
    background-size: cover;
}
.infoE
{
    position: relative;
    width: 100%;
    height: 500px;
    background-color: #F810F4;
    transform: translateY(100%) translateY(-88px) translateZ(0);
    transition: transform 0.3s ease-out;
}
.infoE:before
{
    z-index: -1;
    display: block;
    position: absolute;
    content: '';
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-image: url(monsite/Eloi.jpg);
    filter: blur(10px);
    background-size: cover;
    opacity: 0;
    transform: translateY(-100%)  translateY(-88px)  translateZ(0);
    transition: transform 0.3s ease-out;
}
.titleE
{
    margin: 0;
    padding: 24px;
    font-size: 40px;
    line-height: 1;
    color: rgba(0,0,0,0.87);
}
.descriptionE
{
    margin: 0;
    padding: 0 24px 24px;
    font-size: 18px;
    line-height: 1.5;
}
.cardE:hover .infoE,
.cardE:hover .infoE:before

{
    transform: translateY(0) translateZ(0);
}

/*Riccardo*/

.cardRi
{
    border-radius: 16px;
    margin: 0 left;
    width: 300px;
    max-width: 100%;
    min-height: 500px;
    box-shadow: 0px 3px 5px-1px rgba(0,0,0,0.2);
    overflow: hidden;
    background-image: url(monsite/Riccardo.jpg );
    background-size: cover;
}
.infoRi
{
    position: relative;
    width: 100%;
    height: 500px;
    background-color: #23E116;
    transform: translateY(100%) translateY(-88px) translateZ(0);
    transition: transform 0.3s ease-out;
}
.infoRi:before
{
    z-index: -1;
    display: block;
    position: absolute;
    content: '';
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-image: url(monsite/Riccardo.jpg);
    filter: blur(10px);
    background-size: cover;
    opacity: 0;
    transform: translateY(-100%)  translateY(-88px)  translateZ(0);
    transition: transform 0.3s ease-out;
}
.titleRi
{
    margin: 0;
    padding: 24px;
    font-size: 40px;
    line-height: 1;
    color: rgba(0,0,0,0.87);
}
.descriptionRi
{
    margin: 0;
    padding: 0 24px 24px;
    font-size: 18px;
    line-height: 1.5;
}
.cardRi:hover .infoRi,
.cardRi:hover .infoRi:before

{
    transform: translateY(0) translateZ(0);
}

/*Max*/

 .cardM
{
    border-radius: 16px;
    margin: 0 left;
    width: 300px;
    max-width: 100%;
    min-height: 500px;
    box-shadow: 0px 3px 5px-1px rgba(0,0,0,0.2);
    overflow: hidden;
    background-image: url(monsite/Max.jpg );
    background-size: cover;
}
.infoM
{
    position: relative;
    width: 100%;
    height: 500px;
    background-color:#EEF10E;
    transform: translateY(100%) translateY(-88px) translateZ(0);
    transition: transform 0.3s ease-out;
}
.infoM:before
{
    z-index: -1;
    display: block;
    position: absolute;
    content: '';
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-image: url(monsite/Max.jpg);
    filter: blur(10px);
    background-size: cover;
    opacity: 0;
    transform: translateY(-100%)  translateY(-88px)  translateZ(0);
    transition: transform 0.3s ease-out;
}
.titleM
{
    margin: 0;
    padding: 24px;
    font-size: 40px;
    line-height: 1;
    color: rgba(0,0,0,0.87);
}
.descriptionM
{
    margin: 0;
    padding: 0 24px 24px;
    font-size: 18px;
    line-height: 1.5;
}
.cardM:hover .infoM,
.cardM:hover .infoM:before

{
    transform: translateY(0) translateZ(0);
}