/*
Themes included:

The default theme always loads as a basis.
Additional changes to the  default  theme
are done by adding more  classes  to  the
"zoom" class which triggers Zoom5. E.G.:
class="zoom light near small"


COLOR
	For changes in color there is:
	- light

BUTTON LAYOUT
	The position of the buttons can be
	changed with the following classes:
	- near
	- compact

BUTTON SIZE
	Additional button sizes are:
	- small
	- big
	- huge

BUTTON COLOR
	A different button color style with:
	- dark_buttons

*/


/* SETUP start */

:root {
	--Zoom5__grey_100: 100%;
	--Zoom5__grey_0: 0%;
}

@media (prefers-color-scheme: dark) {
	:root {
		--Zoom5__grey_100: 0%;
		--Zoom5__grey_0: 100%;
	}
}

	html body > div.Zoom5,
	html body > div.Zoom5 *
	{
		all: revert;
	}

	html body > div.Zoom5{
		position: fixed;
		left: 0;
		width: 100%;
		top: 0;
		height: 100%;
		max-height: 100%;
		max-width: 100%;
		/* table-layout: fixed; */
		z-index: 100000;
	}

	div.Zoom5 div.Zoom5_background{

		width: 100%;
		height: 100%;
		overflow: hidden;
		/* display: table-cell; */
		/* text-align: center; */
		vertical-align: middle;
		-webkit-backdrop-filter: blur(0px);
		backdrop-filter: blur(0px);
		transition: all .75s ease-out;
	}

	div.Zoom5[style="display: block;"] div.Zoom5_background{
		-webkit-backdrop-filter: blur(20px);
		backdrop-filter: blur(20px);
	}

	/* div.Zoom5 div.Zoom5_background *{
		text-align: inherit;
	} */

	div.Zoom5 div.Zoom5_content_container {
		/* display: flex; */
		position: relative;
		height: 100%;
		/* align-content: center; */
		/* align-items: center; */
		/* justify-content: center; */
	}

	div.Zoom5 div.Zoom5_content
	{
		position: relative;
		height: 100%;
    width: 100%;
    display: flex;
    align-content: center;
    align-items: center;
	}

	div.Zoom5 div.Zoom5_content > *{
		/* display: inline-block; */
		/* display: block; */
		max-width: calc(100vw - 6rem);
		max-height: calc(100vh - 6rem);
		margin: auto;

	}

	div.Zoom5 div.Zoom5_content > iframe{
		width: 100%;
		height: 100%;
	}

	div.Zoom5 div.Zoom5_next,
	div.Zoom5 div.Zoom5_prev,
	div.Zoom5 div.Zoom5_close{
		cursor: pointer;
	}

/* SETUP end */

/* DEFAULT LAYOUT start */

	div.Zoom5 div.Zoom5_current{
		/*position: fixed;*/
		/*left: 1em;*/
		/*bottom: 1em;*/
		/*min-width: 2em; */
		/*padding: 0 .25em; */
		/*height: 2em;*/
		/*line-height: 2em;*/
		display: inline-block;
	}

	div.Zoom5 div.Zoom5_count{
		/*position: fixed;*/
		/*right: 1em;*/
		/*bottom: 1em;*/
		/*min-width: 2em;*/
		/*padding: 0 .25em; */
		/*height: 2em;*/
		/*line-height: 2em;*/
		display: inline-block;
		margin-left: 1em;
		padding-left: 1em;
	}


	div.Zoom5 div.Zoom5_title{
		margin-top: 1em;
	}

	div.Zoom5 div.Zoom5_info{
		position: fixed;
		left: 4em;
		right: 4em;
		bottom: 1%;
		text-align: center;
		color: hsl(0,0%,90%);
	}

	div.Zoom5 div.Zoom5_next{
		position: fixed;
		top: 50%;
		height: 2em;
		width: 2em;
		margin-top: -.5em;
		right: 2%;
	}

	div.Zoom5 div.Zoom5_prev{
		position: fixed;
		top: 50%;
		height: 2em;
		width: 2em;
		margin-top: -.5em;
		left: 2%;
	}

	div.Zoom5 div.Zoom5_close{
		position: fixed;
		right: 2%;
		top: 2%;
		height: 2em;
		width: 2em;
	}

/* DEFAULT LAYOUT end */

/* DEFAULT VISUAL start */

	div.Zoom5 div.Zoom5_background{
		background: hsla(0,0%,var(--Zoom5__grey_100),.7);
	}

	div.Zoom5 div.Zoom5_current{
		font-size: 1em;
		text-align: center;
		color: hsla(0,0%,100%,.5);
		/*background: hsla(0,0%,50%,.8);*/
		/*border: solid .1em hsla(0,0%,0%,.25);*/
		/*border-radius: 1.5em; */
	}

	div.Zoom5 div.Zoom5_count{
		font-size: 1em;
		text-align: center;
		color: hsla(0,0%,100%,.25);
		border-left: solid .1em hsla(0,0%,100%,.25);
		/*background: hsla(0,0%,50%,.8);*/
		/*border: solid .1em hsla(0,0%,0%,.25);*/
		/*border-radius: 1.5em; */

	}

	div.Zoom5 div.Zoom5_content > *{
		box-shadow: 0 4px 8px hsla(0,0%,0%,.5), 0 16px 32px hsla(0,0%,0%,.5);
	}

	div.Zoom5 div.Zoom5_content iframe{
		border: none;
	}

	div.Zoom5 div.Zoom5_next{
		font-size: 1em;
		border: solid .15em transparent;
		border-radius: 1.5em;
	}

	div.Zoom5 div.Zoom5_next:hover{
		background: hsla(0,0%,0%,.5);
	}

	div.Zoom5 div.Zoom5_next:before{
		content: "";
		position: absolute;
		width: .9em;
		left: .35em;
		top: 50%;
		margin-top: -.44em;
		height: .9em;
		border-top: inherit;
		border-right: inherit;
		box-sizing:border-box;
		-webkit-transform: rotate(45deg);
		-moz-transform: rotate(45deg);
		-ms-transform: rotate(45deg);
		-o-transform: rotate(45deg);
		transform: rotate(45deg);
		border-color: hsla(0,0%,100%,.75);
	}

	div.Zoom5 div.Zoom5_prev{
		font-size: 1em;
		border: solid .15em transparent;
		border-radius: 1.5em;
	}

	div.Zoom5 div.Zoom5_prev:hover{
		background: hsla(0,0%,0%,.5);
	}

	div.Zoom5 div.Zoom5_prev:before{
		content: "";
		position: absolute;
		width: .9em;
		right: .35em;
		top: 50%;
		margin-top: -.44em;
		height: .9em;
		border-top: inherit;
		border-left: inherit;
		box-sizing:border-box;
		-webkit-transform: rotate(315deg);
		-moz-transform: rotate(315deg);
		-ms-transform: rotate(315deg);
		-o-transform: rotate(315deg);
		transform: rotate(315deg);
		border-color: hsla(0,0%,100%,.75);
	}

	div.Zoom5 div.Zoom5_prev:active:before,
	div.Zoom5 div.Zoom5_next:active:before{
		border-color: hsl(0,0%,100%);
	}

	div.Zoom5 div.Zoom5_close{
		line-height: 1.5em;
		border: solid .15em transparent;
		/*background: hsla(0,0%,0%,.25);*/
		border-radius: 1.5em;
		font-size: 1em;
	}

	div.Zoom5 div.Zoom5_close:hover{
		background: hsla(0,0%,0%,.5);
	}


	div.Zoom5 div.Zoom5_close:before,
	div.Zoom5 div.Zoom5_close:after{
		content: "";
		position: absolute;
		width: 70%;
		left: 15%;
		top: 50%;
		margin-top: -.05em;
		height: 0;
		border-top: inherit;
		-webkit-box-sizing:border-box;
		-moz-box-sizing:border-box;
		-ms-box-sizing:border-box;
		-o-box-sizing:border-box;
		box-sizing:border-box;
		border-color: hsl(0,0%,75%);
	}

	div.Zoom5 div.Zoom5_close:active:before,
	div.Zoom5 div.Zoom5_close:active:after{
		border-color: hsl(0,0%,100%);
	}

	div.Zoom5 div.Zoom5_close:before{
		-webkit-transform: rotate(315deg);
		-moz-transform: rotate(315deg);
		-ms-transform: rotate(315deg);
		-o-transform: rotate(315deg);
		transform: rotate(315deg);
	}

	div.Zoom5 div.Zoom5_close:after{
		-webkit-transform: rotate(45deg);
		-moz-transform: rotate(45deg);
		-ms-transform: rotate(45deg);
		-o-transform: rotate(45deg);
		transform: rotate(45deg);
	}

/* DEFAULT VISUAL end */


/* NEAR LAYOUT start */

	div.Zoom5.near .Zoom5_content_container
	{
		position: relative;
		display: inline-block;
	}

	div.Zoom5.near .Zoom5_background
	{
		padding: 3em;
	}

	div.Zoom5.near .Zoom5_close,
	div.Zoom5.near .Zoom5_prev,
	div.Zoom5.near .Zoom5_next
	/*div.Zoom5.near .Zoom5_count,*/
	/*div.Zoom5.near .Zoom5_current*/
	{
		position: absolute;
	}

	div.Zoom5.near .Zoom5_close
	{
		top: -2.4em;
		right: -2.5em;
	}

	div.Zoom5.near .Zoom5_next
	{
		right: -2.5em;
	}

	div.Zoom5.near .Zoom5_count
	{
		/*right: -2.4em;*/
		/*bottom: -2em;*/
	}


	div.Zoom5.near .Zoom5_prev
	{
		left: -2.5em;
	}

	div.Zoom5.near .Zoom5_current
	{
		/*left: -2.4em;*/
		/*bottom: -2em;*/
	}


/* NEAR LAYOUT end */

/* COMPACT LAYOUT start */

	div.Zoom5.compact .Zoom5_content_container
	{
		position: relative;
		display: inline-block;
	}

	div.Zoom5.compact .Zoom5_background
	{
		padding: 0;
	}

	div.Zoom5.compact .Zoom5_close,
	div.Zoom5.compact .Zoom5_prev,
	div.Zoom5.compact .Zoom5_next
	/*div.Zoom5.compact .Zoom5_count,*/
	/*div.Zoom5.compact .Zoom5_current*/
	{
		position: absolute;
	}

	div.Zoom5.compact .Zoom5_close
	{
		top: 1em;
		right: 1em;
	}

/* COMPACT LAYOUT end */

/* LIGHT VISUAL start */

	div.Zoom5.light > div.Zoom5_background
	{
		background: hsla(0,0%,100%,.75);
	}

	div.Zoom5 div.Zoom5_content > *{
		box-shadow: 0 4px 8px hsla(0,0%,0%,.15), 0 16px 32px hsla(0,0%,0%,.25);
		/*background: white;*/
	}

	div.Zoom5 div.Zoom5_content > div,
	div.Zoom5 div.Zoom5_content > span
	{
		box-shadow: none;
		/*background: white;*/
	}

	div.Zoom5.light div.Zoom5_next:before,
	div.Zoom5.light div.Zoom5_prev:before{
		border-color: hsl(0,0%,60%);
	}

	div.Zoom5.light div.Zoom5_next:active:before,
	div.Zoom5.light div.Zoom5_prev:active:before{
		border-color: hsl(0,0%,40%);
	}

	div.Zoom5.light div.Zoom5_next:hover,
	div.Zoom5.light div.Zoom5_prev:hover{
		background: hsl(0,0%,90%);
	}

	div.Zoom5.light div.Zoom5_close:hover{
		background: hsl(0,0%,90%);
	}

	div.Zoom5.light div.Zoom5_close:after,
	div.Zoom5.light div.Zoom5_close:before{
		border-color: hsl(0,0%,60%);
	}

	div.Zoom5.light div.Zoom5_close:active:after,
	div.Zoom5.light div.Zoom5_close:active:before{
		border-color: hsl(0,0%,40%);
	}

	div.Zoom5.light div.Zoom5_current{
		color: hsla(0,0%,0%,.5);
	}

	div.Zoom5.light div.Zoom5_count{
		color: hsla(0,0%,0%,.25);
		border-left: solid .1em hsla(0,0%,0%,.25);
	}


/* LIGHT VISUAL end */

/* DARK BUTTONS VISUAL start */

	div.Zoom5.dark_buttons .Zoom5_close,
	div.Zoom5.light.dark_buttons .Zoom5_close
	{
		background: black;
		border-color:white;
		box-shadow: 0 2px 4px hsla(0,0%,0%,.5);
	}

	div.Zoom5.dark_buttons .Zoom5_close:before,
	div.Zoom5.dark_buttons .Zoom5_close:after,
	div.Zoom5.light.dark_buttons .Zoom5_close:before,
	div.Zoom5.light.dark_buttons .Zoom5_close:after
	{
		border-color:white;
	}

	div.Zoom5.dark_buttons .Zoom5_next,
	div.Zoom5.dark_buttons .Zoom5_prev{
		background: black;
		border-color:white;
		box-shadow: 0 2px 4px hsla(0,0%,0%,.5);
	}

	div.Zoom5.dark_buttons div.Zoom5_next:before,
	div.Zoom5.dark_buttons div.Zoom5_prev:before{
		border-color: hsl(0,0%,100%);
	}


/* DARK BUTTONS VISUAL end */

/* SMALL VISUAL start */

	div.Zoom5.small .Zoom5_close,
	div.Zoom5.small .Zoom5_next,
	div.Zoom5.small .Zoom5_prev,
	div.Zoom5.small .Zoom5_current,
	div.Zoom5.small .Zoom5_count
	{
		font-size: .6em;
		border-width: .3em;
	}

/* SMALL VISUAL end */

/* BIG VISUAL start */

	div.Zoom5.big .Zoom5_close,
	div.Zoom5.big .Zoom5_next,
	div.Zoom5.big .Zoom5_prev,
	div.Zoom5.big .Zoom5_current,
	div.Zoom5.big .Zoom5_count
	{
		font-size: 1.6em;
		border-width: .1em;
	}

/* BIG VISUAL end */

/* HUGE VISUAL start */

	div.Zoom5.huge .Zoom5_close,
	div.Zoom5.huge .Zoom5_next,
	div.Zoom5.huge .Zoom5_prev,
	div.Zoom5.huge .Zoom5_current,
	div.Zoom5.huge .Zoom5_count
	{
		font-size: 3.0em;
		border-width: .1em;
	}

/* HUGE VISUAL end */