.overlay{
position:fixed;
left:0;
top:0;
width:100%;
height:100dvh;
z-index:2000;
display:flex;
align-items:center;
justify-content:center;
padding:50px;
overflow-y:auto;
opacity:0;
visibility:hidden;
pointer-events:none;
transition:opacity 0.6s ease,visibility 0.6s ease;
}

.overlay[hidden]{
display:none;
}

.overlay.overlay-visible{
opacity:1;
visibility:visible;
pointer-events:auto;
}

.overlay-bg{
position:fixed;
left:0;
top:0;
width:100vw;
height:100dvh;
background-color:rgba(191,143,111,.8);
opacity:0;
transition:opacity 0.6s ease;
z-index:1;
}

.overlay.overlay-visible .overlay-bg{
opacity:1;
}

.overlay-box{
position:relative;
z-index:2;
width:100%;
max-width:1144px;
min-height:700px;
max-height:calc(100dvh - 100px);
background-color:#fcf9f8;
border-radius:60px;
overflow:hidden;
padding:0;
opacity:0;
transform:translateY(35px) scale(0.96);
transition:opacity 0.6s ease,transform 0.6s ease;
}

.overlay-scroll{
width:100%;
max-height:calc(100dvh - 100px);
overflow:auto;
padding:80px 150px 150px 150px;
scrollbar-width:none;
-ms-overflow-style:none;
}

.overlay-scroll::-webkit-scrollbar{
display:none;
}

.overlay.overlay-visible .overlay-box{
opacity:1;
transform:translateY(0) scale(1);
}

.overlay-close{
position:absolute;
left:50px;
top:50px;
width:60px;
height:60px;
border:0;
border-radius:50%;
background-color:#bf8f6f;
display:flex;
align-items:center;
justify-content:center;
cursor:pointer;
appearance:none;
-webkit-appearance:none;
padding:0;
z-index:3;
}

.overlay-close-icon{
width:18px;
height:18px;
display:block;
}

.overlay-close:focus{
outline:none;
}

.overlay-close:focus-visible{
outline:2px solid #bf8f6f;
outline-offset:4px;
}

.overlay-content{
display:flex;
justify-content:center;
align-items:flex-start;
flex-wrap:wrap;
text-align:center;
}

body.overlay-open{
overflow:hidden;
}

.over-head{
width:25px;
height:60px;
position:absolute;
right:50px;
top:50px;
z-index:3;
}

.over-bild{
width:240px;
height:240px;
border-radius:50%;
display:block;
object-fit:cover;
object-position:center 8%;
}

.over-a{
width:100%;
margin-top:50px;
}

.over-b{
width:100%;
}

.over-c{
width:100%;
margin-top:50px;
}

.over-d{
width:100%;
margin-top:60px;
}

@media (max-width:1210px){
.overlay-box{
max-width:1024px;
min-height:600px;
padding:60px;
}
}

@media (max-width:834px){
.overlay-scroll{
padding:80px 0px 150px 0px;
}
}

@media (max-width:600px){
.over-head{
display:none;
}

.over-bild{
width:175px;
height:175px;
}

.over-b{
letter-spacing:1px;
}

.over-d{
width:100%;
margin-top:50px;
}

.over-c{
width:100%;
margin-top:30px;
}

.overlay-scroll{
padding:30px 0px 100px 0px;
}

.overlay-close{
left:30px;
top:30px;
width:40px;
height:40px;
}

.overlay{
padding:10px;
}

.overlay-box{
padding:30px;
border-radius:30px;
}
}