* { box-sizing: border-box; line-height: 0; user-select: none; z-index: 1; } html, input { color: #ffffff; font-family: "Miriam Libre"; font-size: calc(var(--vh, 1.00vh) * 1.25); letter-spacing: calc(var(--vh, 1.00vh) * 0.125); line-height: calc(var(--vh, 1.00vh) * 1.50); } html, input:not([type="url"]):not([name="sale[monogram]"]):not([name="sale[comment]"]) { text-transform: uppercase; } body, div.notification, div.popup { height: calc(var(--vh, 1.00vh) * 100.00); width: 100.00%; } body { background-color: #08373e; margin: 0.00px; } body#home { overflow-y: hidden; } body#editor { overflow-x: hidden; overflow-y: hidden; } header, footer, aside, main { text-align: center; } header, footer, aside { position: fixed; } header, footer, aside, article, article nav, article > div:first-child, form div, div.header, main form { background-color: #0a4048; border-color: #0b4a52; border-style: solid; } body#editor header, body#editor footer { margin-left: calc(var(--vh, 1.00vh) * -6.25); width: calc(100.00% + calc(var(--vh, 1.00vh) * 12.50)); } header, footer { width: 100.00%; z-index: 2; } header, article > div:first-child, form div, div.header { border-width: 0.00px 0.00px 1.00px 0.00px; } header, body#editor footer { height: calc(var(--vh, 1.00vh) * 12.50); } header { top: 0.00px; } header nav, footer nav { width: 100vw; } header nav, footer nav, aside nav { position: absolute; } header nav, footer nav, div.arrows, article nav, article > div, div.notification, form div, div.header, div.popup { align-items: center; display: flex; justify-content: center; } a { background-image: url("../assets/icons/common/disabled.png"); background-size: contain; color: inherit; text-decoration: none; } a[href], a[onclick], input[onclick], label[onclick], input[type="file"], legend[onclick] { background-image: none; cursor: pointer; } header nav a, footer nav a { flex: none; opacity: 0.10; padding: calc(var(--vh, 1.00vh) * 1.25) 0.00vw; width: calc(var(--vh, 1.00vh) * 12.50); } nav a.active-0 { background-color: #0e5c67; opacity: 1.00; } nav a.active-1 { background-color: #0d535c; opacity: 0.70; } nav a.active-2 { background-color: #0b4a52; opacity: 0.40; } nav a > div { opacity: 0.50; } nav a.active-0 > div { opacity: 1.00; } header nav a > div, footer nav a > div { transform: scale(0.75); } header nav a.active-0 > div, footer nav a.active-0 > div { transform: scale(1.00); } header nav img, footer nav img { display: block; height: calc(var(--vh, 1.00vh) * 7.00); margin: calc(var(--vh, 1.00vh) * 0.00) auto calc(var(--vh, 1.00vh) * 1.00); width: calc(var(--vh, 1.00vh) * 7.00); } nav span { line-height: calc(var(--vh, 1.00vh) * 2.00); } div.arrows { pointer-events: none; position: absolute; width: 100.00%; } header div.arrows, footer div.arrows { height: 100.00%; } div.arrows a { flex: none; height: calc(var(--vh, 1.00vh) * 5.00); margin: calc(var(--vh, 1.00vh) * 3.75) calc(var(--vh, 1.00vh) * 16.25); opacity: 0.50; pointer-events: none; width: calc(var(--vh, 1.00vh) * 5.00); } div.arrows a.active { opacity: 1.00; pointer-events: all; } div.arrows img { height: inherit; width: inherit; } main { padding: calc(var(--vh, 1.00vh) * 12.50) 0.00vw calc(var(--vh, 1.00vh) * 7.50); white-space: nowrap; width: 100.00%; } body#editor main { background-position: center; height: calc(var(--vh, 1.00vh) * 100.00); padding: calc(var(--vh, 1.00vh) * 12.50) 0.00vw; } div#model, div.sidebar { height: calc(var(--vh, 1.00vh) * 75.00); position: absolute; top: calc(var(--vh, 1.00vh) * 12.50); } div#model { left: calc(var(--vh, 1.00vh) * 0.00); width: 100.00%; z-index: 0; } div#model div { background-position: center center; background-repeat: no-repeat; background-size: contain; height: calc(var(--vh, 1.00vh) * 75.00); left: calc(var(--vh, 1.00vh) * 0.00); position: absolute; top: calc(var(--vh, 1.00vh) * 0.00); width: 100.00%; } div#model span { color: #578d95; display: block; font-size: calc(var(--vh, 1.00vh) * 0.825); letter-spacing: calc(var(--vh, 1.00vh) * 0.0825); line-height: calc(var(--vh, 1.00vh) * 0.99); margin: calc(var(--vh, 1.00vh) * 2.75) auto; position: relative; white-space: normal; width: calc(var(--vh, 1.00vh) * 17.50); } div.sidebar { left: calc(var(--vh, 1.00vh) * 0.00); width: 50.00vw; } div.sidebar img, div.sidebar div { position: absolute; left: calc(var(--vh, 1.00vh) * 5.00); } div.sidebar img, article > div > div > img, div.header img { width: calc(var(--vh, 1.00vh) * 17.50); } div.sidebar img { top: calc(var(--vh, 1.00vh) * 5.00); } div.sidebar div { bottom: calc(var(--vh, 1.00vh) * 5.00); } div.sidebar span { display: block; margin: auto; width: fit-content; } div.sidebar span:first-child { background-image: url("../assets/icons/common/calc.png"); background-position: top left; background-repeat: no-repeat; background-size: auto 100.00%; line-height: calc(var(--vh, 1.00vh) * 2.50); padding-left: calc(var(--vh, 1.00vh) * 3.50); } span.price, input.price { font-family: "Cinzel"; font-size: calc(var(--vh, 1.00vh) * 3.50); letter-spacing: calc(var(--vh, 1.00vh) * 0.00); line-height: calc(var(--vh, 1.00vh) * 6.25); } span.price:after { content: " \20AC"; } a.button, a.progress { border-radius: calc(var(--vh, 1.00vh) * 2.00); display: inline-block; line-height: calc(var(--vh, 1.00vh) * 4.00); margin: auto; width: calc(var(--vh, 1.00vh) * 17.50); } a.button, article a:first-child, article div:last-child span:first-child, input[type=button]:last-child { background-color: #0e5c67; color: #ffffff; } a.button:hover, a.button.focus, a.progress, article a:first-child:hover, input[type=button]:last-child:hover, input[type=button].progress { background-color: #ffffff; color: #0e5c67; } a.progress, input[type="button"].progress { animation-name: progress; animation-duration: 5.00s; animation-iteration-count: 1; background-image: linear-gradient(90.00deg, #578d95, #578d95); background-repeat: no-repeat; pointer-events: none; } @keyframes progress { from { background-size: 0.00% 100.00%; } to { background-size: 100.00% 100.00%; } } a.button + a.button, a.progress + a.button { display: block; margin-top: calc(var(--vh, 1.00vh) * 1.25); } footer, article nav, main form { border-width: 1.00px 0.00px 0.00px 0.00px; } footer { height: calc(var(--vh, 1.00vh) * 6.25); bottom: 0.00px; } footer nav, aside nav { opacity: 0.00; pointer-events: none; } footer nav.active, aside nav.active { opacity: 1.00; pointer-events: all; } input, legend, label { padding: calc(var(--vh, 1.00vh) * 0.00) calc(var(--vh, 1.00vh) * 1.50); text-overflow: ellipsis; width: 100.00%; } input { background-color: transparent; border-color: #0b4a52; border-style: solid; border-width: 0.00px 1.00px 0.00px 0.00px; height: calc(var(--vh, 1.00vh) * 6.25); outline: none; } input::placeholder, input[type=email], input[type=password], input[type=search], input[type=text]:not([readonly]), input[type=url] { text-decoration: underline; } input:last-child, label:last-child { border: none; } input[type=email], input[type=password], input[type=search], input[type=text], input[type=url] { background-color: transparent; width: 100.00%; } input[type=password] + input[type=button], input[type=search] + input[type=button] { min-width: fit-content; text-align: center; width: 25.00%; } input[type=search] { background-image: url("../assets/icons/common/search.png"); background-repeat: no-repeat; background-size: contain; padding-left: calc(var(--vh, 1.00vh) * 7.00); } aside, aside nav, aside nav a { width: calc(var(--vh, 1.00vh) * 12.50); } aside { border-width: 0.00px 0.00px 0.00px 1.00px; height: calc(var(--vh, 1.00vh) * 100.00); padding: calc(var(--vh, 1.00vh) * 12.50) calc(var(--vh, 1.00vh) * 0.00) calc(var(--vh, 1.00vh) * 12.50); right: calc(var(--vh, 1.00vh) * 0.00); top: calc(var(--vh, 1.00vh) * 0.00); } aside nav, aside nav a, article > div > div { align-items: center; display: grid; } aside nav a { height: calc(var(--vh, 1.00vh) * 37.50); justify-content: center; } aside nav div { writing-mode: tb-rl; transform: rotate(-180.00deg); } aside nav img { border: 2px solid #ffffff; border-radius: calc(var(--vh, 1.00vh) * 2.50); box-shadow: inset 0.00px 0.00px 0.00px 2.00px #ffffff; height: calc(var(--vh, 1.00vh) * 5.00); margin: calc(var(--vh, 1.00vh) * 0.00) auto calc(var(--vh, 1.00vh) * 1.00); width: calc(var(--vh, 1.00vh) * 5.00); } aside div.arrows { height: 75.00%; transform: rotate(90.00deg) } article, div.popup iframe { border-radius: calc(var(--vh, 1.00vh) * 0.50); } article { border-width: 1.00px; display: inline-block; margin: calc(var(--vh, 1.00vh) * 1.25) calc(var(--vh, 1.00vh) * 0.625) calc(var(--vh, 1.00vh) * 0.00); overflow: hidden; } article > div:first-child { border-bottom: 1.00px solid #0b4a52; } article > div:last-child { border-top: 1.00px solid #0b4a52; } article > div > img, article > div > div { height: calc(calc(var(--vh, 1.00vh) * 66.25) - 4.00px); } article > div > img + img, article > div > div { position: absolute; } article > div > img + img:hover { opacity: 0.00; } article a, article span, input::placeholder, input[type="button"], label { color: #578d95; } article a, article span { border-right: 1.00px solid #0b4a52; line-height: calc(var(--vh, 1.00vh) * 6.25); width: 100.00%; } article a:last-child, article span:last-child { border-right: none; } article a:hover, input[type="button"]:hover, label[onclick]:hover i, input[type=file]:hover + i { color: #ffffff; } div.header { background-attachment: fixed; background-position: center; background-size: cover; height: calc(var(--vh, 1.00vh) * 50.00); } main form { margin-top: calc(var(--vh, 1.00vh) * 1.25); overflow: hidden; } fieldset { border: none; margin: calc(var(--vh, 1.00vh) * 0.00); padding: calc(var(--vh, 1.00vh) * 0.00); } fieldset > div:not(:first-child), fieldset > fieldset { display: none; } fieldset.active > div:not(:first-child) { display: flex; } fieldset.active > fieldset { display: block; } input:last-child:not(:first-child):not([type="button"]), label + input, label:last-child:not(:first-child) { text-align: right; } input[type=file] { opacity: 0.00; position: absolute; } input.invalid, div.invalid { box-shadow: inset calc(var(--vh, 1.00vh) * 0.00) calc(var(--vh, 1.00vh) * 0.00) calc(var(--vh, 1.00vh) * 2.50) #dc143c; border-color: #dc143c; } legend, label { line-height: calc(var(--vh, 1.00vh) * 6.25); overflow: hidden; text-align: left; white-space: nowrap; } i { vertical-align: middle; } i:first-child { margin-right: calc(var(--vh, 1.00vh) * 1.25); } i:last-child { margin-left: calc(var(--vh, 1.00vh) * 1.25); } form img { height: calc(var(--vh, 1.00vh) * 6.25); } div#stripe { height: calc(var(--vh, 1.00vh) * 6.25); margin-right: calc(var(--vh, 1.00vh) * -4.00); padding: calc(var(--vh, 1.00vh) * 0.00) calc(var(--vh, 1.00vh) * 1.50); } div#stripe div { width: 100.00%; } div.notification, div.popup { background-color: rgba(0, 0, 0, 0.60); left: 0.00vw; padding: calc(var(--vh, 1.00vh) * 12.50); position: fixed; top: calc(var(--vh, 1.00vh) * 0.00); z-index: 2; } div.notification i, div.popup i { font-size: calc(var(--vh, 1.00vh) * 5.00); } div.notification span, div.popup span { line-height: calc(var(--vh, 1.00vh) * 2.00); text-transform: none; } div.popup iframe { background-color: #000000; border: none; box-shadow: calc(var(--vh, 1.00vh) * 0.00) calc(var(--vh, 1.00vh) * 0.25) calc(var(--vh, 1.00vh) * 0.25) #000000; height: 45.00vw; max-height: calc(var(--vh, 1.00vh) * 56.00); max-width: calc(var(--vh, 1.00vh) * 100.00); width: 80.00vw; } div.popup img { animation-name: bounce; animation-direction: alternate; animation-duration: 1.00s; animation-iteration-count: infinite; cursor: pointer; height: calc(var(--vh, 1.00vh) * 12.50); position: absolute; } @keyframes bounce { from { transform: scale(1.00); } to { transform: scale(0.80); } }