.modal__backdrop {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: transparent;
    transition: all .5s .2s;
}

.modal__backdrop--shown {
    background-color: #000;
    opacity: .7;
    z-index: 10;
}

.modal__window {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    opacity: 0;
    transform: scale(.9);
    transition: all .5s;
    z-index: 20;
}

.modal__window--shown {
    opacity: 1;
    transform: scale(1);
}

.modal__backdrop--hidden,
.modal__window--hidden {
    opacity: 0;
}

.modal__window--hidden {
    transform: scale(.9);
}

.modal__content {
    pointer-events: auto;
    position: relative;
}

.modal__closeBtn {
    display: block;
    position: absolute;
    cursor: pointer;
    right: -30px;
    top: -30px;
    width: 21px;
    height: 21px;
    background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20512%20512%22%3E%3Cpath%20fill%3D%22%23fff%22%20d%3D%22M256%208C119%208%208%20119%208%20256s111%20248%20248%20248%20248-111%20248-248S393%208%20256%208zm0%20448c-110.5%200-200-89.5-200-200S145.5%2056%20256%2056s200%2089.5%20200%20200-89.5%20200-200%20200zm101.8-262.2L295.6%20256l62.2%2062.2c4.7%204.7%204.7%2012.3%200%2017l-22.6%2022.6c-4.7%204.7-12.3%204.7-17%200L256%20295.6l-62.2%2062.2c-4.7%204.7-12.3%204.7-17%200l-22.6-22.6c-4.7-4.7-4.7-12.3%200-17l62.2-62.2-62.2-62.2c-4.7-4.7-4.7-12.3%200-17l22.6-22.6c4.7-4.7%2012.3-4.7%2017%200l62.2%2062.2%2062.2-62.2c4.7-4.7%2012.3-4.7%2017%200l22.6%2022.6c4.7%204.7%204.7%2012.3%200%2017z%22/%3E%3C/svg%3E');
    background-repeat: no-repeat;
    background-position: center center;
    transition: opacity .2s
}

.modal__closeBtn:hover {
    opacity: .7;
}

.modal--hidden,
.thank-modal {
    display: none;
}