#content {
  padding-top: 60px;
  padding-bottom: 60px;
  z-index: 1;
}

.home.page #content,
.post-type-archive-portfolio #content,
.single-portfolio #content {
  padding-top: 0;
  padding-bottom: 0;
}

.post-type-archive-portfolio #content,
#content.displayposts {
  overflow: hidden;
}

#content.displayposts {
  padding-bottom: 15px;
}

.white_brand #content.displayposts{
  overflow: visible;
}

/* for new bg img & video for media page */

.white_brand.post-type-archive-media #content.displayposts,
.white_brand #content.displayposts.blogposts {
  padding-bottom: 0;
}

#content #inner_lightbox {
  background-color: rgba(0, 0, 0, .6);
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  content: "";
  z-index: -1; /* by default, do not show! */
  opacity: 0;
}

@media only screen and (min-width: 1000px) {
  /* apply this to desktop devices only */
  #content.mainthumb-in-focus #inner_lightbox,
  #content.gallery-in-focus #inner_lightbox {
    opacity: 1; /* this will animate */
    z-index: 5; /* show over everything generally except focused gallery image */
  }

}

/* most general content declarations can be found in ../editor-style-shared.css */

.content_background_wrapper,
.content_background,
.content_background_overlay {
  height: 100%;
  width: 100%;
  position: absolute !important;
  z-index: -1;
  top: 0;
  left: 0;
  background-color: #fff;
}

.content_background_overlay {
  z-index: 1;
}

.darkbg.content_background_wrapper, /* 'no space' intentional - darkbg and content_background_wrapper are on the same element */
.darkbg .content_background,
.darkbg .content_background_overlay {
  background-color: #111;
}

.white_brand .darkbg.content_background_wrapper,
.white_brand .darkbg .content_background,
.white_brand .darkbg .content_background_overlay {
  background-color: #fff;
}

.content_background_wrapper .content_background {
  background-color: transparent;
  opacity: 0;
  -webkit-transition: opacity 1.5s;
  -moz-transition: opacity 1.5s;
  transition: opacity 1.5s;
}

.content_background_wrapper .content_background.active {
  opacity: 1;
}

.displayposts.content_background_wrapper,
.displayposts.content_background_wrapper .content_background_overlay {
  background-color: rgba(255, 255, 255, .95);
}

.displayposts.darkbg.content_background_wrapper,
.displayposts.darkbg.content_background_wrapper .content_background_overlay {
  background-color: rgba(17, 17, 17, .95);
}

.page_background_container,
.white_brand .content_container .feature {
  position: absolute;
  bottom: 0;
  left: -500px;
  width: 1000px;
  height: 100%;
  z-index: -1;
}

.page_background_image,
.chr_content .page_background_image {
  /* .chr_content included to override specifity in other classes/selectors */
  position: absolute;
  width: 100%;
  height: 100%;
  background-size: contain;
  background-position: top right;
}

.white_brand .content_container .page_background_container,
.white_brand .content_container .feature {
  width: 2000px;
  left: -375px;
  margin: 0;
}

.white_brand .page_background_image,
.white_brand .chr_content .page_background_image {
  background-size: cover;
  background-position: top center;
}

/* overlay for background image or video on media page */
.white_brand.post-type-archive-media .page_background_container:after,
.white_brand.post-type-archive-media .feature:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(44, 44, 44, .8);
}

/* since we're operating as an overlay, completely hide the interaction */
.white_brand.post-type-archive-media .feature .loading,
.white_brand.post-type-archive-media .feature .play {
  display: none !important;
}

/* **************************** JSCROLLPANE HELPERS **************************** */

.item.page {
  height: 100%;
}

/* add space on the bottom so scroll doesn't seem to stop abruptly */

.item.page .scrollable .jspContainer .jspPane {
  padding-bottom: 10px !important;
}

/* reduce available content width when there's a large background image */

/* these are now the defaults, and can be changed on a per page basis for .white_brand */

.page_background_container + .item.page > .unscrollable,
.page_background_container + .item.page > .scrollable {
  margin-left: 520px;
  margin-right: 0;
}

/* further reduce available content width on about page, because we want to keep this condensed */

.default_brand .item.page.post-about > .unscrollable {
  margin-right: 120px;
}

/* ***************************** SHARE BUTTONS ***************************** */

.share {
  position: absolute;
  left: 0;
  top: 200px;
}

/* this may be superceded? */

/* hide addthis on all but a few types of pages */

.addthis-smartlayers {
  display: none !important;
}

.single-portfolio .addthis-smartlayers,
.blog .addthis-smartlayers,
.search-results .addthis-smartlayers {
  display: block !important;
}

/* ***************************** SECTION ICONS ***************************** */

.section_icons {
  margin: 0 0 0 -7.5%;
  padding: 0 0 30px 0;
  width: calc(100% + 45px);
}

.section_icons ul {
  display: table;
  table-layout: auto;
  width: 100%;
}

.section_icons ul li {
  display: table-cell;
  vertical-align: middle;
}

.section_icons ul li a {
  display: block;
  height: 100%;
  overflow: hidden;
}

.section_icons ul li a img {
  background-size: contain;
}

.section_icons ul li a .title {
  display: none;
}

.white_brand .section_icons {
  margin-left: 0;
  padding-bottom: 0; /* padding moved to a to avoid overflow hidden on hover feature */
}

.white_brand .section_icons ul {
  width: 90%;
}

.white_brand .section_icons ul li {
  padding-left: 10px;
  padding-right: 10px;
  line-height: 1.1em;
  letter-spacing: .05em;
  width: 1%;
}

.white_brand .section_icons ul li:first-child {
  padding-left: 0;
}

.white_brand .section_icons ul li:last-child {
  padding-right: 0;
}

.white_brand .section_icons a,
.white_brand .section_icons ul li a {
  opacity: .3;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
  text-decoration: none;
  padding-bottom: 30px;
}

.page-template-about .section_icons table {
  table-layout: auto;
  font-size: 10px;
  width: auto;
  margin-bottom: 30px;
}

.page-template-about .section_icons td {
  float: none;
}

.white_brand .section_icons td {
  width: 1%;
}

.white_brand .section_icons td a:hover,
.white_brand .section_icons td.active a,
.white_brand .section_icons ul li a:hover,
.white_brand .section_icons ul li.active a {
  opacity: 1;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  text-decoration: none;
}

.white_brand .section_icons td a img,
.white_brand .section_icons ul li a img {
  display: none;
}

.white_brand .section_icons a .title,
.white_brand .section_icons ul li a .title {
  display: inline;
  font-family: "Montserrat Bold";
  text-transform: uppercase;
  font-size: 12px;
  position: relative;
  padding-bottom: 3px;
}

/* fix for https://bugzilla.mozilla.org/show_bug.cgi?id=489100 */
.Firefox .white_brand .section_icons ul li a .title {
  display: inline-block;
}

.white_brand .section_icons td a .title:after,
.white_brand .section_icons ul li a .title:after {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 0;
  background: #fff;
  content: "";
  opacity: 0;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  -webkit-transition: height 0.3s, opacity 0.3s, -webkit-transform 0.3s;
  -moz-transition: height 0.3s, opacity 0.3s, -moz-transform 0.3s;
  transition: height 0.3s, opacity 0.3s, transform 0.3s;
  -webkit-transform: translateY(-10px);
  -moz-transform: translateY(-10px);
  transform: translateY(-10px);
}

.white_brand .section_icons td.active a .title:after,
.white_brand .section_icons ul li.active a .title:after,
.white_brand .section_icons ul li:not(.active) a:hover .title:after {
  height: 1px;
  opacity: 1;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  -webkit-transform: translateY(6px);
  -moz-transform: translateY(6px);
  transform: translateY(6px);
}

.sections {
  height: 100%;
}

.sections .section {
  display: none;
  height: 100%;
}

.sections .title {
  margin-bottom: 1.7em;
}

.white_brand .sections .title {
  display: none;
}

.sections ul.logos {
  margin: -2% 0 -2% -4%;
}

.sections ul.logos li {
  width: 17%;
  height: 100px;
  float: left;
  margin: 2% 4%;
}

.sections ul.logos li a {
  display: block;
  height: 100%;
  overflow: hidden;
}

.sections ul.logos li a img {
  background-size: contain;
}

.sections ul.logos li a:hover img {
}

/* ****************************** LOGO HOVER GREYSCALING EFFECT ****************************** */

/* we have one method to support Firefox, Chrome, Safari, and IE6-9, and SVG's for IE10+ */

/* FIREFOX, CHROME, SAFARI, IE8-9 */

.greyscale-image-img {
  display: block;
  margin: 0 auto;

  /* greyscale */
  filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 10+, Firefox on Android */
  -webkit-filter: saturate(0) contrast(0) brightness(10); /* Chrome, Safari */
  filter: saturate(0) contrast(0) brightness(10); /* future-compatibility */

  /* opacity & transition */
  opacity: .7;

}

/* opacity change on hover */
.greyscale-image-link:hover .greyscale-image-img {
  opacity: 1;
}

/* IE10+ */

.greyscale-image-svg {
  display: none;
  text-align: center;
  width: 100%;
  height: 100%;
}

/* wrapper required for IE8 to listen to display none */
.greyscale-image-svg svg {
  opacity: .7;
  margin: 0 auto;
  width: 100%;
  height: 100%;
}

.greyscale-image-link:hover .greyscale-image-svg svg {
  opacity: 1;
}

/* on hover, remove the opacity on the SVG  */

/* FINALLY... show the correct item for the correct browser, by switching it around to the SVG if we're in IE & have support for both opacity & SVG filters */

.Explorer .greyscale-image-img {
  display: none;
}

.Explorer .greyscale-image-svg {
  display: block;
}

.expandable {
  max-height: 0;
  transition-duration: 0.5s;
}

.expanded .expandable {
  max-height: 1000px;
}

.toggle-arrow {
  -ms-transform: scale(-1); /* IE 9 */
  -webkit-transform: scale(-1); /* Safari */
  transform: scale(-1);
  transition-duration: 0.5s;
}

.expanded .toggle-arrow {
  -ms-transform: scale(1); /* IE 9 */
  -webkit-transform: scale(1); /* Safari */
  transform: scale(1); /* Standard syntax */
}

.landscape-coverer {

  display: none;
  opacity: 0;
  font-size: 1.2em;
  color: white;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100vh;
  background: url('../images/mobile_landscape_img.jpg');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  z-index: 100041;
}

.landscape-coverer-inner {
  display: block;
  height: 100%;
  width: 100%;
  text-align: center;
}

.landscape-coverer-gif {
  display: inline-block;
  margin: 7% auto 0 auto;
  height: 52%;
  width: 100%;
  background: url('../images/icons/red-rotate-90.gif');
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}

@media only screen
and (min-device-width: 320px)
and (max-device-width: 480px)
and (orientation: landscape) {
  .landscape-coverer {
    display: block;
    opacity: 1;
  }
}