.dzsap-main-con.loaded-item {
  opacity: 1;
  visibility: visible; }

.dzsap-main-con.loading-item {
  opacity: 1;
  visibility: visible; }

.dzsap-main-con {
  z-index: 5555;
  position: fixed;
  width: 100%;
  height: 100%;
  opacity: 0;
  visibility: hidden;
  top: 0;
  left: 0;
  transition-property: opacity, visibility;
  transition-duration: 0.3s;
  transition-timing-function: ease-out; }

.dzsap-main-con .overlay-background {
  background-color: rgba(50, 50, 50, 0.5);
  position: absolute;
  width: 100%;
  height: 100%; }

.dzsap-main-con .box-mains-con {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  pointer-events: none; }

.dzsap-main-con .box-main {
  pointer-events: auto;
  max-width: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate3d(-50%, -50%, 0);
  transition-property: left, opacity;
  transition-duration: 0.3s;
  transition-timing-function: ease-out; }


.dzsap-main-con.transition-slideup.loaded-item .transition-target {
  opacity: 1;
  visibility: visible;
  transform: translate3d(0, 0, 0); }

.dzsap-main-con.transition-slideup .transition-target {
  opacity: 0;
  visibility: hidden;
  transform: translate3d(0, 50px, 0);
  transition-property: all;
  transition-duration: 0.3s;
  transition-timing-function: ease-out; }

.dzsap-main-con .box-main-media-con {
  max-width: 100%; }

.dzsap-main-con .box-main .close-btn-con {
  position: absolute;
  right: -15px;
  top: -15px;
  z-index: 5;
  cursor: pointer;
  width: 30px;
  height: 30px;
  background-color: #dadada;
  border-radius: 50%; }

.close-btn--icon{

  color: #222;
  font-size: 20px;
  position: absolute;
  top: 50%;
  left: 50%;
  display: block;
  transform: translate3d(-50%,-50%,0);
}

.dzsap-main-con.gallery-skin-default .box-main-media {
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.3); }

.dzsap-main-con .box-main-media-con .box-main-media {
  transition-property: width, height;
  transition-duration: 0.3s;
  transition-timing-function: ease-out; }

.box-main-media.type-inlinecontent {
  background-color: #ffffff;
  padding: 15px; }

.dzsap-main-con.skin-default .box-main:not(.with-description) .real-media {
  border-radius: 5px; }

.dzsap-main-con .box-main-media-con .box-main-media > .real-media {
  width: 100%;
  height: 100%; }


.real-media .hidden-content-for-zoombox, .real-media > .hidden-content {
  display: block !important; }

.hidden-content {
  display: none !important; }

.social-icon {
  margin-right: 3px;
  position: relative; }

.social-icon > .fa {
  font-size: 30px;
  color: #999;
  transition-property: color;
  transition-duration: 0.3s;
  transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1); }

.social-icon > .the-tooltip {
  line-height: 1;
  padding: 6px 5px;
  background: rgba(0, 0, 0, 0.7);
  color: #FFFFFF;
  font-family: "Lato", "Open Sans", arial;
  font-size: 11px;
  font-weight: bold;
  position: absolute;
  left: 8px;
  white-space: nowrap;
  pointer-events: none;
  bottom: 100%;
  margin-bottom: 7px;
  opacity: 0;
  visibility: hidden;
  transition-property: opacity,visibility;
  transition-duration: 0.3s;
  transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1); }


.social-icon:hover > .the-tooltip{
  opacity:1;
  visibility: visible;
}

.social-icon > .the-tooltip:before {
  content: "";
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 6px 6px 0 0;
  border-color: rgba(0, 0, 0, 0.7) transparent transparent transparent;
  position: absolute;
  left: 0;
  top: 100%; }

.share-content > * + *{
  margin-top: 20px;
}

h6.social-heading {
  display: block;
  text-transform: uppercase;
  font-family: sans-serif;
  font-size: 10px;
  font-weight: bold;
  margin-top: 0px;
  margin-bottom: 10px;
  color: #222222;
  letter-spacing: 1px;
}

.field-for-view {
  background-color: #f0f0f0;
  line-height: 1;
  color: #555;
  padding: 8px;
  white-space: nowrap;
  font-size: 13px;
  overflow: hidden;
  text-overflow: ellipsis;
  font-family: 'Monospaced', Arial; }

textarea.field-for-view {
  width: 100%;
  white-space: pre-line;
  line-height: 1.75; }


.box-main-for-share .type-inlinecontent{
  height: auto!important;
}

@media all and (max-height: 300px){

  .real-media > .share-content:not(.a){
    display: flex!important;
    flex-wrap: nowrap;
    align-items: baseline;
  }
  .share-content > *{
    flex: 0 0 33%;
    overflow: hidden;
  }
}