/*=================================================
13 - Portfolio 
=================================================*/

.ocp-container {
  background-color: #f7f7f7;
  padding: 61px 0 62px 0; 
  border-top: solid 1px #f1f1f1;
  border-bottom: solid 1px #f1f1f1;
}

/****** Portfolio ******/

.container-prjects-b {
  background: #fff;
  padding: 81px 0 54px 0;
}
.projects-view {
  margin: 20px 0 35px 0;
}
.projects-view .project-b-item .project-image {
 float: left;
 width: 50%;
 background: #8d8d8d;
}
.projects-view:after{
  clear: both;
  content: " ";
  display: table;
  height: 0;
  visibility: hidden; 
}

.projects-view .project-b-item .project-image img {
-webkit-transition: all .25s linear;
-moz-transition: all .25s linear;
-o-transition: all .25s linear;
transition: all .25s linear;
-webkit-transform: translateZ(0);
-moz-transform: translateZ(0);
-ms-transform: translateZ(0);
transform: translateZ(0);
}
.upperLeafBG {
    padding: 0 0 !important;
}

@media only screen and (min-width: 768px) and (max-width:990px) {
    .projects-view .project-b-item .project-image img {
        margin-left: 10%;
    }
}

.projects-view .project-b-item .project-b-des  {
position: relative;
float: right;
height: 320px;
width: 50%;
padding:20px 5px 10px 5px; 
background: #f5f5f5;
color: #272727;
text-align: center;
}

@media only screen and (min-width: 1200px){
    .projects-view .project-b-item:nth-child(even) div.project-image {
         float: right;
    }
    .projects-view .project-b-item:nth-child(even) div.project-b-des {
         float: left;
    }
}


.projects-view .project-b-item .project-b-des .title-un {
  font-size: 24px;
text-transform: uppercase;
letter-spacing: 2px;
margin-bottom: 45px;
}
.projects-view .project-b-item .project-b-des .title-un-des { 
margin: 45px auto 20px auto;
}
.projects-view .project-b-item:nth-child(odd) .project-b-des:after {
top: 40%;
left: -14px;
position: absolute;
content: '';
width: 0;
height: 0;
border-style: solid;
border-width: 24px 16px 24px 0;
border-color: transparent #f5f5f5 transparent transparent;
display: block;
}

.projects-view .project-b-item:nth-child(even) div.project-b-des:after {
top: 40%;
right: -14px;
position: absolute;
content: '';
width: 0;
height: 0;
border-style: solid;
border-width: 24px 0 24px 16px;
border-color: transparent transparent transparent #f5f5f5;
display: block;
}

.project-b-link {
text-align: center;
color: #BBB;
font-size: 1.5em;
margin: 5px;
}

.projects-view .project-b-item .project-image:hover img {
 opacity: 0.5;
} 

/****** Portfolio filter ******/
.portfolio-container {
  padding: 46px 0;
}

.port-filter { 
  margin: 15px 0 28px 0;
}
.port-filter ul { margin:0 0 35px 0; padding:0; text-align: center;}
.port-filter ul li {
  display: inline-block;
  list-style: none;
  margin-right: 5px;
  margin-bottom: 20px;
}
.port-filter ul li a {
  color: #888888;  
  padding: 9px 16px !important;
  border:solid 1px #ececec;
  text-align: center;
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
  border-radius: 2px;
  letter-spacing: 2px;
}
.port-filter ul li a:hover {
  color: #a67c52;
}
.port-filter ul li.active a {
  color: #fff;
  background: #81BE41;
  border-color: #81BE41;
}

.portfolio-container .pagination-cm {
  text-align: center;
  margin: 15px 0 13px 0;
}

/****** Our creative portfolio container ******/


.col-3-portfolio .project-item {
  width: 370px; 
  margin:15px;
}

/****** classic portfolio  container ******/

.occp-container {
  background-color: #fff;
  padding: 61px 0 62px 0;  
}

.classic-portfolio {
    margin: 0 -1%;
}

    .classic-portfolio .project-item {
        float: left;
        max-width: 100%;
    }

        .classic-portfolio .project-item .project-image:hover img {
            opacity: .5;
        }

    .classic-portfolio.col-2-portfolio {
        margin: 0 -15px;
    }

        .classic-portfolio.col-2-portfolio .project-item {
            width: 48%;
            margin: 4px 1% 32px 1%;
        }

        .classic-portfolio.col-2-portfolio .overlay .actions li.project-details {
            margin: 350% auto 0 auto;
        }

        .classic-portfolio.col-2-portfolio .project-item .project-image:hover .overlay li {
            opacity: 1;
            margin-top: 73px !important;
        }

    .classic-portfolio.col-5-portfolio {
        margin: 0 -15px;
    }

        .classic-portfolio.col-5-portfolio .project-item {
            width: 100%;
            margin: 4px 1% 32px;
        }

        .classic-portfolio.col-5-portfolio .project-item .project-image img{
            width: 100%;
        }


@media (min-width: 768px){
            .classic-portfolio.col-5-portfolio .project-item {
            width: 22%;
            margin: 4px 1% 32px;
        }
}

@media (min-width: 1200px){
            .classic-portfolio.col-5-portfolio .project-item {
                width: 17%;
                margin: 4px 1% 32px;
            }

           .con-gallery{
                padding: 0 15px;
            }
}

        .classic-portfolio.col-5-portfolio .project-info h4 {
            margin-top: 18px !important;
        }

    .classic-portfolio.col-4-portfolio {
        margin: 0 -15px;
    }

        .classic-portfolio.col-4-portfolio .project-item {
            width: 23%;
            margin: 4px 1% 25px 1%;
        }

            .classic-portfolio.col-4-portfolio .project-item .project-info h4 {
                font-size: 16px;
                letter-spacing: 2px;
                margin: 16px 0 13px 0;
            }

        .classic-portfolio.col-4-portfolio .overlay .actions li.project-details {
            margin: 100% auto 0 auto;
        }

    .classic-portfolio .project-item .project-image, .projects-view .project-b-item .project-image {
        position: relative;
        overflow: hidden;
        background: #8d8d8d;
    }

        .classic-portfolio .project-item .project-image:hover .overlay {
            opacity: 1;
        }

        .classic-portfolio .project-item .project-image .pbt {
            color: #fff;
            border: solid 2px #fff;
            padding: 9px 10px;
        }

        .classic-portfolio .project-item .project-image:hover .overlay li {
            opacity: 1;
            margin-top: 0;
        }

    .classic-portfolio .project-item .project-info {
        text-align: center;
        margin-top: 30px;
    }

        .classic-portfolio .project-item .project-info h4 {
            margin: 20px 0 15px 0;
            text-transform: uppercase;
            font-weight: 600;
            letter-spacing: 4px;
        }

            .classic-portfolio .project-item .project-info h4 a {
                color: #5d5d5d;
            }

                .classic-portfolio .project-item .project-info h4 a:hover {
                    color: #a67c52;
                }

        .classic-portfolio .project-item .project-info .project-cat {
            margin: 0 0 5px 0;
            padding: 0;
            list-style: none;
            letter-spacing: 2px;
        }

            .classic-portfolio .project-item .project-info .project-cat li {
                display: inline-block;
            }

            .classic-portfolio .project-item .project-info .project-cat a {
                color: #555555;
            }

                .classic-portfolio .project-item .project-info .project-cat a:hover {
                    color: #a67c52;
                }

        .classic-portfolio .project-item .project-info p {
            margin-bottom: 20px;
        }

.work-desc {
    text-align: center;
    font-size: 16px;
    margin-bottom: 2em;
}

.project-item-title{
    text-align:center;
    color:#fff;
}
.project-item-title h3{
    color:#fff;
}

@media only screen and (max-width: 1200px) {

    .projects-view .project-b-item .project-b-des, .projects-view .project-b-item .project-image {
        width: 100%;
        float: none;
    }

    .projects-view .project-b-item:nth-child(even) div.project-b-des:after, .projects-view .project-b-item:nth-child(odd) .project-b-des:after {
        top: -24px;
        left: 47%;
        position: absolute;
        content: '';
        width: 0;
        height: 0;
        border-style: solid;
        border-width: 0 24px 24px 24px;
        border-color: transparent transparent #f5f5f5;
        display: block;
    }
}