/*! `Bootstrap 4` Bootstrap 4 theme */
@import url(https://fonts.googleapis.com/css?family=Open+Sans:200,300,400,700);
@import url(https://fonts.googleapis.com/css?family=Oswald:200,300,400,700);
@import url("https://fonts.googleapis.com/css?family=Roboto:400,500,700&display=swap");
/*=======================================================
*            Installation Guide menu styling            *
=======================================================*/
.instruction-nav i,
.instruction-nav a {
  -webkit-transition: all .25s ease-in-out;
  -o-transition: all .25s ease-in-out;
  transition: all .25s ease-in-out; }

.instruction-nav i {
  opacity: 0; }

.instruction-nav a.active i {
  display: none; }

.instruction-nav .nav-item:hover i,
.instruction-nav .list-group-item:hover i {
  opacity: 1; }

.instruction-nav .fa-angle-left,
.instruction-nav .nav-item:hover .fa-angle-right,
.instruction-nav .list-group-item:hover .fa-angle-right {
  -webkit-transform: translateX(0.5rem);
       -o-transform: translateX(0.5rem);
          transform: translateX(0.5rem); }

.instruction-nav .fa-angle-right,
.instruction-nav .nav-item:hover .fa-angle-left,
.instruction-nav .list-group-item:hover .fa-angle-left {
  -webkit-transform: translateX(-0.5rem);
       -o-transform: translateX(-0.5rem);
          transform: translateX(-0.5rem); }

/*=====  End of Installation Guide menu styling  ======*/
.navbar-nav .nav-link, .btn {
  font-family: "Roboto", sans-serif;
  font-weight: 500; }

.hero-slide-content {
  background-color: rgba(0, 0, 0, 0.33); }

.hero-slide-content .btn a {
  color: unset;
  text-decoration: none; }

.card .card-top-image {
  max-width: 100%;
  -webkit-flex-shrink: 0;
  -ms-flex-negative: 0;
  flex-shrink: 0; }

.varbase-heroslider-media
.node--type-varbase-heroslider-media
.hero-slide-content-wrapper {
  background-color: rgba(0, 0, 0, 0.5);
  background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.75)), to(rgba(0, 0, 0, 0.5)));
  background: -webkit-linear-gradient(rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0.5));
  background: -o-linear-gradient(rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0.5));
  background: linear-gradient(rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0.5)); }

.hero-slide-content .node-title {
  font-size: 2.5rem !important; }

@media (min-width: 576px) {
  .hero-slide-content .node-title {
    font-size: 2.75rem !important; } }

@media (min-width: 768px) {
  .hero-slide-content .node-title {
    font-size: 3rem !important; } }

@media (min-width: 992px) {
  .hero-slide-content .node-title {
    font-size: 3.25rem !important; } }

@media (min-width: 1200px) {
  .hero-slide-content .node-title {
    font-size: 3.5rem !important; } }

#icl .bg-img {
  background-image: url("https://cedarexperts.com/wp-content/uploads/Stainless-Steel-Railing-2-525x700.jpg"); }

#pac-lumber .bg-img {
  background-image: url("https://static.wixstatic.com/media/b7cbba_4b60ec6e737843b4858eac8bafc53e84~mv2.jpeg"); }

.card-style-1 .title {
  font-weight: bold; }

.card-style-1 .title,
.card-style-1 .footer,
.card-style-1 .content,
.card-style-1 .description {
  z-index: 1; }

.card-style-1 .card {
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(0, 0, 0, 0.33); }

.bg-img {
  background-position: center center;
  -webkit-background-size: cover;
          background-size: cover;
  background-repeat: no-repeat; }

.bg-img,
.bg-overlay {
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%; }

/* You can include this on any <div> for styling. Add Bootstrap 'position-absolute' class to <div>.
 * e.g. <div class="bg-overlay position-absolute"></div>
 */
.bg-overlay {
  background-color: #111;
  opacity: 0.66; }

/* You can include this on any <div> for styling. Add Bootstrap 'position-absolute' class to <div>.
 * e.g. <div class="bg-faded position-absolute"></div>
 */
.bg-faded {
  background-color: rgba(0, 0, 0, 0.33); }

.bg-faded-dk {
  background-color: rgba(0, 0, 0, 0.66); }

.bg-fixed {
  background-position: center;
  background-attachment: fixed; }

/* alert with dark text */
.alert-info,
.alert-primary,
.alert-warning.text-dark,
.text-shadow-lt {
  text-shadow: 0px 1px 2px rgba(255, 255, 255, 0.6); }

.text-shadow-dk {
  text-shadow: 0px -1px 0px rgba(48, 48, 48, 0.5); }

.p-hero {
  padding: 60px; }

.vh-25 {
  height: 25vh; }

.vh-33 {
  height: 33vh; }

.vh-50 {
  height: 50vh; }

.vh-66 {
  height: 66vh; }

.vh-75 {
  height: 75vh; }

.vh-100 {
  height: 100vh; }

.hero-slide-content {
  background-color: rgba(0, 0, 0, 0.66); }

.z-depth-0 {
  -webkit-box-shadow: none !important;
          box-shadow: none !important; }

/* 2dp elevation modified*/
.z-depth-1 {
  -webkit-box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.12), 0 1px 5px 0 rgba(0, 0, 0, 0.2);
          box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.12), 0 1px 5px 0 rgba(0, 0, 0, 0.2); }

.z-depth-1-half {
  -webkit-box-shadow: 0 3px 3px 0 rgba(0, 0, 0, 0.14), 0 1px 7px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -1px rgba(0, 0, 0, 0.2);
          box-shadow: 0 3px 3px 0 rgba(0, 0, 0, 0.14), 0 1px 7px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -1px rgba(0, 0, 0, 0.2); }

/* 6dp elevation modified*/
.z-depth-2 {
  -webkit-box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
          box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.3); }

/* 12dp elevation modified*/
.z-depth-3 {
  -webkit-box-shadow: 0 8px 17px 2px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12), 0 5px 5px -3px rgba(0, 0, 0, 0.2);
          box-shadow: 0 8px 17px 2px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12), 0 5px 5px -3px rgba(0, 0, 0, 0.2); }

/* 16dp elevation */
.z-depth-4 {
  -webkit-box-shadow: 0 16px 24px 2px rgba(0, 0, 0, 0.14), 0 6px 30px 5px rgba(0, 0, 0, 0.12), 0 8px 10px -7px rgba(0, 0, 0, 0.2);
          box-shadow: 0 16px 24px 2px rgba(0, 0, 0, 0.14), 0 6px 30px 5px rgba(0, 0, 0, 0.12), 0 8px 10px -7px rgba(0, 0, 0, 0.2); }

/* 24dp elevation */
.hero-slide-content,
.z-depth-5 {
  -webkit-box-shadow: 0 24px 38px 3px rgba(0, 0, 0, 0.14), 0 9px 46px 8px rgba(0, 0, 0, 0.12), 0 11px 15px -7px rgba(0, 0, 0, 0.2);
          box-shadow: 0 24px 38px 3px rgba(0, 0, 0, 0.14), 0 9px 46px 8px rgba(0, 0, 0, 0.12), 0 11px 15px -7px rgba(0, 0, 0, 0.2); }

/* Universal transition */
.transition {
  -webkit-transition: all 0.25s ease-in-out;
  -o-transition: all 0.25s ease-in-out;
  transition: all 0.25s ease-in-out; }

/* Z-level transition for hover effect */
.z-factor:hover,
.z-factor:focus,
.z-factor-fixed {
  -webkit-transform: translateY(-0.25rem);
       -o-transform: translateY(-0.25rem);
          transform: translateY(-0.25rem); }

/* 6dp elevation modified*/
figure .figure-img {
  -webkit-transition: all 0.25s ease-in-out;
  -o-transition: all 0.25s ease-in-out;
  transition: all 0.25s ease-in-out; }

figure:hover .figure-img,
figure:focus .figure-img {
  -webkit-transform: translateY(-0.25rem);
       -o-transform: translateY(-0.25rem);
          transform: translateY(-0.25rem);
  -webkit-box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
          box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.3); }

.z-2-hover,
.z-2-hover {
  -webkit-transition: all 0.25s ease-in-out;
  -o-transition: all 0.25s ease-in-out;
  transition: all 0.25s ease-in-out; }
  .z-2-hover:hover, .z-2-hover:focus,
  .z-2-hover:hover,
  .z-2-hover:focus {
    -webkit-transform: translateY(-0.25rem);
         -o-transform: translateY(-0.25rem);
            transform: translateY(-0.25rem);
    -webkit-box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
            box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.3); }

/* 12dp elevation modified*/
.z-3-hover,
.z-3-hover {
  -webkit-transition: all 0.25s ease-in-out;
  -o-transition: all 0.25s ease-in-out;
  transition: all 0.25s ease-in-out; }
  .z-3-hover:hover, .z-3-hover:focus,
  .z-3-hover:hover,
  .z-3-hover:focus {
    -webkit-transform: translateY(-0.25rem);
         -o-transform: translateY(-0.25rem);
            transform: translateY(-0.25rem);
    -webkit-box-shadow: 0 8px 17px 2px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12), 0 5px 5px -3px rgba(0, 0, 0, 0.2);
            box-shadow: 0 8px 17px 2px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12), 0 5px 5px -3px rgba(0, 0, 0, 0.2); }

.z-1-3 {
  -webkit-transition: all 0.25s ease-in-out;
  -o-transition: all 0.25s ease-in-out;
  transition: all 0.25s ease-in-out;
  -webkit-box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.12), 0 1px 5px 0 rgba(0, 0, 0, 0.2);
          box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.12), 0 1px 5px 0 rgba(0, 0, 0, 0.2); }
  .z-1-3:hover, .z-1-3:focus {
    -webkit-transform: translateY(-0.25rem);
         -o-transform: translateY(-0.25rem);
            transform: translateY(-0.25rem);
    -webkit-box-shadow: 0 8px 17px 2px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12), 0 5px 5px -3px rgba(0, 0, 0, 0.2);
            box-shadow: 0 8px 17px 2px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12), 0 5px 5px -3px rgba(0, 0, 0, 0.2); }

.z-2-4 {
  -webkit-transition: all 0.25s ease-in-out;
  -o-transition: all 0.25s ease-in-out;
  transition: all 0.25s ease-in-out;
  -webkit-box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
          box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.3); }
  .z-2-4:hover, .z-2-4:focus {
    -webkit-transform: translateY(-0.25rem);
         -o-transform: translateY(-0.25rem);
            transform: translateY(-0.25rem);
    -webkit-box-shadow: 0 16px 24px 2px rgba(0, 0, 0, 0.14), 0 6px 30px 5px rgba(0, 0, 0, 0.12), 0 8px 10px -7px rgba(0, 0, 0, 0.2);
            box-shadow: 0 16px 24px 2px rgba(0, 0, 0, 0.14), 0 6px 30px 5px rgba(0, 0, 0, 0.12), 0 8px 10px -7px rgba(0, 0, 0, 0.2); }
