@import url('https://fonts.googleapis.com/css2?family=Lato:wght@300;400;600;700;900&display=swap');

/* ========== Global ========== */
body { font-family: 'Lato', sans-serif; color: #555555; overflow-x: hidden; }
a { 
    transition-duration: 0.5s;
    -moz-transition-duration: 0.5s;
    -o-transition-duration: 0.5s;
    -webkit-transition-duration: 0.5s;
    -ms-transition-duration: 0.5s;
    text-decoration: none; 
}
/* ========== text ========== */
.text-negro { color: #111111; }
.text-rojo { color: #e21625; }
.text-gris-claro { color: #777; }
.text-gris-oscuro { color: #555; }
.fw-400 { font-weight: 400!important; }
.fw-600 { font-weight: 600!important; } 
.fw-700 { font-weight: 700!important; }
.fw-900 { font-weight: 900!important; }
.text-underline { text-decoration: underline!important; }
/* ========== Links ========== */
.zelda { color: #555; }
.zelda:hover { color: #fa2837; }
/* ========== Buttons ========== */
.btn-rojo { background: #e21625; color: #fff!important; font-weight: 700; }
.btn-rojo:hover { color: #111!important; }
/* ========== Backgrounds ========== */
.bg-rojo { background: #e21625; }
.bg-negro { background: #111; }

.hr-rojo { border-bottom: 1px solid #e21625; margin-top: 0px; }

.alert-info { border: 1px solid #0c5460; color: #0c5460!important; }
.alert-info i { font-size: 3rem; }
.alert-info.alert-shadow { box-shadow: 0 0.125rem 0.625rem #0c5460, 0 0.0625rem 0.125rem #0c5460; }
/* ========== button top ========== */
#btn-top { position: fixed; bottom: 20px; right: 30px; z-index: 99; font-size: .7rem; border: none; outline: none; background-color: #e21625; color: #fff; cursor: pointer; padding: 12px; border-radius: 5px; box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23); }
#btn-top:hover { background: #111;}
/* ========== Header ========== */
.text-contact-header { color: #111; font-size: .9rem; font-weight: 600; line-height: 1rem; margin: 0; text-transform: uppercase; }
.icon-contact-header { font-size: 1.5rem; }
.img-logo-header { width: 150px; height: auto; padding-top: 5px; padding-bottom: 5px; }
.zelda-header { color: #555; }
.zelda-header:hover { color: #fa2837; text-decoration: none; }
.social-icons { font-size: 25px; }
.social-icons a { margin-left: 5px; margin-right: 5px; color: #555; }
.social-icons a:hover { color: #fa2837; }
.btn-iniciar-sesion { background: #fa2837 ; font-weight: 500; line-height: 30px; color: #fff; font-size: 14px; }

/* ========== Nav ========== */
#menu-nav { background: #111111 none repeat scroll 0 0; }
#menu-nav .nav-link { color: #fff; font-weight: 600; font-size: .9rem; text-transform: uppercase; margin-left: 10px; margin-right: 10px;  }
#menu-nav .nav-link:hover { color: #fa2837; }
#menu-nav .dropdown-menu { background: #fa2837 none repeat scroll 0 0 !important; border-radius: 0px; }
#menu-nav .dropdown-item { color: #fff; text-transform: uppercase; font-size: .9rem; }
.navbar-nav > li > .dropdown-menu li:hover, .navbar-expand-lg .navbar-nav li:hover .dropdown-menu li:hover, .dropdown-menu > .active > li, .dropdown-menu > .active > li:focus, .dropdown-menu > .active > li:hover, .dropdown-menu > li > li:focus, .dropdown-menu > li :hover { background: #111; }
.navbar-nav > li > .dropdown-menu li { border-bottom: 1px solid #e21625; }
.navbar-nav > li > .dropdown-menu li { padding: 5px; margin: 0; }
.dropdown:hover>.dropdown-menu { display: block; }
.dropdown-menu { top: 90%!important; }
.active-nav { color: #fa2837!important; }
.navbar-toggler { background: #fff; color: #191919; border-radius: 5px; }

/* ========== Footer ========== */
#footer-principal .footer-top { background: #222222; }
#footer-principal .footer-top a { color: #fff; font-size: 1rem; }
#footer-principal .footer-top a:hover { color: #e21625; text-decoration: none; }
#footer-principal .footer-top ul { padding-left: 0px!important; list-style: none; }
#footer-principal .footer-top li { margin-bottom: 15px; }
#footer-principal .footer-bottom { background: #191919 ; }
/* ========== Modal Sesion ========== */
#modal-iniciar-sesion .modal-dialog { top: 100px!important; }
#modal-iniciar-sesion .modal-content { position: relative; }
#modal-iniciar-sesion .header-modal-iniciar-sesion { position: absolute; box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23); background: #e21625; color: #fff; font-weight: 600; text-align: center; top: -40px; left: 45px; padding: 10px; border-radius: 10px; }
#modal-iniciar-sesion label { font-size: 1.5rem; color: #666; font-weight: 500; }
#modal-iniciar-sesion .form-control { border: none; border-bottom:  1.5px solid #e21625; border-radius: 0px; }
#modal-iniciar-sesion .btn-registrate { color: #338282; border: none;  }
#modal-iniciar-sesion .btn-registrate:hover { border: 1px solid #338282; background: #33828227; box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); transition: all 0.3s cubic-bezier(.25,.8,.25,1); text-decoration: none; }
/* ========== Home ========== */

#banner-start .carousel-item { height:70vh; color:#fff; }
#banner-start .carousel-item.banner-1 { background: url('../img/home/banner-principal-1.png'); background-attachment:fixed;background-size:cover;background-position:center; }
#banner-start .carousel-item.banner-2 { background: url('../img/home/banner-principal-2.png'); background-attachment:fixed;background-size:cover;background-position:center; }
#banner-start .carousel-item.banner-3 { background: url('../img/home/banner-principal-3.png'); background-attachment:fixed;background-size:cover;background-position:center; }
#banner-start .wrapp-text { padding: 7% 0 0%; }
#banner-start .banner-text { background: rgba(51, 51, 51, 0.3); margin: 0px 20px 0px 20px; color: #fff; }
#banner-start .banner-text h1 { font-weight: 900 !important; font-size: 3rem; }

/*
#banner-start .carousel-caption { top: 20%!important; left: 20px!important; }
.banner-text { background: rgba(51, 51, 51, 0.3); margin: 0px 20px 0px 20px; color: #fff; }
.banner-text h1 { font-weight: 900 !important; font-size: 3rem; }
*/

#search-auto { background: #eeeeee; }
#search-auto .form-control { background: #222; border-radius: 3px; color: #fff; border: #222 solid 1px; font-size: 1rem; }

#grupo-somer .servicios { border: 3px solid #e1e1e1; border-radius: 0 30px; padding: 30px 25px; }
#grupo-somer .servicios img { border-radius: 0 30px; }

#home-destacados { background: #eeeeee; }
#home-destacados .card { border-radius: 0px; height: 535px; overflow: hidden;  }
#home-destacados .img-top-cards-home { height: 300px; overflow: hidden; background: rgba(51, 51, 51, 0.3); }
#home-destacados .card:hover { box-shadow: 0 0 20px rgba(0, 0, 0, 0.4); }

#numeros {  background: url('../img/home/img-numeros.jpg'); background-attachment: scroll; background-size:cover;background-position:center;height:80vh;color:#fff; padding: 10% 0 0%; }
#numeros .card { background: #e21625; }
#numeros .icons { font-size: 4rem; display: block; }
#numeros .text { font-size: 3rem; font-weight: 900; }

#home-recientes .card { border-radius: 0px; height: 535px; overflow: hidden; }
#home-recientes .img-top-cards-home { height: 300px; overflow: hidden; background: rgba(51, 51, 51, 0.3); }
#home-recientes .card:hover { box-shadow: 0 0 20px rgba(0, 0, 0, 0.4); }

.destacado { position: relative; }
.tira-destacado { position: absolute; top: 10px; right: 10px; background: #e21625; color: #fff; font-weight: 700; padding: 5px; box-shadow: 0 0 10px #e2162486; font-size: .8rem; }

#mv { background: url('../img/conocenos/bg-mv.jpg') center; background-size: cover; background-attachment: fixed; background-position: center; }
#mv .card { background: rgba(19, 19, 19, 0.8); border: 1px solid rgba(238, 238, 238, 0.3); height: 265px; }
#valores .card { border-radius: 0px; }
.card-valores { height: 165px; }
.card-valores:hover { box-shadow: 0 0 20px rgba(0, 0, 0, 0.4); }

.tira-vendido { position: absolute; top: 10px; left: 10px; background: #338282; color: #fff; font-weight: 700; padding: 5px; box-shadow: 0 0 10px #338282; font-size: .8rem; }
.tira-promocion { position: absolute; bottom: 10px; left: 15%; right: 15%; background: #4caf50; color: #fff; font-weight: 700; padding: 5px; box-shadow: 0 0 10px #4caf50; font-size: .8rem; }

.nuestro-catalogo { background: #eee; }
.nuestro-catalogo #menu-nav { margin-bottom: 0px; }
.nuestro-catalogo header { background: #fff!important; }
.nuestro-catalogo .btn-search { background: #fff; border: 1px solid #ced4da; border-radius: 0px!important; color: #888!important; }
.nuestro-catalogo .btn-search:hover { background: #111; color: #fff!important; }
.nuestro-catalogo a, a:hover, a:focus { color: inherit; text-decoration: none; transition: all 0.3s; }
.nuestro-catalogo .navbar { background: #fff; border: none; border-radius: 0; }
.nuestro-catalogo .navbar-btn { box-shadow: none; outline: none !important; border: none; }
.nuestro-catalogo .line { width: 100%; height: 1px; border-bottom: 1px dashed #ddd; margin: 40px 0; }
.row-autos-catalogo:hover { box-shadow: 0 0 8px rgba(51, 51, 51, 0.2); }
.breadcrumb { background: #eee!important; }
.zelda-breadcrumb { color: #e21625!important; }
.zelda-breadcrumb:hover { text-decoration: underline!important; }
.galery-movil { display: none; }
#form-catalogo-filtros .form-control { background: transparent!important; border: 1px solid #e21625; color: #fff!important; }
#form-catalogo-filtros select.form-control, option { background: #222; }

.button-share:hover { opacity: .8; }

#contacto { background: url('../img/contacto/bg-contacto.jpg'); background-attachment: fixed; background-size:cover; background-position:center; padding: 30px; }

/* ---------------------------------------------------
    SIDEBAR STYLE
----------------------------------------------------- */
.wrapper { display: flex; width: 100%; align-items: stretch; }
#wrapp-content-p { background: #fff; }
#sidebar { min-width: 250px!important; max-width: 250px!important; background: #222; color: #fff; transition: all 0.3s; }
#sidebar.active { margin-left: -250px; }
#sidebar .sidebar-header { padding: 20px; background: #e21625; color: #fff; }
#sidebar ul.components { padding: 20px 0; border-bottom: 1px solid #e21625; }
#sidebar ul p { color: #fff; padding: 10px; }
#sidebar ul li a { padding: 10px; font-size: 1rem; display: block; }
#sidebar ul li a:hover { color: #e21625; cursor: pointer!important; }

/* ---------------------------------------------------
    CONTENT STYLE
----------------------------------------------------- */
#content { width: 100%; padding: 20px; min-height: 100vh; transition: all 0.3s; }
/* ---------------------------------------------------
    MEDIAQUERIES
----------------------------------------------------- */
@media (max-width: 768px) {
    #sidebar {
        margin-left: -250px;
    }
    #sidebar.active {
        margin-left: 0;
    }
    #sidebarCollapse span {
        display: none;
    }
}

.card-contacto { background: rgba(51, 51, 51, 0.8); }
.card-contacto label { color: #fff!important; }
.card-contacto .form-control { background: rgba(255, 255, 255, 0.2)!important; border: none; border-bottom: 1px solid #e21625!important; color: #fff!important; }


/* ---------------------------------------------------
    Cotizar Auto
----------------------------------------------------- */
#cotizar-mi-auto .form-control {
    border-bottom: 2px solid #e21625;
    border-radius: 0;
}

#cotizar-mi-auto  option {
    color: #fff;
}

input[type="file"] { display: none; }
.input-label-file { width: 100%; cursor: pointer; color:#495057; background-color:#fff; background-clip: padding-box; border: 1px solid#ced4da; border-radius: .25rem; }
.input-label-file:hover { opacity: .8; }
input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button {  -webkit-appearance: none;  margin: 0; }
input[type=number] { -moz-appearance:textfield; }
.wrapp-img-sub { max-width: 200px; width: 100%; height: auto; }
.wrapp-img-sub img { width: 100%; height: auto; }


@media(max-width:550px) {
    #home-destacados .card { height: auto; }
    #home-recientes .card { height: auto; }

    #banner-start .carousel-item { height: 70vh; }
    #banner-start .wrapp-text { padding-bottom: 20px; }
    #banner-start .banner-text h1 { font-size: 2rem; }

    .d-none-550 { display: none; }

    #grupo-somer .row { padding-left: 15px!important; padding-right: 15px!important; }

    #numeros { height: auto; }

    #mv .card { height: auto; }

    .card-valores { height: auto; }
    
    .nuestro-catalogo .ver-automovil div { border: none!important; }

    .galery-escritorio { display: none; }

    .galery-movil { display: block; }
}