@charset "UTF-8";

.lightbox-container {
	width: 100vw;
	height: 100vh;
	position: fixed;
	z-index: 1;
	display: none;
	background-color: rgba(255, 255, 255, 0.9);
	-webkit-animation-direction: normal;
    -webkit-animation-duration: 1s;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-name: gallery;
    -webkit-animation-timing-function: ease-in-out;
    -moz-animation-direction: normal;
    -moz-animation-duration: 1s;
    -moz-animation-iteration-count: 1;
    -moz-animation-name: gallery;
    -moz-animation-timing-function: ease-in-out;
	-o-animation-direction: normal;
    -o-animation-duration: 1s;
    -o-animation-iteration-count: 1;
    -o-animation-name: gallery;
    -o-animation-timing-function: ease-in-out;
	animation-direction: normal;
    animation-duration: 1s;
    animation-iteration-count: 1;
    animation-name: gallery;
    animation-timing-function: ease-in-out;
}
.lightbox-content {
	width: -moz-calc(100vw - 192px);
	width: -webkit-calc(100vw - 192px);
	width: -o-calc(100vw - 192px);
	width: calc(100vw - 192px);
	height: -moz-calc(100vh - 80px);
	height: -webkit-calc(100vh - 80px);
	height: -o-calc(100vh - 80px);
	height: calc(100vh - 80px);
	position: relative;
	margin-top: 40px;
	left: 0vw;
	margin-left: 96px;
}
.lightbox-content img {
	width: auto;
	height: auto;
	max-height: 100%;
	max-width: 100%;
	position: absolute;
	top: 50%;
	left: 0;
	right: 0;
	margin: auto;
	transform: translateY(-50%);
}
.lightbox-close {
	width: 34px;
	height: 18px;
	position: absolute;
	margin-top: 20px;
	margin-left: 20px;
	font-family: PlayfairDisplay-Italic;
}
.lightbox-close:hover, .lightbox-close:focus {
	color: #ff3344;
	text-decoration: none;
	transition: color 0.2s ease-in;
	cursor: pointer;
}
.lightbox-slides {
	display: none;
}
.lightbox-prev, .lightbox-next {
	height: 18px;
	position: absolute;
	margin-left: 20px;
	font-family: PlayfairDisplay-Italic;
	cursor: pointer;
	user-select: none;
	-webkit-user-select: none;
}
.lightbox-prev {
	width: 56px;
	margin-top: 38px;
}
.lightbox-next {
	width: 31px;
	margin-top: 56px;
}
.lightbox-prev:hover, .lightbox-next:hover {
	color: #ff3344;
	text-decoration: none;
	transition: color 0.2s ease-in;
	cursor: pointer;
}

@media screen and (max-width: 768px) {
	
.lightbox-content {
	width: 90vw;
	height: -moz-calc(100vh - 15vw - 90px);
	height: -webkit-calc(100vh - 15vw - 90px);
	height: -o-calc(100vh - 15vw - 90px);
	height: calc(100vh - 15vw - 90px);
	position: relative;
	margin-top: -moz-calc(10vw + 90px);
	margin-top: -webkit-calc(10vw + 90px);
	margin-top: -o-calc(10vw + 90px);
	margin-top: calc(10vw + 90px);
	left: 5vw;
	margin-left: 0px;
}
.lightbox-close {
	width: auto;
	height: 30px;
	position: absolute;
	margin-top: 5vw;
	margin-left: 5vw;
	font-family: PlayfairDisplay-Italic;
}
.lightbox-prev, .lightbox-next {
	height: 30px;
	position: absolute;
	margin-left: 5vw;
	font-family: PlayfairDisplay-Italic;
	cursor: pointer;
	user-select: none;
	-webkit-user-select: none;
}
.lightbox-prev {
	width: auto;
	margin-top: -moz-calc(5vw + 30px);
	margin-top: -webkit-calc(5vw + 30px);
	margin-top: -o-calc(5vw + 30px);
	margin-top: calc(5vw + 30px);
}
.lightbox-next {
	width: auto;
	margin-top: -moz-calc(5vw + 60px);
	margin-top: -webkit-calc(5vw + 60px);
	margin-top: -o-calc(5vw + 60px);
	margin-top: calc(5vw + 60px);
}
	
}

/* animations */

@-webkit-keyframes gallery {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}
@-moz-keyframes gallery {
    0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}
@-o-keyframes gallery {
    0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}
@keyframes gallery {
    0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}