
/* - - - - - - - - - - - -

Image breakpoints
are currently set to

mobile < 768 (md)

as tablet and desktop
share similar layouts

essentially : vertical vs horizontal

- - - - - - - - - - - - */

section.banner {/* see main.css */}


.banner#home .banner-full {
 background-image:url('/item/images/banner/home-1920x1080.png');
 bottom:18%;right:80%;
 background-position:center;
 background-size:50%;
}
.banner#about {
 background-image:url('/item/images/banner/about-m.png');
}
.banner#vehicle_history {
 background-image:url('/item/images/banner/vehicle_history.png');
}
.banner#vehicle_history .overlay {
 background-image:url('/item/images/banner/vehicle_history-overlayB.svg');
 background-position:bottom left;
 left:-.1%;right:0;top:0;bottom:.1%;
 width:100.2%;height:100.2%;
}
.banner#vehicle_history_extended {
 background-image:url('/item/images/banner/vehicle_history_extended.png');
}
.banner#vehicle_history_extended-overlay-2 {
 background-image:url('/item/graphics/tab-paper.svg');
 width:100%;max-width:900px;height:100%;
 left:0;right:0;
 margin-left:auto;margin-right:auto;
 background-position:center bottom;
 background-size:100% auto;
}
.banner#vehicle_history_extended-overlay-1 {
 background-image:url('/item/images/banner/vehicle_history_extended-overlay.png');
 background-position:center bottom;
}
.banner#contact {
 background-image:url('/item/images/banner/contact-m.png');
}
.banner#dealer_signup {
 background-image:url('/item/images/banner/dealer_signup-m.png');
}
.graphic#vinsearch_page {
 background-image:url('/item/graphics/vinLocation-m.svg');
 background-size:100%;
 width:100%;height:100%;
}

section.list ul li .image {
 background-image:url('/item/images/car/toyota-premio.png');
 background-repeat:no-repeat;
 background-position:center;
 background-size:100%;
}
section.list ul li .image.empty {
 background-image:url('/item/icon/add-grey.svg');
 background-repeat:no-repeat;
 background-position:center;
 background-size:15%;
}
section.list a.add {
 background-image:url('/item/icon/add-circle-grey.svg');
 background-repeat:no-repeat;
 background-position:center;
 background-size:15%;
}




.img-profile#profile-001 {
 background-image:url("/item/images/IMG-profile01-60px.png");
 background-color:var(--grey);
}


.banner_ad #getyourreport {
 background-image:url("/item/graphics/getyourreport.svg");
 background-repeat:no-repeat;
 background-size:auto 85%;
 right:8%;bottom:65%;
}



section#progress_page {
 background-image:url('/item/images/banner/progress.png');
 background-size:100%;
}





@media (min-width: 412px) { /* xsm */



}


@media (min-width: 576px) { /* sm */

 .banner#home .banner-full {
  background-image:url('/item/images/banner/home-1920x1080.png');
  bottom:20%;right:80%;
  background-position:center;
  background-size:75%;
 }

}

@media (min-width:768px) { /* md */

 .banner#home .banner-full {
  bottom:30%;right:72%;
  background-position:center;
  background-size:75%;
 }

 .banner_ad #getyourreport {
  background-size:auto 60%;
  right:-3%;bottom:-3%;
 }


 .banner#about {
  background-image:url('/item/images/banner/about.png');
 }
 .banner#contact {
  background-image:url('/item/images/banner/contact.png');
 }
 .banner#dealer_signup {
  background-image:url('/item/images/banner/dealer_signup.png');
 }

 .graphic#vinsearch_page {
  background-size:100%;
  max-width:80%;height:100%;margin:6% 0 0 10%;
 }


}


@media (min-width: 992px) { /* lg */

 .banner#home .banner-full {
  bottom:30%;right:50%;
  background-position:center;
  background-size:82%;
 }
 .graphic#vinsearch_page {
  background-image:url('/item/graphics/vinLocation.svg');
  background-size:100%;
  top:calc(var(--navHeight)*.25);
  max-width:50%;height:100%;
  align-self:flex-end;margin-right:12%;
 }
 section.list a.add {
  background-size:6%;
 }



}


/* - - - - - - - - - - - -
 - - - - - - - - - - - - - break.xl
- - - - - - - - - - - - */

@media (min-width: 1200px) {


 .banner#home .banner-full {
  bottom:30%;right:50%;
  background-position:center;
  background-size:80%;
 }

 .banner_ad #getyourreport {
  background-size:auto 50%;
  right:-12%;bottom:-24%;
 }



}



/* - - - - - - - - - - - -
 - - - - - - - - - - - - - break.xxl
- - - - - - - - - - - - */

@media (min-width: 1400px) {

 .banner#home .banner-full {
  bottom:30%;right:50%;
  background-position:center;
  background-size:90%;
 }

}



/* - - - - - - - - - - - -
 - - - - - - - - - - - - - break.xxl
- - - - - - - - - - - - */

@media only screen and (min-width:1919px) {

 .banner#home .banner-full {
  bottom:30%;right:50%;
  background-position:center;
  background-size:100%;
 }

}
