/*
 * Belongs to WordPress plugin: Image Projector
 * Plugin URI: http://www.image-projector.com
 *
 /
 /
 * SYSTEM STYLES
 * Styles that I may suggest you leave as is.
 * See user settings below.
*/

/*
 * Underlay
 */

#image-projector {
	position:fixed;
	overflow:hidden;
	width:100%;
	bottom:0px;
	top:0px;
	left:0px;
	display:none;
}

.cursor-busy {
	cursor:wait!important;
}
.ip-underlay-full {
	position:relative;
	overflow:hidden;
	width:100%;
	top:0px;
	left:0px;
	height:100%;
	touch-action:none;
	outline:none;

	-webkit-touch-callout: none;
	-webkit-user-drag: none;
	-webkit-user-select: none;
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);

	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;

}

#ip-underlay div {
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
    box-sizing: border-box;
}

#ip-image-container {
	position:absolute;
	overflow:hidden;
	bottom:0px;
	top:0px;
	left:0px;
	right:0px;
}
#ip-sliderwrapper {
	width:100%;
	height:100%;
  display: flex;
  align-items: center;
  justify-content: center;	
}
.grabbable {
	cursor: move; /* fallback if grab cursor is unsupported */
    cursor: -moz-grab;
    cursor: -webkit-grab;
    cursor: grab;
 }
.grabbable:active {
    cursor: -moz-grabbing;
    cursor: -webkit-grabbing;
    cursor: grabbing;
}

.ip-slide {
	position:absolute;
}
.ip-slide>img {
	position:absolute;
	width:100%;
	height:100%;
	max-width:none;
	max-height:none;

	-moz-user-select: none;
	-webkit-user-select: none;
	-ms-user-select: none;
	user-select: none;

	-webkit-user-drag: none;
}


/*
 * Captions
 */

.ip-slide-caption {
	position:absolute;
	bottom:0px;
	left:0px;
	width:100%;
	max-height:100%;
	height:-moz-fit-content;
	height:fit-content;

	font-size:16px;
	line-height:26px;
	color:white;
	background:rgba(0,0,0,.2);
	text-align:center;
	overflow:hidden;
	text-overflow:ellipsis;
	padding-left:10px;
	padding-right:10px;
	display:none;
}

.ip-slide-caption.ip-in-service {
	display:block;
}


/*
 * Message overlay
 */

#ip-overlay-wrapper {
	position:absolute;
	top:0px;
	left:0px;
	height:100%;
	width:100%;
	display:table;
	background-color: rgba(255, 255, 255, 0.8);
  -webkit-transition: opacity 1s;
     -moz-transition: opacity 1s;
      -ms-transition: opacity 1s;
       -o-transition: opacity 1s;
          transition: opacity 1s;
}

#ip-overlay-wrapper.ip-overlay-wrapper-hide {
	visibility:hidden;
	opacity:0;
	transition: visibility 0s, opacity 1s linear;

}
#ip-overlay-wrapper.ip-overlay-wrapper-show {
	visibility:visible;
	opacity:1;
	transition: visibility 0s, opacity 1s linear;
}
#ip-overlay-content {
	display:table-cell;
	font-size:16px;
	line-height:28px;
	vertical-align:middle;
	text-align:center;
}
#ip-overlay-message {
	padding:10px 10px 10px 10px;
}

.ip-opacity-on {
	opacity:1;
}

.ip-user-inactive {
  opacity: 0;
  -webkit-transition: opacity .4s;
     -moz-transition: opacity .4s;
      -ms-transition: opacity .4s;
       -o-transition: opacity .4s;
          transition: opacity .4s;
}
/*
* Thumbstrip
*/

#ip-thumbstrip-container {
	position:absolute;
	bottom:0px;
	left:0px;
	width:100%;
	-webkit-tap-highlight-color: transparent;
	box-sizing:border-box;
}

#ip-thumbstrip-container.cursor-idle {
	cursor:pointer;
}
#ip-thumbstrip-container.cursor-busy {
	cursor:wait;
}

#ip-thumbstrip-outerwrapper {
	overflow:hidden;
	height:100%;
	width:40000px;
	left:0px;

}
#ip-thumbstrip-innerwrapper {

	direction:ltr;
	overflow:hidden;
	display:flex;
	flex-flow:row nowrap;
	width:auto;
	touch-action:none;
	outline:none;


	-webkit-touch-callout: none;
	-webkit-user-drag: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
	-webkit-user-drag: none;
}
.ip-thumbwrapper{
	opacity:.9;
	display:inline-block;
	overflow:hidden;
	position:relative;
	background-color:rgba(155,155,155,.4);
}

.ip-thumbwrapper.style-normal {
	border-radius: 3px;
}
.ip-thumb-highlight{
	ztransform:scale(.95);
	ztransition:scale 0.9s ease;
	filter:brightness(120%);
}
.ip-thumbimg {
	display:flex;
	transition:all .2s ease;
}

#ip-thumbstrip-innerwrapper .ip-thumbwrapper.notouch img:hover{
	transform:scale(1.15);
	opacity:1;
}

.ip-thumbwrapper.ip-thumb-current  {
	opacity:1;
}

.ip-thumb-current-mark{
	position:absolute;
	bottom:0px;
	left:0px;
	width:100%;
	height:3px;
	background-color:rgba(230,0,0,.8);

	display:none;
}

.ip-thumbwrapper.style-square > .ip-aspect-portrait {
	height:100%;
	margin:0 auto;
}
.ip-thumbwrapper.style-square > .ip-aspect-landscape {
	position:absolute;
	width:100%;
	top:0;
	bottom:0;
	margin:auto;
}
.ip-thumbwrapper.style-square .ip-aspect-square {
	position:absolute;	
	width:100%;
	top:0;
	bottom:0;
	margin:auto;
}
.ip-thumbwrapper.style-normal > .ip-aspect-portrait {
	height:100%;
	width:auto;
}
.ip-thumbwrapper.style-normal > .ip-aspect-landscape {
	height:100%;
	width:auto;
}
.ip-n-aspect-wide {
	position:absolute;
	width:100%;
	top:0;
	bottom:0;
	margin:auto;
}
.ip-thumbwrapper.style-normal > .ip-aspect-square {
	height:100%;
}

#ip-short-message {
	display:none;
	opacity:0.9;
	position:absolute;
	transform-origin: center;
	left:50%;
    top:50%;
    transform:translate(-50%,-50%);
	border-bottom:1px solid #DDD;
	border-radius:4px;
	padding:10px 12px 10px 12px;
	color: rgb(94, 94, 94);
	background-color:#FAFAFA;
	box-shadow:#323232 2px 3px 7px 0px;
}
#ip-short-message ul {
	padding:0px;
	padding-left:20px;
	margin:0px;
}
/*
 * Menu
 */
 /* menu config */

.ip-xmenu {
	position:fixed;
	overflow:hidden;
	font-size:16px;
	cursor:default;
	background-color:#FAFAFA;
	display:none;
	box-shadow:#525252 1px 1px 3px 0px;
}

.ip-xmenu.ip-menu-item-active {
	display:block;
}
.ip-xmenu>ul {
	overflow:hidden;
	white-space: nowrap;
	list-style:none;
	padding:0px;
	min-width:160px;
	margin:3px;
}
.ip-xmenu>ul>li {
	margin:0px;
	margin-right:30px;
	text-align:left;
	display:list-item;
	height:40px;
	line-height:40px;
	width:100%;
	border-bottom:1px solid #DDD;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -khtml-user-select: none;
	user-select: none;
}
[dir="rtl"]  .ip-xmenu>ul>li {
	margin:0px;

	padding-right:20px;
}
.ip-xmenu>ul>li>i{
	padding-left:20px;
	padding-right:20px;
	padding-bottom:3px;
}

.ip-xmenu .ip-cmd-active  {
	color: rgb(64, 64, 64);
}
.ip-xmenu .ip-cmd-inactive  {
	color: rgb(172, 172, 172);
}
.ip-xmenu>ul>li.ip-cmd-active:hover {
	background-color:#EEEEEE;
}

.ip-xmenu>ul>li>div {
	margin-left:10px;
}
i.ip-auto-running {
	color: rgba(255,0,0,1);
}
/* Menu items */

.ip-cmd {
	color:#ACACAC;
}

/* Menu svg */

.ip-cmd span {
	margin-left:20px;
	text-align: left;
	pointer-events:none;
}
[dir="rtl"]  .ip-cmd span {
	float:right;
	text-align: right;
}

.ip-cmd div {
	display:inline-block;
	pointer-events:none;

}
[dir="rtl"] .ip-cmd div  {

	float:right;
	text-align: right;
}
.ip-cmd svg {
	display:inline-block;
	vertical-align:middle;
	padding-bottom:3px;
}
[dir="rtl"] svg {
	display:inline-block;
	vertical-align:middle;
	padding-bottom:3px;
	text-align:right;
}
.ip-xmenu .ip-icon-svg {
	width:28px;
	height:28px;
	margin:auto;
	display:inline-block;

}

.ip-xmenu .ip-cmd-active  svg {
	fill: rgb(64, 64, 64);
}
.ip-xmenu .ip-cmd-active .ip-icon-svg.ip-icon-help {
	fill: rgb(0, 176, 233);

}

.ip-xmenu .ip-cmd-inactive svg {
	fill: rgb(172, 172, 172);
}

.ip-hidden-dummy {
	display:none;
}
/* end Menu svg */

/*
 * Floating buttons
 */
 #ip-floating-buttons {
	position:absolute;
	top:0px;
	left:0px;
	width:100%;
	height:100%;
	display:flex;

 }

 .ip-button-group-flexbox {
	position:absolute;
	display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;

	flex-direction:column;
 }
#ip-buttons-left {
	left:10px;
	top:10px;
	flex-wrap: wrap;
	width:50px;
	height:258px;
	gap: 2px;
}
.ip-button-group-flexbox:hover {
	opacity:1;
}

#ip-buttons-right {
	right:10px;
	top:10px;
	flex-wrap: wrap-reverse;
	width:50px;
	height:206px;
	gap: 2px;
}

#ip-buttons-right-zoom {
	right:10px;
	top:10px;
	flex-wrap: wrap-reverse;
	width:50px;
	height:206px;
	gap: 2px;
	display:none;
}
 #ip-floating-buttons.zoom  #ip-buttons-left,
 #ip-floating-buttons.zoom  #ip-buttons-right,
 #ip-floating-buttons.zoom  #ip-item-count,
 #ip-floating-buttons.zoom  #ip-arrow-right,
 #ip-floating-buttons.zoom  #ip-arrow-left
 {
	 	display:none!important;
 }
#ip-floating-buttons.zoom  #ip-buttons-right-zoom,
#ip-floating-buttons.zoom  #ip-zoom-current
 {
	 	display:flex;
 }

@media screen and (max-height: 600px) {
	#ip-buttons-left.ip-arrows-present {
		width:102px;
		height:206px;
	}
	#ip-buttons-right.ip-arrows-present {
		width:102px;
		height:206px;
	}
}
@media screen and (max-height: 500px) {
	#ip-buttons-left.ip-arrows-present {

		width:102px;
		height:154px;
	}
	#ip-buttons-right.ip-arrows-present {
		width:102px;
		height:154px;
	}
}
@media screen and (max-height: 400px) {
	#ip-buttons-left {
		width:102px;
		height:154px;
	}
	#ip-buttons-right {
		width:102px;
		height:154px;
	}
	#ip-buttons-left.ip-arrows-present {
		width:206px;
		height:50px;
	}
	#ip-buttons-right.ip-arrows-present {
		width:206px;
		height:50px;
	}
}
@media screen and (max-height: 300px) {
	#ip-buttons-left {

		width:206px;
		height:50px;
		flex-direction:row;
	}
	#ip-buttons-right {
		width:102px;
		height:50px;
	}

}

.ip-cmd-hide
 {
	display:none!important;
}

.ip-floating-button {
	width:50px;
	height:50px;
	padding:7px;


	cursor:pointer;
	-webkit-transition: all .4s ease;
	-moz-transition: all .4s ease;
	-ms-transition: all .4s ease;
	-o-transition: all .4s ease;
	transition: all .4s ease;
	display:flex;
}
.ip-floating-button.display-on {
	display:flex;

}

.ip-floating-button.display-off, .ip-cmd.display-off {
	display:none;
}

.ip-icon-svg {
	width:40px;
	height:40px;
}

#ip-zoom-current {
	position:absolute;
	font-size:20px;
	font-weight:400;
	left:10px;
	top:10px;
	transition:none;
	display:none;
}
#ip-zoom-current:hover
{
	color:#CC1100;
}
[dir="rtl"] #ip-zoom-current {
	left:30px;
}
#ip-zoom-actual {
	position:absolute;
	left:10px;
	top:80px;
	transition: none;

}
#ip-zoom-actual>div {
	font-size:18px;
	font-weight:600;
	width:100%;
	height:100%;
	border: 2.5px solid grey;
	border-radius:4px;
	text-align:center;
	line-height:31px;
}

#ip-zoom-actual>div:hover
{
	border-color:#CC1100;
	color:#CC1100;
}

#ip-item-count {
	position:absolute;
	bottom:0px;
	height:50px;
	font-size:16px;
	font-weight:400;
	left:10px;
	padding-top:18px;
	width:-moz-fit-content;
	width:fit-content;

}
i
/*
* Fill colors for floating buttons
* Normal state color is set in plugin admin
*/
.ip-icon-svg:hover,
.ip-floating-button svg:hover ,
.ip-floating-button.zoom svg:hover
{
	fill:#CC1100;
	stroke:none;

}

.ip-floating-button.ip-cmd-inactive svg,
.ip-floating-button.ip-cmd-inactive svg:hover,
.ip-floating-button.ip-cmd-inactive svg:focus{
	fill-opacity:.3;
}

.ip-floating-button.display-off svg:hover{
	opacity:1;
}
/*
* Button positions
*/

/* Right side */


.ip-thumbstrip-toggle {
	display:none;
	right:5px;
	position:absolute;
	bottom:5px;
}
.ip-floating-button:hover {
	opacity:1;
}
.ip-thumbstrip-toggle:hover {
	opacity:1;
}
/*
 * Previous and next arrows
 */

#ip-arrow-left {
	position: absolute;
	transform-origin: center;
	left:5px;
	top:50%;

	transform:translateY(-50%);

}
#ip-arrow-right {
	position: absolute;
	transform-origin: center;
	right:5px;
	top:50%;
	transform:translateY(-50%);
}


/*
*	loading... indicator
*/
#ip-loader {
	display:none;
    font-size: 20px;
    position: absolute;
    width: 4em;
    height: 1em;
	transform-origin: center;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}
.ip-loader__dot {
    display: block;
    width: 1em;
    height: 1em;
    border-radius: .5em;
    background: rgba(51, 152, 183, .9);
    position: absolute;
    animation-duration: .5s;
    animation-timing-function: ease;
    animation-iteration-count: infinite
}
.ip-loader__dot:nth-child(1),
.ip-loader__dot:nth-child(2) {
    left: 0
}
.ip-loader__dot:nth-child(3) {
    left: 1.5em
}
@keyframes ip-loader-reveal {
    from {
        transform: scale(.001)
    }
    to {
        transform: scale(1)
    }
}
@keyframes ip-loader-slide {
    to {
        transform: translateX(1.5em)
    }
}
.ip-loader__dot:nth-child(1) {
    animation-name: ip-loader-reveal;
}
.ip-loader__dot:nth-child(2),
.ip-loader__dot:nth-child(3) {
    animation-name: ip-loader-slide;
}
.ip-loader__dot:nth-child(4) {
    left: 3em;
    animation-name: ip-loader-reveal;
    animation-direction: reverse;
}
/**
 * USER STYLES
 * styles that you may want to modify
 */


/* background styles - color of background */
.ip-underlay-dark {
	background-color:rgba(40, 40, 40, 1);
}

.ip-underlay-bright {
	background-color:rgba(250,250,250,1);

}


/* background style for square style no 1 */
.ip-view1 {
	box-shadow:#525252 1px 1px 3px 0px;
	background-color:rgb(255, 255, 250);
}

.ip-underlay-dark   .ip-view2 .ip-slide {
	box-shadow:#000 2px 3px 7px 0px;
}
/* style for full image view no 3 */
.ip-view3 .ip-slide{

}