/*BASIC*/

 
 

img {
    max-width: 100%;
    height: auto;
}

 
 
div.latest__item--inner > h3 {
    text-transform: uppercase;
    color: #81868e;
    margin-bottom: 0;
    font-weight: 700;
    line-height: -webkit-calc(24/18);
    line-height: -moz-calc(24/18);
    line-height: calc(24/18);
}

section.latest-project > div.container > div.row.justify-content-center > div.col-lg-12.col-md-12.col-12 > h2.title {
    text-transform: uppercase;
    color: #81868e;
    margin-bottom: 0;
    font-weight: 700;
    line-height: -webkit-calc(24/18);
    line-height: -moz-calc(24/18);
    line-height: calc(24/18);
}

 
   

.title {
    font-size: 36px;
    font-weight: 700;
    text-transform: uppercase;
    text-align: center;
}

 
.title>span {
    color: #ccb76c;
    font-size: 36px;
    font-weight: 700;
}

 
 
 

.overlay {
    background: rgba(0, 0, 0, 0.7);
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    text-align: center;
    -webkit-transition: 0.4s;
    -o-transition: 0.4s;
    -moz-transition: 0.4s;
    transition: 0.4s;
}

.overlay--p-15 {
    padding: 15px;
}

.overlay--invisible {
    opacity: 0;
}
 
.overlay--border {
    height: 100%;
    width: 100%;
    border: 2px solid #ccb76c;
}


 
    

/*latest project 1*/

.latest-project {
    padding-top: 90px;
}

.latest__item {
    border: 2px solid #f1f1f1;
    position: relative;
    overflow: hidden;
}

.latest__item--content {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    text-align: center;
}

.latest__item--inner {
    opacity: 0;
    -webkit-transition: 0.3s;
    -o-transition: 0.3s;
    -moz-transition: 0.3s;
    transition: 0.3s;
}

.latest__item img {
    -webkit-transition: 0.6s;
    -o-transition: 0.6s;
    -moz-transition: 0.6s;
    transition: 0.6s;
}

.latest__item:hover img {
    -webkit-transform: scale(1.1);
    -ms-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -o-transform: scale(1.1);
    transform: scale(1.1);
	cursor:pointer;
}

.latest__item:hover .overlay {
    opacity: 1;
	cursor:pointer;
}

.latest__item:hover .latest__item--inner {
    opacity: 1; 
}

.latest__item--inner h3 a {
    color: #ccb76c;
    font-size: 24px;
}

.latest__item--inner h3 a:hover {
    color: #fff;
	cursor:pointer;
}

 

@media (max-width: 768px) {
	.title {
    font-size: 25px;
     
}
.title>span {
    color: #ccb76c;
    font-size: 25px;
     
}
}