/*-------------------------------- POP UP --------------------------------*/

html{
    height: 100vh;
    width: 100vw;
    background-color: white;
    /*position: relative;*/
}

#pop_up_background{
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100%;
    background-color: rgba(255, 255, 255, 1);
    z-index: 3;
    align-items: center;
    justify-content: center;
}

#pop_up_background.active{
    display: flex;
}

#pop_up_contenu{
    /* max-width: 80%; */
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

#pop_up_image{
    /* width: 90vw; */
     max-height: 90vh; 
}

#pop_up_close{
    position: absolute;
    top: 0vw;
    right: 80vw;
    transform: translate(100%,0%);
    /*left: 0;*/
    /*transform: translate(-100%,0%);*/
    /*border-radius: 50%;*/
    /*background-color: white;*/
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.bloc_icon_close_blanc{
    position: absolute;
    top: 0;
    right: 0;
    transform: translate(100%,0%);
    /*left: 0;*/
    /*transform: translate(-100%,0%);*/
    z-index: 4;
}

.bloc_icon_close_noir{
    position: absolute;
    top: 0;
    right: 0;
    transform: translate(100%,0%);
    /*left: 0;*/
    /*transform: translate(-100%,0%);*/
    height: 0;
    z-index: 0;
}

.icon_close{
    width: 5vw;
    min-width: 20px;
    height: auto;
}

.bloc_icon_close_noir:hover{
    z-index: 4;
}

.bloc_icon_close_blanc:hover{
    z-index: 0;
}
@media screen and (max-width: 2000px) {
	#pop_up_image{
		/* width: 90vw; */
		 max-width: 90vw; 
	}
	#pop_up_close{
    position: absolute;
    top: -15vh;
	right: 90vw;
	}
}
@media screen and (max-width: 800px) {
	#pop_up_close{
    position: absolute;
    top: -25vh;
	}
}