@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@100;200;300;400;500;600;700&display=swap"); a, p { font-family: var(--default-font-family); } h1:last-child, h2:last-child, h3:last-child, h4:last-child, h5:last-child, h6:last-child, p:last-child { margin-bottom: 0; } .force-media h1:last-child, .force-media h2:last-child, .force-media h3:last-child, .force-media h4:last-child, .force-media h5:last-child, .force-media h6:last-child, .force-media p:last-child, .force-media-tablet h1:last-child, .force-media-tablet h2:last-child, .force-media-tablet h3:last-child, .force-media-tablet h4:last-child, .force-media-tablet h5:last-child, .force-media-tablet h6:last-child, .force-media-tablet p:last-child, .force-media-mobile h1:last-child, .force-media-mobile h2:last-child, .force-media-mobile h3:last-child, .force-media-mobile h4:last-child, .force-media-mobile h5:last-child, .force-media-mobile h6:last-child, .force-media-mobile p:last-child { margin-bottom: 0; } .oe-section { padding: var(--desktop-section-padding); padding-left: 0 !important; padding-right: 0 !important; display: grid; grid-template-rows: 100%; grid-template-columns: 100%; width: 100%; position: relative; height: var(--block-height); position: relative; box-sizing: border-box; user-select: none; border-style: var(--desktop-section-border-style); border-width: var(--desktop-section-border-width); border-color: var(--desktop-section-border-color); } .oe-section > .oe-background { position: absolute; top: 0; right: 0; bottom: 0; left: 0; pointer-events: none; } .oe-section > .oe-background .oe-background-video { width: 100%; height: 100%; } .oe-section > .oe-background .oe-background-custom { overflow: hidden; } .oe-section > .oe-background .oe-background-custom > .oe-background-video-container { width: 100vw; height: 100%; } .oe-section > .oe-background .oe-background-fill { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background-color: var(--desktop-section-background-color); opacity: var(--desktop-section-background-fill-opacity, 1); } .oe-section > .oe-background .oe-background-custom { position: absolute; top: 0; right: 0; bottom: 0; left: 0; } .oe-section > .oe-background .oe-background-image { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background-image: var(--section-background-image); background-repeat: var(--desktop-section-background-repeat, no-repeat); background-position: var(--desktop-section-background-position, center center); background-size: var(--desktop-section-background-size, cover); background-attachment: var(--desktop-section-background-attachment); opacity: var(--desktop-section-background-image-opacity); } .oe-section > .oe-background .oe-background-gradient { background-image: var(--desktop-section-background-gradient); opacity: var(--desktop-section-background-gradient-opacity, 1); } .oe-section .grid-background > .oe-background { position: absolute; top: 0; right: 0; bottom: 0; left: 0; pointer-events: none; } .oe-section .grid-background > .oe-background .oe-background-video { width: 100%; height: 100%; } .oe-section .grid-background > .oe-background .oe-background-custom { overflow: hidden; } .oe-section .grid-background > .oe-background .oe-background-custom > .oe-background-video-container { width: 100vw; height: 100%; } .oe-section .grid-background > .oe-background .oe-background-fill { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background-color: var(--desktop-section-inner-background-color); opacity: var(--desktop-section-inner-background-fill-opacity, 1); } .oe-section .grid-background > .oe-background .oe-background-custom { position: absolute; top: 0; right: 0; bottom: 0; left: 0; } .oe-section .grid-background > .oe-background .oe-background-image { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background-image: var(--section-inner-background-image); background-repeat: var(--desktop-section-inner-background-repeat, no-repeat); background-position: var(--desktop-section-inner-background-position, center center); background-size: var(--desktop-section-inner-background-size, cover); background-attachment: var(--desktop-section-inner-background-attachment); opacity: var(--desktop-section-inner-background-image-opacity); } .oe-section .grid-background > .oe-background .oe-background-gradient { background-image: var(--desktop-section-inner-background-gradient); opacity: var(--desktop-section-inner-background-gradient-opacity, 1); } @media (min-width: 768px) and (max-width: 1024px) { .oe-section { padding: var(--tablet-section-padding, var(--desktop-section-padding)); } .oe-section > .oe-background .oe-background-fill { background-color: var(--tablet-section-background-color, var(--desktop-section-background-color)); opacity: var(--tablet-section-background-fill-opacity, var(--desktop-section-background-fill-opacity)); } .oe-section > .oe-background .oe-background-image { background-repeat: var(--tablet-section-background-repeat, var(--desktop-section-background-repeat)); background-position: var(--tablet-section-background-position, var(--desktop-section-background-position)); background-size: var(--tablet-section-background-size, var(--desktop-section-background-size)); background-attachment: var(--tablet-section-background-attachment, var(--desktop-section-background-attachment)); opacity: var(--tablet-section-background-image-opacity, var(--desktop-section-background-image-opacity)); } .oe-section > .oe-background .oe-background-gradient { background-image: var(--tablet-section-background-gradient, var(--desktop-section-background-gradient)); opacity: var(--tablet-section-background-gradient-opacity, var(--desktop-section-background-gradient-opacity, 1)); } .oe-section .grid-background > .oe-background .oe-background-fill { background-color: var(--tablet-section-inner-background-color, var(--desktop-section-inner-background-color)); opacity: var(--tablet-section-inner-background-fill-opacity, var(--desktop-section-inner-background-fill-opacity)); } .oe-section .grid-background > .oe-background .oe-background-image { background-repeat: var(--tablet-section-inner-background-repeat, var(--desktop-section-inner-background-repeat)); background-position: var(--tablet-section-inner-background-position, var(--desktop-section-inner-background-position)); background-size: var(--tablet-section-inner-background-size, var(--desktop-section-inner-background-size)); background-attachment: var(--tablet-section-inner-background-attachment, var(--desktop-section-inner-background-attachment)); opacity: var(--tablet-section-inner-background-image-opacity, var(--desktop-section-inner-background-image-opacity)); } .oe-section .grid-background > .oe-background .oe-background-gradient { background-image: var(--tablet-section-inner-background-gradient, var(--desktop-section-inner-background-gradient)); opacity: var(--tablet-section-inner-background-gradient-opacity, var(--desktop-section-inner-background-gradient-opacity, 1)); } } @media (min-width: 320px) and (max-width: 767px) { .oe-section { padding: var(--mobile-section-padding, var(--tablet-section-padding, var(--desktop-section-padding))); padding-left: 0; padding-right: 0; border-style: var(--mobile-section-border-style, var(--tablet-section-border-style, var(--desktop-section-border-style))); border-width: var(--mobile-section-border-width, var(--tablet-section-border-width, var(--desktop-section-border-width))); border-color: var(--mobile-section-border-color, var(--tablet-section-border-color, var(--desktop-section-border-color))); } .oe-section > .oe-background .oe-background-fill { background-color: var(--mobile-section-background-color, var(--tablet-section-background-color, var(--desktop-section-background-color))); opacity: var(--mobile-section-background-fill-opacity, var(--tablet-section-background-fill-opacity, var(--desktop-section-background-fill-opacity))); } .oe-section > .oe-background .oe-background-image { background-repeat: var(--mobile-section-background-repeat, var(--tablet-section-background-repeat, var(--desktop-section-background-repeat))); background-position: var(--mobile-section-background-position, var(--tablet-section-background-position, var(--desktop-section-background-position))); background-size: var(--mobile-section-background-size, var(--tablet-section-background-size, var(--desktop-section-background-size))); background-attachment: var(--mobile-section-background-attachment, var(--tablet-section-background-attachment, var(--desktop-section-background-attachment))); opacity: var(--mobile-section-background-image-opacity, var(--tablet-section-background-image-opacity, var(--desktop-section-background-image-opacity))); } .oe-section > .oe-background .oe-background-gradient { background-image: var(--mobile-section-background-gradient, var(--tablet-section-background-gradient, var(--desktop-section-background-gradient))); opacity: var(--mobile-section-background-gradient-opacity, var(--tablet-section-background-gradient-opacity, var(--desktop-section-background-gradient-opacity, 1))); } .oe-section .grid-background > .oe-background .oe-background-fill { background-color: var(--mobile-section-inner-background-color, var(--tablet-section-inner-background-color, var(--desktop-section-inner-background-color))); opacity: var(--mobile-section-inner-background-fill-opacity, var(--tablet-section-inner-background-fill-opacity, var(--desktop-section-inner-background-fill-opacity))); } .oe-section .grid-background > .oe-background .oe-background-image { background-repeat: var(--mobile-section-inner-background-repeat, var(--tablet-section-inner-background-repeat, var(--desktop-section-inner-background-repeat))); background-position: var(--mobile-section-inner-background-position, var(--tablet-section-inner-background-position, var(--desktop-section-inner-background-position))); background-size: var(--mobile-section-inner-background-size, var(--tablet-section-inner-background-size, var(--desktop-section-inner-background-size))); background-attachment: var(--mobile-section-inner-background-attachment, var(--tablet-section-inner-background-attachment, var(--desktop-section-inner-background-attachment))); opacity: var(--mobile-section-inner-background-image-opacity, var(--tablet-section-inner-background-image-opacity, var(--desktop-section-inner-background-image-opacity))); } .oe-section .grid-background > .oe-background .oe-background-gradient { background-image: var(--mobile-section-inner-background-gradient, var(--tablet-section-inner-background-gradient, var(--desktop-section-inner-background-gradient))); opacity: var(--mobile-section-inner-background-gradient-opacity, var(--tablet-section-inner-background-gradient-opacity, var(--desktop-section-inner-background-gradient-opacity, 1))); } } .flex-moving .dragover:after { display: none; } .oe-section > .oe-background .oe-background-video-size-contain > video { object-fit: contain; } .oe-section > .oe-background .oe-background-video-size-cover > video { object-fit: cover; } .oe-section > .oe-background .oe-background-video-size-fill > video { object-fit: fill; } .oe-section > .oe-background .oe-background-video-size-cover .oe-background-video-iframe-container { position: absolute; top: 50%; left: 50%; width: 100vw; height: 100vh; transform: translate(-50%, -50%); } @media (min-aspect-ratio: 16 / 9) { .oe-section > .oe-background .oe-background-video-size-cover .oe-background-video-iframe-container { /* height = 100 * (9 / 16) = 56.25 */ height: 56.25vw; } } @media (max-aspect-ratio: 16 / 9) { .oe-section > .oe-background .oe-background-video-size-cover .oe-background-video-iframe-container { /* width = 100 / (9 / 16) = 177.777777 */ width: 177.78vh; } } .oe-section > .oe-background .oe-background-video-position-fixed { position: fixed; top: 0px; bottom: 0px; left: 0px; right: 0px; } .oe-container { position: relative; box-sizing: border-box; --container-width: 100vw; --column-gap-count: calc(var(--gc) - 1); --column-width: calc((var(--gw) - var(--column-gap-count) * var(--gg)) / var(--gc)); position: relative; z-index: 12; display: grid; grid-area: 1/1/-1/-1; grid-template-columns: calc((var(--container-width) - var(--max-content-width)) / 2) 1fr repeat(var(--gc), minmax(0, var(--column-width))) 1fr calc((var(--container-width) - var(--max-content-width)) / 2); grid-auto-rows: calc((var(--gw) + var(--gg)) / var(--gc) - var(--gg)) !important; min-height: calc(var(--gr) * ((var(--gw)) / var(--gc))) !important; width: 100%; padding-top: var(--d-container-padding-top); padding-bottom: var(--d-container-padding-bottom); margin: 0 auto; grid-gap: var(--gg); grid-auto-flow: row dense; } .oe-container .empty-block__wrapper { pointer-events: none; grid-row: 1 / span 4; grid-column-start: 3; height: 100%; background: white; /*rgba(0, 0, 0, 0.04);*/ display: flex; align-items: center; justify-content: center; } .oe-container .empty-block__wrapper .empty-block { font-family: "Montserrat", sans-serif; text-align: center; font-size: 12px; line-height: 20px; } .oe-container .grid-background { grid-column-start: 3; grid-column-end: var(--grid-column-end-span); grid-row-start: 1; grid-auto-flow: row dense; grid-auto-rows: calc((var(--gw) + var(--gg)) / var(--gc) - var(--gg)) !important; position: absolute; top: 0; left: 0; bottom: var(--d-container-padding-bottom, 0px); right: 0; } .oe-container .grid-guide { pointer-events: none; grid-column-start: 3; grid-column-end: var(--grid-column-end-span); grid-row-start: 1; grid-auto-flow: row dense; grid-auto-rows: calc((var(--gw) + var(--gg)) / var(--gc) - var(--gg)) !important; position: absolute; top: 0; left: 0; bottom: var(--d-container-padding-bottom, 0px); right: 0; } .oe-container .grid-guide .gradient-border { --borderWidth: 3px; fill: rgba(0, 0, 0, 0.04); position: relative; border-radius: 3px; } .oe-container .grid-guide .gradient-border:after { content: ""; position: absolute; top: calc(-1 * var(--borderWidth)); left: calc(-1 * var(--borderWidth)); height: calc(100% + var(--borderWidth) * 2); width: calc(100% + var(--borderWidth) * 2); border-radius: calc(2 * var(--borderWidth)); z-index: -1; animation: animatedgradient 2s ease alternate infinite; background-size: 300% 300%; } .oe-container .grid-guide .grid-checkbox { height: 85px; width: 85px; } @media (min-width: 768px) and (max-width: 1024px) { .oe-container { --column-width: calc((var(--gwm) - var(--column-gap-count) * var(--gg)) / var(--gc)); grid-auto-rows: calc((var(--gwm) + var(--gg)) / var(--gc) - var(--gg)) !important; } } @media (min-width: 320px) and (max-width: 767px) { .oe-container { --column-width: calc((var(--gwm) - var(--column-gap-count) * var(--gg)) / var(--gc)); grid-auto-rows: calc((var(--gwm) + var(--gg)) / var(--gc) - var(--gg)) !important; display: flex; min-height: initial !important; padding-left: var(--mobile-container-padding); padding-right: var(--mobile-container-padding); align-items: center; flex-direction: column; grid-gap: 0; } .oe-container .empty-block__wrapper { width: 100%; } } .oe-container.hide-grid-guides .oe-draggable-widget:not(.active-widget) .grid-guide { display: none; } /* 53a8ff */ /* 66b1ff */ /* 79bbff */ /* 8cc5ff */ /* a0cfff */ /* b3d8ff */ /* c6e2ff */ /* d9ecff */ /* ecf5ff */ .oe-draggable-widget { box-sizing: border-box; transform-origin: bottom right; grid-area: var(--desktop-gridArea); position: relative; z-index: 10; margin: var(--desktop-widget-margin, 0px); height: var(--desktop-widget-height, calc(100%)); } .oe-draggable-widget[eltype="grid"] { margin: var(--desktop-grid-widget-margin, 0px); height: var(--desktop-grid-widget-height, calc(100%)); } .oe-draggable-widget[eltype="stack"] { margin: var(--desktop-grid-widget-margin, 0px); height: var(--desktop-grid-widget-height, calc(100%)); } .oe-draggable-widget[eltype="flex"] { margin: var(--desktop-flex-widget-margin, 0px); height: var(--desktop-flex-widget-height, calc(100%)); } .oe-draggable-widget.boxEditing { pointer-events: none; outline: 2px solid #7367f0; -webkit-box-shadow: 0 0 20px #7367f0; -moz-box-shadow: 0 0 20px #7367f0; box-shadow: 0 0 20px #7367f0; } .oe-draggable-widget.boxEditing .oe-draggable-widget { pointer-events: all; } .oe-draggable-widget.boxEditing .oe-widget-overlay.flex { display: none; } .oe-draggable-widget.boxEditing .oe-widget-overlay.grid { display: none; } .oe-draggable-widget.dragover:after { position: absolute; content: ""; top: 0; right: 0; bottom: 0; left: 0; background-color: rgba(0, 0, 0, 0.1); } .oe-draggable-widget[eltype="grid"] { grid-area: var(--desktop-grid-gridArea); } .oe-draggable-widget[eltype="stack"] { grid-area: var(--desktop-grid-gridArea); } .oe-draggable-widget[eltype="flex"] { grid-area: var(--desktop-flex-gridArea); } .oe-draggable-widget.isEditing { pointer-events: none; outline: 1px solid #7367f0; } .oe-draggable-widget.isEditing .oe-draggable-widget { pointer-events: all; } .oe-draggable-widget.isEditing .oe-text-content { pointer-events: all; } .oe-draggable-widget .oe-widget-inner { position: absolute; top: 0; right: 0; bottom: 0; left: 0; transition: all 0.2s ease-in-out; display: flex; align-items: var(--desktop-align-items, center); justify-content: var(--desktop-justify-content, center); } .desktop_preview *, .tablet_preview *, .mobile_preview * { transition: none !important; } .desktop_preview .oe-draggable-widget *, .tablet_preview .oe-draggable-widget *, .mobile_preview .oe-draggable-widget * { pointer-events: none; } .oe-widget-placeholder { border: 2px solid #7367f0; border-radius: 3px; } @media (min-width: 768px) and (max-width: 1024px) { .oe-draggable-widget { grid-area: var(--tablet-gridArea, var(--desktop-gridArea)); margin: var(--tablet-widget-margin, 0px); height: var(--tablet-widget-height, calc(100%)); } .oe-draggable-widget[eltype="grid"] { margin: var(--tablet-grid-widget-margin, 0px); height: var(--tablet-grid-widget-height, calc(100%)); } .oe-draggable-widget[eltype="stack"] { margin: var(--tablet-grid-widget-margin, 0px); height: var(--tablet-grid-widget-height, calc(100%)); } .oe-draggable-widget[eltype="flex"] { margin: var(--tablet-flex-widget-margin, 0px); height: var(--tablet-flex-widget-height, calc(100%)); } .oe-draggable-widget[eltype="grid"] { grid-area: var(--tablet-grid-gridArea, var(--desktop-grid-gridArea)); } .oe-draggable-widget[eltype="stack"] { grid-area: var(--tablet-grid-gridArea, var(--desktop-grid-gridArea)); } .oe-draggable-widget[eltype="flex"] { grid-area: var(--tablet-flex-gridArea, var(--desktop-flex-gridArea)); } } @media (min-width: 320px) and (max-width: 767px) { [elType='section'] > [elType='container'] > .oe-draggable-widget { width: 100%; margin-bottom: var(--mobile-margin-bottom, 20px) !important; grid-area: var(--mobile-gridArea, var(--tablet-gridArea, var(--desktop-gridArea))); } [elType='section'] > [elType='container'] > .oe-draggable-widget:last-child { margin-bottom: 0px !important; } } .draggingwidget { padding-bottom: 100px; } .draggingwidget.mobile_preview .oe-widget-overlay { display: none; } .draggingwidget * { transition: none !important; } .dragging-new-widget .removable:not(.removable-nohide) { display: none; } .dragging-new-widget .empty-block__wrapper { display: flex; } .dragging-new-widget .empty-flex { display: block; } .dragging-new-widget .oe-draggable-widget { pointer-events: none; } .dragging-new-widget .oe-draggable-widget[eltype="grid"] { pointer-events: all; } .dragging-new-widget .oe-draggable-widget[eltype="stack"] { pointer-events: all; } .dragging-new-widget .oe-draggable-widget[eltype="flex"] { pointer-events: all; } .dragging-new-widget .oe-draggable-widget[eltype="flex"] * { pointer-events: none !important; } .dragging-new-widget .isEditing { pointer-events: all; } .dragging-new-widget .boxEditing { pointer-events: all; } .dragging-new-widget .oe-modal-cols [eltype="flex"] { pointer-events: all; } .dragging-new-widget .grid-guide.section-grid-guide { display: block; } .oe-background { position: absolute; top: 0; right: 0; left: 0; bottom: 0; transition: all 0.2s ease-in-out; } .oe-background:before, .oe-background:after { transition: all 0.2s ease-in-out; } .oe-background * { transition: all 0.2s ease-in-out; } .oe-background *:before, .oe-background *:after { transition: all 0.2s ease-in-out; } .oe-background .oe-background-fill { position: absolute; top: 0; right: 0; left: 0; bottom: 0; } .oe-background .oe-background-image { position: absolute; top: 0; right: 0; left: 0; bottom: 0; } .oe-background .oe-background-gradient { position: absolute; top: 0; right: 0; left: 0; bottom: 0; } .active-widget { z-index: 999 !important; } .missing-widget-wrap { width: 100%; height: 100%; } .missing-widget-wrap img { max-height: 100%; max-width: 100%; } .desktop_preview .no-desktop { opacity: 0.5; } .desktop_preview .no-desktop:after { position: absolute; content: ""; top: 0; right: 0; bottom: 0; left: 0; background-color: rgba(255, 0, 0, 0.5); } .tablet_preview .no-tablet { opacity: 0.5; } .tablet_preview .no-tablet:after { position: absolute; content: ""; top: 0; right: 0; bottom: 0; left: 0; background-color: rgba(255, 0, 0, 0.5); } .mobile_preview .no-mobile:after { position: absolute; content: ""; top: 0; right: 0; bottom: 0; left: 0; background-color: rgba(255, 0, 0, 0.5); } .sortable-ghost { pointer-events: none !important; } /* 53a8ff */ /* 66b1ff */ /* 79bbff */ /* 8cc5ff */ /* a0cfff */ /* b3d8ff */ /* c6e2ff */ /* d9ecff */ /* ecf5ff */ .oe-widget-overlay-actions { padding: 0px; overflow: hidden; } .oe-widget-overlay-actions .options { display: flex; flex-direction: row; } .oe-widget-overlay-actions .options .options-group { display: flex; flex-direction: row; } .oe-widget-overlay-actions .options .overlay-action-label { font-size: 10px; text-transform: capitalize; margin: auto; margin-left: 5px; margin-right: 5px; } .oe-widget-overlay-actions .options .options-btn { pointer-events: all; background-color: #f1f0fe; width: 24px; height: 24px; cursor: pointer; transition: all 0.2s ease-in-out; display: flex; align-items: center; justify-content: center; background-color: #f1f0fe; } .oe-widget-overlay-actions .options .options-btn.delete { background-color: #ffaeae; } .oe-widget-overlay-actions .options .options-btn:hover { background-color: #7367f0; transition: all 0.2s ease-in-out; } .oe-widget-overlay-actions .options .options-btn:hover.delete { background-color: #ea5455; } .oe-widget-overlay-actions .options .options-btn:hover svg { fill: #f1f0fe; } .oe-widget-overlay-actions .options .options-btn svg { fill: #7367f0; height: 16px; margin: 2px; } .oe-widget-overlay { z-index: 99; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: rgba(0, 0, 0, 0.05); pointer-events: none; background-clip: content-box, padding-box; display: flex; align-items: center; justify-content: center; outline: 1px solid #7367f0; cursor: move; } .oe-widget-overlay .active-widget .image-manual-resize { cursor: pointer; background: rgba(0, 0, 0, 0.5); padding: 3px; pointer-events: all; width: 20px; height: 20px; position: absolute; top: 20px; left: calc(50% - 10px); } .oe-widget-overlay.showonactive .resizer, .oe-widget-overlay.showonactive .options { display: none; } .oe-widget-overlay.showonactive.active .resizer, .oe-widget-overlay.showonactive.active .options { display: flex; } .oe-widget-overlay.parent-flex .resizer { display: none; } .oe-widget-overlay.active { background: transparent; } .oe-widget-overlay.active .widgetname { display: none; } .oe-widget-overlay .widgetname { position: absolute; background: #7367f0; color: #ffffff; font-size: 10px; padding: 4px 8px; top: -10px; right: 20px; border-radius: 10px; font-family: Lato; z-index: 9; } .oe-widget-overlay * { pointer-events: none; } .oe-widget-overlay.inner .resizer { position: absolute; top: -30px; right: -10px; bottom: -10px; left: -30px; } .oe-widget-overlay.inner .resizer .resizehandle { position: absolute; width: 24px; height: 24px; background: #f1f0fe; pointer-events: all; box-sizing: border-box; transition: all 0.2s cubic-bezier(0.6, -0.28, 0.735, 0.045); display: flex; align-items: center; justify-content: center; } .oe-widget-overlay.inner .resizer .resizehandle svg { max-width: 100%; transition: transform 0.2s ease-in-out; transform: scale(0.8); fill: #7367f0; height: 16px; } .oe-widget-overlay.inner .resizer .resizehandle:hover { background: #7367f0; transition: all 0.2s cubic-bezier(0.6, -0.28, 0.735, 0.045); } .oe-widget-overlay.inner .resizer .resizehandle:hover svg { fill: #f1f0fe; } .oe-widget-overlay.inner .resizer .resizehandle.topleft { top: -6px; left: -6px; cursor: nwse-resize; } .oe-widget-overlay.inner .resizer .resizehandle.topright { right: -6px; top: -6px; cursor: nesw-resize; } .oe-widget-overlay.inner .resizer .resizehandle.bottomleft { bottom: 0px; left: 24px; cursor: nesw-resize; border-radius: 5px; } .oe-widget-overlay.inner .resizer .resizehandle.bottomright { right: 0px; bottom: 0px; cursor: nwse-resize; border-radius: 5px; } .oe-widget-overlay.inner .resizer .resizehandle.bottom { width: 12px; height: 12px; bottom: -6px; left: calc(50% - 4px); cursor: ns-resize; display: none; } .oe-widget-overlay.inner .resizer .resizehandle.right { width: 12px; height: 12px; right: -6px; top: calc(50% - 4px); cursor: ew-resize; display: none; } .oe-widget-overlay.inner .resizer .resizehandle.rightbottom { width: 12px; height: 12px; right: -6px; bottom: -6px; cursor: nwse-resize; display: none; } .oe-widget-overlay.inner .options { position: absolute; left: 0; right: 0; top: 0; bottom: 0; } .oe-widget-overlay.inner .options .options-btn { pointer-events: all; background-color: #f1f0fe; width: 24px; height: 24px; cursor: pointer; transition: all 0.2s ease-in-out; display: flex; align-items: center; justify-content: center; background-color: #f1f0fe; position: absolute; } .oe-widget-overlay.inner .options .options-btn.delete { background-color: #ffaeae; right: 24px; top: -30px; border-top-left-radius: 5px; border-bottom-left-radius: 5px; } .oe-widget-overlay.inner .options .options-btn.clone { top: -30px; right: 0px; border-top-right-radius: 5px; border-bottom-right-radius: 5px; } .oe-widget-overlay.inner .options .options-btn:hover { background-color: #7367f0; transition: all 0.2s ease-in-out; } .oe-widget-overlay.inner .options .options-btn:hover.delete { background-color: #ea5455; } .oe-widget-overlay.inner .options .options-btn:hover svg { fill: #f1f0fe; } .oe-widget-overlay.inner .options .options-btn:first-child { margin-left: 0; } .oe-widget-overlay.inner .options .options-btn svg { fill: #7367f0; height: 12px; } .oe-widget-overlay.outer .resizer { position: absolute; top: 0; right: 0; bottom: 0; left: 0; } .oe-widget-overlay.outer .resizer .resizehandle { position: absolute; border: 1px solid #7367f0; width: 12px; height: 12px; background: #f1f0fe; pointer-events: all; border-radius: 2px; box-sizing: border-box; transition: all 0.2s cubic-bezier(0.6, -0.28, 0.735, 0.045); } .oe-widget-overlay.outer .resizer .resizehandle:hover { border: 1px solid #f1f0fe; background: #7367f0; transition: all 0.2s cubic-bezier(0.6, -0.28, 0.735, 0.045); } .oe-widget-overlay.outer .resizer .resizehandle.topleft { top: -6px; left: -6px; cursor: nwse-resize; } .oe-widget-overlay.outer .resizer .resizehandle.topright { right: -6px; top: -6px; cursor: nesw-resize; } .oe-widget-overlay.outer .resizer .resizehandle.bottomleft { bottom: -6px; left: -6px; cursor: nesw-resize; } .oe-widget-overlay.outer .resizer .resizehandle.bottomright { right: -6px; bottom: -6px; cursor: nwse-resize; } .oe-widget-overlay.outer .resizer .resizehandle.bottom { bottom: -6px; left: calc(50% - 4px); cursor: ns-resize; display: none; } .oe-widget-overlay.outer .resizer .resizehandle.right { right: -6px; top: calc(50% - 4px); cursor: ew-resize; display: none; } .oe-widget-overlay.outer .options { position: absolute; top: -39px; left: 0; display: flex; align-items: center; justify-content: center; height: 40px; } .oe-widget-overlay.outer .options .options-btn { pointer-events: all; background-color: #f1f0fe; border-radius: 30px; width: 30px; height: 30px; margin-left: 5px; cursor: pointer; transition: all 0.2s ease-in-out; display: flex; align-items: center; justify-content: center; background-color: #ffffff; box-shadow: 0px 1px 10px rgba(0, 0, 0, 0.1); } .oe-widget-overlay.outer .options .options-btn .delete { border-bottom-left-radius: 0; } .oe-widget-overlay.outer .options .options-btn .clone { border-bottom-right-radius: 0; } .oe-widget-overlay.outer .options .options-btn:hover { background-color: #7367f0; transition: all 0.2s ease-in-out; } .oe-widget-overlay.outer .options .options-btn:hover.delete { background-color: #ea5455; } .oe-widget-overlay.outer .options .options-btn:hover svg { fill: #f1f0fe; } .oe-widget-overlay.outer .options .options-btn:first-child { margin-left: 0; } .oe-widget-overlay.outer .options .options-btn svg { fill: #7367f0; height: 12px; } .oe-widget-overlay.editingoverlay .options { display: none; } .oe-widget-overlay.hovered .resizer { display: none; } .oe-widget-overlay.hovered .resizer * { display: none; } .oe-widget-overlay.hovered .options { display: none; } .oe-widget-overlay.hovered .options * { display: none; } .oe-widget-overlay.moving { cursor: move; border: 1px solid transparent; } .oe-widget-overlay.moving .resizer { display: none; } .oe-widget-overlay.moving .options { display: none; } .oe-sectionoverlay { position: absolute; top: 0; right: 0; bottom: 0; left: 0; pointer-events: none; border: 1px solid #7367f0; z-index: 999999; pointer-events: none; } .oe-sectionoverlay.is-active { border: 1px solid #7367f0; } .oe-sectionoverlay.floatingOptions .section_controls { left: 10px; right: auto; } .oe-sectionoverlay.floatingOptions .section_settings { left: 10px; right: auto; } .oe-sectionoverlay.floatingOptions .add_new_section { left: 50px; right: auto; } .oe-sectionoverlay.floatingOptions .save_section { left: 90px; right: auto; } .oe-sectionoverlay.floatingOptions.leftwidgets .section_settings { left: 100px; right: auto; } .oe-sectionoverlay.floatingOptions.leftwidgets .section_controls { left: 100px; right: auto; } .oe-sectionoverlay.floatingOptions.leftwidgets .add_new_section { left: 150px; right: auto; } .oe-sectionoverlay.floatingOptions.leftwidgets .save_section { left: 200px; right: auto; } .oe-sectionoverlay.leftwidgets .section_settings { left: auto; right: 10px; } .oe-sectionoverlay.leftwidgets .add_new_section { left: auto; right: 50px; } .oe-sectionoverlay.leftwidgets .save_section { left: auto; right: 90px; } .oe-sectionoverlay.leftwidgets .section_controls { left: auto; right: 10px; } .oe-sectionoverlay .section_settings { position: absolute; bottom: -20px; right: 10px; width: 34px; height: 34px; border-radius: 34px; display: flex; align-items: center; justify-content: center; pointer-events: all; cursor: pointer; transition: opacity 0.2s ease-in-out; background: #f1f0fe; } .oe-sectionoverlay .section_settings:hover { background: #7367f0; transition: opacity 0.2s ease-in-out; } .oe-sectionoverlay .section_settings:hover svg { fill: #ffffff; } .oe-sectionoverlay .section_settings svg { width: 16px; } .oe-sectionoverlay .add_new_section { position: absolute; bottom: -20px; right: 50px; width: 34px; height: 34px; background: #f1f0fe; display: flex; align-items: center; justify-content: center; border-radius: 5px; cursor: pointer; pointer-events: all; border-radius: 34px; box-sizing: border-box; } .oe-sectionoverlay .add_new_section svg { width: 16px; pointer-events: none; } .oe-sectionoverlay .add_new_section:hover { background: #7367f0; transition: opacity 0.2s ease-in-out; } .oe-sectionoverlay .add_new_section:hover svg { fill: #ffffff; } .oe-sectionoverlay .save_section { position: absolute; bottom: -20px; right: 90px; width: 34px; height: 34px; background: #f1f0fe; display: flex; align-items: center; justify-content: center; border-radius: 5px; cursor: pointer; pointer-events: all; border-radius: 34px; box-sizing: border-box; } .oe-sectionoverlay .save_section svg { width: 16px; pointer-events: none; } .oe-sectionoverlay .save_section:hover { background: #7367f0; transition: opacity 0.2s ease-in-out; } .oe-sectionoverlay .save_section:hover svg { fill: #ffffff; } .oe-sectionoverlay .section_settings_btn { box-shadow: 1px 3px 10px rgba(0, 0, 0, 0.3); } .oe-sectionoverlay .section_settings_btn:hover { box-shadow: 1px 3px 15px rgba(0, 0, 0, 0.2); } .oe-sectionoverlay .section_controls { position: absolute; top: 10px; right: 10px; display: flex; align-items: center; justify-content: space-between; pointer-events: none; } .oe-sectionoverlay .section_controls.leftwidgets { left: 100px; } .oe-sectionoverlay .section_controls .section_settings_btn { background: #f1f0fe; margin-right: 10px; border-radius: 34px; width: 34px; height: 34px; box-sizing: border-box; padding: 10px; pointer-events: all; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: opacity 0.2s ease-in-out; position: relative; z-index: 1; } .oe-sectionoverlay .section_controls .section_settings_btn:hover { opacity: 1; transition: opacity 0.2s ease-in-out; background: #7367f0; } .oe-sectionoverlay .section_controls .section_settings_btn:hover svg { transition: opacity 0.2s ease-in-out; fill: #ffffff; } .oe-sectionoverlay .section_controls .section_settings_btn svg { transition: opacity 0.2s ease-in-out; pointer-events: none; width: 24px; } .oe-sectionoverlay .section_controls .section_move { cursor: move; } .empty_page_content { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: #f1f0fe70; display: flex; align-items: center; justify-content: center; } .empty_page_content .empty_page_wrap { width: 400px; background: #ffffff; border-radius: 3px; box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.2); padding: 20px; } .empty_page_content .empty_page_wrap .oe-empty-page-title { text-align: center; } .empty_page_content .empty_page_wrap .oe-empty-page-title p { font-size: 20px; color: #666666; font-family: Lato; margin-bottom: 15px; font-weight: 300; } .empty_page_content .empty_page_wrap .oe-empty-page-title span { font-size: 14px; color: #888888; font-family: Lato; font-weight: 300; } .empty_page_content .empty_page_wrap .oe-empty-page-options { display: grid; margin-top: 20px; grid-template-columns: repeat(2, 1fr); } .empty_page_content .empty_page_wrap .oe-empty-page-options .click_area { padding: 20px; display: flex; align-items: center; justify-content: center; flex-direction: column; cursor: pointer; transition: all 0.2s linear; } .empty_page_content .empty_page_wrap .oe-empty-page-options .click_area span { font-size: 14px; text-align: center; color: #888888; font-family: Lato; font-weight: 300; } .empty_page_content .empty_page_wrap .oe-empty-page-options .click_area:hover { box-shadow: 0 0 10px rgba(0, 0, 0, 0.05), 0 20px 20px -20px rgba(0, 0, 0, 0.5); transition: all 0.2s linear; } .editboxbtn { display: none !important; } .oe-widget-overlay.flex .editboxbtn { display: flex !important; } .oe-widget-overlay.grid .editboxbtn { display: flex !important; } .oe-widget-overlay.parent-grid { display: flex !important; } .oe-widget-overlay.parent-grid .resizer { display: block; } .oe-widget-overlay.parent-grid .resizer .bottomright { display: block !important; } .mobile_preview .section_settings { position: absolute; bottom: -30px; } .hide-delayed-grid { display: none; } .hide-delayed-grid.show-delayed-grid { display: block; } /* 53a8ff */ /* 66b1ff */ /* 79bbff */ /* 8cc5ff */ /* a0cfff */ /* b3d8ff */ /* c6e2ff */ /* d9ecff */ /* ecf5ff */ @media (min-width: 320px) and (max-width: 767px) { [elType='section'] > [elType='container'] > .oe-draggable-widget > .margin_spacer { position: absolute; pointer-events: none; width: 100%; bottom: calc(var(--mobile-margin-bottom,12px) * -1); height: var(--mobile-margin-bottom, 12px); } [elType='section'] > [elType='container'] > .oe-draggable-widget > .margin_spacer .margin_spacer_resizer { height: calc(var(--mobile-margin-bottom,12px) + 12px); } [elType='section'] > [elType='container'] > .oe-draggable-widget > .margin_spacer.active .margin_spacer_resizer .margin_spacer_bg { background: #aba4f6; opacity: 0.7; top: 0px; bottom: 0px; left: 0; right: 0; } [elType='section'] > [elType='container'] > .oe-draggable-widget > .margin_spacer .margin_spacer_resizer { position: absolute; top: 0; bottom: 0; left: 0; right: 0; cursor: row-resize; pointer-events: all; transition: background 0.2s ease-in-out; align-items: center; justify-content: center; display: flex; } [elType='section'] > [elType='container'] > .oe-draggable-widget > .margin_spacer .margin_spacer_resizer:hover .margin_spacer_bg { background: #aba4f6; opacity: 0.7; } [elType='section'] > [elType='container'] > .oe-draggable-widget > .margin_spacer .margin_spacer_resizer .margin_spacer_bg { pointer-events: none; transition: background 0.2s ease-in-out; position: absolute; align-items: center; justify-content: center; display: flex; pointer-events: none; top: 0; bottom: 0; left: 0; right: 0; } [elType='section'] > [elType='container'] > .oe-draggable-widget > .margin_spacer .margin_spacer_resizer .margin_spacer_bg .margin_value_indicator { font-size: 10px; color: #ffffff; } } .oe-flex-column .oe-draggable-widget .margin_spacer:not(.margin_spacer_horizontal) { position: absolute; pointer-events: none; width: 100%; bottom: calc(var(--desktop-flex-item-margin-bottom,12px) * -1); height: var(--desktop-flex-item-margin-bottom, 12px); } .oe-flex-column .oe-draggable-widget .margin_spacer:not(.margin_spacer_horizontal) .margin_spacer_resizer { pointer-events: none; height: calc(var(--desktop-flex-item-margin-bottom,12px) + 12px); } .oe-flex-column .oe-draggable-widget .margin_spacer:not(.margin_spacer_horizontal).active .margin_spacer_resizer .margin_spacer_bg { background: #aba4f6; opacity: 0.7; top: 0px; bottom: 0px; left: 0; right: 0; } .oe-flex-column .oe-draggable-widget .margin_spacer:not(.margin_spacer_horizontal) .margin_spacer_resizer { position: absolute; top: 0; bottom: 0; left: 0; right: 0; cursor: row-resize; pointer-events: all; transition: background 0.2s ease-in-out; align-items: center; justify-content: center; display: flex; } .oe-flex-column .oe-draggable-widget .margin_spacer:not(.margin_spacer_horizontal) .margin_spacer_resizer:hover .margin_spacer_bg { background: #aba4f6; opacity: 0.7; } .oe-flex-column .oe-draggable-widget .margin_spacer:not(.margin_spacer_horizontal) .margin_spacer_resizer .margin_spacer_bg { pointer-events: none; transition: background 0.2s ease-in-out; position: absolute; align-items: center; justify-content: center; display: flex; pointer-events: none; top: 0; bottom: 0; left: 0; right: 0; } .oe-flex-column .oe-draggable-widget .margin_spacer:not(.margin_spacer_horizontal) .margin_spacer_resizer .margin_spacer_bg .margin_value_indicator { font-size: 10px; color: #ffffff; } .oe-flex-column .oe-draggable-widget .margin_spacer.margin_spacer_horizontal { position: absolute; pointer-events: none; top: 0px; height: 100%; right: calc(var(--desktop-flex-item-margin-right,12px) * -1); width: var(--desktop-flex-item-margin-right, 12px); } .oe-flex-column .oe-draggable-widget .margin_spacer.margin_spacer_horizontal .margin_spacer_resizer { pointer-events: none; width: calc(var(--desktop-flex-item-margin-right,12px) + 12px); } .oe-flex-column .oe-draggable-widget .margin_spacer.margin_spacer_horizontal.active .margin_spacer_resizer .margin_spacer_bg { background: #aba4f6; opacity: 0.7; top: 0px; bottom: 0px; left: 0; right: 0; } .oe-flex-column .oe-draggable-widget .margin_spacer.margin_spacer_horizontal .margin_spacer_resizer { position: absolute; top: 0; bottom: 0; left: 0; right: 0; cursor: col-resize; pointer-events: all; transition: background 0.2s ease-in-out; align-items: center; justify-content: center; display: flex; } .oe-flex-column .oe-draggable-widget .margin_spacer.margin_spacer_horizontal .margin_spacer_resizer:hover .margin_spacer_bg { background: #aba4f6; opacity: 0.7; } .oe-flex-column .oe-draggable-widget .margin_spacer.margin_spacer_horizontal .margin_spacer_resizer .margin_spacer_bg { pointer-events: none; transition: background 0.2s ease-in-out; position: absolute; align-items: center; justify-content: center; display: flex; pointer-events: none; top: 0; bottom: 0; left: 0; right: 0; } .oe-flex-column .oe-draggable-widget .margin_spacer.margin_spacer_horizontal .margin_spacer_resizer .margin_spacer_bg .margin_value_indicator { font-size: 10px; color: #ffffff; } @media (min-width: 768px) and (max-width: 1024px) { .oe-flex-column .oe-draggable-widget .margin_spacer:not(.margin_spacer_horizontal) { position: absolute; pointer-events: none; width: 100%; bottom: calc(var(--tablet-flex-item-margin-bottom,12px) * -1); height: var(--tablet-flex-item-margin-bottom, 12px); } .oe-flex-column .oe-draggable-widget .margin_spacer:not(.margin_spacer_horizontal) .margin_spacer_resizer { pointer-events: none; height: calc(var(--tablet-flex-item-margin-bottom,12px) + 12px); } .oe-flex-column .oe-draggable-widget .margin_spacer:not(.margin_spacer_horizontal).active .margin_spacer_resizer .margin_spacer_bg { background: #aba4f6; opacity: 0.7; top: 0px; bottom: 0px; left: 0; right: 0; } .oe-flex-column .oe-draggable-widget .margin_spacer:not(.margin_spacer_horizontal) .margin_spacer_resizer { position: absolute; top: 0; bottom: 0; left: 0; right: 0; cursor: row-resize; pointer-events: all; transition: background 0.2s ease-in-out; align-items: center; justify-content: center; display: flex; } .oe-flex-column .oe-draggable-widget .margin_spacer:not(.margin_spacer_horizontal) .margin_spacer_resizer:hover .margin_spacer_bg { background: #aba4f6; opacity: 0.7; } .oe-flex-column .oe-draggable-widget .margin_spacer:not(.margin_spacer_horizontal) .margin_spacer_resizer .margin_spacer_bg { pointer-events: none; transition: background 0.2s ease-in-out; position: absolute; align-items: center; justify-content: center; display: flex; pointer-events: none; top: 0; bottom: 0; left: 0; right: 0; } .oe-flex-column .oe-draggable-widget .margin_spacer:not(.margin_spacer_horizontal) .margin_spacer_resizer .margin_spacer_bg .margin_value_indicator { font-size: 10px; color: #ffffff; } .oe-flex-column .oe-draggable-widget .margin_spacer.margin_spacer_horizontal { position: absolute; pointer-events: none; top: 0px; height: 100%; right: calc(var(--tablet-flex-item-margin-right,12px) * -1); width: var(--tablet-flex-item-margin-right, 12px); } .oe-flex-column .oe-draggable-widget .margin_spacer.margin_spacer_horizontal .margin_spacer_resizer { pointer-events: none; width: calc(var(--tablet-flex-item-margin-right,12px) + 12px); } .oe-flex-column .oe-draggable-widget .margin_spacer.margin_spacer_horizontal.active .margin_spacer_resizer .margin_spacer_bg { background: #aba4f6; opacity: 0.7; top: 0px; bottom: 0px; left: 0; right: 0; } .oe-flex-column .oe-draggable-widget .margin_spacer.margin_spacer_horizontal .margin_spacer_resizer { position: absolute; top: 0; bottom: 0; left: 0; right: 0; cursor: col-resize; pointer-events: all; transition: background 0.2s ease-in-out; align-items: center; justify-content: center; display: flex; } .oe-flex-column .oe-draggable-widget .margin_spacer.margin_spacer_horizontal .margin_spacer_resizer:hover .margin_spacer_bg { background: #aba4f6; opacity: 0.7; } .oe-flex-column .oe-draggable-widget .margin_spacer.margin_spacer_horizontal .margin_spacer_resizer .margin_spacer_bg { pointer-events: none; transition: background 0.2s ease-in-out; position: absolute; align-items: center; justify-content: center; display: flex; pointer-events: none; top: 0; bottom: 0; left: 0; right: 0; } .oe-flex-column .oe-draggable-widget .margin_spacer.margin_spacer_horizontal .margin_spacer_resizer .margin_spacer_bg .margin_value_indicator { font-size: 10px; color: #ffffff; } } @media (min-width: 320px) and (max-width: 767px) { .oe-flex-column .oe-draggable-widget .margin_spacer:not(.margin_spacer_horizontal) { position: absolute; pointer-events: none; width: 100%; bottom: calc(var(--mobile-flex-item-margin-bottom,12px) * -1); height: var(--mobile-flex-item-margin-bottom, 12px); } .oe-flex-column .oe-draggable-widget .margin_spacer:not(.margin_spacer_horizontal) .margin_spacer_resizer { pointer-events: none; height: calc(var(--mobile-flex-item-margin-bottom,12px) + 12px); } .oe-flex-column .oe-draggable-widget .margin_spacer:not(.margin_spacer_horizontal).active .margin_spacer_resizer .margin_spacer_bg { background: #aba4f6; opacity: 0.7; top: 0px; bottom: 0px; left: 0; right: 0; } .oe-flex-column .oe-draggable-widget .margin_spacer:not(.margin_spacer_horizontal) .margin_spacer_resizer { position: absolute; top: 0; bottom: 0; left: 0; right: 0; cursor: row-resize; pointer-events: all; transition: background 0.2s ease-in-out; align-items: center; justify-content: center; display: flex; } .oe-flex-column .oe-draggable-widget .margin_spacer:not(.margin_spacer_horizontal) .margin_spacer_resizer:hover .margin_spacer_bg { background: #aba4f6; opacity: 0.7; } .oe-flex-column .oe-draggable-widget .margin_spacer:not(.margin_spacer_horizontal) .margin_spacer_resizer .margin_spacer_bg { pointer-events: none; transition: background 0.2s ease-in-out; position: absolute; align-items: center; justify-content: center; display: flex; pointer-events: none; top: 0; bottom: 0; left: 0; right: 0; } .oe-flex-column .oe-draggable-widget .margin_spacer:not(.margin_spacer_horizontal) .margin_spacer_resizer .margin_spacer_bg .margin_value_indicator { font-size: 10px; color: #ffffff; } .oe-flex-column .oe-draggable-widget .margin_spacer.margin_spacer_horizontal { position: absolute; pointer-events: none; top: 0px; height: 100%; right: calc(var(--mobile-flex-item-margin-right,12px) * -1); width: var(--mobile-flex-item-margin-right, 12px); } .oe-flex-column .oe-draggable-widget .margin_spacer.margin_spacer_horizontal .margin_spacer_resizer { pointer-events: none; width: calc(var(--mobile-flex-item-margin-right,12px) + 12px); } .oe-flex-column .oe-draggable-widget .margin_spacer.margin_spacer_horizontal.active .margin_spacer_resizer .margin_spacer_bg { background: #aba4f6; opacity: 0.7; top: 0px; bottom: 0px; left: 0; right: 0; } .oe-flex-column .oe-draggable-widget .margin_spacer.margin_spacer_horizontal .margin_spacer_resizer { position: absolute; top: 0; bottom: 0; left: 0; right: 0; cursor: col-resize; pointer-events: all; transition: background 0.2s ease-in-out; align-items: center; justify-content: center; display: flex; } .oe-flex-column .oe-draggable-widget .margin_spacer.margin_spacer_horizontal .margin_spacer_resizer:hover .margin_spacer_bg { background: #aba4f6; opacity: 0.7; } .oe-flex-column .oe-draggable-widget .margin_spacer.margin_spacer_horizontal .margin_spacer_resizer .margin_spacer_bg { pointer-events: none; transition: background 0.2s ease-in-out; position: absolute; align-items: center; justify-content: center; display: flex; pointer-events: none; top: 0; bottom: 0; left: 0; right: 0; } .oe-flex-column .oe-draggable-widget .margin_spacer.margin_spacer_horizontal .margin_spacer_resizer .margin_spacer_bg .margin_value_indicator { font-size: 10px; color: #ffffff; } } .oe-draggable-widget[eltype="text"].isEditing .oe-text-content { pointer-events: all; } .oe-draggable-widget[eltype="text"].isEditing .oe-text-content a { color: inherit; } .oe-draggable-widget[eltype="text"].isEditing .oe-text-content * { pointer-events: all; } .oe-draggable-widget[eltype="text"] .oe-text-widget { word-break: break-word; position: absolute; top: 0; right: 0; bottom: 0; left: 0; padding: var(--desktop-padding, 0px); border-width: var(--desktop-border-width, 0px); border-style: var(--desktop-border-style, solid); border-color: var(--desktop-border-color, #000000); border-radius: var(--desktop-border-radius, 0px); opacity: var(--desktop-opacity, 1); box-shadow: var(--desktop-box-shadow, none); transform-origin: center; } .oe-draggable-widget[eltype="text"] .oe-text-widget .oe-text-content { transform: scale(var(--desktop-scale, 1)); text-align: var(--desktop-content-text-align, unset); vertical-align: var(--desktop-content-vertical-align, unset); } .oe-draggable-widget[eltype="text"] .oe-text-widget .oe-text-content li::marker { color: var(--desktop-marker-color, inherit); } .oe-draggable-widget[eltype="text"] .oe-text-widget .oe-text-wrap { position: relative; width: 100%; height: 100%; } .oe-draggable-widget[eltype="text"] .oe-text-widget .oe-text-wrap .oe-text-content { overflow: hidden; word-break: break-word; position: relative; width: 100%; height: 100%; display: flex; flex-direction: column; outline: none; box-shadow: none; border: none; align-items: var(--desktop-align-items, none); justify-content: var(--desktop-justify-content, none); } .oe-draggable-widget[eltype="text"] .oe-text-widget .oe-text-wrap .oe-text-content > p:last-child { margin-bottom: 0px; } .oe-draggable-widget[eltype="text"] .oe-text-widget .oe-text-wrap .oe-text-content > p:first-child { margin-top: 0px; } .oe-draggable-widget[eltype="text"] .oe-text-widget .oe-text-wrap .oe-text-content ol { list-style: auto; padding-left: revert; } .oe-draggable-widget[eltype="text"] .oe-text-widget .oe-text-wrap .oe-text-content ul { list-style: initial; padding-left: revert; } .oe-draggable-widget[eltype="text"] .oe-text-widget:hover:not(.nohover) { padding: var(--desktop-hover-padding, var(--desktop-padding, 0px)); border-width: var(--desktop-hover-border-width, var(--desktop-border-width, 0px)); border-style: var(--desktop-hover-border-style, var(--desktop-border-style, solid)); border-color: var(--desktop-hover-border-color, var(--desktop-border-color, #000000)); border-radius: var(--desktop-hover-border-radius, var(--desktop-border-radius, 0px)); opacity: var(--desktop-hover-opacity, var(--desktop-opacity, 1)); box-shadow: var(--desktop-hover-box-shadow, var(--desktop-box-shadow, none)); } .oe-draggable-widget[eltype="text"] .oe-text-widget:hover:not(.nohover) .oe-text-content { transform: scale(var(--desktop-hover-scale, var(--desktop-scale, 1))); text-align: var(--desktop-hover-content-text-align, var(--desktop-content-text-align, unset)); vertical-align: var(--desktop-hover-content-vertical-align, var(--desktop-content-vertical-align, unset)); } .oe-draggable-widget[eltype="text"] .oe-text-widget:hover:not(.nohover) .oe-text-content li::marker { /*@include buildAliasWrap(font-size, marker-font-size, $device, inherit, $prefix, $hover);*/ color: var(--desktop-hover-marker-color, var(--desktop-marker-color, inherit)); } .oe-draggable-widget[eltype="text"] .oe-text-widget:hover:not(.nohover) > .oe-background { pointer-events: none; overflow: hidden; transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; } .oe-draggable-widget[eltype="text"] .oe-text-widget:hover:not(.nohover) > .oe-background * { transition: all 0.2s ease-in-out; } .oe-draggable-widget[eltype="text"] .oe-text-widget:hover:not(.nohover) > .oe-background .oe-background-fill { background-color: var(--desktop-hover-background-color, var(--desktop-background-color)); opacity: var(--desktop-hover-background-fill-opacity, var(--desktop-background-fill-opacity, 1)); transition: all 0.2s ease-in-out; --test:10; } .oe-draggable-widget[eltype="text"] .oe-text-widget:hover:not(.nohover) > .oe-background .oe-background-gradient { opacity: var(--desktop-hover-background-gradient-opacity, var(--desktop-background-gradient-opacity, 1)); background-image: var(--desktop-hover-background-gradient, var(--desktop-background-gradient)); transition: all 0.2s ease-in-out; } .oe-draggable-widget[eltype="text"] .oe-text-widget:hover:not(.nohover) > .oe-background .oe-background-image { opacity: var(--desktop-hover-background-image-opacity, var(--desktop-background-image-opacity, 1)); background-image: var(--desktop-hover-background-image, var(--desktop-background-image)); background-repeat: var(--desktop-hover-background-repeat, var(--desktop-background-repeat, no-repeat)); background-position: var(--desktop-hover-background-position, var(--desktop-background-position, center center)); background-size: var(--desktop-hover-background-size, var(--desktop-background-size, cover)); background-attachment: var(--desktop-hover-background-attachment, var(--desktop-background-attachment, cover)); transition: all 0.2s ease-in-out; } .oe-draggable-widget[eltype="text"] .oe-text-widget:hover:not(.nohover) > .oe-background * { transition: all 0.2s ease-in-out; } .oe-draggable-widget[eltype="text"] .oe-text-widget .oe-background { pointer-events: none; overflow: hidden; transition: all 0.2s ease-in-out; } .oe-draggable-widget[eltype="text"] .oe-text-widget .oe-background * { transition: all 0.2s ease-in-out; } .oe-draggable-widget[eltype="text"] .oe-text-widget .oe-background .oe-background-fill { background-color: var(--desktop-background-color); opacity: var(--desktop-background-fill-opacity, 1); transition: all 0.2s ease-in-out; --test:10; } .oe-draggable-widget[eltype="text"] .oe-text-widget .oe-background .oe-background-gradient { opacity: var(--desktop-background-gradient-opacity, 1); background-image: var(--desktop-background-gradient); transition: all 0.2s ease-in-out; } .oe-draggable-widget[eltype="text"] .oe-text-widget .oe-background .oe-background-image { opacity: var(--desktop-background-image-opacity, 1); background-image: var(--desktop-background-image); background-repeat: var(--desktop-background-repeat, no-repeat); background-position: var(--desktop-background-position, center center); background-size: var(--desktop-background-size, cover); background-attachment: var(--desktop-background-attachment, cover); transition: all 0.2s ease-in-out; } .oe-draggable-widget[eltype="text"].hovered .oe-text-widget { padding: var(--desktop-hover-padding, var(--desktop-padding, 0px)); border-width: var(--desktop-hover-border-width, var(--desktop-border-width, 0px)); border-style: var(--desktop-hover-border-style, var(--desktop-border-style, solid)); border-color: var(--desktop-hover-border-color, var(--desktop-border-color, #000000)); border-radius: var(--desktop-hover-border-radius, var(--desktop-border-radius, 0px)); opacity: var(--desktop-hover-opacity, var(--desktop-opacity, 1)); box-shadow: var(--desktop-hover-box-shadow, var(--desktop-box-shadow, none)); } .oe-draggable-widget[eltype="text"].hovered .oe-text-widget .oe-text-content { transform: scale(var(--desktop-hover-scale, var(--desktop-scale, 1))); text-align: var(--desktop-hover-content-text-align, var(--desktop-content-text-align, unset)); vertical-align: var(--desktop-hover-content-vertical-align, var(--desktop-content-vertical-align, unset)); } .oe-draggable-widget[eltype="text"].hovered .oe-text-widget .oe-text-content li::marker { /*@include buildAliasWrap(font-size, marker-font-size, $device, inherit, $prefix, $hover);*/ color: var(--desktop-hover-marker-color, var(--desktop-marker-color, inherit)); } .oe-draggable-widget[eltype="text"].hovered .oe-text-widget .oe-background { pointer-events: none; overflow: hidden; transition: all 0.2s ease-in-out; } .oe-draggable-widget[eltype="text"].hovered .oe-text-widget .oe-background * { transition: all 0.2s ease-in-out; } .oe-draggable-widget[eltype="text"].hovered .oe-text-widget .oe-background .oe-background-fill { background-color: var(--desktop-hover-background-color, var(--desktop-background-color)); opacity: var(--desktop-hover-background-fill-opacity, var(--desktop-background-fill-opacity, 1)); transition: all 0.2s ease-in-out; --test:10; } .oe-draggable-widget[eltype="text"].hovered .oe-text-widget .oe-background .oe-background-gradient { opacity: var(--desktop-hover-background-gradient-opacity, var(--desktop-background-gradient-opacity, 1)); background-image: var(--desktop-hover-background-gradient, var(--desktop-background-gradient)); transition: all 0.2s ease-in-out; } .oe-draggable-widget[eltype="text"].hovered .oe-text-widget .oe-background .oe-background-image { opacity: var(--desktop-hover-background-image-opacity, var(--desktop-background-image-opacity, 1)); background-image: var(--desktop-hover-background-image, var(--desktop-background-image)); background-repeat: var(--desktop-hover-background-repeat, var(--desktop-background-repeat, no-repeat)); background-position: var(--desktop-hover-background-position, var(--desktop-background-position, center center)); background-size: var(--desktop-hover-background-size, var(--desktop-background-size, cover)); background-attachment: var(--desktop-hover-background-attachment, var(--desktop-background-attachment, cover)); transition: all 0.2s ease-in-out; } @media (min-width: 768px) and (max-width: 1024px) { .oe-draggable-widget[eltype="text"] .oe-text-widget { padding: var(--tablet-padding, var(--desktop-padding, 0px)); border-width: var(--tablet-border-width, var(--desktop-border-width, 0px)); border-style: var(--tablet-border-style, var(--desktop-border-style, solid)); border-color: var(--tablet-border-color, var(--desktop-border-color, #000000)); border-radius: var(--tablet-border-radius, var(--desktop-border-radius, 0px)); opacity: var(--tablet-opacity, var(--desktop-opacity, 1)); box-shadow: var(--tablet-box-shadow, var(--desktop-box-shadow, none)); } .oe-draggable-widget[eltype="text"] .oe-text-widget .oe-text-content { transform: scale(var(--tablet-scale, var(--desktop-scale, 1))); text-align: var(--tablet-content-text-align, var(--desktop-content-text-align, unset)); vertical-align: var(--tablet-content-vertical-align, var(--desktop-content-vertical-align, unset)); } .oe-draggable-widget[eltype="text"] .oe-text-widget .oe-text-content li::marker { /*@include buildAliasWrap(font-size, marker-font-size, $device, inherit, $prefix, $hover);*/ color: var(--tablet-marker-color, var(--desktop-marker-color, inherit)); } .oe-draggable-widget[eltype="text"] .oe-text-widget:hover:not(.nohover) { padding: var(--tablet-hover-padding, var(--tablet-padding, var(--desktop-hover-padding, var(--desktop-padding, 0px)))); border-width: var(--tablet-hover-border-width, var(--tablet-border-width, var(--desktop-hover-border-width, var(--desktop-border-width, 0px)))); border-style: var(--tablet-hover-border-style, var(--tablet-border-style, var(--desktop-hover-border-style, var(--desktop-border-style, solid)))); border-color: var(--tablet-hover-border-color, var(--tablet-border-color, var(--desktop-hover-border-color, var(--desktop-border-color, #000000)))); border-radius: var(--tablet-hover-border-radius, var(--tablet-border-radius, var(--desktop-hover-border-radius, var(--desktop-border-radius, 0px)))); opacity: var(--tablet-hover-opacity, var(--tablet-opacity, var(--desktop-hover-opacity, var(--desktop-opacity, 1)))); box-shadow: var(--tablet-hover-box-shadow, var(--tablet-box-shadow, var(--desktop-hover-box-shadow, var(--desktop-box-shadow, none)))); } .oe-draggable-widget[eltype="text"] .oe-text-widget:hover:not(.nohover) .oe-text-content { transform: scale(var(--tablet-hover-scale, var(--tablet-scale, var(--desktop-hover-scale, var(--desktop-scale, , 1))))); text-align: var(--tablet-hover-content-text-align, var(--tablet-content-text-align, var(--desktop-hover-content-text-align, var(--desktop-content-text-align, unset)))); vertical-align: var(--tablet-hover-content-vertical-align, var(--tablet-content-vertical-align, var(--desktop-hover-content-vertical-align, var(--desktop-content-vertical-align, unset)))); } .oe-draggable-widget[eltype="text"] .oe-text-widget:hover:not(.nohover) .oe-text-content li::marker { /*@include buildAliasWrap(font-size, marker-font-size, $device, inherit, $prefix, $hover);*/ color: var(--tablet-hover-marker-color, var(--tablet-marker-color, var(--desktop-hover-marker-color, var(--desktop-marker-color, inherit)))); } .oe-draggable-widget[eltype="text"] .oe-text-widget:hover:not(.nohover) > .oe-background { pointer-events: none; overflow: hidden; transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; } .oe-draggable-widget[eltype="text"] .oe-text-widget:hover:not(.nohover) > .oe-background * { transition: all 0.2s ease-in-out; } .oe-draggable-widget[eltype="text"] .oe-text-widget:hover:not(.nohover) > .oe-background .oe-background-fill { background-color: var(--tablet-hover-background-color, var(--tablet-background-color, var(--desktop-hover-background-color, var(--desktop-background-color)))); opacity: var(--tablet-hover-background-fill-opacity, var(--tablet-background-fill-opacity, var(--desktop-hover-background-fill-opacity, var(--desktop-background-fill-opacity, 1)))); transition: all 0.2s ease-in-out; --test:10; } .oe-draggable-widget[eltype="text"] .oe-text-widget:hover:not(.nohover) > .oe-background .oe-background-gradient { opacity: var(--tablet-hover-background-gradient-opacity, var(--tablet-background-gradient-opacity, var(--desktop-hover-background-gradient-opacity, var(--desktop-background-gradient-opacity, 1)))); background-image: var(--tablet-hover-background-gradient, var(--tablet-background-gradient, var(--desktop-hover-background-gradient, var(--desktop-background-gradient, )))); transition: all 0.2s ease-in-out; } .oe-draggable-widget[eltype="text"] .oe-text-widget:hover:not(.nohover) > .oe-background .oe-background-image { opacity: var(--tablet-hover-background-image-opacity, var(--tablet-background-image-opacity, var(--desktop-hover-background-image-opacity, var(--desktop-background-image-opacity, 1)))); background-image: var(--tablet-hover-background-image, var(--tablet-background-image, var(--desktop-hover-background-image, var(--desktop-background-image)))); background-repeat: var(--tablet-hover-background-repeat, var(--tablet-background-repeat, var(--desktop-hover-background-repeat, var(--desktop-background-repeat, no-repeat)))); background-position: var(--tablet-hover-background-position, var(--tablet-background-position, var(--desktop-hover-background-position, var(--desktop-background-position, center center)))); background-size: var(--tablet-hover-background-size, var(--tablet-background-size, var(--desktop-hover-background-size, var(--desktop-background-size, cover)))); background-attachment: var(--tablet-hover-background-attachment, var(--tablet-background-attachment, var(--desktop-hover-background-attachment, var(--desktop-background-attachment, cover)))); transition: all 0.2s ease-in-out; } .oe-draggable-widget[eltype="text"] .oe-text-widget:hover:not(.nohover) > .oe-background * { transition: all 0.2s ease-in-out; } .oe-draggable-widget[eltype="text"] .oe-text-widget .oe-background { pointer-events: none; overflow: hidden; transition: all 0.2s ease-in-out; } .oe-draggable-widget[eltype="text"] .oe-text-widget .oe-background * { transition: all 0.2s ease-in-out; } .oe-draggable-widget[eltype="text"] .oe-text-widget .oe-background .oe-background-fill { background-color: var(--tablet-background-color, var(--desktop-background-color)); opacity: var(--tablet-background-fill-opacity, var(--desktop-background-fill-opacity, 1)); transition: all 0.2s ease-in-out; --test:10; } .oe-draggable-widget[eltype="text"] .oe-text-widget .oe-background .oe-background-gradient { opacity: var(--tablet-background-gradient-opacity, var(--desktop-background-gradient-opacity, 1)); background-image: var(--tablet-background-gradient, var(--desktop-background-gradient)); transition: all 0.2s ease-in-out; } .oe-draggable-widget[eltype="text"] .oe-text-widget .oe-background .oe-background-image { opacity: var(--tablet-background-image-opacity, var(--desktop-background-image-opacity, 1)); background-image: var(--tablet-background-image, var(--desktop-background-image)); background-repeat: var(--tablet-background-repeat, var(--desktop-background-repeat, no-repeat)); background-position: var(--tablet-background-position, var(--desktop-background-position, center center)); background-size: var(--tablet-background-size, var(--desktop-background-size, cover)); background-attachment: var(--tablet-background-attachment, var(--desktop-background-attachment, cover)); transition: all 0.2s ease-in-out; } .oe-draggable-widget[eltype="text"].hovered .oe-text-widget { padding: var(--tablet-hover-padding, var(--tablet-padding, var(--desktop-hover-padding, var(--desktop-padding, 0px)))); border-width: var(--tablet-hover-border-width, var(--tablet-border-width, var(--desktop-hover-border-width, var(--desktop-border-width, 0px)))); border-style: var(--tablet-hover-border-style, var(--tablet-border-style, var(--desktop-hover-border-style, var(--desktop-border-style, solid)))); border-color: var(--tablet-hover-border-color, var(--tablet-border-color, var(--desktop-hover-border-color, var(--desktop-border-color, #000000)))); border-radius: var(--tablet-hover-border-radius, var(--tablet-border-radius, var(--desktop-hover-border-radius, var(--desktop-border-radius, 0px)))); opacity: var(--tablet-hover-opacity, var(--tablet-opacity, var(--desktop-hover-opacity, var(--desktop-opacity, 1)))); box-shadow: var(--tablet-hover-box-shadow, var(--tablet-box-shadow, var(--desktop-hover-box-shadow, var(--desktop-box-shadow, none)))); } .oe-draggable-widget[eltype="text"].hovered .oe-text-widget .oe-text-content { transform: scale(var(--tablet-hover-scale, var(--tablet-scale, var(--desktop-hover-scale, var(--desktop-scale, , 1))))); text-align: var(--tablet-hover-content-text-align, var(--tablet-content-text-align, var(--desktop-hover-content-text-align, var(--desktop-content-text-align, unset)))); vertical-align: var(--tablet-hover-content-vertical-align, var(--tablet-content-vertical-align, var(--desktop-hover-content-vertical-align, var(--desktop-content-vertical-align, unset)))); } .oe-draggable-widget[eltype="text"].hovered .oe-text-widget .oe-text-content li::marker { /*@include buildAliasWrap(font-size, marker-font-size, $device, inherit, $prefix, $hover);*/ color: var(--tablet-hover-marker-color, var(--tablet-marker-color, var(--desktop-hover-marker-color, var(--desktop-marker-color, inherit)))); } .oe-draggable-widget[eltype="text"].hovered .oe-text-widget .oe-background { pointer-events: none; overflow: hidden; transition: all 0.2s ease-in-out; } .oe-draggable-widget[eltype="text"].hovered .oe-text-widget .oe-background * { transition: all 0.2s ease-in-out; } .oe-draggable-widget[eltype="text"].hovered .oe-text-widget .oe-background .oe-background-fill { background-color: var(--tablet-hover-background-color, var(--tablet-background-color, var(--desktop-hover-background-color, var(--desktop-background-color)))); opacity: var(--tablet-hover-background-fill-opacity, var(--tablet-background-fill-opacity, var(--desktop-hover-background-fill-opacity, var(--desktop-background-fill-opacity, 1)))); transition: all 0.2s ease-in-out; --test:10; } .oe-draggable-widget[eltype="text"].hovered .oe-text-widget .oe-background .oe-background-gradient { opacity: var(--tablet-hover-background-gradient-opacity, var(--tablet-background-gradient-opacity, var(--desktop-hover-background-gradient-opacity, var(--desktop-background-gradient-opacity, 1)))); background-image: var(--tablet-hover-background-gradient, var(--tablet-background-gradient, var(--desktop-hover-background-gradient, var(--desktop-background-gradient, )))); transition: all 0.2s ease-in-out; } .oe-draggable-widget[eltype="text"].hovered .oe-text-widget .oe-background .oe-background-image { opacity: var(--tablet-hover-background-image-opacity, var(--tablet-background-image-opacity, var(--desktop-hover-background-image-opacity, var(--desktop-background-image-opacity, 1)))); background-image: var(--tablet-hover-background-image, var(--tablet-background-image, var(--desktop-hover-background-image, var(--desktop-background-image)))); background-repeat: var(--tablet-hover-background-repeat, var(--tablet-background-repeat, var(--desktop-hover-background-repeat, var(--desktop-background-repeat, no-repeat)))); background-position: var(--tablet-hover-background-position, var(--tablet-background-position, var(--desktop-hover-background-position, var(--desktop-background-position, center center)))); background-size: var(--tablet-hover-background-size, var(--tablet-background-size, var(--desktop-hover-background-size, var(--desktop-background-size, cover)))); background-attachment: var(--tablet-hover-background-attachment, var(--tablet-background-attachment, var(--desktop-hover-background-attachment, var(--desktop-background-attachment, cover)))); transition: all 0.2s ease-in-out; } } @media (min-width: 320px) and (max-width: 767px) { [elType='section'] > [elType='container'] > .oe-draggable-widget[eltype="text"] { width: var(--mobile-widget-width, calc(var(--dcw) * var(--desktop-gridArea-width) * 1rem)); height: var(--mobile-widget-width, calc(var(--dcw) * var(--desktop-gridArea-height) * 1rem)); min-width: var(--mobile-widget-width, inherit); min-height: var(--mobile-widget-height, inherit); max-width: var(--mobile-widget-width, 100%); max-height: var(--mobile-widget-height, 100%); align-self: var(--mobile-justify-content, center); } .oe-draggable-widget[eltype="text"] .oe-text-widget { word-break: break-word; position: relative; padding: var(--mobile-padding, var(--tablet-padding, var(--desktop-padding, 0px))); border-width: var(--mobile-border-width, var(--tablet-border-width, var(--desktop-border-width, 0px))); border-style: var(--mobile-border-style, var(--tablet-border-style, var(--desktop-border-style, solid))); border-color: var(--mobile-border-color, var(--tablet-border-color, var(--desktop-border-color, #000000))); border-radius: var(--mobile-border-radius, var(--tablet-border-radius, var(--desktop-border-radius, 0px))); opacity: var(--mobile-opacity, var(--tablet-opacity, var(--desktop-opacity, 1))); box-shadow: var(--mobile-box-shadow, var(--tablet-box-shadow, var(--desktop-box-shadow, none))); } .oe-draggable-widget[eltype="text"] .oe-text-widget.oe-widget-inner { height: 100%; box-sizing: border-box; } .oe-draggable-widget[eltype="text"] .oe-text-widget .oe-text-content { transform: scale(var(--mobile-scale, var(--tablet-scale, var(--desktop-scale, 1)))); text-align: var(--mobile-content-text-align, var(--tablet-content-text-align, var(--desktop-content-text-align, unset))); vertical-align: var(--mobile-content-vertical-align, var(--tablet-content-vertical-align, var(--desktop-content-vertical-align, unset))); } .oe-draggable-widget[eltype="text"] .oe-text-widget .oe-text-content li::marker { /*@include buildAliasWrap(font-size, marker-font-size, $device, inherit, $prefix, $hover);*/ color: var(--mobile-marker-color, var(--tablet-marker-color, var(--desktop-marker-color, inherit))); } .oe-draggable-widget[eltype="text"] .oe-text-widget:hover:not(.nohover) { padding: var(--mobile-hover-padding, var(--mobile-padding, var(--tablet-hover-padding, var(--tablet-padding, var(--desktop-hover-padding, var(--desktop-padding, 0px)))))); border-width: var(--mobile-hover-border-width, var(--mobile-border-width, var(--tablet-hover-border-width, var(--tablet-border-width, var(--desktop-hover-border-width, var(--desktop-border-width, 0px)))))); border-style: var(--mobile-hover-border-style, var(--mobile-border-style, var(--tablet-hover-border-style, var(--tablet-border-style, var(--desktop-hover-border-style, var(--desktop-border-style, solid)))))); border-color: var(--mobile-hover-border-color, var(--mobile-border-color, var(--tablet-hover-border-color, var(--tablet-border-color, var(--desktop-hover-border-color, var(--desktop-border-color, #000000)))))); border-radius: var(--mobile-hover-border-radius, var(--mobile-border-radius, var(--tablet-hover-border-radius, var(--tablet-border-radius, var(--desktop-hover-border-radius, var(--desktop-border-radius, 0px)))))); opacity: var(--mobile-hover-opacity, var(--mobile-opacity, var(--tablet-hover-opacity, var(--tablet-opacity, var(--desktop-hover-opacity, var(--desktop-opacity, 1)))))); box-shadow: var(--mobile-hover-box-shadow, var(--mobile-box-shadow, var(--tablet-hover-box-shadow, var(--tablet-box-shadow, var(--desktop-hover-box-shadow, var(--desktop-box-shadow, none)))))); } .oe-draggable-widget[eltype="text"] .oe-text-widget:hover:not(.nohover) .oe-text-content { transform: scale(var(--mobile-hover-scale, var(--mobile-scale, var(--tablet-hover-scale, var(--tablet-scale, var(--desktop-hover-scale, var(--desktop-scale, , 1))))))); text-align: var(--mobile-hover-content-text-align, var(--mobile-content-text-align, var(--tablet-hover-content-text-align, var(--tablet-content-text-align, var(--desktop-hover-content-text-align, var(--desktop-content-text-align, unset)))))); vertical-align: var(--mobile-hover-content-vertical-align, var(--mobile-content-vertical-align, var(--tablet-hover-content-vertical-align, var(--tablet-content-vertical-align, var(--desktop-hover-content-vertical-align, var(--desktop-content-vertical-align, unset)))))); } .oe-draggable-widget[eltype="text"] .oe-text-widget:hover:not(.nohover) .oe-text-content li::marker { /*@include buildAliasWrap(font-size, marker-font-size, $device, inherit, $prefix, $hover);*/ color: var(--mobile-hover-marker-color, var(--mobile-marker-color, var(--tablet-hover-marker-color, var(--tablet-marker-color, var(--desktop-hover-marker-color, var(--desktop-marker-color, inherit)))))); } .oe-draggable-widget[eltype="text"] .oe-text-widget:hover:not(.nohover) > .oe-background { pointer-events: none; overflow: hidden; transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; } .oe-draggable-widget[eltype="text"] .oe-text-widget:hover:not(.nohover) > .oe-background * { transition: all 0.2s ease-in-out; } .oe-draggable-widget[eltype="text"] .oe-text-widget:hover:not(.nohover) > .oe-background .oe-background-fill { background-color: var(--mobile-hover-background-color, var(--mobile-background-color, var(--tablet-hover-background-color, var(--tablet-background-color, var(--desktop-hover-background-color, var(--desktop-background-color)))))); opacity: var(--mobile-hover-background-fill-opacity, var(--mobile-background-fill-opacity, var(--tablet-hover-background-fill-opacity, var(--tablet-background-fill-opacity, var(--desktop-hover-background-fill-opacity, var(--desktop-background-fill-opacity, 1)))))); transition: all 0.2s ease-in-out; --test:10; } .oe-draggable-widget[eltype="text"] .oe-text-widget:hover:not(.nohover) > .oe-background .oe-background-gradient { opacity: var(--mobile-hover-background-gradient-opacity, var(--mobile-background-gradient-opacity, var(--tablet-hover-background-gradient-opacity, var(--tablet-background-gradient-opacity, var(--desktop-hover-background-gradient-opacity, var(--desktop-background-gradient-opacity, 1)))))); background-image: var(--mobile-hover-background-gradient, var(--mobile-background-gradient, var(--tablet-hover-background-gradient, var(--tablet-background-gradient, var(--desktop-hover-background-gradient, var(--desktop-background-gradient, )))))); transition: all 0.2s ease-in-out; } .oe-draggable-widget[eltype="text"] .oe-text-widget:hover:not(.nohover) > .oe-background .oe-background-image { opacity: var(--mobile-hover-background-image-opacity, var(--mobile-background-image-opacity, var(--tablet-hover-background-image-opacity, var(--tablet-background-image-opacity, var(--desktop-hover-background-image-opacity, var(--desktop-background-image-opacity, 1)))))); background-image: var(--mobile-hover-background-image, var(--mobile-background-image, var(--tablet-hover-background-image, var(--tablet-background-image, var(--desktop-hover-background-image, var(--desktop-background-image)))))); background-repeat: var(--mobile-hover-background-repeat, var(--mobile-background-repeat, var(--tablet-hover-background-repeat, var(--tablet-background-repeat, var(--desktop-hover-background-repeat, var(--desktop-background-repeat, no-repeat)))))); background-position: var(--mobile-hover-background-position, var(--mobile-background-position, var(--tablet-hover-background-position, var(--tablet-background-position, var(--desktop-hover-background-position, var(--desktop-background-position, center center)))))); background-size: var(--mobile-hover-background-size, var(--mobile-background-size, var(--tablet-hover-background-size, var(--tablet-background-size, var(--desktop-hover-background-size, var(--desktop-background-size, cover)))))); background-attachment: var(--mobile-hover-background-attachment, var(--mobile-background-attachment, var(--tablet-hover-background-attachment, var(--tablet-background-attachment, var(--desktop-hover-background-attachment, var(--desktop-background-attachment, cover)))))); transition: all 0.2s ease-in-out; } .oe-draggable-widget[eltype="text"] .oe-text-widget:hover:not(.nohover) > .oe-background * { transition: all 0.2s ease-in-out; } .oe-draggable-widget[eltype="text"] .oe-text-widget .oe-background { pointer-events: none; overflow: hidden; transition: all 0.2s ease-in-out; } .oe-draggable-widget[eltype="text"] .oe-text-widget .oe-background * { transition: all 0.2s ease-in-out; } .oe-draggable-widget[eltype="text"] .oe-text-widget .oe-background .oe-background-fill { background-color: var(--mobile-background-color, var(--tablet-background-color, var(--desktop-background-color))); opacity: var(--mobile-background-fill-opacity, var(--tablet-background-fill-opacity, var(--desktop-background-fill-opacity, 1))); transition: all 0.2s ease-in-out; --test:10; } .oe-draggable-widget[eltype="text"] .oe-text-widget .oe-background .oe-background-gradient { opacity: var(--mobile-background-gradient-opacity, var(--tablet-background-gradient-opacity, var(--desktop-background-gradient-opacity, 1))); background-image: var(--mobile-background-gradient, var(--tablet-background-gradient, var(--desktop-background-gradient))); transition: all 0.2s ease-in-out; } .oe-draggable-widget[eltype="text"] .oe-text-widget .oe-background .oe-background-image { opacity: var(--mobile-background-image-opacity, var(--tablet-background-image-opacity, var(--desktop-background-image-opacity, 1))); background-image: var(--mobile-background-image, var(--tablet-background-image, var(--desktop-background-image))); background-repeat: var(--mobile-background-repeat, var(--tablet-background-repeat, var(--desktop-background-repeat, no-repeat))); background-position: var(--mobile-background-position, var(--tablet-background-position, var(--desktop-background-position, center center))); background-size: var(--mobile-background-size, var(--tablet-background-size, var(--desktop-background-size, cover))); background-attachment: var(--mobile-background-attachment, var(--tablet-background-attachment, var(--desktop-background-attachment, cover))); transition: all 0.2s ease-in-out; } .oe-draggable-widget[eltype="text"].hovered .oe-text-widget { padding: var(--mobile-hover-padding, var(--mobile-padding, var(--tablet-hover-padding, var(--tablet-padding, var(--desktop-hover-padding, var(--desktop-padding, 0px)))))); border-width: var(--mobile-hover-border-width, var(--mobile-border-width, var(--tablet-hover-border-width, var(--tablet-border-width, var(--desktop-hover-border-width, var(--desktop-border-width, 0px)))))); border-style: var(--mobile-hover-border-style, var(--mobile-border-style, var(--tablet-hover-border-style, var(--tablet-border-style, var(--desktop-hover-border-style, var(--desktop-border-style, solid)))))); border-color: var(--mobile-hover-border-color, var(--mobile-border-color, var(--tablet-hover-border-color, var(--tablet-border-color, var(--desktop-hover-border-color, var(--desktop-border-color, #000000)))))); border-radius: var(--mobile-hover-border-radius, var(--mobile-border-radius, var(--tablet-hover-border-radius, var(--tablet-border-radius, var(--desktop-hover-border-radius, var(--desktop-border-radius, 0px)))))); opacity: var(--mobile-hover-opacity, var(--mobile-opacity, var(--tablet-hover-opacity, var(--tablet-opacity, var(--desktop-hover-opacity, var(--desktop-opacity, 1)))))); box-shadow: var(--mobile-hover-box-shadow, var(--mobile-box-shadow, var(--tablet-hover-box-shadow, var(--tablet-box-shadow, var(--desktop-hover-box-shadow, var(--desktop-box-shadow, none)))))); } .oe-draggable-widget[eltype="text"].hovered .oe-text-widget .oe-text-content { transform: scale(var(--mobile-hover-scale, var(--mobile-scale, var(--tablet-hover-scale, var(--tablet-scale, var(--desktop-hover-scale, var(--desktop-scale, , 1))))))); text-align: var(--mobile-hover-content-text-align, var(--mobile-content-text-align, var(--tablet-hover-content-text-align, var(--tablet-content-text-align, var(--desktop-hover-content-text-align, var(--desktop-content-text-align, unset)))))); vertical-align: var(--mobile-hover-content-vertical-align, var(--mobile-content-vertical-align, var(--tablet-hover-content-vertical-align, var(--tablet-content-vertical-align, var(--desktop-hover-content-vertical-align, var(--desktop-content-vertical-align, unset)))))); } .oe-draggable-widget[eltype="text"].hovered .oe-text-widget .oe-text-content li::marker { /*@include buildAliasWrap(font-size, marker-font-size, $device, inherit, $prefix, $hover);*/ color: var(--mobile-hover-marker-color, var(--mobile-marker-color, var(--tablet-hover-marker-color, var(--tablet-marker-color, var(--desktop-hover-marker-color, var(--desktop-marker-color, inherit)))))); } .oe-draggable-widget[eltype="text"].hovered .oe-text-widget .oe-background { pointer-events: none; overflow: hidden; transition: all 0.2s ease-in-out; } .oe-draggable-widget[eltype="text"].hovered .oe-text-widget .oe-background * { transition: all 0.2s ease-in-out; } .oe-draggable-widget[eltype="text"].hovered .oe-text-widget .oe-background .oe-background-fill { background-color: var(--mobile-hover-background-color, var(--mobile-background-color, var(--tablet-hover-background-color, var(--tablet-background-color, var(--desktop-hover-background-color, var(--desktop-background-color)))))); opacity: var(--mobile-hover-background-fill-opacity, var(--mobile-background-fill-opacity, var(--tablet-hover-background-fill-opacity, var(--tablet-background-fill-opacity, var(--desktop-hover-background-fill-opacity, var(--desktop-background-fill-opacity, 1)))))); transition: all 0.2s ease-in-out; --test:10; } .oe-draggable-widget[eltype="text"].hovered .oe-text-widget .oe-background .oe-background-gradient { opacity: var(--mobile-hover-background-gradient-opacity, var(--mobile-background-gradient-opacity, var(--tablet-hover-background-gradient-opacity, var(--tablet-background-gradient-opacity, var(--desktop-hover-background-gradient-opacity, var(--desktop-background-gradient-opacity, 1)))))); background-image: var(--mobile-hover-background-gradient, var(--mobile-background-gradient, var(--tablet-hover-background-gradient, var(--tablet-background-gradient, var(--desktop-hover-background-gradient, var(--desktop-background-gradient, )))))); transition: all 0.2s ease-in-out; } .oe-draggable-widget[eltype="text"].hovered .oe-text-widget .oe-background .oe-background-image { opacity: var(--mobile-hover-background-image-opacity, var(--mobile-background-image-opacity, var(--tablet-hover-background-image-opacity, var(--tablet-background-image-opacity, var(--desktop-hover-background-image-opacity, var(--desktop-background-image-opacity, 1)))))); background-image: var(--mobile-hover-background-image, var(--mobile-background-image, var(--tablet-hover-background-image, var(--tablet-background-image, var(--desktop-hover-background-image, var(--desktop-background-image)))))); background-repeat: var(--mobile-hover-background-repeat, var(--mobile-background-repeat, var(--tablet-hover-background-repeat, var(--tablet-background-repeat, var(--desktop-hover-background-repeat, var(--desktop-background-repeat, no-repeat)))))); background-position: var(--mobile-hover-background-position, var(--mobile-background-position, var(--tablet-hover-background-position, var(--tablet-background-position, var(--desktop-hover-background-position, var(--desktop-background-position, center center)))))); background-size: var(--mobile-hover-background-size, var(--mobile-background-size, var(--tablet-hover-background-size, var(--tablet-background-size, var(--desktop-hover-background-size, var(--desktop-background-size, cover)))))); background-attachment: var(--mobile-hover-background-attachment, var(--mobile-background-attachment, var(--tablet-hover-background-attachment, var(--tablet-background-attachment, var(--desktop-hover-background-attachment, var(--desktop-background-attachment, cover)))))); transition: all 0.2s ease-in-out; } } .oe-draggable-widget[eltype="image"] .oe-image-widget { position: relative; display: block; width: 100%; height: 100%; box-sizing: border-box; overflow: hidden; align-items: var(--desktop-align-items, center); justify-content: var(--desktop-justify-content, center); opacity: var(--desktop-opacity, center); border-width: var(--desktop-border-width, 0px); border-style: var(--desktop-border-style, solid); border-color: var(--desktop-border-color, #000000); transform: scale(var(--desktop-scale, 1)); border-radius: var(--desktop-border-radius, 0px); box-shadow: var(--desktop-box-shadow, none); } .oe-draggable-widget[eltype="image"] .oe-image-widget .oe-image-link { cursor: pointer; } .oe-draggable-widget[eltype="image"] .oe-image-widget:after { box-shadow: var(--desktop-box-shadow, none); position: absolute; content: ""; top: 0; right: 0; bottom: 0; left: 0; transition: all 0.2s ease-in-out; pointer-events: none; } .oe-draggable-widget[eltype="image"] .oe-image-widget img { object-fit: var(--desktop-object-fit, contain); object-position: 50% 50%; box-sizing: border-box; position: absolute; display: block; width: 100%; height: 100%; padding: var(--desktop-padding, 0px); border-radius: var(--desktop-border-radius, 0px); } .oe-draggable-widget[eltype="image"] .oe-image-widget:hover { opacity: var(--desktop-hover-opacity, var(--desktop-opacity, center)); box-shadow: var(--desktop-hover-box-shadow, var(--desktop-box-shadow, none)); border-width: var(--desktop-hover-border-width, var(--desktop-border-width, 0px)); border-style: var(--desktop-hover-border-style, var(--desktop-border-style, solid)); border-color: var(--desktop-hover-border-color, var(--desktop-border-color, #000000)); transform: scale(var(--desktop-hover-scale, var(--desktop-scale, 1))); border-radius: var(--desktop-hover-border-radius, var(--desktop-border-radius, 0px)); box-shadow: var(--desktop-hover-box-shadow, var(--desktop-box-shadow, none)); } .oe-draggable-widget[eltype="image"] .oe-image-widget:hover:after { box-shadow: var(--desktop-hover-box-shadow, var(--desktop-box-shadow, none)); position: absolute; content: ""; top: 0; right: 0; bottom: 0; left: 0; transition: all 0.2s ease-in-out; pointer-events: none; } .oe-draggable-widget[eltype="image"] .oe-image-widget:hover img { padding: var(--desktop-hover-padding, var(--desktop-padding, 0px)); } .oe-draggable-widget[eltype="image"] .oe-image-widget:hover .oe-background { pointer-events: none; overflow: hidden; transition: all 0.2s ease-in-out; } .oe-draggable-widget[eltype="image"] .oe-image-widget:hover .oe-background * { transition: all 0.2s ease-in-out; } .oe-draggable-widget[eltype="image"] .oe-image-widget:hover .oe-background .oe-background-fill { background-color: var(--desktop-hover-background-color, var(--desktop-background-color)); opacity: var(--desktop-hover-background-fill-opacity, var(--desktop-background-fill-opacity, 1)); transition: all 0.2s ease-in-out; --test:10; } .oe-draggable-widget[eltype="image"] .oe-image-widget:hover .oe-background .oe-background-gradient { opacity: var(--desktop-hover-background-gradient-opacity, var(--desktop-background-gradient-opacity, 1)); background-image: var(--desktop-hover-background-gradient, var(--desktop-background-gradient)); transition: all 0.2s ease-in-out; } .oe-draggable-widget[eltype="image"] .oe-image-widget:hover .oe-background .oe-background-image { opacity: var(--desktop-hover-background-image-opacity, var(--desktop-background-image-opacity, 1)); background-image: var(--desktop-hover-background-image, var(--desktop-background-image)); background-repeat: var(--desktop-hover-background-repeat, var(--desktop-background-repeat, no-repeat)); background-position: var(--desktop-hover-background-position, var(--desktop-background-position, center center)); background-size: var(--desktop-hover-background-size, var(--desktop-background-size, cover)); background-attachment: var(--desktop-hover-background-attachment, var(--desktop-background-attachment, cover)); transition: all 0.2s ease-in-out; } .oe-draggable-widget[eltype="image"] .oe-image-widget .oe-background { pointer-events: none; overflow: hidden; transition: all 0.2s ease-in-out; } .oe-draggable-widget[eltype="image"] .oe-image-widget .oe-background * { transition: all 0.2s ease-in-out; } .oe-draggable-widget[eltype="image"] .oe-image-widget .oe-background .oe-background-fill { background-color: var(--desktop-background-color); opacity: var(--desktop-background-fill-opacity, 1); transition: all 0.2s ease-in-out; --test:10; } .oe-draggable-widget[eltype="image"] .oe-image-widget .oe-background .oe-background-gradient { opacity: var(--desktop-background-gradient-opacity, 1); background-image: var(--desktop-background-gradient); transition: all 0.2s ease-in-out; } .oe-draggable-widget[eltype="image"] .oe-image-widget .oe-background .oe-background-image { opacity: var(--desktop-background-image-opacity, 1); background-image: var(--desktop-background-image); background-repeat: var(--desktop-background-repeat, no-repeat); background-position: var(--desktop-background-position, center center); background-size: var(--desktop-background-size, cover); background-attachment: var(--desktop-background-attachment, cover); transition: all 0.2s ease-in-out; } .oe-draggable-widget[eltype="image"].hovered .oe-image-widget { opacity: var(--desktop-hover-opacity, var(--desktop-opacity, center)); box-shadow: var(--desktop-hover-box-shadow, var(--desktop-box-shadow, none)); border-width: var(--desktop-hover-border-width, var(--desktop-border-width, 0px)); border-style: var(--desktop-hover-border-style, var(--desktop-border-style, solid)); border-color: var(--desktop-hover-border-color, var(--desktop-border-color, #000000)); transform: scale(var(--desktop-hover-scale, var(--desktop-scale, 1))); border-radius: var(--desktop-hover-border-radius, var(--desktop-border-radius, 0px)); box-shadow: var(--desktop-hover-box-shadow, var(--desktop-box-shadow, none)); } .oe-draggable-widget[eltype="image"].hovered .oe-image-widget:after { box-shadow: var(--desktop-hover-box-shadow, var(--desktop-box-shadow, none)); position: absolute; content: ""; top: 0; right: 0; bottom: 0; left: 0; transition: all 0.2s ease-in-out; } .oe-draggable-widget[eltype="image"].hovered .oe-image-widget img { padding: var(--desktop-hover-padding, var(--desktop-padding, 0px)); } .oe-draggable-widget[eltype="image"].hovered .oe-image-widget img .oe-background { pointer-events: none; overflow: hidden; transition: all 0.2s ease-in-out; } .oe-draggable-widget[eltype="image"].hovered .oe-image-widget img .oe-background * { transition: all 0.2s ease-in-out; } .oe-draggable-widget[eltype="image"].hovered .oe-image-widget img .oe-background .oe-background-fill { background-color: var(--desktop-hover-background-color, var(--desktop-background-color)); opacity: var(--desktop-hover-background-fill-opacity, var(--desktop-background-fill-opacity, 1)); transition: all 0.2s ease-in-out; --test:10; } .oe-draggable-widget[eltype="image"].hovered .oe-image-widget img .oe-background .oe-background-gradient { opacity: var(--desktop-hover-background-gradient-opacity, var(--desktop-background-gradient-opacity, 1)); background-image: var(--desktop-hover-background-gradient, var(--desktop-background-gradient)); transition: all 0.2s ease-in-out; } .oe-draggable-widget[eltype="image"].hovered .oe-image-widget img .oe-background .oe-background-image { opacity: var(--desktop-hover-background-image-opacity, var(--desktop-background-image-opacity, 1)); background-image: var(--desktop-hover-background-image, var(--desktop-background-image)); background-repeat: var(--desktop-hover-background-repeat, var(--desktop-background-repeat, no-repeat)); background-position: var(--desktop-hover-background-position, var(--desktop-background-position, center center)); background-size: var(--desktop-hover-background-size, var(--desktop-background-size, cover)); background-attachment: var(--desktop-hover-background-attachment, var(--desktop-background-attachment, cover)); transition: all 0.2s ease-in-out; } .oe-draggable-widget[eltype="image"].hovered .oe-image-widget .oe-background { pointer-events: none; overflow: hidden; transition: all 0.2s ease-in-out; } .oe-draggable-widget[eltype="image"].hovered .oe-image-widget .oe-background * { transition: all 0.2s ease-in-out; } .oe-draggable-widget[eltype="image"].hovered .oe-image-widget .oe-background .oe-background-fill { background-color: var(--desktop-hover-background-color, var(--desktop-background-color)); opacity: var(--desktop-hover-background-fill-opacity, var(--desktop-background-fill-opacity, 1)); transition: all 0.2s ease-in-out; --test:10; } .oe-draggable-widget[eltype="image"].hovered .oe-image-widget .oe-background .oe-background-gradient { opacity: var(--desktop-hover-background-gradient-opacity, var(--desktop-background-gradient-opacity, 1)); background-image: var(--desktop-hover-background-gradient, var(--desktop-background-gradient)); transition: all 0.2s ease-in-out; } .oe-draggable-widget[eltype="image"].hovered .oe-image-widget .oe-background .oe-background-image { opacity: var(--desktop-hover-background-image-opacity, var(--desktop-background-image-opacity, 1)); background-image: var(--desktop-hover-background-image, var(--desktop-background-image)); background-repeat: var(--desktop-hover-background-repeat, var(--desktop-background-repeat, no-repeat)); background-position: var(--desktop-hover-background-position, var(--desktop-background-position, center center)); background-size: var(--desktop-hover-background-size, var(--desktop-background-size, cover)); background-attachment: var(--desktop-hover-background-attachment, var(--desktop-background-attachment, cover)); transition: all 0.2s ease-in-out; } @media (min-width: 768px) and (max-width: 1024px) { .oe-draggable-widget[eltype="image"] .oe-image-widget { position: relative; display: block; width: 100%; height: 100%; box-sizing: border-box; overflow: hidden; align-items: var(--tablet-align-items, var(--desktop-align-items, center)); justify-content: var(--tablet-justify-content, var(--desktop-justify-content, center)); opacity: var(--tablet-opacity, var(--desktop-opacity, center)); border-width: var(--tablet-border-width, var(--desktop-border-width, 0px)); border-style: var(--tablet-border-style, var(--desktop-border-style, solid)); border-color: var(--tablet-border-color, var(--desktop-border-color, #000000)); transform: scale(var(--tablet-scale, var(--desktop-scale, 1))); border-radius: var(--tablet-border-radius, var(--desktop-border-radius, 0px)); box-shadow: var(--tablet-box-shadow, var(--desktop-box-shadow, none)); } .oe-draggable-widget[eltype="image"] .oe-image-widget:after { box-shadow: var(--tablet-box-shadow, var(--desktop-box-shadow, none)); position: absolute; content: ""; top: 0; right: 0; bottom: 0; left: 0; transition: all 0.2s ease-in-out; pointer-events: none; } .oe-draggable-widget[eltype="image"] .oe-image-widget img { object-fit: var(--tablet-object-fit, var(--desktop-object-fit, contain)); object-position: 50% 50%; box-sizing: border-box; position: absolute; display: block; width: 100%; height: 100%; padding: var(--tablet-padding, var(--desktop-padding, 0px)); border-radius: var(--tablet-border-radius, var(--desktop-border-radius, 0px)); } .oe-draggable-widget[eltype="image"] .oe-image-widget:hover { opacity: var(--tablet-hover-opacity, var(--tablet-opacity, var(--desktop-hover-opacity, var(--desktop-opacity, center)))); box-shadow: var(--tablet-hover-box-shadow, var(--tablet-box-shadow, var(--desktop-hover-box-shadow, var(--desktop-box-shadow, none)))); border-width: var(--tablet-hover-border-width, var(--tablet-border-width, var(--desktop-hover-border-width, var(--desktop-border-width, 0px)))); border-style: var(--tablet-hover-border-style, var(--tablet-border-style, var(--desktop-hover-border-style, var(--desktop-border-style, solid)))); border-color: var(--tablet-hover-border-color, var(--tablet-border-color, var(--desktop-hover-border-color, var(--desktop-border-color, #000000)))); transform: scale(var(--tablet-hover-scale, var(--tablet-scale, var(--desktop-hover-scale, var(--desktop-scale, , 1))))); border-radius: var(--tablet-hover-border-radius, var(--tablet-border-radius, var(--desktop-hover-border-radius, var(--desktop-border-radius, 0px)))); box-shadow: var(--tablet-hover-box-shadow, var(--tablet-box-shadow, var(--desktop-hover-box-shadow, var(--desktop-box-shadow, none)))); } .oe-draggable-widget[eltype="image"] .oe-image-widget:hover:after { box-shadow: var(--tablet-hover-box-shadow, var(--tablet-box-shadow, var(--desktop-hover-box-shadow, var(--desktop-box-shadow, none)))); position: absolute; content: ""; top: 0; right: 0; bottom: 0; left: 0; transition: all 0.2s ease-in-out; pointer-events: none; } .oe-draggable-widget[eltype="image"] .oe-image-widget:hover img { padding: var(--tablet-hover-padding, var(--tablet-padding, var(--desktop-hover-padding, var(--desktop-padding, 0px)))); } .oe-draggable-widget[eltype="image"] .oe-image-widget:hover .oe-background { pointer-events: none; overflow: hidden; transition: all 0.2s ease-in-out; } .oe-draggable-widget[eltype="image"] .oe-image-widget:hover .oe-background * { transition: all 0.2s ease-in-out; } .oe-draggable-widget[eltype="image"] .oe-image-widget:hover .oe-background .oe-background-fill { background-color: var(--tablet-hover-background-color, var(--tablet-background-color, var(--desktop-hover-background-color, var(--desktop-background-color)))); opacity: var(--tablet-hover-background-fill-opacity, var(--tablet-background-fill-opacity, var(--desktop-hover-background-fill-opacity, var(--desktop-background-fill-opacity, 1)))); transition: all 0.2s ease-in-out; --test:10; } .oe-draggable-widget[eltype="image"] .oe-image-widget:hover .oe-background .oe-background-gradient { opacity: var(--tablet-hover-background-gradient-opacity, var(--tablet-background-gradient-opacity, var(--desktop-hover-background-gradient-opacity, var(--desktop-background-gradient-opacity, 1)))); background-image: var(--tablet-hover-background-gradient, var(--tablet-background-gradient, var(--desktop-hover-background-gradient, var(--desktop-background-gradient, )))); transition: all 0.2s ease-in-out; } .oe-draggable-widget[eltype="image"] .oe-image-widget:hover .oe-background .oe-background-image { opacity: var(--tablet-hover-background-image-opacity, var(--tablet-background-image-opacity, var(--desktop-hover-background-image-opacity, var(--desktop-background-image-opacity, 1)))); background-image: var(--tablet-hover-background-image, var(--tablet-background-image, var(--desktop-hover-background-image, var(--desktop-background-image)))); background-repeat: var(--tablet-hover-background-repeat, var(--tablet-background-repeat, var(--desktop-hover-background-repeat, var(--desktop-background-repeat, no-repeat)))); background-position: var(--tablet-hover-background-position, var(--tablet-background-position, var(--desktop-hover-background-position, var(--desktop-background-position, center center)))); background-size: var(--tablet-hover-background-size, var(--tablet-background-size, var(--desktop-hover-background-size, var(--desktop-background-size, cover)))); background-attachment: var(--tablet-hover-background-attachment, var(--tablet-background-attachment, var(--desktop-hover-background-attachment, var(--desktop-background-attachment, cover)))); transition: all 0.2s ease-in-out; } .oe-draggable-widget[eltype="image"] .oe-image-widget .oe-background { pointer-events: none; overflow: hidden; transition: all 0.2s ease-in-out; } .oe-draggable-widget[eltype="image"] .oe-image-widget .oe-background * { transition: all 0.2s ease-in-out; } .oe-draggable-widget[eltype="image"] .oe-image-widget .oe-background .oe-background-fill { background-color: var(--tablet-background-color, var(--desktop-background-color)); opacity: var(--tablet-background-fill-opacity, var(--desktop-background-fill-opacity, 1)); transition: all 0.2s ease-in-out; --test:10; } .oe-draggable-widget[eltype="image"] .oe-image-widget .oe-background .oe-background-gradient { opacity: var(--tablet-background-gradient-opacity, var(--desktop-background-gradient-opacity, 1)); background-image: var(--tablet-background-gradient, var(--desktop-background-gradient)); transition: all 0.2s ease-in-out; } .oe-draggable-widget[eltype="image"] .oe-image-widget .oe-background .oe-background-image { opacity: var(--tablet-background-image-opacity, var(--desktop-background-image-opacity, 1)); background-image: var(--tablet-background-image, var(--desktop-background-image)); background-repeat: var(--tablet-background-repeat, var(--desktop-background-repeat, no-repeat)); background-position: var(--tablet-background-position, var(--desktop-background-position, center center)); background-size: var(--tablet-background-size, var(--desktop-background-size, cover)); background-attachment: var(--tablet-background-attachment, var(--desktop-background-attachment, cover)); transition: all 0.2s ease-in-out; } .oe-draggable-widget[eltype="image"].hovered .oe-image-widget { opacity: var(--tablet-hover-opacity, var(--tablet-opacity, var(--desktop-hover-opacity, var(--desktop-opacity, center)))); box-shadow: var(--tablet-hover-box-shadow, var(--tablet-box-shadow, var(--desktop-hover-box-shadow, var(--desktop-box-shadow, none)))); border-width: var(--tablet-hover-border-width, var(--tablet-border-width, var(--desktop-hover-border-width, var(--desktop-border-width, 0px)))); border-style: var(--tablet-hover-border-style, var(--tablet-border-style, var(--desktop-hover-border-style, var(--desktop-border-style, solid)))); border-color: var(--tablet-hover-border-color, var(--tablet-border-color, var(--desktop-hover-border-color, var(--desktop-border-color, #000000)))); transform: scale(var(--tablet-hover-scale, var(--tablet-scale, var(--desktop-hover-scale, var(--desktop-scale, , 1))))); border-radius: var(--tablet-hover-border-radius, var(--tablet-border-radius, var(--desktop-hover-border-radius, var(--desktop-border-radius, 0px)))); box-shadow: var(--tablet-hover-box-shadow, var(--tablet-box-shadow, var(--desktop-hover-box-shadow, var(--desktop-box-shadow, none)))); } .oe-draggable-widget[eltype="image"].hovered .oe-image-widget:after { box-shadow: var(--tablet-hover-box-shadow, var(--tablet-box-shadow, var(--desktop-hover-box-shadow, var(--desktop-box-shadow, none)))); position: absolute; content: ""; top: 0; right: 0; bottom: 0; left: 0; transition: all 0.2s ease-in-out; } .oe-draggable-widget[eltype="image"].hovered .oe-image-widget img { padding: var(--tablet-hover-padding, var(--tablet-padding, var(--desktop-hover-padding, var(--desktop-padding, 0px)))); } .oe-draggable-widget[eltype="image"].hovered .oe-image-widget img .oe-background { pointer-events: none; overflow: hidden; transition: all 0.2s ease-in-out; } .oe-draggable-widget[eltype="image"].hovered .oe-image-widget img .oe-background * { transition: all 0.2s ease-in-out; } .oe-draggable-widget[eltype="image"].hovered .oe-image-widget img .oe-background .oe-background-fill { background-color: var(--tablet-hover-background-color, var(--tablet-background-color, var(--desktop-hover-background-color, var(--desktop-background-color)))); opacity: var(--tablet-hover-background-fill-opacity, var(--tablet-background-fill-opacity, var(--desktop-hover-background-fill-opacity, var(--desktop-background-fill-opacity, 1)))); transition: all 0.2s ease-in-out; --test:10; } .oe-draggable-widget[eltype="image"].hovered .oe-image-widget img .oe-background .oe-background-gradient { opacity: var(--tablet-hover-background-gradient-opacity, var(--tablet-background-gradient-opacity, var(--desktop-hover-background-gradient-opacity, var(--desktop-background-gradient-opacity, 1)))); background-image: var(--tablet-hover-background-gradient, var(--tablet-background-gradient, var(--desktop-hover-background-gradient, var(--desktop-background-gradient, )))); transition: all 0.2s ease-in-out; } .oe-draggable-widget[eltype="image"].hovered .oe-image-widget img .oe-background .oe-background-image { opacity: var(--tablet-hover-background-image-opacity, var(--tablet-background-image-opacity, var(--desktop-hover-background-image-opacity, var(--desktop-background-image-opacity, 1)))); background-image: var(--tablet-hover-background-image, var(--tablet-background-image, var(--desktop-hover-background-image, var(--desktop-background-image)))); background-repeat: var(--tablet-hover-background-repeat, var(--tablet-background-repeat, var(--desktop-hover-background-repeat, var(--desktop-background-repeat, no-repeat)))); background-position: var(--tablet-hover-background-position, var(--tablet-background-position, var(--desktop-hover-background-position, var(--desktop-background-position, center center)))); background-size: var(--tablet-hover-background-size, var(--tablet-background-size, var(--desktop-hover-background-size, var(--desktop-background-size, cover)))); background-attachment: var(--tablet-hover-background-attachment, var(--tablet-background-attachment, var(--desktop-hover-background-attachment, var(--desktop-background-attachment, cover)))); transition: all 0.2s ease-in-out; } .oe-draggable-widget[eltype="image"].hovered .oe-image-widget .oe-background { pointer-events: none; overflow: hidden; transition: all 0.2s ease-in-out; } .oe-draggable-widget[eltype="image"].hovered .oe-image-widget .oe-background * { transition: all 0.2s ease-in-out; } .oe-draggable-widget[eltype="image"].hovered .oe-image-widget .oe-background .oe-background-fill { background-color: var(--tablet-hover-background-color, var(--tablet-background-color, var(--desktop-hover-background-color, var(--desktop-background-color)))); opacity: var(--tablet-hover-background-fill-opacity, var(--tablet-background-fill-opacity, var(--desktop-hover-background-fill-opacity, var(--desktop-background-fill-opacity, 1)))); transition: all 0.2s ease-in-out; --test:10; } .oe-draggable-widget[eltype="image"].hovered .oe-image-widget .oe-background .oe-background-gradient { opacity: var(--tablet-hover-background-gradient-opacity, var(--tablet-background-gradient-opacity, var(--desktop-hover-background-gradient-opacity, var(--desktop-background-gradient-opacity, 1)))); background-image: var(--tablet-hover-background-gradient, var(--tablet-background-gradient, var(--desktop-hover-background-gradient, var(--desktop-background-gradient, )))); transition: all 0.2s ease-in-out; } .oe-draggable-widget[eltype="image"].hovered .oe-image-widget .oe-background .oe-background-image { opacity: var(--tablet-hover-background-image-opacity, var(--tablet-background-image-opacity, var(--desktop-hover-background-image-opacity, var(--desktop-background-image-opacity, 1)))); background-image: var(--tablet-hover-background-image, var(--tablet-background-image, var(--desktop-hover-background-image, var(--desktop-background-image)))); background-repeat: var(--tablet-hover-background-repeat, var(--tablet-background-repeat, var(--desktop-hover-background-repeat, var(--desktop-background-repeat, no-repeat)))); background-position: var(--tablet-hover-background-position, var(--tablet-background-position, var(--desktop-hover-background-position, var(--desktop-background-position, center center)))); background-size: var(--tablet-hover-background-size, var(--tablet-background-size, var(--desktop-hover-background-size, var(--desktop-background-size, cover)))); background-attachment: var(--tablet-hover-background-attachment, var(--tablet-background-attachment, var(--desktop-hover-background-attachment, var(--desktop-background-attachment, cover)))); transition: all 0.2s ease-in-out; } } @media (min-width: 320px) and (max-width: 767px) { [elType='section'] > [elType='container'] > .oe-draggable-widget[eltype="image"] { width: var(--mobile-widget-width, calc(var(--dcw) * var(--desktop-gridArea-width) * 1rem)) !important; height: var(--mobile-widget-width, calc(var(--dcw) * var(--desktop-gridArea-height) * 1rem)) !important; min-width: var(--mobile-widget-width, inherit); min-height: var(--mobile-widget-height, inherit); max-width: var(--mobile-widget-width, 100%); max-height: var(--mobile-widget-height, 100%); align-self: var(--mobile-justify-content, center); } .oe-draggable-widget[eltype="image"] .oe-image-widget { position: relative; display: block; width: 100%; height: 100%; box-sizing: border-box; overflow: hidden; align-items: var(--mobile-align-items, var(--tablet-align-items, var(--desktop-align-items, center))); justify-content: var(--mobile-justify-content, var(--tablet-justify-content, var(--desktop-justify-content, center))); opacity: var(--mobile-opacity, var(--tablet-opacity, var(--desktop-opacity, center))); border-width: var(--mobile-border-width, var(--tablet-border-width, var(--desktop-border-width, 0px))); border-style: var(--mobile-border-style, var(--tablet-border-style, var(--desktop-border-style, solid))); border-color: var(--mobile-border-color, var(--tablet-border-color, var(--desktop-border-color, #000000))); transform: scale(var(--mobile-scale, var(--tablet-scale, var(--desktop-scale, 1)))); border-radius: var(--mobile-border-radius, var(--tablet-border-radius, var(--desktop-border-radius, 0px))); box-shadow: var(--mobile-box-shadow, var(--tablet-box-shadow, var(--desktop-box-shadow, none))); } .oe-draggable-widget[eltype="image"] .oe-image-widget:after { box-shadow: var(--mobile-box-shadow, var(--tablet-box-shadow, var(--desktop-box-shadow, none))); position: absolute; content: ""; top: 0; right: 0; bottom: 0; left: 0; transition: all 0.2s ease-in-out; pointer-events: none; } .oe-draggable-widget[eltype="image"] .oe-image-widget img { object-fit: var(--mobile-object-fit, var(--tablet-object-fit, var(--desktop-object-fit, contain))); object-position: 50% 50%; box-sizing: border-box; position: absolute; display: block; width: 100%; height: 100%; padding: var(--mobile-padding, var(--tablet-padding, var(--desktop-padding, 0px))); border-radius: var(--mobile-border-radius, var(--tablet-border-radius, var(--desktop-border-radius, 0px))); } .oe-draggable-widget[eltype="image"] .oe-image-widget:hover { opacity: var(--mobile-hover-opacity, var(--mobile-opacity, var(--tablet-hover-opacity, var(--tablet-opacity, var(--desktop-hover-opacity, var(--desktop-opacity, center)))))); box-shadow: var(--mobile-hover-box-shadow, var(--mobile-box-shadow, var(--tablet-hover-box-shadow, var(--tablet-box-shadow, var(--desktop-hover-box-shadow, var(--desktop-box-shadow, none)))))); border-width: var(--mobile-hover-border-width, var(--mobile-border-width, var(--tablet-hover-border-width, var(--tablet-border-width, var(--desktop-hover-border-width, var(--desktop-border-width, 0px)))))); border-style: var(--mobile-hover-border-style, var(--mobile-border-style, var(--tablet-hover-border-style, var(--tablet-border-style, var(--desktop-hover-border-style, var(--desktop-border-style, solid)))))); border-color: var(--mobile-hover-border-color, var(--mobile-border-color, var(--tablet-hover-border-color, var(--tablet-border-color, var(--desktop-hover-border-color, var(--desktop-border-color, #000000)))))); transform: scale(var(--mobile-hover-scale, var(--mobile-scale, var(--tablet-hover-scale, var(--tablet-scale, var(--desktop-hover-scale, var(--desktop-scale, , 1))))))); border-radius: var(--mobile-hover-border-radius, var(--mobile-border-radius, var(--tablet-hover-border-radius, var(--tablet-border-radius, var(--desktop-hover-border-radius, var(--desktop-border-radius, 0px)))))); box-shadow: var(--mobile-hover-box-shadow, var(--mobile-box-shadow, var(--tablet-hover-box-shadow, var(--tablet-box-shadow, var(--desktop-hover-box-shadow, var(--desktop-box-shadow, none)))))); } .oe-draggable-widget[eltype="image"] .oe-image-widget:hover:after { box-shadow: var(--mobile-hover-box-shadow, var(--mobile-box-shadow, var(--tablet-hover-box-shadow, var(--tablet-box-shadow, var(--desktop-hover-box-shadow, var(--desktop-box-shadow, none)))))); position: absolute; content: ""; top: 0; right: 0; bottom: 0; left: 0; transition: all 0.2s ease-in-out; pointer-events: none; } .oe-draggable-widget[eltype="image"] .oe-image-widget:hover img { padding: var(--mobile-hover-padding, var(--mobile-padding, var(--tablet-hover-padding, var(--tablet-padding, var(--desktop-hover-padding, var(--desktop-padding, 0px)))))); } .oe-draggable-widget[eltype="image"] .oe-image-widget:hover .oe-background { pointer-events: none; overflow: hidden; transition: all 0.2s ease-in-out; } .oe-draggable-widget[eltype="image"] .oe-image-widget:hover .oe-background * { transition: all 0.2s ease-in-out; } .oe-draggable-widget[eltype="image"] .oe-image-widget:hover .oe-background .oe-background-fill { background-color: var(--mobile-hover-background-color, var(--mobile-background-color, var(--tablet-hover-background-color, var(--tablet-background-color, var(--desktop-hover-background-color, var(--desktop-background-color)))))); opacity: var(--mobile-hover-background-fill-opacity, var(--mobile-background-fill-opacity, var(--tablet-hover-background-fill-opacity, var(--tablet-background-fill-opacity, var(--desktop-hover-background-fill-opacity, var(--desktop-background-fill-opacity, 1)))))); transition: all 0.2s ease-in-out; --test:10; } .oe-draggable-widget[eltype="image"] .oe-image-widget:hover .oe-background .oe-background-gradient { opacity: var(--mobile-hover-background-gradient-opacity, var(--mobile-background-gradient-opacity, var(--tablet-hover-background-gradient-opacity, var(--tablet-background-gradient-opacity, var(--desktop-hover-background-gradient-opacity, var(--desktop-background-gradient-opacity, 1)))))); background-image: var(--mobile-hover-background-gradient, var(--mobile-background-gradient, var(--tablet-hover-background-gradient, var(--tablet-background-gradient, var(--desktop-hover-background-gradient, var(--desktop-background-gradient, )))))); transition: all 0.2s ease-in-out; } .oe-draggable-widget[eltype="image"] .oe-image-widget:hover .oe-background .oe-background-image { opacity: var(--mobile-hover-background-image-opacity, var(--mobile-background-image-opacity, var(--tablet-hover-background-image-opacity, var(--tablet-background-image-opacity, var(--desktop-hover-background-image-opacity, var(--desktop-background-image-opacity, 1)))))); background-image: var(--mobile-hover-background-image, var(--mobile-background-image, var(--tablet-hover-background-image, var(--tablet-background-image, var(--desktop-hover-background-image, var(--desktop-background-image)))))); background-repeat: var(--mobile-hover-background-repeat, var(--mobile-background-repeat, var(--tablet-hover-background-repeat, var(--tablet-background-repeat, var(--desktop-hover-background-repeat, var(--desktop-background-repeat, no-repeat)))))); background-position: var(--mobile-hover-background-position, var(--mobile-background-position, var(--tablet-hover-background-position, var(--tablet-background-position, var(--desktop-hover-background-position, var(--desktop-background-position, center center)))))); background-size: var(--mobile-hover-background-size, var(--mobile-background-size, var(--tablet-hover-background-size, var(--tablet-background-size, var(--desktop-hover-background-size, var(--desktop-background-size, cover)))))); background-attachment: var(--mobile-hover-background-attachment, var(--mobile-background-attachment, var(--tablet-hover-background-attachment, var(--tablet-background-attachment, var(--desktop-hover-background-attachment, var(--desktop-background-attachment, cover)))))); transition: all 0.2s ease-in-out; } .oe-draggable-widget[eltype="image"] .oe-image-widget .oe-background { pointer-events: none; overflow: hidden; transition: all 0.2s ease-in-out; } .oe-draggable-widget[eltype="image"] .oe-image-widget .oe-background * { transition: all 0.2s ease-in-out; } .oe-draggable-widget[eltype="image"] .oe-image-widget .oe-background .oe-background-fill { background-color: var(--mobile-background-color, var(--tablet-background-color, var(--desktop-background-color))); opacity: var(--mobile-background-fill-opacity, var(--tablet-background-fill-opacity, var(--desktop-background-fill-opacity, 1))); transition: all 0.2s ease-in-out; --test:10; } .oe-draggable-widget[eltype="image"] .oe-image-widget .oe-background .oe-background-gradient { opacity: var(--mobile-background-gradient-opacity, var(--tablet-background-gradient-opacity, var(--desktop-background-gradient-opacity, 1))); background-image: var(--mobile-background-gradient, var(--tablet-background-gradient, var(--desktop-background-gradient))); transition: all 0.2s ease-in-out; } .oe-draggable-widget[eltype="image"] .oe-image-widget .oe-background .oe-background-image { opacity: var(--mobile-background-image-opacity, var(--tablet-background-image-opacity, var(--desktop-background-image-opacity, 1))); background-image: var(--mobile-background-image, var(--tablet-background-image, var(--desktop-background-image))); background-repeat: var(--mobile-background-repeat, var(--tablet-background-repeat, var(--desktop-background-repeat, no-repeat))); background-position: var(--mobile-background-position, var(--tablet-background-position, var(--desktop-background-position, center center))); background-size: var(--mobile-background-size, var(--tablet-background-size, var(--desktop-background-size, cover))); background-attachment: var(--mobile-background-attachment, var(--tablet-background-attachment, var(--desktop-background-attachment, cover))); transition: all 0.2s ease-in-out; } .oe-draggable-widget[eltype="image"].hovered .oe-image-widget { opacity: var(--mobile-hover-opacity, var(--mobile-opacity, var(--tablet-hover-opacity, var(--tablet-opacity, var(--desktop-hover-opacity, var(--desktop-opacity, center)))))); box-shadow: var(--mobile-hover-box-shadow, var(--mobile-box-shadow, var(--tablet-hover-box-shadow, var(--tablet-box-shadow, var(--desktop-hover-box-shadow, var(--desktop-box-shadow, none)))))); border-width: var(--mobile-hover-border-width, var(--mobile-border-width, var(--tablet-hover-border-width, var(--tablet-border-width, var(--desktop-hover-border-width, var(--desktop-border-width, 0px)))))); border-style: var(--mobile-hover-border-style, var(--mobile-border-style, var(--tablet-hover-border-style, var(--tablet-border-style, var(--desktop-hover-border-style, var(--desktop-border-style, solid)))))); border-color: var(--mobile-hover-border-color, var(--mobile-border-color, var(--tablet-hover-border-color, var(--tablet-border-color, var(--desktop-hover-border-color, var(--desktop-border-color, #000000)))))); transform: scale(var(--mobile-hover-scale, var(--mobile-scale, var(--tablet-hover-scale, var(--tablet-scale, var(--desktop-hover-scale, var(--desktop-scale, , 1))))))); border-radius: var(--mobile-hover-border-radius, var(--mobile-border-radius, var(--tablet-hover-border-radius, var(--tablet-border-radius, var(--desktop-hover-border-radius, var(--desktop-border-radius, 0px)))))); box-shadow: var(--mobile-hover-box-shadow, var(--mobile-box-shadow, var(--tablet-hover-box-shadow, var(--tablet-box-shadow, var(--desktop-hover-box-shadow, var(--desktop-box-shadow, none)))))); } .oe-draggable-widget[eltype="image"].hovered .oe-image-widget:after { box-shadow: var(--mobile-hover-box-shadow, var(--mobile-box-shadow, var(--tablet-hover-box-shadow, var(--tablet-box-shadow, var(--desktop-hover-box-shadow, var(--desktop-box-shadow, none)))))); position: absolute; content: ""; top: 0; right: 0; bottom: 0; left: 0; transition: all 0.2s ease-in-out; } .oe-draggable-widget[eltype="image"].hovered .oe-image-widget img { padding: var(--mobile-hover-padding, var(--mobile-padding, var(--tablet-hover-padding, var(--tablet-padding, var(--desktop-hover-padding, var(--desktop-padding, 0px)))))); } .oe-draggable-widget[eltype="image"].hovered .oe-image-widget img .oe-background { pointer-events: none; overflow: hidden; transition: all 0.2s ease-in-out; } .oe-draggable-widget[eltype="image"].hovered .oe-image-widget img .oe-background * { transition: all 0.2s ease-in-out; } .oe-draggable-widget[eltype="image"].hovered .oe-image-widget img .oe-background .oe-background-fill { background-color: var(--mobile-hover-background-color, var(--mobile-background-color, var(--tablet-hover-background-color, var(--tablet-background-color, var(--desktop-hover-background-color, var(--desktop-background-color)))))); opacity: var(--mobile-hover-background-fill-opacity, var(--mobile-background-fill-opacity, var(--tablet-hover-background-fill-opacity, var(--tablet-background-fill-opacity, var(--desktop-hover-background-fill-opacity, var(--desktop-background-fill-opacity, 1)))))); transition: all 0.2s ease-in-out; --test:10; } .oe-draggable-widget[eltype="image"].hovered .oe-image-widget img .oe-background .oe-background-gradient { opacity: var(--mobile-hover-background-gradient-opacity, var(--mobile-background-gradient-opacity, var(--tablet-hover-background-gradient-opacity, var(--tablet-background-gradient-opacity, var(--desktop-hover-background-gradient-opacity, var(--desktop-background-gradient-opacity, 1)))))); background-image: var(--mobile-hover-background-gradient, var(--mobile-background-gradient, var(--tablet-hover-background-gradient, var(--tablet-background-gradient, var(--desktop-hover-background-gradient, var(--desktop-background-gradient, )))))); transition: all 0.2s ease-in-out; } .oe-draggable-widget[eltype="image"].hovered .oe-image-widget img .oe-background .oe-background-image { opacity: var(--mobile-hover-background-image-opacity, var(--mobile-background-image-opacity, var(--tablet-hover-background-image-opacity, var(--tablet-background-image-opacity, var(--desktop-hover-background-image-opacity, var(--desktop-background-image-opacity, 1)))))); background-image: var(--mobile-hover-background-image, var(--mobile-background-image, var(--tablet-hover-background-image, var(--tablet-background-image, var(--desktop-hover-background-image, var(--desktop-background-image)))))); background-repeat: var(--mobile-hover-background-repeat, var(--mobile-background-repeat, var(--tablet-hover-background-repeat, var(--tablet-background-repeat, var(--desktop-hover-background-repeat, var(--desktop-background-repeat, no-repeat)))))); background-position: var(--mobile-hover-background-position, var(--mobile-background-position, var(--tablet-hover-background-position, var(--tablet-background-position, var(--desktop-hover-background-position, var(--desktop-background-position, center center)))))); background-size: var(--mobile-hover-background-size, var(--mobile-background-size, var(--tablet-hover-background-size, var(--tablet-background-size, var(--desktop-hover-background-size, var(--desktop-background-size, cover)))))); background-attachment: var(--mobile-hover-background-attachment, var(--mobile-background-attachment, var(--tablet-hover-background-attachment, var(--tablet-background-attachment, var(--desktop-hover-background-attachment, var(--desktop-background-attachment, cover)))))); transition: all 0.2s ease-in-out; } .oe-draggable-widget[eltype="image"].hovered .oe-image-widget .oe-background { pointer-events: none; overflow: hidden; transition: all 0.2s ease-in-out; } .oe-draggable-widget[eltype="image"].hovered .oe-image-widget .oe-background * { transition: all 0.2s ease-in-out; } .oe-draggable-widget[eltype="image"].hovered .oe-image-widget .oe-background .oe-background-fill { background-color: var(--mobile-hover-background-color, var(--mobile-background-color, var(--tablet-hover-background-color, var(--tablet-background-color, var(--desktop-hover-background-color, var(--desktop-background-color)))))); opacity: var(--mobile-hover-background-fill-opacity, var(--mobile-background-fill-opacity, var(--tablet-hover-background-fill-opacity, var(--tablet-background-fill-opacity, var(--desktop-hover-background-fill-opacity, var(--desktop-background-fill-opacity, 1)))))); transition: all 0.2s ease-in-out; --test:10; } .oe-draggable-widget[eltype="image"].hovered .oe-image-widget .oe-background .oe-background-gradient { opacity: var(--mobile-hover-background-gradient-opacity, var(--mobile-background-gradient-opacity, var(--tablet-hover-background-gradient-opacity, var(--tablet-background-gradient-opacity, var(--desktop-hover-background-gradient-opacity, var(--desktop-background-gradient-opacity, 1)))))); background-image: var(--mobile-hover-background-gradient, var(--mobile-background-gradient, var(--tablet-hover-background-gradient, var(--tablet-background-gradient, var(--desktop-hover-background-gradient, var(--desktop-background-gradient, )))))); transition: all 0.2s ease-in-out; } .oe-draggable-widget[eltype="image"].hovered .oe-image-widget .oe-background .oe-background-image { opacity: var(--mobile-hover-background-image-opacity, var(--mobile-background-image-opacity, var(--tablet-hover-background-image-opacity, var(--tablet-background-image-opacity, var(--desktop-hover-background-image-opacity, var(--desktop-background-image-opacity, 1)))))); background-image: var(--mobile-hover-background-image, var(--mobile-background-image, var(--tablet-hover-background-image, var(--tablet-background-image, var(--desktop-hover-background-image, var(--desktop-background-image)))))); background-repeat: var(--mobile-hover-background-repeat, var(--mobile-background-repeat, var(--tablet-hover-background-repeat, var(--tablet-background-repeat, var(--desktop-hover-background-repeat, var(--desktop-background-repeat, no-repeat)))))); background-position: var(--mobile-hover-background-position, var(--mobile-background-position, var(--tablet-hover-background-position, var(--tablet-background-position, var(--desktop-hover-background-position, var(--desktop-background-position, center center)))))); background-size: var(--mobile-hover-background-size, var(--mobile-background-size, var(--tablet-hover-background-size, var(--tablet-background-size, var(--desktop-hover-background-size, var(--desktop-background-size, cover)))))); background-attachment: var(--mobile-hover-background-attachment, var(--mobile-background-attachment, var(--tablet-hover-background-attachment, var(--tablet-background-attachment, var(--desktop-hover-background-attachment, var(--desktop-background-attachment, cover)))))); transition: all 0.2s ease-in-out; } } .oe-draggable-widget[eltype="button"] .oe-button-widget { width: 100%; height: 100%; align-items: var(--desktop-align-items, center); justify-content: var(--desktop-justify-content, center); } .oe-draggable-widget[eltype="button"] .oe-button-widget .oe-button { box-sizing: border-box; max-height: 100%; max-width: 100%; display: flex; align-items: center; justify-content: center; position: relative; cursor: pointer; text-decoration: none; color: var(--desktop-color, var(--default-button-color)); padding: var(--desktop-padding, var(--default-button-padding)); border-width: var(--desktop-border-width, var(--default-button-border-width)); border-style: var(--desktop-border-style, var(--default-button-border-style)); border-color: var(--desktop-border-color, var(--default-button-border-color)); border-radius: var(--desktop-border-radius, var(--default-button-border-radius)); font-size: var(--desktop-font-size, var(--default-button-font-size)); opacity: var(--desktop-opacity, 1); box-shadow: var(--desktop-box-shadow); font-family: var(--desktop-font-family, var(--default-button-font-family)); font-weight: var(--desktop-font-weight, var(--default-button-font-weight)); width: var(--desktop-width, auto); height: var(--desktop-height, auto); transform: scale(var(--desktop-scale, 1)); overflow: hidden; } .oe-draggable-widget[eltype="button"] .oe-button-widget .oe-button .oe-button-html { position: relative; text-align: var(--desktop-label-text-align, center); vertical-align: var(--desktop-label-vertical-align, middle); } .oe-draggable-widget[eltype="button"] .oe-button-widget .oe-button:hover { color: var(--desktop-hover-color, var(--desktop-color, var(--default-button-color))); padding: var(--desktop-hover-padding, var(--desktop-padding, var(--default-button-padding))); border-width: var(--desktop-hover-border-width, var(--desktop-border-width, var(--default-button-border-width))); border-style: var(--desktop-hover-border-style, var(--desktop-border-style, var(--default-button-border-style))); border-color: var(--desktop-hover-border-color, var(--desktop-border-color, var(--default-button-border-color))); border-radius: var(--desktop-hover-border-radius, var(--desktop-border-radius, var(--default-button-border-radius))); font-size: var(--desktop-hover-font-size, var(--desktop-font-size, var(--default-button-font-size))); opacity: var(--desktop-hover-opacity, var(--desktop-opacity, 1)); box-shadow: var(--desktop-hover-box-shadow, var(--desktop-box-shadow)); font-family: var(--desktop-hover-font-family, var(--desktop-font-family, var(--default-button-font-family))); font-weight: var(--desktop-hover-font-weight, var(--desktop-font-weight, var(--default-button-font-weight))); width: var(--desktop-hover-width, var(--desktop-width, auto)); height: var(--desktop-hover-height, var(--desktop-height, auto)); transform: scale(var(--desktop-hover-scale, var(--desktop-scale, 1))); } .oe-draggable-widget[eltype="button"] .oe-button-widget .oe-button:hover .oe-background { pointer-events: none; overflow: hidden; transition: all 0.2s ease-in-out; } .oe-draggable-widget[eltype="button"] .oe-button-widget .oe-button:hover .oe-background:after { box-shadow: var(--desktop-hover-box-shadow, var(--desktop-box-shadow)); } .oe-draggable-widget[eltype="button"] .oe-button-widget .oe-button:hover .oe-background * { transition: all 0.2s ease-in-out; } .oe-draggable-widget[eltype="button"] .oe-button-widget .oe-button:hover .oe-background .oe-background-fill { background-color: var(--desktop-hover-background-color, var(--desktop-background-color, var(--default-button-background-color))); opacity: var(--desktop-hover-background-fill-opacity, var(--desktop-background-fill-opacity, 1)); transition: all 0.2s ease-in-out; --test:10; } .oe-draggable-widget[eltype="button"] .oe-button-widget .oe-button:hover .oe-background .oe-background-gradient { opacity: var(--desktop-hover-background-gradient-opacity, var(--desktop-background-gradient-opacity, 1)); background-image: var(--desktop-hover-background-gradient, var(--desktop-background-gradient)); transition: all 0.2s ease-in-out; } .oe-draggable-widget[eltype="button"] .oe-button-widget .oe-button:hover .oe-background .oe-background-image { opacity: var(--desktop-hover-background-image-opacity, var(--desktop-background-image-opacity, 1)); background-image: var(--desktop-hover-background-image, var(--desktop-background-image)); background-repeat: var(--desktop-hover-background-repeat, var(--desktop-background-repeat, no-repeat)); background-position: var(--desktop-hover-background-position, var(--desktop-background-position, center center)); background-size: var(--desktop-hover-background-size, var(--desktop-background-size, cover)); background-attachment: var(--desktop-hover-background-attachment, var(--desktop-background-attachment, cover)); transition: all 0.2s ease-in-out; } .oe-draggable-widget[eltype="button"] .oe-button-widget .oe-button:hover .oe-background .oe-background-gradient { color: red; } .oe-draggable-widget[eltype="button"] .oe-button-widget .oe-button .oe-background { pointer-events: none; overflow: hidden; transition: all 0.2s ease-in-out; } .oe-draggable-widget[eltype="button"] .oe-button-widget .oe-button .oe-background:after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 1; box-shadow: var(--desktop-box-shadow); } .oe-draggable-widget[eltype="button"] .oe-button-widget .oe-button .oe-background * { transition: all 0.2s ease-in-out; } .oe-draggable-widget[eltype="button"] .oe-button-widget .oe-button .oe-background .oe-background-fill { background-color: var(--desktop-background-color, var(--default-button-background-color)); opacity: var(--desktop-background-fill-opacity, 1); transition: all 0.2s ease-in-out; --test:10; } .oe-draggable-widget[eltype="button"] .oe-button-widget .oe-button .oe-background .oe-background-gradient { opacity: var(--desktop-background-gradient-opacity, 1); background-image: var(--desktop-background-gradient); transition: all 0.2s ease-in-out; } .oe-draggable-widget[eltype="button"] .oe-button-widget .oe-button .oe-background .oe-background-image { opacity: var(--desktop-background-image-opacity, 1); background-image: var(--desktop-background-image); background-repeat: var(--desktop-background-repeat, no-repeat); background-position: var(--desktop-background-position, center center); background-size: var(--desktop-background-size, cover); background-attachment: var(--desktop-background-attachment, cover); transition: all 0.2s ease-in-out; } .oe-draggable-widget[eltype="button"] .oe-button-widget .oe-button .oe-background .oe-background-gradient { background-image: var(--desktop-background-gradient, var(--default-button-gradient)); color: red; } .oe-draggable-widget.hovered .oe-button-widget .oe-button { color: var(--desktop-hover-color, var(--desktop-color, var(--default-button-color))); padding: var(--desktop-hover-padding, var(--desktop-padding, var(--default-button-padding))); border-width: var(--desktop-hover-border-width, var(--desktop-border-width, var(--default-button-border-width))); border-style: var(--desktop-hover-border-style, var(--desktop-border-style, var(--default-button-border-style))); border-color: var(--desktop-hover-border-color, var(--desktop-border-color, var(--default-button-border-color))); border-radius: var(--desktop-hover-border-radius, var(--desktop-border-radius, var(--default-button-border-radius))); font-size: var(--desktop-hover-font-size, var(--desktop-font-size, var(--default-button-font-size))); opacity: var(--desktop-hover-opacity, var(--desktop-opacity, 1)); box-shadow: var(--desktop-hover-box-shadow, var(--desktop-box-shadow)); font-family: var(--desktop-hover-font-family, var(--desktop-font-family, var(--default-button-font-family))); font-weight: var(--desktop-hover-font-weight, var(--desktop-font-weight, var(--default-button-font-weight))); width: var(--desktop-hover-width, var(--desktop-width, auto)); height: var(--desktop-hover-height, var(--desktop-height, auto)); transform: scale(var(--desktop-hover-scale, var(--desktop-scale, 1))); } .oe-draggable-widget.hovered .oe-button-widget .oe-button .oe-background { pointer-events: none; overflow: hidden; transition: all 0.2s ease-in-out; } .oe-draggable-widget.hovered .oe-button-widget .oe-button .oe-background:after { box-shadow: var(--desktop-hover-box-shadow, var(--desktop-box-shadow)); } .oe-draggable-widget.hovered .oe-button-widget .oe-button .oe-background * { transition: all 0.2s ease-in-out; } .oe-draggable-widget.hovered .oe-button-widget .oe-button .oe-background .oe-background-fill { background-color: var(--desktop-hover-background-color, var(--desktop-background-color, var(--default-button-background-color))); opacity: var(--desktop-hover-background-fill-opacity, var(--desktop-background-fill-opacity, 1)); transition: all 0.2s ease-in-out; --test:10; } .oe-draggable-widget.hovered .oe-button-widget .oe-button .oe-background .oe-background-gradient { opacity: var(--desktop-hover-background-gradient-opacity, var(--desktop-background-gradient-opacity, 1)); background-image: var(--desktop-hover-background-gradient, var(--desktop-background-gradient)); transition: all 0.2s ease-in-out; } .oe-draggable-widget.hovered .oe-button-widget .oe-button .oe-background .oe-background-image { opacity: var(--desktop-hover-background-image-opacity, var(--desktop-background-image-opacity, 1)); background-image: var(--desktop-hover-background-image, var(--desktop-background-image)); background-repeat: var(--desktop-hover-background-repeat, var(--desktop-background-repeat, no-repeat)); background-position: var(--desktop-hover-background-position, var(--desktop-background-position, center center)); background-size: var(--desktop-hover-background-size, var(--desktop-background-size, cover)); background-attachment: var(--desktop-hover-background-attachment, var(--desktop-background-attachment, cover)); transition: all 0.2s ease-in-out; } @media (min-width: 768px) and (max-width: 1024px) { .oe-draggable-widget[eltype="button"] .oe-button-widget { align-items: var(--tablet-align-items, var(--desktop-align-items, center)); justify-content: var(--tablet-justify-content, var(--desktop-justify-content, center)); } .oe-draggable-widget[eltype="button"] .oe-button-widget .oe-button { position: relative; cursor: pointer; text-decoration: none; color: var(--tablet-color, var(--desktop-color, var(--default-button-color))); padding: var(--tablet-padding, var(--desktop-padding, var(--default-button-padding))); border-width: var(--tablet-border-width, var(--desktop-border-width, var(--default-button-border-width))); border-style: var(--tablet-border-style, var(--desktop-border-style, var(--default-button-border-style))); border-color: var(--tablet-border-color, var(--desktop-border-color, var(--default-button-border-color))); border-radius: var(--tablet-border-radius, var(--desktop-border-radius, var(--default-button-border-radius))); font-size: var(--tablet-font-size, var(--desktop-font-size, var(--default-button-font-size))); opacity: var(--tablet-opacity, var(--desktop-opacity, 1)); box-shadow: var(--tablet-box-shadow, var(--desktop-box-shadow)); font-family: var(--tablet-font-family, var(--desktop-font-family, var(--default-button-font-family))); font-weight: var(--tablet-font-weight, var(--desktop-font-weight, var(--default-button-font-weight))); width: var(--tablet-width, var(--desktop-width, auto)); height: var(--tablet-height, var(--desktop-height, auto)); transform: scale(var(--tablet-scale, var(--desktop-scale, 1))); overflow: hidden; } .oe-draggable-widget[eltype="button"] .oe-button-widget .oe-button .oe-button-html { position: relative; text-align: var(--tablet-label-text-align, var(--desktop-label-text-align, center)); vertical-align: var(--tablet-label-vertical-align, var(--desktop-label-vertical-align, middle)); } .oe-draggable-widget[eltype="button"] .oe-button-widget .oe-button:hover { color: var(--tablet-hover-color, var(--tablet-color, var(--desktop-hover-color, var(--desktop-color, var(--default-button-color))))); padding: var(--tablet-hover-padding, var(--tablet-padding, var(--desktop-hover-padding, var(--desktop-padding, var(--default-button-padding))))); border-width: var(--tablet-hover-border-width, var(--tablet-border-width, var(--desktop-hover-border-width, var(--desktop-border-width, var(--default-button-border-width))))); border-style: var(--tablet-hover-border-style, var(--tablet-border-style, var(--desktop-hover-border-style, var(--desktop-border-style, var(--default-button-border-style))))); border-color: var(--tablet-hover-border-color, var(--tablet-border-color, var(--desktop-hover-border-color, var(--desktop-border-color, var(--default-button-border-color))))); border-radius: var(--tablet-hover-border-radius, var(--tablet-border-radius, var(--desktop-hover-border-radius, var(--desktop-border-radius, var(--default-button-border-radius))))); font-size: var(--tablet-hover-font-size, var(--tablet-font-size, var(--desktop-hover-font-size, var(--desktop-font-size, var(--default-button-font-size))))); opacity: var(--tablet-hover-opacity, var(--tablet-opacity, var(--desktop-hover-opacity, var(--desktop-opacity, 1)))); box-shadow: var(--tablet-hover-box-shadow, var(--tablet-box-shadow, var(--desktop-hover-box-shadow, var(--desktop-box-shadow)))); font-family: var(--tablet-hover-font-family, var(--tablet-font-family, var(--desktop-hover-font-family, var(--desktop-font-family, var(--default-button-font-family))))); font-weight: var(--tablet-hover-font-weight, var(--tablet-font-weight, var(--desktop-hover-font-weight, var(--desktop-font-weight, var(--default-button-font-weight))))); width: var(--tablet-hover-width, var(--tablet-width, var(--desktop-hover-width, var(--desktop-width, auto)))); height: var(--tablet-hover-height, var(--tablet-height, var(--desktop-hover-height, var(--desktop-height, auto)))); transform: scale(var(--tablet-hover-scale, var(--tablet-scale, var(--desktop-hover-scale, var(--desktop-scale, , 1))))); } .oe-draggable-widget[eltype="button"] .oe-button-widget .oe-button:hover .oe-background { pointer-events: none; overflow: hidden; transition: all 0.2s ease-in-out; } .oe-draggable-widget[eltype="button"] .oe-button-widget .oe-button:hover .oe-background:after { box-shadow: var(--tablet-hover-box-shadow, var(--tablet-box-shadow, var(--desktop-hover-box-shadow, var(--desktop-box-shadow)))); } .oe-draggable-widget[eltype="button"] .oe-button-widget .oe-button:hover .oe-background * { transition: all 0.2s ease-in-out; } .oe-draggable-widget[eltype="button"] .oe-button-widget .oe-button:hover .oe-background .oe-background-fill { background-color: var(--tablet-hover-background-color, var(--tablet-background-color, var(--desktop-hover-background-color, var(--desktop-background-color, var(--default-button-background-color))))); opacity: var(--tablet-hover-background-fill-opacity, var(--tablet-background-fill-opacity, var(--desktop-hover-background-fill-opacity, var(--desktop-background-fill-opacity, 1)))); transition: all 0.2s ease-in-out; --test:10; } .oe-draggable-widget[eltype="button"] .oe-button-widget .oe-button:hover .oe-background .oe-background-gradient { opacity: var(--tablet-hover-background-gradient-opacity, var(--tablet-background-gradient-opacity, var(--desktop-hover-background-gradient-opacity, var(--desktop-background-gradient-opacity, 1)))); background-image: var(--tablet-hover-background-gradient, var(--tablet-background-gradient, var(--desktop-hover-background-gradient, var(--desktop-background-gradient, )))); transition: all 0.2s ease-in-out; } .oe-draggable-widget[eltype="button"] .oe-button-widget .oe-button:hover .oe-background .oe-background-image { opacity: var(--tablet-hover-background-image-opacity, var(--tablet-background-image-opacity, var(--desktop-hover-background-image-opacity, var(--desktop-background-image-opacity, 1)))); background-image: var(--tablet-hover-background-image, var(--tablet-background-image, var(--desktop-hover-background-image, var(--desktop-background-image)))); background-repeat: var(--tablet-hover-background-repeat, var(--tablet-background-repeat, var(--desktop-hover-background-repeat, var(--desktop-background-repeat, no-repeat)))); background-position: var(--tablet-hover-background-position, var(--tablet-background-position, var(--desktop-hover-background-position, var(--desktop-background-position, center center)))); background-size: var(--tablet-hover-background-size, var(--tablet-background-size, var(--desktop-hover-background-size, var(--desktop-background-size, cover)))); background-attachment: var(--tablet-hover-background-attachment, var(--tablet-background-attachment, var(--desktop-hover-background-attachment, var(--desktop-background-attachment, cover)))); transition: all 0.2s ease-in-out; } .oe-draggable-widget[eltype="button"] .oe-button-widget .oe-button:hover .oe-background .oe-background-gradient { color: green; } .oe-draggable-widget[eltype="button"] .oe-button-widget .oe-button .oe-background { pointer-events: none; overflow: hidden; transition: all 0.2s ease-in-out; } .oe-draggable-widget[eltype="button"] .oe-button-widget .oe-button .oe-background:after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 1; box-shadow: var(--tablet-box-shadow, var(--desktop-box-shadow)); } .oe-draggable-widget[eltype="button"] .oe-button-widget .oe-button .oe-background * { transition: all 0.2s ease-in-out; } .oe-draggable-widget[eltype="button"] .oe-button-widget .oe-button .oe-background .oe-background-fill { background-color: var(--tablet-background-color, var(--desktop-background-color, var(--default-button-background-color))); opacity: var(--tablet-background-fill-opacity, var(--desktop-background-fill-opacity, 1)); transition: all 0.2s ease-in-out; --test:10; } .oe-draggable-widget[eltype="button"] .oe-button-widget .oe-button .oe-background .oe-background-gradient { opacity: var(--tablet-background-gradient-opacity, var(--desktop-background-gradient-opacity, 1)); background-image: var(--tablet-background-gradient, var(--desktop-background-gradient)); transition: all 0.2s ease-in-out; } .oe-draggable-widget[eltype="button"] .oe-button-widget .oe-button .oe-background .oe-background-image { opacity: var(--tablet-background-image-opacity, var(--desktop-background-image-opacity, 1)); background-image: var(--tablet-background-image, var(--desktop-background-image)); background-repeat: var(--tablet-background-repeat, var(--desktop-background-repeat, no-repeat)); background-position: var(--tablet-background-position, var(--desktop-background-position, center center)); background-size: var(--tablet-background-size, var(--desktop-background-size, cover)); background-attachment: var(--tablet-background-attachment, var(--desktop-background-attachment, cover)); transition: all 0.2s ease-in-out; } .oe-draggable-widget[eltype="button"] .oe-button-widget .oe-button .oe-background .oe-background-gradient { background-image: var(--tablet-background-gradient, var(--desktop-background-gradient, var(--default-button-gradient))); } .oe-draggable-widget.hovered .oe-button-widget .oe-button { color: var(--tablet-hover-color, var(--tablet-color, var(--desktop-hover-color, var(--desktop-color, var(--default-button-color))))); padding: var(--tablet-hover-padding, var(--tablet-padding, var(--desktop-hover-padding, var(--desktop-padding, var(--default-button-padding))))); border-width: var(--tablet-hover-border-width, var(--tablet-border-width, var(--desktop-hover-border-width, var(--desktop-border-width, var(--default-button-border-width))))); border-style: var(--tablet-hover-border-style, var(--tablet-border-style, var(--desktop-hover-border-style, var(--desktop-border-style, var(--default-button-border-style))))); border-color: var(--tablet-hover-border-color, var(--tablet-border-color, var(--desktop-hover-border-color, var(--desktop-border-color, var(--default-button-border-color))))); border-radius: var(--tablet-hover-border-radius, var(--tablet-border-radius, var(--desktop-hover-border-radius, var(--desktop-border-radius, var(--default-button-border-radius))))); font-size: var(--tablet-hover-font-size, var(--tablet-font-size, var(--desktop-hover-font-size, var(--desktop-font-size, var(--default-button-font-size))))); opacity: var(--tablet-hover-opacity, var(--tablet-opacity, var(--desktop-hover-opacity, var(--desktop-opacity, 1)))); box-shadow: var(--tablet-hover-box-shadow, var(--tablet-box-shadow, var(--desktop-hover-box-shadow, var(--desktop-box-shadow)))); font-family: var(--tablet-hover-font-family, var(--tablet-font-family, var(--desktop-hover-font-family, var(--desktop-font-family, var(--default-button-font-family))))); font-weight: var(--tablet-hover-font-weight, var(--tablet-font-weight, var(--desktop-hover-font-weight, var(--desktop-font-weight, var(--default-button-font-weight))))); width: var(--tablet-hover-width, var(--tablet-width, var(--desktop-hover-width, var(--desktop-width, auto)))); height: var(--tablet-hover-height, var(--tablet-height, var(--desktop-hover-height, var(--desktop-height, auto)))); transform: scale(var(--tablet-hover-scale, var(--tablet-scale, var(--desktop-hover-scale, var(--desktop-scale, , 1))))); } .oe-draggable-widget.hovered .oe-button-widget .oe-button .oe-background { pointer-events: none; overflow: hidden; transition: all 0.2s ease-in-out; } .oe-draggable-widget.hovered .oe-button-widget .oe-button .oe-background:after { box-shadow: var(--tablet-hover-box-shadow, var(--tablet-box-shadow, var(--desktop-hover-box-shadow, var(--desktop-box-shadow)))); } .oe-draggable-widget.hovered .oe-button-widget .oe-button .oe-background * { transition: all 0.2s ease-in-out; } .oe-draggable-widget.hovered .oe-button-widget .oe-button .oe-background .oe-background-fill { background-color: var(--tablet-hover-background-color, var(--tablet-background-color, var(--desktop-hover-background-color, var(--desktop-background-color, var(--desktop-background-gradient, var(--default-button-background-color)))))); opacity: var(--tablet-hover-background-fill-opacity, var(--tablet-background-fill-opacity, var(--desktop-hover-background-fill-opacity, var(--desktop-background-fill-opacity, 1)))); transition: all 0.2s ease-in-out; --test:10; } .oe-draggable-widget.hovered .oe-button-widget .oe-button .oe-background .oe-background-gradient { opacity: var(--tablet-hover-background-gradient-opacity, var(--tablet-background-gradient-opacity, var(--desktop-hover-background-gradient-opacity, var(--desktop-background-gradient-opacity, 1)))); background-image: var(--tablet-hover-background-gradient, var(--tablet-background-gradient, var(--desktop-hover-background-gradient, var(--desktop-background-gradient, )))); transition: all 0.2s ease-in-out; } .oe-draggable-widget.hovered .oe-button-widget .oe-button .oe-background .oe-background-image { opacity: var(--tablet-hover-background-image-opacity, var(--tablet-background-image-opacity, var(--desktop-hover-background-image-opacity, var(--desktop-background-image-opacity, 1)))); background-image: var(--tablet-hover-background-image, var(--tablet-background-image, var(--desktop-hover-background-image, var(--desktop-background-image)))); background-repeat: var(--tablet-hover-background-repeat, var(--tablet-background-repeat, var(--desktop-hover-background-repeat, var(--desktop-background-repeat, no-repeat)))); background-position: var(--tablet-hover-background-position, var(--tablet-background-position, var(--desktop-hover-background-position, var(--desktop-background-position, center center)))); background-size: var(--tablet-hover-background-size, var(--tablet-background-size, var(--desktop-hover-background-size, var(--desktop-background-size, cover)))); background-attachment: var(--tablet-hover-background-attachment, var(--tablet-background-attachment, var(--desktop-hover-background-attachment, var(--desktop-background-attachment, cover)))); transition: all 0.2s ease-in-out; } } @media (min-width: 320px) and (max-width: 767px) { [elType='section'] > [elType='container'] > .oe-draggable-widget[eltype="button"] { width: var(--mobile-widget-width, calc(var(--dcw) * var(--desktop-gridArea-width) * 1rem)) !important; height: var(--mobile-widget-width, calc(var(--dcw) * var(--desktop-gridArea-height) * 1rem)) !important; min-width: var(--mobile-widget-width, inherit); min-height: var(--mobile-widget-height, inherit); max-width: var(--mobile-widget-width, 100%); max-height: var(--mobile-widget-height, 100%); align-self: var(--mobile-justify-content, center); } .oe-draggable-widget[eltype="button"] .oe-button-widget { position: relative; align-items: var(--mobile-align-items, var(--tablet-align-items, var(--desktop-align-items, center))); justify-content: var(--mobile-justify-content, var(--tablet-justify-content, var(--desktop-justify-content, center))); } .oe-draggable-widget[eltype="button"] .oe-button-widget .oe-button { position: relative; cursor: pointer; text-decoration: none; color: var(--mobile-color, var(--tablet-color, var(--desktop-color, var(--default-button-color)))); padding: var(--mobile-padding, var(--tablet-padding, var(--desktop-padding, var(--default-button-padding)))); border-width: var(--mobile-border-width, var(--tablet-border-width, var(--desktop-border-width, var(--default-button-border-width)))); border-style: var(--mobile-border-style, var(--tablet-border-style, var(--desktop-border-style, var(--default-button-border-style)))); border-color: var(--mobile-border-color, var(--tablet-border-color, var(--desktop-border-color, var(--default-button-border-color)))); border-radius: var(--mobile-border-radius, var(--tablet-border-radius, var(--desktop-border-radius, var(--default-button-border-radius)))); font-size: var(--mobile-font-size, var(--tablet-font-size, var(--desktop-font-size, var(--default-button-font-size)))); opacity: var(--mobile-opacity, var(--tablet-opacity, var(--desktop-opacity, 1))); box-shadow: var(--mobile-box-shadow, var(--tablet-box-shadow, var(--desktop-box-shadow))); font-family: var(--mobile-font-family, var(--tablet-font-family, var(--desktop-font-family, var(--default-button-font-family)))); font-weight: var(--mobile-font-weight, var(--tablet-font-weight, var(--desktop-font-weight, var(--default-button-font-weight)))); width: var(--mobile-width, var(--tablet-width, var(--desktop-width, auto))); height: var(--mobile-height, var(--tablet-height, var(--desktop-height, auto))); transform: scale(var(--mobile-scale, var(--tablet-scale, var(--desktop-scale, 1)))); overflow: hidden; } .oe-draggable-widget[eltype="button"] .oe-button-widget .oe-button .oe-button-html { position: relative; text-align: var(--mobile-label-text-align, var(--tablet-label-text-align, var(--desktop-label-text-align, center))); vertical-align: var(--mobile-label-vertical-align, var(--tablet-label-vertical-align, var(--desktop-label-vertical-align, middle))); } .oe-draggable-widget[eltype="button"] .oe-button-widget .oe-button:hover { color: var(--mobile-hover-color, var(--mobile-color, var(--tablet-hover-color, var(--tablet-color, var(--desktop-hover-color, var(--desktop-color, var(--default-button-color))))))); padding: var(--mobile-hover-padding, var(--mobile-padding, var(--tablet-hover-padding, var(--tablet-padding, var(--desktop-hover-padding, var(--desktop-padding, var(--default-button-padding))))))); border-width: var(--mobile-hover-border-width, var(--mobile-border-width, var(--tablet-hover-border-width, var(--tablet-border-width, var(--desktop-hover-border-width, var(--desktop-border-width, var(--default-button-border-width))))))); border-style: var(--mobile-hover-border-style, var(--mobile-border-style, var(--tablet-hover-border-style, var(--tablet-border-style, var(--desktop-hover-border-style, var(--desktop-border-style, var(--default-button-border-style))))))); border-color: var(--mobile-hover-border-color, var(--mobile-border-color, var(--tablet-hover-border-color, var(--tablet-border-color, var(--desktop-hover-border-color, var(--desktop-border-color, var(--default-button-border-color))))))); border-radius: var(--mobile-hover-border-radius, var(--mobile-border-radius, var(--tablet-hover-border-radius, var(--tablet-border-radius, var(--desktop-hover-border-radius, var(--desktop-border-radius, var(--default-button-border-radius))))))); font-size: var(--mobile-hover-font-size, var(--mobile-font-size, var(--tablet-hover-font-size, var(--tablet-font-size, var(--desktop-hover-font-size, var(--desktop-font-size, var(--default-button-font-size))))))); opacity: var(--mobile-hover-opacity, var(--mobile-opacity, var(--tablet-hover-opacity, var(--tablet-opacity, var(--desktop-hover-opacity, var(--desktop-opacity, 1)))))); box-shadow: var(--mobile-hover-box-shadow, var(--mobile-box-shadow, var(--tablet-hover-box-shadow, var(--tablet-box-shadow, var(--desktop-hover-box-shadow, var(--desktop-box-shadow)))))); font-family: var(--mobile-hover-font-family, var(--mobile-font-family, var(--tablet-hover-font-family, var(--tablet-font-family, var(--desktop-hover-font-family, var(--desktop-font-family, var(--default-button-font-family))))))); font-weight: var(--mobile-hover-font-weight, var(--mobile-font-weight, var(--tablet-hover-font-weight, var(--tablet-font-weight, var(--desktop-hover-font-weight, var(--desktop-font-weight, var(--default-button-font-weight))))))); width: var(--mobile-hover-width, var(--mobile-width, var(--tablet-hover-width, var(--tablet-width, var(--desktop-hover-width, var(--desktop-width, auto)))))); height: var(--mobile-hover-height, var(--mobile-height, var(--tablet-hover-height, var(--tablet-height, var(--desktop-hover-height, var(--desktop-height, auto)))))); transform: scale(var(--mobile-hover-scale, var(--mobile-scale, var(--tablet-hover-scale, var(--tablet-scale, var(--desktop-hover-scale, var(--desktop-scale, , 1))))))); } .oe-draggable-widget[eltype="button"] .oe-button-widget .oe-button:hover .oe-background { pointer-events: none; overflow: hidden; transition: all 0.2s ease-in-out; } .oe-draggable-widget[eltype="button"] .oe-button-widget .oe-button:hover .oe-background:after { box-shadow: var(--mobile-hover-box-shadow, var(--mobile-box-shadow, var(--tablet-hover-box-shadow, var(--tablet-box-shadow, var(--desktop-hover-box-shadow, var(--desktop-box-shadow)))))); } .oe-draggable-widget[eltype="button"] .oe-button-widget .oe-button:hover .oe-background * { transition: all 0.2s ease-in-out; } .oe-draggable-widget[eltype="button"] .oe-button-widget .oe-button:hover .oe-background .oe-background-fill { background-color: var(--mobile-hover-background-color, var(--mobile-background-color, var(--tablet-hover-background-color, var(--tablet-background-color, var(--desktop-hover-background-color, var(--desktop-background-color)))))); opacity: var(--mobile-hover-background-fill-opacity, var(--mobile-background-fill-opacity, var(--tablet-hover-background-fill-opacity, var(--tablet-background-fill-opacity, var(--desktop-hover-background-fill-opacity, var(--desktop-background-fill-opacity, 1)))))); transition: all 0.2s ease-in-out; --test:10; } .oe-draggable-widget[eltype="button"] .oe-button-widget .oe-button:hover .oe-background .oe-background-gradient { opacity: var(--mobile-hover-background-gradient-opacity, var(--mobile-background-gradient-opacity, var(--tablet-hover-background-gradient-opacity, var(--tablet-background-gradient-opacity, var(--desktop-hover-background-gradient-opacity, var(--desktop-background-gradient-opacity, 1)))))); background-image: var(--mobile-hover-background-gradient, var(--mobile-background-gradient, var(--tablet-hover-background-gradient, var(--tablet-background-gradient, var(--desktop-hover-background-gradient, var(--desktop-background-gradient, )))))); transition: all 0.2s ease-in-out; } .oe-draggable-widget[eltype="button"] .oe-button-widget .oe-button:hover .oe-background .oe-background-image { opacity: var(--mobile-hover-background-image-opacity, var(--mobile-background-image-opacity, var(--tablet-hover-background-image-opacity, var(--tablet-background-image-opacity, var(--desktop-hover-background-image-opacity, var(--desktop-background-image-opacity, 1)))))); background-image: var(--mobile-hover-background-image, var(--mobile-background-image, var(--tablet-hover-background-image, var(--tablet-background-image, var(--desktop-hover-background-image, var(--desktop-background-image)))))); background-repeat: var(--mobile-hover-background-repeat, var(--mobile-background-repeat, var(--tablet-hover-background-repeat, var(--tablet-background-repeat, var(--desktop-hover-background-repeat, var(--desktop-background-repeat, no-repeat)))))); background-position: var(--mobile-hover-background-position, var(--mobile-background-position, var(--tablet-hover-background-position, var(--tablet-background-position, var(--desktop-hover-background-position, var(--desktop-background-position, center center)))))); background-size: var(--mobile-hover-background-size, var(--mobile-background-size, var(--tablet-hover-background-size, var(--tablet-background-size, var(--desktop-hover-background-size, var(--desktop-background-size, cover)))))); background-attachment: var(--mobile-hover-background-attachment, var(--mobile-background-attachment, var(--tablet-hover-background-attachment, var(--tablet-background-attachment, var(--desktop-hover-background-attachment, var(--desktop-background-attachment, cover)))))); transition: all 0.2s ease-in-out; } .oe-draggable-widget[eltype="button"] .oe-button-widget .oe-button > .oe-background { pointer-events: none; overflow: hidden; transition: all 0.2s ease-in-out; } .oe-draggable-widget[eltype="button"] .oe-button-widget .oe-button > .oe-background:after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 1; box-shadow: var(--mobile-box-shadow, var(--tablet-box-shadow, var(--desktop-box-shadow))); } .oe-draggable-widget[eltype="button"] .oe-button-widget .oe-button > .oe-background * { transition: all 0.2s ease-in-out; } .oe-draggable-widget[eltype="button"] .oe-button-widget .oe-button > .oe-background .oe-background-fill { background-color: var(--mobile-background-color, var(--tablet-background-color, var(--desktop-background-color, var(--default-button-background-color)))); opacity: var(--mobile-background-fill-opacity, var(--tablet-background-fill-opacity, var(--desktop-background-fill-opacity, 1))); transition: all 0.2s ease-in-out; --test:10; } .oe-draggable-widget[eltype="button"] .oe-button-widget .oe-button > .oe-background .oe-background-gradient { opacity: var(--mobile-background-gradient-opacity, var(--tablet-background-gradient-opacity, var(--desktop-background-gradient-opacity, 1))); background-image: var(--mobile-background-gradient, var(--tablet-background-gradient, var(--desktop-background-gradient))); transition: all 0.2s ease-in-out; } .oe-draggable-widget[eltype="button"] .oe-button-widget .oe-button > .oe-background .oe-background-image { opacity: var(--mobile-background-image-opacity, var(--tablet-background-image-opacity, var(--desktop-background-image-opacity, 1))); background-image: var(--mobile-background-image, var(--tablet-background-image, var(--desktop-background-image))); background-repeat: var(--mobile-background-repeat, var(--tablet-background-repeat, var(--desktop-background-repeat, no-repeat))); background-position: var(--mobile-background-position, var(--tablet-background-position, var(--desktop-background-position, center center))); background-size: var(--mobile-background-size, var(--tablet-background-size, var(--desktop-background-size, cover))); background-attachment: var(--mobile-background-attachment, var(--tablet-background-attachment, var(--desktop-background-attachment, cover))); transition: all 0.2s ease-in-out; } .oe-draggable-widget[eltype="button"] .oe-button-widget .oe-button > .oe-background .oe-background-gradient { background-image: var(--mobile-background-gradient, var(--tablet-background-gradient, var(--desktop-background-gradient, var(--default-button-gradient)))); } .oe-draggable-widget.hovered .oe-button-widget .oe-button { color: var(--mobile-hover-color, var(--mobile-color, var(--tablet-hover-color, var(--tablet-color, var(--desktop-hover-color, var(--desktop-color, var(--default-button-color))))))); padding: var(--mobile-hover-padding, var(--mobile-padding, var(--tablet-hover-padding, var(--tablet-padding, var(--desktop-hover-padding, var(--desktop-padding, var(--default-button-padding))))))); border-width: var(--mobile-hover-border-width, var(--mobile-border-width, var(--tablet-hover-border-width, var(--tablet-border-width, var(--desktop-hover-border-width, var(--desktop-border-width, var(--default-button-border-width))))))); border-style: var(--mobile-hover-border-style, var(--mobile-border-style, var(--tablet-hover-border-style, var(--tablet-border-style, var(--desktop-hover-border-style, var(--desktop-border-style, var(--default-button-border-style))))))); border-color: var(--mobile-hover-border-color, var(--mobile-border-color, var(--tablet-hover-border-color, var(--tablet-border-color, var(--desktop-hover-border-color, var(--desktop-border-color, var(--default-button-border-color))))))); border-radius: var(--mobile-hover-border-radius, var(--mobile-border-radius, var(--tablet-hover-border-radius, var(--tablet-border-radius, var(--desktop-hover-border-radius, var(--desktop-border-radius, var(--default-button-border-radius))))))); font-size: var(--mobile-hover-font-size, var(--mobile-font-size, var(--tablet-hover-font-size, var(--tablet-font-size, var(--desktop-hover-font-size, var(--desktop-font-size, var(--default-button-font-size))))))); opacity: var(--mobile-hover-opacity, var(--mobile-opacity, var(--tablet-hover-opacity, var(--tablet-opacity, var(--desktop-hover-opacity, var(--desktop-opacity, 1)))))); box-shadow: var(--mobile-hover-box-shadow, var(--mobile-box-shadow, var(--tablet-hover-box-shadow, var(--tablet-box-shadow, var(--desktop-hover-box-shadow, var(--desktop-box-shadow)))))); font-family: var(--mobile-hover-font-family, var(--mobile-font-family, var(--tablet-hover-font-family, var(--tablet-font-family, var(--desktop-hover-font-family, var(--desktop-font-family, var(--default-button-font-family))))))); font-weight: var(--mobile-hover-font-weight, var(--mobile-font-weight, var(--tablet-hover-font-weight, var(--tablet-font-weight, var(--desktop-hover-font-weight, var(--desktop-font-weight, var(--default-button-font-weight))))))); width: var(--mobile-hover-width, var(--mobile-width, var(--tablet-hover-width, var(--tablet-width, var(--desktop-hover-width, var(--desktop-width, auto)))))); height: var(--mobile-hover-height, var(--mobile-height, var(--tablet-hover-height, var(--tablet-height, var(--desktop-hover-height, var(--desktop-height, auto)))))); transform: scale(var(--mobile-hover-scale, var(--mobile-scale, var(--tablet-hover-scale, var(--tablet-scale, var(--desktop-hover-scale, var(--desktop-scale, , 1))))))); } .oe-draggable-widget.hovered .oe-button-widget .oe-button .oe-background { pointer-events: none; overflow: hidden; transition: all 0.2s ease-in-out; } .oe-draggable-widget.hovered .oe-button-widget .oe-button .oe-background:after { box-shadow: var(--mobile-hover-box-shadow, var(--mobile-box-shadow, var(--tablet-hover-box-shadow, var(--tablet-box-shadow, var(--desktop-hover-box-shadow, var(--desktop-box-shadow)))))); } .oe-draggable-widget.hovered .oe-button-widget .oe-button .oe-background * { transition: all 0.2s ease-in-out; } .oe-draggable-widget.hovered .oe-button-widget .oe-button .oe-background .oe-background-fill { background-color: var(--mobile-hover-background-color, var(--mobile-background-color, var(--tablet-hover-background-color, var(--tablet-background-color, var(--desktop-hover-background-color, var(--desktop-background-color, var(--default-button-background-color))))))); opacity: var(--mobile-hover-background-fill-opacity, var(--mobile-background-fill-opacity, var(--tablet-hover-background-fill-opacity, var(--tablet-background-fill-opacity, var(--desktop-hover-background-fill-opacity, var(--desktop-background-fill-opacity, 1)))))); transition: all 0.2s ease-in-out; --test:10; } .oe-draggable-widget.hovered .oe-button-widget .oe-button .oe-background .oe-background-gradient { opacity: var(--mobile-hover-background-gradient-opacity, var(--mobile-background-gradient-opacity, var(--tablet-hover-background-gradient-opacity, var(--tablet-background-gradient-opacity, var(--desktop-hover-background-gradient-opacity, var(--desktop-background-gradient-opacity, 1)))))); background-image: var(--mobile-hover-background-gradient, var(--mobile-background-gradient, var(--tablet-hover-background-gradient, var(--tablet-background-gradient, var(--desktop-hover-background-gradient, var(--desktop-background-gradient, )))))); transition: all 0.2s ease-in-out; } .oe-draggable-widget.hovered .oe-button-widget .oe-button .oe-background .oe-background-image { opacity: var(--mobile-hover-background-image-opacity, var(--mobile-background-image-opacity, var(--tablet-hover-background-image-opacity, var(--tablet-background-image-opacity, var(--desktop-hover-background-image-opacity, var(--desktop-background-image-opacity, 1)))))); background-image: var(--mobile-hover-background-image, var(--mobile-background-image, var(--tablet-hover-background-image, var(--tablet-background-image, var(--desktop-hover-background-image, var(--desktop-background-image)))))); background-repeat: var(--mobile-hover-background-repeat, var(--mobile-background-repeat, var(--tablet-hover-background-repeat, var(--tablet-background-repeat, var(--desktop-hover-background-repeat, var(--desktop-background-repeat, no-repeat)))))); background-position: var(--mobile-hover-background-position, var(--mobile-background-position, var(--tablet-hover-background-position, var(--tablet-background-position, var(--desktop-hover-background-position, var(--desktop-background-position, center center)))))); background-size: var(--mobile-hover-background-size, var(--mobile-background-size, var(--tablet-hover-background-size, var(--tablet-background-size, var(--desktop-hover-background-size, var(--desktop-background-size, cover)))))); background-attachment: var(--mobile-hover-background-attachment, var(--mobile-background-attachment, var(--tablet-hover-background-attachment, var(--tablet-background-attachment, var(--desktop-hover-background-attachment, var(--desktop-background-attachment, cover)))))); transition: all 0.2s ease-in-out; } } .oe-draggable-widget[eltype="video"] .oe-video-widget .oe-video-wrap { position: absolute; top: 0; right: 0; bottom: 0; left: 0; overflow: hidden; display: flex; align-items: center; justify-content: center; background-color: #000000; padding: var(--desktop-padding, 0px); border-width: var(--desktop-border-width, 0px); border-style: var(--desktop-border-style, solid); border-color: var(--desktop-border-color, #000000); border-radius: var(--desktop-border-radius, 0px); opacity: var(--desktop-opacity, 1); box-shadow: var(--desktop-box-shadow); } .oe-draggable-widget[eltype="video"] .oe-video-widget .oe-video-wrap iframe { width: 100%; height: 100%; } @media (min-width: 768px) and (max-width: 1024px) { .oe-draggable-widget[eltype="video"] .oe-video-widget .oe-video-wrap { padding: var(--tablet-padding, var(--desktop-padding, 0px)); border-width: var(--tablet-border-width, var(--desktop-border-width, 0px)); border-style: var(--tablet-border-style, var(--desktop-border-style, solid)); border-color: var(--tablet-border-color, var(--desktop-border-color, #000000)); border-radius: var(--tablet-border-radius, var(--desktop-border-radius, 0px)); opacity: var(--tablet-opacity, var(--desktop-opacity, 1)); box-shadow: var(--tablet-box-shadow, var(--desktop-box-shadow)); } } @media (min-width: 320px) and (max-width: 767px) { [elType='section'] > [elType='container'] > .oe-draggable-widget[eltype="video"] { width: var(--mobile-widget-width, calc(var(--dcw) * var(--desktop-gridArea-width) * 1rem)); height: var(--mobile-widget-width, calc(var(--dcw) * var(--desktop-gridArea-height) * 1rem)); min-width: var(--mobile-widget-width, inherit); min-height: var(--mobile-widget-height, inherit); max-width: var(--mobile-widget-width, 100%); max-height: var(--mobile-widget-height, 100%); } .oe-draggable-widget[eltype="video"] .oe-video-widget { position: relative; } .oe-draggable-widget[eltype="video"] .oe-video-widget .oe-video-wrap { position: relative; width: 100%; height: 0; padding-top: 28.125%; padding-bottom: 28.125%; border-width: var(--mobile-border-width, var(--tablet-border-width, var(--desktop-border-width, 0px))); border-style: var(--mobile-border-style, var(--tablet-border-style, var(--desktop-border-style, solid))); border-color: var(--mobile-border-color, var(--tablet-border-color, var(--desktop-border-color, #000000))); border-radius: var(--mobile-border-radius, var(--tablet-border-radius, var(--desktop-border-radius, 0px))); opacity: var(--mobile-opacity, var(--tablet-opacity, var(--desktop-opacity, 1))); box-shadow: var(--mobile-box-shadow, var(--tablet-box-shadow, var(--desktop-box-shadow))); } .oe-draggable-widget[eltype="video"] .oe-video-widget .oe-video-wrap iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } } .oe-draggable-widget[eltype="form"] .oe-form-widget { height: auto; position: absolute; top: 0; right: 0; left: 0; bottom: 0; overflow: hidden; border-width: var(--desktop-form-border-width, 0px); border-style: var(--desktop-form-border-style, solid); border-color: var(--desktop-form-border-color, #000000); border-radius: var(--desktop-form-border-radius, 0px); } .oe-draggable-widget[eltype="form"] .oe-form-widget .form-title { font-family: var(--desktop-form-font-family, var(--default-font-family)); font-size: 20rem; font-weight: normal; color: var(--label-color, #000000); margin-bottom: 20px; align-self: flex-start; } .oe-draggable-widget[eltype="form"] .oe-form-widget .oe-background { pointer-events: none; overflow: hidden; transition: all 0.2s ease-in-out; } .oe-draggable-widget[eltype="form"] .oe-form-widget .oe-background:after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 1; box-shadow: var(--desktop-form-box-shadow); } .oe-draggable-widget[eltype="form"] .oe-form-widget .oe-background * { transition: all 0.2s ease-in-out; } .oe-draggable-widget[eltype="form"] .oe-form-widget .oe-background .oe-background-fill { background-color: var(--desktop-form-background-color, #ffffff); opacity: var(--desktop-form-background-fill-opacity, 1); transition: all 0.2s ease-in-out; } .oe-draggable-widget[eltype="form"] .oe-form-widget .oe-background .oe-background-gradient { opacity: var(--desktop-form-background-gradient-opacity, 1); background-image: var(--desktop-form-background-gradient); transition: all 0.2s ease-in-out; } .oe-draggable-widget[eltype="form"] .oe-form-widget .oe-background .oe-background-image { opacity: var(--desktop-form-background-image-opacity, 1); background-image: var(--form-background-image); background-repeat: var(--desktop-form-background-repeat, no-repeat); background-position: var(--desktop-form-background-position, center center); background-size: var(--desktop-form-background-size, cover); background-attachment: var(--desktop-form-background-attachment, cover); transition: all 0.2s ease-in-out; } @media (min-width: 768px) and (max-width: 1024px) { .oe-draggable-widget[eltype="form"] .oe-form-widget { border-width: var(--tablet-form-border-width, var(--desktop-form-border-width, 0px)); border-style: var(--tablet-form-border-style, var(--desktop-form-border-style, solid)); border-color: var(--tablet-form-border-color, var(--desktop-form-border-color, #000000)); border-radius: var(--tablet-form-border-radius, var(--desktop-form-border-radius, 0px)); } .oe-draggable-widget[eltype="form"] .oe-form-widget .form-title { font-family: var(--tablet-form-font-family, var(--desktop-form-font-family, var(--default-font-family))); color: var(--label-color, #000000); } .oe-draggable-widget[eltype="form"] .oe-form-widget .oe-background { pointer-events: none; overflow: hidden; transition: all 0.2s ease-in-out; } .oe-draggable-widget[eltype="form"] .oe-form-widget .oe-background:after { box-shadow: var(--tablet-form-box-shadow, var(--desktop-form-box-shadow)); } .oe-draggable-widget[eltype="form"] .oe-form-widget .oe-background * { transition: all 0.2s ease-in-out; } .oe-draggable-widget[eltype="form"] .oe-form-widget .oe-background .oe-background-fill { background-color: var(--tablet-form-background-color, var(--desktop-form-background-color, #ffffff)); opacity: var(--tablet-form-background-fill-opacity, var(--desktop-form-background-fill-opacity, 1)); transition: all 0.2s ease-in-out; } .oe-draggable-widget[eltype="form"] .oe-form-widget .oe-background .oe-background-gradient { opacity: var(--tablet-form-background-gradient-opacity, var(--desktop-form-background-gradient-opacity, 1)); background-image: var(--tablet-form-background-gradient, var(--desktop-form-background-gradient)); transition: all 0.2s ease-in-out; } .oe-draggable-widget[eltype="form"] .oe-form-widget .oe-background .oe-background-image { opacity: var(--tablet-form-background-image-opacity, var(--desktop-form-background-image-opacity, 1)); background-image: var(--form-background-image); background-repeat: var(--tablet-form-background-repeat, var(--desktop-form-background-repeat, no-repeat)); background-position: var(--tablet-form-background-position, var(--desktop-form-background-position, center center)); background-size: var(--tablet-form-background-size, var(--desktop-form-background-size, cover)); background-attachment: var(--tablet-form-background-attachment, var(--desktop-form-background-attachment, cover)); transition: all 0.2s ease-in-out; } } @media (min-width: 320px) and (max-width: 767px) { [elType='section'] > [elType='container'] > .oe-draggable-widget[eltype="form"] { width: var(--mobile-widget-width, calc(var(--dcw) * var(--desktop-gridArea-width) * 1rem)); height: var(--mobile-widget-width, calc(var(--dcw) * var(--desktop-gridArea-height) * 1rem)); min-width: var(--mobile-widget-width, inherit); min-height: var(--mobile-widget-height, inherit); max-width: var(--mobile-widget-width, 100%); max-height: var(--mobile-widget-height, 100%); align-self: var(--mobile-justify-content, center); } .oe-draggable-widget[eltype="form"] .oe-form-widget { position: relative; border-width: var(--mobile-form-border-width, var(--tablet-form-border-width, var(--desktop-form-border-width, 0px))); border-style: var(--mobile-form-border-style, var(--tablet-form-border-style, var(--desktop-form-border-style, solid))); border-color: var(--mobile-form-border-color, var(--tablet-form-border-color, var(--desktop-form-border-color, #000000))); border-radius: var(--mobile-form-border-radius, var(--tablet-form-border-radius, var(--desktop-form-border-radius, 0px))); } .oe-draggable-widget[eltype="form"] .oe-form-widget .form-title { font-family: var(--mobile-form-font-family, var(--tablet-form-font-family, var(--desktop-form-font-family, var(--default-font-family)))); color: var(--label-color, #000000); } .oe-draggable-widget[eltype="form"] .oe-form-widget .oe-background { pointer-events: none; overflow: hidden; transition: all 0.2s ease-in-out; } .oe-draggable-widget[eltype="form"] .oe-form-widget .oe-background:after { box-shadow: var(--mobile-form-box-shadow, var(--tablet-form-box-shadow, var(--desktop-form-box-shadow))); } .oe-draggable-widget[eltype="form"] .oe-form-widget .oe-background * { transition: all 0.2s ease-in-out; } .oe-draggable-widget[eltype="form"] .oe-form-widget .oe-background .oe-background-fill { background-color: var(--mobile-form-background-color, var(--tablet-form-background-color, var(--desktop-form-background-color, #ffffff))); opacity: var(--mobile-form-background-fill-opacity, var(--tablet-form-background-fill-opacity, var(--desktop-form-background-fill-opacity, 1))); transition: all 0.2s ease-in-out; } .oe-draggable-widget[eltype="form"] .oe-form-widget .oe-background .oe-background-gradient { opacity: var(--mobile-form-background-gradient-opacity, var(--tablet-form-background-gradient-opacity, var(--desktop-form-background-gradient-opacity, 1))); background-image: var(--mobile-form-background-gradient, var(--tablet-form-background-gradient, var(--desktop-form-background-gradient))); transition: all 0.2s ease-in-out; } .oe-draggable-widget[eltype="form"] .oe-form-widget .oe-background .oe-background-image { opacity: var(--mobile-form-background-image-opacity, var(--tablet-form-background-image-opacity, var(--desktop-form-background-image-opacity, 1))); background-image: var(--form-background-image); background-repeat: var(--mobile-form-background-repeat, var(--tablet-form-background-repeat, var(--desktop-form-background-repeat, no-repeat))); background-position: var(--mobile-form-background-position, var(--tablet-form-background-position, var(--desktop-form-background-position, center center))); background-size: var(--mobile-form-background-size, var(--tablet-form-background-size, var(--desktop-form-background-size, cover))); background-attachment: var(--mobile-form-background-attachment, var(--tablet-form-background-attachment, var(--desktop-form-background-attachment, cover))); transition: all 0.2s ease-in-out; } } .oe-draggable-widget[eltype="form"] .oe-form-widget form { display: flex; align-items: center; justify-content: center; flex-direction: column; padding: var(--desktop-form-padding, 10px); width: 100%; box-sizing: border-box; position: relative; } .oe-draggable-widget[eltype="form"] .oe-form-widget form .pinpointe-fl-container .pinpointe-fl-item-wrapper { padding: var(--cell-padding, none); } .oe-draggable-widget[eltype="form"] .oe-form-widget form .pinpointe-fl-container .pinpointe-fl-label { font-family: var(--default-font-family, 10px); color: var(--label-color, #000000); font-family: var(--label-font-family, var(--default-font-family)); } .oe-draggable-widget[eltype="form"] .oe-form-widget form .pinpointe-fl-container .pinpointe-fl-item-wrapper-control > input:not([type="submit"]), .oe-draggable-widget[eltype="form"] .oe-form-widget form .pinpointe-fl-container .pinpointe-fl-item-wrapper-control > select { width: 100%; outline: none; box-shadow: none; padding: 10px; box-sizing: border-box; background-color: var(--input-background-color, #dadada); color: var(--input-color, #666666); border-color: var(--input-border-color, #000000); border-width: var(--input-border-width, 0px); border-style: var(--input-border-style, nonne); border-radius: var(--input-border-radius, opx); font-family: var(--default-font-family, nonne); font-size: var(--input-font-size, 14rem); } .oe-draggable-widget[eltype="form"] .oe-form-widget form .pinpointe-fl-container .pinpointe-fl-item-wrapper-control > input:not([type="submit"]) { padding: var(--desktop-input-padding, 10px); } .oe-draggable-widget[eltype="form"] .oe-form-widget form .pinpointe-fl-container .pinpointe-fl-item-wrapper-control > input:not([type="submit"])::placeholder { font-size: var(--placeholder-font-size, 14rem); color: var(--placeholder-color, #000000); } .oe-draggable-widget[eltype="form"] .oe-form-widget form .pinpointe-fl-container .pinpointe-fl-item-wrapper-control > input:not([type="submit"])::-ms-input-placeholder { font-size: var(--placeholder-font-size, 14rem); color: var(--placeholder-color, #000000); } .oe-draggable-widget[eltype="form"] .oe-form-widget form .pinpointe-fl-container input:not([type="hidden"]), .oe-draggable-widget[eltype="form"] .oe-form-widget form .pinpointe-fl-container select { line-height: var(--line-height, 1.5); } .oe-draggable-widget[eltype="form"] .oe-form-widget form .pinpointe-fl-container input[type='submit'] { height: var(--desktop-button-height, auto) !important; width: var(--desktop-button-width, auto) !important; display: flex; align-items: center; justify-content: center; background-color: var(--button-background-color, #2483fe); color: var(--button-color, #ffffff); border-color: var(--button-border-color, #000000); border-width: var(--button-border-width, 0px); border-style: var(--button-border-style, none); border-radius: var(--button-border-radius, opx); font-size: var(--button-font-size, 16rem); padding: var(--button-padding, var(--default-button-padding, none)); box-shadow: none; outline: none; cursor: pointer; transition: all 0.2s ease-in-out; } .oe-draggable-widget[eltype="form"] .oe-form-widget form .pinpointe-fl-container input[type='submit']:hover { opacity: 0.9; transition: all 0.2s ease-in-out; } .oe-draggable-widget[eltype="icon"] .oe-icon-widget { position: absolute !important; } .oe-draggable-widget[eltype="icon"] .oe-icon-widget .oe-icon { display: flex; position: absolute; left: 0px; right: 0px; top: 0px; bottom: 0px; overflow: hidden; justify-content: var(--desktop-justify-content, center); align-items: var(--desktop-align-items, center); border-width: var(--desktop-border-width, 0px); border-style: var(--desktop-border-style, solid); border-color: var(--desktop-border-color, #000000); border-radius: var(--desktop-border-radius, 0px); opacity: var(--desktop-opacity, 1); padding: var(--desktop-padding, 0); box-shadow: var(--desktop-box-shadow); } .oe-draggable-widget[eltype="icon"] .oe-icon-widget .oe-icon svg { max-width: 100%; max-height: 100%; width: var(--desktop-icon-width, 100%); height: var(--desktop-icon-width, 100%); fill: var(--desktop-icon-color, #666666); position: relative; } .oe-draggable-widget[eltype="icon"] .oe-icon-widget .oe-icon .oe-background { pointer-events: none; overflow: hidden; transition: all 0.2s ease-in-out; } .oe-draggable-widget[eltype="icon"] .oe-icon-widget .oe-icon .oe-background:after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 1; box-shadow: var(--desktop-box-shadow); } .oe-draggable-widget[eltype="icon"] .oe-icon-widget .oe-icon .oe-background * { transition: all 0.2s ease-in-out; } .oe-draggable-widget[eltype="icon"] .oe-icon-widget .oe-icon .oe-background .oe-background-fill { background-color: var(--desktop-background-color); opacity: var(--desktop-background-fill-opacity, 1); transition: all 0.2s ease-in-out; --test:10; } .oe-draggable-widget[eltype="icon"] .oe-icon-widget .oe-icon .oe-background .oe-background-gradient { opacity: var(--desktop-background-gradient-opacity, 1); background-image: var(--desktop-background-gradient); transition: all 0.2s ease-in-out; } .oe-draggable-widget[eltype="icon"] .oe-icon-widget .oe-icon .oe-background .oe-background-image { opacity: var(--desktop-background-image-opacity, 1); background-image: var(--desktop-background-image); background-repeat: var(--desktop-background-repeat, no-repeat); background-position: var(--desktop-background-position, center center); background-size: var(--desktop-background-size, cover); background-attachment: var(--desktop-background-attachment, cover); transition: all 0.2s ease-in-out; } .oe-draggable-widget[eltype="icon"] .oe-icon-widget .oe-icon:hover { border-width: var(--desktop-hover-border-width, var(--desktop-border-width, 0px)); border-style: var(--desktop-hover-border-style, var(--desktop-border-style, solid)); border-color: var(--desktop-hover-border-color, var(--desktop-border-color, #000000)); border-radius: var(--desktop-hover-border-radius, var(--desktop-border-radius, 0px)); opacity: var(--desktop-hover-opacity, var(--desktop-opacity, 1)); padding: var(--desktop-hover-padding, var(--desktop-padding, 0)); box-shadow: var(--desktop-hover-box-shadow, var(--desktop-box-shadow)); } .oe-draggable-widget[eltype="icon"] .oe-icon-widget .oe-icon:hover svg { width: var(--desktop-hover-icon-width, var(--desktop-icon-width, 100%)); height: var(--desktop-hover-icon-width, var(--desktop-icon-width, 100%)); fill: var(--desktop-hover-icon-color, var(--desktop-icon-color, #666666)); position: relative; } .oe-draggable-widget[eltype="icon"] .oe-icon-widget .oe-icon:hover .oe-background { pointer-events: none; overflow: hidden; transition: all 0.2s ease-in-out; } .oe-draggable-widget[eltype="icon"] .oe-icon-widget .oe-icon:hover .oe-background:after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 1; box-shadow: var(--desktop-hover-box-shadow, var(--desktop-box-shadow)); } .oe-draggable-widget[eltype="icon"] .oe-icon-widget .oe-icon:hover .oe-background * { transition: all 0.2s ease-in-out; } .oe-draggable-widget[eltype="icon"] .oe-icon-widget .oe-icon:hover .oe-background .oe-background-fill { background-color: var(--desktop-hover-background-color, var(--desktop-background-color)); opacity: var(--desktop-hover-background-fill-opacity, var(--desktop-background-fill-opacity, 1)); transition: all 0.2s ease-in-out; --test:10; } .oe-draggable-widget[eltype="icon"] .oe-icon-widget .oe-icon:hover .oe-background .oe-background-gradient { opacity: var(--desktop-hover-background-gradient-opacity, var(--desktop-background-gradient-opacity, 1)); background-image: var(--desktop-hover-background-gradient, var(--desktop-background-gradient)); transition: all 0.2s ease-in-out; } .oe-draggable-widget[eltype="icon"] .oe-icon-widget .oe-icon:hover .oe-background .oe-background-image { opacity: var(--desktop-hover-background-image-opacity, var(--desktop-background-image-opacity, 1)); background-image: var(--desktop-hover-background-image, var(--desktop-background-image)); background-repeat: var(--desktop-hover-background-repeat, var(--desktop-background-repeat, no-repeat)); background-position: var(--desktop-hover-background-position, var(--desktop-background-position, center center)); background-size: var(--desktop-hover-background-size, var(--desktop-background-size, cover)); background-attachment: var(--desktop-hover-background-attachment, var(--desktop-background-attachment, cover)); transition: all 0.2s ease-in-out; } .oe-draggable-widget[eltype="icon"].hovered .oe-icon-widget .oe-icon { border-width: var(--desktop-hover-border-width, var(--desktop-border-width, 0px)); border-style: var(--desktop-hover-border-style, var(--desktop-border-style, solid)); border-color: var(--desktop-hover-border-color, var(--desktop-border-color, #000000)); border-radius: var(--desktop-hover-border-radius, var(--desktop-border-radius, 0px)); opacity: var(--desktop-hover-opacity, var(--desktop-opacity, 1)); padding: var(--desktop-hover-padding, var(--desktop-padding, 0)); box-shadow: var(--desktop-hover-box-shadow, var(--desktop-box-shadow)); } .oe-draggable-widget[eltype="icon"].hovered .oe-icon-widget .oe-icon svg { width: var(--desktop-hover-icon-width, var(--desktop-icon-width, 100%)); height: var(--desktop-hover-icon-width, var(--desktop-icon-width, 100%)); fill: var(--desktop-hover-icon-color, var(--desktop-icon-color, #666666)); position: relative; } .oe-draggable-widget[eltype="icon"].hovered .oe-icon-widget .oe-icon .oe-background { pointer-events: none; overflow: hidden; transition: all 0.2s ease-in-out; } .oe-draggable-widget[eltype="icon"].hovered .oe-icon-widget .oe-icon .oe-background:after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 1; box-shadow: var(--desktop-hover-box-shadow, var(--desktop-box-shadow)); } .oe-draggable-widget[eltype="icon"].hovered .oe-icon-widget .oe-icon .oe-background * { transition: all 0.2s ease-in-out; } .oe-draggable-widget[eltype="icon"].hovered .oe-icon-widget .oe-icon .oe-background .oe-background-fill { background-color: var(--desktop-hover-background-color, var(--desktop-background-color)); opacity: var(--desktop-hover-background-fill-opacity, var(--desktop-background-fill-opacity, 1)); transition: all 0.2s ease-in-out; --test:10; } .oe-draggable-widget[eltype="icon"].hovered .oe-icon-widget .oe-icon .oe-background .oe-background-gradient { opacity: var(--desktop-hover-background-gradient-opacity, var(--desktop-background-gradient-opacity, 1)); background-image: var(--desktop-hover-background-gradient, var(--desktop-background-gradient)); transition: all 0.2s ease-in-out; } .oe-draggable-widget[eltype="icon"].hovered .oe-icon-widget .oe-icon .oe-background .oe-background-image { opacity: var(--desktop-hover-background-image-opacity, var(--desktop-background-image-opacity, 1)); background-image: var(--desktop-hover-background-image, var(--desktop-background-image)); background-repeat: var(--desktop-hover-background-repeat, var(--desktop-background-repeat, no-repeat)); background-position: var(--desktop-hover-background-position, var(--desktop-background-position, center center)); background-size: var(--desktop-hover-background-size, var(--desktop-background-size, cover)); background-attachment: var(--desktop-hover-background-attachment, var(--desktop-background-attachment, cover)); transition: all 0.2s ease-in-out; } @media (min-width: 768px) and (max-width: 1024px) { .oe-draggable-widget[eltype="icon"] .oe-icon-widget .oe-icon { justify-content: var(--tablet-justify-content, var(--desktop-justify-content, center)); align-items: var(--tablet-align-items, var(--desktop-align-items, center)); border-width: var(--tablet-border-width, var(--desktop-border-width, 0px)); border-style: var(--tablet-border-style, var(--desktop-border-style, solid)); border-color: var(--tablet-border-color, var(--desktop-border-color, #000000)); border-radius: var(--tablet-border-radius, var(--desktop-border-radius, 0px)); opacity: var(--tablet-opacity, var(--desktop-opacity, 1)); padding: var(--tablet-padding, var(--desktop-padding, 0)); box-shadow: var(--tablet-box-shadow, var(--desktop-box-shadow)); } .oe-draggable-widget[eltype="icon"] .oe-icon-widget .oe-icon svg { width: var(--tablet-icon-width, var(--desktop-icon-width, 100%)); height: var(--tablet-icon-width, var(--desktop-icon-width, 100%)); fill: var(--tablet-icon-color, var(--desktop-icon-color, #666666)); position: relative; } .oe-draggable-widget[eltype="icon"] .oe-icon-widget .oe-icon .oe-background { pointer-events: none; overflow: hidden; transition: all 0.2s ease-in-out; } .oe-draggable-widget[eltype="icon"] .oe-icon-widget .oe-icon .oe-background:after { box-shadow: var(--tablet-box-shadow, var(--desktop-box-shadow)); } .oe-draggable-widget[eltype="icon"] .oe-icon-widget .oe-icon .oe-background * { transition: all 0.2s ease-in-out; } .oe-draggable-widget[eltype="icon"] .oe-icon-widget .oe-icon .oe-background .oe-background-fill { background-color: var(--tablet-background-color, var(--desktop-background-color)); opacity: var(--tablet-background-fill-opacity, var(--desktop-background-fill-opacity, 1)); transition: all 0.2s ease-in-out; --test:10; } .oe-draggable-widget[eltype="icon"] .oe-icon-widget .oe-icon .oe-background .oe-background-gradient { opacity: var(--tablet-background-gradient-opacity, var(--desktop-background-gradient-opacity, 1)); background-image: var(--tablet-background-gradient, var(--desktop-background-gradient)); transition: all 0.2s ease-in-out; } .oe-draggable-widget[eltype="icon"] .oe-icon-widget .oe-icon .oe-background .oe-background-image { opacity: var(--tablet-background-image-opacity, var(--desktop-background-image-opacity, 1)); background-image: var(--tablet-background-image, var(--desktop-background-image)); background-repeat: var(--tablet-background-repeat, var(--desktop-background-repeat, no-repeat)); background-position: var(--tablet-background-position, var(--desktop-background-position, center center)); background-size: var(--tablet-background-size, var(--desktop-background-size, cover)); background-attachment: var(--tablet-background-attachment, var(--desktop-background-attachment, cover)); transition: all 0.2s ease-in-out; } .oe-draggable-widget[eltype="icon"] .oe-icon-widget .oe-icon:hover { border-width: var(--tablet-hover-border-width, var(--tablet-border-width, var(--desktop-hover-border-width, var(--desktop-border-width, 0px)))); border-style: var(--tablet-hover-border-style, var(--tablet-border-style, var(--desktop-hover-border-style, var(--desktop-border-style, solid)))); border-color: var(--tablet-hover-border-color, var(--tablet-border-color, var(--desktop-hover-border-color, var(--desktop-border-color, #000000)))); border-radius: var(--tablet-hover-border-radius, var(--tablet-border-radius, var(--desktop-hover-border-radius, var(--desktop-border-radius, 0px)))); opacity: var(--tablet-hover-opacity, var(--tablet-opacity, var(--desktop-hover-opacity, var(--desktop-opacity, 1)))); padding: var(--tablet-hover-padding, var(--tablet-padding, var(--desktop-hover-padding, var(--desktop-padding, 0)))); box-shadow: var(--tablet-hover-box-shadow, var(--tablet-box-shadow, var(--desktop-hover-box-shadow, var(--desktop-box-shadow)))); } .oe-draggable-widget[eltype="icon"] .oe-icon-widget .oe-icon:hover svg { width: var(--tablet-hover-icon-width, var(--tablet-icon-width, var(--desktop-hover-icon-width, var(--desktop-icon-width, , 100%)))); height: var(--tablet-hover-icon-width, var(--tablet-icon-width, var(--desktop-hover-icon-width, var(--desktop-icon-width, , 100%)))); fill: var(--tablet-hover-icon-color, var(--tablet-icon-color, var(--desktop-hover-icon-color, var(--desktop-icon-color, , #666666)))); } .oe-draggable-widget[eltype="icon"] .oe-icon-widget .oe-icon:hover .oe-background { pointer-events: none; overflow: hidden; transition: all 0.2s ease-in-out; } .oe-draggable-widget[eltype="icon"] .oe-icon-widget .oe-icon:hover .oe-background:after { box-shadow: var(--tablet-hover-box-shadow, var(--tablet-box-shadow, var(--desktop-hover-box-shadow, var(--desktop-box-shadow)))); } .oe-draggable-widget[eltype="icon"] .oe-icon-widget .oe-icon:hover .oe-background * { transition: all 0.2s ease-in-out; } .oe-draggable-widget[eltype="icon"] .oe-icon-widget .oe-icon:hover .oe-background .oe-background-fill { background-color: var(--tablet-hover-background-color, var(--tablet-background-color, var(--desktop-hover-background-color, var(--desktop-background-color)))); opacity: var(--tablet-hover-background-fill-opacity, var(--tablet-background-fill-opacity, var(--desktop-hover-background-fill-opacity, var(--desktop-background-fill-opacity, 1)))); transition: all 0.2s ease-in-out; --test:10; } .oe-draggable-widget[eltype="icon"] .oe-icon-widget .oe-icon:hover .oe-background .oe-background-gradient { opacity: var(--tablet-hover-background-gradient-opacity, var(--tablet-background-gradient-opacity, var(--desktop-hover-background-gradient-opacity, var(--desktop-background-gradient-opacity, 1)))); background-image: var(--tablet-hover-background-gradient, var(--tablet-background-gradient, var(--desktop-hover-background-gradient, var(--desktop-background-gradient, )))); transition: all 0.2s ease-in-out; } .oe-draggable-widget[eltype="icon"] .oe-icon-widget .oe-icon:hover .oe-background .oe-background-image { opacity: var(--tablet-hover-background-image-opacity, var(--tablet-background-image-opacity, var(--desktop-hover-background-image-opacity, var(--desktop-background-image-opacity, 1)))); background-image: var(--tablet-hover-background-image, var(--tablet-background-image, var(--desktop-hover-background-image, var(--desktop-background-image)))); background-repeat: var(--tablet-hover-background-repeat, var(--tablet-background-repeat, var(--desktop-hover-background-repeat, var(--desktop-background-repeat, no-repeat)))); background-position: var(--tablet-hover-background-position, var(--tablet-background-position, var(--desktop-hover-background-position, var(--desktop-background-position, center center)))); background-size: var(--tablet-hover-background-size, var(--tablet-background-size, var(--desktop-hover-background-size, var(--desktop-background-size, cover)))); background-attachment: var(--tablet-hover-background-attachment, var(--tablet-background-attachment, var(--desktop-hover-background-attachment, var(--desktop-background-attachment, cover)))); transition: all 0.2s ease-in-out; } .oe-draggable-widget[eltype="icon"].hovered .oe-icon-widget .oe-icon { border-width: var(--tablet-hover-border-width, var(--tablet-border-width, var(--desktop-hover-border-width, var(--desktop-border-width, 0px)))); border-style: var(--tablet-hover-border-style, var(--tablet-border-style, var(--desktop-hover-border-style, var(--desktop-border-style, solid)))); border-color: var(--tablet-hover-border-color, var(--tablet-border-color, var(--desktop-hover-border-color, var(--desktop-border-color, #000000)))); border-radius: var(--tablet-hover-border-radius, var(--tablet-border-radius, var(--desktop-hover-border-radius, var(--desktop-border-radius, 0px)))); opacity: var(--tablet-hover-opacity, var(--tablet-opacity, var(--desktop-hover-opacity, var(--desktop-opacity, 1)))); padding: var(--tablet-hover-padding, var(--tablet-padding, var(--desktop-hover-padding, var(--desktop-padding, 0)))); box-shadow: var(--tablet-hover-box-shadow, var(--tablet-box-shadow, var(--desktop-hover-box-shadow, var(--desktop-box-shadow)))); } .oe-draggable-widget[eltype="icon"].hovered .oe-icon-widget .oe-icon svg { width: var(--tablet-hover-icon-width, var(--tablet-icon-width, var(--desktop-hover-icon-width, var(--desktop-icon-width, , 100%)))); height: var(--tablet-hover-icon-width, var(--tablet-icon-width, var(--desktop-hover-icon-width, var(--desktop-icon-width, , 100%)))); fill: var(--tablet-hover-icon-color, var(--tablet-icon-color, var(--desktop-hover-icon-color, var(--desktop-icon-color, , #666666)))); position: relative; } .oe-draggable-widget[eltype="icon"].hovered .oe-icon-widget .oe-icon .oe-background { pointer-events: none; overflow: hidden; transition: all 0.2s ease-in-out; } .oe-draggable-widget[eltype="icon"].hovered .oe-icon-widget .oe-icon .oe-background:after { box-shadow: var(--tablet-hover-box-shadow, var(--tablet-box-shadow, var(--desktop-hover-box-shadow, var(--desktop-box-shadow)))); } .oe-draggable-widget[eltype="icon"].hovered .oe-icon-widget .oe-icon .oe-background * { transition: all 0.2s ease-in-out; } .oe-draggable-widget[eltype="icon"].hovered .oe-icon-widget .oe-icon .oe-background .oe-background-fill { background-color: var(--tablet-hover-background-color, var(--tablet-background-color, var(--desktop-hover-background-color, var(--desktop-background-color)))); opacity: var(--tablet-hover-background-fill-opacity, var(--tablet-background-fill-opacity, var(--desktop-hover-background-fill-opacity, var(--desktop-background-fill-opacity, 1)))); transition: all 0.2s ease-in-out; --test:10; } .oe-draggable-widget[eltype="icon"].hovered .oe-icon-widget .oe-icon .oe-background .oe-background-gradient { opacity: var(--tablet-hover-background-gradient-opacity, var(--tablet-background-gradient-opacity, var(--desktop-hover-background-gradient-opacity, var(--desktop-background-gradient-opacity, 1)))); background-image: var(--tablet-hover-background-gradient, var(--tablet-background-gradient, var(--desktop-hover-background-gradient, var(--desktop-background-gradient, )))); transition: all 0.2s ease-in-out; } .oe-draggable-widget[eltype="icon"].hovered .oe-icon-widget .oe-icon .oe-background .oe-background-image { opacity: var(--tablet-hover-background-image-opacity, var(--tablet-background-image-opacity, var(--desktop-hover-background-image-opacity, var(--desktop-background-image-opacity, 1)))); background-image: var(--tablet-hover-background-image, var(--tablet-background-image, var(--desktop-hover-background-image, var(--desktop-background-image)))); background-repeat: var(--tablet-hover-background-repeat, var(--tablet-background-repeat, var(--desktop-hover-background-repeat, var(--desktop-background-repeat, no-repeat)))); background-position: var(--tablet-hover-background-position, var(--tablet-background-position, var(--desktop-hover-background-position, var(--desktop-background-position, center center)))); background-size: var(--tablet-hover-background-size, var(--tablet-background-size, var(--desktop-hover-background-size, var(--desktop-background-size, cover)))); background-attachment: var(--tablet-hover-background-attachment, var(--tablet-background-attachment, var(--desktop-hover-background-attachment, var(--desktop-background-attachment, cover)))); transition: all 0.2s ease-in-out; } } @media (min-width: 320px) and (max-width: 767px) { [elType='section'] > [elType='container'] > .oe-draggable-widget[eltype="icon"] { width: var(--mobile-widget-width, calc(var(--dcw) * var(--desktop-gridArea-width) * 1rem)) !important; height: var(--mobile-widget-width, calc(var(--dcw) * var(--desktop-gridArea-height) * 1rem)) !important; min-width: var(--mobile-widget-width, inherit); min-height: var(--mobile-widget-height, inherit); max-width: var(--mobile-widget-width, 100%); max-height: var(--mobile-widget-height, 100%); align-self: var(--mobile-justify-content, center); } .oe-draggable-widget[eltype="icon"] .oe-icon-widget .oe-icon { justify-content: var(--mobile-justify-content, var(--tablet-justify-content, var(--desktop-justify-content, center))); align-items: var(--mobile-align-items, var(--tablet-align-items, var(--desktop-align-items, center))); border-width: var(--mobile-border-width, var(--tablet-border-width, var(--desktop-border-width, 0px))); border-style: var(--mobile-border-style, var(--tablet-border-style, var(--desktop-border-style, solid))); border-color: var(--mobile-border-color, var(--tablet-border-color, var(--desktop-border-color, #000000))); border-radius: var(--mobile-border-radius, var(--tablet-border-radius, var(--desktop-border-radius, 0px))); opacity: var(--mobile-opacity, var(--tablet-opacity, var(--desktop-opacity, 1))); padding: var(--mobile-padding, var(--tablet-padding, var(--desktop-padding, 0))); box-shadow: var(--mobile-box-shadow, var(--tablet-box-shadow, var(--desktop-box-shadow))); } .oe-draggable-widget[eltype="icon"] .oe-icon-widget .oe-icon svg { width: var(--mobile-icon-width, var(--tablet-icon-width, var(--desktop-icon-width, 100%))); height: var(--mobile-icon-width, var(--tablet-icon-width, var(--desktop-icon-width, 100%))); fill: var(--mobile-icon-color, var(--tablet-icon-color, var(--desktop-icon-color, #666666))); position: relative; } .oe-draggable-widget[eltype="icon"] .oe-icon-widget .oe-icon .oe-background { pointer-events: none; overflow: hidden; transition: all 0.2s ease-in-out; } .oe-draggable-widget[eltype="icon"] .oe-icon-widget .oe-icon .oe-background:after { box-shadow: var(--mobile-box-shadow, var(--tablet-box-shadow, var(--desktop-box-shadow))); } .oe-draggable-widget[eltype="icon"] .oe-icon-widget .oe-icon .oe-background * { transition: all 0.2s ease-in-out; } .oe-draggable-widget[eltype="icon"] .oe-icon-widget .oe-icon .oe-background .oe-background-fill { background-color: var(--mobile-background-color, var(--tablet-background-color, var(--desktop-background-color))); opacity: var(--mobile-background-fill-opacity, var(--tablet-background-fill-opacity, var(--desktop-background-fill-opacity, 1))); transition: all 0.2s ease-in-out; --test:10; } .oe-draggable-widget[eltype="icon"] .oe-icon-widget .oe-icon .oe-background .oe-background-gradient { opacity: var(--mobile-background-gradient-opacity, var(--tablet-background-gradient-opacity, var(--desktop-background-gradient-opacity, 1))); background-image: var(--mobile-background-gradient, var(--tablet-background-gradient, var(--desktop-background-gradient))); transition: all 0.2s ease-in-out; } .oe-draggable-widget[eltype="icon"] .oe-icon-widget .oe-icon .oe-background .oe-background-image { opacity: var(--mobile-background-image-opacity, var(--tablet-background-image-opacity, var(--desktop-background-image-opacity, 1))); background-image: var(--mobile-background-image, var(--tablet-background-image, var(--desktop-background-image))); background-repeat: var(--mobile-background-repeat, var(--tablet-background-repeat, var(--desktop-background-repeat, no-repeat))); background-position: var(--mobile-background-position, var(--tablet-background-position, var(--desktop-background-position, center center))); background-size: var(--mobile-background-size, var(--tablet-background-size, var(--desktop-background-size, cover))); background-attachment: var(--mobile-background-attachment, var(--tablet-background-attachment, var(--desktop-background-attachment, cover))); transition: all 0.2s ease-in-out; } .oe-draggable-widget[eltype="icon"] .oe-icon-widget .oe-icon:hover { border-width: var(--mobile-hover-border-width, var(--mobile-border-width, var(--tablet-hover-border-width, var(--tablet-border-width, var(--desktop-hover-border-width, var(--desktop-border-width, 0px)))))); border-style: var(--mobile-hover-border-style, var(--mobile-border-style, var(--tablet-hover-border-style, var(--tablet-border-style, var(--desktop-hover-border-style, var(--desktop-border-style, solid)))))); border-color: var(--mobile-hover-border-color, var(--mobile-border-color, var(--tablet-hover-border-color, var(--tablet-border-color, var(--desktop-hover-border-color, var(--desktop-border-color, #000000)))))); border-radius: var(--mobile-hover-border-radius, var(--mobile-border-radius, var(--tablet-hover-border-radius, var(--tablet-border-radius, var(--desktop-hover-border-radius, var(--desktop-border-radius, 0px)))))); opacity: var(--mobile-hover-opacity, var(--mobile-opacity, var(--tablet-hover-opacity, var(--tablet-opacity, var(--desktop-hover-opacity, var(--desktop-opacity, 1)))))); padding: var(--mobile-hover-padding, var(--mobile-padding, var(--tablet-hover-padding, var(--tablet-padding, var(--desktop-hover-padding, var(--desktop-padding, 0)))))); box-shadow: var(--mobile-hover-box-shadow, var(--mobile-box-shadow, var(--tablet-hover-box-shadow, var(--tablet-box-shadow, var(--desktop-hover-box-shadow, var(--desktop-box-shadow)))))); } .oe-draggable-widget[eltype="icon"] .oe-icon-widget .oe-icon:hover svg { width: var(--mobile-hover-icon-width, var(--mobile-icon-width, var(--tablet-hover-icon-width, var(--tablet-icon-width, var(--desktop-hover-icon-width, var(--desktop-icon-width, , 100%)))))); height: var(--mobile-hover-icon-width, var(--mobile-icon-width, var(--tablet-hover-icon-width, var(--tablet-icon-width, var(--desktop-hover-icon-width, var(--desktop-icon-width, , 100%)))))); fill: var(--mobile-hover-icon-color, var(--mobile-icon-color, var(--tablet-hover-icon-color, var(--tablet-icon-color, var(--desktop-hover-icon-color, var(--desktop-icon-color, , #666666)))))); } .oe-draggable-widget[eltype="icon"] .oe-icon-widget .oe-icon:hover .oe-background { pointer-events: none; overflow: hidden; transition: all 0.2s ease-in-out; } .oe-draggable-widget[eltype="icon"] .oe-icon-widget .oe-icon:hover .oe-background:after { box-shadow: var(--mobile-hover-box-shadow, var(--mobile-box-shadow, var(--tablet-hover-box-shadow, var(--tablet-box-shadow, var(--desktop-hover-box-shadow, var(--desktop-box-shadow)))))); } .oe-draggable-widget[eltype="icon"] .oe-icon-widget .oe-icon:hover .oe-background * { transition: all 0.2s ease-in-out; } .oe-draggable-widget[eltype="icon"] .oe-icon-widget .oe-icon:hover .oe-background .oe-background-fill { background-color: var(--mobile-hover-background-color, var(--mobile-background-color, var(--tablet-hover-background-color, var(--tablet-background-color, var(--desktop-hover-background-color, var(--desktop-background-color)))))); opacity: var(--mobile-hover-background-fill-opacity, var(--mobile-background-fill-opacity, var(--tablet-hover-background-fill-opacity, var(--tablet-background-fill-opacity, var(--desktop-hover-background-fill-opacity, var(--desktop-background-fill-opacity, 1)))))); transition: all 0.2s ease-in-out; --test:10; } .oe-draggable-widget[eltype="icon"] .oe-icon-widget .oe-icon:hover .oe-background .oe-background-gradient { opacity: var(--mobile-hover-background-gradient-opacity, var(--mobile-background-gradient-opacity, var(--tablet-hover-background-gradient-opacity, var(--tablet-background-gradient-opacity, var(--desktop-hover-background-gradient-opacity, var(--desktop-background-gradient-opacity, 1)))))); background-image: var(--mobile-hover-background-gradient, var(--mobile-background-gradient, var(--tablet-hover-background-gradient, var(--tablet-background-gradient, var(--desktop-hover-background-gradient, var(--desktop-background-gradient, )))))); transition: all 0.2s ease-in-out; } .oe-draggable-widget[eltype="icon"] .oe-icon-widget .oe-icon:hover .oe-background .oe-background-image { opacity: var(--mobile-hover-background-image-opacity, var(--mobile-background-image-opacity, var(--tablet-hover-background-image-opacity, var(--tablet-background-image-opacity, var(--desktop-hover-background-image-opacity, var(--desktop-background-image-opacity, 1)))))); background-image: var(--mobile-hover-background-image, var(--mobile-background-image, var(--tablet-hover-background-image, var(--tablet-background-image, var(--desktop-hover-background-image, var(--desktop-background-image)))))); background-repeat: var(--mobile-hover-background-repeat, var(--mobile-background-repeat, var(--tablet-hover-background-repeat, var(--tablet-background-repeat, var(--desktop-hover-background-repeat, var(--desktop-background-repeat, no-repeat)))))); background-position: var(--mobile-hover-background-position, var(--mobile-background-position, var(--tablet-hover-background-position, var(--tablet-background-position, var(--desktop-hover-background-position, var(--desktop-background-position, center center)))))); background-size: var(--mobile-hover-background-size, var(--mobile-background-size, var(--tablet-hover-background-size, var(--tablet-background-size, var(--desktop-hover-background-size, var(--desktop-background-size, cover)))))); background-attachment: var(--mobile-hover-background-attachment, var(--mobile-background-attachment, var(--tablet-hover-background-attachment, var(--tablet-background-attachment, var(--desktop-hover-background-attachment, var(--desktop-background-attachment, cover)))))); transition: all 0.2s ease-in-out; } .oe-draggable-widget[eltype="icon"].hovered .oe-icon-widget .oe-icon { border-width: var(--mobile-hover-border-width, var(--mobile-border-width, var(--tablet-hover-border-width, var(--tablet-border-width, var(--desktop-hover-border-width, var(--desktop-border-width, 0px)))))); border-style: var(--mobile-hover-border-style, var(--mobile-border-style, var(--tablet-hover-border-style, var(--tablet-border-style, var(--desktop-hover-border-style, var(--desktop-border-style, solid)))))); border-color: var(--mobile-hover-border-color, var(--mobile-border-color, var(--tablet-hover-border-color, var(--tablet-border-color, var(--desktop-hover-border-color, var(--desktop-border-color, #000000)))))); border-radius: var(--mobile-hover-border-radius, var(--mobile-border-radius, var(--tablet-hover-border-radius, var(--tablet-border-radius, var(--desktop-hover-border-radius, var(--desktop-border-radius, 0px)))))); opacity: var(--mobile-hover-opacity, var(--mobile-opacity, var(--tablet-hover-opacity, var(--tablet-opacity, var(--desktop-hover-opacity, var(--desktop-opacity, 1)))))); padding: var(--mobile-hover-padding, var(--mobile-padding, var(--tablet-hover-padding, var(--tablet-padding, var(--desktop-hover-padding, var(--desktop-padding, 0)))))); box-shadow: var(--mobile-hover-box-shadow, var(--mobile-box-shadow, var(--tablet-hover-box-shadow, var(--tablet-box-shadow, var(--desktop-hover-box-shadow, var(--desktop-box-shadow)))))); } .oe-draggable-widget[eltype="icon"].hovered .oe-icon-widget .oe-icon svg { width: var(--mobile-hover-icon-width, var(--mobile-icon-width, var(--tablet-hover-icon-width, var(--tablet-icon-width, var(--desktop-hover-icon-width, var(--desktop-icon-width, , 100%)))))); height: var(--mobile-hover-icon-width, var(--mobile-icon-width, var(--tablet-hover-icon-width, var(--tablet-icon-width, var(--desktop-hover-icon-width, var(--desktop-icon-width, , 100%)))))); fill: var(--mobile-hover-icon-color, var(--mobile-icon-color, var(--tablet-hover-icon-color, var(--tablet-icon-color, var(--desktop-hover-icon-color, var(--desktop-icon-color, , #666666)))))); position: relative; } .oe-draggable-widget[eltype="icon"].hovered .oe-icon-widget .oe-icon .oe-background { pointer-events: none; overflow: hidden; transition: all 0.2s ease-in-out; } .oe-draggable-widget[eltype="icon"].hovered .oe-icon-widget .oe-icon .oe-background:after { box-shadow: var(--mobile-hover-box-shadow, var(--mobile-box-shadow, var(--tablet-hover-box-shadow, var(--tablet-box-shadow, var(--desktop-hover-box-shadow, var(--desktop-box-shadow)))))); } .oe-draggable-widget[eltype="icon"].hovered .oe-icon-widget .oe-icon .oe-background * { transition: all 0.2s ease-in-out; } .oe-draggable-widget[eltype="icon"].hovered .oe-icon-widget .oe-icon .oe-background .oe-background-fill { background-color: var(--mobile-hover-background-color, var(--mobile-background-color, var(--tablet-hover-background-color, var(--tablet-background-color, var(--desktop-hover-background-color, var(--desktop-background-color)))))); opacity: var(--mobile-hover-background-fill-opacity, var(--mobile-background-fill-opacity, var(--tablet-hover-background-fill-opacity, var(--tablet-background-fill-opacity, var(--desktop-hover-background-fill-opacity, var(--desktop-background-fill-opacity, 1)))))); transition: all 0.2s ease-in-out; --test:10; } .oe-draggable-widget[eltype="icon"].hovered .oe-icon-widget .oe-icon .oe-background .oe-background-gradient { opacity: var(--mobile-hover-background-gradient-opacity, var(--mobile-background-gradient-opacity, var(--tablet-hover-background-gradient-opacity, var(--tablet-background-gradient-opacity, var(--desktop-hover-background-gradient-opacity, var(--desktop-background-gradient-opacity, 1)))))); background-image: var(--mobile-hover-background-gradient, var(--mobile-background-gradient, var(--tablet-hover-background-gradient, var(--tablet-background-gradient, var(--desktop-hover-background-gradient, var(--desktop-background-gradient, )))))); transition: all 0.2s ease-in-out; } .oe-draggable-widget[eltype="icon"].hovered .oe-icon-widget .oe-icon .oe-background .oe-background-image { opacity: var(--mobile-hover-background-image-opacity, var(--mobile-background-image-opacity, var(--tablet-hover-background-image-opacity, var(--tablet-background-image-opacity, var(--desktop-hover-background-image-opacity, var(--desktop-background-image-opacity, 1)))))); background-image: var(--mobile-hover-background-image, var(--mobile-background-image, var(--tablet-hover-background-image, var(--tablet-background-image, var(--desktop-hover-background-image, var(--desktop-background-image)))))); background-repeat: var(--mobile-hover-background-repeat, var(--mobile-background-repeat, var(--tablet-hover-background-repeat, var(--tablet-background-repeat, var(--desktop-hover-background-repeat, var(--desktop-background-repeat, no-repeat)))))); background-position: var(--mobile-hover-background-position, var(--mobile-background-position, var(--tablet-hover-background-position, var(--tablet-background-position, var(--desktop-hover-background-position, var(--desktop-background-position, center center)))))); background-size: var(--mobile-hover-background-size, var(--mobile-background-size, var(--tablet-hover-background-size, var(--tablet-background-size, var(--desktop-hover-background-size, var(--desktop-background-size, cover)))))); background-attachment: var(--mobile-hover-background-attachment, var(--mobile-background-attachment, var(--tablet-hover-background-attachment, var(--tablet-background-attachment, var(--desktop-hover-background-attachment, var(--desktop-background-attachment, cover)))))); transition: all 0.2s ease-in-out; } } @media (min-width: 320px) and (max-width: 767px) { [elType='section'] > [elType='container'] > .oe-draggable-widget[eltype="map"] { width: var(--mobile-widget-width, calc(var(--dcw) * var(--desktop-gridArea-width) * 1rem)) !important; height: var(--mobile-widget-width, calc(var(--dcw) * var(--desktop-gridArea-height) * 1rem)) !important; min-width: var(--mobile-widget-width, inherit); min-height: var(--mobile-widget-height, inherit); max-width: var(--mobile-widget-width, 100%); max-height: var(--mobile-widget-height, 100%); align-self: var(--mobile-justify-content, center); } } .oe-draggable-widget[eltype="shape"]:not(.svg-preserve-aspect-ratio) .oe-shape > svg { width: 100% !important; height: 100% !important; } .oe-draggable-widget[eltype="shape"].svg-overflow a.oe-shape { overflow: visible !important; } .oe-draggable-widget[eltype="shape"] .oe-shape > svg { overflow: visible !important; } .oe-draggable-widget[eltype="shape"] .oe-shape-widget { position: absolute !important; } .oe-draggable-widget[eltype="shape"] .oe-shape-widget .oe-shape { display: flex; position: absolute; left: 0px; right: 0px; top: 0px; bottom: 0px; overflow: hidden; justify-content: var(--desktop-justify-content, center); align-items: var(--desktop-align-items, center); border-width: var(--desktop-border-width, 0px); border-style: var(--desktop-border-style, solid); border-color: var(--desktop-border-color, #000000); border-radius: var(--desktop-border-radius, 0px); opacity: var(--desktop-opacity, 1); padding: var(--desktop-padding, 0); box-shadow: var(--desktop-box-shadow); } .oe-draggable-widget[eltype="shape"] .oe-shape-widget .oe-shape svg { max-width: 100%; max-height: 100%; width: var(--desktop-shape-width, 100%); height: var(--desktop-shape-width, 100%); rotate: var(--desktop-shape-angle, 0deg); fill: var(--desktop-shape-fill, #66666600); stroke: var(--desktop-shape-stroke, #666666); stroke-width: var(--desktop-shape-stroke-width, #666666); position: relative; } .oe-draggable-widget[eltype="shape"] .oe-shape-widget .oe-shape .oe-background { pointer-events: none; overflow: hidden; transition: all 0.2s ease-in-out; } .oe-draggable-widget[eltype="shape"] .oe-shape-widget .oe-shape .oe-background:after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 1; box-shadow: var(--desktop-box-shadow); } .oe-draggable-widget[eltype="shape"] .oe-shape-widget .oe-shape .oe-background * { transition: all 0.2s ease-in-out; } .oe-draggable-widget[eltype="shape"] .oe-shape-widget .oe-shape .oe-background .oe-background-fill { background-color: var(--desktop-background-color); opacity: var(--desktop-background-fill-opacity, 1); transition: all 0.2s ease-in-out; --test:10; } .oe-draggable-widget[eltype="shape"] .oe-shape-widget .oe-shape .oe-background .oe-background-gradient { opacity: var(--desktop-background-gradient-opacity, 1); background-image: var(--desktop-background-gradient); transition: all 0.2s ease-in-out; } .oe-draggable-widget[eltype="shape"] .oe-shape-widget .oe-shape .oe-background .oe-background-image { opacity: var(--desktop-background-image-opacity, 1); background-image: var(--desktop-background-image); background-repeat: var(--desktop-background-repeat, no-repeat); background-position: var(--desktop-background-position, center center); background-size: var(--desktop-background-size, cover); background-attachment: var(--desktop-background-attachment, cover); transition: all 0.2s ease-in-out; } .oe-draggable-widget[eltype="shape"] .oe-shape-widget .oe-shape:hover { border-width: var(--desktop-hover-border-width, var(--desktop-border-width, 0px)); border-style: var(--desktop-hover-border-style, var(--desktop-border-style, solid)); border-color: var(--desktop-hover-border-color, var(--desktop-border-color, #000000)); border-radius: var(--desktop-hover-border-radius, var(--desktop-border-radius, 0px)); opacity: var(--desktop-hover-opacity, var(--desktop-opacity, 1)); padding: var(--desktop-hover-padding, var(--desktop-padding, 0)); box-shadow: var(--desktop-hover-box-shadow, var(--desktop-box-shadow)); } .oe-draggable-widget[eltype="shape"] .oe-shape-widget .oe-shape:hover svg { width: var(--desktop-hover-shape-width, var(--desktop-shape-width, 100%)); height: var(--desktop-hover-shape-width, var(--desktop-shape-width, 100%)); rotate: var(--desktop-hover-shape-angle, var(--desktop-shape-angle, 0deg)); fill: var(--desktop-hover-shape-fill, var(--desktop-shape-fill, #66666600)); stroke: var(--desktop-hover-shape-stroke, var(--desktop-shape-stroke, #666666)); stroke-width: var(--desktop-hover-shape-stroke-width, var(--desktop-shape-stroke-width, #666666)); position: relative; } .oe-draggable-widget[eltype="shape"] .oe-shape-widget .oe-shape:hover .oe-background { pointer-events: none; overflow: hidden; transition: all 0.2s ease-in-out; } .oe-draggable-widget[eltype="shape"] .oe-shape-widget .oe-shape:hover .oe-background:after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 1; box-shadow: var(--desktop-hover-box-shadow, var(--desktop-box-shadow)); } .oe-draggable-widget[eltype="shape"] .oe-shape-widget .oe-shape:hover .oe-background * { transition: all 0.2s ease-in-out; } .oe-draggable-widget[eltype="shape"] .oe-shape-widget .oe-shape:hover .oe-background .oe-background-fill { background-color: var(--desktop-hover-background-color, var(--desktop-background-color)); opacity: var(--desktop-hover-background-fill-opacity, var(--desktop-background-fill-opacity, 1)); transition: all 0.2s ease-in-out; --test:10; } .oe-draggable-widget[eltype="shape"] .oe-shape-widget .oe-shape:hover .oe-background .oe-background-gradient { opacity: var(--desktop-hover-background-gradient-opacity, var(--desktop-background-gradient-opacity, 1)); background-image: var(--desktop-hover-background-gradient, var(--desktop-background-gradient)); transition: all 0.2s ease-in-out; } .oe-draggable-widget[eltype="shape"] .oe-shape-widget .oe-shape:hover .oe-background .oe-background-image { opacity: var(--desktop-hover-background-image-opacity, var(--desktop-background-image-opacity, 1)); background-image: var(--desktop-hover-background-image, var(--desktop-background-image)); background-repeat: var(--desktop-hover-background-repeat, var(--desktop-background-repeat, no-repeat)); background-position: var(--desktop-hover-background-position, var(--desktop-background-position, center center)); background-size: var(--desktop-hover-background-size, var(--desktop-background-size, cover)); background-attachment: var(--desktop-hover-background-attachment, var(--desktop-background-attachment, cover)); transition: all 0.2s ease-in-out; } .oe-draggable-widget[eltype="shape"].hovered .oe-shape-widget .oe-shape { border-width: var(--desktop-hover-border-width, var(--desktop-border-width, 0px)); border-style: var(--desktop-hover-border-style, var(--desktop-border-style, solid)); border-color: var(--desktop-hover-border-color, var(--desktop-border-color, #000000)); border-radius: var(--desktop-hover-border-radius, var(--desktop-border-radius, 0px)); opacity: var(--desktop-hover-opacity, var(--desktop-opacity, 1)); padding: var(--desktop-hover-padding, var(--desktop-padding, 0)); box-shadow: var(--desktop-hover-box-shadow, var(--desktop-box-shadow)); } .oe-draggable-widget[eltype="shape"].hovered .oe-shape-widget .oe-shape svg { width: var(--desktop-hover-shape-width, var(--desktop-shape-width, 100%)); height: var(--desktop-hover-shape-width, var(--desktop-shape-width, 100%)); rotate: var(--desktop-hover-shape-angle, var(--desktop-shape-angle, 0deg)); fill: var(--desktop-hover-shape-fill, var(--desktop-shape-fill, #66666600)); stroke: var(--desktop-hover-shape-stroke, var(--desktop-shape-stroke, #666666)); stroke-width: var(--desktop-hover-shape-stroke-width, var(--desktop-shape-stroke-width, #666666)); position: relative; } .oe-draggable-widget[eltype="shape"].hovered .oe-shape-widget .oe-shape .oe-background { pointer-events: none; overflow: hidden; transition: all 0.2s ease-in-out; } .oe-draggable-widget[eltype="shape"].hovered .oe-shape-widget .oe-shape .oe-background:after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 1; box-shadow: var(--desktop-hover-box-shadow, var(--desktop-box-shadow)); } .oe-draggable-widget[eltype="shape"].hovered .oe-shape-widget .oe-shape .oe-background * { transition: all 0.2s ease-in-out; } .oe-draggable-widget[eltype="shape"].hovered .oe-shape-widget .oe-shape .oe-background .oe-background-fill { background-color: var(--desktop-hover-background-color, var(--desktop-background-color)); opacity: var(--desktop-hover-background-fill-opacity, var(--desktop-background-fill-opacity, 1)); transition: all 0.2s ease-in-out; --test:10; } .oe-draggable-widget[eltype="shape"].hovered .oe-shape-widget .oe-shape .oe-background .oe-background-gradient { opacity: var(--desktop-hover-background-gradient-opacity, var(--desktop-background-gradient-opacity, 1)); background-image: var(--desktop-hover-background-gradient, var(--desktop-background-gradient)); transition: all 0.2s ease-in-out; } .oe-draggable-widget[eltype="shape"].hovered .oe-shape-widget .oe-shape .oe-background .oe-background-image { opacity: var(--desktop-hover-background-image-opacity, var(--desktop-background-image-opacity, 1)); background-image: var(--desktop-hover-background-image, var(--desktop-background-image)); background-repeat: var(--desktop-hover-background-repeat, var(--desktop-background-repeat, no-repeat)); background-position: var(--desktop-hover-background-position, var(--desktop-background-position, center center)); background-size: var(--desktop-hover-background-size, var(--desktop-background-size, cover)); background-attachment: var(--desktop-hover-background-attachment, var(--desktop-background-attachment, cover)); transition: all 0.2s ease-in-out; } @media (min-width: 768px) and (max-width: 1024px) { .oe-draggable-widget[eltype="shape"] .oe-shape-widget .oe-shape { justify-content: var(--tablet-justify-content, var(--desktop-justify-content, center)); align-items: var(--tablet-align-items, var(--desktop-align-items, center)); border-width: var(--tablet-border-width, var(--desktop-border-width, 0px)); border-style: var(--tablet-border-style, var(--desktop-border-style, solid)); border-color: var(--tablet-border-color, var(--desktop-border-color, #000000)); border-radius: var(--tablet-border-radius, var(--desktop-border-radius, 0px)); opacity: var(--tablet-opacity, var(--desktop-opacity, 1)); padding: var(--tablet-padding, var(--desktop-padding, 0)); box-shadow: var(--tablet-box-shadow, var(--desktop-box-shadow)); } .oe-draggable-widget[eltype="shape"] .oe-shape-widget .oe-shape svg { width: var(--tablet-shape-width, var(--desktop-shape-width, 100%)); height: var(--tablet-shape-width, var(--desktop-shape-width, 100%)); rotate: var(--tablet-shape-angle, var(--desktop-shape-angle, 0deg)); fill: var(--tablet-shape-fill, var(--desktop-shape-fill, #66666600)); stroke: var(--tablet-shape-stroke, var(--desktop-shape-stroke, #666666)); stroke-width: var(--tablet-shape-stroke-width, var(--desktop-shape-stroke-width, #666666)); position: relative; } .oe-draggable-widget[eltype="shape"] .oe-shape-widget .oe-shape .oe-background { pointer-events: none; overflow: hidden; transition: all 0.2s ease-in-out; } .oe-draggable-widget[eltype="shape"] .oe-shape-widget .oe-shape .oe-background:after { box-shadow: var(--tablet-box-shadow, var(--desktop-box-shadow)); } .oe-draggable-widget[eltype="shape"] .oe-shape-widget .oe-shape .oe-background * { transition: all 0.2s ease-in-out; } .oe-draggable-widget[eltype="shape"] .oe-shape-widget .oe-shape .oe-background .oe-background-fill { background-color: var(--tablet-background-color, var(--desktop-background-color)); opacity: var(--tablet-background-fill-opacity, var(--desktop-background-fill-opacity, 1)); transition: all 0.2s ease-in-out; --test:10; } .oe-draggable-widget[eltype="shape"] .oe-shape-widget .oe-shape .oe-background .oe-background-gradient { opacity: var(--tablet-background-gradient-opacity, var(--desktop-background-gradient-opacity, 1)); background-image: var(--tablet-background-gradient, var(--desktop-background-gradient)); transition: all 0.2s ease-in-out; } .oe-draggable-widget[eltype="shape"] .oe-shape-widget .oe-shape .oe-background .oe-background-image { opacity: var(--tablet-background-image-opacity, var(--desktop-background-image-opacity, 1)); background-image: var(--tablet-background-image, var(--desktop-background-image)); background-repeat: var(--tablet-background-repeat, var(--desktop-background-repeat, no-repeat)); background-position: var(--tablet-background-position, var(--desktop-background-position, center center)); background-size: var(--tablet-background-size, var(--desktop-background-size, cover)); background-attachment: var(--tablet-background-attachment, var(--desktop-background-attachment, cover)); transition: all 0.2s ease-in-out; } .oe-draggable-widget[eltype="shape"] .oe-shape-widget .oe-shape:hover { border-width: var(--tablet-hover-border-width, var(--tablet-border-width, var(--desktop-hover-border-width, var(--desktop-border-width, 0px)))); border-style: var(--tablet-hover-border-style, var(--tablet-border-style, var(--desktop-hover-border-style, var(--desktop-border-style, solid)))); border-color: var(--tablet-hover-border-color, var(--tablet-border-color, var(--desktop-hover-border-color, var(--desktop-border-color, #000000)))); border-radius: var(--tablet-hover-border-radius, var(--tablet-border-radius, var(--desktop-hover-border-radius, var(--desktop-border-radius, 0px)))); opacity: var(--tablet-hover-opacity, var(--tablet-opacity, var(--desktop-hover-opacity, var(--desktop-opacity, 1)))); padding: var(--tablet-hover-padding, var(--tablet-padding, var(--desktop-hover-padding, var(--desktop-padding, 0)))); box-shadow: var(--tablet-hover-box-shadow, var(--tablet-box-shadow, var(--desktop-hover-box-shadow, var(--desktop-box-shadow)))); } .oe-draggable-widget[eltype="shape"] .oe-shape-widget .oe-shape:hover svg { width: var(--tablet-hover-shape-width, var(--tablet-shape-width, var(--desktop-hover-shape-width, var(--desktop-shape-width, , 100%)))); height: var(--tablet-hover-shape-width, var(--tablet-shape-width, var(--desktop-hover-shape-width, var(--desktop-shape-width, , 100%)))); rotate: var(--tablet-hover-shape-angle, var(--tablet-shape-angle, var(--desktop-hover-shape-angle, var(--desktop-shape-angle, , 0deg)))); fill: var(--tablet-hover-shape-fill, var(--tablet-shape-fill, var(--desktop-hover-shape-fill, var(--desktop-shape-fill, , #66666600)))); stroke: var(--tablet-hover-shape-stroke, var(--tablet-shape-stroke, var(--desktop-hover-shape-stroke, var(--desktop-shape-stroke, , #666666)))); stroke-width: var(--tablet-hover-shape-stroke-width, var(--tablet-shape-stroke-width, var(--desktop-hover-shape-stroke-width, var(--desktop-shape-stroke-width, , #666666)))); } .oe-draggable-widget[eltype="shape"] .oe-shape-widget .oe-shape:hover .oe-background { pointer-events: none; overflow: hidden; transition: all 0.2s ease-in-out; } .oe-draggable-widget[eltype="shape"] .oe-shape-widget .oe-shape:hover .oe-background:after { box-shadow: var(--tablet-hover-box-shadow, var(--tablet-box-shadow, var(--desktop-hover-box-shadow, var(--desktop-box-shadow)))); } .oe-draggable-widget[eltype="shape"] .oe-shape-widget .oe-shape:hover .oe-background * { transition: all 0.2s ease-in-out; } .oe-draggable-widget[eltype="shape"] .oe-shape-widget .oe-shape:hover .oe-background .oe-background-fill { background-color: var(--tablet-hover-background-color, var(--tablet-background-color, var(--desktop-hover-background-color, var(--desktop-background-color)))); opacity: var(--tablet-hover-background-fill-opacity, var(--tablet-background-fill-opacity, var(--desktop-hover-background-fill-opacity, var(--desktop-background-fill-opacity, 1)))); transition: all 0.2s ease-in-out; --test:10; } .oe-draggable-widget[eltype="shape"] .oe-shape-widget .oe-shape:hover .oe-background .oe-background-gradient { opacity: var(--tablet-hover-background-gradient-opacity, var(--tablet-background-gradient-opacity, var(--desktop-hover-background-gradient-opacity, var(--desktop-background-gradient-opacity, 1)))); background-image: var(--tablet-hover-background-gradient, var(--tablet-background-gradient, var(--desktop-hover-background-gradient, var(--desktop-background-gradient, )))); transition: all 0.2s ease-in-out; } .oe-draggable-widget[eltype="shape"] .oe-shape-widget .oe-shape:hover .oe-background .oe-background-image { opacity: var(--tablet-hover-background-image-opacity, var(--tablet-background-image-opacity, var(--desktop-hover-background-image-opacity, var(--desktop-background-image-opacity, 1)))); background-image: var(--tablet-hover-background-image, var(--tablet-background-image, var(--desktop-hover-background-image, var(--desktop-background-image)))); background-repeat: var(--tablet-hover-background-repeat, var(--tablet-background-repeat, var(--desktop-hover-background-repeat, var(--desktop-background-repeat, no-repeat)))); background-position: var(--tablet-hover-background-position, var(--tablet-background-position, var(--desktop-hover-background-position, var(--desktop-background-position, center center)))); background-size: var(--tablet-hover-background-size, var(--tablet-background-size, var(--desktop-hover-background-size, var(--desktop-background-size, cover)))); background-attachment: var(--tablet-hover-background-attachment, var(--tablet-background-attachment, var(--desktop-hover-background-attachment, var(--desktop-background-attachment, cover)))); transition: all 0.2s ease-in-out; } .oe-draggable-widget[eltype="shape"].hovered .oe-shape-widget .oe-shape { border-width: var(--tablet-hover-border-width, var(--tablet-border-width, var(--desktop-hover-border-width, var(--desktop-border-width, 0px)))); border-style: var(--tablet-hover-border-style, var(--tablet-border-style, var(--desktop-hover-border-style, var(--desktop-border-style, solid)))); border-color: var(--tablet-hover-border-color, var(--tablet-border-color, var(--desktop-hover-border-color, var(--desktop-border-color, #000000)))); border-radius: var(--tablet-hover-border-radius, var(--tablet-border-radius, var(--desktop-hover-border-radius, var(--desktop-border-radius, 0px)))); opacity: var(--tablet-hover-opacity, var(--tablet-opacity, var(--desktop-hover-opacity, var(--desktop-opacity, 1)))); padding: var(--tablet-hover-padding, var(--tablet-padding, var(--desktop-hover-padding, var(--desktop-padding, 0)))); box-shadow: var(--tablet-hover-box-shadow, var(--tablet-box-shadow, var(--desktop-hover-box-shadow, var(--desktop-box-shadow)))); } .oe-draggable-widget[eltype="shape"].hovered .oe-shape-widget .oe-shape svg { width: var(--tablet-hover-shape-width, var(--tablet-shape-width, var(--desktop-hover-shape-width, var(--desktop-shape-width, , 100%)))); height: var(--tablet-hover-shape-width, var(--tablet-shape-width, var(--desktop-hover-shape-width, var(--desktop-shape-width, , 100%)))); rotate: var(--tablet-hover-shape-angle, var(--tablet-shape-angle, var(--desktop-hover-shape-angle, var(--desktop-shape-angle, , 0deg)))); fill: var(--tablet-hover-shape-fill, var(--tablet-shape-fill, var(--desktop-hover-shape-fill, var(--desktop-shape-fill, , #66666600)))); stroke: var(--tablet-hover-shape-stroke, var(--tablet-shape-stroke, var(--desktop-hover-shape-stroke, var(--desktop-shape-stroke, , #666666)))); stroke-width: var(--tablet-hover-shape-stroke-width, var(--tablet-shape-stroke-width, var(--desktop-hover-shape-stroke-width, var(--desktop-shape-stroke-width, , #666666)))); position: relative; } .oe-draggable-widget[eltype="shape"].hovered .oe-shape-widget .oe-shape .oe-background { pointer-events: none; overflow: hidden; transition: all 0.2s ease-in-out; } .oe-draggable-widget[eltype="shape"].hovered .oe-shape-widget .oe-shape .oe-background:after { box-shadow: var(--tablet-hover-box-shadow, var(--tablet-box-shadow, var(--desktop-hover-box-shadow, var(--desktop-box-shadow)))); } .oe-draggable-widget[eltype="shape"].hovered .oe-shape-widget .oe-shape .oe-background * { transition: all 0.2s ease-in-out; } .oe-draggable-widget[eltype="shape"].hovered .oe-shape-widget .oe-shape .oe-background .oe-background-fill { background-color: var(--tablet-hover-background-color, var(--tablet-background-color, var(--desktop-hover-background-color, var(--desktop-background-color)))); opacity: var(--tablet-hover-background-fill-opacity, var(--tablet-background-fill-opacity, var(--desktop-hover-background-fill-opacity, var(--desktop-background-fill-opacity, 1)))); transition: all 0.2s ease-in-out; --test:10; } .oe-draggable-widget[eltype="shape"].hovered .oe-shape-widget .oe-shape .oe-background .oe-background-gradient { opacity: var(--tablet-hover-background-gradient-opacity, var(--tablet-background-gradient-opacity, var(--desktop-hover-background-gradient-opacity, var(--desktop-background-gradient-opacity, 1)))); background-image: var(--tablet-hover-background-gradient, var(--tablet-background-gradient, var(--desktop-hover-background-gradient, var(--desktop-background-gradient, )))); transition: all 0.2s ease-in-out; } .oe-draggable-widget[eltype="shape"].hovered .oe-shape-widget .oe-shape .oe-background .oe-background-image { opacity: var(--tablet-hover-background-image-opacity, var(--tablet-background-image-opacity, var(--desktop-hover-background-image-opacity, var(--desktop-background-image-opacity, 1)))); background-image: var(--tablet-hover-background-image, var(--tablet-background-image, var(--desktop-hover-background-image, var(--desktop-background-image)))); background-repeat: var(--tablet-hover-background-repeat, var(--tablet-background-repeat, var(--desktop-hover-background-repeat, var(--desktop-background-repeat, no-repeat)))); background-position: var(--tablet-hover-background-position, var(--tablet-background-position, var(--desktop-hover-background-position, var(--desktop-background-position, center center)))); background-size: var(--tablet-hover-background-size, var(--tablet-background-size, var(--desktop-hover-background-size, var(--desktop-background-size, cover)))); background-attachment: var(--tablet-hover-background-attachment, var(--tablet-background-attachment, var(--desktop-hover-background-attachment, var(--desktop-background-attachment, cover)))); transition: all 0.2s ease-in-out; } } @media (min-width: 320px) and (max-width: 767px) { [elType='section'] > [elType='container'] > .oe-draggable-widget[eltype="shape"] { width: var(--mobile-widget-width, calc(var(--dcw) * var(--desktop-gridArea-width) * 1rem)) !important; height: var(--mobile-widget-width, calc(var(--dcw) * var(--desktop-gridArea-height) * 1rem)) !important; min-width: var(--mobile-widget-width, inherit); min-height: var(--mobile-widget-height, inherit); max-width: var(--mobile-widget-width, 100%); max-height: var(--mobile-widget-height, 100%); align-self: var(--mobile-justify-content, center); } .oe-draggable-widget[eltype="shape"] .oe-shape-widget .oe-shape { justify-content: var(--mobile-justify-content, var(--tablet-justify-content, var(--desktop-justify-content, center))); align-items: var(--mobile-align-items, var(--tablet-align-items, var(--desktop-align-items, center))); border-width: var(--mobile-border-width, var(--tablet-border-width, var(--desktop-border-width, 0px))); border-style: var(--mobile-border-style, var(--tablet-border-style, var(--desktop-border-style, solid))); border-color: var(--mobile-border-color, var(--tablet-border-color, var(--desktop-border-color, #000000))); border-radius: var(--mobile-border-radius, var(--tablet-border-radius, var(--desktop-border-radius, 0px))); opacity: var(--mobile-opacity, var(--tablet-opacity, var(--desktop-opacity, 1))); padding: var(--mobile-padding, var(--tablet-padding, var(--desktop-padding, 0))); box-shadow: var(--mobile-box-shadow, var(--tablet-box-shadow, var(--desktop-box-shadow))); } .oe-draggable-widget[eltype="shape"] .oe-shape-widget .oe-shape svg { width: var(--mobile-shape-width, var(--tablet-shape-width, var(--desktop-shape-width, 100%))); height: var(--mobile-shape-width, var(--tablet-shape-width, var(--desktop-shape-width, 100%))); rotate: var(--mobile-shape-angle, var(--tablet-shape-angle, var(--desktop-shape-angle, 0deg))); fill: var(--mobile-shape-fill, var(--tablet-shape-fill, var(--desktop-shape-fill, #66666600))); stroke: var(--mobile-shape-stroke, var(--tablet-shape-stroke, var(--desktop-shape-stroke, #666666))); stroke-width: var(--mobile-shape-stroke-width, var(--tablet-shape-stroke-width, var(--desktop-shape-stroke-width, #666666))); position: relative; } .oe-draggable-widget[eltype="shape"] .oe-shape-widget .oe-shape .oe-background { pointer-events: none; overflow: hidden; transition: all 0.2s ease-in-out; } .oe-draggable-widget[eltype="shape"] .oe-shape-widget .oe-shape .oe-background:after { box-shadow: var(--mobile-box-shadow, var(--tablet-box-shadow, var(--desktop-box-shadow))); } .oe-draggable-widget[eltype="shape"] .oe-shape-widget .oe-shape .oe-background * { transition: all 0.2s ease-in-out; } .oe-draggable-widget[eltype="shape"] .oe-shape-widget .oe-shape .oe-background .oe-background-fill { background-color: var(--mobile-background-color, var(--tablet-background-color, var(--desktop-background-color))); opacity: var(--mobile-background-fill-opacity, var(--tablet-background-fill-opacity, var(--desktop-background-fill-opacity, 1))); transition: all 0.2s ease-in-out; --test:10; } .oe-draggable-widget[eltype="shape"] .oe-shape-widget .oe-shape .oe-background .oe-background-gradient { opacity: var(--mobile-background-gradient-opacity, var(--tablet-background-gradient-opacity, var(--desktop-background-gradient-opacity, 1))); background-image: var(--mobile-background-gradient, var(--tablet-background-gradient, var(--desktop-background-gradient))); transition: all 0.2s ease-in-out; } .oe-draggable-widget[eltype="shape"] .oe-shape-widget .oe-shape .oe-background .oe-background-image { opacity: var(--mobile-background-image-opacity, var(--tablet-background-image-opacity, var(--desktop-background-image-opacity, 1))); background-image: var(--mobile-background-image, var(--tablet-background-image, var(--desktop-background-image))); background-repeat: var(--mobile-background-repeat, var(--tablet-background-repeat, var(--desktop-background-repeat, no-repeat))); background-position: var(--mobile-background-position, var(--tablet-background-position, var(--desktop-background-position, center center))); background-size: var(--mobile-background-size, var(--tablet-background-size, var(--desktop-background-size, cover))); background-attachment: var(--mobile-background-attachment, var(--tablet-background-attachment, var(--desktop-background-attachment, cover))); transition: all 0.2s ease-in-out; } .oe-draggable-widget[eltype="shape"] .oe-shape-widget .oe-shape:hover { border-width: var(--mobile-hover-border-width, var(--mobile-border-width, var(--tablet-hover-border-width, var(--tablet-border-width, var(--desktop-hover-border-width, var(--desktop-border-width, 0px)))))); border-style: var(--mobile-hover-border-style, var(--mobile-border-style, var(--tablet-hover-border-style, var(--tablet-border-style, var(--desktop-hover-border-style, var(--desktop-border-style, solid)))))); border-color: var(--mobile-hover-border-color, var(--mobile-border-color, var(--tablet-hover-border-color, var(--tablet-border-color, var(--desktop-hover-border-color, var(--desktop-border-color, #000000)))))); border-radius: var(--mobile-hover-border-radius, var(--mobile-border-radius, var(--tablet-hover-border-radius, var(--tablet-border-radius, var(--desktop-hover-border-radius, var(--desktop-border-radius, 0px)))))); opacity: var(--mobile-hover-opacity, var(--mobile-opacity, var(--tablet-hover-opacity, var(--tablet-opacity, var(--desktop-hover-opacity, var(--desktop-opacity, 1)))))); padding: var(--mobile-hover-padding, var(--mobile-padding, var(--tablet-hover-padding, var(--tablet-padding, var(--desktop-hover-padding, var(--desktop-padding, 0)))))); box-shadow: var(--mobile-hover-box-shadow, var(--mobile-box-shadow, var(--tablet-hover-box-shadow, var(--tablet-box-shadow, var(--desktop-hover-box-shadow, var(--desktop-box-shadow)))))); } .oe-draggable-widget[eltype="shape"] .oe-shape-widget .oe-shape:hover svg { width: var(--mobile-hover-shape-width, var(--mobile-shape-width, var(--tablet-hover-shape-width, var(--tablet-shape-width, var(--desktop-hover-shape-width, var(--desktop-shape-width, , 100%)))))); height: var(--mobile-hover-shape-width, var(--mobile-shape-width, var(--tablet-hover-shape-width, var(--tablet-shape-width, var(--desktop-hover-shape-width, var(--desktop-shape-width, , 100%)))))); rotate: var(--mobile-hover-shape-angle, var(--mobile-shape-angle, var(--tablet-hover-shape-angle, var(--tablet-shape-angle, var(--desktop-hover-shape-angle, var(--desktop-shape-angle, , 0deg)))))); fill: var(--mobile-hover-shape-fill, var(--mobile-shape-fill, var(--tablet-hover-shape-fill, var(--tablet-shape-fill, var(--desktop-hover-shape-fill, var(--desktop-shape-fill, , #66666600)))))); stroke: var(--mobile-hover-shape-stroke, var(--mobile-shape-stroke, var(--tablet-hover-shape-stroke, var(--tablet-shape-stroke, var(--desktop-hover-shape-stroke, var(--desktop-shape-stroke, , #666666)))))); stroke-width: var(--mobile-hover-shape-stroke-width, var(--mobile-shape-stroke-width, var(--tablet-hover-shape-stroke-width, var(--tablet-shape-stroke-width, var(--desktop-hover-shape-stroke-width, var(--desktop-shape-stroke-width, , #666666)))))); } .oe-draggable-widget[eltype="shape"] .oe-shape-widget .oe-shape:hover .oe-background { pointer-events: none; overflow: hidden; transition: all 0.2s ease-in-out; } .oe-draggable-widget[eltype="shape"] .oe-shape-widget .oe-shape:hover .oe-background:after { box-shadow: var(--mobile-hover-box-shadow, var(--mobile-box-shadow, var(--tablet-hover-box-shadow, var(--tablet-box-shadow, var(--desktop-hover-box-shadow, var(--desktop-box-shadow)))))); } .oe-draggable-widget[eltype="shape"] .oe-shape-widget .oe-shape:hover .oe-background * { transition: all 0.2s ease-in-out; } .oe-draggable-widget[eltype="shape"] .oe-shape-widget .oe-shape:hover .oe-background .oe-background-fill { background-color: var(--mobile-hover-background-color, var(--mobile-background-color, var(--tablet-hover-background-color, var(--tablet-background-color, var(--desktop-hover-background-color, var(--desktop-background-color)))))); opacity: var(--mobile-hover-background-fill-opacity, var(--mobile-background-fill-opacity, var(--tablet-hover-background-fill-opacity, var(--tablet-background-fill-opacity, var(--desktop-hover-background-fill-opacity, var(--desktop-background-fill-opacity, 1)))))); transition: all 0.2s ease-in-out; --test:10; } .oe-draggable-widget[eltype="shape"] .oe-shape-widget .oe-shape:hover .oe-background .oe-background-gradient { opacity: var(--mobile-hover-background-gradient-opacity, var(--mobile-background-gradient-opacity, var(--tablet-hover-background-gradient-opacity, var(--tablet-background-gradient-opacity, var(--desktop-hover-background-gradient-opacity, var(--desktop-background-gradient-opacity, 1)))))); background-image: var(--mobile-hover-background-gradient, var(--mobile-background-gradient, var(--tablet-hover-background-gradient, var(--tablet-background-gradient, var(--desktop-hover-background-gradient, var(--desktop-background-gradient, )))))); transition: all 0.2s ease-in-out; } .oe-draggable-widget[eltype="shape"] .oe-shape-widget .oe-shape:hover .oe-background .oe-background-image { opacity: var(--mobile-hover-background-image-opacity, var(--mobile-background-image-opacity, var(--tablet-hover-background-image-opacity, var(--tablet-background-image-opacity, var(--desktop-hover-background-image-opacity, var(--desktop-background-image-opacity, 1)))))); background-image: var(--mobile-hover-background-image, var(--mobile-background-image, var(--tablet-hover-background-image, var(--tablet-background-image, var(--desktop-hover-background-image, var(--desktop-background-image)))))); background-repeat: var(--mobile-hover-background-repeat, var(--mobile-background-repeat, var(--tablet-hover-background-repeat, var(--tablet-background-repeat, var(--desktop-hover-background-repeat, var(--desktop-background-repeat, no-repeat)))))); background-position: var(--mobile-hover-background-position, var(--mobile-background-position, var(--tablet-hover-background-position, var(--tablet-background-position, var(--desktop-hover-background-position, var(--desktop-background-position, center center)))))); background-size: var(--mobile-hover-background-size, var(--mobile-background-size, var(--tablet-hover-background-size, var(--tablet-background-size, var(--desktop-hover-background-size, var(--desktop-background-size, cover)))))); background-attachment: var(--mobile-hover-background-attachment, var(--mobile-background-attachment, var(--tablet-hover-background-attachment, var(--tablet-background-attachment, var(--desktop-hover-background-attachment, var(--desktop-background-attachment, cover)))))); transition: all 0.2s ease-in-out; } .oe-draggable-widget[eltype="shape"].hovered .oe-shape-widget .oe-shape { border-width: var(--mobile-hover-border-width, var(--mobile-border-width, var(--tablet-hover-border-width, var(--tablet-border-width, var(--desktop-hover-border-width, var(--desktop-border-width, 0px)))))); border-style: var(--mobile-hover-border-style, var(--mobile-border-style, var(--tablet-hover-border-style, var(--tablet-border-style, var(--desktop-hover-border-style, var(--desktop-border-style, solid)))))); border-color: var(--mobile-hover-border-color, var(--mobile-border-color, var(--tablet-hover-border-color, var(--tablet-border-color, var(--desktop-hover-border-color, var(--desktop-border-color, #000000)))))); border-radius: var(--mobile-hover-border-radius, var(--mobile-border-radius, var(--tablet-hover-border-radius, var(--tablet-border-radius, var(--desktop-hover-border-radius, var(--desktop-border-radius, 0px)))))); opacity: var(--mobile-hover-opacity, var(--mobile-opacity, var(--tablet-hover-opacity, var(--tablet-opacity, var(--desktop-hover-opacity, var(--desktop-opacity, 1)))))); padding: var(--mobile-hover-padding, var(--mobile-padding, var(--tablet-hover-padding, var(--tablet-padding, var(--desktop-hover-padding, var(--desktop-padding, 0)))))); box-shadow: var(--mobile-hover-box-shadow, var(--mobile-box-shadow, var(--tablet-hover-box-shadow, var(--tablet-box-shadow, var(--desktop-hover-box-shadow, var(--desktop-box-shadow)))))); } .oe-draggable-widget[eltype="shape"].hovered .oe-shape-widget .oe-shape svg { width: var(--mobile-hover-shape-width, var(--mobile-shape-width, var(--tablet-hover-shape-width, var(--tablet-shape-width, var(--desktop-hover-shape-width, var(--desktop-shape-width, , 100%)))))); height: var(--mobile-hover-shape-width, var(--mobile-shape-width, var(--tablet-hover-shape-width, var(--tablet-shape-width, var(--desktop-hover-shape-width, var(--desktop-shape-width, , 100%)))))); rotate: var(--mobile-hover-shape-angle, var(--mobile-shape-angle, var(--tablet-hover-shape-angle, var(--tablet-shape-angle, var(--desktop-hover-shape-angle, var(--desktop-shape-angle, , 0deg)))))); fill: var(--mobile-hover-shape-fill, var(--mobile-shape-fill, var(--tablet-hover-shape-fill, var(--tablet-shape-fill, var(--desktop-hover-shape-fill, var(--desktop-shape-fill, , #66666600)))))); stroke: var(--mobile-hover-shape-stroke, var(--mobile-shape-stroke, var(--tablet-hover-shape-stroke, var(--tablet-shape-stroke, var(--desktop-hover-shape-stroke, var(--desktop-shape-stroke, , #666666)))))); stroke-width: var(--mobile-hover-shape-stroke-width, var(--mobile-shape-stroke-width, var(--tablet-hover-shape-stroke-width, var(--tablet-shape-stroke-width, var(--desktop-hover-shape-stroke-width, var(--desktop-shape-stroke-width, , #666666)))))); position: relative; } .oe-draggable-widget[eltype="shape"].hovered .oe-shape-widget .oe-shape .oe-background { pointer-events: none; overflow: hidden; transition: all 0.2s ease-in-out; } .oe-draggable-widget[eltype="shape"].hovered .oe-shape-widget .oe-shape .oe-background:after { box-shadow: var(--mobile-hover-box-shadow, var(--mobile-box-shadow, var(--tablet-hover-box-shadow, var(--tablet-box-shadow, var(--desktop-hover-box-shadow, var(--desktop-box-shadow)))))); } .oe-draggable-widget[eltype="shape"].hovered .oe-shape-widget .oe-shape .oe-background * { transition: all 0.2s ease-in-out; } .oe-draggable-widget[eltype="shape"].hovered .oe-shape-widget .oe-shape .oe-background .oe-background-fill { background-color: var(--mobile-hover-background-color, var(--mobile-background-color, var(--tablet-hover-background-color, var(--tablet-background-color, var(--desktop-hover-background-color, var(--desktop-background-color)))))); opacity: var(--mobile-hover-background-fill-opacity, var(--mobile-background-fill-opacity, var(--tablet-hover-background-fill-opacity, var(--tablet-background-fill-opacity, var(--desktop-hover-background-fill-opacity, var(--desktop-background-fill-opacity, 1)))))); transition: all 0.2s ease-in-out; --test:10; } .oe-draggable-widget[eltype="shape"].hovered .oe-shape-widget .oe-shape .oe-background .oe-background-gradient { opacity: var(--mobile-hover-background-gradient-opacity, var(--mobile-background-gradient-opacity, var(--tablet-hover-background-gradient-opacity, var(--tablet-background-gradient-opacity, var(--desktop-hover-background-gradient-opacity, var(--desktop-background-gradient-opacity, 1)))))); background-image: var(--mobile-hover-background-gradient, var(--mobile-background-gradient, var(--tablet-hover-background-gradient, var(--tablet-background-gradient, var(--desktop-hover-background-gradient, var(--desktop-background-gradient, )))))); transition: all 0.2s ease-in-out; } .oe-draggable-widget[eltype="shape"].hovered .oe-shape-widget .oe-shape .oe-background .oe-background-image { opacity: var(--mobile-hover-background-image-opacity, var(--mobile-background-image-opacity, var(--tablet-hover-background-image-opacity, var(--tablet-background-image-opacity, var(--desktop-hover-background-image-opacity, var(--desktop-background-image-opacity, 1)))))); background-image: var(--mobile-hover-background-image, var(--mobile-background-image, var(--tablet-hover-background-image, var(--tablet-background-image, var(--desktop-hover-background-image, var(--desktop-background-image)))))); background-repeat: var(--mobile-hover-background-repeat, var(--mobile-background-repeat, var(--tablet-hover-background-repeat, var(--tablet-background-repeat, var(--desktop-hover-background-repeat, var(--desktop-background-repeat, no-repeat)))))); background-position: var(--mobile-hover-background-position, var(--mobile-background-position, var(--tablet-hover-background-position, var(--tablet-background-position, var(--desktop-hover-background-position, var(--desktop-background-position, center center)))))); background-size: var(--mobile-hover-background-size, var(--mobile-background-size, var(--tablet-hover-background-size, var(--tablet-background-size, var(--desktop-hover-background-size, var(--desktop-background-size, cover)))))); background-attachment: var(--mobile-hover-background-attachment, var(--mobile-background-attachment, var(--tablet-hover-background-attachment, var(--tablet-background-attachment, var(--desktop-hover-background-attachment, var(--desktop-background-attachment, cover)))))); transition: all 0.2s ease-in-out; } } .oe-draggable-widget[eltype="social"] .oe-social-widget { display: flex; flex-wrap: wrap; width: var(--desktop-width, auto); justify-content: var(--desktop-justify-content, center); align-items: var(--desktop-align-items, center); } .oe-draggable-widget[eltype="social"] .oe-social-widget a { margin: var(--desktop-icon-margin, 5px); opacity: var(--desktop-opacity, 1); } .oe-draggable-widget[eltype="social"] .oe-social-widget a svg { width: var(--desktop-icon-width, 30px); fill: var(--desktop-icon-fill, #666666); } .oe-draggable-widget[eltype="social"] .oe-social-widget a:hover { margin: var(--desktop-hover-icon-margin, var(--desktop-icon-margin, 5px)); opacity: var(--desktop-hover-opacity, var(--desktop-opacity, 1)); } .oe-draggable-widget[eltype="social"] .oe-social-widget a:hover svg { width: var(--desktop-hover-icon-width, var(--desktop-icon-width, 30px)); fill: var(--desktop-hover-icon-fill, var(--desktop-icon-fill, #666666)); } .oe-draggable-widget[eltype="social"].hovered .oe-social-widget a { margin: var(--desktop-hover-icon-margin, var(--desktop-icon-margin, 5px)); opacity: var(--desktop-hover-opacity, var(--desktop-opacity, 1)); } .oe-draggable-widget[eltype="social"].hovered .oe-social-widget a svg { width: var(--desktop-hover-icon-width, var(--desktop-icon-width, 30px)); fill: var(--desktop-hover-icon-fill, var(--desktop-icon-fill, #666666)); } @media (min-width: 768px) and (max-width: 1024px) { .oe-draggable-widget[eltype="social"] .oe-social-widget { display: flex; flex-wrap: wrap; width: var(--tablet-width, var(--desktop-width, auto)); justify-content: var(--tablet-justify-content, var(--desktop-justify-content, center)); align-items: var(--tablet-align-items, var(--desktop-align-items, center)); } .oe-draggable-widget[eltype="social"] .oe-social-widget a { margin: var(--tablet-icon-margin, var(--desktop-icon-margin, 5px)); opacity: var(--tablet-opacity, var(--desktop-opacity, 1)); } .oe-draggable-widget[eltype="social"] .oe-social-widget a svg { width: var(--tablet-icon-width, var(--desktop-icon-width, 30px)); fill: var(--tablet-icon-fill, var(--desktop-icon-fill, #666666)); } .oe-draggable-widget[eltype="social"] .oe-social-widget a:hover { margin: var(--tablet-hover-icon-margin, var(--tablet-icon-margin, var(--desktop-hover-icon-margin, var(--desktop-icon-margin, , 5px)))); opacity: var(--tablet-hover-opacity, var(--tablet-opacity, var(--desktop-hover-opacity, var(--desktop-opacity, 1)))); } .oe-draggable-widget[eltype="social"] .oe-social-widget a:hover svg { width: var(--tablet-hover-icon-width, var(--tablet-icon-width, var(--desktop-hover-icon-width, var(--desktop-icon-width, , 30px)))); fill: var(--tablet-hover-icon-fill, var(--tablet-icon-fill, var(--desktop-hover-icon-fill, var(--desktop-icon-fill, , #666666)))); } .oe-draggable-widget[eltype="social"].hovered .oe-social-widget a { margin: var(--tablet-hover-icon-margin, var(--tablet-icon-margin, var(--desktop-hover-icon-margin, var(--desktop-icon-margin, , 5px)))); opacity: var(--tablet-hover-opacity, var(--tablet-opacity, var(--desktop-hover-opacity, var(--desktop-opacity, 1)))); } .oe-draggable-widget[eltype="social"].hovered .oe-social-widget a svg { width: var(--tablet-hover-icon-width, var(--tablet-icon-width, var(--desktop-hover-icon-width, var(--desktop-icon-width, , 30px)))); fill: var(--tablet-hover-icon-fill, var(--tablet-icon-fill, var(--desktop-hover-icon-fill, var(--desktop-icon-fill, , #666666)))); } } @media (min-width: 320px) and (max-width: 767px) { [elType='section'] > [elType='container'] > .oe-draggable-widget[eltype="social"] { width: var(--mobile-widget-width, calc(var(--dcw) * var(--desktop-gridArea-width) * 1rem)); height: var(--mobile-widget-width, calc(var(--dcw) * var(--desktop-gridArea-height) * 1rem)); min-width: var(--mobile-widget-width, inherit); min-height: var(--mobile-widget-height, inherit); max-width: var(--mobile-widget-width, 100%); max-height: var(--mobile-widget-height, 100%); align-self: var(--mobile-justify-content, center); } .oe-draggable-widget[eltype="social"] .oe-social-widget { position: relative; display: flex; flex-wrap: wrap; color: red; width: var(--mobile-width, var(--tablet-width, var(--desktop-width, auto))); justify-content: var(--mobile-justify-content, var(--tablet-justify-content, var(--desktop-justify-content, center))); align-items: var(--mobile-align-items, var(--tablet-align-items, var(--desktop-align-items, center))); } .oe-draggable-widget[eltype="social"] .oe-social-widget a { margin: var(--mobile-icon-margin, var(--tablet-icon-margin, var(--desktop-icon-margin, 5px))); opacity: var(--mobile-opacity, var(--tablet-opacity, var(--desktop-opacity, 1))); } .oe-draggable-widget[eltype="social"] .oe-social-widget a svg { width: var(--mobile-icon-width, var(--tablet-icon-width, var(--desktop-icon-width, 30px))); fill: var(--mobile-icon-fill, var(--tablet-icon-fill, var(--desktop-icon-fill, #666666))); } .oe-draggable-widget[eltype="social"] .oe-social-widget a:hover { margin: var(--mobile-hover-icon-margin, var(--mobile-icon-margin, var(--tablet-hover-icon-margin, var(--tablet-icon-margin, var(--desktop-hover-icon-margin, var(--desktop-icon-margin, , 5px)))))); opacity: var(--mobile-hover-opacity, var(--mobile-opacity, var(--tablet-hover-opacity, var(--tablet-opacity, var(--desktop-hover-opacity, var(--desktop-opacity, 1)))))); } .oe-draggable-widget[eltype="social"] .oe-social-widget a:hover svg { width: var(--mobile-hover-icon-width, var(--mobile-icon-width, var(--tablet-hover-icon-width, var(--tablet-icon-width, var(--desktop-hover-icon-width, var(--desktop-icon-width, , 30px)))))); fill: var(--mobile-hover-icon-fill, var(--mobile-icon-fill, var(--tablet-hover-icon-fill, var(--tablet-icon-fill, var(--desktop-hover-icon-fill, var(--desktop-icon-fill, , #666666)))))); } .oe-draggable-widget[eltype="social"].hovered .oe-social-widget a { margin: var(--mobile-hover-icon-margin, var(--mobile-icon-margin, var(--tablet-hover-icon-margin, var(--tablet-icon-margin, var(--desktop-hover-icon-margin, var(--desktop-icon-margin, , 5px)))))); opacity: var(--mobile-hover-opacity, var(--mobile-opacity, var(--tablet-hover-opacity, var(--tablet-opacity, var(--desktop-hover-opacity, var(--desktop-opacity, 1)))))); } .oe-draggable-widget[eltype="social"].hovered .oe-social-widget a svg { width: var(--mobile-hover-icon-width, var(--mobile-icon-width, var(--tablet-hover-icon-width, var(--tablet-icon-width, var(--desktop-hover-icon-width, var(--desktop-icon-width, , 30px)))))); fill: var(--mobile-hover-icon-fill, var(--mobile-icon-fill, var(--tablet-hover-icon-fill, var(--tablet-icon-fill, var(--desktop-hover-icon-fill, var(--desktop-icon-fill, , #666666)))))); } } .oe-draggable-widget:not(.desktop-flex-discard-vertical-spacing)[eltype="flex"] .oe-flex-widget .oe-draggable-widget { width: 100%; height: auto; } .oe-draggable-widget.desktop-flex-discard-vertical-spacing[eltype="flex"] .oe-flex-widget .oe-draggable-widget { height: 100%; width: auto; } .oe-draggable-widget:not(.dummy-specificity)[eltype="flex"] .mobile_spacer { display: none; } .oe-draggable-widget:not(.dummy-specificity)[eltype="flex"].boxEditing .mobile_spacer { display: block; } .oe-draggable-widget:not(.dummy-specificity)[eltype="flex"] .oe-flex-widget { position: absolute; top: 0; right: 0; bottom: 0; left: 0; box-sizing: border-box; } .oe-draggable-widget:not(.dummy-specificity)[eltype="flex"] .oe-flex-widget .empty-flex { position: absolute; top: 0; right: 0; bottom: 0; left: 0; pointer-events: none; } .oe-draggable-widget:not(.dummy-specificity)[eltype="flex"] .oe-flex-widget .empty-flex .empty-block { z-index: -1; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; height: calc(100%); pointer-events: none; place-content: center; place-items: center; font-family: lato; font-size: 14px; text-align: center; } .oe-draggable-widget:not(.dummy-specificity)[eltype="flex"] .oe-flex-widget .oe-flex-column { overflow: hidden; display: flex; align-items: center; flex-direction: var(--desktop-flex-direction, column); justify-content: var(--desktop-flex-justify-content, center); height: 100%; width: 100%; } .oe-draggable-widget:not(.dummy-specificity)[eltype="flex"] .oe-flex-widget .oe-flex-column .margin_spacer { display: var(--desktop-flex-direction-display-margin-spacer, initial) !important; } .oe-draggable-widget:not(.dummy-specificity)[eltype="flex"] .oe-flex-widget .oe-flex-column .oe-draggable-widget { position: relative; } .oe-draggable-widget:not(.dummy-specificity)[eltype="flex"] .oe-flex-widget .oe-flex-column .oe-draggable-widget:last-child { margin-bottom: inherit; margin-right: inherit; } .oe-draggable-widget:not(.dummy-specificity)[eltype="flex"] .oe-flex-widget .oe-flex-column .oe-draggable-widget .oe-widget-inner { position: relative; } .oe-draggable-widget:not(.dummy-specificity)[eltype="flex"] .oe-flex-widget .oe-flex-column .oe-draggable-widget[eltype="text"] > .oe-widget-inner { width: 100%; height: 100%; } .oe-draggable-widget:not(.dummy-specificity)[eltype="flex"] .oe-flex-widget .oe-flex-column .oe-draggable-widget[eltype="video"] .oe-video-widget { height: 100%; } .oe-draggable-widget:not(.dummy-specificity)[eltype="flex"] .oe-flex-widget .oe-flex-column .oe-draggable-widget[eltype="video"] .oe-video-widget .oe-video-wrap { position: relative; width: 100%; height: 100%; } .oe-draggable-widget:not(.dummy-specificity)[eltype="flex"] .oe-draggable-widget { margin: 0px; } .oe-draggable-widget:not(.dummy-specificity)[eltype="flex"] .oe-flex-widget { opacity: var(--desktop-flex-opacity, 1); padding: var(--desktop-flex-padding, 0px); box-shadow: var(--desktop-flex-box-shadow); border-width: var(--desktop-flex-border-width, 0px); border-style: var(--desktop-flex-border-style, solid); border-color: var(--desktop-flex-border-color, #000000); border-radius: var(--desktop-flex-border-radius, 0px); } .oe-draggable-widget:not(.dummy-specificity)[eltype="flex"] .oe-flex-widget > .oe-background { border-radius: var(--desktop-flex-bg-radius, 0px); pointer-events: none; overflow: hidden; transition: all 0.2s ease-in-out; } .oe-draggable-widget:not(.dummy-specificity)[eltype="flex"] .oe-flex-widget > .oe-background * { transition: all 0.2s ease-in-out; } .oe-draggable-widget:not(.dummy-specificity)[eltype="flex"] .oe-flex-widget > .oe-background .oe-background-fill { background-color: var(--desktop-flex-background-color, ); opacity: var(--desktop-flex-background-fill-opacity, 1); transition: all 0.2s ease-in-out; } .oe-draggable-widget:not(.dummy-specificity)[eltype="flex"] .oe-flex-widget > .oe-background .oe-background-gradient { opacity: var(--desktop-flex-background-gradient-opacity, 1); background-image: var(--desktop-flex-background-gradient); transition: all 0.2s ease-in-out; } .oe-draggable-widget:not(.dummy-specificity)[eltype="flex"] .oe-flex-widget > .oe-background .oe-background-image { opacity: var(--desktop-flex-background-image-opacity, 1); background-image: var(--flex-background-image); background-repeat: var(--desktop-flex-background-repeat, no-repeat); background-position: var(--desktop-flex-background-position, center center); background-size: var(--desktop-flex-background-size, cover); background-attachment: var(--desktop-flex-background-attachment, cover); transition: all 0.2s ease-in-out; } .oe-draggable-widget:not(.dummy-specificity)[eltype="flex"] .oe-flex-widget .oe-draggable-widget { position: relative; height: var(--desktop-flex-item-height, auto); width: var(--desktop-flex-item-width, auto); } .oe-draggable-widget:not(.dummy-specificity)[eltype="flex"] .oe-flex-widget .oe-draggable-widget[eltype="image"] { height: var(--desktop-flex-item-height, inherit); width: var(--desktop-flex-item-width, inherit); align-self: var(--desktop-justify-content); } .oe-draggable-widget:not(.dummy-specificity)[eltype="flex"] .oe-flex-widget .oe-draggable-widget[eltype="shape"] { height: var(--desktop-flex-item-height, inherit); width: var(--desktop-flex-item-width, inherit); align-self: var(--desktop-justify-content); } .oe-draggable-widget:not(.dummy-specificity)[eltype="flex"] .oe-flex-widget .oe-draggable-widget[eltype="icon"] { height: var(--desktop-flex-item-height, inherit); width: var(--desktop-flex-item-width, inherit); align-self: var(--desktop-justify-content); } .oe-draggable-widget:not(.dummy-specificity)[eltype="flex"] .oe-flex-widget .oe-draggable-widget[eltype="video"] { height: var(--desktop-flex-item-height, inherit); width: var(--desktop-flex-item-width, inherit); align-self: var(--desktop-justify-content); } @media (min-width: 1025px) { .oe-draggable-widget:not(.desktop-flex-discard-vertical-spacing)[eltype="flex"] .oe-flex-widget .oe-draggable-widget.desktop-flex-widget-has-margin-bottom { margin-bottom: var(--desktop-flex-item-margin-bottom, 0px); } .oe-draggable-widget:not(.desktop-flex-discard-horizontal-spacing)[eltype="flex"] .oe-flex-widget .oe-draggable-widget.desktop-flex-widget-has-margin-right { margin-right: var(--desktop-flex-item-margin-right, 0px); } } @media (min-width: 768px) and (max-width: 1024px) { .oe-draggable-widget:not(.dummy-specificity)[eltype="flex"] .oe-flex-widget { opacity: var(--tablet-flex-opacity, var(--desktop-flex-opacity, 1)); padding: var(--tablet-flex-padding, var(--desktop-flex-padding, 0px)); box-shadow: var(--tablet-flex-box-shadow, var(--desktop-flex-box-shadow)); border-width: var(--tablet-flex-border-width, var(--desktop-flex-border-width, 0px)); border-style: var(--tablet-flex-border-style, var(--desktop-flex-border-style, solid)); border-color: var(--tablet-flex-border-color, var(--desktop-flex-border-color, #000000)); border-radius: var(--tablet-flex-border-radius, var(--desktop-flex-border-radius, 0px)); } .oe-draggable-widget:not(.dummy-specificity)[eltype="flex"] .oe-flex-widget .oe-flex-column { flex-direction: var(--tablet-flex-direction, var(--desktop-flex-direction, column)); justify-content: var(--tablet-flex-justify-content, var(--desktop-flex-justify-content, center)); } .oe-draggable-widget:not(.dummy-specificity)[eltype="flex"] .oe-flex-widget .oe-draggable-widget[eltype] { height: var(--tablet-flex-item-height, var(--desktop-flex-item-height, auto)); width: var(--tablet-flex-item-width, var(--desktop-flex-item-width, auto)); } .oe-draggable-widget:not(.dummy-specificity)[eltype="flex"] .oe-flex-widget > .oe-background { border-radius: var(--tablet-flex-bg-radius, var(--desktop-flex-bg-radius, 0px)); pointer-events: none; overflow: hidden; transition: all 0.2s ease-in-out; } .oe-draggable-widget:not(.dummy-specificity)[eltype="flex"] .oe-flex-widget > .oe-background * { transition: all 0.2s ease-in-out; } .oe-draggable-widget:not(.dummy-specificity)[eltype="flex"] .oe-flex-widget > .oe-background .oe-background-fill { background-color: var(--tablet-flex-background-color, var(--desktop-flex-background-color, )); opacity: var(--tablet-flex-background-fill-opacity, var(--desktop-flex-background-fill-opacity, 1)); transition: all 0.2s ease-in-out; } .oe-draggable-widget:not(.dummy-specificity)[eltype="flex"] .oe-flex-widget > .oe-background .oe-background-gradient { opacity: var(--tablet-flex-background-gradient-opacity, var(--desktop-flex-background-gradient-opacity, 1)); background-image: var(--tablet-flex-background-gradient, var(--desktop-flex-background-gradient)); transition: all 0.2s ease-in-out; } .oe-draggable-widget:not(.dummy-specificity)[eltype="flex"] .oe-flex-widget > .oe-background .oe-background-image { opacity: var(--tablet-flex-background-image-opacity, var(--desktop-flex-background-image-opacity, 1)); background-image: var(--flex-background-image); background-repeat: var(--tablet-flex-background-repeat, var(--desktop-flex-background-repeat, no-repeat)); background-position: var(--tablet-flex-background-position, var(--desktop-flex-background-position, center center)); background-size: var(--tablet-flex-background-size, var(--desktop-flex-background-size, cover)); background-attachment: var(--tablet-flex-background-attachment, var(--desktop-flex-background-attachment, cover)); transition: all 0.2s ease-in-out; } .oe-draggable-widget:not(.dummy-specificity)[eltype="flex"] .oe-flex-widget .oe-draggable-widget { position: relative; } .oe-draggable-widget:not(.dummy-specificity)[eltype="flex"] .oe-flex-widget .oe-draggable-widget[eltype="image"] { height: var(--tablet-flex-item-height, var(--desktop-flex-item-height, inherit)); width: var(--tablet-flex-item-width, var(--desktop-flex-item-width, inherit)); align-self: var(--tablet-justify-content, var(--desktop-justify-content)); } .oe-draggable-widget:not(.dummy-specificity)[eltype="flex"] .oe-flex-widget .oe-draggable-widget[eltype="shape"] { height: var(--tablet-flex-item-height, var(--desktop-flex-item-height, inherit)); width: var(--tablet-flex-item-width, var(--desktop-flex-item-width, inherit)); align-self: var(--tablet-justify-content, var(--desktop-justify-content)); } .oe-draggable-widget:not(.dummy-specificity)[eltype="flex"] .oe-flex-widget .oe-draggable-widget[eltype="icon"] { height: var(--tablet-flex-item-height, var(--desktop-flex-item-height, inherit)); width: var(--tablet-flex-item-width, var(--desktop-flex-item-width, inherit)); align-self: var(--tablet-justify-content, var(--desktop-justify-content)); } .oe-draggable-widget:not(.dummy-specificity)[eltype="flex"] .oe-flex-widget .oe-draggable-widget[eltype="video"] { height: var(--tablet-flex-item-height, var(--desktop-flex-item-height, inherit)); width: var(--tablet-flex-item-width, var(--desktop-flex-item-width, inherit)); align-self: var(--tablet-justify-content, var(--desktop-justify-content)); } .oe-draggable-widget:not(.tablet-flex-discard-vertical-spacing)[eltype="flex"] .oe-flex-widget .oe-draggable-widget.tablet-flex-widget-has-margin-bottom { margin-bottom: var(--tablet-flex-item-margin-bottom, 0px); } .oe-draggable-widget:not(.tablet-flex-discard-horizontal-spacing)[eltype="flex"] .oe-flex-widget .oe-draggable-widget.tablet-flex-widget-has-margin-right { margin-right: var(--tablet-flex-item-margin-right, 0px); } } @media (min-width: 320px) and (max-width: 767px) { .oe-draggable-widget:not(.dummy-specificity)[eltype="flex"] .oe-flex-widget { position: relative; opacity: var(--mobile-flex-opacity, var(--tablet-flex-opacity, var(--desktop-flex-opacity, 1))); padding: var(--mobile-flex-padding, var(--tablet-flex-padding, var(--desktop-flex-padding, 0px))); box-shadow: var(--mobile-flex-box-shadow, var(--tablet-flex-box-shadow, var(--desktop-flex-box-shadow))); border-width: var(--mobile-flex-border-width, var(--tablet-flex-border-width, var(--desktop-flex-border-width, 0px))); border-style: var(--mobile-flex-border-style, var(--tablet-flex-border-style, var(--desktop-flex-border-style, solid))); border-color: var(--mobile-flex-border-color, var(--tablet-flex-border-color, var(--desktop-flex-border-color, #000000))); border-radius: var(--mobile-flex-border-radius, var(--tablet-flex-border-radius, var(--desktop-flex-border-radius, 0px))); } .oe-draggable-widget:not(.dummy-specificity)[eltype="flex"] .oe-flex-widget .oe-flex-column { flex-direction: var(--mobile-flex-direction, var(--tablet-flex-direction, var(--desktop-flex-direction, column))); justify-content: var(--mobile-flex-justify-content, var(--tablet-flex-justify-content, var(--desktop-flex-justify-content, center))); } .oe-draggable-widget:not(.dummy-specificity)[eltype="flex"] .oe-flex-widget .oe-draggable-widget[eltype] { height: var(--mobile-flex-item-height, var(--tablet-flex-item-height, var(--desktop-flex-item-height, auto))); width: var(--mobile-flex-item-width, var(--tablet-flex-item-width, var(--desktop-flex-item-width, auto))); } .oe-draggable-widget:not(.dummy-specificity)[eltype="flex"] .oe-flex-widget > .oe-background { border-radius: var(--mobile-flex-bg-radius, var(--tablet-flex-bg-radius, var(--desktop-flex-bg-radius, 0px))); pointer-events: none; overflow: hidden; transition: all 0.2s ease-in-out; } .oe-draggable-widget:not(.dummy-specificity)[eltype="flex"] .oe-flex-widget > .oe-background * { transition: all 0.2s ease-in-out; } .oe-draggable-widget:not(.dummy-specificity)[eltype="flex"] .oe-flex-widget > .oe-background .oe-background-fill { background-color: var(--mobile-flex-background-color, var(--tablet-flex-background-color, var(--desktop-flex-background-color, ))); opacity: var(--mobile-flex-background-fill-opacity, var(--tablet-flex-background-fill-opacity, var(--desktop-flex-background-fill-opacity, 1))); transition: all 0.2s ease-in-out; } .oe-draggable-widget:not(.dummy-specificity)[eltype="flex"] .oe-flex-widget > .oe-background .oe-background-gradient { opacity: var(--mobile-flex-background-gradient-opacity, var(--tablet-flex-background-gradient-opacity, var(--desktop-flex-background-gradient-opacity, 1))); background-image: var(--mobile-flex-background-gradient, var(--tablet-flex-background-gradient, var(--desktop-flex-background-gradient))); transition: all 0.2s ease-in-out; } .oe-draggable-widget:not(.dummy-specificity)[eltype="flex"] .oe-flex-widget > .oe-background .oe-background-image { opacity: var(--mobile-flex-background-image-opacity, var(--tablet-flex-background-image-opacity, var(--desktop-flex-background-image-opacity, 1))); background-image: var(--flex-background-image); background-repeat: var(--mobile-flex-background-repeat, var(--tablet-flex-background-repeat, var(--desktop-flex-background-repeat, no-repeat))); background-position: var(--mobile-flex-background-position, var(--tablet-flex-background-position, var(--desktop-flex-background-position, center center))); background-size: var(--mobile-flex-background-size, var(--tablet-flex-background-size, var(--desktop-flex-background-size, cover))); background-attachment: var(--mobile-flex-background-attachment, var(--tablet-flex-background-attachment, var(--desktop-flex-background-attachment, cover))); transition: all 0.2s ease-in-out; } .oe-draggable-widget:not(.dummy-specificity)[eltype="flex"] .oe-flex-widget .oe-draggable-widget { position: relative; } .oe-draggable-widget:not(.dummy-specificity)[eltype="flex"] .oe-flex-widget .oe-draggable-widget[eltype="image"] { height: var(--mobile-flex-item-height, var(--tablet-flex-item-height, var(--desktop-flex-item-height, 50px))); width: var(--mobile-flex-item-width, var(--tablet-flex-item-width, var(--desktop-flex-item-width, inherit))); align-self: var(--mobile-justify-content, var(--tablet-justify-content, var(--desktop-justify-content))); } .oe-draggable-widget:not(.dummy-specificity)[eltype="flex"] .oe-flex-widget .oe-draggable-widget[eltype="video"] { height: var(--mobile-flex-item-height, var(--tablet-flex-item-height, var(--desktop-flex-item-height, 50px))); width: var(--mobile-flex-item-width, var(--tablet-flex-item-width, var(--desktop-flex-item-width, inherit))); align-self: var(--mobile-justify-content, var(--tablet-justify-content, var(--desktop-justify-content))); } .oe-draggable-widget:not(.dummy-specificity)[eltype="flex"] .oe-flex-widget .oe-draggable-widget[eltype="shape"] { height: var(--mobile-flex-item-height, var(--tablet-flex-item-height, var(--desktop-flex-item-height, 50px))); width: var(--mobile-flex-item-width, var(--tablet-flex-item-width, var(--desktop-flex-item-width, inherit))); align-self: var(--mobile-justify-content, var(--tablet-justify-content, var(--desktop-justify-content))); } .oe-draggable-widget:not(.dummy-specificity)[eltype="flex"] .oe-flex-widget .oe-draggable-widget[eltype="icon"] { height: var(--mobile-flex-item-height, var(--tablet-flex-item-height, var(--desktop-flex-item-height, 50px))); width: var(--mobile-flex-item-width, var(--tablet-flex-item-width, var(--desktop-flex-item-width, inherit))); align-self: var(--mobile-justify-content, var(--tablet-justify-content, var(--desktop-justify-content))); } .oe-draggable-widget:not(.mobile-flex-discard-vertical-spacing)[eltype="flex"] .oe-flex-widget .oe-draggable-widget.mobile-flex-widget-has-margin-bottom { margin-bottom: var(--mobile-flex-item-margin-bottom, 0px); } .oe-draggable-widget:not(.mobile-flex-discard-horizontal-spacing)[eltype="flex"] .oe-flex-widget .oe-draggable-widget.mobile-flex-widget-has-margin-right { margin-right: var(--mobile-flex-item-margin-right, 0px); } [elType='section'] > [elType='container'] > .oe-draggable-widget[eltype="flex"] { width: var(--mobile-widget-width, 100%); min-width: var(--mobile-widget-width, 100%); max-width: var(--mobile-widget-width, 100%); height: var(--mobile-widget-height, auto); min-height: var(--mobile-widget-height, 1px); max-height: var(--mobile-widget-height, auto); } [elType='section'] > [elType='container'] > .oe-draggable-widget[eltype="flex"] > .oe-widget-inner { width: var(--mobile-widget-width, 100%) !important; height: var(--mobile-widget-height, auto) !important; min-width: 100%; max-width: 100%; } } .oe-grid-widget.empty { min-height: 50px; } .oe-grid-widget .empty-grid { position: absolute; top: 0; right: 0; bottom: 0; left: 0; pointer-events: none; } .oe-grid-widget .empty-grid .empty-block { z-index: -1; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; height: calc(100%); pointer-events: none; place-content: center; place-items: center; font-family: lato; font-size: 14px; text-align: center; } .oe-grid-widget .oe-grid { overflow: hidden; display: grid; margin: auto; width: var(--grid-gw); grid-gap: var(--gg); grid-template-columns: repeat(var(--gc), calc((var(--grid-gw) + var(--gg)) / var(--gc) - var(--gg))) !important; grid-auto-rows: calc((var(--grid-gw) + var(--gg)) / var(--gc) - var(--gg)) !important; grid-auto-flow: row dense; height: calc(100% - (var(--desktop-vpadding))); padding: var(--desktop-grid-padding); } .oe-grid-widget .oe-grid .oe-draggable-widget { margin: 0; } .oe-grid-widget .oe-grid .oe-button-widget { position: absolute; } .oe-grid-widget .oe-grid .oe-widget-overlay .resizer { display: flex !important; } .oe-grid-widget .oe-grid .oe-widget-overlay .resizer .bottomright { display: flex !important; } .oe-grid-widget .oe-grid .oe-widget-overlay .resizer .bottom, .oe-grid-widget .oe-grid .oe-widget-overlay .resizer .right { display: none !important; } .oe-draggable-widget[eltype="grid"] .oe-grid-widget { padding: var(--grid-padding, 0px); border-width: var(--desktop-grid-border-width, 0px); border-color: var(--desktop-grid-border-color, #333333); border-style: var(--desktop-grid-border-style, none); border-radius: var(--desktop-grid-border-radius, 0px); box-shadow: var(--desktop-grid-box-shadow, none); } .oe-draggable-widget[eltype="grid"] .oe-grid-widget .oe-grid { height: calc(100% - (var(--desktop-vpadding))); padding: var(--tablet-grid-padding); } .oe-draggable-widget[eltype="grid"] .oe-grid-widget > .oe-background { overflow: hidden; border-radius: var(--desktop-grid-bg-radius, 0px); pointer-events: none; overflow: hidden; transition: all 0.2s ease-in-out; } .oe-draggable-widget[eltype="grid"] .oe-grid-widget > .oe-background * { transition: all 0.2s ease-in-out; } .oe-draggable-widget[eltype="grid"] .oe-grid-widget > .oe-background .oe-background-fill { background-color: var(--desktop-grid-background-color, ); opacity: var(--desktop-grid-background-fill-opacity, 1); transition: all 0.2s ease-in-out; } .oe-draggable-widget[eltype="grid"] .oe-grid-widget > .oe-background .oe-background-gradient { opacity: var(--desktop-grid-background-gradient-opacity, 1); background-image: var(--desktop-grid-background-gradient); transition: all 0.2s ease-in-out; } .oe-draggable-widget[eltype="grid"] .oe-grid-widget > .oe-background .oe-background-image { opacity: var(--desktop-grid-background-image-opacity, 1); background-image: var(--grid-background-image); background-repeat: var(--desktop-grid-background-repeat, no-repeat); background-position: var(--desktop-grid-background-position, center center); background-size: var(--desktop-grid-background-size, cover); background-attachment: var(--desktop-grid-background-attachment, cover); transition: all 0.2s ease-in-out; } @media (min-width: 768px) and (max-width: 1024px) { .oe-draggable-widget[eltype="grid"] .oe-grid-widget { padding: var(--grid-padding, 0px); border-width: var(--tablet-grid-border-width, var(--desktop-grid-border-width, 0px)); border-color: var(--tablet-grid-border-color, var(--desktop-grid-border-color, #333333)); border-style: var(--tablet-grid-border-style, var(--desktop-grid-border-style, none)); border-radius: var(--tablet-grid-border-radius, var(--desktop-grid-border-radius, 0px)); box-shadow: var(--tablet-grid-box-shadow, var(--desktop-grid-box-shadow, none)); } .oe-draggable-widget[eltype="grid"] .oe-grid-widget .oe-grid { --gw: var(--tablet-gw); height: calc(100% - (var(--tablet-vpadding))); padding: var(--tablet-grid-padding); } .oe-draggable-widget[eltype="grid"] .oe-grid-widget > .oe-background { border-radius: var(--tablet-grid-bg-radius, var(--desktop-grid-bg-radius, 0px)); pointer-events: none; overflow: hidden; transition: all 0.2s ease-in-out; } .oe-draggable-widget[eltype="grid"] .oe-grid-widget > .oe-background * { transition: all 0.2s ease-in-out; } .oe-draggable-widget[eltype="grid"] .oe-grid-widget > .oe-background .oe-background-fill { background-color: var(--tablet-grid-background-color, var(--desktop-grid-background-color, )); opacity: var(--tablet-grid-background-fill-opacity, var(--desktop-grid-background-fill-opacity, 1)); transition: all 0.2s ease-in-out; } .oe-draggable-widget[eltype="grid"] .oe-grid-widget > .oe-background .oe-background-gradient { opacity: var(--tablet-grid-background-gradient-opacity, var(--desktop-grid-background-gradient-opacity, 1)); background-image: var(--tablet-grid-background-gradient, var(--desktop-grid-background-gradient)); transition: all 0.2s ease-in-out; } .oe-draggable-widget[eltype="grid"] .oe-grid-widget > .oe-background .oe-background-image { opacity: var(--tablet-grid-background-image-opacity, var(--desktop-grid-background-image-opacity, 1)); background-image: var(--grid-background-image); background-repeat: var(--tablet-grid-background-repeat, var(--desktop-grid-background-repeat, no-repeat)); background-position: var(--tablet-grid-background-position, var(--desktop-grid-background-position, center center)); background-size: var(--tablet-grid-background-size, var(--desktop-grid-background-size, cover)); background-attachment: var(--tablet-grid-background-attachment, var(--desktop-grid-background-attachment, cover)); transition: all 0.2s ease-in-out; } } @media (min-width: 320px) and (max-width: 767px) { [elType='section'] > [elType='container'] > .oe-draggable-widget { width: var(--mobile-widget-width, 100%) !important; height: var(--mobile-widget-height, auto) !important; } [elType='section'] > [elType='container'] > .oe-draggable-widget[eltype="grid"] { position: relative; height: auto; } [elType='section'] > [elType='container'] > .oe-draggable-widget[eltype="grid"] .oe-grid-widget { position: relative; height: auto !important; padding: var(--grid-padding, 0px); border-width: var(--mobile-grid-border-width, var(--tablet-grid-border-width, var(--desktop-grid-border-width, 0px))); border-color: var(--mobile-grid-border-color, var(--tablet-grid-border-color, var(--desktop-grid-border-color, #333333))); border-style: var(--mobile-grid-border-style, var(--tablet-grid-border-style, var(--desktop-grid-border-style, none))); border-radius: var(--mobile-grid-border-radius, var(--tablet-grid-border-radius, var(--desktop-grid-border-radius, 0px))); box-shadow: var(--mobile-grid-box-shadow, var(--tablet-grid-box-shadow, var(--desktop-grid-box-shadow, none))); } [elType='section'] > [elType='container'] > .oe-draggable-widget[eltype="grid"] .oe-grid-widget.oe-widget-inner { height: var(--mobile-widget-height, auto) !important; } [elType='section'] > [elType='container'] > .oe-draggable-widget[eltype="grid"] .oe-grid-widget .oe-grid { display: flex; height: auto; align-items: center; width: 100%; flex-direction: var(--mobile-flex-direction, column); justify-content: var(--mobile-flex-justify-content, center); --default-grid-widget-mobile-width: 100%; } [elType='section'] > [elType='container'] > .oe-draggable-widget[eltype="grid"] .oe-grid-widget .oe-grid .margin_spacer { display: var(--desktop-flex-direction-display-margin-spacer, initial) !important; } [elType='section'] > [elType='container'] > .oe-draggable-widget[eltype="grid"] .oe-grid-widget .oe-grid .oe-draggable-widget[eltype]:not([eltype=text]) { width: var(--mobile-flex-item-width, calc(var(--dcw) * var(--desktop-gridArea-width) * 1rem)); height: var(--mobile-flex-item-height, calc(var(--dcw) * var(--desktop-gridArea-height) * 1rem)); max-width: 100%; } [elType='section'] > [elType='container'] > .oe-draggable-widget[eltype="grid"] .oe-grid-widget .oe-grid .oe-draggable-widget[eltype=text] { width: var(--mobile-flex-item-width, calc(var(--dcw) * var(--desktop-gridArea-width) * 1rem)); height: var(--mobile-flex-item-height, auto); max-width: 100%; } [elType='section'] > [elType='container'] > .oe-draggable-widget[eltype="grid"] .oe-grid-widget > .oe-background { border-radius: var(--mobile-grid-bg-radius, var(--tablet-grid-bg-radius, var(--desktop-grid-bg-radius, 0px))); pointer-events: none; overflow: hidden; transition: all 0.2s ease-in-out; } [elType='section'] > [elType='container'] > .oe-draggable-widget[eltype="grid"] .oe-grid-widget > .oe-background * { transition: all 0.2s ease-in-out; } [elType='section'] > [elType='container'] > .oe-draggable-widget[eltype="grid"] .oe-grid-widget > .oe-background .oe-background-fill { background-color: var(--mobile-grid-background-color, var(--tablet-grid-background-color, var(--desktop-grid-background-color, ))); opacity: var(--mobile-grid-background-fill-opacity, var(--tablet-grid-background-fill-opacity, var(--desktop-grid-background-fill-opacity, 1))); transition: all 0.2s ease-in-out; } [elType='section'] > [elType='container'] > .oe-draggable-widget[eltype="grid"] .oe-grid-widget > .oe-background .oe-background-gradient { opacity: var(--mobile-grid-background-gradient-opacity, var(--tablet-grid-background-gradient-opacity, var(--desktop-grid-background-gradient-opacity, 1))); background-image: var(--mobile-grid-background-gradient, var(--tablet-grid-background-gradient, var(--desktop-grid-background-gradient))); transition: all 0.2s ease-in-out; } [elType='section'] > [elType='container'] > .oe-draggable-widget[eltype="grid"] .oe-grid-widget > .oe-background .oe-background-image { opacity: var(--mobile-grid-background-image-opacity, var(--tablet-grid-background-image-opacity, var(--desktop-grid-background-image-opacity, 1))); background-image: var(--grid-background-image); background-repeat: var(--mobile-grid-background-repeat, var(--tablet-grid-background-repeat, var(--desktop-grid-background-repeat, no-repeat))); background-position: var(--mobile-grid-background-position, var(--tablet-grid-background-position, var(--desktop-grid-background-position, center center))); background-size: var(--mobile-grid-background-size, var(--tablet-grid-background-size, var(--desktop-grid-background-size, cover))); background-attachment: var(--mobile-grid-background-attachment, var(--tablet-grid-background-attachment, var(--desktop-grid-background-attachment, cover))); transition: all 0.2s ease-in-out; } } /* Handle widget base */ .oe-stack-scroll { width: 100%; height: 100%; display: flex; flex-direction: row; justify-content: start; } [stack-style="stack"] .oe-stack-scroll { flex-direction: column; } .oe-stack-menu[button-expand="button-hover"] button:not(:hover) .oe-button-html span { display: none; } .oe-stack-menu[button-expand="menu-hover"] { pointer-events: all; } .oe-stack-menu[button-expand="menu-hover"]:not(:hover) .oe-button-html span { display: none; } .oe-stack-menu .oe-button-html { display: flex; gap: 5px; } .oe-stack-menu .oe-button-html { align-items: center; } .oe-stack-menu .oe-button-html .oe-button-image svg { width: 100%; height: 100%; } .oe-stack-menu .oe-button-html .oe-button-image img { width: 100%; height: 100%; } .oe-stack-menu[button-layout="vertical-image-text"] .oe-button-html { flex-direction: column; } .oe-stack-menu[button-layout="vertical-image-text"] .oe-button-html .oe-button-image svg { height: 2em; } .oe-stack-menu[button-layout="vertical-image-text"] .oe-button-html .oe-button-image img { height: 2em; } .oe-stack-menu[button-layout="vertical-text-image"] .oe-button-html { flex-direction: column-reverse; } .oe-stack-menu[button-layout="vertical-text-image"] .oe-button-html .oe-button-image svg { height: 2em; } .oe-stack-menu[button-layout="vertical-text-image"] .oe-button-html .oe-button-image img { height: 2em; } .oe-stack-menu[button-layout="horizontal-image-text"] .oe-button-html { flex-direction: row; } .oe-stack-menu[button-layout="horizontal-image-text"] .oe-button-html .oe-button-image svg { width: 2em; } .oe-stack-menu[button-layout="horizontal-image-text"] .oe-button-html .oe-button-image img { width: 2em; } .oe-stack-menu[button-layout="horizontal-text-image"] .oe-button-html { flex-direction: row-reverse; } .oe-stack-menu[button-layout="horizontal-text-image"] .oe-button-html .oe-button-image svg { width: 2em; } .oe-stack-menu[button-layout="horizontal-text-image"] .oe-button-html .oe-button-image img { width: 2em; } .oe-stack-widget-wrapper:not([stack-style="stack"]) .oe-stack-widget.oe-widget-inner { overflow-x: hidden; overflow-y: hidden; } .oe-stack-widget-wrapper:not([stack-style="stack"]) .oe-stack-scroll .oe-stack:not(.oe-stack-active) { pointer-events: none !important; } .oe-stack-widget-wrapper:not([stack-style="stack"]) .oe-stack-scroll .oe-stack:not(.oe-stack-active) * { pointer-events: none !important; } .oe-stack-widget-wrapper:not([stack-style="stack"])[stack-transition-type="scroll-vertical"] .oe-stack-scroll { transition: all calc(var(--stack-transition-duration, 100) * 1ms) var(--stack-transition-function, ease) 0s !important; transform: translateY(calc( (var(--stack-active-page,0) * -100%) - (var(--stack-active-page, 0) * var(--desktop-vpadding,0px)))); overflow-y: visible; } .oe-stack-widget-wrapper:not([stack-style="stack"])[stack-transition-type="scroll-vertical"] .oe-stack { transform: translate(calc(var(--stack-page-idx,0) * -100%), calc(var(--stack-page-idx,0) * 100%)); } .oe-stack-widget-wrapper:not([stack-style="stack"])[stack-transition-type="scroll-horizontal"] .oe-stack-scroll { transition: all calc(var(--stack-transition-duration, 100) * 1ms) var(--stack-transition-function, ease) 0s !important; transform: translateX(calc( (var(--stack-active-page, 0) * -100%) - (var(--stack-active-page, 0) * var(--desktop-hpadding,0px)))); } .oe-stack-widget-wrapper:not([stack-style="stack"])[stack-transition-type="fade"] .oe-stack-scroll { transform: translate(0%, 0%); } .oe-stack-widget-wrapper:not([stack-style="stack"])[stack-transition-type="fade"] .oe-stack-scroll .oe-stack { transform: translate(calc(var(--stack-page-idx,0) * -100%), 0%); opacity: 0; transition: opacity calc(var(--stack-transition-duration, 100) * 1ms) var(--stack-transition-function, ease) 0s !important; } .oe-stack-widget-wrapper:not([stack-style="stack"])[stack-transition-type="fade"] .oe-stack-scroll .oe-stack.oe-stack-active { opacity: 1; } .oe-stack-widget-wrapper:not([stack-style="stack"])[stack-transition-type="fadeAndScale"] .oe-stack-scroll { transform: translate(0%, 0%); } .oe-stack-widget-wrapper:not([stack-style="stack"])[stack-transition-type="fadeAndScale"] .oe-stack-scroll .oe-stack { transform: translate(calc(var(--stack-page-idx,0) * -100%), 0%) scale(0); transition: all calc(var(--stack-transition-duration, 100) * 1ms) var(--stack-transition-function, ease) 0s !important; opacity: 0; } .oe-stack-widget-wrapper:not([stack-style="stack"])[stack-transition-type="fadeAndScale"] .oe-stack-scroll .oe-stack.oe-stack-active { transform: translate(calc(var(--stack-page-idx,0) * -100%), 0%) scale(1); opacity: 1; } .oe-stack-widget-wrapper:not([stack-style="stack"])[stack-transition-type="fadeAndRotate"] .oe-stack-scroll { transform: translate(0%, 0%); } .oe-stack-widget-wrapper:not([stack-style="stack"])[stack-transition-type="fadeAndRotate"] .oe-stack-scroll .oe-stack { transform: translate(calc(var(--stack-page-idx,0) * -100%), 0%) rotate(-360deg); transition: all calc(var(--stack-transition-duration, 100) * 1ms) var(--stack-transition-function, ease) 0s !important; opacity: 0; } .oe-stack-widget-wrapper:not([stack-style="stack"])[stack-transition-type="fadeAndRotate"] .oe-stack-scroll .oe-stack.oe-stack-active { transform: translate(calc(var(--stack-page-idx,0) * -100%), 0%) rotate(0deg); opacity: 1; } .oe-stack-widget-wrapper:not([stack-style="stack"])[stack-transition-type="flipHorizontal"] .oe-stack-scroll { transform: translate(0%, 0%); } .oe-stack-widget-wrapper:not([stack-style="stack"])[stack-transition-type="flipHorizontal"] .oe-stack-scroll .oe-stack { transform: translate(calc(var(--stack-page-idx,0) * -100%), 0%) rotateY(-180deg); transition: all calc(var(--stack-transition-duration, 100) * 1ms) var(--stack-transition-function, ease) 0s !important; opacity: 0; } .oe-stack-widget-wrapper:not([stack-style="stack"])[stack-transition-type="flipHorizontal"] .oe-stack-scroll .oe-stack.oe-stack-active { transform: translate(calc(var(--stack-page-idx,0) * -100%), 0%) rotateY(0deg); opacity: 1; } .oe-stack-widget-wrapper:not([stack-style="stack"])[stack-transition-type="flipVertical"] .oe-stack-scroll { transform: translate(0%, 0%); } .oe-stack-widget-wrapper:not([stack-style="stack"])[stack-transition-type="flipVertical"] .oe-stack-scroll .oe-stack { transform: translate(calc(var(--stack-page-idx,0) * -100%), 0%) rotateX(-180deg); transition: all calc(var(--stack-transition-duration, 100) * 1ms) var(--stack-transition-function, ease) 0s !important; opacity: 0; } .oe-stack-widget-wrapper:not([stack-style="stack"])[stack-transition-type="flipVertical"] .oe-stack-scroll .oe-stack.oe-stack-active { transform: translate(calc(var(--stack-page-idx,0) * -100%), 0%) rotateX(0deg); opacity: 1; } .oe-stack-widget-wrapper[stack-style="stack"][stack-transition-type="fade"] .oe-stack-scroll { transform: translate(0%, 0%); } .oe-stack-widget-wrapper[stack-style="stack"][stack-transition-type="fade"] .oe-stack-scroll .oe-stack { transition: opacity calc(var(--stack-transition-duration, 100) * 1ms) var(--stack-transition-function, ease) 0s !important; } .oe-stack-widget-wrapper[stack-style="stack"][stack-transition-type="fade"] .oe-stack-scroll .oe-stack:not(.oe-stack-blur) { opacity: 0; } .oe-stack-widget-wrapper[stack-style="stack"][stack-transition-type="fade"] .oe-stack-scroll .oe-stack.oe-stack-active { opacity: 1; } .oe-stack-widget-wrapper[stack-style="stack"][stack-transition-type="fadeAndScale"] .oe-stack-scroll .oe-stack { transition: all calc(var(--stack-transition-duration, 100) * 1ms) var(--stack-transition-function, ease) 0s !important; } .oe-stack-widget-wrapper[stack-style="stack"][stack-transition-type="fadeAndScale"] .oe-stack-scroll .oe-stack:not(.oe-stack-blur) { transform: scale(0); opacity: 0; } .oe-stack-widget-wrapper[stack-style="stack"][stack-transition-type="fadeAndScale"] .oe-stack-scroll .oe-stack.oe-stack-active { transform: scale(1); opacity: 1; } .oe-stack-widget-wrapper[stack-style="stack"][stack-transition-type="fadeAndRotate"] .oe-stack-scroll .oe-stack { transition: all calc(var(--stack-transition-duration, 100) * 1ms) var(--stack-transition-function, ease) 0s !important; } .oe-stack-widget-wrapper[stack-style="stack"][stack-transition-type="fadeAndRotate"] .oe-stack-scroll .oe-stack:not(.oe-stack-blur) { transform: rotate(-360deg); opacity: 0; } .oe-stack-widget-wrapper[stack-style="stack"][stack-transition-type="fadeAndRotate"] .oe-stack-scroll .oe-stack.oe-stack-active { transform: rotate(0deg); opacity: 1; } .oe-stack-widget-wrapper[stack-style="stack"][stack-transition-type="flipHorizontal"] .oe-stack-scroll .oe-stack { transition: all calc(var(--stack-transition-duration, 100) * 1ms) var(--stack-transition-function, ease) 0s !important; } .oe-stack-widget-wrapper[stack-style="stack"][stack-transition-type="flipHorizontal"] .oe-stack-scroll .oe-stack:not(.oe-stack-blur) { transform: rotateY(-180deg); opacity: 0; } .oe-stack-widget-wrapper[stack-style="stack"][stack-transition-type="flipHorizontal"] .oe-stack-scroll .oe-stack.oe-stack-active { transform: rotateY(0deg); opacity: 1; } .oe-stack-widget-wrapper[stack-style="stack"][stack-transition-type="flipVertical"] .oe-stack-scroll .oe-stack { transition: all calc(var(--stack-transition-duration, 100) * 1ms) var(--stack-transition-function, ease) 0s !important; } .oe-stack-widget-wrapper[stack-style="stack"][stack-transition-type="flipVertical"] .oe-stack-scroll .oe-stack:not(.oe-stack-blur) { transform: rotateX(-180deg); opacity: 0; } .oe-stack-widget-wrapper[stack-style="stack"][stack-transition-type="flipVertical"] .oe-stack-scroll .oe-stack.oe-stack-active { transform: rotateX(0deg); opacity: 1; } .oe-draggable-widget .oe-stack-widget-wrapper { display: flex; flex-flow: column; height: 100%; width: 100%; } .oe-draggable-widget .oe-stack-widget-wrapper .oe-stack-menu { z-index: 90; display: flex; overflow: hidden; opacity: var(--desktop-stack-menu-opacity, 1); padding: var(--desktop-stack-menu-padding, 0px); border-width: var(--desktop-stack-menu-border-width, 0px); border-color: var(--desktop-stack-menu-border-color, #333333); border-style: var(--desktop-stack-menu-border-style, none); border-radius: var(--desktop-stack-menu-border-radius, 0px); box-shadow: var(--desktop-stack-menu-box-shadow, none); } .oe-draggable-widget .oe-stack-widget-wrapper .oe-stack-menu > .oe-background { border-radius: var(--desktop-stack-menu-bg-radius, 0px); pointer-events: none; overflow: hidden; transition: all 0.2s ease-in-out; } .oe-draggable-widget .oe-stack-widget-wrapper .oe-stack-menu > .oe-background * { transition: all 0.2s ease-in-out; } .oe-draggable-widget .oe-stack-widget-wrapper .oe-stack-menu > .oe-background .oe-background-fill { background-color: var(--desktop-stack-menu-background-color, inherit); opacity: var(--desktop-stack-menu-background-fill-opacity, 1); transition: all 0.2s ease-in-out; } .oe-draggable-widget .oe-stack-widget-wrapper .oe-stack-menu > .oe-background .oe-background-gradient { opacity: var(--desktop-stack-menu-background-gradient-opacity, 1); background-image: var(--desktop-stack-menu-background-gradient); transition: all 0.2s ease-in-out; } .oe-draggable-widget .oe-stack-widget-wrapper .oe-stack-menu > .oe-background .oe-background-image { opacity: var(--desktop-stack-menu-background-image-opacity, 1); background-image: var(--desktop-stack-menu-background-image); background-repeat: var(--desktop-stack-menu-background-repeat, no-repeat); background-position: var(--desktop-stack-menu-background-position, center center); background-size: var(--desktop-stack-menu-background-size, cover); background-attachment: var(--desktop-stack-menu-background-attachment, cover); transition: all 0.2s ease-in-out; } .oe-draggable-widget .oe-stack-widget-wrapper .oe-stack-menu:hover { opacity: var(--desktop-hover-stack-menu-opacity, var(--desktop-stack-menu-opacity, 1)); padding: var(--desktop-hover-stack-menu-padding, var(--desktop-stack-menu-padding, 0px)); border-width: var(--desktop-hover-stack-menu-border-width, var(--desktop-stack-menu-border-width, 0px)); border-color: var(--desktop-hover-stack-menu-border-color, var(--desktop-stack-menu-border-color, #333333)); border-style: var(--desktop-hover-stack-menu-border-style, var(--desktop-stack-menu-border-style, none)); border-radius: var(--desktop-hover-stack-menu-border-radius, var(--desktop-stack-menu-border-radius, 0px)); box-shadow: var(--desktop-hover-stack-menu-box-shadow, var(--desktop-stack-menu-box-shadow, none)); } .oe-draggable-widget .oe-stack-widget-wrapper .oe-stack-menu:hover > .oe-background { border-radius: var(--desktop-hover-stack-menu-bg-radius, var(--desktop-stack-menu-bg-radius, 0px)); pointer-events: none; overflow: hidden; transition: all 0.2s ease-in-out; } .oe-draggable-widget .oe-stack-widget-wrapper .oe-stack-menu:hover > .oe-background * { transition: all 0.2s ease-in-out; } .oe-draggable-widget .oe-stack-widget-wrapper .oe-stack-menu:hover > .oe-background .oe-background-fill { background-color: var(--desktop-hover-stack-menu-background-color, var(--desktop-stack-menu-background-color, inherit)); opacity: var(--desktop-hover-stack-menu-background-fill-opacity, var(--desktop-stack-menu-background-fill-opacity, 1)); transition: all 0.2s ease-in-out; } .oe-draggable-widget .oe-stack-widget-wrapper .oe-stack-menu:hover > .oe-background .oe-background-gradient { opacity: var(--desktop-hover-stack-menu-background-gradient-opacity, var(--desktop-stack-menu-background-gradient-opacity, 1)); background-image: var(--desktop-hover-stack-menu-background-gradient, var(--desktop-stack-menu-background-gradient)); transition: all 0.2s ease-in-out; } .oe-draggable-widget .oe-stack-widget-wrapper .oe-stack-menu:hover > .oe-background .oe-background-image { opacity: var(--desktop-hover-stack-menu-background-image-opacity, var(--desktop-stack-menu-background-image-opacity, 1)); background-image: var(--desktop-hover-stack-menu-background-image, var(--desktop-stack-menu-background-image)); background-repeat: var(--desktop-hover-stack-menu-background-repeat, var(--desktop-stack-menu-background-repeat, no-repeat)); background-position: var(--desktop-hover-stack-menu-background-position, var(--desktop-stack-menu-background-position, center center)); background-size: var(--desktop-hover-stack-menu-background-size, var(--desktop-stack-menu-background-size, cover)); background-attachment: var(--desktop-hover-stack-menu-background-attachment, var(--desktop-stack-menu-background-attachment, cover)); transition: all 0.2s ease-in-out; } .oe-draggable-widget .oe-stack-widget-wrapper .oe-stack-menu button { pointer-events: all; position: relative; margin: 0px; display: flex; align-items: center; justify-content: center; cursor: pointer; text-decoration: none; background: transparent; color: var(--desktop-stack-menu-button-color, var(--default-button-color)); opacity: var(--desktop-stack-menu-button-opacity, var(--default-button-opacity)); padding: var(--desktop-stack-menu-button-padding, var(--default-button-padding)); border-width: var(--desktop-stack-menu-button-border-width, var(--default-button-border-width)); border-style: var(--desktop-stack-menu-button-border-style, var(--default-button-border-style)); border-color: var(--desktop-stack-menu-button-border-color, var(--default-button-border-color)); border-radius: var(--desktop-stack-menu-button-border-radius, var(--default-button-border-radius)); font-size: var(--desktop-stack-menu-button-font-size, var(--default-button-font-size)); opacity: var(--desktop-stack-menu-button-opacity, 1); box-shadow: var(--desktop-stack-menu-button-box-shadow); font-family: var(--desktop-stack-menu-button-font-family, var(--default-button-font-family)); font-weight: var(--desktop-stack-menu-button-font-weight, var(--default-button-font-weight)); transform: scale(var(--desktop-scale, 1)); overflow: hidden; } .oe-draggable-widget .oe-stack-widget-wrapper .oe-stack-menu button .oe-button-html { text-align: center; position: relative; width: 100%; white-space: nowrap; text-align: var(--desktop-label-text-align, center); } .oe-draggable-widget .oe-stack-widget-wrapper .oe-stack-menu button .oe-button-html .oe-button-image { font-size: var(--desktop-stack-menu-button-image-size, inherit); } .oe-draggable-widget .oe-stack-widget-wrapper .oe-stack-menu button .oe-button-html .oe-button-image svg { fill: var(--desktop-stack-menu-button-shape-fill, #666666); stroke: var(--desktop-stack-menu-button-shape-stroke, #666666); } .oe-draggable-widget .oe-stack-widget-wrapper .oe-stack-menu button > .oe-background { pointer-events: none; overflow: hidden; transition: all 0.2s ease-in-out; } .oe-draggable-widget .oe-stack-widget-wrapper .oe-stack-menu button > .oe-background:after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 1; box-shadow: var(--desktop-stack-menu-button-box-shadow); } .oe-draggable-widget .oe-stack-widget-wrapper .oe-stack-menu button > .oe-background * { transition: all 0.2s ease-in-out; } .oe-draggable-widget .oe-stack-widget-wrapper .oe-stack-menu button > .oe-background .oe-background-fill { background-color: var(--desktop-stack-menu-button-background-color, var(--default-button-background-color)); opacity: var(--desktop-stack-menu-button-background-fill-opacity, 1); transition: all 0.2s ease-in-out; } .oe-draggable-widget .oe-stack-widget-wrapper .oe-stack-menu button > .oe-background .oe-background-gradient { opacity: var(--desktop-stack-menu-button-background-gradient-opacity, 1); background-image: var(--desktop-stack-menu-button-background-gradient); transition: all 0.2s ease-in-out; } .oe-draggable-widget .oe-stack-widget-wrapper .oe-stack-menu button > .oe-background .oe-background-image { opacity: var(--desktop-stack-menu-button-background-image-opacity, 1); background-image: var(--desktop-stack-menu-button-background-image); background-repeat: var(--desktop-stack-menu-button-background-repeat, no-repeat); background-position: var(--desktop-stack-menu-button-background-position, center center); background-size: var(--desktop-stack-menu-button-background-size, cover); background-attachment: var(--desktop-stack-menu-button-background-attachment, cover); transition: all 0.2s ease-in-out; } .oe-draggable-widget .oe-stack-widget-wrapper .oe-stack-menu button > .oe-background .oe-background-gradient { background-image: var(--desktop-buttonPrefix-background-gradient, var(--default-button-gradient)); color: red; } .oe-draggable-widget .oe-stack-widget-wrapper .oe-stack-menu button:hover { color: var(--desktop-hover-stack-menu-button-color, var(--desktop-stack-menu-button-color, var(--default-button-color))); opacity: var(--desktop-hover-stack-menu-button-opacity, var(--desktop-stack-menu-button-opacity, var(--default-button-opacity))); padding: var(--desktop-hover-stack-menu-button-padding, var(--desktop-stack-menu-button-padding, var(--default-button-padding))); border-width: var(--desktop-hover-stack-menu-button-border-width, var(--desktop-stack-menu-button-border-width, var(--default-button-border-width))); border-style: var(--desktop-hover-stack-menu-button-border-style, var(--desktop-stack-menu-button-border-style, var(--default-button-border-style))); border-color: var(--desktop-hover-stack-menu-button-border-color, var(--desktop-stack-menu-button-border-color, var(--default-button-border-color))); border-radius: var(--desktop-hover-stack-menu-button-border-radius, var(--desktop-stack-menu-button-border-radius, var(--default-button-border-radius))); font-size: var(--desktop-hover-stack-menu-button-font-size, var(--desktop-stack-menu-button-font-size, var(--default-button-font-size))); opacity: var(--desktop-hover-stack-menu-button-opacity, var(--desktop-stack-menu-button-opacity, 1)); box-shadow: var(--desktop-hover-stack-menu-button-box-shadow, var(--desktop-stack-menu-button-box-shadow)); font-family: var(--desktop-hover-stack-menu-button-font-family, var(--desktop-stack-menu-button-font-family, var(--default-button-font-family))); font-weight: var(--desktop-hover-stack-menu-button-font-weight, var(--desktop-stack-menu-button-font-weight, var(--default-button-font-weight))); transform: scale(var(--desktop-hover-scale, var(--desktop-scale, 1))); } .oe-draggable-widget .oe-stack-widget-wrapper .oe-stack-menu button:hover .oe-button-html .oe-button-image { font-size: var(--desktop-hover-stack-menu-button-image-size, var(--desktop-stack-menu-button-image-size, inherit)); } .oe-draggable-widget .oe-stack-widget-wrapper .oe-stack-menu button:hover .oe-button-html .oe-button-image svg { fill: var(--desktop-hover-stack-menu-button-shape-fill, var(--desktop-stack-menu-button-shape-fill, #666666)); stroke: var(--desktop-hover-stack-menu-button-shape-stroke, var(--desktop-stack-menu-button-shape-stroke, #666666)); } .oe-draggable-widget .oe-stack-widget-wrapper .oe-stack-menu button:hover > .oe-background { pointer-events: none; overflow: hidden; transition: all 0.2s ease-in-out; } .oe-draggable-widget .oe-stack-widget-wrapper .oe-stack-menu button:hover > .oe-background:after { box-shadow: var(--desktop-hover-stack-menu-button-box-shadow, var(--desktop-stack-menu-button-box-shadow)); } .oe-draggable-widget .oe-stack-widget-wrapper .oe-stack-menu button:hover > .oe-background * { transition: all 0.2s ease-in-out; } .oe-draggable-widget .oe-stack-widget-wrapper .oe-stack-menu button:hover > .oe-background .oe-background-fill { background-color: var(--desktop-hover-stack-menu-button-background-color, var(--desktop-stack-menu-button-background-color, var(--default-button-background-color))); opacity: var(--desktop-hover-stack-menu-button-background-fill-opacity, var(--desktop-stack-menu-button-background-fill-opacity, 1)); transition: all 0.2s ease-in-out; } .oe-draggable-widget .oe-stack-widget-wrapper .oe-stack-menu button:hover > .oe-background .oe-background-gradient { opacity: var(--desktop-hover-stack-menu-button-background-gradient-opacity, var(--desktop-stack-menu-button-background-gradient-opacity, 1)); background-image: var(--desktop-hover-stack-menu-button-background-gradient, var(--desktop-stack-menu-button-background-gradient)); transition: all 0.2s ease-in-out; } .oe-draggable-widget .oe-stack-widget-wrapper .oe-stack-menu button:hover > .oe-background .oe-background-image { opacity: var(--desktop-hover-stack-menu-button-background-image-opacity, var(--desktop-stack-menu-button-background-image-opacity, 1)); background-image: var(--desktop-hover-stack-menu-button-background-image, var(--desktop-stack-menu-button-background-image)); background-repeat: var(--desktop-hover-stack-menu-button-background-repeat, var(--desktop-stack-menu-button-background-repeat, no-repeat)); background-position: var(--desktop-hover-stack-menu-button-background-position, var(--desktop-stack-menu-button-background-position, center center)); background-size: var(--desktop-hover-stack-menu-button-background-size, var(--desktop-stack-menu-button-background-size, cover)); background-attachment: var(--desktop-hover-stack-menu-button-background-attachment, var(--desktop-stack-menu-button-background-attachment, cover)); transition: all 0.2s ease-in-out; } .oe-draggable-widget .oe-stack-widget-wrapper .oe-stack-menu button:hover > .oe-background .oe-background-gradient { color: red; } .oe-draggable-widget .oe-stack-widget-wrapper .oe-stack-menu button.selected { position: relative; pointer-events: all; margin: 0px; display: flex; align-items: center; justify-content: center; cursor: pointer; text-decoration: none; color: var(--desktop-selected-stack-menu-button-color, var(--desktop-stack-menu-button-color, var(--desktop-hover-stack-menu-button-color , var(--desktop-stack-menu-button-color , var(--default-button-color))))); opacity: var(--desktop-selected-stack-menu-button-opacity, var(--desktop-stack-menu-button-opacity, var(--desktop-hover-stack-menu-button-opacity , var(--desktop-stack-menu-button-opacity , var(--default-button-opacity))))); padding: var(--desktop-selected-stack-menu-button-padding, var(--desktop-stack-menu-button-padding, var(--desktop-hover-stack-menu-button-padding , var(--desktop-stack-menu-button-padding , var(--default-button-padding))))); border-width: var(--desktop-selected-stack-menu-button-border-width, var(--desktop-stack-menu-button-border-width, var(--desktop-hover-stack-menu-button-border-width , var(--desktop-stack-menu-button-border-width , var(--default-button-border-width))))); border-style: var(--desktop-selected-stack-menu-button-border-style, var(--desktop-stack-menu-button-border-style, var(--desktop-hover-stack-menu-button-border-style , var(--desktop-stack-menu-button-border-style , var(--default-button-border-style))))); border-color: var(--desktop-selected-stack-menu-button-border-color, var(--desktop-stack-menu-button-border-color, var(--desktop-hover-stack-menu-button-border-color , var(--desktop-stack-menu-button-border-color , var(--default-button-border-color))))); border-radius: var(--desktop-selected-stack-menu-button-border-radius, var(--desktop-stack-menu-button-border-radius, var(--desktop-hover-stack-menu-button-border-radius , var(--desktop-stack-menu-button-border-radius , var(--default-button-border-radius))))); font-size: var(--desktop-selected-stack-menu-button-font-size, var(--desktop-stack-menu-button-font-size, var(--desktop-hover-stack-menu-button-font-size , var(--desktop-stack-menu-button-font-size , var(--default-button-font-size))))); opacity: var(--desktop-selected-stack-menu-button-opacity, var(--desktop-stack-menu-button-opacity, 1)); box-shadow: var(--desktop-selected-stack-menu-button-box-shadow, var(--desktop-stack-menu-button-box-shadow)); font-family: var(--desktop-selected-stack-menu-button-font-family, var(--desktop-stack-menu-button-font-family, var(--desktop-hover-stack-menu-button-font-family , var(--desktop-stack-menu-button-font-family , var(--default-button-font-family))))); font-weight: var(--desktop-selected-stack-menu-button-font-weight, var(--desktop-stack-menu-button-font-weight, var(--desktop-hover-stack-menu-button-font-weight , var(--desktop-stack-menu-button-font-weight , var(--default-button-font-weight))))); transform: scale(var(--desktop-hover-scale, var(--desktop-scale, 1))); overflow: hidden; } .oe-draggable-widget .oe-stack-widget-wrapper .oe-stack-menu button.selected .oe-button-html .oe-button-image { font-size: var(--desktop-selected-stack-menu-button-image-size, var(--desktop-stack-menu-button-image-size, inherit)); } .oe-draggable-widget .oe-stack-widget-wrapper .oe-stack-menu button.selected .oe-button-html .oe-button-image svg { fill: var(--desktop-selected-stack-menu-button-shape-fill, var(--desktop-stack-menu-button-shape-fill, #666666)); stroke: var(--desktop-selected-stack-menu-button-shape-stroke, var(--desktop-stack-menu-button-shape-stroke, #666666)); } .oe-draggable-widget .oe-stack-widget-wrapper .oe-stack-menu button.selected .oe-button-html { text-align: center; position: relative; width: 100%; text-align: var(--desktop-selected-label-text-align, var(--desktop-label-text-align, center)); } .oe-draggable-widget .oe-stack-widget-wrapper .oe-stack-menu button.selected > .oe-background { pointer-events: none; overflow: hidden; transition: all 0.2s ease-in-out; } .oe-draggable-widget .oe-stack-widget-wrapper .oe-stack-menu button.selected > .oe-background:after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 1; box-shadow: var(--desktop-selected-stack-menu-button-box-shadow, var(--desktop-stack-menu-button-box-shadow)); } .oe-draggable-widget .oe-stack-widget-wrapper .oe-stack-menu button.selected > .oe-background * { transition: all 0.2s ease-in-out; } .oe-draggable-widget .oe-stack-widget-wrapper .oe-stack-menu button.selected > .oe-background .oe-background-fill { background-color: var(--desktop-selected-stack-menu-button-background-color, var(--desktop-stack-menu-button-background-color, var(--desktop-hover-stack-menu-button-background-color , var(--desktop-stack-menu-button-background-color , var(--default-button-background-color))))); opacity: var(--desktop-selected-stack-menu-button-background-fill-opacity, var(--desktop-stack-menu-button-background-fill-opacity, 1)); transition: all 0.2s ease-in-out; } .oe-draggable-widget .oe-stack-widget-wrapper .oe-stack-menu button.selected > .oe-background .oe-background-gradient { opacity: var(--desktop-selected-stack-menu-button-background-gradient-opacity, var(--desktop-stack-menu-button-background-gradient-opacity, 1)); background-image: var(--desktop-selected-stack-menu-button-background-gradient, var(--desktop-stack-menu-button-background-gradient)); transition: all 0.2s ease-in-out; } .oe-draggable-widget .oe-stack-widget-wrapper .oe-stack-menu button.selected > .oe-background .oe-background-image { opacity: var(--desktop-selected-stack-menu-button-background-image-opacity, var(--desktop-stack-menu-button-background-image-opacity, 1)); background-image: var(--desktop-selected-stack-menu-button-background-image, var(--desktop-stack-menu-button-background-image)); background-repeat: var(--desktop-selected-stack-menu-button-background-repeat, var(--desktop-stack-menu-button-background-repeat, no-repeat)); background-position: var(--desktop-selected-stack-menu-button-background-position, var(--desktop-stack-menu-button-background-position, center center)); background-size: var(--desktop-selected-stack-menu-button-background-size, var(--desktop-stack-menu-button-background-size, cover)); background-attachment: var(--desktop-selected-stack-menu-button-background-attachment, var(--desktop-stack-menu-button-background-attachment, cover)); transition: all 0.2s ease-in-out; } .oe-draggable-widget .oe-stack-widget-wrapper .oe-stack-menu button.selected > .oe-background .oe-background-gradient { color: red; } .oe-draggable-widget.hovered .oe-stack-menu { opacity: var(--desktop-hover-stack-menu-opacity, var(--desktop-stack-menu-opacity, 1)); padding: var(--desktop-hover-stack-menu-padding, var(--desktop-stack-menu-padding, 0px)); border-width: var(--desktop-hover-stack-menu-border-width, var(--desktop-stack-menu-border-width, 0px)); border-color: var(--desktop-hover-stack-menu-border-color, var(--desktop-stack-menu-border-color, #333333)); border-style: var(--desktop-hover-stack-menu-border-style, var(--desktop-stack-menu-border-style, none)); border-radius: var(--desktop-hover-stack-menu-border-radius, var(--desktop-stack-menu-border-radius, 0px)); box-shadow: var(--desktop-hover-stack-menu-box-shadow, var(--desktop-stack-menu-box-shadow, none)); } .oe-draggable-widget.hovered .oe-stack-menu > .oe-background { border-radius: var(--desktop-hover-stack-menu-bg-radius, var(--desktop-stack-menu-bg-radius, 0px)); pointer-events: none; overflow: hidden; transition: all 0.2s ease-in-out; } .oe-draggable-widget.hovered .oe-stack-menu > .oe-background * { transition: all 0.2s ease-in-out; } .oe-draggable-widget.hovered .oe-stack-menu > .oe-background .oe-background-fill { background-color: var(--desktop-hover-stack-menu-background-color, var(--desktop-stack-menu-background-color, inherit)); opacity: var(--desktop-hover-stack-menu-background-fill-opacity, var(--desktop-stack-menu-background-fill-opacity, 1)); transition: all 0.2s ease-in-out; } .oe-draggable-widget.hovered .oe-stack-menu > .oe-background .oe-background-gradient { opacity: var(--desktop-hover-stack-menu-background-gradient-opacity, var(--desktop-stack-menu-background-gradient-opacity, 1)); background-image: var(--desktop-hover-stack-menu-background-gradient, var(--desktop-stack-menu-background-gradient)); transition: all 0.2s ease-in-out; } .oe-draggable-widget.hovered .oe-stack-menu > .oe-background .oe-background-image { opacity: var(--desktop-hover-stack-menu-background-image-opacity, var(--desktop-stack-menu-background-image-opacity, 1)); background-image: var(--desktop-hover-stack-menu-background-image, var(--desktop-stack-menu-background-image)); background-repeat: var(--desktop-hover-stack-menu-background-repeat, var(--desktop-stack-menu-background-repeat, no-repeat)); background-position: var(--desktop-hover-stack-menu-background-position, var(--desktop-stack-menu-background-position, center center)); background-size: var(--desktop-hover-stack-menu-background-size, var(--desktop-stack-menu-background-size, cover)); background-attachment: var(--desktop-hover-stack-menu-background-attachment, var(--desktop-stack-menu-background-attachment, cover)); transition: all 0.2s ease-in-out; } .oe-draggable-widget.hovered .oe-stack-menu:hover { opacity: var(--desktop-hover-stack-menu-opacity, var(--desktop-stack-menu-opacity, 1)); padding: var(--desktop-hover-stack-menu-padding, var(--desktop-stack-menu-padding, 0px)); border-width: var(--desktop-hover-stack-menu-border-width, var(--desktop-stack-menu-border-width, 0px)); border-color: var(--desktop-hover-stack-menu-border-color, var(--desktop-stack-menu-border-color, #333333)); border-style: var(--desktop-hover-stack-menu-border-style, var(--desktop-stack-menu-border-style, none)); border-radius: var(--desktop-hover-stack-menu-border-radius, var(--desktop-stack-menu-border-radius, 0px)); box-shadow: var(--desktop-hover-stack-menu-box-shadow, var(--desktop-stack-menu-box-shadow, none)); } .oe-draggable-widget.hovered .oe-stack-menu:hover > .oe-background { border-radius: var(--desktop-hover-stack-menu-bg-radius, var(--desktop-stack-menu-bg-radius, 0px)); pointer-events: none; overflow: hidden; transition: all 0.2s ease-in-out; } .oe-draggable-widget.hovered .oe-stack-menu:hover > .oe-background * { transition: all 0.2s ease-in-out; } .oe-draggable-widget.hovered .oe-stack-menu:hover > .oe-background .oe-background-fill { background-color: var(--desktop-hover-stack-menu-background-color, var(--desktop-stack-menu-background-color, inherit)); opacity: var(--desktop-hover-stack-menu-background-fill-opacity, var(--desktop-stack-menu-background-fill-opacity, 1)); transition: all 0.2s ease-in-out; } .oe-draggable-widget.hovered .oe-stack-menu:hover > .oe-background .oe-background-gradient { opacity: var(--desktop-hover-stack-menu-background-gradient-opacity, var(--desktop-stack-menu-background-gradient-opacity, 1)); background-image: var(--desktop-hover-stack-menu-background-gradient, var(--desktop-stack-menu-background-gradient)); transition: all 0.2s ease-in-out; } .oe-draggable-widget.hovered .oe-stack-menu:hover > .oe-background .oe-background-image { opacity: var(--desktop-hover-stack-menu-background-image-opacity, var(--desktop-stack-menu-background-image-opacity, 1)); background-image: var(--desktop-hover-stack-menu-background-image, var(--desktop-stack-menu-background-image)); background-repeat: var(--desktop-hover-stack-menu-background-repeat, var(--desktop-stack-menu-background-repeat, no-repeat)); background-position: var(--desktop-hover-stack-menu-background-position, var(--desktop-stack-menu-background-position, center center)); background-size: var(--desktop-hover-stack-menu-background-size, var(--desktop-stack-menu-background-size, cover)); background-attachment: var(--desktop-hover-stack-menu-background-attachment, var(--desktop-stack-menu-background-attachment, cover)); transition: all 0.2s ease-in-out; } .oe-draggable-widget.hovered .oe-stack-menu button { pointer-events: all; position: relative; margin: 0px; display: flex; align-items: center; justify-content: center; cursor: pointer; text-decoration: none; background: transparent; color: var(--desktop-hover-stack-menu-button-color, var(--desktop-stack-menu-button-color, var(--default-button-color))); opacity: var(--desktop-hover-stack-menu-button-opacity, var(--desktop-stack-menu-button-opacity, var(--default-button-opacity))); padding: var(--desktop-hover-stack-menu-button-padding, var(--desktop-stack-menu-button-padding, var(--default-button-padding))); border-width: var(--desktop-hover-stack-menu-button-border-width, var(--desktop-stack-menu-button-border-width, var(--default-button-border-width))); border-style: var(--desktop-hover-stack-menu-button-border-style, var(--desktop-stack-menu-button-border-style, var(--default-button-border-style))); border-color: var(--desktop-hover-stack-menu-button-border-color, var(--desktop-stack-menu-button-border-color, var(--default-button-border-color))); border-radius: var(--desktop-hover-stack-menu-button-border-radius, var(--desktop-stack-menu-button-border-radius, var(--default-button-border-radius))); font-size: var(--desktop-hover-stack-menu-button-font-size, var(--desktop-stack-menu-button-font-size, var(--default-button-font-size))); opacity: var(--desktop-hover-stack-menu-button-opacity, var(--desktop-stack-menu-button-opacity, 1)); box-shadow: var(--desktop-hover-stack-menu-button-box-shadow, var(--desktop-stack-menu-button-box-shadow)); font-family: var(--desktop-hover-stack-menu-button-font-family, var(--desktop-stack-menu-button-font-family, var(--default-button-font-family))); font-weight: var(--desktop-hover-stack-menu-button-font-weight, var(--desktop-stack-menu-button-font-weight, var(--default-button-font-weight))); transform: scale(var(--desktop-hover-scale, var(--desktop-scale, 1))); overflow: hidden; } .oe-draggable-widget.hovered .oe-stack-menu button .oe-button-html { text-align: center; position: relative; width: 100%; white-space: nowrap; text-align: var(--desktop-hover-label-text-align, var(--desktop-label-text-align, center)); } .oe-draggable-widget.hovered .oe-stack-menu button .oe-button-html .oe-button-image { font-size: var(--desktop-hover-stack-menu-button-image-size, var(--desktop-stack-menu-button-image-size, inherit)); } .oe-draggable-widget.hovered .oe-stack-menu button .oe-button-html .oe-button-image svg { fill: var(--desktop-hover-stack-menu-button-shape-fill, var(--desktop-stack-menu-button-shape-fill, #666666)); stroke: var(--desktop-hover-stack-menu-button-shape-stroke, var(--desktop-stack-menu-button-shape-stroke, #666666)); } .oe-draggable-widget.hovered .oe-stack-menu button > .oe-background { pointer-events: none; overflow: hidden; transition: all 0.2s ease-in-out; } .oe-draggable-widget.hovered .oe-stack-menu button > .oe-background:after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 1; box-shadow: var(--desktop-hover-stack-menu-button-box-shadow, var(--desktop-stack-menu-button-box-shadow)); } .oe-draggable-widget.hovered .oe-stack-menu button > .oe-background * { transition: all 0.2s ease-in-out; } .oe-draggable-widget.hovered .oe-stack-menu button > .oe-background .oe-background-fill { background-color: var(--desktop-hover-stack-menu-button-background-color, var(--desktop-stack-menu-button-background-color, var(--default-button-background-color))); opacity: var(--desktop-hover-stack-menu-button-background-fill-opacity, var(--desktop-stack-menu-button-background-fill-opacity, 1)); transition: all 0.2s ease-in-out; } .oe-draggable-widget.hovered .oe-stack-menu button > .oe-background .oe-background-gradient { opacity: var(--desktop-hover-stack-menu-button-background-gradient-opacity, var(--desktop-stack-menu-button-background-gradient-opacity, 1)); background-image: var(--desktop-hover-stack-menu-button-background-gradient, var(--desktop-stack-menu-button-background-gradient)); transition: all 0.2s ease-in-out; } .oe-draggable-widget.hovered .oe-stack-menu button > .oe-background .oe-background-image { opacity: var(--desktop-hover-stack-menu-button-background-image-opacity, var(--desktop-stack-menu-button-background-image-opacity, 1)); background-image: var(--desktop-hover-stack-menu-button-background-image, var(--desktop-stack-menu-button-background-image)); background-repeat: var(--desktop-hover-stack-menu-button-background-repeat, var(--desktop-stack-menu-button-background-repeat, no-repeat)); background-position: var(--desktop-hover-stack-menu-button-background-position, var(--desktop-stack-menu-button-background-position, center center)); background-size: var(--desktop-hover-stack-menu-button-background-size, var(--desktop-stack-menu-button-background-size, cover)); background-attachment: var(--desktop-hover-stack-menu-button-background-attachment, var(--desktop-stack-menu-button-background-attachment, cover)); transition: all 0.2s ease-in-out; } .oe-draggable-widget.hovered .oe-stack-menu button > .oe-background .oe-background-gradient { color: red; } .oe-draggable-widget.hovered .oe-stack-menu button:hover { color: var(--desktop-hover-stack-menu-button-color, var(--desktop-stack-menu-button-color, var(--default-button-color))); opacity: var(--desktop-hover-stack-menu-button-opacity, var(--desktop-stack-menu-button-opacity, var(--default-button-opacity))); padding: var(--desktop-hover-stack-menu-button-padding, var(--desktop-stack-menu-button-padding, var(--default-button-padding))); border-width: var(--desktop-hover-stack-menu-button-border-width, var(--desktop-stack-menu-button-border-width, var(--default-button-border-width))); border-style: var(--desktop-hover-stack-menu-button-border-style, var(--desktop-stack-menu-button-border-style, var(--default-button-border-style))); border-color: var(--desktop-hover-stack-menu-button-border-color, var(--desktop-stack-menu-button-border-color, var(--default-button-border-color))); border-radius: var(--desktop-hover-stack-menu-button-border-radius, var(--desktop-stack-menu-button-border-radius, var(--default-button-border-radius))); font-size: var(--desktop-hover-stack-menu-button-font-size, var(--desktop-stack-menu-button-font-size, var(--default-button-font-size))); opacity: var(--desktop-hover-stack-menu-button-opacity, var(--desktop-stack-menu-button-opacity, 1)); box-shadow: var(--desktop-hover-stack-menu-button-box-shadow, var(--desktop-stack-menu-button-box-shadow)); font-family: var(--desktop-hover-stack-menu-button-font-family, var(--desktop-stack-menu-button-font-family, var(--default-button-font-family))); font-weight: var(--desktop-hover-stack-menu-button-font-weight, var(--desktop-stack-menu-button-font-weight, var(--default-button-font-weight))); transform: scale(var(--desktop-hover-scale, var(--desktop-scale, 1))); } .oe-draggable-widget.hovered .oe-stack-menu button:hover .oe-button-html .oe-button-image { font-size: var(--desktop-hover-stack-menu-button-image-size, var(--desktop-stack-menu-button-image-size, inherit)); } .oe-draggable-widget.hovered .oe-stack-menu button:hover .oe-button-html .oe-button-image svg { fill: var(--desktop-hover-stack-menu-button-shape-fill, var(--desktop-stack-menu-button-shape-fill, #666666)); stroke: var(--desktop-hover-stack-menu-button-shape-stroke, var(--desktop-stack-menu-button-shape-stroke, #666666)); } .oe-draggable-widget.hovered .oe-stack-menu button:hover > .oe-background { pointer-events: none; overflow: hidden; transition: all 0.2s ease-in-out; } .oe-draggable-widget.hovered .oe-stack-menu button:hover > .oe-background:after { box-shadow: var(--desktop-hover-stack-menu-button-box-shadow, var(--desktop-stack-menu-button-box-shadow)); } .oe-draggable-widget.hovered .oe-stack-menu button:hover > .oe-background * { transition: all 0.2s ease-in-out; } .oe-draggable-widget.hovered .oe-stack-menu button:hover > .oe-background .oe-background-fill { background-color: var(--desktop-hover-stack-menu-button-background-color, var(--desktop-stack-menu-button-background-color, var(--default-button-background-color))); opacity: var(--desktop-hover-stack-menu-button-background-fill-opacity, var(--desktop-stack-menu-button-background-fill-opacity, 1)); transition: all 0.2s ease-in-out; } .oe-draggable-widget.hovered .oe-stack-menu button:hover > .oe-background .oe-background-gradient { opacity: var(--desktop-hover-stack-menu-button-background-gradient-opacity, var(--desktop-stack-menu-button-background-gradient-opacity, 1)); background-image: var(--desktop-hover-stack-menu-button-background-gradient, var(--desktop-stack-menu-button-background-gradient)); transition: all 0.2s ease-in-out; } .oe-draggable-widget.hovered .oe-stack-menu button:hover > .oe-background .oe-background-image { opacity: var(--desktop-hover-stack-menu-button-background-image-opacity, var(--desktop-stack-menu-button-background-image-opacity, 1)); background-image: var(--desktop-hover-stack-menu-button-background-image, var(--desktop-stack-menu-button-background-image)); background-repeat: var(--desktop-hover-stack-menu-button-background-repeat, var(--desktop-stack-menu-button-background-repeat, no-repeat)); background-position: var(--desktop-hover-stack-menu-button-background-position, var(--desktop-stack-menu-button-background-position, center center)); background-size: var(--desktop-hover-stack-menu-button-background-size, var(--desktop-stack-menu-button-background-size, cover)); background-attachment: var(--desktop-hover-stack-menu-button-background-attachment, var(--desktop-stack-menu-button-background-attachment, cover)); transition: all 0.2s ease-in-out; } .oe-draggable-widget.hovered .oe-stack-menu button:hover > .oe-background .oe-background-gradient { color: red; } .oe-draggable-widget.hovered .oe-stack-menu button.selected { position: relative; pointer-events: all; margin: 0px; display: flex; align-items: center; justify-content: center; cursor: pointer; text-decoration: none; color: var(--desktop-selected-stack-menu-button-color, var(--desktop-stack-menu-button-color, var(--desktop-hover-stack-menu-button-color , var(--desktop-stack-menu-button-color , var(--default-button-color))))); opacity: var(--desktop-selected-stack-menu-button-opacity, var(--desktop-stack-menu-button-opacity, var(--desktop-hover-stack-menu-button-opacity , var(--desktop-stack-menu-button-opacity , var(--default-button-opacity))))); padding: var(--desktop-selected-stack-menu-button-padding, var(--desktop-stack-menu-button-padding, var(--desktop-hover-stack-menu-button-padding , var(--desktop-stack-menu-button-padding , var(--default-button-padding))))); border-width: var(--desktop-selected-stack-menu-button-border-width, var(--desktop-stack-menu-button-border-width, var(--desktop-hover-stack-menu-button-border-width , var(--desktop-stack-menu-button-border-width , var(--default-button-border-width))))); border-style: var(--desktop-selected-stack-menu-button-border-style, var(--desktop-stack-menu-button-border-style, var(--desktop-hover-stack-menu-button-border-style , var(--desktop-stack-menu-button-border-style , var(--default-button-border-style))))); border-color: var(--desktop-selected-stack-menu-button-border-color, var(--desktop-stack-menu-button-border-color, var(--desktop-hover-stack-menu-button-border-color , var(--desktop-stack-menu-button-border-color , var(--default-button-border-color))))); border-radius: var(--desktop-selected-stack-menu-button-border-radius, var(--desktop-stack-menu-button-border-radius, var(--desktop-hover-stack-menu-button-border-radius , var(--desktop-stack-menu-button-border-radius , var(--default-button-border-radius))))); font-size: var(--desktop-selected-stack-menu-button-font-size, var(--desktop-stack-menu-button-font-size, var(--desktop-hover-stack-menu-button-font-size , var(--desktop-stack-menu-button-font-size , var(--default-button-font-size))))); opacity: var(--desktop-selected-stack-menu-button-opacity, var(--desktop-stack-menu-button-opacity, 1)); box-shadow: var(--desktop-selected-stack-menu-button-box-shadow, var(--desktop-stack-menu-button-box-shadow)); font-family: var(--desktop-selected-stack-menu-button-font-family, var(--desktop-stack-menu-button-font-family, var(--desktop-hover-stack-menu-button-font-family , var(--desktop-stack-menu-button-font-family , var(--default-button-font-family))))); font-weight: var(--desktop-selected-stack-menu-button-font-weight, var(--desktop-stack-menu-button-font-weight, var(--desktop-hover-stack-menu-button-font-weight , var(--desktop-stack-menu-button-font-weight , var(--default-button-font-weight))))); transform: scale(var(--desktop-hover-scale, var(--desktop-scale, 1))); overflow: hidden; } .oe-draggable-widget.hovered .oe-stack-menu button.selected .oe-button-html .oe-button-image { font-size: var(--desktop-selected-stack-menu-button-image-size, var(--desktop-stack-menu-button-image-size, inherit)); } .oe-draggable-widget.hovered .oe-stack-menu button.selected .oe-button-html .oe-button-image svg { fill: var(--desktop-selected-stack-menu-button-shape-fill, var(--desktop-stack-menu-button-shape-fill, #666666)); stroke: var(--desktop-selected-stack-menu-button-shape-stroke, var(--desktop-stack-menu-button-shape-stroke, #666666)); } .oe-draggable-widget.hovered .oe-stack-menu button.selected .oe-button-html { text-align: center; position: relative; width: 100%; text-align: var(--desktop-selected-label-text-align, var(--desktop-label-text-align, center)); } .oe-draggable-widget.hovered .oe-stack-menu button.selected > .oe-background { pointer-events: none; overflow: hidden; transition: all 0.2s ease-in-out; } .oe-draggable-widget.hovered .oe-stack-menu button.selected > .oe-background:after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 1; box-shadow: var(--desktop-selected-stack-menu-button-box-shadow, var(--desktop-stack-menu-button-box-shadow)); } .oe-draggable-widget.hovered .oe-stack-menu button.selected > .oe-background * { transition: all 0.2s ease-in-out; } .oe-draggable-widget.hovered .oe-stack-menu button.selected > .oe-background .oe-background-fill { background-color: var(--desktop-selected-stack-menu-button-background-color, var(--desktop-stack-menu-button-background-color, var(--desktop-hover-stack-menu-button-background-color , var(--desktop-stack-menu-button-background-color , var(--default-button-background-color))))); opacity: var(--desktop-selected-stack-menu-button-background-fill-opacity, var(--desktop-stack-menu-button-background-fill-opacity, 1)); transition: all 0.2s ease-in-out; } .oe-draggable-widget.hovered .oe-stack-menu button.selected > .oe-background .oe-background-gradient { opacity: var(--desktop-selected-stack-menu-button-background-gradient-opacity, var(--desktop-stack-menu-button-background-gradient-opacity, 1)); background-image: var(--desktop-selected-stack-menu-button-background-gradient, var(--desktop-stack-menu-button-background-gradient)); transition: all 0.2s ease-in-out; } .oe-draggable-widget.hovered .oe-stack-menu button.selected > .oe-background .oe-background-image { opacity: var(--desktop-selected-stack-menu-button-background-image-opacity, var(--desktop-stack-menu-button-background-image-opacity, 1)); background-image: var(--desktop-selected-stack-menu-button-background-image, var(--desktop-stack-menu-button-background-image)); background-repeat: var(--desktop-selected-stack-menu-button-background-repeat, var(--desktop-stack-menu-button-background-repeat, no-repeat)); background-position: var(--desktop-selected-stack-menu-button-background-position, var(--desktop-stack-menu-button-background-position, center center)); background-size: var(--desktop-selected-stack-menu-button-background-size, var(--desktop-stack-menu-button-background-size, cover)); background-attachment: var(--desktop-selected-stack-menu-button-background-attachment, var(--desktop-stack-menu-button-background-attachment, cover)); transition: all 0.2s ease-in-out; } .oe-draggable-widget.hovered .oe-stack-menu button.selected > .oe-background .oe-background-gradient { color: red; } .oe-stack-widget { overflow: hidden; position: relative !important; height: 100%; width: 100%; } .oe-stack-widget.empty { min-height: 50px; } .oe-stack-widget .empty-grid { position: absolute; top: 0; right: 0; bottom: 0; left: 0; pointer-events: none; } .oe-stack-widget .empty-grid .empty-block { z-index: -1; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; height: calc(100%); pointer-events: none; place-content: center; place-items: center; font-family: lato; font-size: 14px; text-align: center; } .oe-stack-widget .oe-stack { position: absolute; overflow: hidden; left: 0; top: 0; display: grid; margin: auto; width: var(--grid-gw); grid-gap: var(--gg); grid-template-columns: repeat(var(--gc), calc((var(--grid-gw) + var(--gg)) / var(--gc) - var(--gg))) !important; grid-auto-rows: calc((var(--grid-gw) + var(--gg)) / var(--gc) - var(--gg)) !important; grid-auto-flow: row dense; height: calc(100% - (var(--desktop-vpadding))); padding: var(--desktop-grid-padding); } .oe-stack-widget .oe-stack.oe-stack-hidden { pointer-events: none !important; opacity: 0; } .oe-stack-widget .oe-stack.oe-stack-hidden * { pointer-events: none !important; } .oe-stack-widget .oe-stack.oe-stack-blur { pointer-events: none !important; /* Blur show previous layers in stack mode */ opacity: 0.2; } .oe-stack-widget .oe-stack.oe-stack-blur * { pointer-events: none !important; } .oe-stack-widget .oe-stack .oe-draggable-widget { margin: 0; } .oe-stack-widget .oe-stack .oe-button-widget { position: absolute; } .oe-stack-widget .oe-stack .oe-widget-overlay .resizer { display: flex !important; } .oe-stack-widget .oe-stack .oe-widget-overlay .resizer .bottomright { display: flex !important; } .oe-stack-widget .oe-stack .oe-widget-overlay .resizer .bottom, .oe-stack-widget .oe-stack .oe-widget-overlay .resizer .right { display: none !important; } /* Blur show previous layers in stack mode */ .oe-draggable-widget:not(.boxEditing) .oe-stack.oe-stack-blur { opacity: initial; } /* Handle container base */ .oe-draggable-widget[eltype="stack"] .oe-stack-widget { padding: var(--grid-padding, 0px); border-width: var(--desktop-grid-border-width, 0px); border-color: var(--desktop-grid-border-color, #333333); border-style: var(--desktop-grid-border-style, none); border-radius: var(--desktop-grid-border-radius, 0px); box-shadow: var(--desktop-grid-box-shadow, none); } .oe-draggable-widget[eltype="stack"] .oe-stack-widget .oe-stack { height: calc(100% - (var(--desktop-vpadding))); padding: var(--desktop-grid-padding); } .oe-draggable-widget[eltype="stack"] .oe-stack-widget > .oe-background { overflow: hidden; border-radius: var(--desktop-grid-bg-radius, 0px); pointer-events: none; overflow: hidden; transition: all 0.2s ease-in-out; } .oe-draggable-widget[eltype="stack"] .oe-stack-widget > .oe-background * { transition: all 0.2s ease-in-out; } .oe-draggable-widget[eltype="stack"] .oe-stack-widget > .oe-background .oe-background-fill { background-color: var(--desktop-grid-background-color, ); opacity: var(--desktop-grid-background-fill-opacity, 1); transition: all 0.2s ease-in-out; } .oe-draggable-widget[eltype="stack"] .oe-stack-widget > .oe-background .oe-background-gradient { opacity: var(--desktop-grid-background-gradient-opacity, 1); background-image: var(--desktop-grid-background-gradient); transition: all 0.2s ease-in-out; } .oe-draggable-widget[eltype="stack"] .oe-stack-widget > .oe-background .oe-background-image { opacity: var(--desktop-grid-background-image-opacity, 1); background-image: var(--grid-background-image); background-repeat: var(--desktop-grid-background-repeat, no-repeat); background-position: var(--desktop-grid-background-position, center center); background-size: var(--desktop-grid-background-size, cover); background-attachment: var(--desktop-grid-background-attachment, cover); transition: all 0.2s ease-in-out; } /* Handle menu */ .oe-stack-widget-wrapper.oe-stack-menu-justify-start header.oe-stack-menu { justify-content: start; } .oe-stack-widget-wrapper.oe-stack-menu-justify-end header.oe-stack-menu { justify-content: end; } .oe-stack-widget-wrapper.oe-stack-menu-justify-center header.oe-stack-menu { justify-content: center; } .oe-stack-widget-wrapper.oe-stack-menu-justify-space-around header.oe-stack-menu { justify-content: space-around; } .oe-stack-widget-wrapper.oe-stack-menu-justify-space-evenly header.oe-stack-menu { justify-content: space-evenly; } .oe-stack-widget-wrapper.oe-stack-menu-justify-space-between header.oe-stack-menu { justify-content: space-between; } .oe-stack-widget-wrapper.oe-stack-menu-center-overlay { flex-direction: column; } .oe-stack-widget-wrapper.oe-stack-menu-center-overlay header.oe-stack-menu { position: absolute; top: 0; left: 0; bottom: 0; right: 0; align-items: center; flex-direction: row; } .oe-stack-widget-wrapper.oe-stack-menu-center-overlay header.oe-stack-menu button { height: auto; } .oe-stack-widget-wrapper.oe-stack-menu-center-overlay header.oe-stack-menu button:not(:nth-child(2)) { margin-left: var(--desktop-stack-menu-button-margin, 2px); } .oe-stack-widget-wrapper.oe-stack-menu-center-overlay header.oe-stack-menu + .oe-stack-widget.oe-widget-inner { width: auto; } .oe-stack-widget-wrapper.oe-stack-menu-center-stretch-overlay { flex-direction: column; } .oe-stack-widget-wrapper.oe-stack-menu-center-stretch-overlay header.oe-stack-menu { position: absolute; top: 0; left: 0; bottom: 0; right: 0; align-items: center; flex-direction: row; } .oe-stack-widget-wrapper.oe-stack-menu-center-stretch-overlay header.oe-stack-menu button { height: 100%; } .oe-stack-widget-wrapper.oe-stack-menu-center-stretch-overlay header.oe-stack-menu button:not(:nth-child(2)) { margin-left: var(--desktop-stack-menu-button-margin, 2px); } .oe-stack-widget-wrapper.oe-stack-menu-center-stretch-overlay header.oe-stack-menu + .oe-stack-widget.oe-widget-inner { width: auto; } .oe-stack-widget-wrapper.oe-stack-menu-top-overlay { flex-direction: column; } .oe-stack-widget-wrapper.oe-stack-menu-top-overlay header.oe-stack-menu { position: absolute; top: 0; left: 0; right: 0; align-items: center; flex-direction: row; } .oe-stack-widget-wrapper.oe-stack-menu-top-overlay header.oe-stack-menu button { height: 100%; } .oe-stack-widget-wrapper.oe-stack-menu-top-overlay header.oe-stack-menu button:not(:nth-child(2)) { margin-left: var(--desktop-stack-menu-button-margin, 2px); } .oe-stack-widget-wrapper.oe-stack-menu-top-overlay header.oe-stack-menu + .oe-stack-widget.oe-widget-inner { width: auto; } .oe-stack-widget-wrapper.oe-stack-menu-bottom-overlay { flex-direction: column; } .oe-stack-widget-wrapper.oe-stack-menu-bottom-overlay header.oe-stack-menu { position: absolute; left: 0; bottom: 0; right: 0; align-items: center; flex-direction: row; } .oe-stack-widget-wrapper.oe-stack-menu-bottom-overlay header.oe-stack-menu button { height: 100%; } .oe-stack-widget-wrapper.oe-stack-menu-bottom-overlay header.oe-stack-menu button:not(:nth-child(2)) { margin-left: var(--desktop-stack-menu-button-margin, 2px); } .oe-stack-widget-wrapper.oe-stack-menu-bottom-overlay header.oe-stack-menu + .oe-stack-widget.oe-widget-inner { width: auto; } .oe-stack-widget-wrapper.oe-stack-menu-top { flex-direction: column; } .oe-stack-widget-wrapper.oe-stack-menu-top header.oe-stack-menu { position: relative; flex-direction: row; } .oe-stack-widget-wrapper.oe-stack-menu-top header.oe-stack-menu button { height: 100%; } .oe-stack-widget-wrapper.oe-stack-menu-top header.oe-stack-menu button:not(:nth-child(2)) { margin-left: var(--desktop-stack-menu-button-margin, 2px); } .oe-stack-widget-wrapper.oe-stack-menu-top header.oe-stack-menu + .oe-stack-widget.oe-widget-inner { width: auto; } .oe-stack-widget-wrapper.oe-stack-menu-bottom { flex-direction: column-reverse; } .oe-stack-widget-wrapper.oe-stack-menu-bottom header.oe-stack-menu { position: relative; flex-direction: row; } .oe-stack-widget-wrapper.oe-stack-menu-bottom header.oe-stack-menu button { height: 100%; } .oe-stack-widget-wrapper.oe-stack-menu-bottom header.oe-stack-menu button:not(:nth-child(2)) { margin-left: var(--desktop-stack-menu-button-margin, 2px); } .oe-stack-widget-wrapper.oe-stack-menu-bottom header.oe-stack-menu + .oe-stack-widget.oe-widget-inner { width: auto; } .oe-stack-widget-wrapper.oe-stack-menu-left-overlay { flex-direction: row; } .oe-stack-widget-wrapper.oe-stack-menu-left-overlay header.oe-stack-menu { position: absolute; left: 0; top: 0; bottom: 0; align-items: center; flex-direction: column; } .oe-stack-widget-wrapper.oe-stack-menu-left-overlay header.oe-stack-menu button { width: 100%; } .oe-stack-widget-wrapper.oe-stack-menu-left-overlay header.oe-stack-menu button:not(:nth-child(2)) { margin-top: var(--desktop-stack-menu-button-margin, 2px); } .oe-stack-widget-wrapper.oe-stack-menu-left-overlay header.oe-stack-menu + .oe-stack-widget.oe-widget-inner { height: auto; } .oe-stack-widget-wrapper.oe-stack-menu-right-overlay { flex-direction: row-reverse; } .oe-stack-widget-wrapper.oe-stack-menu-right-overlay header.oe-stack-menu { position: absolute; right: 0; top: 0; bottom: 0; align-items: center; flex-direction: column; } .oe-stack-widget-wrapper.oe-stack-menu-right-overlay header.oe-stack-menu button { width: 100%; } .oe-stack-widget-wrapper.oe-stack-menu-right-overlay header.oe-stack-menu button:not(:nth-child(2)) { margin-top: var(--desktop-stack-menu-button-margin, 2px); } .oe-stack-widget-wrapper.oe-stack-menu-right-overlay header.oe-stack-menu + .oe-stack-widget.oe-widget-inner { height: auto; } /* Handle Tablet mode */ @media (min-width: 768px) and (max-width: 1024px) { /* Handle stack scroll */ .oe-stack-widget-wrapper:not([stack-style="stack"])[stack-transition-type="scroll-vertical"] .oe-stack-scroll { transform: translateY(calc( (var(--stack-active-page,0) * -100%) - (var(--stack-active-page, 0) * var(--tablet-vpadding,var(--desktop-vpadding, 0px))))); } .oe-stack-widget-wrapper:not([stack-style="stack"])[stack-transition-type="scroll-horizontal"] .oe-stack-scroll { transform: translateX(calc( (var(--stack-active-page, 0) * -100%) - (var(--stack-active-page, 0) * var(--tablet-hpadding,var(--desktop-hpadding, 0px))))); } /* Handle Menu */ .oe-stack-widget-wrapper.oe-stack-menu-top header.oe-stack-menu button { height: 100%; } .oe-stack-widget-wrapper.oe-stack-menu-top header.oe-stack-menu button:not(:nth-child(2)) { margin-left: var(--device-stack-menu-button-margin, 2px); } .oe-stack-widget-wrapper.oe-stack-menu-bottom header.oe-stack-menu button { height: 100%; } .oe-stack-widget-wrapper.oe-stack-menu-bottom header.oe-stack-menu button:not(:nth-child(2)) { margin-left: var(--device-stack-menu-button-margin, 2px); } .oe-stack-widget-wrapper.oe-stack-menu-left header.oe-stack-menu button { width: 100%; } .oe-stack-widget-wrapper.oe-stack-menu-left header.oe-stack-menu button:not(:nth-child(2)) { margin-top: var(--device-stack-menu-button-margin, 2px); } .oe-stack-widget-wrapper.oe-stack-menu-right header.oe-stack-menu button { width: 100%; } .oe-stack-widget-wrapper.oe-stack-menu-right header.oe-stack-menu button:not(:nth-child(2)) { margin-top: var(--device-stack-menu-button-margin, 2px); } /* Handle Container */ .oe-draggable-widget .oe-stack-widget-wrapper .oe-stack-menu { opacity: var(--tablet-stack-menu-opacity, var(--desktop-stack-menu-opacity, 1)); padding: var(--tablet-stack-menu-padding, var(--desktop-stack-menu-padding, 0px)); border-width: var(--tablet-stack-menu-border-width, var(--desktop-stack-menu-border-width, 0px)); border-color: var(--tablet-stack-menu-border-color, var(--desktop-stack-menu-border-color, #333333)); border-style: var(--tablet-stack-menu-border-style, var(--desktop-stack-menu-border-style, none)); border-radius: var(--tablet-stack-menu-border-radius, var(--desktop-stack-menu-border-radius, 0px)); box-shadow: var(--tablet-stack-menu-box-shadow, var(--desktop-stack-menu-box-shadow, none)); } .oe-draggable-widget .oe-stack-widget-wrapper .oe-stack-menu > .oe-background { border-radius: var(--tablet-stack-menu-bg-radius, var(--desktop-stack-menu-bg-radius, 0px)); pointer-events: none; overflow: hidden; transition: all 0.2s ease-in-out; } .oe-draggable-widget .oe-stack-widget-wrapper .oe-stack-menu > .oe-background * { transition: all 0.2s ease-in-out; } .oe-draggable-widget .oe-stack-widget-wrapper .oe-stack-menu > .oe-background .oe-background-fill { background-color: var(--tablet-stack-menu-background-color, var(--desktop-stack-menu-background-color, inherit)); opacity: var(--tablet-stack-menu-background-fill-opacity, var(--desktop-stack-menu-background-fill-opacity, 1)); transition: all 0.2s ease-in-out; } .oe-draggable-widget .oe-stack-widget-wrapper .oe-stack-menu > .oe-background .oe-background-gradient { opacity: var(--tablet-stack-menu-background-gradient-opacity, var(--desktop-stack-menu-background-gradient-opacity, 1)); background-image: var(--tablet-stack-menu-background-gradient, var(--desktop-stack-menu-background-gradient)); transition: all 0.2s ease-in-out; } .oe-draggable-widget .oe-stack-widget-wrapper .oe-stack-menu > .oe-background .oe-background-image { opacity: var(--tablet-stack-menu-background-image-opacity, var(--desktop-stack-menu-background-image-opacity, 1)); background-image: var(--tablet-stack-menu-background-image, var(--desktop-stack-menu-background-image)); background-repeat: var(--tablet-stack-menu-background-repeat, var(--desktop-stack-menu-background-repeat, no-repeat)); background-position: var(--tablet-stack-menu-background-position, var(--desktop-stack-menu-background-position, center center)); background-size: var(--tablet-stack-menu-background-size, var(--desktop-stack-menu-background-size, cover)); background-attachment: var(--tablet-stack-menu-background-attachment, var(--desktop-stack-menu-background-attachment, cover)); transition: all 0.2s ease-in-out; } .oe-draggable-widget .oe-stack-widget-wrapper .oe-stack-menu:hover { opacity: var(--tablet-hover-stack-menu-opacity, var(--tablet-stack-menu-opacity, var(--desktop-hover-stack-menu-opacity, var(--desktop-stack-menu-opacity, , 1)))); padding: var(--tablet-hover-stack-menu-padding, var(--tablet-stack-menu-padding, var(--desktop-hover-stack-menu-padding, var(--desktop-stack-menu-padding, , 0px)))); border-width: var(--tablet-hover-stack-menu-border-width, var(--tablet-stack-menu-border-width, var(--desktop-hover-stack-menu-border-width, var(--desktop-stack-menu-border-width, , 0px)))); border-color: var(--tablet-hover-stack-menu-border-color, var(--tablet-stack-menu-border-color, var(--desktop-hover-stack-menu-border-color, var(--desktop-stack-menu-border-color, , #333333)))); border-style: var(--tablet-hover-stack-menu-border-style, var(--tablet-stack-menu-border-style, var(--desktop-hover-stack-menu-border-style, var(--desktop-stack-menu-border-style, , none)))); border-radius: var(--tablet-hover-stack-menu-border-radius, var(--tablet-stack-menu-border-radius, var(--desktop-hover-stack-menu-border-radius, var(--desktop-stack-menu-border-radius, , 0px)))); box-shadow: var(--tablet-hover-stack-menu-box-shadow, var(--tablet-stack-menu-box-shadow, var(--desktop-hover-stack-menu-box-shadow, var(--desktop-stack-menu-box-shadow, , none)))); } .oe-draggable-widget .oe-stack-widget-wrapper .oe-stack-menu:hover > .oe-background { border-radius: var(--tablet-hover-stack-menu-bg-radius, var(--tablet-stack-menu-bg-radius, var(--desktop-hover-stack-menu-bg-radius, var(--desktop-stack-menu-bg-radius, , 0px)))); pointer-events: none; overflow: hidden; transition: all 0.2s ease-in-out; } .oe-draggable-widget .oe-stack-widget-wrapper .oe-stack-menu:hover > .oe-background * { transition: all 0.2s ease-in-out; } .oe-draggable-widget .oe-stack-widget-wrapper .oe-stack-menu:hover > .oe-background .oe-background-fill { background-color: var(--tablet-hover-stack-menu-background-color, var(--tablet-stack-menu-background-color, var(--desktop-hover-stack-menu-background-color, var(--desktop-stack-menu-background-color, , inherit)))); opacity: var(--tablet-hover-stack-menu-background-fill-opacity, var(--tablet-stack-menu-background-fill-opacity, var(--desktop-hover-stack-menu-background-fill-opacity, var(--desktop-stack-menu-background-fill-opacity, , 1)))); transition: all 0.2s ease-in-out; } .oe-draggable-widget .oe-stack-widget-wrapper .oe-stack-menu:hover > .oe-background .oe-background-gradient { opacity: var(--tablet-hover-stack-menu-background-gradient-opacity, var(--tablet-stack-menu-background-gradient-opacity, var(--desktop-hover-stack-menu-background-gradient-opacity, var(--desktop-stack-menu-background-gradient-opacity, , 1)))); background-image: var(--tablet-hover-stack-menu-background-gradient, var(--tablet-stack-menu-background-gradient, var(--desktop-hover-stack-menu-background-gradient, var(--desktop-stack-menu-background-gradient, )))); transition: all 0.2s ease-in-out; } .oe-draggable-widget .oe-stack-widget-wrapper .oe-stack-menu:hover > .oe-background .oe-background-image { opacity: var(--tablet-hover-stack-menu-background-image-opacity, var(--tablet-stack-menu-background-image-opacity, var(--desktop-hover-stack-menu-background-image-opacity, var(--desktop-stack-menu-background-image-opacity, , 1)))); background-image: var(--tablet-hover-stack-menu-background-image, var(--tablet-stack-menu-background-image, var(--desktop-hover-stack-menu-background-image, var(--desktop-stack-menu-background-image, )))); background-repeat: var(--tablet-hover-stack-menu-background-repeat, var(--tablet-stack-menu-background-repeat, var(--desktop-hover-stack-menu-background-repeat, var(--desktop-stack-menu-background-repeat, , no-repeat)))); background-position: var(--tablet-hover-stack-menu-background-position, var(--tablet-stack-menu-background-position, var(--desktop-hover-stack-menu-background-position, var(--desktop-stack-menu-background-position, , center center)))); background-size: var(--tablet-hover-stack-menu-background-size, var(--tablet-stack-menu-background-size, var(--desktop-hover-stack-menu-background-size, var(--desktop-stack-menu-background-size, , cover)))); background-attachment: var(--tablet-hover-stack-menu-background-attachment, var(--tablet-stack-menu-background-attachment, var(--desktop-hover-stack-menu-background-attachment, var(--desktop-stack-menu-background-attachment, , cover)))); transition: all 0.2s ease-in-out; } .oe-draggable-widget .oe-stack-widget-wrapper .oe-stack-menu button { pointer-events: all; position: relative; margin: 0px; display: flex; align-items: center; justify-content: center; cursor: pointer; text-decoration: none; background: transparent; color: var(--tablet-stack-menu-button-color, var(--desktop-stack-menu-button-color, var(--default-button-color))); opacity: var(--tablet-stack-menu-button-opacity, var(--desktop-stack-menu-button-opacity, var(--default-button-opacity))); padding: var(--tablet-stack-menu-button-padding, var(--desktop-stack-menu-button-padding, var(--default-button-padding))); border-width: var(--tablet-stack-menu-button-border-width, var(--desktop-stack-menu-button-border-width, var(--default-button-border-width))); border-style: var(--tablet-stack-menu-button-border-style, var(--desktop-stack-menu-button-border-style, var(--default-button-border-style))); border-color: var(--tablet-stack-menu-button-border-color, var(--desktop-stack-menu-button-border-color, var(--default-button-border-color))); border-radius: var(--tablet-stack-menu-button-border-radius, var(--desktop-stack-menu-button-border-radius, var(--default-button-border-radius))); font-size: var(--tablet-stack-menu-button-font-size, var(--desktop-stack-menu-button-font-size, var(--default-button-font-size))); opacity: var(--tablet-stack-menu-button-opacity, var(--desktop-stack-menu-button-opacity, 1)); box-shadow: var(--tablet-stack-menu-button-box-shadow, var(--desktop-stack-menu-button-box-shadow)); font-family: var(--tablet-stack-menu-button-font-family, var(--desktop-stack-menu-button-font-family, var(--default-button-font-family))); font-weight: var(--tablet-stack-menu-button-font-weight, var(--desktop-stack-menu-button-font-weight, var(--default-button-font-weight))); transform: scale(var(--tablet-scale, var(--desktop-scale, 1))); overflow: hidden; } .oe-draggable-widget .oe-stack-widget-wrapper .oe-stack-menu button .oe-button-html { text-align: center; position: relative; width: 100%; white-space: nowrap; text-align: var(--tablet-label-text-align, var(--desktop-label-text-align, center)); } .oe-draggable-widget .oe-stack-widget-wrapper .oe-stack-menu button .oe-button-html .oe-button-image { font-size: var(--tablet-stack-menu-button-image-size, var(--desktop-stack-menu-button-image-size, inherit)); } .oe-draggable-widget .oe-stack-widget-wrapper .oe-stack-menu button .oe-button-html .oe-button-image svg { fill: var(--tablet-stack-menu-button-shape-fill, var(--desktop-stack-menu-button-shape-fill, #666666)); stroke: var(--tablet-stack-menu-button-shape-stroke, var(--desktop-stack-menu-button-shape-stroke, #666666)); } .oe-draggable-widget .oe-stack-widget-wrapper .oe-stack-menu button > .oe-background { pointer-events: none; overflow: hidden; transition: all 0.2s ease-in-out; } .oe-draggable-widget .oe-stack-widget-wrapper .oe-stack-menu button > .oe-background:after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 1; box-shadow: var(--tablet-stack-menu-button-box-shadow, var(--desktop-stack-menu-button-box-shadow)); } .oe-draggable-widget .oe-stack-widget-wrapper .oe-stack-menu button > .oe-background * { transition: all 0.2s ease-in-out; } .oe-draggable-widget .oe-stack-widget-wrapper .oe-stack-menu button > .oe-background .oe-background-fill { background-color: var(--tablet-stack-menu-button-background-color, var(--desktop-stack-menu-button-background-color, var(--default-button-background-color))); opacity: var(--tablet-stack-menu-button-background-fill-opacity, var(--desktop-stack-menu-button-background-fill-opacity, 1)); transition: all 0.2s ease-in-out; } .oe-draggable-widget .oe-stack-widget-wrapper .oe-stack-menu button > .oe-background .oe-background-gradient { opacity: var(--tablet-stack-menu-button-background-gradient-opacity, var(--desktop-stack-menu-button-background-gradient-opacity, 1)); background-image: var(--tablet-stack-menu-button-background-gradient, var(--desktop-stack-menu-button-background-gradient)); transition: all 0.2s ease-in-out; } .oe-draggable-widget .oe-stack-widget-wrapper .oe-stack-menu button > .oe-background .oe-background-image { opacity: var(--tablet-stack-menu-button-background-image-opacity, var(--desktop-stack-menu-button-background-image-opacity, 1)); background-image: var(--tablet-stack-menu-button-background-image, var(--desktop-stack-menu-button-background-image)); background-repeat: var(--tablet-stack-menu-button-background-repeat, var(--desktop-stack-menu-button-background-repeat, no-repeat)); background-position: var(--tablet-stack-menu-button-background-position, var(--desktop-stack-menu-button-background-position, center center)); background-size: var(--tablet-stack-menu-button-background-size, var(--desktop-stack-menu-button-background-size, cover)); background-attachment: var(--tablet-stack-menu-button-background-attachment, var(--desktop-stack-menu-button-background-attachment, cover)); transition: all 0.2s ease-in-out; } .oe-draggable-widget .oe-stack-widget-wrapper .oe-stack-menu button > .oe-background .oe-background-gradient { background-image: var(--tablet-buttonPrefix-background-gradient, var(--default-button-gradient)); color: red; } .oe-draggable-widget .oe-stack-widget-wrapper .oe-stack-menu button:hover { color: var(--tablet-hover-stack-menu-button-color, var(--tablet-stack-menu-button-color, var(--desktop-hover-stack-menu-button-color, var(--desktop-stack-menu-button-color, var(--default-button-color))))); opacity: var(--tablet-hover-stack-menu-button-opacity, var(--tablet-stack-menu-button-opacity, var(--desktop-hover-stack-menu-button-opacity, var(--desktop-stack-menu-button-opacity, var(--default-button-opacity))))); padding: var(--tablet-hover-stack-menu-button-padding, var(--tablet-stack-menu-button-padding, var(--desktop-hover-stack-menu-button-padding, var(--desktop-stack-menu-button-padding, var(--default-button-padding))))); border-width: var(--tablet-hover-stack-menu-button-border-width, var(--tablet-stack-menu-button-border-width, var(--desktop-hover-stack-menu-button-border-width, var(--desktop-stack-menu-button-border-width, var(--default-button-border-width))))); border-style: var(--tablet-hover-stack-menu-button-border-style, var(--tablet-stack-menu-button-border-style, var(--desktop-hover-stack-menu-button-border-style, var(--desktop-stack-menu-button-border-style, var(--default-button-border-style))))); border-color: var(--tablet-hover-stack-menu-button-border-color, var(--tablet-stack-menu-button-border-color, var(--desktop-hover-stack-menu-button-border-color, var(--desktop-stack-menu-button-border-color, var(--default-button-border-color))))); border-radius: var(--tablet-hover-stack-menu-button-border-radius, var(--tablet-stack-menu-button-border-radius, var(--desktop-hover-stack-menu-button-border-radius, var(--desktop-stack-menu-button-border-radius, var(--default-button-border-radius))))); font-size: var(--tablet-hover-stack-menu-button-font-size, var(--tablet-stack-menu-button-font-size, var(--desktop-hover-stack-menu-button-font-size, var(--desktop-stack-menu-button-font-size, var(--default-button-font-size))))); opacity: var(--tablet-hover-stack-menu-button-opacity, var(--tablet-stack-menu-button-opacity, var(--desktop-hover-stack-menu-button-opacity, var(--desktop-stack-menu-button-opacity, 1)))); box-shadow: var(--tablet-hover-stack-menu-button-box-shadow, var(--tablet-stack-menu-button-box-shadow, var(--desktop-hover-stack-menu-button-box-shadow, var(--desktop-stack-menu-button-box-shadow)))); font-family: var(--tablet-hover-stack-menu-button-font-family, var(--tablet-stack-menu-button-font-family, var(--desktop-hover-stack-menu-button-font-family, var(--desktop-stack-menu-button-font-family, var(--default-button-font-family))))); font-weight: var(--tablet-hover-stack-menu-button-font-weight, var(--tablet-stack-menu-button-font-weight, var(--desktop-hover-stack-menu-button-font-weight, var(--desktop-stack-menu-button-font-weight, var(--default-button-font-weight))))); transform: scale(var(--tablet-hover-scale, var(--tablet-scale, var(--desktop-hover-scale, var(--desktop-scale, , 1))))); } .oe-draggable-widget .oe-stack-widget-wrapper .oe-stack-menu button:hover .oe-button-html .oe-button-image { font-size: var(--tablet-hover-stack-menu-button-image-size, var(--tablet-stack-menu-button-image-size, var(--desktop-hover-stack-menu-button-image-size, var(--desktop-stack-menu-button-image-size, inherit)))); } .oe-draggable-widget .oe-stack-widget-wrapper .oe-stack-menu button:hover .oe-button-html .oe-button-image svg { fill: var(--tablet-hover-stack-menu-button-shape-fill, var(--tablet-stack-menu-button-shape-fill, var(--desktop-hover-stack-menu-button-shape-fill, var(--desktop-stack-menu-button-shape-fill, , #666666)))); stroke: var(--tablet-hover-stack-menu-button-shape-stroke, var(--tablet-stack-menu-button-shape-stroke, var(--desktop-hover-stack-menu-button-shape-stroke, var(--desktop-stack-menu-button-shape-stroke, , #666666)))); } .oe-draggable-widget .oe-stack-widget-wrapper .oe-stack-menu button:hover > .oe-background { pointer-events: none; overflow: hidden; transition: all 0.2s ease-in-out; } .oe-draggable-widget .oe-stack-widget-wrapper .oe-stack-menu button:hover > .oe-background:after { box-shadow: var(--tablet-hover-stack-menu-button-box-shadow, var(--tablet-stack-menu-button-box-shadow, var(--desktop-hover-stack-menu-button-box-shadow, var(--desktop-stack-menu-button-box-shadow)))); } .oe-draggable-widget .oe-stack-widget-wrapper .oe-stack-menu button:hover > .oe-background * { transition: all 0.2s ease-in-out; } .oe-draggable-widget .oe-stack-widget-wrapper .oe-stack-menu button:hover > .oe-background .oe-background-fill { background-color: var(--tablet-hover-stack-menu-button-background-color, var(--tablet-stack-menu-button-background-color, var(--desktop-hover-stack-menu-button-background-color, var(--desktop-stack-menu-button-background-color, , var(--default-button-background-color))))); opacity: var(--tablet-hover-stack-menu-button-background-fill-opacity, var(--tablet-stack-menu-button-background-fill-opacity, var(--desktop-hover-stack-menu-button-background-fill-opacity, var(--desktop-stack-menu-button-background-fill-opacity, , 1)))); transition: all 0.2s ease-in-out; } .oe-draggable-widget .oe-stack-widget-wrapper .oe-stack-menu button:hover > .oe-background .oe-background-gradient { opacity: var(--tablet-hover-stack-menu-button-background-gradient-opacity, var(--tablet-stack-menu-button-background-gradient-opacity, var(--desktop-hover-stack-menu-button-background-gradient-opacity, var(--desktop-stack-menu-button-background-gradient-opacity, , 1)))); background-image: var(--tablet-hover-stack-menu-button-background-gradient, var(--tablet-stack-menu-button-background-gradient, var(--desktop-hover-stack-menu-button-background-gradient, var(--desktop-stack-menu-button-background-gradient, )))); transition: all 0.2s ease-in-out; } .oe-draggable-widget .oe-stack-widget-wrapper .oe-stack-menu button:hover > .oe-background .oe-background-image { opacity: var(--tablet-hover-stack-menu-button-background-image-opacity, var(--tablet-stack-menu-button-background-image-opacity, var(--desktop-hover-stack-menu-button-background-image-opacity, var(--desktop-stack-menu-button-background-image-opacity, , 1)))); background-image: var(--tablet-hover-stack-menu-button-background-image, var(--tablet-stack-menu-button-background-image, var(--desktop-hover-stack-menu-button-background-image, var(--desktop-stack-menu-button-background-image, )))); background-repeat: var(--tablet-hover-stack-menu-button-background-repeat, var(--tablet-stack-menu-button-background-repeat, var(--desktop-hover-stack-menu-button-background-repeat, var(--desktop-stack-menu-button-background-repeat, , no-repeat)))); background-position: var(--tablet-hover-stack-menu-button-background-position, var(--tablet-stack-menu-button-background-position, var(--desktop-hover-stack-menu-button-background-position, var(--desktop-stack-menu-button-background-position, , center center)))); background-size: var(--tablet-hover-stack-menu-button-background-size, var(--tablet-stack-menu-button-background-size, var(--desktop-hover-stack-menu-button-background-size, var(--desktop-stack-menu-button-background-size, , cover)))); background-attachment: var(--tablet-hover-stack-menu-button-background-attachment, var(--tablet-stack-menu-button-background-attachment, var(--desktop-hover-stack-menu-button-background-attachment, var(--desktop-stack-menu-button-background-attachment, , cover)))); transition: all 0.2s ease-in-out; } .oe-draggable-widget .oe-stack-widget-wrapper .oe-stack-menu button:hover > .oe-background .oe-background-gradient { color: red; } .oe-draggable-widget .oe-stack-widget-wrapper .oe-stack-menu button.selected { position: relative; pointer-events: all; margin: 0px; display: flex; align-items: center; justify-content: center; cursor: pointer; text-decoration: none; color: var(--tablet-selected-stack-menu-button-color, var(--tablet-stack-menu-button-color, var(--desktop-selected-stack-menu-button-color, var(--desktop-stack-menu-button-color, var(--tablet-hover-stack-menu-button-color , var(--tablet-stack-menu-button-color , var(--desktop-stack-menu-button-color ,var(--default-button-color)))))))); opacity: var(--tablet-selected-stack-menu-button-opacity, var(--tablet-stack-menu-button-opacity, var(--desktop-selected-stack-menu-button-opacity, var(--desktop-stack-menu-button-opacity, var(--tablet-hover-stack-menu-button-opacity , var(--tablet-stack-menu-button-opacity , var(--desktop-stack-menu-button-opacity ,var(--default-button-opacity)))))))); padding: var(--tablet-selected-stack-menu-button-padding, var(--tablet-stack-menu-button-padding, var(--desktop-selected-stack-menu-button-padding, var(--desktop-stack-menu-button-padding, var(--tablet-hover-stack-menu-button-padding , var(--tablet-stack-menu-button-padding , var(--desktop-stack-menu-button-padding ,var(--default-button-padding)))))))); border-width: var(--tablet-selected-stack-menu-button-border-width, var(--tablet-stack-menu-button-border-width, var(--desktop-selected-stack-menu-button-border-width, var(--desktop-stack-menu-button-border-width, var(--tablet-hover-stack-menu-button-border-width , var(--tablet-stack-menu-button-border-width , var(--desktop-stack-menu-button-border-width ,var(--default-button-border-width)))))))); border-style: var(--tablet-selected-stack-menu-button-border-style, var(--tablet-stack-menu-button-border-style, var(--desktop-selected-stack-menu-button-border-style, var(--desktop-stack-menu-button-border-style, var(--tablet-hover-stack-menu-button-border-style , var(--tablet-stack-menu-button-border-style , var(--desktop-stack-menu-button-border-style ,var(--default-button-border-style)))))))); border-color: var(--tablet-selected-stack-menu-button-border-color, var(--tablet-stack-menu-button-border-color, var(--desktop-selected-stack-menu-button-border-color, var(--desktop-stack-menu-button-border-color, var(--tablet-hover-stack-menu-button-border-color , var(--tablet-stack-menu-button-border-color , var(--desktop-stack-menu-button-border-color ,var(--default-button-border-color)))))))); border-radius: var(--tablet-selected-stack-menu-button-border-radius, var(--tablet-stack-menu-button-border-radius, var(--desktop-selected-stack-menu-button-border-radius, var(--desktop-stack-menu-button-border-radius, var(--tablet-hover-stack-menu-button-border-radius , var(--tablet-stack-menu-button-border-radius , var(--desktop-stack-menu-button-border-radius ,var(--default-button-border-radius)))))))); font-size: var(--tablet-selected-stack-menu-button-font-size, var(--tablet-stack-menu-button-font-size, var(--desktop-selected-stack-menu-button-font-size, var(--desktop-stack-menu-button-font-size, var(--tablet-hover-stack-menu-button-font-size , var(--tablet-stack-menu-button-font-size , var(--desktop-stack-menu-button-font-size ,var(--default-button-font-size)))))))); opacity: var(--tablet-selected-stack-menu-button-opacity, var(--tablet-stack-menu-button-opacity, var(--desktop-selected-stack-menu-button-opacity, var(--desktop-stack-menu-button-opacity, 1)))); box-shadow: var(--tablet-selected-stack-menu-button-box-shadow, var(--tablet-stack-menu-button-box-shadow, var(--desktop-selected-stack-menu-button-box-shadow, var(--desktop-stack-menu-button-box-shadow)))); font-family: var(--tablet-selected-stack-menu-button-font-family, var(--tablet-stack-menu-button-font-family, var(--desktop-selected-stack-menu-button-font-family, var(--desktop-stack-menu-button-font-family, var(--tablet-hover-stack-menu-button-font-family , var(--tablet-stack-menu-button-font-family , var(--desktop-stack-menu-button-font-family ,var(--default-button-font-family)))))))); font-weight: var(--tablet-selected-stack-menu-button-font-weight, var(--tablet-stack-menu-button-font-weight, var(--desktop-selected-stack-menu-button-font-weight, var(--desktop-stack-menu-button-font-weight, var(--tablet-hover-stack-menu-button-font-weight , var(--tablet-stack-menu-button-font-weight , var(--desktop-stack-menu-button-font-weight ,var(--default-button-font-weight)))))))); transform: scale(var(--tablet-hover-scale, var(--tablet-scale, var(--desktop-hover-scale, var(--desktop-scale, , 1))))); overflow: hidden; } .oe-draggable-widget .oe-stack-widget-wrapper .oe-stack-menu button.selected .oe-button-html .oe-button-image { font-size: var(--tablet-selected-stack-menu-button-image-size, var(--tablet-stack-menu-button-image-size, var(--desktop-selected-stack-menu-button-image-size, var(--desktop-stack-menu-button-image-size, inherit)))); } .oe-draggable-widget .oe-stack-widget-wrapper .oe-stack-menu button.selected .oe-button-html .oe-button-image svg { fill: var(--tablet-selected-stack-menu-button-shape-fill, var(--tablet-stack-menu-button-shape-fill, var(--desktop-selected-stack-menu-button-shape-fill, var(--desktop-stack-menu-button-shape-fill, , #666666)))); stroke: var(--tablet-selected-stack-menu-button-shape-stroke, var(--tablet-stack-menu-button-shape-stroke, var(--desktop-selected-stack-menu-button-shape-stroke, var(--desktop-stack-menu-button-shape-stroke, , #666666)))); } .oe-draggable-widget .oe-stack-widget-wrapper .oe-stack-menu button.selected .oe-button-html { text-align: center; position: relative; width: 100%; text-align: var(--tablet-selected-label-text-align, var(--tablet-label-text-align, var(--desktop-selected-label-text-align, var(--desktop-label-text-align, center)))); } .oe-draggable-widget .oe-stack-widget-wrapper .oe-stack-menu button.selected > .oe-background { pointer-events: none; overflow: hidden; transition: all 0.2s ease-in-out; } .oe-draggable-widget .oe-stack-widget-wrapper .oe-stack-menu button.selected > .oe-background:after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 1; box-shadow: var(--tablet-selected-stack-menu-button-box-shadow, var(--tablet-stack-menu-button-box-shadow, var(--desktop-selected-stack-menu-button-box-shadow, var(--desktop-stack-menu-button-box-shadow)))); } .oe-draggable-widget .oe-stack-widget-wrapper .oe-stack-menu button.selected > .oe-background * { transition: all 0.2s ease-in-out; } .oe-draggable-widget .oe-stack-widget-wrapper .oe-stack-menu button.selected > .oe-background .oe-background-fill { background-color: var(--tablet-selected-stack-menu-button-background-color, var(--tablet-stack-menu-button-background-color, var(--desktop-selected-stack-menu-button-background-color, var(--desktop-stack-menu-button-background-color, , var(--tablet-hover-stack-menu-button-background-color , var(--tablet-stack-menu-button-background-color , var(--desktop-stack-menu-button-background-color ,var(--default-button-background-color)))))))); opacity: var(--tablet-selected-stack-menu-button-background-fill-opacity, var(--tablet-stack-menu-button-background-fill-opacity, var(--desktop-selected-stack-menu-button-background-fill-opacity, var(--desktop-stack-menu-button-background-fill-opacity, , 1)))); transition: all 0.2s ease-in-out; } .oe-draggable-widget .oe-stack-widget-wrapper .oe-stack-menu button.selected > .oe-background .oe-background-gradient { opacity: var(--tablet-selected-stack-menu-button-background-gradient-opacity, var(--tablet-stack-menu-button-background-gradient-opacity, var(--desktop-selected-stack-menu-button-background-gradient-opacity, var(--desktop-stack-menu-button-background-gradient-opacity, , 1)))); background-image: var(--tablet-selected-stack-menu-button-background-gradient, var(--tablet-stack-menu-button-background-gradient, var(--desktop-selected-stack-menu-button-background-gradient, var(--desktop-stack-menu-button-background-gradient, )))); transition: all 0.2s ease-in-out; } .oe-draggable-widget .oe-stack-widget-wrapper .oe-stack-menu button.selected > .oe-background .oe-background-image { opacity: var(--tablet-selected-stack-menu-button-background-image-opacity, var(--tablet-stack-menu-button-background-image-opacity, var(--desktop-selected-stack-menu-button-background-image-opacity, var(--desktop-stack-menu-button-background-image-opacity, , 1)))); background-image: var(--tablet-selected-stack-menu-button-background-image, var(--tablet-stack-menu-button-background-image, var(--desktop-selected-stack-menu-button-background-image, var(--desktop-stack-menu-button-background-image, )))); background-repeat: var(--tablet-selected-stack-menu-button-background-repeat, var(--tablet-stack-menu-button-background-repeat, var(--desktop-selected-stack-menu-button-background-repeat, var(--desktop-stack-menu-button-background-repeat, , no-repeat)))); background-position: var(--tablet-selected-stack-menu-button-background-position, var(--tablet-stack-menu-button-background-position, var(--desktop-selected-stack-menu-button-background-position, var(--desktop-stack-menu-button-background-position, , center center)))); background-size: var(--tablet-selected-stack-menu-button-background-size, var(--tablet-stack-menu-button-background-size, var(--desktop-selected-stack-menu-button-background-size, var(--desktop-stack-menu-button-background-size, , cover)))); background-attachment: var(--tablet-selected-stack-menu-button-background-attachment, var(--tablet-stack-menu-button-background-attachment, var(--desktop-selected-stack-menu-button-background-attachment, var(--desktop-stack-menu-button-background-attachment, , cover)))); transition: all 0.2s ease-in-out; } .oe-draggable-widget .oe-stack-widget-wrapper .oe-stack-menu button.selected > .oe-background .oe-background-gradient { color: red; } .oe-draggable-widget[eltype="stack"] { /* Handles preview of hovered stack menu */ } .oe-draggable-widget[eltype="stack"] .oe-stack-widget { padding: var(--grid-padding, 0px); border-width: var(--tablet-grid-border-width, var(--desktop-grid-border-width, 0px)); border-color: var(--tablet-grid-border-color, var(--desktop-grid-border-color, #333333)); border-style: var(--tablet-grid-border-style, var(--desktop-grid-border-style, none)); border-radius: var(--tablet-grid-border-radius, var(--desktop-grid-border-radius, 0px)); box-shadow: var(--tablet-grid-box-shadow, var(--desktop-grid-box-shadow, none)); } .oe-draggable-widget[eltype="stack"] .oe-stack-widget .oe-stack { --gw: var(--tablet-gw); height: calc(100% - (var(--tablet-vpadding))); padding: var(--tablet-grid-padding); } .oe-draggable-widget[eltype="stack"] .oe-stack-widget > .oe-background { border-radius: var(--tablet-grid-bg-radius, var(--desktop-grid-bg-radius, 0px)); pointer-events: none; overflow: hidden; transition: all 0.2s ease-in-out; } .oe-draggable-widget[eltype="stack"] .oe-stack-widget > .oe-background * { transition: all 0.2s ease-in-out; } .oe-draggable-widget[eltype="stack"] .oe-stack-widget > .oe-background .oe-background-fill { background-color: var(--tablet-grid-background-color, var(--desktop-grid-background-color, )); opacity: var(--tablet-grid-background-fill-opacity, var(--desktop-grid-background-fill-opacity, 1)); transition: all 0.2s ease-in-out; } .oe-draggable-widget[eltype="stack"] .oe-stack-widget > .oe-background .oe-background-gradient { opacity: var(--tablet-grid-background-gradient-opacity, var(--desktop-grid-background-gradient-opacity, 1)); background-image: var(--tablet-grid-background-gradient, var(--desktop-grid-background-gradient)); transition: all 0.2s ease-in-out; } .oe-draggable-widget[eltype="stack"] .oe-stack-widget > .oe-background .oe-background-image { opacity: var(--tablet-grid-background-image-opacity, var(--desktop-grid-background-image-opacity, 1)); background-image: var(--grid-background-image); background-repeat: var(--tablet-grid-background-repeat, var(--desktop-grid-background-repeat, no-repeat)); background-position: var(--tablet-grid-background-position, var(--desktop-grid-background-position, center center)); background-size: var(--tablet-grid-background-size, var(--desktop-grid-background-size, cover)); background-attachment: var(--tablet-grid-background-attachment, var(--desktop-grid-background-attachment, cover)); transition: all 0.2s ease-in-out; } .oe-draggable-widget[eltype="stack"].hovered .oe-stack-widget-wrapper .oe-stack-menu { opacity: var(--tablet-hover-stack-menu-opacity, var(--tablet-stack-menu-opacity, var(--desktop-hover-stack-menu-opacity, var(--desktop-stack-menu-opacity, , 1)))); padding: var(--tablet-hover-stack-menu-padding, var(--tablet-stack-menu-padding, var(--desktop-hover-stack-menu-padding, var(--desktop-stack-menu-padding, , 0px)))); border-width: var(--tablet-hover-stack-menu-border-width, var(--tablet-stack-menu-border-width, var(--desktop-hover-stack-menu-border-width, var(--desktop-stack-menu-border-width, , 0px)))); border-color: var(--tablet-hover-stack-menu-border-color, var(--tablet-stack-menu-border-color, var(--desktop-hover-stack-menu-border-color, var(--desktop-stack-menu-border-color, , #333333)))); border-style: var(--tablet-hover-stack-menu-border-style, var(--tablet-stack-menu-border-style, var(--desktop-hover-stack-menu-border-style, var(--desktop-stack-menu-border-style, , none)))); border-radius: var(--tablet-hover-stack-menu-border-radius, var(--tablet-stack-menu-border-radius, var(--desktop-hover-stack-menu-border-radius, var(--desktop-stack-menu-border-radius, , 0px)))); box-shadow: var(--tablet-hover-stack-menu-box-shadow, var(--tablet-stack-menu-box-shadow, var(--desktop-hover-stack-menu-box-shadow, var(--desktop-stack-menu-box-shadow, , none)))); } .oe-draggable-widget[eltype="stack"].hovered .oe-stack-widget-wrapper .oe-stack-menu > .oe-background { border-radius: var(--tablet-hover-stack-menu-bg-radius, var(--tablet-stack-menu-bg-radius, var(--desktop-hover-stack-menu-bg-radius, var(--desktop-stack-menu-bg-radius, , 0px)))); pointer-events: none; overflow: hidden; transition: all 0.2s ease-in-out; } .oe-draggable-widget[eltype="stack"].hovered .oe-stack-widget-wrapper .oe-stack-menu > .oe-background * { transition: all 0.2s ease-in-out; } .oe-draggable-widget[eltype="stack"].hovered .oe-stack-widget-wrapper .oe-stack-menu > .oe-background .oe-background-fill { background-color: var(--tablet-hover-stack-menu-background-color, var(--tablet-stack-menu-background-color, var(--desktop-hover-stack-menu-background-color, var(--desktop-stack-menu-background-color, , inherit)))); opacity: var(--tablet-hover-stack-menu-background-fill-opacity, var(--tablet-stack-menu-background-fill-opacity, var(--desktop-hover-stack-menu-background-fill-opacity, var(--desktop-stack-menu-background-fill-opacity, , 1)))); transition: all 0.2s ease-in-out; } .oe-draggable-widget[eltype="stack"].hovered .oe-stack-widget-wrapper .oe-stack-menu > .oe-background .oe-background-gradient { opacity: var(--tablet-hover-stack-menu-background-gradient-opacity, var(--tablet-stack-menu-background-gradient-opacity, var(--desktop-hover-stack-menu-background-gradient-opacity, var(--desktop-stack-menu-background-gradient-opacity, , 1)))); background-image: var(--tablet-hover-stack-menu-background-gradient, var(--tablet-stack-menu-background-gradient, var(--desktop-hover-stack-menu-background-gradient, var(--desktop-stack-menu-background-gradient, )))); transition: all 0.2s ease-in-out; } .oe-draggable-widget[eltype="stack"].hovered .oe-stack-widget-wrapper .oe-stack-menu > .oe-background .oe-background-image { opacity: var(--tablet-hover-stack-menu-background-image-opacity, var(--tablet-stack-menu-background-image-opacity, var(--desktop-hover-stack-menu-background-image-opacity, var(--desktop-stack-menu-background-image-opacity, , 1)))); background-image: var(--tablet-hover-stack-menu-background-image, var(--tablet-stack-menu-background-image, var(--desktop-hover-stack-menu-background-image, var(--desktop-stack-menu-background-image, )))); background-repeat: var(--tablet-hover-stack-menu-background-repeat, var(--tablet-stack-menu-background-repeat, var(--desktop-hover-stack-menu-background-repeat, var(--desktop-stack-menu-background-repeat, , no-repeat)))); background-position: var(--tablet-hover-stack-menu-background-position, var(--tablet-stack-menu-background-position, var(--desktop-hover-stack-menu-background-position, var(--desktop-stack-menu-background-position, , center center)))); background-size: var(--tablet-hover-stack-menu-background-size, var(--tablet-stack-menu-background-size, var(--desktop-hover-stack-menu-background-size, var(--desktop-stack-menu-background-size, , cover)))); background-attachment: var(--tablet-hover-stack-menu-background-attachment, var(--tablet-stack-menu-background-attachment, var(--desktop-hover-stack-menu-background-attachment, var(--desktop-stack-menu-background-attachment, , cover)))); transition: all 0.2s ease-in-out; } .oe-draggable-widget[eltype="stack"].hovered .oe-stack-widget-wrapper .oe-stack-menu:hover { opacity: var(--tablet-hover-stack-menu-opacity, var(--tablet-stack-menu-opacity, var(--desktop-hover-stack-menu-opacity, var(--desktop-stack-menu-opacity, , 1)))); padding: var(--tablet-hover-stack-menu-padding, var(--tablet-stack-menu-padding, var(--desktop-hover-stack-menu-padding, var(--desktop-stack-menu-padding, , 0px)))); border-width: var(--tablet-hover-stack-menu-border-width, var(--tablet-stack-menu-border-width, var(--desktop-hover-stack-menu-border-width, var(--desktop-stack-menu-border-width, , 0px)))); border-color: var(--tablet-hover-stack-menu-border-color, var(--tablet-stack-menu-border-color, var(--desktop-hover-stack-menu-border-color, var(--desktop-stack-menu-border-color, , #333333)))); border-style: var(--tablet-hover-stack-menu-border-style, var(--tablet-stack-menu-border-style, var(--desktop-hover-stack-menu-border-style, var(--desktop-stack-menu-border-style, , none)))); border-radius: var(--tablet-hover-stack-menu-border-radius, var(--tablet-stack-menu-border-radius, var(--desktop-hover-stack-menu-border-radius, var(--desktop-stack-menu-border-radius, , 0px)))); box-shadow: var(--tablet-hover-stack-menu-box-shadow, var(--tablet-stack-menu-box-shadow, var(--desktop-hover-stack-menu-box-shadow, var(--desktop-stack-menu-box-shadow, , none)))); } .oe-draggable-widget[eltype="stack"].hovered .oe-stack-widget-wrapper .oe-stack-menu:hover > .oe-background { border-radius: var(--tablet-hover-stack-menu-bg-radius, var(--tablet-stack-menu-bg-radius, var(--desktop-hover-stack-menu-bg-radius, var(--desktop-stack-menu-bg-radius, , 0px)))); pointer-events: none; overflow: hidden; transition: all 0.2s ease-in-out; } .oe-draggable-widget[eltype="stack"].hovered .oe-stack-widget-wrapper .oe-stack-menu:hover > .oe-background * { transition: all 0.2s ease-in-out; } .oe-draggable-widget[eltype="stack"].hovered .oe-stack-widget-wrapper .oe-stack-menu:hover > .oe-background .oe-background-fill { background-color: var(--tablet-hover-stack-menu-background-color, var(--tablet-stack-menu-background-color, var(--desktop-hover-stack-menu-background-color, var(--desktop-stack-menu-background-color, , inherit)))); opacity: var(--tablet-hover-stack-menu-background-fill-opacity, var(--tablet-stack-menu-background-fill-opacity, var(--desktop-hover-stack-menu-background-fill-opacity, var(--desktop-stack-menu-background-fill-opacity, , 1)))); transition: all 0.2s ease-in-out; } .oe-draggable-widget[eltype="stack"].hovered .oe-stack-widget-wrapper .oe-stack-menu:hover > .oe-background .oe-background-gradient { opacity: var(--tablet-hover-stack-menu-background-gradient-opacity, var(--tablet-stack-menu-background-gradient-opacity, var(--desktop-hover-stack-menu-background-gradient-opacity, var(--desktop-stack-menu-background-gradient-opacity, , 1)))); background-image: var(--tablet-hover-stack-menu-background-gradient, var(--tablet-stack-menu-background-gradient, var(--desktop-hover-stack-menu-background-gradient, var(--desktop-stack-menu-background-gradient, )))); transition: all 0.2s ease-in-out; } .oe-draggable-widget[eltype="stack"].hovered .oe-stack-widget-wrapper .oe-stack-menu:hover > .oe-background .oe-background-image { opacity: var(--tablet-hover-stack-menu-background-image-opacity, var(--tablet-stack-menu-background-image-opacity, var(--desktop-hover-stack-menu-background-image-opacity, var(--desktop-stack-menu-background-image-opacity, , 1)))); background-image: var(--tablet-hover-stack-menu-background-image, var(--tablet-stack-menu-background-image, var(--desktop-hover-stack-menu-background-image, var(--desktop-stack-menu-background-image, )))); background-repeat: var(--tablet-hover-stack-menu-background-repeat, var(--tablet-stack-menu-background-repeat, var(--desktop-hover-stack-menu-background-repeat, var(--desktop-stack-menu-background-repeat, , no-repeat)))); background-position: var(--tablet-hover-stack-menu-background-position, var(--tablet-stack-menu-background-position, var(--desktop-hover-stack-menu-background-position, var(--desktop-stack-menu-background-position, , center center)))); background-size: var(--tablet-hover-stack-menu-background-size, var(--tablet-stack-menu-background-size, var(--desktop-hover-stack-menu-background-size, var(--desktop-stack-menu-background-size, , cover)))); background-attachment: var(--tablet-hover-stack-menu-background-attachment, var(--tablet-stack-menu-background-attachment, var(--desktop-hover-stack-menu-background-attachment, var(--desktop-stack-menu-background-attachment, , cover)))); transition: all 0.2s ease-in-out; } .oe-draggable-widget[eltype="stack"].hovered .oe-stack-widget-wrapper .oe-stack-menu button { pointer-events: all; position: relative; margin: 0px; display: flex; align-items: center; justify-content: center; cursor: pointer; text-decoration: none; background: transparent; color: var(--tablet-hover-stack-menu-button-color, var(--tablet-stack-menu-button-color, var(--desktop-hover-stack-menu-button-color, var(--desktop-stack-menu-button-color, var(--default-button-color))))); opacity: var(--tablet-hover-stack-menu-button-opacity, var(--tablet-stack-menu-button-opacity, var(--desktop-hover-stack-menu-button-opacity, var(--desktop-stack-menu-button-opacity, var(--default-button-opacity))))); padding: var(--tablet-hover-stack-menu-button-padding, var(--tablet-stack-menu-button-padding, var(--desktop-hover-stack-menu-button-padding, var(--desktop-stack-menu-button-padding, var(--default-button-padding))))); border-width: var(--tablet-hover-stack-menu-button-border-width, var(--tablet-stack-menu-button-border-width, var(--desktop-hover-stack-menu-button-border-width, var(--desktop-stack-menu-button-border-width, var(--default-button-border-width))))); border-style: var(--tablet-hover-stack-menu-button-border-style, var(--tablet-stack-menu-button-border-style, var(--desktop-hover-stack-menu-button-border-style, var(--desktop-stack-menu-button-border-style, var(--default-button-border-style))))); border-color: var(--tablet-hover-stack-menu-button-border-color, var(--tablet-stack-menu-button-border-color, var(--desktop-hover-stack-menu-button-border-color, var(--desktop-stack-menu-button-border-color, var(--default-button-border-color))))); border-radius: var(--tablet-hover-stack-menu-button-border-radius, var(--tablet-stack-menu-button-border-radius, var(--desktop-hover-stack-menu-button-border-radius, var(--desktop-stack-menu-button-border-radius, var(--default-button-border-radius))))); font-size: var(--tablet-hover-stack-menu-button-font-size, var(--tablet-stack-menu-button-font-size, var(--desktop-hover-stack-menu-button-font-size, var(--desktop-stack-menu-button-font-size, var(--default-button-font-size))))); opacity: var(--tablet-hover-stack-menu-button-opacity, var(--tablet-stack-menu-button-opacity, var(--desktop-hover-stack-menu-button-opacity, var(--desktop-stack-menu-button-opacity, 1)))); box-shadow: var(--tablet-hover-stack-menu-button-box-shadow, var(--tablet-stack-menu-button-box-shadow, var(--desktop-hover-stack-menu-button-box-shadow, var(--desktop-stack-menu-button-box-shadow)))); font-family: var(--tablet-hover-stack-menu-button-font-family, var(--tablet-stack-menu-button-font-family, var(--desktop-hover-stack-menu-button-font-family, var(--desktop-stack-menu-button-font-family, var(--default-button-font-family))))); font-weight: var(--tablet-hover-stack-menu-button-font-weight, var(--tablet-stack-menu-button-font-weight, var(--desktop-hover-stack-menu-button-font-weight, var(--desktop-stack-menu-button-font-weight, var(--default-button-font-weight))))); transform: scale(var(--tablet-hover-scale, var(--tablet-scale, var(--desktop-hover-scale, var(--desktop-scale, , 1))))); overflow: hidden; } .oe-draggable-widget[eltype="stack"].hovered .oe-stack-widget-wrapper .oe-stack-menu button .oe-button-html { text-align: center; position: relative; width: 100%; white-space: nowrap; text-align: var(--tablet-hover-label-text-align, var(--tablet-label-text-align, var(--desktop-hover-label-text-align, var(--desktop-label-text-align, center)))); } .oe-draggable-widget[eltype="stack"].hovered .oe-stack-widget-wrapper .oe-stack-menu button .oe-button-html .oe-button-image { font-size: var(--tablet-hover-stack-menu-button-image-size, var(--tablet-stack-menu-button-image-size, var(--desktop-hover-stack-menu-button-image-size, var(--desktop-stack-menu-button-image-size, inherit)))); } .oe-draggable-widget[eltype="stack"].hovered .oe-stack-widget-wrapper .oe-stack-menu button .oe-button-html .oe-button-image svg { fill: var(--tablet-hover-stack-menu-button-shape-fill, var(--tablet-stack-menu-button-shape-fill, var(--desktop-hover-stack-menu-button-shape-fill, var(--desktop-stack-menu-button-shape-fill, , #666666)))); stroke: var(--tablet-hover-stack-menu-button-shape-stroke, var(--tablet-stack-menu-button-shape-stroke, var(--desktop-hover-stack-menu-button-shape-stroke, var(--desktop-stack-menu-button-shape-stroke, , #666666)))); } .oe-draggable-widget[eltype="stack"].hovered .oe-stack-widget-wrapper .oe-stack-menu button > .oe-background { pointer-events: none; overflow: hidden; transition: all 0.2s ease-in-out; } .oe-draggable-widget[eltype="stack"].hovered .oe-stack-widget-wrapper .oe-stack-menu button > .oe-background:after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 1; box-shadow: var(--tablet-hover-stack-menu-button-box-shadow, var(--tablet-stack-menu-button-box-shadow, var(--desktop-hover-stack-menu-button-box-shadow, var(--desktop-stack-menu-button-box-shadow)))); } .oe-draggable-widget[eltype="stack"].hovered .oe-stack-widget-wrapper .oe-stack-menu button > .oe-background * { transition: all 0.2s ease-in-out; } .oe-draggable-widget[eltype="stack"].hovered .oe-stack-widget-wrapper .oe-stack-menu button > .oe-background .oe-background-fill { background-color: var(--tablet-hover-stack-menu-button-background-color, var(--tablet-stack-menu-button-background-color, var(--desktop-hover-stack-menu-button-background-color, var(--desktop-stack-menu-button-background-color, , var(--default-button-background-color))))); opacity: var(--tablet-hover-stack-menu-button-background-fill-opacity, var(--tablet-stack-menu-button-background-fill-opacity, var(--desktop-hover-stack-menu-button-background-fill-opacity, var(--desktop-stack-menu-button-background-fill-opacity, , 1)))); transition: all 0.2s ease-in-out; } .oe-draggable-widget[eltype="stack"].hovered .oe-stack-widget-wrapper .oe-stack-menu button > .oe-background .oe-background-gradient { opacity: var(--tablet-hover-stack-menu-button-background-gradient-opacity, var(--tablet-stack-menu-button-background-gradient-opacity, var(--desktop-hover-stack-menu-button-background-gradient-opacity, var(--desktop-stack-menu-button-background-gradient-opacity, , 1)))); background-image: var(--tablet-hover-stack-menu-button-background-gradient, var(--tablet-stack-menu-button-background-gradient, var(--desktop-hover-stack-menu-button-background-gradient, var(--desktop-stack-menu-button-background-gradient, )))); transition: all 0.2s ease-in-out; } .oe-draggable-widget[eltype="stack"].hovered .oe-stack-widget-wrapper .oe-stack-menu button > .oe-background .oe-background-image { opacity: var(--tablet-hover-stack-menu-button-background-image-opacity, var(--tablet-stack-menu-button-background-image-opacity, var(--desktop-hover-stack-menu-button-background-image-opacity, var(--desktop-stack-menu-button-background-image-opacity, , 1)))); background-image: var(--tablet-hover-stack-menu-button-background-image, var(--tablet-stack-menu-button-background-image, var(--desktop-hover-stack-menu-button-background-image, var(--desktop-stack-menu-button-background-image, )))); background-repeat: var(--tablet-hover-stack-menu-button-background-repeat, var(--tablet-stack-menu-button-background-repeat, var(--desktop-hover-stack-menu-button-background-repeat, var(--desktop-stack-menu-button-background-repeat, , no-repeat)))); background-position: var(--tablet-hover-stack-menu-button-background-position, var(--tablet-stack-menu-button-background-position, var(--desktop-hover-stack-menu-button-background-position, var(--desktop-stack-menu-button-background-position, , center center)))); background-size: var(--tablet-hover-stack-menu-button-background-size, var(--tablet-stack-menu-button-background-size, var(--desktop-hover-stack-menu-button-background-size, var(--desktop-stack-menu-button-background-size, , cover)))); background-attachment: var(--tablet-hover-stack-menu-button-background-attachment, var(--tablet-stack-menu-button-background-attachment, var(--desktop-hover-stack-menu-button-background-attachment, var(--desktop-stack-menu-button-background-attachment, , cover)))); transition: all 0.2s ease-in-out; } .oe-draggable-widget[eltype="stack"].hovered .oe-stack-widget-wrapper .oe-stack-menu button > .oe-background .oe-background-gradient { color: red; } .oe-draggable-widget[eltype="stack"].hovered .oe-stack-widget-wrapper .oe-stack-menu button:hover { color: var(--tablet-hover-stack-menu-button-color, var(--tablet-stack-menu-button-color, var(--desktop-hover-stack-menu-button-color, var(--desktop-stack-menu-button-color, var(--default-button-color))))); opacity: var(--tablet-hover-stack-menu-button-opacity, var(--tablet-stack-menu-button-opacity, var(--desktop-hover-stack-menu-button-opacity, var(--desktop-stack-menu-button-opacity, var(--default-button-opacity))))); padding: var(--tablet-hover-stack-menu-button-padding, var(--tablet-stack-menu-button-padding, var(--desktop-hover-stack-menu-button-padding, var(--desktop-stack-menu-button-padding, var(--default-button-padding))))); border-width: var(--tablet-hover-stack-menu-button-border-width, var(--tablet-stack-menu-button-border-width, var(--desktop-hover-stack-menu-button-border-width, var(--desktop-stack-menu-button-border-width, var(--default-button-border-width))))); border-style: var(--tablet-hover-stack-menu-button-border-style, var(--tablet-stack-menu-button-border-style, var(--desktop-hover-stack-menu-button-border-style, var(--desktop-stack-menu-button-border-style, var(--default-button-border-style))))); border-color: var(--tablet-hover-stack-menu-button-border-color, var(--tablet-stack-menu-button-border-color, var(--desktop-hover-stack-menu-button-border-color, var(--desktop-stack-menu-button-border-color, var(--default-button-border-color))))); border-radius: var(--tablet-hover-stack-menu-button-border-radius, var(--tablet-stack-menu-button-border-radius, var(--desktop-hover-stack-menu-button-border-radius, var(--desktop-stack-menu-button-border-radius, var(--default-button-border-radius))))); font-size: var(--tablet-hover-stack-menu-button-font-size, var(--tablet-stack-menu-button-font-size, var(--desktop-hover-stack-menu-button-font-size, var(--desktop-stack-menu-button-font-size, var(--default-button-font-size))))); opacity: var(--tablet-hover-stack-menu-button-opacity, var(--tablet-stack-menu-button-opacity, var(--desktop-hover-stack-menu-button-opacity, var(--desktop-stack-menu-button-opacity, 1)))); box-shadow: var(--tablet-hover-stack-menu-button-box-shadow, var(--tablet-stack-menu-button-box-shadow, var(--desktop-hover-stack-menu-button-box-shadow, var(--desktop-stack-menu-button-box-shadow)))); font-family: var(--tablet-hover-stack-menu-button-font-family, var(--tablet-stack-menu-button-font-family, var(--desktop-hover-stack-menu-button-font-family, var(--desktop-stack-menu-button-font-family, var(--default-button-font-family))))); font-weight: var(--tablet-hover-stack-menu-button-font-weight, var(--tablet-stack-menu-button-font-weight, var(--desktop-hover-stack-menu-button-font-weight, var(--desktop-stack-menu-button-font-weight, var(--default-button-font-weight))))); transform: scale(var(--tablet-hover-scale, var(--tablet-scale, var(--desktop-hover-scale, var(--desktop-scale, , 1))))); } .oe-draggable-widget[eltype="stack"].hovered .oe-stack-widget-wrapper .oe-stack-menu button:hover .oe-button-html .oe-button-image { font-size: var(--tablet-hover-stack-menu-button-image-size, var(--tablet-stack-menu-button-image-size, var(--desktop-hover-stack-menu-button-image-size, var(--desktop-stack-menu-button-image-size, inherit)))); } .oe-draggable-widget[eltype="stack"].hovered .oe-stack-widget-wrapper .oe-stack-menu button:hover .oe-button-html .oe-button-image svg { fill: var(--tablet-hover-stack-menu-button-shape-fill, var(--tablet-stack-menu-button-shape-fill, var(--desktop-hover-stack-menu-button-shape-fill, var(--desktop-stack-menu-button-shape-fill, , #666666)))); stroke: var(--tablet-hover-stack-menu-button-shape-stroke, var(--tablet-stack-menu-button-shape-stroke, var(--desktop-hover-stack-menu-button-shape-stroke, var(--desktop-stack-menu-button-shape-stroke, , #666666)))); } .oe-draggable-widget[eltype="stack"].hovered .oe-stack-widget-wrapper .oe-stack-menu button:hover > .oe-background { pointer-events: none; overflow: hidden; transition: all 0.2s ease-in-out; } .oe-draggable-widget[eltype="stack"].hovered .oe-stack-widget-wrapper .oe-stack-menu button:hover > .oe-background:after { box-shadow: var(--tablet-hover-stack-menu-button-box-shadow, var(--tablet-stack-menu-button-box-shadow, var(--desktop-hover-stack-menu-button-box-shadow, var(--desktop-stack-menu-button-box-shadow)))); } .oe-draggable-widget[eltype="stack"].hovered .oe-stack-widget-wrapper .oe-stack-menu button:hover > .oe-background * { transition: all 0.2s ease-in-out; } .oe-draggable-widget[eltype="stack"].hovered .oe-stack-widget-wrapper .oe-stack-menu button:hover > .oe-background .oe-background-fill { background-color: var(--tablet-hover-stack-menu-button-background-color, var(--tablet-stack-menu-button-background-color, var(--desktop-hover-stack-menu-button-background-color, var(--desktop-stack-menu-button-background-color, , var(--default-button-background-color))))); opacity: var(--tablet-hover-stack-menu-button-background-fill-opacity, var(--tablet-stack-menu-button-background-fill-opacity, var(--desktop-hover-stack-menu-button-background-fill-opacity, var(--desktop-stack-menu-button-background-fill-opacity, , 1)))); transition: all 0.2s ease-in-out; } .oe-draggable-widget[eltype="stack"].hovered .oe-stack-widget-wrapper .oe-stack-menu button:hover > .oe-background .oe-background-gradient { opacity: var(--tablet-hover-stack-menu-button-background-gradient-opacity, var(--tablet-stack-menu-button-background-gradient-opacity, var(--desktop-hover-stack-menu-button-background-gradient-opacity, var(--desktop-stack-menu-button-background-gradient-opacity, , 1)))); background-image: var(--tablet-hover-stack-menu-button-background-gradient, var(--tablet-stack-menu-button-background-gradient, var(--desktop-hover-stack-menu-button-background-gradient, var(--desktop-stack-menu-button-background-gradient, )))); transition: all 0.2s ease-in-out; } .oe-draggable-widget[eltype="stack"].hovered .oe-stack-widget-wrapper .oe-stack-menu button:hover > .oe-background .oe-background-image { opacity: var(--tablet-hover-stack-menu-button-background-image-opacity, var(--tablet-stack-menu-button-background-image-opacity, var(--desktop-hover-stack-menu-button-background-image-opacity, var(--desktop-stack-menu-button-background-image-opacity, , 1)))); background-image: var(--tablet-hover-stack-menu-button-background-image, var(--tablet-stack-menu-button-background-image, var(--desktop-hover-stack-menu-button-background-image, var(--desktop-stack-menu-button-background-image, )))); background-repeat: var(--tablet-hover-stack-menu-button-background-repeat, var(--tablet-stack-menu-button-background-repeat, var(--desktop-hover-stack-menu-button-background-repeat, var(--desktop-stack-menu-button-background-repeat, , no-repeat)))); background-position: var(--tablet-hover-stack-menu-button-background-position, var(--tablet-stack-menu-button-background-position, var(--desktop-hover-stack-menu-button-background-position, var(--desktop-stack-menu-button-background-position, , center center)))); background-size: var(--tablet-hover-stack-menu-button-background-size, var(--tablet-stack-menu-button-background-size, var(--desktop-hover-stack-menu-button-background-size, var(--desktop-stack-menu-button-background-size, , cover)))); background-attachment: var(--tablet-hover-stack-menu-button-background-attachment, var(--tablet-stack-menu-button-background-attachment, var(--desktop-hover-stack-menu-button-background-attachment, var(--desktop-stack-menu-button-background-attachment, , cover)))); transition: all 0.2s ease-in-out; } .oe-draggable-widget[eltype="stack"].hovered .oe-stack-widget-wrapper .oe-stack-menu button:hover > .oe-background .oe-background-gradient { color: red; } .oe-draggable-widget[eltype="stack"].hovered .oe-stack-widget-wrapper .oe-stack-menu button.selected { position: relative; pointer-events: all; margin: 0px; display: flex; align-items: center; justify-content: center; cursor: pointer; text-decoration: none; color: var(--tablet-selected-stack-menu-button-color, var(--tablet-stack-menu-button-color, var(--desktop-selected-stack-menu-button-color, var(--desktop-stack-menu-button-color, var(--tablet-hover-stack-menu-button-color , var(--tablet-stack-menu-button-color , var(--desktop-stack-menu-button-color ,var(--default-button-color)))))))); opacity: var(--tablet-selected-stack-menu-button-opacity, var(--tablet-stack-menu-button-opacity, var(--desktop-selected-stack-menu-button-opacity, var(--desktop-stack-menu-button-opacity, var(--tablet-hover-stack-menu-button-opacity , var(--tablet-stack-menu-button-opacity , var(--desktop-stack-menu-button-opacity ,var(--default-button-opacity)))))))); padding: var(--tablet-selected-stack-menu-button-padding, var(--tablet-stack-menu-button-padding, var(--desktop-selected-stack-menu-button-padding, var(--desktop-stack-menu-button-padding, var(--tablet-hover-stack-menu-button-padding , var(--tablet-stack-menu-button-padding , var(--desktop-stack-menu-button-padding ,var(--default-button-padding)))))))); border-width: var(--tablet-selected-stack-menu-button-border-width, var(--tablet-stack-menu-button-border-width, var(--desktop-selected-stack-menu-button-border-width, var(--desktop-stack-menu-button-border-width, var(--tablet-hover-stack-menu-button-border-width , var(--tablet-stack-menu-button-border-width , var(--desktop-stack-menu-button-border-width ,var(--default-button-border-width)))))))); border-style: var(--tablet-selected-stack-menu-button-border-style, var(--tablet-stack-menu-button-border-style, var(--desktop-selected-stack-menu-button-border-style, var(--desktop-stack-menu-button-border-style, var(--tablet-hover-stack-menu-button-border-style , var(--tablet-stack-menu-button-border-style , var(--desktop-stack-menu-button-border-style ,var(--default-button-border-style)))))))); border-color: var(--tablet-selected-stack-menu-button-border-color, var(--tablet-stack-menu-button-border-color, var(--desktop-selected-stack-menu-button-border-color, var(--desktop-stack-menu-button-border-color, var(--tablet-hover-stack-menu-button-border-color , var(--tablet-stack-menu-button-border-color , var(--desktop-stack-menu-button-border-color ,var(--default-button-border-color)))))))); border-radius: var(--tablet-selected-stack-menu-button-border-radius, var(--tablet-stack-menu-button-border-radius, var(--desktop-selected-stack-menu-button-border-radius, var(--desktop-stack-menu-button-border-radius, var(--tablet-hover-stack-menu-button-border-radius , var(--tablet-stack-menu-button-border-radius , var(--desktop-stack-menu-button-border-radius ,var(--default-button-border-radius)))))))); font-size: var(--tablet-selected-stack-menu-button-font-size, var(--tablet-stack-menu-button-font-size, var(--desktop-selected-stack-menu-button-font-size, var(--desktop-stack-menu-button-font-size, var(--tablet-hover-stack-menu-button-font-size , var(--tablet-stack-menu-button-font-size , var(--desktop-stack-menu-button-font-size ,var(--default-button-font-size)))))))); opacity: var(--tablet-selected-stack-menu-button-opacity, var(--tablet-stack-menu-button-opacity, var(--desktop-selected-stack-menu-button-opacity, var(--desktop-stack-menu-button-opacity, 1)))); box-shadow: var(--tablet-selected-stack-menu-button-box-shadow, var(--tablet-stack-menu-button-box-shadow, var(--desktop-selected-stack-menu-button-box-shadow, var(--desktop-stack-menu-button-box-shadow)))); font-family: var(--tablet-selected-stack-menu-button-font-family, var(--tablet-stack-menu-button-font-family, var(--desktop-selected-stack-menu-button-font-family, var(--desktop-stack-menu-button-font-family, var(--tablet-hover-stack-menu-button-font-family , var(--tablet-stack-menu-button-font-family , var(--desktop-stack-menu-button-font-family ,var(--default-button-font-family)))))))); font-weight: var(--tablet-selected-stack-menu-button-font-weight, var(--tablet-stack-menu-button-font-weight, var(--desktop-selected-stack-menu-button-font-weight, var(--desktop-stack-menu-button-font-weight, var(--tablet-hover-stack-menu-button-font-weight , var(--tablet-stack-menu-button-font-weight , var(--desktop-stack-menu-button-font-weight ,var(--default-button-font-weight)))))))); transform: scale(var(--tablet-hover-scale, var(--tablet-scale, var(--desktop-hover-scale, var(--desktop-scale, , 1))))); overflow: hidden; } .oe-draggable-widget[eltype="stack"].hovered .oe-stack-widget-wrapper .oe-stack-menu button.selected .oe-button-html .oe-button-image { font-size: var(--tablet-selected-stack-menu-button-image-size, var(--tablet-stack-menu-button-image-size, var(--desktop-selected-stack-menu-button-image-size, var(--desktop-stack-menu-button-image-size, inherit)))); } .oe-draggable-widget[eltype="stack"].hovered .oe-stack-widget-wrapper .oe-stack-menu button.selected .oe-button-html .oe-button-image svg { fill: var(--tablet-selected-stack-menu-button-shape-fill, var(--tablet-stack-menu-button-shape-fill, var(--desktop-selected-stack-menu-button-shape-fill, var(--desktop-stack-menu-button-shape-fill, , #666666)))); stroke: var(--tablet-selected-stack-menu-button-shape-stroke, var(--tablet-stack-menu-button-shape-stroke, var(--desktop-selected-stack-menu-button-shape-stroke, var(--desktop-stack-menu-button-shape-stroke, , #666666)))); } .oe-draggable-widget[eltype="stack"].hovered .oe-stack-widget-wrapper .oe-stack-menu button.selected .oe-button-html { text-align: center; position: relative; width: 100%; text-align: var(--tablet-selected-label-text-align, var(--tablet-label-text-align, var(--desktop-selected-label-text-align, var(--desktop-label-text-align, center)))); } .oe-draggable-widget[eltype="stack"].hovered .oe-stack-widget-wrapper .oe-stack-menu button.selected > .oe-background { pointer-events: none; overflow: hidden; transition: all 0.2s ease-in-out; } .oe-draggable-widget[eltype="stack"].hovered .oe-stack-widget-wrapper .oe-stack-menu button.selected > .oe-background:after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 1; box-shadow: var(--tablet-selected-stack-menu-button-box-shadow, var(--tablet-stack-menu-button-box-shadow, var(--desktop-selected-stack-menu-button-box-shadow, var(--desktop-stack-menu-button-box-shadow)))); } .oe-draggable-widget[eltype="stack"].hovered .oe-stack-widget-wrapper .oe-stack-menu button.selected > .oe-background * { transition: all 0.2s ease-in-out; } .oe-draggable-widget[eltype="stack"].hovered .oe-stack-widget-wrapper .oe-stack-menu button.selected > .oe-background .oe-background-fill { background-color: var(--tablet-selected-stack-menu-button-background-color, var(--tablet-stack-menu-button-background-color, var(--desktop-selected-stack-menu-button-background-color, var(--desktop-stack-menu-button-background-color, , var(--tablet-hover-stack-menu-button-background-color , var(--tablet-stack-menu-button-background-color , var(--desktop-stack-menu-button-background-color ,var(--default-button-background-color)))))))); opacity: var(--tablet-selected-stack-menu-button-background-fill-opacity, var(--tablet-stack-menu-button-background-fill-opacity, var(--desktop-selected-stack-menu-button-background-fill-opacity, var(--desktop-stack-menu-button-background-fill-opacity, , 1)))); transition: all 0.2s ease-in-out; } .oe-draggable-widget[eltype="stack"].hovered .oe-stack-widget-wrapper .oe-stack-menu button.selected > .oe-background .oe-background-gradient { opacity: var(--tablet-selected-stack-menu-button-background-gradient-opacity, var(--tablet-stack-menu-button-background-gradient-opacity, var(--desktop-selected-stack-menu-button-background-gradient-opacity, var(--desktop-stack-menu-button-background-gradient-opacity, , 1)))); background-image: var(--tablet-selected-stack-menu-button-background-gradient, var(--tablet-stack-menu-button-background-gradient, var(--desktop-selected-stack-menu-button-background-gradient, var(--desktop-stack-menu-button-background-gradient, )))); transition: all 0.2s ease-in-out; } .oe-draggable-widget[eltype="stack"].hovered .oe-stack-widget-wrapper .oe-stack-menu button.selected > .oe-background .oe-background-image { opacity: var(--tablet-selected-stack-menu-button-background-image-opacity, var(--tablet-stack-menu-button-background-image-opacity, var(--desktop-selected-stack-menu-button-background-image-opacity, var(--desktop-stack-menu-button-background-image-opacity, , 1)))); background-image: var(--tablet-selected-stack-menu-button-background-image, var(--tablet-stack-menu-button-background-image, var(--desktop-selected-stack-menu-button-background-image, var(--desktop-stack-menu-button-background-image, )))); background-repeat: var(--tablet-selected-stack-menu-button-background-repeat, var(--tablet-stack-menu-button-background-repeat, var(--desktop-selected-stack-menu-button-background-repeat, var(--desktop-stack-menu-button-background-repeat, , no-repeat)))); background-position: var(--tablet-selected-stack-menu-button-background-position, var(--tablet-stack-menu-button-background-position, var(--desktop-selected-stack-menu-button-background-position, var(--desktop-stack-menu-button-background-position, , center center)))); background-size: var(--tablet-selected-stack-menu-button-background-size, var(--tablet-stack-menu-button-background-size, var(--desktop-selected-stack-menu-button-background-size, var(--desktop-stack-menu-button-background-size, , cover)))); background-attachment: var(--tablet-selected-stack-menu-button-background-attachment, var(--tablet-stack-menu-button-background-attachment, var(--desktop-selected-stack-menu-button-background-attachment, var(--desktop-stack-menu-button-background-attachment, , cover)))); transition: all 0.2s ease-in-out; } .oe-draggable-widget[eltype="stack"].hovered .oe-stack-widget-wrapper .oe-stack-menu button.selected > .oe-background .oe-background-gradient { color: red; } } /* Handle Mobile mode */ @media (min-width: 320px) and (max-width: 767px) { .oe-stack-scroll > * { justify-items: center; } .oe-stack-widget-wrapper:not([stack-style="stack"])[stack-transition-type="scroll-vertical"] .oe-stack-scroll { transform: translateY(calc( (var(--stack-active-page,0) * -100%))); } .oe-stack-widget-wrapper:not([stack-style="stack"])[stack-transition-type="scroll-horizontal"] .oe-stack-scroll { transform: translateX(calc( (var(--stack-active-page, 0) * -100%))); } /* Handle menu */ .oe-stack-widget-wrapper.oe-stack-menu-top header.oe-stack-menu button { height: 100%; } .oe-stack-widget-wrapper.oe-stack-menu-top header.oe-stack-menu button:not(:nth-child(2)) { margin-left: var(--device-stack-menu-button-margin, 2px); } .oe-stack-widget-wrapper.oe-stack-menu-bottom header.oe-stack-menu button { height: 100%; } .oe-stack-widget-wrapper.oe-stack-menu-bottom header.oe-stack-menu button:not(:nth-child(2)) { margin-left: var(--device-stack-menu-button-margin, 2px); } .oe-stack-widget-wrapper.oe-stack-menu-left header.oe-stack-menu button { width: 100%; } .oe-stack-widget-wrapper.oe-stack-menu-left header.oe-stack-menu button:not(:nth-child(2)) { margin-top: var(--device-stack-menu-button-margin, 2px); } .oe-stack-widget-wrapper.oe-stack-menu-right header.oe-stack-menu button { width: 100%; } .oe-stack-widget-wrapper.oe-stack-menu-right header.oe-stack-menu button:not(:nth-child(2)) { margin-top: var(--device-stack-menu-button-margin, 2px); } /* Handle container */ [elType='section'] > [elType='container'] > .oe-draggable-widget .oe-stack-widget-wrapper .oe-stack-menu { opacity: var(--mobile-stack-menu-opacity, var(--tablet-stack-menu-opacity, var(--desktop-stack-menu-opacity, 1))); padding: var(--mobile-stack-menu-padding, var(--tablet-stack-menu-padding, var(--desktop-stack-menu-padding, 0px))); border-width: var(--mobile-stack-menu-border-width, var(--tablet-stack-menu-border-width, var(--desktop-stack-menu-border-width, 0px))); border-color: var(--mobile-stack-menu-border-color, var(--tablet-stack-menu-border-color, var(--desktop-stack-menu-border-color, #333333))); border-style: var(--mobile-stack-menu-border-style, var(--tablet-stack-menu-border-style, var(--desktop-stack-menu-border-style, none))); border-radius: var(--mobile-stack-menu-border-radius, var(--tablet-stack-menu-border-radius, var(--desktop-stack-menu-border-radius, 0px))); box-shadow: var(--mobile-stack-menu-box-shadow, var(--tablet-stack-menu-box-shadow, var(--desktop-stack-menu-box-shadow, none))); } [elType='section'] > [elType='container'] > .oe-draggable-widget .oe-stack-widget-wrapper .oe-stack-menu > .oe-background { border-radius: var(--mobile-stack-menu-bg-radius, var(--tablet-stack-menu-bg-radius, var(--desktop-stack-menu-bg-radius, 0px))); pointer-events: none; overflow: hidden; transition: all 0.2s ease-in-out; } [elType='section'] > [elType='container'] > .oe-draggable-widget .oe-stack-widget-wrapper .oe-stack-menu > .oe-background * { transition: all 0.2s ease-in-out; } [elType='section'] > [elType='container'] > .oe-draggable-widget .oe-stack-widget-wrapper .oe-stack-menu > .oe-background .oe-background-fill { background-color: var(--mobile-stack-menu-background-color, var(--tablet-stack-menu-background-color, var(--desktop-stack-menu-background-color, inherit))); opacity: var(--mobile-stack-menu-background-fill-opacity, var(--tablet-stack-menu-background-fill-opacity, var(--desktop-stack-menu-background-fill-opacity, 1))); transition: all 0.2s ease-in-out; } [elType='section'] > [elType='container'] > .oe-draggable-widget .oe-stack-widget-wrapper .oe-stack-menu > .oe-background .oe-background-gradient { opacity: var(--mobile-stack-menu-background-gradient-opacity, var(--tablet-stack-menu-background-gradient-opacity, var(--desktop-stack-menu-background-gradient-opacity, 1))); background-image: var(--mobile-stack-menu-background-gradient, var(--tablet-stack-menu-background-gradient, var(--desktop-stack-menu-background-gradient))); transition: all 0.2s ease-in-out; } [elType='section'] > [elType='container'] > .oe-draggable-widget .oe-stack-widget-wrapper .oe-stack-menu > .oe-background .oe-background-image { opacity: var(--mobile-stack-menu-background-image-opacity, var(--tablet-stack-menu-background-image-opacity, var(--desktop-stack-menu-background-image-opacity, 1))); background-image: var(--mobile-stack-menu-background-image, var(--tablet-stack-menu-background-image, var(--desktop-stack-menu-background-image))); background-repeat: var(--mobile-stack-menu-background-repeat, var(--tablet-stack-menu-background-repeat, var(--desktop-stack-menu-background-repeat, no-repeat))); background-position: var(--mobile-stack-menu-background-position, var(--tablet-stack-menu-background-position, var(--desktop-stack-menu-background-position, center center))); background-size: var(--mobile-stack-menu-background-size, var(--tablet-stack-menu-background-size, var(--desktop-stack-menu-background-size, cover))); background-attachment: var(--mobile-stack-menu-background-attachment, var(--tablet-stack-menu-background-attachment, var(--desktop-stack-menu-background-attachment, cover))); transition: all 0.2s ease-in-out; } [elType='section'] > [elType='container'] > .oe-draggable-widget .oe-stack-widget-wrapper .oe-stack-menu:hover { opacity: var(--mobile-hover-stack-menu-opacity, var(--mobile-stack-menu-opacity, var(--tablet-hover-stack-menu-opacity, var(--tablet-stack-menu-opacity, var(--desktop-hover-stack-menu-opacity, var(--desktop-stack-menu-opacity, , 1)))))); padding: var(--mobile-hover-stack-menu-padding, var(--mobile-stack-menu-padding, var(--tablet-hover-stack-menu-padding, var(--tablet-stack-menu-padding, var(--desktop-hover-stack-menu-padding, var(--desktop-stack-menu-padding, , 0px)))))); border-width: var(--mobile-hover-stack-menu-border-width, var(--mobile-stack-menu-border-width, var(--tablet-hover-stack-menu-border-width, var(--tablet-stack-menu-border-width, var(--desktop-hover-stack-menu-border-width, var(--desktop-stack-menu-border-width, , 0px)))))); border-color: var(--mobile-hover-stack-menu-border-color, var(--mobile-stack-menu-border-color, var(--tablet-hover-stack-menu-border-color, var(--tablet-stack-menu-border-color, var(--desktop-hover-stack-menu-border-color, var(--desktop-stack-menu-border-color, , #333333)))))); border-style: var(--mobile-hover-stack-menu-border-style, var(--mobile-stack-menu-border-style, var(--tablet-hover-stack-menu-border-style, var(--tablet-stack-menu-border-style, var(--desktop-hover-stack-menu-border-style, var(--desktop-stack-menu-border-style, , none)))))); border-radius: var(--mobile-hover-stack-menu-border-radius, var(--mobile-stack-menu-border-radius, var(--tablet-hover-stack-menu-border-radius, var(--tablet-stack-menu-border-radius, var(--desktop-hover-stack-menu-border-radius, var(--desktop-stack-menu-border-radius, , 0px)))))); box-shadow: var(--mobile-hover-stack-menu-box-shadow, var(--mobile-stack-menu-box-shadow, var(--tablet-hover-stack-menu-box-shadow, var(--tablet-stack-menu-box-shadow, var(--desktop-hover-stack-menu-box-shadow, var(--desktop-stack-menu-box-shadow, , none)))))); } [elType='section'] > [elType='container'] > .oe-draggable-widget .oe-stack-widget-wrapper .oe-stack-menu:hover > .oe-background { border-radius: var(--mobile-hover-stack-menu-bg-radius, var(--mobile-stack-menu-bg-radius, var(--tablet-hover-stack-menu-bg-radius, var(--tablet-stack-menu-bg-radius, var(--desktop-hover-stack-menu-bg-radius, var(--desktop-stack-menu-bg-radius, , 0px)))))); pointer-events: none; overflow: hidden; transition: all 0.2s ease-in-out; } [elType='section'] > [elType='container'] > .oe-draggable-widget .oe-stack-widget-wrapper .oe-stack-menu:hover > .oe-background * { transition: all 0.2s ease-in-out; } [elType='section'] > [elType='container'] > .oe-draggable-widget .oe-stack-widget-wrapper .oe-stack-menu:hover > .oe-background .oe-background-fill { background-color: var(--mobile-hover-stack-menu-background-color, var(--mobile-stack-menu-background-color, var(--tablet-hover-stack-menu-background-color, var(--tablet-stack-menu-background-color, var(--desktop-hover-stack-menu-background-color, var(--desktop-stack-menu-background-color, , inherit)))))); opacity: var(--mobile-hover-stack-menu-background-fill-opacity, var(--mobile-stack-menu-background-fill-opacity, var(--tablet-hover-stack-menu-background-fill-opacity, var(--tablet-stack-menu-background-fill-opacity, var(--desktop-hover-stack-menu-background-fill-opacity, var(--desktop-stack-menu-background-fill-opacity, , 1)))))); transition: all 0.2s ease-in-out; } [elType='section'] > [elType='container'] > .oe-draggable-widget .oe-stack-widget-wrapper .oe-stack-menu:hover > .oe-background .oe-background-gradient { opacity: var(--mobile-hover-stack-menu-background-gradient-opacity, var(--mobile-stack-menu-background-gradient-opacity, var(--tablet-hover-stack-menu-background-gradient-opacity, var(--tablet-stack-menu-background-gradient-opacity, var(--desktop-hover-stack-menu-background-gradient-opacity, var(--desktop-stack-menu-background-gradient-opacity, , 1)))))); background-image: var(--mobile-hover-stack-menu-background-gradient, var(--mobile-stack-menu-background-gradient, var(--tablet-hover-stack-menu-background-gradient, var(--tablet-stack-menu-background-gradient, var(--desktop-hover-stack-menu-background-gradient, var(--desktop-stack-menu-background-gradient, )))))); transition: all 0.2s ease-in-out; } [elType='section'] > [elType='container'] > .oe-draggable-widget .oe-stack-widget-wrapper .oe-stack-menu:hover > .oe-background .oe-background-image { opacity: var(--mobile-hover-stack-menu-background-image-opacity, var(--mobile-stack-menu-background-image-opacity, var(--tablet-hover-stack-menu-background-image-opacity, var(--tablet-stack-menu-background-image-opacity, var(--desktop-hover-stack-menu-background-image-opacity, var(--desktop-stack-menu-background-image-opacity, , 1)))))); background-image: var(--mobile-hover-stack-menu-background-image, var(--mobile-stack-menu-background-image, var(--tablet-hover-stack-menu-background-image, var(--tablet-stack-menu-background-image, var(--desktop-hover-stack-menu-background-image, var(--desktop-stack-menu-background-image, )))))); background-repeat: var(--mobile-hover-stack-menu-background-repeat, var(--mobile-stack-menu-background-repeat, var(--tablet-hover-stack-menu-background-repeat, var(--tablet-stack-menu-background-repeat, var(--desktop-hover-stack-menu-background-repeat, var(--desktop-stack-menu-background-repeat, , no-repeat)))))); background-position: var(--mobile-hover-stack-menu-background-position, var(--mobile-stack-menu-background-position, var(--tablet-hover-stack-menu-background-position, var(--tablet-stack-menu-background-position, var(--desktop-hover-stack-menu-background-position, var(--desktop-stack-menu-background-position, , center center)))))); background-size: var(--mobile-hover-stack-menu-background-size, var(--mobile-stack-menu-background-size, var(--tablet-hover-stack-menu-background-size, var(--tablet-stack-menu-background-size, var(--desktop-hover-stack-menu-background-size, var(--desktop-stack-menu-background-size, , cover)))))); background-attachment: var(--mobile-hover-stack-menu-background-attachment, var(--mobile-stack-menu-background-attachment, var(--tablet-hover-stack-menu-background-attachment, var(--tablet-stack-menu-background-attachment, var(--desktop-hover-stack-menu-background-attachment, var(--desktop-stack-menu-background-attachment, , cover)))))); transition: all 0.2s ease-in-out; } [elType='section'] > [elType='container'] > .oe-draggable-widget .oe-stack-widget-wrapper .oe-stack-menu button { pointer-events: all; position: relative; margin: 0px; display: flex; align-items: center; justify-content: center; cursor: pointer; text-decoration: none; background: transparent; color: var(--mobile-stack-menu-button-color, var(--tablet-stack-menu-button-color, var(--desktop-stack-menu-button-color, var(--default-button-color)))); opacity: var(--mobile-stack-menu-button-opacity, var(--tablet-stack-menu-button-opacity, var(--desktop-stack-menu-button-opacity, var(--default-button-opacity)))); padding: var(--mobile-stack-menu-button-padding, var(--tablet-stack-menu-button-padding, var(--desktop-stack-menu-button-padding, var(--default-button-padding)))); border-width: var(--mobile-stack-menu-button-border-width, var(--tablet-stack-menu-button-border-width, var(--desktop-stack-menu-button-border-width, var(--default-button-border-width)))); border-style: var(--mobile-stack-menu-button-border-style, var(--tablet-stack-menu-button-border-style, var(--desktop-stack-menu-button-border-style, var(--default-button-border-style)))); border-color: var(--mobile-stack-menu-button-border-color, var(--tablet-stack-menu-button-border-color, var(--desktop-stack-menu-button-border-color, var(--default-button-border-color)))); border-radius: var(--mobile-stack-menu-button-border-radius, var(--tablet-stack-menu-button-border-radius, var(--desktop-stack-menu-button-border-radius, var(--default-button-border-radius)))); font-size: var(--mobile-stack-menu-button-font-size, var(--tablet-stack-menu-button-font-size, var(--desktop-stack-menu-button-font-size, var(--default-button-font-size)))); opacity: var(--mobile-stack-menu-button-opacity, var(--tablet-stack-menu-button-opacity, var(--desktop-stack-menu-button-opacity, 1))); box-shadow: var(--mobile-stack-menu-button-box-shadow, var(--tablet-stack-menu-button-box-shadow, var(--desktop-stack-menu-button-box-shadow))); font-family: var(--mobile-stack-menu-button-font-family, var(--tablet-stack-menu-button-font-family, var(--desktop-stack-menu-button-font-family, var(--default-button-font-family)))); font-weight: var(--mobile-stack-menu-button-font-weight, var(--tablet-stack-menu-button-font-weight, var(--desktop-stack-menu-button-font-weight, var(--default-button-font-weight)))); transform: scale(var(--mobile-scale, var(--tablet-scale, var(--desktop-scale, 1)))); overflow: hidden; } [elType='section'] > [elType='container'] > .oe-draggable-widget .oe-stack-widget-wrapper .oe-stack-menu button .oe-button-html { text-align: center; position: relative; width: 100%; white-space: nowrap; text-align: var(--mobile-label-text-align, var(--tablet-label-text-align, var(--desktop-label-text-align, center))); } [elType='section'] > [elType='container'] > .oe-draggable-widget .oe-stack-widget-wrapper .oe-stack-menu button .oe-button-html .oe-button-image { font-size: var(--mobile-stack-menu-button-image-size, var(--tablet-stack-menu-button-image-size, var(--desktop-stack-menu-button-image-size, inherit))); } [elType='section'] > [elType='container'] > .oe-draggable-widget .oe-stack-widget-wrapper .oe-stack-menu button .oe-button-html .oe-button-image svg { fill: var(--mobile-stack-menu-button-shape-fill, var(--tablet-stack-menu-button-shape-fill, var(--desktop-stack-menu-button-shape-fill, #666666))); stroke: var(--mobile-stack-menu-button-shape-stroke, var(--tablet-stack-menu-button-shape-stroke, var(--desktop-stack-menu-button-shape-stroke, #666666))); } [elType='section'] > [elType='container'] > .oe-draggable-widget .oe-stack-widget-wrapper .oe-stack-menu button > .oe-background { pointer-events: none; overflow: hidden; transition: all 0.2s ease-in-out; } [elType='section'] > [elType='container'] > .oe-draggable-widget .oe-stack-widget-wrapper .oe-stack-menu button > .oe-background:after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 1; box-shadow: var(--mobile-stack-menu-button-box-shadow, var(--tablet-stack-menu-button-box-shadow, var(--desktop-stack-menu-button-box-shadow))); } [elType='section'] > [elType='container'] > .oe-draggable-widget .oe-stack-widget-wrapper .oe-stack-menu button > .oe-background * { transition: all 0.2s ease-in-out; } [elType='section'] > [elType='container'] > .oe-draggable-widget .oe-stack-widget-wrapper .oe-stack-menu button > .oe-background .oe-background-fill { background-color: var(--mobile-stack-menu-button-background-color, var(--tablet-stack-menu-button-background-color, var(--desktop-stack-menu-button-background-color, var(--default-button-background-color)))); opacity: var(--mobile-stack-menu-button-background-fill-opacity, var(--tablet-stack-menu-button-background-fill-opacity, var(--desktop-stack-menu-button-background-fill-opacity, 1))); transition: all 0.2s ease-in-out; } [elType='section'] > [elType='container'] > .oe-draggable-widget .oe-stack-widget-wrapper .oe-stack-menu button > .oe-background .oe-background-gradient { opacity: var(--mobile-stack-menu-button-background-gradient-opacity, var(--tablet-stack-menu-button-background-gradient-opacity, var(--desktop-stack-menu-button-background-gradient-opacity, 1))); background-image: var(--mobile-stack-menu-button-background-gradient, var(--tablet-stack-menu-button-background-gradient, var(--desktop-stack-menu-button-background-gradient))); transition: all 0.2s ease-in-out; } [elType='section'] > [elType='container'] > .oe-draggable-widget .oe-stack-widget-wrapper .oe-stack-menu button > .oe-background .oe-background-image { opacity: var(--mobile-stack-menu-button-background-image-opacity, var(--tablet-stack-menu-button-background-image-opacity, var(--desktop-stack-menu-button-background-image-opacity, 1))); background-image: var(--mobile-stack-menu-button-background-image, var(--tablet-stack-menu-button-background-image, var(--desktop-stack-menu-button-background-image))); background-repeat: var(--mobile-stack-menu-button-background-repeat, var(--tablet-stack-menu-button-background-repeat, var(--desktop-stack-menu-button-background-repeat, no-repeat))); background-position: var(--mobile-stack-menu-button-background-position, var(--tablet-stack-menu-button-background-position, var(--desktop-stack-menu-button-background-position, center center))); background-size: var(--mobile-stack-menu-button-background-size, var(--tablet-stack-menu-button-background-size, var(--desktop-stack-menu-button-background-size, cover))); background-attachment: var(--mobile-stack-menu-button-background-attachment, var(--tablet-stack-menu-button-background-attachment, var(--desktop-stack-menu-button-background-attachment, cover))); transition: all 0.2s ease-in-out; } [elType='section'] > [elType='container'] > .oe-draggable-widget .oe-stack-widget-wrapper .oe-stack-menu button > .oe-background .oe-background-gradient { background-image: var(--mobile-buttonPrefix-background-gradient, var(--default-button-gradient)); color: red; } [elType='section'] > [elType='container'] > .oe-draggable-widget .oe-stack-widget-wrapper .oe-stack-menu button:hover { color: var(--mobile-hover-stack-menu-button-color, var(--mobile-stack-menu-button-color, var(--tablet-hover-stack-menu-button-color, var(--tablet-stack-menu-button-color, var(--desktop-hover-stack-menu-button-color, var(--desktop-stack-menu-button-color, var(--default-button-color))))))); opacity: var(--mobile-hover-stack-menu-button-opacity, var(--mobile-stack-menu-button-opacity, var(--tablet-hover-stack-menu-button-opacity, var(--tablet-stack-menu-button-opacity, var(--desktop-hover-stack-menu-button-opacity, var(--desktop-stack-menu-button-opacity, var(--default-button-opacity))))))); padding: var(--mobile-hover-stack-menu-button-padding, var(--mobile-stack-menu-button-padding, var(--tablet-hover-stack-menu-button-padding, var(--tablet-stack-menu-button-padding, var(--desktop-hover-stack-menu-button-padding, var(--desktop-stack-menu-button-padding, var(--default-button-padding))))))); border-width: var(--mobile-hover-stack-menu-button-border-width, var(--mobile-stack-menu-button-border-width, var(--tablet-hover-stack-menu-button-border-width, var(--tablet-stack-menu-button-border-width, var(--desktop-hover-stack-menu-button-border-width, var(--desktop-stack-menu-button-border-width, var(--default-button-border-width))))))); border-style: var(--mobile-hover-stack-menu-button-border-style, var(--mobile-stack-menu-button-border-style, var(--tablet-hover-stack-menu-button-border-style, var(--tablet-stack-menu-button-border-style, var(--desktop-hover-stack-menu-button-border-style, var(--desktop-stack-menu-button-border-style, var(--default-button-border-style))))))); border-color: var(--mobile-hover-stack-menu-button-border-color, var(--mobile-stack-menu-button-border-color, var(--tablet-hover-stack-menu-button-border-color, var(--tablet-stack-menu-button-border-color, var(--desktop-hover-stack-menu-button-border-color, var(--desktop-stack-menu-button-border-color, var(--default-button-border-color))))))); border-radius: var(--mobile-hover-stack-menu-button-border-radius, var(--mobile-stack-menu-button-border-radius, var(--tablet-hover-stack-menu-button-border-radius, var(--tablet-stack-menu-button-border-radius, var(--desktop-hover-stack-menu-button-border-radius, var(--desktop-stack-menu-button-border-radius, var(--default-button-border-radius))))))); font-size: var(--mobile-hover-stack-menu-button-font-size, var(--mobile-stack-menu-button-font-size, var(--tablet-hover-stack-menu-button-font-size, var(--tablet-stack-menu-button-font-size, var(--desktop-hover-stack-menu-button-font-size, var(--desktop-stack-menu-button-font-size, var(--default-button-font-size))))))); opacity: var(--mobile-hover-stack-menu-button-opacity, var(--mobile-stack-menu-button-opacity, var(--tablet-hover-stack-menu-button-opacity, var(--tablet-stack-menu-button-opacity, var(--desktop-hover-stack-menu-button-opacity, var(--desktop-stack-menu-button-opacity, 1)))))); box-shadow: var(--mobile-hover-stack-menu-button-box-shadow, var(--mobile-stack-menu-button-box-shadow, var(--tablet-hover-stack-menu-button-box-shadow, var(--tablet-stack-menu-button-box-shadow, var(--desktop-hover-stack-menu-button-box-shadow, var(--desktop-stack-menu-button-box-shadow)))))); font-family: var(--mobile-hover-stack-menu-button-font-family, var(--mobile-stack-menu-button-font-family, var(--tablet-hover-stack-menu-button-font-family, var(--tablet-stack-menu-button-font-family, var(--desktop-hover-stack-menu-button-font-family, var(--desktop-stack-menu-button-font-family, var(--default-button-font-family))))))); font-weight: var(--mobile-hover-stack-menu-button-font-weight, var(--mobile-stack-menu-button-font-weight, var(--tablet-hover-stack-menu-button-font-weight, var(--tablet-stack-menu-button-font-weight, var(--desktop-hover-stack-menu-button-font-weight, var(--desktop-stack-menu-button-font-weight, var(--default-button-font-weight))))))); transform: scale(var(--mobile-hover-scale, var(--mobile-scale, var(--tablet-hover-scale, var(--tablet-scale, var(--desktop-hover-scale, var(--desktop-scale, , 1))))))); } [elType='section'] > [elType='container'] > .oe-draggable-widget .oe-stack-widget-wrapper .oe-stack-menu button:hover .oe-button-html .oe-button-image { font-size: var(--mobile-hover-stack-menu-button-image-size, var(--mobile-stack-menu-button-image-size, var(--tablet-hover-stack-menu-button-image-size, var(--tablet-stack-menu-button-image-size, var(--desktop-hover-stack-menu-button-image-size, var(--desktop-stack-menu-button-image-size, inherit)))))); } [elType='section'] > [elType='container'] > .oe-draggable-widget .oe-stack-widget-wrapper .oe-stack-menu button:hover .oe-button-html .oe-button-image svg { fill: var(--mobile-hover-stack-menu-button-shape-fill, var(--mobile-stack-menu-button-shape-fill, var(--tablet-hover-stack-menu-button-shape-fill, var(--tablet-stack-menu-button-shape-fill, var(--desktop-hover-stack-menu-button-shape-fill, var(--desktop-stack-menu-button-shape-fill, , #666666)))))); stroke: var(--mobile-hover-stack-menu-button-shape-stroke, var(--mobile-stack-menu-button-shape-stroke, var(--tablet-hover-stack-menu-button-shape-stroke, var(--tablet-stack-menu-button-shape-stroke, var(--desktop-hover-stack-menu-button-shape-stroke, var(--desktop-stack-menu-button-shape-stroke, , #666666)))))); } [elType='section'] > [elType='container'] > .oe-draggable-widget .oe-stack-widget-wrapper .oe-stack-menu button:hover > .oe-background { pointer-events: none; overflow: hidden; transition: all 0.2s ease-in-out; } [elType='section'] > [elType='container'] > .oe-draggable-widget .oe-stack-widget-wrapper .oe-stack-menu button:hover > .oe-background:after { box-shadow: var(--mobile-hover-stack-menu-button-box-shadow, var(--mobile-stack-menu-button-box-shadow, var(--tablet-hover-stack-menu-button-box-shadow, var(--tablet-stack-menu-button-box-shadow, var(--desktop-hover-stack-menu-button-box-shadow, var(--desktop-stack-menu-button-box-shadow)))))); } [elType='section'] > [elType='container'] > .oe-draggable-widget .oe-stack-widget-wrapper .oe-stack-menu button:hover > .oe-background * { transition: all 0.2s ease-in-out; } [elType='section'] > [elType='container'] > .oe-draggable-widget .oe-stack-widget-wrapper .oe-stack-menu button:hover > .oe-background .oe-background-fill { background-color: var(--mobile-hover-stack-menu-button-background-color, var(--mobile-stack-menu-button-background-color, var(--tablet-hover-stack-menu-button-background-color, var(--tablet-stack-menu-button-background-color, var(--desktop-hover-stack-menu-button-background-color, var(--desktop-stack-menu-button-background-color, , var(--default-button-background-color))))))); opacity: var(--mobile-hover-stack-menu-button-background-fill-opacity, var(--mobile-stack-menu-button-background-fill-opacity, var(--tablet-hover-stack-menu-button-background-fill-opacity, var(--tablet-stack-menu-button-background-fill-opacity, var(--desktop-hover-stack-menu-button-background-fill-opacity, var(--desktop-stack-menu-button-background-fill-opacity, , 1)))))); transition: all 0.2s ease-in-out; } [elType='section'] > [elType='container'] > .oe-draggable-widget .oe-stack-widget-wrapper .oe-stack-menu button:hover > .oe-background .oe-background-gradient { opacity: var(--mobile-hover-stack-menu-button-background-gradient-opacity, var(--mobile-stack-menu-button-background-gradient-opacity, var(--tablet-hover-stack-menu-button-background-gradient-opacity, var(--tablet-stack-menu-button-background-gradient-opacity, var(--desktop-hover-stack-menu-button-background-gradient-opacity, var(--desktop-stack-menu-button-background-gradient-opacity, , 1)))))); background-image: var(--mobile-hover-stack-menu-button-background-gradient, var(--mobile-stack-menu-button-background-gradient, var(--tablet-hover-stack-menu-button-background-gradient, var(--tablet-stack-menu-button-background-gradient, var(--desktop-hover-stack-menu-button-background-gradient, var(--desktop-stack-menu-button-background-gradient, )))))); transition: all 0.2s ease-in-out; } [elType='section'] > [elType='container'] > .oe-draggable-widget .oe-stack-widget-wrapper .oe-stack-menu button:hover > .oe-background .oe-background-image { opacity: var(--mobile-hover-stack-menu-button-background-image-opacity, var(--mobile-stack-menu-button-background-image-opacity, var(--tablet-hover-stack-menu-button-background-image-opacity, var(--tablet-stack-menu-button-background-image-opacity, var(--desktop-hover-stack-menu-button-background-image-opacity, var(--desktop-stack-menu-button-background-image-opacity, , 1)))))); background-image: var(--mobile-hover-stack-menu-button-background-image, var(--mobile-stack-menu-button-background-image, var(--tablet-hover-stack-menu-button-background-image, var(--tablet-stack-menu-button-background-image, var(--desktop-hover-stack-menu-button-background-image, var(--desktop-stack-menu-button-background-image, )))))); background-repeat: var(--mobile-hover-stack-menu-button-background-repeat, var(--mobile-stack-menu-button-background-repeat, var(--tablet-hover-stack-menu-button-background-repeat, var(--tablet-stack-menu-button-background-repeat, var(--desktop-hover-stack-menu-button-background-repeat, var(--desktop-stack-menu-button-background-repeat, , no-repeat)))))); background-position: var(--mobile-hover-stack-menu-button-background-position, var(--mobile-stack-menu-button-background-position, var(--tablet-hover-stack-menu-button-background-position, var(--tablet-stack-menu-button-background-position, var(--desktop-hover-stack-menu-button-background-position, var(--desktop-stack-menu-button-background-position, , center center)))))); background-size: var(--mobile-hover-stack-menu-button-background-size, var(--mobile-stack-menu-button-background-size, var(--tablet-hover-stack-menu-button-background-size, var(--tablet-stack-menu-button-background-size, var(--desktop-hover-stack-menu-button-background-size, var(--desktop-stack-menu-button-background-size, , cover)))))); background-attachment: var(--mobile-hover-stack-menu-button-background-attachment, var(--mobile-stack-menu-button-background-attachment, var(--tablet-hover-stack-menu-button-background-attachment, var(--tablet-stack-menu-button-background-attachment, var(--desktop-hover-stack-menu-button-background-attachment, var(--desktop-stack-menu-button-background-attachment, , cover)))))); transition: all 0.2s ease-in-out; } [elType='section'] > [elType='container'] > .oe-draggable-widget .oe-stack-widget-wrapper .oe-stack-menu button:hover > .oe-background .oe-background-gradient { color: red; } [elType='section'] > [elType='container'] > .oe-draggable-widget .oe-stack-widget-wrapper .oe-stack-menu button.selected { position: relative; pointer-events: all; margin: 0px; display: flex; align-items: center; justify-content: center; cursor: pointer; text-decoration: none; color: var(--mobile-selected-stack-menu-button-color, var(--mobile-stack-menu-button-color, var(--tablet-selected-stack-menu-button-color, var(--tablet-stack-menu-button-color, var(--desktop-selected-stack-menu-button-color, var(--desktop-stack-menu-button-color, var(--mobile-hover-stack-menu-button-color , var(--mobile-stack-menu-button-color , var(--tablet-stack-menu-button-color , var(--desktop-stack-menu-button-color, var(--default-button-color))))))))))); opacity: var(--mobile-selected-stack-menu-button-opacity, var(--mobile-stack-menu-button-opacity, var(--tablet-selected-stack-menu-button-opacity, var(--tablet-stack-menu-button-opacity, var(--desktop-selected-stack-menu-button-opacity, var(--desktop-stack-menu-button-opacity, var(--mobile-hover-stack-menu-button-opacity , var(--mobile-stack-menu-button-opacity , var(--tablet-stack-menu-button-opacity , var(--desktop-stack-menu-button-opacity, var(--default-button-opacity))))))))))); padding: var(--mobile-selected-stack-menu-button-padding, var(--mobile-stack-menu-button-padding, var(--tablet-selected-stack-menu-button-padding, var(--tablet-stack-menu-button-padding, var(--desktop-selected-stack-menu-button-padding, var(--desktop-stack-menu-button-padding, var(--mobile-hover-stack-menu-button-padding , var(--mobile-stack-menu-button-padding , var(--tablet-stack-menu-button-padding , var(--desktop-stack-menu-button-padding, var(--default-button-padding))))))))))); border-width: var(--mobile-selected-stack-menu-button-border-width, var(--mobile-stack-menu-button-border-width, var(--tablet-selected-stack-menu-button-border-width, var(--tablet-stack-menu-button-border-width, var(--desktop-selected-stack-menu-button-border-width, var(--desktop-stack-menu-button-border-width, var(--mobile-hover-stack-menu-button-border-width , var(--mobile-stack-menu-button-border-width , var(--tablet-stack-menu-button-border-width , var(--desktop-stack-menu-button-border-width, var(--default-button-border-width))))))))))); border-style: var(--mobile-selected-stack-menu-button-border-style, var(--mobile-stack-menu-button-border-style, var(--tablet-selected-stack-menu-button-border-style, var(--tablet-stack-menu-button-border-style, var(--desktop-selected-stack-menu-button-border-style, var(--desktop-stack-menu-button-border-style, var(--mobile-hover-stack-menu-button-border-style , var(--mobile-stack-menu-button-border-style , var(--tablet-stack-menu-button-border-style , var(--desktop-stack-menu-button-border-style, var(--default-button-border-style))))))))))); border-color: var(--mobile-selected-stack-menu-button-border-color, var(--mobile-stack-menu-button-border-color, var(--tablet-selected-stack-menu-button-border-color, var(--tablet-stack-menu-button-border-color, var(--desktop-selected-stack-menu-button-border-color, var(--desktop-stack-menu-button-border-color, var(--mobile-hover-stack-menu-button-border-color , var(--mobile-stack-menu-button-border-color , var(--tablet-stack-menu-button-border-color , var(--desktop-stack-menu-button-border-color, var(--default-button-border-color))))))))))); border-radius: var(--mobile-selected-stack-menu-button-border-radius, var(--mobile-stack-menu-button-border-radius, var(--tablet-selected-stack-menu-button-border-radius, var(--tablet-stack-menu-button-border-radius, var(--desktop-selected-stack-menu-button-border-radius, var(--desktop-stack-menu-button-border-radius, var(--mobile-hover-stack-menu-button-border-radius , var(--mobile-stack-menu-button-border-radius , var(--tablet-stack-menu-button-border-radius , var(--desktop-stack-menu-button-border-radius, var(--default-button-border-radius))))))))))); font-size: var(--mobile-selected-stack-menu-button-font-size, var(--mobile-stack-menu-button-font-size, var(--tablet-selected-stack-menu-button-font-size, var(--tablet-stack-menu-button-font-size, var(--desktop-selected-stack-menu-button-font-size, var(--desktop-stack-menu-button-font-size, var(--mobile-hover-stack-menu-button-font-size , var(--mobile-stack-menu-button-font-size , var(--tablet-stack-menu-button-font-size , var(--desktop-stack-menu-button-font-size, var(--default-button-font-size))))))))))); opacity: var(--mobile-selected-stack-menu-button-opacity, var(--mobile-stack-menu-button-opacity, var(--tablet-selected-stack-menu-button-opacity, var(--tablet-stack-menu-button-opacity, var(--desktop-selected-stack-menu-button-opacity, var(--desktop-stack-menu-button-opacity, 1)))))); box-shadow: var(--mobile-selected-stack-menu-button-box-shadow, var(--mobile-stack-menu-button-box-shadow, var(--tablet-selected-stack-menu-button-box-shadow, var(--tablet-stack-menu-button-box-shadow, var(--desktop-selected-stack-menu-button-box-shadow, var(--desktop-stack-menu-button-box-shadow)))))); font-family: var(--mobile-selected-stack-menu-button-font-family, var(--mobile-stack-menu-button-font-family, var(--tablet-selected-stack-menu-button-font-family, var(--tablet-stack-menu-button-font-family, var(--desktop-selected-stack-menu-button-font-family, var(--desktop-stack-menu-button-font-family, var(--mobile-hover-stack-menu-button-font-family , var(--mobile-stack-menu-button-font-family , var(--tablet-stack-menu-button-font-family , var(--desktop-stack-menu-button-font-family, var(--default-button-font-family))))))))))); font-weight: var(--mobile-selected-stack-menu-button-font-weight, var(--mobile-stack-menu-button-font-weight, var(--tablet-selected-stack-menu-button-font-weight, var(--tablet-stack-menu-button-font-weight, var(--desktop-selected-stack-menu-button-font-weight, var(--desktop-stack-menu-button-font-weight, var(--mobile-hover-stack-menu-button-font-weight , var(--mobile-stack-menu-button-font-weight , var(--tablet-stack-menu-button-font-weight , var(--desktop-stack-menu-button-font-weight, var(--default-button-font-weight))))))))))); transform: scale(var(--mobile-hover-scale, var(--mobile-scale, var(--tablet-hover-scale, var(--tablet-scale, var(--desktop-hover-scale, var(--desktop-scale, , 1))))))); overflow: hidden; } [elType='section'] > [elType='container'] > .oe-draggable-widget .oe-stack-widget-wrapper .oe-stack-menu button.selected .oe-button-html .oe-button-image { font-size: var(--mobile-selected-stack-menu-button-image-size, var(--mobile-stack-menu-button-image-size, var(--tablet-selected-stack-menu-button-image-size, var(--tablet-stack-menu-button-image-size, var(--desktop-selected-stack-menu-button-image-size, var(--desktop-stack-menu-button-image-size, inherit)))))); } [elType='section'] > [elType='container'] > .oe-draggable-widget .oe-stack-widget-wrapper .oe-stack-menu button.selected .oe-button-html .oe-button-image svg { fill: var(--mobile-selected-stack-menu-button-shape-fill, var(--mobile-stack-menu-button-shape-fill, var(--tablet-selected-stack-menu-button-shape-fill, var(--tablet-stack-menu-button-shape-fill, var(--desktop-selected-stack-menu-button-shape-fill, var(--desktop-stack-menu-button-shape-fill, , #666666)))))); stroke: var(--mobile-selected-stack-menu-button-shape-stroke, var(--mobile-stack-menu-button-shape-stroke, var(--tablet-selected-stack-menu-button-shape-stroke, var(--tablet-stack-menu-button-shape-stroke, var(--desktop-selected-stack-menu-button-shape-stroke, var(--desktop-stack-menu-button-shape-stroke, , #666666)))))); } [elType='section'] > [elType='container'] > .oe-draggable-widget .oe-stack-widget-wrapper .oe-stack-menu button.selected .oe-button-html { text-align: center; position: relative; width: 100%; text-align: var(--mobile-selected-label-text-align, var(--mobile-label-text-align, var(--tablet-selected-label-text-align, var(--tablet-label-text-align, var(--desktop-selected-label-text-align, var(--desktop-label-text-align, center)))))); } [elType='section'] > [elType='container'] > .oe-draggable-widget .oe-stack-widget-wrapper .oe-stack-menu button.selected > .oe-background { pointer-events: none; overflow: hidden; transition: all 0.2s ease-in-out; } [elType='section'] > [elType='container'] > .oe-draggable-widget .oe-stack-widget-wrapper .oe-stack-menu button.selected > .oe-background:after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 1; box-shadow: var(--mobile-selected-stack-menu-button-box-shadow, var(--mobile-stack-menu-button-box-shadow, var(--tablet-selected-stack-menu-button-box-shadow, var(--tablet-stack-menu-button-box-shadow, var(--desktop-selected-stack-menu-button-box-shadow, var(--desktop-stack-menu-button-box-shadow)))))); } [elType='section'] > [elType='container'] > .oe-draggable-widget .oe-stack-widget-wrapper .oe-stack-menu button.selected > .oe-background * { transition: all 0.2s ease-in-out; } [elType='section'] > [elType='container'] > .oe-draggable-widget .oe-stack-widget-wrapper .oe-stack-menu button.selected > .oe-background .oe-background-fill { background-color: var(--mobile-selected-stack-menu-button-background-color, var(--mobile-stack-menu-button-background-color, var(--tablet-selected-stack-menu-button-background-color, var(--tablet-stack-menu-button-background-color, var(--desktop-selected-stack-menu-button-background-color, var(--desktop-stack-menu-button-background-color, , var(--mobile-hover-stack-menu-button-background-color , var(--mobile-stack-menu-button-background-color , var(--tablet-stack-menu-button-background-color , var(--desktop-stack-menu-button-background-color, var(--default-button-background-color))))))))))); opacity: var(--mobile-selected-stack-menu-button-background-fill-opacity, var(--mobile-stack-menu-button-background-fill-opacity, var(--tablet-selected-stack-menu-button-background-fill-opacity, var(--tablet-stack-menu-button-background-fill-opacity, var(--desktop-selected-stack-menu-button-background-fill-opacity, var(--desktop-stack-menu-button-background-fill-opacity, , 1)))))); transition: all 0.2s ease-in-out; } [elType='section'] > [elType='container'] > .oe-draggable-widget .oe-stack-widget-wrapper .oe-stack-menu button.selected > .oe-background .oe-background-gradient { opacity: var(--mobile-selected-stack-menu-button-background-gradient-opacity, var(--mobile-stack-menu-button-background-gradient-opacity, var(--tablet-selected-stack-menu-button-background-gradient-opacity, var(--tablet-stack-menu-button-background-gradient-opacity, var(--desktop-selected-stack-menu-button-background-gradient-opacity, var(--desktop-stack-menu-button-background-gradient-opacity, , 1)))))); background-image: var(--mobile-selected-stack-menu-button-background-gradient, var(--mobile-stack-menu-button-background-gradient, var(--tablet-selected-stack-menu-button-background-gradient, var(--tablet-stack-menu-button-background-gradient, var(--desktop-selected-stack-menu-button-background-gradient, var(--desktop-stack-menu-button-background-gradient, )))))); transition: all 0.2s ease-in-out; } [elType='section'] > [elType='container'] > .oe-draggable-widget .oe-stack-widget-wrapper .oe-stack-menu button.selected > .oe-background .oe-background-image { opacity: var(--mobile-selected-stack-menu-button-background-image-opacity, var(--mobile-stack-menu-button-background-image-opacity, var(--tablet-selected-stack-menu-button-background-image-opacity, var(--tablet-stack-menu-button-background-image-opacity, var(--desktop-selected-stack-menu-button-background-image-opacity, var(--desktop-stack-menu-button-background-image-opacity, , 1)))))); background-image: var(--mobile-selected-stack-menu-button-background-image, var(--mobile-stack-menu-button-background-image, var(--tablet-selected-stack-menu-button-background-image, var(--tablet-stack-menu-button-background-image, var(--desktop-selected-stack-menu-button-background-image, var(--desktop-stack-menu-button-background-image, )))))); background-repeat: var(--mobile-selected-stack-menu-button-background-repeat, var(--mobile-stack-menu-button-background-repeat, var(--tablet-selected-stack-menu-button-background-repeat, var(--tablet-stack-menu-button-background-repeat, var(--desktop-selected-stack-menu-button-background-repeat, var(--desktop-stack-menu-button-background-repeat, , no-repeat)))))); background-position: var(--mobile-selected-stack-menu-button-background-position, var(--mobile-stack-menu-button-background-position, var(--tablet-selected-stack-menu-button-background-position, var(--tablet-stack-menu-button-background-position, var(--desktop-selected-stack-menu-button-background-position, var(--desktop-stack-menu-button-background-position, , center center)))))); background-size: var(--mobile-selected-stack-menu-button-background-size, var(--mobile-stack-menu-button-background-size, var(--tablet-selected-stack-menu-button-background-size, var(--tablet-stack-menu-button-background-size, var(--desktop-selected-stack-menu-button-background-size, var(--desktop-stack-menu-button-background-size, , cover)))))); background-attachment: var(--mobile-selected-stack-menu-button-background-attachment, var(--mobile-stack-menu-button-background-attachment, var(--tablet-selected-stack-menu-button-background-attachment, var(--tablet-stack-menu-button-background-attachment, var(--desktop-selected-stack-menu-button-background-attachment, var(--desktop-stack-menu-button-background-attachment, , cover)))))); transition: all 0.2s ease-in-out; } [elType='section'] > [elType='container'] > .oe-draggable-widget .oe-stack-widget-wrapper .oe-stack-menu button.selected > .oe-background .oe-background-gradient { color: red; } [elType='section'] > [elType='container'] > .oe-draggable-widget[eltype="stack"] { position: relative; height: auto; /* Handles preview of hovered stack menu */ } [elType='section'] > [elType='container'] > .oe-draggable-widget[eltype="stack"] .oe-stack-widget { padding: var(--grid-padding, 0px); border-width: var(--mobile-grid-border-width, var(--tablet-grid-border-width, var(--desktop-grid-border-width, 0px))); border-color: var(--mobile-grid-border-color, var(--tablet-grid-border-color, var(--desktop-grid-border-color, #333333))); border-style: var(--mobile-grid-border-style, var(--tablet-grid-border-style, var(--desktop-grid-border-style, none))); border-radius: var(--mobile-grid-border-radius, var(--tablet-grid-border-radius, var(--desktop-grid-border-radius, 0px))); box-shadow: var(--mobile-grid-box-shadow, var(--tablet-grid-box-shadow, var(--desktop-grid-box-shadow, none))); position: relative; height: auto !important; flex-direction: column; } [elType='section'] > [elType='container'] > .oe-draggable-widget[eltype="stack"] .oe-stack-widget .oe-stack { position: relative; display: flex; height: auto; width: 100%; align-items: center; flex-direction: column; --default-grid-widget-mobile-width: 100%; padding: 0px; } [elType='section'] > [elType='container'] > .oe-draggable-widget[eltype="stack"] .oe-stack-widget .oe-stack.oe-stack-hidden > .oe-draggable-widget { display: none; } [elType='section'] > [elType='container'] > .oe-draggable-widget[eltype="stack"] .oe-stack-widget .oe-stack .margin_spacer { display: var(--desktop-flex-direction-display-margin-spacer, initial) !important; } [elType='section'] > [elType='container'] > .oe-draggable-widget[eltype="stack"] .oe-stack-widget .oe-stack .oe-draggable-widget[eltype] { width: var(--mobile-flex-item-width, calc(var(--dcw) * var(--desktop-gridArea-width) * 1rem)); height: var(--mobile-flex-item-height, calc(var(--dcw) * var(--desktop-gridArea-height) * 1rem)); max-width: 100%; } [elType='section'] > [elType='container'] > .oe-draggable-widget[eltype="stack"] .oe-stack-widget > .oe-background { border-radius: var(--mobile-grid-bg-radius, var(--tablet-grid-bg-radius, var(--desktop-grid-bg-radius, 0px))); pointer-events: none; overflow: hidden; transition: all 0.2s ease-in-out; } [elType='section'] > [elType='container'] > .oe-draggable-widget[eltype="stack"] .oe-stack-widget > .oe-background * { transition: all 0.2s ease-in-out; } [elType='section'] > [elType='container'] > .oe-draggable-widget[eltype="stack"] .oe-stack-widget > .oe-background .oe-background-fill { background-color: var(--mobile-grid-background-color, var(--tablet-grid-background-color, var(--desktop-grid-background-color, ))); opacity: var(--mobile-grid-background-fill-opacity, var(--tablet-grid-background-fill-opacity, var(--desktop-grid-background-fill-opacity, 1))); transition: all 0.2s ease-in-out; } [elType='section'] > [elType='container'] > .oe-draggable-widget[eltype="stack"] .oe-stack-widget > .oe-background .oe-background-gradient { opacity: var(--mobile-grid-background-gradient-opacity, var(--tablet-grid-background-gradient-opacity, var(--desktop-grid-background-gradient-opacity, 1))); background-image: var(--mobile-grid-background-gradient, var(--tablet-grid-background-gradient, var(--desktop-grid-background-gradient))); transition: all 0.2s ease-in-out; } [elType='section'] > [elType='container'] > .oe-draggable-widget[eltype="stack"] .oe-stack-widget > .oe-background .oe-background-image { opacity: var(--mobile-grid-background-image-opacity, var(--tablet-grid-background-image-opacity, var(--desktop-grid-background-image-opacity, 1))); background-image: var(--grid-background-image); background-repeat: var(--mobile-grid-background-repeat, var(--tablet-grid-background-repeat, var(--desktop-grid-background-repeat, no-repeat))); background-position: var(--mobile-grid-background-position, var(--tablet-grid-background-position, var(--desktop-grid-background-position, center center))); background-size: var(--mobile-grid-background-size, var(--tablet-grid-background-size, var(--desktop-grid-background-size, cover))); background-attachment: var(--mobile-grid-background-attachment, var(--tablet-grid-background-attachment, var(--desktop-grid-background-attachment, cover))); transition: all 0.2s ease-in-out; } [elType='section'] > [elType='container'] > .oe-draggable-widget[eltype="stack"].hovered .oe-stack-widget-wrapper .oe-stack-menu { opacity: var(--mobile-hover-stack-menu-opacity, var(--mobile-stack-menu-opacity, var(--tablet-hover-stack-menu-opacity, var(--tablet-stack-menu-opacity, var(--desktop-hover-stack-menu-opacity, var(--desktop-stack-menu-opacity, , 1)))))); padding: var(--mobile-hover-stack-menu-padding, var(--mobile-stack-menu-padding, var(--tablet-hover-stack-menu-padding, var(--tablet-stack-menu-padding, var(--desktop-hover-stack-menu-padding, var(--desktop-stack-menu-padding, , 0px)))))); border-width: var(--mobile-hover-stack-menu-border-width, var(--mobile-stack-menu-border-width, var(--tablet-hover-stack-menu-border-width, var(--tablet-stack-menu-border-width, var(--desktop-hover-stack-menu-border-width, var(--desktop-stack-menu-border-width, , 0px)))))); border-color: var(--mobile-hover-stack-menu-border-color, var(--mobile-stack-menu-border-color, var(--tablet-hover-stack-menu-border-color, var(--tablet-stack-menu-border-color, var(--desktop-hover-stack-menu-border-color, var(--desktop-stack-menu-border-color, , #333333)))))); border-style: var(--mobile-hover-stack-menu-border-style, var(--mobile-stack-menu-border-style, var(--tablet-hover-stack-menu-border-style, var(--tablet-stack-menu-border-style, var(--desktop-hover-stack-menu-border-style, var(--desktop-stack-menu-border-style, , none)))))); border-radius: var(--mobile-hover-stack-menu-border-radius, var(--mobile-stack-menu-border-radius, var(--tablet-hover-stack-menu-border-radius, var(--tablet-stack-menu-border-radius, var(--desktop-hover-stack-menu-border-radius, var(--desktop-stack-menu-border-radius, , 0px)))))); box-shadow: var(--mobile-hover-stack-menu-box-shadow, var(--mobile-stack-menu-box-shadow, var(--tablet-hover-stack-menu-box-shadow, var(--tablet-stack-menu-box-shadow, var(--desktop-hover-stack-menu-box-shadow, var(--desktop-stack-menu-box-shadow, , none)))))); } [elType='section'] > [elType='container'] > .oe-draggable-widget[eltype="stack"].hovered .oe-stack-widget-wrapper .oe-stack-menu > .oe-background { border-radius: var(--mobile-hover-stack-menu-bg-radius, var(--mobile-stack-menu-bg-radius, var(--tablet-hover-stack-menu-bg-radius, var(--tablet-stack-menu-bg-radius, var(--desktop-hover-stack-menu-bg-radius, var(--desktop-stack-menu-bg-radius, , 0px)))))); pointer-events: none; overflow: hidden; transition: all 0.2s ease-in-out; } [elType='section'] > [elType='container'] > .oe-draggable-widget[eltype="stack"].hovered .oe-stack-widget-wrapper .oe-stack-menu > .oe-background * { transition: all 0.2s ease-in-out; } [elType='section'] > [elType='container'] > .oe-draggable-widget[eltype="stack"].hovered .oe-stack-widget-wrapper .oe-stack-menu > .oe-background .oe-background-fill { background-color: var(--mobile-hover-stack-menu-background-color, var(--mobile-stack-menu-background-color, var(--tablet-hover-stack-menu-background-color, var(--tablet-stack-menu-background-color, var(--desktop-hover-stack-menu-background-color, var(--desktop-stack-menu-background-color, , inherit)))))); opacity: var(--mobile-hover-stack-menu-background-fill-opacity, var(--mobile-stack-menu-background-fill-opacity, var(--tablet-hover-stack-menu-background-fill-opacity, var(--tablet-stack-menu-background-fill-opacity, var(--desktop-hover-stack-menu-background-fill-opacity, var(--desktop-stack-menu-background-fill-opacity, , 1)))))); transition: all 0.2s ease-in-out; } [elType='section'] > [elType='container'] > .oe-draggable-widget[eltype="stack"].hovered .oe-stack-widget-wrapper .oe-stack-menu > .oe-background .oe-background-gradient { opacity: var(--mobile-hover-stack-menu-background-gradient-opacity, var(--mobile-stack-menu-background-gradient-opacity, var(--tablet-hover-stack-menu-background-gradient-opacity, var(--tablet-stack-menu-background-gradient-opacity, var(--desktop-hover-stack-menu-background-gradient-opacity, var(--desktop-stack-menu-background-gradient-opacity, , 1)))))); background-image: var(--mobile-hover-stack-menu-background-gradient, var(--mobile-stack-menu-background-gradient, var(--tablet-hover-stack-menu-background-gradient, var(--tablet-stack-menu-background-gradient, var(--desktop-hover-stack-menu-background-gradient, var(--desktop-stack-menu-background-gradient, )))))); transition: all 0.2s ease-in-out; } [elType='section'] > [elType='container'] > .oe-draggable-widget[eltype="stack"].hovered .oe-stack-widget-wrapper .oe-stack-menu > .oe-background .oe-background-image { opacity: var(--mobile-hover-stack-menu-background-image-opacity, var(--mobile-stack-menu-background-image-opacity, var(--tablet-hover-stack-menu-background-image-opacity, var(--tablet-stack-menu-background-image-opacity, var(--desktop-hover-stack-menu-background-image-opacity, var(--desktop-stack-menu-background-image-opacity, , 1)))))); background-image: var(--mobile-hover-stack-menu-background-image, var(--mobile-stack-menu-background-image, var(--tablet-hover-stack-menu-background-image, var(--tablet-stack-menu-background-image, var(--desktop-hover-stack-menu-background-image, var(--desktop-stack-menu-background-image, )))))); background-repeat: var(--mobile-hover-stack-menu-background-repeat, var(--mobile-stack-menu-background-repeat, var(--tablet-hover-stack-menu-background-repeat, var(--tablet-stack-menu-background-repeat, var(--desktop-hover-stack-menu-background-repeat, var(--desktop-stack-menu-background-repeat, , no-repeat)))))); background-position: var(--mobile-hover-stack-menu-background-position, var(--mobile-stack-menu-background-position, var(--tablet-hover-stack-menu-background-position, var(--tablet-stack-menu-background-position, var(--desktop-hover-stack-menu-background-position, var(--desktop-stack-menu-background-position, , center center)))))); background-size: var(--mobile-hover-stack-menu-background-size, var(--mobile-stack-menu-background-size, var(--tablet-hover-stack-menu-background-size, var(--tablet-stack-menu-background-size, var(--desktop-hover-stack-menu-background-size, var(--desktop-stack-menu-background-size, , cover)))))); background-attachment: var(--mobile-hover-stack-menu-background-attachment, var(--mobile-stack-menu-background-attachment, var(--tablet-hover-stack-menu-background-attachment, var(--tablet-stack-menu-background-attachment, var(--desktop-hover-stack-menu-background-attachment, var(--desktop-stack-menu-background-attachment, , cover)))))); transition: all 0.2s ease-in-out; } [elType='section'] > [elType='container'] > .oe-draggable-widget[eltype="stack"].hovered .oe-stack-widget-wrapper .oe-stack-menu:hover { opacity: var(--mobile-hover-stack-menu-opacity, var(--mobile-stack-menu-opacity, var(--tablet-hover-stack-menu-opacity, var(--tablet-stack-menu-opacity, var(--desktop-hover-stack-menu-opacity, var(--desktop-stack-menu-opacity, , 1)))))); padding: var(--mobile-hover-stack-menu-padding, var(--mobile-stack-menu-padding, var(--tablet-hover-stack-menu-padding, var(--tablet-stack-menu-padding, var(--desktop-hover-stack-menu-padding, var(--desktop-stack-menu-padding, , 0px)))))); border-width: var(--mobile-hover-stack-menu-border-width, var(--mobile-stack-menu-border-width, var(--tablet-hover-stack-menu-border-width, var(--tablet-stack-menu-border-width, var(--desktop-hover-stack-menu-border-width, var(--desktop-stack-menu-border-width, , 0px)))))); border-color: var(--mobile-hover-stack-menu-border-color, var(--mobile-stack-menu-border-color, var(--tablet-hover-stack-menu-border-color, var(--tablet-stack-menu-border-color, var(--desktop-hover-stack-menu-border-color, var(--desktop-stack-menu-border-color, , #333333)))))); border-style: var(--mobile-hover-stack-menu-border-style, var(--mobile-stack-menu-border-style, var(--tablet-hover-stack-menu-border-style, var(--tablet-stack-menu-border-style, var(--desktop-hover-stack-menu-border-style, var(--desktop-stack-menu-border-style, , none)))))); border-radius: var(--mobile-hover-stack-menu-border-radius, var(--mobile-stack-menu-border-radius, var(--tablet-hover-stack-menu-border-radius, var(--tablet-stack-menu-border-radius, var(--desktop-hover-stack-menu-border-radius, var(--desktop-stack-menu-border-radius, , 0px)))))); box-shadow: var(--mobile-hover-stack-menu-box-shadow, var(--mobile-stack-menu-box-shadow, var(--tablet-hover-stack-menu-box-shadow, var(--tablet-stack-menu-box-shadow, var(--desktop-hover-stack-menu-box-shadow, var(--desktop-stack-menu-box-shadow, , none)))))); } [elType='section'] > [elType='container'] > .oe-draggable-widget[eltype="stack"].hovered .oe-stack-widget-wrapper .oe-stack-menu:hover > .oe-background { border-radius: var(--mobile-hover-stack-menu-bg-radius, var(--mobile-stack-menu-bg-radius, var(--tablet-hover-stack-menu-bg-radius, var(--tablet-stack-menu-bg-radius, var(--desktop-hover-stack-menu-bg-radius, var(--desktop-stack-menu-bg-radius, , 0px)))))); pointer-events: none; overflow: hidden; transition: all 0.2s ease-in-out; } [elType='section'] > [elType='container'] > .oe-draggable-widget[eltype="stack"].hovered .oe-stack-widget-wrapper .oe-stack-menu:hover > .oe-background * { transition: all 0.2s ease-in-out; } [elType='section'] > [elType='container'] > .oe-draggable-widget[eltype="stack"].hovered .oe-stack-widget-wrapper .oe-stack-menu:hover > .oe-background .oe-background-fill { background-color: var(--mobile-hover-stack-menu-background-color, var(--mobile-stack-menu-background-color, var(--tablet-hover-stack-menu-background-color, var(--tablet-stack-menu-background-color, var(--desktop-hover-stack-menu-background-color, var(--desktop-stack-menu-background-color, , inherit)))))); opacity: var(--mobile-hover-stack-menu-background-fill-opacity, var(--mobile-stack-menu-background-fill-opacity, var(--tablet-hover-stack-menu-background-fill-opacity, var(--tablet-stack-menu-background-fill-opacity, var(--desktop-hover-stack-menu-background-fill-opacity, var(--desktop-stack-menu-background-fill-opacity, , 1)))))); transition: all 0.2s ease-in-out; } [elType='section'] > [elType='container'] > .oe-draggable-widget[eltype="stack"].hovered .oe-stack-widget-wrapper .oe-stack-menu:hover > .oe-background .oe-background-gradient { opacity: var(--mobile-hover-stack-menu-background-gradient-opacity, var(--mobile-stack-menu-background-gradient-opacity, var(--tablet-hover-stack-menu-background-gradient-opacity, var(--tablet-stack-menu-background-gradient-opacity, var(--desktop-hover-stack-menu-background-gradient-opacity, var(--desktop-stack-menu-background-gradient-opacity, , 1)))))); background-image: var(--mobile-hover-stack-menu-background-gradient, var(--mobile-stack-menu-background-gradient, var(--tablet-hover-stack-menu-background-gradient, var(--tablet-stack-menu-background-gradient, var(--desktop-hover-stack-menu-background-gradient, var(--desktop-stack-menu-background-gradient, )))))); transition: all 0.2s ease-in-out; } [elType='section'] > [elType='container'] > .oe-draggable-widget[eltype="stack"].hovered .oe-stack-widget-wrapper .oe-stack-menu:hover > .oe-background .oe-background-image { opacity: var(--mobile-hover-stack-menu-background-image-opacity, var(--mobile-stack-menu-background-image-opacity, var(--tablet-hover-stack-menu-background-image-opacity, var(--tablet-stack-menu-background-image-opacity, var(--desktop-hover-stack-menu-background-image-opacity, var(--desktop-stack-menu-background-image-opacity, , 1)))))); background-image: var(--mobile-hover-stack-menu-background-image, var(--mobile-stack-menu-background-image, var(--tablet-hover-stack-menu-background-image, var(--tablet-stack-menu-background-image, var(--desktop-hover-stack-menu-background-image, var(--desktop-stack-menu-background-image, )))))); background-repeat: var(--mobile-hover-stack-menu-background-repeat, var(--mobile-stack-menu-background-repeat, var(--tablet-hover-stack-menu-background-repeat, var(--tablet-stack-menu-background-repeat, var(--desktop-hover-stack-menu-background-repeat, var(--desktop-stack-menu-background-repeat, , no-repeat)))))); background-position: var(--mobile-hover-stack-menu-background-position, var(--mobile-stack-menu-background-position, var(--tablet-hover-stack-menu-background-position, var(--tablet-stack-menu-background-position, var(--desktop-hover-stack-menu-background-position, var(--desktop-stack-menu-background-position, , center center)))))); background-size: var(--mobile-hover-stack-menu-background-size, var(--mobile-stack-menu-background-size, var(--tablet-hover-stack-menu-background-size, var(--tablet-stack-menu-background-size, var(--desktop-hover-stack-menu-background-size, var(--desktop-stack-menu-background-size, , cover)))))); background-attachment: var(--mobile-hover-stack-menu-background-attachment, var(--mobile-stack-menu-background-attachment, var(--tablet-hover-stack-menu-background-attachment, var(--tablet-stack-menu-background-attachment, var(--desktop-hover-stack-menu-background-attachment, var(--desktop-stack-menu-background-attachment, , cover)))))); transition: all 0.2s ease-in-out; } [elType='section'] > [elType='container'] > .oe-draggable-widget[eltype="stack"].hovered .oe-stack-widget-wrapper .oe-stack-menu button { pointer-events: all; position: relative; margin: 0px; display: flex; align-items: center; justify-content: center; cursor: pointer; text-decoration: none; background: transparent; color: var(--mobile-hover-stack-menu-button-color, var(--mobile-stack-menu-button-color, var(--tablet-hover-stack-menu-button-color, var(--tablet-stack-menu-button-color, var(--desktop-hover-stack-menu-button-color, var(--desktop-stack-menu-button-color, var(--default-button-color))))))); opacity: var(--mobile-hover-stack-menu-button-opacity, var(--mobile-stack-menu-button-opacity, var(--tablet-hover-stack-menu-button-opacity, var(--tablet-stack-menu-button-opacity, var(--desktop-hover-stack-menu-button-opacity, var(--desktop-stack-menu-button-opacity, var(--default-button-opacity))))))); padding: var(--mobile-hover-stack-menu-button-padding, var(--mobile-stack-menu-button-padding, var(--tablet-hover-stack-menu-button-padding, var(--tablet-stack-menu-button-padding, var(--desktop-hover-stack-menu-button-padding, var(--desktop-stack-menu-button-padding, var(--default-button-padding))))))); border-width: var(--mobile-hover-stack-menu-button-border-width, var(--mobile-stack-menu-button-border-width, var(--tablet-hover-stack-menu-button-border-width, var(--tablet-stack-menu-button-border-width, var(--desktop-hover-stack-menu-button-border-width, var(--desktop-stack-menu-button-border-width, var(--default-button-border-width))))))); border-style: var(--mobile-hover-stack-menu-button-border-style, var(--mobile-stack-menu-button-border-style, var(--tablet-hover-stack-menu-button-border-style, var(--tablet-stack-menu-button-border-style, var(--desktop-hover-stack-menu-button-border-style, var(--desktop-stack-menu-button-border-style, var(--default-button-border-style))))))); border-color: var(--mobile-hover-stack-menu-button-border-color, var(--mobile-stack-menu-button-border-color, var(--tablet-hover-stack-menu-button-border-color, var(--tablet-stack-menu-button-border-color, var(--desktop-hover-stack-menu-button-border-color, var(--desktop-stack-menu-button-border-color, var(--default-button-border-color))))))); border-radius: var(--mobile-hover-stack-menu-button-border-radius, var(--mobile-stack-menu-button-border-radius, var(--tablet-hover-stack-menu-button-border-radius, var(--tablet-stack-menu-button-border-radius, var(--desktop-hover-stack-menu-button-border-radius, var(--desktop-stack-menu-button-border-radius, var(--default-button-border-radius))))))); font-size: var(--mobile-hover-stack-menu-button-font-size, var(--mobile-stack-menu-button-font-size, var(--tablet-hover-stack-menu-button-font-size, var(--tablet-stack-menu-button-font-size, var(--desktop-hover-stack-menu-button-font-size, var(--desktop-stack-menu-button-font-size, var(--default-button-font-size))))))); opacity: var(--mobile-hover-stack-menu-button-opacity, var(--mobile-stack-menu-button-opacity, var(--tablet-hover-stack-menu-button-opacity, var(--tablet-stack-menu-button-opacity, var(--desktop-hover-stack-menu-button-opacity, var(--desktop-stack-menu-button-opacity, 1)))))); box-shadow: var(--mobile-hover-stack-menu-button-box-shadow, var(--mobile-stack-menu-button-box-shadow, var(--tablet-hover-stack-menu-button-box-shadow, var(--tablet-stack-menu-button-box-shadow, var(--desktop-hover-stack-menu-button-box-shadow, var(--desktop-stack-menu-button-box-shadow)))))); font-family: var(--mobile-hover-stack-menu-button-font-family, var(--mobile-stack-menu-button-font-family, var(--tablet-hover-stack-menu-button-font-family, var(--tablet-stack-menu-button-font-family, var(--desktop-hover-stack-menu-button-font-family, var(--desktop-stack-menu-button-font-family, var(--default-button-font-family))))))); font-weight: var(--mobile-hover-stack-menu-button-font-weight, var(--mobile-stack-menu-button-font-weight, var(--tablet-hover-stack-menu-button-font-weight, var(--tablet-stack-menu-button-font-weight, var(--desktop-hover-stack-menu-button-font-weight, var(--desktop-stack-menu-button-font-weight, var(--default-button-font-weight))))))); transform: scale(var(--mobile-hover-scale, var(--mobile-scale, var(--tablet-hover-scale, var(--tablet-scale, var(--desktop-hover-scale, var(--desktop-scale, , 1))))))); overflow: hidden; } [elType='section'] > [elType='container'] > .oe-draggable-widget[eltype="stack"].hovered .oe-stack-widget-wrapper .oe-stack-menu button .oe-button-html { text-align: center; position: relative; width: 100%; white-space: nowrap; text-align: var(--mobile-hover-label-text-align, var(--mobile-label-text-align, var(--tablet-hover-label-text-align, var(--tablet-label-text-align, var(--desktop-hover-label-text-align, var(--desktop-label-text-align, center)))))); } [elType='section'] > [elType='container'] > .oe-draggable-widget[eltype="stack"].hovered .oe-stack-widget-wrapper .oe-stack-menu button .oe-button-html .oe-button-image { font-size: var(--mobile-hover-stack-menu-button-image-size, var(--mobile-stack-menu-button-image-size, var(--tablet-hover-stack-menu-button-image-size, var(--tablet-stack-menu-button-image-size, var(--desktop-hover-stack-menu-button-image-size, var(--desktop-stack-menu-button-image-size, inherit)))))); } [elType='section'] > [elType='container'] > .oe-draggable-widget[eltype="stack"].hovered .oe-stack-widget-wrapper .oe-stack-menu button .oe-button-html .oe-button-image svg { fill: var(--mobile-hover-stack-menu-button-shape-fill, var(--mobile-stack-menu-button-shape-fill, var(--tablet-hover-stack-menu-button-shape-fill, var(--tablet-stack-menu-button-shape-fill, var(--desktop-hover-stack-menu-button-shape-fill, var(--desktop-stack-menu-button-shape-fill, , #666666)))))); stroke: var(--mobile-hover-stack-menu-button-shape-stroke, var(--mobile-stack-menu-button-shape-stroke, var(--tablet-hover-stack-menu-button-shape-stroke, var(--tablet-stack-menu-button-shape-stroke, var(--desktop-hover-stack-menu-button-shape-stroke, var(--desktop-stack-menu-button-shape-stroke, , #666666)))))); } [elType='section'] > [elType='container'] > .oe-draggable-widget[eltype="stack"].hovered .oe-stack-widget-wrapper .oe-stack-menu button > .oe-background { pointer-events: none; overflow: hidden; transition: all 0.2s ease-in-out; } [elType='section'] > [elType='container'] > .oe-draggable-widget[eltype="stack"].hovered .oe-stack-widget-wrapper .oe-stack-menu button > .oe-background:after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 1; box-shadow: var(--mobile-hover-stack-menu-button-box-shadow, var(--mobile-stack-menu-button-box-shadow, var(--tablet-hover-stack-menu-button-box-shadow, var(--tablet-stack-menu-button-box-shadow, var(--desktop-hover-stack-menu-button-box-shadow, var(--desktop-stack-menu-button-box-shadow)))))); } [elType='section'] > [elType='container'] > .oe-draggable-widget[eltype="stack"].hovered .oe-stack-widget-wrapper .oe-stack-menu button > .oe-background * { transition: all 0.2s ease-in-out; } [elType='section'] > [elType='container'] > .oe-draggable-widget[eltype="stack"].hovered .oe-stack-widget-wrapper .oe-stack-menu button > .oe-background .oe-background-fill { background-color: var(--mobile-hover-stack-menu-button-background-color, var(--mobile-stack-menu-button-background-color, var(--tablet-hover-stack-menu-button-background-color, var(--tablet-stack-menu-button-background-color, var(--desktop-hover-stack-menu-button-background-color, var(--desktop-stack-menu-button-background-color, , var(--default-button-background-color))))))); opacity: var(--mobile-hover-stack-menu-button-background-fill-opacity, var(--mobile-stack-menu-button-background-fill-opacity, var(--tablet-hover-stack-menu-button-background-fill-opacity, var(--tablet-stack-menu-button-background-fill-opacity, var(--desktop-hover-stack-menu-button-background-fill-opacity, var(--desktop-stack-menu-button-background-fill-opacity, , 1)))))); transition: all 0.2s ease-in-out; } [elType='section'] > [elType='container'] > .oe-draggable-widget[eltype="stack"].hovered .oe-stack-widget-wrapper .oe-stack-menu button > .oe-background .oe-background-gradient { opacity: var(--mobile-hover-stack-menu-button-background-gradient-opacity, var(--mobile-stack-menu-button-background-gradient-opacity, var(--tablet-hover-stack-menu-button-background-gradient-opacity, var(--tablet-stack-menu-button-background-gradient-opacity, var(--desktop-hover-stack-menu-button-background-gradient-opacity, var(--desktop-stack-menu-button-background-gradient-opacity, , 1)))))); background-image: var(--mobile-hover-stack-menu-button-background-gradient, var(--mobile-stack-menu-button-background-gradient, var(--tablet-hover-stack-menu-button-background-gradient, var(--tablet-stack-menu-button-background-gradient, var(--desktop-hover-stack-menu-button-background-gradient, var(--desktop-stack-menu-button-background-gradient, )))))); transition: all 0.2s ease-in-out; } [elType='section'] > [elType='container'] > .oe-draggable-widget[eltype="stack"].hovered .oe-stack-widget-wrapper .oe-stack-menu button > .oe-background .oe-background-image { opacity: var(--mobile-hover-stack-menu-button-background-image-opacity, var(--mobile-stack-menu-button-background-image-opacity, var(--tablet-hover-stack-menu-button-background-image-opacity, var(--tablet-stack-menu-button-background-image-opacity, var(--desktop-hover-stack-menu-button-background-image-opacity, var(--desktop-stack-menu-button-background-image-opacity, , 1)))))); background-image: var(--mobile-hover-stack-menu-button-background-image, var(--mobile-stack-menu-button-background-image, var(--tablet-hover-stack-menu-button-background-image, var(--tablet-stack-menu-button-background-image, var(--desktop-hover-stack-menu-button-background-image, var(--desktop-stack-menu-button-background-image, )))))); background-repeat: var(--mobile-hover-stack-menu-button-background-repeat, var(--mobile-stack-menu-button-background-repeat, var(--tablet-hover-stack-menu-button-background-repeat, var(--tablet-stack-menu-button-background-repeat, var(--desktop-hover-stack-menu-button-background-repeat, var(--desktop-stack-menu-button-background-repeat, , no-repeat)))))); background-position: var(--mobile-hover-stack-menu-button-background-position, var(--mobile-stack-menu-button-background-position, var(--tablet-hover-stack-menu-button-background-position, var(--tablet-stack-menu-button-background-position, var(--desktop-hover-stack-menu-button-background-position, var(--desktop-stack-menu-button-background-position, , center center)))))); background-size: var(--mobile-hover-stack-menu-button-background-size, var(--mobile-stack-menu-button-background-size, var(--tablet-hover-stack-menu-button-background-size, var(--tablet-stack-menu-button-background-size, var(--desktop-hover-stack-menu-button-background-size, var(--desktop-stack-menu-button-background-size, , cover)))))); background-attachment: var(--mobile-hover-stack-menu-button-background-attachment, var(--mobile-stack-menu-button-background-attachment, var(--tablet-hover-stack-menu-button-background-attachment, var(--tablet-stack-menu-button-background-attachment, var(--desktop-hover-stack-menu-button-background-attachment, var(--desktop-stack-menu-button-background-attachment, , cover)))))); transition: all 0.2s ease-in-out; } [elType='section'] > [elType='container'] > .oe-draggable-widget[eltype="stack"].hovered .oe-stack-widget-wrapper .oe-stack-menu button > .oe-background .oe-background-gradient { color: red; } [elType='section'] > [elType='container'] > .oe-draggable-widget[eltype="stack"].hovered .oe-stack-widget-wrapper .oe-stack-menu button:hover { color: var(--mobile-hover-stack-menu-button-color, var(--mobile-stack-menu-button-color, var(--tablet-hover-stack-menu-button-color, var(--tablet-stack-menu-button-color, var(--desktop-hover-stack-menu-button-color, var(--desktop-stack-menu-button-color, var(--default-button-color))))))); opacity: var(--mobile-hover-stack-menu-button-opacity, var(--mobile-stack-menu-button-opacity, var(--tablet-hover-stack-menu-button-opacity, var(--tablet-stack-menu-button-opacity, var(--desktop-hover-stack-menu-button-opacity, var(--desktop-stack-menu-button-opacity, var(--default-button-opacity))))))); padding: var(--mobile-hover-stack-menu-button-padding, var(--mobile-stack-menu-button-padding, var(--tablet-hover-stack-menu-button-padding, var(--tablet-stack-menu-button-padding, var(--desktop-hover-stack-menu-button-padding, var(--desktop-stack-menu-button-padding, var(--default-button-padding))))))); border-width: var(--mobile-hover-stack-menu-button-border-width, var(--mobile-stack-menu-button-border-width, var(--tablet-hover-stack-menu-button-border-width, var(--tablet-stack-menu-button-border-width, var(--desktop-hover-stack-menu-button-border-width, var(--desktop-stack-menu-button-border-width, var(--default-button-border-width))))))); border-style: var(--mobile-hover-stack-menu-button-border-style, var(--mobile-stack-menu-button-border-style, var(--tablet-hover-stack-menu-button-border-style, var(--tablet-stack-menu-button-border-style, var(--desktop-hover-stack-menu-button-border-style, var(--desktop-stack-menu-button-border-style, var(--default-button-border-style))))))); border-color: var(--mobile-hover-stack-menu-button-border-color, var(--mobile-stack-menu-button-border-color, var(--tablet-hover-stack-menu-button-border-color, var(--tablet-stack-menu-button-border-color, var(--desktop-hover-stack-menu-button-border-color, var(--desktop-stack-menu-button-border-color, var(--default-button-border-color))))))); border-radius: var(--mobile-hover-stack-menu-button-border-radius, var(--mobile-stack-menu-button-border-radius, var(--tablet-hover-stack-menu-button-border-radius, var(--tablet-stack-menu-button-border-radius, var(--desktop-hover-stack-menu-button-border-radius, var(--desktop-stack-menu-button-border-radius, var(--default-button-border-radius))))))); font-size: var(--mobile-hover-stack-menu-button-font-size, var(--mobile-stack-menu-button-font-size, var(--tablet-hover-stack-menu-button-font-size, var(--tablet-stack-menu-button-font-size, var(--desktop-hover-stack-menu-button-font-size, var(--desktop-stack-menu-button-font-size, var(--default-button-font-size))))))); opacity: var(--mobile-hover-stack-menu-button-opacity, var(--mobile-stack-menu-button-opacity, var(--tablet-hover-stack-menu-button-opacity, var(--tablet-stack-menu-button-opacity, var(--desktop-hover-stack-menu-button-opacity, var(--desktop-stack-menu-button-opacity, 1)))))); box-shadow: var(--mobile-hover-stack-menu-button-box-shadow, var(--mobile-stack-menu-button-box-shadow, var(--tablet-hover-stack-menu-button-box-shadow, var(--tablet-stack-menu-button-box-shadow, var(--desktop-hover-stack-menu-button-box-shadow, var(--desktop-stack-menu-button-box-shadow)))))); font-family: var(--mobile-hover-stack-menu-button-font-family, var(--mobile-stack-menu-button-font-family, var(--tablet-hover-stack-menu-button-font-family, var(--tablet-stack-menu-button-font-family, var(--desktop-hover-stack-menu-button-font-family, var(--desktop-stack-menu-button-font-family, var(--default-button-font-family))))))); font-weight: var(--mobile-hover-stack-menu-button-font-weight, var(--mobile-stack-menu-button-font-weight, var(--tablet-hover-stack-menu-button-font-weight, var(--tablet-stack-menu-button-font-weight, var(--desktop-hover-stack-menu-button-font-weight, var(--desktop-stack-menu-button-font-weight, var(--default-button-font-weight))))))); transform: scale(var(--mobile-hover-scale, var(--mobile-scale, var(--tablet-hover-scale, var(--tablet-scale, var(--desktop-hover-scale, var(--desktop-scale, , 1))))))); } [elType='section'] > [elType='container'] > .oe-draggable-widget[eltype="stack"].hovered .oe-stack-widget-wrapper .oe-stack-menu button:hover .oe-button-html .oe-button-image { font-size: var(--mobile-hover-stack-menu-button-image-size, var(--mobile-stack-menu-button-image-size, var(--tablet-hover-stack-menu-button-image-size, var(--tablet-stack-menu-button-image-size, var(--desktop-hover-stack-menu-button-image-size, var(--desktop-stack-menu-button-image-size, inherit)))))); } [elType='section'] > [elType='container'] > .oe-draggable-widget[eltype="stack"].hovered .oe-stack-widget-wrapper .oe-stack-menu button:hover .oe-button-html .oe-button-image svg { fill: var(--mobile-hover-stack-menu-button-shape-fill, var(--mobile-stack-menu-button-shape-fill, var(--tablet-hover-stack-menu-button-shape-fill, var(--tablet-stack-menu-button-shape-fill, var(--desktop-hover-stack-menu-button-shape-fill, var(--desktop-stack-menu-button-shape-fill, , #666666)))))); stroke: var(--mobile-hover-stack-menu-button-shape-stroke, var(--mobile-stack-menu-button-shape-stroke, var(--tablet-hover-stack-menu-button-shape-stroke, var(--tablet-stack-menu-button-shape-stroke, var(--desktop-hover-stack-menu-button-shape-stroke, var(--desktop-stack-menu-button-shape-stroke, , #666666)))))); } [elType='section'] > [elType='container'] > .oe-draggable-widget[eltype="stack"].hovered .oe-stack-widget-wrapper .oe-stack-menu button:hover > .oe-background { pointer-events: none; overflow: hidden; transition: all 0.2s ease-in-out; } [elType='section'] > [elType='container'] > .oe-draggable-widget[eltype="stack"].hovered .oe-stack-widget-wrapper .oe-stack-menu button:hover > .oe-background:after { box-shadow: var(--mobile-hover-stack-menu-button-box-shadow, var(--mobile-stack-menu-button-box-shadow, var(--tablet-hover-stack-menu-button-box-shadow, var(--tablet-stack-menu-button-box-shadow, var(--desktop-hover-stack-menu-button-box-shadow, var(--desktop-stack-menu-button-box-shadow)))))); } [elType='section'] > [elType='container'] > .oe-draggable-widget[eltype="stack"].hovered .oe-stack-widget-wrapper .oe-stack-menu button:hover > .oe-background * { transition: all 0.2s ease-in-out; } [elType='section'] > [elType='container'] > .oe-draggable-widget[eltype="stack"].hovered .oe-stack-widget-wrapper .oe-stack-menu button:hover > .oe-background .oe-background-fill { background-color: var(--mobile-hover-stack-menu-button-background-color, var(--mobile-stack-menu-button-background-color, var(--tablet-hover-stack-menu-button-background-color, var(--tablet-stack-menu-button-background-color, var(--desktop-hover-stack-menu-button-background-color, var(--desktop-stack-menu-button-background-color, , var(--default-button-background-color))))))); opacity: var(--mobile-hover-stack-menu-button-background-fill-opacity, var(--mobile-stack-menu-button-background-fill-opacity, var(--tablet-hover-stack-menu-button-background-fill-opacity, var(--tablet-stack-menu-button-background-fill-opacity, var(--desktop-hover-stack-menu-button-background-fill-opacity, var(--desktop-stack-menu-button-background-fill-opacity, , 1)))))); transition: all 0.2s ease-in-out; } [elType='section'] > [elType='container'] > .oe-draggable-widget[eltype="stack"].hovered .oe-stack-widget-wrapper .oe-stack-menu button:hover > .oe-background .oe-background-gradient { opacity: var(--mobile-hover-stack-menu-button-background-gradient-opacity, var(--mobile-stack-menu-button-background-gradient-opacity, var(--tablet-hover-stack-menu-button-background-gradient-opacity, var(--tablet-stack-menu-button-background-gradient-opacity, var(--desktop-hover-stack-menu-button-background-gradient-opacity, var(--desktop-stack-menu-button-background-gradient-opacity, , 1)))))); background-image: var(--mobile-hover-stack-menu-button-background-gradient, var(--mobile-stack-menu-button-background-gradient, var(--tablet-hover-stack-menu-button-background-gradient, var(--tablet-stack-menu-button-background-gradient, var(--desktop-hover-stack-menu-button-background-gradient, var(--desktop-stack-menu-button-background-gradient, )))))); transition: all 0.2s ease-in-out; } [elType='section'] > [elType='container'] > .oe-draggable-widget[eltype="stack"].hovered .oe-stack-widget-wrapper .oe-stack-menu button:hover > .oe-background .oe-background-image { opacity: var(--mobile-hover-stack-menu-button-background-image-opacity, var(--mobile-stack-menu-button-background-image-opacity, var(--tablet-hover-stack-menu-button-background-image-opacity, var(--tablet-stack-menu-button-background-image-opacity, var(--desktop-hover-stack-menu-button-background-image-opacity, var(--desktop-stack-menu-button-background-image-opacity, , 1)))))); background-image: var(--mobile-hover-stack-menu-button-background-image, var(--mobile-stack-menu-button-background-image, var(--tablet-hover-stack-menu-button-background-image, var(--tablet-stack-menu-button-background-image, var(--desktop-hover-stack-menu-button-background-image, var(--desktop-stack-menu-button-background-image, )))))); background-repeat: var(--mobile-hover-stack-menu-button-background-repeat, var(--mobile-stack-menu-button-background-repeat, var(--tablet-hover-stack-menu-button-background-repeat, var(--tablet-stack-menu-button-background-repeat, var(--desktop-hover-stack-menu-button-background-repeat, var(--desktop-stack-menu-button-background-repeat, , no-repeat)))))); background-position: var(--mobile-hover-stack-menu-button-background-position, var(--mobile-stack-menu-button-background-position, var(--tablet-hover-stack-menu-button-background-position, var(--tablet-stack-menu-button-background-position, var(--desktop-hover-stack-menu-button-background-position, var(--desktop-stack-menu-button-background-position, , center center)))))); background-size: var(--mobile-hover-stack-menu-button-background-size, var(--mobile-stack-menu-button-background-size, var(--tablet-hover-stack-menu-button-background-size, var(--tablet-stack-menu-button-background-size, var(--desktop-hover-stack-menu-button-background-size, var(--desktop-stack-menu-button-background-size, , cover)))))); background-attachment: var(--mobile-hover-stack-menu-button-background-attachment, var(--mobile-stack-menu-button-background-attachment, var(--tablet-hover-stack-menu-button-background-attachment, var(--tablet-stack-menu-button-background-attachment, var(--desktop-hover-stack-menu-button-background-attachment, var(--desktop-stack-menu-button-background-attachment, , cover)))))); transition: all 0.2s ease-in-out; } [elType='section'] > [elType='container'] > .oe-draggable-widget[eltype="stack"].hovered .oe-stack-widget-wrapper .oe-stack-menu button:hover > .oe-background .oe-background-gradient { color: red; } [elType='section'] > [elType='container'] > .oe-draggable-widget[eltype="stack"].hovered .oe-stack-widget-wrapper .oe-stack-menu button.selected { position: relative; pointer-events: all; margin: 0px; display: flex; align-items: center; justify-content: center; cursor: pointer; text-decoration: none; color: var(--mobile-selected-stack-menu-button-color, var(--mobile-stack-menu-button-color, var(--tablet-selected-stack-menu-button-color, var(--tablet-stack-menu-button-color, var(--desktop-selected-stack-menu-button-color, var(--desktop-stack-menu-button-color, var(--mobile-hover-stack-menu-button-color , var(--mobile-stack-menu-button-color , var(--tablet-stack-menu-button-color , var(--desktop-stack-menu-button-color, var(--default-button-color))))))))))); opacity: var(--mobile-selected-stack-menu-button-opacity, var(--mobile-stack-menu-button-opacity, var(--tablet-selected-stack-menu-button-opacity, var(--tablet-stack-menu-button-opacity, var(--desktop-selected-stack-menu-button-opacity, var(--desktop-stack-menu-button-opacity, var(--mobile-hover-stack-menu-button-opacity , var(--mobile-stack-menu-button-opacity , var(--tablet-stack-menu-button-opacity , var(--desktop-stack-menu-button-opacity, var(--default-button-opacity))))))))))); padding: var(--mobile-selected-stack-menu-button-padding, var(--mobile-stack-menu-button-padding, var(--tablet-selected-stack-menu-button-padding, var(--tablet-stack-menu-button-padding, var(--desktop-selected-stack-menu-button-padding, var(--desktop-stack-menu-button-padding, var(--mobile-hover-stack-menu-button-padding , var(--mobile-stack-menu-button-padding , var(--tablet-stack-menu-button-padding , var(--desktop-stack-menu-button-padding, var(--default-button-padding))))))))))); border-width: var(--mobile-selected-stack-menu-button-border-width, var(--mobile-stack-menu-button-border-width, var(--tablet-selected-stack-menu-button-border-width, var(--tablet-stack-menu-button-border-width, var(--desktop-selected-stack-menu-button-border-width, var(--desktop-stack-menu-button-border-width, var(--mobile-hover-stack-menu-button-border-width , var(--mobile-stack-menu-button-border-width , var(--tablet-stack-menu-button-border-width , var(--desktop-stack-menu-button-border-width, var(--default-button-border-width))))))))))); border-style: var(--mobile-selected-stack-menu-button-border-style, var(--mobile-stack-menu-button-border-style, var(--tablet-selected-stack-menu-button-border-style, var(--tablet-stack-menu-button-border-style, var(--desktop-selected-stack-menu-button-border-style, var(--desktop-stack-menu-button-border-style, var(--mobile-hover-stack-menu-button-border-style , var(--mobile-stack-menu-button-border-style , var(--tablet-stack-menu-button-border-style , var(--desktop-stack-menu-button-border-style, var(--default-button-border-style))))))))))); border-color: var(--mobile-selected-stack-menu-button-border-color, var(--mobile-stack-menu-button-border-color, var(--tablet-selected-stack-menu-button-border-color, var(--tablet-stack-menu-button-border-color, var(--desktop-selected-stack-menu-button-border-color, var(--desktop-stack-menu-button-border-color, var(--mobile-hover-stack-menu-button-border-color , var(--mobile-stack-menu-button-border-color , var(--tablet-stack-menu-button-border-color , var(--desktop-stack-menu-button-border-color, var(--default-button-border-color))))))))))); border-radius: var(--mobile-selected-stack-menu-button-border-radius, var(--mobile-stack-menu-button-border-radius, var(--tablet-selected-stack-menu-button-border-radius, var(--tablet-stack-menu-button-border-radius, var(--desktop-selected-stack-menu-button-border-radius, var(--desktop-stack-menu-button-border-radius, var(--mobile-hover-stack-menu-button-border-radius , var(--mobile-stack-menu-button-border-radius , var(--tablet-stack-menu-button-border-radius , var(--desktop-stack-menu-button-border-radius, var(--default-button-border-radius))))))))))); font-size: var(--mobile-selected-stack-menu-button-font-size, var(--mobile-stack-menu-button-font-size, var(--tablet-selected-stack-menu-button-font-size, var(--tablet-stack-menu-button-font-size, var(--desktop-selected-stack-menu-button-font-size, var(--desktop-stack-menu-button-font-size, var(--mobile-hover-stack-menu-button-font-size , var(--mobile-stack-menu-button-font-size , var(--tablet-stack-menu-button-font-size , var(--desktop-stack-menu-button-font-size, var(--default-button-font-size))))))))))); opacity: var(--mobile-selected-stack-menu-button-opacity, var(--mobile-stack-menu-button-opacity, var(--tablet-selected-stack-menu-button-opacity, var(--tablet-stack-menu-button-opacity, var(--desktop-selected-stack-menu-button-opacity, var(--desktop-stack-menu-button-opacity, 1)))))); box-shadow: var(--mobile-selected-stack-menu-button-box-shadow, var(--mobile-stack-menu-button-box-shadow, var(--tablet-selected-stack-menu-button-box-shadow, var(--tablet-stack-menu-button-box-shadow, var(--desktop-selected-stack-menu-button-box-shadow, var(--desktop-stack-menu-button-box-shadow)))))); font-family: var(--mobile-selected-stack-menu-button-font-family, var(--mobile-stack-menu-button-font-family, var(--tablet-selected-stack-menu-button-font-family, var(--tablet-stack-menu-button-font-family, var(--desktop-selected-stack-menu-button-font-family, var(--desktop-stack-menu-button-font-family, var(--mobile-hover-stack-menu-button-font-family , var(--mobile-stack-menu-button-font-family , var(--tablet-stack-menu-button-font-family , var(--desktop-stack-menu-button-font-family, var(--default-button-font-family))))))))))); font-weight: var(--mobile-selected-stack-menu-button-font-weight, var(--mobile-stack-menu-button-font-weight, var(--tablet-selected-stack-menu-button-font-weight, var(--tablet-stack-menu-button-font-weight, var(--desktop-selected-stack-menu-button-font-weight, var(--desktop-stack-menu-button-font-weight, var(--mobile-hover-stack-menu-button-font-weight , var(--mobile-stack-menu-button-font-weight , var(--tablet-stack-menu-button-font-weight , var(--desktop-stack-menu-button-font-weight, var(--default-button-font-weight))))))))))); transform: scale(var(--mobile-hover-scale, var(--mobile-scale, var(--tablet-hover-scale, var(--tablet-scale, var(--desktop-hover-scale, var(--desktop-scale, , 1))))))); overflow: hidden; } [elType='section'] > [elType='container'] > .oe-draggable-widget[eltype="stack"].hovered .oe-stack-widget-wrapper .oe-stack-menu button.selected .oe-button-html .oe-button-image { font-size: var(--mobile-selected-stack-menu-button-image-size, var(--mobile-stack-menu-button-image-size, var(--tablet-selected-stack-menu-button-image-size, var(--tablet-stack-menu-button-image-size, var(--desktop-selected-stack-menu-button-image-size, var(--desktop-stack-menu-button-image-size, inherit)))))); } [elType='section'] > [elType='container'] > .oe-draggable-widget[eltype="stack"].hovered .oe-stack-widget-wrapper .oe-stack-menu button.selected .oe-button-html .oe-button-image svg { fill: var(--mobile-selected-stack-menu-button-shape-fill, var(--mobile-stack-menu-button-shape-fill, var(--tablet-selected-stack-menu-button-shape-fill, var(--tablet-stack-menu-button-shape-fill, var(--desktop-selected-stack-menu-button-shape-fill, var(--desktop-stack-menu-button-shape-fill, , #666666)))))); stroke: var(--mobile-selected-stack-menu-button-shape-stroke, var(--mobile-stack-menu-button-shape-stroke, var(--tablet-selected-stack-menu-button-shape-stroke, var(--tablet-stack-menu-button-shape-stroke, var(--desktop-selected-stack-menu-button-shape-stroke, var(--desktop-stack-menu-button-shape-stroke, , #666666)))))); } [elType='section'] > [elType='container'] > .oe-draggable-widget[eltype="stack"].hovered .oe-stack-widget-wrapper .oe-stack-menu button.selected .oe-button-html { text-align: center; position: relative; width: 100%; text-align: var(--mobile-selected-label-text-align, var(--mobile-label-text-align, var(--tablet-selected-label-text-align, var(--tablet-label-text-align, var(--desktop-selected-label-text-align, var(--desktop-label-text-align, center)))))); } [elType='section'] > [elType='container'] > .oe-draggable-widget[eltype="stack"].hovered .oe-stack-widget-wrapper .oe-stack-menu button.selected > .oe-background { pointer-events: none; overflow: hidden; transition: all 0.2s ease-in-out; } [elType='section'] > [elType='container'] > .oe-draggable-widget[eltype="stack"].hovered .oe-stack-widget-wrapper .oe-stack-menu button.selected > .oe-background:after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 1; box-shadow: var(--mobile-selected-stack-menu-button-box-shadow, var(--mobile-stack-menu-button-box-shadow, var(--tablet-selected-stack-menu-button-box-shadow, var(--tablet-stack-menu-button-box-shadow, var(--desktop-selected-stack-menu-button-box-shadow, var(--desktop-stack-menu-button-box-shadow)))))); } [elType='section'] > [elType='container'] > .oe-draggable-widget[eltype="stack"].hovered .oe-stack-widget-wrapper .oe-stack-menu button.selected > .oe-background * { transition: all 0.2s ease-in-out; } [elType='section'] > [elType='container'] > .oe-draggable-widget[eltype="stack"].hovered .oe-stack-widget-wrapper .oe-stack-menu button.selected > .oe-background .oe-background-fill { background-color: var(--mobile-selected-stack-menu-button-background-color, var(--mobile-stack-menu-button-background-color, var(--tablet-selected-stack-menu-button-background-color, var(--tablet-stack-menu-button-background-color, var(--desktop-selected-stack-menu-button-background-color, var(--desktop-stack-menu-button-background-color, , var(--mobile-hover-stack-menu-button-background-color , var(--mobile-stack-menu-button-background-color , var(--tablet-stack-menu-button-background-color , var(--desktop-stack-menu-button-background-color, var(--default-button-background-color))))))))))); opacity: var(--mobile-selected-stack-menu-button-background-fill-opacity, var(--mobile-stack-menu-button-background-fill-opacity, var(--tablet-selected-stack-menu-button-background-fill-opacity, var(--tablet-stack-menu-button-background-fill-opacity, var(--desktop-selected-stack-menu-button-background-fill-opacity, var(--desktop-stack-menu-button-background-fill-opacity, , 1)))))); transition: all 0.2s ease-in-out; } [elType='section'] > [elType='container'] > .oe-draggable-widget[eltype="stack"].hovered .oe-stack-widget-wrapper .oe-stack-menu button.selected > .oe-background .oe-background-gradient { opacity: var(--mobile-selected-stack-menu-button-background-gradient-opacity, var(--mobile-stack-menu-button-background-gradient-opacity, var(--tablet-selected-stack-menu-button-background-gradient-opacity, var(--tablet-stack-menu-button-background-gradient-opacity, var(--desktop-selected-stack-menu-button-background-gradient-opacity, var(--desktop-stack-menu-button-background-gradient-opacity, , 1)))))); background-image: var(--mobile-selected-stack-menu-button-background-gradient, var(--mobile-stack-menu-button-background-gradient, var(--tablet-selected-stack-menu-button-background-gradient, var(--tablet-stack-menu-button-background-gradient, var(--desktop-selected-stack-menu-button-background-gradient, var(--desktop-stack-menu-button-background-gradient, )))))); transition: all 0.2s ease-in-out; } [elType='section'] > [elType='container'] > .oe-draggable-widget[eltype="stack"].hovered .oe-stack-widget-wrapper .oe-stack-menu button.selected > .oe-background .oe-background-image { opacity: var(--mobile-selected-stack-menu-button-background-image-opacity, var(--mobile-stack-menu-button-background-image-opacity, var(--tablet-selected-stack-menu-button-background-image-opacity, var(--tablet-stack-menu-button-background-image-opacity, var(--desktop-selected-stack-menu-button-background-image-opacity, var(--desktop-stack-menu-button-background-image-opacity, , 1)))))); background-image: var(--mobile-selected-stack-menu-button-background-image, var(--mobile-stack-menu-button-background-image, var(--tablet-selected-stack-menu-button-background-image, var(--tablet-stack-menu-button-background-image, var(--desktop-selected-stack-menu-button-background-image, var(--desktop-stack-menu-button-background-image, )))))); background-repeat: var(--mobile-selected-stack-menu-button-background-repeat, var(--mobile-stack-menu-button-background-repeat, var(--tablet-selected-stack-menu-button-background-repeat, var(--tablet-stack-menu-button-background-repeat, var(--desktop-selected-stack-menu-button-background-repeat, var(--desktop-stack-menu-button-background-repeat, , no-repeat)))))); background-position: var(--mobile-selected-stack-menu-button-background-position, var(--mobile-stack-menu-button-background-position, var(--tablet-selected-stack-menu-button-background-position, var(--tablet-stack-menu-button-background-position, var(--desktop-selected-stack-menu-button-background-position, var(--desktop-stack-menu-button-background-position, , center center)))))); background-size: var(--mobile-selected-stack-menu-button-background-size, var(--mobile-stack-menu-button-background-size, var(--tablet-selected-stack-menu-button-background-size, var(--tablet-stack-menu-button-background-size, var(--desktop-selected-stack-menu-button-background-size, var(--desktop-stack-menu-button-background-size, , cover)))))); background-attachment: var(--mobile-selected-stack-menu-button-background-attachment, var(--mobile-stack-menu-button-background-attachment, var(--tablet-selected-stack-menu-button-background-attachment, var(--tablet-stack-menu-button-background-attachment, var(--desktop-selected-stack-menu-button-background-attachment, var(--desktop-stack-menu-button-background-attachment, , cover)))))); transition: all 0.2s ease-in-out; } [elType='section'] > [elType='container'] > .oe-draggable-widget[eltype="stack"].hovered .oe-stack-widget-wrapper .oe-stack-menu button.selected > .oe-background .oe-background-gradient { color: red; } } /* 53a8ff */ /* 66b1ff */ /* 79bbff */ /* 8cc5ff */ /* a0cfff */ /* b3d8ff */ /* c6e2ff */ /* d9ecff */ /* ecf5ff */ .oe_navbar { position: relative; display: block; z-index: 999; padding-top: var(--desktop-navbar-padding, 20px); padding-bottom: var(--desktop-navbar-padding, 20px); box-shadow: var(--desktop-box-shadow); } .oe_navbar .oe-background { position: absolute; top: 0; right: 0; bottom: 0; left: 0; } .oe_navbar .oe-background .oe-background-fill { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background-color: var(--desktop-navbar-background-color, #dadada); opacity: var(--desktop-navbar-background-fill-opacity, 1); background-image: var(--desktop-navbar-background-image); } .oe_navbar .oe_navbar_container { display: grid; grid-area: 1/1/-1/-1; align-items: center; z-index: 1; position: relative; width: var(--width); } .oe_navbar .oe_navbar_container .navbar_logo { display: block; grid-row: 1/3; grid-column: 1/2; align-self: center; width: var(--desktop-navbar-logo-width, 100px); cursor: pointer; } .oe_navbar .oe_navbar_container .navbar_logo img { max-width: 100%; vertical-align: middle; -o-object-fit: contain; object-fit: contain; } .oe_navbar .oe_navbar_container .navbar_links { grid-row: 1/3; grid-column: 1/2; } .oe_navbar .oe_navbar_container .navbar_links a { text-decoration: none; text-transform: capitalize; color: var(--desktop-navmenu-color); margin-left: var(--desktop-navmenu-spacing, 10px); margin-right: var(--desktop-navmenu-spacing, 10px); font-size: var(--desktop-navmenu-font-size, 14px); font-family: var(--default-font-family); } .oe_navbar .oe_navbar_container .navbar_links a:last-child { margin-right: 0px !important; } .oe_navbar .oe_navbar_container .navbar_links a :last-child { margin-right: 0px !important; } .oe_navbar .oe_navbar_container .navbar_links a img { width: var(--desktop-navbar-logo-width, 100px); } .oe_navbar.logo-right.menu-right .navbar_links { padding-right: calc(var(--desktop-navbar-logo-width, 120px) + 20px); } .oe_navbar.logo-left.menu-left .navbar_links { padding-left: calc(var(--desktop-navbar-logo-width, 120px) + 20px); } .oe_navbar.logo-center.menu-center .navbar_links a:first-child { margin-left: 0px !important; } .mobile_navbar { display: none; } @media (min-width: 768px) and (max-width: 1024px) { .oe_navbar { box-shadow: var(--tablet-box-shadow, var(--desktop-box-shadow)); } .oe_navbar .oe_navbar_container { width: calc(100% - 40px); padding-left: 20px; padding-right: 20px; } } @media (min-width: 320px) and (max-width: 767px) { .oe_navbar .navbar_links { display: none; } .oe_navbar .oe_navbar_container { width: calc(100% - 40px); } .oe_navbar .mobile_navbar { display: block; position: absolute; right: 10px; top: calc(50% - 10px); left: 10px; } } .mobile_navbar { display: none; } .mobile_navbar .burger { position: relative; z-index: 9; display: inline-block; border: 0; background: none; outline: 0; padding: 0; cursor: pointer; right: 10px; position: absolute; border-bottom: 2px solid #333333; border-bottom-color: var(--desktop-navmenu-color); width: 28px; transition: border-bottom 1s ease-in-out; -webkit-transition: border-bottom 1s ease-in-out; } .mobile_navbar .burger::-moz-focus-inner { border: 0; padding: 0; } .mobile_navbar .burger:before { content: ""; display: block; border-bottom: 2px solid #333333; border-bottom-color: var(--desktop-navmenu-color); width: 100%; margin-bottom: 5px; transition: transform 0.5s ease-in-out; -webkit-transition: -webkit-transform 0.5s ease-in-out; } .mobile_navbar .burger:after { content: ""; display: block; border-bottom: 2px solid #333333; border-bottom-color: var(--desktop-navmenu-color); width: 100%; margin-bottom: 5px; transition: transform 0.5s ease-in-out; -webkit-transition: -webkit-transform 0.5s ease-in-out; } .mobile_navbar .burger-check { display: none; } .mobile_navbar .burger-check:checked ~ .burger { border-bottom: 2px solid transparent; transition: border-bottom 0.8s ease-in-out; -webkit-transition: border-bottom 0.8s ease-in-out; } .mobile_navbar .burger-check:checked ~ .burger:before { border-bottom-color: #ffffff; transform: rotate(-405deg) translateY(1px) translateX(-1px); transition: transform 0.5s ease-in-out; } .mobile_navbar .burger-check:checked ~ .burger:after { border-bottom-color: #ffffff; transform: rotate(405deg) translateY(-4px) translateX(-4px); transition: transform 0.5s ease-in-out; } .mobile_navbar .navigation { overflow: hidden; max-height: 0; position: fixed; display: none; background: #2d2d2d; transition: max-height 0.5s ease-in-out; z-index: 1; } .mobile_navbar .burger-check:checked ~ .navigation { max-height: 500px; padding: 10px; display: block; left: 5px; right: 5px; top: 10px; bottom: 10px; transition: max-height 0.5s ease-in-out; border-radius: 5px; box-shadow: 0 0px 25px rgba(0, 0, 0, 0.5); } .mobile_navbar ul { margin: 0; padding: 0; } .mobile_navbar li { list-style: none; font-size: 25px; padding: 5px 0; } .mobile_navbar li a { text-decoration: none; font-size: 15px; color: #ffffff; font-family: var(--default-font-family); } .mobile_navbar li a:hover { text-decoration: none; } .desktop_preview .oe_navbar:hover .navbar_links a .nav_bar_button_options, .tablet_preview .oe_navbar:hover .navbar_links a .nav_bar_button_options, .mobile_preview .oe_navbar:hover .navbar_links a .nav_bar_button_options { opacity: 1; transition: all .2s ease-in-out; } .desktop_preview .oe_navbar .navbar_links a, .tablet_preview .oe_navbar .navbar_links a, .mobile_preview .oe_navbar .navbar_links a { position: relative; } .desktop_preview .oe_navbar .navbar_links a .nav_bar_button_options, .tablet_preview .oe_navbar .navbar_links a .nav_bar_button_options, .mobile_preview .oe_navbar .navbar_links a .nav_bar_button_options { transition: all .2s ease-in-out; width: 14px; height: 14px; position: absolute; bottom: -16px; left: 0px; z-index: 9; cursor: pointer; background: #ffffff; border-radius: 20px; padding: 2px; pointer-events: all; opacity: 0; } .desktop_preview .oe_navbar .navbar_links a .nav_bar_button_options .navbar_button_pop, .tablet_preview .oe_navbar .navbar_links a .nav_bar_button_options .navbar_button_pop, .mobile_preview .oe_navbar .navbar_links a .nav_bar_button_options .navbar_button_pop { width: 14px; height: 14px; position: absolute; } .desktop_preview .oe_navbar .navbar_links a .nav_bar_button_options .navbar_button_pop *, .tablet_preview .oe_navbar .navbar_links a .nav_bar_button_options .navbar_button_pop *, .mobile_preview .oe_navbar .navbar_links a .nav_bar_button_options .navbar_button_pop * { pointer-events: none; } .desktop_preview .oe_navbar .navbar_links a .nav_bar_button_options .navbar_button_pop svg, .tablet_preview .oe_navbar .navbar_links a .nav_bar_button_options .navbar_button_pop svg, .mobile_preview .oe_navbar .navbar_links a .nav_bar_button_options .navbar_button_pop svg { width: 14px; } .desktop_preview .oe_navbar .navbar_links a.isActive, .tablet_preview .oe_navbar .navbar_links a.isActive, .mobile_preview .oe_navbar .navbar_links a.isActive { position: relative; } .desktop_preview .oe_navbar .navbar_links a.isActive:after, .tablet_preview .oe_navbar .navbar_links a.isActive:after, .mobile_preview .oe_navbar .navbar_links a.isActive:after { position: absolute; content: ""; top: -8px; left: -8px; width: 0px; height: 0px; border-left: 10px solid transparent; border-right: 10px solid transparent; border-top: 10px solid #7367f0; } .desktop_preview .oe_navbar .navbar_links a.isActive:before, .tablet_preview .oe_navbar .navbar_links a.isActive:before, .mobile_preview .oe_navbar .navbar_links a.isActive:before { content: "active"; color: #ffffff; font-size: 8px; position: absolute; top: -16px; left: -11px; z-index: 1; background-color: #7367f0; padding: 2px 2px; } .oe-modals { position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 999; } .oe-modals .oe_modal { position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 99; display: flex; align-items: center; justify-content: center; } .oe-modals .oe_modal .oe_modal_background { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0, 0, 0, 0.5); pointer-events: none; } .oe-modals .oe_modal .oe_modal_wrap { position: relative; z-index: 1; display: flex; box-sizing: border-box; box-shadow: var(--modal-box-shadow); padding: 10px; } .oe-modals .oe_modal .oe_modal_wrap > .oe-background { position: absolute; top: 0; right: 0; bottom: 0; left: 0; pointer-events: none; overflow: hidden; border-radius: var(--modal-border-radius, 5px); } .oe-modals .oe_modal .oe_modal_wrap > .oe-background .oe-background-fill { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background-color: var(--modal-background-color, #ffffff); opacity: var(--modal-background-fill-opacity, 1); } .oe-modals .oe_modal .oe_modal_wrap > .oe-background .oe-background-image { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background-image: var(--modal-background-image); background-repeat: var(--modal-background-repeat, no-repeat); background-position: var(--modal-background-position, center center); background-size: var(--modal-background-size, cover); background-attachment: var(--modal-background-attachment); opacity: var(--modal-background-image-opacity); } .oe-modals .oe_modal .oe_modal_wrap > .oe-background .oe-background-gradient { background-image: var(--modal-background-gradient); opacity: var(--modal-background-gradient-opacity, 1); } .oe-modals .oe_modal .oe_modal_wrap .oe-modal-cols { width: 100%; display: flex; pointer-events: all; } .oe-modals .oe_modal .oe_modal_wrap .oe-modal-cols [widgettype="flex"] { width: 100%; position: relative; } .oe-modals .oe_modal .oe_modal_wrap .oe-modal-cols [widgettype="flex"] .oe-flex-widget { position: relative; } .oe-modals .oe_modal .oe_modal_wrap .oe-modal-cols [widgettype="flex"] .oe-flex-widget.empty { background-color: transparent; } .oe-modals .oe_modal .oe_modal_wrap .oe-modal-cols [widgettype="flex"] .oe-flex-widget .empty-flex { min-height: 300px; background-color: transparent; position: relative; } .oe-modals .oe_modal .oe_modal_wrap .oe-modal-cols [widgettype="flex"] .oe-flex-widget .empty-flex .empty-block { display: none; } .modal_close { position: absolute; top: -30px; right: -30px; background: #383232; width: 30px; height: 30px; border-radius: 50px; display: flex; align-items: center; justify-content: center; opacity: 0.8; transition: all 0.2s ease-in-out; cursor: pointer; } .modal_close svg { fill: #f73535; } .modal_close:hover { opacity: 1; transition: all 0.2s ease-in-out; } .desktop_preview .oe-modals { display: block; pointer-events: none; } .desktop_preview .oe-modals .modal_wrap { display: block; height: 100%; } .desktop_preview .oe-modals .modal_wrap .oe_modal { pointer-events: all; } .oe-modal-cols [widgettype="flex"] { pointer-events: none; } .oe-modal-cols [widgettype="flex"] .oe-widget-overlay.flex { display: none; } .oe-modal-cols [widgettype="flex"] .oe-draggable-widget { pointer-events: all; } .oe-modal-cols [widgettype="flex"].boxEditing { outline: none !important; } .oe-modal-cols .hidedelete .oe-widget-overlay.flex .delete { display: none; } .oe-modal-cols .hidedelete .oe-widget-overlay.flex .resizer { display: none; } .oe-modal-cols .oe-widget-overlay.flex .options { top: -60px; } .oe-modal-cols .oe-widget-overlay.flex .resizer { display: none; } @media (min-width: 768px) and (max-width: 1024px) { .oe_modal_wrap { min-width: 50% !important; } } @media (min-width: 320px) and (max-width: 767px) { .oe_modal_wrap { width: 90% !important; } .oe_modal_wrap .oe-modal-cols { flex-direction: column; } } .oe-countdown { opacity: var(--desktop-opacity, 1); transition: all .2s linear; } .oe-countdown .countdown-wrap { display: flex; align-items: center; justify-content: space-between; flex-direction: row; width: 100%; height: 100%; } .oe-countdown .countdown-wrap .block { display: flex; align-items: center; justify-content: center; flex-direction: column; width: calc(25% - var(--desktop-block-spacing, 10px)); padding: 10px 10px; background: var(--block-background, #dadada); box-sizing: border-box; border-radius: var(--desktop-block-border-radius, 0px); border-color: var(--desktop-block-border-color, #333333); border-width: var(--desktop-block-border-width, 1px); border-style: var(--desktop-block-border-style, none); transition: all .2s linear; } .oe-countdown .countdown-wrap .block .digit { font-size: var(--desktop-digit-font-size, 30px); font-family: var(--desktop-digit-font-family, var(--default-font-family)); font-weight: normal; color: var(--digit-color, #333333); margin-bottom: var(--digit-bottom-margin); transition: all .2s linear; } .oe-countdown .countdown-wrap .block .text { font-size: var(--desktop-text-font-size, 15px); font-family: var(--desktop-text-font-family, var(--default-font-family)); color: var(--text-color, #333333); font-weight: normal; transition: all .2s linear; } @media (min-width: 768px) and (max-width: 1024px) { .oe-countdown { opacity: var(--tablet-opacity, var(--desktop-opacity, 1)); } .oe-countdown .countdown-wrap .block { width: calc(25% - var(--tablet-block-spacing, var(--desktop-block-spacing, 10px))); border-radius: var(--tablet-block-border-radius, var(--desktop-block-border-radius, 0px)); } .oe-countdown .countdown-wrap .block .digit { font-size: var(--tablet-digit-font-size, var(--desktop-digit-font-size, 30px)); font-family: var(--tablet-digit-font-family, var(--desktop-digit-font-family, var(--default-font-family))); } .oe-countdown .countdown-wrap .block .text { font-size: var(--tablet-text-font-size, var(--desktop-text-font-size, 15px)); font-family: var(--tablet-text-font-family, var(--desktop-text-font-family, var(--default-font-family))); } } @media (min-width: 320px) and (max-width: 767px) { [elType='section'] > [elType='container'] > .oe-draggable-widget[eltype="timer"] { width: var(--mobile-widget-width, calc(var(--dcw) * var(--desktop-gridArea-width) * 1rem)); height: var(--mobile-widget-width, calc(var(--dcw) * var(--desktop-gridArea-height) * 1rem)); min-width: var(--mobile-widget-width, inherit); min-height: var(--mobile-widget-height, inherit); max-width: var(--mobile-widget-width, 100%); max-height: var(--mobile-widget-height, 100%); align-self: var(--mobile-justify-content, center); } .oe-countdown { opacity: var(--mobile-opacity, var(--tablet-opacity, var(--desktop-opacity, 1))); } .oe-countdown .countdown-wrap .block { width: calc( 25% - var(--mobile-block-spacing, var(--tablet-block-spacing, var(--desktop-block-spacing, 10px)))); border-radius: var(--mobile-block-border-radius, var(--tablet-block-border-radius, var(--desktop-block-border-radius, 0px))); } .oe-countdown .countdown-wrap .block .digit { font-size: var(--mobile-digit-font-size, var(--tablet-digit-font-size, var(--desktop-digit-font-size, 30px))); font-family: var(--mobile-digit-font-family, var(--tablet-digit-font-family, var(--desktop-digit-font-family, var(--default-font-family)))); } .oe-countdown .countdown-wrap .block .text { font-size: var(--mobile-text-font-size, var(--tablet-text-font-size, var(--desktop-text-font-size, 15px))); font-family: var(--mobile-text-font-family, var(--tablet-text-font-family, var(--desktop-text-font-family, var(--default-font-family)))); } } /* 53a8ff */ /* 66b1ff */ /* 79bbff */ /* 8cc5ff */ /* a0cfff */ /* b3d8ff */ /* c6e2ff */ /* d9ecff */ /* ecf5ff */ .desktop_preview .gallery-item:hover, .tablet_preview .gallery-item:hover, .mobile_preview .gallery-item:hover { outline: 1px solid #7367f0; cursor: pointer; } .oe-widget-inner.oe-gallery-widget { position: absolute; display: block; pointer-events: none; padding: var(--desktop-padding, 0px); border-width: var(--desktop-border-width, 0px); border-style: var(--desktop-border-style, none); border-color: var(--desktop-border-color, #000000); border-radius: var(--desktop-border-radius, 0px); } .oe-widget-inner.oe-gallery-widget > .oe-background { position: absolute; top: 0; right: 0; bottom: 0; left: 0; pointer-events: none; } .oe-widget-inner.oe-gallery-widget > .oe-background .oe-background-fill { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background-color: var(--desktop-background-color); opacity: var(--desktop-background-fill-opacity, 1); } .oe-widget-inner.oe-gallery-widget > .oe-background .oe-background-image { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background-image: var(--desktop-background-image); background-repeat: var(--desktop-background-repeat, no-repeat); background-position: var(--desktop-background-position, center center); background-size: var(--desktop-background-size, cover); background-attachment: var(--desktop-background-attachment); opacity: var(--desktop-background-image-opacity); } .oe-widget-inner.oe-gallery-widget > .oe-background .oe-background-gradient { background-image: var(--desktop-background-gradient); opacity: var(--desktop-background-gradient-opacity, 1); } .oe-widget-inner.oe-gallery-widget .oe-gallery { display: grid; grid-auto-rows: 1fr; width: 100%; pointer-events: none; grid-template-columns: repeat(var(--desktop-columns, 6), 1fr); grid-gap: var(--desktop-gap); grid-template-rows: repeat(var(--desktop-rows), var(--desktop-row-height, 100%)); } .oe-widget-inner.oe-gallery-widget .oe-gallery:before { width: 100%; height: 100%; background-size: 400% 400%; grid-area: 1/1/1/1; padding-bottom: 100%; content: ""; } .oe-widget-inner.oe-gallery-widget .oe-gallery .gallery-item { position: relative; } .oe-widget-inner.oe-gallery-widget .oe-gallery .gallery-item:first-child { grid-area: 1/1/1/1; } .oe-widget-inner.oe-gallery-widget .oe-gallery .gallery-item img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; font-size: 0; object-fit: var(--gallery-object-fit, contain); pointer-events: none; } @media (min-width: 768px) and (max-width: 1024px) { .oe-widget-inner.oe-gallery-widget { padding: var(--tablet-padding, var(--desktop-padding, 0px)); border-width: var(--tablet-border-width, var(--desktop-border-width, 0px)); border-style: var(--tablet-border-style, var(--desktop-border-style, none)); border-color: var(--tablet-border-color, var(--desktop-border-color, #000000)); border-radius: var(--tablet-border-radius, var(--desktop-border-radius, 0)); } .oe-widget-inner.oe-gallery-widget .oe-gallery { grid-template-columns: repeat(var(--tablet-columns, var(--desktop-columns, 6)), 1fr); grid-gap: var(--tablet-gap, var(--desktop-gap)); } } @media (min-width: 320px) and (max-width: 767px) { .oe-widget-inner.oe-gallery-widget { position: relative; padding: var(--mobile-padding, var(--tablet-padding, var(--desktop-padding, 0px))); border-width: var(--mobile-border-width, var(--tablet-border-width, var(--desktop-border-width, 0px))); border-style: var(--mobile-border-style, var(--tablet-border-style, var(--desktop-border-style, none))); border-color: var(--mobile-border-color, var(--tablet-border-color, var(--desktop-border-color, #000000))); border-radius: var(--mobile-border-radius, var(--tablet-border-radius, var(--desktop-border-radius, 0))); } .oe-widget-inner.oe-gallery-widget .oe-gallery { grid-template-columns: repeat(var(--mobile-columns, var(--tablet-columns, var(--desktop-columns, 6))), 1fr); grid-gap: var(--mobile-gap, var(--tablet-gap, var(--desktop-gap))); grid-template-rows: unset; } } [widgettype="gallery"].boxEditing .gallery-item { pointer-events: all; } .fade-enter-active, .fade-leave-active { transition: opacity 0.2s; } .fade-enter, .fade-leave-to { opacity: 0; } .desktop_preview, .tablet_preview { padding-bottom: 100px; } body.body-paddinng-100 { padding-bottom: 100px; } body.body-paddinng-200 { padding-bottom: 200px; } body.body-paddinng-300 { padding-bottom: 300px; } body.body-paddinng-400 { padding-bottom: 400px; } .fade-enter-active, .fade-leave-active { transition: opacity 0.2s; } .fade-enter, .fade-leave-to { opacity: 0; } #site-lightbox-modal { transition: opacity 500ms ease 0s !important; display: none; position: fixed; z-index: 99999; padding-top: 100px; left: 0px; top: 0px; right: 0px; bottom: 0px; overflow: hidden; background-color: black; /* Position the "next button" to the right */ /* On hover, add a black background color with a little bit see-through */ /* Number text (1/3 etc) */ } #site-lightbox-modal #site-lightbox-modal-close { color: white; position: absolute; top: 10px; right: 25px; font-size: 35px; font-weight: bold; } #site-lightbox-modal #site-lightbox-modal-close:hover, #site-lightbox-modal #site-lightbox-modal-close:focus { color: #999; text-decoration: none; cursor: pointer; } #site-lightbox-modal #site-lightbox-modal-prev, #site-lightbox-modal #site-lightbox-modal-next { cursor: pointer; position: absolute; top: 50%; width: auto; padding: 16px; margin-top: -50px; color: white; font-weight: bold; font-size: 20px; transition: 0.6s ease; border-radius: 0 3px 3px 0; user-select: none; -webkit-user-select: none; } #site-lightbox-modal #site-lightbox-modal-next { right: 0; border-radius: 3px 0 0 3px; } #site-lightbox-modal #site-lightbox-modal-prev:hover, #site-lightbox-modal #site-lightbox-modal-next:hover { background-color: rgba(0, 0, 0, 0.8); } #site-lightbox-modal #site-lightbox-modal-content { padding-top: 50px; padding-bottom: 50px; position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px; transition: all calc(var(--lightbox-transition-duration, 500) * 1ms) var(--lightbox-transition-function, ease) 0s !important; transform: translateX(calc(var(--lightbox-active-slide, 0) * -100%)); display: flex; flex-direction: row; } #site-lightbox-modal #site-lightbox-modal-content .site-lightbox-modal-slide { display: flex; width: 100%; height: 100%; min-width: 100%; min-height: 100%; max-width: 100%; max-height: 100%; justify-content: center; }