/**************************\
  Basic Modal Styles
\**************************/
.modal
{
    font-family: -apple-system,BlinkMacSystemFont,avenir next,avenir,helvetica neue,helvetica,ubuntu,roboto,noto,segoe ui,arial,sans-serif;
}

.modal__overlay
{
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;

    display: flex;

    background: rgba(0, 0, 0, .6);

    justify-content: center;
    align-items: center;
}

.modal__container
{
    overflow-y: auto;

    box-sizing: border-box; 
    max-width: calc(100vw - 30px);
    max-height: calc(100vh - 30px);
    padding: 30px;

    border-radius: 4px;
    background-color: #fff;
}

.modal__header
{
    display: flex;

    justify-content: space-between;
    align-items: center;
}

.modal__title
{
    font-size: 1.25rem;
    font-weight: 600;
    line-height: 1.25;

    box-sizing: border-box; 
    margin-top: 0;
    margin-bottom: 0;

    color: #00449e;
}

.modal__close
{
    border: 0; 
    background: transparent;
}

.modal__header .modal__close:before
{
    content: '\2715';
}

.modal__content
{
    line-height: 1.5;

    margin-top: 2rem;
    margin-bottom: 2rem;

    color: rgba(0, 0, 0, .8);
}

.modal__btn
{
    font-size: .875rem;
    line-height: 1.15;

    overflow: visible;

    margin: 0;
    padding-top: .5rem;
    padding-right: 1rem;
    padding-bottom: .5rem;
    padding-left: 1rem;

    cursor: pointer;
    transition: -webkit-transform .25s ease-out;
    transition:         transform .25s ease-out;
    transition:         transform .25s ease-out, -webkit-transform .25s ease-out;
    transition:         transform .25s ease-out,-webkit-transform .25s ease-out; 
    -webkit-transform: translateZ(0);
            transform: translateZ(0);
    text-transform: none;

    color: rgba(0, 0, 0, .8);
    border-width: 0;
    border-style: none;
    border-radius: .25rem;
    background-color: #e6e6e6;

    -webkit-appearance: button;
    will-change: transform;
    -moz-osx-font-smoothing: grayscale;
    -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
}

.modal__btn:focus,
.modal__btn:hover
{
    -webkit-transform: scale(1.05);
            transform: scale(1.05);
}

.modal__btn-primary
{
    color: #fff; 
    background-color: #00449e;
}

/**************************\
  Demo Animation Style
\**************************/
@-webkit-keyframes mmfadeIn
{
    from
    {
        opacity: 0;
    }
    to
    {
        opacity: 1;
    }
}
@keyframes mmfadeIn
{
    from
    {
        opacity: 0;
    }
    to
    {
        opacity: 1;
    }
}

@-webkit-keyframes mmfadeOut
{
    from
    {
        opacity: 1;
    }
    to
    {
        opacity: 0;
    }
}

@keyframes mmfadeOut
{
    from
    {
        opacity: 1;
    }
    to
    {
        opacity: 0;
    }
}

@-webkit-keyframes mmslideIn
{
    from
    {
        -webkit-transform: translateY(15%);
                transform: translateY(15%);
    }
    to
    {
        -webkit-transform: translateY(0);
                transform: translateY(0);
    }
}

@keyframes mmslideIn
{
    from
    {
        -webkit-transform: translateY(15%);
                transform: translateY(15%);
    }
    to
    {
        -webkit-transform: translateY(0);
                transform: translateY(0);
    }
}

@-webkit-keyframes mmslideOut
{
    from
    {
        -webkit-transform: translateY(0);
                transform: translateY(0);
    }
    to
    {
        -webkit-transform: translateY(-10%);
                transform: translateY(-10%);
    }
}

@keyframes mmslideOut
{
    from
    {
        -webkit-transform: translateY(0);
                transform: translateY(0);
    }
    to
    {
        -webkit-transform: translateY(-10%);
                transform: translateY(-10%);
    }
}

.micromodal-slide
{
    display: none;
}

.micromodal-slide.is-open
{
    display: block;
}

.micromodal-slide[aria-hidden='false'] .modal__overlay
{
    -webkit-animation: mmfadeIn .3s cubic-bezier(0, 0, .2, 1);
            animation: mmfadeIn .3s cubic-bezier(0, 0, .2, 1);
}

.micromodal-slide[aria-hidden='false'] .modal__container
{
    -webkit-animation: mmslideIn .3s cubic-bezier(0, 0, .2, 1);
            animation: mmslideIn .3s cubic-bezier(0, 0, .2, 1);
}

.micromodal-slide[aria-hidden='true'] .modal__overlay
{
    -webkit-animation: mmfadeOut .3s cubic-bezier(0, 0, .2, 1);
            animation: mmfadeOut .3s cubic-bezier(0, 0, .2, 1);
}

.micromodal-slide[aria-hidden='true'] .modal__container
{
    -webkit-animation: mmslideOut .3s cubic-bezier(0, 0, .2, 1);
            animation: mmslideOut .3s cubic-bezier(0, 0, .2, 1);
}

.micromodal-slide .modal__container,
.micromodal-slide .modal__overlay
{
    will-change: transform;
}

/*# sourceMappingURL=micromodal.css.map */