﻿section.portfolio > ul {
  margin: 0;
  padding: 0;
  max-width: 100%;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  position:relative;
}
section.portfolio > ul li {
  list-style-type: none;
  padding: 0px;
  overflow: hidden;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  float:left;
}
section#fixliChild > ul li:first-child{
    position:absolute;
	left: -230px;
	top: -142px;
    box-shadow: -1px 0px 1px 1px #888;
}
section.portfolio > ul li:last-child{
}
section.portfolio > ul li .portfolio-item {
  position: relative;
  overflow: hidden;
}
section.portfolio > ul li .portfolio-item .image,
section.portfolio > ul li .portfolio-item .image .bgli {
  max-width: 100%;
  width: 100%;
  display: block;
  -webkit-transition: all 600ms cubic-bezier(0.19, 1, 0.22, 1);
  -moz-transition: all 600ms cubic-bezier(0.19, 1, 0.22, 1);
  -o-transition: all 600ms cubic-bezier(0.19, 1, 0.22, 1);
  transition: all 600ms cubic-bezier(0.19, 1, 0.22, 1);
  -webkit-transform-origin: 50% 0%;
  -moz-transform-origin: 50% 0%;
  -o-transform-origin: 50% 0%;
  -ms-transform-origin: 50% 0%;
  transform-origin: 50% 0%;
}
section.portfolio > ul li .portfolio-item h4,
section.portfolio > ul li .portfolio-item p {
  -webkit-opacity: 0;
  -moz-opacity: 0;
  opacity: 0;
  -webkit-transition: all 500ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
  -moz-transition: all 500ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
  -o-transition: all 500ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
  transition: all 500ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
    section.portfolio > ul li .portfolio-item .title {
        background-color: #F68B32;
        position: absolute;
        bottom: 0px;
        right: 0px;
        padding: 10px;
        color: #FFF;
        font-size: 17px;
        font-weight: 700;
        text-transform:uppercase;
    }
section.portfolio > ul li .portfolio-item.no-categories .project-info .like {
  left: 40px;
  right: auto;
}
section.portfolio > ul li .portfolio-item.no-categories .project-info .like span {
  left: 100%;
  right: auto;
  margin-left: 10px;
  margin-right: 0;
}
section.portfolio > ul li .opened-arrow {
  width: 0px;
  height: 0px;
  border-style: solid;
  border-width: 0 15px 15px 15px;
  border-color: transparent transparent #ffffff transparent;
  line-height: 0px;
  margin: 0;
  position: absolute;
  bottom: 0;
  left: 50%;
  visibility: hidden;
  margin-left: -15px;
  z-index: 10;
  -webkit-opacity: 0;
  -moz-opacity: 0;
  opacity: 0;
}
section.portfolio > ul li:hover .title{display:none}
section.portfolio > ul li:hover h4,
section.portfolio > ul li:hover p {
  -webkit-opacity: 1;
  -moz-opacity: 1;
  opacity: 1;
  -webkit-transition-delay: 150ms;
  -moz-transition-delay: 150ms;
  -o-transition-delay: 150ms;
  transition-delay: 150ms;
}
section.portfolio > ul li:hover a{
    color:#fff;
}
section.portfolio > ul li:hover .project-info {
  -webkit-opacity: 1;
  -moz-opacity: 1;
  opacity: 1;
}
section.portfolio > ul li:hover .image img,
section.portfolio > ul li:hover .image .bgli {
  -webkit-transform: scale(1.2);
  -moz-transform: scale(1.2);
  -o-transform: scale(1.2);
  -ms-transform: scale(1.2);
  transform: scale(1.2);
  -webkit-transition: all 600ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
  -moz-transition: all 600ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
  -o-transition: all 600ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
  transition: all 600ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
section.portfolio > ul li .project-info {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1000;
  width: 100%;
  height: 100%;
  display: block;
  color: #ffffff;
  -webkit-opacity: 0;
  -moz-opacity: 0;
  opacity: 0;
  -webkit-transition: all 500ms cubic-bezier(0.19, 1, 0.22, 1);
  -moz-transition: all 500ms cubic-bezier(0.19, 1, 0.22, 1);
  -o-transition: all 500ms cubic-bezier(0.19, 1, 0.22, 1);
  transition: all 500ms cubic-bezier(0.19, 1, 0.22, 1);
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  text-align:center;
  cursor:pointer;
}
section.portfolio > ul li .project-info-2{
    background: rgba(2, 114, 167, 0.95);
}
section.portfolio > ul li .project-info ::selection {
  color: #222222;
}
section.portfolio > ul li .project-info ::-moz-selection {
  color: #222222;
}
section.portfolio > ul li .project-info h4 {
  color: #ffffff;
  display: inline-block;
}
section.portfolio > ul li .project-info h4:hover a {
  color: rgba(255, 255, 255, 0.8);
}
section.portfolio > ul li .project-info h4 a {
  display: block;
  color: #ffffff;
}
section.portfolio > ul li .project-info .like {
  position: absolute;
  display: block;
  width: 100px;
  height: 40px;
  background: url('/images/hover-1-2.png') no-repeat center top;
  right: 40px;
  bottom: 13px;
}
section.portfolio > ul ul.service-list li {
  height: auto;
  line-height: 30px;
  font-size: 14px;
}
section.portfolio > ul ul.service-list li span {
  color: #AAA;
}
section.portfolio > ul .project-open {
  position: absolute;
  background: #ffffff;
  width: 100%;
  height: auto;
  padding: 60px 0;
  margin: 0;
  display: none;
  z-index: 100;
}
.artile-index h4{
    color:#808184;
}
.artile-index:hover img{
    -webkit-transform: scale(1.08);
  -moz-transform: scale(1.08);
  -o-transform: scale(1.08);
  -ms-transform: scale(1.08);
  transform: scale(1.08);
  -webkit-transition: all 600ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
  -moz-transition: all 600ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
  -o-transition: all 600ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
  transition: all 600ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.artile-index:hover a{
    text-decoration:none;
}
.artile-index:hover h4{
    color:#FF7F00;
    text-decoration:none;
}
@media (max-width: 480px) {
section#fixliChild > ul li:first-child{
    position: relative;
    left: 0;
    top: 0;
    width: 100%;
    margin: 0;
    height: auto;
    margin-bottom: 5px;
}
section.portfolio > ul li{
    width: 47%;
    margin: 4px 1.5%;
    height: 100%;
    max-height: 171px;}
}