.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;
    */
    
    width: 33px;
    height: 64px;
}
.bannerarrow.arrowleft .arrow {
    background-position: right center;
   background-image: url(../png/grayarrow-left-off.png); /*left-arrow-off.svg*/
}
.bannerarrow.arrowleft .arrow:hover {
   background-image: url(../png/grayarrow-left-over.png); /*left-arrow-over.svg*/
}
.bannerarrow.arrowright .arrow {
    background-position: left center;
   background-image: url(../png/grayarrow-right-off.png); /*right-arrow-off.svg*/
}
.bannerarrow.arrowright .arrow:hover {
    background-position: left center;
   background-image: url(../png/grayarrow-right-over.png);  /*right-arrow-over.svg*/
}
@media (max-width: 776px) {
    .bannerarrow {
        display:none;
    }
}

/*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-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; 
}

.sectionvideos .rsMinW .rsBullet span {
    background: #D8D8D8;
}
.sectionvideos .rsMinW .rsBullet.rsNavSelected span {
    background: #B9B8B9;
}
.sectionvideos .royalSlider.rsAutoHeight {
    height:100%;
}
@media screen and (max-width: 980px) {
    .sectionvideos .rsMinW .rsBullet span {
        width: 6px !important;
        height: 6px !important;
    }    
}

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


/* EXTRA FOR SECTION CONTAINERS ONLY 
not sure of the value of this */

.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;*/
}
/*7-23-21 added this because it isn't clear why the above is
commented out*/
#billboards-container.noauto .rsOverflow,
.billboards-container.noauto .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;
}

/*8-25-22
We might need this for every banner, but we are limiting it (for now) to
a specific class*/
.billboards-container.flexend .billboarditem {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
}

/*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;
    
}



.bbccontainerparent span.pointer:hover {
    
   bottom: 10px;
    
}


.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%;
}