.our-work #page h2 {
margin: 20px 0px 20px;
font-size: 52px; font-weight: 800; line-height: 1.1;
}


.our-work #page .container {
width: 80%;
margin: 0px 0px 0px 10%;;
}

.page-title {
width: 100%;
text-align: center;
padding: 210px 0px 110px;
display: table;
}

h1 {
color: #94406d;
font-size: 70px;
font-weight: 600;
}

.row {
display: flex;
justify-content: space-between;
}

.project {
width: 100%;
border-radius: 20px;
padding: 170px 10% 90px; height: 650px;
 position: relative;
overflow: hidden;
float: left; margin-bottom: 90px;
}

.project.featured {
height: 650px; padding: 0px; overflow: hidden;
}

.project img {
height: 100%;
width: 100%;
object-fit: cover;
max-width: 100%;
max-height: 100%;
}

.project:hover img {
transform: scale(1.05);
}

.project:before {
content: "";
position: absolute;
height: 100%;
width: 100%;
background: linear-gradient(44deg, rgba(0, 0, 0, 0.40) 14.97%, rgba(0, 0, 0, 0.00) 88.44%);
z-index: 99;
top: 0px; left: 0px;
}

.project .content,
.project .project-link {
z-index: 99;
}

.project > a {
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
z-index: 991;
}

.project .content {
width: 55%;
left: 0px; 
left: 80px;
bottom: 70px;
position: absolute;
}

.project.content p {
color: #FFF;
}


.project h2 {
color: #FFF;
line-height: 1.2;
margin: 0px 0px 30px;
font-size: 52px;
}

.project span {
color: #FFF;
}


.project .tags a {
padding: 5px 0px; color: #FFFFFF;text-transform: uppercase; letter-spacing: 1px; font-size: 12px; font-weight: 800;
 text-decoration: none;
}

.project .tags .sep {
margin: 0px 10px;
color: rgba(255, 255, 255, 0.3);
font-size: 13px;
}

.project p {
color: #FFF; font-weight: 600;
}

.project .tags svg {
width: 25px; height: 25px;
fill: #FFF;
position: relative;
top: 7px;
margin-right: 10px;
}

.project span {
color: #FFF;
font-size: 16px;
text-transform: uppercase;
letter-spacing: 2px;
font-weight: 800;
}


.project-link {
color: #FFF; text-transform: uppercase; letter-spacing: 3px; font-size: 14px; text-decoration: none; font-weight: 800; 
padding: 35px 50px; 
border-radius: 20px 0px 20px 0px;
background: #97416E;
display: table;
position: absolute;
right: 0px; bottom: 0px; left: auto;
line-height: 1; 
}

.project-link a:hover {
padding: 35px 60px;
}


.project:nth-child(3n+2),
.project:nth-child(3n+3) {
width: 46%; height: 380px; padding: 0px;
}

.project:nth-child(3n+3) {
margin-left: 8%;
}

.project:nth-child(3n+2) p,
.project:nth-child(3n+3) p,
.project:nth-child(3n+2) span.feature,
.project:nth-child(3n+3) span.feature,
.project:nth-child(3n+2) .project-link,
.project:nth-child(3n+3) .project-link {
display: none;
}

.project:nth-child(3n+2) h2,
.project:nth-child(3n+3) h2{
margin-bottom: 15px;
color: #FFF;
font-size: 28px !important;
font-weight: 800;
line-height: 1.4;
letter-spacing: 1px;
}

.project:nth-child(3n+2) .content,
.project:nth-child(3n+3) .content{
width: 90%;
left: 50px;
bottom: 50px;
}





@media (max-width: 1200px) {

.our-work #page .container {
width: 90%;
margin: 0px 0px 0px 5%;
}

.project .content {
width: 65%;
left: 60px;
bottom: 60px;
}

.project:nth-child(3n+2) .content, .project:nth-child(3n+3) .content {
width: 80%;
left: 40px;
bottom: 40px;
}



.project {
margin-bottom: 70px; height: 580px;
}

.project:nth-child(3n+2), .project:nth-child(3n+3) {
width: 48%;
}

.project:nth-child(3n+3) {
margin-left: 4%;
}

}


@media (max-width:960px) {

.tags {
display: flex;
flex-direction: row;
flex-wrap: wrap;
}

.project .tags svg {
top: 1px;
}

.project .tags a {
padding: 2px 0px;
}

}



@media (max-width: 900px) {

.project:nth-child(3n+2) h2, .project:nth-child(3n+3) h2 {
font-size: 25px !important;
}

.project .project-link {
display: none;
}



}



@media (max-width: 800px) {

.project {
margin-bottom: 40px;
height: 440px;
}


.project p.large {
display: none;
}

}


@media (max-width:700px) {

.project, .project:nth-child(3n+2), .project:nth-child(3n+3) {
width: 100%; height: 300px !important;
}

.project:nth-child(3n+3) {
margin-left: 0px;
}

.project .content {
width: 80%;
left: 40px;
bottom: 40px;
}

}



@media (max-width:505px) {


.project .content {
width: 80%;
left: 30px;
bottom: 30px;
}

.project:nth-child(3n+2) .content, .project:nth-child(3n+3) .content {
left: 26px;
bottom: 25px;
width: 85%;
}

.project .tags .sep {
margin: 0px 5px;
}

}