@keyframes animation-d-m {
0% { transform: translate3d(0px, 100%, 0px); }
100% { transform: translate3d(0px, 0px, 0px); }
}
@keyframes animation-d-m {
0% { transform: translate3d(0px, 100%, 0px); }
100% { transform: translate3d(0px, 0px, 0px); }
}
@keyframes animation-m-u {
0% { transform: translate3d(0px, 0px, 0px); }
100% { transform: translate3d(0px, -100%, 0px); }
}
@keyframes animation-m-u {
0% { transform: translate3d(0px, 0px, 0px); }
100% { transform: translate3d(0px, -100%, 0px); }
}
@keyframes animation-m-d {
0% { transform: translate3d(0px, 0px, 0px); }
100% { transform: translate3d(0px, 140%, 0px); }
}
@keyframes animation-m-d {
0% { transform: translate3d(0px, 0px, 0px); }
100% { transform: translate3d(0px, 140%, 0px); }
}
@keyframes animation-d-m2 {
0% { transform: translate3d(0px, 5.8rem, 0px); }
100% { transform: translate3d(0px, 0px, 0px); }
}
@keyframes animation-d-m2 {
0% { transform: translate3d(0px, 5.8rem, 0px); }
100% { transform: translate3d(0px, 0px, 0px); }
}
.ma5-gallery { font-size: 0px; }
.ma5-imgbox { width: 100%; height: 100%; position: fixed; top: 0px; left: 0px; overflow: hidden; background-color: rgb(20, 20, 20); transform: translateX(0px) translateY(0px); transition: background-color 0.5s ease-out 0s; animation-timing-function: ease-out; animation-duration: 0.7s; animation-delay: 0.1s; animation-fill-mode: both; animation-name: animation-d-m; }
.ma5-imgbox img { position: absolute; left: -100%; right: -100%; top: -100%; bottom: -100%; margin: auto; width: auto; height: auto; min-width: 0px; min-height: 0px; max-width: 100%; max-height: 100%; border: medium none; box-shadow: none; image-rendering: -moz-crisp-edges; }
.ma5-imgbox.ma5-has-figcaption img { top: calc(-100% - 5.2rem); max-height: calc(100% - 5.2rem); }
.ma5-imgbox.ma5-out { animation-name: animation-m-u; animation-fill-mode: forwards; }
.ma5-imgbox.ma5-previous { background-color: black; }
.ma5-tmp { display: none; }
.ma5-tmp.ma5-control { display: block; }
.ma5-control { position: fixed; bottom: 0px; left: 0px; font-size: 0px; width: 100%; padding: 0px; text-align: center; z-index: 1000; transform: translateX(0px) translateY(0px); animation-timing-function: ease-out; animation-duration: 0.3s; animation-fill-mode: both; animation-name: animation-d-m2; }
.ma5-control figure { width: 4.4rem; height: 4.4rem; max-width: 4.4rem; max-height: 4.4rem; position: relative; display: inline-block; overflow: hidden; font-size: 0px; margin: 0px; padding: 0px; border: 0.101rem solid rgba(0, 0, 0, 0.3); }
.ma5-control figure figcaption { display: none; }
.ma5-control figure img { display: block; cursor: pointer; width: 100%; min-width: 100%; min-height: 100%; margin: auto; position: absolute; top: -100%; right: -100%; bottom: -100%; left: -100%; opacity: 0.65; image-rendering: -moz-crisp-edges; }
.ma5-control figure.ma5-active, .ma5-control figure:hover { transform: scale3d(1.1, 1.1, 1); border: 0.101rem solid rgba(255, 255, 255, 0.8); z-index: 1001; }
.ma5-control figure.ma5-active img, .ma5-control figure:hover img { opacity: 1; }
.ma5-control figure.ma5-active img { cursor: default; }
.ma5-control figure:hover { z-index: 1002; }
.ma5-control.ma5-out { animation-name: animation-m-d; animation-fill-mode: both; }
.ma5-control .ma5-bg { display: block; position: relative; white-space: nowrap; overflow: auto; padding: 0.7rem 0.8rem; background-color: rgba(0, 0, 0, 0.8); }
.ma5-preloadbox { position: fixed; width: 1px; height: 1px; bottom: 0px; right: 0px; overflow: hidden; }
.ma5-preloadbox img { width: 1px ! important; height: 1px ! important; position: absolute; top: 0px; left: 0px; image-rendering: -moz-crisp-edges; }
.ma5-prev { position: fixed; top: 0px; left: 0px; width: 20%; height: 100%; z-index: 900; }
.ma5-next { position: fixed; top: 0px; right: 0px; width: 20%; height: 100%; z-index: 900; }
.ma5-figcaption, .ma5-figcaption-old { position: fixed; width: 100%; bottom: 0px; z-index: 910; padding: 1.6rem; }
.ma5-figcaption .ma5-centerbox, .ma5-figcaption-old .ma5-centerbox { max-width: 122rem; margin: 0px auto; max-height: 2rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 1.6rem; line-height: 2rem; text-align: center; color: rgba(255, 255, 255, 0.9); transition: color 0.3s ease-out 0s; }
.ma5-in .ma5-figcaption .ma5-centerbox, .ma5-in .ma5-figcaption-old .ma5-centerbox { color: rgba(255, 255, 255, 0); transition: color 0.3s ease-out 0s; }
.ma5-out .ma5-centerbox { color: rgba(255, 255, 255, 0); transition: color 0.3s ease-out 0s; }
.ma5-gallery-active { overflow-y: scroll; }
.ma5-gallery-active .ma5-imgbox img { top: calc(-100% - 5.9rem); max-height: calc(100% - 5.9rem); }
.ma5-gallery-active .ma5-imgbox.ma5-has-figcaption img { top: calc(-100% - 10.9rem); max-height: calc(100% - 11.1rem); }
.ma5-gallery-active .ma5-imgbox.ma5-out {  }
.ma5-gallery-active .ma5-figcaption, .ma5-gallery-active .ma5-figcaption-old { bottom: 5.8rem; }