body
{
  padding: 0;
  font-family: Bahnschrift;
}

.gal{
  padding: 5%;
  z-index: 6;
}

#tit{
	position:absolute;
	top:0%;
	left:10;
  font-style: fantasy;
  color: white;
}


#barra{
	position:relative;
	bottom:0%;
	right:25%;
	left:36%;
	margin-left:-150px;
}

.content {

  padding-left: 10%;
  margin-top: 5px;
}


.gal ul
{
  
  position: relative;
  transform:translate(-50%,0%);
  left: 50%;
  width: 90%;
  height: 80vh
  
}

.gal ul li
{
  filter: grayscale(100%);
  -webkit-filter: grayscale(100%);
  transition: filter 0.4s;
  -webkit-transition: -webkit-filter 1s;
  list-style: none;
  position: relative;
  width: 16.6%;
  height: 100%;
  border-right: 1px solid#000;
  float: left;
  box-sizing: border-box;
  transition: 0.5s;
  text-align: center;
  overflow: hidden;
  
}
.info-project {
	font-family: 'Roboto', sans-serif;
	font-size: 18px
}
.gal ul li:nth-child(1)
{
 
  background: url(../media/imgproyectos/COOLIFTING/Coolifting20.jpg);
  background-size: cover;
  background-position: center center;
}

.gal ul li:nth-child(2)
{
  background: url(../media/imgproyectos/COOLIFTING/Coolifting1-2.jpg);
  background-size: cover;
  background-position: center center;
}

.gal ul li:nth-child(3)
{
  background: url(../media/imgproyectos/INDURAMA/INDURAMA43-2.jpg);
  background-size: cover;
  background-position: center center;
}

.gal ul li:nth-child(4)
{
  background: url(../media/imgproyectos/INDURAMA/INDURAMA53-2.jpg);
  background-size: cover;
  background-repeat:no-repeat;
  background-position: center center;
}

.gal ul li:nth-child(5)
{
  background: url(../media/imgproyectos/TIGO-UNE/TigoUne-006-2.jpg);
  background-size: cover;
  background-position: center center;
}

.gal ul li:nth-child(6)
{
  background: url(../media/imgproyectos/TIGO-UNE/TigoUne-034.jpg);
  background-size: cover;
  background-repeat:no-repeat;
  background-position: center center;
}

.gal ul:hover li 
{

  width: 8%;
}

.gal ul li:hover
{
  filter: grayscale(0);
  -webkit-filter: grayscale(0);
  width: 60%;
}


.gal ul li .content
{
  position: absolute;
  bottom: -90%;
  left: 0;
  width: 100%;
  background: rgba(0,0,0,.8);
  box-sizing: border-box;
  color: #fff;
  opacity: 0;
}

.gal ul li:hover .content
{
  text-align: left;
  bottom: 0%;
  transition: 0.4s;
  transition-delay: 0.5s;
  opacity: 1;
  
}


/*============FOOTER==============*/
.footer-area-bottom {
	background: #252525 none repeat scroll 0 0;
	padding: 20px 0;
	margin-top: 5px;
  }
  
  .copyright-text a:hover {
	text-decoration: underline;
	color: rgb(240, 244, 245);
  }
  
  .copyright-text a {
	color: #444;
  }
  
  .copyright>p {
  text-align: center;
	margin-bottom: 0;
	color: rgb(255, 251, 251);
  }
  
  .copyright a, .credits a {
	color: rgb(240, 240, 240);
  }
  
  .credits {
	padding-top: 5px;
	text-align: center;
	color:  rgb(240, 240, 240);
  }

  @media (max-device-width: 767px) {
    .copyright>p {
      margin-bottom: 0;
      color: rgb(255, 251, 251);
      text-align: center;
      font-family: Bahnschrift;
      font-size: 25Spx;
      }
      .credits {
        font-size: 12px;
      }
  }