/* Start of Generic Styles */
.small-text-container {
    text-align: center;
    padding: 5px 10px;
    border-radius: 8px;
    border: 1px solid #949494;
    color: #757575;
    font-family: 'Autonation light';
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 150%;
    letter-spacing: 0.28px;    
}


.template-list {
    margin-top: 10px;
    margin-bottom: 0px;
    display: flex;
    flex-flow: column;
    gap: 10px;
}

.template-list li {
    display: flex;
    flex-flow: row;
    align-items: center;
    gap: 12px;
}

.template-list li:before {
    content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="17" viewBox="0 0 16 17" fill="none"><g clip-path="url(%23clip0_2916_4185)"><path fill-rule="evenodd" clip-rule="evenodd" d="M16 8.25708C16 10.3788 15.1571 12.4136 13.6569 13.9139C12.1566 15.4142 10.1217 16.2571 8 16.2571C5.87827 16.2571 3.84344 15.4142 2.34315 13.9139C0.842855 12.4136 0 10.3788 0 8.25708C0 6.13535 0.842855 4.10052 2.34315 2.60023C3.84344 1.09993 5.87827 0.25708 8 0.25708C10.1217 0.25708 12.1566 1.09993 13.6569 2.60023C15.1571 4.10052 16 6.13535 16 8.25708ZM12.03 5.22708C11.9586 5.1559 11.8735 5.09985 11.7799 5.0623C11.6863 5.02474 11.5861 5.00644 11.4853 5.00849C11.3845 5.01055 11.2851 5.03291 11.1932 5.07425C11.1012 5.11559 11.0185 5.17505 10.95 5.24908L7.477 9.67408L5.384 7.58008C5.24183 7.4476 5.05378 7.37548 4.85948 7.37891C4.66518 7.38233 4.47979 7.46105 4.34238 7.59846C4.20497 7.73587 4.12625 7.92126 4.12283 8.11556C4.1194 8.30986 4.19152 8.49791 4.324 8.64008L6.97 11.2871C7.04128 11.3582 7.12616 11.4143 7.21958 11.4519C7.313 11.4896 7.41305 11.508 7.51375 11.5061C7.61444 11.5043 7.71374 11.4821 7.8057 11.4411C7.89766 11.4 7.9804 11.3408 8.049 11.2671L12.041 6.27708C12.1771 6.13558 12.2523 5.94636 12.2504 5.75004C12.2485 5.55372 12.1698 5.36596 12.031 5.22708H12.03Z" fill="black"/></g><defs><clipPath id="clip0_2916_4185"><rect width="16" height="16" fill="white" transform="translate(0 0.25708)"/></clipPath></defs></svg>');
    height: 16px;
    width: 16px;
}

.template-list li::marker {
    max-width: 16px;
    max-height: 16px;
}
/* End of Generic Styles */

/* Start of One Column Generic Styles */
.one-column-container {
    padding: 40px 80px;
    display: flex;
    flex-flow: column;
    justify-content: center;
    align-items: center;
    gap: 16px;
}

.one-column-container h1,
.one-column-container h2,
.one-column-container h3,
.one-column-container p {
    margin: 0px;
}

.one-column-container.left-aligned {
    justify-content: start;
    align-items: start;
}

.one-column-container.right-aligned {
    justify-content: end;
    align-items: end;
}

.one-column-container .one-column-title {
    font-family: 'Autonation Regular';
    font-size: 48px;
    font-style: normal;
    font-weight: bold;
    line-height: 120%; /* 57.6px */
    letter-spacing: 0.84px;
    text-align: center;
    color: black;
}

.one-column-container .one-column-text {
    font-family: 'Autonation light';
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 150%; /* 30px */
    letter-spacing: 0.35px;  
    text-align: center;  
    color: black;
}

.one-column-container .one-column-cta-container {
    display: flex;
    flex-flow: row;
    justify-content: center;
    align-items: center;
    gap: 40px;
}

.one-column-container .one-column-disclaimer {
    font-family: 'Autonation Regular';
    font-size: 12px;
    font-style: normal;
    font-weight: 500;
    line-height: 150%; /* 18px */
    letter-spacing: 0.21px; 
    text-align: center;   
}

.one-column-container.left-aligned .one-column-title,
.one-column-container.left-aligned .one-column-text,
.one-column-container.left-aligned .one-column-disclaimer {
    text-align: left;
}

.one-column-container.right-aligned .one-column-title,
.one-column-container.right-aligned .one-column-text,
.one-column-container.right-aligned .one-column-disclaimer {
    text-align: right;
}

.one-column-container .primary-button,
.one-column-container .secondary-button {
    font-family: 'Autonation Regular';
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 150%; /* 24px */
    letter-spacing: 0.28px;
    text-decoration: none;
    border-radius: 8px;
    width: 181px;
    height: 50px;
    box-shadow: 0px 5px 10px #5C5C5C26;
    border: none;
    font-size: 16px;
    line-height: 120%;
    letter-spacing: 0px;
    display: flex;
    flex-flow: row;
    justify-content: center;
    align-items: center;
    text-transform: capitalize;
}

.one-column-container .primary-button {
    background: transparent linear-gradient(90deg, #ad104c 0%, #e61464 100%) 0% 0% no-repeat padding-box;
    border: none;
    color: #FFFFFF;
}

.one-column-container .secondary-button {
    border: 2px solid #E61464;
    color: #E61464;
}

@media all and (max-width: 1116px) {
    .one-column-container .one-column-title {
        font-size: 32px;
    }

    .one-column-container .one-column-text {
        font-size: 16px;
    }
}

@media all and (max-width: 825px) {
    .one-column-container {
        padding: 40px 80px;
    }

    .one-column-container .one-column-title {
        font-size: 24px;
    }
}

@media all and (max-width: 577px) {
    .one-column-container {
        padding: 24px 16px;
    }

    .one-column-container .one-column-text {
        font-size: 14px;
    }

    .one-column-container .one-column-cta-container {
        flex-flow: column;
        gap: 15px;
    }
}
/* End of One Column Generic Styles */

/* Start of Two Column Generic Styles */
.two-column-container {
    display: flex;
    flex-flow: row;
    justify-content: center;
    align-items: center;
    gap: 40px;
    padding: 40px 80px;
}

.two-column-container.pencil-banner {
    margin: 32px 80px;
    padding: 16px 40px;
    background-color: white;
    border-radius: 16px;
}

.two-column-container.pencil-banner .two-column-media-container {
    height: auto;
    background-color: transparent;
}

.two-column-container.pencil-banner .two-column-title {
    font-size: 32px;
}

.two-column-container.pencil-banner .two-column-title {
    font-size: 32px;
}

.two-column-container .two-column-logo svg {
    width: 100%;
    height: 100%;
}

.two-column-container.reverse-row {
    flex-flow: row-reverse;
}

.reverse-row .two-column-text-container {
    align-items: start;
}

.two-column-text-container {
    display: flex;
    flex-flow: column;
    align-items: start;
    justify-content: start;
    gap: 8px;
    flex: 50%;
}

.two-column-media-container {
    flex: 50%;
    display: flex;
    flex-flow: row;
    align-items: center;
    justify-content: center;    
}

.two-column-media-container img {
    border-radius: 16px;
}

.two-column-container.reverse-row .two-col-text-container {
    align-items: end;
    justify-content: end;
}

.two-column-logo {
    max-width: 285px;
}

.two-column-title {
    font-family: 'Autonation Regular';
    font-size: 40px;
    font-style: normal;
    font-weight: bold;
    line-height: 120%; /* 57.6px */
    letter-spacing: 0.84px;  
    color: black;  
    text-align: left;
}

.two-column-text {
    font-family: 'Autonation light';
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 150%; /* 30px */
    letter-spacing: 0.35px;
    color: black;   
    text-align: left; 
}

.reverse-row .two-column-title,
.reverse-row .two-column-text {
    text-align: left;
}

.reverse-row.two-column-container .typeahead__container {
    display: flex;
    flex-flow: row;
    justify-content: start;
}

.two-column-cta-container {
    display: flex;
    flex-flow: row;
    gap: 40px;
    align-items: center;
    justify-content: start;
}

.two-column-container .typeahead__container {
    width: 100%;
}

.two-column-container .typeahead__container input {
    padding: 16px;
    font-size: 16px;
    max-width: 376px;
    max-height: 55px;
    width: 100%;
    height: 55px;
    padding: 16px 16px 16px 48px;
    border-radius: 8px;
    border: 1px solid #D2DADF;
    box-sizing: border-box;
    background-image: url('data:image/svg+xml,<svg width="24" height="25" viewBox="0 0 24 25" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="Icon"><path id="circle2017" d="M11.1815 4.25671C7.22384 4.25671 4 7.48055 4 11.4382C4 15.3958 7.22384 18.6259 11.1815 18.6259C12.8719 18.6259 14.4265 18.0335 15.6553 17.0499L18.6466 20.0397C18.7976 20.1844 18.9992 20.2643 19.2083 20.2621C19.4174 20.26 19.6174 20.1761 19.7653 20.0283C19.9133 19.8805 19.9975 19.6807 19.9999 19.4716C20.0024 19.2625 19.9228 19.0608 19.7783 18.9096L16.787 15.9183C17.7714 14.6877 18.3645 13.1306 18.3645 11.4382C18.3645 7.48055 15.1391 4.25671 11.1815 4.25671ZM11.1815 5.85296C14.2764 5.85296 16.7667 8.34324 16.7667 11.4382C16.7667 14.5331 14.2764 17.0297 11.1815 17.0297C8.08651 17.0297 5.59623 14.5331 5.59623 11.4382C5.59623 8.34324 8.08651 5.85296 11.1815 5.85296Z" fill="%23D9D9D9"/></g></svg>');
    background-repeat: no-repeat;
    background-position: 16px 50%;
    display: block;
}

.two-column-cta-container .primary-button,
.two-column-cta-container .secondary-button {
    font-family: 'Autonation Regular';
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 150%; /* 24px */
    letter-spacing: 0.28px;
    text-decoration: none;
    border-radius: 8px;
    width: 181px;
    height: 50px;
    box-shadow: none;
    border: none;
    font-size: 16px;
    line-height: 120%;
    letter-spacing: 0px;
    display: flex;
    flex-flow: row;
    justify-content: center;
    align-items: center;
    text-transform: capitalize;
    margin: 0px;
    padding: 0px;
}

.two-column-cta-container .primary-button {
    background: transparent linear-gradient(90deg, #ad104c 0%, #e61464 100%) 0% 0% no-repeat padding-box;
    border: none;
    color: #FFFFFF;
}

.two-column-cta-container .secondary-button {
    color: #000;
    background:#EAEAEA;
}

@media all and (max-width: 1116px) {
    .two-column-container {
        
    }

    .two-column-container.pencil-banner {
        margin: 32px 40px;
    }

    .two-column-container .two-column-text {
        font-size: 18px;
    }

    .two-column-container.an-express-hero .typeahead__container input {
        max-width: 325px;
        max-height: 50px;
    }    
}

@media all and (max-width: 825px) {
    .two-column-container,
    .two-column-container.reverse-row,
    .reverse-row.two-column-container .typeahead__container {
        padding: 40px;
        flex-flow: column;
        justify-content: center;
        align-items: center;
        gap: 48px;
    }

    .two-column-container.pencil-banner {
        flex-flow: row;
        padding: 10px 30px;
    }

    .two-column-container.pencil-banner.reverse-row {
        flex-flow: row-reverse;
    }

    .reverse-row.two-column-container .typeahead__container {
        padding: 0px;
    }

    .two-column-container.reverse-column,
    .two-column-container.reverse-row.reverse-column {
        flex-flow: column-reverse;
    }

    .two-column-container .two-column-title,
    .two-column-container .two-column-text,
    .reverse-row .two-column-text-container,
    .two-column-container.reverse-row .two-column-title,
    .two-column-container.reverse-row .two-column-text {
        text-align: left;
    }    

    .reverse-row .two-column-text-container {
        align-items: center;
        justify-content: center;
    }

    .two-column-text-container,
    .two-column-media-container {
        flex: auto;
    }
}

@media all and (max-width: 577px) {
    .two-column-container.pencil-banner {
        padding: 24px 16px;
        margin: 24px 16px;
    }

    .two-column-container.pencil-banner .two-column-title {
        font-size: 20px;
    }

    .two-column-container.pencil-banner .two-column-text {
        font-size: 14px;
    }

    .two-column-container .two-column-title,
    .two-column-container .two-column-title h2 {
        font-size: 24px;
    }

    .two-column-container .two-column-text {
        font-size: 14px;
    }

    .two-column-container .two-column-logo {
        max-width: 135px;
    }

    .two-column-container,
    .two-column-container.reverse-row,
    .two-column-container.reverse-row.reverse-column,
    .two-column-container.reverse-column {
        padding: 16px;
    }     

    .two-column-cta-container {
        flex-flow: column;
        gap: 15px;
    }
}
/* End of Two Column Generic Styles */

/* Start of two column dropdown styles */
.two-column-container.two-column-container-dropdown {
    gap: 32px;
}

.two-column-container.two-column-container-dropdown .two-col-text-container {
    max-width: 500px;
}

.two-column-dropdown-container {
    flex: 70%;
    max-width: 742px;
    display: flex;
    flex-flow: row wrap;
    align-items: start;
    justify-content: space-between;
    gap: 24px;
    background-color: white;
    border-radius: 16px;
    padding: 32px;
}

.two-column-dropdown-container .mlp-table-container {
    flex: 45%;
    border: none;
    padding: 0px;
}

.two-column-dropdown-container .chevron-icon {
    display: none;
}

.two-column-dropdown-container .table-title-content {
    flex-flow: column;
    gap: 16px;
    align-items: start;
    font-size: 20px;
    cursor: default;
}

.two-column-dropdown-container .table-title-chevron {
    display: none;
}

.two-column-dropdown-container .table-text-content {
    font-size: 16px;
    opacity: 1;
}

@media all and (max-width: 1116px) {
    .two-column-container.two-column-container-dropdown {
        flex-flow: column;
        padding: 56px 40px;
    }   

    .two-column-dropdown-container {
        max-width: none;
    }
    
    .two-column-container.two-column-container-dropdown .table-title-content {
        font-size: 20px;
    } 
}

@media all and (max-width: 577px) {
    .two-column-container.two-column-container-dropdown {
        padding: 24px 16px;
    }   
    
    .two-column-dropdown-container {
        flex-flow: column;
        padding: 0px 16px;
        gap: 0px;
        width: 100%;
    }

    .two-column-container.two-column-container-dropdown .table-title-content {
        flex-flow: row;
        align-items: center;
        font-size: 14px;
        padding: 0px;
        margin: 0px;
    }

    .two-column-dropdown-container .mlp-table-container {
        flex: 100%;
        border-bottom: 1px solid #D2DADF;
        width: 100%;
        padding: 12px 0px;
    }

    .two-column-dropdown-container .mlp-table-container:last-child {
        border-bottom: none;
    }

    .two-column-dropdown-container .mlp-dropdown-icon {
        max-width: 20px;
        max-height: 20px;
    }

    .two-column-dropdown-container .mlp-dropdown-icon svg {
        width: 100%;
        height: 100%;
    }

    .two-column-dropdown-container .table-text-content {
        font-size: 0px;
        opacity: 0;
    }

    .two-column-dropdown-container .table-title-content {
        cursor: pointer;
    }

    .two-column-dropdown-container .table-title-content:has(.flip) + .table-text-content {
        padding: 12px 10px 12px 0px;
    }    

    .two-column-dropdown-container .chevron-icon {
        display: block;
    }
}
/* End of two column dropdown styles */

/* Start of the three column styles */
.three-column-container {
    padding: 56px 80px;
    box-sizing: border-box;
    display: flex;
    flex-flow: column;
    gap: 30px;
    position: relative;
}

.three-column-title h2,
.three-column-title p {
    margin: 0px;
    padding: 0px;
}

.three-column-title {
    font-family: 'Autonation Regular';
    font-size: 40px;
    font-style: normal;
    font-weight: bold;
    line-height: 120%; /* 57.6px */
    letter-spacing: 0.84px;  
    color: black;
    text-align: center;
} 

.three-column-text {
    font-family: 'Autonation light';
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 150%; /* 30px */
    letter-spacing: 0.35px;
    color: black;    
    text-align: center;
}

.three-column-content {
    max-width: 1380px;
    margin: 0px auto;
}

.three-column-content,
.three-column-carousel {
    display: flex;
    flex-flow: row;
    gap: 30px;
    align-items: start;
    justify-content: center;
    width: 100%;
}

.column-content {
    display: flex;
    flex-flow: column;
    justify-content: center;
    align-items: start;
    gap: 8px;    
    width: 100%;    
    padding: 30px;
    box-sizing: border-box;
    border: 1px solid black;
    border-radius: 8px;
    position: relative;
    background-color: white;
}

.three-column-card-container .three-column-content .column-content:has(.arrow-container) {
    cursor: pointer;
}

.slick-slide.column-content {
    background-color: white;
}

.column-icon {
    background-color: black;
    width: 50px;
    height: 50px;
    min-height: 50px;
    display: flex;
    flex-flow: row;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
}

.column-title {
    font-family: 'Autonation Regular';
    font-size: 24px;
    font-style: normal;
    font-weight: 700;
    line-height: 150%;
    letter-spacing: 0.42px;
    color: black;
    margin-bottom: 8px;    
}

.column-text {
    font-family: 'Autonation light';
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 150%;
    letter-spacing: 0.28px;
    color: #5C5C5C;  
    text-align: left;  
}

.three-column-carousel .column-content:first-child,
.three-column-carousel .column-content:last-child {
    margin: 0px;
}

.three-column-content {
    position: relative;
}

.slick-dots li button:before {
    font-size: 45px
}

.three-column-container .swiper-button-next, 
.three-column-container .swiper-button-prev {
    top: 65%;
    color: #000;
    display: none;
}

.three-column-container .swiper-button-prev {
    left: 25px;
}

.three-column-container .swiper-button-next {
    right: 25px;
}

.three-column-container .swiper-button-next:hover, 
.three-column-container .swiper-button-prev:hover {
    color: #E61464;
}

.three-column-carousel .slick-dots {
    position: absolute;
    width: 100%;
    max-width: 1170px;
    bottom: -30px;
    left: 1%;
    display: flex;
    flex-flow: row;
    justify-content: start;
    align-items: center;
    gap: 0px;    
    list-style-type: none;
    padding: 0px;
    margin: 0px;
}

.three-column-carousel:not(.arrow) .slick-dots {
    max-width: none;
}

.three-column-carousel .slick-dots li button,
.three-column-carousel ~ .swiper-arrow,
.three-column-carousel ~ .swiper-arrow::after
{
    display: none;
}

.three-column-carousel .slick-dots li {
    width: 100%;
    height: 0px;
    border-top: 1px solid #D2DADF;
    margin: 0px;
}

.three-column-carousel .slick-dots li.slick-active {
    border-top: 2.5px solid black;
}

.three-column-carousel.arrow ~ .swiper-arrow {
    position: absolute;
    top: auto;
    bottom: auto;
    left: auto;
    right: auto;
    background-color: black;
    border-radius: 50%;
    width: 38px;
    height: 38px;
    flex-flow: row;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}

.three-column-carousel.arrow ~ .swiper-arrow:hover {
    background-color: #DB0959;
}

.three-column-carousel.arrow ~ .swiper-arrow.slick-disabled {
    opacity: 1;
    background-color: #F7F8F9;
}

.three-column-carousel.arrow ~ .swiper-arrow.slick-disabled svg path {
    fill: #D9D9D9;
    stroke: #D9D9D9;
}

.three-column-carousel.arrow ~ .swiper-arrow.swiper-button-next {
    right: 40px;
    bottom: 10px;
}

.three-column-carousel.arrow ~ .swiper-arrow.swiper-button-prev {
    right: 90px;
    bottom: 10px;
    transform: rotate(180deg);
}

.three-column-carousel .three-column-chevron {
    display: none;
}

.three-column-container.three-column-card-container .three-column-title {
    text-align: left;
}

.three-column-container.three-column-card-container .three-column-text {
    text-align: left;
    font-size: 16px;
    font-family: 'Autonation light';
    max-width: 780px;
}

.three-column-container.three-column-card-container .three-column-content {
    flex-flow: column wrap;
    height: 630px;
    gap: 16px;
}

.three-column-container.three-column-card-container .column-content {
    padding: 16px;
    background-position: center;
    align-items: center;
    justify-content: center;
    background-size: cover;
    border: none;
}

.three-column-container.three-column-card-container .carousel-copy-container {
    align-items: start;
    padding: 0px;
    background-color: transparent;
    width: 95%;
}

.three-column-container.three-column-card-container .carousel-copy-container .carousel-copy-text {
    margin: 0px;
    font-size: 16px;
    font-family: 'Autonation light';
    max-width: 512px;
    color: #555;
    margin: 0px;
}

.three-column-container.three-column-card-container .arrow-container {
    height: 56px;
    width: 56px;
    display: flex;
    flex-flow: row;
    justify-content: center;
    align-items: center;
    position: absolute;
    border-radius: 50%;
    right: 0px;
    bottom: 0px;
    background: black;
    backdrop-filter: blur(12px);
}

.three-column-container.three-column-card-container .column-content.first-column {
    flex: 100%;
    max-width: 630px;
}

.three-column-container.three-column-card-container .column-content.second-column,
.three-column-container.three-column-card-container .column-content.third-column {    
    flex: 45%;
    max-width: 630px;
}

.three-column-container.three-column-card-container .column-content.third-column {
    flex: 45%;
    max-width: 630px;
}

.three-column-container.three-column-card-container .three-column-title,
.three-column-container.three-column-card-container .three-column-text {
    text-align: left;
}

.three-column-container.three-column-card-container .three-column-text {
    max-width: 780px;
}

@media all and (max-width: 1323px) {
    .three-column-container.three-column-card-container .carousel-copy-container .carousel-copy-text {
        max-width: 300px;
    }

    .three-column-container.three-column-card-container .column-content.first-column {
        max-width: 500px;
    }
    
    .three-column-container.three-column-card-container .column-content.second-column {
        max-width: 420px;
    }
    
    .three-column-container.three-column-card-container .column-content.third-column {
        max-width: 420px;
    }    
}

@media all and (max-width: 1116px) {
    .three-column-container {
        padding: 56px 40px;
    }

    .three-column-content.three-column-carousel.LTabletCarousel .column-content {
        margin: 0px 15px;
        display: flex;
    }

    .three-column-content.three-column-carousel.LTabletCarousel.arrow ~ .swiper-arrow {
        display: flex !important;
    }

    .three-column-container.three-column-card-container .three-column-content {
        height: 630px;
    }

    .three-column-container.three-column-card-container .carousel-copy-container {
        width: 90%;
    }

    .three-column-text {
        font-size: 18px;
    }

    .three-column-content:not(.three-column-carousel) {
        flex-flow: row wrap;
        gap: 15px;
        align-items: center;
        justify-content: center;
    }

    .three-column-content:not(.three-column-carousel) .column-content {
        flex: 45%;
        max-width: 400px;
        height: auto;
    }    

    .three-column-carousel .slick-dots {
        width: 87%;
    }

    .three-column-carousel:not(.arrow) .slick-dots {
        max-width: none;
        width: 100%;
    }    
}

@media all and (max-width: 925px) {
    .three-column-container.three-column-card-container .carousel-copy-container .carousel-copy-text,
    .three-column-container.three-column-card-container .carousel-copy-container .carousel-copy-title {
        max-width: 560px;
    }    

    .three-column-container.three-column-card-container .three-column-content {
        flex-flow: row wrap;
        gap: 8px;
    }    

    .three-column-container.three-column-card-container .column-content {
        height: 100%;
    }

    .three-column-container.three-column-card-container .column-content.first-column {
        max-width: 668px;
        max-height: 330px;
    }
    
    .three-column-container.three-column-card-container .column-content.second-column {
        max-width: 335px;
        max-height: 330px;
    }
    
    .three-column-container.three-column-card-container .column-content.third-column {
        max-width: 335px;
        max-height: 330px;
    }      
}

@media all and (max-width: 825px) {
    .three-column-content:not(.three-column-carousel) {
        flex-flow: column;
        gap: 15px;
        align-items: center;
        justify-content: center;
    }

    .three-column-content.three-column-carousel.SmTabletCarousel .column-content {
        margin: 0px 15px;
        display: flex;
    }

    .three-column-content.three-column-carousel.SmTabletCarousel.arrow ~ .swiper-arrow {
        display: flex !important;
    }

    .three-column-content:not(.three-column-carousel) .carousel-item {
        flex: 100%;
    }    

    .three-column-carousel .slick-dots {
        width: 84%;
    }

    .three-column-carousel:not(.arrow) .slick-dots {
        max-width: none;
        width: 100%;
    }    
}

@media all and (max-width: 577px) {
    .three-column-container {
        padding: 24px 16px;
    }

    .three-column-container:has(.three-column-carousel) {
        padding: 24px 16px 60px 16px;
    }

    .three-column-title,
    .three-column-title h2 {
        font-size: 24px;
    }

    .three-column-text {
        font-size: 14px;
    }    

    .three-column-container .swiper-button-next,
    .three-column-container .swiper-button-prev {
        display: none;
    }
    
    .three-column-carousel ~ .swiper-button-next,
    .three-column-carousel ~ .swiper-button-prev {
        display: none;
    }    
    
    .three-column-carousel .slick-dots,
    .three-column-carousel:not(.arrow) .slick-dots {
        display: flex;
        left: 50%;
        width: 100%;
        transform: translateX(-50%);
        max-width: 110px;
        bottom: -16px;
        gap: 4px;
        height: 10px;
        border-radius: 240px;
        margin: 0px auto;
        text-align: center;        
        background-color: #F7F8F9;
        padding: 3px 7px;
        border-radius: 16px;
    }

    .three-column-carousel .slick-dots li.slick-active {
        background-color: black;
    }

    .three-column-carousel .slick-dots li {
        height: 3px;
        border: none;
        background-color: #D2DADF;
        border-radius: 240px;
    }     
    
    .three-column-content.three-column-carousel.SmTabletCarousel.arrow ~ .swiper-arrow,
    .three-column-content.three-column-carousel.LTabletCarousel.arrow ~ .swiper-arrow {
        display: none !important;
    }

    .three-column-content.dropdown-table .column-text {
        font-size: 0px;
        opacity: 0px;
        overflow: hidden;
        transition: all 300ms ease;
    }

    .three-column-carousel.flip + .column-text {
        font-size: 16px;
        opacity: 1;
    }

    .three-column-content.dropdown-table{
        flex-flow: column;
    }

    .three-column-content.dropdown-table .column-content .column-content-icon {
        flex: 30%;
    }

    .three-column-content.dropdown-table .column-content .column-content-title {
        flex: 65%;
    }

    .three-column-content.dropdown-table .column-content {
        flex-flow: row wrap;
        display: flex;
        gap: 0px;
        height: auto;
    }

    .three-column-content.dropdown-table .column-content-text {
        font-size: 0px;
        opacity: 0px;
        flex: 100%;
    }

    .three-column-content.three-column-carousel.dropdown-table .column-content {
        height: auto;
    }

    .three-column-content.dropdown-table .column-content .three-column-chevron {
        display: block;
        position: absolute;
        top: 10px;
        right: 10px;
        transform: rotate(0deg);
        transition: all 300ms ease;
    }

    .three-column-content.dropdown-table .column-content .three-column-chevron.flip {
        transition: all 300ms ease;
        transform: rotate(180deg);
    }

    .three-column-container.three-column-card-container .three-column-title {
        font-size: 20px;
    }

    .three-column-container.three-column-card-container .three-column-text {
        font-size: 14px;
    }

    .three-column-container.three-column-card-container .three-column-content {
        flex-flow: column;
        max-height: none;
        gap: 24px;
    }

    .three-column-container.three-column-card-container .arrow-container {
        display: none;
    }

    .three-column-container.three-column-card-container .carousel-copy-container .carousel-copy-text, 
    .three-column-container.three-column-card-container .carousel-copy-container .carousel-copy-title {
        max-width: none;
    }

    .three-column-container.three-column-card-container .column-content.first-column,
    .three-column-container.three-column-card-container .column-content.second-column,
    .three-column-container.three-column-card-container .column-content.third-column {
        max-width: 343px;
        max-height: 228px;
        flex: 100%;
    }   
}

/* End of the three column styles */

/* Start of Carousel Generic Styles */
.carousel-section {
    padding: 50px 80px;
    position: relative;
}

.carousel-section-title {
    font-family: 'Autonation Regular';
    font-size: 40px;
    font-style: normal;
    font-weight: bold;
    line-height: 120%; /* 57.6px */
    letter-spacing: 0.84px;  
    color: black;  
    margin: 0px auto 30px auto;  
    text-align: center;  
}

.carousel-section-text {
    font-family: 'Autonation light';
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 150%; /* 30px */
    letter-spacing: 0.35px;
    color: black;    
    text-align: center;        
}

.carousel {
    margin: 30px auto;
    text-align: center;
    display: flex;
    flex-flow: row;
    justify-content: center;
    align-items: center; 
}

.carousel-item {
    display: inline-block;
    margin: 0px 30px;
}

.carousel-item:first-child,
.carousel-item:last-child {
    margin: 0px;
}

.carousel-container {
    position: relative;
}

.carousel-item-title {
    text-align: center;
    font: normal normal bold 18px/24px;
    letter-spacing: 0px;
    color: #0A3453;   
    margin-bottom: 15px;
    font-family: 'Autonation Regular'; 
}

.carousel-item-text {
    text-align: center;
    font: normal normal normal 16px/24px;
    letter-spacing: -0.06px;
    color: #5C5C5C;
    margin-bottom: 30px;
    font-family: 'Autonation Regular';
}

.no-buttons .carousel-item-text {
    margin-bottom: 0px;
}

.slick-slide {
    height: 500px;
    width: 100%;
    max-width: 400px;
    padding: 16px;
    gap: 8px;
    flex-shrink: 0;
    align-self: stretch;
    background-color: black;
    position: relative;
    box-sizing: border-box;
    border-radius: 32px; 
    background-color: #D2DADF;
    margin: 0px 8px;
}

.carousel-copy-container {
    display: flex;
    flex-flow: column;
    align-items: center;
    justify-content: center;
    background-color: white;
    border-radius: 16px;
    padding: 16px;
    width: 90%;
    position: absolute;
    bottom: 16px;
    left: 50%;
    transform: translateX(-50%);        
}

.carousel-copy-title {
    font-family: 'Autonation Regular';
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: 150%;
    letter-spacing: 0.28px;
    color: black;        
}

.carousel-copy-text {
    font-family: 'Autonation light';
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 150%;
    letter-spacing: 0.245px;
    color: #555;        
}

.carousel-copy-container .primary-link {
    font-family: 'Autonation Regular';
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 150%;
    letter-spacing: 0.245px;
    text-decoration-line: underline;
    color: #E61464;
    margin-top: 10px;        
}

.slick-dots li button:before {
    font-size: 45px
}

.carousel-container .swiper-button-next, 
.carousel-container .swiper-button-prev {
    top: 50%;
    color: #000;
}

.carousel .slick-dots {
    position: absolute;
    width: 100%;
    max-width: 1170px;
    bottom: -30px;
    left: 1%;
    display: flex;
    flex-flow: row;
    justify-content: start;
    align-items: center;
    gap: 0px;    
    list-style-type: none;
    padding: 0px;
    margin: 0px;
}

.carousel:not(.arrow) .slick-dots {
    max-width: none;
}

.carousel .slick-dots li button,
.carousel ~ .swiper-arrow,
.carousel ~ .swiper-arrow::after
{
    display: none;
}

.carousel .slick-dots li {
    width: 100%;
    height: 0px;
    border-top: 1px solid #D2DADF;
    margin: 0px;
}

.carousel .slick-dots li.slick-active {
    border-top: 2.5px solid black;
}

.carousel.arrow ~ .swiper-arrow {
    position: absolute;
    top: auto;
    bottom: auto;
    left: auto;
    right: auto;
    background-color: black;
    border-radius: 50%;
    width: 38px;
    height: 38px;
    display: flex !important;
    flex-flow: row;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}

.carousel.arrow ~ .swiper-arrow.slick-disabled {
    opacity: 1;
    background-color: #F7F8F9;
}

.carousel.arrow ~ .swiper-arrow.slick-disabled svg path {
    fill: #D9D9D9;
    stroke: #D9D9D9;
}

.carousel.arrow ~ .swiper-arrow.swiper-button-next {
    right: 0px;
    bottom: -50px;
}

.carousel.arrow ~ .swiper-arrow.swiper-button-prev {
    right: 55px;
    bottom: -50px;
    transform: rotate(180deg);
}


@media all and (max-width: 1116px) {
    .carousel-item {
        max-width: none;
    }

    .carousel .slick-dots {
        width: 87%;
    }

    .carousel:not(.arrow) .slick-dots {
        max-width: none;
    }
}

@media all and (max-width: 901px) {
    .carousel-section {
        padding: 16px 16px 32px 16px;
    }

    .carousel-section-title {
        margin-bottom: 30px;
    }

    .carousel-container {
        margin: 0px auto;
        display: block;
    }

    .carousel-container .slick-dots {
        bottom: -20px;
    }

    .carousel {
        max-width: none;        
    }

    .carousel-item:first-child,
    .carousel-item:last-child {
        margin: 0px auto;
    }

    .carousel-item {
        margin: 0px auto;
        max-width: none;
        padding: 30px 15px;
    }

    .carousel .slick-dots {
        width: 84%;
    }

    .carousel:not(.arrow) .slick-dots {
        max-width: none;
    }    
}

@media all and (max-width: 769px) {

}

@media all and (max-width: 767px) { 
    .carousel-container {
        max-width: 330px;
        margin: 0px auto;
        display: block;
    }

    .carousel ~ .swiper-button-next,
    .carousel ~ .swiper-button-prev {
        display: none;
        visibility: hidden;
    }  
    
    .carousel-section-text {
        font-size: 14px;
    }

    .carousel-section-title {
        font-size: 24px;
    }
    
    .carousel .slick-dots {
        display: flex;
        left: 50%;
        width: 100%;
        transform: translateX(-50%);
        max-width: 110px;
        bottom: -16px;
        gap: 4px;
        height: 10px;
        border-radius: 240px;
        margin: 0px auto;
        text-align: center;        
        background-color: #F7F8F9;
        padding: 3px 7px;
        border-radius: 16px;
    }

    .carousel .slick-dots li.slick-active {
        background-color: black;
    }
 
    .carousel .slick-dots li {
        height: 3px;
        border: none;
        background-color: #D2DADF;
        border-radius: 240px;
    } 
}
/* End of Carousel Generic Styles */

/* Start of video section styles */
.centered-video-section {
    padding: 50px;
    position: relative;
}

.centered-video-section .img-section {
    display: block;
    max-width: 850px;
    height: 480px;
    margin: 0px auto;
}

.centered-video-section .text-section-title{
    text-align: center;
    font: normal normal bold 28px/32px;
    letter-spacing: 0px;
    color: #0A3453;    
    margin: 0px auto 50px auto;
    max-width: 490px;
    font-family: 'Autonation Regular';
}


.hytPlayerWrapOuter {
    height: 100%;
}

.hytPlayerWrap {
    display: block;
    position: relative;
    margin: 0px auto 0px auto;
    width: 100%;
    height: 100%;
}

.hytPlayerWrap.ended::after {
    content: open-quote;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    cursor: pointer;
    background-color: black;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 64px 64px;
    background-image: url(data:image/svg+xml;utf8;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMjgiIGhlaWdodD0iMTI4IiB2aWV3Qm94PSIwIDAgNTEwIDUxMCI+PHBhdGggZD0iTTI1NSAxMDJWMEwxMjcuNSAxMjcuNSAyNTUgMjU1VjE1M2M4NC4xNSAwIDE1MyA2OC44NSAxNTMgMTUzcy02OC44NSAxNTMtMTUzIDE1My0xNTMtNjguODUtMTUzLTE1M0g1MWMwIDExMi4yIDkxLjggMjA0IDIwNCAyMDRzMjA0LTkxLjggMjA0LTIwNC05MS44LTIwNC0yMDQtMjA0eiIgZmlsbD0iI0ZGRiIvPjwvc3ZnPg==);
}

.hytPlayerWrap.paused::after {
    content: open-quote;
    position: absolute;
    top: 0px;
    left: 0;
    bottom: 0px;
    right: 0;
    cursor: pointer;
    background-color: black;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 40px 40px;
    background-image: url(data:image/svg+xml;utf8;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEiIHdpZHRoPSIxNzA2LjY2NyIgaGVpZ2h0PSIxNzA2LjY2NyIgdmlld0JveD0iMCAwIDEyODAgMTI4MCI+PHBhdGggZD0iTTE1Ny42MzUgMi45ODRMMTI2MC45NzkgNjQwIDE1Ny42MzUgMTI3Ny4wMTZ6IiBmaWxsPSIjZmZmIi8+PC9zdmc+);
}

.hytPlayerWrap iframe {
    width: 100%;
    height: 100%;
}

@media all and (max-width: 641px) {
    .centered-video-section .img-section {
        height: 340px;
    }
}

@media all and (max-width: 577px) {
    .centered-video-section {
        padding: 50px 15px;
    }    
}
/* End of video section styles */

/* Start of table section styles */
.table-container {
    background-color: white;
    padding: 56px 80px;
    display: flex;
    flex-flow: column;
    gap: 16px;
}

.table-container-title {
    font-family: 'Autonation Regular';
    font-size: 40px;
    font-style: normal;
    font-weight: bold;
    line-height: 120%;
    letter-spacing: 0.84px;
    color: black;
    text-align: center; 
    margin: 0px;   
}

.table-container-text {
    font-family: 'Autonation light';
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 150%;
    letter-spacing: 0.35px;
    color: black;
    text-align: left; 
    margin: 0px auto;
    max-width: 1280px;   
}

.mlp-table {
    background-color: #F7F8F9;
    border-radius: 16px;
    width: 100%;
    max-width: 1024px;
    margin: 0px auto;
    box-sizing: border-box;
}

.mlp-table.alt-table {
    background-color: transparent;
    display: flex;
    flex-flow: row wrap;
    gap: 0px 40px;
    margin: 0px;
    max-height: none;
    max-width: none;
}

.mlp-table.alt-table .mlp-table-column {
    flex: 48%;
}

.alt-table .mlp-table-container {
    max-width: 620px;
}

.alt-table .table-title-content {
    font-family: 'Autonation Regular';
    color: black;
    font-size: 16px;
    font-weight: 500;
    letter-spacing: 0.28px;
    padding: 0px;
    margin-bottom: 0px;            
}

.alt-table .table-text-content {
    padding: 0px;
}

.mlp-table.left-aligned {
    margin: 0px;
}

.mlp-table.right-aligned {
    margin: 0px 0px 0px auto;
}

.mlp-table-container {
    padding: 16px 0px;
    border-bottom: 1px solid #D2DADF;    
}

.second-column .mlp-table-container:last-child {
    border-bottom: none;
}

.alt-table .mlp-table-container .table-column:last-child {
    border-bottom: 1px solid #D2DADF;
}

.table-title-content {
    display: flex;
    flex-flow: row;
    align-items: center;
    justify-content: space-between;
    font-family: 'Autonation Regular';
    font-size: 24px;
    font-style: normal;
    font-weight: 700;
    line-height: 150%;
    letter-spacing: 0.42px;
    color: black;
    margin-bottom: 8px;   
    padding: 0px 16px;    
    cursor: pointer; 
}

.table-title-content:has(.flip) + .table-text-content {
    font-size: 16px;
    opacity: 1;
}

.alt-table .table-title-content:has(.flip) + .table-text-content {
    font-size: 14px;
    opacity: 1;
    margin-top: 24px;
    padding-right: 10px;
}

.table-title-chevron {
    transform: rotate(180deg);    
}

.table-title-chevron.flip {
    transform: rotate(0deg);
    transition: all 300ms ease;    
}

.alt-table .table-title-chevron.flip {
    transform: none;
}

.alt-table .table-title-chevron.flip path:first-child {
    display: none;
}

.alt-table .table-title-chevron {
    width: 100%;
    height: 100%;
    transform: none;
    max-height: 24px;
    max-width: 24px;    
}

.table-text-content {
    font-family: 'Autonation light';
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 150%;
    letter-spacing: 0.28px;
    color: #5C5C5C;    
    overflow: hidden;
    padding: 0px 16px;
    font-size: 0px;
    opacity: 0;
    transition: all 300ms ease;
}

@media all and (max-width: 1116px) {
    .table-container {
        padding: 56px 40px;
    }

    .table-container-title {
        font-size: 32px;
    }

    .table-title-content {
        font-size: 24px;
    }

    .table-container-text {
        font-size: 16px;
    }   

    .table-container .alt-table .mlp-table-container {
        max-width: none;
    }

    .alt-table .second-column .mlp-table-container:last-child {
        border-bottom: none;
    }
}

@media all and (max-width: 825px) {
    .table-container-title {
        font-size: 24px;
    }

    .table-container .mlp-table.alt-table {
        max-height: none;
    }

    .table-container .alt-table .mlp-table-container {
        max-width: none;
    }
}

@media all and (max-width: 577px) {
    .table-container {
        padding: 24px 16px;
    }

    .table-container-text {
        font-size: 14px;
    }  

    .table-title-content:has(.flip) + .table-text-content {
        font-size: 14px;
    }

    .alt-table .table-title-content:has(.flip) + .table-text-content {
        font-size: 12px;
        margin-top: 16px;
    }
    
    .table-container-title {
        font-size: 16px;
    }

    .table-container .alt-table .table-title-content {
        font-size: 14px;
    }

    .table-title-content {
        font-size: 16px;
    }
}
/* End of table section styles */