/* WEBFONTS */

/* Roboto */
@font-face {font-family: "Roboto"; src: url("../fonts/Roboto/Roboto-Light.ttf") format('truetype'); font-weight: 400; font-style: normal; }

/* Oswald */
@font-face {font-family: "Oswald"; src: url('../fonts/Oswald/static/Oswald-Regular.ttf') format('truetype'); font-weight: 400; font-style: normal; }

/* Oswald bold */
@font-face {font-family: "Oswald"; src: url('../fonts/Oswald/static/Oswald-SemiBold.ttf') format('truetype'); font-weight: 600; font-style: normal; }


/* CSS3 */

* { outline: solid 0px; outline-color: transparent; box-sizing: border-box; scroll-behavior:smooth; }
*:focus { outline: solid 1px; outline-color: currentColor; outline-offset: 2px; transition: outline-color 0.5s ease-in-out;  }

:focus {  }
::selection { background-color:black; color:white; }

html { font-family: Roboto, Lato, sans-serif; font-size:1em; line-height:1.5; font-weight: 400; color:#000; background-color: #FEFEFE; width:100%; min-width:359px; }
html * { margin:0 0 0 0; padding:0 0 0 0; border:none; }
body { float:left; width:100%; margin: 0 0%; background-color: rgba(255,255,255,0.9); box-shadow: 0 0 3em #ddd; }

h1, h2, h3 { clear:both; font-family: Oswald, Roboto, sans-serif; }

h1 { margin-bottom:0.6em; font-size:1.6em; color:#777; text-transform:uppercase; font-weight: 600; }
h2 { margin-bottom:0.4em; font-size:1.5em; color:#444; border-bottom:1px dotted #aaa; padding-bottom:3px; font-weight:normal; }

.h2noborderunder { border-bottom:none; }

h3 { font-size:1.225em; color:#222; border-left: solid 1em #0c513b; font-weight: normal; padding-left:0.5em; margin: 0.75em 0 0.5em 0; }

p { color:#000; clear:both; float:left; margin-bottom:1em; }

a { color:#000; }
#content a { color:#0c513b; text-decoration:none; border-bottom: 1px solid; }

img { border-radius:0.5px; }
img { margin-bottom:15px; }

blockquote { font-size: 1.1em; background-color: rgba(245,245,220,0.5); color:#000 /*slightly darker than nav bg */; padding:1.25em; margin:1.25em 0; font-style: italic; line-height: 1.5; }

/* NAMED */

#bar-above-all { padding: 0 5vw; background-color: #333; width: 100%; height: 2em; }
#bar-above-all * { margin: 0; padding: 0; color: #fff; }

#bar-above-all a { text-decoration: none; border-bottom: 1px solid transparent; transition: border-color 1s; }
#bar-above-all a:hover { border-bottom-color: #fff !important; }

#bar-above-all ul { height: 2em; line-height: 1; list-style:none; list-style-position: outside; }
#bar-above-all ul li { float:left; margin-right:1em; line-height: 2; font-size:1em; padding: 0 0 0 0; }
#bar-above-all ul li a { font-weight: 400; }

#bar-above-all ul li.icon { float:right; margin-left: 1em; margin-right: 0; }
#bar-above-all ul li.icon img { height: 2em; width: 2em; margin-bottom:-0.6em; }

#bar-above-all ul li.landacknow-li { float: right; margin-right:0; }
#bar-above-all ul li.landacknow-li a  { }

#bar-above-all ul li.vacancies-li { float: right; margin-right:1em; }
#bar-above-all ul li.vacancies-li a,
#bar-above-all ul li.vacancies-li a span { color: #E9F079; opacity: 1; }

@media(max-width:640px) {
	#bar-above-all ul li { line-height: 2; font-size:1em; }
    #bar-above-all ul li.landacknow-li { display:none; }
    #bar-above-all ul li.vacancies-li { margin-right: 0; }}

@media(max-width:480px) {
	#bar-above-all ul li { line-height: 2.1; font-size:0.95em; word-spacing:-1px; }}

@media(max-width:400px) {
	#bar-above-all ul li { margin-right: 0.9em; line-height: 2.2; font-size:0.90em; }}

@media(max-width:380px) { #bar-above-all ul li.vacancies-li a span { display:none; }}


	a.skipto {}
 	a.skipto:focus {}
 	.skipto { opacity: 0.8; margin: 0 0 0 0; padding: 0 0 0 0; transition: all 0.33s; }
 	.skipto:focus { opacity: 1; font-size: 1em; padding-right: 1em; margin-right: 1em; width: auto; } /* see outline up above */

#content .right img { width:100%; }
#content .left img { width:100%; }

.bios p { clear:none; width:73.5% !important; float:left; }
.bios img { width:24.5% !important; float:right; margin-left:1%; }

.desktop { display:block; visibility:visible; }
.mobile { display:none; visibility:hidden; }

#content ul li { list-style-position: outside; margin-left: 1em; clear:left; font-size: 1em; }
#content ul { margin-left:0.5em; margin-bottom:1em; margin-top: 0.3em; line-height: 1.5; }
#content ul.links { width:48%; float:left; clear:none; }

figcaption { line-height: 1.2; margin-bottom: 1.5em; margin-top:-0.375em; }

@media(max-width:1279px) {
	#content ul.links { width: 95%; }
	#content ul.links:first-of-type { margin-bottom: 0;}
	#content ul.links:last-of-type { margin-top:0; }
}

#content div.split { width:47.5%; margin-right:2.5%; float:left; clear:none; }
#content div.split iframe { float:left; height:22.5vmin; max-height: 11.25vmax; }

hr { color:#888; background-color:#888; height:20px; text-shadow:none; border:none; margin-bottom:2em; display:none; }

/* Layout elements and tags within */

#header { float:left; width:100%; padding: 0.8% 5% 0.7% 5%; }
#header a { float:left; height: 4.5em; padding: 0 0 0 0; margin:  0.8em 0 0.8em 0; }
#header img { float: left; height:100%; padding: 0 0 0 0; margin: 0 0 0 0; }
#header #phonenumber { margin:  0.6em 0 0.7em 0; float:right; text-align:right; font-style: italic; font-size:1.1em; color:#0c513b; font-family:Oswald, Roboto, Lato, sans-serif; line-height:1.5; text-shadow:0 0 0.25em #F0F0F0; }

#navigation { color: #fff; float:left; width: 100%; padding: 1% 5%; background-color:#0c513b; margin-bottom:0; }
#navigation * { padding:0 0 0 0; margin: 0 0 0 0; list-style-type:none; text-indent:0; line-height:1.5; }
#navigation a { font-size:1em; font-weight: 400; color:#eee; text-decoration:none; border-radius:0.5px; }

#navigation small { color:#aaa; clear:none; float:none; }

#navigation ul { float:left; font-family:Oswald, Roboto, sans-serif; }
#navigation ul li { float:left; min-width:9em; margin-right:4em; }
#navigation ul li:last-child { margin-right:0; padding-right:0; }
#navigation ul li ul li { float:none; min-width:1em; padding-right:0; margin-right:0; }

#navigation ul li a, #navigation ul li ul li a { padding:0.0em 0.3em; margin-left:-5px; transition: background-color 1s ease, color 1s ease; border-radius:1px; }
#navigation ul li a:hover, #navigation ul li ul li a:hover { background-color:#FFFFFF; color:#000; }
#navigation ul li a:hover small { color:#000; }

#navigation ul li.icons ul li a { background-color: transparent !important; color:#fff !important; padding: 0 0 0 0; margin: 0 0 0 0; margin-right: calc( 0.33em + 0.33vw); }

@media(max-width:49em) { #sitemap ul > li.lithatnests { clear:left; margin-bottom: 1em; }}


#navigation ul li.icons ul li a img { display: inline; height: 1.5em; margin: -0.25em 0 -0.25em 0; padding: 0 0 0 0; filter: invert(1); }
#navigation ul li.icons ul li a:focus { border-radius: 50%; }

#navigation ul li.icons ul li a.yellow-button { position: relative; top: -0.0625em; margin: 0 0 0 0; height: 1.5em; background-color: #E9F079 !important; color:black !important; font-size: 1em; line-height: 1; padding: 0.04em 0.67em 0.05em 0.67em; border-radius: 0.3em }
#navigation ul li.icons ul li a.yellow-button:focus { outline-color: #fff; }

#navigation ul li.icons ul li a.vacancies-button { letter-spacing: 1.5px; position:relative; top:0.5em; background-color: rgba(255,255,255,0.2) !important; color: rgba(255,255,255,0.9) !important; font-size: 1em; padding: 0.04em 0.67em 0.05em 0.67em; border-radius: 0.3em }
#navigation ul li.icons ul li a.vacancies-button:focus { outline-color: #fff; }

#homepage .homepage,
#about-who-we-are .about-who-we-are,
#about-affordable-housing .about-affordable-housing,
#about-vision-mission-and-values .about-vision-mission-and-values,
#about-board-of-directors .about-board-of-directors,
#contact-zerin-development .contact-zerin-development,
#developments-housing .developments-housing,
#developments-planned .developments-planned,
#developments-current .developments-current,
#developments-zerin-place .developments-zerin-place,
#developments-zerin-place-clarke .developments-zerin-place-clarke,
#developments-zerin-place-south .developments-zerin-place-south,
#developments-community-services .developments-community-services,
#developments-vision-soho .developments-vision-soho,
#developments-village-soho .developments-village-soho,
#developments-rental-information .developments-rental-information,
#supporting-organizations .supporting-organizations,
#how-to-get-involved .how-to-get-involved,
#how-to-donate .how-to-donate,
#zerins-board-of-directors .zerins-board-of-directors,
#five-year-strategy .five-year-strategy,
#testimonials .testimonials,
#land-acknowledgement .land-acknowledgement

{ background-color:#FFFFFF; color:#000; }

#content { float:left; width: 100%; padding: 2.5% 5%; }
#content { font-size:1em; }
#homepage #content { padding-top:0; margin-top:0; }

/* my gallery new for gridzy */

.my-gallery-new { display:block; width: 100%; height: auto; float:left; clear:left;  margin: 2em 0; padding: 0.25em; }

#content .my-gallery-new a { border-bottom:none; }

.light_square * { color:#000 !important; margin:0 0 0 0; }

#content div.subpagesleft { clear:left; float:left; width:47.5% !important; margin-bottom:1em; }
#content div.subpagesright { float:right; width:47.5% !important; margin-bottom:1em;}
#content div.twocols { clear:left; float:left; width:100% !important; margin-bottom:0em; }
#content div.left { clear:left; float:left; width:47.5% !important; margin-bottom:0em; }
#content div.right { clear:right; float:right; width:47.5% !important; margin-bottom:1em; }
#content div.right iframe { margin-bottom:1em !important; }

#slideshow { float:left; clear:both; width:100% !important; height:auto; margin-bottom:2.5%; }
#slideshow img { width:100%; }
#slideshow, #slideshow img { overflow:hidden; position:static; }
#homepage #content div.twocols #slideshow { width:111.11111% !important; margin-left: -5.555555%; margin-right: -5.555555% }


#sitemap { float:left; width: 100%; padding: 2% 5% 4%; background-color:#000; margin-bottom:0; }
#sitemap * { padding:0 0 0 0; margin: 0 0 0 0; list-style-type:none; text-indent:0; line-height:1.6; }
#sitemap a { font-size:1em; font-weight: 400; color:#eee; text-decoration:none; border-radius:1px; }
#sitemap h2 { color: #fff; margin-bottom: 1em; text-decoration: none; }

#sitemap small { color:#aaa; clear:none; float:none; }

#sitemap ul { float:left; font-family:Oswald, Roboto, sans-serif; }
#sitemap ul li { float:left; min-width:9em; margin-right:4em; }
@media(max-width:82em) { #sitemap ul li { float:left; min-width:5em; margin-right:2em; }}
@media(max-width:67em) { #sitemap ul li { min-width:4em; margin-right:1em; }}
@media(max-width:65em) { #sitemap ul li { margin-right:0.75em; word-spacing:-1px; }}
@media(max-width:60em) { #sitemap ul li { margin-right:0.67em; }}
@media(max-width:49em) { #sitemap ul > li.lithatnests { clear:left; margin-bottom: 1em; }}
#sitemap ul li h3 { padding-left: 0; border: none; color:#bbb; font-size: 1.1em; margin-bottom: 0.25em; }
#sitemap ul li:last-child { margin-right:0; }
#sitemap ul > li.lithatnests { float: left; text-transform: uppercase; line-height: 2.4; color:#bbb; }
#sitemap ul li.lithatnests * { text-transform: none; }
#sitemap ul li ul li { float:none; min-width:1em; margin-right:0; color:#000; }

#sitemap ul li a, #sitemap ul li ul li a { padding:0.0em 0.3em; transition: background-color 1s ease, color 1s ease; }
#sitemap ul li a:hover, #sitemap ul li ul li a:hover { background-color:#FFFFFF; color:#000; }
#sitemap ul li a:hover small { color:#000; }

#sitemap ul li.icons { float: right; }
@media(max-width:64em) { #sitemap ul li.icons {float: left; clear: left; padding:  2em 0} }
@media(max-width:54em) { #sitemap ul li.icons {float: right; clear: left; padding:  2em 0} }
@media(max-width:49em) { #sitemap ul li.icons {float: left; clear: left; padding:  1em 0} }

#sitemap ul li.icons ul li a { background-color: transparent !important; color:#fff !important; padding: 0 0 0 0; margin: 0 0.67em 0 0; }
@media(max-width:66em) { #sitemap ul li.icons ul li a { margin-right:0.6em; }}
#sitemap ul li.icons ul li a img { display: inline; height: 1.5em; margin: -0.25em 0 -0.25em 0; padding: 0 0 0 0; filter: invert(1); }
#sitemap ul li.icons ul li a:focus { border-radius: 50%; }

#sitemap ul li.icons ul li a.yellow-button { position: relative; top: -0.0625em; margin: 0 0 0 0; height: 1.5em; background-color: #E9F079 !important; color:black !important; font-size: 1em; line-height: 1; padding: 0.04em 1em 0.05em 1em; border-radius: 0.5em }
#sitemap ul li.icons ul li a.yellow-button:focus { outline-color: #fff; }


#footer { float: left; clear: left; text-align:left !important; }
#footer { clear:both; padding: 2.5% 5% 5% 5%; }
#footer p { float:left; margin-bottom:0; font-size: 0.9em; color:#222; }

#siteby a { line-height: 3.2; }
#siteby br { display:inline !important; visibility:visible !important; }
#siteby * { color:#444; }
#siteby a { text-decoration: none; border-bottom: 1px dotted #888; }

/* ----- CSS Animation ----- */

body #content { -webkit-animation-fill-mode: both; animation-fill-mode: both;
	-webkit-animation-duration: 1.25s; animation-duration: 1.25s; }
	@-webkit-keyframes fadeIn {
	0% { opacity:0.5; }
	100% { opacity:1; } }
	@keyframes fadeIn {
	0% { opacity:0.5; }
	100% { opacity:1; } }
body #content { -webkit-animation-name: fadeIn; animation-name: fadeIn; }

/* ----- Media Queries ----- */

/* */
#navigation label { display:none; }
#nav { display:none; }
nav { width: auto; max-height: none; }
/* */
form input:focus { outline: 2px solid red; }

@media(min-width:2250px) { html {font-size:107.5%;} }

@media(min-width:2500px) { html {font-size:112.5%;} }

@media(min-width:3000px) { html {font-size:125%;} }

@media(min-width:3500px) { html {font-size:175%;} }

@media(min-width:4500px) { html {font-size:250%;} }

@media(min-width:7500px) { html {font-size:350%;} }

@media(max-width:74em) {

#navigation a { font-size:1em; }
#content ul { margin-left:0.5em; }

#header a { height: 4.725em; margin: 1.05em 0 1.05em 0; }
#header #phonenumber { font-size:1.05em; }
}

@media(max-width:65em) {

#navigation ul li { min-width:7em; margin-right:2em; word-spacing:-1px; }

#content div.split { width:100%; margin-right:0%; }
#content div.split iframe { height:50vmin; max-height: 40vmax; }

#header a {}
#header #phonenumber {}
}

@media(max-width:60em) {

h1 { margin-bottom:0.5em; font-size:1.5em; }
h2 { margin-bottom:0.3em; font-size:1.25em; line-height: 1.333; }
h3 { margin-top:0.5em; margin-bottom:0.25em; font-size:1.125em; }

#header { padding: 2% 5% 2% 5%; }
#header a { height: 4.4em; margin: 1.2em 0 1em 0; }
#header #phonenumber { font-size:1em; }

#navigation ul li { min-width:6.5em; margin-right:1.5em; }
}


@media(max-width:55em) {
#navigation ul li { margin-right: calc( 0.6em + 0.6vw); }

#navigation ul li.icons { min-width: auto; margin-right: 0; }
#navigation ul li.icons ul li { min-width: auto; background-color: transparent !important; }
#navigation ul li.icons ul li a { margin-right: 0.em;	}
#navigation ul li.icons ul li a:last-child { margin-right: 0; }
}

@media(max-width:54em) {
#navigation ul li { margin-right: calc( 0.5em + 0.5vw); }}


@media(max-width:53em) {
#navigation ul li { margin-right: calc( 0.4em + 0.6vw); }

#header a {}
#header #phonenumber {}
}


@media(max-width:52em) {

#header { padding: 3% 5% 3% 5%; }

#navigation ul li a span { display:none; }

#content div.split iframe { height:50vmin; max-height:30vmax; }

#header a {}
#header #phonenumber {}

.mobile { display:block; visibility:visible; }
.desktop { display:none; visibility:hidden; }
.nomobile { display:none !important; visibility:hidden; height:0; }

/* */
#navigation { overflow: hidden; background: #222; }
#navigation label { display: block; color: #fff; text-decoration: none; line-height: 2; }
#navigation label:hover { color: #aaa; }
#navigation label { float: left; cursor: pointer; }
#navigation label:after { content: "\2261"; font-size: 2em; }

nav { float: right; max-height: 0; width: 100%; /* mc */ transition: all 0.5s ease; }

#nav { display: none; }
#nav:checked ~ nav { max-height: 37em; /* Anything bigger than nav height. The transition duration works with this */ }

#navigation label span { display: none; }
/* */

#navigation a { font-size:1.1em; }

#navigation ul { padding-bottom:1em; padding-top:0.25em; }
#navigation ul li ul { padding-bottom:0.5em; clear:both; }
#navigation ul li { float:left; display: list-item; clear:both; }

#navigation a { font-size:1.125em; }

#content div.subpagesright { float:right; width:100% !important; margin-bottom:1em;}
#content div.left { clear:left; float:left; width:100% !important; margin-bottom:1em; }
#content div.right { float:right; width:100% !important; margin-bottom:1em; }

#content div.split iframe { height:75vmin; max-height:75vmax; }

#footer br { display:none; visibility:hidden; }
 }

 @media(max-width:39em) {

#header a {}
#header #phonenumber { display: none; }
 }

  @media(max-width:36em) {

#header a { height: 3.5em; }
#header #phonenumber {}
 }


@media(max-width:30em) {

body { float:left; width:100%; margin: 0 0%; }
html { font-size:100%; }

#header { padding: 3.75% 5% 3.75% 5%; }

#content ul { margin-left: 0.25em; }
#content ul li {  }

#header a {}
#header #phonenumber {}

#content div.subpagesleft { clear:left; float:left; width:100% !important; margin-bottom:1em; }
 }