/*Style Sheet for Sales/rental/hire grid*/

/*Header Style*/

.headBanner{
    width: 100%;
    height: auto;
    position: relative;
    overflow: hidden;
}
.headBanner_Header{
    position: absolute;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.438);
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    
}
.headBanner h1{
    padding-left: 10%;
    font-size: 6vw;
    text-align: left;
    color: white;
}
.headBanner p{
    width: 40%;
    padding-left: 10%;
    color: white;
    font-size: 2vw;
    text-align: left;
}
.headBanner img{
    width: 100%;
}
.tabletView{
    display: none;
}
.mobileView{
    display: none;
}

hr{
    color: rgb(121, 121, 121);
    width: 90%;
    padding-left: 5%;
    height: 2px;
    background-color: rgb(121, 121, 121);
    border-radius: 10px;
}
hr.light{
    color: rgb(121, 121, 121);
    width: 90%;
    padding-left: 3%;
    height: 1px;
    background-color: rgb(121, 121, 121);
    border-radius: 10px;
}
hr.lightSmall{
    color: rgb(180, 180, 180);
    width: 50%;
    padding-left: 25%;
    margin-top: 20px;
    height: 1px;
    background-color: rgb(180, 180, 180);
    border-radius: 10px;
}

.vehicleGridContainer{
    width: 100%;
    height: auto;
    margin-top: 1vw;
}
.vehicleGridContainer h1{
    font-size: 3vw;
    padding-left: 2%;
    padding-top: 15px;
    padding-bottom: 15px;
    margin-top: 5px;
    color: rgb(36, 36, 36);
    background-color: rgba(202, 200, 200, 0.418);
    width: 92%;
    margin-left: 3%;
    margin-right: 3%;
}
.vehicleGridContainer h2{
    font-size: 2vw;
    padding-top: 20px;
    padding-left: 1%;
    margin-top: 5px;
    color: rgb(36, 36, 36);
    width: 92%;
    margin-left: 3%;
    margin-right: 3%;
}
.vehicleGridContainer p{
    color: rgb(65, 65, 65);
    font-size: 1.5vw;
    padding-left: 4%;
    padding-right: 4%;
    margin-bottom: 30px;
}
.vehicleDisplay_Grid{
    display: grid;
    grid-template-columns: 33.33% 33.33% 33.33%;
    grid-row-gap: 20px;
    grid-column-gap: auto ;
    justify-content: center;
}

.vehicleDisplay_GridItem{
    color: rgb(65, 65, 65);
    text-align: center;
    
}
.vehicleDisplay_GridItem img{
    width: 80%;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0,0.19);
   
}
.vehicleDisplay_GridItem ul{
    font-size: large;
    text-align: left;
    padding-left: 20%;
    
}
p.vdgi_title{
    font-size: 2.2vw;
    color: black;
    margin-bottom: 10px;
}
p.vdgi_description{
    font-size: 1.2vw; 
    padding-left: 10%; 
    padding-right: 10%;
    margin-top: 10px;
}

/*Promo Section Styling*/
#promoGrid{
    display: grid;
    grid-template-columns: 25% 25% 25% 25%;
    grid-row-gap: 20px;
    grid-column-gap: 20px;
    justify-content: center; 
    margin-left: 7%;
    margin-right: 7%; 
}
#promoGridItem{
    color: rgb(65, 65, 65);
    text-align: center;
    padding-bottom: 10%;
}
#promoGridItem p{
    font-size: 1.5vw;
    text-align: center;
    border: 1px;
    color: rgb(48, 48, 48);
}
#promoGridItem img{
    width: 80%;
}

.promoButton{
    width: 30%;
    padding: 5px 5px 5px 5px;
    font-size: 1.1vw;
    border: none;
    background-color: rgba( 0, 0,0, 0.664);
    color: rgba(255, 255, 255, 0.897);
    cursor: pointer;
    transition: 0.1s ease;
    border-radius: 7px;
}
.promoButton:hover{
    background-color: rgb(2, 124, 245);
    color: white;
}

h2.promoHeading{
    text-align: center;
    margin: 0;
    padding-top: 2%;
    padding-bottom: 20px;
    font-size: 5vw;
}
p.promoDescription{
    text-align: center;
    margin: 0;
    padding: 5px 0px 60px 0px;
    font-size: 2vw;
}

.footerGrid{
    width: 100%;
    display: grid;
    grid-template-columns: 25% 25% 20% 15%;
    background-color: rgb(44, 44, 44);
    font-family: 'Roboto', sans-serif;
    color: white;
    grid-row-gap: 20px;
    grid-column-gap: 20px;
    justify-content: center; 
    padding-top: 1%;
    
}
.footerGrid h2{
    font-size: 20px;
    font-weight: 700;
}
.footerGrid p{
    font-size: 14px;
    font-weight: 100;
    padding: 0;
    line-height: 20px;
}
.footerGridItem img{
    width: 40px;
    height: auto;
    padding-left: 2px;
    padding-top: 5px;
    padding-bottom: 5px;
    opacity: 65%;
    transition: 0.2 ease-in;
}
.footerGridItem img:hover{
    opacity: 100%;
}
.footerGridItem a{
    text-decoration: none;
    color: white;
    opacity: 60;
    font-size: 20px;
    font-weight: 200;
    line-height: 28px;
}
.footerGridItem a:hover{
    color: rgb(255, 244, 83);
}

.conditionItems{
    background-color: #0c0d610c;
    margin-left: 3%;
    margin-right: 3%;
}

@media screen and (max-width: 1024px){
    #promoGridItem p{
        margin-bottom: 20px;
    }
}
@media screen and (max-width: 900px){
    p.vdgi_title{
        font-size: 2vw;
    }
    p.vdgi_description{
        font-size: 0.9vw; 
    }
    .footerGrid h2{
        font-size: 15px;
       
    }
    .footerGrid p{
        font-size: 11px;
        line-height: 15px;
    }
    
    .footerGridItem a{
        font-size: 15px;
        line-height: 20px;
    }
}
@media screen and (max-width: 800px){
    .promoButton{
        width: 50%;
        height: 25px;
        font-size: 1.5vw;
    }
    .salesYearSelector{
        font-size: 1.5vw    
    }
}
@media screen and (max-width: 768px){
    .vehicleDisplay_Grid{
        grid-template-columns: 50% 50%;
    }
    #promoGrid{
        grid-template-columns: 50% 50%;
    }
    .vehicleGridContainer h1{
        font-size: 4vw;
    }
    .vehicleGridContainer p{
        font-size: 2vw;
        margin-bottom: 15px;
    }
    p.vdgi_title{
        font-size: 3.5vw;
    }
    p.vdgi_description{
        font-size: 2vw; 
    }
    #promoGridItem p{
        font-size: 2vw;
    }
    .promoButton{
        width: 50%;
        height: 35px;
        font-size: 2.5vw;
        background-color: rgb(2, 124, 245);
        color: rgb(235, 235, 235);
    }
    h1.promoHeading{
        font-size: 7vw;
    }
    p.promoDescription{
        font-size: 2.2vw
    }
    .headBanner_Header h1{
        font-size: 7vw;
    }
    .headBanner_Header p{
        font-size: 15px;
    }
    .webView{
        display: none;
    }
    .tabletView{
        display: block;
    }
}

@media screen and (max-width: 690px){
    .footerGrid{
        grid-template-columns: 40% 40%;   
        text-align: center; 
    }
}
@media screen and (max-width: 480px){
    .vehicleDisplay_Grid{
        grid-template-columns: 100%;
    }
    #promoGrid{
        grid-template-columns: 100%;
    }
    .vehicleGridContainer h1{
        font-size: 7vw;
    }
    .vehicleGridContainer p{
        font-size: 4vw;
        margin-bottom: 10px;
    }
    p.vdgi_title{
        font-size: 5.5vw;
    }
    p.vdgi_description{
        font-size: 4vw; 
    }
    #promoGridItem p{
        font-size: 4vw;
    }
    .promoButton{
        width: 60%;
        height: 40px;
        font-size: 4.2vw;
        background-color: rgb(2, 124, 245);
        color: rgb(235, 235, 235);
    }
    .salesYearSelector{
        font-size: 2.2vw    
    }
    h1.promoHeading{
        font-size: 8vw;
        padding: 30px 0px 10px 0px;
    }
    p.promoDescription{
        font-size: 3vw;
        padding: 0px 0px 15px 0px;
    }
    .tabletView{
        display: none;
    }
    .mobileView{
        display: block;
    }
    .headBanner_Header h1{
        margin-top: 60px;
        padding-left: 0;
        font-size: 8vw;
        text-align: center;
    }
    .headBanner_Header p{
        width: 80%;
        margin-left: 10%;
        padding-left: 0;
        font-size: 5vw;
        text-align: center;
    }
}

@media screen and (max-width: 420px){
    .footerGrid{
        grid-template-columns: 80%;   
    }
}

/*color box for vehicles*/
.box {
  float: left;
  width: 20px;
  height: 20px;
  margin: 5px;
  border: 1px solid rgba(0, 0, 0, 0.438);
}

.black{
    background: black;
}
.darkGrey{
    background: rgb(134, 134, 134);
}
.grey{
    background: grey
}
.navyblue {
  background: navy;
}
.skyBlue{
    background: skyblue;
}
.blue{
    background: blue;
}
.red{
    background: red;
}
.yellow{
    background: yellow;
}
.white {
  background: white;
}
.perlWhite{
    background: #fafbf5
}

.silver {
  background: silver;
}