/*
FONTS

font-family: Karla;

*/



/* VARIABLES */

:root {
  --default-font: Karla;
  --default-font-size: 30px;
  --alt-font-size: 24px;
  --default-line-height: 1.66;

  --default-input-font: Karla;
  --default-input-font-size: 28px;
  --dim-input-height: 66px;
  
  --button-input-font: Karla;
  --button-font-size: 28px;
  --button-height: 66px;

  --col-primary: #00509D;
  --col-accent: #000000;
  --col-burger: #fff;
  --col-text: #000;
  --col-page-bg: #fff;
  --col-border: #000;
  --col-input: #000;
  --col-placeholder: #00509D;
  --col-input-bg: transparent;
  --col-button: #fff;
  --col-button-bg: transparent;
  --col-link: #000;
  --col-link-hover: #000000;

  --col-error: #ff6633;
  --col-attention: #ff6633;
  --col-warning: #f5b00e;
  --col-missing: #ff6633;

  --col-primary-rgb: 0, 80, 157;
  --col-accent-rgb: 0, 0, 0;
  --col-button-rgb: 255, 255, 255;
  --col-link-rgb: 0,0,0;
  --col-link-hover-rgb: 0, 0, 0;
  --col-error-rgb: 255, 51, 0;
  --col-attention-rgb: 255, 51, 0;
  --col-warning-rgb: 245, 176, 14;
  --col-border-rgb: 190, 190, 190;
  --col-missing-rgb: 255, 51, 0;

  --dim-site-width: 1920px;
  --dim-site-inner-width: 1640px;
  --dim-default-space: 100px;

  --vh: 1vh;
}

/* THEME */


/*CORE HTML*/

h1 {font-size: 120px; font-weight: 700; color: var(--col-primary); margin-bottom: 100px; line-height: 1; letter-spacing: -1px}
h2 {font-size: 60px; font-weight: 700; color: #000; margin-bottom: 50px; line-height: 1.1; text-transform: uppercase; }
h1.home {font-size: 60px; font-weight: 700; color: var(--col-primary); ; margin-bottom: 54px; line-height: 1.1;}

p.smaller {font-size: calc(0.8 * var(--default-font-size));}
p.short {max-width: 1080px; margin-left: auto; margin-right: auto}

/*CONTAINERS*/


/*BUTTONS*/

a.btn { display: table; margin-right: auto; margin-left: 0; min-width: 280px; max-width: 100%; border: 3px solid #fff; background: transparent; line-height: 54px; padding: 0 50px 0 40px; position: relative; font-size: 20px; font-weight: 700; color: #fff; border-radius: 10px; text-transform: uppercase; text-align: left; z-index: 2;}
a.btn:before { content:""; background: #fff; width: 0; height: 100%; position: absolute; display: block; top: 0; left: 0;  transition: all .15s cubic-bezier(0.250, 0.460, 0.450, 0.940); z-index: 1; mix-blend-mode: multiply}
a.btn:hover { color: var(--col-primary); border-color: #fff;}
a.btn:hover:before { width: 100%;}
a.btn:after { content:""; display: block; right: 16px; top: 0; width: 10px; height: 20px; position: absolute; height: 100%; background: url(/img/svg/arrow.svg) no-repeat center center; background-size: contain; }
a.btn:hover:after { background-image: url(/img/svg/arrow-blue.svg); }

a.btn.bt-blue { border-color: var(--col-primary); color: var(--col-primary); }
a.btn.bt-blue:after { background-image: url(/img/svg/arrow-blue.svg);}
a.btn.bt-blue:before {background: var(--col-primary); z-index: 1; mix-blend-mode: lighten}
a.btn.bt-blue:hover { color: #fff;}
a.btn.bt-blue:hover:after { background-image: url(/img/svg/arrow.svg); }

/*HEADER AND NAV*/
header { position: absolute; top: 0; width: 100%;z-index: 3; }
header > div { display: flex; width: 100%; max-width: 1700px; padding: 40px 20px 0; margin: 0 auto; justify-content: space-between; gap: 40px; align-items: flex-start;}
header div.logo {width: 560px;}
header nav > ul {display: flex;justify-content: flex-end; gap: 60px; align-items: flex-start; padding-top: 30px}
header nav ul { list-style-type: none; padding-left: 0; margin: 0; }
header nav ul li { padding: 0; margin: 0}
header nav a {color: #fff; font-size: 20px; display: block; width: 100%; position: relative; font-weight: 700; text-transform: uppercase;}
header nav a:hover {color: #ccc}
header nav > ul  > li { max-height: 50px; overflow: hidden; position: relative}
header nav > ul  > li > a { line-height: 50px; }
header nav > ul  ul > li > a { line-height: 32px; }
header nav > ul  > li > a:not(:last-child) { padding-right: 32px; }
header nav > ul  > li > a:not(:last-child):after {content:""; display: block; width: 12px; height: 100%; background: url(/img/svg/arrow-down.svg) no-repeat right center; background-size: contain; position: absolute; right: 0; top: 0; }
header nav > ul  > li:hover {max-height: 400px; overflow: visible; }
header nav > ul  ul {display: block; width: 400px; position: absolute; left: 0; top: 50px; z-index: 3;}

footer { padding: 80px 30px; border-top: 1px solid #707070}
div.footer { max-width: 1580px; margin: 0 auto 45px; display: flex; gap: 50px; justify-content: space-between; align-items: flex-start; }
div.footer-contacts {display: flex; gap: 30px; flex-direction: column; justify-content: flex-start; align-items: flex-start; }
footer div.contacts { display: block}
footer div.contacts p { line-height: 1.33;}
footer div.contacts span { color: var(--col-primary); font-size: var(--alt-font-size); }
/*footer div.contacts > div:first-child { column-span: span 2;}*/
footer div.contacts a { font-size: var(--alt-font-size); color: #000; font-weight: 400;}
footer div.contacts strong { font-size: 20px; color: var(--col-primary); font-weight: 700; text-transform: uppercase;}
div.footer-nav {display: flex; gap: 100px; justify-content: flex-end; align-items: flex-start; max-width: 80%;}
div.footer-nav p {display: flex; gap: 20px; flex-direction: column; justify-content: flex-start; align-items: flex-start; margin: 0}
div.footer-nav a { font-size: var(--alt-font-size); color: #000; font-weight: 400;}
div.disclaimer { max-width: 1580px; margin: 0 auto;}
div.disclaimer p, div.disclaimer a { font-size: 16px; color: #707070; font-weight: 400}
 footer a:hover { color: var(--col-primary) !important}

header.attached.visible { position: fixed; background: rgba(var(--col-primary-rgb), 0.5)}
header.attached.visible > div { padding: 10px 20px 0;}
header.attached.visible div.logo { width: 120px;}
header.attached.visible  nav > ul {gap: 20px; padding-top: 0px}
header.attached.visible nav ul ul { background-color: var(--col-primary); padding: 10px 20px}
/*ELEMENTS*/

/*CONTENT*/

div.masthead { width: 100vw; height: calc(100 * var(--vh)); }
div.masthead img { width: 100%; height: 100%; object-fit: cover; object-position: center center;}

div.masthead-actions { position: absolute; width: 100%; max-width: 1700px; padding: 0 20px; display: flex; left: 50%; top: 50%; transform: translate3D(-50%, -50%, 0); justify-content: center; align-items: flex-end; flex-direction: column; gap: 35px;}
div.masthead-actions a { display: block; padding: 0 90px 0 30px; height: 100px; line-height: 90px; border: 5px solid #fff; background: transparent; position: relative; font-size: 28px; font-weight: 700; color: #fff; width: 600px; max-width: 100%; border-radius: 20px; text-transform: uppercase; z-index: 2; overflow: hidden}
div.masthead-actions a:after { content:""; display: block; right: 30px; top: 0; width: 20px; height: 40px; position: absolute; height: 100%; background: url(/img/svg/arrow.svg) no-repeat center center; background-size: contain; }
div.masthead-actions a:before { content:""; background: #fff; width: 0; height: 100%; position: absolute; display: block; top: 0; left: 0;  transition: all .2s cubic-bezier(0.250, 0.460, 0.450, 0.940); z-index: 1; mix-blend-mode: multiply}
div.masthead-actions a:hover { color: var(--col-primary); border-color: #fff;}
div.masthead-actions a:hover:before { width: 100%;}
div.masthead-actions a:hover:after { background-image: url(/img/svg/arrow-blue.svg); }

a.masthead-arrow { position: absolute; bottom: 95px; left: 50%; margin-left: -20px; display: table; animation: bounce 3s cubic-bezier(0.250, 0.460, 0.450, 0.940) infinite;}

p.tagline { font-size: 45px; color: #707070; text-align: center; text-transform: uppercase; margin: 54px auto 0}

div.grid-1 {display: flex;  justify-content: space-between; align-items: flex-start; gap: 16px; margin-top: 100px}
div.grid-1 > div {width: 50%; position: relative}
div.grid-1 > div > img {width: 100%; display: block; }
div.grid-1 div.caption.top {padding: 30px 0 0 40px; text-align: left;}
div.grid-1 div.title {font-size: 60px; font-weight: 700; margin-bottom: 15px; color:#fff;}
div.grid-1 a.btn {width: 280px; max-width: 80%; }
div.property-finder { width: 100%; border-top: 1px solid #fff; padding: 0 40px; position: absolute; left: 0; bottom: 0}
div.property-finder a { width: 100%; display: block; line-height: 79px; padding-left: 95px; position: relative; text-align: left; color: #fff; font-size: 20px; font-weight: 700}
div.property-finder a:before {content:"";  width: 48px; display: block; height: 100%; position: absolute; left: 0; top: 0; background: url(/img/svg/search.svg) no-repeat left center; background-size: contain;}
div.property-finder a:after {content:"";  width: 20px; display: block; height: 100%; position: absolute; right: 0; top: 0; background: url(/img/svg/arrow-down.svg) no-repeat right center; background-size: contain;}


div.grid-2 { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; column-gap: 16px; row-gap: 0}
div.grid-2 > div { display: block; position: relative}
div.grid-2 > div img { display: block; width: 100%}
div.grid-2 > div div.caption { padding: 0 36px 40px; text-align: left; }
div.grid-2 > div div.title { color: #fff; font-weight: 700; margin-bottom: 20px; text-transform: uppercase; line-height: 1.2}

div.grid-3  {display: flex;  justify-content: space-between; align-items: flex-start; gap: 100px; }
div.grid-3  > div {width: calc(100% - 800px);}
div.grid-3  > div:last-child  {width: 700px;}
div.blue-image { width: 100%; position: relative; padding-top: 80px}
div.blue-image img { width: 100%; display: block}
div.blue-image:after { content:""; display: block; position: absolute; right: 0; top: 0px; height: 80px; width: 80%; background: var(--col-primary)}

ul { margin-bottom: 40px; ;list-style-position: outside; padding-left: 0px}
ul li { margin-bottom: 25px; line-height: 1.5;}
ul.blue { list-style-type: none;}
ul.blue li { padding-left: 48px; position: relative;}
ul.blue li:before { content: ""; width: 24px; height: 2px; top: 50%; margin-top: -1px; left: 0; background: var(--col-primary); display: block; position: absolute;}


div.js-accordion { max-width: 1045px; margin: 0 auto 100px; border: 1px solid var(--col-primary); border-radius: 20px; overflow: hidden;}
h4.ui-accordion-header  {font-size: 30px; font-weight: 700; padding: 30px 100px 30px 60px; position: relative; border-top: 1px solid var(--col-primary); text-align: left; color: var(--col-primary); text-transform: uppercase;}
h4.ui-accordion-header:first-child {border-top: 0}
h4.ui-accordion-header  span {width: 20px; height: 100%; position: absolute; display: block; right: 60px;  top: 0; background: url(/img/svg/arrow-down-blue.svg) no-repeat center center; background-size: contain;}
div.ui-accordion-content p {background: #F0F0F0; text-align: left;padding: 30px 60px; border-top: 1px solid var(--col-primary); font-size: var(--alt-font-size); margin: 0}

div.grid-4 {display: flex;  justify-content: space-between; align-items: center; gap: 0px; background:  var(--col-primary); }
div.grid-4 > div { width: 58%}
div.grid-4 > div img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center center;}
div.grid-4 > div:last-child { width: 42%; padding: 40px;}
div.grid-4 > div:last-child p { max-width: 530px; margin: 0 auto 30px; color: #fff; font-weight: 500; font-size: var(--alt-font-size)}

div.content-mission { position: relative; margin-top: 400px; }
div.content-mission img { display: block}
div.content-mission div.caption { left: 50%; top: 50px; opacity: 0; transform: translateX(-50%); width: 1220px; max-width: 80%; background: var(--col-primary); padding: 120px; transition: all 1.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) .3s}
.in-view div.content-mission div.caption { top: -300px; opacity: 1; }
div.content-mission div.caption p { color: #fff; max-width: 940px; margin: 0 auto; font-weight: 500; }

div.grid-5 {display: flex;  justify-content: space-between; align-items: flex-start; gap: 100px; margin-bottom: 180px}
div.grid-5 > div {width: 50%}
div.grid-5 > div:first-child {width: 50%}

div.grid-6 {display: flex;  justify-content: space-between; align-items: flex-end; gap: 160px; margin-top: -180px;}
div.grid-6 > div:first-child {width: 578px}
div.grid-6 > div:last-child { width: calc(100% - 738px); padding-top: 200px;}

div.about-1 {padding: 100px; background: var(--col-primary);}
div.about-1 p {color: #fff; font-weight: 500; text-align: center; max-width: 1260px; margin: 0 auto}

div.team {display: grid; grid-template-columns: 1fr; column-gap: 130px; row-gap: 150px}
div.team div.name {font-size: 44px; font-weight: 700; color: #000; margin-bottom: 10px; letter-spacing: 0}
div.team div.title {font-size: 20px; font-weight: 700; color: var(--col-primary); margin-bottom: 32px; text-transform: uppercase;}
/*div.team a {display: block; }*/

div.job-listings {display: flex; gap: 37px; flex-direction: column; justify-content: flex-start; }
div.job-listings > div { padding: 60px 55px; display: flex; justify-content: space-between;  align-items: center; gap: 40px; width: 100%; border-radius: 10px; box-shadow:  0px 0px 30px 0px rgba(0,0,0,0.16);}
div.job-listings span { display: block; line-height: 1.2; font-size: 28px; font-weight: 700; color: var(--col-primary); text-transform: uppercase;}
div.job-listings a { display: block; margin: 0}

div.properties {display: grid; grid-template-columns: 1fr 1fr; column-gap: 16px; row-gap: 120px}
div.property {display: flex; flex-direction: column; gap: 35px; justify-content: space-between; }
div.properties div.thumb {display: block; position: relative}
div.properties div.thumb:after {content:""; display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: url(/img/svg/mask.png) no-repeat center center; background-size: cover; mix-blend-mode: multiply; display: none;}
div.properties div.thumb img {display: block}
div.properties div.info {padding: 0 35px}
div.properties div.buttons {justify-content: flex-start; margin-top: 0; flex-direction: column; gap: 20px; align-items: flex-start;}
div.properties div.buttons a.btn { min-width: 147px;}
div.properties div.buttons a { font-size: var(--alt-font-size);}
div.properties div.buttons span { color: var(--col-primary); }
div.properties div.title { color: var(--col-primary); font-weight: 700; margin-bottom: 27px;text-transform: uppercase;}
div.properties p { font-size: 20px; margin: 0}

div.certificates  {display: grid; grid-template-columns: 1fr 1fr; column-gap: 48px; row-gap: 38px; margin-top: 100px}
div.certificates  a {display: flex; padding: 24px 44px 24px 20px; justify-content: space-between; border: 3px solid var(--col-primary); border-radius: 10px; position: relative;}
div.certificates  a:after {content: ""; display: block; position: absolute; right: 23px; width: 13px; height: 100%; background: url(/img/svg/arrow-blue.svg) no-repeat center center; background-size: contain; top: 0}
div.certificates  a > span {width: 230px; font-weight: 700; color: var(--col-primary); }
div.certificates  a > span:first-child {width: calc(100% - 230px); padding-right: 30px;;}

div.table  {display: grid; grid-template-columns: 1fr 1fr; column-gap: 0px; row-gap: 0px; margin: 40px auto 40px 0; width: 600px; max-width: 100%; border: 1px solid #ccc; border-right: 0; border-bottom: 0}
div.table  div {padding: 15px 24px; border: 1px solid #ccc; border-top: 0; border-left: 0; }
div.table  div.th {font-weight: 700}

/*FORMS*/

div.registration-form { max-width: 1280px; margin: 0 auto 0 0}
input[type="text"], input[type="search"], input[type="tel"], input[type="number"], input[type="email"], input[type="password"], textarea { border-radius: 10px; padding-left: 18px; border-color: #707070;}
button[type="submit"], button[type="button"] { background: var(--col-primary); color: #fff; font-weight: 400; border-radius: 10px; margin-top: 20px; padding: 0 60px;}
textarea { height: 200px}
.select2-container--default .select2-selection--single { border-radius: 10px; border-color: #707070}
.select2-container--default .select2-selection--single .select2-selection__rendered { padding-left: 18px;}
.select2-container--default .select2-selection--single .select2-selection__placeholder { color: var(--col-primary)}
.select2-container--default .select2-selection--single .select2-selection__arrow { background-image: url(/img/svg/arrow-down-blue.svg)}
.select2-results__option { margin-bottom: 0}

fieldset { margin: 0 auto 80px;}
fieldset > label { font-weight: 700; color: var(--col-primary); margin-bottom: 30px; display: block}

div.reveal-response p { font-size: 24px; text-align: left;}


/*ANIMATIONS*/

.slide-in-bottom { transform: translateY(300px); opacity: 0;}
.slide-in-top { transform: translateY(-300px); opacity: 0;}
.in-better-view.slide-in-bottom {opacity: 1;	animation: slide-in-bottom 0.9s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;}
.in-better-view .slide-in-bottom {	opacity: 1; animation: slide-in-bottom 0.9s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;}
.in-better-view .slide-in-top {	opacity: 1;animation: slide-in-top 0.9s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;}

@keyframes bounce {
	0%  { transform: translateY(0px); }
	40%  { transform: translateY(20px); }
	100%  { transform: translateY(0px); }
}

@keyframes slide-in-top {
  0% { transform: translateY(-300px); opacity: 0;}
  100% {transform: translateY(0);opacity: 1;}
}

@keyframes slide-in-bottom {
  0% {transform: translateY(300px);opacity: 0;  }
  100% { transform: translateY(0);opacity: 1;
  }


}



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

	:root {
	  --default-font-size: 20px;
	  --alt-font-size: 20px;
	  --default-line-height: 1.5;

	  --default-input-font-size: 24px;
	  --button-font-size: 24px;
	  --dim-input-height: 56px;
	  --button-height: 56px;

	}

	h1 {font-size: 72px; margin-bottom: 60px}
	h2 {font-size: 36px; }
	h1.home {font-size: 48px; margin-bottom: 40px; }

	section:not(.full):not(.max):not(.masthead) { padding-left: 40px; padding-right: 40px}

	header div.logo { width: 400px;}

	a.btn { line-height: 46px; padding: 0 40px 0 30px; font-size: 18px; border-width: 2px; min-width: 220px;}
	a.btn:after { right: 12px; width: 8px; }

	div.disclaimer p, div.disclaimer a { font-size: 13px; }
	div.masthead-actions a { padding: 0 60px 0 30px; height: 80px; line-height: 72px; border: 4px solid #fff; font-size: 24px; }
	div.masthead-actions a:after {width: 16px;}
	p.tagline { font-size: 32px; margin: 0px auto}
	
	div.grid-1 div.title {font-size: 40px; margin-bottom: 12px; }
	div.property-finder a { line-height: 59px; padding-left: 80px; font-size: 18px; }
	div.property-finder a:before {width: 32px; }
	div.property-finder a:after {width: 18px; }

	div.grid-2 > div div.title { margin-bottom: 10px}
	div.grid-2 a.btn { margin-top: 0px}

	div.team div.name {font-size: 40px; }
	div.team div.title {font-size: 24px; }
	div.job-listings span { font-size: 24px; }
	div.properties p { font-size: 18px; }

	div.grid-5 { margin-bottom: 80px}

	div.job-listings > div { padding: 30px 50px}

	div.grid-3 > div { width: 50%;}
	div.grid-3 > div:last-child { width: 50%;}

	div.certificates { grid-template-columns: 1fr 1fr; column-gap: 30px; row-gap: 20px; margin-top: 70px; }

}

@media only screen and (max-width: 1280px) {
	:root {
	  --default-font-size: 18px;
	  --alt-font-size: 18px;

	  --default-input-font-size: 18px;
	  --button-font-size: 18px;
	  --dim-input-height: 40px;
	  --button-height: 40px;
	}


	header > div { padding: 20px 20px 0; }
	header div.logo {width: 300px;}
	header nav > ul {gap: 30px; padding-top: 20px}
	header nav a {font-size: 18px; }
	header nav > ul  > li { max-height: 40px; }
	header nav > ul  > li > a { line-height: 40px; }
	header nav > ul  ul {top: 40px;}

	footer { padding: 50px 30px; }
	div.footer { margin: 0 auto 40px; gap: 40px; }
/*	div.footer-contacts {gap: 40px; }*/
	footer div.contacts { column-gap: 40px; row-gap: 30px}
	footer div.contacts strong { font-size: 18px; margin-bottom: 10px; }
	div.footer-nav {gap: 50px; }

	header.attached.visible > div { padding: 10px 20px 0;}
	header.attached.visible div.logo { width: 120px;}
	header.attached.visible  nav > ul {gap: 20px; padding-top: 0px}



	div.grid-1 div.caption.top { padding: 30px 0 0 30px; }
	div.grid-2 > div div.caption { padding: 0 20px 20px;}
	div.grid-3 { gap: 60px}

	div.js-accordion { border-radius: 16px; }
	h4.ui-accordion-header  { font-size: 24px; padding: 20px 50px 20px 30px; }
	h4.ui-accordion-header  span {width: 16px; right: 10px;  }
	div.ui-accordion-content p {padding: 25px 30px; }
	div.grid-4 > div { width: 50% !important}

	div.content-mission { margin-top: 200px;}
	.in-view div.content-mission div.caption { top: -120px; }

	div.grid-6 { gap: 60px; margin-top: -150px}
	div.grid-6 > div:first-child { width: 30%;}
	div.grid-6 > div:last-child { width: 70%;}

	div.team { column-gap: 60px; row-gap: 80px;}

	div.properties {    row-gap: 70px;}	
	div.property {gap: 25px}

	div.certificates { grid-template-columns: 1fr 1fr; column-gap: 20px; row-gap: 20px; margin-top: 50px; }
	div.certificates  a { padding: 20px 40px 20px 20px; border: 2px solid var(--col-primary); }
	div.certificates  a > span {width: 120px; }
	div.certificates  a > span:first-child {width: calc(100% - 120px); padding-right: 20px;;}

	div.grid-5 { flex-direction: column; gap: 40px; margin-bottom: 30px}
	div.grid-5 > div { width: 100% !important}
}


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

	h1 {font-size: 48px; margin-bottom: 60px}
	h2 {font-size: 26px; margin-bottom: 30px}
	h1.home {font-size: 36px; margin-bottom: 30px; }

	section:not(.full):not(.max):not(.masthead) { padding-left: 30px; padding-right: 30px}

	div.footer { flex-direction: column;}
/*	div.footer-contacts { flex-direction: row; align-items: flex-start;}*/
	footer div.contacts { grid-template-columns: 1fr 1fr 1fr; column-gap: 30px; row-gap: 30px; padding-top: 10px}
	div.footer-nav { max-width: 100%; width: 100%; justify-content: space-between}

	a.btn { line-height: 38px; padding: 0 30px 0 20px; font-size: 16px; border-width: 1px; min-width: 160px;}
	a.btn:after { right: 10px; width: 8px; }

	ul li { margin-bottom: 15px}

	div.masthead-actions a { padding: 0 40px 0 20px; height: 60px; line-height: 56px; border: 2px solid #fff; font-size: 18px; }
	div.masthead-actions a:after {width: 12px;}
	p.tagline { font-size: 24px; }
	
	div.grid-1 { margin-top: 50px}
	div.grid-1 div.title {font-size: 24px; margin-bottom: 10px; }
	div.grid-1 div.caption.top {padding: 20px 0 0 20px}
	div.grid-1 a.btn { width: 200px}
	div.property-finder { padding: 0 20px}
	div.property-finder a { line-height: 39px; padding-left: 40px; font-size: 14px; }
	div.property-finder a:before {width: 16px; }
	div.property-finder a:after {width: 14px; }
	div.grid-2 a.btn { line-height: 28px; padding: 0 30px 0 20px; font-size: 14px; min-width: 120px;}

	div.blue-image:after { display: none}

	div.team div.name {font-size: 24px; }
	div.team div.title {font-size: 18px; }
	div.job-listings span { font-size: 18px; }
	div.properties p { font-size: 16px; }

	div.job-listings > div { padding: 20px 30px}

	div.content-mission { margin-top: 0}
	div.content-mission div.caption {background: none; padding: 0; position: relative; top: 0 !important;  opacity: 1; margin-top: 40px; max-width: 100%}
	div.content-mission div.caption p { color: #000;}

	div.buttons.margin-top-100 { margin-top: 40px; flex-direction: column; align-items: flex-start;}
/*	div.grid-5 { gap: 40px} */
}

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

	:root {
	  --dim-default-space: 70px;
	}

	header { position: fixed; height: 60px; padding: 0;}
	header.attached { background: rgba(var(--col-primary-rgb), 0.5)}
	header div.burger { display: block; left: auto; right: 0; top: 0}
	header div.logo { position: absolute; left: 10px; top: 0; width: 140px; padding-top: 8px;}
	header nav { width: 100vw; left: -200vw; position: fixed; opacity: 0; background: rgba(var(--col-primary-rgb), 0.85); padding: 60px 0px; height: calc(100 * var(--vh)); top: 0; }
	header.active nav { left: 0; opacity: 1;}
	header nav > ul { flex-direction: column; align-items: flex-start;}
	header nav > ul > li { padding: 0 30px; width: 100%; max-height: 999px}
	header nav > ul > li > a:not(:last-child):after { display: none}
	header nav > ul ul { position: relative; top: 0; display: block;}
	header nav > ul ul li { padding: 0 30px}

	div.footer-contacts { flex-direction: column}
	footer div.contacts { display: flex; flex-direction: column; gap: 0px}
	div.footer-nav p:first-child { display: none;}
	div.footer-nav p:nth-child(2) { display: none;}

	div.masthead-actions { top: auto; bottom: 100px; left: 0; transform: none; padding: 0 30px 30px; width: 100%;}
	div.masthead-actions a { width: 100%;}
	a.masthead-arrow { bottom: 40px}

	div.grid-1 { flex-direction: column}
	div.grid-1 > div { width: 100%}
	div.grid-2 {grid-template-columns: 1fr 1fr; row-gap: 16px}
	div.grid-2 > div div.caption { padding: 0 10px 10px; } 

	div.grid-4, div.grid-3 { flex-direction: column; gap: 0}
	div.grid-5, div.grid-6 { flex-direction: column-reverse; gap: 40px; margin-bottom: 30px}
	div.grid-3 > div, div.grid-4 > div, div.grid-5 > div, div.grid-6 > div { width: 100% !important}
	div.about-1 { padding: 0px 0px; background: #fff;}
	div.about-1 p { color: #000}

	div.team { grid-template-columns: 1fr;   row-gap: 50px;}
	div.team div.title { margin-bottom: 15px; margin-top: 5px}
	div.properties { grid-template-columns: 1fr; row-gap: 60px;}

	div.certificates { grid-template-columns: 1fr; }

}

@media only screen and (max-width: 760px) {
	div.form-row { flex-direction: column; gap: 10px}
	div.form-row { margin-bottom: 10px}
	div.field:empty { display: none}
	fieldset > label { margin-bottom: 15px}
	.select2-container--default .select2-selection--single .select2-selection__arrow {    background-size: 12px 6px;}

	div.property { gap: 20px}
	div.properties div.title { margin-bottom: 10px}
	div.properties div.buttons { gap: 10px}

	h4.ui-accordion-header { font-size: 20px;         padding: 20px 40px 20px 20px;}

	div.job-listings > div { padding: 20px 20px; display: block;}	
	div.job-listings span { font-size: 16px; display: block; width: 100%;}
	div.job-listings a.btn { font-size: 0; min-width: 0; padding: 0; padding-right: 0px; width: 100%; height: 100%; border: 0; position: absolute; top: 0; left: 0; z-index: 3; display: block;}
	div.job-listings a.btn:before { display: none !important}

	#expandme {width: 200vw !important; max-width: 1280px; display: block; margin-left: -50vw;}
	#expandme img {width: 100%; height: 100%; object-fit: cover; object-position: center center;display: block}
}