/**************************************
*************PORTFOLIO ARCHIVE*********
***************************************

3.PORTFOLIO ARCHIVE CONTENT
4.PORTFOLIO ARCHIVE POSTS
**************************************/







/**************************************
4.PORTFOLIO ARCHIVE POSTS**************
**************************************/

@media (min-width: 640px)  {


	.archive-projects-desc {
		max-width: 1540px;
		margin: 0 auto;
		padding: 60px 20px 40px 20px;
	}
	
	.archive-projects-desc-inner {
		max-width: 960px;
	}
	
	.archive-projects-desc-inner p {
		font-family: 'Gotham Pro';
		font-weight: 300;
		font-size: 18px;
		line-height: 1.8;
		letter-spacing: 1px;
		color: #414141;
	}



    .archive-projects-conteiner {
        max-width: 1540px;
        margin: 0 auto;
        padding: 60px 0 180px 0;
    }

  

	.archive-projects-list {
		max-width: 1540px;
		margin: 0 auto;
		padding: 0 20px 120px 20px;
	}


	@media (min-width: 768px)  {
		.archive-projects-list-items {
			list-style: none;
			margin: 0;
			padding: 0;
			
			display: grid;
			grid-template-columns: 1fr 1fr;
			grid-row-gap:80px;
			grid-column-gap:30px;
	
		}

		.archive-projects-list-item {
			position: relative;

			display: flex;
			flex-flow: column nowrap;
			gap:20px;
		}
	}

	@media (min-width: 640px) and (max-width: 767px)  {
		.archive-projects-list-items {
			list-style: none;
			margin: 0;
			padding: 0;
			
			display: grid;
			grid-template-columns: 1fr;
			grid-row-gap:80px;
			grid-column-gap:30px;
	
		}

		.archive-projects-list-item {
			position: relative;
			max-width: 700px;

			display: flex;
			flex-flow: column nowrap;
			gap:20px;
		}
	}



	.archive-projects-list-item-part:nth-child(1) {
		position:relative;
		background-color: rgba(214, 215, 219, 0.4);
		padding: 20px;
	}

	.archive-projects-list-item-part:nth-child(1)::before {
		content:"";
		position: relative;
		display: block;
		padding-top: 100%;
	}

	.archive-projects-list-item-part:nth-child(1) img {
		position: absolute;
		top:20px;
		right: 20px;
		bottom: 20px;
		left:20px;
		display: block;
		width: calc(100% - 40px);
		height: auto;
		filter: grayscale(35%);
	}

	.archive-projects-list-item-part:nth-child(1) a {
		position: absolute;
		top:0;
		right: 0;
		bottom: 0;
		left:0;
		display: block;
	}


	.archive-projects-list-item-part:nth-child(2) {
		display: flex;
		flex-flow: column nowrap;
	}

	.archive-projects-list-item-title {
		margin: 0;
		padding: 0;
		font-family: 'Gotham Pro';
		font-weight: 900;
		font-size: 22px;
		line-height: 1.2;
		color: #233748;
		letter-spacing: 1.5px;
		text-transform: uppercase;
	}

	.archive-projects-list-item-subtitle {
		padding: 0;
		overflow: hidden;
		font-family: 'Gotham Pro';
		font-weight: 300;
		font-size: 18px;
		line-height: 1.8;
		color: #4B4B4B;
		letter-spacing: 1px;
		text-decoration: none;
	}



	.projects-list-image {
		width: 0;
		z-index: 25;
		position: fixed;
		pointer-events: none;
		transform: translate(-50%, -52%);
		display: block;
		overflow: hidden;
		transition: width .4s cubic-bezier(0.36, 0, 0.66, 0);
		will-change: transform, width;

	}

	.projects-list-image.active {
		border-radius: 0;
		width: 528px;
		transition: width .4s cubic-bezier(0.34, 1, 0.64, 1);
	}

	.projects-list-image-bounce {
		overflow: hidden;
		transform: scale(1) rotate(.001deg);
		transition: all .5s cubic-bezier(0.65, 0, 0.35, 1);
		will-change: transform;
	}

	.projects-list-image-bounce.active {
		transform: scale(1) rotate(.001deg);
	}

	.projects-list-image::before {
		display: block;
		content: "";
		padding-top: 100%;
	}

	.projects-list-image .projects-list-image-item {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: #d6d7db;
	} 

	.projects-list-image .projects-list-image-wrap {
		width: 100%;
		position: absolute;
		left: 0;
		top: 0;
		display: block;
		will-change: transform;
		margin: 0;
		padding: 0;
	}

	.projects-list-image .projects-list-image-wrap .projects-list-image-item {
		position: relative;
		width: 100%;
		display: block;
		overflow: hidden;
	}

	.projects-list-image .projects-list-image-wrap .projects-list-image-item:before {
		display: block;
		content: "";
		padding-top: 100%;
	} 

	.projects-list-image .projects-list-image-wrap .projects-list-image-item {
		width: 0;
	}

	.projects-list-image .projects-list-image-wrap .projects-list-image-item {
		width: 100%;
	}
 
	.overlay {
		position: absolute;
		top: 0;
		left: 0;
		height: 100%;
		width: 100%;
	}

	.overlay-image {
		position: absolute;
		top: 7%;
		bottom: 7%;
		left: 7%;
		right: 7%;
		background-position: center center;
		background-repeat: no-repeat;
		background-size: cover;
	}

	.projects-list-image-cursor {
		width: 105.6px;
		height: 105.6px;
		border-radius: 50%;
		border: 0;
		background: #00A79D;
		position: fixed;
		z-index: 26;
		pointer-events: none;
		transform: translate(-50%, -60%) scale(0);
		overflow: hidden;
		transition: transform .4s cubic-bezier(0.36, 0, 0.66, 0);
		left: 50.5%;
		top: -10%;
		left: -10%;
		left: 0%;
		top: 0%;
		will-change: transform;
		display: flex;
		flex-flow: column nowrap;
		justify-content: center;
		align-items: center;
		align-content: center;
	}

	.projects-list-image-cursor span {
		color: #FFF;
		font-size: 14px;
		font-family: 'Gotham Pro';
		letter-spacing: 1px;
		line-height: 1.4;
		text-align: center;
		font-weight: 700;
	}

	.projects-list-image-cursor.active {
		transform: translate(-50%, -60%) scale(1);
		transition: transform .4s cubic-bezier(0.34, 1, 0.64, 1);
	}


}






@media (max-width: 639px)  {


	.archive-projects-desc {
		max-width: 1540px;
		margin: 0 auto;
		padding: 60px 20px 40px 20px;
	}
	
	.archive-projects-desc-inner {
		max-width: 960px;
	}
	
	.archive-projects-desc-inner p {
		font-family: 'Gotham Pro';
		font-weight: 300;
		font-size: 16px;
		line-height: 1.8;
		letter-spacing: 1px;
		color: #414141;
	}



    .archive-projects-conteiner {
        max-width: 1540px;
        margin: 0 auto;
        padding: 60px 0 180px 0;
    }

  

	.archive-projects-list {
		max-width: 1540px;
		margin: 0 auto;
		padding: 0 20px 120px 20px;
	}

	.archive-projects-list-items {
		list-style: none;
		margin: 0;
		padding: 0;
		
		display: grid;
		grid-template-columns: 1fr;
		grid-row-gap:50px;
		grid-column-gap:30px;

	}

	.archive-projects-list-item {
		position: relative;
		max-width: 700px;

		display: flex;
		flex-flow: column nowrap;
		gap:20px;
	}


	.archive-projects-list-item-part:nth-child(1) {
		position:relative;
		background-color: rgba(214, 215, 219, 0.4);
		padding: 20px;
	}

	.archive-projects-list-item-part:nth-child(1)::before {
		content:"";
		position: relative;
		display: block;
		padding-top: 100%;
	}

	.archive-projects-list-item-part:nth-child(1) img {
		position: absolute;
		top:20px;
		right: 20px;
		bottom: 20px;
		left:20px;
		display: block;
		width: calc(100% - 40px);
		height: auto;
		filter: grayscale(35%);
	}

	.archive-projects-list-item-part:nth-child(1) a {
		position: absolute;
		top:0;
		right: 0;
		bottom: 0;
		left:0;
		display: block;
	}


	.archive-projects-list-item-part:nth-child(2) {
		display: flex;
		flex-flow: column nowrap;
	}

	.archive-projects-list-item-title {
		margin: 0;
		padding: 0;
		font-family: 'Gotham Pro';
		font-weight: 900;
		font-size: 20px;
		line-height: 1.2;
		color: #233748;
		letter-spacing: 1.5px;
		text-transform: uppercase;
	}

	.archive-projects-list-item-subtitle {
		padding: 0;
		overflow: hidden;
		font-family: 'Gotham Pro';
		font-weight: 300;
		font-size: 16px;
		line-height: 1.8;
		color: #4B4B4B;
		letter-spacing: 1px;
		text-decoration: none;
	}



	.projects-list-image {
		width: 0;
		z-index: 25;
		position: fixed;
		pointer-events: none;
		transform: translate(-50%, -52%);
		display: block;
		overflow: hidden;
		transition: width .4s cubic-bezier(0.36, 0, 0.66, 0);
		will-change: transform, width;

	}

	.projects-list-image.active {
		border-radius: 0;
		width: 528px;
		transition: width .4s cubic-bezier(0.34, 1, 0.64, 1);
	}

	.projects-list-image-bounce {
		overflow: hidden;
		transform: scale(1) rotate(.001deg);
		transition: all .5s cubic-bezier(0.65, 0, 0.35, 1);
		will-change: transform;
	}

	.projects-list-image-bounce.active {
		transform: scale(1) rotate(.001deg);
	}

	.projects-list-image::before {
		display: block;
		content: "";
		padding-top: 100%;
	}

	.projects-list-image .projects-list-image-item {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: #d6d7db;
	} 

	.projects-list-image .projects-list-image-wrap {
		width: 100%;
		position: absolute;
		left: 0;
		top: 0;
		display: block;
		will-change: transform;
		margin: 0;
		padding: 0;
	}

	.projects-list-image .projects-list-image-wrap .projects-list-image-item {
		position: relative;
		width: 100%;
		display: block;
		overflow: hidden;
	}

	.projects-list-image .projects-list-image-wrap .projects-list-image-item:before {
		display: block;
		content: "";
		padding-top: 100%;
	} 

	.projects-list-image .projects-list-image-wrap .projects-list-image-item {
		width: 0;
	}

	.projects-list-image .projects-list-image-wrap .projects-list-image-item {
		width: 100%;
	}
 
	.overlay {
		position: absolute;
		top: 0;
		left: 0;
		height: 100%;
		width: 100%;
	}

	.overlay-image {
		position: absolute;
		top: 7%;
		bottom: 7%;
		left: 7%;
		right: 7%;
		background-position: center center;
		background-repeat: no-repeat;
		background-size: cover;
	}

	.projects-list-image-cursor {
		width: 105.6px;
		height: 105.6px;
		border-radius: 50%;
		border: 0;
		background: #00A79D;
		position: fixed;
		z-index: 26;
		pointer-events: none;
		transform: translate(-50%, -60%) scale(0);
		overflow: hidden;
		transition: transform .4s cubic-bezier(0.36, 0, 0.66, 0);
		left: 50.5%;
		top: -10%;
		left: -10%;
		left: 0%;
		top: 0%;
		will-change: transform;
		display: flex;
		flex-flow: column nowrap;
		justify-content: center;
		align-items: center;
		align-content: center;
	}

	.projects-list-image-cursor span {
		color: #FFF;
		font-size: 14px;
		font-family: 'Gotham Pro';
		letter-spacing: 1px;
		line-height: 1.4;
		text-align: center;
		font-weight: 700;
	}

	.projects-list-image-cursor.active {
		transform: translate(-50%, -60%) scale(1);
		transition: transform .4s cubic-bezier(0.34, 1, 0.64, 1);
	}


}