/* les popupes */

.popup {
    display: none;
    position: fixed;
	z-index: 1001;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
}

.popup-content,
.popup-content-thin,
.popup-content-narrow,
.popup-content-mid,
.popup-content-wide,
.popup-content-maxi {
    position: absolute;
    top: 50%;
    left: 50%;
	font-family: 'Helvetica', sans-serif;
    transform: translate(-50%, -50%);
    background-color: #fefefe;
    padding: 20px;
    border: 1px solid #888;
	max-height: 80%;
	overflow-y: auto;
}

.popup-content p,
.popup-content-thin p,
.popup-content-narrow p,
.popup-content-mid p,
.popup-content-wide p,
.popup-content-maxi p {
    display: flex;
    align-items: center;
    justify-content: center;
}


.popup-content h3,
.popup-content-thin h3,
.popup-content-narrow h3,
.popup-content-mid h3,
.popup-content-wide h3,
.popup-content-maxi h3 {
	margin: 10px;
	flex: 1;
	padding: 10px;
	background-color: #183B50; 
	color: white;
}

.popup-content { width: 60%;}
.popup-content-thin { width: 30%;}
.popup-content-narrow { width: 40%;}
.popup-content-mid { width: 50%;}
.popup-content-wide { width: 80%;}
.popup-content-maxi { width: 90%;}

.close {
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 20px;
    cursor: pointer;
}