@import url('//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css');

/* -------------  sobreescric alguns estils que el WP em canvia ------------- */
/* copio els estils del WP per sobreescriure (en alguns casos) els del bootstrap */
body {
    font-family: "Open Sans";
    line-height: 28px;
    font-weight: 400;
    font-style: normal;
    color: #515151;
    font-size: 16px;
}
.container {
    padding-top: 0;
    padding-bottom: 0;
}
.modal-header .close {
    margin: -1rem -1rem -1rem auto !important;
}
.btn i {
    margin-left: 0;
    font-size: 16px;
}
input[type="text"], input[type="email"], input[type="url"], input[type="password"], input[type="search"], input[type="number"], input[type="tel"], input[type="range"], input[type="date"], input[type="month"], input[type="week"], input[type="time"], input[type="datetime"], input[type="datetime-local"], input[type="color"], textarea, select, .input-text {
    border-radius: 0.25rem !important;
    margin: 0;
}
select {
    height: auto !important;
}
.btn-primary:hover {
    border: 1px solid #008cbe;
}
.btn-secondary:hover {
    border: 1px solid #adb5bd;
}
.btn-sm, .btn-sm:hover {
    font-size: 0.875rem !important;
}
.btn-outline-secondary {
    color: #adb5bd !important;
    border-color: #adb5bd !important;
    background-color: transparent !important;
}
.btn-outline-secondary:hover {
    color: #212529 !important;
    background-color: #adb5bd !important;
    border-color: #adb5bd !important;
}
.btn-warning {
    color: #212529 !important;
    background-color: #ffc107 !important;
}
.btn-danger {
    background-color: #dc3545 !important;
}
.btn-light {
    color: #212529 !important;
    background-color: #fff !important;
    margin-bottom: 0 !important;
}
.btn-info {
    color: #fff;
    background-color: #17a2b8 !important;
    border-color: #17a2b8;
}
.btn-info:hover {
    border: 1px solid #17a2b8;
}
.btn-danger:hover {
    border: 1px solid #c23241;
    background-color: #c23241 !important;
}
h1.etiquetes {
    line-height: normal;
    font-weight: normal;
    color: inherit;
}
label {
    font-weight: normal;
}
#filtre label {
    margin-bottom: 2px;
}
h2::after {
    background-image: url('https://spwear.es/wp-content/uploads/2022/08/logo_gr-4.png');
    margin-bottom: 40px;
}
h2.noAfter::after, h3.noAfter::after {
    line-height: normal !important;
    background-image: none !important;
    margin: 0 !important;
}
table td, table th {
    padding: .75rem !important;
}
table,  table tr,  table tr table tr, table thead tr {
    background: none !important;
    color: #515151;
}
.progressbar li img {
    height: 32px;
}
/*----------------------------------------------------------------------------*/

/* --------------- ESTILS GENERALS ------------------- */
h1.titol:after{
	display: block;
    margin: 18px auto 30px auto;
    height: 2px;
    content: " ";
    background-color: #1d8d9e;
    width: 190px;
}
h1.titol2:after{
	display: block;
    margin: 5px auto 20px auto;
    height: 2px;
    content: " ";
    background-color: #1d8d9e;
}
h1.titolNoticia:after {
	margin: 18px 0px;
}

h1.h1Gran {
	font-size: 3.6em;
}

h1.titolStock{
	font-size: 3.6em;
	font-weight: bold;
	color: #E2E2E2;
	margin-bottom: -20px;
	position: relative;
	z-index: -1;
}

h5.subtitols {
    font-size: 20px !important;
    font-weight: bold;
    margin-bottom: 20px;
}

.fontLight {
	font-weight: 300;
}
.fontAlt {
	font-family: 'Open Sans', Sans, sans-serif !important;
}

.fonsBlanc {
	background-color: #FFF !important;
}
.fonsNegre {
	background-color: #000;
}
.fonsGrisClar {
	background-color: #f5f5f5 !important;
}
.fonsGrisMig {
	background-color: #E5E5E5;
}
.fonsGrisLabels {
	background-color: #efefef;
}
.fonsBlau {
	background-color: #00a8e4;
}
.fonsVerdClar {
	background-color: #E5FFEF;
}
.fonsBlauFosc {
	background-color: #000f33;
}
.fonsBlauClar {
	background-color: #ebf1ff !important;
}
.fonsRosa {
	background-color: #e63eae !important;
}
.fonsBlauDropDown {
	background-color: rgba(0,17,53,.8);
}
.fonsBlauDropDownMobile {
	background-color: rgba(0, 111, 150, .8);
}
.dropdown-item:hover, .dropdown-item:focus {
    background: none;
}
a.dropdown-item:hover.link_blanc {
    color: #fff;
}

/* colors textes */
.txtBlanc {
	color: #fff;
}
.txtNegre {
	color: #000;
}
.txtFosc {
	color: #43433d;
}
.txtGris {
	color: #8b8b8b;
}
.txtGrisClar {
	color: #ccc;
}
.txtBlau {
	color: #00a8e4;
}
.txtVerd {
	color: #3DA418;
}

/* mides texte */
.txtSmall {
	font-size: 90% !important;
	line-height: 1.4rem !important;
}
.txtSmall-80 {
	font-size: 80%;
}
.txtSmall-70 {
	font-size: 70%;
}
.txtSmall-60 {
	font-size: 60%;
}
.txtGran-10 {
	font-size: 110%;
}
.txtGran-20 {
	font-size: 120%;
}
.txtGran-40 {
	font-size: 140%;
}
.txtGran-60 {
	font-size: 160%;
}

.txt100x100 {
	font-size: 100%;
}

.capitalized-firstLetter:first-letter {
	text-transform: uppercase;
}

/* botons */
.btn-custom {
    color: #fff;
    border-color: #fff;
    background: none !important;
}
.btn-custom:hover {
    color: #fff;
    background-color: #000 !important;
    border-color: #000 !important;
}

.btn-custom-2 {
    background-color: #D5843D !important;
    border-radius: 0.2rem;
    color: #fff;
    border-color: #D5843D;
}
.btn-custom-2:hover {
    color: #fff;
    background-color: #C4722B !important;
    border: 1px solid #C4722B;
}

.w100x100 {
	width: 100%;
}

/* borders */
.border-blanc-gran {
	border: 9px solid #fff;
	box-shadow: 0px 0px 8px rgba(0, 0, 0, .3);
}

hr.blava-petita {
	width: 190px;
	border-top: 2px solid #bbe8f8;
}
hr.blauFosc-petita {
	width: 190px;
	border-top: 2px solid #1d8d9e;
}
hr.hrGrisClar {
	border-color: #cccccc;
}

.modalSenseFons {
	background: none;
	border: none;
}

@media (min-width: 576px) {
  .modal-mitja {
    max-width: 600px;
  }
}

/* canvio el color de fons (i la fletxeta) dels tooltips */
.tooltip.bs-tooltip-bottom > .tooltip-inner {
	background-color: #000f33;
}
.bs-tooltip-auto[x-placement^=bottom] .arrow::before,
.bs-tooltip-bottom .arrow::before {
  border-bottom-color: #000f33;
}


/* modal seccions */
.modal-backdrop.show { /* canvio l'opacitat del fons */
    opacity: 0.7;
}
#modalSeccions .modal-dialog { /* no limito l'amplada */
	max-width: none;
}
#modalSeccions h1, #modalSeccions h4 {
	color: #fff;
	text-shadow: 2px 2px 1px rgba(0,0,0, 0.4);
}
#modalSeccions .fonsModalSeccio, #modalSeccions .fonsModalSeccioPetita {
	background-color: rgba(1, 150, 208, 0.9);
	padding: 100px 0;
	text-align: center;
	margin: 1px;
	transition: background  0.15s ease-in-out;
}
	#modalSeccions .fonsModalSeccio:hover, #modalSeccions .fonsModalSeccioPetita:hover {
		background-color: rgba(1, 150, 218, 1);
	}

#modalSeccions .fonsModalSeccioPetita {
	padding: 65px 0;
}

#containerGlobalCercador {
    position: relative;
    z-index: 999;
}

#tancarFiltresAvansats {
    position: absolute;
    top: 0px;
    right: 0px
}

/* linea divisora filtres avançats */
div.hr {
    width:100%;
    height: 1px;
    background: #cfcfcf;
    position:relative;
    margin-top:15px;
}
div.hr:after {
    content:'';
    position: absolute;
    border-style: solid;
    border-width: 15px 15px 0;
    border-color: #E5E5E5 transparent;
    display: block;
    width: 0;
    z-index: 1;
    top: 0px;
    left: 50%;
}
div.hr:before {
    content:'';
    position: absolute;
    border-style: solid;
    border-width: 15px 15px 0;
    border-color: #cfcfcf transparent;
    display: block;
    width: 0;
    z-index: 1;
    top: 1px;
    left: 50%;
}

/******************************************/

/* ------------- col·leccions ----------------- */
.form-control::-moz-placeholder {
	color: #BBB;
}
.form-control::placeholder {
	color: #BBB;
}

/* -------------- clientes ------------ */
/* login */
.fonsUser {
	background: url(../img/fons-users.png) right center no-repeat;
	background-size: auto 100%;
}
.input-group-prepend {
	cursor: pointer;
}
/* barra nav lateral */
ul.navClients {
    /*box-shadow: 0.1rem 0.1rem .6rem rgba(0, 0, 0, 0.4);*/
    border-radius: 0;
}
ul.navClients .list-group-item {
    background-color: #000f33;
    border-bottom-color: #fff;
    padding: 0.65rem 0.95rem;
    font-size: 0.95rem;
}
ul.navClients .list-group-item.actiu {
	background-color: #041d57;
}
ul.navClients .list-group-item-action:hover, .list-group-item-action:focus {
	background-color: #041d57;
}
ul.navClients.sticky-top {
    top: 140px;
}

/* ----------- afegir als preferits ----------*/
#resultatAfegirPreferits {
	z-index: 9990;
	top: 20px;
	left: 50%;
	/*transform: translateX(-50%) translateY(-50%);*/
	transform: translateX(-50%);
	display: none;
}

#llistatCarpetes > div.activa {
	cursor: pointer;
}
#llistatCarpetes > div.activa:hover {
	transition: all ease 0.3s;
	background-color: #00a8e4;
	color: #fff;
}
#llistatCarpetes > div.activa:not(:hover) { /* mouseOUT*/
	transition: all ease 0.3s;
}

/* -------------- peu pàgina ---------------- */
#peuPagina {
	/* per situar el footer al final de la pàgina quan el contingut no l'omplena */
	margin-top: auto;
}

.fonsPeu {
	background: url("../img/fons-peu.jpg") center top no-repeat;
	background-size: cover;
}

/* -------------- ENLLAÇOS ---------------- */
/* genèric */
a {
	text-decoration:none;
}
	a:link		{color:#545454}
	a:visited	{color:#545454}
	a:hover		{color:#000000; text-decoration:none}
	a:active	{color:#000000}

a.link_nav {
    text-decoration:none;
}
    a:link.link_nav         {color:#545454}
    a:visited.link_nav      {color:#545454}
    a:hover.link_nav        {color:#000000}
    a:active.link_nav       {color:#000000}
	
a.link_blanc {
    text-decoration:none;
}
    a:link.link_blanc         {color:#fff}
    a:visited.link_blanc      {color:#fff}
    a:hover.link_blanc        {color:#d6d6d6}
    a:active.link_blanc       {color:#fff}

a.link_blanc_boto {
    text-decoration:none;
}
    a:link.link_blanc_boto         {color:#fff}
    a:visited.link_blanc_boto      {color:#fff}
    a:hover.link_blanc_boto        {color:#000}
    a:active.link_blanc_boto       {color:#000}

a.link_negre {
    text-decoration:none;
}
    a:link.link_negre         {color:#000}
    a:visited.link_negre      {color:#000}
    a:hover.link_negre        {color:#545454}
    a:active.link_negre       {color:#545454}

a.link_gris {
    text-decoration:none;
}
    a:link.link_gris		{color:#888}
    a:visited.link_gris		{color:#888}
    a:hover.link_gris		{color:#545454}
    a:active.link_gris		{color:#545454}
	
/* ########################### plugins ################################# */
/****************************** slideshows *******************************/
.slideShow_fotos {
    width: 100%;
    margin: 10px auto 30px auto;
}
.slideShow_fotos img {
    margin-right: 100px;
}
div.slick-slide {
	padding: 0 5px;
}
/* controls slideshow */
.prevButton,
.nextButton {
    position: absolute;
    display: block;
    top: 50%;
    margin: -34px -25px -34px -25px;
    z-index: 10;
    cursor: pointer;
}
#prevButton_fotos i,#nextButton_fotos i, #prevButton_fotos2 i,#nextButton_fotos2 i {
    font-size: 3.0em;
    color: #aaa;;
}
#prevButton_fotos i:hover,#nextButton_fotos i:hover, #prevButton_fotos2 i:hover,#nextButton_fotos2 i:hover {
    color: #545454;;
}
.nextButton {
    right: 0;
}

/* dots */
.slick-dots {
    position: absolute;
    bottom: -40px;
    display: block;
    width: 100%;
    padding: 0;
    list-style: none;
    text-align: center;
}
.slick-dots li {
    position: relative;
    display: inline-block;
    width: 20px;
    height: 20px;
    margin: 0 0px;
    padding: 0;
    cursor: pointer;
}
.slick-dots li button {
    font-size: 0;
    line-height: 0;
    display: block;
    width: 20px;
    height: 20px;
    padding: 5px;
    cursor: pointer;
    color: transparent;
    border: 0;
    outline: none;
    background: transparent !important;
}
.slick-dots li button:hover,
.slick-dots li button:focus {
    outline: none;
}
.slick-dots li button:hover:before,
.slick-dots li button:focus:before {
    opacity: 1;
    color: #00a8e4;
}
.slick-dots li button:before {
    font-family: 'slick';
    font-size: 48px;
    font-size: 4rem;
    line-height: 16px;
    line-height: 1rem;
    position: absolute;
    top: 0;
    left: 0;
    width: 20px;
    height: 20px;
    content: '-';
    text-align: center;
    opacity: 1;
    color: #ccc;
}
.slick-dots li.slick-active button:before {
    opacity: 1;
    color: #00a8e4;
}

/* lightGallery */
.lg-backdrop.in {
    /* sobreescribim alguns estils que hem modificat al carousel per .in */
    background-color: #000;
    border: none;
    margin: 0;
    padding: 0;
    opacity: 0.9;
}
#lightgallery a {
    cursor: zoom-in;
}
/* efecte zoom i lupa al fer hover sobre l'imatge */
.demo-gallery > div > div > a {
	display: block;
	overflow: hidden;
}

.demo-gallery > div > div a > img {
  transition: transform 0.15s ease 0s;
  transform: scale3d(1, 1, 1);
  height: 100%;
  width: 100%;
}

.demo-gallery > div > div a:hover > img {
	transform: scale3d(1.1, 1.1, 1.1);
}

.demo-gallery > div > div a:hover .demo-gallery-poster > img {
  opacity: 1;
}

.demo-gallery > div > div a .demo-gallery-poster {
  background-color: rgba(0, 0, 0, 0);
  bottom: 0;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  transition: background-color 0.15s ease 0s;
}

.demo-gallery > div > div a .demo-gallery-poster > img {
  left: 50%;
  margin-left: -10px;
  margin-top: -10px;
  opacity: 0;
  position: absolute;
  top: 50%;
  top: 50%;
  transition: opacity 0.3s ease 0s;
}

.demo-gallery > div > div a:hover .demo-gallery-poster {
  background-color: rgba(0, 0, 0, 0.3);
}

/************** form slider ********************/
.irs--modern .irs-from, .irs--modern .irs-to, .irs--modern .irs-single {
	background-color: #00a8e4;
}
.irs--modern .irs-from::before, .irs--modern .irs-to::before, .irs--modern .irs-single::before {
	border-top-color: #00a8e4;
}
.irs--modern .irs-bar {
    top: 25px;
    height: 5px;
    background: #000;
    background: linear-gradient(to bottom, #00a8e4 0%, #00a8e4 100%);
}

.irs--round .irs-single {
    background-color: #00a8e4;
}
.irs--round .irs-handle {
  top: 26px;
  width: 24px;
  height: 24px;
  border: 4px solid #00a8e4;
}
.irs--round .irs-bar {
  background-color: #00a8e4;
}

/************ col·leccions hover effect *****************************/
/* from https://miketricking.github.io/bootstrap-image-hover/ */
.hovereffect {
    width: 100%;
    /* height: 100%; */
    /*float: left;*/
    overflow: hidden;
    position: relative;
    text-align: center;
    background: #00a8e4;
    cursor: pointer;
}

.hovereffect .overlay {
    width: 100%;
    height: 100%;
    position: absolute;
    overflow: hidden;
    top: 0;
    left: 0;
}

.hovereffect .overlay.eliminarPreferit {
	cursor: auto;
}

.overlay div {
    position: absolute;
    width: 100%;
    top: 50%;
    padding: 0 20px;
    transform: translateY(-50%);
}

.hovereffect img {
    display: block;
    position: relative;
    max-width: none;
    width: calc(100% + 20px);
    transition: opacity 0.35s, transform 0.35s;
    transform: translate3d(-10px, 0, 0);
    backface-visibility: hidden;
}

.hovereffect:hover img {
    opacity: 0.4;
    transform: translate3d(0, 0, 0);
}

.hovereffect h2, .hovereffect h3 {
    text-transform: uppercase;
    color: #fff;
    text-align: center;
    position: relative;
    font-size: 18px;
    overflow: hidden;
    padding: 0 0 0px 0;
    background-color: transparent;
    opacity: 0;
    line-height: 1.6rem !important;
}
.hovereffect h3 {
    font-size: 14px;
    padding: 0 0 8px 0;
}

.hovereffect h3:after {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background: #fff;
    content: '';
    transition: transform 0.35s;
    transform: translate3d(-100%, 0, 0);
}

.hovereffect:hover h2, .hovereffect:hover h3 {
	opacity: 1;
	transition: opacity 0.35s, transform 0.35s;
}

.hovereffect:hover h3:after {
	opacity: 1;
    transform: translate3d(0, 0, 0);
}

.hovereffect p {
    color: #FFF;
    opacity: 0;
    padding-top: 4px;
    transition: opacity 0.35s, transform 0.35s;
    transform: translate3d(100%, 0, 0);
}

.hovereffect:hover p {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}

/*************** validació formularis JS *******************/
.formError .formErrorContent {
	font-size: 0.75em;
	min-width: 300px;
}

/*************** radio buttons mercats (col·leccions) *******************/
.button-label {
  display: inline-block;
  padding: 0.8em 1em 0.4em 1em;
  /*margin: 0.2em;*/
  cursor: pointer;
  color: #292929;
  border-radius: 0.25em;
  background: #efefef;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), inset 0 -3px 0 rgba(0, 0, 0, 0.12);
  transition: 0.3s;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.button-label.fonsNew {
	background-color: #00a8e4;
	color: #fff;
	box-shadow: 0 1px 3px rgba(190, 190, 190, 1), inset 0 -3px 0 rgba(210, 210, 210, 1);
}
.button-label h1 {
  font-size: 1em;
}
.button-label:hover {
  background: #00A8E4;
  color: #fff !important;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2), inset 0 -3px 0 rgba(0, 0, 0, 0.32);
}
.button-label:active {
  transform: translateY(2px);
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2), inset 0px -1px 0 rgba(0, 0, 0, 0.22);
}
:checked + .button-label {
  background: #00a8e4;
  color: #efefef;
}
:checked + .button-label:hover {
  background: #00a8e4;
  color: #e2e2e2;
}

.hidden {
  display: none;
}

/* ribbon checkbox MERCATS */
.parent {
  overflow: hidden; /* required */
  position: relative; /* required  for demo*/
}

.ribbon {
	width: 100%;
	text-align: center;
 	/* background: #ff8f0a; el background el faig amb php inline */
	color:white;
	font-size: 0.7em;
	padding: 2px 0 0 0;
  	position: absolute;
  	left:8px;
  	transform: translateX(-50%) translateY(0%) rotate(-90deg);
  	transform-origin: center center;
}

/* ribbon NEW (fotos) */
.ribbonNew {
  margin: 0;
  padding: 0;
  background: #00a8e4;
  color:white;
  font-size: 1em;
  font-weight: bold;
  text-shadow: 2px 2px 3px rgba(0, 0, 0, 0.4);
  padding:0.2em 0;
  position: absolute;
  top:0;
  left:0;
  transform: translateX(-30%) translateY(0%) rotate(-45deg);
  transform-origin: top right;
  z-index:999;
}
.ribbonNew:before,
.ribbonNew:after {
  content: '';
  position: absolute;
  top:0;
  margin: 0 -1px; /* tweak */
  width: 100%;
  height: 100%;
  background: #00a8e4;
}
.ribbonNew:before {
  right:100%;
}
/* ribbon per la foto de la fitxa (gran) */
.ribbonNewGran {
	transform: translateX(20%) translateY(50%) rotate(-45deg);
}
.ribbonNew:before,
.ribbonNew:after {
	padding: 0 60px;
}

/* ******* step progress bar (estat comandes detalls) ******** */
/* icones dins els punts i textes sota els punts */
.svgGrisClar {

}
.progressbar li {
	width: 30%;
	font-size: 1.4rem;
	color: inherit;
}
.progressbar li i {
	margin-bottom: 15px;
	color: #ccc;
}
.progressbar li img {
	margin-bottom: 10px;
	filter: invert(94%) sepia(0%) saturate(215%) hue-rotate(157deg) brightness(89%) contrast(89%);
	
}
.progressbar li.active i, .progressbar li.active img {
	color: #666;
}
.progressbar li.active img {
	filter: invert(43%) sepia(0%) saturate(779%) hue-rotate(136deg) brightness(92%) contrast(91%);
}
/* barra de progres dels punts actius inactius */
.progressbar li:before {
	height: 15px;
	background-color: #ccc;
	top: 45px;
}
/* barra de progres general */
.progressbar li.active + li:before {
	background-color: #ccc;
}
/* sobreescric el color de la barra de progrés general pel progres actiu */
.progressbar li.active:before {
	background-color: #00a8e4 !important;
}
/* punts inactius */
.progressbar li:after {
	width: 30px;
	height: 30px;
	border: 1px solid #ccc;
	background-color: #ccc;
	color: white;
}
/* punts actius */
.progressbar li.active:after {
	border: 1px solid #00a8e4;
  	background-color: #00a8e4;
}