::-moz-selection {
text-shadow: none;
}

::selection {
text-shadow: none;
}

img {
vertical-align: middle;
}

#buttonFullscreen {
display: none;
position: relative;
width: 40px;
height: 40px;
cursor: pointer;
}

#pageNav {
display: block;
float: right;
font-size: 12px;
}

#pageNav div.count {
padding-top: 1px;
}

#pageCountCurrent,
#pageCountTotal {
font-weight: bold;
line-height: 40px;
}

#pageNav div.count {
float: left;
}

.fullscreen #buttonFullscreen {
display: block;
}

#buttonFullscreen div.icon {
position: absolute;
top: 12px;
left: 11px;
width: 18px;
height: 16px;
}

#galleryName {
position:absolute;
padding:40px 0 0 40px;
/*left: 11px;*/
height:25px;
width:80%;
font: Georgia, Tohoma, arial, helvetica, sans-serif;
font-style: italic;
font-weight: bold;
font-size: 20px;
color:var(--gal-fg-color);
opacity: 0;
}

#galleryDescription {
position:relative;
float:right;
text-align:right;
padding:40px 40px 0 0;
/*right: 11px;*/
height:25px;
width:50%;
font: Georgia, Tohoma, arial, helvetica, sans-serif;
font-style: italic;
font-weight: normal;
font-size: 14px;
color:var(--gal-fg-color);
opacity: 0;
}

#thumbnailContainer {
top:0px;
position: relative;
/*DAWpadding: 5px;*/
padding: 0px;
width: 100%;
-moz-box-sizing: border-box;
box-sizing: border-box;
overflow: hidden;
font-size: 0;
}

#thnails {
height:100%;
padding:15px 0 15px 0;
}

/*
.row-spacing-sm #thumbnailContainer {
padding-top: 2px;
}

.row-spacing-md #thumbnailContainer {
padding-top: 8px;
}

.row-spacing-lg #thumbnailContainer {
padding-top: 16px;
}
*/
.has-header #thumbnailContainer {
position: relative;
/*padding-top: 16px; */
width: 100%;
-moz-box-sizing: border-box;
box-sizing: border-box; 
transition: all .5s;
}

div.thumbnails {
overflow: hidden;
margin: 0 auto;
-moz-box-sizing: border-box;
box-sizing: border-box;
text-align: center;
}

div.thumbnail {
position: relative;
display:inline-block;
-moz-box-sizing: border-box;
box-sizing: border-box;
cursor: pointer;
border: 3px solid var(--gal-border-color);/*#bbb; */
box-shadow: 0 0 1px rgba(0, 0, 0, 1);  
}

div.thumbnail.hover:hover {
transition: all .1s ease-out; 
box-shadow: 0 0 25px rgba(0, 0, 0, 1);  
cursor: pointer;
z-index: 9;
}

.titleoverlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: var(--gal-titl-overlay-color);
  overflow: hidden;
  width: 100%;
  height: 0;
  opacity: 0;
  transition: .5s ease;
}

div.thumbnail:hover .titleoverlay {
  opacity: 0.9;
  height: 10%;
}

.titletext {
  white-space: nowrap; 
  color: var(--gal-titl-txt-color);
  font-size: 14px;
  position: absolute;
  overflow: hidden;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
}

.row-spacing-sm div.thumbnail {
margin-bottom: 2px;
}

.row-spacing-md div.thumbnail {
}

.row-spacing-lg div.thumbnail {
margin-bottom: 16px;
}

div.thumbnail.not-loaded {
display: none;
}

div.thumbnail img {
display: block;
position: absolute;
top: 0;
left: 0;
width: auto;
max-width: 100%;
height: auto;
max-height: 100%;
-moz-box-sizing: border-box;
box-sizing: border-box;
cursor: pointer;
/*border-style: solid;
border: 1px solid black;*/
box-shadow: 0 0 50px rgba(255, 255, 255, 1);
}

#loupeContainer {
display: none;
position: fixed;
top: 0;
left: 0;
padding: 25px 25px 25px 25px;
width: 100%;
height: 100%;
-moz-box-sizing: border-box;
box-sizing: border-box;
z-index: 10;
font-size: 14px;
text-align: center;
}

#loupeContainer.meta-empty {
/*padding: 45px;*/
}

#loupeContainer div.background {
background: url("../pics/bg.png"); 
background-color:var(--loupe-bg-color);
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

#loupeContainer div.image-container {
position: relative;
display: table;
width: 100%;
height: 100%;
}

/*
#loupeContainer div.corners {
position: relative;
display: inline-block;
}
*/

#loupeContainer div.image-container div.image {
display: table-cell;
margin: 0;
padding: 0;
width: 100%;
height: 100%;
-moz-box-sizing: border-box;
box-sizing: border-box;
vertical-align: middle;
text-align: center;
}

#loupeImgSrc{
//box-shadow: 0 0 50px rgba(0,0,0, 1);
}

#loupeContainer div.image-container div.image img {
border: 4px inset var(--loupe-img-border-color);
}

#loupeContainer img {
width: auto;
max-width: 100%;
height: auto;
max-height: 100%;
-moz-box-sizing: border-box;
box-sizing: border-box;
}

#loupeContainer div.lateral-nav-container {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 20px;
overflow: hidden;
text-align: center;
}

#loupeContainer ul.lateral-nav {
display: inline-block;
margin: 0;
padding: 0;
list-style-type: none;
line-height: 20px;
color:var(--loupe-fg-color);
}

#loupeContainer div.info-container {
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 5%;
padding: 20px;
-moz-box-sizing: border-box;
box-sizing: border-box;
color:var(--loupe-fg-color);
}

#loupeContainer.meta-empty div.info-container {
display: none;
}

#loupeContainer div.side-navigation {
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 100%;
padding: 45px 0px 100px 0px;
-moz-box-sizing: border-box;
box-sizing: border-box; 
}

#loupeMeta p {
margin: 0;
padding: 0;
}

#loupeMeta p.title {
margin: 0 auto 5px auto;
padding: 0;
max-width: 80%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: 15px;
font-weight: bold;
}

#loupeMeta p.caption {
margin: 0 auto;
padding: 0;
max-width: 80%;
height: 48px;
overflow: hidden;
font-size: 14px;
}

#loupeContainer div.side-navigation div.button {
display: block;
width: 50px;
height: 50px;
}

#buttonPrevSideLoupe {
position: absolute;
top: 50%;
left: 0px;
transition: all .2s ease-out;
opacity: 0;
}

#buttonPrevSideLoupe {
display:block;
float:left;
padding:28% 30% 28% 0;
position: fixed;
left:0;
top:50px;
width: 45px;
height: 45px;
cursor: pointer;
opacity:0.2;
z-index:20;
}
#buttonPrevSideLoupe.hover:hover {
    opacity:0.8;
}

#buttonNextSideLoupe {
display:block;
float:right;
padding:28% 0% 28% 50%;
position: fixed;
right:0;
top:50px;
width: 45px;
height: 45px;
cursor: pointer;
opacity:0.2;
z-index:20;
}
#buttonNextSideLoupe.hover:hover {
    opacity:0.8;
}

#loupeContainer li {
display: block;
float: left;
}

#countCurrent,
#countTotal {
font-weight: bold;
}

#buttonPrev {
position: relative;
width: 20px;
height: 20px;
cursor: pointer;
opacity:0.2;
z-index:20;
}
#buttonPrev:hover {
    opacity:0.8;
}

#buttonPrev.disabled {
opacity: .5;
cursor: inherit;
}

#buttonNext {
position: relative;
width: 20px;
height: 20px;
cursor: pointer;
opacity:0.2;
z-index:20;
}
#buttonNext:hover {
    opacity:0.8;
}

#buttonNext.disabled {
opacity: .5;
cursor: inherit;
}

#loupeCloseButton:hover {
transition: all .1s ease-out;
opacity:0.8;
}

#loupeCloseButton {
position: absolute;
top: 0.5em;
right: 0;
width: 45px;
height: 45px;
cursor: pointer;
opacity:0.5;
}