/**
 * @name * JetModal
 * @file * jetmodal.css
 * @author * Paper Plane Design Studio® <http://www.paperplane.com.br>
 * @description * css responsive & animated modal window component
 * @version * 1.0
 * @license * Todos os direitos reservados - Paper Plane Design Studio®
 */


/* ==========================================================================
   = breakpoint full ( 1600px - 100% )
   ========================================================================== */

:root {
    --jetmodal-easing: cubic-bezier(.19, 1, .22, 1);
}

.jetmodal__input,
.jetmodal:not([jetmodal-effect]),
.jetmodal:not([jetmodal-effect])+.jetmodal__overlay {
    display: none;
}

:checked+.jetmodal:not([jetmodal-effect]),
:checked+.jetmodal:not([jetmodal-effect])+.jetmodal__overlay {
    display: block;
}

.jetmodal,
.jetmodal__box,
.jetmodal__overlay {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    pointer-events: none;
    z-index: 9999;
}

:checked+[jetmodal-effect] .jetmodal__box {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
}

.jetmodal__content {
    width: 100%;
    max-width: 600px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.jetmodal__close {
    width: 40px;
    height: 40px;
    position: absolute;
    top: 10px;
    right: 10px;
    line-height: 37px;
    text-align: center;
    cursor: pointer;
    font-size: 18px;
    font-weight: 700;
    font-family: 'Open Sans';
    color: #fff;
}

.jetmodal__overlay {
    background-color: rgba(0, 0, 0, .6);
    z-index: 9998;
}

:checked+.jetmodal .jetmodal__content,
:checked+.jetmodal+.jetmodal__overlay {
    pointer-events: all;
}

.jetmodal__overlay,
.jetmodal__close,
.jetmodal__label {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.jetmodal__overlay *,
.jetmodal__close *,
.jetmodal__label * {
    pointer-events: none;
}


/* = effects
   ========================================================================== */

[jetmodal-effect] .jetmodal__box {
    transition: opacity .3s, transform .5s var(--jetmodal-easing);
}

[jetmodal-effect="fade"] .jetmodal__box {
    opacity: 0;
}

[jetmodal-effect="slide-up"] .jetmodal__box {
    transform: translateY(100%);
}

[jetmodal-effect="slide-down"] .jetmodal__box {
    transform: translateY(-100%);
}

[jetmodal-effect="slide-left"] .jetmodal__box {
    transform: translateX(-100%);
}

[jetmodal-effect="slide-right"] .jetmodal__box {
    transform: translateX(100%);
}

[jetmodal-effect="scale"] .jetmodal__box {
    opacity: 0;
    transform: scale(0);
}

[jetmodal-effect]+.jetmodal__overlay {
    opacity: 0;
    transition: opacity .3s;
}

:checked+[jetmodal-effect]+.jetmodal__overlay {
    opacity: 1;
}


/* ==========================================================================
   = breakpoint xl ( 1340px - 1600px )
   ========================================================================== */

@media (max-width: 1600px) {
    [jetmodal-effect-xl]:not([jetmodal-effect-xl="none"]),
    [jetmodal-effect-xl]:not([jetmodal-effect-xl="none"])+.jetmodal__overlay {
        display: initial;
    }
    [jetmodal-effect-xl="none"],
    [jetmodal-effect-xl="none"]+.jetmodal__overlay {
        display: none;
        transition: none;
    }
    /* = effects
       ========================================================================== */
     :checked+[jetmodal-effect-xl="none"],
     :checked+[jetmodal-effect-xl="none"]+.jetmodal__overlay {
        display: block;
    }
    [jetmodal-effect-xl] .jetmodal__box {
        transition: opacity .3s, transform .5s var(--jetmodal-easing);
    }
    [jetmodal-effect-xl="fade"] .jetmodal__box {
        opacity: 0;
    }
    [jetmodal-effect-xl="slide-up"] .jetmodal__box {
        transform: translateY(100%);
    }
    [jetmodal-effect-xl="slide-down"] .jetmodal__box {
        transform: translateY(-100%);
    }
    [jetmodal-effect-xl="slide-left"] .jetmodal__box {
        transform: translateX(-100%);
    }
    [jetmodal-effect-xl="slide-right"] .jetmodal__box {
        transform: translateX(100%);
    }
    [jetmodal-effect-xl="scale"] .jetmodal__box {
        opacity: 0;
        transform: scale(0);
    }
     :checked+[jetmodal-effect-xl] .jetmodal__box {
        opacity: 1;
        transform: translate3d(0, 0, 0) scale(1);
    }
    [jetmodal-effect-xl]+.jetmodal__overlay {
        opacity: 0;
        transition: opacity .3s;
    }
     :checked+[jetmodal-effect-xl]+.jetmodal__overlay {
        opacity: 1;
    }
}


/* ==========================================================================
   = breakpoint lg ( 1080px - 1340px )
   ========================================================================== */

@media (max-width: 1340px) {
    [jetmodal-effect-lg]:not([jetmodal-effect-lg="none"]),
    [jetmodal-effect-lg]:not([jetmodal-effect-lg="none"])+.jetmodal__overlay {
        display: initial;
    }
    [jetmodal-effect-lg="none"],
    [jetmodal-effect-lg="none"]+.jetmodal__overlay {
        display: none;
        transition: none;
    }
    /* = effects
       ========================================================================== */
     :checked+[jetmodal-effect-lg="none"],
     :checked+[jetmodal-effect-lg="none"]+.jetmodal__overlay {
        display: block;
    }
    [jetmodal-effect-lg] .jetmodal__box {
        transition: opacity .3s, transform .5s var(--jetmodal-easing);
    }
    [jetmodal-effect-lg="fade"] .jetmodal__box {
        opacity: 0;
    }
    [jetmodal-effect-lg="slide-up"] .jetmodal__box {
        transform: translateY(100%);
    }
    [jetmodal-effect-lg="slide-down"] .jetmodal__box {
        transform: translateY(-100%);
    }
    [jetmodal-effect-lg="slide-left"] .jetmodal__box {
        transform: translateX(-100%);
    }
    [jetmodal-effect-lg="slide-right"] .jetmodal__box {
        transform: translateX(100%);
    }
    [jetmodal-effect-lg="scale"] .jetmodal__box {
        opacity: 0;
        transform: scale(0);
    }
     :checked+[jetmodal-effect-lg] .jetmodal__box {
        opacity: 1;
        transform: translate3d(0, 0, 0) scale(1);
    }
    [jetmodal-effect-lg]+.jetmodal__overlay {
        opacity: 0;
        transition: opacity .3s;
    }
     :checked+[jetmodal-effect-lg]+.jetmodal__overlay {
        opacity: 1;
    }
}


/* ==========================================================================
   = breakpoint md ( 820px - 1080px )
   ========================================================================== */

@media (max-width: 1080px) {
    [jetmodal-effect-md]:not([jetmodal-effect-md="none"]),
    [jetmodal-effect-md]:not([jetmodal-effect-md="none"])+.jetmodal__overlay {
        display: initial;
    }
    [jetmodal-effect-md="none"],
    [jetmodal-effect-md="none"]+.jetmodal__overlay {
        display: none;
        transition: none;
    }
    /* = effects
       ========================================================================== */
     :checked+[jetmodal-effect-md="none"],
     :checked+[jetmodal-effect-md="none"]+.jetmodal__overlay {
        display: block;
    }
    [jetmodal-effect-md] .jetmodal__box {
        transition: opacity .3s, transform .5s var(--jetmodal-easing);
    }
    [jetmodal-effect-md="fade"] .jetmodal__box {
        opacity: 0;
    }
    [jetmodal-effect-md="slide-up"] .jetmodal__box {
        transform: translateY(100%);
    }
    [jetmodal-effect-md="slide-down"] .jetmodal__box {
        transform: translateY(-100%);
    }
    [jetmodal-effect-md="slide-left"] .jetmodal__box {
        transform: translateX(-100%);
    }
    [jetmodal-effect-md="slide-right"] .jetmodal__box {
        transform: translateX(100%);
    }
    [jetmodal-effect-md="scale"] .jetmodal__box {
        opacity: 0;
        transform: scale(0);
    }
     :checked+[jetmodal-effect-md] .jetmodal__box {
        opacity: 1;
        transform: translate3d(0, 0, 0) scale(1);
    }
    [jetmodal-effect-md]+.jetmodal__overlay {
        opacity: 0;
        transition: opacity .3s;
    }
     :checked+[jetmodal-effect-md]+.jetmodal__overlay {
        opacity: 1;
    }
}


/* ==========================================================================
   = breakpoint sm ( 567px - 820px )
   ========================================================================== */

@media (max-width: 820px) {
    [jetmodal-effect-sm]:not([jetmodal-effect-sm="none"]),
    [jetmodal-effect-sm]:not([jetmodal-effect-sm="none"])+.jetmodal__overlay {
        display: initial;
    }
    [jetmodal-effect-sm="none"],
    [jetmodal-effect-sm="none"]+.jetmodal__overlay {
        display: none;
        transition: none;
    }
    /* = effects
       ========================================================================== */
     :checked+[jetmodal-effect-sm="none"],
     :checked+[jetmodal-effect-sm="none"]+.jetmodal__overlay {
        display: block;
    }
    [jetmodal-effect-sm] .jetmodal__box {
        transition: opacity .3s, transform .5s var(--jetmodal-easing);
    }
    [jetmodal-effect-sm="fade"] .jetmodal__box {
        opacity: 0;
    }
    [jetmodal-effect-sm="slide-up"] .jetmodal__box {
        transform: translateY(100%);
    }
    [jetmodal-effect-sm="slide-down"] .jetmodal__box {
        transform: translateY(-100%);
    }
    [jetmodal-effect-sm="slide-left"] .jetmodal__box {
        transform: translateX(-100%);
    }
    [jetmodal-effect-sm="slide-right"] .jetmodal__box {
        transform: translateX(100%);
    }
    [jetmodal-effect-sm="scale"] .jetmodal__box {
        opacity: 0;
        transform: scale(0);
    }
     :checked+[jetmodal-effect-sm] .jetmodal__box {
        opacity: 1;
        transform: translate3d(0, 0, 0) scale(1);
    }
    [jetmodal-effect-sm]+.jetmodal__overlay {
        opacity: 0;
        transition: opacity .3s;
    }
     :checked+[jetmodal-effect-sm]+.jetmodal__overlay {
        opacity: 1;
    }
}


/* ==========================================================================
   = breakpoint xs ( 0px - 567px )
   ========================================================================== */

@media (max-width: 567px) {
    [jetmodal-effect-xs]:not([jetmodal-effect-xs="none"]),
    [jetmodal-effect-xs]:not([jetmodal-effect-xs="none"])+.jetmodal__overlay {
        display: initial;
    }
    [jetmodal-effect-xs="none"],
    [jetmodal-effect-xs="none"]+.jetmodal__overlay {
        display: none;
        transition: none;
    }
    /* = effects
       ========================================================================== */
     :checked+[jetmodal-effect-xs="none"],
     :checked+[jetmodal-effect-xs="none"]+.jetmodal__overlay {
        display: block;
    }
    [jetmodal-effect-xs] .jetmodal__box {
        transition: opacity .3s, transform .5s var(--jetmodal-easing);
    }
    [jetmodal-effect-xs="fade"] .jetmodal__box {
        opacity: 0;
    }
    [jetmodal-effect-xs="slide-up"] .jetmodal__box {
        transform: translateY(100%);
    }
    [jetmodal-effect-xs="slide-down"] .jetmodal__box {
        transform: translateY(-100%);
    }
    [jetmodal-effect-xs="slide-left"] .jetmodal__box {
        transform: translateX(-100%);
    }
    [jetmodal-effect-xs="slide-right"] .jetmodal__box {
        transform: translateX(100%);
    }
    [jetmodal-effect-xs="scale"] .jetmodal__box {
        opacity: 0;
        transform: scale(0);
    }
     :checked+[jetmodal-effect-xs] .jetmodal__box {
        opacity: 1;
        transform: translate3d(0, 0, 0) scale(1);
    }
    [jetmodal-effect-xs]+.jetmodal__overlay {
        opacity: 0;
        transition: opacity .3s;
    }
     :checked+[jetmodal-effect-xs]+.jetmodal__overlay {
        opacity: 1;
    }
}