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

Add reusable elements here. For example, with colors:

$blue: #0000ff;

To then implement this in the other .scss files:

.class {
	color: $blue;
}

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

Base button styles for the front-end of the site should go here.

***************/
/* Standard button: this includes css used for all buttons, plus padding and font-size for a default button */
.hcontent a.button,
.hcontent input.button[type=submit],
.hcontent input.button[type=button],
a.button,
button.button,
input.button[type=submit],
input.button[type=button] {
  font-family: "AvenirMedium", Arial, Helvetica, sans-serif;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: 3px;
  border: none;
  -webkit-box-shadow: none;
          box-shadow: none;
  font-size: 18px;
  padding: 12px 20px;
  line-height: 1;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  display: inline-block;
}

/* Button Size Modifiers: these dictate the button size and would be smaller/larger than ".button", so you'd include padding and font-size */
a.button.button-sm,
input.button.button-sm[type=submit],
input.button.button-sm[type=button] {
  font-size: 14px;
  padding: 8px 14px;
}

a.button.button-lg,
button.button.button-lg,
input.button.button-lg[type=submit],
input.button.button-lg[type=button] {
  font-size: 21px;
  padding: 18px 28px;
}

/* Button Color Modifiers: these dictate the button color, so you'd include background-color, color, and possibly border */
.hcontent a.button-primary,
.hcontent button.button-primary,
.hcontent input.button-primary[type=submit],
.hcontent input.button-primary[type=button],
a.button-primary,
input.button-primary[type=submit],
input.button-primary[type=button] {
  background: #e86825;
  color: #fff;
}

.hcontent a.button-primary:hover,
.hcontent button.button-primary:hover,
.hcontent input.button-primary[type=submit]:hover,
.hcontent input.button-primary[type=button]:hover,
a.button-primary:hover,
input.button-primary[type=submit]:hover,
input.button-primary[type=button]:hover {
  background: #ff9a65;
}

.hcontent a.button-secondary,
button.button-secondary,
.hcontent input.button-secondary[type=submit],
.hcontent input.button-secondary[type=button],
a.button-secondary,
input.button-secondary[type=submit],
input.button-secondary[type=button] {
  background: #8dc63f;
  color: #fff;
}

.hcontent a.button-secondary:hover,
button.button-secondary:hover,
.hcontent input.button-secondary[type=submit]:hover,
.hcontent input.button-secondary[type=button]:hover,
a.button-secondary:hover,
input.button-secondary[type=submit]:hover,
input.button-secondary[type=button]:hover {
  background: #9bd749;
}

.hcontent a.button-tertiary,
.hcontent input.button-tertiary[type=submit],
.hcontent input.button-tertiary[type=button],
a.button-tertiary,
input.button-tertiary[type=submit],
input.button-tertiary[type=button] {
  background: transparent;
  border: 2px solid #e86825;
  color: #e86825;
}

.hcontent a.button-tertiary:hover,
.hcontent input.button-tertiary[type=submit]:hover,
.hcontent input.button-tertiary[type=button]:hover,
a.button-tertiary:hover,
input.button-tertiary[type=submit]:hover,
input.button-tertiary[type=button]:hover {
  border: 2px solid #ff9a65;
  color: #ff9a65;
}

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

This would be for Components or UC's (User Controls) we have built in our backend. 

Standard components in here as of 3/28:

1. Thank You Page UC - Styling for the thank you page after a form has been filled out.
2. Page Banner UC - Styling for a full width banner image + H1 and subheading. 
3. CTA Banner UC - Styling for a full width banner image + H1, subheading, and CTA buttons. 

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

THANK YOU PAGE UC

************************************************/
#wrapper_thank_you {
  text-align: center;
  padding: 80px 0 270px 0;
}

#wrapper_thank_you h1 {
  color: #333;
}

.thank-you-links {
  margin: 0 auto;
  display: block;
  max-width: 1300px;
}

#wrapper_thank_you .thank-you-link {
  display: inline-block;
  width: 15%;
  margin: 0 2%;
}

#wrapper_thank_you .thank-you-link h2 {
  font-size: 24px;
  line-height: 1.3;
  margin-bottom: 15px;
}

#wrapper_thank_you .thank-you-link img {
  max-width: 100%;
  height: auto;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

#wrapper_thank_you .thank-you-link img:hover {
  opacity: 0.9;
}

@media (max-width: 1024px) {
  #wrapper_thank_you {
    padding: 60px 0 60px 0;
  }
}
@media (max-width: 768px) {
  #wrapper_thank_you h1 {
    font-size: 42px;
  }
  #wrapper_thank_you .thank-you-link {
    display: inline-block;
    width: 43%;
    margin: 0 2% 15px 2%;
  }
  #wrapper_thank_you .thank-you-link h2 {
    font-size: 21px;
  }
  #wrapper_thank_you p {
    font-size: 16px;
  }
}
@media (min-width: 320px) and (max-width: 480px) {
  #wrapper_thank_you .thank-you-link {
    display: inline-block;
    width: 70%;
    margin: 2% auto;
  }
  #wrapper_thank_you .thank-you-link h2 {
    font-size: 18px;
  }
}
/************************************************

PAGE BANNER UC

************************************************/
.page-banner {
  background-size: cover;
  background-position: center center;
  padding: 50px 0;
  position: relative;
}

.page-banner .setcontainer {
  text-align: center;
  position: relative;
  z-index: 2;
}

.overlay-page-banner {
  position: absolute;
  z-index: 1;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.page-banner .setcontainer h1 {
  font-size: 40px;
  margin: 0 0 15px 0;
}

.page-banner .setcontainer span {
  font-size: 24px;
}

@media (max-width: 480px) {
  .page-banner {
    padding: 30px 0;
  }
}
/* END OF PAGE BANNER UC */
/************************************************

CTA BANNER UC

************************************************/
.cta-banner {
  background-size: cover;
  background-position: center center;
  padding: 50px 0;
  position: relative;
}

.cta-banner .setcontainer {
  text-align: center;
  position: relative;
  z-index: 2;
}

.overlay-cta {
  position: absolute;
  z-index: 1;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.cta-banner .setcontainer h2 {
  font-size: 36px;
  margin: 0 0 15px 0;
}

.cta-banner .button-wrapper a {
  display: inline-block;
  margin: 0 10px;
}

@media (max-width: 480px) {
  .cta-banner {
    padding: 30px 0;
  }
  .cta-banner .button-wrapper a {
    display: block;
    margin: 10px 0;
  }
}
/* timeline */
#wrapper-timeline .jump-to {
  font-size: 24px;
  border: 1px solid #ccc;
  border-left: 15px solid #8dc63f;
  -webkit-box-shadow: 3px 2px 3px #ccc;
          box-shadow: 3px 2px 3px #ccc;
  padding: 10px;
  max-width: 640px;
  margin: 0 auto;
}
#wrapper-timeline .jump-to select {
  padding-left: 10px;
  font-size: 20px;
  background-color: #fff;
  border: 1px solid #ccc;
  margin-left: 10px;
  max-width: 320px;
}
#wrapper-timeline a.go-up {
  position: fixed;
  bottom: 25px;
  right: 50px;
  display: block;
  border-radius: 50%;
  padding: 25px;
  background-color: #8dc63f;
  color: #fff;
  font-size: 24px;
  -webkit-box-shadow: 2px 3px 2px #ccc;
          box-shadow: 2px 3px 2px #ccc;
  -webkit-transition: 0.3s all;
  transition: 0.3s all;
}
#wrapper-timeline a.go-up:hover {
  -webkit-transform: rotate(360deg);
          transform: rotate(360deg);
}
#wrapper-timeline .timeline ul {
  width: 100%;
  padding: 0 10%;
  overflow: hidden;
}
#wrapper-timeline .timeline ul li {
  display: inline-block;
  list-style-type: none;
  text-align: left;
  padding: 0px;
}
#wrapper-timeline .timeline ul li:nth-child(1n+1) .slide {
  border: 5px solid #332F3D;
  background-color: #332F3D;
  color: #fff !important;
}
#wrapper-timeline .timeline ul li:nth-child(1n+1) .slide a {
  color: #fff !important;
  text-decoration: underline;
  font-weight: bold;
}
#wrapper-timeline .timeline ul li:nth-child(2n) .slide {
  color: #fff !important;
  border: 5px solid #0067A5;
  background-color: #0067A5;
}
#wrapper-timeline .timeline ul li:nth-child(3n) .slide {
  border: 5px solid #895719;
  background-color: #895719;
  /*.content-wrapper{
  	background-color:darken($_green,15);
  	padding:10px;
  	margin-left:25px;
  	margin-right:25px;

  	border:1px inset lighten(#956719,50);
  }*/
}
#wrapper-timeline .timeline .slide {
  margin: 25px 5px 25px 5px;
  width: 100%;
  padding: 0;
  -webkit-box-shadow: 5px 5px 2px #ccc;
          box-shadow: 5px 5px 2px #ccc;
  position: relative;
}
#wrapper-timeline .timeline .slide h2 {
  text-transform: uppercase;
  font-size: 28px;
  text-align: center;
  max-width: 50%;
  margin: 0 auto;
}
#wrapper-timeline .timeline .slide .content {
  text-align: left;
  max-width: 63%;
  margin: 0 auto;
  padding: 25px;
  line-height: 1.5;
}
#wrapper-timeline .timeline .slide .content p {
  padding-bottom: 10px;
  line-height: 1.4;
}
#wrapper-timeline .timeline .slide .content ul {
  margin-left: 15px;
  margin-bottom: 10px;
}
#wrapper-timeline .timeline .slide .content ul li {
  list-style-type: disc;
  list-style-position: inside;
  padding-bottom: 5px;
  display: list-item;
}
#wrapper-timeline .timeline .slide .time-span {
  font-family: "Sivellin", Georgia, serif;
  width: 100%;
  text-align: right;
  color: #fff;
  white-space: nowrap;
  font-size: 48px;
  padding: 10px 25px 10px 10px;
}
#wrapper-timeline .timeline .slide .images {
  text-align: center;
  margin-top: 15px;
  padding-bottom: 55px;
}
#wrapper-timeline .timeline .slide .images img {
  max-width: 400px;
  max-height: 400px;
  border-radius: 3px;
  border: 1px solid #dacbcb;
  background-color: #fff;
  -webkit-transform: rotate(5deg);
          transform: rotate(5deg);
  padding: 10px 10px 25px 10px;
  -webkit-transition: 2s all;
  transition: 2s all;
}
#wrapper-timeline .timeline .slide.images-1 h2 {
  max-width: 100%;
  text-align: left;
  padding-left: 15px;
}
#wrapper-timeline .timeline .slide.images-1 .content {
  max-width: 100%;
  padding: 15px;
}
#wrapper-timeline .timeline .slide.images-0 {
  max-width: 800px;
}
#wrapper-timeline .timeline .slide.images-0 h2 {
  max-width: 90%;
  margin-top: 10px;
}
#wrapper-timeline .timeline .slide.images-0 .content {
  max-width: 90%;
}
#wrapper-timeline .timeline .slide .img-count-4 img {
  max-width: 24.2%;
}
#wrapper-timeline .timeline .slide .img-count-4 img:nth-child(2) {
  -webkit-transform: rotate(-5deg);
          transform: rotate(-5deg);
}
#wrapper-timeline .timeline .slide .img-count-4 img:nth-child(4) {
  -webkit-transform: rotate(-5deg);
          transform: rotate(-5deg);
}
#wrapper-timeline .timeline .slide .img-count-3 img {
  max-width: 33.3%;
}
#wrapper-timeline .timeline .slide .img-count-3 img:nth-child(2) {
  -webkit-transform: rotate(-5deg);
          transform: rotate(-5deg);
}
#wrapper-timeline .timeline .slide .img-count-2 img {
  max-width: 49.2%;
}
#wrapper-timeline .timeline .slide .img-count-2 img:nth-child(2) {
  -webkit-transform: rotate(-5deg);
          transform: rotate(-5deg);
}
#wrapper-timeline .timeline .slide .img-count-1 img {
  -webkit-transform: rotate(0deg);
          transform: rotate(0deg);
  max-width: 800px;
}
#wrapper-timeline .timeline .slide.show-fade img {
  -webkit-transform: rotate(10deg);
          transform: rotate(10deg);
}
#wrapper-timeline .timeline .slide.show-fade .img-count-1 img {
  -webkit-transform: rotate(0deg);
          transform: rotate(0deg);
}
#wrapper-timeline .timeline .slide.show-fade .img-count-2 img:nth-child(2), #wrapper-timeline .timeline .slide.show-fade .img-count-3 img:nth-child(2), #wrapper-timeline .timeline .slide.show-fade .img-count-4 img:nth-child(2) {
  -webkit-transform: rotate(-10deg);
          transform: rotate(-10deg);
}
#wrapper-timeline .timeline .slide.show-fade .img-count-2 img:nth-child(4), #wrapper-timeline .timeline .slide.show-fade .img-count-3 img:nth-child(4), #wrapper-timeline .timeline .slide.show-fade .img-count-4 img:nth-child(4) {
  -webkit-transform: rotate(4.5deg);
          transform: rotate(4.5deg);
}
#wrapper-timeline .timeline-ending-buttons {
  max-width: 800px;
  margin: 25px auto 50px auto;
  padding: 25px;
  text-align: center;
  border: 1px solid #ccc;
  box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.22);
  background-color: #eee;
  -webkit-box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.22);
}
#wrapper-timeline .timeline-ending-buttons .social-share {
  margin-top: 5px;
  font-size: 24px;
  white-space: nowrap;
}
#wrapper-timeline .timeline-ending-buttons .social-share a {
  display: inline-block;
  text-align: center;
  font-size: 0;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  background-color: #0067A5;
  position: relative;
  width: 40px;
  height: 40px;
  border-radius: 50%;
}
#wrapper-timeline .timeline-ending-buttons .social-share a i {
  color: #fff !important;
  display: inline-block;
  font-size: 24px;
  margin-top: 7px;
  border-radius: 50%;
}
@media (max-width: 810px) {
  #wrapper-timeline .social-share {
    white-space: normal !important;
  }
  #wrapper-timeline .social-share span {
    display: block;
    line-height: 2;
  }
  #wrapper-timeline .timeline ul li .slide h2 {
    max-width: 100%;
  }
  #wrapper-timeline .timeline ul li .slide.images-1 .content-col {
    width: 100%;
  }
  #wrapper-timeline .timeline ul li .slide.images-1 .img-column {
    width: 100%;
  }
  #wrapper-timeline .timeline ul li .slide.images-1 h2 {
    text-align: center;
  }
  #wrapper-timeline .timeline ul li .slide .img-count-1 img {
    max-width: 100%;
  }
  #wrapper-timeline .timeline ul li .slide .content {
    max-width: 100%;
    padding: 10px;
  }
  #wrapper-timeline .timeline ul li .slide .img-count-3 {
    text-align: center;
  }
  #wrapper-timeline .timeline ul li .slide .img-count-3 img {
    max-width: 42.9%;
  }
  #wrapper-timeline .timeline ul li .slide .img-count-4 {
    text-align: center;
  }
  #wrapper-timeline .timeline ul li .slide .img-count-4 img {
    max-width: 42.9%;
  }
}
@media (max-width: 640px) {
  #wrapper-timeline .jump-to {
    margin: 0 5px;
  }
  #wrapper-timeline .jump-to select {
    max-width: 95%;
  }
  #wrapper-timeline a.go-up {
    z-index: 99;
  }
  #wrapper-timeline .timeline ul {
    margin: 0 !important;
    padding: 0;
  }
  #wrapper-timeline .timeline ul li .slide .content-wrapper {
    padding-right: 10px;
  }
  #wrapper-timeline .timeline ul li .slide h2 {
    max-width: 100%;
  }
  #wrapper-timeline .timeline ul li .slide .content {
    max-width: 100%;
  }
  #wrapper-timeline .timeline ul li .slide .images {
    padding-bottom: 10px;
  }
  #wrapper-timeline .timeline ul li .slide .img-count-1 img {
    max-width: 85%;
  }
  #wrapper-timeline .timeline ul li .slide .img-count-2 img {
    max-width: 85%;
  }
  #wrapper-timeline .timeline ul li .slide .time-span {
    white-space: normal;
  }
  #wrapper-timeline .timeline ul li .slide .img-count-3 img {
    max-width: 85%;
  }
  #wrapper-timeline .timeline ul li .slide .img-count-4 img {
    max-width: 85%;
  }
}

/* end timeline */
/************** 

This file is for all things related to the projects landing page and the standard project detail page. 

Case Study CSS should go within pb-global.scss since those pages are being built out using page builder

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

Add reusable elements here. For example, with colors:

$blue: #0000ff;

To then implement this in the other .scss files:

.class {
	color: $blue;
}

***************/
.filters-bar {
  width: 100%;
  background: #332f3d;
  font-family: "AvenirMedium", Arial, Helvetica, sans-serif;
  font-size: 15px;
  color: #fff;
  text-transform: uppercase;
  border-bottom: 1px solid #454051;
}

.filters-bar.stick {
  z-index: 10;
  position: fixed;
  left: 0;
  top: 0;
  bottom: auto;
}

.filters-bar a {
  color: #fff;
  text-decoration: none;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}

.filters-bar a:hover {
  color: #ccc;
}

.main-filters {
  padding: 20px 0;
  float: left;
}

.main-filters li {
  display: inline-block;
  margin-left: 15px;
}

.main-filters li:first-child {
  margin-left: 0;
}

.filters-bar .active-main-filter {
  color: #e86825;
}

.outdoor-active .active-main-filter {
  color: #8dc63f;
}

.indoor-active .active-main-filter {
  color: #0067a5;
}

.holiday-active .active-main-filter {
  color: #b33480;
}

.sub-filters {
  float: right;
  position: relative;
}

.sub-filters-toggle {
  display: inline-block;
  padding: 20px;
  border-left: 1px solid #454051;
  border-right: 1px solid #454051;
  cursor: pointer;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}

.sub-filters-toggle.open-filters {
  background: #454051;
}

.sub-filters-toggle:hover {
  background: #3d3946;
}

.sub-filters-toggle:before,
.sub-filters-toggle:after {
  display: inline-block;
  font-family: "FontAwesome";
  font-size: 18px;
}

.sub-filters-toggle:before {
  content: "\f0b0";
  margin-right: 15px;
  color: #e86825;
}

.outdoor-active .sub-filters-toggle:before {
  color: #8dc63f;
}

.indoor-active .sub-filters-toggle:before {
  color: #0067a5;
}

.holiday-active .sub-filters-toggle:before {
  color: #b33480;
}

.sub-filters-toggle:after {
  content: "\f0d7";
  margin-left: 30px;
}

.sub-filters ul {
  display: none;
  position: absolute;
  right: 0;
  top: 100%;
  background: #454051;
  z-index: 99;
}

.sub-filters a {
  display: block;
  padding: 15px;
  min-width: 200px;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}

.sub-filters a:hover {
  background: #3d3946;
  color: #fff;
}

a.active-sub-filter {
  background: #3d3946;
}

a.active-sub-filter:before {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin-right: 10px;
  content: "";
  background: #e86825;
}

.indoor-active a.active-sub-filter:before {
  background: #0067a5;
}

.outdoor-active a.active-sub-filter:before {
  background: #8dc63f;
}

.holiday-active a.active-sub-filter:before {
  background: #b33480;
}

.hero-featured-project {
  position: relative;
  background-size: cover;
  background-position: center center;
  width: 100%;
}

.hero-featured-project .setcontainer {
  position: relative;
  height: 0;
  padding-bottom: 23%;
}

.hero-featured-project .featured-project-info {
  position: absolute;
  right: 10px;
  bottom: -40px;
  z-index: 9;
}

.featured-project-info {
  position: relative;
  padding: 15px;
  color: #fff;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}

.hero-featured-project .featured-project-info {
  min-width: 470px;
}

.hero-featured-project .featured-project-info:after {
  display: inline-block;
  font-family: "FontAwesome";
  color: #fff;
  content: "\f054";
  position: absolute;
  right: 15px;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}

.featured-project-info.outdoor-featured:hover {
  background: #9bd749;
}

.featured-project-info.indoor-featured:hover {
  background: #0784d0;
}

.featured-project-info.holiday-featured:hover {
  background: #d14398;
}

.hero-featured-project .featured-project-info:hover:after {
  right: 10px;
}

.link-overlay {
  display: block;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
}

.outdoor-featured {
  background: #8dc63f;
  border: 1px solid #97d146;
}
.outdoor-featured .subheader {
  color: #cfff8e;
}

.indoor-featured {
  background: #0067a5;
  border: 1px solid #057ec6;
}
.indoor-featured .subheader {
  color: #5fc3ff;
}

.holiday-featured {
  background: #b33480;
  border: 1px solid #ca4093;
}
.holiday-featured .subheader {
  color: #ff9dd8;
}

.featured-project-info .subheader {
  font-family: "AvenirMedium", Arial, Helvetica, sans-serif;
  font-size: 18px;
  text-transform: uppercase;
}

.featured-project-info .featured-project-name {
  font-family: "AvenirBlack", Arial, Helvetica, sans-serif;
  font-size: 24px;
  margin: 10px 0 5px 0;
}

.featured-project-info .featured-project-subdetails {
  font-family: "AvenirMedium", Arial, Helvetica, sans-serif;
  font-size: 16px;
  color: #fff;
}

.projects-container {
  padding: 80px 0 80px 0;
}

.projects-container .setcontainer {
  text-align: center;
}

.projects-container h1 {
  margin-bottom: 20px;
  line-height: 1.2;
}

.projects-container h1 > span {
  display: block;
  font-size: 75%;
  color: #67646d;
}

.projects-container .setcontainer .projects-grid {
  text-align: center;
  margin-bottom: 50px;
}

.loading-icon {
  display: none;
  font-size: 40px;
  margin: 20px 0;
  position: relative;
  z-index: 10;
  color: #67646d;
}

.projects-grid.layout-complete .loading-icon {
  display: none;
}

.project-grid-item {
  width: 33.33%;
  padding: 20px;
  visibility: hidden;
}

.projects-grid.layout-complete .project-grid-item {
  visibility: visible;
}

.projects-grid.layout-complete .load-hide.project-grid-item {
  visibility: hidden;
}

.project-grid-item img {
  border: 1px solid #eaeaea;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}

.project-grid-item a {
  display: block;
}

.project-grid-item-inner {
  position: relative;
}

.project-grid-item-inner .project-grid-item-overlay {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  opacity: 0;
  padding: 10px;
}

.project-grid-item-inner .project-grid-item-overlay:before {
  display: inline-block;
  height: 100%;
  content: "";
  vertical-align: middle;
  margin-right: -0.35em;
}

.project-grid-item-inner:hover .project-grid-item-overlay {
  opacity: 1;
}

.project-grid-item-inner:hover .project-grid-item-overlay.outdoor {
  background: rgba(141, 198, 63, 0.8);
}

.project-grid-item-inner:hover .project-grid-item-overlay.indoor {
  background: rgba(0, 103, 165, 0.8);
}

.project-grid-item-inner:hover .project-grid-item-overlay.holiday {
  background: rgba(179, 52, 128, 0.8);
}

.project-grid-item-inner .project-grid-item-overlay-inner {
  display: inline-block;
  vertical-align: middle;
  color: #fff;
  text-align: center;
}

.project-grid-item-inner .project-grid-item-overlay-inner .project-name {
  display: block;
  font-family: "AvenirBlack", Arial, sans-serif;
  font-size: 24px;
  margin-bottom: 7px;
}

.project-grid-item-inner .project-grid-item-overlay-inner .project-location {
  text-transform: uppercase;
  font-size: 16px;
}

.project-grid-item-inner:hover .featured-project-info.outdoor-featured {
  background: #9bd749;
}

.project-grid-item-inner:hover .featured-project-info.indoor-featured {
  background: #0784d0;
}

.project-grid-item-inner:hover .featured-project-info.holiday-featured {
  background: #d14398;
}

.project-grid-item .featured-project-info .featured-project-name {
  font-size: 21px;
}

.project-grid-item .featured-project-info .featured-project-subdetails {
  font-size: 14px;
}

@media (max-width: 900px) {
  .filters-bar .setcontainer {
    padding: 0;
  }
  .main-filters,
  .sub-filters {
    float: none;
    width: 100%;
    text-align: center;
  }
  .main-filters {
    line-height: 1.3;
  }
  .sub-filters .sub-filters-toggle {
    display: block;
  }
  .sub-filters ul {
    width: 100%;
  }
  .sub-filters li a {
    width: 100%;
  }
}
@media (max-width: 768px) {
  .hero-featured-project .setcontainer {
    padding-bottom: 65%;
  }
  .project-grid-item {
    width: 50%;
    padding: 10px;
  }
}
@media (max-width: 480px) {
  .main-filters {
    padding: 10px 0;
  }
  .filter-label {
    display: block;
    width: 100%;
    margin: 0 0 10px 0;
  }
  .hero-featured-project .setcontainer {
    padding-bottom: 75%;
  }
  .hero-featured-project .featured-project-info {
    width: 94%;
    left: 3%;
    min-width: 1px;
    text-align: center;
  }
  .hero-featured-project .featured-project-info:after {
    display: none;
  }
  .projects-container h1 {
    font-size: 32px;
  }
  .project-grid-item {
    width: 100%;
    padding: 10px;
  }
}
#wrapper-projects div.projects-container .hcontent h2 {
  text-transform: uppercase;
  padding-top: 0px;
  font-size: 32px;
  font-weight: normal;
}

#wrapper-projects div.projects-container .hcontent h2.indoor-active {
  color: #0067a5;
}

#wrapper-projects div.projects-container .hcontent h2.outdoor-active {
  color: #8dc63f;
}

#wrapper-projects div.projects-container .hcontent h2.holiday-active {
  color: #b33480;
}

@media (max-width: 767px) {
  .projects-container {
    padding: 60px 0;
  }
  #wrapper-projects div.projects-container .hcontent h2 {
    font-size: 24px;
  }
}
@media (max-width: 600px) {
  #wrapper-projects div.projects-container .hcontent h2 {
    font-size: 19px;
    margin-bottom: 5px;
  }
}
/************************************************

STANDARD PROJECT

************************************************/
.work_detail_outer {
  width: 100%;
  background: #fff;
}

.work_detail_outer:after {
  clear: both;
  display: block;
  content: "";
}

.goto_worklinks {
  width: 100%;
  margin-bottom: 20px;
}

.goto_worklinks:after {
  clear: both;
  display: block;
  content: "";
}

.back_link {
  color: #e86825;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  text-decoration: none;
}

.sharethis {
  float: right;
}

.sharethis li {
  float: left;
  color: #666666;
  margin: 0 5px;
  line-height: 26px;
}

.sharethis li a {
  color: #fff;
  width: 26px;
  height: 26px;
  text-align: center;
  display: inline-block;
  font-size: 17px;
  padding-top: 5px;
  line-height: 100%;
  border-radius: 2px;
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
}

.sharethis li a.shareonfb {
  background: #3b5998;
}

.sharethis li a.shareonpinterest {
  background: #bd081c;
}

.sharethis li a.shareongmail {
  background: #e69a15;
}

.sharethis li a.shareonfb:hover {
  background: #2e4a84;
}

.sharethis li a.shareonpinterest:hover {
  background: #a50516;
}

.sharethis li a.shareongmail:hover {
  background: #d38b0e;
}

.standard-project-overview {
  text-align: center;
}

.standard-project-overview h1 {
  line-height: 1.2;
}

.wrk_detail_main {
  width: 100%;
  float: left;
  margin: 30px 0 0;
}

.project-details {
  width: 40%;
  float: left;
}

.project-slider {
  width: 56%;
  float: left;
  margin-left: 4%;
}

.project_detail {
  border: 1px solid #cccccc;
  box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.22);
  -webkit-box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.22);
  float: left;
  width: 100%;
}

.project_title {
  width: 100%;
  float: left;
  margin: 25px 0;
  padding: 0 20px;
}

.project_title h2 {
  float: left;
  font-size: 32px;
  color: #494947;
}

.project_title .video_link {
  float: right;
  color: #494947;
  font-size: 14px;
  text-transform: uppercase;
}

.project_title .video_link i {
  color: #cb333f;
}

.project_info {
  width: 100%;
  float: left;
  text-align: left;
  padding: 0 20px;
}

.project_info .info {
  width: 100%;
  float: left;
  color: #4a4947;
  font-size: 16px;
  margin-bottom: 25px;
}

.info_links {
  width: 100%;
  float: left;
}

.info_links a {
  padding: 10px 15px;
  border-radius: 3px;
  border: 1px solid #ddd;
  -webkit-box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.1);
          box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.1);
  margin: 15px 15px 0 0;
  display: inline-block;
  color: #4a4947;
  font-size: 14px;
  text-decoration: none;
  line-height: 100%;
  text-transform: uppercase;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}

.info_links a:hover {
  background: #f8f8f8;
  -webkit-box-shadow: none;
          box-shadow: none;
}

.project_bottom {
  background: #eee;
  width: 100%;
  float: left;
  text-align: center;
  padding: 25px 20px;
}

.project_bottom h3 {
  font-size: 25px;
  color: #494947;
  margin: 0 0 15px;
}

a.btn_fill {
  color: #fff;
  padding: 15px 25px;
  display: inline-block;
  font-size: 18px;
  line-height: 100%;
  border-radius: 2px;
  -webkit-border-radius: 2px;
}

a.btn_fill:hover {
  color: #fff;
}

.slider_big {
  width: 100%;
  float: left;
  position: relative;
}

.slider_big .slides .flexFill {
  padding-bottom: 60%;
}

.slider_big .pinit {
  position: absolute;
  left: 10px;
  top: 10px;
  z-index: 99;
  opacity: 0;
  transition: opacity ease-in-out 0.3s;
  -webkit-transition: opacity ease-in-out 0.3s;
  -moz-transition: opacity ease-in-out 0.3s;
}

.slider_big:hover .pinit {
  opacity: 1;
}

.slider_big .pinit i {
  color: #BD081C;
  font-size: 32px;
}

.slider_big .pinit img {
  max-width: 60px;
}

.slider_big .flexFill .img-wrap.fit img {
  position: absolute;
  max-width: 100%;
  max-height: 100%;
  width: 100%;
  height: 100%;
  margin: auto;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

a.magnify_icon {
  position: absolute;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  z-index: 95;
  cursor: pointer;
}

a.magnify_icon i {
  position: absolute;
  right: 1px;
  top: 1px;
  background: rgba(0, 0, 0, 0.5);
  text-align: center;
  width: 40px;
  height: 40px;
  line-height: 40px;
  color: #fff;
  font-size: 28px;
  z-index: 99;
  cursor: pointer;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}

a.magnify_icon i:hover {
  background: rgba(0, 0, 0, 0.65);
}

.flexslider {
  margin: 0 0 20px;
  border: none;
  border-radius: 0;
  overflow: hidden;
}

/*#slider .flex-direction-nav{ display:none;}*/
#carousel.flexslider {
  margin-top: 20px;
  position: relative;
}

#carousel.flexslider .slides > li {
  cursor: pointer;
}

#carousel.flexslider .slides > li .flexFill {
  border: 1px solid #ddd;
}

#carousel.flexslider .slides > li img {
  opacity: 0.5;
  width: auto;
}

#carousel.flexslider .slides > li.flex-active-slide img {
  opacity: 1;
}

#carousel.flexslider .flex-viewport {
  margin: 0 35px;
}

.slider_big .flex-direction-nav a.flex-prev,
.slider_big .flex-direction-nav a.flex-next {
  font-size: 0;
}

.slider_big .flex-direction-nav a.flex-prev:before {
  opacity: 1;
  content: "\f0d9";
  font-family: "FontAwesome";
  color: #fff;
  font-size: 50px;
  text-shadow: 0 0 3px rgba(0, 0, 0, 0.1);
}

.slider_big .flex-direction-nav a.flex-next:before {
  opacity: 1;
  content: "\f0da";
  font-family: "FontAwesome";
  color: #fff;
  font-size: 50px;
  text-shadow: 0 0 3px rgba(0, 0, 0, 0.1);
}

#carousel .flex-direction-nav .flex-next {
  right: 0;
}

#carousel .flex-direction-nav .flex-prev {
  left: 0;
}

#carousel .flex-direction-nav a.flex-next:before,
#carousel .flex-direction-nav a.flex-prev:before {
  color: #999;
  text-shadow: none;
}

#carousel .flex-direction-nav a.flex-next:hover:before,
#carousel .flex-direction-nav a.flex-prev:hover:before {
  color: #666;
}

#carousel .flexslider:hover .flex-direction-nav .flex-next {
  right: 0;
}

#carousel .flexslider:hover .flex-direction-nav .flex-prev {
  left: -10px;
}

#carousel .flex-direction-nav a {
  opacity: 1;
  font-size: 0px;
}

#carousel .flex-direction-nav .flex-disabled {
  opacity: 0 !important;
  z-index: 1;
  cursor: default;
}

.explore_sec {
  width: 100%;
  padding: 0 0 50px 0;
}

.explore_sec h2 {
  font-size: 36px;
  margin: 0 0 30px;
  text-align: center;
}

.explore_slider {
  width: 100%;
  display: inline-block;
  position: relative;
}

.explore_slider .explore_project:nth-child(2n+1) {
  float: left;
  text-align: right;
  margin-right: 2%;
}

.explore_slider .explore_project:nth-child(2n+1) .img_bx {
  float: right;
  right: 0;
  margin-left: 2%;
}

.explore_project span {
  float: left;
  padding: 45px 30px 0 190px;
  font-size: 24px;
  color: #4a4947;
  font-family: "AvenirBlack", Arial, Helvetica, sans-serif;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}

.explore_slider .explore_project:nth-child(2n+1) span {
  padding: 45px 190px 0 30px;
  float: right;
}

.explore_slider .explore_project:nth-child(2n+1):before {
  left: 15px;
  right: auto;
  content: "\f053";
}

.explore_slider .explore_project:before {
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  left: auto;
  right: 15px;
  width: 35px;
  content: "\f054";
  font-family: "FontAwesome";
  z-index: 99;
  color: #e86825;
  font-size: 28px;
  text-align: center;
  line-height: 158px;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}

.explore_project {
  background: #fff;
  border: 1px solid #dddddd;
  padding: 20px;
  float: right;
  width: 48%;
  min-height: 150px;
  text-align: left;
  position: relative;
  margin-bottom: 5px;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  border-radius: 4px;
  text-decoration: none;
}

.img_bx {
  width: 170px;
  float: left;
  margin-right: 20px;
  position: absolute;
}

.img_bx img {
  max-width: 100%;
  border: 1px solid #dddddd;
}

.explore_project:hover {
  -webkit-box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.2);
          box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.2);
}

.explore_project:hover span {
  color: #e86825;
}

.explore_slider .explore_project:hover:before {
  right: 10px;
}

.explore_slider .explore_project:nth-child(2n+1):hover:before {
  left: 10px;
}

.explore-projects {
  margin-bottom: 40px;
}

.explore-projects .col {
  text-align: center;
}

.explore-projects .col .flexFill {
  padding-bottom: 67%;
}

.explore-projects .col .flexFill img {
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}

.explore-projects .col .flexFill img:hover {
  opacity: 0.8;
}

.explore-projects .col > a {
  display: inline-block;
  margin-top: 25px;
  font-size: 24px;
  line-height: 1.5;
  text-decoration: none;
  font-family: "AvenirBlack", Arial, Helvetica, sans-serif;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}

@media (max-width: 900px) {
  .explore_project,
  .explore_slider .explore_project:nth-child(2n+1) {
    display: block;
    width: 48%;
    float: left;
    height: auto;
    text-align: center;
    margin: 0 1%;
  }
  .explore_project:before {
    display: none;
  }
  .explore_project .img_bx,
  .explore_slider .explore_project:nth-child(2n+1) .img_bx {
    width: 100%;
    float: none;
    position: relative;
    margin: 0;
    float: none;
  }
  .explore_project span,
  .explore_slider .explore_project:nth-child(2n+1) span {
    display: block;
    float: none;
    padding: 15px 0 0 0;
  }
}
@media (max-width: 767px) {
  .goto_worklinks {
    margin-bottom: 20px;
  }
  .wrk_detail_main {
    margin-top: 20px;
  }
  .project-details {
    width: 100%;
  }
  .project-slider {
    width: 100%;
    margin: 20px 0 0;
  }
  .explore_project,
  .explore_slider .explore_project:nth-child(2n+1) {
    width: 100%;
    float: none;
    margin: 0 0 20px 0;
  }
  .explore_sec h2 {
    font-size: 24px;
    margin: 0 0 10px;
  }
  .explore-projects .col > a {
    font-size: 21px;
    margin-top: 15px;
  }
}
@media (max-width: 479px) {
  .sharethis {
    width: 50%;
    text-align: right;
  }
  .sharethis li {
    float: none;
    display: inline-block;
    margin: 0;
  }
  .sharethis li a {
    font-size: 14px;
    height: 22px;
  }
  .sharethis li:first-child {
    width: 100%;
    font-size: 12px;
  }
  .back_link {
    width: 50%;
    white-space: nowrap;
    font-size: 12px;
  }
  a.btn_fill {
    padding: 8px 10px;
  }
}
/************************************************

FLEXIMAGE

************************************************/
/* FlexFit - Fit whole image within responsive container (ie. logos, product images) */
.flexFit {
  position: relative;
  padding: 0 0 65% 0; /* Adjust bottom for desired height */
  height: 0px;
  overflow: hidden;
}

.flexFit img,
.flexFill .img-wrap.fit img {
  position: absolute;
  max-width: 98%;
  max-height: 98%;
  height: auto;
  margin: auto;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

/* FlexFill - Fill responsive container with image (ie. banner image) */
.flexFill {
  position: relative;
  padding: 0 0 65% 0; /* Adjust bottom for desired height */
  height: 0px;
  overflow: hidden;
}

.flexFill .img-wrap {
  float: none;
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
}

.flexFill a {
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
}

.flexFill img {
  max-width: none;
  display: none;
  float: none;
  position: relative;
}

.flexFill.processed img {
  display: block !important;
}

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

START SITE SPECIFIC CSS

***************************/
body {
  background: #fff;
  color: #333;
  text-align: center;
  font-family: "AvenirBook", Arial, Helvetica, sans-serif;
  font-size: 100%;
  height: 100%;
  line-height: 1;
  -webkit-font-size-adjust: none; /* FIX: iOS Mobile Safari Font Adjustment */
}

/* Reusable Container Wrapper */
.setcontainer {
  max-width: 1320px;
  padding-left: 10px;
  padding-right: 10px;
  margin: 0 auto;
  text-align: left;
}

.page-container {
  background: #fff;
}

/* Default Heading Setup - Styling for standard content sections should be done in typography.css */
h1, h2, h3, h4, h5, h6 {
  font-weight: normal;
  cursor: default;
  font-family: "AvenirBlack", Arial, Helvetica, sans-serif;
}

h1 {
  font-size: 60px;
}

h2 {
  font-size: 48px;
}

h3 {
  font-size: 36px;
}

h4 {
  font-size: 24px;
}

h5 {
  font-size: 21px;
}

h6 {
  font-size: 18px;
}

@media (max-width: 767px) {
  h1 {
    font-size: 42px;
  }
  h2 {
    font-size: 32px;
  }
  h3 {
    font-size: 24px;
  }
  h4 {
    font-size: 21px;
  }
  h5 {
    font-size: 18px;
  }
  h6 {
    font-size: 18px;
  }
}
/***************************

HEADER

***************************/
.page-header {
  width: 100%;
  position: fixed;
  left: 0;
  top: 0;
  bottom: auto;
  z-index: 998;
  background: #fff;
  border-bottom: 1px solid #ddd;
}

.home-hero-container .page-header.stick {
  position: fixed;
  left: 0;
  top: 0;
  bottom: auto;
}

.no-stick .page-header {
  position: relative;
  left: 0;
  top: 0;
  bottom: auto;
}

.page-header .page-header-inner {
  position: relative;
}

.page-header .setcontainer {
  position: relative;
  text-align: right;
}

.page-header .header-logo {
  max-width: 218px;
  position: absolute;
  left: 10px;
  top: 10px;
}

.main-nav {
  text-align: right;
  padding: 28px 0 28px 0;
  font-family: "AvenirMedium", Arial, Helvetica, sans-serif;
}

.main-nav ul li {
  display: inline-block;
  margin-left: 20px;
}

.main-nav ul li a {
  display: inline-block;
  padding: 10px;
  text-transform: uppercase;
  color: #67646d;
  font-size: 15px;
  text-decoration: none;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  cursor: pointer;
}

.main-nav ul li a span {
  cursor: pointer;
}

.main-nav ul li a:hover {
  color: #9e9ca1;
}

.main-nav ul li {
  position: relative;
}
.main-nav ul li.has-dropdown > a:after {
  position: absolute;
  right: -2px;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  font-family: "FontAwesome";
  display: inline-block;
  content: "\f0d7";
}
@media (max-width: 1100px) {
  .main-nav ul li.has-dropdown > a:after {
    content: "\f105";
    right: 15px;
    font-size: 24px;
  }
}
.main-nav ul li.show-dropdown ul.subnav {
  opacity: 1;
  visibility: visible;
}
.main-nav ul li.sub-more ul {
  min-width: 150px;
}
.main-nav ul li.sub-additional-solutions ul {
  min-width: 250px;
}
.main-nav ul li ul.subnav {
  position: absolute;
  background-color: #fff;
  border: 1px solid #ccc;
  -webkit-box-shadow: 2px 2px 2px #ccc;
          box-shadow: 2px 2px 2px #ccc;
  border-left: 5px solid #0067a5;
  text-align: left;
  margin: 0;
  -webkit-transition: 0.3s all;
  transition: 0.3s all;
  opacity: 0;
  visibility: hidden;
  top: 64px;
}
.main-nav ul li ul.subnav li {
  padding: 0;
  margin: 0;
  white-space: nowrap;
  width: 100%;
  display: block;
}
.main-nav ul li ul.subnav li a {
  display: block;
  width: 100%;
  padding: 15px;
}
.main-nav ul li ul.subnav li a:hover {
  color: #0067a5;
  background-color: #efefef;
}

/* Standard Nav Toggle ****************************/
.nav-toggle {
  position: relative;
  display: inline-block;
  width: 30px;
  height: 30px;
  margin: 25px;
  cursor: pointer;
}

.nav-toggle span {
  margin: 0 auto;
  position: relative;
  top: 12px;
}

.nav-toggle span:before, .nav-toggle span:after {
  position: absolute;
  content: "";
}

.nav-toggle span, .nav-toggle span:before, .nav-toggle span:after {
  width: 30px;
  height: 6px;
  background-color: #67646d;
  display: block;
}

.nav-toggle.open-toggle span, .nav-toggle.open-toggle span:before, .nav-toggle.open-toggle span:after {
  background-color: #332f3d;
}

.nav-toggle span:before {
  margin-top: -12px;
}

.nav-toggle span:after {
  margin-top: 12px;
}

/* Standard Nav Toggle Animation ****************************/
.nav-toggle.open-toggle span {
  -webkit-transition-duration: 0s;
  transition-duration: 0s;
  -webkit-transition-delay: 0.2s;
  transition-delay: 0.2s;
}

.nav-toggle.open-toggle span {
  background-color: rgba(0, 0, 0, 0);
  -webkit-transition-delay: 0.2s;
  transition-delay: 0.2s;
}

.nav-toggle span:before {
  -webkit-transition-property: margin, -webkit-transform;
  transition-property: margin, -webkit-transform;
  transition-property: margin, transform;
  transition-property: margin, transform, -webkit-transform;
  -webkit-transition-duration: 0.2s;
  transition-duration: 0.2s;
  -webkit-transition-delay: 0.2s, 0s;
  transition-delay: 0.2s, 0s;
}

.nav-toggle.open-toggle span:before {
  margin-top: 0;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  -webkit-transition-delay: 0s, 0.2s;
  transition-delay: 0s, 0.2s;
}

.nav-toggle span:after {
  -webkit-transition-property: margin, -webkit-transform;
  transition-property: margin, -webkit-transform;
  transition-property: margin, transform;
  transition-property: margin, transform, -webkit-transform;
  -webkit-transition-duration: 0.2s;
  transition-duration: 0.2s;
  -webkit-transition-delay: 0.2s, 0s;
  transition-delay: 0.2s, 0s;
}

.nav-toggle.open-toggle span:after {
  margin-top: 0;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
  -webkit-transition-delay: 0s, 0.2s;
  transition-delay: 0s, 0.2s;
}

/* End of Standard Nav Toggle & Animation ****************************/
.main-nav-toggle {
  display: none;
}

.big-menu-toggle {
  position: absolute;
  right: 7px;
  top: 7px;
}

.big-menu {
  display: none;
  padding: 75px 50px;
  background: #332f3d;
  position: absolute;
  z-index: 998;
  left: 0;
  top: 100%;
  width: 100%;
  border-bottom: 1px solid #fff;
  -webkit-box-shadow: 0 2px 3px rgba(0, 0, 0, 0.2);
          box-shadow: 0 2px 3px rgba(0, 0, 0, 0.2);
  color: #fff;
}

.big-menu:before {
  display: block;
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  right: 33px;
  top: -14px;
  border-left: 14px solid transparent;
  border-right: 14px solid transparent;
  border-bottom: 14px solid #332f3d;
}

.page-header .big-menu-inner {
  text-align: left;
}

.big-menu-item {
  padding: 10px;
}

.big-menu-item .flexFill {
  margin-bottom: 20px;
  border-radius: 3px;
}

.big-menu-item .flexFill:hover img {
  opacity: 0.8;
}

.big-menu-item img {
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}

.big-menu-item > a {
  text-decoration: none;
  color: #e86825;
  font-family: "AvenirBlack", Arial, Helvetica, sans-serif;
  font-size: 28px;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}

.big-menu-item > a:hover {
  color: #ff9a65;
}

.big-menu-mobile-nav {
  display: none;
}

.links-col {
  text-align: left;
}

.links-col h4 {
  margin-bottom: 15px;
}

.links-col ul li a {
  display: block;
  font-size: 24px;
  padding: 15px 15px 15px 0;
  line-height: 1.2;
  color: #c1c0c4;
  text-decoration: none;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}

.links-col ul li a:hover {
  color: #8dc63f;
}

.links-col ul li:last-child a {
  padding-bottom: 0;
}

.featured-link {
  text-align: center;
}

.featured-image-container {
  background-size: cover !important;
  margin-bottom: 20px;
  border-radius: 3px;
  position: relative;
  overflow: hidden;
  text-align: center;
  border: 1px solid rgba(255, 255, 255, 0.3);
}

.featured-image-container a {
  display: block;
  height: 200px;
}

.featured-image-container a:after {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background: #fff;
  opacity: 0;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  display: block;
  content: "";
}

.featured-image-container:hover a:after {
  opacity: 0.1;
}

.featured-link > a {
  display: inline-block;
  font-size: 24px;
  color: #fff;
  font-family: "AvenirBlack", Arial, Helvetica, sans-serif;
  text-decoration: none;
  position: relative;
  z-index: 10;
  text-align: center;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}

.featured-link > a:hover {
  color: #8dc63f;
}

.featured-image-container:hover + a {
  color: #8dc63f;
}

.careers-featured-link .featured-image-container {
  background: url("/pub/design/jm-careers.jpg") no-repeat center center;
}

.contact-featured-link .featured-image-container {
  background: url("/pub/design/jm-contact.jpg") no-repeat center center;
}

.big-menu .clearfix {
  display: none;
}

.page-header-inner {
  padding-right: 92px;
  padding-left: 92px;
}

@media (max-width: 1484px) {
  .page-header-inner {
    padding-left: 0;
  }
  .page-header .header-logo {
    left: 4%;
  }
}
@media (max-width: 1400px) {
  .page-header .header-logo {
    left: 3.5%;
  }
}
@media (max-width: 1375px) {
  .page-header .header-logo {
    left: 2.5%;
  }
}
@media (max-width: 1350px) {
  .page-header .header-logo {
    left: 1.5%;
  }
}
@media (max-width: 1320px) {
  .page-header .header-logo {
    left: 10px;
  }
}
@media (max-width: 1200px) {
  .featured-image-container a {
    height: 150px;
  }
  .featured-link > a {
    font-size: 21px;
  }
}
@media (max-width: 1120px) {
  /*
  .main-nav-toggle {
      display:inline-block;
  }
  */
  .main-nav {
    min-height: 91px;
    /*
    display:none;
    padding:0;
    text-align:center;
    position:absolute;
    left:0;
    top:100%;
    width:100%;
    background:$textcolor;
    box-shadow:0 1px 3px rgba(0,0,0,0.25);
    */
  }
  .main-nav ul {
    display: none;
  }
  .main-nav ul li {
    display: block;
    margin: 0;
    border-top: 1px solid #7e7b85;
  }
  .main-nav ul li a {
    padding: 12px;
    display: block;
    color: #fff;
  }
  .main-nav ul li a:hover {
    color: #fff;
    background: #7e7b85;
  }
  .big-menu-item,
  .big-menu-item:first-child {
    width: 49.2%;
    margin: 0;
    padding: 20px;
  }
}
@media (max-width: 768px) {
  .links-col ul li a {
    font-size: 16px;
    line-height: 1.3;
  }
}
@media (max-width: 767px) {
  .big-menu {
    padding: 20px;
    /*height:450px;
    overflow-y:scroll;
    */
  }
  .links-col.col {
    text-align: left;
    float: left;
    width: 38%;
  }
  .links-col.col:first-child {
    width: 60%;
  }
  .links-col h4 {
    margin-bottom: 15px;
  }
  .links-col ul li {
    margin-bottom: 15px;
  }
  .links-col ul li:last-child {
    margin-bottom: 0;
  }
  .links-col ul li a {
    display: block;
    font-size: 16px;
    padding: 3px 3px 3px 0;
    line-height: 1.2;
    color: #c1c0c4;
    text-decoration: none;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
  }
  .featured-image-container {
    display: none;
  }
  .big-menu .clearfix {
    display: block;
    padding-bottom: 20px;
  }
  .featured-link {
    float: none;
    width: 100%;
    margin: 0;
    padding: 5px 0;
  }
  .featured-link:before {
    clear: both;
    display: block;
    content: "";
  }
  .featured-link:first-of-type {
    padding-top: 25px;
  }
  .featured-link > a {
    display: block;
    font-family: "AvenirMedium", Arial, Helvetica, sans-serif;
    text-transform: uppercase;
    text-decoration: none;
    border-radius: 3px;
    border: none;
    -webkit-box-shadow: none;
            box-shadow: none;
    font-size: 18px;
    padding: 16px 20px;
    line-height: 1;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
  }
  .careers-featured-link > a {
    background: #8dc63f;
    color: #fff;
  }
  .careers-featured-link > a:hover {
    background: #9bd749;
    color: #fff;
  }
  .contact-featured-link > a {
    background: #e86825;
    color: #fff;
  }
  .contact-featured-link > a:hover {
    background: #ff9a65;
    color: #fff;
  }
}
@media (max-width: 480px) {
  /*.links-col.col{
      width:100%;
      text-align:left;
      ul{
          column-count:2;
          text-align:left;


          li a{
              font-size:13px;
              width:100%;
          }

      }
      &:first-child{
          width:100%;
      }

  }*/
}
@media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: landscape) {
  .links-col h4 {
    margin-bottom: 5px;
  }
  .links-col ul li {
    margin-bottom: 2px;
  }
  .links-col ul li:last-child {
    margin-bottom: 0;
  }
  .featured-link {
    float: none;
    display: inline-block;
    width: 46%;
    margin-right: 10px;
  }
}
/***************************

FOOTER

***************************/
footer {
  text-align: left;
}

.footer-top {
  background: #332f3d;
  padding-top: 70px;
  padding-bottom: 70px;
  color: #fff;
}
@media (max-width: 768px) {
  .footer-top {
    padding-top: 40px;
    padding-bottom: 40px;
  }
}
@media (max-width: 480px) {
  .footer-top {
    padding-top: 30px;
    padding-bottom: 30px;
  }
}

.footer-top a {
  color: #8dc63f;
  text-decoration: none;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}

.footer-top a:hover {
  color: #9bd749;
}

.footer-top-header {
  margin-bottom: 50px;
}

.footer-top h2 {
  font-size: 120px;
}

.footer-top .social-links {
  text-align: right;
  margin-top: 25px;
}

.footer-top .social-links li {
  display: inline-block;
  margin: 0 0 0 15px;
}

.footer-top .social-links li:first-child {
  margin-left: 0;
}

.footer-top .social-links li a {
  display: block;
  width: 48px;
  height: 48px;
  line-height: 48px;
  text-align: center;
  color: #332f3d;
  background: #fff;
  border-radius: 50%;
  font-size: 0;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}

.footer-top .social-links li a:before {
  font-size: 24px;
}

.footer-top .social-links li a:hover {
  background: #8dc63f;
}

.footer-top h3 {
  padding: 15px 0 8px 20px;
  border-left: 7px solid #8dc63f;
  margin-bottom: 25px;
}

.footer-form {
  padding-right: 60px;
}

.footer-form .form-wrapper input[type=text],
.footer-form .form-wrapper textarea {
  border: none;
  border-radius: 0;
}

#wrapper-contactus .hhError {
  margin: 10px 0;
  padding: 10px 10px 10px 35px;
  color: #fff;
  background: #D91E18;
  font-weight: bold;
  position: relative;
}

#wrapper-contactus .hhError:before {
  display: inline-block;
  content: "\f06a";
  font-family: "FontAwesome";
  color: #fff;
  font-size: 18px;
  position: absolute;
  left: 10px;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}

.footer-locations h4 {
  margin: 20px 0 5px 0;
}

.footer-locations h4 a {
  display: inline-block;
  margin-left: 10px;
  font-size: 16px;
  font-family: "AvenirBook", Arial, Helvetica, sans-serif;
  color: #8dc63f;
}

.footer-locations .col p {
  font-size: 16px;
  line-height: 1.5;
}

.footer-locations .row .col:first-child {
  padding-right: 10px;
}

.footer-locations .row .col:last-child {
  padding-left: 10px;
}

.footer-bottom {
  padding-top: 40px;
  padding-bottom: 40px;
  color: #67646d;
  background: #fff;
}
@media (max-width: 768px) {
  .footer-bottom {
    padding-top: 30px;
    padding-bottom: 30px;
  }
}
@media (max-width: 480px) {
  .footer-bottom {
    padding-top: 20px;
    padding-bottom: 20px;
  }
}

footer ul li a span {
  cursor: pointer;
}

.footer-bottom a {
  color: #67646d;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  text-decoration: none;
}

.footer-bottom a:hover {
  color: #9e9ca1;
}

.footer-logo {
  display: block;
  max-width: 300px;
  margin-bottom: 10px;
}

.footer-bottom-left p {
  font-size: 14px;
  line-height: 1.3;
}

.footer-bottom-left p:nth-of-type(1) {
  margin-bottom: 10px;
}

.footer-bottom-left p a {
  display: inline-block;
  margin-right: 5px;
  text-decoration: none;
}

.footer-bottom-left p a.credit-link {
  margin: 0 0 0 5px;
  padding-left: 10px;
  border-left: 1px solid #67646d;
}

.footer-bottom-right {
  padding-left: 30px;
}

.footer-bottom-right .row .col:nth-child(1) {
  color: #8dc63f;
}

.footer-bottom-right .row .col:nth-child(2) {
  color: #b33480;
}

.footer-bottom-right .row .col:nth-child(3) {
  color: #0067a5;
}

.footer-bottom-right ul li {
  margin-top: 15px;
}

@media (max-width: 1024px) {
  .footer-top h2 {
    font-size: 90px;
  }
  #wrapper-contactus .col {
    vertical-align: bottom;
  }
  .footer-locations h4 a {
    font-size: 14px;
  }
}
@media (max-width: 768px) {
  .footer-top h2 {
    font-size: 78px;
  }
  .footer-locations h4 a {
    margin-left: 0;
  }
  .footer-bottom-left,
  .footer-bottom-right {
    width: 100%;
    float: none;
    margin: 0;
    padding: 15px 0;
  }
  .footer-bottom-left p {
    font-size: 12px;
  }
}
@media (max-width: 767px) {
  .footer-top-header {
    margin-bottom: 0px;
  }
  .footer-top h2 {
    font-size: 70px;
    text-align: center;
  }
  .footer-top .social-links {
    text-align: left;
    margin-top: 0;
  }
  .footer-form,
  .footer-locations {
    width: 100%;
    float: none;
    margin: 0;
    padding: 15px 0;
  }
}
@media (max-width: 480px) {
  .footer-locations .row .col:first-child {
    padding-right: 0;
  }
  .footer-locations .row .col:last-child {
    padding-left: 0;
  }
  .footer-top .social-links {
    text-align: center;
  }
  .footer-top .social-links li {
    margin-left: 10px;
  }
  .footer-top .social-links li a {
    width: 42px;
    height: 42px;
    line-height: 42px;
  }
  .footer-top .social-links li a:before {
    font-size: 21px;
  }
}
/***************************

HOMEPAGE

***************************/
.home-hero-container {
  width: 100%;
  height: 100vh;
  overflow: hidden;
}

.home-hero {
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  /*background-attachment:scroll;*/
  position: fixed;
  z-index: -1;
}

.home-hero-container .page-header {
  position: absolute;
  top: auto;
  left: 0;
  bottom: 0;
  width: 100%;
}

.home-content {
  text-align: center;
  padding: 8% 0 6% 0;
}

.home-content a {
  text-decoration: none;
  display: inline-block;
  padding: 0 3px;
  border-bottom: 2px dotted;
  line-height: 1.3;
}

.home-content a:hover {
  text-decoration: none;
}

#wrapper-view {
  position: relative;
  background: #fff;
  z-index: 1;
}

/*
@media (min-width:1025px) {
    .home-hero {
        width:100%;
        height:100%;
        -webkit-background-size:cover;
        background-size:cover;
        background-position:center center;
        background-repeat:no-repeat;
        back
    }
}
*/
.tablet-check {
  display: none;
}

@media (max-width: 1024px) {
  .home-hero-container {
    height: 650px;
    position: relative;
  }
  .tablet-check {
    display: block;
  }
  .home-content {
    padding: 60px 0;
  }
  .home-content.hcontent .bigheading {
    font-size: 110px;
  }
  .home-content.hcontent .bigscriptheading {
    font-size: 135px;
  }
}
@media (max-width: 768px) {
  .home-hero-container {
    height: 906px;
  }
  .home-content.hcontent .bigheading {
    font-size: 85px;
  }
  .home-content.hcontent .bigscriptheading {
    font-size: 105px;
  }
  .home-bottom-content.hcontent a.button.button-lg {
    font-size: 16px;
    margin: 0 0 10px;
    padding: 12px 18px;
  }
}
@media (max-width: 480px) {
  .home-hero-container {
    height: 550px;
  }
  .home-content {
    padding: 40px 0 0 0;
  }
  .home-content.hcontent .bigheading {
    font-size: 60px;
  }
  .home-content.hcontent .bigscriptheading {
    font-size: 85px;
    display: block;
  }
  .home-bottom-content.hcontent a.button.button-lg {
    font-size: 18px;
    margin: 0 0 10px;
    padding: 12px 18px;
  }
}
ul.paging {
  display: block;
  width: 100%;
  margin: 10px auto;
  text-align: center;
}
ul.paging li {
  display: inline-block;
  color: #e86825;
}
ul.paging li a {
  display: inline-block;
  color: #e86825;
  border: 1px solid #e86825;
  padding: 5px 10px;
  margin: 0 5px;
  text-decoration: none;
  -webkit-transition: 0.2s all;
  transition: 0.2s all;
}
ul.paging li a:hover {
  opacity: 0.85;
  background-color: #e86825;
  color: #fff;
}
ul.paging li span {
  display: inline-block;
  color: #e86825;
  border: 1px solid #e86825;
  padding: 5px 10px;
  margin: 0 5px;
  text-decoration: none;
  background-color: #e86825;
  color: #fff;
}