.overlay {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
} 

 div#portfolio-mixitup {
 padding:0px 5% 0px 5% ;
 }


.full-width-image {
    max-width: 100%;
    margin: 0 auto;
}
.full-width-image {
    width: 100%;
} 

.portfolio-items {
 margin-left:0px; 

}

.portfolio-items .mix{
 margin-right:-6px;
margin-top:-6px; 
width:25%;

}

.portfolio-items .overlay{
text-align:center;
height:89.5%;
margin:3% 7% !important ;
}

.portfolio .overlay {
  background:rgba(0, 0, 0, 0.8) ;
} 

#portfolio-mixi {
display:none;
text-indent:-5000px;
}

.portfolio,
.portfolio:hover,
.portfolio:active,
.portfolio:focus {
    display: block;
    float: left;
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    text-decoration: none;
   
}
.portfolio .overlay .content {
    display: block;
    position: absolute;
    width: 90%;
    height: 70px;
    top: 50%;
    left: 0;
    margin-top: -35px;
	text-transform:uppercase;
  
}
.portfolio .overlay .fa {
    font-size: 28px;
    color: #fff;
    margin-bottom: 4px;
}
.portfolio .overlay strong {
    display: block;
    font-size: 18px;
    font-weight: 500;
    color: #fff;
}
.portfolio .overlay em {
    display: block;
    font-size: 13px;
    font-weight: 400;
    font-style: normal;
    color: #fff;
}
.portfolio-filter ul,
.portfolio-filter li {
    display: inline-block;
    text-align: center;
    list-style: none;
    padding: 0;
    margin:0; 
}
.portfolio-filter ul {
    margin: 40px 0 60px 0;
	width:100%;
}
.portfolio-filter li {
    margin: 0 3px 10px 3px;
}
.portfolio-filter a,
.portfolio-filter a:hover,
.portfolio-filter a:visited,
.portfolio-filter a:focus {
    display: block;
    height: 30px;
    background: #f3f5f8;
	 background: #fff;
    color: #454545;
    font-size: 12px;
    line-height: 30px;
    text-transform: uppercase;
    text-decoration: none;
    padding: 0 10px;
    border-radius: 3px;
	 outline: none;
	text-decoration:none;
}

 
.portfolio-filter .active a {
    color: #fff;
	outline: none;
	text-decoration:none;
}

#portfolio img{max-width:100%;}
#portfolio-filter {
  overflow: hidden;
  margin: 0 0 50px;
  text-transform: uppercase;
  text-align: center;
}
#portfolio-filter li {
  float: left;
  width: 96%;
  margin: 0% 2%  ;
  padding: 0;
  line-height: 2.5;
  display: inline-block;
 
}

.mix img {
margin:3.5% 7%;
}



 @media (min-width: 250px) {
  #portfolio-filter li {
    float: none;
    width: auto;
    margin: 0 60px 0 0;
    font-size: 1.3em;
    text-align: center;
    background: transparent;
  }
}
#portfolio-filter li a {
  position: relative;
  display: block;
  padding: 0 25px;
  color: #666666;
 
}
@media (min-width: 250px) {
  #portfolio-filter li a {
  display: inline-block;
}


#portfolio-filter li a .type-counter {
  z-index: 1;
  position: absolute;
  width: 40px;
  top: 0;
  right: 0px;
  color: #fff;
  background: #bbb;
  -webkit-transition: all 0.4s;
  -moz-transition: all 0.4s;
  -ms-transition: all 0.4s;
  -o-transition: all 0.4s;
  transition: all 0.4s;
  
}
@media (min-width: 250px) {
  #portfolio-filter li a .type-counter {
    opacity:0;-webkit-opacity:0;-moz-opacity:0;
  }
}
#portfolio-filter li a:hover {
  background: #eee;
}
#portfolio-filter li a:hover .type-counter {
  opacity:1;-webkit-opacity:1;-moz-opacity:1;-o-opacity:1;
}
@media (min-width: 250px) {
  #portfolio-filter li a:hover .type-counter {
    right: -30px;
  }
}
#portfolio-filter li.active {
  background: #ffcd00;
}
#portfolio-filter li.active .type-counter {
  opacity:1;-webkit-opacity:1;-moz-opacity:1;-o-opacity:1;
}
@media (min-width: 992px) {
  #portfolio-filter li.active .type-counter {
    right: -35px;
  }
}
#portfolio-filter li.active a {
  color: #fff;
}
#portfolio-filter li.active a:hover {
  background: inherit;
}
#portfolio-list {
  list-style: none;
  margin: 0;
  padding: 0;
  background:#000;
  display: block;
}
#portfolio-list li {
  position: relative;
  overflow: hidden;
  display: inline-block;
  width: 50%;
  margin-left: -1px;
  padding: 0;
  -webkit-transition: all 0.8s;
  -moz-transition: all 0.8s;
  -ms-transition: all 0.8s;
  -o-transition: all 0.8s;
  transition: all 0.8s;
}

@media (min-width: 768px) {


#portfolio-list li .header {
  visibility:hidden;
  font-size: 17px;
  line-height: 1.5;
  font-weight: 900;
  text-transform: uppercase;
  color:#fff;
  position:absolute;
  top:-100%;
  left:25px;
 -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
  -ms-transition: all 0.5s;
  -o-transition: all 0.5s;
  transition: all 0.5s;
  -webkit-transform: scale(0);
  -moz-transform: scale(0);
  -ms-transform: scale(0);
  -o-transform: scale(0);
  transform: scale(0);
}

#portfolio-list li:hover .header{
  visibility:visible;
  -webkit-transform: scale(1);
  -moz-transform: scale(1);
  -ms-transform: scale(1);
  -o-transform: scale(1);
  top:18px;
  transform: scale(1);

}
}
@media (min-width: 250px) {
  #portfolio-list li .header {
    display: block;
  }
}
#portfolio-list li .body {
  visibility:hidden;
  font-size: 14px;
  color:#fff;
  position:absolute;
  top:-100%;
  left:25px;
 -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
  -ms-transition: all 0.5s;
  -o-transition: all 0.5s;
  transition: all 0.5s;
  -webkit-transform: scale(0);
  -moz-transform: scale(0);
  -ms-transform: scale(0);
  -o-transform: scale(0);
  transform: scale(0);  
  transition-delay:0.1s;
}

#portfolio-list li:hover .body{
visibility:visible;
  -webkit-transform: scale(1);
  -moz-transform: scale(1);
  -ms-transform: scale(1);
  -o-transform: scale(1);
  top:55px;
  transform: scale(1);
}

@media (min-width: 992px) {
  #portfolio-list li .body {
    display: block;
  }
}
#portfolio-list li img {
  width: 100%;
  -webkit-transition: all 0.75s;
  -moz-transition: all 0.75s;
  -ms-transition: all 0.75s;
  -o-transition: all 0.75s;
  transition: all 0.75s;
  
  
}
#portfolio-list li .portfolio-item-content {
 opacity:0;-webkit-opacity:0;-moz-opacity:0;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  color: #050F1E;
  animation:20s linear 0s normal none infinite A;
  -webkit-animation:20s linear 0s normal none infinite A;
  -moz-animation:20s linear 0s normal none infinite A;
  -o-animation-name: A;
   -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
  -ms-transition: all 0.5s;
  -o-transition: all 0.5s;
  transition: all 0.5s;
}
#portfolio-list li .more {
  opacity:0;-webkit-opacity:0;-moz-opacity:0;-o-opacity:0;
  display: inline-block;
  font-style: normal;
  font-weight: 100;
  line-height: 39px;
  text-align:center;
  position: absolute;
  top: 100%;
  right: 10%;
  margin-left: -40px;
  height: 42px;
  width: 42px;
  color: #fff;
   -webkit-border-radius:50%;
	-moz-border-radius:50%;
	-ms-border-radius:50%;
	-o-border-radius:50%;
	border-radius:50%;

  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
  -ms-transition: all 0.5s;
  -o-transition: all 0.5s;
  transition: all 0.5s;
  -webkit-transform: scale(0);
  -moz-transform: scale(0);
  -ms-transform: scale(0);
  -o-transform: scale(0);
  transform: scale(0);
}
#portfolio-list li:hover img {
  -webkit-transform: scale(1.5);
  -moz-transform: scale(1.5);
  -ms-transform: scale(1.5);
  -o-transform: scale(1.5);
  transform: scale(1.5);
}
#portfolio-list li:hover .portfolio-item-content {
  opacity:1;-webkit-opacity:1;-moz-opacity:1;-o-opacity:1;
}
#portfolio-list li:hover .more {
  opacity:0.75;-webkit-opacity:0.75;-moz-opacity:0.75;-o-opacity:.75;
  top:78%;
  -webkit-transform: scale(1);
  -moz-transform: scale(1);
  -ms-transform: scale(1);
  -o-transform: scale(1);
  transform: scale(1);
}
@media (min-width: 250px) {
  #portfolio-list li:hover .more {
    margin-top: 0;
  }
}
#portfolio-list li:hover .more:hover {
  opacity:1;-webkit-opacity:1;-moz-opacity:1;-o-opacity:1;
  -webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  -o-transform: rotate(90deg);
  transform: rotate(90deg);
}

.portfolio-items .mix{
    display:none;
}

}

@media (max-width: 480px) {
  .portfolio .overlay .fa {
    font-size: 14px;
    color: #fff;
    margin-bottom: 4px;
}
div#portfolio-mixitup {
 padding:0;
 }

.portfolio .overlay strong {
    display: block;
    font-size: 10px;
    font-weight: 500;
    color: #fff;
}
.portfolio .overlay em {
    display: block;
    font-size: 8px;
    font-weight: 400;
    font-style: normal;
    color: #fff;
}

.portfolio-items .mix{
 margin-right:-6px;
margin-top:-6px; 
width:100%;

  }

@media (max-width: 360px) {
  .portfolio .overlay .fa {
    font-size: 10px;
    color: #fff;
    margin-bottom: 4px;
}
.portfolio .overlay strong {
    display: block;
    font-size: 8px;
    font-weight: 500;
    color: #fff;
}
.portfolio .overlay em {
    display: block;
    font-size: 6px;
    font-weight: 400;
    font-style: normal;
    color: #fff;
}



 }
  
@media (max-width: 650px) {
.portfolio-items .mix{
width:95%;
float:left;
margin:0;

}

  }