/*

*

* Gallery-specific Styles

*

*/


/*风 格 酷模板网  做优质整站模板下载网站 www.feng ge ku.com*/
* {

  margin: 0;

  padding: 0;

  list-style: none;

  -moz-box-sizing: border-box;

  box-sizing: border-box

}



#gallery-container {

  font-size: 20px;

  margin: auto;

  position: relative;

  max-width: 50em;

  text-align: center;

  overflow: hidden;

  padding-top: 1em

}



#gallery-container:full-screen {

  max-width: 100% !important;

  width: 100%;

  height: 100% !important;

  background-color: #111

}



#gallery-container:-webkit-full-screen {

  max-width: 100% !important;

  width: 100%;

  height: 100% !important;

  background-color: #111

}



#gallery-container:-moz-full-screen {

  max-width: 100% !important;

  width: 100%;

  height: 100% !important;

  background-color: #111

}



.controls {

  text-align: center;

  font-size: 1em;

  opacity: 0;

  pointer-events: none;

  -webkit-transition: opacity .3s ease;

  transition: opacity .3s ease;

  position: absolute;

  bottom: 0;

  left: 0;

  right: 0

}



.control,

.grid,

.fs-toggle {

  width: .66em;

  height: .66em;

  text-align: center;

  line-height: .5em;

  cursor: pointer;

  display: inline-block;

  margin-right: 10px

}



.showControls {

  opacity: 1;

  pointer-events: auto;

  -webkit-transition: opacity .6s 1s ease;

  transition: opacity .6s 1s ease

}



.hideControls {

  opacity: 0;

  pointer-events: none

}



.icon-grid,

#gallery-container .icon-arrow-left,

#gallery-container .icon-arrow-right,

.icon-fullscreen-exit,

.icon-fullscreen {

  display:inline-block;

  width: 20px;

  height: 20px;

  background-image: url(../image/controls-light2.png);

  background-repeat: no-repeat

}



.icon-grid {

  background-position: 0 0

}



#gallery-container .icon-arrow-left {

  background-position: -40px 0

}





#gallery-container .icon-arrow-right {

  background-position: -80px 0;



}

#gallery-container  .icon-arrow-right:before{

  display: none;

}



.icon-fullscreen-exit {

  background-position: -120px 0

}



.icon-fullscreen {

  background-position: -160px 0

}

.fs-toggle {

  display: none;

}





.item {

  display: inline-block;

  cursor: pointer;

  width: 24%;

  height: auto;

  margin-right: .5%

}



.item img,

.item--big img {

  width: 100%;

  display:block;

}



.items--big {

  position: absolute;

  top: 0;

  left: 0

  right:0;

  width: 100%;

  height: 100%;

  pointer-events: none

}



.item--big {

  position: absolute;

  width: 60%;

  height: auto;

  left: 20%;

  right: 20%;

  top: 3em;

  opacity: 0;

  -webkit-transform: scale(.8);

  transform: scale(.8)

}

.item--big .img-caption{

  position:absolute;

  width:100%;

  bottom:0;

  left:0;

  right:0;

  background-color: rgba(0,0,0,0.6);

  color:white;

  padding:10px;

  font-size:.8em;

  text-align:center;

}

.fadeInScaleUp {

  -webkit-animation: fadeInScaleUp .5s ease-out .6s forwards;

  animation: fadeInScaleUp .5s ease-out .6s forwards;

  z-index: 3

}



.fadeOut {

  -webkit-animation: fadeOut .4s ease-out forwards;

  animation: fadeOut .4s ease-out forwards;

  z-index: 1

}



@keyframes fadeOut {

  from {

    opacity: 1;

    -webkit-transform: scale(1);

    transform: scale(1)

  }



  to {

    opacity: 0;

    -webkit-transform: scale(1);

    transform: scale(1)

  }

}



@-webkit-keyframes fadeOut {

  from {

    opacity: 1;

    -webkit-transform: scale(1);

    transform: scale(1)

  }



  to {

    opacity: 0;

    -webkit-transform: scale(1);

    transform: scale(1)

  }

}



@keyframes fadeInScaleUp {

  from {

    opacity: 0;

    -webkit-transform: scale(.8);

    transform: scale(.8)

  }



  to {

    opacity: 1;

    -webkit-transform: scale(1);

    transform: scale(1)

  }

}



@-webkit-keyframes fadeInScaleUp {

  from {

    opacity: 0;

    -webkit-transform: scale(.8);

    transform: scale(.8)

  }



  to {

    opacity: 1;

    -webkit-transform: scale(1);

    transform: scale(1)

  }

}



.scaleDownFadeOut {

  -webkit-animation: scaleDownFadeOut .4s ease-in forwards;

  animation: scaleDownFadeOut .4s ease-in forwards;

  pointer-events: none

}



@keyframes scaleDownFadeOut {

  0% {

    opacity: 1;

    -webkit-transform: scale(1);

    transform: scale(1)

  }



  99% {

    opacity: 0;

    -webkit-transform: scale(.5);

    transform: scale(.5)

  }



  100% {

    opacity: 0;

    -webkit-transform: scale(1);

    transform: scale(1)

  }

}



@-webkit-keyframes scaleDownFadeOut {

  0% {

    opacity: 1;

    -webkit-transform: scale(1);

    transform: scale(1)

  }



  99% {

    opacity: 0;

    -webkit-transform: scale(.5);

    transform: scale(.5)

  }



  100% {

    opacity: 0;

    -webkit-transform: scale(1);

    transform: scale(1)

  }

}



.scaleUpFadeIn {

  opacity: 0;

  -webkit-transform: scale(1);

  transform: scale(1);

  -webkit-animation: scaleUpFadeIn ease-in-out .4s forwards;

  animation: scaleUpFadeIn ease-in-out .4s forwards;

  -webkit-animation-duration: .4s;

  animation-duration: .4s

}



@keyframes scaleUpFadeIn {

  0% {

    opacity: 0;

    -webkit-transform: scale(1);

    transform: scale(1)

  }



  1% {

    opacity: 0;

    -webkit-transform: scale(.5);

    transform: scale(.5)

  }



  100% {

    opacity: 1;

    -webkit-transform: scale(1);

    transform: scale(1)

  }

}



@-webkit-keyframes scaleUpFadeIn {

  0% {

    opacity: 0;

    -webkit-transform: scale(1);

    transform: scale(1)

  }



  1% {

    opacity: 0;

    -webkit-transform: scale(.5);

    transform: scale(.5)

  }



  100% {

    opacity: 1;

    -webkit-transform: scale(1);

    transform: scale(1)

  }

}



.showLastSecond {

  opacity: 0;

  -webkit-transform: scale(1);

  transform: scale(1);

  -webkit-animation: showLastSecond ease-in-out .4s forwards;

  animation: showLastSecond ease-in-out .4s forwards;

  -webkit-animation-duration: .4s;

  animation-duration: .4s

}



@keyframes showLastSecond {

  0% {

    opacity: 0;

    -webkit-transform: scale(1);

    transform: scale(1)

  }



  1% {

    opacity: 0;

    -webkit-transform: scale(.5);

    transform: scale(.5)

  }



  99% {

    opacity: 0;

    -webkit-transform: scale(1);

    transform: scale(1)

  }



  100% {

    opacity: 1;

    -webkit-transform: scale(1);

    transform: scale(1)

  }

}



@-webkit-keyframes showLastSecond {

  0% {

    opacity: 0;

    -webkit-transform: scale(1);

    transform: scale(1)

  }



  1% {

    opacity: 0;

    -webkit-transform: scale(.5);

    transform: scale(.5)

  }



  99% {

    opacity: 0;

    -webkit-transform: scale(1);

    transform: scale(1)

  }



  100% {

    opacity: 1;

    -webkit-transform: scale(1);

    transform: scale(1)

  }

}



@media screen and (max-width: 30em) {

  .item--big {

    width: 80%;

    right: 10%;

    left: 10%

  }

}