#modal_background{
        display:none;
        position: fixed;
        left:0;
        top:0;
        width:100vw;
        height:100vh;
        background: black; 
        opacity:.4; 
        z-index:6; 
        overflow: hidden;
    }

    #popup{
        position:fixed;
        top:-100%;
        left:50%;
        transform: translate(-50%,-50%);
        z-index:7;
        background:var(--wht);
        box-shadow:0 15px 30px rgba(0,0,0,0.08);
        transition: 0.5s;
        visibility:hidden;
        border-bottom:4px solid var(--grn);
        width:60%;
        height:80%;
    }

    #popup.active{
        visibility:visible;
        top:50%;
    }
    
    #modal_background.active{
        display:block
    }
    .modal-header{
        position:relative;
        height:70px;
        width:100%;
        background-color: var(--white); 
    }
    .close-btn{
        position:absolute;
        right:0px;
        top:0px;
        border:none;
        width:var(--ham-size);
        height:var(--ham-size);
        padding:0;
        cursor:pointer;
        background: transparent;
    }
    
    .close-btn .line{
        width:var(--ham-line-w);
	height:var(--ham-line-h);
        background: var(--grn);
        position:absolute;
        left:0;
        top:calc(50% - 3px);
        box-shadow: 0 2px 5px rgba(0,0,0,.2);
        transform:rotate(45deg);
    }
    .close-btn .line:after{
        content:'';
        width:var(--ham-line-w);
	height:var(--ham-line-h);
        position:absolute;
        left:0;
        background: var(--grn);
        box-shadow: 0 2px 5px rgba(0,0,0,.2);
        transform: rotate(90deg);
    }
    
    .modal-content{
        width:calc(100%);
        height:calc(100%);
        background-color: var(--white); 
    }
    
    .modal-content iframe{
        margin:0;
        width:calc(100% - 1px);
        height:calc(100% - 150px);
        border:none;
    }