/* ==========================================================================
   NT_estils9.css
   Variacions de NineTeam (i DS) respecte a CO_estils9.css.

   - Es carrega sempre JUST DESPRÉS de CO_estils9.css, només a NT i DS.
   - Aquí només hi ha el que canvia (colors, imatges i poques mides).
     Tota la resta ve de CO_estils9.css.
   - Les regles van en el mateix ordre que a CO_estils9.css. Una regla d'aquí
     guanya a totes les de CO amb la mateixa especificitat, encara que a CO
     vagin després: si n'afegeixes una, comprova que no en trepitgi cap.
   ========================================================================== */


/* ----- jQuery UI ---------------------------------------------------------
   CO_estils9.css importa CO_jquery-ui.css. Aquí hi ha només el que canvia a
   NT_jquery-ui.css. Els estats hover/focus, active, highlight, error i
   disabled es repeteixen (amb els valors de jQuery UI) perquè, si no, el
   .ui-state-default d'aquí els trepitjaria. */

.ui-button-text-only .ui-button-text {
  color: #fff;
}

.ui-state-default,
.ui-widget-content .ui-state-default,
.ui-widget-header .ui-state-default {
  border: 2px solid var(--ColorText);
  background: linear-gradient(to bottom, var(--ColorVermellBoto) 0%, var(--ColorVermellBotoRatlla) 20%, var(--ColorVermellBoto) 48%, var(--ColorVermellBoto) 100%);
}

.ui-state-hover,
.ui-widget-content .ui-state-hover,
.ui-widget-header .ui-state-hover,
.ui-state-focus,
.ui-widget-content .ui-state-focus,
.ui-widget-header .ui-state-focus {
  border: 1px solid #000;
  background: #000;
}

.ui-state-active,
.ui-widget-content .ui-state-active,
.ui-widget-header .ui-state-active {
  border: 0px solid #655e4e;
  background: #000;
}

.ui-state-highlight,
.ui-widget-content .ui-state-highlight,
.ui-widget-header .ui-state-highlight {
  border: 1px solid var(--ColorText);
  background: #fff9e5 url("images/ui-bg_gloss-wave_90_fff9e5_500x100.png") 50% top repeat-x;
}

.ui-state-error,
.ui-widget-content .ui-state-error,
.ui-widget-header .ui-state-error {
  border: 1px solid var(--ColorText);
  background: #d34d17 url("images/ui-bg_diagonals-medium_20_d34d17_40x40.png") 50% 50% repeat;
}

.ui-state-disabled,
.ui-widget-content .ui-state-disabled,
.ui-widget-header .ui-state-disabled {
  background-image: none;
}


/* ----- Fonts (a NT es serveixen des de nineteam.com) ----- */

@font-face {
  font-family: 'Victoria Typetriter';
  src: url('https://www.nineteam.com/9Program/xCO/css/Victoria%20Typewriter%20Regular.ttf');
}

@font-face {
  font-family: 'Victoria Typetriter Bold';
  src: url('https://www.nineteam.com/9Program/xCO/css/Victoria-Typewriter-Bold.ttf');
}


/* ----- Variables ----- */

:root {
  --ColorText: #ff0008;
  --ColorTaronjaFosc: #ff0008;
  --ColorTaronjaClar: #ff0008;
  --ColorVermellBoto: #ff0008;
  --ColorVermellBotoRatlla: #ff000085;
  --ColorVermellBotoTexte: #fff;
  --ColorBorder: #ff0008;
  --ColorAreaCliente: #ffe3e4;
  /* ===== MenuSub NUEVOS: fons fosc, accent vermell ===== */
  --menuSub-color-bg-hover: #ff0008;
  --menuSub-color-text: #ffffff;
  --menuSub-color-text-hover: #ffffff;
  --menuSub-color-icon: #ffffff;
  --menuSub-color-icon-hover: #ffffff;
  --menuSub-color-badge-icon-bg: #ff0008;
  /* ===== MenuSub SEMINUEVOS: colors invertits respecte a NUEVOS ===== */
  --menuSubSemi-color-bg: #ff0008;
  --menuSubSemi-color-text: #ffffff;
  --menuSubSemi-color-text-hover: #ffffff;
  --menuSubSemi-color-icon: #ffffff;
  --menuSubSemi-color-icon-hover: #ffffff;
  --menuSubSemi-color-badge-icon-fg: #ff0008;
  --menuSubSemi-color-divider: rgba(255, 255, 255, 0.35);
}


/* ----- Regles ----- */

.fotokit1_content {
  background: var(--ColorTaronjaClar);
  color: #fff;
}

.tooltipinfo {
  border: 2px solid var(--ColorTaronjaClar);
}

.loaderBody {
  background: url('../NT_IMG1/pageloader.gif') 50% 50% no-repeat rgb(249, 249, 249);
  opacity: .7;
}

.loaderBodyRetard {
  background: url('../NT_IMG1/pageloaderRetard.gif') 50% 50% no-repeat rgb(249, 249, 249);
}

.BarraSupGris a.quienesSomos:hover {
  color: var(--ColorTaronjaClar);
}

.scrollup {
  background: url('../NT_IMG/iconTop.png') no-repeat;
}

.bt {
  background: var(--ColorTaronjaClar);
}

.BotoAfegirCarret {
  color: #fff;
  background: linear-gradient(to bottom, var(--ColorVermellBoto) 0%, var(--ColorVermellBotoRatlla) 20%, var(--ColorVermellBoto) 48%, var(--ColorVermellBoto) 100%);
}

.i3_9web {
  color: #8b0000;
}

.BotoMasInfoLlistat {
  background-color: var(--ColorTaronjaClar);
  color: #ffffff;
}

.botoEnviar {
  color: #ffffff;
  background-color: var(--ColorTaronjaClar);
}

.BotoZonaInfo {
  background-color: var(--ColorTaronjaClar);
}

.BotoOKBuscar {
  background-color: var(--ColorTaronjaClar);
  color: #fff;
}

.see-ico:hover {
  background-color: var(--ColorTaronjaFosc);
}

.style-2 input[type="text"] {
  border: solid 1px var(--ColorTaronjaFosc);
}

.style-2 input[type="text"]:focus,
.style-2 input[type="text"].focus,
.style-2 input[type="password"]:focus,
.style-2 input[type="password"].focus,
.style-2 textarea:focus,
.style-2 textarea.focus {
  border: solid 1px var(--ColorTaronjaFosc);
}

.cajasZonaClientes h3 {
  color: var(--ColorTaronjaClar);
}

/* Es repeteix (valor de CO) perquè la vora de .style-2 d'aquí no la trepitgi:
   .style-2 i .cajasZonaClientes van a la mateixa div (info_areaclientes.php). */
.cajasZonaClientes input[type="text"] {
  border: solid 1px #c9c9c9;
}

.cajasZonaClientes input[type="text"]:focus,
.cajasZonaClientes input[type="text"].focus,
.cajasZonaClientes input[type="password"]:focus,
.cajasZonaClientes input[type="password"].focus,
.cajasZonaClientes textarea:focus,
.cajasZonaClientes textarea.focus {
  border: solid 1px #969696;
}

.caixaPagaments {
  border-bottom: var(--ColorTaronjaClar) 1px solid;
}

.botoArea {
  background: linear-gradient(to bottom, var(--ColorVermellBoto) 0%, var(--ColorVermellBotoRatlla) 20%, var(--ColorVermellBoto) 48%, var(--ColorVermellBoto) 100%);
}

.botoArea .lletraB {
  color: #fff;
}

.botoArea2 {
  background-color: var(--ColorTaronjaFosc);
}

.BotoZC {
  background: linear-gradient(to bottom, var(--ColorVermellBoto) 0%, var(--ColorVermellBotoRatlla) 20%, var(--ColorVermellBoto) 48%, var(--ColorVermellBoto) 100%);
  color: #fff;
}

#resumOpinions .botonVerMasOpiniones {
  background: linear-gradient(var(--ColorTaronjaFosc) 0%, var(--ColorTaronjaClar) 100%);
}

.prod-box:hover {
  border: var(--ColorTaronjaFosc) solid 1px;
}

.prod-box .buy-ico {
  background: var(--ColorTaronjaFosc) url(../IMG/bag-ico.png) 50% no-repeat;
}

.prod-box .buy-ico:hover {
  background-color: var(--ColorTaronjaFosc);
}

.prod-box .buy-ico5 {
  background: var(--ColorTaronjaFosc) url(../IMG/bag-ico5.png) 50% no-repeat;
}

.prod-box .buy-ico5:hover {
  background-color: var(--ColorTaronjaFosc);
}

.prod-box .see-ico:hover {
  background-color: var(--ColorTaronjaFosc);
}

.QuantitatInput {
  border: var(--ColorTaronjaClar) solid 2px;
}

.BotoTaronja {
  background: linear-gradient(var(--ColorTaronjaFosc) 0%, var(--ColorTaronjaClar) 100%);
}

.BotoVermellos:hover {
  background: linear-gradient(var(--ColorTaronjaFosc) 0%, var(--ColorTaronjaClar) 100%);
}

.BotoSenseHover {
  color: #fff;
  background: linear-gradient(to bottom, var(--ColorVermellBoto) 0%, var(--ColorVermellBotoRatlla) 20%, var(--ColorVermellBoto) 48%, var(--ColorVermellBoto) 100%);
}

.BotoVeureOpcions {
  color: #fff;
  background: linear-gradient(to bottom, var(--ColorVermellBoto) 0%, var(--ColorVermellBotoRatlla) 20%, var(--ColorVermellBoto) 48%, var(--ColorVermellBoto) 100%);
}

.BotoVeureOpcionsInvers:hover {
  background: linear-gradient(to bottom, var(--ColorVermellBoto) 0%, var(--ColorVermellBotoRatlla) 20%, var(--ColorVermellBoto) 48%, var(--ColorVermellBoto) 100%);
}

#porqueNosotros .porque {
  border: var(--ColorTaronjaClar) solid 0px;
}

#quienSomos h1 {
  color: var(--ColorTaronjaClar);
}

#quienSomos p span {
  color: var(--ColorTaronjaClar);
}

#sectorEducativo .sectorEducativoDRE {
  background-color: var(--ColorTaronjaClar);
}

#peuFila_1 .peuFila_1_bloc {
  background-color: var(--ColorTaronjaFosc);
}

#peuFila_2 .peuFila_2_bloc {
  background-color: var(--ColorTaronjaClar);
}

#peuFila_2 .peuFila_2_bloc .info h2 {
  color: #ffffff;
}

.LOPD h2 span {
  color: var(--ColorTaronjaClar);
}

#PeuMenu {
  border-bottom: var(--ColorTaronjaClar) solid 1px;
}

#PeuMenu .eslogan_1 p {
  color: #ffffff;
}

#Peu_1 a.groc {
  background-color: var(--ColorTaronjaClar);
}

#cookie-bar .cb-enable {
  background: var(--ColorTaronjaFosc);
}

#cookie-bar .cb-enable:hover {
  background: var(--ColorTaronjaClar);
}

#cookie-bar .cb-policy:hover {
  background: var(--ColorTaronjaFosc);
}

#columnaDreta .baner:hover {
  border: var(--ColorTaronjaClar) solid 0px;
}

#columnaDreta .baner:hover p {
  color: var(--ColorTaronjaClar) !important;
}

.estilsFormularis h1 {
  color: var(--ColorTaronjaClar);
}

/* Es repeteix (valor de CO) perquè la vora de .style-2 d'aquí no la trepitgi:
   moltes pàgines fan servir <div class="style-2 estilsFormularis">. */
.estilsFormularis input[type="text"] {
  border: #c9c9c9 solid 1px;
}

.estilsFormularis input[type="submit"] {
  background-color: var(--ColorTaronjaClar);
}

.estilsFormularis input[type="submit"]:hover {
  background-color: var(--ColorTaronjaClar);
}

.containerCheck input:checked~.checkmark {
  background-color: var(--ColorTaronjaClar);
}

.containerRadBut input:checked~.checkmarkRadBut {
  background-color: var(--ColorTaronjaClar);
}

.botoLoginLogout {
  background: linear-gradient(to bottom, var(--ColorVermellBoto) 0%, var(--ColorVermellBotoRatlla) 20%, var(--ColorVermellBoto) 48%, var(--ColorVermellBoto) 100%);
  color: #fff;
}

.BotonCarrito {
  background-color: var(--ColorTaronjaClar);
  color: #fff;
}

.CaixaEstat.actiu {
  border: var(--ColorTaronjaClar) solid 1px;
  background-color: var(--ColorTaronjaClar);
}

.botoSO {
  color: #fff;
  background: linear-gradient(to bottom, var(--ColorVermellBoto) 0%, var(--ColorVermellBotoRatlla) 20%, var(--ColorVermellBoto) 48%, var(--ColorVermellBoto) 100%);
}

#vinilos2 h1 {
  color: var(--ColorTaronjaFosc);
}

#vinilos2 h3 {
  color: var(--ColorTaronjaFosc);
}

#infoCeuta .ceuta .icona p {
  color: var(--ColorTaronjaFosc);
}

#infoCeuta .ceuta .info h2 {
  color: var(--ColorTaronjaFosc);
}

#vinilos h1 {
  color: var(--ColorTaronjaFosc);
}

#vinilos h3 {
  color: var(--ColorTaronjaFosc);
}

/* A NT va sense fons (a CO és groc suau) */
#vinilos .pres {
  background-color: transparent;
}

#vinilos .pres h2 {
  color: #777777;
}

#vinilos .pres p {
  color: #777777;
}

#vinilos .bloc h2 {
  color: #777777;
}

#infoWind .blocWin .icona p {
  color: var(--ColorTaronjaFosc);
}

#infoWind .blocWin .info h2 {
  color: var(--ColorTaronjaFosc);
}

.prodLlistat:hover {
  border: var(--ColorTaronjaFosc) solid 1px;
}

.torreLlistat .nomProducte,
.monitorsLlistat .prodMonitor .nomProducte {
  margin-bottom: 10px;
}

.torreLlistat .infoProdValor,
.monitorsLlistat .infoProdValor {
  font-size: 16px;
}

.monitorsLlistat .prodMonitor .blocPreus {
  padding: 5px;
}

.monitorsLlistat .prodMonitor .blocPreus .bp_col_1 {
  border-bottom: var(--ColorText) solid 1px;
}

.monitorsLlistat .prodMonitor .blocPreus .bp_col_2 {
  border-bottom: var(--ColorText) solid 1px;
}

.TitolGaming {
  color: #ffe2e3;
}

.SubtitolGaming2 {
  color: #2d2d2d;
  font-size: 20px;
  font-family: 'Nunito', sans-serif;
  margin: 0;
  padding: 0;
}

.QuadratBloc3 {
  background-color: #ffe2e3;
}

.apartatoficina {
  background-color: #ffe2e3;
}

::selection {
  background-color: #ff0008;
}


/* ----- Responsive ----- */

@media screen and (min-width:600px) {
  .SubtitolGaming2 {
    font-size: 26px;
  }
}

@media screen and (min-width:900px) {
  #peuFila_1 .peuFila_1_bloc {
    background-color: var(--ColorTaronjaFosc);
  }

  #peuFila_2 .peuFila_2_bloc {
    background-color: var(--ColorTaronjaClar);
  }

  .LogoInici {
    max-width: 70%;
    padding-top: 1%;
  }
}