/*
Theme Name: Sutro
Author: Landscape
Author URI: http://landscape.com/
Description: A custom theme for Sutro Management Group. Built upon BlankSlate by TidyThemes.
Version: 0.1
License: GNU General Public License
License URI: https://www.gnu.org/licenses/gpl.html
Text Domain: sutro


*/

html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{font-size:100%;font:inherit;padding:0;border:0;margin:0;vertical-align:baseline}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}table{border-collapse:collapse;border-spacing:0}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}.clear{clear:both}
.sticky{}.bypostauthor{}.wp-caption{}.wp-caption-text{}.gallery-caption{}.alignright{}.alignleft{}.aligncenter{}
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{font-size:100%;font:inherit;padding:0;border:0;margin:0;vertical-align:baseline}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}table{border-collapse:collapse;border-spacing:0}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}.clear{clear:both}
.sticky{}.bypostauthor{}.wp-caption{}.wp-caption-text{}.gallery-caption{}.alignright{}.alignleft{}.aligncenter{}


/* fonts */

@font-face {
    font-family: LLCircular;
    src:url("fonts/lineto-circular-pro-book.eot");
    src:url("fonts/lineto-circular-pro-book.eot?#iefix") format("embedded-opentype"),
        url("fonts/lineto-circular-pro-book.woff") format("woff"),
        url("fonts/lineto-circular-pro-book.ttf") format("truetype"),
        url("fonts/lineto-circular-pro-book.svg#lineto-circular-pro-book") format("svg");
    font-style: normal;
    font-weight: 300;
}

@font-face {
    font-family: LLCircular;
    src:url("fonts/lineto-circular-pro-medium.eot");
    src:url("fonts/lineto-circular-pro-medium.eot?#iefix") format("embedded-opentype"),
        url("fonts/lineto-circular-pro-medium.woff") format("woff"),
        url("fonts/lineto-circular-pro-medium.ttf") format("truetype"),
        url("fonts/lineto-circular-pro-medium.svg#lineto-circular-pro-medium") format("svg");
    font-style: normal;
    font-weight: 400;
}

* {
	margin: 0px;
	padding: 0px;  
}

/* general styles */

body { 
	margin: 0; 
	background: #f2efed;  
	font-family: 'LLCircular', Futura, Sans-Serif;
	font-weight: 300;

	font-size: 17px;
	line-height: 24px;
	letter-spacing: .025em;

	color: #923633;

	text-rendering: optimizeLegibility !important;
	-webkit-font-smoothing: antialiased !important;

	font-feature-settings: "kern";
	-webkit-font-feature-settings: "kern";
	-moz-font-feature-settings: "kern";
	-moz-font-feature-settings: "kern=1";  
} 

a, a:visited, a:hover {
	color: #923633;
	text-decoration: none;
}

ul, ol, li {
  list-style-type: none;
}

/* font sizes */

h2, .single h1, .archive h1, .error404 h1, .page h1 {
  font-size: 50px;
  line-height: 50px;
  margin-bottom: 10px;
  font-weight: 400;
  letter-spacing: 0px;
}

h3, p, #navigation, .tagline, .tagline p, .single h2 {
  font-size: 24px;
  line-height: 36px;
  margin-bottom: 5px;
  font-weight: 300;
}

#navigation ul li.sidebar-title, #navigation .tagline, .property-section-text p, .contact-us p, .single p, .error404 p {
  font-size: 17px;
  line-height: 24px;
}

.small, .caption, .caption p {
  font-size: 13px;
  line-height: 20px;
}


/**************

loading screen

***************/

#loading {
  height: 100%;
  width: 100%;

  background: url(img/loading.gif) center center no-repeat #933632;
  background-size: 450px 450px;
  z-index: 1000000;    

  position: fixed;

  transition: all 500ms ease-in-out;
  -ms-transition: all 500ms ease;
  -webkit-transition: all 500ms ease-in-out;
  -moz-transition: all 500ms ease-in-out;
  -o-transition: all 500ms ease-in-out;
}

#loading.hide {
  opacity: 0;
}


/**************

navigation 

***************/

/* hiding zoom toggle which is used on mobile */

#zoom-toggle {
  display: none;
}

/* navigation icon and text */

#nav-button {
  top: 0px;
  right: 0px;
  position: fixed;
  background: white;
  width: 135px;
  height: 105px;
  z-index: 100000;   
  display: none; 
}

#menu-text {
  position: absolute;
  top: 40px;
  right: 60px;
  font-size: 14px;
}

#nav-toggle{
  position: absolute;
  top: 0px;
  right: 0px;
  padding: 50px 25px 50px 85px;
  width: 20px;
  height: 20px;
  display: block;
  cursor: pointer;
}

body.home #nav-button {
  display: block;
}

/* nav icon transitions */

#nav-button, #menu-text, #nav-toggle {
  transition: all 250ms ease-in-out;
  -ms-transition: all 250ms ease;
  -webkit-transition: all 250ms ease-in-out;
  -moz-transition: all 250ms ease-in-out;
  -o-transition: all 250ms ease-in-out;
}

/* hamburger icon */

#nav-toggle span, #nav-toggle span:before, #nav-toggle span:after {
  cursor: pointer;
  border-radius: 1px;
  height: 3px;
  width: 20px;
  background: #923633;
  position: absolute;
  display: block;
  content: '';
}

#nav-toggle span:before {
  top: -7px;
}

#nav-toggle span:after {
  bottom: -7px; 
}

#navigation-link:hover{
  cursor: pointer;
}

/* nav toggle hover state / x button */

#nav-toggle span, #nav-toggle span:before, #nav-toggle span:after {
  transition: all 250ms ease-in-out;
}

#nav-toggle.active span {
  background-color: transparent;
}

#nav-toggle.active span:before, #nav-toggle.active span:after {
  top: 0;
}

#nav-toggle.active span:before {
  transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);  
}

#nav-toggle.active span:after {
  transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);  
}

/* navigation drawer */

#navigation {
  width: 400px;
  position: fixed;
  right: -400px;
  z-index: 100;
  background: #f2efed;
  height: 100%;
  overflow: scroll;

  z-index: 100;  

  transition: all 500ms ease;
}

#navigation .tagline {
  padding: 50px 90px 30px 45px;
}

#navigation ul {
  border-top: 1px dotted #923633;
  padding: 35px 45px 25px;
}

#navigation ul li ul{
  border-top: none;
  padding: 0px;
}

#navigation ul li{
  padding-bottom: 10px;
}

#navigation ul li.sidebar-title {
  padding-bottom: 30px;
}

#navigation ul li a{
  color: #923633;
  font-weight: 400;
  text-decoration: none;
}

#navigation ul#about-sutro {
  border-top: none;
  padding-top: 0px;
}

/**************

open navigation drawer

***************/

/* anchor nav elements to the bottom of the drawer */

.bottom-nav {
	position: absolute;
	bottom: 0px;
	width: 100%;
}

/* minimize navigation toggle on scroll, and when nav drawer is expanded */

.nav #nav-button, .scroll #nav-button {
  background: transparent;
}

.nav #menu-text, .scroll #menu-text {
  opacity: 0;
}

.nav #nav-toggle, .scroll #nav-toggle {
  padding: 30px 25px;
  width: 20px;
  height: 20px;
}

.nav #navigation {
  transform: translate3d(-400px, 0, 0);
  -ms-transform: translate3d(-400px, 0, 0);
  -webkit-transform: translate3d(-400px, 0, 0);
  
  -webkit-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.25);
  -moz-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.25);
  box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.25);  
}

.nav #site-content{
  opacity: .3;
}

/* make site-content 100% tall so it's visible/clickable when nav is open */

.nav #site-content{
  height: 100%;
  pointer-events: all;
  cursor: pointer;
}

/* make sure visible scroll section is clickable -- set visible section to pointer events all */

.nav.minimize #minimized .scroll-section, .nav.expand #expanded .scroll-section {
  pointer-events: all;
  height: 100%;
}

/* make sure visible scroll section is clickable -- set invisible section to pointer events none */

.nav.minimize #expanded .scroll-section, .nav.expand #minimized .scroll-section {
  pointer-events: none;
}

/* prevent items in site from being clickable and triggering interactions when nav is open */

.nav.minimize #expanded .scroll-section .picture-item, .nav.expand #minimized .scroll-section .picture-item, .nav.minimize #minimized .scroll-section .picture-item, .nav.expand #expanded .scroll-section .picture-item{
  pointer-events: none;
}


/**************

header

**************/

.logo {
  background: url(img/logo.svg) no-repeat top left;
  width: 300px;
  height: 120px;
  position: absolute;
  top: 35px;
  left: 60px;
  z-index: 1;
  text-indent: -10000000px;
}


/**************

site containers

**************/

/* wrapper around minimized and expanded pages */

#site-content {
  width: 100%;
  -ms-transition: all 500ms ease;
  -webkit-transition: all 500ms ease;
  transition: all 500ms ease;
}

/* set containing elements for minimized (zoomed out) and expanded (zoomed in) pages */

#minimized, #expanded {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100vh;
  overflow: scroll;
}

/* adding relative container element to get proper top value from relatively positioned element */

#minimized-scroll, #expanded-scroll {
	position: relative;
}

/* setting pointer events so interacting with the proper layer when expanded or minimized */

.expand #minimized, .minimize #expanded {
  pointer-events: none;
}

.minimize #minimized, .expand #expanded {
  pointer-events: all;
}

/**************

site containers minimized page

**************/

#container {
	position: relative;
}

/* solves scrolling issue in ie, but breaks chrome */

body.minimize #minimized {
	z-index: 100;
}

body.minimize #expanded {
  	opacity: 0;
	z-index: 1;
}

/********* 

site containers expanded page

*********/

/* solves scrolling issue in ie, but breaks chrome */

body.expand #expanded {
  opacity: 1;
  z-index: 100;
}

body.expand #minimized {
  opacity: 0;
  z-index: 1;
}

.back-link {
	background: url(img/backarrow.svg) no-repeat left center;
	background-size: 20px 20px;
	padding-left: 25px;
}

.mobile.back-link {
	display: none;
}

/**************

content sections

**************/

/* set content-sections, .about, .contact-us, to a minimum height of viewport */

.content-section {
  min-height: 100vh;
  background-size: cover;
  overflow: visible;
}


/* positioning content and section headers */

.content, .section-header {
  margin: 0px 70px;
}

.section-header {
  padding-top: 200px;
  padding-bottom: 50px;      
}

.content h2 {
  margin-bottom: 10px;
}

.content p {
  margin: 0px 0px 20px;
}

.content a.more-link {
  margin-top: 60px;
  cursor: pointer;
  font-weight: 400;
}

.more-link, .more-link img {
  vertical-align: bottom;
}

/* 2 columm layout */

.col {
  width: 550px;
  margin: 0px 0px 0px 0px;
  float: left;
}

.two-col {
  width: 1100px;
  margin: 0px 0px 0px 0px;
  
  -webkit-column-count: 2; /* Chrome, Safari, Opera */
  -moz-column-count: 2; /* Firefox */
  column-count: 2;

  -webkit-column-gap: 60px; /* Chrome, Safari, Opera */
  -moz-column-gap: 60px; /* Firefox */
  column-gap: 60px;

  widows: 2; 
  orphans: 2: 
}

.two-col p{
  page-break-inside: avoid; /* For Firefox. */
  -webkit-column-break-inside: avoid; /* For Chrome & friends. */
  break-inside: avoid; /* For standard browsers like IE. :-) */  
}


/* adding right-margin to first column */

.col:first-of-type {
  margin: 0px 60px 0px 0px;
}


/**************

grid sections

**************/

.grid {
  width: 100%;
  position: relative;
}

.load {
	background: url(img/imgloader.gif) center center/16px 16px no-repeat #fff;
	display: block;
	margin-left: auto;
	margin-right: auto;
	height: 100%;
	width: 100%;
}

.picture-item {
	position: relative;
}


/* setting image widths */

.big.vertical {
  width: 50%;
}

.big.horizontal {
  width: 50%;
}

.small.vertical {
  width: 25%;
}

.small.horizontal {
  width: 25%;
}

.square {
  width: 16.66666666666667%;
}

.property-section {
	clear: both;
}

/**************

grid sections minimized page

**************/

#minimized .picture-item {
  display: block;
  pointer-events: all;
  cursor: url(img/info.png), auto;  
}

.picture-item-background {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0px;
  left: 0px;
  background-size: cover;  
  background-position: center center;
  background-repeat: no-repeat;
}

/**************

grid sections expanded page

**************/

.picture-item h3, .picture-item .caption {
  display: block;
  margin: 0px;  
}

.picture-item h3 {
	margin: 10px 0px 5px;
}

.picture-item .caption {
  margin-bottom: 60px;  
}

.picture-item .caption p{
  margin-bottom: 10px;  
}

/* zooming out icons for mobile view */

.zoom-icon {
	position: relative;
	margin: -40px 15px 20px 0px;
	float: right;
	width: 20px;
	height: 20px;
	pointer-events: none;
	background: url(img/zoom-out-simple.png) no-repeat center center transparent;
	background-size: 20px 20px;
	display: none;
}

.light .zoom-icon {
	background: url(img/zoom-out-simple-light.png) no-repeat center center transparent;
}


/**************

about

**************/

.about .content h2 {
  margin-bottom: 60px;
}

.about .section-header {
  padding-top: 35vh;
}

/**************

about minimized page

**************/

#about-min {
  background-image: url(img/header.jpg);  
  background-size: cover;    
}

/* hide title in minimized view */

#about-min h2 {
  opacity: 0;
}


/**************

team

**************/

/* set overflow to auto to get proper height for floated portraits */
/*
.team.content-section {
	overflow: auto;
}
*/

/* hiding team memeber slideshow which appears on mobile */

#team-members-slides {
  display: none;
}

/* float the tagline to the right for the team section so it lines up with the toggle */

.leadership-toggle {
  padding-top: 10px;  
  float: right;
  color: #913634;
}

.leadership-toggle span{
  cursor: pointer;
  color: #867061;
}

.leadership-toggle span.active{
  color: #913634;
}

.leadership-toggle span:hover{
  color: #913634;
}

.showleadership .team .picture-item {
  opacity: .2;
}

.showleadership .team .picture-item.leadership {
  opacity: 1;
}


/* floating team members to create grid */

#minimized #team-min .picture-item, #expanded #team-exp .picture-item {
  float: left;
  position: relative;
}


/**************

minimized team section

**************/


/* set overflow to visible for transitions */

#team-min {
	overflow: visible;
}


/* team member hover – positioning name */

h3.team-member {
	position: absolute;
	bottom: 10px;
	left: 10px;
	color: white;
	opacity: 0;
  transition: opacity 600ms ease;
  -ms-transition: opacity 600ms ease;
  -webkit-transition: opacity 600ms ease;
  -moz-transition: opacity 600ms ease;
  -o-transition: opacity 600ms ease;      
}

/* team member hover – color overlay */

#team-min .picture-item .picture-item-background .background-color{
	background-color: #933632;
	height: 100%;
	width: 100%;
	position: relative;
	opacity: 0;

  transition: opacity 600ms ease;
  -ms-transition: opacity 600ms ease;
  -webkit-transition: opacity 600ms ease;
  -moz-transition: opacity 600ms ease;
  -o-transition: opacity 600ms ease;      
}

/* show elements on hover */

#team-min .picture-item:hover h3.team-member, #team-min .picture-item:hover {
	opacity: 1;
 
}

#team-min .picture-item .picture-item-background:hover .background-color{
	opacity: .7;
	cursor: url(img/info-invert.png), auto;  
}

/* make sure elements clear properly */

#team-min .picture-item:nth-child(6n+1){
	clear: left;
}



/**************

expanded team section

**************/

/* add space to the left and right of the grid */

#expanded #team-exp .grid{
	width: -moz-calc(100% - 120px);
	width: -webkit-calc(100% - 120px);
	width: -o-calc(100% - 120px);
	width: calc(100% - 120px);
	margin-left: 60px;
}

/* add margins around team member pictures */

#team-members .picture-item{
	width: -moz-calc(16.666667% - 40px);
	width: -webkit-calc(16.666667% - 40px);
	width: -o-calc(16.666667% - 40px);
	width: calc(16.666667% - 40px);
	padding: 0px 48px 60px 0px;
}

/* remove right padding from last item in row */

#team-members .picture-item:nth-child(6n+0){
	padding: 0px 0px 60px 0px;
}

/* make sure elements clear properly */

#team-members .picture-item:nth-child(6n+1){
	clear: left;
}


/**************

properties sections

**************/


/**************

minimized properties sections

**************/

/* hide property images on minimized view */

#minimized .property-section .picture-item{
	display: none;
}

/* show property images which will be transitioned */

#minimized .property-section .picture-item.match{
	display: block;
}


/* property header section */

.property-header {
  width: 100%;
  height: 62.5%;
}

.property-header-text {
  position: absolute;
  left: 0px;
  bottom: 0px;
  padding-left: 45px;
  padding-bottom: 50px;
}

#minimized .property-header.picture-item .property-header-text h2 {
	display: block;
}

/* set park merced, and the pruneyard text to white */

#park-merced-min .property-header-text, #the-parc-at-pruneyard-min .property-header-text, #serenity-at-larkspur-min .property-header-text{
	color: white;
}

/* property header hover */

/*#minimized .property-header.picture-item:hover{
	cursor: default;
}*/

#minimized .property-header.picture-item .property-header-text h2:hover {
	cursor: url(img/info-invert.png), auto;  
}	

/* move title and add arrow property header hover */ 

/*#minimized .property-header.picture-item .property-header-text h2::before{
	content: "\00a0";
	width: 0px;
	background-image: url(img/arrow-invert.svg);
	background-size: 20px 20px;
	display: inline-block;
	background-repeat: no-repeat;
	background-position: left center;
	opacity: 0;

    transition: width 300ms ease, opacity 600ms ease;
    -ms-transition: width 300ms ease, opacity 600ms ease;
    -webkit-transition: width 300ms ease, opacity 600ms ease;
    -moz-transition: width 300ms ease, opacity 600ms ease;
    -o-transition: width 300ms ease, opacity 600ms ease;  	
}

#minimized .property-header.picture-item .property-header-text h2:hover::before{
	content: "\00a0";
	background-image: url(img/arrow-invert.svg);
	background-size: 30px 30px;
	width: 33px;
	display: inline-block;
	background-repeat: no-repeat;
	background-position: left center;
	opacity: 1;	
}*/

/* text for grid images when present */

.picture-item h3.hover-text {
	position: absolute;
	bottom: 0px;
	left: 0px;
	color: white;
	background-color: rgba(147,54,50,.9);
	margin: 0px;
	padding: 30px 20px 35px 45px;	

	opacity: 0;

	transition: opacity 300ms ease;
	-ms-transition: opacity 300ms ease;
	-webkit-transition: opacity 300ms ease-in-out;	
}

/* set margins on text depending on module size */

.picture-item.small h3.hover-text {
	width: -moz-calc(100% - 65px);
	width: -webkit-calc(100% - 65px);
	width: -o-calc(100% - 65px);
	width: calc(100% - 65px);
}

.picture-item.big h3.hover-text {
	width: -moz-calc(50% - 65px);
	width: -webkit-calc(50% - 65px);
	width: -o-calc(50% - 65px);
	width: calc(50% - 65px);
}

/* show text on hover */

.picture-item:hover h3.hover-text {
	opacity: 1;
}

.picture-item:hover h3.hover-text:hover {
	cursor: url(img/info-invert.png), auto;  
}


/**************

expanded properties sections

**************/


#expanded .property-section {
  padding-top: 135px;
  overflow: auto;
  overflow: visible;
}

/* copy and headlines in text column floated to the left */

.property-content {
  display: block;
  width: 35%;
  position: relative;
  float: left;
}

.property-section-text {
  margin-right: 90px;
  position: absolute;
  left: 60px;
}

.property-section-text.intro-text h2 {
  margin-bottom: 35px;
}

.property-section-text h3 {
	font-weight: 400;
}

.property-section-text p{
  margin-bottom: 30px;
}

.property-section-text p:last-of-type{
  margin-bottom: 0px;
}

/* add margin around image grid and float to the right of the text column */

#expanded .property-section .grid{
  width: -moz-calc(65% - 60px);
  width: -webkit-calc(65% - 60px);
  width: -o-calc(65% - 60px);
  width: calc(65% - 60px);
  margin-right: 60px;

  display: block;
  position: relative;
  float: right;
}

/* image sizes for right column */

#expanded .header.picture-item {
	width: -moz-calc(100% - 20px);
	width: -webkit-calc(100% - 20px);
	width: -o-calc(100% - 20px);
	width: calc(100% - 20px);	
}

#expanded .big.vertical, #expanded .small.vertical, #expanded .big.horizontal, #expanded .small.horizontal {
	width: -moz-calc(50% - 10px);
	width: -webkit-calc(50% - 10px);
	width: -o-calc(50% - 10px);
	width: calc(50% - 10px);	
}

#expanded .picture-item img {
  cursor: url(img/zoom-out.png), auto;  
}

#expanded .picture-item.light img {
  cursor: url(img/zoom-out-invert.png), auto;  
}

#expanded .picture-item img {
  width: 100%;
  margin: 0px;	
}

/* hide section descriptions in main column if not on mobile */

.picture-item.mobile-section-description {
  display: none;
}


/**************

jobs 

**************/

.jobs h3 {
	margin-top: 17px;
  	margin-bottom: 10px;
	font-weight: 400;
}

#jobs-postings.col {
	width: 550px;
}


#jobs-list {
	line-height: 37px;
	font-weight: 400;

	-webkit-column-count: 2;
	-moz-column-count: 2;
	column-count: 2;
	-webkit-column-gap: 20px;
	-moz-column-gap: 20px;
	column-gap: 20px;	
}

#jobs-list li a{
	text-decoration: none;

    transition: all 300ms ease;
    -ms-transition: all 300ms ease;
    -webkit-transition: all 300ms ease;
    -moz-transition: all 300ms ease;
    -o-transition: all 300ms ease;  	
}

#jobs-list li a::before{
	content: "\00a0";
	width: 0px;
	background-image: url(img/arrow.svg);
	background-size: 20px 20px;
	display: inline-block;
	background-repeat: no-repeat;
	background-position: left center;
	opacity: 0;

    transition: width 300ms ease, opacity 600ms ease;
    -ms-transition: width 300ms ease, opacity 600ms ease;
    -webkit-transition: width 300ms ease, opacity 600ms ease;
    -moz-transition: width 300ms ease, opacity 600ms ease;
    -o-transition: width 300ms ease, opacity 600ms ease;  	
}


#jobs-list li:hover a::before{
	content: "\00a0";
	background-image: url(img/arrow.svg);
	background-size: 20px 20px;
	width: 23px;
	display: inline-block;
	background-repeat: no-repeat;
	background-position: left center;
	opacity: 1;	
}



/**************

contact-us

**************/

.contact-us.content-section {
  background-image: url(img/contact.jpg);  
  background-size: cover;    
}

.contact-us.content-section .section-header{
	padding-top: 30vh;
}

.contact-us h2{
	margin-left: -5px;
}

.contact-us p{
	margin-bottom: 30px;
}

.contact-us a.more-link {
  display: none;
}

/**************

page footer

**************/

.footer {
	display: block;
	clear: both;
	position: absolute;
	padding: 45px 70px;
	bottom: 0px;

	width: -moz-calc(100% - 140px);
	width: -webkit-calc(100% - 140px);
	width: -o-calc(100% - 140px);
	width: calc(100% - 140px);
}

.copyright {
	float: left;
}

.top-link {
	background: url(img/toparrow.svg) no-repeat left center;
	background-size: 20px 20px;
	padding-left: 25px;	
	float: right;

  transition: all 300ms ease;
  -ms-transition: all 300ms ease;
  -webkit-transition: all 300ms ease;
  -moz-transition: all 300ms ease;
  -o-transition: all 300ms ease;     
}

.top-link:hover {
  background: url(img/toparrow.svg) no-repeat left top;
  background-size: 20px 20px;

}

/**************

site transitions

**************/

/* set transform origins */

#site-content, .logo, #minimized, #expanded, .picture-item, .picture-item-background {
	transform-origin: top left;
	-webkit-transform-origin: top left;
	-ms-transform-origin: top left;	
}

/* expanded and minimized transitions -- don't crossfade containing elements to avoid flashing of images */

#minimized, #expanded {
	-ms-transition: opacity 0ms ease;
	-webkit-transition: opacity 0ms ease;
	transition: opacity 0ms ease;  
}

/* crossfade text and images which don't rearrange */

.content a.more-link, .property-header-text, .property-content, .caption, .section-header, .h3, .picture-item, .content-section.about, .content-section, .col, .expand .picture-item-background, .minimize .picture-item-background {
	-ms-transition: opacity 1000ms ease;
	-webkit-transition: opacity 1000ms ease;
	transition: opacity 1000ms ease;  
}

.minimize .picture-item-background {
  -ms-transition: all 1000ms ease;
  -webkit-transition: all 1000ms ease;
  transition: all 1000ms ease;  
}

/* set transitions on elements which rearrange (and make sure they appear on top) */

.expand .picture-item.expand-match, .minimize .picture-item.expand-match {
	z-index: 100;

	transition: all 0ms ease;
	-ms-transition: all 0ms ease;
	-webkit-transition: all 0ms ease-in-out;	
}


/**************

.transition state for in between expanded and minimized

**************/

/* makking elements invisible during transition */

body.transition .scroll-section div, body.transition .scroll-section.contact-us, body.transition .background-color, body.transition .section-header, body.transition .caption, body.transition h3, body.transition .hover-text, body.transition .content-section, body.transition .content-section.about, body.transition .content-section.jobs, body.transition .col{
	transition: all 1000ms ease;
	-ms-transition: all 1000ms ease;
	-webkit-transition: all 1000ms ease;
	-moz-transition: all 1000ms ease;
	-o-transition: all 1000ms ease; 
	opacity: 0;
	pointer-events: none;
}

/* making sure elements are visible during transition */

body.transition .scroll-section .picture-item.match, body.transition .scroll-section .picture-item.expand-match, body.transition .scroll-section .grid, body.transition .scroll-section .grid .picture-item .picture-item-background, body.transition .scroll-section .picture-item .picture-item-background, body.transition .scroll-section div.mobile-columns, body.transition .team {
	transition: all 1000ms ease;
	-ms-transition: all 1000ms ease;
	-webkit-transition: all 1000ms ease;
	-moz-transition: all 1000ms ease;
	-o-transition: all 1000ms ease; 
	opacity: 1;
}

/********

single pages (jobs)

********/

.single .content-section {
	overflow: auto;
  padding-bottom: 0px;
  max-width: 1200px;
}

.single .section-header {
	margin-top: 0px;
}

.single .back-link {

}

.single .content-section p, .job-section.one {
	max-width: 500px ;
}

.job h2 {	
	margin-top: 40px;
}

.job h3 {
	margin: 100px 0px 10px;
}

.job h3.list {
	margin: 80px 0px 40px;
}

.job-section.two {
	-webkit-column-count: 2;
	-moz-column-count: 2;
	column-count: 2;
	-webkit-column-gap: 60px;
	-moz-column-gap: 60px;
	column-gap: 60px;	

}

.job-section ul li {
	list-style-type: disc;
	list-style-position: outside;
	margin-bottom: 20px;

	-webkit-column-break-inside: avoid;
    page-break-inside: avoid;
    break-inside: avoid-column;
}

.job-section ul ul li {
	list-style-type: circle;
	margin-bottom: 0px;
}

.job-section ul {
	padding-left: 20px;
}

.job-section ul ul{
	margin: 20px 0px;	
}

#footer-link {
	margin: 100px 60px;
}

/********

archive page jobs

********/

body.page .about .section-header, .archive .section-header, .single .section-header {
  padding-top: 255px; 
}

.post-type-archive-jobs .jobs #jobs-postings h3 {
  margin-top: 0px;
}


/********

archive page team

********/

.archive .tagline {
  padding-top: 20px;
}

.archive .leadership-toggle {
  padding-top: 55px;
}

.archive #team-exp .picture-item {
  float: left;
  position: relative;
}

.archive #team-exp .grid{
  width: -moz-calc(100% - 120px);
  width: -webkit-calc(100% - 120px);
  width: -o-calc(100% - 120px);
  width: calc(100% - 120px);
  margin-left: 60px;
}

.archive #team-exp .grid img{
  width: 100%;
}

.archive .content-section {
  padding-bottom: 100px;
}

/********

single property page

********/


body.page .property-section {
  padding-top: 300px;
  /*padding-bottom: 100px;*/
  overflow: auto;
  overflow: visible;
}

body.page .property-section-text.intro-text h2 {
  margin-bottom: 10px;
}

body.page .property-section-text.intro-text .back-link {
  display: block;
  margin-bottom: 25px;
}


/* add margin around image grid and float to the right of the text column */

body.page .property-section .grid{
  width: -moz-calc(65% - 60px);
  width: -webkit-calc(65% - 60px);
  width: -o-calc(65% - 60px);
  width: calc(65% - 60px);
  margin-right: 60px;

  display: block;
  position: relative;
  float: right;
}

/* image sizes for right column */

body.page .header.picture-item {
  width: -moz-calc(100% - 20px);
  width: -webkit-calc(100% - 20px);
  width: -o-calc(100% - 20px);
  width: calc(100% - 20px); 
}

body.page .big.vertical, body.page .small.vertical, body.page .big.horizontal, body.page .small.horizontal {
  width: -moz-calc(50% - 10px);
  width: -webkit-calc(50% - 10px);
  width: -o-calc(50% - 10px);
  width: calc(50% - 10px);  
}

body.page .picture-item img {
  width: 100%;
  margin: 0px;  
}


/********

404 page

********/


.error404 .section-header {
	margin-top: 0px;
	padding-top: 300px;
}

.error404 .back-link {

}

.error404 .content-section {
	max-width: 1200px;
	margin-bottom : 0px;
}


/********

useful classes

********/

.clear {clear: both;}
#heightplaceholder {
	bottom: 0px;
	position: absolute;
	height: 40px;
	background: red;
	width: 20px;
}


/********

media queries 

********/

/* if window is shorter than 800px, force content-section height to be 800px */

@media only screen and (max-height : 800px) and (min-width : 667px) { 

	.content-section {
		min-height: 800px;
	}

	.bottom-nav {
		position: relative;
		bottom: 0px;
		width: 100%;
	}

}

/* iPad to iPhone 6 */

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


	/* fix scroll flickering */
	
	#site-content *, #nav-button * { 
		-webkit-transform: translate3d(0,0,0); 
	}	

	/* disable tap highlighting */

	/** {
		-webkit-tap-highlight-color:rgba(0,0,0,0);	
	}*/

	/* adjusting scroll on mobile to account for inertia (won't work on overflow:scroll elements) and lack of image transitions */

	/* set containing elements for minimized (zoomed out) and expanded (zoomed in) pages */

	#minimized, #expanded {
  		position: relative;
  		top: 0px;
  		left: 0px;
  		width: 100%;
  		height: auto;
  		overflow: auto;
	}

  /* hiding the expanded page */

	.mobile .minimize #expanded .scroll, .mobile .expand #minimized .scroll, .mobile .expand #expanded .scroll, #expanded {
		display: none;
	}

	.mobile .minimize #minimized .scroll {
		display: block;
	}

	#container {
		/*overflow: hidden;*/
		position: relative;
	}


	/* hide all elements on transition */
	body.transition #site-content{
		opacity: 0;
	}


	/* disabling x-scroll and setting max-width to 100% */

	html, body, #minimized, #expanded, .grid {
    	max-width: 100%;
    	overflow-x: hidden;
	}

	/* adjust fade speed */
	#site-content{
		transition: opacity 500ms ease;
		-ms-transition: opacity 500ms ease;
		-webkit-transition: opacity 500ms ease;
		-moz-transition: opacity 500ms ease;
		-o-transition: opacity 500ms ease;  
	}


	body, a {
		font-size: 16px;
		line-height: 24px;
	} 

	h2, .single h1, .page h1, .error404 h1, .archive h1 {
		font-size: 40px;
		line-height: 40px;
    font-weight: 400;
	}

	h3, p, #navigation, .tagline, .tagline p, .single h2, .property-section-text p, a.more-link, #navigation ul li, #navigation ul li a {
		font-size: 22px;
		line-height: 30px;
	}

	.logo {
		left: 40px;
	}	

  .mobile.back-link {
    display: block;
  }

  .desktop.back-link {
    display: none;
  }

	/********

	navigation

	********/
	
  #nav-button {
    display: block; 
  }  

	#zoom-toggle {
		bottom: 0px;
		right: 0px;    
  	z-index: 100000;    
		width: 40px;
		height: 40px;
		padding: 10px;
		display: block;
		cursor: pointer;    
		background: url(img/info.png) no-repeat center center;
		position: fixed;

		display: none;
	}

	.expand #zoom-toggle {
		background: url(img/zoom-out.png) no-repeat center center;    
	}

	.single #zoom-toggle {
		display: none;
	}

	#navigation {
		width: 50%;
		right: 0%;
		height: 100%;
		opacity: 1;
		display: block;

    overflow-y: scroll; /* has to be scroll, not auto */
    -webkit-overflow-scrolling: touch;     

    transform: translate3D(100%, 0, 0);
    -ms-transform: translate3D(100%, 0 , 0);
    -webkit-transform: translate3D(100%, 0 , 0);

    -webkit-box-shadow: 0px 0px 2px 0px rgba(0,0,0,.25);
    -moz-box-shadow: 0px 0px 2px 0px rgba(0,0,0,.25);
    box-shadow: 0px 0px 2px 0px rgba(0,0,0,.25);    
 

		transition: all 300ms ease;
		-ms-transition: all 300ms ease;
		-webkit-transition: all 300ms ease;
		-moz-transition: all 300ms ease;
		-o-transition: all 300ms ease;  

	}	

	#navigation ul {
		padding: 30px 45px;		
	}

	/* navigation toggle */

	#nav-button {
		height: 70px;
		background: transparent;
	}

	#menu-text {
		top: 19px;
		display: none;
	}

	div#nav-toggle, .nav #nav-toggle, .scroll #nav-toggle {
  		padding: 30px 20px 15px 20px
  }

	.nav #navigation {
		opacity: 1;		
		display: block;

		transform: translate3D(0%, 0, 0);
		-ms-transform: translate3D(0%, 0 , 0);
		-webkit-transform: translate3D(0%, 0 , 0);
  
	}	

	.bottom-nav {
		position: relative;
		bottom: 0px;
		width: 100%;
	}

  .nav #site-content {
    opacity: .3;
  }

  #footer-link {
    margin: 0px;
    padding: 100px 50px;
  }


	/**************

	page containers - expanded page

	**************/

	.mobile.back-link, .back-link{
		display: block;
		background: url(img/backarrow.svg) no-repeat left center;
		background-size: 15px 15px;
		padding-left: 20px;
	}

	/**************

	content sections

	**************/


	/* reducing left and right margins */

	.content, .section-header {
		margin: 0px 50px;
	}


	.leadership-toggle {
		display: none;
	}


  .more-link, .more-link img {
    vertical-align: middle;
  }


	/**************

	grid sections

	**************/

	.picture-item {
		float: left;
		position: relative;
		margin: 0px;
		padding: 0px;
	}

	/* setting image widths */

	#expanded .big.vertical, #expanded .big.horizontal, #expanded .small.horizontal {
	  width: 100%;
	}

	.square {
	  width: 16.66666666666667%;
	}


	/* setting all picture items to be invisible except those at the top level (.match and .expand-match) */
	
	.picture-item {
		display: none;
	}

	.picture-item.expand-match, .picture-item.match {
		display: block;
		position: relative;
	}


	/**************

	about section - minimized page

	**************/

	.content a.more-link {
		margin-top: 30px;
	}

	/**************

	team section - minimized page

	**************/


	#minimized #team-min .picture-item{
		width: 33.333333%;
	}

  #team-min .picture-item:nth-child(3n+1){
    clear: left;
  }


	/* removing hovering elements */

	#team-min .picture-item h3.team-member, #team-min .picture-item .picture-item-background .background-color{
		display: none;
	}



  /**************

  about section - expanded page

  **************/

  .two-col {
    width: 550px;
    margin: 0px 0px 0px 0px;
    
    -webkit-column-count: 1; /* Chrome, Safari, Opera */
    -moz-column-count: 1; /* Firefox */
    column-count: 1;

    -webkit-column-gap: 0px; /* Chrome, Safari, Opera */
    -moz-column-gap: 0px; /* Firefox */
    column-gap: 0px;

    widows: 2; 
    orphans: 2: 
  }


	/**************

	team section - expanded page

	**************/

	/* set margins around captions and team member names  */

	.picture-item h3, .picture-item .caption {
		margin: 0px 0px 10px;
	}

	/* adjust grid margins */

	#expanded #team-exp .grid {
		width: -moz-calc(100% - 100px);
		width: -webkit-calc(100% - 100px);
		width: -o-calc(100% - 100px);
		width: calc(100% - 100px);

		margin-left: 50px;
	}  

	#team-members .picture-item{
		width: -moz-calc(33.333333% - 33px);
		width: -webkit-calc(33.333333% - 33px);
		width: -o-calc(33.333333% - 33px);
		width: calc(33.333333% - 33px);
	}

	/* teams back link */

	#team-exp .mobile.back-link {
		margin-bottom: 40px;
	}


	/* make sure elements clear properly for 3 up grid */

	/* remove right padding from last item in row */

	#team-members .picture-item:nth-child(3n+0){
		padding: 0px 0px 60px 0px;
	}

	/* make sure elements clear properly */

	#team-members .picture-item:nth-child(3n+1){
		clear: left;
	}

  .archive .content-section {
    padding-bottom: 0px;
  }


	/**************

	property section - minimized page

	**************/

	#minimized .property-header {
		min-height: 400px;
	}

	.property-header-text {
		left: 0px;
  		bottom: 0px;
  		padding-left: 40px;
  		padding-bottom: 40px;
	}

	#minimized .property-section .picture-item {
		margin: 0px;
		padding: 0px;
	}

	.picture-item h3.hover-text {
		display: none;
	}

	/* removing property hover */ 

	#minimized .property-header.picture-item .property-header-text h2::before{
		content: "0";
		width: 0px;
		display:none ;
	}

	/* removing hover elements */
	
	.picture-item h3.hover-text {
		display: none;
	}


	/* hide all except property header images */

	#minimized .property-section .picture-item.match, #minimized .property-section .picture-item {
		display: none;
	}

	#minimized .property-section .picture-item.match.property-header {
		display: block;
	} 

	/* set park merced, and the pruneyard text to white */

	#park-merced-min .property-header-text, #the-parc-at-pruneyard-min .property-header-text{
		color: white;
	}



	/**************

	property section - expanded page

	**************/

	#expanded .property-section {
		padding-top: 100px;
	}

	/* make expanded sections 100% */

	#expanded .property-section .grid, .property-content {
		float: none;
		margin: 0px 50px;
		width: -moz-calc(100% - 100px);
		width: -webkit-calc(100% - 100px);
		width: -o-calc(100% - 100px);
		width: calc(100% - 100px);
	}

	/* adjust property sections headers bottom spacing for back link */

	.property-section-text.intro-text h2 {
		margin-bottom: 10px;
	}

	/* back link */

	.property-section-text.intro-text .mobile.back-link{ 
		margin-bottom: 35px;
	}

	.property-section .picture-item h3 {
		margin: 0px 0px 10px;
	}
	
	.property-section .picture-item .caption {
		display: block;
		margin: 0px 0px 40px;
	}

	/* copy and headlines in text column */

	.property-section-text {
		margin-right: 0px;
		position: relative;
		left: 0px;
		top: auto !important;    
	}

	/* removing hover elements */

	.desktop-section-description {
		display: none;
	}

	.intro-text.property-section-text{
		margin: 0px;
    padding: 255px 0px 40px;
	}

	.picture-item.mobile-section-description {
		margin: 0px 0px 60px;
		display: block;
	}

	.picture-item.mobile-section-description h3 {
		font-size: 18px;
		line-height: 24px;
		font-weight: 400;
		margin-bottom: 20px;
	}

	.picture-item.mobile-section-description p {
		font-size: 18px;
		line-height: 24px;
	}	

	/* creating columns using css */
	.mobile-columns {
		padding: 50px 0px 0px;

    -webkit-column-count: 2;
    -moz-column-count: 2;
    column-count: 2;
    -webkit-column-gap: 40px;
    -moz-column-gap: 40px;
    column-gap: 40px;	
    -moz-column-width: 50%;
    -webkit-column-width: 50%;
    column-width: 50%;

    overflow: auto;

    -webkit-column-break-inside: avoid;
    page-break-inside: avoid;
    break-inside: avoid-column;		

	}
	
	#expanded .property-section .picture-item {
		float: none;
		display: block;
		position: relative;
		opacity: 1 !important;
		
		border: 1px solid #f2efed;

		-webkit-column-break-inside: avoid;
	    page-break-inside: avoid;
	    break-inside: avoid-column;		
	}

	#expanded .property-section	.mobile-columns .picture-item {
		display: none;
	}

	#expanded .property-section	.mobile-columns .picture-item.expand-match, #expanded .property-section	.mobile-columns .picture-item.mobile-section-description {
		display: block;
	}

	/* switch to padding bottom to avoid space wrapping */

	.picture-item .caption {
		margin-bottom: 0px;
  		padding-bottom: 20px;  
	}


	#expanded .big.vertical, #expanded .small.vertical, #expanded .big.horizontal, #expanded .small.horizontal {
		width: 100%;	
	}

	/* zooming out icons for mobile view */

	.zoom-icon {
		display: block;
	}

	/**************

	jobs section - expanded page

	**************/

	#jobs-exp .section-header {
		padding-bottom: 10px;
	}

	/* adjust property sections headers bottom spacing for back link */

	#jobs-exp h2 {
		margin-bottom: 10px;
	}

  #jobs-min a, #jobs-exp a{
    font-size: 22px;
    line-height: 30px;    
  }

	/* back link */

	#jobs-exp .mobile.back-link{ 
		margin-bottom: 35px;
	}


	#jobs-exp h3 {
		margin-top: 40px;
	}

	#jobs-postings.col {
		margin: 40px 0px;
		width: 100%;
	}

	#jobs-list {
		margin: 20px 0px;
	}

	#jobs-list li {
		margin-left: 0px;
	}

	#jobs-list li a::before{
		content: "\00a0";
		background-image: url(img/arrow.svg);
		background-size: 15px 15px;
		width: 20px;
		display: inline-block;
		background-repeat: no-repeat;
		background-position: left center;
		opacity: 1;	
	}

	.job-section.two, .job-section.two ul ul {
		-webkit-column-count: 1;
		-moz-column-count: 1;
		column-count: 1;
		-webkit-column-gap: 0px;
		-moz-column-gap: 0px;
		column-gap: 0px;	
	}

	.job-section.two ul{

		-webkit-column-count: 2;
		-moz-column-count: 2;
		column-count: 2;
		-webkit-column-gap: 60px;
		-moz-column-gap: 60px;
		column-gap: 60px;	

		list-style-type: disc;
		list-style-position: outside;
		margin-bottom: 20px;

		-webkit-column-break-inside: avoid;
	    page-break-inside: avoid;
	    break-inside: avoid-column;
	}

	.job-section.two ul ul li {
		margin-bottom: 20px;
	}

	/**************

	contact-us

	**************/	

  .page .contact-us.content-section .section-header {
    padding-top: 255px;
  }

	.contact-us.content-section {
 		background-image: url(img/contact-vertical.jpg);  
	}

	/**************

	footer

	**************/	

	.footer {
		padding: 30px 50px;
		width: -moz-calc(100% - 100px);
		width: -webkit-calc(100% - 100px);
		width: -o-calc(100% - 100px);
		width: calc(100% - 100px);
	}

	.top-link {
		background: url(img/toparrow.svg) no-repeat left center;
		background-size: 15px 15px;
		padding-left: 20px;	

    transition: all 0ms ease;
    -ms-transition: all 0ms ease;
    -webkit-transition: all 0ms ease;
    -moz-transition: all 0ms ease;
    -o-transition: all 0ms ease;         
	}

  /**************

  property single page

  **************/

  body.page .property-section {
    padding-top: 0px;
  }

  /* make expanded sections 100% */

  body.page .property-section .grid, .property-content {
    float: none;
    margin: 0px 50px;
    width: -moz-calc(100% - 100px);
    width: -webkit-calc(100% - 100px);
    width: -o-calc(100% - 100px);
    width: calc(100% - 100px);
  }

  body.page .property-section .picture-item {
    float: none;
    display: block;
    position: relative;
    opacity: 1 !important;
    
    border: 1px solid #f2efed;

    -webkit-column-break-inside: avoid;
      page-break-inside: avoid;
      break-inside: avoid-column;   
  }

  body.page .property-section .mobile-columns .picture-item {
    display: block;
  }

  body.page .big.vertical, body.page .small.vertical, body.page .big.horizontal, body.page .small.horizontal {
    width: 100%;  
  }


	/**************

	site transitions

	**************/

	#nav-toggle span, #nav-toggle span:before, #nav-toggle span:after {
  		transition: all 0ms ease-in-out;
	}

	
  /* hide all elements on transition */

	body.transition #minimized, body.transition #expanded{
		opacity: 0;
		/*
		transform: translateY3d(0, 100px, 0);
		-ms-transform: translate3d(0, 100px, 0);
		-webkit-transform: translate3d(0, 100px, 0);	
		*/	
	}

	/* crossfade pages since no reshuffling */

  /*	
  #minimized, #expanded {
	  -ms-transition: all 500ms ease;
	  -webkit-transition: all 500ms ease;
	  transition: all 500ms ease;  
	}
  */

}


/* iPhone 6 and below */

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

	/* fix scroll flickering */
	
	#site-content *, #nav-button * { 
		-webkit-transform: translate3d(0,0,0); 
	}	

	/* disable tap highlighting */

  /*
	* {
		-webkit-tap-highlight-color:rgba(0,0,0,0);	
	}
  */

	/* adjusting scroll on mobile to account for inertia (won't work on overflow:scroll elements) and lack of image transitions */

	/* set containing elements for minimized (zoomed out) and expanded (zoomed in) pages */

	#minimized, #expanded {
    position: relative;
    top: 0px;
    left: 0px;
    width: 100%;
    height: auto;
    overflow: auto;
	}

	#container {
		position: relative;
	}


  /* hiding all expanded pages */
  .mobile .minimize #expanded .scroll, .mobile .expand #minimized .scroll, .mobile .expand #expanded .scroll, #expanded {
    display: none;
  }

  .mobile .minimize #minimized .scroll {
    display: block;
  }

	/* hide all elements on transition */
	body.transition #site-content{
		opacity: 0;
	}

	#loading {
		background-size: 250px 250px;
	}

	/* font sizes */

  h2, .single h1, .archive h1, .error404 h1, h2, h1, .single h1, .single h2, .error404 h1 {
		font-size: 30px;
		line-height: 34px;
		margin-bottom: 5px;
		font-weight: 400;
	}

	#navigation, h3, p, a, .tagline, .property-section-text p, .contact-us p, .single p, #jobs-list li a, ul, li, .mobile.back-link {
		font-size: 16px;
		line-height: 22px;
		font-weight: 300;
		letter-spacing: 0;
	}

	.job h3.list {
		font-weight: 400;
	}

	.contact-us p {
		margin-bottom: 30px;
	}

  .small, .caption {
    font-size: 14px;
    line-height: 20px;
  }

  /* styling navigation */

  #navigation ul li, #navigation ul li a{
    font-size: 24px;
    line-height: 30px;
  }

	#navigation .tagline, #navigation ul li.sidebar-title {
		font-size: 16px;
		line-height: 24px;
	}


	/* logo */

	.logo {
		background: url(img/logo.svg) no-repeat -131px 0px;
		width: 180px;
		height: 120px;
		position: absolute;
		top: 45px;
		left: 25px;
		background-size: cover;
	}


	/********

	navigation

	********/

	#nav-button {
		width: 70px;
		height: 70px;
		background: transparent;
    display: block; 
	}

	#menu-text {
		display: none;
	}

	#nav-toggle, .scroll #nav-toggle, .nav #nav-toggle {
		width: 20px;
		height: 20px;
		padding: 25px 20px;
		top: 0px;
		right: 0px;
	}

	#nav-toggle span, #nav-toggle span:before, #nav-toggle span:after {
		height: 3px;
		width: 20px;
	}

	#nav-toggle span:before {
		top: -7px;
	}

	#nav-toggle span:after {
		bottom: -7px; 
	}

	#navigation-link:hover{
		cursor: pointer;
	}


	#navigation {
		width: 100%;
		right: 0%;
		height: 100%;
		display: block;

		overflow: scroll;

		-webkit-box-shadow: 0px 0px 0px 0px rgba(0,0,0,0);
		-moz-box-shadow: 0px 0px 0px 0px rgba(0,0,0,0);
		box-shadow: 0px 0px 0px 0px rgba(0,0,0,0);

    transform: translate3D(100%, 0, 0);
    -ms-transform: translate3D(100%, 0, 0);
    -webkit-transform: translate3D(100%, 0, 0);    

		transition: all 350ms ease;
		-ms-transition: all 350ms ease;
		-webkit-transition: all 350ms ease;
		-moz-transition: all 350ms ease;
		-o-transition: all 350ms ease;  
	}

	/* navigation toggle */

	.nav #navigation {
		transform: translate3D(0%, 0, 0);
		-ms-transform: translate3D(0%, 0, 0);
		-webkit-transform: translate3D(0%, 0, 0);

    overflow-y: scroll; /* has to be scroll, not auto */
    -webkit-overflow-scrolling: touch;    
	}

	body.nav{
		overflow: hidden;
	}

  /* sliding content when nav opens */

  #site-content {
    transition: all 350ms ease;
    -ms-transition: all 350ms ease;
    -webkit-transition: all 350ms ease;
    -moz-transition: all 350ms ease;
    -o-transition: all 350ms ease;   
  }

  body.nav #site-content {
    transform: translate3D(-100%, 0, 0);
    -ms-transform: translate3D(-100%, 0, 0);
    -webkit-transform: translate3D(-100%, 0, 0);    
  }


	#navigation .tagline {
    padding: 70px 25px 0px;
    margin: 0px;
	}


	#navigation ul, #navigation ul#about-sutro {
      margin: 0px;
      padding: 40px 25px;
	}

  #navigation ul#about-sutro {
    padding-top: 10px;
  }

	#navigation ul li {
      padding: 8px 0px;
	}

	#navigation ul li.sidebar-title {
      margin: 0px;
      padding: 10px 0px;
	}

	.bottom-nav {
      position: relative;
      bottom: 0px;
      width: 100%;
	}	

  .mobile.back-link {
    display: block;
  }

  .desktop.back-link {
    display: none;
  }  


	/**************

	page containers - expanded page

	**************/

	.back-link {
		display: block;
		background: url(img/backarrow.svg) no-repeat left center;
		background-size: 15px 15px;
		padding-left: 20px;
	}


	/**************

	content sections

	**************/

	/* setting page widths */  

	#container, #expanded, #minimized, .content-section, body.page {
		width: 100%;
		max-width: 667px;
	}

	.content-section {
		min-height: 100vh;
		padding-bottom: 50px;
	}

	/* reducing left and right margins */

	.content, .section-header {
		margin: 0px 25px;
		padding-bottom: 25px;
	}


	/* two column layouts in about and contact-us */

	.col, .col:first-of-type {
		width: 100%;
		float: none;
	}

  .two-col {
    width: 100%;
    float: none;
    margin: 0px 0px 0px 0px;
    
    -webkit-column-count: 1; /* Chrome, Safari, Opera */
    -moz-column-count: 1; /* Firefox */
    column-count: 1;

    -webkit-column-gap: 0px; /* Chrome, Safari, Opera */
    -moz-column-gap: 0px; /* Firefox */
    column-gap: 0px;

    widows: 2; 
    orphans: 2: 
  }


	.col {
		margin: 0px;
	}

	.col:first-of-type {
		margin: 0px 0px 0px;
	}


	/**************

	grid sections

	**************/

	/* setting all picture items to be invisible except those at the top level (.match and .expand-match) */
	
	.picture-item {
		display: none;
	}

	.picture-item.expand-match, .picture-item.match {
		display: block;
		position: relative;
	}

	/* making images full bleed */

	.big.vertical, .small.vertical, #expanded .big.vertical, #expanded .small.vertical {
		width: 100%;
		height: 125%;
	}

	.big.horizontal, .small.horizontal, #expanded .big.horizontal, #expanded .small.horizontal  {
		width: 100%;
		height: 62.5%;
	}

	.square {
		width: 100%;
		height: 100%;
	}


	/**************

	grid sections - expanded page

	**************/	

	/* make expanded section full-width too */

	#expanded .picture-item img, #expanded .property-section .grid{
		width: 100%;
		margin: 0px;
		display: block;
		float: none;
	}


	.picture-item h3{
		margin: 15px 0px 0px;
		font-weight: 400;
	} 

	.picture-item .caption {
		margin: 0px 0px 45px;
	}

	
	/**************

	about section

	**************/

	.about .section-header {
		padding-top: 40vh;
	}


	/**************

	about section - minimized page

	**************/

	.content a.more-link {
		margin-top: 30px;
	}

	.arrow img {
		width: 20px !important;
		height: 20px !important;
	}


	/**************

	team section - minimized page

	**************/

	#minimized #team-min .picture-item{
		width: 33.333333%;
	}


	/**************

	team section - expanded

	**************/

	#expanded #team-exp .grid {
		width: -moz-calc(100% - 50px);
		width: -webkit-calc(100% - 50px);
		width: -o-calc(100% - 50px);
		width: calc(100% - 50px);

		margin-left: 25px;
	}  


	/* teams back link */

	#team-exp .mobile.back-link {
		margin-bottom: 25px;
	}


	/* hiding leadership toggle */

	.leadership-toggle { display: none; }

	/* hide team members content on tablet and desktop */

	#team-members{
		position: absolute;
		display: none;
	}

	#team-members .picture-item{
		width: 33.333333%;
	}

	#team-members h3, #team-members .caption {
		display: none;
	}

	/* mobile slideshow */

	#team-members-slides {
		display: block;
	}

	.slick-next, .slick-prev {
		font-size: 0;
		line-height: 0;
		display: block;
		width: 30px;
		height: 30px;
		margin-top: -15px;
		padding: 0;
		cursor: pointer;
		color: transparent;
		border: none;
		outline: none;
		background: red;
		position: absolute;
		top: 36%;
	}

	.slick-next {
		background: url(img/rightarrow.svg) no-repeat center center;
		right: 35px;
	}

	.slick-prev {
		background: url(img/leftarrow.svg) no-repeat center center;
		left: 35px;
	}  

	#nav-toggle span:after {
		bottom: -7px; 
	}

	#team-members-slides img, #team-members-slides h3, #team-members-slides .caption{
		width: -moz-calc(100% - 50px);
		width: -webkit-calc(100% - 50px);
		width: -o-calc(100% - 50px);
		width: calc(100% - 50px);    
		margin: 0px 25px;

		display: block;
	}

	#team-members-slides h3 {
		margin: 10px 25px 0px;
	}

	/* removing hovering elements */

	#team-min .picture-item h3.team-member, #team-min .picture-item .picture-item-background .background-color{
		display: none;
	}


	/**************

	property section - minimized page

	**************/

	/* hide all images except property header images */

	#minimized .property-section .picture-item.match, #minimized .property-section .picture-item {
		display: none;
	}

	#minimized .property-section .picture-item.match.property-header {
		display: block;
	} 

	/* set park merced, and the pruneyard text to white */

	#park-merced-min .property-header-text, #the-parc-at-pruneyard-min .property-header-text{
		color: white;
	}
	
	#minimized .property-header {
		min-height: 400px;
	}

	.property-header-text {
		left: 0px;
  		bottom: 0px;
  		padding: 25px;
	}

	/* removing hover elements */

	#minimized .property-header.picture-item .property-header-text h2::before, #minimized .property-header.picture-item .property-header-text h2:hover::before{
		width: 0px;
		display: none;
	}
	
	.picture-item h3.hover-text {
		display: none;
	}

	/**************

	property section - expanded page

	**************/
	
	#expanded .property-section {
		padding-top: 100px;
	}

	.property-content {
		float: none;
		margin: 0px 25px;
		width: -moz-calc(100% - 50px);
		width: -webkit-calc(100% - 50px);
		width: -o-calc(100% - 50px);
		width: calc(100% - 50px);
	}

	.property-section-text.intro-text h2 {
		margin-bottom: 5px;
	}

	.property-section-text.intro-text .mobile.back-link{ 
		margin-bottom: 25px;
	}

	.property-header-text h3 {
		margin-bottom: 0px;
	}

	.property-section .picture-item .caption {
		display: block;
		margin: 15px 25px 60px;
	}

	.property-section-text {
		margin-right: 0px;
		position: relative;
		left: 0px;
		top: auto !important;    
	}

	/* hiding desktop text column */

	.desktop-section-description {
		display: none;
	}

	/* formatting for mobile property text */

	.intro-text.property-section-text{
		margin: 200px 0px 40px;
	}

	.picture-item.mobile-section-description {
		margin: 125px 25px 40px;
		display: block;
	}

	.picture-item.mobile-section-description h3 {
		margin-bottom: 0px;
	}

	/**************

	jobs section - expanded page

	**************/

	#jobs-exp .section-header {
		padding-bottom: 10px;
	}

	#jobs-exp h2 {
		margin-bottom: 5px;
	}

	#jobs-exp .mobile.back-link{ 
		margin-bottom: 25px;
	}

	#jobs-exp h3 {
		margin-top: 30px;
	}

	#jobs-postings.col {
		width: 100%;
		margin-top: 60px;
	}  

	#jobs-list {
		margin-top: 20px;
		margin-bottom: 140px;

		-webkit-column-count: 1;
		-moz-column-count: 1;
		column-count: 1;
		-webkit-column-gap: 0px;
		-moz-column-gap: 0px;
		column-gap: 0px;	
	}

	#jobs-list li {
		margin-left: 0px;
		margin-bottom: 10px;
	}

	#jobs-list li a::before{
		content: "\00a0";
		background-image: url(img/arrow.svg);
		background-size: 15px 15px;
		width: 20px;
		display: inline-block;
		background-repeat: no-repeat;
		background-position: left center;
		opacity: 1;	
	}

  #jobs-list li:hover a::before {
    background-size: 15px 15px;
    width: 20px;
  }  

  .archive .content-section {
    padding-bottom: 50px;
  }

	/**************

	contact-us

	**************/	


  .page .contact-us.content-section .section-header {
    padding-top: 40vh;
  }

	.contact-us.content-section {
 		background-image: url(img/contact-vertical.jpg); 
    background-position: center center; 
	}

  .contact-us h2 {
    margin-left: 0px;
  }

  .home .contact-us.content-section .content {
    padding-bottom: 200px;
  }


	/**************

	footer

	**************/	


	.footer {
		padding: 20px;

		width: -moz-calc(100% - 80px);
		width: -webkit-calc(100% - 80px);
		width: -o-calc(100% - 80px);
		width: calc(100% - 80px);
	}

	.copyright {
		float: none;
	}

	.top-link {
		float: none;
		display: block;
		margin: 50px 0px 50px;
		background: url(img/toparrow.svg) no-repeat left center;
		background-size: 15px 15px;
		padding-left: 18px;	

    transition: all 0ms ease;
    -ms-transition: all 0ms ease;
    -webkit-transition: all 0ms ease;
    -moz-transition: all 0ms ease;
    -o-transition: all 0ms ease;     
	}
			
  .top-link:hover {
    background: url(img/toparrow.svg) no-repeat left top;
    background-size: 15px 15px;
  }      

	/********

	single pages (jobs)

	********/

	.single h2 {
		margin-bottom: 25px;
	}

	.job-section.two {
		-webkit-column-count: 1;
		-moz-column-count: 1;
		column-count: 1;
		-webkit-column-gap: 0px;
		-moz-column-gap: 0px;
		column-gap: 0px;	

	}

	.single .content-section {
		max-width: 100%;
		margin-bottom : 0px;
		padding-bottom: 50px;
	}

	#footer-link {
		margin: 100px 20px 50px;
	}


  /********

  single pages (property)

  ********/

  /* making images full bleed */

  body.page .big.vertical, body.page .small.vertical {
    width: 100%;
    height: 125%;
  }

  body.page .big.horizontal, body.page .small.horizontal  {
    width: 100%;
    height: 62.5%;
  }

  /* make expanded section full-width too */

  body.page .picture-item img, body.page .property-section .grid{
    width: 100%;
    margin: 0px;
    display: block;
    float: none;
  }

  body.page .property-section {
    padding-top: 100px;
    padding-bottom: 50px;
  }

	/**************

	site transitions

	**************/

	#nav-toggle span, #nav-toggle span:before, #nav-toggle span:after {
  		transition: all 0ms ease-in-out;
	}

	/* hide all elements on transition */

/*	body.transition #minimized, body.transition #expanded{
		opacity: 0;

		transform: translateY3d(0, 100px, 0);
		-ms-transform: translate3d(0, 100px, 0);
		-webkit-transform: translate3d(0, 100px, 0);		
	}
*/
	/* crossfade pages since no reshuffling */

/*	#minimized, #expanded {
	  -ms-transition: all 800ms ease, opacity 125ms ease;
	  -webkit-transition: all 800ms ease, opacity 125ms ease;
	  transition: all 800ms ease, opacity 125ms ease;  
	}*/

}

/* getting phones shorter than a portrait iphone 5 */  

@media only screen and (max-height : 568px) { 
  
  .content-section {
    min-height: 568px;
  }  

}