.dialog-container {
    display: flex;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: 100
}

    .dialog-container[aria-hidden='true'] {
        display: none
    }

.dialog-overlay {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background-color: rgba(43,46,56,.9);
    animation: fade-in 200ms both
}

.dialog-wrapper {
    background-color: #fff;
    margin: auto;
    z-index: 2;
    position: relative;
    animation: fade-in 400ms 200ms both,slide-up 400ms 200ms both;
    padding: 1em;
    max-width: 90%;
    width: 600px;
    border-radius: 2px
}

    .dialog-wrapper.gift-certificate {
        padding: 1em 3em
    }

        .dialog-wrapper.gift-certificate a {
            color: inherit
        }

        .dialog-wrapper.gift-certificate p {
            font-size: 1.2em;
            line-height: 1.5em;
            margin-bottom: 1em
        }

            .dialog-wrapper.gift-certificate p.notice {
                font-size: 1em;
                font-style: italic
            }

@media screen and (min-width:700px) {
    .dialog-wrapper {
        padding: 1em
    }
}

.dialog-content {
    overflow: auto
}

@keyframes fade-in {
    from {
        opacity: 0
    }
}

@keyframes slide-up {
    from {
        transform: translateY(10%)
    }
}

.dialog-close {
    position: absolute;
    top: .5rem;
    right: .5rem;
    border: 0;
    padding: 0;
    background-color: transparent;
    font-weight: bold;
    font-size: 2.25em;
    width: 1.2rem;
    height: 1.2rem;
    line-height: 1.2rem;
    text-align: center;
    cursor: pointer;
    transition: .15s
}

@media screen and (min-width:700px) {
    .dialog-close {
        top: 1rem;
        right: 1rem
    }
}