* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    background-color: #FAF0CA;
}


section {
    height: 100vh;
}

.container {
    min-height: 90vh;
    text-align: center;
}
/* affichage des differentes parties*/
.shemas {
    width: 100%;
    height: 90vh;
    display: flex;
    flex-direction: row;
}

.left {
    position: relative;
    height: 100%;
    width: 41vw;
}

.center {
    position: relative;
    height: 100%;
    width: 18%;
}

.right {
    position: relative;
    height: 100%;
    width: 41%;
}


/* Partie centrale*/
.lines {
    width: 100%;
    top: 25%;
    transform: translate(0,50%);
}

.ligne_verticale {
    position:absolute;
    left: 50%;
    top: 40%;
    width: 5px;
    height: 10%;
    background : #6A8D92;
}

.ligne_horizontale2 {
    position:absolute;
    left: 50%;
    top: 50%;
    width  : 150%;
    height : 5px;
    transform: translate(-50%);
    background : #6A8D92;
}

.ligne_verticale_gauche {
    position:absolute;
    left: -25%;
    top: 50%;
    width: 5px;
    height: 10%;
    background : #6A8D92;
}

.ligne_verticale_droite {
    position:absolute;
    left: 125%;
    top: 50%;
    width: 5px;
    height: 10%;
    background : #6A8D92;
}

/* block par personne*/
.left_up {
    position: relative;
    width: 100%;
    height: 50%;
    display:inline-block;
}

.left_down {
    position: relative;
    width: 100%;
    height: 50%;
}

.rigth_up {
    position: relative;
    width: 100%;
    height: 50%;
}

.right_down {
    position: relative;
    width: 100%;
    height: 50%;
}


/* Photo */

.left_up_img {
    position: absolute;
    top: 50%;
    right: 2%;
    transform: translate(0,-50%);
    border-radius: 50%;
    width: 23%;
    transition: 0.5s;
    z-index: 1;
}

.left_down_img {
    position: absolute;
    top: 50%;
    right: 2%;
    transform: translate(0,-50%);
    border-radius: 50%;
    width: 23%;
    transition: 0.5s;
    z-index: 1;
}

.rigth_up_img {
    position: absolute;
    top: 50%;
    left: 2%;
    transform: translate(0,-50%);
    border-radius: 50%;
    width: 23%;
    transition: 0.5s;
    z-index: 1;
}

.right_down_img {
    position: absolute;
    top: 50%;
    left: 2%;
    transform: translate(0,-50%);
    border-radius: 50%;
    width: 23%;
    transition: 0.5s;
    z-index: 1;
}

/* Noms */

.nom {
    position: absolute;
    color: #6A8D92;
    font-size: 500%;
    font-family: 'Kurale', serif;
    text-decoration: none;
    transition: ease 0.5s;
    transform: translate(-50%,-50%);
}

.nom#nom_left_up {
    top: 50%;
    left: 40%;
}

.nom#nom_left_down {
    top: 50%;
    left: 40%;
}

.nom#nom_rigth_up {
    top: 50%;
    right: 40%;
    transform: translate(50%,-50%);
}

.nom#nom_right_down {
    top: 50%;
    right: 40%;
    transform: translate(50%,-50%);
}


/* Texts */

.text {
    position: absolute;
    font-family: 'Kurale', serif;
    color: #0D3B66;
    text-align: center;
    opacity: 0;
    transition: 0.5s;
    top: 50%;
    width: 60%;
}

.text#text_left_up {    
    width: 60%;
    left: 5%;
}

.text#text_left_down {
    left: 5%;
    top: 50%;
}

.text#text_rigth_up {
    right: 5%;
    top: 50%;
}

.text#text_right_down {
    right: 5%;
    top: 50%;
}


/* Transition Maman */

.left_up:hover div#text_left_up {
    opacity: 1;
}

.left_up:hover div#nom_left_up {
    top: 10%;
    left: 40%;
    transform: translate(-50%);
    color: #0D3B66;
}

.left_up:hover img {
    width: 28%;
}

/* Transition juju */

.left_down:hover div#text_left_down {
    opacity: 1;
}

.left_down:hover div#nom_left_down {
    top: 10%;
    left: 40%;
    transform: translate(-50%);
    color: #0D3B66;
}

.left_down:hover img {
    width: 28%;
}


/*Transition papa */

.rigth_up:hover div#text_rigth_up {
    opacity: 1;
}

.rigth_up:hover div#nom_rigth_up {
    top: 10%;
    right: 40%;
    transform: translate(50%);
    color: #0D3B66;
}

.rigth_up:hover img {
    width: 28%;
}


/* Transition bebe*/

.right_down:hover div#text_right_down{
    opacity: 1;
}

.right_down:hover div#nom_right_down {
    top: 10%;
    right: 40%;
    transform: translate(50%);
    color: #0D3B66;
}

.right_down:hover img {
    width: 28%;
}

@media (max-width: 800px) {
    .center{
        display: none;
    }
    .shemas {
        height: 150vh;;
        flex-direction: column;
    }
    .left{
        width: 100%;
    }
    .right {
        width: 100%;
    }
}