@charset "utf-8";
/* CSS Photos Gallery Document */

.gallery-wrapper {width:90%; margin:20px auto; padding:0 0 20px; background-color:#EEE; border-radius:14px;}
.gallery-title {margin:2px 0 10px; padding:4px 0; color:#FFF; background-color:#090; border-radius:10px 10px 0 0 ;}
.gallery-title-orange {background-color:#C60;}
.gallery-title-blue {background-color:#06C;}
.gallery-title-pink {background-color:#C06;}
.gallery-title h2 {float:left; margin:2px 16px; padding:0; background-image:none; font-size:15px; font-weight:bold; text-indent:0;}
.gallery-title h2 a:link, .gallery-title h2 a:visited {color:#FFF; text-decoration:none;}
.gallery-title h2 a:hover, .gallery-title h2 a:active {color:#FE0; text-decoration:none;}
.gallery-title h4 {float:left; margin:2px 8px 2px 16px; padding:0; font-size:15px; font-weight:bold;}
.gallery-title h4 span {color:#000; padding:0 5px; background-color:#FFF; border-radius:10px;}
.gallery-title h4 a:link, .gallery-title h4 a:visited {color:#FFF; padding:0 5px; text-decoration:none;}
.gallery-title h4 a:hover, .gallery-title h4 a:active {color:#000; padding:0 5px; background-color:#FF0; text-decoration:none; border-radius:10px;}
.gallery-title p {float:right; margin:2px 16px 2px 8px; padding:0; text-align:right; font-size:15px; font-weight:bold;}
.gallery-album {width:96%; margin:4px auto; display:grid; grid-template-columns:auto 1fr; justify-items:start; align-items:start; grid-gap:0;}
.gallery-album-title {grid-column:1 / 3; margin:4px 2% 0;}
.gallery-album-title a:link, .gallery-album-title a:visited, .gallery-album-title a:hover, .gallery-album-title a:active {font-size:13px; font-weight:bold; text-decoration:none;}
.gallery-album-thumb {text-align:center;}
.gallery-album-descr {margin:6px 0 10px; font-size:12px;}
@media screen and (max-width:640px)  {
    .gallery-wrapper {width:96%;}
}

.gallery-preview {width:auto; margin:10px 2% 16px;}
.gallery-preview img.pic {margin:0 2% 8px;}
.gallery-preview h3 {margin:4px;}
.gallery-preview h3 a:link, .gallery-preview h3 a:visited, .gallery-preview h3 a:hover, .gallery-preview h3 a:active {font-size:13px; font-weight:bold; text-decoration:none;}

.gallery-album-wrapper {width:96%; margin:20px auto; display:grid; grid-template-columns:1fr 1fr 1fr; justify-items:stretch; align-items:center; grid-gap:0;}
.gallery-album-photo {display:flex; margin:8px 12px 12px; padding:6px 0 10px; text-align:center; background-color:#FFF; border-radius:6px;}
.gallery-album-photo div {margin:2px auto auto;}
.gallery-album-photo h3 {margin:0 4px 4px; font-size:12px;}
.gallery-album-photo img.pic {border:#999 1px solid; background-color:#CCC;}
.gallery-select .gallery-album-photo {background-color:#CCC;}
.gallery-select .gallery-album-photo img.pic {border:#FFF 1px solid; background-color:#CCC;}
@media screen and (max-width:640px)  {
    .gallery-preview img.pic {width:auto; height:auto; max-width:90%; max-height:150px;}
    .gallery-album-wrapper {grid-template-columns:1fr 1fr;}
    .gallery-album-photo img.pic {width:80%; height:auto;}   
}

/* .gallery-photo {width:100%; text-align:center; margin:4px auto 4px; position:relative;} */
.gallery-photo {margin:4px auto 4px; display:grid; grid-template-columns:48px auto 48px; justify-content:center; justify-items:stretch; align-items:start; grid-gap:0;}
.gallery-pic {border:#999 1px solid; background-color:#CCC; margin:0;}
.gallery-photo-navL, .gallery-photo-navR {width:48px; height:48px; margin:60px 0 0;}
.gallery-photo-navL span,.gallery-photo-navR span {display:inline-block; width:100%; height:48px;}
.gallery-photo-navL span {background:url(/gallery/gfx/left.png) left top no-repeat;}
.gallery-photo-navR span {background:url(/gallery/gfx/right.png) right top no-repeat;}
@media screen and (max-width:640px)  {
    .gallery-photo {margin:4px; grid-template-columns:1fr;}
    .gallery-pic {width:100%; height:auto;}
    .gallery-photo-navL, .gallery-photo-navR {display:none;}
}
.gallery-photo-menu {width:60%; margin:4px auto 12px; font-size:13px;}
.gallery-photo-menu .prst-small {display:inline-block; float:left;}
.gallery-photo-menu .pr-small {display:inline-block; float:right;}
.gallery-photo-menu .prst-small a, .gallery-photo-menu .pr-small a {color:#999; text-decoration:none;}
.gallery-photo-menu .prst-small a:hover, .gallery-photo-menu .pr-small a:hover {color:#C00; text-decoration:none;}
.gallery-photo-menu .prst-small a {padding:0 0 0 14px; background:url(/gallery/gfx/menu.png) left 0 no-repeat;}
.gallery-photo-menu .prst-small a:hover {background:url(/gallery/gfx/menu.png) left -20px no-repeat;} 
.gallery-photo-menu .pr-small a {padding:0 14px 0 0; background:url(/gallery/gfx/menu.png) right -40px no-repeat;}
.gallery-photo-menu .pr-small a:hover {background:url(/gallery/gfx/menu.png) right -60px no-repeat;} 

.gallery-photo-descr {width:80%; margin:20px auto 40px; text-align:justify;}
.gallery-photo-vote {margin:0; color:#AAA; font-size:12px; text-align:left;}
.gallery-photo-vote span {display:inline-block; margin:1px 4px; height:13px; width:64px; background-image:url(/gallery/gfx/rating.png); background-position:0 0; background-repeat:no-repeat; background-size:64px auto;}
.gallery-photo-vote .stars1 {background-position:0 -13px;}
.gallery-photo-vote .stars2 {background-position:0 -26px;}
.gallery-photo-vote .stars3 {background-position:0 -39px;}
.gallery-photo-vote .stars4 {background-position:0 -52px;}
.gallery-photo-vote .stars5 {background-position:0 -65px;}
.gallery-photo-vote span.votes {margin:-10px 4px 0; height:24px; width:24px; background-image:url("/images/votes.png"); background-position:0 10px; background-repeat:no-repeat; background-size:24px auto;}
.gallery-photo-detail {width:98%; margin:6px auto 10px !important; text-indent:20px; font-size:13px; text-align:justify;}
.gallery-photo-avtor {color:#AAA;}
.gallery-photo-date {width:100px; margin:0; color:#555; font-size:12px; float:right; text-align:right;}
@media screen and (max-width:640px)  {
    .gallery-photo-descr {width:90%;}
    .gallery-photo-menu {width:80%;}
}

.gallery-opinion {width:80%; margin:20px auto 40px; text-align:justify;}
.gallery-opinion-form {width:76%; margin:40px auto 20px; padding:0 5% 20px; background-color:#EEE; border:#DDD 2px solid; border-radius:10px;}
.gallery-opinion-form h3 {font-weight:700; margin:10px auto 16px;}
.gallery-opinion-text {width:100%; margin:0 0 20px; line-height:1.2;}
.gallery-opinion-text .smiles {display:inline-block; margin:-5px 6px; height:24px; width:24px; background-image:url("/gallery/gfx/smiles-v.png"); background-position:0 0; background-repeat:no-repeat; background-size:24px auto;}
.gallery-opinion-text .smile5 {}
.gallery-opinion-text .smile4 {background-position:0 -24px;}
.gallery-opinion-text .smile3 {background-position:0 -48px;}
.gallery-opinion-text .smile2 {background-position:0 -72px;}
.gallery-opinion-text .smile1 {background-position:0 -96px;}

.gallery-user {width:80%; margin:20px auto; text-align:center;}
.gallery-user-album {width:90%; margin:20px auto; padding:10px 2%; background-color:#EEE; border:2px #CCC solid; border-radius:10px;}
.gallery-user-thumb, .gallery-user-thumb-N {width:max-content; margin:10px 2% 16px; padding:8px 4%; text-align:center;}
.gallery-user-thumb {background-color:#DDD; border:#DDD 1px solid;}
.gallery-user-thumb-N {border:#333 1px solid; filter:alpha(opacity=20); opacity:0.2; -khtml-opacity:0.2; -moz-opacity:0.2;}
@media screen and (max-width:640px)  {
    .gallery-user {width:100%;}
    .gallery-user img.pic {width:30%; height:auto;}
    .gallery-user img.pic-mini {max-width:100px; max-height:100px; width:auto; height:auto;}}

.gallery-menu-wrapper{margin:10px auto; padding:4px 6px; text-align:center;}
.gallery-menu-go{margin:0; padding:6px; border:none;}
.gallery-menu {margin:0; padding:6px; overflow:hidden; background-color:#EEE; border:#CCC 1px solid;}
.gallery-menu-thumb {margin:2px 6px; float:left; border:#CCC 2px solid;}
.gallery-menu-thumb-on {margin:2px 6px; float:left; border:#F00 2px solid;}
/* .gallery-menu a:link img, .gallery-menu a:visited img {border:#CCC 2px solid;} */
.gallery-menu a:hover img, .gallery-menu a:active img {border:#a64a4f 2px solid;}

span.plusik-grey, span.plusik-red {display:inline-block; cursor:pointer; width:8px; height:8px; padding:1px; margin:2px; background-size:contain;}
span.plusik-grey {background:url("/images/plusik-grey.svg") 0 0 no-repeat;}
span.plusik-red {background:url("/images/plusik-red.svg") 0 0 no-repeat;}

.gallery-text {}

.codes-wrapper {display:block; position:relative;}
.codes {cursor:pointer; text-decoration:underline; margin:0 4px; background:url(/gallery/gfx/codes.png) 0 0 no-repeat; padding:4px 26px;}
.codes-paste {display:none;}
.codes-paste-show {display:block; width:94%; position:absolute; top:30px; left:0; border:#CCC 1px solid; box-shadow:0 0 10px rgba(0,0,0,0.5); border-radius:10px; background-color:#DFD; padding:10px 10px 30px;}
.codes-prst {margin:8px 10px; font-size:12px;} 
.codes-prst input {margin:0 auto; width:100%; border:#CCC 1px solid; background-color:#EFE; font-size:12px;}

/* ================= carousel ================= */
.carousel-wrapper {margin:2px auto; padding:6px;}
.carousel-wrapper td {vertical-align:middle;}
.carousel {width:570px; height:62px; overflow:hidden; padding:10px; border:#EEE 4px solid; background-color:#EEE; border-radius:6px; box-shadow:0 0 10px rgba(0,0,0,0.5);}
.carousel ul {width:1830px; margin:0; padding:0; margin-left:0px; white-space:nowrap;
	-webkit-transition:margin-left 0.5s linear;
    -moz-transition:margin-left 0.5s linear;
    -o-transition:margin-left 0.5s linear;
    -ms-transition:margin-left 0.5s linear; 
	transition:margin-left 0.5s linear;}
.carousel li {display:inline; margin:0 4px 0 0; padding:0;}
.carousel li img {border:#CCC 1px solid; background-color:#999;}
.startGo, .stopGo {cursor:pointer; 
	-webkit-transition:all 0.5s ease;
    -moz-transition:all 0.5s ease;
    -o-transition:all 0.5s ease;
    -ms-transition:all 0.5s ease; 
	transition:all 0.5s ease;}
.startGo {opacity:1; visibility:visible;}
.stopGo {opacity:0; visibility:hidden;}
@media screen and (max-width:640px)  {
    .carousel-wrapper {display:none;}
}

/* ================= slideshow ================= */
.slideshow-wrapper {background-color:#333 !important; background-image:none; text-align:center;}
.slideshow {margin:0 auto 20px; display:inline-block; padding:10px; background-color:#333;}
.slideshow h1 {margin:2px auto 6px; padding:0 40px 0 0; color:#555; font-family:Verdana, Geneva, sans-serif; font-weight:900; font-size:24px; text-align:right;}
.slideshow .prf {color:#CCC; margin:2px 4px; font-size:16px; font-weight:700; text-align:left;} 
.slideshow .prn {color:#999; margin:2px 4px; font-size:13px; font-weight:400; text-align:left;} 
.slideshow img.photo {max-height:80vh; border:#FFF 5px solid; border-radius:3px;}
.slideshow img.close {float:right; margin:10px 0 0 20px;}