/*tipografía*/
@import url('https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i');
@import url('https://fonts.googleapis.com/css?family=Lato:100,300,400,700,900');

body {
    font-family: inherit;
}

/*color del menú responsive*/
.navbar-toggle {
    background-color: #f9810a;
}

/*LOGO del login*/

/*LOGO del login*/
#login .logo {
    /*background-image: url('../images/logo-iloop.png');*/ /*cambiar la url del logo*/
    height: 132px; /*ajusta el espacio blanco de arriba y abajo del logo */
    background-position: center;
}

/* color de los enlaces */
#login .color_fonts a {
    color: #f9810a;
}

/*LOGO del header - menú*/
.navbar > .container .logo-menu,
.navbar > .container-fluid .logo-menu {
    /*background-image: url('../images/logo.png'); */
    margin-top: 68px;
    margin-bottom: -15px;
    width: 180px; /*regula el ancho de la imagen del logo*/
}

/* color principal de elementos primary button / scrollbar color */
.btn.color_button,
#menuppal > li > a span:before,
#menuCarrito > li > a span:before,
#menuUser > li > a span:before,
.custom-scrollbar.color_button::-webkit-scrollbar,
.custom-scrollbar.color_button::-webkit-scrollbar-thumb {
    background: #f9810a !important;
}

.btn.btn-promotion.active i {
    color: #b93131 !important;
}

.btn.btn-priority.active {
    background: #808080 !important;
}

/* color de textos de los botones */
.btn.color_button {
    color: white !important;
}

/*tengo que ver donde impacta en la totalidad de las UI*/

@media (max-width:1024px) {
    
}

@media (max-width:768px) {
    
}

@media (max-width:425px) {
    
}

@media (max-width:375px) {
    
}

/*color del boton del buscador*/
.searchButton {
    border: 1px solid black;
    background: black;
}

/*color del texto del buscador*/
.searchTerm:focus {
    color: black;
}

/*botón aplicar del carrito*/
.btn-aplicar {
    /* color de fondo */
    background: black;
}

.back-to-top {
    background: #ff8300;
}

.navbar > .container .logo-menu, .navbar > .container-fluid .logo-menu {
    margin-top: 14px;
}

.header.shrink .navbar > .container .logo-menu, .navbar > .container-fluid .logo-menu {
    margin-top: -1px !important;
    width: 120px;
}

@media (max-width:1024px) {
    .navbar > .container .logo-menu, .navbar > .container-fluid .logo-menu {
        margin-top: 56px;
        margin-bottom: -21px;
        width: 150px;
    }
}

@media (max-width:988px) {
    /*LOGO del header - menú*/
    .navbar > .container .logo-menu, .navbar > .container-fluid .logo-menu {
        /*background-image: url('../images/logo.png'); */
        margin-top: 2.9%;
        /*position: absolute;*/
        width: 150px; /*regula el ancho de la imagen del logo*/
    }
}

@media (max-width:764px) {
    /*LOGO del header - menú*/
    .navbar > .container .logo-menu,
    .navbar > .container-fluid .logo-menu {
        margin-left: 10%;
        margin-top: 10%;
        position: absolute;
    }
}

@media (max-width:425px) {
    /*LOGO del header - menú*/
    .navbar > .container .logo-menu,
    .navbar > .container-fluid .logo-menu {
        margin-left: -1%;
    }

    .header.shrink .navbar > .container .logo-menu, .navbar > .container-fluid .logo-menu {
        margin-top: 13px !important;
    }
}

@media (max-width:375px) {
    /*LOGO del header - menú*/
    .navbar > .container .logo-menu,
    .navbar > .container-fluid .logo-menu {
        margin-top: 11%;
        margin-left: 0%;
    }

    .header.shrink .navbar > .container .logo-menu, .navbar > .container-fluid .logo-menu {
        margin-top: 13px !important;
    }
}

.icon {
    /*fill: #3aa2fd;*/
    color: #f9810a;
}

.imagen-gracias {
    background-color: #f9810a;
}

.pagination > .active > a {
    background-color: #f9810a;
    border-color: #f9810a;
}

    .pagination > .active > a, .pagination > .active > a:focus, .pagination > .active > a:hover, .pagination > .active > span, .pagination > .active > span:focus, .pagination > .active > span:hover {
        background-color: #f9810a;
        border-color: #f9810a;
    }

.pagination > li > a:focus, .pagination > li > a:hover, .pagination > li > span:focus, .pagination > li > span:hover {
    color: #f9810a;
}

.maintenance-heading {
    color: #f9810a;
}

.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
    background-color: #f9810a !important;
    color: #fff;
}

.select2-container--default.select2-container--open.select2-container--below .select2-selection--single, .select2-container--default.select2-container--open.select2-container--below .select2-selection--multiple {
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px #f9810a;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px #f9810a;
    -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
    -webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
    transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
    transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
    transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
    border-color: #f9810a;
}