html, body{
  	font-family: 'Montserrat', sans-serif;
  	background: #FFF; /* #E9E9E9; */ /*#F1F1F1;*/
  	height:100%;
  	margin:0;padding:0;
 }
 
 .mainDiv{
 	display:flex;
 	flex-wrap:wrap;
 	justify-content:center;
 }

.loadingMsgDiv{
	/* Centrat a la pantalla*/
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	
	color: #0C3840;
	font-size:13px;
	text-align:center;
	padding: 15px 20px 15px 20px;  /* TOP RIGHT BOTTOM LEFT*/
	background:white;
	border: 1px solid #cccccc; 
	border-radius: 4px 4px 4px 4px; /* Cantonades redondejades */ /* top-left corner, top-right corner, bottom-right corner, bottom-left corner */
	box-shadow: 4px 5px 9px #888888;	
	overflow: hidden;
	z-index:100; /*Para este encima de cualquier otro objeto que pueda estar en la web*/
}


.textNoSeleccionable{
	-moz-user-select: -moz-none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    -o-user-select: none;
    user-select: none;
}


/*
========================================
		DIVS GRANS CONTENIDORS
========================================
*/    
.mainDivAmbELCosDePagina{
    width:100%;
    margin-top:11rem;
    max-width:1850px; /*  maxima amplada de la pàgina */
    min-height:45rem;
}

.contenidorPagines{
	display:flex;
	justify-content:center;
	flex-wrap: wrap;
	width:100%;
	padding-top:2rem;
	margin-bottom:15rem;
}

.titolPagina{
    font-family: 'Montserrat', sans-serif; 
	font-weight:400;
	font-size:2rem;
	text-align:center;
}
.contenidorTextInfo{
	padding: 2rem;
	background:white;
	/*border-radius:5px;*/
	margin:10px 0.5% 0px 1%;
}


.contenidorTOTSAnuncis{
	width:77%; 
	margin:0.8rem 0.5% 21rem 1%;/* TOP RIGHT BOTTOM LEFT*/
}

.contenidorALTRESItems{
	width:20%;
	margin:0.8rem 1% 4rem 0.5%; /* TOP RIGHT BOTTOM LEFT*/
}






/*
========================================
		OFERTES DESTACADES
========================================
*/
.mainDivAnunciDestacat{
	width:100%;
	overflow:hidden;
}

.divSlider{
    width:100%;
    background: #4f6c70;
    -webkit-box-shadow: 5px 8px 20px -13px rgba(0,0,0,0.75);
    -moz-box-shadow: 5px 8px 20px -13px rgba(0,0,0,0.75);
    box-shadow: 5px 8px 20px -13px rgba(0,0,0,0.75);          	                        
}

.divContenidorPatrocinat{
    position: absolute;
    margin:0.5rem;
    overflow:hidden;
}

.imatgeDestacada{overflow:hidden;float:left;width:22%;}
.imatgeDestacada img{width:100%;object-fit: cover;}

.divContingutDestacat{color:white;float:left;width:74%;margin-left:2rem;}

.titolDestacat{font-family: 'Montserrat', sans-serif;font-weight:600;font-size:1.5rem;margin-top:2.5rem;}
.contingutDestacat{font-family: 'Montserrat', sans-serif; font-weight:400;font-size:1rem;margin-top:1rem;}



/*
========================================
			LLISTAT D'OFERTES
========================================*/
.midaSeparadorOfertes{width:1%;}

.ofertaContainer{
	overflow: hidden;
	display:flex;
	flex-wrap:wrap;
	justify-content: space-around;
	padding:1rem 1rem 2.5rem 1rem; /* TOP RIGHT BOTTOM LEFT*/
	margin-top:1rem;
	background:white;
}

.ofertaMainDiv{
    position: relative;
	width:23%;
	background:white;
	margin:1.5rem 0 1.5rem 0; /* TOP RIGHT BOTTOM LEFT*/
	color: black;
	text-decoration:none;
	/*  
    -webkit-box-shadow: -1px 10px 14px -7px rgba(0,0,0,0.75);
    -moz-box-shadow: -1px 10px 14px -7px rgba(0,0,0,0.75);
    box-shadow: -1px 10px 14px -7px rgba(0,0,0,0.75);*/

}

.ofertaBorderDiv{
	/*  padding-bottom: 1rem;
	border: 1px solid #E0E0E0;*/
}

.cercle {
	position: absolute;
    border-radius: 50%;
    width: 6rem;
    height: 5.5rem;
    background: #D42E12;
    border:2px solid white;
    right:-1rem;
    top:-1rem;
}

.cercleText{
	margin-top:1.5rem;
	font-weight:700;
    color: white;
    font-size:2rem;
	text-align:center;
}


.ImatgeArt{
	width:100%;
	border: 1px solid #E0E0E0;
	overflow:hidden;
}

.ImatgeArt img{
	width:100%;
	max-height:15rem;
	object-fit:cover;
	vertical-align: middle;
}

.titolArt{
	font-family: 'Montserrat', sans-serif;
	font-weight:500;
	font-size:1.1rem;
	line-height: 1.4;
	/* text-align:center; */
	text-overflow: ellipsis;
	overflow: hidden;
    margin: 0.7rem 0 0.8rem 0; /* TOP RIGHT BOTTOM LEFT*/
    color: #212121;
    
    /* TEXT ELLIPSIS*/
	text-overflow: ellipsis;
	overflow: hidden;
	display: -webkit-box;
	-webkit-line-clamp: 3; /* 3 linees màxim */
	-webkit-box-orient: vertical;
	word-wrap: break-word;/* Important for long words! */
}

.titolArt:hover{color:#D42E12;}

.subTitolArt{
	font-family: 'Montserrat', sans-serif;
	font-weight:300;
	color: #424242;
	font-size:0.9rem;
	line-height: 1.4;
	text-align: justify;
   	margin:0.5rem 0 0.8rem 0; /* TOP RIGHT BOTTOM LEFT*/
    white-space: pre-line; /* Para que muestre los ENTERS y TABS en el texto */
    
    /* TEXT ELLIPSIS*/
	text-overflow: ellipsis;
	overflow: hidden;
	display: -webkit-box;
	-webkit-line-clamp: 10; /* 10 linees màxim */
	-webkit-box-orient: vertical;
	word-wrap: break-word;/* Important for long words! */
}

.distancia{
    font-weight:700;
    font-size:0.8rem;
    color:#72a4af;
    text-align:right;
    margin-right:1rem;
}

/*
========================================
		MAPS RESPONSIVE
========================================
*/ 
.map-responsive{
    max-width:1000px;
    margin-top:1rem;
    overflow:hidden;
    padding-bottom:36.25%;
    position:relative;
    margin-left: auto;
    margin-right: auto;
    height:0;
}
.map-responsive iframe{
    left:0;
    top:0;
    height:100%;
    width:100%;
    position:absolute;
}



  /* +++++++++++++++++++++++++++++++++++++++++++++++++++++++++
            S P I N N E R  
 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
.spinnerGran {
  border: 0.4rem solid rgba(0, 0, 0, 0.1);
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  border-left-color: var(--main-color);
  margin:auto;

  animation: spin2 1s ease infinite;
}

@keyframes spin2 {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

.spinnerPetitBlanc {
  border: 0.2rem solid rgba(0, 0, 0, 0.1);
  width: 1.2rem;
  height: 1.2rem;
  border-radius: 50%;
  border-left-color: #FFF;
  margin:auto;

  animation: spin2 1s ease infinite;
}
 


/*
========================================
	FORMULARI LOCALITAT
========================================
*/
.contenidorFormulari{
	position: fixed; 
	top:0px;
	left:0px;
	z-index:100;
	width:100%;
	height:100%;
	background-color: rgba(0, 0, 0, 0.6);
}

.formulari{
		/* Centrat a la pantalla*/
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width:80%;
	max-width:300px;
	min-height:260px;
	border-radius:3px;
	
	color: var(--blau);
	font-size:0.9rem;
	text-align:center;
	padding: 15px 20px 15px 20px;  /* TOP RIGHT BOTTOM LEFT*/
	background:var(--blanc); 
	
	font-family: 'Montserrat', sans-serif !important;
	/*-webkit-box-shadow: -4px 0px 0px 500px rgba(0,0,0,0.82);
	-moz-box-shadow: -4px 0px 0px 500px rgba(0,0,0,0.82);
	box-shadow: -4px 0px 0px 500px rgba(0,0,0,0.82);*/

	overflow: hidden;
	z-index:100; /*Para este encima de cualquier otro objeto que pueda estar en la web*/
}

.centerForm{
	/*background-color:#EEEEEE; */
    width:100%;
    margin:0px auto;  /* centramos el contenido en el div padre*/
    text-align:center;
}

.titolCerca{
	font-size:1rem;
	text-align:center;
	color: #00404F;
	
	padding: 10px 2px 20px 2px; /* TOP RIGHT BOTTOM LEFT*/
  	font-family: 'Montserrat', sans-serif;
  	font-weight:400;
}

.botoAcceptar {
	text-align:center;
    font-size:0.9rem;
    font-weight: 600;
    border: 2px solid var(--vermell);
    background-color: var(--vermell);
    color: white;
    padding: 0.85rem 0rem;
    border-radius: 4px;
    cursor: pointer;
    width:80px;
    
    transition:1s;
}

.botoAcceptar:hover {
    background-color: var(--blanc);
    color: var(--vermell);
    border: 2px solid var(--vermell);
}


/*
========================================
	FORMULARI LOGIN
========================================
*/
.inputForm {
	font-family: 'Montserrat', sans-serif;
	font-weight: 600;
	background: var(--blanc);
    width: 100%;
    font-size:0.9rem;
    padding: 12px 20px;
    margin: 2px;
    display: inline-block;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
    outline:none; /* ELIMINA EL BORDE AL SELECCIONAR EL INPUT EN SAFARI I CHROME*/
    filter:none; /*  ELIMINA EL COLOR GROC DELS INPUS DEL FORMULARI DE LOGIN AL RECORDAR UN PASSWORD */
}

.passPerduda{
	font-family: 'Montserrat', sans-serif !important;
    font-size:0.9rem;
    margin: 25px 0px 10px 0px; /* TOP RIGHT BOTTOM LEFT*/
    display: inline-block;
    color: #9E9E9E;
    text-decoration: none;
    transition: 1s;
}
.passPerduda:hover{color: var(--blau);}


.loadingMsgDiv{
	/* Centrat a la pantalla*/
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	
	color: #0C3840;
	font-size:0.9rem;
	text-align:center;
	padding: 15px 20px 15px 20px;  /* TOP RIGHT BOTTOM LEFT*/
	background:white;
	border: 1px solid #cccccc; 
	border-radius: 4px 4px 4px 4px; /* Cantonades redondejades */ /* top-left corner, top-right corner, bottom-right corner, bottom-left corner */
	box-shadow: 4px 5px 9px #888888;	
	overflow: hidden;
	z-index:100; /*Para este encima de cualquier otro objeto que pueda estar en la web*/
}



/*
	==================================================
			AUTOCOMPLETAR
	==================================================
*/

.inputAutocompletar {
  	border: 1px solid black;
  	background-color: white;
  	padding: 0.8rem 0.5rem;
  	border-radius:4px 4px 4px 4px; /* Cantonades redondejades */ /* top-left corner, top-right corner, bottom-right corner, bottom-left corner */
  	width:90%;
  	
  	font-size:0.8rem;
	color: #00404F;
  	font-family: 'Montserrat', sans-serif;
  	font-weight:400;
}

.autocomplete {
position:relative;
  display: block;
  border-radius:0px 0px 4px 4px; /* Cantonades redondejades */ /* top-left corner, top-right corner, bottom-right corner, bottom-left corner */
  width:70%;
}


.autocomplete-items {
	margin: 0px 5px 0px 5px;  /* TOP RIGHT BOTTOM LEFT*/
	position: absolute;
 	border: 1px solid #d4d4d4;
  	border-bottom: none;
  	border-top: none;
  	z-index: 99;
  	/*position the autocomplete items to be the same width as the container:*/
  	top: 100%;
  	left: 0;
  	right: 0;
}

.autocomplete-items div {
  padding: 10px;
  cursor: pointer;
  background-color: white; /*#E3F2FD; */
}

.autocomplete-items div:hover {
  /*when hovering an item:*/
  background-color: #adcad1; 
  color:white;
}

.autocomplete-active {
  /*when navigating through the items using the arrow keys:*/
  background-color: DodgerBlue !important; 
  color: #ffffff; 
}



/*========================================
	BANNERS DE LA DRETA DE LA PAGINA
========================================*/
.divBanners{}
.divBannersMobil{}
.divBotons{}

.segueixnos{
    width:100%;
    background:white;
    display:inline-block;
    border-radius:0.3rem;
    border: 1px solid #E0E0E0;
}

.divTwitter{
    margin-top:1rem;
}

.divDestacats{
    margin-top:1rem;
}

.divFacebook{
    margin-top:2rem;
	margin-bottom:7rem;
}

.twiter{
	max-height:50rem;
	overflow:auto;
}


/*
========================================
			PAGINAR EL LLLISTAT
========================================
*/
.paginaActual{
	font-size:1.2rem;
	float:left;
	width:2.5rem;
	height:2.5rem;
	margin-left:1rem;
	color:white;
	font-weight:bold;
	margin-bottom:0.4rem;
	
	display:flex;
	justify-content:center;
	
	background:#D42E12;
	border:1px solid #a8200b;
	border-radius: 4px;
}

.paginaActual span{
	margin:auto;
}

.pagina{
	font-size:1.2rem;
	float:left;
	width:2.5rem;
	height:2.5rem;
	border:1px solid #757575;
	border-radius: 4px;
	margin-left:1rem;
	margin-bottom:0.4rem;
	color:#757575;
	
	display:flex;
	justify-content:center;
	text-decoration:none;
	
	opacity: 0.6;
  	transition: 0.52s;
}

.pagina:hover{
	background:#D42E12;
	border:1px solid #a8200b;
	color:white;
	font-weight:bold;
	
	opacity: 1;
}	

.pagina span{
	margin:auto;
}



/*
	==================================================
			BOTO FLOTANT PER COMPARTIR ENLLAÇ
	================================================== */
.floatButtonAmber{
	position: fixed;
    border-radius: 50%;
    behavior: url(PIE.htc); /* remove if you don't care about IE8 */
    width: 55px;
    height: 55px;
    background: #FF9100;
    right:30px;
    bottom:50px;
    text-decoration:none;
    font-family: MontserratBold;
    color: white;
	text-align:center;
	
	-webkit-box-shadow: 1px -1px 4px 0px rgba(0,0,0,0.5);
	-moz-box-shadow: 1px -1px 4px 0px rgba(0,0,0,0.5);
	box-shadow: 1px -1px 5px 0px rgba(0,0,0,0.5);
	
	z-index:50;
	transition: 0.5s;
}

.floatButtonAmber:hover{
	transform: scale(1.3);
}


/*========================================
	CARNET DE SOCI
========================================
*/
.carnet{
		/* Centrat a la pantalla*/
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width:90%;
	max-width:450px;
	min-height:250px;
	
	color: #0C3840;
	font-size:13px;
	text-align:center;
	background:white;
	border: 3px solid white; 
	border-radius: 5px;
	
	-webkit-box-shadow: -4px 0px 0px 3000px rgba(0,0,0,0.82);
	-moz-box-shadow: -4px 0px 0px 3000px rgba(0,0,0,0.82);
	box-shadow: -4px 0px 0px 3000px rgba(0,0,0,0.82);

	overflow: hidden;
	z-index:100; /*Para este encima de cualquier otro objeto que pueda estar en la web*/
}


/*
========================================
			TEXT QUE PARPADEJA
========================================
*/

.parpadea {
  
  animation-name: parpadeo;
  animation-duration: 1s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;

  -webkit-animation-name:parpadeo;
  -webkit-animation-duration: 2.5s;
  -webkit-animation-timing-function: linear;
  -webkit-animation-iteration-count: infinite;
}

@-moz-keyframes parpadeo{  
  0% { opacity: 1.0; }
  50% { opacity: 0.0; }
  100% { opacity: 1.0; }
}

@-webkit-keyframes parpadeo {  
  0% { opacity: 1.0; }
  50% { opacity: 0.0; }
   100% { opacity: 1.0; }
}

@keyframes parpadeo {  
  0% { opacity: 1.0; }
   50% { opacity: 0.0; }
  100% { opacity: 1.0; }
}



.floatedLeft{float:left;}
.floatedRight{float:right;}
.clear{clear:both;}
.paddingLeft20px{padding: 0px 0px 0px 20px;  /* TOP RIGHT BOTTOM LEFT*/}







/* .........................................................................................
    ESTILS PANTALLES PETITES PER A DISPOSITIUS MOBILS
   .........................................................................................
 */
 
     /*==========================================
 		P A N T A L L A   F I N S   1600px
 	========================================== */
    @media screen and (max-width: 1600px) {

        /*========================================
		    DIVS GRANS CONTENIDORS
	    ========================================*/
	    .contenidorTOTSAnuncis{ width:72%;  }

	    .contenidorALTRESItems{ width:25%;  }
	
        /*========================================
			LLISTAT D'OFERTES
           ========================================*/
        .ofertaMainDiv{ width:31%; }
        
    }
    
    

    /*==========================================
 	   P A N T A L L A   F I N S   1300px
 	========================================== */
    @media screen and (max-width: 1300px) {
    
	    /*========================================
		    OFERTES DESTACADES
         ========================================*/
	    .imatgeDestacada{width:32%;}
        .divContingutDestacat{width:62%;;}
        
    }


 
    /*==========================================
 	   P A N T A L L A   F I N S   1120px
 	========================================== */
    @media screen and (max-width: 1120px) {
	
	    .contenidorPagines{margin-bottom:3rem;}
	
	    /*========================================
		    DIVS GRANS CONTENIDORS
	    ========================================*/
	    .contenidorTOTSAnuncis{width:96%;margin:0.8rem auto 10rem; auto;}
	    .contenidorALTRESItems{
	        display:flex;
	        flex-wrap:wrap;
	        justify-content:center;
	        width:96%;
	        margin:0 auto 4rem auto; /* TOP RIGHT BOTTOM LEFT*/
	        padding-bottom:7rem;
	    }

        /*========================================
		    OFERTES DESTACADES
         ========================================*/
	    .imatgeDestacada{width:30%;height:12rem;}
        .divContingutDestacat{width:62%;}
        .titolDestacat{font-size:1.4rem;margin-top:0.5rem;}
       

        /*========================================
			LLISTAT D'OFERTES
           ========================================*/
        .ofertaMainDiv{ width:31%; }
        
         /*========================================
		    BANNERS DE LA DRETA DE LA PAGINA
	    ========================================*/
	    .segueixnos{display:none }
	    .divBotons{ display:none; }
	    .divDestacats{ display:none; }
	    .divTwitter{width:47%;margin-top:0.75rem;}
	    .divFacebook{width:47%;margin-top:0;margin-left:1rem;}
	    .twiter{height:31rem;}
	
    }
    
    
    

    /*==========================================
 		P A N T A L L A   F I N S   1024px
 	========================================== */
    @media screen and (max-width: 1024px) {
	    
	    /*========================================
		    OFERTES DESTACADES
        ========================================*/
        .imatgeDestacada{height:9rem;}
        .titolDestacat{font-size:1.2rem;margin-top:0.5rem;}
	
    }
    
    

    /*==========================================
 		P A N T A L L A   F I N S   924px
 	========================================== */
    @media screen and (max-width: 924px) {
	
	   .mainDiv{position:static;}
	    .mainDivAmbELCosDePagina{margin-top:2rem;} /* com que canviem el estil del header cal posar el margin a 0, sino el header es va avall. */
	    
	
	    /* ========================================
		   BARRA AMB LA INFO DE LES COOKIES
	   ========================================*/
       .politica{left:10px; margin-left:0px; right:auto;}
    
    }
    
    
    /*==========================================
 		P A N T A L L A   F I N S   850px
 	========================================== */
    @media screen and (max-width: 850px) {
	
	    /* ========================================
		    MAPS RESPONSIVE
        ========================================*/ 
        .map-responsive{padding-bottom:56%;}
	
	    /*========================================
		    DIVS GRANS CONTENIDORS
	    ========================================*/
	    .contenidorTOTSAnuncis{width:92%;margin:0.8rem auto 10rem auto;}
	    .contenidorALTRESItems{ width:92%; }
	    
	     /*========================================
			LLISTAT D'OFERTES
        ========================================*/
	    .ofertaMainDiv{ width:47%; }
    }



    /*==========================================
 		P A N T A L L A   F I N S   670px
 	========================================== */
    @media screen and (max-width: 670px) {
	
	    /*========================================
		    DIVS GRANS CONTENIDORS
	    ========================================*/
	    .contenidorTOTSAnuncis{width:95%;}
	    .contenidorALTRESItems{width:97%;}
	    
    }
    

    /*==========================================
 		P A N T A L L A   F I N S   530px
 	========================================== */
    @media screen and (max-width: 530px) {
	
	    /* ========================================
		    MAPS RESPONSIVE
        ========================================*/ 
        .map-responsive{padding-bottom:70%;}
        
        
	    .inputForm { font-size:1.1rem; } 
	    .botoAcceptar { font-size: 1.1rem; }
	    
	    /*========================================
		    DIVS GRANS CONTENIDORS
	    ========================================*/
	    .contenidorTOTSAnuncis{width:95%;}
	    .contenidorALTRESItems{width:97%;}
	    .ofertaContainer{justify-content: center;}
	    
	    /*========================================
		    OFERTES DESTACADES
        ========================================
        */
        .mainDivAnunciDestacat{ width:80%;margin:auto;padding-bottom:1rem;}

        .imatgeDestacada{display:inline-block;width:100%;float:none;height:16rem;}
        .divContingutDestacat{width:100%;margin-left:0;float:none;}
	    
	    
	    .ofertaContainer{background:transparent;}
	    
	    /*========================================
			LLISTAT D'OFERTES
        ========================================*/
        .ofertaContainer{ padding:1rem 0 2.5rem 0; }
        
        .ofertaMainDiv{
            width:80%;
            margin:0.5rem 0 1.5rem 0; /* TOP RIGHT BOTTOM LEFT*/
            -webkit-box-shadow: 5px 8px 20px -13px rgba(0,0,0,0.75);
            -moz-box-shadow: 5px 8px 20px -13px rgba(0,0,0,0.75);
            box-shadow: 5px 8px 20px -13px rgba(0,0,0,0.75);   

        }

        .ofertaBorderDiv{
	        padding-bottom: 1rem;
	        border: 1px solid #E0E0E0;
        }
        
        .titolArt{margin: 0.7rem 1rem 0.8rem 1rem; text-align:center;}
        .subTitolArt{ margin:0.5rem 1rem 0.8rem 1rem;  }
        
        .ofertaContainer{flex-direction: column;align-items: center;}
        
        
        /*========================================
		    BANNERS DE LA DRETA DE LA PAGINA
	    ========================================*/
	    .divTwitter{width:80%;margin-top:0.75rem;}
	    .divFacebook{width:80%;margin-top:2rem;margin-left:0;}
	    .twiter{height:31rem;}
    }
    
    
    
    
    /*==========================================
 		P A N T A L L A   F I N S   440px
 	========================================== */
    @media screen and (max-width: 440px) {
	
	    /*========================================
			LLISTAT D'OFERTES
        ========================================*/
        
        .ofertaMainDiv{width:95%; }
        
        
        /*========================================
		    OFERTES DESTACADES
        ========================================
        */
        .mainDivAnunciDestacat{ width:95%;}
        
        
        /*========================================
		    BANNERS DE LA DRETA DE LA PAGINA
	    ========================================*/
	    .divTwitter{width:95%;}
	    .divFacebook{width:95%;}
    }