/*TEMP CHROME SPECIFIC*/
.indexbanner .billboards-container,
.bbccontainerparent  {
    height:auto; /*71vh;*/
}
.bbccontainerparent .indexbanner .billboards-container {
    height:100%;
}

/*8-24-19 hide mobile styles at startup*/
.billboarditemimagewrapper .tablet,
.billboarditemimagewrapper .phone,
.billboarditemimagewrapper .mobile {
    display:none;
}

/*if a physical image exists, keep it in bounds*/
.billboarditemimagewrapper img {
     max-width: 100%;
 }

@media (max-width: 991px) {
    .indexbanner .billboards-container,
    .bbccontainerparent {
        /*height:75vh;*/
    }
    .bbccontainerparent .indexbanner .billboards-container {
        height:100%;
    }
}

.banner-certificate {
    position:absolute;
    
    right:10px;
    bottom:10px;
    
    background-repeat: no-repeat;   
    background-size: contain;    
    background-position: right bottom;
   
}
.banner-certificate.madeinusa {
    width:90px;
    min-height: 123px; /*based on original size*/
    background-image: url(../graphics/made-in-usa-icon@2x.png);
}
.banner-certificate.three-m-certified {
    width: 125px;
    min-height: 48px; /*based on original size*/
    background-image: url(../graphics/3m-certified-icon@2x.png);
}

@media (max-width: 479px) {
    .banner-certificate  {
        /*right:10px;*/
    }
    .banner-certificate.madeinusa {
        width:70px;
    }
    .banner-certificate.three-m-certified {
        width: 115px;
    }
}
@media (min-width: 1760px) {
    .banner-certificate.madeinusa {
        width:105px;
    }
    .banner-certificate.three-m-certified {
        width: 160px;
    }
}

/*END SPECIAL CLASS*/

.bbccontainerparent {
    width:100%;
}

.bannerarrow {
    position: absolute;
    top: 0;
    width: 100px;
    height: 100%;
    
    cursor:pointer;
}
.bannerarrow.arrowleft {
    left:0;
}
.bannerarrow.arrowright {
    right:0;
}
.bannerarrow .arrow {
    background-repeat: no-repeat;   
    background-size: contain;
    width: 26px;
    height: 53px;
}
.bannerarrow.arrowleft .arrow {
    background-position: right center;
   background-image: url(../graphics/left-arrow-off.svg);
}
.bannerarrow.arrowleft .arrow:hover {
   background-image: url(../graphics/left-arrow-over.svg);
}
.bannerarrow.arrowright .arrow {
    background-position: left center;
   background-image: url(../graphics/right-arrow-off.svg);
}
.bannerarrow.arrowright .arrow:hover {
    background-position: left center;
   background-image: url(../graphics/right-arrow-over.svg);
}
@media (max-width: 776px) {
    .bannerarrow {
        display:none;
    }
}

/*A simple container when we need one*/
.bannerwrapper {
    position:relative;
    width:100%;
    height:100%;
}

/*AS Popup*/

.bannermodal .billboards-container  {
    height:100vh;
}

/* The Modal */
.bannermodal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */

    /*if we change vh to 71 then reapply this padding*/
    /*padding-top: 100px;*/ /* Location of the box */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
}
.bannermodal.prepare:not(.show) {
    z-index:-1;
    visibility:hidden;
    display:block;
    pointer-events:none;
    opacity:0.0;
}
.bannermodal.show {
    display:block;
    z-index:2200; /* Sit on top */
}
.bannermodal .bannercaption {
    position:absolute;
    top:0;
    left:0;
    width:100%;
    
    text-align: center;
    color: #fff;
    font-weight: 700;
    
    height: 113px;
    
    padding: 40px 10px 0;
    
    line-height: 1.1;
    
    font-size: 32px;
    
    background:url(../graphics/gallery-gradient.png) repeat-x;
}


.bannermodal-trigger {
    cursor:pointer;
}
.bannermodal .close {
    position: absolute;
    top: 15px;
    right: 35px;
    color: #f1f1f1;
    font-size: 40px;
    font-weight: bold;
    transition: 0.3s;
}

.bannermodal .close:hover,
.bannermodal .close:focus {
    color: #bbb;
    text-decoration: none;
    cursor: pointer;
}
/* Add Animation - Zoom in the Modal  */
.bannermodal.show .bannermodal-content, .bannerarrow {
    animation-name: zoom;
    animation-duration: 0.6s;
}
@keyframes zoom {
    from {transform:scale(0)}
    to {transform:scale(1)}
}
@media (max-width: 560px) {
    .bannermodal .close {
        top: 0px;
        right: 15px;
    }
    .bannercaption.flexcolumn {
        /*-webkit-justify-content: flex-end;
        -ms-flex-pack: flex-end;
        justify-content: flex-end;*/
    }
}
/*End Popup definitions*/

.rsMinW .rsBullets {
    /*left:50%;
    transform: translate(-50%,0);*/
    
    width: 100%;
    right: 0 !important;
    
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;

}
.rsMinW .rsBullet {
     padding:6px 13px 7px 4px !important; 
}

/*minimum required CSS for vertical alignment*/
.billboards-container .inner-secondary {
	height: 100%;
	text-align:center;
}
.billboards-container .inner-secondary .imghelper {
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}
.billboards-container .inner-secondary img {
	vertical-align: middle;
	/*if necessary, include display:inline-block*/
}
/*end vertical alignment*/

#billboards-container .billboarditem.mobile {
/*display:none;*/
}
.mainonly {
	display: block;
}
#billboards-container .billboarditem.main {
/*display:block;*/
}
._m {
	display: none;
}

/* SOME FONT STYLES */

#billboards-container.bannerbox-billboard h1,
.billboards-container.bannerbox-billboard h1{
	font-size: 3.3125rem;
	font-weight: 700;
	text-align: center;
	line-height: 1.2;
}
#billboards-container.bannerbox-billboard h1 + p,
.billboards-container.bannerbox-billboard h1 + p{
	margin-top: 38px;
}

/* EXTRA FOR SECTION CONTAINERS ONLY 
not sure of the value of this */
#billboards-container.section, .billboards-container.section {
	height: 544px;
}
.billboards-container.section .billboarditemimagewrapper .button-container {
	margin-top: 65px;
	text-align: center;
}
/*we have another imgwrapper inside bannerbox that has different styles*/
.billboards-container.section .billboarditem .billboarditemimagewrapper .imgwrapper {
	text-align: center;/*padding-top: 45px;*/ /*keep near vertical center*/
}

/*******************************************
BILLBOARD
********************************************/
#billboards-container, .billboards-container {
	position: relative;
	width: 100%;
	overflow: hidden;
	margin-top: 0px;
	margin-bottom: 0px;
	height: 100%; /*514px 450px; 829px*/
	-webkit-transition: height 250ms ease-in-out;
	-o-transition: height 250ms ease-in-out;
	-moz-transition: height 250ms ease-in-out;
	transition: height 250ms ease-in-out;/*only height is begin utilized right now*/
	/*-webkit-transition: height 250ms ease-in-out, visibility 150ms ease-in-out, opacity 150ms ease-in-out;
    -o-transition: height 250ms ease-in-out, visibility 150ms ease-in-out,opacity 150ms ease-in-out;
    -moz-transition: height 250ms ease-in-out, visibility 150ms ease-in-out,opacity 150ms ease-in-out;
    transition: height 250ms ease-in-out, visibility 150ms ease-in-out,opacity 150ms ease-in-out;	*/
}

#billboards-container .rsOverflow,
.billboards-container .rsOverflow{
	height: 100% !important;
	width: 100% !important;
}
#billboards-container .billboarditem, .billboards-container .billboarditem {
	position: relative;
	width: 100%;
}
/*dImg for images used directly in HTML*/
#billboards-container .billboarditemimagewrapper.dImg, .billboards-container .billboarditemimagewrapper.dImg {
	text-align: center;
}
/*When image is used in HTML, we can contain*/
#billboards-container .billboarditemimagewrapper.dImg.contain img, .billboards-container .billboarditemimagewrapper.dImg.contain img {
	height: 100%;
	width: auto;
	border: none;
	outline: none;
}
#billboards-container .billboarditemimagewrapper, .billboards-container .billboarditemimagewrapper {
	position: relative;
	margin-left: auto;
	margin-right: auto;
	background-repeat: no-repeat;
	background-position: top center; /*default for all sizes*/
}
#billboards-container.cover .billboarditemimagewrapper, .billboards-container.cover .billboarditemimagewrapper,
#billboards-container .billboarditemimagewrapper.cover, .billboards-container .billboarditemimagewrapper.cover {
	width: 100%;
	margin-left: 0;
	margin-right: 0;
	background-size: cover;
}
#billboards-container.contain .billboarditemimagewrapper, .billboards-container.contain .billboarditemimagewrapper,
#billboards-container .billboarditemimagewrapper.contain, .billboards-container .billboarditemimagewrapper.contain {
	width: 100%;
	margin-left: 0;
	margin-right: 0;
	background-size: contain;
}
/*positions 3-6-17*/
#billboards-container .billboarditemimagewrapper.pcenter, 
.billboards-container .billboarditemimagewrapper.pcenter {
	background-position: center center;
}
#billboards-container .billboarditemimagewrapper.ptopcenter, 
.billboards-container .billboarditemimagewrapper.ptopcenter {
	background-position: top 0 center;
}
#billboards-container .billboarditemimagewrapper.pbottomcenter, 
.billboards-container .billboarditemimagewrapper.pbottomcenter {
	background-position: bottom 0 center;
}
#billboards-container .billboarditemimagewrapper.pleftcenter, 
.billboards-container .billboarditemimagewrapper.pleftcenter {
	background-position: left 0 center;
}
#billboards-container .billboarditemimagewrapper.prightcenter, 
.billboards-container .billboarditemimagewrapper.prightcenter {
	background-position: right 0 center;
}
/*end positions*/

#billboards-container a:hover, .billboards-container a:hover {
	text-decoration: none;
}
#billboards-container .billboarditemimagewrapper,
.billboards-container .billboarditemimagewrapper {
	position: relative;
	height: 100%;
	margin-left: auto;
	margin-right: auto;
}
/*from the template, these don't come into play.
It is from the billboarditemimagewrapper farther up that
the size is controlled*/
#billboards-container.cover .billboarditem,
.billboards-container.cover .billboarditem,
#billboards-container .billboarditem.cover,
.billboards-container .billboarditem.cover{
	background-size: cover;
}
#billboards-container.contain .billboarditem,
.billboards-container.contain .billboarditem,
#billboards-container .billboarditem.contain,
.billboards-container .billboarditem.contain{
	background-size: contain;
}
.billboardpixelfill {
	background-repeat: repeat;
}
.billboarditemwing {
	position: absolute;
	top: 0px;
	/*set property even if not used*/
	background-repeat: no-repeat;
	background-position: top center;
}
.billboarditemwing-left {
	left: 0;
	height: 100%;
	/*set property even if not used*/
	background-position: top right; /*pin left image to right edge*/
}
.billboarditemwing-right {
	right: 0;
	height: 100%;
	/*set property even if not used*/
	background-position: top left; /*pin right image to left edge*/
}


#billboards-container.parallax.fill,
.billboards-container.parallax.fill {
    
    height: 100vh;
    
}
/*.billboards-container.fill.pointer:after {
	content:'';
	position: absolute;
	bottom: 20px;
	left: 50%;
	margin-left: -23px;
	width:56px;
	height:56px;
	background: url(../graphics/down-arrow_fnl.svg) no-repeat center;
	
}
*/


/*.billboards-container.pointer + span.pointer*/
.bbccontainerparent span.pointer {
    position: absolute;
    bottom: 20px;
    left: 50%;
    margin-left: -23px;
    width:56px;
    height:56px;
    background: url(../graphics/down-arrow_fnl.svg) no-repeat center;
    z-index: 10; /*stay above billboard. We set this high enough
	to keep it from flashing as the billboard changes*/
    
     -webkit-transition: all 250ms ease-in;
    -o-transition: all 250ms ease-in;
    -moz-transition: all 250ms ease-in;
    transition: all 250ms ease-in;
    
}
.bbccontainerparent span.pointer:hover {
    
   bottom: 10px;
    
}

/* FIND YOUR FIT MESSAGING (11-29-17) */
.billboarditem .inner-billboard.findyourmessage {
    position:absolute;  
    background-repeat: no-repeat;
    background-position: top left;  
    background-size:contain;
    
    max-width: 100%;
}


.billboarditem .inner-billboard.findyourmessage.bottomright15 { 
    right: 12%; 
    bottom: 15%; 
}
.billboarditem .inner-billboard.findyourmessage.bottomright20 {
    right: 12%;
    bottom: 23%;
}
.billboarditem .inner-billboard.findyourmessage.topright5 {
    top: 17%;
    right: 5%;
}
.billboarditem .inner-billboard.findyourmessage.bottomright5 {
    bottom: 8%;
    right: 5%;
}
.billboarditem .inner-billboard.findyourmessage.bottomright6 {
    bottom: 13%;
    right: 6%;
}
.billboarditem .inner-billboard.findyourmessage.topright6 {
    top: 12%;
    right: 6%;
}


.billboarditemmobile  .inner-billboard.findyourmessage.bottomcenter {   
    bottom: 16%;   
    left: 50%;
    -webkit-transform: translate(-50%, 0px);
    -ms-transform: translate(-50%, 0px);
    transform: translate(-50%, 0px);
}
.billboarditemmobile .inner-billboard.findyourmessage.topright12 {
    top: 18%;
    right: 12%;
}
.billboarditemmobile  .inner-billboard.findyourmessage.midcenteroffset {   
    top: 50%;   
    left: 50%;
    -webkit-transform: translate(-50%, 0px);
    -ms-transform: translate(-50%, 0px);
    transform: translate(-50%, 0px);
}
.billboarditemmobile .inner-billboard.findyourmessage.topleft12 {
    top: 12%;
    left: 2%;
}
.billboarditemmobile .inner-billboard.findyourmessage.topleft4 {
    top: 12%;
    left: 4%;
}
.billboarditemmobile .inner-billboard.findyourmessage.bottomleft4 {
    left: 4%;
    bottom: 12%;
}
.billboarditemmobile .inner-billboard.findyourmessage.bottomleft6 {
    left: 6%;
    bottom: 24%;
}
.billboarditemmobile .inner-billboard.findyourmessage.topleft20 {
    top: 20%;
    left: 4%;
}