/*PRINCIPAL*/
body{
	background-image: url("data:image/svg+xml,%3Csvg width='25' height='25' viewBox='0 0 25 25' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23000000' fill-opacity='0.05' fill-rule='evenodd'%3E%3Ccircle cx='3' cy='3' r='3'/%3E%3C/g%3E%3C/svg%3E");
	}
	
	/* contenedor para la pagina central*/
	/*TODO los paddings deberian de tomar los paddings generados por bootstrap de las clases .container o .col-* */
	#pageWrapper{
		background: #fff;
		margin-bottom: 20px;
	}
	/* para paginas como popup-shipping-estimator*/
	body:not(#indexHomeBody) #pageWrapper:only-child{
		margin-top: 10px;
		margin-bottom: 10px;
	}
	
	/*bof global*/
	.clearBoth{
		clear:both
	}
	/* ocultar palabras que se salen de los margenes*/
	#filtrarBoxBody .checkbox label, .cartProdTitle, .product_title, .product_price,
	.list-unstyled *, .panel-title{
		overflow:hidden;
		text-overflow: ellipsis;
	}
	#filtrarBoxBody .checkbox label:hover, .panel-title:hover{
		overflow: visible;
	}
	#filtrarBoxBody .checkbox label:hover{
		margin-bottom: 5px;
	}
	
	/*agrega un espacio definido a rows o a lo que se requiera*/
	.bottom-buffer {
		margin-bottom: 20px
	}
	#checkoutNewAddress{
		position:relative
	}
	/* Permitir que los botones, imagenes de categorias con mucho texto se adapten a la pantalla */
	.btn, .caption{
		white-space: normal !important;
		word-wrap: break-word;
	}
	.input-group-btn>.btn{
		white-space: nowrap !important;
		word-wrap: unset;
	}
	/* Se quita el outline al hacer focus en botones ya que bootstrap no tiene aun la habilidad de cambiar el color */
	.btn:focus {
		outline: none !important;
	}
	
	/* quitar diseño predeterminado del campo date en ios */
	input[type="date"]{
		min-width:95%;
	}
	
	/* mantener relacion de aspecto de imagenes */
	.img-responsive{
		object-fit: contain;
	}
	.equal-cols .thumbnail{
		display: -webkit-flex;
		display: -ms-flexbox;
		display: flex;
		-webkit-flex-direction: column;
		-ms-flex-direction: column;
		flex-direction: column;
	}
	.equal-cols .product_image{
		-webkit-flex: 1 1 auto;
		-ms-flex: 1 1 auto;
		flex: 1 1 auto;
	}
	.equal-cols .thumbnail .product_image>a, .equal-cols .thumbnail .product_image.collapse.in{
		display: -webkit-flex;
		display: -ms-flexbox;
		display: flex;
		-webkit-flex-direction: column;
		-ms-flex-direction: column;
		flex-direction: column;
		justify-content: center;
	}
	
	/* mantener relacion de aspecto de imagenes pequeñas*/
	.additionalImages, .additionalImages .thumbnail, .additionalImages .thumbnail img{
		-webkit-flex: 1 1 auto;
		-ms-flex: 1 1 auto;
		flex: 1 1 auto;
		display: -webkit-flex;
		display: -ms-flexbox;
		display: flex;
		-webkit-flex-direction: column;
		-ms-flex-direction: column;
		flex-direction: column;
	}
	
	/*eof global*/
	
	/*bof fallbacks y hacks*/
	
	/*mensajes de validacion del plugin validatr (se carga cuando no hay validacion nativa)*/
	.validatr-message{
		z-index:1031
	}
	/*eof fallbacks y hacks*/
	
	/* bof forms */
	
	/* margen derecho a labels e izquierdo a inputs de form-inline */
	.form-inline label, .form-inline input,
	.product_attributes_chooser input[type="radio"], .product_attributes_chooser input[type="checkbox"] {
		margin-right: 5px
	}
	.product_attributes_chooser .wrapperAttribsOptions input[type="text"] {
		width:100%;
	}
	
	.form-group-bottom-buffer {
		margin-bottom: 15px
	}
	/* eof-forms */
	
	/*color para texto de componentes deshabilitados*/
	option:disabled {
		background-color: #afafaf;
	}
	
	/* bof google translate, fb, twitter */
	body{
		top:0 !important
	}
	body > div.skiptranslate:first-child, #goog-gt-,
	.owl-stage .login-members-price, #productListing .login-members-price , .owl-stage .login-members-btn, 
	#productListing .login-members-btn, #cartAdd .login-members-price, #cartAdd .login-members-btn {
		display: none !important
	}
	.goog-text-highlight, .VIpgJd-yAWNEb-VIpgJd-fmcmS-sn54Q {
		background-color: transparent !important;
		border: none !important; 
		box-shadow: none !important;
	}
	.fb-like{
		z-index:1001;
	}
	.pixel_track{
		border-style:none;
	}
	/* eof google translate, fb, twitter */
	
	/* bof headers */
	/* usar la variable bootstrap @brand-primary o la clase .bg-primary  para obtener su color e implementarlo */
	
	/* required for navbar-fixed-top */
	body{
		padding-top: 70px
	}
	
	/* cosas que no encontre nativamente en bootstrap */
	/* margen y maximo de contenedor para Togglable tabs tab.js */
	.tab-pane{
		margin-top: 15px;
		max-height: 200px;
		overflow: auto;
	}
	
	
	#navCatTabsCollapsed .dropdown-menu, .dropdown-submenu .dropdown-menu {
		position: relative;
		width: 100%;
		top: -2px;
	}
	
	/* menu de navegacion de categorias a la izquierda*/
	
	.navbar-toggle.navbar-left{
		float:left;
		margin-left:15px;
	}
	/*Alineacion a la derecha de los elementos del menu de header*/
	#navMain>ul>li, #header-curr button, #header-curr ul{
		text-align:right
	}
	
	@media (min-width: 480px) {
		.popover.shoppingcartpopover{
			width: 350px;
			max-width: none;
		}
	}
	.shoppingcartpopover #shoppingcartpopoverListWrapper{
		max-height: 50vh;
		overflow-x: hidden;
		transition:.25s ease;
	}
	@media(min-width:768px){
		.shoppingcart_height{
			max-height: calc(50vh - 168px) !important;
		}
	}
	
	#toaster-cart-add{
		margin: 0 10px;
	}
	#toaster-cart-add .alert{
		background-blend-mode: soft-light;
		border-width: 3px;
		border-color: inherit;
		padding-top: 10px;
		padding-bottom: 10px;
	}
	#toaster-cart-add .glyphicon-shopping-cart{
		font-size: 2em;
		margin-right: 10px;
		margin-bottom: 5px;
		border-style: solid;
		text-decoration: none;
		text-align: center;
		border-radius: 50%;
		width: 50px;
		line-height: 50px;
		height: 50px;
	}
	
	/* oculta spinner de input para añadir al carrito si se tiene configurados botones a los lados*/
	.ig-cart-quantity > input[name="cart_quantity"],
	.ig-cart-quantity > input[name="cart_quantity[]"]{
		-moz-appearance:textfield; /* Firefox */
	}
	.ig-cart-quantity > input[name="cart_quantity"]::-webkit-outer-spin-button,
	.ig-cart-quantity > input[name="cart_quantity"]::-webkit-inner-spin-button,
	.ig-cart-quantity > input[name="cart_quantity[]"]::-webkit-outer-spin-button,
	.ig-cart-quantity > input[name="cart_quantity[]"]::-webkit-inner-spin-button{
		/* display: none; <- Crashes Chrome on hover */
		-webkit-appearance: none;
		margin: 0; /* <-- Apparently some margin are still there even though it's hidden */
	}
	
	
	@media (min-width: 768px){
		/* fijar el menu de categorias (> col-xs-*) al hacer scroll en la pagina */
		#navCatTabsWrapper.affix{
			top: 50px
		}
		/* ocultar el icono de logo de la tienda del header */
		.navbar-brand{
			opacity:0;
		}
	}
	
	/* nombre de tienda del header es h1, se da estilo para que parezca span */
	#navbarStoreName{
		display: inline;
		font-size: inherit;
		line-height: inherit;
	}
	
	/* icono y nombre de la tienda (= col-xs-*) */
	
	@media (max-width: 767px) {
		.navbar-brand
		{
			position: absolute;
			width: 50%;
			left: 0;
			right:0;
			top: 0;
			text-align: center;
			margin: auto;
		}
		/* mostrar el icono de logo de la tienda del header en movil */
		.navbar-brand.hide-opacity, .navbar-brand.show-opacity {
			opacity: 1;
			-webkit-animation: none;
			animation:         none;
		}
	}
	
	.btn.btn-fb-login{
		background-color: #4267b2;
		border-color: transparent;
		color: #fff;
		text-shadow: none;
	}
	.btn.btn-fb-login:hover, .btn.btn-fb-login:focus, .btn.btn-fb-login:active:focus{
		background-color: #365899;
		border-color: transparent;
		color: #fff;
	}
	.btn.btn-fb-login:active, .btn.btn-fb-login:active:hover{
		background-color: #577fbc;
		border-color: transparent;
		color: #fff;
	}
	/* margen para redes sociales entre movil portrait y landscape*/
	@media (max-width: 767px) and (min-width:480px) {
		#socialHeader{
			margin-top: 0.5em;
		}
	}
	/* bof custom collapsing navbar links */
	
	@media (min-width: 768px) {
		#navCatTabsUl .dropdown:hover>.dropdown-menu,
		#navCatTabsUl .dropdown-submenu:hover>.dropdown-menu{
			display:block
		}
		/*submenus*/
		.scrollable-menu, .navbar-nav>.dropdown>.dropdown-menu {
			height: auto;
			overflow-x: hidden;
			/* lo que mida el ancho menos lo que llegue a medir el menu del header */
			max-height: calc(100vh - 120px);
		}
		
		/* margen entre los componentes de boton de nav de bootstrap */
		#language .navbar-btn, #header-lan .navbar-btn{
			margin-left: 10px;
		}
	}
	
	/* si el componente de busqueda queda dentro del navbar, se limita su altura*/
	.navbar .quick-find-result {
		height: auto;
		overflow-x: hidden;
		/* lo que mida el ancho menos lo que llegue a medir el menu del header */
		max-height: calc(100vh - 120px);
	}
	
	/* eof custom collapsing navbar links */
	
	/*icono de carrito en el css del sidebox orderhistory y carrito actual*/
	.orderHistList li:before, .cartBoxList li:before {
		/*Using a Bootstrap glyphicon madding-bottomas the bullet point*/
		content: "\e116";
		font-family: 'glyphicon' !important;
		position: relative;
		margin-right: 5px;
	}
	
	/* bof  content*/
	#myCarousel{
		margin-bottom: 20px
	}
	/* sólamente mostrar el primer elemento de owl carousel oculto, para mejorar metrica Cumulative Layout Shift (CLS)  */
	.owl-carousel:not(.owl-loaded) > :not(:first-child){
		display:none
	}
	
	/* 
	hacer que las imagenes se muestren con la misma proporción
	Si las imagenes tienen proporciones muy diferentes, algunas se va a ver que se corta mucho
	*/
	
	#myCarousel .owl-stage {
		display: flex;
	}
	#myCarousel .owl-item .carousel-image {
		width: 100%;
		height: 100%;
		object-fit: cover;
		max-width: initial;
	}
	
	#myCarousel .owl-dots{
		position: absolute;
		bottom: 10px;
		left: 50%;
		z-index: 15;
		width: 60%;
		padding-left: 0;
		margin-left: -30%;
		text-align: center;
	}
	
	#myCarousel .owl-nav button{
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		width: 15%;
		font-size: 20px;
		color: #fff;
		text-align: center;
		text-shadow: 0 1px 2px rgba(0,0,0,0.6);
		background-color: rgba(0,0,0,0);
		filter: alpha(opacity=50);
		opacity: .5;
		background-repeat: repeat-x;
		/* sobreescribir valores de la clase btn*/
		border:none;
		border-radius: 0;
		padding: 0;
		margin: 0;
		box-shadow: none;
	}
	#myCarousel .owl-nav button:first-of-type{
		background-image: -webkit-linear-gradient(left, rgba(0,0,0,0.5) 0, rgba(0,0,0,0.0001) 100%);
		background-image: -o-linear-gradient(left, rgba(0,0,0,0.5) 0, rgba(0,0,0,0.0001) 100%);
		background-image: -webkit-gradient(linear, left top, right top, color-stop(0, rgba(0,0,0,0.5)), to(rgba(0,0,0,0.0001)));
		background-image: linear-gradient(to right, rgba(0,0,0,0.5) 0, rgba(0,0,0,0.0001) 100%);
		filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#80000000', endColorstr='#00000000', GradientType=1);
	}
	#myCarousel .owl-nav button:last-of-type{
		right: 0;
		left: auto;
		background-image: -webkit-linear-gradient(left, rgba(0,0,0,0.0001) 0, rgba(0,0,0,0.5) 100%);
		background-image: -o-linear-gradient(left, rgba(0,0,0,0.0001) 0, rgba(0,0,0,0.5) 100%);
		background-image: -webkit-gradient(linear, left top, right top, color-stop(0, rgba(0,0,0,0.0001)), to(rgba(0,0,0,0.5)));
		background-image: linear-gradient(to right, rgba(0,0,0,0.0001) 0, rgba(0,0,0,0.5) 100%);
		filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#80000000', GradientType=1);
	}
	#myCarousel .owl-nav button:hover,#myCarousel .owl-nav button:focus {
		color: #fff;
		text-decoration: none;
		outline: 0;
		filter: alpha(opacity=90);
		opacity: .9;
		background-position: 0;
	}
	
	/* .carousel img {
		min-width: 100%;
	} */
	/* otorga un alto en base al ancho del carrusel para que las imagenes lazyload no se vean mal*/
	/* .carousel-inner>.item>a>.lazy-img-responsive{
		max-height: 25vw;
	} */
	/* otorga un alto fijo al contenido de carousel-caption */
	/* .carousel .carousel-caption + .carousel-image {
		object-fit: cover;
		width: 100%;
		height: 100%;
	} */
	/* para la clase lazy, hay que dejar un tamaño inicial, de otra manera todos quedan con el mismo tamaño, 
	todos se muestran en la misma pantalla y pierde la funcionalidad para cargar sólo los elementos que se muestren en pantalla */
	.lazy{
		min-height: 500px;
	}
	
	/* bof Corrección de línea blanca que aparece al pasar sliders*/
	#myCarousel .owl-item {
		margin-right: 0 !important;
		width: 100% !important;
	}
	@media(max-width:767px){
		#myCarousel .owl-item:last-child {
			padding-right: 20px;
		}
	}
	/* eof Corrección de línea blanca que aparece al pasar sliders*/
	
	/* bof thumbnails para el componente de extra_products_links */
	#extra-products .thumbnail {
		position:relative;
		overflow:hidden;
	}
	 
	#extra-products .caption {
		position:absolute;
		top:0;
		right:0;
		background-color:#428BCA;
		background-color:rgba(66, 139, 202, 0.75);
		width:100%;
		height:100%;
		padding:2%;
		text-align:center;
		color:#fff !important;
		z-index:2;
		cursor:pointer;
	}
	/* eof thumbnails para el componente de extra_products_links */
	
	/* bof detalle de producto*/
	
	.product_content{
		border-top:1px solid #ddd;
		text-align: center;
	}
	
	.product_price, .total-form-cc-msi, .cartBoxTotal{
		color:#cc0c31
	}
	/*
	.centerBoxContentsProducts .product_price, .centerBoxContentsProducts .product_title,
	#productListing .product_price, #productListing .product_title{
		font-size:18px
	}
	*/
	
	#productPrices, #productReviewsDefaultPrice, #reviewsInfoDefaultPrice, #reviewsWritePrice{
		color:#cc0c31;
		/*
		font-size:24px;
		text-align:center;
		*/
	
	}
	/*
	#productName{
		font-size:24px
	}
	*/
	/* 
	se agrega un espacio por css entre el precio normal y oferta, 
	por que se modificó la funcion de precios que ponía 
	directamente un espacio entre los elementos y daba problemas 
	a la hora de dar estilos personalizados a los elementos
	*/
	.normalprice + .productSpecialPrice:before,
	.normalprice + .productSpecialPriceSale:before
	{
		content:"\00a0";
	}
	/* estilos a las clases de precios con descuentos */
	.normalprice, .productSpecialPriceSale {
		text-decoration: line-through;
	}
	.productPriceDiscount, .normalprice{
		font-size: small;
	}
	
	.product_image img{
		margin: 0 auto
	}
	.button_sold_out_sm.btn.btn-default{
		margin:10px
	}
	.button_openpay_download_pdf{
		margin-left:1em;
	}
	#checkoutSuccessOrder_openpay .button_openpay_download_pdf{
		margin:1em 0;
	}
	/* para botones al 100%, esto evita dibujar la linea de un link al hacer hover */
	a .cssButton.btn-block{
		display: inline-block;
	}
	/* se copia color de .table-striped>tbody>tr:nth-of-type(odd) */
	.productListing-odd{
		background-color: #f5f5f5
	}
	.productListing-odd, .productListing-even{
		padding: 5px 0
	}
	/* eof detalle de producto*/
	
	/*bof sideboxes*/
	/*reset de padding bootstrap*/
	#orderhistoryContent div[class^="col-"], #shoppingcartContent div[class^="col-"]{
		padding-left: 5px;
		padding-right: 5px;
	}
	.glyphicon-title{
		text-align:center;
		font-size: 4em;
		display: inline-block;
		width: 100%;
	}
	/* margen para el link de busqueda avanzada */
	.advanced-search-box{
		margin: 12px 0;
	}
	.live_search_content .normalprice, .live_search_content .productPriceDiscount{
		display:none;
	}
	.live_search_content .row:not(:last-of-type){
		margin-bottom:10px;
	}
	
	.quick-find-result{
		position: absolute;
		width: 100%;
		z-index: 1002;
		left: 0;
		top: 100%;
		padding-left: inherit;
		padding-right: inherit;
	}
	.quick-find-result a{
		overflow:hidden;
	}
	/* sidebox categorias */
	.sideBoxContent .category-subs, .sideBoxContent li.has_sub:not(.currentParent){
		border-bottom: 1px solid #ddd;
		margin: 5px 0;
	}
	.sideBoxContent li.has_sub .list-unstyled{
		border-top: 1px solid #ddd;
		clear: both;
	}
	.sideBoxContent li.has_sub .list-unstyled .no_sub:first-child{
		margin-top: 5px;
	}
	.sideBoxContent li.has_sub{
		margin: 5px 0;
	}
	.sideBoxContent .category-subs a:before, .sideBoxContent li.has_sub > span:after{
		content: '+';
	}
	.sideBoxContent .category-subs .category-subs-parent:before, .sideBoxContent li.has_sub.currentParent > span:after{
		content: '-';
	}
	.sideBoxContent .category-subs a:before, 
	.sideBoxContent a.has_sub:before,
	.sideBoxContent .category-subs-selected, 
	.sideBoxContent .category-subs-parent,
	.sideBoxContent a.current, 
	.sideBoxContent a.currentParent{
		font-weight: bold;
	}
	.sideBoxContent .has_sub:not(.currentParent) .list-unstyled{
		display:none;
	}
	
	.sideBoxContent li.has_sub > span:hover{
		cursor:pointer;
	}
	.sideBoxContent li.has_sub > span:after{
		float:right;
		padding-left: 6px;
		padding-right: 6px;
		border-radius: 30px;
	}
	.sideBoxContent li.has_sub.currentParent{
		position:relative;
	}
	.sideBoxContent li.has_sub.currentParent > span{
		position:absolute;
		top: 0;
		right: 0;
	}
	.sideBoxContent li.has_sub .show-filter {
		cursor: pointer;
		padding-right: 8px;
	}
	
	#product_list_filter .panel-body{
		max-height: 30em;
		overflow-y: auto;
		overflow-x: hidden;
	}
	
	#product_list_filter .panel-title{
		font-size: 0.9em;
	}
	
	#product_list_filter .panel-heading button{
		font-size: 0.7em;
	}
	
	@media (max-width: 767px) {
		#navColumnOne .leftBoxContainer, #navColumnTwo .rightBoxContainer{
			margin-bottom: 5px;
		}
		#navColumnOne, navColumnTwo{
			margin-bottom: 10px;
		}
	}
	
	/* eof sideboxes*/
	
	/* bof buttons */
	#language .spr, #header-lan .spr{
		vertical-align:sub;
	}
	/* eof buttons */
	
	/* bof checkout_payment */
	#orderTotals{
		background-color: inherit;
	}
	/* alinea verticalmente los totales del pedido */
	#orderTotals .row{
		display: -webkit-flex;
		display: -ms-flexbox;
		display: flex;
	}
	.totalBox{
		text-align: right;
	}
	
	#checkoutOrderTotals #orderTotals{
		padding-top: 0;
		border-top: none;
	}
	#ottotal {
		font-weight: bold;
	}
	
	/* eof checkout_payment */
	
	/* correccion de error en columnas responsivas para iphone e ipad. Evita que el encabezado de la tabla se corte */
	.table-responsive .table {
		max-width: none;
	}
	
	/* ocultar elementos vacios */
	#header-lan-curr:empty,
	.alert:empty,
	.gvBal:empty,
	.redem_instructions:empty,
	.control-label:empty,
	.panel:empty,
	h1:empty{
		display:none;
	}
	#customerAuthDefaultImage .glyphicon{
		font-size: 8em;
	}
	/* boton de mylivechat para la opcion sin javascript */
	.btn.btn-mylivechat{
		position:fixed;
		width:60px;
		height:60px;
		bottom:20px;
		right:40px;
		font-size:2em;
		border-radius:50px;
		z-index:10;
		box-shadow: 2px 2px 3px #999;
	}
	.btn-mylivechat span{
		vertical-align: middle;
	}
	
	/* dibujar el scroll en moviles */
	::-webkit-scrollbar {
		-webkit-appearance: none;
		width: 12px;
		height: 12px;
	}
	
	::-webkit-scrollbar:vertical {
		width: 12px;
	}
	
	::-webkit-scrollbar:horizontal {
		height: 12px;
	}
	
	::-webkit-scrollbar-thumb {
		background-color: #7f7f7f;
		border-radius: 6px;
		border: 2px solid #fff;
	}
	
	::-webkit-scrollbar-track {
		border-radius: 6px;  
		background-color: #fff;
	}
	
	.modal #allManufacturersDefault .row {
		max-height: calc(575px - 8vh);
		overflow-y: scroll;
	}
	
	/* 
	hacer que el icono del modal de loading se muestre tras 250 milisegundos 
	esto para evitar que en conexiones rápidas se vea el flashaso del icono que aparece y desaparece muy rápido
	*/
	.modal-loading {
		animation: modalLoading 0s 250ms forwards;
		visibility: hidden;
	}
	  
	@keyframes modalLoading {
		to   { visibility: visible; }
	}