/* MARKUP */

.lightbox-gallery a {
	width: 100%;
	height: 100%;
}

/* LIGHTBOX */

html.lg-on {
	overflow: hidden;
}

.lg-backdrop,
.lg-backdrop.in,
.lg-outer,
.lg-toolbar,
.lg-sub-html {
	background-color: rgba(255, 255, 255, 1) !important;
}

.lg-toolbar {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: reverse;
        -ms-flex-flow: row-reverse wrap;
            flex-flow: row-reverse wrap;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
}

.lg-toolbar .lg-icon {
	width: 25px !important;
	color: rgb(138, 138, 138, 1) !important;
	padding: 0 !important;
}

.lg-toolbar .lg-icon:hover {
	color: rgb(10, 10, 10, 1) !important;
}

.lg-sub-html {
	text-align: right !important;
	color: #0a0a0a !important;
	padding: 0 !important;
}

.lg-sub-html p {
	font-size: 1.1rem !important;
	margin: 0 !important;
}

.lg-actions .lg-next, 
.lg-actions .lg-prev {
    background-color: rgb(138, 138, 138, 0.9) !important;
    color: rgba(255, 255, 255, 1) !important;
	margin: 0 !important;
}

.lg-actions .lg-prev {
	left: 0;
}

.lg-actions .lg-next {
	right: 0;
}


.lg-outer.lg-grab img.lg-object {
	cursor: -webkit-zoom-in !important;
	cursor: -moz-zoom-in !important;
	cursor: -o-zoom-in !important;
	cursor: -ms-zoom-in !important;
	cursor: zoom-in !important;
}

.lg-outer.lg-grab img.lg-object.zoomed-in {
	cursor: -webkit-zoom-out !important;
	cursor: -moz-zoom-out !important;
	cursor: -o-zoom-out !important;
	cursor: -ms-zoom-out !important;
	cursor: zoom-out !important;
}

/*
.lg-zoomed #lg-zoom-in {
	opacity: 0.5 !important;
	pointer-events: none !important;
}
*/

.lg-progress-bar {
	display: none !important;	
}


@media only screen and (min-width: 1024px) {	

	.lg-outer {
		width: 90%;
		max-width: 90% !important;
		left: 5%;
		height: 80%;
		max-height: 80% !important;
		top: 10%;
	}

	.lg-toolbar {
		position: fixed !important;
		right: 2%;
		left: auto;
		top: 2.5%;
		bottom: auto;
		width: 175px;
		max-width: 25%;
		height: auto;
		max-height: 7%;
	}
	
	.lg-sub-html {
		position: fixed !important;
		right: 2%;
		left: auto;
		bottom: 2.5%;
		top: auto;
		width: auto;
		max-width: 100%;
		height: auto;
		max-height: 7%;
	}
	
}

@media only screen and (min-width: 768px) and (max-width: 1023px) and (orientation: portrait) {

	.lg-outer {
		width: 90%;
		max-width: 90% !important;
		left: 5%;
		height: 80%;
		max-height: 80% !important;
		top: 10%;
	}

	.lg-toolbar {
		position: fixed !important;
		right: 2%;
		left: auto;
		top: 2.5%;
		bottom: auto;
		width: 175px;
		max-width: 25%;
		height: auto;
		max-height: 7%;
	}
	
	.lg-sub-html {
		position: fixed !important;
		right: 2%;
		left: auto;
		bottom: 2.5%;
		top: auto;
		width: auto;
		max-width: 100%;
		height: auto;
		max-height: 7%;
	}
	
}

@media only screen and (min-width: 768px) and (max-width: 1023px) and (orientation: landscape) {

	.lg-outer {
		width: 90%;
		max-width: 90% !important;
		left: 5%;
		height: 80%;
		max-height: 80% !important;
		top: 10%;
	}

	.lg-toolbar {
		position: fixed !important;
		right: 2%;
		left: auto;
		top: 2%;
		bottom: auto;
		width: 175px;
		max-width: 25%;
		height: auto;
		max-height: 7%;
	}
	
	.lg-sub-html {
		position: fixed !important;
		right: 2%;
		left: auto;
		bottom: 2%;
		top: auto;
		width: auto;
		max-width: 100%;
		height: auto;
		max-height: 7%;
	}
	
}

@media only screen and (max-width: 767px) and (orientation: portrait) {

	.lg-outer {
		width: 100%;
		max-width: 100% !important;
		height: 80%;
		max-height: 80% !important;
		top: 10%;
	}

	.lg-toolbar {
		position: fixed !important;
		right: 2%;
		left: auto;
		top: 2.5%;
		bottom: auto;
		width: 175px;
		max-width: 100%;
		height: auto;
		min-height: 30px !important;
		max-height: 7%;
	}
	
	.lg-sub-html {
		position: fixed !important;
		right: 2%;
		left: auto;
		bottom: 2.5%;
		top: auto;
		width: auto;
		max-width: 100%;
		height: auto;
		max-height: 7%;
	}
	
}

@media only screen and (max-width: 767px) and (orientation: landscape) {
	
	.lg-outer {
		width: 100%;
		max-width: 100% !important;
		height: 76%;
		max-height: 76% !important;
		top: 12%;
	}

	.lg-toolbar {
		position: fixed !important;
		right: 2%;
		left: auto;
		top: 1.5%;
		bottom: auto;
		width: 175px;
		max-width: 50%;
		height: auto;
		min-height: 30px !important;
		max-height: 7%;
	}
	
	.lg-sub-html {
		position: fixed !important;
		right: 2%;
		left: auto;
		bottom: 1.5%;
		top: auto;
		width: auto;
		max-width: 100%;
		height: auto;
		max-height: 7%;
	}
		
}