/*
Website: ACURA RDX
*/
/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------

# Normalize
# Global Settings
# Typography
# Color
# BANNER HERO IMAGE
# BANNER OFFER IMAGE
# BANNER MAIN BUTTONS
# SECTION PERFORMANCE MDX POWERTRAINS
# SECTION POWER-PACKED PRECISION
# SECTION CTA
# SECTION Integrated Dynamics System - At Your Command - Connected To You
# SECTION PERFORMANCE CHALLENGE
# SECTION COMMANDING STYLE
# SECTION MDX WHEELS
# SECTION CTA - CTA2
# SECTION GALLERY EXTERIOR - INTERIOR
# SECTION INTERIOR & COMFORT
# SECTION CARGO & VERSATILITY
# SECTION TYPE S
# SECTION ACURAWATCH
# Responsive

--------------------------------------------------------------*/
@import url("https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap"); .container {
    width: 100%; padding: 0;
}
body {
    overflow-x: hidden;
}
/*--------------------------------------------------------------
# Normalize
--------------------------------------------------------------*/
:root {
font-size: 1vw;
--color-dark-acu: #000000;
--color-light-acu: #ffffff;
--color-bg-acu: #f6f6f6;
--color-bg-gray-acu: #262525;
--color-orange: #e48617;
}
.container-global-acura {
width: 100%;
padding: 0;
}
.container {
    width:100% !important;
    padding: 0 !important;
    margin: 0 !important;
}
.col1{
    width: 10%;
}

.col2{
    width: 20%;
}
.col25{
    width: 25%;
}
.col33{
    width: 33%;
}
.col4{
    width: 40%;
}
.col45 {
    width: 45%;
    flex-basis: 45%;
}
.col5{
    width: 50%;
}
.col55 {
    width: 55%;
    flex-basis: 55%;
}
.col6 {
    width: 60%;
}
.col7 {
    width: 70%
}
.col8 {
    width: 80%;
}
.col9 {
    width: 90%;
}
.col10 {
    width: 100%;
}
/*--------------------------------------------------------------
# Global Settings
--------------------------------------------------------------*/
.header {
    display: none !important;	
        }
.row-acura {
    display: flex;
    text-align: center;
    align-items: stretch;
}
.p-0 {
    padding: 0 !important;
}
.p-5 {
    padding: 1rem !important;
}
.p-5-lr {
    padding: 1rem !important;
}
.p-10 {
    padding: 2rem !important;
}
.p-20 {
    padding: 3rem !important;
}
.p-50 {
    padding: 5rem !important;
}
.p-50-tb {
    padding-top: 5rem !important;
    padding-bottom: 5rem !important;
}
.p-100 {
    padding: 8rem !important;
}
.p-100-lr {
    padding-left: 8rem !important;
    padding-right: 8rem !important;
}
.p-20-lr {
    padding-left: 3rem !important;
    padding-right: 3rem !important;
}
.p20-tb {
    padding-top: 3rem !important;
    padding-bottom: 3rem !important;
}
.p20-top {
    padding-top: 3rem !important;
}
.p20-bottom {
    padding-bottom: 3rem !important;
}
.m-10{
    margin: 2rem !important;
}
.m10-top {
    margin-top: 2rem !important;
}
.m10-bottom {
    margin-bottom: 2rem !important;
}
.m10-top-bot {
    margin-top: 2rem !important;
    margin-bottom: 2rem !important;
}
.m10-le-ri {
    margin-left: 1rem !important;
    margin-right: 1rem !important;
}
.m20-le-ri {
    margin-left: 2rem !important;
    margin-right: 2rem !important;
}
.m20-top {
    margin-top: 3rem !important;
}
.m20-bottom {
    margin-bottom: 3rem !important;
}
.m20-top-bot {
    margin-top: 3rem !important;
    margin-bottom: 3rem !important;
}
.container-global-acura ul {
    list-style: none;
    margin: 0 !important;
    padding: 0 !important;
}
.container-global-acura li {
    display: flex;
    width: 20%;
}
.h-100 {
    height: 100%;
}
.tlsection1 {
    display: none;
}
.ai-center {
    align-items: center;
    display: flex; 
    flex-wrap: wrap; 
    justify-content: center;
}
.tx-center {
    text-align: center !important;
}
.tx-right {
    text-align: right!important;
}
.img-ico img {
    width: 30%;
}
.title-dark {
    color: var(--color-light-acu);
    text-align: center;
}
.jc-center {
    justify-content: center;
}
/*--------------------------------------------------------------
# Typography
--------------------------------------------------------------*/
h1,
h2,
h3,
h4,
h5,
h6,
p,
span {
    
    font-family: "Montserrat", sans-serif !important;
}
h1 {
    font-size: 4rem !important;
    font-weight: 400 !important;
    margin: 0 !important;
    text-align: center;
}
h2 {
    font-size: 2.2rem !important;
}
h3 {
    font-size: 1.6rem !important;
    font-weight: 500 !important;
    line-height: 1.8rem !important;
}
h4 {
    font-size: 1.4rem !important;
    font-weight: 600 !important;
}
h5 {
    font-size: 1.3rem !important;
    font-weight: 600 !important;
}
h6 {
    font-size: 1rem !important;
    font-weight: 400 !important;
}
.container-global-acura p, .container-global-acura span {
    font-size: 1.3rem !important;
}
/*--------------------------------------------------------------
# Color
--------------------------------------------------------------*/
.bg-black {
    background-color: var(--color-dark-acu);
}
.bg-gray {
    background-color: var(--color-bg-gray-acu);
}
.bg-lgray {
    background-color: var(--color-bg-acu);
}
.bg-white {
    background-color: var(--color-light-acu);
}
.c-orange {
    color: var(--color-orange);
}
.cwhite {
    color: var(--color-light-acu);
}
.br-lgray {
    border: 1px solid #e9e9e9;
}
.bg-dgray {
    background-color: #e5e5e5;
}
.brbt-lgray {
    border-bottom: 1px solid #e9e9e9;
}


/*--------------------------------------------------------------
# BANNER HERO IMAGE
--------------------------------------------------------------*/
.bg-main-hero {
    background-image: url("/images/main-banner.jpg");
    background-size: cover;
    display: flex;
    min-height: 45vw;
}
.info_container {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    position: relative;
}
.text-hero {
    color: var(--color-light-acu);
    text-align: left;
    padding: 3rem 0 1.5rem 5%;
}
.text-hero h1 {
    text-align: left !important;
}
.text-hero h2 {
    font-weight: 300;
}
.price_container {
    margin-top: 3rem;
}
.price_container h3 {
    line-height: 1.5em !important;
    font-weight: 500 !important;
    font-size: 1.8rem !important;
}
.specs_container {
    margin-right: 2rem;
    width: 100%;
    display: flex;
    flex-direction: row-reverse;  
    position: absolute;  
    bottom: 2%;
}
.specs_container span {
    display: block;
}
.specs_container h4 {
    font-weight: 300 !important;
    line-height: 1.5em !important;
}

img {
    max-width: 100%;
}
.fullimg img {
    width: 100%;
}
.mainLink a {
    color: var(--color-orange);
    text-decoration: underline;
}
.bg-opacity {
    background-color: rgba(0, 0, 0, 0.6);
    max-width: 90%;
    margin-right: auto;
    margin-left: 0;
    padding: 2rem;
    display: inline-block;
}



/*--------------------------------------------------------------
# BANNER OFFER IMAGE
--------------------------------------------------------------*/

.bg-hero-img {
    background-image: url("/images/monthly-offer.jpg");
    background-size: cover;
    display: flex;
    min-height: 40vw;
}
.text-hero-2 {
    color: var(--color-light-acu);
    text-align: center;
    margin: 0 auto;
    padding: 3rem 10%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.text-hero-2 h1 {
    font-size: 3rem !important;

}
/*--------------------------------------------------------------
# BANNER MAIN BUTTONS
--------------------------------------------------------------*/
.banner-cta {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    flex-wrap: wrap;
}
ul.banner-cta .button {
    outline: 1px solid;
    color: var(--color-dark-acu);
    background-color: var(--color-orange);
    text-align: center;
    width: 100%;
    padding: 1.5rem;
    font-size: 1.3rem;
}

/*--------------------------------------------------------------
# SECTION CTA
--------------------------------------------------------------*/
.bg-banner-cta {
    background-image: url("/images/cta-bg.jpg");
    background-size: cover;
    min-height: 25vw;
}
.banner-cta .button-cta {
    outline: 1px solid;
    background-color: var(--color-orange);
    color: var(--color-dark-acu);
    text-align: center;
    padding: 1.5rem;
    font-size: 1.3rem;
    width: 100%;
}
.btn-banner-cta .row-acura {
    width: 100%;
} 
.btn-banner-cta {
    display: flex;
    align-items: center;
}
.cta2 {
    display: flex;
    justify-content: center;
}
.cta2 .button-cta {
    padding: 1.5rem 5rem;
    width: auto;
}

.img-cta {
    width: 20%;
}

.aitcenter {
    align-items: center;
    justify-content: center;
}

/*--------------------------------------------------------------
# SECTION INTEGRATED DYNAMIC SYSTEM
--------------------------------------------------------------*/

.bg-ids-img {
    background-image: url("/images/Integrated-Dynamics-System.jpg");
    background-size: cover;
    min-height: 45vw;
}

/*--------------------------------------------------------------
# SECTION CTA 2
--------------------------------------------------------------*/
.bg-banner-cta2 {
    background-image: url("/images/type-s.jpg");
    background-size: cover;
    min-height: 25vw;
}

/*--------------------------------------------------------------
# SECTION A LEADING EDGE
--------------------------------------------------------------*/
.fullh-img img {
height: 100%;
object-fit: cover;
}

/*--------------------------------------------------------------
# SECTION MDX WHEELS
--------------------------------------------------------------*/
.cwheel {
    display: flex;
    justify-content: flex-end;
    gap: 0.7rem;
    width: 50%;
    flex-wrap: wrap;
}

.cwheel2 {
    display: flex;
    justify-content: flex-end;
    gap: 1rem;
}
.img-wheel {
    width: 30%;
}
.info-wheel{
    display: flex;
    align-items: center;
}
.txt-info {
    width: 100%;
}
.txt-info * {
    text-align: left;
}

/*--------------------------------------------------------------
# SECTION GALLERY EXTERIOR - INTERIOR
--------------------------------------------------------------*/

.gallery_img {
    display: flex;
    flex-wrap: wrap;
}
.img-exterior {
    width: 25%;
}

/*--------------------------------------------------------------
# SECTION AUDIO & CONNECTIVITY
--------------------------------------------------------------*/
.bg-audio-img {
    background-image: url("/images/audio-1.jpg");
    background-size: cover;
    background-repeat: no-repeat;
}
.bg-audio2-img {
    background-image: url("/images/audio-2.jpg");
    background-size: cover;
    background-repeat: no-repeat;
}
.col10.text-hero h1 * {
    text-align: center;
}
.bgraudio {
        /* background-color: rgba(0,0,0,0.7); */
        color: var(--color-light-acu);
        border: 0.5px solid;
        width: 95%;
}
.bgraudio p {
    font-weight: 300;
}

/*--------------------------------------------------------------
# SECTION SAFETY TECHNOLOGY
--------------------------------------------------------------*/

.tx-safety {
width: 70%;
text-align: center;
margin: 0 auto;
padding-bottom: 3rem;
align-items: center;
}
.st-quote {
    font-size: 1rem !important;
    font-style: italic;
    padding-top: 2rem;
}
.st-elem {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

/*--------------------------------------------------------------
# SECTION CTA BG
--------------------------------------------------------------*/
.bg-ctabg-img {
    background-image: url("/images/cta-banner-2.jpg");
    background-size: cover;
    background-repeat: no-repeat;
}
/*--------------------------------------------------------------
# SECTION ACCESORIES
--------------------------------------------------------------*/

.ac-txt {
    padding: 1rem;
    color: var(--color-dark-acu);
}

.ac-txt h4 {
    font-weight: 500 !important;
}
.img-acce img {
    width: 100%;
}

/*--------------------------------------------------------------
# SECTION TYPE S
--------------------------------------------------------------*/
.bg-black.ac-txt h4 {
    font-size: 1.3rem !important;
}
/*--------------------------------------------------------------
# SECTION ACURAWATCH
--------------------------------------------------------------*/
.col5flex {
    width: 50%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}
.colmid {
    width: 50%;
    flex-basis: 50%;
}

/*--------------------------------------------------------------
# SECTION PRICING & SPECS
--------------------------------------------------------------*/
.txt-pri {
    font-weight: 300;
    margin: 0;
}
.txtmin-pri {
    font-size: 1rem !important;
}

/*--------------------------------------------------------------
# SECTION DISCLAIMER
--------------------------------------------------------------*/
.p-spdic p {
    padding-bottom: 1rem;
}
/*--------------------------------------------------------------
# Responsive
--------------------------------------------------------------*/
@media (min-width: 1700px) {
    :root {
        font-size: 18px !important;
    }
}

@media (min-width: 968px) and (max-width: 1920px) {
    .bgs img {
        width: 20%;
    }
}
@media (max-width: 968px) {
    :root {
            font-size: 12px !important;
        }
    .dnone {
        display: none !important;
    }
    .col1, .col2, .col25, .col33, .col4, .col45, .col5, .col5flex, .col55, .col6, .col7, .col8 {
        width: 100%;
        flex-basis: 100%;
    }
    .row-acura {
        flex-wrap: wrap;
        justify-content: center;
    }
    .tlsection1 {
        display: flex !important;
        flex-flow: column wrap;
    }
    .ai-center{
        display: flex !important;
        flex-flow: column wrap;
        justify-content: flex-start;
    }
    .info_container {
        background-color: var(--color-dark-acu);
    }
    .text-hero {
        text-align: center;
    }
    .mbg-white {
        background-color: var(--color-light-acu) !important;
        border: 1px solid #e9e9e9;
    }
    .img90 img {
        width: 90% !important;
        max-width: 20rem;
    }
    .img-cta {
        width: 90% !important;
        padding: 0 0 4rem 0;
        max-width: 60rem;
    }
    .img-ico img {
    width: 90% !important;
    max-width: 10rem;
    }
    .mb-10{
        margin: 2rem 0 !important;
    }
    .pb-10{
        padding: 1rem;
    }
    .pb-50{
        padding: 5rem !important;
    }
    .txt-info * {
        text-align: center !important;
    }
    .cwheel {
        justify-content: center;
    }
    .img-exterior {
        width: 33%;
    }
    .bg-dual-img {
        background-image: none;
    }
    .img-acce {
        width: 95%;
        margin: 0 auto;
        max-width: 60rem;
    }
}
    @media (max-width: 768px) {
        :root {
            font-size: 14px !important;
        }
        .text-hero{
        padding: 3rem 3% !important;
        }
        .leyend-hero {
            width: 100%;
            text-align: center;
            color: #fff;
            padding-bottom: 3rem;
          }
        .specs_container {
            position: inherit;
            bottom: 0;
            margin: 0;
        }
        
        .bg-opacity {
            padding: 0 !important;
        }
        .bg-hero-img {
            padding: 200px 0 0 0 !important;
            }
        .container-global-acura li {
            width: 48% !important;
            padding: 1.5rem;
        }
        .row-acura {
            width: 100%;
        }
        .img-exterior {
            width: 50%;
        }
        .img-acce {
            width: 100% !important;
        }
        .colmid {
            width: 100%;
            flex-basis: 100%;
        }
    }
    @media (max-width: 460px) {
        h1 {
            font-size: 3.2rem !important;
            padding: 0 5px !important;
        }
        .p-20 {
            padding: 1.2rem !important;
        }
        .row-acura.mnone {
            margin: 0 !important;
        }
        .p-20-lr{
            padding-left: 1rem !important;
            padding-right: 1rem !important;
        }
        .bg-hero-img {
        padding: 120px 0 0 0 !important;
        }
        .text-hero, .text-hero h1 {
            text-align: center !important;
        }
        .container-global-acura li {
            width: 100% !important;
            padding: 1.5rem;
        }
        .text-hero{
            padding: 2rem!important;
        }
       
        .p-100 {
            padding: 3rem !important;
        }
        .p-100-lr {
            padding-left: 3rem !important;
            padding-right: 3rem !important;
        }
        p {
        font-size: 1.4rem !important;
        }
        .img-wheel, .img-exterior {
            width: 100%;
        }
        .tx-mint {
            font-size: 2.5rem !important;
        }
        .tx-safety {
            width: 90%;
        }
        .pb-50 {
            padding: 5rem 1rem !important;
          }
    }