/* your styles go here */
html,body {
margin:0;
padding:0;
min-height: 100vh;
overflow-x: hidden;
}
html {
overflow-x: initial !important;
}
#all{
background-color: #F5F5F5 !important;
}
.backAzul{
background-color: #14265b;
color: #D4D7DD;
}
.colorAzul{
color: #14265b !important;
}
.colorGris ul li a{
color: #66676B !important;
}
.colorGrisClaro{
color: #9AA4B5 !important;
}
.borderGrisClaro{
border: 0 0 0 1px solid #9AA4B5 !important;
}
#backAzulHover li:hover {
background-color: #003E7F !important;
color: white !important;
}
#backAzulHover li {
padding: 4%;
color: #D4D7DD !important;
}
.sinbordes{
border: 0 ;
border-radius: 0 ;
}
#nav_home button{
width: 12.5%;
border: 0 !important;
border-radius: 0 !important;
background-color: white;
padding: 1%;
}
#nav_home button:hover{
background-color: #F5F5F5 !important;
}
#nav_home{
width: 80%;
}
.menu_lateral:hover{
cursor: pointer;
}
.menu_lateral{
color: #585858;
}
.opciones_menu li a{
color: #2E4675;
}
.opciones_menu li a:hover{
color: #585858;
}
/*BORDES*/
.border_azul{
border: 2px solid #2E4675;
}
/*ESTRUCTURA*/
.tabla_alineada > tbody > tr > td{
vertical-align: middle;
}
.link_mega{
width: 33%;
}
html {
position: relative;
min-height: 100%;
}
body {
margin-bottom: 40px;
height: 100%;
margin-bottom: 170px;
}
#copyright{
position: absolute;
bottom: 0;
width: 100%;
height: 150px;
}
/*COLOR FUENTE*/
.color_gris_oscuro{
color: #585858;
}
.color_negro{
color: #000;
}
.color_negro_50{
color: #333333;
}
.color_blanco{
color: white !important;
}
.color_azul{
color: #2E4675 !important;
}
/*FONDOS*/
.fondo_blanco{
background-color: white !important;
}
.fondo_gris{
background-color: #F5F5F5 !important;
}
.fondo_azul{
background-color: #2E4675 !important;
}
.fondo_footer{
background-color: #343A40 !important;
}
.fondo_rojo{
background-color: #C45F5F !important;
}
/*TAMAÑOS FUENTE*/
.font_0_7rem{
font-size: 0.7rem;
}
.font_0_8rem{
font-size: 0.8rem;
}
.font_0_9rem{
font-size: 0.9rem;
}
.font_0_95rem{
font-size: 0.95rem;
}
.font_1rem{
font-size: 1rem;
}
.font_1_1rem{
font-size: 1.1rem;
}
.font_1_2rem{
font-size: 1.2rem;
}
.font_4rem{
font-size: 4rem;
}
/*ESTILOS FUENTE*/
.espacio_text_0_2{
letter-spacing: 0.2em;
}
/*PRODUCTO*/
.div_producto{
display: flex;
flex-wrap: wrap;
}
.producto{
max-width: 24%;
flex: 1 0 calc(25% - 10px); /* explanation below */
margin: 5px;
padding-bottom: 2%;
}
.producto div:nth-of-type(1){
height: 53%;
width: auto;
}
.producto div:nth-of-type(1) a{
display: inline-block;
overflow: hidden;
}
.producto img{
max-height: 176px;
width: auto;
-webkit-transform: scale(1);
transform: scale(1);
-webkit-transition: .3s ease-in-out;
transition: .3s ease-in-out;
}
.producto img:hover{
-webkit-transform: scale(1.3);
transform: scale(1.3);
}
.producto div:nth-of-type(2){
height: 32%;
padding-bottom: 0px !important;
}
.producto div:nth-of-type(2) span{
display: block;
margin-top: 2%;
}
.producto div:nth-of-type(3){
height: 7%;
}
.imagen_producto{
width: 100%;
}
/*POPOVER*/
.popover{
max-width: 320px !important;
}
.imagen_usuario{
width: 40px;
}
/*EFECTOS*/
.custom-file-input ~ .custom-file-label::after {
content: "SUBIR";
}
.circulo{
width: 33px;
line-height: 33px;
border-radius: 50%;
text-align: center;
}
#basket-overview{
position: relative;
}
#circulo_cantidad{
position: absolute;
bottom: 1px;
right: 7px;
width: 26px;
line-height: 24px;
border-radius: 50%;
text-align: center;
}
.borde_mega{
margin-top: 1px;
}
#select_filtro{
font-size: 0.95rem;
}
.sin_underline{
text-decoration: none;
}
.sin_underline:hover{
text-decoration: none;
}
.imagen_cotizador img{
position: relative;
}
.imagen_cotizador div{
position: absolute;
top: -10px;
right: 0px;
}
.cruz_cotizador, .cruz_cotizador_mobile{
cursor: pointer;
}
.imagen_mini_cotizador{
width:100px;
}
/*CONTADOR*/
.counter {
width: 13%;
height: 50px;
border-radius: 0px !important;
text-align: center;
}
.up_count {
height: 50px;
width: 10%;
border-radius: 0px;
}
.down_count {
border-radius: 0px;
width: 10%;
height: 50px;
}
.counter_cotizador {
width: 40px;
height: 40px;
border-radius: 0px !important;
text-align: center;
}
.up_count_cotizador {
height: 40px;
width: 40px;
border-radius: 0px;
}
.down_count_cotizador {
border-radius: 0px;
width: 40px;
height: 40px;
}
/*TABLA COTIZADOR*/
#tabla_cotizador{
border: 1px solid #C8CED6;
}
.borderless td, .borderless th {
border: none;
}
/*
* BUSCADOR DESPLEGABLE
*/
::selection{
color: #fff;
background: #2b51c2;
}
.wrapper{
width: 450px;
}
.wrapper .search-input{
position: relative;
}
.search-input input{
height: 50px;
width: 100%;
outline: none;
border: none;
border-radius: 5px;
padding: 0 60px 0 20px;
font-size: 18px;
box-shadow: 0px 1px 5px rgba(0,0,0,0.1);
}
.search-input.active input{
border-radius: 5px 5px 0 0;
}
.search-input .autocom-box{
position: absolute;
width: 518px;
background-color: #ffffff;
padding: 0;
opacity: 0;
pointer-events: none;
max-height: 280px;
overflow-y: auto;
}
.search-input.active .autocom-box{
padding: 10px 8px;
opacity: 1;
pointer-events: auto;
}
.autocom-box{
height: auto;
background-color: #fff !important;
z-index: 1000;
}
.autocom-box li{
list-style: none;
padding: 8px 12px;
display: none;
width: 100%;
cursor: default;
border-radius: 3px;
}
.autocom-box li a:hover{
text-decoration: none;
}
.autocom-box li a{
color:gray;
font-weight: 300;
}
.search-input.active .autocom-box li{
display: block;
}
.autocom-box li:hover{
background: #efefef;
}
.search-input .icon{
position: absolute;
right: 0px;
bottom: 0px;
height: 50px;
width: 60px;
text-align: center;
line-height: 50px;
font-size: 20px;
color: #003E7F;
cursor: pointer;
}
.search-input .icon_cruz{
position: absolute;
right: 45px;
top: 0px;
height: 55px;
width: 55px;
text-align: center;
line-height: 55px;
font-size: 20px;
color: #003E7F;
cursor: pointer;
}
.logo_desktop{
width: 60%;
height: auto;
}
.logo_usuario{
width: 40px;
height: auto;
}
.logo_calculadora{
width: 30px;
height: auto;
}
.logo_lupa{
width: 18px;
height: auto;
}
.logo_footer{
width: 150px;
height: auto;
}
.gris_lupa{
border-left: 1px solid #9aa4b5;
height: 30px;
}
@media only screen and (max-width: 600px) {
.imagen_mobile{
width: 200px;
height: auto;
}
#select_filtro{
font-size: 0.6rem;
}
#select_filtro_categoria{
font-size: 0.6rem;
}
.font_h1_mobile{
font-size: 1rem;
}
.font_h3_mobile{
font-size: 0.9rem;
}
.font_4rem{
font-size: 2rem;
}
.font_titulo_mobile{
font-size: 1.2rem !important;
}
.font_1rem{
font-size: 0.7rem;
}
.circulo{
width: 30px;
line-height: 30px;
border-radius: 50%;
text-align: center;
}
.div_producto{
display: block;
width: 96%;
margin: auto;
}
.producto{
display: block;
width: 100%;
max-width: 100%;
margin: 0px;
padding-bottom: 2%;
padding-top: 2%;
}
.producto div:nth-of-type(1){
display: block;
width: 300px;
margin: auto;
}
.producto div:nth-of-type(1) a{
display: block;
width: 100%;
}
.producto img{
max-height: 176px;
width: 50%;
}
.producto div:nth-of-type(2) {
display: block;
width: 300px;
margin: auto;
}
.producto div:nth-of-type(3) {
display: block;
width: 300px;
margin: auto;
}
#copyright {
position: absolute;
bottom: 0;
width: 100%;
height: 170px;
}
.span_counter_cotizador{
height: 40px;
}
/** SEARCH MOBILE */
.wrapper{
width: 300px;
}
.wrapper .search-input-mobile{
position: relative;
}
.search-input-mobile input{
height: 40px;
width: 100%;
outline: none;
border: none;
border-radius: 5px;
padding: 0 60px 0 20px;
font-size: 12px;
box-shadow: 0px 1px 5px rgba(0,0,0,0.1);
}
.search-input-mobile.active input{
border-radius: 5px 5px 0 0;
}
.search-input-mobile .autocom-box-mobile{
position: absolute;
width: 300px;
background-color: #ffffff;
padding: 0;
opacity: 0;
pointer-events: none;
max-height: 280px;
overflow-y: auto;
}
.search-input-mobile.active .autocom-box-mobile{
padding: 10px 8px;
opacity: 1;
pointer-events: auto;
}
.autocom-box-mobile{
height: auto;
background-color: #fff !important;
z-index: 1000;
}
.autocom-box-mobile li{
list-style: none;
padding: 8px 12px;
display: none;
width: 100%;
cursor: default;
border-radius: 3px;
}
.autocom-box-mobile li a:hover{
text-decoration: none;
}
.autocom-box-mobile li a{
color:gray;
font-weight: 300;
font-size: 12px;
}
.search-input-mobile.active .autocom-box-mobile li{
display: block;
}
.autocom-box-mobile li:hover{
background: #efefef;
}
.search-input-mobile .icon{
position: absolute;
right: 0px;
top: 0px;
height: 45px;
width: 45px;
text-align: center;
line-height: 45px;
font-size: 20px;
color: #003E7F;
cursor: pointer;
}
.search-input-mobile .icon_cruz_mobile{
position: absolute;
right: 30px;
top: 0px;
height: 45px;
width: 45px;
text-align: center;
line-height: 45px;
font-size: 20px;
color: #003E7F;
cursor: pointer;
}
a,
a:hover,
a:focus {
color: inherit;
text-decoration: none;
transition: all 0.3s;
}
.navbar {
padding: 15px 10px;
background: #fff;
border: none;
border-radius: 0;
margin-bottom: 40px;
box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);
}
.navbar-btn {
box-shadow: none;
outline: none !important;
border: none;
}
.line {
width: 100%;
height: 1px;
border-bottom: 1px dashed #ddd;
margin: 40px 0;
}
/* ---------------------------------------------------
SIDEBAR STYLE
----------------------------------------------------- */
#sidebar {
width: 250px;
position: fixed;
top: 0;
left: -250px;
height: 100vh;
z-index: 999;
background: #2E4675;
color: #fff;
transition: all 0.3s;
overflow-y: scroll;
box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.2);
}
#sidebar.active {
left: 0;
}
#dismiss {
width: 35px;
height: 35px;
line-height: 35px;
text-align: center;
background: #2E4675;
position: absolute;
top: 10px;
right: 10px;
cursor: pointer;
-webkit-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
}
#dismiss:hover {
background: #fff;
color: #2E4675;
}
.overlay {
display: none;
position: fixed;
width: 100vw;
height: 100vh;
background: rgba(0, 0, 0, 0.7);
z-index: 998;
opacity: 0;
transition: all 0.5s ease-in-out;
}
.overlay.active {
display: block;
opacity: 1;
}
#sidebar .sidebar-header {
padding: 20px;
background: #2E4675 ;
}
#sidebar ul.components {
padding: 20px 0;
}
#sidebar ul p {
color: #fff;
padding: 10px;
}
#sidebar ul li a {
padding: 10px;
font-size: 1.1em;
display: block;
}
#sidebar ul li a:hover {
color: #2E4675;
background: #fff;
}
#sidebar ul li.active>a,
a[aria-expanded="true"] {
color: #fff;
background: #4060a0;
}
#sidebar a[data-toggle="collapse"] {
position: relative;
}
#sidebar .dropdown-toggle::after {
display: block;
position: absolute;
top: 50%;
right: 20px;
transform: translateY(-50%);
}
ul ul a {
font-size: 0.9em !important;
padding-left: 30px !important;
background: #2E4675;
}
ul.CTAs {
padding: 20px;
}
ul.CTAs a {
text-align: center;
font-size: 0.9em !important;
display: block;
border-radius: 5px;
margin-bottom: 5px;
}
a.download {
background: #fff;
color: #2E4675;
}
#sidebar a.article,
#sidebar a.article:hover {
background: #4060a0 !important;
color: #fff !important;
}
#circulo_cantidad_mobile{
position: absolute;
bottom: 1px;
right: 7px;
width: 26px;
line-height: 24px;
border-radius: 50%;
text-align: center;
}
#basket-overview-mobile{
position: relative;
}
.logo_mobile{
width: 40%;
height: auto;
}
.logo_usuario{
width: 35px;
height: auto;
}
.logo_calculadora{
width: 30px;
height: auto;
}
.logo_lupa{
width: 18px;
height: auto;
}
}