/* html { overflow-x: hidden; }

body {
     border-top: 5px solid gray;
     margin: 0px auto;
     max-width: 1140px;
} */

.home-banner {
     font-family: 'Roboto Condensed';
     position: relative;
     margin: 0 auto;

     /* Normal width  &  Keep scaling images/pans past the 1140 */
     width: 100%;
     width: 100vw;
     max-width: 2000px;

     /* Centers Pans while it keeps scaling past the 1140 */
     left: 50%;
     -webkit-transform: translateX(-50%);
     -ms-transform: translateX(-50%);
     transform: translateX(-50%);

     /* overflow: hidden; needs to scale, hidden wont work right */
     /* height: auto; */
     /* min-height: 0; */
     /* max-height: 700px; */
}

.home-banner .banner-pan { display: none; position: relative;}

.home-banner .h1-pan {
     color: #056839;
     font-size: 68px;
     font-size: 3.4vw;

     font-weight: 700;
     letter-spacing: -0.01em;
     line-height: 0.85em;

     position: relative;
     opacity: 0;
}
.home-banner .h1-pan span { font-size: 20px; font-size: 0.8vw; line-height: 0; }
.home-banner .orange-text, .home-banner .h3-pan {
     color: #242424;
     font-size: 43px;
     font-size: 2.15vw;

     font-weight:400;
     letter-spacing: -0.05em;

     margin-top: 0.1em;
     margin-bottom: 0.1em;

     /* display: inline-block; dont use this, breaks mobile */
     float: left;
     position: relative;
     opacity: 0;
}
.home-banner .orange-text { color: #ff9100; }

.home-banner .h4-text-box {
     font-family: 'Roboto';
     font-size: 19px;
     font-size: 0.95vw;
     width: 47%;
     color: #707070;
     font-weight: 300;
     line-height: 1.35em;
     position: relative;
     opacity: 0;
}

.home-banner a.more-info-btn {
     font-family: 'Roboto';
     font-size: 20px;
     font-size: 1.0vw;

     color: #242424;
     background-color: #ff9100;
     padding: 5px 15px;
     padding: 0.2vw 0.45vw;
     text-decoration: none;
     display: inline-block;
     margin-top: 1.5%;
     position: relative;
     opacity: 0;
}
.home-banner .banner-image {
     display: block;
     width: 100%;
}

.home-banner .left-text {
     position: absolute;
     width: 30%;
     left: 22%;
     top: 50%;
     -webkit-transform: translateY(-50%);
     -ms-transform: translateY(-50%);
     transform: translateY(-50%);
     /* border: 1px solid black; */
}

.home-banner .bgr-image {
     display: block;
     position: absolute;
     top: 0; left: 0;
     width: 100%; height: 100%;

     /* background-image: url("images/pan_1.jpg"); - set in JS */
     background-repeat: no-repeat;
     background-position: top left;
     background-size: 100% auto;
     z-index: -1;
}

/**********************/
/* Banner Pan Buttons */
.home-banner .pans-nav {
     position: absolute;

     bottom: 0;
     line-height: 0;
     z-index: 10;

     left: 50%;
     -webkit-transform: translateX(-50%);
     -ms-transform: translateX(-50%);
     transform: translateX(-50%);
}
.home-banner .pan-btns {
     position: relative;
     display: inline-block;
     margin: 0 auto;
     margin-left: 5px;
     margin-right: 5px;
     height: 20px;
     width: 20px;
     cursor: pointer;
}
.home-banner .pan-btns:after {
     content: "";
     position: absolute;

     top: 50%;
     -webkit-transform: translateY(-50%);
     -ms-transform: translateY(-50%);
     transform: translateY(-50%);

     left: 50%;
     -webkit-transform: translateX(-50%);
     -ms-transform: translateX(-50%);
     transform: translateX(-50%);

     border-radius: 50%;
     height: 8px;
     width: 8px;
     margin-top: -4px;
     background-color: #bbb;
}
.home-banner .btn-hover:hover:after { background-color: #666; }
.home-banner .active-pan-btn:after { background-color: #333; }


          /********************/
          /*   Mobile adjust  */

/* Set pixels at max size of image */
@media (min-width: 2000px) {
     .home-banner .h1-pan { font-size: 68px; }
     .home-banner .h1-pan span { font-size: 20px; }
     .home-banner .orange-text, .home-banner .h3-pan { font-size: 43px; }
     .home-banner .h4-text-box { font-size: 19px;  }
     .home-banner a.more-info-btn { font-size: 20px; }
}
@media (max-width: 600px) {

     /* attempt to adjust on smaller devices */
     body { overflow-x: hidden; }
     .home-banner { width: 100%; min-width: 500px; margin-top: 0.75em !important; margin-bottom: 0 !important; }
     .home-banner .h1-pan { font-size: 1.1em; line-height: 0.9em; }
     .home-banner .h1-pan span { font-size: 0.2em; }
     .home-banner .orange-text, .home-banner .h3-pan { font-size: 0.8em; }
     .home-banner .h4-text-box { font-size: 0.6em; width: 100%; display: inline-block; }
     .home-banner a.more-info-btn { font-size: 0.7em; float: left; padding: 2px 7px; }
     .home-banner .left-text { width: 28%; }
     .home-banner .banner-image,.home-banner .bgr-image { width: 80%; margin-left: 15%; }

     /* temp text may delete... */
     /* .temp-text { font-size:8px; }  */
}
@media (max-width: 500px) {.home-banner .pans-nav { display: none; }}

/* temp text may delete... */
/* .temp-text div {
     margin-top:2em;
     margin-left:15px;
     margin-right:15px;

}
.temp-text h1-pan { margin:0; } */