/* CSS de la page comedien_voir.html.twig */

.comediens{
    margin: 5% 0 5% 0;
    border:2px solid #b49761;
    border-radius: 20px;
}

.comediens2{
    display:flex;
    width: 100%;
    padding: 4% 0 4% 0;
    
}

.comediens2 .comediens3 .photo, .divseparation{
    width: 100%;
}

.comediens2 .comediens3 .photo #comedien, 
.comediens2 .comediens3 .divseparation .separation,
.comediens4{
    width: 60%;
}

.comediens2 .divnom h2{
    font-size: 25px;
    text-align: center;
    font-weight: lighter;
}

.comediens .role p{
    font-weight:bold;
}

.comediens p{
  
    padding-bottom: 2%;
    font-size: 17px;
}

.comediens .text{
    padding-bottom: 4%;
}

.comediens .text li{
    list-style:none;
    font-size: 17px;
}



.comediens3{
    width: 40%;
    text-align: center;
}

.comediens3 .divnom{
    width: 100%;
}

.comediens .description{
    width: 90%;
    padding-bottom: 4%;
}

/**********************************************************CSS admin de la modification d'un comedien****************************************/
.photo{
    text-align: center;
}

.photo #comedien{
    width: 50%;
}


@media screen and (max-width: 860px){

    .comediens2{
        display: block;
    }

    .photo{
        width: 100%;
    }

    .comediens2 .comediens3 .photo, .divseparation{
        width: 100%;
        margin: auto;
    }

    .comediens3{
        width: auto;
        text-align: center;
    }

    .separation{
        width: 50%;
    }

    .comediens2 .comediens3 .photo #comedien, 
    .comediens2 .comediens3 .divseparation .separation,
    .comediens4{
    width: 95%;
    }

    .comediens .description{
    width: 100%;
    padding-bottom: 4%;
    
}

.comediens .description, .comediens .role, .comediens .text li{
    margin-left: 3%;
}
    
}