@font-face { font-family:'Museo-Sans'; src:url('static/fonts/museo-sans.woff2') format('woff2'), url('static/fonts/museo-sans.woff') format('woff'); font-weight:100; font-display:swap; }
@font-face { font-family:'Museo-Sans'; src:url('static/fonts/museo-sans-500.woff2') format('woff2'), url('static/fonts/museo-sans-500.woff') format('woff'); font-weight:500; font-display:swap; }
@font-face { font-family:'Juana'; src:url('static/fonts/juana.woff2') format('woff2'), url('static/fonts/juana.woff') format('woff'); font-display:swap; }
@font-face { font-family:'Tropical-Summer'; src:url(static/fonts/tropical-summer.otf) format('opentype'); }
*, *::before, *::after {
    --clr-accent:#1da3c9;
    --clr-darker:#007399;
    --clr-lighter:#81cada;
	--clr-accent-rgb:29,163,201;
    --clr-lighter-rgb:129,202,218;
    --clr-grey:#333333;
    --clr-greysat:#607d8b; 
	--clr-error:#ff6b64;
	--clr-success:#8dc68f;
    --ft-default:'Museo-Sans', sans-serif;
    --ft-accent:'Juana', serif;
    --ft-script:'Tropical-Summer', serif;
	--weight-default:100;
    --pg-width:1250px;
    --pg-gutter:20px;
    box-sizing:border-box;
    font:inherit;  color:inherit;
    position:relative; 
    padding:0; margin:0; border:0; line-height:1.45;
    list-style:none; -webkit-appearance:none; -webkit-tap-highlight-color:transparent; outline:none;
}
h1, h2, h3, h4, h5 { font-family:var(--ft-accent); color:var(--clr-accent); line-height:1.3; }
h3 { color:var(--clr-darker); }

iframe { width:100%; height:100%; border:0; margin:0; padding:0; }
a { outline:none; color:inherit; text-decoration:inherit; }
ol, ul { list-style:none; }
img { max-width:100%; display:block; } 
html { touch-action:manipulation; }
* ::selection { color:white; background: #4a4a4a; }
html, body { width:100%; height:100%; left:0px; -webkit-font-smoothing:antialiased; color:var(--clr-grey); font-size:15px; font-family:'Museo-Sans',sans-serif; font-weight:var(--weight-default); }
body { overflow-x:hidden; }
table { border-collapse:collapse; }
textarea { white-space:revert; }
.juana { font-family:var(--ft-accent); }
.tropical { font-family:var(--ft-script); }
[data-modal].initial { transform:translateY(-10px); opacity:0; pointer-events:none; transition:transform 0.4s, opacity 0.3s; }
[data-modal].show { transform:translateY(0); opacity:1; pointer-events:initial; z-index:101; }

/* --- NAVIGATION ------ */
header { width:100%; height:60px; top:0; display:flex; align-content:center; position:fixed; background-color:rgba(255,255,255,0.9); box-shadow:0px 0px 20px rgba(0,0,0,0.08); backdrop-filter:blur(2px); -webkit-backdrop-filter:blur(2px); transition:height 0.3s ease; z-index:10; }
main { min-height:calc(100vh - 335px); opacity:1; transform:translateY(0px); transition:transform 0.4s, opacity 0.4s; }
nav { display:flex; width:var(--pg-width); padding-inline:var(--pg-gutter); justify-content:space-between;align-items: center; margin:auto;}
menu { display:flex; gap:50px; align-items:center; }
nav a { font-size:15px; letter-spacing:0.05em }
nav a[data-modal="login"]:before { content:'\e001'; font-family:simple-line-icons; font-size:0.9em; margin-right:6px; color:grey; }
.logo { width:250px; transform:translateY(-1px); transition:filter 0.25s }
.logo:hover { filter:brightness(0.85) contrast(1.4); }

.login { position:absolute; background:white; width:320px; padding:20px 30px 30px; top:32px; right:-30px; border-radius:6px; z-index:2; filter:drop-shadow(1px 2px 5px rgba(0,0,0,0.1)) drop-shadow(0px 0px 1px rgba(0,0,0,0.05)); transform:translateY(-10px); opacity:0; pointer-events:none; transition:transform 0.4s, opacity 0.3s; }
.login:after { content:''; position:absolute; top:0; right:45px; margin:-8px 0 0; border-right:8px solid transparent; border-left:8px solid transparent; border-bottom:8px solid #fff; }
.login input { width:100%; margin-bottom:20px; }
.login #email { margin-bottom:10px; }
.login .error-msg { position:absolute; padding: 0 30px 0 90px; font-size:0.89em; margin-top:-2px; } 
.or-button.sso { width:100%; font-size:14px; padding-left:55px; overflow:hidden; }
.or-button.sso:after { width:40px; height:100%; color:white; display:grid; align-content:center; justify-content:center; font-family:fontAwesome; position:absolute; left:0; top:0; }
.or-button.sso.fb:after { background:#274688; content:""; }
.or-button.sso.ggl:after { background:#bb0101; content:""; }
.or-button.white.sso.loading:after { background:#4e4e4e }
.login .or { display:grid; align-items:center;width: fit-content; margin:25px auto 20px; color:#aeaeae; font-size:12px; }
.login .or:after { content:''; height:1px; width:20px; position:absolute; right:-25px; background:lightgrey; }
.login .or:before { content:''; height:1px; width:20px; position: absolute; left:-25px; background:lightgrey; }

.rsvplist { padding-block:1em; }
.rsvplist +.rsvplist { border-top:1px solid #eeeeee; }
.rsvplist-name { width:calc(100% - 65px); color:var(--clr-darker); transition:color 0.4s; }
.rsvplist-name:hover { color:var(--clr-accent); }
.rsvplist-date { color:grey; font-size:0.9em; }
.rsvplist .badge { margin-top:1.65em; }
.rsvplist + .or-button { margin-top:25px; } 

main.loading { transform:translateY(50px); opacity:0; }
main.loading ~ .main-loading { content:''; width:100vw; height:100vh; top:0; left:0; position:fixed; display:grid; align-items:center; justify-content:center; }
main.loading ~ .main-loading:before { content:''; height:60px; width:60px; border-radius:100%; border:1px solid rgba(0,0,0,0.05); border-top:1.5px solid var(--clr-lighter); animation:rotation 0.4s infinite linear; }

footer { background-color:#2d2d2d; display:grid; color:white; margin-top:50px; }
footer:before { content: ''; height: 5px; width: 100%; bottom: -1px; left: 0; position: absolute; background: linear-gradient(90deg, var(--clr-accent), #004e73); }
footer .or-container { display:grid; grid-template:1fr auto / 1fr 1fr 1fr; gap:30px min(100px,10vw); width:100%; padding-block:60px 20px;}
footer .footer-title:after { margin-left:0; }
.footer-title { font-size:20px; margin:0 auto 25px; }
.footer-title:after { content:''; height:2px; width:30px; background-color:var(--clr-darker); display:block; margin:15px auto 30px; }
footer .underline { display:block; width:fit-content; padding:5px 0 0 0; margin-bottom:5px }
footer .footer-handcrafted { text-align:center; grid-column:1 / -1; }
footer .sns i { width:38px; height:38px; font-size:18px; color:#2d2d2d; background-color:white; border-radius:100px; margin-right:18px; transition:all 0.2s ease; cursor:pointer; text-align: center; line-height: 38px; }
footer .sns i:hover { color:white; background-color:var(--clr-accent); transform:scale(1.15); }
footer .or-button { vertical-align:-1px; }
footer #newsletter { display:inline-block; color:var(--clr-grey); margin-right:10px; margin-bottom:5px; }
.footerlink { transition:color 0.2s }
.footerlink:hover { color:var(--clr-accent); }
.footerlink:after { content:''; left:0; bottom:-2px; height:1px; width:100%; position:absolute; background-color:white; transform:scaleX(0); transform-origin:right; transition:transform 0.2s, background-color 0.2s; }
.footerlink:hover:after { transform:scaleX(1); background-color:var(--clr-lighter); transform-origin:left; }

/* --- End of NAVIGATION ------ */


/* --- HOME PAGE ------- */
.home-hero { display:grid; grid-template:1fr / 1fr 1fr; height:max(75vh,500px); margin:60px 0 0 0; align-items:center; overflow:hidden; justify-items:center; box-shadow:0 0 15px rgb(0 0 0 / 5%); }
.home-hero .left { max-width:max(75%,500px); padding-inline:var(--pg-gutter); }
.home-hero .right { width:100%; height:inherit; }
.home-hero :is(picture,img) { object-fit:cover; height:100%; width:100%; }
.home-hero h1 { font-size:30px; margin-block:10px 20px; }
.home-hero h2 { font-size:18px; margin:10px 0 10px; }

.home-usp { display:flex; width:100%; justify-content:space-between; margin-block:50px; row-gap:20px; }
.home-usp h2 { font-size:1.2em; margin-bottom:15px; }
.home-usp i { display:inline-block; color:transparent; background:linear-gradient(311deg, var(--clr-accent) 30%, var(--clr-lighter) 55%); -webkit-background-clip:text; font-size:25px; margin-bottom:20px; transition:transform 0.15s; }
.home-usp-block { width:250px; padding-bottom:20px; text-align:center; transition:color 0.3s, box-shadow 0.3s; }
.home-usp-block:hover i { transform:translateY(-5px) rotate(-10deg); }
.home-usp-block:hover { color:black; box-shadow:0px 25px 50px -40px #cacaca; }

.home-why { display:grid; grid-template:auto auto / 1fr 1fr 1fr; grid-gap:50px 50px; margin-bottom:60px; }
.home-why-block { max-width:320px; padding-left:40px; }
.home-why-block i { color:transparent; background:linear-gradient(311deg, var(--clr-accent) 30%, var(--clr-lighter) 55%); -webkit-background-clip:text; font-size:20px; position:absolute; left:0; line-height:1; }
.home-why-block div { margin-top:10px; }

.home-guarantee .or-container { padding:var(--pg-gutter); display:grid; grid-template:1fr / 2fr 1fr; grid-gap:50px; margin-bottom:50px; }
.home-guarantee .unlike-title { z-index:1; }
.home-guarantee .unlike-title { color:var(--clr-accent); font-family:var(--ft-accent); font-size:25px; margin-block:10px 20px; }
.home-guarantee .or-modal { max-width:unset; padding-left:60px; z-index:2; }
.home-guarantee i { left:20px; }
.home-why-block li { padding-left:20px; }
.home-why-block li:before { content:'•'; color:var(--clr-lighter); position:absolute; left:0; }
.home-guarantee .handwritten { font-family:var(--ft-script); font-size:80px; color:var(--clr-lighter); position:absolute; bottom:0; left:var(--pg-gutter); opacity:0.5; z-index:0; }

.home-asseenon { display:flex; justify-content:space-between; flex-wrap: wrap; }
.home-asseenon span { width:min(120px,28%); aspect-ratio:120 / 75; background-image:url(static/rsvp-asseenon.png); background-size:cover; text-indent:-9999px; overflow:hidden; }

.homereviews { overflow:hidden; text-align:center }
.homereviews-container { display:flex }
.homereviews .arrow { font-size:30px; color:white; right:10px; top:45%; position:absolute; width:30px; height:30px; border-radius:300px; background-color:rgba(0,0,0,0.1); cursor:pointer; user-select:none; display:flex; align-items:center; justify-content:center; -moz-user-select:none; transition:left 0.2s, right 0.2s; }
.homereviews .arrow:hover { background-color:rgba(0,0,0,0.3); }
.homereviews .arrow.left { left: 10px; }
.homereviews .arrow.left:hover { left: 5px; }
.homereviews .arrow.right:hover { right: 5px; }
.home-rating { font-size:22px; color:#ffc107; text-align:center; width:100%; margin-bottom:20px }
.home-review { margin:20px auto; }
.home-review span { font-family:var(--ft-accent); color:var(--clr-darker); font-size:1.25em; margin-left:15px; }
.home-review span:before { content: "\201D"; position:absolute;  width:25px; height:25px; border-radius:100%; background-color:white; top:20px; left:-35px; font-family:times; filter:drop-shadow(0px 1px 1px rgba(0,0,0,.2)); color:#a4a4a4; font-size:30px; line-height:37px; }
.home-review img { width:60px; height:60px; border-radius:100px; display:inline-block; vertical-align:middle; filter:drop-shadow(0px 1px 1px rgba(0,0,0,.2)); }
.home-quote:after { content: '\201D'; display: block; font-family: times; font-size: 80px; margin-left: 70%; color: lightgrey; height:0; }
.homereviews .scroll { font-size:16px; min-width:100%; cursor:-webkit-grab; cursor:-moz-grab; -webkit-user-select:none; transform:translateZ(0); -webkit-transform:translateZ(0); padding-inline:calc(var(--pg-gutter) * 4); }
.homereviews .scroll:active { cursor:-webkit-grabbing; cursor:-moz-grabbing; }

.home-features { background:white; border-radius:5px; padding:25px 30px; display:grid; grid-gap: 15px 10px; grid-template-columns:1fr 1fr 1fr 1fr 1fr; filter:drop-shadow(1px 2px 5px rgba(0,0,0,0.1)) drop-shadow(0px 0px 1px rgba(0,0,0,0.05)); max-width:calc(var(--pg-width) - 2 * var(--pg-gutter)); --tooltip-top:-5px; --tooltip-left:20px; }
.home-features svg { width:16px; height:16px; margin-left:-3px; position:absolute; left:0; top:2px; stroke-width:1.5; stroke:var(--clr-accent); fill:none; stroke-linecap:round; stroke-linejoin:round; }
.home-features div { grid-row:1 / 9; }
.home-features div:after { content:''; height:1px; width:75px; margin-top:10px; background:var(--clr-lighter); display:block; }
.home-features span { padding-left:20px; cursor:default; }
.home-features span[tooltip]:before { content:''; display:block; position:absolute; left:30px; opacity:0; top:2px; transform:translateY(10px); transition:opacity 0.4s, transform 0.4s; pointer-events:none; border-left: 4px solid transparent; border-right: 4px solid transparent; border-bottom: 3px solid rgba(0,0,0,0.75); }
.home-features span[tooltip]:after { content:attr(tooltip); line-height:1.2; padding:6px 10px; border-radius:4px; position:absolute; left:18px; font-size:12px; color:white; background:rgba(0,0,0,0.75); opacity:0; transform:translateY(15px); transition:opacity 0.4s, transform 0.4s; pointer-events:none; z-index:1; }
.home-features span[tooltip]:hover:after { opacity:1; transform:translateY(20px); }
.home-features span[tooltip]:hover:before { opacity:1; transform:translateY(15px); }

.vid-video { width:800px; height:500px; background-color:whitesmoke; margin:0 auto 50px;  }
.vid-step { width:100%; display:grid; padding:30px 0 25px; margin:-30px 0 30px; grid-column-gap:30px; grid-template-columns:1fr 1fr 1fr; position:sticky; position:-webkit-sticky; top:60px; z-index:2; background-color: rgba(255,255,255,0.95); backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(2px); }
.vid-step > span { font-size:17px; padding:13px 20px; background-color:white; border-radius:4px; filter:drop-shadow(1px 2px 3px rgba(0,0,0,0.1)) drop-shadow(0px 0px 1px rgba(0,0,0,0.05)); cursor:pointer; transition:color 0.2s, filter 0.3s; }
.vid-step > span:hover { color:var(--clr-lighter); filter:drop-shadow(1px 2px 4px rgba(0,0,0,0.15)) drop-shadow(0px 0px 2px rgba(0,0,0,0.05)) }
.vid .vid-step span:before { position:absolute; color:#dcdcdc; font-size:20px; right:18px; top:50%; transform:translateY(-50%); }
.vid .vid-step span:nth-of-type(1):before { content:'1'; }
.vid .vid-step span:nth-of-type(2):before { content:'2'; }
.vid .vid-step span:nth-of-type(3):before { content:'3'; }
.vid.step1 .vid-step span:nth-of-type(1):before { right: 11px; background-color: whitesmoke; padding: 4px 8px; border-radius: 4px;color: grey; }
.vid.step2 .vid-step span:nth-of-type(2):before { right: 11px; background-color: whitesmoke; padding: 4px 8px; border-radius: 4px;color: grey; }
.vid.step3 .vid-step span:nth-of-type(3):before { right: 11px; background-color: whitesmoke; padding: 4px 8px; border-radius: 4px;color: grey; }
.vid.step1 .vid-step span:nth-of-type(1), .vid.step2 .vid-step span:nth-of-type(2), .vid.step3 .vid-step span:nth-of-type(3) { color:var(--clr-accent); border-left:2px solid var(--clr-lighter); margin-left:-2px;  }
.vid-details { width:100%; height:fit-content; height:-moz-fit-content; display:flex; flex-wrap: wrap; }
.vid-details > span { font-size:17px; width:100%; display:grid; grid-gap:20px; grid-template-columns:0.9fr 1.1fr; margin-bottom: 50px; }
.vid-illustration { display:grid; align-items:center; justify-items:center }
.vid-illustration img, .vid-illustration picture { width:100% }
.vid-explanation { padding:40px; } 
.vid-title { font-size:26px; color:var(--clr-greysat); font-family:var(--ft-accent); } 
.vid-title.new:before { content:'NEW'; font-family:var(--ft-default); background-color:var(--clr-lighter); color:white; border-radius:3px; padding:3px 8px; font-size:12px; font-weight:normal; vertical-align:4px; margin-right:12px; }
.vid-description { display:block; font-size:16px; margin-top:20px; line-height:1.5;  }
.vid-description:after { content:attr(data-icon); font-family:simple-line-icons; font-size:22px; position:absolute; -webkit-font-smoothing:antialiased; left:0; bottom: -50px; color:transparent; background:linear-gradient(311deg, var(--clr-accent) 30%, var(--clr-lighter) 55%); -webkit-background-clip:text; }
.vid-carousel-container { display: block; width: 100%; overflow: hidden; transition:height 0.8s 0.5s; }
.vid-carousel { width:300%; display: grid; grid-template-columns: 1fr 1fr 1fr; transition:transform 0.5s; }
.vid.step1 .vid-carousel { transform: translateX(0); }
.vid.step2 .vid-carousel {transform: translateX(calc(-100% / 3));}
.vid.step3 .vid-carousel { transform: translateX(calc(-200% / 3)); }

.resume-rsvp { background:whitesmoke; grid-column:1 / -1; margin:0 auto 25px; text-align:center; padding:10px 20px 25px; border-radius:5px; }
.themes-home, .themes-designs { display:grid; grid-template-columns:repeat(3, 1fr); grid-gap:40px; max-width:1500px; margin-inline:auto; padding-inline:var(--pg-gutter); }
.popup.start .themes-home { padding-inline:0; grid-gap:35px; }

.blog { background-color:#484848; color:white; padding-block:30px; margin-top:20px; text-align:center; margin-bottom:-50px; }
.blog .or-container { gap:35px; }
.blog .blog-title { width:25%; text-align:left; transition:color 0.3s; }
.blog .blog-title:hover { color:white }
.blog-title:after { content:''; height:1px; width:100%; background-color:white; display:block; margin:7px auto; transform:scaleX(0); transition:transform 0.2s, background-color 0.2s; transform-origin:right; }
.blog-title:hover:after { background-color:var(--clr-darker); transform:scaleX(1); transform-origin:left; }
.blog .readmore { font-size:0.9em; color:#bdbdbd; background-color:#505050; width:25%; padding:8px 12px; border-radius:4px; text-align:left; height:fit-content; height:-moz-fit-content; border-bottom:1px solid #404040; line-height:1.4; margin-top:-3px; transition:color 0.2s }
.blog .readmore b { font-weight:300; color:white; transition:color 0.4s; }
.blog .readmore:hover { color:white; }
.blog .readmore:hover b { color:var(--clr-accent); }

.theme-theme { overflow:hidden; border-radius:5px; box-shadow: 0 1px 2px rgb(0 0 0 / 5%), 0 2px 10px rgb(0 0 0 / 5%), 0 4px 8px rgb(0 0 0 / 2%), 0 8px 16px rgb(0 0 0 / 2%); }
.theme-theme img { transition:transform 0.3s; }
.theme-theme:hover img { transform:scale(1.05) }
.theme-theme .theme-ui { position:absolute; bottom:0; left:0; padding:0.5em 1em 1em; background:rgba(0,0,0,0.5); width:100%; color:white; transform:translateY(101%); text-shadow:2px 1px 3px rgb(0 0 0 / 50%); transition:transform 0.4s; display:grid; grid-template: auto auto / 1fr 1fr; grid-gap:10px 15px; border-radius:0; }
.theme-theme:hover .theme-ui { transform:translateY(0); }
.theme-title { grid-column:1 / -1 }
.theme-theme .or-button { font-size:13px; text-shadow:none; width:100% }
.theme-theme .or-button.white { grid-column:1 / 2; }
.theme-theme .or-button:not(.white) { grid-column:2 / 3; }
.theme-label { position:absolute; right:10px; top:10px; font-size:0.7rem; font-weight:bold; letter-spacing:0.1em; color:white; padding:5px 10px; border-radius:2px; }
.theme-label:after { content:attr(data-type); text-transform:uppercase; }
.theme-label:before {font-family:Simple-Line-Icons; margin-right:8px;}
.theme-label[data-type="popular"] { background-color:#ff8a65; }
.theme-label[data-type="popular"]:before { content:''; }
.themes-home span, .popup .theme-home span { display:none; }
/* --- End of HOME PAGE ------- */


/* --- COMMON STYLES --- */
.title { font-family:var(--ft-accent); color:var(--clr-accent); font-size:32px; text-align:center; margin:80px auto 50px; padding-top:20px; padding-inline:var(--pg-gutter); }
.title:after { content:''; border-bottom:1px solid #d4d4d4; width:50px; display:block; margin:auto; padding:10px; }
.subtitle { font-size:0.9em; text-transform:uppercase; font-weight:bold; color:var(--clr-lighter); font-family:var(--ft-default); letter-spacing:0.125em; }
.subtitle.small { font-size:0.875em; letter-spacing:0.1em;}
.subtitle .ico { margin-right:10px; vertical-align:-1px; color:var(--clr-darker); }
.description { text-align:center; }
.description[data-icon] { padding-left:calc(3.5em + var(--pg-gutter)); padding-right:var(--pg-gutter); width:fit-content; margin-inline:auto; text-align:left; }
.description[data-icon]:before { content: attr(data-icon); font-family:simple-line-icons; position:absolute; color:transparent; background:linear-gradient(311deg, var(--clr-darker) 30%, var(--clr-lighter) 55%); -webkit-background-clip:text; font-size:1.5em; width:1.1em; height:1.1em; left:var(--pg-gutter); }
.mediumtitle { margin-block:40px 15px; width:100%; font-family:var(--ft-accent); color:var(--clr-darker); font-size:1.35em; }
.mediumtitle:after { content:''; width:35px; height: 10px; display:block; border-bottom: 1px solid var(--clr-lighter); margin:0 0 20px; }
.mediumtitle.center:after { margin-inline:auto; }
.smalltitle { font-size:1.3em; margin-bottom:15px; }
.highlight { font-weight:300; color:var(--clr-accent); }
.ft-default { font-family:var(--ft-default); }
.ft-accent { font-family:var(--ft-accent); }
.clr-accent { color:var(--clr-accent); }
.clr-darker { color:var(--clr-darker); }
.clr-lighter { color:var(--clr-lighter); }
.clr-grey { color:var(--clr-grey); }
main > .title:first-child, main > .subtitle:first-child { margin-top:100px; padding-top:20px; }
span[data-icon]:before { content:attr(data-icon); font-family:simple-line-icons; left:2px; margin-right:0.8em; font-size:0.9em; }
.subtitle + .title { margin-top:0; padding-top:10px; }
.flex { display:flex; align-items:center; justify-content:center; }
.flex-v { display:flex; align-items:center; justify-content:center; flex-direction:column; }
.grid-fullwidth { grid-column:1 / -1; }
.center { text-align:center; }
.margin-auto { width:fit-content; margin:auto; }
.top0 { margin-top:0px }
.top10 { margin-top:10px }
.top20 { margin-top:20px }
.top30 { margin-top:30px }
.top50 { margin-top:50px }
.top80 { margin-top:80px }
.top100 { margin-top:100px }
.bottom10 { margin-bottom:10px }
.bottom20 { margin-bottom:20px }
.bottom30 { margin-bottom:30px }
.bottom50 { margin-bottom:50px }
.gap10 { gap:10px }
.gap20 { gap:20px }
.gap30 { gap:30px }
.gap50 { gap:50px }
.dispnone { display:none !important; }
.fullwidth-bg { background: #fbfbfb; padding-block:15px; }
.fullwidth-img { height:250px; overflow:hidden; }
.fullwidth-img:before { content:''; width:100%; height:100%; display:block; position:absolute; background-image:linear-gradient(165deg,#545454,#000000); opacity:0.85; z-index:1; }
.fullwidth-img picture { width:100%; height:100%; display:flex; filter:grayscale(100%) contrast(1.8); }
.fullwidth-img img { object-fit:cover; width:100%; height:auto; }
.or-button { display:inline-flex; align-items:center; background:var(--clr-accent); font-size:16px; width:fit-content; height:fit-content; padding:0.5em 1.2em; color:white; border-radius:4px; cursor:pointer; font-weight:bold; white-space:nowrap; transition:background-color 0.3s, filter 0.5s, color 0.3s, outline 0.3s, box-shadow 0.3s; }
.or-button:hover { background-color:var(--clr-darker); filter:drop-shadow(1px 2px 3px rgba(0,0,0,0.1)) drop-shadow(0px 0px 1px rgba(0,0,0,0.05)); }
.or-button.white { background:white; color:var(--clr-grey); box-shadow:0px 1px 3px rgb(0 0 0 / 10%); letter-spacing:0.05em; font-weight:var(--weight-default); transition:color 0.2s, box-shadow 0.4s; }
.or-button.white:hover { color:var(--clr-accent); box-shadow:0px 1px 4px rgb(0 0 0 / 12%); }
.or-button.outline { color:var(--clr-darker); outline:1px solid var(--clr-accent); background-color:transparent; font-weight:var(--weight-default); }
.or-button.outline:hover { color:var(--clr-darker); outline:1px solid var(--clr-lighter); }
.or-button.outline.red { outline-color:var(--clr-error); color:var(--clr-grey); }
.or-button.outline.red svg { stroke:var(--clr-error); }
.or-button.disabled { background:lightgrey; pointer-events:none; }
.or-button.disabled.hover { pointer-events:initial; cursor:not-allowed }
.or-button:is(.white,.outline).disabled { color:lightgray; background:white; outline-color:#e6e6e6; filter:none; }
.or-button:is(.white,.outline).disabled b { color:#c0c0c0; }
.or-button.medium { font-size:0.9em; letter-spacing:0.025em; }
.or-button.small { font-size:0.8em; letter-spacing:initial; }
.or-button.dense { padding:0.4em 0.96em; border-radius:3px; }
.or-button.link { background: transparent; color:var(--clr-lighter); font-weight:var(--weight-default); }
.or-button.link:hover { color:var(--clr-darker); filter:none }
.or-button.link:before { content:''; height:1px; width:0; position:absolute; display:block; bottom:5px; background:var(--clr-lighter); transition:width 0.3s; }
.or-button.link:hover:before { width:calc(100% - 2.4em - 5px); }
.or-button.link svg { font-size:1em; vertical-align:-3px; margin-left:5px; }
.or-button.link.inline { padding:0; font-size:inherit; }
.or-button.link.inline:before { bottom:0px; }
.or-button.link.inline:hover:before { width:calc(100% - 6px); }
.or-button.link:after { content:url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke-width="1.5" stroke="%231da3c9" fill="none" stroke-linecap="round" stroke-linejoin="round"%3E%3Cpath stroke="none" d="M0 0h24v24H0z"%3E%3C/path%3E%3Cline x1="5" y1="12" x2="19" y2="12"%3E%3C/line%3E%3Cline x1="15" y1="16" x2="19" y2="12"%3E%3C/line%3E%3Cline x1="15" y1="8" x2="19" y2="12"%3E%3C/line%3E%3C/svg%3E'); margin-left:5px; width:1em; height:1em; margin-right:0.2em; }
.or-button > svg { margin-right:0.7em; }
.or-button.loading { background:grey; pointer-events:none; }
.or-button.loading:before { content:''; border:1px solid #6d6d6d; border-bottom:1px solid lightgrey; width:1.1em; height:1.1em; aspect-ratio:1 / 1; border-radius:100px; display:inline-block; margin:0 10px 0 0; animation: rotation 0.4s infinite linear; }
.or-button:is(.white,.outline).loading { color:#aeaeae; background:#fbfbfb; outline-color:#e1e1e1; }
.or-button:is(.white,.outline).loading:before { border:1px solid rgb(var(--clr-accent-rgb),0.3); border-bottom:1px solid var(--clr-accent); top:-1px; }
.or-button.loading > svg { display:none; }
.error-msg { margin-top:15px; color:var(--clr-error); line-height:1.35em; }
.error-msg a { color:grey; letter-spacing:initial; font-size:1em; }
.error-msg.success { color:var(--clr-success); }
.underline { cursor:pointer; transition:color 0.2s; }
.underline:hover { color:var(--clr-accent); cursor:pointer; }
.underline:after { content:''; position:absolute; height:1px; width:100%; transform: scaleX(0); transform-origin:right; background-color:white; bottom:-2px; left:0; transition:transform 0.2s, background-color 0.2s; }
.underline:hover:after { transform:scaleX(1); background-color:var(--clr-lighter); transform-origin:left; }
.underline svg { margin-left:0.5em; vertical-align:middle; }
.or-container { padding-inline:var(--pg-gutter); margin-inline:auto; max-width:var(--pg-width); }
.or-container.fullwidth { padding-block:var(--pg-gutter); max-width:100vw; display:flex; justify-content:center; }
.ellipsis { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ellipsis-twolines { overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:2; line-clamp: 2; -webkit-box-orient: vertical; }
.or-modal { background: white; padding:20px 30px 30px; border-radius:6px; filter:drop-shadow(1px 2px 5px rgba(0,0,0,0.1)) drop-shadow(0px 0px 1px rgba(0,0,0,0.05)); }
svg { width:1em; height:1em; margin-right:0.2em; stroke-width:1.5; stroke:var(--clr-accent); fill:none; stroke-linecap:round; stroke-linejoin:round; }
u { text-decoration:underline 1px dotted #c2c2c2; text-underline-offset:3px; }
input:not(.select), textarea, .stripe-input { display:block; border-radius:3px; border:1px solid lightgrey; padding:8px 12px 8px 40px; caret-color:var(--clr-accent); transition:border 0.4s, padding 0.2s; }
input[noicon], textarea[noicon] { padding-left:12px }
input:not(.select):-webkit-autofill { -webkit-box-shadow: 0 0 0 30px white inset; }
input:not(.select):focus, textarea:focus, .stripe-input:focus-within, .stripe-input.StripeElement--focus { border:1px solid var(--clr-lighter); }
input:not(.select)::placeholder, textarea::placeholder { color:#dcdcdc; letter-spacing:initial; }
input:not(.select).error, textarea.error, .stripe-input.StripeElement--invalid { border:1px solid var(--clr-error); }
.stripe-input.StripeElement--complete { border: 1px solid var(--clr-success); }
input:is([type=checkbox],[type=radio]) { all:unset }
input[type=password] { letter-spacing:0.15em; }
label { display:block; text-transform:uppercase; color:var(--clr-lighter); font-weight:bold; font-size:0.8em; letter-spacing:0.125em; }
label[data-icon]:before { content:attr(data-icon); font-family:simple-line-icons; color:var(--clr-accent); position:absolute; left:14px; top:1.8em; font-size:15px; font-weight:100; z-index:2 }
label.absolute { position:absolute; top:calc(-1em - 5px); }
label[mandatory]:after { content:'*'; color:var(--clr-error); margin-left:5px; }
[or-tooltip]:before, [or-tooltip-right]:before, [or-tooltip-hidden]:before { content:''; display:block; position:absolute; left:calc(var(--tooltip-left,0px) + 12px); top:calc(100% - 3px + var(--tooltip-top, 0px)); opacity:0; transform:translateY(5px); transition:opacity 0.4s, transform 0.4s; pointer-events:none; border-left:4px solid transparent; border-right:4px solid transparent; border-bottom:3px solid rgba(0,0,0,0.75); z-index:1; }
[or-tooltip]:after, [or-tooltip-right]:after, [or-tooltip-hidden]:after { content:attr(or-tooltip); font-family:var(--ft-default); width:var(--tooltip-width,auto); top:calc(100% + var(--tooltip-top, 0px)); left:calc(var(--tooltip-left,0px)); line-height:1.3; white-space:normal; text-transform:none; padding:6px 10px; border-radius:4px; position:absolute;font-size: 13px;font-weight: 100;letter-spacing: initial;color:white; background:rgba(0,0,0,0.75); opacity:0; transform:translateY(5px); transition:opacity 0.4s, transform 0.4s; pointer-events:none; z-index:1; }
[or-tooltip]:hover:after, [or-tooltip-right]:hover:after, [or-tooltip-hidden].show:after { opacity:1; transform:translateY(10px); }
[or-tooltip]:hover:before, [or-tooltip-right]:hover:before, [or-tooltip-hidden].show:before { opacity:1; transform:translateY(10px); }
[or-tooltip-right]:before { right:12px; left:unset; }
[or-tooltip-right]:after { content:attr(or-tooltip-right); right:0; left:unset; }
[or-tooltip-hidden]:after { content:attr(or-tooltip-hidden); }
.or-select { position:absolute; top:calc(100% + 3px); text-align:left; background-color:white; padding:0.8em 0.7em; border-radius:6px; font-size:0.9em; filter:drop-shadow(1px 2px 5px rgba(0,0,0,0.1)) drop-shadow(0px 0px 1px rgba(0,0,0,0.05)); margin-top:10px; color:var(--clr-grey); width:max-content; }
.or-select:before { content:''; position:absolute; top:0; left:20px; margin:-8px 0 0; pointer-events:none; border-right:8px solid transparent; border-left:8px solid transparent; border-bottom:8px solid #fff; }
.or-select a { padding:0.35em 0.9em; border-radius:4px; display:flex; flex-wrap:wrap; align-items:center; gap:0 10px; font-family:var(--ft-default); font-weight:var(--weight-default); transition:background 0.3s, color 0.3s, padding 0.3s; }
.or-select a:hover { background:#f7f7f7; color:var(--clr-darker); cursor:pointer; padding-left:calc(0.9em + 5px); padding-right:calc(0.9em - 5px); }
.or-select a.disabled, .or-select a.disabled i { pointer-events:none; color:#d6d6d6; }
.or-select hr { line-height:10px; height:1px; border:none; background:#efefef; margin:2px 0px; }
.or-select i { flex-basis:100%; font-size:0.9em; padding-block:0.2em 0.1em; line-height:1.35; color:#a6a6a6; font-style:normal; }
.or-selectbox { height:auto; font-size:0.95em; border-radius:3px; padding:5px 40px 5px 12px; width:var(--selectbox-width); border:1px solid #ebebeb; cursor:pointer; transition:color 0.4s, border 0.4s }
.or-selectbox:hover { color:var(--clr-darker); border:1px solid var(--clr-lighter); }
.or-selectbox:after { content:'\e604'; font-family:simple-line-icons; color:#607D8B; font-size:0.6em; position:absolute; right:15px; top:1em; pointer-events:none; transition:color 0.4s }
.or-selectbox:hover:after { color:var(--clr-lighter); }
.or-select img { width:1em; }
.or-select.right { right:-15px; }
.or-select.right:before { left:unset; right:20px; }
.or-select a.loading { background: #f9f9f9; color:#a4a4a4; pointer-events:none; }
.or-select a.loading:before { content:''; border:1px solid #d0d0d0; border-bottom:1px solid #747474; width:1em; height:1em; aspect-ratio:1 / 1; border-radius:100px; display:inline-block; margin:0 0.2em 0 0; animation:rotation 0.4s infinite linear; }
.or-select a.loading svg { display:none; }
.select-wrapper:after { content:'\e604'; font-family: simple-line-icons; color:var(--clr-lighter); font-size:0.5em; position:absolute; transform:translate(-20px, calc(50% + 2px)); pointer-events:none; }
.select-wrapper:hover:after { color:var(--clr-accent); }
select { -webkit-appearance:none !important; -moz-appearance:none !important; appearance:none !important; padding:3px 20px 3px 8px; font-size:14px !important; border:1px solid #ebebeb; transition:border 0.3s; border-radius:3px; background-color:white; }
select:hover { border:1px solid var(--clr-lighter); }
select[disabled]:hover { border:1px solid #ebebeb; cursor:not-allowed }
.select-container:after { content:'\e604'; font-family:simple-line-icons; color:#607D8B; font-size:8px; position:absolute; transform:translate(-20px, 9px);}
.select-container:hover:after { color:var(--clr-lighter); }
.badge { position:absolute; top:0.55em; right:0; padding:0.2em 0.6em; border-radius:3px; text-transform:uppercase; font-size:0.55rem; letter-spacing:0.1em; font-weight:bold; color:white; }
.badge.inactive { background:lightgrey; }
.badge.inactive:before { content:'inactive'; }
.badge.active { background:var(--clr-lighter); }
.badge.active:before { content:'active'; }
.badge.you { background:var(--clr-accent); }
.badge.you:before { content:'you'; }
.badge.admin { background:var(--clr-lighter); }
.badge.admin:before { content:'admin'; }

.popup { position:fixed; inset:0; margin:auto; z-index:13; overflow-y:auto; overscroll-behavior:contain; width:600px; height:530px; max-width: min(calc(100% - 2 * var(--pg-gutter)),calc(var(--pg-width) - 2 * var(--pg-gutter))); max-height:80vh; padding:25px 30px; background-color: white; filter:drop-shadow(1px 2px 8px rgba(0,0,0,0.15)) drop-shadow(0px 0px 2px rgba(0,0,0,0.1)); border-radius:6px; pointer-events:none; opacity:0; transform:translateY(-30px); transition:transform 0.3s, opacity 0.3s; }
/* .popup { position:fixed; inset:0; margin:auto; z-index:13; width:600px; height:530px; max-width:min(calc(100% - 2 * var(--pg-gutter)),calc(var(--pg-width) - 4 * var(--pg-gutter))); max-height:80vh; padding:25px 0; background-color: white; filter:drop-shadow(1px 2px 8px rgba(0,0,0,0.15)) drop-shadow(0px 0px 2px rgba(0,0,0,0.1)); border-radius:6px; pointer-events:none; opacity:0; transform:translateY(-30px); transition:transform 0.3s, opacity 0.3s; }
#popup-content { height:100%; overflow-y:auto; overscroll-behavior:contain; padding-inline:30px; } */
.popup-close { position:absolute; right:30px; top:30px; z-index:1; background:white; border:1px solid #ebebeb; padding:0.5em; display:flex; border-radius:5px; cursor:pointer; transition:border 0.4s; }
.popup-close:hover { border:1px solid var(--clr-lighter); }
.popup-close:hover svg { stroke:var(--clr-darker); }
.popup-close svg { margin:0; stroke:#8d8d8d; }
.popup.loading:after { height:60px; width:60px; content:''; position:absolute; top:calc(50% - 30px); left:calc(50% - 30px); border-radius:100%; border:1px solid rgb(var(--clr-accent-rgb),0.3); border-bottom:1px solid var(--clr-accent); animation:rotation 0.4s infinite linear; }
.popup.loading #popup-content { opacity:0; }
.popup #popup-content { opacity:1; transition:opacity 0.4s; }
.popup .title { text-align:left; font-size:1.7em; margin-top:0; padding-top:0; padding-inline:0; color:var(--clr-darker);}
.popup .title:after { margin-left:0; width:100%; padding:5px; border-color:#ebebeb;margin-bottom: 50px;}
.popup .title svg { font-size:0.8em; margin-right:0.3em; transform:translateY(0.1em); stroke:var(--clr-lighter); }
.popup .description { margin-bottom:40px; }
.popup-greybg { position:fixed; inset:0; z-index:12; cursor:initial; opacity:0; width:100vw; height:100vh; transition:opacity 0.3s, background-color 0s 0.4s; pointer-events:none }
.popup.show + .popup-greybg { background-color:rgba(0,0,0,0.5); opacity:1; pointer-events:initial; transition:opacity 0.3s, background-color 0s 0s;  }
.popup.addadmin { width:800px; }
.popup.guest_labels { width:min(750px, calc(100% - var(--pg-gutter))); height:550px; }
.popup.don_faq { width:680px }

[data-scroll] { transition:opacity 1s, transform 0.8s; }
[data-scroll="in"] { opacity:1; transform:translateY(0); }
[data-scroll="out"] { opacity:0; transform:translateY(30px); }
.homereviews[data-scroll] { transition: opacity 1s, transform 0.8s; }
.homereviews[data-scroll="in"] { opacity:1; transform:translateX(0); }
.homereviews[data-scroll="out"] { opacity:0; transform:translateX(-30px); }
.title[data-scroll] { transition:opacity 1.5s; }
.title[data-scroll="in"] { opacity:1; transform:translate(0); }
.title[data-scroll="out"] { opacity:0; transform:translate(0); }
.title[data-scroll]:after { transition:transform 2.5s; transform-origin:left; }
.title[data-scroll="in"]:after { opacity:1; transform:scaleX(1); }
.title[data-scroll="out"]:after { opacity:0; transform:scaleX(0); transform-origin: right; }
/* --- COMMON STYLES --- */


/* --- DESIGNS PAGE --- */
.themes-filters { grid-column:1 / -1; display:grid; grid-auto-flow:column; margin-inline:calc(var(--pg-gutter) * -1); grid-gap:30px; padding:25px var(--pg-gutter) 20px; grid-auto-flow:column; position:sticky; position:-webkit-sticky; top:60px; z-index:2; background-color: rgba(255,255,255,0.95); backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(2px); }
.themes-filters > div { display:flex; flex-direction:column; flex:1; gap:20px; margin-bottom:20px; }
.themes-filters .or-button { font-size:1em; min-width:9em; }
.themes-filters .or-button.clear { outline:1px solid var(--clr-lighter); outline-offset:-1px; }
.themes-filters .filters-container { display:flex; gap:15px; flex-wrap:wrap; }
.themes-designs span { grid-column:1 / -1; font-size:0.9em; line-height:1.2; text-shadow:1px 1px 2px rgb(0 0 0 / 80%); }
.themes-designs .theme-ui { background:linear-gradient(0deg, rgba(0,0,0,0.8), rgba(0,0,0,0.5)); }
/* --- DESIGNS PAGE --- */

/* --- FAQ PAGE --- */
.faq { display:grid; grid-template-columns:1fr 2fr; grid-gap:80px 50px; }
.faq-q { color:var(--clr-darker); font-family:var(--ft-accent); font-size:1.15em; }
.faq-q:after { content:''; position:absolute; left:0; bottom:5px; width:100%; height:1px; background:whitesmoke; }
.faq .description { grid-column:1 / -1; margin-top:60px; text-align:left; }
.faq b { font-weight:500; }
/* --- FAQ PAGE --- */

/* --- CONTACT PAGE ------- */
.contact { display:grid; grid-template:auto / 2fr 1fr; grid-gap:100px; }
.contact-form-fill { padding-left:73px; margin-top:20px; }
.contact-form input, .contact-form textarea { width:500px; margin-bottom:20px; }
.contact-form textarea { height:200px }
.topfaq li { left:15px; margin-bottom:0.7em; line-height:1.3; width:fit-content }
.topfaq li:before { content:'•'; color:var(--clr-lighter); position:absolute; left:-15px; }
.topfaq-q { color:var(--clr-darker); font-family:var(--ft-accent); font-size:1.25em; display:none; }
.topfaq-a { text-align:left; margin-top:40px; display:none; }
.topfaq-a b { font-weight:500; color:var(--clr-darker) }
/* --- CONTACT PAGE ------- */

/* --- ACCOUNT PAGE ------- */
.account-email { display:flex; flex-wrap:wrap; align-items:center; gap:8px 18px; }
.account-events { display:grid; grid-template:auto / repeat(3,1fr); grid-gap:40px; }
.account-card { padding:calc(160px + 25px) 25px 20px; }
.account-card:hover img { transform:scale(1.1); }
.account-card .card-top { position:absolute; top:0; left:0; height:160px; width:100%; }
.account-imgcontainer { overflow:hidden; width:100%; height:100%; border-radius:4px 4px 0 0; }
.account-imgcontainer img { object-fit:cover; width:100%; height:100%; transition:transform 0.4s }
.account-card .card-bottom { display:grid; grid-template:min-content min-content auto / 1fr; height:100%; }
.account-card-title { width: calc(100% - 70px); color:var(--clr-accent); line-height:1.2; font-size:1.2em; margin-bottom:5px; transition:color 0.3s; overflow:hidden; -webkit-line-clamp:2; -webkit-box-orient:vertical; display:-webkit-box; }
.account-card-title:hover { color:var(--clr-darker); }
.account-card-date { color:grey; font-size:0.95em; }
.account-links { display:flex; flex-wrap:wrap; gap:15px; margin-top:20px; align-items:center; align-self:flex-end; }
.account-links .or-button.white { margin-left:auto; }
.account-icons { position:absolute; z-index:3; display:flex; gap:5px; padding:10px; width:100%; pointer-events:none; }
.account-icons .ico { background: rgb(0,0,0,0.3); height:30px; width:30px; border-radius:100%; display:flex; align-items:center; justify-content:center; font-size:0.8em; color:white; pointer-events:initial; }
.account-icons .more { margin-left:auto; background: white; color: var(--clr-grey); box-shadow: 0px 1px 3px rgb(0 0 0 / 10%); cursor:pointer; transition:color 0.2s, box-shadow 0.4s; }
.account-icons .more:hover { color:var(--clr-accent); }
.account-icons .or-select { font-size:1.1em; }
.account-events .flex-v { height:300px }
.account-start { grid-column:1 / -1; text-align:center; }
label[for=oldpass]:before { color:var(--clr-darker); }
label[for=oldpass] { color:var(--clr-darker); }
#oldpass, #newpass1, #newpass2, #forgot-email, .changepass .error-msg, .password .error-msg { width:100%; }
/* --- ACCOUNT PAGE ------- */



/* --- ACTIVATE PAGE --- */
.activate-included { display:grid; grid-template:repeat(5,auto) / repeat(3,1fr) 1.6fr; grid-gap:10px; margin-block:50px; --tooltip-top:-10px; }
.activate-included .or-modal { grid-row:1 / -1; grid-column:-2 / -1; max-width:100%; padding-left:60px; }
.activate-included .or-modal .ico { left:20px; }
.activate-included .subtitle { grid-row:1 / 2; grid-column:1 / -1; margin-bottom:5px; }
.activate-included svg { vertical-align:-3px; }
.order { display:grid; grid-template:1fr / 1fr 1fr; grid-gap:20px 80px; padding-top:30px; z-index:1; }
.order label { white-space:nowrap; }
.order-recap { display:grid; grid-template:auto / auto auto; grid-gap:5px; height:fit-content; }
.order-recap > div:nth-of-type(odd) { color:var(--clr-darker); }
.order-recap > div:nth-of-type(even) { text-align:right; }
.order-recap hr { grid-column:1/-1; border-top:1px solid #eaeaea; margin-block:5px; }
.order-discount { color:var(--clr-darker); font-weight:300; }
.order-discount .order-symbol { font-weight:100; }
.order-total { color:var(--clr-accent); font-weight:bold; }
.order-total:after { content:'ONE-TIME FEE'; display:block; font-weight:300; color:#b7b7b7; font-size:0.75em }
.order-symbol { font-size:0.85em; margin-right:0.2em; font-weight:300; }
.order-reassurance { background:#fafafa; padding:15px 20px 15px 25px; font-size:0.9em; grid-column:1 / -1; display:grid; grid-gap:5px; border-radius:5px; margin-top:20px; }
.order-reass-line { color:var(--clr-grey); }
.order-reass-line:before { content:attr(data-icon); font-family:simple-line-icons; color:var(--clr-darker); font-size:0.8em; margin-right:1em; }
.order-reass-line.secure { display:grid; grid-auto-flow:column; align-items:center; grid-template-columns:auto auto 1fr; }
.order-reass-line.secure img { max-width:min(100%,200px); padding-left:15px; justify-self:right; top:1px; }
.order-reass-line [or-tooltip] { --tooltip-left:-8px; --tooltip-width:18em; }
.order-reass-line svg { stroke:lightgrey; top:3px; left:3px; }
.order input, .order .stripe-input { width:100%; margin-bottom:20px; height:40px; display:grid; align-items:center; }
.order-exp-cvv { display:grid; grid-auto-flow:column; grid-template:auto auto / 1fr 1fr; grid-gap:0 20px; }
.order-wallet { margin-top:50px; }
.order-wallet:after { content:''; height:1px; width:100%; position:absolute; background:#e5e5e5; top:-10px; }
.order-wallet-buttons { display:flex; gap:20px; flex-wrap:wrap; margin-top:20px; }
#applepay { background:black; height:37px; line-height:1; font-weight:300; display:flex; justify-content:center; }
#applepay svg { fill:white; stroke:none; font-size:0.9em; margin-right:10px; }
#applepay:hover { background:#202020; }
#paypal { padding:0; background:#286fb6; transition:none; overflow:hidden; height:37px; margin-bottom:10px; }
#paypal:hover { background:#2569ad }
#paypal.loading:before { position:absolute; left:calc(50% - 60px); border:1px solid #ffffff61; border-top:1px solid white; z-index:1000; }
.activate-payline { display:grid; grid-template:1fr / auto 1fr; grid-gap:20px; margin-block:20px; }
.activate-payline .error-msg { display:flex; align-items:center; margin-top:0; line-height:1.3; }
.order-wallet .error-msg { margin-top:5px; }
/* --- ACTIVATE PAGE --- */

/* --- COMPARISON PAGE --- */
.bestrsvp :is(td,th) { border-bottom:1px solid #dedede; padding:15px 50px 15px 5px; vertical-align:top; text-align:left; }
.bestrsvp th { position:sticky; top:60px; background-color:rgba(255,255,255,0.8); backdrop-filter:blur(2px); -webkit-backdrop-filter:blur(2px); z-index:2; }
.bestrsvp td:nth-of-type(1) { width:27%; }
.bestrsvp td:nth-of-type(n+2) { width:21%; --tooltip-width:max-content; }
.bestrsvp :is(td,th):nth-of-type(2) { --clr-competitor:var(--clr-accent); padding:15px 60px 15px 0px; }
.bestrsvp :is(td,th):nth-of-type(3) { --clr-competitor:#45286b; padding:15px 30px 15px 30px; }
.bestrsvp :is(td,th):nth-of-type(4) { --clr-competitor:#e0856f; padding:15px 0px 15px 60px; }
.bestrsvp tr:not(:first-of-type):hover { background-color:#f7f7f7; }
.bestrsvp td:nth-of-type(1) { color:var(--clr-darker); font-size:1.1em; }
.bestrsvp-price { font-size:2em; color:grey; margin:6px 0 0; }
.bestrsvp-info { font-size:0.8em; color:#949494; max-width:75%; margin:5px 0;}
.bestrsvp-comment { text-transform:uppercase; font-size:0.8em; height:3em; letter-spacing:0.1em; color:var(--clr-darker); margin:2px 0; }
.bestrsvp-trynow { font-family:var(--ft-default); color:var(--clr-grey); font-size:0.9em; margin:25px 0 15px; background-color:whitesmoke; padding:10px 15px; border-radius:4px; }
.bestrsvp a { color:var(--clr-competitor); font-weight:300; }
.bestrsvp i { display:block; font-size:0.9em; color:grey; line-height:1.1; margin-block:5px;}
.bestrsvp a:is([yes],[no]):before { width:1em; display:inline-block; transform:translateY(2px); margin-right:5px; }
.bestrsvp a[yes]:before { content:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' stroke-width='3' stroke='%238dc68f' fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath stroke='none' d='M0 0h24v24H0z' fill='none'/%3E%3Cpath d='M5 12l5 5l10 -10' /%3E%3C/svg%3E"); }
.bestrsvp a[no]:before { content:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' stroke-width='2' stroke='%23ff6b64' fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath stroke='none' d='M0 0h24v24H0z' fill='none'/%3E%3Cline x1='18' y1='6' x2='6' y2='18' /%3E%3Cline x1='6' y1='6' x2='18' y2='18' /%3E%3C/svg%3E"); }
.bestrsvp-list a { font-size:0.9em; font-weight:var(--weight-default); }
.bestrsvp .badge { font-size:0.4em; background:white; color:#b1b1b1; border:1px solid lightgrey; font-weight:var(--weight-default); position:relative; top:-3px; padding:0.15em 0.45em; }
/* --- COMPARISON PAGE --- */

/* --- OVERVIEW PAGE --- */
.overview-howto { display:grid; grid-template:1fr / 1.5fr 1fr; grid-gap:80px; }
.overview-step { padding-left:50px; margin-bottom:35px; }
.overview-step:not(.last):after { content:''; height:calc(100% - 5px); width:1px; background:var(--clr-lighter); top:32px; left:15px; position:absolute; }
.overview-step span { background:white; color:var(--clr-darker); border:1px solid var(--clr-lighter); width:2em; height:2em; border-radius:100%; display:inline-flex; align-items:center; justify-content:center; line-height:1; position:absolute; left:0; top:-3px; }
.overview-eventtype { display:flex; gap:25px; padding-bottom:30px; }
.overview-eventtype > div { border-radius:4px; overflow:hidden; background:white; filter:drop-shadow(1px 2px 5px rgba(0,0,0,0.1)) drop-shadow(0px 0px 1px rgba(0,0,0,0.05)); padding-bottom:20px; text-align:center; }
.overview-eventtype > div img { filter: grayscale(1); transition:transform 0.4s, filter 0.3s; }
.overview-eventtype > div svg { margin-block:20px 5px; font-size:1.25em; stroke:var(--clr-lighter); transition:transform 0.4s; }
.overview-eventtype > div h2 { color:var(--clr-grey); font-family:var(--ft-default); }
.overview-howto.reverse { grid-template: 1fr / 1fr 1.5fr; grid-auto-flow:dense; }
.overview-howto.reverse > div:nth-of-type(1) { grid-column: 2 / 3; }
.overview-howto.reverse > div:nth-of-type(2) { grid-column: 1 / 2; }
.overview-eventtype > div:hover img { transform:scale(1.03); filter:grayscale(0); }
.overview-eventtype > div:hover svg { transform:translateY(-3px); }
.overview.home-why { grid-template:auto auto / 1fr 1fr 1fr 1fr; grid-gap:40px; }
.home-why-block.green svg { stroke:var(--clr-success); font-size:1.15em; }
.home-why-block.green h3 { color:hsl(122deg 33% 40%); }
.overview-features { display:grid; grid-template:1fr / 1fr 1fr; }
.overview-features li { line-height:2; transition:color 0.4s; }
.overview-features li:hover { color:var(--clr-accent); cursor:pointer }
.overview-features svg { margin-right:10px; font-size:1.2em; transform:translateY(3px); stroke:var(--clr-lighter); }
.overview-features li:hover svg { stroke:var(--clr-accent); }
.features { transition:opacity 0.2s ease, height 0.2s ease, margin-bottom 0.2s ease; margin-left:33px; color:darkgrey; height:65px; margin-bottom:10px; opacity:1; transform: translateZ(0); -webkit-transform: translateZ(0); }
.features:before { content:''; width:1px; height:calc(100% - 5px); background: #f0f0f0; position:absolute; left:-25px; }
.features.close { height:0; margin-bottom:0px; opacity:0; }
.features-devices { aspect-ratio:450 / 310; max-width:450px; background-image:url("static/rsvpfeatures-illustrations-v2.png"); background-size:cover; }

/* --- OVERVIEW PAGE --- */




/* --- OTHER PAGES --- */
.errorpage { display:flex; gap:100px; }
/* --- OTHER PAGES --- */




@media (min-width:1500px) {
    .themes-home, .themes-designs { max-width:1750px; grid-template-columns:repeat(4, 1fr); grid-gap:65px; }
	.themes-filters { grid-gap:65px; }
}
@media (max-width:1200px) {
	.activate-included { grid-gap:10px 5px; grid-template:repeat(6,1fr) / repeat(2,1fr) 1.4fr;}
	.activate-included div[or-tooltip] { padding-left:20px; line-height:1.1; }
	.activate-included svg { position:absolute; left:0; vertical-align:-3px; }
	.account-events { grid-gap:35px; }
	.overview-eventtype > div { flex:1 1 200px; }
	.overview-eventtype { flex-wrap:wrap; }
	.overview-features { grid-template:1fr /1fr; }
}
@media (max-width:1000px) {
    menu { gap:30px; }
    .home-hero { grid-template:1fr auto / 1fr; height:auto; }
    .home-hero .left { grid-row:2 / 3; margin-block:50px;}
    .home-hero .right { grid-row:1 / 2; height:50vh; width:100%; } 
    .home-usp { flex-wrap:wrap; justify-content:space-around; }
    .home-guarantee .or-container { grid-template:1fr / 1fr; }
    .themes-home, .themes-designs { grid-gap:20px; }
	.themes-filters { grid-gap:20px; }
    .resume-rsvp { width:50% }
	.contact { grid-template: auto / 1.6fr 1fr; grid-gap:50px; }
	.contact-form input, .contact-form textarea { width:100%; }
	.contact-form-fill { padding-left:0; }
	.contact-form .description[data-icon] { padding-left:2.8em }
	.contact-form .description[data-icon]:before { left:0 }
	.account-events { grid-template: auto / repeat(2,1fr); }
}
@media (max-width:800px) {
    menu { gap:20px; }
    .themes-home, .themes-designs { grid-template-columns:repeat(2, 1fr); grid-gap:25px; }
	.themes-filters { grid-gap:25px; }
    .resume-rsvp { width:70% }
	.activate-included { grid-template:repeat(6,1fr) / repeat(2,1fr) 1.1fr; }
	.activate-included .or-modal { padding:20px 15px 20px 30px; }
	.activate-included .or-modal .ico { left:25px; }
	.activate-included .or-modal h3 { padding-left:1.8em; margin-bottom:15px; }
	.activate-included .or-modal ul { margin-top:15px; }
}
@media (max-width:600px) {

    /* --- GENERAL STUFF --- */
    html, body { font-size:17px; }
    nav { display:grid; grid-template:1fr / 1fr auto 1fr; gap:10px; }
    nav .hamburger { font-size:25px; color:var(--clr-grey); display:flex; width:fit-content; font-size:14px; align-items:center; gap:5px; }
    nav .hamburger svg { font-size:20px; }
    nav .logo { display:grid; align-items:center; justify-content:center; width:min(35vw,160px); }
    nav .start { justify-self:end; width:fit-content; font-size:14px; border-left:2px solid var(--clr-accent); }
    nav a { font-size:17px; }
    menu { display:flex; flex-direction:column; position:fixed; background: white; height:100vh; width:75vw; padding-top:25px; gap:30px; top:0; left:-75vw; transform:translateX(0%); box-shadow:none; z-index:10; transition:transform 0.4s, box-shadow 0.3s; }
    menu .close a { color:var(--clr-accent); font-size:12px; color:lightslategrey; display:flex; align-items:center; margin-bottom:20px }
    menu .close svg { font-size:15px; }
    menu .nav-footer { padding-inline:calc(var(--pg-gutter) * 2); position:absolute; bottom:100px; }
    menu .nav-footer a { font-size:14px }
    .menu-greybg { position:fixed; width:100vw; height:100vh; inset:0; z-index:9; opacity:0; transition:opacity 0.4s, background-color 0s 0.4s; pointer-events:none; }
    body.menuopen menu { transform:translateX(calc(75vw - 50px)); box-shadow:0px 0px 20px rgb(0 0 0 / 8%); }
    body.menuopen .menu-greybg { opacity:0.3; pointer-events:initial; background-color:black; transition:opacity 0.4s, background-color 0s 0s; }
    :is(header,footer) { transition:transform 0.4s; }
    body.menuopen :is(header,main,footer) { transform:translateX(50px); }
    .login:not(.show) { visibility:hidden; }
    .login { width:calc(100vw - 2 * var(--pg-gutter)); position:fixed; top:var(--pg-gutter);left: var(--pg-gutter);right:0; }
    .title { font-size:25px; }
    .subtitle { font-size:12px; }
    [or-tooltip]:before { bottom:calc(var(--tooltip-top, -15px) + 23.5px); }
    label[data-icon]:before { top:2.05em; }
    footer .or-container { grid-template:auto auto auto auto / 1fr; gap:60px; }
	.error-msg { font-size:0.9rem; }

	.popup { width:calc(100% - calc(2 * var(--pg-gutter))); max-height:75vh; padding:25px calc(var(--pg-gutter) * 1.25); }
	.popup-close { right:calc(var(--pg-gutter) * 1.5); top:30px; font-size:0.8em; padding:0.35em; }
	.popup .title { font-size:1.3em; }
	.popup .or-container { padding-inline:0; }
    /* --- GENERAL STUFF --- *


    /* --- HOME PAGE ------- */
    .home-hero .right { height:40vh; } 
    .home-hero .left { max-width:100%; padding-inline:var(--pg-gutter);}
    .home-hero h1 { font-size:25px; }
    .home-why, .home-why.overview { grid-template:auto auto auto / 1fr 1fr; grid-gap:30px 25px; }
    .home-why-block { max-width:100%; padding-left:32px; }
	.home-why-block ul { margin-top:5px; }
    .home-why-block div { font-size:15.5px; }
    .home-why .home-why-block i { font-size:18px; top:1px; }
    .home-guarantee .or-container { grid-template:1fr / 1fr; }
    .home-guarantee .handwritten { line-height:0.5; opacity:1; left:0; position:relative;font-size:19vw; border-left:1px solid #dedede; padding-left:0.5em; }
    .home-guarantee li { font-size:15.5px }
    .home-features { grid-gap:15px 10px; grid-template-columns:1fr 1fr; width:100%; padding:30px 25px; }
    .home-features div {grid-row: unset;grid-column: 1 / 3; margin:10px 0 15px;}
    .home-features span { font-size:15px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
    .vid { padding:0 15px; }
	.vid-video { width:100%; height:calc(calc(100vw - 30px) / 8 * 5); margin-bottom: 20px; }
	.vid-step { grid-gap:16px; padding:20px 0 25px; }
	.vid-step > span { font-size:14px; padding:10px 14px; line-height:1.2; }
	.vid-illustration { grid-row: 2 / 3;  }
	.vid-explanation { grid-row: 1 / 2; }
	.vid .vid-step span:before { color:whitesmoke; background-color:transparent !important; top:initial; right:10px; transform:initial; bottom:0; padding:0 !important; }
	.vid.step1 .vid-step span:nth-of-type(1):before,
	.vid.step2 .vid-step span:nth-of-type(2):before,
	.vid.step3 .vid-step span:nth-of-type(3):before { color:var(--clr-lighter); }
	.vid-details > span { grid-template-columns: 1fr; margin-bottom: 40px; }
	.vid-explanation { padding: 10px 40px 40px; }
    .homereviews .scroll { padding-inline:calc(2 * var(--pg-gutter)); }
    .homereviews :is(.arrow.right,.arrow.right:hover)  { right:-10px; top:33% }
    .homereviews :is(.arrow.left,.arrow.left:hover) { left:-10px; top:33% }
    .blog :is(.blog-title,.readmore) { width:100%; }
    .blog .readmore :is(a,b) { font-size:1em; }
    .blog .or-container.flex { display:grid; grid-template:auto auto / 1fr 1fr; gap:30px; }
    .themes-home, .themes-designs { grid-template-columns:repeat(1, 1fr); grid-gap:30px; }
	.theme-title { font-size:0.9em; }
    .resume-rsvp { width:80% }
	label[data-icon] + input.mobilesmall { font-size:0.9em; padding:0.45em 0.6em 0.45em 2.3em }
	input[noicon].mobilesmall { font-size:0.9em; padding:0.45em 0.6em 0.45em 0.6em }
    /* --- HOME PAGE ------- */
    
	/* --- DESIGNS PAGE ------- */
	.themes-filters { font-size:0.9em; grid-auto-flow: row; grid-gap:25px; }
	.themes-filters .or-button { font-size:0.8em; grid-auto-flow:row; min-width:8.5em } 
	.themes-filters .filter-label { margin-bottom:0 }
	.filter-label:before { content:''; position:absolute; height:1px; width:100%; background:whitesmoke; bottom:10px; z-index:3; transition:background 0.5s; }
	.filter-label:after { content:'\e604'; font-family:simple-line-icons; position:absolute; right:5px; top:5px; font-size:12px; color:var(--clr-accent); pointer-events:none; transition:transform 0.5s;}
	.filter-label.open:before { background:var(--clr-lighter); }
	.filter-label.open:after { transform:rotate(180deg); }
	.filters-container { max-height:0; overflow:hidden; transition: max-height 0.5s, margin-bottom 0.5s; }
	.filter-label.open .filters-container { max-height:35em; margin-bottom:30px; }
	/* --- DESIGNS PAGE ------- */

	/* --- FAQ PAGE ------- */
	.faq { grid-template-columns:1fr; gap:20px; } 
	.faq .description { margin-bottom:50px }
	.faq-q { font-size:1.05em; padding-bottom:20px; padding-right:30px; transition:color 0.4s; }
	.faq-q:before { content:'\e604'; font-family:simple-line-icons; position:absolute; right:5px; top:5px; font-size:12px; color:var(--clr-accent); pointer-events:none; transition:transform 0.5s; }
	.faq-a { max-height:0; overflow:hidden; transition:max-height .8s cubic-bezier(0, 1, 0, 1) -.1s, padding-bottom 0.4s ease; }
	.faq-q.open + .faq-a { max-height:9999px; padding-bottom:30px; transition-timing-function:cubic-bezier(0.5, 0, 1, 0);  transition-delay:0s;}
	.faq-q.open { color:var(--clr-accent); }
	.faq-q.open:before { transform:rotate(180deg); }
	/* --- FAQ PAGE ------- */

	/* --- CONTACT PAGE ------- */
	.contact { grid-template: auto auto / 1fr; grid-gap:80px; }
	.contact-form input, .contact-form textarea { width:100%; }
	.contact-form-fill { padding-left:0; }
	.contact-form .description[data-icon] { padding-left:2.8em; padding-bottom:30px }
	.contact-form .description[data-icon]:before { left:0 }
	/* --- CONTACT PAGE ------- */

	/* --- ACTIVATE PAGE ------- */
	.activate-included { grid-template:repeat(7,1fr) / repeat(2,1fr); font-size:0.9em; grid-gap:10px 10px; }
	.activate-included div[or-tooltip] { line-height:1.25; padding-left:20px}
	.activate-included svg { position:absolute; left:0px; }
	.activate-included .or-modal { grid-row:-1 / -1; grid-column:1 / -1; padding:20px 15px 20px 25px; margin-top:15px; }
	.activate-included .or-modal h3 { padding-left:1.7em; }
	.activate-included .or-modal div { font-size:1em }
	.order-reass-line.secure img { height:100%; width:40px; object-fit:cover; object-position:0; animation:pay-logos 10s linear infinite; transform:scale(1.2); }
	.order { grid-template:auto / auto; padding-block:30px 50px; }
	.order .payment { margin-top:30px; }
	.order input, .order .stripe-input { height:43px; }
	/* --- ACTIVATE PAGE ------- */
	
	/* --- COMPARISON PAGE ------- */
	.bestrsvp-container { overflow:auto; height:calc(100vh - 200px); padding-bottom:30px; overflow:auto; font-size:0.9em; margin-top:-10px; }
	.bestrsvp { width:700px; }
	.bestrsvp img { max-width:125%; }
	.bestrsvp-trynow { display:none; }
	.bestrsvp th { position:sticky; top:0; z-index:1; }
	.bestrsvp td:nth-of-type(1) { width:15%;}
	.bestrsvp td:nth-of-type(n+2) { width:15%; }
	.bestrsvp :is(td,th) { padding:10px 20px 10px 5px; }
	.bestrsvp :is(td,th):nth-of-type(n+1) { padding:10px; }
	.bestrsvp i, .bestrsvp-info { font-size:0.7em; line-height:1.2; max-width:100%; }
	.bestrsvp :is(td:nth-of-type(1),th:nth-of-type(1)) { position:sticky; left:0px; background:white; z-index:2; }
	.bestrsvp th:nth-of-type(1) { z-index:3; }
	/* --- COMPARISON PAGE ------- */

	/* --- OVERVIEW PAGE ------- */
	.overview-eventtype { flex-wrap:wrap; }
	.overview-eventtype > div { flex:1 1 120px; font-size:0.85em; }
	.overview-howto, .overview-howto.reverse { grid-template:1fr / 1fr; grid-gap:30px; }
	.overview-howto.reverse > div { grid-column:unset !important; }
	.features-devices { max-width:100% }
	.features { margin-left:35px; font-size:0.95em; height:75px; }
	/* --- OVERVIEW PAGE ------- */

	

	/* --- OTHER PAGES ------- */
	.account-events { grid-template: auto / 1fr; }
	.errorpage { gap:50px; flex-direction:column; padding-inline:calc(2 * var(--pg-gutter)); }
	.errorpage img { height:250px; object-fit:cover; object-position:bottom; }
	/* --- OTHER PAGES ------- */

}
@media (min-width:400px) and (max-width:600px) {
    .home-hero .right { height:45vh; } 
    .home-usp-block { width:190px; padding-inline:10px; justify-content:space-between; }
}
@media (max-width: 350px) {
	.logo { width:135px; }
	.hamburger:after { display:none; }
    nav .start { font-size:13px; }
    .home-why-block div { font-size:14px; }
    .home-features span { font-size:14px; }
    .home-features span[tooltip]:before  { display:none; }
    .home-features span[tooltip]:after  { display:none; }

}

@keyframes pay-logos { 
    0% { object-position:0% } 8.34% { object-position:0% } 12.51% { object-position:25% } 20.85% { object-position:25% } 
    25.02% { object-position:50% } 33.36% { object-position:50% } 37.53% { object-position:75% } 45.87% { object-position:75% } 
    50.04% { object-position:100% } 58.38% { object-position:100% } 62.55% { object-position:75% } 70.89% { object-position:75% } 
    75.06% { object-position:50% } 83.40% { object-position:50% } 87.57% { object-position:25% } 95.91% { object-position:25% } 100% { object-position:0% } 
}



























.scrolltop { display:none; }

.small label { font-size:14px; margin-left: 0px; color: #333333; }
.small label:before { font-size:14px; margin:25px 0 0 12px; }

@keyframes rotation { to { transform: rotate(360deg); } }

[data-ripple] span { position: absolute; height: 10px; width: 10px; display: block; border-radius: 100%; pointer-events: none; animation: ripple 0.5s; animation-fill-mode: forwards; }
@keyframes ripple { from { transform: scale(1); opacity: 0.3; } to { transform: scale(20); opacity: 0; } }


@font-face {
  font-family: 'simple-line-icons';
  src: url('https://cdnjs.cloudflare.com/ajax/libs/simple-line-icons/2.4.1/fonts/Simple-Line-Icons.eot?v=2.4.0');
  src: url('https://cdnjs.cloudflare.com/ajax/libs/simple-line-icons/2.4.1/fonts/Simple-Line-Icons.eot?v=2.4.0#iefix') format('embedded-opentype'),
  	   url('https://cdnjs.cloudflare.com/ajax/libs/simple-line-icons/2.4.1/fonts/Simple-Line-Icons.woff2?v=2.4.0') format('woff2'),
  	   url('https://cdnjs.cloudflare.com/ajax/libs/simple-line-icons/2.4.1/fonts/Simple-Line-Icons.ttf?v=2.4.0') format('truetype'),
  	   url('https://cdnjs.cloudflare.com/ajax/libs/simple-line-icons/2.4.1/fonts/Simple-Line-Icons.woff?v=2.4.0') format('woff'),
  	   url('https://cdnjs.cloudflare.com/ajax/libs/simple-line-icons/2.4.1/fonts/Simple-Line-Icons.svg?v=2.4.0#simple-line-icons') format('svg');
  font-weight: normal;
  font-style: normal;
}
.ico {
  font-family: 'simple-line-icons'; cursor:default; user-select:none; -webkit-user-select:none;
  font-style: normal; font-weight: normal; /* font-variant: normal; text-transform: none; line-height: 1; */
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
@font-face {
    font-family: 'FontAwesome'; font-weight: normal; font-style: normal;
    src: url('static/fontawesome.eot');
    src: url('static/fontawesome.eot') format('embedded-opentype'),
    	 url('static/fontawesome.woff2') format('woff2'), 
    	 url('static/fontawesome.woff') format('woff'),
    	 url('static/fontawesome.ttf') format('truetype'), 
    	 url('static/fontawesome.svg') format('svg');
}
.fa { display: inline-block; font: normal normal normal 14px/1 FontAwesome; font-size: inherit; text-rendering: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }


/* ----MISC---- */


.popup.show { opacity:1; transform:translateY(0px); pointer-events:initial }
.popup.start { width:1500px; max-width: min(calc(100% - 2 * var(--pg-gutter)),1500px); height:800px; }
.popup.changepass { height:600px; }
.popup.password { width:610px; height:420px; }
.popup.details { width: 780px; }
.popup.changeurl { height: 410px; }
.popup.list { width: 1000px; height:600px; }
.popup.message { width:450px; height:280px; }
.popup.unique_link { width: 850px; height:600px; }
.popup.addg_rsvp { height:600px; }
.popup.invitation { padding:0; width:1000px; height:600px; overflow-y:hidden; }
.popup.invitation > #popup-content, .popup.addg_rsvp > #popup-content, .popup.message > #popup-content { height:100%; overflow-y:hidden; }
.popup.addg_manual { height:630px; width:650px; }
.popup.addg_excel { width:1000px; height:660px; }
.popup.addadmin { width:800px; }

.smallinfo { margin-top:10px; font-size:15px; font-style:italic; color: #a2a2a2; }


@media (max-width: 600px) {
	.popup.changeurl { height:450px; }
	.popup.invitation { height:90%; max-height:90%; }
	.scrolltop { width:50px; height:50px; display:block; position:fixed; bottom:20px; right:20px; border-radius:100%; z-index:4; background-color:var(--clr-accent); color:white; opacity:0.7; line-height: 46px; font-family:simple-line-icons; text-align:center; transition:opacity 0.4s, transform 0.4s; }
	.scrolltop.close { transform:translateY(20px); opacity:0; }
	.mobhide { display:none; }
}
@media (min-width: 600px) and (max-width: 1000px) {
	.header-container { padding:0 20px; }
	.home-theme, .popup .home-theme  { width: 47%; }
	.home-thememore.left, .home-thememore.right { width: 90%; margin-left:0; margin-right:0 }
}


/***** BROWSER-SPECIFIC SYTLES ******/
/************************************/

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) { /*-- IE shit --*/
	.login { box-shadow: 0px 2px 2px rgba(0,0,0,0.4); }
	.home-usp i, .home-why i, .topfaq .icon, .faq .icon { color: #1da3c9; background:none; }
}
@media not all and (min-resolution:.001dpcm) { @media { /*-- Safari is the new IE --*/
    u { text-decoration:underline; text-decoration-style:dotted; text-decoration-color:#c2c2c2; }
	.popup { filter:drop-shadow(1px 2px 8px rgba(0,0,0,0.15)); }
	.theme-theme { -webkit-backface-visibility:hidden; }
	.theme-theme img { will-change:transform; }
	.overview-eventtype > div { filter:unset; box-shadow:0px 2px 10px rgb(0 0 0 / 10%); }
	.vid-step > span { filter:drop-shadow(1px 2px 3px rgba(0,0,0,0.1)) }
	.vid-step > span:hover { filter:drop-shadow(1px 2px 4px rgba(0,0,0,0.15));	}
	.or-button:hover { filter:unset; box-shadow:0px 2px 10px rgb(0 0 0 / 20%);	}
	.or-button.link:hover { box-shadow:none; box-shadow:none;}
	.or-button.outline { outline:none; box-shadow:0 0 0 1px var(--clr-accent); }
	.or-button.outline:hover { outline:none; box-shadow:0 0 0 1px var(--clr-lighter); }
	.or-button.outline.red { outline:none; box-shadow:0 0 0 1px var(--clr-error); }
	.or-button:is(.white,.outline).loading { outline:none; box-shadow:0 0 0 1px #e1e1e1; }
	.or-modal { box-shadow: 0px 2px 5px rgb(0 0 0 / 15%); }
	.or-select { filter:none; box-shadow:0px 2px 5px rgb(0 0 0 / 15%) }
	#message_test { width:31%; }
	.or-button.sso:after { border-radius:4px 0 0 4px; }
	@media (min-width:600px) { 
		.handwritten { margin-left:-10px; padding-left:10px; }
		.theme-theme { -webkit-transform:translate3d(0, 0, 0); }
	}
	@media (max-width:600px) {  }
	/* @media (max-width:600px) { .dashboard-options .or-modal { filter:none; box-shadow:0px 2px 10px rgb(0 0 0 / 10%); } } */
}}
@supports (-webkit-hyphens:none) {  /*-- Safari 16+ is the new IE --*/
    u { text-decoration:underline; text-decoration-style:dotted; text-decoration-color:#c2c2c2; }
	.popup { filter:drop-shadow(1px 2px 8px rgba(0,0,0,0.15)); }
	.theme-theme { -webkit-backface-visibility:hidden; }
	.theme-theme img { will-change:transform; }
	.overview-eventtype > div { filter:unset; box-shadow:0px 2px 10px rgb(0 0 0 / 10%); }
	.vid-step > span { filter:drop-shadow(1px 2px 3px rgba(0,0,0,0.1)) }
	.vid-step > span:hover { filter:drop-shadow(1px 2px 4px rgba(0,0,0,0.15));	}
	.or-button:hover { filter:unset; box-shadow:0px 2px 10px rgb(0 0 0 / 20%);	}
	.or-button.link:hover { box-shadow:none; box-shadow:none;}
	.or-button.outline { outline:none; box-shadow:0 0 0 1px var(--clr-accent); }
	.or-button.outline:hover { outline:none; box-shadow:0 0 0 1px var(--clr-lighter); }
	.or-button.outline.red { outline:none; box-shadow:0 0 0 1px var(--clr-error); }
	.or-button:is(.white,.outline).loading { outline:none; box-shadow:0 0 0 1px #e1e1e1; }
	.or-modal { box-shadow: 0px 2px 5px rgb(0 0 0 / 15%); }
	.or-select { filter:none; box-shadow:0px 2px 5px rgb(0 0 0 / 15%) }
	#message_test { width:31%; }
	.or-button.sso:after { border-radius:4px 0 0 4px; }
	@media (min-width:600px) { 
		.handwritten { margin-left:-10px; padding-left:10px; }
		.theme-theme { -webkit-transform:translate3d(0, 0, 0); }
	}
	@media (max-width:600px) {  }
}

@supports not (aspect-ratio:1 / 1) {
    .home-asseenon span { height:75px; }
}


/***** NEW CLEAN STANDARD STYLES ****/
/************************************/

:is(.or-checkbox,.or-radio) { --checkbox-size:18px; }
:is(.or-checkbox,.or-radio) input { display:none; }
:is(.or-checkbox,.or-radio) + label { color:grey; }
:is(.or-checkbox,.or-radio) input:checked + label:before { border: 1px solid var(--clr-accent); }
:is(.or-checkbox,.or-radio) label { all:unset; display:flex; width:fit-content; min-height:var(--checkbox-size); line-height:var(--checkbox-size); padding-left:calc(var(--checkbox-size) + 0.5em); font-size:0.95em; cursor:pointer; }
:is(.or-checkbox,.or-radio) label:before { all:unset; content:''; position:absolute; border:1px solid lightgrey; left:0; width:var(--checkbox-size); height:var(--checkbox-size); text-align:center; border-radius:3px; box-sizing:border-box; transition:border 0.2s; cursor:pointer; background:white; --checkbox-size:18px; transition:border 0.3s; }
:is(.or-checkbox,.or-radio):hover label:before { border:1px solid var(--clr-lighter); }
:is(.or-checkbox,.or-radio) input:checked + label:after { opacity:1; } 
:is(.or-checkbox,.or-radio) input:disabled + label { cursor:not-allowed; }
:is(.or-checkbox,.or-radio) input:disabled + label:before { cursor:not-allowed; border:1px solid #B0BEC5; }
:is(.or-checkbox,.or-radio) input:checked:disabled + label:after { cursor:not-allowed; }

.or-checkbox label:after { all:unset; content:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' stroke-width='3' stroke='%23607d8b' fill='none' stroke-linecap='butt' stroke-linejoin='butt'%3E%3Cpath stroke='none' d='M0 0h24v24H0z' fill='none'/%3E%3Cpath d='M5 12l5 5l10 -10' /%3E%3C/svg%3E"); position:absolute; width:calc(var(--checkbox-size) * 2 / 3); left:calc((var(--checkbox-size) * 1 / 3) / 2); top:1px; opacity:0; transition:opacity 0.3s; }
.or-radio label:before { border-radius:100%; }
.or-radio label:after { all:unset; content:''; background:grey; position:absolute; width:0.4em; aspect-ratio:1; border-radius:100%; left:calc(var(--checkbox-size) / 2 - 0.2em); top:calc(var(--checkbox-size) / 2 - 0.2em); opacity:0; transition:opacity 0.3s; }

/* .or-radio label { all:unset; display:flex; width:fit-content; line-height:var(--checkbox-size); padding-left:calc(var(--checkbox-size) + 0.5em); font-size:0.95em; cursor:pointer; }
.or-radio { display:block; position:relative; }
.or-radio input { display:none; }
.or-radio label { font-size:14px; color:#9E9E9E; background-color:transparent; cursor:pointer; display:block; margin:5px 0 8px 20px; text-transform:unset; transition:color 0.3s; }
.or-radio label:before { content:''; height:15px; width:15px; border-radius:50%; display:block; border:1px solid lightgrey; background-color:white; left:-24px; top:-24px; transition:border 0.3s; }
.or-radio input:checked ~ label { color:#607D8B; }
.or-radio input:checked ~ label:before { border:1px solid #00BCD4; }
.or-radio input ~ label:after { content:''; height:5px; width:5px; border-radius:50%; background-color:white; left:-16px; top:8px; display:block; position:absolute; transition:background-color 0.3s; }
.or-radio input:checked ~ label:after { background-color:grey; }
.or-radio.disabled label { color:#d2d2d2 !important; pointer-events:none; }
.or-radio.disabled label:before { border:1px solid #ebebeb !important; background-color:#f5f5f5; } */


.or-minibutton { padding:10px 14px; font-size:13px; display:flex; width: fit-content; align-items:center; background-color: hsl(0, 0%, 100%); color:#607D8B; border-radius:4px; box-shadow:0px 1px 3px rgb(0 0 0 / 10%); transition:color 0.2s, box-shadow 0.2s; }
.or-minibutton:hover { color:#00BCD4; box-shadow:0px 1px 5px rgb(0 0 0 / 20%); cursor:pointer; }
.or-minibutton svg { margin-right:8px; stroke:#02bcd4; width:16px; height:16px; fill:none; stroke-width:1; stroke-linecap:round; stroke-linejoin:round; }
.or-minibutton.loading { color:#a0a0a0; pointer-events:none; }
.or-minibutton.loading svg { display:none; }
.or-minibutton.loading:before { content: ''; border:1px solid #efefef; width:10px; height:10px; border-bottom:2px solid lightgrey; border-radius:100px; display:inline-block; margin:0 12px 0 0; animation:rotation 0.4s infinite linear; }

@media (min-width: 600px) { .mobonly { display:none !important; } }
@media (max-width: 600px) { .deskonly { display:none !important; } }