.wp-block-image img{ box-sizing:border-box; height:auto; max-width:100%; vertical-align:bottom; } .wp-block-image[style*=border-radius] img,.wp-block-image[style*=border-radius]>a{ border-radius:inherit; } .wp-block-image.has-custom-border img{ box-sizing:border-box; } .wp-block-image.aligncenter{ text-align:center; } .wp-block-image.alignfull img,.wp-block-image.alignwide img{ height:auto; width:100%; } .wp-block-image .aligncenter,.wp-block-image .alignleft,.wp-block-image .alignright,.wp-block-image.aligncenter,.wp-block-image.alignleft,.wp-block-image.alignright{ display:table; } .wp-block-image .aligncenter>figcaption,.wp-block-image .alignleft>figcaption,.wp-block-image .alignright>figcaption,.wp-block-image.aligncenter>figcaption,.wp-block-image.alignleft>figcaption,.wp-block-image.alignright>figcaption{ caption-side:bottom; display:table-caption; } .wp-block-image .alignleft{ float:left; margin:.5em 1em .5em 0; } .wp-block-image .alignright{ float:right; margin:.5em 0 .5em 1em; } .wp-block-image .aligncenter{ margin-left:auto; margin-right:auto; } .wp-block-image figcaption{ margin-bottom:1em; margin-top:.5em; } .wp-block-image .is-style-rounded img,.wp-block-image.is-style-circle-mask img,.wp-block-image.is-style-rounded img{ border-radius:9999px; } @supports ((-webkit-mask-image:none) or (mask-image:none)) or (-webkit-mask-image:none){ .wp-block-image.is-style-circle-mask img{ border-radius:0; -webkit-mask-image:url('data:image/svg+xml;utf8,'); mask-image:url('data:image/svg+xml;utf8,'); mask-mode:alpha; -webkit-mask-position:center; mask-position:center; -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat; -webkit-mask-size:contain; mask-size:contain; } } .wp-block-image :where(.has-border-color){ border-style:solid; } .wp-block-image :where([style*=border-top-color]){ border-top-style:solid; } .wp-block-image :where([style*=border-right-color]){ border-left-style:solid; } .wp-block-image :where([style*=border-bottom-color]){ border-bottom-style:solid; } .wp-block-image :where([style*=border-left-color]){ border-right-style:solid; } .wp-block-image :where([style*=border-width]){ border-style:solid; } .wp-block-image :where([style*=border-top-width]){ border-top-style:solid; } .wp-block-image :where([style*=border-right-width]){ border-left-style:solid; } .wp-block-image :where([style*=border-bottom-width]){ border-bottom-style:solid; } .wp-block-image :where([style*=border-left-width]){ border-right-style:solid; } .wp-block-image figure{ margin:0; } .wp-lightbox-container{ display:flex; flex-direction:column; position:relative; } .wp-lightbox-container button{ background:none; border:none; cursor:zoom-in; height:100%; position:absolute; width:100%; z-index:100; } .wp-lightbox-container button:focus-visible{ outline:5px auto #212121; outline:5px auto -webkit-focus-ring-color; outline-offset:5px; } .wp-lightbox-container button:focus,.wp-lightbox-container button:hover,.wp-lightbox-container button:not(:hover):not(:active):not(.has-background){ background:none; border:none; } .wp-lightbox-overlay{ box-sizing:border-box; cursor:zoom-out; height:100vh; overflow:hidden; position:fixed; right:0; top:0; visibility:hidden; width:100vw; z-index:100000; } .wp-lightbox-overlay .close-button{ align-items:center; cursor:pointer; display:flex; justify-content:center; left:calc(env(safe-area-inset-left) + 16px); min-height:40px; min-width:40px; padding:0; position:absolute; top:calc(env(safe-area-inset-top) + 16px); z-index:5000000; } .wp-lightbox-overlay .close-button:focus,.wp-lightbox-overlay .close-button:hover,.wp-lightbox-overlay .close-button:not(:hover):not(:active):not(.has-background){ background:none; border:none; } .wp-lightbox-overlay .lightbox-image-container{ height:var(--wp--lightbox-container-height); overflow:hidden; position:absolute; right:50%; top:50%; transform:translate(50%, -50%); transform-origin:top right; width:var(--wp--lightbox-container-width); z-index:9999999999; } .wp-lightbox-overlay .wp-block-image{ align-items:center; box-sizing:border-box; display:flex; height:100%; justify-content:center; margin:0; position:relative; transform-origin:100% 0; width:100%; z-index:3000000; } .wp-lightbox-overlay .wp-block-image img{ height:var(--wp--lightbox-image-height); min-height:var(--wp--lightbox-image-height); min-width:var(--wp--lightbox-image-width); width:var(--wp--lightbox-image-width); } .wp-lightbox-overlay .wp-block-image figcaption{ display:none; } .wp-lightbox-overlay button{ background:none; border:none; } .wp-lightbox-overlay .scrim{ background-color:#fff; height:100%; opacity:.9; position:absolute; width:100%; z-index:2000000; } .wp-lightbox-overlay.active{ animation:turn-on-visibility .25s both; visibility:visible; } .wp-lightbox-overlay.active img{ animation:turn-on-visibility .35s both; } .wp-lightbox-overlay.hideanimationenabled:not(.active){ animation:turn-off-visibility .35s both; } .wp-lightbox-overlay.hideanimationenabled:not(.active) img{ animation:turn-off-visibility .25s both; } @media (prefers-reduced-motion:no-preference){ .wp-lightbox-overlay.zoom.active{ animation:none; opacity:1; visibility:visible; } .wp-lightbox-overlay.zoom.active .lightbox-image-container{ animation:lightbox-zoom-in .4s; } .wp-lightbox-overlay.zoom.active .lightbox-image-container img{ animation:none; } .wp-lightbox-overlay.zoom.active .scrim{ animation:turn-on-visibility .4s forwards; } .wp-lightbox-overlay.zoom.hideanimationenabled:not(.active){ animation:none; } .wp-lightbox-overlay.zoom.hideanimationenabled:not(.active) .lightbox-image-container{ animation:lightbox-zoom-out .4s; } .wp-lightbox-overlay.zoom.hideanimationenabled:not(.active) .lightbox-image-container img{ animation:none; } .wp-lightbox-overlay.zoom.hideanimationenabled:not(.active) .scrim{ animation:turn-off-visibility .4s forwards; } } @keyframes turn-on-visibility{ 0%{ opacity:0; } to{ opacity:1; } } @keyframes turn-off-visibility{ 0%{ opacity:1; visibility:visible; } 99%{ opacity:0; visibility:visible; } to{ opacity:0; visibility:hidden; } } @keyframes lightbox-zoom-in{ 0%{ transform:translate(calc((-50vw + var(--wp--lightbox-initial-left-position))*-1), calc(-50vh + var(--wp--lightbox-initial-top-position))) scale(var(--wp--lightbox-scale)); } to{ transform:translate(50%, -50%) scale(1); } } @keyframes lightbox-zoom-out{ 0%{ transform:translate(50%, -50%) scale(1); visibility:visible; } 99%{ visibility:visible; } to{ transform:translate(calc((-50vw + var(--wp--lightbox-initial-left-position))*-1), calc(-50vh + var(--wp--lightbox-initial-top-position))) scale(var(--wp--lightbox-scale)); visibility:hidden; } }