.artistru_popup_gallery { position: fixed; left: 0; right: 0; top: 0; bottom: 0; background: #fffc; opacity: 0; z-index: 900; overflow: hidden; transition: opacity 0.15s ease-out 0.15s; }
.artistru_popup_gallery.ready { opacity: 1; }

.artistru_popup_gallery .button_backward { position: fixed; top: 50%; left: 50%; display: block; width: 32px; height: 32px; background: #fff5; padding: 16px; border-radius: 50%; transform: translate( 0, -50% ); cursor: pointer; z-index: 10; }
.artistru_popup_gallery .button_backward img { position: absolute; width: 32px; height: 32px; transform: rotate( 270deg ); }
.artistru_popup_gallery .button_backward img.normal { opacity: 1; }
.artistru_popup_gallery .button_backward img.over { opacity: 0; }
.artistru_popup_gallery .button_backward:hover img.normal { opacity: 0; }
.artistru_popup_gallery .button_backward:hover img.over { opacity: 1; }


.artistru_popup_gallery .button_forward { position: fixed; top: 50%; right: 50%; display: block; width: 32px; height: 32px; background: #fff5; padding: 16px; border-radius: 50%; transform: translate( 0, -50% ); cursor: pointer; z-index: 10; }
.artistru_popup_gallery .button_forward img { position: absolute; width: 32px; height: 32px; transform: rotate( 90deg ); }
.artistru_popup_gallery .button_forward img.normal { opacity: 1; }
.artistru_popup_gallery .button_forward img.over { opacity: 0; }
.artistru_popup_gallery .button_forward:hover img.normal { opacity: 0; }
.artistru_popup_gallery .button_forward:hover img.over { opacity: 1; }


.artistru_popup_gallery .button_play { position: fixed; top: 50%; left: 50%; display: block; width: 32px; height: 32px; background: #fffa; padding: 16px; border-radius: 50%; transform: translate( -50%, -50% ); cursor: pointer; z-index: 10; transition: all 0.15s linear 0s; }
.artistru_popup_gallery .button_play img { position: absolute; width: 32px; height: 32px; transition: all 0.15s linear 0s; }
.artistru_popup_gallery .button_play img.normal { opacity: 1; }
.artistru_popup_gallery .button_play img.over { opacity: 0; }

.artistru_popup_gallery .button_play:hover { width: 48px; height: 48px; padding: 24px; }
.artistru_popup_gallery .button_play:hover img { width: 48px; height: 48px; }
.artistru_popup_gallery .button_play:hover img.normal { opacity: 0; }
.artistru_popup_gallery .button_play:hover img.over { opacity: 1; }


.artistru_popup_gallery .close { position: fixed; top: 50%; right: 50%; display: block; width: 24px; height: 24px; background: #333b; padding: 4px; border-radius: 50%; cursor: pointer; z-index: 10; opacity: 0.5; }
.artistru_popup_gallery .close:hover { opacity: 0.8; }


.artistru_popup_gallery .image { position: fixed; background: #e0e0e0; opacity: 0; box-shadow: 0 0 30px #333; transition: none; }
.artistru_popup_gallery .image.ready { opacity: 1; }
.artistru_popup_gallery .image.transitable { transition: all 0.15s linear 0s; }
.artistru_popup_gallery .image.animable { opacity: 1; transition: all 0.15s linear 0s; }

.artistru_popup_gallery .video { position: relative; background: #000; opacity: 0; transition: opacity 0.15s linear 0s; }

.artistru_popup_gallery .bottom { position: fixed; top: 50%; left: 50%; display: flex; background: #fff; padding: 10px; transform: translate( -50%, -50% ); z-index: 10; opacity: 0; }
.artistru_popup_gallery .bottom.visible { opacity: 0.8; }

.artistru_popup_gallery .bottom .description { flex: 1; max-height: 60px; overflow: hidden; }

.artistru_popup_gallery .bottom .like { display: none; }
.artistru_popup_gallery .bottom.w_like .like { display: flex; height: 20px; margin-left: 30px; cursor: pointer; }
.artistru_popup_gallery .bottom .like .icons { position: relative; display: block; width: 16px; height: 20px; overflow: hidden; }
.artistru_popup_gallery .bottom .like .icons img { position: absolute; width: 16px; height: 16px; padding: 2px 0; }

.artistru_popup_gallery .bottom .like .icons img.normal { opacity: 1; }
.artistru_popup_gallery .bottom .like .icons img.over { opacity: 0; }
.artistru_popup_gallery .bottom .like .icons img.active { opacity: 0; }
.artistru_popup_gallery .bottom .like .icons img.mobile { opacity: 0; }

.artistru_popup_gallery .bottom .like:hover .icons img.normal { opacity: 0; }
.artistru_popup_gallery .bottom .like:hover .icons img.over { opacity: 1; }
.artistru_popup_gallery .bottom .like:hover .icons img.active { opacity: 0; }
.artistru_popup_gallery .bottom .like:hover .icons img.mobile { opacity: 0; }

.artistru_popup_gallery .bottom .like.liked .icons img.normal { opacity: 0; }
.artistru_popup_gallery .bottom .like.liked .icons img.over { opacity: 0; }
.artistru_popup_gallery .bottom .like.liked .icons img.active { opacity: 1; }
.artistru_popup_gallery .bottom .like.liked .icons img.mobile { opacity: 0; }

.artistru_popup_gallery .bottom .like .value { flex: 1; padding-left: 5px; white-space: nowrap; overflow-x: hidden; }
.artistru_popup_gallery .bottom .like .value span { margin-left: 5px; }
.artistru_popup_gallery .bottom .like.liked .value { color: #fd8912; }
.artistru_popup_gallery .bottom .like:hover .value { color: #38b4e7; }
.artistru_popup_gallery .bottom .like.liked .value span { color: #fd8912; }


.artistru_popup_gallery .block_gallery_container { position: fixed; bottom: 30px; left: 50%; display: block; width: calc( 100% - 60px ); height: 103px; overflow: hidden; transform: translateX( -50% ); z-index: 10; }
.artistru_popup_gallery .block_gallery_container .shader_left { position: absolute; left: 0; top: 3px; display: block; width: 50px; height: 97px; background-image: linear-gradient( 90deg, rgba( 170,170,170, 0.9 ), rgba( 170,170,170, 0 ) ); z-index: 15; }
.artistru_popup_gallery .block_gallery_container .shader_right { position: absolute; right: 0; top: 3px; display: block; width: 50px; height: 97px; background-image: linear-gradient( 90deg, rgba( 170,170,170, 0 ), rgba( 170,170,170, 0.9 ) ); z-index: 15; }
.artistru_popup_gallery .block_gallery_container .block_gallery { position: absolute; left: 0; top: 0; display: flex; height: 103px; overflow: hidden; transition: left 0.15s linear 0s; }

.artistru_popup_gallery .block_gallery_container .block_gallery .photo_container { position: relative; display: block; width: 97px; height: 97px; margin-right: 15px; border: 3px solid transparent; overflow: hidden; cursor: pointer; transition: border-top-color 0.15s linear 0s, border-bottom-color 0.15s linear 0s, border-left-color 0.15s linear 0s, border-right-color 0.15s linear 0s; }
.artistru_popup_gallery .block_gallery_container .block_gallery .photo_container:last-child { margin-right: 0; }
.artistru_popup_gallery .block_gallery_container .block_gallery .photo_container.selected { border: 3px solid #1d8bcb; }

.artistru_popup_gallery .block_gallery_container .block_gallery .photo_container .photo { position: absolute; top: 0; left: 0; width: 97px; height: 97px; }
.artistru_popup_gallery .block_gallery_container .block_gallery .photo_container .play { position: absolute; top: 50%; left: 50%; width: 30px; height: 30px; padding: 10px; background: #fff; border-radius: 50%; transform: translate( -50%, -50% ); opacity: 0.8; transition: all 0.15s linear 0s; }
.artistru_popup_gallery .block_gallery_container .block_gallery .photo_container:hover .play { width: 36px; height: 36px; padding: 15px; }


.artistru_popup_gallery.video_mode .video { opacity: 1; z-index: 20; }
.artistru_popup_gallery.video_mode .close { top: 10px !important; left: unset !important; right: 10px !important; transform: unset !important; z-index: 30; }


@media ( max-width: 900px ) {
    .artistru_popup_gallery { background: #000; }
    .artistru_popup_gallery .close { top: 0.7rem; right: 0.7rem; width: 1.7rem; height: 1.7rem; background: #000; padding: 0.7rem; opacity: 1; transform: none !important; }

    .artistru_popup_gallery .image.animable { transition: none; }

    .artistru_popup_gallery .button_backward { width: 1.7rem; height: 1.7rem; padding: 0.7rem; }
    .artistru_popup_gallery .button_backward img { width: 1.7rem; height: 1.7rem; }

    .artistru_popup_gallery .button_forward { width: 1.7rem; height: 1.7rem; padding: 0.7rem; }
    .artistru_popup_gallery .button_forward img { width: 1.7rem; height: 1.7rem; }

    .artistru_popup_gallery .image { background: unset; box-shadow: unset; }

    .artistru_popup_gallery .bottom { top: unset; left: 0; right: 0; bottom: 0; flex-direction: column-reverse; width: 100vw !important; color: #fff; background: #000c; padding: 0; opacity: 1 !important; transform: none !important; }
    .artistru_popup_gallery .bottom .description { max-height: 4.2rem; margin: 0.7rem 1.1rem; overflow: hidden; }

    .artistru_popup_gallery .bottom .like { padding: 0.7rem 1.1rem; margin-left: auto !important; }

    .artistru_popup_gallery .bottom .like .icons img.normal { opacity: 0; }
    .artistru_popup_gallery .bottom .like .icons img.over { opacity: 0; }
    .artistru_popup_gallery .bottom .like .icons img.active { opacity: 0; }
    .artistru_popup_gallery .bottom .like .icons img.mobile { opacity: 1; }

    .artistru_popup_gallery .bottom .like.liked .icons img.normal { opacity: 0; }
    .artistru_popup_gallery .bottom .like.liked .icons img.over { opacity: 0; }
    .artistru_popup_gallery .bottom .like.liked .icons img.active { opacity: 1; }
    .artistru_popup_gallery .bottom .like.liked .icons img.mobile { opacity: 0; }

    .artistru_popup_gallery .bottom .like .value { color: #1d8bcb; }
    .artistru_popup_gallery .bottom .like.liked .value span { color: #1d8bcb; }

    .artistru_popup_gallery .bottom .like.liked .value { color: #fd8912; }
    .artistru_popup_gallery .bottom .like.liked .value span { color: #fd8912; }

    .artistru_popup_gallery .block_gallery_container { display: none; }

    .artistru_popup_gallery.video_mode .close { top: 0.7rem !important; left: unset !important; right: 0.7rem !important; transform: unset !important; z-index: 30; }
}