@import url("fonts.css");

.new-grid 
{
	list-style: none;
	margin: 30px auto;
	padding: 0;
}

.new-grid li 
{
	display: inline-block;
	float: left;
	padding: 7px;
	width: 33.3%;
	opacity: 0;
}

 .new-grid li img
{
	-webkit-filter: grayscale(100%);
    filter: grayscale(100%);
    -webkit-transition: -webkit-filter 0.1s;
}

.new-grid li:hover img
{
	-webkit-filter: grayscale(0%);
   filter: grayscale(0%);
    -webkit-transition: -webkit-filter 0.1s;
}
 
.products-content
{
 position:absolute;
 z-index:99;
 opacity:0;
 transition:linear 0.3s;
/* background-color:rgba(199,178,165,0.6);*/
 background-color:rgba(0,0,0,0.6);
 width: 100%;
 width: calc(100% - 14px);
 width: -moz-calc(100% - 14px);
 width: -webkit-calc(100% - 14px);
 height:100% ;
 height: calc(100% - 14px);
 height: -moz-calc(100% - 14px);
 height: -webkit-calc(100% - 14px); 
}

.new-grid li:hover .products-content
{
  opacity:1; 
  transition:linear 0.3s; 
}

.new-grid li .products-container
{
	position: absolute;
	bottom: 0px !important;
	padding: 20px 15px 10px 15px;
	transition: all 300ms linear; 
}

.new-grid li:hover .projects-container
{
	padding: 20px 15px 15px 15px;
	transition: all 300ms linear;
}

.top-slider-right .products-content
{
  position:absolute;
  opacity:0;
  transition:linear 0.3s;
  background-color:rgba(0,0,0,0.6);
  width: 100%;
  height:100% ;
	transition:linear 0.3s; 
}

.top-slider-right:hover .products-content
{
  opacity:1; 
  transition:linear 0.3s; 
	padding-bottom: 20px;
} 

.top-slider-right .products-container
{
	position: absolute;
	bottom: 0px !important;
	padding: 20px 15px 10px 15px;
	transition: all 300ms linear; 
}

.top-slider-right:hover .projects-container
{
	padding: 20px 15px 25px 15px;
	transition: all 300ms linear;
}

 
.products-content .text-title
{
  font-family: 'SourceSansPro-SemiBold';
  text-transform:capitalize;
  color:#fff; 
  font-size:16px;
  letter-spacing:1px;	
  line-height:20px;
  margin-bottom:7px;
  text-align:left;	
  -webkit-filter: grayscale(0%);
  filter: grayscale(0%);
}	
 
.products-content .text-bodytext
{
  font-family: 'SourceSansPro-Light'; 
  color:#fff; 
  font-size:14px;	
  line-height:16px;
  text-align:left;	
 }
  
.new-grid li.shown,
.no-js .new-grid li,
.no-cssanimations .new-grid li {	opacity: 1; }

.new-grid li a,
.new-grid li img 
{
  outline: none;
  border: none;
  display: block;
  width: 100% ;
}


/* Effect 2: Move Up */
.new-grid.effect-2 li.animate 
{
  -webkit-transform: translateY(200px);
  transform: translateY(200px);
  -webkit-animation: moveUp 0.65s ease forwards;
  animation: moveUp 0.65s ease forwards;
}

@-webkit-keyframes moveUp {
  0% { }
  100% { -webkit-transform: translateY(0); opacity: 1; }
}

@keyframes moveUp {
  0% { }
  100% { -webkit-transform: translateY(0); transform: translateY(0); opacity: 1; }
}

@media screen and (max-width: 900px) { .new-grid li { width: 50%;}  }
@media screen and (max-width: 400px) { .new-grid li { width: 100%;} }
@media screen and (max-width: 360px) {  .new-grid li {  padding:  7px 0px;  } }