/* _BLUEIMPGALLERY.SCSS */

@charset 'UTF-8';
@import "../config/config.scss";


.blueimp-gallery,
.blueimp-gallery>.slides>.slide>.slide-content{
  position:absolute;
  top:0;
  right:0;
  bottom:0;
  left:0;
  -moz-backface-visibility:hidden;
}

.blueimp-gallery>.slides>.slide>.slide-content{
  margin:auto;
  max-width:100%;
  max-height:100%;
  opacity:1;
}

.blueimp-gallery{
  position:fixed;
  z-index:99999;
  overflow:hidden;
  background:#000;
  background:rgba(0,0,0,0.9);
  opacity:0;
  visibility:hidden;
  display:none;
  -ms-touch-action:none;
}

.blueimp-gallery-carousel{
  position:relative;
  z-index:auto;
  height:432px;
  max-width:768px;
  margin:1em auto;
  box-shadow:0 0 10px #000;
}

.blueimp-gallery-display{
  display:block;
  visibility:visible;
  opacity:1;
}

.blueimp-gallery>.slides{
  position:relative;
  height:100%;
  overflow:hidden;
}

.blueimp-gallery>.slides>.slide{
  position:relative;
  float:left;
  height:100%;
  text-align:center;
  transition-timing-function:cubic-bezier(0.645,0.045,0.355,1);
}

.blueimp-gallery,.blueimp-gallery>.slides>.slide>.slide-content{
  transition:opacity .5s linear;
}


.blueimp-gallery>.slides>.slide-loading>.slide-content{
  opacity:0;
}


.blueimp-gallery>.slides>.slide-error>.slide-content{
  display:none;
}

.blueimp-gallery>.prev,
.blueimp-gallery>.next{
  width: 10vw;
  height: 100vh;
  opacity:.9;
  text-indent: -99999;
  font-size: 1px;
  position: absolute;
  top: 0;
  cursor:pointer;
  display:block;
  background: none;

  &:after {
    @include arrow("up", $bianco);
    content: '';
    width: 50%;
    height: 0;
    padding-bottom: 50%;
    position: absolute;
    top: 50%;
    left: 10%;
    transform: translateY(-50%) rotate(90deg);
  }
}

.blueimp-gallery>.next{
  left:auto;
  right:0;
  &:after {
    @include arrow("up", $bianco);
    left: initial;
    right: 10%;
    transform: translateY(-50%) rotate(-90deg);
  }
}


.notouch .blueimp-gallery>.prev { left: 2%; }
.notouch .blueimp-gallery>.prev:hover { left: 1%; }

.notouch .blueimp-gallery>.next { right: 2%; }
.notouch .blueimp-gallery>.next:hover { right: 1%; }

.notouch .blueimp-gallery>.prev,
.notouch .blueimp-gallery>.next {
  @include transition();
   opacity:.3;
}

.notouch .blueimp-gallery>.prev:hover,
.notouch .blueimp-gallery>.next:hover {
  opacity: 0.9;
  @include transition();
}



.blueimp-gallery>.close,.blueimp-gallery>.title{
  position:absolute;
  top:15px;
  left:15px;
  margin:0 40px 0 0;
  font-size:20px;
  line-height:30px;
  color:#fff !important;
  text-shadow:0 0 2px $nero;
  opacity:.8;
  display:none;
}


.blueimp-gallery, .blueimp-gallery>.slides>.slide>.slide-content {
  margin:auto !important;}
  
.blueimp-gallery>.slides>.slide>.slide-content, 
.blueimp-gallery>a.prev, 
.blueimp-gallery>a.next, 
.blueimp-gallery>a.close, 
.blueimp-gallery>a.play-pause {
  font-weight:100 !important;
  color:#fff !important;
}


.blueimp-gallery>.close {
  font-size:30px;
  width: 48px;
  height: 48px;
  position: fixed;
  left:auto;
  right: 0px;
  top: 0px;
  overflow: hidden;
  border: none;
  background: rgba(105, 105, 105, 1);
  color: $nero;
  z-index: 99999;
  display: block;
  cursor: pointer;
  margin: 0;
  padding: 0;
  text-align: center;
  line-height: 46px;
  text-decoration:none;
  cursor:pointer;
  @include transition();
}

.notouch .blueimp-gallery>.close:hover {
  background-color: $nero;
  color: $bianco;
  @include transition();
}

.blueimp-gallery>.indicator{
  position:absolute;
  top:auto;
  right:15px;
  bottom:15px;
  left:15px;
  margin:0 40px;
  padding:0;
  list-style:none;
  text-align:center;
  line-height:10px;
  display:none;}

.blueimp-gallery>.indicator>li{
  display:inline-block;
  width:9px;
  height:9px;
  margin:6px 3px 0 3px;
  border:1px solid transparent;
  background:#ccc;
  background:rgba(255,255,255,0.25) center no-repeat;
  border-radius:5px;
  box-shadow:0 0 2px #000;
  opacity:.5;
  cursor:pointer;}

  .blueimp-gallery>.indicator>.active{
    background-color:#fff;
    border-color:#fff;
    opacity:.8;
}
  
  .blueimp-gallery-controls>.indicator{
    display:block;
    transform:translateZ(0);
  }

  .blueimp-gallery-single>.indicator{
    display:none;
  }

  .blueimp-gallery>.indicator{
    -webkit-user-select:none;
    -khtml-user-select:none;
    -moz-user-select:none;
    -ms-user-select:none;
    user-select:none;}

  *+html .blueimp-gallery>.indicator>li{
    display:inline;
  }

.blueimp-gallery-carousel{
  position:relative;
  z-index:auto;
  height:432px;
  max-width:768px;
  margin:1em auto;
  box-shadow:0 0 10px #000;
}