/****** DEFAULT SETTING ******/
.wrapper {
    width:90%;
}

@media screen and (max-width:420px) {
    
    .wrapper {
        width:86%;
    }
    
}



/****** Header & Nav ******/
header {
    background:#f5f5f5;
    position:relative;
}

.logo {
    float:none;
    width:100%;
    padding:10px 0;
}

.logo a {
    font-size:1.7em;
}


nav {
    float:none;
    width:100%;
    padding-top:0;
    background:#101010;
}

.hdsocial1 {
    display:none;
}

ul.menu {
    text-align:center;
}

ul.menu li:last-child {
    margin-right:20px;
}

ul.menu a {
    padding:15px 0;
}

.hdsocial2 {
    display:block;
}

a.hdphone2 {
    color:#505050;
}


/*** H&N 834px ***/
@media screen and (max-width:840px) {
    
    i.menubtn {
        display:block;
    }
    
    nav {
        position:relative;
    }
    
    ul.menu {
        display:none;
        width:100%;
        background:#101010;
        position:absolute;
        top:0;
        left:0;
    }
    
    ul.menu li {
        display:block;
        margin:0;
        border-bottom:1px solid #444444;
    }
    
    ul.menu li:last-child {
        margin-right:0;
        border-bottom:none;
    }
    
    ul.menu a {
        display:block;
        text-align:center;
        padding:10px 0;
    }
    
}


/*** H&N 414px ***/
@media screen and (max-width:420px) {
    
    .logo a {
        font-size:1.4em;
    }
    
    a.hdfb,
    i.hdicon {
        font-size:1.2em;
        margin-right:12px;
    }
    
    a.hdphone {
        font-size:1em;
    }

    
}




/****** Home ******/
.banner h1 {
    font-size:1.5em;
}

.hmsec1colL {
    float:none;
    width:100%;
    text-align:center;
}

p.hmtxt1 {
    font-size:1.2em;
}

p.hmtxt2 {
    margin-top:40px;
    font-size:1.5em;
}

p.connect {
    margin-top:40px;
    font-size:1.3em;
}

img.tradein {
    float:none;
    width:200px;
    margin:40px auto 0;
}

p.connect {
    margin-top:40px;
}

p.connect a {
    display:inline;
}

.hmsec1colR {
    float:none;
    width:100%;
    margin-top:50px;
}


/*** Home 834px ***/
@media screen and (max-width:840px) {
    
    .banner h1 {
        font-size:1.3em;
     }
    
}

/*** Home 640px ***/
@media screen and (max-width:645px) {
    
    .banner h1 {
        font-size:1.1em;
        position:absolute;
        top:48%;
        left:4%;
     }
    
}

/*** Home 480px ***/
@media screen and (max-width:485px) {
    
    img.hmbanner1 {
        display:none;
    }

    img.hmbanner2 {
        display:block;
    }

    .banner h1 {
        background:#f0f0f0;
        padding-top:40px;
        font-size:1.1em;
        color:#383838;
        font-weight:500;
        text-align:center;
        position:relative;
        top:0;
        left:0;
     }
    
    section.hmsec1 {
        padding:40px 0;
    }
    
    .hmsec1colR h2 {
        font-size:1em;
    }
    
    table.hmpromo th {
        font-size:1em;
        padding:40px 0 15px;
    }
    
    table.hmpromo td {
        padding:10px 0;
    }
    
    table.hmpromo h3,
    table.hmpromo p {
        font-size:1em;
    }
    
    h1.hmsectag {
        font-size:1.3em;
        font-weight:700;
    }
    
    section.hmsec3 {
        background-image:none;
    }
    
    .hmsec3col {
        float:none;
        width:100%;
        margin-top:50px;
    }
    
    .spcol {
        float:none;
        width:100%;
        margin-right:0;
    }
    
    

    
}


/*** Home 414px ***/
@media screen and (max-width:420px) {
    
    .banner h1 {
        padding:40px 0 20px;
        font-size:1em;
     }
    
    section.hmsec1 {
        padding:20px 0 40px;
    }
    
    p.hmtxt1 {
        font-size:1em;
    }

    p.hmtxt2 {
        margin-top:40px;
        font-size:1.2em;
    }

    p.connect {
        margin-top:40px;
        font-size:1.1em;
    }
    
    img.tradein {
        width:160px;
    }

    table.hmpromo h3,
    table.hmpromo p {
        font-size:0.85em;
    }
    
    a.more {
        font-size:0.9em;
    }
    
    section.hmsec2 {
        padding:50px 0 20px;
    }
    
    .hmsec2wrap {
        width:100%;
        margin:0 auto;
    }
    
    h1.hmsectag {
        font-size:1em;
    }
    
    .car h2 {
        font-size:1.1em;
    }
    
    .car p {
        font-size:0.8em;
    }
    
    a.details span,
    i.chevron {
        font-size:0.8em;
    }

}


/****** All Honda ******/
.bancolL {
    padding-top:20%;
}

img.carlogo {
    width:200px;
}

.bancolR {
    padding:2% 0 1%;
}

.hdsec1colL {
    float:none;
    width:60%;
    margin:0 auto;
    padding-top:50px;
}

.hdsec1colR {
    float:none;
    width:100%;
    padding:50px 6% 50px;
}

.hdsec1colR h1 {
    font-size:1.2em;
}

table.prmtab {
    margin-top:30px;
    width:100%;
    border-collapse:collapse;
    border:2px solid #cc0000;
}

section.hdsec2 {
    padding:40px 0;
}

section.hdsec2 h1 {
    font-size:1.8em;
}

.video {
    width:80%;
}

.video iframe {
    height:350px;
}


section.hdsec3 {
    padding:40px 0;
}


/*** All Honda 640px ***/
@media screen and (max-width:645px) {

    img.carlogo {
        width:150px;
    }
    
    .hdsec1colL {
        width:100%;
        padding-top:0;
    }
    
    .bancolL {
        width:32%;
    }
    
    .bancolR {
        width:66%;
    }
    
    .video iframe {
        height:280px;
    }

}


/*** All Honda 480px ***/
@media screen and (max-width:485px) {
    
    .bancolL {
        width:100%;
        float:none;
        text-align:center;
        padding-top:40px;
    }
    
    img.banred {
        display:none;
    }
    
    .bancolR {
        width:100%;
        float:none;
        padding:20px 20px 20px;
    }
    
    section.hdsec2 h1,
    h2.sectag {
        font-size:1.3em;
    }
    
    .video {
        width:90%;
    }
    
    .video iframe {
        height:200px;
    }
    
    section#accord-gal,
    section#city-gal,
    section#civic-gal,
    section#crv-gal,
    section#odyssey-gal,
    section#jazz-gal,
    section#hrv-gal,
    section#brv-gal {
        background-image:none;
    }

    
}


/*** All Honda 414px ***/
@media screen and (max-width:420px) {
    
    .hdsec1colR h1 {
        font-size:1em;
    }
    
    .video iframe {
        height:180px;
    }
    
    p.color {
        font-size:1em;
    }
    
    a.dwload {
        font-size:0.9em;
    }
    
}


/****** Promotion ******/
body#promopg {
    background-image:none;
}

.prmcolL {
    position:relative;
    top:0;
    left:0;
    width:100%;
    text-align:center;
    padding-top:50px;
}

.prmcolL h1 span {
    display:inline;
    margin-left:20px;
}

.prmcolR {
    float:none;
    width:100%;
    padding:50px 0 50px;

}

/*** Promotion 834px ***/
@media screen and (max-width:840px) {
    
    .prmcolL h1 {
        font-size:1.8em;
    }
    
    p.prmtxt1 {
        font-size:1.2em;
    }

    
}


/*** Promotion 480px ***/
@media screen and (max-width:485px) {
    
    .prmcolL {
        padding-top:30px;
    }
    
    .prmcolL h1 {
        font-size:1.5em;
    }
    
    .prmcolL h1 span {
        display:block;
        margin-left:0;
    }
    
    p.prmtxt1 {
        font-size:1.2em;
    }
    
    .prmcolR h1 {
        width:80%;
        font-size:1em;
        border-radius:30px;
        padding:6px 0;
        letter-spacing:2px;
    }
    
    table.prmlist {
        position:relative;
        bottom:7px;
    }
    
    table.prmlist h2 {
        font-size:1em;
    }
    
    table.prmlist h3,
    table.prmlist h4,
    table.prmlist p {
        font-size:0.85em;
    }

    
}


/*** Promotion 414px ***/
@media screen and (max-width:485px) {
    
    p.prmtxt1 {
        font-size:1em; 
        line-height:160%;
    }
    
}




/****** Contact & Footer ******/

/*** 834px ***/
@media screen and (max-width:840px) {
    
    section.callus h1{
        font-size:1.5em;
    }
    
    i.whatsapp,
    a.wsapp span {
        font-size:2.2em;
    }
    
    
    footer {
        padding:40px 0 0;
    }
    
    .ftcol {
        width:100%;
        height:auto;
        float:none;
        border-right:none;
        margin:30px 0;
    }
    
    .ftcol:first-child {
        margin-top:0;
    }
    
    .ftcol p,
    .ftcol a {
        margin-top:5px;
    }
    
    
    .cpright {
        margin-top:0px;
    }
    
}


/*** 480px ***/
@media screen and (max-width:485px) {
    
    section.callus {
        padding:40px 30px;
    }
    
    section.callus h1{
        font-size:1.2em;
    }
    
    a.wsapp {
        position:relative;
        bottom:0;
        margin-top:20px;
    }
    
    i.whatsapp,
    a.wsapp span {
        font-size:1.8em;
    }
    
       
    i.rimah {
        display:block;
        width:100px;
        margin:20px auto 0;
    }
    
    
}