* {
    margin: 0;
    padding: 0;
}

img {
    max-width: 100%;
    height: auto;
}

.wrapper {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background-image: url("../images/bg.jpg");
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
    height: 100vh;
    overflow: hidden;
}

.scene {
    margin: 0 auto;
    width: 600px;
    height: 414px;
    perspective: 1000px;
}
.scene .envelop {
    width: 100%;
    height: 100%;
    position: relative;
    transform-style: preserve-3d;
}
.scene .envelop__face {
    width: 100%;
    height: 100%;
    position: absolute;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}
.scene .envelop__face--front {
    background-color: #354956;
}
.scene .envelop__face--back {
    background-color: #354956;
    transform: rotateY(180deg);
}
.scene .envelop__face--back .cover {
    width: 100%;
    height: 60%;
    background-image: url("../images/cover-close.png");
    background-size: 100% auto;
    background-repeat: no-repeat;
    /* transform: rotateX(180deg); */
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    transform-style: preserve-3d;
    z-index: 9;
    transform-origin: top;
    position: relative;
    bottom: -2px;
}
.scene .envelop__face--back .cover::after {
    content: "";
    background-image: url("../images/cover-open.png");
    background-size: 100% auto;
    background-repeat: no-repeat;
    background-position: bottom left;
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    transform: rotateX(180deg);
}
.scene .envelop__face--back img#bg {
    position: absolute;
    bottom: 0;
    z-index: 5;
}

.scene .envelop__face--back img#stamp {
    position: absolute;
    /* posizione tipica in alto a destra della busta */
    top: 35%;
    right: 40%;
    width: 18%;
    transform: rotate(12deg);     /* leggera inclinazione “timbro” */
    z-index: 9;                   /* sopra #bg (5), sotto/pari alla lettera */
    pointer-events: none;         /* non blocca click */
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

.scene .envelop__face--back img#letter {
    position: absolute;
    top: -21%;
    transform: rotate(90deg);
    width: 66%;
    left: 20%;
    z-index: 2;
}/*# sourceMappingURL=style.css.map */

.snow {
    pointer-events: none;       /* non blocca click */
    position: fixed;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
    z-index: 999;               /* sopra tutto */
    overflow: hidden;
}

.snowflake {
    position: absolute;
    top: -2em;
    color: #a8d8f0; /* azzurro ghiaccio */
    opacity: 0.7;   /* più delicato */
    font-size: 1em;
    user-select: none;
    animation-name: fall;
    animation-timing-function: linear;
}

@keyframes fall {
    to {
        transform: translateY(110vh) rotate(360deg);
    }
}

 .modal-content {
    background-image: url(../images/background-form.jpg);
    background-size:cover;
}

#rvspModal input {
    border:0 !important;
    color: #354956 !important;
    font-weight: bold !important;
}

#rvspModal .gform_button, #changervspModal button {
    background-color: #354956 !important;
    color:#ffffff !important;
    text-transform:uppercase
}

#rvspModal .gfield_list_icons button {
    background-color: #354956 !important;
    color:#ffffff !important;
}

#rvspModal .gfield-choice-input:before{
    background-color: #354956 !important;
}

#rvspModal .gfield-choice-input:focus{
    outline: #354956 !important;
}

.gfield_list_header .gform-field-label {
    color:#354956 !important;
    font-weight:bold !important;
    font-size:0.7rem !important;
}


@media only screen and (max-width: 767px) {
    .scene {
        width: 400px;
        height: 276px;
    }
}

@charset "UTF-8";
#btn--yp {
    box-sizing: content-box;
    position: fixed;
    z-index: 9;
    bottom: 1em;
    right: 1em;
    border: solid 1em transparent;
    width: 4.625em;
    height: 3.25em;
    background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/2017/icon-yp.svg) 50%/cover content-box;
    font: 16px/ 1.25 trebuchet ms, sans-serif;
    text-indent: 200vw;
    text-shadow: none;
    filter: grayscale(1) drop-shadow(0 0 1px #e8e0e0);
    transition: .5s;
    white-space: nowrap;
}
#btn--yp:before {
    box-sizing: inherit;
    position: absolute;
    left: 0;
    bottom: 100%;
    margin: 1em -.5em;
    padding: .5em;
    width: 100%;
    border-radius: 5px;
    background: #e8e0e0;
    color: #000;
    text-align: center;
    text-decoration: none;
    text-indent: 0vw;
    white-space: normal;
    animation: float 1s ease-in-out infinite alternate;
    content: attr(data-txt);
}
#btn--yp:hover, #btn--yp:focus {
    outline: none;
    filter: grayscale(0) drop-shadow(0 0 1px crimson);
}

@keyframes float {
    to {
        transform: translateY(0.75em);
    }
}


body.page-template-page-rsvp-conferma, body.page-template-page-rsvp-conferma .a3d,  body.page-template-page-rsvp-conferma .a3d div {
    display: grid;
}

body.page-template-page-rsvp-conferma {
    place-content: center;
    overflow-x: hidden;
    margin: 0;
    height: 100vh;
    background: #354956;
}

body.page-template-page-rsvp-conferma .a3d, body.page-template-page-rsvp-conferma .a3d div {
    transform-style: preserve-3d;
}

.mb-sorpresa {
    margin-bottom:6rem;
    left: 50%;
    transform: translateX(-50%);
    opacity: 0;
    animation: mb-slide-up 0.8s ease-out 4s forwards;

}

.scopri {
    max-width:400px !important;
}

@keyframes mb-slide-up {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(50%); /* parte un po' più in basso */
    }
    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}

.a3d {
    --m: calc(.5*(var(--n-stars) - 1));
    --t: calc(0.33333*var(--n-stars)*0.1s);
    animation: roty 12s linear var(--t) infinite reverse;
}

@keyframes roty {
    to {
        rotate: y 1turn;
    }
}
.🌟 {
    --q: Min(1, var(--j));
    --p: calc(1 - var(--q));
    --s: calc((1.25*var(--p) + var(--q)*var(--sf))*2em);
    --ay0: calc(var(--i)/var(--n-arms)*1turn);
    --ay1: calc(var(--ay0) - var(--n-loops)*1turn);
    --ay: calc((var(--j)/var(--n-stars)*var(--n-loops) + var(--i)/var(--n-arms))*1turn);
    --tx: calc(var(--q)*var(--rox)*2em);
    --ty0: calc(var(--m)/var(--n-stars)*20em);
    --ty1: calc(-1*var(--ty0) - 0.75*2em);
    --ty: calc((var(--j) - var(--m))/var(--n-stars)*20em + (var(--q)*var(--roy) - var(--p)*0.75)*2em);
    --tz: calc(var(--j)/var(--n-stars)*10em + var(--q)*var(--roz)*2em);
    grid-area: 1/ 1;
    width: var(--s);
    height: var(--s);
    --pos: rotatey(var(--ay)) translate3d(var(--tx), var(--ty), var(--tz)) rotatey(calc(-1*var(--ay)));
    transform: var(--pos);
    --dt: calc(0.33333*(var(--n-stars) - var(--j))*0.1s);
    animation: grow calc(var(--q)*0.1s) ease-out var(--dt) backwards, move calc(var(--p)*var(--t)) linear;
}
.🌟::after {
    opacity: calc(var(--p) + var(--q)*var(--j)/var(--n-stars) + .25);
    background: radial-gradient(#fffacd 10%, rgba(255, 250, 205, 0.2));
    clip-path: polygon(50% 0%, 53.53553% 41.46447%, 85.35534% 14.64466%, 58.53553% 46.46447%, 100% 50%, 58.53553% 53.53553%, 85.35534% 85.35534%, 53.53553% 58.53553%, 50% 100%, 46.46447% 58.53553%, 14.64466% 85.35534%, 41.46447% 53.53553%, 0% 50%, 41.46447% 46.46447%, 14.64466% 14.64466%, 46.46447% 41.46447%);
    animation: roty 12s linear var(--t) infinite, puls calc(var(--p)*.1s) ease-in-out infinite alternate, hue 4s linear var(--dt) infinite;
    content: "";
}

@keyframes grow {
    0% {
        transform: var(--pos) scale(0);
    }
}
@keyframes move {
    0% {
        transform: rotatey(var(--ay0)) translate3d(0, var(--ty0), 10em) rotatey(calc(-1*var(--ay0)));
    }
    100% {
        transform: rotatey(var(--ay1)) translate3d(0, var(--ty1), 0) rotatey(calc(-1*var(--ay1)));
    }
}
@keyframes puls {
    to {
        scale: .2;
        opacity: 0.2;
    }
}
@keyframes hue {
    to {
        filter: hue-rotate(360deg);
    }
}