#art-details
{
  z-index:990;
  width:100%;
  height:100%;
  position:absolute;
  background-color:rgba(0,0,0,0.5);
  display:flex;
  align-items: center;
  flex-direction: column;
  padding:20px;
  overflow-x:hidden;
  overflow-y:auto;
}


#art-details-content
{
  position:relative;
  width:100%;
  max-width:1000px;
  height:auto;
  background-color:#fafafa;
  color:var(--dark-color);
  border-radius:30px;
  display:flex;
  padding:0px 60px;
  padding-top:40px;
  border-top-right-radius: 20px;
  flex-wrap: wrap;
  justify-content: center;

}

#art-details-closer-link
{
  position:absolute;
  right:0px;
  top:0px;
  color:#555;
  margin-top:6px;
  margin-right:7px;
  font-size:18px;
  width:auto;
  height:30px;
  display:flex;
  align-items: center;
  align-content: center;
  justify-content: center;
  cursor:pointer;
  user-select: none;
  transform:scale(1);
  transition:0.3s;
}

#art-details-closer-link:hover
{
  transform:scale(1.1);
  transition:0.15s;
}

#art-details-closer
{
  color:#fff;
  font-size:30px;
  width:30px;
  height:30px;
  border-radius:15px;
  background-color:#555;
  display:flex;
  justify-content: center;
  align-items: center;
  align-content: center;
  margin-left:5px;
}
/*


}



*/

#art-preview-bar
{
  flex-grow:1;
  display:flex;
  flex-direction: column;
  min-height:450px;
  width:100%;
  max-width:500px;
  padding:0px;
  padding-bottom:40px;
  margin:0px 20px;
  position:relative;
}

.art-preview-img-container
{
  flex-grow:1;
  width:100%;
  justify-content: center;
  align-items: center;
  align-content: center;
  display:flex;
  justify-content: center;
  overflow:visible;
  flex-wrap: nowrap;
  position:relative;
}


#art-preview-img
{
  object-fit:contain;
  max-width:500px;
  max-height:300px;
  border:none;
  border-radius:10px;
  transform:scale(1);
  transition:0.5s;
  cursor:pointer;
}

#art-preview-img:hover
{
  transform:scale(1.03);
  transition:0.2s;
  box-shadow:1px 1px 20px rgba(0,0,0,0.2);
}

.art-preview-thumbnails
{
  flex-grow:0;
  width:100%;
  height:96px;
  margin:0px;
  margin-top:20px;
  padding:0px;
  position:relative;
  display:flex;
  user-select: none;
  overflow:visible;
}

#art-preview-thumbs-wrapper
{
  display:block;
  position:relative;
  margin:0px 20px;
  width:100%;
  height:100%;
  overflow:hidden;
  overflow-x: hidden;
  overflow-y:hidden;
  border-radius:5px;
}

#art-preview-thumbs-container
{
  display:flex;
  position:absolute;
  width:auto;
  height:100%;
  justify-content: center;
  align-items: center;
  align-content: center;
  overflow:visible;
  overflow-y:visible;
  overflow-x:visible;

  min-width:100%;
}

.art-preview-thumb
{
  height:100%;
  width:auto;
  margin:0px 0px;
  flex-grow:0;
  border-radius:5px;
  cursor:pointer;
  transform:scale(0.95);
  transition:0.5s;
  position:relative;
  border:3px solid #fff;
}


.art-preview-thumb:hover
{
  transform:scale(1);
  transition:0.2s;
}


#art-thumbs-left, #art-thumbs-right
{
  position:absolute;
  width:40px;
  height:100%;
  top:0px;
  line-height:92px;
  text-align: center;
  font-size:40px;
  cursor:pointer;
  color:var(--dark-color);
}

#art-thumbs-left{ left:-20px; }
#art-thumbs-right{ right:-20px; }

#art-thumbs-left:hover, #art-thumbs-right:hover
{
  font-size:42px;
  line-height:88px;
}

#art-thumbs-left:active, #art-thumbs-right:active
{
  font-size:38px;
}

#art-thumbs-left.thumbs-arrow-inactive,
#art-thumbs-right.thumbs-arrow-inactive
{
  color:var(--color);
  pointer-events: none;
}

#art-info-bar
{
  flex-grow:0;
  width:280px;
  height:auto;
  display:flex;
  flex-direction: column;
  padding:0px;
  margin:0px 20px;
  padding-bottom:40px;
}

#art-details-title
{
  font-size:2em;
  font-weight:normal;
  flex-grow:0;
  text-align:right;
}

#art-details-size, #art-details-price
{
  flex-grow:0;
  font-weight: lighter;
  text-align:right;
  padding:30px 0px 10px 0px;
}

#art-details-description
{
  text-align: justify;
  font-size:0.85em;
  flex-grow:0;
}

#art-details-description p
{
  margin:20px 0px;
}


#art-details-size{ font-size:1.5em; }

#art-details-price{ font-size:2em;}

#art-details-price a{ font-size:0.75em;}
#art-details-price a:hover{ color:#E8F; }

#art-emailme-button, #art-share-button
{
  flex-grow:0;
  width:100%;
  height:40px;
  background-color:var(--color);
  color:var(--light-color);
  text-align: center;
  line-height:40px;
  border-radius: 2px;
  cursor:pointer;
  font-size:20px;
  font-weight: 200;
  user-select: none;
}

 #art-share-button
 {
   font-size:14px;
   width:50%;
   margin:0px auto;
   margin-top:10px;
   height:30px;
   line-height:30px;
   color:#fff;
 }

#art-emailme-button:hover,  #art-share-button:hover
{
  color:#FFF;
  font-weight: 400;
}

#art-emailme-button:active, #art-share-button:active
{
  color:var(--color);
  background-color:var(--dark-color);
}


@media screen and (max-width: 500px )
{

  #art-details-content
  {
    border-radius:20px;
    padding:0px 20px;
    padding-top:40px;
  }

  #art-preview-bar, #art-info-bar
  {
    margin:0px 0px;
  }

}

@media screen and (max-width: 400px )
{

  #art-details-content
  {
    border-radius:0px;
    padding:0px 10px;
    padding-top:40px;
  }

  #art-details
  {
    padding:0px;
  }

}


.selected-thumb
{
  border:3px solid var(--dark-color);
  pointer-events:none;
}



/* LIGHTBOX */
#lightbox
{
  position:absolute;
  display:none;
  width:100%;
  height:100%;
  background-color:rgba(0,0,0,0.8);
  z-index:999;
  user-select:none;
}

#lightbox-close
{
  position:absolute;
  right:5px;
  top:5px;
  width:40px;
  height:40px;
  border-radius:20px;
  text-align:center;
  line-height: 39px;
  font-size:50px;
  color:#FFF;
  font-weight: 700;
  cursor:pointer;
}

#lightbox-close:hover
{
  font-size:55px;
}

#lightbox-close:active
{
  font-size:45px;
}

#lightbox-left, #lightbox-right
{
  position:absolute;
  width:30%;
  height:100%;
  top:50%;
  color:rgba(255,255,255,1);
  font-weight: 200;
  transform:translate(0%, -50%);
  text-align:center;
  font-size:50px;
  cursor: pointer;
}

#lightbox-left:hover, #lightbox-right:hover
{
  color:rgba(255,255,255,1);
}

#lightbox-left.thumbs-arrow-inactive,
#lightbox-right.thumbs-arrow-inactive
{
  color:rgba(255,255,255,0.25);
  pointer-events: none;
}

.vertical-center
{
  width:100%;
  height:40px;
  position:absolute;
  top:50%;
  left:0px;
  transform:translate(0%, -50%);
  padding-left:10px;
  padding-right:10px;
}

#lightbox-left
{
  left:0px;
  text-align:left;

}

#lightbox-right
{
  right:0px;
  text-align:right;
}

#lightbox-content
{
  position:relative;
  width:100%;
  height:100%;
  display:flex;
  align-items: center;
  align-content: center;
  justify-content: center;
  flex-direction: column;
  padding:20px;
}

#lightbox-img-scaler
{
  flex-grow:1;
  width:100%;
  height:100%;
  max-width:1024px;
  max-height:1024px;
  min-height:100px;
  display:flex;
  align-items: center;
  align-content: center;
  justify-content: center;
}

#lightbox-img
{
  position:relative;
  max-width:100%;
  max-height:100%;
  border-radius:5px;
  box-shadow:2px 2px 20px #000;
  object-fit: contain;
}

.art-preview-at
{
  position:absolute;
  top:-40px;
  left:0px;
  right:40px;
  text-align: center;
  height:42px;
  line-height:42px;
  font-size:20px;
  z-index:996;
}


.art-preview-at,

.art-preview-at a
{
  color:#BB93E7;
}