#workArea {flex-direction: column !important;}

#projectsFilter {margin: 0 0 25px 0; font-size: 12px;}
#wrapper.animationON #projectsFilter {animation: fadeIn 1.1s ease;}

	#projectsFilter > div {display: flex; justify-content: space-between; position: relative;}
		#projectsDateFilter {max-width: 750px;}
			#projectsDateFilter a {color: #FFF; padding: 13px 20px; border-radius: 40px; display: inline-block;
				margin: 0 20px 15px 0;
			}
			#projectsDateFilter a:last-child {margin-right: 0;}
			#projectsDateFilter a.active {padding: 13px 20px;}
			#projectsDateFilter a:not(.active) {color: #717171; background: #FBFBFB; border: 1px solid #E3E3E3;}
		
		#projectsSectionFilter {position: absolute; display: flex; flex-direction: column; z-index: 2; right: 0;
			box-sizing: border-box; cursor: pointer; transition: width .3s ease; border: 1px solid #E3E3E3; background: #FBFBFB; border-radius: 40px;
		}
		#projectsSectionFilter.open {background-color: #fff; border-radius: 10px; border-color: #fff;
			box-shadow: 0px 20px 45px rgba(0, 0, 0, .09);
		}
			#projectsSectionFilter.open a {display: block;}
			#projectsSectionFilter.open .iconArrow {transform: rotate(180deg);}
				
			#projectsSectionFilter .iconTime {position: absolute; top: 15px; left: 17px;}
			#projectsSectionFilter .iconArrow {position: absolute; top: 20px; right: 17px; transition: transform .2s linear;}
				#projectsSectionFilter a {display: none; padding: 14px 43px 14px 44px;}
					#projectsSectionFilter a:not(.redcodeColor) {color: #454545;}
				#projectsSectionFilter a.active {display: block; white-space: nowrap;}
		
	
.projects {}
#wrapper.animationON .projects {animation: fadeInUp_30px 1.2s ease;}

	.projectItems {margin: 0 0 110px 0; display: flex; flex-wrap: wrap;}
		
		.projectItem {width: 22.75%; margin: 64px 3% 0 0;}
		.projectItem:nth-child(4n) {margin-right: 0;}
		.projectItem:nth-child(1) {margin-top: 0;}
		.projectItem:nth-child(2), .projectItem:nth-child(3), .projectItem:nth-child(4) {margin-top: 20px;}
		
			.projectIblockName {font-size: 12px; margin: 0 15px 17px 0; display: none;}
			.projectItem p {color: #717171; padding: 7px 9px; background: #f6f6f6; font-size: 12px; margin: 0 0 14px 0; display: inline-block;}
			.projectItem .img {height: 175px; width: 100%; display: block; margin: 0 0 20px 0; border-radius: 3px;}
			.projectItemInfo {}
				.projectItemInfo a {line-height: 28px; display: inline-block;}
					.projectItemInfo a:not(.redcodeColor) {color: #121212;}
				
		.bigItem {width: 48.5%; height: 360px; border-radius: 3px; transition: box-shadow .2s ease; position: relative;}
		.projectNone {display: none;}
		.bigItem:hover {box-shadow: 0px 20px 60px rgba(0, 0, 0, .075), 0px 15px 40px rgba(0, 0, 0, .1);}
			.bigItem .projectItemInfo {position: relative; z-index: 1; display: block; height: 100%;}
				.bigItem .sectionName {font-size: 10px; margin: 35px 0 0 35px; display: inline-block;
					border-radius: 20px; background: #fff; text-transform: uppercase; color: #121212; padding: 10px 16px 9px 16px;
				}
				.bigItem .projectItemName {position: absolute; bottom: 27px; left: 34px; right: 34px; color: #fff;}
					.bigItem .projectItemName .displayActive {font-size: 12px;
						display: inline-block; margin: 0 0 22px 0;
					}
					.bigItem .projectItemName span:not(.displayActive) {font-size: 17px; line-height: 30px; display: block;
						max-width: 430px;
					}
				
			.blackMask, .blackMaskSecond {position: absolute; bottom: 0; top: 0; left: 0; right: 0; border-radius: 3px;}
			.blackMaskSecond {background: linear-gradient(180deg, rgba(0, 0, 0, 0) 43%, rgba(0, 0, 0, .3) 100%);}
			.blackMask {transform: rotate(-180deg); background: linear-gradient(180deg, rgba(0, 0, 0, 0) 75%, rgba(0, 0, 0, .3) 100%);}

.projects .pagination {margin: -38px 0 0 0;}


@media all and (max-width: 1120px) {
	.projectItem {width: 30%; margin: 53px 5% 0 0;}
	.projectItem:nth-child(2), .projectItem:nth-child(3) {margin-top: 0;}
	.projectItem:nth-child(4) {margin-top: 53px;}
	.projectItem:nth-child(4n) {margin-right: 5%;}
	.projectItem:nth-child(3n) {margin-right: 0;}

	.projectNone {display: block;}
}

@media all and (max-width: 990px) {
	#projectsDateFilter {max-width: 550px;}
}

@media all and (max-width: 785px) {
	#projectsDateFilter {max-width: 410px;}
	
	.projectItem {width: 46%; margin: 53px 8% 0 0;}
	.projectItem:nth-child(3), .projectItem:nth-child(4) {margin-top: 53px;}
	.projectItem:nth-child(3n) {margin-right: 8%;}
	.projectItem:nth-child(2n) {margin-right: 0;}
}

@media all and (max-width: 700px) {
	#projectsFilter {height: 60px;}
	#projectsDateFilter {margin: 65px 0 0 0; display: none; max-width: 100%;}
		 #projectsDateFilter a {margin: 0 15px 15px 0;}
	#projectsSectionFilter {left: 0; top: 0;}
}

@media all and (max-width: 540px) {
	.projectItem {width: 100%; margin: 53px auto 0 auto;}
	.projectItem:nth-child(2) {margin-top: 35px;}
	.projectItem:nth-child(3n) {margin-right: auto;}
	.projectItem:nth-child(2n) {margin-right: auto;}
}