@charset "UTF-8"; :root { --button-bg: #FDB913; --button-color: #444444; } /*** The new CSS reset - version 1.7.3 (last updated 7.8.2022) GitHub page: https://github.com/elad2412/the-new-css-reset ***/ /* Remove all the styles of the "User-Agent-Stylesheet", except for the 'display' property - The "symbol *" part is to solve Firefox SVG sprite bug */ *:where(:not(html, iframe, canvas, img, svg, video, audio):not(svg *, symbol *)) { all: unset; display: revert; } /* Preferred box-sizing value */ *, *::before, *::after { box-sizing: border-box; } /* Reapply the pointer cursor for anchor tags */ a, button { cursor: revert; } /* Remove list styles (bullets/numbers) */ ol, ul, menu { list-style: none; } /* For images to not be able to exceed their container */ img { max-width: 100%; } /* removes spacing between cells in tables */ table { border-collapse: collapse; } /* Safari - solving issue when using user-select:none on the text input doesn't working */ input, textarea { -webkit-user-select: auto; } /* revert the 'white-space' property for textarea elements on Safari */ textarea { white-space: revert; } /* minimum style to allow to style meter element */ meter { -webkit-appearance: revert; appearance: revert; } /* reset default text opacity of input placeholder */ ::placeholder { color: unset; } /* fix the feature of 'hidden' attribute. display:revert; revert to element instead of attribute */ :where([hidden]) { display: none; } /* revert for bug in Chromium browsers - fix for the content editable attribute will work properly. - webkit-user-select: auto; added for Safari in case of using user-select:none on wrapper element*/ :where([contenteditable]:not([contenteditable="false"])) { -moz-user-modify: read-write; -webkit-user-modify: read-write; overflow-wrap: break-word; -webkit-line-break: after-white-space; -webkit-user-select: auto; } /* apply back the draggable feature - exist only in Chromium and Safari */ :where([draggable="true"]) { -webkit-user-drag: element; } body { will-change: opacity; opacity: 0; transition: all 0.6s cubic-bezier(0.29, 0.86, 0.29, 0.86); transition-duration: 2s; } body.page-loaded { opacity: 1; } @font-face { font-family: Niveau Grotesk; src: url("/fonts/Niveau-Grotesk-Web-Regular.woff"); font-weight: 400; } @font-face { font-family: Niveau Grotesk; src: url("/fonts/Niveau-Grotesk-Web-Bold.woff"); font-weight: 700; } @font-face { font-family: Niveau Grotesk; src: url("/fonts/NiveauGroteskMedium.otf"); font-weight: 500; } @font-face { font-family: Romie; src: url("/fonts/Romie-BlackItalic.woff"); font-weight: 800; } button, [role=button] { color: inherit; cursor: pointer; font-family: inherit; } button[disabled], [role=button][disabled] { cursor: not-allowed !important; opacity: 0.75; } input { color: inherit; } fieldset { padding: 0; border: none; grid-column: 1/-1; } fieldset + fieldset { margin-top: 3.125rem; } legend { padding-left: 0; position: relative; padding-bottom: 0.625rem; } .form { --contrast-color: currentColor; --form-gap: 1.875rem; --form-row-gap: 1.5rem; grid-column: 1/-1; } .form__heading { grid-column: 1/-1; font-size: 1.25rem; line-height: 1.5625rem; font-weight: 600; margin-bottom: 0.8125rem; } @media screen and (min-width: 40em) { .form__heading { margin-top: 0.3125rem; font-size: 1.625rem; line-height: 2.0625rem; } } .landing .form__heading { font-family: "Niveau Grotesk", Helvetica Neue, Helvetica, Roboto, Arial, sans-serif; font-size: 1.5rem; line-height: 1.42; font-weight: 500; } @media screen and (min-width: 64em) { .landing .form__heading { font-size: 1.75rem; } } .form__fieldset { width: 100%; font-size: 0.9375rem; margin: auto; border: none; } .form__grid { display: grid; grid-row-gap: var(--form-row-gap); } .form__grid > fieldset legend { padding-top: 52px; font-weight: 600; font-size: 1.25rem; line-height: 1.5625rem; margin-bottom: 1.3125rem; } @media screen and (min-width: 64em) { .form__grid > fieldset legend { font-size: 1.625rem; line-height: 2.0425rem; font-weight: 600; } } .form__grid > fieldset > .form__radio-blocks { display: grid; grid-column-gap: var(--form-gap); grid-row-gap: var(--form-row-gap); grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); } @media screen and (min-width: 64em) { .form__grid > fieldset > .form__radio-blocks { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); } .sidebar .form__grid > fieldset > .form__radio-blocks { grid-template-columns: repeat(auto-fit, minmax(80px, 1fr)); } } @media screen and (min-width: 40em) { .form__grid { display: grid; grid-template-columns: repeat(4, 1fr); grid-column-gap: var(--form-gap); } .form__grid .form__field { align-self: self-start; grid-column: auto/span 4; } .form__grid .form__field--small { grid-column: auto/span 1; } .form__grid .form__field--medium { grid-column: auto/span 2; } .form__grid .form__field--large { grid-column: auto/span 3; } } .form p { margin-top: 0; } .form hr { height: 1px; width: 100%; background-color: #D1D1C6; border: none; grid-column: 1/-1; } .form hr.higher { margin-top: 1.25rem; margin-bottom: 1.25rem; } .form__fieldgroup { display: none; } .form__fieldgroup.shown { display: block; } .form__legend { display: block; } .form__field--inline { min-height: unset; flex-direction: row; margin-top: 1.25rem; margin-bottom: 0.3125rem; } .form__field--inline .form__radio, .form__field--inline .form__checkbox { margin-bottom: 0.5rem; display: flex; } .form__field--inline .form__radio i, .form__field--inline .form__checkbox i { display: inline-flex; } .form__field--inline-big .form__radio span { font-weight: 500; } @media screen and (min-width: 40em) { .form__field--inline-big .form__radio span { font-size: 1.25rem; line-height: 1.75rem; } } .form .error { float: left; background-color: #FDB913; padding: 2px 7px; color: #444444; font-size: 12px; margin: -1px 0 15px; align-self: flex-start; z-index: 1; line-height: 1.6em; } .form__label { display: table; margin-bottom: 1rem; white-space: nowrap; } .form label, .form__label { position: relative; font-size: 1.125rem; line-height: normal; font-weight: 700; cursor: pointer; display: block; } .form__optional { font-style: normal; color: var(--red-alert-color); font-size: 0.75em; position: absolute; margin-top: 0em; margin-left: 5px; } .form input[type=text], .form input[type=email], .form input[type=phone], .form input[type=date], .form input[type=tel], .form input[type=number], .form input[type=file], .form input[type=password], .form textarea, .form select { background-color: #fff; width: 100%; padding: 10px 15px; font: inherit; border: 1px solid #D1D1C6; border-radius: 3px; position: relative; -moz-appearance: none; -webkit-appearance: none; transition: all 0.35s cubic-bezier(0.29, 0.86, 0.29, 0.86); font-size: 1rem; } .form input[type=text]:focus, .form input[type=email]:focus, .form input[type=phone]:focus, .form input[type=date]:focus, .form input[type=tel]:focus, .form input[type=number]:focus, .form input[type=file]:focus, .form input[type=password]:focus, .form textarea:focus, .form select:focus { box-shadow: inset 0 0 1px 1px #444444; } .form textarea { width: 100%; } .form select { background: #fff no-repeat center url(inline-image("icons/select-arrow.svg")); background-position: 96% center; background-position: calc(100% - 22px) center; background-size: 14px 9px; } .form input[type=date] { background: #fff no-repeat center url(inline-image("icons/calendar.svg")); background-position: 16px center; background-size: 24px 23px; padding-left: 55px; } .form__checkbox, .form__radio, .form label.form__radio, .form label.form__checkbox { display: inline-flex; align-items: center; justify-items: center; margin-right: 32px; } @media screen and (min-width: 64em) { .form__checkbox, .form__radio, .form label.form__radio, .form label.form__checkbox { margin-right: 50px; } } .form__checkbox:last-of-type, .form__radio:last-of-type, .form label.form__radio:last-of-type, .form label.form__checkbox:last-of-type { margin-right: auto; } .form__checkbox.form__radio-blocks__block, .form__radio.form__radio-blocks__block, .form label.form__radio.form__radio-blocks__block, .form label.form__checkbox.form__radio-blocks__block { display: flex; flex-direction: column; align-items: center; justify-items: center; justify-content: center; min-height: 86px; padding: 1.375rem; margin-right: 0; position: relative; } .form__checkbox.form__radio-blocks__block *, .form__radio.form__radio-blocks__block *, .form label.form__radio.form__radio-blocks__block *, .form label.form__checkbox.form__radio-blocks__block * { z-index: 1; pointer-events: none; } .form__checkbox.form__radio-blocks__block i, .form__radio.form__radio-blocks__block i, .form label.form__radio.form__radio-blocks__block i, .form label.form__checkbox.form__radio-blocks__block i { transition: none; } .form__checkbox.form__radio-blocks__block input, .form__radio.form__radio-blocks__block input, .form label.form__radio.form__radio-blocks__block input, .form label.form__checkbox.form__radio-blocks__block input { color: inherit; pointer-events: all; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; opacity: 1; border: 1px solid #D1D1C6; z-index: 0; border-radius: 5px; transition: background-color 0.35s ease; } .form__checkbox.form__radio-blocks__block input:checked, .form__radio.form__radio-blocks__block input:checked, .form label.form__radio.form__radio-blocks__block input:checked, .form label.form__checkbox.form__radio-blocks__block input:checked { border: 2px solid #FDB913; background-color: #fff; } .form__checkbox.form__radio-blocks__block input:checked ~ span, .form__radio.form__radio-blocks__block input:checked ~ span, .form label.form__radio.form__radio-blocks__block input:checked ~ span, .form label.form__checkbox.form__radio-blocks__block input:checked ~ span { color: #444444; } .form__checkbox.form__radio-blocks__block input:checked ~ svg, .form__radio.form__radio-blocks__block input:checked ~ svg, .form label.form__radio.form__radio-blocks__block input:checked ~ svg, .form label.form__checkbox.form__radio-blocks__block input:checked ~ svg { transition: all 0.35s ease; } .form__checkbox.form__radio-blocks__block input:checked ~ svg [fill], .form__radio.form__radio-blocks__block input:checked ~ svg [fill], .form label.form__radio.form__radio-blocks__block input:checked ~ svg [fill], .form label.form__checkbox.form__radio-blocks__block input:checked ~ svg [fill] { fill: #FDB913 !important; } .form__checkbox.form__radio-blocks__block input:focus, .form__radio.form__radio-blocks__block input:focus, .form label.form__radio.form__radio-blocks__block input:focus, .form label.form__checkbox.form__radio-blocks__block input:focus { outline-color: #FDB913; border-width: 3px; } .form__checkbox.form__radio-blocks__block input:hover, .form__radio.form__radio-blocks__block input:hover, .form label.form__radio.form__radio-blocks__block input:hover, .form label.form__checkbox.form__radio-blocks__block input:hover { border-width: 3px; } .form__checkbox.form__radio-blocks__block span:not(.sign), .form__radio.form__radio-blocks__block span:not(.sign), .form label.form__radio.form__radio-blocks__block span:not(.sign), .form label.form__checkbox.form__radio-blocks__block span:not(.sign) { margin-left: unset; } .form__checkbox.form__radio-blocks__block .sign + strong, .form__radio.form__radio-blocks__block .sign + strong, .form label.form__radio.form__radio-blocks__block .sign + strong, .form label.form__checkbox.form__radio-blocks__block .sign + strong { margin-top: 0.75em; } .form__checkbox.form__radio-blocks__block strong, .form__radio.form__radio-blocks__block strong, .form label.form__radio.form__radio-blocks__block strong, .form label.form__checkbox.form__radio-blocks__block strong { font-size: 1rem; line-height: 1.25rem; } .form__checkbox.form__radio-blocks__block strong + span, .form__radio.form__radio-blocks__block strong + span, .form label.form__radio.form__radio-blocks__block strong + span, .form label.form__checkbox.form__radio-blocks__block strong + span { margin-top: 0.5em; font-size: 1rem; line-height: 1.375rem; } .form__checkbox .sign, .form__radio .sign, .form label.form__radio .sign, .form label.form__checkbox .sign { display: inline-flex; width: 16px; height: 16px; background-color: transparent; border-radius: 50%; border: 1px solid currentColor; transition: border-color 0.35s cubic-bezier(0.29, 0.86, 0.29, 0.86); align-items: center; justify-items: center; justify-content: center; flex: 0 0 auto; } .form__checkbox .sign:after, .form__radio .sign:after, .form label.form__radio .sign:after, .form label.form__checkbox .sign:after { content: ""; display: block; background-color: transparent; width: 12px; height: 12px; border-radius: 50%; transition: all 0.6s cubic-bezier(0.29, 0.86, 0.29, 0.86); } .form__checkbox--small .sign, .form__radio--small .sign, .form label.form__radio--small .sign, .form label.form__checkbox--small .sign { width: 20px; height: 20px; } .form__checkbox input, .form__radio input, .form label.form__radio input, .form label.form__checkbox input { opacity: 0; margin: unset; position: absolute; width: 16px; height: 16px; appearance: none; background-color: transparent; } .form__checkbox input:hover + .sign, .form__checkbox input:focus + .sign, .form__checkbox input:active + .sign, .form__radio input:hover + .sign, .form__radio input:focus + .sign, .form__radio input:active + .sign, .form label.form__radio input:hover + .sign, .form label.form__radio input:focus + .sign, .form label.form__radio input:active + .sign, .form label.form__checkbox input:hover + .sign, .form label.form__checkbox input:focus + .sign, .form label.form__checkbox input:active + .sign { border-width: 2px; } .form__checkbox input:checked + .sign, .form__radio input:checked + .sign, .form label.form__radio input:checked + .sign, .form label.form__checkbox input:checked + .sign { color: var(--button-border); border-color: var(--button-border); background-color: #fff; } .form__checkbox input:checked + .sign:after, .form__radio input:checked + .sign:after, .form label.form__radio input:checked + .sign:after, .form label.form__checkbox input:checked + .sign:after { background-color: var(--button-border); } .form__checkbox input:checked ~ strong, .form__radio input:checked ~ strong, .form label.form__radio input:checked ~ strong, .form label.form__checkbox input:checked ~ strong { color: var(--button-border); } .form__checkbox span:not(.sign), .form__radio span:not(.sign), .form label.form__radio span:not(.sign), .form label.form__checkbox span:not(.sign) { margin-left: 8px; } .form__checkbox span:not(.sign) a, .form__radio span:not(.sign) a, .form label.form__radio span:not(.sign) a, .form label.form__checkbox span:not(.sign) a { text-decoration: underline; } .form__checkbox span:not(.sign) a:focus, .form__checkbox span:not(.sign) a:hover, .form__checkbox span:not(.sign) a:active, .form__radio span:not(.sign) a:focus, .form__radio span:not(.sign) a:hover, .form__radio span:not(.sign) a:active, .form label.form__radio span:not(.sign) a:focus, .form label.form__radio span:not(.sign) a:hover, .form label.form__radio span:not(.sign) a:active, .form label.form__checkbox span:not(.sign) a:focus, .form label.form__checkbox span:not(.sign) a:hover, .form label.form__checkbox span:not(.sign) a:active { color: #FDB913; } .form__checkbox + .error, .form__radio + .error, .form label.form__radio + .error, .form label.form__checkbox + .error { float: none; display: table; padding: 4px 10px; margin-top: 10px; } .form__checkbox, .form label.form__checkbox { font-size: 0.75rem; text-transform: uppercase; } .form__checkbox input + .sign, .form label.form__checkbox input + .sign { border-radius: 2px; } .form__checkbox input + .sign:after, .form label.form__checkbox input + .sign:after { background-color: transparent; border-radius: 0; width: 18px; height: 18px; mask: no-repeat center url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M16.0001 0.000424892C16.0001 0.000424892 14.7059 -0.000244141 14.2081 -0.000244141H1.79209C1.29431 -0.000244141 0 0.000474662 0 0.000474662L8.92729e-05 1.79176V14.2078L0.000139371 15.9998H1.79209H14.2081H16.0001V14.2078V1.79176V0.000424892ZM14.2081 3.45837L6.20805 11.4584L1.79205 6.9997L3.05072 5.74103L6.20805 8.9197L12.9494 2.15703L14.2081 3.45837Z' fill='black'/%3E%3C/svg%3E "); -webkit-mask: no-repeat center url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M16.0001 0.000424892C16.0001 0.000424892 14.7059 -0.000244141 14.2081 -0.000244141H1.79209C1.29431 -0.000244141 0 0.000474662 0 0.000474662L8.92729e-05 1.79176V14.2078L0.000139371 15.9998H1.79209H14.2081H16.0001V14.2078V1.79176V0.000424892ZM14.2081 3.45837L6.20805 11.4584L1.79205 6.9997L3.05072 5.74103L6.20805 8.9197L12.9494 2.15703L14.2081 3.45837Z' fill='black'/%3E%3C/svg%3E "); mask-size: contain; -webkit-mask-size: contain; } .form__checkbox input:checked + .sign:after, .form label.form__checkbox input:checked + .sign:after { transition: none; background-color: #FDB913; } .form__radio-blocks { text-align: center; } @media screen and (min-width: 64em) { .form__radio-blocks--big label.form__radio-blocks__block.form__radio { min-height: 11.125rem; } .form__radio-blocks--big label.form__radio-blocks__block.form__radio strong { font-size: 1.25rem; line-height: 1.75rem; } } .form__btn { text-transform: uppercase; text-align: center; appearance: none; --text-color: var(--button-color); --red-alert-color: var(--button-color); background-color: var(--button-bg); border: 1px solid var(--button-border); border-radius: 3px; display: flex; position: relative; transition: all 0.6s cubic-bezier(0.29, 0.86, 0.29, 0.86); padding: 0.625rem 1.25rem; justify-content: center; align-items: center; column-gap: 0.625rem; } .form__btn:focus, .form__btn:hover, .form__btn:active { border-color: #444444; box-shadow: inset 0 0 1px 0 #444444; } .form__btn span { color: var(--button-color); margin-left: 0; margin-right: 0; text-transform: uppercase; display: flex; align-self: center; justify-content: center; } .form__btn span.cta__text { padding-left: 0; } .form__btn.cta { padding-left: 1.25rem; padding-right: 1.25rem; } .form__btn.form__btn--submit { width: 100%; grid-column: 1/-1; margin-top: 1.6875rem; } @media screen and (min-width: 64em) { .form__btn.form__btn--submit { margin-top: 2.0625rem; padding: 1.5625rem 1.25rem; } } .form__privacy-submit__privacy { grid-column: 1/-1; margin-bottom: 0; } .form__privacy-submit__privacy.form__field--inline { margin-top: 0; } .form__privacy-submit__privacy .form__checkbox { align-items: normal !important; } .form__privacy-submit__privacy div { display: flex; flex-direction: column; } .form__privacy-submit__privacy .error { margin-top: 1em; } .form__privacy-submit__privacy + .form__btn.form__btn--submit { margin-top: 20px; } .form__privacy-submit__privacy span:not(.sign) { font-size: 1rem; text-transform: none; letter-spacing: normal; line-height: 1.25rem; } .form__privacy-submit__privacy span:not(.sign) a { color: inherit; } @media screen and (min-width: 64em) { .form__privacy-submit__privacy { grid-column: 1/span 4; align-self: stretch; display: flex; border-bottom: 1px solid var(--block-separation-color); } .form__grid > .form__privacy-submit__privacy { grid-column: 1/-1; } } .form__privacy-submit__submit.form__btn { min-height: 3.125rem; grid-column: 1/-1; } @media screen and (min-width: 40em) { .form__privacy-submit__submit.form__btn { min-height: 4rem; } } @media screen and (min-width: 64em) { .form__privacy-submit__submit.form__btn { margin-top: 6.25rem; grid-column: 9/-1; min-height: 5.75rem; } .form__grid > .form__privacy-submit__submit.form__btn { grid-column: auto/span 2; } } .form .form__group__item { position: relative; } .form .form__group__item + .form__group__item { margin-top: 3.6rem; border-top: 1px solid var(--block-separation-color); } .form .form__group__add, .form .form__group__remove { background: transparent; padding: 0; margin-top: 1rem; text-align: left; text-transform: uppercase; font-weight: 500; text-decoration: underline; display: flex; align-items: center; } .form .form__group__add:before, .form .form__group__remove:before { background-color: currentColor; mask-size: contain; width: 16px; height: 16px; } .form .form__group__remove:before { width: 20px; height: 18px; } @media screen and (min-width: 64em) { .form .form__group__remove { position: absolute; right: 100%; top: 4.7rem; transform: translateY(50%); margin-right: 10px; } } .form .form__group__remove:hover, .form .form__group__remove:focus { color: var(--red-alert-color); } .form .form__group__remove span { margin-left: 0.5rem; } .form .form__group__add { padding: 0; margin-top: 1rem; text-align: left; text-transform: uppercase; font-weight: 500; text-decoration: underline; } .form .form__group__add span { margin-left: 0.5rem; } .form--nested .form__fieldset { grid-column: 1/-1; } .form__info { font-size: 1rem; line-height: 1.625rem; margin-top: 1rem; margin-bottom: 1rem; } .form__info p { font-size: 1rem; line-height: 1.625rem; } .form__info p:first-child { margin-top: unset; } .form__info p:last-child { margin-bottom: unset; } @media screen and (min-width: 40em) { .form__info { margin-top: 1.5rem; margin-bottom: 1.5rem; } } @media screen and (min-width: 64em) { .form__info { margin-top: 2rem; margin-bottom: 2rem; } } .form__info--instructions .form__heading { font: inherit; font-size: 1.125rem; line-height: 1.875rem; margin-bottom: 1em; font-weight: 500; } .form--submitting { opacity: 0.5; filter: saturate(0); cursor: progress; } .form--submitting * { pointer-events: none; } .form__recipient { margin-bottom: 0; } .form__recipient input:hover + .sign, .form__recipient input:focus + .sign { border-color: #FDB913 !important; } .form__recipient label { align-items: flex-start !important; margin-bottom: 0 !important; } .form__recipient label div { margin-left: 1rem; } .form__recipient label div span { font-size: 1.25rem; font-style: normal; font-weight: 400; line-height: 135%; text-transform: none; margin-left: unset !important; letter-spacing: unset !important; text-align: left; max-width: 21.125rem; display: inline-block; position: relative; bottom: 0.3125rem; } .form__privacy-submit__privacy label { margin-right: 0 !important; width: 100%; } .form__privacy-submit__privacy label > span { margin-left: 0 !important; display: flex; flex-wrap: wrap; flex-basis: 100%; } .form__privacy-submit__privacy label > span input:hover + .sign, .form__privacy-submit__privacy label > span input:focus + .sign { border-color: #616569 !important; } .form__privacy-submit__privacy label > span span.error { margin-left: 0 !important; font-size: 0.75rem; font-weight: normal; } .form__privacy-submit__privacy label > span span.sign::after { filter: grayscale(1) brightness(0.6); } .form__privacy-submit__privacy label > span > div { display: inline-block; flex-basis: 90%; } .form__privacy-submit__privacy label > span > div .privacy-text { color: #616569; font-size: 12px; font-style: normal; font-weight: 400; line-height: normal; display: inherit; position: relative; top: 0.125rem; } body { font-family: "Niveau Grotesk", Helvetica Neue, Helvetica, Roboto, Arial, sans-serif; color: #444444; line-height: 1.6; } html { -webkit-font-smoothing: antialiased; } body { font-family: "Niveau Grotesk", Helvetica Neue, Helvetica, Roboto, Arial, sans-serif; } picture { display: block; } strong { font-weight: 700; } h1, h2, h3 { font-family: "Niveau Grotesk", Helvetica Neue, Helvetica, Roboto, Arial, sans-serif; } :root * { outline-color: #444444; outline-offset: 5px; } html, body { min-height: 100vh; scroll-behavior: smooth; } body { margin: auto; display: flex; flex-direction: column; align-items: center; background-color: #F5F5F1; -moz-osx-font-smoothing: grayscale; } *, *:after, *:before { box-sizing: border-box; } img { max-width: 100%; height: auto; vertical-align: middle; } @media screen and (min-width: 64em) { img { width: auto; } } :root { --outer-margin: 1.25rem; } @media print, screen and (min-width: 40em) { :root { --outer-margin: 2.5rem; } } @media screen and (min-width: 64em) { :root { --outer-margin: 5rem; } } .main-header, .main-footer, .grid { width: 100%; margin-left: auto; margin-right: auto; max-width: 105rem; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); --grid-gap: 1.25rem; grid-column-gap: var(--grid-gap); align-items: flex-start; } @media screen and (min-width: 64em) { .main-header, .main-footer, .grid { grid-template-columns: repeat(12, minmax(0, 1fr)); --grid-gap: 1.875rem; } } .main-header, .main-footer { flex-grow: 0; flex-shrink: 0; } .main-header, .main-footer, .main-content { padding: 0 var(--outer-margin); flex-grow: 1; align-items: stretch; } .main-content { width: 100%; margin-left: auto; margin-right: auto; max-width: 105rem; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); --grid-gap: 1.25rem; grid-column-gap: var(--grid-gap); align-items: flex-start; grid-column: 1/-1; background-color: #fff; } @media screen and (min-width: 64em) { .main-content { grid-template-columns: repeat(12, minmax(0, 1fr)); --grid-gap: 1.875rem; } } a.cta, button.cta { background-color: var(--button-bg); color: var(--button-color); border-radius: 0.1875rem; padding: 0.9375rem 1.25rem; text-align: center; font-size: 1rem; font-style: normal; font-weight: 700; line-height: normal; text-transform: uppercase; cursor: pointer; display: inline-block; transition: all 0.3s cubic-bezier(0.29, 0.86, 0.29, 0.86); } @media screen and (min-width: 64em) { a.cta, button.cta { font-size: 1.25rem; } } @media screen and (min-width: 40em) { a.cta:hover, button.cta:hover { background-color: #cc9906; transition: background-color 0.3s ease-out; } } .main-footer { padding: 3.0625rem var(--outer-margin) 4rem; align-items: center; background-color: #fff; } @media screen and (min-width: 64em) { .main-footer { padding: 3.125rem var(--outer-margin) 3.625rem; } } .main-footer__logo { margin-bottom: 1.9375rem; } .main-footer__contacts { max-width: 22.25rem; } .main-footer__location, .main-footer__contacts { font-size: 1rem; font-style: normal; font-weight: 400; line-height: 142%; margin-top: 0.625rem; } .main-footer__privacy { font-size: 1rem; font-style: normal; font-weight: 400; line-height: 142%; text-decoration-line: underline; margin-top: 0.625rem; } .main-footer__privacy:hover { text-decoration: none; } @media screen and (max-width: 63.99875em) { .main-footer { display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; } } @media screen and (min-width: 64em) { .main-footer__logo { grid-column: 1/span 2; margin-bottom: unset; } .main-footer__location { grid-column: 4/span 2; width: 103%; } .main-footer__contacts { grid-column: 6/span 3; margin-left: 1.25rem; max-width: unset; } .main-footer__privacy { grid-column: -3/-1; font-size: 1rem; font-style: normal; font-weight: 400; line-height: 142%; width: 115%; position: relative; right: 13%; margin-top: unset; } .main-footer__privacy:hover { text-decoration: none; } } .main-footer--anello { color: #616569; } .main-footer--anello .main-footer__privacy { text-decoration: none; } @media screen and (max-width: 63.99875em) { .main-footer--anello { padding-top: 3.75rem; padding-bottom: 3.125rem; align-items: flex-start; text-align: left; } .main-footer--anello .main-footer__logo { margin-bottom: 1.25rem; } .main-footer--anello .main-footer__privacy { margin-top: 1.875rem; } .main-footer--anello p, .main-footer--anello a { font-size: 1.125rem; line-height: 125%; } } @media print, screen and (min-width: 64em) { .main-footer--anello { padding-left: 3.125rem; padding-right: 3.125rem; } } .hero { grid-column: 1/-1; margin: 0 calc(var(--outer-margin) * -1); position: relative; background-color: #F5F5F1; padding: 1.5625rem var(--outer-margin) 0; } @media screen and (min-width: 64em) { .hero { background-image: url("/img/hero-background.png"); background-position: right bottom; background-size: contain; background-repeat: no-repeat; padding: 4.25rem var(--outer-margin) 0; } } @media screen and (max-width: 1291px) and (min-width: 1024px) { .hero { background-position: bottom; background-size: cover; } } @media screen and (max-width: 74.99875em) { .hero__logo { max-width: 8.25rem; } } .hero__mobile { position: relative; right: calc(var(--outer-margin)); width: calc(100% + var(--outer-margin) * 2); } @media screen and (min-width: 64em) { .hero__mobile { display: none; } } .hero__mobile img { width: 100%; object-fit: cover; } .hero__content { padding: 2.1875rem 0 2.75rem; } .hero__content h1 { font-size: 1.875rem; font-style: normal; font-weight: 400; line-height: 130%; margin-bottom: 1.1875rem; } @media screen and (min-width: 64em) { .hero__content { max-width: 42%; padding-top: 15.125rem; padding-bottom: 14.5625rem; } .hero__content h1 { font-size: 3rem; font-style: normal; font-weight: 400; line-height: 112.5%; max-width: 33.125rem; margin-bottom: 1.875rem; } } @media screen and (max-width: 1390px) and (min-width: 1290px) { .hero__content { max-width: 36%; } .hero__content h1 { font-size: 2.5625rem; } .hero__content a.cta { font-size: 1.125rem; } } @media screen and (max-width: 1291px) and (min-width: 1024px) { .hero__content { max-width: 34%; } .hero__content h1 { font-size: 2.25rem; } .hero__content a.cta { font-size: 0.875rem; } } .hero--full { background: none; padding: 0; color: #ffffff; min-height: 46.75rem; } @media screen and (min-width: 64em) { .hero--full { min-height: unset; } } .hero--full:after { content: ""; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(0deg, #000 7.15%, rgba(68, 68, 68, 0) 29.41%); position: absolute; } @media screen and (min-width: 64em) { .hero--full:after { background: linear-gradient(0deg, rgba(0, 0, 0, 0.4) 29.48%, rgba(0, 0, 0, 0) 56.35%), linear-gradient(186deg, rgba(0, 0, 0, 0.26) 9.09%, rgba(0, 0, 0, 0) 34.55%); } } .hero--full:before { position: absolute; content: ""; top: 0; left: 0; width: 100%; height: 40%; z-index: 2; background: linear-gradient(121deg, rgba(0, 0, 0, 0.5) 17.61%, rgba(68, 68, 68, 0) 51.16%); } @media screen and (min-width: 64em) { .hero--full:before { display: none; } } .hero--full picture img { height: 100%; object-fit: cover; position: absolute; object-position: 75%; } @media screen and (min-width: 64em) { .hero--full picture img { height: unset; position: unset; object-fit: unset; object-position: unset; } } .hero--full .hero__logo { position: absolute; top: 0.625rem; left: 0.625rem; z-index: 2; max-width: 10rem; } @media screen and (min-width: 64em) { .hero--full .hero__logo { top: 2.5rem; left: 3.75rem; max-width: 100%; } } .hero--full .hero__content { position: absolute; left: 1.3125rem; bottom: 0; z-index: 2; padding-bottom: 2.75rem; } @media screen and (min-width: 64em) { .hero--full .hero__content { left: 5rem; padding-bottom: 8.125rem; } } @media screen and (min-width: 1600px) { .hero--full .hero__content { padding-bottom: 12.5rem; } } .hero--full .hero__content h1 { max-width: 90%; margin-bottom: 0.625rem; line-height: 130%; } @media screen and (min-width: 64em) { .hero--full .hero__content h1 { max-width: 37.5rem; line-height: 113%; } } .hero--full .hero__content p { font-size: 1.25rem; line-height: 140%; margin-bottom: 2.1875rem; max-width: 90%; } @media screen and (min-width: 64em) { .hero--full .hero__content p { max-width: 100%; font-size: 1.5rem; line-height: 142%; margin-bottom: 1.875rem; } } @media screen and (max-width: 39.99875em) { .hero--full.no-overlay:before { display: none; } } .hero.hero--anello { padding-top: 0; } @media screen and (min-width: 64em) { .hero.hero--anello { background-image: url("/img/hero-anello-desktop.jpg"); background-position: left; background-size: cover; padding: 2.5rem 3.125rem 0; } .hero.hero--anello:after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 100%; background: linear-gradient(90deg, rgba(0, 0, 0, 0.18) 0%, rgba(0, 0, 0, 0) 50%); } } @media screen and (min-width: 64em) { .hero.hero--anello.hero--anello--2 { background-image: url("/img/hero-anello-desktop-2.jpg"); background-position: right; } .hero.hero--anello.hero--anello--2:after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 100%; z-index: 1; background: linear-gradient(53deg, rgba(0, 0, 0, 0) 72.56%, rgba(0, 0, 0, 0.4) 100%), linear-gradient(80deg, rgba(0, 0, 0, 0.45) 18.44%, rgba(0, 0, 0, 0) 77.85%); } } @media screen and (max-width: 1378px) and (min-width: 1024px) { .hero.hero--anello .hero--anello__content { max-width: 80%; } .hero.hero--anello .hero--anello__content .hero--anello__cta-content p { flex-basis: 30%; } } @media screen and (max-width: 63.99875em) { .hero.hero--anello { position: relative; max-height: 100vh; } .hero.hero--anello:after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 100%; background: linear-gradient(0deg, rgba(0, 0, 0, 0.36) 22.12%, rgba(0, 0, 0, 0) 56.52%); } } .hero.hero--anello .hero__mobile { position: relative; right: calc(var(--outer-margin)); width: calc(100% + var(--outer-margin) * 2); } @media screen and (min-width: 64em) { .hero.hero--anello .hero__mobile { display: none; } } .hero.hero--anello .hero__mobile img { width: 100%; object-fit: cover; max-height: 100vh !important; } .hero .hero--anello__logo { display: flex; justify-content: space-between; position: relative; z-index: 2; } @media screen and (max-width: 1378px) and (min-width: 1024px) { .hero .hero--anello__logo { max-width: unset; } } @media screen and (max-width: 63.99875em) { .hero .hero--anello__logo { position: absolute; top: 35px; z-index: 2; width: 100%; min-width: 90%; } .hero .hero--anello__logo img:first-of-type { max-width: 8.625rem; } .hero .hero--anello__logo img:last-of-type { max-width: 5.4375rem; } } .hero .hero--anello__content { max-width: 70%; padding: 19.8125rem 0 7.8125rem; position: relative; z-index: 2; } @media screen and (max-width: 63.99875em) { .hero .hero--anello__content { position: absolute; bottom: 0; max-width: unset; padding: 12.5rem 2.375rem 2.3125rem 3.25rem; left: 0; z-index: 1; width: 100%; } } .hero .hero--anello__content .surtitle { font-size: 2rem; font-style: normal; font-weight: 500; line-height: 85%; color: #fff; margin-bottom: 1.4375rem; display: block; } @media screen and (max-width: 63.99875em) { .hero .hero--anello__content .surtitle { text-align: center; margin-bottom: 0.9375rem; font-size: 1.75rem; } } .hero .hero--anello__content h1 { font-family: Romie, serif; font-kerning: none; font-variant-numeric: ordinal; font-feature-settings: "dlig" on, "pcap" off, "liga" off, "clig" off, "calt" off; font-size: 4.625rem; font-style: italic; font-weight: 800; line-height: 104%; letter-spacing: -1px; color: #fff; max-width: unset; } .hero .hero--anello__content h1 .font-ss01 { font-feature-settings: "ss01" 1; } @media screen and (max-width: 63.99875em) { .hero .hero--anello__content h1 span:first-of-type { width: 90%; display: inline-block; } } @media screen and (max-width: 63.99875em) { .hero .hero--anello__content h1 { text-align: center; font-size: 3.4375rem; font-style: italic; font-weight: 800; line-height: 105%; letter-spacing: -0.536px; margin-bottom: 0.4375rem; max-width: 100%; } } @media print, screen and (min-width: 64em) { .hero .hero--anello__content h1 { margin-bottom: 2.5rem; } } @media screen and (max-width: 63.99875em) { .hero .hero--anello__content svg, .hero .hero--anello__content img { transform: scale(0.82); } } .hero .hero--anello__cta-content { display: flex; flex-direction: column; justify-content: center; align-items: center; } @media print, screen and (min-width: 64em) { .hero .hero--anello__cta-content { flex-direction: row; justify-content: flex-start; } } .hero .hero--anello__cta-content p { font-size: 1.1875rem; font-style: normal; font-weight: 400; line-height: 110%; color: #fff; text-align: center; padding: 0 1.875rem; margin: 0.3125rem 0 0.75rem; } @media print, screen and (min-width: 64em) { .hero .hero--anello__cta-content p { font-size: 1.375rem; line-height: 123%; text-align: left; padding: 0; flex-basis: 26%; margin: 0 2rem 0 0.875rem; } } .hero .hero--anello__cta-content a.cta { border-radius: 60px; text-align: center; font-size: 1rem; font-style: normal; font-weight: 500; line-height: normal; text-transform: uppercase; color: #000000; display: flex; align-items: center; padding: 1rem 2.5rem; } @media screen and (max-width: 63.99875em) { .hero .hero--anello__cta-content a.cta { width: 79.3%; max-width: 18.75rem; justify-content: center; } } .hero-ty { grid-column: 1/-1; margin: 0 calc(var(--outer-margin) * -1); position: relative; background-color: #F5F5F1; padding: 1.5625rem var(--outer-margin) 0; background-image: url("/img/hero-ty-mobile.jpg"); background-position: center top; background-size: cover; background-repeat: no-repeat; color: #ffffff; } .hero-ty:before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(0deg, rgba(0, 0, 0, 0.4) 29.48%, rgba(0, 0, 0, 0) 56.35%), linear-gradient(186deg, rgba(0, 0, 0, 0.26) 9.09%, rgba(0, 0, 0, 0) 34.55%); } @media screen and (min-width: 40em) { .hero-ty { background-image: url("/img/hero-ty.jpg"); background-position: right bottom; background-size: cover; background-repeat: no-repeat; padding: 4.25rem var(--outer-margin) 0; } .hero-ty:before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(80deg, rgba(0, 0, 0, 0.63) 8.54%, rgba(0, 0, 0, 0) 46.21%); } } .hero-ty__logo img { filter: brightness(0) invert(1); } @media screen and (max-width: 74.99875em) { .hero-ty__logo { max-width: 8.25rem; } } .hero-ty__content { padding: 16.25rem 0 4.375rem; z-index: 2; position: relative; } .hero-ty__content h1 { font-size: 2.5rem; font-style: normal; font-weight: 400; line-height: 2.8125rem; margin-bottom: 0.9375rem; } .hero-ty__content p { font-size: 1.5rem; font-style: normal; font-weight: 400; line-height: 121%; margin-bottom: 1.25rem; } .hero-ty__content a.cta { padding: 0.9375rem 2.6875rem; } @media screen and (min-width: 64em) { .hero-ty__content { max-width: 29.875rem; padding-top: 7.125rem; padding-bottom: 7.5625rem; } .hero-ty__content h1 { font-size: 3rem; font-style: normal; font-weight: 400; line-height: 112.5%; max-width: 33.125rem; margin-bottom: 3.875rem; } .hero-ty__content p { margin-bottom: 1.0625rem; } } .hero-ty.hero-lead { background-image: url("/img/hero-lead-mobile.jpg"); } @media screen and (max-width: 39.99875em) { .hero-ty.hero-lead .hero-ty__content { padding-bottom: 1.25rem; padding-top: 25.125rem; } .hero-ty.hero-lead .hero-ty__content h1 { font-size: 1.875rem; font-style: normal; font-weight: 400; line-height: 130%; } } @media screen and (min-width: 40em) { .hero-ty.hero-lead { background-image: url("/img/hero-lead.jpg"); padding: 4.25rem var(--outer-margin) 0; min-height: unset; } .hero-ty.hero-lead .hero-ty__content { max-width: 39rem; padding-top: 18.25rem; } .hero-ty.hero-lead .hero-ty__content h1 { max-width: unset; margin-bottom: 1.875rem; } .hero-ty.hero-lead .hero-ty__content a.cta { padding: 1.25rem 1.875rem; } } @media screen and (min-width: 1200px) and (max-height: 715px) { .hero-ty.hero-lead .hero-ty__content { padding-top: 12.5rem; } } .hero-ecard { grid-column: 1/-1; margin: 0 calc(var(--outer-margin) * -1); position: relative; background-color: #F5F5F1; padding: 1.5625rem var(--outer-margin) 0; } @media screen and (min-width: 64em) { .hero-ecard { background-color: #FDB913; padding: 9.3125rem var(--outer-margin) 7.75rem; } .hero-ecard__frame { background-color: #F5F5F1; background-image: url("/img/hero-background-ecard.png"); background-position: right bottom; background-size: contain; background-repeat: no-repeat; border-radius: 30px; position: relative; } .hero-ecard__frame::after { content: ""; position: absolute; background-image: url("/img/saint.png"); background-position: 109% bottom; background-size: contain; background-repeat: no-repeat; width: 100%; height: 116%; top: -16%; left: 0; border-radius: 30px; } .hero-ecard__logo { padding: 4.0625rem 0 0 4.375rem; } } @media screen and (max-width: 74.99875em) { .hero-ecard__logo { max-width: 8.75rem; } } .hero-ecard__mobile { position: relative; right: calc(var(--outer-margin)); width: calc(100% + var(--outer-margin) * 2); } @media screen and (min-width: 64em) { .hero-ecard__mobile { display: none; } } .hero-ecard__mobile img { width: 100%; object-fit: cover; } .hero-ecard__content { padding: 2.1875rem 0 1.0625rem; } .hero-ecard__content h1 { font-size: 2.5rem; font-style: normal; font-weight: 400; line-height: 112.5%; margin-bottom: 1.1875rem; } .hero-ecard__content p { font-size: 1.75rem; font-style: normal; line-height: 193%; } @media screen and (min-width: 40em) and (max-width: 63.99875em) { .hero-ecard__content h1 { max-width: 33.625rem; } } @media screen and (min-width: 64em) { .hero-ecard__content { max-width: 42%; padding-top: 5.25rem; padding-bottom: 6.25rem; padding-left: 4.375rem; } .hero-ecard__content h1 { font-size: 3rem; font-style: normal; font-weight: 400; line-height: 112.5%; max-width: 30rem; margin-bottom: 1.875rem; } } @media screen and (max-width: 1390px) and (min-width: 1290px) { .hero-ecard__content { max-width: 36%; } .hero-ecard__content h1 { font-size: 2.5625rem; } } @media screen and (max-width: 1291px) and (min-width: 1024px) { .hero-ecard__content { max-width: 34%; padding-left: 2.5rem; } .hero-ecard__content h1 { font-size: 1.875rem; } } @media screen and (max-width: 1291px) and (min-width: 1024px) { .hero-ecard__logo { padding-left: 2.5rem; padding-top: 0; position: relative; top: 1.875rem; max-width: 20%; } .hero-ecard p { font-size: 1.5rem; } } .hero-ecard--full { color: #ffffff; position: relative; padding-top: 0; padding-bottom: 0; min-height: 46.75rem; } @media screen and (min-width: 64em) { .hero-ecard--full { padding-top: 11.4375rem; padding-bottom: 8.125rem; min-height: unset; } } .hero-ecard--full:after { content: ""; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(0deg, #000 7.15%, rgba(68, 68, 68, 0) 29.41%); position: absolute; } @media screen and (min-width: 64em) { .hero-ecard--full:after { display: none; } } .hero-ecard--full:before { position: absolute; content: ""; top: 0; left: 0; width: 100%; height: 40%; z-index: 2; background: linear-gradient(121deg, rgba(0, 0, 0, 0.5) 17.61%, rgba(68, 68, 68, 0) 51.16%); } @media screen and (min-width: 64em) { .hero-ecard--full:before { display: none; } } .hero-ecard--full .hero-ecard__logo { position: absolute; top: 1.5rem; left: 1.3125rem; padding: 0; z-index: 2; max-width: 8.1875rem; } @media print, screen and (min-width: 64em) { .hero-ecard--full .hero-ecard__logo { left: 5rem; top: 4.25rem; max-width: 100%; } } .hero-ecard--full .hero-ecard__logo img { filter: brightness(0) invert(1); } .hero-ecard--full .hero-ecard__frame { position: relative; background-image: url("/img/hero-full-width.jpg"); background-position: center; background-repeat: no-repeat; background-size: cover; padding-top: 9.0625rem; } @media screen and (max-width: 1024px) { .hero-ecard--full .hero-ecard__frame { position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: 2; background-image: none; } } @media print, screen and (min-width: 64em) { .hero-ecard--full .hero-ecard__frame:after { content: ""; position: absolute; width: 100%; height: 100%; left: 0; top: 0; background: linear-gradient(55deg, rgba(0, 0, 0, 0.8) 15.13%, rgba(68, 68, 68, 0) 61.49%); } } .hero-ecard--full .hero-ecard__content { position: absolute; left: 0; bottom: 2rem; width: 100%; padding-left: 1.3125rem; padding-right: 1.3125rem; } @media print, screen and (min-width: 64em) { .hero-ecard--full .hero-ecard__content { position: inherit; padding-left: 4.375rem; padding-right: 0; z-index: 2; bottom: 0; } } .hero-ecard--full .hero-ecard__content h1 { margin-bottom: 1.1875rem; } @media print, screen and (min-width: 64em) { .hero-ecard--full .hero-ecard__content h1 { margin-bottom: 2.9375rem; } } .hero-ecard--full .hero-ecard__mobile img { height: 46.75rem; max-height: 46.75rem; } .media-blocks { grid-column: 1/-1; position: relative; right: calc(var(--outer-margin)); width: calc(100% + var(--outer-margin) * 2); } .media-blocks .white-block { background-color: #ffffff; padding: 10.5rem var(--outer-margin) 11.5625rem; } @media screen and (min-width: 64em) { .media-blocks .white-block { padding: 18.5rem var(--outer-margin) 6rem; } } .media-blocks .white-block__image { position: relative; grid-column: 3/-1; bottom: -48px; grid-row: 2; } .media-blocks .white-block__image img { position: absolute; } @media screen and (min-width: 40em) and (max-width: 63.99875em) { .media-blocks .white-block__image { grid-column: 5/-1; } } @media print, screen and (min-width: 64em) { .media-blocks .white-block__image { grid-column: 2/span 4; grid-row: 1; bottom: 110px; } } @media screen and (min-width: 425px) and (max-width: 639px) { .media-blocks .white-block__image { grid-column: 4/-1; } } @media screen and (min-width: 1500px) { .media-blocks .white-block__image { grid-column: 2/span 3; } } .media-blocks .white-block__text { grid-column: 1/-1; font-size: 1.25rem; font-style: normal; font-weight: 400; line-height: 142%; grid-row: 1; } .media-blocks .white-block__text strong { font-weight: 700; } .media-blocks .white-block__text img { display: block; position: absolute; top: 4.1875rem; right: 50%; transform: translate(50%, 0); width: 7.875rem; } @media screen and (min-width: 64em) { .media-blocks .white-block__text { grid-column: 7/-2; grid-row: 1; font-size: 1.5rem; width: 105%; max-width: 36rem; } .media-blocks .white-block__text img { top: 7.1875rem; right: 25%; width: 13.125rem; transform: unset; } } .media-blocks .yellow-block { background: linear-gradient(180deg, #f9ba07 0%, #f9ba07 62%, white 62%); padding: 7.9375rem var(--outer-margin) 2.25rem; overflow: hidden; } @media screen and (min-width: 64em) { .media-blocks .yellow-block { background: #FDB913; padding: 9.25rem var(--outer-margin) 6.6875rem; overflow: visible; } } .media-blocks .yellow-block__bg-text { grid-column: 1/-1; margin-bottom: 2.4375rem; width: 116%; } @media screen and (min-width: 64em) { .media-blocks .yellow-block__bg-text { grid-column: 3/-2; width: 100%; } } .media-blocks .yellow-block__text { grid-column: 1/-1; font-size: 1.25rem; font-style: normal; font-weight: 400; line-height: 140%; } .media-blocks .yellow-block__text strong { font-weight: 700; } @media screen and (min-width: 64em) { .media-blocks .yellow-block__text { grid-column: 2/span 5; font-size: 1.5rem; max-width: 31.875rem; margin-top: 2.1875rem; } } .media-blocks .yellow-block__image { grid-column: 1/-2; position: relative; grid-row: 2; bottom: 2.9375rem; } @media screen and (min-width: 40em) and (max-width: 63.99875em) { .media-blocks .yellow-block__image { grid-column: 1/-3; } } @media screen and (min-width: 64em) { .media-blocks .yellow-block__image { grid-column: 7/-2; position: relative; bottom: unset; } .media-blocks .yellow-block__image img { position: absolute; z-index: 2; } } @media screen and (min-width: 90em) { .media-blocks .yellow-block__image img { max-width: 33.625rem; } } @media print, screen and (min-width: 64em) { .media-blocks--anello { position: relative; } .media-blocks--anello:after { content: ""; position: absolute; width: 100%; bottom: 0; height: 3.75rem; z-index: 3; background: linear-gradient(0deg, white 9%, rgba(255, 255, 255, 0) 100%); } } .media-blocks--anello .text-block { background-color: #ffffff; padding: 0 var(--outer-margin) 4.375rem; overflow: hidden; } @media screen and (min-width: 64em) { .media-blocks--anello .text-block { padding: 3.125rem var(--outer-margin) 7.5rem; } } .media-blocks--anello .text-block__image { grid-column: 5/-1; position: relative; grid-row: 2; bottom: 0; } .media-blocks--anello .text-block__image img { border-radius: 5px; } @media screen and (min-width: 64em) { .media-blocks--anello .text-block__image { grid-column: 10/span 2; position: relative; bottom: unset; width: calc(100% + var(--grid-gap)); right: var(--grid-gap); } .media-blocks--anello .text-block__image img { z-index: 2; max-width: 14.3125rem; width: 100%; height: auto; } } @media screen and (min-width: 90em) { .media-blocks--anello .text-block__image img { max-width: 33.625rem; } } .media-blocks--anello .text-block__image.image-left { grid-column: 1/span 2; grid-row: 1; position: relative; left: 0; right: unset; top: 4.375rem; } @media print, screen and (min-width: 64em) { .media-blocks--anello .text-block__image.image-left { grid-column: 2/span 2; width: calc(100% + var(--grid-gap)); grid-row: 1; position: relative; left: 0; right: unset; top: 4.375rem; } } .media-blocks--anello .yellow-block__bg-text { z-index: 3; grid-row: 1; padding: 5rem 0 0.625rem; } .media-blocks--anello .yellow-block__bg-text img { width: 100%; } @media screen and (max-width: 39.99875em) { .media-blocks--anello .yellow-block__bg-text { margin-bottom: 0; margin-top: 5rem; } .media-blocks--anello .yellow-block__bg-text img { width: auto; } } @media screen and (min-width: 40em) and (max-width: 63.99875em) { .media-blocks--anello .yellow-block__bg-text { grid-column: 2/span 4; margin-bottom: 0; margin-top: 6rem; } .media-blocks--anello .yellow-block__bg-text img { width: 80%; } } @media print, screen and (min-width: 64em) { .media-blocks--anello .yellow-block__bg-text { grid-column: 4/span 6; padding: 0; width: calc(100% + var(--grid-gap) * 2); position: relative; right: var(--grid-gap); } } .media-blocks--anello .yellow-block__bg-text.safari { top: 50% !important; } @media screen and (max-width: 63.99875em) { .media-blocks--anello .yellow-block__bg-text.safari { position: relative; padding-top: 0; margin-top: 0.5rem; margin-bottom: 6rem; } } .quote-block { padding: 4.375rem 0 5rem; grid-column: 1/-1; background: #ffffff; position: relative; right: calc(var(--outer-margin)); width: calc(100% + var(--outer-margin) * 2); } @media screen and (min-width: 64em) { .quote-block { padding: 18.75rem 0 13rem; } } .quote-block__text { grid-column: 1/-1; text-align: center; font-family: Baskerville, serif; font-size: 2.625rem; font-style: normal; font-weight: 400; line-height: normal; padding: 0 1.25rem; } @media screen and (min-width: 64em) { .quote-block__text { grid-column: 3/span 8; font-size: 4.375rem; } } @media screen and (min-width: 1467px) { .quote-block__text { padding: 0 10%; } } .quote-block__text p { position: relative; } .quote-block__text p:before { content: "“"; position: absolute; bottom: 75%; left: 50%; transform: translate(-50%, 0); color: #FDB913; font-size: 7.125rem; font-style: normal; font-weight: 700; line-height: 80%; } @media screen and (min-width: 64em) { .quote-block__text p:before { left: 50%; transform: translate(-50%, 0); font-size: 9rem; } } .quote-block__text p:after { content: ""; position: absolute; bottom: -35px; left: 50%; transform: translate(-50%, 0); height: 1px; width: 6.125rem; background: #000000; } @media screen and (min-width: 64em) { .quote-block__text p:after { width: 23.125rem; bottom: -63px; } } .quote-block__image { grid-column: 2/-2; grid-row: 2; padding: 4.0625rem; position: relative; } .quote-block__image img { border-radius: 50%; position: absolute; left: 50%; transform: translate(-50%, 0); height: 13.5rem; width: 13.4375rem; top: 6.6875rem; z-index: 2; } @media screen and (min-width: 64em) { .quote-block__image { grid-column: 5/span 4; } .quote-block__image img { height: 18.4375rem; width: 18.3125rem; top: 11.5625rem; } } .quote-block.quote-block--lead { padding: 8.4375rem 0 7.25rem; } @media print, screen and (min-width: 64em) { .quote-block.quote-block--lead { padding: 16.875rem 0 15rem; } } .quote-block.quote-block--lead .quote-block__text p:before { bottom: 90%; } @media print, screen and (min-width: 64em) { .quote-block.quote-block--lead .quote-block__text p:before { bottom: 85%; } } @media print, screen and (min-width: 64em) { .quote-block.quote-block--lead .quote-block__text p:after { background-color: #F9BA07; bottom: -45px; } } .form-block { background-color: #FEF8E6; position: relative; right: calc(var(--outer-margin)); width: calc(100% + var(--outer-margin) * 2); grid-column: 1/-1; padding: 9rem 0 4.0625rem; } @media screen and (min-width: 64em) { .form-block { padding: 14.9375rem 0 9.3125rem; } } .form-block .form-wrapper { background-color: #ffffff; border-radius: 15px; border: 1px solid rgba(68, 68, 68, 0.3); grid-column: 1/-1; margin: 0 var(--outer-margin); } @media screen and (min-width: 64em) { .form-block .form-wrapper { grid-column: 3/span 8; margin: 0 calc(var(--outer-margin) - 35px); } } .form-block .form-wrapper .main-form { padding: 2.1875rem 1.1875rem 1.8125rem; } @media screen and (min-width: 64em) { .form-block .form-wrapper .main-form { padding: 5.625rem 6.75rem 5.6875rem 6.875rem; } } @media screen and (min-width: 1024px) and (max-width: 1300px) { .form-block .form-wrapper .main-form { padding: 3.75rem 2.5rem 3.75rem; } } .form-block .form-wrapper .main-form__title { grid-column: 1/-1; } .form-block .form-wrapper .main-form__title h3 { font-size: 1.6875rem; font-style: normal; font-weight: 700; line-height: 126%; margin-bottom: 1rem; } @media screen and (min-width: 64em) { .form-block .form-wrapper .main-form__title h3 { font-size: 2.125rem; line-height: 112%; max-width: 25.375rem; margin-bottom: 0.875rem; } } .form-block .form-wrapper .main-form__title p { font-size: 1.25rem; font-style: normal; font-weight: 400; line-height: 140%; } @media screen and (min-width: 64em) { .form-block .form-wrapper .main-form__title p { font-size: 1.5rem; line-height: 141%; max-width: 26.5625rem; } } .form-block .form-wrapper .main-form form { margin-top: 3.4375rem; } @media screen and (min-width: 40em) { .form-block .form-wrapper .main-form form { display: grid; grid-template-columns: repeat(4, 1fr); grid-column-gap: 1.875rem; margin-top: 3.875rem; } } .form-block .form-wrapper .main-form form button.cta { grid-column: 1/-1; } .form-block.form-block--lead { position: relative; padding: 9rem 0 4.625rem; margin-top: 10.375rem; } @media screen and (min-width: 64em) { .form-block.form-block--lead { margin-top: 0; padding: 8.25rem 0 6.3125rem; } } .form-block.form-block--lead .form-wrapper .main-form .main-form__title__text p { font-size: 1.3125rem; line-height: 129%; } .form-block.form-block--lead .form-wrapper .main-form .main-form__title__image { position: absolute; top: -9%; max-width: 11.5625rem; left: 50%; transform: translateX(-50%); } .form-block.form-block--lead .form-wrapper .main-form .main-form__title__image img { border-radius: 50%; } @media screen and (min-width: 64em) { .form-block.form-block--lead .form-wrapper .main-form .main-form__title { display: flex; } .form-block.form-block--lead .form-wrapper .main-form .main-form__title__text { margin-right: 4.0625rem; } .form-block.form-block--lead .form-wrapper .main-form .main-form__title__text p { width: 96%; } .form-block.form-block--lead .form-wrapper .main-form .main-form__title__image { position: unset; flex-basis: 33%; transform: unset; max-width: 11.6875rem; } } .form-block.form-block--lead.form-block--submitted { display: none; } .form-block.form-block--lead.form-block--submitted + .video_block--lead { display: grid; } .form-block--anello { padding: 0; background-color: rgba(248, 241, 222, 0.6); } @media screen and (max-width: 63.99875em) { .form-block--anello { background-color: #ffffff; } } @media print, screen and (min-width: 64em) { .form-block--anello { align-items: center; padding: 6.25rem 0; } } .form-block--anello .form-wrapper { grid-column: 1/-1; background: transparent; border: none; } @media screen and (max-width: 63.99875em) { .form-block--anello .form-wrapper { margin: 0; } } @media print, screen and (min-width: 64em) { .form-block--anello .form-wrapper { grid-column: 1/span 6; } } .form-block--anello .form-wrapper iframe { border: none; border-radius: 5px; } .form-block--anello__content { grid-column: 1/-1; display: flex; flex-direction: column; align-items: center; padding-top: 1.25rem; } @media print, screen and (min-width: 64em) { .form-block--anello__content { grid-column: 7/-1; padding: 0 2.8125rem 0; } } .form-block--anello__content cite { color: #C29A28; text-align: center; font-kerning: none; font-variant-numeric: ordinal; font-feature-settings: "dlig" on, "pcap" off, "liga" off, "clig" off; font-family: Romie, serif; font-size: 3.125rem; font-style: italic; font-weight: 800; line-height: 108%; letter-spacing: -1px; padding: 0.9375rem var(--outer-margin) 0; margin-bottom: 3.25rem; } @media print, screen and (min-width: 64em) { .form-block--anello__content cite { margin-bottom: 4.5625rem; padding: 1.875rem 0 0; font-size: 2.9375rem; font-style: italic; font-weight: 800; line-height: 122%; } } .form-block--anello__content__image { padding: 0 var(--outer-margin) 3.75rem; position: relative; } .form-block--anello__content__image:after { content: ""; position: absolute; bottom: 0; width: calc(100% - var(--outer-margin) * 2); left: var(--outer-margin); height: 1px; background-color: rgba(0, 0, 0, 0.3); } @media print, screen and (min-width: 64em) { .form-block--anello__content__image { padding: 0; } .form-block--anello__content__image:after { display: none; } .form-block--anello__content__image img { min-width: 22.5rem; max-width: 22.625rem; } } .form-block--anello__content__image img { border-radius: 5px; } @media screen and (max-width: 63.99875em) { .form-block--anello__content svg { transform: scale(0.8); position: relative; left: 0.625rem; } } @media screen and (max-width: 1378px) and (min-width: 1024px) { .form-block--anello__content { padding-top: 0; padding-left: 1.25rem; position: relative; bottom: 2.5rem; } .form-block--anello__content cite { margin-bottom: 2.5rem; font-size: 2.5rem; } } .sticky-cta { opacity: 0; pointer-events: none; padding: 1.875rem var(--outer-margin) 1.75rem; z-index: 9999; align-items: center; position: fixed; background-color: #ffffff; transition: opacity 0.3s ease; border-top: 1px solid rgba(68, 68, 68, 0.3); } .sticky-cta.is-visible { opacity: 1; pointer-events: all; } .sticky-cta__cta a { width: 100%; } @media screen and (max-width: 63.99875em) { .sticky-cta { bottom: 0; left: 0; width: 100vw; } } .sticky-cta__text { display: none; } .sticky-cta__cta { grid-column: 1/-1; } @media screen and (min-width: 64em) { .sticky-cta { opacity: 0; width: 100%; margin-left: auto; margin-right: auto; max-width: 105rem; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); --grid-gap: 1.25rem; grid-column-gap: var(--grid-gap); align-items: flex-start; align-items: center; position: fixed; width: 100vw; background-color: #ffffff; border-bottom: 1px solid rgba(68, 68, 68, 0.3); padding: 2.1875rem var(--outer-margin) 2rem; } } @media screen and (min-width: 64em) and (min-width: 64em) { .sticky-cta { grid-template-columns: repeat(12, minmax(0, 1fr)); --grid-gap: 1.875rem; } } @media screen and (min-width: 64em) { .sticky-cta__text { display: block; grid-column: 1/span 5; font-size: 1.75rem; font-style: normal; font-weight: 400; line-height: normal; } } @media screen and (min-width: 64em) { .sticky-cta__cta { grid-column: -5/-1; position: relative; left: 16%; max-width: 322px; } } @media screen and (min-width: 1024px) and (max-width: 1270px) { .sticky-cta__text { grid-column: 1/span 6; font-size: 1.5rem; } .sticky-cta__cta { grid-column: -6/-1; } .sticky-cta__cta a { font-size: 1.125rem; } } .sticky-cta--lead .sticky-cta__cta a { padding-left: 1.875rem; padding-right: 1.875rem; } @media screen and (min-width: 64em) { .sticky-cta--lead .sticky-cta__text { grid-column: 1/span 6; } .sticky-cta--lead .sticky-cta__cta { grid-column: -7/-1; max-width: 80%; left: 20%; } } @media print, screen and (min-width: 64em) { .sticky-cta--anello { background-color: transparent; border: none; padding-left: 17.375rem; padding-right: 17.375rem; min-width: 37.5rem; } } @media screen and (max-width: 63.99875em) { .sticky-cta--anello { padding-top: 1.375rem; padding-bottom: 1.3125rem; border-top: 1px solid rgba(0, 0, 0, 0.2); } } @media screen and (max-width: 1378px) and (min-width: 1024px) { .sticky-cta--anello { padding-left: 6.25rem; padding-right: 6.25rem; } } .sticky-cta--anello__wrapper { grid-column: 1/-1; align-items: center; background: #FFF; display: flex; flex-direction: column; } @media print, screen and (min-width: 64em) { .sticky-cta--anello__wrapper { border-radius: 110px; border: 1px solid #C29A28; padding: 1.625rem 2.375rem 1.625rem 3.4375rem; justify-content: space-between; flex-direction: row; } } .sticky-cta--anello__wrapper__content { display: flex; align-items: center; flex-direction: column; justify-content: center; } @media print, screen and (min-width: 64em) { .sticky-cta--anello__wrapper__content { column-gap: 0.75rem; justify-content: flex-start; flex-direction: row; } } .sticky-cta--anello__wrapper__content .sticky-cta__text { color: #000000; display: block; } .sticky-cta--anello__wrapper__content .sticky-cta__text p { font-size: 1.1875rem; line-height: 111%; text-align: center; padding: 0 3.125rem; margin-bottom: 0.75rem; max-width: 24.375rem; } @media print, screen and (min-width: 64em) { .sticky-cta--anello__wrapper__content .sticky-cta__text p { font-size: 1.375rem; line-height: 123%; text-align: left; padding: 0; margin-bottom: 0; max-width: unset; } } @media screen and (max-width: 63.99875em) { .sticky-cta--anello__wrapper__content svg { position: absolute; top: -22px; max-width: 38px; } } @media print, screen and (min-width: 64em) { .sticky-cta--anello__wrapper__content svg { margin-right: 0.625rem; } } .sticky-cta--anello__wrapper__content img { max-width: 3.75rem; } @media screen and (max-width: 63.99875em) { .sticky-cta--anello__wrapper__content img { position: absolute; top: -24px; max-width: 60px; } } .sticky-cta--anello .sticky-cta__cta { left: unset; } .sticky-cta--anello .sticky-cta__cta a { border-radius: 60px; font-size: 1rem; font-weight: 500; line-height: normal; text-transform: uppercase; color: #000000; padding: 1rem 2.5rem; min-width: 14.125rem; } @media print, screen and (min-width: 64em) { .sticky-cta--anello .sticky-cta__cta a { min-width: unset; } } .iframe-block { background-color: #FEF8E6; position: relative; right: calc(var(--outer-margin)); width: calc(100% + var(--outer-margin) * 2); grid-column: 1/-1; padding: 3.6875rem var(--outer-margin) 2.8125rem; } @media screen and (min-width: 64em) { .iframe-block { padding: 6.625rem var(--outer-margin) 7.5rem; } } .iframe-block__text { grid-column: 1/-1; } .iframe-block__text h2 { font-size: 2.5rem; line-height: 112.5%; margin-bottom: 0.9375rem; } .iframe-block__text p { font-size: 1.5rem; line-height: 1.8125rem; margin-bottom: 3.1875rem; } @media screen and (min-width: 40em) and (max-width: 63.99875em) { .iframe-block__text h2 { font-size: 2.25rem; max-width: 60%; } .iframe-block__text p { font-size: 1.375rem; } } @media screen and (min-width: 64em) { .iframe-block__text { grid-column: 1/span 4; width: 102%; } .iframe-block__text h2 { font-size: 3rem; font-style: normal; font-weight: 400; line-height: 3.375rem; margin-bottom: 1.875rem; width: 115%; } .iframe-block__text p { font-size: 1.75rem; font-style: normal; font-weight: 400; line-height: normal; margin-bottom: unset; } } .iframe-block__form { grid-column: 1/-1; } @media screen and (min-width: 64em) { .iframe-block__form { grid-column: 7/span 5; width: 102%; } } .iframe-block__form iframe { width: 100%; border-radius: 15px; border: 1px solid rgba(68, 68, 68, 0.3); background-color: #ffffff; height: 593px; } .ecard-media-cta { background-color: #FEF8E6; position: relative; right: calc(var(--outer-margin)); width: calc(100% + var(--outer-margin) * 2); grid-column: 1/-1; padding: 2.4375rem var(--outer-margin) 6.5625rem; } .ecard-media-cta__image { grid-column: 1/-1; } .ecard-media-cta__text { grid-column: 1/-2; font-size: 1.6875rem; font-style: normal; font-weight: 700; line-height: 112%; margin-top: 1.8125rem; } .ecard-media-cta__text h3 { margin-bottom: 1.25rem; max-width: 26.25rem; } @media screen and (min-width: 64em) { .ecard-media-cta { padding: 5.75rem var(--outer-margin) 7.625rem; } .ecard-media-cta__image { grid-column: 2/span 5; } .ecard-media-cta__text { grid-column: 8/-1; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; height: 100%; gap: 2.0625rem; margin-top: unset; } .ecard-media-cta__text h3 { font-size: 2.125rem; line-height: 126%; max-width: 33.5rem; } } .video_block { grid-column: 1/-1; display: grid; grid-template-columns: 1fr; padding-top: 4.375rem; grid-column-gap: 1.6875rem; background-color: #ffffff; position: relative; right: calc(var(--outer-margin)); width: calc(100% + var(--outer-margin) * 2); padding-left: var(--outer-margin); padding-right: var(--outer-margin); } @media print, screen and (min-width: 64em) { .video_block { grid-template-columns: repeat(2, 1fr); padding-top: 9rem; } } .video_block__video { position: relative; } .video_block__video::before { content: ""; position: absolute; top: 10px; left: 10px; background-color: #FDB913; width: 100%; height: 100%; z-index: 1; } @media print, screen and (min-width: 64em) { .video_block__video::before { top: 20px; left: 20px; } } .video_block__video::after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: auto; background-color: #F5F5F1; mix-blend-mode: multiply; z-index: 3; } .video_block__video video { width: 100%; height: 100%; object-fit: cover; position: relative; z-index: 2; } .video_block__content { display: flex; flex-direction: column; align-items: center; justify-content: center; row-gap: 1.6875rem; margin-top: 3.125rem; } @media print, screen and (min-width: 64em) { .video_block__content { margin-top: unset; row-gap: 3.125rem; padding: 0 4.375rem 0 6.25rem; } } .video_block__content img { max-width: 50px; } @media print, screen and (min-width: 64em) { .video_block__content img { max-width: 74px; } } .video_block__content p { font-size: 1.25rem; line-height: 140%; } @media print, screen and (min-width: 64em) { .video_block__content p { font-size: 1.5rem; line-height: 142%; } } .video_block--lead { grid-template-columns: repeat(6, 1fr); background-color: rgba(249, 186, 7, 0.1); padding-top: 3.1875rem; padding-bottom: 5.25rem; display: none; } .video_block--lead h2 { grid-column: 1/-1; text-align: center; margin-bottom: 2.0625rem; font-size: 1.875rem; line-height: 2.4375rem; padding: 0 1.25rem; } @media print, screen and (min-width: 64em) { .video_block--lead { padding: 12.5rem var(--outer-margin) 9.875rem; grid-template-columns: repeat(12, 1fr); } .video_block--lead h2 { grid-column: 4/span 6; padding: 0 2.5rem; font-size: 2rem; line-height: 2.75rem; margin-bottom: 2.375rem; } } @media screen and (min-width: 1600px) { .video_block--lead h2 { padding: 0 6.5625rem; } } .video_block--lead .video_block__video { grid-column: 1/-1; aspect-ratio: 325/201; object-position: left; cursor: pointer; height: 13.125rem; width: 100%; } @media screen and (min-width: 40em) { .video_block--lead .video_block__video { min-height: 32.5rem; } } @media screen and (min-width: 1600px) { .video_block--lead .video_block__video { min-height: 36.25rem; } } .video_block--lead .video_block__video img, .video_block--lead .video_block__video video, .video_block--lead .video_block__video iframe { width: 100%; height: 13.125rem; object-fit: cover; position: relative; z-index: 2; object-position: 20%; } @media screen and (min-width: 40em) { .video_block--lead .video_block__video img, .video_block--lead .video_block__video video, .video_block--lead .video_block__video iframe { height: 32.5rem; } } @media screen and (min-width: 1600px) { .video_block--lead .video_block__video img, .video_block--lead .video_block__video video, .video_block--lead .video_block__video iframe { min-height: 36.25rem; } } .video_block--lead .video_block__video img { position: absolute; left: 0; } .video_block--lead .video_block__video svg { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 2; width: 50px; height: 50px; } @media print, screen and (min-width: 64em) { .video_block--lead .video_block__video svg { width: 80px; height: 80px; } } @media print, screen and (min-width: 64em) { .video_block--lead .video_block__video { grid-column: 3/span 8; aspect-ratio: unset; } .video_block--lead .video_block__video img { object-position: unset; } } @media screen and (min-width: 420px) and (max-width: 639px) { .video_block--lead .video_block__video { height: 300px; } .video_block--lead .video_block__video iframe, .video_block--lead .video_block__video img { height: 18.75rem; } } .video_block--lead a.cta { grid-column: 2/-2; margin-top: 3.125rem; padding-top: 0.9375rem; padding-bottom: 0.9375rem; } @media print, screen and (min-width: 64em) { .video_block--lead a.cta { margin-top: 5.5rem; padding-top: 1.25rem; padding-bottom: 1.25rem; grid-column: 5/span 4; } } @media screen and (min-width: 1024px) and (max-width: 1300px) { .video_block--lead h2 { grid-column: 4/span 7; padding: 0; } .video_block--lead .video_block__video { grid-column: 2/span 10; } } .prayer-block { grid-column: 1/-1; background-color: #FDB913; position: relative; right: calc(var(--outer-margin)); width: calc(100% + var(--outer-margin) * 2); display: grid; grid-template-columns: 1fr; padding-left: var(--outer-margin); padding-right: var(--outer-margin); row-gap: 2.9375rem; padding-bottom: 4.0625rem; } .prayer-block__content { display: flex; flex-direction: column; align-items: center; justify-content: center; row-gap: 2.5rem; grid-row: 2; } .prayer-block__content img { max-width: 65px; } .prayer-block__content p { font-size: 1.25rem; line-height: 140%; max-width: 95%; } .prayer-block__image { width: calc(100% + var(--outer-margin) * 2); position: relative; right: var(--outer-margin); } @media print, screen and (min-width: 64em) { .prayer-block { grid-template-columns: repeat(12, 1fr); padding-right: 0; column-gap: 1.875rem; padding-bottom: 0; } .prayer-block__content { grid-column: 1/span 4; grid-row: 1; } .prayer-block__content p { font-size: 1.5rem; line-height: 142%; padding-bottom: 1.5625rem; max-width: unset; } .prayer-block__content img { max-width: 99px; } .prayer-block__image { grid-column: 6/-1; width: 104%; right: 4%; } .prayer-block__image img { object-fit: cover; } } .intro-anello { background-color: rgba(248, 241, 222, 0.6); position: relative; right: calc(var(--outer-margin)); width: calc(100% + var(--outer-margin) * 2); grid-column: 1/-1; padding: 3.125rem 0 3.75rem; } @media print, screen and (min-width: 64em) { .intro-anello { padding: 4.375rem 0 7.5rem; } } .intro-anello p strong { font-weight: 500; } .intro-anello__cross { color: #F9BA07; text-align: center; font-kerning: none; font-variant-numeric: ordinal; font-feature-settings: "dlig" on, "pcap" off, "liga" off, "clig" off, "calt" off; font-family: Romie, serif; font-size: 78.014px; font-style: normal; font-weight: 800; line-height: normal; letter-spacing: -1.234px; display: flex; width: 100%; justify-content: center; align-items: center; grid-column: 1/-1; } .intro-anello__content { grid-column: 1/-1; text-align: center; font-feature-settings: "liga" off, "clig" off; font-size: 1.625rem; font-style: normal; font-weight: 400; letter-spacing: -1px; color: #000000; line-height: 130%; margin-top: 2.1875rem; padding-bottom: 3.125rem; } @media print, screen and (min-width: 64em) { .intro-anello__content { font-size: 2.0625rem; font-style: normal; line-height: 49px; } } .intro-anello__content p strong { font-weight: 500; } @media print, screen and (min-width: 64em) { .intro-anello__content { margin-top: 2.5rem; padding-bottom: 6.25rem; } .intro-anello__content p { padding: 0 13.75rem; } } @media screen and (max-width: 63.99875em) { .intro-anello__content { padding-left: var(--outer-margin); padding-right: var(--outer-margin); } } @media screen and (max-width: 1378px) and (min-width: 1024px) { .intro-anello__content p { padding: 0 5.625rem; } } .intro-anello__svg { grid-column: 1/-1; display: flex; justify-content: center; align-items: center; height: 23px; width: 100%; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='335' height='25' viewBox='0 0 335 25' fill='none'%3E%3Cpath d='M10.998 24.3624C10.2773 24.3624 9.66633 24.0804 9.165 23.5164C8.66367 22.9211 8.084 22.0124 7.426 20.7904C6.42333 18.9731 5.38933 17.4691 4.324 16.2784C3.29 15.0877 1.84867 14.1635 0 13.5055V13.1765C1.84867 12.4558 3.29 11.5001 4.324 10.3095C5.38933 9.11881 6.42333 7.64614 7.426 5.89148C8.14667 4.63814 8.742 3.74514 9.212 3.21248C9.682 2.67981 10.2773 2.41348 10.998 2.41348C11.75 2.41348 12.3923 2.72681 12.925 3.35348C13.4577 3.94881 13.724 4.59114 13.724 5.28048C13.724 6.00114 13.395 6.81581 12.737 7.72448C12.079 8.60181 11.0293 9.49481 9.588 10.4035C8.178 11.2808 6.392 12.0641 4.23 12.7535L330.697 10.34C328.535 9.65067 326.733 8.86733 325.292 7.99C323.882 7.08133 322.848 6.18833 322.19 5.311C321.532 4.40233 321.203 3.58767 321.203 2.867C321.203 2.17767 321.454 1.53533 321.955 0.939999C322.488 0.313333 323.13 0 323.882 0C324.603 0 325.198 0.266334 325.668 0.799001C326.138 1.33167 326.733 2.22467 327.454 3.478C328.457 5.23267 329.475 6.70533 330.509 7.896C331.574 9.08667 333.031 10.0423 334.88 10.763V11.092C333 11.75 331.527 12.69 330.462 13.912C329.428 15.1027 328.441 16.591 327.501 18.377C326.749 19.6617 326.138 20.586 325.668 21.15C325.198 21.6827 324.603 21.949 323.882 21.949C323.13 21.949 322.488 21.6513 321.955 21.056C321.454 20.4293 321.203 19.7713 321.203 19.082C321.203 18.3613 321.532 17.5623 322.19 16.685C322.848 15.7763 323.882 14.8677 325.292 13.959C326.733 13.0503 328.535 12.2513 330.697 11.562L4.23 13.9755C6.392 14.6648 8.178 15.4637 9.588 16.3724C11.0293 17.2811 12.079 18.1897 12.737 19.0984C13.395 19.9757 13.724 20.7747 13.724 21.4954C13.724 22.1847 13.4577 22.8427 12.925 23.4694C12.3923 24.0647 11.75 24.3624 10.998 24.3624Z' fill='%23C29A28'/%3E%3C/svg%3E"); background-position: center; background-repeat: no-repeat; background-size: contain; } @media print, screen and (min-width: 64em) { .intro-anello__svg { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1340' height='24' viewBox='0 0 1340 24' fill='none'%3E%3Cpath d='M11.498 23.1397C10.7773 23.1397 10.1663 22.8577 9.665 22.2937C9.16367 21.6983 8.584 20.7897 7.926 19.5677C6.92333 17.7503 5.88933 16.2463 4.824 15.0557C3.79 13.865 2.34867 12.9407 0.5 12.2827V11.9537C2.34867 11.233 3.79 10.2773 4.824 9.08667C5.88933 7.896 6.92333 6.42333 7.926 4.66867C8.64667 3.41533 9.242 2.52233 9.712 1.98967C10.182 1.457 10.7773 1.19067 11.498 1.19067C12.25 1.19067 12.8923 1.504 13.425 2.13067C13.9577 2.726 14.224 3.36833 14.224 4.05767C14.224 4.77833 13.895 5.593 13.237 6.50167C12.579 7.379 11.5293 8.272 10.088 9.18067C8.678 10.058 6.892 10.8413 4.73 11.5307L1335.32 10.6847C1333.16 9.99539 1331.36 9.21206 1329.91 8.33473C1328.5 7.42606 1327.47 6.53306 1326.81 5.65573C1326.15 4.74706 1325.83 3.93239 1325.83 3.21173C1325.83 2.52239 1326.08 1.88006 1326.58 1.28473C1327.11 0.65806 1327.75 0.344727 1328.5 0.344727C1329.23 0.344727 1329.82 0.61106 1330.29 1.14373C1330.76 1.67639 1331.36 2.56939 1332.08 3.82273C1333.08 5.57739 1334.1 7.05006 1335.13 8.24073C1336.2 9.43139 1337.65 10.3871 1339.5 11.1077V11.4367C1337.62 12.0947 1336.15 13.0347 1335.08 14.2567C1334.05 15.4474 1333.06 16.9357 1332.12 18.7217C1331.37 20.0064 1330.76 20.9307 1330.29 21.4947C1329.82 22.0274 1329.23 22.2937 1328.5 22.2937C1327.75 22.2937 1327.11 21.9961 1326.58 21.4007C1326.08 20.7741 1325.83 20.1161 1325.83 19.4267C1325.83 18.7061 1326.15 17.9071 1326.81 17.0297C1327.47 16.1211 1328.5 15.2124 1329.91 14.3037C1331.36 13.3951 1333.16 12.5961 1335.32 11.9067L4.73 12.7527C6.892 13.442 8.678 14.241 10.088 15.1497C11.5293 16.0583 12.579 16.967 13.237 17.8757C13.895 18.753 14.224 19.552 14.224 20.2727C14.224 20.962 13.9577 21.62 13.425 22.2467C12.8923 22.842 12.25 23.1397 11.498 23.1397Z' fill='%23C29A28'/%3E%3C/svg%3E"); } } @media screen and (max-width: 1378px) and (min-width: 1024px) { .intro-anello__svg { width: 92%; margin: 0 auto; } } .intro-anello__media { grid-column: 1/-1; background-image: url("/img/anello-rosa.png"); background-position: right bottom; background-size: cover; background-repeat: no-repeat; background-color: rgba(248, 241, 222, 0.6); width: 100%; height: 100%; background-blend-mode: multiply; aspect-ratio: 544/353; box-shadow: 0 0 15px 15px #FBF7EB inset; position: relative; } @media print, screen and (min-width: 64em) { .intro-anello__media { grid-column: 1/span 6; margin: 5.375rem 5.375rem 0 6.25rem; width: 81%; height: 81%; } } @media screen and (max-width: 1378px) and (min-width: 1024px) { .intro-anello__media { width: 100%; margin-left: 10%; background-size: 100%; margin-top: 54px; } } .intro-anello__media__content { grid-column: 1/-1; z-index: 2; } @media screen and (max-width: 63.99875em) { .intro-anello__media__content { padding-left: var(--outer-margin); padding-right: var(--outer-margin); margin-top: 2.5rem; } } .intro-anello__media__content h2 { font-kerning: none; font-variant-numeric: ordinal; font-feature-settings: "dlig" on, "pcap" off, "liga" off, "clig" off; font-family: Romie, serif; font-size: 2.5rem; font-style: italic; font-weight: 800; line-height: 105%; letter-spacing: -1px; color: #000000; margin-bottom: 0.9375rem; } @media print, screen and (min-width: 64em) { .intro-anello__media__content { padding-top: 6.375rem; grid-column: 7/span 5; } .intro-anello__media__content h2 { font-size: 2.9375rem; line-height: 122%; margin-bottom: 1.25rem; } } .intro-anello__media__content p { font-feature-settings: "liga" off, "clig" off; font-size: 1.3125rem; font-style: normal; line-height: 26px; margin-bottom: 2.5rem; width: 98%; color: #000000; } @media print, screen and (min-width: 64em) { .intro-anello__media__content p { font-size: 1.1875rem; } } .intro-anello__media__content .cta { border-radius: 60px; color: #000; text-align: center; font-size: 1rem; font-style: normal; font-weight: 500; line-height: normal; text-transform: uppercase; padding: 1rem 2.5rem; } .intro-anello__media p { position: absolute; bottom: 0; left: 0; width: 100%; text-align: center; font-size: 0.875rem; font-style: normal; font-weight: 400; line-height: 186%; color: #6D6D6D; } @media screen and (max-width: 63.99875em) { .intro-anello__media p { padding: 0 var(--outer-margin); bottom: 10px; font-size: 0.75rem; } } .projects-carousel { background-color: rgba(248, 241, 222, 0.6); grid-column: 1/-1; position: relative; right: calc(var(--outer-margin)); width: calc(100% + var(--outer-margin) * 2); padding: 3.75rem 0; } @media print, screen and (min-width: 64em) { .projects-carousel { padding: 0 3.125rem 7.5rem; } } .projects-carousel__content { grid-column: 1/-1; padding: 0 var(--outer-margin); } @media print, screen and (min-width: 64em) { .projects-carousel__content { grid-column: 1/span 5; padding: 6.875rem 0 0; } } .projects-carousel__content__pretitle { color: #000; font-size: 1rem; font-style: normal; font-weight: 500; line-height: normal; text-transform: uppercase; border-bottom: 2px solid #F9BA07; padding-bottom: 0.1875rem; } .projects-carousel__content h3 { color: #000; font-kerning: none; font-variant-numeric: ordinal; font-feature-settings: "dlig" on, "pcap" off, "liga" off, "clig" off; font-family: Romie, serif; font-size: 2.5rem; font-style: italic; font-weight: 800; line-height: 105%; letter-spacing: -1px; margin: 1.25rem 0 0.9375rem; } @media print, screen and (min-width: 64em) { .projects-carousel__content h3 { font-size: 2.9375rem; line-height: 122%; margin: 1.25rem 0; } } .projects-carousel__content__text { color: #000; font-feature-settings: "liga" off, "clig" off; font-size: 1.3125rem; font-style: normal; font-weight: 400; line-height: 134%; padding-bottom: 2.5rem; } @media print, screen and (min-width: 64em) { .projects-carousel__content__text { font-size: 1.1875rem; padding-bottom: 3.75rem; } } .projects-carousel__content__text p { margin-bottom: 1.5625rem; } .projects-carousel__content__text p strong { font-weight: 500; } .projects-carousel__content__text p:last-of-type { margin-bottom: 0; } .projects-carousel__slides { grid-column: 1/-1; position: relative; } @media print, screen and (min-width: 64em) { .projects-carousel__slides { grid-column: 7/-1; width: calc(100% + 50px); } } .projects-carousel__slides li { display: none; } .projects-carousel__slides li.-active { display: block; } .projects-carousel__slides li img { width: 100%; height: 100%; object-fit: cover; border-radius: 0 0 0 5px; aspect-ratio: 375/347; } @media print, screen and (min-width: 64em) { .projects-carousel__slides li img { aspect-ratio: 697/655; } } .projects-carousel .pager { display: flex; align-items: center; justify-content: center; background-color: #FBF7EB; margin-top: 1.25rem; } @media print, screen and (min-width: 64em) { .projects-carousel .pager { position: absolute; left: 50%; transform: translateX(-50%); bottom: 24px; margin-top: 0; border-radius: 110px; padding: 0.375rem; } } .projects-carousel .pager button { display: flex; } .projects-carousel .pager .page-counter { margin: 0 1.5625rem; color: #000000; font-size: 1.1875rem; font-style: normal; font-weight: 400; line-height: 137%; max-width: 1.5625rem; } @media screen and (max-width: 1200px) and (min-width: 1024px) { .projects-carousel__content { padding-top: 3.125rem; } .projects-carousel__content h3 { font-size: 2.1875rem; } .projects-carousel__content p { font-size: 1.125rem; margin-bottom: 0.9375rem; } } .impact-block { background-color: rgba(248, 241, 222, 0.6); grid-column: 1/-1; position: relative; right: calc(var(--outer-margin)); width: calc(100% + var(--outer-margin) * 2); padding: 0 1.25rem; } @media print, screen and (min-width: 64em) { .impact-block { padding: 0 3.125rem; } } .impact-block ul { grid-column: 1/-1; display: flex; flex-direction: column; align-items: center; justify-content: center; border-top: 1px solid rgba(68, 68, 68, 0.2); padding: 3.75rem 0 6.1875rem; row-gap: 5rem; } @media print, screen and (min-width: 64em) { .impact-block ul { flex-direction: row; justify-content: space-between; border-bottom: 1px solid rgba(68, 68, 68, 0.2); padding: 3.125rem 0; width: 100%; margin-left: auto; margin-right: auto; max-width: 105rem; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); --grid-gap: 1.25rem; grid-column-gap: var(--grid-gap); align-items: flex-start; } } @media screen and (min-width: 64em) and (min-width: 64em) { .impact-block ul { grid-template-columns: repeat(12, minmax(0, 1fr)); --grid-gap: 1.875rem; } } .impact-block ul li { display: flex; flex-direction: column; justify-content: center; align-items: center; grid-column: auto/span 4; } .impact-block ul li picture { margin-bottom: 1rem; } .impact-block ul li picture img { border-radius: 198px; max-width: 12.375rem; } .impact-block ul li span { font-size: 0.75rem; font-style: normal; font-weight: 500; line-height: 134%; text-transform: uppercase; color: #000000; display: block; } .impact-block ul li strong { color: #F16500; text-align: center; font-size: 3.125rem; font-style: normal; font-weight: 500; line-height: 0.9; margin-bottom: 1rem; } .impact-block ul li p { font-size: 1rem; font-style: normal; font-weight: 400; line-height: 125%; text-align: center; color: #000000; } @media print, screen and (min-width: 64em) { .impact-block ul li p { padding: 0 2.5rem; } } .hero-ex-voto { height: 100%; max-height: 50.5625rem; position: relative; } @media screen and (max-width: 74.99875em) { .hero-ex-voto { max-height: 42.9375rem; } } .hero-ex-voto:before { background: linear-gradient(145.02deg, rgba(0, 0, 0, 0.5) 16.05%, rgba(68, 68, 68, 0) 52.73%) !important; } @media screen and (max-width: 74.99875em) { .hero-ex-voto:before { height: 100%; } } .hero-ex-voto:after { position: absolute; height: 100%; width: 100%; display: block; background: linear-gradient(0deg, rgba(0, 0, 0, 0.8) 27.13%, rgba(68, 68, 68, 0) 80.28%); } .hero-ex-voto .hero__content { padding-bottom: 7.125rem; } .hero-ex-voto .hero-ex-voto-img { width: 100%; object-fit: cover !important; object-position: center !important; position: relative; max-height: 50.5625rem; height: 100vh; } @media screen and (max-width: 74.99875em) { .hero-ex-voto .hero-ex-voto-img { object-position: right; } } .hero-ex-voto h1 { font-family: "Niveau Grotesk", Helvetica Neue, Helvetica, Roboto, Arial, sans-serif; font-weight: 500; font-style: Medium; font-size: 3.875rem; line-height: 95% !important; letter-spacing: 0px; max-width: unset !important; } @media screen and (max-width: 63.99875em) { .hero-ex-voto h1 { font-size: 2.9375rem; max-width: 18.1875rem !important; } } @media screen and (max-width: 74.99875em) { .hero-ex-voto h1 br { display: none; } } .hero-ex-voto p { font-family: "Niveau Grotesk", Helvetica Neue, Helvetica, Roboto, Arial, sans-serif; font-weight: 500; font-style: Medium; font-size: 1.75rem; line-height: 100%; letter-spacing: 0px; margin-top: 4.75rem; } @media screen and (max-width: 74.99875em) { .hero-ex-voto p { display: none; } } .hero-ex-voto a { color: #444444; } @media screen and (max-width: 63.99875em) { .hero-ex-voto a { width: 100%; } } .hero-ex-voto a br { display: none; } @media screen and (max-width: 63.99875em) { .hero-ex-voto a br { display: block; } } @media screen and (max-width: 74.99875em) { .hero-ex-voto .hero__content { padding-bottom: 44px; } } .hero-ex-voto .hero__content p { margin-bottom: 1rem; } #card-block { background-color: #faf5e7; grid-column: 1/-1; right: calc(var(--outer-margin)); width: calc(100% + var(--outer-margin) * 2); position: relative; min-height: 18.6875rem; } @media screen and (max-width: 74.99875em) { #card-block { max-height: unset; grid-column: 1/-1; display: flex; flex-direction: column; align-items: center; padding: 1.25rem; overflow: hidden; position: relative; } } #card-block .title-card { grid-column: 1/-1; margin-bottom: 1.875rem; } @media screen and (min-width: 64em) { #card-block .title-card { display: none; } } #card-block .title-card h3 { font-family: "Niveau Grotesk", Helvetica Neue, Helvetica, Roboto, Arial, sans-serif; font-weight: 500; font-size: 1.5625rem; line-height: 100%; letter-spacing: 0px; } #card-block .card-container { grid-column: 1/-1; } @media screen and (max-width: 74.99875em) { #card-block .card-container { overflow: visible; grid-column: 1/-1; display: flex; width: 100%; } } #card-block .card { background-color: white; border: 1px solid #e9e9e9; border-radius: 1rem; box-shadow: 0px 0px 14px 0px rgba(0, 0, 0, 0.05); grid-column: span 4; max-width: 25.4375rem; display: flex; justify-content: flex-start; flex-direction: column; padding-top: 2.5rem; padding-bottom: 1.5rem; padding-left: 1.8125rem; padding-right: 1.8125rem; min-height: 16.1875rem; margin: auto; transform: translateY(-50%); } @media screen and (orientation: landscape) and (min-height: 1081px) { #card-block .card { transform: translateY(-50%); } } @media screen and (orientation: landscape) and (max-height: 1080px) { #card-block .card { transform: translateY(-25%); } } @media screen and (max-width: 74.99875em) { #card-block .card { transform: unset; min-height: unset; grid-column: 1/-1; flex: 0 0 100%; max-width: 100%; } } #card-block .card .circle-card { width: 6.0625rem; height: 6.0625rem; background-color: #fbf3db; border-radius: 50%; margin: auto; margin-bottom: 0.9375rem; display: flex; justify-content: center; align-items: center; } #card-block .card .circle-card img.cross { position: relative; left: 20px; } #card-block .card .circle-card img.leaf { position: relative; bottom: 7x; } #card-block .card .circle-card blockquote p { font-family: "Niveau Grotesk", Helvetica Neue, Helvetica, Roboto, Arial, sans-serif; font-weight: 400; font-size: 1.125rem; line-height: 140%; letter-spacing: 0px; color: black; } #card-block .card .circle-card blockquote cite { color: #919191; font-family: "Niveau Grotesk", Helvetica Neue, Helvetica, Roboto, Arial, sans-serif; font-weight: 400; font-size: 1.125rem; line-height: 140%; letter-spacing: 0px; } #card-block .btn-container { grid-column: span 13; display: flex; justify-content: center; align-items: center; position: relative; bottom: 3.75rem; margin-top: 3.125rem; } @media screen and (max-width: 74.99875em) { #card-block .btn-container { bottom: 0; margin-bottom: 3.75rem; margin-top: 2.5rem; } } #card-block .btn-container button { font-family: "Niveau Grotesk", Helvetica Neue, Helvetica, Roboto, Arial, sans-serif; font-weight: 500; font-style: Medium; font-size: 18px; line-height: 100%; letter-spacing: 0px; text-align: center; text-transform: uppercase; text-decoration: underline; text-decoration-style: solid; text-decoration-thickness: 0%; color: #F16500; } @media screen and (max-width: 74.99875em) { #card-block .btn-container button { font-size: 1rem; line-height: 100%; letter-spacing: 0px; text-decoration-thickness: 0%; } } #card-block .carousel-control { display: flex; gap: 1.25rem; margin-top: 1.875rem; margin-bottom: 2.5rem; } @media screen and (min-width: 75em) { #card-block .carousel-control { display: none; } } #card-block .carousel-control button { background-color: white; border: 1px solid rgba(0, 0, 0, 0.2); display: flex; align-items: center; justify-content: center; height: 54px; width: 54px; border-radius: 50%; } #quote-block-ex-voto { grid-column: 1/-1; background-color: #faf5e7; position: relative; right: calc(var(--outer-margin)); width: calc(100% + var(--outer-margin) * 2); } #quote-block-ex-voto .title-quote { grid-column: 1/-1; padding-left: var(--outer-margin); padding-right: var(--outer-margin); padding-top: 5rem; text-align: center; margin: auto; } #quote-block-ex-voto .title-quote h2 { font-family: "Niveau Grotesk", Helvetica Neue, Helvetica, Roboto, Arial, sans-serif; color: black; font-weight: 500; font-style: Medium; font-size: 2.375rem; line-height: 120%; letter-spacing: -1px; } @media screen and (max-width: 63.99875em) { #quote-block-ex-voto .title-quote h2 { line-height: 100%; font-size: 1.5625rem; } } #quote-block-ex-voto .title-quote p { font-family: "Niveau Grotesk", Helvetica Neue, Helvetica, Roboto, Arial, sans-serif; font-weight: 400; font-size: 1.25rem; line-height: 140%; letter-spacing: 0px; text-align: center; } #quote-block-ex-voto .numbers { grid-column: 1/-1; padding-left: var(--outer-margin); padding-right: var(--outer-margin); margin-top: 3.5rem; display: grid; grid-template-columns: repeat(12, 1fr); margin-bottom: 6.5rem; } @media screen and (max-width: 63.99875em) { #quote-block-ex-voto .numbers { flex-direction: column; display: flex; gap: 1.875rem; margin-bottom: 2.5rem; } } #quote-block-ex-voto .numbers .number-container { gap: 1.8125rem; grid-column: span 4; display: flex; } #quote-block-ex-voto .numbers .number-container .number { width: 3.125rem; height: 3.125rem; flex: 0 0 50px; border-radius: 50%; background-color: #F9BA07; color: black; display: flex; align-items: center; justify-content: center; font-family: "Niveau Grotesk", Helvetica Neue, Helvetica, Roboto, Arial, sans-serif; font-weight: 400; font-size: 1.75rem; line-height: 140%; letter-spacing: 0px; text-align: center; } @media screen and (max-width: 63.99875em) { #quote-block-ex-voto .numbers .number-container .number { flex-direction: column; display: flex; gap: 1.875rem; } } #quote-block-ex-voto .numbers .number-container p { font-family: "Niveau Grotesk", Helvetica Neue, Helvetica, Roboto, Arial, sans-serif; font-weight: 400; font-size: 20px; line-height: 140%; letter-spacing: 0px; color: #262626; } @media screen and (max-width: 63.99875em) { #quote-block-ex-voto .numbers .number-container p { font-size: 18px; } } #quote-block-ex-voto .separator-container { grid-column: 1/-1; padding-left: var(--outer-margin); padding-right: var(--outer-margin); } #quote-block-ex-voto .separator { background-color: rgba(0, 0, 0, 0.3); grid-column: 1/-1; padding-left: var(--outer-margin); padding-right: var(--outer-margin); width: 100%; height: 1.3px; margin-bottom: 7.75rem; } @media screen and (max-width: 63.99875em) { #quote-block-ex-voto .separator { height: 1px; margin-bottom: 2.5rem; } } .form-block-ex-voto-container { padding-top: 8.9375rem; padding-bottom: 8rem; } .form-ex-voto .main-form__title p { max-width: unset !important; } .form-ex-voto legend { font-weight: 700; font-size: 18px; line-height: 100%; letter-spacing: 0px; } .form-ex-voto .error-categoria { margin-top: 10px; } .form-ex-voto .form__recipient label div span { max-width: unset !important; font-size: 1.125rem; } .form-ex-voto .form__field--cards { overflow-x: hidden; width: 100%; grid-column: 1/-1; } .form-ex-voto .form__cards { display: flex; flex-wrap: wrap; gap: 6px; } .form-ex-voto .form__cards { display: flex; flex-wrap: wrap; justify-content: flex-start; width: 100%; /* Make this scrollable when needed */ overflow-x: auto; /* We don't want vertical scrolling */ overflow-y: hidden; /* For WebKit implementations, provide inertia scrolling */ -webkit-overflow-scrolling: touch; /* Make an auto-hiding scroller for the 3 people using a IE */ -ms-overflow-style: -ms-autohiding-scrollbar; scrollbar-width: none; /* Remove the default scrollbar for WebKit implementations */ } .form-ex-voto .form__cards::-webkit-scrollbar { display: none; } .form-ex-voto .form__cards:hover { cursor: grab; } .form-ex-voto .form__cards.dragging { cursor: grabbing; } @media screen and (max-width: 63.99875em) { .form-ex-voto .form__cards { flex-wrap: nowrap; } } .form-ex-voto .form-card-container { margin-top: 1rem; display: flex; flex-direction: column; align-items: center; gap: 8px; border-radius: 8px; cursor: pointer; flex: 0 0 calc(40% - 6px); width: calc(40% - 6px); transition: all 0.2s ease; text-align: center; } @media screen and (min-width: 40em) { .form-ex-voto .form-card-container { flex: 0 0 calc(20% - 6px); width: calc(20% - 6px); } } .form-ex-voto .form-card-container .form__card { border: 1px solid #d1d1c6; width: 100%; height: 8.9375rem; width: 100%; display: flex; justify-content: center; align-items: center; border-radius: 5px; } @media screen and (max-width: 63.99875em) { .form-ex-voto .form-card-container .form__card { width: 7rem; height: 7.1875rem; } } .form-ex-voto .form-card-container .form__card img { max-height: 5.6875rem; } .form-ex-voto .form-card-container .form__card--selected { border: 3px solid #f9ba07; background-color: #fcf9f1; } .form-ex-voto .form-card-container span:first-child { font-size: 2rem; } .form-ex-voto .form-card-container span:last-child { font-weight: 400; color: black; font-size: 0.9375rem; line-height: 100%; letter-spacing: 0px; } .sticky-cta-ex-voto .sticky-cta__cta { max-width: 414px !important; } .sticky-cta-ex-voto .cta { font-size: 1.125rem; font-weight: 500; } dialog#modal-preghiere { display: none; position: fixed; inset: 0; width: 100%; max-width: 844px; height: 95vh; margin: auto; padding: 0; border: none; overflow: hidden; } @media screen and (max-width: 63.99875em) { dialog#modal-preghiere { margin: 0; height: 100vh; } } dialog#modal-preghiere[open] { display: flex; flex-direction: column; } dialog#modal-preghiere::backdrop { background: rgba(0, 0, 0, 0.6); backdrop-filter: blur(4px); } @media screen and (max-width: 63.99875em) { dialog#modal-preghiere::backdrop { background-color: white; } } dialog#modal-preghiere .modal-close { flex-shrink: 0; display: flex; justify-content: flex-end; padding: 16px 0; } dialog#modal-preghiere .modal-close .close-modal { display: flex; align-items: center; gap: 8px; background: none; border: none; cursor: pointer; color: #fff; font-family: "Niveau Grotesk", Helvetica Neue, Helvetica, Roboto, Arial, sans-serif; font-weight: 400; font-size: 1.125rem; line-height: 140%; } @media screen and (max-width: 63.99875em) { dialog#modal-preghiere .modal-close .close-modal { color: black; } } @media screen and (max-width: 63.99875em) { dialog#modal-preghiere .modal-close .close-modal line { stroke: black; } } dialog#modal-preghiere .modal-container { flex: 1; min-height: 0; display: flex; flex-direction: column; background-color: white; border: 1px solid black; border-radius: 16px; padding: 3.125rem 4.375rem; overflow: hidden; } @media screen and (max-width: 63.99875em) { dialog#modal-preghiere .modal-container { border: 0; padding: 1.875rem 1.25rem; } } dialog#modal-preghiere .modal-container .modal-header { flex-shrink: 0; } dialog#modal-preghiere .modal-container .modal-header h4 { margin-bottom: 2.3125rem; font-family: "Niveau Grotesk", Helvetica Neue, Helvetica, Roboto, Arial, sans-serif; font-weight: 500; font-size: 2.625rem; line-height: 120%; letter-spacing: -1px; } @media screen and (max-width: 63.99875em) { dialog#modal-preghiere .modal-container .modal-header h4 { font-size: 2.375rem; line-height: 110%; } } dialog#modal-preghiere .modal-container .filters { flex-shrink: 0; } dialog#modal-preghiere .modal-container .filters .filters-dropdown-trigger { background-image: url("/img/select-arrow.svg") !important; background-position: 94% center !important; background-repeat: no-repeat !important; } dialog#modal-preghiere .modal-container .filters .filters-title { font-family: "Niveau Grotesk", Helvetica Neue, Helvetica, Roboto, Arial, sans-serif; font-weight: 400; font-size: 1.125rem; line-height: 140%; letter-spacing: 0px; margin-bottom: 1.125rem; } dialog#modal-preghiere .modal-container .filters .filters-dropdown { position: relative; display: none; } dialog#modal-preghiere .modal-container .filters .filters-dropdown-trigger { width: 100%; padding: 0.5rem 1rem; border: 3px solid #f9ba07; border-radius: 1rem; background: none; cursor: pointer; font-family: "Niveau Grotesk", Helvetica Neue, Helvetica, Roboto, Arial, sans-serif; font-size: 1rem; text-align: left; } dialog#modal-preghiere .modal-container .filters .filters-dropdown-list { position: absolute; top: calc(100% + 8px); left: 0; right: 0; list-style: none; margin: 0; padding: 0.5rem 0; background: white; border: 3px solid #f9ba07; border-radius: 0.75rem; z-index: 10; display: none; } dialog#modal-preghiere .modal-container .filters .filters-dropdown.is-open .filters-dropdown-list { display: block; } dialog#modal-preghiere .modal-container .filters .filters-dropdown-item { padding: 0.5rem 1rem; cursor: pointer; font-family: "Niveau Grotesk", Helvetica Neue, Helvetica, Roboto, Arial, sans-serif; font-size: 1rem; } dialog#modal-preghiere .modal-container .filters .filters-categories { display: flex; gap: 0.625rem; } dialog#modal-preghiere .modal-container .filters .filters-categories .category { font-family: "Niveau Grotesk", Helvetica Neue, Helvetica, Roboto, Arial, sans-serif; font-weight: 400; font-size: 16px; line-height: 100%; letter-spacing: 0px; text-align: center; border: 1px solid black; border-radius: 1rem; padding: 0.5rem 1rem; min-width: 6.25rem; cursor: pointer; } dialog#modal-preghiere .modal-container .filters .filters-categories .category.category-selected { border: 3px solid #f9ba07; } dialog#modal-preghiere .modal-container .modal-content { flex: 1; min-height: 0; overflow-y: auto; margin-top: 1.375rem; } dialog#modal-preghiere .modal-container .modal-content .preghiere { display: flex; flex-direction: column; } @media screen and (max-width: 63.99875em) { dialog#modal-preghiere .modal-container .modal-content .preghiere { gap: 1.875rem; } } dialog#modal-preghiere .modal-container .modal-content .preghiere .preghiera { display: flex; gap: 1.875rem; padding-top: 30px; padding-bottom: 16px; border-bottom: 1px solid black; flex-shrink: 0; } @media screen and (max-width: 63.99875em) { dialog#modal-preghiere .modal-container .modal-content .preghiere .preghiera { flex-direction: column; gap: 0; border: 0; align-items: center; box-shadow: 0px 0px 14px 0px rgba(0, 0, 0, 0.05); border: 1px solid #e9e9e9; border-radius: 1rem; } } dialog#modal-preghiere .modal-container .modal-content .preghiere .preghiera:first-of-type { border-top: 1px solid black; } @media screen and (max-width: 63.99875em) { dialog#modal-preghiere .modal-container .modal-content .preghiere .preghiera:first-of-type { border-top: 0; } } dialog#modal-preghiere .modal-container .modal-content .preghiere .preghiera .preghiera-img { width: 6.875rem; height: 6.875rem; background-color: #fbf3db; flex: 0 0 6.875rem; border-radius: 50%; display: flex; align-items: center; justify-content: center; } dialog#modal-preghiere .modal-container .modal-content .preghiere .preghiera .preghiera-img img { max-height: 5.0625rem; height: auto; width: 100%; } @media screen and (max-width: 63.99875em) { dialog#modal-preghiere .modal-container .modal-content .preghiere .preghiera .preghiera-testo { padding: 0.625rem 1.25rem; } } dialog#modal-preghiere .modal-container .modal-content .preghiere .preghiera .preghiera-testo p { font-family: "Niveau Grotesk", Helvetica Neue, Helvetica, Roboto, Arial, sans-serif; font-weight: 400; font-size: 1.125rem; line-height: 140%; letter-spacing: 0px; } dialog#modal-preghiere .modal-container .modal-content .preghiere .preghiera .preghiera-testo cite { font-family: "Niveau Grotesk", Helvetica Neue, Helvetica, Roboto, Arial, sans-serif; font-weight: 400; font-size: 1.125rem; line-height: 140%; letter-spacing: 0px; color: #919191; } dialog#modal-preghiere .modal-container .modal-footer { flex-shrink: 0; padding-top: 3.875rem; text-align: center; } dialog#modal-preghiere .modal-container .modal-footer button { color: #f16500; text-align: center; font-family: "Niveau Grotesk", Helvetica Neue, Helvetica, Roboto, Arial, sans-serif; font-weight: 500; font-style: Medium; font-size: 1.125rem; line-height: 100%; letter-spacing: 0px; text-transform: uppercase; text-decoration: underline; text-decoration-style: solid; text-decoration-thickness: 0%; } #preghiera-block-ex-voto { grid-column: 1/-1; padding-top: 100px; padding-bottom: 93px; } #preghiera-block-ex-voto .img-p { grid-column: 1/-1; margin: auto; text-align: center; display: flex; justify-content: center; margin-bottom: 2.5rem; } #preghiera-block-ex-voto .testo-p { grid-column: 1/-1; text-align: center; } #preghiera-block-ex-voto .testo-p p { margin: auto; max-width: 66.375rem; font-family: "Niveau Grotesk", Helvetica Neue, Helvetica, Roboto, Arial, sans-serif; font-weight: 400; font-size: 1.75rem; line-height: 140%; letter-spacing: 0px; text-align: center; } #preghiera-block-ex-voto .testo-p p b { font-weight: 700; } @media screen and (max-width: 63.99875em) { #preghiera-block-ex-voto .testo-p p { font-size: 1.3125rem; } } #quote-block-2 { grid-column: 1/-1; padding-top: 7.6875rem; padding-bottom: 8rem; } #quote-block-2 .quote { display: grid; grid-template-columns: repeat(12, 1fr); grid-column: 1/-1; padding-left: var(--outer-margin); padding-right: var(--outer-margin); align-items: center; } #quote-block-2 .quote .foto { grid-column: 2/6; } @media screen and (max-width: 63.99875em) { #quote-block-2 .quote .foto { grid-column: 1/-1; } } #quote-block-2 .quote .testo { grid-column: 7/11; } @media screen and (max-width: 63.99875em) { #quote-block-2 .quote .testo { grid-column: 1/-1; } } #quote-block-2 .quote .testo h3 { font-family: "Niveau Grotesk", Helvetica Neue, Helvetica, Roboto, Arial, sans-serif; font-weight: 500; font-size: 2.375rem; line-height: 120%; letter-spacing: -1px; margin-bottom: 1.0625rem; } @media screen and (max-width: 63.99875em) { #quote-block-2 .quote .testo h3 { margin-top: 2.5rem; } } #quote-block-2 .quote .testo p { font-family: "Niveau Grotesk", Helvetica Neue, Helvetica, Roboto, Arial, sans-serif; font-weight: 400; font-size: 1.25rem; line-height: 140%; letter-spacing: 0px; } #quote-block-2 .virgolette-container { display: grid; grid-template-columns: repeat(12, 1fr); grid-column: 1/-1; padding-left: var(--outer-margin); padding-right: var(--outer-margin); margin-top: 3.5rem; margin-bottom: 6.25rem; } #quote-block-2 .virgolette-container .virgolette { grid-column: 1/-1; margin: auto; display: flex; flex-direction: column; text-align: center; align-items: center; } @media screen and (max-width: 63.99875em) { #quote-block-2 .virgolette-container .virgolette svg { width: 4.1875rem; } } #quote-block-2 .virgolette-container .virgolette em { font-family: "Niveau Grotesk", Helvetica Neue, Helvetica, Roboto, Arial, sans-serif; font-weight: 500; font-size: 3rem; line-height: 120%; letter-spacing: -0.67px; text-align: center; font-style: italic; margin: 1.875rem auto; } @media screen and (max-width: 63.99875em) { #quote-block-2 .virgolette-container .virgolette em { font-size: 2.5rem; max-width: 20.5625rem; } } @media screen and (max-width: 63.99875em) { #quote-block-2 .virgolette-container .virgolette em br { display: none; } } #quote-block-2 .virgolette-container .virgolette .divider { margin: auto; background-color: #F16500; height: 5px; display: block; width: 5.375rem; } /*# sourceMappingURL=app.css.map */