.post-type-archive-portfolio .ajax-load-more-wrap {
  height: 100%;
}

.post-type-archive-portfolio .alm-listing.alm-preloaded {
  display: none !important;
}

/* hide the preloaded items until they're dealt with */
.post-type-archive-portfolio .alm-reveal {
  height: 100%;
  float: left;
  width: 25vw;
}

.post-type-archive-portfolio .alm-reveal .item {
  width: 100% !important;
  clear: left;
}

.post-type-archive-portfolio .alm-btn-wrap {
  display: none !important;
}

.jcarousel.loading + .pagination .jcarousel-next {
  background-color: #FF4544 !important;
  background-image: url("../images/icons/loading1_white_on_red.gif") !important;
  cursor: default !important;
  -webkit-transition: all .1s !important;
  -moz-transition: all .1s !important;
  transition: all .1s !important;
}

.white_brand .jcarousel.loading + .pagination .jcarousel-next {
  background-color: #D51509 !important;
}

/* ************************ PORTFOLIO GENERAL DISPLAY ************************ */

/* includes some declarations for single display */

.display.portfolio {
  /*min-width: 2000px;*/
  height: 100%;
}

.display.portfolio .item {
  width: 25%;
  height: 33.4%;
  float: left;
  position: relative;
  margin: 0;
  overflow: hidden;
}

#chr_ajax_load_more_settings[data-rows='4'] + #ajax-load-more .display.portfolio .item {
  height: 25%;
}

.display.portfolio .item .link {
  display: block;
  width: 100%;
  height: 100%;
}

.display.portfolio .item .image {
  display: block;
  width: 100%;
  height: 100%;
  z-index: -1; /* so hover background of .link shows over the top */
  position: relative; /* z-index take effect */
}

.single-portfolio .gallery .item .image {
  display: block;
  width: 100%;
  height: 100%;
  z-index: -1; /* so hover background of .link shows over the top */
  position: relative; /* z-index take effect */
}

.display.portfolio .item.no-thumbnail .image {
  background-image: url("../images/portfolio-placeholder.jpg") !important;
}

.display.portfolio .item .title,
.single-portfolio .gallery .item .caption {
  position: absolute;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  padding: 40px 15px 80px 15px;
  background-color: rgb(255, 69, 68);
  background-color: rgba(255, 69, 68, .8);
  text-transform: uppercase;
  font-size: 16px;
  font-family: "Montserrat";
  width: 180px;
  height: 100%;
  padding: 40px 15px 80px 15px;
  margin: 0;
  top: 0;
  left: -180px;
}

.white_brand .display.portfolio .item .title,
.white_brand.single-portfolio .gallery .item .caption {
  font-family: "Work Sans";
  text-transform: none;
  padding-top: 60px;
  background-color: rgb(190, 21, 33);
  background-color: rgba(213, 21, 09, .8);
  line-height: 1.4em;
}

.single-portfolio .gallery .item .caption {
  font-family: "Open Sans";
  font-size: 14px;
  padding: 20px;
  text-transform: none;
  color: #fff;
}

.white_brand.single-portfolio .gallery .item .caption {
  font-family: "Work Sans";
}

.display.portfolio .item .title:after {
  /* arrow on title hovers */
  background-image: url("../images/icons/arrow2_right_white.png");
  background-size: auto 100%;
  background-position: center;
  background-repeat: no-repeat;
  content: "";
  position: absolute;
  bottom: 15px;
  right: 15px;
  width: 34px;
  height: 56px;
}

.white_brand .display.portfolio .item .title:after {
  background-image: url("../images/icons/arrow6_right_white.png");
  bottom: 30px;
}

@media only screen and (min-width: 1000px) {

  /* apply hovers to desktop devices only */
  .display.portfolio .item .link:hover,
  .mod-no-touch .single-portfolio .item.full .thumb .link:hover,
  .mod-no-touch .single-portfolio .gallery .item .link:hover,
  .mod-no-touch .single-portfolio .video-container:not(.playing):hover {
    background-color: rgba(255, 69, 68, .4);
    background-position: center;
  }

  .white_brand .display.portfolio .item .link:hover,
  .mod-no-touch .white_brand.single-portfolio .item.full .thumb .link:hover,
  .mod-no-touch .white_brand.single-portfolio .gallery .item .link:hover,
  .mod-no-touch .white_brand.single-portfolio .video-container:not(.playing):hover {
    background-color: rgba(213, 21, 09, .4);
  }

  .single-portfolio .gallery .item .link:not(.pre-hover):not(.hovered):not(.post-hover):hover .title,
  .single-portfolio .gallery .item .link:hover .caption {
    left: 0;
  }

  /* avoid seeing the preparation of the hovers while they would otherwise still be undergoing transition */
  .display.portfolio .item .link.pre-unhover .title,
  .display.portfolio .item .link.pre-hover .title {
    -webkit-transition: none;
    -moz-transition: none;
    transition: none;
  }

  .display.portfolio .item .link[data-enter-from="top"].pre-hover .title,
  .display.portfolio .item .link[data-exit-to="top"].post-hover .title {
    top: -100%;
    right: auto;
    bottom: auto;
    left: 0;
  }

  .display.portfolio .item .link[data-enter-from="top"].hovered .title,
  .display.portfolio .item .link[data-exit-to="top"].pre-unhover .title {
    top: 0;
    right: auto;
    bottom: auto;
    left: 0;
  }

  .display.portfolio .item .link[data-enter-from="right"].pre-hover .title {
    top: 0;
    right: -180px;
    bottom: auto;
    left: auto;
  }

  .display.portfolio .item .link[data-exit-to="right"].post-hover .title {
    top: 0;
    right: -180px;
    margin-right: 0;
    bottom: auto;
    left: auto;
  }

  .display.portfolio .item .link[data-enter-from="right"].hovered .title,
  .display.portfolio .item .link[data-exit-to="right"].pre-unhover .title {
    top: 0;
    right: 100%;
    margin-right: -180px;
    bottom: auto;
    left: auto;
  }

  .display.portfolio .item .link[data-enter-from="bottom"].pre-hover .title,
  .display.portfolio .item .link[data-exit-to="bottom"].post-hover .title {
    top: auto;
    right: auto;
    bottom: -100%;
    left: 0;
  }

  .display.portfolio .item .link[data-enter-from="bottom"].hovered .title,
  .display.portfolio .item .link[data-exit-to="bottom"].pre-unhover .title {
    top: auto;
    right: auto;
    bottom: 0;
    left: 0;
  }

  .display.portfolio .item .link[data-enter-from="left"].pre-hover .title,
  .display.portfolio .item .link[data-exit-to="left"].post-hover .title {
    top: 0;
    right: auto;
    bottom: auto;
    left: -180px;
  }

  .display.portfolio .item .link[data-enter-from="left"].hovered .title,
  .display.portfolio .item .link[data-exit-to="left"].pre-unhover .title {
    top: 0;
    right: auto;
    bottom: auto;
    left: 0;
  }

  .display.portfolio .item .link[data-enter-from="undetermined"].pre-hover .title,
  .display.portfolio .item .link[data-exit-to="undetermined"].post-hover .title {
    top: 0;
    right: auto;
    bottom: auto;
    left: -180px;
  }

  .display.portfolio .item .link[data-enter-from="undetermined"].hovered .title,
  .display.portfolio .item .link[data-exit-to="undetermined"].pre-unhover .title {
    top: 0;
    right: auto;
    bottom: auto;
    left: 0;
  }

  .display.portfolio .item .link[data-enter-from="right"].hovered .title {
    -webkit-transition: all .7s .1s;
    -moz-transition: all .7s .1s;
    transition: all .7s .1s;
  }

  .display.portfolio .item .link[data-enter-from="left"].hovered .title {
    -webkit-transition: all .5s .15s;
    -moz-transition: all .5s .15s;
    transition: all .5s .15s;
  }

  .display.portfolio .item .link[data-exit-to="left"].post-hover .title {
    -webkit-transition: all .2s linear;
    -moz-transition: all .2s linear;
    transition: all .2s linear;
  }

}

/* end applying hovers to desktop devices only */

/* IE8 is a bit slow doing everything for us, so let's make it easy for that browser */
.oldie .display.portfolio .item .link.hovered .title {
  top: 0 !important;
  right: auto !important;
  bottom: auto !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
}

.post-type-archive-portfolio .pagination,
.single-portfolio .links {
  position: absolute;
  bottom: 0;
  right: 0;
  border: 0;
  background: none;
  padding: 0;
  width: 8em; /* was 7% */
  height: 4em; /* was 7% */
  max-height: 60px;
  max-width: 115px;
}

.post-type-archive-portfolio .pagination .page-numbers:not(.next):not(.prev) {
  display: none;
}

.post-type-archive-portfolio .pagination a,
.single-portfolio .links a,
.single-portfolio .links span {
  display: block;
  position: absolute;
  bottom: 0;
  right: 0;
  margin: 0;
  padding: 0;
  border: 0;
  width: 50%;
  height: 100%;
  background-size: 50%;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url("../images/icons/arrow2_right_white.png");
  background-color: #DADADA; /* available link */
  text-indent: -9999px;
}

.single-portfolio .links span.prev,
.single-portfolio .links a[rel="prev"],
.post-type-archive-portfolio .pagination .prev,
.single-portfolio .links a.prev {
  background-image: url("../images/icons/arrow2_left_white.png");
}

.post-type-archive-portfolio .pagination .prev,
.single-portfolio .links .prev,
.single-portfolio .links a[rel="prev"] {
  right: auto;
  left: 1px;
}

.single-portfolio .links.postnav_links .prev,
.single-portfolio .links.postnav_links a[rel="prev"] {
  left: 0;
}

.post-type-archive-portfolio .pagination a.on,
.post-type-archive-portfolio .pagination a:hover,
.single-portfolio .links a.on,
.single-portfolio .links a:hover {
  background-color: #FF4544;
}

/* available link (hovered) */

.white_brand.post-type-archive-portfolio .pagination a.on,
.white_brand.post-type-archive-portfolio .pagination a:hover,
.white_brand.single-portfolio .links a.on,
.white_brand.single-portfolio .links a:hover {
  background-color: #D51509;
}

.post-type-archive-portfolio .pagination a.disabled,
.single-portfolio .links a.disabled {
  background-color: #efefef !important;
}

/* unavailable link, !important to override hover */

/* ************************* SINGLE PORTFOLIO ITEM ************************* */

/* some of the declarations for this are included above */

.single-portfolio #content {
  height: 100vh;
  overflow: hidden;
}

.single-portfolio .item.full {
  height: 70%; /*overflow: hidden;*/
}

.single-portfolio .item.full.no-gallery {
  height: 100%;
}

.single-portfolio .item.full .content {
  float: left;
  width: 50%;
  height: 80%; /* avoiding 100% means we avoid overflowing content from touching the bottom */
  position: relative;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  overflow: hidden;
}

.single-portfolio .item.full.no-featured-image .content {
  width: 100%;
}

.single-portfolio .item.full .content .title {
  margin: 60px 130px 30px 0;
  text-transform: uppercase;
  color: #323232;
  font-family: "Montserrat";
  font-size: 28px;
  position: relative;
  /*padding-bottom: 30px; /* create space for the heading underline */
  padding-bottom: 0; /* temporarily hidden, see below */
}

.white_brand.single-portfolio .item.full .content .title {
  font-family: "Work Sans";
  color: #D51509;
}

.single-portfolio .item.full .content .title:after {
  /* line after title */
  /* temporarily hidden - due to scroll-ability in the portfolio text looking very similar */
  display: none;
  /*
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 180px;
  border-top: 2px solid #DADADA;
  */
}

.single-portfolio .item.full .content .post_post {
  margin: 15px 130px 30px 0;
}

.single-portfolio .links {
}

.single-portfolio .links a {
}

.single-portfolio .links.postnav_links {
  top: 120px; /* was 125px, changed to 120px by CHROMATIX TM to fit with addthis positioning - 16/06/2015 */
  right: auto;
  bottom: auto;
  height: 48px;
  left: -24px;
  width: 96px;
  -webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  -o-transform: rotate(90deg);
  transform: rotate(90deg);
}

.atss.addthis-animated {
  z-index: 1000;
}

.single-portfolio .item.full table tbody tr td {
  cursor: default;
}

@media only screen and (max-width: 1400px) {
  .single-portfolio .links.postnav_links {
    display: none;
  }
}

.oldie .single-portfolio .links.postnav_links {
  top: 20px;
  /*display: none;*/
}

.single-portfolio .links.postnav_links a,
.single-portfolio .links.postnav_links span {
  border-bottom: 16px solid #DADADA;
  bottom: -16px;
}

.single-portfolio .links.postnav_links a.on,
.single-portfolio .links.postnav_links a:hover {
  border-color: #FF4544;
  bottom: 0;
}

.white_brand.single-portfolio .links.postnav_links a.on,
.white_brand.single-portfolio .links.postnav_links a:hover {
  border-color: #D51509;
}

.single-portfolio .gallery_links {
  width: 19%;
  height: 11%;
}

.single-portfolio .item.full.has-featured-image .gallery_links {
  right: 50%;
}

/* enable transitions, especially when 'clicked' by the keyboard - using the .on class */

.post-type-archive-portfolio .pagination a,
.single-portfolio .links a {
  -webkit-transition: background-color .1s, border-color .1s, bottom .15s ease-in-out;
  -moz-transition: background-color .1s, border-color .1s, bottom .15s ease-in-out;
  transition: background-color .1s, border-color .1s, bottom .15s ease-in-out;
}

.post-type-archive-portfolio .pagination a.on,
.single-portfolio .links a.on {
  -webkit-transition: none;
  -moz-transition: none;
  transition: none;
}

.single-portfolio .item.full .thumb {
  float: right;
  width: 50%;
  height: 100%;
  position: relative;
}

.mod-no-touch .single-portfolio .item.full .thumb .link,
.mod-no-touch .single-portfolio .gallery .item .link,
.single-portfolio .video-container {
  display: block;
  width: 100%;
  height: 100%;
  background-image: url("../images/icons/search1_white_40pc.png");
  background-position: center -250px; /* this will be shown on hover */
  background-repeat: no-repeat;
  background-size: auto 12%;
  position: relative;
  cursor: pointer; /* for new .video-container */
  overflow: hidden; /* to prevent Chrome weirdities when resizing browser/orientation */
}

.single-portfolio .video-container {
  background-image: url("../images/icons/arrow4_right_white_40pc.png");
}

/* we rely on CSS transforms for these links, so if we don't have them, make it look unclickable */
.mod-touch .single-portfolio .item.full .thumb .link,
.mod-touch .single-portfolio .gallery .item .link {
  cursor: default;
}

.mod-no-touch .single-portfolio .gallery .item .link {
  background-size: auto 25%;
  overflow: hidden; /* required to hide caption before it slides in on hover */
}

.mod-no-touch .single-portfolio .video-container {
  background-size: auto 30%;
}

.single-portfolio .item.full .thumb .image {
  width: 100%;
  height: 100%;
  display: block;
  z-index: -1; /* behind link bg */
  position: relative;
}

@media only screen and (min-width: 1000px) {
  /* apply these to desktop devices only */
  .mod-no-touch .single-portfolio .item.full .link:active,
  .mod-no-touch .single-portfolio .item.full .link:focus {
    -webkit-transform: translate(-51%, 21%) scale(1.35, 1.35);
    -moz-transform: translate(-51%, 21%) scale(1.35, 1.35);
    -ms-transform: translate(-51%, 21%) scale(1.35, 1.35);
    -o-transform: translate(-51%, 21%) scale(1.35, 1.35);
    transform: translate(-51%, 21%) scale(1.35, 1.35);
    z-index: 10;
    /*box-shadow: 6px 10px 6px rgba(0,0,0,0.7);*/
  }

  .mod-no-touch .single-portfolio .item.full.no-gallery .link:focus {
    -webkit-transform: translate(-51%, 0%) scale(.95, .95);
    -moz-transform: translate(-51%, 0%) scale(.95, .95);
    -ms-transform: translate(-51%, 0%) scale(.95, .95);
    -o-transform: translate(-51%, 0%) scale(.95, .95);
    transform: translate(-51%, 0%) scale(.95, .95);
  }

}

/* end applying to desktop devices only */

.single-portfolio .gallery {
  height: 30%;
  width: 100%;
  position: relative;
}

.single-portfolio .gallery .item {
  width: 480px;
  width: 25vw;
  height: 100%;
  float: left;
  position: relative;
}

@media only screen and (min-width: 1000px) {

  /* apply these to desktop devices only */
  .mod-no-touch .single-portfolio .gallery .item .link:focus {
    z-index: 10; /* ensure it displays above all other images, including their hover states */
  }

  .mod-no-touch .white_brand.single-portfolio .gallery .item .link:focus .caption {
    padding-top: 20px; /* return to normal when in :focus mode */
  }

  .mod-no-touch .single-portfolio .gallery .item[data-position="1"] .link:focus {
    -webkit-transform: translate(153%, -129%) scale(2.57, 2.57);
    -moz-transform: translate(153%, -129%) scale(2.57, 2.57);
    -ms-transform: translate(153%, -129%) scale(2.57, 2.57);
    -o-transform: translate(153%, -129%) scale(2.57, 2.57);
    transform: translate(153%, -129%) scale(2.57, 2.57);
  }

  .mod-no-touch .single-portfolio .gallery.animating[data-last-direction="snapto-next"] .item[data-position="1"] .link:focus,
  .mod-no-touch .single-portfolio .gallery .item[data-position="2"] .link:focus {
    -webkit-transform: translate(53%, -129%) scale(2.57, 2.57);
    -moz-transform: translate(53%, -129%) scale(2.57, 2.57);
    -ms-transform: translate(53%, -129%) scale(2.57, 2.57);
    -o-transform: translate(53%, -129%) scale(2.57, 2.57);
    transform: translate(53%, -129%) scale(2.57, 2.57);
  }

  .mod-no-touch .single-portfolio .gallery.animating[data-last-direction="snapto-prev"] .item[data-position="1"] .link:focus,
  .mod-no-touch .single-portfolio .gallery .item[data-position="3"] .link:focus {
    -webkit-transform: translate(-47%, -129%) scale(2.57, 2.57);
    -moz-transform: translate(-47%, -129%) scale(2.57, 2.57);
    -ms-transform: translate(-47%, -129%) scale(2.57, 2.57);
    -o-transform: translate(-47%, -129%) scale(2.57, 2.57);
    transform: translate(-47%, -129%) scale(2.57, 2.57);
  }

  .mod-no-touch .single-portfolio .gallery .item[data-position="4"] .link:focus {
    -webkit-transform: translate(-147%, -129%) scale(2.57, 2.57);
    -moz-transform: translate(-147%, -129%) scale(2.57, 2.57);
    -ms-transform: translate(-147%, -129%) scale(2.57, 2.57);
    -o-transform: translate(-147%, -129%) scale(2.57, 2.57);
    transform: translate(-147%, -129%) scale(2.57, 2.57);
  }

  .mod-no-touch .single-portfolio .gallery .item .link .caption {
    top: auto;
    bottom: 0;
    -webkit-transition: left .5s;
    -moz-transition: left .5s;
    transition: left .5s;
  }

  .mod-no-touch .single-portfolio .gallery .item .link:focus .caption {
    left: 0;
    width: 256.5%;
    height: auto;
    -webkit-transform: translate(-30.5%, 33%) scale(0.39, 0.32);
    -moz-transform: translate(-30.5%, 33%) scale(0.39, 0.32);
    -ms-transform: translate(-30.5%, 33%) scale(0.39, 0.32);
    -o-transform: translate(-30.5%, 33%) scale(0.39, 0.32);
    transform: translate(-30.5%, 33%) scale(0.39, 0.32);
    text-align: center;
    -webkit-transition: none;
    -moz-transition: none;
    transition: none;
  }

  .mod-no-touch .white_brand.single-portfolio .gallery .item .link:focus .caption {
    bottom: -.5px;
  }

  .mod-touch .single-portfolio .gallery .item .link .caption {
    display: none;
  }

}

/* end applying these to desktop devices only */

.single-portfolio .gallery .item .image {
  width: 100%;
  height: 100%;
}

/* Additions to support video. */

.single-portfolio .video-container {
  width: 100%;
  height: 100%;
}

.single-portfolio .video-poster,
.single-portfolio .video {
  width: 100%;
  height: auto;
  min-height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-color: #1B1B1B;
}

.single-portfolio .video-container.playing .video-poster,
.single-portfolio .video-container .video {
  opacity: 0;
}

.single-portfolio .video-container .video-poster,
.single-portfolio .video-container.playing .video {
  opacity: 1;
}