.card-container{
    position: relative;
    width: 18rem;
    perspective: 200rem;
    height: 450px;
    margin: 5px;
    
}

.card-container:hover .card-front{
    transform: rotateY(180deg);
}

.card-container:hover .card-back{
    transform: rotateY(0deg);
}

.card-back{
    transform: rotateY(180deg);
}

.card{
    width: 100%;
    height: 100%;
    transition: all 0.9s;
    position: absolute;
    backface-visibility: hidden;
    transform-style: preserve-3d;
    border-radius: 25px;
    box-shadow: 0px 0px 5px 1px #383334;
}

.card-back .card-front{
    position: relative;
    
}

.card-body a{
    position: absolute;
}
.bg-card-back{
    background-color: #5e5759;
}

/****************************************************************************/



.b,
input[type="radio"] {
    display: inline-block;
    width: 25px;
    height: 25px;
    vertical-align: middle;
    border-radius: 9px;
}

.b {
    background-color: #FEF2E4;
    text-align: center;
    color: #383334;
    border: 1px solid black;
}

.b:hover{
    box-shadow: 0px 0px 5px 1px #383334;
}

input[type="radio"] {
    /* opacity: 0.01; */
    opacity: 0.01;
    margin-left: -16px;
    /* cursor: pointer; */
}

.p {
    display: none;
}

#p1:checked ~ .p1,
#p2:checked ~ .p2,
#p3:checked ~ .p3 {
    display: block;
}

.margin-a, .margin-b, .margin-c{
    position:absolute;
   margin: 0 auto;
   right: 0;
   margin-top: 1.5%;
}

.margin-a{
    left: -15%;
}
.margin-b{
   left: 0;

}
.margin-c, input[type="radio"] {
   left: 15%;
}

.margin {
    display: flex;
    align-items: center;
    justify-content: center;
}
.btn_center{
    left: 94px;

}

footer{
    margin-top: 5%;
}




.img-card-1{
    background-image: url("https://images.squarespace-cdn.com/content/v1/568ba5762399a30df61542bb/1561713488890-T9V05EF4EY93C5VN05FN/dreamstime_xxl_139822267%281%290p0p.jpg?format=1000w");
    background-size: 100% 40%;
    background-repeat: no-repeat;
    background-position-y: 50%;
    background-position-x: 50%;
}

.img-card-2{
    background-image: url("https://www.science-accueil.org/wp-content/uploads/2018/04/Les-evenements-marketing-pas-rater-cet-automne-F.jpg");
    background-size: 100% 40%;
    background-repeat: no-repeat;
    background-position-y: 50%;
    background-position-x: 50%;
}

.img-card-3{
    background-image: url("https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS3TTueAD1Ju2c_LaUPz4ssURM_CRV61NlmNR9hiIJoEkN0QEEHv2ERcin5ka2mppcYoEI&usqp=CAU");
    background-size: 100% 40%;
    background-repeat: no-repeat;
    background-position-y: 50%;
    background-position-x: 50%;
}

.img-card-4{
    background-image: url("https://montpellier.citycrunch.fr/wp-content/uploads/sites/7/2021/05/grandbazarduprintemps.jpg");
    background-size: 100% 40%;
    background-repeat: no-repeat;
    background-position-y: 50%;
    background-position-x: 50%;
}

.img-card-5{
    background-image: url("https://montpellier.citycrunch.fr/wp-content/uploads/sites/7/2021/05/grandbazarduprintemps.jpg");
    background-size: 100% 40%;
    background-repeat: no-repeat;
    background-position-y: 50%;
    background-position-x: 50%;
}
.img-card-6{
    background-image: url("https://cibul.s3.amazonaws.com/event_evenement-cafe-couture_375718.jpg");
    background-size: 100% 40%;
    background-repeat: no-repeat;
    background-position-y: 50%;
    background-position-x: 50%;
}
.img-card-7{
    background-image: url("https://www.perledecouture.fr/templates/yootheme/cache/Portes_ouvertes_perledecouture2021-4313b2bb.png");
    background-size: 100% 40%;
    background-repeat: no-repeat;
    background-position-y: 50%;
    background-position-x: 50%;
}
.img-card-8{
    background-image: url("https://montpellier.citycrunch.fr/wp-content/uploads/sites/7/2021/05/grandbazarduprintemps.jpg");
    background-size: 100% 40%;
    background-repeat: no-repeat;
    background-position-y: 50%;
    background-position-x: 50%;
}