body.modalNoscroll{overflow:hidden;}

.custom-modal{opacity:0; visibility:hidden; overflow:auto; width:100%; height:100vh; background-color:rgba(0,0,0,0.6); position:fixed; left:0; top:0; z-index:1000;}
.custom-modal.open{opacity:1; visibility:visible;}

.modal-block{display:flex; flex-direction:column; align-items:center; width:calc(100% - 40px); max-width:1080px; min-height:0; padding:47px 68px; background-color:var(--white); border-radius:10px; position:absolute; top:50%; left:50%; transform:translate(-50%, -50%);}
.modal-block.canScroll{top:20px; transform:translate(-50%);}
.modal-block.canScroll:after{content:''; width:100%; height:20px; margin-bottom:-67px;}
.modal-page{display:flex; flex-direction:column; width:100%; color:var(--black);}
.modal-page.active{display:flex !important;}

.modal-close{cursor:pointer; padding:10px; position:absolute; top:0; right:0; z-index:2;}
.modal-close img{width:initial; height:25px;}

.modal-arrow{cursor:pointer; padding:10px 5px; background-color:rgba(0,0,0,0.5); position:absolute; top:50%; transform:translateY(-50%); transition:all 0.25s; z-index:2;}
.modal-arrow:hover{background-color:rgba(0,0,0,1);}
.modal-arrow.previous-arrow{left:0;}
.modal-arrow.next-arrow{right:0;}
.modal-arrow img{width:initial; height:40px;}

@media screen and (max-width:600px) {
	.modal-block{width:100%; padding:0 25px; border-radius:0;}
	.modal-block.canScroll{top:0;}
	.modal-block.canScroll:after{height:0; margin-bottom:0;}
	.modal-page{padding:50px 10px !important;}

	.modal-close{right:25px;}

	.modal-arrow.previous-arrow{left:10px;}
	.modal-arrow.next-arrow{right:10px;}
}