/**
 * Galéria
 */
.images {
}

.images > .image {
	position: relative;
	float: left;
	padding: 0 0 4px 0;
	width: 33%;
	text-align: center;
}

.images > .image.loading {
	visibility: hidden;
}

.images > .image > a {
	position: absolute;
	z-index: 1;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
}

/**
 * Popup
 */
.gallery-frame {
	display: block;
	position: fixed;
	left: 0;
	top: 0;
	bottom: 0;
	right: 0;
	background-color: rgba(0, 0, 0, 0.7);
	animation-name: gallery-open;
	animation-duration: 300ms;
	z-index: 1000;
}

.gallery-frame.closing {
	animation-duration: 500ms;
	animation-name: gallery-close;
}

.gallery-frame .loader {
	display: none;
}

.gallery-frame.loading .loader {
	display: block;
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	right: 0;
	z-index: 20;
	background-color: rgba(220, 220, 220, 0.5);
}

.gallery-frame > .image {
	position: absolute;
	left: 50%;
	top: 50%;
}

.gallery-frame > .image > img {
	display: block;
	margin-left: -50%;
}

.gallery-frame > .image.loading > img {
	display: none;
}

.gallery-frame > .image > .loader {
	display: none;
	width: 50px;
	height: 50px;
	margin-top: -25px;
	margin-left: -25px;
	background-color: rgba(220, 220, 220, 0.5);
}

.gallery-frame > .image.loading > .loader {
	display: block;
}

.gallery-frame > .image.in {
	animation-name: gallery-image-in;
	animation-duration: 500ms;
}

.gallery-frame > .image.in-left {
	animation-name: gallery-image-in-left;
	animation-duration: 700ms;
}

.gallery-frame > .image.in-right {
	animation-name: gallery-image-in-right;
	animation-duration: 700ms;
}

.gallery-frame > .image.out-left {
	animation-name: gallery-image-out-left;
	animation-duration: 700ms;
}

.gallery-frame > .image.out-right {
	animation-name: gallery-image-out-right;
	animation-duration: 700ms;
}

@media (max-width: 767px) {
	.gallery-frame a.slide-button {
		display: none;
	}
}

@media (min-width: 768px) {
	.gallery-frame a.slide-button {
		display: none;
		position: absolute;
		z-index: 10;
		top: 0;
		bottom: 0;
		width: 10%;
		min-width: 50px;
		background-color: rgba(0, 0, 0, 0);
		opacity: 0.55;
		color: white;
		font-size: 30px;
		transition: opacity 0.2s, background-color 0.2s;
	}

	.gallery-frame.has-left a.slide-button.left,
	.gallery-frame.has-right a.slide-button.right {
		display: block;
	}

	.gallery-frame a.slide-button.left {
		left: 0;
	}

	.gallery-frame a.slide-button.right {
		right: 0;
	}

	.gallery-frame a.slide-button > span {
		display: block;
		position: relative;
		line-height: 30px;
		height: 30px;
		top: calc(50% - 15px);
		text-align: center;
		text-decoration: none;
	}

	.gallery-frame a.slide-button:hover {
		background-color: rgba(0, 0, 0, 0.8);
		opacity: 1;
		text-decoration: none;
		transition: opacity 0.2s, background-color 0.2s;
	}
}


@keyframes gallery-open {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

@keyframes gallery-close {
	from {
		opacity: 1;
	}

	to {
		opacity: 0;
	}
}

@keyframes gallery-image-in {
	from {
		top: 0%;
		opacity: 0;
	}

	to {
		opacity: 1;
		top: 50%;
	}
}

@keyframes gallery-image-in-left {
	from {
		left: -50%;
	}

	to {
		left: 50%;
	}
}

@keyframes gallery-image-in-right {
	from {
		left: 150%;
	}

	to {
		left: 50%;
	}
}

@keyframes gallery-image-out-left {
	from {
		/* left: 50%; */
	}

	to {
		left: -50%;
	}
}

@keyframes gallery-image-out-right {
	from {
		/* left: 50%; */
	}

	to {
		left: 150%;
	}
}

.gallery-frame .gallery-close {
	display: none;
	z-index: 11;
}

@media (max-width: 767px) {
	.gallery-frame .gallery-close {
		display: block;
		position: absolute;
		width: 30px;
		height: 30px;
		left: 10px;
		top: 10px;
		cursor: pointer;
	}
}