/* shadows */
.shadows{
  max-height: 100vh;
  height: inherit;
  position: absolute;
  z-index: 3;
}
#topshadow{
  height: 100%;
  top:0;
  background-image: linear-gradient(rgba(0, 0, 0,0.4),rgba(255, 255, 255, 0));
}
#bottomshadow{
  height: 51%;
  bottom:-1px;
  background-image: linear-gradient(rgba(255, 255, 255, 0),rgba(0, 0, 0,0.6));
}
  /* endShadows */

@media (max-width: 768px)
{
  #bottomshadow{
    display: none;
  }
}


.slideshow{
  box-shadow: 0px 0px 100px 0px rgba(0, 0, 0, 0.5);
  height: 100vh;
  width: 100%;
  background:#000;
}

.item{
  background-color: rgba(0, 0, 0, 0.7);
  position: absolute;
  display: none; 
  width: 100%;
}
.item img{
  margin: 0 auto;
  height:100%;
  max-height:100vh;
  width: auto;
  mask-image: -webkit-gradient(linear, top, bottom, 
  color-stop(0.00,  rgba(0,0,0,1)),
  color-stop(0.35,  rgba(0,0,0,1)),
  color-stop(0.50,  rgba(0,0,0,0)),
  color-stop(0.65,  rgba(0,0,0,0)),
  color-stop(1.00,  rgba(0,0,0,0)));
}


@media (max-width: 768px)
{
  .item img{
    margin-left: -50%;
  }
}

.imageshow{
  animation-duration: 2s;
  animation-name: show_image;
}
.caption{
  position: absolute;
  left: 10%;
  top: 53%;
  z-index: 4;
  color:white;
}
.caption h2{
  font-weight: 600;
  transition: 1s;
  -webkit-transition: 1s;
  -o-transition: 1s;
  -moz-transition: 1s;
}
.itemsnav {
  z-index: 4;
  margin: 0 auto !important;
  position: absolute;
  top: 80%;
  left: 0; right: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.500);
}
.itemsnav h6{
  font-size: 14px;
  font-weight: 100;
  padding-bottom:40px;
  color: rgba(255, 255, 255, 0.7);
  	transition: 0.3s;
  -webkit-transition: 0.3s;
  transition: 1s;
  -webkit-transition: 1s;
  -o-transition: 1s;
  -moz-transition: 1s;
}
.itemsnav h6:hover{
  cursor: pointer;
  color: rgba(255, 255, 255, 1);
	transition: 0.3s;
	-webkit-transition: 0.3s;

}
.hscroll{
  height: 3px;
  position: absolute;
  left: 0;
  background-color:  rgba(255, 255, 255);
}
.show{
  display: block;
  /* animation-name:show_image;
  animation-duration:0.5s; */
}

/* @keyframes show_image {
  from	{ 
  opacity:0.6;
  }
  to   {
    opacity:1;
  }
} */

.bullets {
  width: 30vw;
  height: 1.5em;
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%) translateY(-100%);
  z-index: 101;
}
.bullets .bullet{
  display: inline-block;
  width: 1em;
  height: 1em;
  margin: auto;
  background-color: rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  box-shadow: 0px 0px 20px 1px rgba(0,0,0,0.5);
}
.bullets .bullet:hover{
  cursor: pointer;
  background-color: rgba(121, 125, 131, 0.8);
  transition: 0.5s;
}
.brighter{
  background-color: rgb(195, 198, 204) !important;
}