@charset "UTF-8";
/* CSS Document */

/* Custom Properties */
:root {
    --first-color: rgb(194, 0, 47);
    --first-color-hover: rgb(142, 0, 33);
    --second-color: rgb(85, 85, 89);
    --second-color-80p: rgb(119, 119, 122);
    --second-color-60p: rgb(153, 153, 155);
    --second-color-20p: rgb(221, 221, 222);
    --second-color-15p: rgb(230, 230, 230);
    --second-color-10p: rgb(238, 238, 238);
    --second-color-5p: rgb(246, 246, 247);
    --bg-color: rgb(251, 251, 253);
}


/* Reset Styles */
body {
    font-family: 'Bariol-Regular', sans-serif;
    color: var(--second-color-80p);
}

/* Bootstrap Styles */

.navbar-brand img {
    width: auto;
    height: 55px;
}

.nav-link {
    transition: all 0.5s ease-out;
}

.nav-link:hover {
    color: var(--first-color);
}

.btn-danger {
    width: 100%;
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--first-color);
    --bs-btn-border-color: var(--first-color);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--first-color-hover);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--first-color);
    border: none;
    border-radius: 0;
}

.btn-danger span {
    padding-top: 2px;
}

/* My Styles */

.BariolRegular {font-family:'Bariol-Regular', sans-serif;}
.BariolBold {font-family:'Bariol-Bold', sans-serif;}
.BariolItalic {font-family:'bariolitalic', sans-serif;}
.AktivGroteskBold {font-family: 'AktivGroteskW01-Bold', sans-serif; font-weight: bold;}


.bg-color {
    background-color: var(--bg-color);
}

.bg-auto {
    background-image: url('../img/bg-auto.png');
    background-repeat: no-repeat;
    background-position: bottom right;
    background-size: 85%; /* a media queries */
    min-height: 90vh; /* a media queries */
}


.bg-auto h1 {
    font-family:'Bariol-Bold', sans-serif;
    font-size: 3rem;
}

.bg-auto h3 {
    font-family:'Bariol-Bold', sans-serif;
    font-size: 2rem;
}

.bg-auto p {
    font-size: 2rem;
}

.bg-auto section {
    padding-bottom: 150px;
}

.bg-auto-gracias {
    background-repeat: no-repeat;
    background-position: bottom right;
    background-size: 45%; /* a media queries */
    min-height: 60vh; /* a media queries */
}

.bg-auto-gracias h1 {
    font-family:'Bariol-Bold', sans-serif;
    font-size: 3rem;
}

.bg-auto-gracias h3 {
    font-family:'Bariol-Bold', sans-serif;
    font-size: 2rem;
}

.bg-auto-gracias p {
    font-size: 2rem;
}

.bg-auto-gracias section {
    padding-bottom: 150px;
}

.bg-hero-image {
    background-image: var(--bg-image);
    background-repeat: no-repeat;
    background-size: 193%;
    background-position-x: left;
    background-position-y: 11rem;
}

.bg-neumatico {
    background-image: url('../img/bg-neumatico.png');
    background-repeat: repeat-x;
    background-size: contain;
    min-height: 142px;
}

.bg-gradiente-neumatico {
    background: rgba(253,253,251,0.9);
    background: -moz-linear-gradient(left, rgba(253,253,251,0.9) 0%, rgba(253,253,251,0) 15%, rgba(253,253,251,1) 35%, rgba(253,253,251,1) 50%, rgba(253,253,251,1) 65%, rgba(253,253,251,0) 85%, rgba(253,253,251,0.9) 100%);
    background: -webkit-gradient(left top, right top, color-stop(0%, rgba(253,253,251,0.9)), color-stop(15%, rgba(253,253,251,0)), color-stop(35%, rgba(253,253,251,1)), color-stop(50%, rgba(253,253,251,1)), color-stop(65%, rgba(253,253,251,1)), color-stop(85%, rgba(253,253,251,0)), color-stop(100%, rgba(253,253,251,0.9)));
    background: -webkit-linear-gradient(left, rgba(253,253,251,0.9) 0%, rgba(253,253,251,0) 15%, rgba(253,253,251,1) 35%, rgba(253,253,251,1) 50%, rgba(253,253,251,1) 65%, rgba(253,253,251,0) 85%, rgba(253,253,251,0.9) 100%);
    background: -o-linear-gradient(left, rgba(253,253,251,0.9) 0%, rgba(253,253,251,0) 15%, rgba(253,253,251,1) 35%, rgba(253,253,251,1) 50%, rgba(253,253,251,1) 65%, rgba(253,253,251,0) 85%, rgba(253,253,251,0.9) 100%);
    background: -ms-linear-gradient(left, rgba(253,253,251,0.9) 0%, rgba(253,253,251,0) 15%, rgba(253,253,251,1) 35%, rgba(253,253,251,1) 50%, rgba(253,253,251,1) 65%, rgba(253,253,251,0) 85%, rgba(253,253,251,0.9) 100%);
    background: linear-gradient(to right, rgba(253,253,251,0.9) 0%, rgba(253,253,251,0) 15%, rgba(253,253,251,1) 35%, rgba(253,253,251,1) 50%, rgba(253,253,251,1) 65%, rgba(253,253,251,0) 85%, rgba(253,253,251,0.9) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fdfdfb', endColorstr='#fdfdfb', GradientType=1 );
    width: 100%;
    min-height: 142px;
}

.bg-road {
    background-image: url('../img/bg-road.png');
    background-repeat: repeat-x;
    background-size: contain;
    min-height: 200px;
}

.bg-second-color-20p {
    background-color: var(--second-color-20p);
}

.bg-second-color-15p {
    background-color: var(--second-color-15p);
}

.bg-second-color-10p {
    background-color: var(--second-color-10p);
}

.bg-second-color-5p {
    background-color: var(--second-color-5p);
}

.bg-second-color-20p div, a {
    font-size: 1rem;
    padding: 5px 0;
}

.blanco {
    background-color: white;
}

.clip-path-ico {
    clip-path: circle();
    /*width: auto;*/
    text-align: center;
}

.form-input-uno {
    display: block;
    width: 100%;
    padding: 0.375rem 0.75rem;
    font-size: 1.2rem;
    font-weight: 400;
    line-height: 2;
    color: var(--second-color);
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    /*background-color: var(--second-color-20p);*/
    background-clip: padding-box;
    border: none;
    border-radius: 0;
}

.form-control {
    display: block;
    width: 100%;
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: var(--bs-body-color);
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-color: var(--bs-body-bg);
    background-clip: padding-box;
    border: var(--bs-border-width) solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.link-ftr-landingpage {
    color: var(--first-color);
    text-decoration: none;
    transition: all 0.5s ease-out;
}

.link-ftr-landingpage:hover {
    color: rgb(142, 0, 32);
    text-decoration: none;
}

.txt-beneficios {
    color: var(--second-color);
    font-size: 1.2rem;
}

.txtBold {
    font-family:'Bariol-Bold', sans-serif;
}

.rojoana {
    color: var(--first-color);
}

.tt-hero {
    font-family:'Bariol-Bold', sans-serif;
    font-size: 3rem;
}

.subtt-hero {
    font-family:'Bariol-Regular', sans-serif;
    font-size: 2rem;
}

.txt-hero {
    font-size: 2rem;
}




/*// X-Small devices (portrait phones, less than 576px)
// No media query for `xs` since this is the default in Bootstrap */

/* // Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {
    .bg-auto {
        background-size: 60%;
        min-height: 85vh;
    }

    .bg-auto h1 {
        font-size: 2rem;
        width: 250px;
    }
    
    .bg-auto h3 {
        font-size: 1.8rem;
        width: 150px;
    }
    
    .bg-auto p {
        font-size: 1.3rem;
        width: 220px;
    }
    
    .bg-hero-image {
        background-size: 100%;
        background-position-y: -2rem;
    }
}

/* // Medium devices (tablets, 768px and up) */ 
@media (min-width: 768px) {
    .bg-auto {
        background-size: 80%;
        min-height: 73vh;
    }
    
    .bg-auto h1 {
        font-size: 4rem;
        width: auto;
    }
    
    .bg-auto h3 {
        font-size: 3rem;
        width: 278px;
    }
    
    .bg-auto p {
        font-size: 2.6rem;
        width: auto;
    }
    
    .bg-hero-image {
        background-size: 143%;
        background-position-y: 9rem;
    }

    .bg-second-color-20p div, a {
        font-size: 0.9rem;
    }

}

/* // Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
    .bg-auto {
        background-size: 55%;
        min-height: 72vh;
    }

    .bg-auto h1 {
        font-size: 3.8rem;
        width: 480px;
    }

    .bg-auto p {
        font-size: 2.2rem;
        width: 367px;
    }

    .bg-hero-image {
        background-size: 100%;
        background-position-y: 1rem;
    }

}

/* // X-Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
    .bg-auto {
        background-size: 61%;
        min-height: 73vh;
    }

    .bg-auto h1 {
        font-size: 4.6rem;
        width: 554px;
    }

    .bg-auto p {
        font-size: 2.8rem;
        width: 467px;
    }    
}

/* // XX-Large devices (larger desktops, 1400px and up) */
@media (min-width: 1400px) {
    .bg-auto {
        background-size: 58%;
        min-height: 76vh;
    }

    .bg-auto h1 {
        font-size: 5rem;
        width: 604px;
    }

    .bg-auto p {
        font-size: 3rem;
        width: 498px;
    }

    .bg-auto h3 {
        font-size: 3.2rem;
        width: 293px;
    }

    .bg-hero-image {
        background-size: 100%;
        background-position-y: -6rem;
    }
}

.ui-autocomplete-loading {
    /* background: #fff url(/assets/images/ring.gif?13) no-repeat 95% !important; */
}
  
.ui-autocomplete {
    position: absolute;
    top: 0;
    left: 0;
    cursor: default;
    max-height: 280px;
    overflow-y: auto;
}
  
.ui-widget-content {
    border: 1px solid #CDCDCD !important;
    background: #ffffff !important;
    color: var(--second-color) !important;
}
  
.ui-widget-content a {
    color: var(--second-color) !important;
}
  
.ui-menu {
    list-style: none;
    padding: 2px;
    margin: 0;
    display: block;
    outline: none;
}
  
.ui-menu .ui-menu {
    margin-top: -3px;
    position: absolute;
}
  
.ui-menu .ui-menu-item {
    margin: 0;
    padding: 0;
    width: 100%;
      /* support: IE10, see #8844 */
      /*list-style-image: url(data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7);*/
}
  
.ui-menu .ui-menu-divider {
    margin: 5px -2px 5px -2px;
    height: 0;
    font-size: 0;
    line-height: 0;
    border-width: 1px 0 0 0;
}
  
.ui-menu .ui-menu-item a {
    text-decoration: none;
    display: block;
    padding: 2px .4em;
    line-height: 1.5;
    min-height: 0; /* support: IE7 */
    font-weight: normal;
}
  
.ui-menu .ui-menu-item a.ui-state-focus,
.ui-menu .ui-menu-item a.ui-state-active {
    font-weight: normal;
    margin: -1px;
}
  
.ui-menu-item-wrapper.ui-state-active{
    color: var(--second-color) !important;
    border: 1px solid var(--second-color-20p) !important;
    background: var(--second-color-20p) !important;
}
  
.ui-menu .ui-state-disabled {
    font-weight: normal;
    margin: .4em 0 .2em;
    line-height: 1.5;
}
  
.ui-menu .ui-state-disabled a {
    cursor: default;
}

.error-input{
    border: 1px solid var(--first-color) !important;
}