@import url("https://use.typekit.net/fkd3nlx.css");

.serie
{
    font-size: 120%;
    line-height: 200%;
    letter-spacing: 0.00px;
    padding: 2px;
    border: 1px solid #BFBFBF;
    border-radius: 3px;
    text-decoration: none;
}

.preview {
    position: fixed;
    bottom: 2%;
    right: 1.60%;
    background-size: cover;
    background-position: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.40s ease;
}

.preview img 
{
    width: 50%;
    box-shadow: 0 0px 20px rgba(255, 255, 255, 1);
    float: right;
    margin-bottom: 0%;
    height: auto;
}

.serie0:hover ~ .preview0
{
    opacity: 1;
    transition: opacity 0.40s ease-in-out;
}

.serie1:hover ~ .preview1
{
    opacity: 1;
    transition: opacity 0.40s ease-in-out;
}

.serie2:hover ~ .preview2
{
    opacity: 1;
    transition: opacity 0.40s ease-in-out;
}

.serie3:hover ~ .preview3
{
    opacity: 1;
    transition: opacity 0.40s ease-in-out;
}

.serie4:hover ~ .preview4
{
    opacity: 1;
    transition: opacity 0.40s ease-in-out;
}

body
{
    padding-top: 5.6px;
	margin: 0;
	background-color: #FCFCFC;
    font-family: "loos-extended", sans-serif;
    font-weight: 400;
    font-style: normal;
    letter-spacing: -1.8px;
    text-align: center;
}

.box
{
    display: flex;
    justify-content: space-between;
    z-index: 1;
    font-size: 215%;
    margin-bottom: 0.85%;
}

.name
{
    margin: 0%;
    margin-left: 2%;
    margin-top: 0.4%;
}

.noDec
{
    text-decoration: none;
    font-size: 130%;
    line-height: 132%;
}

.menu
{
    margin: 0%;
    margin-right: 2%;
    margin-top: 0.4%;
}

footer
{
    line-height: 82%;
    text-align: center;
    display: flex;
    justify-content: space-around;
    letter-spacing: -0.4px;
    margin-top: -1.4%;
    font-size: 130%;
}

.haut
{
    text-decoration: none;
    color: black;
}

img
{
    border: solid black 1.9px;
    width: 33.55%;
    margin-bottom: 2.75%;
    padding-bottom: 0%;
}

.horizontale
{
    width: 62.55%;
}

.horizontaleBig
{
    width: 72.55%;
}

.carré
{
    width: 28.00%;
}

.images
{
    text-align: center;
    margin-bottom: 0%;
    padding-bottom: 0%;
}

.back
{
    margin-top: -24%;
    font-size: 50%;
}

a
{
    color: black;
}

.bio
{
    font-size: 110%;
    text-align: center;
    padding: 2.65%;
    margin: 0%;
    padding-right: 0%;
    line-height: 118%;
    letter-spacing: -0.10px;
    padding-top: 0%;
}

.info
{
    text-align: center;
    margin: 0%;
    line-height: 114%;
    padding-top: 0%;
    padding-bottom: 1.80%;
    letter-spacing: -0.4px;
}

.info1
{
    text-align: center;
    margin: 0%;
    font-size: 120%;
    line-height: 156%;
    padding-top: 0%;
    padding-bottom: 1.2%;
    letter-spacing: -0.4px;
}

.leoTable
{
    text-align: center;
    margin: 0%;
    margin-left: 2%;
    margin-right: 2%;
    font-size: 65%;
    padding-top: 0%;
    line-height: 110%;
    padding-bottom: 0.20%;
    letter-spacing: -0.30px;
}

.titre
{
    text-align: center;
    margin: 0%;
    font-size: 220%;
    padding-top: 2%;
    padding-bottom: 2.40%;
    letter-spacing: -0.4px;
    line-height: 78%;
}

.doubleAutoportrait
{
    margin-top: 3.40%;
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin-bottom: 0%;
    padding-bottom: 0%;
}

.double
{
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin-bottom: 0%;
    padding-bottom: 0%;
    margin-left: 0%;
    padding-left: 0% ;
}

.horizontaleDuo
{
    width: 53.00%;
}

.horizontaleSmall
{
    width: 43.00%;
}

.carré
{
    width: 48.00%;
}

.carréDuo
{
    width: 28.00%;
}

@media (max-width: 920px) 
{

.serie
{
    line-height: 212%;
}

.preview img 
{
    width: 70%;
}

.leoTable
{
    font-size: 36%;
    letter-spacing: -0.20;
}

.menu
{
    margin-right: 2.8%;
}

.name
{
    margin-left: 2.8%;
}

.autoportrait
{
    width: 50.00%;
    margin-bottom: 0%;
    padding-bottom: 0%;
}

.titre
{
    font-size: 140%;
    padding-bottom: 2.00%;
}

img
{
    border: solid black 1.1px;
    width: 60.50%;
    margin-bottom: 2.05%;
    padding-bottom: 0%;
}

.horizontale
{
    width: 68.00%;
}

.horizontaleBig
{
    width: 78.00%;
}

.info
{
    margin-left: 10%;
    margin-right: 10%;
    font-size: 78%;
    padding-bottom: 1.60%;
}

.bio
{
    letter-spacing: -0.30px;
    margin-top: 0%;
    padding-top: 0%;
    margin-left: 5%;
    margin-right: 5%;
    font-size: 85%;
}

.box
{
    margin-bottom: 1.60%;
    font-size: 165%;
}

.info1
{
    font-size: 82%;
    padding-bottom: 1.40%;
}

.serie {
    font-size: 95%;
    letter-spacing: -0.40px;
}

footer
{
    font-size: 110%;
}

}

@media (max-width: 640px) 
{

.titre
{
    font-size: 140%;
    padding-bottom: 2.00%;
}

.box
{
    margin-bottom: 1.60%;
    font-size: 145%;
}

.info
{
    font-size: 70%;
}

.info1
{
    font-size: 75%;
}

.serie {
    font-size: 85%;
}

.bio
{
    font-size: 65%;
    letter-spacing: -0.20px;
}

}