@charset "utf-8";

/*font-family: 'Lora', serif;
font-family: 'Roboto', sans-serif;*/

/* definicions generals de la web */

*{
	font-family: 'Roboto', sans-serif;
	font-weight: 300;
	color:#666666;
	/*font-size:1rem;*/
}

a{
	/*color:#88b14C !important;*/
}
a:hover{
	color:#88b14C !important;
}

i:hover{
	cursor:pointer;
}
input {
	border:1px solid #999;
	-webkit-border-radius: 5px;
	border-radius: 5px;
	padding:0.5rem;
	outline:none;
	width:100%;
	margin-bottom:1em !important;
}
input:focus{
	border:1px solid #88b14C;
}
textarea {
	border:1px solid #999;
	-webkit-border-radius: 5px;
	border-radius: 5px;
	padding:0.5rem;
	outline:none;
	width:100%;
	margin-bottom:1em !important;
}
textarea:focus{
	border:1px solid #88b14C;
}

select {
	border:1px solid #999;
	-webkit-border-radius: 5px;
	border-radius: 5px;
	padding:0.7rem 0.5rem 0.7rem 0.5rem;
	outline:none;
	width:100%;
	margin-bottom:1em !important;
}
select:focus{
	border:1px solid #88b14C;
}
input[type=checkbox]{
	width:1.2rem !important;
	height:1.2rem !important;
	margin-top: 0 !important;
	vertical-align:text-top;
	margin-bottom:1em !important;
}
h1{
	font-family:'Roboto';
	font-size:1.7rem;
	color:#88b14C;
	padding:1rem 0.5rem 1rem 0;
	text-align:center;
}
h2{
	font-family:'Roboto';
	font-size:1.5rem;
	color:#88b14C;
	/*color:#fff !important;*/
	padding:0.5rem 0.5rem 0.5rem 0;
	text-align:center;
}
.avis-marc h2{
	font-family:'Roboto';
	font-size:1.5rem;
	color:#88b14C !important;
	padding:0.5rem 0.5rem 0.5rem 0;
	text-align:center;
}

h3,h4,h5,h6{
	margin-top:1.5m;
	font-family:'Roboto';
	font-size:1rem;
	color:#88b14C;
	padding:0.5rem 0.5rem 0.5rem 0;
}

/* loader */
#loader {
	display:none;
	position: fixed;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    z-index: 99999;
    background: url('spinner.gif') 50% 50% no-repeat rgb(249,249,249);
    opacity: 0.3;
}


.clear-top{
	clear:both;margin-top:1rem
}
.no-display{
	display:none;
}
.close{
	color:#fff !important;
}
.boto-verd-fosc{
	background-color:#88b14c;
	color:#fff;
	padding:0.5rem 1rem 0.5rem 1rem;
	-webkit-border-radius: 5px;
	border-radius: 5px;
	text-align:center;
	font-family:'montserratregular';
}
.link-verd-fosc{
	color:#88b14c;
	padding:0.5rem 1rem 0.5rem 1rem;
	text-align:center;
	text-decoration:underline;
	font-family:'montserratregular';
}
.boto-verd-fosc:hover{
	background-color:#6b6b6b;
	cursor:pointer;
}
.link-verd-fosc:hover{
	cursor:pointer;
}
.rem100{
	width:100%;
	margin-bottom:1rem;
}
.blanc{
	color:#fff;
}
.i_error{
	background-color:#f3b712;
	padding:0.5rem 1rem 0.5rem 1rem;
	-webkit-border-radius: 5px;
	border-radius: 5px;
	display:none;
	margin-bottom:1rem;
	opacity:0.7;
	color:#333;
}
.i_info{
	background-color:#a7cd7a;
	padding:0.5rem 1rem 0.5rem 1rem;
	-webkit-border-radius: 5px;
	border-radius: 5px;
	margin-bottom:1rem;
	opacity:0.7;
	color:#333;
}

/* definicions particulars de cookies */

#cookies-form{
	display:none;
	position: fixed;
	bottom:0px;
    left: 0px;
    width: 100%;
    z-index: 99999;
	background-color:#ddd;
	font-family: 'Roboto', sans-serif;
	font-weight:300;
	color:#333;
	padding:1rem;
}
#cookies-form h4{
	font-family: 'Roboto', sans-serif;
	font-weight:500;
	font-size:1.3rem;
	color:#333;
}
#cookies-form a{
	color:#333;
	text-decoration:underline;
	font-weight:300;
}
#cookies-form a:hover{
	color:#88b14C;
}
.cookies-check[type=checkbox]{
	width:1.2rem !important;
	height:1.2rem !important;
	margin-top: 0 !important;
	vertical-align:text-bottom;
}
.cookies-boto{
	display:inline-block;
	margin-top:1rem;
	margin-bottom:1rem;
	background-color:#333;
	color:#fff;
	padding:0.5rem 1rem 0.5rem 1rem;
	-webkit-border-radius: 5px;
	border-radius: 5px;
	text-align:center;
	font-family: 'Roboto', sans-serif;
	font-weight:300;
}
.cookies-boto:hover{
	background-color:#88b14C;
	cursor:pointer;
}

/* definiciona particulars del mòdul menu.php */

#div_menu{
	padding:0.5rem;
	background-color:#88b14C;
	position:fixed;
	z-index:999999;
}
#div_menu i{
	font-size:1.5rem;
	margin-top:0.3rem;
	margin-right:0.5rem;
	color:#fff;
}
#div_menu i:hover{
	color:#666666;
}

#div_menu a{
	color:#fff;
	font-weight:100;
}
#div_menu a:hover{
	text-decoration:none;
	color:#666666;
}
#icona-idioma{
	float:right;
	margin-right:1rem;
}
#icona-idioma-menu{
	display:none;
	position:fixed;
	right:0px;
	top:3.1rem;
	z-index:999999;
	background-color:#ddd;
	padding:0rem 1rem 0rem 1rem;
}
#icona-menu{
	float:right;
	margin-right:0.5rem;
}
#span-idioma{
	font-size:1.2rem;
	color:#fff;
}
#span-idioma:hover{
	cursor:pointer;
	color:#88b14c;
}
#menu-telefon{
	color:#fff;
	padding-right:1.5rem;
}
#menu-telefon:hover{
	color:#666666;
}
#menu-email{
	color:#fff;
	padding-right:1.5rem;
    unicode-bidi: bidi-override;
    direction: rtl;
}
#menu-email:hover{
	color:#666666;
}
#menu-email{
	color:#fff;
	padding-right:1.5rem;
    unicode-bidi: bidi-override;
    direction: rtl;
}
#menu-email:hover{
	color:#666666;
}
#menu-email-2{
	color:#88b14C;
	padding-right:1.5rem;
    unicode-bidi: bidi-override;
    direction: rtl;
}
#menu-email-2:hover{
	color:#fff;
}

#menu-whatsapp{
	color:#fff;
	padding-right:1.5rem;
}
#menu-whatsapp:hover{
	color:#666666;
}
.idioma-menu-opcio{
	display:block;
	color:#333 !important;
	margin:0.5rem;
	font-size:1.2rem;
}
.idioma-menu-opcio:hover{
	color:#88B14C !important;
	/*font-weight:bold !important;*/
}

/* defincions particulars del div menu */

#menu{
	width:100%;
	position:fixed;
	top:0px;
	background-color:#eee;
	display:none;
}
#menu i{
	color:#88b14C;
}
#menu i:hover{
	color:#666;
}
#icona-menu-tancar{
	float:right;
	font-size:2rem;
	margin-top:0.8rem;
	margin-right:1.5rem;
}
.logo{
	width:500px;
	max-width:80%;
	margin-top:6rem;
	margin-bottom:2rem;
}
.menu-opcio{
	display:block;
	font-size:1.5rem;
	font-weight:300;
	color:#666;
	text-decoration:none;
}
.menu-opcio:hover{
	color:#88b14C;
	text-decoration:none;
}

/* definicions del modul cercador */

#div_cercador{
	/*margin-top:3.5rem;*/
	padding-right:0px !important;
	padding-left:0px !important;
	background-size:cover;
	background-position-x: center;
}
#div_cercador h1{
	margin-top:2em;
	font-family:'Roboto';
	font-size:3em;
	color:#fff;
}
#text_cercador_1{
	/*color:#00411F;*/
	color:#fff !important;
	font-size:1.5em;
	font-family:'Roboto';
	font-weight:bold;
}
#text_cercador_2{
	/*color:#00411F;*/
	color:#fff !important;
	font-size:2em;
	font-family:'Roboto';
	font-weight:bold;
	margin-bottom:2em;
}

#cercador-marc{
	max-width:1200px;
	margin:0px auto 0px auto;
	text-align:center;
}
#cercador-l1{
	/*position:relative;*/
}
.em16{
	width:72%;
	margin-right:1%;
	margin-bottom:1em;
}
.em8{
	width:23%;
	margin-right:1%;
	margin-bottom:1em;
}
.boto-buscar{
	width:23%;
	display:inline-block;
	margin-right:1%;
	background-color:#88b14C;
	color:#fff;
	padding:0.5em 1em 0.5em 1em;
	-webkit-border-radius: 5px;
	border-radius: 5px;
	text-align:center;
	font-family:'Roboto';
}
.boto-buscar:hover{
	cursor:pointer;
	background-color:#666666;
}
.boto-buscar i{
	color:#fff;
	font-size:1.2em;
}
.text-intro{
	max-width:1000px !important;
	margin: 1em auto 1em auto;	
	text-align:left;
	font-size:1.2em;
}

/* definicions moduls show casa */

#div_show_canrajoler{
	margin-top:1em;
	/*padding-right:0px !important;
	padding-left:0px !important;*/
}
#div_show_calbellesmas{
	margin-top:1em;
	/*padding-right:0px !important;
	padding-left:0px !important;*/
}
#div_show_canriera{
	margin-top:1em;
	/*padding-right:0px !important;
	padding-left:0px !important;*/
}
.show-subtitul{
	margin-bottom:0px;
	padding-bottom:0px;
	text-align:center;
}
.show-list{
	display:block;
	margin-bottom:0.2em;
	margin-left:0em;
}
.show-list i{
	color:#88b14C;
}
.preu{
	font-size:2em;
	font-weight:bold;
	text-align:left;
	color:#88b14C;
	margin-bottom:0px;
}
.boto-verd{
	display:inline-block;
	background-color:#88b14C;
	color:#fff !important;
	padding:0.5em 1em 0.5em 1em;
	-webkit-border-radius: 5px;
	border-radius: 5px;
	text-align:center;
	font-family:'Roboto';
	font-size:1.3em;
	margin-top:1em;
	text-decoration:none;
}
.boto-verd:hover{
	cursor:pointer;
	background-color:#666666;
	text-decoration:none;
	color:#fff !important;
}
.boto-vermell{
	display:inline-block;
	background-color:#ff7900;
	color:#fff !important;
	padding:0.5em 1em 0.5em 1em;
	-webkit-border-radius: 5px;
	border-radius: 5px;
	text-align:center;
	font-family:'Roboto';
	font-size:1.3em;
	margin-top:1em;
	text-decoration:none;
}
.boto-vermell:hover{
	cursor:pointer;
	background-color:#666666;
	text-decoration:none;
	color:#fff !important;
}


#carousel-cr:hover{
	cursor:pointer;
}
#carousel-cb:hover{
	cursor:pointer;
}
#carousel-ri:hover{
	cursor:pointer;
}

/*definicions modul mapa */

.icona{
	text-align:center;
	font-size:2em;
	color:#88b14C;
}
.icona i{
	font-size:2.5em;
	color:#88b14C;
}

#mapa_google{
	width:100%;
	height:500px;
	margin-top:1em;
}

/*definicions del modul peu */

#div_peu{
	/*padding-right:0px !important;
	padding-left:0px !important;*/
	background-color:#666666;
}

.footer-col{
	text-align:center;
	margin-bottom:1em;
	font-size:1.1em;
	line-height:1.8em;
}
.footer-col h3{
	margin-top:1em;
	font-family:'Roboto';
	font-size:1.2em;
	color:#88b14C;
}
.footer-col a{
	color:#88b14C !important;
}
.footer-col a:hover{
	color:#fff !important;
}
.img-peu{
	width:180px;
	margin-bottom:1em;
}
#div_peu i{
	color:#88b14C;
	vertical-align:middle;
	margin-right:0.5em;
	margin-bottom:0.5em;
	font-size:1.2em;
}
#div_peu a{
	color:#88b14c;
	text-decoration:none;
}
#div_peu a:hover{
	color:#fff !important;
}
#peu-telefon{
	color:#88b14C;
	padding-right:1.5rem;
}
#peu-telefon:hover{
	color:#fff;
}
#peu-email{
	color:#88b14C;
	padding-right:1.5rem;
    unicode-bidi: bidi-override;
    direction: rtl;
}
#peu-email:hover{
	color:#fff;
}
#peu-whatsapp{
	color:#88b14C;
	padding-right:1.5rem;
}
#peu-whatsapp:hover{
	color:#fff;
}

/* devinicions del modul avis */

.avis-marc{
	margin-top:5em;
	max-width:1200px;
	margin:5em auto 1em auto;
}
.avis-marc a{
	color:#88b14C;
	font-weight:bold;
}
.avis-marc a:hover{
	color:#88b14C;
	font-weight:bold;
}

/* definicions del formulari */

#formulari_contacte{
	margin-top:5em;
	max-width:1000px;
	margin:5em auto 1em auto;
}
#formulari_contacte a{
	color:#88b14C !important;
}
.boto-enviar{
	width:100%;
	display:inline-block;
	margin-right:1%;
	background-color:#88b14C;
	color:#fff;
	padding:0.5em 1em 0.5em 1em;
	-webkit-border-radius: 5px;
	border-radius: 5px;
	text-align:center;
	font-family:'Roboto';
	margin-bottom:1em;
	border:none !important;
	box-shadow:none !important;
	outline:none !important;
}
.boto-enviar:hover{
	cursor:pointer;
	background-color:#666666;
	border:none !important;
	box-shadow:none !important;
	outline:none !important;
}
.boto-enviar:active{
	cursor:pointer;
	background-color:#ff5f01;
	border:none !important;
	box-shadow:none !important;
	outline:none !important;
}
.boto-enviar i{
	color:#fff;
	font-size:1.2em;
}
.f_error{
	display:none;
	margin-bottom:1em;
	background-color:#ffd807;
	color:#005c00;
	padding:2em;
	width:98%;
	-webkit-border-radius: 5px;
	border-radius: 5px;
}
#atencio_enviat{
	display:none;
	margin:5em auto 2em auto;
	background-color:#ffd807;
	color:#666666;
	padding:2em;
	width:100%;
	-webkit-border-radius: 5px;
	border-radius: 5px;
	max-width:1000px;
}
#atencio_error{
	display:none;
	margin:5em auto 2em auto;
	background-color:#ffd807;
	color:#666666;
	padding:2em;
	width:100%;
	-webkit-border-radius: 5px;
	border-radius: 5px;
	max-width:1000px;
}
#imatge-casa{
	width:100%;
	margin-bottom:1em;
}

/* modul casa */

#div_casa{
}
#foto-cap{
	padding-right:0px !important;
	padding-left:0px !important;
	background-size:cover;
	background-position-x: center;
}

#titol_casa{
	margin-top:12em;
	text-align:center;
}
#titol_casa h2{
	color:#00411F;
}
.logo-casa{
	width:150px;
	max-width:80%;
	margin-top:4rem;
	margin-bottom:2rem;
}
#descripcio_casa{
	max-width:1200px;
	margin:2em auto 1em auto;
}
#tour_virtual{
	max-width:1200px;
	margin:2em auto 1em auto;
}
#preus_dispo{
	max-width:1200px;
	margin:2em auto 1em auto;
}
.preus{
	border-collapse:collapse;
	width:100%;
}
.preus td{
	border:1px solid #bbb;
	padding:1em;
}
.import{
	font-weight:bold;
	font-size:1.2em;
	text-align:center;
}

/* opinions */

#opinions{
	max-width:1200px;
	margin:2em auto 1em auto;
}

/* Error 404 */

#div_error{
	margin-top:10em;
	margin-bottom:5em;
}

.h1-error{
	font-size:3em;
	text-align:center;
}
.h2-error{
	font-size:2em;
	text-align:center;
}

/* Cases disponibles */

#div_disponibles{
	margin:6em auto 2em auto;
	max-width:1200px;
}
.casa-disponible{
	margin-bottom:2em;
}
.casa-imatge{
	width:100%;
}
.casa-titol{
	font-size:1.2em;
	margin-top:2em;
	margin-bottom:0px;
	text-align:center;
}
.casa-preu{
	font-size:1.5em;
}

.copyright{
	text-align:center;
	color:#88b14C;
}

#RuralApp_reviews{
	max-width:1000px;
	margin: 1em auto 1em auto;	
}

#prat-esquerra{
	display:none;
}
#prat-dreta{
	display:block
}
.ms-1em{
	margin-top:1em !important;
}

.p_stars{
	margin-top:-1em;
}
.banner_info{
	margin-top:1em;
	margin-bottom: 1em;
	background-color:#ffebb6;
	-webkit-border-radius: 5px;
	border-radius: 5px;
	padding:0.5em;
	line-height:1.5em;
}
.resposta{
	margin-top:1em;
	margin-bottom: 1em;
	margin-right: 5em;
	background-color:#ffebb6;
	-webkit-border-radius: 5px;
	border-radius: 5px;
	padding:0.5em;
	line-height:1.5em;
}
.montserratbold_verd_fosc{
	font-weight:bold;
}
.casa_stars{
	height: 1.2em;
	width: 7em;
	vertical-align:bottom;
	margin-right: 0.5em;
}
    .chart-wrap {
        /*--chart-width:420px;*/
		--chart-width:100%;
        --grid-color:#ddd;
        --bar-color:#f3b712;
        --bar-thickness:40px;
        --bar-rounded: 3px;
        --bar-spacing:10px;
 
        width:var(--chart-width);
        border-bottom:1px solid var(--grid-color);
		margin-top:0.5em;
    }
 
    /*.chart-wrap .title{
        font-weight:bold;
        padding:1.8em 0;
        text-align:center;
        white-space:nowrap;
    }*/
 
    /* cuando definimos el gráfico en horizontal, lo giramos 90 grados */
    .chart-wrap.horizontal .grid{
        transform:rotate(-90deg);
    }
 
    .chart-wrap.horizontal .bar::after{
        /* giramos las letras para horizontal*/
        transform: rotate(45deg);
        padding-top:0px;
        display: block;
    }
 
    .chart-wrap .grid{
        margin-left:0px;
        position:relative;
        padding:5px 0 5px 0;
        height:100%;
        width:65%;
        border-left:1px solid var(--grid-color);
    }
	
    /* posicionamos el % del gráfico*/
    .chart-wrap .grid::before{
        font-size:0.8em;
        font-weight:bold;
        /*content:'0%';*/
        position:absolute;
        /*left:-0.5em;
        top:-1.5em;*/
		left:0.5em;
		top:0em;
    }
    .chart-wrap .grid::after{
        font-size:0.8em;
        font-weight:bold;
        /*content:'100%';*/
        position:absolute;
        /*right:-1.5em;
        top:-1.5em;*/
		right:0.5em;
		top:0em;
    }
 
    /* giramos las valores de 0% y 100% para horizontal */
    .chart-wrap.horizontal .grid::before, .chart-wrap.horizontal .grid::after {
        transform: rotate(90deg);
    }
 
    .chart-wrap .bar {
        width: var(--bar-value);
        height:var(--bar-thickness);
        margin:var(--bar-spacing) 0;
        background-color:var(--bar-color);
        border-radius:0 var(--bar-rounded) var(--bar-rounded) 0;
    }
 
    .chart-wrap .bar:hover{
        opacity:0.7;
    }
 
    .chart-wrap .bar::after{
        content:attr(data-name);
        margin-left:100%;
		/*margin-left:0em;*/
        padding:12px 5px 10px 5px;
        display:inline-block;
        white-space:nowrap;
		font-size:0.8em;
    }
	.chart-wrap span{
		display:inline-block;
		margin-top:0.7em;
		margin-left:0.5em;
	}
	
@media only screen and (max-width: 1300px) {
	.logo{
		width:350px;
		max-width:80%;
		margin-top:4rem;
		margin-bottom:1rem;
	}
	.logo-casa{
		width:75px;
		max-width:80%;
		margin-top:0rem;
		margin-bottom:1rem;
	}
	#text_cercador_1{
		display:none;
	}
}


@media only screen and (max-width: 900px) {
	#menu-telefon{
		display:none;
	}
	#menu-email{
		display:none;
	}
	#menu-whatsapp{
		display:none;
	}
	#RuralApp_reviews{
	max-width:850px;
	}
}


}

@media only screen and (max-width: 768px) {
	
	#prat-esquerra{
		display:block;
	}
	#prat-dreta{
		display:none
	}

}