* { box-sizing: border-box; }

/* force scrollbar */
html { overflow-y: scroll; }

body { font-family: sans-serif; }

/* ---- grid ---- */

 /*.grid {
  background: #000; 
}*/

/* clear fix */
.grid:after {
  content: '';
  display: block;
  clear: both;
}

/* ---- .grid-item ---- */

.grid-sizer,
.grid-item {
  width: 33.333%;
}

.grid-item {
  float: left;
}

.grid-item img {
  display: block;
  max-width: 100%;
  padding:3px;
}
/* Loader */
	.loader {
	position: fixed;
	left: 0px;
	top: 0px;
	width: 100%;
	height: 100%;
	z-index: 9999;
	background: url('/img/page-loader.gif') 50% 50% no-repeat rgb(0,0,0);
}


/* Gallery update */

/* .grid-item:hover {
     border: 3px solid #333333;
} */
.container-screen {
  position: relative;
  width: 100%;
  overflow: hidden;
}
.image {
  display: block;
  width: 100%;
  height: auto;
  margin:0px;
  padding:0px;
}
.overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: rgba(0, 0, 0, 0.9);
  overflow: hidden;
  width: 100%;
  height: 0;
  transition: .5s ease;
  overflow: hidden;
}
.overlay h3 {
    position:absolute;
    top:0px;
    left:0px;
    color:#ffffff !important;
}
.overlay2 {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: rgba(0, 0, 0, 0.9);
  overflow: hidden;
  width: 0;
  height: 100%;
  transition: .2s ease;
}
.container-screen:hover img {
    z-index: 10;
   /*  transform: translateY(-35px); */
   /* -webkit-transform: rotateZ(360deg);*/ /* Safari */
   /* transform: rotateZ(360deg); */
   /* transform: rotate3d(10, -1, 2, -30deg); */
    transform: scale(0.7);
    transition: 0.7s ease;
}
.container-screen img {
  position: relative;
  z-index:-20;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.9);
  overflow: hidden;
  width: 100%;
  height: 100%;
  transition: 0.7s ease;
}
.container-screen:hover .overlay {
  height: 50%;
}
.container-screen:hover .overlay2 {
  width: 100%;
}
/* .text {
  white-space: nowrap; 
  color: white;
  font-size: 20px;
  position: absolute;
  overflow: hidden;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
} */
.container-screen .overlay a {
    position: absolute;
    top: 10px;
    right: 10px;
}
.container-screen .overlay .info {
    position: absolute;
    z-index:10;
    top: 25px;
    left: 10px;
    clear:both;
    font-size:12px;
    font-weight: bold;
}
.container-screen .overlay a {
    text-align: center;
    /* padding: 7px 12px; */
    padding: 6px 6px;
    border-radius: 0px;
    border:1px solid #222222;
    display: inline-block;
    background-color: rgba(0, 0, 0, 0.5);
    color: #ffffff !important;
}
.container-screen .overlay a {
    font-weight: 300;
    color: #fff;
    text-decoration: none;
}
.container-screen .overlay h4 {
    /* margin: 10px; */
    margin-top: 5px;
    margin-left: 5px;    
    margin-bottom: 0px;    
    /* padding: 10px; */
    padding-top: 0px;
    padding-bottom: 5px;
    padding-left: 5px;         
    color: #fff;
    text-transform: none !important;
}

@media screen and (max-width: 450px) {
  .grid {
      padding: 10px 10px 100px 10px;
  }
  .grid2 {
      width: 94%;
      min-width: 94%;
  }
  .grid-item {
      width: 94%;
      min-width: 94%;
  }
}