@charset "utf-8";

.bouton1{

    background-color:rgb(51, 189, 243)!important;
    border: solid 1px white;
    border-radius: 5%;
    padding: 5px!important;
    margin-left: 15px!important;
    width: 100px;
    height: 50px;
    font-size: 12px;
    text-align: center!important;
    transition: ease 0.7s!important;
}

.bouton1:hover{

    box-shadow: 1px 1px 1px white!important;
}
.bouton2:hover{

    box-shadow: 1px 1px 1px white!important;
}
.bouton2{

    background-color:rgb(51, 189, 243)!important;
    border: solid 1px white;
    border-radius: 5%;
    padding: 5px!important;
    width: 100px;
    display: flex!important;
    margin-top: 15px!important;
    margin-right: 10px!important;
    height: 50px;
    font-size: 12px;
    text-align: center!important;
    transition: ease 0.7s!important;
}
.divbouton2 {

    display: flex!important;
    justify-content: end!important;

}

.divbouton1 {

    display: flex!important;
    justify-content: space-between!important;
    
}


.btn-modal{

    background-color: rgb(51, 189, 243)!important;
    border: none!important;
    padding: 0%!important;
    cursor: pointer!important;
}

.modal-container{
    visibility: hidden!important;
    position: fixed!important;
    top: 0!important;
    width: 100vw!important;
    height: 100vh!important;
    z-index:1!important;
    transition: visiblity 0.4s!important;

}

.modal-container.active{
    transition: visiblity 0s!important;
    visibility: visible!important;
}

.overlay-modal{
    opacity: 0;
    position: absolute!important;
    width: 100%!important;
    height: 100%!important;
    background: #0c0c0cd3!important;
    transition: opacity 0.4s 0.2s ease-out!important;

}

.modal-container.active .overlay-modal{
    opacity: 1!important;
    transition: opacity 0.4s ease-out!important;


}

.the-modal{
    opacity: 0!important;
    width: 95%!important;
    max-width: 500px!important;
    min-width: 300px!important;
    padding: 30px!important;
    background: #fff;
    border-radius: 5px!important;
    position: relative!important;
    top: 50%!important;
    left: 50%!important;
    transition: opacity 0.4s ease-out!important;
    transform: 0.4s ease-out!important;
    transform: translate(-50%, calc(-50% - 50px))!important;

}
.modal-container.active .the-modal{

    opacity: 1!important;
    transition: opacity 0.4s 0.2s ease-out!important;
    transform: translate(-50%, calc(-50% - 50px))!important;
    transform: 0.4s 0.2s ease-out!important;


}

.button-close{
    border: none!important;
    color: rgb(51, 189, 243)!important;
    background-color: white!important;
    position: absolute!important;
    top: 10px!important;
    right: 10px!important;
    cursor: pointer!important;
}

.photo-modal{
    width: 80px!important;
    height: 80px!important;
    border: solid white 2px!important;
    border-radius: 50%!important;
    transition: 0.4s ease!important;
    transform: rotate(-3deg);
}
.photo-modal:hover{
   
    border: solid white 5px!important;
    transition: 0.2s ease!important;
    }

.images-profil1{
    background: linear-gradient(267deg, rgba(189,188,212,0.5) 20%, rgba(34,217,251,0.5) 64%, rgba(34,217,251,0.5) 91%),
    url("")!important;
    
    background-size: cover!important;

    height: auto!important;
    width: 100%!important;

   
}

.images-profil2{
    background: linear-gradient(87deg, rgba(189,188,212,0.5) 20%, rgba(34,217,251,0.5) 64%, rgba(34,217,251,0.5) 91%), url("")!important;
    
    background-size: cover!important;

    height: auto!important;
    width: 100%!important;  
}

.images-profil3{
    background: linear-gradient(267deg, rgba(189,188,212,0.5) 20%, rgba(34,217,251,0.5) 64%, rgba(34,217,251,0.5) 91%), url("")!important;
    
    background-size: cover!important;

    height: auto!important;
    width: 100%!important;

   
}

.images-profil4{
    background: linear-gradient(87deg, rgba(189,188,212,0.5) 20%, rgba(34,217,251,0.5) 64%, rgba(34,217,251,0.5) 91%), url("")!important;
    
    background-size: cover!important;

    height: auto!important;
    width: 100%!important;

   
}

.images-profil5{
    background: linear-gradient(267deg, rgba(189,188,212,0.5) 20%, rgba(34,217,251,0.5) 64%, rgba(34,217,251,0.5) 91%), url("")!important;
    
    background-size: cover!important;

    height: auto!important;
    width: 100%!important; 
}


@media (max-width:576px) {
    
    .css-html {
        display: flex!important;
        justify-content: center;
        flex-wrap: wrap!important;

    
    }
img{
    margin-top: 20px!important;
    margin-bottom: 20px!important;
    padding: 20px!important;
    height: 150px;
    width: 150px;
    
}
.brs{
    margin-top: 20px!important;
    margin-bottom: 20px!important;

    padding: 20px!important;
    height: 120px;
    width: 120px;

}
.gudg{
    margin-top: 20px!important;
    margin-bottom: 20px!important;
    padding: 20px!important;
    height: 120px;
    width: 120px;
}

}

@media (min-width:576px) {

    .css-html {
        display: flex!important;
        justify-content: center;
        flex-wrap: wrap!important;

    
    }
img{
    margin-top: 20px!important;
    margin-bottom: 20px!important;
    padding: 20px!important;
    height: 200px;
    width: 200px;
    
}
.brs{
    margin-top: 20px!important;
    margin-bottom: 20px!important;

    padding: 20px!important;
    height: 180px;
    width: 180;

}
.gudg{
    margin-top: 20px!important;
    margin-bottom: 20px!important;
    padding: 20px!important;
    height: 120px;
    width: 120px;
}
    
}