.ss-social-regular { font-family: "Parisienne", cursive; font-style: normal; font-weight: normal; text-decoration: none; text-rendering: optimizeLegibility; white-space: nowrap; -webkit-font-feature-settings: "liga", "dlig"; -moz-font-feature-settings: "liga=1, dlig=1"; -moz-font-feature-settings: "liga", "dlig"; -ms-font-feature-settings: "liga", "dlig"; -o-font-feature-settings: "liga", "dlig"; font-feature-settings: "liga", "dlig"; } * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } body { font: 1.1rem/1.6rem Helvetica, Verdana, sans-serif; text-shadow: 0 0 25px rgba(255, 255, 255, 0.7); color: #EEE; } a { color: inherit; -webkit-transition: all 0.2s linear; } .envelope { display: inline-block; width: 50rem; height: 35rem; position: relative; z-index: 100; margin: 2rem auto 2rem auto; background-color: #240b60; background-image: -webkit-linear-gradient(263deg, rgba( 0, 0, 0, 0.0) 0%, rgba( 0, 0, 0, 0.0) 48%, rgba( 0, 0, 0, 0.0) 49%, rgba(225, 215, 205, 0.0) 50%, rgba(225, 215, 205, 0.0) 52%, rgba(225, 215, 205, 0.0) 100%), -webkit-linear-gradient(-263deg, rgba(225, 215, 205, 0.0) 0%, rgba(225, 215, 205, 0.0) 48%, rgba(225, 215, 205, 0.0) 49%, rgba( 0, 0, 0, 0.0) 50%, rgba( 0, 0, 0, 0.0) 52%, rgba( 0, 0, 0, 0.0) 100%), -webkit-linear-gradient(-263deg, rgba( 0, 0, 0, 0.0) 0%, rgba( 0, 0, 0, 0.0) 48%, rgba( 0, 0, 0, 0.1) 49%, rgba( 0, 0, 0, 0.6) 50%, rgba(225, 215, 205, 0.0) 52%, rgba(225, 215, 205, 0.0) 100%), -webkit-linear-gradient(263deg, rgba(225, 215, 205, 0.0) 0%, rgba(225, 215, 205, 0.0) 48%, rgba( 0, 0, 0, 0.1) 49%, rgba( 0, 0, 0, 0.6) 50%, rgba( 0, 0, 0, 0.0) 52%, rgba( 0, 0, 0, 0.0) 100%), -webkit-linear-gradient(left, rgba(51, 41, 31, 0.4) 0%, rgba(51, 41, 31, 0.3) 5%, rgba(51, 41, 31, 0.2) 12%, rgba(51, 41, 31, 0.0) 50%, rgba(51, 41, 31, 0.2) 88%, rgba(51, 41, 31, 0.3) 95%, rgba(51, 41, 31, 0.4) 100%), -webkit-linear-gradient(top, rgba(51, 41, 31, 0.20) 0%, rgba(51, 41, 31, 0.00) 20%, rgba(51, 41, 31, 0.00) 50%, rgba(51, 41, 31, 0.20) 88%, rgba(51, 41, 31, 0.30) 95%, rgba(51, 41, 31, 0.50) 100%); background-image: -moz-linear-gradient(263deg, rgba( 0, 0, 0, 0.0) 0%, rgba( 0, 0, 0, 0.0) 48%, rgba( 0, 0, 0, 0.0) 49%, rgba(225, 215, 205, 0.0) 50%, rgba(225, 215, 205, 0.0) 52%, rgba(225, 215, 205, 0.0) 100%), -moz-linear-gradient(-263deg, rgba(225, 215, 205, 0.0) 0%, rgba(225, 215, 205, 0.0) 48%, rgba(225, 215, 205, 0.0) 49%, rgba( 0, 0, 0, 0.0) 50%, rgba( 0, 0, 0, 0.0) 52%, rgba( 0, 0, 0, 0.0) 100%), -moz-linear-gradient(-263deg, rgba( 0, 0, 0, 0.0) 0%, rgba( 0, 0, 0, 0.0) 48%, rgba( 0, 0, 0, 0.1) 49%, rgba( 0, 0, 0, 0.6) 50%, rgba(225, 215, 205, 0.0) 52%, rgba(225, 215, 205, 0.0) 100%), -moz-linear-gradient(263deg, rgba(225, 215, 205, 0.0) 0%, rgba(225, 215, 205, 0.0) 48%, rgba( 0, 0, 0, 0.1) 49%, rgba( 0, 0, 0, 0.6) 50%, rgba( 0, 0, 0, 0.0) 52%, rgba( 0, 0, 0, 0.0) 100%), -moz-linear-gradient(left, rgba(51, 41, 31, 0.4) 0%, rgba(51, 41, 31, 0.3) 5%, rgba(51, 41, 31, 0.2) 12%, rgba(51, 41, 31, 0.0) 50%, rgba(51, 41, 31, 0.2) 88%, rgba(51, 41, 31, 0.3) 95%, rgba(51, 41, 31, 0.4) 100%), -moz-linear-gradient(top, rgba(51, 41, 31, 0.20) 0%, rgba(51, 41, 31, 0.00) 20%, rgba(51, 41, 31, 0.00) 50%, rgba(51, 41, 31, 0.20) 88%, rgba(51, 41, 31, 0.30) 95%, rgba(51, 41, 31, 0.50) 100%); background-position: 105% 215%, -5% 215%, 100% 80%, 0% 80%, center, center, center; background-size: 25rem 25rem, 25rem 25rem, 25rem 25rem, 25rem 25rem, auto, auto, auto; background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, repeat, repeat, repeat; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.6) inset, 0 2px 0 rgba(255, 255, 255, 0.2) inset, 0 -3px 3px rgba( 0, 0, 0, 0.3) inset, 0 2px 3px rgba( 0, 0, 0, 0.4), 0 6px 12px rgba( 0, 0, 0, 0.2); border-radius: 0.5rem; text-decoration: none; } .seal { display: block; width: 5rem; height: 5rem; position: absolute; left: 50%; top: 60%; margin: -2.2rem 0 0 -2.2rem; border-radius: 2.2rem 1.9rem 2.3rem 2.0rem; background: #BB1914; color: #BB1914; border-color: #BB1914; box-shadow: 0 -2px 4px rgba( 0, 0, 0, 0.2) inset, 0 3px 3px rgba(0, 0, 0, 0.6) inset, 0 1px 5px rgba( 0, 0, 0, 0.8); text-align: center; line-height: 4.2rem; font-size: 2.2rem; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6); } .seal .embossed { display: block; width: 80%; height: 80%; position: absolute; top: 10%; left: 10%; box-shadow: 0 -2px 2px rgba(205, 205, 205, 0.1) inset, 0 3px 3px rgba( 30, 30, 30, 0.1) inset, 0 1px 2px rgba( 30, 30, 30, 0.6) inset; border-radius: 999rem; background-image: -webkit-linear-gradient(top, rgba( 51, 51, 51, 0.3) 0%, rgba( 51, 51, 51, 0.2) 100%); background-image: -moz-linear-gradient(top, rgba( 51, 51, 51, 0.3) 0%, rgba( 51, 51, 51, 0.2) 100%); } .invite { opacity: 0; display: block; position: fixed; margin: 2rem auto 2rem auto; text-align: center; z-index: 1; width: 50rem; height: 35rem; } .card { width: 100%; height: 100%; position: absolute; transform-style: preserve-3d; transition: transform 1s; } .card .img { margin: 0; display: block; position: absolute; width: 100%; height: 100%; backface-visibility: hidden; -webkit-backface-visibility: hidden; } .card .ge { background-image: url("./img/invite_ge.png"); background-size: cover; } .card .fr { background-image: url("./img/invite_fr.png"); background-size: cover; transform: rotateY( 180deg ); } .bottom-left { bottom: 10px; left: 10px; position: absolute; } .uk-icon-button { color: #0176A6 !important; background-color: #b8defe !important; width: 50px !important; height: 50px !important; } .card.flipped { transform: rotateY( 180deg ); } .container { position: relative; text-align: center; width: 100%; height: 100%; }