/*
 * LC Lightbox Native - additions on top of LC Lightbox's own CSS.
 */

/* ---------------------------------------------------------------------------
   1. Zoom in on open, zoom out on close: every lightbox (images, iframes,
      video). Class "lcln-zoom" is added to the lightbox by the wrap_class option.
   --------------------------------------------------------------------------- */
@keyframes lcln-zoom-in {
	from { opacity: 0; transform: scale(.7); }
	to   { opacity: 1; transform: scale(1); }
}
@keyframes lcln-zoom-out {
	from { opacity: 1; transform: scale(1); }
	to   { opacity: 0; transform: scale(.7); }
}
#lcl_wrap.lcln-zoom #lcl_window {
	animation: lcln-zoom-in .4s cubic-bezier(.2, .8, .25, 1) backwards;
}
#lcl_wrap.lcln-zoom.lcl_is_closing #lcl_window {
	animation: lcln-zoom-out .3s cubic-bezier(.5, 0, .75, .4) forwards;
}
/* The dark backdrop fades in and out with the zoom. */
#lcl_wrap.lcln-zoom.lcl_pre_show #lcl_overlay,
#lcl_wrap.lcln-zoom.lcl_is_closing #lcl_overlay {
	opacity: 0 !important;
}
@media (prefers-reduced-motion: reduce) {
	#lcl_wrap.lcln-zoom #lcl_window { animation: none !important; }
}

/* ---------------------------------------------------------------------------
   2. Backgrounds: black behind every lightbox (the backdrop itself is black at
      90%, set in the plugin options).
   --------------------------------------------------------------------------- */
#lcl_wrap #lcl_window,
#lcl_wrap #lcl_subj,
#lcl_wrap .lcl_image_elem:before {
	background-color: #000 !important;
}

/* ---------------------------------------------------------------------------
   3. Border, rounded corners and shadow.
      The border itself is a real CSS border drawn by LC Lightbox (options
      border_w / border_col in lc-lightbox-native.php: 3px, #fd49a5 at 50%).
      Corners: 5px. Shadow: 12px right, 12px down, 32px blur, 10px spread,
      black at 90%. The window clips its contents to the rounded corners.
   --------------------------------------------------------------------------- */
html body #lcl_wrap #lcl_window,
html body #lcl_wrap #lcl_contents_wrap,
html body #lcl_wrap #lcl_subj,
html body #lcl_wrap #lcl_elem_wrap,
html body #lcl_wrap .lcl_image_elem,
html body #lcl_wrap .lcl_image_elem:before {
	border-radius: 5px !important;
}
html body #lcl_wrap #lcl_window {
	overflow: hidden !important;
	outline: none !important;
	box-shadow: 12px 12px 32px 10px rgba(0, 0, 0, .9) !important;
}

/* ---------------------------------------------------------------------------
   4. Previous / next arrows: a thin white chevron (2px line) in the middle of
      the left and right edges of the lightbox. On a computer they appear while
      the pointer is over the lightbox; on a phone or tablet they are always
      there, but faint.
   --------------------------------------------------------------------------- */
#lcl_wrap.lcl_nav_btn_middle .lcl_prev,
#lcl_wrap.lcl_nav_btn_middle .lcl_next {
	width: 44px;
	height: 64px;
	padding: 0;
	background: none !important;
	border: 0 !important;
	box-shadow: none !important;
	transform: none !important;
	transition: opacity .25s ease !important;
}
#lcl_wrap.lcl_nav_btn_middle .lcl_prev:after,
#lcl_wrap.lcl_nav_btn_middle .lcl_next:after {
	display: none !important;
}
#lcl_wrap.lcl_nav_btn_middle .lcl_prev:before,
#lcl_wrap.lcl_nav_btn_middle .lcl_next:before {
	content: "" !important;
	display: block;
	width: 24px;
	height: 48px;
	margin: 8px auto;
	padding: 0;
	font-size: 0 !important;
	line-height: 0 !important;
	text-indent: 0;
	background-repeat: no-repeat;
	background-position: center;
	background-size: 24px 48px;
}
#lcl_wrap.lcl_nav_btn_middle .lcl_prev:before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='48' viewBox='0 0 24 48'%3E%3Cpath d='M18 6 L6 24 L18 42' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
#lcl_wrap.lcl_nav_btn_middle .lcl_next:before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='48' viewBox='0 0 24 48'%3E%3Cpath d='M6 6 L18 24 L6 42' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
/* phones and tablets: always there, but faint */
#lcl_wrap.lcl_on_mobile.lcl_nav_btn_middle .lcl_prev,
#lcl_wrap.lcl_on_mobile.lcl_nav_btn_middle .lcl_next {
	opacity: .35 !important;
}

/* ---------------------------------------------------------------------------
   5. Swiping: while a finger (or the mouse) drags on a picture, the lightbox
      stays where it is. LC Lightbox still sees the swipe and changes the picture.
   --------------------------------------------------------------------------- */
#lcl_wrap.lcln-swiping #lcl_window {
	transform: none !important;
}

/* ---------------------------------------------------------------------------
   6. Keep the lightbox below the WordPress admin bar when it is showing.
      init.js measures the real height when the lightbox opens; this is the
      fallback for the moment before that. LC Lightbox subtracts the wrapper's
      padding when it works out the 95% size, so the window fits the space left.
   --------------------------------------------------------------------------- */
body.admin-bar #lcl_wrap {
	padding-top: 32px;
}
@media screen and (max-width: 782px) {
	body.admin-bar #lcl_wrap {
		padding-top: 46px;
	}
}

/* ---------------------------------------------------------------------------
   7. One toolbar (the "minimal" skin): a single translucent band across the top
      of the lightbox that holds the counter, play, zoom, caption and close
      buttons. On a computer it fades in while the pointer is over the lightbox.
      On a phone or tablet it is always there; tap the picture to hide it and tap
      again to bring it back (init.js toggles the "lcln-ui-hidden" class).
   --------------------------------------------------------------------------- */
#lcl_wrap.lcl_minimal #lcl_nav_cmd:before {
	background: rgba(0, 0, 0, .6);
	border-bottom: 1px solid rgba(255, 255, 255, .14);
}
/* Web pages and PDFs have controls of their own at the top, so the band stays
   put there (solid) and the page sits below it, instead of being covered. */
#lcl_wrap.lcl_minimal[lcl-type="iframe"] #lcl_nav_cmd:before {
	background: #111;
	opacity: 1 !important;
	transition: none !important;
}
#lcl_wrap.lcl_minimal[lcl-type="iframe"] #lcl_nav_cmd .lcl_icon:not(.lcl_prev):not(.lcl_next) {
	opacity: 1 !important;
	transform: none !important;
}
#lcl_wrap.lcl_minimal[lcl-type="iframe"] #lcl_subj {
	top: 42px;
}
/* phones and tablets: tap to hide / show the toolbar */
#lcl_wrap.lcl_on_mobile #lcl_nav_cmd:before,
#lcl_wrap.lcl_on_mobile #lcl_nav_cmd .lcl_icon,
#lcl_wrap.lcl_on_mobile #lcl_thumbs_nav {
	transition: opacity .2s ease;
}
#lcl_wrap.lcln-ui-hidden:not([lcl-type="iframe"]) #lcl_nav_cmd:before,
#lcl_wrap.lcln-ui-hidden:not([lcl-type="iframe"]) #lcl_nav_cmd .lcl_icon,
#lcl_wrap.lcln-ui-hidden:not([lcl-type="iframe"]) #lcl_thumbs_nav {
	opacity: 0 !important;
	pointer-events: none !important;
}

/* ---------------------------------------------------------------------------
   8. Changing pictures without a flash. By default LC Lightbox hides the whole
      picture area (and the toolbar) for a moment while it swaps pictures, and
      lays a cover over the new one, so the black background shows through.
      Here the old picture stays until the new one replaces it; the window still
      resizes with LC Lightbox's own animation. The loading spinner only appears
      if a picture takes more than about 0.7 s to load.
   --------------------------------------------------------------------------- */
#lcl_wrap[lcl-type="image"] .lcl_image_elem:before {
	display: none !important;
}
#lcl_wrap[lcl-type="image"].lcl_switching_elem #lcl_contents_wrap,
#lcl_wrap[lcl-type="image"].lcl_switching_elem:not(.lcl_outer_cmd) #lcl_nav_cmd {
	opacity: 1 !important;
}
#lcl_wrap[lcl-type="image"].lcl_switching_elem #lcl_loader:not(.no_loader) {
	transition-delay: .7s;
}

/* ---------------------------------------------------------------------------
   9. Captions. Normally under the picture (LC Lightbox option data_position
      'under'): LC makes room for the caption inside the lightbox window, the
      picture gets slightly smaller, the window stays the same size and the bar
      sits right under the picture. Photos in a block with the class
      caption-right or caption-left get the caption in a panel beside the
      picture instead (330px wide, full height; see section 10).
      Pictures without a caption are untouched. (If a picture is too small to
      fit a caption, LC falls back to showing it over the picture.)
      Captions may contain links, bold, italics, line breaks and small images.
   --------------------------------------------------------------------------- */
html body #lcl_wrap.lcl_txt_under:not(.lcl_force_txt_over) #lcl_txt {
	background: #505050 !important;
	margin: 0 !important;
	padding: 10px 16px 11px !important;
	font-size: 16px;
	text-align: center;
	border: 0 !important;
	border-radius: 0 0 5px 5px !important;
}
html body #lcl_wrap.lcl_txt_under:not(.lcl_force_txt_over) #lcl_txt:after,
html body #lcl_wrap.lcl_txt_under:not(.lcl_force_txt_over) #lcl_txt:before {
	display: none !important;
}
html body #lcl_wrap.lcl_txt_under:not(.lcl_force_txt_over) #lcl_txt > * {
	font-size: .8em;
	line-height: 1.4;
	text-align: center !important;
	border: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
}
html body #lcl_wrap.lcl_txt_under:not(.lcl_force_txt_over):not(.lcl_no_txt) #lcl_subj,
html body #lcl_wrap.lcl_txt_under:not(.lcl_force_txt_over):not(.lcl_no_txt) #lcl_elem_wrap,
html body #lcl_wrap.lcl_txt_under:not(.lcl_force_txt_over):not(.lcl_no_txt) .lcl_image_elem,
html body #lcl_wrap.lcl_txt_under:not(.lcl_force_txt_over):not(.lcl_no_txt) .lcl_image_elem:before {
	border-radius: 5px 5px 0 0 !important;
}

/* ---------------------------------------------------------------------------
   10. Caption beside the picture: caption-right / caption-left.
       Same grey as the caption bar, text left-aligned, full height of the
       picture. The picture's edge next to the panel is square; the panel's
       outer corners are rounded 5px.
   --------------------------------------------------------------------------- */
html body #lcl_wrap.lcl_txt_rside:not(.lcl_force_txt_over) #lcl_txt,
html body #lcl_wrap.lcl_txt_lside:not(.lcl_force_txt_over) #lcl_txt {
	background: #505050 !important;
	padding: 18px 20px !important;
	font-size: 16px;
	text-align: left;
	border: 0 !important;
}
html body #lcl_wrap.lcl_txt_rside:not(.lcl_force_txt_over) #lcl_txt {
	border-radius: 0 5px 5px 0 !important;
}
html body #lcl_wrap.lcl_txt_lside:not(.lcl_force_txt_over) #lcl_txt {
	border-radius: 5px 0 0 5px !important;
}
html body #lcl_wrap.lcl_txt_rside:not(.lcl_force_txt_over) #lcl_txt:after,
html body #lcl_wrap.lcl_txt_lside:not(.lcl_force_txt_over) #lcl_txt:after,
html body #lcl_wrap.lcl_txt_rside:not(.lcl_force_txt_over) #lcl_txt:before,
html body #lcl_wrap.lcl_txt_lside:not(.lcl_force_txt_over) #lcl_txt:before {
	display: none !important;
}
html body #lcl_wrap.lcl_txt_rside:not(.lcl_force_txt_over) #lcl_txt > *,
html body #lcl_wrap.lcl_txt_lside:not(.lcl_force_txt_over) #lcl_txt > * {
	font-size: 16px;
	line-height: 1.5;
	text-align: left !important;
	border: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
}
html body #lcl_wrap.lcl_txt_rside:not(.lcl_force_txt_over):not(.lcl_no_txt) #lcl_elem_wrap,
html body #lcl_wrap.lcl_txt_rside:not(.lcl_force_txt_over):not(.lcl_no_txt) .lcl_image_elem,
html body #lcl_wrap.lcl_txt_rside:not(.lcl_force_txt_over):not(.lcl_no_txt) .lcl_image_elem:before {
	border-radius: 5px 0 0 5px !important;
}
html body #lcl_wrap.lcl_txt_lside:not(.lcl_force_txt_over):not(.lcl_no_txt) #lcl_elem_wrap,
html body #lcl_wrap.lcl_txt_lside:not(.lcl_force_txt_over):not(.lcl_no_txt) .lcl_image_elem,
html body #lcl_wrap.lcl_txt_lside:not(.lcl_force_txt_over):not(.lcl_no_txt) .lcl_image_elem:before {
	border-radius: 0 5px 5px 0 !important;
}

/* ---------------------------------------------------------------------------
   11. What may be inside a caption (all caption styles): white text, links in
       light pink with an underline, paragraphs with a little space between,
       images never wider than the caption (an icon keeps the size you gave it).
   --------------------------------------------------------------------------- */
html body #lcl_wrap:not(.lcl_force_txt_over) #lcl_txt,
html body #lcl_wrap:not(.lcl_force_txt_over) #lcl_txt * {
	color: #fff;
}
html body #lcl_wrap:not(.lcl_force_txt_over) #lcl_txt a {
	color: #ff9ad0;
	text-decoration: underline;
}
html body #lcl_wrap:not(.lcl_force_txt_over) #lcl_txt a:hover {
	color: #fff;
}
html body #lcl_wrap:not(.lcl_force_txt_over) #lcl_txt p {
	margin: 0 0 .6em !important;
}
html body #lcl_wrap:not(.lcl_force_txt_over) #lcl_txt p:last-child {
	margin-bottom: 0 !important;
}
html body #lcl_wrap:not(.lcl_force_txt_over) #lcl_txt img {
	max-width: 100%;
	height: auto;
	vertical-align: middle;
	display: inline-block;
}

/* ---------------------------------------------------------------------------
   12. Photos with caption-right / caption-left: the caption is only shown in
       the lightbox, not on the page (the lightbox reads it from the block, so it
       can stay in the block). A whole-gallery caption (under the gallery) stays.
   --------------------------------------------------------------------------- */
.caption-right figcaption:not(.blocks-gallery-caption),
.caption-left figcaption:not(.blocks-gallery-caption) {
	display: none !important;
}