@media only screen and (max-width:1820px){
	
	.block-1, 
	#specs {
		padding-left: var(--space-30);
		padding-right: var(--space-30)
	}

	#specs > div {
		padding-left: 0;
		padding-right: 0
	}

}

@media only screen and (max-width:1750px) {
	.project #content .project-gallery .scrollbar {
		left: var(--space-30);
	}
}

@media only screen and (max-width:1690px){
	
	.block-2,
	.project #content .wp-block-columns {
		padding-left: var(--space-30);
		padding-right: var(--space-30)
	}

	.home #hero .w-45 {
		width: 50%;
	}

}

@media only screen and (max-width:1450px){
	
	.block-3 {
		padding-left: var(--space-30);
		padding-right: var(--space-30)
	}

	:root {

	--size-900: 70px;

	}

}

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

	.blog .grid {
		grid-template-columns: 1fr 1fr;
	}

	#contact > div {
		height: 100%;
		overflow-y: auto;
	}

	#contact .w-30 > .w-50 {
		width: 80%;
	}

	#not-found .w-40 {
		width: 70%;
	}


}


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

	:root {

	--size-900: 60px;
	--size-800: 30px;
	--size-700: 25px;
	--size-600: 20px;
	--size-500: 18px;
	--size-400: 16px;
	--size-300: 14px;
	--size-100: 12px;

	--space-200: 130px;
	--space-150: 120px;
	--space-120: 110px;
	--space-100: 100px;
	--space-90: 90px;
	--space-80: 80px;
	--space-70: 70px;
	--space-60: 60px;
	--space-50: 50px;
	--space-40: 40px;
	--space-30: 30px;
	--space-25: 25px;
	--space-20: 20px;
	--space-15: 15px;
	--space-10: 10px;
	--space-5: 5px;

	--margin-80: 80px;
	--margin-40: 40px;
	--margin-30: 30px;
	--margin-25: 25px;
	--margin-20: 20px;
	--margin-15: 15px;
	--margin-10: 10px;
	--margin-5: 5px;

	}

	.w-40 {
		width: 50%;
	}

	#projects .border-btn {
		margin-top: var(--space-30);
	}

	#team > div {
		flex-direction: column;
	}

	#team .w-30 {
		width: 100%;
		flex-direction: row;
		flex-wrap: wrap;
	}

	#team .w-70 {
		width: 100%;
	}

	#services .grid {
		grid-template-columns: 1fr 1fr;
	}

	#related .grid {
		grid-template-columns: 100%;
	}

	#related-projects > div{
		flex-direction: column;
	}

	#related-projects article {
		width: 100%;
	}

	#contact > div {
		flex-direction: column;
		gap: var(--space-60);
		padding: var(--space-90) var(--space-80);
	}

	#contact > div .offices {
		width: 100%;
		flex-direction: row;
		flex-wrap: wrap;
		gap: var(--space-25);
	}

	#contact > div .offices h2 {
		width: 100%;
	}

	#contact .w-30 div.w-50 {
		width: calc((100% / 3) - 25px);
	}

	#contact .form {
		width: 100%;
	}
	
	#talk .grid {
		grid-template-columns: 1fr 1fr;
	}
}


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

	:root {

	--size-900: 55px;
	--size-800: 30px;
	--size-700: 25px;
	--size-600: 20px;
	--size-500: 18px;
	--size-400: 16px;
	--size-300: 14px;
	--size-100: 12px;

	--space-200: 120px;
	--space-150: 110px;
	--space-120: 100px;
	--space-100: 100px;
	--space-90: 90px;
	--space-80: 80px;
	--space-70: 70px;
	--space-60: 60px;
	--space-50: 50px;
	--space-40: 40px;
	--space-30: 30px;
	--space-25: 25px;
	--space-20: 20px;
	--space-15: 15px;
	--space-10: 10px;
	--space-5: 5px;

	--margin-80: 80px;
	--margin-40: 40px;
	--margin-30: 30px;
	--margin-25: 25px;
	--margin-20: 20px;
	--margin-15: 15px;
	--margin-10: 10px;
	--margin-5: 5px;

	}

	body:not(.home) #hero h1 {
		font-size: calc(var(--size-800)*1.3);
	}

	#projects .grid {
		grid-template-columns: 1fr 1fr;
	}

	#projects article {
		width: calc( 50% - (var(--space-30) / 2));
	}

	#projects article:first-child, #projects article:last-child,
	#projects article:nth-child(4) {
		width: 100%;
	}

	#projects article .info a, #projects article .info div {
		opacity: 1;
		transform: none;
	}

	#projects article:nth-child(4) .info {
		width: 50%;
	}

	#news .grid {
		grid-template-columns: 100%;
		gap: var(--space-40);
	}

	#news .grid h2 {
		text-align: center;
	}

	#news .grid .justify-end {
		justify-content: center;
	}

	#portfolio > div {
		flex-direction: column;
	}

	#portfolio > div h2 {
		text-align: center;
	}

	#projects article .info {
		transform: none;
		padding: var(--space-30) 0;
	}

	.service #info > div {
		flex-direction: column;
	}

	.service #info .sticky {
		height: fit-content;
		position: static;
	}

	.service #info .nav > * {
		width: 50%;
	}

	#projects article:first-child, 
	#projects article:last-child,
	#projects article {
		height: 100%;
		min-height: 100%;
		display: flex;
		flex-direction: column;
		justify-content: center;
	}

	#projects article:first-child .info, 
	#projects article:last-child .info,
	#projects article .info {
		position: static;
		flex: 1 1 auto;
		width: 100%;
		gap: var(--space-20);
	}

	#projects article figure img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	#projects .w-40 {
		width: 65%;
	}

	.projects #projects article:nth-child(9) {
		width: 100%;
	}

	.home #projects article:nth-child(7) {
		width: 100%;
	}

}

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

	:root {

	--size-900: 48px;
	--size-800: 24px;
	--size-700: 22px;
	--size-600: 18px;
	--size-500: 17px;
	--size-400: 15px;
	--size-300: 13px;
	--size-100: 12px;

	--space-200: 70px;
	--space-150: 60px;
	--space-120: 60px;
	--space-100: 60px;
	--space-90: 60px;
	--space-80: 60px;
	--space-70: 50px;
	--space-60: 45px;
	--space-50: 40px;
	--space-40: 35px;
	--space-30: 30px;
	--space-25: 25px;
	--space-20: 20px;
	--space-15: 15px;
	--space-10: 10px;
	--space-5: 5px;

	--margin-80: 50px;
	--margin-40: 35px;
	--margin-30: 30px;
	--margin-25: 25px;
	--margin-20: 20px;
	--margin-15: 15px;
	--margin-10: 10px;
	--margin-5: 5px;

	}

	.block-1, 
	.block-2,
	.project #content .wp-block-columns,
	.block-3 {
		padding-left: var(--space-20);
		padding-right: var(--space-20)
	}

	body:not(.home) #hero {
		min-height: 500px;
	}

	.home #hero h1 {
		font-size:  var(--size-900)
	}

	#specs {
		padding: 0
	}

	#specs .specs {
		padding: var(--space-60) var(--space-40) ;
	}

	#header #menu {
		width: 30px;
		height: 30px;
		padding: 0;
		border: 0;
		background-color: transparent;
		display: flex;
		gap: 10px;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		position: relative;
	}

	#header #menu span,
	#header #menu::before,
	#header #menu::after {
		content: '';
		width: 100%;
		height: 2px;
		background-color: white;
		transition: all 280ms ease;
		position: absolute;
		left: 0;
	}

	#header #menu span,
	#header #menu::before,
	#header #menu::after {
		background-color: white;
	}

	#header #menu::before {
		top: 5px;
	}

	#header #menu::after {
		bottom: 5px;
	}

	#header.open #menu span {
		opacity: 0;
	}

	#header.open #menu::before {
		transform: rotate(45deg);
		top: 50%;
	}

	#header.open #menu::after {
		transform: rotate(-45deg);
		top: 50%;
	}

	#header .menu {
		width: 100%;
		height: 100vh;
		display: flex;
		flex-direction: column;
		position: fixed;
		inset: 0;
		pointer-events: none;
		opacity: 0;
		background-color: black;
		transition: var(--transition-600);
	}

	#header.open .menu {
		opacity: 1;
		pointer-events: all;
	}

	#header .logo h2 {
		display: none;
	}

	#header #logo,
	#footer .logo {
		width: 100px;
	}

	#header #logo {
		z-index: 9
	}


	body:not(.home) #hero h1 {
		word-break: break-word;
	}

	.w-35,
	.w-40,
	.w-50,
	.w-65,
	#projects .w-40 {
		width: 100%;
	}

	#projects .border-btn {
		margin-top: 0;
	}

	.home #hero {
		align-items: flex-start;
		padding-top: var(--space-200);
	}

	.home #hero .w-45 {
		width: 100%;
		text-align: center;
	}

	#projects article .info {
		gap: 30px;
	}

	#team .w-70 {
		grid-template-columns: 1fr 1fr;
	}

	#prizes > div {
		gap: var(--space-30);
	}

	#prizes .grid {
		grid-template-columns: 100%;
	}

	.blog .grid {
		grid-template-columns: 100%;
	}

	#projects article:first-child .info,
	#projects .grid article:nth-child(4) .info,
	#projects article:last-child .info {
		width: 80%;
	}

	#projects article,
	#projects article:first-child,
	#projects .grid article:nth-child(4),
	#projects article:last-child {
		width: 100%;
	}

	#specs figure {
		display: none;
	}

	.service #info .sticky {
		order: 1;
	}

	#filters {
		padding-left: 20px
	}

	#filters > div {
		padding-left: 0;
		overflow-x: auto;
		padding-bottom: 20px
	}

	#footer > div {
		flex-direction: column;
		gap: var(--space-20);
	}

	#footer .absolute {
		position: static;
		width: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		transform: none;
	} 

	#footer .text-right{
		text-align: center;
	}

	#contact .close {
		top: var(--space-30);
		left: var(--space-30);
	}

	#contact > div {
		padding: var(--space-200) var(--space-30) var(--space-100);
	}

	#contact .wpcf7 .fields {
		gap: var(--space-20);
	}

	#not-found .w-fit {
		flex-direction: column;
	}

	#neobrand {
		margin: auto;
		padding-top: 3px;
	}

	#header nav .menu a {
		margin-right: 0;
		margin-bottom: 20px;
	}

	.project #content .project-gallery .scrollbar {
		display: none;
	}

}


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

	#services .grid,
	#projects .grid {
		grid-template-columns: 100%;
	}

	#projects .grid article:first-child,
	#projects .grid article:last-child,
	#projects .grid article:nth-child(4) {
		grid-column: auto;
	}

	.project #content .project-gallery .loaded figure {
		height: 420px;
	}

	.project #content .project-gallery .loaded .hor {
		min-width: 100vw;
	}

	#contact .policy {
		margin-bottom: var(--space-20);
	}

	#contact .wpcf7 .last {
		flex-direction: column;
		align-items: flex-start;
		gap: var(--space-20);
	}

	#contact .w-30 div.w-50 {
		width: 100%;
	}
	
	#talk .grid {
		grid-template-columns: 100%;
	}

}