@charset "utf-8";

/*
	File: template_append.css
	Rewrites the template.css classes and define new classes that are shared and required by all the sites
*/

/* escritura o reescritura de reglas globales */
body { cursor: default; background: var(--body-bg); color: var(--body-color); }
select { -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; border-radius: 3px; cursor: pointer; }
select:focus { box-shadow:none; }
a { cursor: pointer; text-decoration: none; }
strong { font-weight: bold; } 
label { font-weight: normal; }
hr { background: var(--separator-dark-color); }

select { background: var(--select-bg); color: var(--select-color); border: solid 1px var(--select-border-color); }
select option { background: var(--option-bg); color: var(--option-color); }
select .disabled { background: var(--option-disabled-bg); color: var(--option-disabled-color); }
select:hover { border-color: var(--select-hover-border-color); color: var(--select-hover-color); }
.select-wrapper::before { color: var(--select-arrow-color); }
.select-wrapper:hover::before { color: var(--select-hover-arrow-color); }



/* footer */
#footer { background: transparent; color: var(--body-color); padding-bottom: 1em; padding-top: 4em; }
#footer .TEXT { padding-right: 2.5em; border-right: solid 1px var(--separator-dark-color); }
#footer ul.BEST_SELLERS { list-style: decimal; padding-left: 1.25em; }
#footer ul.updates li { margin-top: 1em; }

#footer h3 { color: var(--dark1); }
#footer hr { margin-top: 1.25em; margin-bottom: .25em; border-color: var(--separator-dark-color); }
	/* */
#footer .copyright { color: #4B5A65; }
#footer .copyright.LEFT { text-align: left; }
#footer .copyright.LEFT li { display:block; padding-left: 0px; border: none; margin-left:0px; line-height:1.35em; font-size: .9em; }
#footer p.COUNTRY { text-align: right; margin-top: 2.25em; margin-right: 1em; font-size: .9; }
#footer .SMALL { font-size: .7em!important; opacity: .9; text-align: justify; }
   /* */

/* footer: contact us*/
#contact_us .button { font-weight: normal; border-radius: 0; margin-left: 0; margin-right: .75em; }
#contact_us span.PHONE_NUMBER { margin-left: .25em; font-size: 1.5em; }
#contact_us span.PHONE_LANGUAGES { margin-left: .5em; font-size: .75em; visibility: hidden; } /* <--- No borrar este texto sale al lado y dice que el telefono es solo en ingles y espanol, al momento de programar ver como hacer */


 /* Cookie banner */ 
#COOKIE_BANNER { position: absolute; top: 0px; display: block; height: 2.75em;  width: 100%; line-height: 2.75em; text-align: center; background: #0A3369; font-size: .95em; }

/* header */
#header { position: absolute; height: 5em; line-height: 4.8em; }

/* .alt = estado por defecto */
#header.alt { height: 3em; line-height: 3em; margin-top: 3em; }
#header.alt h1 { color: var(--header-alt-h1); } 
#header.alt h1 span { color: var(--header-alt-h1-span); }
#header.alt nav a { color: var(--header-alt-a);  }
#header.alt nav a:active, #header.alt nav a:hover { color: var(--header-alt-a-hover); }
	/* estado despues de hacer scroll */ 
#header { background: var(--header-bg); }
#header h1 { color: var(--header-h1); }
#header h1 span { color: var(--header-h1-span); }
#header nav > ul > li a { color: var(--header-a); }
#header nav > ul > li a:hover { color: var(--header-a-hover); }
	/* .dopotron (submenu) */
.dropotron > li a { color: var(--submenu-a); }
.dropotron > li a:hover { color: var(--submenu-a-hover); }
/**/

/* Elementos anadidos al header */
#header li.LANGUAGE { font-size:.7em; padding-right: 2em; border-right: solid 1px var(--separator-light-color); border-radius:0px!important; }
#header li.HEADER_BTN { padding-left: 1.25em; border-left: solid 1px var(--separator-light-color); border-radius:0px!important; }
#header a.BEST_DEALS { font-size: .8em; color: #FFDF00!important; }
#header a.BEST_DEALS i { margin-right: .35em; }

/*#header:not(.alt) #logo img.FLAG { visibility: visible; }*/ /* <- AQUI HAY QUE PONER LO DE LOS PIXELES NECESARIOS PARA QUE SE MUESTRE PERO NO EN CELULARES */
.FLAG { display: none!important; } /* ELIMINAR ESTA LINEA */

/* logo */
#logo { font-family: 'Lexend Deca', sans-serif; font-size:2.25em; letter-spacing: -1px; font-weight: 400; }
#logo img.FLAG { width: 22.5px; height: 16.5px; position: relative; top: -15px; left: 10px; border: solid 1px rgba(255,255,255,.15); visibility: hidden; }

/* trademark*/
.TM { vertical-align: super; font-size:.6em; padding-left: .25em; font-weight: 100; opacity: .6; }

/* Banner */
#banner .chrome { background:transparent; } 
#banner .chrome::before,.browser-mockup .chrome::after { content:''; } 
#banner .url { background:transparent; }

/* button: globales */
.button { border-radius:3px; font-weight: normal; }
/* button */
.button { background: var(--button-bg); color: var(--button-color); }  
.button:hover { background: var(--button-hover-bg); } 
.button:active { background: var(--button-active-bg); } 
/* .button.special */
.button.special { background: var(--button-special-bg); color: var(--button-special-color); font-weight: bold; } 
.button.special:hover { background: var(--button-special-hover-bg); } 
.button.special:active { background: var(--button-special-active-bg); }
/* .button.alt */
.button.alt { font-weight: normal; box-shadow: inset 0 0 0 2px var(--button-alt-border); color: var(--button-alt-color)!important; } 
.button.alt:hover { background: var(--button-alt-hover-bg); color: var(--button-alt-hover-color)!important; } 
.button.alt:active { background: var(--button-alt-active-bg); color: var(--button-alt-active-color)!important; }

	
/* .background colors */
.background1 { background: var(--background1)!important; }
.background2 { background: var(--background2)!important; }
.background3 { background: var(--background3)!important; }
.background4 { background: var(--background4)!important; }

/* a por defecto */
a { color: var(--a); }
a:hover { color: var(--a-hover); }
a:active { color: var(--a-active); } /*<- No estoy seguro de usar este atributo ---------------------------- */

/* .light1 */
.light1 { color: #FFFFFF; color: var(--light1)!important; }
.a_light1 a { color:#FFFFFF; color: var(--light1)!important; }
.a_light1 a:hover { color:#B8C1C7; color: var(--light1-hover)!important; }

/* light2 */
.light2 { color: #B8C1C7; color: var(--light2)!important; }
.a_light2 a { color: #B8C1C7; color: var(--light2)!important; }
.a_light2 a:hover { color:#FFFFFF; color: var(--light2-hover)!important; }

/* light3 */
.light3 { color: #0070F6; color: var(--light3)!important; }

/* dark1 */
.dark1 { color: #00439C; color: var(--dark1)!important; }

/* dark2 */
.dark2 { color: #4B5A65; color: var(--dark2)!important; }
.dark2 a { color: #4B5A65; color: var(--dark2)!important; }
.dark2 a:hover { color: #071D2B; color: var(--dark2-hover)!important; }

/* dark3 */
.dark3 { color: #071D2B; color: var(--dark3)!important; }
.dark3 a { color: #071D2B; color: var(--dark3)!important; }
.dark3 a:hover { color: #4B5A65; color: var(--dark3-hover)!important; }

/* decoraciones de texto y links*/
.a_hover_underline a:hover { text-decoration:underline!important; }
.a_underline a { text-decoration:underline!important; }

/* decoraciones de texto aun no usadas */
.italic { font-style: italic!important; } /* <- No usado aun quitar si se usa */ 
.justify { text-align: justify!important; } /* <- No usado aun quitar si se usa */
.right { text-align: right; }

/* tamanos de texto para aplicarse sobre cualquier elemento, no relacionados necesariamente con la etiqueta <h></h> */
.fs275 { font-size: 2.75em!important; }
.fs250 { font-size: 2.5em!important; }
.fs200 { font-size: 2em!important; }
.fs175 { font-size: 1.75em!important; }
.fs150 { font-size: 1.5em!important; }
.fs125 { font-size: 1.25em!important; }
.fs100 { font-size: 1em!important; }
.fs95 { font-size: .95em!important; }
.fs75 { font-size: .75em!important; }
.fs50 { font-size: .5em!important; }

/* margins */
.mb3 { margin-bottom: 3em; }
.mb2 { margin-bottom: 2em; }
.mb1 { margin-bottom: 1em; }
.mt1 { margin-top: 1em; }
.mt2 { margin-top: 2em; }
.mt3 { margin-top: 3em; }

/* amount */
.amount_wrapper { font-size: 2em; margin-bottom:1em; }
span.currency { font-size: .65em; margin-right:.25em; opacity: .75; }
span.currency.symbol { font-size: .75em; margin-right:.05em; opacity: .75; }
span.cents { vertical-align: super; font-size: 1em; }
span.amount { font-size: 1.5em; }

/* */
.transition-bg-color {
-moz-transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out;
-webkit-transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out;
-ms-transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out;
transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out;
}

.transition-border-color {
-moz-transition: border-color 0.2s ease-in-out, color 0.2s ease-in-out;
-webkit-transition: border-color 0.2s ease-in-out, color 0.2s ease-in-out;
-ms-transition: border-color 0.2s ease-in-out, color 0.2s ease-in-out;
transition: border-color 0.2s ease-in-out, color 0.2s ease-in-out;
}

/* Box */
.box { background: transparent; }
.box.big { padding-top: 0; }